finish bills , po , jobcards relational fields creation

apps/dashboard/app/(authenticated)/items/parts/page.tsx

@@ -1,12 +1,11 @@
 "use client"
 
 import { ResourcePage } from "@/shared/data-view/resource-page"
-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 { PartForm } from "@/modules/parts/part-form"
-import { Badge } from "@/shared/components/ui/badge"
+import { partColumns } from "@/modules/parts/parts-columns"
 import { useAuthApi } from "@/shared/useApi"
 import { PARTS_ROUTES } from "@garage/api"
 import type { PartsClient } from "@garage/api"
@@ -43,69 +42,17 @@ export default function PartsPage() {
                 ),
             })}
             columns={({ actionsColumn }) => [
-                {
-                    accessorKey: "title",
-                    header: ({ column }) => <ColumnHeader column={column} title="Title" />,
-                    cell: ({ row }) => {
-                        const r = row.original as any
-                        return (
-                            <div>
-                                <span className="font-medium">{r.title || "—"}</span>
-                                {r.sku && (
-                                    <span className="ml-2 text-xs text-muted-foreground">{r.sku}</span>
-                                )}
-                            </div>
-                        )
-                    },
-                },
-                {
-                    accessorKey: "part_number",
-                    header: ({ column }) => <ColumnHeader column={column} title="Part #" />,
-                    cell: ({ row }) => (row.original as any).part_number || "—",
-                },
-                {
-                    accessorKey: "manufactured_by",
-                    header: ({ column }) => <ColumnHeader column={column} title="Manufacturer" />,
-                    cell: ({ row }) => (row.original as any).manufactured_by || "—",
-                },
-                {
-                    accessorKey: "selling_price",
-                    header: ({ column }) => <ColumnHeader column={column} title="Sell Price" />,
-                    cell: ({ row }) => {
-                        const val = (row.original as any).selling_price
-                        return val != null ? `$${Number(val).toFixed(2)}` : "—"
-                    },
-                },
-                {
-                    accessorKey: "purchase_price",
-                    header: ({ column }) => <ColumnHeader column={column} title="Cost" />,
-                    cell: ({ row }) => {
-                        const val = (row.original as any).purchase_price
-                        return val != null ? `$${Number(val).toFixed(2)}` : "—"
-                    },
-                },
-                {
-                    accessorKey: "is_active",
-                    header: ({ column }) => <ColumnHeader column={column} title="Status" />,
-                    cell: ({ row }) => {
-                        const active = (row.original as any).is_active
-                        return (
-                            <Badge variant={active ? "default" : "secondary"}>
-                                {active ? "Active" : "Inactive"}
-                            </Badge>
-                        )
-                    },
-                },
-                {
-                    accessorKey: "created_at",
-                    header: ({ column }) => <ColumnHeader column={column} title="Created" />,
-                    cell: ({ row }) => {
-                        const val = (row.original as any).created_at
-                        return val ? new Date(val).toLocaleDateString() : "—"
-                    },
-                },
+                partColumns.title,
+                partColumns.partNumber,
+                partColumns.manufacturer,
+                partColumns.sellingPrice,
+                partColumns.purchasePrice,
+                partColumns.stock,
+                partColumns.status,
+                partColumns.createdAt,
                 actionsColumn(),
             ]}
+
         />
     )
 }

apps/dashboard/app/(authenticated)/purchase/purchase-order/[id]/layout.tsx

@@ -0,0 +1,44 @@
+import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
+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 { ClipboardList } from 'lucide-react'
+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 purchaseOrder = (await api.purchaseOrders.getById(id)) as any
+
+    const data = purchaseOrder?.data ?? purchaseOrder
+    const title = data?.title || data?.order_number || 'Purchase Order'
+    const orderNumber = data?.order_number
+    const description = orderNumber ? `Order #: ${orderNumber}` : undefined
+
+    return (
+        <PurchaseOrderProvider purchaseOrder={{ id, label: title, data }}>
+            <DashboardDetailsPage
+                className="p-0 lg:p-0"
+                icon={<ClipboardList className="size-5" />}
+                title={title}
+                description={description}
+                backHref="/purchase/purchase-order"
+                actions={
+                    <div className="flex items-center gap-2">
+                        <CreateBillFromPOButton />
+                        <PurchaseOrderActions purchaseOrderId={id} />
+                    </div>
+                }
+                tabs={[
+                    { href: `/purchase/purchase-order/${id}`, label: 'Details' },
+                ]}
+            >
+                {props.children}
+            </DashboardDetailsPage>
+        </PurchaseOrderProvider>
+    )
+}

apps/dashboard/app/(authenticated)/purchase/purchase-order/[id]/page.tsx

@@ -0,0 +1,21 @@
+import { getServerApi } from '@garage/api/server'
+import { PurchaseOrderGeneralInfo } from '@/modules/purchase-orders/purchase-order-general-info'
+import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
+
+export default async function page(props: { params: Promise<{ id: string }> }) {
+    const { id } = await props.params
+    const api = await getServerApi()
+    const response = await api.purchaseOrders.getById(id)
+
+    const purchaseOrder = (response as any)?.data ?? response
+
+    if (!purchaseOrder) {
+        return <div className="text-muted-foreground">Purchase order not found.</div>
+    }
+
+    return (
+        <DashboardPage header={null}>
+            <PurchaseOrderGeneralInfo purchaseOrder={purchaseOrder} />
+        </DashboardPage>
+    )
+}

apps/dashboard/app/(authenticated)/purchase/purchase-order/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"
@@ -8,14 +9,17 @@ import { PURCHASE_ORDER_ROUTES } from "@garage/api"
 import type { PurchaseOrdersClient } from "@garage/api"
 
 export default function PurchaseOrdersPage() {
+    const router = useRouter()
+
     return (
         <ResourcePage<PurchaseOrdersClient>
             pageTitle="Purchase Orders"
             routeKey={PURCHASE_ORDER_ROUTES.INDEX}
             getClient={(api) => api.purchaseOrders}
+            onRowClick={(row) => router.push(`/purchase/purchase-order/${(row as any).id}`)}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
-                    <FormDialog title="Purchase Order">
+                    <FormDialog classNames={{dialogContent:"min-w-6xl"}} title="Purchase Order">
                         {(resourceId) => (
                             <PurchaseOrderForm
                                 resourceId={resourceId}