# sarsij1234/medicaldemo architecture

> Architecture diagram of the GitHub repository sarsij1234/medicaldemo, 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/sarsij1234/medicaldemo
- Repository: https://github.com/sarsij1234/medicaldemo

## Overview

Mediora is a frontend-only clinic administration demo. A location administrator signs in, then uses routed screens to manage facility settings, staff and patients; schedule and book appointments; conduct consultations; and review health records, finances, and operational logs. Shared in-memory state is seeded from mock data and resets on refresh. The README documents broader screen capabilities than the sampled excerpts; those are represented at screen level, while unsampled implementation links are omitted. There is no backend or live external-service integration.

Main entry points: [`src/App.jsx`](https://github.com/sarsij1234/medicaldemo/blob/main/src/App.jsx) (Routes and auth gate), [`src/store.jsx`](https://github.com/sarsij1234/medicaldemo/blob/main/src/store.jsx) (In-memory state), [`src/main.jsx`](https://github.com/sarsij1234/medicaldemo/blob/main/src/main.jsx) (React entry), [`src/components/Layout.jsx`](https://github.com/sarsij1234/medicaldemo/blob/main/src/components/Layout.jsx) (Navigation and search)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_main["React entry<br/>[main.jsx]"]
  node_router["Routes and auth gate<br/>[App.jsx]"]
  node_layout["Navigation and search<br/>[Layout.jsx]"]
  node_ui["Shared UI kit<br/>[UI.jsx]"]
  node_login["Demo sign-in<br/>[Login.jsx]"]
end

subgraph group_care["People and care"]
  node_staff["Staff management<br/>[Staff.jsx]"]
  node_patients["Patient management<br/>[Patients.jsx]"]
  node_archived["Archived patients"]
  node_schedule["Doctor schedule<br/>[Schedule.jsx]"]
  node_booking["Appointment booking"]
  node_appointments["Appointment list<br/>[Appointments.jsx]"]
  node_consult["Consultation room<br/>[Consultation.jsx]"]
  node_health["Health records<br/>[HealthInfo.jsx]"]
  node_scan["Scan and share<br/>[ScanShare.jsx]"]
end

subgraph group_ops["Clinic operations"]
  node_dashboard["Clinic dashboard<br/>[Dashboard.jsx]"]
  node_facility["Facility profile<br/>[ManageInfo.jsx]"]
  node_tax["Tax and charges<br/>[TaxCharges.jsx]"]
  node_password["Password settings<br/>[ChangePassword.jsx]"]
end

subgraph group_insights["Records and reporting"]
  node_finance["Finance screens<br/>[Finance.jsx]"]
  node_logs["Operational logs<br/>[Logs.jsx]"]
  node_population["Population insights"]
end

subgraph group_state["Demo state"]
  node_store[("In-memory state<br/>[store.jsx]")]
  node_seed["Mock data<br/>[data.js]"]
end

node_admin(("Location admin"))

node_admin -->|"opens portal"| node_main
node_main -->|"mounts"| node_router
node_main -->|"provides state"| node_store
node_router -->|"routes unauthenticated"| node_login
node_router -->|"wraps authenticated screens"| node_layout
node_layout -->|"renders outlet"| node_router
node_layout -->|"reads and updates"| node_store
node_router -->|"routes"| node_dashboard
node_router -->|"routes"| node_facility
node_router -->|"routes"| node_staff
node_router -->|"routes"| node_patients
node_router -->|"routes"| node_archived
node_router -->|"routes"| node_schedule
node_router -->|"routes"| node_appointments
node_router -->|"routes"| node_consult
node_router -->|"routes"| node_health
node_router -->|"routes"| node_scan
node_router -->|"routes"| node_tax
node_router -->|"routes"| node_finance
node_router -->|"routes"| node_logs
node_router -->|"routes"| node_population
node_router -->|"routes"| node_password
node_login -->|"auth state"| node_store
node_dashboard -->|"reads and updates"| node_store
node_facility -->|"reads and updates"| node_store
node_staff -->|"reads and updates"| node_store
node_patients -->|"reads and updates"| node_store
node_archived -->|"reads and updates"| node_store
node_schedule -->|"reads and updates"| node_store
node_schedule -->|"opens booking"| node_booking
node_booking -->|"gets slots and books"| node_store
node_appointments -->|"reads and updates"| node_store
node_appointments -->|"opens consultation"| node_consult
node_consult -->|"loads and completes"| node_store
node_health -->|"reads and updates"| node_store
node_scan -->|"reads and updates"| node_store
node_tax -->|"reads and updates"| node_store
node_finance -->|"reads and updates"| node_store
node_finance -->|"reads mock records"| node_seed
node_logs -->|"reads mock records"| node_seed
node_population -->|"reads state"| node_store
node_password -->|"updates state"| node_store
node_store -->|"initializes from"| node_seed
node_router -.->|"screens use shared controls"| node_ui

click node_main "https://github.com/sarsij1234/medicaldemo/blob/main/src/main.jsx"
click node_router "https://github.com/sarsij1234/medicaldemo/blob/main/src/App.jsx"
click node_layout "https://github.com/sarsij1234/medicaldemo/blob/main/src/components/Layout.jsx"
click node_ui "https://github.com/sarsij1234/medicaldemo/blob/main/src/components/UI.jsx"
click node_login "https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/Login.jsx"
click node_dashboard "https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/Dashboard.jsx"
click node_facility "https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/ManageInfo.jsx"
click node_staff "https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/Staff.jsx"
click node_patients "https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/Patients.jsx"
click node_archived "https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/ArchivedPatients.jsx"
click node_schedule "https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/Schedule.jsx"
click node_booking "https://github.com/sarsij1234/medicaldemo/blob/main/src/components/BookAppointment.jsx"
click node_appointments "https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/Appointments.jsx"
click node_consult "https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/Consultation.jsx"
click node_health "https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/HealthInfo.jsx"
click node_scan "https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/ScanShare.jsx"
click node_tax "https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/TaxCharges.jsx"
click node_finance "https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/Finance.jsx"
click node_logs "https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/Logs.jsx"
click node_population "https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/PopulationInsights.jsx"
click node_password "https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/ChangePassword.jsx"
click node_store "https://github.com/sarsij1234/medicaldemo/blob/main/src/store.jsx"
click node_seed "https://github.com/sarsij1234/medicaldemo/blob/main/src/data.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_main,node_router,node_layout,node_ui,node_login toneBlue
class node_staff,node_patients,node_archived,node_schedule,node_booking,node_appointments,node_consult,node_health,node_scan toneAmber
class node_dashboard,node_facility,node_tax,node_password toneMint
class node_finance,node_logs,node_population toneRose
class node_store,node_seed,node_admin toneIndigo
```

## Components

### Application shell

- [React entry](https://github.com/sarsij1234/medicaldemo/blob/main/src/main.jsx): `src/main.jsx`
- [Routes and auth gate](https://github.com/sarsij1234/medicaldemo/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation and search](https://github.com/sarsij1234/medicaldemo/blob/main/src/components/Layout.jsx): `src/components/Layout.jsx`
- [Shared UI kit](https://github.com/sarsij1234/medicaldemo/blob/main/src/components/UI.jsx): `src/components/UI.jsx`
- [Demo sign-in](https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/Login.jsx): `src/pages/Login.jsx`

### People and care

- [Staff management](https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/Staff.jsx): `src/pages/Staff.jsx`
- [Patient management](https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/Patients.jsx): `src/pages/Patients.jsx`
- [Archived patients](https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/ArchivedPatients.jsx): `src/pages/ArchivedPatients.jsx`
- [Doctor schedule](https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/Schedule.jsx): `src/pages/Schedule.jsx`
- [Appointment booking](https://github.com/sarsij1234/medicaldemo/blob/main/src/components/BookAppointment.jsx): `src/components/BookAppointment.jsx`
- [Appointment list](https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/Appointments.jsx): `src/pages/Appointments.jsx`
- [Consultation room](https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/Consultation.jsx): `src/pages/Consultation.jsx`
- [Health records](https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/HealthInfo.jsx): `src/pages/HealthInfo.jsx`
- [Scan and share](https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/ScanShare.jsx): `src/pages/ScanShare.jsx`

### Clinic operations

- [Clinic dashboard](https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/Dashboard.jsx): `src/pages/Dashboard.jsx`
- [Facility profile](https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/ManageInfo.jsx): `src/pages/ManageInfo.jsx`
- [Tax and charges](https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/TaxCharges.jsx): `src/pages/TaxCharges.jsx`
- [Password settings](https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/ChangePassword.jsx): `src/pages/ChangePassword.jsx`

### Records and reporting

- [Finance screens](https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/Finance.jsx): `src/pages/Finance.jsx`
- [Operational logs](https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/Logs.jsx): `src/pages/Logs.jsx`
- [Population insights](https://github.com/sarsij1234/medicaldemo/blob/main/src/pages/PopulationInsights.jsx): `src/pages/PopulationInsights.jsx`

### Demo state

- [In-memory state](https://github.com/sarsij1234/medicaldemo/blob/main/src/store.jsx): `src/store.jsx`
- [Mock data](https://github.com/sarsij1234/medicaldemo/blob/main/src/data.js): `src/data.js`

### Other components

- **Location admin**

## Connections

- Location admin → React entry: opens portal
- React entry → Routes and auth gate: mounts
- React entry → In-memory state: provides state
- Routes and auth gate → Demo sign-in: routes unauthenticated
- Routes and auth gate → Navigation and search: wraps authenticated screens
- Navigation and search → Routes and auth gate: renders outlet
- Navigation and search → In-memory state: reads and updates
- Routes and auth gate → Clinic dashboard: routes
- Routes and auth gate → Facility profile: routes
- Routes and auth gate → Staff management: routes
- Routes and auth gate → Patient management: routes
- Routes and auth gate → Archived patients: routes
- Routes and auth gate → Doctor schedule: routes
- Routes and auth gate → Appointment list: routes
- Routes and auth gate → Consultation room: routes
- Routes and auth gate → Health records: routes
- Routes and auth gate → Scan and share: routes
- Routes and auth gate → Tax and charges: routes
- Routes and auth gate → Finance screens: routes
- Routes and auth gate → Operational logs: routes
- Routes and auth gate → Population insights: routes
- Routes and auth gate → Password settings: routes
- Demo sign-in → In-memory state: auth state
- Clinic dashboard → In-memory state: reads and updates
- Facility profile → In-memory state: reads and updates
- Staff management → In-memory state: reads and updates
- Patient management → In-memory state: reads and updates
- Archived patients → In-memory state: reads and updates
- Doctor schedule → In-memory state: reads and updates
- Doctor schedule → Appointment booking: opens booking
- Appointment booking → In-memory state: gets slots and books
- Appointment list → In-memory state: reads and updates
- Appointment list → Consultation room: opens consultation
- Consultation room → In-memory state: loads and completes
- Health records → In-memory state: reads and updates
- Scan and share → In-memory state: reads and updates
- Tax and charges → In-memory state: reads and updates
- Finance screens → In-memory state: reads and updates
- Finance screens → Mock data: reads mock records
- Operational logs → Mock data: reads mock records
- Population insights → In-memory state: reads state
- Password settings → In-memory state: updates state
- In-memory state → Mock data: initializes from
- Routes and auth gate → Shared UI kit: screens use shared controls