update tables

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.
-// 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 type { Order }
 
 export const columns: ColumnDef<Order>[] = [
   {
     accessorKey: 'payment_method',
     header: 'Forma de pag.',
     cell: ({ row }) => {
-      const s = row.getValue('payment_method') as string
-      const paymentMethod = methods[s] ?? s
-
-      return <>{paymentMethod}</>
+      const paymentMethod = row.getValue('payment_method') as string
+      return <>{methods[paymentMethod] ?? paymentMethod}</>
     }
   },
   {
@@ -53,35 +43,27 @@ export const columns: ColumnDef<Order>[] = [
   {
     accessorKey: 'total',
     header: 'Valor total',
-    cell: ({ row, column }) => (
-      <DataTableColumnCurrency row={row} column={column} />
-    )
+    cell: DataTableColumnCurrency
   },
   {
     accessorKey: 'create_date',
     enableSorting: true,
     meta: { title: 'Comprado em' },
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
-    cell: ({ row, column }) => (
-      <DataTableColumnDatetime row={row} column={column} />
-    )
+    header: DataTableColumnHeaderSort,
+    cell: DataTableColumnDatetime
   },
   {
     accessorKey: 'due_date',
     enableSorting: true,
     meta: { title: 'Vencimento em' },
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
-    cell: ({ row, column }) => (
-      <DataTableColumnDatetime row={row} column={column} />
-    )
+    header: DataTableColumnHeaderSort,
+    cell: DataTableColumnDatetime
   },
   {
     accessorKey: 'payment_date',
     enableSorting: true,
     meta: { title: 'Pago em' },
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
-    cell: ({ row, column }) => (
-      <DataTableColumnDatetime row={row} column={column} />
-    )
+    header: DataTableColumnHeaderSort,
+    cell: DataTableColumnDatetime
   }
 ]

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: {
-    icon: RotateCcwIcon,
-    color: 'text-orange-400 [&_svg]:text-orange-500',
-    label: 'Estornado'
+  DECLINED: {
+    icon: BanIcon,
+    color: 'text-red-400 [&_svg]:text-red-500',
+    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',
-  MANUAL: 'Depósito bancário',
+  PIX: 'Pix',
   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'
+}