# navruzbek05/medcontrol architecture

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

- Interactive diagram: https://gitdiagram.com/navruzbek05/medcontrol
- Repository: https://github.com/navruzbek05/medcontrol
- Video tour (about a minute): https://gitdiagram.com/navruzbek05/medcontrol/video

## Overview

MedControl Pro is a browser-based clinic management interface for staff. App.tsx initializes mock clinic data and holds session state, then routes the selected tab through Layout to dashboard, patient, appointment, billing, reporting, and settings views. Those views use callback props to request updates from the app; the shown data is held in React state rather than a demonstrated backend. A separate Gemini service generates preliminary diagnosis suggestions, but the excerpts do not establish which page invokes it. Feature details beyond the sampled source are represented only where supported by the tree.

Main entry points: [`App.tsx`](https://github.com/navruzbek05/medcontrol/blob/main/App.tsx) (App state and routing), [`pages/SchedulePage.tsx`](https://github.com/navruzbek05/medcontrol/blob/main/pages/SchedulePage.tsx) (Appointments and visit notes), [`index.tsx`](https://github.com/navruzbek05/medcontrol/blob/main/index.tsx) (React entry), [`components/Layout.tsx`](https://github.com/navruzbek05/medcontrol/blob/main/components/Layout.tsx) (Navigation layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application shell"]
  node_entry["React entry<br/>[index.tsx]"]
  node_app["App state and routing<br/>[App.tsx]"]
  node_layout["Navigation layout<br/>[Layout.tsx]"]
  node_seed["Mock clinic data<br/>[constants.ts]"]
  node_models["Clinic domain types<br/>[types.ts]"]
end

subgraph group_care["Patient care"]
  node_patients["Patient records<br/>[PatientsPage.tsx]"]
  node_schedule["Appointments and visit notes<br/>[SchedulePage.tsx]"]
  node_date["Date picker"]
end

subgraph group_operations["Clinic operations"]
  node_billing["Billing and receipts<br/>[BillingPage.tsx]"]
  node_settings["Staff and services<br/>[SettingsPage.tsx]"]
end

subgraph group_insights["Reporting and assistance"]
  node_dashboard["Clinic dashboard<br/>[Dashboard.tsx]"]
  node_reports["Clinic reports<br/>[ReportsPage.tsx]"]
  node_ai["Diagnosis suggestions<br/>[geminiService.ts]"]
end

node_staff(("Clinic staff"))
node_gemini["Google Gemini API"]

node_staff -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"loads mock data"| node_seed
node_app -->|"renders shell"| node_layout
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_patients
node_app -->|"routes to"| node_schedule
node_app -->|"routes to"| node_billing
node_app -->|"routes to"| node_reports
node_app -->|"routes to"| node_settings
node_layout -->|"changes tab"| node_app
node_patients -->|"requests patient updates"| node_app
node_schedule -->|"renders picker"| node_date
node_schedule -->|"requests appointment updates"| node_app
node_billing -->|"requests appointment updates"| node_app
node_settings -->|"requests settings updates"| node_app
node_ai -.->|"requests suggestions"| node_gemini

click node_entry "https://github.com/navruzbek05/medcontrol/blob/main/index.tsx"
click node_app "https://github.com/navruzbek05/medcontrol/blob/main/App.tsx"
click node_layout "https://github.com/navruzbek05/medcontrol/blob/main/components/Layout.tsx"
click node_seed "https://github.com/navruzbek05/medcontrol/blob/main/constants.ts"
click node_models "https://github.com/navruzbek05/medcontrol/blob/main/types.ts"
click node_dashboard "https://github.com/navruzbek05/medcontrol/blob/main/pages/Dashboard.tsx"
click node_patients "https://github.com/navruzbek05/medcontrol/blob/main/pages/PatientsPage.tsx"
click node_schedule "https://github.com/navruzbek05/medcontrol/blob/main/pages/SchedulePage.tsx"
click node_date "https://github.com/navruzbek05/medcontrol/blob/main/components/CustomDatePicker.tsx"
click node_billing "https://github.com/navruzbek05/medcontrol/blob/main/pages/BillingPage.tsx"
click node_settings "https://github.com/navruzbek05/medcontrol/blob/main/pages/SettingsPage.tsx"
click node_reports "https://github.com/navruzbek05/medcontrol/blob/main/pages/ReportsPage.tsx"
click node_ai "https://github.com/navruzbek05/medcontrol/blob/main/services/geminiService.ts"

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_entry,node_app,node_layout,node_seed,node_models toneBlue
class node_patients,node_schedule,node_date toneAmber
class node_billing,node_settings,node_gemini toneMint
class node_dashboard,node_reports,node_ai toneRose
class node_staff toneIndigo
```

## Components

### Application shell

- [React entry](https://github.com/navruzbek05/medcontrol/blob/main/index.tsx): `index.tsx`
- [App state and routing](https://github.com/navruzbek05/medcontrol/blob/main/App.tsx): `App.tsx`
- [Navigation layout](https://github.com/navruzbek05/medcontrol/blob/main/components/Layout.tsx): `components/Layout.tsx`
- [Mock clinic data](https://github.com/navruzbek05/medcontrol/blob/main/constants.ts): `constants.ts`
- [Clinic domain types](https://github.com/navruzbek05/medcontrol/blob/main/types.ts): `types.ts`

### Patient care

- [Patient records](https://github.com/navruzbek05/medcontrol/blob/main/pages/PatientsPage.tsx): `pages/PatientsPage.tsx`
- [Appointments and visit notes](https://github.com/navruzbek05/medcontrol/blob/main/pages/SchedulePage.tsx): `pages/SchedulePage.tsx`
- [Date picker](https://github.com/navruzbek05/medcontrol/blob/main/components/CustomDatePicker.tsx): `components/CustomDatePicker.tsx`

### Clinic operations

- [Billing and receipts](https://github.com/navruzbek05/medcontrol/blob/main/pages/BillingPage.tsx): `pages/BillingPage.tsx`
- [Staff and services](https://github.com/navruzbek05/medcontrol/blob/main/pages/SettingsPage.tsx): `pages/SettingsPage.tsx`

### Reporting and assistance

- [Clinic dashboard](https://github.com/navruzbek05/medcontrol/blob/main/pages/Dashboard.tsx): `pages/Dashboard.tsx`
- [Clinic reports](https://github.com/navruzbek05/medcontrol/blob/main/pages/ReportsPage.tsx): `pages/ReportsPage.tsx`
- [Diagnosis suggestions](https://github.com/navruzbek05/medcontrol/blob/main/services/geminiService.ts): `services/geminiService.ts`

### Other components

- **Clinic staff**
- **Google Gemini API**

## Connections

- Clinic staff → React entry: opens app
- React entry → App state and routing: renders
- App state and routing → Mock clinic data: loads mock data
- App state and routing → Navigation layout: renders shell
- App state and routing → Clinic dashboard: routes to
- App state and routing → Patient records: routes to
- App state and routing → Appointments and visit notes: routes to
- App state and routing → Billing and receipts: routes to
- App state and routing → Clinic reports: routes to
- App state and routing → Staff and services: routes to
- Navigation layout → App state and routing: changes tab
- Patient records → App state and routing: requests patient updates
- Appointments and visit notes → Date picker: renders picker
- Appointments and visit notes → App state and routing: requests appointment updates
- Billing and receipts → App state and routing: requests appointment updates
- Staff and services → App state and routing: requests settings updates
- Diagnosis suggestions → Google Gemini API: requests suggestions