From 86fc9242c4862b817ac19198daea3cc9169fa9d9 Mon Sep 17 00:00:00 2001 From: Jhananithaa Balu Date: Sat, 19 Oct 2024 20:22:39 +0530 Subject: [PATCH 1/4] Updated the doctors page UI by adding pop up for displaying the doctor's profile details instead of showing the details in separate page --- Frontend/src/components/DoctorProfile.jsx | 87 +++++++++-------------- Frontend/src/components/Doctors.jsx | 41 ++++++----- 2 files changed, 58 insertions(+), 70 deletions(-) diff --git a/Frontend/src/components/DoctorProfile.jsx b/Frontend/src/components/DoctorProfile.jsx index 049beaa..839b102 100644 --- a/Frontend/src/components/DoctorProfile.jsx +++ b/Frontend/src/components/DoctorProfile.jsx @@ -1,60 +1,41 @@ -import React from "react"; -import { useParams, Link, useNavigate } from "react-router-dom"; -import { FaUserMd, FaCalendar, FaCertificate, FaUsers, FaCalendarPlus } from "react-icons/fa"; +import React from 'react'; +import { FaCalendarPlus } from 'react-icons/fa'; +import { useNavigate } from 'react-router-dom'; -const DoctorProfile = ({ doctors }) => { - const { id } = useParams(); - const navigate = useNavigate(); - const doctor = doctors.find(d => d.id === parseInt(id)); +const DoctorModal = ({ doctor, onClose, isOpen }) => { + const navigate = useNavigate(); // Initialize useNavigate - if (!doctor) { - return
Doctor not found
; - } + if (!isOpen) return null; // Return null if the modal is not open - const handleBookAppointment = () => { - navigate(`/appointments?doctorId=${doctor.id}`); - }; + const handleBookAppointment = () => { + navigate(`/appointments?doctorId=${doctor.id}`); // Navigate to the appointments page + onClose(); // Close the modal after navigating + }; - return ( -
- ← Back to Doctors -
-
- {doctor.name} -
-

{doctor.name}

-

{doctor.specialty}

-
+ return ( +
+
+ +
+ {doctor.name} +

{doctor.name}

+

{doctor.specialty}

+

Experience: {doctor.experience} years

+

Patients: {doctor.patients}

+

{doctor.bio}

+ +
+
-
-
- - Experience: {doctor.experience} years -
-
- - Appointments: {doctor.appointments} -
-
- - Qualifications: {doctor.qualifications} -
-
- - Patients: {doctor.patients} -
-
-

{doctor.bio}

- -
-
- ); + ); }; -export default DoctorProfile; +export default DoctorModal; diff --git a/Frontend/src/components/Doctors.jsx b/Frontend/src/components/Doctors.jsx index 0a3accc..92fcb4c 100644 --- a/Frontend/src/components/Doctors.jsx +++ b/Frontend/src/components/Doctors.jsx @@ -1,19 +1,28 @@ import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { motion } from 'framer-motion'; -import { FaUserMd, FaSearch, FaEye, FaCalendarPlus } from 'react-icons/fa'; +import { FaSearch, FaCalendarPlus } from 'react-icons/fa'; +import DoctorModal from './DoctorProfile'; // Import the modal component const Doctors = ({ doctors }) => { const navigate = useNavigate(); const [searchTerm, setSearchTerm] = useState(''); + const [selectedDoctor, setSelectedDoctor] = useState(null); // State to manage selected doctor + const [isModalOpen, setIsModalOpen] = useState(false); // State to manage modal visibility const filteredDoctors = doctors.filter(doctor => doctor.name.toLowerCase().includes(searchTerm.toLowerCase()) || doctor.specialty.toLowerCase().includes(searchTerm.toLowerCase()) ); - const handleBookAppointment = (doctorId) => { - navigate(`/appointments?doctorId=${doctorId}`); + const handleOpenModal = (doctor) => { + setSelectedDoctor(doctor); + setIsModalOpen(true); // Open the modal + }; + + const handleCloseModal = () => { + setIsModalOpen(false); + setSelectedDoctor(null); // Reset the selected doctor }; return ( @@ -34,11 +43,11 @@ const Doctors = ({ doctors }) => {
- {filteredDoctors.map((doctor, index) => ( + {filteredDoctors.map((doctor) => ( handleOpenModal(doctor)} // Open modal on card click > {doctor.name}

{doctor.name}

@@ -47,21 +56,12 @@ const Doctors = ({ doctors }) => { Patients: {doctor.patients} Experience: {doctor.experience} years
-
- navigate(`/doctor/${doctor.id}`)} - > - - View Profile - +
handleBookAppointment(doctor.id)} + onClick={() => navigate(`/appointments?doctorId=${doctor.id}`)} > Book Appointment @@ -70,6 +70,13 @@ const Doctors = ({ doctors }) => { ))}
+ + {/* Doctor Modal */} +
); }; From 2b898a044bae0e73355aee4e6d646952a940339d Mon Sep 17 00:00:00 2001 From: Jhananithaa Balu Date: Sun, 20 Oct 2024 20:21:57 +0530 Subject: [PATCH 2/4] Added 'i' button on the doctors page, when the user clicks on it then the doctor's profile pop up will come --- Frontend/src/components/Doctors.jsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/Frontend/src/components/Doctors.jsx b/Frontend/src/components/Doctors.jsx index 92fcb4c..b0a1276 100644 --- a/Frontend/src/components/Doctors.jsx +++ b/Frontend/src/components/Doctors.jsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { motion } from 'framer-motion'; -import { FaSearch, FaCalendarPlus } from 'react-icons/fa'; +import { FaSearch, FaCalendarPlus, FaInfoCircle } from 'react-icons/fa'; import DoctorModal from './DoctorProfile'; // Import the modal component const Doctors = ({ doctors }) => { @@ -46,8 +46,7 @@ const Doctors = ({ doctors }) => { {filteredDoctors.map((doctor) => ( handleOpenModal(doctor)} // Open modal on card click + className="bg-white p-4 sm:p-6 rounded-lg shadow-lg transition-all duration-300 relative" > {doctor.name}

{doctor.name}

@@ -56,6 +55,8 @@ const Doctors = ({ doctors }) => { Patients: {doctor.patients} Experience: {doctor.experience} years + + {/* Book Appointment button */}
{ Book Appointment
+ + {/* 'i' button in bottom-left corner */} + handleOpenModal(doctor)} // Open modal on 'i' button click + > + + ))} From 1133e71bc45b56b67aa64124aeeafb20699ed639 Mon Sep 17 00:00:00 2001 From: Jhananithaa Balu Date: Mon, 21 Oct 2024 00:04:09 +0530 Subject: [PATCH 3/4] Reduced the i icon size and enable onclick option on the doctor's card --- Frontend/src/components/Doctors.jsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/Frontend/src/components/Doctors.jsx b/Frontend/src/components/Doctors.jsx index b0a1276..ef5bd70 100644 --- a/Frontend/src/components/Doctors.jsx +++ b/Frontend/src/components/Doctors.jsx @@ -46,7 +46,8 @@ const Doctors = ({ doctors }) => { {filteredDoctors.map((doctor) => ( handleOpenModal(doctor)} // Open modal when clicking on the card > {doctor.name}

{doctor.name}

@@ -62,7 +63,10 @@ const Doctors = ({ doctors }) => { whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} className="bg-primary text-accent px-4 py-2 rounded-full font-bold flex items-center justify-center" - onClick={() => navigate(`/appointments?doctorId=${doctor.id}`)} + onClick={(e) => { + e.stopPropagation(); // Prevent triggering the card click event + navigate(`/appointments?doctorId=${doctor.id}`); + }} > Book Appointment @@ -73,10 +77,13 @@ const Doctors = ({ doctors }) => { handleOpenModal(doctor)} // Open modal on 'i' button click + className="absolute bottom-2 left-2 bg-accent text-black p-1.5 rounded-full flex items-center justify-center shadow-md" // Make the button smaller + onClick={(e) => { + e.stopPropagation(); // Prevent triggering the card click event + handleOpenModal(doctor); // Open modal on 'i' button click + }} > - + ))} From 9dc741eb8e8b4fc75d8bbf7e6afe770c5aec8623 Mon Sep 17 00:00:00 2001 From: Jhananithaa Balu Date: Mon, 21 Oct 2024 12:55:21 +0530 Subject: [PATCH 4/4] Adjuated the i button right corner and added the close functionality of the pop up when the user click outside the pop up. --- Frontend/src/components/Doctors.jsx | 44 +++++++++++++++++++++++------ 1 file changed, 36 insertions(+), 8 deletions(-) diff --git a/Frontend/src/components/Doctors.jsx b/Frontend/src/components/Doctors.jsx index ef5bd70..8900d18 100644 --- a/Frontend/src/components/Doctors.jsx +++ b/Frontend/src/components/Doctors.jsx @@ -46,7 +46,7 @@ const Doctors = ({ doctors }) => { {filteredDoctors.map((doctor) => ( handleOpenModal(doctor)} // Open modal when clicking on the card > {doctor.name} @@ -73,11 +73,11 @@ const Doctors = ({ doctors }) => { - {/* 'i' button in bottom-left corner */} + {/* 'i' button in bottom-right corner */} { e.stopPropagation(); // Prevent triggering the card click event handleOpenModal(doctor); // Open modal on 'i' button click @@ -90,11 +90,39 @@ const Doctors = ({ doctors }) => { {/* Doctor Modal */} - + {isModalOpen && selectedDoctor && ( +
+
e.stopPropagation()} // Prevent click events from closing the modal + > + +
+ {selectedDoctor.name} +

{selectedDoctor.name}

+

{selectedDoctor.specialty}

+

Experience: {selectedDoctor.experience} years

+

Patients: {selectedDoctor.patients}

+

{selectedDoctor.bio}

+ +
+
+
+ )} ); };