# ohcnetwork/care_fe architecture

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

## Overview

CARE is a healthcare operations frontend for clinical and administrative work, including patient records, appointments, encounters, scheduling and queues, medication dispensing, billing, files, and questionnaires. The principal workflow is a staff member entering through the app’s routes, working with patient or facility workflows, and submitting or retrieving data through the request layer. The tree documents these product areas; sampled code confirms request/cache behavior, encounter completion, file/report handling, and plugin loading. Detailed wiring for unsampled pages is not inferred.

Main entry points: [`src/PluginEngine.tsx`](https://github.com/ohcnetwork/care_fe/blob/develop/src/PluginEngine.tsx) (Plugin runtime), [`src/Routers/AppRouter.tsx`](https://github.com/ohcnetwork/care_fe/blob/develop/src/Routers/AppRouter.tsx) (App routes), [`src/App.tsx`](https://github.com/ohcnetwork/care_fe/blob/develop/src/App.tsx) (Application shell), [`src/hooks/useFileManager.tsx`](https://github.com/ohcnetwork/care_fe/blob/develop/src/hooks/useFileManager.tsx) (Files and reports)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and access"]
  node_app["Application shell<br/>[App.tsx]"]
  node_app_router["App routes<br/>[AppRouter.tsx]"]
  node_auth["Authentication<br/>[Authenticate.tsx]"]
  node_patient_router["Patient routes<br/>[PatientRouter.tsx]"]
end

subgraph group_clinical["Patient care"]
  node_patient["Patient records<br/>[PatientProfile.tsx]"]
  node_encounters["Encounters<br/>[EncounterShow.tsx]"]
  node_completion["Encounter completion"]
  node_questionnaire["Questionnaires"]
  node_files["Files and reports<br/>[useFileManager.tsx]"]
  node_notes["Clinical discussions<br/>[NoteManager.tsx]"]
end

subgraph group_operations["Facility operations"]
  node_appointments["Appointments"]
  node_schedule["Scheduling<br/>[ScheduleHome.tsx]"]
  node_queues["Facility queues"]
  node_medication["Medication billing"]
  node_billing["Billing"]
end

subgraph group_admin["Administration"]
  node_admin_routes["Admin routes<br/>[adminRoutes.tsx]"]
end

subgraph group_runtime["Shared runtime"]
  node_plugin_engine["Plugin runtime<br/>[PluginEngine.tsx]"]
  node_request["Request utilities<br/>[query.ts]"]
  node_query_client[("Query cache<br/>[queryClient.ts]")]
end

node_staff(("Healthcare staff"))
node_backend["CARE backend"]
node_local_storage[("Browser storage")]
node_plugin_service["Federated plugins"]

node_staff -->|"uses"| node_app
node_app -->|"routes through"| node_app_router
node_app_router -->|"authenticates"| node_auth
node_app_router -->|"routes to"| node_patient_router
node_patient_router -->|"serves records"| node_patient
node_patient -->|"opens"| node_encounters
node_encounters -->|"completes via"| node_completion
node_completion -->|"batches updates"| node_backend
node_appointments -->|"requests data"| node_backend
node_schedule -->|"requests data"| node_backend
node_queues -->|"loads subqueues"| node_backend
node_medication -->|"batches dispensing"| node_backend
node_billing -->|"requests data"| node_backend
node_questionnaire -->|"requests data"| node_backend
node_files -->|"queries files"| node_request
node_files -->|"archives files"| node_backend
node_notes -->|"manages discussions"| node_backend
node_admin_routes -->|"requests data"| node_backend
node_plugin_engine -->|"loads enabled plugins"| node_backend
node_plugin_engine -.->|"loads manifests"| node_plugin_service
node_plugin_engine -->|"provides plugins"| node_app
node_request -->|"sends requests"| node_backend
node_query_client -->|"persists queries"| node_local_storage

click node_app "https://github.com/ohcnetwork/care_fe/blob/develop/src/App.tsx"
click node_app_router "https://github.com/ohcnetwork/care_fe/blob/develop/src/Routers/AppRouter.tsx"
click node_auth "https://github.com/ohcnetwork/care_fe/blob/develop/src/components/Auth/Authenticate.tsx"
click node_patient_router "https://github.com/ohcnetwork/care_fe/blob/develop/src/Routers/PatientRouter.tsx"
click node_patient "https://github.com/ohcnetwork/care_fe/blob/develop/src/components/Patient/PatientProfile.tsx"
click node_encounters "https://github.com/ohcnetwork/care_fe/blob/develop/src/pages/Encounters/EncounterShow.tsx"
click node_completion "https://github.com/ohcnetwork/care_fe/blob/develop/src/pages/Encounters/utils/useEncounterProgressController.ts"
click node_questionnaire "https://github.com/ohcnetwork/care_fe/blob/develop/src/components/Questionnaire/QuestionnaireForm.tsx"
click node_appointments "https://github.com/ohcnetwork/care_fe/blob/develop/src/pages/Appointments/AppointmentsPage.tsx"
click node_schedule "https://github.com/ohcnetwork/care_fe/blob/develop/src/components/Schedule/ScheduleHome.tsx"
click node_queues "https://github.com/ohcnetwork/care_fe/blob/develop/src/pages/Facility/queues/useQueueServicePoints.ts"
click node_medication "https://github.com/ohcnetwork/care_fe/blob/develop/src/pages/Facility/services/pharmacy/billMedications/utils/useBillMedications.ts"
click node_billing "https://github.com/ohcnetwork/care_fe/blob/develop/src/components/Billing/Invoice/EditInvoiceDialog.tsx"
click node_files "https://github.com/ohcnetwork/care_fe/blob/develop/src/hooks/useFileManager.tsx"
click node_notes "https://github.com/ohcnetwork/care_fe/blob/develop/src/components/Notes/NoteManager.tsx"
click node_admin_routes "https://github.com/ohcnetwork/care_fe/blob/develop/src/Routers/routes/adminRoutes.tsx"
click node_plugin_engine "https://github.com/ohcnetwork/care_fe/blob/develop/src/PluginEngine.tsx"
click node_request "https://github.com/ohcnetwork/care_fe/blob/develop/src/Utils/request/query.ts"
click node_query_client "https://github.com/ohcnetwork/care_fe/blob/develop/src/Utils/request/queryClient.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_app,node_app_router,node_auth,node_patient_router toneBlue
class node_patient,node_encounters,node_completion,node_questionnaire,node_files,node_notes,node_local_storage toneAmber
class node_appointments,node_schedule,node_queues,node_medication,node_billing toneMint
class node_admin_routes toneRose
class node_plugin_engine,node_request,node_query_client,node_staff,node_backend,node_plugin_service toneIndigo
```

## Components

### App and access

- [Application shell](https://github.com/ohcnetwork/care_fe/blob/develop/src/App.tsx): `src/App.tsx`
- [App routes](https://github.com/ohcnetwork/care_fe/blob/develop/src/Routers/AppRouter.tsx): `src/Routers/AppRouter.tsx`
- [Authentication](https://github.com/ohcnetwork/care_fe/blob/develop/src/components/Auth/Authenticate.tsx): `src/components/Auth/Authenticate.tsx`
- [Patient routes](https://github.com/ohcnetwork/care_fe/blob/develop/src/Routers/PatientRouter.tsx): `src/Routers/PatientRouter.tsx`

### Patient care

- [Patient records](https://github.com/ohcnetwork/care_fe/blob/develop/src/components/Patient/PatientProfile.tsx): `src/components/Patient/PatientProfile.tsx`
- [Encounters](https://github.com/ohcnetwork/care_fe/blob/develop/src/pages/Encounters/EncounterShow.tsx): `src/pages/Encounters/EncounterShow.tsx`
- [Encounter completion](https://github.com/ohcnetwork/care_fe/blob/develop/src/pages/Encounters/utils/useEncounterProgressController.ts): `src/pages/Encounters/utils/useEncounterProgressController.ts`
- [Questionnaires](https://github.com/ohcnetwork/care_fe/blob/develop/src/components/Questionnaire/QuestionnaireForm.tsx): `src/components/Questionnaire/QuestionnaireForm.tsx`
- [Files and reports](https://github.com/ohcnetwork/care_fe/blob/develop/src/hooks/useFileManager.tsx): `src/hooks/useFileManager.tsx`
- [Clinical discussions](https://github.com/ohcnetwork/care_fe/blob/develop/src/components/Notes/NoteManager.tsx): `src/components/Notes/NoteManager.tsx`

### Facility operations

- [Appointments](https://github.com/ohcnetwork/care_fe/blob/develop/src/pages/Appointments/AppointmentsPage.tsx): `src/pages/Appointments/AppointmentsPage.tsx`
- [Scheduling](https://github.com/ohcnetwork/care_fe/blob/develop/src/components/Schedule/ScheduleHome.tsx): `src/components/Schedule/ScheduleHome.tsx`
- [Facility queues](https://github.com/ohcnetwork/care_fe/blob/develop/src/pages/Facility/queues/useQueueServicePoints.ts): `src/pages/Facility/queues/useQueueServicePoints.ts`
- [Medication billing](https://github.com/ohcnetwork/care_fe/blob/develop/src/pages/Facility/services/pharmacy/billMedications/utils/useBillMedications.ts): `src/pages/Facility/services/pharmacy/billMedications/utils/useBillMedications.ts`
- [Billing](https://github.com/ohcnetwork/care_fe/blob/develop/src/components/Billing/Invoice/EditInvoiceDialog.tsx): `src/components/Billing/Invoice/EditInvoiceDialog.tsx`

### Administration

- [Admin routes](https://github.com/ohcnetwork/care_fe/blob/develop/src/Routers/routes/adminRoutes.tsx): `src/Routers/routes/adminRoutes.tsx`

### Shared runtime

- [Plugin runtime](https://github.com/ohcnetwork/care_fe/blob/develop/src/PluginEngine.tsx): `src/PluginEngine.tsx`
- [Request utilities](https://github.com/ohcnetwork/care_fe/blob/develop/src/Utils/request/query.ts): `src/Utils/request/query.ts`
- [Query cache](https://github.com/ohcnetwork/care_fe/blob/develop/src/Utils/request/queryClient.ts): `src/Utils/request/queryClient.ts`

### Other components

- **Healthcare staff**
- **CARE backend**
- **Browser storage**
- **Federated plugins**

## Connections

- Healthcare staff → Application shell: uses
- Application shell → App routes: routes through
- App routes → Authentication: authenticates
- App routes → Patient routes: routes to
- Patient routes → Patient records: serves records
- Patient records → Encounters: opens
- Encounters → Encounter completion: completes via
- Encounter completion → CARE backend: batches updates
- Appointments → CARE backend: requests data
- Scheduling → CARE backend: requests data
- Facility queues → CARE backend: loads subqueues
- Medication billing → CARE backend: batches dispensing
- Billing → CARE backend: requests data
- Questionnaires → CARE backend: requests data
- Files and reports → Request utilities: queries files
- Files and reports → CARE backend: archives files
- Clinical discussions → CARE backend: manages discussions
- Admin routes → CARE backend: requests data
- Plugin runtime → CARE backend: loads enabled plugins
- Plugin runtime → Federated plugins: loads manifests
- Plugin runtime → Application shell: provides plugins
- Request utilities → CARE backend: sends requests
- Query cache → Browser storage: persists queries