alla-tms/plans/employee-information-ui.md

Requirement ที่เข้าใจ

Objective

ปรับปรุงมาตรฐานการแสดงข้อมูลพนักงาน (Employee Information Standard) ให้เป็นรูปแบบเดียวกันทั้งระบบ TMS เพื่อให้ผู้ใช้งานสามารถค้นหาและอ่านข้อมูลได้อย่างสม่ำเสมอ ลดความสับสนในการใช้งาน

---

Functional Requirements

Employee Information Standard

ทุกหน้าที่มีการแสดงข้อมูลพนักงาน ให้ใช้มาตรฐานเดียวกัน ดังนี้

ตารางข้อมูล

ให้เพิ่มคอลัมน์ รหัสพนักงาน (Employee Code) เป็นคอลัมน์แรกของตาราง

ลำดับข้อมูลมาตรฐาน

• รหัสพนักงาน
• ชื่อพนักงาน
• บริษัท
• แผนก
• ข้อมูลเฉพาะของแต่ละโมดูล
• สถานะ
• Action

หากบางโมดูลไม่มีข้อมูลบริษัทหรือแผนก สามารถซ่อนเฉพาะคอลัมน์นั้นได้ แต่ลำดับของ Employee Code และ Employee Name ต้องเหมือนกันทุกหน้า

---

Search Standard

ทุกหน้าที่มีข้อมูลพนักงาน

ให้รองรับการค้นหาด้วยช่องค้นหาเดียว

สามารถค้นหาได้จาก

• Employee Code
• Employee Name
• Last Name
• Full Name

และข้อมูลเฉพาะของแต่ละโมดูล เช่น

• Course Name
• Provider
• Announcement Title
• Online Lesson Title

Placeholder ให้ใช้มาตรฐานเดียวกัน

ค้นหาด้วยรหัสพนักงาน ชื่อพนักงาน หรือข้อมูลที่เกี่ยวข้อง...

โดยสามารถปรับท้ายข้อความตามโมดูลได้ เช่น

ค้นหาด้วยรหัสพนักงาน ชื่อพนักงาน หลักสูตร หรือผู้จัดอบรม...

---

Sorting Standard

ทุกหน้าที่ใช้ DataTable

รองรับการ Sort

• Employee Code
• Employee Name

หาก DataTable เดิมรองรับ Sorting อยู่แล้ว ให้เพิ่มเฉพาะคอลัมน์ใหม่

---

Responsive Standard

Desktop

แสดง Employee Code เป็นคอลัมน์แรก

Mobile

ให้แสดง

Employee Code

Employee Name

เป็นข้อมูลบนสุดของ Card หรือ Row

---

Scope of Standard

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

• Pending Review
• Training Records
• Employee Management
• Dashboard
• Reports
• Approval Lists
• Online Lesson Progress (ถ้ามี)
• Announcement Reader (ถ้ามีข้อมูลพนักงาน)
• หน้าจัดการอื่น ๆ ที่มีการแสดงรายชื่อพนักงาน

หากพบหน้าที่ใช้รูปแบบต่างกัน ให้ปรับเป็นมาตรฐานเดียวกัน

---

UI/UX Requirements

ทุกหน้าต้องใช้มาตรฐานเดียวกัน

• Employee Code อยู่ก่อน Employee Name
• ชื่อคอลัมน์ใช้ข้อความเดียวกัน
• Placeholder ใช้มาตรฐานเดียวกัน
• Search Logic เหมือนกัน
• Sorting เหมือนกัน
• Responsive เหมือนกัน

ห้ามแต่ละหน้ามีพฤติกรรมแตกต่างกันโดยไม่มีเหตุผลทาง Business

---

Technical Requirements

ก่อนแก้ไข

• Audit ทุกหน้าที่แสดงข้อมูลพนักงาน
• ตรวจสอบ Shared DataTable
• ตรวจสอบ Shared Search Component
• ตรวจสอบ Shared Column Definition
• ตรวจสอบ API ที่รองรับ Employee Code

หากพบ Logic ซ้ำ

ให้ Refactor เป็น Shared Component หรือ Shared Utility

ห้าม Copy Code

---

Scope of Work

• ปรับเฉพาะส่วนการแสดงข้อมูลพนักงาน
• ไม่เปลี่ยน Business Logic ของแต่ละโมดูล
• ไม่เปลี่ยน Permission
• ไม่เปลี่ยน Workflow
• ไม่กระทบ API หากสามารถใช้ข้อมูลเดิมได้
• หาก API ยังไม่ส่ง Employee Code ให้เพิ่มเฉพาะ Field ที่จำเป็น

---

Acceptance Criteria

✅ Employee Code เป็นคอลัมน์แรกทุกหน้า

✅ Search รองรับ Employee Code และ Employee Name

✅ Placeholder ใช้มาตรฐานเดียวกัน

✅ Sort Employee Code ได้

✅ Sort Employee Name ได้

✅ Responsive แสดงผลถูกต้อง

✅ ไม่มี Regression

---

Deliverables

• ปรับทุกหน้าที่แสดงข้อมูลพนักงานให้ใช้มาตรฐานเดียวกัน
• ตรวจสอบ TypeScript Error
• ตรวจสอบ ESLint
• ตรวจสอบ Build
• ตรวจสอบ Search
• ตรวจสอบ Sorting
• ตรวจสอบ Responsive
• ตรวจสอบ Regression

สร้างเอกสาร

docs/employee-information-ui-standard-implementation-report.md

ประกอบด้วย

1. Executive Summary

2. Standard Definition

3. Pages Updated

4. Files Modified

5. API Changes

6. UI Changes

7. Search Changes

8. Sorting Changes

9. Responsive Changes

10. Regression Review

11. Test Checklist

12. Recommendation