117 lines
3.2 KiB
TypeScript
117 lines
3.2 KiB
TypeScript
'use client'
|
|
|
|
import { type ColumnDef } from '@tanstack/react-table'
|
|
import { BadgeCheckIcon, EllipsisIcon, PencilIcon } from 'lucide-react'
|
|
import { NavLink } from 'react-router'
|
|
|
|
import { Abbr } from '@repo/ui/components/abbr'
|
|
import {
|
|
DataTableColumnCpfCnpj,
|
|
DataTableColumnDatetime,
|
|
DataTableColumnHeaderSelect,
|
|
DataTableColumnSelect
|
|
} from '@repo/ui/components/data-table'
|
|
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
|
|
import { Button } from '@repo/ui/components/ui/button'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger
|
|
} from '@repo/ui/components/ui/dropdown-menu'
|
|
import { Spinner } from '@repo/ui/components/ui/spinner'
|
|
import { initials } from '@repo/ui/lib/utils'
|
|
import type { Org } from '@repo/ui/routes/orgs/data'
|
|
|
|
import { CopyToClipboardItem } from '../_app.users._index/columns'
|
|
|
|
export type { Org }
|
|
|
|
export const columns: ColumnDef<Org>[] = [
|
|
{
|
|
id: 'select',
|
|
header: DataTableColumnHeaderSelect,
|
|
cell: DataTableColumnSelect,
|
|
meta: { className: 'w-8' }
|
|
},
|
|
{
|
|
header: 'Empresa',
|
|
cell: ({ row }) => {
|
|
const { name, email, subscription_covered } = row.original
|
|
|
|
return (
|
|
<div className="flex gap-2.5 items-center">
|
|
<div className="relative hidden lg:block">
|
|
{subscription_covered ? (
|
|
<BadgeCheckIcon className="fill-blue-500 stroke-white absolute size-4 dark:size-3.5 -top-0 -right-0 z-2" />
|
|
) : null}
|
|
<Avatar className="size-10">
|
|
<AvatarFallback className="border">
|
|
{initials(name)}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</div>
|
|
|
|
<ul>
|
|
<li className="font-bold">
|
|
<Abbr>{name}</Abbr>
|
|
</li>
|
|
<li className="text-muted-foreground text-sm">
|
|
<Abbr>{email}</Abbr>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'cnpj',
|
|
header: 'CNPJ',
|
|
cell: DataTableColumnCpfCnpj
|
|
},
|
|
{
|
|
accessorKey: 'createDate',
|
|
header: 'Cadastrado em',
|
|
cell: DataTableColumnDatetime
|
|
},
|
|
{
|
|
id: 'action',
|
|
cell: ActionMenu,
|
|
meta: { className: 'w-12' }
|
|
}
|
|
]
|
|
|
|
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"
|
|
>
|
|
<EllipsisIcon />
|
|
<span className="sr-only">Abrir menu</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-36 *:cursor-pointer">
|
|
<DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
|
|
<NavLink to={`${row.id}`}>
|
|
{({ isPending }) => (
|
|
<>
|
|
{isPending ? <Spinner /> : <PencilIcon />}
|
|
Editar
|
|
</>
|
|
)}
|
|
</NavLink>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<CopyToClipboardItem text={row.id} />
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
)
|
|
}
|