update block

apps/insights.saladeaula.digital/app/routes/_app.orgs.$id._index/route.tsx

@@ -1,6 +1,7 @@
 import type { Route } from './+types/route'
 
 import { useForm } from 'react-hook-form'
+import { PatternFormat } from 'react-number-format'
 import { useOutletContext } from 'react-router'
 
 import { Button } from '@repo/ui/components/ui/button'
@@ -22,10 +23,12 @@ import {
 } from '@repo/ui/components/ui/form'
 import { Input } from '@repo/ui/components/ui/input'
 
+import type { Org } from '../_app.orgs.$id/data'
+
 export default function Route({}: Route.ComponentProps) {
-  const { org } = useOutletContext()
+  const { org } = useOutletContext() as { org: Org }
   const form = useForm({ defaultValues: org })
-  const { handleSubmit, formState } = form
+  const { handleSubmit, control } = form
 
   const onSubmit = async () => {}
 
@@ -45,7 +48,7 @@ export default function Route({}: Route.ComponentProps) {
           <CardContent className="space-y-6">
             <FieldSet disabled={true}>
               <FormField
-                control={form.control}
+                control={control}
                 name="name"
                 render={({ field }) => (
                   <FormItem>
@@ -59,7 +62,7 @@ export default function Route({}: Route.ComponentProps) {
               />
 
               <FormField
-                control={form.control}
+                control={control}
                 name="email"
                 render={({ field }) => (
                   <FormItem>
@@ -73,13 +76,28 @@ export default function Route({}: Route.ComponentProps) {
               />
 
               <FormField
-                control={form.control}
+                control={control}
                 name="cnpj"
-                render={({ field }) => (
+                render={({
+                  field: { onChange, ref, ...field },
+                  fieldState
+                }) => (
                   <FormItem>
                     <FormLabel>CNPJ</FormLabel>
                     <FormControl>
-                      <Input {...field} />
+                      <PatternFormat
+                        id={field.name}
+                        format="##.###.###/####-##"
+                        mask="_"
+                        placeholder="__.___.___/____-__"
+                        customInput={Input}
+                        getInputRef={ref}
+                        aria-invalid={fieldState.invalid}
+                        onValueChange={({ value }) => {
+                          onChange(value)
+                        }}
+                        {...field}
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>