add other projects

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

@@ -0,0 +1,111 @@
+'use client'
+
+import { formatCPF } from '@brazilian-utils/brazilian-utils'
+import { type ColumnDef } from '@tanstack/react-table'
+import { ArrowRight } from 'lucide-react'
+import { NavLink } from 'react-router'
+
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
+import { initials } from '@/lib/utils'
+
+// 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
+}
+
+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>[] = [
+  {
+    header: 'Colaborador',
+    cell: ({ row }) => {
+      const { name, email } = row.original
+
+      return (
+        <div className="flex gap-2.5 items-center">
+          <Avatar className="size-12">
+            <AvatarFallback>{initials(name)}</AvatarFallback>
+          </Avatar>
+
+          <ul>
+            <li className="font-bold truncate max-w-62">{name}</li>
+            <li className="text-muted-foreground text-sm truncate max-w-92">
+              {email}
+            </li>
+          </ul>
+        </div>
+      )
+    }
+  },
+  {
+    header: 'CPF',
+    cell: ({ row }) => {
+      const { cpf } = row.original
+
+      if (cpf) {
+        return <>{formatCPF(cpf)}</>
+      }
+
+      return <></>
+    }
+  },
+  {
+    header: 'Cadastrado em',
+    cell: ({ row }) => {
+      const created_at = new Date(row.original.createDate)
+      return formatted.format(created_at)
+    }
+  },
+  {
+    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 <></>
+    }
+  },
+  {
+    header: ' ',
+    cell: ({ row }) => {
+      return (
+        <div className="flex justify-end">
+          <Button
+            variant="outline"
+            size="sm"
+            className="relative group"
+            asChild
+          >
+            <NavLink to={`${row.original?.id}`}>
+              {({ isPending }) => (
+                <>
+                  {isPending && <Spinner className="absolute" />}
+                  <span className="group-[.pending]:invisible">
+                    Editar
+                  </span>{' '}
+                  <ArrowRight className="group-[.pending]:invisible" />
+                </>
+              )}
+            </NavLink>
+          </Button>
+        </div>
+      )
+    }
+  }
+]

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

@@ -0,0 +1,100 @@
+import type { Route } from './+types'
+
+import { PlusIcon } from 'lucide-react'
+import { Suspense } from 'react'
+import { Await, Link, useSearchParams } from 'react-router'
+
+import { DataTable } from '@/components/data-table'
+import { SearchForm } from '@/components/search-form'
+import { Skeleton } from '@/components/skeleton'
+import { Button } from '@/components/ui/button'
+import { Kbd } from '@/components/ui/kbd'
+import { createSearch } from '@/lib/meili'
+import { columns, type User } from './columns'
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: 'Colaboradores' },
+    {
+      name: 'description',
+      content: 'Adicione colaboradores e organize sua equipe de forma prática'
+    }
+  ]
+}
+
+export async function loader({ params, context, request }: Route.LoaderArgs) {
+  const { searchParams } = new URL(request.url)
+  const { orgid } = params
+  const query = searchParams.get('q') || ''
+  const page = Number(searchParams.get('p')) + 1
+  const hitsPerPage = Number(searchParams.get('perPage')) || 25
+
+  const users = createSearch({
+    index: 'betaeducacao-prod-users_d2o3r5gmm4it7j',
+    sort: ['createDate:desc', 'create_date:desc'],
+    filter: `tenant_id = ${orgid}`,
+    query,
+    page,
+    hitsPerPage,
+    env: context.cloudflare.env
+  })
+
+  return { data: users }
+}
+
+export default function Route({ loaderData: { data } }) {
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  return (
+    <Suspense fallback={<Skeleton />}>
+      <div className="space-y-0.5 mb-8">
+        <h1 className="text-2xl font-bold tracking-tight">
+          Gerenciar colaboradores
+        </h1>
+        <p className="text-muted-foreground">
+          Adicione colaboradores e organize sua equipe de forma prática.
+        </p>
+      </div>
+
+      <Await resolve={data}>
+        {({ hits, page, hitsPerPage, totalHits }) => {
+          return (
+            <DataTable
+              columns={columns}
+              data={hits as User[]}
+              pageIndex={page - 1}
+              pageSize={hitsPerPage}
+              rowCount={totalHits}
+            >
+              <div className="flex flex-col lg:flex-row justify-between gap-2.5 mb-2.5">
+                <div className="2xl:w-1/4">
+                  <SearchForm
+                    placeholder={
+                      <>
+                        Pressione <Kbd className="border font-mono">/</Kbd> para
+                        pesquisar...
+                      </>
+                    }
+                    defaultValue={searchParams.get('q') || ''}
+                    onChange={(value) =>
+                      setSearchParams((searchParams) => {
+                        searchParams.set('q', value)
+                        searchParams.delete('p')
+                        return searchParams
+                      })
+                    }
+                  />
+                </div>
+                <Button variant="outline" asChild>
+                  <Link to="add">
+                    <PlusIcon /> Adicionar colaborador
+                  </Link>
+                </Button>
+              </div>
+            </DataTable>
+          )
+        }}
+      </Await>
+    </Suspense>
+  )
+}