"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 { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card" import { Rhform, RhfTextField, RhfSelectField, RhfTextareaField, RhfAsyncSelectField, RhfAutoGenerateField, RhfCheckboxField, RhfDateField, } from "@/shared/components/form" import { toast } from "sonner" import { useAuthApi } from "@/shared/useApi" import { useResourceForm } from "@/shared/hooks/use-resource-form" import { useFormMutation } from "@/shared/hooks/use-form-mutation" import { toRelation, toId } from "@/shared/lib/utils" import { formatTaxLabel } from "@/shared/utils/formatters" import { useFormContext } from "react-hook-form" import { invoiceFormSchema, type InvoiceFormValues, } from "./invoice.schema" import { INVOICE_ROUTES, DEPARTMENT_ROUTES, PAYMENT_TERM_ROUTES, INVOICE_SEQUENCE_ROUTES, TAX_ROUTES, InvoiceStatus, InvoiceDiscount, } from "@garage/api" import { RhfCustomerSelectField } from "@/modules/customers/rhf-customer-select-field" import { InvoiceSequenceCrudDialog } from "./invoice-sequence-crud-dialog" import { RhfVehicleSelectField } from "@/modules/vehicles/rhf-vehicle-select-field" 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 { InvoiceFormSummary } from "./invoice-form-summary" // ── Constants ── const STATUS_OPTIONS = InvoiceStatus.map((v) => ({ value: v, label: v.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()), })) const DISCOUNT_OPTIONS = InvoiceDiscount.map((v) => ({ value: v, label: v.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()), })) // ── Props ── export type InvoiceFormProps = { resourceId?: string | null initialData?: unknown onSuccess?: () => void } // ── Default values ── const DEFAULT_VALUES: InvoiceFormValues = { subject: "", customer: null, vehicle: null, department: null, estimate: null, payment_terms: null, invoice_sequence: null, payment_mode: null, insurer: null, invoice_to: null, invoice_number: "", invoice_title: "", invoice_date: new Date().toISOString().split("T")[0], due_date: "", status: "draft", kms_in: undefined, has_insurance: false, discount: "no", discount_amount: undefined, tax: null, deposit_to: "", notes: "", terms_and_conditions: "", parts: [], services: [], expense_items: [], } // ── Mapping helpers ── function mapToFormValues(data: unknown): InvoiceFormValues { const d = (data as any)?.data ?? data ?? {} return { subject: d.subject || "", customer: toRelation(d.customer_id, d.customer_name), vehicle: toRelation(d.vehicle_id, d.vehicle_name), department: toRelation(d.department_id, d.department_name), estimate: toRelation(d.estimate_id, d.estimate_number ?? d.estimate_title), payment_terms: toRelation(d.payment_terms_id, d.payment_terms_name), invoice_sequence: toRelation(d.invoice_sequence_id, d.invoice_sequence_title ?? d.invoice_sequence?.title), payment_mode: toRelation(d.payment_mode_id, d.payment_mode_name), insurer: toRelation(d.insurer_id, d.insurer_name), invoice_to: toRelation(d.invoice_to_id, d.invoice_to_name), invoice_number: d.invoice_number || "", invoice_title: d.invoice_title || "", invoice_date: d.invoice_date ? d.invoice_date.split("T")[0] : "", due_date: d.due_date ? d.due_date.split("T")[0] : "", status: d.status || "draft", kms_in: d.kms_in ? Number(d.kms_in) : undefined, has_insurance: d.has_insurance ?? false, discount: d.discount || "no", discount_amount: d.discount_amount != null ? Number(d.discount_amount) : undefined, tax: toRelation(d.tax_id, d.tax_title ?? (formatTaxLabel(d.tax, "") || undefined)), deposit_to: d.deposit_to || "", notes: d.notes || "", terms_and_conditions: d.terms_and_conditions || "", parts: (d.invoice_parts ?? 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, discount_amount: p.discount_amount != null ? Number(p.discount_amount) : undefined, description: p.description ?? "", })), services: (d.invoice_services ?? 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, discount_amount: s.discount_amount != null ? Number(s.discount_amount) : undefined, description: s.description ?? "", })), expense_items: (d.invoice_expenses ?? 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, discount_amount: e.discount_amount != null ? Number(e.discount_amount) : undefined, description: e.description ?? "", })), } } function mapFormToPayload(values: InvoiceFormValues) { return { subject: values.subject, customer_id: toId(values.customer), vehicle_id: toId(values.vehicle), department_id: toId(values.department), estimate_id: toId(values.estimate), payment_terms_id: toId(values.payment_terms), invoice_sequence_id: toId(values.invoice_sequence), payment_mode_id: toId(values.payment_mode), insurer_id: toId(values.insurer), invoice_to_id: toId(values.invoice_to), invoice_number: values.invoice_number || undefined, invoice_title: values.invoice_title || undefined, invoice_date: values.invoice_date || undefined, due_date: values.due_date || undefined, status: values.status || undefined, kms_in: values.kms_in || undefined, has_insurance: values.has_insurance, discount: values.discount || undefined, discount_amount: values.discount === "transaction_level" ? (values.discount_amount ?? 0) : undefined, tax_id: toId(values.tax) ? Number(toId(values.tax)) : undefined, deposit_to: values.deposit_to || undefined, notes: values.notes || undefined, terms_and_conditions: values.terms_and_conditions || undefined, parts: (values.parts ?? []).map((item) => ({ part_id: item.part_id, quantity: item.quantity, rate: item.rate, discount_amount: values.discount === "line_item_level" ? (item.discount_amount ?? 0) : undefined, description: item.description || undefined, })), services: (values.services ?? []).map((item) => ({ service_id: item.service_id, quantity: item.quantity, rate: item.rate, discount_amount: values.discount === "line_item_level" ? (item.discount_amount ?? 0) : undefined, description: item.description || undefined, })), expenses: (values.expense_items ?? []).map((item) => ({ expense_id: item.expense_id, quantity: item.quantity, rate: item.rate, discount_amount: values.discount === "line_item_level" ? (item.discount_amount ?? 0) : undefined, description: item.description || undefined, })), } } // ── Shared mapOption for async selects ── const mapLookupOption = (item: any) => ({ value: String(item.id), label: item.name ?? item.title ?? `#${item.id}`, }) const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label } // ── Insurance fields (conditionally rendered) ── function InsurerField() { const { watch } = useFormContext() const hasInsurance = watch("has_insurance") if (!hasInsurance) return null return ( name="insurer" label="Insurer" placeholder="Select insurer..." /> ) } // ── Transaction-level discount amount field ── function TransactionDiscountField() { const { watch, register } = useFormContext() const discount = watch("discount") if (discount !== "transaction_level") return null return ( ) } // ── Component ── export function InvoiceForm({ resourceId, initialData, onSuccess }: InvoiceFormProps) { const api = useAuthApi() const { form, isEditing } = useResourceForm({ schema: invoiceFormSchema, defaultValues: DEFAULT_VALUES, resourceId, initialData, queryKey: [INVOICE_ROUTES.BY_ID, resourceId], mapToFormValues, }) const discount = form.watch("discount") const isLineItemDiscount = discount === "line_item_level" const { mutate, error, isPending } = useFormMutation(form, { mutationFn: (values: InvoiceFormValues) => { const payload = mapFormToPayload(values) const promise = (isEditing && resourceId ? api.invoices.update(resourceId, payload) : api.invoices.create(payload)) as Promise toast.promise(promise, { loading: isEditing ? "Updating invoice..." : "Creating invoice...", success: isEditing ? "Invoice updated successfully" : "Invoice created successfully", error: isEditing ? "Failed to update invoice" : "Failed to create invoice", }) return promise }, onSuccess: () => { form.reset() onSuccess?.() }, }) return ( mutate(values)}> {error && ( {isEditing ? "Failed to update invoice" : "Failed to create invoice"} {error.message} )}
{/* ── Main column (8/12) ── */}
name="parts" showDiscount={isLineItemDiscount} /> name="services" showDiscount={isLineItemDiscount} /> name="expense_items" showDiscount={isLineItemDiscount} />
{/* ── Sidebar column (4/12) ── */}
Details
name="customer" /> api.taxes.list()} mapOption={(item: any) => ({ value: String(item.id), label: item.title ? `${item.title} (${item.rate}%)` : `#${item.id}`, })} {...STORE_OBJECT} /> api.departments.list()} mapOption={mapLookupOption} {...STORE_OBJECT} /> api.paymentTerms.list()} mapOption={mapLookupOption} {...STORE_OBJECT} />
Invoice Sequence
api.invoiceSequences.list()} mapOption={(item: any) => ({ value: String(item.id), label: item.title || `#${item.id}`, })} {...STORE_OBJECT} />
) }