add datetable cnfcnpj

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/columns.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { CellContext, ColumnDef } from '@tanstack/react-table'
+import type { ColumnDef } from '@tanstack/react-table'
 import { useRequest, useToggle } from 'ahooks'
 import {
   CircleXIcon,
@@ -13,7 +13,10 @@ import type { ComponentProps, MouseEvent } from 'react'
 import { toast } from 'sonner'
 
 import { Abbr } from '@repo/ui/components/abbr'
-import { DataTableColumnHeader } from '@repo/ui/components/data-table'
+import {
+  DataTableColumnDatetime,
+  DataTableColumnHeader
+} from '@repo/ui/components/data-table'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -121,7 +124,6 @@ export const columns: ColumnDef<Enrollment>[] = [
     enableHiding: false,
     cell: ({ row }) => {
       const { name } = row.getValue('course') as { name: string }
-
       return <Abbr>{name}</Abbr>
     }
   },
@@ -159,43 +161,53 @@ export const columns: ColumnDef<Enrollment>[] = [
   },
   {
     accessorKey: 'created_at',
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
     meta: { title: 'Cadastrado em' },
     enableSorting: true,
     enableHiding: true,
-    cell: cellDate
+    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    cell: ({ row, column }) => (
+      <DataTableColumnDatetime row={row} column={column} />
+    )
   },
   {
     accessorKey: 'started_at',
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
     meta: { title: 'Iniciado em' },
     enableSorting: true,
     enableHiding: true,
-    cell: cellDate
+    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    cell: ({ row, column }) => (
+      <DataTableColumnDatetime row={row} column={column} />
+    )
   },
   {
     accessorKey: 'completed_at',
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
     meta: { title: 'Concluído em' },
     enableSorting: true,
     enableHiding: true,
-    cell: cellDate
+    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    cell: ({ row, column }) => (
+      <DataTableColumnDatetime row={row} column={column} />
+    )
   },
   {
     accessorKey: 'failed_at',
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
     meta: { title: 'Reprovado em' },
     enableSorting: true,
     enableHiding: true,
-    cell: cellDate
+    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    cell: ({ row, column }) => (
+      <DataTableColumnDatetime row={row} column={column} />
+    )
   },
   {
     accessorKey: 'canceled_at',
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
     meta: { title: 'Cancelado em' },
     enableSorting: true,
     enableHiding: true,
-    cell: cellDate
+    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    cell: ({ row, column }) => (
+      <DataTableColumnDatetime row={row} column={column} />
+    )
   },
   {
     id: 'actions',
@@ -203,20 +215,6 @@ export const columns: ColumnDef<Enrollment>[] = [
   }
 ]
 
-function cellDate<TData>({
-  row: { original },
-  cell: { column }
-}: CellContext<TData, unknown>) {
-  const accessorKey = column.columnDef.accessorKey as keyof TData
-  const value = original?.[accessorKey]
-
-  if (value) {
-    return formatted.format(new Date(value as string))
-  }
-
-  return <></>
-}
-
 async function getEnrollment(id: string) {
   const r = await fetch(`/~/api/enrollments/${id}`, {
     method: 'GET'