Android_Retail/src/Pages/DashBoard/RetailDashboard.jsx

import React, { useCallback, useEffect, useRef, useState } from 'react';
import '../../Styles/DashBoard/RetailDashBoard.scss';
import GraphChart from './Chart/GraphChart';
import { DatePicker, Space, Tooltip } from 'antd';
import dayjs from 'dayjs';
import { IoMdRefresh } from 'react-icons/io';
import { CiShop } from 'react-icons/ci';
import { FiMenu } from 'react-icons/fi';
import PozoMind from '../../Images/pozologowhite.svg';
import { useNavigate, useOutletContext } from 'react-router-dom';
import CalendarDropdown from '../../Components/CalendarDropdown';
import { MdKeyboardArrowDown } from 'react-icons/md';
import { IoMdNotificationsOutline } from 'react-icons/io';
import {
  getdashboard,
  getdashboarddate,
  getpreOrderDashBoard,
  getSalesHdr,
  getTopSellingCustomers,
} from '../../Features/RetailDashboard/Dashboard.js';
import { FaTimesCircle } from 'react-icons/fa';
import sandClock from '../../Images/sandClock.png';
import {
  FeatureAddon,
  getTemplate,
  GlobalPricingAppPricingName,
  StoredSessionData,
} from '../../Features/ThemeChange/ThemeChange.js';
import {
  getAllCustomerPendingBalance,
  getAppSubscriptionDate,
  getPreferenceData,
} from '../../Features/BookingScreen/BookingData/BookingData.js';
import {
  clearSession,
  dateFormatChange,
  encryptedValuesUrlFun,
  ExtractDateFormate,
  getSession,
} from '../../Services/Others';
import { shallowEqual, useDispatch } from 'react-redux';
import { useSelector } from 'react-redux';
import {
  getAllprodIds,
  getExpireProductsList,
  getLowStockAlertProductsList,
  getTopSellingProduct,
} from '../../Features/ProductPage/ProductPage.js';
import {
  ApplicationPreferences,
  checkSession,
  GenerateLogout,
  getCompBranchData,
  getEmpAccesData,
  GLobalSadminUserData,
  GlobalSelectedBranchId,
  PostLoginSuser,
  PUTLoginuser,
} from '../../Features/BrachLogin/BranchLogin.js';
import { getPurchasedAppDetails } from '../../Features/BookingScreen/Pricing/Pricing.js';
import Add from '../../Images/dashboard/Add.png';
import AddPurchase from '../../Images/dashboard/AddPurchase.png';
import invoice from '../../Images/dashboard/invoice.png';
import user from '../../Images/dashboard/user.jpg';
import report from '../../Images/dashboard/report.png';
import Calendar from '../../Components/Calendar/Calendar';
import { PiSignOut } from 'react-icons/pi';
import BSNavBarUserInfo from '../BookingScreen/Components/BSNavbar/BSNavBarUserInfo';
import { DefaultModal } from '../../Components/Modal/DefaultModal';

import { RadioGrpButton } from '../../Components/Forms/RadioGroup.jsx';
import { DropDowns } from '../../Components/Forms/DropDown.jsx';
import {
  ChangeRedirectStatus,
  getEmpAccess,
  GlobalRedirectStatus,
} from '../../Features/AppPage/CenterPage.js';
import { UserDataBasedOnBranchId } from '../../Features/Reports/Reports.js';
import { gettableData } from '../../Features/PreferenceMaster/PreferenceMaster.js';
import Loader from '../../Components/Loader/Loader.jsx';
import { getUserProfile } from '../../Features/UserAccount/userData.js';
import TopSellingProductsChart from './TopSellingProductsChart.jsx';
import { Messages } from '../../Components/Notifications/Messages.jsx';

const commonUrl = import.meta.env.ENV_COMMON_BASE_URL;
const subDirectory = import.meta.env.ENV_BASE_URL;
const RetailDashboard = () => {
  const today = new Date();
  const year = today.getFullYear();
  const month = today.getMonth();

  const formatDate = (date) =>
    `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;

  const intialFromDate = `${year}-${String(month + 1).padStart(2, '0')}-01`;
  const intialToDate = formatDate(today);
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { RangePicker } = DatePicker;
  const [selectedTab, setSelectedTab] = useState('dashboard');
  const tabs = [
    { value: 'dashboard', label: 'Dashboard' },
    { value: 'top-selling-products', label: 'Top Selling Products' },
  ];
  const { setCollapse } = useOutletContext();
  const SessionData = useSelector(StoredSessionData, shallowEqual);
  const PricingAppPricingName = useSelector(
    GlobalPricingAppPricingName,
    shallowEqual
  );
  const [topSellingProducts, setTopSellingProducts] = useState([]);
  const [initialDate, setInitialDate] = useState(true);
  const [dates, setDates] = useState([
    dayjs(intialFromDate),
    dayjs(intialToDate),
  ]);
  const [ismounted, setIsmounted] = useState(true);
  const [customerPendingBalance, setcustomerPendingBalance] = useState([]);
  console.log(PricingAppPricingName, 'PricingAppPricingName');
  //     const {
  //     AppId: appId,
  //     CompId: compId,
  //     BranchId: branchId,
  //   } = SessionData || {};
  //   console.log(appId, compId, branchId, 'SessionData');
  const [range1, setRange1] = useState('today');
  const [range2, setRange2] = useState('today');
  const [range3, setRange3] = useState('today');
  const [userprofile, setUserprofile] = useState(false);

  const userProfileRef = useRef(null);

  const CompId = getSession('CompId');
  const BranchId = getSession('BranchId');
  const AppId = getSession('AppId');
  const UserId = getSession('UserId');
  const UserType = getSession('UserType');
  const sessionId = getSession('SessionId');
  const BrLength = getSession('BranchLength');
  const [selection, setSelection] = useState('dashboard');
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);
  const [loading, setLoading] = useState(false);
  const [products, setProducts] = useState([]);
  console.log(selection, 'selection');
  const [CompBranchData, setCompBranchData] = useState();
  const [EmpAcces, setEmpAccess] = useState();
  const [seletedBranchData, setseletedBranchData] = useState(BranchId);
  const [branchName, setBranchName] = useState('Guest');
  const [selectedBranchForFilter, setSelectedBranchForFilter] = useState(
    BrLength == 1 ? null : 'all'
  );
  const [ApiData, setApiData] = useState([]);
  console.log(CompBranchData, 'CompBranchData');
  const [Zero, SetZero] = useState(false);
  const [ResponseData, setResponseData] = useState();
  const [DateApiData, setDateApiData] = useState([]);
  const [piedat, setPiedat] = useState([]);
  const inputRefs = useRef([]);
  const [pin, setPin] = useState(['', '', '', '']);
  const [expiredList, setExpiredList] = useState([]);
  const [lowStockList, setLowStock] = useState([]);
  const [AllProdIds, setAllProdIds] = useState([]);
  const [AppDetails, setAppDetails] = useState([]);
  const [preorderData, setpreorderData] = useState([]);
  const [TopSellingCus, setTopsellingCus] = useState([]);
  const [SalesHdr, setSalesHdr] = useState([]);
  const [modal, setModal] = useState(false);
  const [SelectType, setSelectType] = useState('O');
  const [SelectTypeName, setSelectTypeName] = useState('OTP');
  const [pinInput, setpinInput] = useState(false);
  const [otp, setOtp] = useState();
  const [FirstTimeOtp, setFirstTimeOtp] = useState(false);
  const [FirstTimePin, setFirstTimePin] = useState(false);
  const [seconds, setSeconds] = useState(0);
  const [disabled, setDisabled] = useState(false);
  const clicked = useRef(false);
  const [selectedUserData, setSelectedUserData] = useState(null);
  const [userDropDown, setuserDropDown] = useState([]);
  const [ExpiryDate, setExpiryDate] = useState();
  const [EmpData, setEmpData] = useState();
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  console.log(EmpData, 'EmpDataEmpData');

  // Loading states to prevent duplicate API calls
  const [isLoadingBranchData, setIsLoadingBranchData] = useState(false);
  const [isLoadingDashboard, setIsLoadingDashboard] = useState(false);
  const [isLoadingBranchFilter, setIsLoadingBranchFilter] = useState(false);
  const [isInitialLoad, setIsInitialLoad] = useState(true);
  const [initialFetchCompleted, setInitialFetchCompleted] = useState(false);
  // Ref to track if component is mounted
  const isMountedRef = useRef(true);

  const RedirectStatus = useSelector(GlobalRedirectStatus);
  const globalbranchid = useSelector(GlobalSelectedBranchId);
  const SAdminUserData = useSelector(GLobalSadminUserData);
  const appPreferences = useSelector(ApplicationPreferences);
  const isCheckSportsApp = appPreferences
    ?.find((preference) => preference?.PreferredCatName === 'Common Module')
    ?.PreferenceCatDetails?.some(
      (e) =>
        e?.PreferredSubCatName === 'SportsApp' && e?.PreferredStatus === 'Y'
    );
  const bookingTypePreference = appPreferences?.find(
    (preference) => preference?.PreferredCatName === 'Booking Type'
  )?.PreferenceCatDetails;
  const dinePreference = bookingTypePreference?.find(
    (type) =>
      type?.PreferredSubCatName?.toLowerCase() === 'dine in' &&
      type?.PreferredStatus === 'Y'
  );
  const takeAwayPreference = bookingTypePreference?.find(
    (type) =>
      type?.PreferredSubCatName?.toLowerCase() === 'take away' &&
      type?.PreferredStatus === 'Y'
  );
  const timerDuration = 30;
  let EndDate = AppDetails?.[0]?.ValidityEnd;

  const isoDate = EndDate; // <-- July 24
  const date = new Date(isoDate);

  const options = { year: 'numeric', month: 'long', day: 'numeric' };
  const formatted = date.toLocaleDateString('en-US', options);

  // "July 24, 2025"

  console.log(expiredList, lowStockList, 'lowStockList');
  console.log(TopSellingCus, preorderData, 'preorderData');
  let DineInData =
    ApiData?.[0]?.ChartDtl?.map((item) => {
      return {
        label: '',
        value:
          item?.OverAllDineInAmount || 0 - item?.OverAllDineInOfferAmount || 0,
        date: item?.SalesDate,
      };
    }) || [];
  let TakeAway =
    ApiData?.[0]?.ChartDtl?.map((item) => {
      return {
        label: '',
        value:
          item?.OverAllTakeAwayAmount ||
          0 - item?.OverAllTakeAwayOfferAmount ||
          0,
        date: item?.SalesDate,
      };
    }) || [];
  let selfbooking =
    ApiData?.[0]?.ChartDtl?.map((item) => {
      return {
        label: '',
        value: 0,
        date: item?.SalesDate,
      };
    }) || [];
  console.log(DineInData, 'DineInData');

  useEffect(() => {
    dispatch(getUserProfile({ UserId: UserId, ActiveStatus: 'A' })).unwrap();
  }, [UserId]);

  useEffect(() => {
    if (isInitialLoad && CompId && AppId && selection === 'dashboard') {
      // debugger
      if (dates && dates?.[0] && dates?.[1] && !initialDate) {
        onRangeChange(dates, [
          dates?.[0]?.format('DD-MM-YYYY'),
          dates?.[1]?.format('DD-MM-YYYY'),
        ]);
      } else {
        setIsInitialLoad(false);
        initializeData();
        getInitialdataForPendingBills();
      }
    }
  }, [CompId, AppId, isInitialLoad, selection, BranchId]);

  const getInitialdataForPendingBills = async () => {
    let data = {
      CompId: CompId,
      ...(!selectedBranchForFilter ? { BranchId: BranchId } : {}),
      AppId: AppId,
    };

    console.log(data, 'getSalesHdrFn');
    dispatch(getSalesHdr(data))
      .unwrap()
      .then((response) => {
        if (response?.data?.statusCode === 1) {
          setSalesHdr(response?.data?.data);
        } else {
          setSalesHdr([]);
          console.error('Failed to fetch pre-order dashboard data');
        }
      })
      .catch((error) => {
        console.error('Error fetching pre-order dashboard:', error);
      });
  };

  // Initialize all data in proper sequence
  const initializeData = async () => {
    try {
      // First fetch branch data as other calls depend on it
      await fetchBranchData();

      // Then fetch other data that doesn't depend on branch selection
      await Promise.all([
        fetchData(),
        getAllProdId(),
        topSellingProductsFn(),
        CustPendingBalance(),
        getExpdate(),
        fetchApi(),
      ]);
      setInitialFetchCompleted(true);
      // Dashboard-specific data will be loaded by SingleBranchFlow or Dashboardshow
    } catch (error) {
      console.error('Error initializing dashboard data:', error);
    }
  };

  // Cleanup effect to handle component unmounting
  useEffect(() => {
    return () => {
      isMountedRef.current = false;
    };
  }, []);

  useEffect(() => {
    if (
      BranchId != null &&
      BranchId != undefined &&
      CompBranchData?.length > 0 &&
      !isLoadingBranchData
    ) {
      // Set branch name if we have branch data
      const currentBranch = CompBranchData?.filter(
        (item) => item?.BrId == BranchId
      )?.[0];
      if (currentBranch) {
        setBranchName(currentBranch.BrName);
      }

      // Handle single branch flow only if we have exactly one branch
      if (CompBranchData?.length == 1) {
        if (UserType != 'Super Admin User') {
          SingleBranchFlow();
        } else {
          const checkData = SAdminUserData?.filter(
            (item) =>
              item?.AppId == AppId &&
              item?.CompId == CompId &&
              item?.BranchId == BranchId
          );
          if (
            UserType == 'Super Admin User' &&
            (checkData?.length == 0 || checkData?.[0]?.Status !== 'Y')
          ) {
            userDropData();
            setModal(true);
          } else {
            SingleBranchFlow();
          }
        }
      }
    }
  }, [
    BranchId,
    CompBranchData,
    isLoadingBranchData,
    UserType,
    AppId,
    CompId,
    SAdminUserData,
  ]);

  useEffect(() => {
    if (
      AppId &&
      CompId &&
      BranchId &&
      dates &&
      selection === 'top-selling-products'
    ) {
      const data = {
        AppId,
        CompId,
        BranchId,
        pageNumber: 1,
        FromDate: dates[0]?.format('YYYY-MM-DD') || intialFromDate,
        ToDate: dates[1]?.format('YYYY-MM-DD') || intialToDate,
      };
      setPage(1);
      fetchProducts(data);
      setIsInitialLoad(true);
    }
  }, [selection]);

  const userDropData = async () => {
    const gettinguserDropDown = await dispatch(
      UserDataBasedOnBranchId(seletedBranchData ? seletedBranchData : BranchId)
    ).unwrap();
    if (gettinguserDropDown?.data?.statusCode === 1) {
      let finaluserDropDown = gettinguserDropDown?.data?.data?.filter(
        (value) => value.ActiveStatus === 'A'
      );
      setuserDropDown(finaluserDropDown);
    }
  };
  const onComplete = useCallback(() => {
    setMessageData(null);
    setMessageType(null);
  }, []);
  const fetchApi = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      EmpId: UserId,
    };
    let response = await dispatch(getEmpAccess(data)).unwrap();
    let datas = response?.data?.data?.[0]?.EmpAccessDetails?.filter((item) =>
      ['Add Product', 'Product Receipt', 'Daily Sales', 'Sales'].includes(
        item.ConfigName
      )
    );
    console.log(datas, 'ffsasasf');
    setEmpData(datas);
  };

  const getExpdate = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
    };
    let res = await dispatch(getAppSubscriptionDate(data)).unwrap();

    if (res?.data?.statusCode === 1 && res?.data?.data?.length > 0) {
      const remaining = res?.data?.data?.[0];
      // let RemainingDays = expData?.RemainingDays;
      // let RemainingHours=expData?.RemainingHours;
      // let RemainingMinutes=expData?.RemainingMinutes;
      // let RemainingSeconds=expData?.RemainingSeconds

      const now = new Date();

      const totalMs =
        remaining.RemainingDays * 24 * 60 * 60 * 1000 +
        remaining.RemainingHours * 60 * 60 * 1000 +
        remaining.RemainingMinutes * 60 * 1000 +
        remaining.RemainingSeconds * 1000;

      const futureDate = new Date(now.getTime() + totalMs);

      const formatted = ExtractDateFormate(
        futureDate.toISOString().split('T')[0]
      );
      // futureDate.toLocaleString();
      setExpiryDate(formatted);
    }
  };
  const getSalesHdrFn = (FromDate, ToDate) => {
    let today = new Date().toISOString().split('T')[0].split('-');

    let data = {
      CompId: CompId,
      ...(!selectedBranchForFilter ? { BranchId: BranchId } : {}),
      AppId: AppId,
      FromDate: FromDate ? FromDate : `${today[0]}-${today[1]}-${today[2]}`,
      ToDate: ToDate ? ToDate : `${today[0]}-${today[1]}-${today[2]}`,
    };

    console.log(data, 'getSalesHdrFn');
    dispatch(getSalesHdr(data))
      .unwrap()
      .then((response) => {
        if (response?.data?.statusCode === 1) {
          setSalesHdr(response?.data?.data);
        } else {
          setSalesHdr([]);
          console.error('Failed to fetch pre-order dashboard data');
        }
      })
      .catch((error) => {
        console.error('Error fetching pre-order dashboard:', error);
      });
  };

  const getTopBuyingCustomers = (FromDate, ToDate) => {
    let today = new Date().toISOString().split('T')[0].split('-');

    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      FromDate: FromDate ? FromDate : `${today[2]}-${today[1]}-${today[0]}`,
      ToDate: ToDate ? ToDate : `${today[2]}-${today[1]}-${today[0]}`,
    };
    dispatch(getTopSellingCustomers(data))
      .unwrap()
      .then((response) => {
        if (response?.data?.statusCode === 1) {
          setTopsellingCus(response?.data?.data);
        } else {
          console.error('Failed to fetch pre-order dashboard data');
        }
      })
      .catch((error) => {
        console.error('Error fetching pre-order dashboard:', error);
      });
  };

  const getpreOrderDashBoardFn = (FromDate, ToDate) => {
    let today = new Date().toISOString().split('T')[0].split('-');

    let data = {
      CompId: CompId,
      ...(!selectedBranchForFilter ? { BranchId: BranchId } : {}),
      AppId: AppId,

      FromDate: FromDate ? FromDate : `${today[0]}-${today[1]}-${today[2]}`,
      ToDate: ToDate ? ToDate : `${today[0]}-${today[1]}-${today[2]}`,
    };
    dispatch(getpreOrderDashBoard(data))
      .unwrap()
      .then((response) => {
        if (response?.data?.statusCode === 1) {
          setpreorderData(response?.data?.data);
        } else {
          console.error('Failed to fetch pre-order dashboard data');
        }
      })
      .catch((error) => {
        console.error('Error fetching pre-order dashboard:', error);
      });
  };
  const fetchBranchData = async () => {
    // Prevent duplicate calls
    if (isLoadingBranchData) {
      return;
    }

    setIsLoadingBranchData(true);

    try {
      let data = {
        CompId: CompId,
        BranchId: BranchId,
        AppId: AppId,
        UserId: UserId,
      };
      if (UserType === 'Super Admin' || UserType === 'Super Admin User') {
        const response = await dispatch(
          getCompBranchData({ CompId: CompId, AppId: AppId })
        ).unwrap();
        if (response?.data?.statusCode === 1 && isMountedRef.current) {
          setBranchName(
            response?.data?.data?.filter((item) => item?.BrId == BranchId)?.[0]
              ?.BrName
          );
          setCompBranchData(response?.data?.data);
          setIsmounted(false);
        }
      } else if (
        UserType === 'Admin' ||
        UserType === 'Admin User' ||
        UserType == 'Employee'
      ) {
        if (UserType == 'Employee') {
          const EmpAcessRepsonse = await dispatch(
            getEmpAccesData(data)
          ).unwrap();
          setEmpAccess(EmpAcessRepsonse?.data?.data);
        }

        const response = await dispatch(
          getCompBranchData({ AppId: AppId, UserId: UserId, CompId: CompId })
        ).unwrap();
        if (response?.data?.statusCode === 1 && isMountedRef.current) {
          setBranchName(
            response?.data?.data?.filter((item) => item?.BrId == BranchId)?.[0]
              ?.BrName
          );

          setCompBranchData(response?.data?.data);
          if (response?.data?.data?.length > 1) {
            setIsmounted(false);
          }
        }

        console.log('Branch data fetched successfully:', response?.data?.data);
      }
      let AppDetails = await dispatch(
        getPurchasedAppDetails({ AppId, UserId })
      ).unwrap();
      //;
      if (AppDetails?.data?.statusCode === 1 && isMountedRef.current) {
        setAppDetails(AppDetails?.data?.data);
      }
    } catch (error) {
      console.error('Error fetching branch data:', error);
    } finally {
      setIsLoadingBranchData(false);
    }
  };
  let topSellingProductsFn = async () => {
    const today = new Date();
    const year = today.getFullYear();
    const month = today.getMonth(); // 0-based: Jan = 0

    // Last day of the current month
    const lastDay = new Date(year, month + 1, 0); // 0 = last day of previous month

    const formatDate = (date) =>
      `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;

    const data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      FromDate: `${year}-${String(month + 1).padStart(2, '0')}-01`, // First day
      ToDate: formatDate(lastDay), // e.g. 2025-07-31
    };
    dispatch(getTopSellingProduct(data))
      .unwrap()
      .then((response) => {
        if (response?.data?.statusCode === 1) {
          setTopSellingProducts(response?.data?.data);
        } else {
          console.error('Failed to fetch top selling products');
        }
      })
      .catch((error) => {
        console.error('Error fetching top selling products:', error);
      });
  };
  const CustPendingBalance = () => {
    dispatch(
      getAllCustomerPendingBalance({
        CompId: CompId,
        BranchId: BranchId,
        AppId: AppId,
      })
    )
      .unwrap()
      .then((response) => {
        if (response?.data?.statusCode === 1) {
          setcustomerPendingBalance(response?.data?.data);
        } else {
          console.error('Failed to fetch top selling products');
        }
      })
      .catch((error) => {
        console.error('Error fetching top selling products:', error);
      });
  };

  const getAllProdId = async (branchId) => {
    let data = {
      CompId: CompId,
      ...(selectedBranchForFilter !== 'all'
        ? { BranchId: branchId || BranchId }
        : {}),
      AppId: AppId,
    };
    let response = await dispatch(getAllprodIds(data)).unwrap();

    if ((response.data.statusCode = 1)) {
      setAllProdIds(response.data.data);
    } else {
      setAllProdIds([]);
    }
  };

  useEffect(() => {
    if (selectedBranchForFilter && initialFetchCompleted) {
      getAllProdId(selectedBranchForFilter);
    }
  }, [selectedBranchForFilter]);

  const fetchData = async () => {
    try {
      const [expireRes, lowStockRes] = await Promise.all([
        dispatch(
          getExpireProductsList({
            compId: CompId,
            ...(!selectedBranchForFilter ? { branchId: BranchId } : {}),
            appId: AppId,
          })
        )?.unwrap(),
        dispatch(
          getLowStockAlertProductsList({
            compId: CompId,
            ...(!selectedBranchForFilter ? { branchId: BranchId } : {}),
            appId: AppId,
          })
        )?.unwrap(),
      ]);

      if (expireRes?.data?.statusCode === 1) {
        setExpiredList(expireRes?.data?.data);
      }

      if (lowStockRes?.data?.statusCode === 1) {
        setLowStock(lowStockRes?.data?.data);
      }
    } catch (err) {
      //   setMessage({ type: 'error', data: 'API failed' });
    }
  };
  const datasets = [
    dinePreference && {
      name: 'Dine In',
      color: '#978FED',
      data: DineInData,
    },
    {
      name: takeAwayPreference ? 'Takeaway' : 'Sales',
      color: '#EE89DF',
      data: TakeAway,
    },

    {
      name: 'Self booking',
      color: '#F6CF7D',
      data: selfbooking,
    },
  ].filter(Boolean);

  const UserDropDownChange = async (e) => {
    setSelectedUserData(e);
  };
  const handlePageChange = async () => {
    if (CompBranchData?.length === 1) {
      const commonUrl = import.meta.env.ENV_COMMON_BASE_URL;

      const MobileNo = encryptedValuesUrlFun(getSession('MobileNo'));
      const userName = encryptedValuesUrlFun(getSession('userName'));
      const UserId = encryptedValuesUrlFun(getSession('UserId'));
      const UserType = encryptedValuesUrlFun(getSession('UserType'));
      const CompId = encryptedValuesUrlFun(getSession('CompId'));
      const CompName = encryptedValuesUrlFun(getSession('CompName'));
      const SessionId = encryptedValuesUrlFun(getSession('SessionId'));

      if (sessionStorage.getItem('BranchId') !== null) {
        clearSession('BranchId');
      }
      if (sessionStorage.getItem('AppId') !== null) {
        clearSession('AppId');
      }

      const param = {
        MN: MobileNo,
        UN: userName,
        UD: UserId,
        UT: UserType,
        CD: CompId,
        CN: CompName,
        SD: SessionId,
      };

      const queryParams = new URLSearchParams(param).toString();
      window.location.replace(
        `${commonUrl}/home/landing-page/home?${queryParams}`
      );
    } else {
      setseletedBranchData();
      if (sessionStorage.getItem('BranchId') !== null) {
        clearSession('BranchId');
      }
      navigate(`${subDirectory}app-page/branch-login`);
    }
    if (sessionStorage.getItem('hasRefreshed') !== null) {
      sessionStorage.removeItem('hasRefreshed');
    }
    setModal(false);
  };
  const handleUserProfile = () => {
    setUserprofile((prev) => !prev);
  };

  const handleChange = (index, event) => {
    const value = event.target.value;

    if (/^\d$/.test(value)) {
      const newPin = [...pin];
      newPin[index] = value;
      setPin(newPin);

      if (index < inputRefs?.current?.length - 1) {
        inputRefs?.current[index + 1]?.focus(); // Move to next input
      }

      if (newPin.every((num) => num !== '')) {
        handleSubmit(newPin.join('')); // Call function when all 4 digits are entered
      } // Call function when all 4 digits are entered
    } else {
      event.target.value = '';
      const newPin = [...pin];
      newPin[index] = value;
      setPin(newPin); // Clear input if more than one digit is entered
    }
  };

  const handleKeyDown = (index, event) => {
    if (event.key === 'Backspace' && index > 0 && !event.target.value) {
      inputRefs?.current[index - 1]?.focus(); // Move to previous input on backspace
    }
  };

  const handleSubmit = async (enteredPin) => {
    if (otp == Number(enteredPin)) {
      let data = {
        CompId: CompId,
        BranchId:
          seletedBranchData != null && seletedBranchData != undefined
            ? seletedBranchData
            : BranchId,
        AppId: AppId,
        UserId: UserId,
        SignInType: SelectTypeName,
        SecurityCode: Number(enteredPin),
        UpdatedBy: UserId,
        SessionId: sessionId,
        EmpId: selectedUserData,
      };
      let response = await dispatch(PUTLoginuser(data)).unwrap();
      if (response?.data?.statusCode == 1) {
        await dispatch(checkSession({ UserId, sessionId })).unwrap();
        setModal(false);
        inputRefs?.current.forEach((ref) => {
          if (ref) {
            ref.value = '';
          }
        });
        setPin(['', '', '', '']);
        SingleBranchFlow();
      }
    } else {
      alert(`Invalid  ${SelectType == 'O' ? 'OTP' : 'Pin'}`);
    }
  };
  const ChangeMethod = (e) => {
    setSelectType(e);
    setSelectTypeName(e === 'O' ? 'OTP' : 'PIN');
  };
  const sentpinfn = async () => {
    let data = {
      CompId: CompId,
      BranchId:
        seletedBranchData != null && seletedBranchData != undefined
          ? seletedBranchData
          : BranchId,
      AppId: AppId,
      UserId: UserId,
      SignInType: SelectTypeName,
      CreatedBy: UserId,
      EmpId: selectedUserData,
    };

    let response = await dispatch(PostLoginSuser(data)).unwrap();

    if (response?.data?.statusCode == 1) {
      setOtp(response?.data?.OTP || response?.data?.PIN);
      setpinInput(true); // Show PIN/OTP input fields
      setSeconds(timerDuration); // Start the countdown timer
      setDisabled(true); // Disable the button temporarily
      if (SelectTypeName === 'OTP') {
        setFirstTimeOtp(true); // Set OTP as sent
      } else {
        setFirstTimePin(true); // Set PIN as sent
      }
    }
  };
  const handleClick = async () => {
    if (selectedUserData) {
      if (clicked.current) return;
      clicked.current = true;
      if (seconds === 0) {
        // Disable the button temporarily

        sentpinfn(); // Resend PIN/OTP after 30 seconds
      }
      inputRefs?.current.forEach((ref) => {
        if (ref) {
          ref.value = ''; // Reset the value of each input
        }
      });
      setPin(['', '', '', '']);
    } else {
      alert('Please select user');
    }
  };
  const SingleBranchFlow = async () => {
    try {
      let data = {
        CompId: CompId,
        BranchId: BranchId ? BranchId : globalbranchid,
        AppId: AppId,
      };

      let res = await dispatch(getPreferenceData(data)).unwrap();
      setIsmounted(false);
      const filteredDatas = res?.data?.data?.[0]?.SettingDtlDetails?.filter(
        (item) =>
          item.SettingIdName?.toLowerCase() === 'dashboard' &&
          item.SettingValue === 'N'
      );

      if (!RedirectStatus && filteredDatas?.length > 0) {
        if (
          res?.data?.data?.[0]?.SettingDtlDetails.find(
            (item) => item.SettingIdName === 'Dashboard'
          )?.SettingValue === 'N'
        ) {
          if (UserType !== 'Employee') {
            dispatch(ChangeRedirectStatus(true));
            // await dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap();
            navigate(`${subDirectory}sales`);
          } else if (
            EmpAcces?.length > 0 &&
            EmpAcces?.[0]?.EmpAccessDetails?.find(
              (item) => item?.ConfigName === 'Sales'
            )?.ReadAccess === 'Y'
          ) {
            dispatch(ChangeRedirectStatus(true));
            // await dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap();
            navigate(`${subDirectory}sales`);
          } else {
            // Only call Dashboardshow if not already loading
            if (!isLoadingDashboard) {
              Dashboardshow();
            }
          }
        } else {
          // Only call Dashboardshow if not already loading
          if (!isLoadingDashboard) {
            Dashboardshow();
          }
        }
      } else {
        // Only call Dashboardshow if not already loading
        if (!isLoadingDashboard) {
          Dashboardshow();
        }
      }
    } catch (error) {
      console.error('Error in SingleBranchFlow:', error);
    }
  };
  useEffect(() => {
    if (SessionData && CompId && BranchId && AppId && !isInitialLoad) {
      Dashboardshow();
    }
  }, [SessionData, CompId, BranchId, AppId, isInitialLoad]);

  const Dashboardshow = async () => {
    // Prevent duplicate calls and only call Dashboardshow if not already loading
    if (isLoadingDashboard) {
      return;
    }

    setIsLoadingDashboard(true);

    try {
      let data;
      if (UserType === 'Employee') {
        data = {
          CompId: CompId,
          ...(!selectedBranchForFilter ? { BranchId: BranchId } : {}),
          AppId: AppId,
          UserId: UserId,
        };
      } else {
        data = {
          CompId: CompId,
          ...(!selectedBranchForFilter ? { BranchId: BranchId } : {}),
          AppId: AppId,
        };
      }
      console.log(data, 'data');

      let response = await dispatch(getdashboard(data)).unwrap();
      if (isMountedRef.current) {
        setApiData(response?.data?.data);
        setPiedat(response?.data?.data);
        setResponseData(response?.data?.statusCode);
      }
    } catch (error) {
      console.error('Error fetching dashboard data:', error);
    } finally {
      setIsLoadingDashboard(false);
    }
  };
  const dateFormat = 'DD-MM-YYYY';

  const onChangeBranchFilter = async (branchId) => {
    if (isLoadingBranchFilter) {
      return;
    }

    setIsLoadingBranchFilter(true);
    setSelectedBranchForFilter(branchId);

    try {
      if (branchId === 'all') {
        await fetchAllBranchesData();
      } else {
        await fetchSingleBranchData(branchId);
      }
    } catch (error) {
      console.error('Error changing branch filter:', error);
    } finally {
      setIsLoadingBranchFilter(false);
    }
  };

  const fetchAllBranchesData = async () => {
    try {
      if (!CompBranchData || CompBranchData.length === 0) return;

      let data;
      if (UserType === 'Employee') {
        data = {
          CompId: CompId,
          AppId: AppId,
          UserId: UserId,
        };
      } else {
        data = { CompId: CompId, AppId: AppId };
      }

      let response = await dispatch(getdashboard(data)).unwrap();
      if (response?.data?.statusCode === 1) {
        setApiData(response?.data?.data);
        setPiedat(response?.data?.data);
      }

      setApiData(response?.data?.data);
      setPiedat(response?.data?.data);
    } catch (error) {
      console.error('Error fetching all branches data:', error);
    }

    // Also refresh other data for all branches
    getpreOrderDashBoardFnAllBranches();
    getTopBuyingCustomersAllBranches();
    getSalesHdrFnAllBranches();
  };

  const fetchSingleBranchData = async (branchId) => {
    let data;
    if (UserType === 'Employee') {
      data = {
        CompId: CompId,
        BranchId: branchId,
        AppId: AppId,
        UserId: UserId,
      };
    } else {
      data = { CompId: CompId, BranchId: branchId, AppId: AppId };
    }

    let response = await dispatch(getdashboard(data)).unwrap();
    setApiData(response?.data?.data);
    setPiedat(response?.data?.data);

    // Also refresh other data
    getpreOrderDashBoardFn();
    getTopBuyingCustomers();
    getSalesHdrFn();
  };

  // Function to aggregate data from multiple branches
  const aggregateBranchData = (branchDataArray) => {
    const aggregated = {
      DineInOrderCount: 0,
      TakeAwayOrderCount: 0,
      SelfTakeAwayOrderCount: 0,
      OverAllSalesAmt: 0,
      OverAllDineInAmount: 0,
      OverAllTakeAwayAmount: 0,
      ChartDtl: [],
    };

    branchDataArray.forEach((branchData) => {
      if (branchData) {
        aggregated.DineInOrderCount += branchData.DineInOrderCount || 0;
        aggregated.TakeAwayOrderCount += branchData.TakeAwayOrderCount || 0;
        aggregated.SelfTakeAwayOrderCount +=
          branchData.SelfTakeAwayOrderCount || 0;
        aggregated.OverAllSalesAmt += branchData.OverAllSalesAmt || 0;
        aggregated.OverAllDineInAmount += branchData.OverAllDineInAmount || 0;
        aggregated.OverAllTakeAwayAmount +=
          branchData.OverAllTakeAwayAmount || 0;

        // Merge chart data (you might want to customize this based on your needs)
        if (branchData.ChartDtl && branchData.ChartDtl.length > 0) {
          aggregated.ChartDtl = aggregated.ChartDtl.concat(branchData.ChartDtl);
        }
      }
    });

    return aggregated;
  };

  // Helper functions for fetching data from all branches
  const getpreOrderDashBoardFnAllBranches = async (FromDate, ToDate) => {
    if (!CompBranchData || CompBranchData.length === 0) return;

    try {
      let today = new Date().toISOString().split('T')[0].split('-');
      let data = {
        CompId: CompId,
        ...(!selectedBranchForFilter ? { BranchId: BranchId } : {}),
        AppId: AppId,
        FromDate: FromDate ? FromDate : `${today[0]}-${today[1]}-${today[2]}`,
        ToDate: ToDate ? ToDate : `${today[0]}-${today[1]}-${today[2]}`,
      };

      const response = await dispatch(getpreOrderDashBoard(data)).unwrap();
      if (response?.data?.statusCode === 1) {
        setpreorderData(response?.data?.data);
      } else {
        setpreorderData([]);
        console.error('Failed to fetch pre-order dashboard data');
      }
    } catch (error) {
      console.error('Error fetching preorder data for all branches:', error);
    }
  };

  const getTopBuyingCustomersAllBranches = async (FromDate, ToDate) => {
    if (!CompBranchData || CompBranchData.length === 0) return;

    try {
      const allBranchPromises = CompBranchData.map(async (branch) => {
        let today = new Date().toISOString().split('T')[0].split('-');
        let data = {
          CompId: CompId,
          BranchId: branch.BrId,
          AppId: AppId,
          FromDate: FromDate ? FromDate : `${today[2]}-${today[1]}-${today[0]}`,
          ToDate: ToDate ? ToDate : `${today[2]}-${today[1]}-${today[0]}`,
        };

        const response = await dispatch(getTopSellingCustomers(data)).unwrap();
        return response?.data?.data || [];
      });

      const allBranchData = await Promise.all(allBranchPromises);

      // Flatten and merge customer data from all branches
      const allCustomers = allBranchData.flat();

      // Group by customer and sum amounts
      const customerMap = {};
      allCustomers.forEach((customer) => {
        if (customer.CustName) {
          if (customerMap[customer.CustName]) {
            customerMap[customer.CustName].TotalSalesAmount +=
              customer.TotalSalesAmount || 0;
          } else {
            customerMap[customer.CustName] = { ...customer };
          }
        }
      });

      // Convert back to array and sort by total sales
      const aggregatedCustomers = Object.values(customerMap)
        .sort((a, b) => (b.TotalSalesAmount || 0) - (a.TotalSalesAmount || 0))
        .slice(0, 10); // Top 10 customers

      setTopsellingCus(aggregatedCustomers);
    } catch (error) {
      console.error('Error fetching top customers for all branches:', error);
    }
  };

  const getSalesHdrFnAllBranches = async (FromDate, ToDate) => {
    if (!CompBranchData || CompBranchData.length === 0) return;

    try {
      let today = new Date().toISOString().split('T')[0].split('-');
      let data = {
        CompId: CompId,
        ...(!selectedBranchForFilter ? { BranchId: BranchId } : {}),
        AppId: AppId,
        FromDate: FromDate ? FromDate : `${today[0]}-${today[1]}-${today[2]}`,
        ToDate: ToDate ? ToDate : `${today[0]}-${today[1]}-${today[2]}`,
      };
      const response = await dispatch(getSalesHdr(data)).unwrap();
      setSalesHdr(response?.data?.data);
    } catch (error) {
      console.error('Error fetching sales header for all branches:', error);
    }
  };

  const onRangeChange = async (dates, dateStrings) => {
    SetZero(true);
    let fromDateVal = dateStrings[0]?.split('-');
    let toDateVal = dateStrings[1]?.split('-');
    setDates(dates);
    setInitialDate(false);
    if (dates && selection === 'dashboard') {
      const fromDate =
        fromDateVal[2] + '-' + fromDateVal[1] + '-' + fromDateVal[0];
      const toDate = toDateVal[2] + '-' + toDateVal[1] + '-' + toDateVal[0];

      if (selectedBranchForFilter === 'all') {
        // Fetch data for all branches with date range
        await fetchAllBranchesDataWithDateRange(fromDate, toDate);
      } else {
        // Fetch data for specific branch with date range
        await fetchSingleBranchDataWithDateRange(
          selectedBranchForFilter ? selectedBranchForFilter : BranchId,
          fromDate,
          toDate
        );
      }
      getpreOrderDashBoardFn();
    } else if (selection === 'top-selling-products') {
      const FromDate = dates?.[0]?.format('YYYY-MM-DD') || intialFromDate;
      const ToDate = dates?.[1]?.format('YYYY-MM-DD') || intialToDate;
      await fetchProducts({
        AppId,
        CompId,
        BranchId,
        FromDate,
        ToDate,
        pageNumber: 1,
      });
      setPage(1);
    }
  };
  const fetchProducts = async (data) => {
    setLoading(true);
    try {
      const res = await dispatch(getTopSellingProduct(data))?.unwrap();
      if (res?.data?.statusCode === 1 && res?.data?.data?.length > 0) {
        setProducts(res?.data?.data);
        setTotalPages(Math.ceil(res?.data?.data?.[0]?.TotalCount / 10));
      } else {
        setProducts([]);
        setTotalPages(0);
      }
    } catch (error) {
      console.error('Error fetching products:', error);
    }
    setLoading(false);
  };

  const fetchAllBranchesDataWithDateRange = async (fromDate, toDate) => {
    try {
      let data;
      if (UserType === 'Employee') {
        data = {
          CompId: CompId,
          ...(!selectedBranchForFilter ? { BranchId: BranchId } : {}),
          AppId: AppId,
          FromDate: fromDate,
          ToDate: toDate,
          UserId: UserId,
        };
      } else {
        data = {
          CompId: CompId,
          ...(!selectedBranchForFilter ? { BranchId: BranchId } : {}),
          AppId: AppId,
          FromDate: fromDate,
          ToDate: toDate,
        };
      }
      const response = await dispatch(getdashboarddate(data)).unwrap();
      if (response?.data?.statusCode === 1) {
        setDateApiData(response?.data?.data);
        setApiData(response?.data?.data);
      } else {
        setDateApiData([]);
        setApiData([]);
      }

      // const allBranchData = await Promise.all(allBranchPromises);

      // // Aggregate the data from all branches
      // const aggregatedData = aggregateBranchData(allBranchData);
      // setDateApiData([aggregatedData]);
      // setApiData([aggregatedData]);
      // setPiedat([aggregatedData]);

      // Also refresh other data for all branches with date range
      getpreOrderDashBoardFnAllBranches(fromDate, toDate);
      getTopBuyingCustomersAllBranches(fromDate, toDate);
      getSalesHdrFnAllBranches(fromDate, toDate);
      getSalesHdrFn(fromDate, toDate);
    } catch (error) {
      console.error('Error fetching all branches data with date range:', error);
      setDateApiData([]);
      setApiData([]);
      setPiedat([]);
      setpreorderData([]);
      setTopsellingCus([]);
      setSalesHdr([]);
    }
  };

  // Function to fetch data for single branch with date range
  const fetchSingleBranchDataWithDateRange = async (
    branchId,
    fromDate,
    toDate
  ) => {
    try {
      const targetBranchId = branchId === 'all' ? BranchId : branchId;

      let data;
      if (UserType === 'Employee') {
        data = {
          CompId: CompId,
          BranchId: targetBranchId,
          AppId: AppId,
          FromDate: fromDate,
          ToDate: toDate,
          UserId: UserId,
        };
      } else {
        data = {
          CompId: CompId,
          BranchId: targetBranchId,
          AppId: AppId,
          FromDate: fromDate,
          ToDate: toDate,
        };
      }
      let response = await dispatch(getdashboarddate(data)).unwrap();
      if (response?.data?.statusCode === 1) {
        setDateApiData(response?.data?.data);
        setApiData(response?.data?.data);
        setPiedat(response?.data?.data);
        getpreOrderDashBoardFn(fromDate, toDate);
        getTopBuyingCustomers(fromDate, toDate);
        getSalesHdrFn(fromDate, toDate);
      } else {
        setDateApiData([]);
        setApiData([]);
        setPiedat([]);
        setpreorderData([]);
        setTopsellingCus([]);
        setSalesHdr([]);
      }
    } catch (error) {
      console.error(
        'Error fetching single branch data with date range:',
        error
      );
      setDateApiData([]);
      setApiData([]);
      setPiedat([]);
      setpreorderData([]);
      setTopsellingCus([]);
      setSalesHdr([]);
    }
  };
  const disabledDate = (current) => {
    const today = dayjs().endOf('day');
    const firstSalesDate = ApiData?.[0]?.Firstsalesdate;

    // If firstSalesDate exists and is valid, use it as minimum date
    if (firstSalesDate) {
      const minDate = dayjs(firstSalesDate).startOf('day');
      return current && (current < minDate || current > today);
    }

    // If no firstSalesDate, disable future dates only
    return current && current > today;
  };

  useEffect(() => {
    const handleResize = () => {
      setCollapse(window.innerWidth < 768);
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (
        userProfileRef.current &&
        !userProfileRef.current.contains(event.target)
      ) {
        setUserprofile(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [userProfileRef]);

  const Logout = async () => {
    const status = 'N'; // replace with your actual status
    const res = await dispatch(GenerateLogout({ UserId, status })).unwrap();
    if (res?.data?.statusCode === 1) {
      sessionStorage.clear();
      window.location.replace(`${commonUrl}`);
    }
  };
  if (ismounted)
    return (
      <div
        style={{
          position: 'fixed',
          top: '0',
          left: '0',
          right: '0',
          bottom: '0',
          height: '100vh',
          width: '100vw',
          backgroundColor: '#fff',
        }}
      >
        <Loader />
      </div>
    );

  const handleSelectChange = (value) => {
    setSelection(value);
  };

  return (
    <div className="RetailDashboard-Master">
      <div className="dashboardHeader">
        <Messages
          messageType={messageType}
          messageData={messageData}
          onComplete={onComplete}
        />
        <div className="shopName">
          <div>{branchName}</div>
        </div>
        <div className="dashboareduser">
          <div>
            {(() => {
              if (!ExpiryDate) return null;
              const today = new Date();
              const expiryDate = new Date(ExpiryDate);
              const timeDiff = expiryDate.getTime() - today.getTime();
              const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));

              if (daysDiff <= 7 && daysDiff >= 0) {
                return (
                  <div>
                    <img src={sandClock} alt="" width={25} />

                    {PricingAppPricingName?.[0]?.PricingName && (
                      <div className="infoplan">
                        Current Plan:{' '}
                        {PricingAppPricingName?.[0]?.PricingName +
                          ' / ' +
                          PricingAppPricingName?.[0]?.Type}
                      </div>
                    )}
                    <div className="infoplan">Plan Expiry on {ExpiryDate}</div>
                  </div>
                );
              }
              return null;
            })()}
          </div>
          <div className="userShortName" onClick={handleUserProfile}>
            {(AppDetails?.[0]?.UserName || 'Guest')
              ?.substring(0, 2)
              ?.toUpperCase()}
          </div>
          {userprofile && (
            <BSNavBarUserInfo
              isOpen={userprofile}
              divRef={userProfileRef}
              userProfileData={{
                UserImage: user,
                UserName: AppDetails?.[0]?.UserName,
                MobileNo: AppDetails?.[0]?.MobileNo,
              }}
              Logout={Logout}
            />
          )}
        </div>
      </div>

      <div
        className={`dashboardHeader2${selection === 'top-selling-products' ? ' top' : ''}`}
      >
        {/* <div style={{ fontSize: '18px', fontWeight: '500' }}>Dashboard</div> */}
        {/* public Login   dashboard*/}
        <div className="tab-switcher">
          {tabs?.map((tab) => (
            <button
              key={tab.value}
              className={`tab-button ${selection === tab?.value ? 'active' : ''}`}
              onClick={() => handleSelectChange(tab?.value)}
            >
              {tab.label}
            </button>
          ))}
        </div>

        {/* Branch Filter Dropdown */}
        {CompBranchData?.length > 1 && selection !== 'top-selling-products' && (
          <div className="branch-filter-dropdown">
            <DropDowns
              options={[
                { value: 'all', label: 'All Branches' },
                ...CompBranchData?.map((option) => ({
                  value: option.BrId,
                  label: option.BrName,
                })),
              ]}
              className="branch-filter-select"
              onChangeFunction={onChangeBranchFilter}
              valueData={selectedBranchForFilter}
              defaultValue="all"
              placeholder="All Branches"
            />
          </div>
        )}

        <div className="FilterAndRefresh">
          <RangePicker
            presets={[]}
            onChange={onRangeChange}
            format={dateFormat}
            disabledDate={disabledDate}
            className="datepickerDashboardrange"
            inputReadOnly={true}
          />
          {/* <div className="refershdashboard">
            <div>
              {' '}
              <IoMdRefresh />
              Refresh
            </div>
            <span>10sec auto refresh</span>
          </div> */}
        </div>
      </div>
      {selection === 'dashboard' ? (
        <>
          <div className="dashboardMainGrid">
            <div className="TotalRevenue">
              <div className="tlxHeader"></div>
              <div className="TotalRevenue-Graph">
                <GraphChart datasets={datasets} />
              </div>
            </div>

            <div className="dashboardMainCenter">
              <div className="todaySnapshotRow">
                <p
                  style={{
                    fontSize: '13px',
                    marginBottom: '0.2rem',
                    fontWeight: '500',
                    fontFamily: 'Inter',
                  }}
                >
                  Today's Snapshot
                </p>
                {selectedBranchForFilter === 'all' ? (
                  <div className="todaySnapFlex">
                    <Tooltip
                      title={
                        <div
                          className="tooltip-scrollable"
                          style={{
                            maxHeight: 300,
                            overflowY: 'auto',
                            overflowX: 'hidden', // Moves scrollbar to far right edge of tooltip
                          }}
                        >
                          {ApiData?.[0]?.BranchDtl?.map((item, index) => (
                            <div
                              key={index}
                              style={{
                                marginBottom: 8,
                                paddingBottom: 8,
                                borderBottom: '1px solid #f0f0f0',
                              }}
                            >
                              <strong>{item.BrName || 'N/A'}</strong>
                              <br />
                              Orders:{' '}
                              {(item.DineInOrderCount || 0) +
                                (item.TakeAwayOrderCount || 0)}
                              <br />
                              Revenue: ₹{item.OverAllSalesAmt || 0}
                            </div>
                          ))}
                        </div>
                      }
                      placement="bottom"
                    >
                      <div className="todaySnapshotBox orders">
                        {ApiData?.[0]?.DineInOrderCount +
                          ApiData?.[0]?.TakeAwayOrderCount +
                          ApiData?.[0]?.DineIn_TakeAwayOrderCount || 0}{' '}
                        <div>Orders</div>
                      </div>
                    </Tooltip>
                    <Tooltip
                      title={
                        <div
                          className="tooltip-scrollable"
                          style={{
                            maxHeight: 300,
                            overflowY: 'auto',
                            overflowX: 'hidden', // Moves scrollbar to far right edge of tooltip
                          }}
                        >
                          {ApiData?.[0]?.BranchDtl?.map((item, index) => (
                            <div
                              key={index}
                              style={{
                                marginBottom: 8,
                                paddingBottom: 8,
                                borderBottom: '1px solid #f0f0f0',
                              }}
                            >
                              <strong>{item.BrName || 'N/A'}</strong>
                              <br />
                              Orders:{' '}
                              {(item.DineInOrderCount || 0) +
                                (item.TakeAwayOrderCount || 0)}
                              <br />
                              Revenue: ₹{item.OverAllSalesAmt || 0}
                            </div>
                          ))}
                        </div>
                      }
                      placement="bottom"
                    >
                      {!isCheckSportsApp && (
                        <div className="todaySnapshotBox revenue">
                          {ApiData?.[0]?.OverAllSalesAmt -
                            ApiData?.[0]?.OverAllOfferAmount || 0}{' '}
                          <div>Revenue</div>
                        </div>
                      )}
                    </Tooltip>
                    <Tooltip
                      title={`Total New Customers across all branches: ${SalesHdr?.[0]?.NewCustomers || 0}`}
                      placement="bottom"
                    >
                      <div className="todaySnapshotBox customers">
                        {SalesHdr?.[0]?.NewCustomers || 0}{' '}
                        <div>New Customers</div>
                      </div>
                    </Tooltip>
                    {!isCheckSportsApp && (
                      <Tooltip
                        title={`Total Pending Bills across all branches: ${SalesHdr?.[0]?.PendingBill || 0}`}
                        placement="bottom"
                      >
                        <div className="todaySnapshotBox pending">
                          {SalesHdr?.[0]?.PendingBill || 0}{' '}
                          <div>Pending Bills</div>
                        </div>
                      </Tooltip>
                    )}
                  </div>
                ) : (
                  <div>
                    <div className="todaySnapshotBox orders">
                      {ApiData?.[0]?.DineInOrderCount +
                        ApiData?.[0]?.TakeAwayOrderCount +
                        ApiData?.[0]?.DineIn_TakeAwayOrderCount || 0}{' '}
                      <div>Orders</div>
                    </div>
                    {!isCheckSportsApp && (
                      <div className="todaySnapshotBox revenue">
                        {(
                          (ApiData?.[0]?.OverAllSalesAmt || 0) -
                          (ApiData?.[0]?.OverAllOfferAmount || 0)
                        ).toFixed(2)}{' '}
                        <div>Revenue </div>
                      </div>
                    )}
                    <div className="todaySnapshotBox customers">
                      {SalesHdr?.[0]?.NewCustomers || 0}{' '}
                      <div>New Customers</div>
                    </div>
                    {!isCheckSportsApp && (
                      <div className="todaySnapshotBox pending">
                        {SalesHdr?.[0]?.PendingBill || 0}{' '}
                        <div>Pending Bills</div>
                      </div>
                    )}
                  </div>
                )}
              </div>
              <div className="quickActionsRow">
                <div
                  onClick={() => {
                    const hasEmpAccess = EmpData?.find(
                      (item) =>
                        item.ConfigName === 'Add Product' &&
                        item.ReadAccess === 'Y'
                    );
                    if (!hasEmpAccess && UserType === 'Employee') {
                      setMessageData('Please contact your admin to get access');
                      setMessageType('error');
                    }
                    if (isCheckSportsApp) {
                      navigate(`${subDirectory}setting/products-master/new`);
                    }
                    if (
                      (UserType === 'Employee' && hasEmpAccess) ||
                      UserType === 'Admin' ||
                      UserType === 'Super Admin' ||
                      UserType === 'Super Admin User'
                    ) {
                      navigate(`${subDirectory}setting/product-master/new`);
                    }

                    // setting/product-master/new
                  }}
                  className="quickActionBox"
                >
                  <img src={Add} alt="" />
                  {!isCheckSportsApp ? (
                    <div>Add Product</div>
                  ) : (
                    <div>Add Slot</div>
                  )}
                </div>
                {!isCheckSportsApp && (
                  <div
                    onClick={() => {
                      const hasEmpAccess = EmpData?.find(
                        (item) =>
                          item.ConfigName === 'Product Receipt' &&
                          item.ReadAccess === 'Y'
                      );
                      if (!hasEmpAccess && UserType === 'Employee') {
                        setMessageData(
                          'Please contact your admin to get access'
                        );
                        setMessageType('error');
                      }
                      if (
                        (UserType === 'Employee' && hasEmpAccess) ||
                        UserType === 'Admin' ||
                        UserType === 'Super Admin' ||
                        UserType === 'Super Admin User'
                      ) {
                        navigate(`${subDirectory}setting/purchase-entry/new`);
                      }
                    }}
                    className="quickActionBox"
                  >
                    <img src={AddPurchase} alt="" />
                    <div>Add Purchase</div>
                  </div>
                )}
                <div
                  onClick={() => {
                    const hasEmpAccess = EmpData?.find(
                      (item) =>
                        item.ConfigName === 'Daily Sales' &&
                        item.ReadAccess === 'Y'
                    );
                    if (!hasEmpAccess && UserType === 'Employee') {
                      setMessageData('Please contact your admin to get access');
                      setMessageType('error');
                    }
                    if (
                      (UserType === 'Employee' && hasEmpAccess) ||
                      UserType === 'Admin' ||
                      UserType === 'Super Admin' ||
                      UserType === 'Super Admin User'
                    ) {
                      navigate(`${subDirectory}report/datewisereport`);
                    }
                  }}
                  className="quickActionBox"
                >
                  <img src={report} alt="" width="45px" />
                  <div>Report</div>
                </div>
                <div
                  className="quickActionBox"
                  onClick={() => {
                    const hasEmpAccess = EmpData?.find(
                      (item) =>
                        item.ConfigName === 'Sales' && item.ReadAccess === 'Y'
                    );
                    if (!hasEmpAccess && UserType === 'Employee') {
                      setMessageData('Please contact your admin to get access');
                      setMessageType('error');
                    }
                    if (
                      (UserType === 'Employee' && hasEmpAccess) ||
                      UserType === 'Admin' ||
                      UserType === 'Super Admin' ||
                      UserType === 'Super Admin User'
                    ) {
                      navigate(`${subDirectory}sales`);
                    }
                  }}
                >
                  <img src={invoice} alt="" />
                  <div>New Bill</div>
                </div>
              </div>

              {/* ------------------------Dont Delete----------------------------- */}
              {/* <div className="expensesSalesRow">
                        <div className="expenseBox">Electricity<div>₹1,500</div></div>
                        <div className="expenseBox">Purchases<div>₹12,150</div></div>
                        <div className="expenseBox">Salaries<div className="red">₹7,500</div></div>
                    </div> */}
              {/* <div className="salesBreakdownRow">
            <div className="salesBreakdownBox">
              DineIn <div>{ApiData?.[0]?.DineInOrderCount}</div>
            </div>
            <div className="salesBreakdownBox">
              Takeaway<div>{ApiData?.[0]?.TakeAwayOrderCount}</div>
            </div>
            <div className="salesBreakdownBox">
              Delivery<div>{ApiData?.[0]?.SelfTakeAwayOrderCount}</div>
            </div>
          </div> */}
              <div className="salesBreakdownRow">
                {dinePreference &&
                  (ApiData?.[0]?.BranchDtl?.length > 1 ? (
                    <Tooltip
                      title={
                        <div
                          className="tooltip-scrollable"
                          style={{
                            maxHeight: 300,
                            overflowY: 'auto',
                            overflowX: 'hidden',
                          }}
                        >
                          {ApiData[0].BranchDtl.map((item, index) => (
                            <div
                              key={index}
                              style={{
                                marginBottom: 8,
                                paddingBottom: 8,
                                borderBottom: '1px solid #f0f0f0',
                              }}
                            >
                              <strong>{item.BrName || 'N/A'}</strong>
                              <br />
                              Orders: {item.DineInOrderCount || 0}
                              <br />
                            </div>
                          ))}
                        </div>
                      }
                      placement="bottom"
                    >
                      <div className="salesBreakdownBox">
                        DineIn <div>{ApiData?.[0]?.DineInOrderCount || 0}</div>
                      </div>
                    </Tooltip>
                  ) : (
                    <div className="salesBreakdownBox">
                      DineIn <div>{ApiData?.[0]?.DineInOrderCount || 0}</div>
                    </div>
                  ))}

                <div className="salesBreakdownBox">
                  {takeAwayPreference ? 'Takeaway' : 'Sales'}

                  {ApiData?.[0]?.BranchDtl?.length > 1 ? (
                    <Tooltip
                      title={
                        <div
                          className="tooltip-scrollable"
                          style={{
                            maxHeight: 300,
                            overflowY: 'auto',
                            overflowX: 'hidden', // Moves scrollbar to far right edge of tooltip
                          }}
                        >
                          {ApiData[0].BranchDtl.map((item, index) => (
                            <div
                              key={index}
                              style={{
                                marginBottom: 8,
                                paddingBottom: 8,
                                borderBottom: '1px solid #f0f0f0',
                              }}
                            >
                              <strong>{item.BrName || 'N/A'}</strong>
                              <br />
                              Orders: {item.TakeAwayOrderCount || 0}
                              <br />
                            </div>
                          ))}
                        </div>
                      }
                      placement="bottom"
                    >
                      <div>{ApiData?.[0]?.TakeAwayOrderCount || 0}</div>
                    </Tooltip>
                  ) : (
                    <div>{ApiData?.[0]?.TakeAwayOrderCount || 0}</div>
                  )}
                </div>

                {dinePreference && takeAwayPreference && (
                  <div className="salesBreakdownBox">
                    {'DineIn + Takeaway'}

                    {ApiData?.[0]?.BranchDtl?.length > 1 ? (
                      <Tooltip
                        title={
                          <div
                            className="tooltip-scrollable"
                            style={{
                              maxHeight: 300,
                              overflowY: 'auto',
                              overflowX: 'hidden', // Moves scrollbar to far right edge of tooltip
                            }}
                          >
                            {ApiData[0].BranchDtl.map((item, index) => (
                              <div
                                key={index}
                                style={{
                                  marginBottom: 8,
                                  paddingBottom: 8,
                                  borderBottom: '1px solid #f0f0f0',
                                }}
                              >
                                <strong>{item.BrName || 'N/A'}</strong>
                                <br />
                                Orders: {item.DineIn_TakeAwayOrderCount || 0}
                                <br />
                              </div>
                            ))}
                          </div>
                        }
                        placement="bottom"
                      >
                        <div>
                          {ApiData?.[0]?.DineIn_TakeAwayOrderCount || 0}
                        </div>
                      </Tooltip>
                    ) : (
                      <div>{ApiData?.[0]?.DineIn_TakeAwayOrderCount || 0}</div>
                    )}
                  </div>
                )}

                {!isCheckSportsApp && (
                  <div className="salesBreakdownBox">
                    {ApiData?.[0]?.BranchDtl?.length > 1 ? (
                      <Tooltip
                        title={
                          <div
                            className="tooltip-scrollable"
                            style={{
                              maxHeight: 300,
                              overflowY: 'auto',
                              overflowX: 'hidden', // Moves scrollbar to far right edge of tooltip
                            }}
                          >
                            {ApiData[0].BranchDtl.map((item, index) => (
                              <div
                                key={index}
                                style={{
                                  marginBottom: 8,
                                  paddingBottom: 8,
                                  borderBottom: '1px solid #f0f0f0',
                                }}
                              >
                                <strong>{item.BrName || 'N/A'}</strong>
                                <br />
                                Delivery: {item.SelfTakeAwayOrderCount || 0}
                                <br />
                              </div>
                            ))}
                          </div>
                        }
                        placement="bottom"
                      >
                        Delivery
                        <div>{ApiData?.[0]?.SelfTakeAwayOrderCount || 0}</div>
                      </Tooltip>
                    ) : (
                      <>
                        Delivery
                        <div>{ApiData?.[0]?.SelfTakeAwayOrderCount || 0}</div>
                      </>
                    )}
                  </div>
                )}
              </div>
            </div>

            {!isCheckSportsApp && (
              <div className="dashboardMainRight">
                <div className="productSummaryTitle">Product Summary</div>
                <div className="productSummaryCard">
                  <div className="productSummaryRow">
                    <div className="productSummaryBox total">
                      {AllProdIds?.[0]?.BranchDtl?.length > 1 ? (
                        <Tooltip
                          title={
                            <div
                              className="tooltip-scrollable"
                              style={{
                                maxHeight: 300,
                                overflowY: 'auto',
                                overflowX: 'hidden', // Moves scrollbar to far right edge of tooltip
                              }}
                            >
                              {AllProdIds[0].BranchDtl.map((item, index) => (
                                <div
                                  key={index}
                                  style={{
                                    marginBottom: 8,
                                    paddingBottom: 8,
                                    borderBottom: '1px solid #f0f0f0',
                                  }}
                                >
                                  <strong>{item?.BranchName || 'N/A'}</strong>
                                  <br />
                                  TOTAL PRODUCTS: {item?.ProductCount || 0}
                                  <br />
                                </div>
                              ))}
                            </div>
                          }
                          placement="bottom"
                        >
                          <div>
                            <p>{AllProdIds?.[0]?.TotalProductCount}</p>
                            <div>TOTAL PRODUCTS</div>
                          </div>
                        </Tooltip>
                      ) : (
                        <div>
                          <p>
                            {AllProdIds?.[0]?.TotalProductCount ||
                              AllProdIds?.length}
                          </p>
                          <div>TOTAL PRODUCTS</div>
                        </div>
                      )}
                    </div>
                    <div className="productSummaryBox live">
                      {expiredList?.[0]?.Branchdtl?.length > 1 ? (
                        <Tooltip
                          title={
                            <div
                              className="tooltip-scrollable"
                              style={{
                                maxHeight: 300,
                                overflowY: 'auto',
                                overflowX: 'hidden', // Moves scrollbar to far right edge of tooltip
                              }}
                            >
                              {expiredList[0].Branchdtl.map((item, index) => (
                                <div
                                  key={index}
                                  style={{
                                    marginBottom: 8,
                                    paddingBottom: 8,
                                    borderBottom: '1px solid #f0f0f0',
                                  }}
                                >
                                  <strong>{item.BranchName || 'N/A'}</strong>
                                  <br />
                                  Expiry Stock: {item.ProductsDtl?.length || 0}
                                  <br />
                                </div>
                              ))}
                            </div>
                          }
                          placement="bottom"
                        >
                          <div>
                            <p> {expiredList?.length}</p>
                            <div>EXPIRY STOCK</div>
                          </div>
                        </Tooltip>
                      ) : (
                        <div>
                          <p> {expiredList?.length}</p>
                          <div>EXPIRY STOCK</div>
                        </div>
                      )}
                    </div>

                    <div className="productSummaryBox low">
                      {lowStockList?.[0]?.BranchDtl?.length > 1 ? (
                        <Tooltip
                          title={
                            <div
                              className="tooltip-scrollable"
                              style={{
                                maxHeight: 300,
                                overflowY: 'auto',
                                overflowX: 'hidden', // Moves scrollbar to far right edge of tooltip
                              }}
                            >
                              {lowStockList[0].BranchDtl.map((item, index) => (
                                <div
                                  key={index}
                                  style={{
                                    marginBottom: 8,
                                    paddingBottom: 8,
                                    borderBottom: '1px solid #f0f0f0',
                                  }}
                                >
                                  <strong>{item.BranchName || 'N/A'}</strong>
                                  <br />
                                  LOW STOCK: {item.lowStockList?.length || 0}
                                  <br />
                                </div>
                              ))}
                            </div>
                          }
                          placement="bottom"
                        >
                          <div>
                            <p>{lowStockList?.length}</p>
                            <div>LOW STOCK</div>
                          </div>
                        </Tooltip>
                      ) : (
                        <div>
                          <p> {lowStockList?.length}</p>
                          <div>LOW STOCK</div>
                        </div>
                      )}
                    </div>
                    <div className="productSummaryBox nostock">
                      {SalesHdr?.[0]?.BranchDetails?.length > 1 ? (
                        <Tooltip
                          title={
                            <div
                              className="tooltip-scrollable"
                              style={{
                                maxHeight: 300,
                                overflowY: 'auto',
                                overflowX: 'hidden', // Moves scrollbar to far right edge of tooltip
                              }}
                            >
                              {SalesHdr[0].BranchDetails.map((item, index) => (
                                <div
                                  key={index}
                                  style={{
                                    marginBottom: 8,
                                    paddingBottom: 8,
                                    borderBottom: '1px solid #f0f0f0',
                                  }}
                                >
                                  <strong>{item.BranchName || 'N/A'}</strong>
                                  <br />
                                  NO STOCK: {item.NoStockProduct || 0}
                                  <br />
                                </div>
                              ))}
                            </div>
                          }
                          placement="bottom"
                        >
                          <div>
                            <p>{SalesHdr?.[0]?.NoStockProduct || 0}</p>
                            <div>NO STOCK</div>
                          </div>
                        </Tooltip>
                      ) : (
                        <div>
                          <p> {SalesHdr?.[0]?.NoStockProduct || 0}</p>
                          <div>NO STOCK</div>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
                <div className="notificationCenterTitle">
                  Notification Center
                </div>
                <div className="notificationCenterCard">
                  {expiredList?.length > 0 && (
                    <div className="notificationStock">
                      {expiredList.length} Products expiry today!
                    </div>
                  )}

                  {lowStockList?.length > 0 && (
                    <div className="notificationStock">
                      Low Stock count {lowStockList.length}
                    </div>
                  )}

                  {!expiredList?.length && !lowStockList?.length && (
                    <div
                      style={{
                        fontSize: '12px',
                        width: '100%',
                        textAlign: 'center',
                      }}
                    >
                      Notification Empty
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>

          {!isCheckSportsApp && (
            <div className="dashboardSecondaryGrid">
              <div className="topSellingProductCard">
                <div className="topSellingHeader">
                  <div>Top Selling Product</div>
                  <div className="topSellingMonth">This Month</div>
                </div>

                {topSellingProducts.map((product, idx) => (
                  <div className="TopSellingProduct-list" key={idx}>
                    <img src={product.ProdLogo} alt={product.name} />
                    <div>
                      {product.ProdName} - {product.TotalSoldQty}{' '}
                    </div>
                  </div>
                ))}
              </div>
              <div className="preOrderSummaryCardMain">
                <div className="preOrderSummaryCard">
                  <div className="preOrderSummaryTitle">Pre Order Summary</div>
                  <div className="preOrderSummaryRow">
                    <div className="preOrderSummaryBox total">
                      <Tooltip
                        title={
                          <div
                            className="tooltip-scrollable"
                            style={{
                              maxHeight: 300,
                              overflowY: 'auto',
                              overflowX: 'hidden', // Moves scrollbar to far right edge of tooltip
                            }}
                          >
                            {preorderData?.[0]?.BranchDtl
                              ? preorderData?.[0]?.BranchDtl?.map(
                                  (item, index) => (
                                    <div
                                      key={index}
                                      style={{
                                        marginBottom: 8,
                                        paddingBottom: 8,
                                        borderBottom: '1px solid #f0f0f0',
                                      }}
                                    >
                                      <strong>
                                        {item.BranchName || 'N/A'}
                                      </strong>
                                      <br />
                                      Total Orders: {item.TotalOrders || 0}
                                      <br />
                                    </div>
                                  )
                                )
                              : 'No Data'}
                          </div>
                        }
                        placement="bottom"
                      >
                        {preorderData?.[0]?.TotalOrders || 0}
                        <div>Total Orders</div>
                      </Tooltip>
                    </div>
                    <div className="preOrderSummaryBox pending">
                      <Tooltip
                        title={
                          <div
                            className="tooltip-scrollable"
                            style={{
                              maxHeight: 300,
                              overflowY: 'auto',
                              overflowX: 'hidden', // Moves scrollbar to far right edge of tooltip
                            }}
                          >
                            {preorderData?.[0]?.BranchDtl
                              ? preorderData?.[0]?.BranchDtl?.map(
                                  (item, index) => (
                                    <div
                                      key={index}
                                      style={{
                                        marginBottom: 8,
                                        paddingBottom: 8,
                                        borderBottom: '1px solid #f0f0f0',
                                      }}
                                    >
                                      <strong>
                                        {item.BranchName || 'N/A'}
                                      </strong>
                                      <br />
                                      Total Orders: {item.PendingOrders || 0}
                                      <br />
                                    </div>
                                  )
                                )
                              : 'No Data'}
                          </div>
                        }
                        placement="bottom"
                      >
                        {preorderData?.[0]?.PendingOrders || 0}
                        <div>Pending</div>
                      </Tooltip>
                    </div>
                    <div className="preOrderSummaryBox completed">
                      <Tooltip
                        title={
                          <div
                            className="tooltip-scrollable"
                            style={{
                              maxHeight: 300,
                              overflowY: 'auto',
                              overflowX: 'hidden', // Moves scrollbar to far right edge of tooltip
                            }}
                          >
                            {preorderData?.[0]?.BranchDtl
                              ? preorderData?.[0]?.BranchDtl?.map(
                                  (item, index) => (
                                    <div
                                      key={index}
                                      style={{
                                        marginBottom: 8,
                                        paddingBottom: 8,
                                        borderBottom: '1px solid #f0f0f0',
                                      }}
                                    >
                                      <strong>
                                        {item.BranchName || 'N/A'}
                                      </strong>
                                      <br />
                                      Total Orders: {item.CompletedOrders || 0}
                                      <br />
                                    </div>
                                  )
                                )
                              : 'No Data'}
                          </div>
                        }
                        placement="bottom"
                      >
                        {preorderData?.[0]?.CompletedOrders || 0}
                        <div>Completed</div>
                      </Tooltip>
                    </div>
                  </div>
                </div>

                <div className="creditListCardMain">
                  <div className="creditListTitle">Credit List</div>
                  <div className="creditListCard">
                    <div className="creditListHeader">
                      <div>Customer</div>
                      <div>Amount</div>
                    </div>

                    {customerPendingBalance?.length > 0 ? (
                      customerPendingBalance.map((customer, idx) => (
                        <div className="creditListRow" key={idx}>
                          <div className="">
                            {customer?.CustName || customer.CustMobile}
                          </div>
                          <div>₹{customer.creditBal.toFixed(2)}</div>
                        </div>
                      ))
                    ) : (
                      <div className="creditListRow">
                        <div>No Pending Balance</div>
                        <div>₹0.00</div>
                      </div>
                    )}
                    {/* <div className="creditListViewAll">View All</div> */}
                  </div>
                </div>

                <div className="stockAlertsCard">
                  <div className="stockAlertsTitle">Stock Alerts</div>
                  <div className="stockAlertsTable">
                    <div className="stockAlertsHeaderRow">
                      <div className="stockAlertsCol slno">Sl.No</div>
                      <div className="stockAlertsCol product">Product</div>
                      <div className="stockAlertsCol count">Stock Count</div>
                    </div>
                    {lowStockList?.length > 0 ? (
                      lowStockList?.map((item, index) => (
                        <div className="stockAlertsRow" key={index}>
                          <div className="stockAlertsCol slno">{index + 1}</div>
                          <div className="stockAlertsCol product">
                            <div className="stockAlertsProductLink">
                              {item?.ProdName || item?.ProdId}
                            </div>
                          </div>
                          <div className="stockAlertsCol count">
                            {item?.BalanceQty}
                          </div>
                        </div>
                      ))
                    ) : (
                      <div style={{ textAlign: 'center', fontSize: '12px' }}>
                        No Low Stock Product
                      </div>
                    )}

                    {/* <div className="stockAlertsRow">
                <div className="stockAlertsCol slno">2</div>
                <div className="stockAlertsCol product">
                  <div className="stockAlertsProductLink">
                    Cotton Blend Mandarin Collar Self One Design Kurta
                  </div>
                </div>
                <div className="stockAlertsCol count">4</div>
              </div>
              <div className="stockAlertsRow">
                <div className="stockAlertsCol slno">3</div>
                <div className="stockAlertsCol product">
                  <div className="stockAlertsProductLink">
                    Cotton Blend Mandarin Collar Self One Design Kurta
                  </div>
                </div>
                <div className="stockAlertsCol count">1</div>
              </div> */}
                    {/* <div className="stockAlertsViewAll">
                <a href="#">View All</a>
              </div> */}
                  </div>
                </div>
              </div>
            </div>
          )}
        </>
      ) : (
        <>
          <TopSellingProductsChart
            dates={dates}
            products={products}
            loading={loading}
            totalPages={totalPages}
            page={page}
            setPage={setPage}
            fetchProducts={fetchProducts}
            initialDate={initialDate}
          />
        </>
      )}

      <DefaultModal
        open={modal}
        title="Authentication"
        width={500}
        footer={false}
        handleCancel={handlePageChange}
        children={
          <>
            <div className="modalContentsadminuser">
              <DropDowns
                options={userDropDown?.map((option) => ({
                  value: option?.UserId,
                  label: option?.UserName,
                }))}
                label={<label class="required">User Name</label>}
                className="field-DropDown"
                onChangeFunction={(e) => UserDropDownChange(e)}
                isOnchanges={selectedUserData ? true : false}
                valueData={selectedUserData}
                disabled={disabled}
              />
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <div className="RadioButton">
                  <RadioGrpButton
                    content={[
                      { value: 'O', label: 'OTP' },
                      { value: 'P', label: 'PIN' },
                    ]}
                    fieldState={true}
                    defaultSelect={SelectType}
                    onSelectFuntion={(e) => ChangeMethod(e)}
                  />
                </div>
              </div>

              {pinInput && (
                <div className="otpInputsadminuser">
                  {[0, 1, 2, 3].map((i) => (
                    <input
                      key={i}
                      ref={(el) => (inputRefs.current[i] = el)}
                      className="inputNumber"
                      type="text"
                      inputMode="numeric"
                      pattern="[0-9]"
                      maxLength={1}
                      onChange={(e) => handleChange(i, e)}
                      onKeyDown={(e) => handleKeyDown(i, e)}
                      style={{
                        textAlign: 'center',
                        width: '40px',
                        fontSize: '20px',
                      }}
                    />
                  ))}
                </div>
              )}

              <div
                style={{
                  width: '100%',
                  display: 'flex',
                  justifyContent: 'flex-end',
                }}
              >
                <button
                  className="size-save-button-retail"
                  onClick={handleClick}
                  disabled={disabled}
                >
                  {SelectTypeName === 'OTP'
                    ? !FirstTimeOtp
                      ? `send ${SelectTypeName.toLocaleLowerCase()}`
                      : `resend ${SelectTypeName.toLocaleLowerCase()}${
                          seconds > 0 ? ` in ${seconds}s` : ''
                        }`
                    : !FirstTimePin
                      ? `send ${SelectTypeName.toLocaleLowerCase()}`
                      : `resend ${SelectTypeName.toLocaleLowerCase()}${
                          seconds > 0 ? ` in ${seconds}s` : ''
                        }`}
                </button>
              </div>
            </div>
          </>
        }
      />
    </div>
  );
};

export default RetailDashboard;