# nonthaphat-ss/umong-waste-bank architecture

> Architecture diagram of the GitHub repository nonthaphat-ss/umong-waste-bank, 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/nonthaphat-ss/umong-waste-bank
- Repository: https://github.com/nonthaphat-ss/umong-waste-bank

## Overview

This is a village waste-bank management web app. Staff use the dashboard to review waste and member statistics, manage households and village records, set waste prices, and record deposits that update member balances and transaction history. The map supports locating households and registering a home pin. The excerpts show these responsibilities concentrated in App.jsx; unsampled code means some data-loading and authentication details cannot be established.

Main entry points: [`src/App.jsx`](https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/App.jsx) (Bank dashboard), [`src/main.jsx`](https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/main.jsx) (React entry), [`src/MapView.jsx`](https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/MapView.jsx) (Household map), [`src/firebase.js`](https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/firebase.js) (Firebase setup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Application UI"]
  node_entry["React entry<br/>[main.jsx]"]
  node_app["Bank dashboard<br/>[App.jsx]"]
end

subgraph group_operations["Bank Operations"]
  node_overview["Statistics and charts<br/>[App.jsx]"]
  node_access["Staff access screen<br/>[App.jsx]"]
  node_households["Household records<br/>[App.jsx]"]
  node_deposits["Waste deposits<br/>[App.jsx]"]
  node_balances["Member balances<br/>[App.jsx]"]
  node_prices["Waste price settings<br/>[App.jsx]"]
  node_villages["Village management<br/>[App.jsx]"]
  node_activity["Transaction and admin history<br/>[App.jsx]"]
end

subgraph group_data["Cloud Data"]
  node_firebase["Firebase setup<br/>[firebase.js]"]
  node_firestore[("Firestore")]
end

subgraph group_mapping["Household Map"]
  node_map["Household map<br/>[MapView.jsx]"]
  node_osm["OpenStreetMap tiles"]
end

node_user(("Staff or visitor"))

node_user -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_user -->|"uses dashboard"| node_app
node_app -->|"renders"| node_overview
node_app -->|"renders"| node_access
node_app -->|"manages"| node_households
node_app -->|"records"| node_deposits
node_app -->|"updates"| node_balances
node_app -->|"edits"| node_prices
node_app -->|"manages"| node_villages
node_app -->|"records"| node_activity
node_app -->|"renders"| node_map
node_firebase -->|"initializes"| node_firestore
node_app -->|"reads members"| node_firestore
node_app -->|"writes members"| node_firestore
node_app -->|"writes villages"| node_firestore
node_app -->|"writes transactions"| node_firestore
node_map -->|"loads tiles"| node_osm

click node_entry "https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/main.jsx"
click node_app "https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/App.jsx"
click node_overview "https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/App.jsx"
click node_access "https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/App.jsx"
click node_households "https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/App.jsx"
click node_deposits "https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/App.jsx"
click node_balances "https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/App.jsx"
click node_prices "https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/App.jsx"
click node_villages "https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/App.jsx"
click node_activity "https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/App.jsx"
click node_map "https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/MapView.jsx"
click node_firebase "https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/firebase.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_entry,node_app toneBlue
class node_overview,node_access,node_households,node_deposits,node_balances,node_prices,node_villages,node_activity toneAmber
class node_firebase,node_firestore toneMint
class node_map,node_osm toneRose
class node_user toneIndigo
```

## Components

### Application UI

- [React entry](https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/main.jsx): `src/main.jsx`
- [Bank dashboard](https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/App.jsx): `src/App.jsx`

### Bank Operations

- [Statistics and charts](https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/App.jsx): `src/App.jsx`
- [Staff access screen](https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/App.jsx): `src/App.jsx`
- [Household records](https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/App.jsx): `src/App.jsx`
- [Waste deposits](https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/App.jsx): `src/App.jsx`
- [Member balances](https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/App.jsx): `src/App.jsx`
- [Waste price settings](https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/App.jsx): `src/App.jsx`
- [Village management](https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/App.jsx): `src/App.jsx`
- [Transaction and admin history](https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/App.jsx): `src/App.jsx`

### Cloud Data

- [Firebase setup](https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/firebase.js): `src/firebase.js`
- **Firestore**

### Household Map

- [Household map](https://github.com/nonthaphat-ss/umong-waste-bank/blob/main/src/MapView.jsx): `src/MapView.jsx`
- **OpenStreetMap tiles**

### Other components

- **Staff or visitor**

## Connections

- Staff or visitor → React entry: opens app
- React entry → Bank dashboard: renders
- Staff or visitor → Bank dashboard: uses dashboard
- Bank dashboard → Statistics and charts: renders
- Bank dashboard → Staff access screen: renders
- Bank dashboard → Household records: manages
- Bank dashboard → Waste deposits: records
- Bank dashboard → Member balances: updates
- Bank dashboard → Waste price settings: edits
- Bank dashboard → Village management: manages
- Bank dashboard → Transaction and admin history: records
- Bank dashboard → Household map: renders
- Firebase setup → Firestore: initializes
- Bank dashboard → Firestore: reads members
- Bank dashboard → Firestore: writes members
- Bank dashboard → Firestore: writes villages
- Bank dashboard → Firestore: writes transactions
- Household map → OpenStreetMap tiles: loads tiles