commit

plans/modify-layout-employee-page.md

@@ -0,0 +1,77 @@
+ช่วยแก้ไข Layout หน้า `รายชื่อพนักงานทั้งหมด` ให้ตารางแสดงผลเหมือนกับหน้า `ประวัติการอบรม`
+
+ปัญหาปัจจุบัน:
+
+- ตารางของหน้ารายชื่อพนักงานล้นออกด้านขวา
+- Header และ Column ของตารางดูกว้างเกิน container
+- ต้องการให้ตารางอยู่ใน Card เหมือนหน้าประวัติการอบรม
+- ให้ Scroll เฉพาะภายในตาราง ไม่ให้ดัน Layout ทั้งหน้า
+
+สิ่งที่ต้องการให้แก้:
+
+1. ครอบตารางด้วย container ที่มี `overflow-hidden`
+2. เพิ่ม wrapper สำหรับตารางด้วย `overflow-x-auto`
+3. ใช้ `Table` แบบ `w-full table-fixed`
+4. กำหนดความกว้างของแต่ละคอลัมน์ให้เหมาะสม
+5. ใช้ `truncate` กับข้อความยาว เช่น ชื่อพนักงาน ฝ่าย และตำแหน่ง
+6. จัด Header กลุ่ม `ชั่วโมงการอบรม (ชม.)` ให้ไม่ทำให้ตารางล้น
+7. ให้ดีไซน์ สี เส้นขอบ ระยะห่าง และความสูงของแถว ใกล้เคียงกับหน้า `ประวัติการอบรม`
+8. ปุ่ม Search, Filter, View และ Pagination ไม่ต้องเปลี่ยน Logic เดิม
+9. ห้ามแก้ Business Logic, API, Query หรือข้อมูลที่ดึงมา
+10. แก้เฉพาะ Layout / CSS / className / Table structure เท่านั้น
+
+โครงสร้างที่ต้องการโดยประมาณ:
+
+```tsx
+<Card className="overflow-hidden">
+  <CardContent className="p-0">
+    <div className="overflow-x-auto">
+      <Table className="w-full table-fixed">
+        <TableHeader>...</TableHeader>
+        <TableBody>...</TableBody>
+      </Table>
+    </div>
+  </CardContent>
+</Card>
+```
+
+ตัวอย่างแนวทาง Column Width:
+
+```tsx
+<TableHead className="w-[120px]">รหัสพนักงาน</TableHead>
+<TableHead className="w-[220px]">ชื่อพนักงาน</TableHead>
+<TableHead className="w-[160px]">ฝ่าย</TableHead>
+<TableHead className="w-[160px]">ตำแหน่ง</TableHead>
+<TableHead className="w-[100px] text-center">อนุมัติแล้ว</TableHead>
+<TableHead className="w-[100px] text-center">รอตรวจสอบ</TableHead>
+<TableHead className="w-[100px] text-center">ไม่อนุมัติ</TableHead>
+<TableHead className="w-[100px] text-center">รวมชั่วโมง</TableHead>
+```
+
+ตัวอย่างการจัด Header กลุ่ม:
+
+```tsx
+<TableRow>
+  <TableHead colSpan={4}></TableHead>
+  <TableHead colSpan={4} className="text-center border-l">
+    ชั่วโมงการอบรม (ชม.)
+  </TableHead>
+</TableRow>
+```
+
+ตัวอย่างการป้องกันข้อความยาวดันตาราง:
+
+```tsx
+<TableCell className="truncate">
+  <div className="truncate">{employee.name}</div>
+</TableCell>
+```
+
+ผลลัพธ์ที่ต้องการ:
+
+- ตารางไม่ล้นหน้าจอ
+- Layout เหมือนหน้า `ประวัติการอบรม`
+- Table อยู่ใน Card สวยงาม
+- มี horizontal scroll เฉพาะเมื่อจำเป็น
+- Responsive มากขึ้น
+- Header และ Body align ตรงกัน