Index: frontend/src/pages/doctors/DoctorDetail.js =================================================================== --- frontend/src/pages/doctors/DoctorDetail.js (revision 20468d38749c5a3ed89d6df4db22905a1d0c3df1) +++ frontend/src/pages/doctors/DoctorDetail.js (revision 20468d38749c5a3ed89d6df4db22905a1d0c3df1) @@ -0,0 +1,108 @@ +import React, { useState, useEffect } from 'react'; +import { useParams, Link, useNavigate } from 'react-router-dom'; +import { doctorService } from '../../services/doctorService'; +import Loading from '../../components/Loading'; +import ErrorAlert from '../../components/ErrorAlert'; + +function DoctorDetail() { + const formatDepartmentName = (name) => { + if (!name) return 'N/A'; + return name.replace(/_DEPT$/, '').replace(/_/g, ' ').split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' '); + }; + + const { id } = useParams(); + const navigate = useNavigate(); + const user = JSON.parse(localStorage.getItem('user') || '{}'); + const isPatient = user.role === 'PATIENT'; + const isAdmin = user.role === 'ADMIN'; + const isLabTechnician = user.role === 'LAB_TECHNICIAN'; + const isBillingAdmin = user.role === 'BILLING_ADMIN'; + + const [doctor, setDoctor] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + fetchDoctor(); + }, [id]); + + const fetchDoctor = async () => { + try { + setLoading(true); + const response = await doctorService.getDoctorById(id); + setDoctor(response.data); + } catch (err) { + setError('Failed to fetch doctor details'); + console.error(err); + } finally { + setLoading(false); + } + }; + + if (loading) return ; + + if (!doctor) { + return ( +
+ navigate('/doctors')} /> +
+ ); + } + + return ( +
+
+

Dr. {doctor.firstName} {doctor.lastName}

+
+ {isAdmin && ( + + Edit + + )} + +
+
+ + {error && setError(null)} />} + +
+
+

Professional Information

+
+ + + + +
+
+ + {!isPatient && !isLabTechnician && !isBillingAdmin && ( +
+

Quick Links

+
+ + View My Appointments + + + View Patients + +
+
+ )} +
+
+ ); +} + +function InfoRow({ label, value }) { + return ( +
+ {label}: + {value || 'N/A'} +
+ ); +} + +export default DoctorDetail; Index: frontend/src/pages/doctors/DoctorForm.js =================================================================== --- frontend/src/pages/doctors/DoctorForm.js (revision 20468d38749c5a3ed89d6df4db22905a1d0c3df1) +++ frontend/src/pages/doctors/DoctorForm.js (revision 20468d38749c5a3ed89d6df4db22905a1d0c3df1) @@ -0,0 +1,184 @@ +import React, { useState, useEffect } from 'react'; +import { useNavigate, useParams } from 'react-router-dom'; +import { doctorService } from '../../services/doctorService'; +import ErrorAlert from '../../components/ErrorAlert'; +import SuccessAlert from '../../components/SuccessAlert'; + +function DoctorForm() { + const { id } = useParams(); + const navigate = useNavigate(); + const [formData, setFormData] = useState({ + firstName: '', + lastName: '', + emailAddress: '', + levelId: '', + specializationId: '', + departmentId: '', + }); + const [error, setError] = useState(null); + const [success, setSuccess] = useState(null); + const [loading, setLoading] = useState(false); + + useEffect(() => { + if (id) { + fetchDoctor(); + } + }, [id]); + + const fetchDoctor = async () => { + try { + setLoading(true); + const response = await doctorService.getDoctorById(id); + setFormData({ + firstName: response.data.firstName, + lastName: response.data.lastName, + emailAddress: response.data.emailAddress, + levelId: response.data.level?.levelId || '', + specializationId: response.data.specialization?.specializationId || '', + departmentId: response.data.department?.departmentId || '', + }); + } catch (err) { + setError('Failed to fetch doctor'); + } finally { + setLoading(false); + } + }; + + const handleChange = (e) => { + const { name, value } = e.target; + setFormData(prev => ({ + ...prev, + [name]: value + })); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + + if (!formData.firstName || !formData.lastName || !formData.emailAddress) { + setError('Please fill in all required fields'); + return; + } + + try { + setLoading(true); + if (id) { + await doctorService.updateDoctor(id, formData); + setSuccess('Doctor updated successfully!'); + } else { + await doctorService.createDoctor(formData); + setSuccess('Doctor created successfully!'); + } + setTimeout(() => navigate('/doctors'), 1500); + } catch (err) { + setError(err.response?.data?.error || 'Failed to save doctor'); + } finally { + setLoading(false); + } + }; + + return ( +
+

+ {id ? 'Edit Doctor' : 'Add New Doctor'} +

+ + {error && setError(null)} />} + {success && setSuccess(null)} />} + +
+
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+
+ ); +} + +export default DoctorForm; Index: frontend/src/pages/doctors/DoctorList.js =================================================================== --- frontend/src/pages/doctors/DoctorList.js (revision 20468d38749c5a3ed89d6df4db22905a1d0c3df1) +++ frontend/src/pages/doctors/DoctorList.js (revision 20468d38749c5a3ed89d6df4db22905a1d0c3df1) @@ -0,0 +1,106 @@ +import React, { useState, useEffect } from 'react'; +import { Link } from 'react-router-dom'; +import { doctorService } from '../../services/doctorService'; +import Loading from '../../components/Loading'; +import ErrorAlert from '../../components/ErrorAlert'; + +function DoctorList() { + const user = JSON.parse(localStorage.getItem('user') || '{}'); + const isAdmin = user.role === 'ADMIN'; + const [doctors, setDoctors] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [searchTerm, setSearchTerm] = useState(''); + + useEffect(() => { + fetchDoctors(); + }, []); + + const fetchDoctors = async () => { + try { + setLoading(true); + const response = await doctorService.getAllDoctors(); + setDoctors(response.data); + } catch (err) { + setError('Failed to fetch doctors'); + console.error(err); + } finally { + setLoading(false); + } + }; + + const filteredDoctors = doctors.filter(doctor => + doctor.firstName.toLowerCase().includes(searchTerm.toLowerCase()) || + doctor.lastName.toLowerCase().includes(searchTerm.toLowerCase()) || + doctor.emailAddress.includes(searchTerm) + ); + + if (loading) return ; + + return ( +
+
+

Doctors

+ {isAdmin && ( + e.currentTarget.style.background = '#93c5fd'} onMouseLeave={(e) => e.currentTarget.style.background = '#bfdbfe'}> + Add Doctor + + )} +
+ + {error && setError(null)} />} + +
+ setSearchTerm(e.target.value)} + /> +
+ +
+ + + + + + + + + + + + + {filteredDoctors.map(doctor => ( + + + + + + + + + ))} + +
NameEmailSpecializationLevelDepartmentActions
{doctor.firstName} {doctor.lastName}{doctor.emailAddress}{doctor.specialization?.specializationName || 'N/A'}{doctor.level?.level || 'N/A'}{doctor.department?.departmentName ? doctor.department.departmentName.replace(/_DEPT$/, '').replace(/_/g, ' ').split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ') : 'N/A'} + e.currentTarget.style.textDecoration = 'underline'} onMouseLeave={(e) => e.currentTarget.style.textDecoration = 'none'}> + View + +
+
+
+ ); +} + +export default DoctorList;