# Change Employee Directory Table Layout

## Objective

ปรับปรุงหน้า **Employee Directory** ให้แสดงเฉพาะข้อมูลพื้นฐานของพนักงาน

หน้านี้มีวัตถุประสงค์เพื่อค้นหาและจัดการข้อมูลพนักงาน ไม่ใช่แสดงสถิติการอบรม

---

## Requirements

### Remove Training Summary Columns

นำคอลัมน์ต่อไปนี้ออกจาก Data Table

- อนุมัติแล้ว
- รอตรวจสอบ
- ไม่อนุมัติ
- รวมชั่วโมง

รวมถึงลบ Header Group "ชั่วโมงการอบรม"

---

### New Table Columns

จัดเรียงคอลัมน์ใหม่เป็น

1. รหัสพนักงาน
2. ชื่อพนักงาน
3. ตำแหน่ง
4. ฝ่าย
5. จัดการ

---

### Employee Name Column

แสดง

```
สมชาย ใจดี
somchai@example.com
```

Email ใช้

- text-xs
- text-muted-foreground

หากไม่มี Email

แสดง "-"

---

### Position Column

แสดง

```
Senior Programmer
```

หากไม่มีข้อมูล

แสดง "-"

---

### Department Column

แสดง

```
Information Technology
```

หากไม่มีข้อมูล

แสดง "-"

---

### Action Column

คง Dropdown Menu เดิมไว้

ห้ามเปลี่ยน Business Logic

---

### Search

ยังค้นหาได้เหมือนเดิม

- รหัสพนักงาน
- ชื่อพนักงาน

---

### Sorting

รองรับการเรียงลำดับ

- รหัสพนักงาน
- ชื่อ
- ตำแหน่ง
- ฝ่าย

---

### Table Width

เมื่อเอาคอลัมน์ชั่วโมงออก

ให้ปรับความกว้างใหม่

ไม่ให้มีพื้นที่ว่างเกินจำเป็น

---

### Column Width Recommendation

| Column      | Width |
| ----------- | ----: |
| รหัสพนักงาน | 140px |
| ชื่อพนักงาน | 260px |
| ตำแหน่ง     | 220px |
| ฝ่าย        | 220px |
| จัดการ      |  60px |

---

## Business Logic

ห้ามแก้ไข

- API
- Query
- Pagination
- Permission
- Validation
- Mutation

ให้เปลี่ยนเฉพาะการแสดงผลของ Data Table เท่านั้น

---

## Deliverables

หลังดำเนินการเสร็จ

สร้างเอกสาร

```
docs/employee-directory-table-redesign.md
```

ประกอบด้วย

- Files Changed
- Columns Removed
- Columns Added
- Responsive Result
- Regression Check