# trung0017/retail-pos-multi-store-inventory-management-system architecture

> Architecture diagram of the GitHub repository trung0017/retail-pos-multi-store-inventory-management-system, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/trung0017/retail-pos-multi-store-inventory-management-system
- Repository: https://github.com/trung0017/retail-pos-multi-store-inventory-management-system

## Overview

This is a React/Redux retail POS and multi-branch inventory application. Cashiers select a branch, scan/search products, build a cart, take cash/card/split payment, then record the order, deduct stock, update shift totals, and view/print a receipt. Separate workflows manage transfers and safety stock, order history/refunds and simulated sync, shift cash reconciliation, and analytics. The graph follows sampled app wiring and README capabilities; unsampled feature internals are represented by their exact component paths, and cloud synchronization is only simulated in the sampled UI.

Main entry points: [`src/App.tsx`](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/App.tsx) (App Router), [`src/store/index.ts`](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/store/index.ts) (Redux Store), [`src/store/slices/posSlice.ts`](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/store/slices/posSlice.ts) (Register State), [`src/components/pos/PaymentModal.tsx`](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/pos/PaymentModal.tsx) (Payment Checkout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application Shell"]
  node_app["App Router<br/>[App.tsx]"]
  node_navigation["Branch Navigation<br/>[HeaderNav.tsx]"]
end

subgraph group_checkout["POS Checkout"]
  node_scanner["Barcode Scanner"]
  node_catalog["Product Grid<br/>[ProductGrid.tsx]"]
  node_cart["Cart Panel<br/>[CartPanel.tsx]"]
  node_payment["Payment Checkout<br/>[PaymentModal.tsx]"]
  node_receipt["Thermal Receipt"]
end

subgraph group_operations["Store Operations"]
  node_inventory_ui["Inventory Manager"]
  node_orders_ui["Order History<br/>[OrderHistory.tsx]"]
  node_shift_ui["Shift Reconciliation<br/>[ZReportView.tsx]"]
  node_analytics["Business Analytics<br/>[AnalyticsView.tsx]"]
end

subgraph group_state["State and Data"]
  node_store["Redux Store<br/>[index.ts]"]
  node_pos_state["Register State<br/>[posSlice.ts]"]
  node_inventory_state["Inventory State<br/>[inventorySlice.ts]"]
  node_orders_state["Orders and Sync State<br/>[ordersSlice.ts]"]
  node_shift_state["Shift Ledger<br/>[shiftSlice.ts]"]
  node_local_storage[("Browser Persistence")]
  node_seed["Seed Catalog<br/>[seedData.ts]"]
  node_types["Retail Domain Types<br/>[index.ts]"]
end

node_cashier(("Cashier"))

node_cashier -->|"uses"| node_app
node_app -->|"renders"| node_navigation
node_app -->|"renders"| node_scanner
node_app -->|"renders"| node_catalog
node_app -->|"renders"| node_cart
node_app -->|"renders"| node_payment
node_app -->|"renders"| node_receipt
node_app -->|"routes to"| node_inventory_ui
node_app -->|"routes to"| node_orders_ui
node_app -->|"routes to"| node_shift_ui
node_app -->|"routes to"| node_analytics
node_navigation -->|"updates"| node_pos_state
node_navigation -->|"dispatches sync"| node_orders_state
node_scanner -->|"updates cart"| node_pos_state
node_catalog -->|"updates cart"| node_pos_state
node_cart -->|"reads and updates"| node_pos_state
node_payment -->|"records order"| node_orders_state
node_payment -->|"deducts stock"| node_inventory_state
node_payment -->|"records sale"| node_shift_state
node_payment -->|"clears and opens receipt"| node_pos_state
node_receipt -->|"reads receipt data"| node_pos_state
node_inventory_ui -->|"manages stock"| node_inventory_state
node_orders_ui -->|"reads and updates"| node_orders_state
node_orders_ui -->|"reads network status"| node_pos_state
node_shift_ui -->|"records drops and closes"| node_shift_state
node_analytics -->|"reads metrics"| node_store
node_store -->|"combines"| node_pos_state
node_store -->|"combines"| node_inventory_state
node_store -->|"combines"| node_orders_state
node_store -->|"combines"| node_shift_state
node_store -->|"loads and persists"| node_local_storage
node_seed -->|"initializes catalog"| node_inventory_state
node_seed -->|"initializes orders"| node_orders_state
node_types -->|"defines domain shapes"| node_store

click node_app "https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/App.tsx"
click node_navigation "https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/layout/HeaderNav.tsx"
click node_scanner "https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/pos/BarcodeScannerBar.tsx"
click node_catalog "https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/pos/ProductGrid.tsx"
click node_cart "https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/pos/CartPanel.tsx"
click node_payment "https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/pos/PaymentModal.tsx"
click node_receipt "https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/pos/ThermalReceiptModal.tsx"
click node_inventory_ui "https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/inventory/InventoryManager.tsx"
click node_orders_ui "https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/orders/OrderHistory.tsx"
click node_shift_ui "https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/shift/ZReportView.tsx"
click node_analytics "https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/analytics/AnalyticsView.tsx"
click node_store "https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/store/index.ts"
click node_pos_state "https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/store/slices/posSlice.ts"
click node_inventory_state "https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/store/slices/inventorySlice.ts"
click node_orders_state "https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/store/slices/ordersSlice.ts"
click node_shift_state "https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/store/slices/shiftSlice.ts"
click node_seed "https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/data/seedData.ts"
click node_types "https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/types/index.ts"

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_navigation toneBlue
class node_scanner,node_catalog,node_cart,node_payment,node_receipt toneAmber
class node_inventory_ui,node_orders_ui,node_shift_ui,node_analytics toneMint
class node_store,node_pos_state,node_inventory_state,node_orders_state,node_shift_state,node_local_storage,node_seed,node_types toneRose
class node_cashier toneIndigo
```

## Components

### Application Shell

- [App Router](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/App.tsx): `src/App.tsx`
- [Branch Navigation](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/layout/HeaderNav.tsx): `src/components/layout/HeaderNav.tsx`

### POS Checkout

- [Barcode Scanner](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/pos/BarcodeScannerBar.tsx): `src/components/pos/BarcodeScannerBar.tsx`
- [Product Grid](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/pos/ProductGrid.tsx): `src/components/pos/ProductGrid.tsx`
- [Cart Panel](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/pos/CartPanel.tsx): `src/components/pos/CartPanel.tsx`
- [Payment Checkout](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/pos/PaymentModal.tsx): `src/components/pos/PaymentModal.tsx`
- [Thermal Receipt](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/pos/ThermalReceiptModal.tsx): `src/components/pos/ThermalReceiptModal.tsx`

### Store Operations

- [Inventory Manager](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/inventory/InventoryManager.tsx): `src/components/inventory/InventoryManager.tsx`
- [Order History](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/orders/OrderHistory.tsx): `src/components/orders/OrderHistory.tsx`
- [Shift Reconciliation](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/shift/ZReportView.tsx): `src/components/shift/ZReportView.tsx`
- [Business Analytics](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/components/analytics/AnalyticsView.tsx): `src/components/analytics/AnalyticsView.tsx`

### State and Data

- [Redux Store](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/store/index.ts): `src/store/index.ts`
- [Register State](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/store/slices/posSlice.ts): `src/store/slices/posSlice.ts`
- [Inventory State](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/store/slices/inventorySlice.ts): `src/store/slices/inventorySlice.ts`
- [Orders and Sync State](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/store/slices/ordersSlice.ts): `src/store/slices/ordersSlice.ts`
- [Shift Ledger](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/store/slices/shiftSlice.ts): `src/store/slices/shiftSlice.ts`
- **Browser Persistence**
- [Seed Catalog](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/data/seedData.ts): `src/data/seedData.ts`
- [Retail Domain Types](https://github.com/trung0017/retail-pos-multi-store-inventory-management-system/blob/main/src/types/index.ts): `src/types/index.ts`

### Other components

- **Cashier**

## Connections

- Cashier → App Router: uses
- App Router → Branch Navigation: renders
- App Router → Barcode Scanner: renders
- App Router → Product Grid: renders
- App Router → Cart Panel: renders
- App Router → Payment Checkout: renders
- App Router → Thermal Receipt: renders
- App Router → Inventory Manager: routes to
- App Router → Order History: routes to
- App Router → Shift Reconciliation: routes to
- App Router → Business Analytics: routes to
- Branch Navigation → Register State: updates
- Branch Navigation → Orders and Sync State: dispatches sync
- Barcode Scanner → Register State: updates cart
- Product Grid → Register State: updates cart
- Cart Panel → Register State: reads and updates
- Payment Checkout → Orders and Sync State: records order
- Payment Checkout → Inventory State: deducts stock
- Payment Checkout → Shift Ledger: records sale
- Payment Checkout → Register State: clears and opens receipt
- Thermal Receipt → Register State: reads receipt data
- Inventory Manager → Inventory State: manages stock
- Order History → Orders and Sync State: reads and updates
- Order History → Register State: reads network status
- Shift Reconciliation → Shift Ledger: records drops and closes
- Business Analytics → Redux Store: reads metrics
- Redux Store → Register State: combines
- Redux Store → Inventory State: combines
- Redux Store → Orders and Sync State: combines
- Redux Store → Shift Ledger: combines
- Redux Store → Browser Persistence: loads and persists
- Seed Catalog → Inventory State: initializes catalog
- Seed Catalog → Orders and Sync State: initializes orders
- Retail Domain Types → Redux Store: defines domain shapes