fix estimate table and expense items

.claude/settings.local.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(pnpm --version)",
+      "Bash(grep -E \"\\\\.\\(tsx?|jsx?\\)$\")",
+      "Bash(grep -E \"\\\\.\\(tsx?\\)$\")"
+    ]
+  }
+}

.env.prod

@@ -0,0 +1,2 @@
+NIXPACKS_NODE_VERSION=22
+NEXT_PUBLIC_API_URL=http://reparee.test

apps/dashboard/app/(authenticated)/items/expense-item/page.tsx

@@ -16,11 +16,14 @@ export default function ExpenseItemPage() {
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
                     <FormDialog title="Expense Item">
-                        {(resourceId) => (
+                        {(resourceId, { close }) => (
                             <ExpenseItemForm
                                 resourceId={resourceId}
                                 initialData={selectedItem}
-                                onSuccess={invalidateQuery}
+                                onSuccess={() => {
+                                    invalidateQuery()
+                                    close()
+                                }}
                             />
                         )}
                     </FormDialog>

apps/dashboard/app/(authenticated)/sales/estimates/page.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useRouter } from 'next/navigation'
 import { ResourcePage } from '@/shared/data-view/resource-page'
 import { ColumnHeader } from '@/shared/data-view/table-view'
 import FormDialog from '@/shared/components/form-dialog'
@@ -14,11 +15,13 @@ import { getVehicleLabel } from '@/modules/vehicles/utils/getVehicleLabel'
 import { getFullName } from '@/shared/utils/getFullName'
 
 export default function EstimatesPage() {
+    const router = useRouter()
     return (
         <ResourcePage<EstimatesClient>
             pageTitle="Estimates"
             routeKey={ESTIMATE_ROUTES.INDEX}
             getClient={(api) => api.estimates}
+            onRowClick={(row) => router.push(`/sales/estimates/${(row as any).id}`)}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
                     <FormDialog title="Estimate">
@@ -39,7 +42,7 @@ export default function EstimatesPage() {
                         const item = row.original  
                         return (
                             <div className="flex items-center gap-2">
-                                <Link href={`/sales/estimates/${item.id}`} className="flex items-center gap-2 hover:underline">
+                                <Link href={`/sales/estimates/${item.id}`} className="flex items-center gap-2 hover:underline" onClick={(e) => e.stopPropagation()}>
                                     <FileTextIcon className="text-muted-foreground h-4 w-4" />
                                     <span>{item.title}</span>
                                 </Link>
@@ -56,11 +59,13 @@ export default function EstimatesPage() {
                     header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
                     cell: ({ row }) => {
                         const item:any = row.original
+                        if (!item.customer?.id) return "—"
                         return (
-                            <div className="flex items-center gap-2">
+                            <Button variant="outline" asChild size="sm" onClick={(e) => e.stopPropagation()}>
-                                <UserIcon className="h-4 w-4 text-muted-foreground" />
+                                <Link href={`/sales/customers/${item.customer.id}`}>
-                                <span>{getFullName(item.customer) || "—"}</span>
+                                    <UserIcon /> {getFullName(item.customer) || "—"}
-                            </div>
+                                </Link>
+                            </Button>
                         )
                     }
                 },
@@ -69,7 +74,7 @@ export default function EstimatesPage() {
                     header: ({ column }) => <ColumnHeader column={column} title="Vehicle" />,
                     cell: ({ row }) => {
                         const item :any= row.original
-                        return <Button variant="outline" asChild size="sm">
+                        return <Button variant="outline" asChild size="sm" onClick={(e) => e.stopPropagation()}>
                             <Link href={`/sales/vehicles/${item.vehicle?.id}`}>
                             <Car/> {getVehicleLabel(item.vehicle as any) || "—"}
                             </Link>

apps/dashboard/app/(authenticated)/sales/invoice/page.tsx

@@ -1,11 +1,14 @@
 "use client"
 
+import Link from "next/link"
+import { UserIcon } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
 import FormDialog from "@/shared/components/form-dialog"
 import { InvoiceForm } from "@/modules/invoices/invoice-form"
 import { Badge } from "@/shared/components/ui/badge"
+import { Button } from "@/shared/components/ui/button"
 import { formatCurrency, formatDate, formatEnum } from "@/shared/utils/formatters"
 import { INVOICE_ROUTES } from "@garage/api"
 import type { InvoicesClient } from "@garage/api"
@@ -23,6 +26,7 @@ type InvoiceItem = {
     total?: number | string
     balance_due?: number | string
     customer?: {
+        id?: number | string
         first_name?: string
         last_name?: string
         company_name?: string
@@ -134,13 +138,20 @@ export default function InvoicesPage() {
                     cell: ({ row }) => {
                         const item = row.original as unknown as InvoiceItem
                         const customerLabel = getCustomerLabel(item)
+                        const subline = item.customer?.phone || item.customer?.company_name || "—"
 
                         return (
                             <div className="min-w-[190px]">
-                                <p className="font-medium leading-none">{customerLabel}</p>
+                                {item.customer?.id ? (
-                                <p className="mt-1 text-xs text-muted-foreground">
+                                    <Button variant="outline" asChild size="sm" onClick={(e) => e.stopPropagation()}>
-                                    {item.customer?.phone || item.customer?.company_name || "—"}
+                                        <Link href={`/sales/customers/${item.customer.id}`}>
-                                </p>
+                                            <UserIcon /> {customerLabel}
+                                        </Link>
+                                    </Button>
+                                ) : (
+                                    <p className="font-medium leading-none">{customerLabel}</p>
+                                )}
+                                <p className="mt-1 text-xs text-muted-foreground">{subline}</p>
                             </div>
                         )
                     },

apps/dashboard/modules/estimates/estimate-form.tsx

@@ -140,12 +140,13 @@ const DISCOUNT_OPTIONS = DiscountType.map((value) => ({
 export function EstimateForm({ resourceId, initialData, onSuccess }: EstimateFormProps) {
     const api = useAuthApi()
 
-    const { form, isEditing } = useResourceForm<EstimateFormValues, any>({
+    const { form, isEditing, invalidate } = useResourceForm<EstimateFormValues, any>({
         schema: estimateFormSchema,
         defaultValues: DEFAULT_VALUES,
         resourceId,
         initialData,
         queryKey: [ESTIMATE_ROUTES.BY_ID, resourceId],
+        initialize: (id) => api.estimates.show(id),
         mapToFormValues,
     })
 
@@ -163,7 +164,7 @@ export function EstimateForm({ resourceId, initialData, onSuccess }: EstimateFor
             return promise
         },
         onSuccess: () => {
-            form.reset()
+            if (!isEditing) form.reset()
             onSuccess?.()
         },
     })

apps/dashboard/modules/expense-items/expense-item-form.tsx

@@ -27,9 +27,9 @@ import {
     INVENTORY_CATEGORY_ROUTES,
     INVENTORY_ROUTES,
     DEPARTMENT_ROUTES,
-    VENDOR_ROUTES,
 } from "@garage/api"
 import { InventoryCategoryCrudDialog } from "./inventory-category-crud-dialog"
+import { RhfVendorSelectField } from "@/modules/vendors/rhf-vendor-select-field"
 
 // ── Constants ──
 
@@ -84,15 +84,26 @@ function mapToFormValues(data: unknown): ExpenseItemFormValues {
         sku: d.sku || "",
         item_code: d.item_code || "",
         description: d.description || "",
-        category: toRelation(d.category_id, d.category_title ?? d.category_name),
+        category: toRelation(
-        unit_type: toRelation(d.unit_type_id, d.unit_type_title ?? d.unit_type_name),
+            d.category_id ?? d.category?.id,
-        department: toRelation(d.department_id, d.department_name ?? d.department_title),
+            d.category_title ?? d.category_name ?? d.category?.title ?? d.category?.name,
+        ),
+        unit_type: toRelation(
+            d.unit_type_id ?? d.unit_type?.id,
+            d.unit_type_title ?? d.unit_type_name ?? d.unit_type?.title ?? d.unit_type?.name,
+        ),
+        department: toRelation(
+            d.department_id ?? d.department?.id,
+            d.department_name ?? d.department_title ?? 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_id ?? d.purchase_preferred_vendor?.id,
-            d.purchase_preferred_vendor_name,
+            d.purchase_preferred_vendor_name
+                ?? d.purchase_preferred_vendor?.company_name
+                ?? [d.purchase_preferred_vendor?.first_name, d.purchase_preferred_vendor?.last_name].filter(Boolean).join(" "),
         ),
         sales_information: d.sales_information ?? false,
         selling_price: d.selling_price ?? undefined,
@@ -127,7 +138,7 @@ function mapFormToPayload(values: ExpenseItemFormValues) {
 export function ExpenseItemForm({ resourceId, initialData, onSuccess }: ExpenseItemFormProps) {
     const api = useAuthApi()
 
-    const { form, isEditing } = useResourceForm<ExpenseItemFormValues, any>({
+    const { form, isEditing, invalidate } = useResourceForm<ExpenseItemFormValues, any>({
         schema: expenseItemFormSchema,
         defaultValues: DEFAULT_VALUES,
         resourceId,
@@ -150,7 +161,7 @@ export function ExpenseItemForm({ resourceId, initialData, onSuccess }: ExpenseI
             return promise
         },
         onSuccess: () => {
-            form.reset()
+            if (!isEditing) form.reset()
             onSuccess?.()
         },
     })
@@ -247,7 +258,7 @@ export function ExpenseItemForm({ resourceId, initialData, onSuccess }: ExpenseI
                 </div>
 
                 {/* Purchase Information */}
-                {/* <RhfCheckboxField
+                <RhfCheckboxField
                     name="purchase_information"
                     label="Purchase Information"
                 />
@@ -259,22 +270,21 @@ export function ExpenseItemForm({ resourceId, initialData, onSuccess }: ExpenseI
                         placeholder="0.00"
                         type="number"
                     />
+                    {/* TODO(phase-2): wire Purchase Chart of Account to the chart-of-accounts module (currently disabled, marked "Coming soon"). */}
                     <RhfTextField
                         name="purchase_chart_of_account"
                         label="Purchase Chart of Account"
                         placeholder="e.g. Expenses"
+                        description="Coming soon"
+                        disabled
                     />
                 </div>
 
-                <RhfAsyncSelectField
+                <RhfVendorSelectField
                     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

apps/dashboard/modules/invoices/invoice-form.tsx

@@ -251,12 +251,13 @@ function TransactionDiscountField() {
 export function InvoiceForm({ resourceId, initialData, onSuccess }: InvoiceFormProps) {
     const api = useAuthApi()
 
-    const { form, isEditing } = useResourceForm<InvoiceFormValues, any>({
+    const { form, isEditing, invalidate } = useResourceForm<InvoiceFormValues, any>({
         schema: invoiceFormSchema,
         defaultValues: DEFAULT_VALUES,
         resourceId,
         initialData,
         queryKey: [INVOICE_ROUTES.BY_ID, resourceId],
+        initialize: (id) => api.invoices.show(id),
         mapToFormValues,
     })
 
@@ -277,7 +278,7 @@ export function InvoiceForm({ resourceId, initialData, onSuccess }: InvoiceFormP
             return promise
         },
         onSuccess: () => {
-            form.reset()
+            if (!isEditing) form.reset()
             onSuccess?.()
         },
     })

apps/dashboard/modules/job-cards/job-card-form.tsx

@@ -231,12 +231,13 @@ export function JobCardForm({ resourceId, initialData, onSuccess }: JobCardFormP
     const api = useAuthApi()
     const [isCheckInDialogOpen, setIsCheckInDialogOpen] = useState(false)
 
-    const { form, isEditing } = useResourceForm<JobCardFormValues, any>({
+    const { form, isEditing, invalidate } = useResourceForm<JobCardFormValues, any>({
         schema: jobCardFormSchema,
         defaultValues: DEFAULT_VALUES,
         resourceId,
         initialData,
         queryKey: [JOB_CARD_ROUTES.BY_ID, resourceId],
+        initialize: (id) => api.jobCards.show(id),
         mapToFormValues,
     })
 
@@ -260,7 +261,7 @@ export function JobCardForm({ resourceId, initialData, onSuccess }: JobCardFormP
         },
         onSuccess: () => {
             setIsCheckInDialogOpen(false)
-            form.reset()
+            if (!isEditing) form.reset()
             onSuccess?.()
         },
     })

apps/dashboard/shared/data-view/resource-page/use-resource-page.ts

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { useMutation } from "@tanstack/react-query"
 import { toast } from "sonner"
 import { confirm } from "@/shared/components/confirm-dialog"
@@ -42,6 +42,10 @@ export function useResourcePage<TClient extends ResourcePageClient>({
     const { open: openDialog, close: closeDialog, isOpen, resourceId } = useFormDialog(paramKey)
     const [selectedItem, setSelectedItem] = useState<TItem | null>(null)
 
+    useEffect(() => {
+        if (!resourceId) setSelectedItem(null)
+    }, [resourceId])
+
     const tableQuery = useDataTableQuery({
         queryKey: [routeKey],
         client,

apps/dashboard/shared/hooks/use-resource-form.ts

@@ -3,7 +3,7 @@
 import { useEffect } from "react"
 import { useForm, type DefaultValues, type FieldValues, type UseFormReturn } from "react-hook-form"
 import { zodResolver } from "@hookform/resolvers/zod"
-import { useQuery, type QueryKey } from "@tanstack/react-query"
+import { useQuery, useQueryClient, type QueryKey } from "@tanstack/react-query"
 import type { ZodType } from "zod"
 
 type UseResourceFormOptions<TFormValues extends FieldValues, TApiData = unknown> = {
@@ -20,6 +20,7 @@ type UseResourceFormReturn<TFormValues extends FieldValues> = {
     form: UseFormReturn<TFormValues>
     isEditing: boolean
     isInitializing: boolean
+    invalidate: () => void
 }
 
 export function useResourceForm<TFormValues extends FieldValues, TApiData = unknown>({
@@ -32,11 +33,15 @@ export function useResourceForm<TFormValues extends FieldValues, TApiData = unkn
     queryKey,
 }: UseResourceFormOptions<TFormValues, TApiData>): UseResourceFormReturn<TFormValues> {
     const isEditing = !!resourceId
+    const queryClient = useQueryClient()
+    const resolvedQueryKey = queryKey ?? ["resource", resourceId]
 
     const { data: queriedData, isLoading: isQueryLoading } = useQuery<TApiData>({
-        queryKey: queryKey ?? ["resource", resourceId],
+        queryKey: resolvedQueryKey,
         queryFn: () => initialize!(resourceId!),
         enabled: isEditing && !!initialize,
+        staleTime: 0,
+        refetchOnMount: "always",
     })
 
     const resolvedData = queriedData ?? (isEditing ? initialData : undefined)
@@ -49,7 +54,7 @@ export function useResourceForm<TFormValues extends FieldValues, TApiData = unkn
     useEffect(() => {
         if (!isEditing) {
             if (initialData) {
-                form.reset({ ...defaultValues, ...initialData } as any)
+                form.reset({ ...defaultValues, ...mapToFormValues(initialData) } as any)
             } else {
                 form.reset(defaultValues)
             }
@@ -61,5 +66,9 @@ export function useResourceForm<TFormValues extends FieldValues, TApiData = unkn
         }
     }, [isEditing, resolvedData, initialData]) // eslint-disable-line react-hooks/exhaustive-deps
 
-    return { form, isEditing, isInitializing: isEditing && !!initialize && isQueryLoading }
+    const invalidate = () => {
+        queryClient.invalidateQueries({ queryKey: resolvedQueryKey })
+    }
+
+    return { form, isEditing, isInitializing: isEditing && !!initialize && isQueryLoading, invalidate }
 }