add datetable cnfcnpj

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

@@ -12,7 +12,12 @@ import { NavLink, useParams } from 'react-router'
 import { toast } from 'sonner'
 
 import { Abbr } from '@repo/ui/components/abbr'
-import { useDataTable } from '@repo/ui/components/data-table'
+import {
+  useDataTable,
+  DataTableColumnDatetime,
+  DataTableColumnHeader,
+  DataTableColumnCpfCnpj
+} from '@repo/ui/components/data-table'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -26,6 +31,7 @@ import {
 } from '@repo/ui/components/ui/alert-dialog'
 import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
 import { Button } from '@repo/ui/components/ui/button'
+import { Checkbox } from '@repo/ui/components/ui/checkbox'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -45,15 +51,30 @@ export type User = {
   cnpj?: string
 }
 
-const formatted = new Intl.DateTimeFormat('pt-BR', {
-  day: '2-digit',
-  month: '2-digit',
-  year: 'numeric',
-  hour: '2-digit',
-  minute: '2-digit'
-})
-
 export const columns: ColumnDef<User>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && 'indeterminate')
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        className="cursor-pointer"
+        aria-label="Selecionar tudo"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        disabled={!row.getCanSelect()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        className="cursor-pointer"
+        aria-label="Selecionar linha"
+      />
+    )
+  },
   {
     header: 'Colaborador',
     cell: ({ row }) => {
@@ -78,38 +99,29 @@ export const columns: ColumnDef<User>[] = [
     }
   },
   {
+    accessorKey: 'cpf',
     header: 'CPF',
-    cell: ({ row }) => {
-      const { cpf } = row.original
-
-      if (cpf) {
-        return <>{formatCPF(cpf)}</>
-      }
-
-      return <></>
-    }
+    cell: ({ row, column }) => (
+      <DataTableColumnCpfCnpj row={row} column={column} />
+    )
   },
   {
-    header: 'Último accesso',
-    cell: ({ row }) => {
-      // Post-migration: rename `lastLogin` to `last_login`
-      if (row.original?.lastLogin) {
-        const lastLogin = new Date(row.original.lastLogin)
-        return formatted.format(lastLogin)
-      }
-
-      return <></>
-    }
+    accessorKey: 'createDate',
+    enableSorting: true,
+    meta: { title: 'Cadastrado em' },
+    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    cell: ({ row, column }) => (
+      <DataTableColumnDatetime row={row} column={column} />
+    )
   },
   {
-    header: 'Cadastrado em',
-    meta: {
-      className: 'w-1/12'
-    },
-    cell: ({ row }) => {
-      const created_at = new Date(row.original.createDate)
-      return formatted.format(created_at)
-    }
+    accessorKey: 'lastLogin',
+    enableSorting: true,
+    meta: { title: 'Último acesso' },
+    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    cell: ({ row, column }) => (
+      <DataTableColumnDatetime row={row} column={column} />
+    )
   },
   {
     id: 'actions',