add datetable cnfcnpj

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

@@ -206,14 +206,17 @@ function Course({
               <li className="flex gap-1.5">
                 <span
                   className={cn({
-                    'line-through text-muted-foreground': custom_pricing
+                    'line-through text-muted-foreground': custom_pricing,
+                    'font-bold': !custom_pricing
                   })}
                 >
                   {currency.format(metadata__unit_price)}
                 </span>
 
                 {custom_pricing && (
-                  <span>{currency.format(custom_pricing)}</span>
+                  <span className="font-bold">
+                    {currency.format(custom_pricing)}
+                  </span>
                 )}
               </li>
             </>

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

@@ -1,6 +1,6 @@
 'use client'
 
-import type { CellContext, ColumnDef } from '@tanstack/react-table'
+import type { ColumnDef } from '@tanstack/react-table'
 import { useRequest, useToggle } from 'ahooks'
 import {
   CircleXIcon,
@@ -13,7 +13,10 @@ import type { ComponentProps, MouseEvent } from 'react'
 import { toast } from 'sonner'
 
 import { Abbr } from '@repo/ui/components/abbr'
-import { DataTableColumnHeader } from '@repo/ui/components/data-table'
+import {
+  DataTableColumnDatetime,
+  DataTableColumnHeader
+} from '@repo/ui/components/data-table'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -121,7 +124,6 @@ export const columns: ColumnDef<Enrollment>[] = [
     enableHiding: false,
     cell: ({ row }) => {
       const { name } = row.getValue('course') as { name: string }
-
       return <Abbr>{name}</Abbr>
     }
   },
@@ -159,43 +161,53 @@ export const columns: ColumnDef<Enrollment>[] = [
   },
   {
     accessorKey: 'created_at',
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
     meta: { title: 'Cadastrado em' },
     enableSorting: true,
     enableHiding: true,
-    cell: cellDate
+    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    cell: ({ row, column }) => (
+      <DataTableColumnDatetime row={row} column={column} />
+    )
   },
   {
     accessorKey: 'started_at',
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
     meta: { title: 'Iniciado em' },
     enableSorting: true,
     enableHiding: true,
-    cell: cellDate
+    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    cell: ({ row, column }) => (
+      <DataTableColumnDatetime row={row} column={column} />
+    )
   },
   {
     accessorKey: 'completed_at',
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
     meta: { title: 'Concluído em' },
     enableSorting: true,
     enableHiding: true,
-    cell: cellDate
+    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    cell: ({ row, column }) => (
+      <DataTableColumnDatetime row={row} column={column} />
+    )
   },
   {
     accessorKey: 'failed_at',
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
     meta: { title: 'Reprovado em' },
     enableSorting: true,
     enableHiding: true,
-    cell: cellDate
+    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    cell: ({ row, column }) => (
+      <DataTableColumnDatetime row={row} column={column} />
+    )
   },
   {
     accessorKey: 'canceled_at',
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
     meta: { title: 'Cancelado em' },
     enableSorting: true,
     enableHiding: true,
-    cell: cellDate
+    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    cell: ({ row, column }) => (
+      <DataTableColumnDatetime row={row} column={column} />
+    )
   },
   {
     id: 'actions',
@@ -203,20 +215,6 @@ export const columns: ColumnDef<Enrollment>[] = [
   }
 ]
 
-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 <></>
-}
-
 async function getEnrollment(id: string) {
   const r = await fetch(`/~/api/enrollments/${id}`, {
     method: 'GET'

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

@@ -1,5 +1,10 @@
 'use client'
 
+import {
+  DataTableColumnDatetime,
+  DataTableColumnCurrency,
+  DataTableColumnHeader
+} from '@repo/ui/components/data-table'
 import { type ColumnDef } from '@tanstack/react-table'
 
 // This type is used to define the shape of our data.
@@ -12,14 +17,6 @@ export type Order = {
   name: 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<Order>[] = [
   {
     accessorKey: 'payment_method',
@@ -32,43 +29,35 @@ export const columns: ColumnDef<Order>[] = [
   {
     accessorKey: 'total',
     header: 'Valor total',
-    cell: ({ row }) => {
-      const amount = parseFloat(row.getValue('total'))
-      const formatted = new Intl.NumberFormat('pt-BR', {
-        style: 'currency',
-        currency: 'BRL'
-      }).format(amount)
-
-      return <div className="font-medium">{formatted}</div>
-    }
+    cell: ({ row, column }) => (
+      <DataTableColumnCurrency row={row} column={column} />
+    )
   },
   {
-    header: 'Comprado em',
-    cell: ({ row }) => {
-      const createdAt = new Date(row.original.create_date)
-      return formatted.format(createdAt)
-    }
+    accessorKey: 'create_date',
+    enableSorting: true,
+    meta: { title: 'Comprado em' },
+    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    cell: ({ row, column }) => (
+      <DataTableColumnDatetime row={row} column={column} />
+    )
   },
   {
-    header: 'Vencimento em',
-    cell: ({ row }) => {
-      try {
-        const dueDate = new Date(row.original.due_date)
-        return formatted.format(dueDate)
-      } catch {
-        return 'N/A'
-      }
-    }
+    accessorKey: 'due_date',
+    enableSorting: true,
+    meta: { title: 'Vencimento em' },
+    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    cell: ({ row, column }) => (
+      <DataTableColumnDatetime row={row} column={column} />
+    )
   },
   {
-    header: 'Pago em',
-    cell: ({ row }) => {
-      if (row.original.payment_date) {
-        const createdAt = new Date(row.original.payment_date)
-        return formatted.format(createdAt)
-      }
-
-      return <></>
-    }
+    accessorKey: 'payment_date',
+    enableSorting: true,
+    meta: { title: 'Pago em' },
+    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    cell: ({ row, column }) => (
+      <DataTableColumnDatetime row={row} column={column} />
+    )
   }
 ]

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

@@ -2,6 +2,7 @@ import type { Route } from './+types/route'
 
 import { Suspense } from 'react'
 import { Await } from 'react-router'
+import { MeiliSearchFilterBuilder } from 'meilisearch-helper'
 
 import { DataTable } from '@repo/ui/components/data-table'
 import { Skeleton } from '@repo/ui/components/skeleton'
@@ -16,18 +17,25 @@ export function meta({}: Route.MetaArgs) {
 export async function loader({ params, context, request }: Route.LoaderArgs) {
   const { searchParams } = new URL(request.url)
   const { orgid } = params
+  const query = searchParams.get('q') || ''
+  const sort = searchParams.get('sort') || 'create_date:desc'
   const page = Number(searchParams.get('p')) + 1
   const hitsPerPage = Number(searchParams.get('perPage')) || 25
 
+  let builder = new MeiliSearchFilterBuilder().where('tenant_id', '=', orgid)
+
+  const orders = createSearch({
+    index: 'betaeducacao-prod-orders',
+    filter: builder.build(),
+    sort: [sort],
+    query,
+    page,
+    hitsPerPage,
+    env: context.cloudflare.env
+  })
+
   return {
-    data: createSearch({
-      index: 'betaeducacao-prod-orders',
-      sort: ['create_date:desc'],
-      filter: `tenant_id = ${orgid}`,
-      page,
-      hitsPerPage,
-      env: context.cloudflare.env
-    })
+    data: orders
   }
 }
 
@@ -48,7 +56,7 @@ export default function Route({ loaderData: { data } }) {
         {({ hits, page, hitsPerPage, totalHits }) => {
           return (
             <DataTable
-              sort={[{ id: 'created_at', desc: true }]}
+              sort={[{ id: 'create_date', desc: true }]}
               columns={columns}
               data={hits as Order[]}
               pageIndex={page - 1}

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',

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

@@ -3,6 +3,7 @@ import type { Route } from './+types/route'
 import { PlusIcon } from 'lucide-react'
 import { Suspense } from 'react'
 import { Await, Link, useSearchParams } from 'react-router'
+import { MeiliSearchFilterBuilder } from 'meilisearch-helper'
 
 import { DataTable } from '@repo/ui/components/data-table'
 import { SearchForm } from '@repo/ui/components/search-form'
@@ -27,13 +28,16 @@ export async function loader({ params, context, request }: Route.LoaderArgs) {
   const { searchParams } = new URL(request.url)
   const { orgid } = params
   const query = searchParams.get('q') || ''
+  const sort = searchParams.get('sort') || 'createDate:desc'
   const page = Number(searchParams.get('p')) + 1
   const hitsPerPage = Number(searchParams.get('perPage')) || 25
 
+  let builder = new MeiliSearchFilterBuilder().where('tenant_id', '=', orgid)
+
   const users = createSearch({
     index: 'betaeducacao-prod-users_d2o3r5gmm4it7j',
-    sort: ['createDate:desc', 'create_date:desc'],
-    filter: `tenant_id = ${orgid}`,
+    filter: builder.build(),
+    sort: [sort],
     query,
     page,
     hitsPerPage,
@@ -61,7 +65,7 @@ export default function Route({ loaderData: { data } }) {
         {({ hits, page, hitsPerPage, totalHits }) => {
           return (
             <DataTable
-              sort={[{ id: 'created_at', desc: true }]}
+              sort={[{ id: 'createDate', desc: true }]}
               columns={columns}
               data={hits as User[]}
               pageIndex={page - 1}