# vietthangpq099-prog/nguyenhuuvietthang-cnpm architecture

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

- Interactive diagram: https://gitdiagram.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm
- Repository: https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm

## Overview

OpticShop is a Vietnamese online eyewear shop with customer, staff, and administrator experiences. The main customer journey is browsing/searching the product catalog, adding eyewear to a persistent cart, and submitting checkout; separate pages support order history, accounts, and warranty information. Staff handle order work, while administrators oversee orders, products, inventory, users, and dashboard metrics. The README documents SQLite-backed product and order APIs, but sampled admin and storefront pages also rely on mock data. Some route implementations were not sampled, so uncertain connections are omitted.

Main entry points: [`lib/data/mock-products.ts`](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/lib/data/mock-products.ts) (Product mock data), [`lib/data/mock-admin.ts`](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/lib/data/mock-admin.ts) (Admin mock data), [`components/product/ProductCard.tsx`](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/components/product/ProductCard.tsx) (Product cards), [`lib/context/CartContext.tsx`](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/lib/context/CartContext.tsx) (Cart state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_catalog["Product browsing"]
  node_search["Product search<br/>[page.tsx]"]
  node_product_detail["Product details<br/>[page.tsx]"]
  node_product_card["Product cards<br/>[ProductCard.tsx]"]
  node_home["Shop homepage<br/>[page.tsx]"]
  node_account["Account and auth<br/>[page.tsx]"]
  node_warranty["Warranty information<br/>[page.tsx]"]
end

subgraph group_commerce["Shopping and orders"]
  node_cart["Cart state<br/>[CartContext.tsx]"]
  node_cart_page["Cart page<br/>[page.tsx]"]
  node_checkout["Checkout<br/>[page.tsx]"]
  node_order_api["Order API<br/>[route.ts]"]
  node_order_views["Order history<br/>[page.tsx]"]
  node_confirmation["Order confirmation<br/>[page.tsx]"]
end

subgraph group_operations["Store operations"]
  node_staff["Staff order handling"]
  node_admin_dashboard["Admin dashboard<br/>[page.tsx]"]
  node_admin_orders["Order administration<br/>[page.tsx]"]
  node_admin_inventory["Inventory management<br/>[page.tsx]"]
  node_admin_products["Product administration"]
  node_admin_users["User administration<br/>[page.tsx]"]
end

subgraph group_platform["Application services"]
  node_mock_products["Product mock data<br/>[mock-products.ts]"]
  node_mock_admin["Admin mock data<br/>[mock-admin.ts]"]
  node_products_api["Product API<br/>[route.ts]"]
  node_database[("SQLite database<br/>[db.ts]")]
end

node_customer(("Shopper"))

node_customer -->|"visits"| node_home
node_customer -->|"browses"| node_catalog
node_customer -->|"searches"| node_search
node_customer -->|"manages account"| node_account
node_customer -->|"views warranty"| node_warranty
node_catalog -->|"reads"| node_mock_products
node_search -->|"searches"| node_mock_products
node_catalog -->|"renders"| node_product_card
node_search -->|"renders"| node_product_card
node_product_detail -->|"reads"| node_mock_products
node_product_detail -->|"renders"| node_product_card
node_product_card -->|"adds item"| node_cart
node_product_detail -->|"adds item"| node_cart
node_cart_page -.->|"uses state"| node_cart
node_checkout -->|"reads and clears"| node_cart
node_checkout -.->|"submits order"| node_order_api
node_order_api -->|"reads and writes"| node_database
node_products_api -->|"reads products"| node_database
node_order_views -->|"reads"| node_mock_admin
node_staff -->|"reads order data"| node_mock_admin
node_admin_dashboard -->|"reads metrics and orders"| node_mock_admin
node_admin_dashboard -->|"reads stock"| node_mock_products
node_admin_orders -->|"reads"| node_mock_admin
node_admin_inventory -->|"reads"| node_mock_products
node_admin_products -->|"reads"| node_mock_products
node_admin_users -->|"reads"| node_mock_admin

click node_catalog "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/tree/main/app/(shop)/san-pham"
click node_search "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(shop)/tim-kiem/page.tsx"
click node_product_detail "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(shop)/san-pham/%5Bid%5D/page.tsx"
click node_product_card "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/components/product/ProductCard.tsx"
click node_home "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(shop)/page.tsx"
click node_account "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(shop)/tai-khoan/page.tsx"
click node_warranty "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(shop)/bao-hanh/page.tsx"
click node_cart "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/lib/context/CartContext.tsx"
click node_cart_page "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(shop)/gio-hang/page.tsx"
click node_checkout "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(shop)/thanh-toan/page.tsx"
click node_order_api "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/api/orders/route.ts"
click node_order_views "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(shop)/don-hang/page.tsx"
click node_confirmation "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(shop)/dat-hang-thanh-cong/page.tsx"
click node_staff "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/tree/main/app/(nhan-vien)/nhan-vien"
click node_admin_dashboard "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(admin)/quan-tri/page.tsx"
click node_admin_orders "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(admin)/quan-tri/don-hang/page.tsx"
click node_admin_inventory "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(admin)/quan-tri/kho-hang/page.tsx"
click node_admin_products "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/tree/main/app/(admin)/quan-tri/san-pham"
click node_admin_users "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(admin)/quan-tri/nguoi-dung/page.tsx"
click node_mock_products "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/lib/data/mock-products.ts"
click node_mock_admin "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/lib/data/mock-admin.ts"
click node_products_api "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/api/products/route.ts"
click node_database "https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/lib/db.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_catalog,node_search,node_product_detail,node_product_card,node_home,node_account,node_warranty toneBlue
class node_cart,node_cart_page,node_checkout,node_order_api,node_order_views,node_confirmation toneAmber
class node_staff,node_admin_dashboard,node_admin_orders,node_admin_inventory,node_admin_products,node_admin_users toneMint
class node_mock_products,node_mock_admin,node_products_api,node_database toneRose
class node_customer toneIndigo
```

## Components

### Storefront

- [Product browsing](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/tree/main/app/(shop)/san-pham): `app/(shop)/san-pham`
- [Product search](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(shop)/tim-kiem/page.tsx): `app/(shop)/tim-kiem/page.tsx`
- [Product details](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(shop)/san-pham/%5Bid%5D/page.tsx): `app/(shop)/san-pham/[id]/page.tsx`
- [Product cards](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/components/product/ProductCard.tsx): `components/product/ProductCard.tsx`
- [Shop homepage](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(shop)/page.tsx): `app/(shop)/page.tsx`
- [Account and auth](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(shop)/tai-khoan/page.tsx): `app/(shop)/tai-khoan/page.tsx`
- [Warranty information](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(shop)/bao-hanh/page.tsx): `app/(shop)/bao-hanh/page.tsx`

### Shopping and orders

- [Cart state](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/lib/context/CartContext.tsx): `lib/context/CartContext.tsx`
- [Cart page](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(shop)/gio-hang/page.tsx): `app/(shop)/gio-hang/page.tsx`
- [Checkout](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(shop)/thanh-toan/page.tsx): `app/(shop)/thanh-toan/page.tsx`
- [Order API](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/api/orders/route.ts): `app/api/orders/route.ts`
- [Order history](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(shop)/don-hang/page.tsx): `app/(shop)/don-hang/page.tsx`
- [Order confirmation](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(shop)/dat-hang-thanh-cong/page.tsx): `app/(shop)/dat-hang-thanh-cong/page.tsx`

### Store operations

- [Staff order handling](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/tree/main/app/(nhan-vien)/nhan-vien): `app/(nhan-vien)/nhan-vien`
- [Admin dashboard](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(admin)/quan-tri/page.tsx): `app/(admin)/quan-tri/page.tsx`
- [Order administration](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(admin)/quan-tri/don-hang/page.tsx): `app/(admin)/quan-tri/don-hang/page.tsx`
- [Inventory management](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(admin)/quan-tri/kho-hang/page.tsx): `app/(admin)/quan-tri/kho-hang/page.tsx`
- [Product administration](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/tree/main/app/(admin)/quan-tri/san-pham): `app/(admin)/quan-tri/san-pham`
- [User administration](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/(admin)/quan-tri/nguoi-dung/page.tsx): `app/(admin)/quan-tri/nguoi-dung/page.tsx`

### Application services

- [Product mock data](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/lib/data/mock-products.ts): `lib/data/mock-products.ts`
- [Admin mock data](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/lib/data/mock-admin.ts): `lib/data/mock-admin.ts`
- [Product API](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/app/api/products/route.ts): `app/api/products/route.ts`
- [SQLite database](https://github.com/vietthangpq099-prog/nguyenhuuvietthang-cnpm/blob/main/lib/db.ts): `lib/db.ts`

### Other components

- **Shopper**

## Connections

- Shopper → Shop homepage: visits
- Shopper → Product browsing: browses
- Shopper → Product search: searches
- Shopper → Account and auth: manages account
- Shopper → Warranty information: views warranty
- Product browsing → Product mock data: reads (evidence: `app/(shop)/san-pham/page.tsx`)
- Product search → Product mock data: searches (evidence: `app/(shop)/tim-kiem/page.tsx`)
- Product browsing → Product cards: renders (evidence: `app/(shop)/san-pham/page.tsx`)
- Product search → Product cards: renders (evidence: `app/(shop)/tim-kiem/page.tsx`)
- Product details → Product mock data: reads (evidence: `app/(shop)/san-pham/[id]/page.tsx`)
- Product details → Product cards: renders (evidence: `app/(shop)/san-pham/[id]/page.tsx`)
- Product cards → Cart state: adds item (evidence: `components/product/ProductCard.tsx`)
- Product details → Cart state: adds item (evidence: `app/(shop)/san-pham/[id]/page.tsx`)
- Cart page → Cart state: uses state
- Checkout → Cart state: reads and clears (evidence: `app/(shop)/thanh-toan/page.tsx`)
- Checkout → Order API: submits order
- Order API → SQLite database: reads and writes (evidence: `app/api/orders/route.ts`)
- Product API → SQLite database: reads products (evidence: `app/api/products/route.ts`)
- Order history → Admin mock data: reads (evidence: `app/(shop)/don-hang/page.tsx`)
- Staff order handling → Admin mock data: reads order data (evidence: `app/(nhan-vien)/nhan-vien/don-hang/page.tsx`)
- Admin dashboard → Admin mock data: reads metrics and orders (evidence: `app/(admin)/quan-tri/page.tsx`)
- Admin dashboard → Product mock data: reads stock (evidence: `app/(admin)/quan-tri/page.tsx`)
- Order administration → Admin mock data: reads (evidence: `app/(admin)/quan-tri/don-hang/page.tsx`)
- Inventory management → Product mock data: reads (evidence: `app/(admin)/quan-tri/kho-hang/page.tsx`)
- Product administration → Product mock data: reads (evidence: `app/(admin)/quan-tri/san-pham/page.tsx`)
- User administration → Admin mock data: reads (evidence: `app/(admin)/quan-tri/nguoi-dung/page.tsx`)