updated

src/Pages/Onboarding/OnboardingAboutCompany.jsx

@@ -25,6 +25,7 @@ import * as Yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { ArrowBackIcon, ArrowForwardIcon } from "@chakra-ui/icons";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { useSentFileMutation } from "../../Services/token.serivce";
 
 // Validation schema using Yup
 const validationSchema = Yup.object().shape({
@@ -33,6 +34,8 @@ const validationSchema = Yup.object().shape({
   mobileNumber_corporate: Yup.string()
     .matches(/^\d{10}$/, "Phone number must be 10 digits")
     .required("Phone number is required"),
+    logo_path_file_name: Yup.mixed()
+    .required("Company logo is required"),
 });
 
 const OnboardingAboutCompany = ({
@@ -43,11 +46,15 @@ const OnboardingAboutCompany = ({
   steps,
   handleNext,
 }) => {
-  const { data, isLoading } = useGetPrePopQuery();
+  const { data } = useGetPrePopQuery();
 
   console.log(data?.data?.prepopulateData);
 
   const [phone, setPhone] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [fileName, setFileName] = useState("");
+
+  const [ sendFile ] = useSentFileMutation()
 
   // Setup form handling with react-hook-form
   const {
@@ -71,16 +78,50 @@ const OnboardingAboutCompany = ({
         .splice(countryCode.length - 1, 15)
         .join("")
     ); // Sync phone number
-    setValue("ISDcode_corporate", countryCode); // Sync ISD code
+    setValue("ISDCode_corporate", countryCode); // Sync ISD code
   };
 
-  // Handle form submission
-  const onSubmit = (data) => {
-    setCorpData({ ...corpData, ...data });
+
+  const onSubmit = async (data) => {
+    setIsLoading(true)
+    
+
+    const formData = new FormData();
+    formData.append("document", data.logo_path_file_name[0]); // Append file
+
+    const code = localStorage?.getItem("codeCorporate");
+    try {
+      const res = await sendFile({data:formData, code}); // Upload file to server
+
+      if (res?.data?.data) {
+        // Assuming res.data.data contains the file URL or some ID
+        setValue("logo_path_file_name", res?.data?.data); // Set value with server response
+        setCorpData({ ...corpData, ...data });
+        setIsLoading(false)
+      }
+    } catch (error) {
+      console.error("File upload failed", error);
+    }
+
     handleNext();
     // Handle your submit logic here
   };
 
+  const handleFileChange = (e) => {
+    const files = e.target.files;
+    if (files && files.length > 0) {
+      // Assuming only one file is allowed
+      setFileName(files.name);
+      console.log(files);
+
+
+      setValue("logo_path_file_name", files); // Update react-hook-form state
+    }
+  };
+
+  
+
+
   return (
     <Box {...OPACITY_ON_LOAD}>
       <Text color={"#49475A"} fontWeight={500} fontSize={"sm"} mb={1}>
@@ -211,9 +252,25 @@ const OnboardingAboutCompany = ({
               type="file"
               id="company-logo-file-input"
               style={{ display: "none" }} // Hide the file input
+
+      onChange={(e) => {
+        handleFileChange(e); // Handle file input
+      }}
             />
+
+          {fileName && (
+            <Text fontSize="sm" mt={2}>
+              Uploaded file: {fileName}
+            </Text>
+          )}
           </Box>
 
+  {errors.logo_path_file_name && (
+    <Text color="red" fontWeight={500} fontSize="xs">
+      {errors.logo_path_file_name.message}
+    </Text>
+  )}
+
           <HStack justifyContent={"space-between"}>
             <Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
               Supported formats- jpg, png, svg
@@ -247,6 +304,7 @@ const OnboardingAboutCompany = ({
               rightIcon={<ArrowForwardIcon />}
               w={"100%"}
               type="submit"
+              isLoading={isLoading}
             >
               {activeStep === steps.length - 1 ? "Next step" : "Next step"}
             </Button>

src/Pages/Onboarding/OnboardingAddCompanyDetails.jsx

@@ -1,38 +1,117 @@
-import React from 'react';
-import { Box, Input, Text, VStack, HStack, FormLabel } from '@chakra-ui/react';
+import React, { useState } from 'react';
+import { Box, Input, Text, VStack, HStack, FormLabel, IconButton, Button } from '@chakra-ui/react';
 import { SlCloudUpload } from 'react-icons/sl';
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
 import { OPACITY_ON_LOAD } from '../../Layout/animations';
+import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
+import { useSentFileMutation } from '../../Services/token.serivce';
 
 // Yup validation schema
 const schema = yup.object().shape({
-    cin: yup
+    cin_number: yup
         .string()
         .required('CIN is required')
         .matches(/^[A-Za-z0-9]{21}$/, 'CIN must be exactly 21 characters long'),
-    pan: yup
+    pancard_number: yup
         .string()
         .required('Company PAN is required')
         .matches(/[A-Z]{5}[0-9]{4}[A-Z]{1}$/, 'Invalid PAN format'),
-    gst: yup
+    gst_number: yup
         .string()
         .required('GST number is required')
         .matches(/\d{2}[A-Z]{5}\d{4}[A-Z]{1}[A-Z\d]{1}[Z]{1}[A-Z\d]{1}/, 'Invalid GST number format'),
-    // gstFile: yup.mixed().required('GST certificate is required'),
-    // panFile: yup.mixed().required('PAN card is required'),
+    gst_file_path_name: yup.mixed().required('GST certificate is required'),
+    pancard_file_path_name: yup.mixed().required('PAN card is required'),
 });
 
-const OnboardingAddCompanyDetails = () => {
-    const { register, handleSubmit, formState: { errors } } = useForm({
+const OnboardingAddCompanyDetails = ({
+  corpData,
+  setCorpData,
+  setActiveStep,
+  activeStep,
+  steps,
+  handleNext,
+}) => {
+    const { register, handleSubmit, setValue, formState: { errors } } = useForm({
         resolver: yupResolver(schema),
     });
 
+
+  const [fileName, setFileName] = useState("");
+  const [ sendFile ] = useSentFileMutation()
+
     const onSubmit = (data) => {
         console.log('Form Data:', data);
+    setCorpData({ ...corpData, ...data });
+    handleNext();
     };
 
+
+
+  const handleFileChangeGst = async (e) => {
+    console.log("hit");
+    const files = e.target.files;
+    console.log(files);
+    if (files && files.length > 0) {
+      // Assuming only one file is allowed
+      setFileName(files.name);
+      console.log(files);
+
+      const formData = new FormData();
+    formData.append("document", files[0]); // Append file
+
+
+      const code = localStorage?.getItem("codeCorporate");
+      try {
+        const res = await sendFile({data:formData, code}); // Upload file to server
+  
+        if (res?.data?.data) {
+            console.log(res?.data?.data);
+          // Assuming res.data.data contains the file URL or some ID
+          setValue("gst_file_path_name", res?.data?.data); // Set value with server response
+        //   setCorpData({ ...corpData, ...data });
+          setIsLoading(false)
+        }
+      } catch (error) {
+        console.error("File upload failed", error);
+      }
+  
+      
+
+      // setValue("logo_path_file_name", files); // Update react-hook-form state
+    }
+  };
+
+
+
+  const handleFileChangePan = async (e) => {
+    const files = e.target.files;
+    if (files && files.length > 0) {
+      // Assuming only one file is allowed
+      setFileName(files.name);
+      const formData = new FormData();
+    formData.append("document", files[0]); // Append file
+      const code = localStorage?.getItem("codeCorporate");
+      try {
+        const res = await sendFile({data:formData, code}); // Upload file to server
+        if (res?.data?.data) {
+          // Assuming res.data.data contains the file URL or some ID
+          setValue("pancard_file_path_name", res?.data?.data); // Set value with server response
+        //   setCorpData({ ...corpData, ...data });
+          setIsLoading(false)
+        }
+      } catch (error) {
+        console.error("File upload failed", error);
+      }
+    }
+  };
+
+
+
+
+
     return (
     <Box {...OPACITY_ON_LOAD}>
             <Text color={'#49475A'} fontWeight={500} fontSize={'sm'} mb={1}>
@@ -54,9 +133,9 @@ const OnboardingAddCompanyDetails = () => {
                         borderRadius="md"
                         fontSize={"sm"}
                         fontWeight={500}
-                        {...register('cin')}
+                        {...register('cin_number')}
                     />
-                    {errors.cin && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.cin.message}</Text>}
+                    {errors.cin_number && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.cin_number.message}</Text>}
                 </Box>
 
                 {/* Company PAN Field */}
@@ -70,9 +149,9 @@ const OnboardingAddCompanyDetails = () => {
                         borderRadius="md"
                         fontSize={"sm"}
                         fontWeight={500}
-                        {...register('pan')}
+                        {...register('pancard_number')}
                     />
-                    {errors.pan && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.pan.message}</Text>}
+                    {errors.pancard_number && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.pancard_number.message}</Text>}
                 </Box>
 
                 {/* Company GST Number */}
@@ -86,9 +165,9 @@ const OnboardingAddCompanyDetails = () => {
                         borderRadius="md"
                         fontSize={"sm"}
                         fontWeight={500}
-                        {...register('gst')}
+                        {...register('gst_number')}
                     />
-                    {errors.gst && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.gst.message}</Text>}
+                    {errors.gst_number && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.gst_number.message}</Text>}
                 </Box>
 
                 {/* Upload GST Certificate */}
@@ -118,7 +197,7 @@ const OnboardingAddCompanyDetails = () => {
                                 mt={'2'}
                                 mb={0}
                             >
-                                Drag and drop files here or{' '}
+                                Drag and drop files  or{' '}
                                 <Text as="span" textDecoration="underline">
                                     Choose file
                                 </Text>
@@ -128,10 +207,13 @@ const OnboardingAddCompanyDetails = () => {
                             type="file"
                             id="gst-file-input"
                             style={{ display: 'none' }}
-                            {...register('gstFile')}
+                            
+      onChange={(e) => {
+        handleFileChangeGst(e); // Handle file input
+      }}
                         />
                     </Box>
-                    {errors.gstFile && <Text color="red.500" fontSize="xs">{errors.gstFile.message}</Text>}
+                    {errors.gst_file_path_name && <Text color="red.500" fontSize="xs">{errors.gst_file_path_name.message}</Text>}
 
                     <HStack justifyContent={"space-between"}>
                         <Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
@@ -180,7 +262,11 @@ const OnboardingAddCompanyDetails = () => {
                             type="file"
                             id="pan-file-input"
                             style={{ display: 'none' }}
-                            {...register('panFile')}
+                                                        
+      onChange={(e) => {
+        handleFileChangePan(e); // Handle file input
+      }}
+          
                         />
                     </Box>
                     {errors.panFile && <Text color="red.500" fontSize="xs">{errors.panFile.message}</Text>}
@@ -196,7 +282,7 @@ const OnboardingAddCompanyDetails = () => {
                 </Box>
 
                 {/* Submit Button */}
-                <Box mt={6}>
+                {/* <Box mt={6}>
                     <Text
                         as="button"
                         bg={'#6311CB'}
@@ -209,7 +295,38 @@ const OnboardingAddCompanyDetails = () => {
                     >
                         Submit
                     </Text>
-                </Box>
+                </Box> */}
+
+
+
+          <HStack mt={6}>
+            <IconButton
+              aria-label="Back"
+              icon={<ArrowBackIcon />}
+              variant="outline"
+              size="sm"
+              px={8}
+              _hover={{ opacity: 0.8 }}
+              color={"#d0b8ef"}
+              border={"1px solid #d0b8ef"}
+              isDisabled={activeStep === 0}
+              onClick={() => setActiveStep(activeStep - 1)}
+            />
+
+            <Button
+              bg={"#6311CB"}
+              color={"#fff"}
+              fontSize={"xs"}
+              fontWeight={500}
+              size="sm"
+              _hover={{ opacity: 0.8 }}
+              rightIcon={<ArrowForwardIcon />}
+              w={"100%"}
+              type="submit"
+            >
+              {activeStep === steps.length - 1 ? "Next step" : "Next step"}
+            </Button>
+          </HStack>
             </Box>
         </Box>
     );

src/Pages/Onboarding/OnboardingDirectorDetails.jsx

@@ -1,294 +1,395 @@
-import React, { useState } from 'react';
-import { Box, Input, Text, VStack, HStack } from '@chakra-ui/react';
-import { SlCloudUpload } from 'react-icons/sl';
-import PhoneInput from 'react-phone-input-2';
+import React, { useState } from "react";
+import { Box, Input, Text, VStack, HStack, IconButton, Button } from "@chakra-ui/react";
+import { SlCloudUpload } from "react-icons/sl";
+import PhoneInput from "react-phone-input-2";
+import { useSentFileMutation } from "../../Services/token.serivce";
+import { ArrowBackIcon, ArrowForwardIcon } from "@chakra-ui/icons";
 
-const OnboardingDirectorDetails = () => {
-    const [directorForms, setDirectorForms] = useState([
-        { id: 1, directorName: '', directorEmail: '', directorPhone: '', selectedPanImage: '', selectedAadharImage: '' }
+const OnboardingDirectorDetails = ({
+  corpData,
+  setCorpData,
+  setActiveStep,
+  activeStep,
+  steps,
+  handleNext,
+}) => {
+  const [directorForms, setDirectorForms] = useState([
+    {
+      director_name: "",
+      emailAddress: "",
+      ISDCode: "",
+      mobileNumber: "",
+      pancard_file_path_name: "",
+      aadhar_file_path_name: "",
+    },
+  ]);
+
+  const [directorFormErrors, setDirectorFormErrors] = useState([]);
+  const [ isLoading, setIsLoading ] = useState(false)
+
+  const [sendFile] = useSentFileMutation();
+  async function uploadFile(file) {
+    const formData = new FormData();
+    formData.append("document", file); // Append file
+    const code = localStorage?.getItem("codeCorporate");
+    try {
+      const res = await sendFile({ data: formData, code }); // Upload file to server
+      return res?.data?.data;
+    } catch (error) {
+      console.error("File upload failed", error);
+    }
+  }
+
+  // Add new director form
+  const handleAddDirector = () => {
+    setDirectorForms([
+      ...directorForms,
+      {
+        director_name: "",
+        emailAddress: "",
+        mobileNumber: "",
+        pancard_file_path_name: "",
+        aadhar_file_path_name: "",
+      },
     ]);
+  };
 
-    const [directorFormErrors, setDirectorFormErrors] = useState([]);
+  // Update the form field for a particular director
+  const handleFieldChange = (index, field, value, country = {}) => {
+    const updatedForms = [...directorForms];
+    if (field === "mobileNumber") {
+      const countryCode = `+${country.dialCode}`;
+      updatedForms[index]["ISDCode"] = countryCode;
+      updatedForms[index]["mobileNumber"] = value
+        .split("")
+        .splice(countryCode.length - 1, 15)
+        .join("");
+    }
+    updatedForms[index][field] = value;
+    setDirectorForms(updatedForms);
+  };
 
-    // Add new director form
-    const handleAddDirector = () => {
-        setDirectorForms([
-            ...directorForms,
-            { id: directorForms.length + 1, directorName: '', directorEmail: '', directorPhone: '', selectedPanImage: '', selectedAadharImage: '' }
-        ]);
-    };
+  // Handle file upload for PAN and Aadhar
+  const handleFileUpload = async (index, field, event) => {
+    const file = event.target.files[0];
+    if (file) {
+      const filePath = await uploadFile(file);
+      const updatedForms = [...directorForms];
+      updatedForms[index][field] = filePath; // Store file name (or file object)
+      setDirectorForms(updatedForms);
+    }
+  };
 
-    // Update the form field for a particular director
-    const handleFieldChange = (index, field, value) => {
-        const updatedForms = [...directorForms];
-        updatedForms[index][field] = value;
-        setDirectorForms(updatedForms);
-    };
+  // Basic validation for each field
+  const validateForm = () => {
+    const errors = directorForms.map((directorForm) => {
+      let formErrors = {};
 
-    // Handle file upload for PAN and Aadhar
-    const handleFileUpload = (index, field, event) => {
-        const file = event.target.files[0];
-        if (file) {
-            const updatedForms = [...directorForms];
-            updatedForms[index][field] = file.name; // Store file name (or file object)
-            setDirectorForms(updatedForms);
-        }
-    };
+      if (!directorForm.director_name) {
+        formErrors.director_name = "Director Name is required.";
+      }
 
-    // Basic validation for each field
-    const validateForm = () => {
-        const errors = directorForms.map((directorForm) => {
-            let formErrors = {};
+      if (
+        !directorForm.emailAddress ||
+        !/\S+@\S+\.\S+/.test(directorForm.emailAddress)
+      ) {
+        formErrors.emailAddress = "Please enter a valid email address.";
+      }
 
-            if (!directorForm.directorName) {
-                formErrors.directorName = "Director Name is required.";
-            }
+      if (
+        !directorForm.mobileNumber ||
+        directorForm.mobileNumber.length < 10
+      ) {
+        formErrors.mobileNumber =
+          "Phone number is required and should be at least 10 digits.";
+      }
 
-            if (!directorForm.directorEmail || !/\S+@\S+\.\S+/.test(directorForm.directorEmail)) {
-                formErrors.directorEmail = "Please enter a valid email address.";
-            }
+      if (!directorForm.pancard_file_path_name) {
+        formErrors.pancard_file_path_name = "Please upload a PAN file.";
+      }
 
-            if (!directorForm.directorPhone || directorForm.directorPhone.length < 10) {
-                formErrors.directorPhone = "Phone number is required and should be at least 10 digits.";
-            }
+      if (!directorForm.aadhar_file_path_name) {
+        formErrors.aadhar_file_path_name = "Please upload an Aadhar file.";
+      }
 
-            if (!directorForm.selectedPanImage) {
-                formErrors.selectedPanImage = "Please upload a PAN file.";
-            }
+      return formErrors;
+    });
 
-            if (!directorForm.selectedAadharImage) {
-                formErrors.selectedAadharImage = "Please upload an Aadhar file.";
-            }
+    setDirectorFormErrors(errors);
 
-            return formErrors;
-        });
-
-        setDirectorFormErrors(errors);
-
-        // Check if all forms are valid (no errors in any form)
-        const isValid = errors.every((formErrors) => Object.keys(formErrors).length === 0);
-        return isValid;
-    };
-
-    // Handle form submission
-    const handleSubmit = () => {
-        if (validateForm()) {
-            console.log("Form is valid, proceed with submission.");
-        } else {
-            console.log("Form has errors.");
-        }
-    };
-
-    return (
-        <Box>
-            <Text color={'#49475A'} fontWeight={500} fontSize={'sm'} mb={1}>
-                Add director details
-            </Text>
-            <Text color={'#49475A'} fontWeight={500} fontSize={'xs'}>
-                Lorem ipsum dolor sit amet, adipiscing elit.
-            </Text>
-
-            {directorForms?.map((directorForm, index) => (
-                <Box key={index} mb={6}>
-                    <Text color={'#49475A'} fontWeight={600} fontSize={'sm'} mb={2}>
-                        Director {index + 1}
-                    </Text>
-                    <Box
-                        as="form"
-                        bg={"#f7f7fb"}
-                        p={4}
-                        borderRadius={"md"}
-                        boxShadow={"md"}
-                    >
-                        {/* Director Name Field */}
-                        <Box mb={3}>
-                            <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
-                                Director Name
-                            </Text>
-                            <Input
-                                type='text'
-                                border="1px solid #e2e8f0"
-                                borderRadius="md"
-                                fontSize={"sm"}
-                                fontWeight={500}
-                                bg={"#fff"}
-                                placeholder="Enter director name"
-                                value={directorForm.directorName}
-                                onChange={(e) => handleFieldChange(index, 'directorName', e.target.value)}
-                            />
-                            {directorFormErrors[index]?.directorName && (
-                                <Text color="red.500" fontSize="xs">{directorFormErrors[index].directorName}</Text>
-                            )}
-                        </Box>
-
-                        {/* Director Email Field */}
-                        <Box mb={3}>
-                            <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
-                                Email
-                            </Text>
-                            <Input
-                                type='email'
-                                border="1px solid #e2e8f0"
-                                borderRadius="md"
-                                fontSize={"sm"}
-                                fontWeight={500}
-                                bg={"#fff"}
-                                placeholder="Enter email"
-                                value={directorForm.directorEmail}
-                                onChange={(e) => handleFieldChange(index, 'directorEmail', e.target.value)}
-                            />
-                            {directorFormErrors[index]?.directorEmail && (
-                                <Text color="red.500" fontSize="xs">{directorFormErrors[index].directorEmail}</Text>
-                            )}
-                        </Box>
-
-                        {/* Director Phone Number */}
-                        <Box mb={3}>
-                            <Text
-                                color={"#344054"}
-                                fontSize={"xs"}
-                                fontWeight={500}
-                                mb={1}
-                            >
-                                Phone Number
-                            </Text>
-                            <PhoneInput
-                                country={"in"}
-                                value={directorForm.directorPhone}
-                                onChange={(value) => handleFieldChange(index, 'directorPhone', value)}
-                                inputStyle={{
-                                    width: "100%",
-                                    borderRadius: "md",
-                                    paddingLeft: "6",
-                                    border: "1px solid #e2e8f0",
-                                    height: "40px"
-                                }}
-                                buttonStyle={{
-                                    border: "none",
-                                    borderRadius: "8px 0 0 8px",
-                                    backgroundColor: "transparent",
-                                }}
-                            />
-                            {directorFormErrors[index]?.directorPhone && (
-                                <Text color="red.500" fontSize="xs">{directorFormErrors[index].directorPhone}</Text>
-                            )}
-                        </Box>
-
-                        {/* Upload Pan */}
-                        <Box mb={3}>
-                            <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
-                                Upload Pan
-                            </Text>
-                            <Box my={2}
-                                position="relative"
-                                onClick={() => document.getElementById(`pan-file-input-${index}`).click()}
-                            >
-                                <VStack
-                                    border={"1px dashed #D0D5DD"}
-                                    boxShadow={"md"}
-                                    borderRadius={"md"}
-                                    bg={"#faf8fd"}
-                                    p={4}
-                                    h={"28"}
-                                    justifyContent={"center"}
-                                    cursor="pointer"
-                                >
-                                    <SlCloudUpload color={"#191D23"} size={30} />
-                                    <Text
-                                        color={"#191D23"}
-                                        fontWeight={"500"}
-                                        fontSize={"sm"}
-                                        mt={'2'}
-                                        mb={0}
-                                    >
-                                        {directorForm.selectedPanImage || "Drag and drop files here or Choose file"}
-                                    </Text>
-                                </VStack>
-                                <input
-                                    type="file"
-                                    id={`pan-file-input-${index}`}
-                                    style={{ display: 'none' }}
-                                    onChange={(e) => handleFileUpload(index, 'selectedPanImage', e)}
-                                />
-                            </Box>
-                            {directorFormErrors[index]?.selectedPanImage && (
-                                <Text color="red.500" fontSize="xs">{directorFormErrors[index].selectedPanImage}</Text>
-                            )}
-                        </Box>
-
-                        {/* Upload Aadhar */}
-                        <Box mb={3}>
-                            <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
-                                Upload Aadhar
-                            </Text>
-                            <Box my={2}
-                                position="relative"
-                                onClick={() => document.getElementById(`aadhar-file-input-${index}`).click()}
-                            >
-                                <VStack
-                                    border={"1px dashed #D0D5DD"}
-                                    boxShadow={"md"}
-                                    borderRadius={"md"}
-                                    bg={"#faf8fd"}
-                                    p={4}
-                                    h={"28"}
-                                    justifyContent={"center"}
-                                    cursor="pointer"
-                                >
-                                    <SlCloudUpload color={"#191D23"} size={30} />
-                                    <Text
-                                        color={"#191D23"}
-                                        fontWeight={"500"}
-                                        fontSize={"sm"}
-                                        mt={'2'}
-                                        mb={0}
-                                    >
-                                        {directorForm.selectedAadharImage || "Drag and drop files here or Choose file"}
-                                    </Text>
-                                </VStack>
-                                <input
-                                    type="file"
-                                    id={`aadhar-file-input-${index}`}
-                                    style={{ display: 'none' }}
-                                    onChange={(e) => handleFileUpload(index, 'selectedAadharImage', e)}
-                                />
-                            </Box>
-                            {directorFormErrors[index]?.selectedAadharImage && (
-                                <Text color="red.500" fontSize="xs">{directorFormErrors[index].selectedAadharImage}</Text>
-                            )}
-                        </Box>
-                    </Box>
-                </Box>
-            ))}
-
-            <Box>
-                <Text
-                    color={'#6311CB'}
-                    fontWeight={600}
-                    fontSize={'sm'} mt={4}
-                    cursor="pointer"
-                    onClick={() => handleAddDirector()}
-                >
-                    + Add director {directorForms.length + 1}
-                </Text>
-            </Box>
-
-            <Box mt={6}>
-                <Text
-                    as="button"
-                    bg={'#6311CB'}
-                    color={"white"}
-                    fontWeight={600}
-                    fontSize={'sm'}
-                    p={2}
-                    borderRadius={"md"}
-                    onClick={() => handleSubmit()}
-                >
-                    Submit
-                </Text>
-            </Box>
-        </Box>
+    // Check if all forms are valid (no errors in any form)
+    const isValid = errors.every(
+      (formErrors) => Object.keys(formErrors).length === 0
     );
+    return isValid;
+  };
+
+  // Handle form submission
+  const handleSubmit = () => {
+    setIsLoading(true)
+    // console.log(directorForms);
+    if (validateForm()) {
+      console.log("Form is valid, proceed with submission.");
+      const data = {
+        directors: directorForms,
+      };
+      setCorpData({ ...corpData, ...data });
+      setIsLoading(false)
+      handleNext();
+    } else {
+      console.log("Form has errors.");
+    }
+  };
+
+  return (
+    <Box>
+      <Text color={"#49475A"} fontWeight={500} fontSize={"sm"} mb={1}>
+        Add director details
+      </Text>
+      <Text color={"#49475A"} fontWeight={500} fontSize={"xs"}>
+        Lorem ipsum dolor sit amet, adipiscing elit.
+      </Text>
+
+      {directorForms?.map((directorForm, index) => (
+        <Box key={index} mb={6}>
+          <Text color={"#49475A"} fontWeight={600} fontSize={"sm"} mb={2}>
+            Director {index + 1}
+          </Text>
+          <Box
+            as="form"
+            bg={"#f7f7fb"}
+            p={4}
+            borderRadius={"md"}
+            boxShadow={"md"}
+          >
+            {/* Director Name Field */}
+            <Box mb={3}>
+              <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
+                Director Name
+              </Text>
+              <Input
+                type="text"
+                border="1px solid #e2e8f0"
+                borderRadius="md"
+                fontSize={"sm"}
+                fontWeight={500}
+                bg={"#fff"}
+                placeholder="Enter director name"
+                value={directorForm.director_name}
+                onChange={(e) =>
+                  handleFieldChange(index, "director_name", e.target.value)
+                }
+              />
+              {directorFormErrors[index]?.director_name && (
+                <Text color="red.500" fontSize="xs">
+                  {directorFormErrors[index].director_name}
+                </Text>
+              )}
+            </Box>
+
+            {/* Director Email Field */}
+            <Box mb={3}>
+              <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
+                Email
+              </Text>
+              <Input
+                type="email"
+                border="1px solid #e2e8f0"
+                borderRadius="md"
+                fontSize={"sm"}
+                fontWeight={500}
+                bg={"#fff"}
+                placeholder="Enter email"
+                value={directorForm.emailAddress}
+                onChange={(e) =>
+                  handleFieldChange(index, "emailAddress", e.target.value)
+                }
+              />
+              {directorFormErrors[index]?.emailAddress && (
+                <Text color="red.500" fontSize="xs">
+                  {directorFormErrors[index].emailAddress}
+                </Text>
+              )}
+            </Box>
+
+            {/* Director Phone Number */}
+            <Box mb={3}>
+              <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
+                Phone Number
+              </Text>
+              <PhoneInput
+                country={"in"}
+                value={directorForm.mobileNumber}
+                onChange={(value, country) =>
+                  handleFieldChange(index, "mobileNumber", value, country)
+                }
+                inputStyle={{
+                  width: "100%",
+                  borderRadius: "md",
+                  paddingLeft: "6",
+                  border: "1px solid #e2e8f0",
+                  height: "40px",
+                }}
+                buttonStyle={{
+                  border: "none",
+                  borderRadius: "8px 0 0 8px",
+                  backgroundColor: "transparent",
+                }}
+              />
+              {directorFormErrors[index]?.mobileNumber && (
+                <Text color="red.500" fontSize="xs">
+                  {directorFormErrors[index].mobileNumber}
+                </Text>
+              )}
+            </Box>
+
+            {/* Upload Pan */}
+            <Box mb={3}>
+              <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
+                Upload Pan
+              </Text>
+              <Box
+                my={2}
+                position="relative"
+                onClick={() =>
+                  document.getElementById(`pan-file-input-${index}`).click()
+                }
+              >
+                <VStack
+                  border={"1px dashed #D0D5DD"}
+                  boxShadow={"md"}
+                  borderRadius={"md"}
+                  bg={"#faf8fd"}
+                  p={4}
+                  h={"28"}
+                  justifyContent={"center"}
+                  cursor="pointer"
+                >
+                  <SlCloudUpload color={"#191D23"} size={30} />
+                  <Text
+                    color={"#191D23"}
+                    fontWeight={"500"}
+                    fontSize={"sm"}
+                    mt={"2"}
+                    mb={0}
+                  >
+                    {directorForm.pancard_file_path_name ||
+                      "Drag and drop files here or Choose file"}
+                  </Text>
+                </VStack>
+                <input
+                  type="file"
+                  id={`pan-file-input-${index}`}
+                  style={{ display: "none" }}
+                  onChange={(e) =>
+                    handleFileUpload(index, "pancard_file_path_name", e)
+                  }
+                />
+              </Box>
+              {directorFormErrors[index]?.pancard_file_path_name && (
+                <Text color="red.500" fontSize="xs">
+                  {directorFormErrors[index].pancard_file_path_name}
+                </Text>
+              )}
+            </Box>
+
+            {/* Upload Aadhar */}
+            <Box mb={3}>
+              <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
+                Upload Aadhar
+              </Text>
+              <Box
+                my={2}
+                position="relative"
+                onClick={() =>
+                  document.getElementById(`aadhar-file-input-${index}`).click()
+                }
+              >
+                <VStack
+                  border={"1px dashed #D0D5DD"}
+                  boxShadow={"md"}
+                  borderRadius={"md"}
+                  bg={"#faf8fd"}
+                  p={4}
+                  h={"28"}
+                  justifyContent={"center"}
+                  cursor="pointer"
+                >
+                  <SlCloudUpload color={"#191D23"} size={30} />
+                  <Text
+                    color={"#191D23"}
+                    fontWeight={"500"}
+                    fontSize={"sm"}
+                    mt={"2"}
+                    mb={0}
+                  >
+                    {directorForm.aadhar_file_path_name ||
+                      "Drag and drop files here or Choose file"}
+                  </Text>
+                </VStack>
+                <input
+                  type="file"
+                  id={`aadhar-file-input-${index}`}
+                  style={{ display: "none" }}
+                  onChange={(e) =>
+                    handleFileUpload(index, "aadhar_file_path_name", e)
+                  }
+                />
+              </Box>
+              {directorFormErrors[index]?.aadhar_file_path_name && (
+                <Text color="red.500" fontSize="xs">
+                  {directorFormErrors[index].aadhar_file_path_name}
+                </Text>
+              )}
+            </Box>
+          </Box>
+        </Box>
+      ))}
+
+      <Box>
+        <Text
+          color={"#6311CB"}
+          fontWeight={600}
+          fontSize={"sm"}
+          mt={4}
+          cursor="pointer"
+          onClick={() => handleAddDirector()}
+        >
+          + Add director {directorForms.length + 1}
+        </Text>
+      </Box>
+
+      <HStack mt={6}>
+            <IconButton
+              aria-label="Back"
+              icon={<ArrowBackIcon />}
+              variant="outline"
+              size="sm"
+              px={8}
+              _hover={{ opacity: 0.8 }}
+              color={"#d0b8ef"}
+              border={"1px solid #d0b8ef"}
+              isDisabled={activeStep === 0}
+              onClick={() => setActiveStep(activeStep - 1)}
+            />
+
+            <Button
+              bg={"#6311CB"}
+              color={"#fff"}
+              fontSize={"xs"}
+              fontWeight={500}
+              size="sm"
+              _hover={{ opacity: 0.8 }}
+              rightIcon={<ArrowForwardIcon />}
+              w={"100%"}
+              onClick={handleSubmit}
+              isLoading={isLoading}
+            >
+              {activeStep === steps.length - 1 ? "Next step" : "Next step"}
+            </Button>
+          </HStack>
+    </Box>
+  );
 };
 
 export default OnboardingDirectorDetails;

src/Pages/Onboarding/OnboardingSelectPackage.jsx

@@ -1,9 +1,33 @@
-import React from 'react';
-import { Box, Text, HStack, Image, Checkbox, List, ListItem, ListIcon } from '@chakra-ui/react';
+import React, { useState } from 'react';
+import { Box, Text, HStack, Image, Checkbox, List, ListItem, ListIcon, IconButton, Button, useToast, useDisclosure } from '@chakra-ui/react';
 import { MdCheckCircle } from 'react-icons/md';
 import oBenefits from "../../assets/o-benefits.svg";
 import oExpense from "../../assets/o-expense.svg";
 import oGift from "../../assets/o-gift.svg";
+import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
+import { useNavigate } from 'react-router-dom';
+import { useCorpReggisterMutation } from '../../Services/on.board.service';
+import ToastBox from '../../Components/ToastBox';
+import OnboardingSelectPackageModal from './OnboardingSelectPackageModal';
+
+const OnboardingSelectPackage = ({
+    corpData,
+    setCorpData,
+    setActiveStep,
+    activeStep,
+    steps,
+    handleNext,
+}) => {
+
+    const navigate = useNavigate()
+    const toast = useToast();
+    const [ expence, setExpence ] = useState(false)
+    const [ gifting, setGifting ] = useState(false)
+    const [ benefits, setBenefits ] = useState(false)
+    const [isLoading, setIsLoading] = useState(false);
+
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
 
 const packages = [
     {
@@ -16,7 +40,8 @@ const packages = [
             "Lorem ipsum dolor sit amet",
             "Lorem ipsum dolor sit amet",
             "Lorem ipsum dolor sit amet"
-        ]
+        ],
+        onChange:()=>setExpence(!expence)
     },
     {
         id: 2,
@@ -28,7 +53,8 @@ const packages = [
             "Lorem ipsum dolor sit amet",
             "Lorem ipsum dolor sit amet",
             "Lorem ipsum dolor sit amet"
-        ]
+        ],
+        onChange:()=>setBenefits(!benefits)
     },
     {
         id: 3,
@@ -40,11 +66,68 @@ const packages = [
             "Lorem ipsum dolor sit amet",
             "Lorem ipsum dolor sit amet",
             "Lorem ipsum dolor sit amet"
-        ]
+        ],
+        onChange:()=>setGifting(!gifting)
     }
 ];
 
-const OnboardingSelectPackage = () => {
+const [ corpOnBoard ] = useCorpReggisterMutation()
+
+const onSubmit = async () =>{
+    
+    setIsLoading(true)
+    setCorpData({ ...corpData, opted_for_expence: expence, opted_for_gifting:gifting, opted_for_benefit:benefits });
+    
+    
+
+
+    const code = localStorage?.getItem("codeCorporateId");
+  // Update corporate data
+  const updatedData ={
+    ...corpData,
+    code_corporateId:code,
+    opted_for_expence: expence,
+    opted_for_gifting: gifting,
+    opted_for_benefit: benefits,
+  };
+
+
+  console.log(updatedData);
+
+  try {
+    const res = await corpOnBoard(updatedData)
+
+    if(res?.data?.statusCode===200){
+        localStorage?.setItem('fullname',res?.data?.data?.fullName )
+
+        toast({
+            // position: "bottom-left",
+            render: () => (
+              <ToastBox status={"success"} message={res?.data?.message} />
+            ),
+          });
+
+        setIsLoading(false)
+        onOpen()
+        
+       
+    }else{
+
+    }
+
+
+
+    console.log(res?.data?.data?.fullname);
+    
+  } catch (error) {
+    
+  }
+
+
+
+}
+
+console.log(corpData);
 
     return (
         <Box>
@@ -66,7 +149,7 @@ const OnboardingSelectPackage = () => {
                     >
                         <HStack justifyContent={"space-between"} alignItems={"start"}>
                             <Image src={pkg.img} alt={`${pkg.title} image`} /> 
-                            <Checkbox colorScheme='white'></Checkbox>
+                            <Checkbox  onChange={pkg?.onChange}  colorScheme='white'></Checkbox>
                         </HStack>
                         <Text
                             fontSize={"sm"}
@@ -101,6 +184,38 @@ const OnboardingSelectPackage = () => {
                     </Box>
                 ))}
             </HStack>
+            
+          <HStack mt={6}>
+            <IconButton
+              aria-label="Back"
+              icon={<ArrowBackIcon />}
+              variant="outline"
+              size="sm"
+              px={8}
+              _hover={{ opacity: 0.8 }}
+              color={"#d0b8ef"}
+              border={"1px solid #d0b8ef"}
+              isDisabled={activeStep === 0}
+              onClick={() => setActiveStep(activeStep - 1)}
+            />
+
+            <Button
+              bg={"#6311CB"}
+              color={"#fff"}
+              fontSize={"xs"}
+              fontWeight={500}
+              size="sm"
+              _hover={{ opacity: 0.8 }}
+              rightIcon={<ArrowForwardIcon />}
+              w={"100%"}
+              type="submit"
+              isLoading={isLoading}
+              onClick={onSubmit}
+            >
+              {activeStep === steps.length - 1 ? "Next step" : "Next step"}
+            </Button>
+          </HStack>
+          <OnboardingSelectPackageModal isOpen={isOpen} onClose={onClose} />
         </Box>
     );
 };

src/Pages/StatusCheck/StatusCheck.jsx

@@ -347,7 +347,7 @@ const StatusCheck = ({ isOnline = true }) => {
               shadow={"md"}
               h={"88vh"}
             >
-              <MiniHeader title={"Welcome, Sachin!"} />
+              <MiniHeader title={`welcome, ${localStorage?.getItem('fullname')}`} />
               <VStack overflow={"hidden"} rounded={"lg"} w={"100%"}>
                 <VStack p={4} w={"100%"} bg={"#F0E8FA"} alignItems={"start"}>
                   <Text as={"span"} fontWeight={600} fontSize={"md"}>

src/Services/on.board.service.js

@@ -21,8 +21,24 @@ export const onBoarding = createApi({
       }),
 
 
+
+
+
+    corpReggister: builder.mutation({
+      query: (data) => ({
+        url: "/corporate/register-with-code",
+        method: "POST",
+        body: data ,
+      }),
+    }),
+
+
+
+    
+  
+    
   }),
 });
 
 // Export hooks for usage in functional components
-export const { useGetPrePopQuery } = onBoarding;
+export const { useGetPrePopQuery, useCorpReggisterMutation } = onBoarding;

src/Services/token.serivce.js

@@ -145,9 +145,23 @@ export const apiSlice = createApi({
 
 
 
+    sentFile: builder.mutation({
+      query: ({data, code}) => ({
+        url: "/auth/admin/file-upload",
+        method: "POST",
+        body: data ,
+        headers: {
+          'x-auth-code': code, // Set your custom header here
+        },
+      }),
+    }),
+
+
+    
+
 
 
   }),
 });
 
-export const { useLoginMutation, useRefreshTokenMutation, useForgotPasswordMutation, useResetPasswordMutation,useResendOtpMutation, useSetOtpMutation } = apiSlice;
+export const { useLoginMutation, useRefreshTokenMutation, useForgotPasswordMutation, useResetPasswordMutation,useResendOtpMutation, useSetOtpMutation, useSentFileMutation } = apiSlice;