updated

2024-07-09 14:49:05 +05:30
parent 87f20b0466
commit d84e707e6c
10 changed files with 424 additions and 92 deletions
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -1427,6 +1427,89 @@ const GlobalStateProvider = ({ children }) => {
    },
  ]);

+
+  const [ IODetails, setIODetails ] = useState([
+    {
+      id:uuidv4(),
+      closingDate: "Fri Jul 26 2024 00:00:00 GMT+0530 (India Standard Time)",
+      discription: "Animi molestias cup",
+      discriptionArabic: "Ut aliquam corporis",
+      expectedReturn: 37,
+      goalAmount: 40,
+      holdingPeriod: 47,
+      ioName: "Harlan Head",
+      ioNameArabic: "Ulric Torres",
+      ioStatus: "open",
+      maxInvestment: 80,
+      minInvestment: 77,
+      sponserName: "Ella Fitzgerald",
+      typeName: "Commercial"
+    },
+    {
+      id:uuidv4(),
+      closingDate: "Wed Sep 18 2024 00:00:00 GMT+0530 (India Standard Time)",
+      discription: "Voluptas necessitatibus",
+      discriptionArabic: "Nemo enim ipsam",
+      expectedReturn: 42,
+      goalAmount: 55,
+      holdingPeriod: 30,
+      ioName: "John Doe",
+      ioNameArabic: "Ali Ahmed",
+      ioStatus: "closed",
+      maxInvestment: 95,
+      minInvestment: 60,
+      sponserName: "Louis Armstrong",
+      typeName: "Residential"
+    },
+    {
+      id:uuidv4(),
+      closingDate: "Mon Oct 21 2024 00:00:00 GMT+0530 (India Standard Time)",
+      discription: "Tempora incidunt",
+      discriptionArabic: "Eius modi tempora",
+      expectedReturn: 50,
+      goalAmount: 75,
+      holdingPeriod: 60,
+      ioName: "Jane Smith",
+      ioNameArabic: "Fatima Al-Hassan",
+      ioStatus: "open",
+      maxInvestment: 100,
+      minInvestment: 85,
+      sponserName: "Duke Ellington",
+      typeName: "Industrial"
+    },
+    {
+      id:uuidv4(),
+      closingDate: "Fri Nov 15 2024 00:00:00 GMT+0530 (India Standard Time)",
+      discription: "Dolor sit amet",
+      discriptionArabic: "Consectetur adipiscing elit",
+      expectedReturn: 45,
+      goalAmount: 60,
+      holdingPeriod: 90,
+      ioName: "Alice Johnson",
+      ioNameArabic: "Layla Khalid",
+      ioStatus: "open",
+      maxInvestment: 70,
+      minInvestment: 50,
+      sponserName: "Billie Holiday",
+      typeName: "Commercial"
+    },
+    {
+      id:uuidv4(),
+      closingDate: "Tue Dec 10 2024 00:00:00 GMT+0530 (India Standard Time)",
+      discription: "Consectetur adipisci",
+      discriptionArabic: "Elit sed do eiusmod",
+      expectedReturn: 48,
+      goalAmount: 65,
+      holdingPeriod: 45,
+      ioName: "Robert Brown",
+      ioNameArabic: "Omar Hussain",
+      ioStatus: "closed",
+      maxInvestment: 90,
+      minInvestment: 70,
+      sponserName: "Miles Davis",
+      typeName: "Residential"
+    }
+  ])
  return (
    <GlobalStateContext.Provider
      value={{
@@ -1473,7 +1556,7 @@ const GlobalStateProvider = ({ children }) => {
        iOArtifacts,
        setIOArtifacts,
        investors, 
-        setInvestors
+        setInvestors,IODetails, setIODetails
      }}
    >
      {children}
--- a/src/Pages/IO_Management/CreateIO/CreateIO.jsx
+++ b/src/Pages/IO_Management/CreateIO/CreateIO.jsx
@@ -1,13 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { OPACITY_ON_LOAD } from "../../../Layout/animations";
-import {
-  Box,
-  Tabs,
-  TabList,
-  Tab,
-  TabPanel,
-  TabPanels,
-} from "@chakra-ui/react";
+import { Box, Tabs, TabList, Tab, TabPanel, TabPanels } from "@chakra-ui/react";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
@@ -19,6 +12,8 @@ import IOCashDetails from "./IOCashDetails";
 import IONAVDetails from "./IONAVDetails";
 import InvestmentDocument from "./InvestmentDocument"; // Ensure this is the correct import
 import ViewIOdataHeader from "../ViewIO/ViewIOdataHeader";
+import { useParams } from "react-router-dom";
+import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";

 const schema = yup.object().shape({
  ioName: yup.string().required("IO name english is required"),
@@ -26,14 +21,12 @@ const schema = yup.object().shape({
  discription: yup.string().required("Discription in english is required"),
  discriptionArabic: yup.string().required("Discription in Arabic is required"),
  typeName: yup.string().required("Investment type in english is required"),
-  typeNameArabic: yup.string().required("Investment type in arabic is required"),
-  sponserName: yup.string().required("Sponser name is required"),
-  sponserNameArabic: yup
+  typeNameArabic: yup
    .string()
-    .required("Sponser name arabic is required"),
-    goalAmount: yup.string().required("Goal amount is required"),
-    
-
+    .required("Investment type in arabic is required"),
+  sponserName: yup.string().required("Sponser name is required"),
+  sponserNameArabic: yup.string().required("Sponser name arabic is required"),
+  goalAmount: yup.string().required("Goal amount is required"),

  holdingPeriod: yup.string().required("Sponser name is required"),
  ioStatus: yup.string().required("Investment Object name is required"),
@@ -79,6 +72,7 @@ const schema = yup.object().shape({
 });

 const CreateIO = () => {
+  const id = useParams()?.id;
  const {
    control,
    handleSubmit,
@@ -102,50 +96,52 @@ const CreateIO = () => {
    {
      label: "IO Details",
      Content: IODetails,
-      isDisabled: false,
+      isDisabled: id ? false : false ,
    },
    {
      label: "Investment documents",
      Content: InvestmentDocument,
-      isDisabled: true,
+      isDisabled: id ? false : true ,
    },
    {
      label: "Key merits",
      Content: KeyMerits,
-      isDisabled: true,
+      isDisabled: id ? false : true ,
    },
    {
      label: "IO artifacts",
      Content: IOArtifacts,
-      isDisabled: true,
+      isDisabled: id ? false : true ,
    },
    {
      label: "Investors",
      Content: Investors,
-      isDisabled: false,
+      isDisabled: id ? false : true ,
    },
    {
      label: "IO Cash Details",
      Content: IOCashDetails,
-      isDisabled: false,
+      isDisabled: id ? false : true ,
    },
    {
      label: "IO NAV Details",
      Content: IONAVDetails,
-      isDisabled: false,
+      isDisabled: id ? false : true ,
    },
  ];

  const [tabs, setTabs] = useState(initialTabsState);
  const [activeIndex, setActiveIndex] = useState(0);
-
-
+  const [isLoading, setIsLoading] = useState(true);

  const onSubmit = (data) => {
    data.preventDefault();
    enableNextTab(0);
  };

+
+
+
  return (
    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={10}>
      <Box paddingInline={"12px"} mt={2}>
@@ -157,9 +153,13 @@ const CreateIO = () => {
        </span> */}
        <ViewIOdataHeader />
      </Box>
-      <Tabs index={activeIndex} onChange={(index) => setActiveIndex(index)} mt={2}>
+      <Tabs
+        index={activeIndex}
+        onChange={(index) => setActiveIndex(index)}
+        mt={2}
+      >
        <TabList>
-          {tabs.map(({ label, isDisabled }, index) => (
+          {tabs?.map(({ label, isDisabled }, index) => (
            <Tab
              isDisabled={isDisabled}
              key={index}
@@ -177,7 +177,15 @@ const CreateIO = () => {
        <TabPanels>
          {tabs.map(({ Content }, index) => (
            <TabPanel key={index}>
-              <Content index={index} enableNextTab={enableNextTab} control={control} errors={errors} handleSubmit={handleSubmit} />
+                <Content
+                isLoading={isLoading}
+                setIsLoading={setIsLoading}
+                  index={index}
+                  enableNextTab={enableNextTab}
+                  control={control}
+                  errors={errors}
+                  handleSubmit={handleSubmit}
+                />
            </TabPanel>
          ))}
        </TabPanels>
--- a/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx
@@ -129,7 +129,7 @@ const IOArtifacts = ({enableNextTab, index}) => {
      </Text>
    ),
    Action: (
-      <Box display={"flex"} justifyContent={"space-evenly"}>
+      <Box display={"flex"} justifyContent={"center"} gap={3}>
        <Tooltip
          rounded={"sm"}
          fontSize={"xs"}
@@ -214,9 +214,9 @@ const IOArtifacts = ({enableNextTab, index}) => {
          size={"sm"}
          fontSize={"xs"}
          rounded={"sm"}
-          colorScheme="green"
+          color={'green'}
        >
-          Add
+          Add artifacts
        </Button>
        <InvestmentDocuments
          isOpen={isOpen}
--- a/src/Pages/IO_Management/CreateIO/IODetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IODetails.jsx
@@ -1,10 +1,11 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import FormInputMain from "../../../Components/FormInputMain";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useForm } from "react-hook-form";
 import * as yup from "yup";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";

 const schema = yup.object().shape({
  ioName: yup
@@ -103,10 +104,14 @@ const schema = yup.object().shape({
    ),
 });

-const IODetails = ({ enableNextTab, index }) => {
-  const { investmentType, sponser } = useContext(GlobalStateContext);
+const IODetails = ({ enableNextTab, index, isLoading, setIsLoading }) => {
+  const params = useParams();
+  const id = params?.id;
  const navigate = useNavigate();

+  const { investmentType, sponser, IODetails } = useContext(GlobalStateContext);
+  const [foundObject, setFoundObject] = useState(null);
+
  const investmentTypeOptions = investmentType.map(({ investmentName }) => {
    return {
      label: investmentName,
@@ -122,7 +127,7 @@ const IODetails = ({ enableNextTab, index }) => {
      };
    }
  );
-  
+
  const sponserNameOption = sponser.map(({ sponserName }) => {
    return {
      label: sponserName,
@@ -139,13 +144,40 @@ const IODetails = ({ enableNextTab, index }) => {

  const {
    control,
+    reset,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });

-  console.log(errors);
+  useEffect(() => {
+    const found = IODetails?.find(
+      (item) => item?.id.toString() === id?.toString()
+    );
+    setFoundObject(found);
+
+    if (found) {
+      reset({
+        ioName: found.ioName,
+        sponserName: found.sponserName,
+        ioNameArabic: found.ioNameArabic,
+        ioStatus: found.ioStatus,
+        discriptionArabic: found.discriptionArabic,
+        typeName: found.typeName,
+        discription: found.discription,
+        sponserName: found.sponserName,
+        goalAmount: found.goalAmount,
+        minInvestment: found.minInvestment,
+        maxInvestment: found.maxInvestment,
+        holdingPeriod: found.holdingPeriod,
+        expectedReturn: found.expectedReturn,
+        closingDate: found.closingDate,
+        ioStatus: found.ioStatus,
+      });
+    }
+    setIsLoading(false)
+  }, [id, IODetails, reset]);

  const formFields = [
    {
@@ -226,7 +258,7 @@ const IODetails = ({ enableNextTab, index }) => {
      placeHolder: "$00.00",
      name: "goalAmount",
      type: "number",
-      
+
      section: " ",
      width: "32.3%",
    },
@@ -298,6 +330,166 @@ const IODetails = ({ enableNextTab, index }) => {
    },
  ];

+  const formEditFields = [
+    {
+      label: "IO Name",
+      value: foundObject?.ioName,
+      name: "ioName",
+      type: "text",
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "IO Name (Arabic)",
+      name: "ioNameArabic",
+      type: "text",
+      value: foundObject?.sponserName,
+
+      arabic: true,
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "Description",
+      name: "discription",
+      value: foundObject?.ioStatus,
+      type: "textarea",
+
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "Description (Arabic)",
+      name: "discriptionArabic",
+      value: foundObject?.discriptionArabic,
+      type: "textarea",
+      arabic: true,
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "Investment Type",
+      placeHolder: "Select option",
+      value: foundObject?.typeName,
+      name: "typeName",
+      type: "select",
+
+      section: " ",
+      width: "32.3%",
+      options: investmentTypeOptions,
+    },
+    // {
+    //   label: "Sponser Name (Arabic)",
+    //   placeHolder: " ",
+    //   name: "sponserNameArabic",
+    //   type: "select",
+    //   options: sponserNameArabicOption,
+    //   arabic: true,
+
+    //   section: " ",
+    //   width: "49%",
+    // },
+    {
+      label: "Sponser Name",
+      placeHolder: "Select option",
+      name: "sponserName",
+      type: "select",
+      options: sponserNameOption,
+      value: foundObject?.sponserName,
+      section: " ",
+      width: "32.3%",
+    },
+    // {
+    //   label: "Investment Type (Arabic)",
+    //   placeHolder: " ",
+    //   name: "typeNameArabic",
+    //   type: "select",
+    //   arabic: true,
+    //   section: " ",
+    //   width: "32.3%",
+    //   options: investmentTypeArabicOptions,
+    // },
+    {
+      label: "Goal Amount",
+      placeHolder: "$00.00",
+      value: foundObject?.goalAmount,
+      name: "goalAmount",
+      type: "number",
+
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Minimum Investment Amount",
+      placeHolder: "$00.00",
+      name: "minInvestment",
+      value: foundObject?.minInvestment,
+      type: "number",
+
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Maximum Investment Amount",
+      placeHolder: "$00.00",
+      name: "maxInvestment",
+      type: "number",
+      value: foundObject?.maxInvestment,
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Holding Period",
+      name: "holdingPeriod",
+      value: foundObject?.holdingPeriod,
+      type: "number",
+      placeHolder: "1Y",
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Expected Return Estimated",
+      placeHolder: "$00.00",
+      name: "expectedReturn",
+      type: "number",
+      value: foundObject?.expectedReturn,
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Closing Date",
+      name: "closingDate",
+      type: "date",
+
+      value: foundObject?.closingDate,
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "IO status",
+      placeHolder: foundObject?.ioStatus,
+      name: "ioStatus",
+      type: "select",
+
+      section: " ",
+      width: "32.3%",
+      options: [
+        {
+          label: "Open",
+          value: "open",
+        },
+        {
+          label: "Pending",
+          value: "pending",
+        },
+        {
+          label: "Closed",
+          value: "closed",
+        },
+      ],
+    },
+  ];
+
  const groupedFields = formFields.reduce((groups, field) => {
    const { section } = field;
    if (!groups[section]) {
@@ -307,22 +499,34 @@ const IODetails = ({ enableNextTab, index }) => {
    return groups;
  }, {});

+  const groupedEditFields = formEditFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
  const onSubmit = (data) => {
    console.log(data);
    enableNextTab(index);
  };

+  console.log(id);
+
+  if (isLoading) return <FullscreenLoaders/>;
  return (
    <FormInputMain
      p={0.1}
      w={250}
      width={"23.8%"}
-      groupedFields={groupedFields}
+      groupedFields={id ? groupedEditFields : groupedFields}
      control={control}
      errors={errors}
      onSubmit={handleSubmit(onSubmit)}
      // onSubmit={onSubmit}
-      submitTitle={"Submit"}
+      submitTitle={id ? "Update":"Submit"}
    />
  );
 };
--- a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
+++ b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
@@ -216,12 +216,14 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
          onClick={onOpen}
          size={"sm"}
          // width={"44.5%"}
+          // width={"44.5%"}
          fontSize={"xs"}
          rounded={"sm"}

-          colorScheme="green"
+          // colorScheme="green"
+          color={'green'}
        >
-          Add
+          Add document
        </Button>
        <InvestmentDocuments
          isOpen={isOpen}
--- a/src/Pages/IO_Management/CreateIO/KeyMerits.jsx
+++ b/src/Pages/IO_Management/CreateIO/KeyMerits.jsx
@@ -202,9 +202,10 @@ const KeyMerits = ({enableNextTab, index}) => {
          fontSize={"xs"}
          rounded={"sm"}

-          colorScheme="green"
+          // colorScheme="green"
+          color={'green'}
        >
-          Add
+          Add key merits
        </Button>
        <InvestmentDocuments
          isOpen={isOpen}
--- a/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
@@ -42,7 +42,7 @@ const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date
 const ViewIOTable = () => {
  const navigate = useNavigate();
  const toast = useToast();
-  const { viewIO, setViewIO, slideFromRight } = useContext(GlobalStateContext);
+  const { IODetails, setIODetails, slideFromRight } = useContext(GlobalStateContext);
  const [searchTerm, setSearchTerm] = useState("");
  const [isLoading, setIsLoading] = useState(true);
  const [deleteAlert, setDeleteAlert] = useState(false);
@@ -51,7 +51,6 @@ const ViewIOTable = () => {
  const [mouseEnteredId, setMouseEnteredId] = useState("");


-  console.log(viewIO);
  useEffect(() => {
    // Simulate loading
    const timer = setTimeout(() => {
@@ -66,8 +65,8 @@ const ViewIOTable = () => {
  const tableHeadRow = [
    "Sr.no",
    "Deal ID",
-    "Deal Name",
-    "Sponsor Name",
+    "Sponser Name",
+    "Investment Type",
    "IO status",
    "Action",
  ];
@@ -86,9 +85,9 @@ const ViewIOTable = () => {
  //   }, 300);

  // ====================================================[Table Filter]================================================================
-  const filteredData = viewIO.filter((item) => {
+  const filteredData = IODetails.filter((item) => {
    // Filter by name (case insensitive)
-    const name = item.DealName;
+    const name = item.ioName;
    const searchLower = searchTerm.toLowerCase();
    const nameMatches = name.toLowerCase().includes(searchLower);

@@ -124,20 +123,20 @@ const ViewIOTable = () => {
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
-        {item.DealID}
+        {item.id}
      </Text>
    ),
-    "Deal Name": (
+    "Sponser Name": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-          {item.DealName}
+          {item.sponserName}
        </Text>
      </Box>
    ),
-    "Sponsor Name": (
+    "Investment Type": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-          {item.SponsorName}
+          {item.typeName}
        </Text>
      </Box>
    ),
@@ -145,21 +144,21 @@ const ViewIOTable = () => {
      <Box w={"auto"} isTruncated={true}>
        <Badge
          color={
-            item.IOstatus === "Open"
+            item.ioStatus === "open"
              ? "#00B69B"
-              : item.IOstatus === "Pending"
+              : item.ioStatus === "pending"
              ? "#6226EF"
              : "#EF3826"
          }
          colorScheme={
-            item.IOstatus === "Open"
+            item.ioStatus === "open"
              ? "green"
-              : item.IOstatus === "Pending"
+              : item.ioStatus === "pending"
              ? "purple"
              : "red"
          }
        >
-          {item.IOstatus}
+          {item.ioStatus}
        </Badge>
      </Box>
    ),
@@ -188,6 +187,30 @@ const ViewIOTable = () => {
          </Button>
        </Tooltip>

+
+        
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="View"
+          bg="#fff"
+          color={"green.500"}
+          placement="top"
+        >
+          <Button
+            _hover={{ color: "green.500" }}
+            // transition={"0.5s all"}
+            onClick={() => {
+              navigate(`/create-io/${item.id}`);
+            }}
+            color="green.300"
+            rounded={"sm"}
+            size={"xs"}
+          >
+            <EditIcon />
+          </Button>
+        </Tooltip>
+
        <Tooltip
          rounded={"sm"}
          fontSize={"xs"}
@@ -215,10 +238,10 @@ const ViewIOTable = () => {
  }));

  const handleDelete = () => {
-    const viewIO = viewIO.filter((viewIO) => viewIO.id !== actionId);
+    const upDatedIO = IODetails.filter((viewIO) => viewIO.id !== actionId);

    setTimeout(() => {
-      setViewIO(viewIO);
+      setIODetails(upDatedIO);
      setDeleteAlert(false);
      setIsLoading(false);
    }, 100);
@@ -251,16 +274,19 @@ const ViewIOTable = () => {
          <HStack display={"flex"} alignItems={"center"}>
            <Pagination totalItems={10} />

-            {/* <Link to={"/investment-type/add-investment"}>
+            <Link to={"/create-io"}>
              <Button
+              ps={4}
+              pe={4}
                leftIcon={<AddIcon />}
                colorScheme={"green"}
                rounded={"sm"}
                size={"sm"}
+                fontSize={'sm'}
              >
-                Add Investment
+                Create IO
              </Button>
-            </Link> */}
+            </Link>
          </HStack>
        </HStack>
      </Box>
--- a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
@@ -29,19 +29,22 @@ import ViewDistribution from "./ViewDistribution";
 import InvestmentDocument from "../CreateIO/InvestmentDocument";
 import KeyMerits from "../CreateIO/KeyMerits";
 import IOArtifacts from "../CreateIO/IOArtifacts";
-import Investors from "../CreateIO/Investors";
+import Investors from "../CreateIO/Investors"
+

 const ViewIOdata = () => {
+  const params = useParams()
+  console.log(params?.id);
  const [isEditing, setIsEditing] = useState(false);
  const navigate = useNavigate();

+
  const tabs = [
    { label: "IO Details", content: <ViewIOdetails /> },
    { label: "Investment documents", content: <InvestmentDocument /> },
    { label: "Key merits", content: <KeyMerits /> },
    { label: "IO artifacts", content: <IOArtifacts /> },
-    { label: "Investors", content: <Investors
-       /> },
+    { label: "Investors", content: <Investors /> },
    { label: "IO Cash Details", content: <ViewIOcash /> },
    { label: "IO NAV Details", content: <ViewIOnav /> },
    // { label: "Distribution", content: <ViewDistribution /> },
@@ -60,7 +63,8 @@ const ViewIOdata = () => {
      </Box>

      <Tabs mt={4}>
-        <TabList>
+        <TabList justifyContent={'space-between'} pe={4} alignItems={'center'}>
+          <Box display={'flex'} >
          {tabs.map(({ label }, index) => (
            <Tab
              disabled={true}
@@ -74,6 +78,8 @@ const ViewIOdata = () => {
              {label}
            </Tab>
          ))}
+          </Box>
+          <Button onClick={()=> navigate(`/create-io/${params?.id}`)} ps={4} pe={4} colorScheme="green" rounded={"sm"} size={'xs'}>Edit</Button>
        </TabList>

        <TabPanels>
--- a/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx
@@ -9,97 +9,98 @@ import FormInputView from "../../../Components/FormInputView";

 const ViewIOdetails = () => {
  const params = useParams();
-  const { viewIO } = useContext(GlobalStateContext);
-  console.log(viewIO);
+  const { IODetails } = useContext(GlobalStateContext);
+  console.log(IODetails);
  const { reset } = useForm(); // assuming react-hook-form

  const id = params?.id;
-  const foundObject = viewIO?.find(
+  console.log(id);
+  const foundObject = IODetails?.find(
    (item) => item?.id.toString() === id.toString()
  );

  const formFields = [
    {
      label: "IO Name (English)",
-      value: foundObject.DealName,
+      value: foundObject?.ioName,
      width: "49%",
      section: "",
    },
    {
      label: "IO Name (Arabic)",
-      value: foundObject.SponsorName,
+      value: foundObject?.ioNameArabic,
      width: "49%",
      section: "",
    },
    {
      label: "Description (English)",
-      value: foundObject.IOstatus,
+      value: foundObject?.discription,
      width: "49%",
      section: "",
    },
    {
      label: "Description (Arabic)",
-      value: foundObject.IOstatus,
+      value: foundObject?.discriptionArabic,
      width: "49%",
      section: "",
    },
    {
      label: "Investment Type (English)",
-      value: foundObject.DealName,
-      width: "49%",
-      section: "",
-    },
-    {
-      label: "Investment Type (Arabic)",
-      value: foundObject.DealID,
+      value: foundObject?.typeName,
      width: "49%",
      section: "",
    },
+    // {
+    //   label: "Investment Type (Arabic)",
+    //   value: foundObject?.typeName,
+    //   width: "49%",
+    //   section: "",
+    // },
    {
      label: "Sponser Name (English)",
-      value: foundObject.IOstatus,
+      value: foundObject?.sponserName,
      width: "49%",
      section: "",
    },
    {
      label: "Goal Amount (English)",
-      value: foundObject.IOstatus,
+      value: foundObject?.goalAmount,
      width: "49%",
      section: "",
    },
    {
      label: "Minimum Investment Amount (English)",
-      value: foundObject.IOstatus,
+      value: foundObject?.minInvestment,
      width: "32.3%",
      section: "",
    },
    {
      label: "Maximum Investment Amount (English)",
-      value: foundObject.IOstatus,
+      value: foundObject?.maxInvestment,
      width: "32.3%",
      section: "",
    },
    {
      label: "Holding Period (English)",
-      value: foundObject.IOstatus,
+      value: foundObject?.holdingPeriod,
      width: "32.3%",
      section: "",
    },
    {
      label: "Expected Return Estimated (English)",
-      value: foundObject.IOstatus,
+      value: foundObject?.expectedReturn,
      width: "32.3%",
      section: "",
    },
    {
      label: "Closing Date (English)",
-      value: foundObject.IOstatus,
+      value: foundObject?.closingDate,
      width: "32.3%",
      section: "",
    },
    {
      label: "IO Status (English)",
-      value: foundObject.IOstatus,
+      value: foundObject?.ioStatus,
      width: "32.3%",
      section: "",
    },
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -50,7 +50,8 @@ export const RouteLink = [
  { path: "/investment-type/edit-investment/:id", Component: EditInvestmentType },

  // ===============[ IO Management]===============
-  { path: "/create-io", Component: CreateIO },
+  { path: "/create-io/:id", Component: CreateIO },
+  { path: "/create-io/", Component: CreateIO },
  { path: "/view-io", Component: ViewIOTable },
  { path: "/view-io/:id", Component: ViewIOdata },