# mhafizz/dashboard-ffm architecture

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

- Interactive diagram: https://gitdiagram.com/mhafizz/dashboard-ffm
- Repository: https://github.com/mhafizz/dashboard-ffm

## Overview

This is a service-order operations dashboard: users review company-wide workload, inspect customer-representative performance and drill into work orders. The React app selects overview, representative and work-order pages; a shared API client requests Laravel summaries and paginated orders, whose controllers query relational models. The tree and sampled sources support these main paths and several dashboard capabilities, but page implementations and API route wiring were not sampled, so some frontend-to-endpoint links reflect the client’s documented endpoint responsibilities rather than inspected page calls.

Main entry points: [`backend/app/Models/ServiceOrder.php`](https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Models/ServiceOrder.php) (Service orders), [`frontend/src/api/client.js`](https://github.com/mhafizz/dashboard-ffm/blob/main/frontend/src/api/client.js) (API client), [`backend/app/Http/Controllers/Api/DistrictController.php`](https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Http/Controllers/Api/DistrictController.php) (District API), [`backend/app/Models/CommitRequest.php`](https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Models/CommitRequest.php) (Commit requests)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Dashboard UI"]
  node_app["App shell<br/>[App.jsx]"]
  node_overview["Overview page<br/>[OverviewPage.jsx]"]
  node_reps["Customer reps"]
  node_orders["Work orders"]
  node_api_client["API client<br/>[client.js]"]
end

subgraph group_api["Laravel API"]
  node_district_controller["District API"]
  node_pic_controller["PIC API<br/>[PicController.php]"]
  node_order_controller["Service-order API"]
end

subgraph group_domain["Operational data"]
  node_district["Districts<br/>[District.php]"]
  node_pic["Customer reps<br/>[Pic.php]"]
  node_service_order["Service orders<br/>[ServiceOrder.php]"]
  node_commit_request["Commit requests<br/>[CommitRequest.php]"]
  node_location["Locations<br/>[Location.php]"]
  node_contractor["Contractors<br/>[Contractor.php]"]
end

node_user(("Dashboard user"))
node_database[("Relational database")]

node_user -->|"uses"| node_app
node_app -->|"selects"| node_overview
node_app -->|"selects"| node_reps
node_app -->|"selects"| node_orders
node_overview -->|"requests summaries"| node_api_client
node_reps -->|"requests PIC data"| node_api_client
node_orders -->|"requests orders"| node_api_client
node_api_client -->|"requests district summary"| node_district_controller
node_api_client -->|"requests PIC data"| node_pic_controller
node_api_client -->|"requests orders and trends"| node_order_controller
node_district_controller -->|"reads districts"| node_district
node_district_controller -->|"reads locations"| node_location
node_district_controller -->|"counts incoming"| node_commit_request
node_district_controller -->|"counts completion and overdue"| node_service_order
node_pic_controller -->|"reads PICs"| node_pic
node_pic_controller -->|"counts requests"| node_commit_request
node_pic_controller -->|"queries orders"| node_service_order
node_order_controller -->|"queries orders and stats"| node_service_order
node_order_controller -->|"queries requests and trends"| node_commit_request
node_service_order -->|"belongs to"| node_location
node_service_order -->|"belongs to"| node_commit_request
node_service_order -->|"belongs to"| node_contractor
node_district -->|"reads"| node_database
node_pic -->|"reads"| node_database
node_service_order -->|"reads"| node_database
node_commit_request -->|"reads"| node_database

click node_app "https://github.com/mhafizz/dashboard-ffm/blob/main/frontend/src/App.jsx"
click node_overview "https://github.com/mhafizz/dashboard-ffm/blob/main/frontend/src/pages/OverviewPage.jsx"
click node_reps "https://github.com/mhafizz/dashboard-ffm/blob/main/frontend/src/pages/CustomerRepsPage.jsx"
click node_orders "https://github.com/mhafizz/dashboard-ffm/blob/main/frontend/src/pages/WorkOrderListPage.jsx"
click node_api_client "https://github.com/mhafizz/dashboard-ffm/blob/main/frontend/src/api/client.js"
click node_district_controller "https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Http/Controllers/Api/DistrictController.php"
click node_pic_controller "https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Http/Controllers/Api/PicController.php"
click node_order_controller "https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Http/Controllers/Api/ServiceOrderController.php"
click node_district "https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Models/District.php"
click node_pic "https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Models/Pic.php"
click node_service_order "https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Models/ServiceOrder.php"
click node_commit_request "https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Models/CommitRequest.php"
click node_location "https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Models/Location.php"
click node_contractor "https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Models/Contractor.php"

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_overview,node_reps,node_orders,node_api_client,node_user toneBlue
class node_district_controller,node_pic_controller,node_order_controller,node_database toneAmber
class node_district,node_pic,node_service_order,node_commit_request,node_location,node_contractor toneMint
```

## Components

### Dashboard UI

- [App shell](https://github.com/mhafizz/dashboard-ffm/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Overview page](https://github.com/mhafizz/dashboard-ffm/blob/main/frontend/src/pages/OverviewPage.jsx): `frontend/src/pages/OverviewPage.jsx`
- [Customer reps](https://github.com/mhafizz/dashboard-ffm/blob/main/frontend/src/pages/CustomerRepsPage.jsx): `frontend/src/pages/CustomerRepsPage.jsx`
- [Work orders](https://github.com/mhafizz/dashboard-ffm/blob/main/frontend/src/pages/WorkOrderListPage.jsx): `frontend/src/pages/WorkOrderListPage.jsx`
- [API client](https://github.com/mhafizz/dashboard-ffm/blob/main/frontend/src/api/client.js): `frontend/src/api/client.js`

### Laravel API

- [District API](https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Http/Controllers/Api/DistrictController.php): `backend/app/Http/Controllers/Api/DistrictController.php`
- [PIC API](https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Http/Controllers/Api/PicController.php): `backend/app/Http/Controllers/Api/PicController.php`
- [Service-order API](https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Http/Controllers/Api/ServiceOrderController.php): `backend/app/Http/Controllers/Api/ServiceOrderController.php`

### Operational data

- [Districts](https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Models/District.php): `backend/app/Models/District.php`
- [Customer reps](https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Models/Pic.php): `backend/app/Models/Pic.php`
- [Service orders](https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Models/ServiceOrder.php): `backend/app/Models/ServiceOrder.php`
- [Commit requests](https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Models/CommitRequest.php): `backend/app/Models/CommitRequest.php`
- [Locations](https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Models/Location.php): `backend/app/Models/Location.php`
- [Contractors](https://github.com/mhafizz/dashboard-ffm/blob/main/backend/app/Models/Contractor.php): `backend/app/Models/Contractor.php`

### Other components

- **Dashboard user**
- **Relational database**

## Connections

- Dashboard user → App shell: uses
- App shell → Overview page: selects
- App shell → Customer reps: selects
- App shell → Work orders: selects
- Overview page → API client: requests summaries
- Customer reps → API client: requests PIC data
- Work orders → API client: requests orders
- API client → District API: requests district summary
- API client → PIC API: requests PIC data
- API client → Service-order API: requests orders and trends
- District API → Districts: reads districts
- District API → Locations: reads locations
- District API → Commit requests: counts incoming
- District API → Service orders: counts completion and overdue
- PIC API → Customer reps: reads PICs
- PIC API → Commit requests: counts requests
- PIC API → Service orders: queries orders
- Service-order API → Service orders: queries orders and stats
- Service-order API → Commit requests: queries requests and trends
- Service orders → Locations: belongs to
- Service orders → Commit requests: belongs to
- Service orders → Contractors: belongs to
- Districts → Relational database: reads
- Customer reps → Relational database: reads
- Service orders → Relational database: reads
- Commit requests → Relational database: reads