271 lines
10 KiB
TypeScript
271 lines
10 KiB
TypeScript
"use client"
|
|
|
|
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,
|
|
RhfAsyncSelectField,
|
|
RhfSelectField,
|
|
RhfTextField,
|
|
RhfTextareaField,
|
|
} from "@/shared/components/form"
|
|
import { useResourceForm } from "@/shared/hooks/use-resource-form"
|
|
import { useFormMutation } from "@/shared/hooks/use-form-mutation"
|
|
import { toId, toRelation } from "@/shared/lib/utils"
|
|
import { useAuthApi } from "@/shared/useApi"
|
|
import { BillStatus, BILL_ROUTES, DEPARTMENT_ROUTES, JOB_CARD_ROUTES, PAYMENT_TERM_ROUTES, PURCHASE_ORDER_ROUTES, VENDOR_ROUTES } from "@garage/api"
|
|
import { toast } from "sonner"
|
|
import { PartsSelectorField } from "@/modules/parts/parts-selector-field"
|
|
import { ServicesSelectorField } from "@/modules/services/services-selector-field"
|
|
import { ExpenseItemsSelectorField } from "@/modules/expense-items/expense-items-selector-field"
|
|
|
|
import { billFormSchema, type BillFormValues } from "./bill.schema"
|
|
|
|
export type BillFormProps = {
|
|
resourceId?: string | null
|
|
initialData?: unknown
|
|
onSuccess?: () => void
|
|
}
|
|
|
|
const DEFAULT_VALUES: BillFormValues = {
|
|
vendor: null,
|
|
purchase_order: null,
|
|
job_card: null,
|
|
payment_term: null,
|
|
department: null,
|
|
title: "",
|
|
bill_number: "",
|
|
bill_date: "",
|
|
bill_due_date: "",
|
|
status: "draft",
|
|
notes: "",
|
|
part_items: [],
|
|
service_items: [],
|
|
expense_items: [],
|
|
}
|
|
|
|
const STATUS_OPTIONS = BillStatus.map((value) => ({
|
|
value,
|
|
label: value.replaceAll("_", " "),
|
|
}))
|
|
|
|
const mapLookupOption = (item: any) => ({
|
|
value: String(item.id),
|
|
label: item.name ?? item.title ?? item.bill_number ?? `#${item.id}`,
|
|
})
|
|
|
|
const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
|
|
|
|
function mapToFormValues(data: unknown): BillFormValues {
|
|
const d = (data as any)?.data ?? data ?? {}
|
|
|
|
return {
|
|
vendor: toRelation(d.vendor_id, d.vendor_name),
|
|
purchase_order: toRelation(d.purchase_order_id, d.purchase_order_number ?? d.purchase_order_title),
|
|
job_card: toRelation(d.job_card_id, d.job_card_number ?? d.job_card_name),
|
|
payment_term: toRelation(d.payment_terms_id, d.payment_terms_name),
|
|
department: toRelation(d.department_id, d.department_name),
|
|
title: d.title || "",
|
|
bill_number: d.bill_number || "",
|
|
bill_date: d.bill_date || "",
|
|
bill_due_date: d.bill_due_date || "",
|
|
status: d.status || "draft",
|
|
notes: d.notes || "",
|
|
part_items: (d.parts ?? []).map((p: any) => ({
|
|
part_id: p.part_id ?? p.id,
|
|
title: p.part?.title ?? p.title ?? "",
|
|
quantity: Number(p.quantity) || 1,
|
|
rate: Number(p.rate) || 0,
|
|
description: p.description ?? "",
|
|
})),
|
|
service_items: (d.services ?? []).map((s: any) => ({
|
|
service_id: s.service_id ?? s.id,
|
|
title: s.service?.labor_name ?? s.labor_name ?? s.title ?? "",
|
|
quantity: Number(s.quantity) || 1,
|
|
rate: Number(s.rate) || 0,
|
|
description: s.description ?? "",
|
|
})),
|
|
expense_items: (d.expenses ?? []).map((e: any) => ({
|
|
expense_id: e.expense_id ?? e.id,
|
|
title: e.expense?.item_name ?? e.item_name ?? e.title ?? "",
|
|
quantity: Number(e.quantity) || 1,
|
|
rate: Number(e.rate) || 0,
|
|
description: e.description ?? "",
|
|
})),
|
|
}
|
|
}
|
|
|
|
function mapFormToPayload(values: BillFormValues) {
|
|
return {
|
|
title: values.title,
|
|
vendor_id: toId(values.vendor),
|
|
purchase_order_id: toId(values.purchase_order),
|
|
job_card_id: toId(values.job_card),
|
|
payment_terms_id: toId(values.payment_term),
|
|
department_id: toId(values.department),
|
|
bill_number: values.bill_number || undefined,
|
|
bill_date: values.bill_date || undefined,
|
|
bill_due_date: values.bill_due_date || undefined,
|
|
status: values.status || undefined,
|
|
notes: values.notes || undefined,
|
|
part_items: (values.part_items ?? []).map((item) => ({
|
|
part_id: item.part_id,
|
|
quantity: item.quantity,
|
|
rate: item.rate,
|
|
description: item.description || undefined,
|
|
})),
|
|
service_items: (values.service_items ?? []).map((item) => ({
|
|
service_id: item.service_id,
|
|
quantity: item.quantity,
|
|
rate: item.rate,
|
|
description: item.description || undefined,
|
|
})),
|
|
expense_items: (values.expense_items ?? []).map((item) => ({
|
|
expense_id: item.expense_id,
|
|
quantity: item.quantity,
|
|
rate: item.rate,
|
|
description: item.description || undefined,
|
|
})),
|
|
}
|
|
}
|
|
|
|
export function BillForm({ resourceId, initialData, onSuccess }: BillFormProps) {
|
|
const api = useAuthApi()
|
|
|
|
const { form, isEditing } = useResourceForm<BillFormValues, any>({
|
|
schema: billFormSchema,
|
|
defaultValues: DEFAULT_VALUES,
|
|
resourceId,
|
|
initialData,
|
|
mapToFormValues,
|
|
})
|
|
|
|
const { mutate, error, isPending } = useFormMutation(form, {
|
|
mutationFn: (values: BillFormValues) => {
|
|
const payload = mapFormToPayload(values)
|
|
const promise = isEditing && resourceId
|
|
? api.bills.update(resourceId, payload)
|
|
: api.bills.create(payload)
|
|
|
|
toast.promise(promise, {
|
|
loading: isEditing ? "Updating bill..." : "Creating bill...",
|
|
success: isEditing ? "Bill updated successfully" : "Bill created successfully",
|
|
error: isEditing ? "Failed to update bill" : "Failed to create bill",
|
|
})
|
|
|
|
return promise
|
|
},
|
|
onSuccess: () => {
|
|
form.reset()
|
|
onSuccess?.()
|
|
},
|
|
})
|
|
|
|
return (
|
|
<Rhform form={form} onSubmit={(values) => mutate(values)}>
|
|
{error && (
|
|
<Alert variant="destructive" className="mb-4">
|
|
<AlertTriangle className="me-2 h-4 w-4" />
|
|
<AlertTitle>{isEditing ? "Failed to update bill" : "Failed to create bill"}</AlertTitle>
|
|
{error.message}
|
|
</Alert>
|
|
)}
|
|
|
|
<FieldGroup>
|
|
<RhfTextField name="title" label="Title" placeholder="Enter bill title" required />
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfTextField name="bill_number" label="Bill Number" placeholder="e.g. BILL-001" />
|
|
<RhfSelectField name="status" label="Status" options={STATUS_OPTIONS} />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfTextField name="bill_date" label="Bill Date" type="date" />
|
|
<RhfTextField name="bill_due_date" label="Due Date" type="date" />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfAsyncSelectField
|
|
name="vendor"
|
|
label="Vendor"
|
|
placeholder="Select vendor"
|
|
queryKey={[VENDOR_ROUTES.INDEX]}
|
|
listFn={() => api.vendors.list()}
|
|
mapOption={mapLookupOption}
|
|
{...STORE_OBJECT}
|
|
/>
|
|
<RhfAsyncSelectField
|
|
name="department"
|
|
label="Department"
|
|
placeholder="Select department"
|
|
queryKey={[DEPARTMENT_ROUTES.INDEX]}
|
|
listFn={() => api.departments.list()}
|
|
mapOption={mapLookupOption}
|
|
{...STORE_OBJECT}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfAsyncSelectField
|
|
name="job_card"
|
|
label="Job Card"
|
|
placeholder="Select job card"
|
|
queryKey={[JOB_CARD_ROUTES.INDEX]}
|
|
listFn={() => api.jobCards.list()}
|
|
mapOption={(item: any) => ({ value: String(item.id), label: item.job_card_number || item.name || `#${item.id}` })}
|
|
{...STORE_OBJECT}
|
|
/>
|
|
<RhfAsyncSelectField
|
|
name="payment_term"
|
|
label="Payment Term"
|
|
placeholder="Select payment term"
|
|
queryKey={[PAYMENT_TERM_ROUTES.INDEX]}
|
|
listFn={() => api.paymentTerms.list()}
|
|
mapOption={mapLookupOption}
|
|
{...STORE_OBJECT}
|
|
/>
|
|
</div>
|
|
|
|
<RhfAsyncSelectField
|
|
name="purchase_order"
|
|
label="Purchase Order"
|
|
placeholder="Select purchase order"
|
|
queryKey={[PURCHASE_ORDER_ROUTES.INDEX]}
|
|
listFn={() => api.purchaseOrders.list()}
|
|
mapOption={(item: any) => ({
|
|
value: String(item.id),
|
|
label: item.order_number || item.title || `#${item.id}`,
|
|
})}
|
|
{...STORE_OBJECT}
|
|
/>
|
|
|
|
<RhfTextareaField name="notes" label="Notes" rows={3} />
|
|
|
|
<PartsSelectorField<BillFormValues, "part_items"> name="part_items" />
|
|
<ServicesSelectorField<BillFormValues, "service_items"> name="service_items" />
|
|
<ExpenseItemsSelectorField<BillFormValues, "expense_items"> name="expense_items" />
|
|
|
|
<Button type="submit" disabled={isPending}>
|
|
{isPending ? (
|
|
"Saving..."
|
|
) : isEditing ? (
|
|
<>
|
|
<Save className="me-2 h-4 w-4" />
|
|
Update Bill
|
|
</>
|
|
) : (
|
|
<>
|
|
<Plus className="me-2 h-4 w-4" />
|
|
Create Bill
|
|
</>
|
|
)}
|
|
</Button>
|
|
</FieldGroup>
|
|
</Rhform>
|
|
)
|
|
}
|
|
|