374 lines
14 KiB
TypeScript
374 lines
14 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,
|
|
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 { useFormContext } from "react-hook-form"
|
|
|
|
import {
|
|
invoiceFormSchema,
|
|
type InvoiceFormValues,
|
|
} from "./invoice.schema"
|
|
import {
|
|
INVOICE_ROUTES,
|
|
DEPARTMENT_ROUTES,
|
|
ESTIMATE_ROUTES,
|
|
PAYMENT_TERM_ROUTES,
|
|
INVOICE_SEQUENCE_ROUTES,
|
|
PAYMENT_MODE_ROUTES,
|
|
CUSTOMER_ROUTES,
|
|
InvoiceStatus,
|
|
InvoiceDiscount,
|
|
} from "@garage/api"
|
|
import { RhfCustomerSelectField } from "@/modules/customers/rhf-customer-select-field"
|
|
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"
|
|
|
|
// ── 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: "",
|
|
due_date: "",
|
|
status: "draft",
|
|
kms_in: undefined,
|
|
has_insurance: false,
|
|
discount: "no",
|
|
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",
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
description: item.description || undefined,
|
|
})),
|
|
services: (values.services ?? []).map((item) => ({
|
|
service_id: item.service_id,
|
|
quantity: item.quantity,
|
|
rate: item.rate,
|
|
description: item.description || undefined,
|
|
})),
|
|
expenses: (values.expense_items ?? []).map((item) => ({
|
|
expense_id: item.expense_id,
|
|
quantity: item.quantity,
|
|
rate: item.rate,
|
|
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<InvoiceFormValues>()
|
|
const hasInsurance = watch("has_insurance")
|
|
|
|
if (!hasInsurance) return null
|
|
|
|
return (
|
|
<RhfCustomerSelectField<InvoiceFormValues, "insurer">
|
|
name="insurer"
|
|
label="Insurer"
|
|
placeholder="Select insurer..."
|
|
/>
|
|
)
|
|
}
|
|
|
|
// ── Component ──
|
|
|
|
export function InvoiceForm({ resourceId, initialData, onSuccess }: InvoiceFormProps) {
|
|
const api = useAuthApi()
|
|
|
|
const { form, isEditing } = useResourceForm<InvoiceFormValues, any>({
|
|
schema: invoiceFormSchema,
|
|
defaultValues: DEFAULT_VALUES,
|
|
resourceId,
|
|
initialData,
|
|
queryKey: [INVOICE_ROUTES.BY_ID, resourceId],
|
|
mapToFormValues,
|
|
})
|
|
|
|
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<any>
|
|
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 (
|
|
<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 invoice" : "Failed to create invoice"}
|
|
</AlertTitle>
|
|
{error.message}
|
|
</Alert>
|
|
)}
|
|
|
|
<FieldGroup>
|
|
<RhfTextField name="subject" label="Subject" placeholder="Invoice subject" required />
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfAutoGenerateField autoFetch table="invoices" name="invoice_number" label="Invoice Number" placeholder="INV-0001" />
|
|
<RhfTextField name="invoice_title" label="Invoice Title" placeholder="e.g. Tax Invoice" />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfSelectField name="status" label="Status" options={STATUS_OPTIONS} />
|
|
<RhfSelectField name="discount" label="Discount" options={DISCOUNT_OPTIONS} />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfDateField name="invoice_date" label="Invoice Date" />
|
|
<RhfDateField name="due_date" label="Due Date" />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfCustomerSelectField<InvoiceFormValues, "customer"> name="customer" />
|
|
<RhfVehicleSelectField name="vehicle" />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfCustomerSelectField<InvoiceFormValues, "invoice_to">
|
|
name="invoice_to"
|
|
label="Invoice To"
|
|
placeholder="Select billing contact..."
|
|
/>
|
|
<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="estimate"
|
|
label="Estimate"
|
|
placeholder="Select estimate"
|
|
queryKey={[ESTIMATE_ROUTES.INDEX]}
|
|
listFn={() => api.estimates.list()}
|
|
mapOption={(item: any) => ({
|
|
value: String(item.id),
|
|
label: item.title||item.estimate_number || `#${item.id}`,
|
|
})}
|
|
{...STORE_OBJECT}
|
|
/>
|
|
<RhfAsyncSelectField
|
|
name="payment_terms"
|
|
label="Payment Terms"
|
|
placeholder="Select payment terms"
|
|
queryKey={[PAYMENT_TERM_ROUTES.INDEX]}
|
|
listFn={() => api.paymentTerms.list()}
|
|
mapOption={mapLookupOption}
|
|
{...STORE_OBJECT}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfAsyncSelectField
|
|
name="invoice_sequence"
|
|
label="Invoice Sequence"
|
|
placeholder="Select sequence"
|
|
queryKey={[INVOICE_SEQUENCE_ROUTES.INDEX]}
|
|
listFn={() => api.invoiceSequences.list()}
|
|
mapOption={(item: any) => ({
|
|
value: String(item.id),
|
|
label: item.title || `#${item.id}`,
|
|
})}
|
|
{...STORE_OBJECT}
|
|
/>
|
|
<RhfTextField name="kms_in" label="KMs In" type="number" placeholder="e.g. 50000" />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfAsyncSelectField
|
|
name="payment_mode"
|
|
label="Payment Mode"
|
|
placeholder="Select payment mode"
|
|
queryKey={[PAYMENT_MODE_ROUTES.INDEX]}
|
|
listFn={() => api.paymentModes.list()}
|
|
mapOption={mapLookupOption}
|
|
{...STORE_OBJECT}
|
|
/>
|
|
<RhfTextField name="deposit_to" label="Deposit To" placeholder="e.g. Main Account" />
|
|
</div>
|
|
|
|
<RhfCheckboxField name="has_insurance" label="Has Insurance" />
|
|
<InsurerField />
|
|
|
|
<RhfTextareaField name="notes" label="Notes" placeholder="Additional notes" rows={3} />
|
|
<RhfTextareaField name="terms_and_conditions" label="Terms & Conditions" rows={3} />
|
|
|
|
<PartsSelectorField<InvoiceFormValues, "parts"> name="parts" />
|
|
<ServicesSelectorField<InvoiceFormValues, "services"> name="services" />
|
|
<ExpenseItemsSelectorField<InvoiceFormValues, "expense_items"> name="expense_items" />
|
|
|
|
<Button type="submit" variant="default" disabled={isPending}>
|
|
{isEditing ? <Save /> : <Plus />}
|
|
{isPending
|
|
? (isEditing ? "Updating..." : "Creating...")
|
|
: (isEditing ? "Update Invoice" : "Create Invoice")}
|
|
</Button>
|
|
</FieldGroup>
|
|
</Rhform>
|
|
)
|
|
}
|