add report submission

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

@@ -0,0 +1,160 @@
+import type { Route } from './+types/route'
+
+import { AlertCircleIcon, CheckCircle2Icon, ClockIcon } from 'lucide-react'
+import { Link } from 'react-router'
+import { Suspense } from 'react'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@repo/ui/components/ui/card'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from '@repo/ui/components/ui/breadcrumb'
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle
+} from '@repo/ui/components/ui/alert'
+import { request as req } from '@repo/util/request'
+import { Skeleton } from '@repo/ui/components/skeleton'
+import { Await } from 'react-router'
+import { Abbr } from '@repo/ui/components/abbr'
+
+export function meta({}: Route.MetaArgs) {
+  return [{ title: 'Relatório de matrículas' }]
+}
+
+export async function loader({ context, request, params }: Route.LoaderArgs) {
+  const { orgid, id } = params
+  const submission = req({
+    url: `/orgs/${orgid}/enrollments/${id}/submitted`,
+    context,
+    request
+  }).then((r) => r.json())
+
+  return {
+    data: submission
+  }
+}
+
+export default function Route({ loaderData: { data } }: Route.ComponentProps) {
+  return (
+    <Suspense fallback={<Skeleton />}>
+      <div className="space-y-2.5">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link to="../enrollments">Matrículas</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link to="../enrollments/add">Adicionar matrículas</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Relatório de matrículas</BreadcrumbPage>
+            </BreadcrumbItem>
+          </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>
+
+            <CardContent className="space-y-4">
+              <Await resolve={data}>
+                {({ enrolled, scheduled }) => {
+                  const succeed = enrolled.filter(
+                    ({ status }) => status === 'success'
+                  )
+                  const failed = enrolled.filter(
+                    ({ status }) => status === 'fail'
+                  )
+
+                  // console.log(succeed)
+                  return (
+                    <>
+                      {succeed?.length > 0 && (
+                        <Alert className="text-green-500 *:data-[slot=alert-description]:text-green-500/90">
+                          <CheckCircle2Icon />
+                          <AlertTitle>
+                            Matrículas adicionadas com sucesso.
+                          </AlertTitle>
+                          <AlertDescription>
+                            <ul className="list-decimal list-inside">
+                              {succeed.map(({ output }) => (
+                                <li className="space-x-1">
+                                  <Abbr>{output.user.name}</Abbr>
+                                  <span>&mdash;</span>
+                                  <Abbr>{output.course.name}</Abbr>
+                                </li>
+                              ))}
+                            </ul>
+                          </AlertDescription>
+                        </Alert>
+                      )}
+
+                      {failed?.length > 0 && (
+                        <Alert variant="destructive">
+                          <AlertCircleIcon />
+                          <AlertTitle>Matrículas não processadas.</AlertTitle>
+                          <AlertDescription>
+                            <ul className="list-decimal list-inside">
+                              {failed.map(({ input_record }) => (
+                                <li className="space-x-1">
+                                  <Abbr>{input_record.user.name}</Abbr>
+                                  <span>&mdash;</span>
+                                  <Abbr>{input_record.course.name}</Abbr>
+                                </li>
+                              ))}
+                            </ul>
+                          </AlertDescription>
+                        </Alert>
+                      )}
+
+                      {scheduled?.length && (
+                        <Alert>
+                          <ClockIcon />
+                          <AlertTitle>
+                            Matrículas agendadas. Serão processadas na data
+                            definida.
+                          </AlertTitle>
+                          <AlertDescription>
+                            <ul className="list-decimal list-inside">
+                              <li>...</li>
+                              <li>...</li>
+                            </ul>
+                          </AlertDescription>
+                        </Alert>
+                      )}
+                    </>
+                  )
+                }}
+              </Await>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </Suspense>
+  )
+}

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/columns.tsx

@@ -123,6 +123,7 @@ function ActionMenu({ row }: { row: any }) {
               <CancelItem
                 id={row.id}
                 cancelPolicy={data?.cancel_policy}
+                lock={data?.lock}
                 onSuccess={onSuccess}
               />
             </>
@@ -180,7 +181,7 @@ function RemoveDedupItem({
   const [loading, { set }] = useToggle(false)
   const [open, { set: setOpen }] = useToggle(false)
 
-  const cancel = async (e: MouseEvent<HTMLButtonElement>) => {
+  const remove = async (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault()
     set(true)
 
@@ -231,7 +232,7 @@ function RemoveDedupItem({
         </AlertDialogHeader>
         <AlertDialogFooter className="*:cursor-pointer">
           <AlertDialogAction asChild>
-            <Button onClick={cancel} disabled={loading} variant="destructive">
+            <Button onClick={remove} disabled={loading} variant="destructive">
               {loading ? <Spinner /> : null} Continuar
             </Button>
           </AlertDialogAction>
@@ -272,8 +273,9 @@ function CancelItem({
     set(true)
 
     const r = await fetch(`/~/api/enrollments/${id}/cancel`, {
-      method: 'POST',
-      headers: new Headers({ 'Content-Type': 'application/json' })
+      method: 'PATCH',
+      headers: new Headers({ 'Content-Type': 'application/json' }),
+      body: JSON.stringify({ lock_hash: lock?.hash })
     })
 
     if (r.ok) {

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/data.ts

@@ -1,5 +1,7 @@
 import { z } from 'zod'
 
+export const MAX_ITEMS = 50
+
 export const enrollment = z.object({
   user: z
     .object(
@@ -7,7 +9,7 @@ export const enrollment = z.object({
         id: z.string(),
         name: z.string(),
         email: z.string(),
-        cpf: z.string()
+        cpf: z.string('a')
       },
       { error: 'Escolhe um colaborador' }
     )
@@ -32,9 +34,7 @@ export const enrollment = z.object({
 })
 
 export const formSchema = z.object({
-  enrollments: z.array(enrollment).min(1).max(100)
+  enrollments: z.array(enrollment).min(1).max(MAX_ITEMS)
 })
 
 export type Schema = z.infer<typeof formSchema>
-
-export const MAX_ITEMS = 100

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

@@ -13,7 +13,7 @@ import {
   CheckIcon,
   BookIcon
 } from 'lucide-react'
-import { Link, useParams } from 'react-router'
+import { Link, useParams, useFetcher } from 'react-router'
 import { Controller, useFieldArray, useForm } from 'react-hook-form'
 import { Fragment, use, useEffect, useMemo, useState } from 'react'
 import { format } from 'date-fns'
@@ -62,10 +62,12 @@ import { Label } from '@repo/ui/components/ui/label'
 import { Calendar } from '@repo/ui/components/ui/calendar'
 import { createSearch } from '@repo/util/meili'
 import { cn } from '@repo/ui/lib/utils'
+import { HttpMethod, request as req } from '@repo/util/request'
 import { useIsMobile } from '@repo/ui/hooks/use-mobile'
 
 import { formSchema, type Schema, MAX_ITEMS } from './data'
 import { AsyncCombobox } from './async-combobox'
+import { redirect } from 'react-router'
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: 'Adicionar matrícula' }]
@@ -83,8 +85,19 @@ export async function loader({ context }: Route.LoaderArgs) {
   return { courses }
 }
 
-export async function action({}: Route.ActionArgs) {
-  return {}
+export async function action({ params, request, context }: Route.ActionArgs) {
+  const body = (await request.json()) as object
+  const r = await req({
+    url: `enrollments`,
+    headers: new Headers({ 'Content-Type': 'application/json' }),
+    method: HttpMethod.POST,
+    body: JSON.stringify({ org_id: params.orgid, ...body }),
+    request,
+    context
+  })
+
+  const result = (await r.json()) as { sk: string }
+  return redirect(`/${params.orgid}/enrollments/${result.sk}/submitted`)
 }
 
 const emptyRow = {
@@ -97,19 +110,22 @@ export default function Route({
   loaderData: { courses }
 }: Route.ComponentProps) {
   const { orgid } = useParams()
-  const [data, setData] = useState({})
+  const fetcher = useFetcher()
   const form = useForm({
     resolver: zodResolver(formSchema),
     defaultValues: { enrollments: [emptyRow] }
   })
-  const { formState, control, handleSubmit, getValues } = form
+  const { formState, control, handleSubmit, getValues, reset } = form
   const { fields, insert, remove, append } = useFieldArray({
     control,
     name: 'enrollments'
   })
 
   const onSubmit = async (data: Schema) => {
-    setData(data)
+    await fetcher.submit(JSON.stringify(data), {
+      method: 'post',
+      encType: 'application/json'
+    })
   }
 
   const onSearch = async (search: string) => {
@@ -142,7 +158,7 @@ export default function Route({
           </BreadcrumbItem>
           <BreadcrumbSeparator />
           <BreadcrumbItem>
-            <BreadcrumbPage>Adicionar matrícula</BreadcrumbPage>
+            <BreadcrumbPage>Adicionar matrículas</BreadcrumbPage>
           </BreadcrumbItem>
         </BreadcrumbList>
       </Breadcrumb>
@@ -156,7 +172,7 @@ export default function Route({
       >
         <Card>
           <CardHeader>
-            <CardTitle className="text-2xl">Adicionar matrícula</CardTitle>
+            <CardTitle className="text-2xl">Adicionar matrículas</CardTitle>
             <CardDescription>
               Siga os passos abaixo para adicionar novas matrículas.
             </CardDescription>
@@ -306,12 +322,6 @@ export default function Route({
           </CardContent>
         </Card>
       </form>
-
-      {data && (
-        <pre className="whitespace-pre-wrap text-xs bg-muted p-2 rounded">
-          {JSON.stringify(data, null, 2)}
-        </pre>
-      )}
     </div>
   )
 }
@@ -540,7 +550,7 @@ function DuplicateRowMultipleTimes({
                 type="number"
                 defaultValue="2"
                 min="2"
-                max="100"
+                max={String(MAX_ITEMS - 1)}
                 className="col-span-2"
               />
             </div>