"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({ 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 ( mutate(values)}> {error && ( {isEditing ? "Failed to update bill" : "Failed to create bill"} {error.message} )}
api.vendors.list()} mapOption={mapLookupOption} {...STORE_OBJECT} /> api.departments.list()} mapOption={mapLookupOption} {...STORE_OBJECT} />
api.jobCards.list()} mapOption={(item: any) => ({ value: String(item.id), label: item.job_card_number || item.name || `#${item.id}` })} {...STORE_OBJECT} /> api.paymentTerms.list()} mapOption={mapLookupOption} {...STORE_OBJECT} />
api.purchaseOrders.list()} mapOption={(item: any) => ({ value: String(item.id), label: item.order_number || item.title || `#${item.id}`, })} {...STORE_OBJECT} /> name="part_items" /> name="service_items" /> name="expense_items" />
) }