alla-tms/plans/change-dashboard-filter.md

You are a Senior Frontend Engineer.

Project: Training Management System (TMS)

Current task: Update Dashboard Filter UI based on management feedback.

Important constraints:

• Do NOT change folder structure.
• Do NOT change API contract unless necessary.
• Do NOT break dashboard filtering logic.
• Keep Thai UI.
• Keep responsive/mobile support.
• Minimal-impact changes only.

Requirement: Change the dashboard filter section from large card layout to compact toolbar filter style.

Current UI:

• Large card titled "ตัวกรองแดชบอร์ด"
• Description text
• Year select
• Apply filter button
• Reset button

New UI: Use compact toolbar style similar to the data table filter pattern.

Employee dashboard filter should display:

• Search input or placeholder area if search is not used
• Year filter as compact dropdown button
• Status filter if available
• Reset filter button only when filters are active

Preferred visual style:

• Small height controls
• Inline horizontal layout on desktop
• Wrap or stack on mobile
• Use rounded border buttons
• Use icon + label format
• No large card container
• No large title/description

Example layout:

[ ค้นหาประวัติการอบรม... ] [ + ปี ] [ + สถานะ ] [ ล้างตัวกรอง ]

If search is not applicable to dashboard data:

• Use only: [ ปี: 2026 ] [ ล้างตัวกรอง ]

For HRD dashboard:

• Use: [ ค้นหา... ] [ + ปี ] [ + บริษัท ] [ + แผนก ] [ ล้างตัวกรอง ]

Behavior:

1. Preserve existing year filter behavior.
2. Preserve existing company/department filter behavior for HRD.
3. Remove the large filter card UI.
4. Do not remove the actual filtering feature.
5. Update responsive behavior:
   • Desktop: inline row
   • Mobile: wrap into multiple rows or full-width controls
6. Keep Thai labels:
   • ปี
   • บริษัท
   • แผนก
   • สถานะ
   • ล้างตัวกรอง
   • ค้นหา...

Files likely involved:

• src/features/overview/components/overview-filter-panel.tsx
• src/features/overview/server/overview-data.ts only if query param mapping needs adjustment
• src/app/dashboard/overview/page.tsx if filter panel is composed there

Output Review File:

Create: docs/management-change-dashboard-filter-review.md

Include:

1. Summary
2. Files Changed
3. UI Changes
4. Filter Behavior
5. Responsive Notes
6. Manual Test Checklist
7. Known Limitations

Manual Test Checklist:

• Dashboard no longer shows large filter card.
• Employee dashboard shows compact filter toolbar.
• HRD dashboard shows compact filter toolbar.
• Year filter still works.
• Company filter still works for HRD.
• Department filter still works for HRD.
• Reset filter works.
• Mobile layout does not overflow.
• Dashboard data still updates after filtering.

Return:

• Complete code changes with file paths.
• Content of docs/management-change-dashboard-filter-review.md.