commit

plans/employee-directory-redesign.md

@@ -0,0 +1,634 @@
+# Prompt: Employee Directory UX/UI Redesign
+
+## Objective
+
+ปรับปรุงหน้า **Employee Directory (รายชื่อพนักงานทั้งหมด)** ให้ใช้งานได้ดีขึ้นสำหรับระบบ Training Management System (TMS)
+
+เป้าหมายคือ
+
+- ลดพื้นที่ว่างด้านบน
+- แสดงข้อมูลได้มากขึ้นโดยไม่ต้อง Scroll
+- จัดลำดับข้อมูลใหม่ให้อ่านง่าย
+- ปรับ Data Table ให้เป็น Enterprise UX
+- ยังคงใช้ Design System ปัจจุบัน (shadcn/ui + TailwindCSS)
+- ห้ามเปลี่ยน Business Logic
+- ห้ามเปลี่ยน API
+- ห้ามเปลี่ยน Permission
+- ห้ามแก้ไข Workflow
+
+---
+
+# Requirements
+
+## 1. Header
+
+ปรับ Header ใหม่
+
+Desktop
+
+```
+Dashboard / Employee Directory
+
+รายชื่อพนักงานทั้งหมด
+เรียกดูข้อมูลพนักงานและข้อมูลชั่วโมงการอบรมรายบุคคล
+
+                                    [+ สร้างรายชื่อพนักงาน]
+                                    [Import รายชื่อพนักงาน]
+```
+
+### Requirements
+
+- ลด Vertical Space
+- ปุ่มอยู่ด้านขวา
+- Responsive
+- Mobile ให้ปุ่มลงบรรทัดใหม่
+
+---
+
+## 2. Search & Filter Toolbar
+
+เปลี่ยน Toolbar ใหม่
+
+Desktop
+
+```
+[ Search................................ ]
+
+[ บริษัท ▼ ]
+[ ฝ่าย ▼ ]
+[ สถานะ ▼ ]
+[ รีเซ็ตตัวกรอง ]
+```
+
+### Search
+
+Placeholder
+
+```
+ค้นหารหัสพนักงาน ชื่อพนักงาน...
+```
+
+Search Width
+
+Desktop
+
+```
+ประมาณ 420-520px
+```
+
+### Filter
+
+แสดงในแถวเดียว
+
+ประกอบด้วย
+
+- Company
+- Department
+- Status
+
+ถ้ามี Filter อื่นอยู่แล้ว
+
+ให้คงไว้
+
+### Reset Filter
+
+เพิ่มปุ่ม
+
+```
+รีเซ็ตตัวกรอง
+```
+
+ใช้ Button Ghost
+
+---
+
+## 3. Remove View Button
+
+ตรวจสอบ
+
+```
+View
+```
+
+ด้านขวาของ Table
+
+### กรณี
+
+ไม่มีการสลับ
+
+- Card View
+- Compact View
+- List View
+
+ให้ลบออก
+
+### หากเป็น Column Visibility
+
+ให้เปลี่ยนข้อความเป็น
+
+```
+แสดงคอลัมน์
+```
+
+---
+
+## 4. Summary Section
+
+เพิ่ม Summary Cards
+
+อยู่ระหว่าง
+
+Toolbar
+
+กับ
+
+Data Table
+
+Layout
+
+Desktop
+
+```
+┌────────────┐
+│ พนักงานทั้งหมด │
+│ 1,254 คน   │
+└────────────┘
+
+┌────────────┐
+│ อนุมัติแล้ว │
+│ 950 รายการ │
+└────────────┘
+
+┌────────────┐
+│ รอตรวจสอบ │
+│ 48 รายการ │
+└────────────┘
+
+┌────────────┐
+│ ชั่วโมงรวม │
+│ 28,560 ชม. │
+└────────────┘
+```
+
+Requirements
+
+- ใช้ Card ขนาดเล็ก
+- Border ตาม Design System
+- ไม่มี Shadow หนัก
+- Responsive
+
+Mobile
+
+2 Columns
+
+---
+
+## 5. Data Table Header
+
+ปัจจุบัน
+
+Header มี 2 ชั้น
+
+```
+ชั่วโมงการอบรม
+
+อนุมัติแล้ว
+รอตรวจสอบ
+ไม่อนุมัติ
+รวม
+```
+
+ให้ปรับเหลือ
+
+```
+รหัสพนักงาน
+
+ชื่อพนักงาน
+
+อนุมัติแล้ว
+
+รอตรวจสอบ
+
+ไม่อนุมัติ
+
+รวมชั่วโมง
+
+จัดการ
+```
+
+ไม่ต้องมี Header ซ้อน
+
+---
+
+## 6. Column Order
+
+กำหนดลำดับใหม่
+
+```
+รหัสพนักงาน
+
+ชื่อพนักงาน
+
+อนุมัติแล้ว
+
+รอตรวจสอบ
+
+ไม่อนุมัติ
+
+รวมชั่วโมง
+
+จัดการ
+```
+
+---
+
+## 7. Employee Information
+
+ภายใน Column
+
+ชื่อพนักงาน
+
+แสดง
+
+```
+สมชาย ใจดี
+somchai@example.com
+```
+
+Email
+
+ใช้
+
+```
+text-xs
+text-muted-foreground
+```
+
+### Data Consistency
+
+ห้ามบาง Row
+
+แสดง Company
+
+บาง Row
+
+แสดง Email
+
+ต้องเป็นรูปแบบเดียวกันทั้งระบบ
+
+---
+
+## 8. Numeric Columns
+
+Column
+
+- Approved
+- Pending
+- Rejected
+- Total
+
+ใช้
+
+```
+tabular-nums
+text-right
+```
+
+### Total Column
+
+ให้เด่นกว่า Column อื่น
+
+เช่น
+
+```
+font-semibold
+```
+
+---
+
+## 9. Action Column
+
+ปุ่ม
+
+```
+⋮
+```
+
+เพิ่มพื้นที่
+
+ประมาณ
+
+```
+56-64px
+```
+
+เพื่อให้กดง่าย
+
+---
+
+## 10. Table Row Hover
+
+เพิ่ม Hover
+
+```
+hover:bg-muted/30
+```
+
+ไม่เปลี่ยนสีแรง
+
+---
+
+## 11. Sticky Header
+
+หาก Data Table รองรับ
+
+ให้เปิด
+
+Sticky Header
+
+เพื่อให้ Scroll แล้ว Header ไม่หาย
+
+---
+
+## 12. Responsive
+
+Desktop
+
+แสดง Table เต็ม
+
+Mobile
+
+ใช้
+
+```
+overflow-x-auto
+```
+
+Table
+
+```
+min-width
+```
+
+เพื่อไม่ให้ข้อมูลพัง
+
+---
+
+## 13. Pagination
+
+ปรับ Footer
+
+จาก
+
+```
+ทั้งหมด 1,254 รายการ
+
+จำนวนต่อหน้า
+
+หน้า 1 จาก 126
+```
+
+เป็น
+
+```
+1,254 รายการ
+
+10 ต่อหน้า
+
+1 / 126
+```
+
+หาก Design System รองรับ
+
+---
+
+## 14. Spacing
+
+ลด Margin
+
+ระหว่าง
+
+Header
+
+Toolbar
+
+Summary
+
+Table
+
+ให้ข้อมูลอยู่เหนือ Fold มากขึ้น
+
+---
+
+## 15. Accessibility
+
+ตรวจสอบ
+
+- Button
+- Search
+- Select
+- Action Menu
+
+ให้มี
+
+aria-label
+
+ครบถ้วน
+
+---
+
+## 16. Performance
+
+ห้าม
+
+- Fetch ใหม่โดยไม่จำเป็น
+- Render ใหม่ทั้ง Table
+- ทำให้ Pagination ช้าลง
+
+---
+
+## 17. Business Logic
+
+ห้ามแก้ไข
+
+- API
+- Query
+- Mutation
+- Validation
+- Permission
+- Role
+- Authorization
+- Pagination Logic
+- Search Logic
+- Filter Logic
+
+ให้ปรับเฉพาะ UX/UI
+
+---
+
+# UI Style Guide
+
+ใช้ Design System เดิมทั้งหมด
+
+- shadcn/ui
+- TailwindCSS
+- Card
+- Button
+- Badge
+- Input
+- Select
+- DropdownMenu
+
+สี
+
+ใช้ Theme เดิม
+
+ห้าม Hardcode สี
+
+Spacing
+
+ใช้ Tailwind Spacing เดิมของระบบ
+
+Typography
+
+ใช้ Typography เดิม
+
+---
+
+# Files
+
+ตรวจสอบและแก้ไขเฉพาะไฟล์ที่เกี่ยวข้อง เช่น
+
+- Employee Directory Page
+- Employee Table
+- Toolbar
+- Header
+- Summary Card
+- Pagination
+- Columns
+
+หากสามารถแยก Component ได้
+
+ให้แยก Component
+
+เช่น
+
+```
+EmployeeDirectoryHeader
+
+EmployeeDirectoryToolbar
+
+EmployeeDirectorySummary
+
+EmployeeDirectoryTable
+```
+
+---
+
+# Testing
+
+ตรวจสอบ
+
+- Desktop
+- Tablet
+- Mobile
+
+ตรวจสอบ
+
+- Search
+- Filter
+- Pagination
+- Sorting
+- Action Menu
+
+ว่ายังทำงานได้เหมือนเดิม
+
+---
+
+# Deliverables
+
+เมื่อดำเนินการเสร็จ
+
+สร้างเอกสาร
+
+```
+docs/employee-directory-ui-improvement-report.md
+```
+
+ประกอบด้วย
+
+## 1. Files Changed
+
+ระบุไฟล์ทั้งหมด
+
+---
+
+## 2. UI Changes
+
+อธิบาย
+
+ก่อน
+
+หลัง
+
+---
+
+## 3. Responsive Result
+
+Desktop
+
+Tablet
+
+Mobile
+
+---
+
+## 4. Accessibility
+
+สิ่งที่ปรับปรุง
+
+---
+
+## 5. Performance
+
+มีผลกระทบหรือไม่
+
+---
+
+## 6. Screens Reviewed
+
+ระบุหน้าที่ตรวจสอบ
+
+---
+
+## 7. Remaining Improvements
+
+รายการที่แนะนำในอนาคต
+
+เช่น
+
+- Sticky First Column
+- Column Visibility
+- Export CSV
+- Saved Filters
+- KPI Dashboard
+- Skeleton Loading
+- Empty State
+- Bulk Actions
+
+---
+
+# Success Criteria
+
+ถือว่างานเสร็จเมื่อ
+
+- Header ใหม่ใช้งานได้
+- Toolbar ใหม่ใช้งานได้
+- Summary Cards แสดงผลถูกต้อง
+- Data Table อ่านง่ายขึ้น
+- Responsive สมบูรณ์
+- ไม่มี Regression
+- TypeScript ไม่มี Error
+- ESLint ผ่าน
+- Build ผ่าน
+- Report ถูกสร้างเรียบร้อย