commit

plans/change-dashboard-filter.md

@@ -0,0 +1,116 @@
+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.