About This Layout

FleetView -- Map + Sidebar Logistics. A production-grade fleet management dashboard with lime/green operational theme, motion-animated map, and recharts data visualization.

Implemented Features

Light Operational Theme

Scoped CSS custom properties (--fv-bg, --fv-accent, --fv-active, --fv-idle, --fv-transit, etc.) define a light #f6f8f5 background with lime-600 (#65a30d) accent. Status colors: active green, idle yellow, maintenance red, transit blue, delivering violet.

Typography

Primary font: DM Sans (var(--font-dm-sans)) for all body text. Monospace: Geist Mono (var(--font-geist-mono)) for license plates, coordinates, and data values. Uppercase tracking-widest labels for section headers.

Signature Animation: Vehicle Marker Position Interpolation

Vehicle markers on the map smoothly interpolate between positions using motion animate with spring physics (stiffness: 30, damping: 20, mass: 1.5). Moving vehicles cycle through 3 keyframe positions every 4 seconds, creating a natural GPS tracking effect.

Signature Animation: Route Path Draw

SVG route paths animate their stroke with pathLength from 0 to 1, creating a drawing effect. Each path has a gradient stroke (fleetview-route-grad-*) and a staggered delay (0.5s + 0.4s per path). Waypoint dots scale in with spring physics.

Signature Animation: Status Color Transition

Vehicle marker dots animate their backgroundColor when status changes using motion animate with 0.8s duration. Combined with glow shadows that match the current status color for a pulsing, data-rich map feel.

Motion Library

Using motion/react (v12+) for all animations. Sidebar nav items stagger in (delay: 0.05 * i). Badge count scales with spring (stiffness: 500). Vehicle list uses AnimatePresence with popLayout for filter transitions. Vehicle info popup springs in (scale: 0.9->1).

Recharts Data Visualization

Three chart types: Bar chart (fleet utilization hours, deliveries per vehicle with fleetview-util-grad, fleetview-deliv-grad), Area chart (fuel consumption with fleetview-fuel-grad), Line chart (delivery time trends with target line). All gradient IDs prefixed 'fleetview-'.

Interactive Vehicle Table

Vehicles page has sortable columns (click to toggle asc/desc on ID, make, status, mileage, fuel). Row hover states, fuel progress bars with color thresholds (>50 green, >25 yellow, else red). License plates in monospace.

Mock Map Architecture

Stylized topographic map with: grid overlay (80px + 20px), terrain features (water bodies, parks, urban zones), road network (interstate, secondary, local with highway labels), city labels, coordinate bar with scale. All composable sub-components.

Domain-Specific Sub-Pages

All 7 sub-pages have logistics content: Vehicles (fleet table + utilization chart), Drivers (cards with HOS progress), Routes (route cards with waypoints + trend chart), Alerts (filterable with acknowledge/dismiss), Reports (6 metric cards + 3 charts), Settings (7 config sections), About.

Theme Tokens

--fv-bg

Background

--fv-bg-sidebar

Sidebar

--fv-bg-card

Card

--fv-border-subtle

Border

--fv-text

Text

--fv-text-muted

Muted

--fv-text-dim

Dim

--fv-accent

Accent (lime)

--fv-accent-dark

Accent Dark

--fv-active

Active

--fv-idle

Idle

--fv-transit

Transit

--fv-delivering

Delivering

--fv-maintenance

Maintenance

Charts Reference

TypeUsagePageGradient ID
Bar ChartFleet utilization (hours per vehicle)Vehiclesfleetview-util-grad
Bar Chart (stacked)Fleet utilization (active/idle/maintenance)ReportsN/A (solid colors)
Line ChartDelivery time trends vs targetRoutesfleetview-delivery-grad
Area ChartFuel consumption (weekly gallons)Reportsfleetview-fuel-grad
Bar ChartDeliveries per vehicle (monthly)Reportsfleetview-deliv-grad

Motion Animations

Vehicle marker interpolationanimate: {top, left}, spring: stiffness 30, damping 20, mass 1.5, keyframe cycle every 4s
Route path drawinitial: {pathLength: 0}, animate: {pathLength: 1}, duration: 2.5s, staggered delay: 0.4s per path
Status color transitionanimate: {backgroundColor: colors.fill}, duration: 0.8s
Sidebar nav staggerstagger: 0.05 * i, spring: stiffness 200, damping 20
Alert badge bounceinitial: {scale: 0}, animate: {scale: 1}, spring: stiffness 500, damping 15
Vehicle list filterAnimatePresence mode=popLayout, spring: stiffness 300, damping 25
Vehicle info popupinitial: {opacity: 0, scale: 0.9, y: 8}, spring: stiffness 300, damping 25
Fleet stat hoverwhileHover: {scale: 1.03}, spring: stiffness 400, damping 20
Selection ring pulseanimate: {scale: [1, 1.6, 1], opacity: [0.3, 0, 0.3]}, duration: 2s, repeat: Infinity
Hours of service barinitial: {width: 0}, animate: {width: percentage%}, delay: 0.3s, duration: 0.6s

Tech Stack

Next.js 15 (App Router)React 19motion/react v12+recharts v3Tailwind CSS v4shadcn/uiDM Sans + Geist MonoLucide Icons
← Gallery