# osgiliath01/cpecaps-project architecture

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

- Interactive diagram: https://gitdiagram.com/osgiliath01/cpecaps-project
- Repository: https://github.com/osgiliath01/cpecaps-project

## Overview

This is a voucher and project disbursement tracking application: users sign in, browse projects and disbursement records, review project expense summaries, and create, edit, or delete entries. The React app delegates requests through an API client to a FastAPI backend; backend routes apply authentication and CRUD operations over SQLAlchemy models and PostgreSQL. The excerpts establish the main UI composition and backend call structure. The API client is listed as read but its request implementation was not excerpted, so its connection to backend routes is shown as unverified.

Main entry points: [`Frontend/src/components/Dashboard.jsx`](https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/components/Dashboard.jsx) (Dashboard), [`Frontend/src/App.jsx`](https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/App.jsx) (App session), [`Backend/auth.py`](https://github.com/osgiliath01/cpecaps-project/blob/main/Backend/auth.py) (Auth and domain routes), [`Frontend/src/api/api.js`](https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/api/api.js) (API client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Workspace UI"]
  node_app["App session<br/>[App.jsx]"]
  node_login["Login and registration<br/>[Login.jsx]"]
  node_dashboard["Dashboard<br/>[Dashboard.jsx]"]
  node_projects["Project control<br/>[ProjectsTable.jsx]"]
  node_expenses["Expense summary"]
  node_entry["Entry dialog<br/>[EntryDialog.jsx]"]
  node_admin["Account menu<br/>[AdminMenu.jsx]"]
  node_chat["Chat widget<br/>[ChatWidget.jsx]"]
  node_pagination["Pagination<br/>[usePagination.js]"]
  node_format["Currency and dates<br/>[format.js]"]
end

subgraph group_client["Request Client"]
  node_api["API client<br/>[api.js]"]
  node_mock["Mock API<br/>[mockAPI.js]"]
end

subgraph group_backend["Backend Services"]
  node_routes["Auth and domain routes<br/>[auth.py]"]
  node_crud["Domain CRUD<br/>[crud.py]"]
  node_security["Authentication security<br/>[security.py]"]
end

subgraph group_data["Persistence"]
  node_models["User and expense models<br/>[models.py]"]
  node_database["Database session<br/>[database.py]"]
end

node_user(("Staff user"))
node_postgres[("PostgreSQL")]

node_user -->|"uses workspace"| node_app
node_app -->|"renders unauthenticated"| node_login
node_app -->|"renders signed-in"| node_dashboard
node_app -->|"creates client"| node_api
node_dashboard -->|"requests records"| node_api
node_dashboard -->|"renders project list"| node_projects
node_dashboard -->|"renders summary"| node_expenses
node_dashboard -->|"opens entry form"| node_entry
node_dashboard -->|"renders account menu"| node_admin
node_dashboard -->|"renders widget"| node_chat
node_expenses -->|"pages entries"| node_pagination
node_expenses -->|"formats amounts and dates"| node_format
node_api -->|"uses mock implementation"| node_mock
node_api -.->|"sends API requests"| node_routes
node_routes -->|"dispatches domain operations"| node_crud
node_routes -->|"checks credentials"| node_security
node_routes -->|"injects database session"| node_database
node_crud -->|"queries and updates"| node_models
node_crud -->|"hashes passwords"| node_security
node_security -->|"loads current user"| node_models
node_security -->|"gets database session"| node_database
node_models -->|"uses declarative base"| node_database
node_database -->|"connects to"| node_postgres

click node_app "https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/App.jsx"
click node_login "https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/components/Login.jsx"
click node_dashboard "https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/components/Dashboard.jsx"
click node_projects "https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/components/ProjectsTable.jsx"
click node_expenses "https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/components/SummaryOfExpenses.jsx"
click node_entry "https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/components/EntryDialog.jsx"
click node_admin "https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/components/AdminMenu.jsx"
click node_chat "https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/components/ChatWidget.jsx"
click node_pagination "https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/hooks/usePagination.js"
click node_format "https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/utils/format.js"
click node_api "https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/api/api.js"
click node_mock "https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/api/mockAPI.js"
click node_routes "https://github.com/osgiliath01/cpecaps-project/blob/main/Backend/auth.py"
click node_crud "https://github.com/osgiliath01/cpecaps-project/blob/main/Backend/crud.py"
click node_security "https://github.com/osgiliath01/cpecaps-project/blob/main/Backend/security.py"
click node_models "https://github.com/osgiliath01/cpecaps-project/blob/main/Backend/models.py"
click node_database "https://github.com/osgiliath01/cpecaps-project/blob/main/Backend/database.py"

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_login,node_dashboard,node_projects,node_expenses,node_entry,node_admin,node_chat,node_pagination,node_format,node_user toneBlue
class node_api,node_mock,node_postgres toneAmber
class node_routes,node_crud,node_security toneMint
class node_models,node_database toneRose
```

## Components

### Workspace UI

- [App session](https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/App.jsx): `Frontend/src/App.jsx`
- [Login and registration](https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/components/Login.jsx): `Frontend/src/components/Login.jsx`
- [Dashboard](https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/components/Dashboard.jsx): `Frontend/src/components/Dashboard.jsx`
- [Project control](https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/components/ProjectsTable.jsx): `Frontend/src/components/ProjectsTable.jsx`
- [Expense summary](https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/components/SummaryOfExpenses.jsx): `Frontend/src/components/SummaryOfExpenses.jsx`
- [Entry dialog](https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/components/EntryDialog.jsx): `Frontend/src/components/EntryDialog.jsx`
- [Account menu](https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/components/AdminMenu.jsx): `Frontend/src/components/AdminMenu.jsx`
- [Chat widget](https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/components/ChatWidget.jsx): `Frontend/src/components/ChatWidget.jsx`
- [Pagination](https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/hooks/usePagination.js): `Frontend/src/hooks/usePagination.js`
- [Currency and dates](https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/utils/format.js): `Frontend/src/utils/format.js`

### Request Client

- [API client](https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/api/api.js): `Frontend/src/api/api.js`
- [Mock API](https://github.com/osgiliath01/cpecaps-project/blob/main/Frontend/src/api/mockAPI.js): `Frontend/src/api/mockAPI.js`

### Backend Services

- [Auth and domain routes](https://github.com/osgiliath01/cpecaps-project/blob/main/Backend/auth.py): `Backend/auth.py`
- [Domain CRUD](https://github.com/osgiliath01/cpecaps-project/blob/main/Backend/crud.py): `Backend/crud.py`
- [Authentication security](https://github.com/osgiliath01/cpecaps-project/blob/main/Backend/security.py): `Backend/security.py`

### Persistence

- [User and expense models](https://github.com/osgiliath01/cpecaps-project/blob/main/Backend/models.py): `Backend/models.py`
- [Database session](https://github.com/osgiliath01/cpecaps-project/blob/main/Backend/database.py): `Backend/database.py`

### Other components

- **Staff user**
- **PostgreSQL**

## Connections

- Staff user → App session: uses workspace (evidence: `Frontend/src/App.jsx`)
- App session → Login and registration: renders unauthenticated (evidence: `Frontend/src/App.jsx`)
- App session → Dashboard: renders signed-in (evidence: `Frontend/src/App.jsx`)
- App session → API client: creates client (evidence: `Frontend/src/App.jsx`)
- Dashboard → API client: requests records (evidence: `Frontend/src/components/Dashboard.jsx`)
- Dashboard → Project control: renders project list (evidence: `Frontend/src/components/Dashboard.jsx`)
- Dashboard → Expense summary: renders summary (evidence: `Frontend/src/components/Dashboard.jsx`)
- Dashboard → Entry dialog: opens entry form (evidence: `Frontend/src/components/Dashboard.jsx`)
- Dashboard → Account menu: renders account menu (evidence: `Frontend/src/components/Dashboard.jsx`)
- Dashboard → Chat widget: renders widget (evidence: `Frontend/src/components/Dashboard.jsx`)
- Expense summary → Pagination: pages entries (evidence: `Frontend/src/components/SummaryOfExpenses.jsx`)
- Expense summary → Currency and dates: formats amounts and dates (evidence: `Frontend/src/components/SummaryOfExpenses.jsx`)
- API client → Mock API: uses mock implementation (evidence: `Frontend/src/api/api.js`)
- API client → Auth and domain routes: sends API requests
- Auth and domain routes → Domain CRUD: dispatches domain operations (evidence: `Backend/auth.py`)
- Auth and domain routes → Authentication security: checks credentials (evidence: `Backend/auth.py`)
- Auth and domain routes → Database session: injects database session (evidence: `Backend/auth.py`)
- Domain CRUD → User and expense models: queries and updates (evidence: `Backend/crud.py`)
- Domain CRUD → Authentication security: hashes passwords (evidence: `Backend/crud.py`)
- Authentication security → User and expense models: loads current user (evidence: `Backend/security.py`)
- Authentication security → Database session: gets database session (evidence: `Backend/security.py`)
- User and expense models → Database session: uses declarative base (evidence: `Backend/models.py`)
- Database session → PostgreSQL: connects to (evidence: `Backend/database.py`)