# jdmrtne/bonbean architecture

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

- Interactive diagram: https://gitdiagram.com/jdmrtne/bonbean
- Repository: https://github.com/jdmrtne/bonbean

## Overview

Coffee Cart POS is an offline-first, mobile sales-recording app for a coffee-cart owner. Its principal workflow is to select products, review the cart, choose payment details, and save a sale; separate screens support sales history, reporting, catalog and payment configuration, register sessions, and backup/restore. The architecture separates route-level screens and UI components from business services and IndexedDB. The source index and excerpts establish the main storage and reporting links; some unsampled screen interactions are therefore omitted or marked unverified.

Main entry points: [`src/pages/PosPage.tsx`](https://github.com/jdmrtne/bonbean/blob/main/src/pages/PosPage.tsx) (Point of sale), [`src/App.tsx`](https://github.com/jdmrtne/bonbean/blob/main/src/App.tsx) (App routes), [`src/database/db.ts`](https://github.com/jdmrtne/bonbean/blob/main/src/database/db.ts) (IndexedDB), [`src/pages/ReportsPage.tsx`](https://github.com/jdmrtne/bonbean/blob/main/src/pages/ReportsPage.tsx) (Sales reports)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and POS"]
  node_app["App routes<br/>[App.tsx]"]
  node_pos["Point of sale<br/>[PosPage.tsx]"]
  node_cart["Cart and checkout<br/>[CartPanel.tsx]"]
  node_checkout["Checkout details<br/>[CheckoutModal.tsx]"]
end

subgraph group_operations["Sales Operations"]
  node_history["Sales history<br/>[HistoryPage.tsx]"]
  node_reports["Sales reports<br/>[ReportsPage.tsx]"]
  node_sales["Sale records<br/>[salesService.ts]"]
  node_reportstats["Report calculations<br/>[reportStats.ts]"]
  node_export["Sales export<br/>[salesExport.ts]"]
  node_register["Register sessions<br/>[registerService.ts]"]
  node_registerclose["Register closeout"]
end

subgraph group_management["Catalog and Settings"]
  node_products["Product management"]
  node_categories["Category management"]
  node_payments["Payment methods"]
  node_settings["Business settings<br/>[settingsService.ts]"]
  node_backupui["Backup manager<br/>[BackupManager.tsx]"]
  node_backup["Backup service<br/>[backupService.ts]"]
end

subgraph group_platform["Local Data and Offline"]
  node_db[("IndexedDB<br/>[db.ts]")]
  node_cartstate["Cart state<br/>[useCart.ts]"]
  node_workerreg["Worker registration"]
  node_worker["Service worker<br/>[sw.js]"]
end

node_owner(("Cart owner"))

node_owner -->|"opens"| node_app
node_app -->|"routes to"| node_pos
node_app -->|"routes to"| node_history
node_app -->|"routes to"| node_reports
node_pos -->|"renders"| node_cart
node_pos -->|"renders"| node_checkout
node_pos -->|"uses catalog"| node_products
node_pos -->|"loads categories"| node_categories
node_pos -->|"loads methods"| node_payments
node_pos -->|"checks register"| node_register
node_pos -->|"loads settings"| node_settings
node_pos -.->|"saves sale"| node_sales
node_pos -.->|"maintains cart"| node_cartstate
node_reports -->|"loads sales"| node_sales
node_reports -->|"calculates totals"| node_reportstats
node_reports -->|"exports report"| node_export
node_products -->|"loads categories"| node_categories
node_products -->|"updates products"| node_db
node_categories -->|"stores categories"| node_db
node_payments -->|"stores methods"| node_db
node_sales -->|"writes and reads"| node_db
node_register -->|"stores sessions"| node_db
node_registerclose -.->|"closes shift"| node_register
node_backupui -->|"imports and exports"| node_backup
node_backup -->|"reads and restores"| node_db
node_app -->|"waits for readiness"| node_db
node_app -->|"registers offline support"| node_workerreg
node_workerreg -->|"registers script"| node_worker

click node_app "https://github.com/jdmrtne/bonbean/blob/main/src/App.tsx"
click node_pos "https://github.com/jdmrtne/bonbean/blob/main/src/pages/PosPage.tsx"
click node_cart "https://github.com/jdmrtne/bonbean/blob/main/src/components/CartPanel.tsx"
click node_checkout "https://github.com/jdmrtne/bonbean/blob/main/src/components/CheckoutModal.tsx"
click node_history "https://github.com/jdmrtne/bonbean/blob/main/src/pages/HistoryPage.tsx"
click node_reports "https://github.com/jdmrtne/bonbean/blob/main/src/pages/ReportsPage.tsx"
click node_sales "https://github.com/jdmrtne/bonbean/blob/main/src/services/salesService.ts"
click node_reportstats "https://github.com/jdmrtne/bonbean/blob/main/src/utils/reportStats.ts"
click node_export "https://github.com/jdmrtne/bonbean/blob/main/src/utils/salesExport.ts"
click node_register "https://github.com/jdmrtne/bonbean/blob/main/src/services/registerService.ts"
click node_registerclose "https://github.com/jdmrtne/bonbean/blob/main/src/components/CloseRegisterModal.tsx"
click node_products "https://github.com/jdmrtne/bonbean/blob/main/src/components/ProductsManager.tsx"
click node_categories "https://github.com/jdmrtne/bonbean/blob/main/src/components/CategoriesManager.tsx"
click node_payments "https://github.com/jdmrtne/bonbean/blob/main/src/components/PaymentMethodsManager.tsx"
click node_settings "https://github.com/jdmrtne/bonbean/blob/main/src/services/settingsService.ts"
click node_backupui "https://github.com/jdmrtne/bonbean/blob/main/src/components/BackupManager.tsx"
click node_backup "https://github.com/jdmrtne/bonbean/blob/main/src/services/backupService.ts"
click node_db "https://github.com/jdmrtne/bonbean/blob/main/src/database/db.ts"
click node_cartstate "https://github.com/jdmrtne/bonbean/blob/main/src/hooks/useCart.ts"
click node_workerreg "https://github.com/jdmrtne/bonbean/blob/main/src/pwa/registerServiceWorker.ts"
click node_worker "https://github.com/jdmrtne/bonbean/blob/main/public/sw.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_pos,node_cart,node_checkout toneBlue
class node_history,node_reports,node_sales,node_reportstats,node_export,node_register,node_registerclose toneAmber
class node_products,node_categories,node_payments,node_settings,node_backupui,node_backup toneMint
class node_db,node_cartstate,node_workerreg,node_worker toneRose
class node_owner toneIndigo
```

## Components

### App and POS

- [App routes](https://github.com/jdmrtne/bonbean/blob/main/src/App.tsx): `src/App.tsx`
- [Point of sale](https://github.com/jdmrtne/bonbean/blob/main/src/pages/PosPage.tsx): `src/pages/PosPage.tsx`
- [Cart and checkout](https://github.com/jdmrtne/bonbean/blob/main/src/components/CartPanel.tsx): `src/components/CartPanel.tsx`
- [Checkout details](https://github.com/jdmrtne/bonbean/blob/main/src/components/CheckoutModal.tsx): `src/components/CheckoutModal.tsx`

### Sales Operations

- [Sales history](https://github.com/jdmrtne/bonbean/blob/main/src/pages/HistoryPage.tsx): `src/pages/HistoryPage.tsx`
- [Sales reports](https://github.com/jdmrtne/bonbean/blob/main/src/pages/ReportsPage.tsx): `src/pages/ReportsPage.tsx`
- [Sale records](https://github.com/jdmrtne/bonbean/blob/main/src/services/salesService.ts): `src/services/salesService.ts`
- [Report calculations](https://github.com/jdmrtne/bonbean/blob/main/src/utils/reportStats.ts): `src/utils/reportStats.ts`
- [Sales export](https://github.com/jdmrtne/bonbean/blob/main/src/utils/salesExport.ts): `src/utils/salesExport.ts`
- [Register sessions](https://github.com/jdmrtne/bonbean/blob/main/src/services/registerService.ts): `src/services/registerService.ts`
- [Register closeout](https://github.com/jdmrtne/bonbean/blob/main/src/components/CloseRegisterModal.tsx): `src/components/CloseRegisterModal.tsx`

### Catalog and Settings

- [Product management](https://github.com/jdmrtne/bonbean/blob/main/src/components/ProductsManager.tsx): `src/components/ProductsManager.tsx`
- [Category management](https://github.com/jdmrtne/bonbean/blob/main/src/components/CategoriesManager.tsx): `src/components/CategoriesManager.tsx`
- [Payment methods](https://github.com/jdmrtne/bonbean/blob/main/src/components/PaymentMethodsManager.tsx): `src/components/PaymentMethodsManager.tsx`
- [Business settings](https://github.com/jdmrtne/bonbean/blob/main/src/services/settingsService.ts): `src/services/settingsService.ts`
- [Backup manager](https://github.com/jdmrtne/bonbean/blob/main/src/components/BackupManager.tsx): `src/components/BackupManager.tsx`
- [Backup service](https://github.com/jdmrtne/bonbean/blob/main/src/services/backupService.ts): `src/services/backupService.ts`

### Local Data and Offline

- [IndexedDB](https://github.com/jdmrtne/bonbean/blob/main/src/database/db.ts): `src/database/db.ts`
- [Cart state](https://github.com/jdmrtne/bonbean/blob/main/src/hooks/useCart.ts): `src/hooks/useCart.ts`
- [Worker registration](https://github.com/jdmrtne/bonbean/blob/main/src/pwa/registerServiceWorker.ts): `src/pwa/registerServiceWorker.ts`
- [Service worker](https://github.com/jdmrtne/bonbean/blob/main/public/sw.js): `public/sw.js`

### Other components

- **Cart owner**

## Connections

- Cart owner → App routes: opens (evidence: `README.md`)
- App routes → Point of sale: routes to (evidence: `src/App.tsx`)
- App routes → Sales history: routes to (evidence: `src/App.tsx`)
- App routes → Sales reports: routes to (evidence: `src/App.tsx`)
- Point of sale → Cart and checkout: renders (evidence: `src/pages/PosPage.tsx`)
- Point of sale → Checkout details: renders (evidence: `src/pages/PosPage.tsx`)
- Point of sale → Product management: uses catalog (evidence: `src/pages/PosPage.tsx`)
- Point of sale → Category management: loads categories (evidence: `src/pages/PosPage.tsx`)
- Point of sale → Payment methods: loads methods (evidence: `src/pages/PosPage.tsx`)
- Point of sale → Register sessions: checks register (evidence: `src/pages/PosPage.tsx`)
- Point of sale → Business settings: loads settings (evidence: `src/pages/PosPage.tsx`)
- Point of sale → Sale records: saves sale
- Point of sale → Cart state: maintains cart (evidence: `src/pages/PosPage.tsx`)
- Sales reports → Sale records: loads sales (evidence: `src/pages/ReportsPage.tsx`)
- Sales reports → Report calculations: calculates totals (evidence: `src/pages/ReportsPage.tsx`)
- Sales reports → Sales export: exports report (evidence: `src/pages/ReportsPage.tsx`)
- Product management → Category management: loads categories (evidence: `src/components/ProductsManager.tsx`)
- Product management → IndexedDB: updates products
- Category management → IndexedDB: stores categories
- Payment methods → IndexedDB: stores methods
- Sale records → IndexedDB: writes and reads (evidence: `src/services/salesService.ts`)
- Register sessions → IndexedDB: stores sessions (evidence: `src/services/registerService.ts`)
- Register closeout → Register sessions: closes shift
- Backup manager → Backup service: imports and exports (evidence: `src/components/BackupManager.tsx`)
- Backup service → IndexedDB: reads and restores (evidence: `src/services/backupService.ts`)
- App routes → IndexedDB: waits for readiness (evidence: `src/App.tsx`)
- App routes → Worker registration: registers offline support (evidence: `src/main.tsx`)
- Worker registration → Service worker: registers script (evidence: `src/pwa/registerServiceWorker.ts`)