9.1 KiB
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
ใช้
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 ถูกสร้างเรียบร้อย