Index: frontend/src/components/ProtectedRoute.js =================================================================== --- frontend/src/components/ProtectedRoute.js (revision 84249b19ce0ac1cc4b9f406f63132d99f6759053) +++ frontend/src/components/ProtectedRoute.js (revision 84249b19ce0ac1cc4b9f406f63132d99f6759053) @@ -0,0 +1,24 @@ +import React from 'react'; +import { Navigate } from 'react-router-dom'; + +function ProtectedRoute({ children, requiredRoles = [] }) { + const token = localStorage.getItem('token'); + const userStr = localStorage.getItem('user'); + + // If no token, redirect to login + if (!token) { + return ; + } + + // If roles are specified and user's role is not in the list, redirect to dashboard + if (requiredRoles.length > 0 && userStr) { + const user = JSON.parse(userStr); + if (!requiredRoles.includes(user.role)) { + return ; + } + } + + return children; +} + +export default ProtectedRoute; Index: frontend/src/pages/Dashboard.js =================================================================== --- frontend/src/pages/Dashboard.js (revision 84249b19ce0ac1cc4b9f406f63132d99f6759053) +++ frontend/src/pages/Dashboard.js (revision 84249b19ce0ac1cc4b9f406f63132d99f6759053) @@ -0,0 +1,651 @@ +import React, { useState, useEffect } from 'react'; +import { Link } from 'react-router-dom'; +import { patientService } from '../services/patientService'; +import { doctorService } from '../services/doctorService'; +import { appointmentService } from '../services/appointmentService'; +import { labService } from '../services/labService'; +import { billingService } from '../services/billingService'; +import { medicalRecordService } from '../services/medicalRecordService'; +import Loading from '../components/Loading'; + +function Dashboard() { + const [stats, setStats] = useState({ + patients: 0, + doctors: 0, + appointments: 0, + }); + const [userAppointments, setUserAppointments] = useState([]); + const [doctorInfo, setDoctorInfo] = useState(null); + const [pendingLabTests, setPendingLabTests] = useState([]); + const [billings, setBillings] = useState([]); + const [medicalRecords, setMedicalRecords] = useState([]); + const [patientBillings, setPatientBillings] = useState([]); + const [loading, setLoading] = useState(true); + const user = JSON.parse(localStorage.getItem('user') || '{}'); + const isPatient = user.role === 'PATIENT'; + const isDoctor = user.role === 'DOCTOR'; + const isLabTechnician = user.role === 'LAB_TECHNICIAN'; + const isBillingAdmin = user.role === 'BILLING_ADMIN'; + + useEffect(() => { + const fetchStats = async () => { + try { + if (isPatient) { + // For patients, fetch their own appointments, medical records, and billing + const [appointmentsRes, medicalRes, billingRes] = await Promise.all([ + appointmentService.getAppointmentsForPatient(user.patientId), + medicalRecordService.getMedicalRecordByPatientId(user.patientId), + billingService.getBillingHistoryForPatient(user.patientId) + ]); + setUserAppointments(appointmentsRes.data || []); + // Handle medical records - could be single object or array + const medicalData = medicalRes.data; + const medicalArray = Array.isArray(medicalData) ? medicalData : (medicalData ? [medicalData] : []); + setMedicalRecords(medicalArray); + setPatientBillings(billingRes.data || []); + } else if (isDoctor) { + // For doctors, fetch their own appointments and full doctor information + const [appointmentsRes, doctorRes] = await Promise.all([ + appointmentService.getAppointmentsForDoctor(user.doctorId), + doctorService.getDoctorById(user.doctorId), + ]); + setUserAppointments(appointmentsRes.data || []); + setDoctorInfo(doctorRes.data); + } else if (isLabTechnician) { + // For lab technicians, fetch pending lab tests + const pendingRes = await labService.getPendingLabTests(); + setPendingLabTests(pendingRes.data || []); + } else if (isBillingAdmin) { + // For billing admins, fetch all billing records + const billingsRes = await billingService.getAllBillings(); + setBillings(billingsRes.data || []); + } else { + // For admin/staff, fetch all stats + const [patientsRes, doctorsRes, appointmentsRes] = await Promise.all([ + patientService.getAllPatients(), + doctorService.getAllDoctors(), + appointmentService.getAllAppointments(), + ]); + + setStats({ + patients: patientsRes.data.length, + doctors: doctorsRes.data.length, + appointments: appointmentsRes.data.length, + }); + } + } catch (error) { + console.error('Error fetching stats:', error); + } finally { + setLoading(false); + } + }; + + fetchStats(); + }, [user.userId, isPatient, isDoctor, isLabTechnician]); + + if (loading) return ; + + if (isPatient) { + return ( +
+
+

Welcome, {user.firstName} {user.lastName}

+
Saturday · {new Date().toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
+
+
+ +
+
+
+

Your Information

+
+
+
Name: {user.firstName} {user.lastName}
+
EMBG: {user.username}
+
Role: Patient
+
+
+ +
+
+

Quick Actions

+
+
+ e.currentTarget.style.background = '#d8b4fe'} onMouseLeave={(e) => e.currentTarget.style.background = '#e9d5ff'}> + + Schedule Appointment + + e.currentTarget.style.background = '#93c5fd'} onMouseLeave={(e) => e.currentTarget.style.background = '#bfdbfe'}> + View My Appointments + +
+
+
+ +
+
+

Your Appointments

+
+ {userAppointments.length === 0 ? ( +

No appointments scheduled

+ ) : ( +
+ + + + + + + + + + + {userAppointments.map(apt => ( + + + + + + + ))} + +
DoctorDateTimeStatus
{apt.doctor?.firstName} {apt.doctor?.lastName}{apt.appointmentDate}{apt.appointmentTime}{apt.status}
+
+ )} +
+ +
+
+
+

Medical Records

+
+ e.currentTarget.style.background = '#4c1d95'} onMouseLeave={(e) => e.currentTarget.style.background = '#5b21b6'}> + View Medical Records + +
+ +
+
+

Billing Stats

+
+ {patientBillings.length === 0 ? ( +

No billing records

+ ) : ( +
+
+ Total Bills: {patientBillings.length} +
+
+ Paid: ${patientBillings.filter(b => b.paymentStatus === 'PAID').reduce((sum, b) => sum + (b.totalCost || 0), 0).toFixed(2)} +
+
+ Pending: ${patientBillings.filter(b => b.paymentStatus === 'PENDING').reduce((sum, b) => sum + (b.totalCost || 0), 0).toFixed(2)} +
+ e.currentTarget.style.background = '#4c1d95'} onMouseLeave={(e) => e.currentTarget.style.background = '#5b21b6'}> + View Billing Details + +
+ )} +
+
+
+ ); + } + + if (isDoctor) { + return ( +
+
+

Welcome Dr. {user.firstName} {user.lastName}

+
Saturday · {new Date().toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
+
+
+ +
+
+
+

Your Information

+
+
+
Name: {user.firstName} {user.lastName}
+
Email: {user.username}
+
Role: Doctor
+ {doctorInfo && ( + <> +
Department: {doctorInfo.department?.departmentName ? doctorInfo.department.departmentName.replace(/_DEPT$/, '').replace(/_/g, ' ').split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ') : 'N/A'}
+
Level: {doctorInfo.level?.level || 'N/A'}
+ + )} +
+
+ +
+
+

Quick Actions

+
+
+ e.currentTarget.style.background = '#d8b4fe'} onMouseLeave={(e) => e.currentTarget.style.background = '#e9d5ff'}> + + Schedule Appointment + + e.currentTarget.style.background = '#93c5fd'} onMouseLeave={(e) => e.currentTarget.style.background = '#bfdbfe'}> + View My Appointments + +
+
+
+ +
+
+

Your Appointments

+
+ {userAppointments.length === 0 ? ( +

No appointments scheduled

+ ) : ( +
+ + + + + + + + + + + {userAppointments.map(apt => ( + + + + + + + ))} + +
PatientDateTimeStatus
{apt.patient?.firstName} {apt.patient?.lastName}{apt.appointmentDate}{apt.appointmentTime}{apt.status}
+
+ )} +
+
+ ); + } + + if (isLabTechnician) { + return ( +
+
+

Welcome, {user.firstName} {user.lastName}

+
Saturday · {new Date().toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
+
+
+ +
+
+
+

Your Information

+
+
+
Name: {user.firstName} {user.lastName}
+
Username: {user.username}
+
Role: Lab Technician
+
+
+ +
+
+

Quick Actions

+
+ e.currentTarget.style.background = '#93c5fd'} onMouseLeave={(e) => e.currentTarget.style.background = '#bfdbfe'}> + View Lab Tests + +
+
+ +
+
+

Pending Lab Tests ({pendingLabTests.length})

+
+ {pendingLabTests.length === 0 ? ( +

No pending lab tests

+ ) : ( +
+ + + + + + + + + + + + {pendingLabTests.map(test => ( + + + + + + + + ))} + +
Test NamePatientDoctorTest DateNotes
{test.testName}{test.patientName}{test.doctorName}{test.testDate}{test.notes || 'N/A'}
+
+ )} +
+
+ ); + } + + if (isBillingAdmin) { + return ( +
+
+

Welcome, {user.firstName} {user.lastName}

+
Saturday · {new Date().toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
+
+
+ +
+
+
+

Your Information

+
+
+
Name: {user.firstName} {user.lastName}
+
Username: {user.username}
+
Role: Billing Administrator
+
+
+ +
+
+

Quick Actions

+
+ e.currentTarget.style.background = '#93c5fd'} onMouseLeave={(e) => e.currentTarget.style.background = '#bfdbfe'}> + View Billing + +
+
+ +
+
+
+

Quick Links

+
+
+ e.currentTarget.style.background = '#d8b4fe'} onMouseLeave={(e) => e.currentTarget.style.background = '#e9d5ff'}> + View Doctors + + e.currentTarget.style.background = '#93c5fd'} onMouseLeave={(e) => e.currentTarget.style.background = '#bfdbfe'}> + View Departments + +
+
+
+ +
+
+

Billing Records ({billings.length})

+
+ {billings.length === 0 ? ( +

No billing records

+ ) : ( +
+ + + + + + + + + + + {billings.map(bill => ( + + + + + + + ))} + +
PatientAmountStatusDate
{bill.patientName}${bill.totalCost}{bill.paymentStatus}{bill.paymentDate || 'N/A'}
+
+ )} +
+
+ ); + } + + return ( +
+
+

Welcome, {user.firstName} {user.lastName}

+
Saturday · {new Date().toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
+
+
+ +
+ + + + +
+ +
+ + +
+
+ ); +} + +function StatCard({ title, count, delta, statClass }) { + return ( +
+
+

{title}

+

{count.toLocaleString()}

+

{delta}

+
+ ); +} + +function QuickActionsCard() { + const user = JSON.parse(localStorage.getItem('user') || '{}'); + + // Lab technicians and billing admins should not see admin quick actions + if (user.role === 'LAB_TECHNICIAN' || user.role === 'BILLING_ADMIN') { + return null; + } + + return ( +
+
+

Quick Actions

+
+
+ e.currentTarget.style.background = '#d8b4fe'} onMouseLeave={(e) => e.currentTarget.style.background = '#e9d5ff'}> + + Add New Patient + + e.currentTarget.style.background = '#93c5fd'} onMouseLeave={(e) => e.currentTarget.style.background = '#bfdbfe'}> + + Add New Doctor + + e.currentTarget.style.background = '#d8b4fe'} onMouseLeave={(e) => e.currentTarget.style.background = '#e9d5ff'}> + + Create Appointment + +
+
+ ); +} + +function RecentActivityCard() { + const user = JSON.parse(localStorage.getItem('user') || '{}'); + + // Lab technicians and billing admins should not see admin dashboard cards + if (user.role === 'LAB_TECHNICIAN' || user.role === 'BILLING_ADMIN') { + return null; + } + + return ( +
+
+

Recent Activity

+ +
+

Activity feed coming soon...

+
+ ); +} + +export default Dashboard; Index: frontend/src/pages/Login.js =================================================================== --- frontend/src/pages/Login.js (revision 84249b19ce0ac1cc4b9f406f63132d99f6759053) +++ frontend/src/pages/Login.js (revision 84249b19ce0ac1cc4b9f406f63132d99f6759053) @@ -0,0 +1,136 @@ +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import ErrorAlert from '../components/ErrorAlert'; +import SuccessAlert from '../components/SuccessAlert'; + +function Login() { + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + const [success, setSuccess] = useState(null); + const navigate = useNavigate(); + + const handleLogin = async (e) => { + e.preventDefault(); + + if (!username.trim()) { + setError('Username is required'); + return; + } + if (!password.trim()) { + setError('Password is required'); + return; + } + + try { + setLoading(true); + setError(null); + + const response = await fetch('/api/auth/login', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + username, + password, + }), + }); + + if (!response.ok) { + const errorData = await response.json(); + throw new Error(errorData.error || 'Login failed'); + } + + const data = await response.json(); + + localStorage.setItem('token', data.token); + localStorage.setItem('user', JSON.stringify({ + userId: data.userId, + patientId: data.patientId, + doctorId: data.doctorId, + username: data.username, + role: data.role, + firstName: data.firstName, + lastName: data.lastName, + })); + + setSuccess('Login successful! Redirecting...'); + setTimeout(() => { + navigate('/'); + }, 1000); + } catch (err) { + setError(err.message || 'Login failed'); + } finally { + setLoading(false); + } + }; + + return ( +
+
+
+

Medora

+

Hospital Management System

+
+ + {error && setError(null)} />} + {success && setSuccess(null)} />} + +
+
+ + setUsername(e.target.value)} + placeholder="Enter your username or EMBG" + className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-purple-500 transition" + disabled={loading} + /> +
+ +
+ + setPassword(e.target.value)} + placeholder="Enter your password" + className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-purple-500 transition" + disabled={loading} + /> +
+ + +
+ +
+

Demo Credentials:

+

+ Admin: username: admin | password: admin123 +

+

+ Doctor: username: ivan.stojanov@medora.com | password: doctor123 +

+

+ Patient: username: [EMBG] | password: password123 +

+
+
+
+ ); +} + +export default Login; Index: frontend/src/pages/ProtectedRoute.js =================================================================== --- frontend/src/pages/ProtectedRoute.js (revision 84249b19ce0ac1cc4b9f406f63132d99f6759053) +++ frontend/src/pages/ProtectedRoute.js (revision 84249b19ce0ac1cc4b9f406f63132d99f6759053) @@ -0,0 +1,24 @@ +import React from 'react'; +import { Navigate } from 'react-router-dom'; + +function ProtectedRoute({ children, requiredRoles = [] }) { + const token = localStorage.getItem('token'); + const userStr = localStorage.getItem('user'); + + // If no token, redirect to login + if (!token) { + return ; + } + + // If roles are specified and user's role is not in the list, redirect to dashboard + if (requiredRoles.length > 0 && userStr) { + const user = JSON.parse(userStr); + if (!requiredRoles.includes(user.role)) { + return ; + } + } + + return children; +} + +export default ProtectedRoute;