# 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 ถูกสร้างครบถ้วน