root
34 lines
2.3 KiB
Markdown
34 lines
2.3 KiB
Markdown
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. |