@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user