# sktraders399-cmyk/sk-traders architecture

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

- Interactive diagram: https://gitdiagram.com/sktraders399-cmyk/sk-traders
- Repository: https://github.com/sktraders399-cmyk/sk-traders

## Overview

Steel Trading ERP is a browser-based, multi-business financial management app for steel traders. Users configure suppliers and items, enter purchase invoices and payments, then review source-derived allocations, balances, discounts, and reports; the README describes FIFO allocation and advance handling as automatic. The app also covers sales, cash/bank operations, expenses, inventory, and MT bookings. Edges reflect the App dispatch and imports shown in excerpts or documented workflows; unsampled feature links are omitted where their runtime wiring is not established.

Main entry points: [`src/lib/calculations.ts`](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/lib/calculations.ts) (Allocation Engine), [`src/App.tsx`](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/App.tsx) (App And Navigation), [`src/components/invoices-page.tsx`](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/invoices-page.tsx) (Purchase Invoices), [`src/components/discount-wallet-page.tsx`](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/discount-wallet-page.tsx) (Discount Wallet)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application Shell"]
  node_app["App And Navigation<br/>[App.tsx]"]
  node_ui["Shared UI Components"]
  node_storage[("Browser Persistence<br/>[storage-utils.ts]")]
end

subgraph group_purchases["Trading Operations"]
  node_supplier["Supplier Records<br/>[suppliers-page.tsx]"]
  node_items["Item Records<br/>[items-page.tsx]"]
  node_purchase["Purchase Invoices<br/>[invoices-page.tsx]"]
  node_invoice_detail["Invoice Details"]
  node_bookings["MT Bookings<br/>[MTBookingsPage.tsx]"]
  node_customers["Customer Records<br/>[customers-page.tsx]"]
  node_sales["Sales Invoices"]
end

subgraph group_finance["Finance And Discounts"]
  node_payments["Supplier Payments<br/>[payments-page.tsx]"]
  node_discounts["Discount Wallet"]
  node_annual["Annual Discounts"]
  node_schemes["Fixed Schemes"]
  node_cash["Cash And Bank"]
  node_expense["Expense Entries"]
  node_calc["Allocation Engine<br/>[calculations.ts]"]
  node_data_types["Transaction Models<br/>[types.ts]"]
end

subgraph group_insights["Reports And Exports"]
  node_dashboard["Financial Dashboard"]
  node_ledger["Supplier And Customer Ledgers"]
  node_reports["Trading Reports"]
  node_cash_report["Cash Bank Book"]
  node_report_calc["Report Calculations"]
  node_export["PDF And Excel Export<br/>[pdf-export.ts]"]
end

node_trader(("Business User"))

node_trader -->|"uses"| node_app
node_app -->|"dispatches to"| node_supplier
node_app -->|"dispatches to"| node_items
node_app -->|"dispatches to"| node_purchase
node_app -->|"dispatches to"| node_cash
node_app -->|"dispatches to"| node_cash_report
node_app -->|"loads and saves"| node_storage
node_purchase -->|"formats amounts"| node_calc
node_purchase -.->|"uses supplier data"| node_supplier
node_purchase -.->|"uses item data"| node_items
node_invoice_detail -->|"calculates costs"| node_calc
node_bookings -.->|"calculates consumption"| node_calc
node_payments -.->|"allocates payments"| node_calc
node_calc -.->|"derives expected discounts"| node_discounts
node_calc -->|"uses transaction models"| node_data_types
node_purchase -->|"precedes FIFO allocation"| node_payments
node_payments -->|"FIFO allocates to invoices"| node_calc
node_calc -->|"feeds discount tracking"| node_discounts
node_annual -.->|"tracks rebate category"| node_discounts
node_dashboard -.->|"derives report figures"| node_report_calc
node_ledger -.->|"derives ledger figures"| node_report_calc
node_reports -.->|"derives report figures"| node_report_calc
node_cash_report -.->|"reports cash activity"| node_cash
node_discounts -->|"exports PDF"| node_export
node_report_calc -->|"uses source calculations"| node_calc
node_app -.->|"renders shared controls"| node_ui

click node_app "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/App.tsx"
click node_supplier "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/suppliers-page.tsx"
click node_items "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/items-page.tsx"
click node_purchase "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/invoices-page.tsx"
click node_invoice_detail "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/purchase-invoice-details-page.tsx"
click node_bookings "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/pages/MTBookingsPage.tsx"
click node_customers "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/customers-page.tsx"
click node_sales "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/sales-invoices-page.tsx"
click node_payments "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/payments-page.tsx"
click node_discounts "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/discount-wallet-page.tsx"
click node_annual "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/annual-discount-page.tsx"
click node_schemes "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/fixed-schemes-page.tsx"
click node_cash "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/pages/CashBankVoucherEntryWrapper.tsx"
click node_expense "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/expense-entries-page.tsx"
click node_calc "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/lib/calculations.ts"
click node_data_types "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/lib/types.ts"
click node_dashboard "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/master-dashboard-page.tsx"
click node_ledger "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/supplier-ledger-page.tsx"
click node_reports "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/item-reports-page.tsx"
click node_cash_report "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/pages/CashBankBookReportWrapper.tsx"
click node_report_calc "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/lib/report-calculations.ts"
click node_export "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/lib/pdf-export.ts"
click node_ui "https://github.com/sktraders399-cmyk/sk-traders/tree/main/src/components/ui"
click node_storage "https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/lib/storage-utils.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_ui,node_storage,node_trader toneBlue
class node_supplier,node_items,node_purchase,node_invoice_detail,node_bookings,node_customers,node_sales toneAmber
class node_payments,node_discounts,node_annual,node_schemes,node_cash,node_expense,node_calc,node_data_types toneMint
class node_dashboard,node_ledger,node_reports,node_cash_report,node_report_calc,node_export toneRose
```

## Components

### Application Shell

- [App And Navigation](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/App.tsx): `src/App.tsx`
- [Shared UI Components](https://github.com/sktraders399-cmyk/sk-traders/tree/main/src/components/ui): `src/components/ui`
- [Browser Persistence](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/lib/storage-utils.ts): `src/lib/storage-utils.ts`

### Trading Operations

- [Supplier Records](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/suppliers-page.tsx): `src/components/suppliers-page.tsx`
- [Item Records](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/items-page.tsx): `src/components/items-page.tsx`
- [Purchase Invoices](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/invoices-page.tsx): `src/components/invoices-page.tsx`
- [Invoice Details](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/purchase-invoice-details-page.tsx): `src/components/purchase-invoice-details-page.tsx`
- [MT Bookings](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/pages/MTBookingsPage.tsx): `src/components/pages/MTBookingsPage.tsx`
- [Customer Records](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/customers-page.tsx): `src/components/customers-page.tsx`
- [Sales Invoices](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/sales-invoices-page.tsx): `src/components/sales-invoices-page.tsx`

### Finance And Discounts

- [Supplier Payments](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/payments-page.tsx): `src/components/payments-page.tsx`
- [Discount Wallet](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/discount-wallet-page.tsx): `src/components/discount-wallet-page.tsx`
- [Annual Discounts](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/annual-discount-page.tsx): `src/components/annual-discount-page.tsx`
- [Fixed Schemes](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/fixed-schemes-page.tsx): `src/components/fixed-schemes-page.tsx`
- [Cash And Bank](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/pages/CashBankVoucherEntryWrapper.tsx): `src/components/pages/CashBankVoucherEntryWrapper.tsx`
- [Expense Entries](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/expense-entries-page.tsx): `src/components/expense-entries-page.tsx`
- [Allocation Engine](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/lib/calculations.ts): `src/lib/calculations.ts`
- [Transaction Models](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/lib/types.ts): `src/lib/types.ts`

### Reports And Exports

- [Financial Dashboard](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/master-dashboard-page.tsx): `src/components/master-dashboard-page.tsx`
- [Supplier And Customer Ledgers](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/supplier-ledger-page.tsx): `src/components/supplier-ledger-page.tsx`
- [Trading Reports](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/item-reports-page.tsx): `src/components/item-reports-page.tsx`
- [Cash Bank Book](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/components/pages/CashBankBookReportWrapper.tsx): `src/components/pages/CashBankBookReportWrapper.tsx`
- [Report Calculations](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/lib/report-calculations.ts): `src/lib/report-calculations.ts`
- [PDF And Excel Export](https://github.com/sktraders399-cmyk/sk-traders/blob/main/src/lib/pdf-export.ts): `src/lib/pdf-export.ts`

### Other components

- **Business User**

## Connections

- Business User → App And Navigation: uses
- App And Navigation → Supplier Records: dispatches to (evidence: `src/App.tsx`)
- App And Navigation → Item Records: dispatches to (evidence: `src/App.tsx`)
- App And Navigation → Purchase Invoices: dispatches to (evidence: `src/App.tsx`)
- App And Navigation → Cash And Bank: dispatches to (evidence: `src/App.tsx`)
- App And Navigation → Cash Bank Book: dispatches to (evidence: `src/App.tsx`)
- App And Navigation → Browser Persistence: loads and saves (evidence: `src/App.tsx`)
- Purchase Invoices → Allocation Engine: formats amounts (evidence: `src/components/invoices-page.tsx`)
- Purchase Invoices → Supplier Records: uses supplier data
- Purchase Invoices → Item Records: uses item data
- Invoice Details → Allocation Engine: calculates costs (evidence: `src/components/purchase-invoice-details-page.tsx`)
- MT Bookings → Allocation Engine: calculates consumption
- Supplier Payments → Allocation Engine: allocates payments
- Allocation Engine → Discount Wallet: derives expected discounts (evidence: `src/components/discount-wallet-page.tsx`)
- Allocation Engine → Transaction Models: uses transaction models (evidence: `src/lib/calculations.ts`)
- Purchase Invoices → Supplier Payments: precedes FIFO allocation (evidence: `README.md`)
- Supplier Payments → Allocation Engine: FIFO allocates to invoices (evidence: `README.md`)
- Allocation Engine → Discount Wallet: feeds discount tracking (evidence: `README.md`)
- Annual Discounts → Discount Wallet: tracks rebate category
- Financial Dashboard → Report Calculations: derives report figures
- Supplier And Customer Ledgers → Report Calculations: derives ledger figures
- Trading Reports → Report Calculations: derives report figures
- Cash Bank Book → Cash And Bank: reports cash activity
- Discount Wallet → PDF And Excel Export: exports PDF (evidence: `src/components/discount-wallet-page.tsx`)
- Report Calculations → Allocation Engine: uses source calculations (evidence: `src/lib/report-calculations.ts`)
- App And Navigation → Shared UI Components: renders shared controls (evidence: `src/App.tsx`)