tanami-admin-panel/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx

// import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
// import React from "react";
// import Approved from "./Approved";
// import Pending from "./Pending";
// import Rejected from "./Rejected";

// const IONAVDetails = () => {
//   return (
//     <Tabs>
//       <TabList>
//         <Tab
//           fontSize={"sm"}
//           _selected={{
//             color: "#004118",
//             borderBottom: "2px solid #38a169",
//           }}
//         >
//           Approved
//         </Tab>
//         <Tab
//           fontSize={"sm"}
//           _selected={{
//             color: "#004118",
//             borderBottom: "2px solid #38a169",
//           }}
//         >
//           Pending
//         </Tab>
//         <Tab
//           fontSize={"sm"}
//           _selected={{
//             color: "#004118",
//             borderBottom: "2px solid #38a169",
//           }}
//         >
//           Rejected
//         </Tab>
//       </TabList>
//       <TabPanels>
//         <TabPanel>
//           <Approved />
//         </TabPanel>
//         <TabPanel>
//           <Pending />
//         </TabPanel>
//         <TabPanel>
//           <Rejected />
//         </TabPanel>
//       </TabPanels>
//     </Tabs>
//   );
// };

// export default IONAVDetails;

import {
  Badge,
  Box,
  Button,
  Tab,
  TabList,
  TabPanel,
  TabPanels,
  Tabs,
  useDisclosure,
  useToast,
} from "@chakra-ui/react";
import React, { useContext, useRef } from "react";
import Approved from "./Approved";
import Pending from "./Pending";
import Rejected from "./Rejected";
import { AddIcon } from "@chakra-ui/icons";
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
import ToastBox from "../../../../Components/ToastBox";
import { useParams } from "react-router-dom";
import AddNavDetails from "./AddNavDetails";
import { useUpdateIOCaseMutation } from "../../../../Services/io.service";

const IONAVDetails = () => {
  const params = useParams();
  const toast = useToast();
  const id = params?.id;
  const { IODetails } = useContext(GlobalStateContext);
  const { isOpen, onOpen, onClose } = useDisclosure();
  const firstField = useRef();

  const [updateIOCase] = useUpdateIOCaseMutation();

  const handleAdd = async () => {
    try {
      const res = await updateIOCase(id);
      if (res?.data) {
        // toast({
        //   render: () => (
        //     <ToastBox status={"success"} message={res?.data?.message} />
        //   ),
        // });
        // setIsLoading(false);
        onOpen();
      } else if (res?.error) {
        toast({
          render: () => (
            <ToastBox status={"error"} message={res?.error?.data?.message} />
          ),
        });
        setIsLoading(false);
      }
    } catch (error) {}
  };

  return (
    <Box>
      <Tabs variant="unstyled">
        <Box
          display={"flex"}
          justifyContent={"space-between"}
          alignItems={"center"}
          borderBottom={"1px solid #ccc"}
        >
          <TabList>
            <Tab
              fontSize={"sm"}
              _selected={{
                color: "#004118",
                borderBottom: "2px solid #38a169",
              }}
            >
              Approved
            </Tab>
            <Tab
              fontSize={"sm"}
              _selected={{
                color: "#004118",
                borderBottom: "2px solid #38a169",
              }}
            >
              Pending
              {IODetails?.ioNAVStatusHistory?.Pending.length > 0 && (
                <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
                  {IODetails?.ioNAVStatusHistory?.Pending.length || 0}
                </Badge>
              )}
            </Tab>
            <Tab
              fontSize={"sm"}
              _selected={{
                color: "#004118",
                borderBottom: "2px solid #38a169",
              }}
            >
              Rejected
            </Tab>
          </TabList>
          {IODetails?.isInvestedAmount
            ? localStorage?.getItem("role") === "Maker" && (
                <Button
                  onClick={handleAdd}
                  leftIcon={<AddIcon />}
                  colorScheme="forestGreen"
                  size={"sm"}
                  rounded={"sm"}
                  fontSize={"xs"}
                >
                  Add
                </Button>
              )
            : null}
        </Box>
        <TabPanels>
          <TabPanel>
            <Approved />
          </TabPanel>
          <TabPanel>
            <Pending />
          </TabPanel>
          <TabPanel>
            <Rejected />
          </TabPanel>
        </TabPanels>
      </Tabs>
      <AddNavDetails
        isOpen={isOpen}
        onClose={onClose}
        firstField={firstField}
      />
    </Box>
  );
};

export default IONAVDetails;