alla-tms/docs/pre-sprint-6-responsive-audit-review.md

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

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