Merge pull request 'Skeleton Add' (#164) from PushMainVM into main

Reviewed-on: Pozomind/pozo-retail-app#164

src/Components/Skeleton/BillingTableSkeleton.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import './BillingTableSkeleton.scss';
+
+const BillingTableSkeleton = () => {
+  return (
+    <div className="billing-skeleton">
+      <div className="billing-header">
+        <div className="skeleton"></div>
+        <div className="skeleton"></div>
+        <div className="skeleton"></div>
+        <div className="skeleton"></div>
+        <div className="skeleton"></div>
+      </div>
+
+      <div className="billing-row">
+        <div className="skeleton"></div>
+        <div className="skeleton" style={{ height: '30px' }}></div>
+        <div className="skeleton"></div>
+        <div className="skeleton"></div>
+        <div className="skeleton"></div>
+      </div>
+
+      <div className="billing-row">
+        <div className="skeleton"></div>
+        <div className="skeleton" style={{ height: '30px' }}></div>
+        <div className="skeleton"></div>
+        <div className="skeleton"></div>
+        <div className="skeleton"></div>
+      </div>
+
+      <div className="billing-row">
+        <div className="skeleton"></div>
+        <div className="skeleton" style={{ height: '30px' }}></div>
+        <div className="skeleton"></div>
+        <div className="skeleton"></div>
+        <div className="skeleton"></div>
+      </div>
+
+      <div className="billing-bottom">
+        <div className="billing-left">
+          <div className="skeleton billing-box"></div>
+          <div className="skeleton billing-box"></div>
+        </div>
+        <div className="billing-right">
+          <div className="skeleton billing-box"></div>
+          <div className="skeleton billing-total"></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BillingTableSkeleton;

src/Components/Skeleton/BillingTableSkeleton.scss

@@ -0,0 +1,58 @@
+@keyframes shimmer {
+  0% {
+    background-position: -500px 0;
+  }
+  100% {
+    background-position: 500px 0;
+  }
+}
+
+.skeleton {
+  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 37%, #e0e0e0 63%);
+  background-size: 1000px 100%;
+  animation: shimmer 1.4s infinite;
+  border-radius: 4px;
+}
+
+.billing-skeleton {
+  background: #fff;
+  max-width: 420px; 
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.billing-header {
+  display: grid;
+  grid-template-columns: 40px 1fr 50px 60px 30px;
+  gap: 8px;
+  padding: 10px;
+  background: #dde3e6;
+}
+
+.billing-row {
+  display: grid;
+  grid-template-columns: 40px 1fr 50px 60px 30px;
+  gap: 8px;
+  padding: 10px;
+}
+
+.billing-bottom {
+  display: flex;
+  gap: 10px;
+  padding: 10px;
+  border-top: 1px solid #ddd;
+}
+
+.billing-left,
+.billing-right {
+  flex: 1;
+}
+
+.billing-box {
+  height: 36px;
+  margin-bottom: 10px;
+}
+
+.billing-total {
+  height: 48px;
+}

src/Components/Skeleton/CardSkeleton.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import './CardSkeleton.scss';
+import NavbarSkeleton from './NavbarSkeleton';
+
+const CardSkeleton = ({ count = 15 }) => {
+  return (
+    <>
+      <div
+        style={{
+          marginTop: '1rem',
+        }}
+      >
+        <NavbarSkeleton />
+      </div>
+      <div className="card-skeleton-grid">
+        {Array.from({ length: count }).map((_, index) => (
+          <div key={index} className="card-skeleton">
+            <div className="skeleton cardimg"></div>
+            <div style={{ width: '50%' }}>
+              <div className="skeleton card-title"></div>
+              <div className="skeleton card-price"></div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default CardSkeleton;

src/Components/Skeleton/CardSkeleton.scss

@@ -0,0 +1,49 @@
+@keyframes shimmer {
+    0% {
+        background-position: -500px 0;
+    }
+    100% {
+        background-position: 500px 0;
+    }
+}
+
+.skeleton {
+    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 37%, #e0e0e0 63%);
+    background-size: 1000px 100%;
+    animation: shimmer 1.4s infinite;
+    border-radius: 6px;
+}
+
+.card-skeleton-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 14px;
+    margin-top: 1rem;
+    width: 70%;
+}
+
+.card-skeleton {
+    background: #fff;
+    padding: 10px;
+    border-radius: 8px;
+    display: flex;
+    gap: 5px;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.cardimg {
+    width: 50%;
+    height: 50px;
+}
+
+.card-title {
+    height: 14px;
+    width: 60%;
+    margin-bottom: 8px;
+}
+
+.card-price {
+    height: 14px;
+    width: 90%;
+}

src/Components/Skeleton/NavbarSkeleton.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import './NavbarSkeleton.scss';
+
+const NavbarSkeleton = () => {
+  return (
+    <div className="navbar-skeleton">
+
+      {/* LEFT */}
+      <div className="nav-left">
+        <div className="skeleton navbar-logo"></div>
+        <div className="nav-title-group">
+          <div className="skeleton navbar-title"></div>
+          <div className="skeleton navbar-subtitle"></div>
+        </div>
+      </div>
+
+      {/* CENTER SEARCH */}
+      <div className="skeleton navbar-search"></div>
+
+      {/* ICON GROUP 1 */}
+      <div className="nav-icons">
+        <div className="skeleton navbar-icon"></div>
+        <div className="skeleton navbar-icon"></div>
+        <div className="skeleton navbar-icon"></div>
+        <div className="skeleton navbar-icon"></div>
+      </div>
+
+      {/* SMALL BOX */}
+      <div className="skeleton navbar-time"></div>
+
+      {/* ICON GROUP 2 */}
+      <div className="nav-icons">
+        <div className="skeleton navbar-icon"></div>
+        <div className="skeleton navbar-icon"></div>
+        <div className="skeleton navbar-icon"></div>
+        <div className="skeleton navbar-icon"></div>
+      </div>
+
+      {/* PROFILE */}
+      <div className="skeleton navbar-profile"></div>
+    </div>
+  );
+};
+
+export default NavbarSkeleton;

src/Components/Skeleton/NavbarSkeleton.scss

@@ -0,0 +1,85 @@
+@keyframes shimmer {
+  0% { background-position: -500px 0; }
+  100% { background-position: 500px 0; }
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    #e0e0e0 25%,
+    #f0f0f0 37%,
+    #e0e0e0 63%
+  );
+  background-size: 1000px 100%;
+  animation: shimmer 1.4s infinite;
+  border-radius: 6px;
+}
+
+/* NAVBAR */
+.navbar-skeleton {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 16px;
+  background: #fff;
+  border-bottom: 1px solid #ddd;
+}
+
+/* LEFT */
+.nav-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.navbar-logo {
+  width: 36px;
+  height: 36px;
+}
+
+.nav-title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.navbar-title {
+  width: 120px;
+  height: 14px;
+}
+
+.navbar-subtitle {
+  width: 160px;
+  height: 10px;
+}
+
+/* SEARCH */
+.navbar-search {
+  flex: 1;
+  height: 34px;
+}
+
+/* ICON GROUP */
+.nav-icons {
+  display: flex;
+  gap: 10px;
+}
+
+.navbar-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50% !important;
+}
+
+/* SMALL RECT BOX */
+.navbar-time {
+  width: 90px;
+  height: 28px;
+}
+
+/* PROFILE */
+.navbar-profile {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+}

src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable1/BSBTOverall1.jsx

@@ -16,6 +16,7 @@ import { isMobile } from 'react-device-detect';
 import { getTemplateData } from '../../../../../Features/ThemeChange/ThemeChange.js';
 import PozoCartIcon from '../../../../../Pages/BookingScreen/Components/UtillComponents/PozoCartIcon.jsx';
 import TooltipWrapper from '../../../../../Components/Tooltip/Tooltip';
+import BillingTableSkeleton from '../../../../../Components/Skeleton/BillingTableSkeleton.jsx';
 // jsx File
 const BSBillingTable1 = lazy(
   () => import('../BSBillingTable1/BSBillingTable1.jsx')
@@ -128,7 +129,7 @@ export default function BSBTOverall1() {
   }, [width]);
 
   return (
-    <Suspense fallback={<div>Loading…</div>}>
+    <Suspense fallback={<BillingTableSkeleton />}>
       <>
         <div
           className={

src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable1/BSBillingTable1.jsx

@@ -83,6 +83,7 @@ const CustomerPriceHistory = lazy(
   () => import('../../UtillComponents/CustomerPriceHistory.jsx')
 ); // Scss File
 import '../../../../../Styles/BookingScreen/Components/BSBillingTables/BSBillingTable1/BSBillingTable1.scss';
+import BillingTableSkeleton from '../../../../../Components/Skeleton/BillingTableSkeleton.jsx';
 
 const BSBillingTable1 = () => {
   const { removeExtraCharge } = useUtilsComponent();
@@ -2017,7 +2018,7 @@ const BSBillingTable1 = () => {
   };
 
   return (
-    <Suspense fallback={<div>Loading…</div>}>
+    <Suspense fallback={<BillingTableSkeleton />}>
       <>
         <div className="BillingTable1-Structure" style={{ overflow: 'auto' }}>
           <div className="BillingTable1-table-div">

src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable2/BSBillingTable2.jsx

@@ -220,6 +220,7 @@ const OtherServicePrintStyle1 = lazy(
     import('../../../PrintTemplates/ThermalPrinter/OtherServicePrintStyle1.jsx')
 );
 import OtherServiceMobilePrint from '../../BookingFunctionality/OtherServiceMobilePrint.jsx';
+import BillingTableSkeleton from '../../../../../Components/Skeleton/BillingTableSkeleton.jsx';
 const BSOtherServiceClaim = lazy(
   () => import('../../UtillComponents/BSOtherServiceClaim.jsx')
 );
@@ -3658,7 +3659,7 @@ const BSBillingTable2 = () => {
     );
   };
   return (
-    <Suspense fallback={<div>Loading…</div>}>
+     <Suspense fallback={<BillingTableSkeleton />}>
       <div
         className={
           templateData?.BookingLayout?.[0] === 'Layout6'

src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable4/BSBillingTable4.jsx

@@ -83,6 +83,7 @@ import {
 import { ApplicationPreferences } from '../../../../../Features/BrachLogin/BranchLogin.js';
 import { useDateStore } from '../../../../../Features/BookingScreen/BookingData/DateStore.js';
 import { useUtilsComponent } from '../../../../../Services/utils.js';
+import BillingTableSkeleton from '../../../../../Components/Skeleton/BillingTableSkeleton.jsx';
 const CustomerPriceHistory = lazy(
   () => import('../../UtillComponents/CustomerPriceHistory.jsx')
 );
@@ -2174,7 +2175,7 @@ const BSBillingTable4 = () => {
   };
 
   return (
-    <Suspense fallback={<div>Loading...</div>}>
+ <Suspense fallback={<BillingTableSkeleton />}>
       <div
         className={
           isMobile ? 'BSBilling4-tablediv-mobile' : 'BSBilling4-tablediv'

src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable5/BSBillingTable5.jsx

@@ -196,6 +196,7 @@ import {
 import CardPopover from '../StandardTable/Utils/CardPopover.jsx';
 import UpiPopover from '../StandardTable/Utils/UpiPopOver.jsx';
 import { useDateStore } from '../../../../../Features/BookingScreen/BookingData/DateStore.js';
+import BillingTableSkeleton from '../../../../../Components/Skeleton/BillingTableSkeleton.jsx';
 // Jsx Files
 const OtherServicePrintStyle1 = lazy(
   () =>
@@ -3605,7 +3606,7 @@ const BSBillingTable5 = () => {
   };
   return (
     <>
-      <Suspense fallback={<div>Loading…</div>}>
+      <Suspense fallback={<BillingTableSkeleton />}>
         <div
           className={
             templateData?.BookingLayout?.[0] === 'Layout6'

src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable6/BSBillingTable6.jsx

@@ -75,6 +75,7 @@ import {
 import { getCustomerDisplayWindow } from '../../../../../Features/customerDisplayWindow/customerDisplayWindow.js';
 import { useApplyOfferto_CardDetail } from '../../UtillComponents/BSNavBarOffer/BSNavBarOffer_CustomHooks.jsx';
 import { useUtilsComponent } from '../../../../../Services/utils.js';
+import BillingTableSkeleton from '../../../../../Components/Skeleton/BillingTableSkeleton.jsx';
 const BSEditTotalAmt = lazy(
   () => import('../BSEditTotalAmount/BSEditTotalAmt.jsx')
 );
@@ -1986,7 +1987,7 @@ const BSBillingTable6 = () => {
   };
 
   return (
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense fallback={<BillingTableSkeleton />}>
       <div
         className={
           true

src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable7/BSBillingTable7.jsx

@@ -70,6 +70,7 @@ const CustomerPriceHistory = lazy(
   () => import('../../UtillComponents/CustomerPriceHistory.jsx')
 );
 import { useUtilsComponent } from '../../../../../Services/utils.js';
+import BillingTableSkeleton from '../../../../../Components/Skeleton/BillingTableSkeleton.jsx';
 
 const BSBillingTable7 = () => {
   const { removeExtraCharge } = useUtilsComponent();
@@ -1894,7 +1895,7 @@ const BSBillingTable7 = () => {
   };
 
   return (
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense fallback={<BillingTableSkeleton />}>
       <>
         <div
           style={{

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

@@ -93,6 +93,7 @@ import {
 import { ApplicationPreferences } from '../../../../../Features/BrachLogin/BranchLogin.js';
 import { useDateStore } from '../../../../../Features/BookingScreen/BookingData/DateStore.js';
 import { useUtilsComponent } from '../../../../../Services/utils.js';
+import BillingTableSkeleton from '../../../../../Components/Skeleton/BillingTableSkeleton.jsx';
 
 const StandardTable = () => {
   const { removeExtraCharge } = useUtilsComponent();
@@ -2106,6 +2107,7 @@ const StandardTable = () => {
   const isAndroid = /Android/i.test(navigator.userAgent);
 
   return (
+    <Suspense fallback={<BillingTableSkeleton />}>
       <div
         className="standardTableMain"
         style={{ height: isMobile ? '86%' : '100%' }}
@@ -2393,7 +2395,8 @@ const StandardTable = () => {
                               : triggerAnimation &&
                                   index === 0 &&
                                   !item?.SalesId &&
-                                tableDataTakeAway?.length >= PreviousdataLength
+                                  tableDataTakeAway?.length >=
+                                    PreviousdataLength
                                 ? 'wheat'
                                 : triggerAnimation &&
                                     index === 0 &&
@@ -2409,13 +2412,17 @@ const StandardTable = () => {
                             ? 'rgb(243, 248, 213)'
                             : GlobEstBooking === 'ParEst' &&
                                 GlobProdwisedata?.includes(
-                                item?.InwardDtlId + ' ' + item?.BookingTypeName
+                                  item?.InwardDtlId +
+                                    ' ' +
+                                    item?.BookingTypeName
                                 )
                               ? '#b2d1f7'
                               : index % 2 === 0
                                 ? 'white'
                                 : SelectedBillColor?.['OverallBackgroundColor']
-                                ? SelectedBillColor?.['OverallBackgroundColor']
+                                  ? SelectedBillColor?.[
+                                      'OverallBackgroundColor'
+                                    ]
                                   : '#d6d6d6',
                         animation:
                           BillOrderPre === 'Y' && !BookingTypeBoth
@@ -2480,7 +2487,9 @@ const StandardTable = () => {
                               >
                                 {item?.ProdName}
                                 &nbsp;{' '}
-                              {item?.BrandName !== null ? item?.BrandName : ''}
+                                {item?.BrandName !== null
+                                  ? item?.BrandName
+                                  : ''}
                                 {item?.Type != 'C' && (
                                   <>
                                     <p
@@ -2493,7 +2502,9 @@ const StandardTable = () => {
                                       (
                                       {!item?.ProdVariantName?.toLowerCase()?.includes(
                                         'variant'
-                                    ) && <span>{item?.ProdVariantName} </span>}
+                                      ) && (
+                                        <span>{item?.ProdVariantName} </span>
+                                      )}
                                       {AvailableDate ? (
                                         <>
                                           {' '}
@@ -2723,7 +2734,8 @@ const StandardTable = () => {
                                 ? 'wheat'
                                 : BookingType !== 'Dine In' &&
                                     triggerAnimation &&
-                                  OldtableDataTakeAway?.length + index === 0 &&
+                                    OldtableDataTakeAway?.length + index ===
+                                      0 &&
                                     tableDataDinein?.length >=
                                       PreviousdataLength &&
                                     !HoldOrderDtl &&
@@ -2801,7 +2813,9 @@ const StandardTable = () => {
                               >
                                 {item?.ProdName}
                                 &nbsp;{' '}
-                              {item?.BrandName !== null ? item?.BrandName : ''}
+                                {item?.BrandName !== null
+                                  ? item?.BrandName
+                                  : ''}
                                 {item?.Type != 'C' && (
                                   <>
                                     <p
@@ -2814,7 +2828,9 @@ const StandardTable = () => {
                                       (
                                       {!item?.ProdVariantName?.toLowerCase()?.includes(
                                         'variant'
-                                    ) && <span>{item?.ProdVariantName} </span>}
+                                      ) && (
+                                        <span>{item?.ProdVariantName} </span>
+                                      )}
                                       {AvailableDate ? (
                                         <>
                                           {' '}
@@ -3044,7 +3060,8 @@ const StandardTable = () => {
                                     index ===
                                     0 &&
                                   !item?.SalesId &&
-                                tableDataTakeAway?.length >= PreviousdataLength
+                                  tableDataTakeAway?.length >=
+                                    PreviousdataLength
                                 ? 'wheat'
                                 : BookingType !== 'Dine In' &&
                                     triggerAnimation &&
@@ -3084,7 +3101,9 @@ const StandardTable = () => {
                             ? 'rgb(243, 248, 213)'
                             : GlobEstBooking === 'ParEst' &&
                                 GlobProdwisedata?.includes(
-                                item?.InwardDtlId + ' ' + item?.BookingTypeName
+                                  item?.InwardDtlId +
+                                    ' ' +
+                                    item?.BookingTypeName
                                 )
                               ? '#b2d1f7'
                               : (OldtableDataDinein?.length +
@@ -3094,7 +3113,9 @@ const StandardTable = () => {
                                   0
                                 ? 'white'
                                 : SelectedBillColor?.['OverallBackgroundColor']
-                                ? SelectedBillColor?.['OverallBackgroundColor']
+                                  ? SelectedBillColor?.[
+                                      'OverallBackgroundColor'
+                                    ]
                                   : '#d6d6d6',
                         animation:
                           BillOrderPre === 'Y' && !BookingTypeBoth
@@ -3164,7 +3185,9 @@ const StandardTable = () => {
                                   ? item.ProdName
                                   : item.ServiceName}
                                 &nbsp;{' '}
-                              {item?.BrandName !== null ? item?.BrandName : ''}
+                                {item?.BrandName !== null
+                                  ? item?.BrandName
+                                  : ''}
                                 {item?.Type != 'C' && (
                                   <>
                                     <p
@@ -3179,7 +3202,9 @@ const StandardTable = () => {
                                           {!item?.ProdVariantName?.toLowerCase()?.includes(
                                             'variant'
                                           ) && (
-                                          <span>{item?.ProdVariantName} </span>
+                                            <span>
+                                              {item?.ProdVariantName}{' '}
+                                            </span>
                                           )}
                                           {AvailableDate ? (
                                             <>
@@ -3187,7 +3212,8 @@ const StandardTable = () => {
                                               (
                                               {`${to12Hour(item?.VariantAvailableFrom)} - ${to12Hour(item?.VariantAvailableTo)}`}
                                               ) &nbsp;
-                                            {item?.SinglePc == 'Y' && 'Single'}
+                                              {item?.SinglePc == 'Y' &&
+                                                'Single'}
                                             </>
                                           ) : (
                                             <>
@@ -3438,7 +3464,9 @@ const StandardTable = () => {
                             ? 'rgb(243, 248, 213)'
                             : GlobEstBooking === 'ParEst' &&
                                 GlobProdwisedata?.includes(
-                                item?.InwardDtlId + ' ' + item?.BookingTypeName
+                                  item?.InwardDtlId +
+                                    ' ' +
+                                    item?.BookingTypeName
                                 )
                               ? '#b2d1f7'
                               : (OldtableDataTakeAway?.length +
@@ -3449,7 +3477,9 @@ const StandardTable = () => {
                                   0
                                 ? 'white'
                                 : SelectedBillColor?.['OverallBackgroundColor']
-                                ? SelectedBillColor?.['OverallBackgroundColor']
+                                  ? SelectedBillColor?.[
+                                      'OverallBackgroundColor'
+                                    ]
                                   : '#d6d6d6',
                         animation:
                           BillOrderPre === 'Y' && !BookingTypeBoth
@@ -3518,7 +3548,9 @@ const StandardTable = () => {
                               >
                                 {item?.ProdName}
                                 &nbsp;{' '}
-                              {item?.BrandName !== null ? item?.BrandName : ''}
+                                {item?.BrandName !== null
+                                  ? item?.BrandName
+                                  : ''}
                                 {item?.Type != 'C' && (
                                   <>
                                     <p
@@ -3531,7 +3563,9 @@ const StandardTable = () => {
                                       (
                                       {!item?.ProdVariantName?.toLowerCase()?.includes(
                                         'variant'
-                                    ) && <span>{item?.ProdVariantName} </span>}
+                                      ) && (
+                                        <span>{item?.ProdVariantName} </span>
+                                      )}
                                       {AvailableDate ? (
                                         <>
                                           {' '}
@@ -3724,7 +3758,7 @@ const StandardTable = () => {
                 </tbody>
               )}
             </table>
-          <Suspense fallback={<div>Loading...</div>}>
+
             {OpenEditTotalAmt && (
               <BSEditTotalAmt
                 EditTotalOpen={OpenEditTotalAmt}
@@ -3749,15 +3783,13 @@ const StandardTable = () => {
                 OrderCardDetail={OrderCardDetail}
               />
             )}
-          </Suspense>
           </div>
           <div className="booking-table-footer">
-          <Suspense fallback={<div>Loading...</div>}>
             <StandardTablePayment />
+          </div>
+        </div>
+      </div>
     </Suspense>
-        </div>
-      </div>
-    </div>
   );
 };
 

src/Pages/BookingScreen/Components/BSNavbar/BSNavBarUserInfo.jsx

@@ -12,6 +12,7 @@ import { useNavigate } from 'react-router-dom';
 const UserRelieveManager = lazy(() => import('../../Template/RealivingUser'));
 // Scss
 import '../../../../Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss';
+import NavbarSkeleton from '../../../../Components/Skeleton/NavbarSkeleton';
 const subDirectory = import.meta.env.ENV_BASE_URL;
 
 const BSNavBarUserInfo = ({
@@ -38,7 +39,7 @@ const BSNavBarUserInfo = ({
     navigate(`${subDirectory}app-page/branch-login`);
   };
   return (
-    <Suspense fallback={<div>Loading…</div>}>
+    <Suspense fallback={<NavbarSkeleton />}>
       <div ref={divRef} className="BSNavBar1-Accmenu">
         <div className="BSNavBar1-Acc-menu">
           {CompBranchData?.length > 1 && (

src/Pages/BookingScreen/Components/BSNavbar/BSNavbar1.jsx

@@ -164,6 +164,7 @@ import { FaParking } from 'react-icons/fa';
 import { isMobile } from 'react-device-detect';
 import { DefaultModal } from '../../../../Components/Modal/DefaultModal.jsx';
 import '../../../../Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss';
+import NavbarSkeleton from '../../../../Components/Skeleton/NavbarSkeleton.jsx';
 
 const subDirectory = import.meta.env.ENV_BASE_URL;
 const commonUrl = import.meta.env.ENV_COMMON_BASE_URL;
@@ -611,7 +612,7 @@ const BSNavbar1 = (props) => {
   };
 
   return (
-    <Suspense fallback={<div>Suspense Loading...</div>}>
+    <Suspense fallback={<NavbarSkeleton />}>
       <div
         className="BSBillingNavBar1"
         style={{

src/Pages/BookingScreen/Components/BSNavbar/BSNavbar2.jsx

@@ -137,6 +137,7 @@ const BSCustomerSelect = lazy(
 );
 // Scss
 import '../../../../Styles/BookingScreen/Components/BSNavbar/BSNavbar2.scss';
+import NavbarSkeleton from '../../../../Components/Skeleton/NavbarSkeleton.jsx';
 
 const subDirectory = import.meta.env.ENV_BASE_URL;
 const commonUrl = import.meta.env.ENV_COMMON_BASE_URL;
@@ -585,7 +586,7 @@ const BSNavbar2 = () => {
   };
 
   return (
-    <Suspense fallback={<div>Loading…</div>}>
+    <Suspense fallback={<NavbarSkeleton />}>
       <div className="BSBillingNavBar2" style={{ backgroundColor: 'white' }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
           <div>

src/Pages/BookingScreen/Components/BSNavbar/BSNavbar3.jsx

@@ -113,6 +113,7 @@ import BSNavBarWeightScale from '../UtillComponents/BSNavBarWeightScale.jsx';
 import { CgSearchLoading } from 'react-icons/cg';
 import { DefaultModal } from '../../../../Components/Modal/DefaultModal.jsx';
 import MultipleSearch from '../UtillComponents/MultipleSearch.jsx';
+import NavbarSkeleton from '../../../../Components/Skeleton/NavbarSkeleton.jsx';
 
 // Jsx Files
 const BSNavBarFavItems = lazy(
@@ -595,7 +596,7 @@ const BSNavbar3 = ({ optionNames }) => {
   };
 
   return (
-    <Suspense fallback={<div>Loading…</div>}>
+    <Suspense fallback={<NavbarSkeleton />}>
       <>
         <div className="BSNavbar3Main">
           <div className="homeTime">

src/Pages/BookingScreen/Components/UtillComponents/ProductPriceChange.jsx

@@ -1,19 +1,35 @@
-import { shallowEqual, useSelector } from "react-redux";
+import { shallowEqual, useSelector } from 'react-redux';
-import { GlobalAccessForOthers, GlobalCardAccess, GlobalCombosearch, GlobalItemCard, GlobalProductCategorie, GlobalSelectedDatas, GlobalWithoutSubCatItemCard, triggerProductCard } from "../../../../Features/BookingScreen/BookingData/BookingData";
+import {
-import { DefaultModal } from "../../../../Components/Modal/DefaultModal";
+  GlobalAccessForOthers,
-import { useCallback, useEffect, useRef, useState } from "react";
+  GlobalCardAccess,
-import { Tables } from "../../../../Components/Tables/Table";
+  GlobalCombosearch,
-import { InputField } from "../../../../Components/Forms/InputField";
+  GlobalItemCard,
-import { Form, Pagination, Tooltip } from "antd";
+  GlobalProductCategorie,
-import { getSession } from "../../../../Services/Others";
+  GlobalSelectedDatas,
-import { Messages } from "../../../../Components/Notifications/Messages";
+  GlobalWithoutSubCatItemCard,
-import { useDispatch } from "react-redux";
+  triggerProductCard,
-import { PutStockPrice } from "../../../../Features/StockPriceUpdate/StockPriceUpdateMaster";
+} from '../../../../Features/BookingScreen/BookingData/BookingData';
-import PriceChange from "../../../../Images/PayOptImgs/PriceChange.svg";
+import { DefaultModal } from '../../../../Components/Modal/DefaultModal';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Tables } from '../../../../Components/Tables/Table';
+import { InputField } from '../../../../Components/Forms/InputField';
+import { Form, Pagination, Tooltip } from 'antd';
+import { getSession } from '../../../../Services/Others';
+import { Messages } from '../../../../Components/Notifications/Messages';
+import { useDispatch } from 'react-redux';
+import { PutStockPrice } from '../../../../Features/StockPriceUpdate/StockPriceUpdateMaster';
+import PriceChange from '../../../../Images/PayOptImgs/PriceChange.svg';
 import { v4 as uuidv4 } from 'uuid';
+// src\Styles\BookingScreen\Template\BSLayout2\BSLayout2.scss
+import '../../../../Styles/BookingScreen/Template/BSLayout2/BSLayout2.scss';
 
-const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, productPriceChange = false, setProductPriceChange = () => { }, setPriceChangeProduct = () => { } }) => {
+const ProductPriceChange = ({
-
+  showButton = true,
+  priceChangeProduct = null,
+  productPriceChange = false,
+  setProductPriceChange = () => {},
+  setPriceChangeProduct = () => {},
+}) => {
   const formRef = useRef(null);
   const dispatch = useDispatch();
 
@@ -33,20 +49,28 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
   const comboSearch = useSelector(GlobalCombosearch);
   const ProdCat = useSelector(GlobalProductCategorie, shallowEqual);
   const ItemCard = useSelector(GlobalItemCard, shallowEqual);
-    const withoutSubCatItemCard = useSelector(GlobalWithoutSubCatItemCard, shallowEqual);
+  const withoutSubCatItemCard = useSelector(
+    GlobalWithoutSubCatItemCard,
+    shallowEqual
+  );
   const CardAccess = useSelector(GlobalCardAccess, shallowEqual);
-    const globalAccessForOthers = useSelector(GlobalAccessForOthers, shallowEqual);
+  const globalAccessForOthers = useSelector(
+    GlobalAccessForOthers,
+    shallowEqual
+  );
   const SelectedDatas = useSelector(GlobalSelectedDatas, shallowEqual);
   const [tableData, setTableData] = useState([]);
   const [editingKey, setEditingKey] = useState(null);
   const [priceChangedProducts, setPriceChangedProducts] = useState([]);
-    console.log(comboSearch, "comboSearch")
+  console.log(comboSearch, 'comboSearch');
 
   // console.log(noSubcatCardData, "noSubcatCardData")
 
   useEffect(() => {
     if (ProdCat && (ItemCard || withoutSubCatItemCard)) {
-            setNoSubcatCardData(ItemCard?.length === 0 ? withoutSubCatItemCard : ItemCard);
+      setNoSubcatCardData(
+        ItemCard?.length === 0 ? withoutSubCatItemCard : ItemCard
+      );
     }
   }, [ProdCat, ItemCard, withoutSubCatItemCard, noSubcatCardData]);
 
@@ -57,7 +81,9 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
       key: 'SlNo',
       width: '60px',
       align: 'center',
-            render: (text, record, index) => <div>{(currentPage - 1) * pageSize + index + 1}</div>
+      render: (text, record, index) => (
+        <div>{(currentPage - 1) * pageSize + index + 1}</div>
+      ),
     },
     {
       title: 'Product Name',
@@ -97,23 +123,22 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
                   if (value === '') {
                     return Promise.resolve();
                   } else if (parseFloat(value) < 1) {
-                                        return Promise.reject(`MRP should be greater than 0`)
+                    return Promise.reject(`MRP should be greater than 0`);
                   }
                   return Promise.resolve();
                 },
               },
-                        ]}>
+            ]}
+          >
             <InputField
-
               value={text}
               placeholder="Enter New MRP"
-                            onChange={(e) => handleNewMRPChange(e?.target?.value, record?.localId)}
+              onChange={(e) =>
+                handleNewMRPChange(e?.target?.value, record?.localId)
+              }
               inputMode="decimal"
               onInput={(e) => {
-                                let cleanedValue = e.target.value.replace(
+                let cleanedValue = e.target.value.replace(/[^0-9.]/g, ''); // Remove invalid characters
-                                    /[^0-9.]/g,
-                                    ''
-                                ); // Remove invalid characters
                 const parts = cleanedValue.split('.');
 
                 if (cleanedValue.startsWith('.')) {
@@ -158,7 +183,9 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
                   if (value === '') {
                     return Promise.resolve();
                   } else if (parseFloat(value) < 1) {
-                                        return Promise.reject(`Sell Price should be greater than 0`)
+                    return Promise.reject(
+                      `Sell Price should be greater than 0`
+                    );
                   }
                   return Promise.resolve();
                 },
@@ -166,16 +193,14 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
             ]}
           >
             <InputField
-
               value={text}
               placeholder="Enter New Sell Price"
-                            onChange={(e) => handleNewSellPriceChange(e?.target?.value, record?.localId)}
+              onChange={(e) =>
+                handleNewSellPriceChange(e?.target?.value, record?.localId)
+              }
               inputMode="decimal"
               onInput={(e) => {
-                                let cleanedValue = e.target.value.replace(
+                let cleanedValue = e.target.value.replace(/[^0-9.]/g, ''); // Remove invalid characters
-                                    /[^0-9.]/g,
-                                    ''
-                                ); // Remove invalid characters
                 const parts = cleanedValue.split('.');
 
                 if (cleanedValue.startsWith('.')) {
@@ -201,12 +226,13 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
         : SelectedDatas?.[0]?.AppId === 0 && SelectedDatas?.[0]?.CompId === 0
           ? []
           : SelectedDatas
-            : ItemCard?.length === 0 || (ItemCard?.[0]?.AppId === 0 && ItemCard?.[0]?.CompId === 0)
+      : ItemCard?.length === 0 ||
+          (ItemCard?.[0]?.AppId === 0 && ItemCard?.[0]?.CompId === 0)
         ? noSubcatCardData
         : ItemCard
     : '';
 
-    console.log(cardData, "cardData1", ItemCard, SelectedDatas, noSubcatCardData)
+  console.log(cardData, 'cardData1', ItemCard, SelectedDatas, noSubcatCardData);
 
   useEffect(() => {
     const extractStockDtls = (data) => {
@@ -214,36 +240,28 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
 
       let stockDtls = [];
 
-            data?.forEach(item => {
+      data?.forEach((item) => {
         const products = item?.ProductDetail ?? [];
 
-                products.forEach(product => {
+        products.forEach((product) => {
           const variants = product?.ProdVariantDetails ?? [];
 
           variants
-                        .filter(variant => variant?.StockDetails?.length > 0)
+            .filter((variant) => variant?.StockDetails?.length > 0)
-                        .forEach(variant => {
+            .forEach((variant) => {
-                            const stocks = variant.StockDetails.map(stock => ({
+              const stocks = variant.StockDetails.map((stock) => ({
                 ...stock,
                 ProdName:
                   product?.ProdName +
-                                    (
+                  (product?.Size && product?.UomName
-                                        product?.Size && product?.UomName
                     ? ` (${product.Size} ${product.UomName})`
                     : product?.Size
                       ? ` (${product.Size})`
-                                                : ''
+                      : '') +
-                                    ) +
+                  (product?.BrandName ? ` - (${product.BrandName})` : '') +
-                                    (
+                  (variant?.ProdVariantName
-                                        product?.BrandName
-                                            ? ` - (${product.BrandName})`
-                                            : ''
-                                    ) +
-                                    (
-                                        variant?.ProdVariantName
                     ? ` (${variant.ProdVariantName})`
-                                            : ''
+                    : ''),
-                                    ),
                 UomName: product?.UomName,
                 BrandName: product?.BrandName,
                 Size: product?.Size,
@@ -253,27 +271,26 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
               }));
 
               stockDtls.push(
-                                ...stocks.filter(stock =>
+                ...stocks.filter((stock) =>
-                                    stock?.StockAvailable === 'Y'
+                  stock?.StockAvailable === 'Y' ? stock?.BatchRef : true
-                                        ? stock?.BatchRef
-                                        : true
                 )
               );
             });
         });
       });
 
-            console.log("extractStockDtls", stockDtls);
+      console.log('extractStockDtls', stockDtls);
       return stockDtls;
-        }
+    };
-        setTableData(extractStockDtls(priceChangeProduct || cardData))
+    setTableData(extractStockDtls(priceChangeProduct || cardData));
-        setCurrentPage(1)
+    setCurrentPage(1);
-    }, [cardData, priceChangeProduct])
+  }, [cardData, priceChangeProduct]);
 
   const handleNewMRPChange = (value, localId) => {
-
     const updatedTableData = [...tableData];
-        const index = updatedTableData.findIndex(item => item?.localId === localId);
+    const index = updatedTableData.findIndex(
+      (item) => item?.localId === localId
+    );
     updatedTableData[index].NewMRP = value;
     setTableData(updatedTableData);
     updatedTableData[index].NewSellPrice = null;
@@ -283,7 +300,9 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
     });
 
     const priceChangedProdList = [...priceChangedProducts];
-        const prodIndex = priceChangedProdList?.findIndex(prod => prod?.InwardDtlId === updatedTableData[index]?.InwardDtlId);
+    const prodIndex = priceChangedProdList?.findIndex(
+      (prod) => prod?.InwardDtlId === updatedTableData[index]?.InwardDtlId
+    );
     if (prodIndex !== -1) {
       priceChangedProdList[prodIndex] = {
         ...priceChangedProdList?.[prodIndex],
@@ -292,10 +311,10 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
       };
     }
     setPriceChangedProducts(priceChangedProdList);
-    }
+  };
 
   const handleNewSellPriceChange = (value, localId) => {
-        const index = tableData.findIndex(item => item?.localId === localId);
+    const index = tableData.findIndex((item) => item?.localId === localId);
     const updatedTableData = [...tableData];
     if (updatedTableData[index]?.NewMRP) {
       if (parseFloat(value) > parseFloat(updatedTableData[index]?.NewMRP)) {
@@ -307,7 +326,9 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
         updatedTableData[index].NewSellPrice = null;
         setTableData(updatedTableData);
         const priceChangedProdList = [...priceChangedProducts];
-                const prodIndex = priceChangedProdList?.findIndex(prod => prod?.InwardDtlId === updatedTableData[index]?.InwardDtlId);
+        const prodIndex = priceChangedProdList?.findIndex(
+          (prod) => prod?.InwardDtlId === updatedTableData[index]?.InwardDtlId
+        );
 
         if (prodIndex !== -1) {
           priceChangedProdList.splice(prodIndex, 1);
@@ -326,7 +347,9 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
         updatedTableData[index].NewSellPrice = null;
         setTableData(updatedTableData);
         const priceChangedProdList = [...priceChangedProducts];
-                const prodIndex = priceChangedProdList?.findIndex(prod => prod?.InwardDtlId === updatedTableData[index]?.InwardDtlId);
+        const prodIndex = priceChangedProdList?.findIndex(
+          (prod) => prod?.InwardDtlId === updatedTableData[index]?.InwardDtlId
+        );
 
         if (prodIndex !== -1) {
           priceChangedProdList.splice(prodIndex, 1);
@@ -342,41 +365,47 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
     });
 
     const priceChangedProdList = [...priceChangedProducts];
-        const prodIndex = priceChangedProdList?.findIndex(prod => prod?.InwardDtlId === updatedTableData[index]?.InwardDtlId);
+    const prodIndex = priceChangedProdList?.findIndex(
+      (prod) => prod?.InwardDtlId === updatedTableData[index]?.InwardDtlId
+    );
 
     if (prodIndex !== -1) {
       priceChangedProdList[prodIndex] = {
         ...priceChangedProdList[prodIndex],
-                SellPrice: String(value)
+        SellPrice: String(value),
       };
     } else {
       priceChangedProdList.push({
         ProdId: updatedTableData[index]?.ProdId,
         ProdName: updatedTableData[index]?.ProdName,
-                MRP: String(updatedTableData[index]?.NewMRP || updatedTableData[index]?.MRP),
+        MRP: String(
+          updatedTableData[index]?.NewMRP || updatedTableData[index]?.MRP
+        ),
         SellPrice: String(value),
-                AdjComment: "string",
+        AdjComment: 'string',
-                InwardDtlId: updatedTableData[index]?.InwardDtlId
+        InwardDtlId: updatedTableData[index]?.InwardDtlId,
       });
     }
 
     setPriceChangedProducts(priceChangedProdList);
-    }
+  };
 
   const edit = (record, index) => {
-        console.log("edit", record, index);
+    console.log('edit', record, index);
     setEditingKey(index);
-    }
+  };
 
   const handleSubmit = async () => {
-        console.log("submit");
+    console.log('submit');
 
     if (priceChangedProducts?.length > 0) {
-            console.log("priceChangedProducts", priceChangedProducts);
+      console.log('priceChangedProducts', priceChangedProducts);
       const validation = priceChangedProducts?.every((prod) => {
         if (parseFloat(prod?.MRP) < parseFloat(prod?.SellPrice)) {
           setMessageType('error');
-                    setMessageData(`${prod?.ProdName}: MRP cannot be less than Sell Price`);
+          setMessageData(
+            `${prod?.ProdName}: MRP cannot be less than Sell Price`
+          );
           return false;
         }
         if (!parseFloat(prod?.SellPrice) || !parseFloat(prod?.MRP)) {
@@ -394,7 +423,7 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
         BranchId: BranchId,
         ProductDetails: priceChangedProducts,
         UpdatedBy: UserId,
-            }
+      };
 
       const res = await dispatch(PutStockPrice(data))?.unwrap();
       if (res?.data?.statusCode === 1) {
@@ -405,42 +434,52 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
         setEditingKey(null);
         setPriceChangedProducts([]);
         setTableData([]);
-                dispatch(triggerProductCard())
+        dispatch(triggerProductCard());
         setPriceChangeProduct(null);
         formRef.current.resetFields();
       } else {
-                setMessageData('Error Updating Product Price')
+        setMessageData('Error Updating Product Price');
         setMessageType('error');
       }
     } else {
       setMessageType('error');
       setMessageData('No changes made / No sell price entered');
     }
-
+  };
-    }
 
   const onComplete = useCallback(() => {
     setMessageData(null);
     setMessageType(null);
-    }, [])
+  }, []);
 
   return (
     <>
-
+      <Messages
-            <Messages messageData={messageData} messageType={messageType} onComplete={onComplete} />
+        messageData={messageData}
-            {showButton ? <Tooltip title="Price Change">
+        messageType={messageType}
-                <button className="price-change-btn" type="button" onClick={() => {
+        onComplete={onComplete}
+      />
+      {showButton ? (
+        <Tooltip title="Price Change">
+          <button
+            className="price-change-btn"
+            type="button"
+            onClick={() => {
               if (comboSearch) {
                 setMessageType('warning');
                 setMessageData('Price change will not work for combo products');
-                        return
+                return;
               }
-                    setPriceChangeModal(true)
+              setPriceChangeModal(true);
-                }}>
+            }}
+          >
             {/* <FaIndianRupeeSign size={35}/> */}
             <img src={PriceChange} alt="" width={30} />
           </button>
-            </Tooltip> : <></>}
+        </Tooltip>
+      ) : (
+        <></>
+      )}
       <DefaultModal
         title="Price Change"
         className={'price-change-modal'}
@@ -463,28 +502,39 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
           <Form ref={formRef}>
             <Tables
               columns={priceChangeColumns}
-                            data={tableData?.slice((currentPage - 1) * pageSize, currentPage * pageSize)}
+              data={tableData?.slice(
+                (currentPage - 1) * pageSize,
+                currentPage * pageSize
+              )}
               onRow={(record, index) => ({
                 onClick: () => {
                   edit(record, index);
                 },
               })}
             />
-                        <div style={{ display: 'flex', justifyContent: 'center', margin: '20px 0' }}>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                margin: '20px 0',
+              }}
+            >
               <Pagination
                 current={currentPage}
                 pageSize={pageSize}
                 total={tableData?.length}
                 onChange={(page) => setCurrentPage(page)}
                 showSizeChanger={false}
-                                showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
+                showTotal={(total, range) =>
+                  `${range[0]}-${range[1]} of ${total} items`
+                }
               />
             </div>
           </Form>
         </div>
       </DefaultModal>
     </>
-    )
+  );
-}
+};
 
 export default ProductPriceChange;

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

@@ -63,6 +63,7 @@ import TooltipWrapper from '../../../../Components/Tooltip/Tooltip.jsx';
 import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
 import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
 import SAdminUserNotification from '../../Components/BookingFunctionality/SAdminUserNotification.jsx';
+import CardSkeleton from '../../../../Components/Skeleton/CardSkeleton.jsx';
 // Jsx Files
 const BSKioskCounterPayment = lazy(
   () => import('../../Components/UtillComponents/BSKioskCounterPayment.jsx')
@@ -320,7 +321,7 @@ const BSLayout1 = () => {
   };
   // BSLayout1Data?.BookingNavbar?.[1]?.some((item) => item?.OptionName === "AddCustomer")
   return (
-    <Suspense fallback={<div>Loading…</div>}>
+    <Suspense fallback={<CardSkeleton />}>
       {' '}
       <>
         <Messages

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

@@ -111,6 +111,7 @@ const SalesCountForStandard = lazy(
 );
 import BsBookingitemCard from '../../Components/BSItemCards/BsBookingitemCard.jsx';
 import LayoutSubCategoryFetcher from '../../LayoutSubCategoryFetcher.jsx';
+import NavbarSkeleton from '../../../../Components/Skeleton/NavbarSkeleton.jsx';
 const ListOfSalesInvoices = lazy(
   () =>
     import('../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx')
@@ -339,7 +340,7 @@ const BSLayout2 = () => {
           (AppExpDate?.RemainingDays <= 7 ||
             AppExpDate === 'undefined' ||
             AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
-            <Suspense fallback={<div>Loading...</div>}>
+            <Suspense fallback={<NavbarSkeleton />}>
               <PlanExpireNotification />
             </Suspense>
           )}
@@ -347,13 +348,12 @@ const BSLayout2 = () => {
           className="BSLayout2-Master"
           style={{ height: containerHeight, overflow: 'hidden' }}
         >
-          <Suspense fallback={<div>Loading...</div>}>
           <div className="BSLayout2-NavBar">
             {BookingNavbar == 'Navbar1' && <BSNavbar1 />}
             {BookingNavbar == 'Navbar2' && <BSNavbar2 />}
             {BookingNavbar == 'Navbar3' && <BSNavbar3 />}
           </div>
-          </Suspense>
+
           <div
             // className="BSLayout2"
             className={

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

@@ -109,6 +109,7 @@ const BSNavbar1 = lazy(() => import('../../Components/BSNavbar/BSNavbar1'));
 const BSNavbar2 = lazy(() => import('../../Components/BSNavbar/BSNavbar2'));
 // Scss
 import '../../../../Styles/BookingScreen/Template/BSLayout3/BSLayout3.scss';
+import CardSkeleton from '../../../../Components/Skeleton/CardSkeleton.jsx';
 
 const subDirectory = import.meta.env.BASE_URL;
 const commonDirectory = import.meta.env.COMMON_BASE_URL;
@@ -301,7 +302,7 @@ const BSLayout3 = () => {
     setListOfInvoices(false);
   };
   return (
-    <Suspense fallback={<div>Suspense Loading...</div>}>
+    <Suspense fallback={<CardSkeleton />}>
       <>
         <Messages
           messageType={messageType}

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

@@ -130,6 +130,7 @@ const ComboSalesBillTable = lazy(
 import PlanExpireNotification from '../PlanExpireNotification.jsx';
 // Scss
 import '../../../../Styles/BookingScreen/Template/BSLayout4/BSLayout4.scss';
+import CardSkeleton from '../../../../Components/Skeleton/CardSkeleton.jsx';
 
 const subDirectory = import.meta.env.BASE_URL;
 const commonDirectory = import.meta.env.COMMON_BASE_URL;
@@ -317,7 +318,7 @@ const BSLayout4 = () => {
     setBookingModalOpen(false);
   };
   return (
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense fallback={<CardSkeleton />}>
       <>
         <Messages
           messageType={messageType}

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

@@ -1,4 +1,4 @@
-import {lazy,useCallback, useEffect, useState } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { isMobile } from 'react-device-detect';
 import moment from 'moment';
@@ -105,6 +105,7 @@ import { CiShop } from 'react-icons/ci';
 import BranchName from '../BranchName.jsx';
 import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';
 import PlanExpireNotification from '../PlanExpireNotification.jsx';
+import CardSkeleton from '../../../../Components/Skeleton/CardSkeleton.jsx';
 const subDirectory = import.meta.env.BASE_URL;
 const commonDirectory = import.meta.env.COMMON_BASE_URL;
 
@@ -154,12 +155,14 @@ const BSLayout5 = () => {
   const animations = ['example1', 'example2', 'example3'];
   let ss = animations[count];
   let containerHeight = isMobile
-    ? AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+    ? AppExpDate?.RemainingDays <= 7 ||
+      AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '580px'
       : '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);
@@ -234,7 +237,6 @@ const BSLayout5 = () => {
     };
   }, []);
 
- 
   const openModalKiosk = () => {
     setKioskopen(true);
   };
@@ -304,6 +306,7 @@ const BSLayout5 = () => {
     setBookingModalOpen(false);
   };
   return (
+    <Suspense fallback={<CardSkeleton />}>
       <>
         <Messages
           messageType={messageType}
@@ -312,7 +315,9 @@ const BSLayout5 = () => {
         />
         {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
@@ -513,7 +518,10 @@ const BSLayout5 = () => {
               </div> */}
               </div>
 
-            <div className="BSCategory5-Contentcont" style={{ width: '100vw' }}>
+              <div
+                className="BSCategory5-Contentcont"
+                style={{ width: '100vw' }}
+              >
                 <div
                   style={{
                     backgroundColor:
@@ -595,6 +603,7 @@ const BSLayout5 = () => {
           />
         )}
       </>
+    </Suspense>
   );
 };
 

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

@@ -117,6 +117,7 @@ import SalesCountForStandard from '../SalesCountForStandard.jsx';
 import StandardTable from '../../Components/BSBillingTables/StandardTable/StandardTable.jsx';
 import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';
 import PlanExpireNotification from '../PlanExpireNotification.jsx';
+import CardSkeleton from '../../../../Components/Skeleton/CardSkeleton.jsx';
 const BSLayout6 = () => {
   const dispatch = useDispatch();
   const { action, selectedProducts } = useSelector(
@@ -314,7 +315,7 @@ const BSLayout6 = () => {
     setBookingModalOpen(false);
   };
   return (
-    <Suspense fallback={<div>Loading components...</div>}>
+    <Suspense fallback={<CardSkeleton />}>
       <>
         <Messages
           messageType={messageType}

src/Pages/BookingScreen/Template/BranchName.jsx

@@ -77,7 +77,7 @@ const BranchName = ({ IconStatus }) => {
           display: 'flex',
           alignItems: 'center',
           gap: '10px',
-          width: '180px',
+          width: '160px',
         }}
       >
         Loading...
@@ -96,7 +96,7 @@ const BranchName = ({ IconStatus }) => {
               alignItems: 'center',
               gap: '10px',
               cursor: 'pointer',
-              width: '180px',
+              width: '160px',
             }}
           >
             <span
@@ -121,7 +121,7 @@ const BranchName = ({ IconStatus }) => {
               display: 'flex',
               alignItems: 'center',
               gap: '10px',
-              width: '180px',
+              width: '160px',
             }}
           >
             {!imageLoaded && (

src/Pages/EmpMaster/EmpMasterForm.jsx

@@ -1632,8 +1632,6 @@ const EmployeeForm = ({ formType }) => {
                             length: Math.max(1, imageUrls.length),
                           }).map((_, idx) => (
                             <div key={idx} style={{ marginBottom: 12 }}>
-
-
                               <div style={{ width: 'max-content' }}>
                                 <CropUpload
                                   onlineImage={''}

src/Pages/EmpMaster/EmpMasterList.jsx

@@ -92,7 +92,9 @@ const EmployeeMaster = () => {
     }
     const gettingTableData = await dispatch(getshift(CompId)).unwrap();
     if (gettingTableData?.data?.statusCode === 1) {
-          const activeEmployees = gettingTableData?.data?.data?.filter(emp => emp.ActiveStatus === "A");
+      const activeEmployees = gettingTableData?.data?.data?.filter(
+        (emp) => emp.ActiveStatus === 'A'
+      );
 
       setShiftData(activeEmployees);
     }
@@ -229,7 +231,9 @@ const EmployeeMaster = () => {
           String(record.EmpFirstName)
             ?.toLowerCase()
             ?.includes(value?.toLowerCase()) ||
-          String(record.CompName)?.toLowerCase()?.includes(value?.toLowerCase()) ||
+          String(record.CompName)
+            ?.toLowerCase()
+            ?.includes(value?.toLowerCase()) ||
           String(record.BrName)?.toLowerCase()?.includes(value?.toLowerCase())
         );
       },
@@ -362,7 +366,6 @@ const EmployeeMaster = () => {
         setTimeout(() => {
           navigate(`${subDirectory}setting/shift-master`);
         }, 1000);
-       
       }
     } else {
       setMessageData('Please Add Designation Details');

src/Pages/ExtraCharges/ExtraChargesList.jsx

@@ -31,6 +31,8 @@ import { getAdmin } from '../../Features/ProductPage/ProductPage.js';
 import { useAuth } from '../../AuthContext.jsx';
 import { getPreferenceData } from '../../Features/BookingScreen/BookingData/BookingData.js';
 import Imageupload from '../../Components/Forms/Upload.jsx';
+// src\Styles\OverAllStyle\OverAllStyle.scss
+import '../../Styles/OverAllStyle/OverAllStyle.scss';
 
 const subDirectory = import.meta.env.ENV_BASE_URL;
 const items = [
@@ -453,7 +455,7 @@ function ExtraChargesList() {
     return allowDecimal ? num.toFixed(2) : Math.round(num).toString();
   }
   return (
-    <div className="userPageTable">
+    <div className="userPageTable ClassExtraChargesList">
       <div className="userPageContent">
         <div className="formAddNew">
           <Messages

src/Pages/Kiosk/Components/KioskFooter2.jsx

@@ -37,8 +37,14 @@ const KioskFooter2 = (props) => {
   const [paymentModalOpen, setPaymentModalOpen] = useState(false);
   const getmobilepage = useSelector(GlobalPaymentgatewayRedirect);
   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'
+  )?.PreferenceCatDetails;
+  const dinePreference = bookingTypePreference?.find(
+    (type) =>
+      type?.PreferredSubCatName?.toLowerCase() === 'dine in' &&
+      type?.PreferredStatus === 'Y'
+  );
 
   const clicked = useSelector(GlobalOrderbtnClicked);
   const kioskTemplateData = props?.data;
@@ -111,7 +117,7 @@ const KioskFooter2 = (props) => {
       <div className="KioskFooter2-price-container" style={{ flexGrow: '1' }}>
         <div>
           <div className="KioskFooter2-Dinein">
-            {(KioskCurrentPage !== 'OrderView'  && dinePreference) && (
+            {KioskCurrentPage !== 'OrderView' && dinePreference && (
               <div
                 style={{
                   display: 'flex',

src/Pages/openingStock/openingStockForm.scss

@@ -286,10 +286,6 @@
         display: flex;
     }
 
-    // .formHeader {
-    //   width: -webkit-fill-available;
-    // }
-
     .header-buttons {
         display: flex;
         align-items: center;
@@ -299,3 +295,7 @@
         gap: 10px;
     }
 }
+
+.purchase-entry-form {
+    width: 100%;
+}

src/Styles/AppPage/AppPage.scss

@@ -42,7 +42,6 @@
   background-color: #fff;
   .ant-breadcrumb ol {
     justify-content: center;
-    // align-items: center;
   }
 
   .ant-breadcrumb-link a {
@@ -57,7 +56,6 @@
   display: flex;
   justify-content: flex-start;
   flex-direction: row;
-  // height: 90vh;
   height: 100%;
   overflow: auto;
   width: 98%;
@@ -67,7 +65,6 @@
   display: flex;
   justify-content: flex-start;
   flex-direction: row;
-  // height: 90vh;
   height: 100%;
   overflow: auto;
   margin: 0 16px;
@@ -83,17 +80,14 @@
 .userPage {
   height: 100%;
   width: 100%;
-  // padding: 1vw max(10px, 1.2vw);
   overflow: auto;
 }
 
 .userPageContent {
-  // height: 100%;
   height: auto;
   width: 100%;
   padding-bottom: 3rem;
   background-color: #fff;
-  // padding: 1rem 1rem;
   border-radius: 12px;
 }
 
@@ -169,12 +163,10 @@
 
 .formAddNew {
   display: flex;
-  // flex-direction: column;
   flex-direction: row;
   row-gap: 0.5rem;
   gap: 2rem;
   padding-bottom: 4px;
-  // flex-wrap: wrap;
   @media (max-width: 768px) {
     flex-wrap: wrap;
     gap: 1rem;
@@ -209,14 +201,11 @@
 .userPageTable {
   height: 100%;
   width: 100%;
-  // padding-left: var(--TABLE_PAGE_PADDING);
   overflow: auto;
   padding-bottom: 4rem;
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* Internet Explorer 10+ */
 
-  // padding-bottom: 10rem;
-
   @media (max-width: 500px) {
     padding-left: 0;
     height: 90%;
@@ -227,18 +216,17 @@
 
 .searchAddDiv {
   display: flex;
-  // flex-wrap: wrap;
   justify-content: space-between;
   row-gap: 1rem;
   width: 100%;
   @media (max-width: 768px) {
-    flex-wrap: unset !important;
+    flex-wrap: wrap !important;
+    gap: 1rem;
   }
 }
 
 .reportTable {
   overflow: auto;
-  // width: 80vw;
   width: 100%;
   height: 70vh !important;
   scrollbar-width: thin;
@@ -253,7 +241,6 @@
       }
     }
     thead {
-      // background-color: #f1f1f1 !important;
       background-color: #2c88ee !important;
       svg {
         color: #fff;
@@ -266,15 +253,6 @@
         height: 31px !important;
       }
     }
-    // thead,
-    // tr,
-    // td,
-    // th {
-    //   &:hover {
-    //     background: #fff !important;
-    //     background-color: #fff !important;
-    //   }
-    // }
   }
   .ant-table-content {
     .ant-table-thead tr:hover {
@@ -293,7 +271,6 @@
 }
 
 .pageOverAll {
-  // background-color: white;
   width: 100% !important;
   border-radius: 12px;
 }
@@ -352,7 +329,6 @@
 
   @media (max-width: 500px) {
     img {
-      // display: none;
       width: 75px;
       height: 35px;
     }
@@ -370,7 +346,6 @@
   overflow: hidden;
   display: block;
   width: 100%;
-  // background-color: #e9eaeb;
   padding: 6px 0;
   border-radius: 4px;
 }

src/Styles/BookingScreen/Components/BSBillingTables/BSBillingTables3/BSBillingTable3.scss

@@ -12,7 +12,6 @@
 }
 
 .BSBill-Table3 {
-  // width: 36.6vw;
   width: 100%;
 
   border-spacing: 0 0px;
@@ -32,18 +31,6 @@
   align-items: flex-end;
 }
 
-// .BSBill-Table4 th {
-//     padding: 1vh 1vw;
-//     border-spacing: 0;
-//     color: #fff;
-//     text-align: center;
-//     font-family: "Gilroy-Medium";
-//     font-size: 20px;
-//     font-style: normal;
-//     font-weight: 400;
-//     line-height: normal;
-//     position: fixed;
-// }
 .BSBill-Table3-content {
   background-color: rgba(235, 235, 236, 1);
   font-family: "Poppins", sans-serif;
@@ -72,6 +59,7 @@
   background-color: #fff;
   .tooltip .tooltiptext {
     top: 35px !important;
+    height: 100px;
   }
 }
 
@@ -178,10 +166,8 @@
 .Table3-Price-div {
   display: flex;
   width: 100%;
-  // column-gap: 2rem;
   align-items: center;
   justify-content: space-around;
-  //draft by Sri
   flex-direction: row;
 }
 
@@ -190,8 +176,6 @@
   width: 30px;
   font-size: 20px;
   cursor: pointer;
-  // cursor: pointer;
-  // font-size:30px;
   color: var(--SELECTED_COLOR);
 }
 
@@ -200,8 +184,6 @@
   width: 30px;
   font-size: 20px;
   cursor: pointer;
-  // cursor: pointer;
-  // font-size:30px;
   color: var(--SELECTED_COLOR);
   pointer-events: none;
 }
@@ -219,13 +201,6 @@
   line-height: 50px;
 }
 
-// .arrow {
-//     background-color: #6df38b;
-//     border-radius: 50%;
-//     width: 35px;
-//     height: 35px;
-// }
-
 .BSBill3-items {
   color: var(--SELECTED_COLOR);
   text-align: right;
@@ -242,7 +217,6 @@
 
 .icon-button3 {
   height: 30px;
-  // width: 30px;
   border-radius: 30px;
   padding: 0px;
   margin: 6px 6px;
@@ -255,14 +229,6 @@
   height: fit-content;
 }
 
-// .Table4-fullrate {
-//     display: flex;
-//     justify-content: space-evenly;
-// }
-// .Table4-tbody {
-//     display: block;
-//     height: 500px;
-// }
 .BSBilling3-view-summary {
   display: flex;
   width: 100%;
@@ -294,7 +260,6 @@
   align-items: right;
   text-align: left;
   font-weight: 600;
-  // padding: 0rem 1rem;
 }
 
 .Table3-item-price {
@@ -314,7 +279,6 @@
 }
 
 .customerBSBilling3- {
-  // width: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -334,14 +298,6 @@
   font-family: "Poppins";
 }
 
-// .table3body {
-//     height: 20vh;
-//     overflow: auto;
-// }
-// .BSBilling3-tablediv{
-//     height: 40vh;
-//     overflow: auto;
-// }
 .BSC1-Master .BSBilling3-tablediv {
   height: 99%;
   overflow: auto;
@@ -390,8 +346,6 @@
   text-transform: uppercase;
   display: inline-block;
   position: relative;
-  // -webkit-mask-image: linear-gradient(-75deg, rgba(41, 41, 41, 0.6) 30%, #c9c9c9 50%, rgba(255, 255, 255, 0.6) 70%);
-  // -webkit-mask-size: 200%;
   animation: shine 0.5s linear infinite;
 }
 
@@ -410,11 +364,9 @@
   display: flex;
   justify-content: space-around;
   flex-direction: column;
-  // position:fixed;
   bottom: 0;
   width: inherit;
   z-index: 1;
-  // height: 130px;
 }
 
 .BSTable3_hold {
@@ -455,7 +407,6 @@
 }
 
 .BS3hold-sum {
-  // font-size: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -505,7 +456,6 @@
   height: 50px;
   justify-content: space-evenly;
   background-color: var(--SELECTED_COLOR);
-  // border: #545454 solid 1px;
   border: none !important;
   color: rgb(255, 255, 255);
   align-items: center;
@@ -591,10 +541,8 @@
 .CustomerAddSrch {
   display: flex;
   align-items: center;
-  // transform: scale(1);
   flex-direction: row;
   column-gap: 0.5rem;
-  // background-color: #f1ff9f;
 }
 
 .shine {
@@ -606,7 +554,6 @@
   color: #fff;
   background: linear-gradient(to right, #4d4d4d 0, #fff 10%, #4d4d4d 20%);
   background-position: 0;
-  // -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: shine 3s infinite linear;
   animation-fill-mode: forwards;
@@ -694,7 +641,6 @@
   transform: translateY(-50%);
   border: 1px solid #000;
   border-radius: 3px;
-  // border-width: 0 2px 2px 0;
   width: 50px;
   height: 25px;
   align-items: center;
@@ -705,7 +651,6 @@
   padding: 0rem 1rem;
   display: inline-block;
   padding: 2px;
-  // transition: transform 0.3s;
 }
 
 .arrow:hover {
@@ -762,7 +707,6 @@
     left: 0;
     width: inherit;
     z-index: 2;
-    // height: 130px;
   }
 
   .Table3-Price-div-table {
@@ -812,7 +756,6 @@
   }
 
   .BSBill-Table3 {
-    // width: 90vw;
     border-spacing: 0;
   }
 
@@ -838,15 +781,9 @@
   .Table3-vertical-line {
     display: none;
   }
-
-  // .Table3-payment-mode{
-  //     flex-wrap: wrap;
-  // }
   .Table3-Price-div-table {
     display: block;
-    // width: 250px;
     width: 100%;
-    // width: max-content;
     max-height: 23vh;
     height: max-content;
     overflow: auto;
@@ -879,24 +816,12 @@
     flex-direction: row !important;
   }
 
-  // .Table3-Price-summarypop{
-  //     display: none;
-  // }
-
   .Table3-Price-summarypopfullscrn {
     display: flex;
   }
 }
 
 @media (min-width: 280px) and (max-width: 499px) {
-  // .Table3-price {
-  //     display: flex;
-  //     width: 100%;
-  //     flex-direction: column;
-  //     // row-gap: 1rem;
-  //     background-color: transparent;
-  // }
-
   .Cust-tag {
     position: absolute;
     bottom: 129px !important;
@@ -944,9 +869,6 @@
   .Table3-payment-mode {
     padding: 0rem 0.8rem;
     column-gap: 0.5rem;
-    // nk
-    // column-gap:0.5rem;
-    //
   }
 }
 
@@ -958,7 +880,6 @@
 }
 
 .Hover {
-  // color: var(--SELECTED_COLOR);
   height: 35px;
   width: 30px;
   font-size: 20px;
@@ -1055,7 +976,6 @@
   display: flex;
   text-align: center;
   background-color: #52c41a;
-  // height: 40px;
   width: 80px;
   align-items: center;
   border-radius: 5px;
@@ -1069,7 +989,6 @@
   text-align: center;
   align-items: center;
   width: 80px;
-  // background:"#52c41a"
 }
 
 @keyframes blink-animation {
@@ -1098,12 +1017,10 @@
   font-size: 10px;
   font-weight: 500;
   color: black;
-  /* default text color */
   padding: 2px 6px;
   border-radius: 3px;
   display: inline-block;
   width: 100%;
-  /* full width */
   text-align: left;
 }
 
@@ -1119,6 +1036,5 @@
 
   50% {
     color: #fff9c4;
-    /* soft yellow/cream blink */
   }
 }

src/Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss

@@ -1,7 +1,6 @@
 .BSBillingNavBar1 {
   display: flex;
   align-items: center;
-  // width: 100%;
   width: 100vw;
   height: 40px;
   background-color: #ffffff;
@@ -29,14 +28,6 @@
   }
 }
 
-// .BSBillingNav1div2 {
-//   display: flex;
-//   justify-content: space-evenly;
-//   align-items: center;
-//   width: 100%;
-//   color: var(--DEFAULT_SELECTED_COLOR);
-// }
-
 .BSBillingNavBar1-SearchBar {
   display: flex;
   font-family: "Gilroy";
@@ -45,6 +36,8 @@
   color: #212529 !important;
   font-size: 1.1rem;
   text-wrap: nowrap;
+  width: 95px;
+  align-items: center;
 }
 
 .vl {
@@ -72,10 +65,6 @@
   color: var(--DEFAULT_SELECTED_COLOR);
   justify-content: space-around;
 
-  // >div {
-  //   width: 25px !important;
-  //   height: 35px !important;
-  // }
   .bs-membership__icon-btn {
     svg {
       color: #fbbf24;
@@ -86,24 +75,11 @@
 .BSBillingnav1-threedots {
   display: none;
   cursor: pointer;
-  //nk
   width: 1.7rem;
-  //
   margin-right: 1rem;
   color: var(--DEFAULT_SELECTED_COLOR);
 }
 
-// .BSNavBar1-Accmenu {
-//   position: absolute;
-//   right: 0rem;
-//   width: 160px;
-//   top: 2rem;
-//   height: 80px;
-//   color: black;
-//   display: flex;
-//   justify-content: center;
-//   background-color: #f3f3f3;
-// }
 .BSBillingNavBar1-smallscreen-Inputsearch-container {
   display: none;
   align-items: center;
@@ -171,10 +147,6 @@
     }
   }
 
-  // .custom-input {
-  //   width: 53vw !important;
-  // }
-
   .BSBillingNavBar1-Inputsearch {
     width: 50vw !important;
     height: 2rem;
@@ -213,7 +185,6 @@
     align-items: center;
     column-gap: 1rem;
     width: 100%;
-    // margin-left: 10px;
   }
 
   .BSNavbar1-timer {
@@ -221,11 +192,6 @@
   }
 }
 
-// .BSBillingNavBar1-AllIcons-column {
-//   display: flex;
-//   flex-direction: column;
-//   row-gap: 1.5rem;
-// }
 .BSBillingNavBar1-AllIcons-column {
   display: flex;
   flex-direction: column;
@@ -322,13 +288,6 @@
   text-wrap: nowrap;
 }
 
-// .BSNavbar1-timer {
-//   width: 9vw;
-//   font-family: 'Gilroy';
-//   font-weight: 600;
-//   color: #212529 !important;
-//   font-size: 2.7vh;
-// }
 .BSBillingNavBar1-logo {
   display: flex;
 }
@@ -343,8 +302,6 @@
 
 .BSBillingNav1div2 .ant-input {
   width: max-content;
-  // height: 2rem;
-  // border-radius: 0;
 }
 
 .BSBillingNavBar1-Inputsearch {
@@ -361,11 +318,6 @@
 
 .BSBillingNavBar1-Inputsearch-container {
   transition: transform 0.5s;
-  //nk
-  // & .custom-input {
-  //   // width: 23vw;
-  //   width: 18vw;
-  // }
 }
 
 .BSBillingnav1-Smallscreen {
@@ -383,7 +335,7 @@
   }
 
   50% {
-    transform: scale(1.2);
+    transform: scale(1.03) !important;
   }
 
   100% {
@@ -433,10 +385,6 @@
     width: 6rem !important;
   }
 
-  // .favItem-SearchBar {
-  //   width: 7.6rem;
-  // }
-
   .AddFavItemList {
     padding: 0 !important;
   }
@@ -444,7 +392,6 @@
 
 @media (max-width: 600px) {
   .AddFavList {
-    // width: 50vw !important;
     padding: 2rem 1rem !important;
   }
 

src/Styles/BookingScreen/Components/BSNavbar/BSNavbar2.scss

@@ -6,8 +6,6 @@
   padding: 0rem 1rem;
   box-shadow: var(--BOX_SHADOW_LEVEL2);
   background-color: #ffffff;
-
-  // background-color: #ffffff;
   .RiVerifiedBadgeFill {
     color: #1292ee !important;
   }
@@ -29,7 +27,6 @@
 .BSBillingNavBar2-SearchBar {
   display: flex;
   height: 32px;
-  // border: 1px solid black;
   border-radius: 50px;
 }
 
@@ -51,21 +48,6 @@
   padding: 8px 16px;
   color: var(--DEFAULT_SELECTED_COLOR);
 }
-
-// .BSBillingNavBar2-SearchBar {
-//   display: flex;
-
-//   border: 1px solid black;
-//   border-radius: 5px;
-// }
-
-// .BSBillingNav2-search-icon {
-//   display: flex;
-//   align-items: center;
-//   border: 1px solid black;
-//   border-radius: 5px;
-//   padding: 1px;
-// }
 .BSBillingNav2-toggle-icon {
   padding-left: 5px;
   font-size: 25px;
@@ -79,7 +61,6 @@
 .BSBillingNavBar2-AllIcons {
   display: flex;
   color: var(--DEFAULT_SELECTED_COLOR);
-  // column-gap: 1.5rem;
 }
 
 .BSBillingnav2-threedots {
@@ -92,7 +73,6 @@
   position: absolute;
   width: 33vw;
   top: 0;
-  // height: 90vh;
   height: 100vh;
   background-color: white;
   right: 2px;
@@ -114,10 +94,6 @@
 }
 
 .favsbmtbtn {
-  // position: fixed;
-  // bottom: 40px;
-  // right: 12px;
-  // vicky
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
@@ -131,7 +107,6 @@
   width: 100%;
   height: 40px;
   background-color: #fcfcfc;
-  // background-color: #fafafa;
   justify-content: space-between;
   border-radius: 6px;
   align-items: center;
@@ -172,7 +147,7 @@
   gap: 6px;
   flex-direction: column;
   padding: 10px 1rem;
-  font-family: 'Poppins';
+  font-family: "Poppins";
 
   > div {
     width: 100%;
@@ -216,10 +191,6 @@
 }
 
 @media (max-width: 499px) {
-  // .AddFavList .primary_Button {
-  //   width: 6rem !important;
-  // }
-
   .favItem-SearchBar {
     width: 7.6rem;
   }
@@ -232,7 +203,6 @@
     top: 17rem;
     width: 100vw !important;
     padding: 1rem 1rem !important;
-    // height: 100% !important;
   }
 
   .smallScreenclose {
@@ -252,8 +222,6 @@
   .fav-close {
     display: flex;
     justify-content: flex-end;
-    /* background-color: #ff4d4f; */
-    /* color: #080808; */
     border: none;
     border-radius: 5px;
     cursor: pointer;
@@ -323,7 +291,6 @@
 }
 
 .BSBillingNav2div2 .EstimateButton {
-  // margin: 0 5px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -404,7 +371,6 @@
   top: 10px;
 }
 
-
 .MultiSearchIconDiv2 {
   background-color: #1292ee;
   color: #ffffff !important;
@@ -417,7 +383,6 @@
   height: 32px;
   padding: 4px;
 
-
   svg {
     font-size: 22px;
     width: 32px !important;

src/Styles/BookingScreen/Components/SelectionComponent/SelectionComponent.scss

@@ -1,7 +1,6 @@
 .Selection-Component-Heading {
   color: #161a1e;
-  //   text-align: center;
+  font-family: "Gilroy-SemiBold";
-  font-family: Gilroy-SemiBold;
   font-size: 33px;
   font-style: normal;
   font-weight: 400;
@@ -10,7 +9,7 @@
 
 .Selection-Component-SubHeading {
   color: #4d4d4d;
-  font-family: Manrope;
+  font-family: "Poppins";
   font-size: 12px;
   font-style: normal;
   font-weight: 400;
@@ -20,10 +19,10 @@
 
 .Selection-Component-selectheading {
   color: #000;
-  font-family: Manrope;
+  font-family: "Poppins";
   font-size: 14px;
   font-style: normal;
-  font-weight: 600;
+  font-weight: 500;
   line-height: normal;
   display: flex;
   align-items: center;
@@ -127,17 +126,6 @@
   }
 }
 
-//
-
-// .Selection-Component-OverallDiv{
-//   padding:2rem 0 0 2rem;
-//   width:100%;
-// }
-
-// .ant-modal .ant-modal-footer .ant-btn+.ant-btn:not(.ant-dropdown-trigger){
-//   display: none
-// }
-
 .colorBtn {
   background-color: var(--PRIMARY_BUTTON_BG_COLOR);
   color: rgb(255, 255, 255);
@@ -150,10 +138,6 @@
   margin-top: 18px;
 }
 
-// .ant-btn-default{
-//   display: none;
-// }
-
 .Selection-Component-InputDiv {
   display: flex;
   flex-direction: row;
@@ -165,6 +149,7 @@
   background-color: #f2f9fd;
   transition: all 0.2s;
   margin-top: 12px;
+  font-family: "Poppins";
 
   & .ant-form-item {
     margin-bottom: 0px !important;
@@ -181,7 +166,11 @@
 .Selection-Component-selectContainerDiv {
   display: flex;
   flex-direction: column;
-  // row-gap: 2rem;
+  .ant-checkbox-label {
+    font-family: "Poppins";
+    font-weight: 400;
+    font-size: 12px;
+  }
 }
 
 .Selection-Component-SubDivContainer {
@@ -391,7 +380,6 @@
 
   > div {
     cursor: pointer;
-    // border-bottom: 1px solid #1292ee;
     color: #1292ee;
     margin: 4px 10px 4px 4px;
   }
@@ -404,7 +392,6 @@
     cursor: pointer;
     color: #ff0000;
     margin: 6px 10px 6px 4px;
-    // background-color: #ff00002b;
     border-radius: 4px;
     padding: 1px 6px;
     display: inline-flex;
@@ -423,10 +410,8 @@
 
   > div {
     cursor: pointer;
-    //border-bottom: 1px solid #1292ee;
     color: rgb(0, 126, 28);
     margin: 6px 10px 6px 4px;
-    // background-color: rgba(0, 126, 27, 0.181);
     padding: 1px 6px;
     border-radius: 4px;
     display: inline-flex;
@@ -489,7 +474,6 @@
 
 .addNewSalesFiledBTN {
   background-color: #2563eb;
-  // background-color: #1292ee;
   color: #fff !important;
   width: max-content;
   height: max-content;

src/Styles/BookingScreen/Template/BSLayout2/BSLayout2.scss

@@ -373,11 +373,12 @@ body {
   @media (max-width: 768px) {
     display: none;
   }
+  
   div {
     gap: 4px;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
   }
 }
 

src/Styles/DashBoard/RetailDashBoard.scss

@@ -1577,6 +1577,7 @@
   max-height: 14vh;
   overflow: scroll;
   border: 1px solid #eeeeee;
+  scrollbar-width: thin;
 }
 
 .notificationCenterTitle {

src/Styles/Employee/EmpMaster.scss

@@ -9,11 +9,8 @@
 
 .MapDiv {
   position: relative;
-  //srinath
   height: 100%;
-  // height: 55%;
   flex-grow: 1;
-  // width: var(--INPUT_FIELD_WIDTH);
   overflow: hidden;
   border: none;
 }
@@ -170,3 +167,10 @@
   display: flex;
   justify-content: flex-end;
 }
+@media (max-width: 768px) {
+  .ClassEmployeeMaster {
+    .searchAddDiv {
+      flex-wrap: wrap !important;
+    }
+  }
+}

src/Styles/OverAllStyle/OverAllStyle.scss

@@ -215,10 +215,6 @@
   }
 
   .address-type-section {
-    // padding: 12px;
-    // background-color: #f8fafc;
-    // border-radius: 8px;
-    // border: 1px solid #e2e8f0;
     .ant-checkbox-inner {
       height: 14px;
       width: 14px;
@@ -259,28 +255,6 @@
       border-radius: 4px;
       line-height: 1.3;
 
-      // &.address1 {
-      //   border-left: 2px solid #d0c8ff;
-      // }
-      // &.address2 {
-      //   border-left: 2px solid #d0c8ff;
-      // }
-      // &.zip {
-      //   border-left: 2px solid #d0c8ff;
-      // }
-      // &.city {
-      //   border-left: 2px solid #d0c8ff;
-      // }
-      // &.district {
-      //   border-left: 2px solid #d0c8ff;
-      // }
-      // &.state {
-      //   border-left: 2px solid #d0c8ff;
-      // }
-      // &.coordinates {
-      //   border-left: 2px solid #d0c8ff;
-      // }
-
       .labelCoordinates {
         font-size: 10px;
         color: #3b424d;
@@ -339,7 +313,6 @@
   .commonMaster-btn {
     .tertiary_Button {
       width: 40vw !important;
-      // font-size: 11px;
     }
 
     .primary_Button {
@@ -350,7 +323,6 @@
     .productMaster-input .primary_Button {
       width: 33.33vw !important;
       font-size: 13px;
-      // background-color: #f1c40f !important;
     }
 
     .subRowFlex {
@@ -367,9 +339,6 @@
 
   .searchAddDiv {
     font-size: 11px;
-    // .primary_Button {
-    //   // width: 76.39vw !important;
-    // }
 
     .searchDiv {
       width: 76.39vw !important;
@@ -381,12 +350,8 @@
   }
 
   .subinputForm {
-    // width: 100%;
     display: flex;
     flex-direction: row !important;
-    // gap: 1rem;
-    // align-items: center;
-    // justify-content: flex-start;
   }
 
   .Counter-Category-mapping {
@@ -413,7 +378,6 @@
   }
 
   .commonMaster-btn {
-    // flex-direction: column;
     flex-wrap: wrap;
     height: unset !important;
 
@@ -1072,7 +1036,6 @@ table {
   height: 15mm;
   text-align: center;
   font-size: 6px;
-  //border:1px solid black;
   font-weight: bold;
   background-color: #fff;
   display: flex;
@@ -1331,10 +1294,6 @@ table {
     }
   }
 
-  // .OverAllSticker8 {
-  //   height: 149mm;
-  // }
-
   .Sticker8 {
     display: flex;
     justify-content: space-between;
@@ -1610,7 +1569,6 @@ table {
   width: 100%;
 }
 
-
 // Sree
 .component-table-purchae {
   display: flex;
@@ -1645,7 +1603,6 @@ table {
   background-color: #fafafa;
 }
 
-
 .userPageContent {
   .wspreorder-input1 {
     display: flex;
@@ -1669,3 +1626,11 @@ table {
     }
   }
 }
+
+@media (max-width: 768px) {
+  .ClassExtraChargesList {
+    .searchAddDiv {
+      flex-wrap: wrap !important;
+    }
+  }
+}