# sajid73/careplan-frontend architecture

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

## Overview

This is a React-based care-planning and practice-management application. Its central workflow is to select a patient, record insurance and planned services, calculate costs and coverage, and review or generate care-plan documents. Management workflows maintain fee schedules and codes, patient records, team members, and templates. The excerpts show the router, shared context calculations, selected API operations, and template editor; several feature screens are represented by their tree paths, so their internal wiring is not asserted.

Main entry points: [`src/App.tsx`](https://github.com/sajid73/careplan-frontend/blob/main/src/App.tsx) (Route application), [`src/api/index.ts`](https://github.com/sajid73/careplan-frontend/blob/main/src/api/index.ts) (Backend API client), [`src/states/app.context.tsx`](https://github.com/sajid73/careplan-frontend/blob/main/src/states/app.context.tsx) (Application context), [`src/components/Common/TemplateEditor.jsx`](https://github.com/sajid73/careplan-frontend/blob/main/src/components/Common/TemplateEditor.jsx) (Template editor)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application and access"]
  node_app["Route application<br/>[App.tsx]"]
  node_layout["Role-based layout<br/>[index.tsx]"]
  node_login["Login<br/>[Login.tsx]"]
end

subgraph group_patient["Patient care"]
  node_patientdash["Patient dashboard"]
  node_insurance["Insurance entry<br/>[NewInsurance.tsx]"]
  node_buildplan["Care plan builder<br/>[BuildCarePlan.tsx]"]
  node_currentplan["Current care plan"]
  node_previousplan["Previous care plans"]
end

subgraph group_management["Practice management"]
  node_patientlist["Patient records<br/>[PatientList.tsx]"]
  node_feeschedule["Fee schedules<br/>[FeeSchedule.tsx]"]
  node_feeedit["Schedule and code editor"]
  node_caretemplates["Prebuilt care plans"]
  node_teammembers["Team members<br/>[TeamMembers.tsx]"]
  node_templatebuilder["Template builder"]
  node_templateeditor["Template editor<br/>[TemplateEditor.jsx]"]
  node_settings["User settings<br/>[UserSettings.tsx]"]
end

subgraph group_shared["Shared data and services"]
  node_context["Application context<br/>[app.context.tsx]"]
  node_calc["Plan cost calculation<br/>[calculatePay.ts]"]
  node_templatehooks["Template substitution<br/>[templateHooks.ts]"]
  node_api["Backend API client<br/>[index.ts]"]
end

node_user(("User"))
node_backend[("Care-plan backend")]

node_user -->|"opens"| node_app
node_app -->|"routes"| node_login
node_app -->|"routes"| node_layout
node_app -->|"routes"| node_patientdash
node_app -->|"routes"| node_buildplan
node_app -->|"routes"| node_currentplan
node_app -->|"routes"| node_previousplan
node_app -->|"routes"| node_templateeditor
node_app -->|"routes"| node_templatebuilder
node_app -->|"routes"| node_settings
node_layout -->|"logs out via"| node_api
node_login -->|"authenticates via"| node_api
node_login -->|"sets user"| node_context
node_patientdash -->|"uses patient state"| node_context
node_insurance -->|"loads patient"| node_context
node_context -->|"loads patient and codes"| node_api
node_context -->|"calculates plan"| node_calc
node_context -->|"loads templates and schedules"| node_api
node_patientlist -->|"manages patients"| node_api
node_feeedit -->|"updates schedules and codes"| node_api
node_feeschedule -->|"loads schedules"| node_api
node_caretemplates -->|"uses plan state"| node_context
node_templateeditor -->|"reads plan data"| node_context
node_templateeditor -->|"fills placeholders"| node_templatehooks
node_templateeditor -->|"saves template"| node_api
node_api -->|"sends requests"| node_backend

click node_app "https://github.com/sajid73/careplan-frontend/blob/main/src/App.tsx"
click node_layout "https://github.com/sajid73/careplan-frontend/blob/main/src/components/Layout/index.tsx"
click node_login "https://github.com/sajid73/careplan-frontend/blob/main/src/pages/Login.tsx"
click node_patientdash "https://github.com/sajid73/careplan-frontend/blob/main/src/components/PatientDashboard/PatientDashboard.tsx"
click node_insurance "https://github.com/sajid73/careplan-frontend/blob/main/src/components/PatientDashboard/NewInsurance.tsx"
click node_buildplan "https://github.com/sajid73/careplan-frontend/blob/main/src/components/PatientDashboard/BuildCarePlan.tsx"
click node_currentplan "https://github.com/sajid73/careplan-frontend/blob/main/src/components/PatientDashboard/CurrentCarePlan.tsx"
click node_previousplan "https://github.com/sajid73/careplan-frontend/blob/main/src/components/PatientDashboard/PreviousCarePlan.tsx"
click node_patientlist "https://github.com/sajid73/careplan-frontend/blob/main/src/components/Dashboard/PatientList/PatientList.tsx"
click node_feeschedule "https://github.com/sajid73/careplan-frontend/blob/main/src/components/Dashboard/FeeSchedule/FeeSchedule.tsx"
click node_feeedit "https://github.com/sajid73/careplan-frontend/blob/main/src/components/Dashboard/FeeSchedule/FeeScheduleDetails.tsx"
click node_caretemplates "https://github.com/sajid73/careplan-frontend/blob/main/src/components/Dashboard/CarePlan/CarePlanBuilder.tsx"
click node_teammembers "https://github.com/sajid73/careplan-frontend/blob/main/src/components/Dashboard/TeamMembers/TeamMembers.tsx"
click node_templatebuilder "https://github.com/sajid73/careplan-frontend/blob/main/src/pages/TemplateBuilder.tsx"
click node_templateeditor "https://github.com/sajid73/careplan-frontend/blob/main/src/components/Common/TemplateEditor.jsx"
click node_settings "https://github.com/sajid73/careplan-frontend/blob/main/src/components/Dashboard/UserSettings/UserSettings.tsx"
click node_context "https://github.com/sajid73/careplan-frontend/blob/main/src/states/app.context.tsx"
click node_calc "https://github.com/sajid73/careplan-frontend/blob/main/src/utils/calculatePay.ts"
click node_templatehooks "https://github.com/sajid73/careplan-frontend/blob/main/src/hooks/templateHooks.ts"
click node_api "https://github.com/sajid73/careplan-frontend/blob/main/src/api/index.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_layout,node_login,node_user toneBlue
class node_patientdash,node_insurance,node_buildplan,node_currentplan,node_previousplan,node_backend toneAmber
class node_patientlist,node_feeschedule,node_feeedit,node_caretemplates,node_teammembers,node_templatebuilder,node_templateeditor,node_settings toneMint
class node_context,node_calc,node_templatehooks,node_api toneRose
```

## Components

### Application and access

- [Route application](https://github.com/sajid73/careplan-frontend/blob/main/src/App.tsx): `src/App.tsx`
- [Role-based layout](https://github.com/sajid73/careplan-frontend/blob/main/src/components/Layout/index.tsx): `src/components/Layout/index.tsx`
- [Login](https://github.com/sajid73/careplan-frontend/blob/main/src/pages/Login.tsx): `src/pages/Login.tsx`

### Patient care

- [Patient dashboard](https://github.com/sajid73/careplan-frontend/blob/main/src/components/PatientDashboard/PatientDashboard.tsx): `src/components/PatientDashboard/PatientDashboard.tsx`
- [Insurance entry](https://github.com/sajid73/careplan-frontend/blob/main/src/components/PatientDashboard/NewInsurance.tsx): `src/components/PatientDashboard/NewInsurance.tsx`
- [Care plan builder](https://github.com/sajid73/careplan-frontend/blob/main/src/components/PatientDashboard/BuildCarePlan.tsx): `src/components/PatientDashboard/BuildCarePlan.tsx`
- [Current care plan](https://github.com/sajid73/careplan-frontend/blob/main/src/components/PatientDashboard/CurrentCarePlan.tsx): `src/components/PatientDashboard/CurrentCarePlan.tsx`
- [Previous care plans](https://github.com/sajid73/careplan-frontend/blob/main/src/components/PatientDashboard/PreviousCarePlan.tsx): `src/components/PatientDashboard/PreviousCarePlan.tsx`

### Practice management

- [Patient records](https://github.com/sajid73/careplan-frontend/blob/main/src/components/Dashboard/PatientList/PatientList.tsx): `src/components/Dashboard/PatientList/PatientList.tsx`
- [Fee schedules](https://github.com/sajid73/careplan-frontend/blob/main/src/components/Dashboard/FeeSchedule/FeeSchedule.tsx): `src/components/Dashboard/FeeSchedule/FeeSchedule.tsx`
- [Schedule and code editor](https://github.com/sajid73/careplan-frontend/blob/main/src/components/Dashboard/FeeSchedule/FeeScheduleDetails.tsx): `src/components/Dashboard/FeeSchedule/FeeScheduleDetails.tsx`
- [Prebuilt care plans](https://github.com/sajid73/careplan-frontend/blob/main/src/components/Dashboard/CarePlan/CarePlanBuilder.tsx): `src/components/Dashboard/CarePlan/CarePlanBuilder.tsx`
- [Team members](https://github.com/sajid73/careplan-frontend/blob/main/src/components/Dashboard/TeamMembers/TeamMembers.tsx): `src/components/Dashboard/TeamMembers/TeamMembers.tsx`
- [Template builder](https://github.com/sajid73/careplan-frontend/blob/main/src/pages/TemplateBuilder.tsx): `src/pages/TemplateBuilder.tsx`
- [Template editor](https://github.com/sajid73/careplan-frontend/blob/main/src/components/Common/TemplateEditor.jsx): `src/components/Common/TemplateEditor.jsx`
- [User settings](https://github.com/sajid73/careplan-frontend/blob/main/src/components/Dashboard/UserSettings/UserSettings.tsx): `src/components/Dashboard/UserSettings/UserSettings.tsx`

### Shared data and services

- [Application context](https://github.com/sajid73/careplan-frontend/blob/main/src/states/app.context.tsx): `src/states/app.context.tsx`
- [Plan cost calculation](https://github.com/sajid73/careplan-frontend/blob/main/src/utils/calculatePay.ts): `src/utils/calculatePay.ts`
- [Template substitution](https://github.com/sajid73/careplan-frontend/blob/main/src/hooks/templateHooks.ts): `src/hooks/templateHooks.ts`
- [Backend API client](https://github.com/sajid73/careplan-frontend/blob/main/src/api/index.ts): `src/api/index.ts`

### Other components

- **User**
- **Care-plan backend**

## Connections

- User → Route application: opens
- Route application → Login: routes
- Route application → Role-based layout: routes
- Route application → Patient dashboard: routes
- Route application → Care plan builder: routes
- Route application → Current care plan: routes
- Route application → Previous care plans: routes
- Route application → Template editor: routes
- Route application → Template builder: routes
- Route application → User settings: routes
- Role-based layout → Backend API client: logs out via
- Login → Backend API client: authenticates via
- Login → Application context: sets user
- Patient dashboard → Application context: uses patient state
- Insurance entry → Application context: loads patient
- Application context → Backend API client: loads patient and codes
- Application context → Plan cost calculation: calculates plan
- Application context → Backend API client: loads templates and schedules
- Patient records → Backend API client: manages patients
- Schedule and code editor → Backend API client: updates schedules and codes
- Fee schedules → Backend API client: loads schedules
- Prebuilt care plans → Application context: uses plan state
- Template editor → Application context: reads plan data
- Template editor → Template substitution: fills placeholders
- Template editor → Backend API client: saves template
- Backend API client → Care-plan backend: sends requests