CleanArchitecture-template/.brain/02. Requirements/05. Architecture/C4_Code.md

C4 Architecture Document - Level 4: Code Documentation (Frontend Store)

Detailed description of the state management structure on the Frontend to support complex business flows.

1. Global State (Zustand/Context)

To ensure customer data is retained when navigating between pages (Selecting Product -> Going back to edit info -> Viewing PDF), a Global Store is utilized.

useCustomerStore

• State:

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

• Actions:

  • updateInfo(field, value)
  • setOCRData(data)
  • resetSession()

2. Sequence Diagram: OCR & PDF Generation Flow

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 ID Card image
    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: Display Form (pre-filled)

    User->>FE: Select Product & Click "View Illustration"
    FE->>BFF: POST /api/illustration {info, product}
    BFF->>PDF: Generate Request
    PDF-->>BFF: PDF Stream/URL
    BFF-->>FE: Return URL
    FE-->>User: Display PDF Viewer

---

Authored by: Agent mbl-landing-page-architecture