# Tài liệu Kiến trúc C4 - Mức 4: Code Documentation (Frontend Store)

Mô tả chi tiết cấu trúc quản lý dữ liệu (State Management) tại Frontend để phục vụ luồng nghiệp vụ phức tạp.

## 1. Global State (Zustand/Context)

Để đảm bảo dữ liệu khách hàng được lưu giữ khi chuyển giữa các trang (Chọn sản phẩm -> Quay lại sửa thông tin -> Xem PDF), sử dụng Global Store.

### `useCustomerStore`
- **State**:
  - `personalInfo`: { name, cccd, dob, gender, ... }
  - `ocrStatus`: 'idle' | 'scanning' | 'success' | 'error'
  - `selectedProduct`: 'UVL-IC' | 'UVL-EL' | null
  - `illustrationUrl`: string (Link PDF)

- **Actions**:
  - `updateInfo(field, value)`
  - `setOCRData(data)`
  - `resetSession()`

## 2. Sequence Diagram: Luồng OCR & Tạo PDF

```mermaid
sequenceDiagram
    participant User as Sales Agent
    participant FE as Frontend (Store)
    participant BFF as Backend BFF
    participant OCR as OCR Service
    participant PDF as PDF Engine

    User->>FE: Upload ảnh CCCD
    FE->>BFF: POST /api/ocr (image)
    BFF->>OCR: Extract Info
    OCR-->>BFF: {name, cccd, dob...}
    BFF-->>FE: Return JSON
    FE->>FE: Update Store (personalInfo)
    FE-->>User: Hiển thị Form (đã điền sẵn)

    User->>FE: Chọn SP & Nhấn "Xem Minh Họa"
    FE->>BFF: POST /api/illustration {info, product}
    BFF->>PDF: Generate Request
    PDF-->>BFF: PDF Stream/URL
    BFF-->>FE: Return URL
    FE-->>User: Hiển thị PDF Viewer
```

---
*Biên soạn bởi: Agent mbl-landing-page-architecture*