112 lines
2.7 KiB
TypeScript
112 lines
2.7 KiB
TypeScript
'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 '@repo/ui/components/ui/avatar'
|
|
import { Button } from '@repo/ui/components/ui/button'
|
|
import { Spinner } from '@repo/ui/components/ui/spinner'
|
|
import { initials } from '@repo/ui/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-10 hidden lg:block">
|
|
<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>
|
|
)
|
|
}
|
|
}
|
|
]
|