fix bugs

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

apps/dashboard/app/(authenticated)/page.tsx

@@ -1,10 +1,11 @@
 import { DashboardHeader } from "@/base/components/layout/dashboard";
 import DashboardPage from "@/base/components/layout/dashboard/dashboard-page";
 import { DashboardContent } from "@/modules/home/dashboard-content";
+import { DashboardFiltersToolbar } from "@/modules/home/dashboard-filters-toolbar";
 
 export default function page() {
   return (
-    <DashboardPage headerProps={{title: "Dashboard"}}  >
+    <DashboardPage headerProps={{ title: "Dashboard", actions: <DashboardFiltersToolbar /> }}  >
       <DashboardContent />
     </DashboardPage>
   )

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

@@ -4,7 +4,7 @@ import { useParams } from "next/navigation"
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
 import { type ColumnDef } from "@tanstack/react-table"
 import { useState } from "react"
-import { Plus, Trash2 } from "lucide-react"
+import { Download, ExternalLink, Plus, Trash2 } from "lucide-react"
 import { toast } from "sonner"
 
 import { useAuthApi } from "@/shared/useApi"
@@ -19,10 +19,27 @@ import {
     DialogTitle,
 } from "@/shared/components/ui/dialog"
 import { VehicleDocumentForm } from "@/modules/vehicles/vehicle-document-form"
+import { formatDate, formatDateTime } from "@/shared/utils/formatters"
+import { getFullName } from "@/shared/utils/getFullName"
 
 type VehicleDocument = {
     id: number
-    name: string
+    document_number?: string
+    document_type_id?: number
+    document_type?: {
+        id?: number
+        name?: string
+    } | null
+    customer_id?: number
+    customer?: {
+        id?: number
+        first_name?: string
+        last_name?: string
+        name?: string
+    } | null
+    document_expire?: string
+    document_file?: string
+    document_file_url?: string | null
     created_at: string
     updated_at: string
 }
@@ -54,7 +71,7 @@ export default function VehicleDocumentsPage() {
     const handleDelete = async (doc: VehicleDocument) => {
         const confirmed = await confirm({
             title: "Delete Document",
-            description: `Are you sure you want to delete "${doc.name}"?`,
+            description: `Are you sure you want to delete "${doc.document_number || `Document #${doc.id}`}"?`,
             confirmLabel: "Delete",
             variant: "destructive",
         })
@@ -65,16 +82,74 @@ export default function VehicleDocumentsPage() {
 
     const columns: ColumnDef<VehicleDocument>[] = [
         {
-            accessorKey: "name",
-            header: ({ column }) => <ColumnHeader column={column} title="Name" />,
+            accessorKey: "document_number",
+            header: ({ column }) => <ColumnHeader column={column} title="Document Number" />,
+            cell: ({ getValue, row }) => {
+                const number = getValue<string>()
+                const fallbackName = row.original.document_file?.split("/").pop()
+                return number || fallbackName || `Document #${row.original.id}`
+            },
+        },
+        {
+            accessorKey: "document_type_id",
+            header: ({ column }) => <ColumnHeader column={column} title="Document Type" />,
+            cell: ({ row, getValue }) => {
+                const typeName = row.original.document_type?.name
+                const value = getValue<number | undefined>()
+                return typeName || (value ? `#${value}` : "—")
+            },
+        },
+        {
+            accessorKey: "customer_id",
+            header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
+            cell: ({ row, getValue }) => {
+                const name = getFullName(row.original.customer as any) || row.original.customer?.name
+                const value = getValue<number | undefined>()
+                return name || (value ? `#${value}` : "—")
+            },
+        },
+        {
+            accessorKey: "document_expire",
+            header: ({ column }) => <ColumnHeader column={column} title="Expiry Date" />,
+            cell: ({ getValue }) => formatDate(getValue<string | undefined>()),
+        },
+        {
+            id: "file",
+            header: ({ column }) => <ColumnHeader column={column} title="File" />,
+            cell: ({ row }) => {
+                const url = row.original.document_file_url
+                if (!url) return "No file"
+
+                return (
+                    <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
+                        <a
+                            href={url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="inline-flex items-center gap-1 text-primary underline"
+                            title="Open document"
+                        >
+                            <ExternalLink className="size-3.5" />
+                            Open
+                        </a>
+                        <a
+                            href={url}
+                            download
+                            className="inline-flex items-center gap-1 text-primary underline"
+                            title="Download document"
+                        >
+                            <Download className="size-3.5" />
+                            Download
+                        </a>
+                    </div>
+                )
+            },
+            enableSorting: false,
         },
         {
             accessorKey: "created_at",
             header: ({ column }) => <ColumnHeader column={column} title="Uploaded At" />,
-            cell: ({ getValue }) => {
-                const val = getValue<string>()
-                return val ? new Date(val).toLocaleDateString() : "—"
-            },
+            cell: ({ getValue }) => formatDateTime(getValue<string | undefined>()),
         },
         {
             id: "actions",
@@ -83,7 +158,10 @@ export default function VehicleDocumentsPage() {
                 <Button
                     variant="ghost"
                     size="icon-sm"
-                    onClick={() => handleDelete(row.original)}
+                    onClick={(e) => {
+                        e.stopPropagation()
+                        handleDelete(row.original)
+                    }}
                     title="Delete document"
                 >
                     <Trash2 className="size-4 text-destructive" />
@@ -93,6 +171,15 @@ export default function VehicleDocumentsPage() {
         },
     ]
 
+    const handleRowClick = (doc: VehicleDocument) => {
+        if (doc.document_file_url) {
+            window.open(doc.document_file_url, "_blank", "noopener,noreferrer")
+            return
+        }
+
+        toast.info("This document has no file to open.")
+    }
+
     const documents = (data as any)?.data ?? []
     const meta = (data as any)?.meta
 
@@ -105,21 +192,25 @@ export default function VehicleDocumentsPage() {
 
     return (
         <div className="flex flex-col gap-4">
-            <div className="flex items-center justify-end">
-                <Button onClick={() => setDialogOpen(true)}>
-                    <Plus className="size-4" />
-                    Upload Document
-                </Button>
-            </div>
+
 
             <Card>
                 <CardContent>
                     <DataTable
+                        slots={{
+                            actions: <div className="flex items-center justify-end">
+                                <Button onClick={() => setDialogOpen(true)}>
+                                    <Plus className="size-4" />
+                                    Upload Document
+                                </Button>
+                            </div>
+                        }}
                         columns={columns}
                         data={documents}
                         pagination={pagination}
                         sorting={[]}
-                        onChange={() => {}}
+                        onChange={() => { }}
+                        onRowClick={handleRowClick}
                         isLoading={isLoading}
                     />
                 </CardContent>

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

@@ -13,7 +13,6 @@ export default async function layout(props: { params: Promise<{ id: string }>, c
     return (
         <>
             <DashboardDetailsPage
-                className='p-0 lg:p-0'
                 avatarSrc={vehicle.data?.image_url || ""}
                 // avatarSrc={vehicle.data?.image_url || ""}
                 title={title}

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

@@ -140,33 +140,27 @@ export default function VehicleMileagePage() {
 
     return (
         <div className="flex flex-col gap-4">
-           
-    
-        <DashboardPage
-            headerProps={{
-                title: 'Mileage',
-                actions: (
-                    <Button onClick={handleCreate}>
-                        <Plus className="size-4" />
-                        Add Mileage
-                    </Button>
-                ),
-            }}
-        >
+
+
 
             <Card>
                 <CardContent>
                     <DataTable
+                        slots={{
+                            actions: <Button onClick={handleCreate}>
+                                <Plus className="size-4" />
+                                Add Mileage
+                            </Button>
+                        }}
                         columns={columns}
                         data={records}
                         pagination={pagination}
                         sorting={[]}
-                        onChange={() => {}}
+                        onChange={() => { }}
                         isLoading={isLoading}
                     />
                 </CardContent>
             </Card>
-        </DashboardPage>
 
             <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
                 <DialogContent className="min-w-md">

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

@@ -129,41 +129,48 @@ export default function VehicleOwnersPage() {
     }
 
     return (
-        <DashboardPage headerProps={{
-            title: "Owners",
-            actions: (
-                <Button className="w-full" size={'lg'} onClick={() => setLinkDialogOpen(true)}>
-                    <Plus />
-                    Add Owner
-                </Button>
-            ),
-        }}>
 
-            <Card>
-                <CardContent>
 
-                    <DataTable
-                        columns={columns}
-                        data={owners}
-                        pagination={pagination}
-                        sorting={[]}
+        <Card>
+            <CardContent>
 
-                        onChange={() => { }}
-                        isLoading={isLoading}
-                    />
 
-                    <LinkOwnerDialog
-                        vehicleId={vehicleId}
-                        open={linkDialogOpen}
-                        onOpenChange={setLinkDialogOpen}
-                        onSuccess={() => {
-                            queryClient.invalidateQueries({ queryKey })
-                            setLinkDialogOpen(false)
-                        }}
-                    />
-                </CardContent>
-            </Card>
-        </DashboardPage >
+                <DataTable
+                    slots={{
+                        actions:
+                            <div className="flex justify-end">
+
+                                <Button size={'lg'} onClick={() => setLinkDialogOpen(true)}>
+                                    <Plus />
+                                    Add Owner
+                                </Button>
+                            </div>,
+
+
+                    }
+
+                    }
+
+                    columns={columns}
+                    data={owners}
+                    pagination={pagination}
+                    sorting={[]}
+
+                    onChange={() => { }}
+                    isLoading={isLoading}
+                />
+
+                <LinkOwnerDialog
+                    vehicleId={vehicleId}
+                    open={linkDialogOpen}
+                    onOpenChange={setLinkDialogOpen}
+                    onSuccess={() => {
+                        queryClient.invalidateQueries({ queryKey })
+                        setLinkDialogOpen(false)
+                    }}
+                />
+            </CardContent>
+        </Card>
     )
 }
 

apps/dashboard/app/(authenticated)/sales/vehicles/page.tsx

@@ -14,6 +14,7 @@ import { VehicleForm } from '@/modules/vehicles/vehicle-form'
 import { VEHICLE_ROUTES } from '@garage/api'
 import type { VehiclesClient } from '@garage/api'
 import { CarIcon } from 'lucide-react'
+import { getFullName } from '@/shared/utils/getFullName'
 
 export default function VehiclesPage() {
     const router = useRouter()
@@ -39,7 +40,7 @@ export default function VehiclesPage() {
                             onExport={(filters) => api.vehicles.exportData(filters)}
                             fileName='vehicles'
                         />
-                        <FormDialog title="Vehicle" classNames={{dialogContent:'lg:min-w-4xl'}}>
+                        <FormDialog title="Vehicle" classNames={{ dialogContent: 'lg:min-w-4xl' }}>
                             {(resourceId) => (
                                 <VehicleForm
                                     resourceId={resourceId}
@@ -51,11 +52,11 @@ export default function VehiclesPage() {
                     </div>
                 ),
             })}
-            
-            columns={({ actionsColumn })=> [
+
+            columns={({ actionsColumn }) => [
                 {
                     id: "name",
-            
+
                     header: ({ column }) => <ColumnHeader column={column} title="Vehicle" />,
                     cell: ({ row }) => {
                         const r = row.original as any
@@ -75,6 +76,14 @@ export default function VehiclesPage() {
                         )
                     },
                 },
+                {
+                    accessorKey: "customers",
+                    header: ({ column }: any) => <ColumnHeader column={column} title="Customer" />,
+                    cell: ({ row }: any) => {
+                        const val = (row.original as any).customers?.[0]
+                        return getFullName(val)
+                    },
+                } as any,
                 {
                     accessorKey: "year",
                     header: ({ column }) => <ColumnHeader column={column} title="Year" />,
@@ -113,22 +122,7 @@ export default function VehiclesPage() {
                         return val != null ? `${Number(val).toLocaleString()} mi` : "—"
                     },
                 },
-                {
-                    accessorKey: "created_at",
-                    header: ({ column }) => <ColumnHeader column={column} title="Created" />,
-                    cell: ({ row }) => {
-                        const val = (row.original as any).created_at
-                        return val ? new Date(val).toLocaleDateString() : "—"
-                    },
-                },
-                {
-                    accessorKey: "customer",
-                    header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
-                    cell: ({ row }) => {
-                        const val = (row.original as any).customer
-                        return val ? val.name : "—"
-                    },
-                },
+
                 actionsColumn(),
             ]}
         />

apps/dashboard/modules/home/dashboard-content.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+import { useMemo } from "react"
+import { useSearchParams } from "next/navigation"
 import { Loader2 } from "lucide-react"
 import { useDashboardData } from "./use-dashboard-data"
 import { FinancialTotalsCards } from "./financial-totals-cards"
@@ -12,9 +14,38 @@ import { ItemsTotalsCard } from "./items-totals-card"
 import { CustomersTotalsCard } from "./customers-totals-card"
 import { SalesPurchaseCards } from "./sales-purchase-cards"
 import { VehicleStatsCards } from "./vehicle-stats-cards"
+import { DashboardPeriods, type DashboardPeriod, type HomeDashboardQuery } from "@garage/api"
+
+const DEFAULT_PERIOD: DashboardPeriod = "this_month"
+
+function isDashboardPeriod(value: string | null): value is DashboardPeriod {
+    return Boolean(value && (DashboardPeriods as readonly string[]).includes(value))
+}
 
 export function DashboardContent() {
-    const { data, isLoading, isError, error } = useDashboardData()
+    const searchParams = useSearchParams()
+    const filters = useMemo<HomeDashboardQuery>(() => {
+        const periodValue = searchParams.get("period")
+        const period = isDashboardPeriod(periodValue) ? periodValue : DEFAULT_PERIOD
+
+        const nextFilters: HomeDashboardQuery = { period }
+
+        if (period === "custom") {
+            const startDate = searchParams.get("start_date")
+            const endDate = searchParams.get("end_date")
+
+            if (startDate) {
+                nextFilters.start_date = startDate
+            }
+            if (endDate) {
+                nextFilters.end_date = endDate
+            }
+        }
+
+        return nextFilters
+    }, [searchParams])
+
+    const { data, isLoading, isError, error } = useDashboardData(filters)
 
     if (isLoading) {
         return (

apps/dashboard/modules/home/dashboard-filters-toolbar.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import { useMemo } from "react"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { DashboardPeriods, type DashboardPeriod } from "@garage/api"
+import { Input } from "@/shared/components/ui/input"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/shared/components/ui/select"
+
+const DEFAULT_PERIOD: DashboardPeriod = "this_month"
+
+const PERIOD_LABELS: Record<DashboardPeriod, string> = {
+    today: "Today",
+    yesterday: "Yesterday",
+    this_week: "This Week",
+    this_month: "This Month",
+    last_month: "Last Month",
+    last_3_months: "Last 3 Months",
+    last_6_months: "Last 6 Months",
+    last_year: "Last Year",
+    year_to_date: "Year to Date",
+    all_time: "All Time",
+    custom: "Custom",
+}
+
+function isDashboardPeriod(value: string | null): value is DashboardPeriod {
+    return Boolean(value && (DashboardPeriods as readonly string[]).includes(value))
+}
+
+export function DashboardFiltersToolbar() {
+    const router = useRouter()
+    const pathname = usePathname()
+    const searchParams = useSearchParams()
+
+    const period = useMemo<DashboardPeriod>(() => {
+        const value = searchParams.get("period")
+        return isDashboardPeriod(value) ? value : DEFAULT_PERIOD
+    }, [searchParams])
+
+    const startDate = searchParams.get("start_date") ?? ""
+    const endDate = searchParams.get("end_date") ?? ""
+
+    const updateParams = (updates: Record<string, string | null>) => {
+        const params = new URLSearchParams(searchParams.toString())
+
+        Object.entries(updates).forEach(([key, value]) => {
+            if (!value) {
+                params.delete(key)
+                return
+            }
+            params.set(key, value)
+        })
+
+        const query = params.toString()
+        router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false })
+    }
+
+    return (
+        <div className="flex flex-wrap items-end gap-2">
+            <div className="w-44">
+                <Select
+                    value={period}
+                    onValueChange={(value) => {
+                        const nextPeriod = value as DashboardPeriod
+                        updateParams({
+                            period: nextPeriod,
+                            start_date: nextPeriod === "custom" ? startDate || null : null,
+                            end_date: nextPeriod === "custom" ? endDate || null : null,
+                        })
+                    }}
+                >
+                    <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Period" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {DashboardPeriods.map((value) => (
+                            <SelectItem key={value} value={value}>
+                                {PERIOD_LABELS[value]}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            </div>
+
+            {period === "custom" ? (
+                <>
+                    <div className="w-36">
+                        <Input
+                            type="date"
+                            value={startDate}
+                            onChange={(event) => {
+                                updateParams({ start_date: event.target.value || null })
+                            }}
+                        />
+                    </div>
+                    <div className="w-36">
+                        <Input
+                            type="date"
+                            value={endDate}
+                            onChange={(event) => {
+                                updateParams({ end_date: event.target.value || null })
+                            }}
+                        />
+                    </div>
+                </>
+            ) : null}
+        </div>
+    )
+}

apps/dashboard/modules/home/use-dashboard-data.ts

@@ -2,15 +2,15 @@
 
 import { useQuery } from "@tanstack/react-query"
 import { useAuthApi } from "@/shared/useApi"
-import type { HomeDashboardResponse } from "@garage/api"
+import type { HomeDashboardQuery, HomeDashboardResponse } from "@garage/api"
 
 export type DashboardData = HomeDashboardResponse & Record<string, any>
 
-export function useDashboardData() {
+export function useDashboardData(filters?: HomeDashboardQuery) {
     const api = useAuthApi()
 
     return useQuery<DashboardData>({
-        queryKey: ["home", "dashboard"],
-        queryFn: () => api.home.dashboard(),
+        queryKey: ["home", "dashboard", filters],
+        queryFn: () => api.home.dashboard(filters),
     })
 }

apps/dashboard/modules/vehicles/inline-forms/document-type-inline-form.tsx

@@ -11,7 +11,7 @@ import { toast } from "sonner"
 import { useAuthApi } from "@/shared/useApi"
 
 const schema = z.object({
-    title: z.string().min(1, "Title is required"),
+    name: z.string().min(1, "Name is required"),
 })
 
 type FormValues = z.infer<typeof schema>
@@ -21,16 +21,16 @@ export function DocumentTypeInlineForm({ onSuccess }: InlineCreateFormProps) {
 
     const form = useForm<FormValues>({
         resolver: zodResolver(schema),
-        defaultValues: { title: "" },
+        defaultValues: { name: "" },
     })
 
     const handleSubmit = async (values: FormValues) => {
         try {
-            const result = await api.vehicleDocuments.createDocumentType({ title: values.title } as any)
+            const result = await api.vehicleDocuments.createDocumentType({ name: values.name } as any)
             toast.success("Document type created")
             form.reset()
             const item = (result as any)?.data ?? result
-            onSuccess({ value: String(item.id), label: item.title ?? item.name ?? String(item.id) })
+            onSuccess({ value: String(item.id), label: item.name ?? String(item.id) })
         } catch {
             toast.error("Failed to create document type")
         }
@@ -40,8 +40,8 @@ export function DocumentTypeInlineForm({ onSuccess }: InlineCreateFormProps) {
         <Rhform form={form} onSubmit={handleSubmit}>
             <FieldGroup>
                 <RhfTextField
-                    name="title"
-                    label="Title"
+                    name="name"
+                    label="Name"
                     placeholder="e.g. Registration Certificate"
                     required
                 />

apps/dashboard/modules/vehicles/vehicle-actions.tsx

@@ -3,12 +3,16 @@
 import { useAuthApi } from "@/shared/useApi"
 import { useRouter } from "next/navigation"
 import { Button } from "@/shared/components/ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog"
+import { ScrollArea } from "@/shared/components/ui/scroll-area"
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from "@/shared/components/ui/dropdown-menu"
+import { useFormDialog } from "@/shared/components/form-dialog"
+import { VehicleForm } from "./vehicle-form"
 import { Ellipsis, Pencil, Trash2 } from "lucide-react"
 
 type VehicleActionsProps = {
@@ -18,10 +22,7 @@ type VehicleActionsProps = {
 export function VehicleActions({ vehicleId }: VehicleActionsProps) {
     const api = useAuthApi()
     const router = useRouter()
-
-    const handleEdit = () => {
-        router.push(`/sales/vehicles/${vehicleId}/edit`)
-    }
+    const editDialog = useFormDialog("vehicle-details-edit")
 
     const handleDelete = async () => {
         await api.vehicles.destroy(vehicleId)
@@ -36,7 +37,7 @@ export function VehicleActions({ vehicleId }: VehicleActionsProps) {
                 </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-                <DropdownMenuItem onClick={handleEdit}>
+                <DropdownMenuItem onSelect={() => editDialog.open(vehicleId)}>
                     <Pencil className="size-4" />
                     Edit
                 </DropdownMenuItem>
@@ -45,6 +46,23 @@ export function VehicleActions({ vehicleId }: VehicleActionsProps) {
                     Delete
                 </DropdownMenuItem>
             </DropdownMenuContent>
+            <Dialog open={editDialog.isOpen} onOpenChange={(isOpen) => { if (!isOpen) editDialog.close() }}>
+                <DialogContent className="min-w-xl lg:min-w-4xl">
+                    <DialogHeader>
+                        <DialogTitle className="text-2xl font-bold">Vehicle</DialogTitle>
+                    </DialogHeader>
+                    <ScrollArea className="max-h-[80vh] px-4">
+                        <VehicleForm
+                        
+                            resourceId={editDialog.resourceId}
+                            onSuccess={() => {
+                                editDialog.close()
+                                router.refresh()
+                            }}
+                        />
+                    </ScrollArea>
+                </DialogContent>
+            </Dialog>
         </DropdownMenu>
     )
 }

apps/dashboard/modules/vehicles/vehicle-document-form.tsx

@@ -7,7 +7,8 @@ import { Alert, AlertTitle } from "@/shared/components/ui/alert"
 import { FieldGroup } from "@/shared/components/ui/field"
 import {
     Rhform,
-    RhfTextareaField,
+    RhfTextField,
+    RhfDateField,
     RhfAsyncSelectField,
     RhfDocumentField,
 } from "@/shared/components/form"
@@ -17,6 +18,7 @@ import { useAuthApi } from "@/shared/useApi"
 import { useResourceForm } from "@/shared/hooks/use-resource-form"
 import { useFormMutation } from "@/shared/hooks/use-form-mutation"
 import { toRelation, toId } from "@/shared/lib/utils"
+import { getFullName } from "@/shared/utils/getFullName"
 
 import { vehicleDocumentFormSchema, type VehicleDocumentFormValues } from "./vehicle-document.schema"
 
@@ -33,8 +35,10 @@ export type VehicleDocumentFormProps = {
 
 const DEFAULT_VALUES: VehicleDocumentFormValues = {
     document_type: null,
+    customer: null,
+    document_number: "",
+    document_expire: "",
     file: null,
-    note: "",
 }
 
 // ── Mapping helpers ──
@@ -51,17 +55,21 @@ function mapToFormValues(data: unknown): VehicleDocumentFormValues {
 
     return {
         document_type: toRelation(d.document_type_id, d.document_type?.name ?? d.document_type?.title),
+        customer: toRelation(d.customer_id, getFullName(d.customer) || d.customer?.name),
+        document_number: d.document_number || "",
+        document_expire: d.document_expire || "",
         file: null,
-        note: d.note || "",
     }
 }
 
 function mapToPayload(values: VehicleDocumentFormValues, vehicleId: string) {
     return {
-        vehicle_id: Number(vehicleId),
+        vehicle_id: vehicleId,
         document_type_id: toId(values.document_type),
-        file: values.file instanceof File ? values.file : undefined,
-        note: values.note || undefined,
+        customer_id: toId(values.customer),
+        document_number: values.document_number || undefined,
+        document_expire: values.document_expire || undefined,
+        document_file: values.file instanceof File ? values.file : undefined,
     }
 }
 
@@ -122,18 +130,36 @@ export function VehicleDocumentForm({ vehicleId, resourceId, initialData, onSucc
                     {...STORE_OBJECT}
                 />
 
+                {/* <RhfAsyncSelectField
+                    name="customer"
+                    label="Customer"
+                    placeholder="Select customer"
+                    queryKey={["customers"]}
+                    listFn={() => api.customers.list()}
+                    mapOption={(item: any) => ({
+                        value: String(item.id),
+                        label: getFullName(item) || item.name || `#${item.id}`,
+                    })}
+                    {...STORE_OBJECT}
+                /> */}
+
+                <RhfTextField
+                    name="document_number"
+                    label="Document Number"
+                    placeholder="e.g. DOC-001"
+                />
+
+                <RhfDateField
+                    name="document_expire"
+                    label="Expiry Date"
+                />
+
                 <RhfDocumentField
                     name="file"
                     label="Document File"
                     required
                 />
 
-                <RhfTextareaField
-                    name="note"
-                    label="Note"
-                    placeholder="Optional notes about this document"
-                />
-
                 <Button type="submit" disabled={isPending} className="w-full">
                     {isPending ? null : isEditing ? <Save /> : <Plus />}
                     {isPending ? "Saving..." : isEditing ? "Update Document" : "Upload Document"}

apps/dashboard/modules/vehicles/vehicle-document.schema.ts

@@ -4,8 +4,10 @@ const relationFieldSchema = z.object({ value: z.string(), label: z.string() }).n
 
 export const vehicleDocumentFormSchema = z.object({
     document_type: relationFieldSchema,
+    customer: relationFieldSchema,
+    document_number: z.string().optional(),
+    document_expire: z.string().optional(),
     file: z.instanceof(File, { message: "File is required" }).nullable(),
-    note: z.string().optional(),
 })
 
 export type VehicleDocumentFormValues = z.infer<typeof vehicleDocumentFormSchema>

apps/dashboard/modules/vehicles/vehicle-form.tsx

@@ -24,6 +24,7 @@ import { useResourceForm } from "@/shared/hooks/use-resource-form"
 import { useFormMutation } from "@/shared/hooks/use-form-mutation"
 import { toRelation, toId } from "@/shared/lib/utils"
 import { formatUppercase } from "@/shared/utils/formatters"
+import { VEHICLE_ROUTES } from "@garage/api"
 
 import { vehicleFormSchema, type VehicleFormValues } from "./vehicle.schema"
 import { CustomerForm } from "../customers/customer-form"
@@ -125,6 +126,8 @@ export function VehicleForm({ resourceId, initialData, onSuccess }: VehicleFormP
         defaultValues: DEFAULT_VALUES,
         resourceId,
         initialData,
+        initialize: (id) => api.vehicles.getById(id),
+        queryKey: [VEHICLE_ROUTES.BY_ID, resourceId],
         mapToFormValues,
     })