add created_at

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.$id.submitted/route.tsx

@@ -1,6 +1,12 @@
 import type { Route } from './+types/route'
 
-import { AlertCircleIcon, CheckCircle2Icon, ClockIcon } from 'lucide-react'
+import {
+  AlertCircleIcon,
+  CheckCircle2Icon,
+  ClockIcon,
+  CalendarIcon,
+  UserIcon
+} from 'lucide-react'
 import { Link } from 'react-router'
 import { Suspense } from 'react'
 
@@ -8,6 +14,7 @@ import {
   Card,
   CardContent,
   CardDescription,
+  CardFooter,
   CardHeader,
   CardTitle
 } from '@repo/ui/components/ui/card'
@@ -70,29 +77,26 @@ export default function Route({ loaderData: { data } }: Route.ComponentProps) {
           </BreadcrumbList>
         </Breadcrumb>
 
-        <div className="lg:max-w-4xl mx-auto space-y-2.5">
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-2xl">
-                Relatório de matrículas
-              </CardTitle>
-              <CardDescription>
-                Resumo detalhado do processamento das matrículas enviadas.
-              </CardDescription>
-            </CardHeader>
+        <Await resolve={data}>
+          {({ enrolled, scheduled, sk, created_by }) => {
+            const succeed = enrolled.filter(
+              ({ status }) => status === 'success'
+            )
+            const failed = enrolled.filter(({ status }) => status === 'fail')
 
-            <CardContent className="space-y-4">
-              <Await resolve={data}>
-                {({ enrolled, scheduled }) => {
-                  const succeed = enrolled.filter(
-                    ({ status }) => status === 'success'
-                  )
-                  const failed = enrolled.filter(
-                    ({ status }) => status === 'fail'
-                  )
+            return (
+              <div className="lg:max-w-4xl mx-auto space-y-2.5">
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-2xl">
+                      Relatório de matrículas
+                    </CardTitle>
+                    <CardDescription>
+                      Resumo detalhado do processamento das matrículas enviadas.
+                    </CardDescription>
+                  </CardHeader>
 
-                  // console.log(succeed)
-                  return (
+                  <CardContent className="space-y-4 text-base">
                     <>
                       {succeed?.length > 0 && (
                         <Alert className="text-green-500 *:data-[slot=alert-description]:text-green-500/90">
@@ -101,7 +105,7 @@ export default function Route({ loaderData: { data } }: Route.ComponentProps) {
                             Matrículas adicionadas com sucesso.
                           </AlertTitle>
                           <AlertDescription>
-                            <ul className="list-decimal list-inside">
+                            <ul className="list-disc list-inside">
                               {succeed.map(({ output }) => (
                                 <li className="space-x-1">
                                   <Abbr>{output.user.name}</Abbr>
@@ -119,7 +123,7 @@ export default function Route({ loaderData: { data } }: Route.ComponentProps) {
                           <AlertCircleIcon />
                           <AlertTitle>Matrículas não processadas.</AlertTitle>
                           <AlertDescription>
-                            <ul className="list-decimal list-inside">
+                            <ul className="list-disc list-inside">
                               {failed.map(({ input_record }) => (
                                 <li className="space-x-1">
                                   <Abbr>{input_record.user.name}</Abbr>
@@ -148,13 +152,38 @@ export default function Route({ loaderData: { data } }: Route.ComponentProps) {
                         </Alert>
                       )}
                     </>
-                  )
-                }}
-              </Await>
-            </CardContent>
-          </Card>
-        </div>
+                  </CardContent>
+
+                  <CardFooter>
+                    <ul
+                      className="grid lg:grid-cols-2 gap-x-4 text-muted-foreground text-sm
+                                 *:flex *:gap-1 *:items-center"
+                    >
+                      <li>
+                        <CalendarIcon className="size-3.5" />
+                        {formatted.format(new Date(sk))}
+                      </li>
+                      {created_by && (
+                        <li>
+                          <UserIcon className="size-3.5" /> {created_by.name}
+                        </li>
+                      )}
+                    </ul>
+                  </CardFooter>
+                </Card>
+              </div>
+            )
+          }}
+        </Await>
       </div>
     </Suspense>
   )
 }
+
+const formatted = new Intl.DateTimeFormat('pt-BR', {
+  day: '2-digit',
+  month: '2-digit',
+  year: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit'
+})