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