add certs page

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

@@ -1,12 +1,46 @@
 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' }]
 }
 
-export default function Route({}: Route.ComponentProps) {
+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
@@ -16,6 +50,57 @@ export default function Route({}: Route.ComponentProps) {
           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
+                        }) => {
+                          return (
+                            <TableRow>
+                              <TableCell>{user.name}</TableCell>
+                              <TableCell>{course.name}</TableCell>
+                              <TableCell>
+                                <DateTime>{enrolled_at}</DateTime>
+                              </TableCell>
+                              <TableCell>
+                                <DateTime>{completed_at}</DateTime>
+                              </TableCell>
+                              <TableCell>
+                                <DateTime>{expires_at}</DateTime>
+                              </TableCell>
+                            </TableRow>
+                          )
+                        }
+                      )}
+                    </>
+                  )
+                }}
+              </Await>
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </Suspense>
   )
 }