humam kerdiah
4f0a2f790f
feat: integrate dialog close context in vendor select field and CRUD dialog components feat: enhance vendor general info to format status using utility function feat: implement form dialog context for managing dialog close actions feat: add async select field dialog close context for better form handling fix: update form mutation hook to close dialog on successful submission feat: extend document print types to include expense and credit note feat: add settings update payload type to include logo and other fields feat: create employee attendance and work history pages with resource management feat: implement payment made and received detail pages with actions feat: add quick shortcuts component for easy navigation in the dashboard feat: create actions for payment made and received with print and delete options feat: implement dialog close context for better dialog management feat: add error parsing utility for improved error handling in API responses
356 lines
13 KiB
TypeScript
356 lines
13 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 {
|
|
ApiError,
|
|
BILL_ROUTES,
|
|
PAYMENT_MODE_ROUTES,
|
|
EMPLOYEE_ROUTES,
|
|
PAYMENT_MADE_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 }> } = {
|
|
bill: null,
|
|
vendor: null,
|
|
employee: null,
|
|
payment_mode: null,
|
|
payment_for: "bill",
|
|
amount: 0,
|
|
payment_number: "",
|
|
payment_reference: "",
|
|
payment_date: getTodayDate(),
|
|
paid_through: "",
|
|
notes: "",
|
|
details: [{ amount_paid: 0 }]
|
|
}
|
|
|
|
// ── Mapping helpers ──
|
|
|
|
function mapToFormValues(data: unknown): typeof DEFAULT_VALUES {
|
|
const d = (data as any)?.data ?? data ?? {}
|
|
|
|
// PaymentMade lists carry the linked bill/expense inside details[]; top-level
|
|
// bill_id/expense_id only exist on inputs sent from a bill/expense subpage.
|
|
const firstDetail = Array.isArray(d.details) ? d.details[0] ?? {} : {}
|
|
const billId = d.bill_id ?? firstDetail.bill_id ?? firstDetail.bill?.id
|
|
const billNumber = d.bill?.bill_number ?? d.bill_number ?? firstDetail.bill?.bill_number
|
|
const expenseId = d.expense_id ?? firstDetail.expense_id ?? firstDetail.expense?.id
|
|
|
|
// 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 {
|
|
bill: toRelation(billId, billNumber),
|
|
vendor: toRelation(d.vendor_id ?? d.vendor?.id, d.vendor?.company_name ?? d.vendor?.name ?? d.vendor_name),
|
|
employee: toRelation(d.employee_id ?? 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 || (expenseId ? "expense" : "bill"),
|
|
amount: d.payment_made != null ? Number(d.payment_made) : firstDetail.amount_paid != null ? Number(firstDetail.amount_paid) : 0,
|
|
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: billId, expense_id: expenseId, amount_paid: firstDetail.amount_paid ?? 0 }],
|
|
}
|
|
}
|
|
|
|
|
|
function mapFormToPayload(values: PaymentMadeFormValues, billId?: string | number | null, expenseId?: string | number | null) {
|
|
const resolvedBillId = billId ?? toId(values.bill)
|
|
const paymentDetails =
|
|
values.payment_for === "expense"
|
|
? [{ expense_id: expenseId, amount_paid: values.amount || 0 }]
|
|
: [{ bill_id: resolvedBillId, amount_paid: values.amount || 0 }]
|
|
return {
|
|
bill_id: values.payment_for === "bill" ? Number(resolvedBillId) : undefined,
|
|
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 || 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 || 0,
|
|
details: paymentDetails,
|
|
...(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 mapBillOption = (item: any) => ({
|
|
value: String(item.id),
|
|
label: item.bill_number ?? 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 paymentForOptions = useMemo(() => {
|
|
if (expenseId) {
|
|
return PAYMENT_FOR_OPTIONS.filter((option) => option.value === "expense")
|
|
}
|
|
return PAYMENT_FOR_OPTIONS.filter((option) => option.value === "bill")
|
|
}, [expenseId])
|
|
|
|
const resolvedInitialData = useMemo(() => {
|
|
const base: any = { ...(initialData as any) }
|
|
if (!resourceId) {
|
|
if (billId) {
|
|
base.payment_for = "bill"
|
|
} else if (expenseId) {
|
|
base.payment_for = "expense"
|
|
} else {
|
|
base.payment_for = "bill"
|
|
}
|
|
}
|
|
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,
|
|
initialize: (id) => api.paymentMades.show(id),
|
|
queryKey: [PAYMENT_MADE_ROUTES.BY_ID, resourceId],
|
|
mapToFormValues,
|
|
})
|
|
|
|
const vendor = form.watch("vendor")
|
|
const employee = form.watch("employee")
|
|
const paymentFor = form.watch("payment_for")
|
|
const vendorRequired = !employee?.value
|
|
const employeeRequired = !vendor?.value
|
|
const showBillField = !billId && !expenseId
|
|
|
|
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
|
|
},
|
|
onError: (error) => {
|
|
if (!(error instanceof ApiError) || !error.validationErrors) {
|
|
return
|
|
}
|
|
|
|
const vendorError = error.validationErrors.vendor_id?.[0]
|
|
const employeeError = error.validationErrors.employee_id?.[0]
|
|
const billError = error.validationErrors.bill_id?.[0]
|
|
|
|
if (billError) {
|
|
form.setError("bill", { message: billError })
|
|
}
|
|
|
|
if (!vendorError && !employeeError) {
|
|
return
|
|
}
|
|
|
|
const message = "Select either a vendor or an employee, not both"
|
|
form.setError("vendor", { message })
|
|
form.setError("employee", { message })
|
|
},
|
|
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">
|
|
{showBillField && (
|
|
<RhfAsyncSelectField
|
|
name="bill"
|
|
label="Bill"
|
|
placeholder="Select bill"
|
|
required={paymentFor === "bill"}
|
|
queryKey={[BILL_ROUTES.INDEX]}
|
|
listFn={() => api.bills.list()}
|
|
mapOption={mapBillOption}
|
|
{...STORE_OBJECT}
|
|
/>
|
|
)}
|
|
<RhfVendorSelectField
|
|
name="vendor"
|
|
label="Vendor"
|
|
required={vendorRequired}
|
|
description="Select either a vendor or an employee."
|
|
/>
|
|
<RhfAsyncSelectField
|
|
name="employee"
|
|
label="Employee"
|
|
placeholder="Select employee"
|
|
required={employeeRequired}
|
|
description="Select either a vendor or an 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={paymentForOptions}
|
|
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"
|
|
required
|
|
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>
|
|
)
|
|
}
|