add brain

.brain/02. Requirements/05. Architecture/C4_Code.md

@@ -0,0 +1,48 @@
+# 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*