task-f

src/features/foundation/approval/components/approval-columns.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import Link from 'next/link';
+import type { Column, ColumnDef } from '@tanstack/react-table';
+import { DataTableColumnHeader } from '@/components/ui/table/data-table-column-header';
+import { Icons } from '@/components/icons';
+import type { ApprovalListItem } from '../types';
+import { ApprovalStatusBadge } from './approval-status-badge';
+
+export function getApprovalColumns(): ColumnDef<ApprovalListItem>[] {
+  return [
+    {
+      id: 'entityCode',
+      accessorFn: (row) => row.entityCode ?? row.entityId,
+      header: ({ column }: { column: Column<ApprovalListItem, unknown> }) => (
+        <DataTableColumnHeader column={column} title='Request' />
+      ),
+      cell: ({ row }) => (
+        <div className='flex flex-col'>
+          <Link href={`/dashboard/crm/approvals/${row.original.id}`} className='font-medium hover:underline'>
+            {row.original.entityCode ?? row.original.entityId}
+          </Link>
+          <span className='text-muted-foreground text-xs'>
+            {row.original.workflowName}
+            {row.original.entityTitle ? ` - ${row.original.entityTitle}` : ''}
+          </span>
+        </div>
+      ),
+      meta: {
+        label: 'Request',
+        placeholder: 'Search approvals...',
+        variant: 'text' as const,
+        icon: Icons.search
+      },
+      enableColumnFilter: true
+    },
+    {
+      id: 'status',
+      accessorKey: 'status',
+      header: ({ column }: { column: Column<ApprovalListItem, unknown> }) => (
+        <DataTableColumnHeader column={column} title='Status' />
+      ),
+      cell: ({ row }) => <ApprovalStatusBadge status={row.original.status} />,
+      meta: {
+        label: 'Status',
+        variant: 'multiSelect' as const,
+        options: [
+          { value: 'pending', label: 'Pending' },
+          { value: 'approved', label: 'Approved' },
+          { value: 'rejected', label: 'Rejected' },
+          { value: 'returned', label: 'Returned' },
+          { value: 'cancelled', label: 'Cancelled' }
+        ]
+      },
+      enableColumnFilter: true
+    },
+    {
+      id: 'entityType',
+      accessorKey: 'entityType',
+      header: ({ column }: { column: Column<ApprovalListItem, unknown> }) => (
+        <DataTableColumnHeader column={column} title='Entity' />
+      ),
+      cell: ({ row }) => row.original.entityType.replaceAll('_', ' '),
+      meta: {
+        label: 'Entity',
+        variant: 'multiSelect' as const,
+        options: [{ value: 'quotation', label: 'Quotation' }]
+      },
+      enableColumnFilter: true
+    },
+    {
+      id: 'currentStep',
+      accessorKey: 'currentStep',
+      header: ({ column }: { column: Column<ApprovalListItem, unknown> }) => (
+        <DataTableColumnHeader column={column} title='Current Step' />
+      ),
+      cell: ({ row }) => (
+        <div className='flex flex-col'>
+          <span>Step {row.original.currentStep}</span>
+          <span className='text-muted-foreground text-xs'>
+            {row.original.currentStepRoleName ?? '-'}
+          </span>
+        </div>
+      )
+    },
+    {
+      id: 'requestedBy',
+      accessorFn: (row) => row.requestedByName ?? row.requestedBy,
+      header: ({ column }: { column: Column<ApprovalListItem, unknown> }) => (
+        <DataTableColumnHeader column={column} title='Requested By' />
+      ),
+      cell: ({ row }) => row.original.requestedByName ?? row.original.requestedBy
+    },
+    {
+      id: 'requestedAt',
+      accessorKey: 'requestedAt',
+      header: ({ column }: { column: Column<ApprovalListItem, unknown> }) => (
+        <DataTableColumnHeader column={column} title='Requested At' />
+      ),
+      cell: ({ row }) => new Date(row.original.requestedAt).toLocaleString()
+    }
+  ];
+}