# raaj-4320/stockflow-testing architecture

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

- Interactive diagram: https://gitdiagram.com/raaj-4320/stockflow-testing
- Repository: https://github.com/raaj-4320/stockflow-testing

## Overview

This is StockFlow, a browser-based retail inventory and business-management ERP. Staff authenticate, enter an admin or operator role, then use operational screens for sales, purchasing, customers, inventory, and finance; screens work with shared application state and supporting ledger, reporting, and integration services. The tree shows additional Telegram, WhatsApp, analytics, and export capabilities. The README is empty, and several major screens and storage modules were not excerpted, so those branches are represented without asserting undocumented call sequences.

Main entry points: [`services/storage.ts`](https://github.com/raaj-4320/stockflow-testing/blob/main/services/storage.ts) (Shared application state), [`App.tsx`](https://github.com/raaj-4320/stockflow-testing/blob/main/App.tsx) (App shell), [`components/auth/RoleLoginModal.tsx`](https://github.com/raaj-4320/stockflow-testing/blob/main/components/auth/RoleLoginModal.tsx) (Role login), [`src/auth/roleSession.tsx`](https://github.com/raaj-4320/stockflow-testing/blob/main/src/auth/roleSession.tsx) (Role session)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access and shell"]
  node_app["App shell<br/>[App.tsx]"]
  node_auth["Account authentication<br/>[auth.ts]"]
  node_rolelogin["Role login<br/>[RoleLoginModal.tsx]"]
  node_rolesession["Role session<br/>[roleSession.tsx]"]
  node_permissions["Permission rules"]
end

subgraph group_operations["Store operations"]
  node_catalog["Inventory admin<br/>[Admin.tsx]"]
  node_sales["Sales<br/>[Sales.tsx]"]
  node_purchasing["Purchasing<br/>[PurchasePanel.tsx]"]
  node_customers["Customer management<br/>[Customers.tsx]"]
  node_customer_view["Customer account view<br/>[CustomerView.tsx]"]
  node_transactions["Transactions<br/>[Transactions.tsx]"]
end

subgraph group_finance["Finance and records"]
  node_storage[("Shared application state<br/>[storage.ts]")]
  node_finance_page["Finance and cashbook<br/>[Finance.tsx]"]
  node_customer_balance["Customer balances"]
  node_reports["Reports and analytics<br/>[Reports.tsx]"]
  node_invoice["Invoice and PDF output<br/>[pdf.ts]"]
end

subgraph group_integrations["Messaging integrations"]
  node_telegram["Telegram publishing<br/>[telegram.ts]"]
  node_telegram_posts["Telegram posts<br/>[TelegramPosts.tsx]"]
  node_whatsapp["WhatsApp sharing<br/>[whatsappShare.ts]"]
  node_whatsapp_logs["WhatsApp logs<br/>[WhatsAppLogs.tsx]"]
end

node_staff(("Store staff"))

node_staff -->|"uses"| node_app
node_app -->|"loads session"| node_auth
node_app -->|"loads state"| node_storage
node_app -->|"calculates dues"| node_customer_balance
node_app -->|"presents login"| node_rolelogin
node_rolelogin -->|"reads operators"| node_storage
node_rolelogin -.->|"sets role"| node_rolesession
node_rolesession -->|"stores access"| node_permissions
node_rolesession -->|"loads profile"| node_storage
node_finance_page -->|"reads and writes"| node_storage
node_customer_balance -.->|"reads transactions"| node_storage
node_purchasing -.->|"uses shared state"| node_storage
node_catalog -.->|"uses shared state"| node_storage
node_sales -.->|"uses shared state"| node_storage
node_transactions -.->|"uses shared state"| node_storage
node_customers -.->|"uses shared state"| node_storage
node_invoice -->|"loads profile"| node_storage
node_telegram_posts -.->|"publishes via"| node_telegram
node_whatsapp_logs -.->|"tracks sharing"| node_whatsapp

click node_app "https://github.com/raaj-4320/stockflow-testing/blob/main/App.tsx"
click node_auth "https://github.com/raaj-4320/stockflow-testing/blob/main/services/auth.ts"
click node_rolelogin "https://github.com/raaj-4320/stockflow-testing/blob/main/components/auth/RoleLoginModal.tsx"
click node_rolesession "https://github.com/raaj-4320/stockflow-testing/blob/main/src/auth/roleSession.tsx"
click node_permissions "https://github.com/raaj-4320/stockflow-testing/blob/main/src/auth/simplePermissions.ts"
click node_catalog "https://github.com/raaj-4320/stockflow-testing/blob/main/pages/Admin.tsx"
click node_sales "https://github.com/raaj-4320/stockflow-testing/blob/main/pages/Sales.tsx"
click node_purchasing "https://github.com/raaj-4320/stockflow-testing/blob/main/pages/PurchasePanel.tsx"
click node_customers "https://github.com/raaj-4320/stockflow-testing/blob/main/pages/Customers.tsx"
click node_customer_view "https://github.com/raaj-4320/stockflow-testing/blob/main/pages/CustomerView.tsx"
click node_transactions "https://github.com/raaj-4320/stockflow-testing/blob/main/pages/Transactions.tsx"
click node_storage "https://github.com/raaj-4320/stockflow-testing/blob/main/services/storage.ts"
click node_finance_page "https://github.com/raaj-4320/stockflow-testing/blob/main/pages/Finance.tsx"
click node_customer_balance "https://github.com/raaj-4320/stockflow-testing/blob/main/services/customerBalanceView.ts"
click node_reports "https://github.com/raaj-4320/stockflow-testing/blob/main/pages/Reports.tsx"
click node_invoice "https://github.com/raaj-4320/stockflow-testing/blob/main/services/pdf.ts"
click node_telegram "https://github.com/raaj-4320/stockflow-testing/blob/main/services/telegram.ts"
click node_telegram_posts "https://github.com/raaj-4320/stockflow-testing/blob/main/pages/TelegramPosts.tsx"
click node_whatsapp "https://github.com/raaj-4320/stockflow-testing/blob/main/services/whatsappShare.ts"
click node_whatsapp_logs "https://github.com/raaj-4320/stockflow-testing/blob/main/pages/WhatsAppLogs.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_app,node_auth,node_rolelogin,node_rolesession,node_permissions toneBlue
class node_catalog,node_sales,node_purchasing,node_customers,node_customer_view,node_transactions toneAmber
class node_storage,node_finance_page,node_customer_balance,node_reports,node_invoice toneMint
class node_telegram,node_telegram_posts,node_whatsapp,node_whatsapp_logs toneRose
class node_staff toneIndigo
```

## Components

### Access and shell

- [App shell](https://github.com/raaj-4320/stockflow-testing/blob/main/App.tsx): `App.tsx`
- [Account authentication](https://github.com/raaj-4320/stockflow-testing/blob/main/services/auth.ts): `services/auth.ts`
- [Role login](https://github.com/raaj-4320/stockflow-testing/blob/main/components/auth/RoleLoginModal.tsx): `components/auth/RoleLoginModal.tsx`
- [Role session](https://github.com/raaj-4320/stockflow-testing/blob/main/src/auth/roleSession.tsx): `src/auth/roleSession.tsx`
- [Permission rules](https://github.com/raaj-4320/stockflow-testing/blob/main/src/auth/simplePermissions.ts): `src/auth/simplePermissions.ts`

### Store operations

- [Inventory admin](https://github.com/raaj-4320/stockflow-testing/blob/main/pages/Admin.tsx): `pages/Admin.tsx`
- [Sales](https://github.com/raaj-4320/stockflow-testing/blob/main/pages/Sales.tsx): `pages/Sales.tsx`
- [Purchasing](https://github.com/raaj-4320/stockflow-testing/blob/main/pages/PurchasePanel.tsx): `pages/PurchasePanel.tsx`
- [Customer management](https://github.com/raaj-4320/stockflow-testing/blob/main/pages/Customers.tsx): `pages/Customers.tsx`
- [Customer account view](https://github.com/raaj-4320/stockflow-testing/blob/main/pages/CustomerView.tsx): `pages/CustomerView.tsx`
- [Transactions](https://github.com/raaj-4320/stockflow-testing/blob/main/pages/Transactions.tsx): `pages/Transactions.tsx`

### Finance and records

- [Shared application state](https://github.com/raaj-4320/stockflow-testing/blob/main/services/storage.ts): `services/storage.ts`
- [Finance and cashbook](https://github.com/raaj-4320/stockflow-testing/blob/main/pages/Finance.tsx): `pages/Finance.tsx`
- [Customer balances](https://github.com/raaj-4320/stockflow-testing/blob/main/services/customerBalanceView.ts): `services/customerBalanceView.ts`
- [Reports and analytics](https://github.com/raaj-4320/stockflow-testing/blob/main/pages/Reports.tsx): `pages/Reports.tsx`
- [Invoice and PDF output](https://github.com/raaj-4320/stockflow-testing/blob/main/services/pdf.ts): `services/pdf.ts`

### Messaging integrations

- [Telegram publishing](https://github.com/raaj-4320/stockflow-testing/blob/main/services/telegram.ts): `services/telegram.ts`
- [Telegram posts](https://github.com/raaj-4320/stockflow-testing/blob/main/pages/TelegramPosts.tsx): `pages/TelegramPosts.tsx`
- [WhatsApp sharing](https://github.com/raaj-4320/stockflow-testing/blob/main/services/whatsappShare.ts): `services/whatsappShare.ts`
- [WhatsApp logs](https://github.com/raaj-4320/stockflow-testing/blob/main/pages/WhatsAppLogs.tsx): `pages/WhatsAppLogs.tsx`

### Other components

- **Store staff**

## Connections

- Store staff → App shell: uses (evidence: `App.tsx`)
- App shell → Account authentication: loads session (evidence: `App.tsx`)
- App shell → Shared application state: loads state (evidence: `App.tsx`)
- App shell → Customer balances: calculates dues (evidence: `App.tsx`)
- App shell → Role login: presents login (evidence: `App.tsx`)
- Role login → Shared application state: reads operators (evidence: `components/auth/RoleLoginModal.tsx`)
- Role login → Role session: sets role
- Role session → Permission rules: stores access (evidence: `src/auth/roleSession.tsx`)
- Role session → Shared application state: loads profile (evidence: `src/auth/roleSession.tsx`)
- Finance and cashbook → Shared application state: reads and writes (evidence: `pages/Finance.tsx`)
- Customer balances → Shared application state: reads transactions
- Purchasing → Shared application state: uses shared state (evidence: `pages/PurchasePanel.tsx`)
- Inventory admin → Shared application state: uses shared state (evidence: `pages/Admin.tsx`)
- Sales → Shared application state: uses shared state
- Transactions → Shared application state: uses shared state
- Customer management → Shared application state: uses shared state
- Invoice and PDF output → Shared application state: loads profile (evidence: `services/pdf.ts`)
- Telegram posts → Telegram publishing: publishes via
- WhatsApp logs → WhatsApp sharing: tracks sharing