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:
2026-05-18 12:08:42 +04:00
parent 54d11f01b4
commit 4bfd8c84a9
111 changed files with 5002 additions and 1047 deletions
@@ -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"),