source: Add rules for AI Coding

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

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