create member form funcitonnal

frontend/app/(auth)/dashboard/members/new/page.tsx

@@ -21,25 +21,45 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
+import useApiMutation from "@/hooks/use-api";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select"
 
 const formSchema = z.object({
-	firstname: z.string().min(2, { message: "Prénom trop court" }),
-	lastname: z.string().min(2, { message: "Nom trop court" }),
+	firstname: z.string().min(2, { message: "Prénom trop court." }),
+	lastname: z.string().min(2, { message: "Nom trop court." }),
+	role: z.enum(["admin", "user"], { message: "Rôle invalide." }),
 	phone: z
 		.string()
-		.min(10, { message: "Un numéro de téléphone à 10 chiffres" }),
-	email: z.string().email({ message: "Invalid email address" }),
-	message: z
-		.string()
-		.min(10, { message: "Message must be at least 10 characters long" }),
+		.max(10, { message: "Un numéro de téléphone à 10 chiffres." })
+		.optional(),
+	email: z.string().email({ message: "Email invalide." })
 });
 
-export default function ContactFormPreview() {
+export default function CreateMemberForm() {
+	const {
+		trigger
+	} = useApiMutation(
+		"/users/new",
+		{ onSuccess: () => console.log("Member created") },
+		"POST",
+		true,
+		false
+	)
+
 	const form = useForm<z.infer<typeof formSchema>>({
 		resolver: zodResolver(formSchema),
 		defaultValues: {
 			firstname: "",
 			lastname: "",
+			role: "user",
 			phone: "",
 			email: "",
 		},
@@ -47,25 +67,24 @@ export default function ContactFormPreview() {
 
 	async function onSubmit(values: z.infer<typeof formSchema>) {
 		try {
-			console.log(values);
-			await fetch("/api/users/new", {
-				method: "POST",
-				body: JSON.stringify(values),
-			});
+			const res = await trigger(values)
+			if (!res) throw new Error("The server hasn't responded.");
+			if (res.status === "Error") throw new Error(res.message);	
 		} catch (error) {
 			console.error("Form submission error", error);
 		}
-		console.log("subimted");
+		console.log("submited");
 	}
 
 	return (
 		<div className="flex min-h-[60vh] h-full w-full items-center justify-center px-4">
 			<Card className="mx-auto max-w-md">
 				<CardHeader>
-					<CardTitle className="text-2xl">Contact Us</CardTitle>
+					<CardTitle className="text-2xl">Création de membre</CardTitle>
 					<CardDescription>
-						Please fill out the form below and we will get back to
-						you shortly.
+						Remplissez les différents champs pour créer un membre.
+						Un code sera envoyé par mail à l'utilisateur.
+						Il pourra ensuite modifier le mot de passe de son compte avec ce code.
 					</CardDescription>
 				</CardHeader>
 				<CardContent>
@@ -90,6 +109,7 @@ export default function ContactFormPreview() {
 													placeholder="John Doe"
 													type="text"
 													autoComplete="firstname"
+
 													{...field}
 												/>
 											</FormControl>
@@ -113,6 +133,7 @@ export default function ContactFormPreview() {
 														placeholder="John Doe"
 														type="text"
 														autoComplete="lastname"
+
 														{...field}
 													/>
 												</FormControl>
@@ -136,6 +157,7 @@ export default function ContactFormPreview() {
 														placeholder="johndoe@mail.com"
 														type="email"
 														autoComplete="email"
+
 														{...field}
 													/>
 												</FormControl>
@@ -144,7 +166,36 @@ export default function ContactFormPreview() {
 										)}
 									/>
 
-									{/* Message Field */}
+									<FormField
+										control={form.control}
+										name="role"
+										render={({ field }) => (
+											<FormItem className="grid gap-2">
+												<FormLabel htmlFor="role">
+													Role
+												</FormLabel>
+												<FormControl>
+													<Select 
+														value={field.value}
+														onValueChange={(value: string) => field.onChange(value)}>
+														<SelectTrigger className="w-[180px]">
+															<SelectValue placeholder="Select a role" />
+														</SelectTrigger>
+														<SelectContent>
+															<SelectGroup>
+																<SelectLabel>Role</SelectLabel>
+																<SelectItem value="admin">Administrateur</SelectItem>
+																<SelectItem value="user">Utilisateur</SelectItem>
+															</SelectGroup>
+														</SelectContent>
+													</Select>
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+
+									{/* Phone Field */}
 									<FormField
 										control={form.control}
 										name="phone"
@@ -157,8 +208,9 @@ export default function ContactFormPreview() {
 													<Input
 														id="phone"
 														placeholder="0648265441"
-														type="number"
+														type="tel"
 														autoComplete="phone"
+
 														{...field}
 													/>
 												</FormControl>