# nguyenthikhanhhang/cnpm architecture

> Architecture diagram of the GitHub repository nguyenthikhanhhang/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/nguyenthikhanhhang/cnpm
- Repository: https://github.com/nguyenthikhanhhang/cnpm

## Overview

This is an Angular storefront prototype for ODYDDEY, centered on browsing apparel, managing a cart, signing in, and submitting a delivery order. Customer checkout gates on login and a nonempty cart, then collects delivery details and returns an order to the customer component. The tree also exposes staff order-status and admin interfaces plus a rule-based shopping assistant. Evidence is limited to the sampled component logic; those extra screens’ full behavior and any backend integration are not established.

Main entry points: [`src/app/customer/customer.component.ts`](https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/customer/customer.component.ts) (Storefront), [`src/app/app.component.ts`](https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/app.component.ts) (App shell), [`src/app/customer/customer-login/customer-login.component.ts`](https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/customer/customer-login/customer-login.component.ts) (Role login), [`src/app/customer/checkout/checkout.component.ts`](https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/customer/checkout/checkout.component.ts) (Checkout form)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_customer["Customer storefront"]
  node_root["App shell<br/>[app.component.ts]"]
  node_store["Storefront"]
  node_catalog["Product catalog"]
  node_cart["Cart and totals"]
end

subgraph group_identity["Identity and checkout"]
  node_login["Role login"]
  node_localusers[("Registered accounts")]
  node_checkout["Checkout form"]
  node_orders[("Customer orders")]
end

subgraph group_operations["Operations and support"]
  node_staff["Staff orders<br/>[staff.ts]"]
  node_admin["Admin interface<br/>[admin.ts]"]
  node_assistant["Shopping assistant<br/>[chatbot.ts]"]
end

node_shopper(("Shopper"))

node_shopper -->|"uses"| node_root
node_root -->|"renders"| node_store
node_store -->|"filters"| node_catalog
node_store -->|"updates"| node_cart
node_store -->|"opens"| node_login
node_login -->|"reads/writes"| node_localusers
node_store -->|"opens after checks"| node_checkout
node_checkout -->|"emits order"| node_store
node_store -->|"records order"| node_orders
node_shopper -->|"uses"| node_staff
node_shopper -->|"uses"| node_admin
node_shopper -->|"chats"| node_assistant

click node_root "https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/app.component.ts"
click node_store "https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/customer/customer.component.ts"
click node_catalog "https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/customer/customer.component.ts"
click node_cart "https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/customer/customer.component.ts"
click node_login "https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/customer/customer-login/customer-login.component.ts"
click node_localusers "https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/customer/customer-login/customer-login.component.ts"
click node_checkout "https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/customer/checkout/checkout.component.ts"
click node_orders "https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/customer/customer.component.ts"
click node_staff "https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/staff/staff.ts"
click node_admin "https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/admin/admin.ts"
click node_assistant "https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/chatbot/chatbot.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_root,node_store,node_catalog,node_cart toneBlue
class node_login,node_localusers,node_checkout,node_orders toneAmber
class node_staff,node_admin,node_assistant toneMint
class node_shopper toneIndigo
```

## Components

### Customer storefront

- [App shell](https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/app.component.ts): `src/app/app.component.ts`
- [Storefront](https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/customer/customer.component.ts): `src/app/customer/customer.component.ts`
- [Product catalog](https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/customer/customer.component.ts): `src/app/customer/customer.component.ts`
- [Cart and totals](https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/customer/customer.component.ts): `src/app/customer/customer.component.ts`

### Identity and checkout

- [Role login](https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/customer/customer-login/customer-login.component.ts): `src/app/customer/customer-login/customer-login.component.ts`
- [Registered accounts](https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/customer/customer-login/customer-login.component.ts): `src/app/customer/customer-login/customer-login.component.ts`
- [Checkout form](https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/customer/checkout/checkout.component.ts): `src/app/customer/checkout/checkout.component.ts`
- [Customer orders](https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/customer/customer.component.ts): `src/app/customer/customer.component.ts`

### Operations and support

- [Staff orders](https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/staff/staff.ts): `src/app/staff/staff.ts`
- [Admin interface](https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/admin/admin.ts): `src/app/admin/admin.ts`
- [Shopping assistant](https://github.com/nguyenthikhanhhang/cnpm/blob/main/src/app/chatbot/chatbot.ts): `src/app/chatbot/chatbot.ts`

### Other components

- **Shopper**

## Connections

- Shopper → App shell: uses
- App shell → Storefront: renders
- Storefront → Product catalog: filters
- Storefront → Cart and totals: updates
- Storefront → Role login: opens
- Role login → Registered accounts: reads/writes
- Storefront → Checkout form: opens after checks
- Checkout form → Storefront: emits order
- Storefront → Customer orders: records order
- Shopper → Staff orders: uses
- Shopper → Admin interface: uses
- Shopper → Shopping assistant: chats