fix: use vehiclesService and add VEHICLES QUERY_KEYS

- Add VEHICLES to QUERY_KEYS constant
- Use vehiclesService.getAll() instead of direct API call
- Remove duplicate Vehicle type definitions
- Fix TypeScript type references

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

apps/edr-freight-web/backoffice/src/constants/QUERY_KEYS.ts

@@ -98,6 +98,12 @@ export const QUERY_KEYS = {
     list: (resource: FleetResourceSlug | string) => ["fleet", "list", resource] as const,
   },
 
+  VEHICLES: {
+    ROOT: ["vehicles"] as const,
+    list: (filter?: Record<string, unknown>) => ["vehicles", "list", filter ?? {}] as const,
+    byId: (id: string) => ["vehicles", "detail", id] as const,
+  },
+
   FIRST_MILE: {
     ROOT: ["first-mile"] as const,
     list: (filter?: Record<string, unknown>) => ["first-mile", "list", filter ?? {}] as const,

apps/edr-freight-web/backoffice/src/pages/fleet/FuelPurchasePage.tsx

@@ -22,6 +22,7 @@ import Breadcrumbs from "@/components/ui/Breadcrumbs";
 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";
 
 interface FuelPurchase {
   id: string;
@@ -38,12 +39,6 @@ interface FuelPurchase {
   notes?: string;
 }
 
-interface Vehicle {
-  id: string;
-  plateNumber: string;
-  manufacturer: string;
-  model: string;
-}
 
 export default function FuelPurchasePage() {
   const { toast } = useToast();
@@ -65,8 +60,8 @@ export default function FuelPurchasePage() {
   const { data: vehiclesData } = useQuery({
     queryKey: QUERY_KEYS.VEHICLES.list(),
     queryFn: async () => {
-      const res = await api.get("/vehicles?pageSize=1000");
-      return res.data?.data || [];
+      const res = await vehiclesService.getAll({ limit: 1000 });
+      return res.data || [];
     },
   });
 
@@ -115,7 +110,7 @@ export default function FuelPurchasePage() {
   });
 
   const vehicleOptions =
-    vehiclesData?.map((v: Vehicle) => ({
+    vehiclesData?.map((v: VehicleType) => ({
       value: v.id,
       label: `${v.plateNumber} - ${v.manufacturer} ${v.model}`,
     })) || [];

apps/edr-freight-web/backoffice/src/pages/fleet/FuelStatsPage.tsx

@@ -3,6 +3,7 @@ import { Box, Card, Container, Grid, Group, Select, Stack, Table, Text, Title, B
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
 import { api } from "@/auth/http";
 import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
+import { vehiclesService, type Vehicle as VehicleType } from "@/services/vehicles.service";
 import { useState } from "react";
 
 interface FuelStats {
@@ -14,14 +15,6 @@ interface FuelStats {
   dateRange: { startDate: string; endDate: string };
 }
 
-interface Vehicle {
-  id: string;
-  plateNumber: string;
-  manufacturer: string;
-  model: string;
-  actualDistanceKm?: number;
-}
-
 export default function FuelStatsPage() {
   const [selectedVehicleId, setSelectedVehicleId] = useState<string>("");
   const [monthsBack, setMonthsBack] = useState<string>("12");
@@ -30,8 +23,8 @@ export default function FuelStatsPage() {
   const { data: vehiclesData } = useQuery({
     queryKey: QUERY_KEYS.VEHICLES.list(),
     queryFn: async () => {
-      const res = await api.get("/vehicles?pageSize=1000");
-      return res.data?.data || [];
+      const res = await vehiclesService.getAll({ limit: 1000 });
+      return res.data || [];
     },
   });
 
@@ -47,12 +40,12 @@ export default function FuelStatsPage() {
   });
 
   const vehicleOptions =
-    vehiclesData?.map((v: Vehicle) => ({
+    vehiclesData?.map((v: VehicleType) => ({
       value: v.id,
       label: `${v.plateNumber} - ${v.manufacturer} ${v.model}`,
     })) || [];
 
-  const selectedVehicle = vehiclesData?.find((v: Vehicle) => v.id === selectedVehicleId);
+  const selectedVehicle = vehiclesData?.find((v: VehicleType) => v.id === selectedVehicleId);
 
   const costPerKm =
     statsData && selectedVehicle?.actualDistanceKm