129 lines
4.0 KiB
TypeScript
129 lines
4.0 KiB
TypeScript
import type { Route } from './+types/route'
|
|
|
|
import { Suspense } from 'react'
|
|
import { Await } from 'react-router'
|
|
|
|
import { DateTime } from '@repo/ui/components/datetime'
|
|
import { Skeleton } from '@repo/ui/components/skeleton'
|
|
import { Card, CardContent } from '@repo/ui/components/ui/card'
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow
|
|
} from '@repo/ui/components/ui/table'
|
|
import { request as req } from '@repo/util/request'
|
|
|
|
export function meta({}) {
|
|
return [{ title: 'Certificações' }]
|
|
}
|
|
|
|
const dtOptions: Intl.DateTimeFormatOptions = {
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
}
|
|
|
|
export async function loader({ context, request, params }: Route.LoaderArgs) {
|
|
const { searchParams } = new URL(request.url)
|
|
|
|
const month =
|
|
searchParams.get('month') || new Date().toISOString().slice(0, 10)
|
|
const reporting = req({
|
|
url: `/orgs/${params.orgid}/enrollments/certs?month=${month}`,
|
|
context,
|
|
request
|
|
}).then((r) => r.json())
|
|
|
|
return {
|
|
reporting
|
|
}
|
|
}
|
|
|
|
export default function Route({
|
|
loaderData: { reporting }
|
|
}: Route.ComponentProps) {
|
|
return (
|
|
<Suspense fallback={<Skeleton />}>
|
|
<div className="space-y-0.5 mb-8">
|
|
<h1 className="text-2xl font-bold tracking-tight">
|
|
Gerenciar certificações
|
|
</h1>
|
|
<p className="text-muted-foreground">
|
|
Centralize o controle das certificações dos colaboradores e acompanhe
|
|
prazos e renovações com facilidade.
|
|
</p>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className=" pointer-events-none">
|
|
<TableHead>Colaborador</TableHead>
|
|
<TableHead>Curso</TableHead>
|
|
<TableHead>Matriculado em</TableHead>
|
|
<TableHead>Concluído em</TableHead>
|
|
<TableHead>Cert. válido até</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<Await resolve={reporting}>
|
|
{({ items = [] }) => {
|
|
return (
|
|
<>
|
|
{items.map(
|
|
(
|
|
{
|
|
course,
|
|
user,
|
|
enrolled_at,
|
|
completed_at,
|
|
expires_at
|
|
},
|
|
idx
|
|
) => {
|
|
return (
|
|
<TableRow key={idx}>
|
|
<TableCell>{user.name}</TableCell>
|
|
<TableCell>{course.name}</TableCell>
|
|
<TableCell>
|
|
<DateTime options={dtOptions}>
|
|
{enrolled_at}
|
|
</DateTime>
|
|
</TableCell>
|
|
<TableCell>
|
|
<DateTime options={dtOptions}>
|
|
{completed_at}
|
|
</DateTime>
|
|
</TableCell>
|
|
<TableCell>
|
|
<DateTime options={dtOptions}>
|
|
{expires_at}
|
|
</DateTime>
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
}
|
|
)}
|
|
|
|
{items.length === 0 && (
|
|
<TableRow className="pointer-events-none">
|
|
<TableCell className="h-24 text-center" colSpan={5}>
|
|
Nenhum resultado.
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</>
|
|
)
|
|
}}
|
|
</Await>
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</Suspense>
|
|
)
|
|
}
|