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

src/Pages/IO_Management/ViewIOdata.jsx

@@ -1,4 +1,14 @@
-import { Box } from "@chakra-ui/react";
+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";
@@ -6,6 +16,11 @@ 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();
@@ -16,10 +31,9 @@ const ViewIOdata = () => {
 
 
   const id = params?.id;
-  const foundObject = viewIO.find((item) =>item?.id.toString() === id.toString());
-
-  
-  console.log(foundObject);
+  const foundObject = viewIO.find(
+    (item) => item?.id.toString() === id.toString()
+  );
 
   if (!foundObject) {
     return <Box>Loading...</Box>;
@@ -27,16 +41,88 @@ const ViewIOdata = () => {
 
   const formFields = [
     {
-      label: "Deal ID",
-      value: foundObject.DealID,
+      label: "IO Name (English)",
+      value: foundObject.DealName,
+      width: "49%",
+      section: "",
     },
     {
-      label: "Sponsor name",
+      label: "IO Name (Arabic)",
       value: foundObject.SponsorName,
+      width: "49%",
+      section: "",
     },
     {
-      label: "IO status",
+      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: "",
     },
   ];
 
@@ -51,14 +137,87 @@ const ViewIOdata = () => {
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
-      <span
-        onClick={() => navigate(-1)}
-        style={{ fontSize: "15px", cursor: "pointer" }}
-      >
-        <ArrowBackIcon cursor={"pointer"} /> Back
-      </span>
-      <FormInputView groupedFields={groupedFields} />
-      
+      <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>
   );
 };

src/Pages/IO_Management/ViewIOdataHeader.jsx

@@ -0,0 +1,41 @@
+import { Box, Image, Text } from "@chakra-ui/react";
+import header from "../../../src/assets/IOheader.png";
+
+const ViewIOdataHeader = () => {
+  return (
+    <Box
+      display={"flex"}
+      alignItems={"center"}
+      justifyContent={"space-between"}
+      bg={"#caf5d8"}
+      paddingRight={"25px"}
+      borderRadius={"10px"}
+    >
+      <Box>
+        <Image src={header} />
+      </Box>
+      <Box fontSize={"sm"} fontWeight={"500"}>
+        <Text>KKR Private Equity Fund (K-Prime)</Text>
+        <Text>sponsor name: KKR</Text>
+      </Box>
+      <Box fontSize={"sm"}>
+        <Text>IO Status</Text>
+        <Text fontWeight={"500"}>Open</Text>
+      </Box>
+      <Box fontSize={"sm"}>
+        <Text>IO MV NAV</Text>
+        <Text fontWeight={"500"}>$1,092,500</Text>
+      </Box>
+      <Box fontSize={"sm"}>
+        <Text>IO cash</Text>
+        <Text fontWeight={"500"}>$48,000</Text>
+      </Box>
+      <Box fontSize={"sm"}>
+        <Text>IO NAV</Text>
+        <Text fontWeight={"500"}>$1,140,500</Text>
+      </Box>
+    </Box>
+  );
+};
+
+export default ViewIOdataHeader;