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

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

1.6 KiB Raw Blame History

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

1. Global State (Zustand/Context)

useCustomerStore

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

1.6 KiB

Raw Blame History

`useCustomerStore`