635 lines
9.1 KiB
Markdown
635 lines
9.1 KiB
Markdown
# 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 ถูกสร้างเรียบร้อย
|