updates

apps/dashboard/app/(authenticated)/sales/job-cards/[id]/tasks/page.tsx

@@ -3,9 +3,13 @@
 import { use } 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 { TaskForm } from "@/modules/tasks/task-form"
 import { TASK_ROUTES } 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"
+import { formatDate, formatEnum } from "@/shared/utils/formatters"
 
 export default function JobCardTasksPage({
     params,
@@ -13,54 +17,58 @@ export default function JobCardTasksPage({
     params: Promise<{ id: string }>
 }) {
     const { id: jobCardId } = use(params)
+    const jobCard = useJobCard()
+
+    const defaultJobCard = jobCard
+        ? { value: String((jobCard as any).id), label: (jobCard as any).title || `Job Card` }
+        : null
 
     return (
         <ResourcePage<TasksClient>
-            pageTitle="Tasks"
-            routeKey={TASK_ROUTES.TASKS}
+            routeKey={TASK_ROUTES.INDEX}
             getClient={(api) => api.tasks}
             extraParams={{ job_card_id: jobCardId }}
             header={null}
-            columns={() => [
+            tableHeader={({ invalidateQuery, selectedItem, closeDialog }) => (
+                <div className="flex justify-end">
+                    <FormDialog title="Task">
+                        {(resourceId) => (
+                            <TaskForm
+                                resourceId={resourceId}
+                                initialData={selectedItem ?? { job_card: defaultJobCard }}
+                                onSuccess={() => { closeDialog(); invalidateQuery() }}
+                            />
+                        )}
+                    </FormDialog>
+                </div>
+            )}
+            columns={({ actionsColumn }) => [
                 {
-                    accessorKey: "title",
-                    header: ({ column }) => <ColumnHeader column={column} title="Task" />,
-                    cell: ({ row }) => (row.original as any).title || "—",
+                    accessorKey: "task_number",
+                    header: ({ column }) => <ColumnHeader column={column} title="Task #" />,
+                    cell: ({ row }) => (row.original as any).task_number || "—",
                 },
                 {
-                    accessorKey: "task_type_name",
-                    header: ({ column }) => <ColumnHeader column={column} title="Type" />,
-                    cell: ({ row }) => (row.original as any).task_type_name || "—",
-                },
-                {
-                    accessorKey: "section_name",
-                    header: ({ column }) => <ColumnHeader column={column} title="Section" />,
-                    cell: ({ row }) => (row.original as any).section_name || "—",
+                    accessorKey: "subject",
+                    header: ({ column }) => <ColumnHeader column={column} title="Subject" />,
+                    cell: ({ row }) => (row.original as any).subject || "—",
                 },
                 {
                     accessorKey: "due_date",
                     header: ({ column }) => <ColumnHeader column={column} title="Due Date" />,
-                    cell: ({ row }) => {
-                        const val = (row.original as any).due_date
-                        return val ? new Date(val).toLocaleDateString() : "—"
-                    },
+                    cell: ({ row }) => formatDate((row.original as any).due_date),
                 },
                 {
                     accessorKey: "priority",
                     header: ({ column }) => <ColumnHeader column={column} title="Priority" />,
-                    cell: ({ row }) => {
-                        const value = (row.original as any).priority
-                        return value ? <Badge variant="outline">{value}</Badge> : "—"
-                    },
+          
                 },
                 {
                     accessorKey: "status",
                     header: ({ column }) => <ColumnHeader column={column} title="Status" />,
-                    cell: ({ row }) => {
-                        const value = (row.original as any).status
-                        return value ? <Badge>{value}</Badge> : "—"
-                    },
+               
                 },
+                actionsColumn(),
             ]}
         />
     )