Files
tanami-admin-panel/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
YasinShaikh123 f7b06bfd19 pagination
2024-08-26 16:05:03 +05:30

126 lines
4.2 KiB
JavaScript

import {
Box,
Button,
Input,
Tab,
TabList,
TabPanel,
TabPanels,
Tabs,
Text,
useDisclosure,
} 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";
import InvestmentDocument from "../CreateIO/InvestmentDocument";
import KeyMerits from "../CreateIO/KeyMerits";
import Investors from "../CreateIO/Investors";
import EditIO from "../EditIO/EditIO";
import IOArtifacts from "../CreateIO/IOArtifacts";
import IOCashDetails from "../CreateIO/IOCashDetails";
import IONAVDetails from "../CreateIO/IONAVDetails";
import { useGetIOprepopulateDataQuery } from "../../../Services/io.service";
import UnderConstruction from "../../UnderConstruction";
import Destribution from "../CreateIO/Destribution";
const ViewIOdata = () => {
const params = useParams();
const id = params?.id;
const { data, error, isLoading } = useGetIOprepopulateDataQuery();
const { isOpen, onOpen, onClose } = useDisclosure();
const navigate = useNavigate();
const [isEditing, setIsEditing] = useState(false);
const { IODetails, setIODetails } = useContext(GlobalStateContext);
console.log(IODetails?.isInvestedAmount);
const tabs = [
{ label: "IO Details", content: <ViewIOdetails data={data?.data} /> },
{
label: "Investment documents",
content: <InvestmentDocument data={data?.data} />,
},
{ label: "Key merits", content: <KeyMerits data={data?.data} /> },
{ label: "IO artifacts", content: <IOArtifacts data={data?.data} /> },
{ label: "Investors", content: <Investors data={data?.data} /> },
// { label: "Investors", content: <UnderConstruction h={'75vh'} /> },
{ label: "IO Cash Details", content: <IOCashDetails data={data?.data} /> },
{ label: "IO NAV Details", content: <IONAVDetails data={data?.data} /> },
{
label: "Distribution to Investors",
content: <Destribution data={data?.data} />,
},
// { label: "Distribution to Investors", content: <UnderConstruction h={'75vh'} /> },
];
return (
<Box
{...OPACITY_ON_LOAD}
overflowY={"scroll"}
overflowX={"hidden"}
height={"100vh"}
pb={14}
>
<Box paddingInline={"12px"} mt={2}>
{/* <span
onClick={() => navigate(-1)}
style={{ fontSize: "15px", cursor: "pointer" }}
>
<ArrowBackIcon cursor={"pointer"} /> Back
</span> */}
<ViewIOdataHeader />
</Box>
<Tabs mt={4}>
<TabList justifyContent={"space-between"} pe={4} alignItems={"center"}>
<Box display={"flex"}>
{tabs.map(({ label }, index) => (
<Tab
px={3}
isDisabled={
index === 0 ||
index === 1 ||
index === 2 ||
index === 3 ||
index === 4
? false
: !IODetails?.isInvestedAmount
}
key={index}
fontSize={"sm"}
_selected={{
color: "#004118",
borderBottom: "2px solid #38a169",
}}
>
{label}
</Tab>
))}
</Box>
</TabList>
<TabPanels>
{tabs.map(({ content }, index) => (
<TabPanel key={index}>{content}</TabPanel>
))}
</TabPanels>
</Tabs>
</Box>
);
};
export default ViewIOdata;