feat: enhance SignupPage with user type selection and validation

libs/auth/src/lib/pages/SignupPage.tsx

@@ -6,6 +6,7 @@ import {
   Checkbox,
   Group,
   PasswordInput,
+  Select,
   SimpleGrid,
   Stack,
   Text,
@@ -20,7 +21,7 @@ import {
   IconMail,
   IconUser,
 } from '@tabler/icons-react';
-import { useForm } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { useNavigate, Link } from 'react-router-dom';
@@ -32,12 +33,21 @@ import { loginSuccess, setUser } from '../store/auth.slice';
 import type { AuthUser } from '../types/auth.types';
 import { useAuthConfig } from '../AuthConfig';
 
+const USER_TYPE_OPTIONS = [
+  { value: 'credit', label: 'Credit' },
+  { value: 'logistics', label: 'Logistics' },
+  { value: 'registration', label: 'Registration' },
+  { value: 'transfer', label: 'Transfer' },
+];
+
 const schema = z
   .object({
     email: z.string().email(),
     username: z.string().min(3, { message: 'Username must be at least 3 characters' }),
     phoneNumber: z.string().min(1, { message: 'Phone number is required' }),
-    userType: z.literal('individual'),
+    userType: z.enum(['credit', 'logistics', 'registration', 'transfer'], {
+      message: 'User type is required',
+    }),
     nameEn: z.string().min(1, { message: 'Name (English) is required' }),
     nameAm: z.string().optional(),
     password: z.string().min(8, { message: 'Password must be at least 8 characters' }),
@@ -80,10 +90,10 @@ export function SignupPage() {
   const {
     register,
     handleSubmit,
+    control,
     formState: { errors },
   } = useForm<FormValues>({
     resolver: zodResolver(schema),
-    defaultValues: { userType: 'individual' },
   });
 
   const onSubmit = async (values: FormValues) => {
@@ -188,6 +198,20 @@ export function SignupPage() {
               />
             </SimpleGrid>
 
+            <Controller
+              control={control}
+              name="userType"
+              render={({ field }) => (
+                <Select
+                  label="User type"
+                  placeholder="Select user type"
+                  data={USER_TYPE_OPTIONS}
+                  error={errors.userType?.message}
+                  {...field}
+                />
+              )}
+            />
+
             <TextInput
               label="Phone number"
               placeholder="+251 911 234 567"