alla-tms/plans/filter-single-select-plan.md

Task: Refactor Employee Directory Filters to Single Select

Objective

ปรับปรุงระบบ Filter ในหน้ารายชื่อพนักงาน (Employee Directory)

ปัจจุบัน Filter

• บริษัท
• ฝ่าย
• ตำแหน่ง
• สถานะ

เป็นรูปแบบที่สามารถเลือกได้หลายค่า (Multi Select)

ต้องการเปลี่ยนให้เป็น Single Select ทั้งหมด โดยสามารถเลือกได้เพียง 1 ค่าในแต่ละ Filter เพื่อให้ UX และมาตรฐานของระบบเหมือนกับหน้าบทเรียนออนไลน์

---

Requirements

1. เปลี่ยน Filter เป็น Single Select

เปลี่ยน Filter ต่อไปนี้

• บริษัท
• ฝ่าย
• ตำแหน่ง
• สถานะ

จาก

Multi Select

เป็น

Single Select

สามารถเลือกได้เพียงค่าเดียว

ตัวอย่าง

เดิม

บริษัท

☑ ALLA ☑ ONVALLA

ใหม่

บริษัท

○ ALLA ○ ONVALLA

เลือกได้เพียงค่าเดียว

---

2. ใช้ Component มาตรฐานเดียวกับระบบ

ห้ามสร้าง Component ใหม่

ให้ใช้ Select Component เดียวกับที่ใช้งานใน

• Online Lessons
• Training Records
• Announcement
• Module อื่นที่ใช้ Select

เพื่อให้ UI และ UX เหมือนกันทั้งระบบ

---

3. Placeholder

แต่ละ Select

บริษัท

เลือกบริษัท

ฝ่าย

เลือกฝ่าย

ตำแหน่ง

เลือกตำแหน่ง

สถานะ

เลือกสถานะ

---

4. Clear Filter

เมื่อมีการเลือกค่าแล้ว

ต้องสามารถ

Clear

กลับเป็น

ทั้งหมด

ได้

โดยใช้รูปแบบเดียวกับหน้าอื่นของระบบ

---

5. URL Search Params

ต้องยังรองรับ

Server Side Filtering

เหมือนเดิม

เช่น

?company=1

?department=15

?position=6

?status=active

โดย

แต่ละ parameter

ต้องมีค่าเดียวเท่านั้น

ไม่ต้องรองรับ array

ห้ามส่ง

company=1,2

หรือ

company[]=1

---

6. Backend

ตรวจสอบ API

ให้รองรับ

Single Value

เท่านั้น

เช่น

company=1

ไม่ต้องรองรับ

company[]=1&company[]=2

หากยังมี Logic Array

ให้ Refactor ออก

---

7. State Management

State ของ Filter

ควรเป็น

company?: string

department?: string

position?: string

status?: string

ไม่ควรเป็น

string[]

หรือ

Set<string>

---

8. UX

เมื่อเลือกค่า

ให้ Reload/Search

ทันที

ไม่ต้องกดปุ่ม Search

Behavior ต้องเหมือนหน้า

Online Lessons

---

9. Performance

ห้าม Fetch Master Data ซ้ำ

หากมี Cache

ให้ใช้ของเดิม

---

10. Consistency

ตรวจสอบทุกจุดที่ใช้ Employee Directory Filter

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

เช่น

• Toolbar
• Search Params
• API
• Table Refresh
• Pagination

ต้องยังทำงานถูกต้องทั้งหมด

---

Acceptance Criteria

• บริษัทเป็น Single Select
• ฝ่ายเป็น Single Select
• ตำแหน่งเป็น Single Select
• สถานะเป็น Single Select
• เลือกได้เพียง 1 ค่า
• Clear Filter ได้
• URL ใช้ค่าเดียว
• Backend รองรับค่าเดียว
• Pagination ยังทำงาน
• Sorting ยังทำงาน
• Search ยังทำงาน
• Auto Refresh หลังเลือก Filter
• ใช้ Select Component มาตรฐานเดียวกับระบบ
• ไม่สร้าง UI Component ใหม่
• TypeScript ผ่าน
• ESLint ผ่าน
• Build ผ่าน

---

11. UI/UX Improvement Requirements

นอกจากการเปลี่ยน Filter เป็น Single Select แล้ว ให้ปรับปรุง Layout และประสบการณ์การใช้งาน (UX) ของ Toolbar ให้เป็นมาตรฐานเดียวกับทั้งระบบ

11.1 จัด Layout ใหม่

จัดเรียง Toolbar ใหม่ให้อ่านง่ายและใช้งานสะดวก

ตัวอย่าง

---

ค้นหา.......................................................

[บริษัท ▼] [ฝ่าย ▼] [ตำแหน่ง ▼] [สถานะ ▼]

                                          [Reset Filter]

---

ห้ามวาง Filter แบบกระจัดกระจายหรือขนาดไม่เท่ากัน

---

11.2 ขนาดของ Select

กำหนดขนาดของ Select ทุกตัวให้เท่ากัน

เช่น

min-w-[180px]

หรือ

w-44

แล้วแต่ Design System ของโปรเจกต์

ทุก Filter ต้องมีความสูงและระยะห่างเท่ากัน

---

11.3 ใช้มาตรฐานเดียวกับระบบ

Select

Search

Toolbar

Spacing

Border Radius

Height

Padding

Typography

ต้องใช้ Component และ Style เดียวกับ

• Online Lessons
• Announcements
• Training Records
• Module อื่นของ Dashboard

ห้ามสร้าง Design ใหม่

---

11.4 Reset Filters

เพิ่มปุ่ม

ล้างตัวกรอง

หรือ

Reset Filters

แสดงเฉพาะเมื่อมี Filter ถูกเลือก

เมื่อกดแล้ว

• Search Text
• Company
• Department
• Position
• Status

ต้องกลับเป็นค่าเริ่มต้นทั้งหมด

รวมถึง

• URL Search Params
• Pagination

ต้อง Reset กลับหน้าแรก

---

11.5 Auto Search

เมื่อเลือกค่าใน Select

ให้ระบบ

• Update URL
• Reload Table
• Reset Pagination ไปหน้าแรก

โดยอัตโนมัติ

ไม่ต้องมีปุ่ม Search

Behavior ต้องเหมือนกับ

Online Lessons

---

11.6 Responsive

บนหน้าจอขนาดเล็ก

Toolbar ต้องสามารถ Wrap ได้

ตัวอย่าง

Search

Company

Department

Position

Status

Reset

โดย Layout ต้องไม่ล้นหน้าจอ

ไม่เกิด Horizontal Scroll

---

11.7 Empty State

หาก Filter แล้วไม่พบข้อมูล

ให้แสดง Empty State มาตรฐานของระบบ

เช่น

ไม่พบข้อมูลที่ตรงกับเงื่อนไขการค้นหา

พร้อมปุ่ม

ล้างตัวกรอง

---

11.8 Accessibility

ทุก Select ต้องมี

• Label
• aria-label
• Keyboard Navigation
• Focus Ring

ตามมาตรฐาน shadcn/ui

---

11.9 Performance

ห้าม Fetch Master Data ใหม่ทุกครั้งที่เปิด Select

Master Data

• Company
• Department
• Position
• Status

ต้องใช้ Cache หรือ Query เดิมที่ระบบมีอยู่

---

11.10 Consistency Review

หลังจากแก้ไขแล้ว

ตรวจสอบว่า Toolbar ของ Employee Directory มีมาตรฐานเดียวกับทุกหน้าที่มี Filter ในระบบ ได้แก่

• Online Lessons
• Announcements
• Training Records
• Reports
• Employee Directory

หากพบรูปแบบที่แตกต่างกันโดยไม่มีเหตุผล ให้ปรับให้เป็นมาตรฐานเดียวกันทั้งระบบ

---

Additional Review

หลังจากแก้ไขเสร็จ

ให้ตรวจสอบเพิ่มเติม

• ไม่มี Console Error
• ไม่มี React Warning
• ไม่มี Hydration Error
• ไม่มี TypeScript Error
• ไม่มี ESLint Error
• Build ผ่าน
• Filter ทุกตัวทำงานถูกต้อง
• Search ทำงานร่วมกับ Filter ได้
• Pagination ทำงานถูกต้อง
• Sorting ทำงานถูกต้อง
• URL Search Params ถูกต้อง
• Refresh หน้าแล้ว Filter ยังแสดงค่าที่เลือกอยู่

---

12. Filter Standardization (System-wide)

Objective

ตรวจสอบและปรับปรุงระบบ Filter ทั้งหมดในโครงการให้เป็นมาตรฐานเดียวกัน (Filter Standardization)

ปัจจุบันแต่ละ Module ใช้รูปแบบ Filter แตกต่างกัน ทั้ง Component, Layout, URL Parameters และพฤติกรรมการทำงาน

ต้องการให้ทุกหน้ามี UX และ Implementation เดียวกัน เพื่อให้ง่ายต่อการดูแลรักษาและขยายระบบในอนาคต

---

Scope

ตรวจสอบทุกหน้าที่มี Filter อย่างน้อย ได้แก่

• Employee Directory
• Training Records
• Pending Review
• Online Lessons
• Announcements
• Reports
• Employee History
• Master Review
• Employee Import
• Modules อื่นที่มี Filter

หากพบ Module อื่นที่มี Filter ให้รวมอยู่ใน Scope ด้วย

---

12.1 Filter Component Standard

Filter ทุกตัวต้องใช้ Component เดียวกัน

เช่น

• Select
• Search Input
• Date Picker
• Multi Select (เฉพาะกรณีจำเป็นจริง)
• Combobox (หากระบบใช้เป็นมาตรฐาน)

ห้ามสร้าง Component ใหม่ที่มีหน้าตาแตกต่างจาก Design System

---

12.2 Single Select Policy

Master Data Filter

• Company
• Department
• Position
• Status
• Category
• Type
• Policy
• Course

ให้ใช้

Single Select

เป็นค่า Default

ห้ามใช้ Multi Select

ยกเว้น

มี Business Requirement ระบุไว้อย่างชัดเจน

---

12.3 Toolbar Layout Standard

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

ตัวอย่าง

---

Search

Company

Department

Status

Date

Reset Filter

---

ลำดับต้องเหมือนกันทุกหน้า

Search อยู่ซ้ายสุด

Reset อยู่ขวาสุด

---

12.4 Search Behavior

Search ทุกหน้าต้อง

• Debounce
• Update URL
• Reset Pagination
• Reload Data

โดยอัตโนมัติ

ไม่ต้องมีปุ่ม Search

---

12.5 Filter Behavior

เมื่อเลือก Filter

ต้อง

• Update URL Search Params
• Reload Table
• Reset Pagination
• Preserve Sorting

เหมือนกันทุก Module

---

12.6 URL Standard

กำหนดมาตรฐานเดียวกัน

เช่น

?page=1
&pageSize=10
&search=...
&company=1
&department=5
&status=active
&sort=name.asc

ห้ามใช้รูปแบบแตกต่างกันระหว่าง Module

เช่น

company[]=1

status[]=...

หากไม่จำเป็น

---

12.7 Pagination

เมื่อ Filter เปลี่ยน

Pagination

ต้องกลับไป

หน้า 1

ทุกครั้ง

---

12.8 Reset Filter

ทุกหน้าที่มี Filter

ต้องมี

Reset Filters

เมื่อกดแล้ว

• Clear Search
• Clear Select
• Clear Date
• Reset URL
• Reset Pagination
• Reload Data

---

12.9 Responsive

Toolbar ทุกหน้า

ต้องรองรับ

Desktop

Tablet

Mobile

โดย

• Wrap ได้
• ไม่ล้น
• ไม่เกิด Horizontal Scroll

---

12.10 Empty State

ทุกหน้าต้องใช้ Empty State เดียวกัน

เช่น

ไม่พบข้อมูลที่ตรงกับเงื่อนไขการค้นหา

พร้อมปุ่ม

ล้างตัวกรอง

---

12.11 Accessibility

Filter ทุกตัวต้องรองรับ

• Keyboard Navigation
• Focus Ring
• aria-label
• Screen Reader

ตามมาตรฐาน shadcn/ui

---

12.12 Performance

Filter ต้อง

• ไม่ Fetch Master Data ซ้ำ
• ใช้ Cache เดิม
• ไม่เกิด Request ซ้ำ
• ไม่เกิด Infinite Render

---

12.13 Shared Components

หากพบว่ามีการเขียน Toolbar ซ้ำหลายหน้า

ให้ Refactor

สร้าง Shared Component

เช่น

<DataTableToolbar />

<FilterToolbar />

<SearchToolbar />

<ResetFiltersButton />

เพื่อใช้ร่วมกันทั้งระบบ

โดยต้องไม่ทำให้ Feature เดิมเสีย

---

12.14 Shared Hook

หากพบ Logic ซ้ำ

ให้สร้าง

useTableFilters()

useSearchParams()

useFilterState()

หรือ Shared Hook ที่เหมาะสม

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

---

12.15 Code Review

ตรวจสอบและลบ

• Duplicate Logic
• Duplicate Components
• Dead Code
• Legacy Filter
• Unused Search Params

---

Acceptance Criteria

หลังจากแก้ไขแล้ว

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

✓ Layout เหมือนกัน

✓ Select ใช้ Component เดียวกัน

✓ Search Behavior เหมือนกัน

✓ URL Format เหมือนกัน

✓ Pagination เหมือนกัน

✓ Reset Filter เหมือนกัน

✓ Responsive ทุกหน้า

✓ Accessibility ผ่าน

✓ ไม่มี Duplicate Components

✓ ไม่มี Duplicate Logic

✓ Shared Components ถูกใช้งานร่วมกัน

✓ Shared Hooks ถูกใช้งานร่วมกัน

✓ ไม่มี TypeScript Error

✓ ไม่มี ESLint Error

✓ Build ผ่าน

✓ ทุก Module ทำงานได้เหมือนเดิม (Backward Compatible)

---

Final Verification

หลังจากดำเนินการเสร็จ ให้จัดทำรายงานสรุปประกอบด้วย

1. รายชื่อทุกหน้าที่มีการปรับปรุง Filter
2. รายการ Component ที่ถูก Refactor เป็น Shared Component
3. รายการ Hook ที่ถูกสร้างหรือปรับใช้ร่วมกัน
4. ตารางเปรียบเทียบพฤติกรรมของ Filter ก่อนและหลังการปรับปรุง
5. รายการจุดที่ยังไม่สามารถปรับให้เป็นมาตรฐานเดียวได้ พร้อมเหตุผลทางเทคนิคหรือ Business Requirement
6. ผลการทดสอบการทำงานของ Search, Filter, Sorting, Pagination และ URL Search Params ในแต่ละ Module
7. ยืนยันว่าไม่มี Regression และไม่มีผลกระทบต่อฟังก์ชันเดิมของระบบ