Merge branch 'dev' of http://git.wdipl.com/Siddhesh.More/tanami-admin-panel into dev

src/Components/CustomAlertDialog.jsx

@@ -16,7 +16,7 @@ const CustomAlertDialog = ({ isOpen, onOpen, onClose, alertHandler, isLoading, m
 
       <AlertDialogContent w={400}>
         <AlertDialogCloseButton className="web-text-xsmall link" />
-        <AlertDialogBody className="text-center web-text-large fw-bold" pt={8}>
+        <AlertDialogBody className="text-center web-text-large fw-bold" pt={10}>
           {message}
         </AlertDialogBody>
         <AlertDialogFooter display={"flex"} justifyContent={"center"}>

src/Components/FormInputMain.jsx

@@ -10,6 +10,8 @@ const FormInputMain = ({
   errors,
   onSubmit,
   children, 
+  p,
+  w
 }) => {
   return (
     <form onSubmit={onSubmit}>
@@ -22,7 +24,7 @@ const FormInputMain = ({
           <Box display={"flex"} gap={0}>
             <Box
               width={"100%"}
-              p={5}
+              p={p?p:5}
               display={"flex"}
               flexWrap={"wrap"}
               gap={4}
@@ -81,10 +83,10 @@ const FormInputMain = ({
       {children}
       
       <Box display={'flex'} justifyContent={'end'} mb={5}>
-        <Box display={"flex"} justifyContent={"space-around"} p={4} w={'49%'}>
+        <Box display={"flex"} justifyContent={"space-around"} p={2} w={'49%'} gap={4}>
           <Button
             size={"sm"}
-            width={"44.5%"}
+            width={w?w:"44.5%"}
             rounded={"sm"}
             type="submit"
             colorScheme='gray'
@@ -93,7 +95,7 @@ const FormInputMain = ({
           </Button>
           <Button
             size={"sm"}
-            width={"44.5%"}
+            width={w?w:"44.5%"}
             rounded={"sm"}
             type="submit"
             colorScheme="green"

src/Pages/IO_Management/CreateIO/CreateIO.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from "react";
-import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
 import {
   Box,
   Divider,
@@ -33,17 +33,25 @@ import {
   WarningTwoIcon,
 } from "@chakra-ui/icons";
 import { TiWarning } from "react-icons/ti";
-import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import { useNavigate } from "react-router-dom";
-import FormField from "../../Components/FormField";
+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";
+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 IODetails from "./IODetails";
+import KeyMerits from "./KeyMerits";
+import IOArtifacts from "./IOArtifacts";
+import Investors from "./Investors";
+import IOCashDetails from "./IOCashDetails";
+import IONAVDetails from "./IONAVDetails";
+import Distribution from "./Destribution";
+import InvestmentDocuments from "../InvestmentDocuments";
+import InvestmentDocument from "./InvestmentDocument";
 
 const schema = yup.object().shape({
   ioName: yup.string().required("Arabic name is required"),
@@ -108,6 +116,12 @@ const years = Array.from(
   (_, i) => startYear + i
 ).map((year) => ({ value: year, label: year }));
 
+
+
+
+
+
+
 const CreateIO = () => {
   const navigate = useNavigate();
   const { create, setCreate, sponser, setSponser, investment, setInvestment } =
@@ -138,7 +152,16 @@ const CreateIO = () => {
     resolver: yupResolver(schema),
   });
 
-  console.log(errors);
+  const tabs = [
+    { label: 'IO Details', content: <IODetails control={control} errors={errors} /> },
+    { label: 'Investment documents', content: <InvestmentDocument control={control} errors={errors} /> },
+    { label: 'Key merits', content: <KeyMerits control={control} errors={errors} /> },
+    { label: 'IO artifacts', content: <IOArtifacts control={control} errors={errors} /> },
+    { label: 'Investors', content: <Investors control={control} errors={errors}  /> },
+    { label: 'IO Cash Details', content: <IOCashDetails control={control} errors={errors} /> },
+    { label: 'IO NAV Details', content: <IONAVDetails control={control} errors={errors} /> },
+    { label: 'Distribution', content: <Distribution control={control} errors={errors} /> },
+  ];
 
   useEffect(() => {
     // Simulate loading
@@ -150,85 +173,6 @@ const CreateIO = () => {
     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(() => {
@@ -323,171 +267,6 @@ const CreateIO = () => {
     setSelectedOtherImageData(newSelectedImageData);
   };
 
-  const formFields = [
-    {
-      label: "IO Name (English)",
-      placeHolder: " ",
-      name: "ioName",
-      type: "text",
-      isRequired: true,
-      section: " ",
-      width: "49%",
-    },
-    {
-      label: "IO Name (Arabic)",
-      placeHolder: " ",
-      name: "ioNameArabic",
-      type: "text",
-      isRequired: true,
-      section: " ",
-      width: "49%",
-    },
-    {
-      label: "Description (English)",
-      placeHolder: " ",
-      name: "discription",
-      type: "textarea",
-      isRequired: true,
-      section: " ",
-      width: "49%",
-    },
-    {
-      label: "Description (Arabic)",
-      placeHolder: " ",
-      name: "discriptionArabic",
-      type: "textarea",
-      isRequired: true,
-      section: " ",
-      width: "49%",
-    },
-    {
-      label: "Investment Type (English)",
-      placeHolder: " ",
-      name: "typeName",
-      type: "select",
-      isRequired: true,
-      section: " ",
-      width: "49%",
-      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: "Investment Type (Arabic)",
-      placeHolder: " ",
-      name: "typeNameArabic",
-      type: "select",
-      isRequired: true,
-      section: " ",
-      width: "49%",
-      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: "Sponser Name (English)",
-      placeHolder: " ",
-      name: "sponserName",
-      type: "text",
-      isRequired: true,
-      section: " ",
-      width: "49%",
-    },
-    {
-      label: "Goal Amount (English)",
-      placeHolder: " ",
-      name: "goalAmount",
-      type: "Number",
-      isRequired: true,
-      section: " ",
-      width: "49%",
-    },
-    {
-      label: "Minimum Investment Amount (English)",
-      placeHolder: " ",
-      name: "minInvestment",
-      type: "number",
-      isRequired: true,
-      section: " ",
-      width: "32.3%",
-    },
-    {
-      label: "Maximum Investment Amount (English)",
-      placeHolder: " ",
-      name: "maxInvestment",
-      type: "number",
-      isRequired: true,
-      section: " ",
-      width: "32.3%",
-    },
-    {
-      label: "Holding Period (English)",
-      placeHolder: " ",
-      name: "holdingPeriod",
-      type: "number",
-      isRequired: true,
-      section: " ",
-      width: "32.3%",
-    },
-    {
-      label: "Expected Return Estimated (English)",
-      placeHolder: " ",
-      name: "expectedReturn",
-      type: "number",
-      isRequired: true,
-      section: " ",
-      width: "32.3%",
-    },
-    {
-      label: "Closing Date (English)",
-      placeHolder: " ",
-      name: "closingDate",
-      type: "date",
-      isRequired: true,
-      section: " ",
-      width: "32.3%",
-    },
-    {
-      label: "IO Status (English)",
-      placeHolder: " ",
-      name: "minInvestment",
-      type: "text",
-      isRequired: true,
-      section: " ",
-      width: "32.3%",
-    },
-  ];
-
   const keyMerits = [
     {
       label: "Name (English)",
@@ -591,14 +370,7 @@ const CreateIO = () => {
     },
   ];
 
-  const groupedFields = formFields.reduce((groups, field) => {
-    const { section } = field;
-    if (!groups[section]) {
-      groups[section] = [];
-    }
-    groups[section].push(field);
-    return groups;
-  }, {});
+
 
   const groupedFieldsTwo = keyMerits.reduce((groups, field) => {
     const { section } = field;
@@ -637,16 +409,19 @@ const CreateIO = () => {
   }, {});
 
   return (
-    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
-      <Tabs mt={4}>
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={10}>
+      <Tabs mt={2}>
         <TabList>
+        {tabs.map(({label}, index) => (
           <Tab
+          disabled={true}
+          key={index}
             fontSize={"sm"}
             _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
           >
-            IO Details
-          </Tab>
-          <Tab
+            {label}
+          </Tab>))}
+          {/* <Tab
             fontSize={"sm"}
             _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
           >
@@ -687,61 +462,29 @@ const CreateIO = () => {
             _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
           >
             Distribution
-          </Tab>
+          </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}
-            />
+        {tabs.map(({content}, index) => (
+          <TabPanel>
+            {content}
+            </TabPanel>))}
+
+
+          {/* <TabPanel>
+            <IODetails control={control} errors={errors} />
           </TabPanel>
+
+
+          <TabPanel>
+            <InvestmentDocument control={control} errors={errors}/>
+          </TabPanel>
+
+
+
+
           <TabPanel>
             <FormInputMain
               width={"23.8%"}
@@ -749,8 +492,12 @@ const CreateIO = () => {
               control={control}
               errors={errors}
               onSubmit={handleSubmit(onSubmit)}
-            ></FormInputMain>
+            />
           </TabPanel>
+
+
+
+
           <TabPanel>
             <FormInputMain
               width={"23.8%"}
@@ -758,8 +505,12 @@ const CreateIO = () => {
               control={control}
               errors={errors}
               onSubmit={handleSubmit(onSubmit)}
-            ></FormInputMain>
+            />
           </TabPanel>
+
+
+
+
           <TabPanel>
             <FormInputMain
               width={"23.8%"}
@@ -767,9 +518,16 @@ const CreateIO = () => {
               control={control}
               errors={errors}
               onSubmit={handleSubmit(onSubmit)}
-            ></FormInputMain>
+            />
           </TabPanel>
-          <TabPanel></TabPanel>
+
+
+
+
+          <TabPanel></TabPanel> */}
+
+
+
         </TabPanels>
       </Tabs>
     </Box>

src/Pages/IO_Management/CreateIO/Destribution.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Distribution = () => {
+  return (
+    <div>Distribution</div>
+  )
+}
+
+export default Distribution

src/Pages/IO_Management/CreateIO/IOArtifacts.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const IOArtifacts = () => {
+  return (
+    <div>IOArtifacts</div>
+  )
+}
+
+export default IOArtifacts

src/Pages/IO_Management/CreateIO/IOCashDetails.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const IOCashDetails = () => {
+  return (
+    <div>IOCashDetails</div>
+  )
+}
+
+export default IOCashDetails

src/Pages/IO_Management/CreateIO/IODetails.jsx

@@ -0,0 +1,190 @@
+import React from "react";
+import FormInputMain from "../../../Components/FormInputMain";
+
+const IODetails = ({ control, errors }) => {
+  const formFields = [
+    {
+      label: "IO Name (English)",
+      placeHolder: " ",
+      name: "ioName",
+      type: "text",
+      isRequired: true,
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "IO Name (Arabic)",
+      placeHolder: " ",
+      name: "ioNameArabic",
+      type: "text",
+      isRequired: true,
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "Description (English)",
+      placeHolder: " ",
+      name: "discription",
+      type: "textarea",
+      isRequired: true,
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "Description (Arabic)",
+      placeHolder: " ",
+      name: "discriptionArabic",
+      type: "textarea",
+      isRequired: true,
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "Investment Type (English)",
+      placeHolder: " ",
+      name: "typeName",
+      type: "select",
+      isRequired: true,
+      section: " ",
+      width: "49%",
+      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: "Investment Type (Arabic)",
+      placeHolder: " ",
+      name: "typeNameArabic",
+      type: "select",
+      isRequired: true,
+      section: " ",
+      width: "49%",
+      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: "Sponser Name (English)",
+      placeHolder: " ",
+      name: "sponserName",
+      type: "text",
+      isRequired: true,
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "Goal Amount (English)",
+      placeHolder: " ",
+      name: "goalAmount",
+      type: "Number",
+      isRequired: true,
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "Minimum Investment Amount (English)",
+      placeHolder: " ",
+      name: "minInvestment",
+      type: "number",
+      isRequired: true,
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Maximum Investment Amount (English)",
+      placeHolder: " ",
+      name: "maxInvestment",
+      type: "number",
+      isRequired: true,
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Holding Period (English)",
+      placeHolder: " ",
+      name: "holdingPeriod",
+      type: "number",
+      isRequired: true,
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Expected Return Estimated (English)",
+      placeHolder: " ",
+      name: "expectedReturn",
+      type: "number",
+      isRequired: true,
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Closing Date (English)",
+      placeHolder: " ",
+      name: "closingDate",
+      type: "date",
+      isRequired: true,
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "IO Status (English)",
+      placeHolder: " ",
+      name: "minInvestment",
+      type: "text",
+      isRequired: true,
+      section: " ",
+      width: "32.3%",
+    },
+  ];
+
+  const groupedFields = formFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
+  return (
+    <FormInputMain
+      p={0.1}
+      width={"23.8%"}
+      groupedFields={groupedFields}
+      control={control}
+      errors={errors}
+    />
+  );
+};
+
+export default IODetails;

src/Pages/IO_Management/CreateIO/IONAVDetails.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const IONAVDetails = () => {
+  return (
+    <div>IONAVDetails</div>
+  )
+}
+
+export default IONAVDetails

src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx

@@ -0,0 +1,170 @@
+import { Box, Button, Input, Text, useDisclosure } from "@chakra-ui/react";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import InvestmentDocuments from "../InvestmentDocuments";
+import DataTable from "../../../Components/DataTable/DataTable";
+import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { debounce } from "../../Master/Sponser/AddSponser";
+import { formatDate } from "../../../Components/Functions/UTCConvertor";
+import { AddIcon } from "@chakra-ui/icons";
+
+const InvestmentDocument = ({ control, errors }) => {
+    const { create, setCreate, sponser, setSponser, investment, setInvestment } =
+      useContext(GlobalStateContext);
+      const firstField = useRef();
+    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 { isOpen, onOpen, onClose } = useDisclosure();
+
+    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"
+        h={7}
+      >
+        "{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>,
+  }));
+
+
+  return (
+    <Box>
+      <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={"xs"}
+          // width={"44.5%"}
+          fontSize={"xs"}
+          rounded={"sm"}
+          ps={3}
+          pe={4}
+
+          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}
+      />
+    </Box>
+  );
+};
+
+export default InvestmentDocument;

src/Pages/IO_Management/CreateIO/Investors.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Investors = () => {
+  return (
+    <div>Investors</div>
+  )
+}
+
+export default Investors

src/Pages/IO_Management/CreateIO/KeyMerits.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const KeyMerits = () => {
+  return (
+    <div>KeyMerits</div>
+  )
+}
+
+export default KeyMerits

src/Pages/IO_Management/InvestmentDocuments.jsx

@@ -19,6 +19,7 @@ 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";
+import CustomAlertDialog from "../../Components/CustomAlertDialog";
 
 export const investmentDoct = yup.object().shape({
   type: yup.string().required("Sponser name is required"),
@@ -27,54 +28,19 @@ export const investmentDoct = yup.object().shape({
 });
 
 const InvestmentDocuments = ({ id, isOpen, onClose, firstField }) => {
+  const [file, setFile] = useState("");
+  const [fileName, setFileName] = useState("");
+  const [alert, setAlert] = useState(false);
 
   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);
@@ -89,6 +55,16 @@ const InvestmentDocuments = ({ id, isOpen, onClose, firstField }) => {
     ]);
   };
 
+  const handleSave = () => {
+    console.log({
+      fileName: fileName,
+      file:file
+    });
+    setAlert(false)
+    onClose()
+
+  }
+
   return (
     <>
       <Drawer 
@@ -100,21 +76,62 @@ const InvestmentDocuments = ({ id, isOpen, onClose, firstField }) => {
         <DrawerOverlay />
         <DrawerContent>
           <DrawerCloseButton />
-          <DrawerHeader fontSize={"sm"}>Investment Documents</DrawerHeader>
+          <DrawerHeader fontSize={"sm"}>Add Details</DrawerHeader>
 
-          <DrawerBody padding={0}>
-            <Stack>
-              <FormInputMain
-                width={"100%"}
-                groupedFields={groupedFields}
-                control={control}
-                errors={errors}
-                onSubmit={handleSubmit(onSubmit)}
+          <DrawerBody>
+
+            <FormControl mb={4}>
+              <FormLabel fontSize={"sm"}>File Name</FormLabel>
+              <Input
+                value={fileName}
+                onChange={(e) => setFileName(e.target.value)}
+                fontSize={"sm"}
+                type="text"
+                size={"sm"}
               />
-            </Stack>
+            </FormControl>
+            <FormControl mb={4}>
+              <FormLabel fontSize={"sm"}>File Name</FormLabel>
+              <Input
+                value={file}
+                onChange={(e) => setFile(e.target.value)}
+                fontSize={"sm"}
+                type="file"
+                className="form-control"
+                size={"sm"}
+              />
+            </FormControl>
+
           </DrawerBody>
+          <DrawerFooter>
+            <Button
+              variant="outline"
+              colorScheme={"green"}
+              rounded={"sm"}
+              size={"sm"}
+              mr={3}
+              onClick={onClose}
+            >
+              Cancel
+            </Button>
+
+            <Button
+              colorScheme={"green"}
+              rounded={"sm"}
+              size={"sm"}
+              onClick={() => setAlert(true)}
+            >
+              Save
+            </Button>
+          </DrawerFooter>
         </DrawerContent>
       </Drawer>
+      <CustomAlertDialog
+        isOpen={alert}
+        onClose={() => setAlert(false)}
+        alertHandler={handleSave}
+        message={"Are you sure you want to add this document?"}
+      />
     </>
   );
 };

src/Pages/IO_Management/ViewIOdata.jsx

@@ -28,6 +28,8 @@ const ViewIOdata = () => {
   const { viewIO } = useContext(GlobalStateContext);
   const { reset } = useForm(); // assuming react-hook-form
 
+
+
   const id = params?.id;
   const foundObject = viewIO.find(
     (item) => item?.id.toString() === id.toString()

src/Routes/Routes.js

@@ -7,7 +7,7 @@ import BankInvestor from "../Pages/Admin/BankInvestor";
 import Contact from "../Pages/Admin/Contact";
 import Notification from "../Pages/Admin/Notification";
 import Users from "../Pages/Admin/Users";
-import CreateIO from "../Pages/IO_Management/CreateIO";
+import CreateIO from "../Pages/IO_Management/CreateIO/CreateIO";
 // import CreateIO from "../Pages/IO_Management/InputComponents";
 import Create from "../Pages/IO_Management/InputComponents";
 import ViewIO from "../Pages/IO_Management/ViewIO";