# thanh-desige/nextjs-app architecture

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

- Interactive diagram: https://gitdiagram.com/thanh-desige/nextjs-app
- Repository: https://github.com/thanh-desige/nextjs-app

## Overview

Alubok is an aluminum-and-glass ERP with an integrated browser CAD design and takeoff module. The main documented flow is designing a door in CAD, generating material quantities, and producing a quote; sales, purchasing, accounting, and platform administration are distinct product areas. The sampled source confirms the CAD engine/store and quantity aggregation behavior, but not all UI or ERP wiring, so uncertain connections are omitted. Several README-listed modules are absent from the supplied tree.

Main entry points: [`src/PlatformAdmin/PlatformAdminPage.tsx`](https://github.com/thanh-desige/nextjs-app/blob/main/src/PlatformAdmin/PlatformAdminPage.tsx) (Platform Admin), [`src/TrangChuAlubok/book/BookThietKeBocTach/src/BookThietKeBocTachPage.tsx`](https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTach/src/BookThietKeBocTachPage.tsx) (CAD Editor), [`src/TrangChuAlubok/book/BookThietKeBocTachModule.tsx`](https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTachModule.tsx) (CAD Module), [`src/TrangChuAlubok/book/BookThietKeBocTach/src/hooks/useCadEngine.ts`](https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTach/src/hooks/useCadEngine.ts) (CAD Controls)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_design["CAD Design"]
  node_cad_module["CAD Module"]
  node_cad_page["CAD Editor"]
  node_cad_hook["CAD Controls<br/>[useCadEngine.ts]"]
  node_engine_store["Engine Store<br/>[engineStore.ts]"]
  node_cad_engine["CAD Engine<br/>[CadEngine.ts]"]
  node_door_engine["Hinged Door Engine"]
  node_quantity["Quantity Engine<br/>[QuantityEngine.ts]"]
  node_project_service["Project Service<br/>[ProjectService.ts]"]
  node_remote_storage["Remote Storage"]
end

subgraph group_commercial["ERP Workflows"]
  node_home["Alubok Home<br/>[TrangChuAlubok.tsx]"]
  node_sales["Sales Quotes &amp; Orders"]
  node_purchase["Purchasing"]
  node_accounting["Accounting<br/>[BookKeToanPage.tsx]"]
end

subgraph group_admin["Platform Admin"]
  node_platform_admin["Platform Admin"]
  node_tenant_admin["Tenant Management<br/>[TenantsPage.tsx]"]
  node_storage_admin["Storage Governance<br/>[StoragePage.tsx]"]
end

node_user(("Designer / User"))
node_admin_user(("Platform Operator"))

node_user -->|"opens"| node_home
node_home -->|"selects design"| node_cad_module
node_cad_module -->|"renders"| node_cad_page
node_user -->|"designs"| node_cad_page
node_cad_page -->|"controls"| node_cad_hook
node_cad_hook -->|"reads / updates"| node_engine_store
node_engine_store -->|"initializes / delegates"| node_cad_engine
node_cad_engine -.->|"generates door"| node_door_engine
node_door_engine -->|"supplies quantities"| node_quantity
node_user -->|"manages sales"| node_sales
node_user -->|"manages purchasing"| node_purchase
node_user -->|"manages accounts"| node_accounting
node_user -->|"manages projects"| node_project_service
node_project_service -.->|"persists remotely"| node_remote_storage
node_quantity -.->|"supports quotation"| node_sales
node_admin_user -->|"administers platform"| node_platform_admin
node_platform_admin -->|"manages tenants"| node_tenant_admin
node_platform_admin -->|"reviews storage"| node_storage_admin

click node_home "https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/TrangChuAlubok.tsx"
click node_cad_module "https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTachModule.tsx"
click node_cad_page "https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTach/src/BookThietKeBocTachPage.tsx"
click node_cad_hook "https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTach/src/hooks/useCadEngine.ts"
click node_engine_store "https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTach/src/store/engineStore.ts"
click node_cad_engine "https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTach/src/core/engine/CadEngine.ts"
click node_door_engine "https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTach/src/door-engines/hingedDoor/hingedDoor.engine.ts"
click node_quantity "https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTach/src/analysis/QuantityEngine.ts"
click node_project_service "https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTach/src/domain/projects/ProjectService.ts"
click node_remote_storage "https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTach/src/adapters/persistence/RemoteStorageAdapter.ts"
click node_sales "https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookBanHang/src/ui/BookBanHangPage.tsx"
click node_purchase "https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookMuaHang/src/ui/BookMuaHangPage.tsx"
click node_accounting "https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookKeToan/src/ui/BookKeToanPage.tsx"
click node_platform_admin "https://github.com/thanh-desige/nextjs-app/blob/main/src/PlatformAdmin/PlatformAdminPage.tsx"
click node_tenant_admin "https://github.com/thanh-desige/nextjs-app/blob/main/src/PlatformAdmin/tenants/TenantsPage.tsx"
click node_storage_admin "https://github.com/thanh-desige/nextjs-app/blob/main/src/PlatformAdmin/storage/StoragePage.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_cad_module,node_cad_page,node_cad_hook,node_engine_store,node_cad_engine,node_door_engine,node_quantity,node_project_service,node_remote_storage,node_user toneBlue
class node_home,node_sales,node_purchase,node_accounting toneAmber
class node_platform_admin,node_tenant_admin,node_storage_admin toneMint
class node_admin_user toneIndigo
```

## Components

### CAD Design

- [CAD Module](https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTachModule.tsx): `src/TrangChuAlubok/book/BookThietKeBocTachModule.tsx`
- [CAD Editor](https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTach/src/BookThietKeBocTachPage.tsx): `src/TrangChuAlubok/book/BookThietKeBocTach/src/BookThietKeBocTachPage.tsx`
- [CAD Controls](https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTach/src/hooks/useCadEngine.ts): `src/TrangChuAlubok/book/BookThietKeBocTach/src/hooks/useCadEngine.ts`
- [Engine Store](https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTach/src/store/engineStore.ts): `src/TrangChuAlubok/book/BookThietKeBocTach/src/store/engineStore.ts`
- [CAD Engine](https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTach/src/core/engine/CadEngine.ts): `src/TrangChuAlubok/book/BookThietKeBocTach/src/core/engine/CadEngine.ts`
- [Hinged Door Engine](https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTach/src/door-engines/hingedDoor/hingedDoor.engine.ts): `src/TrangChuAlubok/book/BookThietKeBocTach/src/door-engines/hingedDoor/hingedDoor.engine.ts`
- [Quantity Engine](https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTach/src/analysis/QuantityEngine.ts): `src/TrangChuAlubok/book/BookThietKeBocTach/src/analysis/QuantityEngine.ts`
- [Project Service](https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTach/src/domain/projects/ProjectService.ts): `src/TrangChuAlubok/book/BookThietKeBocTach/src/domain/projects/ProjectService.ts`
- [Remote Storage](https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookThietKeBocTach/src/adapters/persistence/RemoteStorageAdapter.ts): `src/TrangChuAlubok/book/BookThietKeBocTach/src/adapters/persistence/RemoteStorageAdapter.ts`

### ERP Workflows

- [Alubok Home](https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/TrangChuAlubok.tsx): `src/TrangChuAlubok/TrangChuAlubok.tsx`
- [Sales Quotes & Orders](https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookBanHang/src/ui/BookBanHangPage.tsx): `src/TrangChuAlubok/book/BookBanHang/src/ui/BookBanHangPage.tsx`
- [Purchasing](https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookMuaHang/src/ui/BookMuaHangPage.tsx): `src/TrangChuAlubok/book/BookMuaHang/src/ui/BookMuaHangPage.tsx`
- [Accounting](https://github.com/thanh-desige/nextjs-app/blob/main/src/TrangChuAlubok/book/BookKeToan/src/ui/BookKeToanPage.tsx): `src/TrangChuAlubok/book/BookKeToan/src/ui/BookKeToanPage.tsx`

### Platform Admin

- [Platform Admin](https://github.com/thanh-desige/nextjs-app/blob/main/src/PlatformAdmin/PlatformAdminPage.tsx): `src/PlatformAdmin/PlatformAdminPage.tsx`
- [Tenant Management](https://github.com/thanh-desige/nextjs-app/blob/main/src/PlatformAdmin/tenants/TenantsPage.tsx): `src/PlatformAdmin/tenants/TenantsPage.tsx`
- [Storage Governance](https://github.com/thanh-desige/nextjs-app/blob/main/src/PlatformAdmin/storage/StoragePage.tsx): `src/PlatformAdmin/storage/StoragePage.tsx`

### Other components

- **Designer / User**
- **Platform Operator**

## Connections

- Designer / User → Alubok Home: opens
- Alubok Home → CAD Module: selects design
- CAD Module → CAD Editor: renders
- Designer / User → CAD Editor: designs
- CAD Editor → CAD Controls: controls
- CAD Controls → Engine Store: reads / updates
- Engine Store → CAD Engine: initializes / delegates
- CAD Engine → Hinged Door Engine: generates door
- Hinged Door Engine → Quantity Engine: supplies quantities
- Designer / User → Sales Quotes & Orders: manages sales
- Designer / User → Purchasing: manages purchasing
- Designer / User → Accounting: manages accounts
- Designer / User → Project Service: manages projects
- Project Service → Remote Storage: persists remotely
- Quantity Engine → Sales Quotes & Orders: supports quotation
- Platform Operator → Platform Admin: administers platform
- Platform Admin → Tenant Management: manages tenants
- Platform Admin → Storage Governance: reviews storage