finish timeline

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

@@ -90,8 +90,7 @@ export default function Route({ loaderData: { data } }: Route.ComponentProps) {
           </BreadcrumbList>
         </Breadcrumb>
 
-        {/*<Await resolve={data} errorElement={<NotFound />}>*/}
+        <Await resolve={data} errorElement={<NotFound />}>
-        <Await resolve={data}>
           {({ enrolled, scheduled, sk, created_by }) => {
             const succeed = enrolled?.filter(
               ({ status }) => status === 'success'
@@ -197,12 +196,12 @@ export default function Route({ loaderData: { data } }: Route.ComponentProps) {
 
                   <CardFooter>
                     <ul
-                      className="grid lg:grid-cols-2 gap-x-2.5 text-muted-foreground text-sm
+                      className="lg:flex gap-2.5 text-muted-foreground text-sm
                                  *:flex *:gap-1 *:items-center"
                     >
                       <li>
                         <CalendarIcon className="size-3.5" />
-                        {formatted.format(new Date(sk))}
+                        {datetime.format(new Date(sk))}
                       </li>
                       <li>
                         <UserIcon className="size-3.5" /> {created_by.name}
@@ -219,7 +218,7 @@ export default function Route({ loaderData: { data } }: Route.ComponentProps) {
   )
 }
 
-const formatted = new Intl.DateTimeFormat('pt-BR', {
+const datetime = new Intl.DateTimeFormat('pt-BR', {
   day: '2-digit',
   month: '2-digit',
   year: 'numeric',

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

@@ -1,12 +1,27 @@
 import type { Route } from './+types/route'
 
-import { EllipsisIcon } from 'lucide-react'
+import {
+  BanIcon,
+  CalendarIcon,
+  EllipsisIcon,
+  PlusIcon,
+  UserIcon
+} from 'lucide-react'
 import { DateTime } from 'luxon'
 import { Fragment, Suspense } from 'react'
 import { Await } from 'react-router'
 
-import { Skeleton } from '@repo/ui/components/skeleton'
 import { request as req } from '@repo/util/request'
+import { Button } from '@repo/ui/components/ui/button'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle
+} from '@repo/ui/components/ui/empty'
+import { Skeleton } from '@repo/ui/components/skeleton'
 import { Card, CardContent } from '@repo/ui/components/ui/card'
 import {
   Item,
@@ -17,7 +32,7 @@ import {
   ItemSeparator,
   ItemTitle
 } from '@repo/ui/components/ui/item'
-import { Button } from '@repo/ui/components/ui/button'
+import { Link } from 'react-router'
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: 'Matrículas agendadas' }]
@@ -52,34 +67,85 @@ export default function Route({
 
       <Await resolve={scheduled}>
         {({ items }) => {
+          const scheduled = grouping(items)
+
+          if (scheduled.length === 0) {
+            return (
+              <Empty className="border border-dashed">
+                <EmptyHeader>
+                  <EmptyMedia variant="icon">
+                    <BanIcon />
+                  </EmptyMedia>
+                  <EmptyTitle>Nenhum agendamento ainda</EmptyTitle>
+                  <EmptyDescription>
+                    Agende a matrícula dos seus colaboradores de forma rápida e
+                    organizada.
+                  </EmptyDescription>
+                </EmptyHeader>
+                <EmptyContent>
+                  <Button asChild>
+                    <Link to="../enrollments/add">
+                      <PlusIcon /> Agendar
+                    </Link>
+                  </Button>
+                </EmptyContent>
+              </Empty>
+            )
+          }
+
           return (
             <div className="space-y-5 lg:max-w-4xl mx-auto">
-              {grouping(items).map(([run_at, items]) => (
+              {scheduled.map(([run_at, items], index) => (
-                <div className="grid grid-cols-5 gap-2.5">
+                <div className="grid lg:grid-cols-5 gap-2.5" key={index}>
                   <div>
                     {DateTime.fromISO(run_at)
                       .setLocale('pt-BR')
                       .toFormat('cccc, dd LLL yyyy')}
                   </div>
+
                   <Card className="col-span-4">
                     <CardContent>
                       <ItemGroup>
-                        {items.map(({ user, course, scheduled_at }, index) => (
+                        {items.map(
+                          (
+                            { user, course, created_by, scheduled_at },
+                            index
+                          ) => (
                             <Fragment key={index}>
                               <Item>
                                 <ItemContent>
                                   <ItemTitle>{course.name}</ItemTitle>
                                   <ItemDescription>{user.name}</ItemDescription>
+                                  {/*<ItemDescription>*/}
+                                  <div className="mt-1">
+                                    <ul
+                                      className="lg:flex gap-2.5 text-muted-foreground text-sm
+                                                   *:flex *:gap-1 *:items-center"
+                                    >
+                                      <li>
+                                        <CalendarIcon className="size-3.5" />{' '}
+                                        {datetime.format(
+                                          new Date(scheduled_at)
+                                        )}
+                                      </li>
+                                      <li>
+                                        <UserIcon className="size-3.5" />{' '}
+                                        {created_by.name}
+                                      </li>
+                                    </ul>
+                                  </div>
                                 </ItemContent>
-                              <ItemActions>
+                                {/*<ItemActions>
                                 <Button variant="ghost" size="icon-sm">
                                   <EllipsisIcon />
                                 </Button>
-                              </ItemActions>
+                              </ItemActions>*/}
                               </Item>
+
                               {index !== items.length - 1 && <ItemSeparator />}
                             </Fragment>
-                        ))}
+                          )
+                        )}
                       </ItemGroup>
                     </CardContent>
                   </Card>