commit

plans/update-datatable-employee-directory-page.md

@@ -0,0 +1,258 @@
+ช่วยปรับปรุง DataTable ของหน้า **Employee Directory (รายชื่อพนักงานทั้งหมด)** ให้มี Layout และ UX เหมือนกับหน้า **Training Records (ประวัติการอบรม)**
+
+## ปัญหาปัจจุบัน
+
+- Header ของกลุ่ม "ชั่วโมงการอบรม (ชม.)" ไม่ตรงกับคอลัมน์ด้านล่าง
+- คอลัมน์ "อนุมัติแล้ว", "รอตรวจสอบ", "ไม่อนุมัติ", "รวมชั่วโมง" เบียดกันจนข้อความติดกัน
+- ความกว้างของแต่ละ Column ไม่สมดุล
+- ตารางดูไม่เป็นระเบียบเมื่อหน้าจอกว้าง
+- การจัดตำแหน่ง Header และ Cell ไม่ตรงกัน
+- Action Column ชิดเกินไป
+
+---
+
+## สิ่งที่ต้องการ
+
+### 1. ใช้ DataTable Component เดียวกับหน้า Training Records
+
+ให้ใช้โครงสร้างเดียวกันทั้งหมด
+
+- TanStack Table
+- DataTable
+- DataTableColumnHeader
+- Pagination
+- Toolbar
+- Sorting
+- Column Visibility
+- Responsive
+
+ห้ามสร้าง Table ใหม่
+
+---
+
+### 2. กำหนด Width ของทุก Column
+
+ตัวอย่าง
+
+| Column      | Width |
+| ----------- | ----: |
+| รหัสพนักงาน | 120px |
+| ชื่อพนักงาน | 240px |
+| ฝ่าย        | 180px |
+| ตำแหน่ง     | 180px |
+| อนุมัติแล้ว | 110px |
+| รอตรวจสอบ   | 110px |
+| ไม่อนุมัติ  | 110px |
+| รวมชั่วโมง  | 120px |
+| Actions     |  60px |
+
+ทุก Column ต้องกำหนด
+
+```tsx
+size:
+minSize:
+maxSize:
+```
+
+เพื่อป้องกัน Column ยุบหรือขยายผิดสัดส่วน
+
+---
+
+### 3. Header 2 ชั้น
+
+ต้องการ Header แบบนี้
+
+```
+---------------------------------------------------------
+| รหัส | ชื่อ | ฝ่าย | ตำแหน่ง | ชั่วโมงการอบรม (ชม.) |
+|                               -------------------------
+|                               อนุมัติ รอ ไม่อนุมัติ รวม |
+---------------------------------------------------------
+```
+
+โดยใช้
+
+```
+colSpan
+rowSpan
+header groups
+```
+
+ของ TanStack Table
+
+ไม่ใช้ CSS hack
+
+---
+
+### 4. Cell Alignment
+
+ข้อมูลตัวเลขทั้งหมด
+
+- อนุมัติแล้ว
+- รอตรวจสอบ
+- ไม่อนุมัติ
+- รวมชั่วโมง
+
+ให้
+
+- text-center
+- tabular-nums
+
+เช่น
+
+```tsx
+<div className="text-center tabular-nums font-medium">{value}</div>
+```
+
+---
+
+### 5. Text Column
+
+ชื่อพนักงาน
+
+ฝ่าย
+
+ตำแหน่ง
+
+ต้องรองรับข้อความยาว
+
+```
+truncate
+max-w
+```
+
+เช่น
+
+```tsx
+<div className="max-w-[220px] truncate">
+```
+
+---
+
+### 6. Table Layout
+
+ใช้
+
+```tsx
+<Table
+    className="w-full table-fixed"
+>
+```
+
+และ
+
+```tsx
+<div className="overflow-x-auto">
+```
+
+รวมถึง
+
+```tsx
+min-w-[1200px]
+```
+
+เพื่อให้ Scroll เฉพาะ Table เมื่อจำเป็น
+
+---
+
+### 7. ความสูงของแถว
+
+Header
+
+ประมาณ
+
+56px
+
+Body
+
+ประมาณ
+
+64px
+
+เหมือนหน้า Training Records
+
+---
+
+### 8. Spacing
+
+เพิ่มระยะห่าง
+
+```
+px-4
+py-3
+```
+
+ทุก Cell
+
+ไม่ให้ข้อมูลติดกัน
+
+---
+
+### 9. Action Column
+
+คอลัมน์สุดท้าย
+
+```
+width:60
+```
+
+จัด
+
+```
+justify-end
+```
+
+เหมือนหน้า Training Records
+
+---
+
+### 10. Responsive
+
+เมื่อหน้าจอเล็ก
+
+ให้เลื่อนเฉพาะ Table
+
+ห้าม
+
+- Header ล้น
+- Column ซ้อน
+- Text ทับกัน
+- Cell เบียดกัน
+
+---
+
+### 11. ห้ามแก้ Business Logic
+
+ห้ามแก้
+
+- API
+- Query
+- Data
+- Pagination
+- Sorting
+- Filter
+
+แก้เฉพาะ
+
+- Layout
+- DataTable Columns
+- Header Groups
+- CSS
+- Width
+- Alignment
+
+---
+
+### เป้าหมายสุดท้าย
+
+หน้า Employee Directory ต้องมีหน้าตาเหมือนหน้า Training Records ทุกประการ
+
+- ระยะห่างเท่ากัน
+- Header เท่ากัน
+- Column Width สมดุล
+- ตัวเลขจัดกลาง
+- Header Group "ชั่วโมงการอบรม" แสดงผลถูกต้อง
+- รองรับ Responsive
+- ไม่มี Column เบียดกัน
+- ไม่มีข้อความซ้อนกัน
+- ดูเป็น Professional Dashboard ระดับ Enterprise