# ahmadhakimitsnaini/kelontong-hub architecture

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

- Interactive diagram: https://gitdiagram.com/ahmadhakimitsnaini/kelontong-hub
- Repository: https://github.com/ahmadhakimitsnaini/kelontong-hub

## Overview

MaduraDigital is an offline-first POS and inventory application for small grocery shops. Staff authenticate, open a shift, scan or select products, complete a sale and issue a receipt; inventory, inbound stock, supplier management, bookkeeping and profit dashboards support that workflow. Local IndexedDB enables offline operation, while a background service syncs records with Supabase. The routes and excerpts establish the main app boundaries; several page implementations were only indexed, so detailed internal transitions are omitted.

Main entry points: [`src/App.jsx`](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/App.jsx) (Route Guard), [`src/db/db.js`](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/db/db.js) (Local IndexedDB), [`src/pages/POS/POSPage.jsx`](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/pages/POS/POSPage.jsx) (POS Checkout), [`src/store/useAuthStore.js`](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/store/useAuthStore.js) (Login & Roles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access & Shell"]
  node_routes["Route Guard<br/>[App.jsx]"]
  node_auth["Login &amp; Roles<br/>[useAuthStore.js]"]
  node_shell["App Shell<br/>[AppLayout.jsx]"]
  node_shift["Shift Handover<br/>[ShiftPage.jsx]"]
end

subgraph group_sales["Checkout &amp; Scanning"]
  node_pos["POS Checkout<br/>[POSPage.jsx]"]
  node_cart["Cart State<br/>[useCartStore.js]"]
  node_payment["Payment<br/>[PaymentModal.jsx]"]
  node_receipt["Receipt<br/>[ReceiptModal.jsx]"]
  node_scanner["Camera Scanner<br/>[CameraEngine.jsx]"]
  node_scanstate["Scan Modes<br/>[useScannerStore.js]"]
  node_hardware["Hardware Scanner"]
end

subgraph group_inventory["Inventory Operations"]
  node_master["Product Catalog<br/>[MasterBarang.jsx]"]
  node_inbound["Stock Inbound<br/>[Inbound.jsx]"]
  node_approval["Inbound Approval"]
  node_suppliers["Supplier Records<br/>[SupplierMaster.jsx]"]
end

subgraph group_finance["Business Reporting"]
  node_dashboard["Profit Dashboard<br/>[DashboardPage.jsx]"]
  node_books["Cash Bookkeeping<br/>[PembukuanPage.jsx]"]
end

subgraph group_platform["Offline &amp; Cloud"]
  node_localdb[("Local IndexedDB<br/>[db.js]")]
  node_sync["Cloud Sync<br/>[syncService.js]"]
end

node_staff(("Shop Staff"))
node_supabase[("Supabase")]

node_staff -->|"uses"| node_routes
node_routes -->|"guards access"| node_auth
node_routes -->|"renders routes"| node_shell
node_routes -->|"routes to"| node_pos
node_routes -->|"routes to"| node_shift
node_routes -->|"routes to"| node_master
node_routes -->|"routes to"| node_inbound
node_routes -->|"routes to"| node_approval
node_routes -->|"routes to"| node_suppliers
node_routes -->|"routes to"| node_dashboard
node_routes -->|"routes to"| node_books
node_pos -->|"uses"| node_cart
node_pos -->|"opens"| node_payment
node_pos -->|"renders"| node_receipt
node_pos -->|"records sales"| node_localdb
node_scanner -->|"uses"| node_scanstate
node_scanner -->|"adds scans"| node_cart
node_hardware -.->|"captures input"| node_pos
node_master -->|"reads and writes"| node_localdb
node_inbound -->|"records stock"| node_localdb
node_approval -->|"updates records"| node_localdb
node_suppliers -->|"manages records"| node_localdb
node_dashboard -->|"reads figures"| node_localdb
node_books -->|"reads entries"| node_localdb
node_auth -->|"authenticates"| node_supabase
node_auth -->|"starts sync"| node_sync
node_auth -->|"clears local data"| node_localdb
node_shell -->|"starts background sync"| node_sync
node_sync -->|"reads and writes"| node_localdb
node_sync -->|"syncs records"| node_supabase

click node_routes "https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/App.jsx"
click node_auth "https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/store/useAuthStore.js"
click node_shell "https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/components/layout/AppLayout.jsx"
click node_shift "https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/pages/Auth/ShiftPage.jsx"
click node_pos "https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/pages/POS/POSPage.jsx"
click node_cart "https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/store/useCartStore.js"
click node_payment "https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/pages/POS/PaymentModal.jsx"
click node_receipt "https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/components/ui/ReceiptModal.jsx"
click node_scanner "https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/components/scanner/CameraEngine.jsx"
click node_scanstate "https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/store/useScannerStore.js"
click node_hardware "https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/hooks/useHardwareScanner.js"
click node_master "https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/pages/Inventory/MasterBarang.jsx"
click node_inbound "https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/pages/Inventory/Inbound.jsx"
click node_approval "https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/pages/Inventory/ApprovalInbound.jsx"
click node_suppliers "https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/pages/Inventory/SupplierMaster.jsx"
click node_dashboard "https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/pages/Dashboard/DashboardPage.jsx"
click node_books "https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/pages/Pembukuan/PembukuanPage.jsx"
click node_localdb "https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/db/db.js"
click node_sync "https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/lib/syncService.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_routes,node_auth,node_shell,node_shift toneBlue
class node_pos,node_cart,node_payment,node_receipt,node_scanner,node_scanstate,node_hardware,node_supabase toneAmber
class node_master,node_inbound,node_approval,node_suppliers toneMint
class node_dashboard,node_books toneRose
class node_localdb,node_sync,node_staff toneIndigo
```

## Components

### Access & Shell

- [Route Guard](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/App.jsx): `src/App.jsx`
- [Login & Roles](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/store/useAuthStore.js): `src/store/useAuthStore.js`
- [App Shell](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/components/layout/AppLayout.jsx): `src/components/layout/AppLayout.jsx`
- [Shift Handover](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/pages/Auth/ShiftPage.jsx): `src/pages/Auth/ShiftPage.jsx`

### Checkout & Scanning

- [POS Checkout](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/pages/POS/POSPage.jsx): `src/pages/POS/POSPage.jsx`
- [Cart State](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/store/useCartStore.js): `src/store/useCartStore.js`
- [Payment](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/pages/POS/PaymentModal.jsx): `src/pages/POS/PaymentModal.jsx`
- [Receipt](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/components/ui/ReceiptModal.jsx): `src/components/ui/ReceiptModal.jsx`
- [Camera Scanner](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/components/scanner/CameraEngine.jsx): `src/components/scanner/CameraEngine.jsx`
- [Scan Modes](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/store/useScannerStore.js): `src/store/useScannerStore.js`
- [Hardware Scanner](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/hooks/useHardwareScanner.js): `src/hooks/useHardwareScanner.js`

### Inventory Operations

- [Product Catalog](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/pages/Inventory/MasterBarang.jsx): `src/pages/Inventory/MasterBarang.jsx`
- [Stock Inbound](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/pages/Inventory/Inbound.jsx): `src/pages/Inventory/Inbound.jsx`
- [Inbound Approval](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/pages/Inventory/ApprovalInbound.jsx): `src/pages/Inventory/ApprovalInbound.jsx`
- [Supplier Records](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/pages/Inventory/SupplierMaster.jsx): `src/pages/Inventory/SupplierMaster.jsx`

### Business Reporting

- [Profit Dashboard](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/pages/Dashboard/DashboardPage.jsx): `src/pages/Dashboard/DashboardPage.jsx`
- [Cash Bookkeeping](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/pages/Pembukuan/PembukuanPage.jsx): `src/pages/Pembukuan/PembukuanPage.jsx`

### Offline & Cloud

- [Local IndexedDB](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/db/db.js): `src/db/db.js`
- [Cloud Sync](https://github.com/ahmadhakimitsnaini/kelontong-hub/blob/main/src/lib/syncService.js): `src/lib/syncService.js`

### Other components

- **Shop Staff**
- **Supabase**

## Connections

- Shop Staff → Route Guard: uses (evidence: `src/App.jsx`)
- Route Guard → Login & Roles: guards access (evidence: `src/App.jsx`)
- Route Guard → App Shell: renders routes (evidence: `src/App.jsx`)
- Route Guard → POS Checkout: routes to (evidence: `src/App.jsx`)
- Route Guard → Shift Handover: routes to (evidence: `src/App.jsx`)
- Route Guard → Product Catalog: routes to (evidence: `src/App.jsx`)
- Route Guard → Stock Inbound: routes to (evidence: `src/App.jsx`)
- Route Guard → Inbound Approval: routes to (evidence: `src/App.jsx`)
- Route Guard → Supplier Records: routes to (evidence: `src/App.jsx`)
- Route Guard → Profit Dashboard: routes to (evidence: `src/App.jsx`)
- Route Guard → Cash Bookkeeping: routes to (evidence: `src/App.jsx`)
- POS Checkout → Cart State: uses (evidence: `src/pages/POS/POSPage.jsx`)
- POS Checkout → Payment: opens (evidence: `src/pages/POS/POSPage.jsx`)
- POS Checkout → Receipt: renders (evidence: `src/pages/POS/POSPage.jsx`)
- POS Checkout → Local IndexedDB: records sales (evidence: `src/pages/POS/POSPage.jsx`)
- Camera Scanner → Scan Modes: uses (evidence: `src/components/scanner/CameraEngine.jsx`)
- Camera Scanner → Cart State: adds scans (evidence: `src/components/scanner/CameraEngine.jsx`)
- Hardware Scanner → POS Checkout: captures input (evidence: `src/pages/POS/POSPage.jsx`)
- Product Catalog → Local IndexedDB: reads and writes (evidence: `src/pages/Inventory/MasterBarang.jsx`)
- Stock Inbound → Local IndexedDB: records stock (evidence: `src/pages/Inventory/Inbound.jsx`)
- Inbound Approval → Local IndexedDB: updates records (evidence: `src/pages/Inventory/ApprovalInbound.jsx`)
- Supplier Records → Local IndexedDB: manages records (evidence: `src/pages/Inventory/SupplierMaster.jsx`)
- Profit Dashboard → Local IndexedDB: reads figures (evidence: `src/pages/Dashboard/DashboardPage.jsx`)
- Cash Bookkeeping → Local IndexedDB: reads entries (evidence: `src/pages/Pembukuan/PembukuanPage.jsx`)
- Login & Roles → Supabase: authenticates (evidence: `src/store/useAuthStore.js`)
- Login & Roles → Cloud Sync: starts sync (evidence: `src/store/useAuthStore.js`)
- Login & Roles → Local IndexedDB: clears local data (evidence: `src/store/useAuthStore.js`)
- App Shell → Cloud Sync: starts background sync (evidence: `src/components/layout/AppLayout.jsx`)
- Cloud Sync → Local IndexedDB: reads and writes (evidence: `src/lib/syncService.js`)
- Cloud Sync → Supabase: syncs records (evidence: `src/lib/syncService.js`)