49 lines
1.5 KiB
Markdown
49 lines
1.5 KiB
Markdown
# 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*
|