# nikhil-java-dev/hospital-management-system-frontend architecture

> Architecture diagram of the GitHub repository nikhil-java-dev/hospital-management-system-frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nikhil-java-dev/hospital-management-system-frontend
- Repository: https://github.com/nikhil-java-dev/hospital-management-system-frontend

## Overview

This React frontend supports patient and doctor workflows alongside administrative doctor management. Users enter through the shared router, register or log in, and use role-specific pages to manage profiles, schedule or review appointments, and access clinical notes and reports. Sampled components show direct HTTP calls to backend APIs; the README also documents PDF report generation and availability management, but their implementation details were not sampled. The graph therefore shows documented capabilities without assuming uncertain component wiring.

Main entry points: [`src/ElRouter/Router.jsx`](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/ElRouter/Router.jsx) (Route table), [`src/components/doctorNotesCreate/PatientAllMedicalReports.jsx`](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/doctorNotesCreate/PatientAllMedicalReports.jsx) (Patient reports), [`src/components/patientAppointments/GetAppointment.jsx`](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/patientAppointments/GetAppointment.jsx) (Patient booking), [`src/components/doctorAppointments/DoctorAppointByPatients.jsx`](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/doctorAppointments/DoctorAppointByPatients.jsx) (Doctor appointments)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["Application navigation"]
  node_app["React app<br/>[App.jsx]"]
  node_router["Route table<br/>[Router.jsx]"]
  node_home["Home<br/>[Home.jsx]"]
  node_doctorpage["Doctor page<br/>[Doctors.jsx]"]
  node_patientpage["Patient page<br/>[Patients.jsx]"]
  node_contact["Contact page<br/>[Contact.jsx]"]
  node_layout["Shared layout<br/>[Layout.jsx]"]
end

subgraph group_identity["Identity and profiles"]
  node_login["Role login<br/>[Login.jsx]"]
  node_patientreg["Patient registration<br/>[Register.jsx]"]
  node_doctorreg["Doctor registration<br/>[DoctorReg.jsx]"]
  node_patientprofile["Patient profile"]
  node_doctorprofile["Doctor profile<br/>[DoctorProfile.jsx]"]
end

subgraph group_appointments["Appointments"]
  node_appointmentpage["Appointment page<br/>[Appointment.jsx]"]
  node_booking["Patient booking<br/>[GetAppointment.jsx]"]
  node_patientappointments["Appointment history"]
  node_doctorappointments["Doctor appointments"]
end

subgraph group_clinical["Clinical records and admin"]
  node_meeting["Patient meeting view"]
  node_notecreate["Create medical notes"]
  node_notes["Doctor notes<br/>[DoctorNote.jsx]"]
  node_reports["Patient reports"]
  node_admin["Admin dashboard<br/>[Admin.jsx]"]
  node_doctorslist["Doctor directory<br/>[DoctorsList.jsx]"]
  node_doctoredit["Edit doctor<br/>[DoctorsEdit.jsx]"]
  node_pdf["PDF generation"]
end

node_user(("Patient / doctor / admin"))
node_backend{{"Hospital backend API"}}

node_user -->|"opens"| node_app
node_app -->|"provides routes"| node_router
node_router -->|"wraps routes"| node_layout
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_doctorpage
node_router -->|"routes to"| node_patientpage
node_router -->|"routes to"| node_contact
node_router -->|"routes to"| node_login
node_router -->|"routes to"| node_patientreg
node_router -->|"routes to"| node_appointmentpage
node_router -->|"routes to"| node_admin
node_router -->|"routes to"| node_doctoredit
node_router -->|"routes to"| node_meeting
node_login -->|"authenticates"| node_backend
node_patientreg -->|"registers patient"| node_backend
node_doctorreg -->|"registers doctor"| node_backend
node_booking -->|"loads doctors and patient"| node_backend
node_booking -->|"creates appointment"| node_backend
node_doctorappointments -->|"fetches appointments"| node_backend
node_doctorappointments -->|"opens patient view"| node_meeting
node_reports -->|"fetches notes"| node_backend
node_appointmentpage -.->|"submits guest booking"| node_backend
node_user -->|"books visit"| node_booking
node_user -->|"reviews schedule"| node_doctorappointments
node_user -->|"views reports"| node_reports
node_user -->|"manages doctors"| node_admin
node_reports -.->|"downloads PDF"| node_pdf

click node_app "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/App.jsx"
click node_router "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/ElRouter/Router.jsx"
click node_home "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/homepage/Home.jsx"
click node_doctorpage "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/doctor/Doctors.jsx"
click node_patientpage "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/patients/Patients.jsx"
click node_contact "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/contact/Contact.jsx"
click node_layout "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/layout/Layout.jsx"
click node_login "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/login/Login.jsx"
click node_patientreg "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/register/Register.jsx"
click node_doctorreg "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/doctorReg/DoctorReg.jsx"
click node_patientprofile "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/patientsProfile/PatientsProfile.jsx"
click node_doctorprofile "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/doctorProfile/DoctorProfile.jsx"
click node_appointmentpage "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/appointments/Appointment.jsx"
click node_booking "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/patientAppointments/GetAppointment.jsx"
click node_patientappointments "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/patientAppointments/PatientAppointmentList.jsx"
click node_doctorappointments "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/doctorAppointments/DoctorAppointByPatients.jsx"
click node_meeting "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/patientsAndDoctorViewPageByAppointment/DoctorAndPatientMeeting.jsx"
click node_notecreate "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/doctorNotesCreate/CreateDoctorNotes.jsx"
click node_notes "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/doctorNotes/DoctorNote.jsx"
click node_reports "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/doctorNotesCreate/PatientAllMedicalReports.jsx"
click node_admin "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/adminDashboard/Admin.jsx"
click node_doctorslist "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/doctorsList/DoctorsList.jsx"
click node_doctoredit "https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/adminDashboard/DoctorsEdit.jsx"
click node_pdf "https://github.com/nikhil-java-dev/hospital-management-system-frontend/tree/main/src/components/doctorNotesCreate"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_router,node_home,node_doctorpage,node_patientpage,node_contact,node_layout toneBlue
class node_login,node_patientreg,node_doctorreg,node_patientprofile,node_doctorprofile toneAmber
class node_appointmentpage,node_booking,node_patientappointments,node_doctorappointments,node_backend toneMint
class node_meeting,node_notecreate,node_notes,node_reports,node_admin,node_doctorslist,node_doctoredit,node_pdf toneRose
class node_user toneIndigo
```

## Components

### Application navigation

- [React app](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/App.jsx): `src/App.jsx`
- [Route table](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/ElRouter/Router.jsx): `src/ElRouter/Router.jsx`
- [Home](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/homepage/Home.jsx): `src/pages/homepage/Home.jsx`
- [Doctor page](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/doctor/Doctors.jsx): `src/pages/doctor/Doctors.jsx`
- [Patient page](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/patients/Patients.jsx): `src/pages/patients/Patients.jsx`
- [Contact page](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/contact/Contact.jsx): `src/pages/contact/Contact.jsx`
- [Shared layout](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/layout/Layout.jsx): `src/pages/layout/Layout.jsx`

### Identity and profiles

- [Role login](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/login/Login.jsx): `src/pages/login/Login.jsx`
- [Patient registration](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/register/Register.jsx): `src/pages/register/Register.jsx`
- [Doctor registration](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/doctorReg/DoctorReg.jsx): `src/components/doctorReg/DoctorReg.jsx`
- [Patient profile](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/patientsProfile/PatientsProfile.jsx): `src/components/patientsProfile/PatientsProfile.jsx`
- [Doctor profile](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/doctorProfile/DoctorProfile.jsx): `src/components/doctorProfile/DoctorProfile.jsx`

### Appointments

- [Appointment page](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/appointments/Appointment.jsx): `src/pages/appointments/Appointment.jsx`
- [Patient booking](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/patientAppointments/GetAppointment.jsx): `src/components/patientAppointments/GetAppointment.jsx`
- [Appointment history](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/patientAppointments/PatientAppointmentList.jsx): `src/components/patientAppointments/PatientAppointmentList.jsx`
- [Doctor appointments](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/doctorAppointments/DoctorAppointByPatients.jsx): `src/components/doctorAppointments/DoctorAppointByPatients.jsx`

### Clinical records and admin

- [Patient meeting view](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/patientsAndDoctorViewPageByAppointment/DoctorAndPatientMeeting.jsx): `src/pages/patientsAndDoctorViewPageByAppointment/DoctorAndPatientMeeting.jsx`
- [Create medical notes](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/doctorNotesCreate/CreateDoctorNotes.jsx): `src/components/doctorNotesCreate/CreateDoctorNotes.jsx`
- [Doctor notes](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/doctorNotes/DoctorNote.jsx): `src/components/doctorNotes/DoctorNote.jsx`
- [Patient reports](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/doctorNotesCreate/PatientAllMedicalReports.jsx): `src/components/doctorNotesCreate/PatientAllMedicalReports.jsx`
- [Admin dashboard](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/adminDashboard/Admin.jsx): `src/pages/adminDashboard/Admin.jsx`
- [Doctor directory](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/components/doctorsList/DoctorsList.jsx): `src/components/doctorsList/DoctorsList.jsx`
- [Edit doctor](https://github.com/nikhil-java-dev/hospital-management-system-frontend/blob/main/src/pages/adminDashboard/DoctorsEdit.jsx): `src/pages/adminDashboard/DoctorsEdit.jsx`
- [PDF generation](https://github.com/nikhil-java-dev/hospital-management-system-frontend/tree/main/src/components/doctorNotesCreate): `src/components/doctorNotesCreate`

### Other components

- **Patient / doctor / admin**
- **Hospital backend API**

## Connections

- Patient / doctor / admin → React app: opens
- React app → Route table: provides routes
- Route table → Shared layout: wraps routes
- Route table → Home: routes to
- Route table → Doctor page: routes to
- Route table → Patient page: routes to
- Route table → Contact page: routes to
- Route table → Role login: routes to
- Route table → Patient registration: routes to
- Route table → Appointment page: routes to
- Route table → Admin dashboard: routes to
- Route table → Edit doctor: routes to
- Route table → Patient meeting view: routes to
- Role login → Hospital backend API: authenticates
- Patient registration → Hospital backend API: registers patient
- Doctor registration → Hospital backend API: registers doctor
- Patient booking → Hospital backend API: loads doctors and patient
- Patient booking → Hospital backend API: creates appointment
- Doctor appointments → Hospital backend API: fetches appointments
- Doctor appointments → Patient meeting view: opens patient view
- Patient reports → Hospital backend API: fetches notes
- Appointment page → Hospital backend API: submits guest booking
- Patient / doctor / admin → Patient booking: books visit
- Patient / doctor / admin → Doctor appointments: reviews schedule
- Patient / doctor / admin → Patient reports: views reports
- Patient / doctor / admin → Admin dashboard: manages doctors
- Patient reports → PDF generation: downloads PDF