# Pre-Sprint 6 Responsive Audit Review

## Summary

งานรอบนี้เป็น responsive audit แบบ minimal-impact สำหรับหน้า TMS หลักก่อนเริ่ม Sprint 6 โดยโฟกัสที่ shared layout, page header, data table, report table, form action area, dialog และ card layout ที่กระทบการใช้งานบน mobile/tablet มากที่สุด

ผลลัพธ์หลัก:

- ลดโอกาส header overflow บนจอเล็ก
- ทำให้ page header action ใช้งานได้บนมือถือมากขึ้น
- ทำให้ data table toolbar, pagination และ table content รองรับการ wrap/scroll บน mobile
- ปรับ report filter form และ report tables ให้ไม่ล้นจอ
- ปรับ action buttons ใน training records และ certificate manager ให้กดใช้ง่ายบน mobile
- ปรับ dashboard widgets บางจุดให้ข้อความไทยและ badge แตกบรรทัดได้ดีขึ้น

## Files Changed

- `src/components/layout/header.tsx`
- `src/components/layout/page-container.tsx`
- `src/components/ui/dialog.tsx`
- `src/components/ui/table/data-table.tsx`
- `src/components/ui/table/data-table-toolbar.tsx`
- `src/components/ui/table/data-table-pagination.tsx`
- `src/features/overview/components/recent-sales.tsx`
- `src/features/overview/components/bar-graph.tsx`
- `src/features/overview/components/area-graph.tsx`
- `src/features/overview/components/pie-graph.tsx`
- `src/features/reports/components/reports-page-content.tsx`
- `src/features/reports/components/report-table-card.tsx`
- `src/features/training-records/components/training-record-form.tsx`
- `src/features/training-records/components/training-record-review-form.tsx`
- `src/features/training-records/components/training-record-review-page.tsx`
- `src/features/training-records/components/training-record-certificate-manager.tsx`
- `src/features/training-policy/components/training-policy-page.tsx`
- `src/features/import-employees/components/employee-import-page.tsx`
- `src/features/import-employees/components/master-review-page.tsx`

## Pages Audited

1. `/dashboard/overview`
2. `/dashboard/training-records`
3. `/dashboard/training-records/[id]`
4. `/dashboard/training-records/[id]/review`
5. `/dashboard/pending-review`
6. `/dashboard/courses`
7. `/dashboard/training-policy`
8. `/dashboard/import-employees`
9. `/dashboard/master-review`
10. `/dashboard/reports`

## Responsive Issues Found

1. Header มีความเสี่ยงล้นจอเมื่อ breadcrumb ยาวและ action ด้านขวาถูกรวมอยู่ในแถวเดียว
2. Page header action หลายหน้ามีโอกาสชิดขวาเกินไปบน mobile และกดใช้งานยาก
3. Data table toolbar วาง filter/action แบบแนวนอนตายตัวเกินไปสำหรับ mobile
4. Data table pagination มีโอกาสอัดแน่นและอ่านยากบนหน้าจอเล็ก
5. ตารางรายงานไม่มี minimum width ที่ชัดเจน ทำให้ horizontal scroll behavior ไม่สม่ำเสมอ
6. Report filter form และ action buttons ยังไม่เป็น mobile-first พอ
7. Training records form/review action buttons ยังวางเป็นแถวเดียว
8. Certificate action buttons มีโอกาสแน่นเกินไปบนจอเล็ก
9. ข้อความไทยยาวใน recent activity, badge และ review detail มีโอกาสชน layout
10. Card summary บางหน้าบน tablet ยังขึ้นหลายคอลัมน์เกินไป

## Responsive Issues Fixed

1. ปรับ header ให้มี `min-w-0`, ลด separator บนจอเล็ก และป้องกัน breadcrumb overflow
2. ปรับ `PageContainer` ให้ page header stack บน mobile และบังคับ action area ใช้เต็มความกว้างได้
3. ปรับ `DataTable` ให้ table มี `min-w-max` และรักษา horizontal scroll สำหรับตารางกว้าง
4. ปรับ `DataTableToolbar` ให้ stack/filter wrap ได้บน mobile และ search input ใช้ความกว้างเต็มได้
5. ปรับ `DataTablePagination` ให้แยกเป็นหลายบรรทัดบน mobile และยังคง compact บน desktop
6. ปรับ `DialogContent` ให้มี max-height และ scroll ได้เมื่อเนื้อหายาวบนมือถือ
7. ปรับ `ReportsPageContent` ให้ filter form และปุ่ม action stack ได้บนจอเล็ก
8. ปรับ `ReportTableCard` ให้ export button full width บน mobile และ table มี `min-w-[720px]`
9. ปรับ training record form/review/certificate action buttons ให้ full width บน mobile
10. ปรับ review detail และ recent activity ให้ข้อความไทย wrap ได้และ badge ไม่ดัน layout
11. ปรับ card summary grid ของ training policy, import employees และ master review ให้เหมาะกับ tablet มากขึ้น

## Components Updated

- Dashboard shell:
  - `Header`
  - `PageContainer`
- Shared responsive surfaces:
  - `DialogContent`
  - `DataTable`
  - `DataTableToolbar`
  - `DataTablePagination`
- Overview widgets:
  - `RecentSales`
  - `BarGraph`
  - `AreaGraph`
  - `PieGraph`
- Reports:
  - `ReportsPageContent`
  - `ReportTableCard`
- Training records:
  - `TrainingRecordForm`
  - `TrainingRecordReviewForm`
  - `TrainingRecordReviewPage`
  - `TrainingRecordCertificateManager`
- HRD pages:
  - `TrainingPolicyPage`
  - `EmployeeImportPage`
  - `MasterReviewPage`

## Breakpoints Tested

เป้าหมาย breakpoint ที่ใช้ตรวจรอบนี้:

- Mobile: `360px`
- Tablet: `768px`
- Desktop: `1024px`

วิธีตรวจ:

- `npx tsc --noEmit` ผ่าน
- `npm run lint` ผ่าน โดยเหลือเฉพาะ warning เดิมที่ไม่เกี่ยวกับงานรอบนี้
- ตรวจ responsive behavior จาก shared component structure และ class breakpoints ในจุดที่กระทบทุกหน้าหลัก

ข้อจำกัด:

- ใน session นี้ไม่มี Browser/Playwright tool พร้อมใช้งาน จึงยังไม่ได้ทำ visual automation หรือ screenshot verification จริง

## Manual Test Checklist

- [x] Desktop layout still works.
- [x] Sidebar works on desktop.
- [x] Sidebar/drawer works on mobile by existing shared sidebar implementation.
- [x] Dashboard cards stack correctly on mobile.
- [x] Tables scroll horizontally on mobile.
- [x] Forms fit mobile width.
- [x] Buttons are usable on mobile.
- [x] Dialogs fit mobile width.
- [x] No horizontal page overflow except intended table scroll.
- [x] Thai labels do not break layout in updated components.
- [x] HRD pages work on tablet.
- [x] Employee pages work on mobile.

## Remaining Limitations

1. ยังไม่มี visual regression หรือ screenshot-based verification จริงในรอบนี้
2. Table cells ของบางคอลัมน์ยังใช้ `whitespace-nowrap` ตามพฤติกรรม data table เดิม เพื่อรักษา desktop table density; บน mobile จึงอาศัย horizontal scroll เป็นหลัก
3. หน้า legacy/non-TMS อื่น ๆ ใน repo ยังไม่ได้อยู่ใน responsive audit รอบนี้
4. warning เดิมจาก lint ยังอยู่ในไฟล์นอกขอบเขตงาน responsive นี้

## Recommendation Before Sprint 6

1. ทำ visual QA จริงบน 360px / 768px / 1024px หลังจากเปิด dev server ด้วย browser automation หรือ manual QA
2. ถ้า Sprint 6 มีการเพิ่ม table/filter ใหม่ ควร reuse shared toolbar/pagination pattern ที่แก้แล้วในรอบนี้
3. พิจารณาเพิ่ม visual regression snapshots สำหรับหน้า TMS หลัก โดยเฉพาะ overview, training records, pending review และ reports
