# erankit011/billpay_frontend architecture

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

## Overview

UdharPay is a React frontend for merchant billing and business management, with a separate platform-admin workspace. Users enter through the app shell and role-protected routes; merchant and admin pages provide the product workflows, while shared HTTP and authentication layers support them. The tree also shows search and PWA features. Source excerpts confirm several key connections, but many page implementations were not sampled, so the graph omits unverified page-to-API flows.

Main entry points: [`src/App.jsx`](https://github.com/erankit011/billpay_frontend/blob/main/src/App.jsx) (App composition), [`src/routes/AppRoutes.jsx`](https://github.com/erankit011/billpay_frontend/blob/main/src/routes/AppRoutes.jsx) (Role-based routes), [`src/pages`](https://github.com/erankit011/billpay_frontend/tree/main/src/pages) (Merchant pages), [`src/components/bills/CreateBillModal.jsx`](https://github.com/erankit011/billpay_frontend/blob/main/src/components/bills/CreateBillModal.jsx) (Bill creation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_app["App composition<br/>[App.jsx]"]
  node_routes["Role-based routes<br/>[AppRoutes.jsx]"]
  node_auth["Session state<br/>[authSlice.js]"]
end

subgraph group_merchant["Merchant workspace"]
  node_merchant_pages["Merchant pages"]
  node_billing_modal["Bill creation"]
  node_invoice_pdf["Invoice PDF"]
end

subgraph group_admin["Platform administration"]
  node_admin_pages["Admin pages"]
  node_admin_api["Admin API client<br/>[adminApi.js]"]
  node_admin_components["Admin controls"]
end

subgraph group_shared["Shared services"]
  node_http["HTTP client<br/>[axios.js]"]
  node_formatting["Date and currency helpers"]
  node_translations["Translations<br/>[i18n.js]"]
end

subgraph group_extensions["Cross-cutting features"]
  node_search["Quick search"]
  node_pwa["PWA update support<br/>[PWAContext.jsx]"]
end

node_user(("User"))
node_backend{{"UdharPay API"}}

node_user -->|"opens"| node_app
node_app -->|"renders"| node_routes
node_app -->|"hydrates"| node_auth
node_routes -->|"routes to"| node_merchant_pages
node_routes -->|"routes to"| node_admin_pages
node_merchant_pages -.->|"uses"| node_billing_modal
node_billing_modal -->|"requests"| node_http
node_billing_modal -->|"generates"| node_invoice_pdf
node_admin_pages -->|"requests through"| node_admin_api
node_admin_pages -->|"renders"| node_admin_components
node_admin_api -->|"uses"| node_http
node_http -.->|"sends requests"| node_backend
node_merchant_pages -->|"uses"| node_formatting
node_app -->|"provides context"| node_pwa
node_app -->|"mounts via layout"| node_search
node_app -->|"loads"| node_translations

click node_app "https://github.com/erankit011/billpay_frontend/blob/main/src/App.jsx"
click node_routes "https://github.com/erankit011/billpay_frontend/blob/main/src/routes/AppRoutes.jsx"
click node_auth "https://github.com/erankit011/billpay_frontend/blob/main/src/redux/slices/authSlice.js"
click node_merchant_pages "https://github.com/erankit011/billpay_frontend/tree/main/src/pages"
click node_billing_modal "https://github.com/erankit011/billpay_frontend/blob/main/src/components/bills/CreateBillModal.jsx"
click node_invoice_pdf "https://github.com/erankit011/billpay_frontend/blob/main/src/utils/generateInvoicePDF.js"
click node_admin_pages "https://github.com/erankit011/billpay_frontend/tree/main/src/pages/admin"
click node_admin_api "https://github.com/erankit011/billpay_frontend/blob/main/src/features/admin/api/adminApi.js"
click node_admin_components "https://github.com/erankit011/billpay_frontend/tree/main/src/features/admin/components"
click node_http "https://github.com/erankit011/billpay_frontend/blob/main/src/api/axios.js"
click node_formatting "https://github.com/erankit011/billpay_frontend/tree/main/src/utils"
click node_search "https://github.com/erankit011/billpay_frontend/blob/main/src/features/search/components/QuickSearchModal.jsx"
click node_pwa "https://github.com/erankit011/billpay_frontend/blob/main/src/features/pwa/context/PWAContext.jsx"
click node_translations "https://github.com/erankit011/billpay_frontend/blob/main/src/i18n.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,node_routes,node_auth,node_user toneBlue
class node_merchant_pages,node_billing_modal,node_invoice_pdf toneAmber
class node_admin_pages,node_admin_api,node_admin_components,node_backend toneMint
class node_http,node_formatting,node_translations toneRose
class node_search,node_pwa toneIndigo
```

## Components

### Application shell

- [App composition](https://github.com/erankit011/billpay_frontend/blob/main/src/App.jsx): `src/App.jsx`
- [Role-based routes](https://github.com/erankit011/billpay_frontend/blob/main/src/routes/AppRoutes.jsx): `src/routes/AppRoutes.jsx`
- [Session state](https://github.com/erankit011/billpay_frontend/blob/main/src/redux/slices/authSlice.js): `src/redux/slices/authSlice.js`

### Merchant workspace

- [Merchant pages](https://github.com/erankit011/billpay_frontend/tree/main/src/pages): `src/pages`
- [Bill creation](https://github.com/erankit011/billpay_frontend/blob/main/src/components/bills/CreateBillModal.jsx): `src/components/bills/CreateBillModal.jsx`
- [Invoice PDF](https://github.com/erankit011/billpay_frontend/blob/main/src/utils/generateInvoicePDF.js): `src/utils/generateInvoicePDF.js`

### Platform administration

- [Admin pages](https://github.com/erankit011/billpay_frontend/tree/main/src/pages/admin): `src/pages/admin`
- [Admin API client](https://github.com/erankit011/billpay_frontend/blob/main/src/features/admin/api/adminApi.js): `src/features/admin/api/adminApi.js`
- [Admin controls](https://github.com/erankit011/billpay_frontend/tree/main/src/features/admin/components): `src/features/admin/components`

### Shared services

- [HTTP client](https://github.com/erankit011/billpay_frontend/blob/main/src/api/axios.js): `src/api/axios.js`
- [Date and currency helpers](https://github.com/erankit011/billpay_frontend/tree/main/src/utils): `src/utils`
- [Translations](https://github.com/erankit011/billpay_frontend/blob/main/src/i18n.js): `src/i18n.js`

### Cross-cutting features

- [Quick search](https://github.com/erankit011/billpay_frontend/blob/main/src/features/search/components/QuickSearchModal.jsx): `src/features/search/components/QuickSearchModal.jsx`
- [PWA update support](https://github.com/erankit011/billpay_frontend/blob/main/src/features/pwa/context/PWAContext.jsx): `src/features/pwa/context/PWAContext.jsx`

### Other components

- **User**
- **UdharPay API**

## Connections

- User → App composition: opens
- App composition → Role-based routes: renders (evidence: `src/App.jsx`)
- App composition → Session state: hydrates (evidence: `src/App.jsx`)
- Role-based routes → Merchant pages: routes to (evidence: `src/routes/AppRoutes.jsx`)
- Role-based routes → Admin pages: routes to (evidence: `src/routes/AppRoutes.jsx`)
- Merchant pages → Bill creation: uses
- Bill creation → HTTP client: requests (evidence: `src/components/bills/CreateBillModal.jsx`)
- Bill creation → Invoice PDF: generates (evidence: `src/components/bills/CreateBillModal.jsx`)
- Admin pages → Admin API client: requests through (evidence: `src/pages/admin/AdminDashboard.jsx`)
- Admin pages → Admin controls: renders (evidence: `src/pages/admin/AdminDashboard.jsx`)
- Admin API client → HTTP client: uses (evidence: `src/features/admin/api/adminApi.js`)
- HTTP client → UdharPay API: sends requests
- Merchant pages → Date and currency helpers: uses (evidence: `src/pages/Settings.jsx`)
- App composition → PWA update support: provides context (evidence: `src/App.jsx`)
- App composition → Quick search: mounts via layout
- App composition → Translations: loads (evidence: `src/main.jsx`)