# sribuenasautosolutions/d2w-ui architecture

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

- Interactive diagram: https://gitdiagram.com/sribuenasautosolutions/d2w-ui
- Repository: https://github.com/sribuenasautosolutions/d2w-ui

## Overview

This is a React-based smart-store sales and inventory application. Users sign in and enter role-gated owner, store, salesperson, procurement, or POS routes. The main workflows cover lead capture and procurement, product and stock management, sales/proformas, and POS checkout through invoicing. Shared API services mediate backend requests, while the POS cart provides shared frontend state. Route wiring and selected service calls are evidenced by the excerpts and source index; several listed product areas were not sampled, so their internal interactions are not asserted.

Main entry points: [`src/owner/routes/OwnerRoutes.jsx`](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/routes/OwnerRoutes.jsx) (Owner routes), [`src/routes/AppRoutesNew.jsx`](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/routes/AppRoutesNew.jsx) (Role routes), [`src/store/routes/StoreRoutes.jsx`](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/store/routes/StoreRoutes.jsx) (Store routes), [`src/store/routes/LeadStaffRoutes.jsx`](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/store/routes/LeadStaffRoutes.jsx) (Lead staff routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access and navigation"]
  node_app_routes["Role routes<br/>[AppRoutesNew.jsx]"]
  node_owner_routes["Owner routes<br/>[OwnerRoutes.jsx]"]
  node_store_routes["Store routes<br/>[StoreRoutes.jsx]"]
  node_lead_staff_routes["Lead staff routes"]
  node_protected["Role guard<br/>[ProtectedRoute.jsx]"]
  node_dashboard["Dashboard layout"]
end

subgraph group_leads["Lead management"]
  node_lead_list["Lead pipeline<br/>[LeadList.jsx]"]
  node_lead_create["Lead capture<br/>[LeadCreate.jsx]"]
  node_lead_details["Lead workspace<br/>[LeadDetails.jsx]"]
  node_whatsapp["WhatsApp chats<br/>[WhatsAppChats.jsx]"]
end

subgraph group_catalog["Store operations"]
  node_inventory["Inventory management"]
  node_products["Product catalog<br/>[ProductPage.jsx]"]
  node_purchases["Purchases<br/>[PurchasesPage.jsx]"]
  node_vehicles["Vehicle catalog"]
  node_reports["Store reports<br/>[ReportsPage.jsx]"]
end

subgraph group_sales["Sales and POS"]
  node_new_sale["Sales and proformas<br/>[NewSalePage.jsx]"]
  node_pos_routes["POS routes<br/>[POSRoutes.jsx]"]
  node_pos_page["POS register<br/>[POSPage.jsx]"]
  node_cart["Cart state<br/>[CartContext.jsx]"]
  node_payment["Payment<br/>[PaymentPageor.jsx]"]
  node_invoice["Invoice<br/>[InvoicePage.jsx]"]
end

subgraph group_shared["Shared services"]
  node_lead_api["Lead service<br/>[leadService.js]"]
  node_api["HTTP API client<br/>[api.js]"]
end

node_user(("Staff user"))
node_backend[("Application backend")]

node_user -->|"opens app"| node_app_routes
node_app_routes -->|"guards routes"| node_protected
node_app_routes -->|"routes owner"| node_owner_routes
node_app_routes -->|"routes store"| node_store_routes
node_app_routes -->|"routes POS"| node_pos_routes
node_app_routes -->|"routes staff"| node_lead_staff_routes
node_owner_routes -->|"renders layout"| node_dashboard
node_owner_routes -->|"routes sales"| node_new_sale
node_owner_routes -->|"routes inventory"| node_inventory
node_owner_routes -->|"routes purchases"| node_purchases
node_owner_routes -->|"routes products"| node_products
node_owner_routes -->|"routes vehicles"| node_vehicles
node_owner_routes -->|"routes reports"| node_reports
node_store_routes -->|"renders layout"| node_dashboard
node_store_routes -->|"routes inventory"| node_inventory
node_store_routes -->|"routes sales"| node_new_sale
node_lead_staff_routes -->|"renders layout"| node_dashboard
node_lead_staff_routes -->|"routes leads"| node_lead_list
node_lead_staff_routes -->|"routes details"| node_lead_details
node_lead_staff_routes -->|"routes creation"| node_lead_create
node_store_routes -->|"routes leads"| node_lead_list
node_lead_list -->|"opens creation"| node_lead_create
node_lead_list -->|"loads chat links"| node_whatsapp
node_lead_create -->|"creates lead"| node_lead_api
node_lead_details -->|"uses lead operations"| node_lead_api
node_lead_api -->|"sends requests"| node_api
node_new_sale -.->|"loads sale data"| node_api
node_pos_routes -->|"routes register"| node_pos_page
node_pos_routes -->|"routes invoice"| node_invoice
node_pos_page -.->|"uses cart"| node_cart
node_payment -->|"reads cart"| node_cart
node_payment -.->|"routes after payment"| node_invoice
node_invoice -->|"loads invoice"| node_api
node_api -->|"sends HTTP"| node_backend

click node_app_routes "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/routes/AppRoutesNew.jsx"
click node_owner_routes "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/routes/OwnerRoutes.jsx"
click node_store_routes "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/store/routes/StoreRoutes.jsx"
click node_lead_staff_routes "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/store/routes/LeadStaffRoutes.jsx"
click node_protected "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/auth/ProtectedRoute.jsx"
click node_dashboard "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/layouts/DashboardLayout.jsx"
click node_lead_list "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/components/leads/LeadList.jsx"
click node_lead_create "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/components/leads/LeadCreate.jsx"
click node_lead_details "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/components/leads/LeadDetails.jsx"
click node_whatsapp "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/components/leads/WhatsAppChats.jsx"
click node_lead_api "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/services/leadService.js"
click node_inventory "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/components/inventory/ProductManagePage.jsx"
click node_products "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/pages/ProductPage.jsx"
click node_purchases "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/pages/PurchasesPage.jsx"
click node_vehicles "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/components/vehicles/VehicleManagement.jsx"
click node_reports "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/pages/ReportsPage.jsx"
click node_new_sale "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/sales/pages/NewSalePage.jsx"
click node_pos_routes "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/pos/routes/POSRoutes.jsx"
click node_pos_page "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/pos/pages/POSPage.jsx"
click node_cart "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/pos/context/CartContext.jsx"
click node_payment "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/pos/pages/PaymentPageor.jsx"
click node_invoice "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/pos/pages/InvoicePage.jsx"
click node_api "https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/services/api.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_routes,node_owner_routes,node_store_routes,node_lead_staff_routes,node_protected,node_dashboard,node_user toneBlue
class node_lead_list,node_lead_create,node_lead_details,node_whatsapp,node_backend toneAmber
class node_inventory,node_products,node_purchases,node_vehicles,node_reports toneMint
class node_new_sale,node_pos_routes,node_pos_page,node_cart,node_payment,node_invoice toneRose
class node_lead_api,node_api toneIndigo
```

## Components

### Access and navigation

- [Role routes](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/routes/AppRoutesNew.jsx): `src/routes/AppRoutesNew.jsx`
- [Owner routes](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/routes/OwnerRoutes.jsx): `src/owner/routes/OwnerRoutes.jsx`
- [Store routes](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/store/routes/StoreRoutes.jsx): `src/store/routes/StoreRoutes.jsx`
- [Lead staff routes](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/store/routes/LeadStaffRoutes.jsx): `src/store/routes/LeadStaffRoutes.jsx`
- [Role guard](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/auth/ProtectedRoute.jsx): `src/auth/ProtectedRoute.jsx`
- [Dashboard layout](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/layouts/DashboardLayout.jsx): `src/owner/layouts/DashboardLayout.jsx`

### Lead management

- [Lead pipeline](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/components/leads/LeadList.jsx): `src/owner/components/leads/LeadList.jsx`
- [Lead capture](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/components/leads/LeadCreate.jsx): `src/owner/components/leads/LeadCreate.jsx`
- [Lead workspace](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/components/leads/LeadDetails.jsx): `src/owner/components/leads/LeadDetails.jsx`
- [WhatsApp chats](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/components/leads/WhatsAppChats.jsx): `src/owner/components/leads/WhatsAppChats.jsx`

### Store operations

- [Inventory management](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/components/inventory/ProductManagePage.jsx): `src/owner/components/inventory/ProductManagePage.jsx`
- [Product catalog](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/pages/ProductPage.jsx): `src/owner/pages/ProductPage.jsx`
- [Purchases](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/pages/PurchasesPage.jsx): `src/owner/pages/PurchasesPage.jsx`
- [Vehicle catalog](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/components/vehicles/VehicleManagement.jsx): `src/owner/components/vehicles/VehicleManagement.jsx`
- [Store reports](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/owner/pages/ReportsPage.jsx): `src/owner/pages/ReportsPage.jsx`

### Sales and POS

- [Sales and proformas](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/sales/pages/NewSalePage.jsx): `src/sales/pages/NewSalePage.jsx`
- [POS routes](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/pos/routes/POSRoutes.jsx): `src/pos/routes/POSRoutes.jsx`
- [POS register](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/pos/pages/POSPage.jsx): `src/pos/pages/POSPage.jsx`
- [Cart state](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/pos/context/CartContext.jsx): `src/pos/context/CartContext.jsx`
- [Payment](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/pos/pages/PaymentPageor.jsx): `src/pos/pages/PaymentPageor.jsx`
- [Invoice](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/pos/pages/InvoicePage.jsx): `src/pos/pages/InvoicePage.jsx`

### Shared services

- [Lead service](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/services/leadService.js): `src/services/leadService.js`
- [HTTP API client](https://github.com/sribuenasautosolutions/d2w-ui/blob/main/src/services/api.js): `src/services/api.js`

### Other components

- **Staff user**
- **Application backend**

## Connections

- Staff user → Role routes: opens app (evidence: `src/routes/AppRoutesNew.jsx`)
- Role routes → Role guard: guards routes (evidence: `src/routes/AppRoutesNew.jsx`)
- Role routes → Owner routes: routes owner (evidence: `src/routes/AppRoutesNew.jsx`)
- Role routes → Store routes: routes store (evidence: `src/routes/AppRoutesNew.jsx`)
- Role routes → POS routes: routes POS (evidence: `src/routes/AppRoutesNew.jsx`)
- Role routes → Lead staff routes: routes staff (evidence: `src/routes/AppRoutesNew.jsx`)
- Owner routes → Dashboard layout: renders layout (evidence: `src/owner/routes/OwnerRoutes.jsx`)
- Owner routes → Sales and proformas: routes sales (evidence: `src/owner/routes/OwnerRoutes.jsx`)
- Owner routes → Inventory management: routes inventory (evidence: `src/owner/routes/OwnerRoutes.jsx`)
- Owner routes → Purchases: routes purchases (evidence: `src/owner/routes/OwnerRoutes.jsx`)
- Owner routes → Product catalog: routes products (evidence: `src/owner/routes/OwnerRoutes.jsx`)
- Owner routes → Vehicle catalog: routes vehicles (evidence: `src/owner/routes/OwnerRoutes.jsx`)
- Owner routes → Store reports: routes reports (evidence: `src/owner/routes/OwnerRoutes.jsx`)
- Store routes → Dashboard layout: renders layout (evidence: `src/store/routes/StoreRoutes.jsx`)
- Store routes → Inventory management: routes inventory (evidence: `src/store/routes/StoreRoutes.jsx`)
- Store routes → Sales and proformas: routes sales (evidence: `src/store/routes/StoreRoutes.jsx`)
- Lead staff routes → Dashboard layout: renders layout (evidence: `src/store/routes/LeadStaffRoutes.jsx`)
- Lead staff routes → Lead pipeline: routes leads (evidence: `src/store/routes/LeadStaffRoutes.jsx`)
- Lead staff routes → Lead workspace: routes details (evidence: `src/store/routes/LeadStaffRoutes.jsx`)
- Lead staff routes → Lead capture: routes creation (evidence: `src/store/routes/LeadStaffRoutes.jsx`)
- Store routes → Lead pipeline: routes leads (evidence: `src/store/routes/StoreRoutes.jsx`)
- Lead pipeline → Lead capture: opens creation (evidence: `src/owner/components/leads/LeadList.jsx`)
- Lead pipeline → WhatsApp chats: loads chat links (evidence: `src/owner/components/leads/LeadList.jsx`)
- Lead capture → Lead service: creates lead (evidence: `src/owner/components/leads/LeadCreate.jsx`)
- Lead workspace → Lead service: uses lead operations (evidence: `src/owner/components/leads/LeadDetails.jsx`)
- Lead service → HTTP API client: sends requests (evidence: `src/services/leadService.js`)
- Sales and proformas → HTTP API client: loads sale data
- POS routes → POS register: routes register (evidence: `src/pos/routes/POSRoutes.jsx`)
- POS routes → Invoice: routes invoice (evidence: `src/pos/routes/POSRoutes.jsx`)
- POS register → Cart state: uses cart
- Payment → Cart state: reads cart (evidence: `src/pos/pages/PaymentPageor.jsx`)
- Payment → Invoice: routes after payment
- Invoice → HTTP API client: loads invoice (evidence: `src/pos/pages/InvoicePage.jsx`)
- HTTP API client → Application backend: sends HTTP (evidence: `src/services/api.js`)