From 43480f41fe43fe45a794ebd5a2111c02034b3d84 Mon Sep 17 00:00:00 2001
From: siddheshmorewdi <siddhesh.more@wdimails.com>
Date: Mon, 1 Jul 2024 12:33:55 +0530
Subject: [PATCH] FORM FIELD UPDATED

---
 src/Components/CustomAlertDialog.jsx      |   3 +-
 src/Components/FormField.jsx              | 326 ++++++++++----
 src/Components/FormFieldMainReference.jsx | 257 +++++++++++
 src/Components/FormInputMain.jsx          |  94 ++++
 src/Contexts/GlobalStateProvider.jsx      |  24 ++
 src/Pages/IO_Management/CreateIO.jsx      | 500 +++++++---------------
 src/Pages/Master/Sponser/AddSponser.jsx   | 316 +++++++-------
 src/Pages/Master/Sponser/EditSponser.jsx  | 170 +++++++-
 src/Pages/Master/Sponser/Sponsers.jsx     |   5 +-
 src/Pages/Master/Sponser/ViewSponser.jsx  | 116 ++++-
 src/Pages/WithDrawal/ViewHistory.jsx      |  20 +-
 11 files changed, 1190 insertions(+), 641 deletions(-)
 create mode 100644 src/Components/FormFieldMainReference.jsx
 create mode 100644 src/Components/FormInputMain.jsx

diff --git a/src/Components/CustomAlertDialog.jsx b/src/Components/CustomAlertDialog.jsx
index f2ff84b..e83e4d1 100644
--- a/src/Components/CustomAlertDialog.jsx
+++ b/src/Components/CustomAlertDialog.jsx
@@ -29,12 +29,11 @@ const CustomAlertDialog = ({ isOpen, onOpen, onClose, alertHandler, isLoading, m
             No
           </Button>
           <Button
-            backgroundColor={"#ff6b6b"}
             isLoading={isLoading}
             onClick={alertHandler}
             size={"sm"}
             rounded={'sm'}
-            colorScheme="red"
+            colorScheme="green"
             ml={3}
           >
             Yes
diff --git a/src/Components/FormField.jsx b/src/Components/FormField.jsx
index af1ee46..d8292e1 100644
--- a/src/Components/FormField.jsx
+++ b/src/Components/FormField.jsx
@@ -1,12 +1,30 @@
-import { FormControl, FormLabel, Input, Textarea, Select, Checkbox, RadioGroup, Radio, Stack, Box, Heading, FormHelperText, Kbd } from '@chakra-ui/react';
-import { Controller } from 'react-hook-form';
-import { TiWarning } from 'react-icons/ti';
-import { motion } from 'framer-motion';
+import {
+  FormControl,
+  FormLabel,
+  Input,
+  Textarea,
+  Select,
+  Checkbox,
+  RadioGroup,
+  Radio,
+  Stack,
+  Box,
+  Heading,
+  FormHelperText,
+  Kbd,
+  Image,
+  Text,
+} from "@chakra-ui/react";
+import { Controller } from "react-hook-form";
+import { TiWarning } from "react-icons/ti";
+import { motion } from "framer-motion";
+import { AddIcon, CloseIcon } from "@chakra-ui/icons";
 
 const FormField = ({
   label,
   control,
   name,
+  id,
   type = "text",
   options = [],
   errors,
@@ -17,44 +35,57 @@ const FormField = ({
   helperText,
   multiple,
   handleImageChange,
+  selectedImageData,
+  setSelectedImageData,
+  removeImage,
+  imageData ,
   ...props
 }) => (
-  <FormControl w={"49%"} isInvalid={errors[name]} isRequired={isRequired} className="mb-3">
-    <FormLabel textAlign={arabic ? "right" : "left"} fontSize={"sm"}>{label}</FormLabel>
+  <FormControl
+    w={"49%"}
+    isInvalid={errors[name]}
+    isRequired={isRequired}
+    className="mb-3"
+  >
+    <FormLabel textAlign={arabic ? "right" : "left"} fontSize={"sm"}>
+      {label}
+    </FormLabel>
     <Controller
       control={control}
       name={name}
       defaultValue=""
       rules={rules}
       render={({ field }) => {
-        if (type === 'select') {
+        if (type === "select") {
           return (
             <Select
               focusBorderColor="forestGreen.300"
               size={"sm"}
               {...field}
               {...props}
-              cursor={'pointer'}
-              placeholder={placeHolder? placeHolder : label}
+              cursor={"pointer"}
+              placeholder={placeHolder ? placeHolder : label}
               textAlign={arabic ? "right" : "left"}
             >
               {options.map((option, index) => (
-                <option key={index} value={option.value}>{option.label}</option>
+                <option key={index} value={option.value}>
+                  {option.label}
+                </option>
               ))}
             </Select>
           );
-        } else if (type === 'textarea') {
+        } else if (type === "textarea") {
           return (
             <Textarea
               focusBorderColor="forestGreen.400"
               size={"sm"}
               {...field}
               {...props}
-              placeholder={placeHolder? placeHolder : label}
+              placeholder={placeHolder ? placeHolder : label}
               textAlign={arabic ? "right" : "left"}
             />
           );
-        } else if (type === 'checkbox') {
+        } else if (type === "checkbox") {
           return (
             <Checkbox
               size={"sm"}
@@ -65,7 +96,7 @@ const FormField = ({
               {label}
             </Checkbox>
           );
-        } else if (type === 'radio') {
+        } else if (type === "radio") {
           return (
             <RadioGroup {...field} {...props}>
               <Stack direction="row">
@@ -77,92 +108,95 @@ const FormField = ({
               </Stack>
             </RadioGroup>
           );
-        } else if (type === 'file') {
+        } else if (type === "file") {
           return (
-            <Box
-              borderColor="gray.300"
-              borderStyle="dashed"
-              borderWidth="2px"
-              rounded="md"
-              shadow="sm"
-              role="group"
-              transition="all 150ms ease-in-out"
-              _hover={{
-                shadow: "md",
-              }}
-              as={motion.div}
-              initial="rest"
-              animate="rest"
-              whileHover="hover"
-              height={"105px"}
-              className="pointer"
-            >
-              <Box position="relative" height="100%" width="100%">
-                <Box
-                  position="absolute"
-                  top="0"
-                  left="0"
-                  height="100%"
-                  width="100%"
-                  display="flex"
-                  flexDirection="column"
-                >
-                  <Stack
+            <>
+              <Box
+                borderColor="gray.300"
+                borderStyle="dashed"
+                borderWidth="2px"
+                rounded="md"
+                shadow="sm"
+                role="group"
+                transition="all 150ms ease-in-out"
+                _hover={{
+                  shadow: "md",
+                }}
+                as={motion.div}
+                initial="rest"
+                animate="rest"
+                whileHover="hover"
+                height={"105px"}
+                className="pointer"
+              >
+                <Box position="relative" height="100%" width="100%">
+                  <Box
+                    position="absolute"
+                    top="0"
+                    left="0"
                     height="100%"
                     width="100%"
                     display="flex"
-                    alignItems="center"
-                    justify="center"
+                    flexDirection="column"
                   >
-                    <span
-                      className="d-flex flex-column align-items-center pointer"
-                      spacing="1"
+                    <Stack
+                      height="100%"
+                      width="100%"
+                      display="flex"
+                      alignItems="center"
+                      justify="center"
                     >
-                      <Heading
-                        fontSize="lg"
-                        color="gray.700"
-                        fontWeight="bold"
-                        cursor={"pointer"}
-                      >
-                        Drop images here
-                      </Heading>
                       <span
-                        fontWeight="light"
-                        className="web-text-large text-secondary text-center pointer"
+                        className="d-flex flex-column align-items-center pointer"
+                        spacing="1"
                       >
-                        or click to upload
+                        <Heading
+                          fontSize="lg"
+                          color="gray.700"
+                          fontWeight="bold"
+                          cursor={"pointer"}
+                        >
+                          Drop images here
+                        </Heading>
+                        <span
+                          fontWeight="light"
+                          className="web-text-large text-secondary text-center pointer"
+                        >
+                          or click to upload
+                        </span>
                       </span>
-                    </span>
-                  </Stack>
+                    </Stack>
+                  </Box>
+                  <Input
+                    {...field}
+                    {...props}
+                    type="file"
+                    height="100%"
+                    width="100%"
+                    position="absolute"
+                    top="0"
+                    left="0"
+                    opacity="0"
+                    aria-hidden="true"
+                    accept="image/*"
+                    onChange={(e) => {
+                      field.onChange(e);
+                      handleImageChange(e);
+                    }}
+                    onDrop={(e) => {
+                      field.onChange(e);
+                      handleImageChange(e);
+                    }}
+                  />
                 </Box>
-                <Input
-                  {...field}
-                  {...props}
-                  type="file"
-                  height="100%"
-                  width="100%"
-                  position="absolute"
-                  top="0"
-                  left="0"
-                  opacity="0"
-                  aria-hidden="true"
-                  accept="image/*"
-                  onChange={(e) => {
-                    field.onChange(e);
-                    handleImageChange(e);
-                  }}
-                  onDrop={(e) => {
-                    field.onChange(e);
-                    handleImageChange(e);
-                  }}
-                />
               </Box>
-            </Box>
+            </>
           );
-        }else if (type === 'fileNormal') {
+        } else if (type === "fileNormal") {
           return (
             <>
               <Input
+              id={id}
                 {...field}
                 {...props}
                 multiple={multiple} // Support for multiple file uploads
@@ -179,10 +213,118 @@ const FormField = ({
                 <FormHelperText className="web-text-small">
                   You can select multiple images using{" "}
                   <span className="text-dark">
-                    <Kbd size={'sm'} className="text-dark">ctrl</Kbd> + <Kbd className="text-dark">select</Kbd>
-                  </span>.
+                    <Kbd size={"sm"} className="text-dark">
+                      ctrl
+                    </Kbd>{" "}
+                    + <Kbd className="text-dark">select</Kbd>
+                  </span>
+                  .
                 </FormHelperText>
               )}
+              {selectedImageData &&  (
+                multiple ? 
+                selectedImageData?.length > 0 && (
+                  <Box mt={4} width={"100%"} display="flex" flexWrap="wrap" gap={4}>
+                    {selectedImageData?.map((imageDataLink, index) => (
+                      <Box key={index} width={"100px"}>
+                        <Image
+                          rounded={"md"}
+                          objectFit={"cover"}
+                          src={imageDataLink}
+                          alt={`profile-${index}`}
+                          width={100}
+                          height={100}
+                        />
+                        <Box
+                          display={"flex"}
+                          flexDirection={"column"}
+                          position={"relative"}
+                        >
+                          <CloseIcon
+                            onClick={() => removeImage(index)}
+                            bg={"#fff"}
+                            className="link pointer"
+                            p={1}
+                            fontSize={"lg"}
+                            color={"red"}
+                            fontWeight={"500"}
+                            rounded={"md"}
+                            position={"absolute"}
+                            bottom={0}
+                            right={0}
+                          />
+                          <Text
+                            as={"span"}
+                            fontSize={"xs"}
+                            fontWeight={"500"}
+                            mt={1}
+                            isTruncated={true}
+                          >
+                            {imageData[index]?.name}
+                          </Text>
+                          <Text as={"span"} fontSize={"xs"} fontStyle={"italic"}>
+                            {(imageData[index]?.size / (1024 * 1024)).toFixed(2)}{" "}
+                            mb
+                          </Text>
+                        </Box>
+                      </Box>
+                    ))}
+                    <AddIcon
+                      onClick={() =>
+                        document.getElementById(id).click()
+                      }
+                      rounded={"md"}
+                      width={50}
+                      height={50}
+                      mt={26}
+                      p={4}
+                      cursor={"pointer"}
+                      className="link"
+                    />
+                  </Box>)
+                :<Box mt={5} width={"49%"}>
+                  <Image
+                    rounded={"md"}
+                    objectFit={"cover"}
+                    src={selectedImageData}
+                    alt="profile"
+                    width={100}
+                    height={100}
+                  />
+                  <Box
+                    w={"30%"}
+                    display={"flex"}
+                    flexDirection={"column"}
+                    position={"relative"}
+                  >
+                    <CloseIcon
+                      onClick={() => setSelectedImageData(null)}
+                      className="link pointer"
+                      p={1}
+                      fontSize={"lg"}
+                      color={"red"}
+                      fontWeight={"500"}
+                      rounded={"md"}
+                      position={"absolute"}
+                      top={1}
+                      right={0}
+                    />
+                    <Text
+                      as={"span"}
+                      fontSize={"xs"}
+                      w={"70%"}
+                      fontWeight={"500"}
+                      mt={1}
+                      isTruncated={true}
+                    >
+                      {imageData?.name}
+                    </Text>
+                    <Text as={"span"} fontSize={"xs"} fontStyle={"italic"}>
+                      {(imageData?.size / (1024 * 1024)).toFixed(2)} mb
+                    </Text>
+                  </Box>
+                </Box>
+              )}
             </>
           );
         } else {
@@ -193,7 +335,7 @@ const FormField = ({
               type={type}
               {...field}
               {...props}
-              placeholder={placeHolder? placeHolder : label}
+              placeholder={placeHolder ? placeHolder : label}
               textAlign={arabic ? "right" : "left"}
             />
           );
@@ -205,10 +347,10 @@ const FormField = ({
         <TiWarning className="fw-bold fs-5 " /> {errors[name].message}
       </span>
     )}
-    {helperText &&<FormHelperText className="web-text-small">
-       {helperText}
-      </FormHelperText>}
-    {type === 'file' && (
+    {helperText && (
+      <FormHelperText className="web-text-small">{helperText}</FormHelperText>
+    )}
+    {type === "file" && (
       <FormHelperText className="web-text-small">
         Maximum limit of image is 10MB.
       </FormHelperText>
diff --git a/src/Components/FormFieldMainReference.jsx b/src/Components/FormFieldMainReference.jsx
new file mode 100644
index 0000000..ded4876
--- /dev/null
+++ b/src/Components/FormFieldMainReference.jsx
@@ -0,0 +1,257 @@
+import React, { useContext, useState } from "react";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import {
+  Box,
+  Divider,
+  FormControl,
+  FormLabel,
+  Heading,
+  Input,
+  Select,
+  Textarea,
+  Button,
+  Text,
+} from "@chakra-ui/react";
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+import { WarningTwoIcon } from "@chakra-ui/icons";
+import { TiWarning } from "react-icons/ti";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { useNavigate } from "react-router-dom";
+import FormField from "../../../Components/FormField";
+import { v4 as uuidv4 } from "uuid";
+import FormInputMain from "../../../Components/AddEditComponentMain";
+
+export const addSponser = yup.object().shape({
+  sponserName: yup.string().required("Sponser name is required"),
+  sponserNameArabic: yup.string().required("Sponser name is required"),
+  mobileNo: yup.string().required("Mobile no is required"),
+  sponserAddress: yup.string().required("Sponser address is required"),
+
+  bankName: yup.string().required("Bank Name is required"),
+  accountNumber: yup.string().required("Account Number is required"),
+  swiftCode: yup.string().required("SWIFT/BIC Code is required"),
+  bankEmail: yup.string().email("Invalid email format"),
+
+  // routingNumber: yup.string().required("Routing Number is required"),
+  // iban: yup.string().required("IBAN is required"),
+  // accountType: yup.string().required("Account Type is required"),
+  // bankPhoneNumber: yup.string().required("Bank Phone Number is required"),
+  // bankBranch: yup.string().required("Bank Branch is required"),
+  // branchAddress: yup.string().required("Branch Address is required"),
+  // ifscCode: yup.string().required("IFSC Code is required"),
+  // accountHolderName: yup.string().required("Account Holder's Name is required"),
+});
+
+
+
+export function debounce(func, delay) {
+  let debounceTimer;
+  return function(...args) {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => func.apply(this, args), delay);
+  };
+}
+
+const AddSponser = () => {
+  const navigate = useNavigate();
+  const [bannerImageData, setBannerImageData] = useState(null);
+  const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
+
+  
+  const [otherImageData, setOtherImageData] = useState(null);
+  const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
+
+
+
+  const { sponser, setSponser } = useContext(GlobalStateContext);
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(addSponser),
+  });
+
+  
+  const handleBannerImageChange = (e) => {
+    const file = e.target.files[0];
+    setBannerImageData(file);
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setSelectedBannerImageData(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+
+   // Handler for file input
+   const handleOtherImageChange = (e) => {
+    const files = Array.from(e.target.files);
+    const newImageData = [...(otherImageData || []), ...files]; // Ensure otherImageData is an array
+
+    setOtherImageData(newImageData);
+
+    const readers = files.map((file) => {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          resolve(reader.result);
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+      });
+    });
+
+    Promise.all(readers)
+      .then((results) => {
+        setSelectedOtherImageData([
+          ...(selectedOtherImageData || []),
+          ...results,
+        ]); // Ensure selectedOtherImageData is an array
+      })
+      .catch((error) => {
+        console.error("Error reading files:", error);
+      });
+  };
+
+  // Function to remove a specific image
+  const removeOtherImage = (index) => {
+    const newImageData = otherImageData.filter((_, i) => i !== index);
+    const newSelectedImageData = selectedOtherImageData.filter(
+      (_, i) => i !== index
+    );
+
+    setOtherImageData(newImageData);
+    setSelectedOtherImageData(newSelectedImageData);
+  };
+
+console.log(selectedBannerImageData);
+  
+  const formFields = [
+    {
+      label: "Sponser name",
+      name: "sponserName",
+      type: "text",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Sponser Name (Arabic)",
+      name: "sponserNameArabic",
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Mobile no",
+      name: "mobileNo",
+      type: "number",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Sponser address",
+      name: "sponserAddress",
+      type: "text",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Bank name",
+      name: "bankName",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Account Name",
+      name: "accountNumber",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "SWIFT/BIC Code",
+      name: "swiftCode",
+      type: "number",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Account Email",
+      name: "bankEmail",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Banner image",
+      name: "banner_image",
+      id:"banner_image",
+      type: "fileNormal",
+      isRequired: true,
+      section: "Bank Details",
+      multiple:false,
+      selectedImageData:selectedBannerImageData,
+      setSelectedImageData:setSelectedBannerImageData,
+      imageData:bannerImageData,
+      handleImageChange:handleBannerImageChange
+    },
+    {
+      label: "Multi Image",
+      name: "OtherImage",
+      id:"OtherImage",
+      type: "fileNormal",
+      isRequired: true,
+      section: "Bank Details",
+      multiple:true,
+      selectedImageData:selectedOtherImageData,
+      setSelectedImageData:setSelectedOtherImageData,
+      imageData:otherImageData,
+      handleImageChange:handleOtherImageChange,
+      removeImage:removeOtherImage
+    },
+  ];
+
+  const groupedFields = formFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
+
+  const onSubmit = (data) => {
+    setSponser([
+      {
+        ...data,
+        status: true,
+        id: uuidv4(),
+        createdAt: new Date().toISOString(),
+      },
+      ...sponser,
+    ]);
+    navigate("/sponser");
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
+    <FormInputMain
+      groupedFields={groupedFields}
+      control={control}
+      errors={errors}
+
+      onSubmit={handleSubmit(onSubmit)}
+
+    /></Box>
+  );
+};
+
+export default AddSponser;
diff --git a/src/Components/FormInputMain.jsx b/src/Components/FormInputMain.jsx
new file mode 100644
index 0000000..2acfd4d
--- /dev/null
+++ b/src/Components/FormInputMain.jsx
@@ -0,0 +1,94 @@
+import { Box, Button, Divider, Heading } from "@chakra-ui/react";
+import React from "react";
+import FormField from "./FormField";
+import { OPACITY_ON_LOAD } from "../Layout/animations";
+
+const FormInputMain = ({
+  groupedFields,
+  control,
+  errors,
+  onSubmit,
+  children,
+}) => {
+  return (
+    <form onSubmit={onSubmit}>
+      {Object.entries(groupedFields).map(([section, fields], index) => (
+        <Box key={section}>
+          <Heading as="h6" size="xs" mt={index === 0 ? 3 : 4}>
+            {section}
+          </Heading>
+          <Box display={"flex"} gap={0}>
+            <Box
+              width={"100%"}
+              p={5}
+              display={"flex"}
+              flexWrap={"wrap"}
+              gap={4}
+            >
+              {fields.map(
+                (
+                  {
+                    label,
+                    name,
+                    id,
+                    arabic,
+                    type,
+                    isRequired,
+                    selectedImageData,
+                    setSelectedImageData,
+                    imageData,
+                    handleImageChange,
+                    removeImage,
+                    placeHolder,
+                    options,
+                    helperText,
+                    multiple,
+                  },
+                  key
+                ) => (
+                  <FormField
+                    id={id}
+                    key={key}
+                    label={label}
+                    type={type}
+                    name={name}
+                    helperText={helperText ? helperText : undefined}
+                    options={options ? options : undefined}
+                    placeHolder={placeHolder ? placeHolder : undefined}
+                    control={control}
+                    errors={errors}
+                    multiple={multiple}
+                    isRequired={isRequired}
+                    arabic={arabic}
+                    selectedImageData={selectedImageData}
+                    setSelectedImageData={setSelectedImageData}
+                    imageData={imageData}
+                    handleImageChange={handleImageChange}
+                    removeImage={removeImage}
+                  />
+                )
+              )}
+            </Box>
+          </Box>
+          {index < Object.entries(groupedFields).length - 1 && <Divider />}
+        </Box>
+      ))}
+
+      {children}
+
+      <Box display={"flex"} justifyContent={"flex-end"} p={4}>
+        <Button
+          size={"sm"}
+          width={"49.5%"}
+          rounded={"sm"}
+          type="submit"
+          colorScheme="green"
+        >
+          Submit
+        </Button>
+      </Box>
+    </form>
+  );
+};
+
+export default FormInputMain;
diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index 029f3da..31bbbbf 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -25,6 +25,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 1,
       sponserName: "John Doe",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "1234567890",
       sponserAddress: "123 Main St, Springfield, USA",
       accountHolderName: "John Doe",
@@ -45,6 +46,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 2,
       sponserName: "Jane Smith",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "9876543210",
       sponserAddress: "456 Oak St, Metropolis, USA",
       accountHolderName: "Jane Smith",
@@ -65,6 +67,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 3,
       sponserName: "Alice Johnson",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "1231231234",
       sponserAddress: "789 Pine St, Gotham, USA",
       accountHolderName: "Alice Johnson",
@@ -85,6 +88,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 4,
       sponserName: "Bob Brown",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "3213214321",
       sponserAddress: "101 Maple St, Smallville, USA",
       accountHolderName: "Bob Brown",
@@ -105,6 +109,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 5,
       sponserName: "Charlie Davis",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "5555555555",
       sponserAddress: "202 Birch St, Star City, USA",
       accountHolderName: "Charlie Davis",
@@ -125,6 +130,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 6,
       sponserName: "Daniel Evans",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "4444444444",
       sponserAddress: "303 Cedar St, Central City, USA",
       accountHolderName: "Daniel Evans",
@@ -145,6 +151,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 7,
       sponserName: "Ella Fitzgerald",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "3333333333",
       sponserAddress: "404 Elm St, Coast City, USA",
       accountHolderName: "Ella Fitzgerald",
@@ -165,6 +172,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 8,
       sponserName: "Frank Green",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "2222222222",
       sponserAddress: "505 Ash St, Keystone City, USA",
       accountHolderName: "Frank Green",
@@ -185,6 +193,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 9,
       sponserName: "Grace Hall",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "1111111111",
       sponserAddress: "606 Willow St, Hub City, USA",
       accountHolderName: "Grace Hall",
@@ -205,6 +214,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 10,
       sponserName: "Henry Ingram",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "6666666666",
       sponserAddress: "707 Spruce St, Fawcett City, USA",
       accountHolderName: "Henry Ingram",
@@ -225,6 +235,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 11,
       sponserName: "Grace Hall",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "1111111111",
       sponserAddress: "606 Willow St, Hub City, USA",
       accountHolderName: "Grace Hall",
@@ -245,6 +256,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 12,
       sponserName: "Henry Ingram",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "6666666666",
       sponserAddress: "707 Spruce St, Fawcett City, USA",
       accountHolderName: "Henry Ingram",
@@ -268,6 +280,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 1,
       investmentName: "John Doe",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "1234567890",
       sponserAddress: "123 Main St, Springfield, USA",
       accountHolderName: "John Doe",
@@ -288,6 +301,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 2,
       investmentName: "Jane Smith",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "9876543210",
       sponserAddress: "456 Oak St, Metropolis, USA",
       accountHolderName: "Jane Smith",
@@ -308,6 +322,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 3,
       investmentName: "Alice Johnson",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "1231231234",
       sponserAddress: "789 Pine St, Gotham, USA",
       accountHolderName: "Alice Johnson",
@@ -328,6 +343,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 4,
       investmentName: "Bob Brown",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "3213214321",
       sponserAddress: "101 Maple St, Smallville, USA",
       accountHolderName: "Bob Brown",
@@ -348,6 +364,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 5,
       investmentName: "Charlie Davis",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "5555555555",
       sponserAddress: "202 Birch St, Star City, USA",
       accountHolderName: "Charlie Davis",
@@ -368,6 +385,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 6,
       investmentName: "Daniel Evans",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "4444444444",
       sponserAddress: "303 Cedar St, Central City, USA",
       accountHolderName: "Daniel Evans",
@@ -388,6 +406,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 7,
       investmentName: "Ella Fitzgerald",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "3333333333",
       sponserAddress: "404 Elm St, Coast City, USA",
       accountHolderName: "Ella Fitzgerald",
@@ -408,6 +427,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 8,
       investmentName: "Frank Green",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "2222222222",
       sponserAddress: "505 Ash St, Keystone City, USA",
       accountHolderName: "Frank Green",
@@ -428,6 +448,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 9,
       investmentName: "Grace Hall",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "1111111111",
       sponserAddress: "606 Willow St, Hub City, USA",
       accountHolderName: "Grace Hall",
@@ -448,6 +469,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 10,
       investmentName: "Henry Ingram",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "6666666666",
       sponserAddress: "707 Spruce St, Fawcett City, USA",
       accountHolderName: "Henry Ingram",
@@ -468,6 +490,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 11,
       investmentName: "Grace Hall",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "1111111111",
       sponserAddress: "606 Willow St, Hub City, USA",
       accountHolderName: "Grace Hall",
@@ -488,6 +511,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 12,
       investmentName: "Henry Ingram",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "6666666666",
       sponserAddress: "707 Spruce St, Fawcett City, USA",
       accountHolderName: "Henry Ingram",
diff --git a/src/Pages/IO_Management/CreateIO.jsx b/src/Pages/IO_Management/CreateIO.jsx
index 3ca1e26..7ca4004 100644
--- a/src/Pages/IO_Management/CreateIO.jsx
+++ b/src/Pages/IO_Management/CreateIO.jsx
@@ -23,6 +23,7 @@ import { useNavigate } from "react-router-dom";
 import FormField from "../../Components/FormField";
 import { v4 as uuidv4 } from "uuid";
 import AddIOCharges from "./AddIOCharges";
+import FormInputMain from "../../Components/FormInputMain";
 
 const schema = yup.object().shape({
   ioNameArabic: yup.string().required("Arabic name is required"),
@@ -64,7 +65,8 @@ const years = Array.from(
 
 const CreateIO = () => {
   const navigate = useNavigate();
-  const { sponser, setSponser,investment, setInvestment } = useContext(GlobalStateContext);
+  const { sponser, setSponser, investment, setInvestment } =
+    useContext(GlobalStateContext);
   const [bannerImageData, setBannerImageData] = useState(null);
   const [otherImageData, setOtherImageData] = useState(null);
 
@@ -74,7 +76,6 @@ const CreateIO = () => {
   const [totalCharge, setTotalCharge] = useState(0.0);
   const [totalAmount, setTotalAmount] = useState(0.0);
 
-
   const {
     control,
     handleSubmit,
@@ -112,12 +113,11 @@ const CreateIO = () => {
   }, [charges, destributedAmount]);
 
   const onSubmit = (data) => {
-
     // setValue("banner_image", selectedBannerImageData);
     data.banner_image = selectedBannerImageData;
-    const updatedData = { ...data, status: "Available"}
+    const updatedData = { ...data, status: "Available" };
     console.log(selectedBannerImageData);
-    setInvestment([...investment,updatedData])
+    setInvestment([...investment, updatedData]);
     navigate("/view-io");
     reset();
   };
@@ -180,300 +180,147 @@ const CreateIO = () => {
     setSelectedOtherImageData(newSelectedImageData);
   };
 
+  const formFields = [
+    {
+      label: "Investment object name",
+      name: "ioName",
+      type: "text",
+      isRequired: true,
+      section: "Investment Object Details",
+    },
+    {
+      label: "Investment object (Arabic)",
+      name: "ioNameArabic",
+      placeHolder: "الرجاء إدخال القيمة",
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Investment Object Details",
+    },
+    {
+      label: "Destributed Amount",
+      name: "destributedAmount",
+      type: "number",
+      isRequired: true,
+      section: "Investment Object Details",
+    },
+    {
+      label: "Min Invest",
+      name: "miniInvest",
+      type: "number",
+      isRequired: true,
+      section: "Investment Object Details",
+    },
+    {
+      label: "Sponsers name",
+      name: "sponserName",
+      type: "text",
+      isRequired: true,
+      section: "Investment Object Details",
+    },
+    {
+      label: "Year",
+      name: "accountNumber",
+      type: "select",
+      options: years,
+      isRequired: true,
+      section: "Investment Object Details",
+    },
+    {
+      label: "Annual return",
+      name: "annualReturn",
+      type: "number",
+      isRequired: true,
+      section: "Investment Object Details",
+    },
+    {
+      label: "Annual yeild",
+      name: "annualyield",
+      type: "number",
+      helperText: "Please enter value in percentage",
+      isRequired: true,
+      section: "Investment Object Details",
+    },
+    {
+      label: "Quaterly",
+      name: "quaterly",
+      type: "select",
+      options: [
+        {
+          label: "Q1",
+          value: "Q1",
+        },
+        {
+          label: "Q2",
+          value: "Q2",
+        },
+        {
+          label: "Q3",
+          value: "Q3",
+        },
+        {
+          label: "Q4",
+          value: "Q4",
+        },
+      ],
+      isRequired: true,
+      section: "Investment Object Details",
+    },
+
+    {
+      label: "Target close",
+      name: "targetClose",
+      type: "date",
+      isRequired: true,
+      section: "Investment Object Details",
+    },
+
+    {
+      label: "Banner image",
+      name: "banner_image",
+      id: "banner_image",
+      type: "fileNormal",
+      isRequired: true,
+      section: "Uplaod Banner Images",
+      multiple: false,
+      selectedImageData: selectedBannerImageData,
+      setSelectedImageData: setSelectedBannerImageData,
+      imageData: bannerImageData,
+      handleImageChange: handleBannerImageChange,
+    },
+    {
+      label: "Multi Image",
+      name: "OtherImage",
+      id: "OtherImage",
+      type: "fileNormal",
+      isRequired: true,
+      section: "Uplaod Banner Images",
+      multiple: true,
+      selectedImageData: selectedOtherImageData,
+      setSelectedImageData: setSelectedOtherImageData,
+      imageData: otherImageData,
+      handleImageChange: handleOtherImageChange,
+      removeImage: removeOtherImage,
+    },
+  ];
+
+  const groupedFields = formFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <Heading as="h6" size="xs" mt={4}>
-          Investment Object Details
-        </Heading>
-        <Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
-          <FormField
-            label="Investment object name"
-            name="ioName"
-            control={control}
-            errors={errors}
-            isRequired={true}
-          />
-
-          <FormField
-            label="Investment object"
-            name="ioNameArabic"
-            placeHolder={"الرجاء إدخال القيمة"}
-            control={control}
-            errors={errors}
-            isRequired={true}
-            arabic={true}
-          />
-
-          <FormField
-            label="Destributed Amount"
-            placeHolder={"$00.0"}
-            helperText={"Please enter value in $"}
-            name="destributedAmount"
-            type="number"
-            control={control}
-            errors={errors}
-            isRequired={true}
-          />
-
-          <FormField
-            label="Min Invest"
-            placeHolder={"$00.00"}
-            helperText={"Please enter value in $"}
-            name="miniInvest"
-            type="number"
-            control={control}
-            errors={errors}
-            isRequired={true}
-          />
-
-          <FormField
-            label="Sponsers Name"
-            control={control}
-            name="sponserName"
-            type="select"
-            options={sponserOptions}
-            errors={errors}
-            isRequired={true}
-          />
-
-          <FormField
-            label="Year"
-            control={control}
-            name="year"
-            type="select"
-            options={years}
-            errors={errors}
-            isRequired={true}
-          />
-
-          <FormField
-            label="Annual return"
-            placeHolder={"00.00%"}
-            helperText={"Please enter value in percentage"}
-            name="annualReturn"
-            type="number"
-            control={control}
-            errors={errors}
-            isRequired={true}
-          />
-
-          <FormField
-            label="Annual yeild"
-            placeHolder={"00.00%"}
-            helperText={"Please enter value in percentage"}
-            name="annualyield"
-            type="number"
-            control={control}
-            errors={errors}
-            isRequired={true}
-          />
-
-          <FormField
-            label="Quaterly"
-            control={control}
-            name="quaterly"
-            type="select"
-            options={[
-              {
-                label: "Q1",
-                value: "Q1",
-              },
-              {
-                label: "Q2",
-                value: "Q2",
-              },
-              {
-                label: "Q3",
-                value: "Q3",
-              },
-              {
-                label: "Q4",
-                value: "Q4",
-              },
-            ]}
-            errors={errors}
-            isRequired={true}
-          />
-
-          <FormField
-            label="Tenure"
-            // helperText={"Please enter value in Dollar"}
-            name="tenure"
-            type="number"
-            control={control}
-            errors={errors}
-            isRequired={true}
-          />
-
-          <FormField
-            label="Target close"
-            name="targetClose"
-            type="date"
-            control={control}
-            errors={errors}
-            isRequired={true}
-          />
-        </Box>
-
-        <Divider />
-
-        <Heading w={"100%"} as="h6" size="xs" mb={5}>
-          Uplaod Banner Images
-        </Heading>
-        <Box
-          width={"100%"}
-          p={5}
-          pt={0}
-          display={"flex"}
-          flexWrap={"wrap"}
-          gap={4}
-        >
-          <FormField
-            label="Banner image"
-            control={control}
-            name="banner_image"
-            type="fileNormal"
-            helperText={"You can select only one image for banner."}
-            errors={errors}
-            multiple={false}
-            handleImageChange={handleBannerImageChange}
-            isRequired={true}
-            rules={{
-              required: "Profile image is required",
-            }}
-            // register={register}  // Pass register function to FormField
-          />
-
-          <FormField
-            id="otherImageInput"
-            label="Other images"
-            control={control}
-            name="other_image"
-            type="fileNormal"
-            multiple={true}
-            errors={errors}
-            handleImageChange={handleOtherImageChange}
-            isRequired={true}
-            rules={{
-              required: "Profile image is required",
-            }}
-            // register={register}  // Pass register function to FormField
-          />
-
-          {selectedBannerImageData && (
-            <Box width={"49%"}>
-              <Image
-                rounded={"md"}
-                objectFit={"cover"}
-                src={selectedBannerImageData}
-                alt="profile"
-                width={100}
-                height={100}
-              />
-              <Box
-                w={"30%"}
-                display={"flex"}
-                flexDirection={"column"}
-                position={"relative"}
-              >
-                <CloseIcon
-                  onClick={() => setSelectedBannerImageData(null)}
-                  className="link pointer"
-                  p={1}
-                  fontSize={"lg"}
-                  color={"red"}
-                  fontWeight={"500"}
-                  rounded={"md"}
-                  position={"absolute"}
-                  top={1}
-                  right={0}
-                />
-                <Text
-                  as={"span"}
-                  fontSize={"xs"}
-                  w={"70%"}
-                  fontWeight={"500"}
-                  mt={1}
-                  isTruncated={true}
-                >
-                  {bannerImageData?.name}
-                </Text>
-                <Text as={"span"} fontSize={"xs"} fontStyle={"italic"}>
-                  {(bannerImageData?.size / (1024 * 1024)).toFixed(2)} mb
-                </Text>
-              </Box>
-            </Box>
-          )}
-
-          {selectedOtherImageData?.length > 0 && (
-            <Box width={"49.5%"} display="flex" flexWrap="wrap" gap={4}>
-              {selectedOtherImageData.map((imageData, index) => (
-                <Box key={index} width={"100px"}>
-                  <Image
-                    rounded={"md"}
-                    objectFit={"cover"}
-                    src={imageData}
-                    alt={`profile-${index}`}
-                    width={100}
-                    height={100}
-                  />
-                  <Box
-                    display={"flex"}
-                    flexDirection={"column"}
-                    position={"relative"}
-                  >
-                    <CloseIcon
-                      onClick={() => removeOtherImage(index)}
-                      bg={"#fff"}
-                      className="link pointer"
-                      p={1}
-                      fontSize={"lg"}
-                      color={"red"}
-                      fontWeight={"500"}
-                      rounded={"md"}
-                      position={"absolute"}
-                      bottom={0}
-                      right={0}
-                    />
-                    <Text
-                      as={"span"}
-                      fontSize={"xs"}
-                      fontWeight={"500"}
-                      mt={1}
-                      isTruncated={true}
-                    >
-                      {otherImageData[index]?.name}
-                    </Text>
-                    <Text as={"span"} fontSize={"xs"} fontStyle={"italic"}>
-                      {(otherImageData[index]?.size / (1024 * 1024)).toFixed(2)}{" "}
-                      mb
-                    </Text>
-                  </Box>
-                </Box>
-              ))}
-              {/* <Box  width={"100px"} display={'flex'} alignItems={'center'}> */}
-              <AddIcon
-                onClick={() =>
-                  document.getElementById("otherImageInput").click()
-                }
-                rounded={"md"}
-                width={50}
-                height={50}
-                mt={26}
-                p={4}
-                cursor={"pointer"}
-                // rounded={'md'}
-                className="link"
-              />
-              {/* </Box> */}
-            </Box>
-          )}
-        </Box>
-
-
-
-        
+      <FormInputMain
+        groupedFields={groupedFields}
+        control={control}
+        errors={errors}
+        onSubmit={handleSubmit(onSubmit)}
+      >
         <Divider />
         <Heading
           w={"100%"}
@@ -557,28 +404,27 @@ const CreateIO = () => {
               ""
             )}
 
+            <Box display={"flex"}>
+              <Text
+                fontSize={"sm"}
+                fontWeight={"500"}
+                as={"span"}
+                w={"70%"}
+                bg={""}
+              >
+                Total distributed amount
+              </Text>
+              <Text
+                as={"span"}
+                fontSize={"sm"}
+                fontWeight={"600"}
+                w={"30%"}
+                bg={""}
+              >
+                $ {destributedAmount.toFixed(4)}
+              </Text>
+            </Box>
 
-<Box display={"flex"}>
-                <Text
-                  fontSize={"sm"}
-                  fontWeight={"500"}
-                  as={"span"}
-                  w={"70%"}
-                  bg={""}
-                >
-                  Total distributed amount
-                </Text>
-                <Text
-                  as={"span"}
-                  fontSize={"sm"}
-                  fontWeight={"600"}
-                  w={"30%"}
-                  bg={""}
-                >
-                  $ {destributedAmount.toFixed(4)}
-                </Text>
-              </Box>
-            
             <Box pt={2} borderTop={"1px solid #fff"} as="span" display={"flex"}>
               <Text
                 fontSize={"sm"}
@@ -599,25 +445,9 @@ const CreateIO = () => {
                 $ {totalAmount.toFixed(4)}
               </Text>
             </Box>
-
-
           </Box>
         </Box>
-        
-        <Box display={"flex"} justifyContent={"flex-end"} p={4}>
-          <Button
-            size={"sm"}
-            width={"50%"}
-            rounded={"sm"}
-            type="submit"
-            colorScheme="green"
-            mt={4}
-          >
-            Submit
-          </Button>
-        </Box>
-
-      </form>
+      </FormInputMain>
     </Box>
   );
 };
diff --git a/src/Pages/Master/Sponser/AddSponser.jsx b/src/Pages/Master/Sponser/AddSponser.jsx
index 0ae4f37..3fd8864 100644
--- a/src/Pages/Master/Sponser/AddSponser.jsx
+++ b/src/Pages/Master/Sponser/AddSponser.jsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import { OPACITY_ON_LOAD } from "../../../Layout/animations";
 import {
   Box,
@@ -19,11 +19,12 @@ import { WarningTwoIcon } from "@chakra-ui/icons";
 import { TiWarning } from "react-icons/ti";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import { useNavigate } from "react-router-dom";
-import FormField from "../../../Components/FormField";
 import { v4 as uuidv4 } from "uuid";
+import FormInputMain from "../../../Components/FormInputMain";
 
-const schema = yup.object().shape({
+export const addSponser = yup.object().shape({
   sponserName: yup.string().required("Sponser name is required"),
+  sponserNameArabic: yup.string().required("Sponser name is required"),
   mobileNo: yup.string().required("Mobile no is required"),
   sponserAddress: yup.string().required("Sponser address is required"),
 
@@ -54,16 +55,158 @@ export function debounce(func, delay) {
 
 const AddSponser = () => {
   const navigate = useNavigate();
+  const [bannerImageData, setBannerImageData] = useState(null);
+  const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
+
+  
+  const [otherImageData, setOtherImageData] = useState(null);
+  const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
+
+
+
   const { sponser, setSponser } = useContext(GlobalStateContext);
   const {
     control,
     handleSubmit,
     formState: { errors },
   } = useForm({
-    resolver: yupResolver(schema),
+    resolver: yupResolver(addSponser),
   });
 
-  console.log(errors);
+  
+  const handleBannerImageChange = (e) => {
+    const file = e.target.files[0];
+    setBannerImageData(file);
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setSelectedBannerImageData(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+
+   // Handler for file input
+   const handleOtherImageChange = (e) => {
+    const files = Array.from(e.target.files);
+    const newImageData = [...(otherImageData || []), ...files]; // Ensure otherImageData is an array
+
+    setOtherImageData(newImageData);
+
+    const readers = files.map((file) => {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          resolve(reader.result);
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+      });
+    });
+
+    Promise.all(readers)
+      .then((results) => {
+        setSelectedOtherImageData([
+          ...(selectedOtherImageData || []),
+          ...results,
+        ]); // Ensure selectedOtherImageData is an array
+      })
+      .catch((error) => {
+        console.error("Error reading files:", error);
+      });
+  };
+
+  // Function to remove a specific image
+  const removeOtherImage = (index) => {
+    const newImageData = otherImageData.filter((_, i) => i !== index);
+    const newSelectedImageData = selectedOtherImageData.filter(
+      (_, i) => i !== index
+    );
+
+    setOtherImageData(newImageData);
+    setSelectedOtherImageData(newSelectedImageData);
+  };
+
+console.log(selectedBannerImageData);
+  
+  const formFields = [
+    {
+      label: "Sponser name",
+      name: "sponserName",
+      type: "text",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Sponser Name (Arabic)",
+      name: "sponserNameArabic",
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Mobile no",
+      name: "mobileNo",
+      type: "number",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Sponser address",
+      name: "sponserAddress",
+      type: "text",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Bank name",
+      name: "bankName",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Account Name",
+      name: "accountNumber",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "SWIFT/BIC Code",
+      name: "swiftCode",
+      type: "number",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Account Email",
+      name: "bankEmail",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Annual yeild",
+      name: "annualyield",
+      type: "number",
+      helperText: "Please enter value in percentage",
+      isRequired: true,
+      section: "Investment Object Details",
+    },
+  ];
+
+  const groupedFields = formFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
 
   const onSubmit = (data) => {
     setSponser([
@@ -80,165 +223,14 @@ const AddSponser = () => {
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <Heading as="h6" size="xs" mt={4}>
-          Personal Details
-        </Heading>
-        <Box display={"flex"} gap={0}>
-        <Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
-            <FormField
-              label="Sponser name"
-              name="sponserName"
-              control={control}
-              errors={errors}
-              isRequired={true}
-            /><FormField
-            placeHolder={"الرجاء إدخال القيمة"}
-            name="اسم الراعي"
-            control={control}
-            errors={errors}
-            isRequired={true}
-            arabic={true}
-          />
-            <FormField
-              label="Mobile no"
-              name="mobileNo"
-              type="tel"
-              control={control}
-              errors={errors}
-              isRequired={true}
-            />
-            <FormField
-              label="Sponser address"
-              name="sponserAddress"
-              type="textarea"
-              control={control}
-              errors={errors}
-              isRequired={true}
-            />
-          </Box>
+    <FormInputMain
+      groupedFields={groupedFields}
+      control={control}
+      errors={errors}
 
-        </Box>
+      onSubmit={handleSubmit(onSubmit)}
 
-        <Divider />
-
-        <Heading as="h6" size="xs" mt={4}>
-          Bank Details
-        </Heading>
-        <Box display={"flex"} gap={0}>
-          {Array(1).fill(
-        <Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
-              {/* <FormField
-                label="Account Holder's Name"
-                name="accountHolderName"
-                control={control}
-                errors={errors}
-                isRequired={true}
-              /> */}
-              <FormField
-                label="Bank Name"
-                name="bankName"
-                control={control}
-                errors={errors}
-                isRequired={true}
-              />
-              <FormField
-                label="Account Number"
-                name="accountNumber"
-                control={control}
-                errors={errors}
-                isRequired={true}
-              />
-              {/* <FormField
-                label="Bank Branch"
-                name="bankBranch"
-                control={control}
-                errors={errors}
-                isRequired={true}
-              /> */}
-              {/* <FormField
-                label="Branch Address"
-                name="branchAddress"
-                control={control}
-                errors={errors}
-                isRequired={true}
-              /> */}
-              {/* <FormField
-                label="IFSC Code"
-                name="ifscCode"
-                control={control}
-                errors={errors}
-                isRequired={true}
-              /> */}
-              <FormField
-                label="SWIFT/BIC Code"
-                name="swiftCode"
-                control={control}
-                errors={errors}
-                isRequired={true}
-              />
-              {/* <FormField
-                label="Routing Number"
-                name="routingNumber"
-                control={control}
-                errors={errors}
-                isRequired={true}
-              /> */}
-              {/* <FormField
-                label="IBAN"
-                name="iban"
-                control={control}
-                errors={errors}
-                isRequired={true}
-              /> */}
-              {/* <FormField
-                label="Type of Account"
-                name="accountType"
-                control={control}
-                errors={errors}
-                isRequired={true}
-                component={
-                  <Select size={"sm"}>
-                    <option value="savings">Savings</option>
-                    <option value="checking">Checking</option>
-                    <option value="business">Business</option>
-                  </Select>
-                }
-              /> */}
-              {/* <FormField
-                label="Bank Phone Number"
-                name="bankPhoneNumber"
-                control={control}
-                errors={errors}
-                isRequired={true}
-              /> */}
-              <FormField
-                label="Bank Email (optional)"
-                name="bankEmail"
-                control={control}
-                errors={errors}
-              />
-
-              {/* <Button size={"sm"} rounded={"sm"} type="submit" colorScheme="green">
-          Submit
-        </Button> */}
-            </Box>
-          )}
-        </Box>
-
-        <Box display={"flex"} justifyContent={"flex-end"} p={4}>
-          <Button
-            size={"sm"}
-            width={"49.5%"}
-            rounded={"sm"}
-            type="submit"
-            colorScheme="green"
-          >
-            Submit
-          </Button>
-        </Box>
-      </form>
-    </Box>
+    /></Box>
   );
 };
 
diff --git a/src/Pages/Master/Sponser/EditSponser.jsx b/src/Pages/Master/Sponser/EditSponser.jsx
index 1d44746..622638e 100644
--- a/src/Pages/Master/Sponser/EditSponser.jsx
+++ b/src/Pages/Master/Sponser/EditSponser.jsx
@@ -1,22 +1,150 @@
-import { Box, Image, Text } from "@chakra-ui/react"
-// import error from "../assets/Error.svg"
-import robot from "../../../assets/robot.png"
-// import robot from "../assets/robot.png"
-const EditSponser = () => {
-  return (
-    
-    <Box
-    h={'100vh'}
-    display={'flex'}
-    justifyContent={'center'}
-    alignItems={'center'}
-    flexDirection={'column'}
-    gap={8}
-    >
-        <Image src={robot} w={"171px"} />
-        {/* <Text color={'green.800'} as={'span'} fontSize={'small'}>The requested URL was not found on this server.</Text> */}
-    </Box>
-  )
-}
+import { Box, Button, Divider, Heading } from "@chakra-ui/react";
+import { useParams } from "react-router-dom";
+import { useContext, useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { addSponser } from "./AddSponser";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import FormInputMain from "../../../Components/FormInputMain";
 
-export default EditSponser
\ No newline at end of file
+const EditSponser = () => {
+  const params = useParams();
+  const { sponser } = useContext(GlobalStateContext);
+  const [foundObject, setFoundObject] = useState(null);
+  const {
+    control,
+    handleSubmit,
+    reset,
+    getValues,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(addSponser),
+  });
+
+  useEffect(() => {
+    console.log(sponser);
+    const id = params?.id;
+    console.log(id);
+
+    // Ensure id is compared correctly
+    const found = sponser.find((item) => item?.id.toString() === id.toString());
+    console.log(found?.swiftCode);
+    setFoundObject(found);
+
+    if (found) {
+      reset({
+        sponserName: found.sponserName,
+        sponserNameArabic: found.sponserNameArabic,
+        mobileNo: found.mobileNo,
+        sponserAddress: found.sponserAddress,
+        bankName: found.bankName,
+        swiftCode: found.swiftCode,
+        accountNumber: found.accountNumber,
+        bankEmail: found.bankEmail,
+      });
+    }
+  }, [params, sponser, reset]);
+
+
+
+
+
+  if (!foundObject) {
+    return <Box>Loading...</Box>; // or any loading indicator
+  }
+
+  const formFields = [
+    {
+      label: "Sponser name",
+      name: "sponserName",
+      type: "text",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Sponser Name (Arabic)",
+      name: "sponserNameArabic",
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Mobile no",
+      name: "mobileNo",
+      type: "number",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Sponser address",
+      name: "sponserAddress",
+      type: "text",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Bank name",
+      name: "bankName",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Account Name",
+      name: "accountNumber",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "SWIFT/BIC Code",
+      name: "swiftCode",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Account Email",
+      name: "bankEmail",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Account Email",
+      name: "bankEmail",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+  ];
+
+  const groupedFields = formFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
+  const onSubmit = (data) => {
+console.log(data);
+  }
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
+    <FormInputMain
+      groupedFields={groupedFields}
+      control={control}
+      errors={errors}
+
+      onSubmit={handleSubmit(onSubmit)}
+    />
+    </Box>
+  );
+};
+
+export default EditSponser;
diff --git a/src/Pages/Master/Sponser/Sponsers.jsx b/src/Pages/Master/Sponser/Sponsers.jsx
index b1eaa13..7c50e6e 100644
--- a/src/Pages/Master/Sponser/Sponsers.jsx
+++ b/src/Pages/Master/Sponser/Sponsers.jsx
@@ -21,7 +21,7 @@ import React, { useContext, useEffect, useState } from "react";
 import { OPACITY_ON_LOAD } from "../../../Layout/animations";
 import DataTable from "../../../Components/DataTable/DataTable";
 import { HiDotsVertical } from "react-icons/hi";
-import { Link, Link as RouterLink } from "react-router-dom";
+import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
 import {
   AddIcon,
   CheckIcon,
@@ -40,6 +40,7 @@ import { debounce } from "./AddSponser";
 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
 
 const Sponser = () => {
+  const navigate = useNavigate()
   const toast = useToast();
   const { sponser, setSponser, slideFromRight } =
     useContext(GlobalStateContext);
@@ -191,6 +192,7 @@ const Sponser = () => {
           <Button
             _hover={{ color: "green.500" }}
             // transition={"0.5s all"}
+          onClick={()=>{ navigate(`view-sponser/${item?.id}`)}}
             color="green.300"
             rounded={"sm"}
             size={"xs"}
@@ -209,6 +211,7 @@ const Sponser = () => {
           placement="top"
         >
           <Button
+          onClick={()=>{ navigate(`edit-sponser/${item?.id}`)}}
             _hover={{ color: "blue.500" }}
             // transition={"0.5s all"}
             color="blue.400"
diff --git a/src/Pages/Master/Sponser/ViewSponser.jsx b/src/Pages/Master/Sponser/ViewSponser.jsx
index 1d41151..9b53c77 100644
--- a/src/Pages/Master/Sponser/ViewSponser.jsx
+++ b/src/Pages/Master/Sponser/ViewSponser.jsx
@@ -1,22 +1,102 @@
-import { Box, Image, Text } from "@chakra-ui/react"
+import {
+  Box,
+  Button,
+  Divider,
+  FormControl,
+  FormLabel,
+  Heading,
+  Image,
+  Text,
+} from "@chakra-ui/react";
 // import error from "../assets/Error.svg"
-import robot from "../../../assets/robot.png"
+import robot from "../../../assets/robot.png";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import { useNavigate, useParams } from "react-router-dom";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { useContext } from "react";
 // import robot from "../assets/robot.png"
 const ViewSponser = () => {
-  return (
-    
-    <Box
-    h={'100vh'}
-    display={'flex'}
-    justifyContent={'center'}
-    alignItems={'center'}
-    flexDirection={'column'}
-    gap={8}
-    >
-        <Image src={robot} w={"171px"} />
-        {/* <Text color={'green.800'} as={'span'} fontSize={'small'}>The requested URL was not found on this server.</Text> */}
-    </Box>
-  )
-}
+  const params = useParams();
+  const navigate = useNavigate()
+  const { sponser } = useContext(GlobalStateContext);
+  const id = params?.id;
 
-export default ViewSponser
\ No newline at end of file
+  const found = sponser.find((item) => item?.id.toString() === id.toString());
+
+  const personalDetails = [
+    {
+      title: "Sponser Name",
+      value: found?.sponserName,
+    },
+    {
+      title: "Sponser Name (Arabic)",
+      value: found?.sponserNameArabic,
+    },
+    {
+      title: "Mobile no",
+      value: found?.mobileNo,
+    },
+    {
+      title: "Sponser address",
+      value: found?.sponserAddress,
+    },
+  ];
+
+  const bankDetails = [
+    {
+      title: "Bank Name",
+      value: found?.bankName,
+    },
+    {
+      title: "Account number",
+      value: found?.accountNumber,
+    },
+    {
+      title: "SWIFT/BIC Code",
+      value: found?.swiftCode,
+    },
+    {
+      title: "Account Email",
+      value: found?.bankEmail,
+    },
+  ];
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
+      <Heading display={'flex'} justifyContent={'space-between'} pe={4} as="h6" size="xs" mt={3}>
+        Personal Details <Button colorScheme="green" size={'xs'} rounded={'sm'} onClick={() => navigate(`/sponser/edit-sponser/${id}`)} >Edit sponsers</Button>
+      </Heading>
+      <Box display={"flex"} gap={0}>
+        <Box width={"100%"} pt={5} mb={5} display={"flex"} flexWrap={"wrap"} gap={4}>
+          {personalDetails?.map(({ title, value }, index) => (
+            <FormControl className="border-end" key={index} w={"49%"} mb={0}>
+              <FormLabel textAlign={title === "Sponser Name (Arabic)" ? "right": "left"} color={"gray.500"} fontSize={"xs"}>
+                {title}
+              </FormLabel>
+              <FormLabel textAlign={title === "Sponser Name (Arabic)" ? "right": "left"}  fontSize={"sm"}>{value}</FormLabel>
+            </FormControl>
+          ))}
+        </Box>
+      </Box>
+
+      <Divider />
+      <Heading as="h6" size="xs" mt={0}>
+        Bank Details
+      </Heading>
+      <Box display={"flex"} gap={0}>
+        <Box width={"100%"} pt={5} display={"flex"} flexWrap={"wrap"} gap={4}>
+          {bankDetails?.map(({ title, value }, index) => (
+            <FormControl  className="border-end" key={index} w={"49%"} mb={0}>
+              <FormLabel color={"gray.500"} fontSize={"xs"}>
+                {title}
+              </FormLabel>
+              <FormLabel fontSize={"sm"}>{value}</FormLabel>
+            </FormControl>
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default ViewSponser;
diff --git a/src/Pages/WithDrawal/ViewHistory.jsx b/src/Pages/WithDrawal/ViewHistory.jsx
index 6dc35e3..cc2a2c9 100644
--- a/src/Pages/WithDrawal/ViewHistory.jsx
+++ b/src/Pages/WithDrawal/ViewHistory.jsx
@@ -6,6 +6,7 @@ import {
   HStack,
   Input,
   Text,
+  Tooltip,
   useToast,
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
@@ -15,6 +16,7 @@ import Pagination from "../../Components/Pagination";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import CustomAlertDialog from "../../Components/CustomAlertDialog";
 import { formatDate } from "../../Components/Functions/UTCConvertor";
+import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
 // import { formatDate } from "../../Components/Functions/UTCConvertor";
 
 const ViewHistory = () => {
@@ -137,17 +139,15 @@ const ViewHistory = () => {
         {item.quarter}
       </Text>
     ),
-
     Action: (
-      <Text
-        justifyContent={slideFromRight ? "right" : "left"}
-        as={"span"}
-        color={"gray.600"}
-        className="d-flex align-items-center web-text-small"
-        fontWeight={'500'}
-      >
-        {item.amount}
-      </Text>
+      <Box display={'flex'} justifyContent={'space-around'}>
+        <Tooltip rounded={'sm'} fontSize={'xs'}  label='Accept' bg='#fff' color={'green.500'} placement="left-start">
+        <Button color="green.500"   rounded={'sm'} size={'xs'}>
+        <CheckIcon /></Button></Tooltip>
+        <Tooltip rounded={'sm'} fontSize={'xs'}  label='Reject' bg='#fff' color={'red.500'} placement="left-start">
+        <Button color="red.500" rounded={'sm'} size={'xs'}>
+        <CloseIcon /></Button></Tooltip>
+      </Box>
     ),
   }));