812 lines
25 KiB
TypeScript
812 lines
25 KiB
TypeScript
import type { Route } from './+types/route'
|
|
|
|
import Fuse from 'fuse.js'
|
|
import { useRequest, useToggle } from 'ahooks'
|
|
import { ErrorMessage } from '@hookform/error-message'
|
|
import {
|
|
CalendarIcon,
|
|
CopyIcon,
|
|
CopyPlusIcon,
|
|
Trash2Icon,
|
|
PlusIcon,
|
|
XIcon,
|
|
ChevronsUpDownIcon,
|
|
CheckIcon,
|
|
BookIcon,
|
|
ArrowDownAZIcon,
|
|
ArrowUpAZIcon,
|
|
AlertTriangleIcon,
|
|
UserIcon,
|
|
EllipsisIcon
|
|
} from 'lucide-react'
|
|
import { redirect, 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'
|
|
import { ptBR } from 'react-day-picker/locale'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
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 {
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList
|
|
} from '@repo/ui/components/ui/command'
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator
|
|
} from '@repo/ui/components/ui/breadcrumb'
|
|
import {
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupInput
|
|
} from '@repo/ui/components/ui/input-group'
|
|
import {
|
|
Card,
|
|
CardAction,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle
|
|
} from '@repo/ui/components/ui/card'
|
|
import { Spinner } from '@repo/ui/components/ui/spinner'
|
|
import { Input } from '@repo/ui/components/ui/input'
|
|
import { Button } from '@repo/ui/components/ui/button'
|
|
import { Separator } from '@repo/ui/components/ui/separator'
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger
|
|
} from '@repo/ui/components/ui/popover'
|
|
import { Label } from '@repo/ui/components/ui/label'
|
|
import { Calendar } from '@repo/ui/components/ui/calendar'
|
|
import { createSearch } from '@repo/util/meili'
|
|
import { initials, cn } from '@repo/ui/lib/utils'
|
|
import { HttpMethod, request as req } from '@repo/util/request'
|
|
import { useIsMobile } from '@repo/ui/hooks/use-mobile'
|
|
import { cloudflareContext } from '@repo/auth/context'
|
|
import { SearchFilter } from '@repo/ui/components/search-filter'
|
|
|
|
import { formSchema, type Schema, MAX_ITEMS } from './data'
|
|
|
|
export function meta({}: Route.MetaArgs) {
|
|
return [{ title: 'Adicionar matrícula' }]
|
|
}
|
|
|
|
type Enrolled = {
|
|
status: 'fail' | 'success'
|
|
input_record: { user: any; course: any }
|
|
}
|
|
|
|
export async function loader({ params, context, request }: Route.LoaderArgs) {
|
|
const url = new URL(request.url)
|
|
const submissionId = url.searchParams.get('submission')
|
|
const cloudflare = context.get(cloudflareContext)
|
|
const courses = createSearch({
|
|
index: 'saladeaula_courses',
|
|
sort: ['created_at:desc'],
|
|
filter: 'unlisted NOT EXISTS',
|
|
hitsPerPage: 100,
|
|
env: cloudflare.env
|
|
})
|
|
|
|
const submission: Promise<{ enrolled: Enrolled[] }> = submissionId
|
|
? req({
|
|
url: `/orgs/${params.orgid}/enrollments/${submissionId}/submitted`,
|
|
context,
|
|
request
|
|
}).then((r) => r.json())
|
|
: Promise.resolve({ enrolled: [] })
|
|
|
|
return { courses, submission }
|
|
}
|
|
|
|
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 data = (await r.json()) as { sk: string }
|
|
return redirect(`/${params.orgid}/enrollments/${data.sk}/submitted`)
|
|
}
|
|
|
|
const emptyRow = {
|
|
user: undefined,
|
|
course: undefined,
|
|
scheduled_for: undefined
|
|
}
|
|
|
|
export default function Route({
|
|
loaderData: { courses, submission }
|
|
}: Route.ComponentProps) {
|
|
const { orgid } = useParams()
|
|
const { enrolled } = use(submission)
|
|
const fetcher = useFetcher()
|
|
const form = useForm({
|
|
resolver: zodResolver(formSchema),
|
|
defaultValues: { enrollments: [emptyRow] }
|
|
})
|
|
const { formState, control, handleSubmit, getValues, setValue } = form
|
|
const { fields, insert, remove, append } = useFieldArray({
|
|
control,
|
|
name: 'enrollments'
|
|
})
|
|
|
|
const onSubmit = async (data: Schema) => {
|
|
await fetcher.submit(JSON.stringify(data), {
|
|
method: 'post',
|
|
encType: 'application/json'
|
|
})
|
|
}
|
|
|
|
const onSearch = async (search: string) => {
|
|
const params = new URLSearchParams({ q: search })
|
|
const r = await fetch(`/${orgid}/users.json?${params.toString()}`)
|
|
const { hits } = (await r.json()) as { hits: any[] }
|
|
return hits
|
|
}
|
|
|
|
const duplicateRow = (index: number, times: number = 1) => {
|
|
if (fields.length + times > MAX_ITEMS) {
|
|
return null
|
|
}
|
|
|
|
const { user, ...rest } = getValues(`enrollments.${index}`)
|
|
Array.from({ length: times }, (_, i) => {
|
|
// @ts-ignore
|
|
insert(index + 1 + i, rest)
|
|
})
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (enrolled.length === 0) {
|
|
return
|
|
}
|
|
|
|
setValue(
|
|
'enrollments',
|
|
enrolled
|
|
.filter(({ status }) => status === 'fail')
|
|
.map(({ input_record }) => pick(['course', 'user'], input_record))
|
|
)
|
|
}, [enrolled, setValue])
|
|
|
|
return (
|
|
<div className="space-y-2.5">
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink asChild>
|
|
<Link to="../enrollments">Matrículas</Link>
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator />
|
|
<BreadcrumbItem>
|
|
<BreadcrumbPage>Adicionar matrículas</BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
|
|
<form
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
className="lg:max-w-4xl mx-auto space-y-2.5"
|
|
autoComplete="off"
|
|
data-1p-ignore="true"
|
|
data-lpignore="true"
|
|
>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl">Adicionar matrículas</CardTitle>
|
|
<CardDescription>
|
|
Siga os passos abaixo para adicionar novas matrículas.
|
|
</CardDescription>
|
|
<CardAction>
|
|
<ActionMenu />
|
|
</CardAction>
|
|
</CardHeader>
|
|
|
|
<CardContent className="space-y-4">
|
|
<div className="grid lg:grid-cols-[repeat(3,1fr)_auto] w-full gap-1.5">
|
|
{/* Header */}
|
|
<>
|
|
<div className="max-lg:hidden text-foreground font-medium text-sm">
|
|
Colaborador
|
|
</div>
|
|
<div className="max-lg:hidden text-foreground font-medium text-sm">
|
|
Curso
|
|
</div>
|
|
<div className="max-lg:hidden text-foreground font-medium text-sm">
|
|
Matriculado em
|
|
</div>
|
|
<div>{/**/}</div>
|
|
</>
|
|
|
|
{/* Rows */}
|
|
<>
|
|
{fields.map((field, index) => (
|
|
<Fragment key={field.id}>
|
|
{/* Separator only for mobile */}
|
|
{index >= 1 && <div className="h-2.5 lg:hidden"></div>}
|
|
|
|
<Controller
|
|
control={control}
|
|
name={`enrollments.${index}.user`}
|
|
render={({
|
|
field: { name, value, onChange },
|
|
fieldState
|
|
}) => (
|
|
<div className="grid gap-1">
|
|
<SearchFilter
|
|
align="start"
|
|
onChange={onChange}
|
|
onSearch={onSearch}
|
|
render={({
|
|
id,
|
|
name,
|
|
email,
|
|
cpf,
|
|
onSelect,
|
|
onClose
|
|
}) => (
|
|
<CommandItem
|
|
key={id}
|
|
value={id}
|
|
className="cursor-pointer"
|
|
disabled={!cpf}
|
|
onSelect={() => {
|
|
onSelect()
|
|
onClose()
|
|
}}
|
|
>
|
|
<div className="flex gap-2.5 items-start">
|
|
<Avatar className="size-10 hidden lg:block">
|
|
<AvatarFallback className="border">
|
|
{initials(name)}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
|
|
<ul>
|
|
<li className="font-bold">
|
|
<Abbr>{name}</Abbr>
|
|
</li>
|
|
<li className="text-muted-foreground text-sm">
|
|
<Abbr>{email}</Abbr>
|
|
</li>
|
|
|
|
{cpf ? (
|
|
<li className="text-muted-foreground text-sm">
|
|
{formatCPF(cpf)}
|
|
</li>
|
|
) : (
|
|
<li className="flex gap-1 items-center text-red-400">
|
|
<AlertTriangleIcon className="text-red-400" />
|
|
Inelegível
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
|
|
<CheckIcon
|
|
className={cn(
|
|
'ml-auto',
|
|
value?.id === id
|
|
? 'opacity-100'
|
|
: 'opacity-0'
|
|
)}
|
|
/>
|
|
</CommandItem>
|
|
)}
|
|
>
|
|
{({ loading }) => (
|
|
<InputGroup>
|
|
<InputGroupInput
|
|
readOnly
|
|
value={value?.name || ''}
|
|
autoFocus={true}
|
|
placeholder="Colaborador"
|
|
className="cursor-pointer"
|
|
autoComplete="off"
|
|
aria-invalid={!!fieldState.error}
|
|
/>
|
|
<InputGroupAddon>
|
|
<UserIcon />
|
|
</InputGroupAddon>
|
|
|
|
{value && (
|
|
<InputGroupAddon
|
|
align="inline-end"
|
|
className="mr-0"
|
|
>
|
|
<Button
|
|
variant="link"
|
|
size="icon-sm"
|
|
className="cursor-pointer text-muted-foreground"
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
onChange?.(null)
|
|
}}
|
|
>
|
|
<XIcon />
|
|
</Button>
|
|
</InputGroupAddon>
|
|
)}
|
|
|
|
{loading && (
|
|
<InputGroupAddon align="inline-end">
|
|
<Spinner />
|
|
</InputGroupAddon>
|
|
)}
|
|
</InputGroup>
|
|
)}
|
|
</SearchFilter>
|
|
<ErrorMessage
|
|
errors={formState.errors}
|
|
name={name}
|
|
render={({ message }) => (
|
|
<p className="text-destructive text-sm">
|
|
{message}
|
|
</p>
|
|
)}
|
|
/>
|
|
</div>
|
|
)}
|
|
/>
|
|
|
|
<Controller
|
|
control={control}
|
|
name={`enrollments.${index}.course`}
|
|
render={({
|
|
field: { name, value, onChange },
|
|
fieldState
|
|
}) => (
|
|
<div className="grid gap-1">
|
|
<FacetedFilter
|
|
value={value}
|
|
onChange={onChange}
|
|
options={courses}
|
|
error={fieldState.error}
|
|
/>
|
|
<ErrorMessage
|
|
errors={formState.errors}
|
|
name={name}
|
|
render={({ message }) => (
|
|
<p className="text-destructive text-sm">
|
|
{message}
|
|
</p>
|
|
)}
|
|
/>
|
|
</div>
|
|
)}
|
|
/>
|
|
|
|
<Controller
|
|
control={control}
|
|
name={`enrollments.${index}.scheduled_for`}
|
|
render={({ field: { value, onChange } }) => (
|
|
<ScheduledForInput value={value} onChange={onChange} />
|
|
)}
|
|
/>
|
|
|
|
{/* Action */}
|
|
<div className="flex gap-1.5">
|
|
<Button
|
|
type="button"
|
|
tabIndex={-1}
|
|
variant="outline"
|
|
className="cursor-pointer"
|
|
onClick={() => duplicateRow(index)}
|
|
title="Duplicar linha"
|
|
>
|
|
<CopyIcon />
|
|
</Button>
|
|
|
|
<DuplicateRowMultipleTimes
|
|
index={index}
|
|
duplicateRow={duplicateRow}
|
|
/>
|
|
|
|
<Button
|
|
tabIndex={-1}
|
|
variant="destructive"
|
|
className="cursor-pointer"
|
|
disabled={fields.length == 1}
|
|
onClick={() => remove(index)}
|
|
>
|
|
<Trash2Icon />
|
|
</Button>
|
|
</div>
|
|
</Fragment>
|
|
))}
|
|
</>
|
|
</div>
|
|
|
|
<Button
|
|
type="button"
|
|
// @ts-ignore
|
|
onClick={() => append(emptyRow)}
|
|
className="cursor-pointer"
|
|
disabled={fields.length == MAX_ITEMS}
|
|
variant="outline"
|
|
size="sm"
|
|
>
|
|
<PlusIcon /> Adicionar
|
|
</Button>
|
|
|
|
<Separator />
|
|
|
|
<Button
|
|
type="submit"
|
|
className="cursor-pointer"
|
|
disabled={formState.isSubmitting}
|
|
>
|
|
{formState.isSubmitting && <Spinner />}
|
|
Matricular
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
type Course = {
|
|
id: string
|
|
name: string
|
|
access_period: number
|
|
metadata__unit_price?: number
|
|
}
|
|
|
|
interface FacetedFilterProps {
|
|
value?: Course
|
|
options: Promise<{ hits: any[] }>
|
|
onChange?: (value: any) => void
|
|
error?: any
|
|
}
|
|
|
|
function FacetedFilter({
|
|
value,
|
|
onChange,
|
|
options,
|
|
error
|
|
}: FacetedFilterProps) {
|
|
const [search, setSearch] = useState<string>('')
|
|
const [open, { set }] = useToggle()
|
|
const [sort, { toggle }] = useToggle('a-z', 'z-a')
|
|
const { hits } = use(options)
|
|
const fuse = useMemo(() => {
|
|
return new Fuse(hits, {
|
|
keys: ['name'],
|
|
threshold: 0.3,
|
|
includeMatches: true
|
|
})
|
|
}, [hits])
|
|
|
|
const filtered = useMemo(() => {
|
|
const results = !search ? hits : fuse.search(search).map(({ item }) => item)
|
|
|
|
return results.sort((a, b) => {
|
|
const comparison = a.name.localeCompare(b.name)
|
|
return sort === 'a-z' ? comparison : -comparison
|
|
})
|
|
}, [search, fuse, hits, sort])
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={set}>
|
|
<PopoverTrigger asChild>
|
|
<InputGroup>
|
|
<InputGroupInput
|
|
readOnly
|
|
placeholder="Curso"
|
|
value={value?.name || ''}
|
|
aria-invalid={!!error}
|
|
/>
|
|
<InputGroupAddon>
|
|
<BookIcon />
|
|
</InputGroupAddon>
|
|
<InputGroupAddon align="inline-end">
|
|
<ChevronsUpDownIcon />
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</PopoverTrigger>
|
|
|
|
<PopoverContent className="lg:w-84 p-0" align="start">
|
|
<Command shouldFilter={false}>
|
|
<div className="flex">
|
|
<div className="flex-1">
|
|
<CommandInput
|
|
placeholder="Curso"
|
|
autoComplete="off"
|
|
onValueChange={setSearch}
|
|
/>
|
|
</div>
|
|
<div className="border-b flex items-center justify-end">
|
|
<Button
|
|
variant="link"
|
|
size="icon-sm"
|
|
tabIndex={-1}
|
|
className="cursor-pointer text-muted-foreground"
|
|
onClick={toggle}
|
|
>
|
|
{sort == 'a-z' ? <ArrowDownAZIcon /> : <ArrowUpAZIcon />}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{/* Force rerender to reset the scroll position */}
|
|
<CommandList key={sort}>
|
|
<CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
|
|
<CommandGroup>
|
|
{filtered
|
|
.filter(
|
|
({ metadata__unit_price = 0 }) => metadata__unit_price > 0
|
|
)
|
|
.map(
|
|
({
|
|
id,
|
|
name,
|
|
access_period,
|
|
metadata__unit_price: unit_price
|
|
}) => (
|
|
<CommandItem
|
|
key={id}
|
|
value={id}
|
|
className="cursor-pointer"
|
|
onSelect={() => {
|
|
onChange?.({
|
|
id,
|
|
name,
|
|
access_period: Number(access_period),
|
|
unit_price: Number(unit_price)
|
|
})
|
|
set(false)
|
|
}}
|
|
>
|
|
{name}
|
|
<CheckIcon
|
|
className={cn(
|
|
'ml-auto',
|
|
value?.id === id ? 'opacity-100' : 'opacity-0'
|
|
)}
|
|
/>
|
|
</CommandItem>
|
|
)
|
|
)}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|
|
|
|
interface ScheduledForInputProps {
|
|
value?: Date
|
|
onChange?: (value: Date | undefined) => void
|
|
}
|
|
|
|
function ScheduledForInput({ value, onChange }: ScheduledForInputProps) {
|
|
const today = new Date()
|
|
const tomorrow = new Date()
|
|
tomorrow.setDate(today.getDate() + 1)
|
|
const [open, { set }] = useToggle()
|
|
const [selected, setDate] = useState<Date | undefined>(value)
|
|
const display = selected ? format(selected, 'dd/MM/yyyy') : ''
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={set}>
|
|
<PopoverTrigger asChild>
|
|
<InputGroup>
|
|
<InputGroupInput
|
|
readOnly
|
|
placeholder="Imediatamente"
|
|
value={display}
|
|
/>
|
|
|
|
<InputGroupAddon>
|
|
<CalendarIcon />
|
|
</InputGroupAddon>
|
|
|
|
{selected && (
|
|
<InputGroupAddon align="inline-end" className="mr-0">
|
|
<Button
|
|
variant="link"
|
|
size="icon-sm"
|
|
className="cursor-pointer text-muted-foreground"
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
setDate(undefined)
|
|
onChange?.(undefined)
|
|
set(false)
|
|
}}
|
|
>
|
|
<XIcon />
|
|
</Button>
|
|
</InputGroupAddon>
|
|
)}
|
|
</InputGroup>
|
|
</PopoverTrigger>
|
|
|
|
<PopoverContent className="w-full p-0" align="start">
|
|
<Calendar
|
|
mode="single"
|
|
selected={selected}
|
|
onSelect={(date: Date | undefined) => {
|
|
setDate(date)
|
|
onChange?.(date)
|
|
set(false)
|
|
}}
|
|
disabled={{ before: tomorrow }}
|
|
startMonth={new Date(today.getFullYear(), 0)}
|
|
endMonth={new Date(today.getFullYear() + 3, 11)}
|
|
captionLayout="dropdown"
|
|
locale={ptBR}
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|
|
|
|
function DuplicateRowMultipleTimes({
|
|
index,
|
|
duplicateRow
|
|
}: {
|
|
index: number
|
|
duplicateRow: (index: number, times: number) => void
|
|
}) {
|
|
const [open, { toggle, set }] = useToggle()
|
|
const isMobile = useIsMobile()
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={toggle}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
tabIndex={-1}
|
|
variant="outline"
|
|
className="cursor-pointer"
|
|
title="Duplicar várias vezes"
|
|
>
|
|
<CopyPlusIcon />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
|
|
<PopoverContent align={isMobile ? 'start' : 'end'} className="w-82">
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.stopPropagation()
|
|
e.preventDefault()
|
|
const formData = new FormData(e.currentTarget)
|
|
const times = parseInt(formData.get('quantity') as string)
|
|
duplicateRow(index, times)
|
|
set(false)
|
|
}}
|
|
>
|
|
<div className="space-y-2.5">
|
|
<h4 className="leading-none font-medium">Duplicar várias vezes</h4>
|
|
<p className="text-muted-foreground text-sm">
|
|
Duplique o curso desta linha na quantidade desejada para agilizar
|
|
o preenchimento.
|
|
</p>
|
|
|
|
<div className="grid grid-cols-3 items-center gap-4">
|
|
<Label htmlFor="quantity">Quantidade</Label>
|
|
<Input
|
|
id="quantity"
|
|
name="quantity"
|
|
type="number"
|
|
defaultValue="2"
|
|
min="2"
|
|
max={String(MAX_ITEMS - 1)}
|
|
className="col-span-2"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2.5">
|
|
<Button
|
|
type="button"
|
|
variant="link"
|
|
tabIndex={-1}
|
|
className="cursor-pointer dark:text-white text-black"
|
|
onClick={() => set(false)}
|
|
>
|
|
Cancelar
|
|
</Button>
|
|
<Button type="submit" className="cursor-pointer">
|
|
Duplicar
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</PopoverContent>
|
|
</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)
|
|
|
|
if (open && !data) {
|
|
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>
|
|
)
|
|
}
|