e140908034
Connect all CRM pages to the BFF and CRM service, add module docs, and mark CRM available in the SuperApp catalog. Co-authored-by: Cursor <cursoragent@cursor.com>
61 lines
2.3 KiB
Markdown
61 lines
2.3 KiB
Markdown
# CRM Responsive Report
|
||
|
||
**Date:** 2026-07-26
|
||
|
||
## Breakpoints tested (design intent)
|
||
|
||
| Breakpoint | Layout behavior |
|
||
|------------|-----------------|
|
||
| Desktop (≥1024px) | Fixed sidebar 256px, full table, multi-column dashboards |
|
||
| Tablet (768–1023px) | Collapsible nav groups, horizontal scroll tables, 2-col stat grid |
|
||
| Mobile (<768px) | Hamburger → drawer sidebar, stacked forms, single-col stats |
|
||
|
||
## Component responsiveness
|
||
|
||
| Component | Desktop | Tablet | Mobile |
|
||
|-----------|---------|--------|--------|
|
||
| `CrmPortalShell` | Sidebar visible | Sidebar visible | Drawer overlay |
|
||
| `CrmTablePage` | Full table | `overflow-x-auto` min-width 640px | Horizontal scroll + compact toolbar |
|
||
| `CrmStatGrid` | 4 columns (`xl:grid-cols-4`) | 2 columns | 1–2 columns |
|
||
| Kanban board | Multi-column row | Horizontal scroll columns | Swipe scroll columns |
|
||
| Dialog / Drawer | Center dialog / side drawer | Full-width dialog | Full-screen friendly padding |
|
||
| Customers split view | 2-column grid | 2-column | Stacked sections |
|
||
|
||
## RTL
|
||
|
||
- All layouts use logical RTL flow (Persian copy, right-aligned nav)
|
||
- Search icon positioned `right-3` for RTL input padding
|
||
- Breadcrumbs and sidebar labels right-aligned
|
||
|
||
## Dark mode
|
||
|
||
- Uses global `ColorModeProvider` toggle in shell
|
||
- CRM tokens defined in `:root` and `.dark` in `globals.css`
|
||
- Surfaces: `--surface`, `--canvas`, `--border` from platform DS
|
||
|
||
## Accessibility
|
||
|
||
- Dialog: `role="dialog"`, `aria-modal`, Escape to close
|
||
- Loading: `LoadingState` with visible label
|
||
- Tables: semantic `<table>` via `DataTable`
|
||
- Icon buttons: `aria-label` on edit/delete/complete actions
|
||
- Sort select: `aria-label="مرتبسازی"`
|
||
|
||
## Touch targets
|
||
|
||
- Mobile menu button 44px (`size="icon"`)
|
||
- Kanban stage move buttons padded for touch
|
||
- Pagination buttons min height ~36px
|
||
|
||
## Performance notes
|
||
|
||
- Lists fetch up to 500 rows per resource (backend max page_size)
|
||
- Dashboard parallel `Promise.all` for counts
|
||
- TanStack Query caching per `["crm", tenantId, resource]`
|
||
|
||
## Gaps / follow-ups
|
||
|
||
1. Kanban drag-and-drop not implemented — uses button stage move (touch-friendly alternative)
|
||
2. Calendar dashboard is list view, not full calendar grid (no calendar API)
|
||
3. Virtualized tables not added — acceptable for ≤500 row client cap
|