second half optimization

src/App.jsx

@@ -2,7 +2,6 @@ import { useEffect, lazy, Suspense } from 'react';
 import { Routes, Route } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import ProtectedRoutes from './ProtectedRoutes';
-import SelfBooking from './Pages/SelfBooking/SelfBooking.jsx';
 import { isMobile, isIOS } from 'react-device-detect';
 import { routesConfig } from './routesConfig';
 import { GlobalItemCard } from './Features/BookingScreen/BookingData/BookingData.js';
@@ -15,19 +14,30 @@ const KisokSelBooking = lazy(
 const IndividualBooking = lazy(
   () => import('./Pages/SelfBooking/IndividualBooking')
 );
+
+const CustomerMenuPage = lazy(
+  () => import('./Pages/Reports/MenuQRCode/CustomerMenuPage.jsx')
+);
+const WeightScaleApp = lazy(
+  () => import('./Pages/BookingScreen/WeightscaleApp.jsx')
+);
+const SelfBooking = lazy(() => import('./Pages/SelfBooking/SelfBooking.jsx'));
+
+import useSessionManager from './useSessionManager.js';
+import useSubscriptionManager from './useSubscriptionManager.js';
+const ExtendSubscriptionModal = lazy(
+  () => import('./Pages/ExtentedModal/ExtendSubscriptionModal.jsx')
+);
+
 const commonSubDir = import.meta.env.ENV_COMMON_BASE_URL;
 const subDirectory = import.meta.env.ENV_BASE_URL;
 import '../ownLib/my-ui-lib.css';
-import CustomerMenuPage from './Pages/Reports/MenuQRCode/CustomerMenuPage.jsx';
-import WeightScaleApp from './Pages/BookingScreen/WeightscaleApp.jsx';
-import useSubscriptionManager from './useSubscriptionManager.js';
-import useSessionManager from './useSessionManager.js';
-import ExtendSubscriptionModal from './Pages/ExtentedModal/ExtendSubscriptionModal.jsx';
 
 const AppRoutes = () => {
   const ItemCard = useSelector(GlobalItemCard);
   const { sessionData, logout } = useSessionManager(ItemCard);
-  const { remainingDays, handleCancel, freeExtend, extendModel,setExtendModel } = useSubscriptionManager(sessionData, logout);
+  const { remainingDays, handleCancel, handlePay, freeExtend, extendModel } =
+    useSubscriptionManager(sessionData, logout);
 
   useEffect(() => {
     const handlePopState = () => {
@@ -64,12 +74,12 @@ const AppRoutes = () => {
   //   return () => clearInterval(timer);
   // }, []);
 
-
   if (extendModel) {
     return (
       <ExtendSubscriptionModal
         onClose={handleCancel}
-        setExtendModel={setExtendModel}
+        onPayNow={handlePay}
+        onContinueWithCredits={freeExtend}
       />
     );
   }

src/AuthContext.jsx

@@ -5,13 +5,9 @@ import { getSession } from './Services/Others';
 import {
   getEmpAccesData,
   getSAdminUserAccesData,
-  PricingAppPricingName,
 } from './Features/BrachLogin/BranchLogin.js';
-import { changePricingAppPricingName } from './Features/ThemeChange/ThemeChange.js';
+import { PricingAppPricingNameData } from './Features/ThemeChange/ThemeChange.js';
-import {
+import { GlobalFeatAddOnData } from './Features/BookingScreen/BookingData/BookingData.js';
-  FeatureAddon,
-  GlobalFeatAddOnData,
-} from './Features/BookingScreen/BookingData/BookingData.js';
 import { useSelector } from 'react-redux';
 
 export const AuthContext = createContext();
@@ -50,16 +46,24 @@ export const AuthProvider = ({ children }) => {
 
   const getPricingName = async () => {
     if (!AppId || !UserId) return;
-    const data = {
+    let data;
+    if (UserType === 'Super Admin' || UserType === 'Super Admin User') {
+      data = {
+        appId: AppId,
+        compId: CompId,
+        branchId: BranchId,
+      };
+    } else {
+      data = {
         appId: AppId,
         userId: UserId,
       };
+    }
     try {
-      const response = await dispatch(PricingAppPricingName(data)).unwrap();
+      const response = await dispatch(PricingAppPricingNameData(data)).unwrap();
       const responseData = response?.data;
       if (responseData?.statusCode !== 1) return setAdvance(false);
       const pricingData = responseData?.data;
-      await dispatch(changePricingAppPricingName(pricingData));
       const hasAdvance = pricingData.some(
         (item) => item.PricingName === 'Premium'
       );

src/Pages/BookingScreen/BookingPage.jsx

@@ -1,5 +1,6 @@
-import { useEffect, useState, lazy, Suspense } from 'react';
+import { useEffect, useRef, lazy, Suspense, memo } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
+import { batch } from 'react-redux';
 
 const BSLayout1 = lazy(
   () => import('../../Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx')
@@ -29,7 +30,6 @@ import {
   getTemplateData,
   GlobalPricingAppPricingName,
   changetemplateData,
-  PricingAppPricingNameData,
   changeSessionData,
   GlobalScanTemplate,
   changeScanTemplate,
@@ -37,12 +37,12 @@ import {
 import {
   changeProductSubCategorie,
   ChangeScreenSize,
-  getConfigType,
+  getConfigTypeBookingType,
   getLayoutCategories,
-  getLayoutSubCategories,
+  // getLayoutSubCategories,
   getUnpaidData,
   GlobalFeatAddOnData,
-  GlobalProductCategorie,
+  // GlobalProductCategorie,
 } from '../../Features/BookingScreen/BookingData/BookingData.js';
 import { getSession } from '../../Services/Others';
 import { usePaymentOptions } from '../../Pages/BookingScreen/Template/PaymentOptions.js';
@@ -56,13 +56,16 @@ import Loader from '../../Components/Loader/Loader.jsx';
 
 const BookingPage = () => {
   const dispatch = useDispatch();
-  const templateData = useSelector(getTemplateData);
+  const templateData = useSelector(getTemplateData, shallowEqual);
-  const ProdCat = useSelector(GlobalProductCategorie);
-  console.log(templateData, 'templateData');
   const BookingLayout = templateData?.BookingLayout?.[0];
-  const [ismounted, setIsmounted] = useState(false);
+
-  const [templateLoaded, setTemplateLoaded] = useState(false);
+  const templateLoadedRef = useRef(
-  const PricingAppPricingName = useSelector(GlobalPricingAppPricingName);
+    Object.keys(templateData)?.length > 0 ? true : false
+  );
+  const PricingAppPricingName = useSelector(
+    GlobalPricingAppPricingName,
+    shallowEqual
+  );
 
   const CompId = getSession('CompId');
   const BranchId = getSession('BranchId');
@@ -72,10 +75,8 @@ const BookingPage = () => {
   const UserType = getSession('UserType');
   const AuthToken = sessionStorage.getItem('auth');
   const SessionMobileNo = getSession('MobileNo');
-  const UserName = getSession("UserName");
+  const FeatureAddonData = useSelector(GlobalFeatAddOnData, shallowEqual);
-  const SessionId =getSession("SessionId")
+  const Scantemplatedata = useSelector(GlobalScanTemplate, shallowEqual);
-  const FeatureAddonData = useSelector(GlobalFeatAddOnData);
-  const Scantemplatedata = useSelector(GlobalScanTemplate);
 
   useEffect(() => {
     if (BranchId) {
@@ -112,10 +113,8 @@ const BookingPage = () => {
       } else {
         dispatch(changeholddata([]));
       }
-    } catch {
+    } catch (err) {
-      (err) => {
       console.log(err);
-      };
     }
   };
 
@@ -130,8 +129,6 @@ const BookingPage = () => {
       AuthToken,
       SessionMobileNo,
       FeatureAddonData,
-      UserName,
-      SessionId
     };
     dispatch(changeSessionData(SessionData));
   }, [BranchId, FeatureAddonData]);
@@ -143,45 +140,64 @@ const BookingPage = () => {
     UserId: UserId,
   });
 
-  useEffect(() => {
+  const initializeBookingPage = () => {
-    ProdCat &&
+    batch(() => {
-      dispatch(
+      dispatch(getConfigTypeBookingType({ TypeName: 'Booking Type' }));
-        getLayoutSubCategories({
-          CompId: CompId,
-          BranchId: BranchId,
-          AppId: AppId,
-          ProdCat: ProdCat,
-        })
-      ).unwrap();
-  }, [ProdCat]);
-
-  useEffect(() => {
-    dispatch(getConfigType({ TypeName: 'Booking Type' })).unwrap();
       dispatch(ChangeRedirectStatus(true));
       dispatch(changeProductSubCategorie('NaN'));
-    dispatch(
+      dispatch(getLayoutCategories({ CompId, BranchId, AppId }));
-      getLayoutCategories({ CompId: CompId, BranchId: BranchId, AppId: AppId })
+    });
-    ).unwrap();
-    let data;
-    if (UserType === 'Super Admin' || UserType === 'Super Admin User') {
-      data = {
-        appId: AppId,
-        compId: CompId,
-        branchId: BranchId,
   };
-    } else {
-      data = {
-        appId: AppId,
-        userId: UserId,
-      };
-    }
 
-    dispatch(PricingAppPricingNameData(data)).unwrap();
+  useEffect(() => {
+    initializeBookingPage();
+  }, [CompId, BranchId, AppId]);
+  useEffect(() => {
+    const handleUnload = () => {
+      const customerDisplayWindow = getCustomerDisplayWindow();
+
+      if (customerDisplayWindow && !customerDisplayWindow.closed) {
+        customerDisplayWindow.postMessage({ type: 'refresh' }, '*');
+      }
+    };
+
+    window.addEventListener('beforeunload', handleUnload);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleUnload);
+    };
   }, []);
 
   useEffect(() => {
+    const Advance = PricingAppPricingName?.some(
+      (item) => item.PricingName === 'Premium'
+    );
+    const Pro = PricingAppPricingName?.some(
+      (item) => item.PricingName === 'Pro'
+    );
+    const hasCustomizedTemplate = FeatureAddonData?.FeatureDtls?.some(
+      (item) => item?.FeatureAddonName?.toLowerCase() === 'customized template'
+    );
+    if (PricingAppPricingName?.length === 0) return;
+
+    if (PricingAppPricingName?.length > 0) {
+      if (Advance) {
+        fetchData('Advance');
+        // Professional('Advance');
+      } else if (Pro) {
+        if (hasCustomizedTemplate) {
+          fetchData();
+        } else {
+          Professional('Pro');
+          // setIsmounted(false)
+        }
+      } else {
+        fetchData('Standard');
+      }
+    }
+  }, [PricingAppPricingName]);
   const fetchData = async (Plan) => {
-      if (templateLoaded) return; // STOP duplicate calls
+    if (templateLoadedRef.current) return; // STOP duplicate calls
 
     const Data = { AppId, CompId, BranchId };
     if (
@@ -381,64 +397,16 @@ const BookingPage = () => {
         getTemplate({ CompId, BranchId, AppId })
       ).unwrap();
       dispatch(getPrintSelectionComponentData(Data)).unwrap();
-        setTemplateLoaded(true);
+      templateLoadedRef.current = true;
       if (
         !templateResponse?.data?.data ||
         templateResponse.data.data.length === 0
       ) {
-          Professional(Plan);
+        //Professional(Plan);
       }
     }
     // Check if template data is empty or not
   };
-    const Advance = PricingAppPricingName?.some(
-      (item) => item.PricingName === 'Premium'
-    );
-    const Pro = PricingAppPricingName?.some(
-      (item) => item.PricingName === 'Pro'
-    );
-    const hasCustomizedTemplate = FeatureAddonData?.FeatureDtls?.some(
-      (item) => item?.FeatureAddonName?.toLowerCase() === 'customized template'
-    );
-    if (PricingAppPricingName?.length === 0) return;
-    console.log(
-      PricingAppPricingName,
-      FeatureAddonData,
-      'FeatureAddonDataFeatureAddonData'
-    );
-    if (PricingAppPricingName?.length > 0) {
-      if (Advance) {
-        fetchData('Advance');
-        // Professional('Advance');
-      } else if (Pro) {
-        if (hasCustomizedTemplate) {
-          fetchData();
-        } else {
-          Professional('Pro');
-          // setIsmounted(false)
-        }
-      } else {
-        fetchData('Standard');
-      }
-    }
-  }, [PricingAppPricingName]);
-  useEffect(() => {
-    const handleUnload = () => {
-      const customerDisplayWindow = getCustomerDisplayWindow(); // Retrieve from your state/redux
-      if (customerDisplayWindow && !customerDisplayWindow.closed) {
-        customerDisplayWindow.postMessage({ type: 'refresh' }, '*');
-      }
-    };
-
-    // Add beforeunload listener when the component mounts
-    window.addEventListener('beforeunload', handleUnload);
-
-    // Clean up the event listener when the component unmounts
-    return () => {
-      window.removeEventListener('beforeunload', handleUnload);
-    };
-  }, []);
-
   const Professional = async (data) => {
     const tempData = {
       SelectedApplication: AppId,
@@ -449,23 +417,6 @@ const BookingPage = () => {
     dispatch(changetemplateData(tempData));
   };
 
-  if (ismounted)
-    return (
-      <div
-        style={{
-          position: 'fixed',
-          top: '0',
-          left: '0',
-          right: '0',
-          bottom: '0',
-          height: '100vh',
-          width: '100vw',
-          backgroundColor: '#fff',
-        }}
-      >
-        <Loader />
-      </div>
-    );
   return (
     <div style={{ backgroundColor: '#fff !important' }}>
       {Object.keys(templateData)?.length > 0 ? (
@@ -484,6 +435,7 @@ const BookingPage = () => {
                   overflow: 'hidden',
                   flexDirection: 'column',
                   fontWeight: '500',
+                  bottom: '3rem',
                 }}
               >
                 Loading Layout...
@@ -503,10 +455,10 @@ const BookingPage = () => {
           </Suspense>
         </>
       ) : (
-        <>{/* {Advance ? <div>Loading...</div> : null} */}</>
+        <Loader />
       )}
     </div>
   );
 };
 
-export default BookingPage;
+export default memo(BookingPage);

src/Pages/BookingScreen/Components/MainPage/SelectionComponent.jsx

@@ -1,14 +1,17 @@
-import React, { useEffect, useRef, useState, useCallback, forwardRef, useImperativeHandle } from 'react';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import WebFont from 'webfontloader';
 import { SwatchesPicker } from 'react-color';
 import { DefaultModal } from '../../../../Components/Modal/DefaultModal';
 import { RadioGrpButton } from '../../../../Components/Forms/RadioGroup.jsx';
-import {
+import { CloseOutlined, ArrowRightOutlined } from '@ant-design/icons';
-
-  CloseOutlined,
-  ArrowRightOutlined,
-} from '@ant-design/icons';
 import { BiSkipPrevious } from 'react-icons/bi';
 import { BiSkipNext } from 'react-icons/bi';
 import { Modal, Form } from 'antd';
@@ -113,12 +116,15 @@ import {
 import { getPreferenceData } from '../../../../Features/BookingScreen/BookingData/BookingData.js';
 import { useAuth } from '../../../../AuthContext.jsx';
 import { HiOutlineSquares2X2, HiSquaresPlus } from 'react-icons/hi2';
-import { ApplicationPreferences, getCommonAppPreference } from '../../../../Features/BrachLogin/BranchLogin.js';
+import {
+  ApplicationPreferences,
+  getCommonAppPreference,
+} from '../../../../Features/BrachLogin/BranchLogin.js';
 import { TbLayoutNavbar } from 'react-icons/tb';
 import { HiMenuAlt1 } from 'react-icons/hi';
-import { IoMdAdd } from "react-icons/io";
+import { IoMdAdd } from 'react-icons/io';
-import { LuCreditCard } from "react-icons/lu";
+import { LuCreditCard } from 'react-icons/lu';
-import { IoReceiptOutline } from "react-icons/io5";
+import { IoReceiptOutline } from 'react-icons/io5';
 
 const subDirectory = import.meta.env.BASE_URL;
 const SelectionComponent = forwardRef((props, ref) => {
@@ -175,12 +181,22 @@ const SelectionComponent = forwardRef((props, ref) => {
     SelectedGlobalSubCatgColorDetail
   );
   const DefaultThemes = useSelector(GlobalDefaultTheme);
-  const SelectedTheme = useSelector(GlobalSelectedTheme)
+  const SelectedTheme = useSelector(GlobalSelectedTheme);
   const activeTheme = useSelector(GlobalActiveTheme);
   const appPreferences = useSelector(ApplicationPreferences);
-  const bookingTypePreference = appPreferences?.find((preference) => preference?.PreferredCatName === 'Booking Type')?.PreferenceCatDetails
+  const bookingTypePreference = appPreferences?.find(
-  const dinePreference = bookingTypePreference?.find((type) => type?.PreferredSubCatName?.toLowerCase() === "dine in" && type?.PreferredStatus === 'Y')
+    (preference) => preference?.PreferredCatName === 'Booking Type'
-  const takeAwayPreference = bookingTypePreference?.find((type) => type?.PreferredSubCatName?.toLowerCase() === "take away" && type?.PreferredStatus === 'Y')
+  )?.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 AppId = getSession('AppId');
   const UserId = getSession('UserId');
   const CompId = getSession('CompId');
@@ -230,7 +246,6 @@ const SelectionComponent = forwardRef((props, ref) => {
   const [SelectedBillingTableId, setSelectedBillingTableId] = useState(null);
   const [ShowDropDownData, SetShowDropDownData] = useState([]);
 
-
   //navbarcheck boxes
   const [NavBarCheckList, setNavBarCheckList] = useState([]);
   const [SelectedNavCheckValues, setSelectedNavCheckValues] = useState([]);
@@ -399,9 +414,19 @@ const SelectionComponent = forwardRef((props, ref) => {
   useEffect(() => {
     if (activeTheme == 'default') {
       if (Object.keys(DefaultThemes)?.length > 0) {
-        dispatch(changeSelectedTheme({ ThemeId: DefaultThemes?.[0]?.TemplatePreferenceId, ThemeName: DefaultThemes?.[0]?.ThemeName }));
+        dispatch(
+          changeSelectedTheme({
+            ThemeId: DefaultThemes?.[0]?.TemplatePreferenceId,
+            ThemeName: DefaultThemes?.[0]?.ThemeName,
+          })
+        );
         settemplateData(DefaultThemes?.[0]);
-        dispatch(changeThemeCreation({ formtype: 'edit', editdata: DefaultThemes?.[0] }));
+        dispatch(
+          changeThemeCreation({
+            formtype: 'edit',
+            editdata: DefaultThemes?.[0],
+          })
+        );
       } else {
         dispatch(changeSelectedTheme({}));
         settemplateData({});
@@ -438,7 +463,7 @@ const SelectionComponent = forwardRef((props, ref) => {
     ).unwrap();
 
     if (tempdetail?.data?.statusCode == 1) {
-      dispatch(changeActiveTheme("customised"));
+      dispatch(changeActiveTheme('customised'));
     } else {
       setTemptemplatedata(true);
     }
@@ -496,7 +521,6 @@ const SelectionComponent = forwardRef((props, ref) => {
   }, [templateData1, selthemeData, activeTheme]);
   useEffect(() => {
     if (Object.keys(templateData)?.length > 0) {
-
       setEditTemplateData();
     } else {
       ClearAllComponentStates();
@@ -764,7 +788,7 @@ const SelectionComponent = forwardRef((props, ref) => {
 
   useEffect(() => {
     if (templateData && BillingTableData?.length > 0) {
-      console.log(BillingTableData?.length, "BillingTableData?.length")
+      console.log(BillingTableData?.length, 'BillingTableData?.length');
       const editCardVal = BillingTableData?.filter(
         (item) => item.ComponentName == templateData?.['BookingBilling']?.[0]
       );
@@ -1062,16 +1086,22 @@ const SelectionComponent = forwardRef((props, ref) => {
   const GetNavbarFun = async () => {
     const gettingNavbarData = await dispatch(getNavbar()).unwrap();
     if (gettingNavbarData?.data?.statusCode === 1) {
-      setNavbarData(gettingNavbarData.data?.data?.map((navbar) => {
+      setNavbarData(
+        gettingNavbarData.data?.data?.map((navbar) => {
           return {
             ...navbar,
-          ComponentOptionsDetails: navbar?.ComponentOptionsDetails
+            ComponentOptionsDetails: navbar?.ComponentOptionsDetails?.filter(
-            ?.filter((component) =>
+              (component) =>
-              !((component?.OptionName === 'DineIn' && dinePreference === undefined) ||
+                !(
-                (component?.OptionName === 'TakeAway' && takeAwayPreference === undefined))
+                  (component?.OptionName === 'DineIn' &&
+                    dinePreference === undefined) ||
+                  (component?.OptionName === 'TakeAway' &&
+                    takeAwayPreference === undefined)
                 )
-        }
+            ),
-      }));
+          };
+        })
+      );
     }
   };
   const GetCategoryFun = async () => {
@@ -1122,31 +1152,43 @@ const SelectionComponent = forwardRef((props, ref) => {
   const GetCombo1Navbar = async () => {
     const gettingCombo1NavbarData = await dispatch(getCombo1Navbar()).unwrap();
     if (gettingCombo1NavbarData?.data?.statusCode === 1) {
-      setNavbarData(gettingCombo1NavbarData?.data?.data?.map((navbar) => {
+      setNavbarData(
+        gettingCombo1NavbarData?.data?.data?.map((navbar) => {
           return {
             ...navbar,
-          ComponentOptionsDetails: navbar?.ComponentOptionsDetails
+            ComponentOptionsDetails: navbar?.ComponentOptionsDetails?.filter(
-            ?.filter((component) =>
+              (component) =>
-              !((component?.OptionName === 'DineIn' && dinePreference === undefined) ||
+                !(
-                (component?.OptionName === 'TakeAway' && takeAwayPreference === undefined))
+                  (component?.OptionName === 'DineIn' &&
+                    dinePreference === undefined) ||
+                  (component?.OptionName === 'TakeAway' &&
+                    takeAwayPreference === undefined)
                 )
-        }
+            ),
-      }));
+          };
+        })
+      );
     }
   };
   const GetCombo2Navbar = async () => {
     const gettingCombo2NavbarData = await dispatch(getCombo2Navbar()).unwrap();
     if (gettingCombo2NavbarData?.data?.statusCode === 1) {
-      setNavbarData(gettingCombo2NavbarData?.data?.data?.map((navbar) => {
+      setNavbarData(
+        gettingCombo2NavbarData?.data?.data?.map((navbar) => {
           return {
             ...navbar,
-          ComponentOptionsDetails: navbar?.ComponentOptionsDetails
+            ComponentOptionsDetails: navbar?.ComponentOptionsDetails?.filter(
-            ?.filter((component) =>
+              (component) =>
-              !((component?.OptionName === 'DineIn' && dinePreference === undefined) ||
+                !(
-                (component?.OptionName === 'TakeAway' && takeAwayPreference === undefined))
+                  (component?.OptionName === 'DineIn' &&
+                    dinePreference === undefined) ||
+                  (component?.OptionName === 'TakeAway' &&
+                    takeAwayPreference === undefined)
                 )
-        }
+            ),
-      }));
+          };
+        })
+      );
     }
   };
 
@@ -1318,15 +1360,20 @@ const SelectionComponent = forwardRef((props, ref) => {
         ],
       })
     );
-    setBillTableCheckList(BillTableItems?.map((billItem) => {
+    setBillTableCheckList(
+      BillTableItems?.map((billItem) => {
         return {
           ...billItem,
-        ComponentOptionsDetails: billItem?.ComponentOptionsDetails
+          ComponentOptionsDetails: billItem?.ComponentOptionsDetails?.filter(
-          ?.filter((component) =>
+            (component) =>
-            !(component?.OptionName === 'UnpaidBill' && dinePreference === undefined)
+              !(
+                component?.OptionName === 'UnpaidBill' &&
+                dinePreference === undefined
               )
-      }
+          ),
-    }));
+        };
+      })
+    );
 
     const itemOption = BillTableItems[0]?.ComponentOptionsDetails?.find(
       (option) => option.OptionName === 'Item'
@@ -2278,7 +2325,7 @@ const SelectionComponent = forwardRef((props, ref) => {
       });
   };
   const validateFontsTable = async (values) => {
-    console.log(values,"table font")
+    console.log(values, 'table font');
     const apiUrl = `https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDP1HqNkLI53iIAH-SB9_mt_24QdkUZ_24`;
     fetch(apiUrl)
       .then((response) => response.json())
@@ -2674,7 +2721,7 @@ const SelectionComponent = forwardRef((props, ref) => {
 
   // onfinish function
   const onfinish = async (values) => {
-    console.log(values, "valuesvalues")
+    console.log(values, 'valuesvalues');
     setFirstOnClick(true);
     let colorOriginalArray = [
       values.CatColor,
@@ -2793,8 +2840,10 @@ const SelectionComponent = forwardRef((props, ref) => {
           setMessageData('Template Details Added Successfully');
           setFirstOnClick(false);
         }
-        dispatch(changeScanTemplate({}))
+        dispatch(changeScanTemplate({}));
-
+        await dispatch(
+          getTemplate({ CompId: CompId, BranchId: BranchId, AppId: AppId })
+        );
       } else {
         setMessageType('error');
         setMessageData(response?.data?.response);
@@ -2963,7 +3012,12 @@ const SelectionComponent = forwardRef((props, ref) => {
         onComplete={onComplete}
       />
       <div className="Selection-Component-OverallDiv">
-        <Form form={form} ref={formRef} onFinish={onfinish} onValuesChange={onValuesChange}>
+        <Form
+          form={form}
+          ref={formRef}
+          onFinish={onfinish}
+          onValuesChange={onValuesChange}
+        >
           {/* <div className="defaultandCustomisedTheme">
             <div
               className={activeTheme === 'default' ? 'selected' : ''}
@@ -3067,13 +3121,10 @@ const SelectionComponent = forwardRef((props, ref) => {
               Layout and Feature Settings
             </div>
             <div className="Selection-Component-InputDiv">
-              {!(
+              {!(Object.keys(templateData)?.length == 0) && (
-                Object.keys(templateData)?.length == 0
-              ) && (
                 <div>
                   <p className="Selection-Component-SubHeading">Layout</p>
 
-
                   <Form.Item
                     name="LayoutId"
                     rules={[
@@ -3192,7 +3243,6 @@ const SelectionComponent = forwardRef((props, ref) => {
                   </div>
                 </div>
 
-
                 <SwatchesPicker onChange={handleColorChange} />
                 <div>
                   <button className="colorBtn" onClick={handleColorSubmit1}>
@@ -3316,7 +3366,6 @@ const SelectionComponent = forwardRef((props, ref) => {
                 <div>
                   <p className="Selection-Component-SubHeading">Bill Table</p>
 
-
                   {/* <Form.Item
                     name="BillingTableId"
                     rules={[
@@ -3339,8 +3388,16 @@ const SelectionComponent = forwardRef((props, ref) => {
                     />
                   </Form.Item> */}
                   {(() => {
-                    const selectedLayoutName = LayoutData?.find(l => l.ComponentId === SelectedLayoutId)?.ComponentName;
+                    const selectedLayoutName = LayoutData?.find(
-                    const filteredBillingTableData = (selectedLayoutName === 'Combo1' || selectedLayoutName === 'Combo2') ? BillingTableData : BillingTableData?.filter(b => b.ComponentName !== 'Billing8');
+                      (l) => l.ComponentId === SelectedLayoutId
+                    )?.ComponentName;
+                    const filteredBillingTableData =
+                      selectedLayoutName === 'Combo1' ||
+                      selectedLayoutName === 'Combo2'
+                        ? BillingTableData
+                        : BillingTableData?.filter(
+                            (b) => b.ComponentName !== 'Billing8'
+                          );
                     return (
                       <Form.Item
                         name="BillingTableId"
@@ -3433,7 +3490,6 @@ const SelectionComponent = forwardRef((props, ref) => {
                         </div>
                       </div>
 
-
                       <SwatchesPicker
                         onChange={handleLayoutOverallColorChange}
                       />
@@ -3453,7 +3509,7 @@ const SelectionComponent = forwardRef((props, ref) => {
                           display: 'flex',
                           gap: '1rem',
                           flexWrap: 'nowrap',
-                            alignItems: "center"
+                          alignItems: 'center',
                         }}
                       >
                         <div className="colorDropdown">
@@ -3507,11 +3563,12 @@ const SelectionComponent = forwardRef((props, ref) => {
                             />
                           </Form.Item>
                         </div>
-                          <div className='addNewSalesFiledBTN' onClick={handleUploadLayoutOverallBackground}>
+                        <div
+                          className="addNewSalesFiledBTN"
+                          onClick={handleUploadLayoutOverallBackground}
+                        >
                           Add
-                            <IoMdAdd
+                          <IoMdAdd className="plusOutlinedIcon" />
-                              className="plusOutlinedIcon"
-                            />
                         </div>
                       </div>
                     )}
@@ -3616,14 +3673,14 @@ const SelectionComponent = forwardRef((props, ref) => {
                         )}
                       </Row>
                     </Checkbox.Group>
-                    <div className='SlecteCatDiv'>
+                    <div className="SlecteCatDiv">
                       <div
                         style={{
                           display: 'flex',
                           flexWrap: 'wrap',
                           flexDirection: 'row',
-                          alignItems: "center",
+                          alignItems: 'center',
-                          gap: "1rem"
+                          gap: '1rem',
                         }}
                       >
                         <div>
@@ -3636,7 +3693,7 @@ const SelectionComponent = forwardRef((props, ref) => {
                               },
                             ]}
                           >
-                            <p className='Selection-Component-SubHeading'>
+                            <p className="Selection-Component-SubHeading">
                               Category Font
                             </p>
                             <DropDowns
@@ -3652,12 +3709,12 @@ const SelectionComponent = forwardRef((props, ref) => {
                             />
                           </Form.Item>
                         </div>
-                        <div className='addNewSalesFiledBTN' onClick={CathandleUploadFonts}>
+                        <div
+                          className="addNewSalesFiledBTN"
+                          onClick={CathandleUploadFonts}
+                        >
                           Add
-                          <IoMdAdd
+                          <IoMdAdd className="plusOutlinedIcon" />
-                            className="plusOutlinedIcon"
-
-                          />
                           <DefaultModal
                             open={catModelOpen}
                             title="Fonts"
@@ -3717,7 +3774,7 @@ const SelectionComponent = forwardRef((props, ref) => {
                               display: 'flex',
                               gap: '1rem',
                               flexWrap: 'nowrap',
-                              alignItems: "center"
+                              alignItems: 'center',
                             }}
                           >
                             <div className="colorDropdown">
@@ -3730,7 +3787,7 @@ const SelectionComponent = forwardRef((props, ref) => {
                                   },
                                 ]}
                               >
-                                <p className='Selection-Component-SubHeading'>
+                                <p className="Selection-Component-SubHeading">
                                   Category Background Color
                                 </p>
                                 <DropDowns
@@ -3778,12 +3835,12 @@ const SelectionComponent = forwardRef((props, ref) => {
                                 />
                               </Form.Item>
                             </div>
-                            <div className='addNewSalesFiledBTN' onClick={handleUploadColor}>
+                            <div
+                              className="addNewSalesFiledBTN"
+                              onClick={handleUploadColor}
+                            >
                               Add
-                              <IoMdAdd
+                              <IoMdAdd className="plusOutlinedIcon" />
-                                className="plusOutlinedIcon"
-
-                              />
                             </div>
                           </div>
                         </div>
@@ -3878,7 +3935,7 @@ const SelectionComponent = forwardRef((props, ref) => {
                                   },
                                 ]}
                               >
-                                <p className='Selection-Component-SubHeading'>
+                                <p className="Selection-Component-SubHeading">
                                   Category Overall-Background
                                 </p>
 
@@ -3936,12 +3993,12 @@ const SelectionComponent = forwardRef((props, ref) => {
                                 />
                               </Form.Item>
                             </div>
-                            <div className='addNewSalesFiledBTN' onClick={handlecategoryUploadOverallColor}>
+                            <div
+                              className="addNewSalesFiledBTN"
+                              onClick={handlecategoryUploadOverallColor}
+                            >
                               Add
-                              <IoMdAdd
+                              <IoMdAdd className="plusOutlinedIcon" />
-                                className="plusOutlinedIcon"
-
-                              />
                             </div>
                           </div>
                         </div>
@@ -3956,7 +4013,8 @@ const SelectionComponent = forwardRef((props, ref) => {
                       <span className="Selection-Component-selectheading">
                         Selected SubCategory:
                         <span style={{ color: '#009b00' }}>
-                          <HiMenuAlt1 />  {SubCategoryCheckList[0]?.ComponentName}
+                          <HiMenuAlt1 />{' '}
+                          {SubCategoryCheckList[0]?.ComponentName}
                         </span>
                       </span>
                     </div>
@@ -3982,12 +4040,8 @@ const SelectionComponent = forwardRef((props, ref) => {
                         )}
                       </Row>
                     </Checkbox.Group>
-                    <div
+                    <div className="SlecteCatDiv">
-                      className='SlecteCatDiv'
+                      <div className="SlecteCatDivSub2">
-                    >
-                      <div
-                        className='SlecteCatDivSub2'
-                      >
                         <div>
                           <Form.Item
                             name="FontSubcat"
@@ -4011,7 +4065,10 @@ const SelectionComponent = forwardRef((props, ref) => {
                             />
                           </Form.Item>
                         </div>
-                        <div className='addNewSalesFiledBTN' onClick={SubcathandleUploadFonts}>
+                        <div
+                          className="addNewSalesFiledBTN"
+                          onClick={SubcathandleUploadFonts}
+                        >
                           Add
                           <IoMdAdd
                             className="plusOutlinedIcon"
@@ -4135,7 +4192,10 @@ const SelectionComponent = forwardRef((props, ref) => {
                                 />
                               </Form.Item>
                             </div>
-                            <div className='addNewSalesFiledBTN' onClick={SubhandleUploadColor}>
+                            <div
+                              className="addNewSalesFiledBTN"
+                              onClick={SubhandleUploadColor}
+                            >
                               Add
                               <IoMdAdd
                                 className="plusOutlinedIcon"
@@ -4293,7 +4353,10 @@ const SelectionComponent = forwardRef((props, ref) => {
                                 />
                               </Form.Item>
                             </div>
-                            <div className='addNewSalesFiledBTN' onClick={handleSubcategoryUploadOverallColor}>
+                            <div
+                              className="addNewSalesFiledBTN"
+                              onClick={handleSubcategoryUploadOverallColor}
+                            >
                               Add
                               <IoMdAdd
                                 className="plusOutlinedIcon"
@@ -4464,12 +4527,8 @@ const SelectionComponent = forwardRef((props, ref) => {
                         )}
                       </Row>
                     </Checkbox.Group>
-                    <div
+                    <div className="SlecteCatDiv">
-                      className='SlecteCatDiv'
+                      <div className="SlecteCatDivSub2">
-                    >
-                      <div
-                        className='SlecteCatDivSub2'
-                      >
                         <div>
                           <Form.Item
                             name="FontCard"
@@ -4480,7 +4539,7 @@ const SelectionComponent = forwardRef((props, ref) => {
                               },
                             ]}
                           >
-                            <p className='Selection-Component-SubHeading'>
+                            <p className="Selection-Component-SubHeading">
                               Card Font
                             </p>
                             <DropDowns
@@ -4496,7 +4555,10 @@ const SelectionComponent = forwardRef((props, ref) => {
                             />
                           </Form.Item>
                         </div>
-                        <div className='addNewSalesFiledBTN' onClick={CardhandleUploadFonts}>
+                        <div
+                          className="addNewSalesFiledBTN"
+                          onClick={CardhandleUploadFonts}
+                        >
                           Add
                           <IoMdAdd
                             className="plusOutlinedIcon"
@@ -4562,7 +4624,7 @@ const SelectionComponent = forwardRef((props, ref) => {
                               display: 'flex',
                               gap: '1rem',
                               flexWrap: 'nowrap',
-                              alignItems: "center"
+                              alignItems: 'center',
                             }}
                           >
                             <div className="colorDropdown">
@@ -4575,7 +4637,7 @@ const SelectionComponent = forwardRef((props, ref) => {
                                   },
                                 ]}
                               >
-                                <p className='Selection-Component-SubHeading'>
+                                <p className="Selection-Component-SubHeading">
                                   Card Background Color
                                 </p>
                                 <DropDowns
@@ -4623,12 +4685,12 @@ const SelectionComponent = forwardRef((props, ref) => {
                                 />
                               </Form.Item>
                             </div>
-                            <div className='addNewSalesFiledBTN' onClick={handleUploadColorselectCard}>
+                            <div
+                              className="addNewSalesFiledBTN"
+                              onClick={handleUploadColorselectCard}
+                            >
                               Add
-                              <IoMdAdd
+                              <IoMdAdd className="plusOutlinedIcon" />
-                                className="plusOutlinedIcon"
-
-                              />
                             </div>
                           </div>
                         </div>
@@ -4724,7 +4786,7 @@ const SelectionComponent = forwardRef((props, ref) => {
                                   },
                                 ]}
                               >
-                                <p className='Selection-Component-SubHeading'>
+                                <p className="Selection-Component-SubHeading">
                                   Card Overall-Background
                                 </p>
                                 <DropDowns
@@ -4781,12 +4843,12 @@ const SelectionComponent = forwardRef((props, ref) => {
                                 />
                               </Form.Item>
                             </div>
-                            <div className='addNewSalesFiledBTN' onClick={handlecardUploadOverallColor}>
+                            <div
+                              className="addNewSalesFiledBTN"
+                              onClick={handlecardUploadOverallColor}
+                            >
                               Add
-                              <IoMdAdd
+                              <IoMdAdd className="plusOutlinedIcon" />
-                                className="plusOutlinedIcon"
-
-                              />
                             </div>
                           </div>
                         </div>
@@ -4905,7 +4967,8 @@ const SelectionComponent = forwardRef((props, ref) => {
                       <span className="Selection-Component-selectheading">
                         Selected BillTable:{' '}
                         <span style={{ color: '#009b00' }}>
-                          <IoReceiptOutline />  {BillTableCheckList[0]?.ComponentName}
+                          <IoReceiptOutline />{' '}
+                          {BillTableCheckList[0]?.ComponentName}
                         </span>
                       </span>
                     </div>
@@ -4945,12 +5008,8 @@ const SelectionComponent = forwardRef((props, ref) => {
                         )}
                       </Row>
                     </Checkbox.Group>
-                    <div
+                    <div className="SlecteCatDiv">
-                      className='SlecteCatDiv'
+                      <div className="SlecteCatDivSub2">
-                    >
-                      <div
-                        className='SlecteCatDivSub2'
-                      >
                         <div>
                           <Form.Item
                             name="FontTable"
@@ -4961,7 +5020,7 @@ const SelectionComponent = forwardRef((props, ref) => {
                               },
                             ]}
                           >
-                            <p className='Selection-Component-SubHeading'>
+                            <p className="Selection-Component-SubHeading">
                               BillTable Font
                             </p>
                             <DropDowns
@@ -4977,13 +5036,12 @@ const SelectionComponent = forwardRef((props, ref) => {
                             />
                           </Form.Item>
                         </div>
-                        <div className='addNewSalesFiledBTN' onClick={TablehandleUploadFonts}>
+                        <div
+                          className="addNewSalesFiledBTN"
+                          onClick={TablehandleUploadFonts}
+                        >
                           Add
-                          <IoMdAdd
+                          <IoMdAdd className="plusOutlinedIcon" />
-                            className="plusOutlinedIcon"
-
-                          />
-                          
                         </div>
                         <DefaultModal
                           open={TableModelopen}
@@ -5043,7 +5101,7 @@ const SelectionComponent = forwardRef((props, ref) => {
                               display: 'flex',
                               gap: '1rem',
                               flexWrap: 'nowrap',
-                              alignItems: "center"
+                              alignItems: 'center',
                             }}
                           >
                             <div className="colorDropdown">
@@ -5056,7 +5114,7 @@ const SelectionComponent = forwardRef((props, ref) => {
                                   },
                                 ]}
                               >
-                                <p className='Selection-Component-SubHeading'>
+                                <p className="Selection-Component-SubHeading">
                                   BillTable Background Color
                                 </p>
                                 <DropDowns
@@ -5106,12 +5164,12 @@ const SelectionComponent = forwardRef((props, ref) => {
                                 />
                               </Form.Item>
                             </div>
-                            <div className='addNewSalesFiledBTN' onClick={BillhandleUploadColor}>
+                            <div
+                              className="addNewSalesFiledBTN"
+                              onClick={BillhandleUploadColor}
+                            >
                               Add
-                              <IoMdAdd
+                              <IoMdAdd className="plusOutlinedIcon" />
-                                className="plusOutlinedIcon"
-
-                              />
                             </div>
                           </div>
                         </div>
@@ -5194,7 +5252,7 @@ const SelectionComponent = forwardRef((props, ref) => {
                               display: 'flex',
                               gap: '1rem',
                               flexWrap: 'nowrap',
-                              alignItems: "center"
+                              alignItems: 'center',
                             }}
                           >
                             <div className="colorDropdown">
@@ -5207,7 +5265,7 @@ const SelectionComponent = forwardRef((props, ref) => {
                                   },
                                 ]}
                               >
-                                <p className='Selection-Component-SubHeading'>
+                                <p className="Selection-Component-SubHeading">
                                   BillTable Overall-Background
                                 </p>
                                 <DropDowns
@@ -5264,7 +5322,10 @@ const SelectionComponent = forwardRef((props, ref) => {
                                 />
                               </Form.Item>
                             </div>
-                            <div className='addNewSalesFiledBTN' onClick={handleBillingUploadOverallColor}>
+                            <div
+                              className="addNewSalesFiledBTN"
+                              onClick={handleBillingUploadOverallColor}
+                            >
                               Add
                               <IoMdAdd
                                 className="plusOutlinedIcon"
@@ -5405,7 +5466,7 @@ const SelectionComponent = forwardRef((props, ref) => {
                   //       (empData?.UpdateAccess === "Y" || SAAccessCommonMaster?.UpdateAccess === "Y") &&
                   //       Object.keys(templateData)?.length > 0
                   //     ))}
-                  icon={<ArrowRightOutlined color='#fff' />}
+                  icon={<ArrowRightOutlined color="#fff" />}
                   htmlType={true}
                 />
               </div>

src/Pages/BookingScreen/Components/OtherConponents/Reprint/BSReprint.jsx

@@ -30,7 +30,7 @@ import {
   SelectedPrintTemplate,
   GlobalPrinterMappingDtls,
   getPrinterMappingDetails,
-  getPrintSelectionComponentData,
+  // getPrintSelectionComponentData,
 } from '../../../../../Features/ThemeChange/ThemeChange';
 import FormHeader from '../../../../../Pages/PageComponents/FormHeader';
 import { ArrowRightOutlined } from '@ant-design/icons';
@@ -82,10 +82,14 @@ import {
 import { TbSettingsCog } from 'react-icons/tb';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { axiosRetailInstanceData } from '../../../../../Features/AuthenicationToken/AuthenticationToken.js';
-import { MdEdit } from "react-icons/md";
+import { MdEdit } from 'react-icons/md';
 import { v4 as uuidv4 } from 'uuid';
 import { changeOrderOfferDetail } from '../../../../../Features/Offer/Offer.js';
-import { ChangeFullFreeProductList, changeFullOfferAppliedProducts, changeLoyaltyConsumedQuantities } from '../../../../../Features/Offer/Offernew/BookingOffernew.js';
+import {
+  ChangeFullFreeProductList,
+  changeFullOfferAppliedProducts,
+  changeLoyaltyConsumedQuantities,
+} from '../../../../../Features/Offer/Offernew/BookingOffernew.js';
 import { ChangeTotalAmount } from '../../../../../Features/ExteraCharges/ExtraCharges.js';
 import { Radio } from 'antd';
 import ReprintPDFDataShare from './ReprintPDFDataShare.jsx';
@@ -167,7 +171,7 @@ function BSReprint({ setOpenModel = () => { } }) {
   const AuthToken = sessionStorage.getItem('auth');
   const SessionMobileNo = getSession('MobileNo');
   const [dateStrings, setDateStrings] = useState([]);
-  const [type, setType] = useState("Sales");
+  const [type, setType] = useState('Sales');
   const [showShareModal, setShowShareModal] = useState(false);
   // ---- 1. Fetch Function ----
   const fetchData = async ({ queryKey }) => {
@@ -180,7 +184,7 @@ function BSReprint({ setOpenModel = () => { } }) {
         OrderFromDate: dates?.[0] ?? '',
         OrderToDate: dates?.[1] ?? '',
         PageNumber: page,
-        Type: type
+        Type: type,
       })
     ).unwrap();
     if (Response?.data?.statusCode === 1) {
@@ -263,9 +267,8 @@ function BSReprint({ setOpenModel = () => { } }) {
       // UserId: UserId,
     };
     dispatch(getPrinterMappingDetails(data)).unwrap();
-    const Data1 = { AppId, CompId, BranchId };
+    // const Data1 = { AppId, CompId, BranchId };
-    dispatch(getPrintSelectionComponentData(Data1)).unwrap();
+    // dispatch(getPrintSelectionComponentData(Data1)).unwrap();
-
   }, []);
 
   const handleDateChange = (dates, dateStrings) => {
@@ -950,9 +953,8 @@ function BSReprint({ setOpenModel = () => { } }) {
           onClick={async (e) => await handleEditBill(e, row)}
         />
       ),
-    }
+    },
     // ] : [])
-    ,
     {
       title: () => (
         <div
@@ -1195,6 +1197,7 @@ function BSReprint({ setOpenModel = () => { } }) {
   const mutiplePrint = async (printType) => {
     setIsProcessing(true);
     setProcessingProgress(0);
+
     const result = await MobileMultiPdfPrint({
       printerTemplateStyle,
       printDatas,
@@ -1252,15 +1255,16 @@ function BSReprint({ setOpenModel = () => { } }) {
     const isWeightScale = item?.ScaleType === 'weight';
 
     if (isWeightScale) {
-      return acc + (
+      return (
-        Weightasquantity
+        acc +
+        (Weightasquantity
           ? Math.round(Number(item?.SalesQty || item?.OrderQty || 0))
-          : 1
+          : 1)
       );
     }
 
     return acc + Math.round(Number(item?.SalesQty || item?.OrderQty || 0));
-  }, 0)
+  }, 0);
 
   const widthOutTexAmt = table2Data?.[0]?.TaxDetails?.reduce(
     (sum, item) => sum + (item?.WithOutTaxAmount || 0),
@@ -1292,7 +1296,7 @@ function BSReprint({ setOpenModel = () => { } }) {
       OrderQty: item?.SalesQty,
       OrderRate: item?.Rate,
       SellingPrice: item?.Rate,
-      TaxPercentage: (item?.ProdTaxPercentage || 0)
+      TaxPercentage: item?.ProdTaxPercentage || 0,
       // TotalAmt: formatAmount((item.TotalAmt - item.OfferValue)),
     }));
 
@@ -1302,14 +1306,10 @@ function BSReprint({ setOpenModel = () => { } }) {
 
     if (RefDetails?.[0]?.OfferAppliedProductList) {
       dispatch(
-        changeFullOfferAppliedProducts(
+        changeFullOfferAppliedProducts(RefDetails[0]?.OfferAppliedProductList)
-          RefDetails[0]?.OfferAppliedProductList
-        )
       );
     }
 
-
-
     if (CustSuppId) {
       let res = await dispatch(
         getCustomerForHold({
@@ -1331,8 +1331,9 @@ function BSReprint({ setOpenModel = () => { } }) {
       }
 
       if (res?.data?.statusCode === 1) {
-
+        const loyaltyFreeProductOfferApplied = (
-        const loyaltyFreeProductOfferApplied = (RefDetails?.[0]?.OfferAppliedProductList || [])?.filter(
+          RefDetails?.[0]?.OfferAppliedProductList || []
+        )?.filter(
           (off) =>
             off?.FreeProductsList?.OfferMode === 'L' &&
             off?.TableUniqueName === 'FreeProduct'
@@ -1343,14 +1344,20 @@ function BSReprint({ setOpenModel = () => { } }) {
         );
 
         if (customerDetails) {
-          const { CustId, CustName, CustMobile, LoyaltyPointsDetail, TotalLoyaltyPoints } = customerDetails;
+          const {
+            CustId,
+            CustName,
+            CustMobile,
+            LoyaltyPointsDetail,
+            TotalLoyaltyPoints,
+          } = customerDetails;
           const data = {
             CustId: CustId,
             CustName: CustName,
             label: CustName ? CustName : CustMobile,
             value: CustMobile,
             LoyaltyPointsDetail: LoyaltyPointsDetail,
-            TotalLoyaltyPoints: TotalLoyaltyPoints
+            TotalLoyaltyPoints: TotalLoyaltyPoints,
           };
 
           dispatch(changeOrderOfferDetail([...OrderOfferDetails]));
@@ -1383,7 +1390,6 @@ function BSReprint({ setOpenModel = () => { } }) {
             console.log(loyaltyProdQuantities, 'loyaltyProdQuantities');
           }
         }
-
       }
     }
     await dispatch(changeOrderType('Hold'));
@@ -1395,7 +1401,8 @@ function BSReprint({ setOpenModel = () => { } }) {
     await dispatch(changePreviousOrderPayment(OrderPaymentDtl));
     await dispatch(changePreviousOrderOfferDetail(OrderOfferDetails));
     dispatch(changeOrderCardDetails(updated));
-    let temp = updated?.filter((item) => item.OrderType === 'E')
+    let temp = updated
+      ?.filter((item) => item.OrderType === 'E')
       .map((item) => item.InwardDtlId + ' ' + item.BookingTypeName);
     await dispatch(changeSelProdWiseEst(temp));
 
@@ -1406,11 +1413,11 @@ function BSReprint({ setOpenModel = () => { } }) {
       await dispatch(changeEstimateBooking('Sales'));
       await dispatch(ChangeOverAllDiscSales(parseFloat(OverallDisc)));
     }
-  }
+  };
 
   const typeOptions = [
-    { label: "Sales", value: "Sales" },
+    { label: 'Sales', value: 'Sales' },
-    { label: "Estimate", value: "Est" },
+    { label: 'Estimate', value: 'Est' },
   ];
 
   const typeChange = (e) => {
@@ -1455,7 +1462,8 @@ function BSReprint({ setOpenModel = () => { } }) {
       />
       <div style={{ width: '100%' }}>
         <div className="bsreprintmodaltable-flex">
-          {preferenceEstimate && <div>
+          {preferenceEstimate && (
+            <div>
               <Radio.Group
                 options={typeOptions}
                 onChange={typeChange}
@@ -1463,7 +1471,8 @@ function BSReprint({ setOpenModel = () => { } }) {
                 optionType="button"
                 buttonStyle="solid" // optional
               />
-          </div>}
+            </div>
+          )}
           <div>
             <RangePicker
               placeholder={['Start Date', 'End Date']}
@@ -1493,7 +1502,11 @@ function BSReprint({ setOpenModel = () => { } }) {
             }}
           />
           <div>
-            <ImShare fontSize={22} onClick={() => setShowShareModal(true)} style={{ cursor: 'pointer' }} />
+            <ImShare
+              fontSize={22}
+              onClick={() => setShowShareModal(true)}
+              style={{ cursor: 'pointer' }}
+            />
           </div>
           <div>
             {selectedRows.length > 0 && (
@@ -1507,9 +1520,6 @@ function BSReprint({ setOpenModel = () => { } }) {
                   onClick={() => mutiplePrint('whatsapp')}
                   className="icon-whatsapp"
                 />
-                {/* <ReprintPDFDataShare
-                  printData={selectedRows}
-                /> */}
               </div>
             )}
           </div>
@@ -1856,13 +1866,15 @@ function BSReprint({ setOpenModel = () => { } }) {
           </div>
         ))}
 
-      {showShareModal && <ReprintPDFDataShare
+      {showShareModal && (
+        <ReprintPDFDataShare
           printerTemplateStyle={printerTemplateStyle}
           printDatas={printDatas}
           SettingDataSelector={SettingDataSelector}
           open={showShareModal}
           onClose={() => setShowShareModal(false)}
-      />}
+        />
+      )}
     </>
   );
 }

src/Pages/BookingScreen/Forms/DirectSale/DirectSale.jsx

@@ -1,22 +1,58 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
-import { Table, Input, Select, Button } from 'antd';
+  lazy,
-import { PlusOutlined, DeleteOutlined, SaveOutlined, PrinterOutlined } from '@ant-design/icons';
+  Suspense,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Input, Select, Button } from 'antd';
+import {
+  DeleteOutlined,
+  SaveOutlined,
+  PrinterOutlined,
+} from '@ant-design/icons';
 import { Tables } from '../../../../Components/Tables/Table.jsx';
 import { useDispatch } from 'react-redux';
-import { postProductData, getDirectSaleProducts, getAllProductShortCodes, deleteProductData, getDirectSaleSearchedProduct } from '../../../../Features/ProductPage/ProductPage.js';
+import {
+  postProductData,
+  getDirectSaleProducts,
+  getAllProductShortCodes,
+  deleteProductData,
+  getDirectSaleSearchedProduct,
+} from '../../../../Features/ProductPage/ProductPage.js';
 import { getSession, printDiv } from '../../../../Services/Others.js';
 import { Messages } from '../../../../Components/Notifications/Messages.jsx';
-import { FaStarOfLife } from "react-icons/fa6";
+import { FaStarOfLife } from 'react-icons/fa6';
-import { IoMdRefresh } from "react-icons/io";
+import { IoMdRefresh } from 'react-icons/io';
 import StickerPrintModel from '../../../Product/StickerPrintModal.jsx';
 import { getPageStyle, style } from '../../../Product/Printstyles.js';
-import { getBarcodeSessionsIDs, getBarcodeTemplate } from '../../../../Features/Barcode/Barcode.js';
+import {
-import { generateBarcode, generateQRCode, generateQRCodeCopy } from '../../../../Services/utils.js';
+  getBarcodeSessionsIDs,
-import StickerPrintTemplates from '../../../Product/StickerTemplates.jsx';
+  getBarcodeTemplate,
+} from '../../../../Features/Barcode/Barcode.js';
+import {
+  generateBarcode,
+  generateQRCode,
+  generateQRCodeCopy,
+} from '../../../../Services/utils.js';
 import useBarcodeGenerator from './useBarcodeQRGenerator.js';
-
+// Jsx File
-const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatData = [], ProdSubCatData = [], SupplierData = [], activeTab = null }) => {
+const StickerPrintTemplates = lazy(
-
+  () => import('../../../Product/StickerTemplates.jsx')
+);
+// SCss
+import '../../../../Styles/BookingScreen/Components/OtherConponents/Reprint/BSReprint.scss';
+const DirectSale = ({
+  UomData = [],
+  TaxData = [],
+  ProductTypeData = [],
+  ProdCatData = [],
+  ProdSubCatData = [],
+  SupplierData = [],
+  activeTab = null,
+}) => {
   const formRef = useRef();
   const tableRef = useRef();
   const searchInputRef = useRef();
@@ -40,7 +76,7 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
   const [printProductName, setPrintProductName] = useState(false);
   const [productShortCodes, setAllProductShortCodes] = useState([]);
   const [searchText, setSearchText] = useState('');
-    console.log(searchText, "searchText")
+  console.log(searchText, 'searchText');
   const [stickerPrintModalOpen, setStickerPrintModalOpen] = useState(false);
   const [barcodeTemplateDetails, setBarcodeTemplateDetails] = useState([]);
   const [filteredProducts, setFilteredProducts] = useState([]);
@@ -63,12 +99,13 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
     codeType: '',
   });
 
-    console.log((searchText != null && searchText != ''), "filteredProducts")
+  console.log(searchText != null && searchText != '', 'filteredProducts');
 
   const { qrBase64, barcodeBase64 } = useBarcodeGenerator(prodId);
 
   const handleAdd = () => {
-        setDataSource([{
+    setDataSource([
+      {
         key: dataSource.length + 1,
         productName: '',
         shortCode: '',
@@ -78,14 +115,16 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
         prodId: null,
         size: null,
         uomName: null,
-            activeStatus: 'A'
+        activeStatus: 'A',
-        }, ...dataSource]);
+      },
+      ...dataSource,
+    ]);
   };
 
   const handleDelete = async (record) => {
     if (record?.prodId) {
       if (searchText != null && searchText !== '') {
-                setSearchText('')
+        setSearchText('');
         setCurrentPage(1);
         if (searchInputRef.current) {
           searchInputRef.current.value = '';
@@ -98,7 +137,11 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
       };
       const response = await dispatch(deleteProductData(deleteData))?.unwrap();
       if (response?.data?.statusCode === 1) {
-                setMessageData(record.activeStatus === 'A' ? 'Product De-Activated Successfully' : 'Product Activated Successfully');
+        setMessageData(
+          record.activeStatus === 'A'
+            ? 'Product De-Activated Successfully'
+            : 'Product Activated Successfully'
+        );
         setMessageType('success');
         await fetchDirectSaleProducts();
       } else {
@@ -112,28 +155,35 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
       setMessageData('Atleast one empty row should be in table.');
       setMessageType('warning');
     }
-
   };
 
-    const handleChange = useCallback((key, field, value) => {
+  const handleChange = useCallback(
+    (key, field, value) => {
       if (searchText) {
-            setFilteredProducts(prev =>
+        setFilteredProducts((prev) =>
-                prev.map(item =>
+          prev.map((item) =>
             item.key === key ? { ...item, [field]: value } : item
           )
         );
       } else {
-            setDataSource(prev =>
+        setDataSource((prev) =>
-                prev.map(item =>
+          prev.map((item) =>
             item.key === key ? { ...item, [field]: value } : item
           )
         );
       }
-    }, [searchText]);
+    },
+    [searchText]
+  );
 
   const handleSave = async (record) => {
-
+    if (
-        if (!record.productName || !record.sellingPrice || !record.uom || !record.tax || !record?.shortCode) {
+      !record.productName ||
+      !record.sellingPrice ||
+      !record.uom ||
+      !record.tax ||
+      !record?.shortCode
+    ) {
       setMessageData('Please fill all the required fields!');
       setMessageType('warning');
       return;
@@ -157,26 +207,31 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
       CompId: CompId,
       BranchId: BranchId,
       AppId: AppId,
-            ProdType: ProductTypeData?.find(item => item.ConfigName === 'Product')?.ConfigId,
+      ProdType: ProductTypeData?.find((item) => item.ConfigName === 'Product')
-            ProdCat: ProdCatData?.find(item => item.ConfigName === 'General')?.ConfigId,
+        ?.ConfigId,
-            ProdSubCat: ProdSubCatData?.find(item => item.ConfigName === 'General')?.ConfigId,
+      ProdCat: ProdCatData?.find((item) => item.ConfigName === 'General')
+        ?.ConfigId,
+      ProdSubCat: ProdSubCatData?.find((item) => item.ConfigName === 'General')
+        ?.ConfigId,
       QtyBasedPrice: 'N',
       ProdQtywisePriceDetails: [],
       StockAvailable: 'N',
       TokenAvailable: 'N',
       InwardDate: new Date().toJSON(),
-            SuppId: SupplierData?.find(item => item.SuppName?.toLowerCase() === 'self')?.SuppId,
+      SuppId: SupplierData?.find(
+        (item) => item.SuppName?.toLowerCase() === 'self'
+      )?.SuppId,
       AutoGenerateQr: 'N',
       QRCode: null,
       CreatedBy: UserId,
       ProdLogo: '',
       Cess: 0,
-            ProdShortCode: record?.shortCode
+      ProdShortCode: record?.shortCode,
     };
 
     try {
       if (record?.prodId) {
-                console.log('Updating Product')
+        console.log('Updating Product');
       } else {
         const response = await dispatch(postProductData(postData)).unwrap();
         if (response?.data?.statusCode === 1) {
@@ -184,18 +239,22 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
           const size = response?.data?.ProductDetails?.[0]?.Size;
           const uomName = response?.data?.ProductDetails?.[0]?.UomName;
           const totalProducts = response?.data?.ProductDetails?.[0]?.TotalCount;
-                    setSearchText(currentSearchText => {
+          setSearchText((currentSearchText) => {
             if (currentSearchText != null && currentSearchText !== '') {
               setCurrentPage(1);
-                            setTriggerState(prev => prev + 1);
+              setTriggerState((prev) => prev + 1);
               if (searchInputRef.current) {
                 searchInputRef.current.value = '';
               }
               return '';
             } else {
-                            setDataSource(prev => prev.map(item =>
+              setDataSource((prev) =>
-                                item.key === record.key ? { ...item, prodId, size, uomName, totalProducts } : { ...item, totalProducts }
+                prev.map((item) =>
-                            ));
+                  item.key === record.key
+                    ? { ...item, prodId, size, uomName, totalProducts }
+                    : { ...item, totalProducts }
+                )
+              );
             }
             return currentSearchText;
           });
@@ -204,7 +263,6 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
           return;
         }
       }
-
     } catch (error) {
       console.error('Error saving product:', error);
     }
@@ -213,51 +271,68 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
   const handlePrint = async (record) => {
     const exists = isShortCodeDuplicate(record?.shortCode, record?.prodId);
     if (exists) {
-            setMessageData('Short code already exists for another product. Cannot print.');
+      setMessageData(
+        'Short code already exists for another product. Cannot print.'
+      );
       setMessageType('error');
       return;
     }
     setStickerPrintModalOpen(true);
-        setLabelPrintData({ ...record, MRP: record?.sellingPrice || 0, SellPrice: record?.sellingPrice || 0 });
+    setLabelPrintData({
-        setProdId(record?.shortCode + '' + record?.sellingPrice)
+      ...record,
-    }
+      MRP: record?.sellingPrice || 0,
+      SellPrice: record?.sellingPrice || 0,
+    });
+    setProdId(record?.shortCode + '' + record?.sellingPrice);
+  };
 
-    const columns = useMemo(() => [
+  const columns = useMemo(
+    () => [
       {
         title: 'SL.No',
         width: 50,
         align: 'center',
-            render: (_, __, index) => (currentPage - 1) * 10 + index + 1
+        render: (_, __, index) => (currentPage - 1) * 10 + index + 1,
       },
       {
-            title: () => <div style={{ textWrap: 'nowrap', display: "flex", gap: "4px  " }}>Product Name
+        title: () => (
+          <div style={{ textWrap: 'nowrap', display: 'flex', gap: '4px  ' }}>
+            Product Name
             <span>
-                    <FaStarOfLife size={10} color='red' className='requiredIcons' />
+              <FaStarOfLife size={10} color="red" className="requiredIcons" />
             </span>
-            </div>,
+          </div>
+        ),
         dataIndex: 'productName',
         width: 150,
-            render: (text, record) => (
+        render: (text, record) =>
-                record.prodId && editingKey !== record.key ?
+          record.prodId && editingKey !== record.key ? (
-                    <div>{text}</div> :
+            <div>{text}</div>
+          ) : (
             <Input
               value={text}
-                        onChange={(e) => handleChange(record.key, 'productName', e.target.value)}
+              onChange={(e) =>
+                handleChange(record.key, 'productName', e.target.value)
+              }
               placeholder="Enter product name"
             />
-            )
+          ),
       },
       {
-            title: () => <div style={{ textWrap: 'nowrap', display: "flex", gap: "4px  " }}>Short Code
+        title: () => (
+          <div style={{ textWrap: 'nowrap', display: 'flex', gap: '4px  ' }}>
+            Short Code
             <span>
-                    <FaStarOfLife size={10} color='red' className='requiredIcons' />
+              <FaStarOfLife size={10} color="red" className="requiredIcons" />
             </span>
-            </div>,
+          </div>
+        ),
         dataIndex: 'shortCode',
         width: 100,
-            render: (text, record) => (
+        render: (text, record) =>
-                record.prodId && editingKey !== record.key ?
+          record.prodId && editingKey !== record.key ? (
-                    <div>{text}</div> :
+            <div>{text}</div>
+          ) : (
             <Input
               value={text}
               onInput={(e) => {
@@ -269,95 +344,120 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
                 }
               }}
               onChange={(e) => {
-                            const value = e.target.value.replace(/[^a-zA-Z]/g, '').toUpperCase();
+                const value = e.target.value
+                  .replace(/[^a-zA-Z]/g, '')
+                  .toUpperCase();
                 const exists = isShortCodeDuplicate(value, record?.prodId);
                 if (exists && value) {
-                                setMessageData('Short code already exists for another product');
+                  setMessageData(
+                    'Short code already exists for another product'
+                  );
                   setMessageType('error');
                 }
                 handleChange(record.key, 'shortCode', value);
               }}
               placeholder="Short Code"
             />
-            )
+          ),
       },
       {
-            title: () => <div style={{ textWrap: 'nowrap', display: "flex", gap: "4px  " }}>Selling Price
+        title: () => (
+          <div style={{ textWrap: 'nowrap', display: 'flex', gap: '4px  ' }}>
+            Selling Price
             <span>
-                    <FaStarOfLife size={10} color='red' className='requiredIcons' />
+              <FaStarOfLife size={10} color="red" className="requiredIcons" />
             </span>
-            </div>,
+          </div>
+        ),
         dataIndex: 'sellingPrice',
         width: 120,
-            render: (text, record) => (
+        render: (text, record) =>
-                record.prodId && editingKey !== record.key ?
+          record.prodId && editingKey !== record.key ? (
-                    <div>{text}</div> :
+            <div>{text}</div>
+          ) : (
             <Input
               value={text}
               onChange={(e) => {
                 const value = e.target.value.replace(/[^0-9.]/g, '');
                 const parts = value.split('.');
-                            const formatted = parts.length > 2 ? `${parts[0]}.${parts.slice(1).join('')}` : value;
+                const formatted =
+                  parts.length > 2
+                    ? `${parts[0]}.${parts.slice(1).join('')}`
+                    : value;
                 handleChange(record.key, 'sellingPrice', formatted);
               }}
               placeholder="0.00"
             />
-            )
+          ),
       },
       {
-            title: () => <div style={{ textWrap: 'nowrap', display: "flex", gap: "4px  " }}>UOM
+        title: () => (
+          <div style={{ textWrap: 'nowrap', display: 'flex', gap: '4px  ' }}>
+            UOM
             <span>
-                    <FaStarOfLife size={10} color='red' className='requiredIcons' />
+              <FaStarOfLife size={10} color="red" className="requiredIcons" />
             </span>
-            </div>,
+          </div>
+        ),
         dataIndex: 'uom',
         width: 60,
-            render: (text, record) => (
+        render: (text, record) =>
-                record.prodId && editingKey !== record.key ?
+          record.prodId && editingKey !== record.key ? (
-                    <div>{UomData?.find(item => item.ConfigId === text)?.ConfigName || '-'}</div> :
+            <div>
+              {UomData?.find((item) => item.ConfigId === text)?.ConfigName ||
+                '-'}
+            </div>
+          ) : (
             <Select
               disabled={record?.prodId}
-                        className='uom-select'
+              className="uom-select"
               value={text}
               onChange={(value) => handleChange(record.key, 'uom', value)}
               placeholder="UOM"
               style={{ width: '100%' }}
-                        options={UomData?.map(item => ({
+              options={UomData?.map((item) => ({
                 value: item.ConfigId,
-                            label: item.ConfigName
+                label: item.ConfigName,
               }))}
             />
-            )
+          ),
       },
       {
-            title: () => <div style={{ textWrap: 'nowrap', display: "flex", gap: "4px  " }}>Tax
+        title: () => (
+          <div style={{ textWrap: 'nowrap', display: 'flex', gap: '4px  ' }}>
+            Tax
             <span>
-                    <FaStarOfLife size={10} color='red' className='requiredIcons' />
+              <FaStarOfLife size={10} color="red" className="requiredIcons" />
             </span>
-            </div>,
+          </div>
+        ),
         dataIndex: 'tax',
         width: 70,
         render: (text, record) => {
           if (record.prodId && editingKey !== record.key) {
-                    const tax = TaxData?.find(item => item.TaxId === text);
+            const tax = TaxData?.find((item) => item.TaxId === text);
-                    return <div>{tax ? tax?.TaxIdName + ' - ' + `${tax?.TaxPercentage}%` : '-'}</div>;
+            return (
+              <div>
+                {tax ? tax?.TaxIdName + ' - ' + `${tax?.TaxPercentage}%` : '-'}
+              </div>
+            );
           }
 
           return (
             <Select
-                        className='tax-select'
+              className="tax-select"
               value={text}
               disabled={record?.prodId}
               onChange={(value) => handleChange(record.key, 'tax', value)}
               placeholder="Tax"
               style={{ width: '100%' }}
-                        options={TaxData?.map(item => ({
+              options={TaxData?.map((item) => ({
                 value: item.TaxId,
-                            label: `${item.TaxIdName} - ${item.TaxPercentage}%`
+                label: `${item.TaxIdName} - ${item.TaxPercentage}%`,
               }))}
             />
           );
-            }
+        },
       },
       {
         title: 'Save / Print',
@@ -367,55 +467,61 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
           const existingProduct = record?.prodId;
 
           return (
-                    <div className='directsaleBTN' style={{ display: 'flex', gap: '8px', justifyContent: 'center' }}>
+            <div
-                        {!existingProduct && <Button
+              className="directsaleBTN"
+              style={{ display: 'flex', gap: '8px', justifyContent: 'center' }}
+            >
+              {!existingProduct && (
+                <Button
                   icon={<SaveOutlined />}
                   size="small"
                   disabled={existingProduct}
-                            className='save-btn'
+                  className="save-btn"
                   onClick={() => handleSave(record)}
                 >
                   Save
                   {/* {!existingProduct ? 'Save' : 'Update'} */}
-                        </Button>}
+                </Button>
-                        {existingProduct && <Button
+              )}
+              {existingProduct && (
+                <Button
                   icon={<PrinterOutlined />}
                   size="small"
                   disabled={!existingProduct}
                   onClick={() => handlePrint(record)}
                 >
                   Print
-                        </Button>}
+                </Button>
+              )}
             </div>
           );
-            }
+        },
       },
       {
         title: 'Action',
         width: 60,
-            align: "center",
+        align: 'center',
         render: (_, record) => {
           if (record?.activeStatus === 'A') {
-                    return <DeleteOutlined
+            return (
+              <DeleteOutlined
                 onClick={() => handleDelete(record)}
                 style={{ color: 'red', cursor: 'pointer', fontSize: '18px' }}
               />
+            );
           } else {
-                    return <IoMdRefresh
+            return (
+              <IoMdRefresh
                 style={{ color: 'blue', cursor: 'pointer', fontSize: '18px' }}
                 onClick={() => handleDelete(record)}
               />
+            );
           }
-
+        },
-            }
+      },
-        }
+    ],
-    ], [
+    [searchText, editingKey, productShortCodes, UomData, TaxData]
-        searchText,
+  );
-        editingKey,
-        productShortCodes,
-        UomData,
-        TaxData
-    ]);
 
   useEffect(() => {
     if (activeTab === 'directSale' && AppId && CompId && BranchId) {
@@ -425,7 +531,7 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
   }, [activeTab, AppId, BranchId, CompId, currentPage, triggerState]);
 
   useEffect(() => {
-        if (dataSource.every(row => row.prodId)) {
+    if (dataSource.every((row) => row.prodId)) {
       handleAdd();
     }
   }, [dataSource]);
@@ -435,7 +541,8 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
       if (searchText) {
         fetchSearchedProducts();
       } else {
-                setFilteredProducts([{
+        setFilteredProducts([
+          {
             key: 1,
             productName: '',
             shortCode: '',
@@ -445,8 +552,9 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
             prodId: null,
             size: null,
             uomName: null,
-                    activeStatus: 'A'
+            activeStatus: 'A',
-                }]);
+          },
+        ]);
       }
     }, 500);
 
@@ -455,7 +563,11 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
 
   useEffect(() => {
     const handleClickOutside = (event) => {
-            if (tableRef.current && !tableRef.current.contains(event.target) && !event.target.closest('.ant-select-dropdown')) {
+      if (
+        tableRef.current &&
+        !tableRef.current.contains(event.target) &&
+        !event.target.closest('.ant-select-dropdown')
+      ) {
         setEditingKey(null);
       }
     };
@@ -464,7 +576,13 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
   }, []);
 
   useEffect(() => {
-        if (activeTab === 'directSale' && AppId && CompId && BranchId && stickerPrintModalOpen) {
+    if (
+      activeTab === 'directSale' &&
+      AppId &&
+      CompId &&
+      BranchId &&
+      stickerPrintModalOpen
+    ) {
       getBarcodeSessionData();
       fetchBarcodeTemplateDetails();
     }
@@ -476,10 +594,15 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
         AppId: AppId,
         CompId: CompId,
         BranchId: BranchId,
-                prodName: searchText
+        prodName: searchText,
-            }
+      };
-            const response = await dispatch(getDirectSaleSearchedProduct(data))?.unwrap();
+      const response = await dispatch(
-            if (response?.data?.data?.length > 0 && response?.data?.statusCode === 1) {
+        getDirectSaleSearchedProduct(data)
+      )?.unwrap();
+      if (
+        response?.data?.data?.length > 0 &&
+        response?.data?.statusCode === 1
+      ) {
         const products = response?.data?.data?.map((item, index) => ({
           key: index + 1,
           productName: item.ProdName,
@@ -491,9 +614,10 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
           activeStatus: item?.ActiveStatus,
           size: item.Size || 1,
           uomName: item.UomName || 'PCS',
-                    totalProducts: item?.TotalCount
+          totalProducts: item?.TotalCount,
-                }))
+        }));
-                setFilteredProducts([{
+        setFilteredProducts([
+          {
             key: products.length + 1,
             productName: '',
             shortCode: '',
@@ -503,10 +627,13 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
             prodId: null,
             size: null,
             uomName: null,
-                    activeStatus: 'A'
+            activeStatus: 'A',
-                }, ...products]);
+          },
+          ...products,
+        ]);
       } else {
-                setFilteredProducts([{
+        setFilteredProducts([
+          {
             key: 1,
             productName: '',
             shortCode: '',
@@ -516,22 +643,25 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
             prodId: null,
             size: null,
             uomName: null,
-                    activeStatus: 'A'
+            activeStatus: 'A',
-                }]);
+          },
+        ]);
       }
     } catch (error) {
-            console.error(error?.message)
+      console.error(error?.message);
     }
+  };
 
-    }
+  const isShortCodeDuplicate = useCallback(
-
+    (code, prodId) => {
-    const isShortCodeDuplicate = useCallback((code, prodId) => {
       return productShortCodes.some(
-            item =>
+        (item) =>
           item.ProdShortCode.toUpperCase() === code.toUpperCase() &&
           item.ProdId !== prodId
       );
-    }, [productShortCodes]);
+    },
+    [productShortCodes]
+  );
 
   const fetchBarcodeTemplateDetails = async () => {
     const response = await dispatch(
@@ -548,7 +678,10 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
   const getBarcodeSessionData = async () => {
     try {
       let response = await dispatch(getBarcodeSessionsIDs()).unwrap();
-            if (response?.data?.statusCode === 1 && response?.data?.data?.length > 0) {
+      if (
+        response?.data?.statusCode === 1 &&
+        response?.data?.data?.length > 0
+      ) {
         setCrossData(
           response?.data?.data?.filter(
             (item) => !item.ConfigName?.includes('100X13 (55MM Printable Gold)')
@@ -568,11 +701,14 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
         AppId: AppId,
         CompId: CompId,
         BranchId: BranchId,
-                page: currentPage
+        page: currentPage,
-            }
+      };
 
       const response = await dispatch(getDirectSaleProducts(data))?.unwrap();
-            if (response?.data?.statusCode === 1 && response?.data?.data?.length > 0) {
+      if (
+        response?.data?.statusCode === 1 &&
+        response?.data?.data?.length > 0
+      ) {
         const products = response?.data?.data?.map((item, index) => ({
           key: index + 1,
           productName: item.ProdName,
@@ -584,9 +720,10 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
           activeStatus: item?.ActiveStatus,
           size: item.Size || 1,
           uomName: item.UomName || 'PCS',
-                    totalProducts: item?.TotalCount
+          totalProducts: item?.TotalCount,
         }));
-                setDataSource([{
+        setDataSource([
+          {
             key: products.length + 1,
             productName: '',
             shortCode: '',
@@ -596,16 +733,17 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
             prodId: null,
             size: null,
             uomName: null,
-                    activeStatus: 'A'
+            activeStatus: 'A',
-                }, ...products]);
+          },
+          ...products,
+        ]);
       } else {
-                setDataSource([])
+        setDataSource([]);
       }
-
     } catch (error) {
       console.error('Error fetching direct sale products:', error);
     }
-    }
+  };
 
   const fetchAllProductShortCodes = async () => {
     try {
@@ -613,21 +751,23 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
         AppId: AppId,
         CompId: CompId,
         BranchId: BranchId,
-            }
+      };
 
       const response = await dispatch(getAllProductShortCodes(data))?.unwrap();
-            if (response?.data?.statusCode === 1 && response?.data?.data?.length > 0) {
+      if (
+        response?.data?.statusCode === 1 &&
+        response?.data?.data?.length > 0
+      ) {
         setAllProductShortCodes(response?.data?.data);
       } else {
         setAllProductShortCodes([]);
       }
 
       console.log(response);
-
     } catch (error) {
       console.error('Error fetching product short codes:', error);
     }
-    }
+  };
 
   const handlePageChange = (current) => {
     setCurrentPage(current);
@@ -762,12 +902,12 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
   };
 
   const handleModalClose = () => {
-        setCopies(null)
+    setCopies(null);
-        setDropdownValue('')
+    setDropdownValue('');
     setStickerPrintModalOpen(false);
     setLabelPrintData(null);
     setNickName(null);
-        setProdId(null)
+    setProdId(null);
     setMultiProduct(false);
     formRef?.current?.resetFields();
     setPrintReady(false);
@@ -810,7 +950,8 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
   }, []);
 
   return (
-        <div className='direct-sale-container'>
+    <Suspense fallback={<span>Loading ...</span>}>
+      <div className="direct-sale-container">
         <Messages
           messageType={messageType}
           messageData={messageData}
@@ -823,27 +964,45 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
             placeholder="Search Product / Short Code..."
             onChange={(e) => {
               setSearchText(e.target.value);
-                        setCurrentPage(1)
+              setCurrentPage(1);
             }}
           />
         </div>
-            <div style={{ marginBottom: '10px', color: '#666', fontSize: '14px', fontStyle: 'italic' }}>
+        <div
+          style={{
+            marginBottom: '10px',
+            color: '#666',
+            fontSize: '14px',
+            fontStyle: 'italic',
+          }}
+        >
           Note: Click on a row to modify the product details
         </div>
-            <div className='DirectSaleTable' ref={tableRef}>
+        <div className="DirectSaleTable" ref={tableRef}>
           <Tables
             rowKey="prodId"
-                    data={(searchText != null && searchText != '') ? filteredProducts : dataSource}
+            data={
-                    dataSource={(searchText != null && searchText != '') ? filteredProducts : dataSource}
+              searchText != null && searchText != ''
+                ? filteredProducts
+                : dataSource
+            }
+            dataSource={
+              searchText != null && searchText != ''
+                ? filteredProducts
+                : dataSource
+            }
             columns={columns}
             onRow={(record) => ({
-                        onClick: () => record.prodId && setEditingKey(record.key)
+              onClick: () => record.prodId && setEditingKey(record.key),
             })}
             ownPagination={true}
             pagination={{
               current: currentPage,
               onChange: handlePageChange,
-                        total: (searchText != null && searchText != '') ? filteredProducts?.length : ((dataSource[dataSource.length - 1]?.totalProducts || 0) + 1),
+              total:
+                searchText != null && searchText != ''
+                  ? filteredProducts?.length
+                  : (dataSource[dataSource.length - 1]?.totalProducts || 0) + 1,
               pageSize: 11,
               showSizeChanger: false,
               hideOnSinglePage: true,
@@ -852,7 +1011,8 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
           />
         </div>
 
-            {stickerPrintModalOpen && <StickerPrintModel
+        {stickerPrintModalOpen && (
+          <StickerPrintModel
             open={stickerPrintModalOpen}
             handleCancel={handleModalClose}
             formRef={formRef}
@@ -868,7 +1028,9 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
             detail={labelPrintData}
             proName={labelPrintData?.productName}
             nickName={nickName}
-                ProdId={labelPrintData?.shortCode + '' + labelPrintData?.sellingPrice}
+            ProdId={
+              labelPrintData?.shortCode + '' + labelPrintData?.sellingPrice
+            }
             size={labelPrintData?.size}
             // valueStyleColumn={valueStyleColumn}
             // secondValueStyle={secondValueStyle}
@@ -880,7 +1042,8 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
             setProductWiseQrcode={null}
             setNickName={setNickName}
             templateOptions={templateOptions}
-            />}
+          />
+        )}
 
         {printReady && (
           <StickerPrintTemplates
@@ -888,23 +1051,26 @@ const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatD
             copies={copies}
             nickName={nickName}
             proName={labelPrintData?.productName}
-                    ProdId={labelPrintData?.shortCode + '' + labelPrintData?.sellingPrice}
+            ProdId={
+              labelPrintData?.shortCode + '' + labelPrintData?.sellingPrice
+            }
             size={labelPrintData?.size + ' ' + labelPrintData?.uomName}
             detail={labelPrintData}
             templateOptions={templateOptions}
             base64Image={qrBase64}
             QrandbarcodeDatas={null}
             MultiCode={multiProduct}
-                    generateQRCodeCopy={(code) =>
+            generateQRCodeCopy={(code) => generateQRCodeCopy(null, code)}
-                        generateQRCodeCopy(null, code)
+            generateCodeImage={(code, codeType = 'Q') =>
+              generateCodeImage(code, codeType, null)
             }
-                    generateCodeImage={(code, codeType = 'Q') => generateCodeImage(code, codeType, null)}
             imageTagBarcodeAndQR={imageTagBarcodeAndQR}
             dropdownValue={dropdownValue}
             barcodeTemplateDetails={barcodeTemplateDetails}
           />
         )}
       </div>
+    </Suspense>
   );
 };
 

src/Pages/BookingScreen/LayoutSubCategoryFetcher.jsx

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
+import {
+  getLayoutSubCategories,
+  GlobalProductCategorie,
+} from '../../Features/BookingScreen/BookingData/BookingData';
+import { getTemplateData } from '../../Features/ThemeChange/ThemeChange';
+import { getSession } from '../../Services/Others';
+
+const LayoutSubCategoryFetcher = () => {
+  const dispatch = useDispatch();
+
+  const ProdCat = useSelector(GlobalProductCategorie, shallowEqual);
+  const templateData = useSelector(getTemplateData, shallowEqual);
+
+  const CompId = getSession('CompId');
+  const BranchId = getSession('BranchId');
+  const AppId = getSession('AppId');
+
+  useEffect(() => {
+    if (!ProdCat) return;
+
+    const isCategory5 = templateData?.BookingCategory?.[0] === 'Category5';
+    const isLayout2 = templateData?.BookingLayout?.[0] === 'Layout2';
+
+    if (isCategory5 && isLayout2) {
+      dispatch(
+        getLayoutSubCategories({
+          CompId,
+          BranchId,
+          AppId,
+          ProdCat,
+        })
+      );
+    }
+  }, [
+    ProdCat,
+    templateData?.BookingCategory?.[0],
+    templateData?.BookingLayout?.[0],
+  ]);
+
+  return null; // this component renders nothing
+};
+
+export default LayoutSubCategoryFetcher;

src/Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx

@@ -1,7 +1,9 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { lazy, Suspense, useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Tooltip, Badge, Popconfirm, DatePicker } from 'antd';
+import dayjs from 'dayjs';
 import moment from 'moment';
+import { Messages } from '../../../../Components/Notifications/Messages.jsx';
 import { isMobile } from 'react-device-detect';
 import BSNavbar1 from '../../Components/BSNavbar/BSNavbar1';
 import BSNavbar2 from '../../Components/BSNavbar/BSNavbar2';
@@ -12,7 +14,6 @@ import BSBillingTable4 from '../../Components/BSBillingTables/BSBillingTable4/BS
 import BSBillingTable5 from '../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5';
 import BSBillingTable6 from '../../Components/BSBillingTables/BSBillingTable6/BSBTOverall6';
 import BSBillingTable7 from '../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx';
-import { ArrowUpOutlined } from '@ant-design/icons';
 import BSItemCard from '../../Components/BSItemCards/BSItemCard';
 import CategoryHorizontal from '../../Components/BSCategories/BSCategoryHorizontal';
 import SubCategoryVertical from '../../Components/BSSubCategories/BSSubCategoryVertical';
@@ -39,14 +40,12 @@ import {
   GlobalBtoBQuickProductTransfer,
   GlobalOtherSevices,
 } from '../../../../Features/BookingScreen/BookingData/BookingData.js';
+import { useDateStore } from '../../../../Features/BookingScreen/BookingData/DateStore.js';
 import { getSession } from '../../../../Services/Others.js';
-import { Messages } from '../../../../Components/Notifications/Messages.jsx';
-import BSKioskCounterPayment from '../../Components/UtillComponents/BSKioskCounterPayment.jsx';
 import {
   getKioskDatas,
   globalKioskSalesCount,
 } from '../../../../Features/Kiosk/kiosk.js';
-import SalesCountComponent from '../SalesCountComponent.jsx';
 import PozoKioskIcon from '../../Components/UtillComponents/Pozo retail icons/PozoKioskIcon.jsx';
 import {
   GLobalSadminUserPin,
@@ -54,33 +53,57 @@ import {
   checkSession,
   ApplicationPreferences,
 } from '../../../../Features/BrachLogin/BranchLogin';
-import SAdminUserNotification from '../../Components/BookingFunctionality/SAdminUserNotification.jsx';
 import {
   getBookingStatus,
   GlobalBookingStatus,
 } from '../../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail.js';
-import TooltipWrapper from '../../../../Components/Tooltip/Tooltip.jsx';
-import RetailBookingClosing from '../RetailBookingClose.jsx';
-import { PutBookingClose } from '../../../../Features/BookingScreen/RetailBookingClose.js';
-import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
-import ListOfSalesInvoices from '../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx';
-import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
-import BSComboItemCard from '../../Components/BSItemCards/BSComboItemCard.jsx';
-import BranchTransferComponent from '../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx';
-import BSExpireProductsList from '../../Components/UtillComponents/BSExpireProductsList.jsx';
-
-import BSOtherServiceItemCard from '../../Components/BSItemCards/BSOtherServiceItemCard.jsx';
 import BSOtherServicesHorizontalcat from '../../Components/BSCategories/BSOtherServicesHorizontalcat';
-import BSNavbar3 from '../../Components/BSNavbar/BSNavbar3.jsx';
+import { PutBookingClose } from '../../../../Features/BookingScreen/RetailBookingClose.js';
-import SalesCountForStandard from '../SalesCountForStandard.jsx';
+import TooltipWrapper from '../../../../Components/Tooltip/Tooltip.jsx';
-import StandardTable from '../../Components/BSBillingTables/StandardTable/StandardTable.jsx';
+import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
-import { useDateStore } from '../../../../Features/BookingScreen/BookingData/DateStore.js';
+import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
-import dayjs from 'dayjs';
+import SAdminUserNotification from '../../Components/BookingFunctionality/SAdminUserNotification.jsx';
-import BsBookingitemCard from '../../Components/BSItemCards/BsBookingitemCard.jsx';
+// Jsx Files
-import { CiShop } from 'react-icons/ci';
+const BSKioskCounterPayment = lazy(
-import BranchName from '../BranchName.jsx';
+  () => import('../../Components/UtillComponents/BSKioskCounterPayment.jsx')
-import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';
+);
-import PlanExpireNotification from '../PlanExpireNotification.jsx';
+const RetailBookingClosing = lazy(() => import('../RetailBookingClose.jsx'));
+const ListOfSalesInvoices = lazy(
+  () =>
+    import('../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx')
+);
+const BSComboItemCard = lazy(
+  () => import('../../Components/BSItemCards/BSComboItemCard.jsx')
+);
+const BranchTransferComponent = lazy(
+  () =>
+    import('../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx')
+);
+const BSExpireProductsList = lazy(
+  () => import('../../Components/UtillComponents/BSExpireProductsList.jsx')
+);
+const BSOtherServiceItemCard = lazy(
+  () => import('../../Components/BSItemCards/BSOtherServiceItemCard.jsx')
+);
+const BSNavbar3 = lazy(() => import('../../Components/BSNavbar/BSNavbar3.jsx'));
+const SalesCountForStandard = lazy(
+  () => import('../SalesCountForStandard.jsx')
+);
+const StandardTable = lazy(
+  () =>
+    import('../../Components/BSBillingTables/StandardTable/StandardTable.jsx')
+);
+const BsBookingitemCard = lazy(
+  () => import('../../Components/BSItemCards/BsBookingitemCard.jsx')
+);
+const ComboSalesBillTable = lazy(
+  () =>
+    import('../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx')
+);
+const SalesCountComponent = lazy(() => import('../SalesCountComponent.jsx'));
+const PlanExpireNotification = lazy(
+  () => import('../PlanExpireNotification.jsx')
+);
 
 const BSLayout1 = () => {
   const dispatch = useDispatch();
@@ -157,16 +180,17 @@ const BSLayout1 = () => {
     (i) => i.SettingIdName === 'DineIn'
   )?.[0];
   let containerHeight = isMobile
-    ? AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+    ? AppExpDate?.RemainingDays <= 7 ||
+      AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '575px'
       : '595px'
-    : UserType != 'Super Admin' &&
+    : (UserType != 'Super Admin' &&
           UserType != 'Super Admin User' &&
-        AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+          AppExpDate?.RemainingDays <= 7) ||
+        AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '96vh'
       : '99vh';
 
-
   useEffect(() => {
     if (AppId && CompId && BranchId && UserId) {
       fetchBookingStatus();
@@ -224,8 +248,6 @@ const BSLayout1 = () => {
     // setBadgeCount(length);
   };
 
- 
-  
   const onComplete = useCallback(() => {
     setMessageData(null);
     setMessageType(null);
@@ -298,6 +320,8 @@ const BSLayout1 = () => {
   };
   // BSLayout1Data?.BookingNavbar?.[1]?.some((item) => item?.OptionName === "AddCustomer")
   return (
+    <Suspense fallback={<div>Loading…</div>}>
+      {' '}
       <>
         <Messages
           messageType={messageType}
@@ -306,7 +330,9 @@ const BSLayout1 = () => {
         />
         {UserType != 'Super Admin' &&
           UserType != 'Super Admin User' &&
-        (AppExpDate?.RemainingDays <= 7 || AppExpDate === 'undefined' || AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
+          (AppExpDate?.RemainingDays <= 7 ||
+            AppExpDate === 'undefined' ||
+            AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
             <PlanExpireNotification />
           )}
         <div
@@ -327,7 +353,10 @@ const BSLayout1 = () => {
             }}
           >
             {BookingNavbar != 'Navbar3' ? (
-            <div className="Layout-bill-container" style={{ marginTop: '9px' }}>
+              <div
+                className="Layout-bill-container"
+                style={{ marginTop: '9px' }}
+              >
                 <div
                   className="Layout-bill-Subcontainer"
                   style={{ width: OtherServicesglobal ? '10%' : '100%' }}
@@ -381,7 +410,10 @@ const BSLayout1 = () => {
                             >
                               <PozoKioskIcon
                                 onClick={() => openModalKiosk()}
-                              style={{ cursor: 'pointer', fontSize: '1.5rem' }}
+                                style={{
+                                  cursor: 'pointer',
+                                  fontSize: '1.5rem',
+                                }}
                                 className="iconsize"
                               />
                             </Badge>
@@ -468,7 +500,10 @@ const BSLayout1 = () => {
                         )}
                       </div>
                       <div style={{ marginLeft: '10px' }}>
-                      <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
+                        <TooltipWrapper
+                          title={'E-way Bill'}
+                          isMobile={isMobile}
+                        >
                           {''}
                           <BSEwayBillicon
                             style={{ cursor: 'pointer', marginTop: '5px' }}
@@ -613,20 +648,14 @@ const BSLayout1 = () => {
                       <BSBillingTable7 />
                     )}
                     {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
-                  {BSLayout1Data?.BookingBilling?.[0] == 'StandardBilling' && (
+                    {BSLayout1Data?.BookingBilling?.[0] ==
+                      'StandardBilling' && (
                       <div className="BSCategory2New">
                         <StandardTable />
                       </div>
                     )}
                   </>
                 )}
-              {/* <div className="salesStoreName"
-                style={{
-                  color: SelectedBillColor?.['FontColor'],
-                  backgroundColor: SelectedBillColor?.['BackgroundColor'],
-                }}>
-              <BranchName/>
-              </div> */}
               </div>
             </div>
           </div>
@@ -644,6 +673,7 @@ const BSLayout1 = () => {
           />
         )}
       </>
+    </Suspense>
   );
 };
 

src/Pages/BookingScreen/Template/BSLayout2/BSLayout2.jsx

@@ -110,6 +110,7 @@ const SalesCountForStandard = lazy(
   () => import('../SalesCountForStandard.jsx')
 );
 import BsBookingitemCard from '../../Components/BSItemCards/BsBookingitemCard.jsx';
+import LayoutSubCategoryFetcher from '../../LayoutSubCategoryFetcher.jsx';
 const ListOfSalesInvoices = lazy(
   () =>
     import('../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx')
@@ -182,12 +183,14 @@ const BSLayout2 = () => {
     (i) => i.SettingIdName === 'DineIn'
   )?.[0];
   let containerHeight = isMobile
-    ? AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+    ? AppExpDate?.RemainingDays <= 7 ||
+      AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '575px'
       : ''
-    : UserType != 'Super Admin' &&
+    : (UserType != 'Super Admin' &&
           UserType != 'Super Admin User' &&
-        AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+          AppExpDate?.RemainingDays <= 7) ||
+        AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '96vh'
       : '99vh';
 
@@ -210,7 +213,6 @@ const BSLayout2 = () => {
       preference?.PreferredStatus == 'Y'
   );
 
-
   useEffect(() => {
     fetchAmount();
     if (
@@ -334,7 +336,9 @@ const BSLayout2 = () => {
       <div ref={elementRef} style={{ backgroundColor: '#fff' }}>
         {UserType != 'Super Admin' &&
           UserType != 'Super Admin User' &&
-          (AppExpDate?.RemainingDays <= 7 || AppExpDate === 'undefined' || AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
+          (AppExpDate?.RemainingDays <= 7 ||
+            AppExpDate === 'undefined' ||
+            AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
             <Suspense fallback={<div>Loading...</div>}>
               <PlanExpireNotification />
             </Suspense>
@@ -679,6 +683,8 @@ const BSLayout2 = () => {
           />
         </Suspense>
       )}
+
+      <LayoutSubCategoryFetcher />
     </>
   );
 };

src/Pages/BookingScreen/Template/BSLayout3/BSLayout3.jsx

@@ -1,10 +1,15 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, {
+  useEffect,
+  useState,
+  useCallback,
+  lazy,
+  Suspense,
+  useMemo,
+} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import moment from 'moment';
 import { Tooltip, Badge, Popconfirm } from 'antd';
 import { isMobile } from 'react-device-detect';
-import BSNavbar1 from '../../Components/BSNavbar/BSNavbar1';
-import BSNavbar2 from '../../Components/BSNavbar/BSNavbar2';
 import CategoryHorizontal from '../../Components/BSCategories/BSCategoryHorizontal';
 import SubCategoryHorizontal from '../../Components/BSSubCategories/BSSubCategoryHorizontal';
 import BSItemCard from '../../Components/BSItemCards/BSItemCard';
@@ -12,8 +17,8 @@ import BSBillingTable1 from '../../Components/BSBillingTables/BSBillingTable1/BS
 import BSBillingTable2 from '../../Components/BSBillingTables/BSBillingTable2/BSBillingTable2';
 import BSBillingTable3 from '../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall';
 import BSBillingTable4 from '../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4Full';
-import BSBillingTable5 from '../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5';
 import BSBillingTable6 from '../../Components/BSBillingTables/BSBillingTable6/BSBTOverall6';
+import BSBillingTable5 from '../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5';
 import BSBillingTable7 from '../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx';
 import { dynamicComponentProps } from '../DynamicComponentProps.js';
 import {
@@ -26,13 +31,10 @@ import {
   SelectedGlobalSubCatgColorDetail,
   StoredSessionData,
 } from '../../../../Features/ThemeChange/ThemeChange';
-import { ArrowUpOutlined } from '@ant-design/icons';
-import { settingDataSelector } from '../../../../Features/PreferenceMaster/PreferenceMaster.js';
 import {
   GlobalSalesDetailData,
   getSalesDetailData,
   GlobalCombosearch,
-  GlobalOrderCardDetails,
   PreferenceData,
   GlobalOrderStatus,
   GlobalAppExpDateData,
@@ -40,46 +42,77 @@ import {
   GlobalOtherSevices,
 } from '../../../../Features/BookingScreen/BookingData/BookingData.js';
 import { getSession } from '../../../../Services/Others.js';
-import BSKioskCounterPayment from '../../Components/UtillComponents/BSKioskCounterPayment.jsx';
+import { PutBookingClose } from '../../../../Features/BookingScreen/RetailBookingClose.js';
 import {
   getKioskDatas,
   globalKioskSalesCount,
 } from '../../../../Features/Kiosk/kiosk.js';
-import PozoKioskIcon from '../../Components/UtillComponents/Pozo retail icons/PozoKioskIcon.jsx';
 import {
   GLobalSadminUserPin,
   putSadminUserExit,
   checkSession,
   ApplicationPreferences,
-} from '../../../../Features/BrachLogin/BranchLogin';
+} from '../../../../Features/BrachLogin/BranchLogin.js';
+// Icons
+import PozoKioskIcon from '../../Components/UtillComponents/Pozo retail icons/PozoKioskIcon.jsx';
+import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
+import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
 import { Messages } from '../../../../Components/Notifications/Messages.jsx';
 import SAdminUserNotification from '../../Components/BookingFunctionality/SAdminUserNotification.jsx';
-import '../../../../Styles/BookingScreen/Template/BSLayout3/BSLayout3.scss';
-import SalesCountComponent from '../SalesCountComponent.jsx';
 import {
   getBookingStatus,
   GlobalBookingStatus,
 } from '../../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail.js';
 import TooltipWrapper from '../../../../Components/Tooltip/Tooltip.jsx';
 import RetailBookingClosing from '../RetailBookingClose.jsx';
-import { PutBookingClose } from '../../../../Features/BookingScreen/RetailBookingClose.js';
+// Jsx Files
-import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
+const SalesCountComponent = lazy(() => import('../SalesCountComponent.jsx'));
-import ListOfSalesInvoices from '../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx';
+const BSKioskCounterPayment = lazy(
-import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
+  () => import('../../Components/UtillComponents/BSKioskCounterPayment.jsx')
-import BSComboItemCard from '../../Components/BSItemCards/BSComboItemCard.jsx';
+);
-import BranchTransferComponent from '../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx';
+const ListOfSalesInvoices = lazy(
-import BSExpireProductsList from '../../Components/UtillComponents/BSExpireProductsList.jsx';
+  () =>
+    import('../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx')
+);
+const BSComboItemCard = lazy(
+  () => import('../../Components/BSItemCards/BSComboItemCard.jsx')
+);
+const BranchTransferComponent = lazy(
+  () =>
+    import('../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx')
+);
+const BSExpireProductsList = lazy(
+  () => import('../../Components/UtillComponents/BSExpireProductsList.jsx')
+);
+const BSOtherServiceItemCard = lazy(
+  () => import('../../Components/BSItemCards/BSOtherServiceItemCard.jsx')
+);
+const BSOtherServicesHorizontalcat = lazy(
+  () => import('../../Components/BSCategories/BSOtherServicesHorizontalcat')
+);
+const BSNavbar3 = lazy(() => import('../../Components/BSNavbar/BSNavbar3.jsx'));
+const SalesCountForStandard = lazy(
+  () => import('../SalesCountForStandard.jsx')
+);
+const StandardTable = lazy(
+  () =>
+    import('../../Components/BSBillingTables/StandardTable/StandardTable.jsx')
+);
+const ComboSalesBillTable = lazy(
+  () =>
+    import('../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx')
+);
+const PlanExpireNotification = lazy(
+  () => import('../PlanExpireNotification.jsx')
+);
+const BSNavbar1 = lazy(() => import('../../Components/BSNavbar/BSNavbar1'));
+const BSNavbar2 = lazy(() => import('../../Components/BSNavbar/BSNavbar2'));
+// Scss
+import '../../../../Styles/BookingScreen/Template/BSLayout3/BSLayout3.scss';
+
 const subDirectory = import.meta.env.BASE_URL;
 const commonDirectory = import.meta.env.COMMON_BASE_URL;
-import BSOtherServiceItemCard from '../../Components/BSItemCards/BSOtherServiceItemCard.jsx';
+
-import BSOtherServicesHorizontalcat from '../../Components/BSCategories/BSOtherServicesHorizontalcat';
-import BSNavbar3 from '../../Components/BSNavbar/BSNavbar3.jsx';
-import SalesCountForStandard from '../SalesCountForStandard.jsx';
-import StandardTable from '../../Components/BSBillingTables/StandardTable/StandardTable.jsx';
-import { CiShop } from 'react-icons/ci';
-import BranchName from '../BranchName.jsx';
-import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';
-import PlanExpireNotification from '../PlanExpireNotification.jsx';
 const BSLayout3 = () => {
   const dispatch = useDispatch();
   const { action, selectedProducts } = useSelector(
@@ -106,10 +139,12 @@ const BSLayout3 = () => {
   const BookingStatus = useSelector(GlobalBookingStatus);
   const appPreferences = useSelector(ApplicationPreferences);
   const commonModulePreference = appPreferences?.find(
-    (preference) => preference?.PreferredCatName === "Common Module"
+    (preference) => preference?.PreferredCatName === 'Common Module'
   )?.PreferenceCatDetails;
   const sportsAppPreference = commonModulePreference?.find(
-    (preference) => preference?.PreferredSubCatName === "SportsApp" && preference?.PreferredStatus == 'Y'
+    (preference) =>
+      preference?.PreferredSubCatName === 'SportsApp' &&
+      preference?.PreferredStatus == 'Y'
   );
   const CheckBookingStatus =
     BookingStatus?.find((item) => item.ScreenType === 'Booking')
@@ -124,10 +159,13 @@ const BSLayout3 = () => {
   const BookingSubCategory = BSLayout3Data?.BookingSubCategory;
   const BookingCard = BSLayout3Data?.BookingCard;
   const BookingBilling = BSLayout3Data?.BookingBilling?.[0];
- 
+  const animations = ['example1', 'example2', 'example3'];
-  const DineInAccess = SettingDataSelector?.[0]?.SettingDtlDetails.filter(
+  let ss = animations[count];
+  const DineInAccess = useMemo(() => {
+    return SettingDataSelector?.[0]?.SettingDtlDetails.filter(
       (i) => i.SettingIdName === 'DineIn'
     )?.[0];
+  }, [SettingDataSelector]);
   const [ListOfInvoices, setListOfInvoices] = useState(false);
   const AppId = SessionData?.AppId;
   const CompId = SessionData?.CompId;
@@ -136,12 +174,14 @@ const BSLayout3 = () => {
   const UserType = SessionData?.UserType;
   const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');
   let containerHeight = isMobile
-    ? AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+    ? AppExpDate?.RemainingDays <= 7 ||
+      AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '576px'
       : '590px'
-    : UserType != 'Super Admin' &&
+    : (UserType != 'Super Admin' &&
           UserType != 'Super Admin User' &&
-      AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+          AppExpDate?.RemainingDays <= 7) ||
+        AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '95vh'
       : '99vh';
   const SAdminuserPin = useSelector(GLobalSadminUserPin);
@@ -162,7 +202,6 @@ const BSLayout3 = () => {
     }
   }, [SessionData]);
 
- 
   const fetchKioskDatas = async () => {
     let data = {
       CompId: CompId,
@@ -261,6 +300,7 @@ const BSLayout3 = () => {
     setListOfInvoices(false);
   };
   return (
+    <Suspense fallback={<div>Suspense Loading...</div>}>
       <>
         <Messages
           messageType={messageType}
@@ -269,7 +309,9 @@ const BSLayout3 = () => {
         />
         {UserType != 'Super Admin' &&
           UserType != 'Super Admin User' &&
-        (AppExpDate?.RemainingDays <= 7 || AppExpDate === 'undefined' || AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
+          (AppExpDate?.RemainingDays <= 7 ||
+            AppExpDate === 'undefined' ||
+            AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
             <PlanExpireNotification />
           )}
         <div
@@ -282,29 +324,41 @@ const BSLayout3 = () => {
             {BookingNavbar == 'Navbar3' && <BSNavbar3 />}
           </div>
           <div
-          className={BookingNavbar != 'Navbar3' ? "BSLayout3" : "BSLayout3Standard"}
+            className={
+              BookingNavbar != 'Navbar3' ? 'BSLayout3' : 'BSLayout3Standard'
+            }
             style={{
               backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
             }}
           >
             {BookingNavbar != 'Navbar3' ? (
-            <div className="Layout-bill-container" style={{ marginTop: '9px' }}>
+              <div
-              <div className="Layout-bill-Subcontainer" style={{ width: OtherServicesglobal ? "10%" : "100%" }}>
+                className="Layout-bill-container"
-                {UserType !== 'Employee' &&
+                style={{ marginTop: '9px' }}
+              >
+                <div
+                  className="Layout-bill-Subcontainer"
+                  style={{ width: OtherServicesglobal ? '10%' : '100%' }}
+                >
+                  {UserType !== 'Employee' && (
                     <div className="pricing-name-details">
                       {PricingAppPricingName?.[0]?.PricingName +
                         ' / ' +
                         PricingAppPricingName?.[0]?.Type}
                     </div>
-                }
+                  )}
-                {!OtherServicesglobal && <SalesCountComponent
+                  {!OtherServicesglobal && (
+                    <SalesCountComponent
                       DineInAccess={DineInAccess}
                       GlobalsalesDetailData={GlobalsalesDetailData}
-                />}
+                    />
-                {!OtherServicesglobal && SessionData?.FeatureAddonData?.FeatureDtls?.find(
+                  )}
+                  {!OtherServicesglobal &&
+                    SessionData?.FeatureAddonData?.FeatureDtls?.find(
                       (item) =>
                         item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
-                ) && !sportsAppPreference && (
+                    ) &&
+                    !sportsAppPreference && (
                       <div
                         style={{
                           pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
@@ -313,7 +367,11 @@ const BSLayout3 = () => {
                       >
                         <Tooltip title={'Kiosk Sales'}>
                           {''}
-                        <Badge count={badgeCount} offset={[-10, 3]} size="small">
+                          <Badge
+                            count={badgeCount}
+                            offset={[-10, 3]}
+                            size="small"
+                          >
                             <PozoKioskIcon
                               onClick={() => openModalKiosk()}
                               style={{ cursor: 'pointer', fontSize: '1.5rem' }}
@@ -324,7 +382,10 @@ const BSLayout3 = () => {
                       </div>
                     )}
                   {!OtherServicesglobal && (
-                  <TooltipWrapper title={'Low Stock Alerts'} isMobile={isMobile}>
+                    <TooltipWrapper
+                      title={'Low Stock Alerts'}
+                      isMobile={isMobile}
+                    >
                       {' '}
                       <BSExpireProductsList />
                     </TooltipWrapper>
@@ -335,7 +396,8 @@ const BSLayout3 = () => {
                       closeKioskModal={closeModalKiosk}
                     />
                   )}
-                {SAdminuserPin?.length > 0 && UserType != 'Super Admin User' && (
+                  {SAdminuserPin?.length > 0 &&
+                    UserType != 'Super Admin User' && (
                       <div>
                         <SAdminUserNotification
                           SAdminuserPin={SAdminuserPin}
@@ -346,9 +408,15 @@ const BSLayout3 = () => {
                       </div>
                     )}
 
-                {!OtherServicesglobal && <> {CheckBookingStatus == 'Open' ? (
+                  {!OtherServicesglobal && (
-                  <div style={{ marginLeft: "10px" }}>
+                    <>
-                    <TooltipWrapper title={'Booking Close'} isMobile={isMobile}>
+                      {' '}
+                      {CheckBookingStatus == 'Open' ? (
+                        <div style={{ marginLeft: '10px' }}>
+                          <TooltipWrapper
+                            title={'Booking Close'}
+                            isMobile={isMobile}
+                          >
                             {' '}
                             <BookingCloseIcon
                               onClick={OpenBookingModal}
@@ -365,8 +433,11 @@ const BSLayout3 = () => {
                           </TooltipWrapper>
                         </div>
                       ) : (
-                  <div style={{ marginLeft: "10px" }}>
+                        <div style={{ marginLeft: '10px' }}>
-                    <TooltipWrapper title="Booking Open" isMobile={isMobile}>
+                          <TooltipWrapper
+                            title="Booking Open"
+                            isMobile={isMobile}
+                          >
                             <Popconfirm
                               placement="leftTop"
                               title="Booking Open"
@@ -387,12 +458,13 @@ const BSLayout3 = () => {
                                 />
                               </span>
                             </Popconfirm>
-
                           </TooltipWrapper>
                         </div>
-                )} </>}
+                      )}{' '}
-                {!OtherServicesglobal &&
+                    </>
-                  <div style={{ marginLeft: "10px" }}>
+                  )}
+                  {!OtherServicesglobal && (
+                    <div style={{ marginLeft: '10px' }}>
                       <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
                         {''}
                         <BSEwayBillicon
@@ -400,20 +472,20 @@ const BSLayout3 = () => {
                           onClick={OpenListOfInvoices}
                         />
                       </TooltipWrapper>
-                  </div>}
+                    </div>
+                  )}
                 </div>
               </div>
-          ) :
+            ) : (
-            <SalesCountForStandard
+              <>
-              PricingAppPricingName={PricingAppPricingName}
+                <SalesCountForStandard />
-              DineInAccess={DineInAccess}
+              </>
-              GlobalsalesDetailData={GlobalsalesDetailData}
+            )}
-            />
-          }
             <div
               className="BsLayout3-ContentDiv"
               style={{
-              backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
+                backgroundColor:
+                  GlobalLayoutColorDetail?.OverallBackgroundColor,
               }}
             >
               <div className="BSCategory3-Contentcont">
@@ -526,20 +598,14 @@ const BSLayout3 = () => {
                       <BSBillingTable7 />
                     )}
                     {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
-                  {BSLayout3Data?.BookingBilling?.[0] == 'StandardBilling' && (
+                    {BSLayout3Data?.BookingBilling?.[0] ==
+                      'StandardBilling' && (
                       <div className="BSCategory2New">
                         <StandardTable />
                       </div>
                     )}
                   </>
                 )}
-              {/* <div className="salesStoreName"
-                style={{
-                  color: SelectedBillColor?.['FontColor'],
-                  backgroundColor: SelectedBillColor?.['BackgroundColor'],
-                }}>
-                <BranchName/>
-              </div> */}
               </div>
             </div>
           </div>
@@ -557,6 +623,7 @@ const BSLayout3 = () => {
           />
         )}
       </>
+    </Suspense>
   );
 };
 

src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx

@@ -1,21 +1,43 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import {lazy, Suspense, useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import moment from 'moment';
 import { Tooltip, Badge, Popconfirm } from 'antd';
 import { isMobile } from 'react-device-detect';
-import { ArrowUpOutlined } from '@ant-design/icons';
 import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
-import BSNavbar1 from '../../Components/BSNavbar/BSNavbar1';
+const BSNavbar1 = lazy(() => import('../../Components/BSNavbar/BSNavbar1'));
-import BSNavbar2 from '../../Components/BSNavbar/BSNavbar2';
+const BSNavbar2 = lazy(() => import('../../Components/BSNavbar/BSNavbar2'));
-import CategoryVertical from '../../Components/BSCategories/BSCategoryVertical';
+const CategoryVertical = lazy(
-import BSItemCard from '../../Components/BSItemCards/BSItemCard';
+  () => import('../../Components/BSCategories/BSCategoryVertical')
-import BSBillingTable1 from '../../Components/BSBillingTables/BSBillingTable1/BSBTOverall1';
+);
-import BSBillingTable2 from '../../Components/BSBillingTables/BSBillingTable2/BSBillingTable2';
+const BSItemCard = lazy(
-import BSBillingTable3 from '../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall';
+  () => import('../../Components/BSItemCards/BSItemCard')
-import BSBillingTable4 from '../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4Full';
+);
-import BSBillingTable5 from '../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5';
+const BSBillingTable1 = lazy(
-import BSBillingTable6 from '../../Components/BSBillingTables/BSBillingTable6/BSBTOverall6';
+  () => import('../../Components/BSBillingTables/BSBillingTable1/BSBTOverall1')
-import BSBillingTable7 from '../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx';
+);
+const BSBillingTable2 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable2/BSBillingTable2')
+);
+const BSBillingTable3 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall')
+);
+const BSBillingTable4 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4Full')
+);
+const BSBillingTable5 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5')
+);
+const BSBillingTable6 = lazy(
+  () => import('../../Components/BSBillingTables/BSBillingTable6/BSBTOverall6')
+);
+const BSBillingTable7 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx')
+);
 import { dynamicComponentProps } from '../DynamicComponentProps.js';
 import {
   getTemplateData,
@@ -51,31 +73,66 @@ import {
 } from '../../../../Features/BrachLogin/BranchLogin';
 import { Messages } from '../../../../Components/Notifications/Messages.jsx';
 import SAdminUserNotification from '../../Components/BookingFunctionality/SAdminUserNotification.jsx';
-import '../../../../Styles/BookingScreen/Template/BSLayout4/BSLayout4.scss';
+const SalesCountComponent = lazy(() => import('../SalesCountComponent.jsx'));
-import SalesCountComponent from '../SalesCountComponent.jsx';
 import {
   getBookingStatus,
   GlobalBookingStatus,
 } from '../../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail.js';
 import { PutBookingClose } from '../../../../Features/BookingScreen/RetailBookingClose.js';
 import TooltipWrapper from '../../../../Components/Tooltip/Tooltip.jsx';
-import RetailBookingClosing from '../RetailBookingClose.jsx';
+const RetailBookingClosing = lazy(() => import('../RetailBookingClose.jsx'));
-import ListOfSalesInvoices from '../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx';
-import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
-import BSComboItemCard from '../../Components/BSItemCards/BSComboItemCard.jsx';
-import BranchTransferComponent from '../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx';
-import BSExpireProductsList from '../../Components/UtillComponents/BSExpireProductsList.jsx';
-import BSOtherServiceItemCard from '../../Components/BSItemCards/BSOtherServiceItemCard.jsx';
-import BSOtherServicesHorizontalcat from '../../Components/BSCategories/BSOtherServicesHorizontalcat';
-import BSOtherServicesVerticalcat from '../../Components/BSCategories/BSOtherServicesVerticalcat.jsx';
-import BSNavbar3 from '../../Components/BSNavbar/BSNavbar3.jsx';
-import SalesCountForStandard from '../SalesCountForStandard.jsx';
-import StandardTable from '../../Components/BSBillingTables/StandardTable/StandardTable.jsx';
-import { CiShop } from 'react-icons/ci';
-import BranchName from '../BranchName.jsx';
-import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';
-import PlanExpireNotification from '../PlanExpireNotification.jsx';
 
+const ListOfSalesInvoices = lazy(
+  () =>
+    import('../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx')
+);
+
+const BSEwayBillicon = lazy(
+  () => import('../../Components/UtillComponents/BSEwayBillicon.jsx')
+);
+
+const BSComboItemCard = lazy(
+  () => import('../../Components/BSItemCards/BSComboItemCard.jsx')
+);
+
+const BranchTransferComponent = lazy(
+  () =>
+    import('../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx')
+);
+
+const BSExpireProductsList = lazy(
+  () => import('../../Components/UtillComponents/BSExpireProductsList.jsx')
+);
+
+const BSOtherServiceItemCard = lazy(
+  () => import('../../Components/BSItemCards/BSOtherServiceItemCard.jsx')
+);
+
+const BSOtherServicesVerticalcat = lazy(
+  () => import('../../Components/BSCategories/BSOtherServicesVerticalcat.jsx')
+);
+
+const BSNavbar3 = lazy(() => import('../../Components/BSNavbar/BSNavbar3.jsx'));
+
+const SalesCountForStandard = lazy(
+  () => import('../SalesCountForStandard.jsx')
+);
+
+const StandardTable = lazy(
+  () =>
+    import('../../Components/BSBillingTables/StandardTable/StandardTable.jsx')
+);
+
+const ComboSalesBillTable = lazy(
+  () =>
+    import('../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx')
+);
+import PlanExpireNotification from '../PlanExpireNotification.jsx';
+// Scss
+import '../../../../Styles/BookingScreen/Template/BSLayout4/BSLayout4.scss';
+
+const subDirectory = import.meta.env.BASE_URL;
+const commonDirectory = import.meta.env.COMMON_BASE_URL;
 
 const BSLayout4 = () => {
   const dispatch = useDispatch();
@@ -103,10 +160,12 @@ const BSLayout4 = () => {
   const SelectedBillColor = useSelector(SelectedGlobalBillingColorDetail);
   const appPreferences = useSelector(ApplicationPreferences);
   const commonModulePreference = appPreferences?.find(
-    (preference) => preference?.PreferredCatName === "Common Module"
+    (preference) => preference?.PreferredCatName === 'Common Module'
   )?.PreferenceCatDetails;
   const sportsAppPreference = commonModulePreference?.find(
-    (preference) => preference?.PreferredSubCatName === "SportsApp" && preference?.PreferredStatus == 'Y'
+    (preference) =>
+      preference?.PreferredSubCatName === 'SportsApp' &&
+      preference?.PreferredStatus == 'Y'
   );
   // const [AppExpDate, setAppExpDate] = useState(0);
   const [Kioskopen, setKioskopen] = useState(false);
@@ -130,12 +189,14 @@ const BSLayout4 = () => {
   const UserType = SessionData?.UserType;
   const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');
   let containerHeight = isMobile
-    ? AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+    ? AppExpDate?.RemainingDays <= 7 ||
+      AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '575px'
       : '590px'
-    : UserType != 'Super Admin' &&
+    : (UserType != 'Super Admin' &&
           UserType != 'Super Admin User' &&
-      AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+          AppExpDate?.RemainingDays <= 7) ||
+        AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '96vh'
       : '99vh';
   const [ListOfInvoices, setListOfInvoices] = useState(false);
@@ -203,7 +264,6 @@ const BSLayout4 = () => {
     setKioskopen(false);
   };
 
-  
   const handlePopOverOpen = () => {
     setPopOverOpen(!popOverOpen);
   };
@@ -257,6 +317,7 @@ const BSLayout4 = () => {
     setBookingModalOpen(false);
   };
   return (
+    <Suspense fallback={<div>Loading...</div>}>
       <>
         <Messages
           messageType={messageType}
@@ -265,7 +326,9 @@ const BSLayout4 = () => {
         />
         {UserType != 'Super Admin' &&
           UserType != 'Super Admin User' &&
-        (AppExpDate?.RemainingDays <= 7 || AppExpDate === 'undefined' || AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
+          (AppExpDate?.RemainingDays <= 7 ||
+            AppExpDate === 'undefined' ||
+            AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
             <PlanExpireNotification />
           )}
         <div
@@ -279,21 +342,29 @@ const BSLayout4 = () => {
           </div>
           {BookingNavbar != 'Navbar3' ? (
             <div className="Layout-bill-container" style={{ margin: '0' }}>
-            <div className="Layout-bill-Subcontainer" style={{ width: OtherServicesglobal ? "10%" : "100%" }}>
+              <div
-              {UserType !== 'Employee' &&
+                className="Layout-bill-Subcontainer"
+                style={{ width: OtherServicesglobal ? '10%' : '100%' }}
+              >
+                {UserType !== 'Employee' && (
                   <div className="pricing-name-details">
                     {PricingAppPricingName?.[0]?.PricingName +
                       ' / ' +
                       PricingAppPricingName?.[0]?.Type}
                   </div>
-              }
+                )}
-              {!OtherServicesglobal && <SalesCountComponent
+                {!OtherServicesglobal && (
+                  <SalesCountComponent
                     DineInAccess={DineInAccess}
                     GlobalsalesDetailData={GlobalsalesDetailData}
-              />}
+                  />
-              {!OtherServicesglobal && SessionData?.FeatureAddonData?.FeatureDtls?.find(
+                )}
-                (item) => item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+                {!OtherServicesglobal &&
-              ) && !sportsAppPreference && (
+                  SessionData?.FeatureAddonData?.FeatureDtls?.find(
+                    (item) =>
+                      item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+                  ) &&
+                  !sportsAppPreference && (
                     <div
                       style={{
                         pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
@@ -301,7 +372,11 @@ const BSLayout4 = () => {
                       }}
                     >
                       <Tooltip title={'Kiosk Sales'}>
-                      <Badge count={badgeCount} offset={[-10, 3]} size="small">
+                        <Badge
+                          count={badgeCount}
+                          offset={[-10, 3]}
+                          size="small"
+                        >
                           <PozoKioskIcon
                             onClick={() => openModalKiosk()}
                             style={{ cursor: 'pointer', fontSize: '1.5rem' }}
@@ -312,7 +387,10 @@ const BSLayout4 = () => {
                     </div>
                   )}
                 {!OtherServicesglobal && (
-                <TooltipWrapper title={'Low Stock Alerts'} isMobile={isMobile}>
+                  <TooltipWrapper
+                    title={'Low Stock Alerts'}
+                    isMobile={isMobile}
+                  >
                     {' '}
                     <BSExpireProductsList />
                   </TooltipWrapper>
@@ -323,7 +401,8 @@ const BSLayout4 = () => {
                     closeKioskModal={closeModalKiosk}
                   />
                 )}
-              {SAdminuserPin?.length > 0 && UserType != 'Super Admin User' && (
+                {SAdminuserPin?.length > 0 &&
+                  UserType != 'Super Admin User' && (
                     <div>
                       <SAdminUserNotification
                         SAdminuserPin={SAdminuserPin}
@@ -333,9 +412,13 @@ const BSLayout4 = () => {
                       />
                     </div>
                   )}
-              {CheckBookingStatus == 'Open' ? !OtherServicesglobal && (
+                {CheckBookingStatus == 'Open' ? (
-                <div style={{ marginLeft: "10px" }}>
+                  !OtherServicesglobal && (
-                  <TooltipWrapper title={'Booking Close'} isMobile={isMobile}>
+                    <div style={{ marginLeft: '10px' }}>
+                      <TooltipWrapper
+                        title={'Booking Close'}
+                        isMobile={isMobile}
+                      >
                         {' '}
                         <BookingCloseIcon
                           onClick={OpenBookingModal}
@@ -351,8 +434,9 @@ const BSLayout4 = () => {
                                         >Booking Close</button> */}
                       </TooltipWrapper>
                     </div>
+                  )
                 ) : (
-                <div style={{ marginLeft: "10px" }}>
+                  <div style={{ marginLeft: '10px' }}>
                     <TooltipWrapper title="Booking Open" isMobile={isMobile}>
                       <Popconfirm
                         placement="leftTop"
@@ -374,12 +458,11 @@ const BSLayout4 = () => {
                           />
                         </span>
                       </Popconfirm>
-
                     </TooltipWrapper>
                   </div>
                 )}
-              {!OtherServicesglobal &&
+                {!OtherServicesglobal && (
-                <div style={{ marginLeft: "10px" }}>
+                  <div style={{ marginLeft: '10px' }}>
                     <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
                       {''}
                       <BSEwayBillicon
@@ -387,16 +470,17 @@ const BSLayout4 = () => {
                         onClick={OpenListOfInvoices}
                       />
                     </TooltipWrapper>
-                </div>}
+                  </div>
+                )}
               </div>
             </div>
-        ) :
+          ) : (
             <SalesCountForStandard
               PricingAppPricingName={PricingAppPricingName}
               DineInAccess={DineInAccess}
               GlobalsalesDetailData={GlobalsalesDetailData}
             />
-        }
+          )}
           <div
             className="Bslayout4_overall"
             style={{
@@ -407,7 +491,8 @@ const BSLayout4 = () => {
               <div
                 className="Bslayout4_ctg"
                 style={{
-                backgroundColor: SelectedCatgColor?.['OverallBackgroundColor'],
+                  backgroundColor:
+                    SelectedCatgColor?.['OverallBackgroundColor'],
                 }}
               >
                 {!OtherServicesglobal && (
@@ -432,7 +517,8 @@ const BSLayout4 = () => {
               <div
                 className="Bslayout4_card"
                 style={{
-                backgroundColor: SelectedCardColor?.['OverallBackgroundColor'],
+                  backgroundColor:
+                    SelectedCardColor?.['OverallBackgroundColor'],
                   width: '100vw',
                   display: 'flex',
                 }}
@@ -525,6 +611,7 @@ const BSLayout4 = () => {
           />
         )}
       </>
+    </Suspense>
   );
 };
 

src/Pages/BookingScreen/Template/BSLayout5/BSLayout5.jsx

@@ -1,17 +1,42 @@
-import { React, useCallback, useEffect, useState } from 'react';
+import {lazy,useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { isMobile } from 'react-device-detect';
 import moment from 'moment';
 import { Tooltip, Badge, Popconfirm } from 'antd';
-import BSNavbar1 from '../../Components/BSNavbar/BSNavbar1';
+
-import BSNavbar2 from '../../Components/BSNavbar/BSNavbar2';
+const BSNavbar1 = lazy(() => import('../../Components/BSNavbar/BSNavbar1'));
-import BSBillingTable1 from '../../Components/BSBillingTables/BSBillingTable1/BSBTOverall1';
+
-import BSBillingTable2 from '../../Components/BSBillingTables/BSBillingTable2/BSBillingTable2';
+const BSNavbar2 = lazy(() => import('../../Components/BSNavbar/BSNavbar2'));
-import BSBillingTable3 from '../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall';
+
+const BSBillingTable1 = lazy(
+  () => import('../../Components/BSBillingTables/BSBillingTable1/BSBTOverall1')
+);
+
+const BSBillingTable2 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable2/BSBillingTable2')
+);
+
+const BSBillingTable3 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall')
+);
+
 import BSBillingTable4 from '../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4Full';
-import BSBillingTable5 from '../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5';
+
-import BSBillingTable6 from '../../Components/BSBillingTables/BSBillingTable6/BSBTOverall6';
+const BSBillingTable5 = lazy(
-import BSBillingTable7 from '../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx';
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5')
+);
+
+const BSBillingTable6 = lazy(
+  () => import('../../Components/BSBillingTables/BSBillingTable6/BSBTOverall6')
+);
+
+const BSBillingTable7 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx')
+);
 import BSItemCard from '../../Components/BSItemCards/BSItemCard';
 import CategoryVertical from '../../Components/BSCategories/BSCategoryVertical';
 import { dynamicComponentProps } from '../DynamicComponentProps.js';
@@ -45,7 +70,6 @@ import {
   globalKioskSalesCount,
 } from '../../../../Features/Kiosk/kiosk.js';
 import SalesCountComponent from '../SalesCountComponent.jsx';
-import '../../../../Styles/BookingScreen/Template/BSLayout5/BSLayout5.scss';
 import PozoKioskIcon from '../../Components/UtillComponents/Pozo retail icons/PozoKioskIcon.jsx';
 import {
   GLobalSadminUserPin,
@@ -66,9 +90,11 @@ import RetailBookingClosing from '../RetailBookingClose.jsx';
 import ListOfSalesInvoices from '../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx';
 import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
 import BSComboItemCard from '../../Components/BSItemCards/BSComboItemCard.jsx';
-import BranchTransferComponent from '../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx';
+const BranchTransferComponent = lazy(
+  () =>
+    import('../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx')
+);
 import BSExpireProductsList from '../../Components/UtillComponents/BSExpireProductsList.jsx';
-
 import BSOtherServiceItemCard from '../../Components/BSItemCards/BSOtherServiceItemCard.jsx';
 import BSOtherServicesHorizontalcat from '../../Components/BSCategories/BSOtherServicesHorizontalcat';
 import BSOtherServicesVerticalcat from '../../Components/BSCategories/BSOtherServicesVerticalcat.jsx';
@@ -79,6 +105,8 @@ import { CiShop } from 'react-icons/ci';
 import BranchName from '../BranchName.jsx';
 import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';
 import PlanExpireNotification from '../PlanExpireNotification.jsx';
+const subDirectory = import.meta.env.BASE_URL;
+const commonDirectory = import.meta.env.COMMON_BASE_URL;
 
 const BSLayout5 = () => {
   const dispatch = useDispatch();
@@ -115,13 +143,15 @@ const BSLayout5 = () => {
   const DineInAccess = SettingDataSelector?.[0]?.SettingDtlDetails.filter(
     (i) => i.SettingIdName === 'DineIn'
   )?.[0];
+  const AppName = SessionData?.AppName;
   const AppId = SessionData?.AppId;
   const CompId = SessionData?.CompId;
   const BranchId = SessionData?.BranchId;
   const UserId = SessionData?.UserId;
   const UserType = SessionData?.UserType;
   const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');
-  
+  const animations = ['example1', 'example2', 'example3'];
+  let ss = animations[count];
   let containerHeight = isMobile
     ? AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '580px'

src/Pages/BookingScreen/Template/BSLayout6/BSLayout6.jsx

@@ -1,19 +1,48 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, lazy, Suspense } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { isMobile } from 'react-device-detect';
 import moment from 'moment';
 import { Tooltip, Badge, Popconfirm } from 'antd';
-import BSNavbar1 from '../../Components/BSNavbar/BSNavbar1';
+const BSNavbar1 = lazy(() => import('../../Components/BSNavbar/BSNavbar1'));
-import BSNavbar2 from '../../Components/BSNavbar/BSNavbar2';
+
-import BSBillingTable1 from '../../Components/BSBillingTables/BSBillingTable1/BSBTOverall1';
+const BSNavbar2 = lazy(() => import('../../Components/BSNavbar/BSNavbar2'));
-import BSBillingTable2 from '../../Components/BSBillingTables/BSBillingTable2/BSBillingTable2';
+
-import BSBillingTable3 from '../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall';
+const BSBillingTable1 = lazy(
-import BSBillingTable4 from '../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4Full';
+  () => import('../../Components/BSBillingTables/BSBillingTable1/BSBTOverall1')
-import BSBillingTable5 from '../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5';
+);
-import BSBillingTable6 from '../../Components/BSBillingTables/BSBillingTable6/BSBTOverall6';
+
-import BSBillingTable7 from '../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx';
+const BSBillingTable2 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable2/BSBillingTable2')
+);
+
+const BSBillingTable3 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall')
+);
+
+const BSBillingTable4 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4Full')
+);
+
+const BSBillingTable5 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5')
+);
+
+const BSBillingTable6 = lazy(
+  () => import('../../Components/BSBillingTables/BSBillingTable6/BSBTOverall6')
+);
+
+const BSBillingTable7 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx')
+);
 import BSItemCard from '../../Components/BSItemCards/BSItemCard';
-import CategoryHorizontal from '../../Components/BSCategories/BSCategoryHorizontal';
+const CategoryHorizontal = lazy(
+  () => import('../../Components/BSCategories/BSCategoryHorizontal')
+);
 import { dynamicComponentProps } from '../DynamicComponentProps.js';
 import {
   GlobalPricingAppPricingName,
@@ -55,7 +84,6 @@ import {
 import { Messages } from '../../../../Components/Notifications/Messages.jsx';
 import SAdminUserNotification from '../../Components/BookingFunctionality/SAdminUserNotification.jsx';
 import SalesCountComponent from '../SalesCountComponent.jsx';
-import '../../../../Styles/BookingScreen/Template/BSLayout6/BSLayout6.scss';
 import {
   getBookingStatus,
   GlobalBookingStatus,
@@ -64,18 +92,29 @@ import { PutBookingClose } from '../../../../Features/BookingScreen/RetailBookin
 import TooltipWrapper from '../../../../Components/Tooltip/Tooltip.jsx';
 import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
 import RetailBookingClosing from '../RetailBookingClose.jsx';
-import ListOfSalesInvoices from '../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx';
+const ListOfSalesInvoices = lazy(
-import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
+  () =>
-import BSComboItemCard from '../../Components/BSItemCards/BSComboItemCard.jsx';
+    import('../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx')
-import BranchTransferComponent from '../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx';
+);
-import BSExpireProductsList from '../../Components/UtillComponents/BSExpireProductsList.jsx';
+const BSEwayBillicon = lazy(
+  () => import('../../Components/UtillComponents/BSEwayBillicon.jsx')
+);
+const BSComboItemCard = lazy(
+  () => import('../../Components/BSItemCards/BSComboItemCard.jsx')
+);
+const BranchTransferComponent = lazy(
+  () =>
+    import('../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx')
+);
+const BSExpireProductsList = lazy(
+  () => import('../../Components/UtillComponents/BSExpireProductsList.jsx')
+);
+
 import BSOtherServiceItemCard from '../../Components/BSItemCards/BSOtherServiceItemCard.jsx';
 import BSOtherServicesHorizontalcat from '../../Components/BSCategories/BSOtherServicesHorizontalcat';
 import BSNavbar3 from '../../Components/BSNavbar/BSNavbar3.jsx';
 import SalesCountForStandard from '../SalesCountForStandard.jsx';
 import StandardTable from '../../Components/BSBillingTables/StandardTable/StandardTable.jsx';
-import { CiShop } from 'react-icons/ci';
-import BranchName from '../BranchName.jsx';
 import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';
 import PlanExpireNotification from '../PlanExpireNotification.jsx';
 const BSLayout6 = () => {
@@ -112,10 +151,12 @@ const BSLayout6 = () => {
   const AppExpDate = useSelector(GlobalAppExpDateData);
   const [screenHeight, setScreenHeight] = useState(window?.innerHeight);
   // const [AppExpDate, setAppExpDate] = useState(0);
+  const [count, setcount] = useState(0);
   const BookingNavbar = BSLayout6Data?.BookingNavbar?.[0];
   const BookingCategory = BSLayout6Data?.BookingCategory;
   const BookingCard = BSLayout6Data?.BookingCard;
   const BookingBilling = BSLayout6Data?.BookingBilling?.[0];
+  const AppName = SessionData?.AppName;
   const AppId = SessionData?.AppId;
   const CompId = SessionData?.CompId;
   const BranchId = SessionData?.BranchId;
@@ -128,12 +169,9 @@ const BSLayout6 = () => {
   )?.[0];
 
   const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');
-  const tableData = useSelector(GlobalOrderCardDetails);
   const PricingAppPricingName = useSelector(GlobalPricingAppPricingName);
   const SAdminuserPin = useSelector(GLobalSadminUserPin);
 
-  const SelectedBillColor = useSelector(SelectedGlobalBillingColorDetail);
-
   const [messageType, setMessageType] = useState(null);
   const [messageData, setMessageData] = useState(null);
   const [popOverOpen, setPopOverOpen] = useState(false);
@@ -149,7 +187,6 @@ const BSLayout6 = () => {
     }
   }, [SessionData]);
 
- 
   useEffect(() => {
     if (AppId && CompId && BranchId && UserId) {
       fetchBookingStatus();
@@ -185,16 +222,17 @@ const BSLayout6 = () => {
   };
 
   let containerHeight = isMobile
-    ? AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+    ? AppExpDate?.RemainingDays <= 7 ||
+      AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '577px'
       : '595px'
-    : UserType != 'Super Admin' &&
+    : (UserType != 'Super Admin' &&
           UserType != 'Super Admin User' &&
-        AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+          AppExpDate?.RemainingDays <= 7) ||
+        AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '96vh'
       : '99vh';
 
-  
   useEffect(() => {
     function handleResize() {
       setScreenHeight(window.innerHeight);
@@ -207,7 +245,6 @@ const BSLayout6 = () => {
     };
   }, []);
 
- 
   const openModalKiosk = () => {
     setKioskopen(true);
   };
@@ -277,6 +314,7 @@ const BSLayout6 = () => {
     setBookingModalOpen(false);
   };
   return (
+    <Suspense fallback={<div>Loading components...</div>}>
       <>
         <Messages
           messageType={messageType}
@@ -285,7 +323,9 @@ const BSLayout6 = () => {
         />
         {UserType != 'Super Admin' &&
           UserType != 'Super Admin User' &&
-        (AppExpDate?.RemainingDays <= 30 || AppExpDate === 'undefined' || AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
+          (AppExpDate?.RemainingDays <= 30 ||
+            AppExpDate === 'undefined' ||
+            AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
             <PlanExpireNotification />
           )}
 
@@ -547,7 +587,8 @@ const BSLayout6 = () => {
                       <BSBillingTable7 />
                     )}
                     {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
-                  {BSLayout6Data?.BookingBilling?.[0] == 'StandardBilling' && (
+                    {BSLayout6Data?.BookingBilling?.[0] ==
+                      'StandardBilling' && (
                       <div
                         className="BSCategory2New"
                         style={{
@@ -583,6 +624,7 @@ const BSLayout6 = () => {
           )}
         </div>
       </>
+    </Suspense>
   );
 };
 export default BSLayout6;

src/Pages/BookingScreen/Template/BSLayout7/BSCombo1.jsx

@@ -1,17 +1,38 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, lazy, Suspense } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import moment from 'moment';
 import { Tooltip, Badge, Popconfirm } from 'antd';
-import BSBillingTable1 from '../../Components/BSBillingTables/BSBillingTable1/BSBillingTable1';
+const BSBillingTable1 = lazy(
-import BSBillingTable2 from '../../Components/BSBillingTables/BSBillingTable2/BsBill2';
+  () =>
-import BSBillingTable3 from '../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3';
+    import('../../Components/BSBillingTables/BSBillingTable1/BSBillingTable1')
-import BSBillingTable4 from '../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4';
+);
-import BSBillingTable5 from '../../Components/BSBillingTables/BSBillingTable5/BsBill';
+const BSBillingTable2 = lazy(
-import BSBillingTable6 from '../../Components/BSBillingTables/BSBillingTable6/BSBillingTable6';
+  () => import('../../Components/BSBillingTables/BSBillingTable2/BsBill2')
-import BSBillingTable7 from '../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7';
+);
-import BSC1Payment from '../../Components/BSCombo/BSC1Payment';
+const BSBillingTable3 = lazy(
-import BSC1NavBar from '../../Components/BSCombo/BSC1NavBar';
+  () =>
-import BSC1Search from '../../Components/BSCombo/BSC1Search';
+    import('../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3')
+);
+const BSBillingTable4 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4')
+);
+const BSBillingTable5 = lazy(
+  () => import('../../Components/BSBillingTables/BSBillingTable5/BsBill')
+);
+const BSBillingTable6 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable6/BSBillingTable6')
+);
+const BSBillingTable7 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7')
+);
+
+// Combo components (lazy)
+const BSC1Payment = lazy(() => import('../../Components/BSCombo/BSC1Payment'));
+const BSC1NavBar = lazy(() => import('../../Components/BSCombo/BSC1NavBar'));
+const BSC1Search = lazy(() => import('../../Components/BSCombo/BSC1Search'));
 import {
   GlobalCombosearch,
   GlobalPayementloader,
@@ -29,8 +50,13 @@ import {
 import { isMobile } from 'react-device-detect';
 import { ArrowUpOutlined } from '@ant-design/icons';
 import { getSession } from '../../../../Services/Others.js';
-import BSNavBarComboSearch from '../../Components/UtillComponents/BSNavBarComboSearch.jsx';
+const BSNavBarComboSearch = lazy(
-import BSKioskCounterPayment from '../../Components/UtillComponents/BSKioskCounterPayment.jsx';
+  () => import('../../Components/UtillComponents/BSNavBarComboSearch.jsx')
+);
+
+const BSKioskCounterPayment = lazy(
+  () => import('../../Components/UtillComponents/BSKioskCounterPayment.jsx')
+);
 import {
   getKioskDatas,
   globalKioskSalesCount,
@@ -58,21 +84,43 @@ import {
 import { PutBookingClose } from '../../../../Features/BookingScreen/RetailBookingClose.js';
 import TooltipWrapper from '../../../../Components/Tooltip/Tooltip.jsx';
 import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
-import RetailBookingClosing from '../RetailBookingClose.jsx';
+const RetailBookingClosing = lazy(() => import('../RetailBookingClose.jsx'));
-import ListOfSalesInvoices from '../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx';
+
-import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
+const ListOfSalesInvoices = lazy(
-import BranchTransferComponent from '../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx';
+  () =>
-import BSExpireProductsList from '../../Components/UtillComponents/BSExpireProductsList.jsx';
+    import('../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx')
-import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';
+);
+
+const BranchTransferComponent = lazy(
+  () =>
+    import('../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx')
+);
+
+const BSExpireProductsList = lazy(
+  () => import('../../Components/UtillComponents/BSExpireProductsList.jsx')
+);
+
+const ComboSalesBillTable = lazy(
+  () =>
+    import('../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx')
+);
 import { GiBasket } from 'react-icons/gi';
 import { FaRegKeyboard } from 'react-icons/fa';
 import { CgSearchLoading } from 'react-icons/cg';
 import { DefaultModal } from '../../../../Components/Modal/DefaultModal.jsx';
-import MultipleSearch from '../../Components/UtillComponents/MultipleSearch.jsx';
+const MultipleSearch = lazy(
-import VerfiedProducts from '../../Components/BSNavbar/verfiedProduct/VerfiedProducts.jsx';
+  () => import('../../Components/UtillComponents/MultipleSearch.jsx')
+);
+
+const VerfiedProducts = lazy(
+  () => import('../../Components/BSNavbar/verfiedProduct/VerfiedProducts.jsx')
+);
 import ShortcutKeyHelper from '../../Components/UtillComponents/ShortcutKeyHelper.jsx';
 import PlanExpireNotification from '../PlanExpireNotification.jsx';
 
+const subDirectory = import.meta.env.BASE_URL;
+const commonDirectory = import.meta.env.COMMON_BASE_URL;
+
 export default function BSCombo1() {
   const dispatch = useDispatch();
   const { action, selectedProducts } = useSelector(
@@ -123,6 +171,7 @@ export default function BSCombo1() {
       item.SettingIdName === 'VerifyProduct' && item?.SettingValue === 'Y'
   );
 
+  const AppName = SessionData?.AppName;
   const AppId = SessionData?.AppId;
   const CompId = SessionData?.CompId;
   const BranchId = SessionData?.BranchId;
@@ -134,30 +183,11 @@ export default function BSCombo1() {
       ?.ScreenStatus ?? 'Open';
   const [BookingModalOpen, setBookingModalOpen] = useState(false);
   const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');
-
+  const animations = ['example1', 'example2', 'example3'];
+  let ss = animations[count];
   const [ListOfInvoices, setListOfInvoices] = useState(false);
   const [ComboDropDown, setComboDropDown] = useState();
 
-  const [isAltPressed, setIsAltPressed] = useState(false);
-
-  useEffect(() => {
-    const handleKeyDown = (e) => {
-      if (e.key === 'F2') setIsAltPressed(true);
-    };
-
-    const handleKeyUp = (e) => {
-      if (e.key === 'F2') setIsAltPressed(false);
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    window.addEventListener('keyup', handleKeyUp);
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-      window.removeEventListener('keyup', handleKeyUp);
-    };
-  }, []);
-
   useEffect(() => {
     fetchAmount();
     if (
@@ -169,6 +199,15 @@ export default function BSCombo1() {
     }
   }, [SessionData]);
 
+  useEffect(() => {
+    if (AppExpDate?.RemainingDays <= 7) {
+      const interval = setInterval(() => {
+        setcount((prevCount) => (prevCount >= 2 ? 0 : prevCount + 1));
+      }, 22000);
+
+      return () => clearInterval(interval);
+    }
+  }, [count == 2]);
   useEffect(() => {
     Combodata();
     if (AppId && CompId && BranchId && UserId) {
@@ -294,6 +333,7 @@ export default function BSCombo1() {
     }
   };
   return (
+    <Suspense fallback={<div>Loading...</div>}>
       <>
         <Messages
           messageType={messageType}
@@ -374,7 +414,11 @@ export default function BSCombo1() {
                     >
                       <Tooltip title={'Kiosk Sales'}>
                         {''}
-                      <Badge count={badgeCount} offset={[-10, 3]} size="small">
+                        <Badge
+                          count={badgeCount}
+                          offset={[-10, 3]}
+                          size="small"
+                        >
                           <PozoKioskIcon
                             onClick={() => openModalKiosk()}
                             style={{ cursor: 'pointer', fontSize: '1.5rem' }}
@@ -391,7 +435,8 @@ export default function BSCombo1() {
                     closeKioskModal={closeModalKiosk}
                   />
                 )}
-              {SAdminuserPin?.length > 0 && UserType != 'Super Admin User' && (
+                {SAdminuserPin?.length > 0 &&
+                  UserType != 'Super Admin User' && (
                     <div>
                       <SAdminUserNotification
                         SAdminuserPin={SAdminuserPin}
@@ -423,7 +468,10 @@ export default function BSCombo1() {
                       style={{ marginLeft: '2px' }}
                       className="BookingCloseCombo"
                     >
-                    <TooltipWrapper title={'Booking Close'} isMobile={isMobile}>
+                      <TooltipWrapper
+                        title={'Booking Close'}
+                        isMobile={isMobile}
+                      >
                         {' '}
                         <BookingCloseIcon
                           onClick={OpenBookingModal}
@@ -486,7 +534,10 @@ export default function BSCombo1() {
                           fontSize: '1.5rem',
                         }}
                       >
-                      <TooltipWrapper title="Combo Product" isMobile={isMobile}>
+                        <TooltipWrapper
+                          title="Combo Product"
+                          isMobile={isMobile}
+                        >
                           <GiBasket
                             fill={Comboglobal === true ? '#52C41A' : '#1292EE'}
                             enableBackground={
@@ -603,5 +654,6 @@ export default function BSCombo1() {
           }
         />
       </>
+    </Suspense>
   );
 }

src/Pages/BookingScreen/Template/PlanExpireNotification.jsx

@@ -19,7 +19,7 @@ import "../../../Styles/BookingScreen/Template/BSLayout3/BSLayout3.scss";
 
 const subDirectory = import.meta.env.ENV_BASE_URL;
 const commonDirectory = import.meta.env.ENV_COMMON_BASE_URL;
-console.log('commonDirectory', commonDirectory);
+
 const PlanExpireNotification = () => {
   const navigate = useNavigate();
   const dispatch = useDispatch();

src/Pages/BookingScreen/Template/SalesCountComponent.jsx

@@ -4,6 +4,8 @@ import React, {
   useEffect,
   useRef,
   useCallback,
+  lazy,
+  Suspense,
 } from 'react';
 import { Tooltip } from 'antd';
 import {
@@ -12,38 +14,48 @@ import {
   getSession,
 } from '../../../Services/Others';
 import { useDispatch } from 'react-redux';
+import { MdOutlineCallReceived } from 'react-icons/md';
+import { GoPackageDependencies } from 'react-icons/go';
+import { Messages } from '../../../Components/Notifications/Messages';
+import { useSelector } from 'react-redux';
+import { DefaultModal } from '../../../Components/Modal/DefaultModal';
 import {
   getCardDataWithoutSub,
   getCardDataWithoutSubmodule,
   getLayoutproductCard,
-  getPreferenceData,
   getSelectedFavItems,
   GlobalProductCategorie,
   GlobalProductSubCategorie,
   GlobalSalesDetailData,
   PreferenceData,
 } from '../../../Features/BookingScreen/BookingData/BookingData';
-import './SalesCountComponent.scss';
-import { Messages } from '../../../Components/Notifications/Messages';
-import { useSelector } from 'react-redux';
 import { ApplicationPreferences } from '../../../Features/BrachLogin/BranchLogin';
-import { DefaultModal } from '../../../Components/Modal/DefaultModal';
-import { Tables } from '../../../Components/Tables/Table';
-import CustomisedInvoiceChange from '../Components/UtillComponents/CustomisedInvoiceChange.jsx';
-import ProductPriceChange from '../Components/UtillComponents/ProductPriceChange.jsx';
-import ReceivedStocksModal from '../../../Components/Modal/ReceivedStocksModal.jsx';
-import ProductDetailsModal from '../../../Components/Modal/ProductDetailsModal.jsx';
-import { MdOutlineCallReceived } from 'react-icons/md';
-import { IoEye } from 'react-icons/io5';
-import { TiTickOutline } from 'react-icons/ti';
 import {
   getReceivedStocks,
   PostReceiveStocks,
 } from '../../../Features/stockReceivedGodown/ReceivedStock.js';
-import { GoPackageDependencies } from 'react-icons/go';
 import { getTemplateData } from '../../../Features/ThemeChange/ThemeChange.js';
-import ShortcutKeyHelper from '../Components/UtillComponents/ShortcutKeyHelper.jsx';
+// Jsx Files
-import AllSalesPageSettings from '../Components/UtillComponents/AllSalesPageSettings.jsx';
+const CustomisedInvoiceChange = lazy(
+  () => import('../Components/UtillComponents/CustomisedInvoiceChange.jsx')
+);
+const AllSalesPageSettings = lazy(
+  () => import('../Components/UtillComponents/AllSalesPageSettings.jsx')
+);
+const ProductPriceChange = lazy(
+  () => import('../Components/UtillComponents/ProductPriceChange.jsx')
+);
+const ReceivedStocksModal = lazy(
+  () => import('../../../Components/Modal/ReceivedStocksModal.jsx')
+);
+const ProductDetailsModal = lazy(
+  () => import('../../../Components/Modal/ProductDetailsModal.jsx')
+);
+const ShortcutKeyHelper = lazy(
+  () => import('../Components/UtillComponents/ShortcutKeyHelper.jsx')
+);
+// Scss
+import './SalesCountComponent.scss';
 
 const SalesCountComponent = React.memo(
   ({ DineInAccess, GlobalsalesDetailData }) => {
@@ -121,26 +133,6 @@ const SalesCountComponent = React.memo(
     const startIndex = (currentPage - 1) * rowsPerPage;
     const currentData = bookings?.slice(startIndex, startIndex + rowsPerPage);
 
-    const [isAltPressed, setIsAltPressed] = useState(false);
-
-    useEffect(() => {
-      const handleKeyDown = (e) => {
-        if (e.key === 'F2') setIsAltPressed(true);
-      };
-
-      const handleKeyUp = (e) => {
-        if (e.key === 'F2') setIsAltPressed(false);
-      };
-
-      window.addEventListener('keydown', handleKeyDown);
-      window.addEventListener('keyup', handleKeyUp);
-
-      return () => {
-        window.removeEventListener('keydown', handleKeyDown);
-        window.removeEventListener('keyup', handleKeyUp);
-      };
-    }, []);
-
     console.log(dailySalesData, 'dailySalesDatadailySalesData', bookings);
 
     function safeRound(amountStr) {
@@ -206,8 +198,8 @@ const SalesCountComponent = React.memo(
       isMobile,
     ]);
     useEffect(() => {
+      if (preferencedata?.length > 0) {
         getPreference();
-      getReceivedStock();
 
         let AutoReceiveStock = preferencedata?.[0]?.SettingDtlDetails?.some(
           (s) =>
@@ -215,11 +207,13 @@ const SalesCountComponent = React.memo(
             s?.SettingValue === 'Y'
         );
         setAutoReceiveStock(!AutoReceiveStock);
+        if (AutoReceiveStock) {
+          getReceivedStock();
+        }
+      }
     }, [preferencedata]);
 
     const getPreference = async () => {
-      // const data = { AppId: AppId, CompId: CompId, BranchId: BranchId };
-      // const { data: res } = await dispatch(getPreferenceData(data)).unwrap();
       const decimalSetting = preferencedata?.[0]?.SettingDtlDetails?.find(
         (setting) =>
           setting?.SettingIdName?.toLowerCase() === 'decimal' &&
@@ -341,26 +335,6 @@ const SalesCountComponent = React.memo(
         align: 'center',
         width: '120px',
       },
-
-      // {
-      //   title: 'Product Details',
-      //   dataIndex: 'ProductDetails',
-      //   key: 'ProductDetails',
-      //   width: '120px',
-      //   align: 'center',
-      //   render: (text, record, index) => (
-      //     <span
-      //       style={{ cursor: 'pointer', color: '#1890ff', textAlign: "center" }}
-      //       onClick={() => {
-
-      //         handleModalOpen(index)
-      //       }}
-      //     >
-      //       <IoEye style={{ fontSize: 18, verticalAlign: 'middle' }} />
-      //     </span>
-      //   ),
-
-      // },
       {
         title: 'Actions',
         dataIndex: 'fromBranch',
@@ -500,6 +474,7 @@ const SalesCountComponent = React.memo(
       setModalProductDetails([]);
     };
     return (
+      <Suspense fallback={<div>Loading…</div>}>
         <>
           <Messages
             messageType={messageType}
@@ -527,7 +502,9 @@ const SalesCountComponent = React.memo(
                           <p>Admin + Staff : </p>
                           {SelfTakeAwayAmount != 0 && <p>Self Booking : </p>}
                           {PreOrderAmount != 0 && <p>Preorder : </p>}
-                        {OverAllTakeAwayOfferAmount != 0 && <p>Offer(-) : </p>}
+                          {OverAllTakeAwayOfferAmount != 0 && (
+                            <p>Offer(-) : </p>
+                          )}
                         </div>
                         <div style={{ textAlign: 'right' }}>
                           <p>{safeRound(TakeAwayAmount)}</p>
@@ -650,7 +627,9 @@ const SalesCountComponent = React.memo(
                     {isMobile ? 'DI' : 'Dine In'}:{' '}
                     <span>
                       {safeRound(
-                      DineInAmount + SelfDineInAmount - OverAllDineInOfferAmount
+                        DineInAmount +
+                          SelfDineInAmount -
+                          OverAllDineInOfferAmount
                       )}
                     </span>
                   </p>
@@ -822,7 +801,9 @@ const SalesCountComponent = React.memo(
                       ''
                     ) : (
                       <button
-                      onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
+                        onClick={() =>
+                          setCurrentPage((p) => Math.max(p - 1, 1))
+                        }
                         disabled={currentPage === 1}
                         style={{
                           padding: '5px 10px',
@@ -854,7 +835,9 @@ const SalesCountComponent = React.memo(
                         border: 'none',
                         borderRadius: '4px',
                         cursor:
-                        currentPage === totalPages ? 'not-allowed' : 'pointer',
+                          currentPage === totalPages
+                            ? 'not-allowed'
+                            : 'pointer',
                         opacity: currentPage === totalPages ? 0.5 : 1,
                       }}
                     >
@@ -1110,21 +1093,13 @@ const SalesCountComponent = React.memo(
               )}
             </Tooltip>
           </div>
-        {/* {preferenceshortcutkey && <ShortcutKeyHelper />} */}
           {preferenceshortcutkey && (
             <div className="keyboardShortcut">
               <ShortcutKeyHelper />
             </div>
           )}
           <AllSalesPageSettings />
-        <Tooltip
-          placement="bottom"
-          trigger={[]}
-          title="CTRL + E"
-          open={isAltPressed}
-        >
           <ProductPriceChange />
-        </Tooltip>
           <ReceivedStocksModal
             open={isReceivedModelOpen}
             onClose={() => {
@@ -1152,6 +1127,7 @@ const SalesCountComponent = React.memo(
             onSubmit={handleModalSubmit}
           />
         </>
+      </Suspense>
     );
   }
 );

src/Pages/BookingScreen/Template/SalesCountForStandard.jsx

@@ -1,7 +1,15 @@
-import { useEffect, useState, useMemo, useCallback } from 'react';
+import {
+  useEffect,
+  useState,
+  useMemo,
+  useCallback,
+  lazy,
+  Suspense,
+  useRef,
+} from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { FaChartLine, FaRupeeSign } from 'react-icons/fa';
-import { Badge, DatePicker, Popconfirm, Tooltip } from 'antd';
+import { Badge, Popconfirm, Tooltip } from 'antd';
 import { isMobile } from 'react-device-detect';
 import { ApplicationPreferences } from '../../../Features/BrachLogin/BranchLogin';
 import {
@@ -25,12 +33,9 @@ import {
 import { useDateStore } from '../../../Features/BookingScreen/BookingData/DateStore';
 import dayjs from 'dayjs';
 import moment from 'moment';
-import { BsUiChecks } from 'react-icons/bs';
-import { FaCheckToSlot } from 'react-icons/fa6';
 import PozoKioskIcon from '../Components/UtillComponents/Pozo retail icons/PozoKioskIcon';
 import { globalKioskSalesCount } from '../../../Features/Kiosk/kiosk';
 import BSKioskCounterPayment from '../Components/UtillComponents/BSKioskCounterPayment';
-import BSExpireProductsList from '../Components/UtillComponents/BSExpireProductsList';
 import TooltipWrapper from '../../../Components/Tooltip/Tooltip';
 import {
   getTemplateData,
@@ -44,43 +49,68 @@ import {
 } from '../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail';
 import { PutBookingClose } from '../../../Features/BookingScreen/RetailBookingClose';
 import BSEwayBillicon from '../../BookingScreen/Components/UtillComponents/BSEwayBillicon.jsx';
-import ListOfSalesInvoices from '../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx';
 import { DefaultModal } from '../../../Components/Modal/DefaultModal.jsx';
-import CustomisedInvoiceChange from '../Components/UtillComponents/CustomisedInvoiceChange.jsx';
-import ProductPriceChange from '../Components/UtillComponents/ProductPriceChange.jsx';
 import { MdOutlineCallReceived } from 'react-icons/md';
 import {
   getReceivedStocks,
   PostReceiveStocks,
 } from '../../../Features/stockReceivedGodown/ReceivedStock.js';
-import ReceivedStocksModal from '../../../Components/Modal/ReceivedStocksModal.jsx';
-import ProductDetailsModal from '../../../Components/Modal/ProductDetailsModal.jsx';
 import { GoPackageDependencies } from 'react-icons/go';
 import { Messages } from '../../../../ownLib/my-ui-lib.js';
+// Jsx File
+const BSExpireProductsList = lazy(
+  () => import('../Components/UtillComponents/BSExpireProductsList')
+);
 
-import ShortcutKeyHelper from '../Components/UtillComponents/ShortcutKeyHelper.jsx';
+const ListOfSalesInvoices = lazy(
-import AllSalesPageSettings from '../Components/UtillComponents/AllSalesPageSettings.jsx';
+  () =>
+    import('../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx')
+);
+
+const CustomisedInvoiceChange = lazy(
+  () => import('../Components/UtillComponents/CustomisedInvoiceChange.jsx')
+);
+
+const ProductPriceChange = lazy(
+  () => import('../Components/UtillComponents/ProductPriceChange.jsx')
+);
+
+const ReceivedStocksModal = lazy(
+  () => import('../../../Components/Modal/ReceivedStocksModal.jsx')
+);
+
+const ProductDetailsModal = lazy(
+  () => import('../../../Components/Modal/ProductDetailsModal.jsx')
+);
+
+const ShortcutKeyHelper = lazy(
+  () => import('../Components/UtillComponents/ShortcutKeyHelper.jsx')
+);
+
+const AllSalesPageSettings = lazy(
+  () => import('../Components/UtillComponents/AllSalesPageSettings.jsx')
+);
+
+// Scss
 import '../../../Styles/BookingScreen/Template/BSLayout2/BSLayout2.scss';
+import useWhyDidYouUpdate from '../../../Services/findrerender.js';
+import React from 'react';
 
-const SalesCountForStandard = ({
+const SalesCountForStandard = React.memo(() => {
-  DineInAccess,
-  GlobalsalesDetailData,
-  PricingAppPricingName,
-}) => {
   const dispatch = useDispatch();
 
   const AppId = getSession('AppId');
   const CompId = getSession('CompId');
+
   const BranchId = getSession('BranchId');
   const UserId = getSession('UserId');
   const ProdSubCat = useSelector(GlobalProductSubCategorie);
   const prodCat = useSelector(GlobalProductCategorie);
   const templateData = useSelector(getTemplateData);
-  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
   const [allowDecimal, setAllowDecimal] = useState(false);
   const [BookingModalOpen, setBookingModalOpen] = useState(false);
   const [ListOfInvoices, setListOfInvoices] = useState(false);
-  const { selectedDate, setSelectedDate } = useDateStore();
+
   const [Kioskopen, setKioskopen] = useState(false);
   const badgeCount = useSelector(globalKioskSalesCount);
   const OtherServicesglobal = useSelector(GlobalOtherSevices);
@@ -88,6 +118,7 @@ const SalesCountForStandard = ({
   const SessionData = useSelector(StoredSessionData);
   const OrderStatus = useSelector(GlobalOrderStatus);
   const dailySalesData = useSelector(GlobalSalesDetailData);
+
   const [page, setpage] = useState(1);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isNetAmtModalOpen, setIsNetAmtModalOpen] = useState(false);
@@ -110,6 +141,11 @@ const SalesCountForStandard = ({
   const currentData = bookings?.slice(startIndex, startIndex + rowsPerPage);
   const preferencedata = useSelector(PreferenceData);
 
+  const DineInAccess = useMemo(() => {
+    return preferencedata?.[0]?.SettingDtlDetails?.filter(
+      (i) => i.SettingIdName === 'DineIn'
+    )?.[0];
+  }, [preferencedata]);
   console.log(dailySalesData, 'dailySalesDatadailySalesData', bookings);
 
   const bookingTypePreference =
@@ -137,12 +173,7 @@ const SalesCountForStandard = ({
   const salespagefields = appPreferences?.find(
     (pref) => pref?.PreferredCatName === 'Sales Page Fields'
   )?.PreferenceCatDetails;
-  const AvailableDate = salespagefields?.find(
+
-    (type) =>
-      type?.PreferredSubCatName?.toLowerCase() === 'available date' &&
-      type?.PreferredStatus === 'Y'
-  );
-  const { isBulk, setIsBulk } = useDateStore();
   const BookingStatus = useSelector(GlobalBookingStatus);
   const CheckBookingStatus =
     BookingStatus?.find((item) => item.ScreenType === 'Booking')
@@ -154,7 +185,7 @@ const SalesCountForStandard = ({
       item.SettingIdName.toLowerCase() === 'shortcutkeys' &&
       item.SettingValue === 'Y'
   );
-  const sales = GlobalsalesDetailData?.[0] || {};
+  const sales = dailySalesData?.[0] || {};
   const {
     DineInOrderCount = 0,
     TakeAwayOrderCount = 0,
@@ -169,14 +200,12 @@ const SalesCountForStandard = ({
     SelfDineInAmount = 0,
     PreOrderAmount = 0,
   } = sales;
-
   useEffect(() => {
-    // const { data: res } = await dispatch(
+    if (preferencedata?.length > 0) {
-    //   getPreferenceData({ AppId, CompId, BranchId })
-    // ).unwrap();
       const decimalSetting = preferencedata?.[0]?.SettingDtlDetails?.find(
         (s) =>
-        s?.SettingIdName?.toLowerCase() === 'decimal' && s?.SettingValue === 'Y'
+          s?.SettingIdName?.toLowerCase() === 'decimal' &&
+          s?.SettingValue === 'Y'
       );
       setAllowDecimal(!!decimalSetting);
       let custombillsetting = preferencedata?.[0]?.SettingDtlDetails?.some(
@@ -193,17 +222,14 @@ const SalesCountForStandard = ({
       );
 
       setAutoReceiveStock(!AutoReceiveStock);
+    }
   }, [preferencedata]);
-  // useEffect(() => {
+
-  //     if (!selectedDate || (Array.isArray(selectedDate) && selectedDate.length === 0)) {
-  //         setSelectedDate(dayjs());
-  //     }
-  // }, [selectedDate, setSelectedDate]);
   useEffect(() => {
     if (AppId && CompId && BranchId && UserId) {
       fetchBookingStatus();
-    }
       getReceivedStock();
+    }
   }, [AppId, CompId, BranchId, UserId]);
 
   const getReceivedStock = async () => {
@@ -304,24 +330,6 @@ const SalesCountForStandard = ({
       width: '120px',
     },
 
-    // {
-    //   title: 'Product Details',
-    //   dataIndex: 'ProductDetails',
-    //   key: 'ProductDetails',
-    //   width: '120px',
-    //   render: (text, record, index) => (
-    //     <span
-    //       style={{ cursor: 'pointer', color: '#1890ff', textAlign: "center" }}
-    //       onClick={() => {
-
-    //         handleModalOpen(index)
-    //       }}
-    //     >
-    //       <IoEye style={{ fontSize: 18, verticalAlign: 'middle' }} />
-    //     </span>
-    //   ),
-
-    // },
     {
       title: 'Actions',
       dataIndex: 'fromBranch',
@@ -469,9 +477,7 @@ const SalesCountForStandard = ({
     if (isNaN(num)) return allowDecimal ? '0.00' : '0';
     return allowDecimal ? num.toFixed(2) : Math.round(num).toString();
   };
-  const disablePastDates = (current) => {
+
-    return current && current < moment().startOf('day');
-  };
   const totalTakeAway =
     TakeAwayAmount +
     SelfTakeAwayAmount +
@@ -534,41 +540,6 @@ const SalesCountForStandard = ({
     </div>
   );
 
-  // Fix: Convert string dates to dayjs objects for the DatePicker
-  const getDatePickerValue = () => {
-    if (!selectedDate) return isBulk ? [] : null;
-    console.log(selectedDate, 'selectedDate');
-    if (isBulk) {
-      // For bulk mode, convert string array to dayjs objects array
-      if (Array.isArray(selectedDate)) {
-        return selectedDate.map((date) => dayjs(date));
-      }
-      return [];
-    } else {
-      // For single date mode, handle both string and dayjs object
-      if (Array.isArray(selectedDate) && selectedDate.length > 0) {
-        return dayjs(selectedDate[0]);
-      }
-      return dayjs(selectedDate);
-    }
-  };
-
-  const handleDateChange = (dateOrDates) => {
-    if (isBulk) {
-      // For bulk mode, convert dayjs objects to string format
-      const formattedDates = dateOrDates
-        ? dateOrDates.map((d) => d.format('YYYY-MM-DD'))
-        : [];
-      setSelectedDate(formattedDates);
-    } else {
-      // For single date mode
-      if (dateOrDates) {
-        setSelectedDate(dateOrDates);
-      } else {
-        setSelectedDate([]);
-      }
-    }
-  };
   const fetchBookingStatus = async () => {
     let data = {
       CompId: CompId,
@@ -615,22 +586,9 @@ const SalesCountForStandard = ({
   const handleInvoiceClose = () => {
     setListOfInvoices(false);
   };
-  // Table row selection state and handlers
-  const onSelectChange = (newSelectedRowKeys) => {
-    setSelectedRowKeys(newSelectedRowKeys);
-  };
 
-  const handleSubmitSelectedRows = () => {
-    // TODO: replace this with real submit logic
-    console.log('Submitting selected rows:', selectedRowKeys);
-    setIsReceivedModelOpen(false);
-    setSelectedRowKeys([]);
-  };
-  const rowSelection = {
-    selectedRowKeys,
-    onChange: onSelectChange,
-  };
   return (
+    <Suspense fallback={<div>Loading...</div>}>
       <div className="NewLayoutBillContainer">
         <Messages
           messageType={messageType}
@@ -795,7 +753,7 @@ const SalesCountForStandard = ({
           </button>
         )}
         {preferenceshortcutkey && (
-        <div className='KeyshortCutNav3'>
+          <div className="KeyshortCutNav3">
             <ShortcutKeyHelper />
           </div>
         )}
@@ -855,8 +813,6 @@ const SalesCountForStandard = ({
                         cursor: 'pointer',
                       }}
                     />
-                  {/* <button className="BookingCloseButton"
-                                                                                    onClick={OpenBookingModal}>Booking Close</button> */}
                   </TooltipWrapper>
                 </div>
               ) : (
@@ -965,7 +921,8 @@ const SalesCountForStandard = ({
                     <tr
                       key={item.OrderId}
                       style={{
-                      backgroundColor: index % 2 === 0 ? '#f7faff' : '#e9f1ff',
+                        backgroundColor:
+                          index % 2 === 0 ? '#f7faff' : '#e9f1ff',
                         textAlign: 'center',
                         transition: 'background 0.3s',
                       }}
@@ -1197,7 +1154,8 @@ const SalesCountForStandard = ({
                     <tr
                       key={index}
                       style={{
-                      backgroundColor: index % 2 === 0 ? '#f7faff' : '#ffffff',
+                        backgroundColor:
+                          index % 2 === 0 ? '#f7faff' : '#ffffff',
                         transition: 'background 0.3s',
                       }}
                       onMouseEnter={(e) =>
@@ -1321,7 +1279,6 @@ const SalesCountForStandard = ({
           open={isReceivedModelOpen}
           onClose={() => {
             setIsReceivedModelOpen(false);
-          setSelectedRowKeys([]);
           }}
           columns={columns}
           tableData={TableData}
@@ -1334,7 +1291,9 @@ const SalesCountForStandard = ({
           onClose={handleModalCancel}
           productDetails={modalProductDetails}
           headerData={{
-          dateTime: dateFormatChange1(TableData?.[SelectedIndex]?.CreatedDate),
+            dateTime: dateFormatChange1(
+              TableData?.[SelectedIndex]?.CreatedDate
+            ),
             fromBranch: TableData?.[SelectedIndex]?.FromBranchName,
             Dispatch_Id: TableData?.[SelectedIndex]?.DispatchId,
             Created_By: TableData?.[SelectedIndex]?.Created_By,
@@ -1343,7 +1302,8 @@ const SalesCountForStandard = ({
           onSubmit={handleModalSubmit}
         />
       </div>
+    </Suspense>
   );
-};
+});
 
 export default SalesCountForStandard;

src/Pages/CancelReschedule/ChangePaymentmode.jsx

@@ -14,7 +14,6 @@ import { InputField } from '../../Components/Forms/InputField';
 import Buttons from '../../Components/Forms/Buttons';
 import { ArrowRightOutlined } from '@ant-design/icons';
 import { DropDowns } from '../../Components/Forms/DropDown';
-import { RadioGrpButton } from '../../Components/Forms/RadioGroup.jsx';
 import '../../Styles/CancelReschedule/ChangePaymentMode.scss';
 import {
   ChangeSelectedCustDisable,
@@ -93,13 +92,14 @@ const ChangePaymentmode = () => {
 
   const appPreferences = useSelector(ApplicationPreferences);
   const commonModulePreference = appPreferences?.find(
-    (preference) => preference?.PreferredCatName === "Common Module"
+    (preference) => preference?.PreferredCatName === 'Common Module'
   )?.PreferenceCatDetails;
   const sportsAppPreference = commonModulePreference?.find(
-    (preference) => preference?.PreferredSubCatName === "SportsApp" && preference?.PreferredStatus == 'Y'
+    (preference) =>
+      preference?.PreferredSubCatName === 'SportsApp' &&
+      preference?.PreferredStatus == 'Y'
   );
 
-
   const [messageType, setMessageType] = useState(null);
   const [messageData, setMessageData] = useState(null);
   const [selCancelPay, setselCancelPay] = useState('CR');
@@ -151,7 +151,6 @@ const ChangePaymentmode = () => {
       name: ' Cancel/Payment Change',
       link: `${subDirectory}setting/cancel-paymentchange`,
     },
-   
   ];
 
   useEffect(() => {
@@ -212,8 +211,6 @@ const ChangePaymentmode = () => {
     // third;
   };
   const disabledDate = (current) => current && current > dayjs().endOf('day');
-  const disabledFeatureDate = (current) =>
-    current && current < dayjs().endOf('day');
 
   const getCreditcustDetail = async () => {
     let Credata = {
@@ -326,15 +323,13 @@ const ChangePaymentmode = () => {
       setSalesDetail([]);
       setFullSalesDetail([]);
 
-      if (segmentValue == "Mobile" && billormobile && fromDate && toDate) {
+      if (segmentValue == 'Mobile' && billormobile && fromDate && toDate) {
+        setMessageType('error');
+        setMessageData(res?.data?.response);
+      } else {
         setMessageType('error');
         setMessageData(res?.data?.response);
       }
-      else {
-        setMessageType('error');
-        setMessageData(res?.data?.response);
-      }
-
     }
     setisdisabled(true);
   };
@@ -384,7 +379,6 @@ const ChangePaymentmode = () => {
     setFullSalesDetail([]);
   };
 
-
   // Debounce utility
   const debounce = (func, delay) => {
     let timer;
@@ -781,7 +775,7 @@ const ChangePaymentmode = () => {
           dispatch(changeSelectedCustId(null));
           dispatch(changeSelectedOption({}));
           dispatch(ChangeSelectedCustDisable(false));
-          SelectCanPaymode(null)
+          SelectCanPaymode(null);
         }
       } catch (error) {
         console.error('Payment mode change failed:', error);
@@ -790,8 +784,7 @@ const ChangePaymentmode = () => {
     if (selCancelPay === 'CR' && selActivityType === 'Cancel') {
       if (SelCancelType === 'OverAll') {
         const { NetAmount } = FullSalesDetail?.[0];
-        const { ChargeType, ChargesFixed } =
+        const { ChargeType, ChargesFixed } = SelCanReason?.[0];
-          SelCanReason?.[0];
 
         if (ChargeType === 'P') {
           const temCanCharge = (NetAmount * ChargesFixed) / 100;
@@ -804,24 +797,44 @@ const ChangePaymentmode = () => {
         try {
           const prodDtl = (FullSalesDetail || [])?.find(
             (f) => f.OrderId === selectedRowKey
-          )?.productDetails
+          )?.productDetails;
           const SalesId = prodDtl?.[0]?.SalesId;
-          const ProductDetails = (prodDtl || []).map(({ ProdId, InwardDtlId, Type, SalesQty, Rate, TaxAmt, SinglePc }) => ({
+          const ProductDetails = (prodDtl || []).map(
-            ProdId, InwardDtlId, Type, Qty: SalesQty, Rate, TotalAmt: SalesQty * Rate, TaxAmt, SinglePc,
+            ({
-          }));
+              ProdId,
+              InwardDtlId,
+              Type,
+              SalesQty,
+              Rate,
+              TaxAmt,
+              SinglePc,
+            }) => ({
+              ProdId,
+              InwardDtlId,
+              Type,
+              Qty: SalesQty,
+              Rate,
+              TotalAmt: SalesQty * Rate,
+              TaxAmt,
+              SinglePc,
+            })
+          );
 
           if (ProductDetails?.length === 0) {
             throw new Error('No orders selected');
           }
 
-          const Amount = ProductDetails.reduce((acc, item) => acc + (item.TotalAmt || 0), 0);
+          const Amount = ProductDetails.reduce(
+            (acc, item) => acc + (item.TotalAmt || 0),
+            0
+          );
           const payload = {
             AppId,
             CompId,
             BranchId,
             SalesId,
             ProductDetails,
-            SalesType: "C",
+            SalesType: 'C',
             OrderId: selectedRowKey,
             CreatedBy: UserId,
             CreatedDate: dayjs()?.format('YYYY-MM-DD'),
@@ -829,27 +842,27 @@ const ChangePaymentmode = () => {
               {
                 PaymentType: SelCanPaymode,
                 Amount,
-                PaymentStatus: "S"
+                PaymentStatus: 'S',
-              }
+              },
-            ]
+            ],
           };
 
           const res = await dispatch(PostSalesCancellation(payload)).unwrap();
           if (res?.data?.statusCode === 1) {
             setMessageType('success');
-            setMessageData(res?.data?.response || "Posted successfully");
+            setMessageData(res?.data?.response || 'Posted successfully');
-            setSelectedRowKey()
+            setSelectedRowKey();
-            formRef.current?.resetFields()
+            formRef.current?.resetFields();
             setFullSalesDetail([]);
-            SelectCanPaymode(null)
+            SelectCanPaymode(null);
-            setSegmentValue('Bill No')
+            setSegmentValue('Bill No');
           } else {
             setMessageType('success');
-            setMessageData(res?.data?.response || "Posted successfully");
+            setMessageData(res?.data?.response || 'Posted successfully');
           }
         } catch (error) {
-          setMessageType("error");
+          setMessageType('error');
-          setMessageData(error?.message || "An error occurred");
+          setMessageData(error?.message || 'An error occurred');
         } finally {
           setIsPosting(false); // enable button
         }
@@ -930,14 +943,10 @@ const ChangePaymentmode = () => {
           toDate = formRef.current?.getFieldsValue()?.ReschedulToDate;
         }
       } else if (selCancelPay === 'CP') {
-        toDate = formRef.current?.getFieldsValue()?.["Change- PaymentToDate"];
+        toDate = formRef.current?.getFieldsValue()?.['Change- PaymentToDate'];
       }
 
-      if (
+      if (segmentValue === 'Mobile' && formatted && toDate !== undefined) {
-        segmentValue === 'Mobile' &&
-        formatted &&
-        toDate !== undefined
-      ) {
         if (billormobile === undefined) {
           setMessageType('error');
           setMessageData('Please enter the mobile number.');
@@ -968,11 +977,7 @@ const ChangePaymentmode = () => {
         fromDate =
           formRef.current?.getFieldsValue()?.['Change-PaymentFromDate'];
       }
-      if (
+      if (segmentValue === 'Mobile' && fromDate != undefined && formatted) {
-        segmentValue === 'Mobile' &&
-        fromDate != undefined &&
-        formatted
-      ) {
         if (billormobile === undefined) {
           setMessageType('error');
           setMessageData('Please enter the mobile number.');
@@ -1340,7 +1345,7 @@ const ChangePaymentmode = () => {
                             display: 'flex',
                             gap: '0.5rem',
                             alignItems: 'center',
-                            flexWrap: "wrap"
+                            flexWrap: 'wrap',
                           }}
                         >
                           <div style={{ fontWeight: 500 }}>Mode Type :</div>
@@ -1381,8 +1386,6 @@ const ChangePaymentmode = () => {
                             onChange={segmentOnChange}
                           />
                         </div> */}
-
-
                       </div>
                     </div>
                     {selCancelPay === 'CR' && (
@@ -1423,15 +1426,10 @@ const ChangePaymentmode = () => {
                             gap: '0.5rem',
                             alignItems: 'center',
                           }}
-                        >
+                        ></div>
-
-
-
-                        </div>
                         {selActivityType === 'Cancel' && (
                           <div className="Cancellation-div">
                             <div style={{ marginBottom: '10px' }}>
-
                               <DropDowns
                                 options={[
                                   { value: 'Bill No', label: 'Bill No' },
@@ -1451,7 +1449,7 @@ const ChangePaymentmode = () => {
                                 alignItems: 'center',
                                 gap: '10px',
                                 // marginTop: '10px',
-                                flexWrap: 'wrap'
+                                flexWrap: 'wrap',
                               }}
                             >
                               {segmentValue === 'Date' ? (
@@ -1479,17 +1477,23 @@ const ChangePaymentmode = () => {
                                         await validateSafeInput(value); // Your existing input sanitization
 
                                         if (!value) {
-                                          return Promise.reject(`Please enter ${segmentValue}`);
+                                          return Promise.reject(
+                                            `Please enter ${segmentValue}`
+                                          );
                                         }
 
                                         const digitOnlyRegex = /^[0-9]+$/;
                                         if (!digitOnlyRegex.test(value)) {
-                                          return Promise.reject(`${segmentValue} should contain digits only`);
+                                          return Promise.reject(
+                                            `${segmentValue} should contain digits only`
+                                          );
                                         }
 
                                         if (segmentValue === 'Bill No') {
                                           if (value.length > 30) {
-                                            return Promise.reject('Bill No should not exceed 30 characters');
+                                            return Promise.reject(
+                                              'Bill No should not exceed 30 characters'
+                                            );
                                           }
                                         }
 
@@ -1497,29 +1501,37 @@ const ChangePaymentmode = () => {
                                           const mobileRegex = /^[6-9]\d{9}$/;
 
                                           if (!value || value.length !== 10) {
-                                            return Promise.reject('Mobile Number must be exactly 10 digits');
+                                            return Promise.reject(
+                                              'Mobile Number must be exactly 10 digits'
+                                            );
                                           }
 
                                           if (!mobileRegex.test(value)) {
-                                            return Promise.reject('Mobile number must start with 6, 7, 8, or 9');
+                                            return Promise.reject(
+                                              'Mobile number must start with 6, 7, 8, or 9'
+                                            );
                                           }
 
                                           await getSalesDetailapi(value);
                                         }
                                         await getSalesDetailapi(value);
                                         return Promise.resolve();
-                                      }
+                                      },
-                                    }
+                                    },
-
                                   ]}
                                 >
                                   <InputField
                                     field="OrderId"
                                     autoComplete="off"
                                     inputMode="numeric"
-                                    maxLength={segmentValue === 'Mobile' ? 10 : 30}
+                                    maxLength={
+                                      segmentValue === 'Mobile' ? 10 : 30
+                                    }
                                     onInput={(e) =>
-                                      (e.target.value = e.target.value.replace(/[^0-9]/g, ''))
+                                      (e.target.value = e.target.value.replace(
+                                        /[^0-9]/g,
+                                        ''
+                                      ))
                                     }
                                     label={
                                       <label class="required">
@@ -1536,7 +1548,7 @@ const ChangePaymentmode = () => {
                                     display: 'flex',
                                     alignItems: 'center',
                                     gap: '10px',
-                                    flexWrap: 'wrap'
+                                    flexWrap: 'wrap',
                                   }}
                                 >
                                   <Form.Item
@@ -1937,17 +1949,23 @@ const ChangePaymentmode = () => {
                                       await validateSafeInput(value); // Your existing input sanitization
 
                                       if (!value) {
-                                        return Promise.reject(`Please enter ${segmentValue}`);
+                                        return Promise.reject(
+                                          `Please enter ${segmentValue}`
+                                        );
                                       }
 
                                       const digitOnlyRegex = /^[0-9]+$/;
                                       if (!digitOnlyRegex.test(value)) {
-                                        return Promise.reject(`${segmentValue} should contain digits only`);
+                                        return Promise.reject(
+                                          `${segmentValue} should contain digits only`
+                                        );
                                       }
 
                                       if (segmentValue === 'Bill No') {
                                         if (value.length > 30) {
-                                          return Promise.reject('Bill No should not exceed 30 characters');
+                                          return Promise.reject(
+                                            'Bill No should not exceed 30 characters'
+                                          );
                                         }
                                       }
 
@@ -1955,19 +1973,23 @@ const ChangePaymentmode = () => {
                                         const mobileRegex = /^[6-9]\d{9}$/;
 
                                         if (!value || value.length !== 10) {
-                                          return Promise.reject('Mobile Number must be exactly 10 digits');
+                                          return Promise.reject(
+                                            'Mobile Number must be exactly 10 digits'
+                                          );
                                         }
 
                                         if (!mobileRegex.test(value)) {
-                                          return Promise.reject('Mobile number must start with 6, 7, 8, or 9');
+                                          return Promise.reject(
+                                            'Mobile number must start with 6, 7, 8, or 9'
+                                          );
                                         }
 
                                         await getSalesDetailapi(value);
                                       }
                                       await getSalesDetailapi(value);
                                       return Promise.resolve();
-                                    }
+                                    },
-                                  }
+                                  },
                                 ]}
                               >
                                 <InputField
@@ -2091,7 +2113,8 @@ const ChangePaymentmode = () => {
                         <div
                           style={{ display: 'flex', flexDirection: 'column' }}
                         >
-                          {selectedRowKey !== null && (<>
+                          {selectedRowKey !== null && (
+                            <>
                               <Table
                                 columns={paymentRowRadiocolumns}
                                 rowKey="PaymentType"
@@ -2100,12 +2123,16 @@ const ChangePaymentmode = () => {
                                     (f) => f.OrderId === selectedRowKey
                                   )?.OrderPaymentDtls
                                 }
-                            /></>
+                              />
+                            </>
                           )}
                           {FullSalesDetail?.length > 0 && (
-                            <div style={{
+                            <div
-                              height: "60vh", overflow: "auto"
+                              style={{
-                            }}>
+                                height: '60vh',
+                                overflow: 'auto',
+                              }}
+                            >
                               <Table
                                 rowSelection={rowSelection}
                                 columns={rowradiocolumns}
@@ -2160,7 +2187,11 @@ const ChangePaymentmode = () => {
       />
       <Modal
         open={viewProductDetails?.view}
-        title={<FormHeader title={sportsAppPreference ? 'Slot Details' : 'Product Details'} />}
+        title={
+          <FormHeader
+            title={sportsAppPreference ? 'Slot Details' : 'Product Details'}
+          />
+        }
         width={900}
         footer={false}
         onCancel={() => {

src/Pages/CustomerMaster/CustMasterForm.jsx

@@ -826,17 +826,17 @@ const CustomerForm = ({ formType }) => {
   const handleRemoveAddress = (index) => {
     setAddressPreview((prev) =>
       prev.map((item, i) =>
-      i === index ? { ...item, ActiveStatus: "D" } : item
+        i === index ? { ...item, ActiveStatus: 'D' } : item
       )
     );
     setAddressesList((prev) =>
       prev.map((item, i) =>
-      i === index ? { ...item, ActiveStatus: "D" } : item
+        i === index ? { ...item, ActiveStatus: 'D' } : item
       )
     );
     setNewAddress((prev) =>
       prev.map((item, i) =>
-      i === index ? { ...item, ActiveStatus: "D" } : item
+        i === index ? { ...item, ActiveStatus: 'D' } : item
       )
     );
   };
@@ -1616,7 +1616,9 @@ const CustomerForm = ({ formType }) => {
 
                       <div className="customer-address-details-list">
                         {addressPreview?.length > 0 ? (
-                          addressPreview?.filter((addr) => addr.ActiveStatus !== "D")?.map((addr, idx) => (
+                          addressPreview
+                            ?.filter((addr) => addr.ActiveStatus !== 'D')
+                            ?.map((addr, idx) => (
                               <div key={idx} className="address-card">
                                 <div className="address-header">
                                   <div className="header-left">
@@ -1634,9 +1636,9 @@ const CustomerForm = ({ formType }) => {
                                     }}
                                   >
                                     <Checkbox
-                                    checked={(addressTypes[idx] || []).includes(
+                                      checked={(
-                                      'Delivery Address'
+                                        addressTypes[idx] || []
-                                    )}
+                                      ).includes('Delivery Address')}
                                       onChange={(e) =>
                                         handleAddressTypeChange(
                                           idx,
@@ -1648,9 +1650,9 @@ const CustomerForm = ({ formType }) => {
                                       Delivery Address
                                     </Checkbox>
                                     <Checkbox
-                                    checked={(addressTypes[idx] || []).includes(
+                                      checked={(
-                                      'Billing Address'
+                                        addressTypes[idx] || []
-                                    )}
+                                      ).includes('Billing Address')}
                                       onChange={(e) =>
                                         handleAddressTypeChange(
                                           idx,
@@ -1662,9 +1664,9 @@ const CustomerForm = ({ formType }) => {
                                       Billing Address
                                     </Checkbox>
                                     <Checkbox
-                                    checked={(addressTypes[idx] || []).includes(
+                                      checked={(
-                                      'Both Address'
+                                        addressTypes[idx] || []
-                                    )}
+                                      ).includes('Both Address')}
                                       onChange={(e) =>
                                         handleAddressTypeChange(
                                           idx,
@@ -1692,7 +1694,9 @@ const CustomerForm = ({ formType }) => {
                                   </div>
 
                                   <div className="address-detail-item zip">
-                                  <div className="value">{addr?.Zip || ''}</div>
+                                    <div className="value">
+                                      {addr?.Zip || ''}
+                                    </div>
                                   </div>
 
                                   <div className="address-detail-item city">
@@ -1739,7 +1743,10 @@ const CustomerForm = ({ formType }) => {
                                     cancelText="Cancel"
                                     okType="danger"
                                   >
-                                  <button className="remove-btn" type="button">
+                                    <button
+                                      className="remove-btn"
+                                      type="button"
+                                    >
                                       <FaTrash /> Remove
                                     </button>
                                   </Popconfirm>
@@ -2007,16 +2014,7 @@ const CustomerForm = ({ formType }) => {
                           <button
                             type="button"
                             onClick={handleAddOrUpdateAddress}
-                            style={{
+                            className="CusAddressAddBtn"
-                              backgroundColor: '#1677ff',
-                              color: '#fff',
-                              padding: '6px 12px',
-                              border: 'none',
-                              borderRadius: '6px',
-                              cursor: 'pointer',
-                              marginTop: '8px',
-                              fontWeight: '500',
-                            }}
                           >
                             {editingIndex !== null
                               ? 'Update Address'

src/Pages/DashBoard/RetailDashboard.jsx

@@ -1408,7 +1408,7 @@ const RetailDashboard = () => {
                       display: 'flex',
                       alignItems: 'center',
                       gap: '5px',
-                      lineHeight:"1.1"
+                      lineHeight: '1.1',
                     }}
                   >
                     <img src={sandClock} alt="" width={25} />

src/Pages/Offer/OfferCode/OfferCodeList.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import {
@@ -25,10 +25,16 @@ import {
   deleteOfferCode,
 } from '../../../Features/Offer/OfferCode/OfferCode.js';
 import { useAuth } from '../../../AuthContext.jsx';
-import { getAllCustomer, getPreferenceData } from '../../../Features/BookingScreen/BookingData/BookingData.js';
+import {
+  getAllCustomer,
+  getPreferenceData,
+} from '../../../Features/BookingScreen/BookingData/BookingData.js';
 import { DefaultModal } from '../../../Components/Modal/DefaultModal.jsx';
 import { BiSolidCoupon } from 'react-icons/bi';
-import { postCustomerOfferMail, postSMSOffer } from '../../../Features/Payment/PaymentDetails/PaymentDetails.js';
+import {
+  postCustomerOfferMail,
+  postSMSOffer,
+} from '../../../Features/Payment/PaymentDetails/PaymentDetails.js';
 const CheckboxGroup = Checkbox.Group;
 const subDirectory = import.meta.env.ENV_BASE_URL;
 
@@ -46,11 +52,25 @@ const items = [
 
 const plainOptions = [
   {
-    label: (<div style={{ display: "flex", alignItems: "center", marginTop: "0.2rem" }}><AiOutlineMail size={18} style={{ marginRight: 5 }} />Mail</div>),
+    label: (
+      <div
+        style={{ display: 'flex', alignItems: 'center', marginTop: '0.2rem' }}
+      >
+        <AiOutlineMail size={18} style={{ marginRight: 5 }} />
+        Mail
+      </div>
+    ),
     value: 'Mail',
   },
   {
-    label: (<div style={{ display: "flex", alignItems: "center", marginTop: "0.2rem" }}><MdOutlineTextsms size={18} style={{ marginRight: 5 }} />SMS</div>),
+    label: (
+      <div
+        style={{ display: 'flex', alignItems: 'center', marginTop: '0.2rem' }}
+      >
+        <MdOutlineTextsms size={18} style={{ marginRight: 5 }} />
+        SMS
+      </div>
+    ),
     value: 'SMS',
   },
   // {
@@ -94,15 +114,20 @@ const OfferCodeList = () => {
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const checkAll = plainOptions.length === checkedList.length;
-  const indeterminate = checkedList.length > 0 && checkedList.length < plainOptions.length;
+  const indeterminate =
+    checkedList.length > 0 && checkedList.length < plainOptions.length;
   const getPreference = async () => {
     const data = { AppId: AppId, CompId: CompId, BranchId: BranchId };
-    const { data: res } = await dispatch(getPreferenceData(data)).unwrap()
+    const { data: res } = await dispatch(getPreferenceData(data)).unwrap();
-    const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find((setting) => setting?.SettingIdName?.toLowerCase() === "decimal" && setting?.SettingValue === 'Y');
+    const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find(
+      (setting) =>
+        setting?.SettingIdName?.toLowerCase() === 'decimal' &&
+        setting?.SettingValue === 'Y'
+    );
     if (decimalSetting) {
-      setAllowDecimal(true)
+      setAllowDecimal(true);
-    }
     }
+  };
 
   const onComplete = useCallback(() => {
     setMessageData(null);
@@ -116,8 +141,8 @@ const OfferCodeList = () => {
       setMessageData(location?.state?.Notiffy.messageData);
     }
     TableData();
-    getPreference()
+    getPreference();
-    fetchCustomerApi()
+    fetchCustomerApi();
     // if (UserType === "Employee") {
     //   fetchApi()
     // }
@@ -142,11 +167,14 @@ const OfferCodeList = () => {
     setaddnewAccess(!hasAccess);
   }, [empData, SAAccessCommonMaster, UserType]);
 
-
   const fetchCustomerApi = async () => {
-    let res = await dispatch(getAllCustomer({ CompId, AppId, branchId: BranchId })).unwrap();
+    let res = await dispatch(
+      getAllCustomer({ CompId, AppId, branchId: BranchId })
+    ).unwrap();
     if (res?.data?.statusCode === 1) {
-      setCustomerData(res?.data?.data?.map((item, index) => ({ ...item, key: index + 1 })));
+      setCustomerData(
+        res?.data?.data?.map((item, index) => ({ ...item, key: index + 1 }))
+      );
     } else {
       setCustomerData([]);
     }
@@ -257,7 +285,9 @@ const OfferCodeList = () => {
           String(record.OfferName)
             ?.toLowerCase()
             ?.includes(value?.toLowerCase()) ||
-          String(record.MinQty)?.toLowerCase()?.includes(value?.toLowerCase()) ||
+          String(record.MinQty)
+            ?.toLowerCase()
+            ?.includes(value?.toLowerCase()) ||
           String(record.MinPurchase)
             ?.toLowerCase()
             ?.includes(value?.toLowerCase()) ||
@@ -464,7 +494,9 @@ const OfferCodeList = () => {
           String(record.OfferName)
             ?.toLowerCase()
             ?.includes(value?.toLowerCase()) ||
-          String(record.MinQty)?.toLowerCase()?.includes(value?.toLowerCase()) ||
+          String(record.MinQty)
+            ?.toLowerCase()
+            ?.includes(value?.toLowerCase()) ||
           String(record.MinPurchase)
             ?.toLowerCase()
             ?.includes(value?.toLowerCase()) ||
@@ -475,7 +507,8 @@ const OfferCodeList = () => {
         );
       },
       sorter: (a, b) => a?.OfferName?.length - b?.OfferName?.length,
-      sortOrder: sortedInfo1.columnKey === 'OfferName' ? sortedInfo1.order : null,
+      sortOrder:
+        sortedInfo1.columnKey === 'OfferName' ? sortedInfo1.order : null,
       ellipsis: true,
     },
     {
@@ -502,15 +535,17 @@ const OfferCodeList = () => {
   ];
 
   const handleShareOfferCode = async (record) => {
-    setSelectedOfferCode(record)
+    setSelectedOfferCode(record);
-    setOpen(prev => !prev);
+    setOpen((prev) => !prev);
-  }
-
-  const onCheckAllChange = e => {
-    setCheckedList(e.target.checked ? plainOptions?.map(({ value }) => value) : []);
   };
 
-  const onChange = list => {
+  const onCheckAllChange = (e) => {
+    setCheckedList(
+      e.target.checked ? plainOptions?.map(({ value }) => value) : []
+    );
+  };
+
+  const onChange = (list) => {
     setCheckedList(list);
   };
 
@@ -522,7 +557,7 @@ const OfferCodeList = () => {
     setSortedInfo1(sorter);
   };
 
-  const onSelectChange = newSelectedRowKeys => {
+  const onSelectChange = (newSelectedRowKeys) => {
     setSelectedRowKeys(newSelectedRowKeys);
   };
 
@@ -532,8 +567,10 @@ const OfferCodeList = () => {
   };
 
   const handleSubmit = async () => {
-    if (checkedList?.includes("Mail") || checkedList?.includes("SMS")) {
+    if (checkedList?.includes('Mail') || checkedList?.includes('SMS')) {
-      const selectedCustomers = customerData?.filter((_, index) => selectedRowKeys.includes(index))
+      const selectedCustomers = customerData?.filter((_, index) =>
+        selectedRowKeys.includes(index)
+      );
       if (selectedCustomers?.length > 0) {
         const { BrName, BrEmail } = selectedCustomers?.[0] || {};
         const {
@@ -547,49 +584,114 @@ const OfferCodeList = () => {
           ProdCount,
           RewardOrderTypeDetails,
           RewardTypeDetails,
-          RewardFreeTypeDetails } = selectedOfferCode;
+          RewardFreeTypeDetails,
-        let response = { mail: "", sms: "" };
+        } = selectedOfferCode;
+        let response = { mail: '', sms: '' };
         setIsLoading(true);
 
-        if (checkedList?.includes("Mail")) {
+        if (checkedList?.includes('Mail')) {
-          const applicableEmailCustomers = selectedCustomers?.filter(({ CustEmail }) => CustEmail !== null)?.map(({ CustId, CustName, CustMobile, CustEmail }) => ({
+          const applicableEmailCustomers =
-            CustId, CustName, CustMobile, CustEmail,
+            selectedCustomers
+              ?.filter(({ CustEmail }) => CustEmail !== null)
+              ?.map(({ CustId, CustName, CustMobile, CustEmail }) => ({
+                CustId,
+                CustName,
+                CustMobile,
+                CustEmail,
               })) || [];
           if (applicableEmailCustomers?.length > 0) {
-            let Categories = ''
+            let Categories = '';
-            let Products = ''
+            let Products = '';
             if (RewardTypeName === 'Discount' && AppliesTo === 'S') {
-              Categories = RewardOrderTypeDetails?.filter(({ ProdCat }) => ProdCat !== 0 || ProdCat !== null)?.map(({ ProdCatName }) => ProdCatName)?.filter(Boolean).join()
+              Categories = RewardOrderTypeDetails?.filter(
-              Products = RewardOrderTypeDetails?.filter(({ ProdCat }) => ProdCat === 0 || ProdCat === null)?.map(({ ProdName }) => ProdName)?.filter(Boolean).join()
+                ({ ProdCat }) => ProdCat !== 0 || ProdCat !== null
+              )
+                ?.map(({ ProdCatName }) => ProdCatName)
+                ?.filter(Boolean)
+                .join();
+              Products = RewardOrderTypeDetails?.filter(
+                ({ ProdCat }) => ProdCat === 0 || ProdCat === null
+              )
+                ?.map(({ ProdName }) => ProdName)
+                ?.filter(Boolean)
+                .join();
             } else if (RewardTypeName === 'Free Products') {
-              Products = [...RewardTypeDetails?.map(({ ProdName }) => ProdName), ...RewardFreeTypeDetails?.map(({ ProdName }) => ProdName)]?.filter(Boolean).join()
+              Products = [
+                ...RewardTypeDetails?.map(({ ProdName }) => ProdName),
+                ...RewardFreeTypeDetails?.map(({ ProdName }) => ProdName),
+              ]
+                ?.filter(Boolean)
+                .join();
             }
             const postEmailData = {
-              BrName, BrEmail, Description, MinQty, MinPurchase, OfferCode,
+              BrName,
-              CustomerDtl: applicableEmailCustomers, RewardTypeName, AppliesTo, Categories, Products, Amount: OfferAmt,
+              BrEmail,
-              Qty: ProdCount
+              Description,
+              MinQty,
+              MinPurchase,
+              OfferCode,
+              CustomerDtl: applicableEmailCustomers,
+              RewardTypeName,
+              AppliesTo,
+              Categories,
+              Products,
+              Amount: OfferAmt,
+              Qty: ProdCount,
             };
-            response.mail = await dispatch(postCustomerOfferMail(postEmailData)).unwrap();
+            response.mail = await dispatch(
+              postCustomerOfferMail(postEmailData)
+            ).unwrap();
           }
         }
 
-        if (checkedList?.includes("SMS")) {
+        if (checkedList?.includes('SMS')) {
-          const applicableSMSCustomers = selectedCustomers?.filter(({ CustMobile }) => CustMobile !== null)?.map(({ CustId, CustName, CustMobile, CustEmail }) => ({
+          const applicableSMSCustomers =
-            CustId, CustName, CustMobile, CustEmail,
+            selectedCustomers
+              ?.filter(({ CustMobile }) => CustMobile !== null)
+              ?.map(({ CustId, CustName, CustMobile, CustEmail }) => ({
+                CustId,
+                CustName,
+                CustMobile,
+                CustEmail,
               })) || [];
           if (applicableSMSCustomers?.length > 0) {
-            let Categories = ''
+            let Categories = '';
-            let Products = ''
+            let Products = '';
             if (RewardTypeName === 'Discount' && AppliesTo === 'S') {
-              Categories = RewardOrderTypeDetails?.filter(({ ProdCat }) => ProdCat !== 0 || ProdCat !== null)?.map(({ ProdCatName }) => ProdCatName)?.filter(Boolean).join()
+              Categories = RewardOrderTypeDetails?.filter(
-              Products = RewardOrderTypeDetails?.filter(({ ProdCat }) => ProdCat === 0 || ProdCat === null)?.map(({ ProdName }) => ProdName)?.filter(Boolean).join()
+                ({ ProdCat }) => ProdCat !== 0 || ProdCat !== null
+              )
+                ?.map(({ ProdCatName }) => ProdCatName)
+                ?.filter(Boolean)
+                .join();
+              Products = RewardOrderTypeDetails?.filter(
+                ({ ProdCat }) => ProdCat === 0 || ProdCat === null
+              )
+                ?.map(({ ProdName }) => ProdName)
+                ?.filter(Boolean)
+                .join();
             } else if (RewardTypeName === 'Free Products') {
-              Products = [...RewardTypeDetails?.map(({ ProdName }) => ProdName), ...RewardFreeTypeDetails?.map(({ ProdName }) => ProdName)]?.filter(Boolean).join()
+              Products = [
+                ...RewardTypeDetails?.map(({ ProdName }) => ProdName),
+                ...RewardFreeTypeDetails?.map(({ ProdName }) => ProdName),
+              ]
+                ?.filter(Boolean)
+                .join();
             }
             const postSMSData = {
-              BrName, BrEmail, Description, MinQty, MinPurchase, OfferCode,
+              BrName,
-              CustomerDtl: applicableSMSCustomers, RewardTypeName, AppliesTo, Categories, Products, Amount: OfferAmt,
+              BrEmail,
-              Qty: ProdCount
+              Description,
+              MinQty,
+              MinPurchase,
+              OfferCode,
+              CustomerDtl: applicableSMSCustomers,
+              RewardTypeName,
+              AppliesTo,
+              Categories,
+              Products,
+              Amount: OfferAmt,
+              Qty: ProdCount,
             };
 
             response.sms = await dispatch(postSMSOffer(postSMSData)).unwrap();
@@ -597,12 +699,17 @@ const OfferCodeList = () => {
         }
 
         setIsLoading(false);
-        setOpen(prev => !prev);
+        setOpen((prev) => !prev);
         setSelectedRowKeys([]);
-        setCheckedList([])
+        setCheckedList([]);
-        if (response?.mail?.data?.statusCode === 1 || response?.sms?.data?.statusCode === 1) {
+        if (
+          response?.mail?.data?.statusCode === 1 ||
+          response?.sms?.data?.statusCode === 1
+        ) {
           setMessageType('success');
-          setMessageData(`${response?.mail?.data?.response} & ${response?.sms?.data?.response}`);
+          setMessageData(
+            `${response?.mail?.data?.response} & ${response?.sms?.data?.response}`
+          );
           return;
         } else {
           setMessageType('error');
@@ -615,14 +722,16 @@ const OfferCodeList = () => {
       }
     } else {
       setMessageType('error');
-      setMessageData('Please select at least one communication method (Mail/SMS)');
+      setMessageData(
+        'Please select at least one communication method (Mail/SMS)'
+      );
     }
   };
 
   const handleCancel = () => {
-    setOpen(prev => !prev)
+    setOpen((prev) => !prev);
     setSelectedRowKeys([]);
-  }
+  };
 
   return (
     <>
@@ -674,12 +783,31 @@ const OfferCodeList = () => {
             children={
               <>
                 <Spin spinning={isLoading} tip="Sending...">
-                <div style={{ display: 'flex', flexDirection: "column", gap: "0.5rem", border: "1px solid #d9d9d9", padding: "0.5rem", borderRadius: "0.50rem" }}>
+                  <div
-                  <p style={{ fontSize: '14px', fontWeight: '500' }}>Share Codes via :</p>
+                    style={{
-                  <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: '0.5rem',
+                      border: '1px solid #d9d9d9',
+                      padding: '0.5rem',
+                      borderRadius: '0.50rem',
+                    }}
+                  >
+                    <p style={{ fontSize: '14px', fontWeight: '500' }}>
+                      Share Codes via :
+                    </p>
+                    <Checkbox
+                      indeterminate={indeterminate}
+                      onChange={onCheckAllChange}
+                      checked={checkAll}
+                    >
                       Check All
                     </Checkbox>
-                  <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
+                    <CheckboxGroup
+                      options={plainOptions}
+                      value={checkedList}
+                      onChange={onChange}
+                    />
                   </div>
                   <Table
                     rowSelection={rowSelection}

src/Pages/Payment/PaymentFailedDetails/PaymentFailedSales.jsx

@@ -783,27 +783,16 @@ const PaymentFailedSales = ({ paymentFailedStatusFun, OpenFailData }) => {
     gateWaySubmit();
   }, []);
 
-  const AllProductTokenFunction = () => { };
-  // useEffect(() => {
-  //     if (PrintOrderDetails?.length > 0) {
-  //         if (isMobile) {
-  //             MobilePrint(PrintOrderDetails, UpiId, "Booking")
-  //         }
-  //         else {
-  //             Print()
-  //         }
-
-  //         // setPrintOrderDetails([])
-  //     } //change by karthiga
-  // }, [PrintOrderDetails])
-  //
-
-  //function
-
   const PrintFun = () => {
     if (PrintOrderDetails?.length > 0) {
       if (isMobile) {
-        MobilePrint(appPreferences, PrintOrderDetails, UpiId, 'Booking', SettingDataSelector);
+        MobilePrint(
+          appPreferences,
+          PrintOrderDetails,
+          UpiId,
+          'Booking',
+          SettingDataSelector
+        );
       } else {
         Print();
       }
@@ -1063,9 +1052,9 @@ const PaymentFailedSales = ({ paymentFailedStatusFun, OpenFailData }) => {
       'Style 11': 'PrintStyle11',
       'Style 12': 'PrintStyle12',
       'Style 13': 'RePrint',
-      "A4": "PrintStyleA4",
+      A4: 'PrintStyleA4',
-      "A5": "PrintStyleA5",
+      A5: 'PrintStyleA5',
-      "A4Standard": "A4Standard"
+      A4Standard: 'A4Standard',
     };
 
     const selectedStyle =

src/Pages/Payment/PaymentOptions/PaymentOptions.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { ArrowRightOutlined } from '@ant-design/icons';
 import { Radio } from 'antd';
 import { Messages } from '../../../Components/Notifications/Messages';
@@ -12,13 +12,7 @@ import {
 import { getSession } from '../../../Services/Others.js';
 import '../../../Styles/Payment/PaymentOptions/PaymentOptions.scss';
 import { useAuth } from '../../../AuthContext.jsx';
-// import {getPaymentOptionFeature} from '../../BookingScreen/Components/BSBillingTables/BSBillingTable1/BST1Payment.jsx'
+import { changeCommonPaymentOptions } from '../../../Features/BookingScreen/BookingData/BookingData.js';
-import {
-  changeCommonPaymentOptions,
-  getPaymentOptionFeatureApi,
-  GlobalCommonPaymentOptions,
-} from '../../../Features/BookingScreen/BookingData/BookingData.js';
-import BST1Payment from '../../BookingScreen/Components/BSBillingTables/BSBillingTable1/BST1Payment.jsx';
 import { fetchAndSetPaymentOptions } from '../../BookingScreen/Template/PaymentOptions.js';
 import {
   getPaymentConfigData,
@@ -41,7 +35,6 @@ function PaymentOptions({ setModalOpen }) {
   );
 
   const dispatch = useDispatch();
-
   const AppId = getSession('AppId');
   const UserId = getSession('UserId');
   const CompId = getSession('CompId');
@@ -83,7 +76,6 @@ function PaymentOptions({ setModalOpen }) {
       (item) =>
         item.FlowName === 'sales' && item.Option === 'Pay at the counter'
     );
-    console.log(salesPayAtCounter);
 
     const modeSet = new Set();
 
@@ -354,10 +346,7 @@ function PaymentOptions({ setModalOpen }) {
       const paymentOptionResponse = await dispatch(
         getPaymentConfigData({ typeName: 'Payment Option' })
       ).unwrap();
-      console.log(
+
-        paymentOptionResponse?.data?.data,
-        ' paymentOptionResponse?.data?.data'
-      );
       if (paymentOptionResponse?.data?.statusCode == 1) {
         const requiredFeatureNames = ['Payment Gateway', 'Payment Device'];
         const featureNames = checkPaymentFeatures?.data?.data?.flatMap((app) =>
@@ -432,6 +421,7 @@ function PaymentOptions({ setModalOpen }) {
           BranchId: BranchId,
           DetailType: 'BU',
         };
+        ALERT('HIH');
         const Businessupidetails = await dispatch(
           getPaymentUPIDetails(BusiData)
         ).unwrap();
@@ -1259,7 +1249,7 @@ function PaymentOptions({ setModalOpen }) {
     const result = {};
 
     data?.forEach((item) => {
-      const { FlowId, FlowName, Option, OptionDetails } = item;
+      const { FlowId, FlowName, OptionDetails } = item;
 
       if (!result[FlowId]) {
         result[FlowId] = {
@@ -1590,7 +1580,7 @@ function PaymentOptions({ setModalOpen }) {
               </>
             )}
 
-          <div className="SBTNPaymentOptions">
+          <div className=" submitButtonDiv">
             <Buttons
               buttonText="SUBMIT"
               color="901D77"

src/Pages/Payment/PaymentReceivedRetail/PaymentReceivedRetail.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   getSession,
@@ -9,7 +9,6 @@ import { Tables } from '../../../Components/Tables/Table';
 import { Form } from 'antd';
 import { InputField } from '../../../Components/Forms/InputField.jsx';
 import Buttons from '../../../Components/Forms/Buttons.jsx';
-import { PlusOutlined } from '@ant-design/icons';
 import { DropDowns } from '../../../Components/Forms/DropDown.jsx';
 import { getWholeSalePayments } from '../../../Features/WSTransaction/WSTransaction.js';
 import { Messages } from '../../../Components/Notifications/Messages.jsx';
@@ -17,7 +16,10 @@ import { DatePicProd } from '../../../Components/Forms/DatePickerProduct.jsx';
 import moment from 'moment';
 import { GlobalLastEntryDateDtl } from '../../../Features/WholeSale/WholesaleData.js';
 import { useAuth } from '../../../AuthContext.jsx';
-import { changeBreadCrumb, getEmpAccess } from '../../../Features/AppPage/CenterPage.js';
+import {
+  changeBreadCrumb,
+  getEmpAccess,
+} from '../../../Features/AppPage/CenterPage.js';
 import '../../../Styles/Payment/PaymentReceivedRetail/PaymentReceivedRetail.scss';
 import FormHeader from '../../PageComponents/FormHeader.jsx';
 import {
@@ -43,7 +45,6 @@ const PaymentReceivedRetail = () => {
 
   const [page, setpage] = useState(1);
   const [SelectedCustomer, setSelectedCustomer] = useState();
-  console.log(SelectedCustomer, 'SelectedCustomerSelectedCustomer');
   const [SelectedCustomerRole, setSelectedCustomerRole] = useState();
   const [customer, setCustomer] = useState();
   const [CustPaymentModes, setPaymentModesCust] = useState([]);
@@ -77,7 +78,6 @@ const PaymentReceivedRetail = () => {
     dispatch(changeBreadCrumb({ items: items }));
   }, []);
 
-
   useEffect(() => {
     const PaymentCredit =
       CustPaymentModes?.find((a) => a?.ConfigId === selectedPaymentMode)
@@ -288,28 +288,6 @@ const PaymentReceivedRetail = () => {
   useEffect(() => {
     fetchWholeSaleEmployee();
   }, [EmployeePaymentModes]);
-  // const fetchWholeSaleCustomer = async () => {
-
-  //     const Data = {
-  //         "CompId": CompId,
-  //         "BranchId": BranchId,
-  //         "AppId": AppId
-  //     }
-  //     const gettingTableData = await dispatch(
-  //         getCustmentWholeSaleTran(Data)
-  //     ).unwrap();
-  //     if (gettingTableData?.data?.statusCode === 1) {
-  //         setCustomer(gettingTableData?.data?.data);
-  //         let cutDefaultValue = CustPaymentModes?.[0]
-  //         setSelectedPaymentMode(cutDefaultValue?.ConfigId)
-  //     }
-  //     else {
-  //         setCustomer([])
-  //         setSelectedPaymentMode('')
-  //     }
-
-  // };
-
   const fetchWholeSaleEmployee = async () => {
     const Data = {
       CompId: CompId,
@@ -328,12 +306,16 @@ const PaymentReceivedRetail = () => {
   };
   const getPreference = async () => {
     const data = { AppId: AppId, CompId: CompId, BranchId: BranchId };
-    const { data: res } = await dispatch(getPreferenceData(data)).unwrap()
+    const { data: res } = await dispatch(getPreferenceData(data)).unwrap();
-    const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find((setting) => setting?.SettingIdName?.toLowerCase() === "decimal" && setting?.SettingValue === 'Y');
+    const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find(
+      (setting) =>
+        setting?.SettingIdName?.toLowerCase() === 'decimal' &&
+        setting?.SettingValue === 'Y'
+    );
     if (decimalSetting) {
-      setAllowDecimal(true)
+      setAllowDecimal(true);
-    }
     }
+  };
   const onFinish = async (values) => {
     setButtonDisabled(true);
     const postData = {
@@ -607,14 +589,11 @@ const PaymentReceivedRetail = () => {
                 }}
               >
                 <p className="TransactionList-title">Transaction List</p>
-                {/* {PaymentType != 'O' &&
-        <p className='TransactionList-title' style={{ fontSize: "14px", cursor: "pointer" }}>Total Amount : <span style={{ color: FilterAmount < 0 ? "red" : "green" }}>{
-            // PaidListData?.[0]?.OverAllTotalAmount || 0
-            Math.abs(FilterAmount)
-        }</span></p>
-    } */}
               </div>
-              <div className="AllEntryShowList" style={{ overflow: 'scroll' }}>
+              <div
+                className="AllEntryShowList"
+                style={{ overflow: 'scroll', scrollbarWidth: 'none' }}
+              >
                 <div className="Re-Print-table">
                   <Tables
                     columns={columns}

src/Pages/Reports/DateWiseReport/DateWiseReport.jsx

@@ -1,13 +1,10 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 import { Switch, Tooltip, Form, DatePicker } from 'antd';
-import moment from 'moment';
-import { DatePicProd } from '../../../Components/Forms/DatePickerProduct.jsx';
-import { Tables } from '../../../Components/Tables/Table';
 import { BiSolidPrinter, BiUpArrowCircle } from 'react-icons/bi';
 import Denomination from '../Denomination/Denomination';
-import { Popover } from 'antd';
 import '../../../Styles/Reports/DateWiseReport/DateWiseReport.scss';
+import '../../../Styles/Reports/ItemWiseReport/ItemWiseReport.scss';
 import { changeBreadCrumb } from '../../../Features/AppPage/CenterPage';
 import {
   getDatewiseReport,
@@ -20,7 +17,6 @@ import { getSession, printDiv } from '../../../Services/WSOthers';
 import DatewiseReportPdf from '../../paymentpdfPage/DateWiseReportPdf';
 import { DropDowns } from '../../../Components/Forms/DropDown.jsx';
 import { isMobile } from 'react-device-detect';
-import logo from '../../../Images/pozologoimg.png';
 import { RadioGrpButton } from '../../../Components/Forms/RadioGroup.jsx';
 import { IoSearch } from 'react-icons/io5';
 import { ExtractDateFormate } from '../../../Services/Others.js';
@@ -62,7 +58,11 @@ const DateWiseReport = () => {
     Amounts: {},
     OverAllTotal: 0,
   });
-  const MobileA4Print = SettingDataSelector?.[0]?.SettingDtlDetails?.find((setting) => setting?.SettingIdName?.toLowerCase() === "mobilea4" && setting?.SettingValue === 'Y');
+  const MobileA4Print = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
+    (setting) =>
+      setting?.SettingIdName?.toLowerCase() === 'mobilea4' &&
+      setting?.SettingValue === 'Y'
+  );
   console.log(MobileA4Print, 'MobileA4PrintMobileA4Print');
 
   useEffect(() => {
@@ -85,28 +85,29 @@ const DateWiseReport = () => {
     });
     return formattedDate;
   };
-  const formatAmount = (value) => {
+
-    return allowDecimal ? parseFloat(value || 0).toFixed(2) : Math.round(value || 0);
-  };
   const mobileDateWisePrintFun = async (data) => {
-
+    const Dataa = ['Cash', 'Upi', 'Card', 'Credit']
-
+      ?.map((method) => {
-    const Dataa = ["Cash", "Upi", "Card", "Credit"]?.map(method => {
         const amountKey = `${method}Amount`;
         const countKey = `${method}Count`;
         let TableData = AppType ? WholeDataSource : dataSource;
-      const total = TableData?.reduce((acc, entry) => {
+        const total = TableData?.reduce(
+          (acc, entry) => {
             acc.amount += entry[amountKey] || 0;
             acc.count += entry[countKey] || 0;
             return acc;
-      }, { amount: 0, count: 0 });
+          },
+          { amount: 0, count: 0 }
+        );
 
         return {
           PaymentMethod: method,
           CountOfPaymentType: total.count,
-        NetAmount: total.amount
+          NetAmount: total.amount,
         };
-    })?.filter(entry => entry.NetAmount > 0);
+      })
+      ?.filter((entry) => entry.NetAmount > 0);
 
     let Tabledata = Dataa?.map((data, index) => {
       const snoSpacing = Math.max(0, 3 - String(index + 1).length);
@@ -358,7 +359,7 @@ const DateWiseReport = () => {
     </style>`;
 
   useEffect(() => {
-    getPreference()
+    getPreference();
     dispatch(changeBreadCrumb({ items: items }));
     fetchInitialData();
     if (UserRole != 'Employee') {
@@ -368,12 +369,16 @@ const DateWiseReport = () => {
 
   const getPreference = async () => {
     const data = { AppId: AppId, CompId: CompId, BranchId: BranchId };
-    const { data: res } = await dispatch(getPreferenceData(data)).unwrap()
+    const { data: res } = await dispatch(getPreferenceData(data)).unwrap();
-    const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find((setting) => setting?.SettingIdName?.toLowerCase() === "decimal" && setting?.SettingValue === 'Y');
+    const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find(
+      (setting) =>
+        setting?.SettingIdName?.toLowerCase() === 'decimal' &&
+        setting?.SettingValue === 'Y'
+    );
     if (decimalSetting) {
-      setAllowDecimal(true)
+      setAllowDecimal(true);
-    }
     }
+  };
 
   const userDropData = async () => {
     const gettinguserDropDown = await dispatch(
@@ -400,7 +405,10 @@ const DateWiseReport = () => {
   const fetchInitialData = async () => {
     let currentDate = new Date().toJSON().slice(0, 10);
     formRef?.current?.setFieldsValue({
-      dateRange: [dayjs(currentDate, 'YYYY-MM-DD'), dayjs(currentDate, 'YYYY-MM-DD')],
+      dateRange: [
+        dayjs(currentDate, 'YYYY-MM-DD'),
+        dayjs(currentDate, 'YYYY-MM-DD'),
+      ],
     });
     setOrderFromDate(currentDate + 'T00:00:00');
     setOrderToDate(currentDate + 'T23:59:59');
@@ -495,18 +503,6 @@ const DateWiseReport = () => {
   //   },
   // ];
 
-  const onChange = (checked) => {
-    setOpenDenomination(checked);
-  };
-
-  const hide = () => {
-    setOpen(false);
-  };
-  const handleOpenChange = (newOpen) => {
-    setOpen(newOpen);
-  };
-
-
   const UserDropDownChange = async (e) => {
     setUserId(e);
     let mob = userDropDown?.filter((item) => item?.UserId === e);
@@ -554,8 +550,7 @@ const DateWiseReport = () => {
           printId: 'RePrint',
           printStyle: style,
         });
-      }
+      } else {
-      else {
         var textEncoded = encodeURI(receiptText);
         var TypeCheck = 'PrintReceipt';
         var scheme = 'pozoprinter';
@@ -798,9 +793,11 @@ const DateWiseReport = () => {
                     <th rowSpan="2" style={{ textAlign: 'center' }}>
                       S.No
                     </th>
-                    {dataSource?.[0]?.Date && <th rowSpan="2" style={{ textAlign: 'center' }}>
+                    {dataSource?.[0]?.Date && (
+                      <th rowSpan="2" style={{ textAlign: 'center' }}>
                         Date
-                    </th>}
+                      </th>
+                    )}
                     <th colSpan="2" style={{ textAlign: 'center' }}>
                       Cash
                     </th>
@@ -853,7 +850,9 @@ const DateWiseReport = () => {
                     return (
                       <tr key={Date + idx}>
                         <td style={{ textAlign: 'center' }}>{idx + 1}</td>
-                        {dataSource?.[0]?.Date && <td style={{ textAlign: 'center' }}>{date}</td>}
+                        {dataSource?.[0]?.Date && (
+                          <td style={{ textAlign: 'center' }}>{date}</td>
+                        )}
                         <td style={{ textAlign: 'right' }}>{CashCount ?? 0}</td>
                         <td style={{ textAlign: 'right' }}>
                           {safeRound(CashAmount)}
@@ -866,7 +865,9 @@ const DateWiseReport = () => {
                         <td style={{ textAlign: 'right' }}>
                           {safeRound(CardAmount)}
                         </td>
-                        <td style={{ textAlign: 'right' }}>{CreditCount ?? 0}</td>
+                        <td style={{ textAlign: 'right' }}>
+                          {CreditCount ?? 0}
+                        </td>
                         <td style={{ textAlign: 'right' }}>
                           {safeRound(CreditAmount)}
                         </td>

src/Pages/Wholesalespreorder/WholesalePreorderForm.jsx

@@ -1,4 +1,11 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
+import {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  lazy,
+  Suspense,
+} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { InputField } from '../../Components/Forms/InputField.jsx';
 import Buttons from '../../Components/Forms/Buttons.jsx';
@@ -47,8 +54,10 @@ import {
   GlobalWSDate,
 } from '../../Features/WholeSale/WholesaleData.js';
 import { IoMdAdd, IoMdAddCircle } from 'react-icons/io';
-import AddUOMPreorder from '../PurchaseScreen/WholeSaleComponent/AddUomPreorder.jsx';
+const AddUOMPreorder = lazy(
-import Search from '../../Components/Forms/Search.jsx';
+  () => import('../PurchaseScreen/WholeSaleComponent/AddUomPreorder.jsx')
+);
+const Search = lazy(() => import('../../Components/Forms/Search.jsx'));
 
 const subDirectory = import.meta.env.BASE_URL;
 
@@ -535,8 +544,12 @@ const WsPreOrderForm = ({
           String(record.CustShortName)
             ?.toLowerCase()
             ?.includes(value?.toLowerCase()) ||
-          String(record.CustName)?.toLowerCase()?.includes(value?.toLowerCase()) ||
+          String(record.CustName)
-          String(record.CustMobile)?.toLowerCase()?.includes(value?.toLowerCase())
+            ?.toLowerCase()
+            ?.includes(value?.toLowerCase()) ||
+          String(record.CustMobile)
+            ?.toLowerCase()
+            ?.includes(value?.toLowerCase())
         );
       },
       render: (text, record, row) => (
@@ -767,6 +780,7 @@ const WsPreOrderForm = ({
     setSearchedText(e?.target?.value);
   };
   return (
+    <Suspense fallback={<div>Loading…</div>}>
       <div className="WsPreOrderForm-Master">
         <div className="pageOverAll" style={{ height: Mode == 'Y' && '100%' }}>
           {(addcustomer || hold) && (
@@ -954,7 +968,9 @@ const WsPreOrderForm = ({
                                 },
                               ]}
                             >
-                            <label style={{ fontWeight: '600' }}>Date : </label>
+                              <label style={{ fontWeight: '600' }}>
+                                Date :{' '}
+                              </label>
                               <br />
                               <br />
                               <DatePicProd
@@ -1046,7 +1062,10 @@ const WsPreOrderForm = ({
                                 />
                               </Form.Item>
                               <IoMdAddCircle
-                              style={{ fontSize: '1.5rem', paddingTop: '8px' }}
+                                style={{
+                                  fontSize: '1.5rem',
+                                  paddingTop: '8px',
+                                }}
                                 onClick={() => {
                                   AddUomModalFun(true);
                                 }}
@@ -1172,6 +1191,7 @@ const WsPreOrderForm = ({
           </div>
         </div>
       </div>
+    </Suspense>
   );
 };
 

src/Pages/paymentpdfPage/PaymentPdfBooking.jsx

@@ -1,37 +1,67 @@
-import React, { useEffect, useState } from 'react';
+import React, { lazy, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import moment from 'moment';
 import {
-  dateFormatChange,
   dateFormatChange1,
   extractLastNumber,
   extractLastNumberOrderId,
   getSession,
 } from '../../Services/Others';
-import {
+import { ApplicationPreferences } from '../../Features/BrachLogin/BranchLogin.js';
-  ApplicationPreferences,
-  getBranchDetail,
-} from '../../Features/BrachLogin/BranchLogin';
-import PrintStyle1 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1';
-import PrintStyle2 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle2';
-import PrintStyle3 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle3';
-import PrintStyle4 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle4';
-import PrintStyle5 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle5';
-import PrintStyle6 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle6';
-import PrintStyle7 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle7';
-import PrintStyle8 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle8';
-import PrintStyle9 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle9';
-import PrintStyle10 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle10';
-import PrintStyle11 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle11';
-import PrintStyle12 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle12';
 import { SelectedPrintTemplate } from '../../Features/ThemeChange/ThemeChange';
-import PrintA4Style11 from '../BookingScreen/PrintTemplates/A4/PrintA4Style11';
+import { PreferenceData } from '../../Features/BookingScreen/BookingData/BookingData.js';
-import PrintA5Style11 from '../BookingScreen/PrintTemplates/A4/PrintStyleA5';
-import A4Standard from '../BookingScreen/PrintTemplates/A4/A4Standard';
-import TaxInvoice from '../BookingScreen/PrintTemplates/A4/TaxInvoice';
-import { settingDataSelector } from '../../Features/PreferenceMaster/PreferenceMaster';
-import { PreferenceData } from '../../Features/BookingScreen/BookingData/BookingData';
 
+// js Files
+const PrintStyle1 = lazy(
+  () => import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1.jsx')
+);
+const PrintStyle2 = lazy(
+  () => import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle2.jsx')
+);
+const PrintStyle3 = lazy(
+  () => import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle3.jsx')
+);
+const PrintStyle4 = lazy(
+  () => import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle4.jsx')
+);
+const PrintStyle5 = lazy(
+  () => import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle5.jsx')
+);
+const PrintStyle6 = lazy(
+  () => import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle6.jsx')
+);
+const PrintStyle7 = lazy(
+  () => import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle7.jsx')
+);
+const PrintStyle8 = lazy(
+  () => import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle8.jsx')
+);
+const PrintStyle9 = lazy(
+  () => import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle9.jsx')
+);
+const PrintStyle10 = lazy(
+  () =>
+    import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle10.jsx')
+);
+const PrintStyle11 = lazy(
+  () =>
+    import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle11.jsx')
+);
+const PrintStyle12 = lazy(
+  () =>
+    import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle12.jsx')
+);
+const PrintA4Style11 = lazy(
+  () => import('../BookingScreen/PrintTemplates/A4/PrintA4Style11.jsx')
+);
+const PrintA5Style11 = lazy(
+  () => import('../BookingScreen/PrintTemplates/A4/PrintStyleA5.jsx')
+);
+const A4Standard = lazy(
+  () => import('../BookingScreen/PrintTemplates/A4/A4Standard.jsx')
+);
+const TaxInvoice = lazy(
+  () => import('../BookingScreen/PrintTemplates/A4/TaxInvoice.jsx')
+);
 const PaymentPdfBooking = ({
   index,
   orderId,
@@ -49,7 +79,7 @@ const PaymentPdfBooking = ({
   let PaymentStatusSuccess = PaymentStatus?.filter(
     (ps) => ps.PaymentStatus === 'S'
   );
-  const isEditedBill = PaymentStatus?.some(payment => {
+  const isEditedBill = PaymentStatus?.some((payment) => {
     const type = payment?.AdjustmentType?.toLowerCase();
     return (
       (type === 'extra' || type === 'refund') &&
@@ -59,8 +89,11 @@ const PaymentPdfBooking = ({
   });
   const lastTransaction = PaymentStatus?.find(
     (ps) => ps.PaymentStatus === 'S' && ps?.LastOrderTran === 'Y'
-  )
+  );
-  console.log(singleData2?.filter(data => data?.EditTokenAvailable !== 'N'), "singleData2")
+  console.log(
+    singleData2?.filter((data) => data?.EditTokenAvailable !== 'N'),
+    'singleData2'
+  );
   const ExtraChargeTotal = table2Data?.ExtraChargeDetails?.reduce(
     (accumulator, currentObject) => {
       return accumulator + currentObject.TotalAmt;
@@ -92,7 +125,7 @@ const PaymentPdfBooking = ({
   const [BranchZip, setBranchZip] = useState();
   const CashierName = getSession('userName');
   const printerTemplateStyle = useSelector(SelectedPrintTemplate);
-  console.log(printerTemplateStyle, "printerTemplateStyle")
+  console.log(printerTemplateStyle, 'printerTemplateStyle');
   const appPreferences = useSelector(ApplicationPreferences);
   const SettingData = useSelector(PreferenceData);
   const estimatePrintHeader =
@@ -386,9 +419,17 @@ const PaymentPdfBooking = ({
                     GSTIN: {table2Data?.BrGSTIN}
                   </p>
                 )}
-                {table2Data?.BrMobile && <p style={{ fontSize: '9px', margin: '7px 0 0 0', padding: 0 }}>
+                {table2Data?.BrMobile && (
+                  <p
+                    style={{
+                      fontSize: '9px',
+                      margin: '7px 0 0 0',
+                      padding: 0,
+                    }}
+                  >
                     Mobile:+91 {table2Data?.BrMobile}
-                </p>}
+                  </p>
+                )}
               </div>
             </div>
           </div>
@@ -819,25 +860,40 @@ const PaymentPdfBooking = ({
                         <table style={{ width: '90%' }}>
                           <tr>
                             <td
-                              style={{ fontSize: '10px', textAlign: 'center' }}
+                              style={{
+                                fontSize: '10px',
+                                textAlign: 'center',
+                              }}
                             ></td>
                             <td
-                              style={{ fontSize: '10px', textAlign: 'center' }}
+                              style={{
+                                fontSize: '10px',
+                                textAlign: 'center',
+                              }}
                             >
                               Taxable Amount
                             </td>
                             <td
-                              style={{ fontSize: '10px', textAlign: 'center' }}
+                              style={{
+                                fontSize: '10px',
+                                textAlign: 'center',
+                              }}
                             >
                               CGST
                             </td>
                             <td
-                              style={{ fontSize: '10px', textAlign: 'center' }}
+                              style={{
+                                fontSize: '10px',
+                                textAlign: 'center',
+                              }}
                             >
                               SGST
                             </td>
                             <td
-                              style={{ fontSize: '10px', textAlign: 'center' }}
+                              style={{
+                                fontSize: '10px',
+                                textAlign: 'center',
+                              }}
                             >
                               Total Amount
                             </td>
@@ -845,7 +901,10 @@ const PaymentPdfBooking = ({
                           {OrderDetailGST?.map((item) => (
                             <tr>
                               <td
-                                style={{ fontSize: '10px', textAlign: 'right' }}
+                                style={{
+                                  fontSize: '10px',
+                                  textAlign: 'right',
+                                }}
                               >
                                 {item?.TaxPercentage} %
                               </td>
@@ -1137,7 +1196,7 @@ const PaymentPdfBooking = ({
           ></div>
         )}
 
-        {(PaymentStatusSuccess?.length > 1 && !isEditedBill) && (
+        {PaymentStatusSuccess?.length > 1 && !isEditedBill && (
           <>
             {/* <p>Split Payment:</p> */}
             {Object.keys(aggregatedPayments)?.map((paymentType) => (
@@ -1151,21 +1210,30 @@ const PaymentPdfBooking = ({
           </>
         )}
         {isEditedBill && lastTransaction && (
-          <div style={{
+          <div
-            width: '90%', marginTop: '2px',
+            style={{
+              width: '90%',
+              marginTop: '2px',
               marginLeft: '10px',
-            paddingTop: '2px', display: 'flex', justifyContent: 'center', alignItems: 'center',
+              paddingTop: '2px',
-            flexDirection: 'column', borderTop: '1px dashed #ccc'
+              display: 'flex',
-          }}>
+              justifyContent: 'center',
+              alignItems: 'center',
+              flexDirection: 'column',
+              borderTop: '1px dashed #ccc',
+            }}
+          >
             <div
               style={{
                 fontSize: '12px',
-                width: '70%'
+                width: '70%',
               }}
             >
               <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                 <span style={{ color: '#333' }}>Bill Gross Amount</span>
-                <strong>{(lastTransaction?.BeforeAdjustment || 0).toFixed(2)}</strong>
+                <strong>
+                  {(lastTransaction?.BeforeAdjustment || 0).toFixed(2)}
+                </strong>
               </div>
               <div
                 style={{
@@ -1182,13 +1250,17 @@ const PaymentPdfBooking = ({
                 <span>{'Adjustment Amount'}</span>
                 <span>
                   {lastTransaction?.AdjustmentType === 'REFUND' ? '-' : '+'}
-                  {Math.abs((lastTransaction?.BeforeAdjustment ?? 0) -
+                  {Math.abs(
-  (lastTransaction?.AfterAdjustment ?? 0)).toFixed(2)}
+                    (lastTransaction?.BeforeAdjustment ?? 0) -
+                      (lastTransaction?.AfterAdjustment ?? 0)
+                  ).toFixed(2)}
                 </span>
               </div>
               <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                 <span style={{ color: '#333' }}>Net Bill Amount</span>
-                <strong>{(lastTransaction?.AfterAdjustment || 0).toFixed(2)}</strong>
+                <strong>
+                  {(lastTransaction?.AfterAdjustment || 0).toFixed(2)}
+                </strong>
               </div>
             </div>
           </div>
@@ -1653,7 +1725,9 @@ const PaymentPdfBooking = ({
 
       {/* Token print */}
       {Object.entries(
-        singleData2?.filter(data => data?.EditTokenAvailable !== 'N')?.reduce((acc, item, idx) => {
+        singleData2
+          ?.filter((data) => data?.EditTokenAvailable !== 'N')
+          ?.reduce((acc, item, idx) => {
             if (item.TokenAvailable === 'Y') {
               if (!item.CounterName) {
                 // For null or empty CounterName, print each item individually
@@ -1696,9 +1770,21 @@ const PaymentPdfBooking = ({
                   <tr className="Re-print-body-Tr" key={idx}>
                     <td className="Re-print-td">{idx + 1}</td>
                     <td className="Re-print-body-Product">{item.ProdName}</td>
-                    <td className="Re-print-body-Rate">{item?.EditTokenAvailable === 'Y' ? item?.EditTokenQty : item.SalesQty}</td>
+                    <td className="Re-print-body-Rate">
+                      {item?.EditTokenAvailable === 'Y'
+                        ? item?.EditTokenQty
+                        : item.SalesQty}
+                    </td>
                     <td className="Re-print-body-Rate">{item.Rate}</td>
-                    <td className="Re-print-body-Rate">{((item?.EditTokenAvailable === 'Y' ? item?.EditTokenQty : item.SalesQty) * item.Rate) - ((item?.EditTokenAvailable === 'Y' ? (item?.OfferAmt / item?.EditTokenQty) : item?.OfferAmt))}</td>
+                    <td className="Re-print-body-Rate">
+                      {(item?.EditTokenAvailable === 'Y'
+                        ? item?.EditTokenQty
+                        : item.SalesQty) *
+                        item.Rate -
+                        (item?.EditTokenAvailable === 'Y'
+                          ? item?.OfferAmt / item?.EditTokenQty
+                          : item?.OfferAmt)}
+                    </td>
                   </tr>
                 ))}
               </tbody>

src/ProtectedRoutes.jsx

@@ -11,9 +11,14 @@ import {
   getCommonAppPreference,
 } from './Features/BrachLogin/BranchLogin.js';
 import { clearSession, getSession } from './Services/Others';
-import { FeatureAddon } from './Features/BookingScreen/BookingData/BookingData.js';
+import {
+  FeatureAddon,
+  GlobalFeatAddOnData,
+} from './Features/BookingScreen/BookingData/BookingData.js';
 import { Suspense } from 'react';
 import { gettableData } from './Features/PreferenceMaster/PreferenceMaster.js';
+import { useSelector } from 'react-redux';
+import { useTemplate } from './utils/useTemplate.js';
 
 const commonUrl = import.meta.env.ENV_COMMON_BASE_URL;
 const subDirectory = import.meta.env.BASE_URL;
@@ -29,6 +34,8 @@ const ProtectedRoutes = ({ routesConfig }) => {
   const UserId = getSession('UserId');
   const sessionId = getSession('SessionId');
   const [accessCheckComplete, setAccessCheckComplete] = useState(false);
+  const FeatureAddonData = useSelector(GlobalFeatAddOnData);
+  useTemplate(CompId, BranchId, AppId);
 
   useEffect(() => {
     getApplicationPreference();
@@ -262,6 +269,9 @@ const ProtectedRoutes = ({ routesConfig }) => {
         let featureAddonData;
 
         if (UserType !== 'Super Admin' && UserType !== 'Super Admin User') {
+          if (FeatureAddonData?.FeatureDtls?.length > 0) {
+            featureAddonData = FeatureAddonData?.FeatureDtls;
+          } else {
             featureAddon = await dispatch(
               FeatureAddon({ AppId: AppId, UserId: UserId })
             ).unwrap();
@@ -272,12 +282,13 @@ const ProtectedRoutes = ({ routesConfig }) => {
               featureAddonData = [];
             }
           }
+        }
 
         const currentPath = location.pathname.replace(/\/$/, ''); // Remove trailing slash
         let shouldNavigate = false;
 
         // Find the current route in routesConfig based on currentPath
-        const currentRoute = routesConfig.find((route) => {
+        const currentRoute = routesConfig?.find((route) => {
           if (route.path === currentPath) return true;
           if (route.children) {
             return route.children.some((child) => {
@@ -303,7 +314,7 @@ const ProtectedRoutes = ({ routesConfig }) => {
           currentRoute,
           currentPath
         );
-        console.log('empAccessData', empAccessData);
+
         const checkPreferenceAccessData = ['Dine In', 'KOT', 'Estimate'];
         const checkPlanAccessData = [
           'Product Catalogue',

src/useSubscriptionManager.js

@@ -6,9 +6,13 @@ import {
   getAppSubscriptionDate,
 } from './Features/BookingScreen/BookingData/BookingData.js';
 import { sendSms } from './Features/Payment/PaymentDetails/PaymentDetails.js';
+import {
+  getPurchasedAppDetails,
+  postInvoice,
+} from './Features/BookingScreen/Pricing/Pricing.js';
 import { getSession } from './Services/Others.js';
 import { useNavigate } from 'react-router-dom';
-const subDirectory = import.meta.env.ENV_BASE_URL;
+
 const useSubscriptionManager = (sessionData, logout) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -17,10 +21,13 @@ const useSubscriptionManager = (sessionData, logout) => {
   const [extendModel, setExtendModel] = useState(false);
   const handleCancel = () => {
     logout();
-    setExtendModel(false)
+    setExtendModel(false);
-
+  };
-  }
+  const handlePay = () => {
- 
+    setExtendModel(false);
+    let AppName = getSession('AppName');
+    navigate(`${subDirectory}PricingPage`, { state: { AppName: AppName } });
+  };
   function formatDate(date) {
     const year = date.getFullYear();
     const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -33,8 +40,71 @@ const useSubscriptionManager = (sessionData, logout) => {
     return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`;
   }
 
+  function addDays(dateString, days) {
+    // Make it ISO-safe for iOS / WebView
+    const isoDate = dateString.replace(' ', 'T');
+    const currentDate = new Date(isoDate);
 
+    currentDate.setDate(currentDate.getDate() + Number(days));
 
+    return formatDate(currentDate);
+  }
+
+  // ---------------- MAIN FUNCTION ----------------
+  const freeExtend = async () => {
+    try {
+      const UserId = getSession('UserId');
+      const AppId = getSession('AppId');
+      // Current date
+      const now = new Date();
+      const currentDate = formatDate(now);
+
+      // 1️⃣ Get purchased app details
+      const response1 = await dispatch(
+        getPurchasedAppDetails({ AppId, UserId })
+      ).unwrap();
+
+      const PurchasedDetails = response1?.data?.data;
+
+      if (!PurchasedDetails || !PurchasedDetails.length) {
+        console.error('No purchased details found');
+        return;
+      }
+
+      // 2️⃣ Prepare post data
+      const postData = {
+        UserId: UserId,
+        AppId: AppId,
+        PricingId: PurchasedDetails[0]?.PricingId,
+        PurDate: currentDate,
+        NoofDays: 30,
+        PaymentMode: 27,
+        PaymentStatus: 'S',
+        LicenseStatus: PurchasedDetails[0]?.LicenseStatus,
+        Price: PurchasedDetails[0]?.Price ?? 0,
+        TaxId: PurchasedDetails[0]?.TaxId ?? 0,
+        NetPrice: PurchasedDetails[0]?.ExistingPlanNetPrice ?? 0,
+        ValidityStart: currentDate,
+        ValidityEnd: addDays(currentDate, PurchasedDetails[0]?.NoOfDays),
+        CreatedBy: UserId,
+        TaxAmount: PurchasedDetails[0]?.TaxAmount ?? 0,
+        MobileNo: getSession('MobileNo'),
+        MailId: 'ts@gmmail.com',
+        Type: 'FreeExtend',
+      };
+
+      // 3️⃣ Post invoice
+      const response = await dispatch(postInvoice(postData)).unwrap();
+
+      // 4️⃣ Send SMS if required
+      if (response?.data?.statusCode === 1 && response?.data?.SMSbody) {
+        await dispatch(sendSms({ body: response.data.SMSbody }));
+        setExtendModel(false);
+      }
+    } catch (error) {
+      console.error('freeExtend error:', error);
+    }
+  };
   useEffect(() => {
     if (!sessionData) return;
 
@@ -62,23 +132,20 @@ const useSubscriptionManager = (sessionData, logout) => {
           expData.RemainingSeconds < 1 &&
           UserType !== 'Super Admin'
         ) {
-
           if (
-            (UserType !== 'Super Admin' ||
+            (UserType !== 'Super Admin' || UserType !== 'Super Admin User') &&
-              UserType !== 'Super Admin User') && (expData?.PlanType?.toLowerCase() == "extend expired")
+            expData?.PlanType?.toLowerCase() == 'extend expired'
           ) {
             console.log('Subscription expired, logging out...');
             alert('Subscription expired');
             logout();
-          }
+          } else if (
-          else if (
+            (UserType !== 'Super Admin' || UserType !== 'Super Admin User') &&
-            (UserType !== 'Super Admin' ||
+            expData?.PlanType?.toLowerCase() == 'plan expired'
-              UserType !== 'Super Admin User') && (expData?.PlanType?.toLowerCase() == "plan expired")
           ) {
-            setExtendModel(true)
+            setExtendModel(true);
           }
         }
-
       }
     };
 
@@ -87,7 +154,7 @@ const useSubscriptionManager = (sessionData, logout) => {
     return () => clearInterval(interval);
   }, [sessionData]);
 
-  return { remainingDays, handleCancel,extendModel,setExtendModel };
+  return { remainingDays, handleCancel, handlePay, freeExtend, extendModel };
 };
 
 export default useSubscriptionManager;

src/utils/useTemplate.js

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { getTemplate } from '../Features/ThemeChange/ThemeChange.js';
+
+export const useTemplate = (CompId, BranchId, AppId) => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const fetchTemplate = async () => {
+      try {
+        await dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap();
+      } catch (error) {
+        console.error('Failed to fetch template:', error);
+      }
+    };
+    fetchTemplate();
+  }, [dispatch, CompId, BranchId, AppId]);
+};