065c053c16
Introduces modules/hospitality with 54 routes, BFF proxy, capability-gated nav, CRUD factory, and architecture validation docs. Co-authored-by: Cursor <cursoragent@cursor.com>
56 lines
1.8 KiB
Markdown
56 lines
1.8 KiB
Markdown
# Hospitality Responsive Report
|
|
|
|
**Date:** 2026-07-26
|
|
**Product:** Torbat Food
|
|
|
|
## Breakpoints strategy
|
|
|
|
Mobile-first Tailwind utilities aligned with shared DS:
|
|
|
|
| Breakpoint | Layout behavior |
|
|
|------------|-----------------|
|
|
| `< lg` | Hidden sidebar; hamburger opens full-height drawer |
|
|
| `≥ lg` | Fixed 256px sidebar (`w-64`), content flex-1 |
|
|
| `sm` | Dashboard stat grid 2 columns |
|
|
| `xl` | Dashboard stat grid 4 columns |
|
|
|
|
## Component responsiveness
|
|
|
|
| Component | Mobile | Tablet | Desktop |
|
|
|-----------|--------|--------|---------|
|
|
| `HospitalityPortalShell` | Drawer nav | Drawer nav | Persistent sidebar |
|
|
| `HospitalityTablePage` | Horizontal scroll via DataTable | Full width search | Search max-w-md |
|
|
| Dashboard StatCards | Stack 1→2 cols | 2 cols | 4 cols |
|
|
| Dialogs | Full-width modal (DS) | Centered | Centered |
|
|
| Hub card | max-w-lg centered | Same | Same |
|
|
|
|
## Touch targets
|
|
|
|
- Nav links: `py-2.5` (~40px+ height)
|
|
- Icon buttons: DS `size="icon"` minimum
|
|
- Mobile menu button in header
|
|
|
|
## Performance on mobile
|
|
|
|
- Route-level code splitting via Next.js dynamic imports (default App Router)
|
|
- TanStack Query `staleTime` on capabilities (60s) reduces refetch
|
|
- Paginated lists (20 items) limit DOM size
|
|
|
|
## RTL on small screens
|
|
|
|
- Mobile drawer anchors from right (`absolute right-0`)
|
|
- Search icon positioned for RTL input padding
|
|
|
|
## Testing checklist
|
|
|
|
- [ ] iPhone SE: open drawer, navigate to menu items
|
|
- [ ] iPad: sidebar visible at lg
|
|
- [ ] Desktop 1920px: dashboard 4-column stats
|
|
- [ ] Dark mode toggle on mobile header/footer
|
|
|
|
## Lighthouse notes
|
|
|
|
- Use real backend in dev for accurate TTFB
|
|
- Images in menu media use refs only (no binary in hospitality service)
|
|
- Minimize layout shift: LoadingState skeletons on route transitions
|