# leweprojects/mghsite architecture

> Architecture diagram of the GitHub repository leweprojects/mghsite, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/leweprojects/mghsite
- Repository: https://github.com/leweprojects/mghsite

## Overview

This is a React clinic portal for finding doctors and managing patient appointments, with separate patient, doctor, and administrator experiences. The principal workflow runs from doctor discovery and appointment submission through verification/status tracking and consultation history; doctors manage their active queue, while administrators oversee appointments and clinic records. The excerpts confirm routing, Supabase access, face-to-face booking, and queue operations. Other branches are included from the file tree, but their internal wiring is not established by the sampled source.

Main entry points: [`src/App.js`](https://github.com/leweprojects/mghsite/blob/main/src/App.js) (App routes), [`src/components/patient/Dashboard.jsx`](https://github.com/leweprojects/mghsite/blob/main/src/components/patient/Dashboard.jsx) (Role dashboard), [`src/components/config/Supabase.js`](https://github.com/leweprojects/mghsite/blob/main/src/components/config/Supabase.js) (Supabase client), [`src/components/Higher user level/Doctor/DoctorPage.jsx`](https://github.com/leweprojects/mghsite/blob/main/src/components/Higher%20user%20level/Doctor/DoctorPage.jsx) (Doctor dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App entry"]
  node_app["App routes<br/>[App.js]"]
  node_home["Home<br/>[Home.jsx]"]
end

subgraph group_patient["Patient services"]
  node_dashboard["Role dashboard<br/>[Dashboard.jsx]"]
  node_doctor_search["Doctor search<br/>[Doctors.jsx]"]
  node_doctor_info["Doctor details<br/>[DoctorInfo.jsx]"]
  node_appointment["Appointment flow<br/>[Appointment.jsx]"]
  node_f2f["Face-to-face booking<br/>[Face2face.jsx]"]
  node_after_submit["Submission outcome"]
  node_verification["Appointment verification<br/>[WaitingVerify.jsx]"]
  node_patient_status["Appointment status<br/>[Status.jsx]"]
  node_patient_history["Consultation history"]
end

subgraph group_clinical["Clinical operations"]
  node_doctor_dashboard["Doctor dashboard<br/>[DoctorPage.jsx]"]
  node_doctor_appointments["Doctor appointments"]
  node_doctor_history["Doctor history"]
end

subgraph group_admin["Administration"]
  node_admin_dashboard["Admin dashboard<br/>[AdminDashboard.jsx]"]
  node_admin_confirm["Appointment review"]
  node_admin_doctors["Doctor management<br/>[EditDoctors.jsx]"]
  node_admin_patients["Patient management<br/>[EditPatients.jsx]"]
  node_admin_messages["Messages and ratings<br/>[Messages.jsx]"]
end

subgraph group_backend["Backend access"]
  node_supabase_config["Supabase client<br/>[Supabase.js]"]
  node_supabase[("Supabase backend")]
end

node_visitor(("Visitor / patient"))
node_doctor_actor(("Doctor"))
node_admin_actor(("Administrator"))

node_visitor -->|"opens"| node_app
node_doctor_actor -->|"opens"| node_app
node_admin_actor -->|"opens"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_appointment
node_app -->|"routes to"| node_patient_status
node_app -->|"routes to"| node_verification
node_app -->|"routes to"| node_after_submit
node_app -->|"routes to"| node_doctor_dashboard
node_app -->|"routes to"| node_doctor_appointments
node_app -->|"routes to"| node_doctor_history
node_app -->|"routes to"| node_admin_dashboard
node_app -->|"routes to"| node_admin_patients
node_dashboard -->|"renders search"| node_doctor_search
node_doctor_search -->|"links details"| node_doctor_info
node_dashboard -->|"renders for admin"| node_admin_dashboard
node_dashboard -->|"renders for doctor"| node_doctor_dashboard
node_f2f -->|"uses client"| node_supabase_config
node_doctor_dashboard -->|"queries queue"| node_supabase_config
node_app -->|"fetches profile"| node_supabase_config
node_supabase_config -->|"accesses"| node_supabase

click node_app "https://github.com/leweprojects/mghsite/blob/main/src/App.js"
click node_home "https://github.com/leweprojects/mghsite/blob/main/src/components/Homepage/Home.jsx"
click node_dashboard "https://github.com/leweprojects/mghsite/blob/main/src/components/patient/Dashboard.jsx"
click node_doctor_search "https://github.com/leweprojects/mghsite/blob/main/src/components/Doctor%20read/Doctors.jsx"
click node_doctor_info "https://github.com/leweprojects/mghsite/blob/main/src/components/Doctor%20read/DoctorInfo.jsx"
click node_appointment "https://github.com/leweprojects/mghsite/blob/main/src/components/patient/Appointment%20Process/Appointment.jsx"
click node_f2f "https://github.com/leweprojects/mghsite/blob/main/src/components/patient/Appointment%20Process/Face2face.jsx"
click node_after_submit "https://github.com/leweprojects/mghsite/blob/main/src/components/patient/Appointment%20Process/After%20Submitting/SuccessAppointment.jsx"
click node_verification "https://github.com/leweprojects/mghsite/blob/main/src/components/patient/Appointment%20Process/After%20Submitting/WaitingVerify.jsx"
click node_patient_status "https://github.com/leweprojects/mghsite/blob/main/src/components/patient/Appointment%20Process/Appointment%20Status/Status.jsx"
click node_patient_history "https://github.com/leweprojects/mghsite/blob/main/src/components/patient/Appointment%20Process/Archives/OnlineConsultationHistory.jsx"
click node_doctor_dashboard "https://github.com/leweprojects/mghsite/blob/main/src/components/Higher%20user%20level/Doctor/DoctorPage.jsx"
click node_doctor_appointments "https://github.com/leweprojects/mghsite/blob/main/src/components/Higher%20user%20level/Doctor/Appointments/Doc_Appointments.jsx"
click node_doctor_history "https://github.com/leweprojects/mghsite/blob/main/src/components/Higher%20user%20level/Doctor/Archives/DoctorConsulHistory.jsx"
click node_admin_dashboard "https://github.com/leweprojects/mghsite/blob/main/src/components/Higher%20user%20level/Admin/AdminDashboard.jsx"
click node_admin_confirm "https://github.com/leweprojects/mghsite/blob/main/src/components/Higher%20user%20level/Admin/Confirmation%20of%20Appointments/AppointmentConfirmation.jsx"
click node_admin_doctors "https://github.com/leweprojects/mghsite/blob/main/src/components/Higher%20user%20level/Admin/Edit%20Doctors/EditDoctors.jsx"
click node_admin_patients "https://github.com/leweprojects/mghsite/blob/main/src/components/Higher%20user%20level/Admin/Edit%20Patients/EditPatients.jsx"
click node_admin_messages "https://github.com/leweprojects/mghsite/blob/main/src/components/Higher%20user%20level/Admin/Message%20Page/Messages.jsx"
click node_supabase_config "https://github.com/leweprojects/mghsite/blob/main/src/components/config/Supabase.js"

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_home toneBlue
class node_dashboard,node_doctor_search,node_doctor_info,node_appointment,node_f2f,node_after_submit,node_verification,node_patient_status,node_patient_history toneAmber
class node_doctor_dashboard,node_doctor_appointments,node_doctor_history toneMint
class node_admin_dashboard,node_admin_confirm,node_admin_doctors,node_admin_patients,node_admin_messages toneRose
class node_supabase_config,node_supabase,node_visitor,node_doctor_actor,node_admin_actor toneIndigo
```

## Components

### App entry

- [App routes](https://github.com/leweprojects/mghsite/blob/main/src/App.js): `src/App.js`
- [Home](https://github.com/leweprojects/mghsite/blob/main/src/components/Homepage/Home.jsx): `src/components/Homepage/Home.jsx`

### Patient services

- [Role dashboard](https://github.com/leweprojects/mghsite/blob/main/src/components/patient/Dashboard.jsx): `src/components/patient/Dashboard.jsx`
- [Doctor search](https://github.com/leweprojects/mghsite/blob/main/src/components/Doctor%20read/Doctors.jsx): `src/components/Doctor read/Doctors.jsx`
- [Doctor details](https://github.com/leweprojects/mghsite/blob/main/src/components/Doctor%20read/DoctorInfo.jsx): `src/components/Doctor read/DoctorInfo.jsx`
- [Appointment flow](https://github.com/leweprojects/mghsite/blob/main/src/components/patient/Appointment%20Process/Appointment.jsx): `src/components/patient/Appointment Process/Appointment.jsx`
- [Face-to-face booking](https://github.com/leweprojects/mghsite/blob/main/src/components/patient/Appointment%20Process/Face2face.jsx): `src/components/patient/Appointment Process/Face2face.jsx`
- [Submission outcome](https://github.com/leweprojects/mghsite/blob/main/src/components/patient/Appointment%20Process/After%20Submitting/SuccessAppointment.jsx): `src/components/patient/Appointment Process/After Submitting/SuccessAppointment.jsx`
- [Appointment verification](https://github.com/leweprojects/mghsite/blob/main/src/components/patient/Appointment%20Process/After%20Submitting/WaitingVerify.jsx): `src/components/patient/Appointment Process/After Submitting/WaitingVerify.jsx`
- [Appointment status](https://github.com/leweprojects/mghsite/blob/main/src/components/patient/Appointment%20Process/Appointment%20Status/Status.jsx): `src/components/patient/Appointment Process/Appointment Status/Status.jsx`
- [Consultation history](https://github.com/leweprojects/mghsite/blob/main/src/components/patient/Appointment%20Process/Archives/OnlineConsultationHistory.jsx): `src/components/patient/Appointment Process/Archives/OnlineConsultationHistory.jsx`

### Clinical operations

- [Doctor dashboard](https://github.com/leweprojects/mghsite/blob/main/src/components/Higher%20user%20level/Doctor/DoctorPage.jsx): `src/components/Higher user level/Doctor/DoctorPage.jsx`
- [Doctor appointments](https://github.com/leweprojects/mghsite/blob/main/src/components/Higher%20user%20level/Doctor/Appointments/Doc_Appointments.jsx): `src/components/Higher user level/Doctor/Appointments/Doc_Appointments.jsx`
- [Doctor history](https://github.com/leweprojects/mghsite/blob/main/src/components/Higher%20user%20level/Doctor/Archives/DoctorConsulHistory.jsx): `src/components/Higher user level/Doctor/Archives/DoctorConsulHistory.jsx`

### Administration

- [Admin dashboard](https://github.com/leweprojects/mghsite/blob/main/src/components/Higher%20user%20level/Admin/AdminDashboard.jsx): `src/components/Higher user level/Admin/AdminDashboard.jsx`
- [Appointment review](https://github.com/leweprojects/mghsite/blob/main/src/components/Higher%20user%20level/Admin/Confirmation%20of%20Appointments/AppointmentConfirmation.jsx): `src/components/Higher user level/Admin/Confirmation of Appointments/AppointmentConfirmation.jsx`
- [Doctor management](https://github.com/leweprojects/mghsite/blob/main/src/components/Higher%20user%20level/Admin/Edit%20Doctors/EditDoctors.jsx): `src/components/Higher user level/Admin/Edit Doctors/EditDoctors.jsx`
- [Patient management](https://github.com/leweprojects/mghsite/blob/main/src/components/Higher%20user%20level/Admin/Edit%20Patients/EditPatients.jsx): `src/components/Higher user level/Admin/Edit Patients/EditPatients.jsx`
- [Messages and ratings](https://github.com/leweprojects/mghsite/blob/main/src/components/Higher%20user%20level/Admin/Message%20Page/Messages.jsx): `src/components/Higher user level/Admin/Message Page/Messages.jsx`

### Backend access

- [Supabase client](https://github.com/leweprojects/mghsite/blob/main/src/components/config/Supabase.js): `src/components/config/Supabase.js`
- **Supabase backend**

### Other components

- **Visitor / patient**
- **Doctor**
- **Administrator**

## Connections

- Visitor / patient → App routes: opens
- Doctor → App routes: opens
- Administrator → App routes: opens
- App routes → Home: routes to
- App routes → Role dashboard: routes to
- App routes → Appointment flow: routes to
- App routes → Appointment status: routes to
- App routes → Appointment verification: routes to
- App routes → Submission outcome: routes to
- App routes → Doctor dashboard: routes to
- App routes → Doctor appointments: routes to
- App routes → Doctor history: routes to
- App routes → Admin dashboard: routes to
- App routes → Patient management: routes to
- Role dashboard → Doctor search: renders search
- Doctor search → Doctor details: links details
- Role dashboard → Admin dashboard: renders for admin
- Role dashboard → Doctor dashboard: renders for doctor
- Face-to-face booking → Supabase client: uses client
- Doctor dashboard → Supabase client: queries queue
- App routes → Supabase client: fetches profile
- Supabase client → Supabase backend: accesses