Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
2026-05-07 15:04:05 +03:00
co-authored by Copilot
parent c7eb23dd3f
commit dd32658500
8 changed files with 199 additions and 71 deletions
@@ -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>
)
}