From 0b66d93d0f222ec4b13b50d92c698e61bceacd20 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Fri, 5 Jul 2024 12:07:52 +0530
Subject: [PATCH] createIOTabs

---
 src/Components/FormField.jsx                  | 245 ++++----
 src/Components/FormInputMain.jsx              |   4 +-
 src/Components/FormInputView.jsx              |   6 +-
 src/Contexts/GlobalStateProvider.jsx          |  50 +-
 src/Pages/IO_Management/CreateIO.jsx          | 547 +++++++++++++-----
 .../IO_Management/InvestmentDocuments.jsx     | 122 ++++
 .../Master/ExchangeRate/ExchangeRate.jsx      |   2 +-
 src/Pages/Master/Sponser/EditSponser.jsx      | 123 ++--
 src/Pages/Master/Sponser/Sponsers.jsx         |   7 +-
 src/Pages/Master/Sponser/ViewSponser.jsx      |  84 ++-
 10 files changed, 857 insertions(+), 333 deletions(-)
 create mode 100644 src/Pages/IO_Management/InvestmentDocuments.jsx

diff --git a/src/Components/FormField.jsx b/src/Components/FormField.jsx
index c540af8..0e3d8f9 100644
--- a/src/Components/FormField.jsx
+++ b/src/Components/FormField.jsx
@@ -38,16 +38,21 @@ const FormField = ({
   selectedImageData,
   setSelectedImageData,
   removeImage,
-  imageData ,
+  imageData,
+  width,
   ...props
 }) => (
   <FormControl
-    w={"49%"}
+    w={width ? width : "49%"}
     isInvalid={errors[name]}
     isRequired={isRequired}
     className="mb-3"
   >
-    <FormLabel textAlign={arabic ? "right" : "left"} fontSize={"sm"} fontWeight={'400'}>
+    <FormLabel
+      textAlign={arabic ? "right" : "left"}
+      fontSize={"sm"}
+      fontWeight={"400"}
+    >
       {label}
     </FormLabel>
     <Controller
@@ -66,8 +71,8 @@ const FormField = ({
               cursor={"pointer"}
               placeholder={placeHolder ? placeHolder : label}
               textAlign={arabic ? "right" : "left"}
-              _placeholder={{fontSize:'xs'}}
-              borderRadius={'4px'}
+              _placeholder={{ fontSize: "xs" }}
+              borderRadius={"4px"}
             >
               {options.map((option, index) => (
                 <option key={index} value={option.value}>
@@ -85,9 +90,9 @@ const FormField = ({
               {...props}
               placeholder={placeHolder ? placeHolder : label}
               textAlign={arabic ? "right" : "left"}
-              _placeholder={{fontSize:'xs'}}
-              borderRadius={'4px'}
-              resize={'none'}
+              _placeholder={{ fontSize: "xs" }}
+              borderRadius={"4px"}
+              resize={"none"}
             />
           );
         } else if (type === "checkbox") {
@@ -201,7 +206,7 @@ const FormField = ({
           return (
             <>
               <Input
-              id={id}
+                id={id}
                 {...field}
                 {...props}
                 multiple={multiple} // Support for multiple file uploads
@@ -225,110 +230,122 @@ const FormField = ({
                   </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={"sm"}
-                            fontWeight={"500"}
-                            mt={1}
-                            isTruncated={true}
-                          >
-                            {imageData[index]?.name}
-                          </Text>
-                          <Text as={"span"} fontSize={"sm"} 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}
+              {selectedImageData &&
+                (multiple ? (
+                  selectedImageData?.length > 0 && (
+                    <Box
+                      mt={4}
+                      width={"100%"}
+                      display="flex"
+                      flexWrap="wrap"
+                      gap={4}
                     >
-                      {imageData?.name}
-                    </Text>
-                    <Text as={"span"} fontSize={"xs"} fontStyle={"italic"}>
-                      {(imageData?.size / (1024 * 1024)).toFixed(2)} mb
-                    </Text>
+                      {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={"sm"}
+                              fontWeight={"500"}
+                              mt={1}
+                              isTruncated={true}
+                            >
+                              {imageData[index]?.name}
+                            </Text>
+                            <Text
+                              as={"span"}
+                              fontSize={"sm"}
+                              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>
-                </Box>
-              )}
+                ))}
             </>
           );
         } else {
@@ -336,14 +353,14 @@ const FormField = ({
             <Input
               focusBorderColor="forestGreen.300"
               size={"sm"}
-              fontSize={'sm'}
+              fontSize={"sm"}
               type={type}
               {...field}
               {...props}
               placeholder={placeHolder ? placeHolder : label}
-              borderRadius={'4px'}
+              borderRadius={"4px"}
               textAlign={arabic ? "right" : "left"}
-              _placeholder={{fontSize:'xs'}}
+              _placeholder={{ fontSize: "xs" }}
             />
           );
         }
diff --git a/src/Components/FormInputMain.jsx b/src/Components/FormInputMain.jsx
index 450ad77..5785033 100644
--- a/src/Components/FormInputMain.jsx
+++ b/src/Components/FormInputMain.jsx
@@ -14,7 +14,7 @@ const FormInputMain = ({
   return (
     <form onSubmit={onSubmit}>
       {Object.entries(groupedFields).map(([section, fields], index) => (
-        <Box key={section} mt={4}>
+        <Box key={section} mt={4} >
           <Heading as="h6" size="xs" mx={5} fontWeight={'500'}>
             {/* <ArrowBackIcon fontSize={'lg'} />  */}
             {section}
@@ -45,6 +45,7 @@ const FormInputMain = ({
                     options,
                     helperText,
                     multiple,
+                    width
                   },
                   key
                 ) => (
@@ -67,6 +68,7 @@ const FormInputMain = ({
                     imageData={imageData}
                     handleImageChange={handleImageChange}
                     removeImage={removeImage}
+                    width={width}
                   />
                 )
               )}
diff --git a/src/Components/FormInputView.jsx b/src/Components/FormInputView.jsx
index f088385..2652198 100644
--- a/src/Components/FormInputView.jsx
+++ b/src/Components/FormInputView.jsx
@@ -1,13 +1,13 @@
 import { Box, Button, Divider, FormLabel, Heading } from "@chakra-ui/react";
 import React from "react";
 
-const FormInputView = ({ groupedFields, name, errors, onSubmit, children }) => {
+const FormInputView = ({ groupedFields, name,groupedFieldsTwo, errors, onSubmit, children }) => {
  
   console.log(groupedFields);
 
   return (
     <form>
-      {Object.entries(groupedFields).map(([section, fields], index) => (
+      {Object?.entries(groupedFields,groupedFieldsTwo).map(([section, fields], index) => (
         <Box key={section}>
           <Heading as="h6" size="xs" mt={index === 0 ? 3 : 4}>
             {section}
@@ -30,7 +30,7 @@ const FormInputView = ({ groupedFields, name, errors, onSubmit, children }) => {
               ))}
             </Box>
           </Box>
-          {index < Object.entries(groupedFields).length - 1 && <Divider />}
+          {index < Object.entries(groupedFields,groupedFieldsTwo).length - 1 && <Divider />}
         </Box>
       ))}
       {children}
diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index 9e3038a..79c4a11 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -21,6 +21,7 @@ const GlobalStateProvider = ({ children }) => {
   const [slideFromRight, setSlideFormRight] = useState(false);
 
   const { colorMode, toggleColorMode } = useColorMode();
+
   const [sponser, setSponser] = useState([
     {
       id: 1,
@@ -275,6 +276,51 @@ const GlobalStateProvider = ({ children }) => {
       createdAt: "6",
     },
   ]);
+
+  const [create, setCreate] = useState([
+    {
+      id: 1,
+      sponserName: "John Doe",
+      sponserNameArabic:"الرجاء إدخال القيمة",
+      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",
+      status: true,
+      createdAt: "45",
+    },
+    {
+      id: 2,
+      sponserName: "Jane Smith",
+      sponserNameArabic:"الرجاء إدخال القيمة",
+      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",
+      status: false,
+      createdAt: "45",
+    },
+  ]);
   
   const [investmentType, setInvestmentType] = useState([
     // {
@@ -1249,7 +1295,9 @@ const GlobalStateProvider = ({ children }) => {
         deleteHistory,
         setDeleteHistory,
         deleteRequest,
-        setDeleteRequest
+        setDeleteRequest,
+        create,
+        setCreate,
       }}
     >
       {children}
diff --git a/src/Pages/IO_Management/CreateIO.jsx b/src/Pages/IO_Management/CreateIO.jsx
index 059fde5..5cad274 100644
--- a/src/Pages/IO_Management/CreateIO.jsx
+++ b/src/Pages/IO_Management/CreateIO.jsx
@@ -12,11 +12,26 @@ import {
   Button,
   Text,
   Image,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanel,
+  TabPanels,
+  Tooltip,
+  Switch,
+  useDisclosure,
 } 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 {
+  AddIcon,
+  CloseIcon,
+  DeleteIcon,
+  EditIcon,
+  ViewIcon,
+  WarningTwoIcon,
+} from "@chakra-ui/icons";
 import { TiWarning } from "react-icons/ti";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import { useNavigate } from "react-router-dom";
@@ -24,6 +39,11 @@ import FormField from "../../Components/FormField";
 import { v4 as uuidv4 } from "uuid";
 import AddIOCharges from "./AddIOCharges";
 import FormInputMain from "../../Components/FormInputMain";
+import DataTable from "../../Components/DataTable/DataTable";
+import { debounce } from "../Master/Sponser/AddSponser";
+import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import { formatDate } from "../../Components/Functions/UTCConvertor";
+import InvestmentDocuments from "./InvestmentDocuments";
 
 const schema = yup.object().shape({
   ioName: yup.string().required("Arabic name is required"),
@@ -37,7 +57,6 @@ const schema = yup.object().shape({
     .string()
     .required("Investment Object name is required"),
   holdingPeriod: yup.string().required("Sponser name is required"),
-  holdingPeriodArabic: yup.string().required("Arabic name is required"),
   ioStartus: yup.string().required("Investment Object name is required"),
   ioStartusArabic: yup.string().required("Sponser name is required"),
   goalAmount: yup.string().required("Arabic name is required"),
@@ -75,11 +94,11 @@ const schema = yup.object().shape({
     .number()
     .required("Annual Yield is required")
     .positive("Must be a positive number"),
-    iconUpload: yup.mixed().required("Profile image is required"),
-    bannerImages: yup.mixed().required("Profile image is required"),
-    otherImage: yup.mixed().required("Profile image is required"),
-    docAttach: yup.mixed().required("Profile image is required"),
-    videos: yup.mixed().required("Profile image is required"),
+  iconUpload: yup.mixed().required("Profile image is required"),
+  bannerImages: yup.mixed().required("Profile image is required"),
+  otherImage: yup.mixed().required("Profile image is required"),
+  docAttach: yup.mixed().required("Profile image is required"),
+  videos: yup.mixed().required("Profile image is required"),
 });
 
 const startYear = 2024;
@@ -91,7 +110,7 @@ const years = Array.from(
 
 const CreateIO = () => {
   const navigate = useNavigate();
-  const { sponser, setSponser, investment, setInvestment } =
+  const { create, setCreate, sponser, setSponser, investment, setInvestment } =
     useContext(GlobalStateContext);
   const [bannerImageData, setBannerImageData] = useState(null);
   const [otherImageData, setOtherImageData] = useState(null);
@@ -101,6 +120,13 @@ const CreateIO = () => {
   const [totalCharge, setTotalCharge] = useState(0.0);
   const [totalAmount, setTotalAmount] = useState(0.0);
 
+  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("");
+
   const {
     control,
     handleSubmit,
@@ -114,6 +140,95 @@ const CreateIO = () => {
 
   console.log(errors);
 
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  const tableHeadRow = [
+    "Sponser name",
+    "Address",
+    "Mobile no",
+    "Created At",
+    "Action",
+  ];
+
+  const handleUpdateStatus = debounce((id) => {
+    setCreate((prevCreate) =>
+      prevCreate.map((create) =>
+        create.id === id ? { ...create, status: !create.status } : create
+      )
+    );
+    toast({
+      render: () => <ToastBox message={"Status changed succesfully.!"} />,
+    });
+  }, 300);
+
+  const filteredData = create?.filter((item) => {
+    // Filter by name (case insensitive)
+    const name = item.sponserName;
+    const searchLower = searchTerm.toLowerCase();
+    const nameMatches = name.toLowerCase().includes(searchLower);
+
+    return nameMatches;
+  });
+
+  const handleDelete = () => {
+    const updatedCreate = create.filter((create) => create.id !== actionId);
+
+    setTimeout(() => {
+      setSponser(updatedCreate);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  const extractedArray = filteredData?.map((item) => ({
+    id: item?.id,
+    "Sponser name": (
+      <Text
+        justifyContent={"left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        "{item.sponserName}"
+      </Text>
+    ),
+    Address: (
+      <Box w={350} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          " {item.sponserAddress}"
+        </Text>
+      </Box>
+    ),
+    "Mobile no": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          "{item.mobileNo}"
+        </Text>
+      </Box>
+    ),
+
+    "Created At": (
+      <span className="d-flex justify-content-between align-items-center">
+        <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+          {formatDate(item.createdAt)}
+        </Text>
+      </span>
+    ),
+    Action: <Box display={"flex"} justifyContent={"space-between"}></Box>,
+  }));
+
+  console.log(extractedArray);
+
   const destributedAmount = Number(watch().destributedAmount) || 0;
 
   useEffect(() => {
@@ -148,7 +263,7 @@ const CreateIO = () => {
   };
 
   // Extract options for the select input
-  const sponserOptions = sponser.map((item) => ({
+  const createOptions = create.map((item) => ({
     value: item.sponserName,
     label: item.sponserName,
   }));
@@ -165,6 +280,9 @@ const CreateIO = () => {
     }
   };
 
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const firstField = React.useRef();
+
   // Handler for file input
   const handleOtherImageChange = (e) => {
     const files = Array.from(e.target.files);
@@ -212,7 +330,8 @@ const CreateIO = () => {
       name: "ioName",
       type: "text",
       isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "49%",
     },
     {
       label: "IO Name (Arabic)",
@@ -220,31 +339,35 @@ const CreateIO = () => {
       name: "ioNameArabic",
       type: "text",
       isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "49%",
     },
     {
       label: "Description (English)",
       placeHolder: " ",
       name: "discription",
-      type: "text",
+      type: "textarea",
       isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "49%",
     },
     {
       label: "Description (Arabic)",
       placeHolder: " ",
       name: "discriptionArabic",
-      type: "text",
+      type: "textarea",
       isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "49%",
     },
     {
-      label: "Investment Type Name (English)",
+      label: "Investment Type (English)",
       placeHolder: " ",
       name: "typeName",
       type: "select",
       isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "49%",
       options: [
         {
           label: "option 1",
@@ -265,12 +388,13 @@ const CreateIO = () => {
       ],
     },
     {
-      label: "Investment Type Name (Arabic)",
+      label: "Investment Type (Arabic)",
       placeHolder: " ",
       name: "typeNameArabic",
       type: "select",
       isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "49%",
       options: [
         {
           label: "option 1",
@@ -296,99 +420,17 @@ const CreateIO = () => {
       name: "sponserName",
       type: "text",
       isRequired: true,
-      section: "create IO",
-    },
-    {
-      label: "Sponser Name (Arabic)",
-      placeHolder: " ",
-      name: "sponserNameArabic",
-      type: "text",
-      isRequired: true,
-      section: "create IO",
-    },
-    {
-      label: "Holding Period (English)",
-      placeHolder: " ",
-      name: "holdingPeriod",
-      type: "text",
-      isRequired: true,
-      section: "create IO",
-    },
-    {
-      label: "Holding Period (English)",
-      placeHolder: " ",
-      name: "holdingPeriodArabic",
-      type: "text",
-      isRequired: true,
-      section: "create IO",
-    },
-    {
-      label: "IO Status (English)",
-      placeHolder: " ",
-      name: "ioStartus",
-      type: "select",
-      isRequired: true,
-      section: "create IO",
-      options: [
-        {
-          label: "option 1",
-          value: "option 1",
-        },
-        {
-          label: "option 2",
-          value: "option 2",
-        },
-        {
-          label: "option 3",
-          value: "option 3",
-        },
-        {
-          label: "option 4",
-          value: "option 4",
-        },
-      ],
-    },
-    {
-      label: "IO Status (Arabic)",
-      placeHolder: " ",
-      name: "ioStartusArabic",
-      type: "select",
-      isRequired: true,
-      section: "create IO",
-      options: [
-        {
-          label: "option 1",
-          value: "option 1",
-        },
-        {
-          label: "option 2",
-          value: "option 2",
-        },
-        {
-          label: "option 3",
-          value: "option 3",
-        },
-        {
-          label: "option 4",
-          value: "option 4",
-        },
-      ],
+      section: " ",
+      width: "49%",
     },
     {
       label: "Goal Amount (English)",
       placeHolder: " ",
       name: "goalAmount",
-      type: "number",
+      type: "Number",
       isRequired: true,
-      section: "create IO",
-    },
-    {
-      label: "Closing Date (English)",
-      placeHolder: " ",
-      name: "closingDate",
-      type: "date",
-      isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "49%",
     },
     {
       label: "Minimum Investment Amount (English)",
@@ -396,7 +438,8 @@ const CreateIO = () => {
       name: "minInvestment",
       type: "number",
       isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "32.3%",
     },
     {
       label: "Maximum Investment Amount (English)",
@@ -404,7 +447,17 @@ const CreateIO = () => {
       name: "maxInvestment",
       type: "number",
       isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Holding Period (English)",
+      placeHolder: " ",
+      name: "holdingPeriod",
+      type: "number",
+      isRequired: true,
+      section: " ",
+      width: "32.3%",
     },
     {
       label: "Expected Return Estimated (English)",
@@ -412,24 +465,38 @@ const CreateIO = () => {
       name: "expectedReturn",
       type: "number",
       isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "32.3%",
     },
     {
-      label: "Original Valuation (English)",
+      label: "Closing Date (English)",
       placeHolder: " ",
-      name: "originalValue",
-      type: "number",
+      name: "closingDate",
+      type: "date",
       isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "32.3%",
     },
+    {
+      label: "IO Status (English)",
+      placeHolder: " ",
+      name: "minInvestment",
+      type: "text",
+      isRequired: true,
+      section: " ",
+      width: "32.3%",
+    },
+  ];
 
+  const keyMerits = [
     {
       label: "Name (English)",
       placeHolder: " ",
       name: "keyname",
       type: "text",
       isRequired: true,
-      section: "Key Merits",
+      section: " ",
+      width: "32.3%",
     },
     {
       label: "Name (Arabic)",
@@ -437,23 +504,8 @@ const CreateIO = () => {
       name: "keyNameArabic",
       type: "text",
       isRequired: true,
-      section: "Key Merits",
-    },
-    {
-      label: "Description (English)",
-      placeHolder: " ",
-      name: "keyDescription",
-      type: "textarea",
-      isRequired: true,
-      section: "Key Merits",
-    },
-    {
-      label: "Description (Arabic)",
-      placeHolder: " ",
-      name: "keyDescriptionArabic",
-      type: "textarea",
-      isRequired: true,
-      section: "Key Merits",
+      section: " ",
+      width: "32.3%",
     },
     {
       label: "Icon",
@@ -461,34 +513,60 @@ const CreateIO = () => {
       name: "iconUpload",
       type: "fileNormal",
       isRequired: true,
-      section: "Key Merits",
+      section: " ",
+      width: "32.3%",
     },
+    {
+      label: "Description (English)",
+      placeHolder: " ",
+      name: "keyDescription",
+      type: "textarea",
+      isRequired: true,
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Description (Arabic)",
+      placeHolder: " ",
+      name: "keyDescriptionArabic",
+      type: "textarea",
+      isRequired: true,
+      section: " ",
+      width: "32.3%",
+    },
+  ];
 
+  const images = [
     {
       label: "Banner Images ",
       placeHolder: " ",
       name: "bannerImages",
       type: "fileNormal",
       isRequired: true,
-      section: "Images",
+      section: " ",
+      width: "32.3%",
     },
 
     {
-        label: "Other Images",
-        placeHolder: " ",
-        name: "otherImage",
-        type: "fileNormal",
-        isRequired: true,
-        section: "Images",
-      },
-  
+      label: "Other Images",
+      placeHolder: " ",
+      name: "otherImage",
+      type: "fileNormal",
+      isRequired: true,
+      section: " ",
+      width: "32.3%",
+    },
+  ];
+
+  const documents = [
     {
       label: "Type",
       placeHolder: " ",
       name: "docType",
       type: "text",
       isRequired: true,
-      section: "Documents",
+      section: " ",
+      width: "32.3%",
     },
     {
       label: "Attachment",
@@ -496,15 +574,20 @@ const CreateIO = () => {
       name: "type",
       type: "docAttach",
       isRequired: true,
-      section: "Documents",
+      section: " ",
+      width: "32.3%",
     },
+  ];
+
+  const Videos = [
     {
       label: "Videos",
       placeHolder: " ",
       name: "videos",
       type: "fileNormal",
       isRequired: true,
-      section: "Videos",
+      section: " ",
+      width: "32.3%",
     },
   ];
 
@@ -517,14 +600,178 @@ const CreateIO = () => {
     return groups;
   }, {});
 
+  const groupedFieldsTwo = keyMerits.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
+  const groupedFieldsThree = images.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
+  const groupedFieldsFour = documents.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
+  const groupedFieldsFive = Videos.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}>
-      <FormInputMain
-        groupedFields={groupedFields}
-        control={control}
-        errors={errors}
-        onSubmit={handleSubmit(onSubmit)}
-      ></FormInputMain>
+      <Tabs mt={4}>
+        <TabList>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            IO Details
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            Investment Documents
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            Key Merits
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            IO artifacts
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            Investors
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            IO Cash detail
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            IO NAV detail
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            Distribution
+          </Tab>
+        </TabList>
+
+        <TabPanels>
+          <TabPanel>
+            <FormInputMain
+              width={"23.8%"}
+              groupedFields={groupedFields}
+              control={control}
+              errors={errors}
+            ></FormInputMain>
+          </TabPanel>
+          <TabPanel>
+            <Box display={'flex'} justifyContent={'space-between'} mb={4}>
+              <Input
+                type="search"
+                width={300}
+                placeholder="Search..."
+                size="sm"
+                rounded="sm"
+                focusBorderColor="green.500"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+              <Button leftIcon={<AddIcon />} onClick={onOpen}
+                size={"sm"}
+                // width={"44.5%"}
+                fontSize={'xs'}
+                rounded={"sm"}
+                colorScheme='green'
+              >
+                 Add
+              </Button>
+              <InvestmentDocuments isOpen={isOpen} onClose={onClose} firstField={firstField} />
+            </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}
+            />
+          </TabPanel>
+          <TabPanel>
+            <FormInputMain
+              width={"23.8%"}
+              groupedFields={groupedFieldsThree}
+              control={control}
+              errors={errors}
+              onSubmit={handleSubmit(onSubmit)}
+            ></FormInputMain>
+          </TabPanel>
+          <TabPanel>
+            <FormInputMain
+              width={"23.8%"}
+              groupedFields={groupedFieldsFour}
+              control={control}
+              errors={errors}
+              onSubmit={handleSubmit(onSubmit)}
+            ></FormInputMain>
+          </TabPanel>
+          <TabPanel>
+            <FormInputMain
+              width={"23.8%"}
+              groupedFields={groupedFieldsFive}
+              control={control}
+              errors={errors}
+              onSubmit={handleSubmit(onSubmit)}
+            ></FormInputMain>
+          </TabPanel>
+          <TabPanel></TabPanel>
+        </TabPanels>
+      </Tabs>
     </Box>
   );
 };
diff --git a/src/Pages/IO_Management/InvestmentDocuments.jsx b/src/Pages/IO_Management/InvestmentDocuments.jsx
new file mode 100644
index 0000000..74e6de5
--- /dev/null
+++ b/src/Pages/IO_Management/InvestmentDocuments.jsx
@@ -0,0 +1,122 @@
+import {
+  Box,
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  FormControl,
+  FormLabel,
+  Input,
+  InputGroup,
+  Stack,
+} from "@chakra-ui/react";
+import * as yup from "yup";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import FormInputMain from "../../Components/FormInputMain";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+
+export const investmentDoct = yup.object().shape({
+  type: yup.string().required("Sponser name is required"),
+  document: yup.string().required("Sponser name is required"),
+  fileName: yup.string().required("Mobile no is required"),
+});
+
+const InvestmentDocuments = ({ id, isOpen, onClose, firstField }) => {
+
+  const {
+    control,
+
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(investmentDoct),
+  });
+
+  const formFields = [
+    {
+      label: "Type",
+      placeHolder: " ",
+      name: "type",
+      type: "text",
+      isRequired: true,
+      section: "Add Details",
+      width: "100%",
+    },
+    {
+      label: "File Name",
+      name: "fileName",
+      placeHolder: " ",
+      type: "text",
+      isRequired: true,
+      section: "Add Details",
+      width: "100%",
+    },
+    {
+      label: "Document",
+      name: "document",
+      placeHolder: " ",
+      type: "fileNormal",
+      isRequired: true,
+      section: "Add Details",
+      width: "100%",
+    },
+  ];
+
+  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);
+    setSponser([
+      {
+        ...data,
+        status: true,
+        id: uuidv4(),
+        createdAt: new Date().toISOString(),
+      },
+      ...investmentDoct,
+    ]);
+  };
+
+  return (
+    <>
+      <Drawer 
+        isOpen={isOpen}
+        placement="right"
+        initialFocusRef={firstField}
+        onClose={onClose}
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerCloseButton />
+          <DrawerHeader fontSize={"sm"}>Investment Documents</DrawerHeader>
+
+          <DrawerBody padding={0}>
+            <Stack>
+              <FormInputMain
+                width={"100%"}
+                groupedFields={groupedFields}
+                control={control}
+                errors={errors}
+                onSubmit={handleSubmit(onSubmit)}
+              />
+            </Stack>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+};
+
+export default InvestmentDocuments;
diff --git a/src/Pages/Master/ExchangeRate/ExchangeRate.jsx b/src/Pages/Master/ExchangeRate/ExchangeRate.jsx
index f117014..d1d1315 100644
--- a/src/Pages/Master/ExchangeRate/ExchangeRate.jsx
+++ b/src/Pages/Master/ExchangeRate/ExchangeRate.jsx
@@ -139,7 +139,7 @@ const ExchangeRate = () => {
     Rate: (
       <Text
         justifyContent={slideFromRight ? "right" : "left"}
-        as={"span"}
+        as={"span"} 
         color={"gray.600"}
         fontWeight={"600"}
         className="d-flex align-items-center  web-text-small"
diff --git a/src/Pages/Master/Sponser/EditSponser.jsx b/src/Pages/Master/Sponser/EditSponser.jsx
index 622638e..71287d5 100644
--- a/src/Pages/Master/Sponser/EditSponser.jsx
+++ b/src/Pages/Master/Sponser/EditSponser.jsx
@@ -54,73 +54,122 @@ const EditSponser = () => {
     return <Box>Loading...</Box>; // or any loading indicator
   }
 
+
   const formFields = [
     {
-      label: "Sponser name",
+      label: "Sponser name (English)",
+      placeHolder:" ",
       name: "sponserName",
       type: "text",
       isRequired: true,
-      section: "Personal Details",
+      section: "Add Details",
     },
     {
       label: "Sponser Name (Arabic)",
       name: "sponserNameArabic",
+      placeHolder:" ",
       type: "text",
       isRequired: true,
       arabic: true,
-      section: "Personal Details",
+      section: "Add Details",
     },
     {
-      label: "Mobile no",
+      label: "Description (English)",
+      name: "description",
+      placeHolder:" ",
+      type: "textarea",
+      isRequired: true,
+      section: "Add Details",
+    },
+    {
+      label: "Description (Arabic)",
+      name: "descriptionArabic",
+      placeHolder:" ",
+      type: "textarea",
+      isRequired: true,
+      arabic: true,
+      section: "Add Details",
+    },
+    {
+      label: "Address (English)",
+      name: "sponserAddress", 
+      placeHolder:" ",
+      type: "text",
+      isRequired: true,
+      section: "Add Details",
+    },
+    {
+      label: "Address (Arabic)",
+      name: "sponserAddressArabic",
+      placeHolder:" ",
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Add Details",
+    },
+    {
+      label: "Bank Name (English)",
+      name: "bankName",
+      placeHolder:" ",
+      type: "text",
+      isRequired: true,
+      section: "Add Details",
+    },
+    {
+      label: "Bank Name (Arabic)",
+      name: "bankNameArabic",
+      placeHolder:" ",
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Add Details",
+    },
+    {
+      label: "Account Name (English)",
+      name: "accountHolderName",
+      placeHolder:" ",
+      type: "text",
+      isRequired: true,
+      section: "Add Details",
+    },
+    {
+      label: "Account Name (Arabic)",
+      name: "accountHolderNameArabic",
+      placeHolder:" ",
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Add Details",
+    },
+    {
+      label: "Mobile Number (English)",
       name: "mobileNo",
+      placeHolder:" ",
       type: "number",
       isRequired: true,
-      section: "Personal Details",
+      section: "Add 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",
+      label: "Account Number (English)",
       name: "accountNumber",
+      placeHolder:" ",
       type: "text",
       isRequired: true,
-      section: "Bank Details",
+      section: "Add Details",
     },
     {
-      label: "SWIFT/BIC Code",
+      label: "IFSC Code (English)",
+      placeHolder:" ",
       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",
+      section: "Add Details",
     },
   ];
 
+
+ 
+
   const groupedFields = formFields.reduce((groups, field) => {
     const { section } = field;
     if (!groups[section]) {
diff --git a/src/Pages/Master/Sponser/Sponsers.jsx b/src/Pages/Master/Sponser/Sponsers.jsx
index 70b86d6..b1eaa13 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, useNavigate } from "react-router-dom";
+import { Link, Link as RouterLink } from "react-router-dom";
 import {
   AddIcon,
   CheckIcon,
@@ -40,7 +40,6 @@ 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);
@@ -192,7 +191,6 @@ const Sponser = () => {
           <Button
             _hover={{ color: "green.500" }}
             // transition={"0.5s all"}
-          onClick={()=>{ navigate(`view-sponser/${item?.id}`)}}
             color="green.300"
             rounded={"sm"}
             size={"xs"}
@@ -211,7 +209,6 @@ const Sponser = () => {
           placement="top"
         >
           <Button
-          onClick={()=>{ navigate(`edit-sponser/${item?.id}`)}}
             _hover={{ color: "blue.500" }}
             // transition={"0.5s all"}
             color="blue.400"
@@ -335,6 +332,8 @@ const Sponser = () => {
         isLoading={isLoading}
         viewActionId={actionId}
         setViewActionId={setActionId}
+        // totalPages={10}
+
         setMouseEnteredId={setMouseEnteredId}
         setMouseEntered={setMouseEntered}
       />
diff --git a/src/Pages/Master/Sponser/ViewSponser.jsx b/src/Pages/Master/Sponser/ViewSponser.jsx
index 1a0882a..51c2de7 100644
--- a/src/Pages/Master/Sponser/ViewSponser.jsx
+++ b/src/Pages/Master/Sponser/ViewSponser.jsx
@@ -22,11 +22,11 @@ const ViewSponser = () => {
 
   const formFields = [
     {
-      label: "Sponser name",
+      label: "Sponser name (English)",
       value: foundObject.sponserName,
       type: "text",
       isRequired: true,
-      section: "Personal Details",
+      section: "Add Details",
     },
     {
       label: "Sponser Name (Arabic)",
@@ -34,52 +34,92 @@ const ViewSponser = () => {
       type: "text",
       isRequired: true,
       arabic: true,
-      section: "Personal Details",
+      section: "Add Details",
     },
     {
-      label: "Mobile no",
-      value: foundObject.mobileNo,
-      type: "number",
+      label: "Description (English)",
+      value: foundObject.description,
+      type: "textarea",
       isRequired: true,
-      section: "Personal Details",
+      section: "Add Details",
     },
     {
-      label: "Sponser address",
+      label: "Description (Arabic)",
+      value: foundObject.descriptionArabic,
+      type: "textarea",
+      isRequired: true,
+      arabic: true,
+      section: "Add Details",
+    },
+    {
+      label: "Address (English)",
       value: foundObject.sponserAddress,
       type: "text",
       isRequired: true,
-      section: "Personal Details",
+      section: "Add Details",
     },
     {
-      label: "Bank name",
+      label: "Address (Arabic)",
+      value: foundObject.sponserAddressArabic,
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Add Details",
+    },
+    {
+      label: "Bank Name (English)",
       value: foundObject.bankName,
       type: "text",
       isRequired: true,
-      section: "Bank Details",
+      section: "Add Details",
     },
     {
-      label: "Account Name",
+      label: "Bank Name (Arabic)",
+      value: foundObject.bankNameArabic,
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Add Details",
+    },
+    {
+      label: "Account Name (English)",
       value: foundObject.accountNumber,
       type: "text",
       isRequired: true,
-      section: "Bank Details",
+      section: "Add Details",
     },
     {
-      label: "SWIFT/BIC Code",
+      label: "Account Name (Arabic)",
+      value: foundObject.accountNumberArabic,
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Add Details",
+    },
+    {
+      label: "Mobile Number (English)",
+      value: foundObject.mobileNo,
+      type: "number",
+      isRequired: true,
+      section: "Add Details",
+    },
+    {
+      label: "Account Number (English)",
+      value: foundObject.accountNumber,
+      type: "text",
+      isRequired: true,
+      section: "Add Details",
+    },
+    {
+      label: "IFSC Code (English)",
       value: foundObject.swiftCode,
       type: "text",
       isRequired: true,
-      section: "Bank Details",
-    },
-    {
-      label: "Account Email",
-      value: foundObject.bankEmail,
-      type: "text",
-      isRequired: true,
-      section: "Bank Details",
+      section: "Add Details",
     },
   ];
 
+
   const groupedFields = formFields.reduce((groups, field) => {
     const { section } = field;
     if (!groups[section]) {