Employee Information UI Standard Implementation Report

1. Executive Summary

รอบนี้ได้เริ่มวางมาตรฐาน Employee Information UI กลางของระบบ โดยโฟกัสกับหน้าที่ใช้ตารางและรายการพนักงานบ่อยที่สุดก่อน เพื่อให้ลำดับข้อมูล รหัสพนักงาน -> ชื่อพนักงาน และช่องค้นหาทำงานสอดคล้องกันในหลายโมดูลหลักของระบบ

มาตรฐานที่เริ่มใช้งานแล้วครอบคลุมการแสดงผล, search placeholder, และ sorting สำหรับ training records, pending review, employee management, employee directory, users, permission management, รวมถึง card/list บางส่วนของ dashboard overview และ training matrix

2. Standard Definition

แสดง รหัสพนักงาน เป็นคอลัมน์แรกเสมอใน DataTable ที่มีข้อมูลพนักงาน
แสดง ชื่อพนักงาน เป็นคอลัมน์ถัดจาก รหัสพนักงาน
ใช้ placeholder มาตรฐานผ่าน helper กลาง: ค้นหาด้วยรหัสพนักงาน ชื่อพนักงาน ...
รองรับ search ด้วย employee_code และ employee_name ใน API/DB layer ที่เกี่ยวข้อง
รองรับ sorting ด้วย employee_code และ employee_name ในตารางที่เกี่ยวข้อง
บน card/list ที่ไม่ใช่ DataTable ให้เรียง รหัสพนักงาน เหนือ ชื่อพนักงาน

3. Pages Updated

dashboard/training-records
dashboard/pending-review
dashboard/employees
dashboard/employee-directory
dashboard/users
dashboard/permissions/users
dashboard/overview ส่วน recent activity
dashboard/training-matrix ส่วน compliance card

4. Files Modified

src/components/employee/employee-information.tsx
src/lib/employee-information.ts
src/features/training-records/api/types.ts
src/features/training-records/server/training-record-data.ts
src/features/training-records/components/training-record-tables/columns.tsx
src/features/training-records/components/pending-review-columns.tsx
src/app/api/training-records/route.ts
src/app/api/training-records/[id]/route.ts
src/features/users/components/users-table/columns.tsx
src/features/permission-management/components/user-permission-columns.tsx
src/features/permission-management/server/user-permission-data.ts
src/features/employees/components/employee-tables/columns.tsx
src/features/employees/server/employee-data.ts
src/features/employee-directory/components/employee-directory-columns.tsx
src/features/employee-directory/components/employee-directory-toolbar.tsx
src/features/overview/components/recent-sales.tsx
src/features/training-matrix/components/training-compliance-card.tsx

5. API Changes

เพิ่ม employee_code ใน contract ของ training records
เพิ่มการ search ด้วย employee_code ใน training record listing
เพิ่มการ sort ด้วย employee_code ใน training record listing
เพิ่มการ sort ด้วย employee_code ใน permission-management user assignment
เพิ่มการ sort ด้วย employee_code และ full_name ใน employee management
route handler ของ training records ถูกอัปเดตให้เติม employeeCode ใน serialized response ให้ครบกับ contract ใหม่

6. UI Changes

เพิ่มคอลัมน์ รหัสพนักงาน เป็นคอลัมน์แรกในตารางหลักที่เกี่ยวกับพนักงาน
ปรับคอลัมน์ ชื่อพนักงาน ให้เป็นคอลัมน์แยกจาก รหัสพนักงาน
เพิ่ม shared helper/component สำหรับแสดง employee identity แบบสม่ำเสมอ
ปรับ card/list บางส่วนให้แสดง รหัสพนักงาน ก่อน ชื่อพนักงาน

7. Search Changes

ใช้ placeholder มาตรฐานจาก helper กลาง
ตารางที่ค้นหาพนักงานอยู่แล้วจะสื่อชัดขึ้นว่ารองรับทั้ง รหัสพนักงาน และ ชื่อพนักงาน
หน้าที่มี search แบบ module-specific สามารถต่อท้ายคำค้นเฉพาะงานได้ เช่น หลักสูตร, ผู้จัดอบรม

8. Sorting Changes

เพิ่ม sorting สำหรับ รหัสพนักงาน ในหน้าที่โครงสร้าง API รองรับแล้ว
รักษา sorting เดิมของคอลัมน์ธุรกิจอื่นไว้โดยไม่เปลี่ยน workflow

9. Responsive Changes

card/list บน overview และ training matrix ปรับให้ รหัสพนักงาน อยู่ก่อน ชื่อพนักงาน
DataTable หลักยังคงใช้ shared table stack เดิม และจัดลำดับคอลัมน์ตามมาตรฐานใหม่

10. Regression Review

ไม่เปลี่ยน permission
ไม่เปลี่ยน business workflow
ไม่เปลี่ยน persistence pattern
ไม่เปลี่ยน navigation
ใช้ shared DataTable stack และ auth/data pattern เดิมของ repo

11. Test Checklist

npx tsc --noEmit
npm run build

ทั้งสองคำสั่งผ่าน

12. Recommendation

รอบถัดไปควรไล่ปรับ dashboard/reports และหน้ารายงานแบบ custom table ที่ยังไม่ได้ย้ายเข้ามาตรฐานเดียวกันทั้งหมด
หากมีหน้าใหม่ที่แสดงข้อมูลพนักงาน ควร reuse employee-information.tsx และ buildEmployeeSearchPlaceholder() ต่อโดยตรง

6.9 KiB Raw Blame History