Sub Category Optimization

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))) {
+      if (!LOGIN_PAGES.some((p) => currentPath.includes(p))) {
-        console.log("Session missing → redirecting login");
+        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
@@ -141,14 +140,14 @@ const AppRoutes = () => {
         // 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;
         }

src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall.jsx

@@ -69,6 +69,8 @@ const BSBillingTable3overall = () => {
         className={
           templateData?.BookingLayout?.[0] === 'Layout6'
             ? 'BSTable3_overall BSTable3_overall-6'
+            : templateData?.BookingLayout?.[0] === 'Layout1' && isMobile
+              ? 'BSTable3_overallLayout1 BSTable3_overall-1'
               : 'BSTable3_overall'
         }
         style={{ height: containerHeight }}

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';
@@ -3646,7 +3646,6 @@ const BSBilling4Payment = () => {
   };
 
   return ( 
-    <Suspense fallback={<span>Loading ...</span>}>
       <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;

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';
@@ -3512,7 +3512,6 @@ const BST6Payment = () => {
     );
   };
   return ( 
-    <Suspense fallback={<div>Suspense Loading...</div>}>
       <>
         {(addcustomer || hold) && (
           <FeaturesFunctionalities
@@ -4866,7 +4865,7 @@ const BST6Payment = () => {
           />
         </div>
       </>
-    </Suspense>
+ 
   );
 };
 

src/Pages/BookingScreen/Components/BSBillingTables/StandardTable/StandardTablePayment.jsx

@@ -527,7 +527,6 @@ const StandardTablePayment = () => {
     );
   }, [GlobalExtraCharge]);
   useEffect(() => {
- 
     const fetchPrinterMapping = async () => {
       try {
         if (UserType !== 'Super Admin' && isMobile && MobileA4Print) {
@@ -538,19 +537,20 @@ useEffect(() => {
             UserId: UserId,
           };
           // && isMobile && MobileA4Print
-         const response = await dispatch(getPrinterMappingDetails(data)).unwrap();
+          const response = await dispatch(
+            getPrinterMappingDetails(data)
+          ).unwrap();
           if (response?.data?.statusCode === 0) {
-               handlePrintMappingClick()  
+            handlePrintMappingClick();
           }
-         console.log(response, "printer mapping response");
+          console.log(response, 'printer mapping response');
         }
       } catch (error) {
-       console.error("Error fetching printer mapping:", error);
+        console.error('Error fetching printer mapping:', error);
       }
     };
 
     fetchPrinterMapping();
- 
   }, []);
   const handlePrintMappingClick = () => {
     // setReprint1(true)
@@ -3427,7 +3427,6 @@ useEffect(() => {
   }
 
   return (
-    <Suspense fallback={<div>Suspense Loading...</div>}>
     <div className="booking-table-footer" style={{ padding: '0' }}>
       <Messages
         messageType={messageType}
@@ -3561,8 +3560,10 @@ useEffect(() => {
           )}
 
           {/* Customer Orders */}
-            {(SelCustId && tableOptions?.filter((item) => item.OptionName === 'PreviousBillFetch')
+          {SelCustId &&
-              .length === 1) && (
+            tableOptions?.filter(
+              (item) => item.OptionName === 'PreviousBillFetch'
+            ).length === 1 && (
               <Tooltip title="Customer Orders" isMobile={isMobile}>
                 {' '}
                 <div
@@ -3603,10 +3604,7 @@ useEffect(() => {
                 .map((filteredItem) => (
                   <React.Fragment key={filteredItem.TemplateOptionsId}>
                     {!OtherServicesglobal && (
-                        <TooltipWrapper
+                      <TooltipWrapper title="Unpaid Bills" isMobile={isMobile}>
-                          title="Unpaid Bills"
-                          isMobile={isMobile}
-                        >
                         {' '}
                         <PozoUnpaidIcon
                           className="BSBillingNav-icon-table-icon"
@@ -3737,8 +3735,7 @@ useEffect(() => {
             opacity: isDisabled ? 0.5 : 1,
           }}
         >
-            {payBtns?.length > 0 &&
+          {payBtns?.length > 0 && currentOrderNetAmount >= previousNetAmount ? (
-              currentOrderNetAmount >= previousNetAmount ? (
             payBtns.map((payment) => {
               const mode = payment?.ModeName?.toLowerCase();
               const isSelected = paybtnselected === payment?.ModeId;
@@ -3750,8 +3747,7 @@ useEffect(() => {
                 mode === 'upi'
                   ? () =>
                       handleUPIButtonClick(payment?.ModeId, payment?.ModeName)
-                    : () =>
+                  : () => handlePaymentMode(payment?.ModeId, payment?.ModeName);
-                      handlePaymentMode(payment?.ModeId, payment?.ModeName);
 
               return (
                 <div className="standard-pay-btns" key={payment?.ModeId}>
@@ -3991,10 +3987,9 @@ useEffect(() => {
           children={
             <>
               <div>
-                  You have already selected a table. If you click 'OK,' the
+                You have already selected a table. If you click 'OK,' the table
-                  table selection will be removed, and the unpaid flow will
+                selection will be removed, and the unpaid flow will continue. If
-                  continue. If you click 'Cancel,' the dine-in flow will proceed
+                you click 'Cancel,' the dine-in flow will proceed as selected.
-                  as selected.
               </div>
             </>
           }
@@ -4250,7 +4245,6 @@ useEffect(() => {
         </div>
       )}
     </div>
-    </Suspense>
   );
 };
 

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';
@@ -6125,7 +6125,7 @@ const BSItemCard = (props) => {
                         ['Layout4', 'Layout5', 'Layout6'].includes(
                           templateData?.BookingLayout?.[0]
                         )
-                      ? '4.4rem'
+                      ? '3rem'
                       : ['Layout4', 'Layout5', 'Layout6'].includes(
                             templateData?.BookingLayout?.[0]
                           )

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">

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;
+      if (!isVertical) {
+        container.scrollLeft += e.deltaY;
         e.preventDefault();
+      }
     };
 
-    container.addEventListener('wheel', handleWheel);
+    container.addEventListener('wheel', handleWheel, { passive: false });
 
     return () => {
       container.removeEventListener('wheel', handleWheel);
     };
-  }, [scrollContainerRef]);
+  }, [scrollContainerRef, isVertical]);
-
-  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 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',
             }
           : {}
       }

src/Pages/BookingScreen/Components/BookingFunctionality/CreditCustSplitPayment.jsx

@@ -1,11 +1,4 @@
-import {
+import { useEffect, useRef, useState, useCallback, lazy } from 'react';
-  useEffect,
-  useRef,
-  useState,
-  useCallback,
-  Suspense,
-  lazy,
-} from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import {
   getConfigType,
@@ -1252,7 +1245,6 @@ const CreditCustSplitPayment = (props) => {
     : 'Debit amount not available';
 
   return (
-    <Suspense fallback={<div>Loading features...</div>}>
     <>
       <Messages messageType={messageType} messageData={messageData} />
       <div className="splitmodal">
@@ -1386,7 +1378,6 @@ const CreditCustSplitPayment = (props) => {
         </div>
       )}
     </>
-    </Suspense>
   );
 };
 export default CreditCustSplitPayment;

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}

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

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>
                   )}
                   {SessionData?.FeatureAddonData?.FeatureDtls?.find(
                     (item) =>
@@ -423,23 +425,18 @@ const BSLayout2 = () => {
                       isMobile={isMobile}
                     >
                       {' '}
-                      <Suspense fallback={null}>
                       <BSExpireProductsList />
-                      </Suspense>
                     </TooltipWrapper>
                   )}
                   {Kioskopen && (
-                    <Suspense fallback={null}>
                     <BSKioskCounterPayment
                       Kioskopen={Kioskopen}
                       closeKioskModal={closeModalKiosk}
                     />
-                    </Suspense>
                   )}
 
                   {SAdminuserPin?.length > 0 &&
                     UserType != 'Super Admin User' && (
-                      <Suspense fallback={null}>
                       <div>
                         <SAdminUserNotification
                           SAdminuserPin={SAdminuserPin}
@@ -448,7 +445,6 @@ const BSLayout2 = () => {
                           handlePopOverOpen={handlePopOverOpen}
                         />
                       </div>
-                      </Suspense>
                     )}
                   {!OtherServicesglobal && (
                     <>
@@ -536,7 +532,6 @@ const BSLayout2 = () => {
                     }}
                   >
                     {!OtherServicesglobal && (
-                      <Suspense fallback={null}>
                       <CategoryHorizontal
                         categoryFunction={dynamicComponentProps(
                           'Category',
@@ -544,10 +539,8 @@ const BSLayout2 = () => {
                           BSLayout2Data?.BookingCategory?.[0]
                         )}
                       />
-                      </Suspense>
                     )}
                     {OtherServicesglobal && (
-                      <Suspense fallback={null}>
                       <BSOtherServicesHorizontalcat
                         categoryFunction={dynamicComponentProps(
                           'Category',
@@ -555,7 +548,6 @@ const BSLayout2 = () => {
                           BSLayout2Data?.BookingCategory?.[0]
                         )}
                       />
-                      </Suspense>
                     )}
                   </div>
                   <div
@@ -588,7 +580,6 @@ const BSLayout2 = () => {
                         />
                       ))}
                     {Comboglobal === true && !OtherServicesglobal && (
-                      <Suspense fallback={null}>
                       <BSComboItemCard
                         cardFunctionality={dynamicComponentProps(
                           'Card',
@@ -596,10 +587,8 @@ const BSLayout2 = () => {
                           BSLayout2Data?.BookingCard?.[0]
                         )}
                       />
-                      </Suspense>
                     )}
                     {OtherServicesglobal && (
-                      <Suspense fallback={null}>
                       <BSOtherServiceItemCard
                         // screenHeight={screenHeight}
                         cardFunctionality={dynamicComponentProps(
@@ -608,7 +597,6 @@ const BSLayout2 = () => {
                           BSLayout2Data?.BookingCard?.[0]
                         )}
                       />
-                      </Suspense>
                     )}
                   </div>
                 </div>
@@ -618,7 +606,6 @@ const BSLayout2 = () => {
                   {action ? (
                     <BranchTransferComponent />
                   ) : (
-                    <Suspense fallback={null}>
                     <>
                       {BSLayout2Data?.BookingBilling?.[0] == 'Billing1' && (
                         <BSBillingTable1 />
@@ -642,19 +629,14 @@ const BSLayout2 = () => {
                         <BSBillingTable7 />
                       )}
 
-                        {BookingBilling == 'Billing8' && (
+                      {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
-                          <ComboSalesBillTable />
-                        )}
                       {BSLayout2Data?.BookingBilling?.[0] ==
                         'StandardBilling' && (
                         <div className="BSCategory2New">
-                            <Suspense fallback={null}>
                           <StandardTable />
-                            </Suspense>
                         </div>
                       )}
                     </>
-                    </Suspense>
                   )}
                 </div>
               </div>
@@ -662,20 +644,16 @@ const BSLayout2 = () => {
           </div>
         </div>
         {BookingModalOpen && (
-          <Suspense fallback={null}>
           <RetailBookingClosing
             PaymentOpen={BookingModalOpen}
             PaymentClose={HandleBookingModalClose}
           />
-          </Suspense>
         )}
         {ListOfInvoices && (
-          <Suspense fallback={null}>
           <ListOfSalesInvoices
             ListOfInvoicesOpen={ListOfInvoices}
             handleInvoiceClose={handleInvoiceClose}
           />
-          </Suspense>
         )}
 
         <LayoutSubCategoryFetcher />

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' && (

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' && (

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' && (

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' && (

src/Pages/BookingScreen/Template/SalesCountComponent.jsx

@@ -5,7 +5,7 @@ import React, {
   useRef,
   useCallback,
   lazy,
-  Suspense,
+  
 } from 'react';
 import { Tooltip } from 'antd';
 import {
@@ -482,7 +482,6 @@ const SalesCountComponent = React.memo(
       setModalProductDetails([]);
     };
     return (
-      <Suspense fallback={<div>Loading…</div>}>
          <>
           <Messages
             messageType={messageType}
@@ -735,7 +734,6 @@ const SalesCountComponent = React.memo(
             onSubmit={handleModalSubmit}
           />
         </>
-      </Suspense>
      );
   }
 );

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-family: "Poppins", sans-serif;
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .BillingTable6Table1-body {

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;

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;

src/Styles/BookingScreen/Components/BSCategories/BSCategoryHorizontal.scss

@@ -30,6 +30,7 @@
   align-items: center;
   justify-content: center;
   border: none;
+  width: max-content;
 }
 
 .CategoryHorizontal-image {

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;

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 */
+  overflow-y: auto;
-  max-height: 300px; /* Set a maximum height for the container */
+  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;
+  }
+}

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%;
@@ -253,7 +297,6 @@ body {
 }
 
 @keyframes shake {
-
   0%,
   100% {
     transform: rotate(0deg);

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;

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;

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;

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;

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;

src/routesConfig.jsx

@@ -684,7 +684,7 @@ const initSession = () => {
 
   sessionStorage.setItem(
     'auth',
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiODA3MjMyOTE1MyIsIlBhc3N3b3JkIjoiWkB6MTIzNCIsImF1ZCI6WyJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTIiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTQiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiXSwiZXhwIjoxNzcyNzM4MDkxLCJpc3MiOiJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMDEifQ.mz8gjByjlstvHvhKoSbHJsQjBYf7f3w1NatAepRx-Ro'
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiODA3MjMyOTE1MyIsIlBhc3N3b3JkIjoiWkB6MTIzNCIsImF1ZCI6WyJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTIiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTQiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiXSwiZXhwIjoxNzczNDI3NTExLCJpc3MiOiJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMDEifQ.Elg8MMqbF4nMYwcWgzrxVaLfYhxdx3drixoV83RbuAM'
   );
 };