update tables

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

@@ -1,21 +1,19 @@
 'use client'
 
 import type { ColumnDef } from '@tanstack/react-table'
+import type { ComponentProps, MouseEvent } from 'react'
 import { useRequest, useToggle } from 'ahooks'
 import {
   CircleXIcon,
   EllipsisVerticalIcon,
   FileBadgeIcon,
-  HelpCircleIcon,
   LockOpenIcon
 } from 'lucide-react'
-import type { ComponentProps, MouseEvent } from 'react'
 import { toast } from 'sonner'
 
-import { Abbr } from '@repo/ui/components/abbr'
 import {
-  DataTableColumnDatetime,
-  DataTableColumnHeader
+  DataTableColumnHeaderSelect,
+  DataTableColumnSelect
 } from '@repo/ui/components/data-table'
 import {
   AlertDialog,
@@ -28,10 +26,8 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger
 } from '@repo/ui/components/ui/alert-dialog'
-import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
-import { Badge } from '@repo/ui/components/ui/badge'
+
 import { Button } from '@repo/ui/components/ui/button'
-import { Checkbox } from '@repo/ui/components/ui/checkbox'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -39,170 +35,24 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from '@repo/ui/components/ui/dropdown-menu'
-import { Progress } from '@repo/ui/components/ui/progress'
 import { Spinner } from '@repo/ui/components/ui/spinner'
-import { cn, initials } from '@repo/ui/lib/utils'
-import { labels, statuses } from '@repo/ui/routes/enrollments/data'
+import {
+  type Enrollment,
+  columns as columns_
+} from '@repo/ui/routes/enrollments/columns'
 
-// This type is used to define the shape of our data.
-// You can use a Zod schema here if you want.
-type Course = {
-  id: string
-  name: string
-}
-
-export type Enrollment = {
-  id: string
-  name: string
-  course: Course
-  status: string
-  progress: string
-  created_at: string
-}
+export type { Enrollment }
 
 export const columns: ColumnDef<Enrollment>[] = [
   {
     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"
-      />
-    )
-  },
-  {
-    accessorKey: 'user',
-    header: 'Colaborador',
-    enableHiding: false,
-    cell: ({ row }) => {
-      const user = row.getValue('user') as { name: string; email: string }
-
-      return (
-        <div className="flex gap-2.5 items-center">
-          <Avatar className="size-10 hidden lg:block">
-            <AvatarFallback>{initials(user.name)}</AvatarFallback>
-          </Avatar>
-
-          <ul>
-            <li className="font-bold">
-              <Abbr>{user.name}</Abbr>
-            </li>
-            <li className="text-muted-foreground text-sm">
-              <Abbr>{user.email}</Abbr>
-            </li>
-          </ul>
-        </div>
-      )
-    }
-  },
-  {
-    accessorKey: 'course',
-    header: 'Curso',
-    enableHiding: false,
-    cell: ({ row }) => {
-      const { name } = row.getValue('course') as { name: string }
-      return <Abbr>{name}</Abbr>
-    }
-  },
-  {
-    accessorKey: 'status',
-    header: 'Status',
-    enableHiding: false,
-    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')}>
-          <Icon className={cn('stroke-2', color)} />
-          {status}
-        </Badge>
-      )
-    }
-  },
-  {
-    accessorKey: 'progress',
-    header: 'Progresso',
-    enableHiding: false,
-    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',
-    meta: { title: 'Cadastrado em' },
-    enableSorting: true,
-    enableHiding: true,
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
-    cell: ({ row, column }) => (
-      <DataTableColumnDatetime row={row} column={column} />
-    )
-  },
-  {
-    accessorKey: 'started_at',
-    meta: { title: 'Iniciado em' },
-    enableSorting: true,
-    enableHiding: true,
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
-    cell: ({ row, column }) => (
-      <DataTableColumnDatetime row={row} column={column} />
-    )
-  },
-  {
-    accessorKey: 'completed_at',
-    meta: { title: 'Concluído em' },
-    enableSorting: true,
-    enableHiding: true,
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
-    cell: ({ row, column }) => (
-      <DataTableColumnDatetime row={row} column={column} />
-    )
-  },
-  {
-    accessorKey: 'failed_at',
-    meta: { title: 'Reprovado em' },
-    enableSorting: true,
-    enableHiding: true,
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
-    cell: ({ row, column }) => (
-      <DataTableColumnDatetime row={row} column={column} />
-    )
-  },
-  {
-    accessorKey: 'canceled_at',
-    meta: { title: 'Cancelado em' },
-    enableSorting: true,
-    enableHiding: true,
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
-    cell: ({ row, column }) => (
-      <DataTableColumnDatetime row={row} column={column} />
-    )
+    header: DataTableColumnHeaderSelect,
+    cell: DataTableColumnSelect
   },
+  ...columns_,
   {
     id: 'actions',
-    cell: ({ row }) => <ActionMenu row={row} />
+    cell: ActionMenu
   }
 ]
 

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

@@ -0,0 +1,20 @@
+'use client'
+
+import { type ColumnDef } from '@tanstack/react-table'
+
+import {
+  DataTableColumnHeaderSelect,
+  DataTableColumnSelect
+} from '@repo/ui/components/data-table'
+import { columns as columns_, type Order } from '@repo/ui/routes/orders/columns'
+
+export type { Order }
+
+export const columns: ColumnDef<Order>[] = [
+  {
+    id: 'select',
+    header: DataTableColumnHeaderSelect,
+    cell: DataTableColumnSelect
+  },
+  ...columns_
+]

apps/admin.saladeaula.digital/app/routes/_.$orgid.orders._index/route.tsx

@@ -7,7 +7,8 @@ import { MeiliSearchFilterBuilder } from 'meilisearch-helper'
 import { DataTable } from '@repo/ui/components/data-table'
 import { Skeleton } from '@repo/ui/components/skeleton'
 import { createSearch } from '@repo/util/meili'
-import { columns, type Order } from '@repo/ui/routes/orders/columns'
+
+import { columns, type Order } from './columns'
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: 'Histórico de compras' }]

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

@@ -10,12 +10,10 @@ import {
 import { NavLink, useParams } from 'react-router'
 import { toast } from 'sonner'
 
-import { Abbr } from '@repo/ui/components/abbr'
 import {
   useDataTable,
-  DataTableColumnDatetime,
-  DataTableColumnHeader,
-  DataTableColumnCpfCnpj
+  DataTableColumnHeaderSelect,
+  DataTableColumnSelect
 } from '@repo/ui/components/data-table'
 import {
   AlertDialog,
@@ -28,9 +26,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger
 } 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,
@@ -39,92 +35,20 @@ import {
 } from '@repo/ui/components/ui/dropdown-menu'
 import { Spinner } from '@repo/ui/components/ui/spinner'
 import { initials } from '@repo/ui/lib/utils'
+import { type User, columns as columns_ } from '@repo/ui/routes/users/columns'
 
-// This type is used to define the shape of our data.
-// You can use a Zod schema here if you want.
-export type User = {
-  id: string
-  name: string
-  email: string
-  cpf?: string
-  cnpj?: string
-}
+export type { User }
 
 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 }) => {
-      const { name, email } = row.original
-
-      return (
-        <div className="flex gap-2.5 items-center">
-          <Avatar className="size-10 hidden lg:block">
-            <AvatarFallback>{initials(name)}</AvatarFallback>
-          </Avatar>
-
-          <ul>
-            <li className="font-bold">
-              <Abbr>{name}</Abbr>
-            </li>
-            <li className="text-muted-foreground text-sm">
-              <Abbr>{email}</Abbr>
-            </li>
-          </ul>
-        </div>
-      )
-    }
-  },
-  {
-    accessorKey: 'cpf',
-    header: 'CPF',
-    cell: ({ row, column }) => (
-      <DataTableColumnCpfCnpj row={row} column={column} />
-    )
-  },
-  {
-    accessorKey: 'createDate',
-    enableSorting: true,
-    meta: { title: 'Cadastrado em' },
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
-    cell: ({ row, column }) => (
-      <DataTableColumnDatetime row={row} column={column} />
-    )
-  },
-  {
-    accessorKey: 'lastLogin',
-    enableSorting: true,
-    meta: { title: 'Último acesso' },
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
-    cell: ({ row, column }) => (
-      <DataTableColumnDatetime row={row} column={column} />
-    )
+    header: DataTableColumnHeaderSelect,
+    cell: DataTableColumnSelect
   },
+  ...columns_,
   {
     id: 'actions',
-    cell: ({ row }) => <ActionMenu row={row} />
+    cell: ActionMenu
   }
 ]
 

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

@@ -1,8 +0,0 @@
-export const headers = {
-  id: 'ID',
-  name: 'Nome',
-  email: 'Email',
-  cpf: 'CPF',
-  createDate: 'Cadastrado em',
-  lastLogin: 'Último acesso'
-}

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

@@ -12,6 +12,9 @@ import { Button } from '@repo/ui/components/ui/button'
 import { Kbd } from '@repo/ui/components/ui/kbd'
 import { ExportMenu } from '@repo/ui/components/export-menu'
 import { createSearch } from '@repo/util/meili'
+import { headers } from '@repo/ui/routes/users/data'
+
+import { columns, type User } from './columns'
 
 export function meta({}: Route.MetaArgs) {
   return [
@@ -23,9 +26,6 @@ export function meta({}: Route.MetaArgs) {
   ]
 }
 
-import { headers } from './data'
-import { columns, type User } from './columns'
-
 export async function loader({ params, context, request }: Route.LoaderArgs) {
   const { searchParams } = new URL(request.url)
   const { orgid } = params