update

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

@@ -1,15 +1,7 @@
 'use client'
 
 import type { CellContext, ColumnDef } from '@tanstack/react-table'
-import {
-  CircleCheckIcon,
-  CircleIcon,
-  CircleOffIcon,
-  CircleXIcon,
-  HelpCircleIcon,
-  TimerIcon,
-  type LucideIcon
-} from 'lucide-react'
+import { HelpCircleIcon } from 'lucide-react'
 
 import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
 import { Badge } from '@repo/ui/components/ui/badge'
@@ -17,6 +9,9 @@ import { Checkbox } from '@repo/ui/components/ui/checkbox'
 import { Progress } from '@repo/ui/components/ui/progress'
 import { cn, initials } from '@repo/ui/lib/utils'
 
+import { DataTableColumnHeader } from '@/components/data-table/column-header'
+import { labels, statuses } from './data'
+
 // This type is used to define the shape of our data.
 // You can use a Zod schema here if you want.
 type Course = {
@@ -41,48 +36,6 @@ const formatted = new Intl.DateTimeFormat('pt-BR', {
   minute: '2-digit'
 })
 
-export const statuses: Record<
-  string,
-  { icon: LucideIcon; color?: string; label: string }
-> = {
-  PENDING: {
-    icon: CircleIcon,
-    label: 'Não iniciado'
-  },
-  IN_PROGRESS: {
-    icon: TimerIcon,
-    color: 'text-blue-400 [&_svg]:text-blue-500',
-    label: 'Em andamento'
-  },
-  COMPLETED: {
-    icon: CircleCheckIcon,
-    color: 'text-green-400 [&_svg]:text-background [&_svg]:fill-green-500',
-    label: 'Aprovado'
-  },
-  FAILED: {
-    icon: CircleXIcon,
-    color: 'text-red-400 [&_svg]:text-red-500',
-    label: 'Reprovado'
-  },
-  CANCELED: {
-    icon: CircleOffIcon,
-    color: 'text-orange-400 [&_svg]:text-orange-500',
-    label: 'Cancelado'
-  }
-}
-
-const defaultIcon = {
-  icon: HelpCircleIcon
-}
-
-const statusTranslate: Record<string, string> = {
-  PENDING: 'Não iniciado',
-  IN_PROGRESS: 'Em andamento',
-  COMPLETED: 'Aprovado',
-  FAILED: 'Reprovado',
-  CANCELED: 'Cancelado'
-}
-
 export const columns: ColumnDef<Enrollment>[] = [
   {
     id: 'select',
@@ -105,10 +58,11 @@ export const columns: ColumnDef<Enrollment>[] = [
     )
   },
   {
+    accessorKey: 'user',
     header: 'Colaborador',
     enableHiding: false,
-    cell: ({ row: { original } }) => {
-      const { user } = original
+    cell: ({ row }) => {
+      const user = row.getValue('user') as { name: string; email: string }
 
       return (
         <div className="flex gap-2.5 items-center">
@@ -127,22 +81,27 @@ export const columns: ColumnDef<Enrollment>[] = [
     }
   },
   {
-    accessorKey: 'course.name',
+    accessorKey: 'course',
     header: 'Curso',
     enableHiding: false,
-    cell: ({ row: { original } }) => (
-      <abbr className="truncate max-w-62 block" title={original.course.name}>
-        {original.course.name}
-      </abbr>
-    )
+    cell: ({ row }) => {
+      const { name } = row.getValue('course') as { name: string }
+
+      return (
+        <abbr className="truncate max-w-62 block" title={name}>
+          {name}
+        </abbr>
+      )
+    }
   },
   {
     accessorKey: 'status',
     header: 'Status',
     enableHiding: false,
-    cell: ({ row: { original } }) => {
-      const status = statusTranslate[original.status] ?? original.status
-      const { icon: Icon, color } = statuses?.[original.status] ?? defaultIcon
+    cell: ({ row }) => {
+      const s = row.getValue('status') as string
+      const status = labels[s] ?? s
+      const { icon: Icon, color } = statuses?.[s] ?? { icon: HelpCircleIcon }
 
       return (
         <Badge variant="outline" className={cn(color, ' px-1.5')}>
@@ -156,44 +115,63 @@ export const columns: ColumnDef<Enrollment>[] = [
     accessorKey: 'progress',
     header: 'Progresso',
     enableHiding: false,
-    cell: ({ row: { original } }) => (
-      <div className="flex gap-2.5 items-center ">
-        <Progress value={Number(original.progress)} className="w-32" />
-        <span className="text-xs">{original.progress}%</span>
-      </div>
-    )
+    cell: ({ row }) => {
+      const progress = row.getValue('progress')
+
+      return (
+        <div className="flex gap-2.5 items-center ">
+          <Progress value={Number(progress)} className="w-32" />
+          <span className="text-xs">{String(progress)}%</span>
+        </div>
+      )
+    }
   },
   {
     accessorKey: 'created_at',
-    header: 'Matriculado em',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Matriculado em" />
+    ),
+    meta: { title: 'Matriculado em' },
     enableSorting: true,
     enableHiding: true,
     cell: cellDate
   },
   {
     accessorKey: 'started_at',
-    header: 'Iniciado em',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Iniciado em" />
+    ),
+    meta: { title: 'Iniciado em' },
     enableSorting: true,
     enableHiding: true,
     cell: cellDate
   },
   {
     accessorKey: 'completed_at',
-    header: 'Aprovado em',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Aprovado em" />
+    ),
+    meta: { title: 'Aprovado em' },
     enableSorting: true,
     enableHiding: true,
     cell: cellDate
   },
   {
     accessorKey: 'failed_at',
-    header: 'Reprovado em',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Reprovado em" />
+    ),
+    meta: { title: 'Reprovado em' },
     enableSorting: true,
     enableHiding: true,
     cell: cellDate
   },
   {
     accessorKey: 'canceled_at',
-    header: 'Cancelado em',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Cancelado em" />
+    ),
+    meta: { title: 'Cancelado em' },
     enableSorting: true,
     enableHiding: true,
     cell: cellDate