# 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

```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 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*