From d99274e0dc0c5d16dffd70569a6839b93e288949 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Fri, 28 Jun 2024 16:36:56 +0530
Subject: [PATCH 1/3] investor request

---
 .../InvestorPendingRequest.jsx                | 22 -------------------
 1 file changed, 22 deletions(-)
 delete mode 100644 src/Pages/InvestorUpgrade/InvestorPendingRequest.jsx

diff --git a/src/Pages/InvestorUpgrade/InvestorPendingRequest.jsx b/src/Pages/InvestorUpgrade/InvestorPendingRequest.jsx
deleted file mode 100644
index 80b87f2..0000000
--- a/src/Pages/InvestorUpgrade/InvestorPendingRequest.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-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 InvestorPendingRequest = () => {
-  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>
-  )
-}
-
-export default InvestorPendingRequest
\ No newline at end of file

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 2/3] 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>
     ),
   }));
 

From d9c428a4a4b07482ad2e86cf0813a872dad3a241 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Mon, 1 Jul 2024 12:47:47 +0530
Subject: [PATCH 3/3] investment add

---
 .../InvestmentCard/InvestmentCard.jsx         | 102 ++--
 src/Contexts/GlobalStateProvider.jsx          | 452 +++++++++++-------
 src/Pages/IO_Management/CreateIO.jsx          | 237 +++++----
 src/Pages/IO_Management/ViewIO.jsx            |   2 +-
 src/Pages/InvestorUpgrade/InvestorRequest.jsx | 220 +++++++++
 .../InvestmentType/AddInvestmentType.jsx      | 384 +++++----------
 .../InvestmentType/EditInvestmentType.jsx     | 180 ++++++-
 .../Master/InvestmentType/InvestmentType.jsx  | 198 ++++++--
 .../InvestmentType/ViewInvestmentType.jsx     |  69 ++-
 src/Pages/Master/Sponser/AddSponser.jsx       |  32 +-
 src/Pages/Master/Sponser/EditSponser.jsx      | 174 ++++++-
 src/Pages/Master/Sponser/Sponsers.jsx         |   5 +-
 src/Pages/Master/Sponser/ViewSponser.jsx      |  47 +-
 src/Routes/Routes.js                          |   2 +-
 src/Theme/Theme.js                            |  67 ++-
 15 files changed, 1401 insertions(+), 770 deletions(-)
 create mode 100644 src/Pages/InvestorUpgrade/InvestorRequest.jsx

diff --git a/src/Components/InvestmentCard/InvestmentCard.jsx b/src/Components/InvestmentCard/InvestmentCard.jsx
index 13ed3af..81618c2 100644
--- a/src/Components/InvestmentCard/InvestmentCard.jsx
+++ b/src/Components/InvestmentCard/InvestmentCard.jsx
@@ -30,14 +30,14 @@ const InvestmentCard = ({ investment }) => {
         p={"14px"}
         rounded={"24px"}
         objectFit="cover"
-        w={"200px"}
-        h={"140px"}
+        w={"180px"}
+        h={"160px"}
         src={investment?.banner_image}
         alt={investment?.ioName}
       />
 
-      <Stack w={"38%"}>
-        <CardBody>
+      <Stack w={"22%"}>
+        <CardBody p={"18px 12px 18px 0px"}>
           <Heading size="sm" fontWeight={"500"}>
             {investment?.ioName}
             <Badge
@@ -54,6 +54,7 @@ const InvestmentCard = ({ investment }) => {
               pb={0.5}
               fontSize={"xs"}
               ms={3}
+              fontWeight={'600'}
             >
               {investment?.status === "Available"
                 ? "Available"
@@ -62,68 +63,87 @@ const InvestmentCard = ({ investment }) => {
                 : "Closed"}
             </Badge>
           </Heading>
-          <Text fontSize="sm" mb={"4px"}>
-            Sponsor: 
-            <Text as={"span"} fontWeight={"600"}>
+          <Text
+            fontSize="sm"
+            mb={"4px"}
+            display={"flex"}
+            justifyContent={"space-between"}
+          >
+            Sponsor:
+            <Text as={"span"} fontWeight={"500"}>
               {investment?.sponserName}
             </Text>
           </Text>
-          <Text fontSize="sm" mb={"4px"}>
-            Ann return: 
-            <Text as={"span"} fontWeight={"600"}>
+          <Text
+            fontSize="sm"
+            mb={"4px"}
+            display={"flex"}
+            justifyContent={"space-between"}
+          >
+            Ann return:
+            <Text as={"span"} fontWeight={"500"}>
               {investment?.annualReturn}
             </Text>
           </Text>
-          <Text fontSize="sm" mb={"4px"}>
-            Ann Yield: 
-            <Text as={"span"} fontWeight={"600"}>
+          <Text
+            fontSize="sm"
+            mb={"4px"}
+            display={"flex"}
+            justifyContent={"space-between"}
+          >
+            Ann Yield:
+            <Text as={"span"} fontWeight={"500"}>
               {investment?.annualyield}
             </Text>
           </Text>
-          <Text fontSize="sm" mb={"4px"}>
-            Tenure: 
-            <Text as={"span"} fontWeight={"600"}>
-              {investment?.tenure}
-            </Text>
-          </Text>
-          <Text fontSize="sm" mb={"4px"}>
-            Quaterly: 
-            <Text as={"span"} fontWeight={"600"}>
-              {investment?.quaterly}
-            </Text>
-          </Text>
         </CardBody>
       </Stack>
-      <Stack borderLeft={"1px solid #ccc"}>
-        <CardBody>
-        <Text fontSize="sm" mb={"4px"}>
-              Destributed Amount: 
-            <Text as={"span"} fontWeight={"600"}>
+      <Stack w={"22%"} borderLeft={"1px solid #ccc"}>
+        <CardBody p={"38px 12px 7px 12px"}>
+          <Text fontSize="sm" mb={"4px"} display={'flex'} justifyContent={'space-between'}>
+            Tenure:
+            <Text as={"span"} fontWeight={"500"}>
+              {investment?.tenure}
+            </Text>
+          </Text>
+          <Text fontSize="sm" mb={"4px"} display={'flex'} justifyContent={'space-between'}>
+            Quaterly:
+            <Text as={"span"} fontWeight={"500"}>
+              {investment?.quaterly}
+            </Text>
+          </Text>
+          <Text fontSize="sm" mb={"4px"} display={'flex'} justifyContent={'space-between'}>
+            Destributed Amount:
+            <Text as={"span"} fontWeight={"500"}>
               {investment?.destributedAmount}
             </Text>
           </Text>
-          <Text fontSize="sm" mb={"4px"}>
+        </CardBody>
+      </Stack>
+      <Stack w={"22%"} borderLeft={"1px solid #ccc"}>
+        <CardBody p={"38px 12px 7px 12px"}>
+          <Text fontSize="sm" mb={"4px"} display={'flex'} justifyContent={'space-between'}>
             Min.Invests:
-            <Text as={"span"} fontWeight={"600"}>
-              {investment?.minInvests}
+            <Text as={"span"} fontWeight={"500"}>
+              {investment?.miniInvest}
             </Text>
           </Text>
-          <Text fontSize="sm" mb={"4px"}>
+          <Text fontSize="sm" mb={"4px"} display={'flex'} justifyContent={'space-between'}>
             Targ Close:
-            <Text as={"span"} fontWeight={"600"}>
+            <Text as={"span"} fontWeight={"500"}>
               {new Date(investment?.targetClose).toLocaleDateString()}
             </Text>
           </Text>
-          <Text fontSize="sm" mb={"4px"}>
-            Year: 
-            <Text as={"span"} fontWeight={"600"}>
+          <Text fontSize="sm" mb={"4px"} display={'flex'} justifyContent={'space-between'}>
+            Year:
+            <Text as={"span"} fontWeight={"500"}>
               {investment?.year}
             </Text>
           </Text>
         </CardBody>
       </Stack>
-      <Stack>
-        <CardBody>
+      <Stack w={"20%"} borderLeft={"1px solid #ccc"}>
+        <CardBody padding={'25px 12px 7px 12px'}>
           <Box
             as="span"
             display={"flex"}
@@ -138,7 +158,7 @@ const InvestmentCard = ({ investment }) => {
             </Text>
           </Box>
           <Progress
-            width={"200px"}
+            width={"100%"}
             value={75} // Assuming a static progress value
             rounded={"10px"}
             colorScheme={"green"}
diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index 029f3da..9ad3ccf 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -267,245 +267,246 @@ const GlobalStateProvider = ({ children }) => {
   const [investmentType, setInvestmentType] = useState([
     {
       id: 1,
-      investmentName: "John Doe",
-      mobileNo: "1234567890",
-      sponserAddress: "123 Main St, Springfield, USA",
-      accountHolderName: "John Doe",
-      bankName: "Example Bank",
-      accountNumber: "1234567890",
-      bankBranch: "Main Branch",
-      branchAddress: "456 Elm St, Springfield, USA",
-      ifscCode: "IFSC12345",
-      swiftCode: "SWIFT56789",
-      routingNumber: "987654321",
-      iban: "IBAN987654321",
-      accountType: "savings",
-      bankPhoneNumber: "9876543210",
-      bankEmail: "john.doe@example.com",
+      investmentName: "Michael Scott",
+      mobileNo: "0987654321",
+      investmentAddress: "1725 Slough Ave, Scranton, USA",
+      accountHolderName: "Michael Scott",
+      bankName: "Dunder Mifflin Bank",
+      accountNumber: "1111222233",
+      bankBranch: "Scranton Branch",
+      branchAddress: "101 Paper St, Scranton, USA",
+      ifscCode: "IFSC11111",
+      swiftCode: "SWIFT12345",
+      routingNumber: "123450987",
+      iban: "IBAN1111222233",
+      accountType: "checking",
+      bankPhoneNumber: "0987654321",
+      bankEmail: "michael.scott@example.com",
       status: true,
       createdAt: "45",
     },
     {
       id: 2,
-      investmentName: "Jane Smith",
-      mobileNo: "9876543210",
-      sponserAddress: "456 Oak St, Metropolis, USA",
-      accountHolderName: "Jane Smith",
-      bankName: "Another Bank",
-      accountNumber: "0987654321",
-      bankBranch: "Downtown Branch",
-      branchAddress: "789 Pine St, Metropolis, USA",
-      ifscCode: "IFSC54321",
-      swiftCode: "SWIFT98765",
-      routingNumber: "123456789",
-      iban: "IBAN123456789",
-      accountType: "checking",
-      bankPhoneNumber: "1234567890",
-      bankEmail: "jane.smith@example.com",
+      investmentName: "Pam Beesly",
+      mobileNo: "1234509876",
+      investmentAddress: "3487 Palm St, Scranton, USA",
+      accountHolderName: "Pam Beesly",
+      bankName: "Dunder Mifflin Bank",
+      accountNumber: "4444555566",
+      bankBranch: "Scranton Branch",
+      branchAddress: "101 Paper St, Scranton, USA",
+      ifscCode: "IFSC44444",
+      swiftCode: "SWIFT54321",
+      routingNumber: "543211234",
+      iban: "IBAN4444555566",
+      accountType: "savings",
+      bankPhoneNumber: "1234509876",
+      bankEmail: "pam.beesly@example.com",
       status: false,
       createdAt: "45",
     },
     {
       id: 3,
-      investmentName: "Alice Johnson",
-      mobileNo: "1231231234",
-      sponserAddress: "789 Pine St, Gotham, USA",
-      accountHolderName: "Alice Johnson",
-      bankName: "Gotham Bank",
-      accountNumber: "5678901234",
-      bankBranch: "Uptown Branch",
-      branchAddress: "101 Oak St, Gotham, USA",
-      ifscCode: "IFSC67890",
-      swiftCode: "SWIFT34567",
+      investmentName: "Jim Halpert",
+      mobileNo: "2345678901",
+      investmentAddress: "5701 Maple Ave, Scranton, USA",
+      accountHolderName: "Jim Halpert",
+      bankName: "Dunder Mifflin Bank",
+      accountNumber: "7777888899",
+      bankBranch: "Scranton Branch",
+      branchAddress: "101 Paper St, Scranton, USA",
+      ifscCode: "IFSC77777",
+      swiftCode: "SWIFT87654",
       routingNumber: "987654321",
-      iban: "IBAN345678901",
+      iban: "IBAN7777888899",
       accountType: "business",
-      bankPhoneNumber: "5556667777",
-      bankEmail: "alice.johnson@example.com",
+      bankPhoneNumber: "2345678901",
+      bankEmail: "jim.halpert@example.com",
       status: true,
       createdAt: "12",
     },
     {
       id: 4,
-      investmentName: "Bob Brown",
-      mobileNo: "3213214321",
-      sponserAddress: "101 Maple St, Smallville, USA",
-      accountHolderName: "Bob Brown",
-      bankName: "Smallville Credit Union",
-      accountNumber: "5432109876",
-      bankBranch: "Main Street Branch",
-      branchAddress: "202 Pine St, Smallville, USA",
-      ifscCode: "IFSC43210",
-      swiftCode: "SWIFT87654",
-      routingNumber: "123456789",
-      iban: "IBAN567890123",
+      investmentName: "Dwight Schrute",
+      mobileNo: "3456789012",
+      investmentAddress: "1725 Slough Ave, Scranton, USA",
+      accountHolderName: "Dwight Schrute",
+      bankName: "Dunder Mifflin Bank",
+      accountNumber: "3333444455",
+      bankBranch: "Scranton Branch",
+      branchAddress: "101 Paper St, Scranton, USA",
+      ifscCode: "IFSC33333",
+      swiftCode: "SWIFT34567",
+      routingNumber: "765432109",
+      iban: "IBAN3333444455",
       accountType: "savings",
-      bankPhoneNumber: "8889990000",
-      bankEmail: "bob.brown@example.com",
+      bankPhoneNumber: "3456789012",
+      bankEmail: "dwight.schrute@example.com",
       status: true,
       createdAt: "7",
     },
     {
       id: 5,
-      investmentName: "Charlie Davis",
-      mobileNo: "5555555555",
-      sponserAddress: "202 Birch St, Star City, USA",
-      accountHolderName: "Charlie Davis",
-      bankName: "Star City Bank",
-      accountNumber: "9876543210",
-      bankBranch: "Downtown Branch",
-      branchAddress: "303 Oak St, Star City, USA",
+      investmentName: "Stanley Hudson",
+      mobileNo: "4567890123",
+      investmentAddress: "202 Industrial St, Scranton, USA",
+      accountHolderName: "Stanley Hudson",
+      bankName: "Dunder Mifflin Bank",
+      accountNumber: "5555666677",
+      bankBranch: "Scranton Branch",
+      branchAddress: "101 Paper St, Scranton, USA",
       ifscCode: "IFSC55555",
-      swiftCode: "SWIFT00000",
-      routingNumber: "111223344",
-      iban: "IBAN999988887",
+      swiftCode: "SWIFT45678",
+      routingNumber: "876543210",
+      iban: "IBAN5555666677",
       accountType: "checking",
-      bankPhoneNumber: "1112223333",
-      bankEmail: "charlie.davis@example.com",
+      bankPhoneNumber: "4567890123",
+      bankEmail: "stanley.hudson@example.com",
       status: false,
       createdAt: "4",
     },
     {
       id: 6,
-      investmentName: "Daniel Evans",
-      mobileNo: "4444444444",
-      sponserAddress: "303 Cedar St, Central City, USA",
-      accountHolderName: "Daniel Evans",
-      bankName: "Central City Bank",
-      accountNumber: "4444555566",
-      bankBranch: "Uptown Branch",
-      branchAddress: "404 Elm St, Central City, USA",
-      ifscCode: "IFSC44444",
-      swiftCode: "SWIFT11111",
-      routingNumber: "555666777",
-      iban: "IBAN4444555566",
+      investmentName: "Angela Martin",
+      mobileNo: "5678901234",
+      investmentAddress: "7777 Cat Ave, Scranton, USA",
+      accountHolderName: "Angela Martin",
+      bankName: "Dunder Mifflin Bank",
+      accountNumber: "8888999900",
+      bankBranch: "Scranton Branch",
+      branchAddress: "101 Paper St, Scranton, USA",
+      ifscCode: "IFSC88888",
+      swiftCode: "SWIFT56789",
+      routingNumber: "987654321",
+      iban: "IBAN8888999900",
       accountType: "business",
-      bankPhoneNumber: "4445556666",
-      bankEmail: "daniel.evans@example.com",
+      bankPhoneNumber: "5678901234",
+      bankEmail: "angela.martin@example.com",
       status: true,
       createdAt: "2",
     },
     {
       id: 7,
-      investmentName: "Ella Fitzgerald",
-      mobileNo: "3333333333",
-      sponserAddress: "404 Elm St, Coast City, USA",
-      accountHolderName: "Ella Fitzgerald",
-      bankName: "Coast City Bank",
-      accountNumber: "3333444455",
-      bankBranch: "Downtown Branch",
-      branchAddress: "505 Cedar St, Coast City, USA",
-      ifscCode: "IFSC77777",
-      swiftCode: "SWIFT22222",
-      routingNumber: "888999000",
-      iban: "IBAN888999000",
+      investmentName: "Kevin Malone",
+      mobileNo: "6789012345",
+      investmentAddress: "3333 Cookie Ln, Scranton, USA",
+      accountHolderName: "Kevin Malone",
+      bankName: "Dunder Mifflin Bank",
+      accountNumber: "9999000011",
+      bankBranch: "Scranton Branch",
+      branchAddress: "101 Paper St, Scranton, USA",
+      ifscCode: "IFSC99999",
+      swiftCode: "SWIFT67890",
+      routingNumber: "876543210",
+      iban: "IBAN9999000011",
       accountType: "savings",
-      bankPhoneNumber: "7778889999",
-      bankEmail: "ella.fitzgerald@example.com",
+      bankPhoneNumber: "6789012345",
+      bankEmail: "kevin.malone@example.com",
       status: false,
       createdAt: "9",
     },
     {
       id: 8,
-      investmentName: "Frank Green",
-      mobileNo: "2222222222",
-      sponserAddress: "505 Ash St, Keystone City, USA",
-      accountHolderName: "Frank Green",
-      bankName: "Keystone City Bank",
-      accountNumber: "2222333344",
-      bankBranch: "Main Branch",
-      branchAddress: "606 Birch St, Keystone City, USA",
-      ifscCode: "IFSC88888",
-      swiftCode: "SWIFT33333",
-      routingNumber: "444555666",
-      iban: "IBAN444555666",
+      investmentName: "Phyllis Vance",
+      mobileNo: "7890123456",
+      investmentAddress: "4545 Knitting Way, Scranton, USA",
+      accountHolderName: "Phyllis Vance",
+      bankName: "Dunder Mifflin Bank",
+      accountNumber: "0000111122",
+      bankBranch: "Scranton Branch",
+      branchAddress: "101 Paper St, Scranton, USA",
+      ifscCode: "IFSC00000",
+      swiftCode: "SWIFT78901",
+      routingNumber: "123456789",
+      iban: "IBAN0000111122",
       accountType: "checking",
-      bankPhoneNumber: "2222333444",
-      bankEmail: "frank.green@example.com",
+      bankPhoneNumber: "7890123456",
+      bankEmail: "phyllis.vance@example.com",
       status: true,
       createdAt: "8",
     },
     {
       id: 9,
-      investmentName: "Grace Hall",
-      mobileNo: "1111111111",
-      sponserAddress: "606 Willow St, Hub City, USA",
-      accountHolderName: "Grace Hall",
-      bankName: "Hub City Bank",
+      investmentName: "Meredith Palmer",
+      mobileNo: "8901234567",
+      investmentAddress: "6666 Booze Blvd, Scranton, USA",
+      accountHolderName: "Meredith Palmer",
+      bankName: "Dunder Mifflin Bank",
       accountNumber: "1111222233",
-      bankBranch: "Downtown Branch",
-      branchAddress: "707 Cedar St, Hub City, USA",
-      ifscCode: "IFSC99999",
-      swiftCode: "SWIFT44444",
-      routingNumber: "555566677",
-      iban: "IBAN555566677",
+      bankBranch: "Scranton Branch",
+      branchAddress: "101 Paper St, Scranton, USA",
+      ifscCode: "IFSC11111",
+      swiftCode: "SWIFT89012",
+      routingNumber: "123450987",
+      iban: "IBAN1111222233",
       accountType: "business",
-      bankPhoneNumber: "1111222333",
-      bankEmail: "grace.hall@example.com",
+      bankPhoneNumber: "8901234567",
+      bankEmail: "meredith.palmer@example.com",
       status: true,
-      createdAt: "1",
+      createdAt: "1"
     },
     {
       id: 10,
-      investmentName: "Henry Ingram",
-      mobileNo: "6666666666",
-      sponserAddress: "707 Spruce St, Fawcett City, USA",
-      accountHolderName: "Henry Ingram",
-      bankName: "Fawcett City Bank",
-      accountNumber: "6666777788",
-      bankBranch: "Main Street Branch",
-      branchAddress: "808 Oak St, Fawcett City, USA",
-      ifscCode: "IFSC66666",
-      swiftCode: "SWIFT55555",
-      routingNumber: "999000111",
-      iban: "IBAN999000111",
+      investmentName: "Ryan Howard",
+      mobileNo: "9012345678",
+      investmentAddress: "7777 Temp Way, Scranton, USA",
+      accountHolderName: "Ryan Howard",
+      bankName: "Dunder Mifflin Bank",
+      accountNumber: "2222333344",
+      bankBranch: "Scranton Branch",
+      branchAddress: "101 Paper St, Scranton, USA",
+      ifscCode: "IFSC22222",
+      swiftCode: "SWIFT90123",
+      routingNumber: "234561098",
+      iban: "IBAN2222333344",
       accountType: "savings",
-      bankPhoneNumber: "6666777888",
-      bankEmail: "henry.ingram@example.com",
+      bankPhoneNumber: "9012345678",
+      bankEmail: "ryan.howard@example.com",
       status: false,
       createdAt: "6",
     },
     {
       id: 11,
-      investmentName: "Grace Hall",
-      mobileNo: "1111111111",
-      sponserAddress: "606 Willow St, Hub City, USA",
-      accountHolderName: "Grace Hall",
-      bankName: "Hub City Bank",
-      accountNumber: "1111222233",
-      bankBranch: "Downtown Branch",
-      branchAddress: "707 Cedar St, Hub City, USA",
-      ifscCode: "IFSC99999",
-      swiftCode: "SWIFT44444",
-      routingNumber: "555566677",
-      iban: "IBAN555566677",
+      investmentName: "Oscar Martinez",
+      mobileNo: "0123456789",
+      investmentAddress: "2222 Math St, Scranton, USA",
+      accountHolderName: "Oscar Martinez",
+      bankName: "Dunder Mifflin Bank",
+      accountNumber: "3333444455",
+      bankBranch: "Scranton Branch",
+      branchAddress: "101 Paper St, Scranton, USA",
+      ifscCode: "IFSC33333",
+      swiftCode: "SWIFT01234",
+      routingNumber: "345671209",
+      iban: "IBAN3333444455",
       accountType: "business",
-      bankPhoneNumber: "1111222333",
-      bankEmail: "grace.hall@example.com",
+      bankPhoneNumber: "0123456789",
+      bankEmail: "oscar.martinez@example.com",
       status: true,
       createdAt: "1",
     },
     {
       id: 12,
-      investmentName: "Henry Ingram",
-      mobileNo: "6666666666",
-      sponserAddress: "707 Spruce St, Fawcett City, USA",
-      accountHolderName: "Henry Ingram",
-      bankName: "Fawcett City Bank",
-      accountNumber: "6666777788",
-      bankBranch: "Main Street Branch",
-      branchAddress: "808 Oak St, Fawcett City, USA",
-      ifscCode: "IFSC66666",
-      swiftCode: "SWIFT55555",
-      routingNumber: "999000111",
-      iban: "IBAN999000111",
+      investmentName: "Kelly Kapoor",
+      mobileNo: "9876543210",
+      investmentAddress: "4444 Fashion Ave, Scranton, USA",
+      accountHolderName: "Kelly Kapoor",
+      bankName: "Dunder Mifflin Bank",
+      accountNumber: "4444555566",
+      bankBranch: "Scranton Branch",
+      branchAddress: "101 Paper St, Scranton, USA",
+      ifscCode: "IFSC44444",
+      swiftCode: "SWIFT23456",
+      routingNumber: "456781320",
+      iban: "IBAN4444555566",
       accountType: "savings",
-      bankPhoneNumber: "6666777888",
-      bankEmail: "henry.ingram@example.com",
+      bankPhoneNumber: "9876543210",
+      bankEmail: "kelly.kapoor@example.com",
       status: false,
       createdAt: "6",
     },
   ]);
+  
 
   const [investment, setInvestment] = useState([
     // {
@@ -901,6 +902,117 @@ const GlobalStateProvider = ({ children }) => {
     },
   ]);
 
+  const [investorRequest, setInvestorRequest] = useState([
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+  ]);
+
   return (
     <GlobalStateContext.Provider
       value={{
@@ -928,7 +1040,9 @@ const GlobalStateProvider = ({ children }) => {
         viewHistory,
         setViewHistory,
         investmentType,
-        setInvestmentType
+        setInvestmentType,
+        investorRequest,
+        setInvestorRequest,
       }}
     >
       {children}
diff --git a/src/Pages/IO_Management/CreateIO.jsx b/src/Pages/IO_Management/CreateIO.jsx
index 3ca1e26..da94be8 100644
--- a/src/Pages/IO_Management/CreateIO.jsx
+++ b/src/Pages/IO_Management/CreateIO.jsx
@@ -67,7 +67,6 @@ const CreateIO = () => {
   const { sponser, setSponser,investment, setInvestment } = useContext(GlobalStateContext);
   const [bannerImageData, setBannerImageData] = useState(null);
   const [otherImageData, setOtherImageData] = useState(null);
-
   const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
   const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
   const [charges, setCharges] = useState([]);
@@ -128,6 +127,97 @@ const CreateIO = () => {
     label: item.sponserName,
   }));
 
+
+  const [investForm, setInvestForm] = useState(
+    [
+      {
+        label: "Investment object name",
+        name: "ioName",
+        type: "text",
+        isRequired: true,
+      },
+      {
+        label: "Investment object",
+        name: "ioNameArabic",
+        placeHolder: "الرجاء إدخال القيمة",
+        arabic: true,
+        isRequired: true,
+      },
+      {
+        label: "Destributed Amount",
+        placeHolder: "$00.0",
+        helperText: "Please enter value in $",
+        name: "destributedAmount",
+        type: "number",
+        isRequired: true,
+      },
+      {
+        label: "Min Invest",
+        placeHolder: "$00.00",
+        helperText: "Please enter value in $",
+        name: "miniInvest",
+        type: "number",
+        isRequired: true,
+      },
+      {
+        label: "Year",
+        name: "year",
+        type: "select",
+        options: years,
+        isRequired: true,
+      },
+      {
+        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,
+      },
+      {
+        label: "Sponsers Name",
+        name: "sponserName",
+        type: "select",    
+        options: sponserOptions,
+        isRequired: true,
+      },
+      {
+        label: "Target close",
+        name: "targetClose",
+        type: "date",
+        isRequired: true,
+      },
+      {
+        label: "Tenure",
+        name: "tenure",
+        type: "number",
+        isRequired: true,
+      },
+      {
+        label: "Annual yeild",
+        placeHolder: "00.00%",
+        helperText: "Please enter value in percentage",
+        name: "annualyield",
+        type: "number",
+        isRequired: true,
+      },
+      {
+        label: "Annual return",
+        placeHolder: "00.00%",
+        helperText: "Please enter value in percentage",
+        name: "annualReturn",
+        type: "number",
+        isRequired: true,
+      },
+    ]
+  );
+
+
+
   const handleBannerImageChange = (e) => {
     const file = e.target.files[0];
     setBannerImageData(file);
@@ -172,7 +262,7 @@ const CreateIO = () => {
   // Function to remove a specific image
   const removeOtherImage = (index) => {
     const newImageData = otherImageData.filter((_, i) => i !== index);
-    const newSelectedImageData = selectedOtherImageData.filter(
+    const newSelectedImageData = selectedOtherImageData.filter(   
       (_, i) => i !== index
     );
 
@@ -186,134 +276,21 @@ const CreateIO = () => {
         <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 w={'100%'} display={'flex'} flexWrap={'wrap'} gap={5} p={2}>
+          {investForm.map((field, index) => (
+            <FormField
+              key={index}
+              label={field.label}
+              name={field.name}
+              type={field.type}
+              placeHolder={field.placeHolder}
+              helperText={field.helperText} 
+              options={field.options}
+              control={control}
+              errors={errors}
+              isRequired={true}
+            />
+          ))}
         </Box>
 
         <Divider />
diff --git a/src/Pages/IO_Management/ViewIO.jsx b/src/Pages/IO_Management/ViewIO.jsx
index 2b1d1ec..3561caf 100644
--- a/src/Pages/IO_Management/ViewIO.jsx
+++ b/src/Pages/IO_Management/ViewIO.jsx
@@ -68,7 +68,7 @@ const ExchangeRate = () => {
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"}>
-      <Tabs position="relative" variant="unstyled" mt={2}>
+      <Tabs position="relative" variant="unstyled" mt={2} >
         <TabList>
           {/* <Tab fontSize={"sm"}>All</Tab> */}
           {/* <Tab fontSize={"sm"}>Available</Tab>
diff --git a/src/Pages/InvestorUpgrade/InvestorRequest.jsx b/src/Pages/InvestorUpgrade/InvestorRequest.jsx
new file mode 100644
index 0000000..87f945d
--- /dev/null
+++ b/src/Pages/InvestorUpgrade/InvestorRequest.jsx
@@ -0,0 +1,220 @@
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Text,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import DataTable from "../../Components/DataTable/DataTable";
+import Pagination from "../../Components/Pagination";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import { formatDate } from "../../Components/Functions/UTCConvertor";
+// import { formatDate } from "../../Components/Functions/UTCConvertor";
+
+const InvestorRequest = () => {
+  const toast = useToast();
+  const { slideFromRight, investorRequest, setInvestorRequest } =
+    useContext(GlobalStateContext);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  // ====================================================[Table Filter]================================================================
+  const filteredData = investorRequest.filter((item) => {
+    // Filter by name (case insensitive)
+    const name = item.Distribution;
+    const searchLower = searchTerm.toLowerCase();
+    const nameMatches = name.toLowerCase().includes(searchLower);
+
+    // Filter by status
+    // const status = item.status;
+    // const statusLower = status ? "active" : "inactive";
+
+    // const statusMatches =
+    //   statusFilter === "all" ||
+    //   (statusFilter === "active" && status === true) ||
+    //   (statusFilter === "inactive" && status === false);
+
+    return nameMatches;
+  });
+
+  // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    "Sr No.",
+    "Date",
+    "Distribution Amount",
+    "Charges (USD)",
+    "Year",
+    "Quater",
+    "Amount",
+  ];
+
+  const extractedArray = filteredData?.map((item, index) => ({
+    id: item?.id,
+    "Sr No.": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.800"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {index + 1}.
+      </Text>
+    ),
+    "Date": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {formatDate(item.date)}
+      </Text>
+    ),
+    "Distribution Amount": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {item.Distribution}
+      </Text>
+    ),
+    "Charges (USD)": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.800"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {item.charge}
+        {/* {formatDate(item.charge)} */}
+      </Text>
+    ),
+    Year: (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.800"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {item.year}
+      </Text>
+    ),
+    Quater: (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {item.quater}
+      </Text>
+    ),
+
+    Amount: (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {item.amount}
+      </Text>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const updatedSponsors = sponser.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
+
+    setTimeout(() => {
+      setSponser(updatedSponsors);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          ps={1}
+          pe={1}
+          pb={4}
+          pt={4}
+          spacing="24px"
+        >
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+
+          <HStack display={"flex"} alignItems={"center"}>
+            <Pagination totalItems={10} />
+          </HStack>
+        </HStack>
+      </Box>
+
+      <DataTable
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        // totalPages={10}
+
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+    </Box>
+  );
+};
+
+export default InvestorRequest;
diff --git a/src/Pages/Master/InvestmentType/AddInvestmentType.jsx b/src/Pages/Master/InvestmentType/AddInvestmentType.jsx
index d0669e1..b751bb1 100644
--- a/src/Pages/Master/InvestmentType/AddInvestmentType.jsx
+++ b/src/Pages/Master/InvestmentType/AddInvestmentType.jsx
@@ -1,88 +1,42 @@
-import React, { useContext, useState } from "react";
+import React, { useContext } from "react";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
 import {
   Box,
   Divider,
-  FormControl,
-  FormLabel,
   Heading,
-  Input,
-  Select,
-  Textarea,
   Button,
   Text,
-  Image,
 } from "@chakra-ui/react";
 import { useForm, Controller } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
-import { AddIcon, CloseIcon, WarningTwoIcon } from "@chakra-ui/icons";
+import { WarningTwoIcon } from "@chakra-ui/icons";
 import { TiWarning } from "react-icons/ti";
-import { useNavigate } from "react-router-dom";
-import { v4 as uuidv4 } from "uuid";
-import { OPACITY_ON_LOAD } from "../../../Layout/animations";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { useNavigate } from "react-router-dom";
 import FormField from "../../../Components/FormField";
+import { v4 as uuidv4 } from "uuid";
 
 const schema = yup.object().shape({
-  ioNameArabic: yup.string().required("Arabic name is required"),
-  ioName: yup.string().required("Investment Object name is required"),
-  sponserName: yup.string().required("Sponser name is required"),
-  destributedAmount: yup
-    .number()
-    .required("Distributed Amount is required")
-    .positive("Must be a positive number"),
-  year: yup.string().required("Year is required"),
-  tenure: yup
-    .number()
-    .required("Tenure is required")
-    .positive("Must be a positive number"),
-  annualReturn: yup
-    .number()
-    .required("Annual Return is required")
-    .positive("Must be a positive number"),
-  miniInvest: yup
-    .number()
-    .required("Minimum Invest is required")
-    .positive("Must be a positive number"),
-  quaterly: yup.string().required("Quaterly is required"),
-  targetClose: yup.date().required("Target close date is required"),
-  annualyield: yup
-    .number()
-    .required("Annual Yield is required")
-    .positive("Must be a positive number"),
-  banner_image: yup.mixed().required("Profile image is required"),
-  // .test(
-  //   'fileSize',
-  //   'File size is too large',
-  //   value => value && value.size <= 10485760 // 10MB
-  // )
-  // .test(
-  //   'fileType',
-  //   'Unsupported file format',
-  //   value => value && ['image/jpg', 'image/jpeg', 'image/gif', 'image/png'].includes(value.type)
-  // ),
-  other_image: yup.mixed().required("Profile image is required"),
-  // .test(
-  //   'fileSize',
-  //   'File size is too large',
-  //   value => value && value.size <= 10485760 // 10MB
-  // )
-  // .test(
-  //   'fileType',
-  //   'Unsupported file format',
-  //   value => value && ['image/jpg', 'image/jpeg', 'image/gif', 'image/png'].includes(value.type)
-  // ),
+  investmentName: yup.string().required("Investment name is required"),
+  mobileNo: yup.string().required("Mobile no is required"),
+  investmentAddress: yup.string().required("Investment 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"),
 });
 
-const startYear = 2024;
-const endYear = 2124;
-// const years = Array.from({ length: endYear - startYear + 1 }, (_, i) => startYear + i);
-const years = Array.from({ length: 2124 - 2024 + 1 }, (_, i) => 2024 + i).map(
-  (year) => ({ value: year, label: year })
-);
-
-console.log(years);
-
 export function debounce(func, delay) {
   let debounceTimer;
   return function (...args) {
@@ -91,225 +45,139 @@ export function debounce(func, delay) {
   };
 }
 
-
-
-
 const AddInvestmentType = () => {
   const navigate = useNavigate();
-  const { sponser, setSponser,investment, setInvestment } = useContext(GlobalStateContext);
-  const [bannerImageData, setBannerImageData] = useState(null);
-  const [otherImageData, setOtherImageData] = useState(null);
-
-  const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
-  const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
-  
-
-
+  const { investmentType, setInvestmentType } =
+    useContext(GlobalStateContext);
   const {
     control,
     handleSubmit,
-    reset,
-    setValue,
     formState: { errors },
   } = useForm({
     resolver: yupResolver(schema),
-    // defaultValues: {
-    //   destributedAmount: 0,
-    //   tenure: 0,
-    //   annualReturn: 0,
-    //   miniInvest: 0,
-    //   annualyield: 0,
-    // },
   });
 
   console.log(errors);
 
   const onSubmit = (data) => {
-
-    // setValue("banner_image", selectedBannerImageData);
-    data.banner_image = selectedBannerImageData;
-    const updatedData = { ...data, status: "Available"}
-    console.log(selectedBannerImageData);
-    setInvestment([...investment,updatedData])
-    navigate("/view-io");
-    reset();
+    setInvestmentType([
+      {
+        ...data,
+        status: true,
+        id: uuidv4(),
+        createdAt: new Date().toISOString(),
+      },
+      ...investmentType,
+    ]);
+    navigate("/investment-type");
   };
 
-  // Extract options for the select input
-  const sponserOptions = sponser.map((item) => ({
-    value: item.sponserName,
-    label: item.sponserName,
-  }));
-
-
-  
-const investForm = [
-  {
-    label: "Investment object name",
-    name: "ioName",
-    type: "text",
-    isRequired: true,
-  },
-  {
-    label: "Investment object",
-    name: "ioNameArabic",
-    placeHolder: "الرجاء إدخال القيمة",
-    arabic: true,
-    isRequired: true,
-  },
-  {
-    label: "Destributed Amount",
-    placeHolder: "$00.0",
-    helperText: "Please enter value in $",
-    name: "destributedAmount",
-    type: "number",
-    isRequired: true,
-  },
-  {
-    label: "Min Invest",
-    placeHolder: "$00.00",
-    helperText: "Please enter value in $",
-    name: "miniInvest",
-    type: "number",
-    isRequired: true,
-  },
-  {
-    label: "Year",
-    name: "year",
-    type: "select",
-    options: years,
-    isRequired: true,
-  },
-  {
-    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,
-  },
-  {
-    label: "Sponsers Name",
-    name: "sponserName",
-    type: "select",
-    isRequired: true,
-  },
-  {
-    label: "Target close",
-    name: "targetClose",
-    type: "date",
-    isRequired: true,
-  },
-  {
-    label: "Tenure",
-    name: "tenure",
-    type: "number",
-    isRequired: true,
-  },
-  {
-    label: "Annual yeild",
-    placeHolder: "00.00%",
-    helperText: "Please enter value in percentage",
-    name: "annualyield",
-    type: "number",
-    isRequired: true,
-  },
-  {
-    label: "Annual return",
-    placeHolder: "00.00%",
-    helperText: "Please enter value in percentage",
-    name: "annualReturn",
-    type: "number",
-    isRequired: true,
-  },
-];
-
-  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);
-};
   return (
-    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>      
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
       <form onSubmit={handleSubmit(onSubmit)}>
-        <Heading as="h6" size="xs" mt={4} mb={4}>
-          Investment Object Details
+        <Heading as="h6" size="xs" mt={4}>
+          Personal Details
         </Heading>
-        <Box w={'100%'} display={'flex'} flexWrap={'wrap'} gap={5} p={2}>
-          {investForm.map((field, index) => (
+        <Box display={"flex"} gap={0}>
+          <Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
             <FormField
-              key={index}
-              label={field.label}
-              name={field.name}
-              type={field.type}
-              placeHolder={field.placeHolder}
-              helperText={field.helperText} 
-              options={field.options}
+              label="Investment Name"
+              name="investmentName"
               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="Investment address"
+              name="investmentAddress"
+              type="textarea"
+              control={control}
+              errors={errors}
+              isRequired={true}
+            />
+          </Box>
+        </Box>
+
+        <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="SWIFT/BIC Code"
+                name="swiftCode"
+                control={control}
+                errors={errors}
+                isRequired={true}
+              />
+              <FormField
+                label="Bank Email (optional)"
+                name="bankEmail"
+                control={control}
+                errors={errors}
+              />
+            </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>
+            size={"sm"}
+            width={"49.5%"}
+            rounded={"sm"}
+            type="submit"
+            colorScheme="green"
+          >
+            Submit
+          </Button>
         </Box>
       </form>
-
-      {/* <Divider /> */}
     </Box>
   );
 };
diff --git a/src/Pages/Master/InvestmentType/EditInvestmentType.jsx b/src/Pages/Master/InvestmentType/EditInvestmentType.jsx
index bc2f65d..447bd30 100644
--- a/src/Pages/Master/InvestmentType/EditInvestmentType.jsx
+++ b/src/Pages/Master/InvestmentType/EditInvestmentType.jsx
@@ -1,22 +1,160 @@
-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 EditInvestmentType = () => {
-  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 FormField from "../../../Components/FormField";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import AddInvestmentType from "./AddInvestmentType";
 
-export default EditInvestmentType
\ No newline at end of file
+const EditInvestmentType = () => {
+  const params = useParams();
+  const { investmentType } = useContext(GlobalStateContext);
+  const [foundObject, setFoundObject] = useState(null);
+
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(AddInvestmentType),
+    defaultValues: {
+      investmentName: foundObject?.investmentName,
+      mobileNo: foundObject?.mobileNo,
+      investmentAddress: foundObject?.investmentAddress,
+      bankName: foundObject?.bankName,
+      accountNumber: foundObject?.accountNumber,
+      swiftCode: foundObject?.swiftCode,
+      bankEmail: foundObject?.bankEmail,
+    },
+  });
+
+  useEffect(() => {
+    // console.log(investmentName);
+    const id = params?.id;
+    console.log(id);
+
+    // Ensure id is compared correctly
+    const found = investmentType.find((item) => item?.id.toString() === id.toString());
+    console.log(found);
+    setFoundObject(found);
+
+    if (found) {
+      reset({
+        investmentName: found.investmentName,
+        mobileNo: found.mobileNo,
+        investmentAddress: found.investmentAddress,
+        bankName: found.bankName,
+        accountNumber: found.accountNumber,
+        swiftCode: found.swiftCode,
+        bankEmail: found.bankEmail,
+      });
+    }
+  }, [params, investmentType, reset]);
+
+   const onSubmit = (data)=> {
+     console.log(data);
+  }
+
+  if (!foundObject) {
+    return <Box>Loading...</Box>; // or any loading indicator
+  }
+
+
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Box display={"flex"} gap={0}>
+          <Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
+            <FormField
+              label="Investment name"
+              name="investmentName"
+              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="Investment address"
+              name="investmentAddress"
+              type="textarea"
+              control={control}
+              errors={errors}
+              isRequired={true}
+            />
+          </Box>
+        </Box>
+
+        <Divider />
+
+        <Heading as="h6" size="xs" mt={4}>
+          Bank Details
+        </Heading>
+        <Box display={"flex"} gap={0}>
+          <Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
+            <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="SWIFT/BIC Code"
+              name="swiftCode"
+              control={control}
+              errors={errors}
+              isRequired={true}
+            />
+            <FormField
+              label="Bank Email (optional)"
+              name="bankEmail"
+              control={control}
+              errors={errors}
+            />
+          </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>
+  );
+};
+
+export default EditInvestmentType;
diff --git a/src/Pages/Master/InvestmentType/InvestmentType.jsx b/src/Pages/Master/InvestmentType/InvestmentType.jsx
index f61ccc5..8b9d961 100644
--- a/src/Pages/Master/InvestmentType/InvestmentType.jsx
+++ b/src/Pages/Master/InvestmentType/InvestmentType.jsx
@@ -14,25 +14,36 @@ import {
   Switch,
   Tag,
   Text,
+  Tooltip,
   useToast,
 } from "@chakra-ui/react";
 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 { AddIcon, EmailIcon } from "@chakra-ui/icons";
+import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
+import {
+  AddIcon,
+  CheckIcon,
+  CloseIcon,
+  DeleteIcon,
+  EditIcon,
+  EmailIcon,
+  ViewIcon,
+} from "@chakra-ui/icons";
 import Pagination from "../../../Components/Pagination";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import CustomAlertDialog from "../../../Components/CustomAlertDialog";
 import ToastBox from "../../../Components/ToastBox";
-import { debounce } from "../Sponser/AddSponser";
+import { debounce } from "./AddInvestmentType";
 
 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
 
 const InvestmentType = () => {
-  const toast = useToast()
-  const { investmentType, setInvestmentType,slideFromRight } = useContext(GlobalStateContext);
+  const navigate = useNavigate()
+  const toast = useToast();
+  const { investmentType, setInvestmentType, slideFromRight } =
+    useContext(GlobalStateContext);
   const [searchTerm, setSearchTerm] = useState("");
   const [isLoading, setIsLoading] = useState(true);
   const [deleteAlert, setDeleteAlert] = useState(false);
@@ -40,7 +51,6 @@ const InvestmentType = () => {
   const [mouseEntered, setMouseEntered] = useState(false);
   const [mouseEnteredId, setMouseEnteredId] = useState("");
 
-
   useEffect(() => {
     // Simulate loading
     const timer = setTimeout(() => {
@@ -53,28 +63,24 @@ const InvestmentType = () => {
 
   // ====================================================[Table Setup]================================================================
   const tableHeadRow = [
-    "investment name",
+    "Investment name",
     "Address",
     "Mobile no",
     "Status",
     "Created At",
+    "Action",
   ];
 
   const handleUpdateStatus = debounce((id) => {
-    
     setInvestmentType((prevInvestmentType) =>
       prevInvestmentType.map((investmentType) =>
         investmentType.id === id ? { ...investmentType, status: !investmentType.status } : investmentType
       )
     );
     toast({
-      render: () => (
-        <ToastBox
-          message={"Status changed succesfully.!"}
-        />
-      ),
+      render: () => <ToastBox message={"Status changed succesfully.!"} />,
     });
-  },300) ;
+  }, 300);
 
   // ====================================================[Table Filter]================================================================
   const filteredData = investmentType.filter((item) => {
@@ -97,63 +103,65 @@ const InvestmentType = () => {
 
   const extractedArray = filteredData?.map((item) => ({
     id: item?.id,
-    "investment name": (
-      <Text justifyContent={slideFromRight? 'right': 'left' }
+    "Investment name": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
         as={"span"}
-        color={"gray.600"}
+        color={"teal.900"}
+        fontWeight={"500"}
         className="d-flex align-items-center web-text-small"
       >
         {item.investmentName}
       </Text>
     ),
     Address: (
-      <Box w={350} isTruncated={true} >
-        <Text as={"span"} color={"teal.900"}>
-          {item.sponserAddress}
+      <Box w={350} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item.investmentAddress}
         </Text>
       </Box>
     ),
     "Mobile no": (
       <Box w={"auto"} isTruncated={true}>
-        <Text as={"span"} color={"teal.900"}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
           {item.mobileNo}
         </Text>
       </Box>
     ),
-    Status:
+    Status: (
       <Switch
         size={"sm"}
-        color="green"
+        colorScheme="green"
         onChange={() => handleUpdateStatus(item.id)}
         isChecked={item.status}
       />
+    ),
+
+    // item?.status ? (
+    //   <Badge bg={'transparent'} color={"#05c46b"}>
+    //     Passed
+    //   </Badge>
+    // ) : (
+    //   <Badge bg={'transparent'} color={"#f53b57"}>
+    //     Not passes
+    //   </Badge>
+    // ),
 
-      // item?.status ? (
-      //   <Badge bg={'transparent'} color={"#05c46b"}>
-      //     Passed
-      //   </Badge>
-      // ) : (
-      //   <Badge bg={'transparent'} color={"#f53b57"}>
-      //     Not passes
-      //   </Badge>
-      // ),
-      
-      ,
     "Created At": (
       <span className="d-flex justify-content-between align-items-center">
-        <Text as={"span"} color={"gray.600"} className=" fw-bold">
+        <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
           {formatDate(item.createdAt)}
         </Text>
-        <Menu>
+        {/* <Menu>
           <MenuButton className="link p-1 rounded-1">
             <HiDotsVertical className="rubix-text-dark fs-6" />
           </MenuButton>
           <Portal>
             <MenuList minWidth="80px">
-              <RouterLink to={`edit-investment/${item.id}`}>
+              <RouterLink to={`edit-sponser/${item.id}`}>
                 <MenuItem className="web-text-medium">Edit</MenuItem>
               </RouterLink>
-              <RouterLink to={`view-investment/${item.id}`}>
+              <RouterLink to={`view-sponser/${item.id}`}>
                 <MenuItem className="web-text-medium">View</MenuItem>
               </RouterLink>
               <MenuItem
@@ -167,25 +175,119 @@ const InvestmentType = () => {
               </MenuItem>
             </MenuList>
           </Portal>
-        </Menu>
+        </Menu> */}
       </span>
     ),
+    Action: (
+      <Box display={"flex"} justifyContent={"space-between"}>
+
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="View"
+          bg="#fff"
+          color={"green.500"}
+          placement="top"
+        >
+          <Button
+            _hover={{ color: "green.500" }}
+            // transition={"0.5s all"}
+          onClick={()=>{ navigate(`view-investment/${item.id}`)}}
+            color="green.300"
+            rounded={"sm"}
+            size={"xs"}
+          >
+            <ViewIcon />
+          </Button>
+        </Tooltip>
+
+
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Edit"
+          bg="#fff"
+          color={"blue.500"}
+          placement="top"
+        >
+          <Button
+          onClick={()=>{ navigate(`edit-investment/${item.id}`)}}
+            _hover={{ color: "blue.500" }}
+            // transition={"0.5s all"}
+            color="blue.400"
+            rounded={"sm"}
+            size={"xs"}
+          >
+            <EditIcon />
+          </Button>
+        </Tooltip>
+
+
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Delete"
+          bg="#fff"
+          color={"red.500"}
+          placement="top"
+        >
+          <Button
+            onClick={() => {
+              setActionId(item?.id);
+              setDeleteAlert(true);
+            }}
+            _hover={{ color: "red.500" }}
+            // transition={"0.5s all"}
+            color="red.300"
+            rounded={"sm"}
+            size={"xs"}
+          >
+            <DeleteIcon />
+          </Button>
+        </Tooltip>
+
+      </Box>
+    ),
+
+    // "Created At":
+    //   mouseEntered && mouseEnteredId === item?.id ? (
+    //     // false ? (
+    //     <Box w={38} as="span" display={"flex"} justifyContent={"start"} gap={3}>
+    //     <Box as="span" p={1} className="link" rounded={'sm'} >
+    //       <EditIcon fontSize={'md'} />
+    //     </Box>
+    //       <Box as="span" p={1} className="link" rounded={'sm'} >
+    //         <ViewIcon fontSize={'md'} />
+    //       </Box>
+    //       <Box as="span" p={1} className="link" rounded={'sm'} >
+    //         <DeleteIcon fontSize={'md'} />
+    //       </Box>
+    //     </Box>
+    //   ) : (
+    //     <Box
+    //       as="span" display={"flex"} justifyContent={"start"}
+    //       p={1}
+    //     >
+    //       <Text  as={"span"} color={"gray.600"} fontWeight={"500"}>
+    //         {formatDate(item.createdAt)}
+    //       </Text>
+    //     </Box>
+    //   ),
   }));
 
   const handleDelete = () => {
-    const updatedInvestmentType = investmentType.filter((investmentType) => investmentType.id !== actionId);
+    const updatedSponsors = sponser.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
 
     setTimeout(() => {
-      setInvestmentType(updatedInvestmentType);
+      setSponser(updatedSponsors);
       setDeleteAlert(false);
       setIsLoading(false);
     }, 100);
     setIsLoading(true);
   };
 
-  
-
-
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
       <Box bg="white.500">
@@ -235,18 +337,14 @@ const InvestmentType = () => {
         setViewActionId={setActionId}
         // totalPages={10}
 
-
-
-
-        
         setMouseEnteredId={setMouseEnteredId}
         setMouseEntered={setMouseEntered}
       />
 
       <CustomAlertDialog
-       onClose={()=> setDeleteAlert(false)}
+        onClose={() => setDeleteAlert(false)}
         isOpen={deleteAlert}
-        message={"Are you sure you want to delete Investment Type?"}
+        message={"Are you sure you want to delete sponers?"}
         alertHandler={handleDelete}
         isLoading={isLoading}
       />
diff --git a/src/Pages/Master/InvestmentType/ViewInvestmentType.jsx b/src/Pages/Master/InvestmentType/ViewInvestmentType.jsx
index 1c1b8fe..4eaf235 100644
--- a/src/Pages/Master/InvestmentType/ViewInvestmentType.jsx
+++ b/src/Pages/Master/InvestmentType/ViewInvestmentType.jsx
@@ -1,22 +1,55 @@
-import { Box, Image, Text } from "@chakra-ui/react"
+import { Box, FormControl, FormLabel, 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 { useParams } from "react-router-dom";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { useContext } from "react";
 // import robot from "../assets/robot.png"
 const ViewInvestmentType = () => {
-  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 { investmentType } = useContext(GlobalStateContext);
+  const id = params?.id;
 
-export default ViewInvestmentType
\ No newline at end of file
+  const found = investmentType.find(
+    (item) => item?.id.toString() === id.toString()
+  );
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
+      <Box display={"flex"} gap={0}>
+        <Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
+          <FormControl w={"49%"} mb={3}>
+            <FormLabel color={"gray.500"} fontSize={"sm"}>
+              Investment name
+            </FormLabel>
+            <FormLabel fontSize={"sm"}>{found?.investmentName}</FormLabel>
+          </FormControl>
+
+          <FormControl w={"49%"} mb={3}>
+            <FormLabel color={"gray.500"} fontSize={"sm"}>
+              Inves name ( Arabic )
+            </FormLabel>
+            <FormLabel fontSize={"sm"}>{found?.investmentName}</FormLabel>
+          </FormControl>
+
+          <FormControl w={"49%"} mb={3}>
+            <FormLabel color={"gray.500"} fontSize={"sm"}>
+              ADDRESS
+            </FormLabel>
+            <FormLabel fontSize={"sm"}>{found?.investmentAddress}</FormLabel>
+          </FormControl>
+
+          <FormControl w={"49%"} mb={3}>
+            <FormLabel color={"gray.500"} fontSize={"sm"}>
+              Moobile no
+            </FormLabel>
+            <FormLabel fontSize={"md"}>{found?.mobileNo}</FormLabel>
+          </FormControl>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default ViewInvestmentType;
diff --git a/src/Pages/Master/Sponser/AddSponser.jsx b/src/Pages/Master/Sponser/AddSponser.jsx
index 0ae4f37..05c4d4c 100644
--- a/src/Pages/Master/Sponser/AddSponser.jsx
+++ b/src/Pages/Master/Sponser/AddSponser.jsx
@@ -42,11 +42,9 @@ const schema = yup.object().shape({
   // accountHolderName: yup.string().required("Account Holder's Name is required"),
 });
 
-
-
 export function debounce(func, delay) {
   let debounceTimer;
-  return function(...args) {
+  return function (...args) {
     clearTimeout(debounceTimer);
     debounceTimer = setTimeout(() => func.apply(this, args), delay);
   };
@@ -85,21 +83,22 @@ const AddSponser = () => {
           Personal Details
         </Heading>
         <Box display={"flex"} gap={0}>
-        <Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
+          <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
+              placeHolder={"الرجاء إدخال القيمة"}
+              name="اسم الراعي"
+              control={control}
+              errors={errors}
+              isRequired={true}
+              arabic={true}
+            />
             <FormField
               label="Mobile no"
               name="mobileNo"
@@ -117,7 +116,6 @@ const AddSponser = () => {
               isRequired={true}
             />
           </Box>
-
         </Box>
 
         <Divider />
@@ -127,7 +125,13 @@ const AddSponser = () => {
         </Heading>
         <Box display={"flex"} gap={0}>
           {Array(1).fill(
-        <Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
+            <Box
+              width={"100%"}
+              p={5}
+              display={"flex"}
+              flexWrap={"wrap"}
+              gap={4}
+            >
               {/* <FormField
                 label="Account Holder's Name"
                 name="accountHolderName"
diff --git a/src/Pages/Master/Sponser/EditSponser.jsx b/src/Pages/Master/Sponser/EditSponser.jsx
index 1d44746..8b8b958 100644
--- a/src/Pages/Master/Sponser/EditSponser.jsx
+++ b/src/Pages/Master/Sponser/EditSponser.jsx
@@ -1,22 +1,154 @@
-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 FormField from "../../../Components/FormField";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import AddSponser from "./AddSponser";
 
-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,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(AddSponser),
+    defaultValues: {
+      sponserName: foundObject?.sponserName,
+      mobileNo: foundObject?.mobileNo,
+      sponserAddress: foundObject?.sponserAddress,
+      bankName: foundObject?.bankName,
+      accountNumber: foundObject?.accountNumber,
+      swiftCode: foundObject?.swiftCode,
+      bankEmail: foundObject?.bankEmail,
+    },
+  });
+
+  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);
+    setFoundObject(found);
+
+    if (found) {
+      reset({
+        sponserName: found.sponserName,
+        mobileNo: found.mobileNo,
+        sponserAddress: found.sponserAddress,
+        bankName: found.bankName,
+        accountNumber: found.accountNumber,
+        swiftCode: found.swiftCode,
+        bankEmail: found.bankEmail,
+      });
+    }
+  }, [params, sponser, reset]);
+
+  if (!foundObject) {
+    return <Box>Loading...</Box>; // or any loading indicator
+  }
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
+      <form>
+        <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>
+        </Box>
+
+        <Divider />
+
+        <Heading as="h6" size="xs" mt={4}>
+          Bank Details
+        </Heading>
+        <Box display={"flex"} gap={0}>
+          <Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
+            <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="SWIFT/BIC Code"
+              name="swiftCode"
+              control={control}
+              errors={errors}
+              isRequired={true}
+            />
+            <FormField
+              label="Bank Email (optional)"
+              name="bankEmail"
+              control={control}
+              errors={errors}
+            />
+          </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>
+  );
+};
+
+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..589b939 100644
--- a/src/Pages/Master/Sponser/ViewSponser.jsx
+++ b/src/Pages/Master/Sponser/ViewSponser.jsx
@@ -1,20 +1,45 @@
-import { Box, Image, Text } from "@chakra-ui/react"
+import { Box, FormControl, FormLabel, Image, Text } from "@chakra-ui/react"
 // import error from "../assets/Error.svg"
 import robot from "../../../assets/robot.png"
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import { useParams } from "react-router-dom";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { useContext } from "react";
 // import robot from "../assets/robot.png"
 const ViewSponser = () => {
+  const params = useParams();
+  const { sponser } = useContext(GlobalStateContext);
+  const id = params?.id;
+    
+  const found = sponser.find((item) => item?.id.toString() === id.toString());
+
+
   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 {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
+    <Box display={"flex"} gap={0}>
+      <Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
+
+        <FormControl w={'49%'} mb={3} >
+          <FormLabel color={'gray.500'} fontSize={"sm"}>Sponser name</FormLabel>
+          <FormLabel  fontSize={"sm"}>{found?.sponserName}</FormLabel>
+        </FormControl>
+        
+        <FormControl w={'49%'} mb={3} >
+          <FormLabel color={'gray.500'} fontSize={"sm"}>Sponser name ( Arabic )</FormLabel>
+          <FormLabel  fontSize={"sm"}>{found?.sponserName}</FormLabel>
+        </FormControl>
+
+        
+        <FormControl w={'49%'} mb={3} >
+          <FormLabel color={'gray.500'} fontSize={"sm"}>Moobile no</FormLabel>
+          <FormLabel  fontSize={"md"}>{found?.mobileNo}</FormLabel>
+        </FormControl>
+        
+        
+        </Box>
+        </Box>
+      
     </Box>
   )
 }
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index c64e57a..aeb6d68 100644
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -11,7 +11,7 @@ import CreateIO from "../Pages/IO_Management/CreateIO";
 import Create from "../Pages/IO_Management/CreateIO";
 import ViewIO from "../Pages/IO_Management/ViewIO";
 import View from "../Pages/IO_Management/ViewIO";
-import InvestorPendingRequest from "../Pages/InvestorUpgrade/InvestorPendingRequest";
+import InvestorPendingRequest from "../Pages/InvestorUpgrade/InvestorRequest";
 import UpgradeHistory from "../Pages/InvestorUpgrade/UpgradeHistory";
 import upgradeHistory from "../Pages/InvestorUpgrade/UpgradeHistory";
 import InvestorDetails from "../Pages/Investor_Management/InvestorDetails";
diff --git a/src/Theme/Theme.js b/src/Theme/Theme.js
index 5363356..05c8f71 100644
--- a/src/Theme/Theme.js
+++ b/src/Theme/Theme.js
@@ -4,42 +4,41 @@ import { extendTheme } from "@chakra-ui/react";
 const customTheme = extendTheme({
   colors: {
     customPink: {
-      50: '#ffe5e9',
-      100: '#ffbcc9',
-      200: '#ff93a8',
-      300: '#ff6a87',
-      400: '#ff4166',
-      500: '#ff1845', // you can choose your custom color values here
-      600: '#db1139',
-      700: '#b70d2d',
-      800: '#930921',
-      900: '#700616',
+      50: "#ffe5e9",
+      100: "#ffbcc9",
+      200: "#ff93a8",
+      300: "#ff6a87",
+      400: "#ff4166",
+      500: "#ff1845", // you can choose your custom color values here
+      600: "#db1139",
+      700: "#b70d2d",
+      800: "#930921",
+      900: "#700616",
     },
     forestGreen: {
-        50: '#ffe6e9',
-        100: '#f8c2c7',
-        200: '#ef9da4',
-        300: '#e67882',
-        400: '#dd5460',
-        500: '#DE858E', // primary shade for your custom color
-        600: '#DE858E',
-        700: '#DE858E',
-        800: '#DE858E',
-        900: '#DE858E',
-      },
-      forestGreen: {
-    "50": "#e6f3e9",
-    "100": "#c2e1c7",
-    "200": "#9dcda4",
-    "300": "#78b982",
-    "400": "#54a560",
-    "500": "#004118", // primary shade for your custom color
-    "600": "#003b14",
-    "700": "#003310",
-    "800": "#002b0c",
-    "900": "#002308"
-  }
-  
+      50: "#ffe6e9",
+      100: "#f8c2c7",
+      200: "#ef9da4",
+      300: "#e67882",
+      400: "#dd5460",
+      500: "#DE858E", // primary shade for your custom color
+      600: "#DE858E",
+      700: "#DE858E",
+      800: "#DE858E",
+      900: "#DE858E",
+    },
+    forestGreen: {
+      50: "#e6f3e9",
+      100: "#c2e1c7",
+      200: "#9dcda4",
+      300: "#78b982",
+      400: "#54a560",
+      500: "#004118", // primary shade for your custom color
+      600: "#003b14",
+      700: "#003310",
+      800: "#002b0c",
+      900: "#002308",
+    },
   },
   components: {
     // Switch: {