How ahmadhakimitsnaini/kelontong-hub works
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: App.jsx Route Guard · db.js Local IndexedDB · POSPage.jsx POS Checkout · useAuthStore.js Login & Roles
Components 21
Access & Shell
- Route Guard
src/App.jsx - Login & Roles
src/store/useAuthStore.js - App Shell
src/components/layout/AppLayout.jsx - Shift Handover
src/pages/Auth/ShiftPage.jsx
Checkout & Scanning
- POS Checkout
src/pages/POS/POSPage.jsx - Cart State
src/store/useCartStore.js - Payment
src/pages/POS/PaymentModal.jsx - Receipt
src/components/ui/ReceiptModal.jsx - Camera Scanner
src/components/scanner/CameraEngine.jsx - Scan Modes
src/store/useScannerStore.js - Hardware Scanner
src/hooks/useHardwareScanner.js
Inventory Operations
- Product Catalog
src/pages/Inventory/MasterBarang.jsx - Stock Inbound
src/pages/Inventory/Inbound.jsx - Inbound Approval
src/pages/Inventory/ApprovalInbound.jsx - Supplier Records
src/pages/Inventory/SupplierMaster.jsx
Business Reporting
- Profit Dashboard
src/pages/Dashboard/DashboardPage.jsx - Cash Bookkeeping
src/pages/Pembukuan/PembukuanPage.jsx
Offline & Cloud
- Local IndexedDB
src/db/db.js - Cloud Sync
src/lib/syncService.js
Other components
- Shop Staff
- Supabase
Connections 30
- Shop Staff → Route Guard: uses
src/App.jsx - Route Guard → Login & Roles: guards access
src/App.jsx - Route Guard → App Shell: renders routes
src/App.jsx - Route Guard → POS Checkout: routes to
src/App.jsx - Route Guard → Shift Handover: routes to
src/App.jsx - Route Guard → Product Catalog: routes to
src/App.jsx - Route Guard → Stock Inbound: routes to
src/App.jsx - Route Guard → Inbound Approval: routes to
src/App.jsx - Route Guard → Supplier Records: routes to
src/App.jsx - Route Guard → Profit Dashboard: routes to
src/App.jsx - Route Guard → Cash Bookkeeping: routes to
src/App.jsx - POS Checkout → Cart State: uses
src/pages/POS/POSPage.jsx - POS Checkout → Payment: opens
src/pages/POS/POSPage.jsx - POS Checkout → Receipt: renders
src/pages/POS/POSPage.jsx - POS Checkout → Local IndexedDB: records sales
src/pages/POS/POSPage.jsx - Camera Scanner → Scan Modes: uses
src/components/scanner/CameraEngine.jsx - Camera Scanner → Cart State: adds scans
src/components/scanner/CameraEngine.jsx - Hardware Scanner → POS Checkout: captures input
src/pages/POS/POSPage.jsx - Product Catalog → Local IndexedDB: reads and writes
src/pages/Inventory/MasterBarang.jsx - Stock Inbound → Local IndexedDB: records stock
src/pages/Inventory/Inbound.jsx - Inbound Approval → Local IndexedDB: updates records
src/pages/Inventory/ApprovalInbound.jsx - Supplier Records → Local IndexedDB: manages records
src/pages/Inventory/SupplierMaster.jsx - Profit Dashboard → Local IndexedDB: reads figures
src/pages/Dashboard/DashboardPage.jsx - Cash Bookkeeping → Local IndexedDB: reads entries
src/pages/Pembukuan/PembukuanPage.jsx - Login & Roles → Supabase: authenticates
src/store/useAuthStore.js - Login & Roles → Cloud Sync: starts sync
src/store/useAuthStore.js - Login & Roles → Local IndexedDB: clears local data
src/store/useAuthStore.js - App Shell → Cloud Sync: starts background sync
src/components/layout/AppLayout.jsx - Cloud Sync → Local IndexedDB: reads and writes
src/lib/syncService.js - Cloud Sync → Supabase: syncs records
src/lib/syncService.js