Index: frontend/src/pages/patients/PatientDetail.js =================================================================== --- frontend/src/pages/patients/PatientDetail.js (revision 9af201e94b5a79beb92a30858fc54de4bc3b9449) +++ frontend/src/pages/patients/PatientDetail.js (revision 9af201e94b5a79beb92a30858fc54de4bc3b9449) @@ -0,0 +1,105 @@ +import React, { useState, useEffect } from 'react'; +import { useParams, Link, useNavigate } from 'react-router-dom'; +import { patientService } from '../../services/patientService'; +import Loading from '../../components/Loading'; +import ErrorAlert from '../../components/ErrorAlert'; + +function PatientDetail() { + const user = JSON.parse(localStorage.getItem('user') || '{}'); + const isAdmin = user.role === 'ADMIN'; + const isLabTechnician = user.role === 'LAB_TECHNICIAN'; + const { id } = useParams(); + const navigate = useNavigate(); + const [patient, setPatient] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + const fetchPatient = async () => { + try { + setLoading(true); + const response = await patientService.getPatientById(id); + setPatient(response.data); + } catch (err) { + setError('Failed to fetch patient details'); + console.error(err); + } finally { + setLoading(false); + } + }; + + fetchPatient(); + }, [id]); + + if (loading) return ; + + if (!patient) { + return ( +
+ navigate('/patients')} /> +
+ ); + } + + return ( +
+
+

{patient.firstName} {patient.lastName}

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

Personal Information

+
+ + + + + + +
+
+ + {!isLabTechnician && ( +
+

Quick Links

+
+ + View Appointments + + + View Medical Records + + + View Billing History + +
+
+ )} +
+
+ ); +} + +function InfoRow({ label, value }) { + return ( +
+ {label}: + {value || 'N/A'} +
+ ); +} + +export default PatientDetail; Index: frontend/src/pages/patients/PatientForm.js =================================================================== --- frontend/src/pages/patients/PatientForm.js (revision 9af201e94b5a79beb92a30858fc54de4bc3b9449) +++ frontend/src/pages/patients/PatientForm.js (revision 9af201e94b5a79beb92a30858fc54de4bc3b9449) @@ -0,0 +1,214 @@ +import React, { useState, useEffect } from 'react'; +import { useNavigate, useParams } from 'react-router-dom'; +import { patientService } from '../../services/patientService'; +import ErrorAlert from '../../components/ErrorAlert'; +import SuccessAlert from '../../components/SuccessAlert'; + +function PatientForm() { + const { id } = useParams(); + const navigate = useNavigate(); + const [formData, setFormData] = useState({ + firstName: '', + lastName: '', + emailAddress: '', + embg: '', + phoneNumber: '', + dateOfBirth: '', + gender: '', + bloodType: '', + }); + const [error, setError] = useState(null); + const [success, setSuccess] = useState(null); + const [loading, setLoading] = useState(false); + + useEffect(() => { + if (id) { + const fetchPatient = async () => { + try { + setLoading(true); + const response = await patientService.getPatientById(id); + setFormData(response.data); + } catch (err) { + setError('Failed to fetch patient'); + } finally { + setLoading(false); + } + }; + + fetchPatient(); + } + }, [id]); + + 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.embg) { + setError('Please fill in all required fields'); + return; + } + + try { + setLoading(true); + if (id) { + await patientService.updatePatient(id, formData); + setSuccess('Patient updated successfully!'); + } else { + await patientService.createPatient(formData); + setSuccess('Patient created successfully!'); + } + setTimeout(() => navigate('/patients'), 1500); + } catch (err) { + setError(err.response?.data?.error || 'Failed to save patient'); + } finally { + setLoading(false); + } + }; + + return ( +
+

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

+ + {error && setError(null)} />} + {success && setSuccess(null)} />} + +
+
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+
+ ); +} + +export default PatientForm; Index: frontend/src/pages/patients/PatientList.js =================================================================== --- frontend/src/pages/patients/PatientList.js (revision 9af201e94b5a79beb92a30858fc54de4bc3b9449) +++ frontend/src/pages/patients/PatientList.js (revision 9af201e94b5a79beb92a30858fc54de4bc3b9449) @@ -0,0 +1,104 @@ +import React, { useState, useEffect } from 'react'; +import { Link } from 'react-router-dom'; +import { patientService } from '../../services/patientService'; +import Loading from '../../components/Loading'; +import ErrorAlert from '../../components/ErrorAlert'; + +function PatientList() { + const user = JSON.parse(localStorage.getItem('user') || '{}'); + const isAdmin = user.role === 'ADMIN'; + const [patients, setPatients] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [searchTerm, setSearchTerm] = useState(''); + + useEffect(() => { + fetchPatients(); + }, []); + + const fetchPatients = async () => { + try { + setLoading(true); + const response = await patientService.getAllPatients(); + setPatients(response.data); + } catch (err) { + setError('Failed to fetch patients'); + console.error(err); + } finally { + setLoading(false); + } + }; + + const filteredPatients = patients.filter(patient => + patient.firstName.toLowerCase().includes(searchTerm.toLowerCase()) || + patient.lastName.toLowerCase().includes(searchTerm.toLowerCase()) || + patient.embg.includes(searchTerm) + ); + + if (loading) return ; + + return ( +
+
+

Patients

+ {isAdmin && ( + e.currentTarget.style.background = '#93c5fd'} onMouseLeave={(e) => e.currentTarget.style.background = '#bfdbfe'}> + Add Patient + + )} +
+ + {error && setError(null)} />} + +
+ setSearchTerm(e.target.value)} + /> +
+ +
+ + + + + + + + + + + + {filteredPatients.map(patient => ( + + + + + + + + ))} + +
NameEMBGEmailPhoneActions
{patient.firstName} {patient.lastName}{patient.embg}{patient.emailAddress}{patient.phoneNumber} + + View + +
+
+
+ ); +} + +export default PatientList;