sergio/saladeaula.digital
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add checkout

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-12-23 10:56:38 -03:00
parent a524666837
commit 6eff69f168
12 changed files with 840 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/assigned.tsx Normal file
View File

@@ -0,0 +1,176 @@
import { Fragment } from 'react'
import { Trash2Icon, PlusIcon } from 'lucide-react'
import { useForm, useFieldArray, Controller, useWatch } from 'react-hook-form'
import { useParams } from 'react-router'
import { ErrorMessage } from '@hookform/error-message'
import { zodResolver } from '@hookform/resolvers/zod'
import { Form } from '@repo/ui/components/ui/form'
import { InputGroup, InputGroupInput } from '@repo/ui/components/ui/input-group'
import { Button } from '@repo/ui/components/ui/button'
import { Separator } from '@repo/ui/components/ui/separator'
import {
MAX_ITEMS,
type Course,
type User
} from '../_.$orgid.enrollments.add/data'
import { ScheduledForInput } from '../_.$orgid.enrollments.add/scheduled-for'
import { Cell } from '../_.$orgid.enrollments.add/route'
import { CoursePicker } from '../_.$orgid.enrollments.add/course-picker'
import { UserPicker } from '../_.$orgid.enrollments.add/user-picker'
const emptyRow = {
user: undefined,
course: undefined,
scheduled_for: undefined
}
type AssignedProps = {
courses: Promise<{ hits: Course[] }>
}
export function Assigned({ courses }: AssignedProps) {
const { orgid } = useParams()
const form = useForm({
// resolver: zodResolver(formSchema),
defaultValues: { enrollments: [emptyRow] }
})
const { formState, control, handleSubmit, getValues, watch } = form
const { fields, insert, remove, append } = useFieldArray({
control,
name: 'enrollments'
})
const items = useWatch({
control,
name: 'enrollments'
})
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: User[] }
return hits
}
return (
<Form {...form}>
<div className="grid w-full gap-1.5 lg:grid-cols-[repeat(4,1fr)_auto]">
{/* Header */}
<>
<Cell>Colaborador</Cell>
<Cell>Curso</Cell>
<Cell>Matricular em</Cell>
<Cell>Valor unit.</Cell>
<Cell>{/**/}</Cell>
</>
{/* Rows */}
{fields.map((field, index) => {
const course = items?.[index]?.course
return (
<Fragment key={field.id}>
<Controller
control={control}
name={`enrollments.${index}.user`}
render={({ field: { name, value, onChange }, fieldState }) => (
<div className="grid gap-1">
<UserPicker
value={value}
onChange={onChange}
onSearch={onSearch}
fieldState={fieldState}
/>
<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">
<CoursePicker
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} />
)}
/>
<InputGroup>
{/*<InputGroupAddon>
<InputGroupText>R$</InputGroupText>
</InputGroupAddon>*/}
<InputGroupInput
className="pointer-events-none"
value={currency.format(course?.unit_price || 0)}
/>
</InputGroup>
<Button
tabIndex={-1}
variant="destructive"
className="cursor-pointer"
disabled={fields.length == 1}
onClick={() => remove(index)}
>
<Trash2Icon />
</Button>
</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">
Continuar
</Button>
</Form>
)
}
const currency = new Intl.NumberFormat('pt-BR', {
style: 'currency',
currency: 'BRL'
})

162
apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/bulk.tsx Normal file
View File

@@ -0,0 +1,162 @@
import { Fragment } from 'react'
import { PlusIcon, Trash2Icon } from 'lucide-react'
import { useForm, useFieldArray, Controller, useWatch } from 'react-hook-form'
import { ErrorMessage } from '@hookform/error-message'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { Form } from '@repo/ui/components/ui/form'
import { Input } from '@repo/ui/components/ui/input'
import { Button } from '@repo/ui/components/ui/button'
import { InputGroup, InputGroupInput } from '@repo/ui/components/ui/input-group'
import { Separator } from '@repo/ui/components/ui/separator'
import { Cell } from '../_.$orgid.enrollments.add/route'
import { CoursePicker } from '../_.$orgid.enrollments.add/course-picker'
import { MAX_ITEMS, type Course } from '../_.$orgid.enrollments.add/data'
const emptyRow = {
course: undefined,
quantity: undefined
}
type BulkProps = {
courses: Promise<{ hits: Course[] }>
}
const item = z.object({
course: z
.object(
{
id: z.string(),
name: z.string(),
access_period: z.number(),
unit_price: z.number()
},
{ error: 'Escolha um curso' }
)
.required(),
quantity: z.number()
})
const formSchema = z.object({
items: z.array(item).min(1).max(MAX_ITEMS)
})
type Schema = z.infer<typeof formSchema>
export function Bulk({ courses }: BulkProps) {
const form = useForm({
resolver: zodResolver(formSchema),
defaultValues: { items: [emptyRow] }
})
const { formState, control, handleSubmit } = form
const { fields, remove, append } = useFieldArray({
control,
name: 'items'
})
const items = useWatch({
control,
name: 'items'
})
const onSubmit = async (data: Schema) => {
console.log(data)
}
return (
<Form {...form}>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
<div className="grid w-full gap-1.5 lg:grid-cols-[repeat(3,1fr)_auto]">
{/* Header */}
<>
<Cell>Curso</Cell>
<Cell>Quantidade</Cell>
<Cell>Valor unit.</Cell>
<Cell>{/**/}</Cell>
</>
{/* Rows */}
{fields.map((field, index) => {
const course = items?.[index]?.course
return (
<Fragment key={field.id}>
<Controller
control={control}
name={`items.${index}.course`}
render={({
field: { name, value, onChange },
fieldState
}) => (
<div className="grid gap-1">
<CoursePicker
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>
)}
/>
<Input type="number" defaultValue={1} />
<InputGroup>
{/*<InputGroupAddon>
<InputGroupText>R$</InputGroupText>
</InputGroupAddon>*/}
<InputGroupInput
className="pointer-events-none"
value={currency.format(course?.unit_price || 0)}
/>
</InputGroup>
<Button
tabIndex={-1}
variant="destructive"
className="cursor-pointer"
disabled={fields.length == 1}
onClick={() => remove(index)}
>
<Trash2Icon />
</Button>
</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">
Continuar
</Button>
</form>
</Form>
)
}
const currency = new Intl.NumberFormat('pt-BR', {
style: 'currency',
currency: 'BRL'
})

74
apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/route.tsx
View File

@@ -1,15 +1,83 @@
import { Card, CardContent } from '@repo/ui/components/ui/card'
import type { Route } from './+types/route'
import { useToggle } from 'ahooks'
import {
Card,
CardContent,
CardHeader,
CardDescription,
CardTitle
} from '@repo/ui/components/ui/card'
import { Switch } from '@repo/ui/components/ui/switch'
import { createSearch } from '@repo/util/meili'
import { cloudflareContext } from '@repo/auth/context'
import { Label } from '@repo/ui/components/ui/label'
import { Assigned } from './assigned'
import { Bulk } from './bulk'
export function meta({}: Route.MetaArgs) {
return [{ title: '' }]
}
export default function Route() {
export async function loader({ params, context, request }: Route.LoaderArgs) {
const cloudflare = context.get(cloudflareContext)
const courses = createSearch({
index: 'saladeaula_courses',
sort: ['created_at:desc'],
filter: 'unlisted NOT EXISTS',
hitsPerPage: 100,
env: cloudflare.env
})
return { courses }
}
export default function Route({
loaderData: { courses }
}: Route.ComponentProps) {
const [state, { toggle }] = useToggle('bulk', 'assigned')
return (
<div className="lg:max-w-4xl mx-auto space-y-2.5">
<Card>
<CardContent>,,,</CardContent>
<CardHeader>
<CardTitle className="text-2xl">Comprar matrículas</CardTitle>
<CardDescription>
Siga os passos abaixo para comprar novas matrículas.
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<Label
className="flex flex-row items-center justify-between
bg-accent/50 rounded-lg border p-4 cursor-pointer
dark:has-aria-checked:border-blue-900
dark:has-aria-checked:bg-blue-950"
>
<div className="grid gap-1.5 font-normal">
<p className="text-sm leading-none font-medium">
Adicionar colaboradores
</p>
<p className="text-muted-foreground text-sm">
Você pode adicionar agora os colaboradores que irão fazer o
curso ou deixar para fazer isso depois.
</p>
</div>
<Switch
checked={state === 'assigned'}
onCheckedChange={toggle}
className="cursor-pointer"
/>
</Label>
{state == 'assigned' ? (
<Assigned courses={courses} />
) : (
<Bulk courses={courses} />
)}
</CardContent>
</Card>
</div>
)

155
apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/course-picker.tsx Normal file
View File

@@ -0,0 +1,155 @@
import { use, useState, useMemo } from 'react'
import { useToggle } from 'ahooks'
import Fuse from 'fuse.js'
import {
ChevronsUpDownIcon,
CheckIcon,
BookIcon,
ArrowDownAZIcon,
ArrowUpAZIcon
} from 'lucide-react'
import { cn } from '@repo/ui/lib/utils'
import { Button } from '@repo/ui/components/ui/button'
import {
InputGroup,
InputGroupAddon,
InputGroupInput
} from '@repo/ui/components/ui/input-group'
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList
} from '@repo/ui/components/ui/command'
import {
Popover,
PopoverContent,
PopoverTrigger
} from '@repo/ui/components/ui/popover'
import { type Course } from './data'
interface CoursePickerProps {
value?: Course
options: Promise<{ hits: any[] }>
onChange?: (value: any) => void
error?: any
}
export function CoursePicker({
value,
onChange,
options,
error
}: CoursePickerProps) {
const { hits } = use(options)
const [search, setSearch] = useState<string>('')
const [open, { set }] = useToggle()
const [sort, { toggle }] = useToggle('a-z', 'z-a')
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>
)
}

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

@@ -41,3 +41,22 @@ export const formSchema = z.object({
})
export type Schema = z.infer<typeof formSchema>
export type User = {
id: string
name: string
email: string
cpf: string
}
export type Course = {
id: string
name: string
access_period: number
metadata__unit_price?: number
}
export type Enrolled = {
status: 'fail' | 'success'
input_record: { user: any; course: any }
}

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

@@ -1,41 +1,24 @@
import type { Route } from './+types/route'
import Fuse from 'fuse.js'
import { Fragment, use, useEffect, type ReactNode } from 'react'
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'
@@ -47,11 +30,6 @@ import {
BreadcrumbPage,
BreadcrumbSeparator
} from '@repo/ui/components/ui/breadcrumb'
import {
InputGroup,
InputGroupAddon,
InputGroupInput
} from '@repo/ui/components/ui/input-group'
import {
Card,
CardAction,
@@ -60,6 +38,7 @@ import {
CardHeader,
CardTitle
} from '@repo/ui/components/ui/card'
import { DateTime } from '@repo/ui/components/datetime'
import { Spinner } from '@repo/ui/components/ui/spinner'
import { Input } from '@repo/ui/components/ui/input'
import { Button } from '@repo/ui/components/ui/button'
@@ -70,25 +49,33 @@ import {
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'
import {
MAX_ITEMS,
formSchema,
type Schema,
type Course,
type User,
type Enrolled
} from './data'
import { ScheduledForInput } from './scheduled-for'
import { CoursePicker } from './course-picker'
import { UserPicker } from './user-picker'
const emptyRow = {
user: undefined,
course: undefined,
scheduled_for: undefined
}
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')
@@ -129,12 +116,6 @@ export async function action({ params, request, context }: Route.ActionArgs) {
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) {
@@ -161,7 +142,7 @@ export default function Route({
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[] }
const { hits } = (await r.json()) as { hits: User[] }
return hits
}
@@ -228,16 +209,10 @@ export default function Route({
<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>
<Cell>Colaborador</Cell>
<Cell>Curso</Cell>
<Cell>Matricular em</Cell>
<Cell>{/**/}</Cell>
</>
{/* Rows */}
@@ -255,109 +230,13 @@ export default function Route({
fieldState
}) => (
<div className="grid gap-1">
<SearchFilter
align="start"
<UserPicker
value={value}
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>
fieldState={fieldState}
/>
<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}
@@ -379,12 +258,13 @@ export default function Route({
fieldState
}) => (
<div className="grid gap-1">
<FacetedFilter
<CoursePicker
value={value}
onChange={onChange}
options={courses}
error={fieldState.error}
/>
<ErrorMessage
errors={formState.errors}
name={name}
@@ -468,202 +348,6 @@ export default function Route({
)
}
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
@@ -747,7 +431,7 @@ function ActionMenu() {
const r = await fetch(`/~/api/orgs/${orgid}/enrollments/submissions`, {
method: 'GET'
})
return await r.json()
return (await r.json()) as { items: { sk: string }[] }
},
{ manual: true }
)
@@ -810,3 +494,11 @@ function ActionMenu() {
</Popover>
)
}
export function Cell({ children }: { children?: ReactNode }) {
return (
<div className="max-lg:hidden text-foreground font-medium text-sm">
{children}
</div>
)
}

86
apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/scheduled-for.tsx Normal file
View File

@@ -0,0 +1,86 @@
import { CalendarIcon, XIcon } from 'lucide-react'
import { useState } from 'react'
import { useToggle } from 'ahooks'
import { format } from 'date-fns'
import { ptBR } from 'react-day-picker/locale'
import { Button } from '@repo/ui/components/ui/button'
import { Calendar } from '@repo/ui/components/ui/calendar'
import {
InputGroup,
InputGroupAddon,
InputGroupInput
} from '@repo/ui/components/ui/input-group'
import {
Popover,
PopoverContent,
PopoverTrigger
} from '@repo/ui/components/ui/popover'
interface ScheduledForInputProps {
value?: Date
onChange?: (value: Date | undefined) => void
}
export 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>
)
}

126
apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/user-picker.tsx Normal file
View File

@@ -0,0 +1,126 @@
import type { ControllerFieldState } from 'react-hook-form'
import { XIcon, CheckIcon, AlertTriangleIcon, UserIcon } from 'lucide-react'
import { formatCPF } from '@brazilian-utils/brazilian-utils'
import { cn, initials } from '@repo/ui/lib/utils'
import { Button } from '@repo/ui/components/ui/button'
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
import { Abbr } from '@repo/ui/components/abbr'
import { Spinner } from '@repo/ui/components/ui/spinner'
import {
InputGroup,
InputGroupAddon,
InputGroupInput
} from '@repo/ui/components/ui/input-group'
import { CommandItem } from '@repo/ui/components/ui/command'
import { SearchFilter } from '@repo/ui/components/search-filter'
import type { User } from './data'
interface UserPickerProps {
value?: User
onChange: (value: User | null) => void
onSearch: (search: string) => Promise<User[]>
fieldState: ControllerFieldState
}
export function UserPicker({
value,
onChange,
onSearch,
fieldState
}: UserPickerProps) {
return (
<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>
)
}

1
apps/studio.saladeaula.digital/app/routes/edit.tsx
View File

@@ -162,7 +162,6 @@ export default function Component({
function Editing() {
const course = useAsyncValue() as Course
const fetcher = useFetcher()
const form = useForm({
resolver: zodResolver(formSchema),
defaultValues: {

4
enrollments-events/app/docuseal.py
View File

@@ -32,7 +32,7 @@ def create_submission_from_pdf(
submitters: list[Submitter],
email_message: EmailMessage,
**kwargs,
):
) -> dict:
r = requests.post(
url=f'{DOCUSEAL_API}/api/submissions/pdf',
json={
@@ -52,4 +52,4 @@ def create_submission_from_pdf(
)
r.raise_for_status()
return True
return r.json()

3
enrollments-events/app/events/ask_to_sign.py
View File

@@ -36,7 +36,7 @@ def lambda_handler(event: EventBridgeEvent, context: LambdaContext) -> bool:
file_bytes = _get_file_bytes(new_image['cert']['s3_uri'])
file_base64 = base64.b64encode(file_bytes)
create_submission_from_pdf(
r = create_submission_from_pdf(
filename=new_image['id'],
file=file_base64.decode('utf-8'),
email_message={
@@ -52,6 +52,7 @@ def lambda_handler(event: EventBridgeEvent, context: LambdaContext) -> bool:
},
],
)
logger.debug(r)
return True

4
packages/ui/src/components/search-filter.tsx
View File

@@ -25,7 +25,7 @@ interface SearchFilterProps<T> {
onValueChange?: (value: string) => void
requestOptions?: object
placeholder?: string
onChange: (value: T | undefined) => void
onChange: (value: T | null) => void
onSearch: (search: string) => Promise<T[]>
align: 'start' | 'center' | 'end'
children: ({ loading }: { loading: boolean }) => ReactNode
@@ -117,7 +117,7 @@ export function SearchFilter<T>({
variant="ghost"
onClick={() => {
setValue('')
onChange?.(undefined)
onChange?.(null)
setFalse()
mutate([])