# nayan97/sass-invoice-in-react architecture

> Architecture diagram of the GitHub repository nayan97/sass-invoice-in-react, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nayan97/sass-invoice-in-react
- Repository: https://github.com/nayan97/sass-invoice-in-react

## Overview

1. This is a client-side React single-page application built with TypeScript and Vite. The repo is primarily a front-end shell; its main runtime responsibilities are routing, layout composition, form/modal interactions, and API-backed state management.

2. The app is split into two major surfaces: a public/user area and an admin area. Public pages currently include authentication screens (`Login`, `Register`) and a user-facing `PricingPage`. The admin surface contains dashboard and CRUD-heavy management screens for currencies, invoices, companies, subscriptions, coupons, plans, and transactions.

3. Routing and access control are enforced at the component level. `ProtectedRoute` acts as the main authentication gate, while `AdminLayout` provides the structural wrapper for admin pages. This suggests route groups like public vs authenticated vs admin-only, rather than a single flat page tree.

4. The admin UI is organized around a shared chrome: `Header` and `Sidebar` under `src/components/admin`, with the layout likely composing these around page content. This is the primary visual boundary for the admin subsystem and the place where global navigation and page framing live.

5. The application’s data layer is centralized under `src/store` and appears to use Redux Toolkit Query-style API slices. There is a `baseApi` plus domain-specific slices for auth, home, company, company addresses, company users, currencies, invoices, main invoices, subscriptions, subscription plans, coupons, and transactions. The pattern indicates pages fetch and mutate server state through these slices rather than direct fetch calls scattered across components.

7. The domain model is highly CRUD-oriented. Each business area has its own page set and in many cases modal dialogs for create/edit/delete flows, such as `CurrencyModal`, `PlanModal`, `CouponModal`, `SubscriptionEditModal`, `InvoiceDeleteModal`, and company user/address modals. That means the UI pattern is page list + modal form + API mutation.

8. Invoices are a major subsystem and are split into multiple entry points: main invoices, company invoices, invoice details, add invoice, and wrapper components for specific routes. This suggests invoice handling has route-level segmentation and potentially multiple views over the same backend model depending on context.

9. Company management is another distinct admin domain. It includes company listing, addresses, and users, which implies a nested ownership model where companies have related sub-resources and separate management screens.

10. Subscriptions are modeled as a family of screens rather than a single page: subscriptions, subscription plans, coupons, invoices, and transactions. This indicates a billing/commerce subsystem with distinct but related entities, likely sharing API data and admin workflows.

11. Shared UI primitives live in `src/components/ui` and are likely reusable design-system wrappers. The presence of `button`, `carousel`, and `sheet` components, plus `components.json`, strongly suggests a generated component library pattern similar to shadcn/ui, used to keep modal, drawer, and button styling consistent.

12. The top-level app bootstrap is standard Vite/React: `main.tsx` mounts the app, `App.tsx` likely wires routing and layouts, and `index.css`/`App.css` provide global and app-specific styling. `src/lib/utils.ts` likely holds small shared helpers used by UI components.

14. In short, the repository is a modular admin console with a small public-facing entry area, built around route protection, shared admin chrome, and a centralized API-state layer for several business domains.

Main entry points: [`src/layouts/AdminLayout.tsx`](https://github.com/nayan97/sass-invoice-in-react/blob/main/src/layouts/AdminLayout.tsx) (Admin layout), [`src/App.tsx`](https://github.com/nayan97/sass-invoice-in-react/blob/main/src/App.tsx) (App), [`src/store/authApi.ts`](https://github.com/nayan97/sass-invoice-in-react/blob/main/src/store/authApi.ts) (Auth API), [`src/components/ProtectedRoute.tsx`](https://github.com/nayan97/sass-invoice-in-react/blob/main/src/components/ProtectedRoute.tsx) (Guard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_main["main.tsx<br/>bootstrap<br/>[main.tsx]"]
  node_app_root["App<br/>router shell<br/>[App.tsx]"]
  node_protected_route["Guard<br/>route gate<br/>[ProtectedRoute.tsx]"]
end

subgraph group_public["Public area"]
  node_login_page["Login<br/>auth page<br/>[Login.tsx]"]
  node_register_page["Register<br/>auth page<br/>[Register.tsx]"]
  node_pricing_page["Pricing<br/>public page<br/>[PricingPage.tsx]"]
end

subgraph group_admin["Admin area"]
  node_admin_layout["Admin layout<br/>layout shell<br/>[AdminLayout.tsx]"]
  node_admin_header["Header<br/>admin chrome<br/>[Header.tsx]"]
  node_admin_sidebar["Sidebar<br/>admin nav<br/>[Sidebar.tsx]"]
  node_dashboard_page["Dashboard<br/>admin page<br/>[Dashboard.tsx]"]
  node_company_pages["Company mgmt<br/>admin domain"]
  node_invoice_pages["Invoices<br/>admin domain"]
  node_billing_pages["Billing<br/>admin domain"]
  node_currency_pages["Currencies<br/>admin domain<br/>[CurrenciesPage.tsx]"]
end

subgraph group_data["Data layer"]
  node_auth_slice["Auth state<br/>redux slice<br/>[authSlice.ts]"]
  node_auth_api["Auth API<br/>rtk query<br/>[authApi.ts]"]
  node_base_api["Base API<br/>api core<br/>[baseApi.ts]"]
  node_domain_apis["Domain APIs<br/>rtk query set"]
end

node_main -->|"mounts"| node_app_root
node_app_root -->|"uses"| node_protected_route
node_app_root -->|"routes to"| node_login_page
node_app_root -->|"routes to"| node_register_page
node_app_root -->|"routes to"| node_pricing_page
node_protected_route -->|"permits"| node_admin_layout
node_admin_layout -->|"composes"| node_admin_header
node_admin_layout -->|"composes"| node_admin_sidebar
node_admin_layout -->|"hosts"| node_dashboard_page
node_admin_layout -->|"hosts"| node_company_pages
node_admin_layout -->|"hosts"| node_invoice_pages
node_admin_layout -->|"hosts"| node_billing_pages
node_admin_layout -->|"hosts"| node_currency_pages
node_login_page -->|"calls"| node_auth_api
node_register_page -->|"calls"| node_auth_api
node_auth_api -->|"extends"| node_base_api
node_auth_slice -->|"syncs"| node_auth_api
node_domain_apis -->|"extends"| node_base_api
node_company_pages -->|"fetches"| node_domain_apis
node_invoice_pages -->|"fetches"| node_domain_apis
node_billing_pages -->|"fetches"| node_domain_apis
node_currency_pages -->|"fetches"| node_domain_apis

click node_main "https://github.com/nayan97/sass-invoice-in-react/blob/main/src/main.tsx"
click node_app_root "https://github.com/nayan97/sass-invoice-in-react/blob/main/src/App.tsx"
click node_protected_route "https://github.com/nayan97/sass-invoice-in-react/blob/main/src/components/ProtectedRoute.tsx"
click node_admin_layout "https://github.com/nayan97/sass-invoice-in-react/blob/main/src/layouts/AdminLayout.tsx"
click node_admin_header "https://github.com/nayan97/sass-invoice-in-react/blob/main/src/components/admin/Header.tsx"
click node_admin_sidebar "https://github.com/nayan97/sass-invoice-in-react/blob/main/src/components/admin/Sidebar.tsx"
click node_login_page "https://github.com/nayan97/sass-invoice-in-react/blob/main/src/pages/Login.tsx"
click node_register_page "https://github.com/nayan97/sass-invoice-in-react/blob/main/src/pages/Register.tsx"
click node_pricing_page "https://github.com/nayan97/sass-invoice-in-react/blob/main/src/pages/user/PricingPage.tsx"
click node_dashboard_page "https://github.com/nayan97/sass-invoice-in-react/blob/main/src/pages/admin/Dashboard.tsx"
click node_currency_pages "https://github.com/nayan97/sass-invoice-in-react/blob/main/src/pages/admin/Currencies/CurrenciesPage.tsx"
click node_auth_slice "https://github.com/nayan97/sass-invoice-in-react/blob/main/src/store/authSlice.ts"
click node_auth_api "https://github.com/nayan97/sass-invoice-in-react/blob/main/src/store/authApi.ts"
click node_base_api "https://github.com/nayan97/sass-invoice-in-react/blob/main/src/store/baseApi.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_main,node_app_root,node_protected_route toneBlue
class node_login_page,node_register_page,node_pricing_page toneAmber
class node_admin_layout,node_admin_header,node_admin_sidebar,node_dashboard_page,node_company_pages,node_invoice_pages,node_billing_pages,node_currency_pages toneMint
class node_auth_slice,node_auth_api,node_base_api,node_domain_apis toneRose
```

## Components

### App shell

Bootstrap, routing, and shared runtime framing.

- [main.tsx](https://github.com/nayan97/sass-invoice-in-react/blob/main/src/main.tsx): bootstrap · Vite entry that mounts the React app. · `src/main.tsx`
- [App](https://github.com/nayan97/sass-invoice-in-react/blob/main/src/App.tsx): router shell · Top-level app composition and route wiring. · `src/App.tsx`
- [Guard](https://github.com/nayan97/sass-invoice-in-react/blob/main/src/components/ProtectedRoute.tsx): route gate · Authentication gate for protected views. · `src/components/ProtectedRoute.tsx`

### Public area

Authentication and user-facing entry pages.

- [Login](https://github.com/nayan97/sass-invoice-in-react/blob/main/src/pages/Login.tsx): auth page · Public sign-in screen. · `src/pages/Login.tsx`
- [Register](https://github.com/nayan97/sass-invoice-in-react/blob/main/src/pages/Register.tsx): auth page · Public account creation screen. · `src/pages/Register.tsx`
- [Pricing](https://github.com/nayan97/sass-invoice-in-react/blob/main/src/pages/user/PricingPage.tsx): public page · User-facing pricing page. · `src/pages/user/PricingPage.tsx`

### Admin area

Admin chrome plus domain-specific management screens.

- [Admin layout](https://github.com/nayan97/sass-invoice-in-react/blob/main/src/layouts/AdminLayout.tsx): layout shell · Structural wrapper for admin pages. · `src/layouts/AdminLayout.tsx`
- [Header](https://github.com/nayan97/sass-invoice-in-react/blob/main/src/components/admin/Header.tsx): admin chrome · Top bar used across the admin surface. · `src/components/admin/Header.tsx`
- [Sidebar](https://github.com/nayan97/sass-invoice-in-react/blob/main/src/components/admin/Sidebar.tsx): admin nav · Primary admin navigation and section switching. · `src/components/admin/Sidebar.tsx`
- [Dashboard](https://github.com/nayan97/sass-invoice-in-react/blob/main/src/pages/admin/Dashboard.tsx): admin page · Admin landing page and summary view. · `src/pages/admin/Dashboard.tsx`
- **Company mgmt**: admin domain · Company, address, and user management screens.
- **Invoices**: admin domain · Invoice entry points and detail flows.
- **Billing**: admin domain · Subscriptions, plans, coupons, and transactions.
- [Currencies](https://github.com/nayan97/sass-invoice-in-react/blob/main/src/pages/admin/Currencies/CurrenciesPage.tsx): admin domain · Currency management list and modal flows. · `src/pages/admin/Currencies/CurrenciesPage.tsx`

### Data layer

Centralized API slices and local auth state.

- [Auth state](https://github.com/nayan97/sass-invoice-in-react/blob/main/src/store/authSlice.ts): redux slice · Local session and auth state. · `src/store/authSlice.ts`
- [Auth API](https://github.com/nayan97/sass-invoice-in-react/blob/main/src/store/authApi.ts): rtk query · Login and register endpoints. · `src/store/authApi.ts`
- [Base API](https://github.com/nayan97/sass-invoice-in-react/blob/main/src/store/baseApi.ts): api core · Shared RTK Query base used by domain slices. · `src/store/baseApi.ts`
- **Domain APIs**: rtk query set · Company, invoice, billing, currency, home, and transaction API slices.

## Connections

- main.tsx → App: mounts · Bootstraps the app shell.
- App → Guard: uses · Wraps authenticated routes with access control.
- App → Login: routes to · Public authentication entry.
- App → Register: routes to · Public account creation entry.
- App → Pricing: routes to · User-facing public page.
- Guard → Admin layout: permits · Unlocked users enter the admin shell.
- Admin layout → Header: composes · Shared admin chrome.
- Admin layout → Sidebar: composes · Shared navigation chrome.
- Admin layout → Dashboard: hosts · Frames the dashboard view.
- Admin layout → Company mgmt: hosts · Frames company management screens.
- Admin layout → Invoices: hosts · Frames invoice workflows.
- Admin layout → Billing: hosts · Frames subscription and billing workflows.
- Admin layout → Currencies: hosts · Frames currency management.
- Login → Auth API: calls · Submits login requests.
- Register → Auth API: calls · Submits registration requests.
- Auth API → Base API: extends · Built on the shared API core.
- Auth state → Auth API: syncs · Stores local auth/session state around remote auth results.
- Domain APIs → Base API: extends · Domain slices share the common API core.
- Company mgmt → Domain APIs: fetches · Company screens read and mutate via company-related slices.
- Invoices → Domain APIs: fetches · Invoice screens read and mutate via invoice-related slices.
- Billing → Domain APIs: fetches · Billing screens use subscription, plan, coupon, and transaction slices.
- Currencies → Domain APIs: fetches · Currency screens use the currency slice.