376 lines
10 KiB
TypeScript
376 lines
10 KiB
TypeScript
'use client'
|
|
|
|
import type { CellContext, ColumnDef } from '@tanstack/react-table'
|
|
import { useToggle } from 'ahooks'
|
|
import {
|
|
CircleXIcon,
|
|
EllipsisVerticalIcon,
|
|
FileBadgeIcon,
|
|
HelpCircleIcon,
|
|
LockOpenIcon
|
|
} from 'lucide-react'
|
|
import { NavLink, useParams } from 'react-router'
|
|
import { toast } from 'sonner'
|
|
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger
|
|
} from '@repo/ui/components/ui/alert-dialog'
|
|
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
|
|
import { Badge } from '@repo/ui/components/ui/badge'
|
|
import { Button } from '@repo/ui/components/ui/button'
|
|
import { Checkbox } from '@repo/ui/components/ui/checkbox'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger
|
|
} from '@repo/ui/components/ui/dropdown-menu'
|
|
import { Progress } from '@repo/ui/components/ui/progress'
|
|
import { Spinner } from '@repo/ui/components/ui/spinner'
|
|
import { cn, initials } from '@repo/ui/lib/utils'
|
|
|
|
import { Abbr } from '@/components/abbr'
|
|
import { DataTableColumnHeader } from '@/components/data-table/column-header'
|
|
import { useDataTable } from '@/components/data-table/data-table'
|
|
import { labels, statuses } from './data'
|
|
|
|
// This type is used to define the shape of our data.
|
|
// You can use a Zod schema here if you want.
|
|
type Course = {
|
|
id: string
|
|
name: string
|
|
}
|
|
|
|
export type Enrollment = {
|
|
id: string
|
|
name: string
|
|
course: Course
|
|
status: string
|
|
progress: string
|
|
created_at: 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<Enrollment>[] = [
|
|
{
|
|
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"
|
|
/>
|
|
)
|
|
},
|
|
{
|
|
accessorKey: 'user',
|
|
header: 'Colaborador',
|
|
enableHiding: false,
|
|
cell: ({ row }) => {
|
|
const user = row.getValue('user') as { name: string; email: string }
|
|
|
|
return (
|
|
<div className="flex gap-2.5 items-center">
|
|
<Avatar className="size-10 hidden lg:block">
|
|
<AvatarFallback>{initials(user.name)}</AvatarFallback>
|
|
</Avatar>
|
|
|
|
<ul>
|
|
<li className="font-bold">
|
|
<Abbr>{user.name}</Abbr>
|
|
</li>
|
|
<li className="text-muted-foreground text-sm">
|
|
<Abbr>{user.email}</Abbr>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'course',
|
|
header: 'Curso',
|
|
enableHiding: false,
|
|
cell: ({ row }) => {
|
|
const { name } = row.getValue('course') as { name: string }
|
|
|
|
return <Abbr>{name}</Abbr>
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'status',
|
|
header: 'Status',
|
|
enableHiding: false,
|
|
cell: ({ row }) => {
|
|
const s = row.getValue('status') as string
|
|
const status = labels[s] ?? s
|
|
const { icon: Icon, color } = statuses?.[s] ?? { icon: HelpCircleIcon }
|
|
|
|
return (
|
|
<Badge variant="outline" className={cn(color, ' px-1.5')}>
|
|
<Icon className={cn('stroke-2', color)} />
|
|
{status}
|
|
</Badge>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'progress',
|
|
header: 'Progresso',
|
|
enableHiding: false,
|
|
cell: ({ row }) => {
|
|
const progress = row.getValue('progress')
|
|
|
|
return (
|
|
<div className="flex gap-2.5 items-center ">
|
|
<Progress value={Number(progress)} className="w-32" />
|
|
<span className="text-xs">{String(progress)}%</span>
|
|
</div>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'created_at',
|
|
header: ({ column }) => <DataTableColumnHeader column={column} />,
|
|
meta: { title: 'Cadastrado em' },
|
|
enableSorting: true,
|
|
enableHiding: true,
|
|
cell: cellDate
|
|
},
|
|
{
|
|
accessorKey: 'started_at',
|
|
header: ({ column }) => <DataTableColumnHeader column={column} />,
|
|
meta: { title: 'Iniciado em' },
|
|
enableSorting: true,
|
|
enableHiding: true,
|
|
cell: cellDate
|
|
},
|
|
{
|
|
accessorKey: 'completed_at',
|
|
header: ({ column }) => <DataTableColumnHeader column={column} />,
|
|
meta: { title: 'Concluído em' },
|
|
enableSorting: true,
|
|
enableHiding: true,
|
|
cell: cellDate
|
|
},
|
|
{
|
|
accessorKey: 'failed_at',
|
|
header: ({ column }) => <DataTableColumnHeader column={column} />,
|
|
meta: { title: 'Reprovado em' },
|
|
enableSorting: true,
|
|
enableHiding: true,
|
|
cell: cellDate
|
|
},
|
|
{
|
|
accessorKey: 'canceled_at',
|
|
header: ({ column }) => <DataTableColumnHeader column={column} />,
|
|
meta: { title: 'Cancelado em' },
|
|
enableSorting: true,
|
|
enableHiding: true,
|
|
cell: cellDate
|
|
},
|
|
{
|
|
id: 'actions',
|
|
cell: ({ row }) => <ActionMenu row={row} />
|
|
}
|
|
]
|
|
|
|
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 <></>
|
|
}
|
|
|
|
function ActionMenu({ row }: { row: any }) {
|
|
const cert = row.original?.cert
|
|
const progress = row.getValue('progress')
|
|
|
|
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-46 *:cursor-pointer">
|
|
<DownloadItem id={row.id} disabled={!cert} />
|
|
<DropdownMenuSeparator />
|
|
<RemoveDedupItem id={row.id} disabled={progress > 0} />
|
|
<CancelItem id={row.id} disabled={progress > 0} />
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function DownloadItem({ id, ...props }: { id: string }) {
|
|
const [loading, { set }] = useToggle(false)
|
|
|
|
const download = async (e) => {
|
|
e.preventDefault()
|
|
set(true)
|
|
const r = await fetch(`/~/api/enrollments/${id}/download`, {
|
|
method: 'GET'
|
|
})
|
|
|
|
if (r.ok) {
|
|
const { presigned_url } = (await r.json()) as { presigned_url: string }
|
|
window.open(presigned_url, '_blank')
|
|
}
|
|
set(false)
|
|
}
|
|
|
|
return (
|
|
<DropdownMenuItem onSelect={download} {...props}>
|
|
{loading ? <Spinner /> : <FileBadgeIcon />} Baixar certificado
|
|
</DropdownMenuItem>
|
|
)
|
|
}
|
|
|
|
function RemoveDedupItem({ id, ...props }: { id: string }) {
|
|
const [loading, { set }] = useToggle(false)
|
|
const { orgid } = useParams()
|
|
const { table } = useDataTable<Enrollment>()
|
|
|
|
const cancel = async (e) => {
|
|
e.preventDefault()
|
|
set(true)
|
|
|
|
const r = await fetch(`/~/api/enrollments/${orgid}/dedupwindow`, {
|
|
method: 'DELETE'
|
|
})
|
|
|
|
if (r.ok) {
|
|
toast.info('A proteção contra duplicação foi removida')
|
|
// @ts-ignore
|
|
table.options.meta?.removeRow?.(id)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<AlertDialog>
|
|
<AlertDialogTrigger asChild>
|
|
<DropdownMenuItem
|
|
variant="destructive"
|
|
onSelect={(e) => e.preventDefault()}
|
|
{...props}
|
|
>
|
|
<LockOpenIcon /> Remover proteção
|
|
</DropdownMenuItem>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Tem certeza absoluta?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Esta ação não pode ser desfeita. Isso remove a proteção contra
|
|
duplicação permanentemente desta matrícula.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter className="*:cursor-pointer">
|
|
<AlertDialogCancel>Cancelar</AlertDialogCancel>
|
|
<AlertDialogAction asChild>
|
|
<Button onClick={cancel} disabled={loading} variant="destructive">
|
|
{loading ? <Spinner /> : null} Continuar
|
|
</Button>
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
)
|
|
}
|
|
|
|
function CancelItem({ id, ...props }: { id: string }) {
|
|
const [loading, { set }] = useToggle(false)
|
|
const { orgid } = useParams()
|
|
const { table } = useDataTable<Enrollment>()
|
|
|
|
const cancel = async (e) => {
|
|
e.preventDefault()
|
|
set(true)
|
|
|
|
const r = await fetch(`/~/api/enrollments/${orgid}/cancel`, {
|
|
method: 'PATCH'
|
|
})
|
|
|
|
if (r.ok) {
|
|
toast.info('A matrícula foi cancelada')
|
|
// @ts-ignore
|
|
table.options.meta?.removeRow?.(id)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<AlertDialog>
|
|
<AlertDialogTrigger asChild>
|
|
<DropdownMenuItem
|
|
variant="destructive"
|
|
onSelect={(e) => e.preventDefault()}
|
|
{...props}
|
|
>
|
|
<CircleXIcon /> Cancelar
|
|
</DropdownMenuItem>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Tem certeza absoluta?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Esta ação não pode ser desfeita. Isso cancelar permanentemente a
|
|
matrícula deste colaborador.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter className="*:cursor-pointer">
|
|
<AlertDialogCancel>Cancelar</AlertDialogCancel>
|
|
<AlertDialogAction asChild>
|
|
<Button onClick={cancel} disabled={loading} variant="destructive">
|
|
{loading ? <Spinner /> : null} Continuar
|
|
</Button>
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
)
|
|
}
|