# quan140106/nguyen_huu_quan-cnpm architecture

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

- Interactive diagram: https://gitdiagram.com/quan140106/nguyen_huu_quan-cnpm
- Repository: https://github.com/quan140106/nguyen_huu_quan-cnpm

## Overview

HI MrD is a restaurant-management application: staff sign in, then use a role-aware dashboard to manage orders, tables, menu items, kitchen work, payments, and (for managers) inventory, reports, and settings. The React pages call a local Express API, which accesses SQLite; the dashboard explicitly loads summary statistics and recent sales data. The README is only the Vite template, so product capabilities are inferred from the page tree and sampled code. Backend links for unsampled pages are omitted where their wiring cannot be confirmed.

Main entry points: [`src/App.jsx`](https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/App.jsx) (App shell), [`backend/server.js`](https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/backend/server.js) (Express API), [`src/pages/Login.jsx`](https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Login.jsx) (Sign in), [`src/pages/ManagerDashboard.jsx`](https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/ManagerDashboard.jsx) (Dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["React application"]
  node_app["App shell<br/>[App.jsx]"]
  node_sidebar["Navigation<br/>[Sidebar.jsx]"]
end

subgraph group_operations["Restaurant operations"]
  node_login["Sign in<br/>[Login.jsx]"]
  node_dashboard["Dashboard"]
  node_orders["Orders<br/>[Orders.jsx]"]
  node_tables["Tables<br/>[Tables.jsx]"]
  node_menu["Menu management<br/>[Menu.jsx]"]
  node_inventory["Inventory<br/>[Inventory.jsx]"]
  node_kitchen["Kitchen<br/>[Kitchen.jsx]"]
  node_payment["Payments<br/>[Payment.jsx]"]
  node_reports["Reports<br/>[Reports.jsx]"]
  node_settings["Settings<br/>[Settings.jsx]"]
  node_tasks["Tasks board<br/>[Tasks.jsx]"]
end

subgraph group_service["API and persistence"]
  node_api["Express API<br/>[server.js]"]
  node_database[("SQLite database<br/>[teammanager.db]")]
end

node_staff(("Staff"))

node_staff -->|"uses"| node_app
node_app -->|"renders when signed out"| node_login
node_app -->|"renders navigation"| node_sidebar
node_app -->|"dispatches page"| node_dashboard
node_app -->|"dispatches page"| node_orders
node_app -->|"dispatches page"| node_tables
node_app -->|"dispatches page"| node_menu
node_app -->|"dispatches page"| node_inventory
node_app -->|"dispatches page"| node_kitchen
node_app -->|"dispatches page"| node_payment
node_app -->|"dispatches page"| node_reports
node_app -->|"dispatches page"| node_settings
node_login -->|"authenticates"| node_api
node_dashboard -->|"fetches dashboard"| node_api
node_orders -->|"manages orders"| node_api
node_tables -->|"manages tables"| node_api
node_menu -->|"manages menu"| node_api
node_inventory -->|"manages stock"| node_api
node_kitchen -->|"fetches kitchen orders"| node_api
node_payment -->|"submits payment"| node_api
node_api -->|"reads and writes"| node_database
node_tasks -.->|"presents task board"| node_staff

click node_app "https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/App.jsx"
click node_sidebar "https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/components/Sidebar.jsx"
click node_login "https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Login.jsx"
click node_dashboard "https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/ManagerDashboard.jsx"
click node_orders "https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Orders.jsx"
click node_tables "https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Tables.jsx"
click node_menu "https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Menu.jsx"
click node_inventory "https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Inventory.jsx"
click node_kitchen "https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Kitchen.jsx"
click node_payment "https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Payment.jsx"
click node_reports "https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Reports.jsx"
click node_settings "https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Settings.jsx"
click node_tasks "https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Tasks.jsx"
click node_api "https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/backend/server.js"
click node_database "https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/backend/data/teammanager.db"

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_sidebar toneBlue
class node_login,node_dashboard,node_orders,node_tables,node_menu,node_inventory,node_kitchen,node_payment,node_reports,node_settings,node_tasks toneAmber
class node_api,node_database toneMint
class node_staff toneIndigo
```

## Components

### React application

- [App shell](https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation](https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/components/Sidebar.jsx): `src/components/Sidebar.jsx`

### Restaurant operations

- [Sign in](https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Login.jsx): `src/pages/Login.jsx`
- [Dashboard](https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/ManagerDashboard.jsx): `src/pages/ManagerDashboard.jsx`
- [Orders](https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Orders.jsx): `src/pages/Orders.jsx`
- [Tables](https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Tables.jsx): `src/pages/Tables.jsx`
- [Menu management](https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Menu.jsx): `src/pages/Menu.jsx`
- [Inventory](https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Inventory.jsx): `src/pages/Inventory.jsx`
- [Kitchen](https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Kitchen.jsx): `src/pages/Kitchen.jsx`
- [Payments](https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Payment.jsx): `src/pages/Payment.jsx`
- [Reports](https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Reports.jsx): `src/pages/Reports.jsx`
- [Settings](https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Settings.jsx): `src/pages/Settings.jsx`
- [Tasks board](https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/src/pages/Tasks.jsx): `src/pages/Tasks.jsx`

### API and persistence

- [Express API](https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/backend/server.js): `backend/server.js`
- [SQLite database](https://github.com/quan140106/nguyen_huu_quan-cnpm/blob/main/backend/data/teammanager.db): `backend/data/teammanager.db`

### Other components

- **Staff**

## Connections

- Staff → App shell: uses
- App shell → Sign in: renders when signed out
- App shell → Navigation: renders navigation
- App shell → Dashboard: dispatches page
- App shell → Orders: dispatches page
- App shell → Tables: dispatches page
- App shell → Menu management: dispatches page
- App shell → Inventory: dispatches page
- App shell → Kitchen: dispatches page
- App shell → Payments: dispatches page
- App shell → Reports: dispatches page
- App shell → Settings: dispatches page
- Sign in → Express API: authenticates
- Dashboard → Express API: fetches dashboard
- Orders → Express API: manages orders
- Tables → Express API: manages tables
- Menu management → Express API: manages menu
- Inventory → Express API: manages stock
- Kitchen → Express API: fetches kitchen orders
- Payments → Express API: submits payment
- Express API → SQLite database: reads and writes
- Tasks board → Staff: presents task board