Merge pull request 'Sub Category Optimization' (#281) from SubCat-Optimization into main

Reviewed-on: Pozomind/pozo-retail-app#281
2026-03-13 16:43:51 +05:30 · 2026-03-13 16:43:51 +05:30 · 86e3b30829
parent cacf42a8fa 2dc9c40ee4
commit 86e3b30829
31 changed files with 1472 additions and 1236 deletions
--- a/src/App.jsx
+++ b/src/App.jsx
@ -33,7 +33,7 @@ const isCapacitor = () => !!window.Capacitor?.isNativePlatform?.();
 const HOME_PAGES = [
  '/app-page/home', // android minimize
  '/apps/retail/app-page/home',
-  '/' // android minimize
+  '/', // android minimize
 ];

 const LOGIN_PAGES = ['signin', 'login', 'auth'];
@ -92,13 +92,13 @@ const AppRoutes = () => {

      // 🟢 If session exists → allow navigation
      if (SessionId) {
-        console.log("Browser back allowed");
+        console.log('Browser back allowed');
        return;
      }

      // 🔴 Only redirect if user is on protected page
-      if (!LOGIN_PAGES.some(p => currentPath.includes(p))) {
-        console.log("Session missing → redirecting login");
+      if (!LOGIN_PAGES.some((p) => currentPath.includes(p))) {
+        console.log('Session missing → redirecting login');
        clearSession();
        window.location.replace(`${commonSubDir}`);
      }
@ -108,7 +108,6 @@ const AppRoutes = () => {
    window.addEventListener('popstate', handlePopState);

    return () => window.removeEventListener('popstate', handlePopState);
-
  }, [location.pathname]);

  // ✅ Android — Capacitor back button
@ -116,48 +115,48 @@ const AppRoutes = () => {
    if (!isCapacitor()) return;

    const handler = async () => {
-            try {
-              const currentPath = location.pathname + (location.search || '');
-              console.log('🔙 Back pressed:', currentPath);
+      try {
+        const currentPath = location.pathname + (location.search || '');
+        console.log('🔙 Back pressed:', currentPath);

-              const raw = sessionStorage.getItem('navStack');
-              let stack = raw ? JSON.parse(raw) : [];
+        const raw = sessionStorage.getItem('navStack');
+        let stack = raw ? JSON.parse(raw) : [];

        // Remove current path from stack if it's at the end
-              while (stack.length && stack[stack.length - 1] === currentPath) {
-                stack.pop();
-              }
+        while (stack.length && stack[stack.length - 1] === currentPath) {
+          stack.pop();
+        }

        // If there are pages in history, go back to previous page
        if (stack.length > 0) {
-                const previous = stack[stack.length - 1];
+          const previous = stack[stack.length - 1];
          sessionStorage.setItem('navStack', JSON.stringify(stack));
-                  isBackNav.current = true;
+          isBackNav.current = true;
          navigate(previous);
          console.log('Navigate to previous:', previous);
-                  return;
-                }
+          return;
+        }

        // Stack is empty - check where we are
        // 🏠 Home page → minimize
        if (HOME_PAGES?.some((p) => currentPath?.includes(p))) {
-          console.log("Home page & empty stack → minimizing app");
+          console.log('Home page & empty stack → minimizing app');
          await CapacitorApp.minimizeApp();
          return;
        }

        // 🚪 Login page → minimize
        if (LOGIN_PAGES?.some((p) => currentPath?.includes(p))) {
-          console.log("Login page & empty stack → minimizing app");
+          console.log('Login page & empty stack → minimizing app');
          await CapacitorApp.minimizeApp();
          return;
        }

        // Anywhere else with empty stack → go to home
        const home = '/app-page/home';
-                sessionStorage.setItem('navStack', JSON.stringify([home]));
-                isBackNav.current = true;
-                navigate(home);
+        sessionStorage.setItem('navStack', JSON.stringify([home]));
+        isBackNav.current = true;
+        navigate(home);
        console.log('Empty stack, navigate to home');
      } catch (e) {
        console.error('Back handler error:', e);
--- a/src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall.jsx
+++ b/src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall.jsx
@ -69,7 +69,9 @@ const BSBillingTable3overall = () => {
        className={
          templateData?.BookingLayout?.[0] === 'Layout6'
            ? 'BSTable3_overall BSTable3_overall-6'
-            : 'BSTable3_overall'
+            : templateData?.BookingLayout?.[0] === 'Layout1' && isMobile
+              ? 'BSTable3_overallLayout1 BSTable3_overall-1'
+              : 'BSTable3_overall'
        }
        style={{ height: containerHeight }}
      >
--- a/src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable4/BSBilling4Payment.jsx
+++ b/src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable4/BSBilling4Payment.jsx
@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, lazy, Suspense } from 'react';
+import React, { useEffect, useState, useRef, lazy } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import moment from 'moment';
@ -3645,8 +3645,7 @@ const BSBilling4Payment = () => {
    );
  };

-  return (
-    <Suspense fallback={<span>Loading ...</span>}>
+  return ( 
      <div className="BSBilling4-price-full">
        <div className="BSBilling4-price-content">
          <div className="Table4-price-icon-container">
@ -4985,7 +4984,7 @@ const BSBilling4Payment = () => {
          />
        )}
      </div>
-    </Suspense>
+   
  );
 };
 export default BSBilling4Payment;
--- a/src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable6/BST6Payment.jsx
+++ b/src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable6/BST6Payment.jsx
@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, lazy, Suspense } from 'react';
+import React, { useEffect, useState, useRef, lazy } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import moment from 'moment';
@ -3511,8 +3511,7 @@ const BST6Payment = () => {
      (arr) => Array.isArray(arr) && arr.some((err) => err)
    );
  };
-  return (
-    <Suspense fallback={<div>Suspense Loading...</div>}>
+  return ( 
      <>
        {(addcustomer || hold) && (
          <FeaturesFunctionalities
@ -4866,7 +4865,7 @@ const BST6Payment = () => {
          />
        </div>
      </>
-    </Suspense>
+ 
  );
 };

--- a/src/Pages/BookingScreen/Components/BSBillingTables/StandardTable/StandardTablePayment.jsx
+++ b/src/Pages/BookingScreen/Components/BSBillingTables/StandardTable/StandardTablePayment.jsx
--- a/src/Pages/BookingScreen/Components/BSItemCards/BSItemCard.jsx
+++ b/src/Pages/BookingScreen/Components/BSItemCards/BSItemCard.jsx
@ -144,7 +144,7 @@ export function SortableCard({ id, children, item }) {
    // Add mobile-specific cursor and visual feedback
    cursor: isMobile ? 'grab' : 'default',
    // Add a subtle shadow for mobile to indicate draggability
-    boxShadow: isMobile && !isDragging ? '0 2px 4px rgba(0,0,0,0.1)' : 'none',
+    boxShadow: isMobile && !isDragging ? '0 0 0 rgba(0,0,0,0.1)' : 'none',
  };
  const draggingComponent = useSelector(GlobaldraggingComponent);
  const allowDrag = draggingComponent === 'card';
@ -4965,7 +4965,7 @@ const BSItemCard = (props) => {
    setStockItem();
    setOnePeiceFlow(false);
    if (cardData?.length <= 1) {
-       dispatch(changeSearchedData(''));
+      dispatch(changeSearchedData(''));
    }
  };

@ -6125,7 +6125,7 @@ const BSItemCard = (props) => {
                        ['Layout4', 'Layout5', 'Layout6'].includes(
                          templateData?.BookingLayout?.[0]
                        )
-                      ? '4.4rem'
+                      ? '3rem'
                      : ['Layout4', 'Layout5', 'Layout6'].includes(
                            templateData?.BookingLayout?.[0]
                          )
--- a/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar1.jsx
+++ b/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar1.jsx
@ -1124,6 +1124,7 @@ const BSNavbar1 = (props, BookingNavbar) => {
                        <BSNavBarAddons />
                      </div>
                    )}
+
                    {/* Customer Add Select */}
                    {item?.OptionName == 'AddCustomer' && !preOrderOpen && (
                      <div className="NavbarCus-Add">
--- a/src/Pages/BookingScreen/Components/BSSubCategories/BSSubCategoryHorizontal.jsx
+++ b/src/Pages/BookingScreen/Components/BSSubCategories/BSSubCategoryHorizontal.jsx
@ -118,18 +118,6 @@ function BSSubCategoryHorizontal(props) {
    return () => container.removeEventListener('scroll', updateButtons);
  }, [subCategoryType]);

-  useEffect(() => {
-    // Accessing the DOM elements
-    const container = containerRef?.current;
-
-    // Checking initial values
-    const isConditionMet =
-      container?.scrollLeft + container?.clientWidth === container?.scrollWidth;
-    if (isConditionMet == true) {
-      setShowRightButton(true);
-    }
-  }, []);
-
  const handleScrollClickLeft = (
    scrollAmountX,
    scrollAmountY,
@ -397,28 +385,18 @@ function BSSubCategoryHorizontal(props) {
    if (!container) return;

    const handleWheel = (e) => {
-      container.scrollLeft += e.deltaX;
-      e.preventDefault();
+      if (!isVertical) {
+        container.scrollLeft += e.deltaY;
+        e.preventDefault();
+      }
    };

-    container.addEventListener('wheel', handleWheel);
+    container.addEventListener('wheel', handleWheel, { passive: false });

    return () => {
      container.removeEventListener('wheel', handleWheel);
    };
-  }, [scrollContainerRef]);
-
-  useEffect(() => {
-    // Accessing the DOM elements
-    const container = containerRef.current;
-
-    // Checking initial values
-    const isConditionMet =
-      container?.scrollLeft + container?.clientWidth === container?.scrollWidth;
-    if (isConditionMet == true) {
-      setShowRightButton(true);
-    }
-  }, []);
+  }, [scrollContainerRef, isVertical]);

  const maindiv = document.getElementById('mainDiv');
  const count = maindiv?.querySelectorAll('div');
@ -487,7 +465,7 @@ function BSSubCategoryHorizontal(props) {
              overflowX: 'auto',
              width: '100%',
              whiteSpace: 'nowrap',
-              margin: '0',
+              margin: '0 6px',
            }
          : {}
      }
--- a/src/Pages/BookingScreen/Components/BookingFunctionality/CreditCustSplitPayment.jsx
+++ b/src/Pages/BookingScreen/Components/BookingFunctionality/CreditCustSplitPayment.jsx
@ -1,11 +1,4 @@
-import {
-  useEffect,
-  useRef,
-  useState,
-  useCallback,
-  Suspense,
-  lazy,
-} from 'react';
+import { useEffect, useRef, useState, useCallback, lazy } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import {
  getConfigType,
@ -1252,141 +1245,139 @@ const CreditCustSplitPayment = (props) => {
    : 'Debit amount not available';

  return (
-    <Suspense fallback={<div>Loading features...</div>}>
-      <>
-        <Messages messageType={messageType} messageData={messageData} />
-        <div className="splitmodal">
-          <DefaultModal
-            open={Splitpayment}
-            title="Split Payment"
-            handleCancel={() => {
-              SplitSelPayMode[`PaymentStatus-0`] !== 'S' && HandleModalClose();
-            }}
-            footer={false}
-            width={1000}
-            children={
-              <div>
-                <p>Total Amount:{TotalAmount}</p>
-
-                <>{calculateField()}</>
-                {TotalAmount > TotalSplitAmount &&
-                  SplitSelPayMode[`PaymentStatus-${count}`] === 'S' && (
-                    <Form.Item>
-                      <div
-                        style={{
-                          display: 'flex',
-                          justifyContent: 'flex-end',
-                        }}
-                      >
-                        <PlusOutlined
-                          style={{
-                            backgroundColor: '#37943C',
-                            color: 'white',
-                            borderRadius: '50px',
-                            padding: '5px',
-                          }}
-                          onClick={() => setCount(count + 1)}
-                        />
-                      </div>
-                    </Form.Item>
-                  )}
-              </div>
-            }
-          />
-        </div>
-        {TotalAmount == 0 && Success && (
-          <div>
-            <QrComponent com={`WelcomeScreen**${branchName}`} />
-          </div>
-        )}
-        {TotalAmount > 0 &&
-          qrCode &&
-          PaymentUpiOptions?.length > 0 &&
-          SelUpiId && (
+    <>
+      <Messages messageType={messageType} messageData={messageData} />
+      <div className="splitmodal">
+        <DefaultModal
+          open={Splitpayment}
+          title="Split Payment"
+          handleCancel={() => {
+            SplitSelPayMode[`PaymentStatus-0`] !== 'S' && HandleModalClose();
+          }}
+          footer={false}
+          width={1000}
+          children={
            <div>
-              <QrComponent
-                com={`DisplayQRCodeScreen**upi://pay?pa=${SelUpiId}&pn=Bonrix&cu=INR&am=${TotalAmount}&pn=Bonrix%20Software%20Systems**${TotalAmount}**${SelUpiId}`}
-              />
-            </div>
-          )}
-        {UpiOpen && (
-          <DefaultModal
-            open={UpiOpen}
-            title="UPI PAYMENT"
-            width={500}
-            handleCancel={() => {
-              Upimodel('Cancel');
-            }}
-            footer={false}
-            children={
-              <div style={{ overflow: 'scroll' }}>
-                <div
-                  style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'space-evenly',
-                    alignItems: 'center',
-                  }}
-                >
-                  <div>
-                    <QrinScreen Amount={CurrentPayAmount} UpiId={SelUpiId} />
-                  </div>
+              <p>Total Amount:{TotalAmount}</p>

-                  <div>
-                    <h1> RS :{CurrentPayAmount} </h1>
-                  </div>
-                </div>
-
-                <div className="sentok">
-                  {(selOption || SelCustId) && (
-                    <div className="sentLink" onClick={onFinalSubmit}>
-                      Sent Payment Link
-                      <img
-                        src={WpIcon}
-                        alt="Your Alt Text"
-                        style={{ width: '30px', height: '30px' }}
+              <>{calculateField()}</>
+              {TotalAmount > TotalSplitAmount &&
+                SplitSelPayMode[`PaymentStatus-${count}`] === 'S' && (
+                  <Form.Item>
+                    <div
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                      }}
+                    >
+                      <PlusOutlined
+                        style={{
+                          backgroundColor: '#37943C',
+                          color: 'white',
+                          borderRadius: '50px',
+                          padding: '5px',
+                        }}
+                        onClick={() => setCount(count + 1)}
                      />
                    </div>
-                  )}
-
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'row-reverse',
-                      width: '100px',
-                    }}
-                  >
-                    <Buttons
-                      buttonText="OK"
-                      color="901D77"
-                      icon={<ArrowRightOutlined />}
-                      handleSubmit={() => {
-                        Upimodel('Submit');
-                      }}
-                    />
-                  </div>
-                </div>
-              </div>
-            }
-          />
-        )}
-        {addcustomer && (
-          <FeaturesFunctionalities
-            handleAddCustomerCancel={handleAddCustomerCancel}
-            addcustomer={addcustomer}
-          />
-        )}
-        {Object.keys(PrintDatas).length > 0 && (
-          <div id="Credit-customer1" style={{ display: 'none' }}>
-            <BSCreditCustomerPrint
-              words={words}
-              PrintDatas={PrintDatas}
-              url={qrData}
+                  </Form.Item>
+                )}
+            </div>
+          }
+        />
+      </div>
+      {TotalAmount == 0 && Success && (
+        <div>
+          <QrComponent com={`WelcomeScreen**${branchName}`} />
+        </div>
+      )}
+      {TotalAmount > 0 &&
+        qrCode &&
+        PaymentUpiOptions?.length > 0 &&
+        SelUpiId && (
+          <div>
+            <QrComponent
+              com={`DisplayQRCodeScreen**upi://pay?pa=${SelUpiId}&pn=Bonrix&cu=INR&am=${TotalAmount}&pn=Bonrix%20Software%20Systems**${TotalAmount}**${SelUpiId}`}
            />
          </div>
        )}
-      </>
-    </Suspense>
+      {UpiOpen && (
+        <DefaultModal
+          open={UpiOpen}
+          title="UPI PAYMENT"
+          width={500}
+          handleCancel={() => {
+            Upimodel('Cancel');
+          }}
+          footer={false}
+          children={
+            <div style={{ overflow: 'scroll' }}>
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'space-evenly',
+                  alignItems: 'center',
+                }}
+              >
+                <div>
+                  <QrinScreen Amount={CurrentPayAmount} UpiId={SelUpiId} />
+                </div>
+
+                <div>
+                  <h1> RS :{CurrentPayAmount} </h1>
+                </div>
+              </div>
+
+              <div className="sentok">
+                {(selOption || SelCustId) && (
+                  <div className="sentLink" onClick={onFinalSubmit}>
+                    Sent Payment Link
+                    <img
+                      src={WpIcon}
+                      alt="Your Alt Text"
+                      style={{ width: '30px', height: '30px' }}
+                    />
+                  </div>
+                )}
+
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row-reverse',
+                    width: '100px',
+                  }}
+                >
+                  <Buttons
+                    buttonText="OK"
+                    color="901D77"
+                    icon={<ArrowRightOutlined />}
+                    handleSubmit={() => {
+                      Upimodel('Submit');
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+          }
+        />
+      )}
+      {addcustomer && (
+        <FeaturesFunctionalities
+          handleAddCustomerCancel={handleAddCustomerCancel}
+          addcustomer={addcustomer}
+        />
+      )}
+      {Object.keys(PrintDatas).length > 0 && (
+        <div id="Credit-customer1" style={{ display: 'none' }}>
+          <BSCreditCustomerPrint
+            words={words}
+            PrintDatas={PrintDatas}
+            url={qrData}
+          />
+        </div>
+      )}
+    </>
  );
 };
 export default CreditCustSplitPayment;
--- a/src/Pages/BookingScreen/Forms/DirectSale/DirectSale.jsx
+++ b/src/Pages/BookingScreen/Forms/DirectSale/DirectSale.jsx
@ -44,6 +44,7 @@ const StickerPrintTemplates = lazy(
 );
 // SCss
 import '../../../../Styles/BookingScreen/Components/OtherConponents/Reprint/BSReprint.scss';
+import Loader from '../../../../Components/Loader/Loader.jsx';
 const DirectSale = ({
  UomData = [],
  TaxData = [],
@ -950,7 +951,7 @@ const DirectSale = ({
  }, []);

  return (
-    <Suspense fallback={<span>Loading ...</span>}>
+    <Suspense fallback={<Loader />}>
      <div className="direct-sale-container">
        <Messages
          messageType={messageType}
--- a/src/Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx
+++ b/src/Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx
@ -358,7 +358,11 @@ const BSLayout1 = () => {
              style={{ marginTop: '12px' }}
            >
              <div
-                className="Layout-bill-Subcontainer"
+                           className={
+                BookingNavbar === 'Navbar3'
+                  ? 'Layout-IfNavbar3'
+                  : 'Layout-bill-Subcontainer'
+              }
                style={{ width: OtherServicesglobal ? '10%' : '100%' }}
              >
                {UserType !== 'Employee' && (
@ -542,7 +546,7 @@ const BSLayout1 = () => {
                  )}
                </div>

-                <div className="BSCategory1-Cardcont">
+                <div className="BSLayout1-Card-Cat-Sub">
                  {
                    <div
                      style={{
@ -550,6 +554,7 @@ const BSLayout1 = () => {
                          SelectedSubCatgColor?.['OverallBackgroundColor'],
                        display: BookingSubCategory ? 'block' : 'none',
                      }}
+                      className="BSLayout1-SubCategoryMain"
                    >
                      {Comboglobal === false && !OtherServicesglobal && (
                        <SubCategory
--- a/src/Pages/BookingScreen/Template/BSLayout2/BSLayout2.jsx
+++ b/src/Pages/BookingScreen/Template/BSLayout2/BSLayout2.jsx
@ -367,7 +367,11 @@ const BSLayout2 = () => {
                style={{ marginTop: '9px' }}
              >
                <div
-                  className="Layout-bill-Subcontainer"
+                  className={
+                    BookingNavbar === 'Navbar3'
+                      ? 'Layout-IfNavbar3'
+                      : 'Layout-bill-Subcontainer'
+                  }
                  style={{ width: OtherServicesglobal ? '10%' : '100%' }}
                >
                  {UserType !== 'Employee' && (
@ -378,13 +382,11 @@ const BSLayout2 = () => {
                    </div>
                  )}
                  {!OtherServicesglobal && (
-                    <Suspense fallback={null}>
-                      <SalesCountComponent
-                        DineInAccess={DineInAccess}
-                        GlobalsalesDetailData={GlobalsalesDetailData}
-                        BookingNavbar={BookingNavbar}
-                      />
-                    </Suspense>
+                    <SalesCountComponent
+                      DineInAccess={DineInAccess}
+                      GlobalsalesDetailData={GlobalsalesDetailData}
+                      BookingNavbar={BookingNavbar}
+                    />
                  )}
                  {SessionData?.FeatureAddonData?.FeatureDtls?.find(
                    (item) =>
@ -423,32 +425,26 @@ const BSLayout2 = () => {
                      isMobile={isMobile}
                    >
                      {' '}
-                      <Suspense fallback={null}>
-                        <BSExpireProductsList />
-                      </Suspense>
+                      <BSExpireProductsList />
                    </TooltipWrapper>
                  )}
                  {Kioskopen && (
-                    <Suspense fallback={null}>
-                      <BSKioskCounterPayment
-                        Kioskopen={Kioskopen}
-                        closeKioskModal={closeModalKiosk}
-                      />
-                    </Suspense>
+                    <BSKioskCounterPayment
+                      Kioskopen={Kioskopen}
+                      closeKioskModal={closeModalKiosk}
+                    />
                  )}

                  {SAdminuserPin?.length > 0 &&
                    UserType != 'Super Admin User' && (
-                      <Suspense fallback={null}>
-                        <div>
-                          <SAdminUserNotification
-                            SAdminuserPin={SAdminuserPin}
-                            popOverOpen={popOverOpen}
-                            handleSupportUser={handleSupportUser}
-                            handlePopOverOpen={handlePopOverOpen}
-                          />
-                        </div>
-                      </Suspense>
+                      <div>
+                        <SAdminUserNotification
+                          SAdminuserPin={SAdminuserPin}
+                          popOverOpen={popOverOpen}
+                          handleSupportUser={handleSupportUser}
+                          handlePopOverOpen={handlePopOverOpen}
+                        />
+                      </div>
                    )}
                  {!OtherServicesglobal && (
                    <>
@ -536,26 +532,22 @@ const BSLayout2 = () => {
                    }}
                  >
                    {!OtherServicesglobal && (
-                      <Suspense fallback={null}>
-                        <CategoryHorizontal
-                          categoryFunction={dynamicComponentProps(
-                            'Category',
-                            BSLayout2Data?.BookingCategory?.[1],
-                            BSLayout2Data?.BookingCategory?.[0]
-                          )}
-                        />
-                      </Suspense>
+                      <CategoryHorizontal
+                        categoryFunction={dynamicComponentProps(
+                          'Category',
+                          BSLayout2Data?.BookingCategory?.[1],
+                          BSLayout2Data?.BookingCategory?.[0]
+                        )}
+                      />
                    )}
                    {OtherServicesglobal && (
-                      <Suspense fallback={null}>
-                        <BSOtherServicesHorizontalcat
-                          categoryFunction={dynamicComponentProps(
-                            'Category',
-                            BSLayout2Data?.BookingCategory?.[1],
-                            BSLayout2Data?.BookingCategory?.[0]
-                          )}
-                        />
-                      </Suspense>
+                      <BSOtherServicesHorizontalcat
+                        categoryFunction={dynamicComponentProps(
+                          'Category',
+                          BSLayout2Data?.BookingCategory?.[1],
+                          BSLayout2Data?.BookingCategory?.[0]
+                        )}
+                      />
                    )}
                  </div>
                  <div
@ -588,27 +580,23 @@ const BSLayout2 = () => {
                        />
                      ))}
                    {Comboglobal === true && !OtherServicesglobal && (
-                      <Suspense fallback={null}>
-                        <BSComboItemCard
-                          cardFunctionality={dynamicComponentProps(
-                            'Card',
-                            BSLayout2Data?.BookingCard?.[1],
-                            BSLayout2Data?.BookingCard?.[0]
-                          )}
-                        />
-                      </Suspense>
+                      <BSComboItemCard
+                        cardFunctionality={dynamicComponentProps(
+                          'Card',
+                          BSLayout2Data?.BookingCard?.[1],
+                          BSLayout2Data?.BookingCard?.[0]
+                        )}
+                      />
                    )}
                    {OtherServicesglobal && (
-                      <Suspense fallback={null}>
-                        <BSOtherServiceItemCard
-                          // screenHeight={screenHeight}
-                          cardFunctionality={dynamicComponentProps(
-                            'Card',
-                            BSLayout2Data?.BookingCard?.[1],
-                            BSLayout2Data?.BookingCard?.[0]
-                          )}
-                        />
-                      </Suspense>
+                      <BSOtherServiceItemCard
+                        // screenHeight={screenHeight}
+                        cardFunctionality={dynamicComponentProps(
+                          'Card',
+                          BSLayout2Data?.BookingCard?.[1],
+                          BSLayout2Data?.BookingCard?.[0]
+                        )}
+                      />
                    )}
                  </div>
                </div>
@ -618,43 +606,37 @@ const BSLayout2 = () => {
                  {action ? (
                    <BranchTransferComponent />
                  ) : (
-                    <Suspense fallback={null}>
-                      <>
-                        {BSLayout2Data?.BookingBilling?.[0] == 'Billing1' && (
-                          <BSBillingTable1 />
-                        )}
-                        {BSLayout2Data?.BookingBilling?.[0] == 'Billing2' && (
-                          <BSBillingTable2 />
-                        )}
-                        {BSLayout2Data?.BookingBilling?.[0] == 'Billing3' && (
-                          <BSBillingTable3 />
-                        )}
-                        {BSLayout2Data?.BookingBilling?.[0] == 'Billing4' && (
-                          <BSBillingTable4 />
-                        )}
-                        {BSLayout2Data?.BookingBilling?.[0] == 'Billing5' && (
-                          <BSBillingTable5 />
-                        )}
-                        {BSLayout2Data?.BookingBilling?.[0] == 'Billing6' && (
-                          <BSBillingTable6 />
-                        )}
-                        {BSLayout2Data?.BookingBilling?.[0] == 'Billing7' && (
-                          <BSBillingTable7 />
-                        )}
+                    <>
+                      {BSLayout2Data?.BookingBilling?.[0] == 'Billing1' && (
+                        <BSBillingTable1 />
+                      )}
+                      {BSLayout2Data?.BookingBilling?.[0] == 'Billing2' && (
+                        <BSBillingTable2 />
+                      )}
+                      {BSLayout2Data?.BookingBilling?.[0] == 'Billing3' && (
+                        <BSBillingTable3 />
+                      )}
+                      {BSLayout2Data?.BookingBilling?.[0] == 'Billing4' && (
+                        <BSBillingTable4 />
+                      )}
+                      {BSLayout2Data?.BookingBilling?.[0] == 'Billing5' && (
+                        <BSBillingTable5 />
+                      )}
+                      {BSLayout2Data?.BookingBilling?.[0] == 'Billing6' && (
+                        <BSBillingTable6 />
+                      )}
+                      {BSLayout2Data?.BookingBilling?.[0] == 'Billing7' && (
+                        <BSBillingTable7 />
+                      )}

-                        {BookingBilling == 'Billing8' && (
-                          <ComboSalesBillTable />
-                        )}
-                        {BSLayout2Data?.BookingBilling?.[0] ==
-                          'StandardBilling' && (
-                          <div className="BSCategory2New">
-                            <Suspense fallback={null}>
-                              <StandardTable />
-                            </Suspense>
-                          </div>
-                        )}
-                      </>
-                    </Suspense>
+                      {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
+                      {BSLayout2Data?.BookingBilling?.[0] ==
+                        'StandardBilling' && (
+                        <div className="BSCategory2New">
+                          <StandardTable />
+                        </div>
+                      )}
+                    </>
                  )}
                </div>
              </div>
@ -662,20 +644,16 @@ const BSLayout2 = () => {
          </div>
        </div>
        {BookingModalOpen && (
-          <Suspense fallback={null}>
-            <RetailBookingClosing
-              PaymentOpen={BookingModalOpen}
-              PaymentClose={HandleBookingModalClose}
-            />
-          </Suspense>
+          <RetailBookingClosing
+            PaymentOpen={BookingModalOpen}
+            PaymentClose={HandleBookingModalClose}
+          />
        )}
        {ListOfInvoices && (
-          <Suspense fallback={null}>
-            <ListOfSalesInvoices
-              ListOfInvoicesOpen={ListOfInvoices}
-              handleInvoiceClose={handleInvoiceClose}
-            />
-          </Suspense>
+          <ListOfSalesInvoices
+            ListOfInvoicesOpen={ListOfInvoices}
+            handleInvoiceClose={handleInvoiceClose}
+          />
        )}

        <LayoutSubCategoryFetcher />
--- a/src/Pages/BookingScreen/Template/BSLayout3/BSLayout3.jsx
+++ b/src/Pages/BookingScreen/Template/BSLayout3/BSLayout3.jsx
@ -336,7 +336,11 @@ const BSLayout3 = () => {
          >
            <div className="Layout-bill-container" style={{ marginTop: '9px' }}>
              <div
-                className="Layout-bill-Subcontainer"
+                className={
+                  BookingNavbar === 'Navbar3'
+                    ? 'Layout-IfNavbar3'
+                    : 'Layout-bill-Subcontainer'
+                }
                style={{ width: OtherServicesglobal ? '10%' : '100%' }}
              >
                {UserType !== 'Employee' && (
--- a/src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx
+++ b/src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx
@ -347,7 +347,11 @@ const BSLayout4 = () => {

          <div className="Layout-bill-container" style={{ margin: '0' }}>
            <div
-              className="Layout-bill-Subcontainer"
+              className={
+                BookingNavbar === 'Navbar3'
+                  ? 'Layout-IfNavbar3'
+                  : 'Layout-bill-Subcontainer'
+              }
              style={{ width: OtherServicesglobal ? '10%' : '100%' }}
            >
              {UserType !== 'Employee' && (
--- a/src/Pages/BookingScreen/Template/BSLayout5/BSLayout5.jsx
+++ b/src/Pages/BookingScreen/Template/BSLayout5/BSLayout5.jsx
@ -343,7 +343,11 @@ const BSLayout5 = () => {
          >
            <div className="Layout-bill-container">
              <div
-                className="Layout-bill-Subcontainer"
+                className={
+                  BookingNavbar === 'Navbar3'
+                    ? 'Layout-IfNavbar3'
+                    : 'Layout-bill-Subcontainer'
+                }
                style={{ width: OtherServicesglobal ? '10%' : '100%' }}
              >
                {UserType !== 'Employee' && (
--- a/src/Pages/BookingScreen/Template/BSLayout6/BSLayout6.jsx
+++ b/src/Pages/BookingScreen/Template/BSLayout6/BSLayout6.jsx
@ -346,7 +346,11 @@ const BSLayout6 = () => {

            <div className="Layout-bill-container">
              <div
-                className="Layout-bill-Subcontainer"
+                className={
+                  BookingNavbar === 'Navbar3'
+                    ? 'Layout-IfNavbar3'
+                    : 'Layout-bill-Subcontainer'
+                }
                style={{ width: OtherServicesglobal ? '10%' : '100%' }}
              >
                {UserType !== 'Employee' && (
--- a/src/Pages/BookingScreen/Template/SalesCountComponent.jsx
+++ b/src/Pages/BookingScreen/Template/SalesCountComponent.jsx
@ -5,7 +5,7 @@ import React, {
  useRef,
  useCallback,
  lazy,
-  Suspense,
+  
 } from 'react';
 import { Tooltip } from 'antd';
 import {
@ -482,8 +482,7 @@ const SalesCountComponent = React.memo(
      setModalProductDetails([]);
    };
    return (
-      <Suspense fallback={<div>Loading…</div>}>
-        <>
+         <>
          <Messages
            messageType={messageType}
            messageData={messageData}
@ -735,8 +734,7 @@ const SalesCountComponent = React.memo(
            onSubmit={handleModalSubmit}
          />
        </>
-      </Suspense>
-    );
+     );
  }
 );

--- a/src/Pages/BookingScreen/Template/SalesCountComponent.scss
+++ b/src/Pages/BookingScreen/Template/SalesCountComponent.scss
@ -77,7 +77,7 @@
  align-items: center;
  justify-content: space-around;
  width: 80%;
-  .missingNumCheckIcon {
+   .missingNumCheckIcon {
    color: #1292ee;
    svg {
      display: flex;
--- a/src/Styles/BookingScreen/Components/BSBillingTables/BSBillingTable6/BSBillingTable6.scss
+++ b/src/Styles/BookingScreen/Components/BSBillingTables/BSBillingTable6/BSBillingTable6.scss
@ -32,7 +32,7 @@
 .BillingTable6-table-th {
  padding: 1vh 1vh 1vh 1vh;
  border: 0.1px solid rgba(168, 168, 168, 0.5019607843);
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
 }

 .BillingTable6-Table1-row {
@ -52,8 +52,8 @@
  padding: 5px;
  border: 0.1px solid #a8a8a880;
  border-top: none;
-  font-family: 'Poppins', sans-serif;
-  font-size: 14px;
+  font-family: "Poppins", sans-serif;
+  font-size: 12px;
 }

 .BillingTable6Table1-body {
--- a/src/Styles/BookingScreen/Components/BSBillingTables/BSBillingTable7/BSBillingTable7.scss
+++ b/src/Styles/BookingScreen/Components/BSBillingTables/BSBillingTable7/BSBillingTable7.scss
@ -7,10 +7,9 @@

 .BSBilling7-tablediv {
  display: block;
-  height: 59vh;
+  height: 53vh;
  overflow-y: scroll;
  max-height: 59vh;
-  // height: 90%;
 }
 .BSTable3_overall-6 {
  height: 71vh;
@ -25,7 +24,6 @@

 .Table7-tbody {
  width: 100%;
-  // height: 60vh;
  overflow-y: scroll;
 }

@ -546,7 +544,7 @@ hr.Table7-Dotted-Line1 {
  display: flex;
  gap: 0.2rem;
  align-items: center;
-  font-family: 'Poppins';
+  font-family: "Poppins";
  justify-content: center;
  cursor: pointer;
  text-transform: capitalize;
@ -567,7 +565,7 @@ hr.Table7-Dotted-Line1 {
  display: flex;
  gap: 0.2rem;
  align-items: center;
-  font-family: 'Poppins';
+  font-family: "Poppins";
  justify-content: center;
  cursor: pointer;
  text-transform: capitalize;
--- a/src/Styles/BookingScreen/Components/BSBillingTables/BSBillingTables3/BSBillingTable3.scss
+++ b/src/Styles/BookingScreen/Components/BSBillingTables/BSBillingTables3/BSBillingTable3.scss
@ -327,6 +327,19 @@
    width: 100% !important;
  }
 }
+.BSTable3_overallLayout1 {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: auto;
+  scrollbar-width: none;
+  width: inherit;
+  height: 85vh;
+  border-radius: 10px;
+  @media (max-width: 768px) {
+    width: 100% !important;
+  }
+}

 .BSTable3_overall-6 {
  height: 71vh;
--- a/src/Styles/BookingScreen/Components/BSCategories/BSCategoryHorizontal.scss
+++ b/src/Styles/BookingScreen/Components/BSCategories/BSCategoryHorizontal.scss
@ -30,6 +30,7 @@
  align-items: center;
  justify-content: center;
  border: none;
+  width: max-content;
 }

 .CategoryHorizontal-image {
--- a/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss
+++ b/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss
@ -39,7 +39,7 @@
  display: flex;
  align-items: center;
  width: 100vw;
-  height: 42px;
+  height: 45px;
  box-shadow: var(--BOX_SHADOW_LEVEL2);
  padding: 1px 6px;
  gap: 12px;
--- a/src/Styles/BookingScreen/Components/BSSubCategories/BSSubCategoryHorizontal.scss
+++ b/src/Styles/BookingScreen/Components/BSSubCategories/BSSubCategoryHorizontal.scss
@ -10,7 +10,6 @@
 .SubCategoryHorizontal-master-container {
  display: flex;
  flex-direction: row;
-  // flex-wrap: wrap;
  column-gap: 0.7rem;
  row-gap: 0.7rem;
  width: max-content;
@ -44,15 +43,13 @@
  cursor: pointer;
 }
 .SubCategoryHorizontal-scroll-container {
-  overflow-y: scroll; /* Add a vertical scrollbar when content overflows */
-  max-height: 300px; /* Set a maximum height for the container */
-
+  overflow-y: auto;
+  max-height: 300px;
  display: flex;
-  // flex-direction: row;
  column-gap: 0.5rem;
 }
 .SubCategoryHorizontal-label {
-  font-family: 'Gilroy';
+  font-family: "Gilroy";
  font-weight: 600;
  font-size: 14px;
 }
@ -61,28 +58,12 @@
  display: none !important;
 }

-// ::-webkit-scrollbar-button:start {
-//   background-color: #333;
-//   border: 1px solid #666;
-// }
-
-// /* Style the scroll-down button */
-// ::-webkit-scrollbar-button:end {
-//   background-color: #333;
-//   border: 1px solid #666;
-// }
-
-// ::-webkit-scrollbar {
-//   display: none;
-// }
-
 .SubCategoryHorizontal-btn-option2 {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  width: max-content !important;
  cursor: pointer;
-  // border-radius: 20px;
 }

 .SubCategoryHorizontal-input-style:checked + span {
@ -94,19 +75,12 @@
  }
 }

-// .SubCategoryHorizontal-btn-option2 {
-//   display: flex;
-//   align-items: center;
-//   padding: 10px  10px;
-//   width: max-content !important;
-// }
 .SubCategoryHorizontal-btn-option2-reverse {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  padding: 10px 10px;
  width: max-content !important;
-  // border-radius: 20px;
 }

 .SubCategoryHorizontal-curved {
@ -124,7 +98,6 @@

 .sampleCard {
  min-width: max-content;
-  // flex-grow: 1;
 }

 .sampleCard:active,
@ -143,17 +116,67 @@
 }

 .sampleCard {
-  /* Your existing styles for sampleCard */
-  /* ... */
-
-  /* Add this to specify the border style */
  border: 1px solid transparent;
-  cursor: pointer; /* Optional: add a pointer cursor to indicate clickability */
+  cursor: pointer;
 }

 .sampleCard-border {
-  border-color: black; /* Specify the border color you want */
+  border-color: black;
 }
 .SubCategoryHorizontal-text {
  font-size: 14px;
 }
+.SubCategoryVertical {
+  height: 90%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 4px;
+}
+.SubCategoryVertical-scroll-container {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-direction: column;
+  width: 100%;
+  height: clamp(400px, 75dvh, 900px);
+  overflow: auto;
+  scrollbar-width: thin;
+  padding-bottom: 5rem;
+  padding: 4px;
+}
+.SubCategoryVertical-sampleCard {
+  width: 100%;
+  border-radius: 2px;
+}
+.SubCategoryVertical-sub-samplecard {
+  padding: 3px 5px;
+}
+.SubCategoryVertical-text {
+  width: 100px;
+  white-space: nowrap;
+  overflow: hidden;
+  font-size: 15px;
+  font-weight: 400;
+  -webkit-text-stroke-width: 0.1px;
+  text-overflow: ellipsis;
+}
+
+.SubCategoryVertical-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+  .SubCategoryVertical-icon {
+    font-size: 15px;
+    padding: 8px;
+    border-radius: 6px;
+    background-color: #d8d8d8;
+    margin: 3px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+  }
+}
--- a/src/Styles/BookingScreen/Template/BSLayout1/BSLayout1.scss
+++ b/src/Styles/BookingScreen/Template/BSLayout1/BSLayout1.scss
@ -12,7 +12,7 @@
 .BSLayout1Standard {
  overflow: hidden;
  position: relative;
-  top: 3.2rem;
+  top: 2.01rem;
  height: 100%;

  @media (max-width: 768px) {
@ -62,7 +62,7 @@ body {
  height: 98%;
 }

-.BSCategory1-Cardcont {
+.BSLayout1-Card-Cat-Sub {
  overflow: hidden;
  display: flex;
  height: 85vh;
@ -77,6 +77,12 @@ body {
  gap: 6px;
  padding: 3px 5px;

+  .CategoryHorizontalNew {
+    background-color: #f4f4f4;
+    padding: 6px 6px;
+    border-radius: 4px;
+  }
+
  .BsTable2-Master {
    height: 84vh !important;
  }
@ -106,7 +112,7 @@ body {
    opacity: 12% !important;
  }

-  .BSCategory1-Cardcont {
+  .BSLayout1-Card-Cat-Sub {
    height: 74vh !important;
    column-gap: 0 !important;
  }
@ -148,7 +154,7 @@ body {
 }

@media (min-width: 500px) and (max-width: 767px) {
-  .BSCategory1-Cardcont {
+  .BSLayout1-Card-Cat-Sub {
    height: 74vh !important;
  }

@ -197,6 +203,44 @@ body {
    flex-wrap: wrap;
  }
 }
+.Layout-IfNavbar3 {
+  display: flex;
+  width: 100%;
+  justify-content: space-around;
+  font-weight: 600;
+  align-items: center;
+  gap: 2px;
+  padding: 2px 6px;
+  background: linear-gradient(to bottom right, #2a3447, #1e2536);
+  .SalesCountComponent-Master {
+    color: #fff;
+  }
+  .keyboardShortcut {
+    background-color: #fff;
+    height: 25px;
+    border-radius: 4px;
+    cursor: pointer;
+    > div {
+      padding: 3px 10px !important;
+    }
+  }
+  .allpageSettingIcon {
+    background-color: #fff !important;
+  }
+  .price-change-btn {
+    background-color: #fff;
+    height: 25px;
+    width: 45px;
+    img {
+      height: 20px !important;
+    }
+  }
+
+  @media (max-width: 500px) {
+    font-size: 10px;
+    flex-wrap: wrap;
+  }
+}

 .L .example {
  width: 80%;
@ -232,7 +276,7 @@ body {
  align-items: center;
 }

-.custom-search .ant-input-affix-wrapper>input.ant-input {
+.custom-search .ant-input-affix-wrapper > input.ant-input {
  padding: 0;
 }

@ -253,7 +297,6 @@ body {
 }

@keyframes shake {
-
  0%,
  100% {
    transform: rotate(0deg);
@ -319,4 +362,4 @@ body {
  display: flex;
  align-items: center;
  gap: 2px;
-}
+}
--- a/src/Styles/BookingScreen/Template/BSLayout2/BSLayout2.scss
+++ b/src/Styles/BookingScreen/Template/BSLayout2/BSLayout2.scss
@ -25,7 +25,7 @@ body {
 .BSLayout2 {
  overflow: hidden;
  position: relative;
-  top: 3.4rem;
+  top: 2.1rem;
  height: 100%;

  @media (max-width: 768px) {
@ -447,6 +447,45 @@ body {
    flex-wrap: wrap;
  }
 }
+
+.Layout-IfNavbar3 {
+  display: flex;
+  width: 100%;
+  justify-content: space-around;
+  font-weight: 600;
+  align-items: center;
+  gap: 2px;
+  padding: 2px 6px;
+  background: linear-gradient(to bottom right, #2a3447, #1e2536);
+  .SalesCountComponent-Master {
+    color: #fff;
+  }
+  .keyboardShortcut {
+    background-color: #fff;
+    height: 25px;
+    border-radius: 4px;
+    cursor: pointer;
+    > div {
+      padding: 3px 10px !important;
+    }
+  }
+  .allpageSettingIcon {
+    background-color: #fff !important;
+  }
+  .price-change-btn {
+    background-color: #fff;
+    height: 25px;
+    width: 45px;
+    img {
+      height: 20px !important;
+    }
+  }
+
+  @media (max-width: 500px) {
+    font-size: 10px;
+    flex-wrap: wrap;
+  }
+}
 .pricing-name-details {
  font-family: "Poppins";
  font-size: 12px;
--- a/src/Styles/BookingScreen/Template/BSLayout3/BSLayout3.scss
+++ b/src/Styles/BookingScreen/Template/BSLayout3/BSLayout3.scss
@ -21,7 +21,7 @@
 .BSLayout3Standard {
  overflow: hidden;
  position: relative;
-  top: 3.3rem;
+  top: 2.2rem;
  height: 100%;

  @media (max-width: 768px) {
@ -52,6 +52,7 @@
  overflow: auto;
  display: flex;
  height: 100%;
+  margin-top: 10px;
 }

 .BsLayout3-ContentDiv {
@ -66,6 +67,9 @@
  margin: 1rem 0.5rem;
  height: clamp(68vh, 50rem, 50vh);
  background-color: #fff;
+  @media (max-width: 768px) {
+    width: 100% !important;
+  }
 }

@media (min-width: 280px) and (max-width: 499px) {
@ -458,6 +462,45 @@
    flex-wrap: wrap;
  }
 }
+
+.Layout-IfNavbar3 {
+  display: flex;
+  width: 100%;
+  justify-content: space-around;
+  font-weight: 600;
+  align-items: center;
+  gap: 2px;
+  padding: 2px 6px;
+  background: linear-gradient(to bottom right, #2a3447, #1e2536);
+  .SalesCountComponent-Master {
+    color: #fff;
+  }
+  .keyboardShortcut {
+    background-color: #fff;
+    height: 25px;
+    border-radius: 4px;
+    cursor: pointer;
+    > div {
+      padding: 3px 10px !important;
+    }
+  }
+  .allpageSettingIcon {
+    background-color: #fff !important;
+  }
+  .price-change-btn {
+    background-color: #fff;
+    height: 25px;
+    width: 45px;
+    img {
+      height: 20px !important;
+    }
+  }
+
+  @media (max-width: 500px) {
+    font-size: 10px;
+    flex-wrap: wrap;
+  }
+}
 .pricing-name-details {
  font-family: "Poppins";
  font-size: 12px;
--- a/src/Styles/BookingScreen/Template/BSLayout4/BSLayout4.scss
+++ b/src/Styles/BookingScreen/Template/BSLayout4/BSLayout4.scss
@ -252,6 +252,44 @@
    flex-wrap: wrap;
  }
 }
+.Layout-IfNavbar3 {
+  display: flex;
+  width: 100%;
+  justify-content: space-around;
+  font-weight: 600;
+  align-items: center;
+  gap: 2px;
+  padding: 2px 6px;
+  background: linear-gradient(to bottom right, #2a3447, #1e2536);
+  .SalesCountComponent-Master {
+    color: #fff;
+  }
+  .keyboardShortcut {
+    background-color: #fff;
+    height: 25px;
+    border-radius: 4px;
+    cursor: pointer;
+    > div {
+      padding: 3px 10px !important;
+    }
+  }
+  .allpageSettingIcon {
+    background-color: #fff !important;
+  }
+  .price-change-btn {
+    background-color: #fff;
+    height: 25px;
+    width: 45px;
+    img {
+      height: 20px !important;
+    }
+  }
+
+  @media (max-width: 500px) {
+    font-size: 10px;
+    flex-wrap: wrap;
+  }
+}
 .pricing-name-details {
  font-family: "Poppins";
  font-size: 12px;
--- a/src/Styles/BookingScreen/Template/BSLayout5/BSLayout5.scss
+++ b/src/Styles/BookingScreen/Template/BSLayout5/BSLayout5.scss
@ -137,6 +137,45 @@
  }
 }

+.Layout-IfNavbar3 {
+  display: flex;
+  width: 100%;
+  justify-content: space-around;
+  font-weight: 600;
+  align-items: center;
+  gap: 2px;
+  padding: 2px 6px;
+  background: linear-gradient(to bottom right, #2a3447, #1e2536);
+  .SalesCountComponent-Master {
+    color: #fff;
+  }
+  .keyboardShortcut {
+    background-color: #fff;
+    height: 25px;
+    border-radius: 4px;
+    cursor: pointer;
+    > div {
+      padding: 3px 10px !important;
+    }
+  }
+  .allpageSettingIcon {
+    background-color: #fff !important;
+  }
+  .price-change-btn {
+    background-color: #fff;
+    height: 25px;
+    width: 45px;
+    img {
+      height: 20px !important;
+    }
+  }
+
+  @media (max-width: 500px) {
+    font-size: 10px;
+    flex-wrap: wrap;
+  }
+}
+
 .pricing-name-details {
  font-family: "Poppins";
  font-size: 12px;
--- a/src/Styles/BookingScreen/Template/BSLayout6/BSLayout6.scss
+++ b/src/Styles/BookingScreen/Template/BSLayout6/BSLayout6.scss
@ -240,6 +240,44 @@
  }
 }

+.Layout-IfNavbar3 {
+  display: flex;
+  width: 100%;
+  justify-content: space-around;
+  font-weight: 600;
+  align-items: center;
+  gap: 2px;
+  padding: 2px 6px;
+  background: linear-gradient(to bottom right, #2a3447, #1e2536);
+  .SalesCountComponent-Master {
+    color: #fff;
+  }
+  .keyboardShortcut {
+    background-color: #fff;
+    height: 25px;
+    border-radius: 4px;
+    cursor: pointer;
+    > div {
+      padding: 3px 10px !important;
+    }
+  }
+  .allpageSettingIcon {
+    background-color: #fff !important;
+  }
+  .price-change-btn {
+    background-color: #fff;
+    height: 25px;
+    width: 45px;
+    img {
+      height: 20px !important;
+    }
+  }
+
+  @media (max-width: 500px) {
+    font-size: 10px;
+    flex-wrap: wrap;
+  }
+}
 .pricing-name-details {
  font-family: "Poppins";
  font-size: 12px;
--- a/src/routesConfig.jsx
+++ b/src/routesConfig.jsx
@ -684,7 +684,7 @@ const initSession = () => {

  sessionStorage.setItem(
    'auth',
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiODA3MjMyOTE1MyIsIlBhc3N3b3JkIjoiWkB6MTIzNCIsImF1ZCI6WyJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTIiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTQiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiXSwiZXhwIjoxNzcyNzM4MDkxLCJpc3MiOiJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMDEifQ.mz8gjByjlstvHvhKoSbHJsQjBYf7f3w1NatAepRx-Ro'
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiODA3MjMyOTE1MyIsIlBhc3N3b3JkIjoiWkB6MTIzNCIsImF1ZCI6WyJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTIiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTQiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiXSwiZXhwIjoxNzczNDI3NTExLCJpc3MiOiJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMDEifQ.Elg8MMqbF4nMYwcWgzrxVaLfYhxdx3drixoV83RbuAM'
  );
 };