# vietthangpq099-prog/vietthangcnpm architecture

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

## Overview

OpticShop is a Vietnamese eyewear storefront with customer shopping, account, and warranty pages, alongside staff order handling and admin catalog, inventory, order, and user screens. The visible product-to-cart interaction updates reducer-managed cart state, which the cart provider restores from and persists to browser localStorage. The README is only the Next.js starter README, so it does not document deeper business behavior; sampled excerpts also do not establish backend services or checkout-to-order persistence.

Main entry points: [`components/product/ProductCard.tsx`](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/components/product/ProductCard.tsx) (Product card), [`lib/context/CartContext.tsx`](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/lib/context/CartContext.tsx) (Cart state), [`app/(nhan-vien)/nhan-vien/don-hang/page.tsx`](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(nhan-vien)/nhan-vien/don-hang/page.tsx) (Staff orders), [`app/(admin)/quan-tri/page.tsx`](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(admin)/quan-tri/page.tsx) (Admin dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_home["Home<br/>[page.tsx]"]
  node_catalog["Product catalog<br/>[page.tsx]"]
  node_product["Product detail<br/>[page.tsx]"]
  node_search["Product search<br/>[page.tsx]"]
  node_product_data["Mock product data<br/>[mock-products.ts]"]
  node_product_card["Product card<br/>[ProductCard.tsx]"]
end

subgraph group_cart["Cart and checkout"]
  node_cart_context["Cart state<br/>[CartContext.tsx]"]
  node_browser_storage[("Browser localStorage")]
  node_cart_page["Cart page<br/>[page.tsx]"]
  node_checkout["Checkout<br/>[page.tsx]"]
  node_order_success["Order confirmation<br/>[page.tsx]"]
  node_orders["Customer orders<br/>[page.tsx]"]
end

subgraph group_identity["Accounts and warranty"]
  node_signup["Registration<br/>[page.tsx]"]
  node_login["Sign in<br/>[page.tsx]"]
  node_account["Customer account<br/>[page.tsx]"]
  node_warranty["Warranty<br/>[page.tsx]"]
end

subgraph group_operations["Staff and administration"]
  node_staff_orders["Staff orders<br/>[page.tsx]"]
  node_staff_processed["Processed orders<br/>[page.tsx]"]
  node_admin_dashboard["Admin dashboard<br/>[page.tsx]"]
  node_admin_products["Product management<br/>[page.tsx]"]
  node_admin_new_product["Add product<br/>[page.tsx]"]
  node_admin_inventory["Inventory<br/>[page.tsx]"]
  node_admin_orders["Order management<br/>[page.tsx]"]
  node_admin_users["User management<br/>[page.tsx]"]
  node_admin_data["Mock admin data<br/>[mock-admin.ts]"]
end

node_shopper(("Shopper"))

node_shopper -->|"visits"| node_home
node_product_card -->|"formats price"| node_product_data
node_product_card -->|"adds item"| node_cart_context
node_cart_context -->|"restores and saves"| node_browser_storage
node_shopper -->|"browses"| node_catalog
node_shopper -->|"searches"| node_search
node_shopper -->|"views"| node_product
node_shopper -->|"manages cart"| node_cart_page
node_shopper -->|"checks out"| node_checkout
node_shopper -->|"tracks orders"| node_orders
node_shopper -->|"registers"| node_signup
node_shopper -->|"signs in"| node_login
node_shopper -->|"manages account"| node_account
node_shopper -->|"checks warranty"| node_warranty
node_staff_orders -->|"reviews processing"| node_staff_processed
node_admin_dashboard -->|"uses mock data"| node_admin_data

click node_home "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(shop)/page.tsx"
click node_catalog "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(shop)/san-pham/page.tsx"
click node_product "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(shop)/san-pham/%5Bid%5D/page.tsx"
click node_search "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(shop)/tim-kiem/page.tsx"
click node_product_data "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/lib/data/mock-products.ts"
click node_product_card "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/components/product/ProductCard.tsx"
click node_cart_context "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/lib/context/CartContext.tsx"
click node_cart_page "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(shop)/gio-hang/page.tsx"
click node_checkout "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(shop)/thanh-toan/page.tsx"
click node_order_success "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(shop)/dat-hang-thanh-cong/page.tsx"
click node_orders "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(shop)/don-hang/page.tsx"
click node_signup "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(auth)/dang-ky/page.tsx"
click node_login "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(auth)/dang-nhap/page.tsx"
click node_account "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(shop)/tai-khoan/page.tsx"
click node_warranty "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(shop)/bao-hanh/page.tsx"
click node_staff_orders "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(nhan-vien)/nhan-vien/don-hang/page.tsx"
click node_staff_processed "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(nhan-vien)/nhan-vien/da-xu-ly/page.tsx"
click node_admin_dashboard "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(admin)/quan-tri/page.tsx"
click node_admin_products "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(admin)/quan-tri/san-pham/page.tsx"
click node_admin_new_product "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(admin)/quan-tri/san-pham/them-moi/page.tsx"
click node_admin_inventory "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(admin)/quan-tri/kho-hang/page.tsx"
click node_admin_orders "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(admin)/quan-tri/don-hang/page.tsx"
click node_admin_users "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(admin)/quan-tri/nguoi-dung/page.tsx"
click node_admin_data "https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/lib/data/mock-admin.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_home,node_catalog,node_product,node_search,node_product_data,node_product_card toneBlue
class node_cart_context,node_browser_storage,node_cart_page,node_checkout,node_order_success,node_orders toneAmber
class node_signup,node_login,node_account,node_warranty toneMint
class node_staff_orders,node_staff_processed,node_admin_dashboard,node_admin_products,node_admin_new_product,node_admin_inventory,node_admin_orders,node_admin_users,node_admin_data toneRose
class node_shopper toneIndigo
```

## Components

### Storefront

- [Home](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(shop)/page.tsx): `app/(shop)/page.tsx`
- [Product catalog](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(shop)/san-pham/page.tsx): `app/(shop)/san-pham/page.tsx`
- [Product detail](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(shop)/san-pham/%5Bid%5D/page.tsx): `app/(shop)/san-pham/[id]/page.tsx`
- [Product search](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(shop)/tim-kiem/page.tsx): `app/(shop)/tim-kiem/page.tsx`
- [Mock product data](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/lib/data/mock-products.ts): `lib/data/mock-products.ts`
- [Product card](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/components/product/ProductCard.tsx): `components/product/ProductCard.tsx`

### Cart and checkout

- [Cart state](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/lib/context/CartContext.tsx): `lib/context/CartContext.tsx`
- **Browser localStorage**
- [Cart page](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(shop)/gio-hang/page.tsx): `app/(shop)/gio-hang/page.tsx`
- [Checkout](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(shop)/thanh-toan/page.tsx): `app/(shop)/thanh-toan/page.tsx`
- [Order confirmation](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(shop)/dat-hang-thanh-cong/page.tsx): `app/(shop)/dat-hang-thanh-cong/page.tsx`
- [Customer orders](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(shop)/don-hang/page.tsx): `app/(shop)/don-hang/page.tsx`

### Accounts and warranty

- [Registration](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(auth)/dang-ky/page.tsx): `app/(auth)/dang-ky/page.tsx`
- [Sign in](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(auth)/dang-nhap/page.tsx): `app/(auth)/dang-nhap/page.tsx`
- [Customer account](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(shop)/tai-khoan/page.tsx): `app/(shop)/tai-khoan/page.tsx`
- [Warranty](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(shop)/bao-hanh/page.tsx): `app/(shop)/bao-hanh/page.tsx`

### Staff and administration

- [Staff orders](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(nhan-vien)/nhan-vien/don-hang/page.tsx): `app/(nhan-vien)/nhan-vien/don-hang/page.tsx`
- [Processed orders](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(nhan-vien)/nhan-vien/da-xu-ly/page.tsx): `app/(nhan-vien)/nhan-vien/da-xu-ly/page.tsx`
- [Admin dashboard](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(admin)/quan-tri/page.tsx): `app/(admin)/quan-tri/page.tsx`
- [Product management](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(admin)/quan-tri/san-pham/page.tsx): `app/(admin)/quan-tri/san-pham/page.tsx`
- [Add product](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(admin)/quan-tri/san-pham/them-moi/page.tsx): `app/(admin)/quan-tri/san-pham/them-moi/page.tsx`
- [Inventory](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(admin)/quan-tri/kho-hang/page.tsx): `app/(admin)/quan-tri/kho-hang/page.tsx`
- [Order management](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(admin)/quan-tri/don-hang/page.tsx): `app/(admin)/quan-tri/don-hang/page.tsx`
- [User management](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/app/(admin)/quan-tri/nguoi-dung/page.tsx): `app/(admin)/quan-tri/nguoi-dung/page.tsx`
- [Mock admin data](https://github.com/vietthangpq099-prog/vietthangcnpm/blob/main/lib/data/mock-admin.ts): `lib/data/mock-admin.ts`

### Other components

- **Shopper**

## Connections

- Shopper → Home: visits
- Product card → Mock product data: formats price
- Product card → Cart state: adds item
- Cart state → Browser localStorage: restores and saves
- Shopper → Product catalog: browses
- Shopper → Product search: searches
- Shopper → Product detail: views
- Shopper → Cart page: manages cart
- Shopper → Checkout: checks out
- Shopper → Customer orders: tracks orders
- Shopper → Registration: registers
- Shopper → Sign in: signs in
- Shopper → Customer account: manages account
- Shopper → Warranty: checks warranty
- Staff orders → Processed orders: reviews processing
- Admin dashboard → Mock admin data: uses mock data