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

import {
  Badge,
  Box,
  Button,
  Tab,
  TabList,
  TabPanel,
  TabPanels,
  Tabs,
  useDisclosure,
  useToast,
} from "@chakra-ui/react";
import React, { useContext, useRef, useState } 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 AddCaseDetails from "./AddCaseDetails";
import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
import ToastBox from "../../../../Components/ToastBox";
import { useParams } from "react-router-dom";

const IOCashDetails = () => {
  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 [activeTab, setActiveTab] = useState(0);

  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
        index={activeTab}
        onChange={(index) => setActiveTab(index)}
        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?.ioCashStatusHistory?.Pending.length > 0 && (
                <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
                  {IODetails?.ioCashStatusHistory?.Pending.length !== 0 && IODetails?.ioCashStatusHistory?.Pending.length}
                </Badge>
              )}
              {/* <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
                {IODetails?.ioCashStatusHistory?.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>
      <AddCaseDetails
        setActiveTab={setActiveTab}
        isOpen={isOpen}
        onClose={onClose}
        firstField={firstField}
      />
    </Box>
  );
};

export default IOCashDetails;