tanami-admin-panel/src/Layout/DefaultLayout.jsx

import React, { useContext, useEffect, useState } from "react";
import { CgProfile } from "react-icons/cg";
import { useDispatch } from "react-redux";
import logoMiniDark from "../assets/favicon.png";
import logoMini from "../assets/logo-min.png";
import logoDark from "../assets/logo.png";
import logo from "../assets/logo2.png";

import {
  ArrowBackIcon,
  ArrowLeftIcon,
  ArrowRightIcon,
  AtSignIcon,
} from "@chakra-ui/icons";
import {
  Accordion,
  AccordionButton,
  AccordionIcon,
  AccordionItem,
  AccordionPanel,
  Alert,
  AlertIcon,
  Box,
  Button,
  Image,
  Text,
  Tooltip
} from "@chakra-ui/react";
import Cookies from "js-cookie"; // Import the Cookies library
import { GrManual } from "react-icons/gr";
import { HiOutlineChartSquareBar } from "react-icons/hi";
import { LuContact } from "react-icons/lu";
import { MdNotificationsNone, MdOutlineAddChart } from "react-icons/md";
import {
  RiBankLine,
  RiExchangeBoxLine,
  RiFileUserLine,
  RiMoneyDollarBoxLine,
} from "react-icons/ri";
import {
  TbListDetails,
  TbReportMoney,
  TbTransactionDollar
} from "react-icons/tb";
import { VscSymbolClass } from "react-icons/vsc";
import {
  Link,
  NavLink,
  Route,
  Routes,
  useLocation,
  useNavigate,
} from "react-router-dom";
import HeaderMain from "../Components/HeaderMain";
import GlobalStateContext from "../Contexts/GlobalStateContext";
import CreateRequest from "../Pages/Fawateer/CreateRequest";
import ApproveHistory from "../Pages/FawateerChecker/ApproveHistory/ApproveHistoryChecker";
import ApproveHistoryMaker from "../Pages/FawateerChecker/ApproveHistory/ApproveHistoryMaker";
import ApproveRequest from "../Pages/FawateerChecker/ApproveRequest/ApproveRequest";
import NotFound from "../Pages/NotFound";
import SplashScreen from "../Pages/SplashScreen";
import { nav } from "../Routes/Nav";
import { RouteLink } from "../Routes/Routes";
import { useProfileQuery } from "../Services/io.service";
import { useLogoutMutation } from "../Services/token.serivce";

const DashboardLayout = ({ isOnline }) => {
  const navigate = useNavigate();
  const location = useLocation();
  const path = location.pathname;
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const [openDrawerClick, setOpenDrawerClick] = useState(true);
  const {
    setIsAuthenticate,
    colorMode,
    toggleColorMode,
    setSlideFormRight,
    slideFromRight,
  } = useContext(GlobalStateContext);
  const [isSplashVisible, setSplashVisible] = useState(true);
  const [openIndex, setOpenIndex] = useState(null);

  const { data, refetch } = useProfileQuery();

  // useEffect(() => {
  //   if (
  //     !localStorage.getItem("accessToken") &&
  //     !localStorage.getItem("refreshToken")
  //   ) {
  //     logOutHandler();
  //     return navigate("/login");
  //   }
  // }, []);

  useEffect(() => {
    const savedIndex = localStorage.getItem("openAccordionIndex");
    if (savedIndex !== null) {
      setOpenIndex(parseInt(savedIndex));
    }
  }, []);

  const handleAccordionChange = (index) => {
    const newIndex = openIndex === index ? null : index;
    setOpenIndex(newIndex);
    localStorage.setItem("openAccordionIndex", newIndex);
  };

  useEffect(() => {
    // Set a timer to hide the splash screen after 3 seconds
    const timer = setTimeout(() => {
      setSplashVisible(false);
    }, 1000); // 3000ms = 3 seconds
    refetch();
    // Cleanup the timer
    return () => clearTimeout(timer);
  }, []);

  const openDrawerOnClick = () => {
    setOpenDrawerClick(!openDrawerClick);
  };

  const [logout] = useLogoutMutation();

  const logOutHandler = async () => {
    // dispach(loginUser(false));
    setIsAuthenticate(false);
    Cookies.remove("isAuthenticated");
    try {
      await logout();
      localStorage.clear();
      navigate("/login");
    } catch (error) {
      console.log(error);
    }
  };

  // // Function to get the title based on the route
  const getTitle = () => {
    switch (true) {
      case "/":
        return "👋🏻 Hi, Admin";
      case path.startsWith("/sponser"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0" /> Sponsor
          </span>
        );
      case path.startsWith("/email"):
        return (
          <span className="d-flex align-items-end gap-2">
            <AtSignIcon className="h4 m-0" /> Email Notification
          </span>
        );
      case path.startsWith("/investment-type"):
        return (
          <span className="d-flex align-items-end gap-2">
            <VscSymbolClass className="h4 m-0" /> Investment Type
          </span>
        );
      case path.startsWith("/profile"):
        return (
          <span className="d-flex align-items-end gap-2">
            <CgProfile className="h4 m-0" /> Profile
          </span>
        );
      case path.startsWith("/exchange-rate"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiExchangeBoxLine className="h4 m-0 fw-normal" />
            Exchange rate
          </span>
        );
      case path.startsWith("/create-io"):
        if (/^\/create-io\/[A-Za-z0-9_-]+$/.test(path)) {
          return (
            <span className="d-flex align-items-end gap-2">
              <MdOutlineAddChart className="h4 m-0 fw-normal" />
              Edit IO
            </span>
          );
        }
        return (
          <span className="d-flex align-items-end gap-2">
            <MdOutlineAddChart className="h4 m-0 fw-normal" />
            Create IO
          </span>
        );
      case path.startsWith("/view-io"):
        return (
          <span className="d-flex align-items-end gap-2">
            <HiOutlineChartSquareBar className="h4 m-0 fw-normal" />
            View IO
          </span>
        );
      case path.startsWith("/investor-details"):
        return (
          <span className="d-flex align-items-end gap-2">
            <TbListDetails className="h4 m-0 fw-normal" />
            Investor Details
          </span>
        );
      case path.startsWith("/investor-transactions"):
        return (
          <span className="d-flex align-items-end gap-2">
            <TbTransactionDollar className="h4 m-0 fw-normal" />
            Investor Transactions
          </span>
        );

      case path.startsWith("/deposit-request"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
            Deposit Pending Request
          </span>
        );
      case path.startsWith("/deposit-history"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiExchangeBoxLine className="h4 m-0 fw-normal" />
            Deposite Request
          </span>
        );

      case path.startsWith("/fawateer"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
            Fawateer Deposit
          </span>
        );
      case path.startsWith("/fawateer-history"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
            Fawateer Deposit
          </span>
        );

      case path.startsWith("/withdraw-request"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
            Withdrawal pending request
          </span>
        );
      case path.startsWith("/withdraw-history"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiExchangeBoxLine className="h4 m-0 fw-normal" />
            Withdrawal request
          </span>
        );
      case path.startsWith("/investor-request"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
            Investor pending request
          </span>
        );
      case path.startsWith("/investor-history"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiExchangeBoxLine className="h4 m-0 fw-normal" />
            Investor request
          </span>
        );
      case path.startsWith("/deletion-request"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
            Deletion pending request
          </span>
        );
      case path.startsWith("/deletion-history"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiExchangeBoxLine className="h4 m-0 fw-normal" />
            Deletion request
          </span>
        );
      case path.startsWith("/bank-investor"):
        return (
          <span className="d-flex align-items-end gap-2">
            <TbReportMoney className="h4 m-0 fw-normal" />
            Ban / Unban Investor
          </span>
        );
      case path.startsWith("/academy"):
        return (
          <span className="d-flex align-items-end gap-2">
            <GrManual className="h4 m-0 fw-normal" />
            Academy
          </span>
        );
      case path.startsWith("/notification"):
        return (
          <span className="d-flex align-items-end gap-2">
            <MdNotificationsNone className="h4 m-0 fw-normal" />
            Push Notification 
          </span>
        );
      case path.startsWith("/contact"):
        return (
          <span className="d-flex align-items-end gap-2">
            <LuContact className="h4 m-0 fw-normal" />
            Contact Details
          </span>
        );
      case path.startsWith("/users"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiFileUserLine className="h4 m-0 fw-normal" />
            Users
          </span>
        );
      case path.startsWith("/bank-details"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiBankLine className="h4 m-0 fw-normal" />
            Bank Details
          </span>
        );
      case path.startsWith("/deletion-request"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
            Deletion pending request
          </span>
        );
      case path.startsWith("/deletion-history"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiExchangeBoxLine className="h4 m-0 fw-normal" />
            Deletion request
          </span>
        );
      case path.startsWith("/deletion-request"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
            Deletion pending request
          </span>
        );
      case path.startsWith("/deletion-history"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiExchangeBoxLine className="h4 m-0 fw-normal" />
            Deletion request
          </span>
        );
        case path.startsWith("/subadmin"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
            Manage SubAdmin
          </span>
        );

      default:
        if (path.startsWith("/community/view/")) {
          return (
            <span className="d-flex align-items-center">
              <Link to={"/community/"}>
                <ArrowBackIcon className="me-2  fs-3 link p-1 rounded-1" />
              </Link>
              Community
            </span>
          );
        } else if (path.startsWith("/community/edit/")) {
          return (
            <span className="d-flex align-items-center">
              <Link to={"/community/"}>
                <ArrowBackIcon className="me-2 fs-3 link p-1 rounded-1" />
              </Link>
              Community
            </span>
          );
        }
        return "Tanami";
    }
  };

  if (isSplashVisible) {
    return <SplashScreen />;
  }

  const filteredNav = nav.map((item) => {
    if (item.submenu) {
      return {
        ...item,
        submenu: item.submenu.filter(
          (submenuItem) =>
            !(!data?.data?.superAdmin && submenuItem.title === "Sub Admin")
        ),
      };
    }
    return item;
  });

  return (
    <Box
      style={{
        height: "100vh",
        width: "100vw",
        position: "relative",
        overflow: "hidden",
      }}
      className="d-flex"
      pe={0.5}
    >
      <Alert
        transition={"0.5s"}
        h={53}
        transform={isOnline ? "translateY(-100px)" : "translateY(0px)"}
        position={"absolute"}
        zIndex={999}
        status="info"
        variant="solid"
        bgGradient="linear(to-r, red.500, yellow.500, red.500)"
        // bgGradient='linear(to-r, #1EBCA3, #22CAB3)'
        color={"white"}
        fontWeight={600}
        fontSize={"md"}
      >
        <AlertIcon color={"white"} />
        No Internet !
      </Alert>

      {/* <Box
        bottom={4}
        right={!slideFromRight ? 4 : "auto"}
        left={slideFromRight ? 4 : "auto"}
        backgroundColor={"#000"}
        rounded={"full"}
        p={2}
        w={8}
        h={8}
        display={"flex"}
        justifyContent={"center"}
        alignItems={"center"}
        color={"#004118"}
        fontWeight={"800"}
        cursor={"pointer"}
        position={"absolute"}
        transition={"0.5s"}
        boxShadow={"md"}
        onClick={() => setSlideFormRight(!slideFromRight)}
        _hover={{
          opacity: 1,
        }}
        zIndex={999}
      >
        <IoMdSwap />
      </Box> */}

      {slideFromRight ? null : (
        <aside
          className="h-100  position-relative sideBar"
          // onMouseOver={() => setIsDrawerOpen(true)}
          // onMouseLeave={() => setIsDrawerOpen(false)}
          style={{
            width: isDrawerOpen || openDrawerClick ? 230 : 74,
            transition: "width 0.3s ease-in-out", // Smooth transition for width change
            // overflow: "hidden",
            backgroundColor: "#0041180A",
            position: "relative",
            // backgroundColor: "#002F0F",
          }}
        >
          <div
            className={`d-flex  ${
              isDrawerOpen || openDrawerClick
                ? "justify-content-start"
                : "justify-content-center"
            }  p-3 pt-3 pb-3 position-relative `}
            height={"10%"}
          >
            {isDrawerOpen || openDrawerClick ? (
              <Image
                style={{
                  width: 110,
                }}
                src={colorMode === "light" ? logo : logoDark}
                alt="Logo"
                onClick={() => navigate("/")}
                cursor={"pointer"}
              />
            ) : (
              <Image
                style={{
                  width: 30,
                }}
                src={colorMode === "light" ? logoMini : logoMiniDark}
                alt="Logo"
                onClick={() => navigate("/")}
                cursor={"pointer"}
              />
            )}
          </div>

          <Box
            className="ps-2 scroll-bar pe-1 pt-3"
            style={{
              height: "90%",
              overflowY: "scroll",
              overflowX: "hidden",
              paddingBottom: "5rem",
            }}
          >
            <Accordion
              m={0}
              allowToggle
              defaultIndex={[0]}
              index={openIndex}
              onChange={handleAccordionChange}
            >
              {filteredNav.map(({ title, type, Icon, submenu, path }, index) => {
                if (type === "accordion") {
                  return (
                    <AccordionItem key={index} border={"none"}>
                      <Tooltip
                        isDisabled={isDrawerOpen || openDrawerClick}
                        hasArrow
                        bg={"#fff"}
                        fontSize={"xs"}
                        label={title}
                        placement="top-start"
                        color={"blue.800"}
                      >
                        <AccordionButton
                          style={{ height: "auto" }}
                          className={`${
                            isDrawerOpen || openDrawerClick
                              ? "p-2 web-text-medium ps-3 justify-content-between"
                              : "p-2 ps-1 web-text-xlarge justify-content-center"
                          } rounded-1 link d-flex align-items-center gap-2 w-100 mb-1`}
                        >
                          <Box
                            as="span"
                            display={"flex"}
                            gap={2}
                            alignItems={"center"}
                          >
                            {/* {Icon && title === "Admin" ? <Image w={15} src={shield} /> : <Icon className={`web-text-large`} />} */}
                            {Icon && (
                              <Icon
                                fontSize={title === "Admin" ? "18px" : "15px"}
                              />
                            )}

                            <Text
                              as={"span"}
                              display={
                                isDrawerOpen || openDrawerClick
                                  ? "flex"
                                  : "none"
                              }
                              alignItems="center"
                              overflow="hidden"
                              textAlign={"left"}
                            >
                              {title}
                            </Text>
                          </Box>
                          <AccordionIcon />
                        </AccordionButton>
                      </Tooltip>
                      <AccordionPanel
                        p={0}
                        pb={1}
                        display={"flex"}
                        flexDirection={"column"}
                        gap={1}
                      >
                        {submenu?.map(
                          (
                            { title: subMenuTitle, path: link, icon: SubIcon },
                            i
                          ) => (
                            <Tooltip
                              isDisabled={isDrawerOpen || openDrawerClick}
                              hasArrow
                              bg={"#fff"}
                              fontSize={"xs"}
                              label={subMenuTitle}
                              placement="right"
                              color={"blue.800"}
                            >
                              <Box
                                key={i}
                                style={{ height: "auto", position: "relative" }}
                                className={`${
                                  isDrawerOpen || openDrawerClick
                                    ? " web-text-medium ps-4"
                                    : " web-text-xlarge  justify-content-center"
                                }  d-flex align-items-center  p-0`}
                              >
                                <Box
                                  backgroundColor={"gray.300"}
                                  style={{
                                    position: "absolute",
                                    top: 0,
                                    width: 2,
                                    left: 22,
                                    height:
                                      i === submenu?.length - 1
                                        ? "55%"
                                        : "120%",
                                    borderRadius: "0 0 10px 10px",
                                  }}
                                />
                                <Box
                                  backgroundColor={"gray.300"}
                                  style={{
                                    position: "absolute",
                                    width: 10,
                                    left: 22,
                                    height: 2,
                                  }}
                                />

                                <NavLink
                                  className={`${
                                    isDrawerOpen || openDrawerClick
                                      ? "p-2 ps-1 ms-2 web-text-medium "
                                      : "p-2 ps-0 ms-0 zindex-3 ms-4 web-text-xlarge justify-content-center"
                                  } rounded-1 link d-flex align-items-center gap-2 w-100 `}
                                  to={link}
                                >
                                  {SubIcon && (
                                    <SubIcon
                                      className="web-text-large ms-2"
                                      style={{ zIndex: 111 }}
                                    />
                                  )}
                                  <Text
                                    as={"span"}
                                    display={
                                      isDrawerOpen || openDrawerClick
                                        ? "flex"
                                        : "none"
                                    }
                                    alignItems="center"
                                    overflow="hidden"
                                  >
                                    {subMenuTitle === "Aprover Request"
                                      ? data?.data?.role === "Maker"
                                        ? "Create Request"
                                        : "Aprover Request"
                                      : subMenuTitle}
                                  </Text>
                                </NavLink>
                              </Box>
                            </Tooltip>
                          )
                        )}
                      </AccordionPanel>
                    </AccordionItem>
                  );
                } else if (type === "title") {
                  return (
                    <Text
                      as={"span"}
                      key={index}
                      className="web-text-xxsmall fw-600  text-secondary fw-bold"
                    >
                      {title}
                    </Text>
                  );
                } else if (type === "single") {
                  return (
                    <Tooltip
                      hasArrow
                      bg={"#fff"}
                      fontSize={"xs"}
                      label={title}
                      placement="top-start"
                      color={"blue.800"}
                    >
                      <NavLink
                        key={index}
                        style={{ height: "auto", position: "relative" }}
                        className={`${
                          isDrawerOpen || openDrawerClick
                            ? "p-2 web-text-medium"
                            : "p-2 ps-0 web-text-xlarge justify-content-start"
                        } rounded-1 link d-flex align-items-center gap-2 w-100`}
                        to={path}
                      >
                        {Icon && <Icon className="web-text-large ms-2" />}
                        <Text
                          as={"span"}
                          display={
                            isDrawerOpen || openDrawerClick ? "flex" : "none"
                          }
                          alignItems="center"
                          overflow="hidden"
                        >
                          {title}
                        </Text>
                      </NavLink>
                    </Tooltip>
                  );
                } else {
                  return null;
                }
              })}
            </Accordion>
          </Box>

          <Button
            colorScheme={"forestGreen"}
            rounded={"lg"}
            // onMouseOver={() => setIsDrawerOpen(true)}
            // onMouseLeave={() => setIsDrawerOpen(false)}
            onClick={openDrawerOnClick}
            style={{
              width: 18,
              height: 26,
              position: "absolute",
              right: -19,
              bottom: 28,
              zIndex: 99,
            }}
          >
            {isDrawerOpen || openDrawerClick ? (
              <ArrowLeftIcon className="web-text-small" />
            ) : (
              <ArrowRightIcon className="web-text-small " />
            )}
          </Button>
          {/* <Text textAlign={'center'} fontWeight={500} fontSize={'xs'} color={"gray.600"}>{getCountdownTimer(localStorage.getItem('accessTokenExp'))}</Text> */}
        </aside>
      )}

      <main
        className={`h-100   ${
          slideFromRight ? "pe-3" : "ps-3"
        } d-flex flex-column gap-0`}
        style={{
          width: `calc(100% - ${isDrawerOpen || openDrawerClick ? 230 : 74}px)`,
          transition: "width 0.3s ease-in-out",
        }}
      >
        {/* <header className="p-2 ps-0 pt-3 fw-400  border-bottom">
          <span className="fs-5">{getTitle()}</span>
        </header> */}

        <HeaderMain
          data={data}
          slideDirecttion={slideFromRight}
          logOutHandler={logOutHandler}
          icon
          title={getTitle()}
        />

        {/* <CustomBreadcrumb /> */}

        <AppContent data={data} />
      </main>
    </Box>
  );
};

export default DashboardLayout;

const AppContent = ({ data }) => {
  return (
    <Routes>
      {RouteLink.map(({ path, Component }, index) => (
        <Route key={index} path={path} element={<Component />} />
      ))}

      <Route
        path="/fawateer"
        element={
          data?.data?.role === "Maker" ? <CreateRequest /> : <ApproveRequest />
        }
      />
      <Route
        path="/fawateer-history"
        element={
          data?.data?.role === "Maker" ? (
            <ApproveHistoryMaker />
          ) : (
            <ApproveHistory />
          )
        }
      />

      <Route path="*" element={<NotFound />} />
    </Routes>
  );
};