282 lines
10 KiB
TypeScript
282 lines
10 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo } 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 { FieldGroup } from "@/shared/components/ui/field"
|
|
import {
|
|
Rhform,
|
|
RhfTextField,
|
|
RhfSelectField,
|
|
RhfTextareaField,
|
|
RhfAsyncSelectField,
|
|
RhfAutoGenerateField,
|
|
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, getTodayDate } from "@/shared/lib/utils"
|
|
|
|
import {
|
|
paymentMadeFormSchema,
|
|
type PaymentMadeFormValues,
|
|
} from "./payment-made.schema"
|
|
import {
|
|
PAYMENT_MADE_ROUTES,
|
|
PAYMENT_MODE_ROUTES,
|
|
EMPLOYEE_ROUTES,
|
|
PaymentFor,
|
|
} from "@garage/api"
|
|
import { RhfVendorSelectField } from "@/modules/vendors/rhf-vendor-select-field"
|
|
|
|
// ── Constants ──
|
|
|
|
const PAYMENT_FOR_OPTIONS = PaymentFor.map((value) => ({
|
|
value,
|
|
label: value.charAt(0).toUpperCase() + value.slice(1),
|
|
}))
|
|
|
|
// ── Props ──
|
|
|
|
export type PaymentMadeFormProps = {
|
|
resourceId?: string | null
|
|
initialData?: unknown
|
|
onSuccess?: () => void
|
|
billId?: string | number | null
|
|
expenseId?: string | number | null
|
|
}
|
|
|
|
// ── Default values ──
|
|
|
|
const DEFAULT_VALUES: PaymentMadeFormValues & { details: Array<{ bill_id?: string | number | null; amount_paid?: number, expense_id?: string | number | null }> } = {
|
|
vendor: null,
|
|
employee: null,
|
|
payment_mode: null,
|
|
payment_for: "bill",
|
|
amount: "",
|
|
payment_number: "",
|
|
payment_reference: "",
|
|
payment_date: getTodayDate(),
|
|
paid_through: "",
|
|
notes: "",
|
|
details: []
|
|
}
|
|
|
|
// ── Mapping helpers ──
|
|
|
|
function mapToFormValues(data: unknown): typeof DEFAULT_VALUES {
|
|
const d = (data as any)?.data ?? data ?? {}
|
|
|
|
// Resolve payment_mode label from nested object (title) or fallback to id
|
|
const paymentModeId = d.payment_mode_id ?? d.payment_mode?.id
|
|
const paymentModeLabel = d.payment_mode?.title ?? d.payment_mode?.name ?? d.payment_mode_name
|
|
|
|
return {
|
|
vendor: toRelation(d.vendor_id, d.vendor?.company_name ?? d.vendor?.name ?? d.vendor_name),
|
|
employee: toRelation(d.employee_id, d.employee?.first_name ? `${d.employee.first_name} ${d.employee.last_name ?? ""}`.trim() : d.employee_name),
|
|
payment_mode: toRelation(paymentModeId, paymentModeLabel),
|
|
payment_for: d.payment_for || "",
|
|
amount: d.payment_made ? String(d.payment_made) : "",
|
|
payment_number: d.payment_number || "",
|
|
payment_reference: d.payment_reference || "",
|
|
payment_date: d.payment_date || "",
|
|
paid_through: d.paid_through || "-",
|
|
notes: d.notes || "-",
|
|
details: [{ bill_id: d.bill_id, amount_paid: d.amount_paid }],
|
|
}
|
|
}
|
|
|
|
|
|
function mapFormToPayload(values: PaymentMadeFormValues, billId?: string | number | null, expenseId?: string | number | null) {
|
|
const paymentDetails =
|
|
expenseId ? [{ expense_id: expenseId, amount_paid: values.amount ? Number(values.amount) : 0 }]
|
|
: [{ bill_id: billId, amount_paid: values.amount ? Number(values.amount) : 0 }]
|
|
return {
|
|
vendor_id: toId(values.vendor),
|
|
employee_id: toId(values.employee) || undefined,
|
|
payment_mode_id: toId(values.payment_mode),
|
|
payment_for: values.payment_for,
|
|
amount: values.amount ? Number(values.amount) : 0,
|
|
payment_number: values.payment_number || undefined,
|
|
payment_reference: values.payment_reference || undefined,
|
|
payment_date: values.payment_date,
|
|
paid_through: values.paid_through || undefined,
|
|
notes: values.notes || undefined,
|
|
payment_made: values.amount,
|
|
details: paymentDetails,
|
|
...(billId ? { bill_id: Number(billId) } : {}),
|
|
...(expenseId ? { expense_id: Number(expenseId) } : {}),
|
|
}
|
|
}
|
|
|
|
// ── Shared mapOption for async selects ──
|
|
|
|
const mapLookupOption = (item: any) => ({
|
|
value: String(item.id),
|
|
label: item.name ?? item.title ?? `#${item.id}`,
|
|
})
|
|
|
|
const mapVendorOption = (item: any) => ({
|
|
value: String(item.id),
|
|
label: item.name ?? item.company_name ?? `#${item.id}`,
|
|
})
|
|
|
|
const mapEmployeeOption = (item: any) => ({
|
|
value: String(item.id),
|
|
label: item.first_name
|
|
? `${item.first_name} ${item.last_name || ""}`.trim()
|
|
: item.name ?? `#${item.id}`,
|
|
})
|
|
|
|
const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
|
|
|
|
// ── Component ──
|
|
|
|
export function PaymentMadeForm({ resourceId, initialData, onSuccess, billId, expenseId }: PaymentMadeFormProps) {
|
|
const api = useAuthApi()
|
|
|
|
const resolvedInitialData = useMemo(() => {
|
|
const base: any = { ...(initialData as any) }
|
|
if (!resourceId) {
|
|
if (billId) {
|
|
base.payment_for = "bill"
|
|
} else if (expenseId) {
|
|
base.payment_for = "expense"
|
|
}
|
|
}
|
|
return Object.keys(base).length ? base : initialData
|
|
}, [resourceId, billId, expenseId, initialData])
|
|
|
|
const { form, isEditing } = useResourceForm<PaymentMadeFormValues, any>({
|
|
schema: paymentMadeFormSchema,
|
|
defaultValues: DEFAULT_VALUES,
|
|
resourceId,
|
|
initialData: resolvedInitialData,
|
|
mapToFormValues,
|
|
})
|
|
|
|
const { mutate, error, isPending } = useFormMutation(form, {
|
|
mutationFn: (values: PaymentMadeFormValues) => {
|
|
const payload = mapFormToPayload(values, billId, expenseId)
|
|
const promise = (isEditing && resourceId
|
|
? api.paymentMades.update(resourceId, payload as any)
|
|
: api.paymentMades.create(payload as any)) as Promise<any>
|
|
toast.promise(promise, {
|
|
loading: isEditing ? "Updating payment..." : "Recording payment...",
|
|
success: isEditing ? "Payment updated successfully" : "Payment recorded successfully",
|
|
error: isEditing ? "Failed to update payment" : "Failed to record payment",
|
|
})
|
|
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 payment" : "Failed to record payment"}
|
|
</AlertTitle>
|
|
{error.message}
|
|
</Alert>
|
|
)}
|
|
|
|
<FieldGroup>
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfVendorSelectField
|
|
name="vendor"
|
|
label="Vendor"
|
|
/>
|
|
<RhfAsyncSelectField
|
|
name="employee"
|
|
label="Employee"
|
|
placeholder="Select employee"
|
|
queryKey={[EMPLOYEE_ROUTES.INDEX]}
|
|
listFn={() => api.employees.list()}
|
|
mapOption={mapEmployeeOption}
|
|
{...STORE_OBJECT}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfSelectField
|
|
name="payment_for"
|
|
label="Payment For"
|
|
placeholder="Select type"
|
|
options={PAYMENT_FOR_OPTIONS}
|
|
required
|
|
/>
|
|
<RhfTextField
|
|
name="amount"
|
|
label="Amount"
|
|
placeholder="0.00"
|
|
type="number"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfAutoGenerateField
|
|
table="payments"
|
|
autoFetch
|
|
name="payment_number"
|
|
label="Payment Number"
|
|
placeholder="PAY-001"
|
|
/>
|
|
<RhfTextField
|
|
name="payment_reference"
|
|
label="Payment Reference"
|
|
placeholder="Reference"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfDateField
|
|
name="payment_date"
|
|
label="Payment Date"
|
|
required
|
|
/>
|
|
<RhfAsyncSelectField
|
|
name="payment_mode"
|
|
label="Payment Mode"
|
|
placeholder="Select payment mode"
|
|
queryKey={[PAYMENT_MODE_ROUTES.INDEX]}
|
|
listFn={() => api.paymentModes.list()}
|
|
mapOption={mapLookupOption}
|
|
{...STORE_OBJECT}
|
|
/>
|
|
</div>
|
|
|
|
<RhfTextField
|
|
name="paid_through"
|
|
label="Paid Through"
|
|
placeholder="Account name"
|
|
/>
|
|
|
|
<RhfTextareaField
|
|
name="notes"
|
|
label="Notes"
|
|
rows={3}
|
|
placeholder="Add any notes about this payment..."
|
|
/>
|
|
|
|
<Button type="submit" variant="default" disabled={isPending}>
|
|
{isEditing ? <Save /> : <Plus />}
|
|
{isPending
|
|
? (isEditing ? "Updating..." : "Recording...")
|
|
: (isEditing ? "Update Payment" : "Record Payment")}
|
|
</Button>
|
|
</FieldGroup>
|
|
</Rhform>
|
|
)
|
|
}
|