base con autenticacion, registro, modulo encuestas

apps/web/feactures/users/components/admin/create-user-form.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button } from '@repo/shadcn/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@repo/shadcn/form';
+import { Input } from '@repo/shadcn/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@repo/shadcn/select';
+import { useForm } from 'react-hook-form';
+import { useCreateUser } from "../../hooks/use-mutation-users";
+import { CreateUser, createUser } from '../../schemas/users';
+
+const ROLES = {
+  // 1: 'Superadmin',
+  2: 'Administrador',
+  3: 'autoridad',
+  4: 'Gerente',
+  5: 'Usuario',
+  6: 'Productor',
+  7: 'Organización'
+}
+
+interface CreateUserFormProps {
+  onSuccess?: () => void;
+  onCancel?: () => void;
+  defaultValues?: Partial<CreateUser>;
+}
+
+export function CreateUserForm({
+  onSuccess,
+  onCancel,
+  defaultValues,
+}: CreateUserFormProps) {
+  const {
+    mutate: saveAccountingAccounts,
+    isPending: isSaving,
+    isError,
+  } = useCreateUser();
+
+  // const { data: AccoutingAccounts } = useSurveyMutation();
+
+  const defaultformValues = {
+    username: defaultValues?.username || '',
+    fullname: defaultValues?.fullname || '',
+    email: defaultValues?.email || '',
+    password: '',
+    confirmPassword: '',
+    id: defaultValues?.id,
+    phone: defaultValues?.phone || '',
+    role: defaultValues?.role,
+  }
+
+  const form = useForm<CreateUser>({
+    resolver: zodResolver(createUser),
+    defaultValues: defaultformValues,
+    mode: 'onChange', // Enable real-time validation
+  });
+
+  const onSubmit = async (data: CreateUser) => {
+
+    const formData = data
+
+    saveAccountingAccounts(formData, {
+      onSuccess: () => {
+        form.reset();
+        onSuccess?.();
+      },
+      onError: (e) => {
+        form.setError('root', {
+          type: 'manual',
+          message: e.message,
+        });
+      },
+    });
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        {form.formState.errors.root && (
+          <div className="text-destructive text-sm">
+            {form.formState.errors.root.message}
+          </div>
+        )}
+        <div className="grid grid-cols-2 gap-4">
+          <FormField
+            control={form.control}
+            name="username"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Usuario</FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="fullname"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nombre completo</FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Correo</FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="phone"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Teléfono</FormLabel>
+                <FormControl>
+                  <Input {...field} value={field.value?.toString() ?? ''}/>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Contraseña</FormLabel>
+                <FormControl>
+                  <Input type="password" {...field}/>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name='confirmPassword'
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Confirmar Contraseña</FormLabel>
+                <FormControl>
+                  <Input type="password" {...field}/>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="role"
+            render={({ field }) => (
+              <FormItem className="w-full">
+                <FormLabel>Rol</FormLabel>
+                <Select
+                  onValueChange={(value) => field.onChange(Number(value))}
+                  defaultValue={String(field.value)}
+                >
+                  <FormControl>
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Selecciona un rol" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent className="w-full min-w-[200px]">
+                    {Object.entries(ROLES).map(([value, label]) => (
+                      <SelectItem key={value} value={value}>
+                        {label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        <div className="flex justify-end gap-4">
+          <Button variant="outline" type="button" onClick={onCancel}>
+            Cancelar
+          </Button>
+          <Button type="submit" disabled={isSaving}>
+            {isSaving ? 'Guardando...' : 'Guardar'}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}