# 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 ``` --- ## 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 เช่น ``` ``` เพื่อใช้ร่วมกันทั้งระบบ โดยต้องไม่ทำให้ 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 และไม่มีผลกระทบต่อฟังก์ชันเดิมของระบบ