iupdate

apps/admin.saladeaula.digital/app/app.css

@@ -9,3 +9,17 @@
  * https://github.com/tailwindlabs/tailwindcss/issues/16733
  */
 @source '../../../packages/ui';
+
+@layer utilities {
+  /* Chrome, Safari, Edge, Opera */
+  .no-spinner::-webkit-outer-spin-button,
+  .no-spinner::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+  .no-spinner {
+    -moz-appearance: textfield;
+  }
+}

apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/assigned.tsx

@@ -36,7 +36,7 @@ export function Assigned({ courses }: AssignedProps) {
     // resolver: zodResolver(formSchema),
     defaultValues: { enrollments: [emptyRow] }
   })
-  const { formState, control, handleSubmit, getValues, watch } = form
+  const { formState, control, handleSubmit } = form
   const { fields, insert, remove, append } = useFieldArray({
     control,
     name: 'enrollments'
@@ -53,9 +53,14 @@ export function Assigned({ courses }: AssignedProps) {
     return hits
   }
 
+  const onSubmit = async (data: any) => {
+    console.log(data)
+  }
+
   return (
     <Form {...form}>
-      <div className="grid w-full gap-1.5 lg:grid-cols-[repeat(4,1fr)_auto]">
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+        <div className="grid w-full gap-1.5 lg:grid-cols-[3fr_3fr_2fr_2fr_auto]">
           {/* Header */}
           <>
             <Cell>Colaborador</Cell>
@@ -67,13 +72,20 @@ export function Assigned({ courses }: AssignedProps) {
 
           {/* Rows */}
           {fields.map((field, index) => {
-          const course = items?.[index]?.course
+            const { unit_price } = items?.[index]?.course || { unit_price: 0 }
+
             return (
               <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 }) => (
+                  render={({
+                    field: { name, value, onChange },
+                    fieldState
+                  }) => (
                     <div className="grid gap-1">
                       <UserPicker
                         value={value}
@@ -96,7 +108,10 @@ export function Assigned({ courses }: AssignedProps) {
                 <Controller
                   control={control}
                   name={`enrollments.${index}.course`}
-                render={({ field: { name, value, onChange }, fieldState }) => (
+                  render={({
+                    field: { name, value, onChange },
+                    fieldState
+                  }) => (
                     <div className="grid gap-1">
                       <CoursePicker
                         value={value}
@@ -125,13 +140,10 @@ export function Assigned({ courses }: AssignedProps) {
                 />
 
                 <InputGroup>
-                {/*<InputGroupAddon>
-                <InputGroupText>R$</InputGroupText>
-              </InputGroupAddon>*/}
-
                   <InputGroupInput
                     className="pointer-events-none"
-                  value={currency.format(course?.unit_price || 0)}
+                    readOnly
+                    value={currency.format(unit_price)}
                   />
                 </InputGroup>
 
@@ -166,6 +178,7 @@ export function Assigned({ courses }: AssignedProps) {
         <Button type="submit" className="cursor-pointer">
           Continuar
         </Button>
+      </form>
     </Form>
   )
 }

apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/bulk.tsx

@@ -1,14 +1,18 @@
 import { Fragment } from 'react'
-import { PlusIcon, Trash2Icon } from 'lucide-react'
+import { MinusIcon, 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 {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput
+} from '@repo/ui/components/ui/input-group'
 import { Separator } from '@repo/ui/components/ui/separator'
 
 import { Cell } from '../_.$orgid.enrollments.add/route'
@@ -36,7 +40,7 @@ const item = z.object({
       { error: 'Escolha um curso' }
     )
     .required(),
-  quantity: z.number()
+  quantity: z.number().min(1)
 })
 
 const formSchema = z.object({
@@ -50,7 +54,8 @@ export function Bulk({ courses }: BulkProps) {
     resolver: zodResolver(formSchema),
     defaultValues: { items: [emptyRow] }
   })
-  const { formState, control, handleSubmit } = form
+  const { formState, control, handleSubmit, register, setValue, getValues } =
+    form
   const { fields, remove, append } = useFieldArray({
     control,
     name: 'items'
@@ -67,21 +72,26 @@ export function Bulk({ courses }: BulkProps) {
   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]">
+        <div className="grid w-full gap-1.5 lg:grid-cols-[4fr_2fr_2fr_2fr_auto]">
           {/* Header */}
           <>
             <Cell>Curso</Cell>
             <Cell>Quantidade</Cell>
             <Cell>Valor unit.</Cell>
+            <Cell>Total</Cell>
             <Cell>{/**/}</Cell>
           </>
 
           {/* Rows */}
           {fields.map((field, index) => {
-            const course = items?.[index]?.course
+            const item = items?.[index] || { course: {}, quantity: 1 }
+            const { course, quantity } = item
 
             return (
               <Fragment key={field.id}>
+                {/* Separator only for mobile */}
+                {index >= 1 && <div className="h-2.5 lg:hidden"></div>}
+
                 <Controller
                   control={control}
                   name={`items.${index}.course`}
@@ -108,18 +118,79 @@ export function Bulk({ courses }: BulkProps) {
                   )}
                 />
 
-                <Input type="number" defaultValue={1} />
                 <InputGroup>
-                  {/*<InputGroupAddon>
+                  <InputGroupInput
-                    <InputGroupText>R$</InputGroupText>
+                    type="number"
-                  </InputGroupAddon>*/}
+                    min={1}
+                    defaultValue={1}
+                    className="no-spinner"
+                    {...register(`items.${index}.quantity`, {
+                      valueAsNumber: true,
+                      onBlur: (e) => {
+                        const value = Number(e.target.value)
 
+                        if (!value || value < 1) {
+                          setValue(`items.${index}.quantity`, 1)
+                        }
+                      }
+                    })}
+                  />
+
+                  <InputGroupAddon align="inline-end">
+                    <InputGroupButton
+                      type="button"
+                      size="icon-xs"
+                      className="border cursor-pointer"
+                      onClick={() => {
+                        const quantity =
+                          getValues(`items.${index}.quantity`) || 1
+                        setValue(
+                          `items.${index}.quantity`,
+                          Math.max(1, quantity - 1)
+                        )
+                      }}
+                    >
+                      <MinusIcon />
+                    </InputGroupButton>
+                  </InputGroupAddon>
+
+                  <InputGroupAddon align="inline-end">
+                    <InputGroupButton
+                      type="button"
+                      size="icon-xs"
+                      className="border cursor-pointer"
+                      onClick={() => {
+                        const quantity =
+                          getValues(`items.${index}.quantity`) || 1
+                        setValue(`items.${index}.quantity`, quantity + 1)
+                      }}
+                    >
+                      <PlusIcon />
+                    </InputGroupButton>
+                  </InputGroupAddon>
+                </InputGroup>
+
+                <InputGroup>
                   <InputGroupInput
                     className="pointer-events-none"
+                    readOnly
                     value={currency.format(course?.unit_price || 0)}
                   />
                 </InputGroup>
 
+                <InputGroup>
+                  <InputGroupInput
+                    className="pointer-events-none"
+                    readOnly
+                    value={currency.format(
+                      (course?.unit_price || 0) *
+                        (Number.isFinite(quantity) && quantity > 0
+                          ? quantity
+                          : 1)
+                    )}
+                  />
+                </InputGroup>
+
                 <Button
                   tabIndex={-1}
                   variant="destructive"

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

@@ -16,6 +16,7 @@ import { Label } from '@repo/ui/components/ui/label'
 
 import { Assigned } from './assigned'
 import { Bulk } from './bulk'
+import type { Course } from '../_.$orgid.enrollments.add/data'
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: '' }]
@@ -23,7 +24,7 @@ export function meta({}: Route.MetaArgs) {
 
 export async function loader({ params, context, request }: Route.LoaderArgs) {
   const cloudflare = context.get(cloudflareContext)
-  const courses = createSearch({
+  const courses = createSearch<Course>({
     index: 'saladeaula_courses',
     sort: ['created_at:desc'],
     filter: 'unlisted NOT EXISTS',

packages/util/src/meili.ts

@@ -2,9 +2,9 @@ import { Meilisearch, type SearchResponse } from 'meilisearch'
 
 const MAX_HITS_PER_PAGE = 100
 
-export async function createSearch({
+export async function createSearch<T extends Record<string, any>>({
   query,
-  filter = undefined,
+  filter,
   index,
   page,
   hitsPerPage = 25,
@@ -18,11 +18,11 @@ export async function createSearch({
   hitsPerPage?: number
   sort: string[]
   env: any
-}): Promise<SearchResponse> {
+}): Promise<SearchResponse<T>> {
   const host = env.MEILI_HOST
   const apiKey = env.MEILI_API_KEY
   const client = new Meilisearch({ host, apiKey })
-  const index_ = client.index(index)
+  const index_ = client.index<T>(index)
 
   return index_.search(query, {
     sort,