update billing

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

@@ -6,7 +6,11 @@ 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 {
+  InputGroup,
+  InputGroupAddon,
+  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 {
@@ -17,6 +21,7 @@ import {
 
 import {
   MAX_ITEMS,
+  formSchema,
   type Course,
   type User
 } from '../_.$orgid.enrollments.add/data'
@@ -39,11 +44,11 @@ type AssignedProps = {
 export function Assigned({ courses }: AssignedProps) {
   const { orgid } = useParams()
   const form = useForm({
-    // resolver: zodResolver(formSchema),
+    resolver: zodResolver(formSchema),
     defaultValues: { enrollments: [emptyRow] }
   })
   const { formState, control, handleSubmit } = form
-  const { fields, insert, remove, append } = useFieldArray({
+  const { fields, remove, append } = useFieldArray({
     control,
     name: 'enrollments'
   })
@@ -51,6 +56,10 @@ export function Assigned({ courses }: AssignedProps) {
     control,
     name: 'enrollments'
   })
+  const subtotal = items.reduce(
+    (acc, { course }) => acc + (course?.unit_price || 0),
+    0
+  )
 
   const onSearch = async (search: string) => {
     const params = new URLSearchParams({ q: search })
@@ -108,6 +117,7 @@ export function Assigned({ courses }: AssignedProps) {
                 {/* Separator only for mobile */}
                 {index >= 1 && <div className="h-2.5 lg:hidden"></div>}
 
+                {/* User */}
                 <Controller
                   control={control}
                   name={`enrollments.${index}.user`}
@@ -134,6 +144,7 @@ export function Assigned({ courses }: AssignedProps) {
                   )}
                 />
 
+                {/* Course */}
                 <Controller
                   control={control}
                   name={`enrollments.${index}.course`}
@@ -161,6 +172,7 @@ export function Assigned({ courses }: AssignedProps) {
                   )}
                 />
 
+                {/* Scheduled for */}
                 <Controller
                   control={control}
                   name={`enrollments.${index}.scheduled_for`}
@@ -169,7 +181,12 @@ export function Assigned({ courses }: AssignedProps) {
                   )}
                 />
 
+                {/* Unit price */}
                 <InputGroup>
+                  <InputGroupAddon className="border-r pr-2.5 w-1/3 lg:hidden justify-end">
+                    Valor unit.
+                  </InputGroupAddon>
+
                   <InputGroupInput
                     className="pointer-events-none"
                     tabIndex={-1}
@@ -178,6 +195,7 @@ export function Assigned({ courses }: AssignedProps) {
                   />
                 </InputGroup>
 
+                {/* Action */}
                 <Button
                   tabIndex={-1}
                   variant="destructive"
@@ -190,19 +208,86 @@ export function Assigned({ courses }: AssignedProps) {
               </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>
+          {/* Add button */}
+          <div className="max-lg:mb-2.5">
+            <Button
+              type="button"
+              // @ts-ignore
+              onClick={() => append(emptyRow)}
+              className="cursor-pointer"
+              disabled={fields.length == MAX_ITEMS}
+              variant="outline"
+              size="sm"
+            >
+              <PlusIcon /> Adicionar
+            </Button>
+          </div>
+
+          {/* Subtotal */}
+          <>
+            <div className="col-start-3 flex items-center justify-end text-sm font-medium max-lg:hidden">
+              Subtotal
+            </div>
+
+            <InputGroup>
+              <InputGroupAddon className="border-r pr-2.5 w-1/3 lg:hidden justify-end">
+                Subtotal
+              </InputGroupAddon>
+              <InputGroupInput
+                name="subtotal"
+                value={currency.format(subtotal)}
+                className="pointer-events-none text-muted-foreground"
+                readOnly
+              />
+            </InputGroup>
+          </>
+
+          {/* Discount */}
+          <>
+            <div className="col-start-3 flex items-center justify-end text-sm font-medium max-lg:hidden">
+              Cupom
+            </div>
+            <InputGroup>
+              <InputGroupAddon className="border-r pr-2.5 w-1/3 lg:hidden justify-end">
+                Cupom
+              </InputGroupAddon>
+              <InputGroupInput
+                name="discount"
+                value={currency.format(0)}
+                className="pointer-events-none text-muted-foreground"
+                readOnly
+              />
+              <InputGroupAddon align="inline-end">
+                <Button
+                  variant="outline"
+                  className="text-xs cursor-pointer h-6 px-2"
+                  type="button"
+                >
+                  Adicionar
+                </Button>
+              </InputGroupAddon>
+            </InputGroup>
+          </>
+
+          {/* Total */}
+          <>
+            <div className="col-start-3 flex items-center justify-end text-sm font-medium max-lg:hidden">
+              Total
+            </div>
+            <InputGroup>
+              <InputGroupAddon className="border-r pr-2.5 w-1/3 lg:hidden justify-end">
+                Total
+              </InputGroupAddon>
+              <InputGroupInput
+                name="total"
+                value={currency.format(subtotal)}
+                className="pointer-events-none text-muted-foreground"
+                readOnly
+              />
+            </InputGroup>
+          </>
+        </div>
 
         <Separator />