# indraagstin025/timbangan-digital-project architecture

> Architecture diagram of the GitHub repository indraagstin025/timbangan-digital-project, 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/indraagstin025/timbangan-digital-project
- Repository: https://github.com/indraagstin025/timbangan-digital-project

## Overview

TimbangSapi is a livestock-management web app for monitoring IoT scale readings, managing cattle, and reviewing weight and growth data. The main workflow is: an operator uses the dashboard or control view; scale readings arrive in real time or are saved through the weighing flow; the app refreshes cattle, summary, history, and growth data; users then inspect individual cattle, DSS recommendations, and reports. The graph reflects the sampled app, hook, and API-client wiring plus landing-page capabilities. Several page and API implementations were not sampled, so their internal calls are not inferred.

Main entry points: [`src/App.jsx`](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/App.jsx) (App controller), [`src/hooks/useLivestockData.js`](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/hooks/useLivestockData.js) (Livestock data hook), [`src/api/apiClient.js`](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/api/apiClient.js) (HTTP API client), [`src/api/deviceApi.js`](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/api/deviceApi.js) (Device API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and access"]
  node_app["App controller<br/>[App.jsx]"]
  node_landing["Landing page<br/>[LandingPage.jsx]"]
  node_login["Login page<br/>[LoginPage.jsx]"]
  node_auth["Authentication state<br/>[AuthContext.jsx]"]
  node_layout["Main layout<br/>[MainLayout.jsx]"]
  node_profile["User profile<br/>[ProfilePage.jsx]"]
end

subgraph group_livestock["Livestock operations"]
  node_datahook["Livestock data hook"]
  node_dashboard["Dashboard<br/>[DashboardPage.jsx]"]
  node_control["Scale control<br/>[ControlPage.jsx]"]
  node_livewidget["Live scale widget"]
  node_cattle["Cattle registry<br/>[DssPage.jsx]"]
  node_cowdetail["Cattle detail<br/>[CowDetailPage.jsx]"]
  node_detailhook["Detail data hook<br/>[useCowDetail.js]"]
  node_devices["Device management<br/>[DevicesPage.jsx]"]
end

subgraph group_insights["Analysis and reporting"]
  node_growth["Growth analysis<br/>[GrowthPage.jsx]"]
  node_history["Weighing history<br/>[HistoryPage.jsx]"]
  node_dssfilter["DSS filtering<br/>[useDssFilter.js]"]
  node_export["Data export<br/>[ExportPage.jsx]"]
end

subgraph group_services["API and devices"]
  node_api["HTTP API client<br/>[apiClient.js]"]
  node_authapi["Authentication API<br/>[authApi.js]"]
  node_cowapi["Cattle API<br/>[cowApi.js]"]
  node_dashboardapi["Dashboard API<br/>[dashboardApi.js]"]
  node_weighingapi["Weighing API<br/>[weighingApi.js]"]
  node_deviceapi["Device API<br/>[deviceApi.js]"]
end

node_operator(("Operator"))
node_backend{{"Backend API"}}
node_scale{{"IoT scale"}}

node_operator -->|"uses"| node_app
node_app -->|"checks session"| node_auth
node_app -->|"shows"| node_landing
node_app -->|"shows"| node_login
node_login -->|"authenticates"| node_auth
node_auth -->|"calls"| node_authapi
node_app -->|"loads data"| node_datahook
node_app -->|"renders"| node_layout
node_app -->|"routes"| node_dashboard
node_app -->|"routes"| node_control
node_app -->|"routes"| node_cattle
node_app -->|"routes"| node_cowdetail
node_app -->|"routes"| node_growth
node_app -->|"routes"| node_history
node_app -->|"routes"| node_export
node_app -->|"routes"| node_devices
node_app -->|"routes"| node_profile
node_datahook -->|"fetches and creates"| node_cowapi
node_datahook -->|"fetches summary and trends"| node_dashboardapi
node_datahook -->|"fetches and saves"| node_weighingapi
node_datahook -->|"receives API data"| node_backend
node_scale -->|"streams readings"| node_datahook
node_datahook -->|"provides metrics"| node_dashboard
node_datahook -->|"provides live state"| node_control
node_datahook -->|"provides trends"| node_growth
node_datahook -->|"provides weighings"| node_history
node_datahook -->|"provides cattle"| node_cattle
node_cattle -->|"filters and sorts"| node_dssfilter
node_cowdetail -->|"loads detail"| node_detailhook
node_detailhook -->|"fetches prediction and weights"| node_cowapi
node_livewidget -->|"saves weighing"| node_weighingapi
node_livewidget -->|"sends commands"| node_deviceapi
node_deviceapi -->|"dispatches commands"| node_backend
node_api -->|"sends HTTP requests"| node_backend
node_authapi -->|"uses"| node_api
node_cowapi -->|"uses"| node_api
node_dashboardapi -->|"uses"| node_api
node_weighingapi -->|"uses"| node_api
node_deviceapi -->|"uses"| node_api

click node_app "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/App.jsx"
click node_landing "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/LandingPage.jsx"
click node_login "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/LoginPage.jsx"
click node_auth "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/contexts/AuthContext.jsx"
click node_layout "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/layouts/MainLayout.jsx"
click node_datahook "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/hooks/useLivestockData.js"
click node_dashboard "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/DashboardPage.jsx"
click node_control "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/ControlPage.jsx"
click node_livewidget "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/components/LiveScaleWidget.jsx"
click node_cattle "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/DssPage.jsx"
click node_cowdetail "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/CowDetailPage.jsx"
click node_detailhook "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/hooks/useCowDetail.js"
click node_devices "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/DevicesPage.jsx"
click node_growth "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/GrowthPage.jsx"
click node_history "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/HistoryPage.jsx"
click node_dssfilter "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/hooks/useDssFilter.js"
click node_export "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/ExportPage.jsx"
click node_profile "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/ProfilePage.jsx"
click node_api "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/api/apiClient.js"
click node_authapi "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/api/authApi.js"
click node_cowapi "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/api/cowApi.js"
click node_dashboardapi "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/api/dashboardApi.js"
click node_weighingapi "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/api/weighingApi.js"
click node_deviceapi "https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/api/deviceApi.js"

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_landing,node_login,node_auth,node_layout,node_profile toneBlue
class node_datahook,node_dashboard,node_control,node_livewidget,node_cattle,node_cowdetail,node_detailhook,node_devices toneAmber
class node_growth,node_history,node_dssfilter,node_export,node_backend toneMint
class node_api,node_authapi,node_cowapi,node_dashboardapi,node_weighingapi,node_deviceapi toneRose
class node_operator,node_scale toneIndigo
```

## Components

### App and access

- [App controller](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/App.jsx): `src/App.jsx`
- [Landing page](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/LandingPage.jsx): `src/pages/LandingPage.jsx`
- [Login page](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/LoginPage.jsx): `src/pages/LoginPage.jsx`
- [Authentication state](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/contexts/AuthContext.jsx): `src/contexts/AuthContext.jsx`
- [Main layout](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/layouts/MainLayout.jsx): `src/layouts/MainLayout.jsx`
- [User profile](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/ProfilePage.jsx): `src/pages/ProfilePage.jsx`

### Livestock operations

- [Livestock data hook](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/hooks/useLivestockData.js): `src/hooks/useLivestockData.js`
- [Dashboard](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/DashboardPage.jsx): `src/pages/DashboardPage.jsx`
- [Scale control](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/ControlPage.jsx): `src/pages/ControlPage.jsx`
- [Live scale widget](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/components/LiveScaleWidget.jsx): `src/components/LiveScaleWidget.jsx`
- [Cattle registry](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/DssPage.jsx): `src/pages/DssPage.jsx`
- [Cattle detail](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/CowDetailPage.jsx): `src/pages/CowDetailPage.jsx`
- [Detail data hook](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/hooks/useCowDetail.js): `src/hooks/useCowDetail.js`
- [Device management](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/DevicesPage.jsx): `src/pages/DevicesPage.jsx`

### Analysis and reporting

- [Growth analysis](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/GrowthPage.jsx): `src/pages/GrowthPage.jsx`
- [Weighing history](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/HistoryPage.jsx): `src/pages/HistoryPage.jsx`
- [DSS filtering](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/hooks/useDssFilter.js): `src/hooks/useDssFilter.js`
- [Data export](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/pages/ExportPage.jsx): `src/pages/ExportPage.jsx`

### API and devices

- [HTTP API client](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/api/apiClient.js): `src/api/apiClient.js`
- [Authentication API](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/api/authApi.js): `src/api/authApi.js`
- [Cattle API](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/api/cowApi.js): `src/api/cowApi.js`
- [Dashboard API](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/api/dashboardApi.js): `src/api/dashboardApi.js`
- [Weighing API](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/api/weighingApi.js): `src/api/weighingApi.js`
- [Device API](https://github.com/indraagstin025/timbangan-digital-project/blob/main/src/api/deviceApi.js): `src/api/deviceApi.js`

### Other components

- **Operator**
- **Backend API**
- **IoT scale**

## Connections

- Operator → App controller: uses
- App controller → Authentication state: checks session
- App controller → Landing page: shows
- App controller → Login page: shows
- Login page → Authentication state: authenticates
- Authentication state → Authentication API: calls
- App controller → Livestock data hook: loads data
- App controller → Main layout: renders
- App controller → Dashboard: routes
- App controller → Scale control: routes
- App controller → Cattle registry: routes
- App controller → Cattle detail: routes
- App controller → Growth analysis: routes
- App controller → Weighing history: routes
- App controller → Data export: routes
- App controller → Device management: routes
- App controller → User profile: routes
- Livestock data hook → Cattle API: fetches and creates
- Livestock data hook → Dashboard API: fetches summary and trends
- Livestock data hook → Weighing API: fetches and saves
- Livestock data hook → Backend API: receives API data
- IoT scale → Livestock data hook: streams readings
- Livestock data hook → Dashboard: provides metrics
- Livestock data hook → Scale control: provides live state
- Livestock data hook → Growth analysis: provides trends
- Livestock data hook → Weighing history: provides weighings
- Livestock data hook → Cattle registry: provides cattle
- Cattle registry → DSS filtering: filters and sorts
- Cattle detail → Detail data hook: loads detail
- Detail data hook → Cattle API: fetches prediction and weights
- Live scale widget → Weighing API: saves weighing
- Live scale widget → Device API: sends commands
- Device API → Backend API: dispatches commands
- HTTP API client → Backend API: sends HTTP requests
- Authentication API → HTTP API client: uses
- Cattle API → HTTP API client: uses
- Dashboard API → HTTP API client: uses
- Weighing API → HTTP API client: uses
- Device API → HTTP API client: uses