fix bugs

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

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...")
-                        : (isEditing ? "Update Job Card" : "Create Job Card")}
+                        : 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,
-        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
                 />
 
+                <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">
-                    <RhfTextField
+                    <RhfDateField
                         name="date"
                         label="Date"
-                        type="date"
                         required
                     />
-                    <RhfTextField
+                    <RhfTimeField
                         name="time"
                         label="Time"
-                        type="time"
-                        required
+                         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>