@burdenoff/microfe-movethewheels 2026.925.1 → 2026.925.3

package/src/movethewheels/pages/VehicleDetailsPage.tsx

@@ -4,7 +4,18 @@
 
 import { useEffect, useState } from 'react';
 import { useParams, useLocation } from 'react-router';
-import { Truck, ArrowLeft, MapPin, Fuel, UserRound, Edit, Save, Mail, Phone } from 'lucide-react';
+import {
+  Truck,
+  ArrowLeft,
+  MapPin,
+  Fuel,
+  UserRound,
+  Edit,
+  Save,
+  Mail,
+  Phone,
+  Trash2,
+} from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { StatusBadge, VehicleTypeBadge } from '../components/StatusBadge';
 import {
@@ -24,8 +35,20 @@ import {
   Avatar,
   AvatarFallback,
 } from '../components/ui';
-import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useVehicle, useVehicleDrivers, useFleet } from '../hooks/useFleet';
+import {
+  EmphasisPanel,
+  NextSteps,
+  PagePurpose,
+  ResponsiveDialog,
+  ResponsiveDialogContent,
+  ResponsiveDialogHeader,
+  ResponsiveDialogFooter,
+  ResponsiveDialogTitle,
+  ResponsiveDialogDescription,
+} from '@burdenoff/fe-libs/ui';
+import { useVehicle, useVehicleDrivers, useFleet, toApiVehicleStatus } from '../hooks/useFleet';
+import type { VehicleStatus } from '../types';
+import { VEHICLE_STATUS_LABELS } from '../constants';
 import { useRecordVehicleService } from '../hooks/useFleetIntelligence';
 import { VehicleServiceCard } from '../components/VehicleServiceCard';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
@@ -47,9 +70,19 @@ const VEHICLE_TYPE_OPTIONS = [
   { value: 'DRONE', label: 'Drone' },
 ];
 
+const VEHICLE_STATUS_OPTIONS: Array<{ value: VehicleStatus; label: string }> = (
+  Object.entries(VEHICLE_STATUS_LABELS) as Array<[VehicleStatus, string]>
+).map(([value, label]) => ({ value, label }));
+
+const OWNERSHIP_TYPE_OPTIONS = [
+  { value: 'owned', label: 'Owned' },
+  { value: 'leased', label: 'Leased' },
+  { value: 'rented', label: 'Rented' },
+];
+
 function NewVehicleForm({ editId }: { editId?: string }) {
   const { basePath, navigate } = useMoveTheWheels();
-  const { createVehicle, updateVehicle } = useFleet();
+  const { createVehicle, updateVehicle, deleteVehicle } = useFleet();
   const { vehicle } = useVehicle(editId);
   const isEditing = !!editId;
   const [form, setForm] = useState({
@@ -58,9 +91,20 @@ function NewVehicleForm({ editId }: { editId?: string }) {
     make: '',
     model: '',
     licensePlate: '',
+    ownershipType: '',
+    year: '',
+    status: 'available' as VehicleStatus,
+    fuelType: '',
+    fuelEfficiencyLPer100Km: '',
+    capacityWeight: '',
+    capacityVolume: '',
+    capacityPallets: '',
   });
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
 
   useEffect(() => {
     if (editId && vehicle) {
@@ -70,6 +114,17 @@ function NewVehicleForm({ editId }: { editId?: string }) {
         make: vehicle.make ?? '',
         model: vehicle.model ?? '',
         licensePlate: vehicle.licensePlate ?? '',
+        ownershipType: vehicle.ownershipType ?? '',
+        year: vehicle.year ? String(vehicle.year) : '',
+        status: vehicle.status,
+        fuelType: vehicle.fuelType ?? '',
+        fuelEfficiencyLPer100Km:
+          vehicle.fuelEfficiencyLPer100Km !== undefined
+            ? String(vehicle.fuelEfficiencyLPer100Km)
+            : '',
+        capacityWeight: vehicle.capacity.weight ? String(vehicle.capacity.weight) : '',
+        capacityVolume: vehicle.capacity.volume ? String(vehicle.capacity.volume) : '',
+        capacityPallets: vehicle.capacity.pallets ? String(vehicle.capacity.pallets) : '',
       });
     }
   }, [editId, vehicle]);
@@ -85,23 +140,33 @@ function NewVehicleForm({ editId }: { editId?: string }) {
     setSubmitting(true);
     setError(null);
     try {
+      const payload = {
+        vehicleNumber: form.vehicleNumber.trim(),
+        type: form.type,
+        make: form.make.trim() || undefined,
+        model: form.model.trim() || undefined,
+        licensePlate: form.licensePlate.trim() || undefined,
+        ownershipType: form.ownershipType || undefined,
+        year: form.year ? Number(form.year) : undefined,
+        status: toApiVehicleStatus(form.status),
+        fuelType: form.fuelType || undefined,
+        fuelEfficiencyLPer100Km: form.fuelEfficiencyLPer100Km
+          ? Number(form.fuelEfficiencyLPer100Km)
+          : undefined,
+        capacity:
+          form.capacityWeight || form.capacityVolume || form.capacityPallets
+            ? {
+                weight: form.capacityWeight ? Number(form.capacityWeight) : undefined,
+                volume: form.capacityVolume ? Number(form.capacityVolume) : undefined,
+                pallets: form.capacityPallets ? Number(form.capacityPallets) : undefined,
+              }
+            : undefined,
+      };
       if (editId) {
-        const updated = await updateVehicle(editId, {
-          vehicleNumber: form.vehicleNumber.trim(),
-          type: form.type,
-          make: form.make.trim() || undefined,
-          model: form.model.trim() || undefined,
-          licensePlate: form.licensePlate.trim() || undefined,
-        });
+        const updated = await updateVehicle(editId, payload);
         navigate?.(joinPath(basePath, `fleet/vehicles/${updated.id}`));
       } else {
-        const created = await createVehicle({
-          vehicleNumber: form.vehicleNumber.trim(),
-          type: form.type,
-          make: form.make.trim() || undefined,
-          model: form.model.trim() || undefined,
-          licensePlate: form.licensePlate.trim() || undefined,
-        });
+        const created = await createVehicle(payload);
         navigate?.(joinPath(basePath, `fleet/vehicles/${created.id}`));
       }
     } catch (err) {
@@ -111,6 +176,21 @@ function NewVehicleForm({ editId }: { editId?: string }) {
     }
   };
 
+  const handleDelete = async () => {
+    if (!editId) return;
+    setDeleting(true);
+    setDeleteError(null);
+    try {
+      await deleteVehicle(editId);
+      setDeleteOpen(false);
+      navigate?.(joinPath(basePath, 'fleet/vehicles'));
+    } catch (err) {
+      setDeleteError(err instanceof Error ? err.message : 'Failed to delete vehicle.');
+    } finally {
+      setDeleting(false);
+    }
+  };
+
   return (
     <PageLayout
       title={isEditing ? 'Edit Vehicle' : 'Add Vehicle'}
@@ -207,9 +287,175 @@ function NewVehicleForm({ editId }: { editId?: string }) {
                 />
               </div>
             </div>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="ownershipType">Ownership</Label>
+                <Select
+                  value={form.ownershipType || undefined}
+                  onValueChange={(value) => setForm((prev) => ({ ...prev, ownershipType: value }))}
+                >
+                  <SelectTrigger id="ownershipType">
+                    <SelectValue placeholder="Select ownership" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {OWNERSHIP_TYPE_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="year">Year</Label>
+                <Input
+                  id="year"
+                  type="number"
+                  min={1980}
+                  max={new Date().getFullYear() + 1}
+                  value={form.year}
+                  onChange={(e) => setForm((prev) => ({ ...prev, year: e.target.value }))}
+                  placeholder={String(new Date().getFullYear())}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="vehicleStatus">Status</Label>
+                <Select
+                  value={form.status}
+                  onValueChange={(value) =>
+                    setForm((prev) => ({ ...prev, status: value as VehicleStatus }))
+                  }
+                >
+                  <SelectTrigger id="vehicleStatus">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {VEHICLE_STATUS_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="fuelType">Fuel Type</Label>
+                <Input
+                  id="fuelType"
+                  value={form.fuelType}
+                  onChange={(e) => setForm((prev) => ({ ...prev, fuelType: e.target.value }))}
+                  placeholder="Diesel"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="fuelEfficiency">Fuel Efficiency (L/100km)</Label>
+                <Input
+                  id="fuelEfficiency"
+                  type="number"
+                  min={0}
+                  step={0.1}
+                  value={form.fuelEfficiencyLPer100Km}
+                  onChange={(e) =>
+                    setForm((prev) => ({ ...prev, fuelEfficiencyLPer100Km: e.target.value }))
+                  }
+                  placeholder="12.5"
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="capacityWeight">Capacity — Weight (kg)</Label>
+                <Input
+                  id="capacityWeight"
+                  type="number"
+                  min={0}
+                  value={form.capacityWeight}
+                  onChange={(e) => setForm((prev) => ({ ...prev, capacityWeight: e.target.value }))}
+                  placeholder="5000"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="capacityVolume">Capacity — Volume (m³)</Label>
+                <Input
+                  id="capacityVolume"
+                  type="number"
+                  min={0}
+                  step={0.1}
+                  value={form.capacityVolume}
+                  onChange={(e) => setForm((prev) => ({ ...prev, capacityVolume: e.target.value }))}
+                  placeholder="18"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="capacityPallets">Capacity — Pallets</Label>
+                <Input
+                  id="capacityPallets"
+                  type="number"
+                  min={0}
+                  value={form.capacityPallets}
+                  onChange={(e) =>
+                    setForm((prev) => ({ ...prev, capacityPallets: e.target.value }))
+                  }
+                  placeholder="12"
+                />
+              </div>
+            </div>
           </div>
         </EmphasisPanel>
+
+        {isEditing && (
+          <Card className="border-status-error-border">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-status-error-text">
+                <Trash2 size={18} /> Delete Vehicle
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="mb-3 text-sm text-text-secondary">
+                Removes this vehicle from the active fleet. It can no longer be assigned to drivers,
+                orders, or routes. This cannot be undone from here.
+              </p>
+              <Button
+                type="button"
+                variant="outline"
+                className="border-status-error-border text-status-error-text hover:bg-status-error-bg-subtle"
+                onClick={() => setDeleteOpen(true)}
+              >
+                <Trash2 size={16} /> Delete this vehicle
+              </Button>
+            </CardContent>
+          </Card>
+        )}
       </form>
+
+      <ResponsiveDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <ResponsiveDialogContent>
+          <ResponsiveDialogHeader>
+            <ResponsiveDialogTitle>Delete this vehicle?</ResponsiveDialogTitle>
+            <ResponsiveDialogDescription>
+              This removes {form.vehicleNumber || 'this vehicle'} from the active fleet. It cannot
+              be undone from here.
+            </ResponsiveDialogDescription>
+          </ResponsiveDialogHeader>
+          <div className="px-1">
+            <FormError message={deleteError} />
+          </div>
+          <ResponsiveDialogFooter>
+            <Button variant="outline" onClick={() => setDeleteOpen(false)} disabled={deleting}>
+              Cancel
+            </Button>
+            <Button
+              className="bg-status-error-text text-text-inverse hover:opacity-90"
+              onClick={handleDelete}
+              disabled={deleting}
+            >
+              {deleting ? 'Deleting...' : 'Delete vehicle'}
+            </Button>
+          </ResponsiveDialogFooter>
+        </ResponsiveDialogContent>
+      </ResponsiveDialog>
     </PageLayout>
   );
 }
@@ -245,7 +491,7 @@ export default function VehicleDetailsPage() {
   return (
     <PageLayout
       title={vehicle.vehicleNumber}
-      subtitle={`${vehicle.make} ${vehicle.model} (${vehicle.year})`}
+      subtitle={`${vehicle.make} ${vehicle.model}${vehicle.year ? ` (${vehicle.year})` : ''}`}
       icon={<Truck size={24} />}
       headerActions={
         <div className="flex gap-2">
@@ -322,7 +568,7 @@ export default function VehicleDetailsPage() {
               </div>
               <div>
                 <p className="text-sm text-text-secondary">Year</p>
-                <p className="font-medium">{vehicle.year}</p>
+                <p className="font-medium">{vehicle.year ?? '—'}</p>
               </div>
               <div>
                 <p className="text-sm text-text-secondary">License Plate</p>
@@ -394,6 +640,22 @@ export default function VehicleDetailsPage() {
                   </p>
                 </div>
               )}
+              {(vehicle.fuelType || vehicle.fuelEfficiencyLPer100Km !== undefined) && (
+                <div className="grid grid-cols-2 gap-4">
+                  {vehicle.fuelType && (
+                    <div>
+                      <p className="text-sm text-text-secondary">Fuel Type</p>
+                      <p className="font-medium">{vehicle.fuelType}</p>
+                    </div>
+                  )}
+                  {vehicle.fuelEfficiencyLPer100Km !== undefined && (
+                    <div>
+                      <p className="text-sm text-text-secondary">Efficiency</p>
+                      <p className="font-medium">{vehicle.fuelEfficiencyLPer100Km} L/100km</p>
+                    </div>
+                  )}
+                </div>
+              )}
             </CardContent>
           </Card>
 

package/src/movethewheels/pages/VehiclesPage.tsx

@@ -11,24 +11,44 @@ import {
   CircleCheck,
   Route as RouteIcon,
   Wrench,
+  Filter,
 } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge, VehicleTypeBadge } from '../components/StatusBadge';
-import { Progress } from '../components/ui';
+import {
+  Progress,
+  Card,
+  CardContent,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Button,
+} from '../components/ui';
 import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useVehicles, useFleetStats } from '../hooks/useFleet';
 import { useDebouncedValue } from '../hooks/useDebouncedValue';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { joinPath } from '../utils/navigation';
-import type { Vehicle } from '../types';
+import { VEHICLE_STATUS_LABELS } from '../constants';
+import type { Vehicle, VehicleStatus } from '../types';
+
+const STATUS_OPTIONS: Array<{ value: VehicleStatus | 'all'; label: string }> = [
+  { value: 'all', label: 'All statuses' },
+  ...(Object.entries(VEHICLE_STATUS_LABELS) as Array<[VehicleStatus, string]>).map(
+    ([value, label]) => ({ value, label })
+  ),
+];
 
 export default function VehiclesPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
   const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<VehicleStatus | 'all'>('all');
   const debouncedSearch = useDebouncedValue(search);
   const {
     vehicles,
@@ -41,7 +61,9 @@ export default function VehiclesPage() {
     limit: pageSize,
     offset: page * pageSize,
     search: debouncedSearch || undefined,
+    status: statusFilter === 'all' ? undefined : statusFilter,
   });
+  const filtersActive = statusFilter !== 'all' || search.length > 0;
   // Fleet totals + tiles from the live aggregate, not the current page.
   const { stats } = useFleetStats();
   const totalVehicles = stats.totalVehicles;
@@ -74,7 +96,7 @@ export default function VehiclesPage() {
           <p className="font-medium">
             {row.make} {row.model}
           </p>
-          <p className="text-sm text-text-secondary">{row.year}</p>
+          <p className="text-sm text-text-secondary">{row.year ?? '—'}</p>
         </div>
       ),
     },
@@ -178,6 +200,49 @@ export default function VehiclesPage() {
         </MetricGrid>
       </div>
 
+      {/* Filters */}
+      <Card>
+        <CardContent className="p-4">
+          <div className="flex flex-wrap items-center gap-4">
+            <div className="flex items-center gap-2">
+              <Filter size={16} className="text-text-secondary" />
+              <span className="text-sm font-medium">Filters:</span>
+            </div>
+            <Select
+              value={statusFilter}
+              onValueChange={(value) => {
+                setStatusFilter(value as VehicleStatus | 'all');
+                setPage(0);
+              }}
+            >
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Status" />
+              </SelectTrigger>
+              <SelectContent>
+                {STATUS_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {filtersActive && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  setStatusFilter('all');
+                  setSearch('');
+                  setPage(0);
+                }}
+              >
+                Clear filters
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
       <DataTable
         columns={columns}
         data={vehicles}