151 lines
8.7 KiB
Markdown
151 lines
8.7 KiB
Markdown
# 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
|