From 7d070a1ca1df016046080da7a716d9570bf1209b Mon Sep 17 00:00:00 2001
From: vignesh <vickypeter447@gmail.com>
Date: Thu, 12 Mar 2026 16:36:49 +0530
Subject: [PATCH] after resolved conflicts

---
 .../Template/BSLayout1/BSLayout1.jsx          | 362 +++++++++---------
 .../Template/BSLayout4/BSLayout4.jsx          | 267 ++++++-------
 .../Template/BSLayout5/BSLayout5.jsx          | 312 +++++++--------
 3 files changed, 459 insertions(+), 482 deletions(-)

diff --git a/src/Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx b/src/Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx
index c03c917..ef79dd1 100644
--- a/src/Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx
+++ b/src/Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx
@@ -16,7 +16,7 @@ import BSBillingTable6 from '../../Components/BSBillingTables/BSBillingTable6/BS
 import BSBillingTable7 from '../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx';
 import BSItemCard from '../../Components/BSItemCards/BSItemCard';
 import CategoryHorizontal from '../../Components/BSCategories/BSCategoryHorizontal';
-import SubCategory from '../../Components/BSSubCategories/BSSubCategoryHorizontal';
+import SubCategoryVertical from '../../Components/BSSubCategories/BSSubCategoryVertical';
 import { dynamicComponentProps } from '../DynamicComponentProps.js';
 import {
   SelectedGlobalLayoutColorDetail,
@@ -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,190 +339,183 @@ const BSLayout1 = () => {
           style={{ height: containerHeight, overflow: 'hidden' }}
         >
           <div className="BSLayout1-NavBar">
-            {BookingNavbar == 'Navbar1' && <BSNavbar1 />}
-            {BookingNavbar == 'Navbar2' && <BSNavbar2 />}
-            {BookingNavbar == 'Navbar3' && <BSNavbar3 />}
+            <BSNavbar1
+              BookingNavbar={BookingNavbar}
+              connectingState={connectingState}
+              setConnectingState={setConnectingState}
+            />
           </div>
           <div
             className={
-              BookingNavbar != 'Navbar3' ? 'BSLayout1Main' : 'BSLayout1Standard'
+              BookingNavbar != 'Navbar3' ? 'BSLayout1' : 'BSLayout1Standard'
             }
             style={{
               backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
             }}
           >
-            {BookingNavbar != 'Navbar3' ? (
+            <div
+              className="Layout-bill-container"
+              style={{ marginTop: '12px' }}
+            >
               <div
-                className="Layout-bill-container"
-                style={{ marginTop: '12px' }}
+                className="Layout-bill-Subcontainer"
+                style={{ width: OtherServicesglobal ? '10%' : '100%' }}
               >
-                <div
-                  className="Layout-bill-Subcontainer"
-                  style={{ width: OtherServicesglobal ? '10%' : '100%' }}
-                >
-                  {UserType !== 'Employee' && (
-                    <div className="pricing-name-details">
-                      {PricingAppPricingName?.[0]?.PricingName +
-                        ' / ' +
-                        PricingAppPricingName?.[0]?.Type}
-                    </div>
-                  )}
-                  {AvailableDate && (
+                {UserType !== 'Employee' && (
+                  <div className="pricing-name-details">
+                    {PricingAppPricingName?.[0]?.PricingName +
+                      ' / ' +
+                      PricingAppPricingName?.[0]?.Type}
+                  </div>
+                )}
+                {AvailableDate && (
+                  <div
+                    style={{
+                      padding: '3px 5px',
+                      marginLeft: '1rem',
+                    }}
+                  >
+                    <DatePicker
+                      disabledDate={disablePastDates}
+                      // defaultValue={moment()} // today’s date
+                      format="DD-MMM-YYYY"
+                      value={selectedDate ? dayjs(selectedDate) : null}
+                      onChange={(date) => setSelectedDate(date)}
+                    />
+                  </div>
+                )}
+                {!OtherServicesglobal && (
+                  <SalesCountComponent
+                    DineInAccess={DineInAccess}
+                    GlobalsalesDetailData={GlobalsalesDetailData}
+                    BookingNavbar={BookingNavbar}
+                  />
+                )}
+                {SessionData?.FeatureAddonData?.FeatureDtls?.find(
+                  (item) =>
+                    item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+                ) &&
+                  !sportsAppPreference && (
                     <div
                       style={{
-                        padding: '3px 5px',
-                        marginLeft: '1rem',
+                        pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
+                        opacity: OrderStatus > 0 ? 0.5 : 1,
                       }}
                     >
-                      <DatePicker
-                        disabledDate={disablePastDates}
-                        // defaultValue={moment()} // today’s date
-                        format="DD-MMM-YYYY"
-                        value={selectedDate ? dayjs(selectedDate) : null}
-                        onChange={(date) => setSelectedDate(date)}
+                      {!OtherServicesglobal && (
+                        <Tooltip title={'Kiosk Sales'}>
+                          <Badge
+                            count={badgeCount}
+                            offset={[-10, 3]}
+                            size="small"
+                          >
+                            <PozoKioskIcon
+                              onClick={() => openModalKiosk()}
+                              style={{
+                                cursor: 'pointer',
+                                fontSize: '1.5rem',
+                              }}
+                              className="iconsize"
+                            />
+                          </Badge>
+                        </Tooltip>
+                      )}
+                    </div>
+                  )}
+                {!OtherServicesglobal && (
+                  <TooltipWrapper
+                    title={'Low Stock Alerts'}
+                    isMobile={isMobile}
+                  >
+                    {' '}
+                    <BSExpireProductsList />
+                  </TooltipWrapper>
+                )}
+                {Kioskopen && (
+                  <BSKioskCounterPayment
+                    Kioskopen={Kioskopen}
+                    closeKioskModal={closeModalKiosk}
+                  />
+                )}
+                {SAdminuserPin?.length > 0 &&
+                  UserType != 'Super Admin User' && (
+                    <div>
+                      <SAdminUserNotification
+                        SAdminuserPin={SAdminuserPin}
+                        popOverOpen={popOverOpen}
+                        handleSupportUser={handleSupportUser}
+                        handlePopOverOpen={handlePopOverOpen}
                       />
                     </div>
                   )}
-                  {!OtherServicesglobal && (
-                    <SalesCountComponent
-                      DineInAccess={DineInAccess}
-                      GlobalsalesDetailData={GlobalsalesDetailData}
-                    />
-                  )}
-                  {SessionData?.FeatureAddonData?.FeatureDtls?.find(
-                    (item) =>
-                      item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
-                  ) &&
-                    !sportsAppPreference && (
-                      <div
-                        style={{
-                          pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
-                          opacity: OrderStatus > 0 ? 0.5 : 1,
-                        }}
-                      >
-                        {!OtherServicesglobal && (
-                          <Tooltip title={'Kiosk Sales'}>
-                            <Badge
-                              count={badgeCount}
-                              offset={[-10, 3]}
-                              size="small"
-                            >
-                              <PozoKioskIcon
-                                onClick={() => openModalKiosk()}
-                                style={{
-                                  cursor: 'pointer',
-                                  fontSize: '1.5rem',
-                                }}
-                                className="iconsize"
-                              />
-                            </Badge>
-                          </Tooltip>
-                        )}
-                      </div>
-                    )}
-                  {!OtherServicesglobal && (
-                    <TooltipWrapper
-                      title={'Low Stock Alerts'}
-                      isMobile={isMobile}
-                    >
-                      {' '}
-                      <BSExpireProductsList />
-                    </TooltipWrapper>
-                  )}
-                  {Kioskopen && (
-                    <BSKioskCounterPayment
-                      Kioskopen={Kioskopen}
-                      closeKioskModal={closeModalKiosk}
-                    />
-                  )}
-                  {SAdminuserPin?.length > 0 &&
-                    UserType != 'Super Admin User' && (
-                      <div>
-                        <SAdminUserNotification
-                          SAdminuserPin={SAdminuserPin}
-                          popOverOpen={popOverOpen}
-                          handleSupportUser={handleSupportUser}
-                          handlePopOverOpen={handlePopOverOpen}
-                        />
-                      </div>
-                    )}
-                  {!OtherServicesglobal && (
-                    <>
-                      <div>
-                        {CheckBookingStatus == 'Open' ? (
-                          <div style={{ marginLeft: '10px' }}>
-                            <TooltipWrapper
-                              title={'Booking Close'}
-                              isMobile={isMobile}
-                            >
-                              {' '}
-                              <BookingCloseIcon
-                                onClick={OpenBookingModal}
-                                bgFill={'#52c41a'}
-                                style={{
-                                  fontSize: '16px',
-                                  marginTop: '4px',
-                                  color: '#52c41a',
-                                  cursor: 'pointer',
-                                }}
-                              />
-                            </TooltipWrapper>
-                          </div>
-                        ) : (
-                          <div style={{ marginLeft: '10px' }}>
-                            <TooltipWrapper
+                {!OtherServicesglobal && (
+                  <>
+                    <div>
+                      {CheckBookingStatus == 'Open' ? (
+                        <div style={{ marginLeft: '10px' }}>
+                          <TooltipWrapper
+                            title={'Booking Close'}
+                            isMobile={isMobile}
+                          >
+                            {' '}
+                            <BookingCloseIcon
+                              onClick={OpenBookingModal}
+                              bgFill={'#52c41a'}
+                              style={{
+                                fontSize: '16px',
+                                marginTop: '4px',
+                                color: '#52c41a',
+                                cursor: 'pointer',
+                              }}
+                            />
+                          </TooltipWrapper>
+                        </div>
+                      ) : (
+                        <div style={{ marginLeft: '10px' }}>
+                          <TooltipWrapper
+                            title="Booking Open"
+                            isMobile={isMobile}
+                          >
+                            <Popconfirm
+                              placement="leftTop"
                               title="Booking Open"
-                              isMobile={isMobile}
+                              description="Are you sure you want to Open the sales?"
+                              okText="Yes"
+                              cancelText="No"
+                              onConfirm={() => BookingOpenFun('Open')}
                             >
-                              <Popconfirm
-                                placement="leftTop"
-                                title="Booking Open"
-                                description="Are you sure you want to Open the sales?"
-                                okText="Yes"
-                                cancelText="No"
-                                onConfirm={() => BookingOpenFun('Open')}
-                              >
-                                <span>
-                                  <BookingCloseIcon
-                                    bgFill="red"
-                                    style={{
-                                      fontSize: '16px',
-                                      marginTop: '4px',
-                                      color: '#52c41a',
-                                      cursor: 'pointer',
-                                    }}
-                                  />
-                                </span>
-                              </Popconfirm>
-                            </TooltipWrapper>
-                          </div>
-                        )}
-                      </div>
-                      <div style={{ marginLeft: '10px' }}>
-                        <TooltipWrapper
-                          title={'E-way Bill'}
-                          isMobile={isMobile}
-                        >
-                          {''}
-                          <BSEwayBillicon
-                            style={{ cursor: 'pointer', marginTop: '5px' }}
-                            onClick={OpenListOfInvoices}
-                          />
-                        </TooltipWrapper>
-                      </div>
-                    </>
-                  )}
-                </div>
+                              <span>
+                                <BookingCloseIcon
+                                  bgFill="red"
+                                  style={{
+                                    fontSize: '16px',
+                                    marginTop: '4px',
+                                    color: '#52c41a',
+                                    cursor: 'pointer',
+                                  }}
+                                />
+                              </span>
+                            </Popconfirm>
+                          </TooltipWrapper>
+                        </div>
+                      )}
+                    </div>
+                    <div style={{ marginLeft: '10px' }}>
+                      <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
+                        {''}
+                        <BSEwayBillicon
+                          style={{ cursor: 'pointer', marginTop: '5px' }}
+                          onClick={OpenListOfInvoices}
+                        />
+                      </TooltipWrapper>
+                    </div>
+                  </>
+                )}
               </div>
-            ) : (
-              <SalesCountForStandard
-                PricingAppPricingName={PricingAppPricingName}
-                DineInAccess={DineInAccess}
-                GlobalsalesDetailData={GlobalsalesDetailData}
-              />
-            )}
-            <div className="BSLayout1Master">
-              <div className="BSCategoryCardDiv">
+            </div>
+
+            <div className="BSLayout1-ContentDiv">
+              <div className="BSCategory1-Contentcont">
                 <div
                   style={{
                     backgroundColor:
@@ -549,26 +543,22 @@ const BSLayout1 = () => {
                 </div>
 
                 <div className="BSCategory1-Cardcont">
-                  {
-                    <div
-                      style={{
-                        backgroundColor:
-                          SelectedSubCatgColor?.['OverallBackgroundColor'],
-                        display: BookingSubCategory ? 'block' : 'none',
-                      }}
-                    >
-                      {Comboglobal === false && !OtherServicesglobal && (
-                        <SubCategory
-                          subCategoryType={'vertical'}
-                          categoryFunction={dynamicComponentProps(
-                            'SubCategory',
-                            BSLayout1Data?.BookingSubCategory?.[1],
-                            BSLayout1Data?.BookingSubCategory?.[0]
-                          )}
-                        />
-                      )}
-                    </div>
-                  }
+                  <div
+                    style={{
+                      backgroundColor:
+                        SelectedSubCatgColor?.['OverallBackgroundColor'],
+                    }}
+                  >
+                    {Comboglobal === false && !OtherServicesglobal && (
+                      <SubCategoryVertical
+                        categoryFunction={dynamicComponentProps(
+                          'SubCategory',
+                          BSLayout1Data?.BookingSubCategory?.[1],
+                          BSLayout1Data?.BookingSubCategory?.[0]
+                        )}
+                      />
+                    )}
+                  </div>
 
                   <div
                     className="layout1-card-content"
@@ -592,6 +582,8 @@ const BSLayout1 = () => {
                         />
                       ) : (
                         <BSItemCard
+                          connectingState={connectingState}
+                          setConnectingState={setConnectingState}
                           screenHeight={screenHeight}
                           cardFunctionality={dynamicComponentProps(
                             'Card',
diff --git a/src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx b/src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx
index 4e24afb..fb57f96 100644
--- a/src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx
+++ b/src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx
@@ -6,8 +6,8 @@ import { isMobile } from 'react-device-detect';
 import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
 const BSNavbar1 = lazy(() => import('../../Components/BSNavbar/BSNavbar1'));
 const BSNavbar2 = lazy(() => import('../../Components/BSNavbar/BSNavbar2'));
-const CategoryHorizontal = lazy(
-  () => import('../../Components/BSCategories/BSCategoryHorizontal')
+const CategoryVertical = lazy(
+  () => import('../../Components/BSCategories/BSCategoryVertical')
 );
 const BSItemCard = lazy(
   () => import('../../Components/BSItemCards/BSItemCard')
@@ -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')
@@ -179,7 +180,7 @@ const BSLayout4 = () => {
   const BookingCategory = BSLayout4Data?.BookingCategory;
   const BookingCard = BSLayout4Data?.BookingCard;
   const BookingBilling = BSLayout4Data?.BookingBilling?.[0];
-  console.log('BSLayout4Data', BookingCategory);
+  console.log('BSLayout4Data', BookingBilling);
   const DineInAccess = SettingDataSelector?.[0]?.SettingDtlDetails.filter(
     (i) => i.SettingIdName === 'DineIn'
   )?.[0];
@@ -337,93 +338,111 @@ const BSLayout4 = () => {
           style={{ height: containerHeight, overflow: 'hidden' }}
         >
           <div className="Bslayout4_navbar">
-            {BookingNavbar == 'Navbar1' && <BSNavbar1 />}
-            {BookingNavbar == 'Navbar2' && <BSNavbar2 />}
-            {BookingNavbar == 'Navbar3' && <BSNavbar3 />}
+            <BSNavbar1
+              connectingState={connectingState}
+              setConnectingState={setConnectingState}
+              BookingNavbar={BookingNavbar}
+            />
           </div>
-          {BookingNavbar != 'Navbar3' ? (
-            <div className="Layout-bill-container" style={{ margin: '0' }}>
-              <div
-                className="Layout-bill-Subcontainer"
-                style={{ width: OtherServicesglobal ? '10%' : '100%' }}
-              >
-                {UserType !== 'Employee' && (
-                  <div className="pricing-name-details">
-                    {PricingAppPricingName?.[0]?.PricingName +
-                      ' / ' +
-                      PricingAppPricingName?.[0]?.Type}
+
+          <div className="Layout-bill-container" style={{ margin: '0' }}>
+            <div
+              className="Layout-bill-Subcontainer"
+              style={{ width: OtherServicesglobal ? '10%' : '100%' }}
+            >
+              {UserType !== 'Employee' && (
+                <div className="pricing-name-details">
+                  {PricingAppPricingName?.[0]?.PricingName +
+                    ' / ' +
+                    PricingAppPricingName?.[0]?.Type}
+                </div>
+              )}
+              {!OtherServicesglobal && (
+                <SalesCountComponent
+                  DineInAccess={DineInAccess}
+                  GlobalsalesDetailData={GlobalsalesDetailData}
+                  BookingNavbar={BookingNavbar}
+                />
+              )}
+              {!OtherServicesglobal &&
+                SessionData?.FeatureAddonData?.FeatureDtls?.find(
+                  (item) =>
+                    item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+                ) &&
+                !sportsAppPreference && (
+                  <div
+                    style={{
+                      pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
+                      opacity: OrderStatus > 0 ? 0.5 : 1,
+                    }}
+                  >
+                    <Tooltip title={'Kiosk Sales'}>
+                      <Badge count={badgeCount} offset={[-10, 3]} size="small">
+                        <PozoKioskIcon
+                          onClick={() => openModalKiosk()}
+                          style={{ cursor: 'pointer', fontSize: '1.5rem' }}
+                          className="iconsize"
+                        />
+                      </Badge>
+                    </Tooltip>
                   </div>
                 )}
-                {!OtherServicesglobal && (
-                  <SalesCountComponent
-                    DineInAccess={DineInAccess}
-                    GlobalsalesDetailData={GlobalsalesDetailData}
+              {!OtherServicesglobal && (
+                <TooltipWrapper title={'Low Stock Alerts'} isMobile={isMobile}>
+                  {' '}
+                  <BSExpireProductsList />
+                </TooltipWrapper>
+              )}
+              {!OtherServicesglobal && Kioskopen && (
+                <BSKioskCounterPayment
+                  Kioskopen={Kioskopen}
+                  closeKioskModal={closeModalKiosk}
+                />
+              )}
+              {SAdminuserPin?.length > 0 && UserType != 'Super Admin User' && (
+                <div>
+                  <SAdminUserNotification
+                    SAdminuserPin={SAdminuserPin}
+                    popOverOpen={popOverOpen}
+                    handleSupportUser={handleSupportUser}
+                    handlePopOverOpen={handlePopOverOpen}
                   />
-                )}
-                {!OtherServicesglobal &&
-                  SessionData?.FeatureAddonData?.FeatureDtls?.find(
-                    (item) =>
-                      item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
-                  ) &&
-                  !sportsAppPreference && (
-                    <div
-                      style={{
-                        pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
-                        opacity: OrderStatus > 0 ? 0.5 : 1,
-                      }}
-                    >
-                      <Tooltip title={'Kiosk Sales'}>
-                        <Badge
-                          count={badgeCount}
-                          offset={[-10, 3]}
-                          size="small"
-                        >
-                          <PozoKioskIcon
-                            onClick={() => openModalKiosk()}
-                            style={{ cursor: 'pointer', fontSize: '1.5rem' }}
-                            className="iconsize"
-                          />
-                        </Badge>
-                      </Tooltip>
-                    </div>
-                  )}
-                {!OtherServicesglobal && (
-                  <TooltipWrapper
-                    title={'Low Stock Alerts'}
-                    isMobile={isMobile}
-                  >
-                    {' '}
-                    <BSExpireProductsList />
-                  </TooltipWrapper>
-                )}
-                {!OtherServicesglobal && Kioskopen && (
-                  <BSKioskCounterPayment
-                    Kioskopen={Kioskopen}
-                    closeKioskModal={closeModalKiosk}
-                  />
-                )}
-                {SAdminuserPin?.length > 0 &&
-                  UserType != 'Super Admin User' && (
-                    <div>
-                      <SAdminUserNotification
-                        SAdminuserPin={SAdminuserPin}
-                        popOverOpen={popOverOpen}
-                        handleSupportUser={handleSupportUser}
-                        handlePopOverOpen={handlePopOverOpen}
+                </div>
+              )}
+              {CheckBookingStatus == 'Open' ? (
+                !OtherServicesglobal && (
+                  <div style={{ marginLeft: '10px' }}>
+                    <TooltipWrapper title={'Booking Close'} isMobile={isMobile}>
+                      {' '}
+                      <BookingCloseIcon
+                        onClick={OpenBookingModal}
+                        bgFill={'#52c41a'}
+                        style={{
+                          fontSize: '16px',
+                          marginTop: '4px',
+                          color: '#52c41a',
+                          cursor: 'pointer',
+                        }}
                       />
-                    </div>
-                  )}
-                {CheckBookingStatus == 'Open' ? (
-                  !OtherServicesglobal && (
-                    <div style={{ marginLeft: '10px' }}>
-                      <TooltipWrapper
-                        title={'Booking Close'}
-                        isMobile={isMobile}
-                      >
-                        {' '}
+                      {/* <button className="BookingCloseButton"
+                                        >Booking Close</button> */}
+                    </TooltipWrapper>
+                  </div>
+                )
+              ) : (
+                <div style={{ marginLeft: '10px' }}>
+                  <TooltipWrapper title="Booking Open" isMobile={isMobile}>
+                    <Popconfirm
+                      placement="leftTop"
+                      title="Booking Open"
+                      description="Are you sure you want to Open the sales?"
+                      okText="Yes"
+                      cancelText="No"
+                      onConfirm={() => BookingOpenFun('Open')}
+                    >
+                      <span>
                         <BookingCloseIcon
-                          onClick={OpenBookingModal}
-                          bgFill={'#52c41a'}
+                          bgFill="red"
                           style={{
                             fontSize: '16px',
                             marginTop: '4px',
@@ -431,69 +450,32 @@ const BSLayout4 = () => {
                             cursor: 'pointer',
                           }}
                         />
-                      </TooltipWrapper>
-                    </div>
-                  )
-                ) : (
-                  <div style={{ marginLeft: '10px' }}>
-                    <TooltipWrapper title="Booking Open" isMobile={isMobile}>
-                      <Popconfirm
-                        placement="leftTop"
-                        title="Booking Open"
-                        description="Are you sure you want to Open the sales?"
-                        okText="Yes"
-                        cancelText="No"
-                        onConfirm={() => BookingOpenFun('Open')}
-                      >
-                        <span>
-                          <BookingCloseIcon
-                            bgFill="red"
-                            style={{
-                              fontSize: '16px',
-                              marginTop: '4px',
-                              color: '#52c41a',
-                              cursor: 'pointer',
-                            }}
-                          />
-                        </span>
-                      </Popconfirm>
-                    </TooltipWrapper>
-                  </div>
-                )}
-                {!OtherServicesglobal && (
-                  <div style={{ marginLeft: '10px' }}>
-                    <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
-                      {''}
-                      <BSEwayBillicon
-                        style={{ cursor: 'pointer', marginTop: '5px' }}
-                        onClick={OpenListOfInvoices}
-                      />
-                    </TooltipWrapper>
-                  </div>
-                )}
-              </div>
+                      </span>
+                    </Popconfirm>
+                  </TooltipWrapper>
+                </div>
+              )}
+              {!OtherServicesglobal && (
+                <div style={{ marginLeft: '10px' }}>
+                  <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
+                    {''}
+                    <BSEwayBillicon
+                      style={{ cursor: 'pointer', marginTop: '5px' }}
+                      onClick={OpenListOfInvoices}
+                    />
+                  </TooltipWrapper>
+                </div>
+              )}
             </div>
-          ) : (
-            <SalesCountForStandard
-              PricingAppPricingName={PricingAppPricingName}
-              DineInAccess={DineInAccess}
-              GlobalsalesDetailData={GlobalsalesDetailData}
-            />
-          )}
+          </div>
+
           <div
             className="Bslayout4_overall"
             style={{
               backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
             }}
           >
-            {/* <div className="BSlayout_subdiv"> */}
-            <div
-              className={
-                BookingCategory?.[0] === 'Category5'
-                  ? 'bslayout4Cat5Flex'
-                  : 'BSlayout_subdiv'
-              }
-            >
+            <div className="BSlayout_subdiv">
               <div
                 className="Bslayout4_ctg"
                 style={{
@@ -502,13 +484,12 @@ const BSLayout4 = () => {
                 }}
               >
                 {!OtherServicesglobal && (
-                  <CategoryHorizontal
+                  <CategoryVertical
                     categoryFunction={dynamicComponentProps(
                       'Category',
                       BookingCategory?.[1],
                       BookingCategory?.[0]
                     )}
-                    categoryType={'vertical'}
                   />
                 )}
                 {OtherServicesglobal && (
@@ -532,6 +513,8 @@ const BSLayout4 = () => {
               >
                 {!OtherServicesglobal && Comboglobal === false && (
                   <BSItemCard
+                    connectingState={connectingState}
+                    setConnectingState={setConnectingState}
                     cardFunctionality={dynamicComponentProps(
                       'Card',
                       BookingCard?.[1],
diff --git a/src/Pages/BookingScreen/Template/BSLayout5/BSLayout5.jsx b/src/Pages/BookingScreen/Template/BSLayout5/BSLayout5.jsx
index 36367f3..9f69b93 100644
--- a/src/Pages/BookingScreen/Template/BSLayout5/BSLayout5.jsx
+++ b/src/Pages/BookingScreen/Template/BSLayout5/BSLayout5.jsx
@@ -38,9 +38,7 @@ const BSBillingTable7 = lazy(
     import('../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx')
 );
 import BSItemCard from '../../Components/BSItemCards/BSItemCard';
-const CategoryHorizontal = lazy(
-  () => import('../../Components/BSCategories/BSCategoryHorizontal')
-);
+import CategoryVertical from '../../Components/BSCategories/BSCategoryVertical';
 import { dynamicComponentProps } from '../DynamicComponentProps.js';
 import {
   GlobalPricingAppPricingName,
@@ -138,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];
@@ -327,9 +326,11 @@ const BSLayout5 = () => {
           style={{ height: containerHeight, overflow: 'hidden' }}
         >
           <div className="BSLayout5-NavBar">
-            {BSLayout5Data?.BookingNavbar?.[0] == 'Navbar1' && <BSNavbar1 />}
-            {BSLayout5Data?.BookingNavbar?.[0] == 'Navbar2' && <BSNavbar2 />}
-            {BSLayout5Data?.BookingNavbar?.[0] == 'Navbar3' && <BSNavbar3 />}
+            <BSNavbar1
+              BookingNavbar={BookingNavbar}
+              connectingState={connectingState}
+              setConnectingState={setConnectingState}
+            />
           </div>
 
           <div
@@ -338,153 +339,148 @@ const BSLayout5 = () => {
               backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
             }}
           >
-            {BookingNavbar != 'Navbar3' ? (
-              <div className="Layout-bill-container">
-                <div
-                  className="Layout-bill-Subcontainer"
-                  style={{ width: OtherServicesglobal ? '10%' : '100%' }}
-                >
-                  {UserType !== 'Employee' && (
-                    <div className="pricing-name-details">
-                      {PricingAppPricingName?.[0]?.PricingName +
-                        ' / ' +
-                        PricingAppPricingName?.[0]?.Type}
-                    </div>
-                  )}
-                  {!OtherServicesglobal && (
-                    <SalesCountComponent
-                      DineInAccess={DineInAccess}
-                      GlobalsalesDetailData={GlobalsalesDetailData}
-                    />
-                  )}
+            <div className="Layout-bill-container">
+              <div
+                className="Layout-bill-Subcontainer"
+                style={{ width: OtherServicesglobal ? '10%' : '100%' }}
+              >
+                {UserType !== 'Employee' && (
+                  <div className="pricing-name-details">
+                    {PricingAppPricingName?.[0]?.PricingName +
+                      ' / ' +
+                      PricingAppPricingName?.[0]?.Type}
+                  </div>
+                )}
+                {!OtherServicesglobal && (
+                  <SalesCountComponent
+                    DineInAccess={DineInAccess}
+                    GlobalsalesDetailData={GlobalsalesDetailData}
+                    BookingNavbar={BookingNavbar}
+                  />
+                )}
 
-                  {!OtherServicesglobal &&
-                    SessionData?.FeatureAddonData?.FeatureDtls?.find(
-                      (item) =>
-                        item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
-                    ) &&
-                    !sportsAppPreference && (
-                      <div
-                        style={{
-                          pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
-                          opacity: OrderStatus > 0 ? 0.5 : 1,
-                        }}
-                      >
-                        <Tooltip title={'Kiosk Sales'}>
-                          {''}
-                          <Badge
-                            count={badgeCount}
-                            offset={[-10, 3]}
-                            size="small"
-                          >
-                            <PozoKioskIcon
-                              onClick={() => openModalKiosk()}
-                              style={{ cursor: 'pointer', fontSize: '1.5rem' }}
-                              className="iconsize"
-                            />
-                          </Badge>
-                        </Tooltip>
-                      </div>
-                    )}
-                  {!OtherServicesglobal && (
-                    <TooltipWrapper
-                      title={'Low Stock Alerts'}
-                      isMobile={isMobile}
+                {!OtherServicesglobal &&
+                  SessionData?.FeatureAddonData?.FeatureDtls?.find(
+                    (item) =>
+                      item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+                  ) &&
+                  !sportsAppPreference && (
+                    <div
+                      style={{
+                        pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
+                        opacity: OrderStatus > 0 ? 0.5 : 1,
+                      }}
                     >
-                      {' '}
-                      <BSExpireProductsList />
-                    </TooltipWrapper>
-                  )}
-                  {!OtherServicesglobal && Kioskopen && (
-                    <BSKioskCounterPayment
-                      Kioskopen={Kioskopen}
-                      closeKioskModal={closeModalKiosk}
-                    />
-                  )}
-                  {SAdminuserPin?.length > 0 &&
-                    UserType != 'Super Admin User' && (
-                      <div>
-                        <SAdminUserNotification
-                          SAdminuserPin={SAdminuserPin}
-                          popOverOpen={popOverOpen}
-                          handleSupportUser={handleSupportUser}
-                          handlePopOverOpen={handlePopOverOpen}
-                        />
-                      </div>
-                    )}
-                  {!OtherServicesglobal && (
-                    <>
-                      {' '}
-                      {CheckBookingStatus == 'Open' ? (
-                        <div style={{ marginLeft: '10px' }}>
-                          <TooltipWrapper
-                            title={'Booking Close'}
-                            isMobile={isMobile}
-                          >
-                            {' '}
-                            <BookingCloseIcon
-                              onClick={OpenBookingModal}
-                              bgFill={'#52c41a'}
-                              style={{
-                                fontSize: '16px',
-                                marginTop: '4px',
-                                color: '#52c41a',
-                                cursor: 'pointer',
-                              }}
-                            />
-                          </TooltipWrapper>
-                        </div>
-                      ) : (
-                        <div style={{ marginLeft: '10px' }}>
-                          <TooltipWrapper
-                            title="Booking Open"
-                            isMobile={isMobile}
-                          >
-                            <Popconfirm
-                              placement="leftTop"
-                              title="Booking Open"
-                              description="Are you sure you want to Open the sales?"
-                              okText="Yes"
-                              cancelText="No"
-                              onConfirm={() => BookingOpenFun('Open')}
-                            >
-                              <span>
-                                <BookingCloseIcon
-                                  bgFill="red"
-                                  style={{
-                                    fontSize: '16px',
-                                    marginTop: '4px',
-                                    color: '#52c41a',
-                                    cursor: 'pointer',
-                                  }}
-                                />
-                              </span>
-                            </Popconfirm>
-                          </TooltipWrapper>
-                        </div>
-                      )}
-                    </>
-                  )}
-                  {!OtherServicesglobal && (
-                    <div style={{ marginLeft: '10px' }}>
-                      <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
+                      <Tooltip title={'Kiosk Sales'}>
                         {''}
-                        <BSEwayBillicon
-                          style={{ cursor: 'pointer', marginTop: '5px' }}
-                          onClick={OpenListOfInvoices}
-                        />
-                      </TooltipWrapper>
+                        <Badge
+                          count={badgeCount}
+                          offset={[-10, 3]}
+                          size="small"
+                        >
+                          <PozoKioskIcon
+                            onClick={() => openModalKiosk()}
+                            style={{ cursor: 'pointer', fontSize: '1.5rem' }}
+                            className="iconsize"
+                          />
+                        </Badge>
+                      </Tooltip>
                     </div>
                   )}
-                </div>
+                {!OtherServicesglobal && (
+                  <TooltipWrapper
+                    title={'Low Stock Alerts'}
+                    isMobile={isMobile}
+                  >
+                    {' '}
+                    <BSExpireProductsList />
+                  </TooltipWrapper>
+                )}
+                {!OtherServicesglobal && Kioskopen && (
+                  <BSKioskCounterPayment
+                    Kioskopen={Kioskopen}
+                    closeKioskModal={closeModalKiosk}
+                  />
+                )}
+                {SAdminuserPin?.length > 0 &&
+                  UserType != 'Super Admin User' && (
+                    <div>
+                      <SAdminUserNotification
+                        SAdminuserPin={SAdminuserPin}
+                        popOverOpen={popOverOpen}
+                        handleSupportUser={handleSupportUser}
+                        handlePopOverOpen={handlePopOverOpen}
+                      />
+                    </div>
+                  )}
+                {!OtherServicesglobal && (
+                  <>
+                    {' '}
+                    {CheckBookingStatus == 'Open' ? (
+                      <div style={{ marginLeft: '10px' }}>
+                        <TooltipWrapper
+                          title={'Booking Close'}
+                          isMobile={isMobile}
+                        >
+                          {' '}
+                          <BookingCloseIcon
+                            onClick={OpenBookingModal}
+                            bgFill={'#52c41a'}
+                            style={{
+                              fontSize: '16px',
+                              marginTop: '4px',
+                              color: '#52c41a',
+                              cursor: 'pointer',
+                            }}
+                          />
+                          {/* <button className="BookingCloseButton"
+                                                      >Booking Close</button> */}
+                        </TooltipWrapper>
+                      </div>
+                    ) : (
+                      <div style={{ marginLeft: '10px' }}>
+                        <TooltipWrapper
+                          title="Booking Open"
+                          isMobile={isMobile}
+                        >
+                          <Popconfirm
+                            placement="leftTop"
+                            title="Booking Open"
+                            description="Are you sure you want to Open the sales?"
+                            okText="Yes"
+                            cancelText="No"
+                            onConfirm={() => BookingOpenFun('Open')}
+                          >
+                            <span>
+                              <BookingCloseIcon
+                                bgFill="red"
+                                style={{
+                                  fontSize: '16px',
+                                  marginTop: '4px',
+                                  color: '#52c41a',
+                                  cursor: 'pointer',
+                                }}
+                              />
+                            </span>
+                          </Popconfirm>
+                        </TooltipWrapper>
+                      </div>
+                    )}
+                  </>
+                )}
+                {!OtherServicesglobal && (
+                  <div style={{ marginLeft: '10px' }}>
+                    <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
+                      {''}
+                      <BSEwayBillicon
+                        style={{ cursor: 'pointer', marginTop: '5px' }}
+                        onClick={OpenListOfInvoices}
+                      />
+                    </TooltipWrapper>
+                  </div>
+                )}
               </div>
-            ) : (
-              <SalesCountForStandard
-                PricingAppPricingName={PricingAppPricingName}
-                DineInAccess={DineInAccess}
-                GlobalsalesDetailData={GlobalsalesDetailData}
-              />
-            )}
+            </div>
 
             <div className="BsLayout5-ContentDiv">
               <div className="BSCategory5-tablecont">
@@ -507,15 +503,20 @@ const BSLayout5 = () => {
                     )}
                   </>
                 )}
+                {/* <div
+                className="salesStoreName"
+                style={{
+                  color: SelectedBillColor?.['FontColor'],
+                  backgroundColor: SelectedBillColor?.['BackgroundColor'],
+                }}
+              >
+                <BranchName />
+              </div> */}
               </div>
 
-              {/* <div className="BSCategory5-Contentcont"> */}
               <div
-                className={
-                  BookingCategory?.[0] === 'Category5'
-                    ? 'BSlayout5Cat5Flex'
-                    : 'BSCategory5-Contentcont'
-                }
+                className="BSCategory5-Contentcont"
+                style={{ width: '100vw' }}
               >
                 <div
                   style={{
@@ -524,13 +525,12 @@ const BSLayout5 = () => {
                   }}
                 >
                   {!OtherServicesglobal && (
-                    <CategoryHorizontal
+                    <CategoryVertical
                       categoryFunction={dynamicComponentProps(
                         'Category',
                         BookingCategory?.[1],
                         BookingCategory?.[0]
                       )}
-                      categoryType={'vertical'}
                     />
                   )}
                   {OtherServicesglobal && (
@@ -555,6 +555,8 @@ const BSLayout5 = () => {
                 >
                   {!OtherServicesglobal && Comboglobal === false && (
                     <BSItemCard
+                      connectingState={connectingState}
+                      setConnectingState={setConnectingState}
                       cardFunctionality={dynamicComponentProps(
                         'Card',
                         BookingCard?.[1],