From 5af7f0606be5b061e69093ac005d45fe45ea4c06 Mon Sep 17 00:00:00 2001
From: natib21 <yaschalew10@gmail.com>
Date: Tue, 30 Jun 2026 13:52:27 +0000
Subject: [PATCH] style: apply consistent branding across fleet pages

Import freightBrand theme from @/theme/freight-brand

Color updates:
- Primary buttons: color="edr-green"
- Stat cards: top border #1B9E7A (freightBrand.primary)
- Status badges:
  * Active/Completed: edr-green
  * In Progress: edr-amber-soft
  * Maintenance: edr-amber-soft
  * Overdue: edr-red
  * Unassigned: edr-slate
- Ring progress:
  * Fuel: edr-accent (#F2A516)
  * Maintenance: edr-red
- Progress bars: edr-green, edr-red, edr-amber-soft
- Icons: Use edr-green, edr-blue, edr-accent, edr-red per metric

Pages updated:
- FleetDashboard: All metrics, progress bars, badges
- FuelPurchasePage: Record button
- MaintenancePage: Schedule button, badges
- FinancialReportsPage: Ring progress colors

Consistent palette across all fleet pages.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .../src/pages/fleet/FinancialReportsPage.tsx  |  5 ++-
 .../src/pages/fleet/FleetDashboard.tsx        | 45 ++++++++++---------
 .../src/pages/fleet/FuelPurchasePage.tsx      |  3 +-
 .../src/pages/fleet/MaintenancePage.tsx       | 16 ++++---
 4 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/apps/edr-freight-web/backoffice/src/pages/fleet/FinancialReportsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/fleet/FinancialReportsPage.tsx
index 729c50427..f61583f8f 100644
--- a/apps/edr-freight-web/backoffice/src/pages/fleet/FinancialReportsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/fleet/FinancialReportsPage.tsx
@@ -4,6 +4,7 @@ import { Card, Button, Stack, Group, Grid, Select, Text, ThemeIcon, RingProgress
 import { QUERY_KEYS } from '@/constants/QUERY_KEYS';
 import { api } from '@/services/api';
 import { vehiclesService } from '@/services/vehicles.service';
+import { freightBrand } from '@/theme/freight-brand';
 
 interface FuelStats {
   vehicleId: string;
@@ -162,7 +163,7 @@ export function FinancialReportsPage() {
                         <Text fw={500}>{report.fuelPercentage}%</Text>
                       </Stack>
                       <RingProgress
-                        sections={[{ value: report.fuelPercentage, color: 'blue' }]}
+                        sections={[{ value: report.fuelPercentage, color: 'edr-accent' }]}
                         label={
                           <Text size="xs" align="center">
                             {report.fuelPercentage}%
@@ -180,7 +181,7 @@ export function FinancialReportsPage() {
                         <Text fw={500}>{report.maintenancePercentage}%</Text>
                       </Stack>
                       <RingProgress
-                        sections={[{ value: report.maintenancePercentage, color: 'orange' }]}
+                        sections={[{ value: report.maintenancePercentage, color: 'edr-red' }]}
                         label={
                           <Text size="xs" align="center">
                             {report.maintenancePercentage}%
diff --git a/apps/edr-freight-web/backoffice/src/pages/fleet/FleetDashboard.tsx b/apps/edr-freight-web/backoffice/src/pages/fleet/FleetDashboard.tsx
index a977c592d..12c5725ed 100644
--- a/apps/edr-freight-web/backoffice/src/pages/fleet/FleetDashboard.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/fleet/FleetDashboard.tsx
@@ -1,11 +1,12 @@
 import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { Card, Stack, Group, Grid, Text, ThemeIcon, Progress, Badge, Table, RingProgress, Container, Title, Box, Tabs } from '@mantine/core';
-import { Truck, Fuel, Wrench, TrendingUp, AlertCircle, Users, User, MapPin, Calendar } from 'lucide-react';
+import { Card, Stack, Group, Grid, Text, ThemeIcon, Progress, Badge, Table, RingProgress, Container, Title, Box, Tabs, Button } from '@mantine/core';
+import { Truck, Fuel, Wrench, TrendingUp, AlertCircle, Users, User, MapPin, Calendar, BarChart3 } from 'lucide-react';
 import Breadcrumbs from '@/components/ui/Breadcrumbs';
 import { QUERY_KEYS } from '@/constants/QUERY_KEYS';
 import { api } from '@/auth/http';
 import { vehiclesService } from '@/services/vehicles.service';
+import { freightBrand } from '@/theme/freight-brand';
 
 interface Vehicle {
   id: string;
@@ -38,10 +39,10 @@ interface FleetMetrics {
   assignedDrivers: number;
 }
 
-const StatCard = ({ icon: Icon, label, value, color = 'blue', change }: any) => (
-  <Card withBorder p="lg" radius="md">
+const StatCard = ({ icon: Icon, label, value, color = 'edr-green', change }: any) => (
+  <Card withBorder p="lg" style={{ borderTop: `3px solid ${freightBrand.primary}` }}>
     <Group justify="space-between" mb="sm">
-      <ThemeIcon size="xl" radius="md" variant="gradient" gradient={{ from: color, to: color, deg: 135 }}>
+      <ThemeIcon size="xl" radius="md" color={color} variant="light">
         <Icon size={28} />
       </ThemeIcon>
     </Group>
@@ -50,10 +51,10 @@ const StatCard = ({ icon: Icon, label, value, color = 'blue', change }: any) =>
         {label}
       </Text>
       <Group justify="space-between">
-        <Text fw={700} size="xl">
+        <Text fw={700} size="xl" c="edr-ink">
           {value}
         </Text>
-        {change && <Badge color={change > 0 ? 'green' : 'red'} size="lg">{change > 0 ? '+' : ''}{change}%</Badge>}
+        {change && <Badge color={change > 0 ? 'edr-green' : 'edr-red'} size="lg">{change > 0 ? '+' : ''}{change}%</Badge>}
       </Group>
     </Stack>
   </Card>
@@ -145,16 +146,16 @@ export function FleetDashboard() {
       {/* Primary Metrics */}
       <Grid mb="xl">
         <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
-          <StatCard icon={Truck} label="Total Vehicles" value={metrics.totalVehicles} color="blue" />
+          <StatCard icon={Truck} label="Total Vehicles" value={metrics.totalVehicles} color="edr-green" />
         </Grid.Col>
         <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
-          <StatCard icon={Users} label="Total Drivers" value={metrics.totalDrivers} color="cyan" />
+          <StatCard icon={Users} label="Total Drivers" value={metrics.totalDrivers} color="edr-blue" />
         </Grid.Col>
         <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
-          <StatCard icon={Fuel} label="Fuel Spend" value={`$${metrics.totalFuelSpend.toFixed(0)}`} color="orange" />
+          <StatCard icon={Fuel} label="Fuel Spend" value={`$${metrics.totalFuelSpend.toFixed(0)}`} color="edr-accent" />
         </Grid.Col>
         <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
-          <StatCard icon={Wrench} label="Maintenance" value={`$${metrics.totalMaintenanceSpend.toFixed(0)}`} color="red" />
+          <StatCard icon={Wrench} label="Maintenance" value={`$${metrics.totalMaintenanceSpend.toFixed(0)}`} color="edr-red" />
         </Grid.Col>
       </Grid>
 
@@ -172,15 +173,15 @@ export function FleetDashboard() {
                     <Text size="sm">Active Vehicles</Text>
                     <Text fw={700}>{metrics.activeVehicles} / {metrics.totalVehicles}</Text>
                   </Group>
-                  <Progress value={(metrics.activeVehicles / metrics.totalVehicles) * 100} color="green" />
+                  <Progress value={(metrics.activeVehicles / metrics.totalVehicles) * 100} color="edr-green" />
                 </div>
 
                 <div>
                   <Group justify="space-between" mb="xs">
                     <Text size="sm">Maintenance Overdue</Text>
-                    <Badge color="red">{metrics.maintenanceOverdue}</Badge>
+                    <Badge color="edr-red">{metrics.maintenanceOverdue}</Badge>
                   </Group>
-                  <Progress value={0} color="red" />
+                  <Progress value={0} color="edr-red" />
                 </div>
 
                 <div>
@@ -188,7 +189,7 @@ export function FleetDashboard() {
                     <Text size="sm">Idle / Under Maintenance</Text>
                     <Text fw={700}>{metrics.totalVehicles - metrics.activeVehicles}</Text>
                   </Group>
-                  <Progress value={((metrics.totalVehicles - metrics.activeVehicles) / metrics.totalVehicles) * 100} color="yellow" />
+                  <Progress value={((metrics.totalVehicles - metrics.activeVehicles) / metrics.totalVehicles) * 100} color="edr-amber-soft" />
                 </div>
               </Stack>
             </Card.Section>
@@ -205,8 +206,8 @@ export function FleetDashboard() {
                 <Group justify="center">
                   <RingProgress
                     sections={[
-                      { value: fuelPercent, color: 'orange' },
-                      { value: 100 - fuelPercent, color: 'red' },
+                      { value: fuelPercent, color: 'edr-accent' },
+                      { value: 100 - fuelPercent, color: 'edr-red' },
                     ]}
                     label={
                       <div style={{ textAlign: 'center' }}>
@@ -226,7 +227,7 @@ export function FleetDashboard() {
                 <div>
                   <Group justify="space-between">
                     <Group gap="xs">
-                      <ThemeIcon size="sm" color="orange" variant="light">
+                      <ThemeIcon size="sm" color="edr-accent" variant="light">
                         <Fuel size={14} />
                       </ThemeIcon>
                       <Text size="sm">Fuel</Text>
@@ -238,7 +239,7 @@ export function FleetDashboard() {
                 <div>
                   <Group justify="space-between">
                     <Group gap="xs">
-                      <ThemeIcon size="sm" color="red" variant="light">
+                      <ThemeIcon size="sm" color="edr-red" variant="light">
                         <Wrench size={14} />
                       </ThemeIcon>
                       <Text size="sm">Maintenance</Text>
@@ -284,7 +285,7 @@ export function FleetDashboard() {
                         {v.manufacturer} {v.model}
                       </Table.Td>
                       <Table.Td>
-                        <Badge color={v.status === 'ACTIVE' ? 'green' : v.status === 'MAINTENANCE' ? 'yellow' : 'gray'}>
+                        <Badge color={v.status === 'ACTIVE' ? 'edr-green' : v.status === 'MAINTENANCE' ? 'edr-amber-soft' : 'gray'}>
                           {v.status || 'UNKNOWN'}
                         </Badge>
                       </Table.Td>
@@ -337,9 +338,9 @@ export function FleetDashboard() {
                       </Table.Td>
                       <Table.Td>
                         {d.assignedVehicle ? (
-                          <Badge color="green">Assigned</Badge>
+                          <Badge color="edr-green">Assigned</Badge>
                         ) : (
-                          <Badge color="gray">Unassigned</Badge>
+                          <Badge color="edr-slate">Unassigned</Badge>
                         )}
                       </Table.Td>
                     </Table.Tr>
diff --git a/apps/edr-freight-web/backoffice/src/pages/fleet/FuelPurchasePage.tsx b/apps/edr-freight-web/backoffice/src/pages/fleet/FuelPurchasePage.tsx
index 0869ceb26..574b9d1c6 100644
--- a/apps/edr-freight-web/backoffice/src/pages/fleet/FuelPurchasePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/fleet/FuelPurchasePage.tsx
@@ -23,6 +23,7 @@ import { useToast } from "@/hooks/use-toast";
 import { api } from "@/auth/http";
 import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
 import { vehiclesService, type Vehicle as VehicleType } from "@/services/vehicles.service";
+import { freightBrand } from "@/theme/freight-brand";
 
 interface FuelPurchase {
   id: string;
@@ -123,7 +124,7 @@ export default function FuelPurchasePage() {
 
       <Group justify="space-between" mb="lg">
         <Title order={1}>Fuel Purchases</Title>
-        <Button leftSection={<Plus size={16} />} onClick={() => setModalOpen(true)}>
+        <Button leftSection={<Plus size={16} />} onClick={() => setModalOpen(true)} color="edr-green">
           Record Purchase
         </Button>
       </Group>
diff --git a/apps/edr-freight-web/backoffice/src/pages/fleet/MaintenancePage.tsx b/apps/edr-freight-web/backoffice/src/pages/fleet/MaintenancePage.tsx
index d94ed375c..61c1215ba 100644
--- a/apps/edr-freight-web/backoffice/src/pages/fleet/MaintenancePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/fleet/MaintenancePage.tsx
@@ -2,9 +2,11 @@ import { useState, useMemo } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { Card, Button, Modal, Stack, Group, Grid, Select, TextInput, NumberInput, Table, Badge, Text } from '@mantine/core';
 import { DateInput } from '@mantine/dates';
+import { Plus } from 'lucide-react';
 import { QUERY_KEYS } from '@/constants/QUERY_KEYS';
 import { api } from '@/services/api';
 import { vehiclesService } from '@/services/vehicles.service';
+import { freightBrand } from '@/theme/freight-brand';
 
 interface MaintenanceSchedule {
   id: string;
@@ -76,12 +78,12 @@ export function MaintenancePage() {
 
   const statusColor = (status: string) => {
     const colors: Record<string, string> = {
-      SCHEDULED: 'blue',
-      IN_PROGRESS: 'yellow',
-      COMPLETED: 'green',
-      OVERDUE: 'red',
+      SCHEDULED: 'edr-blue',
+      IN_PROGRESS: 'edr-amber-soft',
+      COMPLETED: 'edr-green',
+      OVERDUE: 'edr-red',
     };
-    return colors[status] || 'gray';
+    return colors[status] || 'edr-slate';
   };
 
   return (
@@ -90,7 +92,9 @@ export function MaintenancePage() {
         <Card.Section p="md" withBorder>
           <Group justify="space-between">
             <Text fw={500}>Schedule Maintenance</Text>
-            <Button onClick={() => setOpenScheduleModal(true)}>New Schedule</Button>
+            <Button onClick={() => setOpenScheduleModal(true)} color="edr-green" leftSection={<Plus size={16} />}>
+              New Schedule
+            </Button>
           </Group>
         </Card.Section>
         <Card.Section p="md">