add other projects

apps/admin.saladeaula.digital/app/routes/_.$orgid.users.$id._index/route.tsx

@@ -0,0 +1,142 @@
+import type { Route } from './+types'
+
+import { isValidCPF } from '@brazilian-utils/brazilian-utils'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { PatternFormat } from 'react-number-format'
+import { Link, useOutletContext } from 'react-router'
+import { z } from 'zod'
+
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@/components/ui/card'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { Spinner } from '@/components/ui/spinner'
+import type { User } from '@/routes/_.$orgid.users.$id/route'
+import { useForm } from 'react-hook-form'
+
+const formSchema = z.object({
+  name: z.string().trim().nonempty('Digite seu nome'),
+  email: z.email(),
+  cpf: z
+    .string('CPF obrigatório')
+    .refine(isValidCPF, { message: 'CPF inválido' })
+})
+
+export default function Route() {
+  const { user } = useOutletContext() as { user: User }
+  const form = useForm({
+    defaultValues: user,
+    resolver: zodResolver(formSchema)
+  })
+  const { handleSubmit, control, formState } = form
+
+  const onSubmit = async (data: z.infer<typeof formSchema>) => {
+    console.log(data)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-2xl">Editar colaborador</CardTitle>
+            <CardDescription>
+              Configurar as informações gerais para este colaborador
+            </CardDescription>
+          </CardHeader>
+
+          <CardContent className="space-y-4">
+            <FormField
+              control={control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Nome</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={control}
+              name="email"
+              disabled={true}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormLabel className="text-sm font-normal text-muted-foreground">
+                    <span>
+                      Para gerenciar os emails ou trocar o email principal, use
+                      as{' '}
+                      <Link
+                        to="emails"
+                        className="text-blue-400 underline hover:no-underline"
+                      >
+                        configurações de emails
+                      </Link>
+                    </span>
+                  </FormLabel>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={control}
+              name="cpf"
+              render={({ field: { onChange, ref, ...props } }) => (
+                <FormItem>
+                  <FormLabel>CPF</FormLabel>
+                  <FormControl>
+                    <PatternFormat
+                      format="###.###.###-##"
+                      mask="_"
+                      placeholder="___.___.___-__"
+                      customInput={Input}
+                      getInputRef={ref}
+                      onValueChange={({ value }) => {
+                        onChange(value)
+                      }}
+                      {...props}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CardContent>
+        </Card>
+
+        <div className="flex justify-end">
+          <Button
+            type="submit"
+            className="cursor-pointer"
+            disabled={formState.isSubmitting}
+          >
+            {formState.isSubmitting && <Spinner />}
+            Editar colaborador
+          </Button>
+        </div>
+      </form>
+    </Form>
+  )
+}