root
2.3 KiB
Proposed plan Phase 1 — Design tokens & primitives
Add .glass-card as the dark-mode companion to the existing .card (light mode) — same component, theme-aware via html.dark selector, so call sites don't need to branch. Add --bg-elevated, --border-accent, --glass-bg, glow shadows for dark; pick matching light-mode equivalents (soft shadow/border tints) so cards feel like one consistent design language in either mode, not "light mode = old style, dark mode = new style." Add .progress-bar / .progress-fill classes with light and dark variants (the mockup's blue/orange gradient fills work in both; just need lighter track colors for light mode). Add JetBrains Mono via next/font for metric values — works the same in both modes. Guard pulse/glow animations behind prefers-reduced-motion (applies regardless of theme).
Phase 2 — StatCard v2
Extend StatCard.tsx with optional target, progressPercent, pulse, valueGradient props, each with explicit light/dark Tailwind variants (dark: prefixes), backward-compatible with current usage. Update StatCard.test.ts, including a check that dark-mode classes are present.
Phase 3 — Dashboard home restructure
Reorganize (dashboard)/page.tsx into a 2/3 + 1/3 grid: bookings chart + new "Branch/Location Performance" list (left), quick stats (right) — laid out identically in both modes, only colors/surfaces change. New metrics (utilization rate, revenue/vehicle, fulfillment rate, branch breakdown) require backend fields on /analytics/dashboard (utilizationRate, fulfillmentRate, locationBreakdown[]) — flagged as a contract change, not faked. Drop the fixed-airport SVG map; replace with a data-driven branch list with progress bars, styled for both themes.
Phase 4 — Sidebar & TopBar polish
Sidebar: glass background in dark mode, equivalent frosted-white treatment in light mode; gradient logo badge and active-item glow tuned per theme so contrast stays good in both. TopBar: restyled search input with light/dark variants; keep only status indicators backed by real data.
Phase 5 — i18n & RTL pass
All new strings via the dictionary for fr/en/ar. Verify glass-cards, progress bars, and branch list mirror correctly in dir="rtl", in both light and dark.
Phase 6 — QA
Update/extend tests. Manual visual check of every changed component in 4 combinations: light+LTR, light+RTL, dark+LTR, dark+RTL.