347 lines
5.2 KiB
Markdown
347 lines
5.2 KiB
Markdown
# 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
|
||
- email
|
||
- department
|
||
- position
|
||
|
||
---
|
||
|
||
Filters
|
||
|
||
Add Filter Row
|
||
|
||
- บริษัท
|
||
- ฝ่าย
|
||
- ตำแหน่ง
|
||
- สถานะ
|
||
|
||
Use existing filter components.
|
||
|
||
---
|
||
|
||
Employee Table
|
||
|
||
Columns
|
||
|
||
1. รหัสพนักงาน
|
||
2. ชื่อพนักงาน
|
||
3. ฝ่าย
|
||
4. ตำแหน่ง
|
||
|
||
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
|
||
|
||
1. Summary
|
||
2. Files Changed
|
||
3. UI Improvements
|
||
4. Data Source Validation
|
||
5. Training Hour Calculation
|
||
6. Responsive Changes
|
||
7. Permission Rules
|
||
8. Manual Test Checklist
|
||
9. 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.
|