add rybbit

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

@@ -1,6 +1,7 @@
 import type { Route } from './+types/route'
 
-import { useToggle } from 'ahooks'
+import Fuse from 'fuse.js'
+import { useRequest, useToggle } from 'ahooks'
 import { ErrorMessage } from '@hookform/error-message'
 import {
   CalendarIcon,
@@ -15,7 +16,8 @@ import {
   ArrowDownAZIcon,
   ArrowUpAZIcon,
   AlertTriangleIcon,
-  UserIcon
+  UserIcon,
+  EllipsisIcon
 } from 'lucide-react'
 import { redirect, Link, useParams, useFetcher } from 'react-router'
 import { Controller, useFieldArray, useForm } from 'react-hook-form'
@@ -23,9 +25,10 @@ import { Fragment, use, useEffect, useMemo, useState } from 'react'
 import { format } from 'date-fns'
 import { ptBR } from 'react-day-picker/locale'
 import { zodResolver } from '@hookform/resolvers/zod'
-import Fuse from 'fuse.js'
 import { formatCPF } from '@brazilian-utils/brazilian-utils'
+import { pick } from 'ramda'
 
+import { DateTime } from '@repo/ui/components/datetime'
 import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
 import { Abbr } from '@repo/ui/components/abbr'
 import {
@@ -51,6 +54,7 @@ import {
 } from '@repo/ui/components/ui/input-group'
 import {
   Card,
+  CardAction,
   CardContent,
   CardDescription,
   CardHeader,
@@ -75,7 +79,6 @@ import { cloudflareContext } from '@repo/auth/context'
 import { SearchFilter } from '@repo/ui/components/search-filter'
 
 import { formSchema, type Schema, MAX_ITEMS } from './data'
-import { pick } from 'ramda'
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: 'Adicionar matrícula' }]
@@ -215,6 +218,9 @@ export default function Route({
             <CardDescription>
               Siga os passos abaixo para adicionar novas matrículas.
             </CardDescription>
+            <CardAction>
+              <ActionMenu />
+            </CardAction>
           </CardHeader>
 
           <CardContent className="space-y-4">
@@ -731,3 +737,72 @@ function DuplicateRowMultipleTimes({
     </Popover>
   )
 }
+
+function ActionMenu() {
+  const { orgid } = useParams()
+  const [open, { set }] = useToggle()
+  const { data, runAsync, loading } = useRequest(
+    async () => {
+      const r = await fetch(`/~/api/orgs/${orgid}/enrollments/submissions`, {
+        method: 'GET'
+      })
+      return await r.json()
+    },
+    { manual: true }
+  )
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={async (open) => {
+        set(open)
+        await runAsync()
+      }}
+    >
+      <PopoverTrigger asChild>
+        <Button variant="ghost" className="cursor-pointer">
+          <EllipsisIcon />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="p-0 overflow-hidden w-56">
+        <div className="border-b p-2 text-xs text-muted-foreground font-medium">
+          Envios recentes
+        </div>
+        <Command className="rounded-none">
+          <CommandList>
+            <CommandGroup>
+              {loading && (
+                <CommandItem disabled>
+                  <Spinner />
+                </CommandItem>
+              )}
+
+              {data?.items?.map(({ sk }, index) => (
+                <CommandItem asChild key={index}>
+                  <Link
+                    to={`../enrollments/${sk}/submitted`}
+                    className="cursor-pointer"
+                  >
+                    <DateTime
+                      options={{
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        second: '2-digit'
+                      }}
+                    >
+                      {sk}
+                    </DateTime>
+                  </Link>
+                </CommandItem>
+              ))}
+
+              {data?.items?.length === 0 && (
+                <CommandEmpty>Nenhum envio ainda</CommandEmpty>
+              )}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}