Navbar component Reduce the code using 1 code to show Differences

src/Pages/BookingScreen/Components/BSCombo/BSC1Payment.jsx

@@ -154,7 +154,7 @@ import {
   getDefaultPaymentOptions,
   GlobalAddCustomerDetails,
   triggerCustomerRefresh,
-  VerifiedPaymentDtl
+  VerifiedPaymentDtl,
 } from '../../../../Features/BookingScreen/Customer/addCustomer';
 import PozoHoldIcon from '../UtillComponents/Pozo retail icons/PozoHoldIcon';
 import PozoDineInIcon from '../UtillComponents/Pozo retail icons/PozoDineIn.jsx';
@@ -840,7 +840,7 @@ const BSC1Payment = (props) => {
           ? (Number(withdiscTotal) + Number(globalTipAmount)).toFixed(2)
           : (Number(Total) + Number(globalTipAmount)).toFixed(2)
       );
-console.log(currentOrderNetAmount,totalSum,"currentOrderNetAmount")
+      console.log(currentOrderNetAmount, totalSum, 'currentOrderNetAmount');
       setTotalAmount(
         salesBillEdit
           ? currentOrderNetAmount > previousNetAmount
@@ -876,7 +876,6 @@ console.log(currentOrderNetAmount,totalSum,"currentOrderNetAmount")
     Discount,
   ]);
   useEffect(() => {
-  
     const fetchPrinterMapping = async () => {
       try {
         if (UserType !== 'Super Admin' && isMobile && MobileA4Print) {
@@ -887,14 +886,16 @@ console.log(currentOrderNetAmount,totalSum,"currentOrderNetAmount")
             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);
       }
     };
 
@@ -2241,7 +2242,7 @@ console.log(currentOrderNetAmount,totalSum,"currentOrderNetAmount")
       PackageDtl: a.PackageDtl,
       ...(a?.DiscountValue && { DiscountValue: a.DiscountValue }),
       ...(a?.DiscountType && { DiscountType: a.DiscountType }),
-      ...(a?.DiscountAmt && { DiscountAmt: a.DiscountAmt })
+      ...(a?.DiscountAmt && { DiscountAmt: a.DiscountAmt }),
     }));
     const NotSlectedTypeFind = temporderdetail?.find(
       (a) => a?.BookingType != SelectedBookingType
@@ -3961,8 +3962,6 @@ console.log(currentOrderNetAmount,totalSum,"currentOrderNetAmount")
                         : handlePaymentMode(payment.ModeId, payment.ModeName)
                     }
                   >
-                    {/* {UpiOption === "" && payment?.ModeName?.toLowerCase() === "upi" && <p> UPI</p>} */}
-
                     <div
                       style={{
                         display: 'flex',
@@ -4426,8 +4425,10 @@ console.log(currentOrderNetAmount,totalSum,"currentOrderNetAmount")
               </>
             )}
             {/* Customer Orders */}
-            {(SelCustId && BSComboData?.BookingBilling?.[1]?.filter((item) => item.OptionName === 'PreviousBillFetch')
+            {SelCustId &&
-                .length === 1) && (
+              BSComboData?.BookingBilling?.[1]?.filter(
+                (item) => item.OptionName === 'PreviousBillFetch'
+              ).length === 1 && (
                 <Tooltip title="Customer Orders" isMobile={isMobile}>
                   {' '}
                   <div

src/Pages/BookingScreen/Components/BSItemCards/BSItemCard.jsx

@@ -162,6 +162,8 @@ export function SortableCard({ id, children, item }) {
 
 const BSItemCard = (props) => {
   const cardFunction = props?.cardFunctionality;
+  const { connectingState = null, setConnectingState = () => {} } = props;
+  console.log(connectingState?.positionChange, 'positionChange');
   // const applyOffer = useApplyOfferto_CardDetail();
   const preferenceDatas = useSelector(PreferenceData, shallowEqual);
   const { selectedDate } = useDateStore();
@@ -6106,7 +6108,8 @@ const BSItemCard = (props) => {
             }}
             style={{
               position: 'absolute',
-              zIndex: '12',
+              // zIndex: '12',
+              zIndex: connectingState?.positionChange ? '0' : '20',
               top:
                 templateData?.BookingNavbar?.[0] === 'Navbar3' &&
                 templateData?.BookingLayout?.[0] === 'Layout3'

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

@@ -147,7 +147,6 @@ import PozoAddCustomerIcon from '../UtillComponents/Pozo retail icons/PozoAddCus
 import CustomerDisplayicon from '../UtillComponents/Pozo retail icons/PozoCustomerDisplayicon.jsx';
 import PozoPaymentFailesIcon from '../UtillComponents/Pozo retail icons/PozoFailedPaymentsIcon.jsx';
 import PozoMenuIcon from '../UtillComponents/Pozo retail icons/PozoMenuIcon.jsx';
-
 import TooltipWrapper from '../../../../Components/Tooltip/Tooltip';
 import { IoMdClose } from 'react-icons/io';
 import { TbSettingsSearch } from 'react-icons/tb';
@@ -157,21 +156,20 @@ import { isMobile } from 'react-device-detect';
 import { DefaultModal } from '../../../../Components/Modal/DefaultModal.jsx';
 import '../../../../Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss';
 import { RiFullscreenExitFill, RiFullscreenFill } from 'react-icons/ri';
-import { useNavbarCommon } from './BSNavBarCommon.js';
+import { LuSearch } from 'react-icons/lu';
 
 const subDirectory = import.meta.env.ENV_BASE_URL;
 const commonUrl = import.meta.env.ENV_COMMON_BASE_URL;
 
-const BSNavbar1 = (props) => {
+const BSNavbar1 = (props, BookingNavbar) => {
-
+  const { connectingState = null, setConnectingState = () => {} } = props;
-  console.log(props?.BookingNavbar,"propspropspropspropspropspropspropsprops")
+  console.log(props?.BookingNavbar, 'propsopsprops');
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const [Navmenu, setNavmenu] = useState(false);
   const [isAccOpen, setAccIsOpen] = useState(false);
   const [formattedDate, setFormattedDate] = useState('');
 
-  // const [FeatureAddonData, setFeatureAddonData] = useState([]);
   const [paymentfeataddon, setpaymentfeataddon] = useState(false);
   const [addcustomer, setAddCustomer] = useState(false);
   const [hold, setHold] = useState(false);
@@ -260,6 +258,27 @@ const BSNavbar1 = (props) => {
     GlobalComboRedirectionToDefaultLayoutForParking
   );
 
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const handleFullscreen = useCallback(async () => {
+    if (!isFullscreen) {
+      try {
+        await document.documentElement.requestFullscreen();
+        setIsFullscreen(true);
+      } catch (error) {
+        console.error('Fullscreen error:', error);
+      }
+    } else {
+      try {
+        if (document.fullscreenElement) {
+          await document.exitFullscreen();
+        }
+        setIsFullscreen(false);
+      } catch (error) {
+        console.error('Exit fullscreen error:', error);
+      }
+    }
+  }, [isFullscreen]);
+
   const divRef = useRef(null);
   const handleClickOutside = (event) => {
     if (divRef.current && !divRef.current.contains(event.target)) {
@@ -267,13 +286,6 @@ const BSNavbar1 = (props) => {
     }
   };
 
-  const {
-    handleFullscreen, 
-    isFullscreen,
-  } = useNavbarCommon();
-
-
-  
   useEffect(() => {
     if (!FeatureAddonData?.FeatureDtls?.length) return;
 
@@ -289,9 +301,6 @@ const BSNavbar1 = (props) => {
   useEffect(() => {
     handleOtherData();
 
-    // if (UserType === "Employee") {
-    //   fetchApi()
-    // }
     document.addEventListener('click', handleClickOutside, true);
     return () => {
       document.removeEventListener('click', handleClickOutside, true);
@@ -386,20 +395,12 @@ const BSNavbar1 = (props) => {
   };
 
   const getFeatureAddonData = async () => {
-    // let featureAddon = await dispatch(
-    //   FeatureAddon({ AppId: AppId, UserId: UserId })
-    // ).unwrap();
-    // if (featureAddon?.data?.statusCode === 1) {
-    //   setFeatureAddonData(featureAddon?.data?.data?.[0]?.FeatAddonHdr?.[0]);
     const hasPaymentFeatures = FeatureAddonData?.FeatureDtls.some(
       (item) =>
         item.FeatureAddonName === 'Payment Gateway' ||
         item.FeatureAddonName === 'Payment Device'
     );
     setpaymentfeataddon(hasPaymentFeatures);
-    // } else {
-    //   setFeatureAddonData([]);
-    // }
   };
 
   const handleOtherData = async (e) => {
@@ -418,6 +419,10 @@ const BSNavbar1 = (props) => {
 
   const NavmenuOpenClose = () => {
     setNavmenu(!Navmenu);
+    setConnectingState((prev) => ({
+      ...prev,
+      positionChange: !prev?.positionChange,
+    }));
   };
   const UserAcc = useCallback(() => {
     setAccIsOpen((prev) => !prev);
@@ -482,7 +487,6 @@ const BSNavbar1 = (props) => {
 
       customerDisplayWindow.onload = () => {
         setTimeout(() => {
-          // Ensure it moves & resizes correctly
           customerDisplayWindow.moveTo(
             targetScreen.left || 0,
             targetScreen.top || 0
@@ -492,14 +496,12 @@ const BSNavbar1 = (props) => {
             targetScreen.height
           );
 
-          // Try fullscreen (Needs user interaction)
           try {
             customerDisplayWindow.document.documentElement.requestFullscreen();
           } catch (err) {
             console.warn('Fullscreen request failed:', err);
           }
 
-          // Send initial data
           customerDisplayWindow.postMessage(initialData, '*');
         }, 500);
       };
@@ -508,19 +510,6 @@ const BSNavbar1 = (props) => {
     }
   };
 
-  // const Combodata = async () => {
-  //   let data = {
-  //     AppId: AppId,
-  //     CompId: CompId,
-  //     BranchId: BranchId,
-  //   };
-
-  //   let Response = await dispatch(Comboget(data)).unwrap();
-  //   if (Response?.data?.statusCode == 1) {
-  //     setComboDropDown(Response?.data?.data);
-  //   }
-  // };
-
   const openPreOrder = async (e) => {
     if (e == 'small-screen') {
       setPreOrderOpen(true);
@@ -529,8 +518,6 @@ const BSNavbar1 = (props) => {
       } else {
         setpreOrderhiseandShow(false);
       }
-
-      // setpreOrderhiseandShow(!preOrderhiseandShow)
     } else {
       setPreOrderOpen((prevState) => !prevState);
       if (preOrderOpen) {
@@ -616,14 +603,13 @@ const BSNavbar1 = (props) => {
 
   return (
     <div
-      className="BSBillingNavBar1"
+      className={
-      style={{
+        props?.BookingNavbar === 'Navbar1'
-        backgroundColor: background,
+          ? 'BSBillingNavBar1'
-        color:
+          : props?.BookingNavbar === 'Navbar2'
-          background == 'white' && '#fff' && '#ffff' && 'rgb(1, 1, 1)'
+            ? 'BSBillingNavBar2'
-            ? 'white'
+            : 'BSBillingNavBar3'
-            : 'black',
+      }
-      }}
     >
       <Popconfirm
         title="Are you sure you want to go home?"
@@ -637,17 +623,11 @@ const BSNavbar1 = (props) => {
             placement="right"
             isMobile={isMobile}
           >
-            <PozoHomeIcon
+            <PozoHomeIcon className={'BSNavbarHomeIcon'} />
-              style={{
-                color: '#1292EE',
-                fontSize: '28px',
-                cursor: 'pointer',
-              }}
-              className="BSBillingNav2-toggle-icon"
-            />
           </TooltipWrapper>
         </div>
       </Popconfirm>
+
       {(addcustomer || hold) && (
         <FeaturesFunctionalities
           handleAddCustomerCancel={handleAddCustomerCancel}
@@ -656,34 +636,39 @@ const BSNavbar1 = (props) => {
           modalOpen={hold}
         />
       )}
-      <div className="BSBillingNav1div2">
+      {/* Store name */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
       <div className="salesStoreName">
         <BranchName />
       </div>
-
+      {/* Parking Other Service */}
+      <div className="OtherServiceParking">
         {OtherServiceStatus && (
-            <div style={{ fontSize: '1.5rem', color: 'rgb(18, 146, 238)' }}>
           <TooltipWrapper title="Other Services" isMobile={isMobile}>
             <div
               onClick={handleotherservices}
-                  className="BSBillingNavBar1-AllIcons"
               style={{
                 width: '1.49rem',
                 margin: '0',
                 pointerEvents: OrderType === 'Failed' ? 'none' : 'auto',
                 cursor: 'pointer',
+                display: 'flex',
               }}
             >
               <FaParking
-                    fill={OtherServicesglobal === true ? '#52C41A' : '#1292EE'}
+                size={24}
+                display={'flex'}
+                className={
+                  OtherServicesglobal === true
+                    ? 'ParkingIconActive'
+                    : 'ParkingIconDea'
+                }
+                // fill={OtherServicesglobal === true ? '#52C41A' : '#1292EE'}
               />
             </div>
           </TooltipWrapper>
-            </div>
         )}
       </div>
-
+      <div className="BSBillingNav1div2">
         <div className="NavbarDivForSearch">
           {/* Multiple search  */}
           <Tooltip title={'Multiple Search'}>
@@ -700,12 +685,13 @@ const BSNavbar1 = (props) => {
                     Comboglobal === false &&
                     !sportsAppPreference && (
                       <div
-                        className="BSBillingNavBar1-Inputsearch-container"
+                        className="BSBillingNavBar1-Inputsearch-container NavbarSearchModified"
                         style={{
                           pointerEvents:
                             OrderType === 'Failed' ? 'none' : 'auto',
                         }}
                       >
+                        <LuSearch className="bothnbavbarIcon" />
                         <BSNavBarSearch nosearch={true} OrderType={OrderType} />
                       </div>
                     )}
@@ -730,9 +716,10 @@ const BSNavbar1 = (props) => {
             )}
           </>
         )}
-        <div className="BSBillingNavBar1-AllIcons">
+        <div className="BsNavbar-IconSections">
           {navbarOptions?.map((item) => (
             <>
+              {/* Reprint */}
               <>
                 {item?.OptionName == 'RePrint' && !OtherServicesglobal && (
                   <TooltipWrapper title="Reprint (Alt+R)" isMobile={isMobile}>
@@ -746,8 +733,18 @@ const BSNavbar1 = (props) => {
                   </TooltipWrapper>
                 )}
               </>
+
               {!OtherServicesglobal && (
                 <>
+                  {item?.OptionName == 'QuickAdd' && (
+                    <div
+                      style={{
+                        pointerEvents: OrderType === 'Failed' ? 'none' : 'auto',
+                      }}
+                    >
+                      <BSNavBarQuickAdd />
+                    </div>
+                  )}
                   {item?.OptionName == 'Hold' &&
                     OrderType != 'Failed' &&
                     OrderType != 'Reorder' &&
@@ -758,15 +755,7 @@ const BSNavbar1 = (props) => {
                         <BSNavBarHand />
                       </div>
                     )}
-                  {item?.OptionName == 'QuickAdd' && (
+
-                    <div
-                      style={{
-                        pointerEvents: OrderType === 'Failed' ? 'none' : 'auto',
-                      }}
-                    >
-                      <BSNavBarQuickAdd />
-                    </div>
-                  )}
                   {item?.OptionName == 'DineIn' &&
                     dinePreference &&
                     PreferenceDatas?.[0]?.['SettingDtlDetails']?.find(
@@ -820,10 +809,10 @@ const BSNavbar1 = (props) => {
                     </div>
                   )}
                   {item?.OptionName == 'AddCustomer' && !preOrderOpen && (
-                    <>
+                    <div className="NavbarCus-Add">
                       <BSCustomerSelect TopName={'navbar-top'} />
                       <BSNavBarAddUser />
-                    </>
+                    </div>
                   )}
                 </>
               )}
@@ -957,19 +946,17 @@ const BSNavbar1 = (props) => {
               )}
             </>
           )}
-        </div>
+          {!isMobile && (
-        {isMobile && (
+            <div className="PrinterSettingMB">
-          <div
-            style={{
-              color: 'rgb(33, 150, 243)',
-            }}
-          >
               <BSMobilePrintSettings />
             </div>
           )}
+        </div>
+
         {!OtherServicesglobal && (
           <>
             <div className="BSNavbar1-time-user">
+              {props?.BookingNavbar !== 'Navbar2' && (
                 <div
                   className="BSBillingNavBar1-SearchBar"
                   style={{ color: '#212529', flexDirection: 'column' }}
@@ -977,9 +964,10 @@ const BSNavbar1 = (props) => {
                   <TimerClock />
                   {formattedDate}
                 </div>
-            </div>
+              )}
-
+              <Tooltip
-            <Tooltip title={isFullscreen ? 'Exit Full Screen' : 'Full Screen'}>
+                title={isFullscreen ? 'Exit Full Screen' : 'Full Screen'}
+              >
                 <div
                   className={
                     isFullscreen
@@ -988,7 +976,11 @@ const BSNavbar1 = (props) => {
                   }
                   onClick={handleFullscreen}
                 >
-                {isFullscreen ? <RiFullscreenExitFill /> : <RiFullscreenFill />}
+                  {isFullscreen ? (
+                    <RiFullscreenExitFill />
+                  ) : (
+                    <RiFullscreenFill />
+                  )}
                 </div>
               </Tooltip>
 
@@ -998,13 +990,6 @@ const BSNavbar1 = (props) => {
                 </div>
               </TooltipWrapper>
 
-            {/* {isMobile && ( */}
-            {/* <div>
-              <BSPrinterSetting />
-            </div> */}
-            {/* )} */}
-
-            {/* Use BSNavBarUserInfo for the account menu */}
               <BSNavBarUserInfo
                 isOpen={isAccOpen}
                 divRef={divRef}
@@ -1015,121 +1000,80 @@ const BSNavbar1 = (props) => {
                 UserRelieveManager={<UserRelieveManager />}
                 Logout={Logout}
               />
+            </div>
           </>
         )}
+      </div>
+      <div className="BSBillingnav1-threedots" onClick={NavmenuOpenClose}>
+        <PozoMenuIcon size={20} />
+      </div>
 
+      {/*  */}
+      {/*  */}
+      {/*  */}
       {/* small screen nav bar */}
-        {Navmenu && (
+      {/*  */}
-          <div>
+      {/*  */}
-            <div
+      {/*  */}
-              className="BSBillingnav1-Smallscreen"
-              style={{ backgroundColor: background }}
-            >
-              <div className="BSBillingNavBar1-AllIcons-column">
-                {OtherServiceStatus && (
-                  <div
-                    style={{ fontSize: '1.5rem', color: 'rgb(18, 146, 238)' }}
-                  >
-                    <TooltipWrapper title="Other Services" isMobile={isMobile}>
-                      <div onClick={handleotherservices}>
-                        <FaParking
-                          fill={
-                            OtherServicesglobal === true ? '#52C41A' : '#1292EE'
-                          }
-                        />
-                      </div>
-                    </TooltipWrapper>
-                  </div>
-                )}
-                {!OtherServicesglobal &&
-                  ScanLayoutScreen?.SettingValue === 'Y' && <BSScanTemplate />}
 
-                {!OtherServicesglobal && (
+      {Navmenu && (
-                  <>
+        <div className="resNavbarMain">
-                    {OpenFailData && (
+          <div className="ResBsNavbar-IconSections">
-                      <PaymentFailedSales
+            <div className="resnavbarClose">
-                        paymentFailedStatusFun={paymentFailedStatusFun}
+              <IoMdClose onClick={NavmenuOpenClose} />
-                        OpenFailData={OpenFailData}
-                      />
-                    )}
-                    {/* {ComboDropDown?.length >= 1 && (
-                      <div
-                        style={{ fontSize: '1.5rem', color: 'rgb(18, 146, 238)' }}
-                      >
-                        <TooltipWrapper title="Combo Product" isMobile={isMobile}>
-                          <div
-                            onClick={handleClick}
-                            style={{
-                              width: '1.49rem',
-                              pointerEvents:
-                                OrderType === 'Failed' ? 'none' : 'auto',
-                              cursor: 'pointer',
-                            }}
-                          >
-                            <PozoComboProductIcon
-                              fill={Comboglobal === true ? '#52C41A' : '#1292EE'}
-                            />
             </div>
-                        </TooltipWrapper>
-                      </div>
-                    )} */}
             {navbarOptions?.map((item) => (
               <>
-                        {item?.OptionName == 'RePrint' &&
+                {/* Reprint */}
-                          !OtherServicesglobal && (
+                <>
+                  {item?.OptionName == 'RePrint' && !OtherServicesglobal && (
+                    <TooltipWrapper title="Reprint (Alt+R)" isMobile={isMobile}>
                       <div
                         style={{
                           pointerEvents:
                             OrderType === 'Failed' ? 'none' : 'auto',
                         }}
+                        className="ReprintIconRes ResNavbarIcons"
                       >
                         <BSPrinterSetting />
                       </div>
+                    </TooltipWrapper>
                   )}
-                        {item?.OptionName == 'Hold' &&
+                </>
-                          OrderType != 'Failed' &&
+
-                          OrderType != 'Reorder' &&
+                {!OtherServicesglobal && (
-                          CheckBookingStatus != 'Close' &&
+                  <>
-                          isHoldEnable &&
+                    {/* Quick Add */}
-                          !addnewAccess && (
-                            <div>
-                              <BSNavBarHand className="BSBillingNavBar1-hand" />
-                            </div>
-                          )}
                     {item?.OptionName == 'QuickAdd' && (
                       <div
                         style={{
                           pointerEvents:
                             OrderType === 'Failed' ? 'none' : 'auto',
                         }}
+                        className="QuicAddIconRes ResNavbarIcons"
                       >
                         <BSNavBarQuickAdd />
                       </div>
                     )}
-                        {/* {item?.OptionName == 'Quick Transfer' && (
+                    {/* Hold */}
-                      <div
+                    {item?.OptionName == 'Hold' &&
-                        style={{
+                      OrderType != 'Failed' &&
-                          pointerEvents:
+                      OrderType != 'Reorder' &&
-                            OrderType === 'Failed' ? 'none' : 'auto',
+                      CheckBookingStatus != 'Close' &&
-                        }}
+                      isHoldEnable &&
-                      >
+                      !addnewAccess && (
-                        <Tooltip title="Quick Transfer" placement="top">
+                        <div className="BSBillingNavBar1-hand ResNavbarIcons">
-                          <Button
+                          <BSNavBarHand />
-                            type="primary"
-                            shape="circle"
-                            icon={<SwapIcon />}
-                            size="small"
-                            onClick={showModal}
-                          />
-                        </Tooltip>
                         </div>
-                    )} */}
+                      )}
+
                     {item?.OptionName == 'DineIn' &&
                       dinePreference &&
                       PreferenceDatas?.[0]?.['SettingDtlDetails']?.find(
                         (item) => item.SettingIdName === 'DineIn'
                       )?.SettingValue === 'Y' && (
                         <div
+                          className="ResNavbarIcons"
                           style={{
                             pointerEvents:
                               OrderType === 'Failed' || addnewAccess
@@ -1140,8 +1084,9 @@ const BSNavbar1 = (props) => {
                           <BSNavBarTable />
                         </div>
                       )}
-                        {item?.OptionName == 'TakeAway' && (
+                    {item?.OptionName == 'TakeAway' && takeAwayPreference && (
                       <div
+                        className="ResNavbarIcons"
                         style={{
                           pointerEvents:
                             OrderType === 'Failed' ? 'none' : 'auto',
@@ -1163,13 +1108,14 @@ const BSNavbar1 = (props) => {
                             pointerEvents:
                               OrderType === 'Failed' ? 'none' : 'auto',
                           }}
+                          className="ResNavbarIcons"
                         >
                           <BSNavBarOffer />
                         </div>
                       )}
                     {item?.OptionName == 'ExtraCharge' && (
-                          // CartOrderDetails?.length > 0 &&
                       <div
+                        className="ResNavbarIcons"
                         style={{
                           pointerEvents:
                             OrderType === 'Failed' ? 'none' : 'auto',
@@ -1178,60 +1124,47 @@ const BSNavbar1 = (props) => {
                         <BSNavBarAddons />
                       </div>
                     )}
-                        {item?.OptionName == 'AddCustomer' && (
+                    {/* Customer Add Select */}
-                          <Popover
+                    {item?.OptionName == 'AddCustomer' && !preOrderOpen && (
-                            content={
+                      <div className="NavbarCus-Add">
-                              <div
-                                style={{
-                                  display: 'flex',
-                                  alignItems: 'center',
-                                  columnGap: '0.5rem',
-                                }}
-                              >
                         <BSCustomerSelect TopName={'navbar-top'} />
                         <BSNavBarAddUser />
                       </div>
-                            }
+                    )}
-                            trigger="click"
+                  </>
-                            placement="left"
-                            open={open}
-                            onOpenChange={handleOpenChange}
-                          >
-                            <PozoAddCustomerIcon className="BSBillingNav-icon" />
-                          </Popover>
                 )}
               </>
             ))}
+
+            {!OtherServicesglobal && (
+              <>
+                {/* Weight Scale */}
                 {FeatureAddonData?.FeatureDtls?.find(
                   (item) =>
-                        item?.FeatureAddonName?.toLowerCase() === 'Weight Scale'
+                    item?.FeatureAddonName?.toLowerCase() === 'weight scale'
                 ) && (
                   <div
+                    className="ResNavbarIcons"
                     style={{
-                          pointerEvents:
+                      pointerEvents: OrderType === 'Failed' ? 'none' : 'auto',
-                            OrderType === 'Failed' ? 'none' : 'auto',
                     }}
                   >
                     <BSNavBarWeightScale />
                   </div>
                 )}
+                {/* PreOrder */}
                 {FeatureAddonData?.FeatureDtls?.find(
-                      (item) =>
+                  (item) => item?.FeatureAddonName?.toLowerCase() === 'preorder'
-                        item?.FeatureAddonName?.toLowerCase() === 'preorder'
                 ) && (
                   <div
+                    className="ResNavbarIcons"
                     style={{
                       pointerEvents:
-                            tableData || OrderType === 'Failed'
+                        tableData || OrderType === 'Failed' ? 'none' : 'auto',
-                              ? 'none'
-                              : 'auto',
                       opacity: tableData ? 0.5 : 1,
                     }}
                   >
-                        <TooltipWrapper
+                    <TooltipWrapper title={'Pre Booking'} isMobile={isMobile}>
-                          title={'Pre Booking'}
-                          isMobile={isMobile}
-                        >
                       <Badge
                         count={preOrderPendingCount}
                         offset={[-5, 10]}
@@ -1241,108 +1174,120 @@ const BSNavbar1 = (props) => {
                           className="BSBillingNav-icon"
                           fill={preOrderOpen ? '#52C41A' : '#1292EE'}
                           onClick={() => {
-                                openPreOrder('small-screen');
+                            openPreOrder();
                           }}
+                          HandleClose={preOrderHandleclose}
                         />
                       </Badge>
                     </TooltipWrapper>
                   </div>
                 )}
                 {preOrderOpen && (
-                      <BSNavBarPreOrder
+                  <BSNavBarPreOrder HandleClose={preOrderHandleclose} />
-                        preOrderhiseandShow={handlepreOrderhiseandShow}
-                        preOrderhideshow={preOrderhiseandShow}
-                        HandleClose={preOrderHandleclose}
-                      />
                 )}
                 {sportsAppPreference && <BSMembership />}
-                    {Estimation?.SettingValue == 'Y' &&
+                {Estimation?.SettingValue === 'Y' &&
-                      !OrderOfferStatus &&
                   BookingType !== 'Dine In' &&
-                      !BookingTypeBoth && (
+                  !BookingTypeBoth &&
-                        <div
+                  !OrderOfferStatus && (
-                          style={{
-                            pointerEvents:
-                              OrderType === 'Failed' ? 'none' : 'auto',
-                          }}
-                        >
-                          <BSNavBarEstimate />
-                        </div>
-                      )}
-                    {SalesMode?.SettingValue === 'Y' &&
-                      !OtherServicesglobal && <BSNavBarWholeSale />}
-
-                    {!sportsAppPreference && (
-                      <div
-                        style={{
-                          pointerEvents:
-                            OrderType === 'Failed' ? 'none' : 'auto',
-                        }}
-                      >
-                        <BSNavBarFavItems type="small-screen" />
-                      </div>
-                    )}
-
                     <div
                       style={{
                         pointerEvents: OrderType === 'Failed' ? 'none' : 'auto',
                       }}
                     >
-                      <BSNavBarDragItems type="small-screen" />
+                      <BSNavBarEstimate />
                     </div>
+                  )}
+                {/* mohan */}
+                {SalesMode?.SettingValue === 'Y' && !OtherServicesglobal && (
+                  <div className="ResNavbarIcons">
+                    <BSNavBarWholeSale />
+                  </div>
+                )}
+                {!OtherServicesglobal &&
+                  ScanLayoutScreen?.SettingValue === 'Y' && <BSScanTemplate />}
+                {/* favourites */}
+                {!sportsAppPreference && (
+                  <div
+                    className="ResNavbarIcons"
+                    style={{
+                      pointerEvents: OrderType === 'Failed' ? 'none' : 'auto',
+                    }}
+                  >
+                    <BSNavBarFavItems />
+                  </div>
+                )}
+                {/* DragItem */}
+                <div
+                  className="favIcon ResNavbarIcons"
+                  style={{
+                    pointerEvents: OrderType === 'Failed' ? 'none' : 'auto',
+                  }}
+                >
+                  <BSNavBarDragItems />
+                </div>
+                {/* Customer Display */}
                 {FeatureAddonData?.FeatureDtls?.find(
                   (item) =>
-                        item?.FeatureAddonName?.toLowerCase() ===
+                    item?.FeatureAddonName?.toLowerCase() === 'customer display'
-                        'customer display'
                 ) && (
-                      <TooltipWrapper
+                  <TooltipWrapper title="Customer Display" isMobile={isMobile}>
-                        title="Customer Display"
-                        isMobile={isMobile}
-                      >
-                        {/* <div onClick={openNewTab} style={{ display: "flex", alignItems: "center", cursor: "pointer" }}>
-                      <FaDisplay />
-                    </div> */}
                     <div
                       onClick={openNewTab}
-                          style={{ width: '1.3rem', cursor: 'pointer' }}
+                      className="BSBillingNavBar1-AllIcons ResNavbarIcons"
+                      style={{
+                        width: '1.3rem',
+                        margin: '10px',
+                        cursor: 'pointer',
+                      }}
                     >
                       <CustomerDisplayicon />
                     </div>
                   </TooltipWrapper>
                 )}
-
+                {/* Pay,ent Failed */}
-                    {VerifyTheProducts && <VerfiedProducts />}
-
                 {paymentfeataddon && (
-                      <TooltipWrapper
+                  <TooltipWrapper title="Failed Payment" isMobile={isMobile}>
-                        title="Failed Payment"
-                        isMobile={isMobile}
-                      >
-                        {/* PozoPaymentFailesIcon */}
                     <div
                       onClick={() => {
                         paymentFailedStatusFun();
                       }}
+                      className="BSBillingNavBar1-AllIcons ResNavbarIcons"
                       style={{ width: '1.4rem', cursor: 'pointer' }}
                     >
                       <PozoPaymentFailesIcon />
                     </div>
                   </TooltipWrapper>
                 )}
+                {/* VerifyTheProducts */}
+                {VerifyTheProducts && (
+                  <TooltipWrapper
+                    title={'Verfied Products'}
+                    isMobile={isMobile}
+                  >
+                    <div className="ResNavbarIcons">
+                      <VerfiedProducts />
+                    </div>
+                  </TooltipWrapper>
+                )}
               </>
             )}
-              </div>
+            {!isMobile && (
-            </div>
+              <div className="PrinterSettingMB">
+                <BSMobilePrintSettings />
               </div>
             )}
           </div>
-      <div className="BSBillingnav1-threedots" onClick={NavmenuOpenClose}>
-        {Navmenu ? (
-          <IoMdClose size={24} color="#ff0000" />
-        ) : (
-          <PozoMenuIcon size={20} />
-        )}
         </div>
+      )}
+
+      {/*  */}
+      {/*  */}
+      {/*  */}
+      {/* small screen nav bar End*/}
+      {/*  */}
+      {/*  */}
+      {/*  */}
 
       <DefaultModal
         open={multiple}

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

@@ -1652,6 +1652,10 @@ const FeaturesFunctionalities = (props) => {
       }
       formRef.current?.setFieldsValue(response?.data?.data?.[0]);
 
+      if (response?.data?.data?.[0]?.Gender) {
+        setGender(response?.data?.data?.[0]?.Gender);
+      }
+
       if (response?.data?.data?.[0]?.InitialOutStanding) {
         setInitialOutStandingType(
           response?.data?.data?.[0]?.InitialOutStanding
@@ -2978,7 +2982,7 @@ const FeaturesFunctionalities = (props) => {
                           },
                           {
                             validator: async (_, value) => {
-                              await validateSafeInput(value); // To block HTML tags & SQL keywords
+                              await validateSafeInput(value);
                               return Promise.resolve();
                             },
                           },
@@ -3021,6 +3025,7 @@ const FeaturesFunctionalities = (props) => {
                           }
                         />
                       </Form.Item>
+
                       <Form.Item name={'Gender'}>
                         <RadioGrpButton
                           Header={'Gender'}
@@ -3028,7 +3033,6 @@ const FeaturesFunctionalities = (props) => {
                             { label: 'Male', value: 'M' },
                             { label: 'Female', value: 'F' },
                           ]}
-                          // value={formRef.current?.getFieldsValue()?.Gender}
                           defaultSelect={gender}
                           onSelectFuntion={(e) => {
                             setGender(e);
@@ -3036,6 +3040,7 @@ const FeaturesFunctionalities = (props) => {
                           }}
                         />
                       </Form.Item>
+
                       <Form.Item name={'AadhaarNo'}>
                         <InputField
                           label={'Aadhaar No'}
@@ -3075,22 +3080,7 @@ const FeaturesFunctionalities = (props) => {
                       </div>
                     </div>
                   </div>
-                  {/* <p
+
-                    onClick={handleToggle}
-                    style={{
-                      fontSize: '13px',
-                      cursor: 'pointer',
-                      padding: '1rem 0.3rem',
-                      display: 'flex',
-                      // alignItems: "center",
-                      flexDirection: 'row',
-                      columnGap: '0.3rem',
-                    }}
-                  >
-                    {' '}
-                    {isOpen ? 'More info close' : 'More info open'}{' '}
-                    <AiOutlineDownCircle />
-                  </p> */}
                   <p
                     style={{
                       fontSize: '13px',
@@ -3516,7 +3506,9 @@ const FeaturesFunctionalities = (props) => {
                                   borderRadius: '6px',
                                   cursor: 'pointer',
                                   marginTop: '8px',
-                                  fontWeight: '500',
+                                  fontWeight: '400',
+                                  fontFamily: 'Poppins',
+                                  fontSize: '12px',
                                 }}
                               >
                                 {editingIndex !== null
@@ -3984,10 +3976,6 @@ const FeaturesFunctionalities = (props) => {
                             option?.BookingTypeName +
                             ' ' +
                             option?.SinglePc,
-                          // label: option.Type === 'P'  ? option.ProdVariantName !== 'Variant 1'
-                          // ? `${option?.ProdName} (${option.Size} ${option.UomName}) (${option.ProdVariantName}${BookingTypeBoth ? ` (${option?.BookingTypeName})` : ''})`
-                          //   : `${option?.ProdName} (${option.Size} ${option.UomName}) ${BookingTypeBoth ? ` (${option?.BookingTypeName})` : ''}`
-                          //   : `${option?.ProdName} (1 Combo)`
                           label:
                             option.Type === 'P'
                               ? option.ProdVariantName !== 'Variant 1'

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

@@ -392,7 +392,7 @@ const BSNavBarSearch = (props) => {
   }, []);
 
   return (
-    <div>
+    <div className="BSNavBarSearchMaster">
       <Messages
         messageData={messageData}
         messageType={messageType}
@@ -416,16 +416,16 @@ const BSNavBarSearch = (props) => {
             value={searchDataFocus}
             ref={searchInputRef}
             className="custom-input"
-            placeholder="Search (SHIFT + S)"
+            placeholder={
+              isMobile && screenWidth <= 768
+                ? 'SHIFT + S'
+                : 'Search (SHIFT + S)'
+            }
             onChange={(e) => searchdata(e?.target?.value)}
             onBlur={handleBlur}
             disabled={props.OrderType === 'Failed' ? true : false}
           />
           {isMobile && screenWidth <= 768 ? (
-            // <BiBarcodeReader
-            //   className="search-icon"
-            //   onClick={() => handleQrcode()}
-            // />
             <BarCodeScan
               onScan={(value) => {
                 searchdata(value);

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

@@ -1,12 +1,16 @@
 import { useDispatch, useSelector } from 'react-redux';
-import { GlobalRetailWSSalesType, changeRetailWSSalesType } from '../../../../Features/BookingScreen/BookingData/BookingData';
+import {
-import { MdAddShoppingCart } from "react-icons/md";
+  GlobalRetailWSSalesType,
-import { FaBoxes } from "react-icons/fa";
+  changeRetailWSSalesType,
+} from '../../../../Features/BookingScreen/BookingData/BookingData';
+import { MdAddShoppingCart } from 'react-icons/md';
+import { FaBoxes } from 'react-icons/fa';
 import { useEffect } from 'react';
 
- 
+const BSNavBarWholeSale = ({
-
+  drawerOpen = false,
-const BSNavBarWholeSale = ({ drawerOpen = false, setDrawerOpen = () => { } }) => {
+  setDrawerOpen = () => {},
+}) => {
   const dispatch = useDispatch();
   const SaleType = useSelector(GlobalRetailWSSalesType);
   const isWholesale = SaleType === 'W';
@@ -16,10 +20,10 @@ const BSNavBarWholeSale = ({ drawerOpen = false, setDrawerOpen = () => { } }) =>
   };
 
   const btnStyle = {
-        width: '33px',
+    width: '30px',
-        height: '33px',
+    height: '30px',
-        borderRadius: '8px',
+    borderRadius: '6px',
-        backgroundColor: isWholesale ? '#22c55e' : '#3b82f6',
+    backgroundColor: isWholesale ? '#45ca00' : '#1292ee',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
@@ -27,11 +31,12 @@ const BSNavBarWholeSale = ({ drawerOpen = false, setDrawerOpen = () => { } }) =>
     border: 'none',
     outline: 'none',
     cursor: 'pointer',
-        padding:"10px",
+    padding: '10px',
+    color: '#fff',
   };
 
   const iconStyle = {
-        fontSize: '16px',
+    fontSize: '17px',
     color: 'white',
     display: 'flex',
   };
@@ -40,27 +45,33 @@ const BSNavBarWholeSale = ({ drawerOpen = false, setDrawerOpen = () => { } }) =>
     position: 'absolute',
     top: '-2px',
     right: '-10px',
-        backgroundColor: isWholesale ? '#15803d' : '#1e40af',
+    backgroundColor: isWholesale ? '#3bb100' : '#0078ce',
     color: 'white',
-        fontSize: '12px',
+    fontSize: '11px',
-        fontWeight: 'bold',
+    fontWeight: '500',
     borderRadius: '9999px',
     width: '20px',
     height: '20px',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    fontFamily: 'Poppins',
+    color: '#fff',
   };
 
   useEffect(() => {
     if (drawerOpen?.wholesale) {
       toggleSaleType();
-            setDrawerOpen(prev => ({ ...prev, wholesale: false }));
+      setDrawerOpen((prev) => ({ ...prev, wholesale: false }));
     }
-    }, [drawerOpen?.wholesale])
+  }, [drawerOpen?.wholesale]);
 
   return (
-        <button className='WholesaleretialChangeIcon' onClick={toggleSaleType} style={btnStyle}>
+    <button
+      className="WholesaleretialChangeIcon"
+      onClick={toggleSaleType}
+      style={btnStyle}
+    >
       <span style={iconStyle}>
         {isWholesale ? <FaBoxes /> : <MdAddShoppingCart />}
       </span>

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

@@ -147,6 +147,7 @@ const BSLayout1 = () => {
   const BookingBilling = BSLayout1Data?.BookingBilling?.[0];
   const [messageType, setMessageType] = useState(null);
   const [messageData, setMessageData] = useState(null);
+  const [connectingState, setConnectingState] = useState({});
   // const [AppExpDate, setAppExpDate] = useState(0);
   const [screenHeight, setScreenHeight] = useState(window.innerHeight);
   const [Kioskopen, setKioskopen] = useState(false);
@@ -338,8 +339,11 @@ const BSLayout1 = () => {
           style={{ height: containerHeight, overflow: 'hidden' }}
         >
           <div className="BSLayout1-NavBar">
-             <BSNavbar1 BookingNavbar={BookingNavbar}/>
+            <BSNavbar1
-     
+              BookingNavbar={BookingNavbar}
+              connectingState={connectingState}
+              setConnectingState={setConnectingState}
+            />
           </div>
           <div
             className={
@@ -349,7 +353,6 @@ const BSLayout1 = () => {
               backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
             }}
           >
-            {BookingNavbar != 'Navbar3' ? (
             <div
               className="Layout-bill-container"
               style={{ marginTop: '12px' }}
@@ -385,6 +388,7 @@ const BSLayout1 = () => {
                   <SalesCountComponent
                     DineInAccess={DineInAccess}
                     GlobalsalesDetailData={GlobalsalesDetailData}
+                    BookingNavbar={BookingNavbar}
                   />
                 )}
                 {SessionData?.FeatureAddonData?.FeatureDtls?.find(
@@ -497,10 +501,7 @@ const BSLayout1 = () => {
                       )}
                     </div>
                     <div style={{ marginLeft: '10px' }}>
-                        <TooltipWrapper
+                      <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
-                          title={'E-way Bill'}
-                          isMobile={isMobile}
-                        >
                         {''}
                         <BSEwayBillicon
                           style={{ cursor: 'pointer', marginTop: '5px' }}
@@ -512,13 +513,7 @@ const BSLayout1 = () => {
                 )}
               </div>
             </div>
-            ) : (
+
-              <SalesCountForStandard
-                PricingAppPricingName={PricingAppPricingName}
-                DineInAccess={DineInAccess}
-                GlobalsalesDetailData={GlobalsalesDetailData}
-              />
-            )}
             <div className="BSLayout1-ContentDiv">
               <div className="BSCategory1-Contentcont">
                 <div
@@ -587,6 +582,8 @@ const BSLayout1 = () => {
                         />
                       ) : (
                         <BSItemCard
+                          connectingState={connectingState}
+                          setConnectingState={setConnectingState}
                           screenHeight={screenHeight}
                           cardFunctionality={dynamicComponentProps(
                             'Card',

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

@@ -168,6 +168,7 @@ const BSLayout2 = () => {
   const [messageType, setMessageType] = useState(null);
   const [messageData, setMessageData] = useState(null);
   const [popOverOpen, setPopOverOpen] = useState(false);
+  const [connectingState, setConnectingState] = useState({});
   const BookingStatus = useSelector(GlobalBookingStatus);
   const CheckBookingStatus =
     BookingStatus?.find((item) => item.ScreenType === 'Booking')
@@ -348,7 +349,11 @@ const BSLayout2 = () => {
             style={{ height: containerHeight, overflow: 'hidden' }}
           >
             <div className="BSLayout2-NavBar">
-              <BSNavbar1 BookingNavbar={BookingNavbar}/>
+              <BSNavbar1
+                BookingNavbar={BookingNavbar}
+                connectingState={connectingState}
+                setConnectingState={setConnectingState}
+              />
             </div>
 
             <div
@@ -357,7 +362,6 @@ const BSLayout2 = () => {
                 BookingNavbar != 'Navbar3' ? 'BSLayout2Standard' : 'BSLayout2'
               }
             >
-              {BookingNavbar != 'Navbar3' ? (
               <div
                 className="Layout-bill-container"
                 style={{ marginTop: '9px' }}
@@ -378,6 +382,7 @@ const BSLayout2 = () => {
                       <SalesCountComponent
                         DineInAccess={DineInAccess}
                         GlobalsalesDetailData={GlobalsalesDetailData}
+                        BookingNavbar={BookingNavbar}
                       />
                     </Suspense>
                   )}
@@ -511,15 +516,6 @@ const BSLayout2 = () => {
                   )}
                 </div>
               </div>
-              ) : (
-                <Suspense fallback={null}>
-                  <SalesCountForStandard
-                    PricingAppPricingName={PricingAppPricingName}
-                    DineInAccess={DineInAccess}
-                    GlobalsalesDetailData={GlobalsalesDetailData}
-                  />
-                </Suspense>
-              )}
 
               <div
                 className="BsLayout2-ContentDiv"
@@ -582,6 +578,8 @@ const BSLayout2 = () => {
                         />
                       ) : (
                         <BSItemCard
+                          connectingState={connectingState}
+                          setConnectingState={setConnectingState}
                           cardFunctionality={dynamicComponentProps(
                             'Card',
                             BSLayout2Data?.BookingCard?.[1],

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

@@ -112,8 +112,6 @@ const BSNavbar2 = lazy(() => import('../../Components/BSNavbar/BSNavbar2'));
 import '../../../../Styles/BookingScreen/Template/BSLayout3/BSLayout3.scss';
 import CardSkeleton from '../../../../Components/Skeleton/CardSkeleton.jsx';
 
-
-
 const BSLayout3 = () => {
   const dispatch = useDispatch();
   const { action, selectedProducts } = useSelector(
@@ -168,6 +166,7 @@ const BSLayout3 = () => {
       (i) => i.SettingIdName === 'DineIn'
     )?.[0];
   }, [SettingDataSelector]);
+  const [connectingState, setConnectingState] = useState({});
   const [ListOfInvoices, setListOfInvoices] = useState(false);
   const AppId = SessionData?.AppId;
   const CompId = SessionData?.CompId;
@@ -321,7 +320,11 @@ const BSLayout3 = () => {
           style={{ height: containerHeight, overflow: 'hidden' }}
         >
           <div className="BSLayout3-NavBar">
-            <BSNavbar1 BookingNavbar={BookingNavbar}/>
+            <BSNavbar1
+              BookingNavbar={BookingNavbar}
+              connectingState={connectingState}
+              setConnectingState={setConnectingState}
+            />
           </div>
           <div
             className={
@@ -331,11 +334,7 @@ const BSLayout3 = () => {
               backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
             }}
           >
-            {BookingNavbar != 'Navbar3' ? (
+            <div className="Layout-bill-container" style={{ marginTop: '9px' }}>
-              <div
-                className="Layout-bill-container"
-                style={{ marginTop: '9px' }}
-              >
               <div
                 className="Layout-bill-Subcontainer"
                 style={{ width: OtherServicesglobal ? '10%' : '100%' }}
@@ -351,6 +350,7 @@ const BSLayout3 = () => {
                   <SalesCountComponent
                     DineInAccess={DineInAccess}
                     GlobalsalesDetailData={GlobalsalesDetailData}
+                    BookingNavbar={BookingNavbar}
                   />
                 )}
                 {!OtherServicesglobal &&
@@ -476,11 +476,7 @@ const BSLayout3 = () => {
                 )}
               </div>
             </div>
-            ) : (
+
-              <>
-                <SalesCountForStandard />
-              </>
-            )}
             <div
               className="BsLayout3-ContentDiv"
               style={{
@@ -542,6 +538,8 @@ const BSLayout3 = () => {
                 >
                   {!OtherServicesglobal && Comboglobal === false && (
                     <BSItemCard
+                      connectingState={connectingState}
+                      setConnectingState={setConnectingState}
                       cardFunctionality={dynamicComponentProps(
                         'Card',
                         BookingCard?.[1],

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

@@ -170,6 +170,7 @@ const BSLayout4 = () => {
   );
   // const [AppExpDate, setAppExpDate] = useState(0);
   const [Kioskopen, setKioskopen] = useState(false);
+  const [connectingState, setConnectingState] = useState({});
   const BookingStatus = useSelector(GlobalBookingStatus);
   const CheckBookingStatus =
     BookingStatus?.find((item) => item.ScreenType === 'Booking')
@@ -337,9 +338,13 @@ const BSLayout4 = () => {
           style={{ height: containerHeight, overflow: 'hidden' }}
         >
           <div className="Bslayout4_navbar">
-           <BSNavbar1 BookingNavbar={BookingNavbar}/>
+            <BSNavbar1
+              connectingState={connectingState}
+              setConnectingState={setConnectingState}
+              BookingNavbar={BookingNavbar}
+            />
           </div>
-          {BookingNavbar != 'Navbar3' ? (
+
           <div className="Layout-bill-container" style={{ margin: '0' }}>
             <div
               className="Layout-bill-Subcontainer"
@@ -356,6 +361,7 @@ const BSLayout4 = () => {
                 <SalesCountComponent
                   DineInAccess={DineInAccess}
                   GlobalsalesDetailData={GlobalsalesDetailData}
+                  BookingNavbar={BookingNavbar}
                 />
               )}
               {!OtherServicesglobal &&
@@ -371,11 +377,7 @@ const BSLayout4 = () => {
                     }}
                   >
                     <Tooltip title={'Kiosk Sales'}>
-                        <Badge
+                      <Badge count={badgeCount} offset={[-10, 3]} size="small">
-                          count={badgeCount}
-                          offset={[-10, 3]}
-                          size="small"
-                        >
                         <PozoKioskIcon
                           onClick={() => openModalKiosk()}
                           style={{ cursor: 'pointer', fontSize: '1.5rem' }}
@@ -386,10 +388,7 @@ const BSLayout4 = () => {
                   </div>
                 )}
               {!OtherServicesglobal && (
-                  <TooltipWrapper
+                <TooltipWrapper title={'Low Stock Alerts'} isMobile={isMobile}>
-                    title={'Low Stock Alerts'}
-                    isMobile={isMobile}
-                  >
                   {' '}
                   <BSExpireProductsList />
                 </TooltipWrapper>
@@ -400,8 +399,7 @@ const BSLayout4 = () => {
                   closeKioskModal={closeModalKiosk}
                 />
               )}
-                {SAdminuserPin?.length > 0 &&
+              {SAdminuserPin?.length > 0 && UserType != 'Super Admin User' && (
-                  UserType != 'Super Admin User' && (
                 <div>
                   <SAdminUserNotification
                     SAdminuserPin={SAdminuserPin}
@@ -414,10 +412,7 @@ const BSLayout4 = () => {
               {CheckBookingStatus == 'Open' ? (
                 !OtherServicesglobal && (
                   <div style={{ marginLeft: '10px' }}>
-                      <TooltipWrapper
+                    <TooltipWrapper title={'Booking Close'} isMobile={isMobile}>
-                        title={'Booking Close'}
-                        isMobile={isMobile}
-                      >
                       {' '}
                       <BookingCloseIcon
                         onClick={OpenBookingModal}
@@ -473,13 +468,7 @@ const BSLayout4 = () => {
               )}
             </div>
           </div>
-          ) : (
+
-            <SalesCountForStandard
-              PricingAppPricingName={PricingAppPricingName}
-              DineInAccess={DineInAccess}
-              GlobalsalesDetailData={GlobalsalesDetailData}
-            />
-          )}
           <div
             className="Bslayout4_overall"
             style={{
@@ -524,6 +513,8 @@ const BSLayout4 = () => {
               >
                 {!OtherServicesglobal && Comboglobal === false && (
                   <BSItemCard
+                    connectingState={connectingState}
+                    setConnectingState={setConnectingState}
                     cardFunctionality={dynamicComponentProps(
                       'Card',
                       BookingCard?.[1],

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

@@ -136,6 +136,7 @@ const BSLayout5 = () => {
   // const [AppExpDate, setAppExpDate] = useState(0);
   const [screenHeight, setScreenHeight] = useState(window.innerHeight);
   const [Kioskopen, setKioskopen] = useState(false);
+  const [connectingState, setConnectingState] = useState({});
   const PricingAppPricingName = useSelector(GlobalPricingAppPricingName);
   const SAdminuserPin = useSelector(GLobalSadminUserPin);
   const BookingNavbar = BSLayout5Data?.BookingNavbar?.[0];
@@ -325,7 +326,11 @@ const BSLayout5 = () => {
           style={{ height: containerHeight, overflow: 'hidden' }}
         >
           <div className="BSLayout5-NavBar">
-            <BSNavbar1 BookingNavbar={BookingNavbar}/>
+            <BSNavbar1
+              BookingNavbar={BookingNavbar}
+              connectingState={connectingState}
+              setConnectingState={setConnectingState}
+            />
           </div>
 
           <div
@@ -334,7 +339,6 @@ const BSLayout5 = () => {
               backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
             }}
           >
-            {BookingNavbar != 'Navbar3' ? (
             <div className="Layout-bill-container">
               <div
                 className="Layout-bill-Subcontainer"
@@ -351,6 +355,7 @@ const BSLayout5 = () => {
                   <SalesCountComponent
                     DineInAccess={DineInAccess}
                     GlobalsalesDetailData={GlobalsalesDetailData}
+                    BookingNavbar={BookingNavbar}
                   />
                 )}
 
@@ -476,13 +481,6 @@ const BSLayout5 = () => {
                 )}
               </div>
             </div>
-            ) : (
-              <SalesCountForStandard
-                PricingAppPricingName={PricingAppPricingName}
-                DineInAccess={DineInAccess}
-                GlobalsalesDetailData={GlobalsalesDetailData}
-              />
-            )}
 
             <div className="BsLayout5-ContentDiv">
               <div className="BSCategory5-tablecont">
@@ -557,6 +555,8 @@ const BSLayout5 = () => {
                 >
                   {!OtherServicesglobal && Comboglobal === false && (
                     <BSItemCard
+                      connectingState={connectingState}
+                      setConnectingState={setConnectingState}
                       cardFunctionality={dynamicComponentProps(
                         'Card',
                         BookingCard?.[1],

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

@@ -148,6 +148,7 @@ const BSLayout6 = () => {
     BookingStatus?.find((item) => item.ScreenType === 'Booking')
       ?.ScreenStatus ?? 'Open';
   const [BookingModalOpen, setBookingModalOpen] = useState(false);
+  const [connectingState, setConnectingState] = useState({});
   const [Kioskopen, setKioskopen] = useState(false);
   const AppExpDate = useSelector(GlobalAppExpDateData);
   const [screenHeight, setScreenHeight] = useState(window?.innerHeight);
@@ -336,9 +337,13 @@ const BSLayout6 = () => {
         >
           <div className="BSLayout6-fullnav">
             <div className="BSLayout6-Navbar">
-             <BSNavbar1 BookingNavbar={BookingNavbar}/>
+              <BSNavbar1
+                BookingNavbar={BookingNavbar}
+                connectingState={connectingState}
+                setConnectingState={setConnectingState}
+              />
             </div>
-            {BookingNavbar != 'Navbar3' ? (
+
             <div className="Layout-bill-container">
               <div
                 className="Layout-bill-Subcontainer"
@@ -355,6 +360,7 @@ const BSLayout6 = () => {
                   <SalesCountComponent
                     DineInAccess={DineInAccess}
                     GlobalsalesDetailData={GlobalsalesDetailData}
+                    BookingNavbar={BookingNavbar}
                   />
                 )}
                 {!OtherServicesglobal &&
@@ -479,13 +485,7 @@ const BSLayout6 = () => {
                 )}
               </div>
             </div>
-            ) : (
+
-              <SalesCountForStandard
-                PricingAppPricingName={PricingAppPricingName}
-                DineInAccess={DineInAccess}
-                GlobalsalesDetailData={GlobalsalesDetailData}
-              />
-            )}
             <div
               className="BSLayout6-category-div"
               style={{
@@ -529,6 +529,8 @@ const BSLayout6 = () => {
             >
               {!OtherServicesglobal && Comboglobal === false && (
                 <BSItemCard
+                  connectingState={connectingState}
+                  setConnectingState={setConnectingState}
                   // screenHeight={screenHeight}
                   cardFunctionality={dynamicComponentProps(
                     'Card',

src/Pages/BookingScreen/Template/SalesCountComponent.jsx

@@ -18,7 +18,6 @@ import { MdOutlineCallReceived } from 'react-icons/md';
 import { GoPackageDependencies } from 'react-icons/go';
 import { Messages } from '../../../Components/Notifications/Messages';
 import { useSelector } from 'react-redux';
-import { DefaultModal } from '../../../Components/Modal/DefaultModal';
 import {
   getCardDataWithoutSub,
   getCardDataWithoutSubmodule,
@@ -56,11 +55,19 @@ const ShortcutKeyHelper = lazy(
 );
 // Scss
 import './SalesCountComponent.scss';
-import { SalesDetailsModal, SalesNetAmountModal } from '../Components/UtillComponents/SalesDetailsNetAmountModal.jsx';
+import {
+  SalesDetailsModal,
+  SalesNetAmountModal,
+} from '../Components/UtillComponents/SalesDetailsNetAmountModal.jsx';
 
 const SalesCountComponent = React.memo(
-  ({ DineInAccess, GlobalsalesDetailData }) => {
+  ({ DineInAccess, GlobalsalesDetailData, BookingNavbar }) => {
     // Destructure to simplify access to required values
+    console.log(
+      BookingNavbar,
+      'BookingNavbarBookingNavbar'
+    );
+
     const {
       DineInOrderCount,
       TakeAwayOrderCount,

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

@@ -1,11 +1,55 @@
-.BSBillingNavBar1 {
+.BSBillingNavBar1,
+.BSBillingNavBar2 {
   display: flex;
   align-items: center;
   width: 100vw;
-  height: 40px;
+  height: 42px;
-  background-color: #ffffff;
   box-shadow: var(--BOX_SHADOW_LEVEL2);
-  padding: 0 6px;
+  padding: 1px 6px;
+  gap: 12px;
+  background-color: #fff;
+  .NavbarSearchModified {
+    background-color: #e5e5e5;
+  }
+  .custom-input {
+    background-color: #e5e5e5;
+    border: none;
+    font-family: "Poppins";
+    font-weight: 500;
+  }
+  .search-input {
+    border: none !important;
+  }
+
+  @media (max-width: 1024px) {
+    .nameofBracnchmain {
+      width: 100px !important;
+    }
+  }
+  .ParkingIconDea {
+    background-color: #fff !important;
+    fill: #1292ee;
+  }
+  .ParkingIconActive {
+    background-color: #fff !important;
+    fill: #52c41a;
+  }
+}
+.BSBillingNavBar3 {
+  display: flex;
+  align-items: center;
+  width: 100vw;
+  height: 42px;
+  box-shadow: var(--BOX_SHADOW_LEVEL2);
+  padding: 1px 6px;
+  gap: 12px;
+  background: linear-gradient(to bottom right, #1e2536, #2a3447);
+
+  @media (max-width: 1024px) {
+    .nameofBracnchmain {
+      width: 100px !important;
+    }
+  }
 }
 
 .BSBillingNav1div2 {
@@ -15,13 +59,14 @@
   align-items: center;
   width: 100vw;
   color: var(--DEFAULT_SELECTED_COLOR);
+
   .BSBillingNavBar1-SearchBar {
     font-size: 12px !important;
     font-family: "Poppins" !important;
     font-weight: 500;
     justify-content: center;
     white-space: nowrap;
-    background-color: #f4f4f4;
+    background-color: #e5e5e5;
     padding: 1px 6px;
     div {
       text-align: center;
@@ -90,6 +135,10 @@
   width: 1.7rem;
   margin-right: 1rem;
   color: var(--DEFAULT_SELECTED_COLOR);
+  @media (max-width: 1024px) {
+    display: flex;
+    margin-right: 1rem;
+  }
 }
 
 .BSBillingNavBar1-smallscreen-Inputsearch-container {
@@ -121,11 +170,6 @@
 }
 
 @media (max-width: 1000px) {
-  .BSBillingnav1-threedots {
-    display: flex;
-    margin-right: 1rem;
-  }
-
   .BSBillingNavBar1-AllIcons {
     display: none;
   }
@@ -147,9 +191,8 @@
   .BSBillingNav1div2 {
     display: flex;
     flex-direction: row;
-    justify-content: space-around;
+    justify-content: space-between;
     align-items: center;
-    column-gap: 0rem !important;
     width: 100%;
     .ant-select-selector {
       height: max-content !important;
@@ -164,23 +207,6 @@
     text-align: center;
     font-size: 14px;
   }
-
-  .BSBillingnav1-Smallscreen {
-    position: absolute;
-    right: 0;
-    top: 40px;
-    display: flex !important;
-    border-right: 1px solid rgb(204, 198, 198);
-    background-color: rgb(255, 255, 255);
-    z-index: 3 !important;
-    justify-content: center;
-    padding: 10px;
-    box-shadow:
-      rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
-      rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
-    height: 100vh;
-    width: 100px;
-  }
 }
 
 @media all and (max-width: 499px) {
@@ -252,10 +278,8 @@
 .BSNavbar1-time-user {
   display: flex;
   align-items: center;
-  column-gap: 1rem;
+  gap: 12px;
   justify-content: flex-end;
-  margin-right: 1rem;
-  margin-left: 1rem;
 }
 
 .UserProfile {
@@ -334,6 +358,22 @@
 
 .BSBillingnav1-Smallscreen {
   display: none;
+  @media (max-width: 1024px) {
+    position: absolute;
+    right: 0;
+    top: 40px;
+    display: flex !important;
+    border-right: 1px solid rgb(204, 198, 198);
+    background-color: rgb(255, 255, 255);
+    z-index: 3 !important;
+    justify-content: center;
+    padding: 10px;
+    box-shadow:
+      rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
+      rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
+    height: 100vh;
+    width: 100px;
+  }
 }
 
 .BSNavbar1-timer .mytimer-width-container {
@@ -492,9 +532,11 @@
   align-items: center;
   column-gap: 4px;
   position: relative;
+  width: 100%;
+  max-width: 300px;
   .BarCodeScanMaster {
     position: absolute;
-    right: 10px;
+    right: 15px;
     top: 20%;
     padding: 0 !important;
     svg {
@@ -504,7 +546,7 @@
   }
 
   .MultiSearchIconDiv {
-    color: #1292ee !important;
+    color: #333 !important;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -513,7 +555,7 @@
     height: 27px;
     position: absolute;
     z-index: 10;
-    left: 6px;
+    right: 6px;
     background-color: unset !important;
   }
   .custom-input {
@@ -525,8 +567,8 @@
 }
 .BsNavbar1FullScreen {
   background-color: #1292ee;
-  height: 28px;
+  height: max-content;
-  width: 28px;
+  width: max-content;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -534,17 +576,248 @@
   cursor: pointer;
   font-size: 18px;
   color: #fff;
+  padding: 6px;
 }
 
 .BsNavbar1FullScreenExit {
   background-color: #ef4444;
-  height: 28px;
+  height: max-content;
-  width: 28px;
+  width: max-content;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 4px;
-  color: #fff;
-  font-size: 18px;
   cursor: pointer;
+  font-size: 19px;
+  color: #fff;
+  padding: 6px;
+}
+
+.BSNavbarHomeIcon {
+  color: #1292ee;
+  cursor: pointer;
+  width: 30px !important;
+  height: 30px !important;
+}
+
+.NavbarCus-Add {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.PrinterSettingMB {
+  color: #1292ee;
+  font-size: 20px;
+}
+
+.BsNavbar-IconSections {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  @media (max-width: 1024px) {
+    display: none;
+  }
+}
+.BSBillingNav1div2 .EstimateButton {
+  flex-direction: row !important;
+}
+//
+//
+//
+// Responsive navbar code
+//
+//
+//
+
+.resNavbarMain {
+  width: 100vw;
+  height: 100vh;
+  background-color: #00000056;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 99999;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  overflow: visible;
+  backdrop-filter: blur(6px);
+  animation: fadeInRes 0.3s ease;
+
+  &.closing {
+    animation: fadeOutRes 0.3s ease;
+  }
+
+  .ResBsNavbar-IconSections {
+    background-color: #fff;
+    display: flex;
+    height: 100%;
+    width: max-content;
+    padding: 0 16px;
+    gap: 10px;
+    flex-direction: column;
+    align-items: center;
+    animation: slideInRightRes 0.3s ease;
+    .BSBillingNav-icon {
+      color: #1292ee;
+    }
+  }
+
+  &.closing .ResBsNavbar-IconSections {
+    animation: slideOutRightRes 0.3s ease;
+  }
+
+  .EstimateButton {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    color: #52c41a;
+    background-color: #1292ee;
+    height: 30px;
+    width: max-content;
+    justify-content: space-around;
+    border-radius: 6px;
+    padding: 0 5px;
+    padding: 10px;
+  }
+  .resnavbarClose {
+    display: flex;
+    width: 100%;
+    padding: 12px 0px 0 12px;
+    justify-content: flex-end;
+    cursor: pointer;
+    color: #ff0000;
+    font-size: 24px;
+    font-weight: 800;
+  }
+}
+
+.ReprintIconRes {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.ParkingIconDea {
+  background-color: #1292ee !important;
+}
+.ParkingIconActive {
+  background-color: #52c41a !important;
+}
+
+.NavbarSearchModified {
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  padding: 2px 6px;
+  gap: 10px;
+  border-radius: 6px;
+  width: 100%;
+  max-width: 300px;
+
+  .BSNavBarSearchMaster {
+    width: 80%;
+  }
+  .custom-input {
+    padding: 6px 0 !important;
+    height: unset;
+    border: none !important;
+    color: #333 !important;
+    width: 100%;
+    border-radius: 0 !important;
+  }
+  .search-icon {
+    display: none;
+  }
+  .Prdinput-container {
+    width: 100%;
+  }
+
+  .bothnbavbarIcon {
+    color: #333;
+  }
+}
+
+@keyframes fadeInRes {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOutRes {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slideInRightRes {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutRightRes {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+.BSBillingNavBar3 {
+  .BSNavbarHomeIcon,
+  .nameofBracnchmain,
+  .BSBillingNav-icon,
+  .favIcon,
+  .PrinterSettingMB,
+  .UserProfile {
+    color: #fff !important;
+  }
+  .OtherServiceParking,
+  .EstimateButton,
+  .WholesaleretialChangeIcon,
+  .BsNavbar1FullScreen,
+  .BSBillingNavBar1-SearchBar {
+    background-color: #fff !important;
+  }
+  .ParkingIconDea {
+    background-color: #000000 !important;
+    fill: #fff !important;
+  }
+
+  .ParkingIconActive {
+    background-color: #ffffff !important;
+    fill: #52c41a;
+  }
+  .WholesaleretialChangeIcon svg {
+    color: #1292ee !important;
+  }
+  .favIcon svg {
+    color: #fff !important;
+  }
+  .BsNavbar1FullScreen {
+    color: #1292ee !important;
+  }
+  .BSBillingNavBar1-SearchBar {
+    font-size: 11px !important;
+    line-height: 1.3;
+  }
+}
+
+.BSBillingNavBar3 {
+  .ResBsNavbar-IconSections {
+    background: linear-gradient(to bottom right, #1e2536, #2a3447);
+  }
 }

src/Styles/BookingScreen/Components/UtillComponents/BSNavBarComponents.scss

@@ -347,8 +347,6 @@
 
 @media only screen and (max-width: 1000px) {
   .BSBillingNav1div2 .EstimateButton {
-    flex-direction: column !important;
-    height: max-content !important;
     padding: 5px 2px;
   }
 }

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

@@ -40,7 +40,7 @@ body {
 .BSLayout2Standard {
   overflow: hidden;
   position: relative;
-  top: 2rem;
+  top: 2.1rem;
   height: 100%;
 
   @media (max-width: 768px) {
@@ -359,12 +359,12 @@ body {
 
 .salesStoreName {
   color: #000000;
-  padding: 0.1rem 0.5rem;
+  padding: 0;
   font-size: 14px;
   font-weight: 500;
   text-align: center;
   font-family: "Poppins";
-  margin: 3px 3px 1px 3px;
+  margin: 0;
 
   svg {
     display: flex;

src/Styles/OverAllStyle/OverAllStyle.scss

@@ -1473,7 +1473,6 @@ table {
     height: 70vh;
     overflow-y: auto;
     scrollbar-width: thin;
-    /* Firefox */
     scroll-behavior: auto;
   }
 
@@ -1490,8 +1489,8 @@ table {
 .bulkChangePriceTable {
   width: 83vw;
   overflow: auto;
-  height: 60vh;
   scrollbar-width: thin;
+  height: 60vh;
   position: relative;
 
   .ant-table-cell {
@@ -1580,7 +1579,7 @@ table {
   height: max-content;
   max-height: 300px;
   width: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
   & .ant-table-wrapper table {
     width: 80%;
   }
@@ -1592,7 +1591,7 @@ table {
   flex-wrap: wrap;
   height: 400px;
   width: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
   & .ant-table-wrapper table {
     width: 100%;
   }
@@ -1688,3 +1687,16 @@ table {
     padding: 10px 0 !important;
   }
 }
+
+.CusAddressAddBtn {
+  background-color: #1677ff;
+  color: #fff;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12px;
+  margin-top: 8px;
+  font-weight: 400;
+  font-family: "Poppins";
+}