feat: add template checkpoint edit dialog and vendor management components
- Implemented TemplateCheckpointEditDialog for creating and editing inspection checkpoints. - Added VendorActions component for managing vendor actions including edit, activate/deactivate, and delete. - Created VendorContext for managing vendor state across components. - Developed VendorGeneralInfo component to display detailed vendor information. - Introduced AedSymbol and Money components for consistent currency representation. - Added PromptDialog for user input prompts throughout the application. - Implemented RelationLink component for unified related-data display in CRUD tables. - Created InspectionTemplatesClient for API interactions related to inspection templates.
This commit is contained in:
@@ -1,9 +1,12 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { AlertTriangle, Plus, Save, Trash2 } from "lucide-react"
|
||||
import { useFieldArray } from "react-hook-form"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Input } from "@/shared/components/ui/input"
|
||||
import { Label } from "@/shared/components/ui/label"
|
||||
import { Alert, AlertTitle } from "@/shared/components/ui/alert"
|
||||
import { FieldGroup } from "@/shared/components/ui/field"
|
||||
import {
|
||||
@@ -11,6 +14,9 @@ import {
|
||||
RhfTextField,
|
||||
RhfTextareaField,
|
||||
RhfAsyncSelectField,
|
||||
RhfAutoGenerateField,
|
||||
RhfSelectField,
|
||||
type InlineCreateFormProps,
|
||||
} from "@/shared/components/form"
|
||||
import { toast } from "sonner"
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
@@ -34,32 +40,57 @@ export type InventoryAdjustmentFormProps = {
|
||||
|
||||
// ── Default values ──
|
||||
|
||||
const OPERATION_OPTIONS = [
|
||||
{ value: "add", label: "Increase" },
|
||||
{ value: "subtract", label: "Decrease" },
|
||||
]
|
||||
|
||||
const DEFAULT_VALUES: InventoryAdjustmentFormValues = {
|
||||
reference_number: "",
|
||||
date: "",
|
||||
chart_of_account: "",
|
||||
chart_of_account: undefined,
|
||||
reason: null,
|
||||
notes: "",
|
||||
parts: [{ part: null, quantity: 1, rate: 0 }],
|
||||
parts: [{ part: null, quantity: 1, operation: "add", rate: 0 }],
|
||||
}
|
||||
|
||||
// ── Mapping helpers ──
|
||||
|
||||
function mapToFormValues(data: unknown): InventoryAdjustmentFormValues {
|
||||
const d = (data as any)?.data ?? data ?? {}
|
||||
// Laravel serializes the `inventoryAdjustmentParts` relation as
|
||||
// `inventory_adjustment_parts` in JSON; fall back through the other
|
||||
// shapes for resilience.
|
||||
const rawParts: any[] =
|
||||
(Array.isArray(d.inventory_adjustment_parts) && d.inventory_adjustment_parts)
|
||||
|| (Array.isArray(d.inventoryAdjustmentParts) && d.inventoryAdjustmentParts)
|
||||
|| (Array.isArray(d.parts) && d.parts)
|
||||
|| []
|
||||
|
||||
// Backend casts `date` to Carbon → serializes as an ISO string
|
||||
// ("2026-05-18T00:00:00.000000Z"). HTML <input type="date"> only accepts
|
||||
// "YYYY-MM-DD", so slice the first 10 chars; pass through plain dates.
|
||||
const rawDate = d.date ?? ""
|
||||
const date = typeof rawDate === "string" && rawDate.length >= 10
|
||||
? rawDate.slice(0, 10)
|
||||
: ""
|
||||
|
||||
return {
|
||||
reference_number: d.reference_number || "",
|
||||
date: d.date || "",
|
||||
chart_of_account: d.chart_of_account || "",
|
||||
reason: toRelation(d.reason_id, d.reason_name),
|
||||
date,
|
||||
chart_of_account: d.chart_of_account != null && d.chart_of_account !== ""
|
||||
? Number(d.chart_of_account)
|
||||
: undefined,
|
||||
reason: toRelation(d.reason_id, d.reason?.title ?? d.reason?.name ?? d.reason_name),
|
||||
notes: d.notes || "",
|
||||
parts: Array.isArray(d.parts) && d.parts.length > 0
|
||||
? d.parts.map((p: any) => ({
|
||||
part: toRelation(p.part_id, p.part_name),
|
||||
parts: rawParts.length > 0
|
||||
? rawParts.map((p: any) => ({
|
||||
part: toRelation(p.part_id, p.part?.title ?? p.part?.name ?? p.part_name),
|
||||
quantity: p.quantity ?? 1,
|
||||
operation: (p.operation === "subtract" ? "subtract" : "add") as "add" | "subtract",
|
||||
rate: p.rate ?? 0,
|
||||
}))
|
||||
: [{ part: null, quantity: 1, rate: 0 }],
|
||||
: [{ part: null, quantity: 1, operation: "add", rate: 0 }],
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,12 +98,13 @@ function mapFormToPayload(values: InventoryAdjustmentFormValues) {
|
||||
return {
|
||||
reference_number: values.reference_number || undefined,
|
||||
date: values.date || undefined,
|
||||
chart_of_account: values.chart_of_account || undefined,
|
||||
chart_of_account: values.chart_of_account ?? undefined,
|
||||
reason_id: toId(values.reason) ? Number(toId(values.reason)) : undefined,
|
||||
notes: values.notes || undefined,
|
||||
parts: values.parts.map((p) => ({
|
||||
part_id: toId(p.part) ? Number(toId(p.part)) : undefined,
|
||||
quantity: p.quantity,
|
||||
operation: p.operation,
|
||||
rate: p.rate,
|
||||
})),
|
||||
}
|
||||
@@ -81,6 +113,52 @@ function mapFormToPayload(values: InventoryAdjustmentFormValues) {
|
||||
const mapLookupOption = (item: any) => ({ value: String(item.id), label: item.name ?? item.title })
|
||||
const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
|
||||
|
||||
function ReasonInlineCreateForm({ onSuccess }: InlineCreateFormProps) {
|
||||
const api = useAuthApi()
|
||||
const [title, setTitle] = useState("")
|
||||
const [isSaving, setIsSaving] = useState(false)
|
||||
|
||||
const handleSave = async () => {
|
||||
const trimmed = title.trim()
|
||||
if (!trimmed) {
|
||||
toast.error("Reason title is required.")
|
||||
return
|
||||
}
|
||||
setIsSaving(true)
|
||||
try {
|
||||
const response = (await api.reasons.create({ title: trimmed } as never)) as any
|
||||
const created = response?.data ?? response
|
||||
toast.success("Reason added.")
|
||||
onSuccess(created?.id ? { value: String(created.id), label: created.title ?? trimmed } : undefined)
|
||||
} catch {
|
||||
toast.error("Failed to add reason.")
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="reason-title">Title</Label>
|
||||
<Input
|
||||
id="reason-title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="e.g. Stock count correction"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<Button type="button" onClick={handleSave} disabled={isSaving}>
|
||||
<Plus className="size-4" />
|
||||
{isSaving ? "Adding..." : "Add Reason"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Component ──
|
||||
|
||||
export function InventoryAdjustmentForm({ resourceId, initialData, onSuccess }: InventoryAdjustmentFormProps) {
|
||||
@@ -127,20 +205,27 @@ export function InventoryAdjustmentForm({ resourceId, initialData, onSuccess }:
|
||||
|
||||
<FieldGroup>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfTextField
|
||||
<RhfAutoGenerateField
|
||||
name="reference_number"
|
||||
label="Reference Number"
|
||||
placeholder="ADJ-001"
|
||||
placeholder="ADJ-0001"
|
||||
table="inventory_adjustments"
|
||||
autoFetch={!isEditing}
|
||||
/>
|
||||
<RhfTextField
|
||||
name="date"
|
||||
label="Date"
|
||||
type="date"
|
||||
/>
|
||||
{/* TODO: replace with chart-of-accounts async select once the
|
||||
module ships. Locked as integer + disabled for now. */}
|
||||
<RhfTextField
|
||||
name="chart_of_account"
|
||||
label="Chart of Account"
|
||||
placeholder="Account name"
|
||||
type="number"
|
||||
placeholder="Account number"
|
||||
description="Pending chart-of-accounts module — disabled."
|
||||
disabled
|
||||
/>
|
||||
<RhfAsyncSelectField
|
||||
name="reason"
|
||||
@@ -149,6 +234,8 @@ export function InventoryAdjustmentForm({ resourceId, initialData, onSuccess }:
|
||||
queryKey={[REASON_ROUTES.INDEX]}
|
||||
listFn={() => api.reasons.list()}
|
||||
mapOption={mapLookupOption}
|
||||
createLabel="Reason"
|
||||
createForm={(props) => <ReasonInlineCreateForm {...props} />}
|
||||
{...STORE_OBJECT}
|
||||
/>
|
||||
</div>
|
||||
@@ -168,7 +255,7 @@ export function InventoryAdjustmentForm({ resourceId, initialData, onSuccess }:
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => append({ part: null, quantity: 1, rate: 0 })}
|
||||
onClick={() => append({ part: null, quantity: 1, operation: "add", rate: 0 })}
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
Add Part
|
||||
@@ -180,15 +267,25 @@ export function InventoryAdjustmentForm({ resourceId, initialData, onSuccess }:
|
||||
)}
|
||||
|
||||
{fields.map((field, index) => (
|
||||
<div key={field.id} className="grid grid-cols-[1fr_auto_auto_auto] items-end gap-2 rounded-lg border p-3">
|
||||
<RhfAsyncSelectField
|
||||
name={`parts.${index}.part`}
|
||||
label="Part"
|
||||
placeholder="Select part..."
|
||||
queryKey={[PARTS_ROUTES.INDEX]}
|
||||
listFn={() => api.parts.list()}
|
||||
mapOption={mapLookupOption}
|
||||
{...STORE_OBJECT}
|
||||
<div
|
||||
key={field.id}
|
||||
className="grid items-end gap-2 rounded-lg border p-3 grid-cols-[minmax(0,1fr)_9rem_6rem_6rem_auto]"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<RhfAsyncSelectField
|
||||
name={`parts.${index}.part`}
|
||||
label="Part"
|
||||
placeholder="Select part..."
|
||||
queryKey={[PARTS_ROUTES.INDEX]}
|
||||
listFn={() => api.parts.list()}
|
||||
mapOption={mapLookupOption}
|
||||
{...STORE_OBJECT}
|
||||
/>
|
||||
</div>
|
||||
<RhfSelectField
|
||||
name={`parts.${index}.operation`}
|
||||
label="Operation"
|
||||
options={OPERATION_OPTIONS}
|
||||
/>
|
||||
<RhfTextField
|
||||
name={`parts.${index}.quantity`}
|
||||
|
||||
@@ -6,14 +6,21 @@ export const relationFieldSchema = z
|
||||
|
||||
const partLineSchema = z.object({
|
||||
part: relationFieldSchema,
|
||||
quantity: z.coerce.number().min(1, "Quantity must be at least 1"),
|
||||
quantity: z.coerce.number().int().min(1, "Quantity must be at least 1"),
|
||||
operation: z.enum(["add", "subtract"]).default("add"),
|
||||
rate: z.coerce.number().min(0, "Rate must be 0 or more"),
|
||||
})
|
||||
|
||||
export const inventoryAdjustmentFormSchema = z.object({
|
||||
reference_number: z.string().min(1, "Reference number is required").max(255, "Reference number cannot exceed 255 characters"),
|
||||
date: z.string().min(1, "Date is required"),
|
||||
chart_of_account: z.string().optional(),
|
||||
// TODO: pending chart-of-accounts module. Until then this is a free integer
|
||||
// that the backend stores as-is; replace with an async select bound to the
|
||||
// chart-of-accounts API once the module ships.
|
||||
chart_of_account: z.preprocess(
|
||||
(v) => (v === "" || v == null ? undefined : v),
|
||||
z.coerce.number().int("Chart of account must be a whole number").optional(),
|
||||
),
|
||||
reason: relationFieldSchema,
|
||||
notes: z.string().optional(),
|
||||
parts: z.array(partLineSchema).min(1, "At least one part is required"),
|
||||
|
||||
Reference in New Issue
Block a user