diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..0b58641
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,13 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(pnpm --version)",
+      "Bash(grep -E \"\\\\.\\(tsx?|jsx?\\)$\")",
+      "Bash(grep -E \"\\\\.\\(tsx?\\)$\")"
+    ]
+  },
+  "enabledMcpjsonServers": [
+    "code-review-graph"
+  ],
+  "enableAllProjectMcpServers": true
+}
diff --git a/.env.prod b/.env.prod
new file mode 100644
index 0000000..4d35848
--- /dev/null
+++ b/.env.prod
@@ -0,0 +1,2 @@
+NIXPACKS_NODE_VERSION=22
+NEXT_PUBLIC_API_URL=http://reparee.test
\ No newline at end of file
diff --git a/apps/dashboard/app/(authenticated)/calendar/appointment/list/page.tsx b/apps/dashboard/app/(authenticated)/calendar/appointment/list/page.tsx
index b8cae45..9600a69 100644
--- a/apps/dashboard/app/(authenticated)/calendar/appointment/list/page.tsx
+++ b/apps/dashboard/app/(authenticated)/calendar/appointment/list/page.tsx
@@ -5,11 +5,11 @@ import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
 import FormDialog from "@/shared/components/form-dialog"
 import { AppointmentForm } from "@/modules/appointments/appointment-form"
-import { APPOINTMENT_ROUTES } from "@garage/api"
+import { APPOINTMENT_ROUTES, AppointmentStatus } from "@garage/api"
 import type { AppointmentsClient } from "@garage/api"
-import { CalendarCheck2Icon, ClipboardListIcon, ClockIcon, ExternalLinkIcon } from "lucide-react"
+import { CalendarCheck2Icon, ClipboardListIcon, ClockIcon } from "lucide-react"
 import { Badge } from "@/shared/components/ui/badge"
-import { Button } from "@/shared/components/ui/button"
+import { RelationLink } from "@/shared/components/relation-link"
 
 const STATUS_COLORS: Record<string, string> = {
     requested: "bg-yellow-100 text-yellow-800",
@@ -26,6 +26,9 @@ export default function AppointmentsPage() {
         <ResourcePage<AppointmentsClient>
             pageTitle="Appointments"
             routeKey={APPOINTMENT_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search appointments..."
+            statusFilter={{ statuses: AppointmentStatus }}
             getClient={(api) => api.appointments}
             onRowClick={(row) => router.push(`/calendar/appointment/${(row as any).id}`)}
             headerProps={({ selectedItem, invalidateQuery }) => ({
@@ -86,22 +89,14 @@ export default function AppointmentsPage() {
                     id: "job_card",
                     header: ({ column }) => <ColumnHeader column={column} title="Job Card" />,
                     cell: ({ row }) => {
-                        const jobCardId = (row.original as any).job_card_id
-                        if (!jobCardId) return <span className="text-muted-foreground">—</span>
+                        const item = row.original as any
+                        const jobCardId = item.job_card_id ?? item.job_card?.id
                         return (
-                            <Button
-                                variant="outline"
-                                size="sm"
-                                className="h-7 gap-1.5"
-                                onClick={(e) => {
-                                    e.stopPropagation()
-                                    router.push(`/sales/job-cards/${jobCardId}`)
-                                }}
-                            >
-                                <ClipboardListIcon className="size-3" />
-                                #{jobCardId}
-                                <ExternalLinkIcon className="size-3" />
-                            </Button>
+                            <RelationLink
+                                href={jobCardId ? `/sales/job-cards/${jobCardId}` : null}
+                                icon={ClipboardListIcon}
+                                label={item.job_card?.title || (jobCardId ? `#${jobCardId}` : null)}
+                            />
                         )
                     },
                 },
diff --git a/apps/dashboard/app/(authenticated)/items/adjustment/page.tsx b/apps/dashboard/app/(authenticated)/items/adjustment/page.tsx
index 977677d..2370d8a 100644
--- a/apps/dashboard/app/(authenticated)/items/adjustment/page.tsx
+++ b/apps/dashboard/app/(authenticated)/items/adjustment/page.tsx
@@ -201,15 +201,20 @@ export default function InventoryAdjustmentsPage() {
             <ResourcePage<InventoryAdjustmentsClient>
                 pageTitle="Inventory Adjustments"
                 routeKey={INVENTORY_ADJUSTMENT_ROUTES.INDEX}
+                searchable
+                searchPlaceholder="Search adjustments..."
                 getClient={(api) => api.inventoryAdjustments}
                 headerProps={({ selectedItem, invalidateQuery }) => ({
                     actions: (
-                        <FormDialog title="Inventory Adjustment">
-                            {(resourceId) => (
+                        <FormDialog
+                            title="Inventory Adjustment"
+                            classNames={{ dialogContent: "lg:min-w-4xl" }}
+                        >
+                            {(resourceId, { close }) => (
                                 <InventoryAdjustmentForm
                                     resourceId={resourceId}
                                     initialData={selectedItem}
-                                    onSuccess={invalidateQuery}
+                                    onSuccess={() => { invalidateQuery(); close() }}
                                 />
                             )}
                         </FormDialog>
diff --git a/apps/dashboard/app/(authenticated)/items/expense-item/page.tsx b/apps/dashboard/app/(authenticated)/items/expense-item/page.tsx
index 9ee37bc..cd14df0 100644
--- a/apps/dashboard/app/(authenticated)/items/expense-item/page.tsx
+++ b/apps/dashboard/app/(authenticated)/items/expense-item/page.tsx
@@ -12,15 +12,20 @@ export default function ExpenseItemPage() {
         <ResourcePage<ExpenseItemsClient>
             pageTitle="Expense Items"
             routeKey={EXPENSE_ITEM_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search expense items..."
             getClient={(api) => api.expenseItems}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
                     <FormDialog title="Expense Item">
-                        {(resourceId) => (
+                        {(resourceId, { close }) => (
                             <ExpenseItemForm
                                 resourceId={resourceId}
                                 initialData={selectedItem}
-                                onSuccess={invalidateQuery}
+                                onSuccess={() => {
+                                    invalidateQuery()
+                                    close()
+                                }}
                             />
                         )}
                     </FormDialog>
diff --git a/apps/dashboard/app/(authenticated)/items/parts/page.tsx b/apps/dashboard/app/(authenticated)/items/parts/page.tsx
index d3806d0..656ebcf 100644
--- a/apps/dashboard/app/(authenticated)/items/parts/page.tsx
+++ b/apps/dashboard/app/(authenticated)/items/parts/page.tsx
@@ -17,6 +17,8 @@ export default function PartsPage() {
         <ResourcePage<PartsClient>
             pageTitle="Parts"
             routeKey={PARTS_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search parts..."
             getClient={(api) => api.parts}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
@@ -24,6 +26,7 @@ export default function PartsPage() {
                         <ImportDataButton
                             onImport={(file) => api.parts.importData(file)}
                             onSuccess={invalidateQuery}
+                            entityLabel="Parts"
                         />
                         <ExportDataButton
                             onExport={(filters) => api.parts.exportData(filters)}
diff --git a/apps/dashboard/app/(authenticated)/items/service-group/page.tsx b/apps/dashboard/app/(authenticated)/items/service-group/page.tsx
index 0a8d5db..9439682 100644
--- a/apps/dashboard/app/(authenticated)/items/service-group/page.tsx
+++ b/apps/dashboard/app/(authenticated)/items/service-group/page.tsx
@@ -13,6 +13,8 @@ export default function ServiceGroupPage() {
         <ResourcePage<ServiceGroupsClient>
             pageTitle="Service Groups"
             routeKey={SERVICE_GROUP_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search service groups..."
             getClient={(api) => api.serviceGroups}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
diff --git a/apps/dashboard/app/(authenticated)/items/services/page.tsx b/apps/dashboard/app/(authenticated)/items/services/page.tsx
index ecf4ebc..3bf5686 100644
--- a/apps/dashboard/app/(authenticated)/items/services/page.tsx
+++ b/apps/dashboard/app/(authenticated)/items/services/page.tsx
@@ -17,6 +17,8 @@ export default function ServicesPage() {
         <ResourcePage<ServicesClient>
             pageTitle="Services"
             routeKey={SERVICE_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search services..."
             getClient={(api) => api.services}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
@@ -24,6 +26,7 @@ export default function ServicesPage() {
                         <ImportDataButton
                             onImport={(file) => api.services.importData(file)}
                             onSuccess={invalidateQuery}
+                            entityLabel="Services"
                         />
                         <ExportDataButton
                             onExport={(filters) => api.services.exportData(filters)}
diff --git a/apps/dashboard/app/(authenticated)/productivity/employees/page.tsx b/apps/dashboard/app/(authenticated)/productivity/employees/page.tsx
index 22ad472..0e27117 100644
--- a/apps/dashboard/app/(authenticated)/productivity/employees/page.tsx
+++ b/apps/dashboard/app/(authenticated)/productivity/employees/page.tsx
@@ -14,6 +14,9 @@ export default function EmployeesPage() {
         <ResourcePage<EmployeesClient>
             pageTitle="Employees"
             routeKey={EMPLOYEE_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search employees..."
+            statusFilter={{ statuses: ["active", "inactive"] }}
             getClient={(api) => api.employees}
             onRowClick={(row) => router.push(`/productivity/employees/${(row as any).id}`)}
             headerProps={({ selectedItem, invalidateQuery }) => ({
diff --git a/apps/dashboard/app/(authenticated)/productivity/holidays/page.tsx b/apps/dashboard/app/(authenticated)/productivity/holidays/page.tsx
index 398a769..6594c85 100644
--- a/apps/dashboard/app/(authenticated)/productivity/holidays/page.tsx
+++ b/apps/dashboard/app/(authenticated)/productivity/holidays/page.tsx
@@ -12,6 +12,8 @@ export default function HolidayYearsPage() {
         <ResourcePage<HolidayYearsClient>
             pageTitle="Holiday Years"
             routeKey={HOLIDAY_YEAR_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search holidays..."
             getClient={(api) => api.holidayYears}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
diff --git a/apps/dashboard/app/(authenticated)/productivity/shop-calendars/page.tsx b/apps/dashboard/app/(authenticated)/productivity/shop-calendars/page.tsx
index 8742647..22dafea 100644
--- a/apps/dashboard/app/(authenticated)/productivity/shop-calendars/page.tsx
+++ b/apps/dashboard/app/(authenticated)/productivity/shop-calendars/page.tsx
@@ -13,6 +13,8 @@ export default function ShopCalendarsPage() {
         <ResourcePage<ShopCalendarsClient>
             pageTitle="Shop Calendars"
             routeKey={SHOP_CALENDAR_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search shop calendars..."
             getClient={(api) => api.shopCalendars}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
diff --git a/apps/dashboard/app/(authenticated)/productivity/shop-timings/page.tsx b/apps/dashboard/app/(authenticated)/productivity/shop-timings/page.tsx
index ca97435..0962d6e 100644
--- a/apps/dashboard/app/(authenticated)/productivity/shop-timings/page.tsx
+++ b/apps/dashboard/app/(authenticated)/productivity/shop-timings/page.tsx
@@ -13,6 +13,8 @@ export default function ShopTimingsPage() {
         <ResourcePage<ShopTimingsClient>
             pageTitle="Shop Timings"
             routeKey={SHOP_TIMING_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search shop timings..."
             getClient={(api) => api.shopTimings}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
diff --git a/apps/dashboard/app/(authenticated)/productivity/tasks/page.tsx b/apps/dashboard/app/(authenticated)/productivity/tasks/page.tsx
index 829d4a1..05a694f 100644
--- a/apps/dashboard/app/(authenticated)/productivity/tasks/page.tsx
+++ b/apps/dashboard/app/(authenticated)/productivity/tasks/page.tsx
@@ -4,13 +4,16 @@ import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
 import FormDialog from "@/shared/components/form-dialog"
 import { TaskForm } from "@/modules/tasks/task-form"
-import { TASK_ROUTES } from "@garage/api"
+import { TASK_ROUTES, TaskStatus } from "@garage/api"
 import type { TasksClient } from "@garage/api"
 
 export default function TasksPage() {
     return (
         <ResourcePage<TasksClient>
             routeKey={TASK_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search tasks..."
+            statusFilter={{ statuses: TaskStatus }}
             getClient={(api) => api.tasks}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 title: "Tasks",
diff --git a/apps/dashboard/app/(authenticated)/purchase/bill/[id]/layout.tsx b/apps/dashboard/app/(authenticated)/purchase/bill/[id]/layout.tsx
index 035551c..4455b05 100644
--- a/apps/dashboard/app/(authenticated)/purchase/bill/[id]/layout.tsx
+++ b/apps/dashboard/app/(authenticated)/purchase/bill/[id]/layout.tsx
@@ -3,6 +3,7 @@ import { getServerApi } from '@garage/api/server'
 import { BillActions } from '@/modules/bills/bill-actions'
 import { BillProvider, type BillResponse } from '@/modules/bills/bill-context'
 import BillStatusBadge from '@/modules/bills/bill-status-badge'
+import { ShareDocumentButton } from '@/shared/components/share-document-button'
 import { ReceiptIcon } from 'lucide-react'
 import React from 'react'
 
@@ -26,6 +27,7 @@ export default async function BillDetailLayout(props: {
                 actions={
                     <div className="flex space-x-2 items-center">
                         <BillStatusBadge bill={{id, status:data?.status}} />
+                        <ShareDocumentButton type="bill" id={id} />
                         <BillActions billId={id} />
                     </div>
                 }
diff --git a/apps/dashboard/app/(authenticated)/purchase/bill/page.tsx b/apps/dashboard/app/(authenticated)/purchase/bill/page.tsx
index 38ce5c3..cec70c0 100644
--- a/apps/dashboard/app/(authenticated)/purchase/bill/page.tsx
+++ b/apps/dashboard/app/(authenticated)/purchase/bill/page.tsx
@@ -6,9 +6,13 @@ import { Badge } from "@/shared/components/ui/badge"
 import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
 import { BillForm } from "@/modules/bills/bill-form"
-import { BILL_ROUTES } from "@garage/api"
+import { BILL_ROUTES, BillStatus } from "@garage/api"
 import type { BillsClient } from "@garage/api"
 import { formatDate } from "@/shared/utils/formatters"
+import { getFullName } from "@/shared/utils/getFullName"
+import { Money } from "@/shared/components/money"
+import { RelationLink } from "@/shared/components/relation-link"
+import { Building2 } from "lucide-react"
 
 export default function BillsPage() {
     const router = useRouter()
@@ -17,6 +21,9 @@ export default function BillsPage() {
         <ResourcePage<BillsClient>
             pageTitle="Bills"
             routeKey={BILL_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search bills..."
+            statusFilter={{ statuses: BillStatus }}
             getClient={(api) => api.bills}
             onRowClick={(row) => router.push(`/purchase/bill/${(row as any).id}`)}
             headerProps={({ selectedItem, invalidateQuery }) => ({
@@ -41,12 +48,18 @@ export default function BillsPage() {
                 {
                     accessorKey: "total",
                     header: ({ column }) => <ColumnHeader column={column} title="Total" />,
-                    cell: ({ row }) => (row.original as any).total || "—",
+                    cell: ({ row }) => {
+                        const v = (row.original as any).total
+                        return v != null && v !== "" ? <Money value={v} /> : "—"
+                    },
                 },
                 {
                     accessorKey: "balance_due",
                     header: ({ column }) => <ColumnHeader column={column} title="Balance Due" />,
-                    cell: ({ row }) => (row.original as any).balance_due || "—",
+                    cell: ({ row }) => {
+                        const v = (row.original as any).balance_due
+                        return v != null && v !== "" ? <Money value={v} /> : "—"
+                    },
                 },
                 {
                     accessorKey: "title",
@@ -55,7 +68,16 @@ export default function BillsPage() {
                 {
                     accessorKey: "vendor",
                     header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
-                    cell: ({ row }) => (row.original as any).vendor?.name || "—",
+                    cell: ({ row }) => {
+                        const vendor = (row.original as any).vendor
+                        return (
+                            <RelationLink
+                                href={vendor?.id ? `/purchase/vendor/${vendor.id}` : null}
+                                icon={Building2}
+                                label={vendor?.company_name || getFullName(vendor)}
+                            />
+                        )
+                    },
                 },
                 {
                     accessorKey: "bill_date",
diff --git a/apps/dashboard/app/(authenticated)/purchase/expense/page.tsx b/apps/dashboard/app/(authenticated)/purchase/expense/page.tsx
index 97b1783..e9d518a 100644
--- a/apps/dashboard/app/(authenticated)/purchase/expense/page.tsx
+++ b/apps/dashboard/app/(authenticated)/purchase/expense/page.tsx
@@ -5,10 +5,14 @@ import { ColumnHeader } from "@/shared/data-view/table-view"
 import FormDialog from "@/shared/components/form-dialog"
 import { ExpenseForm } from "@/modules/expenses/expense-form"
 import { Badge } from "@/shared/components/ui/badge"
-import { EXPENSE_ROUTES } from "@garage/api"
+import { EXPENSE_ROUTES, ExpenseStatus } from "@garage/api"
 import type { ExpensesClient } from "@garage/api"
 import { useRouter } from "next/navigation"
-import { formatCurrency, formatDate, formatEnum } from "@/shared/utils/formatters"
+import { formatDate, formatEnum } from "@/shared/utils/formatters"
+import { Money } from "@/shared/components/money"
+import { RelationLink } from "@/shared/components/relation-link"
+import { Building2 } from "lucide-react"
+import { getFullName } from "@/shared/utils/getFullName"
 
 export default function ExpensesPage() {
     const router = useRouter()
@@ -16,6 +20,9 @@ export default function ExpensesPage() {
         <ResourcePage<ExpensesClient>
             pageTitle="Expenses"
             routeKey={EXPENSE_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search expenses..."
+            statusFilter={{ statuses: ExpenseStatus }}
             getClient={(api) => api.expenses}
             onRowClick={(row)=>router.push(`/purchase/expense/${row.id}`)}
             headerProps={({ selectedItem, invalidateQuery }) => ({
@@ -49,7 +56,13 @@ export default function ExpensesPage() {
                     header: () => "Vendor",
                     cell: ({ row }) => {
                         const vendor = (row.original as any).vendor
-                        return vendor?.company_name || vendor?.name || "—"
+                        return (
+                            <RelationLink
+                                href={vendor?.id ? `/purchase/vendor/${vendor.id}` : null}
+                                icon={Building2}
+                                label={vendor?.company_name || getFullName(vendor) || vendor?.name}
+                            />
+                        )
                     },
                 },
                 {
@@ -60,12 +73,12 @@ export default function ExpensesPage() {
                 {
                     accessorKey: "total",
                     header: () => "Total",
-                    cell: ({ row }) => formatCurrency((row.original as any).total ?? 0),
+                    cell: ({ row }) => <Money value={(row.original as any).total ?? 0} />,
                 },
                 {
                     accessorKey: "balance_due",
                     header: () => "Balance Due",
-                    cell: ({ row }) => formatCurrency((row.original as any).balance_due ?? 0),
+                    cell: ({ row }) => <Money value={(row.original as any).balance_due ?? 0} />,
                 },
                 {
                     accessorKey: "status",
diff --git a/apps/dashboard/app/(authenticated)/purchase/payments-made/page.tsx b/apps/dashboard/app/(authenticated)/purchase/payments-made/page.tsx
index 0adf019..34b203e 100644
--- a/apps/dashboard/app/(authenticated)/purchase/payments-made/page.tsx
+++ b/apps/dashboard/app/(authenticated)/purchase/payments-made/page.tsx
@@ -32,8 +32,11 @@ import {
 } from "@/shared/components/ui/dialog"
 import { confirm } from "@/shared/components/confirm-dialog"
 import { useAuthApi } from "@/shared/useApi"
+import { getFullName } from "@/shared/utils/getFullName"
 import { PAYMENT_MADE_ROUTES } from "@garage/api"
 import type { PaymentMadesClient } from "@garage/api"
+import { RelationLink } from "@/shared/components/relation-link"
+import { Building2 } from "lucide-react"
 
 // ── Attachment helpers ──
 
@@ -208,10 +211,13 @@ function AttachmentsDialog({
 type PaymentMadeItem = {
     id: number
     payment_number?: string
+    vendor?: { id?: number | string; company_name?: string | null; first_name?: string | null; last_name?: string | null; name?: string | null } | null
     vendor_name?: string
+    employee?: { id?: number | string; first_name?: string | null; last_name?: string | null; name?: string | null } | null
     employee_name?: string
     payment_for?: string
     payment_made?: string | number
+    payment_mode?: { name?: string | null; title?: string | null } | null
     payment_mode_name?: string
     payment_date?: string
     paid_through?: string
@@ -230,14 +236,20 @@ export default function PaymentsMadePage() {
             <ResourcePage<PaymentMadesClient>
                 pageTitle="Payments Made"
                 routeKey={PAYMENT_MADE_ROUTES.INDEX}
+                searchable
+                searchPlaceholder="Search payments..."
                 getClient={(api) => api.paymentMades}
-                headerProps={({ invalidateQuery }) => ({
+                headerProps={({ selectedItem, invalidateQuery }) => ({
                     actions: (
                         <FormDialog title="Record Payment">
-                            {(resourceId) => (
+                            {(resourceId, { close }) => (
                                 <PaymentMadeForm
                                     resourceId={resourceId}
-                                    onSuccess={invalidateQuery}
+                                    initialData={selectedItem}
+                                    onSuccess={() => {
+                                        invalidateQuery()
+                                        close()
+                                    }}
                                 />
                             )}
                         </FormDialog>
@@ -262,11 +274,27 @@ export default function PaymentsMadePage() {
                         header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
                         cell: ({ row }) => {
                             const item = row.original as unknown as PaymentMadeItem
+                            const isVendor =
+                                item.vendor?.company_name ||
+                                getFullName(item.vendor) ||
+                                item.vendor?.name ||
+                                item.vendor_name
+                            const label =
+                                isVendor ||
+                                getFullName(item.employee) ||
+                                item.employee?.name ||
+                                item.employee_name
+                            const href = isVendor && item.vendor?.id
+                                ? `/purchase/vendor/${item.vendor.id}`
+                                : item.employee?.id
+                                    ? `/productivity/employees/${item.employee.id}`
+                                    : null
                             return (
-                                <div className="flex items-center gap-2">
-                                    <UserIcon className="h-4 w-4 text-muted-foreground" />
-                                    <span>{item.vendor_name || "—"}</span>
-                                </div>
+                                <RelationLink
+                                    href={href}
+                                    icon={isVendor ? Building2 : UserIcon}
+                                    label={label}
+                                />
                             )
                         },
                     },
@@ -309,10 +337,15 @@ export default function PaymentsMadePage() {
                         header: ({ column }) => <ColumnHeader column={column} title="Payment Mode" />,
                         cell: ({ row }) => {
                             const item = row.original as unknown as PaymentMadeItem
+                            const label =
+                                item.payment_mode?.name ||
+                                item.payment_mode?.title ||
+                                item.payment_mode_name ||
+                                "—"
                             return (
                                 <div className="flex items-center gap-2">
                                     <CreditCardIcon className="h-4 w-4 text-muted-foreground" />
-                                    <span className="capitalize">{item.payment_mode_name || "—"}</span>
+                                    <span className="capitalize">{label}</span>
                                 </div>
                             )
                         },
diff --git a/apps/dashboard/app/(authenticated)/purchase/purchase-order/[id]/layout.tsx b/apps/dashboard/app/(authenticated)/purchase/purchase-order/[id]/layout.tsx
index 8ce7e11..1137693 100644
--- a/apps/dashboard/app/(authenticated)/purchase/purchase-order/[id]/layout.tsx
+++ b/apps/dashboard/app/(authenticated)/purchase/purchase-order/[id]/layout.tsx
@@ -3,6 +3,7 @@ import { getServerApi } from '@garage/api/server'
 import { PurchaseOrderActions } from '@/modules/purchase-orders/purchase-order-actions'
 import { PurchaseOrderProvider } from '@/modules/purchase-orders/purchase-order-context'
 import { CreateBillFromPOButton } from '@/modules/purchase-orders/create-bill-from-po-button'
+import { ShareDocumentButton } from '@/shared/components/share-document-button'
 import { ClipboardList } from 'lucide-react'
 import React from 'react'
 
@@ -30,6 +31,7 @@ export default async function layout(props: {
                 actions={
                     <div className="flex items-center gap-2">
                         <CreateBillFromPOButton />
+                        <ShareDocumentButton type="purchase_order" id={id} />
                         <PurchaseOrderActions purchaseOrderId={id} />
                     </div>
                 }
diff --git a/apps/dashboard/app/(authenticated)/purchase/purchase-order/page.tsx b/apps/dashboard/app/(authenticated)/purchase/purchase-order/page.tsx
index 9f11930..ba89299 100644
--- a/apps/dashboard/app/(authenticated)/purchase/purchase-order/page.tsx
+++ b/apps/dashboard/app/(authenticated)/purchase/purchase-order/page.tsx
@@ -7,6 +7,9 @@ import FormDialog from "@/shared/components/form-dialog"
 import { PurchaseOrderForm } from "@/modules/purchase-orders/purchase-order-form"
 import { PURCHASE_ORDER_ROUTES } from "@garage/api"
 import type { PurchaseOrdersClient } from "@garage/api"
+import { RelationLink } from "@/shared/components/relation-link"
+import { Building2 } from "lucide-react"
+import { getFullName } from "@/shared/utils/getFullName"
 
 export default function PurchaseOrdersPage() {
     const router = useRouter()
@@ -15,6 +18,8 @@ export default function PurchaseOrdersPage() {
         <ResourcePage<PurchaseOrdersClient>
             pageTitle="Purchase Orders"
             routeKey={PURCHASE_ORDER_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search purchase orders..."
             getClient={(api) => api.purchaseOrders}
             onRowClick={(row) => router.push(`/purchase/purchase-order/${(row as any).id}`)}
             headerProps={({ selectedItem, invalidateQuery }) => ({
@@ -43,7 +48,16 @@ export default function PurchaseOrdersPage() {
                 {
                     accessorKey: "vendor_name",
                     header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
-                    cell: ({ row }) => (row.original as any).vendor_name || "—",
+                    cell: ({ row }) => {
+                        const item = row.original as any
+                        return (
+                            <RelationLink
+                                href={item.vendor?.id ? `/purchase/vendor/${item.vendor.id}` : null}
+                                icon={Building2}
+                                label={item.vendor?.company_name || getFullName(item.vendor) || item.vendor_name}
+                            />
+                        )
+                    },
                 },
                 {
                     accessorKey: "order_date",
diff --git a/apps/dashboard/app/(authenticated)/purchase/vendor-credit/page.tsx b/apps/dashboard/app/(authenticated)/purchase/vendor-credit/page.tsx
index 748594d..8165b1f 100644
--- a/apps/dashboard/app/(authenticated)/purchase/vendor-credit/page.tsx
+++ b/apps/dashboard/app/(authenticated)/purchase/vendor-credit/page.tsx
@@ -5,14 +5,20 @@ import { Badge } from "@/shared/components/ui/badge"
 import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
 import { VendorCreditForm } from "@/modules/vendor-credits/vendor-credit-form"
-import { VENDOR_CREDIT_ROUTES } from "@garage/api"
+import { VENDOR_CREDIT_ROUTES, VendorCreditStatus } from "@garage/api"
 import type { VendorCreditsClient } from "@garage/api"
+import { RelationLink } from "@/shared/components/relation-link"
+import { Building2, FileTextIcon } from "lucide-react"
+import { getFullName } from "@/shared/utils/getFullName"
 
 export default function VendorCreditsPage() {
     return (
         <ResourcePage<VendorCreditsClient>
             pageTitle="Vendor Credits"
             routeKey={VENDOR_CREDIT_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search vendor credits..."
+            statusFilter={{ statuses: VendorCreditStatus }}
             getClient={(api) => api.vendorCredits}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
@@ -35,12 +41,30 @@ export default function VendorCreditsPage() {
                 {
                     accessorKey: "vendor_name",
                     header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
-                    cell: ({ row }) => (row.original as any).vendor_name || "—",
+                    cell: ({ row }) => {
+                        const item = row.original as any
+                        return (
+                            <RelationLink
+                                href={item.vendor?.id ? `/purchase/vendor/${item.vendor.id}` : null}
+                                icon={Building2}
+                                label={item.vendor?.company_name || getFullName(item.vendor) || item.vendor_name}
+                            />
+                        )
+                    },
                 },
                 {
                     accessorKey: "bill_number",
                     header: ({ column }) => <ColumnHeader column={column} title="Bill #" />,
-                    cell: ({ row }) => (row.original as any).bill_number || "—",
+                    cell: ({ row }) => {
+                        const item = row.original as any
+                        return (
+                            <RelationLink
+                                href={item.bill?.id ? `/purchase/bill/${item.bill.id}` : null}
+                                icon={FileTextIcon}
+                                label={item.bill?.bill_number || item.bill_number}
+                            />
+                        )
+                    },
                 },
                 {
                     accessorKey: "vendor_credit_date",
diff --git a/apps/dashboard/app/(authenticated)/purchase/vendor/[id]/layout.tsx b/apps/dashboard/app/(authenticated)/purchase/vendor/[id]/layout.tsx
new file mode 100644
index 0000000..29bac15
--- /dev/null
+++ b/apps/dashboard/app/(authenticated)/purchase/vendor/[id]/layout.tsx
@@ -0,0 +1,37 @@
+import { DashboardDetailsPage } from "@/base/components/layout/dashboard"
+import { getServerApi } from "@garage/api/server"
+import { VendorActions } from "@/modules/vendors/vendor-actions"
+import { VendorProvider } from "@/modules/vendors/vendor-context"
+import React from "react"
+
+export default async function layout(props: {
+    params: Promise<{ id: string }>
+    children: React.ReactNode
+}) {
+    const { id } = await props.params
+    const api = await getServerApi()
+    const response = (await api.vendors.getById(id)) as { data?: Record<string, any> }
+    const vendor = response?.data
+
+    const company = vendor?.company_name as string | undefined
+    const fullName = [vendor?.first_name, vendor?.last_name].filter(Boolean).join(" ").trim()
+    const title = company || fullName || "Vendor Details"
+    const isActive = vendor?.is_active ?? vendor?.status === "active"
+
+    return (
+        <VendorProvider vendor={{ id, label: title }}>
+            <DashboardDetailsPage
+                className="p-0 lg:p-0"
+                title={title}
+                description={vendor?.email ?? vendor?.phone ?? undefined}
+                backHref="/purchase/vendor"
+                actions={<VendorActions vendorId={id} isActive={Boolean(isActive)} />}
+                tabs={[
+                    { href: `/purchase/vendor/${id}`, label: "Details" },
+                ]}
+            >
+                {props.children}
+            </DashboardDetailsPage>
+        </VendorProvider>
+    )
+}
diff --git a/apps/dashboard/app/(authenticated)/purchase/vendor/[id]/page.tsx b/apps/dashboard/app/(authenticated)/purchase/vendor/[id]/page.tsx
new file mode 100644
index 0000000..f8739ee
--- /dev/null
+++ b/apps/dashboard/app/(authenticated)/purchase/vendor/[id]/page.tsx
@@ -0,0 +1,17 @@
+import { getServerApi } from "@garage/api/server"
+import { VendorGeneralInfo } from "@/modules/vendors/vendor-general-info"
+
+export default async function VendorDetailPage(props: { params: Promise<{ id: string }> }) {
+    const { id } = await props.params
+    const api = await getServerApi()
+    // The OpenAPI schema doesn't yet describe GET /api/vendors/{id} (only PUT/DELETE),
+    // so cast through `any` here until the schema is regenerated.
+    const response = (await api.vendors.getById(id)) as { data?: Record<string, any> }
+    const vendor = response?.data
+
+    if (!vendor) {
+        return <div className="text-muted-foreground p-6">Vendor not found.</div>
+    }
+
+    return <VendorGeneralInfo vendor={vendor} />
+}
diff --git a/apps/dashboard/app/(authenticated)/purchase/vendor/page.tsx b/apps/dashboard/app/(authenticated)/purchase/vendor/page.tsx
index 5d9bda3..33f031a 100644
--- a/apps/dashboard/app/(authenticated)/purchase/vendor/page.tsx
+++ b/apps/dashboard/app/(authenticated)/purchase/vendor/page.tsx
@@ -1,18 +1,28 @@
 "use client"
 
+import { useRouter } from "next/navigation"
+import { toast } from "sonner"
+import { Power } from "lucide-react"
 import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
 import FormDialog from "@/shared/components/form-dialog"
+import { Badge } from "@/shared/components/ui/badge"
 import { VendorForm } from "@/modules/vendors/vendor-form"
+import { useAuthApi } from "@/shared/useApi"
 import { VENDOR_ROUTES } from "@garage/api"
 import type { VendorsClient } from "@garage/api"
 
 export default function VendorsPage() {
+    const router = useRouter()
+    const api = useAuthApi()
     return (
         <ResourcePage<VendorsClient>
             pageTitle="Vendors"
             routeKey={VENDOR_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search vendors..."
             getClient={(api) => api.vendors}
+            onRowClick={(row) => router.push(`/purchase/vendor/${(row as any).id}`)}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
                     <FormDialog title="Vendor">
@@ -46,6 +56,18 @@ export default function VendorsPage() {
                     header: ({ column }) => <ColumnHeader column={column} title="Email" />,
                     cell: ({ row }) => (row.original as any).email || "—",
                 },
+                {
+                    accessorKey: "is_active",
+                    header: ({ column }) => <ColumnHeader column={column} title="Status" />,
+                    cell: ({ row }) => {
+                        const isActive = Boolean((row.original as any).is_active)
+                        return (
+                            <Badge variant={isActive ? "default" : "outline"}>
+                                {isActive ? "Active" : "Inactive"}
+                            </Badge>
+                        )
+                    },
+                },
                 {
                     accessorKey: "created_at",
                     header: ({ column }) => <ColumnHeader column={column} title="Created" />,
@@ -54,7 +76,26 @@ export default function VendorsPage() {
                         return val ? new Date(val).toLocaleDateString() : "—"
                     },
                 },
-                actionsColumn(),
+                actionsColumn({
+                    extraItems: (row) => {
+                        const isActive = Boolean((row as any).is_active)
+                        return [
+                            {
+                                label: isActive ? "Deactivate" : "Activate",
+                                icon: Power,
+                                onClick: async () => {
+                                    try {
+                                        await api.vendors.toggleStatus({ id: Number((row as any).id) } as any)
+                                        toast.success(isActive ? "Vendor deactivated." : "Vendor activated.")
+                                        router.refresh()
+                                    } catch {
+                                        toast.error("Failed to update vendor status.")
+                                    }
+                                },
+                            },
+                        ]
+                    },
+                }),
             ]}
         />
     )
diff --git a/apps/dashboard/app/(authenticated)/sales/credit-notes/page.tsx b/apps/dashboard/app/(authenticated)/sales/credit-notes/page.tsx
index e874c36..22a8611 100644
--- a/apps/dashboard/app/(authenticated)/sales/credit-notes/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/credit-notes/page.tsx
@@ -5,7 +5,7 @@ import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
 import FormDialog from "@/shared/components/form-dialog"
 import { CreditNoteForm } from "@/modules/credit-notes/credit-note-form"
-import { CREDIT_NOTE_ROUTES } from "@garage/api"
+import { CREDIT_NOTE_ROUTES, CreditNoteStatus } from "@garage/api"
 import type { CreditNotesClient } from "@garage/api"
 
 type CreditNoteItem = {
@@ -25,6 +25,9 @@ export default function CreditNotesPage() {
         <ResourcePage<CreditNotesClient>
             pageTitle="Credit Notes"
             routeKey={CREDIT_NOTE_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search credit notes..."
+            statusFilter={{ statuses: CreditNoteStatus }}
             getClient={(api) => api.creditNotes}
             onRowClick={(row) => router.push(`/sales/credit-notes/${(row as any).id}`)}
             headerProps={({ selectedItem, invalidateQuery }) => ({
diff --git a/apps/dashboard/app/(authenticated)/sales/customers/[id]/vehicles/page.tsx b/apps/dashboard/app/(authenticated)/sales/customers/[id]/vehicles/page.tsx
index f062b5a..c352a05 100644
--- a/apps/dashboard/app/(authenticated)/sales/customers/[id]/vehicles/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/customers/[id]/vehicles/page.tsx
@@ -32,6 +32,8 @@ export default function CustomerVehiclesPage({ params }: { params: Promise<{ id:
             )}
             pageTitle="Customer Vehicles"
             routeKey={VEHICLE_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search vehicles..."
             getClient={(api) => api.vehicles}
             extraParams={{ customer_id: customerId }}
             header={null}
diff --git a/apps/dashboard/app/(authenticated)/sales/customers/page.tsx b/apps/dashboard/app/(authenticated)/sales/customers/page.tsx
index 4c5dc21..0a8d8b2 100644
--- a/apps/dashboard/app/(authenticated)/sales/customers/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/customers/page.tsx
@@ -6,7 +6,6 @@ import { ColumnHeader } from '@/shared/data-view/table-view'
 import FormDialog from '@/shared/components/form-dialog'
 import { ImportDataButton } from '@/shared/components/import-data-button'
 import { ExportDataButton } from '@/shared/components/export-data-button'
-import { DownloadSampleButton } from '@/shared/components/download-sample-button'
 import { useAuthApi } from '@/shared/useApi'
 import { CustomerForm } from '@/modules/customers/customer-form'
 import { CUSTOMER_ROUTES } from '@garage/api'
@@ -20,18 +19,19 @@ export default function CustomersPage() {
         <ResourcePage<CustomersClient>
             pageTitle='Customers'
             routeKey={CUSTOMER_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search customers..."
             getClient={(api) => api.customers}
             onRowClick={(row) => router.push(`/sales/customers/${(row as any).id}`)}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
                     <div className='flex items-center gap-2'>
-                        <DownloadSampleButton
-                            onDownload={() => api.customers.downloadImportSample()}
-                            fileName='customers-import-sample'
-                        />
                         <ImportDataButton
                             onImport={(file) => api.customers.importData(file)}
                             onSuccess={invalidateQuery}
+                            entityLabel="Customers"
+                            onDownloadSample={() => api.customers.downloadImportSample()}
+                            sampleFileName='customers-import-sample'
                         />
                         <ExportDataButton
                             onExport={(filters) => api.customers.exportData(filters)}
diff --git a/apps/dashboard/app/(authenticated)/sales/estimates/[id]/layout.tsx b/apps/dashboard/app/(authenticated)/sales/estimates/[id]/layout.tsx
index 757c18e..470b81c 100644
--- a/apps/dashboard/app/(authenticated)/sales/estimates/[id]/layout.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/estimates/[id]/layout.tsx
@@ -4,6 +4,7 @@ import { EstimateActions } from '@/modules/estimates/estimate-actions'
 import { EstimateProvider } from '@/modules/estimates/estimate-context'
 import { CreateInvoiceFromEstimateButton } from '@/modules/estimates/create-invoice-from-estimate-button'
 import { CreateJobCardFromEstimateButton } from '@/modules/estimates/create-job-card-from-estimate-button'
+import { ShareDocumentButton } from '@/shared/components/share-document-button'
 import { FileTextIcon } from 'lucide-react'
 import React from 'react'
 import { formatDate } from '@/shared/utils/formatters'
@@ -40,6 +41,7 @@ export default async function layout(props: {
                     <div className="flex items-center gap-2">
                         <CreateInvoiceFromEstimateButton />
                         <CreateJobCardFromEstimateButton />
+                        <ShareDocumentButton type="estimate" id={id} />
                         <EstimateActions estimateId={id} />
                     </div>
                 }
diff --git a/apps/dashboard/app/(authenticated)/sales/estimates/page.tsx b/apps/dashboard/app/(authenticated)/sales/estimates/page.tsx
index ab2504f..d1d04b8 100644
--- a/apps/dashboard/app/(authenticated)/sales/estimates/page.tsx
+++ b/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'
@@ -7,18 +8,22 @@ import { EstimateForm } from '@/modules/estimates/estimate-form'
 import { ESTIMATE_ROUTES } from '@garage/api'
 import type { EstimatesClient } from '@garage/api'
 import { Car, FileTextIcon, UserIcon } from 'lucide-react'
-import { Button } from '@/shared/components/ui/button'
 import Link from 'next/link'
 import { formatDate } from '@/shared/utils/formatters'
 import { getVehicleLabel } from '@/modules/vehicles/utils/getVehicleLabel'
 import { getFullName } from '@/shared/utils/getFullName'
+import { RelationLink } from '@/shared/components/relation-link'
 
 export default function EstimatesPage() {
+    const router = useRouter()
     return (
         <ResourcePage<EstimatesClient>
             pageTitle="Estimates"
             routeKey={ESTIMATE_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search estimates..."
             getClient={(api) => api.estimates}
+            onRowClick={(row) => router.push(`/sales/estimates/${(row as any).id}`)}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
                     <FormDialog title="Estimate">
@@ -39,7 +44,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>
@@ -55,26 +60,30 @@ export default function EstimatesPage() {
                     accessorKey: "customer_name",
                     header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
                     cell: ({ row }) => {
-                        const item:any = row.original  
+                        const item: any = row.original
                         return (
-                            <div className="flex items-center gap-2">
-                                <UserIcon className="h-4 w-4 text-muted-foreground" />
-                                <span>{getFullName(item.customer) || "—"}</span>
-                            </div>
+                            <RelationLink
+                                href={item.customer?.id ? `/sales/customers/${item.customer.id}` : null}
+                                icon={UserIcon}
+                                label={getFullName(item.customer)}
+                            />
                         )
-                    }
+                    },
                 },
                 {
                     accessorKey: "vehicle",
                     header: ({ column }) => <ColumnHeader column={column} title="Vehicle" />,
                     cell: ({ row }) => {
-                        const item :any= row.original  
-                        return <Button variant="outline" asChild size="sm">
-                            <Link href={`/sales/vehicles/${item.vehicle?.id}`}>
-                            <Car/> {getVehicleLabel(item.vehicle as any) || "—"}
-                            </Link>
-                        </Button>
-                    }
+                        const item: any = row.original
+                        return (
+                            <RelationLink
+                                href={item.vehicle?.id ? `/sales/vehicles/${item.vehicle.id}` : null}
+                                icon={Car}
+                                label={getVehicleLabel(item.vehicle as any)}
+                                meta={item.vehicle?.license_plate}
+                            />
+                        )
+                    },
                 },
                 {
                     accessorKey: "date",
diff --git a/apps/dashboard/app/(authenticated)/sales/inspections/[id]/checkpoints/page.tsx b/apps/dashboard/app/(authenticated)/sales/inspections/[id]/checkpoints/page.tsx
index 211739a..ddac344 100644
--- a/apps/dashboard/app/(authenticated)/sales/inspections/[id]/checkpoints/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/inspections/[id]/checkpoints/page.tsx
@@ -1,589 +1,458 @@
 "use client"
 
-import { use, useState, useRef, useCallback } from "react"
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
-import { useAuthApi } from "@/shared/useApi"
-import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
-import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
-import { Badge } from "@/shared/components/ui/badge"
-import { Button } from "@/shared/components/ui/button"
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuSeparator,
-    DropdownMenuTrigger,
-} from "@/shared/components/ui/dropdown-menu"
-import {
-    Dialog,
-    DialogContent,
-    DialogHeader,
-    DialogTitle,
-} from "@/shared/components/ui/dialog"
-import { Input } from "@/shared/components/ui/input"
-import { Label } from "@/shared/components/ui/label"
-import { Textarea } from "@/shared/components/ui/textarea"
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "@/shared/components/ui/select"
+import { useCallback, useEffect, useMemo, useState } from "react"
+import Link from "next/link"
+import { useParams } from "next/navigation"
 import { toast } from "sonner"
 import {
-    Plus,
-    Ellipsis,
-    Pencil,
-    Trash2,
-    CheckCircle2,
     AlertTriangle,
-    XCircle,
-    MinusCircle,
-    CircleDot,
-    Paperclip,
-    FileUp,
-    FileText,
-    FileImage,
-    File,
-    X,
+    Car,
+    ChevronLeft,
+    ChevronRight,
+    CircleCheck,
+    FileSignature,
+    Gauge,
+    Image as ImageIcon,
+    Loader2,
+    Share2,
+    StickyNote,
+    User,
 } from "lucide-react"
-import { INSPECTION_ROUTES } from "@garage/api"
 
-// ── Types ──
+import { Button } from "@/shared/components/ui/button"
+import { Badge } from "@/shared/components/ui/badge"
+import {
+    Card,
+    CardAction,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "@/shared/components/ui/card"
+import { Progress } from "@/shared/components/ui/progress"
+import { Separator } from "@/shared/components/ui/separator"
+import { Tabs, TabsList, TabsTrigger } from "@/shared/components/ui/tabs"
+import { useAuthApi } from "@/shared/useApi"
+import {
+    CheckpointFillDialog,
+    isCheckpointComplete,
+    type Checkpoint,
+    type Severity,
+} from "@/modules/inspections/checkpoint-fill-dialog"
+import { SignaturePad } from "@/modules/inspections/signature-pad"
+import { InspectionShareDialog } from "@/modules/inspections/inspection-share-dialog"
 
-type CheckpointItem = {
+type Inspection = {
     id: number
-    inspection_id?: number
-    name?: string
-    description?: string
-    record_type?: string
-    condition_rate?: number
-    file?: string
-    status?: string
-    created_at?: string
-    updated_at?: string
+    title: string
+    order_number?: string | null
+    status?: string | null
+    odometer?: number | null
+    template?: { id: number; name: string } | null
+    customer?: { first_name?: string; last_name?: string } | null
+    vehicle?: { make?: string; model?: string; year?: string | number; license_plate?: string } | null
+    check_points: Checkpoint[]
+    technician_signature_url?: string | null
+    customer_signature_url?: string | null
 }
 
-// ── Constants ──
-
-const CHECKPOINT_STATUSES = [
-    { value: "passed", label: "Passed", icon: CheckCircle2, color: "bg-green-100 text-green-800" },
-    { value: "need_attention", label: "Need Attention", icon: AlertTriangle, color: "bg-yellow-100 text-yellow-800" },
-    { value: "failed", label: "Failed", icon: XCircle, color: "bg-red-100 text-red-800" },
-    { value: "not_applicable", label: "Not Applicable", icon: MinusCircle, color: "bg-gray-100 text-gray-800" },
-    { value: "not_inspected", label: "Not Inspected", icon: CircleDot, color: "bg-blue-100 text-blue-800" },
-] as const
-
-const RECORD_TYPES = [
-    { value: "record_conditions", label: "Record Conditions" },
-    { value: "record_audio", label: "Record Audio" },
-    { value: "record_video", label: "Record Video" },
-    { value: "capture_photo", label: "Capture Photo" },
-] as const
-
-function formatStatus(status?: string) {
-    if (!status) return "Not Inspected"
-    return status.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
+const SEVERITY_DOT: Record<Severity, string> = {
+    good: "bg-emerald-500 shadow-emerald-500/30",
+    attention: "bg-amber-500 shadow-amber-500/30",
+    critical: "bg-rose-500 shadow-rose-500/30",
+    na: "bg-slate-400 shadow-slate-400/30",
+    not_inspected: "bg-muted shadow-none",
+}
+const SEVERITY_LABEL: Record<Severity, string> = {
+    good: "Good",
+    attention: "Attention",
+    critical: "Critical",
+    na: "N/A",
+    not_inspected: "Not inspected",
+}
+const SEVERITY_BADGE: Record<Severity, "default" | "secondary" | "destructive" | "outline"> = {
+    good: "default",
+    attention: "secondary",
+    critical: "destructive",
+    na: "outline",
+    not_inspected: "outline",
 }
 
-function getStatusConfig(status?: string) {
-    return CHECKPOINT_STATUSES.find((s) => s.value === status) || CHECKPOINT_STATUSES[4]
-}
-
-// ── Checkpoint Form Dialog ──
-
-function CheckpointFormDialog({
-    open,
-    onOpenChange,
-    inspectionId,
-    checkpoint,
-    onSuccess,
-}: {
-    open: boolean
-    onOpenChange: (open: boolean) => void
-    inspectionId: string
-    checkpoint?: CheckpointItem | null
-    onSuccess: () => void
-}) {
-    const api = useAuthApi()
-    const [name, setName] = useState(checkpoint?.name ?? "")
-    const [description, setDescription] = useState(checkpoint?.description ?? "")
-    const [recordType, setRecordType] = useState(checkpoint?.record_type ?? "record_conditions")
-    const [isPending, setIsPending] = useState(false)
-
-    const isEditing = !!checkpoint
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault()
-        if (!name.trim()) {
-            toast.error("Name is required")
-            return
-        }
-        setIsPending(true)
-        try {
-            const payload = {
-                inspection_id: Number(inspectionId),
-                name: name.trim(),
-                description: description.trim() || undefined,
-                record_type: recordType,
-            }
-
-            if (isEditing) {
-                const promise = api.inspections.updateCheckpoint(String(checkpoint.id), payload)
-                toast.promise(promise, {
-                    loading: "Updating checkpoint...",
-                    success: "Checkpoint updated",
-                    error: "Failed to update checkpoint",
-                })
-                await promise
-            } else {
-                const promise = api.inspections.createCheckpoint(payload)
-                toast.promise(promise, {
-                    loading: "Creating checkpoint...",
-                    success: "Checkpoint created",
-                    error: "Failed to create checkpoint",
-                })
-                await promise
-            }
-            onSuccess()
-            onOpenChange(false)
-        } finally {
-            setIsPending(false)
-        }
+function groupBySection(cps: Checkpoint[]) {
+    const map = new Map<string, Checkpoint[]>()
+    for (const cp of cps) {
+        const key = cp.section_name || "Other"
+        if (!map.has(key)) map.set(key, [])
+        map.get(key)!.push(cp)
     }
-
-    return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>{isEditing ? "Edit Checkpoint" : "Add Checkpoint"}</DialogTitle>
-                </DialogHeader>
-                <form onSubmit={handleSubmit} className="grid gap-4">
-                    <div className="grid gap-2">
-                        <Label htmlFor="cp-name">Name *</Label>
-                        <Input
-                            id="cp-name"
-                            placeholder="e.g. Engine Oil Level"
-                            value={name}
-                            onChange={(e) => setName(e.target.value)}
-                            required
-                        />
-                    </div>
-                    <div className="grid gap-2">
-                        <Label htmlFor="cp-description">Description</Label>
-                        <Textarea
-                            id="cp-description"
-                            placeholder="Check oil level and condition"
-                            value={description}
-                            onChange={(e) => setDescription(e.target.value)}
-                        />
-                    </div>
-                    <div className="grid gap-2">
-                        <Label htmlFor="cp-record-type">Record Type</Label>
-                        <Select value={recordType} onValueChange={setRecordType}>
-                            <SelectTrigger>
-                                <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                                {RECORD_TYPES.map((rt) => (
-                                    <SelectItem key={rt.value} value={rt.value}>
-                                        {rt.label}
-                                    </SelectItem>
-                                ))}
-                            </SelectContent>
-                        </Select>
-                    </div>
-                    <Button type="submit" disabled={isPending}>
-                        {isEditing ? <Pencil className="size-4" /> : <Plus className="size-4" />}
-                        {isPending
-                            ? (isEditing ? "Updating..." : "Creating...")
-                            : (isEditing ? "Update Checkpoint" : "Create Checkpoint")}
-                    </Button>
-                </form>
-            </DialogContent>
-        </Dialog>
-    )
+    return Array.from(map.entries()).map(([name, items]) => ({ name, items }))
 }
 
-// ── Attachments Dialog ──
-
-function getFileIcon(url: string) {
-    const ext = url.split(".").pop()?.toLowerCase()
-    if (["png", "jpg", "jpeg", "gif", "webp", "svg"].includes(ext ?? "")) return FileImage
-    if (ext === "pdf") return FileText
-    return File
-}
-
-function getFileName(url: string) {
-    try {
-        return decodeURIComponent(url.split("/").pop() ?? "Attachment")
-    } catch {
-        return url.split("/").pop() ?? "Attachment"
-    }
-}
-
-function isImageUrl(url: string) {
-    const ext = url.split(".").pop()?.toLowerCase()
-    return ["png", "jpg", "jpeg", "gif", "webp", "svg"].includes(ext ?? "")
-}
-
-function CheckpointAttachmentsDialog({
-    open,
-    onOpenChange,
-    checkpoint,
-    onSuccess,
-}: {
-    open: boolean
-    onOpenChange: (open: boolean) => void
-    checkpoint: CheckpointItem | null
-    onSuccess: () => void
-}) {
+export default function InspectionCheckpointsPage() {
+    const params = useParams<{ id: string }>()
+    const id = params.id
     const api = useAuthApi()
-    const fileInputRef = useRef<HTMLInputElement>(null)
-    const [isUploading, setIsUploading] = useState(false)
 
-    const handleUpload = useCallback(async (file: globalThis.File) => {
-        if (!checkpoint) return
-        setIsUploading(true)
+    const [data, setData] = useState<Inspection | null>(null)
+    const [initialLoad, setInitialLoad] = useState(true)
+    const [refetching, setRefetching] = useState(false)
+    const [activeIndex, setActiveIndex] = useState<number | null>(null)
+    const [shareOpen, setShareOpen] = useState(false)
+    const [mode, setMode] = useState<"all" | "wizard">("all")
+    const [wizardSectionIdx, setWizardSectionIdx] = useState(0)
+    const [signing, setSigning] = useState<{ who: "technician" | "customer" } | null>(null)
+
+    const load = useCallback(async () => {
+        const isFirst = !data
+        if (isFirst) setInitialLoad(true)
+        else setRefetching(true)
         try {
-            const promise = api.inspections.uploadCheckpointMedia(
-                String(checkpoint.id),
-                { file },
-            )
-            toast.promise(promise, {
-                loading: "Uploading attachment...",
-                success: "Attachment uploaded",
-                error: "Failed to upload attachment",
-            })
-            await promise
-            onSuccess()
+            const res = await api.inspections.showOne(id)
+            setData(res.data as Inspection)
+        } catch (e: any) {
+            toast.error(e?.payload?.message ?? "Failed to load inspection")
         } finally {
-            setIsUploading(false)
-            if (fileInputRef.current) fileInputRef.current.value = ""
+            setInitialLoad(false)
+            setRefetching(false)
         }
-    }, [api, checkpoint, onSuccess])
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id])
 
-    const handleDelete = useCallback(async () => {
-        if (!checkpoint) return
-        const promise = api.inspections.deleteCheckpointMedia(String(checkpoint.id))
-        toast.promise(promise, {
-            loading: "Removing attachment...",
-            success: "Attachment removed",
-            error: "Failed to remove attachment",
+    const patchCheckpoint = useCallback((checkpointId: number, patch: Partial<Checkpoint>) => {
+        setData((prev) => {
+            if (!prev) return prev
+            return {
+                ...prev,
+                check_points: prev.check_points.map((c) =>
+                    c.id === checkpointId ? { ...c, ...patch } : c
+                ),
+            }
         })
-        await promise
-        onSuccess()
-    }, [api, checkpoint, onSuccess])
+    }, [])
 
-    const hasFile = !!checkpoint?.file
-    const FileIcon = checkpoint?.file ? getFileIcon(checkpoint.file) : File
+    useEffect(() => { load() }, [load])
+
+    const sections = useMemo(() => data ? groupBySection(data.check_points ?? []) : [], [data])
+    const flatCheckpoints = useMemo(() => sections.flatMap((s) => s.items), [sections])
+
+    const totals = useMemo(() => {
+        const t = { good: 0, attention: 0, critical: 0, na: 0, not_inspected: 0 }
+        for (const cp of data?.check_points ?? []) {
+            const s = (cp.severity as Severity) ?? "not_inspected"
+            t[s]++
+        }
+        return t
+    }, [data])
+
+    const setSeverity = async (cp: Checkpoint, severity: Severity) => {
+        patchCheckpoint(cp.id, { severity })
+        try {
+            await api.inspections.updateCheckpoint(String(cp.id), { severity } as any)
+        } catch (e: any) {
+            toast.error(e?.payload?.message ?? "Failed to save")
+            load()
+        }
+    }
+
+    const handleSign = async (who: "technician" | "customer", dataUrl: string) => {
+        setSigning({ who })
+        try {
+            await api.inspections.sign(id, who, dataUrl)
+            toast.success(who === "technician" ? "Technician signature saved" : "Customer signature saved")
+            load()
+        } catch (e: any) {
+            toast.error(e?.payload?.message ?? "Failed to save signature")
+        } finally {
+            setSigning(null)
+        }
+    }
+
+    if (initialLoad) {
+        return (
+            <div className="min-h-[60vh] flex items-center justify-center">
+                <div className="flex items-center gap-2 text-muted-foreground text-sm">
+                    <Loader2 className="size-4 animate-spin" /> Loading inspection…
+                </div>
+            </div>
+        )
+    }
+    if (!data) return <div className="p-6 text-muted-foreground">Inspection not found</div>
+
+    const vehicleLine = data.vehicle
+        ? [data.vehicle.year, data.vehicle.make, data.vehicle.model].filter(Boolean).join(" ")
+        : "—"
+    const customerName = data.customer ? `${data.customer.first_name ?? ""} ${data.customer.last_name ?? ""}`.trim() : "—"
+    const totalCount = data.check_points.length
+    const inspectedCount = totalCount - totals.not_inspected
+    const progress = totalCount > 0 ? Math.round((inspectedCount / totalCount) * 100) : 0
+
+    const wizardSection = sections[wizardSectionIdx]
 
     return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent  className="sm:max-w-2xl">
-                <DialogHeader>
-                    <DialogTitle>Attachments — {checkpoint?.name}</DialogTitle>
-                </DialogHeader>
-                <div className="flex flex-col gap-4">
-                    {/* Current attachment */}
-                    {hasFile ? (
-                        <div className="rounded-lg border p-3">
-                            <div className="flex items-center justify-between gap-3">
-                                <div className="flex items-center gap-3 min-w-0 ">
-                                    {isImageUrl(checkpoint.file!) ? (
-                                        <img
-                                            src={checkpoint.file!}
-                                            alt="Checkpoint attachment"
-                                            className="size-12 rounded-md object-cover"
-                                        />
-                                    ) : (
-                                        <div className="flex size-12 shrink-0 items-center justify-center rounded-md bg-muted">
-                                            <FileIcon className="size-5 text-muted-foreground" />
-                                        </div>
-                                    )}
-                                    <div className="min-w-0 flex flex-col gap-0.5 max-w-48">
-                                        <a
-                                            href={checkpoint.file!}
-                                            target="_blank"
-                                            rel="noopener noreferrer"
-                                            className="truncate text-sm  font-medium text-primary hover:underline"
-                                        >
-                                            {getFileName(checkpoint.file!)}
-                                        </a>
-                                        <span className="text-xs text-muted-foreground">
-                                            Current attachment
-                                        </span>
-                                    </div>
-                                </div>
-                                <Button
-                                    variant="ghost"
-                                    size="icon"
-                                    className="shrink-0 text-destructive hover:text-destructive"
-                                    onClick={handleDelete}
-                                    title="Remove attachment"
-                                >
-                                    <Trash2 className="size-4" />
-                                </Button>
+        <div className="max-w-5xl mx-auto p-3 sm:p-6 space-y-4">
+            {/* Header */}
+            <Card>
+                <CardHeader className="gap-3">
+                    <div className="flex items-center justify-between gap-2 flex-wrap">
+                        <Link href={`/sales/inspections/${id}`}>
+                            <Button variant="ghost" size="sm" className="-ms-2">
+                                <ChevronLeft className="size-4" /> Back to inspection
+                            </Button>
+                        </Link>
+                        <div className="flex items-center gap-2">
+                            {refetching && <Loader2 className="size-3.5 animate-spin text-muted-foreground" />}
+                            <Button variant="outline" size="sm" onClick={() => setShareOpen(true)}>
+                                <Share2 className="size-4" /> Share with customer
+                            </Button>
+                        </div>
+                    </div>
+                    <Separator />
+                    <div className="flex items-start justify-between gap-4 flex-wrap">
+                        <div className="min-w-0">
+                            <CardDescription className="uppercase tracking-wide text-[11px]">Inspection</CardDescription>
+                            <CardTitle className="text-2xl">{data.title}</CardTitle>
+                            <div className="flex items-center gap-4 mt-2 text-sm text-muted-foreground flex-wrap">
+                                <span className="inline-flex items-center gap-1.5"><User className="size-3.5" /> {customerName}</span>
+                                <span className="inline-flex items-center gap-1.5"><Car className="size-3.5" /> {vehicleLine}</span>
+                                {data.vehicle?.license_plate && (
+                                    <Badge variant="outline" className="font-mono">{data.vehicle.license_plate}</Badge>
+                                )}
+                                {data.odometer != null && (
+                                    <span className="inline-flex items-center gap-1.5"><Gauge className="size-3.5" /> {Number(data.odometer).toLocaleString()} km</span>
+                                )}
                             </div>
                         </div>
-                    ) : (
-                        <div className="flex flex-col items-center gap-2 rounded-lg border border-dashed p-6 text-muted-foreground">
-                            <Paperclip className="size-8" />
-                            <span className="text-sm">No attachments yet</span>
+                    </div>
+                </CardHeader>
+                <CardContent className="gap-3">
+                    {/* Progress */}
+                    <div className="space-y-1.5">
+                        <div className="flex items-center justify-between text-xs text-muted-foreground">
+                            <span>Progress</span>
+                            <span className="tabular-nums">{inspectedCount} / {totalCount} ({progress}%)</span>
                         </div>
-                    )}
+                        <Progress value={progress} className="h-2" />
+                    </div>
 
-                    {/* Upload area */}
-                    <input
-                        ref={fileInputRef}
-                        type="file"
-                        className="hidden"
-                        accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,audio/*,video/*"
-                        onChange={(e) => {
-                            const file = e.target.files?.[0]
-                            if (file) handleUpload(file)
-                        }}
-                    />
-                    <Button
-                        variant="outline"
-                        className="w-full"
-                        disabled={isUploading}
-                        onClick={() => fileInputRef.current?.click()}
-                    >
-                        <FileUp className="size-4" />
-                        {isUploading
-                            ? "Uploading..."
-                            : hasFile
-                              ? "Replace Attachment"
-                              : "Add Attachment"}
-                    </Button>
-                </div>
-            </DialogContent>
-        </Dialog>
+                    {/* Severity tally */}
+                    <div className="flex items-center gap-2 flex-wrap mt-3">
+                        {(["good", "attention", "critical", "na", "not_inspected"] as Severity[]).map((s) => (
+                            <Badge key={s} variant={SEVERITY_BADGE[s]} className="gap-1.5">
+                                <span className={`size-1.5 rounded-full ${SEVERITY_DOT[s].split(" ")[0]}`} />
+                                {totals[s]} {SEVERITY_LABEL[s]}
+                            </Badge>
+                        ))}
+                    </div>
+
+                    {/* Legend */}
+                    <div className="mt-3 rounded-md border bg-muted/30 px-3 py-2 text-xs text-muted-foreground flex items-center gap-3 flex-wrap">
+                        <span className="font-medium text-foreground">Tap a dot to mark:</span>
+                        {(["good", "attention", "critical", "na"] as Severity[]).map((s) => (
+                            <span key={s} className="inline-flex items-center gap-1.5">
+                                <span className={`size-3 rounded-full ${SEVERITY_DOT[s].split(" ")[0]} shadow-md`} />
+                                {SEVERITY_LABEL[s]}
+                            </span>
+                        ))}
+                    </div>
+                </CardContent>
+            </Card>
+
+            {/* Mode tabs */}
+            {totalCount > 0 && (
+                <Tabs value={mode} onValueChange={(v) => setMode(v as any)} className="w-full">
+                    <TabsList className="w-full sm:w-auto">
+                        <TabsTrigger value="all">All sections</TabsTrigger>
+                        <TabsTrigger value="wizard">Wizard</TabsTrigger>
+                    </TabsList>
+                </Tabs>
+            )}
+
+            {/* Sections */}
+            {totalCount === 0 ? (
+                <Card>
+                    <CardContent className="py-10 text-center">
+                        <CircleCheck className="size-8 mx-auto text-muted-foreground/60 mb-3" />
+                        <p className="text-sm text-muted-foreground">
+                            This inspection has no checkpoints yet. It was probably created from an empty template.
+                        </p>
+                    </CardContent>
+                </Card>
+            ) : mode === "all" ? (
+                sections.map((section) => (
+                    <Card key={section.name}>
+                        <CardHeader className="py-3">
+                            <div className="flex items-center justify-between">
+                                <CardTitle className="text-base">{section.name}</CardTitle>
+                                <Badge variant="outline" className="font-normal">
+                                    {section.items.filter(isCheckpointComplete).length} / {section.items.length} done
+                                </Badge>
+                            </div>
+                        </CardHeader>
+                        <CardContent className="p-0">
+                            <ul className="divide-y">
+                                {section.items.map((cp) => (
+                                    <CheckpointRow key={cp.id} cp={cp} onSeverity={setSeverity} onOpen={() => setActiveIndex(flatCheckpoints.findIndex((c) => c.id === cp.id))} />
+                                ))}
+                            </ul>
+                        </CardContent>
+                    </Card>
+                ))
+            ) : (
+                wizardSection && (() => {
+                    const pendingItems = wizardSection.items.filter((cp) => !isCheckpointComplete(cp))
+                    const sectionDone = pendingItems.length === 0
+                    return (
+                        <Card>
+                            <CardHeader className="py-3 gap-1">
+                                <div className="flex items-center justify-between flex-wrap gap-2">
+                                    <CardTitle className="text-base">{wizardSection.name}</CardTitle>
+                                    <Badge variant="outline" className="font-normal">
+                                        Section {wizardSectionIdx + 1} / {sections.length}
+                                    </Badge>
+                                </div>
+                            </CardHeader>
+                            <CardContent className="p-0">
+                                <ul className="divide-y">
+                                    {wizardSection.items.map((cp) => (
+                                        <CheckpointRow key={cp.id} cp={cp} onSeverity={setSeverity} onOpen={() => setActiveIndex(flatCheckpoints.findIndex((c) => c.id === cp.id))} />
+                                    ))}
+                                </ul>
+                            </CardContent>
+                            <div className="px-4 py-3 border-t bg-muted/30 space-y-2">
+                                {!sectionDone && (
+                                    <div className="flex items-start gap-2 text-xs text-amber-900">
+                                        <AlertTriangle className="size-3.5 mt-0.5 shrink-0 text-amber-600" />
+                                        <div>
+                                            <span className="font-medium">{pendingItems.length} pending.</span>{' '}
+                                            Each checkpoint needs a finding and its required recording before you can move on.
+                                        </div>
+                                    </div>
+                                )}
+                                <div className="flex items-center justify-between">
+                                    <Button
+                                        variant="outline"
+                                        size="sm"
+                                        disabled={wizardSectionIdx === 0}
+                                        onClick={() => setWizardSectionIdx((i) => Math.max(0, i - 1))}
+                                    >
+                                        <ChevronLeft className="size-4" /> Previous
+                                    </Button>
+                                    <Button
+                                        size="sm"
+                                        disabled={wizardSectionIdx >= sections.length - 1 || !sectionDone}
+                                        onClick={() => setWizardSectionIdx((i) => Math.min(sections.length - 1, i + 1))}
+                                    >
+                                        Next <ChevronRight className="size-4" />
+                                    </Button>
+                                </div>
+                            </div>
+                        </Card>
+                    )
+                })()
+            )}
+
+            {/* Signatures */}
+            {totalCount > 0 && (
+                <Card>
+                    <CardHeader className="py-3 flex-row items-center gap-2">
+                        <FileSignature className="size-4 text-muted-foreground" />
+                        <CardTitle className="text-base">Sign-off</CardTitle>
+                    </CardHeader>
+                    <CardContent className="gap-3 grid grid-cols-1 md:grid-cols-2">
+                        <SignaturePad
+                            label="Technician signature"
+                            existingUrl={data.technician_signature_url}
+                            saving={signing?.who === "technician"}
+                            onSave={(d) => handleSign("technician", d)}
+                        />
+                        <SignaturePad
+                            label="Customer signature"
+                            existingUrl={data.customer_signature_url}
+                            saving={signing?.who === "customer"}
+                            onSave={(d) => handleSign("customer", d)}
+                        />
+                    </CardContent>
+                </Card>
+            )}
+
+            <CheckpointFillDialog
+                open={activeIndex !== null}
+                onOpenChange={(o) => { if (!o) setActiveIndex(null) }}
+                checkpoints={flatCheckpoints}
+                activeIndex={activeIndex}
+                onIndexChange={setActiveIndex}
+                onSaved={load}
+                onPatch={patchCheckpoint}
+            />
+
+            <InspectionShareDialog
+                open={shareOpen}
+                onOpenChange={setShareOpen}
+                inspectionId={id}
+            />
+        </div>
     )
 }
 
-// ── Main Page ──
-
-export default function InspectionCheckpointsPage({ params }: { params: Promise<{ id: string }> }) {
-    const { id: inspectionId } = use(params)
-    const api = useAuthApi()
-    const queryClient = useQueryClient()
-
-    const [formOpen, setFormOpen] = useState(false)
-    const [editingCheckpoint, setEditingCheckpoint] = useState<CheckpointItem | null>(null)
-    const [attachmentsCheckpoint, setAttachmentsCheckpoint] = useState<CheckpointItem | null>(null)
-
-    const queryKey = [INSPECTION_ROUTES.CHECKPOINTS, inspectionId]
-
-    const { data, isLoading } = useQuery({
-        queryKey,
-        queryFn: () => api.inspections.listCheckpoints({ inspection_id: inspectionId } as never),
-    })
-
-    const invalidate = () => {
-        queryClient.invalidateQueries({ queryKey })
-    }
-
-    // ── Status change mutation ──
-    const changeStatusMutation = useMutation({
-        mutationFn: ({ checkpointId, status }: { checkpointId: number; status: string }) =>
-            api.inspections.changeCheckpointStatus({
-                inspection_id: Number(inspectionId),
-                inspection_check_point_id: String(checkpointId),
-                name: "", // required by API type but server uses checkpoint id from context
-                record_type: "record_conditions",
-                status,
-            } as never),
-        onSuccess: () => invalidate(),
-    })
-
-    // ── Delete checkpoint mutation ──
-    const deleteMutation = useMutation({
-        mutationFn: (checkpointId: string) => api.inspections.destroyCheckpoint(checkpointId),
-        onSuccess: () => {
-            toast.success("Checkpoint deleted")
-            invalidate()
-        },
-        onError: () => toast.error("Failed to delete checkpoint"),
-    })
-
-    const handleEdit = (checkpoint: CheckpointItem) => {
-        setEditingCheckpoint(checkpoint)
-        setFormOpen(true)
-    }
-
-    const handleAdd = () => {
-        setEditingCheckpoint(null)
-        setFormOpen(true)
-    }
-
-    const handleStatusChange = (checkpointId: number, status: string) => {
-        const promise = changeStatusMutation.mutateAsync({ checkpointId, status,  })
-        toast.promise(promise, {
-            loading: "Updating status...",
-            success: `Status changed to ${formatStatus(status)}`,
-            error: "Failed to update status",
-        })
-    }
-
-    const checkpoints = (data as any)?.data ?? []
-    const meta = (data as any)?.meta
-
-    const pagination = {
-        page: meta?.current_page ?? 1,
-        pageSize: meta?.per_page ?? 15,
-        pageCount: meta?.last_page ?? 1,
-        total: meta?.total ?? 0,
-    }
-
-    const columns = [
-        {
-            accessorKey: "name",
-            header: ({ column }: any) => <ColumnHeader column={column} title="Name" />,
-            cell: ({ row }: any) => {
-                const item = row.original as CheckpointItem
-                return (
-                    <div className="flex flex-col gap-0.5">
-                        <span className="font-medium">{item.name}</span>
-                        {item.description && (
-                            <span className="text-xs text-muted-foreground">{item.description}</span>
+function CheckpointRow({
+    cp,
+    onSeverity,
+    onOpen,
+}: {
+    cp: Checkpoint
+    onSeverity: (cp: Checkpoint, s: Severity) => void
+    onOpen: () => void
+}) {
+    const current = (cp.severity as Severity) ?? "not_inspected"
+    const attachments = cp.attachments ?? cp.media ?? []
+    const photoCount = attachments.filter((m) => m.media_type === "photo").length
+    const complete = isCheckpointComplete(cp)
+    return (
+        <li
+            className={`px-3 sm:px-4 py-3 transition-colors hover:bg-muted/30 ${!complete ? "bg-amber-50/40" : ""}`}
+        >
+            <div className="flex items-start gap-3 flex-wrap sm:flex-nowrap">
+                <button
+                    type="button"
+                    onClick={onOpen}
+                    className="flex-1 min-w-0 text-left group"
+                >
+                    <div className="font-medium text-sm flex items-center gap-2">
+                        <span className="group-hover:text-primary transition">{cp.name}</span>
+                        {!complete && (
+                            <Badge variant="secondary" className="text-[10px] uppercase tracking-wide">
+                                Pending
+                            </Badge>
                         )}
                     </div>
-                )
-            },
-        },
-        {
-            accessorKey: "record_type",
-            header: ({ column }: any) => <ColumnHeader column={column} title="Record Type" />,
-            cell: ({ row }: any) => {
-                const item = row.original as CheckpointItem
-                const rt = RECORD_TYPES.find((r) => r.value === item.record_type)
-                return rt?.label ?? item.record_type ?? "—"
-            },
-        },
-        {
-            accessorKey: "status",
-            header: ({ column }: any) => <ColumnHeader column={column} title="Status" />,
-            cell: ({ row }: any) => {
-                const item = row.original as CheckpointItem
-                const config = getStatusConfig(item.status)
-                return (
-                    <Badge className={config.color}>
-                        <config.icon className="mr-1 size-3" />
-                        {formatStatus(item.status)}
-                    </Badge>
-                )
-            },
-        },
-        {
-            accessorKey: "condition_rate",
-            header: ({ column }: any) => <ColumnHeader column={column} title="Condition" />,
-            cell: ({ row }: any) => {
-                const item = row.original as CheckpointItem
-                return item.condition_rate != null ? `${item.condition_rate}/10` : "—"
-            },
-        },
-        {
-            id: "attachments",
-            header: () => <span className="text-xs">Attachments</span>,
-            cell: ({ row }: any) => {
-                const item = row.original as CheckpointItem
-                return (
-                    <Button
-                        variant="ghost"
-                        size="sm"
-                        className="gap-1.5"
-                        onClick={() => setAttachmentsCheckpoint(item)}
-                    >
-                        <Paperclip className="size-3.5" />
-                        {item.file ? (
-                            <Badge variant="secondary" className="px-1.5 py-0 text-xs">1</Badge>
-                        ) : (
-                            <span className="text-xs text-muted-foreground">0</span>
-                        )}
-                    </Button>
-                )
-            },
-            enableSorting: false,
-        },
-        {
-            id: "actions",
-            cell: ({ row }: any) => {
-                const item = row.original as CheckpointItem
-                return (
-                    <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                            <Button variant="ghost" size="icon" className="size-8">
-                                <Ellipsis className="size-4" />
-                            </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                            {CHECKPOINT_STATUSES.map((s) => (
-                                <DropdownMenuItem
-                                    key={s.value}
-                                    onClick={() => handleStatusChange(item.id, s.value)}
-                                    disabled={item.status === s.value}
-                                >
-                                    <s.icon className="size-4" />
-                                    {s.label}
-                                </DropdownMenuItem>
-                            ))}
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem onClick={() => handleEdit(item)}>
-                                <Pencil className="size-4" />
-                                Edit
-                            </DropdownMenuItem>
-                            <DropdownMenuItem
-                                variant="destructive"
-                                onClick={() => deleteMutation.mutate(String(item.id))}
-                            >
-                                <Trash2 className="size-4" />
-                                Delete
-                            </DropdownMenuItem>
-                        </DropdownMenuContent>
-                    </DropdownMenu>
-                )
-            },
-        },
-    ]
-
-    return (
-        <DashboardPage header={null}>
-            <div className="flex items-center justify-between p-4">
-                <h3 className="text-lg font-semibold">Checkpoints</h3>
-                <Button onClick={handleAdd} size="sm">
-                    <Plus className="size-4" />
-                    Add Checkpoint
-                </Button>
+                    {cp.technician_notes && (
+                        <div className="flex items-start gap-1 text-xs text-muted-foreground mt-1">
+                            <StickyNote className="size-3 mt-0.5 shrink-0" />
+                            <span className="italic line-clamp-1">{cp.technician_notes}</span>
+                        </div>
+                    )}
+                    {photoCount > 0 && (
+                        <div className="flex items-center gap-1 mt-1 text-xs text-muted-foreground">
+                            <ImageIcon className="size-3" /> {photoCount} photo{photoCount === 1 ? "" : "s"}
+                        </div>
+                    )}
+                </button>
+                <div className="flex gap-2 justify-end shrink-0 w-full sm:w-auto">
+                    {(["good", "attention", "critical", "na"] as Severity[]).map((s) => {
+                        const active = current === s
+                        return (
+                            <button
+                                key={s}
+                                type="button"
+                                onClick={(e) => { e.stopPropagation(); onSeverity(cp, s) }}
+                                aria-label={SEVERITY_LABEL[s]}
+                                title={SEVERITY_LABEL[s]}
+                                className={`size-10 sm:size-9 rounded-full transition shadow-md ${SEVERITY_DOT[s]} ${active ? "ring-2 ring-offset-2 ring-foreground/40 scale-105" : "opacity-60 hover:opacity-100"}`}
+                            />
+                        )
+                    })}
+                </div>
             </div>
-            <DataTable
-                columns={columns}
-                data={checkpoints}
-                pagination={pagination}
-                sorting={[]}
-                onChange={() => {}}
-                isLoading={isLoading}
-            />
-            <CheckpointFormDialog
-                open={formOpen}
-                onOpenChange={(open) => {
-                    setFormOpen(open)
-                    if (!open) setEditingCheckpoint(null)
-                }}
-                inspectionId={inspectionId}
-                checkpoint={editingCheckpoint}
-                onSuccess={invalidate}
-            />
-            <CheckpointAttachmentsDialog
-                open={!!attachmentsCheckpoint}
-                onOpenChange={(open) => {
-                    if (!open) setAttachmentsCheckpoint(null)
-                }}
-                checkpoint={attachmentsCheckpoint}
-                onSuccess={invalidate}
-            />
-        </DashboardPage>
+        </li>
     )
 }
diff --git a/apps/dashboard/app/(authenticated)/sales/inspections/[id]/layout.tsx b/apps/dashboard/app/(authenticated)/sales/inspections/[id]/layout.tsx
index 0febe70..7d61449 100644
--- a/apps/dashboard/app/(authenticated)/sales/inspections/[id]/layout.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/inspections/[id]/layout.tsx
@@ -2,6 +2,7 @@ import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
 import { getServerApi } from '@garage/api/server'
 import { InspectionActions } from '@/modules/inspections/inspection-actions'
 import { InspectionProvider } from '@/modules/inspections/inspection-context'
+import { ShareDocumentButton } from '@/shared/components/share-document-button'
 import React from 'react'
 
 export default async function layout(props: {
@@ -23,7 +24,12 @@ export default async function layout(props: {
                 title={title}
                 description={orderNumber ? `Order: ${orderNumber}` : undefined}
                 backHref="/sales/inspections"
-                actions={<InspectionActions inspectionId={id} status={status} />}
+                actions={
+                    <div className="flex items-center gap-2">
+                        <ShareDocumentButton type="inspection" id={id} />
+                        <InspectionActions inspectionId={id} status={status} />
+                    </div>
+                }
                 tabs={[
                     {
                         href: `/sales/inspections/${id}`,
diff --git a/apps/dashboard/app/(authenticated)/sales/inspections/[id]/page.tsx b/apps/dashboard/app/(authenticated)/sales/inspections/[id]/page.tsx
index 253233e..c1244e6 100644
--- a/apps/dashboard/app/(authenticated)/sales/inspections/[id]/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/inspections/[id]/page.tsx
@@ -1,5 +1,6 @@
 import { getServerApi } from '@garage/api/server'
 import { InspectionGeneralInfo } from '@/modules/inspections/inspection-general-info'
+import { InspectionDetailHeader } from '@/modules/inspections/inspection-detail-header'
 import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
 
 export default async function page(props: { params: Promise<{ id: string }> }) {
@@ -11,8 +12,11 @@ export default async function page(props: { params: Promise<{ id: string }> }) {
         return <div className="text-muted-foreground">Inspection not found.</div>
     }
 
+    const data = inspection.data as { title?: string }
+
     return (
         <DashboardPage header={null}>
+            <InspectionDetailHeader inspectionId={id} title={data.title} />
             <InspectionGeneralInfo inspection={inspection.data} />
         </DashboardPage>
     )
diff --git a/apps/dashboard/app/(authenticated)/sales/inspections/page.tsx b/apps/dashboard/app/(authenticated)/sales/inspections/page.tsx
index 40e0942..3d775c0 100644
--- a/apps/dashboard/app/(authenticated)/sales/inspections/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/inspections/page.tsx
@@ -1,46 +1,125 @@
 "use client"
 
+import { useState } from "react"
 import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
 import FormDialog from "@/shared/components/form-dialog"
 import { InspectionForm } from "@/modules/inspections/inspection-form"
-import { INSPECTION_ROUTES } from "@garage/api"
+import { InspectionFromTemplateForm } from "@/modules/inspections/inspection-from-template-form"
+import { InspectionRowActions } from "@/modules/inspections/inspection-row-actions"
+import { Button } from "@/shared/components/ui/button"
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from "@/shared/components/ui/dialog"
+import { ScrollArea } from "@/shared/components/ui/scroll-area"
+import { INSPECTION_ROUTES, InspectionStatus } from "@garage/api"
 import type { InspectionsClient } from "@garage/api"
+import Link from "next/link"
+import { Car, ClipboardList, ListChecks, UserIcon } from "lucide-react"
 import { useRouter } from "next/navigation"
+import { RelationLink } from "@/shared/components/relation-link"
+import { getFullName } from "@/shared/utils/getFullName"
+import { getVehicleLabel } from "@/modules/vehicles/utils/getVehicleLabel"
+
+const STATUS_BADGE_CLASS: Record<string, string> = {
+    in_progress: "bg-amber-100 text-amber-800",
+    completed: "bg-emerald-100 text-emerald-800",
+    cancelled: "bg-rose-100 text-rose-800",
+}
+
+const STATUS_LABEL: Record<string, string> = {
+    in_progress: "In Progress",
+    completed: "Completed",
+    cancelled: "Cancelled",
+}
 
 export default function InspectionsPage() {
     const router = useRouter()
+    const [fromTemplateOpen, setFromTemplateOpen] = useState(false)
 
     return (
         <ResourcePage<InspectionsClient>
             pageTitle="Inspections"
             routeKey={INSPECTION_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search inspections..."
+            statusFilter={{ statuses: InspectionStatus }}
             getClient={(api) => api.inspections}
             onRowClick={(row) => router.push(`/sales/inspections/${(row as any).id}`)}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
-                    <FormDialog title="Inspection">
-                        {(resourceId) => (
-                            <InspectionForm
-                                resourceId={resourceId}
-                                initialData={selectedItem}
-                                onSuccess={invalidateQuery}
-                            />
-                        )}
-                    </FormDialog>
+                    <div className="flex items-center gap-2">
+                        <Button variant="outline" size="sm" asChild>
+                            <Link href="/settings/inspection-templates">
+                                <ListChecks className="size-4" />
+                                Manage templates
+                            </Link>
+                        </Button>
+                        <Button size="sm" variant="default" onClick={() => setFromTemplateOpen(true)}>
+                            <ClipboardList className="size-4" />
+                            New from template
+                        </Button>
+                        <FormDialog title="Inspection" classNames={{ trigger: "" }}>
+                            {(resourceId) => (
+                                <InspectionForm
+                                    resourceId={resourceId}
+                                    initialData={selectedItem}
+                                    onSuccess={invalidateQuery}
+                                />
+                            )}
+                        </FormDialog>
+                        <Dialog open={fromTemplateOpen} onOpenChange={setFromTemplateOpen}>
+                            <DialogContent className="min-w-2xl">
+                                <DialogHeader>
+                                    <DialogTitle className="text-2xl font-bold">
+                                        New inspection from template
+                                    </DialogTitle>
+                                </DialogHeader>
+                                <ScrollArea className="max-h-[80vh] px-4">
+                                    <InspectionFromTemplateForm
+                                        onSuccess={(id) => {
+                                            setFromTemplateOpen(false)
+                                            invalidateQuery()
+                                            if (id) router.push(`/sales/inspections/${id}/checkpoints`)
+                                        }}
+                                    />
+                                </ScrollArea>
+                            </DialogContent>
+                        </Dialog>
+                    </div>
                 ),
             })}
-            columns={({ actionsColumn }) => [
+            columns={({ openEdit, deleteItem }) => [
                 {
                     accessorKey: "title",
                     header: ({ column }) => <ColumnHeader column={column} title="Title" />,
+                    cell: ({ row }) => {
+                        const r = row.original as any
+                        return (
+                            <div className="flex flex-col">
+                                <span className="font-medium">{r.title ?? "—"}</span>
+                                {r.order_number && (
+                                    <span className="text-xs text-muted-foreground">{r.order_number}</span>
+                                )}
+                            </div>
+                        )
+                    },
                 },
                 {
                     accessorKey: "customer",
                     header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
                     cell: ({ row }) => {
                         const c = (row.original as any).customer
-                        return c ? `${c.first_name ?? ""} ${c.last_name ?? ""}`.trim() : "—"
+                        return (
+                            <RelationLink
+                                href={c?.id ? `/sales/customers/${c.id}` : null}
+                                icon={UserIcon}
+                                label={getFullName(c)}
+                            />
+                        )
                     },
                 },
                 {
@@ -48,27 +127,51 @@ export default function InspectionsPage() {
                     header: ({ column }) => <ColumnHeader column={column} title="Vehicle" />,
                     cell: ({ row }) => {
                         const v = (row.original as any).vehicle
-                        return v ? `${v.make ?? ""} ${v.model ?? ""}`.trim() : "—"
+                        return (
+                            <RelationLink
+                                href={v?.id ? `/sales/vehicles/${v.id}` : null}
+                                icon={Car}
+                                label={getVehicleLabel(v as any)}
+                                meta={v?.license_plate}
+                            />
+                        )
                     },
                 },
                 {
                     accessorKey: "inspection_category",
                     header: ({ column }) => <ColumnHeader column={column} title="Category" />,
-                    cell: ({ row }) => (row.original as any).inspection_category?.name ?? "—",
+                    cell: ({ row }) => {
+                        const ic = (row.original as any).inspection_category
+                        return ic?.inspection_name ?? ic?.name ?? "—"
+                    },
                 },
                 {
                     accessorKey: "status",
                     header: ({ column }) => <ColumnHeader column={column} title="Status" />,
                     cell: ({ row }) => {
-                        const status = (row.original as any).status
+                        const status = (row.original as any).status as string | undefined
+                        if (!status) return "—"
+                        const cls = STATUS_BADGE_CLASS[status] ?? "bg-gray-100 text-gray-700"
                         return (
-                            <span className={status === "completed" ? "text-green-600" : "text-yellow-600"}>
-                                {status ?? "—"}
+                            <span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${cls}`}>
+                                {STATUS_LABEL[status] ?? status}
                             </span>
                         )
                     },
                 },
-                actionsColumn(),
+                {
+                    id: "actions",
+                    header: () => <span className="sr-only">Actions</span>,
+                    enableSorting: false,
+                    enableHiding: false,
+                    cell: ({ row }) => (
+                        <InspectionRowActions
+                            inspection={row.original as any}
+                            onEdit={() => openEdit(row.original as any)}
+                            onDelete={() => deleteItem(String((row.original as any).id))}
+                        />
+                    ),
+                },
             ]}
         />
     )
diff --git a/apps/dashboard/app/(authenticated)/sales/invoice/[id]/layout.tsx b/apps/dashboard/app/(authenticated)/sales/invoice/[id]/layout.tsx
index ea5d981..14b4bb0 100644
--- a/apps/dashboard/app/(authenticated)/sales/invoice/[id]/layout.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/invoice/[id]/layout.tsx
@@ -5,6 +5,7 @@ import { InvoiceProvider } from '@/modules/invoices/invoice-context'
 import { ReceiptIcon } from 'lucide-react'
 import React from 'react'
 import InvoiceStatusBadge from '@/modules/invoices/invoice-status-badge'
+import { ShareDocumentButton } from '@/shared/components/share-document-button'
 
 export default async function InvoiceDetailLayout(props: { params: Promise<{ id: string }>, children: React.ReactNode }) {
     const { id } = await props.params
@@ -24,6 +25,7 @@ export default async function InvoiceDetailLayout(props: { params: Promise<{ id:
                     <div className="flex space-x-2 items-center">
 
                         <InvoiceStatusBadge invoice={{id, status:data?.status}} />
+                        <ShareDocumentButton type="invoice" id={id} />
                         <InvoiceActions invoiceId={id} />
                     </div>
                 }
diff --git a/apps/dashboard/app/(authenticated)/sales/invoice/page.tsx b/apps/dashboard/app/(authenticated)/sales/invoice/page.tsx
index 780427d..fd06c25 100644
--- a/apps/dashboard/app/(authenticated)/sales/invoice/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/invoice/page.tsx
@@ -1,14 +1,17 @@
 "use client"
 
+import { Car, 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 { formatCurrency, formatDate, formatEnum } from "@/shared/utils/formatters"
-import { INVOICE_ROUTES } from "@garage/api"
+import { formatDate, formatEnum } from "@/shared/utils/formatters"
+import { INVOICE_ROUTES, InvoiceStatus } from "@garage/api"
 import type { InvoicesClient } from "@garage/api"
+import { Money } from "@/shared/components/money"
+import { RelationLink } from "@/shared/components/relation-link"
 
 type InvoiceItem = {
     id: number
@@ -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
@@ -82,6 +86,9 @@ export default function InvoicesPage() {
         <ResourcePage<InvoicesClient>
             pageTitle="Invoices"
             routeKey={INVOICE_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search invoices..."
+            statusFilter={{ statuses: InvoiceStatus }}
             getClient={(api) => api.invoices}
             onRowClick={(row) => router.push(`/sales/invoice/${(row as any).id}`)}
             headerProps={({ selectedItem, invalidateQuery }) => ({
@@ -133,15 +140,13 @@ export default function InvoicesPage() {
                     header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
                     cell: ({ row }) => {
                         const item = row.original as unknown as InvoiceItem
-                        const customerLabel = getCustomerLabel(item)
-
                         return (
-                            <div className="min-w-[190px]">
-                                <p className="font-medium leading-none">{customerLabel}</p>
-                                <p className="mt-1 text-xs text-muted-foreground">
-                                    {item.customer?.phone || item.customer?.company_name || "—"}
-                                </p>
-                            </div>
+                            <RelationLink
+                                href={item.customer?.id ? `/sales/customers/${item.customer.id}` : null}
+                                icon={UserIcon}
+                                label={getCustomerLabel(item)}
+                                meta={item.customer?.phone}
+                            />
                         )
                     },
                 },
@@ -150,14 +155,14 @@ export default function InvoicesPage() {
                     header: ({ column }) => <ColumnHeader column={column} title="Vehicle" />,
                     cell: ({ row }) => {
                         const item = row.original as unknown as InvoiceItem
-
+                        const vehicleId = (item.vehicle as any)?.id
                         return (
-                            <div className="min-w-[220px]">
-                                <p className="font-medium leading-none">{getVehicleLabel(item)}</p>
-                                <p className="mt-1 text-xs text-muted-foreground">
-                                    {item.vehicle?.license_plate || "—"}
-                                </p>
-                            </div>
+                            <RelationLink
+                                href={vehicleId ? `/sales/vehicles/${vehicleId}` : null}
+                                icon={Car}
+                                label={getVehicleLabel(item)}
+                                meta={item.vehicle?.license_plate}
+                            />
                         )
                     },
                 },
@@ -224,10 +229,10 @@ export default function InvoicesPage() {
                         return (
                             <div className="min-w-[150px]">
                                 <p className="font-medium leading-none">
-                                    Total: {formatCurrency(item.total ?? 0)}
+                                    Total: {<Money value={item.total ?? 0} />}
                                 </p>
                                 <p className="mt-1 text-xs text-muted-foreground">
-                                    Due: {formatCurrency(item.balance_due ?? 0)}
+                                    Due: {<Money value={item.balance_due ?? 0} />}
                                 </p>
                             </div>
                         )
diff --git a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/appointments/page.tsx b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/appointments/page.tsx
index 4e577d8..f470caf 100644
--- a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/appointments/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/appointments/page.tsx
@@ -7,11 +7,13 @@ import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
 import FormDialog from "@/shared/components/form-dialog"
 import { AppointmentForm } from "@/modules/appointments/appointment-form"
-import { APPOINTMENT_ROUTES } from "@garage/api"
+import { APPOINTMENT_ROUTES, AppointmentStatus } from "@garage/api"
 import type { AppointmentsClient } from "@garage/api"
 import { CalendarCheck2Icon, ClockIcon } from "lucide-react"
 import { Badge } from "@/shared/components/ui/badge"
 import { useJobCard } from "@/modules/job-cards/job-card-context"
+import { getFullName } from "@/shared/utils/getFullName"
+import { getVehicleLabel } from "@/modules/vehicles/utils/getVehicleLabel"
 
 const STATUS_COLORS: Record<string, string> = {
     requested: "bg-yellow-100 text-yellow-800",
@@ -42,13 +44,34 @@ export default function JobCardAppointmentsPage({
         router.replace(`${pathname}?${params.toString()}`)
     }, [pathname, router, searchParams])
 
-    const defaultJobCard = jobCard
-        ? { value: String((jobCard as any).id), label: (jobCard as any).label || (jobCard as any).title || `Job Card` }
+    const jc = jobCard as any
+    const defaultJobCard = jc
+        ? { value: String(jc.id), label: jc.label || jc.title || `Job Card` }
         : null
 
+    const appointmentDefaults = jc
+        ? {
+              job_card_id: jc.id,
+              job_card_title: jc.title || `Job Card #${jc.id}`,
+              customer_id: jc.customer?.id,
+              customer_name: getFullName(jc.customer),
+              vehicle_id: jc.vehicle?.id,
+              vehicle_name: getVehicleLabel(jc.vehicle),
+              service_writer_id: jc.service_writer?.id,
+              service_writer_name: getFullName(jc.service_writer),
+              technician_id: jc.primary_technician?.id,
+              technician_name: getFullName(jc.primary_technician),
+              department_id: jc.department?.id,
+              department_name: jc.department?.name,
+          }
+        : { job_card: defaultJobCard }
+
     return (
         <ResourcePage<AppointmentsClient>
             routeKey={APPOINTMENT_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search appointments..."
+            statusFilter={{ statuses: AppointmentStatus }}
             getClient={(api) => api.appointments}
             extraParams={{ job_card_id: jobCardId }}
             header={null}
@@ -59,8 +82,8 @@ export default function JobCardAppointmentsPage({
                         {(resourceId) => (
                             <AppointmentForm
                                 resourceId={resourceId}
-                                initialData={selectedItem ?? { job_card: defaultJobCard }}
-                                onSuccess={() => { closeDialog(); invalidateQuery() }}
+                                initialData={selectedItem ?? appointmentDefaults}
+                                onSuccess={() => { closeDialog(); invalidateQuery(); router.refresh() }}
                             />
                         )}
                     </FormDialog>
diff --git a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/attachments/page.tsx b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/attachments/page.tsx
index a1dc17f..0317014 100644
--- a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/attachments/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/attachments/page.tsx
@@ -10,7 +10,7 @@ import { useAuthApi } from "@/shared/useApi"
 import { confirm } from "@/shared/components/confirm-dialog"
 import { Button } from "@/shared/components/ui/button"
 import { Card, CardContent } from "@/shared/components/ui/card"
-import { JOB_CARD_ROUTES } from "@garage/api"
+import { ApiError, JOB_CARD_ROUTES } from "@garage/api"
 import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
 import { useJobCard } from "@/modules/job-cards/job-card-context"
 import { CONSTANTS } from "@/config/constants"
@@ -22,6 +22,62 @@ function getFileIcon(mimeType?: string) {
     return FileIcon
 }
 
+const ALLOWED_HINT = "Allowed: images, PDF, Office docs, audio, video."
+
+function describeAttachmentError(rawMessage: string, filename: string): string {
+    const msg = rawMessage.toLowerCase()
+    if (msg.includes("must be a file of type") || msg.includes("mimes")) {
+        return `${filename}: unsupported file type. ${ALLOWED_HINT}`
+    }
+    if (msg.includes("may not be greater") || msg.includes("max")) {
+        return `${filename}: exceeds 5 MB limit.`
+    }
+    if (msg.includes("must be a file")) {
+        return `${filename}: invalid file.`
+    }
+    return `${filename}: ${rawMessage}`
+}
+
+function showUploadError(err: unknown, files: File[]) {
+    if (!(err instanceof ApiError)) {
+        toast.error("Failed to upload attachment(s)")
+        return
+    }
+
+    const validation = err.validationErrors
+    if (!validation || Object.keys(validation).length === 0) {
+        toast.error(err.payload?.message ?? "Failed to upload attachment(s)")
+        return
+    }
+
+    const messages: string[] = []
+    for (const [key, msgs] of Object.entries(validation)) {
+        const firstMsg = Array.isArray(msgs) ? msgs[0] : String(msgs)
+        if (!firstMsg) continue
+
+        const match = key.match(/^attachments\.(\d+)$/)
+        if (match) {
+            const idx = Number(match[1])
+            const filename = files[idx]?.name ?? `File #${idx + 1}`
+            messages.push(describeAttachmentError(firstMsg, filename))
+        } else if (key === "attachments") {
+            messages.push(firstMsg)
+        } else {
+            messages.push(firstMsg)
+        }
+    }
+
+    if (messages.length === 0) {
+        toast.error(err.payload?.message ?? "Failed to upload attachment(s)")
+        return
+    }
+
+    const shown = messages.slice(0, 3)
+    const extra = messages.length - shown.length
+    shown.forEach((m) => toast.error(m))
+    if (extra > 0) toast.error(`...and ${extra} more`)
+}
+
 export default function JobCardAttachmentsPage() {
     const { id: jobCardId } = useParams<{ id: string }>()
     const api = useAuthApi()
@@ -66,18 +122,19 @@ export default function JobCardAttachmentsPage() {
         const files = e.target.files
         if (!files || files.length === 0) return
 
+        const fileList = Array.from(files)
         setIsUploading(true)
-        const promise = api.jobCards.addAttachment(jobCardId, Array.from(files))
-        toast.promise(promise, {
-            loading: "Uploading attachment(s)...",
-            success: "Attachment(s) uploaded successfully",
-            error: "Failed to upload attachment(s)",
-        })
+        const loadingToast = toast.loading("Uploading attachment(s)...")
 
         try {
-            await promise
+            await api.jobCards.addAttachment(jobCardId, fileList)
+            toast.dismiss(loadingToast)
+            toast.success("Attachment(s) uploaded successfully")
             queryClient.invalidateQueries({ queryKey })
             startRefreshTransition(() => router.refresh())
+        } catch (err) {
+            toast.dismiss(loadingToast)
+            showUploadError(err, fileList)
         } finally {
             setIsUploading(false)
             if (fileInputRef.current) {
diff --git a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/bills/page.tsx b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/bills/page.tsx
index 8fc5868..090b2ef 100644
--- a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/bills/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/bills/page.tsx
@@ -6,9 +6,12 @@ import { Badge } from "@/shared/components/ui/badge"
 import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
 import { BillForm } from "@/modules/bills/bill-form"
-import { BILL_ROUTES } from "@garage/api"
+import { BILL_ROUTES, BillStatus } from "@garage/api"
 import type { BillsClient } from "@garage/api"
 import { useJobCard } from "@/modules/job-cards/job-card-context"
+import { RelationLink } from "@/shared/components/relation-link"
+import { Building2, FileTextIcon } from "lucide-react"
+import { getFullName } from "@/shared/utils/getFullName"
 
 export default function JobCardBillsPage({
     params,
@@ -25,6 +28,9 @@ export default function JobCardBillsPage({
     return (
         <ResourcePage<BillsClient>
             routeKey={BILL_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search bills..."
+            statusFilter={{ statuses: BillStatus }}
             getClient={(api) => api.bills}
             extraParams={{ job_card_id: jobCardId }}
             header={null}
@@ -46,7 +52,16 @@ export default function JobCardBillsPage({
                 {
                     accessorKey: "bill_number",
                     header: ({ column }) => <ColumnHeader column={column} title="Bill #" />,
-                    cell: ({ row }) => (row.original as any).bill_number || "—",
+                    cell: ({ row }) => {
+                        const item = row.original as any
+                        return (
+                            <RelationLink
+                                href={item.id ? `/purchase/bill/${item.id}` : null}
+                                icon={FileTextIcon}
+                                label={item.bill_number}
+                            />
+                        )
+                    },
                 },
                 {
                     accessorKey: "title",
@@ -55,7 +70,16 @@ export default function JobCardBillsPage({
                 {
                     accessorKey: "vendor_name",
                     header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
-                    cell: ({ row }) => (row.original as any).vendor_name || "—",
+                    cell: ({ row }) => {
+                        const item = row.original as any
+                        return (
+                            <RelationLink
+                                href={item.vendor?.id ? `/purchase/vendor/${item.vendor.id}` : null}
+                                icon={Building2}
+                                label={item.vendor?.company_name || getFullName(item.vendor) || item.vendor_name}
+                            />
+                        )
+                    },
                 },
                 {
                     accessorKey: "bill_date",
diff --git a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/expense-items/page.tsx b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/expense-items/page.tsx
index e9bc333..7df0650 100644
--- a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/expense-items/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/expense-items/page.tsx
@@ -44,6 +44,7 @@ export default function JobCardExpenseItemsPage({
     const { data, isLoading } = useQuery({
         queryKey,
         queryFn: () => api.jobCards.getExpenseItems(jobCardId),
+        staleTime: 30_000,
     })
 
     const rows = (data as any)?.data ?? []
diff --git a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/inspections/page.tsx b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/inspections/page.tsx
index 59d2388..75c5918 100644
--- a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/inspections/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/inspections/page.tsx
@@ -4,10 +4,14 @@ import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
 import FormDialog from "@/shared/components/form-dialog"
 import { InspectionForm } from "@/modules/inspections/inspection-form"
-import { INSPECTION_ROUTES } from "@garage/api"
+import { INSPECTION_ROUTES, InspectionStatus } from "@garage/api"
 import type { InspectionsClient } from "@garage/api"
 import { useRouter } from "next/navigation"
 import { useJobCard } from "@/modules/job-cards/job-card-context"
+import { RelationLink } from "@/shared/components/relation-link"
+import { Car, UserIcon } from "lucide-react"
+import { getFullName } from "@/shared/utils/getFullName"
+import { getVehicleLabel } from "@/modules/vehicles/utils/getVehicleLabel"
 
 export default function InspectionsPage() {
     const router = useRouter()
@@ -17,6 +21,9 @@ export default function InspectionsPage() {
             pageTitle="Inspections"
             extraParams={{job_card_id: jobCard?.id}}
             routeKey={INSPECTION_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search inspections..."
+            statusFilter={{ statuses: InspectionStatus }}
             getClient={(api) => api.inspections}
             onRowClick={(row) => router.push(`/sales/inspections/${(row as any).id}`)}
             headerProps={({ selectedItem, invalidateQuery }) => ({
@@ -42,7 +49,13 @@ export default function InspectionsPage() {
                     header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
                     cell: ({ row }) => {
                         const c = (row.original as any).customer
-                        return c ? `${c.first_name ?? ""} ${c.last_name ?? ""}`.trim() : "—"
+                        return (
+                            <RelationLink
+                                href={c?.id ? `/sales/customers/${c.id}` : null}
+                                icon={UserIcon}
+                                label={getFullName(c)}
+                            />
+                        )
                     },
                 },
                 {
@@ -50,7 +63,14 @@ export default function InspectionsPage() {
                     header: ({ column }) => <ColumnHeader column={column} title="Vehicle" />,
                     cell: ({ row }) => {
                         const v = (row.original as any).vehicle
-                        return v ? `${v.make ?? ""} ${v.model ?? ""}`.trim() : "—"
+                        return (
+                            <RelationLink
+                                href={v?.id ? `/sales/vehicles/${v.id}` : null}
+                                icon={Car}
+                                label={getVehicleLabel(v as any)}
+                                meta={v?.license_plate}
+                            />
+                        )
                     },
                 },
                 {
diff --git a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/layout.tsx b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/layout.tsx
index 9b7d9d4..e3dfdc3 100644
--- a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/layout.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/layout.tsx
@@ -16,7 +16,7 @@ export default async function JobCardDetailLayout(props: { params: Promise<{ id:
 
     const title = jobCard?.title || 'Job Card Details'
     const status = jobCard?.status || 'draft'
-    const docs = jobCard?.documents
+    const attachmentsCount = jobCard?.attachment_files?.length ?? jobCard?.documents?.length ?? 0
 
     return (
         <JobCardProvider jobCard={{ ...jobCard }}>
@@ -55,7 +55,7 @@ export default async function JobCardDetailLayout(props: { params: Promise<{ id:
                     // TODO: Needs refactor from API side then refactor in frontend
                     {
                         href: `/sales/job-cards/${id}/attachments`,
-                        label: `Attachments (${docs?.length || 0})`
+                        label: `Attachments (${attachmentsCount})`
                     },
 
                     {
diff --git a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/page.tsx b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/page.tsx
index 99cfd93..9e5abfb 100644
--- a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/page.tsx
@@ -1,21 +1,10 @@
-import { getServerApi } from '@garage/api/server'
 import { JobCardGeneralInfo } from '@/modules/job-cards/job-card-general-info'
 import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
-import type { JobCardShowData } from '@garage/api'
-
-export default async function JobCardDetailPage(props: { params: Promise<{ id: string }> }) {
-    const { id } = await props.params
-    const api = await getServerApi()
-    const response = await api.jobCards.show(id)
-    const data = response.data
-
-    if (!data) {
-        return <div className="text-muted-foreground">Job card not found.</div>
-    }
 
+export default async function JobCardDetailPage() {
     return (
         <DashboardPage header={null}>
-            <JobCardGeneralInfo jobCard={data} />
+            <JobCardGeneralInfo />
         </DashboardPage>
     )
 }
diff --git a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/parts/page.tsx b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/parts/page.tsx
index bf52d14..6a0ef4a 100644
--- a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/parts/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/parts/page.tsx
@@ -44,6 +44,7 @@ export default function JobCardPartsPage({
     const { data, isLoading } = useQuery({
         queryKey,
         queryFn: () => api.jobCards.getParts(jobCardId),
+        staleTime: 30_000,
     })
 
     const rows = (data as any)?.data ?? []
diff --git a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/purchase-orders/page.tsx b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/purchase-orders/page.tsx
index c335bb2..44db609 100644
--- a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/purchase-orders/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/purchase-orders/page.tsx
@@ -8,6 +8,9 @@ import { PurchaseOrderForm } from "@/modules/purchase-orders/purchase-order-form
 import { PURCHASE_ORDER_ROUTES } from "@garage/api"
 import type { PurchaseOrdersClient } from "@garage/api"
 import { useJobCard } from "@/modules/job-cards/job-card-context"
+import { RelationLink } from "@/shared/components/relation-link"
+import { Building2, FileTextIcon } from "lucide-react"
+import { getFullName } from "@/shared/utils/getFullName"
 
 export default function JobCardPurchaseOrdersPage({
     params,
@@ -24,6 +27,8 @@ export default function JobCardPurchaseOrdersPage({
     return (
         <ResourcePage<PurchaseOrdersClient>
             routeKey={PURCHASE_ORDER_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search purchase orders..."
             getClient={(api) => api.purchaseOrders}
             extraParams={{ job_card_id: jobCardId }}
             header={null}
@@ -46,7 +51,16 @@ export default function JobCardPurchaseOrdersPage({
                 {
                     accessorKey: "order_number",
                     header: ({ column }) => <ColumnHeader column={column} title="Order #" />,
-                    cell: ({ row }) => (row.original as any).order_number || "—",
+                    cell: ({ row }) => {
+                        const item = row.original as any
+                        return (
+                            <RelationLink
+                                href={item.id ? `/purchase/purchase-order/${item.id}` : null}
+                                icon={FileTextIcon}
+                                label={item.order_number}
+                            />
+                        )
+                    },
                 },
                 {
                     accessorKey: "title",
@@ -55,7 +69,16 @@ export default function JobCardPurchaseOrdersPage({
                 {
                     accessorKey: "vendor_name",
                     header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
-                    cell: ({ row }) => (row.original as any).vendor_name || "—",
+                    cell: ({ row }) => {
+                        const item = row.original as any
+                        return (
+                            <RelationLink
+                                href={item.vendor?.id ? `/purchase/vendor/${item.vendor.id}` : null}
+                                icon={Building2}
+                                label={item.vendor?.company_name || getFullName(item.vendor) || item.vendor_name}
+                            />
+                        )
+                    },
                 },
                 {
                     accessorKey: "order_date",
diff --git a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/services/page.tsx b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/services/page.tsx
index 1f8accb..59bf6ed 100644
--- a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/services/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/services/page.tsx
@@ -46,6 +46,7 @@ export default function JobCardServicesPage({
     const { data, isLoading } = useQuery({
         queryKey,
         queryFn: () => api.jobCards.getServices(jobCardId),
+        staleTime: 30_000,
     })
 
     const rows = (data as any)?.data ?? []
diff --git a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/tasks/page.tsx b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/tasks/page.tsx
index 42d50ff..c198192 100644
--- a/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/tasks/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/job-cards/[id]/tasks/page.tsx
@@ -5,7 +5,7 @@ import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
 import FormDialog from "@/shared/components/form-dialog"
 import { TaskForm } from "@/modules/tasks/task-form"
-import { TASK_ROUTES } from "@garage/api"
+import { TASK_ROUTES, TaskStatus } from "@garage/api"
 import type { TasksClient } from "@garage/api"
 import { Badge } from "@/shared/components/ui/badge"
 import { useJobCard } from "@/modules/job-cards/job-card-context"
@@ -26,6 +26,9 @@ export default function JobCardTasksPage({
     return (
         <ResourcePage<TasksClient>
             routeKey={TASK_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search tasks..."
+            statusFilter={{ statuses: TaskStatus }}
             getClient={(api) => api.tasks}
             extraParams={{ job_card_id: jobCardId }}
             header={null}
diff --git a/apps/dashboard/app/(authenticated)/sales/job-cards/page.tsx b/apps/dashboard/app/(authenticated)/sales/job-cards/page.tsx
index 561465d..c51f8bc 100644
--- a/apps/dashboard/app/(authenticated)/sales/job-cards/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/job-cards/page.tsx
@@ -6,12 +6,9 @@ import FormDialog from '@/shared/components/form-dialog'
 import { JobCardForm } from '@/modules/job-cards/job-card-form'
 import { JOB_CARD_ROUTES, JobCardStatus } from '@garage/api'
 import type { JobCardsClient } from '@garage/api'
-import { Tabs, TabsList, TabsTrigger } from '@/shared/components/ui/tabs'
-import { ClipboardListIcon, SearchIcon } from 'lucide-react'
+import { ClipboardListIcon } from 'lucide-react'
 import { Badge } from '@/shared/components/ui/badge'
-import { Input } from '@/shared/components/ui/input'
 import { useRouter } from 'next/navigation'
-import { useState, useEffect, useMemo } from 'react'
 import { formatDate, formatEnum, formatNumber } from '@/shared/utils/formatters'
 import { useFilterParams } from '@/shared/hooks/use-filter-params'
 import { FilterDrawer, FilterTrigger } from '@/shared/components/filter-drawer'
@@ -37,30 +34,17 @@ const statusColorMap: Record<string, string> = {
 
 export default function JobCardsPage() {
     const router = useRouter()
-    const [searchInput, setSearchInput] = useState("")
-    const [search, setSearch] = useState("")
-    const [statusFilter, setStatusFilter] = useState<string>("check_in")
-
     const filter = useFilterParams(jobCardFilterConfig)
 
-    useEffect(() => {
-        const timer = setTimeout(() => setSearch(searchInput), 400)
-        return () => clearTimeout(timer)
-    }, [searchInput])
-
-    const extraParams = useMemo(() => {
-        const params: Record<string, unknown> = { ...filter.appliedParams }
-        if (search) params.search = search
-        if (statusFilter !== "all") params.status = statusFilter
-        return params
-    }, [filter.appliedParams, search, statusFilter])
-
     return (
         <>
             <ResourcePage<JobCardsClient>
                 routeKey={JOB_CARD_ROUTES.INDEX}
                 getClient={(api) => api.jobCards}
-                extraParams={extraParams}
+                searchable
+                searchPlaceholder="Search job cards..."
+                statusFilter={{ statuses: JobCardStatus }}
+                extraParams={filter.appliedParams}
                 onRowClick={(row) => router.push(`/sales/job-cards/${row.id}`)}
                 headerProps={({ selectedItem, invalidateQuery }) => ({
                     title: "Job Cards",
@@ -135,30 +119,6 @@ export default function JobCardsPage() {
                     },
                     actionsColumn(),
                 ]}
-
-                tableHeader={
-                    <div className="flex justify-between">
-                        <Tabs value={statusFilter} onValueChange={setStatusFilter}>
-                            <TabsList variant="line">
-                                <TabsTrigger value="all">All</TabsTrigger>
-                                {JobCardStatus.map((status) => (
-                                    <TabsTrigger key={status} value={status}>
-                                        {formatEnum(status)}
-                                    </TabsTrigger>
-                                ))}
-                            </TabsList>
-                        </Tabs>
-                        <div className="relative w-64">
-                            <SearchIcon className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-                            <Input
-                                placeholder="Search job cards..."
-                                value={searchInput}
-                                onChange={(e) => setSearchInput(e.target.value)}
-                                className="pl-8"
-                            />
-                        </div>
-                    </div>
-                }
             />
 
             <FilterDrawer
diff --git a/apps/dashboard/app/(authenticated)/sales/payment-received/page.tsx b/apps/dashboard/app/(authenticated)/sales/payment-received/page.tsx
index 9d852c8..0050794 100644
--- a/apps/dashboard/app/(authenticated)/sales/payment-received/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/payment-received/page.tsx
@@ -14,6 +14,7 @@ import {
     ClipboardListIcon,
 } from "lucide-react"
 import { getFullName } from "@/shared/utils/getFullName"
+import { RelationLink } from "@/shared/components/relation-link"
 
 type PaymentReceivedItem = {
     id: number
@@ -33,6 +34,8 @@ export default function PaymentReceivedPage() {
     return (
         <ResourcePage<{ list(query?: any): Promise<any>; destroy(id: string): Promise<any> }>
              routeKey={PAYMENT_RECEIVED_ROUTES.INDEX}
+             searchable
+             searchPlaceholder="Search payments..."
             getClient={(api) => ({
                 list: (query?: any) => api.paymentReceived.list(query),
                 destroy: (id: string) => api.paymentReceived.destroy(id),
@@ -67,12 +70,14 @@ export default function PaymentReceivedPage() {
                     accessorKey: "customer",
                     header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
                     cell: ({ row }) => {
-                        const item:any = row.original as unknown as PaymentReceivedItem
+                        const item: any = row.original as unknown as PaymentReceivedItem
+                        const customer = item.customer
                         return (
-                            <div className="flex items-center gap-2">
-                                <UserIcon className="h-4 w-4 text-muted-foreground" />
-                                <span>{getFullName(item.customer) || "—"}</span>
-                            </div>
+                            <RelationLink
+                                href={customer?.id ? `/sales/customers/${customer.id}` : null}
+                                icon={UserIcon}
+                                label={getFullName(customer) || item.customer_name}
+                            />
                         )
                     },
                 },
@@ -80,13 +85,14 @@ export default function PaymentReceivedPage() {
                     accessorKey: "job_card",
                     header: ({ column }) => <ColumnHeader column={column} title="Job Card" />,
                     cell: ({ row }) => {
-                        const item:any = row.original as unknown as PaymentReceivedItem
-                        const label = item.job_card?.title
+                        const item: any = row.original as unknown as PaymentReceivedItem
+                        const jobCard = item.job_card
                         return (
-                            <div className="flex items-center gap-2">
-                                <ClipboardListIcon className="h-4 w-4 text-muted-foreground" />
-                                <span>{label || "—"}</span>
-                            </div>
+                            <RelationLink
+                                href={jobCard?.id ? `/sales/job-cards/${jobCard.id}` : null}
+                                icon={ClipboardListIcon}
+                                label={jobCard?.title || item.job_card_name}
+                            />
                         )
                     },
                 },
diff --git a/apps/dashboard/app/(authenticated)/sales/vehicles/[id]/estimates/page.tsx b/apps/dashboard/app/(authenticated)/sales/vehicles/[id]/estimates/page.tsx
index 937b0b0..beb95b1 100644
--- a/apps/dashboard/app/(authenticated)/sales/vehicles/[id]/estimates/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/vehicles/[id]/estimates/page.tsx
@@ -8,8 +8,10 @@ import FormDialog from '@/shared/components/form-dialog'
 import { EstimateForm } from '@/modules/estimates/estimate-form'
 import { ESTIMATE_ROUTES } from '@garage/api'
 import type { EstimatesClient } from '@garage/api'
-import { FileTextIcon } from 'lucide-react'
+import { FileTextIcon, UserIcon } from 'lucide-react'
 import { useVehicle } from '@/modules/vehicles/vehicle-context'
+import { RelationLink } from '@/shared/components/relation-link'
+import { getFullName } from '@/shared/utils/getFullName'
 
 export default function VehicleEstimatesPage({ params }: { params: Promise<{ id: string }> }) {
     const { id: vehicleId } = use(params)
@@ -37,6 +39,8 @@ export default function VehicleEstimatesPage({ params }: { params: Promise<{ id:
             }
             pageTitle="Vehicle Estimates"
             routeKey={ESTIMATE_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search estimates..."
             getClient={(api) => api.estimates}
             extraParams={{ vehicle_id: vehicleId }}
             header={
@@ -63,6 +67,16 @@ export default function VehicleEstimatesPage({ params }: { params: Promise<{ id:
                 {
                     accessorKey: "customer_name",
                     header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
+                    cell: ({ row }) => {
+                        const item = row.original as any
+                        return (
+                            <RelationLink
+                                href={item.customer?.id ? `/sales/customers/${item.customer.id}` : null}
+                                icon={UserIcon}
+                                label={getFullName(item.customer) || item.customer_name}
+                            />
+                        )
+                    },
                 },
                 {
                     accessorKey: "date",
diff --git a/apps/dashboard/app/(authenticated)/sales/vehicles/page.tsx b/apps/dashboard/app/(authenticated)/sales/vehicles/page.tsx
index 08b4ebc..91c08a7 100644
--- a/apps/dashboard/app/(authenticated)/sales/vehicles/page.tsx
+++ b/apps/dashboard/app/(authenticated)/sales/vehicles/page.tsx
@@ -7,14 +7,14 @@ import type { ColumnDef } from '@tanstack/react-table'
 import FormDialog from '@/shared/components/form-dialog'
 import { ImportDataButton } from '@/shared/components/import-data-button'
 import { ExportDataButton } from '@/shared/components/export-data-button'
-import { DownloadSampleButton } from '@/shared/components/download-sample-button'
 import { useAuthApi } from '@/shared/useApi'
 import type { CrudResourceColumnHelpers, ResourceItem } from '@/shared/data-view/resource-page'
 import { VehicleForm } from '@/modules/vehicles/vehicle-form'
 import { VEHICLE_ROUTES } from '@garage/api'
 import type { VehiclesClient } from '@garage/api'
-import { CarIcon } from 'lucide-react'
+import { CarIcon, UserIcon } from 'lucide-react'
 import { getFullName } from '@/shared/utils/getFullName'
+import { RelationLink } from '@/shared/components/relation-link'
 
 export default function VehiclesPage() {
     const router = useRouter()
@@ -23,18 +23,19 @@ export default function VehiclesPage() {
         <ResourcePage<VehiclesClient>
             pageTitle="Vehicles"
             routeKey={VEHICLE_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search vehicles..."
             getClient={(api) => api.vehicles}
             onRowClick={(row) => router.push(`/sales/vehicles/${(row as any).id}`)}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
                     <div className='flex items-center gap-2'>
-                        <DownloadSampleButton
-                            onDownload={() => api.vehicles.downloadImportSample()}
-                            fileName='vehicles-import-sample'
-                        />
                         <ImportDataButton
                             onImport={(file) => api.vehicles.importData(file)}
                             onSuccess={invalidateQuery}
+                            entityLabel="Vehicles"
+                            onDownloadSample={() => api.vehicles.downloadImportSample()}
+                            sampleFileName='vehicles-import-sample'
                         />
                         <ExportDataButton
                             onExport={(filters) => api.vehicles.exportData(filters)}
@@ -80,8 +81,14 @@ export default function VehiclesPage() {
                     accessorKey: "customers",
                     header: ({ column }: any) => <ColumnHeader column={column} title="Customer" />,
                     cell: ({ row }: any) => {
-                        const val = (row.original as any).customers?.[0]
-                        return getFullName(val)
+                        const customer = (row.original as any).customers?.[0]
+                        return (
+                            <RelationLink
+                                href={customer?.id ? `/sales/customers/${customer.id}` : null}
+                                icon={UserIcon}
+                                label={getFullName(customer)}
+                            />
+                        )
                     },
                 } as any,
                 {
diff --git a/apps/dashboard/app/(authenticated)/settings/departments/page.tsx b/apps/dashboard/app/(authenticated)/settings/departments/page.tsx
index 8372c16..9001fac 100644
--- a/apps/dashboard/app/(authenticated)/settings/departments/page.tsx
+++ b/apps/dashboard/app/(authenticated)/settings/departments/page.tsx
@@ -55,6 +55,8 @@ export default function DepartmentsPage() {
         <ResourcePage<DepartmentsClient>
             pageTitle="Departments"
             routeKey={DEPARTMENT_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search departments..."
             getClient={(api) => api.departments}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
diff --git a/apps/dashboard/app/(authenticated)/settings/inspection-templates/[id]/page.tsx b/apps/dashboard/app/(authenticated)/settings/inspection-templates/[id]/page.tsx
new file mode 100644
index 0000000..5f07d38
--- /dev/null
+++ b/apps/dashboard/app/(authenticated)/settings/inspection-templates/[id]/page.tsx
@@ -0,0 +1,264 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import Link from "next/link"
+import { useParams } from "next/navigation"
+import { ChevronLeft, Pencil, Plus, Trash2 } from "lucide-react"
+import { toast } from "sonner"
+
+import { Button } from "@/shared/components/ui/button"
+import { Input } from "@/shared/components/ui/input"
+import { Textarea } from "@/shared/components/ui/textarea"
+import { Switch } from "@/shared/components/ui/switch"
+import { useAuthApi } from "@/shared/useApi"
+import { confirm } from "@/shared/components/confirm-dialog"
+import { prompt } from "@/shared/components/prompt-dialog"
+import { TemplateCheckpointEditDialog } from "@/modules/inspections/template-checkpoint-edit-dialog"
+import type {
+    InspectionTemplate,
+    InspectionTemplateSection,
+    InspectionTemplateCheckPoint,
+    InspectionSeverity,
+} from "@garage/api"
+
+const SEVERITY_BADGE: Record<InspectionSeverity, { label: string; cls: string }> = {
+    good: { label: "Good", cls: "bg-emerald-100 text-emerald-800" },
+    attention: { label: "Attention", cls: "bg-amber-100 text-amber-800" },
+    critical: { label: "Critical", cls: "bg-rose-100 text-rose-800" },
+    na: { label: "N/A", cls: "bg-slate-100 text-slate-700" },
+    not_inspected: { label: "Not inspected", cls: "bg-gray-100 text-gray-700" },
+}
+
+const RECORD_TYPE_LABEL: Record<string, string> = {
+    capture_photo: "Photo",
+    record_video: "Video",
+    record_audio: "Audio",
+    record_conditions: "0–100",
+    wire_frame: "Wireframe",
+    none: "No media",
+}
+
+export default function InspectionTemplateEditorPage() {
+    const params = useParams<{ id: string }>()
+    const id = params.id
+    const api = useAuthApi()
+    const [template, setTemplate] = useState<InspectionTemplate | null>(null)
+    const [loading, setLoading] = useState(true)
+
+    const [editing, setEditing] = useState<{
+        section: InspectionTemplateSection
+        checkpoint: InspectionTemplateCheckPoint | null
+    } | null>(null)
+
+    const load = useCallback(async () => {
+        setLoading(true)
+        try {
+            const res = await api.inspectionTemplates.show(id)
+            setTemplate(res.data)
+        } catch (e: any) {
+            toast.error(e?.message ?? "Failed to load template")
+        } finally {
+            setLoading(false)
+        }
+    }, [id])
+
+    useEffect(() => { load() }, [load])
+
+    const updateMeta = async (partial: Partial<InspectionTemplate>) => {
+        if (!template) return
+        try {
+            const res = await api.inspectionTemplates.update(template.id, partial)
+            setTemplate(res.data)
+        } catch (e: any) {
+            toast.error(e?.message ?? "Failed to save")
+        }
+    }
+
+    const addSection = async () => {
+        if (!template) return
+        const name = await prompt({
+            title: "New section",
+            label: "Section name",
+            placeholder: "e.g. Brakes",
+            confirmLabel: "Add section",
+        })
+        if (!name) return
+        const nextOrder = (template.sections?.length ?? 0) + 1
+        try {
+            await api.inspectionTemplates.createSection(template.id, { name, sort_order: nextOrder })
+            await load()
+        } catch (e: any) {
+            toast.error(e?.message ?? "Failed to add section")
+        }
+    }
+
+    const deleteSection = async (section: InspectionTemplateSection) => {
+        if (!template) return
+        const confirmed = await confirm({
+            title: `Delete section "${section.name}"?`,
+            description: "This will remove the section and all its checkpoints.",
+            confirmLabel: "Delete",
+            variant: "destructive",
+        })
+        if (!confirmed) return
+        try {
+            await api.inspectionTemplates.destroySection(template.id, section.id)
+            await load()
+        } catch (e: any) {
+            toast.error(e?.message ?? "Failed to delete section")
+        }
+    }
+
+    const renameSection = async (section: InspectionTemplateSection, name: string) => {
+        if (!template || name === section.name) return
+        try {
+            await api.inspectionTemplates.updateSection(template.id, section.id, { name })
+            await load()
+        } catch (e: any) {
+            toast.error(e?.message ?? "Failed to rename section")
+        }
+    }
+
+    const deleteCheckpoint = async (section: InspectionTemplateSection, cp: InspectionTemplateCheckPoint, e: React.MouseEvent) => {
+        e.stopPropagation()
+        if (!template) return
+        const confirmed = await confirm({
+            title: `Delete "${cp.name}"?`,
+            description: "This checkpoint will be removed from the template.",
+            confirmLabel: "Delete",
+            variant: "destructive",
+        })
+        if (!confirmed) return
+        try {
+            await api.inspectionTemplates.destroyCheckpoint(template.id, section.id, cp.id)
+            await load()
+        } catch (e: any) {
+            toast.error(e?.message ?? "Failed to delete checkpoint")
+        }
+    }
+
+    if (loading) return <div className="p-6 text-muted-foreground">Loading…</div>
+    if (!template) return <div className="p-6 text-muted-foreground">Template not found</div>
+
+    return (
+        <div className="p-6 space-y-6 max-w-4xl">
+            <div className="flex items-center gap-2">
+                <Link href="/settings/inspection-templates">
+                    <Button variant="ghost" size="sm"><ChevronLeft className="size-4 mr-1" /> Back</Button>
+                </Link>
+            </div>
+
+            <div className="rounded border p-4 space-y-3">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                    <div>
+                        <label className="text-xs text-muted-foreground">Name</label>
+                        <Input
+                            defaultValue={template.name}
+                            onBlur={(e) => e.currentTarget.value !== template.name && updateMeta({ name: e.currentTarget.value })}
+                        />
+                    </div>
+                    <div className="flex items-center gap-3 mt-5">
+                        <Switch
+                            checked={template.is_active}
+                            onCheckedChange={(checked) => updateMeta({ is_active: checked })}
+                        />
+                        <span className="text-sm">{template.is_active ? "Active" : "Inactive"}</span>
+                    </div>
+                </div>
+                <div>
+                    <label className="text-xs text-muted-foreground">Description</label>
+                    <Textarea
+                        defaultValue={template.description ?? ""}
+                        rows={2}
+                        onBlur={(e) => e.currentTarget.value !== (template.description ?? "") && updateMeta({ description: e.currentTarget.value })}
+                    />
+                </div>
+            </div>
+
+            <div className="flex items-center justify-between">
+                <h2 className="text-lg font-medium">Sections & Checkpoints</h2>
+                <Button onClick={addSection} size="sm"><Plus className="size-4 mr-1" /> Add section</Button>
+            </div>
+
+            <div className="space-y-4">
+                {(template.sections ?? []).length === 0 && (
+                    <div className="rounded border-dashed border p-6 text-center text-sm text-muted-foreground">
+                        No sections yet. Add one to start building the checklist.
+                    </div>
+                )}
+                {(template.sections ?? []).map((section) => (
+                    <div key={section.id} className="rounded border">
+                        <div className="flex items-center gap-2 px-3 py-2 bg-muted/40">
+                            <Input
+                                defaultValue={section.name}
+                                onBlur={(e) => renameSection(section, e.currentTarget.value)}
+                                className="max-w-md h-8"
+                            />
+                            <span className="text-xs text-muted-foreground">
+                                {(section.check_points ?? []).length} checkpoint{(section.check_points ?? []).length === 1 ? "" : "s"}
+                            </span>
+                            <div className="ml-auto flex items-center gap-1">
+                                <Button size="sm" variant="ghost" onClick={() => setEditing({ section, checkpoint: null })}>
+                                    <Plus className="size-4 mr-1" /> Checkpoint
+                                </Button>
+                                <Button size="sm" variant="ghost" onClick={() => deleteSection(section)}>
+                                    <Trash2 className="size-4 text-red-600" />
+                                </Button>
+                            </div>
+                        </div>
+                        <div className="divide-y">
+                            {(section.check_points ?? []).length === 0 && (
+                                <div className="p-3 text-sm text-muted-foreground">No checkpoints in this section.</div>
+                            )}
+                            {(section.check_points ?? []).map((cp) => {
+                                const sev = SEVERITY_BADGE[cp.severity_default] ?? SEVERITY_BADGE.not_inspected
+                                return (
+                                    <button
+                                        type="button"
+                                        key={cp.id}
+                                        onClick={() => setEditing({ section, checkpoint: cp })}
+                                        className="w-full text-left flex items-center gap-3 px-3 py-2 hover:bg-muted/30 transition"
+                                    >
+                                        <span className="text-xs text-muted-foreground w-6 text-right">
+                                            {cp.sort_order}
+                                        </span>
+                                        <span className="flex-1 min-w-0 truncate text-sm font-medium">
+                                            {cp.name}
+                                        </span>
+                                        <span className="text-xs text-muted-foreground hidden sm:inline-block">
+                                            {RECORD_TYPE_LABEL[cp.record_type] ?? cp.record_type}
+                                        </span>
+                                        <span className={`text-xs rounded-full px-2 py-0.5 ${sev.cls}`}>
+                                            {sev.label}
+                                        </span>
+                                        <Pencil className="size-3.5 text-muted-foreground" />
+                                        <button
+                                            type="button"
+                                            onClick={(e) => deleteCheckpoint(section, cp, e)}
+                                            className="text-red-600 hover:text-red-700"
+                                            aria-label="Delete checkpoint"
+                                        >
+                                            <Trash2 className="size-4" />
+                                        </button>
+                                    </button>
+                                )
+                            })}
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {editing && (
+                <TemplateCheckpointEditDialog
+                    open={!!editing}
+                    onOpenChange={(o) => { if (!o) setEditing(null) }}
+                    templateId={template.id}
+                    sectionId={editing.section.id}
+                    checkpoint={editing.checkpoint}
+                    nextSortOrder={(editing.section.check_points?.length ?? 0) + 1}
+                    onSaved={load}
+                />
+            )}
+        </div>
+    )
+}
diff --git a/apps/dashboard/app/(authenticated)/settings/inspection-templates/page.tsx b/apps/dashboard/app/(authenticated)/settings/inspection-templates/page.tsx
new file mode 100644
index 0000000..77771fe
--- /dev/null
+++ b/apps/dashboard/app/(authenticated)/settings/inspection-templates/page.tsx
@@ -0,0 +1,157 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import Link from "next/link"
+import { Copy, Pencil, Plus, Trash2 } from "lucide-react"
+import { toast } from "sonner"
+
+import { Button } from "@/shared/components/ui/button"
+import { Input } from "@/shared/components/ui/input"
+import { useAuthApi } from "@/shared/useApi"
+import { confirm } from "@/shared/components/confirm-dialog"
+import type { InspectionTemplate } from "@garage/api"
+
+export default function InspectionTemplatesPage() {
+    const api = useAuthApi()
+    const [items, setItems] = useState<InspectionTemplate[]>([])
+    const [search, setSearch] = useState("")
+    const [loading, setLoading] = useState(true)
+    const [creating, setCreating] = useState(false)
+    const [newName, setNewName] = useState("")
+
+    const load = async () => {
+        setLoading(true)
+        try {
+            const res = await api.inspectionTemplates.list(search ? { search } : undefined)
+            setItems(res.data ?? [])
+        } catch (e: any) {
+            toast.error(e?.message ?? "Failed to load templates")
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    useEffect(() => {
+        load()
+    }, [])
+
+    const handleCreate = async () => {
+        if (!newName.trim()) return
+        try {
+            await api.inspectionTemplates.create({ name: newName.trim(), is_active: true })
+            setNewName("")
+            setCreating(false)
+            toast.success("Template created")
+            load()
+        } catch (e: any) {
+            toast.error(e?.message ?? "Failed to create template")
+        }
+    }
+
+    const handleDuplicate = async (id: number) => {
+        try {
+            await api.inspectionTemplates.duplicate(id)
+            toast.success("Template duplicated")
+            load()
+        } catch (e: any) {
+            toast.error(e?.message ?? "Failed to duplicate template")
+        }
+    }
+
+    const handleDelete = async (id: number, name: string) => {
+        const confirmed = await confirm({
+            title: `Delete "${name}"?`,
+            description: "This will remove the template and all its sections / checkpoints.",
+            confirmLabel: "Delete",
+            variant: "destructive",
+        })
+        if (!confirmed) return
+        try {
+            await api.inspectionTemplates.destroy(id)
+            toast.success("Template deleted")
+            load()
+        } catch (e: any) {
+            toast.error(e?.message ?? "Failed to delete template")
+        }
+    }
+
+    return (
+        <div className="p-6 space-y-4">
+            <div className="flex items-center justify-between gap-2">
+                <h1 className="text-2xl font-semibold">Inspection Templates</h1>
+                <div className="flex items-center gap-2">
+                    <Input
+                        placeholder="Search…"
+                        value={search}
+                        onChange={(e) => setSearch(e.target.value)}
+                        onKeyDown={(e) => e.key === "Enter" && load()}
+                        className="w-56"
+                    />
+                    <Button onClick={() => setCreating((c) => !c)}>
+                        <Plus className="size-4 mr-1" /> New template
+                    </Button>
+                </div>
+            </div>
+
+            {creating && (
+                <div className="flex items-center gap-2 rounded border p-3">
+                    <Input
+                        autoFocus
+                        placeholder="Template name (e.g. Annual Safety)"
+                        value={newName}
+                        onChange={(e) => setNewName(e.target.value)}
+                        onKeyDown={(e) => e.key === "Enter" && handleCreate()}
+                        className="max-w-md"
+                    />
+                    <Button onClick={handleCreate}>Create</Button>
+                    <Button variant="ghost" onClick={() => { setCreating(false); setNewName("") }}>Cancel</Button>
+                </div>
+            )}
+
+            <div className="rounded border">
+                <table className="w-full text-sm">
+                    <thead className="bg-muted">
+                        <tr>
+                            <th className="text-left p-3">Name</th>
+                            <th className="text-left p-3">Sections</th>
+                            <th className="text-left p-3">Checkpoints</th>
+                            <th className="text-left p-3">Status</th>
+                            <th className="text-right p-3">Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {loading && (
+                            <tr><td colSpan={5} className="p-6 text-center text-muted-foreground">Loading…</td></tr>
+                        )}
+                        {!loading && items.length === 0 && (
+                            <tr><td colSpan={5} className="p-6 text-center text-muted-foreground">No templates yet</td></tr>
+                        )}
+                        {!loading && items.map((t) => {
+                            const sectionCount = t.sections?.length ?? 0
+                            const cpCount = (t.sections ?? []).reduce((sum, s) => sum + (s.check_points?.length ?? 0), 0)
+                            return (
+                                <tr key={t.id} className="border-t hover:bg-muted/40">
+                                    <td className="p-3 font-medium">{t.name}</td>
+                                    <td className="p-3">{sectionCount}</td>
+                                    <td className="p-3">{cpCount}</td>
+                                    <td className="p-3">
+                                        <span className={`inline-block rounded-full px-2 py-0.5 text-xs ${t.is_active ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-600"}`}>
+                                            {t.is_active ? "Active" : "Inactive"}
+                                        </span>
+                                    </td>
+                                    <td className="p-3 text-right space-x-1">
+                                        <Link href={`/settings/inspection-templates/${t.id}`}>
+                                            <Button size="sm" variant="ghost"><Pencil className="size-4" /></Button>
+                                        </Link>
+                                        <Button size="sm" variant="ghost" onClick={() => handleDuplicate(t.id)}><Copy className="size-4" /></Button>
+                                        <Button size="sm" variant="ghost" onClick={() => handleDelete(t.id, t.name)}><Trash2 className="size-4 text-red-600" /></Button>
+                                    </td>
+                                </tr>
+                            )
+                        })}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    )
+}
diff --git a/apps/dashboard/app/(authenticated)/settings/insurance-types/page.tsx b/apps/dashboard/app/(authenticated)/settings/insurance-types/page.tsx
index 6ffb01d..dc9d13a 100644
--- a/apps/dashboard/app/(authenticated)/settings/insurance-types/page.tsx
+++ b/apps/dashboard/app/(authenticated)/settings/insurance-types/page.tsx
@@ -12,6 +12,8 @@ export default function InsuranceTypesPage() {
         <ResourcePage<InsuranceTypesClient>
             pageTitle="Insurance Types"
             routeKey={INSURANCE_TYPE_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search insurance types..."
             getClient={(api) => api.insuranceTypes}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
diff --git a/apps/dashboard/app/(authenticated)/settings/make-and-models/page.tsx b/apps/dashboard/app/(authenticated)/settings/make-and-models/page.tsx
index 0abc6c6..71971df 100644
--- a/apps/dashboard/app/(authenticated)/settings/make-and-models/page.tsx
+++ b/apps/dashboard/app/(authenticated)/settings/make-and-models/page.tsx
@@ -12,6 +12,8 @@ export default function MakeAndModelsPage() {
         <ResourcePage<MakeAndModelsClient>
             pageTitle="Make & Models"
             routeKey={MAKE_AND_MODEL_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search makes & models..."
             getClient={(api) => api.makeAndModels}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
diff --git a/apps/dashboard/app/(authenticated)/settings/shop-type/page.tsx b/apps/dashboard/app/(authenticated)/settings/shop-type/page.tsx
index a7566f1..e7570f7 100644
--- a/apps/dashboard/app/(authenticated)/settings/shop-type/page.tsx
+++ b/apps/dashboard/app/(authenticated)/settings/shop-type/page.tsx
@@ -13,6 +13,8 @@ export default function ShopTypesPage() {
         <ResourcePage<ShopTypesClient>
             pageTitle="Shop Types"
             routeKey={SHOP_TYPE_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search shop types..."
             getClient={(api) => api.shopTypes}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
diff --git a/apps/dashboard/app/(authenticated)/settings/tax-rates/page.tsx b/apps/dashboard/app/(authenticated)/settings/tax-rates/page.tsx
index 6c8e4b4..9be7e99 100644
--- a/apps/dashboard/app/(authenticated)/settings/tax-rates/page.tsx
+++ b/apps/dashboard/app/(authenticated)/settings/tax-rates/page.tsx
@@ -55,6 +55,8 @@ export default function TaxesPage() {
         <ResourcePage<TaxesClient>
             pageTitle="Tax & Rates"
             routeKey={TAX_ROUTES.INDEX}
+            searchable
+            searchPlaceholder="Search tax rates..."
             getClient={(api) => api.taxes}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
diff --git a/apps/dashboard/app/inspection/[token]/page.tsx b/apps/dashboard/app/inspection/[token]/page.tsx
new file mode 100644
index 0000000..0b08129
--- /dev/null
+++ b/apps/dashboard/app/inspection/[token]/page.tsx
@@ -0,0 +1,444 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useParams } from "next/navigation"
+import {
+    AlertCircle,
+    Calendar,
+    Car,
+    CheckCircle2,
+    ChevronRight,
+    ClipboardList,
+    Gauge,
+    Loader2,
+    Printer,
+    ShieldAlert,
+    ShieldCheck,
+    User,
+} from "lucide-react"
+
+type Severity = "good" | "attention" | "critical" | "na" | "not_inspected"
+
+type Photo = { id: number; url: string | null; caption?: string | null }
+
+type CheckPoint = {
+    name: string
+    description?: string | null
+    severity: Severity
+    technician_notes?: string | null
+    condition_rate?: number | null
+    photos?: Photo[]
+}
+
+type Section = { name: string; items: CheckPoint[] }
+
+type PublicInspection = {
+    title?: string
+    order_number?: string
+    date?: string
+    time?: string
+    status?: string
+    odometer?: number | null
+    note?: string | null
+    description?: string | null
+    customer?: { name?: string } | null
+    vehicle?: { make?: string; model?: string; year?: string | number; license_plate?: string; vin?: string } | null
+    technician?: { name?: string } | null
+    department?: string | null
+    template?: string | null
+    totals: { good: number; attention: number; critical: number; na: number; not_inspected: number; considered: number; all: number }
+    score: number | null
+    sections: Section[]
+    share_expires_at?: string | null
+}
+
+const SEVERITY_LABEL: Record<Severity, string> = {
+    good: "Good",
+    attention: "Attention",
+    critical: "Critical",
+    na: "N/A",
+    not_inspected: "Not Inspected",
+}
+
+const SEVERITY_DOT_BG: Record<Severity, string> = {
+    good: "bg-emerald-500",
+    attention: "bg-amber-500",
+    critical: "bg-rose-500",
+    na: "bg-slate-400",
+    not_inspected: "bg-gray-300",
+}
+
+const SEVERITY_PILL: Record<Severity, string> = {
+    good: "bg-emerald-50 text-emerald-700 border-emerald-200",
+    attention: "bg-amber-50 text-amber-800 border-amber-200",
+    critical: "bg-rose-50 text-rose-700 border-rose-200",
+    na: "bg-slate-50 text-slate-700 border-slate-200",
+    not_inspected: "bg-gray-50 text-gray-600 border-gray-200",
+}
+
+const SEVERITY_BORDER: Record<Severity, string> = {
+    good: "border-l-emerald-500",
+    attention: "border-l-amber-500",
+    critical: "border-l-rose-500",
+    na: "border-l-slate-400",
+    not_inspected: "border-l-gray-300",
+}
+
+function ScoreRing({ score }: { score: number | null }) {
+    if (score === null) {
+        return (
+            <div className="size-32 rounded-full border-4 border-dashed border-muted-foreground/30 flex items-center justify-center text-xs text-muted-foreground">
+                Not scored
+            </div>
+        )
+    }
+    const color =
+        score >= 80 ? "text-emerald-600" : score >= 50 ? "text-amber-600" : "text-rose-600"
+    const stroke =
+        score >= 80 ? "stroke-emerald-500" : score >= 50 ? "stroke-amber-500" : "stroke-rose-500"
+    const r = 56
+    const c = 2 * Math.PI * r
+    const offset = c - (score / 100) * c
+
+    return (
+        <div className="relative size-32 shrink-0">
+            <svg viewBox="0 0 128 128" className="size-32 -rotate-90">
+                <circle cx="64" cy="64" r={r} className="fill-none stroke-muted" strokeWidth="10" />
+                <circle
+                    cx="64"
+                    cy="64"
+                    r={r}
+                    className={`fill-none ${stroke} transition-[stroke-dashoffset]`}
+                    strokeWidth="10"
+                    strokeLinecap="round"
+                    strokeDasharray={c}
+                    strokeDashoffset={offset}
+                />
+            </svg>
+            <div className="absolute inset-0 flex flex-col items-center justify-center">
+                <div className={`text-3xl font-bold leading-none ${color}`}>{score}</div>
+                <div className="text-[10px] uppercase tracking-wider text-muted-foreground mt-1">
+                    Health
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default function PublicInspectionPage() {
+    const params = useParams<{ token: string }>()
+    const token = params.token
+    const [data, setData] = useState<PublicInspection | null>(null)
+    const [error, setError] = useState<string | null>(null)
+    const [loading, setLoading] = useState(true)
+    const [lightbox, setLightbox] = useState<Photo | null>(null)
+
+    useEffect(() => {
+        const base = process.env.NEXT_PUBLIC_API_URL ?? ""
+        fetch(`${base.replace(/\/$/, "")}/api/public/inspections/${token}`, {
+            headers: { Accept: "application/json", "X-Lang": "en" },
+        })
+            .then(async (res) => {
+                if (!res.ok) {
+                    const body = await res.json().catch(() => ({} as any))
+                    throw new Error(body.message ?? `Failed (HTTP ${res.status})`)
+                }
+                return res.json()
+            })
+            .then((json: { data: PublicInspection }) => setData(json.data))
+            .catch((e: Error) => setError(e.message))
+            .finally(() => setLoading(false))
+    }, [token])
+
+    if (loading) {
+        return (
+            <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100">
+                <div className="flex items-center gap-2 text-muted-foreground">
+                    <Loader2 className="size-4 animate-spin" /> Loading inspection…
+                </div>
+            </div>
+        )
+    }
+
+    if (error) {
+        return (
+            <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 p-6">
+                <div className="max-w-md w-full text-center space-y-3 bg-white rounded-xl shadow-sm border p-8">
+                    <AlertCircle className="size-12 mx-auto text-rose-500" />
+                    <h1 className="text-lg font-semibold">Can't open this inspection</h1>
+                    <p className="text-sm text-muted-foreground">{error}</p>
+                </div>
+            </div>
+        )
+    }
+
+    if (!data) return null
+
+    const vehicleLine = data.vehicle
+        ? [data.vehicle.year, data.vehicle.make, data.vehicle.model].filter(Boolean).join(" ")
+        : "—"
+
+    const criticalCount = data.totals.critical
+    const attentionCount = data.totals.attention
+    const headlineStatus =
+        criticalCount > 0
+            ? { Icon: ShieldAlert, color: "text-rose-600", bg: "bg-rose-50", label: `${criticalCount} critical issue${criticalCount === 1 ? "" : "s"} found` }
+            : attentionCount > 0
+                ? { Icon: AlertCircle, color: "text-amber-600", bg: "bg-amber-50", label: `${attentionCount} item${attentionCount === 1 ? "" : "s"} need attention` }
+                : { Icon: ShieldCheck, color: "text-emerald-600", bg: "bg-emerald-50", label: "No issues found" }
+
+    return (
+        <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
+            {/* Print is handled by downloading the backend-generated PDF
+                (see the Print button), so this page no longer needs print CSS. */}
+
+            {/* Print bar */}
+            <div className="no-print bg-white/80 backdrop-blur border-b sticky top-0 z-10">
+                <div className="max-w-3xl mx-auto px-4 sm:px-6 py-3 flex items-center justify-between">
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                        <ClipboardList className="size-4" />
+                        <span className="font-medium text-foreground">Inspection report</span>
+                    </div>
+                    <a
+                        href={`${(process.env.NEXT_PUBLIC_API_URL ?? "").replace(/\/$/, "")}/api/public/inspections/${token}/print`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm border bg-white hover:bg-muted/40 transition"
+                    >
+                        <Printer className="size-3.5" /> Print PDF
+                    </a>
+                </div>
+            </div>
+
+            <div className="max-w-3xl mx-auto p-4 sm:p-6 space-y-5">
+                {/* Hero card */}
+                <div className="rounded-2xl bg-white shadow-sm border overflow-hidden">
+                    <div className="p-6 sm:p-8">
+                        <div className="flex items-start justify-between gap-6 flex-wrap">
+                            <div className="min-w-0 flex-1">
+                                <div className="text-xs uppercase tracking-wider text-muted-foreground">
+                                    Vehicle inspection report
+                                </div>
+                                <h1 className="mt-1 text-2xl sm:text-3xl font-bold tracking-tight">{data.title ?? "Inspection"}</h1>
+                                {data.order_number && (
+                                    <div className="text-sm text-muted-foreground font-mono mt-1">#{data.order_number}</div>
+                                )}
+
+                                <div className={`mt-4 inline-flex items-center gap-2 rounded-full ${headlineStatus.bg} px-4 py-1.5`}>
+                                    <headlineStatus.Icon className={`size-4 ${headlineStatus.color}`} />
+                                    <span className={`text-sm font-medium ${headlineStatus.color}`}>
+                                        {headlineStatus.label}
+                                    </span>
+                                </div>
+                            </div>
+                            <ScoreRing score={data.score} />
+                        </div>
+                    </div>
+
+                    <div className="border-t bg-gray-50/60 px-6 sm:px-8 py-4">
+                        <div className="info-grid grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm">
+                            <InfoCell icon={User} label="Customer" value={data.customer?.name ?? "—"} />
+                            <InfoCell icon={Car} label="Vehicle" value={vehicleLine} subtitle={data.vehicle?.license_plate ?? undefined} />
+                            <InfoCell icon={Calendar} label="Inspected" value={data.date ?? "—"} subtitle={data.time ?? undefined} />
+                            <InfoCell icon={Gauge} label="Odometer" value={data.odometer != null ? `${Number(data.odometer).toLocaleString()} km` : "—"} />
+                        </div>
+                    </div>
+                </div>
+
+                {/* Severity summary */}
+                <div className="totals-grid grid grid-cols-2 sm:grid-cols-5 gap-2 pb-avoid">
+                    {(["good", "attention", "critical", "na", "not_inspected"] as Severity[]).map((s) => (
+                        <div
+                            key={s}
+                            className={`rounded-xl border px-3 py-3 text-center ${SEVERITY_PILL[s]}`}
+                        >
+                            <div className="text-xl font-bold leading-none tabular-nums">{data.totals[s]}</div>
+                            <div className="text-[11px] font-medium mt-1.5">{SEVERITY_LABEL[s]}</div>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Sections */}
+                {data.sections.length === 0 ? (
+                    <div className="rounded-2xl bg-white border p-8 text-center text-sm text-muted-foreground">
+                        This inspection has no recorded checkpoints yet.
+                    </div>
+                ) : (
+                    data.sections.map((section) => (
+                        <section key={section.name} className="rounded-2xl bg-white shadow-sm border overflow-hidden">
+                            <header className="px-5 sm:px-6 py-3 border-b flex items-center justify-between bg-gray-50/60">
+                                <h2 className="font-semibold text-sm sm:text-base">{section.name}</h2>
+                                <span className="text-xs text-muted-foreground">
+                                    {section.items.length} {section.items.length === 1 ? "item" : "items"}
+                                </span>
+                            </header>
+                            <ul className="divide-y">
+                                {section.items.map((cp, i) => (
+                                    <li
+                                        key={i}
+                                        className={`cp-row pb-avoid px-5 sm:px-6 py-4 border-l-4 ${SEVERITY_BORDER[cp.severity]}`}
+                                    >
+                                        {/* Head: dot + name + severity pill (pill stays inline next to name) */}
+                                        <div className="cp-head flex items-center gap-2">
+                                            <span className={`size-2 rounded-full ${SEVERITY_DOT_BG[cp.severity]} shrink-0`} />
+                                            <span className="font-medium text-sm flex-1 min-w-0 truncate">{cp.name}</span>
+                                            <span className={`cp-pill inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium shrink-0 ${SEVERITY_PILL[cp.severity]}`}>
+                                                {SEVERITY_LABEL[cp.severity]}
+                                            </span>
+                                        </div>
+                                        <div className="cp-body ms-4">
+                                            {cp.description && (
+                                                <p className="text-xs text-muted-foreground mt-1">{cp.description}</p>
+                                            )}
+                                            {cp.technician_notes && (
+                                                <p className="mt-2 rounded-md bg-muted/40 px-3 py-2 text-xs text-foreground/80 italic border-l-2 border-muted-foreground/30">
+                                                    "{cp.technician_notes}"
+                                                </p>
+                                            )}
+                                            {cp.condition_rate != null && (
+                                                <div className="mt-2">
+                                                    <div className="h-1.5 bg-muted rounded-full overflow-hidden">
+                                                        <div
+                                                            className={`h-full transition-all ${cp.severity === "critical" ? "bg-rose-500" : cp.severity === "attention" ? "bg-amber-500" : "bg-emerald-500"}`}
+                                                            style={{ width: `${cp.condition_rate}%` }}
+                                                        />
+                                                    </div>
+                                                    <div className="text-[11px] text-muted-foreground mt-0.5 tabular-nums">{cp.condition_rate}%</div>
+                                                </div>
+                                            )}
+                                            {cp.photos && cp.photos.length > 0 && (
+                                                <div className="photo-grid mt-3 grid grid-cols-3 sm:grid-cols-4 gap-2">
+                                                    {cp.photos.map((p) => (
+                                                        p.url ? (
+                                                            <button
+                                                                type="button"
+                                                                key={p.id}
+                                                                onClick={() => setLightbox(p)}
+                                                                className="group relative rounded-lg overflow-hidden border bg-muted aspect-square focus:outline-none focus:ring-2 focus:ring-primary/40"
+                                                                aria-label="View photo"
+                                                            >
+                                                                {/* eslint-disable-next-line @next/next/no-img-element */}
+                                                                <img
+                                                                    src={p.url}
+                                                                    alt={p.caption ?? ""}
+                                                                    className="block w-full h-full object-cover transition group-hover:scale-105"
+                                                                />
+                                                            </button>
+                                                        ) : null
+                                                    ))}
+                                                </div>
+                                            )}
+                                        </div>
+                                    </li>
+                                ))}
+                            </ul>
+                        </section>
+                    ))
+                )}
+
+                {(data.note || data.description) && (
+                    <section className="rounded-2xl bg-white shadow-sm border p-5 sm:p-6">
+                        <h2 className="font-semibold text-sm mb-3 flex items-center gap-2">
+                            <ChevronRight className="size-4 text-muted-foreground" />
+                            Additional notes from your technician
+                        </h2>
+                        {data.note && <p className="text-sm leading-relaxed">{data.note}</p>}
+                        {data.description && (
+                            <p className="text-sm text-muted-foreground mt-2 leading-relaxed">{data.description}</p>
+                        )}
+                    </section>
+                )}
+
+                {/* Technician footer */}
+                {data.technician?.name && (
+                    <div className="rounded-2xl bg-white shadow-sm border px-5 sm:px-6 py-4 flex items-center justify-between gap-3 flex-wrap">
+                        <div className="flex items-center gap-3">
+                            <div className="size-10 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 text-white flex items-center justify-center font-semibold text-sm">
+                                {data.technician.name
+                                    .split(" ")
+                                    .map((p) => p[0])
+                                    .filter(Boolean)
+                                    .slice(0, 2)
+                                    .join("")}
+                            </div>
+                            <div>
+                                <div className="text-xs text-muted-foreground">Inspected by</div>
+                                <div className="font-medium text-sm">{data.technician.name}</div>
+                            </div>
+                        </div>
+                        {data.department && (
+                            <span className="text-xs text-muted-foreground">{data.department}</span>
+                        )}
+                        {data.template && (
+                            <span className="text-xs rounded-full border px-3 py-1 bg-muted/30">
+                                {data.template}
+                            </span>
+                        )}
+                    </div>
+                )}
+
+                <footer className="text-center text-xs text-muted-foreground py-6 no-print">
+                    {data.share_expires_at && (
+                        <div>Link valid until {new Date(data.share_expires_at).toLocaleDateString()}</div>
+                    )}
+                </footer>
+            </div>
+
+            {/* Lightbox */}
+            {lightbox && lightbox.url && (
+                <div
+                    className="no-print fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4"
+                    onClick={() => setLightbox(null)}
+                    role="dialog"
+                    aria-modal
+                >
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                        src={lightbox.url}
+                        alt={lightbox.caption ?? ""}
+                        className="max-w-full max-h-[88vh] object-contain shadow-2xl"
+                        onClick={(e) => e.stopPropagation()}
+                    />
+                    <button
+                        type="button"
+                        onClick={() => setLightbox(null)}
+                        className="absolute top-4 right-4 rounded-full bg-white/10 hover:bg-white/20 text-white size-9 inline-flex items-center justify-center"
+                        aria-label="Close"
+                    >
+                        ×
+                    </button>
+                    {lightbox.caption && (
+                        <div className="absolute bottom-4 inset-x-0 text-center text-white/90 text-sm px-4">
+                            {lightbox.caption}
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    )
+}
+
+function InfoCell({
+    icon: Icon,
+    label,
+    value,
+    subtitle,
+}: {
+    icon: React.ComponentType<{ className?: string }>
+    label: string
+    value: string
+    subtitle?: string
+}) {
+    return (
+        <div className="flex items-start gap-2 min-w-0">
+            <Icon className="size-4 mt-0.5 text-muted-foreground shrink-0" />
+            <div className="min-w-0">
+                <div className="text-[11px] uppercase tracking-wide text-muted-foreground">{label}</div>
+                <div className="font-medium truncate">{value}</div>
+                {subtitle && (
+                    <div className="text-xs text-muted-foreground font-mono truncate">{subtitle}</div>
+                )}
+            </div>
+        </div>
+    )
+}
diff --git a/apps/dashboard/app/layout.tsx b/apps/dashboard/app/layout.tsx
index 19e7703..c304a6b 100644
--- a/apps/dashboard/app/layout.tsx
+++ b/apps/dashboard/app/layout.tsx
@@ -1,10 +1,12 @@
 import { Geist_Mono, Inter } from "next/font/google"
+import NextTopLoader from "nextjs-toploader"
 
 
 import { QueryProvider } from "@/shared/components/query-provider"
 import { ThemeProvider } from "@/shared/components/theme-provider"
 import { Toaster } from "@/shared/components/ui/sonner"
 import { ConfirmDialog } from "@/shared/components/confirm-dialog"
+import { PromptDialog } from "@/shared/components/prompt-dialog"
 import { NuqsAdapter } from "nuqs/adapters/next/app"
 import { cn } from "@/shared/lib/utils"
 import './globals.css'
@@ -33,11 +35,13 @@ export default function RootLayout({
       className={cn("antialiased", fontMono.variable, "font-sans", inter.variable)}
     >
       <body>
+        <NextTopLoader color="var(--primary)" height={3} showSpinner={false} />
         <NuqsAdapter>
           <ThemeProvider>
             <QueryProvider>{children}</QueryProvider>
             <Toaster />
             <ConfirmDialog />
+            <PromptDialog />
           </ThemeProvider>
         </NuqsAdapter>
       </body>
diff --git a/apps/dashboard/base/components/layout/dashboard/app-sidebar.tsx b/apps/dashboard/base/components/layout/dashboard/app-sidebar.tsx
index d9f9e6c..ccaf404 100644
--- a/apps/dashboard/base/components/layout/dashboard/app-sidebar.tsx
+++ b/apps/dashboard/base/components/layout/dashboard/app-sidebar.tsx
@@ -141,9 +141,20 @@ export function AppSidebar({ navGroups, logo, user, ...props }: AppSidebarProps)
     )
 }
 
+function isPathActive(pathname: string, href: string): boolean {
+    if (href === '/') return pathname === '/'
+    return pathname === href || pathname.startsWith(href + '/')
+}
+
+function isItemActive(pathname: string, item: { href: string; matchPath?: string; isActive?: boolean }): boolean {
+    if (item.isActive !== undefined) return item.isActive
+    if (item.matchPath) return isPathActive(pathname, item.matchPath)
+    return isPathActive(pathname, item.href)
+}
+
 function SimpleNavItem({ item, isCollapsed }: { item: NavItem; isCollapsed: boolean }) {
     const pathname = usePathname()
-    const isActive = item.isActive ?? pathname === item.href
+    const isActive = isItemActive(pathname, item)
 
     return (
         <SidebarMenuItem>
@@ -169,8 +180,8 @@ function SimpleNavItem({ item, isCollapsed }: { item: NavItem; isCollapsed: bool
 
 function CollapsibleNavItem({ item, isCollapsed }: { item: NavItem; isCollapsed: boolean }) {
     const pathname = usePathname()
-    const isChildActive = item.items?.some((sub) => pathname === sub.href)
-    const isActive = item.isActive ?? (pathname === item.href || isChildActive === true)
+    const isChildActive = item.items?.some((sub) => isItemActive(pathname, sub))
+    const isActive = item.isActive ?? (isItemActive(pathname, item) || isChildActive === true)
 
     // Collapsed sidebar → flyout dropdown with sub-items
     if (isCollapsed) {
@@ -210,7 +221,7 @@ function CollapsibleNavItem({ item, isCollapsed }: { item: NavItem; isCollapsed:
                         </DropdownMenuLabel>
                         <DropdownMenuSeparator />
                         {item.items?.map((sub) => {
-                            const isSubActive = sub.isActive ?? pathname === sub.href
+                            const isSubActive = isItemActive(pathname, sub)
                             return (
                                 <DropdownMenuItem key={sub.href} asChild>
                                     <Link
@@ -272,7 +283,7 @@ function CollapsibleNavItem({ item, isCollapsed }: { item: NavItem; isCollapsed:
                 <CollapsibleContent className="overflow-hidden py-2 data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up">
                     <SidebarMenuSub>
                         {item.items?.map((sub) => {
-                            const isSubActive = sub.isActive ?? pathname === sub.href
+                            const isSubActive = isItemActive(pathname, sub)
                             return (
                                 <SidebarMenuSubItem key={sub.href}>
                                     <SidebarMenuSubButton asChild isActive={isSubActive} className="dashboard-nav-sub-item my-0.5">
diff --git a/apps/dashboard/base/components/layout/dashboard/dashboard-details-page-layout.tsx b/apps/dashboard/base/components/layout/dashboard/dashboard-details-page-layout.tsx
index d15a816..8a36f3b 100644
--- a/apps/dashboard/base/components/layout/dashboard/dashboard-details-page-layout.tsx
+++ b/apps/dashboard/base/components/layout/dashboard/dashboard-details-page-layout.tsx
@@ -68,14 +68,22 @@ export default function DashboardDetailsPageLayout({
             </Button>
           )}
           {(avatarSrc || avatarFallback) && (
-            <a rel="preload"  target="_blank"  href={avatarSrc} >
-            <Avatar className="size-14">
-              {avatarSrc && <AvatarImage src={avatarSrc} alt={title} />}
-              <AvatarFallback>
-                {avatarFallback ?? title.charAt(0).toUpperCase()}
-              </AvatarFallback>
-            </Avatar>
-            </a>
+            avatarSrc ? (
+              <a target="_blank" rel="noopener noreferrer" href={avatarSrc}>
+                <Avatar className="size-14">
+                  <AvatarImage src={avatarSrc} alt={title} />
+                  <AvatarFallback>
+                    {avatarFallback ?? title.charAt(0).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+              </a>
+            ) : (
+              <Avatar className="size-14">
+                <AvatarFallback>
+                  {avatarFallback ?? title.charAt(0).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+            )
           )}
           {!avatarSrc && !avatarFallback && icon && (
             <div className="flex items-center justify-center size-10 rounded-full bg-muted text-muted-foreground">
@@ -109,6 +117,7 @@ export default function DashboardDetailsPageLayout({
               <Link
                 key={tab.href}
                 href={tab.href}
+                prefetch
                 className={cn(
                   "relative inline-flex items-center justify-center px-3 py-2 text-sm font-medium whitespace-nowrap transition-colors",
                   "text-muted-foreground hover:text-foreground",
diff --git a/apps/dashboard/base/types/navigation.ts b/apps/dashboard/base/types/navigation.ts
index 93fd3c0..44a64ef 100644
--- a/apps/dashboard/base/types/navigation.ts
+++ b/apps/dashboard/base/types/navigation.ts
@@ -6,6 +6,12 @@ export type NavItem = {
   href: string
   icon?: ReactNode
   isActive?: boolean
+  /**
+   * Optional prefix used to decide active state when the link target
+   * differs from the page's URL pattern (e.g. `/calendar/appointment/list`
+   * is the link, but the item should stay active on `/calendar/appointment/{id}`).
+   */
+  matchPath?: string
   badge?: string | number
   items?: NavSubItem[]
 }
@@ -15,6 +21,7 @@ export type NavSubItem = {
   href: string
   icon?: ReactNode
   isActive?: boolean
+  matchPath?: string
 }
 
 export type NavGroup = {
diff --git a/apps/dashboard/config/navGroups.tsx b/apps/dashboard/config/navGroups.tsx
index 13159b6..f6cb2f0 100644
--- a/apps/dashboard/config/navGroups.tsx
+++ b/apps/dashboard/config/navGroups.tsx
@@ -76,7 +76,7 @@ export const navGroups: NavGroup[] = [
         icon: <CalendarIcon />,
         items: [
           // { title: "Work Schedule", href: "/calendar/work-schedule/list", icon: <Clock3Icon /> },
-          { title: "Appointments", href: "/calendar/appointment/list", icon: <CalendarCheck2Icon /> },
+          { title: "Appointments", href: "/calendar/appointment/list", matchPath: "/calendar/appointment", icon: <CalendarCheck2Icon /> },
         ],
       },
       {
@@ -176,7 +176,8 @@ export const navGroups: NavGroup[] = [
           { title: "Insurance Types", href: "/settings/insurance-types", icon: <ShieldIcon /> },
           { title: "Tax & Rates", href: "/settings/tax-rates", icon: <ReceiptTextIcon /> },
           { title: "Make & Models", href: "/settings/make-and-models", icon: <CarIcon /> },
-          { title: "Configurations", href: "/settings/configurations/preferences/sales", icon: <SettingsIcon /> },
+          { title: "Inspection Templates", href: "/settings/inspection-templates", icon: <ClipboardListIcon /> },
+          { title: "Configurations", href: "/settings/configurations/preferences/sales", matchPath: "/settings/configurations", icon: <SettingsIcon /> },
           // { title: "Templates", href: "/settings/templates", icon: <ClipboardListIcon /> },
           // { title: "Integrations", href: "/settings/integrations/providers", icon: <PlugZapIcon /> },
           // { title: "Master", href: "/settings/master/body-type", icon: <ListIcon /> },
diff --git a/apps/dashboard/modules/bills/bill-actions.tsx b/apps/dashboard/modules/bills/bill-actions.tsx
index 2bd9095..150aff1 100644
--- a/apps/dashboard/modules/bills/bill-actions.tsx
+++ b/apps/dashboard/modules/bills/bill-actions.tsx
@@ -11,9 +11,11 @@ import {
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from "@/shared/components/ui/dropdown-menu"
-import { Ellipsis, Pencil, Trash2 } from "lucide-react"
+import { Ellipsis, Pencil, Trash2, Share2 } from "lucide-react"
+import { useState } from "react"
 import { useFormDialog } from "@/shared/components/form-dialog"
 import { BillForm } from "./bill-form"
+import { ShareDocumentDialog } from "@/shared/components/share-document-dialog"
 
 type BillActionsProps = {
     billId: string
@@ -23,6 +25,7 @@ export function BillActions({ billId }: BillActionsProps) {
     const api = useAuthApi()
     const router = useRouter()
     const editDialog = useFormDialog("bill-details-edit")
+    const [shareOpen, setShareOpen] = useState(false)
 
     const handleDelete = async () => {
         await api.bills.destroy(billId)
@@ -42,6 +45,10 @@ export function BillActions({ billId }: BillActionsProps) {
                         <Pencil className="size-4" />
                         Edit
                     </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => setShareOpen(true)}>
+                        <Share2 className="size-4" />
+                        Share
+                    </DropdownMenuItem>
                     <DropdownMenuItem variant="destructive" onClick={handleDelete}>
                         <Trash2 className="size-4" />
                         Delete
@@ -49,6 +56,8 @@ export function BillActions({ billId }: BillActionsProps) {
                 </DropdownMenuContent>
             </DropdownMenu>
 
+            <ShareDocumentDialog type="bill" id={billId} open={shareOpen} onOpenChange={setShareOpen} />
+
             <Dialog open={editDialog.isOpen} onOpenChange={(v) => { if (!v) editDialog.close() }}>
                 <DialogContent className="min-w-xl lg:min-w-4xl">
                     <DialogHeader>
diff --git a/apps/dashboard/modules/bills/bill-expenses-section.tsx b/apps/dashboard/modules/bills/bill-expenses-section.tsx
index 290bbc4..063b904 100644
--- a/apps/dashboard/modules/bills/bill-expenses-section.tsx
+++ b/apps/dashboard/modules/bills/bill-expenses-section.tsx
@@ -3,7 +3,8 @@
 import { Receipt } from "lucide-react"
 import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
-import { formatCurrency, formatNumber } from "@/shared/utils/formatters"
+import { formatNumber } from "@/shared/utils/formatters"
+import { Money } from "@/shared/components/money"
 
 type BillExpense = {
     id: number
@@ -62,14 +63,14 @@ export function BillExpensesSection({ expenses = [] }: BillExpensesSectionProps)
                                             {expense.description || "—"}
                                         </TableCell>
                                         <TableCell className="text-right">{formatNumber(qty)}</TableCell>
-                                        <TableCell className="text-right">{formatCurrency(rate)}</TableCell>
-                                        <TableCell className="text-right font-medium">{formatCurrency(amount)}</TableCell>
+                                        <TableCell className="text-right">{<Money value={rate} />}</TableCell>
+                                        <TableCell className="text-right font-medium">{<Money value={amount} />}</TableCell>
                                     </TableRow>
                                 )
                             })}
                             <TableRow className="bg-muted/50 font-medium">
                                 <TableCell colSpan={4} className="text-right">Subtotal</TableCell>
-                                <TableCell className="text-right">{formatCurrency(subtotal)}</TableCell>
+                                <TableCell className="text-right">{<Money value={subtotal} />}</TableCell>
                             </TableRow>
                         </TableBody>
                     </Table>
diff --git a/apps/dashboard/modules/bills/bill-general-info.tsx b/apps/dashboard/modules/bills/bill-general-info.tsx
index 2434d4a..3a55639 100644
--- a/apps/dashboard/modules/bills/bill-general-info.tsx
+++ b/apps/dashboard/modules/bills/bill-general-info.tsx
@@ -19,9 +19,10 @@ import {
 } from "@/shared/components/ui/card"
 import { Badge } from "@/shared/components/ui/badge"
 import { cn } from "@/shared/lib/utils"
-import { formatDate, formatCurrency, formatEnum } from "@/shared/utils/formatters"
+import { formatDate, formatEnum } from "@/shared/utils/formatters"
 import { getFullName } from "@/shared/utils/getFullName"
 import { useBill } from "./bill-context"
+import { Money } from "@/shared/components/money"
 
 function InfoItem({
     icon: Icon,
diff --git a/apps/dashboard/modules/bills/bill-parts-section.tsx b/apps/dashboard/modules/bills/bill-parts-section.tsx
index 3c1d358..66c92c4 100644
--- a/apps/dashboard/modules/bills/bill-parts-section.tsx
+++ b/apps/dashboard/modules/bills/bill-parts-section.tsx
@@ -3,7 +3,8 @@
 import { Wrench } from "lucide-react"
 import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
-import { formatCurrency, formatNumber } from "@/shared/utils/formatters"
+import { formatNumber } from "@/shared/utils/formatters"
+import { Money } from "@/shared/components/money"
 
 type BillPart = {
     id: number
@@ -62,14 +63,14 @@ export function BillPartsSection({ parts = [] }: BillPartsSectionProps) {
                                             {part.description || "—"}
                                         </TableCell>
                                         <TableCell className="text-right">{formatNumber(qty)}</TableCell>
-                                        <TableCell className="text-right">{formatCurrency(rate)}</TableCell>
-                                        <TableCell className="text-right font-medium">{formatCurrency(amount)}</TableCell>
+                                        <TableCell className="text-right">{<Money value={rate} />}</TableCell>
+                                        <TableCell className="text-right font-medium">{<Money value={amount} />}</TableCell>
                                     </TableRow>
                                 )
                             })}
                             <TableRow className="bg-muted/50 font-medium">
                                 <TableCell colSpan={4} className="text-right">Subtotal</TableCell>
-                                <TableCell className="text-right">{formatCurrency(subtotal)}</TableCell>
+                                <TableCell className="text-right">{<Money value={subtotal} />}</TableCell>
                             </TableRow>
                         </TableBody>
                     </Table>
diff --git a/apps/dashboard/modules/bills/bill-payments-section.tsx b/apps/dashboard/modules/bills/bill-payments-section.tsx
index 988fa94..e61da5a 100644
--- a/apps/dashboard/modules/bills/bill-payments-section.tsx
+++ b/apps/dashboard/modules/bills/bill-payments-section.tsx
@@ -17,7 +17,6 @@ import { PaymentMadeForm } from "@/modules/payment-mades/payment-made-form"
 import { useBill } from "./bill-context"
 import { formatDate } from "@/shared/utils/formatters"
 import { getFullName } from "@/shared/utils/getFullName"
-import { toRelation } from "@/shared/lib/utils"
 
 export function BillPaymentsSection() {
     const bill = useBill()
@@ -39,8 +38,17 @@ export function BillPaymentsSection() {
                             {(resourceId) => (
                                 <PaymentMadeForm
                                     initialData={{
-                                        amount: bill?.balance_due,
-                                        vendor: toRelation(bill?.vendor?.id, getFullName(bill?.vendor as any)),
+                                        // API-shape keys so PaymentMadeForm.mapToFormValues
+                                        // can pick them up (it reads `payment_made` / `vendor_id`
+                                        // / `vendor.*`, not the form-shape fields). bill_id +
+                                        // bill_number are required because the bill field is
+                                        // hidden when billId is supplied, but the schema still
+                                        // demands a populated bill relation.
+                                        bill_id: bill?.id,
+                                        bill_number: bill?.bill_number,
+                                        payment_made: bill?.balance_due,
+                                        vendor_id: bill?.vendor?.id,
+                                        vendor: bill?.vendor,
                                         payment_for: "bill",
                                     }}
                                     billId={bill?.id}
@@ -77,7 +85,7 @@ export function BillPaymentsSection() {
                         return (
                             <div className="flex items-center gap-2">
                                 <UserIcon className="h-4 w-4 text-muted-foreground" />
-                                <span>{item.vendor?.name || item.vendor_name || "—"}</span>
+                                <span>{item.vendor?.company_name || getFullName(item.vendor) || item.vendor_name || "—"}</span>
                             </div>
                         )
                     },
diff --git a/apps/dashboard/modules/bills/bill-services-section.tsx b/apps/dashboard/modules/bills/bill-services-section.tsx
index 654c9dd..8185124 100644
--- a/apps/dashboard/modules/bills/bill-services-section.tsx
+++ b/apps/dashboard/modules/bills/bill-services-section.tsx
@@ -3,7 +3,8 @@
 import { Briefcase } from "lucide-react"
 import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
-import { formatCurrency, formatNumber } from "@/shared/utils/formatters"
+import { formatNumber } from "@/shared/utils/formatters"
+import { Money } from "@/shared/components/money"
 
 type BillService = {
     id: number
@@ -62,14 +63,14 @@ export function BillServicesSection({ services = [] }: BillServicesSectionProps)
                                             {service.description || "—"}
                                         </TableCell>
                                         <TableCell className="text-right">{formatNumber(qty)}</TableCell>
-                                        <TableCell className="text-right">{formatCurrency(rate)}</TableCell>
-                                        <TableCell className="text-right font-medium">{formatCurrency(amount)}</TableCell>
+                                        <TableCell className="text-right">{<Money value={rate} />}</TableCell>
+                                        <TableCell className="text-right font-medium">{<Money value={amount} />}</TableCell>
                                     </TableRow>
                                 )
                             })}
                             <TableRow className="bg-muted/50 font-medium">
                                 <TableCell colSpan={4} className="text-right">Subtotal</TableCell>
-                                <TableCell className="text-right">{formatCurrency(subtotal)}</TableCell>
+                                <TableCell className="text-right">{<Money value={subtotal} />}</TableCell>
                             </TableRow>
                         </TableBody>
                     </Table>
diff --git a/apps/dashboard/modules/bills/bill-totals-summary.tsx b/apps/dashboard/modules/bills/bill-totals-summary.tsx
index be77fe8..0f5c1ed 100644
--- a/apps/dashboard/modules/bills/bill-totals-summary.tsx
+++ b/apps/dashboard/modules/bills/bill-totals-summary.tsx
@@ -2,9 +2,10 @@
 
 import { Card, CardContent } from "@/shared/components/ui/card"
 import { Separator } from "@/shared/components/ui/separator"
-import { formatCurrency, formatEnum } from "@/shared/utils/formatters"
+import { formatEnum } from "@/shared/utils/formatters"
 import { cn } from "@/shared/lib/utils"
 import { useBill } from "./bill-context"
+import { Money } from "@/shared/components/money"
 
 export function BillTotalsSummary() {
     const bill = useBill()
@@ -46,70 +47,65 @@ export function BillTotalsSummary() {
                     {parts.length > 0 && (
                         <div className="flex justify-between text-sm">
                             <span className="text-muted-foreground">Parts ({parts.length})</span>
-                            <span>{formatCurrency(partsTotal)}</span>
+                            <span>{<Money value={partsTotal} />}</span>
                         </div>
                     )}
                     {services.length > 0 && (
                         <div className="flex justify-between text-sm">
                             <span className="text-muted-foreground">Services ({services.length})</span>
-                            <span>{formatCurrency(servicesTotal)}</span>
+                            <span>{<Money value={servicesTotal} />}</span>
                         </div>
                     )}
                     {expenses.length > 0 && (
                         <div className="flex justify-between text-sm">
                             <span className="text-muted-foreground">Expenses ({expenses.length})</span>
-                            <span>{formatCurrency(expensesTotal)}</span>
+                            <span>{<Money value={expensesTotal} />}</span>
                         </div>
                     )}
                     <Separator />
 
                     <div className="flex justify-between text-sm font-medium">
                         <span>Subtotal</span>
-                        <span>{formatCurrency(subTotal)}</span>
+                        <span>{<Money value={subTotal} />}</span>
                     </div>
 
                     {discountAmount > 0 && (
                         <div className="flex justify-between text-sm">
                             <span className="text-muted-foreground">Discount{discount && discount !== "no" ? ` (${formatEnum(discount)})` : ""}</span>
-                            <span className="text-muted-foreground">−{formatCurrency(discountAmount)}</span>
+                            <span className="text-muted-foreground">−{<Money value={discountAmount} />}</span>
                         </div>
                     )}
 
                     {taxAmount > 0 && (
                         <div className="flex justify-between text-sm">
                             <span className="text-muted-foreground">Tax{bill.tax?.name ? ` (${bill.tax.name})` : ""}</span>
-                            <span>{formatCurrency(taxAmount)}</span>
+                            <span>{<Money value={taxAmount} />}</span>
+                        </div>
+                    )}
+
+                    <Separator />
+
+                    <div className="flex justify-between text-base font-semibold">
+                        <span>Total</span>
+                        <span>{<Money value={total} />}</span>
+                    </div>
+
+                    {paymentsMade > 0 && (
+                        <div className="flex justify-between text-sm text-muted-foreground">
+                            <span>Amount Paid</span>
+                            <span>– {<Money value={paymentsMade} />}</span>
                         </div>
                     )}
 
                     <Separator />
 
                     <div className={cn(
-                        "flex justify-between rounded-lg px-3 py-2 text-base font-bold bg-muted/50",
+                        "flex justify-between rounded-lg px-3 py-2 text-base font-bold",
+                        balanceDue > 0 ? "bg-primary/10 text-primary" : "bg-green-500/10 text-green-600",
                     )}>
-                        <span>Total</span>
-                        <span>{formatCurrency(total)}</span>
+                        <span>Balance Due</span>
+                        <span>{<Money value={balanceDue} />}</span>
                     </div>
-
-                    {paymentsMade > 0 && (
-                        <div className="flex justify-between text-sm">
-                            <span className="text-muted-foreground">Payments Made</span>
-                            <span className="text-emerald-600">−{formatCurrency(paymentsMade)}</span>
-                        </div>
-                    )}
-
-                    {paymentsMade > 0 && (
-                        <>
-                            <Separator />
-                            <div className={cn(
-                                "flex justify-between rounded-lg px-3 py-2 text-base font-semibold",
-                                balanceDue > 0 ? "text-destructive bg-destructive/5" : "text-emerald-700 bg-emerald-50 dark:bg-emerald-950/20",
-                            )}>
-                                <span>Balance Due</span>
-                                <span>{formatCurrency(balanceDue)}</span>
-                            </div>
-                        </>
-                    )}
                 </div>
             </CardContent>
         </Card>
diff --git a/apps/dashboard/modules/estimates/create-job-card-from-estimate-button.tsx b/apps/dashboard/modules/estimates/create-job-card-from-estimate-button.tsx
index dbd38f1..b56ff36 100644
--- a/apps/dashboard/modules/estimates/create-job-card-from-estimate-button.tsx
+++ b/apps/dashboard/modules/estimates/create-job-card-from-estimate-button.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useState } from "react"
-import { ClipboardList } from "lucide-react"
+import { ClipboardList, Loader2 } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { ApiError } from "@garage/api"
 import { Button } from "@/shared/components/ui/button"
@@ -30,34 +30,37 @@ export function CreateJobCardFromEstimateButton() {
         if (!confirmed) return
 
         setIsConverting(true)
+        const promise = api.estimates.convertToJobCard(estimateId, {})
+        toast.promise(promise, {
+            loading: "Generating job card...",
+            success: "Estimate converted to job card successfully",
+            error: (error: unknown) =>
+                error instanceof ApiError && error.status === 409
+                    ? "A job card already exists for this estimate."
+                    : "Failed to convert estimate to job card",
+        })
         try {
-            const response = await api.estimates.convertToJobCard(estimateId, {})
+            const response = await promise
             const jobCardId = response?.data?.id
-
-            toast.success("Estimate converted to job card successfully")
-
             if (jobCardId) {
                 router.push(`/sales/job-cards/${jobCardId}`)
+                return
             }
         } catch (error) {
             if (error instanceof ApiError && error.status === 409) {
                 const jobCardId = (error.payload?.data as { job_card_id?: number } | undefined)?.job_card_id
-                toast.info("A job card already exists for this estimate.")
                 if (jobCardId) {
                     router.push(`/sales/job-cards/${jobCardId}`)
                     return
                 }
             }
-
-            toast.error("Failed to convert estimate to job card")
-        } finally {
-            setIsConverting(false)
         }
+        setIsConverting(false)
     }
 
     return (
         <Button variant="outline" size="sm" onClick={handleConvert} disabled={isConverting}>
-            <ClipboardList className="me-2 size-4" />
+            {isConverting ? <Loader2 className="me-2 size-4 animate-spin" /> : <ClipboardList className="me-2 size-4" />}
             {isConverting ? "Generating..." : "Generate Job Card"}
         </Button>
     )
diff --git a/apps/dashboard/modules/estimates/estimate-actions.tsx b/apps/dashboard/modules/estimates/estimate-actions.tsx
index 2dc1b28..90ad086 100644
--- a/apps/dashboard/modules/estimates/estimate-actions.tsx
+++ b/apps/dashboard/modules/estimates/estimate-actions.tsx
@@ -24,7 +24,7 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/shared/components/ui/select"
-import { Ellipsis, Pencil, Trash2, ShieldCheck, Check, X, Printer } from "lucide-react"
+import { Ellipsis, Pencil, Trash2, ShieldCheck, Check, X, Printer, Share2 } from "lucide-react"
 import { useState } from "react"
 import { useMutation, useQuery } from "@tanstack/react-query"
 import { toast } from "sonner"
@@ -34,6 +34,7 @@ import { DatePickerField, TimePickerField } from "@/shared/components/form"
 import { cn } from "@/shared/lib/utils"
 import { EmployeeCombobox, type EmployeeOption } from "../employees/employee-combobox"
 import { useDocumentPrint } from "@/shared/hooks/use-document-print"
+import { ShareDocumentDialog } from "@/shared/components/share-document-dialog"
 
 type EstimateActionsProps = {
     estimateId: string
@@ -135,6 +136,7 @@ export function EstimateActions({ estimateId }: EstimateActionsProps) {
     const { print, isPrinting } = useDocumentPrint()
     const [editOpen, setEditOpen] = useState(false)
     const [authOpen, setAuthOpen] = useState(false)
+    const [shareOpen, setShareOpen] = useState(false)
     const [itemStatuses, setItemStatuses] = useState<Record<string, string>>({})
     const [authMethod, setAuthMethod] = useState("in_person")
     const [employee, setEmployee] = useState<EmployeeOption | null>(null)
@@ -224,6 +226,10 @@ export function EstimateActions({ estimateId }: EstimateActionsProps) {
                         <Printer className="size-4" />
                         {isPrinting ? "Printing..." : "Print"}
                     </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => setShareOpen(true)}>
+                        <Share2 className="size-4" />
+                        Share
+                    </DropdownMenuItem>
                     <DropdownMenuItem onClick={openAuthDialog}>
                         <ShieldCheck className="size-4" />
                         Store Authorisation
@@ -235,6 +241,8 @@ export function EstimateActions({ estimateId }: EstimateActionsProps) {
                 </DropdownMenuContent>
             </DropdownMenu>
 
+            <ShareDocumentDialog type="estimate" id={estimateId} open={shareOpen} onOpenChange={setShareOpen} />
+
             {/* Edit Dialog */}
             <Dialog open={editOpen} onOpenChange={setEditOpen}>
                 <DialogContent className="min-w-xl">
diff --git a/apps/dashboard/modules/estimates/estimate-expense-items-section.tsx b/apps/dashboard/modules/estimates/estimate-expense-items-section.tsx
index 4b8f071..2d08dbd 100644
--- a/apps/dashboard/modules/estimates/estimate-expense-items-section.tsx
+++ b/apps/dashboard/modules/estimates/estimate-expense-items-section.tsx
@@ -169,6 +169,7 @@ export function EstimateExpenseItemsSection({ estimateId }: { estimateId: string
                 onOpenChange={setPickerOpen}
                 selectionMode="single"
                 onConfirm={handlePickerConfirm}
+                searchPlaceholder="Search expense items..."
                 crudProps={{
                     routeKey: EXPENSE_ITEM_ROUTES.INDEX,
                     getClient: (api) => api.expenseItems,
diff --git a/apps/dashboard/modules/estimates/estimate-form.tsx b/apps/dashboard/modules/estimates/estimate-form.tsx
index ea4dffd..8387043 100644
--- a/apps/dashboard/modules/estimates/estimate-form.tsx
+++ b/apps/dashboard/modules/estimates/estimate-form.tsx
@@ -63,24 +63,48 @@ const DEFAULT_VALUES: EstimateFormValues = {
 
 // ── Mapping helpers ──
 
+function customerLabel(c: any): string | undefined {
+    if (!c) return undefined
+    const name = [c.first_name, c.last_name].filter(Boolean).join(" ").trim()
+    return c.company_name || name || undefined
+}
+
+function vehicleLabel(v: any): string | undefined {
+    if (!v) return undefined
+    const core = [v.make, v.model, v.sub_model].filter(Boolean).join(" ")
+    const suffix = [v.year, v.license_plate].filter(Boolean).join(" - ")
+    if (core && suffix) return `${core} (${suffix})`
+    return core || suffix || undefined
+}
+
 function mapToFormValues(data: unknown): EstimateFormValues {
     const d = (data as any)?.data ?? data ?? {}
 
     return {
         title: d.title || "",
-        customer: toRelation(d.customer_id, d.customer_name),
-        vehicle: toRelation(d.vehicle_id, d.vehicle_name),
-        department: toRelation(d.department_id, d.department_name),
-        insurance_type: toRelation(d.insurance_type_id, d.insurance_type_title ?? d.insurance_type_name ?? d.insurance_type?.title),
+        customer: toRelation(
+            d.customer_id ?? d.customer?.id,
+            d.customer_name ?? customerLabel(d.customer),
+        ),
+        vehicle: toRelation(
+            d.vehicle_id ?? d.vehicle?.id,
+            d.vehicle_name ?? vehicleLabel(d.vehicle),
+        ),
+        department: toRelation(
+            d.department_id ?? d.department?.id,
+            d.department_name ?? d.department?.name ?? d.department?.title,
+        ),
+        insurance_type: toRelation(
+            d.insurance_type_id ?? d.insurance_type?.id,
+            d.insurance_type_title ?? d.insurance_type_name ?? d.insurance_type?.title ?? d.insurance_type?.name,
+        ),
         insurer: toRelation(
-            d.insurer_id,
-            d.insurer_name
-                ?? [d.insurer?.first_name, d.insurer?.last_name].filter(Boolean).join(" ")
-                ?? d.insurer?.company_name,
+            d.insurer_id ?? d.insurer?.id,
+            d.insurer_name ?? customerLabel(d.insurer),
         ),
         service_writer: toRelation(
-            d.service_writer_id,
-            d.service_writer_name ?? [d.service_writer?.first_name, d.service_writer?.last_name].filter(Boolean).join(" "),
+            d.service_writer_id ?? d.service_writer?.id,
+            d.service_writer_name ?? customerLabel(d.service_writer),
         ),
         estimate_number: d.estimate_number || "",
         date: d.date ? d.date.split("T")[0] : "",
@@ -140,12 +164,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 +188,7 @@ export function EstimateForm({ resourceId, initialData, onSuccess }: EstimateFor
             return promise
         },
         onSuccess: () => {
-            form.reset()
+            if (!isEditing) form.reset()
             onSuccess?.()
         },
     })
diff --git a/apps/dashboard/modules/estimates/estimate-parts-section.tsx b/apps/dashboard/modules/estimates/estimate-parts-section.tsx
index 7e7ccb3..09e5e6d 100644
--- a/apps/dashboard/modules/estimates/estimate-parts-section.tsx
+++ b/apps/dashboard/modules/estimates/estimate-parts-section.tsx
@@ -168,6 +168,7 @@ export function EstimatePartsSection({ estimateId }: { estimateId: string }) {
                 onOpenChange={setPickerOpen}
                 selectionMode="single"
                 onConfirm={handlePickerConfirm}
+                searchPlaceholder="Search parts by title, SKU, or part number..."
                 crudProps={{
                     routeKey: PARTS_ROUTES.INDEX,
                     getClient: (api) => api.parts,
diff --git a/apps/dashboard/modules/estimates/estimate-services-section.tsx b/apps/dashboard/modules/estimates/estimate-services-section.tsx
index ddab262..22948d1 100644
--- a/apps/dashboard/modules/estimates/estimate-services-section.tsx
+++ b/apps/dashboard/modules/estimates/estimate-services-section.tsx
@@ -181,6 +181,7 @@ export function EstimateServicesSection({ estimateId }: { estimateId: string })
                 onOpenChange={setPickerOpen}
                 selectionMode="single"
                 onConfirm={handlePickerConfirm}
+                searchPlaceholder="Search services..."
                 crudProps={{
                     routeKey: SERVICE_ROUTES.INDEX,
                     getClient: (api) => api.services,
diff --git a/apps/dashboard/modules/estimates/estimate-totals-summary.tsx b/apps/dashboard/modules/estimates/estimate-totals-summary.tsx
index 515624f..a3dbb24 100644
--- a/apps/dashboard/modules/estimates/estimate-totals-summary.tsx
+++ b/apps/dashboard/modules/estimates/estimate-totals-summary.tsx
@@ -2,8 +2,9 @@
 
 import { Card, CardContent } from "@/shared/components/ui/card"
 import { Separator } from "@/shared/components/ui/separator"
-import { formatCurrency, formatEnum } from "@/shared/utils/formatters"
+import { formatEnum } from "@/shared/utils/formatters"
 import { useEstimate } from "./estimate-context"
+import { Money } from "@/shared/components/money"
 
 export function EstimateTotalsSummary() {
     const estimate = useEstimate()
@@ -39,19 +40,19 @@ export function EstimateTotalsSummary() {
                             {parts.length > 0 && (
                                 <div className="flex justify-between text-sm">
                                     <span className="text-muted-foreground">Parts ({parts.length})</span>
-                                    <span>{formatCurrency(lineTotal(parts))}</span>
+                                    <span>{<Money value={lineTotal(parts)} />}</span>
                                 </div>
                             )}
                             {services.length > 0 && (
                                 <div className="flex justify-between text-sm">
                                     <span className="text-muted-foreground">Services ({services.length})</span>
-                                    <span>{formatCurrency(lineTotal(services))}</span>
+                                    <span>{<Money value={lineTotal(services)} />}</span>
                                 </div>
                             )}
                             {expenses.length > 0 && (
                                 <div className="flex justify-between text-sm">
                                     <span className="text-muted-foreground">Expenses ({expenses.length})</span>
-                                    <span>{formatCurrency(lineTotal(expenses))}</span>
+                                    <span>{<Money value={lineTotal(expenses)} />}</span>
                                 </div>
                             )}
                             <Separator />
@@ -60,7 +61,7 @@ export function EstimateTotalsSummary() {
 
                     <div className="flex justify-between text-sm font-medium">
                         <span>Subtotal</span>
-                        <span>{formatCurrency(subTotal)}</span>
+                        <span>{<Money value={subTotal} />}</span>
                     </div>
 
                     {discount && discount !== "no" && (
@@ -74,7 +75,7 @@ export function EstimateTotalsSummary() {
 
                     <div className="flex justify-between text-base font-semibold">
                         <span>Total</span>
-                        <span>{formatCurrency(displayTotal)}</span>
+                        <span>{<Money value={displayTotal} />}</span>
                     </div>
                 </div>
             </CardContent>
diff --git a/apps/dashboard/modules/expense-items/expense-item-form.tsx b/apps/dashboard/modules/expense-items/expense-item-form.tsx
index 814e1f4..823e783 100644
--- a/apps/dashboard/modules/expense-items/expense-item-form.tsx
+++ b/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),
-        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),
+        category: toRelation(
+            d.category_id ?? d.category?.id,
+            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_name,
+            d.purchase_preferred_vendor_id ?? d.purchase_preferred_vendor?.id,
+            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
diff --git a/apps/dashboard/modules/expense-items/expense-items-selector-field.tsx b/apps/dashboard/modules/expense-items/expense-items-selector-field.tsx
index 442d112..240e212 100644
--- a/apps/dashboard/modules/expense-items/expense-items-selector-field.tsx
+++ b/apps/dashboard/modules/expense-items/expense-items-selector-field.tsx
@@ -58,6 +58,7 @@ export function ExpenseItemsSelectorField<
             itemKey="expense_id"
             dialogProps={{
                 title: "Select Expense Items",
+                searchPlaceholder: "Search expense items...",
                 crudProps: {
                     routeKey: EXPENSE_ITEM_ROUTES.INDEX,
                     getClient: (api) => api.expenseItems,
diff --git a/apps/dashboard/modules/expenses/expense-general-info.tsx b/apps/dashboard/modules/expenses/expense-general-info.tsx
index 00aaebe..8377169 100644
--- a/apps/dashboard/modules/expenses/expense-general-info.tsx
+++ b/apps/dashboard/modules/expenses/expense-general-info.tsx
@@ -20,8 +20,9 @@ import {
 } from "@/shared/components/ui/card"
 import { Badge } from "@/shared/components/ui/badge"
 import { cn } from "@/shared/lib/utils"
-import { formatDate, formatCurrency, formatEnum, formatTaxLabel } from "@/shared/utils/formatters"
+import { formatDate, formatEnum, formatTaxLabel } from "@/shared/utils/formatters"
 import { useExpense } from "./expense-context"
+import { Money } from "@/shared/components/money"
 
 function InfoItem({
     icon: Icon,
@@ -30,7 +31,7 @@ function InfoItem({
 }: {
     icon: React.ComponentType<{ className?: string }>
     label: string
-    value?: string | null
+    value?: React.ReactNode
 }) {
     return (
         <div className="flex items-start gap-3">
@@ -92,10 +93,10 @@ export function ExpenseGeneralInfo() {
                 <Card className="flex flex-col gap-1 p-4">
                     <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Total</span>
                     <span className="mt-1 text-lg font-semibold">
-                        {formatCurrency(expense.total ?? 0)}
+                        {<Money value={expense.total ?? 0} />}
                     </span>
                     {expense.sub_total != null && expense.sub_total !== expense.total && (
-                        <span className="text-xs text-muted-foreground">Subtotal: {formatCurrency(expense.sub_total)}</span>
+                        <span className="text-xs text-muted-foreground">Subtotal: {<Money value={expense.sub_total} />}</span>
                     )}
                 </Card>
 
@@ -103,7 +104,7 @@ export function ExpenseGeneralInfo() {
                 <Card className="flex flex-col gap-1 p-4">
                     <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Paid</span>
                     <span className="mt-1 text-lg font-semibold text-green-600 dark:text-green-400">
-                        {formatCurrency(paymentsM ?? 0)}
+                        {<Money value={paymentsM ?? 0} />}
                     </span>
                 </Card>
 
@@ -111,7 +112,7 @@ export function ExpenseGeneralInfo() {
                 <Card className={cn("flex flex-col gap-1 p-4", (balanceDue ?? 0) > 0 && "border-destructive/50 bg-destructive/5")}>
                     <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Balance Due</span>
                     <span className={cn("mt-1 text-lg font-semibold", (balanceDue ?? 0) > 0 ? "text-destructive" : "text-green-600 dark:text-green-400")}>
-                        {formatCurrency(balanceDue ?? 0)}
+                        {<Money value={balanceDue ?? 0} />}
                     </span>
                 </Card>
             </div>
@@ -139,10 +140,10 @@ export function ExpenseGeneralInfo() {
                             <InfoItem icon={Percent} label="Discount Type" value={formatEnum(expense.discount)} />
                         )}
                         {expense.discount_amount_major != null && expense.discount_amount_major > 0 && (
-                            <InfoItem icon={Percent} label="Discount" value={formatCurrency(expense.discount_amount_major)} />
+                            <InfoItem icon={Percent} label="Discount" value={<Money value={expense.discount_amount_major} />} />
                         )}
                         {expense.tax_amount != null && expense.tax_amount > 0 && (
-                            <InfoItem icon={Percent} label={taxLabel} value={formatCurrency(expense.tax_amount)} />
+                            <InfoItem icon={Percent} label={taxLabel} value={<Money value={expense.tax_amount} />} />
                         )}
                     </div>
                 </CardContent>
diff --git a/apps/dashboard/modules/expenses/expense-items-section.tsx b/apps/dashboard/modules/expenses/expense-items-section.tsx
index 62a32d8..17abdd8 100644
--- a/apps/dashboard/modules/expenses/expense-items-section.tsx
+++ b/apps/dashboard/modules/expenses/expense-items-section.tsx
@@ -10,7 +10,7 @@ import {
     TableHeader,
     TableRow,
 } from "@/shared/components/ui/table"
-import { formatCurrency } from "@/shared/utils/formatters"
+import { Money } from "@/shared/components/money"
 
 type ExpenseItem = {
     id?: number
@@ -89,8 +89,8 @@ export function ExpenseItemsSection({
                                             {item.description || "—"}
                                         </TableCell>
                                         <TableCell className="text-right text-sm">{qty.toLocaleString()}</TableCell>
-                                        <TableCell className="text-right text-sm">{formatCurrency(rate)}</TableCell>
-                                        <TableCell className="text-right font-semibold">{formatCurrency(amount)}</TableCell>
+                                        <TableCell className="text-right text-sm">{<Money value={rate} />}</TableCell>
+                                        <TableCell className="text-right font-semibold">{<Money value={amount} />}</TableCell>
                                     </TableRow>
                                 )
                             })}
@@ -104,25 +104,25 @@ export function ExpenseItemsSection({
                         {subTotal != null && (
                             <div className="flex justify-between">
                                 <span className="text-muted-foreground">Subtotal</span>
-                                <span className="font-medium">{formatCurrency(subTotal)}</span>
+                                <span className="font-medium">{<Money value={subTotal} />}</span>
                             </div>
                         )}
                         {discountAmount != null && discountAmount > 0 && discountType !== "no" && (
                             <div className="flex justify-between text-destructive">
                                 <span>Discount</span>
-                                <span>− {formatCurrency(discountAmount)}</span>
+                                <span>− {<Money value={discountAmount} />}</span>
                             </div>
                         )}
                         {taxAmount != null && taxAmount > 0 && (
                             <div className="flex justify-between">
                                 <span className="text-muted-foreground">{taxLabel || "Tax"}</span>
-                                <span className="font-medium">{formatCurrency(taxAmount)}</span>
+                                <span className="font-medium">{<Money value={taxAmount} />}</span>
                             </div>
                         )}
                         {total != null && (
                             <div className="flex justify-between border-t pt-2 text-base font-semibold">
                                 <span>Total</span>
-                                <span>{formatCurrency(total)}</span>
+                                <span>{<Money value={total} />}</span>
                             </div>
                         )}
                     </div>
diff --git a/apps/dashboard/modules/inspections/checkpoint-fill-dialog.tsx b/apps/dashboard/modules/inspections/checkpoint-fill-dialog.tsx
new file mode 100644
index 0000000..3479309
--- /dev/null
+++ b/apps/dashboard/modules/inspections/checkpoint-fill-dialog.tsx
@@ -0,0 +1,524 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { toast } from "sonner"
+import {
+    AlertTriangle,
+    Camera,
+    ChevronLeft,
+    ChevronRight,
+    CheckCircle2,
+    Image as ImageIcon,
+    Loader2,
+    Mic,
+    StickyNote,
+    Trash2,
+    Video,
+    X,
+} from "lucide-react"
+
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/shared/components/ui/dialog"
+import { Alert, AlertDescription, AlertTitle } from "@/shared/components/ui/alert"
+import { Badge } from "@/shared/components/ui/badge"
+import { Button } from "@/shared/components/ui/button"
+import { Textarea } from "@/shared/components/ui/textarea"
+import { Label } from "@/shared/components/ui/label"
+import { useAuthApi } from "@/shared/useApi"
+import { CheckpointMediaLightbox, type LightboxItem } from "@/modules/inspections/checkpoint-media-lightbox"
+
+export type Severity = "good" | "attention" | "critical" | "na" | "not_inspected"
+export type RecordType = "capture_photo" | "record_video" | "record_audio" | "record_conditions" | "wire_frame" | "none"
+
+export type CheckpointMedia = {
+    id: number
+    url: string | null
+    media_type: "photo" | "video" | "audio" | "document"
+    sort_order: number
+    caption?: string | null
+}
+
+export type Checkpoint = {
+    id: number
+    name: string
+    description?: string | null
+    severity?: Severity | null
+    status?: string | null
+    technician_notes?: string | null
+    section_name?: string | null
+    record_type?: RecordType | null
+    condition_rate?: number | null
+    media?: CheckpointMedia[]
+    attachments?: CheckpointMedia[]
+}
+
+const SEVERITY: { value: Severity; label: string; cls: string }[] = [
+    { value: "good", label: "Good", cls: "bg-emerald-100 text-emerald-800 hover:bg-emerald-200 border-emerald-200" },
+    { value: "attention", label: "Attention", cls: "bg-amber-100 text-amber-800 hover:bg-amber-200 border-amber-200" },
+    { value: "critical", label: "Critical", cls: "bg-rose-100 text-rose-800 hover:bg-rose-200 border-rose-200" },
+    { value: "na", label: "N/A", cls: "bg-slate-100 text-slate-700 hover:bg-slate-200 border-slate-200" },
+]
+
+/** A checkpoint is "complete" once severity is set AND the required recording (if any) is captured. */
+export function isCheckpointComplete(cp: Checkpoint): boolean {
+    const sev = (cp.severity as Severity) ?? "not_inspected"
+    if (sev === "not_inspected") return false
+    if (sev === "na") return true
+
+    const rt = (cp.record_type as RecordType) ?? "none"
+    const items = cp.attachments ?? cp.media ?? []
+    if (rt === "capture_photo") return items.some((m) => m.media_type === "photo")
+    if (rt === "record_video") return items.some((m) => m.media_type === "video")
+    if (rt === "record_audio") return items.some((m) => m.media_type === "audio")
+    if (rt === "record_conditions") return cp.condition_rate != null
+    return true
+}
+
+type Props = {
+    open: boolean
+    onOpenChange: (o: boolean) => void
+    /** Full ordered list of checkpoints (typically section-flattened from the page). */
+    checkpoints: Checkpoint[]
+    /** Index into `checkpoints`. null = dialog closed. */
+    activeIndex: number | null
+    onIndexChange: (i: number) => void
+    onSaved: () => void
+    /** Optimistic patch back to the parent so the row updates instantly. */
+    onPatch?: (checkpointId: number, patch: Partial<Checkpoint>) => void
+}
+
+export function CheckpointFillDialog({
+    open,
+    onOpenChange,
+    checkpoints,
+    activeIndex,
+    onIndexChange,
+    onSaved,
+    onPatch,
+}: Props) {
+    const api = useAuthApi()
+    const photoInputRef = useRef<HTMLInputElement>(null)
+    const videoInputRef = useRef<HTMLInputElement>(null)
+    const audioInputRef = useRef<HTMLInputElement>(null)
+
+    // Local state — seeded only when the active checkpoint changes
+    // (not on every parent refetch, so unsaved notes don't get clobbered).
+    const [severity, setSeverity] = useState<Severity>("not_inspected")
+    const [notes, setNotes] = useState("")
+    const [conditionRate, setConditionRate] = useState<number>(50)
+    const [media, setMedia] = useState<CheckpointMedia[]>([])
+    const [savingNote, setSavingNote] = useState(false)
+    const [savingCondition, setSavingCondition] = useState(false)
+    const [uploading, setUploading] = useState(false)
+    const [lightbox, setLightbox] = useState<LightboxItem | null>(null)
+
+    const checkpoint = activeIndex != null ? checkpoints[activeIndex] : null
+    const checkpointId = checkpoint?.id ?? null
+
+    // Reseed only when the *checkpoint identity* changes (open or step nav).
+    useEffect(() => {
+        if (checkpoint) {
+            setSeverity((checkpoint.severity as Severity) ?? "not_inspected")
+            setNotes(checkpoint.technician_notes ?? "")
+            setConditionRate(checkpoint.condition_rate ?? 50)
+            setMedia(checkpoint.attachments ?? checkpoint.media ?? [])
+        }
+        // Intentionally only depends on the id — not on the whole prop object.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [checkpointId, open])
+
+    if (!checkpoint) return null
+
+    const recordType = (checkpoint.record_type as RecordType) ?? "none"
+    const skipsMedia = severity === "na" || recordType === "none" || recordType === "wire_frame"
+    const needsSeverity = severity === "not_inspected"
+    const needsPhoto = !skipsMedia && recordType === "capture_photo" && !media.some((m) => m.media_type === "photo")
+    const needsVideo = !skipsMedia && recordType === "record_video" && !media.some((m) => m.media_type === "video")
+    const needsAudio = !skipsMedia && recordType === "record_audio" && !media.some((m) => m.media_type === "audio")
+    const needsCondition = !skipsMedia && recordType === "record_conditions" && checkpoint.condition_rate == null
+    const allDone = !needsSeverity && !needsPhoto && !needsVideo && !needsAudio && !needsCondition
+
+    const hasUnsavedNote = notes !== (checkpoint.technician_notes ?? "")
+    const isFirst = activeIndex === 0
+    const isLast = activeIndex === checkpoints.length - 1
+
+    // All field saves rely on the optimistic `onPatch` to keep the parent
+    // page in sync. We intentionally do NOT call `onSaved()` here, because a
+    // full inspection refetch on every chip click was causing the dialog tree
+    // to re-render in a way that flickered the modal closed/open. `onSaved`
+    // is reserved for the explicit page-level "load" callsite (initial mount
+    // + nav). The server is authoritative — if anything ever diverges, the
+    // user can reopen the dialog or refresh.
+
+    const updateSeverity = async (s: Severity) => {
+        setSeverity(s)
+        onPatch?.(checkpoint.id, { severity: s })
+        try {
+            await api.inspections.updateCheckpoint(String(checkpoint.id), { severity: s } as any)
+        } catch (e: any) {
+            toast.error(e?.payload?.message ?? "Failed to save finding")
+        }
+    }
+
+    const saveNotes = async () => {
+        if (!hasUnsavedNote) return
+        setSavingNote(true)
+        try {
+            await api.inspections.updateCheckpoint(String(checkpoint.id), { technician_notes: notes } as any)
+            onPatch?.(checkpoint.id, { technician_notes: notes })
+            toast.success("Note saved")
+        } catch (e: any) {
+            toast.error(e?.payload?.message ?? "Failed to save note")
+        } finally {
+            setSavingNote(false)
+        }
+    }
+
+    const saveCondition = async (v: number) => {
+        setConditionRate(v)
+        onPatch?.(checkpoint.id, { condition_rate: v })
+        setSavingCondition(true)
+        try {
+            await api.inspections.updateCheckpoint(String(checkpoint.id), { condition_rate: v } as any)
+        } catch (e: any) {
+            toast.error(e?.payload?.message ?? "Failed to save condition")
+        } finally {
+            setSavingCondition(false)
+        }
+    }
+
+    const handleFiles = async (filesList: FileList | null) => {
+        if (!filesList || filesList.length === 0) return
+        const files = Array.from(filesList).slice(0, 10)
+        setUploading(true)
+        try {
+            const res = await api.inspections.uploadCheckpointAttachments(checkpoint.id, files)
+            const added = (res.data as any[]) ?? []
+            const nextMedia = [...media, ...added]
+            setMedia(nextMedia)
+            onPatch?.(checkpoint.id, { attachments: nextMedia, media: nextMedia } as any)
+            toast.success("Saved")
+        } catch (e: any) {
+            toast.error(e?.payload?.message ?? "Upload failed")
+        } finally {
+            setUploading(false)
+            if (photoInputRef.current) photoInputRef.current.value = ""
+            if (videoInputRef.current) videoInputRef.current.value = ""
+            if (audioInputRef.current) audioInputRef.current.value = ""
+        }
+    }
+
+    const deleteAttachment = async (mediaId: number) => {
+        try {
+            await api.inspections.destroyCheckpointAttachment(checkpoint.id, mediaId)
+            const nextMedia = media.filter((x) => x.id !== mediaId)
+            setMedia(nextMedia)
+            onPatch?.(checkpoint.id, { attachments: nextMedia, media: nextMedia } as any)
+        } catch (e: any) {
+            toast.error(e?.payload?.message ?? "Failed to remove")
+        }
+    }
+
+    const goNext = async () => {
+        // Belt-and-suspenders — the button is also `disabled={!allDone}`.
+        if (!allDone) return
+        if (hasUnsavedNote) await saveNotes()
+        if (isLast) {
+            onOpenChange(false)
+        } else if (activeIndex != null) {
+            onIndexChange(activeIndex + 1)
+        }
+    }
+
+    const goPrev = async () => {
+        if (hasUnsavedNote) await saveNotes()
+        if (activeIndex != null && activeIndex > 0) onIndexChange(activeIndex - 1)
+    }
+
+    return (
+        <>
+            <Dialog open={open} onOpenChange={onOpenChange}>
+                <DialogContent className="sm:max-w-xl max-h-[90vh] overflow-y-auto">
+                    <DialogHeader>
+                        <div className="flex items-center justify-between gap-2">
+                            <div className="min-w-0">
+                                <DialogTitle className="flex items-center gap-2">
+                                    <span className="truncate">{checkpoint.name}</span>
+                                    {allDone && <CheckCircle2 className="size-4 text-emerald-600 shrink-0" />}
+                                </DialogTitle>
+                                {checkpoint.section_name && (
+                                    <DialogDescription>
+                                        {checkpoint.section_name} · {(activeIndex ?? 0) + 1} of {checkpoints.length}
+                                    </DialogDescription>
+                                )}
+                            </div>
+                        </div>
+                    </DialogHeader>
+
+                    {!allDone && (
+                        <Alert variant="default" className="border-amber-200 bg-amber-50/60">
+                            <AlertTriangle className="text-amber-700" />
+                            <AlertTitle className="text-amber-900">Still required</AlertTitle>
+                            <AlertDescription className="text-amber-900/90">
+                                <ul className="list-disc list-inside space-y-0.5">
+                                    {needsSeverity && <li>Pick a finding</li>}
+                                    {needsPhoto && <li>Add at least one photo</li>}
+                                    {needsVideo && <li>Add at least one video</li>}
+                                    {needsAudio && <li>Add at least one audio recording</li>}
+                                    {needsCondition && <li>Set the condition rating</li>}
+                                </ul>
+                            </AlertDescription>
+                        </Alert>
+                    )}
+
+                    <div className="space-y-5">
+                        {/* Finding */}
+                        <div>
+                            <div className="mb-2 flex items-center justify-between">
+                                <Label className="flex items-center gap-2">
+                                    Finding <Badge variant="secondary" className="text-[10px]">required</Badge>
+                                </Label>
+                                {!needsSeverity && <CheckCircle2 className="size-4 text-emerald-600" />}
+                            </div>
+                            <div className="flex flex-wrap gap-2">
+                                {SEVERITY.map((opt) => (
+                                    <button
+                                        key={opt.value}
+                                        type="button"
+                                        onClick={() => updateSeverity(opt.value)}
+                                        className={`rounded-full px-4 py-1.5 text-sm font-medium border transition ${opt.cls} ${
+                                            severity === opt.value ? "ring-2 ring-offset-1 ring-foreground/30" : "opacity-70 hover:opacity-100"
+                                        }`}
+                                    >
+                                        {opt.label}
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+
+                        {/* Condition rating */}
+                        {recordType === "record_conditions" && severity !== "na" && (
+                            <div>
+                                <div className="mb-2 flex items-center justify-between">
+                                    <Label className="flex items-center gap-2">
+                                        Condition rating <Badge variant="secondary" className="text-[10px]">required</Badge>
+                                    </Label>
+                                    {!needsCondition && <CheckCircle2 className="size-4 text-emerald-600" />}
+                                </div>
+                                <div className="flex items-center gap-3">
+                                    <input
+                                        type="range"
+                                        min={0}
+                                        max={100}
+                                        step={5}
+                                        value={conditionRate}
+                                        onChange={(e) => setConditionRate(Number(e.target.value))}
+                                        onMouseUp={(e) => saveCondition(Number((e.target as HTMLInputElement).value))}
+                                        onTouchEnd={(e) => saveCondition(Number((e.target as HTMLInputElement).value))}
+                                        className="flex-1 accent-foreground"
+                                        disabled={savingCondition}
+                                    />
+                                    <span className="w-12 text-right text-sm tabular-nums font-medium">{conditionRate}%</span>
+                                </div>
+                                <p className="text-xs text-muted-foreground mt-1">0 = worn / broken · 100 = like new.</p>
+                            </div>
+                        )}
+
+                        {/* Media — only the relevant kind for this record_type */}
+                        {!skipsMedia && (
+                            <MediaSection
+                                recordType={recordType}
+                                media={media}
+                                uploading={uploading}
+                                required={needsPhoto || needsVideo || needsAudio}
+                                satisfied={
+                                    (recordType === "capture_photo" && !needsPhoto) ||
+                                    (recordType === "record_video" && !needsVideo) ||
+                                    (recordType === "record_audio" && !needsAudio)
+                                }
+                                onPick={(kind) => {
+                                    if (kind === "photo") photoInputRef.current?.click()
+                                    else if (kind === "video") videoInputRef.current?.click()
+                                    else audioInputRef.current?.click()
+                                }}
+                                onDelete={deleteAttachment}
+                                onPreview={(item) => setLightbox(item)}
+                            />
+                        )}
+
+                        <input ref={photoInputRef} type="file" accept="image/*" capture="environment" multiple onChange={(e) => handleFiles(e.target.files)} className="hidden" />
+                        <input ref={videoInputRef} type="file" accept="video/*" capture="environment" multiple onChange={(e) => handleFiles(e.target.files)} className="hidden" />
+                        <input ref={audioInputRef} type="file" accept="audio/*" capture multiple onChange={(e) => handleFiles(e.target.files)} className="hidden" />
+
+                        {/* Notes */}
+                        <div>
+                            <div className="mb-2 flex items-center justify-between">
+                                <Label htmlFor="cp-notes" className="flex items-center gap-2">
+                                    <StickyNote className="size-3.5" /> Technician notes
+                                    <Badge variant="outline" className="text-[10px]">optional</Badge>
+                                </Label>
+                                {hasUnsavedNote && (
+                                    <span className="text-[11px] text-amber-700">Unsaved</span>
+                                )}
+                            </div>
+                            <Textarea
+                                id="cp-notes"
+                                value={notes}
+                                onChange={(e) => setNotes(e.target.value)}
+                                rows={3}
+                                placeholder="e.g. Pads at 3mm, suggest replacement before next service"
+                            />
+                            <div className="mt-2 flex justify-end">
+                                <Button
+                                    type="button"
+                                    size="sm"
+                                    variant={hasUnsavedNote ? "default" : "outline"}
+                                    onClick={saveNotes}
+                                    disabled={savingNote || !hasUnsavedNote}
+                                >
+                                    {savingNote ? "Saving…" : "Update note"}
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <DialogFooter className="!justify-between items-center gap-2 flex-wrap">
+                        <Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>
+                            <X className="size-4" /> Close
+                        </Button>
+                        <div className="flex flex-col items-end gap-1">
+                            <div className="flex items-center gap-2">
+                                <Button variant="outline" size="sm" onClick={goPrev} disabled={isFirst}>
+                                    <ChevronLeft className="size-4" /> Previous
+                                </Button>
+                                <Button
+                                    size="sm"
+                                    onClick={goNext}
+                                    disabled={!allDone}
+                                    title={!allDone ? "Complete the required fields to continue" : undefined}
+                                >
+                                    {isLast ? "Done" : (hasUnsavedNote ? "Save & next" : "Next")}
+                                    {!isLast && <ChevronRight className="size-4" />}
+                                </Button>
+                            </div>
+                            {!allDone && (
+                                <span className="text-[11px] text-muted-foreground">
+                                    Complete the required fields to continue.
+                                </span>
+                            )}
+                        </div>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            <CheckpointMediaLightbox
+                open={!!lightbox}
+                onOpenChange={(o) => { if (!o) setLightbox(null) }}
+                item={lightbox}
+            />
+        </>
+    )
+}
+
+function MediaSection({
+    recordType,
+    media,
+    uploading,
+    required,
+    satisfied,
+    onPick,
+    onDelete,
+    onPreview,
+}: {
+    recordType: RecordType
+    media: CheckpointMedia[]
+    uploading: boolean
+    required: boolean
+    satisfied: boolean
+    onPick: (kind: "photo" | "video" | "audio") => void
+    onDelete: (id: number) => void
+    onPreview: (item: LightboxItem) => void
+}) {
+    let label = "Recording"
+    let icon = <Camera className="size-3.5" />
+    let cta = "Take / pick file"
+    let kind: "photo" | "video" | "audio" = "photo"
+
+    if (recordType === "capture_photo") { label = "Photo"; cta = "Take or pick photo"; icon = <Camera className="size-3.5" />; kind = "photo" }
+    if (recordType === "record_video") { label = "Video"; cta = "Record or pick video"; icon = <Video className="size-3.5" />; kind = "video" }
+    if (recordType === "record_audio") { label = "Audio"; cta = "Record or pick audio"; icon = <Mic className="size-3.5" />; kind = "audio" }
+
+    const matching = media.filter((m) => {
+        if (recordType === "capture_photo") return m.media_type === "photo"
+        if (recordType === "record_video") return m.media_type === "video"
+        if (recordType === "record_audio") return m.media_type === "audio"
+        return true
+    })
+
+    return (
+        <div>
+            <div className="mb-2 flex items-center justify-between">
+                <Label className="flex items-center gap-2">
+                    {label}
+                    {required && <Badge variant="secondary" className="text-[10px]">required</Badge>}
+                    {satisfied && <CheckCircle2 className="size-4 text-emerald-600" />}
+                </Label>
+                <Button type="button" size="sm" variant="outline" onClick={() => onPick(kind)} disabled={uploading}>
+                    {uploading ? <Loader2 className="size-3.5 animate-spin" /> : icon}
+                    {uploading ? "Uploading…" : cta}
+                </Button>
+            </div>
+            {matching.length === 0 ? (
+                <div className="rounded-md border border-dashed bg-muted/40 p-6 text-center text-xs text-muted-foreground flex flex-col items-center gap-1.5">
+                    <ImageIcon className="size-5" />
+                    {required ? `Tap the button above to add a ${label.toLowerCase()}` : `No ${label.toLowerCase()} yet`}
+                </div>
+            ) : (
+                <div className={kind === "audio" ? "space-y-2" : "grid grid-cols-3 sm:grid-cols-4 gap-2"}>
+                    {matching.map((m) => (
+                        <div key={m.id} className="relative group rounded-md overflow-hidden border bg-muted">
+                            <button
+                                type="button"
+                                onClick={() => onPreview(m as LightboxItem)}
+                                className="block w-full"
+                            >
+                                {m.media_type === "photo" && m.url && (
+                                    // eslint-disable-next-line @next/next/no-img-element
+                                    <img src={m.url} alt={m.caption ?? ""} className="block w-full aspect-square object-cover" />
+                                )}
+                                {m.media_type === "video" && m.url && (
+                                    <div className="relative w-full aspect-square">
+                                        <video src={m.url} className="block w-full h-full object-cover" />
+                                        <div className="absolute inset-0 flex items-center justify-center bg-black/30 text-white">
+                                            <Video className="size-6" />
+                                        </div>
+                                    </div>
+                                )}
+                                {m.media_type === "audio" && m.url && (
+                                    <div className="p-2 w-full">
+                                        <audio src={m.url} controls className="w-full" />
+                                    </div>
+                                )}
+                            </button>
+                            <Badge variant="secondary" className="absolute top-1 left-1 text-[9px] capitalize">{m.media_type}</Badge>
+                            <button
+                                type="button"
+                                onClick={() => onDelete(m.id)}
+                                className="absolute top-1 right-1 rounded-full bg-foreground/80 text-background p-1 opacity-0 group-hover:opacity-100 transition"
+                                aria-label="Remove"
+                            >
+                                <Trash2 className="size-3" />
+                            </button>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}
diff --git a/apps/dashboard/modules/inspections/checkpoint-media-lightbox.tsx b/apps/dashboard/modules/inspections/checkpoint-media-lightbox.tsx
new file mode 100644
index 0000000..2952738
--- /dev/null
+++ b/apps/dashboard/modules/inspections/checkpoint-media-lightbox.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import { Dialog, DialogContent } from "@/shared/components/ui/dialog"
+
+export type LightboxItem = {
+    id: number
+    url: string | null
+    media_type: "photo" | "video" | "audio" | "document"
+    caption?: string | null
+}
+
+export function CheckpointMediaLightbox({
+    open,
+    onOpenChange,
+    item,
+}: {
+    open: boolean
+    onOpenChange: (o: boolean) => void
+    item: LightboxItem | null
+}) {
+    if (!item) return null
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="max-w-3xl p-0 bg-black/95 border-0">
+                <div className="flex items-center justify-center min-h-[60vh] max-h-[85vh] p-4">
+                    {item.media_type === "photo" && item.url && (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img
+                            src={item.url}
+                            alt={item.caption ?? ""}
+                            className="max-w-full max-h-[80vh] object-contain"
+                        />
+                    )}
+                    {item.media_type === "video" && item.url && (
+                        <video src={item.url} controls autoPlay className="max-w-full max-h-[80vh]" />
+                    )}
+                    {item.media_type === "audio" && item.url && (
+                        <audio src={item.url} controls className="w-full" />
+                    )}
+                    {item.media_type === "document" && item.url && (
+                        <a
+                            href={item.url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-white underline"
+                        >
+                            Open document
+                        </a>
+                    )}
+                </div>
+                {item.caption && (
+                    <div className="bg-black/80 text-white text-sm px-4 py-2 text-center">
+                        {item.caption}
+                    </div>
+                )}
+            </DialogContent>
+        </Dialog>
+    )
+}
diff --git a/apps/dashboard/modules/inspections/inline-forms/inspection-category-inline-form.tsx b/apps/dashboard/modules/inspections/inline-forms/inspection-category-inline-form.tsx
index 9c6eabb..f374b71 100644
--- a/apps/dashboard/modules/inspections/inline-forms/inspection-category-inline-form.tsx
+++ b/apps/dashboard/modules/inspections/inline-forms/inspection-category-inline-form.tsx
@@ -27,14 +27,21 @@ export function InspectionCategoryInlineForm({ onSuccess }: InlineCreateFormProp
     const handleSubmit = async (values: FormValues) => {
         try {
             const result = await api.inspections.createCategory({
-                title: values.inspection_name,
+                inspection_name: values.inspection_name,
             } as any)
             toast.success("Inspection category created")
             form.reset()
             const item = (result as any)?.data ?? result
-            onSuccess({ value: String(item.id), label: item.name ?? values.inspection_name })
-        } catch {
-            toast.error("Failed to create inspection category")
+            onSuccess({
+                value: String(item.id),
+                label: item.inspection_name ?? values.inspection_name,
+            })
+        } catch (e: any) {
+            const errors = e?.payload?.errors
+            const firstError = errors && typeof errors === "object"
+                ? (Object.values(errors)[0] as string[])?.[0]
+                : null
+            toast.error(firstError ?? e?.message ?? "Failed to create inspection category")
         }
     }
 
diff --git a/apps/dashboard/modules/inspections/inspection-actions.tsx b/apps/dashboard/modules/inspections/inspection-actions.tsx
index 110467c..5fc3c64 100644
--- a/apps/dashboard/modules/inspections/inspection-actions.tsx
+++ b/apps/dashboard/modules/inspections/inspection-actions.tsx
@@ -12,11 +12,13 @@ import {
     DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from "@/shared/components/ui/dropdown-menu"
-import { Ellipsis, Pencil, Trash2, Play, CheckCircle2, Printer } from "lucide-react"
+import { Ellipsis, Pencil, Trash2, Play, CheckCircle2, Printer, Share2 } from "lucide-react"
+import { useState } from "react"
 import { toast } from "sonner"
 import { useFormDialog } from "@/shared/components/form-dialog"
 import { InspectionForm } from "./inspection-form"
 import { useDocumentPrint } from "@/shared/hooks/use-document-print"
+import { ShareDocumentDialog } from "@/shared/components/share-document-dialog"
 
 type InspectionActionsProps = {
     inspectionId: string
@@ -34,6 +36,7 @@ export function InspectionActions({ inspectionId, status, onStatusChange }: Insp
     const router = useRouter()
     const editDialog = useFormDialog("inspection-details-edit")
     const { print, isPrinting } = useDocumentPrint()
+    const [shareOpen, setShareOpen] = useState(false)
 
     const handleDelete = async () => {
         const promise = api.inspections.destroy(inspectionId)
@@ -79,6 +82,10 @@ export function InspectionActions({ inspectionId, status, onStatusChange }: Insp
                         <Printer className="size-4" />
                         {isPrinting ? "Printing..." : "Print"}
                     </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => setShareOpen(true)}>
+                        <Share2 className="size-4" />
+                        Share
+                    </DropdownMenuItem>
                     {transition && (
                         <DropdownMenuItem onClick={() => handleStatusChange(transition.next)}>
                             <transition.icon className="size-4" />
@@ -93,6 +100,8 @@ export function InspectionActions({ inspectionId, status, onStatusChange }: Insp
                 </DropdownMenuContent>
             </DropdownMenu>
 
+            <ShareDocumentDialog type="inspection" id={inspectionId} open={shareOpen} onOpenChange={setShareOpen} />
+
             <Dialog open={editDialog.isOpen} onOpenChange={(v) => { if (!v) editDialog.close() }}>
                 <DialogContent className="min-w-xl lg:min-w-4xl">
                     <DialogHeader>
diff --git a/apps/dashboard/modules/inspections/inspection-detail-header.tsx b/apps/dashboard/modules/inspections/inspection-detail-header.tsx
new file mode 100644
index 0000000..0a34679
--- /dev/null
+++ b/apps/dashboard/modules/inspections/inspection-detail-header.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { ClipboardList, Printer, Share2 } from "lucide-react"
+import { Button } from "@/shared/components/ui/button"
+import { InspectionShareDialog } from "@/modules/inspections/inspection-share-dialog"
+
+/**
+ * Client island for the inspection detail page header — exposes the Share
+ * dialog and a quick link to the technician's checkpoints page without
+ * pulling the entire page out of the server-component tree.
+ */
+export function InspectionDetailHeader({
+    inspectionId,
+    title,
+}: {
+    inspectionId: number | string
+    title?: string
+}) {
+    const [shareOpen, setShareOpen] = useState(false)
+
+    return (
+        <div className="flex items-center justify-between flex-wrap gap-2 mb-3">
+            <div className="min-w-0">
+                <div className="text-xs text-muted-foreground uppercase tracking-wide">Inspection</div>
+                <h1 className="text-xl sm:text-2xl font-bold truncate">{title ?? "Inspection"}</h1>
+            </div>
+            <div className="flex items-center gap-2">
+                <Button variant="outline" size="sm" asChild>
+                    <Link href={`/sales/inspections/${inspectionId}/checkpoints`}>
+                        <ClipboardList className="size-4" /> Checkpoints
+                    </Link>
+                </Button>
+                <Button variant="default" size="sm" onClick={() => setShareOpen(true)}>
+                    <Share2 className="size-4" /> Share with customer
+                </Button>
+            </div>
+
+            <InspectionShareDialog open={shareOpen} onOpenChange={setShareOpen} inspectionId={inspectionId} />
+        </div>
+    )
+}
diff --git a/apps/dashboard/modules/inspections/inspection-form.tsx b/apps/dashboard/modules/inspections/inspection-form.tsx
index fdc6801..66e4c3d 100644
--- a/apps/dashboard/modules/inspections/inspection-form.tsx
+++ b/apps/dashboard/modules/inspections/inspection-form.tsx
@@ -1,5 +1,7 @@
 "use client"
 
+import { useEffect, useRef } from "react"
+import { useFormContext, useWatch } from "react-hook-form"
 import { AlertTriangle, Plus, Save } from "lucide-react"
 
 import { Button } from "@/shared/components/ui/button"
@@ -30,6 +32,7 @@ import {
     INSPECTION_ROUTES,
     DEPARTMENT_ROUTES,
     JOB_CARD_ROUTES,
+    TAX_ROUTES,
     InspectionStatus,
     RateType,
 } from "@garage/api"
@@ -67,7 +70,7 @@ const DEFAULT_VALUES: InspectionFormValues = {
     rate: 0,
     working_hours: 0,
     labor_hours: 0,
-    tax: "",
+    tax: null,
     chart_of_account: "",
 }
 
@@ -100,7 +103,14 @@ function mapToFormValues(data: unknown): InspectionFormValues {
         rate: d.rate != null ? Number(d.rate) : 0,
         working_hours: d.working_hours != null ? Number(d.working_hours) : 0,
         labor_hours: d.labor_hours != null ? Number(d.labor_hours) : 0,
-        tax: d.tax ?? "",
+        tax: d.tax_id
+            ? {
+                value: String(d.tax_id),
+                label: d.tax?.title
+                    ? `${d.tax.title}${d.tax?.rate != null ? ` (${d.tax.rate}%)` : ""}`
+                    : `#${d.tax_id}`,
+            }
+            : null,
         chart_of_account: d.chart_of_account ?? "",
     }
 }
@@ -126,7 +136,7 @@ function mapFormToPayload(values: InspectionFormValues) {
         rate: values.rate ?? undefined,
         working_hours: values.working_hours ?? undefined,
         labor_hours: values.labor_hours ?? undefined,
-        tax: values.tax || undefined,
+        tax_id: values.tax?.value ? Number(values.tax.value) : undefined,
         chart_of_account: values.chart_of_account || undefined,
     }
 }
@@ -150,6 +160,37 @@ const mapLookupOption = (item: any) => ({
 
 const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
 
+// ── Customer-scoped vehicle picker ──
+// Watches the `customer` field. When it changes, clears the `vehicle` selection so a stale
+// vehicle from a previous customer doesn't get submitted. While no customer is picked, the
+// vehicle field is disabled — picking a vehicle without a customer makes no garage sense.
+
+function CustomerScopedVehicleField() {
+    const { setValue, control, getValues } = useFormContext<InspectionFormValues>()
+    const customer = useWatch({ control, name: "customer" })
+    const customerId = customer?.value ?? null
+    const lastCustomerIdRef = useRef<string | null>(customerId)
+
+    useEffect(() => {
+        if (lastCustomerIdRef.current !== customerId) {
+            const currentVehicle = getValues("vehicle")
+            if (currentVehicle) {
+                setValue("vehicle", null, { shouldDirty: true, shouldValidate: false })
+            }
+            lastCustomerIdRef.current = customerId
+        }
+    }, [customerId, setValue, getValues])
+
+    return (
+        <RhfVehicleSelectField
+            name="vehicle"
+            customer_id={customerId}
+            disabled={!customerId}
+            placeholder={customerId ? "Search this customer's vehicles…" : "Select a customer first"}
+        />
+    )
+}
+
 // ── Component ──
 
 export function InspectionForm({ resourceId, initialData, onSuccess }: InspectionFormProps) {
@@ -200,7 +241,7 @@ export function InspectionForm({ resourceId, initialData, onSuccess }: Inspectio
 
                 <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                     <RhfCustomerSelectField name="customer" />
-                    <RhfVehicleSelectField name="vehicle" />
+                    <CustomerScopedVehicleField />
                 </div>
 
                 <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
@@ -221,7 +262,10 @@ export function InspectionForm({ resourceId, initialData, onSuccess }: Inspectio
                         placeholder="Select category"
                         queryKey={[INSPECTION_ROUTES.CATEGORIES]}
                         listFn={() => api.inspections.listCategories()}
-                        mapOption={mapLookupOption}
+                        mapOption={(item: any) => ({
+                            value: String(item.id),
+                            label: item.inspection_name ?? item.name ?? item.title ?? `#${item.id}`,
+                        })}
                         createForm={(props) => <InspectionCategoryInlineForm {...props} />}
                         createLabel="Inspection Category"
                         {...STORE_OBJECT}
@@ -283,7 +327,20 @@ export function InspectionForm({ resourceId, initialData, onSuccess }: Inspectio
                 <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
                     <RhfTextField name="quantity" label="Quantity" type="number" placeholder="1" />
                     <RhfTextField name="rate" label="Rate" type="number" placeholder="0.00" />
-                    <RhfTextField name="tax" label="Tax" placeholder="e.g. 5%" />
+                    <RhfAsyncSelectField
+                        name="tax"
+                        label="Tax"
+                        placeholder="Select tax rate"
+                        queryKey={[TAX_ROUTES.INDEX]}
+                        listFn={() => api.taxes.list()}
+                        mapOption={(item: any) => ({
+                            value: String(item.id),
+                            label: item.title
+                                ? `${item.title}${item.rate != null ? ` (${item.rate}%)` : ""}`
+                                : `#${item.id}`,
+                        })}
+                        {...STORE_OBJECT}
+                    />
                 </div>
 
                 <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
diff --git a/apps/dashboard/modules/inspections/inspection-from-template-form.tsx b/apps/dashboard/modules/inspections/inspection-from-template-form.tsx
new file mode 100644
index 0000000..36944ba
--- /dev/null
+++ b/apps/dashboard/modules/inspections/inspection-from-template-form.tsx
@@ -0,0 +1,262 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+import { toast } from "sonner"
+import { ClipboardList, Plus } from "lucide-react"
+
+import { Button } from "@/shared/components/ui/button"
+import { FieldGroup } from "@/shared/components/ui/field"
+import {
+    Rhform,
+    RhfTextField,
+    RhfTextareaField,
+    RhfDateField,
+    RhfTimeField,
+} from "@/shared/components/form"
+import { useAuthApi } from "@/shared/useApi"
+import type { InspectionTemplate } from "@garage/api"
+import { RhfCustomerSelectField } from "@/modules/customers/rhf-customer-select-field"
+import { RhfVehicleSelectField } from "@/modules/vehicles/rhf-vehicle-select-field"
+import { RhfEmployeeSelectField } from "@/modules/employees/rhf-employee-select-field"
+import { RhfAsyncSelectField } from "@/shared/components/form"
+import { DEPARTMENT_ROUTES } from "@garage/api"
+import { useFormContext, useWatch } from "react-hook-form"
+import { useEffect as useReactEffect, useRef } from "react"
+
+const relationFieldSchema = z
+    .object({ value: z.string(), label: z.string() })
+    .nullable()
+
+const schema = z.object({
+    customer: relationFieldSchema.refine((v) => !!v?.value, "Customer is required"),
+    vehicle: relationFieldSchema.refine((v) => !!v?.value, "Vehicle is required"),
+    department: relationFieldSchema.refine((v) => !!v?.value, "Department is required"),
+    employee: relationFieldSchema.refine((v) => !!v?.value, "Employee is required"),
+    title: z.string().min(1, "Title is required").max(100),
+    order_number: z.string().min(1, "Order number is required").max(100),
+    date: z.string().min(1, "Date is required"),
+    time: z.string().min(1, "Time is required"),
+    odometer: z.coerce.number().int().min(0).optional().or(z.literal("")).transform(v => v === "" ? undefined : v),
+    note: z.string().optional(),
+})
+
+type FormValues = z.infer<typeof schema>
+
+const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
+const mapLookupOption = (item: any) => ({ value: String(item.id), label: item.name ?? item.title ?? String(item.id) })
+
+// Scope vehicle picker to selected customer
+function CustomerScopedVehicleField() {
+    const { setValue, control, getValues } = useFormContext<FormValues>()
+    const customer = useWatch({ control, name: "customer" })
+    const customerId = customer?.value ?? null
+    const lastRef = useRef<string | null>(customerId)
+
+    useReactEffect(() => {
+        if (lastRef.current !== customerId) {
+            if (getValues("vehicle")) {
+                setValue("vehicle", null, { shouldDirty: true, shouldValidate: false })
+            }
+            lastRef.current = customerId
+        }
+    }, [customerId, setValue, getValues])
+
+    return (
+        <RhfVehicleSelectField
+            name="vehicle"
+            customer_id={customerId}
+            disabled={!customerId}
+            placeholder={customerId ? "Search this customer's vehicles…" : "Select a customer first"}
+        />
+    )
+}
+
+export function InspectionFromTemplateForm({ onSuccess }: { onSuccess?: (inspectionId: number) => void }) {
+    const api = useAuthApi()
+    const [step, setStep] = useState<"pick-template" | "fill-details">("pick-template")
+    const [templates, setTemplates] = useState<InspectionTemplate[]>([])
+    const [selectedTemplate, setSelectedTemplate] = useState<InspectionTemplate | null>(null)
+    const [loadingTemplates, setLoadingTemplates] = useState(true)
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(schema) as any,
+        defaultValues: {
+            customer: null,
+            vehicle: null,
+            department: null,
+            employee: null,
+            title: "",
+            order_number: "",
+            date: new Date().toISOString().slice(0, 10),
+            time: new Date().toTimeString().slice(0, 8),
+            odometer: undefined,
+            note: "",
+        },
+    })
+
+    useEffect(() => {
+        let cancelled = false
+        setLoadingTemplates(true)
+        api.inspectionTemplates.list({ is_active: true }).then((res) => {
+            if (!cancelled) {
+                setTemplates(res.data ?? [])
+                setLoadingTemplates(false)
+            }
+        }).catch((e: any) => {
+            if (!cancelled) {
+                toast.error(e?.message ?? "Failed to load templates")
+                setLoadingTemplates(false)
+            }
+        })
+        return () => { cancelled = true }
+    }, [])
+
+    const pickTemplate = (t: InspectionTemplate) => {
+        setSelectedTemplate(t)
+        form.setValue("title", t.name)
+        setStep("fill-details")
+    }
+
+    const handleSubmit = async (values: FormValues) => {
+        if (!selectedTemplate) return
+        try {
+            const res = await api.inspections.createFromTemplate({
+                template_id: selectedTemplate.id,
+                title: values.title,
+                customer_id: values.customer!.value,
+                vehicle_id: values.vehicle!.value,
+                department_id: values.department!.value,
+                employee_id: values.employee!.value,
+                order_number: values.order_number,
+                date: values.date,
+                time: values.time,
+                odometer: values.odometer as any,
+                note: values.note || undefined,
+            })
+            const created = (res as any)?.data
+            toast.success("Inspection created with checkpoints from template")
+            onSuccess?.(created?.id)
+        } catch (e: any) {
+            const errors = e?.payload?.errors
+            const firstError = errors && typeof errors === "object"
+                ? (Object.values(errors)[0] as string[])?.[0]
+                : null
+            toast.error(firstError ?? e?.message ?? "Failed to create inspection")
+        }
+    }
+
+    if (step === "pick-template") {
+        return (
+            <div className="space-y-3">
+                <div>
+                    <h3 className="text-sm font-medium">Choose an inspection template</h3>
+                    <p className="text-xs text-muted-foreground">
+                        The selected template's sections and checkpoints will be cloned onto the new inspection.
+                    </p>
+                </div>
+                {loadingTemplates && (
+                    <div className="rounded border-dashed border p-6 text-center text-sm text-muted-foreground">Loading templates…</div>
+                )}
+                {!loadingTemplates && templates.length === 0 && (
+                    <div className="rounded border-dashed border p-6 text-center text-sm text-muted-foreground">
+                        No active templates. Create one under Settings → Inspection Templates.
+                    </div>
+                )}
+                {!loadingTemplates && templates.length > 0 && (
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 max-h-[60vh] overflow-y-auto">
+                        {templates.map((t) => {
+                            const sectionCount = t.sections?.length ?? 0
+                            const cpCount = (t.sections ?? []).reduce((s, sec) => s + (sec.check_points?.length ?? 0), 0)
+                            const empty = cpCount === 0
+                            return (
+                                <button
+                                    type="button"
+                                    key={t.id}
+                                    onClick={() => !empty && pickTemplate(t)}
+                                    disabled={empty}
+                                    title={empty ? "This template has no checkpoints yet — add some in Settings → Inspection Templates" : undefined}
+                                    className={`rounded border p-3 text-left transition ${
+                                        empty
+                                            ? "opacity-50 cursor-not-allowed border-dashed"
+                                            : "hover:border-primary hover:bg-primary/5"
+                                    }`}
+                                >
+                                    <div className="flex items-start gap-2">
+                                        <ClipboardList className="size-4 mt-0.5 text-muted-foreground" />
+                                        <div className="flex-1 min-w-0">
+                                            <div className="font-medium text-sm flex items-center gap-2">
+                                                {t.name}
+                                                {empty && (
+                                                    <span className="text-[10px] uppercase tracking-wide bg-amber-100 text-amber-800 px-1.5 py-0.5 rounded">
+                                                        Empty
+                                                    </span>
+                                                )}
+                                            </div>
+                                            {t.description && (
+                                                <div className="text-xs text-muted-foreground line-clamp-2 mt-0.5">
+                                                    {t.description}
+                                                </div>
+                                            )}
+                                            <div className="text-xs text-muted-foreground mt-1">
+                                                {sectionCount} sections · {cpCount} checkpoints
+                                            </div>
+                                        </div>
+                                    </div>
+                                </button>
+                            )
+                        })}
+                    </div>
+                )}
+            </div>
+        )
+    }
+
+    return (
+        <Rhform form={form} onSubmit={handleSubmit}>
+            <div className="flex items-center justify-between mb-3">
+                <div className="text-sm">
+                    <span className="text-muted-foreground">Template:</span>{" "}
+                    <span className="font-medium">{selectedTemplate?.name}</span>
+                </div>
+                <Button type="button" variant="ghost" size="sm" onClick={() => setStep("pick-template")}>
+                    Change template
+                </Button>
+            </div>
+            <FieldGroup>
+                <RhfTextField name="title" label="Title" placeholder="e.g. Pre-purchase" required />
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfCustomerSelectField name="customer" />
+                    <CustomerScopedVehicleField />
+                </div>
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfAsyncSelectField
+                        name="department"
+                        label="Department"
+                        placeholder="Select department"
+                        queryKey={[DEPARTMENT_ROUTES.INDEX]}
+                        listFn={() => api.departments.list()}
+                        mapOption={mapLookupOption}
+                        {...STORE_OBJECT}
+                    />
+                    <RhfEmployeeSelectField name="employee" />
+                </div>
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                    <RhfTextField name="order_number" label="Order number" placeholder="e.g. ORD-001" required />
+                    <RhfDateField name="date" label="Date" />
+                    <RhfTimeField name="time" label="Time" withSeconds />
+                </div>
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfTextField name="odometer" label="Odometer" type="number" placeholder="km" />
+                </div>
+                <RhfTextareaField name="note" label="Note" placeholder="Internal notes…" />
+                <Button type="submit" variant="default" disabled={form.formState.isSubmitting}>
+                    <Plus className="size-4" />
+                    {form.formState.isSubmitting ? "Creating…" : "Create inspection"}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}
diff --git a/apps/dashboard/modules/inspections/inspection-row-actions.tsx b/apps/dashboard/modules/inspections/inspection-row-actions.tsx
new file mode 100644
index 0000000..84e08ae
--- /dev/null
+++ b/apps/dashboard/modules/inspections/inspection-row-actions.tsx
@@ -0,0 +1,164 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { useQueryClient } from "@tanstack/react-query"
+import {
+    CheckCircle2,
+    ClipboardList,
+    Eye,
+    MoreHorizontal,
+    Pencil,
+    PlayCircle,
+    Share2,
+    Trash2,
+    XCircle,
+} from "lucide-react"
+import { toast } from "sonner"
+
+import { Button } from "@/shared/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/shared/components/ui/dropdown-menu"
+import { useAuthApi } from "@/shared/useApi"
+import { confirm } from "@/shared/components/confirm-dialog"
+import { InspectionShareDialog } from "@/modules/inspections/inspection-share-dialog"
+import { INSPECTION_ROUTES } from "@garage/api"
+
+type InspectionStatus = "in_progress" | "completed" | "cancelled"
+
+type InspectionRow = {
+    id: number | string
+    status?: InspectionStatus | string
+}
+
+export function InspectionRowActions({
+    inspection,
+    onEdit,
+    onDelete,
+}: {
+    inspection: InspectionRow
+    onEdit: () => void
+    onDelete: () => Promise<unknown>
+}) {
+    const router = useRouter()
+    const api = useAuthApi()
+    const queryClient = useQueryClient()
+    const [shareOpen, setShareOpen] = useState(false)
+
+    const inspectionId = String(inspection.id)
+    const status = inspection.status as InspectionStatus | undefined
+
+    const invalidate = () => {
+        queryClient.invalidateQueries({ queryKey: [INSPECTION_ROUTES.INDEX] })
+        queryClient.invalidateQueries({ queryKey: [INSPECTION_ROUTES.BY_ID, inspectionId] })
+    }
+
+    const changeStatus = async (next: InspectionStatus, label: string) => {
+        try {
+            await api.inspections.changeStatus({
+                id: Number(inspectionId),
+                status: next,
+            } as any)
+            toast.success(label)
+            invalidate()
+        } catch (e: any) {
+            // Surface backend validation / permission errors verbatim so the user
+            // (and we) can see what actually failed.
+            const errors = e?.payload?.errors
+            const firstFieldError = errors && typeof errors === "object"
+                ? (Object.values(errors)[0] as string[])?.[0]
+                : null
+            const msg =
+                firstFieldError ??
+                e?.payload?.message ??
+                e?.message ??
+                `Failed: ${label}`
+            toast.error(msg)
+            // eslint-disable-next-line no-console
+            console.error("changeStatus failed", { inspectionId, next, error: e })
+        }
+    }
+
+    const handleDelete = async (e: React.MouseEvent) => {
+        e.stopPropagation()
+        const confirmed = await confirm({
+            title: "Delete this inspection?",
+            description: "This will remove the inspection and all its checkpoints. This cannot be undone.",
+            confirmLabel: "Delete",
+            variant: "destructive",
+        })
+        if (confirmed) {
+            try {
+                await onDelete()
+                toast.success("Inspection deleted")
+            } catch (err: any) {
+                toast.error(err?.payload?.message ?? err?.message ?? "Failed to delete inspection")
+            }
+        }
+    }
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    <MoreHorizontal className="size-4" />
+                    <span className="sr-only">Inspection actions</span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" onClick={(e) => e.stopPropagation()}>
+                <DropdownMenuItem onClick={() => router.push(`/sales/inspections/${inspectionId}`)}>
+                    <Eye className="size-3.5 text-muted-foreground" /> View detail
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => router.push(`/sales/inspections/${inspectionId}/checkpoints`)}>
+                    <ClipboardList className="size-3.5 text-muted-foreground" /> Open checkpoints
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={onEdit}>
+                    <Pencil className="size-3.5 text-muted-foreground" /> Edit
+                </DropdownMenuItem>
+
+                <DropdownMenuItem onClick={() => setShareOpen(true)}>
+                    <Share2 className="size-3.5 text-muted-foreground" /> Share with customer
+                </DropdownMenuItem>
+
+                <DropdownMenuSeparator />
+
+                {status === "cancelled" || status === "completed" ? (
+                    <DropdownMenuItem onClick={() => changeStatus("in_progress", "Reopened — back to in progress")}>
+                        <PlayCircle className="size-3.5 text-amber-600" /> Reopen as in progress
+                    </DropdownMenuItem>
+                ) : (
+                    <DropdownMenuItem onClick={() => changeStatus("completed", "Inspection marked completed")}>
+                        <CheckCircle2 className="size-3.5 text-emerald-600" /> Mark completed
+                    </DropdownMenuItem>
+                )}
+
+                {status !== "cancelled" && (
+                    <DropdownMenuItem onClick={() => changeStatus("cancelled", "Inspection cancelled")}>
+                        <XCircle className="size-3.5 text-rose-600" /> Cancel
+                    </DropdownMenuItem>
+                )}
+
+                <DropdownMenuSeparator />
+
+                <DropdownMenuItem variant="destructive" onClick={handleDelete}>
+                    <Trash2 className="size-3.5" /> Delete
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+
+            <InspectionShareDialog
+                open={shareOpen}
+                onOpenChange={setShareOpen}
+                inspectionId={inspectionId}
+            />
+        </DropdownMenu>
+    )
+}
diff --git a/apps/dashboard/modules/inspections/inspection-share-dialog.tsx b/apps/dashboard/modules/inspections/inspection-share-dialog.tsx
new file mode 100644
index 0000000..c38d67b
--- /dev/null
+++ b/apps/dashboard/modules/inspections/inspection-share-dialog.tsx
@@ -0,0 +1,139 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { toast } from "sonner"
+import { Check, Copy, ExternalLink, Link2, XCircle } from "lucide-react"
+
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/shared/components/ui/dialog"
+import { Button } from "@/shared/components/ui/button"
+import { Input } from "@/shared/components/ui/input"
+import { useAuthApi } from "@/shared/useApi"
+import { confirm } from "@/shared/components/confirm-dialog"
+
+export function InspectionShareDialog({
+    open,
+    onOpenChange,
+    inspectionId,
+}: {
+    open: boolean
+    onOpenChange: (o: boolean) => void
+    inspectionId: number | string
+}) {
+    const api = useAuthApi()
+    const [loading, setLoading] = useState(false)
+    const [shareUrl, setShareUrl] = useState<string | null>(null)
+    const [expiresAt, setExpiresAt] = useState<string | null>(null)
+    const [copied, setCopied] = useState(false)
+
+    const generate = async () => {
+        setLoading(true)
+        try {
+            const res = await api.inspections.share(inspectionId)
+            setShareUrl(res.data.share_url)
+            setExpiresAt(res.data.share_expires_at)
+        } catch (e: any) {
+            toast.error(e?.payload?.message ?? e?.message ?? "Failed to generate share link")
+            onOpenChange(false)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    useEffect(() => {
+        if (open && !shareUrl) generate()
+        if (!open) {
+            setShareUrl(null)
+            setExpiresAt(null)
+            setCopied(false)
+        }
+    }, [open])
+
+    const copy = async () => {
+        if (!shareUrl) return
+        try {
+            await navigator.clipboard.writeText(shareUrl)
+            setCopied(true)
+            toast.success("Link copied")
+            setTimeout(() => setCopied(false), 2000)
+        } catch {
+            toast.error("Copy failed — select the field and press Cmd/Ctrl+C")
+        }
+    }
+
+    const revoke = async () => {
+        const ok = await confirm({
+            title: "Revoke this share link?",
+            description: "The customer will no longer be able to view the report.",
+            confirmLabel: "Revoke",
+            variant: "destructive",
+        })
+        if (!ok) return
+        try {
+            await api.inspections.revokeShare(inspectionId)
+            toast.success("Share link revoked")
+            onOpenChange(false)
+        } catch (e: any) {
+            toast.error(e?.payload?.message ?? e?.message ?? "Failed to revoke")
+        }
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-lg">
+                <DialogHeader>
+                    <DialogTitle className="flex items-center gap-2">
+                        <Link2 className="size-4" /> Share inspection with customer
+                    </DialogTitle>
+                    <DialogDescription>
+                        Anyone with this link can view the inspection report. No login required.
+                    </DialogDescription>
+                </DialogHeader>
+
+                {loading && (
+                    <div className="py-6 text-center text-sm text-muted-foreground">Generating link…</div>
+                )}
+
+                {shareUrl && (
+                    <div className="space-y-3">
+                        <div className="flex items-center gap-2">
+                            <Input value={shareUrl} readOnly className="font-mono text-xs" />
+                            <Button type="button" size="sm" onClick={copy}>
+                                {copied ? <Check className="size-4" /> : <Copy className="size-4" />}
+                                {copied ? "Copied" : "Copy"}
+                            </Button>
+                        </div>
+                        {expiresAt && (
+                            <p className="text-xs text-muted-foreground">
+                                Expires on {new Date(expiresAt).toLocaleDateString()}.
+                            </p>
+                        )}
+                        <div className="flex items-center justify-between text-xs">
+                            <a
+                                href={shareUrl}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-primary inline-flex items-center gap-1 hover:underline"
+                            >
+                                <ExternalLink className="size-3.5" /> Open preview in new tab
+                            </a>
+                        </div>
+                    </div>
+                )}
+
+                <DialogFooter className="flex justify-between gap-2 sm:justify-between">
+                    <Button variant="ghost" size="sm" onClick={revoke} disabled={!shareUrl}>
+                        <XCircle className="size-4 text-rose-600" /> Revoke link
+                    </Button>
+                    <Button variant="outline" onClick={() => onOpenChange(false)}>Done</Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}
diff --git a/apps/dashboard/modules/inspections/inspection.schema.ts b/apps/dashboard/modules/inspections/inspection.schema.ts
index a2a6c6e..7fec065 100644
--- a/apps/dashboard/modules/inspections/inspection.schema.ts
+++ b/apps/dashboard/modules/inspections/inspection.schema.ts
@@ -24,7 +24,7 @@ const inspectionFormSchema = z.object({
     rate: z.coerce.number().min(0).optional(),
     working_hours: z.coerce.number().min(0).optional(),
     labor_hours: z.coerce.number().min(0).optional(),
-    tax: z.string().optional(),
+    tax: relationFieldSchema.optional(),
     chart_of_account: z.string().optional(),
 })
 
diff --git a/apps/dashboard/modules/inspections/signature-pad.tsx b/apps/dashboard/modules/inspections/signature-pad.tsx
new file mode 100644
index 0000000..936d131
--- /dev/null
+++ b/apps/dashboard/modules/inspections/signature-pad.tsx
@@ -0,0 +1,119 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { Eraser, Save } from "lucide-react"
+import { Button } from "@/shared/components/ui/button"
+
+type Props = {
+    label: string
+    existingUrl?: string | null
+    onSave: (dataUrl: string) => Promise<void> | void
+    saving?: boolean
+}
+
+/**
+ * Minimal in-house signature pad — uses <canvas> + pointer events.
+ * Works with mouse, touch, and stylus on any device. No external dep.
+ */
+export function SignaturePad({ label, existingUrl, onSave, saving }: Props) {
+    const canvasRef = useRef<HTMLCanvasElement>(null)
+    const drawingRef = useRef(false)
+    const lastPointRef = useRef<{ x: number; y: number } | null>(null)
+    const [hasDrawn, setHasDrawn] = useState(false)
+
+    const getCtx = () => {
+        const c = canvasRef.current
+        if (!c) return null
+        const ctx = c.getContext("2d")
+        if (!ctx) return null
+        ctx.lineWidth = 2.2
+        ctx.lineCap = "round"
+        ctx.lineJoin = "round"
+        ctx.strokeStyle = "#111"
+        return ctx
+    }
+
+    useEffect(() => {
+        // Size the canvas to its CSS size while keeping crisp lines on HiDPI screens.
+        const c = canvasRef.current
+        if (!c) return
+        const dpr = window.devicePixelRatio || 1
+        const rect = c.getBoundingClientRect()
+        c.width = Math.round(rect.width * dpr)
+        c.height = Math.round(rect.height * dpr)
+        const ctx = c.getContext("2d")
+        ctx?.scale(dpr, dpr)
+    }, [])
+
+    const pointFromEvent = (e: React.PointerEvent<HTMLCanvasElement>) => {
+        const rect = (e.target as HTMLCanvasElement).getBoundingClientRect()
+        return { x: e.clientX - rect.left, y: e.clientY - rect.top }
+    }
+
+    const handleDown = (e: React.PointerEvent<HTMLCanvasElement>) => {
+        e.preventDefault()
+        ;(e.target as HTMLCanvasElement).setPointerCapture(e.pointerId)
+        drawingRef.current = true
+        lastPointRef.current = pointFromEvent(e)
+    }
+    const handleMove = (e: React.PointerEvent<HTMLCanvasElement>) => {
+        if (!drawingRef.current) return
+        const ctx = getCtx()
+        if (!ctx || !lastPointRef.current) return
+        const p = pointFromEvent(e)
+        ctx.beginPath()
+        ctx.moveTo(lastPointRef.current.x, lastPointRef.current.y)
+        ctx.lineTo(p.x, p.y)
+        ctx.stroke()
+        lastPointRef.current = p
+        setHasDrawn(true)
+    }
+    const handleUp = () => {
+        drawingRef.current = false
+        lastPointRef.current = null
+    }
+
+    const clear = () => {
+        const c = canvasRef.current
+        const ctx = getCtx()
+        if (!c || !ctx) return
+        ctx.clearRect(0, 0, c.width, c.height)
+        setHasDrawn(false)
+    }
+
+    const submit = async () => {
+        if (!canvasRef.current || !hasDrawn) return
+        const dataUrl = canvasRef.current.toDataURL("image/png")
+        await onSave(dataUrl)
+    }
+
+    return (
+        <div className="rounded border bg-white">
+            <div className="flex items-center justify-between px-3 py-2 border-b bg-muted/30">
+                <span className="text-sm font-medium">{label}</span>
+                <div className="flex items-center gap-1">
+                    <Button type="button" variant="ghost" size="sm" onClick={clear} disabled={saving}>
+                        <Eraser className="size-3.5" /> Clear
+                    </Button>
+                    <Button type="button" size="sm" onClick={submit} disabled={!hasDrawn || saving}>
+                        <Save className="size-3.5" /> {saving ? "Saving…" : "Save"}
+                    </Button>
+                </div>
+            </div>
+            {existingUrl && !hasDrawn && (
+                <div className="px-3 pt-2 text-xs text-muted-foreground">
+                    Previously signed:
+                    <img src={existingUrl} alt="" className="block max-h-20 mt-1" />
+                </div>
+            )}
+            <canvas
+                ref={canvasRef}
+                className="block w-full h-32 touch-none bg-white"
+                onPointerDown={handleDown}
+                onPointerMove={handleMove}
+                onPointerUp={handleUp}
+                onPointerCancel={handleUp}
+            />
+        </div>
+    )
+}
diff --git a/apps/dashboard/modules/inspections/template-checkpoint-edit-dialog.tsx b/apps/dashboard/modules/inspections/template-checkpoint-edit-dialog.tsx
new file mode 100644
index 0000000..7dcca66
--- /dev/null
+++ b/apps/dashboard/modules/inspections/template-checkpoint-edit-dialog.tsx
@@ -0,0 +1,219 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { toast } from "sonner"
+
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/shared/components/ui/dialog"
+import { Button } from "@/shared/components/ui/button"
+import { Input } from "@/shared/components/ui/input"
+import { Textarea } from "@/shared/components/ui/textarea"
+import { Label } from "@/shared/components/ui/label"
+import { useAuthApi } from "@/shared/useApi"
+import type {
+    InspectionSeverity,
+    InspectionTemplateCheckPoint,
+    InspectionTemplateCheckPointRecordType,
+} from "@garage/api"
+
+const RECORD_TYPE_OPTIONS: { value: InspectionTemplateCheckPointRecordType; label: string }[] = [
+    { value: "none", label: "No media" },
+    { value: "capture_photo", label: "Capture photo" },
+    { value: "record_video", label: "Record video" },
+    { value: "record_audio", label: "Record audio" },
+    { value: "record_conditions", label: "Condition rating (0–100)" },
+    { value: "wire_frame", label: "Wireframe diagram" },
+]
+
+const SEVERITY_OPTIONS: { value: InspectionSeverity; label: string; cls: string }[] = [
+    { value: "not_inspected", label: "Not inspected", cls: "bg-gray-100 text-gray-700" },
+    { value: "good", label: "Good", cls: "bg-emerald-100 text-emerald-800" },
+    { value: "attention", label: "Needs attention", cls: "bg-amber-100 text-amber-800" },
+    { value: "critical", label: "Critical", cls: "bg-rose-100 text-rose-800" },
+    { value: "na", label: "Not applicable", cls: "bg-slate-100 text-slate-700" },
+]
+
+export type CheckpointDraft = {
+    name: string
+    description: string
+    record_type: InspectionTemplateCheckPointRecordType
+    severity_default: InspectionSeverity
+    sort_order: number
+}
+
+export function TemplateCheckpointEditDialog({
+    open,
+    onOpenChange,
+    templateId,
+    sectionId,
+    checkpoint,
+    nextSortOrder,
+    onSaved,
+}: {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    templateId: number
+    sectionId: number
+    /** When set, edit this checkpoint. When null, create new. */
+    checkpoint: InspectionTemplateCheckPoint | null
+    nextSortOrder?: number
+    onSaved: () => void
+}) {
+    const api = useAuthApi()
+    const isEdit = !!checkpoint
+
+    const [name, setName] = useState("")
+    const [description, setDescription] = useState("")
+    const [recordType, setRecordType] = useState<InspectionTemplateCheckPointRecordType>("capture_photo")
+    const [severity, setSeverity] = useState<InspectionSeverity>("not_inspected")
+    const [sortOrder, setSortOrder] = useState<number>(1)
+    const [saving, setSaving] = useState(false)
+
+    useEffect(() => {
+        if (!open) return
+        if (checkpoint) {
+            setName(checkpoint.name)
+            setDescription(checkpoint.description ?? "")
+            setRecordType(checkpoint.record_type)
+            setSeverity(checkpoint.severity_default)
+            setSortOrder(checkpoint.sort_order)
+        } else {
+            setName("")
+            setDescription("")
+            setRecordType("capture_photo")
+            setSeverity("not_inspected")
+            setSortOrder(nextSortOrder ?? 1)
+        }
+    }, [open, checkpoint, nextSortOrder])
+
+    const submit = async () => {
+        if (!name.trim()) {
+            toast.error("Name is required")
+            return
+        }
+        setSaving(true)
+        try {
+            const payload = {
+                name: name.trim(),
+                description: description.trim() || undefined,
+                record_type: recordType,
+                severity_default: severity,
+                sort_order: sortOrder,
+            }
+            if (isEdit && checkpoint) {
+                await api.inspectionTemplates.updateCheckpoint(templateId, sectionId, checkpoint.id, payload)
+                toast.success("Checkpoint updated")
+            } else {
+                await api.inspectionTemplates.createCheckpoint(templateId, sectionId, payload)
+                toast.success("Checkpoint added")
+            }
+            onSaved()
+            onOpenChange(false)
+        } catch (e: any) {
+            const errors = e?.payload?.errors
+            const firstError = errors && typeof errors === "object"
+                ? (Object.values(errors)[0] as string[])?.[0]
+                : null
+            toast.error(firstError ?? e?.message ?? (isEdit ? "Failed to update checkpoint" : "Failed to add checkpoint"))
+        } finally {
+            setSaving(false)
+        }
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-lg">
+                <DialogHeader>
+                    <DialogTitle>{isEdit ? "Edit checkpoint" : "Add checkpoint"}</DialogTitle>
+                    <DialogDescription>
+                        Define what the technician will check and how the finding is recorded.
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="space-y-3">
+                    <div className="grid gap-1.5">
+                        <Label htmlFor="cp-name">Name</Label>
+                        <Input
+                            id="cp-name"
+                            autoFocus
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                            placeholder="e.g. Front-left brake pad thickness"
+                        />
+                    </div>
+
+                    <div className="grid gap-1.5">
+                        <Label htmlFor="cp-description">Description (optional)</Label>
+                        <Textarea
+                            id="cp-description"
+                            value={description}
+                            rows={2}
+                            onChange={(e) => setDescription(e.target.value)}
+                            placeholder="Brief guidance for the technician"
+                        />
+                    </div>
+
+                    <div className="grid gap-1.5">
+                        <Label>How it's recorded</Label>
+                        <div className="grid grid-cols-2 gap-1.5">
+                            {RECORD_TYPE_OPTIONS.map((opt) => (
+                                <button
+                                    type="button"
+                                    key={opt.value}
+                                    onClick={() => setRecordType(opt.value)}
+                                    className={`rounded border px-2 py-1.5 text-xs text-left transition ${
+                                        recordType === opt.value ? "border-primary bg-primary/5 text-foreground" : "text-muted-foreground hover:border-foreground/30"
+                                    }`}
+                                >
+                                    {opt.label}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="grid gap-1.5">
+                        <Label>Default severity (when not yet inspected)</Label>
+                        <div className="flex flex-wrap gap-1.5">
+                            {SEVERITY_OPTIONS.map((opt) => (
+                                <button
+                                    type="button"
+                                    key={opt.value}
+                                    onClick={() => setSeverity(opt.value)}
+                                    className={`rounded-full px-3 py-1 text-xs font-medium transition border ${
+                                        severity === opt.value ? "border-primary ring-1 ring-primary " + opt.cls : opt.cls + " border-transparent opacity-70 hover:opacity-100"
+                                    }`}
+                                >
+                                    {opt.label}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="grid gap-1.5 max-w-[160px]">
+                        <Label htmlFor="cp-order">Sort order</Label>
+                        <Input
+                            id="cp-order"
+                            type="number"
+                            min={0}
+                            value={sortOrder}
+                            onChange={(e) => setSortOrder(parseInt(e.target.value || "0", 10))}
+                        />
+                    </div>
+                </div>
+
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => onOpenChange(false)} disabled={saving}>Cancel</Button>
+                    <Button onClick={submit} disabled={saving || !name.trim()}>
+                        {saving ? "Saving…" : isEdit ? "Save changes" : "Add checkpoint"}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}
diff --git a/apps/dashboard/modules/inventory-adjustments/inventory-adjustment-form.tsx b/apps/dashboard/modules/inventory-adjustments/inventory-adjustment-form.tsx
index b8b3bbf..9cf7a5e 100644
--- a/apps/dashboard/modules/inventory-adjustments/inventory-adjustment-form.tsx
+++ b/apps/dashboard/modules/inventory-adjustments/inventory-adjustment-form.tsx
@@ -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`}
diff --git a/apps/dashboard/modules/inventory-adjustments/inventory-adjustment.schema.ts b/apps/dashboard/modules/inventory-adjustments/inventory-adjustment.schema.ts
index 632a17f..22bf66d 100644
--- a/apps/dashboard/modules/inventory-adjustments/inventory-adjustment.schema.ts
+++ b/apps/dashboard/modules/inventory-adjustments/inventory-adjustment.schema.ts
@@ -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"),
diff --git a/apps/dashboard/modules/invoices/invoice-actions.tsx b/apps/dashboard/modules/invoices/invoice-actions.tsx
index f8f58ec..7231f35 100644
--- a/apps/dashboard/modules/invoices/invoice-actions.tsx
+++ b/apps/dashboard/modules/invoices/invoice-actions.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { useState } from "react"
 import { useAuthApi } from "@/shared/useApi"
 import { useRouter } from "next/navigation"
 import { Button } from "@/shared/components/ui/button"
@@ -9,8 +10,9 @@ import {
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from "@/shared/components/ui/dropdown-menu"
-import { Ellipsis, Printer, Trash2 } from "lucide-react"
+import { Ellipsis, Printer, Share2, Trash2 } from "lucide-react"
 import { useDocumentPrint } from "@/shared/hooks/use-document-print"
+import { ShareDocumentDialog } from "@/shared/components/share-document-dialog"
 
 type InvoiceActionsProps = {
     invoiceId: string
@@ -20,6 +22,7 @@ export function InvoiceActions({ invoiceId }: InvoiceActionsProps) {
     const api = useAuthApi()
     const router = useRouter()
     const { print, isPrinting } = useDocumentPrint()
+    const [shareOpen, setShareOpen] = useState(false)
 
     const handleDelete = async () => {
         await api.invoices.destroy(invoiceId)
@@ -39,12 +42,18 @@ export function InvoiceActions({ invoiceId }: InvoiceActionsProps) {
                         <Printer className="size-4" />
                         {isPrinting ? "Printing..." : "Print"}
                     </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => setShareOpen(true)}>
+                        <Share2 className="size-4" />
+                        Share
+                    </DropdownMenuItem>
                     <DropdownMenuItem variant="destructive" onClick={handleDelete}>
                         <Trash2 className="size-4" />
                         Delete
                     </DropdownMenuItem>
                 </DropdownMenuContent>
             </DropdownMenu>
+
+            <ShareDocumentDialog type="invoice" id={invoiceId} open={shareOpen} onOpenChange={setShareOpen} />
         </>
     )
 }
diff --git a/apps/dashboard/modules/invoices/invoice-expenses-section.tsx b/apps/dashboard/modules/invoices/invoice-expenses-section.tsx
index b7e024c..4f1f4c0 100644
--- a/apps/dashboard/modules/invoices/invoice-expenses-section.tsx
+++ b/apps/dashboard/modules/invoices/invoice-expenses-section.tsx
@@ -15,7 +15,8 @@ import {
     TableHeader,
     TableRow,
 } from "@/shared/components/ui/table"
-import { formatCurrency, formatNumber } from "@/shared/utils/formatters"
+import { formatNumber } from "@/shared/utils/formatters"
+import { Money } from "@/shared/components/money"
 
 type InvoiceExpense = {
     id: number
@@ -78,10 +79,10 @@ export function InvoiceExpensesSection({ expenses = [] }: InvoiceExpensesSection
                                             {formatNumber(qty)}
                                         </TableCell>
                                         <TableCell className="text-right">
-                                            {formatCurrency(rate)}
+                                            {<Money value={rate} />}
                                         </TableCell>
                                         <TableCell className="text-right font-medium">
-                                            {formatCurrency(amount)}
+                                            {<Money value={amount} />}
                                         </TableCell>
                                     </TableRow>
                                 )
@@ -91,7 +92,7 @@ export function InvoiceExpensesSection({ expenses = [] }: InvoiceExpensesSection
                                     Subtotal
                                 </TableCell>
                                 <TableCell className="text-right">
-                                    {formatCurrency(subtotal)}
+                                    {<Money value={subtotal} />}
                                 </TableCell>
                             </TableRow>
                         </TableBody>
diff --git a/apps/dashboard/modules/invoices/invoice-form.tsx b/apps/dashboard/modules/invoices/invoice-form.tsx
index c4c39f2..b0cdb4c 100644
--- a/apps/dashboard/modules/invoices/invoice-form.tsx
+++ b/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?.()
         },
     })
diff --git a/apps/dashboard/modules/invoices/invoice-general-info.tsx b/apps/dashboard/modules/invoices/invoice-general-info.tsx
index e34c81f..b5b52eb 100644
--- a/apps/dashboard/modules/invoices/invoice-general-info.tsx
+++ b/apps/dashboard/modules/invoices/invoice-general-info.tsx
@@ -22,8 +22,9 @@ import {
 import { Badge } from "@/shared/components/ui/badge"
 import { Separator } from "@/shared/components/ui/separator"
 import { cn } from "@/shared/lib/utils"
-import { formatDate, formatCurrency, formatEnum, formatNumber } from "@/shared/utils/formatters"
+import { formatDate, formatEnum, formatNumber } from "@/shared/utils/formatters"
 import { useInvoice } from "./invoice-context"
+import { Money } from "@/shared/components/money"
 
 function InfoItem({
     icon: Icon,
@@ -140,9 +141,9 @@ export function InvoiceGeneralInfo() {
                 {/* Total Amount */}
                 <Card className="flex flex-col gap-1 p-4">
                     <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Total Amount</span>
-                    <span className="mt-1 text-lg font-semibold">{formatCurrency(total)}</span>
+                    <span className="mt-1 text-lg font-semibold">{<Money value={total} />}</span>
                     {paid > 0 && (
-                        <span className="text-xs text-muted-foreground">{formatCurrency(paid)} received</span>
+                        <span className="text-xs text-muted-foreground">{<Money value={paid} />} received</span>
                     )}
                 </Card>
 
@@ -158,7 +159,7 @@ export function InvoiceGeneralInfo() {
                         balanceDue > 0 && invoice.status !== "paid" && "text-primary",
                         balanceDue <= 0 && "text-green-600",
                     )}>
-                        {formatCurrency(balanceDue)}
+                        {<Money value={balanceDue} />}
                     </span>
                     {balanceDue <= 0 && (
                         <span className="text-xs font-medium text-green-600">Fully paid</span>
diff --git a/apps/dashboard/modules/invoices/invoice-parts-section.tsx b/apps/dashboard/modules/invoices/invoice-parts-section.tsx
index 1f32cbe..9a5a031 100644
--- a/apps/dashboard/modules/invoices/invoice-parts-section.tsx
+++ b/apps/dashboard/modules/invoices/invoice-parts-section.tsx
@@ -15,7 +15,8 @@ import {
     TableHeader,
     TableRow,
 } from "@/shared/components/ui/table"
-import { formatCurrency, formatNumber } from "@/shared/utils/formatters"
+import { formatNumber } from "@/shared/utils/formatters"
+import { Money } from "@/shared/components/money"
 
 type InvoicePart = {
     id: number
@@ -78,10 +79,10 @@ export function InvoicePartsSection({ parts = [] }: InvoicePartsSectionProps) {
                                             {formatNumber(qty)}
                                         </TableCell>
                                         <TableCell className="text-right">
-                                            {formatCurrency(rate)}
+                                            {<Money value={rate} />}
                                         </TableCell>
                                         <TableCell className="text-right font-medium">
-                                            {formatCurrency(amount)}
+                                            {<Money value={amount} />}
                                         </TableCell>
                                     </TableRow>
                                 )
@@ -91,7 +92,7 @@ export function InvoicePartsSection({ parts = [] }: InvoicePartsSectionProps) {
                                     Subtotal
                                 </TableCell>
                                 <TableCell className="text-right">
-                                    {formatCurrency(subtotal)}
+                                    {<Money value={subtotal} />}
                                 </TableCell>
                             </TableRow>
                         </TableBody>
diff --git a/apps/dashboard/modules/invoices/invoice-payments-section.tsx b/apps/dashboard/modules/invoices/invoice-payments-section.tsx
index 12a6ac1..e2fbefb 100644
--- a/apps/dashboard/modules/invoices/invoice-payments-section.tsx
+++ b/apps/dashboard/modules/invoices/invoice-payments-section.tsx
@@ -27,25 +27,37 @@ export default function InvoicePaymentsSection() {
                         <CardContent className='flex justify-between '>
                             <h2>Payments</h2>
                             <FormDialog title="Record Payment">
-                                {(resourceId) => (
-
-                                    <PaymentReceivedForm
-                                        invoiceId={invoice?.id as string}
-                                        invoiceCustomer={
-                                            (invoice?.customer as any) ??
-                                            ((invoice as any)?.customer_id
-                                                ? {
-                                                    id: (invoice as any).customer_id,
-                                                    first_name: (invoice as any).customer_name,
-                                                }
-                                                : null)
-                                        }
-                                        invoiceAmount={invoice?.balance_due as any}
-                                        resourceId={resourceId}
-                                        onSuccess={()=>{router.refresh(); invalidateQuery()}}
-                                    />
-
-                                )}
+                                {(resourceId) => {
+                                    const invoiceJobCard =
+                                        (invoice as any)?.jobCard ?? (invoice as any)?.job_card ?? null
+                                    const invoiceJobCardId =
+                                        invoiceJobCard?.id ?? (invoice as any)?.job_card_id ?? null
+                                    const invoiceJobCardTitle =
+                                        invoiceJobCard?.title ?? (invoice as any)?.job_card_name ?? null
+                                    return (
+                                        <PaymentReceivedForm
+                                            invoiceId={invoice?.id as string}
+                                            invoiceCustomer={
+                                                (invoice?.customer as any) ??
+                                                ((invoice as any)?.customer_id
+                                                    ? {
+                                                        id: (invoice as any).customer_id,
+                                                        first_name: (invoice as any).customer_name,
+                                                    }
+                                                    : null)
+                                            }
+                                            invoiceAmount={invoice?.balance_due as any}
+                                            defaultJobCard={
+                                                invoiceJobCardId != null
+                                                    ? { id: Number(invoiceJobCardId), title: invoiceJobCardTitle }
+                                                    : null
+                                            }
+                                            lockJobCard={false}
+                                            resourceId={resourceId}
+                                            onSuccess={() => { router.refresh(); invalidateQuery() }}
+                                        />
+                                    )
+                                }}
                             </FormDialog>
 
                         </CardContent>
diff --git a/apps/dashboard/modules/invoices/invoice-services-section.tsx b/apps/dashboard/modules/invoices/invoice-services-section.tsx
index cd1c3fc..b78bc39 100644
--- a/apps/dashboard/modules/invoices/invoice-services-section.tsx
+++ b/apps/dashboard/modules/invoices/invoice-services-section.tsx
@@ -15,7 +15,8 @@ import {
     TableHeader,
     TableRow,
 } from "@/shared/components/ui/table"
-import { formatCurrency, formatNumber } from "@/shared/utils/formatters"
+import { formatNumber } from "@/shared/utils/formatters"
+import { Money } from "@/shared/components/money"
 
 type InvoiceService = {
     id: number
@@ -78,10 +79,10 @@ export function InvoiceServicesSection({ services = [] }: InvoiceServicesSection
                                             {formatNumber(qty)}
                                         </TableCell>
                                         <TableCell className="text-right">
-                                            {formatCurrency(rate)}
+                                            {<Money value={rate} />}
                                         </TableCell>
                                         <TableCell className="text-right font-medium">
-                                            {formatCurrency(amount)}
+                                            {<Money value={amount} />}
                                         </TableCell>
                                     </TableRow>
                                 )
@@ -91,7 +92,7 @@ export function InvoiceServicesSection({ services = [] }: InvoiceServicesSection
                                     Subtotal
                                 </TableCell>
                                 <TableCell className="text-right">
-                                    {formatCurrency(subtotal)}
+                                    {<Money value={subtotal} />}
                                 </TableCell>
                             </TableRow>
                         </TableBody>
diff --git a/apps/dashboard/modules/invoices/invoice-totals-summary.tsx b/apps/dashboard/modules/invoices/invoice-totals-summary.tsx
index ae00a2d..34232b4 100644
--- a/apps/dashboard/modules/invoices/invoice-totals-summary.tsx
+++ b/apps/dashboard/modules/invoices/invoice-totals-summary.tsx
@@ -1,9 +1,10 @@
 "use client"
 import { Card, CardContent } from "@/shared/components/ui/card"
 import { Separator } from "@/shared/components/ui/separator"
-import { formatCurrency, formatEnum } from "@/shared/utils/formatters"
+import { formatEnum } from "@/shared/utils/formatters"
 import { cn } from "@/shared/lib/utils"
 import { useInvoice } from "./invoice-context"
+import { Money } from "@/shared/components/money"
 
 export function InvoiceTotalsSummary() {
     const invoice = useInvoice()
@@ -41,19 +42,19 @@ export function InvoiceTotalsSummary() {
                             {parts.length > 0 && (
                                 <div className="flex justify-between text-sm">
                                     <span className="text-muted-foreground">Parts ({parts.length})</span>
-                                    <span>{formatCurrency(lineTotal(parts))}</span>
+                                    <span>{<Money value={lineTotal(parts)} />}</span>
                                 </div>
                             )}
                             {services.length > 0 && (
                                 <div className="flex justify-between text-sm">
                                     <span className="text-muted-foreground">Services ({services.length})</span>
-                                    <span>{formatCurrency(lineTotal(services))}</span>
+                                    <span>{<Money value={lineTotal(services)} />}</span>
                                 </div>
                             )}
                             {expenses.length > 0 && (
                                 <div className="flex justify-between text-sm">
                                     <span className="text-muted-foreground">Expenses ({expenses.length})</span>
-                                    <span>{formatCurrency(lineTotal(expenses))}</span>
+                                    <span>{<Money value={lineTotal(expenses)} />}</span>
                                 </div>
                             )}
                             <Separator />
@@ -62,7 +63,7 @@ export function InvoiceTotalsSummary() {
 
                     <div className="flex justify-between text-sm font-medium">
                         <span>Subtotal</span>
-                        <span>{formatCurrency(subTotal)}</span>
+                        <span>{<Money value={subTotal} />}</span>
                     </div>
 
                     {discount && discount !== "no" && (
@@ -76,13 +77,13 @@ export function InvoiceTotalsSummary() {
 
                     <div className="flex justify-between text-base font-semibold">
                         <span>Total</span>
-                        <span>{formatCurrency(displayTotal)}</span>
+                        <span>{<Money value={displayTotal} />}</span>
                     </div>
 
                     {paid > 0 && (
                         <div className="flex justify-between text-sm text-muted-foreground">
                             <span>Amount Received</span>
-                            <span>– {formatCurrency(paid)}</span>
+                            <span>– {<Money value={paid} />}</span>
                         </div>
                     )}
 
@@ -93,7 +94,7 @@ export function InvoiceTotalsSummary() {
                         balanceDue > 0 ? "bg-primary/10 text-primary" : "bg-green-500/10 text-green-600",
                     )}>
                         <span>Balance Due</span>
-                        <span>{formatCurrency(balanceDue)}</span>
+                        <span>{<Money value={balanceDue} />}</span>
                     </div>
                 </div>
             </CardContent>
diff --git a/apps/dashboard/modules/job-cards/job-card-dropdown.tsx b/apps/dashboard/modules/job-cards/job-card-dropdown.tsx
index 188fbb2..6e017ef 100644
--- a/apps/dashboard/modules/job-cards/job-card-dropdown.tsx
+++ b/apps/dashboard/modules/job-cards/job-card-dropdown.tsx
@@ -5,11 +5,13 @@ import { confirm } from '@/shared/components/confirm-dialog';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/shared/components/ui/dropdown-menu'
 import { Button } from '@/shared/components/ui/button'
 import { toast } from 'sonner'
-import { CalendarPlus, Ellipsis, FileText, Pencil, Printer, Trash2 } from 'lucide-react';
+import { CalendarPlus, Ellipsis, FileText, Loader2, Pencil, Printer, Share2, Trash2 } from 'lucide-react';
 import { useDocumentPrint } from '@/shared/hooks/use-document-print';
 import { useJobCard } from './job-card-context';
 import { useState } from 'react';
 import { useAuthApi } from '@/shared/useApi';
+import { ShareDocumentDialog } from '@/shared/components/share-document-dialog';
+import { ShareDocumentButton } from '@/shared/components/share-document-button';
 
 // TODO: setting a sales person not working
 // TODO: unable to set a Primary technician for the job card. Need to investigate and fix it.
@@ -21,6 +23,7 @@ export default function JobCardDropdown({ id }: { id: string }) {
     const { print, isPrinting } = useDocumentPrint()
     const jobCard = useJobCard()
     const [isConverting, setIsConverting] = useState(false)
+    const [shareOpen, setShareOpen] = useState(false)
 
     const handleEdit = () => {
         router.push(`/sales/job-cards/${id}/edit`)
@@ -34,6 +37,14 @@ export default function JobCardDropdown({ id }: { id: string }) {
         router.push(`/sales/job-cards/${id}/appointments?create=1`)
     }
 
+    const existingInvoice = (jobCard as any)?.invoices?.[0] as { id: number | string; invoice_number?: string | null } | undefined
+
+    const handleOpenExistingInvoice = () => {
+        if (existingInvoice?.id != null) {
+            router.push(`/sales/invoice/${existingInvoice.id}`)
+        }
+    }
+
     const handleConvertToInvoice = async () => {
         const confirmed = await confirm({
             title: "Convert to Invoice",
@@ -43,24 +54,32 @@ export default function JobCardDropdown({ id }: { id: string }) {
         if (!confirmed) return
 
         setIsConverting(true)
+        const promise = api.jobCards.convertToInvoice(id, {}) as Promise<any>
+        toast.promise(promise, {
+            loading: "Converting job card to invoice...",
+            success: "Job card converted to invoice successfully",
+            error: (err: any) => {
+                const conflictId = err?.response?.data?.data?.invoice_id ?? err?.data?.data?.invoice_id
+                return conflictId
+                    ? "An invoice already exists for this job card."
+                    : (err?.message || "Failed to convert job card to invoice")
+            },
+        })
         try {
-            const res = await api.jobCards.convertToInvoice(id, {}) as any
+            const res = await promise
             const invoiceId = res?.data?.id
-            toast.success("Job card converted to invoice successfully")
             if (invoiceId) {
                 router.push(`/sales/invoice/${invoiceId}`)
+                return
             }
         } catch (err: any) {
             const conflictId = err?.response?.data?.data?.invoice_id ?? err?.data?.data?.invoice_id
             if (conflictId) {
-                toast.info("An invoice already exists for this job card.")
                 router.push(`/sales/invoice/${conflictId}`)
-            } else {
-                 toast.error(err?.message || "Failed to convert job card to invoice")
+                return
             }
-        } finally {
-            setIsConverting(false)
         }
+        setIsConverting(false)
     }
 
     const handleDelete = async () => {
@@ -84,10 +103,17 @@ export default function JobCardDropdown({ id }: { id: string }) {
     return (
         <div className="flex items-center gap-2">
             {jobCard?.status !== "draft" && (
-                <Button variant="outline" onClick={handleConvertToInvoice} disabled={isConverting}>
-                    <FileText className="size-4" />
-                    {isConverting ? "Converting..." : "Convert to Invoice"}
-                </Button>
+                existingInvoice ? (
+                    <Button variant="outline" onClick={handleOpenExistingInvoice}>
+                        <FileText className="size-4" />
+                        {existingInvoice.invoice_number ? `Invoice #${existingInvoice.invoice_number}` : "View Invoice"}
+                    </Button>
+                ) : (
+                    <Button variant="outline" onClick={handleConvertToInvoice} disabled={isConverting}>
+                        {isConverting ? <Loader2 className="size-4 animate-spin" /> : <FileText className="size-4" />}
+                        {isConverting ? "Converting..." : "Convert to Invoice"}
+                    </Button>
+                )
             )}
 
             <Button variant="outline" onClick={handleCreateAppointment}>
@@ -95,6 +121,8 @@ export default function JobCardDropdown({ id }: { id: string }) {
                 Create Appointment
             </Button>
 
+            <ShareDocumentButton type="job_card" id={id} />
+
             <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                     <Button variant="outline" size="icon" className="self-stretch h-auto aspect-square">
@@ -110,16 +138,27 @@ export default function JobCardDropdown({ id }: { id: string }) {
                         <Printer className="size-4" />
                         {isPrinting ? "Printing..." : "Print"}
                     </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => setShareOpen(true)}>
+                        <Share2 className="size-4" />
+                        Share
+                    </DropdownMenuItem>
                     <DropdownMenuSeparator />
                     <DropdownMenuItem onClick={handleCreateAppointment}>
                         <CalendarPlus className="size-4" />
                         Create Appointment
                     </DropdownMenuItem>
                     {jobCard?.status !== "draft" && (
-                        <DropdownMenuItem onClick={handleConvertToInvoice} disabled={isConverting}>
-                            <FileText className="size-4" />
-                            {isConverting ? "Converting..." : "Convert to Invoice"}
-                        </DropdownMenuItem>
+                        existingInvoice ? (
+                            <DropdownMenuItem onClick={handleOpenExistingInvoice}>
+                                <FileText className="size-4" />
+                                {existingInvoice.invoice_number ? `Invoice #${existingInvoice.invoice_number}` : "View Invoice"}
+                            </DropdownMenuItem>
+                        ) : (
+                            <DropdownMenuItem onClick={handleConvertToInvoice} disabled={isConverting}>
+                                <FileText className="size-4" />
+                                {isConverting ? "Converting..." : "Convert to Invoice"}
+                            </DropdownMenuItem>
+                        )
                     )}
                     <DropdownMenuSeparator />
                     <DropdownMenuItem variant="destructive" onClick={handleDelete}>
@@ -128,6 +167,8 @@ export default function JobCardDropdown({ id }: { id: string }) {
                     </DropdownMenuItem>
                 </DropdownMenuContent>
             </DropdownMenu>
+
+            <ShareDocumentDialog type="job_card" id={id} open={shareOpen} onOpenChange={setShareOpen} />
         </div>
     )
 }
\ No newline at end of file
diff --git a/apps/dashboard/modules/job-cards/job-card-form.tsx b/apps/dashboard/modules/job-cards/job-card-form.tsx
index 23ebf09..77ca6c2 100644
--- a/apps/dashboard/modules/job-cards/job-card-form.tsx
+++ b/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?.()
         },
     })
diff --git a/apps/dashboard/modules/job-cards/job-card-general-info.tsx b/apps/dashboard/modules/job-cards/job-card-general-info.tsx
index 7d03ba1..c7fe922 100644
--- a/apps/dashboard/modules/job-cards/job-card-general-info.tsx
+++ b/apps/dashboard/modules/job-cards/job-card-general-info.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import {
     ClipboardList,
     Calendar,
@@ -30,8 +32,9 @@ import PaymentReceivedPage from "@/app/(authenticated)/sales/payment-received/pa
 import JobCardPaymentsReceived from "./job-card-payments-received"
 import { formatDate } from "@/shared/utils/formatters"
 import type { JobCardShowData } from "@garage/api"
+import { useJobCard } from "./job-card-context"
 
-type JobCard = JobCardShowData 
+type JobCard = JobCardShowData
 
 
 function InfoItem({
@@ -67,7 +70,14 @@ const statusColorMap: Record<string, string> = {
     cancelled: "destructive",
 }
 
-export function JobCardGeneralInfo({ jobCard }: { jobCard: JobCard }) {
+export function JobCardGeneralInfo({ jobCard: jobCardProp }: { jobCard?: JobCard } = {}) {
+    const jobCardFromContext = useJobCard()
+    const jobCard = (jobCardProp ?? jobCardFromContext) as JobCard
+
+    if (!jobCard) {
+        return <div className="text-muted-foreground">Job card not found.</div>
+    }
+
     const formatStatus = (status?: string) => {
         if (!status) return null
         return status
diff --git a/apps/dashboard/modules/job-cards/job-card-payments-received.tsx b/apps/dashboard/modules/job-cards/job-card-payments-received.tsx
index cffb145..dc2dd72 100644
--- a/apps/dashboard/modules/job-cards/job-card-payments-received.tsx
+++ b/apps/dashboard/modules/job-cards/job-card-payments-received.tsx
@@ -16,13 +16,22 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/shared/components/ui/collapsible"
 import { Button } from "@/shared/components/ui/button"
 import { useJobCard } from "./job-card-context"
-import { formatDate, formatCurrency } from "@/shared/utils/formatters"
+import { formatDate } from "@/shared/utils/formatters"
+import { useState } from "react"
+import { Money } from "@/shared/components/money"
 
 export default function JobCardPaymentsReceived() {
     const jobCard = useJobCard()
+    const [hasOpened, setHasOpened] = useState(false)
 
     return (
-        <Collapsible defaultOpen={false}  className="group/collapsible">
+        <Collapsible
+            defaultOpen={false}
+            className="group/collapsible"
+            onOpenChange={(open) => {
+                if (open) setHasOpened(true)
+            }}
+        >
             <Card>
                 <CardHeader>
                     <div className="flex items-center justify-between">
@@ -36,6 +45,7 @@ export default function JobCardPaymentsReceived() {
                 </CardHeader>
                 <CollapsibleContent>
                     <CardContent className="pt-0">
+                        {hasOpened && (
                         <CrudResource<PaymentReceivedClient>
                             extraParams={{ job_card_id: jobCard?.id }}
                             routeKey={PAYMENT_RECEIVED_ROUTES.INDEX}
@@ -48,6 +58,8 @@ export default function JobCardPaymentsReceived() {
                                                 resourceId={resourceId}
                                                 defaultJobCard={{ id: jobCard?.id, title: jobCard?.title }}
                                                 invoiceCustomer={jobCard?.customer as any}
+                                                lockJobCard
+                                                lockCustomer
                                                 onSuccess={invalidateQuery}
                                             />
                                         )}
@@ -77,7 +89,7 @@ export default function JobCardPaymentsReceived() {
                                             <div className="flex items-center gap-2">
                                                 <BadgeDollarSignIcon className="h-4 w-4 text-emerald-600" />
                                                 <span className="font-semibold text-emerald-700 dark:text-emerald-400">
-                                                    {formatCurrency(item.amount_received)}
+                                                    {<Money value={item.amount_received} />}
                                                 </span>
                                             </div>
                                         )
@@ -127,6 +139,7 @@ export default function JobCardPaymentsReceived() {
                                 actionsColumn(),
                             ]}
                         />
+                        )}
                     </CardContent>
                 </CollapsibleContent>
             </Card>
diff --git a/apps/dashboard/modules/parts/parts-selector-field.tsx b/apps/dashboard/modules/parts/parts-selector-field.tsx
index 35c3e4f..1f748ec 100644
--- a/apps/dashboard/modules/parts/parts-selector-field.tsx
+++ b/apps/dashboard/modules/parts/parts-selector-field.tsx
@@ -55,6 +55,7 @@ export function PartsSelectorField<
             itemKey="part_id"
             dialogProps={{
                 title: "Select Parts",
+                searchPlaceholder: "Search parts by title, SKU, or part number...",
                 crudProps: {
                     routeKey: PARTS_ROUTES.INDEX,
                     getClient: (api) => api.parts,
diff --git a/apps/dashboard/modules/payment-mades/payment-made-form.tsx b/apps/dashboard/modules/payment-mades/payment-made-form.tsx
index d9683bf..0a1e4ad 100644
--- a/apps/dashboard/modules/payment-mades/payment-made-form.tsx
+++ b/apps/dashboard/modules/payment-mades/payment-made-form.tsx
@@ -73,23 +73,30 @@ const DEFAULT_VALUES: PaymentMadeFormValues & { details: Array<{ bill_id?: strin
 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(d.bill_id, d.bill?.bill_number ?? d.bill_number),
-        vendor: toRelation(d.vendor_id, d.vendor?.company_name ?? d.vendor?.name ?? d.vendor_name),
-        employee: toRelation(d.employee_id, d.employee?.first_name ? `${d.employee.first_name} ${d.employee.last_name ?? ""}`.trim() : d.employee_name),
+        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 || "bill",
-        amount: d.payment_made != null ? Number(d.payment_made) : 0,
+        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: d.bill_id, expense_id: d.expense_id, amount_paid: d.amount_paid ?? 0 }],
+        paid_through: d.paid_through || "",
+        notes: d.notes || "",
+        details: [{ bill_id: billId, expense_id: expenseId, amount_paid: firstDetail.amount_paid ?? 0 }],
     }
 }
 
diff --git a/apps/dashboard/modules/payment-received/payment-received-form.tsx b/apps/dashboard/modules/payment-received/payment-received-form.tsx
index f134775..6ff3da5 100644
--- a/apps/dashboard/modules/payment-received/payment-received-form.tsx
+++ b/apps/dashboard/modules/payment-received/payment-received-form.tsx
@@ -5,7 +5,8 @@ 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 { Field, FieldGroup, FieldLabel } from "@/shared/components/ui/field"
+import { Input } from "@/shared/components/ui/input"
 import {
     Rhform,
     RhfTextField,
@@ -36,6 +37,8 @@ export type PaymentReceivedFormProps = {
     invoiceId?: string | null
     invoiceCustomer?: { id?: number | null; first_name?: string | null; last_name?: string | null } | null
     invoiceAmount?: number | string | null
+    lockJobCard?: boolean
+    lockCustomer?: boolean
 }
 
 // ── Default values ──
@@ -61,7 +64,7 @@ function mapToFormValues(data: unknown): PaymentReceivedFormValues {
         customer: toRelation(d.customer_id, d.customer_name),
         amount_received: d.amount_received != null ? Number(d.amount_received) : 0,
         payment_number: d.payment_number || "",
-        payment_date: d.payment_date || "",
+        payment_date: d.payment_date || new Date().toISOString().split("T")[0],
         note: d.note || "",
     }
 }
@@ -90,27 +93,33 @@ const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) =
 
 // ── Component ──
 
-export function PaymentReceivedForm({ resourceId, initialData, onSuccess, defaultJobCard, invoiceId, invoiceCustomer, invoiceAmount }: PaymentReceivedFormProps) {
+export function PaymentReceivedForm({ resourceId, initialData, onSuccess, defaultJobCard, invoiceId, invoiceCustomer, invoiceAmount, lockJobCard, lockCustomer }: PaymentReceivedFormProps) {
     const api = useAuthApi()
 
+    const isJobCardLocked = !resourceId && (lockJobCard ?? !!defaultJobCard?.id)
+    const isCustomerLocked = !resourceId && (lockCustomer ?? !!invoiceCustomer?.id)
+
+    const customerLabel = invoiceCustomer?.first_name
+        ? `${invoiceCustomer.first_name} ${invoiceCustomer.last_name || ""}`.trim()
+        : (invoiceCustomer as any)?.company_name || (invoiceCustomer as any)?.name || ""
+
     const resolvedInitialData = useMemo(() => {
         const base: any = { ...(initialData as any) }
         if (!resourceId) {
             if (defaultJobCard?.id != null) {
-                base.job_card = toRelation(defaultJobCard.id, defaultJobCard.title ?? undefined)
+                base.job_card_id = defaultJobCard.id
+                base.job_card_name = defaultJobCard.title ?? undefined
             }
             if (invoiceCustomer?.id != null) {
-                const customerLabel = invoiceCustomer.first_name
-                    ? `${invoiceCustomer.first_name} ${invoiceCustomer.last_name || ""}`.trim()
-                    : (invoiceCustomer as any).company_name || (invoiceCustomer as any).name || undefined
-                base.customer = toRelation(invoiceCustomer.id, customerLabel)
+                base.customer_id = invoiceCustomer.id
+                base.customer_name = customerLabel
             }
             if (invoiceAmount != null && invoiceAmount !== "") {
                 base.amount_received = Number(invoiceAmount)
             }
         }
         return Object.keys(base).length ? base : initialData
-    }, [resourceId, defaultJobCard, initialData, invoiceCustomer, invoiceAmount])
+    }, [resourceId, defaultJobCard, initialData, invoiceCustomer, invoiceAmount, customerLabel])
 
     const { form, isEditing } = useResourceForm<PaymentReceivedFormValues, any>({
         schema: paymentReceivedFormSchema,
@@ -153,33 +162,49 @@ export function PaymentReceivedForm({ resourceId, initialData, onSuccess, defaul
 
             <FieldGroup>
                 <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                    <RhfAsyncSelectField
-                        name="customer"
-                        label="Customer"
-                        placeholder="Select customer"
-                        required
-                        queryKey={[CUSTOMER_ROUTES.INDEX]}
-                        listFn={() => api.customers.list()}
-                        mapOption={(item: any) => ({
-                            value: String(item.id),
-                            label: item.first_name
-                                ? `${item.first_name} ${item.last_name || ""}`.trim()
-                                : item.name || `#${item.id}`,
-                        })}
-                        {...STORE_OBJECT}
-                    />
-                    <RhfAsyncSelectField
-                        name="job_card"
-                        label="Job Card"
-                        placeholder="Select job card"
-                        queryKey={[JOB_CARD_ROUTES.INDEX]}
-                        listFn={() => api.jobCards.list()}
-                        mapOption={(item: any) => ({
-                            value: String(item.id),
-                            label: item.title,
-                        })}
-                        {...STORE_OBJECT}
-                    />
+                    {isCustomerLocked ? (
+                        <Field>
+                            <FieldLabel>
+                                Customer<span className="text-destructive ms-0.5">*</span>
+                            </FieldLabel>
+                            <Input value={customerLabel} readOnly disabled />
+                        </Field>
+                    ) : (
+                        <RhfAsyncSelectField
+                            name="customer"
+                            label="Customer"
+                            placeholder="Select customer"
+                            required
+                            queryKey={[CUSTOMER_ROUTES.INDEX]}
+                            listFn={() => api.customers.list()}
+                            mapOption={(item: any) => ({
+                                value: String(item.id),
+                                label: item.first_name
+                                    ? `${item.first_name} ${item.last_name || ""}`.trim()
+                                    : item.name || `#${item.id}`,
+                            })}
+                            {...STORE_OBJECT}
+                        />
+                    )}
+                    {isJobCardLocked ? (
+                        <Field>
+                            <FieldLabel>Job Card</FieldLabel>
+                            <Input value={defaultJobCard?.title ?? ""} readOnly disabled />
+                        </Field>
+                    ) : (
+                        <RhfAsyncSelectField
+                            name="job_card"
+                            label="Job Card"
+                            placeholder="Select job card"
+                            queryKey={[JOB_CARD_ROUTES.INDEX]}
+                            listFn={() => api.jobCards.list()}
+                            mapOption={(item: any) => ({
+                                value: String(item.id),
+                                label: item.title,
+                            })}
+                            {...STORE_OBJECT}
+                        />
+                    )}
                 </div>
 
                 <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
diff --git a/apps/dashboard/modules/purchase-orders/create-bill-from-po-button.tsx b/apps/dashboard/modules/purchase-orders/create-bill-from-po-button.tsx
index 33c31b5..36d74d6 100644
--- a/apps/dashboard/modules/purchase-orders/create-bill-from-po-button.tsx
+++ b/apps/dashboard/modules/purchase-orders/create-bill-from-po-button.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from "react"
 import { FileText } from "lucide-react"
+import { useQueryClient } from "@tanstack/react-query"
 import { Button } from "@/shared/components/ui/button"
 import {
     Dialog,
@@ -11,50 +12,53 @@ import {
 } from "@/shared/components/ui/dialog"
 import { ScrollArea } from "@/shared/components/ui/scroll-area"
 import { BillForm } from "@/modules/bills/bill-form"
-import { toRelation } from "@/shared/lib/utils"
 import { usePurchaseOrder } from "./purchase-order-context"
 import { getFullName } from "@/shared/utils/getFullName"
+import { getTodayDate } from "@/shared/lib/utils"
+import { BILL_ROUTES } from "@garage/api"
 
-/**
- * Maps a Purchase Order data object to a complete BillFormValues shape so that
- * useResourceForm's shallow spread (`{ ...defaultValues, ...initialData }`) correctly
- * pre-fills all relational and line-item fields.
- */
-function mapPOToBillInitialData(po: Record<string, any>) {
+// Build an API-shaped seed that BillForm's `mapToFormValues` will consume,
+// so the dialog opens with PO fields, vendor/department/job_card relations,
+// and line items pre-filled.
+function mapPOToBillSeed(po: Record<string, any>) {
     return {
-        // Text fields
         title: po.title ?? "",
         notes: po.notes ?? "",
+        bill_date: getTodayDate(),
+
+        vendor_id: po.vendor_id,
+        vendor: po.vendor ? { name: getFullName(po.vendor) } : undefined,
+
+        department_id: po.department_id,
+        department: po.department,
+
+        job_card_id: po.job_card_id,
+        job_card: po.job_card
+            ? { order_number: po.job_card.order_number ?? po.job_card.title }
+            : undefined,
 
-        // Relation fields — must be { value, label } objects for RhfAsyncSelectField
-        vendor: toRelation(po.vendor_id, getFullName(po.vendor)),
-        department: toRelation(po.department_id, po.department.name),
-        job_card: toRelation(po.job_card_id, po.job_card.title  ),
         // Link bill back to the source PO
-        purchase_order: toRelation(po.id, po.order_number ?? po.title),
+        purchase_order_id: po.id,
+        purchase_order: { order_number: po.order_number ?? po.title },
 
-        // Parts pre-filled from PO items
-        part_items: (po.parts ?? []).map((p: any) => ({
+        parts: (po.parts ?? []).map((p: any) => ({
             part_id: p.part_id ?? p.id,
-            title: p.part?.title ?? p.title ?? "",
+            part: { name: p.part?.title ?? p.part?.name ?? p.title ?? "" },
             quantity: Number(p.quantity) || 1,
             rate: Number(p.rate) || 0,
             description: p.description ?? "",
         })),
-
-        // Services and expenses start empty (PO doesn't have them)
-        service_items: [],
-        expense_items: [],
     }
 }
 
 export function CreateBillFromPOButton() {
     const [open, setOpen] = useState(false)
     const poContext = usePurchaseOrder()
+    const queryClient = useQueryClient()
 
     if (!poContext) return null
 
-    const initialData = poContext.data ? mapPOToBillInitialData(poContext.data) : undefined
+    const initialData = poContext.data ? mapPOToBillSeed(poContext.data) : undefined
 
     return (
         <>
@@ -71,7 +75,12 @@ export function CreateBillFromPOButton() {
                     <ScrollArea className="max-h-[75vh] px-1">
                         <BillForm
                             initialData={initialData}
-                            onSuccess={() => setOpen(false)}
+                            onSuccess={() => {
+                                // Invalidate bills list so when user lands on the bills
+                                // page the new bill is present without a manual refresh.
+                                queryClient.invalidateQueries({ queryKey: [BILL_ROUTES.INDEX] })
+                                setOpen(false)
+                            }}
                         />
                     </ScrollArea>
                 </DialogContent>
diff --git a/apps/dashboard/modules/purchase-orders/purchase-order-actions.tsx b/apps/dashboard/modules/purchase-orders/purchase-order-actions.tsx
index e786941..26c8c58 100644
--- a/apps/dashboard/modules/purchase-orders/purchase-order-actions.tsx
+++ b/apps/dashboard/modules/purchase-orders/purchase-order-actions.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { useState } from "react"
 import { useAuthApi } from "@/shared/useApi"
 import { useRouter } from "next/navigation"
 import { Button } from "@/shared/components/ui/button"
@@ -10,9 +11,10 @@ import {
     DropdownMenuTrigger,
 } from "@/shared/components/ui/dropdown-menu"
 import { confirm } from "@/shared/components/confirm-dialog"
-import { Ellipsis, Printer, Trash2 } from "lucide-react"
+import { Ellipsis, Printer, Share2, Trash2 } from "lucide-react"
 import { toast } from "sonner"
 import { useDocumentPrint } from "@/shared/hooks/use-document-print"
+import { ShareDocumentDialog } from "@/shared/components/share-document-dialog"
 
 type PurchaseOrderActionsProps = {
     purchaseOrderId: string
@@ -22,6 +24,7 @@ export function PurchaseOrderActions({ purchaseOrderId }: PurchaseOrderActionsPr
     const api = useAuthApi()
     const router = useRouter()
     const { print, isPrinting } = useDocumentPrint()
+    const [shareOpen, setShareOpen] = useState(false)
 
     const handleDelete = async () => {
         const confirmed = await confirm({
@@ -43,22 +46,30 @@ export function PurchaseOrderActions({ purchaseOrderId }: PurchaseOrderActionsPr
     }
 
     return (
-        <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon">
-                    <Ellipsis className="size-4" />
-                </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-                <DropdownMenuItem onClick={() => print("purchase_order", purchaseOrderId, "print")} disabled={isPrinting}>
-                    <Printer className="size-4" />
-                    {isPrinting ? "Printing..." : "Print"}
-                </DropdownMenuItem>
-                <DropdownMenuItem variant="destructive" onClick={handleDelete}>
-                    <Trash2 className="size-4" />
-                    Delete
-                </DropdownMenuItem>
-            </DropdownMenuContent>
-        </DropdownMenu>
+        <>
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon">
+                        <Ellipsis className="size-4" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => print("purchase_order", purchaseOrderId, "print")} disabled={isPrinting}>
+                        <Printer className="size-4" />
+                        {isPrinting ? "Printing..." : "Print"}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => setShareOpen(true)}>
+                        <Share2 className="size-4" />
+                        Share
+                    </DropdownMenuItem>
+                    <DropdownMenuItem variant="destructive" onClick={handleDelete}>
+                        <Trash2 className="size-4" />
+                        Delete
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+
+            <ShareDocumentDialog type="purchase_order" id={purchaseOrderId} open={shareOpen} onOpenChange={setShareOpen} />
+        </>
     )
 }
diff --git a/apps/dashboard/modules/purchase-orders/purchase-order-general-info.tsx b/apps/dashboard/modules/purchase-orders/purchase-order-general-info.tsx
index aa5c728..cce8315 100644
--- a/apps/dashboard/modules/purchase-orders/purchase-order-general-info.tsx
+++ b/apps/dashboard/modules/purchase-orders/purchase-order-general-info.tsx
@@ -6,7 +6,6 @@ import {
     Truck,
     FileText,
     Package,
-    DollarSign,
 } from "lucide-react"
 import {
     Card,
@@ -24,6 +23,7 @@ import {
     TableRow,
     TableCell,
 } from "@/shared/components/ui/table"
+import { Money } from "@/shared/components/money"
 
 type PurchaseOrderPart = {
     id?: number
@@ -92,11 +92,6 @@ function formatDate(dateStr?: string | null) {
     return new Date(dateStr).toLocaleDateString()
 }
 
-function formatCurrency(value?: string | number | null) {
-    if (value == null) return "—"
-    return `$${Number(value).toFixed(2)}`
-}
-
 export function PurchaseOrderGeneralInfo({ purchaseOrder }: PurchaseOrderGeneralInfoProps) {
     const parts = purchaseOrder.parts ?? []
     const totalAmount = parts.reduce(
@@ -219,9 +214,8 @@ export function PurchaseOrderGeneralInfo({ purchaseOrder }: PurchaseOrderGeneral
                             <Package className="size-4" />
                             Parts ({parts.length})
                         </span>
-                        <span className="flex items-center gap-2 text-base">
-                            <DollarSign className="size-4" />
-                            Total: {formatCurrency(totalAmount)}
+                        <span className="text-base whitespace-nowrap">
+                            Total: <Money value={totalAmount} />
                         </span>
                     </CardTitle>
                 </CardHeader>
@@ -257,10 +251,10 @@ export function PurchaseOrderGeneralInfo({ purchaseOrder }: PurchaseOrderGeneral
                                                     {item.quantity ?? 0}
                                                 </TableCell>
                                                 <TableCell className="text-right">
-                                                    {formatCurrency(item.rate)}
+                                                    {<Money value={item.rate} />}
                                                 </TableCell>
                                                 <TableCell className="text-right font-medium">
-                                                    {formatCurrency(amount)}
+                                                    {<Money value={amount} />}
                                                 </TableCell>
                                             </TableRow>
                                         )
@@ -270,7 +264,7 @@ export function PurchaseOrderGeneralInfo({ purchaseOrder }: PurchaseOrderGeneral
                                             Total
                                         </TableCell>
                                         <TableCell className="text-right">
-                                            {formatCurrency(totalAmount)}
+                                            {<Money value={totalAmount} />}
                                         </TableCell>
                                     </TableRow>
                                 </TableBody>
diff --git a/apps/dashboard/modules/services/services-selector-field.tsx b/apps/dashboard/modules/services/services-selector-field.tsx
index a382b78..e801931 100644
--- a/apps/dashboard/modules/services/services-selector-field.tsx
+++ b/apps/dashboard/modules/services/services-selector-field.tsx
@@ -55,6 +55,7 @@ export function ServicesSelectorField<
             itemKey="service_id"
             dialogProps={{
                 title: "Select Services",
+                searchPlaceholder: "Search services...",
                 crudProps: {
                     routeKey: SERVICE_ROUTES.INDEX,
                     getClient: (api) => api.services,
diff --git a/apps/dashboard/modules/vehicles/rhf-vehicle-select-field.tsx b/apps/dashboard/modules/vehicles/rhf-vehicle-select-field.tsx
index efd6d57..434b987 100644
--- a/apps/dashboard/modules/vehicles/rhf-vehicle-select-field.tsx
+++ b/apps/dashboard/modules/vehicles/rhf-vehicle-select-field.tsx
@@ -52,6 +52,27 @@ function buildVehicleOption(item: any): VehicleOption {
     }
 }
 
+function VehicleThumb({ src }: { src?: string }) {
+    const [broken, setBroken] = useState(false)
+    if (!src || broken) {
+        return (
+            <div className="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground border border-border">
+                <Car className="size-4" />
+            </div>
+        )
+    }
+    return (
+        <Image
+            height={60}
+            width={60}
+            src={src}
+            alt=""
+            onError={() => setBroken(true)}
+            className="size-9 shrink-0 rounded-md object-cover border border-border"
+        />
+    )
+}
+
 function extractItems(response: unknown): any[] {
     if (Array.isArray(response)) return response
     const obj = response as any
@@ -168,20 +189,7 @@ export function RhfVehicleSelectField<
                                 filtered.map((opt) => (
                                     <ComboboxItem key={opt.value} value={opt}>
                                         <div className="flex items-center gap-3 py-0.5 w-full min-w-0">
-                                            {/* Thumbnail */}
-                                            {opt.image_url ? (
-                                                <Image
-                                                height={60}
-                                                width={60}
-                                                    src={opt.image_url}
-                                                    alt=""
-                                                    className="size-9 shrink-0 rounded-md object-cover border border-border"
-                                                />
-                                            ) : (
-                                                <div className="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground border border-border">
-                                                    <Car className="size-4" />
-                                                </div>
-                                            )}
+                                            <VehicleThumb src={opt.image_url} />
 
                                             {/* Identity */}
                                             <div className="flex min-w-0 flex-1 flex-col gap-0.5">
diff --git a/apps/dashboard/modules/vehicles/vehicle-form.tsx b/apps/dashboard/modules/vehicles/vehicle-form.tsx
index f39cf99..5b5e07d 100644
--- a/apps/dashboard/modules/vehicles/vehicle-form.tsx
+++ b/apps/dashboard/modules/vehicles/vehicle-form.tsx
@@ -69,6 +69,9 @@ const mapLookupOption = (item: any) => ({
 
 const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
 
+const toFormString = (value: unknown): string =>
+    value == null ? "" : String(value)
+
 function mapToFormValues(data: unknown): VehicleFormValues {
     const d = (data as any)?.data ?? data ?? {}
 
@@ -79,16 +82,16 @@ function mapToFormValues(data: unknown): VehicleFormValues {
         vehicle_transmission_id: toRelation(d.vehicle_transmission_id, d.vehicle_transmission?.title),
         vehicle_color_id: toRelation(d.vehicle_color_id, d.vehicle_color?.title),
         customer_id: toRelation(d.customer_id, d.customer?.name),
-        make: d.make || "",
-        model: d.model || "",
-        year: d.year || "",
-        sub_model: d.sub_model || "",
-        license_plate: d.license_plate || "",
-        vin_number: d.vin_number || "",
-        engine_size: d.engine_size || "",
-        drivetrain: d.drivetrain || "",
-        mileage: d.mileage || "",
-        note: d.note || "",
+        make: toFormString(d.make),
+        model: toFormString(d.model),
+        year: toFormString(d.year),
+        sub_model: toFormString(d.sub_model),
+        license_plate: toFormString(d.license_plate),
+        vin_number: toFormString(d.vin_number),
+        engine_size: toFormString(d.engine_size),
+        drivetrain: toFormString(d.drivetrain),
+        mileage: toFormString(d.mileage),
+        note: toFormString(d.note),
         image: null,
     }
 }
@@ -121,7 +124,7 @@ function mapToPayload(values: VehicleFormValues) {
 export function VehicleForm({ resourceId, initialData, onSuccess }: VehicleFormProps) {
     const api = useAuthApi()
 
-    const { form, isEditing } = useResourceForm<VehicleFormValues, any>({
+    const { form, isEditing, data: resolvedData } = useResourceForm<VehicleFormValues, any>({
         schema: vehicleFormSchema,
         defaultValues: DEFAULT_VALUES,
         resourceId,
@@ -131,6 +134,9 @@ export function VehicleForm({ resourceId, initialData, onSuccess }: VehicleFormP
         mapToFormValues,
     })
 
+    const existingImageUrl: string | null =
+        (resolvedData as any)?.data?.image_url ?? (resolvedData as any)?.image_url ?? null
+
     const { mutate, error, isPending } = useFormMutation(form, {
         mutationFn: (values: VehicleFormValues) => {
             const payload = mapToPayload(values)
@@ -260,7 +266,11 @@ export function VehicleForm({ resourceId, initialData, onSuccess }: VehicleFormP
                     <RhfTextField name="mileage" label="Mileage" placeholder="e.g. 10000" />
                 </div>
 
-                <RhfImageField name="image" label="Image" />
+                <RhfImageField
+                    name="image"
+                    label="Image"
+                    initialPreviewUrl={existingImageUrl}
+                />
 
                 <RhfTextareaField name="note" label="Notes" rows={3} />
 
diff --git a/apps/dashboard/modules/vendors/vendor-actions.tsx b/apps/dashboard/modules/vendors/vendor-actions.tsx
new file mode 100644
index 0000000..e773302
--- /dev/null
+++ b/apps/dashboard/modules/vendors/vendor-actions.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { useAuthApi } from "@/shared/useApi"
+import { useRouter } from "next/navigation"
+import { Button } from "@/shared/components/ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog"
+import { ScrollArea } from "@/shared/components/ui/scroll-area"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/shared/components/ui/dropdown-menu"
+import { Ellipsis, Pencil, Power, Trash2 } from "lucide-react"
+import { confirm } from "@/shared/components/confirm-dialog"
+import { toast } from "sonner"
+import { useFormDialog } from "@/shared/components/form-dialog"
+import { VendorForm } from "./vendor-form"
+
+type VendorActionsProps = {
+    vendorId: string
+    isActive?: boolean
+}
+
+export function VendorActions({ vendorId, isActive }: VendorActionsProps) {
+    const api = useAuthApi()
+    const router = useRouter()
+    const editDialog = useFormDialog("vendor-details-edit")
+
+    const handleDelete = async () => {
+        const confirmed = await confirm({
+            title: "Delete Vendor",
+            description: "Are you sure you want to delete this vendor? This action cannot be undone.",
+            confirmLabel: "Delete",
+            variant: "destructive",
+        })
+        if (!confirmed) return
+
+        try {
+            await api.vendors.destroy(vendorId)
+            toast.success("Vendor deleted successfully.")
+            router.push("/purchase/vendor")
+        } catch {
+            toast.error("Failed to delete vendor.")
+        }
+    }
+
+    const handleToggleStatus = async () => {
+        try {
+            await api.vendors.toggleStatus({ id: Number(vendorId) } as any)
+            toast.success(isActive ? "Vendor deactivated." : "Vendor activated.")
+            router.refresh()
+        } catch {
+            toast.error("Failed to update vendor status.")
+        }
+    }
+
+    return (
+        <>
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon">
+                        <Ellipsis className="size-4" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => editDialog.open(vendorId)}>
+                        <Pencil className="size-4" />
+                        Edit
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={handleToggleStatus}>
+                        <Power className="size-4" />
+                        {isActive ? "Deactivate" : "Activate"}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem variant="destructive" onClick={handleDelete}>
+                        <Trash2 className="size-4" />
+                        Delete
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+
+            <Dialog open={editDialog.isOpen} onOpenChange={(v) => { if (!v) editDialog.close() }}>
+                <DialogContent className="min-w-xl lg:min-w-2xl">
+                    <DialogHeader>
+                        <DialogTitle className="text-2xl font-bold">Edit Vendor</DialogTitle>
+                    </DialogHeader>
+                    <ScrollArea className="max-h-[80vh] px-4">
+                        <VendorForm
+                            resourceId={editDialog.resourceId}
+                            onSuccess={() => {
+                                editDialog.close()
+                                router.refresh()
+                            }}
+                        />
+                    </ScrollArea>
+                </DialogContent>
+            </Dialog>
+        </>
+    )
+}
diff --git a/apps/dashboard/modules/vendors/vendor-context.tsx b/apps/dashboard/modules/vendors/vendor-context.tsx
new file mode 100644
index 0000000..811cb90
--- /dev/null
+++ b/apps/dashboard/modules/vendors/vendor-context.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import { createContext, useContext } from "react"
+
+type VendorContextValue = {
+    id: string
+    label: string
+}
+
+const VendorContext = createContext<VendorContextValue | null>(null)
+
+export function VendorProvider({
+    vendor,
+    children,
+}: {
+    vendor: VendorContextValue
+    children: React.ReactNode
+}) {
+    return (
+        <VendorContext.Provider value={vendor}>
+            {children}
+        </VendorContext.Provider>
+    )
+}
+
+export function useVendor() {
+    return useContext(VendorContext)
+}
diff --git a/apps/dashboard/modules/vendors/vendor-general-info.tsx b/apps/dashboard/modules/vendors/vendor-general-info.tsx
new file mode 100644
index 0000000..14997e9
--- /dev/null
+++ b/apps/dashboard/modules/vendors/vendor-general-info.tsx
@@ -0,0 +1,135 @@
+import {
+    Building2,
+    CreditCard,
+    DollarSign,
+    Globe,
+    Mail,
+    Phone,
+    User,
+} from "lucide-react"
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+} from "@/shared/components/ui/card"
+import { Badge } from "@/shared/components/ui/badge"
+import { Separator } from "@/shared/components/ui/separator"
+import { Money } from "@/shared/components/money"
+
+type VendorData = {
+    id?: number
+    salutation?: string | null
+    first_name?: string | null
+    last_name?: string | null
+    company_name?: string | null
+    email?: string | null
+    phone?: string | null
+    alternate_phone?: string | null
+    website?: string | null
+    opening_balance?: number | string | null
+    credit_limit?: number | string | null
+    status?: string | null
+    created_at?: string
+    updated_at?: string
+}
+
+type VendorGeneralInfoProps = {
+    vendor: VendorData
+}
+
+function InfoItem({
+    icon: Icon,
+    label,
+    value,
+}: {
+    icon: React.ComponentType<{ className?: string }>
+    label: string
+    value?: React.ReactNode
+}) {
+    const isEmpty = value == null || value === ""
+    return (
+        <div className="flex items-start gap-3">
+            <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+                <Icon className="size-4" />
+            </div>
+            <div className="flex flex-col gap-0.5">
+                <span className="text-xs text-muted-foreground">{label}</span>
+                <span className="text-sm font-medium">
+                    {isEmpty ? <span className="text-muted-foreground">—</span> : value}
+                </span>
+            </div>
+        </div>
+    )
+}
+
+export function VendorGeneralInfo({ vendor }: VendorGeneralInfoProps) {
+    const fullName = [vendor.salutation, vendor.first_name, vendor.last_name]
+        .filter(Boolean)
+        .join(" ")
+        .trim()
+
+    return (
+        <div className="grid gap-6 md:grid-cols-2">
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                        <Building2 className="size-4" />
+                        Vendor Information
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="grid gap-4">
+                    <div className="flex flex-wrap items-center gap-2">
+                        <Badge variant="secondary">{vendor.company_name || fullName || "Unknown vendor"}</Badge>
+                        {vendor.status && (
+                            <Badge variant={vendor.status === "active" ? "default" : "outline"} className="capitalize">
+                                {vendor.status}
+                            </Badge>
+                        )}
+                    </div>
+                    <Separator />
+                    <div className="grid gap-4 sm:grid-cols-2">
+                        <InfoItem icon={Building2} label="Company" value={vendor.company_name} />
+                        <InfoItem icon={User} label="Contact Name" value={fullName} />
+                    </div>
+                </CardContent>
+            </Card>
+
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                        <Phone className="size-4" />
+                        Contact Details
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="grid gap-4 sm:grid-cols-2">
+                    <InfoItem icon={Mail} label="Email" value={vendor.email} />
+                    <InfoItem icon={Phone} label="Phone" value={vendor.phone} />
+                    <InfoItem icon={Phone} label="Alternate Phone" value={vendor.alternate_phone} />
+                    <InfoItem icon={Globe} label="Website" value={vendor.website} />
+                </CardContent>
+            </Card>
+
+            <Card className="md:col-span-2">
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                        <DollarSign className="size-4" />
+                        Financial Details
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="grid gap-4 sm:grid-cols-2">
+                    <InfoItem
+                        icon={DollarSign}
+                        label="Opening Balance"
+                        value={vendor.opening_balance != null ? <Money value={vendor.opening_balance} /> : null}
+                    />
+                    <InfoItem
+                        icon={CreditCard}
+                        label="Credit Limit"
+                        value={vendor.credit_limit != null ? <Money value={vendor.credit_limit} /> : null}
+                    />
+                </CardContent>
+            </Card>
+        </div>
+    )
+}
diff --git a/apps/dashboard/next.config.mjs b/apps/dashboard/next.config.mjs
index b40b041..1ec8fe3 100644
--- a/apps/dashboard/next.config.mjs
+++ b/apps/dashboard/next.config.mjs
@@ -8,6 +8,18 @@ const nextConfig = {
                 hostname: 'newgarage.yslootahtech.com',
                 port: '',
                 pathname: '/**',
+            },
+            {
+                protocol: 'http',
+                hostname: 'reparee.test',
+                port: '',
+                pathname: '/**',
+            },
+            {
+                protocol: 'https',
+                hostname: 'reparee.test',
+                port: '',
+                pathname: '/**',
             }
         ]
     }
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index cca0b05..6b8f309 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -31,6 +31,7 @@
     "lucide-react": "^0.577.0",
     "next": "16.1.7",
     "next-themes": "^0.4.6",
+    "nextjs-toploader": "^3.9.17",
     "nuqs": "^2.8.9",
     "object-to-formdata": "^4.5.1",
     "radix-ui": "^1.4.3",
diff --git a/apps/dashboard/shared/components/aed-symbol.tsx b/apps/dashboard/shared/components/aed-symbol.tsx
new file mode 100644
index 0000000..c94b477
--- /dev/null
+++ b/apps/dashboard/shared/components/aed-symbol.tsx
@@ -0,0 +1,30 @@
+import { cn } from "@/shared/lib/utils"
+
+type AedSymbolProps = {
+    className?: string
+    /** Accessible label for screen readers. Defaults to "Dirham" (do not show "AED" alongside the symbol per CBUAE guidelines). */
+    title?: string
+}
+
+/**
+ * Official UAE Dirham symbol (CBUAE, 2025).
+ * Glyph source: Central Bank of the UAE, released under CC0.
+ * Per CBUAE guidelines: place immediately before the amount, match numeral size/style,
+ * preserve aspect ratio (no distortion), and do not pair with the visible text "AED".
+ */
+export function AedSymbol({ className, title = "Dirham" }: AedSymbolProps) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 1000 870"
+            role="img"
+            aria-label={title}
+            className={cn("inline-block h-[0.85em] w-auto align-[-0.08em]", className)}
+            fill="currentColor"
+            preserveAspectRatio="xMidYMid meet"
+        >
+            <title>{title}</title>
+            <path d="m88.3 1c0.4 0.6 2.6 3.3 4.7 5.9 15.3 18.2 26.8 47.8 33 85.1 4.1 24.5 4.3 32.2 4.3 125.6v87h-41.8c-38.2 0-42.6-0.2-50.1-1.7-11.8-2.5-24-9.2-32.2-17.8-6.5-6.9-6.3-7.3-5.9 13.6 0.5 17.3 0.7 19.2 3.2 28.6 4 14.9 9.5 26 17.8 35.9 11.3 13.6 22.8 21.2 39.2 26.3 3.5 1 10.9 1.4 37.1 1.6l32.7 0.5v43.3 43.4l-46.1-0.3-46.3-0.3-8-3.2c-9.5-3.8-13.8-6.6-23.1-14.9l-6.8-6.1 0.4 19.1c0.5 17.7 0.6 19.7 3.1 28.7 8.7 31.8 29.7 54.5 57.4 61.9 6.9 1.9 9.6 2 38.5 2.4l30.9 0.4v89.6c0 54.1-0.3 94-0.8 100.8-0.5 6.2-2.1 17.8-3.5 25.9-6.5 37.3-18.2 65.4-35 83.6l-3.4 3.7h169.1c101.1 0 176.7-0.4 187.8-0.9 19.5-1 63-5.3 72.8-7.4 3.1-0.6 8.9-1.5 12.7-2.1 8.1-1.2 21.5-4 40.8-8.9 27.2-6.8 52-15.3 76.3-26.1 7.6-3.4 29.4-14.5 35.2-18 3.1-1.8 6.8-4 8.2-4.7 3.9-2.1 10.4-6.3 19.9-13.1 4.7-3.4 9.4-6.7 10.4-7.4 4.2-2.8 18.7-14.9 25.3-21 25.1-23.1 46.1-48.8 62.4-76.3 2.3-4 5.3-9 6.6-11.1 3.3-5.6 16.9-33.6 18.2-37.8 0.6-1.9 1.4-3.9 1.8-4.3 2.6-3.4 17.6-50.6 19.4-60.9 0.6-3.3 0.9-3.8 3.4-4.3 1.6-0.3 24.9-0.3 51.8-0.1 53.8 0.4 53.8 0.4 65.7 5.9 6.7 3.1 8.7 4.5 16.1 11.2 9.7 8.7 8.8 10.1 8.2-11.7-0.4-12.8-0.9-20.7-1.8-23.9-3.4-12.3-4.2-14.9-7.2-21.1-9.8-21.4-26.2-36.7-47.2-44l-8.2-3-33.4-0.4-33.3-0.5 0.4-11.7c0.4-15.4 0.4-45.9-0.1-61.6l-0.4-12.6 44.6-0.2c38.2-0.2 45.3 0 49.5 1.1 12.6 3.5 21.1 8.3 31.5 17.8l5.8 5.4v-14.8c0-17.6-0.9-25.4-4.5-37-7.1-23.5-21.1-41-41.1-51.8-13-7-13.8-7.2-58.5-7.5-26.2-0.2-39.9-0.6-40.6-1.2-0.6-0.6-1.1-1.6-1.1-2.4 0-0.8-1.5-7.1-3.5-13.9-23.4-82.7-67.1-148.4-131-197.1-8.7-6.7-30-20.8-38.6-25.6-3.3-1.9-6.9-3.9-7.8-4.5-4.2-2.3-28.3-14.1-34.3-16.6-3.6-1.6-8.3-3.6-10.4-4.4-35.3-15.3-94.5-29.8-139.7-34.3-7.4-0.7-17.2-1.8-21.7-2.2-20.4-2.3-48.7-2.6-209.4-2.6-135.8 0-169.9 0.3-169.4 1zm330.7 43.3c33.8 2 54.6 4.6 78.9 10.5 74.2 17.6 126.4 54.8 164.3 117 3.5 5.8 18.3 36 20.5 42.1 10.5 28.3 15.6 45.1 20.1 67.3 1.1 5.4 2.6 12.6 3.3 16 0.7 3.3 1 6.4 0.7 6.7-0.5 0.4-100.9 0.6-223.3 0.5l-222.5-0.2-0.3-128.5c-0.1-70.6 0-129.3 0.3-130.4l0.4-1.9h71.1c39 0 78 0.4 86.5 0.9zm297.5 350.3c0.7 4.3 0.7 77.3 0 80.9l-0.6 2.7-227.5-0.2-227.4-0.3-0.2-42.4c-0.2-23.3 0-42.7 0.2-43.1 0.3-0.5 97.2-0.8 227.7-0.8h227.2zm-10.2 171.7c0.5 1.5-1.9 13.8-6.8 33.8-5.6 22.5-13.2 45.2-20.9 62-3.8 8.6-13.3 27.2-15.6 30.7-1.1 1.6-4.3 6.7-7.1 11.2-18 28.2-43.7 53.9-73 72.9-10.7 6.8-32.7 18.4-38.6 20.2-1.2 0.3-2.5 0.9-3 1.3-0.7 0.6-9.8 4-20.4 7.8-19.5 6.9-56.6 14.4-86.4 17.5-19.3 1.9-22.4 2-96.7 2h-76.9v-129.7-129.8l220.9-0.4c121.5-0.2 221.6-0.5 222.4-0.7 0.9-0.1 1.8 0.5 2.1 1.2z" />
+        </svg>
+    )
+}
diff --git a/apps/dashboard/shared/components/document-totals-summary.tsx b/apps/dashboard/shared/components/document-totals-summary.tsx
index 7428161..ab0224c 100644
--- a/apps/dashboard/shared/components/document-totals-summary.tsx
+++ b/apps/dashboard/shared/components/document-totals-summary.tsx
@@ -1,9 +1,10 @@
 "use client"
 
+import type { ReactNode } from "react"
 import { Separator } from "@/shared/components/ui/separator"
-import { formatCurrency } from "@/shared/utils/formatters"
 import { cn } from "@/shared/lib/utils"
 import type { DocumentTotals } from "@/shared/hooks/use-document-totals"
+import { Money } from "@/shared/components/money"
 
 export type DocumentTotalsSummaryProps = {
     totals: DocumentTotals
@@ -20,7 +21,7 @@ function SummaryRow({
     className,
 }: {
     label: string
-    value: string
+    value: ReactNode
     muted?: boolean
     className?: string
 }) {
@@ -58,7 +59,7 @@ export function DocumentTotalsSummary({
                     <SummaryRow
                         key={label}
                         label={label}
-                        value={formatCurrency(amount)}
+                        value={<Money value={amount} />}
                         muted
                     />
                 ))}
@@ -66,13 +67,13 @@ export function DocumentTotalsSummary({
             {groupLabels && Object.keys(groupLabels).length > 0 && <Separator />}
 
             {/* Subtotal */}
-            <SummaryRow label="Subtotal" value={formatCurrency(subTotal)} />
+            <SummaryRow label="Subtotal" value={<Money value={subTotal} />} />
 
             {/* Line-item discount */}
             {discountType === "line_item_level" && lineItemDiscount > 0 && (
                 <SummaryRow
                     label="Line Discounts"
-                    value={`– ${formatCurrency(lineItemDiscount)}`}
+                    value={<Money value={lineItemDiscount} prefix="– " />}
                     muted
                 />
             )}
@@ -81,7 +82,7 @@ export function DocumentTotalsSummary({
             {discountType === "transaction_level" && transactionDiscount > 0 && (
                 <SummaryRow
                     label="Discount"
-                    value={`– ${formatCurrency(transactionDiscount)}`}
+                    value={<Money value={transactionDiscount} prefix="– " />}
                     muted
                 />
             )}
@@ -90,7 +91,7 @@ export function DocumentTotalsSummary({
             {taxAmount > 0 && (
                 <SummaryRow
                     label={taxLabel ?? "Tax"}
-                    value={`+ ${formatCurrency(taxAmount)}`}
+                    value={<Money value={taxAmount} prefix="+ " />}
                     muted
                 />
             )}
@@ -103,7 +104,7 @@ export function DocumentTotalsSummary({
                 "bg-primary/10 text-primary",
             )}>
                 <span>Total</span>
-                <span>{formatCurrency(total)}</span>
+                <span><Money value={total} /></span>
             </div>
         </div>
     )
diff --git a/apps/dashboard/shared/components/download-sample-button.tsx b/apps/dashboard/shared/components/download-sample-button.tsx
deleted file mode 100644
index 03733a2..0000000
--- a/apps/dashboard/shared/components/download-sample-button.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { Button } from "@/shared/components/ui/button"
-import { Download, Loader2 } from "lucide-react"
-import { toast } from "sonner"
-
-type DownloadSampleButtonProps = {
-    onDownload: () => Promise<Blob>
-    fileName?: string
-    label?: string
-}
-
-export function DownloadSampleButton({
-    onDownload,
-    fileName = "import-sample",
-    label = "Sample",
-}: DownloadSampleButtonProps) {
-    const [isPending, setIsPending] = useState(false)
-
-    const handleDownload = async () => {
-        setIsPending(true)
-        try {
-            const blob = await onDownload()
-            const url = URL.createObjectURL(blob)
-            const anchor = document.createElement("a")
-            anchor.href = url
-            anchor.download = `${fileName}.xlsx`
-            document.body.appendChild(anchor)
-            anchor.click()
-            document.body.removeChild(anchor)
-            URL.revokeObjectURL(url)
-            toast.success("Sample downloaded successfully")
-        } catch (err: any) {
-            toast.error(err?.message ?? "Failed to download sample")
-        } finally {
-            setIsPending(false)
-        }
-    }
-
-    return (
-        <Button size="sm" variant="outline" disabled={isPending} onClick={handleDownload}>
-            {isPending ? <Loader2 className="animate-spin" /> : <Download />}
-            {label}
-        </Button>
-    )
-}
\ No newline at end of file
diff --git a/apps/dashboard/shared/components/export-data-button.tsx b/apps/dashboard/shared/components/export-data-button.tsx
index e5a6692..1ce37ac 100644
--- a/apps/dashboard/shared/components/export-data-button.tsx
+++ b/apps/dashboard/shared/components/export-data-button.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from "react"
 import { Button } from "@/shared/components/ui/button"
-import { Download, Loader2 } from "lucide-react"
+import { Upload, Loader2 } from "lucide-react"
 import { toast } from "sonner"
 
 type ExportDataButtonProps = {
@@ -47,7 +47,7 @@ export function ExportDataButton({
             disabled={isPending}
             onClick={handleExport}
         >
-            {isPending ? <Loader2 className="animate-spin" /> : <Download />}
+            {isPending ? <Loader2 className="animate-spin" /> : <Upload />}
             {label}
         </Button>
     )
diff --git a/apps/dashboard/shared/components/form/controls/image-input-field.tsx b/apps/dashboard/shared/components/form/controls/image-input-field.tsx
index edb94e0..680a825 100644
--- a/apps/dashboard/shared/components/form/controls/image-input-field.tsx
+++ b/apps/dashboard/shared/components/form/controls/image-input-field.tsx
@@ -7,6 +7,7 @@ import { cn } from "@/shared/lib/utils"
 
 export type ImageInputFieldProps = BaseFieldControlProps<File | null> & {
     accept?: string
+    initialPreviewUrl?: string | null
 }
 
 export function ImageInputField({
@@ -17,21 +18,24 @@ export function ImageInputField({
     disabled,
     invalid,
     accept = "image/*",
+    initialPreviewUrl,
 }: ImageInputFieldProps) {
     const inputRef = useRef<HTMLInputElement>(null)
-    const [preview, setPreview] = useState<string | null>(null)
+    const [filePreview, setFilePreview] = useState<string | null>(null)
     const [isDragging, setIsDragging] = useState(false)
 
     useEffect(() => {
         if (!value) {
-            setPreview(null)
+            setFilePreview(null)
             return
         }
         const url = URL.createObjectURL(value)
-        setPreview(url)
+        setFilePreview(url)
         return () => URL.revokeObjectURL(url)
     }, [value])
 
+    const preview = filePreview ?? initialPreviewUrl ?? null
+
     const handleFile = useCallback(
         (file: File | null) => {
             if (file && !file.type.startsWith("image/")) return
@@ -110,7 +114,7 @@ export function ImageInputField({
                         alt="Preview"
                         className="max-h-30 max-w-full rounded-md object-contain"
                     />
-                    {!disabled && (
+                    {!disabled && filePreview && (
                         <button
                             type="button"
                             onClick={handleClear}
diff --git a/apps/dashboard/shared/components/import-data-button.tsx b/apps/dashboard/shared/components/import-data-button.tsx
index 6a3e81b..0db4222 100644
--- a/apps/dashboard/shared/components/import-data-button.tsx
+++ b/apps/dashboard/shared/components/import-data-button.tsx
@@ -2,38 +2,100 @@
 
 import React, { useRef, useState } from "react"
 import { Button } from "@/shared/components/ui/button"
-import { Upload, Loader2 } from "lucide-react"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/shared/components/ui/dialog"
+import { Download, FileSpreadsheet, Loader2, UploadCloud } from "lucide-react"
 import { toast } from "sonner"
+import { ImportResultsDialog } from "@/shared/components/import-results-dialog"
+import type { ImportDataResponse } from "@garage/api"
 
 type ImportDataButtonProps = {
-    onImport: (file: File) => Promise<{ message?: string }>
+    onImport: (file: File) => Promise<ImportDataResponse>
     onSuccess?: () => void
     accept?: string
     label?: string
+    entityLabel?: string
+    onDownloadSample?: () => Promise<Blob>
+    sampleFileName?: string
+    notes?: React.ReactNode[]
 }
 
+const DEFAULT_NOTES: React.ReactNode[] = [
+    "Download the sample file and use it as a template — keep the column headers exactly as provided.",
+    "Supported file formats: .xlsx, .xls and .csv.",
+    "Fields marked as required in the sample must not be empty.",
+    "Existing records will not be overwritten. Each row is imported as a new record.",
+    "After uploading, you'll see a results summary with any rows that failed and why.",
+]
+
 export function ImportDataButton({
     onImport,
     onSuccess,
     accept = ".xlsx,.xls,.csv",
     label = "Import",
+    entityLabel,
+    onDownloadSample,
+    sampleFileName,
+    notes,
 }: ImportDataButtonProps) {
     const inputRef = useRef<HTMLInputElement>(null)
-    const [isPending, setIsPending] = useState(false)
+    const [stepsOpen, setStepsOpen] = useState(false)
+    const [isImporting, setIsImporting] = useState(false)
+    const [isDownloadingSample, setIsDownloadingSample] = useState(false)
+    const [result, setResult] = useState<ImportDataResponse["data"] | null>(null)
+    const [resultOpen, setResultOpen] = useState(false)
+
+    const effectiveNotes = notes && notes.length > 0 ? notes : DEFAULT_NOTES
+    const entityForCopy = entityLabel ?? "records"
+
+    const handleDownloadSample = async () => {
+        if (!onDownloadSample) return
+        setIsDownloadingSample(true)
+        try {
+            const blob = await onDownloadSample()
+            const url = URL.createObjectURL(blob)
+            const anchor = document.createElement("a")
+            anchor.href = url
+            anchor.download = `${sampleFileName ?? "import-sample"}.xlsx`
+            document.body.appendChild(anchor)
+            anchor.click()
+            document.body.removeChild(anchor)
+            URL.revokeObjectURL(url)
+            toast.success("Sample downloaded successfully")
+        } catch (err: any) {
+            toast.error(err?.message ?? "Failed to download sample")
+        } finally {
+            setIsDownloadingSample(false)
+        }
+    }
 
     const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
         const file = e.target.files?.[0]
         if (!file) return
 
-        setIsPending(true)
+        setIsImporting(true)
         try {
-            const result = await onImport(file)
-            toast.success(result.message ?? "Data imported successfully")
-            onSuccess?.()
+            const response = await onImport(file)
+            const data = response.data ?? { imported_count: 0, failed_count: 0, failed_rows: [] }
+            setResult(data)
+            setStepsOpen(false)
+            setResultOpen(true)
+
+            if (data.failed_count === 0) {
+                onSuccess?.()
+            } else if (data.imported_count > 0) {
+                onSuccess?.()
+            }
         } catch (err: any) {
             toast.error(err?.message ?? "Failed to import data")
         } finally {
-            setIsPending(false)
+            setIsImporting(false)
             if (inputRef.current) inputRef.current.value = ""
         }
     }
@@ -50,12 +112,96 @@ export function ImportDataButton({
             <Button
                 size="sm"
                 variant="outline"
-                disabled={isPending}
-                onClick={() => inputRef.current?.click()}
+                onClick={() => setStepsOpen(true)}
             >
-                {isPending ? <Loader2 className="animate-spin" /> : <Upload />}
+                <Download />
                 {label}
             </Button>
+
+            <Dialog
+                open={stepsOpen}
+                onOpenChange={(open) => {
+                    if (isImporting) return
+                    setStepsOpen(open)
+                }}
+            >
+                <DialogContent className="sm:max-w-lg">
+                    <DialogHeader>
+                        <DialogTitle>Import {entityForCopy.toLowerCase()}</DialogTitle>
+                        <DialogDescription>
+                            Follow these steps to import {entityForCopy.toLowerCase()} from a spreadsheet.
+                        </DialogDescription>
+                    </DialogHeader>
+
+                    {onDownloadSample && (
+                        <div className="flex items-start gap-3 rounded-md border bg-muted/30 p-3">
+                            <FileSpreadsheet className="mt-0.5 size-5 shrink-0 text-muted-foreground" />
+                            <div className="flex-1">
+                                <p className="text-sm font-medium">Step 1 — Download the sample file</p>
+                                <p className="text-xs text-muted-foreground">
+                                    Use it as a template so columns are recognized correctly.
+                                </p>
+                            </div>
+                            <Button
+                                size="sm"
+                                variant="outline"
+                                disabled={isDownloadingSample}
+                                onClick={handleDownloadSample}
+                            >
+                                {isDownloadingSample ? (
+                                    <Loader2 className="animate-spin" />
+                                ) : (
+                                    <Download />
+                                )}
+                                Sample
+                            </Button>
+                        </div>
+                    )}
+
+                    <div>
+                        <p className="mb-2 text-sm font-medium">
+                            {onDownloadSample ? "Step 2 — Notes before you upload" : "Notes before you upload"}
+                        </p>
+                        <ul className="list-disc space-y-1 pl-5 text-sm text-muted-foreground">
+                            {effectiveNotes.map((note, idx) => (
+                                <li key={idx}>{note}</li>
+                            ))}
+                        </ul>
+                    </div>
+
+                    <DialogFooter>
+                        <Button
+                            variant="outline"
+                            onClick={() => setStepsOpen(false)}
+                            disabled={isImporting}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            disabled={isImporting}
+                            onClick={() => inputRef.current?.click()}
+                        >
+                            {isImporting ? (
+                                <Loader2 className="animate-spin" />
+                            ) : (
+                                <UploadCloud />
+                            )}
+                            {isImporting ? "Uploading..." : "Choose file & upload"}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            {result && (
+                <ImportResultsDialog
+                    open={resultOpen}
+                    onOpenChange={setResultOpen}
+                    importedCount={result.imported_count}
+                    failedCount={result.failed_count}
+                    failedRows={result.failed_rows}
+                    entityLabel={entityLabel}
+                />
+            )}
         </>
     )
 }
diff --git a/apps/dashboard/shared/components/import-results-dialog.tsx b/apps/dashboard/shared/components/import-results-dialog.tsx
new file mode 100644
index 0000000..bf57bdb
--- /dev/null
+++ b/apps/dashboard/shared/components/import-results-dialog.tsx
@@ -0,0 +1,138 @@
+"use client"
+
+import * as React from "react"
+import { CheckCircle2, XCircle } from "lucide-react"
+import type { ImportFailureRow } from "@garage/api"
+
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/shared/components/ui/dialog"
+import { Button } from "@/shared/components/ui/button"
+import { ScrollArea } from "@/shared/components/ui/scroll-area"
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/shared/components/ui/table"
+
+export type { ImportFailureRow }
+
+export type ImportResultsDialogProps = {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    importedCount: number
+    failedCount: number
+    failedRows: ImportFailureRow[]
+    entityLabel?: string
+}
+
+function formatValue(value: unknown): string {
+    if (value === null || value === undefined || value === "") return "—"
+    if (typeof value === "string") return value
+    if (typeof value === "number" || typeof value === "boolean") return String(value)
+    try {
+        return JSON.stringify(value)
+    } catch {
+        return String(value)
+    }
+}
+
+export function ImportResultsDialog({
+    open,
+    onOpenChange,
+    importedCount,
+    failedCount,
+    failedRows,
+    entityLabel = "Records",
+}: ImportResultsDialogProps) {
+    const hasFailures = failedCount > 0
+    const flatFailures = failedRows.flatMap((r) =>
+        r.errors.map((e) => ({ row: r.row, ...e })),
+    )
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="w-[min(96vw,64rem)] sm:max-w-4xl">
+                <DialogHeader>
+                    <DialogTitle>Import results</DialogTitle>
+                    <DialogDescription>
+                        {hasFailures
+                            ? "Some rows could not be imported. Fix the issues below and re-upload only the failing rows."
+                            : `All ${entityLabel.toLowerCase()} imported successfully.`}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="flex gap-3">
+                    <div className="flex items-center gap-2 rounded-md border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-800">
+                        <CheckCircle2 className="size-4" />
+                        <span>
+                            <strong>{importedCount}</strong> imported
+                        </span>
+                    </div>
+                    {hasFailures && (
+                        <div className="flex items-center gap-2 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800">
+                            <XCircle className="size-4" />
+                            <span>
+                                <strong>{failedCount}</strong> failed
+                            </span>
+                        </div>
+                    )}
+                </div>
+
+                {hasFailures && (
+                    <ScrollArea className="max-h-96 rounded-md border">
+                        <Table className="table-fixed w-full">
+                            <TableHeader>
+                                <TableRow>
+                                    <TableHead className="w-16">Row</TableHead>
+                                    <TableHead className="w-40">Field</TableHead>
+                                    <TableHead className="w-56">Value</TableHead>
+                                    <TableHead>Reason</TableHead>
+                                </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                                {flatFailures.map((f, idx) => (
+                                    <TableRow key={`${f.row}-${f.field}-${idx}`}>
+                                        <TableCell className="font-mono text-xs">{f.row}</TableCell>
+                                        <TableCell className="font-medium">{f.label}</TableCell>
+                                        <TableCell className="text-muted-foreground break-all whitespace-pre-wrap">
+                                            {formatValue(f.value)}
+                                        </TableCell>
+                                        <TableCell className="break-words">
+                                            <div>{f.message}</div>
+                                            {f.valid_examples && f.valid_examples.length > 0 && (
+                                                <details className="mt-1 text-xs text-muted-foreground">
+                                                    <summary className="cursor-pointer">
+                                                        Try one of: {f.valid_examples.slice(0, 3).join(", ")}
+                                                        {f.valid_examples.length > 3 ? "…" : ""}
+                                                    </summary>
+                                                    <div className="mt-1">
+                                                        {f.valid_examples.join(", ")}
+                                                    </div>
+                                                </details>
+                                            )}
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
+                    </ScrollArea>
+                )}
+
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => onOpenChange(false)}>
+                        Close
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}
diff --git a/apps/dashboard/shared/components/money.tsx b/apps/dashboard/shared/components/money.tsx
new file mode 100644
index 0000000..5294eca
--- /dev/null
+++ b/apps/dashboard/shared/components/money.tsx
@@ -0,0 +1,48 @@
+import { AedSymbol } from "./aed-symbol"
+import { cn } from "@/shared/lib/utils"
+
+type MoneyProps = {
+    value?: number | string | null
+    /** Prepended before the symbol (e.g. "–" or "+"). */
+    prefix?: string
+    /** Hide the AED symbol — useful when the column header already conveys currency. */
+    hideSymbol?: boolean
+    /** Locale override for number grouping. */
+    locale?: string
+    /** Minimum/maximum fraction digits. Defaults to 2. */
+    fractionDigits?: number
+    /** Fallback rendered when value is null/undefined/NaN. */
+    fallback?: string
+    className?: string
+}
+
+function formatAmount(value: number | string | null | undefined, locale: string | undefined, digits: number): string | null {
+    if (value == null || value === "") return null
+    const num = typeof value === "string" ? Number(value) : value
+    if (Number.isNaN(num)) return null
+    return new Intl.NumberFormat(locale, {
+        minimumFractionDigits: digits,
+        maximumFractionDigits: digits,
+    }).format(num)
+}
+
+export function Money({
+    value,
+    prefix,
+    hideSymbol = false,
+    locale,
+    fractionDigits = 2,
+    fallback = "—",
+    className,
+}: MoneyProps) {
+    const formatted = formatAmount(value, locale, fractionDigits)
+    if (formatted == null) return <span className={className}>{fallback}</span>
+
+    return (
+        <span className={cn("inline-flex items-center gap-[0.2em] whitespace-nowrap", className)}>
+            {prefix ? <span>{prefix}</span> : null}
+            {!hideSymbol ? <AedSymbol /> : null}
+            <span>{formatted}</span>
+        </span>
+    )
+}
diff --git a/apps/dashboard/shared/components/prompt-dialog.tsx b/apps/dashboard/shared/components/prompt-dialog.tsx
new file mode 100644
index 0000000..b9e7b05
--- /dev/null
+++ b/apps/dashboard/shared/components/prompt-dialog.tsx
@@ -0,0 +1,121 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { create } from "zustand"
+
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/shared/components/ui/dialog"
+import { Button } from "@/shared/components/ui/button"
+import { Input } from "@/shared/components/ui/input"
+import { Label } from "@/shared/components/ui/label"
+
+// ── Types ──
+
+export type PromptOptions = {
+    title?: string
+    description?: string
+    label?: string
+    placeholder?: string
+    defaultValue?: string
+    confirmLabel?: string
+    cancelLabel?: string
+    required?: boolean
+}
+
+type PromptStore = {
+    open: boolean
+    options: PromptOptions
+    resolve: ((value: string | null) => void) | null
+    _show: (options: PromptOptions) => Promise<string | null>
+    _close: (value: string | null) => void
+}
+
+// ── Store ──
+
+const usePromptStore = create<PromptStore>((set, get) => ({
+    open: false,
+    options: {},
+    resolve: null,
+    _show: (options) =>
+        new Promise<string | null>((resolve) => {
+            set({ open: true, options, resolve })
+        }),
+    _close: (value) => {
+        const { resolve } = get()
+        resolve?.(value)
+        set({ open: false, resolve: null })
+    },
+}))
+
+// ── Imperative API ──
+
+export function prompt(options: PromptOptions = {}): Promise<string | null> {
+    return usePromptStore.getState()._show(options)
+}
+
+// ── Dialog component (mount once in root layout) ──
+
+export function PromptDialog() {
+    const { open, options, _close } = usePromptStore()
+    const [value, setValue] = useState("")
+
+    // Reset value whenever the dialog opens
+    useEffect(() => {
+        if (open) setValue(options.defaultValue ?? "")
+    }, [open, options.defaultValue])
+
+    const submit = () => {
+        if (options.required !== false && value.trim() === "") return
+        _close(value.trim())
+    }
+
+    return (
+        <Dialog
+            open={open}
+            onOpenChange={(v) => {
+                if (!v) _close(null)
+            }}
+        >
+            <DialogContent className="sm:max-w-md">
+                <DialogHeader>
+                    <DialogTitle>{options.title ?? "Enter a value"}</DialogTitle>
+                    {options.description && (
+                        <DialogDescription>{options.description}</DialogDescription>
+                    )}
+                </DialogHeader>
+
+                <div className="grid gap-2">
+                    {options.label && <Label htmlFor="prompt-input">{options.label}</Label>}
+                    <Input
+                        id="prompt-input"
+                        autoFocus
+                        value={value}
+                        placeholder={options.placeholder}
+                        onChange={(e) => setValue(e.target.value)}
+                        onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                                e.preventDefault()
+                                submit()
+                            }
+                        }}
+                    />
+                </div>
+
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => _close(null)}>
+                        {options.cancelLabel ?? "Cancel"}
+                    </Button>
+                    <Button onClick={submit} disabled={options.required !== false && value.trim() === ""}>
+                        {options.confirmLabel ?? "OK"}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}
diff --git a/apps/dashboard/shared/components/relation-link.tsx b/apps/dashboard/shared/components/relation-link.tsx
new file mode 100644
index 0000000..1e8c65d
--- /dev/null
+++ b/apps/dashboard/shared/components/relation-link.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import Link from "next/link"
+import type { ComponentType, MouseEvent, ReactNode } from "react"
+import { Button, buttonVariants } from "@/shared/components/ui/button"
+import { cn } from "@/shared/lib/utils"
+
+type IconComponent = ComponentType<{ className?: string }>
+
+export type RelationLinkProps = {
+    /** Destination href. When falsy the chip renders as a non-interactive button-styled span. */
+    href?: string | null
+    /** Primary label rendered inside the button. */
+    label?: ReactNode
+    /** Optional icon shown before the label. */
+    icon?: IconComponent
+    /** Rendered when label is empty (with or without href). Defaults to "—". */
+    fallback?: ReactNode
+    /** Optional secondary text rendered after the label (e.g. phone, plate). */
+    meta?: ReactNode
+    className?: string
+}
+
+/**
+ * Unified cell for related-data columns across every CRUD table.
+ * Renders an outlined button-style chip either way:
+ *   - With href: clickable next/link wrapped by a Button (asChild).
+ *   - Without href: same outline styling on a plain span so visual columns
+ *     stay consistent across resources that don't have detail routes.
+ */
+export function RelationLink({
+    href,
+    label,
+    icon: Icon,
+    fallback = "—",
+    meta,
+    className,
+}: RelationLinkProps) {
+    const hasLabel = label != null && label !== ""
+
+    if (!hasLabel && !href) {
+        return <span className="text-muted-foreground">{fallback}</span>
+    }
+
+    const body = (
+        <>
+            {Icon ? <Icon /> : null}
+            <span>{hasLabel ? label : fallback}</span>
+            {meta ? <span className="ms-1 text-muted-foreground">· {meta}</span> : null}
+        </>
+    )
+
+    if (!href) {
+        return (
+            <span
+                className={cn(
+                    buttonVariants({ variant: "outline", size: "sm" }),
+                    "cursor-default pointer-events-none",
+                    className,
+                )}
+            >
+                {body}
+            </span>
+        )
+    }
+
+    return (
+        <Button
+            variant="outline"
+            size="sm"
+            asChild
+            className={className}
+            onClick={(event: MouseEvent<HTMLButtonElement>) => event.stopPropagation()}
+        >
+            <Link href={href}>{body}</Link>
+        </Button>
+    )
+}
diff --git a/apps/dashboard/shared/components/resource-selector/resource-selector-dialog.tsx b/apps/dashboard/shared/components/resource-selector/resource-selector-dialog.tsx
index 6946f60..1f031d7 100644
--- a/apps/dashboard/shared/components/resource-selector/resource-selector-dialog.tsx
+++ b/apps/dashboard/shared/components/resource-selector/resource-selector-dialog.tsx
@@ -11,7 +11,6 @@ import {
 } from "@/shared/components/ui/dialog"
 import { CrudResource, type CrudResourceProps } from "@/shared/data-view/resource-page"
 import type { ResourcePageClient, ResourceItem } from "@/shared/data-view/resource-page"
-import { Card, CardContent } from "@/shared/components/ui/card"
 
 export type ResourceSelectorDialogProps<TClient extends ResourcePageClient> = {
     /** Dialog title shown in the header */
@@ -31,6 +30,10 @@ export type ResourceSelectorDialogProps<TClient extends ResourcePageClient> = {
      * - "single": row click immediately fires onConfirm with the clicked row
      */
     selectionMode?: "single" | "multi"
+    /** Show a search input above the table. Defaults to true. */
+    searchable?: boolean
+    /** Placeholder for the search input. */
+    searchPlaceholder?: string
 }
 
 export function ResourceSelectorDialog<TClient extends ResourcePageClient>({
@@ -41,6 +44,8 @@ export function ResourceSelectorDialog<TClient extends ResourcePageClient>({
     crudProps,
     rowKey,
     selectionMode = "multi",
+    searchable = true,
+    searchPlaceholder = "Search...",
 }: ResourceSelectorDialogProps<TClient>) {
     type TItem = ResourceItem<TClient>
 
@@ -70,33 +75,36 @@ export function ResourceSelectorDialog<TClient extends ResourcePageClient>({
         onOpenChange(false)
     }
 
+    const sharedCrudProps = {
+        ...crudProps,
+        localState: crudProps.localState ?? true,
+        searchable: crudProps.searchable ?? searchable,
+        searchPlaceholder: crudProps.searchPlaceholder ?? searchPlaceholder,
+    }
+
     return (
         <Dialog open={open} onOpenChange={(v) => { if (!v) handleCancel() }}>
-            <DialogContent className="min-w-4xl max-h-[90vh] flex flex-col">
+            <DialogContent className="min-w-4xl max-h-[90vh] flex flex-col gap-3 p-4">
                 <DialogHeader>
-                    <DialogTitle className="text-2xl font-bold">{title}</DialogTitle>
+                    <DialogTitle className="text-xl font-semibold">{title}</DialogTitle>
                 </DialogHeader>
-                <div className="flex-1 overflow-auto">
-                    <Card className="rounded-none border-0 shadow-none">
-                        <CardContent className="p-0">
-                            {selectionMode === "single" ? (
-                                <CrudResource<TClient>
-                                    {...crudProps}
-                                    onRowClick={handleRowClick}
-                                />
-                            ) : (
-                                <CrudResource<TClient>
-                                    {...crudProps}
-                                    tableProps={{
-                                        selection: {
-                                            onSelectionChange: handleSelectionChange,
-                                            ...(rowKey ? { rowKey } : {}),
-                                        },
-                                    }}
-                                />
-                            )}
-                        </CardContent>
-                    </Card>
+                <div className="flex-1 overflow-auto min-h-0">
+                    {selectionMode === "single" ? (
+                        <CrudResource<TClient>
+                            {...sharedCrudProps}
+                            onRowClick={handleRowClick}
+                        />
+                    ) : (
+                        <CrudResource<TClient>
+                            {...sharedCrudProps}
+                            tableProps={{
+                                selection: {
+                                    onSelectionChange: handleSelectionChange,
+                                    ...(rowKey ? { rowKey } : {}),
+                                },
+                            }}
+                        />
+                    )}
                 </div>
                 {selectionMode === "multi" && (
                     <DialogFooter>
diff --git a/apps/dashboard/shared/components/share-document-button.tsx b/apps/dashboard/shared/components/share-document-button.tsx
new file mode 100644
index 0000000..78ac222
--- /dev/null
+++ b/apps/dashboard/shared/components/share-document-button.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import { useState } from "react"
+import { Share2 } from "lucide-react"
+import type { DocumentShareType } from "@garage/api"
+import { Button } from "@/shared/components/ui/button"
+import { ShareDocumentDialog } from "@/shared/components/share-document-dialog"
+
+interface ShareDocumentButtonProps {
+    type: DocumentShareType
+    id: string | number
+    label?: string
+    variant?: "default" | "outline" | "ghost" | "secondary"
+}
+
+export function ShareDocumentButton({ type, id, label = "Share", variant = "outline" }: ShareDocumentButtonProps) {
+    const [open, setOpen] = useState(false)
+
+    return (
+        <>
+            <Button variant={variant} onClick={() => setOpen(true)}>
+                <Share2 className="size-4" />
+                {label}
+            </Button>
+            <ShareDocumentDialog type={type} id={id} open={open} onOpenChange={setOpen} />
+        </>
+    )
+}
diff --git a/apps/dashboard/shared/components/share-document-dialog.tsx b/apps/dashboard/shared/components/share-document-dialog.tsx
new file mode 100644
index 0000000..cd091d6
--- /dev/null
+++ b/apps/dashboard/shared/components/share-document-dialog.tsx
@@ -0,0 +1,181 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import type { DocumentShareType } from "@garage/api"
+import { Button } from "@/shared/components/ui/button"
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/shared/components/ui/dialog"
+import { Input } from "@/shared/components/ui/input"
+import { Label } from "@/shared/components/ui/label"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shared/components/ui/tabs"
+import { Textarea } from "@/shared/components/ui/textarea"
+import { useDocumentShare } from "@/shared/hooks/use-document-share"
+
+interface ShareDocumentDialogProps {
+    type: DocumentShareType
+    id: string | number
+    open: boolean
+    onOpenChange: (open: boolean) => void
+}
+
+const DEFAULT_MESSAGES: Record<string, { email: string; whatsapp: string }> = {
+    estimate: {
+        email: "Hello, please find your estimate at the link below. Kindly review the details and let us know if you'd like to proceed.",
+        whatsapp: "Hello, here is your estimate. Please review and let us know if you'd like to proceed.",
+    },
+    invoice: {
+        email: "Hello, please find your invoice at the link below. Let us know once payment has been arranged.",
+        whatsapp: "Hello, here is your invoice. Let us know once payment is arranged.",
+    },
+    job_card: {
+        email: "Hello, please find the job card for your vehicle at the link below.",
+        whatsapp: "Hello, here is the job card for your vehicle.",
+    },
+    inspection: {
+        email: "Hello, please find your vehicle inspection report at the link below.",
+        whatsapp: "Hello, here is your vehicle inspection report.",
+    },
+    payment_received: {
+        email: "Hello, please find your payment receipt at the link below. Thank you.",
+        whatsapp: "Hello, here is your payment receipt. Thank you.",
+    },
+    purchase_order: {
+        email: "Hello, please find our purchase order at the link below. Kindly confirm receipt.",
+        whatsapp: "Hello, here is our purchase order. Kindly confirm receipt.",
+    },
+    bill: {
+        email: "Hello, please find the bill at the link below for your reference.",
+        whatsapp: "Hello, here is the bill for your reference.",
+    },
+    expense: {
+        email: "Hello, please find the expense document at the link below.",
+        whatsapp: "Hello, here is the expense document.",
+    },
+    payment_made: {
+        email: "Hello, please find the payment confirmation at the link below.",
+        whatsapp: "Hello, here is the payment confirmation.",
+    },
+}
+
+function getDefaultMessage(type: DocumentShareType, channel: "email" | "whatsapp"): string {
+    return DEFAULT_MESSAGES[type as string]?.[channel] ?? ""
+}
+
+export function ShareDocumentDialog({ type, id, open, onOpenChange }: ShareDocumentDialogProps) {
+    const { shareEmail, shareWhatsapp, isSharing } = useDocumentShare(type, id)
+    const [email, setEmail] = useState("")
+    const [phone, setPhone] = useState("")
+    const [emailMessage, setEmailMessage] = useState("")
+    const [whatsappMessage, setWhatsappMessage] = useState("")
+
+    useEffect(() => {
+        if (open) {
+            setEmailMessage(getDefaultMessage(type, "email"))
+            setWhatsappMessage(getDefaultMessage(type, "whatsapp"))
+        }
+    }, [open, type])
+
+    const close = () => {
+        onOpenChange(false)
+        setEmail("")
+        setPhone("")
+        setEmailMessage("")
+        setWhatsappMessage("")
+    }
+
+    const handleEmail = async () => {
+        if (!email) return
+        await shareEmail({ email, message: emailMessage || undefined })
+        close()
+    }
+
+    const handleWhatsapp = async () => {
+        await shareWhatsapp({ phone: phone || undefined, message: whatsappMessage || undefined })
+        close()
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-md">
+                <DialogHeader>
+                    <DialogTitle>Share document</DialogTitle>
+                </DialogHeader>
+                <Tabs defaultValue="email" className="w-full">
+                    <TabsList className="grid w-full grid-cols-2">
+                        <TabsTrigger value="email">Email</TabsTrigger>
+                        <TabsTrigger value="whatsapp">WhatsApp</TabsTrigger>
+                    </TabsList>
+                    <TabsContent value="email" className="space-y-3 py-2">
+                        <div className="space-y-1.5">
+                            <Label htmlFor="share-email">Recipient email</Label>
+                            <Input
+                                id="share-email"
+                                type="email"
+                                value={email}
+                                onChange={(e) => setEmail(e.target.value)}
+                                placeholder="customer@example.com"
+                            />
+                        </div>
+                        <div className="space-y-1.5">
+                            <Label htmlFor="share-email-message">Message</Label>
+                            <Textarea
+                                id="share-email-message"
+                                value={emailMessage}
+                                onChange={(e) => setEmailMessage(e.target.value)}
+                                rows={4}
+                            />
+                        </div>
+                        <DialogFooter className="pt-2">
+                            <Button variant="outline" type="button" onClick={close}>
+                                Cancel
+                            </Button>
+                            <Button type="button" onClick={handleEmail} disabled={!email || isSharing}>
+                                {isSharing ? "Sending..." : "Send email"}
+                            </Button>
+                        </DialogFooter>
+                    </TabsContent>
+                    <TabsContent value="whatsapp" className="space-y-3 py-2">
+                        <div className="space-y-1.5">
+                            <Label htmlFor="share-phone">Phone with country code (optional)</Label>
+                            <Input
+                                id="share-phone"
+                                type="tel"
+                                value={phone}
+                                onChange={(e) => setPhone(e.target.value)}
+                                placeholder="+971501234567"
+                            />
+                            <p className="text-xs text-muted-foreground">
+                                Leave empty to pick recipient inside WhatsApp.
+                            </p>
+                        </div>
+                        <div className="space-y-1.5">
+                            <Label htmlFor="share-wa-message">Message</Label>
+                            <Textarea
+                                id="share-wa-message"
+                                value={whatsappMessage}
+                                onChange={(e) => setWhatsappMessage(e.target.value)}
+                                rows={4}
+                            />
+                        </div>
+                        <DialogFooter className="pt-2">
+                            <Button variant="outline" type="button" onClick={close}>
+                                Cancel
+                            </Button>
+                            <Button type="button" onClick={handleWhatsapp} disabled={isSharing}>
+                                {isSharing ? "Opening..." : "Open WhatsApp"}
+                            </Button>
+                        </DialogFooter>
+                    </TabsContent>
+                </Tabs>
+                <p className="text-xs text-muted-foreground text-center">
+                    Share link expires 24 hours after creation.
+                </p>
+            </DialogContent>
+        </Dialog>
+    )
+}
diff --git a/apps/dashboard/shared/data-view/resource-page/crud-resource.tsx b/apps/dashboard/shared/data-view/resource-page/crud-resource.tsx
index 2275a3d..cf9ce8a 100644
--- a/apps/dashboard/shared/data-view/resource-page/crud-resource.tsx
+++ b/apps/dashboard/shared/data-view/resource-page/crud-resource.tsx
@@ -1,10 +1,27 @@
 "use client"
 
-import React from "react"
+import React, { useEffect, useMemo, useRef, useState } from "react"
+import { SearchIcon } from "lucide-react"
+import { Input } from "@/shared/components/ui/input"
+import { Tabs, TabsList, TabsTrigger } from "@/shared/components/ui/tabs"
+import { formatEnum } from "@/shared/utils/formatters"
 import { DataTable, type ActionsColumnOptions, type DataViewProps } from "@/shared/data-view/table-view"
 import { useResourcePage, type UseResourcePageOptions, type ResourceItem, type ResourcePageClient } from "./use-resource-page"
 import type { ColumnDef } from "@tanstack/react-table"
 
+export type StatusFilterConfig = {
+    /** Allowed status values (typically the matching `<Resource>Status` enum). */
+    statuses: readonly string[]
+    /** Query-param key forwarded to the API. Defaults to "status". */
+    paramKey?: string
+    /** Initial selected tab. Defaults to "all". */
+    defaultValue?: string
+    /** Label for the catch-all tab. Defaults to "All". */
+    allLabel?: string
+    /** Per-status label transform. Defaults to formatEnum (snake_case → Title Case). */
+    formatLabel?: (status: string) => string
+}
+
 type LooseColumnDef<TData> = ColumnDef<TData, unknown> | (Omit<ColumnDef<TData, unknown>, "accessorKey"> & { accessorKey: string })
 
 export type CrudResourceColumnHelpers<TClient extends ResourcePageClient> = {
@@ -38,6 +55,12 @@ export type CrudResourceProps<TClient extends ResourcePageClient> = UseResourceP
     tableHeader?: ReactNodeOrRender<TClient>
     tableProps?: Omit<Partial<DataViewProps<ResourceItem<TClient>>>, ManagedTableProps>
     render?: (table: React.ReactElement, context: CrudResourceContext<TClient>) => React.ReactElement
+    /** Render a built-in search input above the table and forward `search` to the API. */
+    searchable?: boolean
+    /** Placeholder for the built-in search input. */
+    searchPlaceholder?: string
+    /** Render a built-in status tab strip above the table and forward the selected status to the API. */
+    statusFilter?: StatusFilterConfig
 }
 
 export function CrudResource<TClient extends ResourcePageClient>({
@@ -47,14 +70,62 @@ export function CrudResource<TClient extends ResourcePageClient>({
     queryOptions,
     paramKey,
     extraParams,
+    localState,
     onRowClick,
     tableHeader,
     tableProps,
     render,
+    searchable = false,
+    searchPlaceholder = "Search...",
+    statusFilter,
 }: CrudResourceProps<TClient>) {
     type TItem = ResourceItem<TClient>
 
-    const page = useResourcePage<TClient>({ routeKey, getClient, queryOptions, paramKey, extraParams })
+    const [searchInput, setSearchInput] = useState("")
+    const [search, setSearch] = useState("")
+    const statusParamKey = statusFilter?.paramKey ?? "status"
+    const statusAllValue = statusFilter?.defaultValue ?? "all"
+    const [statusValue, setStatusValue] = useState<string>(statusAllValue)
+
+    useEffect(() => {
+        const timer = setTimeout(() => setSearch(searchInput.trim()), 300)
+        return () => clearTimeout(timer)
+    }, [searchInput])
+
+    const mergedExtraParams = useMemo(() => {
+        const base = { ...(extraParams ?? {}) } as Record<string, unknown>
+        if (searchable && search) base.search = search
+        if (statusFilter && statusValue !== statusAllValue) {
+            base[statusParamKey] = statusValue
+        }
+        return base
+    }, [extraParams, search, searchable, statusFilter, statusValue, statusAllValue, statusParamKey])
+
+    const page = useResourcePage<TClient>({
+        routeKey,
+        getClient,
+        queryOptions,
+        paramKey,
+        extraParams: mergedExtraParams,
+        localState,
+    })
+
+    const prevSearchRef = useRef(search)
+    const prevStatusRef = useRef(statusValue)
+    const setParamsRef = useRef(page.setParams)
+    setParamsRef.current = page.setParams
+    useEffect(() => {
+        if (prevSearchRef.current !== search) {
+            prevSearchRef.current = search
+            setParamsRef.current({ page: 1 })
+        }
+    }, [search])
+    useEffect(() => {
+        if (prevStatusRef.current !== statusValue) {
+            prevStatusRef.current = statusValue
+            setParamsRef.current({ page: 1 })
+        }
+    }, [statusValue])
 
     const columns = typeof columnsProp === "function"
         ? columnsProp({
@@ -81,9 +152,49 @@ export function CrudResource<TClient extends ResourcePageClient>({
         invalidateQuery: () => page.invalidateQuery(),
     }
 
+    const searchInputEl = searchable ? (
+        <div className="relative w-64">
+            <SearchIcon className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+                placeholder={searchPlaceholder}
+                value={searchInput}
+                onChange={(e) => setSearchInput(e.target.value)}
+                className="pl-8"
+            />
+        </div>
+    ) : null
+
+    const statusTabsEl = statusFilter ? (
+        <Tabs value={statusValue} onValueChange={setStatusValue}>
+            <TabsList variant="line">
+                <TabsTrigger value={statusAllValue}>{statusFilter.allLabel ?? "All"}</TabsTrigger>
+                {statusFilter.statuses.map((status) => (
+                    <TabsTrigger key={status} value={status}>
+                        {(statusFilter.formatLabel ?? formatEnum)(status)}
+                    </TabsTrigger>
+                ))}
+            </TabsList>
+        </Tabs>
+    ) : null
+
+    const resolvedTableHeader = tableHeader
+        ? (typeof tableHeader === "function" ? tableHeader(context) : tableHeader)
+        : null
+
+    const leftHeader = statusTabsEl ?? resolvedTableHeader
+    const extraHeaderAbove = statusTabsEl && resolvedTableHeader ? resolvedTableHeader : null
+
+    const headerRow = (searchInputEl || leftHeader) ? (
+        <div className="flex flex-wrap items-center justify-between gap-2">
+            <div className="flex-1 min-w-0">{leftHeader}</div>
+            {searchInputEl}
+        </div>
+    ) : null
+
     const table = (
         <>
-            {tableHeader && (typeof tableHeader === "function" ? tableHeader(context) : tableHeader)}
+            {extraHeaderAbove}
+            {headerRow}
             <DataTable
                 {...tableProps}
                 columns={columns as ColumnDef<TItem, any>[]}
diff --git a/apps/dashboard/shared/data-view/resource-page/index.ts b/apps/dashboard/shared/data-view/resource-page/index.ts
index 75defa0..b3930ee 100644
--- a/apps/dashboard/shared/data-view/resource-page/index.ts
+++ b/apps/dashboard/shared/data-view/resource-page/index.ts
@@ -20,4 +20,5 @@ export type {
     CrudResourceColumnHelpers,
     CrudResourceContext,
     CrudResourceProps,
+    StatusFilterConfig,
 } from "./crud-resource"
diff --git a/apps/dashboard/shared/data-view/resource-page/use-resource-page.ts b/apps/dashboard/shared/data-view/resource-page/use-resource-page.ts
index 34e4a2e..6f2572e 100644
--- a/apps/dashboard/shared/data-view/resource-page/use-resource-page.ts
+++ b/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"
@@ -26,6 +26,8 @@ export type UseResourcePageOptions<TClient extends ResourcePageClient> = {
     queryOptions?: Omit<UseQueryOptions<CrudListResponse<TClient>>, "queryKey" | "queryFn">
     paramKey?: string
     extraParams?: Record<string, unknown>
+    /** When true, pagination/sorting state is local instead of URL-synced. Useful for tables inside dialogs. */
+    localState?: boolean
 }
 
 export function useResourcePage<TClient extends ResourcePageClient>({
@@ -34,6 +36,7 @@ export function useResourcePage<TClient extends ResourcePageClient>({
     queryOptions,
     paramKey,
     extraParams,
+    localState,
 }: UseResourcePageOptions<TClient>) {
     type TItem = ResourceItem<TClient>
 
@@ -42,11 +45,16 @@ 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,
         queryOptions,
         extraParams,
+        localState,
     })
 
     const { mutateAsync: deleteItem } = useMutation({
@@ -55,8 +63,11 @@ export function useResourcePage<TClient extends ResourcePageClient>({
             const promise = client.destroy(id)
             toast.promise(promise, {
                 loading: "Deleting...",
-                success: "Deleted successfully",
-                error: "Failed to delete",
+                success: (data: any) => data?.message ?? "Deleted successfully",
+                // Surface the backend's actual error (validation/constraint message)
+                // so a failed delete doesn't appear silent to the user.
+                error: (err: any) =>
+                    err?.payload?.message ?? err?.message ?? "Failed to delete",
             })
             return promise
         },
@@ -83,7 +94,13 @@ export function useResourcePage<TClient extends ResourcePageClient>({
                     confirmLabel: "Delete",
                     variant: "destructive",
                 })
-                if (confirmed) await deleteItem(String(row.id))
+                if (!confirmed) return
+                try {
+                    await deleteItem(String(row.id))
+                } catch {
+                    // toast.promise already surfaced the error; swallow to avoid
+                    // an unhandled promise rejection bubbling up from the menu click.
+                }
             },
             ...options,
         })
diff --git a/apps/dashboard/shared/data-view/table-view/actions-column.tsx b/apps/dashboard/shared/data-view/table-view/actions-column.tsx
index 1ae0ada..6320189 100644
--- a/apps/dashboard/shared/data-view/table-view/actions-column.tsx
+++ b/apps/dashboard/shared/data-view/table-view/actions-column.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import type { ColumnDef, Row } from "@tanstack/react-table"
+import type { ComponentType } from "react"
 import { MoreHorizontal, Pencil, Trash2 } from "lucide-react"
 import { Button } from "@/shared/components/ui/button"
 import {
@@ -10,9 +11,20 @@ import {
     DropdownMenuTrigger,
 } from "@/shared/components/ui/dropdown-menu"
 
+export type ActionsColumnExtraItem<TData> = {
+    label: string
+    icon?: ComponentType<{ className?: string }>
+    onClick: (row: TData) => void | Promise<unknown>
+    variant?: "default" | "destructive"
+    /** Hide the item entirely when false. Useful for permission gates. */
+    hidden?: boolean
+}
+
 export type ActionsColumnOptions<TData> = {
     onEdit?: (row: TData) => void
     onDelete?: (row: TData) => Promise<unknown>
+    /** Extra menu items rendered between Edit and Delete. */
+    extraItems?: (row: TData) => ActionsColumnExtraItem<TData>[]
 }
 
 export function createActionsColumn<TData extends { id: string | number }>(
@@ -53,6 +65,24 @@ function ActionsCell<TData extends { id: string | number }>({
                         Edit
                     </DropdownMenuItem>
                 )}
+                {options.extraItems?.(row.original)
+                    .filter((item) => !item.hidden)
+                    .map((item) => {
+                        const Icon = item.icon
+                        return (
+                            <DropdownMenuItem
+                                key={item.label}
+                                variant={item.variant}
+                                onClick={(e) => {
+                                    e.stopPropagation()
+                                    void item.onClick(row.original)
+                                }}
+                            >
+                                {Icon ? <Icon className="size-3.5 text-muted-foreground" /> : null}
+                                {item.label}
+                            </DropdownMenuItem>
+                        )
+                    })}
                 {options.onDelete && (
                     <DropdownMenuItem
                         variant="destructive"
diff --git a/apps/dashboard/shared/data-view/table-view/use-data-table-query.ts b/apps/dashboard/shared/data-view/table-view/use-data-table-query.ts
index dda1ecf..038cc96 100644
--- a/apps/dashboard/shared/data-view/table-view/use-data-table-query.ts
+++ b/apps/dashboard/shared/data-view/table-view/use-data-table-query.ts
@@ -1,20 +1,30 @@
 "use client"
 
+import { useState } from "react"
 import { useQueryStates } from "nuqs"
 import { useQuery, useQueryClient, type UseQueryOptions } from "@tanstack/react-query"
 import type { DataViewChangeEvent, DataViewPaginationState, DataViewSorting } from "./types"
 import { dataTableSearchParams } from "./search-params"
-import { type CrudListResponse } from "@garage/api"
+import { DEFAULT_PER_PAGE, type CrudListResponse } from "@garage/api"
 
 type DataTableClient = {
     list(query?: any): Promise<any>
 }
 
+type DataTableParams = {
+    page: number
+    per_page: number
+    sort_by: string | null
+    sort_order: "asc" | "desc" | null
+}
+
 type UseDataTableQueryOptions<C extends DataTableClient> = {
     queryKey: string[]
     client: C
     queryOptions?: Omit<UseQueryOptions<CrudListResponse<C>>, "queryKey" | "queryFn">
     extraParams?: Record<string, unknown>
+    /** When true, pagination/sorting state lives in component state instead of URL params. Used for tables inside dialogs so they don't share state with the parent page. */
+    localState?: boolean
 }
 
 export function useDataTableQuery<C extends DataTableClient>({
@@ -22,8 +32,25 @@ export function useDataTableQuery<C extends DataTableClient>({
     client,
     queryOptions,
     extraParams,
+    localState = false,
 }: UseDataTableQueryOptions<C>) {
-    const [params, setParams] = useQueryStates(dataTableSearchParams)
+    const [urlParams, setUrlParams] = useQueryStates(dataTableSearchParams)
+    const [localParams, setLocalParams] = useState<DataTableParams>({
+        page: 1,
+        per_page: DEFAULT_PER_PAGE,
+        sort_by: null,
+        sort_order: null,
+    })
+
+    const params: DataTableParams = localState ? localParams : urlParams
+    const setParams = (next: Partial<DataTableParams>) => {
+        if (localState) {
+            setLocalParams((prev) => ({ ...prev, ...next }))
+        } else {
+            setUrlParams(next)
+        }
+    }
+
     const _queryKey = [...queryKey, params, ...(extraParams ? [extraParams] : [])]
     const query = useQuery<CrudListResponse<C>>({
         queryKey: _queryKey,
@@ -74,7 +101,10 @@ export function useDataTableQuery<C extends DataTableClient>({
 
     const queryClient = useQueryClient();
     const invalidateQuery = () => {
-        queryClient.invalidateQueries({ queryKey: _queryKey })
+        // Prefix-match on the base route key so all paginated/sorted variants of
+        // the list refetch — exact-matching the params object is flaky because
+        // nuqs returns a fresh reference per render.
+        queryClient.invalidateQueries({ queryKey, refetchType: "active" })
     }
 
     return {
diff --git a/apps/dashboard/shared/hooks/use-document-share.ts b/apps/dashboard/shared/hooks/use-document-share.ts
new file mode 100644
index 0000000..36483e6
--- /dev/null
+++ b/apps/dashboard/shared/hooks/use-document-share.ts
@@ -0,0 +1,63 @@
+"use client"
+
+import { useState } from "react"
+import { toast } from "sonner"
+import type { DocumentShareResponse, DocumentShareType } from "@garage/api"
+import { useAuthApi } from "../useApi"
+
+interface UseDocumentShareOptions {
+    onSuccess?: (result: DocumentShareResponse) => void
+    onError?: (error: Error) => void
+}
+
+export function useDocumentShare(type: DocumentShareType, id: string | number, options?: UseDocumentShareOptions) {
+    const api = useAuthApi()
+    const [isSharing, setIsSharing] = useState(false)
+
+    const shareEmail = async (input: { email: string; message?: string }) => {
+        setIsSharing(true)
+        try {
+            const result = await api.documentShare.share({
+                document_type: type,
+                document_id: id,
+                channel: "email",
+                email: input.email,
+                message: input.message,
+            })
+            toast.success("Email sent. Link expires in 24 hours.")
+            options?.onSuccess?.(result)
+            return result
+        } catch (error) {
+            toast.error("Failed to send email")
+            options?.onError?.(error as Error)
+            throw error
+        } finally {
+            setIsSharing(false)
+        }
+    }
+
+    const shareWhatsapp = async (input: { phone?: string; message?: string }) => {
+        setIsSharing(true)
+        try {
+            const result = await api.documentShare.share({
+                document_type: type,
+                document_id: id,
+                channel: "link",
+                phone: input.phone,
+                message: input.message,
+            })
+            window.open(result.whatsapp_url, "_blank", "noopener,noreferrer")
+            toast.success("Share link ready. Expires in 24 hours.")
+            options?.onSuccess?.(result)
+            return result
+        } catch (error) {
+            toast.error("Failed to create share link")
+            options?.onError?.(error as Error)
+            throw error
+        } finally {
+            setIsSharing(false)
+        }
+    }
+
+    return { shareEmail, shareWhatsapp, isSharing }
+}
diff --git a/apps/dashboard/shared/hooks/use-resource-form.ts b/apps/dashboard/shared/hooks/use-resource-form.ts
index 2b3a35b..a343a2c 100644
--- a/apps/dashboard/shared/hooks/use-resource-form.ts
+++ b/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> = {
@@ -16,10 +16,12 @@ type UseResourceFormOptions<TFormValues extends FieldValues, TApiData = unknown>
     queryKey?: QueryKey
 }
 
-type UseResourceFormReturn<TFormValues extends FieldValues> = {
+type UseResourceFormReturn<TFormValues extends FieldValues, TApiData = unknown> = {
     form: UseFormReturn<TFormValues>
     isEditing: boolean
     isInitializing: boolean
+    invalidate: () => void
+    data: TApiData | undefined
 }
 
 export function useResourceForm<TFormValues extends FieldValues, TApiData = unknown>({
@@ -30,16 +32,21 @@ export function useResourceForm<TFormValues extends FieldValues, TApiData = unkn
     mapToFormValues,
     initialData,
     queryKey,
-}: UseResourceFormOptions<TFormValues, TApiData>): UseResourceFormReturn<TFormValues> {
+}: UseResourceFormOptions<TFormValues, TApiData>): UseResourceFormReturn<TFormValues, TApiData> {
     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)
+    const resolvedData: TApiData | undefined =
+        queriedData ?? (isEditing ? (initialData ?? undefined) : undefined)
 
     const form = useForm<TFormValues>({
         resolver: zodResolver(schema) as any,
@@ -49,7 +56,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 +68,15 @@ 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,
+        data: resolvedData,
+    }
 }
diff --git a/apps/dashboard/shared/useApi.ts b/apps/dashboard/shared/useApi.ts
index 2bc231c..f5bf3ca 100644
--- a/apps/dashboard/shared/useApi.ts
+++ b/apps/dashboard/shared/useApi.ts
@@ -2,10 +2,21 @@ import { useMemo } from "react";
 import { createApi } from "@garage/api";
 import { useAuthStore } from "./stores/auth-store";
 
+// The dashboard UI is in English. Tell the backend explicitly so error messages
+// don't default to Arabic when no Accept-Language is sent / saved preference
+// matches. The backend `SetApiLocale` middleware honors this header.
+const UI_LANG = "en"
+
 export const useAuthApi = () => {
     const token = useAuthStore(s => s.token)
     return useMemo(
-        () => createApi({ headers: token ? { Authorization: `Bearer ${token}` } : undefined }),
+        () => createApi({
+            headers: {
+                "X-Lang": UI_LANG,
+                "Accept-Language": UI_LANG,
+                ...(token ? { Authorization: `Bearer ${token}` } : {}),
+            },
+        }),
         [token],
     )
 }
\ No newline at end of file
diff --git a/apps/dashboard/shared/utils/formatters.ts b/apps/dashboard/shared/utils/formatters.ts
index fb82a47..0c0198f 100644
--- a/apps/dashboard/shared/utils/formatters.ts
+++ b/apps/dashboard/shared/utils/formatters.ts
@@ -87,17 +87,23 @@ export function formatNumber(value?: number | string | null): string {
 }
 
 /**
- * Format a numeric value as currency: "$1,500.00"
+ * Plain-string currency formatter. For JSX use the <Money/> component which
+ * renders the new AED dirham SVG. This string variant falls back to the "AED"
+ * prefix so toasts, exports, and other non-JSX contexts stay readable.
  */
 export function formatCurrency(
     value?: number | string | null,
-    currency = "AED",
     locale?: string,
+    fractionDigits = 2,
 ): string {
     if (value == null || value === "") return "—"
     const num = typeof value === "string" ? Number(value) : value
     if (isNaN(num)) return "—"
-    return new Intl.NumberFormat(locale, { style: "currency", currency }).format(num)
+    const formatted = new Intl.NumberFormat(locale, {
+        minimumFractionDigits: fractionDigits,
+        maximumFractionDigits: fractionDigits,
+    }).format(num)
+    return `AED ${formatted}`
 }
 
 /**
diff --git a/packages/api/src/api.ts b/packages/api/src/api.ts
index b547622..cf9e858 100644
--- a/packages/api/src/api.ts
+++ b/packages/api/src/api.ts
@@ -13,6 +13,7 @@ import { ShopTypesClient } from "./clients/shop-types"
 import { InventoryClient } from "./clients/inventory"
 import { VendorsClient } from "./clients/vendors"
 import { InspectionsClient } from "./clients/inspections"
+import { InspectionTemplatesClient } from "./clients/inspection-templates"
 import { LabelsClient } from "./clients/labels"
 import { InsuranceTypesClient } from "./clients/insurance-types"
 import { EstimatesClient } from "./clients/estimates"
@@ -57,6 +58,7 @@ import { AutoGenerateClient } from "./clients/auto-generate"
 import { ExpenseItemsClient } from "./clients/expense-items"
 import { InventoryCategoriesClient } from "./clients/inventory-categories"
 import { DocumentPrintClient } from "./clients/document-print"
+import { DocumentShareClient } from "./clients/document-share"
 
 export function createApi(options?: ApiClientOptions) {
     return {
@@ -74,6 +76,7 @@ export function createApi(options?: ApiClientOptions) {
         inventory: new InventoryClient(undefined, options),
         vendors: new VendorsClient(undefined, options),
         inspections: new InspectionsClient(undefined, options),
+        inspectionTemplates: new InspectionTemplatesClient(undefined, options),
         labels: new LabelsClient(undefined, options),
         insuranceTypes: new InsuranceTypesClient(undefined, options),
         estimates: new EstimatesClient(undefined, options),
@@ -118,6 +121,7 @@ export function createApi(options?: ApiClientOptions) {
         expenseItems: new ExpenseItemsClient(undefined, options),
         inventoryCategories: new InventoryCategoriesClient(undefined, options),
         documentPrint: new DocumentPrintClient(undefined, options),
+        documentShare: new DocumentShareClient(undefined, options),
     }
 }
 
diff --git a/packages/api/src/clients/document-share.ts b/packages/api/src/clients/document-share.ts
new file mode 100644
index 0000000..00f546e
--- /dev/null
+++ b/packages/api/src/clients/document-share.ts
@@ -0,0 +1,63 @@
+import { ApiClient, ApiError, type ApiClientOptions } from "../infra/client"
+import type { ApiPath } from "../infra/types"
+
+export const DOCUMENT_SHARE_ROUTES = {
+    STORE: "/api/documents/share",
+} as const satisfies Record<string, ApiPath>
+
+export type DocumentShareType =
+    | "inspection"
+    | "estimate"
+    | "job_card"
+    | "invoice"
+    | "payment_received"
+    | "purchase_order"
+    | "bill"
+    | string
+
+export type DocumentShareChannel = "email" | "link"
+
+export interface DocumentSharePayload {
+    document_type: DocumentShareType
+    document_id: number | string
+    channel: DocumentShareChannel
+    email?: string
+    phone?: string
+    message?: string
+}
+
+export interface DocumentShareResponse {
+    share_url: string
+    whatsapp_url: string
+    expires_at: string | null
+}
+
+export class DocumentShareClient extends ApiClient {
+    constructor(baseUrl?: string, defaultOptions?: ApiClientOptions) {
+        super(baseUrl, defaultOptions)
+    }
+
+    async share(payload: DocumentSharePayload): Promise<DocumentShareResponse> {
+        const endpoint = DOCUMENT_SHARE_ROUTES.STORE
+        const url = `${this.baseUrl.replace(/\/+$/, "")}${endpoint}`
+        const headers = new Headers(this.defaultOptions.headers as Record<string, string>)
+        headers.set("Accept", "application/json")
+        headers.set("Content-Type", "application/json")
+
+        const body = { ...payload, document_id: Number(payload.document_id) }
+        const response = await fetch(url, {
+            method: "POST",
+            headers,
+            body: JSON.stringify(body),
+        })
+
+        const text = await response.text()
+        const data = text ? JSON.parse(text) : null
+
+        if (!response.ok) {
+            throw new ApiError(response.status, response.statusText, endpoint, "post", data)
+        }
+
+        return data as DocumentShareResponse
+    }
+}
diff --git a/packages/api/src/clients/index.ts b/packages/api/src/clients/index.ts
index 6efa2a2..e610579 100644
--- a/packages/api/src/clients/index.ts
+++ b/packages/api/src/clients/index.ts
@@ -12,6 +12,18 @@ export { ShopTypesClient, SHOP_TYPE_ROUTES, type ShopTypeCreatePayload, type Sho
 export { InventoryClient, INVENTORY_ROUTES } from "./inventory"
 export { VendorsClient, VENDOR_ROUTES } from "./vendors"
 export { InspectionsClient, INSPECTION_ROUTES } from "./inspections"
+export { InspectionTemplatesClient, INSPECTION_TEMPLATE_ROUTES } from "./inspection-templates"
+export type {
+    InspectionTemplate,
+    InspectionTemplateSection,
+    InspectionTemplateCheckPoint,
+    InspectionTemplateCheckPointRecordType,
+    InspectionSeverity,
+    InspectionTemplateCreatePayload,
+    InspectionTemplateUpdatePayload,
+    InspectionTemplateSectionPayload,
+    InspectionTemplateCheckPointPayload,
+} from "./inspection-templates"
 export { LabelsClient, LABEL_ROUTES } from "./labels"
 export { InsuranceTypesClient, INSURANCE_TYPE_ROUTES } from "./insurance-types"
 export { EstimatesClient, ESTIMATE_ROUTES } from "./estimates"
@@ -46,6 +58,14 @@ export {
 export { BillsClient, BILL_ROUTES } from "./bills"
 export { ReasonsClient, REASON_ROUTES } from "./reasons"
 export { DocumentPrintClient, DOCUMENT_PRINT_ROUTES, type DocumentPrintType, type DocumentPrintMode } from "./document-print"
+export {
+	DocumentShareClient,
+	DOCUMENT_SHARE_ROUTES,
+	type DocumentShareType,
+	type DocumentShareChannel,
+	type DocumentSharePayload,
+	type DocumentShareResponse,
+} from "./document-share"
 export { HolidaysClient, HOLIDAY_ROUTES } from "./holidays"
 export { MakeAndModelsClient, MAKE_AND_MODEL_ROUTES } from "./make-and-models"
 export { TimeSheetsClient, TIME_SHEET_ROUTES } from "./time-sheets"
diff --git a/packages/api/src/clients/inspection-templates.ts b/packages/api/src/clients/inspection-templates.ts
new file mode 100644
index 0000000..e8dcee7
--- /dev/null
+++ b/packages/api/src/clients/inspection-templates.ts
@@ -0,0 +1,156 @@
+import { ApiClient, type ApiClientOptions } from "../infra/client"
+
+export const INSPECTION_TEMPLATE_ROUTES = {
+    INDEX: "/api/inspection-templates",
+    BY_ID: "/api/inspection-templates/{id}",
+    DUPLICATE: "/api/inspection-templates/{id}/duplicate",
+    SECTIONS: "/api/inspection-templates/{template}/sections",
+    SECTION_BY_ID: "/api/inspection-templates/{template}/sections/{section}",
+    CHECKPOINTS: "/api/inspection-templates/{template}/sections/{section}/checkpoints",
+    CHECKPOINT_BY_ID: "/api/inspection-templates/{template}/sections/{section}/checkpoints/{id}",
+} as const
+
+export type InspectionTemplateCheckPointRecordType =
+    | "record_conditions"
+    | "record_audio"
+    | "record_video"
+    | "capture_photo"
+    | "wire_frame"
+    | "none"
+
+export type InspectionSeverity = "good" | "attention" | "critical" | "na" | "not_inspected"
+
+export type InspectionTemplateCheckPoint = {
+    id: number
+    section_id: number
+    name: string
+    description?: string | null
+    record_type: InspectionTemplateCheckPointRecordType
+    severity_default: InspectionSeverity
+    recommended_service_id?: number | null
+    recommended_part_id?: number | null
+    sort_order: number
+}
+
+export type InspectionTemplateSection = {
+    id: number
+    template_id: number
+    name: string
+    sort_order: number
+    icon?: string | null
+    color?: string | null
+    check_points?: InspectionTemplateCheckPoint[]
+}
+
+export type InspectionTemplate = {
+    id: number
+    name: string
+    description?: string | null
+    shop_type_id?: number | null
+    vehicle_type?: string | null
+    is_active: boolean
+    sections?: InspectionTemplateSection[]
+}
+
+export type InspectionTemplateCreatePayload = {
+    name: string
+    description?: string | null
+    shop_type_id?: number | null
+    vehicle_type?: string | null
+    is_active?: boolean
+}
+
+export type InspectionTemplateUpdatePayload = Partial<InspectionTemplateCreatePayload>
+
+export type InspectionTemplateSectionPayload = {
+    name: string
+    sort_order?: number
+    icon?: string | null
+    color?: string | null
+}
+
+export type InspectionTemplateCheckPointPayload = {
+    name: string
+    description?: string | null
+    record_type?: InspectionTemplateCheckPointRecordType
+    severity_default?: InspectionSeverity
+    recommended_service_id?: number | null
+    recommended_part_id?: number | null
+    sort_order?: number
+}
+
+type ListResponse<T> = {
+    data: T[]
+    meta?: {
+        current_page: number
+        last_page: number
+        per_page: number
+        total: number
+    }
+}
+
+type ItemResponse<T> = { data: T; message?: string }
+
+export class InspectionTemplatesClient extends ApiClient {
+    constructor(baseUrl?: string, defaultOptions?: ApiClientOptions) {
+        super(baseUrl, defaultOptions)
+    }
+
+    async list(query?: Record<string, string | number | boolean>): Promise<ListResponse<InspectionTemplate>> {
+        return this.get(INSPECTION_TEMPLATE_ROUTES.INDEX as never, { query } as never) as never
+    }
+
+    async show(id: number | string): Promise<ItemResponse<InspectionTemplate>> {
+        return this.get(INSPECTION_TEMPLATE_ROUTES.BY_ID as never, { params: { id: String(id) } } as never) as never
+    }
+
+    async create(payload: InspectionTemplateCreatePayload): Promise<ItemResponse<InspectionTemplate>> {
+        return this.post(INSPECTION_TEMPLATE_ROUTES.INDEX as never, payload as never) as never
+    }
+
+    async update(id: number | string, payload: InspectionTemplateUpdatePayload): Promise<ItemResponse<InspectionTemplate>> {
+        return this.put(INSPECTION_TEMPLATE_ROUTES.BY_ID as never, payload as never, { params: { id: String(id) } } as never) as never
+    }
+
+    async destroy(id: number | string): Promise<{ message: string }> {
+        return this.delete(INSPECTION_TEMPLATE_ROUTES.BY_ID as never, { params: { id: String(id) } } as never) as never
+    }
+
+    async duplicate(id: number | string): Promise<ItemResponse<InspectionTemplate>> {
+        return this.post(INSPECTION_TEMPLATE_ROUTES.DUPLICATE as never, undefined as never, { params: { id: String(id) } } as never) as never
+    }
+
+    // ── Sections ──
+    async listSections(templateId: number | string): Promise<ListResponse<InspectionTemplateSection>> {
+        return this.get(INSPECTION_TEMPLATE_ROUTES.SECTIONS as never, { params: { template: String(templateId) } } as never) as never
+    }
+
+    async createSection(templateId: number | string, payload: InspectionTemplateSectionPayload): Promise<ItemResponse<InspectionTemplateSection>> {
+        return this.post(INSPECTION_TEMPLATE_ROUTES.SECTIONS as never, payload as never, { params: { template: String(templateId) } } as never) as never
+    }
+
+    async updateSection(templateId: number | string, sectionId: number | string, payload: Partial<InspectionTemplateSectionPayload>): Promise<ItemResponse<InspectionTemplateSection>> {
+        return this.put(INSPECTION_TEMPLATE_ROUTES.SECTION_BY_ID as never, payload as never, { params: { template: String(templateId), section: String(sectionId) } } as never) as never
+    }
+
+    async destroySection(templateId: number | string, sectionId: number | string): Promise<{ message: string }> {
+        return this.delete(INSPECTION_TEMPLATE_ROUTES.SECTION_BY_ID as never, { params: { template: String(templateId), section: String(sectionId) } } as never) as never
+    }
+
+    // ── Checkpoints ──
+    async listCheckpoints(templateId: number | string, sectionId: number | string): Promise<ListResponse<InspectionTemplateCheckPoint>> {
+        return this.get(INSPECTION_TEMPLATE_ROUTES.CHECKPOINTS as never, { params: { template: String(templateId), section: String(sectionId) } } as never) as never
+    }
+
+    async createCheckpoint(templateId: number | string, sectionId: number | string, payload: InspectionTemplateCheckPointPayload): Promise<ItemResponse<InspectionTemplateCheckPoint>> {
+        return this.post(INSPECTION_TEMPLATE_ROUTES.CHECKPOINTS as never, payload as never, { params: { template: String(templateId), section: String(sectionId) } } as never) as never
+    }
+
+    async updateCheckpoint(templateId: number | string, sectionId: number | string, id: number | string, payload: Partial<InspectionTemplateCheckPointPayload>): Promise<ItemResponse<InspectionTemplateCheckPoint>> {
+        return this.put(INSPECTION_TEMPLATE_ROUTES.CHECKPOINT_BY_ID as never, payload as never, { params: { template: String(templateId), section: String(sectionId), id: String(id) } } as never) as never
+    }
+
+    async destroyCheckpoint(templateId: number | string, sectionId: number | string, id: number | string): Promise<{ message: string }> {
+        return this.delete(INSPECTION_TEMPLATE_ROUTES.CHECKPOINT_BY_ID as never, { params: { template: String(templateId), section: String(sectionId), id: String(id) } } as never) as never
+    }
+}
diff --git a/packages/api/src/clients/inspections.ts b/packages/api/src/clients/inspections.ts
index 1557436..5a94dbf 100644
--- a/packages/api/src/clients/inspections.ts
+++ b/packages/api/src/clients/inspections.ts
@@ -8,6 +8,7 @@ export const INSPECTION_ROUTES = {
     CATEGORY_BY_ID: "/api/inspection-categories/{id}",
     INDEX: "/api/inspections",
     BY_ID: "/api/inspections/{id}",
+    FROM_TEMPLATE: "/api/inspections/from-template",
     CHANGE_STATUS: "/api/change-inspection-status",
     CHECKPOINT_LABELS: "/api/check-point-label",
     CHECKPOINT_LABEL_BY_ID: "/api/check-point-label/{id}",
@@ -54,6 +55,63 @@ export class InspectionsClient extends CrudClient<
         return this.post(INSPECTION_ROUTES.CHANGE_STATUS, payload)
     }
 
+    async showOne(id: number | string): Promise<{ data: any }> {
+        return this.get(`/api/inspections/{id}` as never, { params: { id: String(id) } } as never) as never
+    }
+
+    async sign(id: number | string, who: "technician" | "customer", dataUrl: string) {
+        return this.post(`/api/inspections/{id}/sign` as never, { who, signature: dataUrl } as never, { params: { id: String(id) } } as never) as never
+    }
+
+    /**
+     * Upload one or many photos/videos/audio files to a checkpoint via the
+     * unified attachments endpoint. The single-file `addCheckpointAttachment`
+     * (body-based) above stays available for legacy callers.
+     */
+    async uploadCheckpointAttachments(
+        checkpointId: number | string,
+        files: File[],
+        caption?: string,
+    ): Promise<{ data: Array<{ id: number; url: string; media_type: string; sort_order: number; caption?: string | null }> }> {
+        const fd = new FormData()
+        files.forEach((f) => fd.append("attachments[]", f))
+        if (caption) fd.append("caption", caption)
+        const url = `/api/inspection-check-points/${encodeURIComponent(String(checkpointId))}/attachments`
+        return (this as any).postFormData(url, fd)
+    }
+
+    async destroyCheckpointAttachment(checkpointId: number | string, attachmentId: number | string) {
+        return this.delete(
+            `/api/inspection-check-points/{id}/attachments/{attachmentId}` as never,
+            { params: { id: String(checkpointId), attachmentId: String(attachmentId) } } as never,
+        ) as never
+    }
+
+    async share(id: number | string): Promise<{ data: { share_token: string; share_url: string; share_enabled_at: string; share_expires_at: string } }> {
+        return this.post(`/api/inspections/{id}/share` as never, undefined as never, { params: { id: String(id) } } as never) as never
+    }
+
+    async revokeShare(id: number | string): Promise<{ message: string }> {
+        return this.post(`/api/inspections/{id}/revoke-share` as never, undefined as never, { params: { id: String(id) } } as never) as never
+    }
+
+    async createFromTemplate(payload: {
+        template_id: number
+        title: string
+        customer_id: number | string
+        vehicle_id: number | string
+        department_id: number | string
+        employee_id: number | string
+        order_number: string
+        date: string
+        time: string
+        odometer?: number
+        note?: string
+        inspection_category_id?: number | string
+    }) {
+        return this.post(INSPECTION_ROUTES.FROM_TEMPLATE as never, payload as never) as never
+    }
+
     // ── Checkpoint Labels ──
     async listCheckpointLabels(query?: ApiListQueryParams) {
         return this.get(INSPECTION_ROUTES.CHECKPOINT_LABELS, query ? { query } as never : undefined)
diff --git a/packages/api/src/clients/vendors.ts b/packages/api/src/clients/vendors.ts
index b57e907..d08b91a 100644
--- a/packages/api/src/clients/vendors.ts
+++ b/packages/api/src/clients/vendors.ts
@@ -18,6 +18,10 @@ export class VendorsClient extends CrudClient<
         super(baseUrl, defaultOptions, VENDOR_ROUTES.INDEX, VENDOR_ROUTES.BY_ID)
     }
 
+    async getById(id: string) {
+        return this.show(id)
+    }
+
     async toggleStatus(payload: ApiRequestBody<typeof VENDOR_ROUTES.TOGGLE_STATUS, "post">) {
         return this.post(VENDOR_ROUTES.TOGGLE_STATUS, payload)
     }
diff --git a/packages/api/src/contracts/enums.ts b/packages/api/src/contracts/enums.ts
index b8dba53..b1a5aa3 100644
--- a/packages/api/src/contracts/enums.ts
+++ b/packages/api/src/contracts/enums.ts
@@ -109,7 +109,7 @@ export const SellRatesTaxInclusive = ['Tax Inclusive', 'Tax Exclusive'] as const
 export type SellRatesTaxInclusive = (typeof SellRatesTaxInclusive)[number];
 // Tables
 
-export const Tables= ['bills', 'payments', 'expenses', 'invoices', 'job_cards', 'credit_notes', 'vendor_credits', 'estimates','purchase-order'] as const;
+export const Tables= ['bills', 'payments', 'expenses', 'invoices', 'job_cards', 'credit_notes', 'vendor_credits', 'estimates','purchase-order', 'inventory_adjustments'] as const;
 export type Tables = (typeof Tables)[number];
 
 export const GiveDiscounts = ['no', 'line_item_level', 'transaction_level'] as const;
diff --git a/packages/api/src/infra/crud-client.ts b/packages/api/src/infra/crud-client.ts
index bea65e7..9c94eac 100644
--- a/packages/api/src/infra/crud-client.ts
+++ b/packages/api/src/infra/crud-client.ts
@@ -60,7 +60,7 @@ export abstract class CrudClient<
         return this.delete<ByIdRoute>(this.byIdRoute as ByIdRoute, { params: { id } } as never) as never
     }
 
-    async importData(file: File): Promise<{ message?: string }> {
+    async importData(file: File): Promise<ImportDataResponse> {
         const formData = new FormData()
         formData.append("file", file)
         const route = (this.importRoute ?? `${this.indexRoute}/import`) as string
@@ -78,6 +78,26 @@ export abstract class CrudClient<
 
 export type BaseCrudItem = { id: number }
 
+export type ImportFailureRow = {
+    row: number
+    errors: {
+        field: string
+        label: string
+        value: unknown
+        message: string
+        valid_examples?: string[]
+    }[]
+}
+
+export type ImportDataResponse = {
+    message?: string
+    data?: {
+        imported_count: number
+        failed_count: number
+        failed_rows: ImportFailureRow[]
+    }
+}
+
 type ClientMethodReturn<C, TMethod extends PropertyKey> =
     C extends { [K in TMethod]: (...args: any[]) => infer TResult }
         ? Awaited<TResult>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c78c6ed..3b80d52 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,6 +62,9 @@ importers:
       next-themes:
         specifier: ^0.4.6
         version: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      nextjs-toploader:
+        specifier: ^3.9.17
+        version: 3.9.17(next@16.1.7(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       nuqs:
         specifier: ^2.8.9
         version: 2.8.9(next@16.1.7(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)
@@ -3707,6 +3710,13 @@ packages:
       sass:
         optional: true
 
+  nextjs-toploader@3.9.17:
+    resolution: {integrity: sha512-9OF0KSSLtoSAuNg2LZ3aTl4hR9mBDj5L9s9DZiFCbMlXehyICGjkIz5dVGzuATU2bheJZoBdFgq9w07AKSuQQw==}
+    peerDependencies:
+      next: '>= 6.0.0'
+      react: '>= 16.0.0'
+      react-dom: '>= 16.0.0'
+
   node-domexception@1.0.0:
     resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
     engines: {node: '>=10.5.0'}
@@ -3727,6 +3737,9 @@ packages:
     resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
     engines: {node: '>=18'}
 
+  nprogress@0.2.0:
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+
   nuqs@2.8.9:
     resolution: {integrity: sha512-8ou6AEwsxMWSYo2qkfZtYFVzngwbKmg4c00HVxC1fF6CEJv3Fwm6eoZmfVPALB+vw8Udo7KL5uy96PFcYe1BIQ==}
     peerDependencies:
@@ -4921,7 +4934,7 @@ snapshots:
       '@babel/types': 7.29.0
       '@jridgewell/remapping': 2.3.5
       convert-source-map: 2.0.0
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -5079,7 +5092,7 @@ snapshots:
       '@babel/parser': 7.29.2
       '@babel/template': 7.28.6
       '@babel/types': 7.29.0
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -5189,7 +5202,7 @@ snapshots:
   '@eslint/config-array@0.21.1':
     dependencies:
       '@eslint/object-schema': 2.1.7
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -5197,7 +5210,7 @@ snapshots:
   '@eslint/config-array@0.21.2':
     dependencies:
       '@eslint/object-schema': 2.1.7
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       minimatch: 3.1.5
     transitivePeerDependencies:
       - supports-color
@@ -5213,7 +5226,7 @@ snapshots:
   '@eslint/eslintrc@3.3.1':
     dependencies:
       ajv: 6.12.6
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       espree: 10.4.0
       globals: 14.0.0
       ignore: 5.3.2
@@ -5227,7 +5240,7 @@ snapshots:
   '@eslint/eslintrc@3.3.5':
     dependencies:
       ajv: 6.14.0
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       espree: 10.4.0
       globals: 14.0.0
       ignore: 5.3.2
@@ -6557,7 +6570,7 @@ snapshots:
       '@typescript-eslint/types': 8.50.0
       '@typescript-eslint/typescript-estree': 8.50.0(typescript@5.9.2)
       '@typescript-eslint/visitor-keys': 8.50.0
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       eslint: 9.39.1(jiti@2.6.1)
       typescript: 5.9.2
     transitivePeerDependencies:
@@ -6569,7 +6582,7 @@ snapshots:
       '@typescript-eslint/types': 8.50.0
       '@typescript-eslint/typescript-estree': 8.50.0(typescript@5.9.3)
       '@typescript-eslint/visitor-keys': 8.50.0
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       eslint: 9.39.4(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -6579,7 +6592,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/tsconfig-utils': 8.50.0(typescript@5.9.2)
       '@typescript-eslint/types': 8.50.0
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
@@ -6588,7 +6601,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/tsconfig-utils': 8.50.0(typescript@5.9.3)
       '@typescript-eslint/types': 8.50.0
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
@@ -6611,7 +6624,7 @@ snapshots:
       '@typescript-eslint/types': 8.50.0
       '@typescript-eslint/typescript-estree': 8.50.0(typescript@5.9.2)
       '@typescript-eslint/utils': 8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.2)
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       eslint: 9.39.1(jiti@2.6.1)
       ts-api-utils: 2.1.0(typescript@5.9.2)
       typescript: 5.9.2
@@ -6623,7 +6636,7 @@ snapshots:
       '@typescript-eslint/types': 8.50.0
       '@typescript-eslint/typescript-estree': 8.50.0(typescript@5.9.3)
       '@typescript-eslint/utils': 8.50.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       eslint: 9.39.4(jiti@2.6.1)
       ts-api-utils: 2.1.0(typescript@5.9.3)
       typescript: 5.9.3
@@ -6638,7 +6651,7 @@ snapshots:
       '@typescript-eslint/tsconfig-utils': 8.50.0(typescript@5.9.2)
       '@typescript-eslint/types': 8.50.0
       '@typescript-eslint/visitor-keys': 8.50.0
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       minimatch: 9.0.5
       semver: 7.7.3
       tinyglobby: 0.2.15
@@ -6653,7 +6666,7 @@ snapshots:
       '@typescript-eslint/tsconfig-utils': 8.50.0(typescript@5.9.3)
       '@typescript-eslint/types': 8.50.0
       '@typescript-eslint/visitor-keys': 8.50.0
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       minimatch: 9.0.5
       semver: 7.7.3
       tinyglobby: 0.2.15
@@ -6936,7 +6949,7 @@ snapshots:
     dependencies:
       bytes: 3.1.2
       content-type: 1.0.5
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       http-errors: 2.0.1
       iconv-lite: 0.7.2
       on-finished: 2.4.1
@@ -7529,7 +7542,7 @@ snapshots:
   eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       eslint: 9.39.4(jiti@2.6.1)
       get-tsconfig: 4.13.7
       is-bun-module: 2.0.0
@@ -7693,7 +7706,7 @@ snapshots:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.6
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       escape-string-regexp: 4.0.0
       eslint-scope: 8.4.0
       eslint-visitor-keys: 4.2.1
@@ -7734,7 +7747,7 @@ snapshots:
       ajv: 6.14.0
       chalk: 4.1.2
       cross-spawn: 7.0.6
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       escape-string-regexp: 4.0.0
       eslint-scope: 8.4.0
       eslint-visitor-keys: 4.2.1
@@ -7846,7 +7859,7 @@ snapshots:
       content-type: 1.0.5
       cookie: 0.7.2
       cookie-signature: 1.2.2
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       depd: 2.0.0
       encodeurl: 2.0.0
       escape-html: 1.0.3
@@ -7944,7 +7957,7 @@ snapshots:
 
   finalhandler@2.1.1:
     dependencies:
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       encodeurl: 2.0.0
       escape-html: 1.0.3
       on-finished: 2.4.1
@@ -8148,13 +8161,6 @@ snapshots:
       jsprim: 2.0.2
       sshpk: 1.18.0
 
-  https-proxy-agent@7.0.6:
-    dependencies:
-      agent-base: 7.1.4
-      debug: 4.4.3(supports-color@8.1.1)
-    transitivePeerDependencies:
-      - supports-color
-
   https-proxy-agent@7.0.6(supports-color@10.2.2):
     dependencies:
       agent-base: 7.1.4
@@ -8696,6 +8702,14 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
+  nextjs-toploader@3.9.17(next@16.1.7(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      next: 16.1.7(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      nprogress: 0.2.0
+      prop-types: 15.8.1
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
   node-domexception@1.0.0: {}
 
   node-fetch@3.3.2:
@@ -8715,6 +8729,8 @@ snapshots:
       path-key: 4.0.0
       unicorn-magic: 0.3.0
 
+  nprogress@0.2.0: {}
+
   nuqs@2.8.9(next@16.1.7(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4):
     dependencies:
       '@standard-schema/spec': 1.0.0
@@ -9244,7 +9260,7 @@ snapshots:
 
   router@2.2.0:
     dependencies:
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       depd: 2.0.0
       is-promise: 4.0.0
       parseurl: 1.3.3
@@ -9295,7 +9311,7 @@ snapshots:
 
   send@1.2.1:
     dependencies:
-      debug: 4.4.3(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@10.2.2)
       encodeurl: 2.0.0
       escape-html: 1.0.3
       etag: 1.8.1
@@ -9363,7 +9379,7 @@ snapshots:
       fast-glob: 3.3.3
       fs-extra: 11.3.4
       fuzzysort: 3.1.0
-      https-proxy-agent: 7.0.6
+      https-proxy-agent: 7.0.6(supports-color@10.2.2)
       kleur: 4.1.5
       msw: 2.12.14(@types/node@25.5.0)(typescript@5.9.3)
       node-fetch: 3.3.2