commit

plans/training-record-attachment-ui.md

@@ -0,0 +1,547 @@
+# Task: Refactor Attachment UI/UX for Training Record
+
+## Objective
+
+ปรับปรุง UI/UX ส่วนจัดการไฟล์แนบของระบบ Training Management System (TMS) ให้ใช้งานง่าย ลดความซ้ำซ้อน และสอดคล้องกับ Workflow ของระบบ
+
+ปัจจุบันหน้า Training Record มีทั้ง
+
+- อัปโหลดใบรับรอง
+- เอกสารประกอบ
+- Drag & Drop Area
+- รายการไฟล์แนบ
+
+ซึ่งทำให้ผู้ใช้งานเกิดความสับสน เนื่องจากมีพื้นที่ Upload มากกว่า 1 จุด และมีการแสดงผลที่ซ้ำซ้อน
+
+เป้าหมายคือ
+
+- แยกหน้าที่ของแต่ละส่วนให้ชัดเจน
+- ลด White Space
+- ปรับชื่อหัวข้อให้เข้าใจง่าย
+- ใช้ Component ร่วมกันทั้งระบบ
+- ไม่กระทบ Business Logic เดิม
+
+---
+
+# Project Rules
+
+ก่อนเริ่มแก้ไข ต้องตรวจสอบและปฏิบัติตาม
+
+- AGENTS.md
+- docs/AI_DEVELOPMENT_GUIDE.md
+- docs/PROJECT_ARCHITECTURE.md
+
+ต้องตรวจสอบ Implementation เดิมก่อนทุกครั้ง
+
+ห้ามสร้าง Component ใหม่ หากมี Shared Component อยู่แล้ว
+
+หากสามารถ Reuse ได้ ให้ Reuse
+
+---
+
+# Scope
+
+ตรวจสอบทั้งโปรเจกต์
+
+ห้ามแก้เฉพาะหน้าเดียว
+
+ค้นหาและตรวจสอบทุก Component ที่เกี่ยวข้องกับ
+
+- File Upload
+- Attachment
+- Attachment List
+- Certificate Upload
+- Dropzone
+- Training Record
+- Shared Upload Component
+
+หากเป็น Shared Component ให้แก้ที่ต้นทาง
+
+---
+
+# Current Problems
+
+## Problem 1
+
+หน้าเดียวกันมีพื้นที่ Upload มากกว่า 1 จุด
+
+ตัวอย่าง
+
+- อัปโหลดใบรับรอง
+- เอกสารประกอบ
+
+ผู้ใช้งานไม่ทราบว่าควร Upload ตรงไหน
+
+---
+
+## Problem 2
+
+ส่วน "เอกสารประกอบ"
+
+แสดงทั้ง
+
+- Drag & Drop
+- ไม่มีไฟล์แนบ
+
+พร้อมกัน
+
+ทำให้ UI ซ้ำซ้อน
+
+---
+
+## Problem 3
+
+เมื่อไม่มีไฟล์
+
+มีพื้นที่ว่างขนาดใหญ่โดยไม่จำเป็น
+
+ทำให้หน้าจอดูยาว
+
+---
+
+## Problem 4
+
+ชื่อ
+
+"เอกสารประกอบ"
+
+ไม่สื่อว่าเป็น
+
+รายการไฟล์ที่แนบแล้ว
+
+ผู้ใช้อาจเข้าใจผิดว่าเป็นอีกจุดสำหรับ Upload
+
+---
+
+# UX/UI Improvements
+
+## 1. เปลี่ยนชื่อหัวข้อ
+
+### เดิม
+
+เอกสารประกอบ
+
+### ใหม่
+
+ไฟล์ที่แนบ
+
+เหตุผล
+
+- เข้าใจง่าย
+- เป็นคำที่ผู้ใช้คุ้นเคย
+- สื่อว่าเป็นรายการไฟล์ที่มีอยู่แล้ว
+- ไม่ทำให้เข้าใจว่าเป็นพื้นที่ Upload
+
+---
+
+## 2. เปลี่ยนชื่อส่วน Upload
+
+หากปัจจุบันใช้
+
+อัปโหลดใบรับรอง
+
+ให้พิจารณาเปลี่ยนเป็น
+
+เพิ่มไฟล์แนบ
+
+หรือ
+
+อัปโหลดไฟล์
+
+หากไม่กระทบ Business Requirement
+
+แต่หาก Business Logic ระบุว่าต้องเป็น "ใบรับรอง"
+
+สามารถคงชื่อเดิมไว้ได้
+
+---
+
+## 3. แยกหน้าที่ของแต่ละส่วน
+
+### ส่วน Upload
+
+ใช้สำหรับ
+
+- Upload File
+- Drag & Drop
+
+เท่านั้น
+
+---
+
+### ส่วนไฟล์ที่แนบ
+
+ใช้สำหรับ
+
+- แสดงรายการไฟล์
+- Download
+- Delete (เฉพาะ Draft)
+
+ห้ามมี
+
+- Drag & Drop
+- Upload Area
+- Upload Button
+
+ภายในส่วนนี้
+
+---
+
+# Functional Requirements
+
+## Requirement 1
+
+Dropzone
+
+ต้องมีเพียงจุดเดียวในหน้า
+
+ห้ามมีหลาย Dropzone ที่ทำหน้าที่เดียวกัน
+
+---
+
+## Requirement 2
+
+Dropzone
+
+ต้องแสดงเฉพาะเมื่อระบบอนุญาตให้อัปโหลด
+
+เช่น
+
+- Create
+- Edit Draft
+
+หาก Record อยู่ในสถานะ
+
+- รอตรวจสอบ
+- อนุมัติ
+- ไม่อนุมัติ
+- ยกเลิก
+
+ให้ซ่อน Dropzone ทั้งหมด
+
+---
+
+## Requirement 3
+
+ส่วน "ไฟล์ที่แนบ"
+
+ต้องเป็น Read-only Area
+
+ยกเว้นกรณี Draft
+
+ที่สามารถลบไฟล์ได้
+
+---
+
+## Requirement 4
+
+เมื่อไม่มีไฟล์
+
+ให้แสดง
+
+📎 ไม่มีไฟล์แนบ
+
+เพียงข้อความเดียว
+
+ไม่ต้องมี Card สูง
+
+ไม่ต้องมีพื้นที่ว่างขนาดใหญ่
+
+---
+
+## Requirement 5
+
+เมื่อมีไฟล์
+
+แสดงเป็นรายการ
+
+ตัวอย่าง
+
+📄 Certificate.pdf
+
+PDF • 1.2 MB
+
+⬇ ดาวน์โหลด
+
+---
+
+📄 Activity.jpg
+
+JPG • 800 KB
+
+⬇ ดาวน์โหลด
+
+หากเป็น Draft
+
+แสดง
+
+🗑 ลบ
+
+ได้
+
+---
+
+## Requirement 6
+
+ลด White Space
+
+Card
+
+Padding
+
+Margin
+
+ให้เหมาะสม
+
+ไม่ควรมีพื้นที่ว่างจำนวนมากเมื่อไม่มีไฟล์
+
+---
+
+# Refactoring
+
+ตรวจสอบ
+
+- Duplicate Upload Component
+- Duplicate Attachment Component
+- Duplicate File List
+- Duplicate Empty State
+
+หากสามารถรวมเป็น Shared Component ได้
+
+ให้ Refactor
+
+โดย
+
+ห้ามเปลี่ยน Business Logic
+
+---
+
+# Do NOT
+
+ห้าม
+
+- เปลี่ยน Database
+- เปลี่ยน API
+- เปลี่ยน Permission
+- เปลี่ยน Workflow
+- เปลี่ยน Validation
+- เปลี่ยน Business Rule
+
+งานนี้เป็น
+
+UI/UX Refactor
+
+เท่านั้น
+
+---
+
+# Expected UI
+
+## Create / Edit Draft
+
+────────────────────
+
+เพิ่มไฟล์แนบ
+
+[ Drag & Drop ]
+
+────────────────────
+
+ไฟล์ที่แนบ
+
+📄 Certificate.pdf
+
+📄 Activity.jpg
+
+────────────────────
+
+---
+
+## ไม่มีไฟล์
+
+────────────────────
+
+ไฟล์ที่แนบ
+
+📎 ไม่มีไฟล์แนบ
+
+────────────────────
+
+---
+
+## Waiting / Approved
+
+────────────────────
+
+ไฟล์ที่แนบ
+
+📄 Certificate.pdf
+
+📄 Activity.jpg
+
+────────────────────
+
+ไม่มี Dropzone
+
+---
+
+# Acceptance Criteria
+
+ต้องผ่านทั้งหมด
+
+✅ ไม่มี Dropzone ซ้ำในหน้าเดียว
+
+✅ ส่วน "ไฟล์ที่แนบ" ไม่มี Upload UI
+
+✅ Upload แสดงเฉพาะสถานะที่อนุญาต
+
+✅ ไม่มี White Space ขนาดใหญ่เมื่อไม่มีไฟล์
+
+✅ ชื่อหัวข้อใหม่เป็น "ไฟล์ที่แนบ"
+
+✅ หากมีไฟล์ แสดงรายการไฟล์จริง
+
+✅ หากไม่มีไฟล์ แสดง "📎 ไม่มีไฟล์แนบ"
+
+✅ Download ใช้งานได้
+
+✅ Delete ใช้งานได้เฉพาะ Draft
+
+✅ Responsive ทุกขนาดหน้าจอ
+
+---
+
+# Regression Testing
+
+ทดสอบ
+
+## Create
+
+- ไม่มีไฟล์
+- มีไฟล์
+- Upload
+
+---
+
+## Edit Draft
+
+- Upload
+- Delete
+- Download
+
+---
+
+## Waiting for Review
+
+- Download
+
+---
+
+## Approved
+
+- Download
+
+---
+
+## Rejected
+
+ตรวจสอบตาม Business Rule
+
+---
+
+## Empty State
+
+ไม่มีไฟล์
+
+---
+
+## Multiple Files
+
+หลายไฟล์
+
+---
+
+## Responsive
+
+Desktop
+
+Tablet
+
+Mobile
+
+---
+
+# Deliverables
+
+หลังแก้ไขเสร็จ
+
+สร้างรายงาน
+
+docs/reports/training-record-attachment-ui-refactor-report.md
+
+รายงานต้องประกอบด้วย
+
+## 1. Scope
+
+Component และหน้าที่ได้รับผลกระทบ
+
+## 2. Files Changed
+
+รายการไฟล์ทั้งหมดที่แก้ไข
+
+## 3. Before vs After
+
+สรุปการเปลี่ยนแปลง UI
+
+## 4. Refactoring Summary
+
+Component ที่รวมเข้าด้วยกัน
+
+Component ที่ถูก Reuse
+
+## 5. Functional Verification
+
+ผลการทดสอบแต่ละ Workflow
+
+- Create
+- Edit Draft
+- Waiting
+- Approved
+- Rejected
+
+## 6. Responsive Testing
+
+Desktop
+
+Tablet
+
+Mobile
+
+## 7. Regression Testing
+
+สรุปผลการทดสอบทั้งหมด
+
+## 8. Risks
+
+ความเสี่ยงที่พบ
+
+## 9. Recommendations
+
+ข้อเสนอแนะเพิ่มเติมสำหรับการปรับปรุงในอนาคต
+
+---
+
+# Final Checklist
+
+ก่อนส่งมอบงาน ต้องตรวจสอบให้ครบทุกข้อ
+
+- ใช้ Shared Component หากมีอยู่แล้ว
+- ไม่มี Upload Area ซ้ำ
+- เปลี่ยนหัวข้อจาก "เอกสารประกอบ" เป็น "ไฟล์ที่แนบ"
+- แยกหน้าที่ Upload และ File List ชัดเจน
+- แสดง Empty State อย่างเหมาะสม
+- ลด White Space
+- UI ทุกหน้ามีความสอดคล้องกัน
+- ไม่กระทบ Business Logic
+- ไม่เกิด Regression
+- Report ถูกสร้างครบถ้วน