alla-tms/plans/modify-layout-employee-page.md

ช่วยแก้ไข 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 เท่านั้น

โครงสร้างที่ต้องการโดยประมาณ:

<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:

<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 กลุ่ม:

<TableRow>
  <TableHead colSpan={4}></TableHead>
  <TableHead colSpan={4} className="text-center border-l">
    ชั่วโมงการอบรม (ชม.)
  </TableHead>
</TableRow>

ตัวอย่างการป้องกันข้อความยาวดันตาราง:

<TableCell className="truncate">
  <div className="truncate">{employee.name}</div>
</TableCell>

ผลลัพธ์ที่ต้องการ:

• ตารางไม่ล้นหน้าจอ
• Layout เหมือนหน้า ประวัติการอบรม
• Table อยู่ใน Card สวยงาม
• มี horizontal scroll เฉพาะเมื่อจำเป็น
• Responsive มากขึ้น
• Header และ Body align ตรงกัน