user form working

src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx

@@ -364,7 +364,7 @@ const ViewIOdetails = () => {
       >
         Edit IO
       </Button>
-      <FormInputView  groupedFields={groupedFields} />{" "}
+      <FormInputView  groupedFields={groupedFields} />
     </Box>
   );
 };

src/Pages/User/AddUser.jsx

@@ -1,13 +1,155 @@
-import { Box } from '@chakra-ui/react'
-import React from 'react'
-import { OPACITY_ON_LOAD } from '../../Layout/animations'
+import React, { useState } from "react";
+import { Box, useToast } from "@chakra-ui/react";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+import { useNavigate, useParams } from "react-router-dom";
+import FormInputMain from "../../Components/FormInputMain";
+import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
 
-const AddUser = () => {
-  return (
-    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
+// Validation schema
+export const addSponser = yup.object().shape({
+  firstName: yup
+    .string()
+    .min(2, "First name must be at least 2 characters")
+    .max(35, "First name cannot exceed 35 characters")
+    .required("First name is required"),
 
-    </Box>
-  )
+  lastName: yup
+    .string()
+    .min(2, "Last name must be at least 2 characters")
+    .max(35, "Last name cannot exceed 35 characters")
+    .required("Last name is required"),
+
+  emailAddress: yup
+    .string()
+    .email("Email address must be a valid email")
+    .required("Email address is required"),
+  mobileNumber: yup
+    .string()
+    .matches(/^[0-9]+$/, "Mobile number must be digits only")
+    .min(8, "Mobile number must be at least 8 digits")
+    .max(15, "Mobile number must be at most 15 digits")
+    .required("Mobile number is required"),
+  ISDcode: yup.string().required("ISD code is required"),
+  role_xid: yup.string().required("Role ID is required"), // Assuming role_xid is a required string field
+});
+
+// Debounce function (if needed)
+export function debounce(func, delay) {
+  let debounceTimer;
+  return function (...args) {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => func.apply(this, args), delay);
+  };
 }
 
-export default AddUser
+const AddUser = () => {
+  const toast = useToast();
+  const params = useParams();
+  const navigate = useNavigate();
+  const id = params?.id;
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [alert, setAlert] = useState(false);
+  const [form, setForm] = useState(null);
+  const [isSwitchOn, setIsSwitchOn] = useState(true);
+
+  // React Hook Form setup
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(addSponser),
+  });
+
+  // Form fields configuration
+  const formFields = [
+    {
+      label: "First Name",
+      placeHolder: " ",
+      name: "firstName",
+      type: "text",
+      isRequired: true,
+      section: "Add Users",
+    },
+    {
+      label: "Last Name",
+      name: "lastName",
+      placeHolder: " ",
+      type: "text",
+      isRequired: true,
+      section: "Add Users",
+    },
+    {
+      label: "Email address",
+      name: "emailAddress",
+      placeHolder: " ",
+      type: "email",
+      isRequired: true,
+      section: "Add Users",
+    },
+    {
+      label: "Mobile Number",
+      name: "mobileNumber",
+      placeHolder: " ",
+      type: "number",
+      isRequired: true,
+      section: "Add Users",
+    },
+    {
+      label: "ISD Code",
+      name: "ISDcode",
+      placeHolder: " ",
+      type: "text",
+      isRequired: true,
+      section: "Add Users",
+    },
+  ];
+
+  // Grouping fields by section (if needed)
+  const groupedFields = formFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
+  // Handle form submission
+  // const onSubmit = async (data) => {
+  //   if (Object.keys(errors).length === 0) {
+  //     setForm(data);
+  //     setAlert(true);
+  //     console.log(data); // Display the form data in the console
+  //   }
+  // };
+
+  const onSubmit = async (data) => {
+    if (Object.keys(errors).length === 0) {
+      setForm(data);
+      setAlert(true);
+      console.log(data); // Display the form data in the console
+    }
+  };
+  
+
+  return isLoading ? (
+    <FullscreenLoaders />
+  ) : (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14} mt={5}>
+      {/* Form Input */}
+      <FormInputMain
+        groupedFields={groupedFields}
+        control={control}
+        errors={errors}
+        onSubmit={handleSubmit(onSubmit)}
+      />
+    </Box>
+  );
+};
+
+export default AddUser;