tofuu2202/CleanArchitecture-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add brain

Browse Source
This commit is contained in:
Te amo
2026-03-12 15:17:52 +07:00
parent fd9f558fa1
commit e7821a7a9d
355 changed files with 93784 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
.brain/02. Requirements/05. Architecture/C4_Code.md Normal file
View File

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

61
.brain/02. Requirements/05. Architecture/C4_Component.md Normal file
View File

@@ -0,0 +1,61 @@
# C4 Architecture Document - Level 3: Component Diagram (Landing Page)
Detailed breakdown of the logical components within the **Sales Landing App** and **BFF Service**.
## 1. Frontend Components (Sales Landing App)
### 1.1. Modules
- **Auth Module**: Login form, Token handling.
- **Customer Module**: Input form, Camera/Upload Component for OCR.
- **Product Module**: Product selection interface (Card selection for UVL-IC/UVL-EL).
- **Illustration Module**: PDF display (PDF Viewer) and download/Submit buttons.
### 1.2. Shared
- **UI Kit**: Button, Input, Modal (matching the Design System).
- **API Client**: Axios wrapper for calling the BFF.
## 2. Backend Components (BFF Service)
### 2.1. Controllers
- **AuthController**: Authentication via Auth API.
- **OCRController**: Proxies images to the OCR Service.
- **IllustrationController**: Aggregates data -> Calls PDF Engine -> Returns URL/File.
- **SubmissionController**: Submits final data to the Core system.
### 2.2. Services
- **ClientService**: Saves/Retrieves customer information from the Database.
## 3. Component Diagram
```mermaid
C4Component
title Component Diagram - Landing Page System
Container_Boundary(frontend, "Sales Landing App") {
Component(c_auth, "Auth Module", "React", "Login Screen")
Component(c_cust, "Customer Module", "React", "Form & OCR Upload")
Component(c_pdf, "Illustration Module", "React", "PDF View & Submit")
}
Container_Boundary(backend, "BFF Service") {
Component(ctl_ocr, "OCR Controller", "Node.js", "Handle Upload & Proxy")
Component(ctl_ill, "Illustration Controller", "Node.js", "Coordinate PDF Gen")
Component(svc_client, "Client Service", "Node.js", "Manage Client Data DB")
}
ContainerDb(db, "PostgreSQL", "Database", "Store Drafts")
System_Ext(ocr_ext, "External OCR", "Service")
System_Ext(pdf_ext, "External PDF Gen", "Service")
Rel(c_auth, ctl_ocr, "Authenticated Req")
Rel(c_cust, ctl_ocr, "Upload Image")
Rel(c_cust, ctl_ill, "Request PDF")
Rel(ctl_ocr, ocr_ext, "Proxy")
Rel(ctl_ill, pdf_ext, "Proxy")
Rel(ctl_ill, svc_client, "Save Info")
Rel(svc_client, db, "Persist")
```
---
*Authored by: Agent mbl-landing-page-architecture*

54
.brain/02. Requirements/05. Architecture/C4_Container.md Normal file
View File

@@ -0,0 +1,54 @@
# C4 Architecture Document - Level 2: Container Diagram (Landing Page)
Describes the deployable components of the Landing Page system.
## 1. Container List
### 1.1. Sales Landing App (Frontend)
- **Technology**: React, Vite, TailwindCSS.
- **Role**: Provides the interactive interface (Responsive).
- **Features**: Data input forms, Camera capture (for OCR), PDF Viewer, product navigation.
### 1.2. Backend For Frontend (BFF)
- **Technology**: Node.js / Express (or Serverless Functions).
- **Role**: Secures intermediary and API coordinator.
- **Features**:
- Hides Tokens/Secrets when making calls to the OCR and PDF APIs.
- Manages user sessions.
- Sanitizes and normalizes data before dispatching.
### 1.3. Local Storage / Caching DB
- **Technology**: PostgreSQL (or Redis/LocalStorage depending on long-term storage needs). *Based on the requirement to save customer data for future visits, PostgreSQL will be used.*
- **Role**: Stores draft customer information and temporary illustration history.
## 2. Container Diagram
```mermaid
C4Container
title Container Diagram - Landing Page Sales Party
Person(sales_agent, "Sales Agent", "Using personal device.")
System_Boundary(landing_zone, "Landing Page System") {
Container(web_app, "Sales Landing App", "React/Vite", "Mobile-first user interface.")
Container(bff_api, "BFF Service", "Node.js", "Intermediary logic and security handler.")
ContainerDb(local_db, "Client Cache DB", "PostgreSQL", "Stores draft customer information.")
}
System_Ext(auth_api, "Auth API", "Authentication")
System_Ext(ocr_service, "OCR Service", "Image processing")
System_Ext(pdf_engine, "PDF Engine", "PDF Generation")
System_Ext(core_system, "Core System", "Stores contracts")
Rel(sales_agent, web_app, "Interacts", "HTTPS")
Rel(web_app, bff_api, "API Call", "JSON/HTTPS")
Rel(bff_api, local_db, "Read/Write Customer Data", "SQL")
Rel(bff_api, auth_api, "Auth Proxy", "REST")
Rel(bff_api, ocr_service, "Calls OCR", "REST")
Rel(bff_api, pdf_engine, "Calls PDF Gen", "REST")
Rel(bff_api, core_system, "Submits application", "REST")
```
---
*Authored by: Agent mbl-landing-page-architecture*

58
.brain/02. Requirements/05. Architecture/C4_Context.md Normal file
View File

@@ -0,0 +1,58 @@
# C4 Architecture Document - Level 1: System Context (Landing Page)
This document describes the system context of the **Sales Landing Page**, focusing on supporting sales agents in presenting and initiating insurance policies.
## 1. System Overview
The **Landing Page Sales Party** is a web application that helps sales agents log in, manage customer data (OCR), and generate illustration boards (PDFs) for insurance products (UVL-IC, UVL-EL) across multiple devices.
## 2. Personas (Actors)
### Sales Agent
- **Type**: Primary User.
- **Description**: Uses a Laptop or Mobile device to consult directly with customers.
- **Goal**: Rapid data entry (OCR), instant presentation of illustration boards, and on-the-spot contract closure.
- **Key Features**: Login, Scan ID Card, Select Product, View/Download PDF, Submit Application.
## 3. External Systems
### API Authentication (Existing)
- **Role**: Authenticates the Sales Agent's account.
- **Protocol**: REST API / OIDC.
### OCR Service
- **Role**: Extracts customer information from ID Card images.
- **Protocol**: REST API.
### Illustration PDF API (PDF Engine)
- **Role**: Calculates benefits and renders the illustration PDF file.
- **Protocol**: REST API.
### Core Insurance System (Core System)
- **Role**: Receives the insurance application (upon Sales submission).
- **Protocol**: REST/SOAP API.
## 4. System Context Diagram (C4 Context Diagram)
```mermaid
C4Context
title System Context Diagram - Landing Page Sales Party
Person(sales_agent, "Sales Agent", "Uses the Landing Page to consult and close deals.")
System(landing_system, "Landing Page System", "Allows customer data entry, viewing illustrations, and submitting applications.")
System_Ext(auth_api, "Auth API", "Sales account authentication system.")
System_Ext(ocr_service, "OCR Service", "Extracts ID Card data.")
System_Ext(pdf_engine, "PDF Generator API", "Generates the illustration PDF file.")
System_Ext(core_system, "Core Insurance System", "Records the contract.")
Rel(sales_agent, landing_system, "Accesses, inputs data, views PDF", "HTTPS")
Rel(landing_system, auth_api, "Authenticates user", "REST/JSON")
Rel(landing_system, ocr_service, "Sends ID image", "REST/JSON")
Rel(landing_system, pdf_engine, "Sends data to fetch PDF", "REST/JSON")
Rel(landing_system, core_system, "Submits application", "REST/JSON")
```
---
*Authored by: Agent mbl-landing-page-architecture*

24
.brain/02. Requirements/05. Architecture/README.md Normal file
View File

@@ -0,0 +1,24 @@
# C4 Architecture Documentation System - Landing Page Sales Party
This repository consolidates the system architecture for the **Landing Page for Sales** project, helping the development team grasp the structure from a broad overview down to intricate details.
## Document Index
### [Level 1: System Context](./C4_Context.md)
- **Description**: The big picture of interactions between the Sales Agent, the Landing Page system, and external partners (OCR, Auth, Core).
- **Focus**: Identifying system boundaries and integration points.
### [Level 2: Container Diagram](./C4_Container.md)
- **Description**: Decomposing the system into the Web App (Frontend), BFF (Backend), and Database.
- **Technologies**: React, Node.js, PostgreSQL.
### [Level 3: Component Diagram](./C4_Component.md)
- **Description**: The internal structure of the Frontend (Modules) and Backend BFF (Controllers/Services).
- **Focus**: Processing logic for OCR and illustration generation.
### [Level 4: Code Documentation](./C4_Code.md)
- **Description**: Detailed data processing flows (Sequence Diagram) and State management on the Frontend.
- **Focus**: The data synchronization mechanism between the input form and the PDF Viewer.
---
*Last updated by: Agent mbl-landing-page-architecture*