feat: add template checkpoint edit dialog and vendor management components

- Implemented TemplateCheckpointEditDialog for creating and editing inspection checkpoints. - Added VendorActions component for managing vendor actions including edit, activate/deactivate, and delete. - Created VendorContext for managing vendor state across components. - Developed VendorGeneralInfo component to display detailed vendor information. - Introduced AedSymbol and Money components for consistent currency representation. - Added PromptDialog for user input prompts throughout the application. - Implemented RelationLink component for unified related-data display in CRUD tables. - Created InspectionTemplatesClient for API interactions related to inspection templates.
2026-05-18 12:08:42 +04:00
parent 54d11f01b4
commit 4bfd8c84a9
111 changed files with 5002 additions and 1047 deletions
@@ -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>
+    )
+}
@@ -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} />
+}
@@ -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.")
+                                    }
+                                },
+                            },
+                        ]
+                    },
+                }),
            ]}
        />
    )