morteza/TorbatYar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
fb05937790
TorbatYar/frontend/docs/crm-responsive-report.md
Mortezakoohjani e140908034 Ship enterprise CRM frontend with real API wiring and thin app routes. 
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>
2026-07-26 20:58:17 +03:30

2.3 KiB
Raw Blame History

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