Resturctured ViewIOdata page

src/Components/FormInputView.jsx

@@ -16,6 +16,7 @@ const FormInputView = ({
       {Object?.entries(groupedFields, groupedFieldsTwo).map(
         ([section, fields], index) => (
           <Box key={section}>
+            {console.log(fields)}
             <Heading as="h6" size="xs" mt={index === 0 ? 3 : 4}>
               {section}
             </Heading>
@@ -27,7 +28,7 @@ const FormInputView = ({
                 flexWrap={"wrap"}
                 gap={4}
               >
-                {fields.map(({ value, label, id, width }, key) => (
+                {fields.map(({ value, label, id, width, btn }, key) => (
                   <Box w={!width ? "49%" : width}>
                     <FormLabel key={id} color={"gray.500"} fontSize={"xs"}>
                       {label}

src/Pages/IO_Management/CreateIO/CreateIO.jsx

@@ -421,54 +421,13 @@ const CreateIO = () => {
           >
             {label}
           </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>
 
         {tabs.map(({content}, index) => (
-          <TabPanel>
+          <TabPanel key={index}>
             {content}
             </TabPanel>))}
 

src/Pages/IO_Management/EditViewIO.jsx

@@ -0,0 +1,456 @@
+import React, { useContext, useEffect, useState } from "react";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import {
+  Box,
+  Divider,
+  FormControl,
+  FormLabel,
+  Heading,
+  Input,
+  Select,
+  Textarea,
+  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,
+  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";
+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 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"),
+  ioNameArabic: yup.string().required("Investment Object name is required"),
+  discription: yup.string().required("Sponser name is required"),
+  discriptionArabic: yup.string().required("Arabic name is required"),
+  typeName: yup.string().required("Investment Object name is required"),
+  typeNameArabic: yup.string().required("Sponser name is required"),
+  sponserName: yup.string().required("Arabic name is required"),
+  sponserNameArabic: yup
+    .string()
+    .required("Investment Object name is required"),
+  holdingPeriod: yup.string().required("Sponser 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"),
+  closingDate: yup.string().required("Investment Object name is required"),
+  minInvestment: yup.string().required("Sponser name is required"),
+  maxInvestment: yup.string().required("Arabic name is required"),
+  expectedReturn: yup.string().required("Investment Object name is required"),
+  originalValue: yup.string().required("Sponser name is required"),
+  keyname: yup.string().required("Arabic name is required"),
+  keyNameArabic: yup.string().required("Investment Object name is required"),
+  keyDescription: yup.string().required("Sponser name is required"),
+  keyDescriptionArabic: yup.string().required("Sponser name is required"),
+  docType: 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"),
+  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;
+const endYear = 2124;
+const years = Array.from(
+  { length: endYear - startYear + 1 },
+  (_, i) => startYear + i
+).map((year) => ({ value: year, label: year }));
+
+const EditViewIO = () => {
+  const navigate = useNavigate();
+  const { create, setCreate, 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([]);
+  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,
+    reset,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(schema),
+  });
+
+  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
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  const destributedAmount = Number(watch().destributedAmount) || 0;
+
+  useEffect(() => {
+    const calculateTotalCharge = () => {
+      const totalChargeValue = charges.reduce(
+        (acc, { value }) => acc + Number(value),
+        0
+      );
+      setTotalCharge(totalChargeValue);
+    };
+
+    const calculateTotalAmount = () => {
+      const totalChargeValue = charges.reduce(
+        (acc, { value }) => acc + Number(value),
+        0
+      );
+      setTotalAmount(destributedAmount + totalChargeValue);
+    };
+
+    calculateTotalCharge();
+    calculateTotalAmount();
+  }, [charges, destributedAmount]);
+
+  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();
+  };
+
+  // Extract options for the select input
+  const createOptions = create.map((item) => ({
+    value: item.sponserName,
+    label: item.sponserName,
+  }));
+
+  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);
+    }
+  };
+
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const firstField = React.useRef();
+
+  // 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);
+  };
+
+  const keyMerits = [
+    {
+      label: "Name (English)",
+      placeHolder: " ",
+      name: "keyname",
+      type: "text",
+      isRequired: true,
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Name (Arabic)",
+      placeHolder: " ",
+      name: "keyNameArabic",
+      type: "text",
+      isRequired: true,
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Icon",
+      placeHolder: " ",
+      name: "iconUpload",
+      type: "fileNormal",
+      isRequired: true,
+      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: " ",
+      width: "32.3%",
+    },
+
+    {
+      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: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Attachment",
+      placeHolder: " ",
+      name: "type",
+      type: "docAttach",
+      isRequired: true,
+      section: " ",
+      width: "32.3%",
+    },
+  ];
+
+  const Videos = [
+    {
+      label: "Videos",
+      placeHolder: " ",
+      name: "videos",
+      type: "fileNormal",
+      isRequired: true,
+      section: " ",
+      width: "32.3%",
+    },
+  ];
+
+  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={10}>
+      <Tabs mt={2}>
+        <TabList>
+          {tabs.map(({ label }, index) => (
+            <Tab
+              disabled={true}
+              key={index}
+              fontSize={"sm"}
+              _selected={{
+                color: "#004118",
+                borderBottom: "2px solid #38a169",
+              }}
+            >
+              {label}
+            </Tab>
+          ))}
+        </TabList>
+
+        <TabPanels>
+          {tabs.map(({ content }, index) => (
+            <TabPanel key={index}>{content}</TabPanel>
+          ))}
+        </TabPanels>
+      </Tabs>
+    </Box>
+  );
+};
+
+export default EditViewIO;

src/Pages/IO_Management/ViewIO/ViewDistribution.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const ViewDistribution = () => {
+  return <div>ViewDistribution</div>;
+};
+
+export default ViewDistribution;

src/Pages/IO_Management/ViewIO/ViewIO.jsx

@@ -15,11 +15,11 @@ import {
 // import error from "../assets/Error.svg"
 // import robot from "../../../assets/robot.png"
 import { useContext, useEffect, useState } from "react";
-import { OPACITY_ON_LOAD } from "../../Layout/animations";
-import InvestmentCard from "../../Components/InvestmentCard/InvestmentCard";
-import GlobalStateContext from "../../Contexts/GlobalStateContext";
-import Pagination from "../../Components/Pagination";
-import EmptySearchList from "../../Components/EmptySearchList";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import InvestmentCard from "../../../Components/InvestmentCard/InvestmentCard";
+import Pagination from "../../../Components/Pagination";
+import EmptySearchList from "../../../Components/EmptySearchList";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 
 const ExchangeRate = () => {
   const [searchTerm, setSearchTerm] = useState("");
@@ -27,6 +27,9 @@ const ExchangeRate = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [statusFilter, setStatusFilter] = useState("all");
 
+
+  console.log(investment);
+
   useEffect(() => {
     // Simulate loading
     const timer = setTimeout(() => {
@@ -53,7 +56,7 @@ const ExchangeRate = () => {
       (statusFilter === "Upcomming" && status === "Upcomming") ||
       (statusFilter === "Closed" && status === "Closed");
 
-      return nameMatches && statusMatches;
+    return nameMatches && statusMatches;
   });
 
   const availableInvestments = filteredData.filter(
@@ -68,7 +71,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>
@@ -94,21 +97,22 @@ const ExchangeRate = () => {
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
               />
-            <Box display={"flex"} gap={2} >
-              <Select pb={1}
-              className="pointer web-text-small"
-              width={"100px"}
-              rounded="sm"
-              size="sm"
-              value={statusFilter}
-              onChange={(e) => setStatusFilter(e.target.value)}
-            >
-              <option value="all">All</option>
-              <option value="Available">Available</option>
-              <option value="Upcomming">Upcomming</option>
-              <option value="Closed">Closed</option>
-            </Select>
-              <Pagination pageCount={false} totalItems={50} />
+              <Box display={"flex"} gap={2}>
+                <Select
+                  pb={1}
+                  className="pointer web-text-small"
+                  width={"100px"}
+                  rounded="sm"
+                  size="sm"
+                  value={statusFilter}
+                  onChange={(e) => setStatusFilter(e.target.value)}
+                >
+                  <option value="all">All</option>
+                  <option value="Available">Available</option>
+                  <option value="Upcomming">Upcomming</option>
+                  <option value="Closed">Closed</option>
+                </Select>
+                <Pagination pageCount={false} totalItems={50} />
               </Box>
             </Box>
             {filteredData?.length === 0 ? (

src/Pages/IO_Management/ViewIO/ViewIOTable.jsx

@@ -18,8 +18,8 @@ import {
   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 { 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 {
@@ -31,10 +31,10 @@ import {
   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 Pagination from "../../../Components/Pagination";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+import ToastBox from "../../../Components/ToastBox";
 // import { debounce } from "./AddIOCharges";
 
 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
@@ -50,6 +50,8 @@ const ViewIOTable = () => {
   const [mouseEntered, setMouseEntered] = useState(false);
   const [mouseEnteredId, setMouseEnteredId] = useState("");
 
+
+  console.log(viewIO);
   useEffect(() => {
     // Simulate loading
     const timer = setTimeout(() => {

src/Pages/IO_Management/ViewIO/ViewIOartifacts.jsx

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

src/Pages/IO_Management/ViewIO/ViewIOcash.jsx

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

src/Pages/IO_Management/ViewIO/ViewIOdata.jsx

@@ -0,0 +1,84 @@
+import {
+  Box,
+  Button,
+  Input,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text,
+} from "@chakra-ui/react";
+import { useNavigate, useParams } from "react-router-dom";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { useContext, useEffect, useState } from "react";
+import FormInputView from "../../../Components/FormInputView";
+import { useForm } from "react-hook-form"; // assuming react-hook-form is used
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import { ArrowBackIcon } from "@chakra-ui/icons";
+import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+import ViewIOdataHeader from "./ViewIOdataHeader";
+import ViewIOdetails from "./ViewIOdetails";
+import ViewIOdocs from "./ViewIOdocs";
+import ViewKeyMerits from "./ViewKeyMerits";
+import ViewIOartifacts from "./ViewIOartifacts";
+import ViewInvestors from "./ViewInvestors";
+import ViewIOcash from "./ViewIOcash";
+import ViewIOnav from "./ViewIOnav";
+import ViewDistribution from "./ViewDistribution";
+
+const ViewIOdata = () => {
+  const [isEditing, setIsEditing] = useState(false);
+  const navigate = useNavigate();
+
+  const tabs = [
+    { label: "IO Details", content: <ViewIOdetails /> },
+    { label: "Investment documents", content: <ViewIOdocs /> },
+    { label: "Key merits", content: <ViewKeyMerits /> },
+    { label: "IO artifacts", content: <ViewIOartifacts /> },
+    { label: "Investors", content: <ViewInvestors /> },
+    { label: "IO Cash Details", content: <ViewIOcash /> },
+    { label: "IO NAV Details", content: <ViewIOnav /> },
+    { label: "Distribution", content: <ViewDistribution /> },
+  ];
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
+      <Box paddingInline={"12px"}>
+        <span
+          onClick={() => navigate(-1)}
+          style={{ fontSize: "15px", cursor: "pointer" }}
+        >
+          <ArrowBackIcon cursor={"pointer"} /> Back
+        </span>
+        <ViewIOdataHeader />
+      </Box>
+
+      <Tabs mt={4}>
+        <TabList>
+          {tabs.map(({ label }, index) => (
+            <Tab
+              disabled={true}
+              key={index}
+              fontSize={"sm"}
+              _selected={{
+                color: "#004118",
+                borderBottom: "2px solid #38a169",
+              }}
+            >
+              {label}
+            </Tab>
+          ))}
+        </TabList>
+
+        <TabPanels>
+          {tabs.map(({ content }, index) => (
+            <TabPanel key={index}>{content}</TabPanel>
+          ))}
+        </TabPanels>
+      </Tabs>
+    </Box>
+  );
+};
+
+export default ViewIOdata;

src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx

@@ -1,5 +1,5 @@
 import { Box, Image, Text } from "@chakra-ui/react";
-import header from "../../../src/assets/IOheader.png";
+import header from "../../../assets/IOheader.png";
 
 const ViewIOdataHeader = () => {
   return (

src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx

@@ -0,0 +1,124 @@
+import { Box } from "@chakra-ui/react";
+import React, { useContext } from "react";
+
+import { useNavigate, useParams } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import DataTable from "../../../Components/DataTable/DataTable";
+import FormInputView from "../../../Components/FormInputView";
+
+const ViewIOdetails = () => {
+  const params = useParams();
+  const { viewIO } = useContext(GlobalStateContext);
+  console.log(viewIO);
+  const { reset } = useForm(); // assuming react-hook-form
+
+  const id = params?.id;
+  const foundObject = viewIO?.find(
+    (item) => item?.id.toString() === id.toString()
+  );
+
+  const formFields = [
+    {
+      label: "IO Name (English)",
+      value: foundObject.DealName,
+      width: "49%",
+      section: "",
+    },
+    {
+      label: "IO Name (Arabic)",
+      value: foundObject.SponsorName,
+      width: "49%",
+      section: "",
+    },
+    {
+      label: "Description (English)",
+      value: foundObject.IOstatus,
+      width: "49%",
+      section: "",
+    },
+    {
+      label: "Description (Arabic)",
+      value: foundObject.IOstatus,
+      width: "49%",
+      section: "",
+    },
+    {
+      label: "Investment Type (English)",
+      value: foundObject.DealName,
+      width: "49%",
+      section: "",
+    },
+    {
+      label: "Investment Type (Arabic)",
+      value: foundObject.DealID,
+      width: "49%",
+      section: "",
+    },
+    {
+      label: "Sponser Name (English)",
+      value: foundObject.IOstatus,
+      width: "49%",
+      section: "",
+    },
+    {
+      label: "Goal Amount (English)",
+      value: foundObject.IOstatus,
+      width: "49%",
+      section: "",
+    },
+    {
+      label: "Minimum Investment Amount (English)",
+      value: foundObject.IOstatus,
+      width: "32.3%",
+      section: "",
+    },
+    {
+      label: "Maximum Investment Amount (English)",
+      value: foundObject.IOstatus,
+      width: "32.3%",
+      section: "",
+    },
+    {
+      label: "Holding Period (English)",
+      value: foundObject.IOstatus,
+      width: "32.3%",
+      section: "",
+    },
+    {
+      label: "Expected Return Estimated (English)",
+      value: foundObject.IOstatus,
+      width: "32.3%",
+      section: "",
+    },
+    {
+      label: "Closing Date (English)",
+      value: foundObject.IOstatus,
+      width: "32.3%",
+      section: "",
+    },
+    {
+      label: "IO Status (English)",
+      value: foundObject.IOstatus,
+      width: "32.3%",
+      section: "",
+    },
+  ];
+
+  const groupedFields = formFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
+  if (!foundObject) {
+    return <Box>Loading...</Box>;
+  }
+
+  return <FormInputView groupedFields={groupedFields} />;
+};
+
+export default ViewIOdetails;

src/Pages/IO_Management/ViewIO/ViewIOdocs.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const ViewIOdocs = () => {
+  return <div>ViewIOdocs</div>;
+};
+
+export default ViewIOdocs;

src/Pages/IO_Management/ViewIO/ViewIOnav.jsx

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

src/Pages/IO_Management/ViewIO/ViewInvestors.jsx

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

src/Pages/IO_Management/ViewIO/ViewKeyMerits.jsx

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

src/Pages/IO_Management/ViewIOdata.jsx

@@ -1,225 +0,0 @@
-import {
-  Box,
-  Button,
-  Input,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-  Text,
-} from "@chakra-ui/react";
-import { useNavigate, useParams } from "react-router-dom";
-import GlobalStateContext from "../../Contexts/GlobalStateContext";
-import { useContext, useEffect, useState } from "react";
-import FormInputView from "../../Components/FormInputView";
-import { useForm } from "react-hook-form"; // assuming react-hook-form is used
-import { OPACITY_ON_LOAD } from "../../Layout/animations";
-import { ArrowBackIcon } from "@chakra-ui/icons";
-import DataTable from "../../Components/DataTable/DataTable";
-import CustomAlertDialog from "../../Components/CustomAlertDialog";
-import FormInputMain from "../../Components/FormInputMain";
-import InvestmentDocuments from "./InvestmentDocuments";
-import ViewIOdataHeader from "./ViewIOdataHeader";
-
-const ViewIOdata = () => {
-  const navigate = useNavigate();
-  const params = useParams();
-  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()
-  );
-
-  if (!foundObject) {
-    return <Box>Loading...</Box>;
-  }
-
-  const formFields = [
-    {
-      label: "IO Name (English)",
-      value: foundObject.DealName,
-      width: "49%",
-      section: "",
-    },
-    {
-      label: "IO Name (Arabic)",
-      value: foundObject.SponsorName,
-      width: "49%",
-      section: "",
-    },
-    {
-      label: "Description (English)",
-      value: foundObject.IOstatus,
-      width: "49%",
-      section: "",
-    },
-    {
-      label: "Description (Arabic)",
-      value: foundObject.IOstatus,
-      width: "49%",
-      section: "",
-    },
-    {
-      label: "Investment Type (English)",
-      value: foundObject.DealName,
-      width: "49%",
-      section: "",
-    },
-    {
-      label: "Investment Type (Arabic)",
-      value: foundObject.DealID,
-      width: "49%",
-      section: "",
-    },
-    {
-      label: "Sponser Name (English)",
-      value: foundObject.IOstatus,
-      width: "49%",
-      section: "",
-    },
-    {
-      label: "Goal Amount (English)",
-      value: foundObject.IOstatus,
-      width: "49%",
-      section: "",
-    },
-    {
-      label: "Minimum Investment Amount (English)",
-      value: foundObject.IOstatus,
-      width: "32.3%",
-      section: "",
-    },
-    {
-      label: "Maximum Investment Amount (English)",
-      value: foundObject.IOstatus,
-      width: "32.3%",
-      section: "",
-    },
-    {
-      label: "Holding Period (English)",
-      value: foundObject.IOstatus,
-      width: "32.3%",
-      section: "",
-    },
-    {
-      label: "Expected Return Estimated (English)",
-      value: foundObject.IOstatus,
-      width: "32.3%",
-      section: "",
-    },
-    {
-      label: "Closing Date (English)",
-      value: foundObject.IOstatus,
-      width: "32.3%",
-      section: "",
-    },
-    {
-      label: "IO Status (English)",
-      value: foundObject.IOstatus,
-      width: "32.3%",
-      section: "",
-    },
-  ];
-
-  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}>
-      <Box paddingInline={"12px"}>
-        <span
-          onClick={() => navigate(-1)}
-          style={{ fontSize: "15px", cursor: "pointer" }}
-        >
-          <ArrowBackIcon cursor={"pointer"} /> Back
-        </span>
-        <ViewIOdataHeader />
-      </Box>
-
-      <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>
-            <FormInputView groupedFields={groupedFields} />
-          </TabPanel>
-          <TabPanel>
-            <FormInputView groupedFields={groupedFields} />
-          </TabPanel>
-          <TabPanel>
-            <FormInputView groupedFields={groupedFields} />
-          </TabPanel>
-          <TabPanel>
-            <FormInputView groupedFields={groupedFields} />
-          </TabPanel>
-          <TabPanel>
-            <FormInputView groupedFields={groupedFields} />
-          </TabPanel>
-          <TabPanel></TabPanel>
-        </TabPanels>
-      </Tabs>
-    </Box>
-  );
-};
-
-export default ViewIOdata;

src/Routes/Routes.js

@@ -10,10 +10,10 @@ import Users from "../Pages/Admin/Users";
 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";
-import View from "../Pages/IO_Management/ViewIO";
-import ViewIOTable from "../Pages/IO_Management/ViewIOTable";
-import ViewIOdata from "../Pages/IO_Management/ViewIOdata";
+import ViewIO from "../Pages/IO_Management/ViewIO/ViewIO";
+import View from "../Pages/IO_Management/ViewIO/ViewIO";
+import ViewIOTable from "../Pages/IO_Management/ViewIO/ViewIOTable";
+import ViewIOdata from "../Pages/IO_Management/ViewIO/ViewIOdata";
 import InvestorPendingRequest from "../Pages/InvestorUpgrade/InvestorRequest";
 import UpgradeHistory from "../Pages/InvestorUpgrade/UpgradeHistory";
 import upgradeHistory from "../Pages/InvestorUpgrade/UpgradeHistory";