admin
766 lines
58 KiB
Markdown
766 lines
58 KiB
Markdown
# 🖼️ UI/UX Wireframes & Screen Inventory — LCBP3-DMS v1.8.1
|
||
|
||
---
|
||
|
||
title: 'UI/UX Screen Inventory, Navigation Map, and Wireframes'
|
||
version: 1.8.1
|
||
status: updated
|
||
owner: Nattanin Peancharoen (Product Owner)
|
||
last_updated: 2026-03-24
|
||
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
|
||
- specs/01-Requirements/01-06-edge-cases-and-rules.md
|
||
- specs/06-Decision-Records/ADR-012-ui-components.md
|
||
- specs/06-Decision-Records/ADR-019-hybrid-identifier-strategy.md
|
||
|
||
---
|
||
|
||
> [!NOTE]
|
||
> Wireframes ในเอกสารนี้เป็น **Low-fidelity ASCII/Text Wireframes** เพื่อสื่อสาร Layout และ Component Hierarchy
|
||
> สำหรับ High-fidelity Design ให้ใช้ Figma หรือ Shadcn/UI Components ตาม ADR-012
|
||
|
||
---
|
||
|
||
## 1. 🗺️ Navigation Map (Site Map)
|
||
|
||
```
|
||
[🔓 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/:uuid → รายละเอียด + Workflow
|
||
│
|
||
├── /rfas → รายการ RFA
|
||
│ ├── /rfas/new → สร้างใหม่
|
||
│ ├── /rfas/:uuid → รายละเอียด + Workflow
|
||
│ ├── /rfas/:uuid/edit → แก้ไข Draft RFA (ใหม่!)
|
||
│ └── /rfas/search → ค้นหาและกรอง RFA (ใหม่!)
|
||
│
|
||
├── /transmittals → รายการ Transmittal
|
||
│ ├── /transmittals/new → สร้างใหม่ (รวม RFAs)
|
||
│ └── /transmittals/:uuid → รายละเอียด
|
||
│
|
||
├── /drawings → Drawing Management
|
||
│ ├── /drawings/contract → Contract Drawings
|
||
│ │ ├── /drawings/contract/new → Upload ใหม่
|
||
│ │ └── /drawings/contract/:uuid → รายละเอียด
|
||
│ └── /drawings/shop → Shop Drawings
|
||
│ ├── /drawings/shop/new → Upload ใหม่
|
||
│ └── /drawings/shop/:uuid → รายละเอียด + RFA History
|
||
│
|
||
├── /circulations → Circulation Sheets (Internal)
|
||
│ ├── /circulations/new → สร้างใหม่
|
||
│ └── /circulations/:uuid → รายละเอียด + 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/:uuid` | 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/:uuid` | RFA Detail + Workflow | ทุก Role | 🔴 Must |
|
||
| SCR-008b | `/rfas/:uuid/edit` | Edit Draft RFA | Doc Control | 🔴 Must |
|
||
| SCR-008c | — (action modal) | Cancel Draft RFA | Doc Control | 🔴 Must |
|
||
| SCR-008d | `/rfas/search` | RFA Search & Filter | Doc Control | 🔴 Must |
|
||
| SCR-010 | `/transmittals` | Transmittal List | Doc Control | 🟠 Should |
|
||
| SCR-011 | `/transmittals/new` | Create Transmittal | Doc Control | 🟠 Should |
|
||
| SCR-012 | `/transmittals/:uuid` | 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 |
|
||
|
||
**รวม:** 29 หน้า (12 Must / 14 Should / 1 Could)
|
||
|
||
---
|
||
|
||
## 4. 🖼️ Wireframes — Key Screens
|
||
|
||
### SCR-001: Login Page
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ │
|
||
│ 🏗️ 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-008b: Edit Draft RFA
|
||
|
||
```
|
||
┌─ แก้ไข RFA (Draft) ───────────────────────────────────────────────┐
|
||
│ LCBP3-RFA-STR-0042 | สถานะ: 🟡 DRAFT | แก้ไขล่าสุด: 13:28:45 │
|
||
│ │
|
||
│ ⚠️ สามารถแก้ไขได้เฉพาะในสถานะ Draft เท่านั้น │
|
||
│ │
|
||
│ ┌─────────────────────────────────────────────────────────────┐ │
|
||
│ │ Subject* │ │
|
||
│ │ [ขออนุมัติแก้ไขแบบ Shop Drawing ส่วน Foundation...] │ │
|
||
│ │ │ │
|
||
│ │ Body/Description* │ │
|
||
│ │ [เนื่องจากมีการเปลี่ยนแปลงรายละเอียด Connection Plate...] │ │
|
||
│ │ │ │
|
||
│ │ Remarks │ │
|
||
│ │ [_____________________________________________] │ │
|
||
│ │ │ │
|
||
│ │ 📋 RFA Details (JSON Schema v1) — ไม่สามารถแก้ไขได้ │ │
|
||
│ │ Drawing Count: 1 | Discipline: Structural | Due: 20 มี.ค. │ │
|
||
│ └─────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 📎 Shop Drawing (ไม่สามารถเปลี่ยนได้): │
|
||
│ ☑️ CD-STR-001-Foundation-RevA.pdf (2.3MB) ✅ Scan OK │
|
||
│ │
|
||
│ [บันทึก Draft] [Submit →] [ยกเลิก] │
|
||
└─────────────────────────────────────────────────────────────────────┘
|
||
|
||
Validation:
|
||
- ถ้าสถานะ ≠ DRAFT → Redirect ไปหน้า detail พร้อม error toast
|
||
- Shop Drawing Revision ไม่สามารถเปลี่ยน (EC-RFA-001)
|
||
- Auto-save ทุก 2 วินาที
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-008c: Cancel Draft RFA (Modal)
|
||
|
||
```
|
||
┌─ ยกเลิก RFA (Draft) ───────────────────────────────────────────────┐
|
||
│ LCBP3-RFA-STR-0042 | สถานะ: 🟡 DRAFT │
|
||
│ │
|
||
│ ⚠️ การยกเลิกจะทำให้ Shop Drawing Revision นี้สามารถสร้าง RFA ใหม่ได้ │
|
||
│ │
|
||
│ ┌─────────────────────────────────────────────────────────────┐ │
|
||
│ │ เหตุผลการยกเลิก* │ │
|
||
│ │ [_____________________________________________] │ │
|
||
│ │ │ │
|
||
│ │ เลือกเหตุผล: │ │
|
||
│ │ ○ ข้อมูลไม่ครบถ้วย │ │
|
||
│ │ ○ แก้ไขข้อมูลผิดพลาดหลายครั้ง │ │
|
||
│ │ ○ ไม่ต้องการส่งออกแล้ว │ │
|
||
│ │ ○ อื่นๆ (ระบุ) │ │
|
||
│ │ │ │
|
||
│ │ [คำอธิบายเพิ่มเติม...] │ │
|
||
│ └─────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 🔔 ผู้ที่เกี่ยวข้องจะได้รับแจ้งเตือน: │
|
||
│ - Document Control ที่สร้าง RFA (Email + In-App) │
|
||
│ - Admin ขององค์กร (ถ้ามีการตั้งค่า) │
|
||
│ │
|
||
│ [← กลับ] [✅ ยืนยันการยกเลิก] │
|
||
└─────────────────────────────────────────────────────────────────────┘
|
||
|
||
Post-cancel Flow:
|
||
- RFA status → CANCELLED
|
||
- Shop Drawing Revision.available → true
|
||
- Audit Log: CANCELLED + reason + user + timestamp
|
||
- Redirect ไปหน้า RFA List พร้อม success toast
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-008d: RFA Search & Filter
|
||
|
||
```
|
||
┌─ ค้นหาและกรอง RFA ───────────────────────────────────────────────────┐
|
||
│ 🔍 [ค้นหา RFA...] [ค้นหา] [ตั้งค่ากรอง] │
|
||
│ │
|
||
│ ┌─────────────────────────────────────────────────────────────┐ │
|
||
│ │ 📁 Project: [LCBP3 ▼] │ │
|
||
│ │ 📊 Status: [ทั้งหมด ▼] 🟡DRAFT 🔵SUBMITTED 🔄FAP ✅APPROVED ❌REJECTED │ │
|
||
│ │ 📅 Revision: [ทั้งหมด ▼] CURRENT OLD ALL │ │
|
||
│ │ 🏢 Originator: [ทั้งหมด ▼] [สค.] [กทท.] [ผรม.] [คคง.] │ │
|
||
│ └─────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ พบ 15 รายการ (แสดงตามสิทธิ์ของคุณ) │
|
||
│ │
|
||
│ ┌─────────────────────────────────────────────────────────────┐ │
|
||
│ │ ☐ │ เลขที่ │ Subject | สถานะ | วันที่ │ │ │
|
||
│ ├──┼─────────────┼──────────────────────┼────────┼──────────┤ │
|
||
│ │ ☐ │ RFA-STR-0042 │ Foundation Plan Rev.A│ 🟡DRAFT │ 10 มี.ค. │[✏️]│ │
|
||
│ │ ☐ │ RFA-STR-0043 │ Column Detail Rev.B │ 🔵SUBMIT│ 12 มี.ค. │[👁️]│ │
|
||
│ │ ☐ │ RFA-STR-0041 │ Beam Design Rev.A │ ✅APPROV│ 08 มี.ค. │[👁️]│ │
|
||
│ │ ☐ │ RFA-STR-0040 │ Slab Detail Rev.A | ❌REJECT│ 05 มี.ค. │[✏️]│ │
|
||
│ └────────┴─────────────┴──────────────────────┴────────┴──────────┘ │
|
||
│ │
|
||
│ [< 1 2 >] แสดง 10/15 [ส่งออก Excel] │
|
||
│ │
|
||
│ ⚠️ หมายเหตุ RBAC: │
|
||
│ - DRAFT → เห็นเฉพาะ originator organization │
|
||
│ - สถานะอื่น → เห็นตาม project/contract scope │
|
||
└─────────────────────────────────────────────────────────────────────┘
|
||
|
||
Advanced Filters (Collapsible):
|
||
┌─ กรองขั้นสูง ───────────────────────────────────────────────────┐
|
||
│ 📅 วันที่สร้าง: [____] ถึง [____] │
|
||
│ 👤 ผู้สร้าง: [ค้นหา...] │
|
||
│ 📝 มีคำว่า: [ค้นหา...] │
|
||
│ 🏷️ Tags: [foundation] [column] [beam] │
|
||
│ [ค้นหา] [ล้าง] │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
### 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
|
||
|
||
```css
|
||
/* 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-fap: hsl(24, 95%, 53%); /* Orange */
|
||
--status-approved: hsl(142, 71%, 45%); /* Green */
|
||
--status-approved-wc: hsl(142, 71%, 35%); /* Green Dark */
|
||
--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
|
||
|
||
```css
|
||
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 | — |
|
||
| Button Secondary| bg-surface | bg-muted | scale-95 | opacity-50 | — |
|
||
| Button Danger | bg-red-500 | bg-red-600 | 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.8.1 | **Status:** updated
|
||
- **Created:** 2026-03-11 | **Updated:** 2026-03-24 | **Owner:** Nattanin Peancharoen
|
||
- **Changes:** Added SCR-008b~008d (Edit/Cancel/Search RFA), Updated routes to use UUID (ADR-019), Added new status colors and button variants, Sync with US-012a~012c and AC-RFA-007~009
|
||
- **Next Step:** สร้าง High-fidelity Mockup ใน Figma ตามโครงสร้างนี้
|
||
- **Figma Link:** [TBD — สร้างใน Figma Community หรือ Self-hosted Penpot]
|
||
- **Classification:** Internal Use Only
|