update routes

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

@@ -1,25 +1,25 @@
 'use client'
 
+import { useBoolean } from 'ahooks'
 import { type ColumnDef } from '@tanstack/react-table'
+import { CheckIcon, CopyIcon, EllipsisVerticalIcon } from 'lucide-react'
 
-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'
+import { Button } from '@repo/ui/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@repo/ui/components/ui/dropdown-menu'
+import { type User, columns as columns_ } from '@repo/ui/routes/users/columns'
+import { cn } from '@repo/ui/lib/utils'
+import { useRef } from 'react'
 
-// 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
-}
+export type { User }
 
 export const columns: ColumnDef<User>[] = [
   {
@@ -27,42 +27,66 @@ export const columns: ColumnDef<User>[] = [
     header: DataTableColumnHeaderSelect,
     cell: DataTableColumnSelect
   },
+  ...columns_,
   {
-    header: 'Usuário',
-    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: 'lastLogin',
-    header: 'Último accesso',
-    cell: DataTableColumnDatetime
-  },
-  {
-    accessorKey: 'createDate',
-    header: 'Cadastrado em',
-    cell: DataTableColumnDatetime
+    id: 'actions',
+    cell: ActionMenu
   }
 ]
+
+function ActionMenu({ row }: { row: any }) {
+  return (
+    <div className="flex justify-end items-center">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            className="data-[state=open]:bg-muted text-muted-foreground cursor-pointer"
+            size="icon-sm"
+          >
+            <EllipsisVerticalIcon />
+            <span className="sr-only">Abrir menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-36 *:cursor-pointer">
+          <CopyToClipboardItem text={row.id} />
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
+
+export function CopyToClipboardItem({ text }: { text: string }) {
+  const [isCopied, { setTrue, setFalse }] = useBoolean()
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  return (
+    <DropdownMenuItem
+      onSelect={(e) => e.preventDefault()}
+      className={cn({ 'pointer-events-none': isCopied })}
+      onClick={async () => {
+        await navigator.clipboard.writeText(text)
+        setTrue()
+
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current)
+        }
+
+        timeoutRef.current = setTimeout(() => {
+          setFalse()
+          timeoutRef.current = null
+        }, 3000)
+      }}
+    >
+      {isCopied ? (
+        <>
+          <CheckIcon /> Copiado!
+        </>
+      ) : (
+        <>
+          <CopyIcon /> Copiar ID
+        </>
+      )}
+    </DropdownMenuItem>
+  )
+}

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

@@ -1,7 +1,8 @@
-import type { Route } from './+types'
+import type { Route } from './+types/route'
 
 import { Suspense } from 'react'
 import { Await, 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'
@@ -18,13 +19,16 @@ export function meta({}: Route.MetaArgs) {
 export async function loader({ context, request }: Route.LoaderArgs) {
   const { searchParams } = new URL(request.url)
   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('cnpj', 'exists', false)
+
   const users = createSearch({
     index: 'betaeducacao-prod-users_d2o3r5gmm4it7j',
-    sort: ['createDate:desc', 'create_date:desc'],
-    filter: 'cnpj NOT EXISTS',
+    filter: builder.build(),
+    sort: [sort],
     query,
     page,
     hitsPerPage,