CleanArchitecture-template/base/02. Requirements/05. Architecture/C4_Component.md

Tài liệu Kiến trúc C4 - Mức 3: Component Diagram (Landing Page)

Chi tiết hóa các thành phần logic trong Sales Landing App và BFF Service.

1. Frontend Components (Sales Landing App)

1.1. Modules

• Auth Module: Form đăng nhập, xử lý Token.
• Customer Module: Form nhập liệu, Component Camera/Upload cho OCR.
• Product Module: Giao diện chọn sản phẩm (Card chọn UVL-IC/UVL-EL).
• Illustration Module: Hiển thị PDF (PDF Viewer) và nút tải về/Submit.

1.2. Shared

• UI Kit: Button, Input, Modal (theo Design System).
• API Client: Axios wrapper để gọi BFF.

2. Backend Components (BFF Service)

2.1. Controllers

• AuthController: Xác thực với Auth API.
• OCRController: Proxy ảnh sang OCR Service.
• IllustrationController: Tổng hợp dữ liệu -> Gọi PDF Engine -> Trả về URL/File.
• SubmissionController: Gửi dữ liệu cuối cùng về Core.

2.2. Services

• ClientService: Lưu/Lấy thông tin khách hàng từ Database.

3. Sơ đồ Component

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")

---

Biên soạn bởi: Agent mbl-landing-page-architecture