fix bugs

Co-authored-by: Copilot <copilot@github.com>
2026-05-07 15:04:05 +03:00 · 2026-05-07 15:04:05 +03:00 · dd32658500
commit dd32658500
parent c7eb23dd3f
8 changed files with 199 additions and 71 deletions
--- a/apps/dashboard/app/(authenticated)/sales/vehicles/[id]/mileage/page.tsx
+++ b/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",
--- a/apps/dashboard/modules/job-cards/job-card-form.tsx
+++ b/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>
    )
 }
--- a/apps/dashboard/modules/vehicles/mileage-form.tsx
+++ b/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,
-        date: d.date || "",
-        time: d.time || "",
+        miles: d.miles ?? d.mileage ?? 0,
+        fuel_level: d.fuel_level ?? undefined,
+        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"
-                    label="Mileage"
+                    name="miles"
+                    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"}
--- a/apps/dashboard/modules/vehicles/mileage.schema.ts
+++ b/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>
--- a/apps/dashboard/shared/data-view/resource-page/crud-resource.tsx
+++ b/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}
--- a/apps/dashboard/tsconfig.json
+++ b/apps/dashboard/tsconfig.json
@ -18,8 +18,6 @@
        "name": "next"
      }
    ],
-    "ignoreDeprecations": "5.0",
-    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
--- a/build.log
+++ b/build.log
--- a/packages/api/tsconfig.json
+++ b/packages/api/tsconfig.json
@ -3,8 +3,6 @@
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": ".",
-    "ignoreDeprecations": "5.0",
-    "baseUrl": ".",
    "module": "ESNext",
    "moduleResolution": "Bundler"
  },