5.2 KiB
Sprint 6.12 UI Enhancement – Employee Directory (HR Master)
You are a Senior Full Stack Engineer, UI/UX Engineer, and Solution Architect.
Project: Training Management System (TMS)
Current Status: Sprint 6.11 Identity / Employee Cleanup completed.
Current Task: Redesign the รายชื่อพนักงานทั้งหมด (Employee Directory) page to become the central HR Employee Directory.
Objective
Transform the page into a professional Employee Directory similar to modern HRIS systems.
This page is NOT User Management.
This page represents Employee Master Data.
All employee information must come from the employees table.
Do NOT use users as the primary data source.
Data Source
Primary Table
employees
Related Tables
- training_records
- employee_training_targets
- departments
- companies
- positions
- training_policy (fallback only)
Never use users as employee master.
Employees without login accounts must still appear in this page.
Page Layout
Top Section
Title
รายชื่อพนักงานทั้งหมด
Description
เรียกดูข้อมูลพนักงาน ข้อมูลชั่วโมงการอบรม และประวัติการอบรมรายบุคคล
Top Right Actions
Create two action buttons
Primary Button
- สร้างรายชื่อพนักงาน
Route
/dashboard/employee-directory/create
Secondary Button
Import รายชื่อพนักงาน
Route
/dashboard/import-employees
Buttons should remain responsive.
Desktop
[ + สร้างรายชื่อพนักงาน ] [ Import รายชื่อพนักงาน ]
Mobile
Stack vertically.
Search Area
Large Search Box
Placeholder
ค้นหาด้วยรหัสพนักงาน ชื่อ ฝ่าย หรือตำแหน่ง...
Search Fields
- employeeCode
- displayName
- department
- position
Filters
Add Filter Row
- บริษัท
- ฝ่าย
- ตำแหน่ง
- สถานะ
Use existing filter components.
Employee Table
Columns
- รหัสพนักงาน
- ชื่อพนักงาน
- ฝ่าย
- ตำแหน่ง
Training Hours
Group Header
ชั่วโมงการอบรม (ชม.)
Sub Columns
- อนุมัติแล้ว
- รอตรวจสอบ
- ไม่อนุมัติ
- รวมชั่วโมง
Action Column
Header
จัดการ
Button
ดูข้อมูลพนักงาน
OR
Three-dot action menu
Dropdown
- ดูข้อมูลพนักงาน
- แก้ไขข้อมูลพนักงาน
- กำหนดเป้าหมาย K/S/A (HRD Only)
Training Hour Logic
Calculate from
training_records.employee_id
Approved Hours
status = APPROVED
Pending Hours
status = PENDING
Rejected Hours
status = REJECTED
Total Hours
approved + pending + rejected
Do not calculate from users.
Employee Detail
Route
/dashboard/employee-directory/[employeeId]
Show
ข้อมูลทั่วไป
- รูปภาพ (ถ้ามี)
- รหัสพนักงาน
- ชื่อ
- อีเมล
- บริษัท
- ฝ่าย
- ตำแหน่ง
- สถานะ
Training Summary
- ชั่วโมงอนุมัติ
- ชั่วโมงรอตรวจสอบ
- ชั่วโมงไม่อนุมัติ
- ชั่วโมงรวม
- เป้าหมาย K
- เป้าหมาย S
- เป้าหมาย A
- Progress
Training History
Table
- วันที่
- หลักสูตร
- ประเภท
- ชั่วโมง
- สถานะ
- เกียรติบัตร
Permission
HRD/Admin
- View all employees
- Create employee
- Import employee
- Edit employee
- Set K/S/A Target
Employee
Cannot access Employee Directory.
Responsive
Desktop
Same layout as design.
Tablet
Filters wrap.
Buttons wrap.
Table scrolls horizontally.
Mobile
Cards stack.
Table stays inside scroll container.
No page overflow.
Files
Navigation
src/config/nav-config.ts
Pages
src/app/dashboard/employee-directory/page.tsx
src/app/dashboard/employee-directory/[employeeId]/page.tsx
Feature
src/features/employee-directory/*
Server
src/features/employee-directory/server/employee-directory-data.ts
Output Review File
Create
docs/sprint-6-12-employee-directory-ui-review.md
Include
- Summary
- Files Changed
- UI Improvements
- Data Source Validation
- Training Hour Calculation
- Responsive Changes
- Permission Rules
- Manual Test Checklist
- Known Limitations
Manual Checklist
✓ Employee Directory reads from employees.
✓ Employees without user account are displayed.
✓ Search works.
✓ Filters work.
✓ Create Employee button works.
✓ Import Employee button works.
✓ Training hour calculation uses training_records.employee_id.
✓ Employee detail works.
✓ Responsive layout works.
Return
- Complete code changes with file paths.
- Review document.
- Migration commands if required.