# devalous17/sari-pos architecture

> Architecture diagram of the GitHub repository devalous17/sari-pos, 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/devalous17/sari-pos
- Repository: https://github.com/devalous17/sari-pos

## Overview

Sari-sari store POS is a client-side point-of-sale app. A store operator browses or scans products in Cashier, builds a cart, and checks out; App owns shared product and sales state and persists it locally. Inventory edits feed that shared product state, while Analytics presents sales and stock insights. The README documents receipt, payment, and camera capabilities; sampled excerpts do not expose their full implementation details, so those internal links are not expanded beyond documented module ownership.

Main entry points: [`src/app/App.tsx`](https://github.com/devalous17/sari-pos/blob/main/src/app/App.tsx) (App State & Navigation), [`src/app/components/Cashier.tsx`](https://github.com/devalous17/sari-pos/blob/main/src/app/components/Cashier.tsx) (Product Search & Cart), [`src/app/components/Storage.tsx`](https://github.com/devalous17/sari-pos/blob/main/src/app/components/Storage.tsx) (Inventory Management), [`src/main.tsx`](https://github.com/devalous17/sari-pos/blob/main/src/main.tsx) (React Entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["App Runtime"]
  node_entry["React Entry<br/>[main.tsx]"]
  node_app["App State &amp; Navigation<br/>[App.tsx]"]
end

subgraph group_sales["Sales Workflow"]
  node_cashier["Product Search &amp; Cart<br/>[Cashier.tsx]"]
  node_checkout["Payment &amp; Receipt<br/>[Cashier.tsx]"]
  node_scanner["QR / Barcode Scanner<br/>[Cashier.tsx]"]
  node_qr_lib["QR Scanner Library"]
end

subgraph group_operations["Store Operations"]
  node_inventory["Inventory Management<br/>[Storage.tsx]"]
  node_analytics["Sales &amp; Stock Analytics<br/>[Analytics.tsx]"]
  node_utang["Utang Tracking<br/>[Utang.tsx]"]
  node_about["About Information<br/>[About.tsx]"]
end

subgraph group_persistence["Local Persistence"]
  node_local_store[("Browser LocalStorage")]
end

node_operator(("Store Operator"))
node_camera(("Device Camera"))

node_entry -->|"renders"| node_app
node_operator -->|"selects module"| node_app
node_app -->|"renders with products"| node_cashier
node_app -->|"renders with products"| node_inventory
node_app -->|"renders sales data"| node_analytics
node_app -->|"renders"| node_utang
node_app -->|"renders"| node_about
node_operator -->|"uses"| node_cashier
node_cashier -->|"checks out"| node_checkout
node_cashier -->|"starts scan"| node_scanner
node_scanner -.->|"decodes codes"| node_qr_lib
node_scanner -.->|"captures image"| node_camera
node_cashier -->|"reports sale"| node_app
node_inventory -->|"updates products"| node_app
node_app -->|"reads and writes"| node_local_store

click node_entry "https://github.com/devalous17/sari-pos/blob/main/src/main.tsx"
click node_app "https://github.com/devalous17/sari-pos/blob/main/src/app/App.tsx"
click node_cashier "https://github.com/devalous17/sari-pos/blob/main/src/app/components/Cashier.tsx"
click node_checkout "https://github.com/devalous17/sari-pos/blob/main/src/app/components/Cashier.tsx"
click node_scanner "https://github.com/devalous17/sari-pos/blob/main/src/app/components/Cashier.tsx"
click node_inventory "https://github.com/devalous17/sari-pos/blob/main/src/app/components/Storage.tsx"
click node_analytics "https://github.com/devalous17/sari-pos/blob/main/src/app/components/Analytics.tsx"
click node_utang "https://github.com/devalous17/sari-pos/blob/main/src/app/components/Utang.tsx"
click node_about "https://github.com/devalous17/sari-pos/blob/main/src/app/components/About.tsx"

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_cashier,node_checkout,node_scanner,node_qr_lib toneAmber
class node_inventory,node_analytics,node_utang,node_about toneMint
class node_local_store toneRose
class node_operator,node_camera toneIndigo
```

## Components

### App Runtime

- [React Entry](https://github.com/devalous17/sari-pos/blob/main/src/main.tsx): `src/main.tsx`
- [App State & Navigation](https://github.com/devalous17/sari-pos/blob/main/src/app/App.tsx): `src/app/App.tsx`

### Sales Workflow

- [Product Search & Cart](https://github.com/devalous17/sari-pos/blob/main/src/app/components/Cashier.tsx): `src/app/components/Cashier.tsx`
- [Payment & Receipt](https://github.com/devalous17/sari-pos/blob/main/src/app/components/Cashier.tsx): `src/app/components/Cashier.tsx`
- [QR / Barcode Scanner](https://github.com/devalous17/sari-pos/blob/main/src/app/components/Cashier.tsx): `src/app/components/Cashier.tsx`
- **QR Scanner Library**

### Store Operations

- [Inventory Management](https://github.com/devalous17/sari-pos/blob/main/src/app/components/Storage.tsx): `src/app/components/Storage.tsx`
- [Sales & Stock Analytics](https://github.com/devalous17/sari-pos/blob/main/src/app/components/Analytics.tsx): `src/app/components/Analytics.tsx`
- [Utang Tracking](https://github.com/devalous17/sari-pos/blob/main/src/app/components/Utang.tsx): `src/app/components/Utang.tsx`
- [About Information](https://github.com/devalous17/sari-pos/blob/main/src/app/components/About.tsx): `src/app/components/About.tsx`

### Local Persistence

- **Browser LocalStorage**

### Other components

- **Store Operator**
- **Device Camera**

## Connections

- React Entry → App State & Navigation: renders
- Store Operator → App State & Navigation: selects module
- App State & Navigation → Product Search & Cart: renders with products
- App State & Navigation → Inventory Management: renders with products
- App State & Navigation → Sales & Stock Analytics: renders sales data
- App State & Navigation → Utang Tracking: renders
- App State & Navigation → About Information: renders
- Store Operator → Product Search & Cart: uses
- Product Search & Cart → Payment & Receipt: checks out
- Product Search & Cart → QR / Barcode Scanner: starts scan
- QR / Barcode Scanner → QR Scanner Library: decodes codes
- QR / Barcode Scanner → Device Camera: captures image
- Product Search & Cart → App State & Navigation: reports sale
- Inventory Management → App State & Navigation: updates products
- App State & Navigation → Browser LocalStorage: reads and writes