redesign the homepage
Build & Deploy / Build & Push Docker Image (push) Failing after 47s
Build & Deploy / Deploy to VPS (push) Has been skipped
Test / API Unit Tests (push) Failing after 5m4s
Test / Marketplace Unit Tests (push) Failing after 4m55s
Test / Admin Unit Tests (push) Successful in 9m37s
Test / Dashboard Unit Tests (push) Successful in 9m37s
Test / API Integration Tests (push) Successful in 9m54s

This commit is contained in:
root
2026-06-26 16:27:21 -04:00
parent 256ff0814e
commit d7fb7b7a7b
1030 changed files with 107374 additions and 2657 deletions
+95
View File
@@ -0,0 +1,95 @@
# RentalDriveGo Phase 16 Operational UI Migration Report
**Date:** 2026-06-25
**Scope:** Operator dashboard and platform admin
**Design authority:** Existing Phase 16 homepage implementation and its blue/orange semantic design system
## Result
The dashboard and admin applications now use the same visual language as the Phase 16 homepage rather than behaving like separate products. The migration changes shared shells, global tokens, navigation, page hierarchy, cards, forms, tables, status treatments, responsive behavior, dark mode, RTL behavior, and focus states. API business logic and route contracts were deliberately left unchanged.
## Repository recovery
The previous navbar/footer refactor archive omitted the `homepage` and `api` applications. This package was rebuilt from the complete Phase 16 archive, then overlaid with the public navbar/footer refactor before the operational UI migration. The final repository contains:
- `homepage`
- `storefront`
- `dashboard`
- `admin`
- `api`
- validation scripts and documentation
## Shared visual system
Both operational applications now consume matching `phase16-tokens.css` files with:
- Homepage blue as the operational action color
- Orange reserved for conversion, focus, warning, and selected emphasis
- Shared light and dark surface mappings
- Shared 10 px, 16 px, 24 px, and 32 px radius scale
- Shared 44 px minimum interactive target
- Shared 76 px topbar and 272 px desktop sidebar dimensions
- Shared card, overlay, and focus shadows
- Inter for Latin content and Noto Sans Arabic fallbacks for Arabic
## Dashboard changes
- Rebuilt the authenticated shell with the Phase 16 page background, sidebar, sticky topbar, content width, and responsive spacing.
- Reworked sidebar branding, active navigation, user card, status marker, RTL logical borders, and mobile behavior.
- Reworked the topbar search, page title, status pill, notifications, account controls, and semantic icon buttons.
- Migrated all 19 dashboard routes to the shared page-heading or hero pattern.
- Applied shared styling to overview metrics, quick actions, reservations, contracts, online reservations, fleet, customers, team, reviews, complaints, offers, billing, subscription, reports, notifications, and settings.
- Preserved printable contract styling as a document surface while aligning its surrounding application controls.
## Admin changes
- Rebuilt the admin shell with the same Phase 16 sidebar, topbar, page background, status treatment, mobile drawer, language controls, theme controls, and user card.
- Migrated all 12 admin routes to the shared page-heading or hero pattern.
- Standardized companies, company details, renters, administrators, billing, pricing, containers, audit logs, notifications, menu management, site configuration, and overview pages.
- Converted operational create/save/preview actions from orange to homepage blue. Orange remains available for promotions, conversion previews, warnings, and focus.
- Standardized dynamic form controls through the shared `.field` utility.
## Shared component and CSS contract
The main reusable classes are:
- `.rdg-app-shell`
- `.rdg-workspace`
- `.rdg-sidebar`
- `.rdg-nav-item`
- `.rdg-topbar`
- `.rdg-app-main`
- `.rdg-app-content`
- `.rdg-page-hero`
- `.rdg-page-heading`
- `.rdg-page-kicker`
- `.panel`
- `.card`
- `.field`
- `.btn-primary`
- `.btn-secondary`
- `.btn-conversion`
## Behavior preserved
- Existing routes and URL structure
- Authentication and access guards
- API calls and data mutations
- English, French, and Arabic support
- True RTL layout behavior through logical properties
- Light, dark, and system theme behavior
- Embedded authentication behavior through `embedded=1`
- Print behavior for contracts
## Validation completed
- 596 TypeScript/TSX source files parsed with zero syntax failures.
- 190 local and alias imports checked in admin/dashboard with zero unresolved paths.
- 31 operational route pages checked for a Phase 16 page heading or hero.
- CSS brace balance checked for the migrated stylesheets.
- Shared shell, token, responsive, forced-color, auth-layout, and retired-brand assertions passed.
- Final archive integrity is checked after packaging.
## Build limitation
A production Next.js build was not run because the supplied archive does not include the monorepo root, root lockfile, root workspace configuration, installed dependencies, or the referenced `@rentaldrivego/types` workspace. Each application invokes that absent workspace in its `prebuild` script. Claiming a clean production build under those conditions would be fiction with a progress bar.