324 lines
12 KiB
TypeScript
324 lines
12 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,
|
|
RhfTextareaField,
|
|
RhfSelectField,
|
|
RhfAsyncSelectField,
|
|
RhfCheckboxField,
|
|
} from "@/shared/components/form"
|
|
import { UnitTypeInlineForm } from "@/modules/services/inline-forms/unit-type-inline-form"
|
|
import { DepartmentInlineForm } from "@/modules/services/inline-forms/department-inline-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 { expenseItemFormSchema, type ExpenseItemFormValues } from "./expense-item.schema"
|
|
import {
|
|
EXPENSE_ITEM_ROUTES,
|
|
INVENTORY_CATEGORY_ROUTES,
|
|
INVENTORY_ROUTES,
|
|
DEPARTMENT_ROUTES,
|
|
VENDOR_ROUTES,
|
|
} from "@garage/api"
|
|
import { InventoryCategoryCrudDialog } from "./inventory-category-crud-dialog"
|
|
|
|
// ── Constants ──
|
|
|
|
const ITEM_TYPE_OPTIONS = [
|
|
{ value: "Expense", label: "Expense" },
|
|
]
|
|
|
|
const mapLookupOption = (item: any) => ({
|
|
value: String(item.id),
|
|
label: item.title ?? item.name ?? String(item.id),
|
|
})
|
|
|
|
const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
|
|
|
|
// ── Props ──
|
|
|
|
export type ExpenseItemFormProps = {
|
|
resourceId?: string | null
|
|
initialData?: unknown
|
|
onSuccess?: () => void
|
|
}
|
|
|
|
// ── Default values ──
|
|
|
|
const DEFAULT_VALUES: ExpenseItemFormValues = {
|
|
item_type: "Expense",
|
|
item_name: "",
|
|
sku: "",
|
|
item_code: "",
|
|
description: "",
|
|
category: null,
|
|
unit_type: null,
|
|
department: null,
|
|
purchase_information: true,
|
|
purchase_price: undefined,
|
|
purchase_chart_of_account: "",
|
|
purchase_preferred_vendor: null,
|
|
sales_information: false,
|
|
selling_price: undefined,
|
|
sales_chart_of_account: "",
|
|
is_active: true,
|
|
}
|
|
|
|
// ── Mapping helpers ──
|
|
|
|
function mapToFormValues(data: unknown): ExpenseItemFormValues {
|
|
const d = (data as any)?.data ?? data ?? {}
|
|
|
|
return {
|
|
item_type: d.item_type || "Expense",
|
|
item_name: d.item_name || "",
|
|
sku: d.sku || "",
|
|
item_code: d.item_code || "",
|
|
description: d.description || "",
|
|
category: toRelation(d.category_id, d.category_title ?? d.category_name),
|
|
unit_type: toRelation(d.unit_type_id, d.unit_type_title ?? d.unit_type_name),
|
|
department: toRelation(d.department_id, d.department_name ?? d.department_title),
|
|
purchase_information: d.purchase_information ?? true,
|
|
purchase_price: d.purchase_price ?? undefined,
|
|
purchase_chart_of_account: d.purchase_chart_of_account || "",
|
|
purchase_preferred_vendor: toRelation(
|
|
d.purchase_preferred_vendor_id,
|
|
d.purchase_preferred_vendor_name,
|
|
),
|
|
sales_information: d.sales_information ?? false,
|
|
selling_price: d.selling_price ?? undefined,
|
|
sales_chart_of_account: d.sales_chart_of_account || "",
|
|
is_active: d.is_active ?? true,
|
|
}
|
|
}
|
|
|
|
function mapFormToPayload(values: ExpenseItemFormValues) {
|
|
return {
|
|
item_type: values.item_type,
|
|
item_name: values.item_name,
|
|
sku: values.sku || undefined,
|
|
item_code: values.item_code || undefined,
|
|
description: values.description || undefined,
|
|
category_id: toId(values.category),
|
|
unit_type_id: toId(values.unit_type),
|
|
department_id: toId(values.department),
|
|
purchase_information: values.purchase_information,
|
|
purchase_price: values.purchase_price,
|
|
purchase_chart_of_account: values.purchase_chart_of_account || undefined,
|
|
purchase_preferred_vendor_id: toId(values.purchase_preferred_vendor),
|
|
sales_information: values.sales_information,
|
|
selling_price: values.selling_price,
|
|
sales_chart_of_account: values.sales_chart_of_account || undefined,
|
|
is_active: values.is_active,
|
|
}
|
|
}
|
|
|
|
// ── Component ──
|
|
|
|
export function ExpenseItemForm({ resourceId, initialData, onSuccess }: ExpenseItemFormProps) {
|
|
const api = useAuthApi()
|
|
|
|
const { form, isEditing } = useResourceForm<ExpenseItemFormValues, any>({
|
|
schema: expenseItemFormSchema,
|
|
defaultValues: DEFAULT_VALUES,
|
|
resourceId,
|
|
initialData,
|
|
initialize: (id) => api.expenseItems.show(id),
|
|
queryKey: [EXPENSE_ITEM_ROUTES.BY_ID, resourceId],
|
|
mapToFormValues,
|
|
})
|
|
|
|
const { mutate, error, isPending } = useFormMutation(form, {
|
|
mutationFn: (values: ExpenseItemFormValues) => {
|
|
const promise = isEditing && resourceId
|
|
? api.expenseItems.update(resourceId, mapFormToPayload(values))
|
|
: api.expenseItems.create(mapFormToPayload(values))
|
|
toast.promise(promise, {
|
|
loading: isEditing ? "Updating expense item..." : "Creating expense item...",
|
|
success: isEditing ? "Expense item updated successfully" : "Expense item created successfully",
|
|
error: isEditing ? "Failed to update expense item" : "Failed to create expense item",
|
|
})
|
|
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 expense item" : "Failed to create expense item"}
|
|
</AlertTitle>
|
|
{error.message}
|
|
</Alert>
|
|
)}
|
|
|
|
<FieldGroup>
|
|
{/* Basic Info */}
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfSelectField
|
|
name="item_type"
|
|
label="Item Type"
|
|
options={ITEM_TYPE_OPTIONS}
|
|
required
|
|
/>
|
|
<RhfTextField
|
|
name="item_name"
|
|
label="Item Name"
|
|
placeholder="e.g. Office Supplies"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfTextField
|
|
name="sku"
|
|
label="SKU"
|
|
placeholder="e.g. EXP-001"
|
|
/>
|
|
<RhfTextField
|
|
name="item_code"
|
|
label="Item Code"
|
|
placeholder="e.g. EXP-001"
|
|
/>
|
|
</div>
|
|
|
|
<RhfTextareaField
|
|
name="description"
|
|
label="Description"
|
|
placeholder="Optional description"
|
|
rows={3}
|
|
/>
|
|
|
|
{/* Classification */}
|
|
<div>
|
|
<div className="mb-1 flex items-center justify-between">
|
|
<span className="text-sm font-medium">Category</span>
|
|
<InventoryCategoryCrudDialog />
|
|
</div>
|
|
<RhfAsyncSelectField
|
|
name="category"
|
|
label=""
|
|
placeholder="Select category"
|
|
queryKey={[INVENTORY_CATEGORY_ROUTES.INDEX]}
|
|
listFn={() => api.inventoryCategories.list()}
|
|
mapOption={mapLookupOption}
|
|
{...STORE_OBJECT}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfAsyncSelectField
|
|
name="unit_type"
|
|
label="Unit Type"
|
|
placeholder="Select unit type"
|
|
queryKey={[INVENTORY_ROUTES.UNIT_TYPES]}
|
|
listFn={() => api.inventory.listUnitTypes()}
|
|
mapOption={mapLookupOption}
|
|
createForm={(props) => <UnitTypeInlineForm {...props} />}
|
|
createLabel="Unit Type"
|
|
{...STORE_OBJECT}
|
|
/>
|
|
<RhfAsyncSelectField
|
|
name="department"
|
|
label="Department"
|
|
placeholder="Select department"
|
|
queryKey={[DEPARTMENT_ROUTES.INDEX]}
|
|
listFn={() => api.departments.list()}
|
|
mapOption={(item: any) => ({ value: String(item.id), label: item.name ?? String(item.id) })}
|
|
createForm={(props) => <DepartmentInlineForm {...props} />}
|
|
createLabel="Department"
|
|
{...STORE_OBJECT}
|
|
/>
|
|
</div>
|
|
|
|
{/* Purchase Information */}
|
|
{/* <RhfCheckboxField
|
|
name="purchase_information"
|
|
label="Purchase Information"
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfTextField
|
|
name="purchase_price"
|
|
label="Purchase Price"
|
|
placeholder="0.00"
|
|
type="number"
|
|
/>
|
|
<RhfTextField
|
|
name="purchase_chart_of_account"
|
|
label="Purchase Chart of Account"
|
|
placeholder="e.g. Expenses"
|
|
/>
|
|
</div>
|
|
|
|
<RhfAsyncSelectField
|
|
name="purchase_preferred_vendor"
|
|
label="Preferred Vendor"
|
|
placeholder="Select vendor"
|
|
queryKey={[VENDOR_ROUTES.INDEX]}
|
|
listFn={() => api.vendors.list()}
|
|
mapOption={(item: any) => ({ value: String(item.id), label: item.name ?? String(item.id) })}
|
|
{...STORE_OBJECT}
|
|
/> */}
|
|
|
|
{/* Sales Information */}
|
|
{/* <RhfCheckboxField
|
|
name="sales_information"
|
|
label="Sales Information"
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfTextField
|
|
name="selling_price"
|
|
label="Selling Price"
|
|
placeholder="0.00"
|
|
type="number"
|
|
/>
|
|
<RhfTextField
|
|
name="sales_chart_of_account"
|
|
label="Sales Chart of Account"
|
|
placeholder="e.g. Revenue"
|
|
/>
|
|
</div> */}
|
|
|
|
{/* Status */}
|
|
<RhfCheckboxField
|
|
name="is_active"
|
|
label="Active"
|
|
/>
|
|
</FieldGroup>
|
|
|
|
<div className="mt-6 flex justify-end">
|
|
<Button type="submit" disabled={isPending}>
|
|
{isEditing ? (
|
|
<>
|
|
<Save className="me-2 h-4 w-4" />
|
|
{isPending ? "Saving..." : "Save Changes"}
|
|
</>
|
|
) : (
|
|
<>
|
|
<Plus className="me-2 h-4 w-4" />
|
|
{isPending ? "Creating..." : "Create Expense Item"}
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</Rhform>
|
|
)
|
|
}
|