Index: frontend/src/App.js =================================================================== --- frontend/src/App.js (revision d30d82041a2812a401511ea2aadede496a8eeb01) +++ frontend/src/App.js (revision f05de0502f3c7c6a4149420915249e784c827f57) @@ -1,8 +1,6 @@ - - import React, { useEffect, useState } from 'react'; +import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'; import Navbar from './components/Navbar'; -import ProtectedRoute from './components/ProtectedRoute'; -import Login from './pages/Login'; +import Dashboard from './pages/Dashboard'; import PatientList from './pages/patients/PatientList'; import PatientDetail from './pages/patients/PatientDetail'; @@ -10,15 +8,20 @@ import DoctorList from './pages/doctors/DoctorList'; import DoctorDetail from './pages/doctors/DoctorDetail'; -import DoctorForm from './pages/doctors/DoctorForm';v +import DoctorForm from './pages/doctors/DoctorForm'; import AppointmentList from './pages/appointments/AppointmentList'; import AppointmentForm from './pages/appointments/AppointmentForm'; +import MedicalRecordList from './pages/medical-records/MedicalRecordList'; +import MedicalRecordDetail from './pages/medical-records/MedicalRecordDetail'; +import BillingList from './pages/billing/BillingList'; +import BillingDetail from './pages/billing/BillingDetail'; +import ReferralList from './pages/referrals/ReferralList'; +import MedicalReportList from './pages/medical-reports/MedicalReportList'; +import LabTestList from './pages/lab-tests/LabTestList'; +import LabResultForm from './pages/lab-tests/LabResultForm'; +import ProcedureList from './pages/procedures/ProcedureList'; +import ProcedureResultForm from './pages/procedures/ProcedureResultForm'; import DepartmentList from './pages/departments/DepartmentList'; import DepartmentDetail from './pages/departments/DepartmentDetail'; import DoctorsByDepartment from './pages/departments/DoctorsByDepartment'; -import MedicalRecordList from './pages/medical-records/MedicalRecordList'; -import MedicalRecordDetail from './pages/medical-records/MedicalRecordDetail'; -import ReferralList from './pages/referrals/ReferralList'; -import MedicalReportList from './pages/medical-reports/MedicalReportList'; - function App() { @@ -74,7 +77,20 @@ } /> - {/* Referral Routes */} } /> + + {/* Lab Test Routes */} + } /> + } /> + + {/* Procedure Routes */} + } /> + } /> + + {/* Billing Routes */} + } /> + } /> + + @@ -82,7 +98,5 @@ ); +} - - - } export default App; Index: frontend/src/pages/billing/BillingDetail.js =================================================================== --- frontend/src/pages/billing/BillingDetail.js (revision f05de0502f3c7c6a4149420915249e784c827f57) +++ frontend/src/pages/billing/BillingDetail.js (revision f05de0502f3c7c6a4149420915249e784c827f57) @@ -0,0 +1,234 @@ +import React, { useState, useEffect } from 'react'; +import { useParams, useNavigate } from 'react-router-dom'; +import { billingService } from '../../services/billingService'; +import Loading from '../../components/Loading'; +import ErrorAlert from '../../components/ErrorAlert'; +import SuccessAlert from '../../components/SuccessAlert'; + +function BillingDetail() { + const { id } = useParams(); + const navigate = useNavigate(); + const user = JSON.parse(localStorage.getItem('user') || '{}'); + const isPatient = user.role === 'PATIENT'; + + const [billing, setBilling] = useState(null); + const [billingDetail, setBillingDetail] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [success, setSuccess] = useState(null); + const [updating, setUpdating] = useState(false); + const [paymentStatus, setPaymentStatus] = useState(''); + const [downloading, setDownloading] = useState(false); + + useEffect(() => { + fetchBilling(); + }, [id]); + + const fetchBilling = async () => { + try { + setLoading(true); + const response = await billingService.getBillingById(id); + setBilling(response.data); + setPaymentStatus(response.data.paymentStatus); + + // Fetch detailed billing information + try { + const detailResponse = await billingService.getBillingDetail(id); + setBillingDetail(detailResponse.data); + } catch (err) { + console.error('Could not fetch billing details:', err); + } + } catch (err) { + setError('Failed to fetch billing record'); + console.error(err); + } finally { + setLoading(false); + } + }; + + const handleUpdatePaymentStatus = async () => { + try { + setUpdating(true); + const response = await billingService.updatePaymentStatus(id, { + paymentStatus, + paymentDate: new Date().toISOString().split('T')[0], + }); + setBilling(response.data); + setSuccess('Payment status updated successfully!'); + } catch (err) { + setError('Failed to update payment status'); + } finally { + setUpdating(false); + } + }; + + const handleDownloadInvoice = async () => { + try { + setDownloading(true); + await billingService.downloadInvoicePDF(id); + setSuccess('Invoice downloaded successfully!'); + } catch (err) { + setError('Failed to download invoice'); + console.error(err); + } finally { + setDownloading(false); + } + }; + + if (loading) return ; + + if (!billing) { + return ( +
+ navigate('/billing')} /> +
+ ); + } + + return ( +
+
+

Billing Record #{billing.billId}

+
+ + +
+
+ + {error && setError(null)} />} + {success && setSuccess(null)} />} + +
+
+

Billing Information

+
+ + + + +
+
+ + {!isPatient && ( +
+

Update Payment Status

+
+
+ + +
+ +
+
+ )} + +
+

Patient Details

+
+ {billingDetail && ( + <> + + + + + )} +
+
+
+ +
+

Itemized Services

+ + {billingDetail && (billingDetail.procedures.length > 0 || billingDetail.labTests.length > 0) ? ( +
+ {billingDetail.procedures.length > 0 && ( +
+

Procedures

+ + + + + + + + + {billingDetail.procedures.map((proc, idx) => ( + + + + + ))} + +
DescriptionCost
{proc.description}${proc.cost}
+
+ )} + + {billingDetail.labTests.length > 0 && ( +
+

Lab Tests

+ + + + + + + + + {billingDetail.labTests.map((test, idx) => ( + + + + + ))} + +
DescriptionCost
{test.description}${test.cost}
+
+ )} + +
+
+

Total Amount:

+

${billing.totalCost}

+
+
+
+ ) : ( +

No services itemized for this billing record.

+ )} +
+
+ ); +} + +function InfoRow({ label, value }) { + return ( +
+ {label}: + {value || 'N/A'} +
+ ); +} + +export default BillingDetail; Index: frontend/src/pages/billing/BillingList.js =================================================================== --- frontend/src/pages/billing/BillingList.js (revision f05de0502f3c7c6a4149420915249e784c827f57) +++ frontend/src/pages/billing/BillingList.js (revision f05de0502f3c7c6a4149420915249e784c827f57) @@ -0,0 +1,88 @@ +import React, { useState, useEffect } from 'react'; +import { Link, useSearchParams } from 'react-router-dom'; +import { billingService } from '../../services/billingService'; +import Loading from '../../components/Loading'; +import ErrorAlert from '../../components/ErrorAlert'; + +function BillingList() { + const [billings, setBillings] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [searchParams] = useSearchParams(); + const patientId = searchParams.get('patientId'); + const user = JSON.parse(localStorage.getItem('user') || '{}'); + + useEffect(() => { + fetchBillings(); + }, [patientId]); + + const fetchBillings = async () => { + try { + setLoading(true); + let response; + if (patientId) { + response = await billingService.getBillingHistoryForPatient(patientId); + } else if (user.role === 'PATIENT') { + // Patients can only view their own billing history + response = await billingService.getBillingHistoryForPatient(user.patientId); + } else { + response = await billingService.getAllBillings(); + } + setBillings(response.data); + } catch (err) { + setError('Failed to fetch billing records'); + console.error(err); + } finally { + setLoading(false); + } + }; + + if (loading) return ; + + return ( +
+

{patientId ? 'Patient Billing History' : 'Billing Records'}

+ + {error && setError(null)} />} + +
+ + + + + + + + + + + + {billings.map(billing => ( + + + + + + + + ))} + +
PatientTotal CostPayment StatusPayment DateActions
{billing.patientName}${billing.totalCost} + + {billing.paymentStatus} + + {billing.paymentDate || 'Not paid'} + e.currentTarget.style.textDecoration = 'underline'} onMouseLeave={(e) => e.currentTarget.style.textDecoration = 'none'}> + View + +
+
+
+ ); +} + +export default BillingList; Index: frontend/src/pages/lab-tests/LabResultForm.js =================================================================== --- frontend/src/pages/lab-tests/LabResultForm.js (revision f05de0502f3c7c6a4149420915249e784c827f57) +++ frontend/src/pages/lab-tests/LabResultForm.js (revision f05de0502f3c7c6a4149420915249e784c827f57) @@ -0,0 +1,297 @@ +import React, { useState, useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { labService } from '../../services/labService'; +import { patientService } from '../../services/patientService'; +import { medicalRecordService } from '../../services/medicalRecordService'; +import ErrorAlert from '../../components/ErrorAlert'; +import SuccessAlert from '../../components/SuccessAlert'; + +function LabResultForm() { + const navigate = useNavigate(); + const [error, setError] = useState(null); + const [success, setSuccess] = useState(null); + const [loading, setLoading] = useState(false); + const [searchEmbg, setSearchEmbg] = useState(''); + const [patient, setPatient] = useState(null); + const [pendingTests, setPendingTests] = useState([]); + const [selectedTest, setSelectedTest] = useState(null); + const [medicalRecordId, setMedicalRecordId] = useState(null); + + const [formData, setFormData] = useState({ + medicalRecordId: '', + testId: '', + results: '', + resultDate: new Date().toISOString().split('T')[0], + }); + + const handleSearch = async (e) => { + e.preventDefault(); + setError(null); + setLoading(true); + + try { + if (!searchEmbg.trim()) { + setError('Please enter patient EMBG'); + setLoading(false); + return; + } + + const patientRes = await patientService.getPatientByEmbg(searchEmbg); + setPatient(patientRes.data); + + // Get medical record + const medicalRecordRes = await medicalRecordService.getMedicalRecordByPatientId(patientRes.data.patientId); + setMedicalRecordId(medicalRecordRes.data.recordId); + + // Get pending tests + const testsRes = await labService.getLabTestRequestsForPatient(patientRes.data.patientId); + setPendingTests(testsRes.data || []); + + setFormData(prev => ({ + ...prev, + medicalRecordId: medicalRecordRes.data.recordId + })); + } catch (err) { + setError('Patient not found or error loading tests'); + setPatient(null); + setPendingTests([]); + } finally { + setLoading(false); + } + }; + + const handleSelectTest = (test) => { + setSelectedTest(test); + setFormData(prev => ({ + ...prev, + testId: test.testId, + medicalRecordId: medicalRecordId || prev.medicalRecordId + })); + }; + + const handleChange = (e) => { + const { name, value } = e.target; + setFormData({ + ...formData, + [name]: value, + }); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + setError(null); + setSuccess(null); + + if (!formData.medicalRecordId || !formData.testId || !formData.results) { + setError('Please fill in all required fields'); + return; + } + + try { + setLoading(true); + + const submitData = { + medicalRecordId: parseInt(formData.medicalRecordId), + testId: parseInt(formData.testId), + results: formData.results, + resultDate: formData.resultDate, + }; + + await labService.submitLabResult(submitData); + + setSuccess('Lab result submitted successfully!'); + setFormData({ + medicalRecordId: '', + testId: '', + results: '', + resultDate: new Date().toISOString().split('T')[0], + }); + setSelectedTest(null); + setPatient(null); + setSearchEmbg(''); + setPendingTests([]); + + // Navigate back to lab tests page after a short delay + setTimeout(() => navigate('/lab-tests'), 2000); + } catch (err) { + setError('Failed to submit lab result: ' + (err.response?.data?.error || err.message)); + setLoading(false); + } + }; + + return ( +
+

Submit Lab Result

+ + {error && setError(null)} />} + {success && setSuccess(null)} />} + + {/* Search Patient Form */} +
+

Search Patient

+
+ setSearchEmbg(e.target.value)} + placeholder="Enter patient EMBG" + className="flex-1 px-4 py-2 border rounded-lg" + /> + +
+
+ + {/* Patient Info and Pending Tests */} + {patient && ( +
+ {/* Patient Card */} +
+

{patient.firstName} {patient.lastName}

+
+
+

EMBG

+

{patient.embg}

+
+
+

Blood Type

+

{patient.bloodType || 'N/A'}

+
+
+

Date of Birth

+

{patient.dateOfBirth}

+
+
+
+ + {/* Pending Tests List */} + {pendingTests.length > 0 ? ( +
+

Pending Lab Tests

+
+ {pendingTests.map((test) => ( +
handleSelectTest(test)} + className={`p-4 rounded-lg border-2 cursor-pointer transition ${ + selectedTest?.testId === test.testId + ? 'border-purple-600 bg-blue-50' + : 'border-gray-200 bg-gray-50 hover:border-blue-400' + }`} + > +

{test.testName}

+

Requested by: {test.doctorName}

+

Request Date: {test.requestDate}

+ {test.notes && ( +

Notes: {test.notes}

+ )} +
+ ))} +
+
+ ) : ( +
+

No pending lab tests for this patient

+
+ )} + + {/* Result Submission Form */} + {selectedTest && ( +
+

Submit Results for {selectedTest.testName}

+
+
+
+ + +
+
+ + +
+
+ +
+ +