commit

2026-07-16 09:53:14 +07:00
parent 0fc112a2e8
commit 29cec708a3
1236 changed files with 212848 additions and 0 deletions
--- a/docs/pre-sprint-6-responsive-audit-review.md
+++ b/docs/pre-sprint-6-responsive-audit-review.md
@@ -0,0 +1,150 @@
+# 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