np-dms/lcbp3

Fork 0

Files

T

admin 9c0978f3fa

Build and Deploy / deploy (push) Successful in 4m24s

Details

260311:1638 20260311:1700 n8n workflow

2026-03-11 16:38:49 +07:00

46 KiB

Raw Blame History

🖼️ UI/UX Wireframes & Screen Inventory — LCBP3-DMS v1.8.0

title: 'UI/UX Screen Inventory, Navigation Map, and Wireframes' version: 1.0.0 status: DRAFT owner: Nattanin Peancharoen (Product Owner) last_updated: 2026-03-11 related:

specs/01-Requirements/01-02-business-rules/01-02-03-ui-ux-rules.md
specs/01-Requirements/01-04-user-stories.md
specs/01-Requirements/01-05-acceptance-criteria.md

Note

Wireframes ในเอกสารนี้เป็น Low-fidelity ASCII/Text Wireframes เพื่อสื่อสาร Layout และ Component Hierarchy
สำหรับ High-fidelity Design ให้ใช้ Figma หรือ Shadcn/UI Components ตาม ADR-012

[🔓 Public]
│
└── /login                          → หน้า Login (Anonymous)
    └── /login/forgot-password      → ลืมรหัสผ่าน
    └── /login/change-password      → เปลี่ยนรหัสผ่านครั้งแรก (Force)

[🔒 Authenticated — App Shell (Sidebar + Navbar)]
│
├── /dashboard                      → หน้าหลัก (My Tasks + KPI)
│
├── /correspondences                → รายการ Correspondence
│   ├── /correspondences/new        → สร้างใหม่
│   └── /correspondences/:id        → รายละเอียด + Workflow
│
├── /rfas                           → รายการ RFA
│   ├── /rfas/new                   → สร้างใหม่
│   └── /rfas/:id                   → รายละเอียด + Workflow
│
├── /transmittals                   → รายการ Transmittal
│   ├── /transmittals/new           → สร้างใหม่ (รวม RFAs)
│   └── /transmittals/:id           → รายละเอียด
│
├── /drawings                       → Drawing Management
│   ├── /drawings/contract          → Contract Drawings
│   │   ├── /drawings/contract/new  → Upload ใหม่
│   │   └── /drawings/contract/:id  → รายละเอียด
│   └── /drawings/shop              → Shop Drawings
│       ├── /drawings/shop/new      → Upload ใหม่
│       └── /drawings/shop/:id      → รายละเอียด + RFA History
│
├── /circulations                   → Circulation Sheets (Internal)
│   ├── /circulations/new           → สร้างใหม่
│   └── /circulations/:id           → รายละเอียด + Assignees
│
├── /search                         → Full-text Search
│
├── /notifications                  → รายการ Notifications
│
├── /profile                        → ข้อมูลส่วนตัว + ตั้งค่า
│
[🔒 Admin Routes]
│
├── /admin/users                    → จัดการ Users (Org Admin+)
│   ├── /admin/users/new            → เพิ่ม User
│   └── /admin/users/:id/edit       → แก้ไข User + Role
│
├── /admin/organizations            → จัดการ Orgs (Superadmin)
│   └── /admin/organizations/new
│
├── /admin/projects                 → จัดการ Projects (Superadmin)
│   └── /admin/projects/:id/contracts
│
├── /admin/doc-numbering            → Document Number Config (Superadmin)
│
└── /admin/audit-logs               → Audit Log Viewer (Superadmin + OrgAdmin)

2. 🧩 App Shell Layout

┌─────────────────────────────────────────────────────────────────┐
│ NAVBAR                                                          │
│  [🏗️ LCBP3-DMS]     [Project: LCBP3 ▼]    [🔔 3] [👤 สมชาย ▼] │
└─────────────────────────────────────────────────────────────────┘
┌──────────────┬──────────────────────────────────────────────────┐
│ SIDEBAR      │ MAIN CONTENT AREA                                │
│              │                                                  │
│ 📊 Dashboard │                                                  │
│ 📨 Corres.   │   [Page Content Here]                            │
│ 📋 RFA       │                                                  │
│ 📦 Transmit  │                                                  │
│ 📐 Drawings  │                                                  │
│ 📄 Circulat. │                                                  │
│ 🔍 Search    │                                                  │
│              │                                                  │
│ ─────────── │                                                  │
│ [Admin ▼]   │                                                  │
│  👥 Users   │                                                  │
│  🏢 Orgs    │                                                  │
│  ⚙️ Config  │                                                  │
└──────────────┴──────────────────────────────────────────────────┘

Mobile: Sidebar → Collapsible Hamburger Drawer (ตาม UI-Rule 5.11)

3. 📋 Screen Inventory

Screen ID	Route	ชื่อหน้า	Primary Role	Priority
SCR-001	`/login`	Login	ทุก Role	🔴 Must
SCR-002	`/login/change-password`	Force Password Change	ทุก Role	🔴 Must
SCR-003	`/dashboard`	Dashboard	ทุก Role	🔴 Must
SCR-004	`/correspondences`	Correspondence List	Doc Control	🔴 Must
SCR-005	`/correspondences/new`	Create Correspondence	Doc Control	🔴 Must
SCR-006	`/correspondences/:id`	Correspondence Detail + Workflow	ทุก Role	🔴 Must
SCR-007	`/rfas`	RFA List	Doc Control	🔴 Must
SCR-008	`/rfas/new`	Create RFA	Doc Control	🔴 Must
SCR-009	`/rfas/:id`	RFA Detail + Workflow	ทุก Role	🔴 Must
SCR-010	`/transmittals`	Transmittal List	Doc Control	🟠 Should
SCR-011	`/transmittals/new`	Create Transmittal	Doc Control	🟠 Should
SCR-012	`/transmittals/:id`	Transmittal Detail	ทุก Role	🟠 Should
SCR-013	`/drawings/contract`	Contract Drawing List	Doc Control	🟠 Should
SCR-014	`/drawings/shop`	Shop Drawing List	Doc Control	🟠 Should
SCR-015	`/drawings/shop/:id`	Shop Drawing Detail	ทุก Role	🟠 Should
SCR-016	`/circulations`	Circulation List	Doc Control	🟠 Should
SCR-017	`/circulations/new`	Create Circulation	Doc Control	🟠 Should
SCR-018	`/circulations/:id`	Circulation Detail	ทุก Role	🟠 Should
SCR-019	`/search`	Search Results	ทุก Role	🟠 Should
SCR-020	`/notifications`	Notification Center	ทุก Role	🟡 Could
SCR-021	`/profile`	Profile & Settings	ทุก Role	🟠 Should
SCR-022	`/admin/users`	User Management	Org Admin+	🔴 Must
SCR-023	`/admin/organizations`	Organization Management	Superadmin	🔴 Must
SCR-024	`/admin/projects`	Project & Contract Mgmt	Superadmin	🔴 Must
SCR-025	`/admin/doc-numbering`	Document Number Config	Superadmin	🟠 Should
SCR-026	`/admin/audit-logs`	Audit Log Viewer	Org Admin+	🟠 Should

รวม: 26 หน้า (9 Must / 13 Should / 1 Could)

4. 🖼️ Wireframes — Key Screens

┌─────────────────────────────────────────────────────────┐
│                                                         │
│              🏗️ LCBP3-DMS                               │
│         ท่าเรือแหลมฉบัง เฟส 3                            │
│         Document Management System                      │
│                                                         │
│  ┌─────────────────────────────────────────────────┐    │
│  │                                                 │    │
│  │   ชื่อผู้ใช้ (Username)                          │    │
│  │   [________________________________]            │    │
│  │                                                 │    │
│  │   รหัสผ่าน (Password)                            │    │
│  │   [________________________________] [👁️]       │    │
│  │                                                 │    │
│  │   [ เข้าสู่ระบบ (Login)           ] ← Primary  │    │
│  │                                                 │    │
│  │   [ลืมรหัสผ่าน?]                                │    │
│  │                                                 │    │
│  └─────────────────────────────────────────────────┘    │
│                                                         │
│   ❌ Error Banner (แสดงเมื่อ Login ผิด):                 │
│   [⚠️ ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง]                  │
│                                                         │
│   v1.8.0 | Internal Use Only                           │
└─────────────────────────────────────────────────────────┘

Component Rules:
- Error Toast: แสดงทับ Form (ไม่บอกว่าอันไหนผิด — Security)
- Rate Limit: หลัง 5 ครั้ง → ปุ่ม Disabled 60 วินาที + Countdown
- Password: Toggle Show/Hide icon
- Auto-focus: Username field on load
- Enter key: Submit form

SCR-003: Dashboard

┌─ Dashboard ─────────────────────────────────────────────────────────┐
│                                                                      │
│  📊 ภาพรวม — [สมชาย จาก สค.] วันนี้ 11 มี.ค. 2569                  │
│                                                                      │
│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐   │
│  │ 📨 Corres.  │ │ 📋 RFA      │ │ ⏰ Overdue   │ │ 🔒 Security │   │
│  │             │ │             │ │             │ │             │   │
│  │  Pending    │ │  Pending    │ │  Tasks      │ │  Files      │   │
│  │    [12]     │ │    [5]      │ │    [3]      │ │  Scanned    │   │
│  │             │ │             │ │             │ │   [847]     │   │
│  │ ← ↑3 จากเมื่อ │ │ ← ↓1 จากเมื่อ │ │ ⚠️ เกินกำหนด │ │ 0 Threats  │   │
│  └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘   │
│                                                                      │
│  ═══ งานของฉัน (My Tasks) ════════════════════════════════════════  │
│                                                                      │
│  ┌──────────────────────────────────────────────────────────────┐   │
│  │ [Filter: ทั้งหมด ▼] [Status: Active ▼]   🔍 [ค้นหา...]      │   │
│  ├────────┬──────────────────┬──────────┬──────────┬────────────┤   │
│  │ ประเภท │ เลขที่/Subject   │ หน้าที่  │ กำหนด   │ การดำเนินการ│   │
│  ├────────┼──────────────────┼──────────┼──────────┼────────────┤   │
│  │ 📄 RFA │ LCBP3-RFA-STR.. │ Approve  │⚠️12 มี.ค.│ [ดำเนินการ]│   │
│  │ 📨 Cir │ สค.-กทท.-001... │ Review   │ 15 มี.ค. │ [ดำเนินการ]│   │
│  │ 📨 Cir │ สค.-กทท.-002... │ Info     │ 20 มี.ค. │ [ดำเนินการ]│   │
│  ├────────┴──────────────────┴──────────┴──────────┴────────────┤   │
│  │  แสดง 3 จาก 12 รายการ               [ดูทั้งหมด →]          │   │
│  └──────────────────────────────────────────────────────────────┘   │
│                                                                      │
└──────────────────────────────────────────────────────────────────────┘

Mobile (Card View):
┌───────────────────────┐
│ 📄 RFA                │
│ LCBP3-RFA-STR-0042    │
│ หน้าที่: Approve      │
│ ⚠️ กำหนด: 12 มี.ค.  │
│ [ดำเนินการ →]         │
└───────────────────────┘

SCR-004: Correspondence List

┌─ Correspondence ────────────────────────────────────────────────────┐
│                                                                      │
│  [+ สร้างใหม่]  [📥 รับเข้า (12)] [📤 ส่งออก (8)]  [ทั้งหมด (20)]   │
│                                                                      │
│  [ Filter: ประเภท ▼ ] [ Filter: สถานะ ▼ ] [ Filter: วันที่ ▼ ]       │
│  🔍 [ค้นหาเอกสาร...                              ]  [ล้าง Filter]   │
│                                                                      │
│  ┌─────────────────────────────────────────────────────────────┐    │
│  │☐ │ เลขที่เอกสาร        │ Subject    │ ผู้ส่ง │วันที่│สถานะ  │    │
│  ├──┼─────────────────────┼────────────┼────────┼──────┼───────┤    │
│  │☐ │ LCBP3-สค-กทท-L-001 │ ขอแบบงาน.  │ สค.    │11มีค│✅ ปิด │    │
│  │☐ │ LCBP3-กทท-สค-L-002 │ ตอบรับ...  │ กทท.   │10มีค│🔄 ดำเนิน│   │
│  │☐⚠️│ LCBP3-สค-กทท-L-003 │ ขอข้อมูล.. │ สค.    │08มีค│⏰ เกิน │    │
│  │  │ ...                 │            │        │      │       │    │
│  └─────────────────────────────────────────────────────────────┘    │
│  [< 1 2 3 >]                              แสดง 15/47 รายการ         │
│                                                                      │
└──────────────────────────────────────────────────────────────────────┘

Status Badges:
🟡 Draft | 🔵 Submitted | 🔄 In Review | ✅ Closed | ❌ Cancelled | ⏰ Overdue

SCR-005: Create Correspondence (Form)

┌─ สร้าง Correspondence ─────────────────────────────────────────────┐
│                                                                     │
│  Step 1: ข้อมูลทั่วไป ●─────── Step 2: แนบไฟล์ ○─── Step 3: ตรวจสอบ ○│
│                                                                     │
│  ┌───────────────────────────────────────────────────────────┐     │
│  │ ประเภทเอกสาร*          │ จาก (Originator)*               │     │
│  │ [Letter ▼]             │ [สค. (กำหนดอัตโนมัติ)]          │     │
│  │                        │                                  │     │
│  │ ถึง (To)*              │ สำเนา (CC)                      │     │
│  │ [เลือกองค์กร ▼][+ เพิ่ม]│ [เลือกองค์กร ▼][+ เพิ่ม]      │     │
│  │ Tag: กทท. ×            │                                  │     │
│  │                        │                                  │     │
│  │ Subject*                                                  │     │
│  │ [_____________________________________________]            │     │
│  │                        ○ ตัวอักษรที่เหลือ: 200            │     │
│  │                                                           │     │
│  │ เอกสารอ้างอิง (References)                                │     │
│  │ [🔍 ค้นหาเลขที่เอกสาร...           ]  [+ เพิ่ม]          │     │
│  │ หมวดหมู่ (Tags)                                           │     │
│  │ [🔍 ค้นหา Tag...] [construction] × [rfa] ×               │     │
│  │                                                           │     │
│  │ หมายเหตุ (Remark)                                         │     │
│  │ [_____________________________________________]            │     │
│  │ [_____________________________________________]            │     │
│  └───────────────────────────────────────────────────────────┘     │
│                                                                     │
│  ⚠️ Auto-save: บันทึกล่าสุด 13:28:45                               │
│                                                                     │
│  [← ยกเลิก]                    [บันทึก Draft]  [ต่อไป: แนบไฟล์ →]  │
└─────────────────────────────────────────────────────────────────────┘

SCR-005b: File Attachment Step

┌─ สร้าง Correspondence — แนบไฟล์ ───────────────────────────────────┐
│                                                                     │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │                                                             │   │
│  │     📎 ลากและวางไฟล์ที่นี่ หรือ [เลือกไฟล์]               │   │
│  │                                                             │   │
│  │     รองรับ: PDF, DWG, ZIP, DOCX, XLSX (สูงสุด 100MB/ไฟล์) │   │
│  │                                                             │   │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                     │
│  ไฟล์ที่แนบ:                                                         │
│  ┌────────────────────────────────────────────────────────────┐    │
│  │ ☑️ เอกสารหลัก │ 📄 drawing-v2.pdf        │ 2.3MB │ ✅ Scan OK│[🗑️]│
│  │ ☐ เอกสารหลัก │ 📐 detail.dwg             │ 1.1MB │ 🔄 Scanning│[🗑️]│
│  │ ☐ เอกสารหลัก │ 📦 supporting-docs.zip   │ 5.8MB │ ✅ Scan OK│[🗑️]│
│  └────────────────────────────────────────────────────────────┘    │
│                                                                     │
│  ℹ️ ☑️ = เอกสารหลัก (Main Document) — เลือกได้ 1 ไฟล์            │
│                                                                     │
│  ❌ Error File:                                                      │
│  ┌────────────────────────────────────────────────────────────┐    │
│  │ 🚨 malware-test.pdf │ ❌ VIRUS DETECTED — ไฟล์ถูกปฏิเสธ   │    │
│  └────────────────────────────────────────────────────────────┘    │
│                                                                     │
│  [← ย้อนกลับ]                  [บันทึก Draft]  [ต่อไป: ตรวจสอบ →] │
└─────────────────────────────────────────────────────────────────────┘

SCR-006: Correspondence Detail + Workflow

┌─ LCBP3-สค.-กทท.-LETTER-0001-68 ────────────────────────────────────┐
│  Subject: ขอข้อมูลแบบก่อสร้างเพิ่มเติม                              │
│  ส่งโดย: สค.  →  ถึง: กทท.   วันที่: 11 มี.ค. 2569                │
│  Status: 🔄 IN REVIEW                                               │
│                                                                      │
│  ┌──────────────────────────────────────────────────────────────┐   │
│  │ TAB: [ข้อมูล] [📎 เอกสารแนบ (3)] [🔄 Workflow] [📋 Circulation]│   │
│  └──────────────────────────────────────────────────────────────┘   │
│                                                                      │
│  ═══ Workflow Diagram ════════════════════════════════════════════  │
│                                                                      │
│    ✅ Submit     ──→    🔄 Review    ──→    ○ ปิด                    │
│    (สค.)               (กทท.)              (สค.)                    │
│    11 มี.ค.            กำลังดำเนินการ        รอ                     │
│    [คลิกดู Log]        [คลิกดูรายละเอียด]                           │
│                                                                      │
│  ═══ Action Panel (แสดงเฉพาะ Step ที่ Active) ══════════════════   │
│  ┌──────────────────────────────────────────────────────────────┐   │
│  │ 📋 งานของคุณ: Review เอกสารนี้และตอบกลับ                    │   │
│  │                                                              │   │
│  │ Comment / หมายเหตุ:                                          │   │
│  │ [___________________________________________________]        │   │
│  │ [___________________________________________________]        │   │
│  │                                                              │   │
│  │ [❌ ปฏิเสธ]  [✅ รับทราบ]  [📩 ตอบกลับ]                    │   │
│  └──────────────────────────────────────────────────────────────┘   │
│                                                                      │
│  Admin Only: [⚡ Force Proceed →]  [↩️ Revert ←]                   │
└──────────────────────────────────────────────────────────────────────┘

Workflow Step Popup (คลิก Step ที่ผ่านแล้ว):
┌─────────────────────────────────┐
│ ✅ Submit — 11 มี.ค. 2569      │
│ โดย: สมชาย ก. (สค.)            │
│ เวลา: 09:32 น.                 │
│ IP: 192.168.1.10               │
│ Comment: -                     │
└─────────────────────────────────┘

SCR-008: Create RFA (Form)

┌─ สร้าง RFA ────────────────────────────────────────────────────────┐
│                                                                     │
│  Step 1: ข้อมูล RFA ●── Step 2: Shop Drawing ○── Step 3: Transmittal ○│
│                                                                     │
│  ┌────────────────────────────────────────────────────────────┐    │
│  │ ประเภท RFA*                │ สาขา (Discipline)*             │    │
│  │ [Shop Drawing ▼]           │ [Structural (STR) ▼]           │    │
│  │                                                             │    │
│  │ ⚠️ เลขที่ RFA (Auto-generated)                             │    │
│  │ Preview: LCBP3-RFA-STR-0043  (จะออกเมื่อ Submit)          │    │
│  │                                                             │    │
│  │ Contract Drawing ที่อ้างอิง                                 │    │
│  │ [🔍 ค้นหาแบบคู่สัญญา...    ]  [+ เลือก]                  │    │
│  │ → CD-STR-001: Foundation Plan ×                            │    │
│  │                                                             │    │
│  │ หมายเหตุ (Remark)                                           │    │
│  │ [____________________________________________]              │    │
│  └────────────────────────────────────────────────────────────┘    │
│                                                                     │
│  [← ยกเลิก]                   [บันทึก Draft]  [ต่อไป: แนบแบบ →]   │
└─────────────────────────────────────────────────────────────────────┘

SCR-009: RFA Detail + Workflow

┌─ LCBP3-RFA-STR-0042 ───────────────────────────────────────────────┐
│  ประเภท: Shop Drawing | สาขา: Structural | Revision: A             │
│  ยื่นโดย: ผรม.1  →  ผ่าน Transmittal: LCBP3-TRM-0015              │
│  Status: 🔄 UNDER REVIEW (คคง.)                                    │
│                                                                     │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │ TAB: [ข้อมูล] [📎 Shop Drawing] [🔄 Workflow] [📝 Revision] │   │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                     │
│  ═══ Shop Drawing Viewer ════════════════════════════════════════  │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │                                                             │   │
│  │         [ 📄 PDF Viewer — Streaming ]                      │   │
│  │                                                             │   │
│  │  ⬅️ หน้า 2/15 ➡️         🔍 80%       [⬇️ ดาวน์โหลด] ← (ถ้ามี)│  │
│  │                                                             │   │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                     │
│  ═══ Action Panel (เฉพาะ Reviewer) ════════════════════════════   │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │ ผลการพิจารณา:                                               │   │
│  │ ○ Approved     ● Approved with Comments     ○ Rejected      │   │
│  │                                                             │   │
│  │ Comment (บังคับเมื่อ AW/C หรือ Rejected):                  │   │
│  │ [พบข้อผิดพลาดในรายละเอียด Connection Plate ...]           │   │
│  │                                                             │   │
│  │                          [ยกเลิก]  [✅ ยืนยันผลการพิจารณา]│   │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

Workflow Diagram สำหรับ RFA:
 ✅ Draft → ✅ Submitted → 🔄 TEAM Review → 🔄 คคง. Review → ○ APPROVED
                              (parallel)        (sequential)

SCR-017: Create Circulation Sheet

┌─ สร้างใบเวียน (Circulation Sheet) ─────────────────────────────────┐
│  อ้างอิง: LCBP3-กทท-สค-LETTER-0012 — ขอข้อมูลงวดงานที่ 3         │
│                                                                     │
│  ┌────────────────────────────────────────────────────────────┐    │
│  │ ผู้รับผิดชอบหลัก (Main — ต้องดำเนินการ)*                  │    │
│  │ [🔍 ค้นหาชื่อผู้ใช้...     ]  [+ เพิ่ม]                  │    │
│  │ → [👤 สมชาย ก. (หัวหน้า)] ×  [📅 กำหนด: 15 มี.ค.]       │    │
│  │                                                             │    │
│  │ ผู้ดำเนินการ (Action — ร่วมดำเนินการ)                     │    │
│  │ [🔍 ค้นหาชื่อผู้ใช้...    ]  [+ เพิ่ม]                   │    │
│  │ → [👤 วิชัย ส. (วิศวกร)] ×  [📅 กำหนด: 20 มี.ค.]        │    │
│  │                                                             │    │
│  │ รับทราบ (Information — เพื่อทราบเท่านั้น)                 │    │
│  │ [🔍 ค้นหาชื่อผู้ใช้...    ]  [+ เพิ่ม]                   │    │
│  │ → [👤 มานะ พ. (ผจก.)] ×                                   │    │
│  │                                                             │    │
│  │ หมายเหตุ / คำสั่งการ                                       │    │
│  │ [โปรดตรวจสอบและเตรียมข้อมูลงวดงานที่ 3...]                │    │
│  └────────────────────────────────────────────────────────────┘    │
│                                                                     │
│  [← ยกเลิก]                                [✅ สร้างและส่ง Notify] │
└─────────────────────────────────────────────────────────────────────┘

SCR-022: User Management (Admin)

┌─ จัดการผู้ใช้งาน ───────────────────────────────────────────────────┐
│  องค์กร: สค. (สำนักงานโครงการ)     [+ เพิ่ม User ใหม่]             │
│                                                                      │
│  🔍 [ค้นหาชื่อ / อีเมล...]  [Role: ทั้งหมด ▼]  [สถานะ: Active ▼]  │
│                                                                      │
│  ┌──────────────────────────────────────────────────────────────┐   │
│  │ ชื่อ              │ Username    │ Role           │ Status │   │   │
│  ├───────────────────┼─────────────┼────────────────┼────────┼───┤   │
│  │ สมชาย กิตติ      │ somchai.k   │ Document Ctrl  │ ✅     │[⚙️]│   │
│  │ วิชัย สมศรี      │ wichai.s    │ Editor         │ ✅     │[⚙️]│   │
│  │ มานะ พงษ์ดี      │ mana.p      │ Org Admin      │ ✅     │[⚙️]│   │
│  │ สมหญิง รักดี     │ somying.r   │ Viewer         │ ⛔     │[⚙️]│   │
│  └──────────────────────────────────────────────────────────────┘   │
│                                                                      │
└──────────────────────────────────────────────────────────────────────┘

User Edit Drawer (Slide in from right):
┌──────────────────────────┐
│ แก้ไขผู้ใช้งาน           │
│ ────────────────────     │
│ ชื่อ: [สมชาย กิตติ    ] │
│ Email: [somchai@...   ] │
│ Role: [Document Ctrl ▼] │
│ Status: ✅ Active [Toggle]│
│                          │
│ [รีเซ็ตรหัสผ่าน]         │
│ [❌ ยกเลิก] [✅ บันทึก]  │
└──────────────────────────┘

SCR-025: Document Number Config (Superadmin)

┌─ ตั้งค่าเลขที่เอกสาร ────────────────────────────────────────────────┐
│  Project: LCBP3  [+ เพิ่ม Format ใหม่]                               │
│                                                                       │
│  ┌─────────────────────────────────────────────────────────────────┐ │
│  │ ประเภท          │ Format Template                │ Reset  │ Actn │ │
│  ├─────────────────┼────────────────────────────────┼────────┼──────┤ │
│  │ Letter          │ {PROJECT}-{ORIG}-{RECP}-L-{SEQ:4}-{YY}│ Yearly│[✏️]│ │
│  │ RFI             │ {PROJECT}-{ORIG}-{RECP}-I-{SEQ:4}-{YY}│ Yearly│[✏️]│ │
│  │ RFA-Shop Dwg    │ {PROJECT}-RFA-{DISC}-{SEQ:4}   │ Never  │[✏️]│ │
│  │ Transmittal     │ {PROJECT}-{ORIG}-{RECP}-T-{SEQ:4}-{YY}│ Yearly│[✏️]│ │
│  └─────────────────────────────────────────────────────────────────┘ │
│                                                                       │
│  Edit Format Inline:                                                  │
│  ┌─────────────────────────────────────────────────────────────────┐ │
│  │ Template: [{PROJECT}-{ORIG}-{RECP}-L-{SEQ:4}-{YY}           ] │ │
│  │ Preview:  [LCBP3-สค.-กทท.-L-0001-68]                          │ │
│  │           ✅ Format ถูกต้อง                                    │ │
│  │ [ยกเลิก]                                          [✅ บันทึก]  │ │
│  └─────────────────────────────────────────────────────────────────┘ │
└───────────────────────────────────────────────────────────────────────┘

5. 🎨 Design System Reference

Color Tokens

/* Primary — ใช้กับ Action Buttons, Links */
--primary:       hsl(221, 83%, 53%);   /* Blue-600 */
--primary-hover: hsl(221, 83%, 45%);

/* Status Colors */
--status-draft:      hsl(48, 96%, 53%);   /* Yellow */
--status-submitted:  hsl(217, 91%, 60%);  /* Blue */
--status-review:     hsl(24, 95%, 53%);   /* Orange */
--status-approved:   hsl(142, 71%, 45%);  /* Green */
--status-rejected:   hsl(0, 84%, 60%);    /* Red */
--status-cancelled:  hsl(215, 14%, 55%);  /* Gray */
--status-overdue:    hsl(0, 84%, 60%);    /* Red (same as rejected) */

/* Background */
--bg-base:    hsl(222, 47%, 11%);  /* Dark Navy (dark mode base) */
--bg-surface: hsl(222, 47%, 16%);  /* Card surface */
--bg-muted:   hsl(215, 28%, 17%);  /* Muted sections */

Typography

font-family: 'Inter', 'Noto Sans Thai', sans-serif;

/* Scale */
--text-xs:  0.75rem;   /* 12px — Badge, Caption */
--text-sm:  0.875rem;  /* 14px — Table cell, Label */
--text-base:1rem;      /* 16px — Body */
--text-lg:  1.125rem;  /* 18px — Subheading */
--text-xl:  1.25rem;   /* 20px — Page title */
--text-2xl: 1.5rem;    /* 24px — Dashboard KPI */

Component States

Component	Default	Hover	Active	Disabled	Error
Button Primary	bg-primary	bg-primary-hover	scale-95	opacity-50	—
Input	border-gray-300	border-primary	border-primary ring	border-gray-200	border-red-500
Table Row	bg-surface	bg-muted	—	opacity-60	bg-red-50
Badge	per status color	—	—	—	—

6. 📱 Responsive Breakpoints

Breakpoint	Width	Behavior
`sm`	< 640px	Mobile: Sidebar → Drawer, Table → Cards
`md`	640-1024px	Tablet: Collapsed Sidebar
`lg`	> 1024px	Desktop: Full Sidebar

Mobile-specific Rules (UI-Rule 5.11):

ตาราง → Card View อัตโนมัติ
Sidebar → Collapsible Hamburger Drawer
Action Panel → Bottom Sheet แทน Inline Panel

7. ⚡ Interaction Patterns

Optimistic Updates (UI-Rule 5.10)

User กด "Approve" → UI เปลี่ยนสถานะทันที (ไม่รอ API)
   ↓
API ตอบกลับ Success → ยืนยัน UI ที่เปลี่ยนแล้ว
   ↓ (ถ้า API ล้มเหลว)
Rollback UI → แสดง Toast Error: "เกิดข้อผิดพลาด กรุณาลองใหม่"

Auto-save Draft (UI-Rule 5.12)

User พิมพ์ใน Form → debounce 2 วินาที → บันทึกลง localStorage
ปิด Browser → เปิดใหม่ → แสดง Banner: "พบ Draft ที่บันทึกไว้ [กู้คืน] [ทิ้ง]"

File Upload Progress

เลือกไฟล์ → แสดง Progress Bar → ClamAV Scan → ✅/❌

📝 Document Control

Version: 1.0.0 | Status: DRAFT
Created: 2026-03-11 | Owner: Nattanin Peancharoen
Next Step: สร้าง High-fidelity Mockup ใน Figma ตามโครงสร้างนี้
Figma Link: [TBD — สร้างใน Figma Community หรือ Self-hosted Penpot]
Classification: Internal Use Only

46 KiB Raw Blame History Unescape Escape