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,
+  DataTableColumnHeaderSelect,
-  DataTableColumnHeader
+  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 {
-import { labels, statuses } from '@repo/ui/routes/enrollments/data'
+  type Enrollment,
+  columns as columns_
+} from '@repo/ui/routes/enrollments/columns'
 
-// This type is used to define the shape of our data.
+export type { Enrollment }
-// 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 const columns: ColumnDef<Enrollment>[] = [
   {
     id: 'select',
-    header: ({ table }) => (
+    header: DataTableColumnHeaderSelect,
-      <Checkbox
+    cell: DataTableColumnSelect
-        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} />
-    )
   },
+  ...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,
+  DataTableColumnHeaderSelect,
-  DataTableColumnHeader,
+  DataTableColumnSelect
-  DataTableColumnCpfCnpj
 } 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.
+export type { User }
-// You can use a Zod schema here if you want.
-export type User = {
-  id: string
-  name: string
-  email: string
-  cpf?: string
-  cnpj?: string
-}
 
 export const columns: ColumnDef<User>[] = [
   {
     id: 'select',
-    header: ({ table }) => (
+    header: DataTableColumnHeaderSelect,
-      <Checkbox
+    cell: DataTableColumnSelect
-        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} />
-    )
   },
+  ...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

apps/insights.saladeaula.digital/app/routes/_app.enrollments._index/columns.tsx

@@ -1,206 +1,39 @@
 'use client'
 
-import type { CellContext, ColumnDef } from '@tanstack/react-table'
+import type { ColumnDef } from '@tanstack/react-table'
 import { useToggle } from 'ahooks'
-import {
+import { EllipsisVerticalIcon, FileBadgeIcon } from 'lucide-react'
-  EllipsisVerticalIcon,
-  FileBadgeIcon,
-  HelpCircleIcon
-} from 'lucide-react'
 import type { ComponentProps } from 'react'
 
-import { Abbr } from '@repo/ui/components/abbr'
-import { DataTableColumnHeader } from '@repo/ui/components/data-table'
-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,
   DropdownMenuItem,
   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 { DataTableColumnHeaderSelect } from '@repo/ui/components/data-table/column-select'
-import { labels, statuses } from '@repo/ui/routes/enrollments/data'
+import {
+  columns as columns_,
+  type Enrollment
+} from '@repo/ui/routes/enrollments/columns'
 
-// This type is used to define the shape of our data.
+export type { Enrollment }
-// 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
-}
-
-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<Enrollment>[] = [
   {
     id: 'select',
-    header: ({ table }) => (
+    header: DataTableColumnHeaderSelect,
-      <Checkbox
+    cell: DataTableColumnHeaderSelect
-        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',
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
-    meta: { title: 'Cadastrado em' },
-    enableSorting: true,
-    enableHiding: true,
-    cell: cellDate
-  },
-  {
-    accessorKey: 'started_at',
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
-    meta: { title: 'Iniciado em' },
-    enableSorting: true,
-    enableHiding: true,
-    cell: cellDate
-  },
-  {
-    accessorKey: 'completed_at',
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
-    meta: { title: 'Concluído em' },
-    enableSorting: true,
-    enableHiding: true,
-    cell: cellDate
-  },
-  {
-    accessorKey: 'failed_at',
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
-    meta: { title: 'Reprovado em' },
-    enableSorting: true,
-    enableHiding: true,
-    cell: cellDate
-  },
-  {
-    accessorKey: 'canceled_at',
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
-    meta: { title: 'Cancelado em' },
-    enableSorting: true,
-    enableHiding: true,
-    cell: cellDate
   },
+  ...columns_,
   {
     id: 'actions',
-    cell: ({ row }) => <ActionMenu row={row} />
+    cell: ActionMenu
   }
 ]
 
-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 <></>
-}
-
 function ActionMenu({ row }: { row: any }) {
   const [open, { set: setOpen }] = useToggle(false)
   const cert = row.original?.cert

apps/insights.saladeaula.digital/app/routes/_app.enrollments._index/route.tsx

@@ -1,37 +1,20 @@
 import type { Route } from './+types'
 
-import { flatten } from 'flat'
+import { CalendarIcon, PlusCircleIcon } from 'lucide-react'
-import {
-  CalendarIcon,
-  ChevronDownIcon,
-  DownloadIcon,
-  FileSpreadsheetIcon,
-  FileTextIcon,
-  PlusCircleIcon
-} from 'lucide-react'
 import { MeiliSearchFilterBuilder } from 'meilisearch-helper'
 import { Suspense, useState } from 'react'
 import { Await, Outlet, useSearchParams } from 'react-router'
-import type { BookType } from 'xlsx'
-import * as XLSX from 'xlsx'
 
 import { DataTable, DataTableViewOptions } from '@repo/ui/components/data-table'
 import { FacetedFilter } from '@repo/ui/components/faceted-filter'
 import { RangeCalendarFilter } from '@repo/ui/components/range-calendar-filter'
 import { SearchForm } from '@repo/ui/components/search-form'
 import { Skeleton } from '@repo/ui/components/skeleton'
-import { Button } from '@repo/ui/components/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuTrigger
-} from '@repo/ui/components/ui/dropdown-menu'
 import { Kbd } from '@repo/ui/components/ui/kbd'
+import { ExportMenu } from '@repo/ui/components/export-menu'
 import { createSearch } from '@repo/util/meili'
-
 import { headers, sortings, statuses } from '@repo/ui/routes/enrollments/data'
+
 import { columns, type Enrollment } from './columns'
 
 export function meta({}: Route.MetaArgs) {
@@ -112,7 +95,11 @@ export default function Route({ loaderData: { data } }) {
               {selectedRows.length ? (
                 <>
                   <div className="flex gap-2.5 items-center">
-                    <ExportMenu headers={headers} selectedRows={selectedRows} />
+                    <ExportMenu
+                      name="enrollments"
+                      headers={headers}
+                      selectedRows={selectedRows}
+                    />
                   </div>
                 </>
               ) : (
@@ -200,7 +187,7 @@ export default function Route({ loaderData: { data } }) {
                     </div>
 
                     <div className="lg:ml-auto flex gap-2.5">
-                      <DataTableViewOptions className="flex-1" />
+                      <DataTableViewOptions />
                     </div>
                   </div>
                 </>
@@ -233,54 +220,3 @@ function useRangeParams() {
     }
   }
 }
-
-export function ExportMenu({
-  headers,
-  selectedRows = []
-}: {
-  headers: Record<string, string>
-  selectedRows: object[]
-}) {
-  const exportFile = (bookType: BookType) => () => {
-    if (!selectedRows.length) {
-      return
-    }
-    const now = new Date()
-    const header = Object.keys(headers)
-    const data = selectedRows.map((data) => {
-      const obj: Record<string, string> = flatten(data)
-      return Object.fromEntries(header.map((k) => [k, obj?.[k]]))
-    })
-    const workbook = XLSX.utils.book_new()
-    const worksheet = XLSX.utils.json_to_sheet(data, { header })
-
-    XLSX.utils.sheet_add_aoa(worksheet, [Object.values(headers)], {
-      origin: 'A1'
-    })
-    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
-    XLSX.writeFile(workbook, `users_${+now}.${bookType}`, {
-      bookType,
-      compression: true
-    })
-  }
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" className="cursor-pointer">
-          <DownloadIcon /> Baixar <ChevronDownIcon />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-52" align="start">
-        <DropdownMenuGroup className="*:cursor-pointer">
-          <DropdownMenuItem onClick={exportFile('xlsx')}>
-            <FileSpreadsheetIcon /> Microsoft Excel (.xlsx)
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={exportFile('csv')}>
-            <FileTextIcon /> CSV (.csv)
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}

apps/insights.saladeaula.digital/app/routes/_app.orgs._index/columns.tsx

@@ -1,30 +1,26 @@
 'use client'
 
-import { formatCNPJ } from '@brazilian-utils/brazilian-utils'
 import { type ColumnDef } from '@tanstack/react-table'
 
 import { Abbr } from '@repo/ui/components/abbr'
 import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
 import { initials } from '@repo/ui/lib/utils'
+import {
+  DataTableColumnCpfCnpj,
+  DataTableColumnDatetime,
+  DataTableColumnHeaderSelect,
+  DataTableColumnSelect
+} from '@repo/ui/components/data-table'
+import type { Org } from '@repo/ui/routes/orgs/data'
 
-// This type is used to define the shape of our data.
+export type { Org }
-// You can use a Zod schema here if you want.
-export type Org = {
-  id: string
-  name: string
-  email: string
-  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<Org>[] = [
+  {
+    id: 'select',
+    header: DataTableColumnHeaderSelect,
+    cell: DataTableColumnSelect
+  },
   {
     header: 'Empresa',
     cell: ({ row }) => {
@@ -49,25 +45,13 @@ export const columns: ColumnDef<Org>[] = [
     }
   },
   {
+    accessorKey: 'cnpj',
     header: 'CNPJ',
-    cell: ({ row }) => {
+    cell: DataTableColumnCpfCnpj
-      const { cnpj } = row.original
-      return <>{formatCNPJ(cnpj)}</>
-    }
   },
   {
+    accessorKey: 'createDate',
     header: 'Cadastrado em',
-    meta: {
+    cell: DataTableColumnDatetime
-      className: 'w-1/12'
-    },
-    cell: ({ row }) => {
-      const { createDate } = row.original
-
-      if (!createDate) {
-        return <></>
-      }
-
-      return formatted.format(new Date(createDate))
-    }
   }
 ]

apps/insights.saladeaula.digital/app/routes/_app.payments._index/columns.tsx

@@ -1,17 +1,23 @@
 'use client'
 
-import { columns as columns_, type Order } from '@repo/ui/routes/orders/columns'
-
-import { formatCNPJ, formatCPF } from '@brazilian-utils/brazilian-utils'
 import { type ColumnDef } from '@tanstack/react-table'
 
 import { Abbr } from '@repo/ui/components/abbr'
 import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
 import { initials } from '@repo/ui/lib/utils'
-
+import {
-export type { Order }
+  DataTableColumnCpfCnpj,
+  DataTableColumnHeaderSelect,
+  DataTableColumnSelect
+} from '@repo/ui/components/data-table'
+import { columns as columns_, type Order } from '@repo/ui/routes/orders/columns'
 
 export const columns: ColumnDef<Order>[] = [
+  {
+    id: 'select',
+    header: DataTableColumnHeaderSelect,
+    cell: DataTableColumnSelect
+  },
   {
     header: 'Comprador',
     cell: ({ row }) => {
@@ -36,20 +42,11 @@ export const columns: ColumnDef<Order>[] = [
     }
   },
   {
+    accessorKey: 'cnpj_cpf',
     header: 'CNPJ/CPF',
-    cell: ({ row }) => {
+    // @ts-ignore
-      const { cpf, cnpj } = row.original
+    accessorFn: ({ cpf, cnpj }) => cpf ?? cnpj,
-
+    cell: DataTableColumnCpfCnpj
-      if (cpf) {
-        return <>{formatCPF(cpf)}</>
-      }
-
-      if (cnpj) {
-        return <>{formatCNPJ(cnpj)}</>
-      }
-
-      return <></>
-    }
   },
   ...columns_
 ]

apps/insights.saladeaula.digital/app/routes/_app.users._index/columns.tsx

@@ -1,9 +1,14 @@
 'use client'
 
-import { formatCPF } from '@brazilian-utils/brazilian-utils'
 import { type ColumnDef } from '@tanstack/react-table'
 
 import { Abbr } from '@repo/ui/components/abbr'
+import {
+  DataTableColumnDatetime,
+  DataTableColumnSelect,
+  DataTableColumnCpfCnpj,
+  DataTableColumnHeaderSelect
+} from '@repo/ui/components/data-table'
 import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
 import { initials } from '@repo/ui/lib/utils'
 
@@ -16,15 +21,12 @@ export type User = {
   cpf?: 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: DataTableColumnHeaderSelect,
+    cell: DataTableColumnSelect
+  },
   {
     header: 'Usuário',
     cell: ({ row }) => {
@@ -49,37 +51,18 @@ export const columns: ColumnDef<User>[] = [
     }
   },
   {
+    accessorKey: 'cpf',
     header: 'CPF',
-    cell: ({ row }) => {
+    cell: DataTableColumnCpfCnpj
-      const { cpf } = row.original
-
-      if (cpf) {
-        return <>{formatCPF(cpf)}</>
-      }
-
-      return <></>
-    }
   },
   {
+    accessorKey: 'lastLogin',
     header: 'Último accesso',
-    cell: ({ row }) => {
+    cell: DataTableColumnDatetime
-      // 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',
     header: 'Cadastrado em',
-    meta: {
+    cell: DataTableColumnDatetime
-      className: 'w-1/12'
-    },
-    cell: ({ row }) => {
-      const created_at = new Date(row.original.createDate)
-      return formatted.format(created_at)
-    }
   }
 ]

packages/ui/src/components/data-table/column-cpfcnpj.tsx

@@ -12,14 +12,6 @@ interface DataTableColumnDatetimeProps<TData, TValue>
   column: Column<TData, TValue>
 }
 
-const formatted = new Intl.DateTimeFormat('pt-BR', {
-  day: '2-digit',
-  month: '2-digit',
-  year: 'numeric',
-  hour: '2-digit',
-  minute: '2-digit'
-})
-
 export function DataTableColumnCpfCnpj<TData, TValue>({
   row,
   column

packages/ui/src/components/data-table/column-header-sort.tsx

@@ -8,15 +8,15 @@ import {
 import { Button } from '@repo/ui/components/ui/button'
 import { cn } from '@repo/ui/lib/utils'
 
-interface DataTableColumnHeaderProps<TData, TValue>
+interface DataTableColumnHeaderSortProps<TData, TValue>
   extends React.HTMLAttributes<HTMLDivElement> {
   column: Column<TData, TValue>
 }
 
-export function DataTableColumnHeader<TData, TValue>({
+export function DataTableColumnHeaderSort<TData, TValue>({
   column,
   className
-}: DataTableColumnHeaderProps<TData, TValue>) {
+}: DataTableColumnHeaderSortProps<TData, TValue>) {
   // @ts-ignore
   const title = column.columnDef?.meta?.title ?? column.id
 

packages/ui/src/components/data-table/column-select.tsx

@@ -0,0 +1,43 @@
+import type { Table, Row } from '@tanstack/react-table'
+
+import { Checkbox } from '../ui/checkbox'
+
+interface DataTableColumnHeaderSelectProps<TData>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  table: Table<TData>
+}
+
+export function DataTableColumnHeaderSelect<TData>({
+  table
+}: DataTableColumnHeaderSelectProps<TData>) {
+  return (
+    <Checkbox
+      checked={
+        table.getIsAllPageRowsSelected() ||
+        (table.getIsSomePageRowsSelected() && 'indeterminate')
+      }
+      onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+      className="cursor-pointer"
+      aria-label="Selecionar tudo"
+    />
+  )
+}
+
+interface DataTableColumnSelectProps<TData>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  row: Row<TData>
+}
+
+export function DataTableColumnSelect<TData>({
+  row
+}: DataTableColumnSelectProps<TData>) {
+  return (
+    <Checkbox
+      checked={row.getIsSelected()}
+      disabled={!row.getCanSelect()}
+      onCheckedChange={(value) => row.toggleSelected(!!value)}
+      className="cursor-pointer"
+      aria-label="Selecionar linha"
+    />
+  )
+}

packages/ui/src/components/data-table/index.ts

@@ -1,4 +1,8 @@
-export { DataTableColumnHeader } from './column-header'
+export { DataTableColumnHeaderSort } from './column-header-sort'
+export {
+  DataTableColumnHeaderSelect,
+  DataTableColumnSelect
+} from './column-select'
 export { DataTableColumnDatetime } from './column-datetime'
 export { DataTableColumnCpfCnpj } from './column-cpfcnpj'
 export { DataTableColumnCurrency } from './column-currency'

packages/ui/src/components/data-table/view-options.tsx

@@ -15,7 +15,7 @@ import { useDataTable } from './data-table'
 export function DataTableViewOptions<TData>({
   className
 }: {
-  className: string
+  className?: string
 }) {
   const { table } = useDataTable()
 

packages/ui/src/routes/enrollments/columns.tsx

@@ -0,0 +1,127 @@
+'use client'
+
+import type { ColumnDef } from '@tanstack/react-table'
+import { HelpCircleIcon } from 'lucide-react'
+
+import { Badge } from '@repo/ui/components/ui/badge'
+import { Abbr } from '@repo/ui/components/abbr'
+import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
+import { Progress } from '@repo/ui/components/ui/progress'
+import {
+  DataTableColumnDatetime,
+  DataTableColumnHeaderSort
+} from '@repo/ui/components/data-table'
+import { cn, initials } from '@repo/ui/lib/utils'
+
+import { labels, statuses, type Enrollment } from './data'
+
+export type { Enrollment }
+
+export const columns: ColumnDef<Enrollment>[] = [
+  {
+    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: DataTableColumnHeaderSort,
+    cell: DataTableColumnDatetime
+  },
+  {
+    accessorKey: 'started_at',
+    meta: { title: 'Iniciado em' },
+    enableSorting: true,
+    enableHiding: true,
+    header: DataTableColumnHeaderSort,
+    cell: DataTableColumnDatetime
+  },
+  {
+    accessorKey: 'completed_at',
+    meta: { title: 'Concluído em' },
+    enableSorting: true,
+    enableHiding: true,
+    header: DataTableColumnHeaderSort,
+    cell: DataTableColumnDatetime
+  },
+  {
+    accessorKey: 'failed_at',
+    meta: { title: 'Reprovado em' },
+    enableSorting: true,
+    enableHiding: true,
+    header: DataTableColumnHeaderSort,
+    cell: DataTableColumnDatetime
+  },
+  {
+    accessorKey: 'canceled_at',
+    meta: { title: 'Cancelado em' },
+    enableSorting: true,
+    enableHiding: true,
+    header: DataTableColumnHeaderSort,
+    cell: DataTableColumnDatetime
+  }
+]

packages/ui/src/routes/enrollments/data.tsx

@@ -7,6 +7,22 @@ import {
   type LucideIcon
 } from 'lucide-react'
 
+// 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 const statuses: Record<
   string,
   { icon: LucideIcon; color?: string; label: string }

packages/ui/src/routes/orders/columns.tsx

@@ -3,7 +3,7 @@
 import {
   DataTableColumnDatetime,
   DataTableColumnCurrency,
-  DataTableColumnHeader
+  DataTableColumnHeaderSort
 } from '@repo/ui/components/data-table'
 import { type ColumnDef } from '@tanstack/react-table'
 import { HelpCircleIcon } from 'lucide-react'
@@ -11,27 +11,17 @@ import { HelpCircleIcon } from 'lucide-react'
 import { cn } from '@repo/ui/lib/utils'
 import { Badge } from '@repo/ui/components/ui/badge'
 
-import { labels, methods, statuses } from './data'
+import { labels, methods, statuses, type Order } from './data'
 
-// This type is used to define the shape of our data.
+export type { Order }
-// You can use a Zod schema here if you want.
-export type Order = {
-  id: string
-  total: number
-  status: 'PENDING' | 'PAID' | 'DECLINED' | 'EXPIRED' | 'REFUNDED' | 'CANCELED'
-  payment_method: 'PIX' | 'CREDIT_CARD' | 'MANUAL' | 'BANK_SLIP'
-  name: string
-}
 
 export const columns: ColumnDef<Order>[] = [
   {
     accessorKey: 'payment_method',
     header: 'Forma de pag.',
     cell: ({ row }) => {
-      const s = row.getValue('payment_method') as string
+      const paymentMethod = row.getValue('payment_method') as string
-      const paymentMethod = methods[s] ?? s
+      return <>{methods[paymentMethod] ?? paymentMethod}</>
-
-      return <>{paymentMethod}</>
     }
   },
   {
@@ -53,35 +43,27 @@ export const columns: ColumnDef<Order>[] = [
   {
     accessorKey: 'total',
     header: 'Valor total',
-    cell: ({ row, column }) => (
+    cell: DataTableColumnCurrency
-      <DataTableColumnCurrency row={row} column={column} />
-    )
   },
   {
     accessorKey: 'create_date',
     enableSorting: true,
     meta: { title: 'Comprado em' },
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    header: DataTableColumnHeaderSort,
-    cell: ({ row, column }) => (
+    cell: DataTableColumnDatetime
-      <DataTableColumnDatetime row={row} column={column} />
-    )
   },
   {
     accessorKey: 'due_date',
     enableSorting: true,
     meta: { title: 'Vencimento em' },
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    header: DataTableColumnHeaderSort,
-    cell: ({ row, column }) => (
+    cell: DataTableColumnDatetime
-      <DataTableColumnDatetime row={row} column={column} />
-    )
   },
   {
     accessorKey: 'payment_date',
     enableSorting: true,
     meta: { title: 'Pago em' },
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    header: DataTableColumnHeaderSort,
-    cell: ({ row, column }) => (
+    cell: DataTableColumnDatetime
-      <DataTableColumnDatetime row={row} column={column} />
-    )
   }
 ]

packages/ui/src/routes/orders/data.tsx

@@ -8,6 +8,17 @@ import {
   type LucideIcon
 } from 'lucide-react'
 
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export type Order = {
+  id: string
+  total: number
+  status: 'PENDING' | 'PAID' | 'DECLINED' | 'EXPIRED' | 'REFUNDED' | 'CANCELED'
+  payment_method: 'PIX' | 'CREDIT_CARD' | 'BANK_SLIP' | 'MANUAL'
+  name: string
+  email: string
+}
+
 export const statuses: Record<
   string,
   { icon: LucideIcon; color?: string; label: string }
@@ -22,25 +33,25 @@ export const statuses: Record<
     color: 'text-green-400 [&_svg]:text-green-500',
     label: 'Pago'
   },
-  REFUNDED: {
+  DECLINED: {
-    icon: RotateCcwIcon,
+    icon: BanIcon,
-    color: 'text-orange-400 [&_svg]:text-orange-500',
+    color: 'text-red-400 [&_svg]:text-red-500',
-    label: 'Estornado'
+    label: 'Negado'
   },
   EXPIRED: {
     icon: ClockAlertIcon,
     color: 'text-orange-400 [&_svg]:text-orange-500',
     label: 'Expirado'
   },
+  REFUNDED: {
+    icon: RotateCcwIcon,
+    color: 'text-orange-400 [&_svg]:text-orange-500',
+    label: 'Estornado'
+  },
   CANCELED: {
     icon: CircleXIcon,
     color: 'text-red-400 [&_svg]:text-red-500',
     label: 'Cancelado'
-  },
-  DECLINED: {
-    icon: BanIcon,
-    color: 'text-red-400 [&_svg]:text-red-500',
-    label: 'Negado'
   }
 }
 
@@ -54,8 +65,8 @@ export const labels: Record<string, string> = {
 }
 
 export const methods: Record<string, string> = {
-  BANK_SLIP: 'Boleto bancário',
+  PIX: 'Pix',
-  MANUAL: 'Depósito bancário',
   CREDIT_CARD: 'Cartão de crédito',
-  PIX: 'Pix'
+  BANK_SLIP: 'Boleto bancário',
+  MANUAL: 'Depósito bancário'
 }

packages/ui/src/routes/orgs/data.tsx

@@ -0,0 +1,8 @@
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export type Org = {
+  id: string
+  name: string
+  email: string
+  cnpj?: string
+}

packages/ui/src/routes/users/columns.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { type ColumnDef } from '@tanstack/react-table'
+
+import { Abbr } from '@repo/ui/components/abbr'
+import {
+  DataTableColumnDatetime,
+  DataTableColumnHeaderSort,
+  DataTableColumnCpfCnpj
+} from '@repo/ui/components/data-table'
+import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
+import { initials } from '@repo/ui/lib/utils'
+import type { User } from '@repo/ui/routes/users/data'
+
+export type { User }
+
+export const columns: ColumnDef<User>[] = [
+  {
+    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: DataTableColumnCpfCnpj
+  },
+  {
+    accessorKey: 'createDate',
+    enableSorting: true,
+    meta: { title: 'Cadastrado em' },
+    header: DataTableColumnHeaderSort,
+    cell: DataTableColumnDatetime
+  },
+  {
+    accessorKey: 'lastLogin',
+    enableSorting: true,
+    meta: { title: 'Último acesso' },
+    header: DataTableColumnHeaderSort,
+    cell: DataTableColumnDatetime
+  }
+]

packages/ui/src/routes/users/data.tsx

@@ -0,0 +1,18 @@
+// 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 const headers = {
+  id: 'ID',
+  name: 'Nome',
+  email: 'Email',
+  cpf: 'CPF',
+  createDate: 'Cadastrado em',
+  lastLogin: 'Último acesso'
+}