1. Requirement Summary

แผนภาพผังสถาปัตยกรรมและทราฟฟิกข้อมูล 5 เลเยอร์ (5-Tier Architecture Topology)

sequenceDiagram
    autonumber
    participant UI as Tier 1: Client SPA Layer (Browser UI)
    participant CDN as Tier 2: Cloudflare Edge CDN (300+ PoPs)
    participant API as Tier 3: Cloudflare Worker API Gateway
    participant Engine as Tier 4: Core Business Logic Engines
    participant DB as Tier 5: Cloudflare D1 SQL Database
    participant Local as Tier 1.5: LocalStorage Fallback Store

    Note over UI,Local: 1. การส่งคำขอและการเข้าถึงหน้าเว็บ (Static Assets Delivery)
    UI->>CDN: ส่งคำขอ HTTPS Request เพื่อโหลดหน้าเว็บและ Assets
    CDN-->>UI: ส่งคืน Static Bundle (HTML5, Vanilla CSS, ES6 JS) ด้วยความเร็ว Edge Caching

    Note over UI,DB: 2. การประมวลผลธุรกรรมและ API (Dynamic Data Processing)
    UI->>API: ส่ง REST API Request (/api/db/*) พร้อม Session Token
    API->>API: ตรวจสอบ Security Gateway, Rate Limit และ Input Validation
    API->>Engine: ส่งข้อมูลเข้าสู่ Core Engine (Ingestion, Costing, Comm, Filter, Reports)
    Engine->>DB: รันคำสั่ง Prepared SQL Statement สู่ตาราง Relational 15 ตาราง
    DB-->>Engine: ส่งคืนผลลัพธ์ชุดข้อมูลที่ผ่านการประมวลผล
    Engine-->>API: ประกอบ JSON Response กลับสู่เกตเวย์
    API-->>UI: ส่งคืน JSON Response อัปเดตหน้าจอแบบ Reactive Real-Time

    Note over UI,Local: 3. กลไกสำรองกรณี Offline (Offline Resilience Fallback)
    opt เครือข่ายขัดข้อง หรือ D1 มี Latency ชั่วคราว
        UI->>Local: สลับไปอ่านและเขียนข้อมูลบน LocalStorage Engine ทันที
        Local-->>UI: ส่งคืนข้อมูลและบันทึก User Preferences ใช้งานต่อได้ไม่สะดุด
    end
            

รายละเอียดโครงสร้างฟิลด์ ชนิดข้อมูล (Data Types), ข้อกำหนดคีย์ (Key Constraints), และคำอธิบายการใช้งานของทั้ง 15 ตารางในระบบ:

1 ขั้นตอนที่ 1: การเข้าสู่ระบบและการยืนยันตัวตน (Authentication & Role Gateway)

1.1 กรอก Username และ Password ในหน้าเข้าสู่ระบบ

เข้าสู่เว็บไซต์ https://dynamics369-sales.pages.dev จากนั้นกรอก Username (เช่น admin) และ Password (password123) เพื่อเข้าสู่ระบบผ่าน Security Gateway

Security Gateway • Sign In Screen Dynamics 369 Platform

Dynamics 369

Sales & Margin Intelligence

Username:

admin

Password:

••••••••

Sign In

2 ขั้นตอนที่ 2: การติดตามผลงานบน Dashboard (Executive Dashboard & Filter Intelligence)

3 ขั้นตอนที่ 3: การบันทึกและจัดการบิลขาย (Sales Transactions & Manual Entry)

4 ขั้นตอนที่ 4: การนำเข้าบิลขายจากไฟล์ Excel (Import Sales Orders & Deduplication)

5 ขั้นตอนที่ 5: การคำนวณ ตรวจสอบ และอนุมัติค่าคอมมิชชั่น (Commission Approval & Lock)

6 ขั้นตอนที่ 6: การดูรายงานตามสาขาสำหรับผู้บริหาร (Branch Report & Print Statement)

7 ขั้นตอนที่ 7: การดูรายงานสรุปผลงานระดับพนักงานขาย (Sales Report)

6 ขั้นตอนที่ 6: การดูกระดานจัดอันดับ Top 10 (Sales Staff, Branches, Products) บน Dashboard

1. กระบวนการยืนยันตัวตนและการกระจายสิทธิ์ (Authentication & Role Gateway Flow)

sequenceDiagram
    autonumber
    actor User as ผู้ใช้งานระบบ
    participant LoginUI as หน้าจอล็อกอิน
    participant Auth as ระบบตรวจสอบสิทธิ์
    participant Session as ตัวจัดการเซสชัน
    participant Audit as บันทึกประวัติระบบ

    User->>LoginUI: กรอก Username และ Password หรือกด 1-Click Login
    LoginUI->>Auth: ตรวจสอบความถูกต้องของบัญชีผู้ใช้
    alt ข้อมูลถูกต้อง
        Auth->>Session: สร้าง Session Token และบันทึก IP Address
        Auth->>Audit: บันทึก Audit Log เหตุการณ์ USER_LOGIN
        Auth-->>LoginUI: ผ่านการตรวจสอบ และส่งคืนสิทธิ์ตาม Role
        LoginUI-->>User: เปิดสิทธิ์เข้าใช้งานเมนูตามบทบาท (Admin, Manager, Sales, Executive)
    else ข้อมูลไม่ถูกต้อง
        Auth-->>LoginUI: แจ้งเตือนข้อผิดพลาด Invalid Credentials
        LoginUI-->>User: แสดงข้อความแจ้งเตือนรหัสผ่านไม่ถูกต้อง
    end
            

2. กระบวนการนำเข้าไฟล์ Excel และตรวจสอบความถูกต้อง (Excel Ingestion & Validation Flow)

sequenceDiagram
    autonumber
    actor User as Sales Staff หรือ Admin
    participant Dropzone as จุดวางไฟล์ Dropzone
    participant Parser as ตัวอ่านไฟล์ Excel
    participant DB as ฐานข้อมูล Cloudflare D1
    participant Staging as ตารางตรวจสอบ Staging

    User->>Dropzone: ลากไฟล์ Excel หลายสาขามาวางพร้อมกัน
    Dropzone->>Parser: แยก Sheet และอ่านข้อมูล Header และ Rows
    Parser->>DB: ตรวจสอบความถูกต้องของรหัสและชื่อพนักงานขาย
    alt ไม่พบพนักงานในระบบ
        DB-->>Parser: Error ไม่พบพนักงานขายใน Master Data
        Parser->>Staging: ทำเครื่องหมายแถวเป็น INVALID
    else พบพนักงานในระบบ
        Parser->>DB: ตรวจสอบเลขที่บิลซ้ำซ้อนในฐานข้อมูล
        alt บิลซ้ำในระบบ
            DB-->>Parser: Error พบเลขที่บิลซ้ำ
            Parser->>Staging: ทำเครื่องหมายแถวเป็น DUPLICATE
        else บิลถูกต้อง
            Parser->>DB: ดึงราคาขายและ Standard Cost % จาก Item Master
            Parser->>Staging: คำนวณ Margin และแสดงสถานะ VALID
        end
    end
    User->>Staging: กดยืนยันบันทึกข้อมูล Commit
    Staging->>DB: บันทึกลงตาราง sales_transactions และ sales_transaction_items
    DB-->>User: บันทึกข้อมูลสำเร็จ และอัปเดต Dashboard ทันที
            

3. กระบวนการคำนวณต้นทุนมาตรฐานและกำไรขั้นต้น (Costing & Margin Calculation Flow)

sequenceDiagram
    autonumber
    participant ItemLine as รายการสินค้า Line Item
    participant Master as ข้อมูลสินค้า Item Master
    participant Calc as ระบบคำนวณกำไร Margin Engine
    participant Header as หัวบิล Sales Order Header

    ItemLine->>Master: ดึงราคาขายมาตรฐาน และ Standard Cost %
    Master-->>Calc: ส่งค่า Price และ Cost % (เช่น 45%)
    Calc->>Calc: คำนวณต้นทุนต่อหน่วย Cost = Price * (Cost % / 100)
    Calc->>Calc: คำนวณยอดขายรวม Item Amount = Qty * Price
    Calc->>Calc: คำนวณต้นทุนรวม Item Cost = Qty * Cost
    Calc->>Calc: คำนวณกำไรขั้นต้น Item Margin = Amount - Cost
    Calc->>Header: รวมยอดสู่ระดับหัวบิล Total Amount, Total Cost, Total Margin
    Header-->>Header: อัปเดต % Margin ประจำบิลขาย
            

4. กระบวนการคำนวณคอมมิชชั่นและการล็อคบิลขาย (Commission Approval & Strict Lock Flow)

sequenceDiagram
    autonumber
    actor Manager as ผู้จัดการฝ่ายขาย
    participant CommUI as หน้าจออนุมัติคอมมิชชั่น
    participant CommEngine as ระบบคำนวณเงินรางวัล
    participant DB as ฐานข้อมูล Cloudflare D1
    participant Audit as บันทึกประวัติ Audit Trail

    DB->>CommEngine: รวบรวมยอด Margin ของบิลที่ยังไม่อนุมัติ
    CommEngine->>CommEngine: คำนวณ Commission = Total Margin * Rate %
    CommEngine->>DB: บันทึกงวดคอมมิชชั่น สถานะ PENDING_APPROVAL
    Manager->>CommUI: กดปุ่ม ตรวจสอบบิล (Review Sales)
    CommUI-->>Manager: แสดงรายการบิลขายทั้งหมดในงวด
    Manager->>CommUI: กดปุ่ม อนุมัติ (Approve)
    CommUI->>DB: ปรับสถานะรอบคอมมิชชั่นเป็น APPROVED
    CommUI->>DB: สั่งล็อคบิลขายในงวดนั้นทันที (Locked = True)
    CommUI->>Audit: บันทึกชื่อผู้อนุมัติ และ Timestamp ลง Audit Log
    DB-->>Manager: ยืนยันการอนุมัติสำเร็จ บิลขายถูกล็อคห้ามแก้ไขหรือลบ
            

5. กระบวนการประมวลผลตัวกรองช่วงเวลาและจัดอันดับ Top 10 (Dynamic Period & Leaderboard Flow)

sequenceDiagram
    autonumber
    actor User as ผู้บริหาร หรือ ผู้ใช้งาน
    participant FilterUI as ตัวกรอง ปี เดือน สาขา พนักงาน
    participant Engine as ตัวประมวลผลช่วงเวลา
    participant DB as ฐานข้อมูลยอดขาย
    participant Dash as หน้าจอแดชบอร์ด

    User->>FilterUI: เลือก ปี และ เดือน หรือเลือกสาขาเฉพาะ
    FilterUI->>Engine: ส่งเงื่อนไขการกรองช่วงวันที่ StartDate - EndDate
    Engine->>DB: ดึงรายการบิลขายที่ตรงกับเงื่อนไข
    DB-->>Engine: ส่งชุดข้อมูลบิลขายและรายการสินค้า
    Engine->>Engine: คำนวณ 5 Core KPIs (Target, Actual, % Achieved, Margin, Comm)
    Engine->>Engine: จัดอันดับ Top 10 พนักงานขาย, Top 10 สาขา, Top 10 สินค้า
    Engine->>Dash: อัปเดตกราฟิก แผนภูมิ และกระดานจัดอันดับแบบ Real-Time
    Dash-->>User: แสดงผลสรุปภาพรวมผู้บริหารทันที
            

6. กระบวนการออกรายงานผลงานและพิมพ์เอกสารทางการ (Performance Reporting & Print Flow)

sequenceDiagram
    autonumber
    actor User as ผู้บริหาร หรือ ผู้จัดการ
    participant UI as หน้ารายงาน Branch หรือ Sales Report
    participant Calc as ระบบประมวลผลรายงาน
    participant Print as เครื่องมือจัดหน้าพิมพ์ PDF

    User->>UI: เปิดเมนู Branch Report หรือ Sales Report
    UI->>Calc: รวบรวมข้อมูล Target, Actual Sales, Margin %, Commission
    Calc-->>UI: แสดงตาราง Matrix พร้อมหลอดแสดง % Achievement
    alt สั่งพิมพ์รายงานทางการ
        User->>UI: กดปุ่ม พิมพ์รายงานสรุปผลงาน (Print Statement)
        UI->>Print: จัดรูปแบบเอกสารรายงานขนาด A4 พร้อมหัวเอกสารทางการ
        Print->>Print: ใส่ช่องลงนามอนุมัติ 3 ฝ่าย (ผู้จัดทำ, ผู้จัดการ, ผู้อำนวยการ)
        Print-->>User: เปิดหน้าต่างพิมพ์ของเบราว์เซอร์เพื่อบันทึกเป็น PDF
    else ส่งออกไฟล์ Excel
        User->>UI: กดปุ่ม ส่งออก Excel
        UI-->>User: ดาวน์โหลดไฟล์ .xlsx สรุปยอดทันที
    end
            

7. กระบวนการจัดการข้อมูลหลักและคลังสินค้า (Master Data & Inventory Flow)

sequenceDiagram
    autonumber
    actor Admin as ผู้ดูแลระบบ Admin
    participant MasterUI as เมนูข้อมูลหลักและคลังสินค้า
    participant Validator as ตัวตรวจสอบ Foreign Key
    participant DB as ฐานข้อมูล Cloudflare D1
    participant Audit as บันทึกประวัติ Audit Log

    Admin->>MasterUI: เพิ่ม หรือแก้ไข สาขา, พนักงาน, สินค้า, หรือที่อยู่
    alt แก้ไขในตาราง Inline Edit
        Admin->>MasterUI: แก้ไขเป้ายอดขาย Target หรือเรท Commission ในตาราง
        MasterUI->>DB: บันทึกค่าใหม่ลงตาราง branches หรือ employees ทันที
    else เพิ่มข้อมูลใหม่ผ่าน Modal
        Admin->>MasterUI: กรอกแบบฟอร์มข้อมูลหลัก
        MasterUI->>Validator: ตรวจสอบความถูกต้องของรหัสและ Foreign Key
        Validator->>DB: บันทึกข้อมูลใหม่ลงฐานข้อมูล
    end
    DB->>Audit: บันทึกประวัติเหตุการณ์ MASTER_DATA_UPDATE
    DB-->>Admin: แสดงข้อความแจ้งเตือนบันทึกข้อมูลหลักสำเร็จ
            

8. กระบวนการตรวจสอบความปลอดภัยและประวัติการใช้งาน (Security, Session & Audit Flow)

sequenceDiagram
    autonumber
    actor User as ผู้ใช้งานในระบบ
    participant App as ระบบแอปพลิเคชัน
    participant Interceptor as ตัวดักจับความปลอดภัย
    participant AuditDB as ตาราง Audit Logs
    participant SessionDB as ตัวติดตาม Session และ IP
    actor Admin as ผู้ดูแลระบบ

    User->>App: ดำเนินกิจกรรม เช่น บันทึกบิล, นำเข้า Excel, อนุมัติ
    App->>Interceptor: ส่ง Event การกระทำของผู้ใช้
    Interceptor->>AuditDB: บันทึกเวลา Timestamp, ผู้ใช้, การกระทำ และรายละเอียด
    Interceptor->>SessionDB: อัปเดตสถานะ Active Session และหมายเลข IP Address
    Admin->>SessionDB: ตรวจสอบผู้ใช้งานที่กำลังออนไลน์
    alt พบพฤติกรรมผิดปกติ
        Admin->>SessionDB: กดปุ่ม Force Terminate ตัดการเชื่อมต่อ
        SessionDB->>App: ยกเลิก Session Token ของผู้ใช้นั้น
        App-->>User: บังคับ Logout และนำกลับสู่หน้าล็อกอินทันที
    end
            

9. กระบวนการสืบค้น SQL และการล้างข้อมูลธุรกรรม (SQL Console & Admin Wipe Flow)

sequenceDiagram
    autonumber
    actor Admin as ผู้ดูแลระบบ Admin
    participant SQLUI as หน้าจอ SQL Query Console
    participant D1 as ฐานข้อมูล Cloudflare D1
    participant WipeTool as เครื่องมือล้างข้อมูลใน Setting

    alt รันคำสั่ง SQL Query สด
        Admin->>SQLUI: เขียนคำสั่ง SELECT ... FROM ...
        SQLUI->>D1: ส่งคำสั่ง Query ไปประมวลผลที่ Cloudflare D1
        D1-->>SQLUI: ส่งชุดข้อมูลผลลัพธ์กลับมา
        SQLUI-->>Admin: แสดงผลลัพธ์เป็นตารางและปุ่มส่งออก JSON และ CSV
    else 1-Click Wipe Tool ล้างข้อมูลธุรกรรม
        Admin->>WipeTool: คลิกปุ่ม ล้างข้อมูลธุรกรรมและบันทึกประวัติ
        WipeTool->>Admin: แสดงกล่องยืนยันการล้างข้อมูลแบบ Double Confirm
        Admin->>WipeTool: กดยืนยันการล้างข้อมูล
        WipeTool->>D1: ล้างข้อมูลธุรกรรม บิลขาย คอมมิชชั่น และประวัติการใช้งาน
        WipeTool->>WipeTool: คงรักษาข้อมูลหลักสาขา พนักงาน และสินค้าไว้ครบถ้วน
        WipeTool-->>Admin: แจ้งเตือนสำเร็จ และรีเซ็ตหน้าจอแดชบอร์ดให้พร้อมใช้งานจริง
    end
            

แผนภาพผังกระบวนการทดสอบระบบ (Test Execution Process Flow)

sequenceDiagram
    autonumber
    actor QA as ผู้ทดสอบระบบ (QA / Tester)
    participant UI as ระบบ Dynamics 369 UI
    participant Validator as เครื่องมือตรวจความถูกต้อง
    participant DB as ฐานข้อมูล Cloudflare D1
    participant Audit as บันทึก System Audit Log
    actor Lead as หัวหน้าโครงการ (QA Lead / PM)

    QA->>UI: ขั้นตอนที่ 1: ตระเตรียมข้อมูลตั้งต้น (Master Data: สาขา, พนักงาน, สินค้า)
    UI->>DB: บันทึกข้อมูลหลักเข้าสู่ระบบให้พร้อมทดสอบ
    QA->>UI: ขั้นตอนที่ 2: รันกรณีทดสอบตามลำดับ (Suite 1 -> Suite 9: TC-01 ถึง TC-45)
    UI->>Validator: ส่งค่าและเงื่อนไขทดสอบไปประมวลผล
    Validator->>DB: บันทึกและดึงข้อมูลธุรกรรม
    Validator->>Audit: บันทึกประวัติการกระทำลง System Audit Logs
    Validator-->>UI: แสดงผลลัพธ์บนหน้าจอ (Actual Result)
    QA->>QA: ขั้นตอนที่ 3: เปรียบเทียบผลลัพธ์จริงกับผลลัพธ์ที่คาดหวัง (Expected Result)
    alt ผลลัพธ์ตรงกัน 100%
        QA->>UI: ทำเครื่องหมายสถานะเป็น PASS ✅
    else พบข้อผิดพลาด
        QA->>UI: บันทึก Defect Issue และแจ้งทีมพัฒนาแก้ไข ❌
    end
    QA->>Lead: ขั้นตอนที่ 4: สรุปรายงานผลการทดสอบครบ 45 Scenarios และลงนามอนุมัติ
    Lead-->>QA: อนุมัติผ่านการทดสอบพร้อมขึ้นระบบจริง (Production Release)
            

ขั้นตอนและแนวทางปฏิบัติในการทดสอบระบบ 5 ขั้นตอน (5-Step Test Execution Protocol)