# pattaraladadara/it-project architecture

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

- Interactive diagram: https://gitdiagram.com/pattaraladadara/it-project
- Repository: https://github.com/pattaraladadara/it-project

## Overview

QueueFlow is a clinic queue-management application: patients request tickets, staff manage and advance queues, and a display announces called tickets. Staff can also view service metrics and export period-based reports. The React UI uses a shared API client and polling hooks; the Node server contains queue and reporting logic backed by PostgreSQL. The excerpts establish UI-to-module calls and server database access. The API client and server communicate over HTTP in the apparent runtime design, but the shown excerpts do not establish their exact route wiring, so that link is marked unverified.

Main entry points: [`src/App.jsx`](https://github.com/pattaraladadara/it-project/blob/main/src/App.jsx) (QueueFlow UI), [`src/api.js`](https://github.com/pattaraladadara/it-project/blob/main/src/api.js) (API client), [`src/hooks/useQueueData.js`](https://github.com/pattaraladadara/it-project/blob/main/src/hooks/useQueueData.js) (Queue polling), [`src/hooks/useDashboardMetrics.js`](https://github.com/pattaraladadara/it-project/blob/main/src/hooks/useDashboardMetrics.js) (Metrics polling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Queue Experience"]
  node_app["QueueFlow UI<br/>[App.jsx]"]
  node_ui_entry["React entry<br/>[main.jsx]"]
  node_queue_poll["Queue polling<br/>[useQueueData.js]"]
  node_speech["Ticket announcements<br/>[speech.js]"]
end

subgraph group_insights["Reporting &amp; Metrics"]
  node_dashboard_poll["Metrics polling"]
  node_metrics_model["Metrics view model"]
  node_report_export["Report exports<br/>[reportExport.js]"]
end

subgraph group_backend["Queue Backend"]
  node_api_client["API client<br/>[api.js]"]
  node_server["HTTP &amp; queue services<br/>[index.js]"]
end

subgraph group_persistence["Persistence"]
  node_postgres[("Queue database")]
end

node_patient(("Patient"))
node_staff(("Clinic staff"))
node_viewer(("Queue display viewer"))

node_patient -->|"requests ticket"| node_app
node_staff -->|"manages queues"| node_app
node_viewer -->|"views calls"| node_app
node_ui_entry -->|"renders"| node_app
node_app -->|"polls queue"| node_queue_poll
node_app -->|"requests actions"| node_api_client
node_queue_poll -->|"loads queue"| node_api_client
node_app -->|"announces ticket"| node_speech
node_app -->|"loads metrics"| node_dashboard_poll
node_dashboard_poll -->|"fetches metrics"| node_api_client
node_app -->|"builds dashboard"| node_metrics_model
node_app -->|"exports reports"| node_report_export
node_api_client -.->|"sends API requests"| node_server
node_server -->|"queries and updates"| node_postgres

click node_app "https://github.com/pattaraladadara/it-project/blob/main/src/App.jsx"
click node_ui_entry "https://github.com/pattaraladadara/it-project/blob/main/src/main.jsx"
click node_queue_poll "https://github.com/pattaraladadara/it-project/blob/main/src/hooks/useQueueData.js"
click node_speech "https://github.com/pattaraladadara/it-project/blob/main/src/speech.js"
click node_api_client "https://github.com/pattaraladadara/it-project/blob/main/src/api.js"
click node_dashboard_poll "https://github.com/pattaraladadara/it-project/blob/main/src/hooks/useDashboardMetrics.js"
click node_metrics_model "https://github.com/pattaraladadara/it-project/blob/main/src/dashboardMetrics.js"
click node_report_export "https://github.com/pattaraladadara/it-project/blob/main/src/reportExport.js"
click node_server "https://github.com/pattaraladadara/it-project/blob/main/server/index.js"
click node_postgres "https://github.com/pattaraladadara/it-project/blob/main/db/queueflow_schema.sql"

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_ui_entry,node_queue_poll,node_speech toneBlue
class node_dashboard_poll,node_metrics_model,node_report_export toneAmber
class node_api_client,node_server toneMint
class node_postgres,node_viewer toneRose
class node_patient,node_staff toneIndigo
```

## Components

### Queue Experience

- [QueueFlow UI](https://github.com/pattaraladadara/it-project/blob/main/src/App.jsx): `src/App.jsx`
- [React entry](https://github.com/pattaraladadara/it-project/blob/main/src/main.jsx): `src/main.jsx`
- [Queue polling](https://github.com/pattaraladadara/it-project/blob/main/src/hooks/useQueueData.js): `src/hooks/useQueueData.js`
- [Ticket announcements](https://github.com/pattaraladadara/it-project/blob/main/src/speech.js): `src/speech.js`

### Reporting & Metrics

- [Metrics polling](https://github.com/pattaraladadara/it-project/blob/main/src/hooks/useDashboardMetrics.js): `src/hooks/useDashboardMetrics.js`
- [Metrics view model](https://github.com/pattaraladadara/it-project/blob/main/src/dashboardMetrics.js): `src/dashboardMetrics.js`
- [Report exports](https://github.com/pattaraladadara/it-project/blob/main/src/reportExport.js): `src/reportExport.js`

### Queue Backend

- [API client](https://github.com/pattaraladadara/it-project/blob/main/src/api.js): `src/api.js`
- [HTTP & queue services](https://github.com/pattaraladadara/it-project/blob/main/server/index.js): `server/index.js`

### Persistence

- [Queue database](https://github.com/pattaraladadara/it-project/blob/main/db/queueflow_schema.sql): `db/queueflow_schema.sql`

### Other components

- **Patient**
- **Clinic staff**
- **Queue display viewer**

## Connections

- Patient → QueueFlow UI: requests ticket (evidence: `src/App.jsx`)
- Clinic staff → QueueFlow UI: manages queues (evidence: `src/App.jsx`)
- Queue display viewer → QueueFlow UI: views calls (evidence: `src/App.jsx`)
- React entry → QueueFlow UI: renders (evidence: `src/main.jsx`)
- QueueFlow UI → Queue polling: polls queue (evidence: `src/App.jsx`)
- QueueFlow UI → API client: requests actions (evidence: `src/App.jsx`)
- Queue polling → API client: loads queue (evidence: `src/hooks/useQueueData.js`)
- QueueFlow UI → Ticket announcements: announces ticket (evidence: `src/App.jsx`)
- QueueFlow UI → Metrics polling: loads metrics (evidence: `src/App.jsx`)
- Metrics polling → API client: fetches metrics (evidence: `src/hooks/useDashboardMetrics.js`)
- QueueFlow UI → Metrics view model: builds dashboard (evidence: `src/App.jsx`)
- QueueFlow UI → Report exports: exports reports (evidence: `src/App.jsx`)
- API client → HTTP & queue services: sends API requests
- HTTP & queue services → Queue database: queries and updates (evidence: `server/index.js`)