From 8be47f98a981b263978235a02c789a844ece03d7 Mon Sep 17 00:00:00 2001
From: natib21 <yaschalew10@gmail.com>
Date: Tue, 30 Jun 2026 14:26:35 +0000
Subject: [PATCH] feat: show only active vehicles on tracking map

Filter vehicles to status === 'ACTIVE':
- Map markers: only active vehicles displayed
- Vehicle dropdown: only active vehicles selectable
- All vehicles list: renamed to "Active Vehicles (count)"
- All use activeVehicles useMemo computed from vehiclesWithGPS

Inactive vehicles (maintenance, idle, etc.) hidden from tracking view.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .../src/pages/fleet/TrackingPage.tsx          | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/apps/edr-freight-web/backoffice/src/pages/fleet/TrackingPage.tsx b/apps/edr-freight-web/backoffice/src/pages/fleet/TrackingPage.tsx
index e8fff9e0e..6bda1bba1 100644
--- a/apps/edr-freight-web/backoffice/src/pages/fleet/TrackingPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/fleet/TrackingPage.tsx
@@ -54,12 +54,17 @@ export function TrackingPage() {
     }));
   }, [vehicles]);
 
-  const selectedVehicle = vehiclesWithGPS.find(v => v.id === selectedVehicleId);
-  const vehicleOptions = useMemo(
-    () => vehiclesWithGPS.map(v => ({ label: v.registrationNumber, value: v.id })),
+  const activeVehicles = useMemo(
+    () => vehiclesWithGPS.filter(v => v.status === 'ACTIVE'),
     [vehiclesWithGPS]
   );
 
+  const selectedVehicle = activeVehicles.find(v => v.id === selectedVehicleId);
+  const vehicleOptions = useMemo(
+    () => activeVehicles.map(v => ({ label: v.registrationNumber, value: v.id })),
+    [activeVehicles]
+  );
+
   // Map dimensions
   const mapWidth = 800;
   const mapHeight = 500;
@@ -146,8 +151,8 @@ export function TrackingPage() {
                     ))}
                   </svg>
 
-                  {/* Vehicle markers */}
-                  {vehiclesWithGPS.map((vehicle) => {
+                  {/* Vehicle markers - show only active vehicles */}
+                  {vehiclesWithGPS.filter(v => v.status === 'ACTIVE').map((vehicle) => {
                     const coords = getMapCoords(vehicle.gps.lat, vehicle.gps.lng);
                     const isSelected = vehicle.id === selectedVehicleId;
 
@@ -303,14 +308,14 @@ export function TrackingPage() {
                 </Card>
               )}
 
-              {/* All Vehicles List */}
+              {/* All Active Vehicles List */}
               <Card withBorder p="lg">
                 <Stack gap="md">
-                  <Text fw={500}>All Vehicles</Text>
+                  <Text fw={500}>Active Vehicles ({activeVehicles.length})</Text>
                   <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
                     <Table size="sm">
                       <Table.Tbody>
-                        {vehiclesWithGPS.slice(0, 10).map(v => (
+                        {activeVehicles.slice(0, 10).map(v => (
                           <Table.Tr
                             key={v.id}
                             style={{