# 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.