150 lines
4.1 KiB
JavaScript
150 lines
4.1 KiB
JavaScript
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 { useForm } from "react-hook-form";
|
|
import { yupResolver } from "@hookform/resolvers/yup";
|
|
import * as yup from "yup";
|
|
import IODetails from "./IODetails";
|
|
import KeyMerits from "./KeyMerits";
|
|
import IOArtifacts from "./IOArtifacts";
|
|
import Investors from "./Investors";
|
|
// import IOCashDetails from "./IOCashDetailsold";
|
|
// import IONAVDetails from "./IONAVDetailsOld";
|
|
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";
|
|
import { useGetIOprepopulateDataQuery } from "../../../Services/io.service";
|
|
import UnderConstruction from "../../UnderConstruction";
|
|
import Destribution from "./Destribution";
|
|
import IOCashDetails from "./IOCashDetails/IOCashDetails";
|
|
import IONAVDetails from "./IONAVDetails/IONAVDetails";
|
|
import IOTransaction from "./IOTransaction/IOTransaction";
|
|
|
|
const CreateIO = () => {
|
|
const id = useParams()?.id;
|
|
const { data, error, isLoading } = useGetIOprepopulateDataQuery();
|
|
|
|
const enableNextTab = (index) => {
|
|
setTabs((prevTabs) => {
|
|
const newTabs = [...prevTabs];
|
|
if (index < newTabs.length - 1) {
|
|
newTabs[index + 1].isDisabled = false;
|
|
setActiveIndex(index + 1); // Switch to the next tab
|
|
}
|
|
return newTabs;
|
|
});
|
|
};
|
|
|
|
const initialTabsState = [
|
|
{
|
|
label: "IO Details",
|
|
Content: IODetails,
|
|
isDisabled: id ? false : false,
|
|
},
|
|
{
|
|
label: "Investment documents",
|
|
Content: InvestmentDocument,
|
|
isDisabled: id ? true : true,
|
|
},
|
|
{
|
|
label: "Key merits",
|
|
Content: KeyMerits,
|
|
isDisabled: id ? true : true,
|
|
},
|
|
{
|
|
label: "IO artifacts",
|
|
Content: IOArtifacts,
|
|
isDisabled: id ? true : true,
|
|
},
|
|
{
|
|
label: "Investors",
|
|
Content: Investors,
|
|
// Content: UnderConstruction,
|
|
isDisabled: id ? true : true,
|
|
},
|
|
{
|
|
label: "IO Cash Detail",
|
|
Content: IOCashDetails,
|
|
isDisabled: id ? true : true,
|
|
},
|
|
{
|
|
label: "IO NAV Details",
|
|
Content: IONAVDetails,
|
|
isDisabled: id ? true : true,
|
|
},
|
|
{
|
|
label: "Distribution to Investors",
|
|
Content: Destribution,
|
|
isDisabled: id ? true : true,
|
|
},
|
|
{
|
|
label: "IO Transaction",
|
|
Content: IOTransaction,
|
|
isDisabled: id ? true : true,
|
|
},
|
|
];
|
|
|
|
const [tabs, setTabs] = useState(initialTabsState);
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
|
|
return isLoading ? (
|
|
<FullscreenLoaders />
|
|
) : (
|
|
<Box
|
|
{...OPACITY_ON_LOAD}
|
|
w={"100%"}
|
|
overflowY={"scroll"}
|
|
overflowX={"hidden"}
|
|
height={"100vh"}
|
|
pb={10}
|
|
>
|
|
{id && <Box
|
|
ps={1}
|
|
pe={2} mt={2}>
|
|
{/* <span
|
|
onClick={() => navigate(-1)}
|
|
style={{ fontSize: "15px", cursor: "pointer" }}
|
|
>
|
|
<ArrowBackIcon cursor={"pointer"} /> Back
|
|
</span> */}
|
|
<ViewIOdataHeader isLoading={isLoading} data={data?.data} />
|
|
</Box>}
|
|
<Tabs
|
|
index={activeIndex}
|
|
onChange={(index) => setActiveIndex(index)}
|
|
mt={2}
|
|
ps={1}
|
|
pe={2}
|
|
>
|
|
<TabList>
|
|
{tabs?.map(({ label, isDisabled }, index) => (
|
|
<Tab
|
|
isDisabled={isDisabled}
|
|
key={index}
|
|
fontSize={"xs"}
|
|
fontWeight={500}
|
|
_selected={{
|
|
color: "#004118",
|
|
borderBottom: "2px solid #38a169",
|
|
}}
|
|
>
|
|
{label}
|
|
</Tab>
|
|
))}
|
|
</TabList>
|
|
|
|
<TabPanels>
|
|
{tabs.map(({ Content }, index) => (
|
|
<TabPanel key={index}>
|
|
<Content index={index} enableNextTab={enableNextTab} data={data?.data} />
|
|
</TabPanel>
|
|
))}
|
|
</TabPanels>
|
|
</Tabs>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default CreateIO;
|