fix bugs

Co-authored-by: Copilot <copilot@github.com>

apps/dashboard/app/(authenticated)/sales/vehicles/[id]/mileage/page.tsx

@@ -25,11 +25,23 @@ import {
     DropdownMenuTrigger,
 } from "@/shared/components/ui/dropdown-menu"
 import { MileageForm } from "@/modules/vehicles/mileage-form"
-import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
+import { formatDate, formatDateTime } from "@/shared/utils/formatters"
 
 type MileageRecord = {
     id: number
-    name: string
+    vehicle_id?: number
+    miles?: number | null
+    fuel_level?: number | null
+    date?: string | null
+    time?: string | null
+    note?: string | null
+    vehicle?: {
+        id?: number
+        make?: string | null
+        model?: string | null
+        year?: number | null
+        license_plate?: string | null
+    } | null
     created_at: string
     updated_at: string
 }
@@ -64,9 +76,10 @@ export default function VehicleMileagePage() {
     })
 
     const handleDelete = async (record: MileageRecord) => {
+        const label = record.miles != null ? `${record.miles} mi` : `Record #${record.id}`
         const confirmed = await confirm({
             title: "Delete Mileage Record",
-            description: `Are you sure you want to delete this mileage record?`,
+            description: `Are you sure you want to delete ${label}?`,
             confirmLabel: "Delete",
             variant: "destructive",
         })
@@ -87,16 +100,59 @@ export default function VehicleMileagePage() {
 
     const columns: ColumnDef<MileageRecord>[] = [
         {
-            accessorKey: "name",
-            header: ({ column }) => <ColumnHeader column={column} title="Mileage" />,
+            accessorKey: "miles",
+            header: ({ column }) => <ColumnHeader column={column} title="Miles" />,
+            cell: ({ getValue }) => {
+                const value = getValue<number | null | undefined>()
+                return value == null ? "—" : value.toLocaleString()
+            },
+        },
+        {
+            accessorKey: "fuel_level",
+            header: ({ column }) => <ColumnHeader column={column} title="Fuel Level" />,
+            cell: ({ getValue }) => {
+                const value = getValue<number | null | undefined>()
+                return value == null ? "—" : `${value}%`
+            },
+        },
+        {
+            accessorKey: "date",
+            header: ({ column }) => <ColumnHeader column={column} title="Date" />,
+            cell: ({ getValue }) => formatDate(getValue<string | null | undefined>()),
+        },
+        {
+            accessorKey: "time",
+            header: ({ column }) => <ColumnHeader column={column} title="Time" />,
+            cell: ({ getValue }) => {
+                const value = getValue<string | null | undefined>()
+                if (!value) return "—"
+                if (value.includes("T")) {
+                    const timePart = value.split("T")[1]
+                    return timePart ? timePart.slice(0, 5) : "—"
+                }
+                return value.slice(0, 5)
+            },
+        },
+        {
+            accessorKey: "note",
+            header: ({ column }) => <ColumnHeader column={column} title="Note" />,
+            cell: ({ getValue }) => getValue<string | null | undefined>() || "—",
+        },
+        {
+            id: "vehicle",
+            header: ({ column }) => <ColumnHeader column={column} title="Vehicle" />,
+            cell: ({ row }) => {
+                const vehicle = row.original.vehicle
+                if (!vehicle) return "—"
+                const details = [vehicle.make, vehicle.model, vehicle.year].filter(Boolean).join(" ")
+                return details || vehicle.license_plate || "—"
+            },
+            enableSorting: false,
         },
         {
             accessorKey: "created_at",
             header: ({ column }) => <ColumnHeader column={column} title="Recorded At" />,
-            cell: ({ getValue }) => {
-                const val = getValue<string>()
-                return val ? new Date(val).toLocaleDateString() : "—"
-            },
+            cell: ({ getValue }) => formatDateTime(getValue<string | undefined>()),
         },
         {
             id: "actions",