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",
+            accessorKey: "miles",
-            header: ({ column }) => <ColumnHeader column={column} title="Mileage" />,
+            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 }) => {
+            cell: ({ getValue }) => formatDateTime(getValue<string | undefined>()),
-                const val = getValue<string>()
-                return val ? new Date(val).toLocaleDateString() : "—"
-            },
         },
         {
             id: "actions",

apps/dashboard/modules/job-cards/job-card-form.tsx

@@ -1,9 +1,18 @@
 "use client"
 
+import { useState } from "react"
 import { AlertTriangle, Plus, Save } from "lucide-react"
 
 import { Button } from "@/shared/components/ui/button"
 import { Alert, AlertTitle } from "@/shared/components/ui/alert"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/shared/components/ui/dialog"
 import {
     Rhform,
     RhfTextField,
@@ -197,6 +206,7 @@ const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) =
 
 export function JobCardForm({ resourceId, initialData, onSuccess }: JobCardFormProps) {
     const api = useAuthApi()
+    const [isCheckInDialogOpen, setIsCheckInDialogOpen] = useState(false)
 
     const { form, isEditing } = useResourceForm<JobCardFormValues, any>({
         schema: jobCardFormSchema,
@@ -210,7 +220,7 @@ export function JobCardForm({ resourceId, initialData, onSuccess }: JobCardFormP
     const hasInsurance = form.watch("has_insurance")
     const status = form.watch("status")
     const customer = form.watch("customer")
-    const isCheckIn = status === "check_in"
+    const shouldCollectCheckInDetails = status === "check_in"
 
     const { mutate, error, isPending } = useFormMutation(form, {
         mutationFn: (values: JobCardFormValues) => {
@@ -226,13 +236,27 @@ export function JobCardForm({ resourceId, initialData, onSuccess }: JobCardFormP
             return promise
         },
         onSuccess: () => {
+            setIsCheckInDialogOpen(false)
             form.reset()
             onSuccess?.()
         },
     })
 
+    const handleSubmit = (values: JobCardFormValues) => {
+        if (values.status === "check_in" && !isCheckInDialogOpen) {
+            setIsCheckInDialogOpen(true)
+            return
+        }
+
+        mutate(values)
+    }
+
+    const handleCheckInConfirm = () => {
+        void form.handleSubmit(handleSubmit)()
+    }
+
     return (
-        <Rhform form={form} onSubmit={(values) => mutate(values)}>
+        <Rhform form={form} onSubmit={handleSubmit}>
             {error && (
                 <Alert variant="destructive" className="mb-4">
                     <AlertTriangle className="me-2 h-4 w-4" />
@@ -305,45 +329,6 @@ export function JobCardForm({ resourceId, initialData, onSuccess }: JobCardFormP
                             {...STORE_OBJECT}
                         />
                     </div>
-
-
-                    {/* ── Check-in Details (shown when status is check_in) ── */}
-                    {isCheckIn && (
-                        <div className="space-y-4 rounded-lg border p-4">
-                            <p className="text-sm font-semibold">Check In Details</p>
-
-                            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                                <RhfDateField name="check_in_date" label="Check In Date" />
-                                <RhfTimeField name="check_in_time" label="Check In Time" />
-                            </div>
-
-                            <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
-                                <RhfTextField name="km_in" label="KMs IN" placeholder="0" type="number" />
-                                <RhfSelectField
-                                    name="fuel_level"
-                                    label="Fuel Level"
-                                    placeholder="Select"
-                                    options={FUEL_LEVEL_OPTIONS}
-                                />
-                                <RhfDateField name="start_date" label="Start Date" />
-                                <RhfTimeField name="start_time" label="Start Time" />
-                            </div>
-
-                            <div className="grid grid-cols-1 gap-4 sm:grid-cols-[1fr_1fr_1fr]">
-                                <RhfAsyncSelectField
-                                    name="department"
-                                    label="Department"
-                                    placeholder="Select department"
-                                    queryKey={[DEPARTMENT_ROUTES.INDEX]}
-                                    listFn={() => api.departments.list()}
-                                    mapOption={mapLookupOption}
-                                    {...STORE_OBJECT}
-                                />
-                                <RhfDateField name="delivery_date" label="Delivery Date" />
-                                <RhfTimeField name="delivery_time" label="Delivery Time" />
-                            </div>
-                        </div>
-                    )}
                 </div>
 
                 {/* ── Right column ── */}
@@ -392,9 +377,64 @@ export function JobCardForm({ resourceId, initialData, onSuccess }: JobCardFormP
                     {isEditing ? <Save /> : <Plus />}
                     {isPending
                         ? (isEditing ? "Updating..." : "Creating...")
+                        : shouldCollectCheckInDetails
+                            ? "Continue to Check In"
                             : (isEditing ? "Update Job Card" : "Create Job Card")}
                 </Button>
             </div>
+
+            <Dialog open={isCheckInDialogOpen} onOpenChange={setIsCheckInDialogOpen}>
+                <DialogContent className="sm:max-w-3xl">
+                    <DialogHeader>
+                        <DialogTitle>Check In Details</DialogTitle>
+                        <DialogDescription>
+                            Fill the vehicle intake details, then confirm the check in to submit the job card.
+                        </DialogDescription>
+                    </DialogHeader>
+
+                    <div className="space-y-4">
+                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                            <RhfDateField name="check_in_date" label="Check In Date" />
+                            <RhfTimeField name="check_in_time" label="Check In Time" />
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+                            <RhfTextField name="km_in" label="KMs IN" placeholder="0" type="number" />
+                            <RhfSelectField
+                                name="fuel_level"
+                                label="Fuel Level"
+                                placeholder="Select"
+                                options={FUEL_LEVEL_OPTIONS}
+                            />
+                            <RhfDateField name="start_date" label="Start Date" />
+                            <RhfTimeField name="start_time" label="Start Time" />
+                        </div>
+
+                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-[1fr_1fr_1fr]">
+                            <RhfAsyncSelectField
+                                name="department"
+                                label="Department"
+                                placeholder="Select department"
+                                queryKey={[DEPARTMENT_ROUTES.INDEX]}
+                                listFn={() => api.departments.list()}
+                                mapOption={mapLookupOption}
+                                {...STORE_OBJECT}
+                            />
+                            <RhfDateField name="delivery_date" label="Delivery Date" />
+                            <RhfTimeField name="delivery_time" label="Delivery Time" />
+                        </div>
+                    </div>
+
+                    <DialogFooter>
+                        <Button type="button" variant="outline" onClick={() => setIsCheckInDialogOpen(false)} disabled={isPending}>
+                            Cancel
+                        </Button>
+                        <Button type="button" onClick={handleCheckInConfirm} disabled={isPending}>
+                            {isPending ? "Checking In..." : "Check In"}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
         </Rhform>
     )
 }

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

@@ -5,7 +5,7 @@ import { AlertTriangle, Plus, Save } from "lucide-react"
 import { Button } from "@/shared/components/ui/button"
 import { Alert, AlertTitle } from "@/shared/components/ui/alert"
 import { FieldGroup } from "@/shared/components/ui/field"
-import { Rhform, RhfTextField } from "@/shared/components/form"
+import { Rhform, RhfDateField, RhfTextField, RhfTimeField, RhfTextareaField } from "@/shared/components/form"
 import { toast } from "sonner"
 import { useAuthApi } from "@/shared/useApi"
 import { useResourceForm } from "@/shared/hooks/use-resource-form"
@@ -25,19 +25,31 @@ export type MileageFormProps = {
 // ── Default values ──
 
 const DEFAULT_VALUES: MileageFormValues = {
-    mileage: 0,
+    miles: 0,
+    fuel_level: undefined,
     date: "",
     time: "",
+    note: "",
 }
 
 // ── Mapping helpers ──
 
 function mapToFormValues(data: unknown): MileageFormValues {
     const d = (data as any)?.data ?? data ?? {}
+
+    const date = d.date ? String(d.date).split("T")[0] : ""
+    const time = d.time
+        ? String(d.time).includes("T")
+            ? String(d.time).split("T")[1]?.slice(0, 8) ?? ""
+            : String(d.time).slice(0, 8)
+        : ""
+
     return {
-        mileage: d.mileage ?? 0,
+        miles: d.miles ?? d.mileage ?? 0,
-        date: d.date || "",
+        fuel_level: d.fuel_level ?? undefined,
-        time: d.time || "",
+        date,
+        time,
+        note: d.note || "",
     }
 }
 
@@ -56,7 +68,13 @@ export function MileageForm({ vehicleId, resourceId, initialData, onSuccess }: M
 
     const { mutate, error, isPending } = useFormMutation(form, {
         mutationFn: (values: MileageFormValues) => {
-            const payload = { mileage: values.mileage, date: values.date, time: values.time }
+            const payload = {
+                miles: values.miles,
+                fuel_level: values.fuel_level,
+                date: values.date,
+                time: values.time,
+                note: values.note || undefined,
+            }
             const promise = isEditing && resourceId
                 ? api.vehicleDocuments.updateMileage(resourceId, payload as any)
                 : api.vehicleDocuments.createMileage({ vehicle_id: Number(vehicleId), ...payload } as any)
@@ -87,28 +105,39 @@ export function MileageForm({ vehicleId, resourceId, initialData, onSuccess }: M
 
             <FieldGroup>
                 <RhfTextField
-                    name="mileage"
+                    name="miles"
-                    label="Mileage"
+                    label="Miles"
                     placeholder="e.g. 50000"
                     type="number"
                     required
                 />
 
-                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                 <RhfTextField
+                    name="fuel_level"
+                    label="Fuel Level (%)"
+                    placeholder="e.g. 80"
+                    type="number"
+                />
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfDateField
                         name="date"
                         label="Date"
-                        type="date"
                         required
                     />
-                    <RhfTextField
+                    <RhfTimeField
                         name="time"
                         label="Time"
-                        type="time"
                          required
                     />
                 </div>
 
+                <RhfTextareaField
+                    name="note"
+                    label="Note"
+                    placeholder="Optional note"
+                />
+
                 <Button type="submit" disabled={isPending} className="w-full">
                     {isPending ? null : isEditing ? <Save /> : <Plus />}
                     {isPending ? "Saving..." : isEditing ? "Update Mileage" : "Add Mileage"}

apps/dashboard/modules/vehicles/mileage.schema.ts

@@ -1,9 +1,14 @@
 import { z } from "zod"
 
 export const mileageFormSchema = z.object({
-    mileage: z.coerce.number({ message: "Mileage is required" }).min(0, "Mileage must be 0 or greater"),
+    miles: z.coerce.number({ message: "Miles is required" }).min(0, "Miles must be 0 or greater"),
+    fuel_level: z.preprocess(
+        (value) => (value === "" || value == null ? undefined : Number(value)),
+        z.number().min(0, "Fuel level must be 0 or greater").max(100, "Fuel level cannot exceed 100").optional(),
+    ),
     date: z.string().min(1, "Date is required"),
     time: z.string().min(1, "Time is required"),
+    note: z.string().optional(),
 })
 
 export type MileageFormValues = z.infer<typeof mileageFormSchema>

apps/dashboard/shared/data-view/resource-page/crud-resource.tsx

@@ -5,6 +5,8 @@ import { DataTable, type ActionsColumnOptions, type DataViewProps } from "@/shar
 import { useResourcePage, type UseResourcePageOptions, type ResourceItem, type ResourcePageClient } from "./use-resource-page"
 import type { ColumnDef } from "@tanstack/react-table"
 
+type LooseColumnDef<TData> = ColumnDef<TData, unknown> | (Omit<ColumnDef<TData, unknown>, "accessorKey"> & { accessorKey: string })
+
 export type CrudResourceColumnHelpers<TClient extends ResourcePageClient> = {
     actionsColumn: (options?: Partial<ActionsColumnOptions<ResourceItem<TClient>>>) => ColumnDef<ResourceItem<TClient>, unknown>
     openEdit: (row: ResourceItem<TClient>) => void
@@ -31,7 +33,7 @@ type ReactNodeOrRender<TClient extends ResourcePageClient> =
 type ManagedTableProps = "columns" | "data" | "pagination" | "sorting" | "onChange" | "isLoading"
 
 export type CrudResourceProps<TClient extends ResourcePageClient> = UseResourcePageOptions<TClient> & {
-    columns: ColumnDef<ResourceItem<TClient>>[] | ((helpers: CrudResourceColumnHelpers<TClient>) => ColumnDef<ResourceItem<TClient>>[])
+    columns: LooseColumnDef<ResourceItem<TClient>>[] | ((helpers: CrudResourceColumnHelpers<TClient>) => LooseColumnDef<ResourceItem<TClient>>[])
     onRowClick?: (row: ResourceItem<TClient>) => void
     tableHeader?: ReactNodeOrRender<TClient>
     tableProps?: Omit<Partial<DataViewProps<ResourceItem<TClient>>>, ManagedTableProps>
@@ -84,7 +86,7 @@ export function CrudResource<TClient extends ResourcePageClient>({
             {tableHeader && (typeof tableHeader === "function" ? tableHeader(context) : tableHeader)}
             <DataTable
                 {...tableProps}
-                columns={columns}
+                columns={columns as ColumnDef<TItem, any>[]}
                 data={items}
                 pagination={page.pagination}
                 sorting={page.sorting}

apps/dashboard/tsconfig.json

@@ -18,8 +18,6 @@
         "name": "next"
       }
     ],
-    "ignoreDeprecations": "5.0",
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./*"]
     }

packages/api/tsconfig.json

@@ -3,8 +3,6 @@
   "compilerOptions": {
     "outDir": "dist",
     "rootDir": ".",
-    "ignoreDeprecations": "5.0",
-    "baseUrl": ".",
     "module": "ESNext",
     "moduleResolution": "Bundler"
   },