# Professional Back Office UI/UX Specification — v64

## Product posture
Retail OS must present as a commercial SaaS application, not a collection of
administrative forms. Information density, navigation predictability, responsive
behavior, accessibility, and visual polish are product requirements.

## Foundation delivered in v64
- Persistent responsive application shell.
- Mobile navigation drawer.
- Light / Dark / System theme persisted per browser.
- Compact commercial SaaS visual density.
- Global command palette (`Ctrl+K`).
- Shortcut help (`Ctrl+/`) and module shortcuts.
- Primary actions in the page header.
- Reusable Modal, KPI, chart, data-table and empty-state patterns.
- Real reporting dashboard and branch report connected to Reporting APIs.
- CSV export and print/PDF browser workflow.
- Products/categories/brands split into separate pages instead of stacked forms.
- Register scope suppressed from Back Office catalog/reporting calls.
- Responsive desktop/tablet/mobile breakpoints.
- Print-specific stylesheet.

## Typography
The stack prefers `IBM Plex Sans Arabic` when available, then Segoe UI/Tahoma.
A self-hosted licensed/application font package can replace the fallback later
without changing component architecture. Font files are not embedded in this patch.

## Charts
v64 provides dependency-free SVG/CSS chart primitives to avoid introducing an
unreviewed frontend dependency during the architecture rewrite. The chart API is
encapsulated so Apache ECharts can replace/extend it for heatmaps, drill-down,
advanced legends and larger analytics dashboards in the analytics sprint.

## Performance rules
- Route/module content must be loaded only when needed.
- Large lists use server pagination/filtering once list endpoints support it.
- Charts are not duplicated in hidden pages.
- Dashboard remains summary-first.
- Avoid loading unrelated domain data in one page.