81 lines
3.8 KiB
Markdown
81 lines
3.8 KiB
Markdown
# Premium UI implementation validation
|
|
|
|
Date: 2026-08-02
|
|
Branch: `design/mobilityops-premium-ui`
|
|
|
|
## Implemented scope
|
|
|
|
- New responsive Control Rail shell, icon system, product mark, top bar, desktop rail,
|
|
off-canvas navigation and labelled mobile bottom navigation.
|
|
- Redesigned login, dashboard, fleet, vehicle, bookings, booking return, data quality,
|
|
duplicate review, knowledge, integrations and audit surfaces.
|
|
- Return capture now has an explicit review step; no return API request is sent before
|
|
confirmation. The existing idempotency key and local-commit/outbox behavior remain.
|
|
- Booking rows are limited to 25 per client-side page; mobile tables keep explicit field
|
|
labels through `data-label` semantics.
|
|
- Loading, empty and error surfaces, focus treatment, reduced-motion handling and honest
|
|
integration states are shared system behaviors.
|
|
|
|
## Visual evidence
|
|
|
|
Desktop:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Mobile:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The complete capture set is in `artifacts/design-validation/implementation/`.
|
|
|
|
Deployed review captures taken from `http://192.168.10.150:1236` are stored under
|
|
`artifacts/design-validation/implementation/deployed/`. The deployed smoke covered login,
|
|
dashboard, fleet list/detail, bookings list/active return, quality list/duplicate review,
|
|
knowledge, integrations and audit at both desktop and mobile sizes.
|
|
|
|
## Responsive evidence
|
|
|
|
Browser evaluation measured the document element after authenticated page render:
|
|
|
|
| Width | Client width | Scroll width | Result |
|
|
|---:|---:|---:|---|
|
|
| 390 | 375 (vertical scrollbar present) | 375 | no horizontal overflow |
|
|
| 768 | 753 (vertical scrollbar present) | 753 | no horizontal overflow |
|
|
| 1280 | 1265 (vertical scrollbar present) | 1265 | no horizontal overflow |
|
|
| 1440 | 1425 (vertical scrollbar present) | 1425 | no horizontal overflow |
|
|
|
|
The same widths are automated in `frontend/e2e/ui-redesign.spec.ts`.
|
|
|
|
## Deployed smoke result
|
|
|
|
- All ten authenticated desktop routes rendered their expected page heading with no
|
|
visible alert state and no horizontal overflow.
|
|
- The same ten routes plus login rendered at 390 px with no alert state and
|
|
`scrollWidth === clientWidth`.
|
|
- Browser console: zero error or warning entries after the full route smoke.
|
|
- Authenticated network verification through the deployed web proxy returned HTTP 200
|
|
for dashboard, vehicles, active booking, open quality issues, knowledge status,
|
|
workflows and audit.
|
|
- Container verification: PostgreSQL and API healthy, web HTTP 200, and the server's
|
|
existing n8n on port 5678 returned healthy. No second MobilityOps n8n container is
|
|
running. A synthetic return completed the shared-n8n callback on attempt 1 and the demo
|
|
was reset to its deterministic start state.
|
|
|
|
## Performance choices
|
|
|
|
- No image runtime dependency and no animation library were added.
|
|
- Branding, navigation and workflow illustrations are inline SVG/CSS.
|
|
- Inter is used only when locally available; there is no blocking font request.
|
|
- The production build remains a single small PoC bundle (approximately 239 kB JS and
|
|
37 kB CSS uncompressed at implementation time).
|