Merge pull request 'SalesScreen Table payment Design Optimization' (#288) from Sales-Optimization into main

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

src/Components/Menu/PozoMenu.jsx

@@ -1,15 +1,23 @@
 import { useState, useRef, useEffect } from 'react';
-import { FaCaretRight } from "react-icons/fa";
+import { FaCaretRight } from 'react-icons/fa';
 
 import './PozoMenu.scss';
 import { getSession, sessionStore } from '../../Services/Others';
 
-const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse = false, selectedKey: propSelectedKey, isBottomMenu = false }) => {
+const PozoMenu = ({
+  items = [],
+  mode = 'vertical',
+  style = {},
+  onClick,
+  collapse = false,
+  selectedKey: propSelectedKey,
+  isBottomMenu = false,
+}) => {
   const [openKeys, setOpenKeys] = useState([]);
   const [selectedKey, setSelectedKey] = useState('');
   const [dropdownPositions, setDropdownPositions] = useState({});
   const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
-  const BranchId = getSession("BranchId");
+  const BranchId = getSession('BranchId');
   const menuRef = useRef();
 
   // Update selected key when prop changes
@@ -44,14 +52,14 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
       if (openKeys.length > 0) {
         // Find all currently open menu elements and recalculate their positions
         const newPositions = {};
-        openKeys.forEach(key => {
+        openKeys.forEach((key) => {
           const element = document.querySelector(`[data-menu-key="${key}"]`);
           if (element) {
             const level = key.split('-').length - 1;
             newPositions[key] = calculatePosition(element, level);
           }
         });
-        setDropdownPositions(prev => ({ ...prev, ...newPositions }));
+        setDropdownPositions((prev) => ({ ...prev, ...newPositions }));
       }
     };
 
@@ -77,7 +85,9 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
     // Dynamic dropdown dimensions - responsive
     const dropdownWidth = isMobile
       ? Math.min(280, viewportWidth - 20)
-      : (level > 0 ? 220 : 250);
+      : level > 0
+        ? 220
+        : 250;
     const dropdownHeight = Math.min(
       isMobile ? viewportHeight * 0.5 : 400,
       viewportHeight * 0.6
@@ -94,7 +104,7 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
       top: rect.top + scrollY,
       left: rect.right + gap + scrollX,
       direction: 'right',
-      verticalDirection: 'down'
+      verticalDirection: 'down',
     };
 
     // 🎯 FIXED: HORIZONTAL POSITIONING - Exactly like your images
@@ -103,7 +113,7 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
         spaceRight,
         spaceLeft,
         spaceNeeded,
-        elementPosition: { left: rect.left, right: rect.right }
+        elementPosition: { left: rect.left, right: rect.right },
       });
 
       if (spaceRight >= spaceNeeded) {
@@ -115,7 +125,6 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
         // Image 2: No space on right, space on left - open to LEFT
         position.left = rect.left - dropdownWidth - gap + scrollX;
         position.direction = 'left';
-
       } else {
         // Edge case: Limited space on both sides
         if (spaceRight >= spaceLeft) {
@@ -130,7 +139,8 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
     } else {
       // Nested menu positioning
       const parentKeys = Object.keys(dropdownPositions);
-      const parentDirection = parentKeys.length > 0
+      const parentDirection =
+        parentKeys.length > 0
           ? dropdownPositions[parentKeys[level - 1]]?.direction || 'right'
           : 'right';
 
@@ -173,7 +183,9 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
         position.top = rect.bottom - dropdownHeight + scrollY;
         position.verticalDirection = 'up';
       } else {
-        position.top = Math.max(edgePadding, (viewportHeight - dropdownHeight) / 2) + scrollY;
+        position.top =
+          Math.max(edgePadding, (viewportHeight - dropdownHeight) / 2) +
+          scrollY;
         position.verticalDirection = 'center';
       }
     }
@@ -181,12 +193,18 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
     // 🎯 FIXED: Final boundary checks
     position.left = Math.max(
       edgePadding + scrollX,
-      Math.min(position.left, viewportWidth - dropdownWidth - edgePadding + scrollX)
+      Math.min(
+        position.left,
+        viewportWidth - dropdownWidth - edgePadding + scrollX
+      )
     );
 
     position.top = Math.max(
       edgePadding + scrollY,
-      Math.min(position.top, viewportHeight - dropdownHeight - edgePadding + scrollY)
+      Math.min(
+        position.top,
+        viewportHeight - dropdownHeight - edgePadding + scrollY
+      )
     );
 
     // Store dimensions for reference
@@ -194,10 +212,20 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
     position.height = dropdownHeight;
 
     console.log('🎯 FIXED Position:', {
-      clicked: { top: rect.top, left: rect.left, right: rect.right, bottom: rect.bottom },
+      clicked: {
-      spaces: { right: spaceRight, left: spaceLeft, above: spaceAbove, below: spaceBelow },
+        top: rect.top,
+        left: rect.left,
+        right: rect.right,
+        bottom: rect.bottom,
+      },
+      spaces: {
+        right: spaceRight,
+        left: spaceLeft,
+        above: spaceAbove,
+        below: spaceBelow,
+      },
       calculated: position,
-      direction: position.direction
+      direction: position.direction,
     });
 
     return position;
@@ -205,9 +233,9 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
 
   // Handle menu item click
   const handleMenuClick = (item, event, parentKeys = []) => {
-    if (item?.label === "Branch Signin") {
+    if (item?.label === 'Branch Signin') {
       if (BranchId) {
-        sessionStorage.removeItem("BranchId")
+        sessionStorage.removeItem('BranchId');
       }
     }
     event.stopPropagation();
@@ -219,13 +247,15 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
 
       if (isOpen) {
         // Close this submenu and all its children
-        setOpenKeys(prev => prev.filter(key => {
+        setOpenKeys((prev) =>
+          prev.filter((key) => {
             // Keep only keys that are not this item or its descendants
             return !key.startsWith(itemKey) && key !== itemKey;
-        }));
+          })
-        setDropdownPositions(prev => {
+        );
+        setDropdownPositions((prev) => {
           const newPos = { ...prev };
-          Object.keys(newPos).forEach(key => {
+          Object.keys(newPos).forEach((key) => {
             if (key.startsWith(itemKey) || key === itemKey) {
               delete newPos[key];
             }
@@ -235,27 +265,33 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
       } else {
         // Close all submenus at the same level or deeper
         const currentPath = [...parentKeys, itemKey];
-        const newOpenKeys = openKeys.filter(key => {
+        const newOpenKeys = openKeys.filter((key) => {
           // Keep only parent keys in the current path
-          return currentPath.some(pathKey => key === pathKey) ||
+          return (
+            currentPath.some((pathKey) => key === pathKey) ||
             currentPath.every((pathKey, index) => {
               const keyParts = key.split('-');
               const pathParts = pathKey.split('-');
-              return index < keyParts.length && keyParts[index] === pathParts[index];
+              return (
-            });
+                index < keyParts.length && keyParts[index] === pathParts[index]
+              );
+            })
+          );
         });
 
         // Add current item to open keys
         newOpenKeys.push(itemKey);
 
         // Calculate position and add to dropdown positions
-        const position = calculatePosition(event.currentTarget, parentKeys.length);
+        const position = calculatePosition(
+          event.currentTarget,
+          parentKeys.length
+        );
 
-
+        setDropdownPositions((prev) => {
-        setDropdownPositions(prev => {
           // Remove positions for closed items
           const newPos = {};
-          newOpenKeys.forEach(key => {
+          newOpenKeys.forEach((key) => {
             if (prev[key]) newPos[key] = prev[key];
           });
           newPos[itemKey] = position;
@@ -270,16 +306,23 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
       setOpenKeys([]);
       setDropdownPositions({});
 
+      // Fullscreen on Sales Entry click
+
+      if (item.label === 'Sales Entry') {
+        if (!document.fullscreenElement) {
+          document.documentElement.requestFullscreen().catch(() => {});
+        }
+      }
+
       // Trigger onClick callback if provided
       if (onClick) {
         onClick({
           key: item.key,
           keyPath: [...parentKeys, item.key],
           item: item,
-          domEvent: event
+          domEvent: event,
         });
       }
-
     }
   };
 
@@ -294,7 +337,7 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
     if (!item.children) return false;
 
     const checkChildren = (children, currentPath) => {
-      return children.some(child => {
+      return children.some((child) => {
         const childPath = [...currentPath, child.key];
         if (child.key === selectedKey) return true;
         if (child.children) {
@@ -333,10 +376,13 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
             className={`pozo-menu-item ${isItemSelected ? 'selected' : ''} ${isItemOpen ? 'open' : ''} ${isItemInActivePath ? 'active-path' : ''} ${hasChildren ? 'has-children' : ''} ${item.type === 'group' ? 'group-item' : ''}`}
             onClick={(e) => handleMenuClick(item, e, parentKeys)}
             data-menu-key={item.key}
-            style={{ justifyContent: "flex-start" }}
+            style={{ justifyContent: 'flex-start' }}
           >
             {item.icon && (
-              <span className="pozo-menu-icon" style={{ fontSize: collapse ? "1.3rem" : "" }}>
+              <span
+                className="pozo-menu-icon"
+                style={{ fontSize: collapse ? '1.3rem' : '' }}
+              >
                 {item.icon}
               </span>
             )}
@@ -345,10 +391,9 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
 
             {hasChildren && !collapse && (
               // <span className="pozo-menu-arrow"><FaCaretRight /></span>
-              <span className={`${isItemOpen ? "open " : ""}pozo-menu-arrow`}>
+              <span className={`${isItemOpen ? 'open ' : ''}pozo-menu-arrow`}>
                 <FaCaretRight />
               </span>
-
             )}
           </div>
 
@@ -363,7 +408,8 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
                 top: (() => {
                   const defaultTop = positions[item.key]?.top || 0;
                   const submenuHeight =
-                    submenuRefs.current[item.key]?.getBoundingClientRect()?.height || 0;
+                    submenuRefs.current[item.key]?.getBoundingClientRect()
+                      ?.height || 0;
                   const screenHeight = window.innerHeight;
 
                   // ✅ If submenu would overflow screen bottom, adjust top
@@ -379,7 +425,7 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
                 // width: 220,
                 width: 200,
                 maxHeight: 400,
-                zIndex: 1000 + level
+                zIndex: 1000 + level,
               }}
             >
               <div className="pozo-submenu-content">
@@ -396,11 +442,11 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
   useEffect(() => {
     const updated = {};
     for (const [key, el] of Object.entries(menuRefs.current)) {
-      if (el && typeof el.getBoundingClientRect === "function") {
+      if (el && typeof el.getBoundingClientRect === 'function') {
         const rect = el.getBoundingClientRect();
         updated[key] = {
           top: rect.top + window.scrollY,
-          left: rect.right + window.scrollX
+          left: rect.right + window.scrollX,
         };
       }
     }
@@ -413,12 +459,8 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
     setPositions(updated);
   }, [items, openKeys]);
 
-
   return (
-    <div
+    <div className={`pozo-menu pozo-menu-${mode}`} style={style}>
-      className={`pozo-menu pozo-menu-${mode}`}
-      style={style}
-    >
       <div className="pozo-menu-content" ref={menuRef}>
         {renderMenuItems(items)}
       </div>

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

@@ -16,10 +16,9 @@ import { isMobile } from 'react-device-detect';
 import { getTemplateData } from '../../../../../Features/ThemeChange/ThemeChange.js';
 import PozoCartIcon from '../../../../../Pages/BookingScreen/Components/UtillComponents/PozoCartIcon.jsx';
 import TooltipWrapper from '../../../../../Components/Tooltip/Tooltip';
+import BSBillingTable3 from '../BSBillingTable3/BSBillingTable3.jsx';
 // jsx File
-const BSBillingTable1 = lazy(
+
-  () => import('../BSBillingTable1/BSBillingTable1.jsx')
-);
 const BST1Payment = lazy(() => import('../BSBillingTable1/BST1Payment'));
 const BSSummery = lazy(() => import('../BSBillingTableSummery/BSSummery'));
 const FeaturesFunctionalities = lazy(
@@ -39,11 +38,13 @@ export default function BSBTOverall1() {
   const tableData = useSelector(GlobalOrderStatus);
   const selOption = useSelector(GlobalSelOption);
   const GetCustId = useSelector(GlobalCustId);
-  const templateData = useSelector(getTemplateData);
   const [hold, setHold] = useState(false);
   const [addcustomer, setAddCustomer] = useState(false);
   const [responsiveBill, setResponsiveBill] = useState(true);
 
+  const templateData = useSelector(getTemplateData);
+  const tableName = templateData?.BookingBilling?.[0];
+
   const handleAddCustomer = () => {
     if (Custdisable === false) {
       setAddCustomer(true);
@@ -72,7 +73,7 @@ export default function BSBTOverall1() {
     containerHeight = isMobile
       ? ExpDate <= 7
         ? '500px'
-        : '470px'
+        : '500px'
       : ExpDate <= 7
         ? '82vh'
         : '';
@@ -137,7 +138,7 @@ export default function BSBTOverall1() {
         }
         style={{ height: containerHeight }}
       >
-        {width > 768 && <BSBillingTable1 />}
+        {width > 768 && <BSBillingTable3 />}
         {(addcustomer || hold) && (
           <FeaturesFunctionalities
             handleAddCustomerCancel={handleAddCustomerCancel}
@@ -146,17 +147,22 @@ export default function BSBTOverall1() {
             modalOpen={hold}
           />
         )}
-        <div className="BSBTOverall1-div">
+        <div
+          className={
+            tableName === 'Billing6' ? 'PaySectionModified' : 'BSBTOverall1-div'
+          }
+        >
           {width <= 768 && (
             <div
               className={`BSBillingTable1-summeryTable ${responsiveBill ? 'open' : 'closed'}`}
               style={{
                 transition: 'max-height 0.3s ease-in-out',
-                overflow: 'scroll',
+                overflow: 'auto',
                 maxHeight: responsiveBill ? '210px' : '0px',
+                scrollbarWidth: 'none',
               }}
             >
-              {tableData && <BSBillingTable1 />}
+              {tableData && <BSBillingTable3 />}
             </div>
           )}
           <div className="BSBTOverall1-Default-summary">

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

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState, useRef } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import moment from 'moment';
-import { Badge, Modal, Tooltip } from 'antd';
+import { Badge, Button, Modal, Popover, Tooltip } from 'antd';
 import { Tables } from '../../../../../Components/Tables/Table';
 import { DefaultModal } from '../../../../../Components/Modal/DefaultModal.jsx';
 import paygate from '../../../../../Images/paygate.png';
@@ -125,6 +125,8 @@ import {
   changePreviousOrderOfferDetail,
   GlobalAllBookingType,
   changeSearchedData,
+  GlobalSelectedCustDisable,
+  GlobalOrderStatus,
 } from '../../../../../Features/BookingScreen/BookingData/BookingData';
 import FeaturesFunctionalities from '../../BookingFunctionality/FeaturesFunctionalities';
 import {
@@ -211,6 +213,13 @@ import pozologoimg from '../../../../../Images/pozologoimg.png';
 import MobileMultiPdfPrintTrigger from '../../UtillComponents/MobileMultiPdfPrintTrigger.jsx';
 import { useDateStore } from '../../../../../Features/BookingScreen/BookingData/DateStore.js';
 import CustomerOrders from '../../BookingFunctionality/CustomerOrders.jsx';
+import { AiOutlineClose } from 'react-icons/ai';
+import BSSummery from '../BSBillingTableSummery/BSSummery.jsx';
+import { IoIosArrowUp } from 'react-icons/io';
+import BSCustomerSelect from '../../UtillComponents/BSSelectCustomer.jsx';
+import PozoAddCustomerIcon from '../../UtillComponents/Pozo retail icons/PozoAddCustomerIcon.jsx';
+import PozoCartIcon from '../../UtillComponents/PozoCartIcon.jsx';
+import BSBillingTable3 from '../BSBillingTable3/BSBillingTable3.jsx';
 
 const subDirectory = import.meta.env.ENV_BASE_URL;
 const MainHomeUrl = import.meta.env.ENV_MAIN_BASE_URL;
@@ -338,6 +347,13 @@ export default function BST1Payment() {
   const [currentOrderNetAmount, setCurrentOrderNetAmount] = useState(0);
   const [previousNetAmount, setPreviousNetAmount] = useState(0);
 
+  const Custdisable = useSelector(GlobalSelectedCustDisable);
+  const tableData = useSelector(GlobalOrderStatus);
+  const [summeryopen, setSummeryopen] = useState(false);
+  const [responsiveBill, setResponsiveBill] = useState(true);
+  const [width, setWidth] = useState(window.innerWidth);
+  const [open, setOpen] = useState(false);
+
   const [addcustomer, setAddCustomer] = useState(false);
   const [PrintOrderDetails, setPrintOrderDetails] = useState([]);
   //Total calculation
@@ -637,7 +653,6 @@ export default function BST1Payment() {
     Discount,
   ]);
   useEffect(() => {
- 
     const fetchPrinterMapping = async () => {
       try {
         if (UserType !== 'Super Admin' && isMobile && MobileA4Print) {
@@ -648,19 +663,20 @@ export default function BST1Payment() {
             UserId: UserId,
           };
           // && isMobile && MobileA4Print
-         const response = await dispatch(getPrinterMappingDetails(data)).unwrap();
+          const response = await dispatch(
+            getPrinterMappingDetails(data)
+          ).unwrap();
           if (response?.data?.statusCode === 0) {
-               handlePrintMappingClick()  
+            handlePrintMappingClick();
           }
-         console.log(response, "printer mapping response");
+          console.log(response, 'printer mapping response');
         }
       } catch (error) {
-       console.error("Error fetching printer mapping:", error);
+        console.error('Error fetching printer mapping:', error);
       }
     };
 
     fetchPrinterMapping();
- 
   }, []);
   const handlePrintMappingClick = () => {
     // setReprint1(true)
@@ -669,7 +685,10 @@ export default function BST1Payment() {
   //mohan stoped data
   useEffect(() => {
     if (CompId && BranchId && AppId) {
-      if (holdCheckedSalesSetup || NavBarOptions?.some((e) => e?.OptionName == 'Hold')) {
+      if (
+        holdCheckedSalesSetup ||
+        NavBarOptions?.some((e) => e?.OptionName == 'Hold')
+      ) {
         getHolddata();
       }
       // getUnpaiddatas();
@@ -1867,7 +1886,10 @@ export default function BST1Payment() {
     setUpinotSelected(false);
     setCurrentOrderNetAmount(0);
     setPreviousNetAmount(0);
-    if (holdCheckedSalesSetup || NavBarOptions?.some((e) => e?.OptionName == 'Hold')) {
+    if (
+      holdCheckedSalesSetup ||
+      NavBarOptions?.some((e) => e?.OptionName == 'Hold')
+    ) {
       getHolddata();
     }
     if (defaultBookingType === 'Both') {
@@ -2073,7 +2095,7 @@ export default function BST1Payment() {
       SetCount: a.SetCount,
       ...(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
@@ -3496,6 +3518,31 @@ export default function BST1Payment() {
     }
   };
 
+  const hide = () => {
+    setOpen(false);
+  };
+
+  const handleOpenChange = (newOpen) => {
+    setOpen(newOpen);
+  };
+
+  const handleAddCustomer = () => {
+    if (Custdisable === false) {
+      setAddCustomer(true);
+    }
+  };
+
+  const handleResponsiveBill = () => {
+    setResponsiveBill(!responsiveBill);
+  };
+
+  useEffect(() => {
+    function handleResize() {
+      setWidth(window.innerWidth);
+    }
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [width]);
   const vehiclesvalues = (vehicleData) => {
     const updated = OrderCardDetail.map((item) => {
       const key =
@@ -3540,6 +3587,84 @@ export default function BST1Payment() {
   return (
     <>
       <div className="BST1-Payment-structure">
+        {width <= 768 && (
+          <div
+            className={`BSBillingTable1-summeryTable ${responsiveBill ? 'open' : 'closed'}`}
+            style={{
+              transition: 'max-height 0.3s ease-in-out',
+              overflow: 'auto',
+              maxHeight: responsiveBill ? '210px' : '0px',
+              scrollbarWidth: 'none',
+            }}
+          >
+            {tableData && <BSBillingTable3 />}
+          </div>
+        )}
+        <div className="BSBTOverall1Defaultsummary">
+          {summeryopen == true && (
+            <div className="BSBillingTable1-summary">
+              <button
+                className="BSBillingTable1-summary-close"
+                onClick={() => {
+                  setSummeryopen(false);
+                }}
+              >
+                X
+              </button>
+            </div>
+          )}
+
+          <Popover
+            content={
+              open && (
+                <>
+                  <a onClick={hide}>
+                    <AiOutlineClose color="black" />
+                  </a>
+                  <BSSummery />
+                </>
+              )
+            }
+            trigger="click"
+            open={open}
+            onOpenChange={handleOpenChange}
+          >
+            <Button className="icon-button" onClick={handleOpenChange}>
+              SUMMARY <IoIosArrowUp />
+            </Button>
+          </Popover>
+          <div className="CustomerAddSrch">
+            <div style={{ height: '2.1rem' }}>
+              {tableOptions.find(
+                (item) => item.OptionName === 'AddCustomer'
+              ) && (
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    columnGap: '0.5rem',
+                  }}
+                >
+                  <BSCustomerSelect />
+
+                  <TooltipWrapper title={'Add Customer'} isMobile={isMobile}>
+                    {' '}
+                    <PozoAddCustomerIcon
+                      className="BSBillingNav-icon-table-icon"
+                      onClick={handleAddCustomer}
+                      style={{
+                        fontSize: '25px',
+                        color: selOption || GetCustId ? '#52c41a' : '#1292EE',
+                        cursor: Custdisable ? 'not-allowed' : 'pointer',
+                      }}
+                    />
+                  </TooltipWrapper>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
         {/* <FeaturesFunctionalities modalOpen={modalOpen} /> */}
         <div className="BST1-Payment-payicons">
           <div className="BST1-Payment-onlypay">
@@ -3882,8 +4007,10 @@ export default function BST1Payment() {
             )}
 
             {/* Customer Orders */}
-            {(SelCustId && tableOptions?.filter((item) => item.OptionName === 'PreviousBillFetch')
+            {SelCustId &&
-              .length === 1) && (
+              tableOptions?.filter(
+                (item) => item.OptionName === 'PreviousBillFetch'
+              ).length === 1 && (
                 <Tooltip title="Customer Orders" isMobile={isMobile}>
                   {' '}
                   <div

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

@@ -1,19 +1,51 @@
 import { useSelector } from 'react-redux';
+import { useState, useEffect } from 'react';
 import BSBillingTable3 from './BSBillingTable3';
 import BSBillingTable3Pay from './BSBillingTable3pay';
 import '../../../../../Styles/BookingScreen/Components/BSBillingTables/BSBillingTables3/BSBillingTable3.scss';
 import { isMobile } from 'react-device-detect';
 import { getTemplateData } from '../../../../../Features/ThemeChange/ThemeChange';
-import { GlobalExpDateforHeight } from '../../../../../Features/BookingScreen/BookingData/BookingData';
+import {
-import { useState } from 'react';
+  GlobalExpDateforHeight,
+  GlobalOrderStatus,
+} from '../../../../../Features/BookingScreen/BookingData/BookingData';
+import StandardTablePayment from '../StandardTable/StandardTablePayment';
+import BST1Payment from '../BSBillingTable1/BST1Payment';
+import { BsFillCartCheckFill, BsCartXFill } from 'react-icons/bs';
 
 const BSBillingTable3overall = () => {
   const templateData = useSelector(getTemplateData);
   const ExpDate = useSelector(GlobalExpDateforHeight);
+  const tableData = useSelector(GlobalOrderStatus);
+
+  const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth <= 768);
+  const [isCartOpen, setIsCartOpen] = useState(window.innerWidth > 768);
+
+  // ✅ Handle resize properly
+  useEffect(() => {
+    const handleResize = () => {
+      const isMobileView = window.innerWidth <= 768;
+      setIsSmallScreen(isMobileView);
+
+      // Desktop la always open
+      if (!isMobileView) {
+        setIsCartOpen(true);
+      } else {
+        setIsCartOpen(false);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const tableName = templateData?.BookingBilling?.[0];
 
   let containerHeight = '';
 
-  if (templateData?.BookingLayout?.[0] === 'Layout5') {
+  const layout = templateData?.BookingLayout?.[0];
+
+  if (layout === 'Layout5') {
     containerHeight = isMobile
       ? ExpDate <= 7
         ? '500px'
@@ -21,15 +53,15 @@ const BSBillingTable3overall = () => {
       : ExpDate <= 7
         ? '86vh'
         : '';
-  } else if (templateData?.BookingLayout?.[0] === 'Layout2') {
+  } else if (layout === 'Layout2') {
     containerHeight = isMobile
       ? ExpDate <= 7
         ? '505px'
-        : '475px' // billing table 3 height in POS -- Layout 2
+        : '475px'
       : ExpDate <= 7
         ? '85vh'
         : '';
-  } else if (templateData?.BookingLayout?.[0] === 'Layout6') {
+  } else if (layout === 'Layout6') {
     containerHeight = isMobile
       ? ExpDate <= 7
         ? '420px'
@@ -37,15 +69,15 @@ const BSBillingTable3overall = () => {
       : ExpDate <= 7
         ? '74vh'
         : '';
-  } else if (templateData?.BookingLayout?.[0] === 'Layout1') {
+  } else if (layout === 'Layout1') {
     containerHeight = isMobile
       ? ExpDate <= 7
         ? '490px'
-        : '470px' // billing table 3 height in POS -- Layout 1
+        : '470px'
       : ExpDate <= 7
         ? '83vh'
         : '';
-  } else if (templateData?.BookingLayout?.[0] === 'Layout3') {
+  } else if (layout === 'Layout3') {
     containerHeight = isMobile
       ? ExpDate <= 7
         ? '490px'
@@ -53,7 +85,7 @@ const BSBillingTable3overall = () => {
       : ExpDate <= 7
         ? '83.5vh'
         : '';
-  } else if (templateData?.BookingLayout?.[0] === 'Layout4') {
+  } else if (layout === 'Layout4') {
     containerHeight = isMobile
       ? ExpDate <= 7
         ? '510px'
@@ -64,26 +96,52 @@ const BSBillingTable3overall = () => {
   }
 
   return (
-    <>
     <div
       className={
-          templateData?.BookingLayout?.[0] === 'Layout6'
+        layout === 'Layout6'
           ? 'BSTable3_overall BSTable3_overall-6'
-            : templateData?.BookingLayout?.[0] === 'Layout1' && isMobile
+          : layout === 'Layout1' && isMobile
             ? 'BSTable3_overallLayout1 BSTable3_overall-1'
             : 'BSTable3_overall'
       }
       style={{ height: containerHeight }}
     >
-        <div className="BSTable3">
+      {/* ✅ Cart/Table */}
+      {isCartOpen && (!isSmallScreen || tableData) && (
+        <div
+          className="BSTaleforSales-common"
+          style={{ height: isMobile ? '55vh' : '70vh' }}
+        >
           <BSBillingTable3 />
         </div>
+      )}
 
-        <div className="BSTable3_payroll">
+      <div className="TableStandardPay">
+        {/* ✅ Toggle only in mobile */}
+        {isSmallScreen && tableData && (
+          <div
+            className="BillTable-carticon"
+            onClick={() => setIsCartOpen((prev) => !prev)}
+          >
+            {isCartOpen ? (
+              <BsCartXFill color="#ff4d4f" />
+            ) : (
+              <BsFillCartCheckFill color="#1292ee" />
+            )}
+          </div>
+        )}
+
+        {/* ✅ Payment */}
+        {tableName === 'StandardBilling' ? (
+          <StandardTablePayment />
+        ) : tableName === 'Billing1' || tableName === 'Billing6' ? (
+          <BST1Payment />
+        ) : (
           <BSBillingTable3Pay />
+        )}
       </div>
     </div>
-    </>
   );
 };
+
 export default BSBillingTable3overall;

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

@@ -1,10 +1,4 @@
-import React, {
+import React, { useCallback, useEffect, useState, useRef, lazy } from 'react';
-  useCallback,
-  useEffect,
-  useState,
-  useRef,
-  lazy, 
-} from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import moment from 'moment';
@@ -193,6 +187,7 @@ import { Global_OverallOfferAmount } from '../../../../../Features/Offer/Offer.j
 import TooltipWrapper from '../../../../../Components/Tooltip/Tooltip';
 import { useAuth } from '../../../../../AuthContext.jsx';
 import '../../../../../Styles/BookingScreen/Components/BSBillingTables/BSBillingTables3/BSBillingTable3.scss';
+import './BSBillingTablePay.scss';
 import { GlobalBookingStatus } from '../../../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail.js';
 import {
   changeSalesPaymentoption,
@@ -323,7 +318,7 @@ const BSBillingTable3Pay = () => {
   const ProdSubCat = useSelector(GlobalProductSubCategorie);
   const BSLayoutData = useSelector(getTemplateData);
   const Combodata = useSelector(GlobalCombocarddata, shallowEqual);
-  console.log(PaymentOptions, "PaymentOptions")
+  console.log(PaymentOptions, 'PaymentOptions');
   const Custdisable = useSelector(GlobalSelectedCustDisable);
   const SettingDataSelector = useSelector(PreferenceData);
 
@@ -435,7 +430,7 @@ const BSBillingTable3Pay = () => {
   const [PaymentgatewayUPI, setPaymentgatewayUPI] = useState([]);
   const [PaymentDeviceUPI, setPaymentDeviceUPI] = useState([]);
   const [UpiPayOption, setUpiPayOption] = useState([]);
-  console.log(UpiPayOption, "UpiPayOption")
+  console.log(UpiPayOption, 'UpiPayOption');
   const [BusinessPayOption, setBusinessPayoption] = useState([]);
   const [CardPayOption, setCardPayOption] = useState([]);
   const [Splitpayment, setSplitpayment] = useState(false);
@@ -482,7 +477,7 @@ const BSBillingTable3Pay = () => {
 
   const [OrderStatus, setOrderStatus] = useState(true);
   const GlobaluseOptions = useSelector(GlobalCommonPaymentOptions);
-  console.log(GlobaluseOptions, "GlobaluseOptions")
+  console.log(GlobaluseOptions, 'GlobaluseOptions');
   const [useOptions, setuseOptions] = useState([]);
   const paymentloader = useSelector(GlobalPayementloader);
   const [UnpaidConfirmation, setUnpaidConfirmation] = useState(false);
@@ -536,6 +531,10 @@ const BSBillingTable3Pay = () => {
       item.SettingIdName.toLowerCase() === 'shortcutkeys' &&
       item.SettingValue === 'Y'
   );
+
+  const templateData = useSelector(getTemplateData);
+  const tableName = templateData?.BookingBilling?.[0];
+  console.log(templateData, 'tableName', tableName);
   useEffect(() => {
     const fetchCreditCustomer = async () => {
       const selectedMode = paybtns?.find(
@@ -710,7 +709,6 @@ const BSBillingTable3Pay = () => {
     Discount,
   ]);
   useEffect(() => {
-
     const fetchPrinterMapping = async () => {
       try {
         if (UserType !== 'Super Admin' && isMobile && MobileA4Print) {
@@ -721,26 +719,30 @@ const BSBillingTable3Pay = () => {
             UserId: UserId,
           };
           // && isMobile && MobileA4Print
-        const response = await dispatch(getPrinterMappingDetails(data)).unwrap();
+          const response = await dispatch(
+            getPrinterMappingDetails(data)
+          ).unwrap();
           if (response?.data?.statusCode === 0) {
-              handlePrintMappingClick()  
+            handlePrintMappingClick();
           }
-        console.log(response, "printer mapping response");
+          console.log(response, 'printer mapping response');
         }
       } catch (error) {
-      console.error("Error fetching printer mapping:", error);
+        console.error('Error fetching printer mapping:', error);
       }
     };
 
     fetchPrinterMapping();
-
   }, []);
   const handlePrintMappingClick = () => {
     // setReprint1(true)
     window.dispatchEvent(new Event('CLICK PRINTER MAPPING'));
   };
   useEffect(() => {
-    (!CustomerMobileNumber && isOtpEnabled && salesaskiosk) && setCustomerOtpmodalopen(true);
+    !CustomerMobileNumber &&
+      isOtpEnabled &&
+      salesaskiosk &&
+      setCustomerOtpmodalopen(true);
   }, [PrintOrderDetails, CustomerMobileNumber]);
 
   useEffect(() => {
@@ -797,7 +799,10 @@ const BSBillingTable3Pay = () => {
   };
   useEffect(() => {
     if (CompId && BranchId && AppId) {
-      if (holdCheckedSalesSetup || NavBarOptions?.some((e) => e?.OptionName == 'Hold')) {
+      if (
+        holdCheckedSalesSetup ||
+        NavBarOptions?.some((e) => e?.OptionName == 'Hold')
+      ) {
         getHolddata();
       }
 
@@ -1650,7 +1655,6 @@ const BSBillingTable3Pay = () => {
   //dhana
 
   const getPaymentOptionFeature = async () => {
-
     const FiltersalesPayment = GlobaluseOptions?.filter(
       (item) => item.FlowName?.toLowerCase() === 'sales'
     );
@@ -2063,7 +2067,10 @@ const BSBillingTable3Pay = () => {
     setCurrentOrderNetAmount(0);
     setPreviousNetAmount(0);
     setUpinotSelected(false);
-    if (holdCheckedSalesSetup || NavBarOptions?.some((e) => e?.OptionName == 'Hold')) {
+    if (
+      holdCheckedSalesSetup ||
+      NavBarOptions?.some((e) => e?.OptionName == 'Hold')
+    ) {
       getHolddata();
     }
     if (defaultBookingType === 'Both') {
@@ -2228,7 +2235,6 @@ const BSBillingTable3Pay = () => {
   };
 
   const Booking = async (value, pay) => {
-
     const TakAwayId = ConfigDataList?.find(
       (a) => a?.ConfigName === 'TakeAway'
     )?.ConfigId;
@@ -2281,8 +2287,7 @@ const BSBillingTable3Pay = () => {
       SetCount: a.SetCount,
       ...(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
@@ -3644,50 +3649,28 @@ const BSBillingTable3Pay = () => {
               scrollbarWidth: 'thin',
             }}
           >
-              {Array.isArray(OrderCardDetail) &&
+            {Array.isArray(OrderCardDetail) && OrderCardDetail?.length >= 1 && (
-                OrderCardDetail?.length >= 1 && <BSBillingTable3 />}
+              <BSBillingTable3 />
+            )}
           </div>
         )}
 
+        {/* Left Section */}
         <div className="BSBilling3-customer">
           <Messages
             messageType={messageType}
             messageData={messageData}
             onComplete={onComplete}
           />
-            {screenwidth <= 768 && (
+
           <div
             style={{
               display: 'flex',
-                  alignItems: 'flex-end',
+              flexDirection:
-                  justifyContent: 'flex-end',
+                tableName === 'Billing4' ? 'column-reverse' : 'column',
-                  width: '100%',
+              // width:"100%"
             }}
           >
-                {Array.isArray(OrderCardDetail) &&
-                  OrderCardDetail?.length >= 1 && (
-                    <div
-                      onClick={() => handleResponsiveBill()}
-                      className="Btn-responsiveBill"
-                      style={{ color: responsiveBill ? '#52c41a' : '#1292ee' }}
-                    >
-                      {screenwidth <= 768 && (
-                        <div
-                          style={{
-                            width: '28px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            height: '26px',
-                          }}
-                        >
-                          {' '}
-                          <PozoCartIcon />{' '}
-                        </div>
-                      )}
-                    </div>
-                  )}
-              </div>
-            )}
             <div className="BS3hold-sum">
               {(addcustomer || hold) && (
                 <FeaturesFunctionalities
@@ -3834,8 +3817,10 @@ const BSBillingTable3Pay = () => {
                 </div>
               )}
               {/* Customer Orders */}
-              {(SelCustId && tableOptions?.filter((item) => item.OptionName === 'PreviousBillFetch')
+              {SelCustId &&
-                .length === 1) && (
+                tableOptions?.filter(
+                  (item) => item.OptionName === 'PreviousBillFetch'
+                ).length === 1 && (
                   <Tooltip title="Customer Orders" isMobile={isMobile}>
                     {' '}
                     <div
@@ -4064,6 +4049,42 @@ const BSBillingTable3Pay = () => {
                   </div>
                 </TooltipWrapper>
               )}
+
+              {/* {screenwidth <= 768 && (
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'flex-end',
+                    justifyContent: 'flex-end',
+                    width: '100%',
+                  }}
+                >
+                  {Array.isArray(OrderCardDetail) &&
+                    OrderCardDetail?.length >= 1 && (
+                      <div
+                        onClick={() => handleResponsiveBill()}
+                        className="Btn-responsiveBill"
+                        style={{
+                          color: responsiveBill ? '#52c41a' : '#1292ee',
+                        }}
+                      >
+                        {screenwidth <= 768 && (
+                          <div
+                            style={{
+                              width: '28px',
+                              display: 'flex',
+                              alignItems: 'center',
+                              height: '26px',
+                            }}
+                          >
+                            {' '}
+                            <PozoCartIcon />{' '}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                </div>
+              )} */}
             </div>
             <div className="CustomerAddSrch">
               <div style={{ height: '2.1rem' }}>
@@ -4101,6 +4122,7 @@ const BSBillingTable3Pay = () => {
                   ))}
               </div>
             </div>
+          </div>
           <TooltipWrapper
             // title={'Payment Mode (SHIFT + M)'}
             isMobile={isMobile}
@@ -4319,9 +4341,10 @@ const BSBillingTable3Pay = () => {
           </TooltipWrapper>
         </div>
 
+        {/* Vertical Line */}
         <vr className="Table3-vertical-line"></vr>
-
+        {/* Right Section */}
-          <div className="Table3-price">
+        <div className="Table3-price TablePaySectionRight">
           <div className="Table3-Price-div">
             <div>
               <table className="Table3-total-price">
@@ -4379,9 +4402,7 @@ const BSBillingTable3Pay = () => {
                   <BSOtherServiceClaim />
                 </div>
               )}
-              <div
+            <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-                style={{ display: 'flex', alignItems: 'center', gap: '6px' }}
-              >
               {!OtherServicesglobal && unpaidFlow == true ? (
                 <TooltipWrapper title={'Print Bill'} isMobile={isMobile}>
                   {' '}
@@ -4468,20 +4489,6 @@ const BSBillingTable3Pay = () => {
                       )}
                     </div>
                   )}
-
-                    {/* <TooltipWrapper title="Summary" isMobile={isMobile}>
-                                    {!open2 ? (
-                                        <UpCircleOutlined
-                                            style={{ fontSize: '23px', cursor: 'pointer', color: '#1292EE' }}
-                                            onClick={handleIconClick}
-                                        />
-                                    ) : (
-                                        <DownCircleOutlined
-                                            style={{ fontSize: '23px', cursor: 'pointer', color: '#1292EE' }}
-                                            onClick={handleIconClick}
-                                        />
-                                    )}
-                                </TooltipWrapper> */}
                 </Popover>
               </div>
             </div>
@@ -4489,7 +4496,11 @@ const BSBillingTable3Pay = () => {
           <TooltipWrapper title="Create Bill (F4)" isMobile={isMobile}>
             <div
               className={
-                  // (empData?.AddAccess === "N" || SAAccessCommonMaster?.AddAccess === "N")
+                tableName === 'Billing4' ? 'Table4-PayBTN' : 'All-TablePay-BTN'
+              }
+            >
+              <div
+                className={
                   addnewAccess
                     ? 'BSBillingTable3-paybtn-deactive'
                     : FirstPaymentclick === false &&
@@ -4504,16 +4515,7 @@ const BSBillingTable3Pay = () => {
                         : 'BSBillingTable3-paybtn Order'
                       : 'BSBillingTable3-paybtn-deactive'
                 }
-                //dhana
+                onClick={handleButtonClick}
-                // onClick={() => {
-                //     (qrCode && SelectedUPIPayOption === "Default") ? UpiPayment() : OrderStatus ? AddBookingDetails("Dine-In", false) : AddBookingDetails(BookingType, true);
-                // }}
-                onClick={
-                  // BranchFinancialStatus==='N'?
-                  // financialYearError:
-                  handleButtonClick
-                }
-              //dhana
               >
                 {!OrderStatus ? (
                   salesBillEdit && currentOrderNetAmount < previousNetAmount ? (
@@ -4560,6 +4562,7 @@ const BSBillingTable3Pay = () => {
                   <div>ORDER</div>
                 )}
               </div>
+            </div>
           </TooltipWrapper>
           {UpiOpen && (
             <DefaultModal
@@ -4636,8 +4639,7 @@ const BSBillingTable3Pay = () => {
             />
           )}
           {PrintOrderDetails?.length > 0 &&
-              PrintOrderDetails?.[0]?.OrderDetails?.map(
+            PrintOrderDetails?.[0]?.OrderDetails?.map((orderDetail, index) => (
-                (orderDetail, index) => (
               <div style={{ display: 'none' }}>
                 <PaymentPdfBooking
                   index={index}
@@ -4656,13 +4658,11 @@ const BSBillingTable3Pay = () => {
                   printDatas={printDatas}
                 />
               </div>
-                )
+            ))}
-              )}
           {PrintOrderDetails?.length > 0 &&
             (TokenOnly?.SettingValue === 'Y' ||
               IndividualToken?.SettingValue === 'Y') &&
-              PrintOrderDetails?.[0]?.OrderDetails?.map(
+            PrintOrderDetails?.[0]?.OrderDetails?.map((orderDetail, index) => (
-                (orderDetail, index) => (
               <div style={{ display: 'none' }}>
                 <TokensinglePrint
                   index={index}
@@ -4679,8 +4679,7 @@ const BSBillingTable3Pay = () => {
                   PaymentStatus={PrintOrderDetails?.[0]?.PaymentOrderDtl}
                 />
               </div>
-                )
+            ))}
-              )}
           {CreditCustomer && (
             <div style={{ display: 'none' }}>
               <BsBillingCreditCustomer
@@ -4723,10 +4722,9 @@ const BSBillingTable3Pay = () => {
           children={
             <>
               <div>
-                  You have already selected a table. If you click 'OK,' the
+                You have already selected a table. If you click 'OK,' the table
-                  table selection will be removed, and the unpaid flow will
+                selection will be removed, and the unpaid flow will continue. If
-                  continue. If you click 'Cancel,' the dine-in flow will proceed
+                you click 'Cancel,' the dine-in flow will proceed as selected.
-                  as selected.
               </div>
             </>
           }
@@ -4870,9 +4868,7 @@ const BSBillingTable3Pay = () => {
                             width: '100%',
                             padding: 8,
                             borderRadius: 4,
-                              border: error
+                            border: error ? '1px solid red' : '1px solid #ccc',
-                                ? '1px solid red'
-                                : '1px solid #ccc',
                           }}
                         />
                         {error && (
@@ -4962,7 +4958,7 @@ const BSBillingTable3Pay = () => {
         />
       )}
 
-        {(CustomerOtpmodalopen && isOtpEnabled && salesaskiosk) && (
+      {CustomerOtpmodalopen && isOtpEnabled && salesaskiosk && (
         <CustomerMobileNumberModal
           open={CustomerOtpmodalopen}
           HandleCloseModal={() => setCustomerOtpmodalopen(false)}

src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable3/BSBillingTablePay.scss

@@ -0,0 +1,33 @@
+.All-TablePay-BTN {
+    width: 100%;
+}
+// Table 4 Pay BTN
+
+.Table4-PayBTN {
+    width: 100%;
+    font-family: "Poppins", sans-serif;
+
+    .BSBillingTable3-paybtn-deactive {
+        background-color: #52c41a;
+        border: none;
+        .BSBillingTable3-pay {
+            background-color: unset;
+            color: #000;
+        }
+    }
+    .BSBillingTable3-paybtn {
+        background-color: #52c41a;
+        color: #fff;
+        font-family: "Poppins";
+        border: none;
+        padding: 10px 8px;
+        .BSBillingTable3-pay {
+            background-color: unset;
+            color: #fff;
+        }
+        &:hover {
+            background-color: #52c41a !important;
+            color: #fff !important;
+        }
+    }
+}

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

@@ -5,7 +5,7 @@ import moment from 'moment';
 import { Badge, Modal, Popover, Tooltip } from 'antd';
 import { BiRightArrowAlt } from 'react-icons/bi';
 import { AiOutlineClose } from 'react-icons/ai';
-import BSBillingTable4 from './BSBillingTable4';
+// import BSBillingTable4 from './BSBillingTable4';
 import { UpCircleOutlined } from '@ant-design/icons';
 const BSSummery = lazy(() => import('../BSBillingTableSummery/BSSummery'));
 
@@ -539,7 +539,6 @@ const BSBilling4Payment = () => {
     }
   }, [OrderCardDetail]);
   useEffect(() => {
- 
     const fetchPrinterMapping = async () => {
       try {
         if (UserType !== 'Super Admin' && isMobile && MobileA4Print) {
@@ -550,19 +549,20 @@ const BSBilling4Payment = () => {
             UserId: UserId,
           };
           // && isMobile && MobileA4Print
-         const response = await dispatch(getPrinterMappingDetails(data)).unwrap();
+          const response = await dispatch(
+            getPrinterMappingDetails(data)
+          ).unwrap();
           if (response?.data?.statusCode === 0) {
-               handlePrintMappingClick()  
+            handlePrintMappingClick();
           }
-         console.log(response, "printer mapping response");
+          console.log(response, 'printer mapping response');
         }
       } catch (error) {
-       console.error("Error fetching printer mapping:", error);
+        console.error('Error fetching printer mapping:', error);
       }
     };
 
     fetchPrinterMapping();
- 
   }, []);
   const handlePrintMappingClick = () => {
     // setReprint1(true)
@@ -1298,7 +1298,10 @@ const BSBilling4Payment = () => {
   }, [OrderCardDetail]);
   useEffect(() => {
     if (CompId && BranchId && AppId) {
-      if (holdCheckedSalesSetup || NavBarOptions?.some((e) => e?.OptionName == 'Hold')) {
+      if (
+        holdCheckedSalesSetup ||
+        NavBarOptions?.some((e) => e?.OptionName == 'Hold')
+      ) {
         getHolddata();
       }
       // getUnpaiddatas();
@@ -1969,7 +1972,10 @@ const BSBilling4Payment = () => {
     setCurrentOrderNetAmount(0);
     setPreviousNetAmount(0);
     setUpinotSelected(false);
-    if (holdCheckedSalesSetup || NavBarOptions?.some((e) => e?.OptionName == 'Hold')) {
+    if (
+      holdCheckedSalesSetup ||
+      NavBarOptions?.some((e) => e?.OptionName == 'Hold')
+    ) {
       getHolddata();
     }
     if (defaultBookingType === 'Both') {
@@ -2176,7 +2182,7 @@ const BSBilling4Payment = () => {
       BookingDate: AvailableDate ? a.BookedDate : null,
       ...(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
@@ -3661,7 +3667,7 @@ const BSBilling4Payment = () => {
             >
               {Array.isArray(OrderCardDetail) &&
                 OrderCardDetail?.length >= 1 && (
-                    <BSBillingTable4 optionNames={tableOptions} />
+                  <BSBillingTable3 optionNames={tableOptions} />
                 )}
             </div>
           )}
@@ -3707,9 +3713,7 @@ const BSBilling4Payment = () => {
                             style={{
                               fontSize: '25px',
                               color:
-                                  selOption || GetCustId
+                                selOption || GetCustId ? '#52c41a' : '#1292EE',
-                                    ? '#52c41a'
-                                    : '#1292EE',
                               cursor: Custdisable ? 'not-allowed' : 'pointer',
                             }}
                           />
@@ -3798,9 +3802,8 @@ const BSBilling4Payment = () => {
                   />
                 </div>
               )}
-                {tableOptions?.filter(
+              {tableOptions?.filter((item) => item.OptionName === 'AddCustomer')
-                  (item) => item.OptionName === 'AddCustomer'
+                .length === 1 || navCust === true ? (
-                ).length === 1 || navCust === true ? (
                 <div style={{ width: '2rem' }}>
                   {Object.keys(useOptions)?.length > 0 &&
                     useOptions?.some((flow) =>
@@ -3824,8 +3827,7 @@ const BSBilling4Payment = () => {
                               onClick={CreditCustomerFun}
                               style={{
                                 cursor:
-                                    OrderCardDetail?.length > 0 &&
+                                  OrderCardDetail?.length > 0 && 'not-allowed',
-                                    'not-allowed',
                                 color:
                                   OrderCardDetail?.length > 0 ||
                                   (selOption?.value === undefined &&
@@ -3902,10 +3904,7 @@ const BSBilling4Payment = () => {
                   )}
 
                   {OtherServicesglobal && OrderCardDetail.length >= 1 && (
-                      <TooltipWrapper
+                    <TooltipWrapper title="Vehicle Number" isMobile={isMobile}>
-                        title="Vehicle Number"
-                        isMobile={isMobile}
-                      >
                       {' '}
                       <div
                         className="BSBillingNav-icon-table-icon"
@@ -3942,8 +3941,10 @@ const BSBilling4Payment = () => {
               )}
 
               {/* Customer Orders */}
-                {(SelCustId && tableOptions?.filter((item) => item.OptionName === 'PreviousBillFetch')
+              {SelCustId &&
-                  .length === 1) && (
+                tableOptions?.filter(
+                  (item) => item.OptionName === 'PreviousBillFetch'
+                ).length === 1 && (
                   <Tooltip title="Customer Orders" isMobile={isMobile}>
                     {' '}
                     <div
@@ -4051,10 +4052,7 @@ const BSBilling4Payment = () => {
                           paybtns?.length > 0 &&
                           CheckBookingStatus != 'Close' &&
                           !addnewAccess && (
-                            <TooltipWrapper
+                            <TooltipWrapper title={'Hold'} isMobile={isMobile}>
-                              title={'Hold'}
-                              isMobile={isMobile}
-                            >
                               {' '}
                               <PozoHoldIcon
                                 className="BSBillingNav-icon-table-icon"
@@ -4095,9 +4093,7 @@ const BSBilling4Payment = () => {
                                     cursor: 'pointer',
                                     color: Holddata ? '#52c41a' : 'default',
                                     pointerEvents:
-                                      OrderType === 'Failed'
+                                      OrderType === 'Failed' ? 'none' : 'auto',
-                                        ? 'none'
-                                        : 'auto',
                                   }}
                                 />
                               </Badge>
@@ -4551,10 +4547,7 @@ const BSBilling4Payment = () => {
                                     OrderType === 'Failed'
                                       ? FailedTotalAmt
                                       : credit && overAllBal >= 0
-                                          ? Math.max(
+                                        ? Math.max(0, TotalAmount - overAllBal)
-                                            0,
-                                            TotalAmount - overAllBal
-                                          )
                                         : TotalAmount
                                   )}
                                 />
@@ -4664,9 +4657,7 @@ const BSBilling4Payment = () => {
                           )
                         }
                         CreatedDate={orderDetail?.CreatedDate}
-                          PaymentStatus={
+                        PaymentStatus={PrintOrderDetails?.[0]?.PaymentOrderDtl}
-                            PrintOrderDetails?.[0]?.PaymentOrderDtl
-                          }
                         Preference={SettingDataSelector}
                         printDatas={printDatas}
                       />
@@ -4691,9 +4682,7 @@ const BSBilling4Payment = () => {
                           )
                         }
                         CreatedDate={orderDetail?.CreatedDate}
-                          PaymentStatus={
+                        PaymentStatus={PrintOrderDetails?.[0]?.PaymentOrderDtl}
-                            PrintOrderDetails?.[0]?.PaymentOrderDtl
-                          }
                       />
                     </div>
                   )
@@ -4743,10 +4732,9 @@ const BSBilling4Payment = () => {
           children={
             <>
               <div>
-                  You have already selected a table. If you click 'OK,' the
+                You have already selected a table. If you click 'OK,' the table
-                  table selection will be removed, and the unpaid flow will
+                selection will be removed, and the unpaid flow will continue. If
-                  continue. If you click 'Cancel,' the dine-in flow will proceed
+                you click 'Cancel,' the dine-in flow will proceed as selected.
-                  as selected.
               </div>
             </>
           }
@@ -4892,9 +4880,7 @@ const BSBilling4Payment = () => {
                             width: '100%',
                             padding: 8,
                             borderRadius: 4,
-                              border: error
+                            border: error ? '1px solid red' : '1px solid #ccc',
-                                ? '1px solid red'
-                                : '1px solid #ccc',
                           }}
                         />
                         {error && (
@@ -4984,7 +4970,6 @@ const BSBilling4Payment = () => {
         />
       )}
     </div>
-   
   );
 };
 export default BSBilling4Payment;

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import BSBillingTable4 from './BSBillingTable4';
 import BSBilling4Payment from './BSBilling4Payment';
 import { getTemplateData } from '../../../../../Features/ThemeChange/ThemeChange';
 import { isMobile } from 'react-device-detect';
 import { GlobalExpDateforHeight } from '../../../../../Features/BookingScreen/BookingData/BookingData';
+import BSBillingTable3 from '../BSBillingTable3/BSBillingTable3';
 
 const BSBillingTable4Full = () => {
   const templateData = useSelector(getTemplateData);
@@ -72,7 +72,7 @@ const BSBillingTable4Full = () => {
         style={{ height: containerHeight }}
       >
         <div className="BSBillingDefault-table">
-          <BSBillingTable4 />
+          <BSBillingTable3 />
         </div>
 
         <div className="BSBilling4-down-content">

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

@@ -199,6 +199,8 @@ import CardPopover from '../StandardTable/Utils/CardPopover.jsx';
 import UpiPopover from '../StandardTable/Utils/UpiPopOver.jsx';
 import { useDateStore } from '../../../../../Features/BookingScreen/BookingData/DateStore.js';
 import OtherServiceMobilePrint from '../../BookingFunctionality/OtherServiceMobilePrint.jsx';
+import BSBillingTable3 from '../BSBillingTable3/BSBillingTable3.jsx';
+import BSBillingTable3Pay from '../BSBillingTable3/BSBillingTable3pay.jsx';
 // Jsx Files
 const OtherServicePrintStyle1 = lazy(
   () =>
@@ -3106,13 +3108,6 @@ const BSBillingTable5 = () => {
       OrderCardDetail?.length > 0 &&
       (BookingType === 'Dine In' || BookingTypeBoth)
     ) {
-      // await dispatch(changeOrderCardDetails([]))
-      // await dispatch(changeOrderCardDetails(tabledata?.[event]?.productDetails))
-      // await dispatch(ChangeTotalAmount(tabledata?.[event]?.ExtraChargeDetails))
-      // await dispatch(changeUnpaidData(true))
-      // await dispatch(changeReorderHoldDetails([tabledata?.[event]]?.[0]));
-      // await dispatch(changeReorderProductDetails(tabledata?.[event]?.productDetails))
-      // setUnpaidOpen(false)
        setUnpaidConfirmation(true);
       setunpaidselectedindex(event);
     } else {
@@ -3228,14 +3223,6 @@ const BSBillingTable5 = () => {
     let datas = response?.data?.data;
     await dispatch(ChangeComboCarddata(datas));
     if (response?.data?.statusCode === 1) {
-      // let Data = response?.data?.data
-      //             let comboList = Data?.map((item, index) => ({
-      //                 ...item,
-      //                 id: `${item.ComboName || 'Combo'}-${index}`,
-      //                 ProdName:item?.ComboName,
-      //                 OverAllQty:item?.OverallQuantity
-      //             }));
-      //             setCombocardata(comboList);
      }
   };
 
@@ -3686,890 +3673,13 @@ const BSBillingTable5 = () => {
             className="BS5Billtble"
             style={{ height: 'inherit', overflow: 'auto' }}
           >
-            <BsBill />
+            <BSBillingTable3 TableName="Table5" />
           </div>
         )}
 
         {/* bill table */}
 
-        <div className="BSBillingTable-ftr">
+        <BSBillingTable3Pay />
-          {screenwidth <= 768 && (
-            <div
-              className={`BSBillingTable1-summeryTable ${responsiveBill ? 'open' : 'closed'}`}
-              style={{
-                transition: 'max-height 0.3s ease-in-out',
-                overflow: 'scroll',
-                maxHeight: responsiveBill ? '190px' : '0px',
-              }}
-            >
-              {Array.isArray(OrderCardDetail) &&
-                OrderCardDetail?.length >= 1 &&
-                (isMobile || screenwidth <= 768) && <BsBill />}
-            </div>
-          )}
-          {screenwidth <= 768 && (
-            <div
-              style={{
-                display: 'flex',
-                alignItems: 'flex-end',
-                justifyContent: 'flex-end',
-                width: '100%',
-              }}
-            >
-              {Array.isArray(OrderCardDetail) &&
-                OrderCardDetail?.length >= 1 && (
-                  <div
-                    onClick={handleResponsiveBill}
-                    className="Btn-responsiveBill"
-                    style={{ color: responsiveBill ? '#52c41a' : '#1292ee' }}
-                  >
-                    {responsiveBill ? (
-                      <div
-                        style={{
-                          width: '28px',
-                          display: 'flex',
-                          alignItems: 'center',
-                          height: '26px',
-                        }}
-                      >
-                        {' '}
-                        <PozoCartIcon />{' '}
-                      </div>
-                    ) : (
-                      <div
-                        style={{
-                          width: '28px',
-                          display: 'flex',
-                          alignItems: 'center',
-                          height: '26px',
-                        }}
-                      >
-                        {' '}
-                        <PozoCartIcon />{' '}
-                      </div>
-                    )}
-                  </div>
-                )}
-            </div>
-          )}
-          <div className="BSBillingTable-billtable">
-            <div className="BSBillingTable5-payOpt">
-              <div className="payrow1">
-                <Messages messageType={messageType} messageData={messageData} />
-              </div>
-
-              <div className="payrow2">
-                <TooltipWrapper
-                  // title={'Payment Mode (SHIFT + M)'}
-                  isMobile={isMobile}
-                  placement={'left'}
-                >
-                  <div
-                    className="BSBillingTable5-payOptions"
-                    style={{
-                      pointerEvents:
-                        (BookingType === 'Dine In' ||
-                          BookingTypeBoth ||
-                          CheckOrderType?.length > 0) &&
-                        !unpaidFlow &&
-                        OrderStatus
-                          ? 'none'
-                          : 'auto',
-                      opacity:
-                        (BookingType === 'Dine In' ||
-                          BookingTypeBoth ||
-                          CheckOrderType?.length > 0) &&
-                        !unpaidFlow &&
-                        OrderStatus
-                          ? 0.5
-                          : 1,
-                    }}
-                  >
-                    {paybtns?.length > 0 &&
-                    currentOrderNetAmount >= previousNetAmount ? (
-                      paybtns?.map((payment) => (
-                        <div className="Table3-cash">
-                          <button
-                            className={
-                              paybtnselected === payment.ModeId &&
-                              (UpinotSelected || CardoptionnotSelected)
-                                ? 'Btn-payment-mode-notupisel'
-                                : paybtnselected === payment.ModeId &&
-                                    (!UpinotSelected || !CardoptionnotSelected)
-                                  ? 'Btn-payment-mode'
-                                  : 'Btn-payment-mode-sel'
-                            }
-                            style={{
-                              fontFamily: FontFamily['para'],
-                              position: 'relative',
-                              animation: blink
-                                ? 'blink-animation 0.5s infinite alternate'
-                                : 'none',
-                            }}
-                            onClick={() =>
-                              payment?.ModeName?.toLowerCase() === 'upi' // Change the condition to payment.Id
-                                ? handleUPIButtonClick(
-                                    payment.ModeId,
-                                    payment.ModeName
-                                  )
-                                : handlePaymentMode(
-                                    payment.ModeId,
-                                    payment.ModeName
-                                  )
-                            }
-                          >
-                            <div
-                              style={{
-                                display: 'flex',
-                                flexDirection: 'row',
-                                columnGap: '0.5rem',
-                              }}
-                            >
-                              {payment.ModeName}
-                              {payment?.ModeName?.toLowerCase() === 'card' && (
-                                <CardPopover
-                                  CardPayOption={CardPayOption}
-                                  SelectedCardOption={SelectedCardOption}
-                                  AddCardOption={AddCardOption}
-                                  CardOptionOpen={CardOptionOpen}
-                                  EnableCardOptions={EnableCardOptions}
-                                  paygate={paygate}
-                                  paydevice={paydevice}
-                                />
-                              )}
-                              {payment?.ModeName?.toLowerCase() === 'upi' && (
-                                <UpiPopover
-                                  defaultPaymentMode={defaultPaymentMode}
-                                  defaultEnabled={defaultEnabled}
-                                  setDefaultEnabled={setDefaultEnabled}
-                                  UpiOptionOpen={UpiOptionOpen}
-                                  UpiPayOption={UpiPayOption}
-                                  SelectedUPIPayOption={SelectedUPIPayOption}
-                                  AddUPIPaymentOption={AddUPIPaymentOption}
-                                  PaymentUpiOptions={PaymentUpiOptions}
-                                  UpiOption={UpiOption}
-                                  UpiId={UpiId}
-                                  paygate={paygate}
-                                  paydevice={paydevice}
-                                  EnableUpiOptions={EnableUpiOptions}
-                                  BusinessPayOption={BusinessPayOption}
-                                  PaymentgatewayUPI={PaymentgatewayUPI}
-                                  PaymentDeviceUPI={PaymentDeviceUPI}
-                                  SelectedUpiOption={SelectedUpiOption}
-                                  addUpiOption={addUpiOption}
-                                  hideDefault={hideDefault}
-                                />
-                              )}
-                            </div>
-                          </button>
-                        </div>
-                      ))
-                    ) : currentOrderNetAmount < previousNetAmount &&
-                      salesBillEdit &&
-                      refundPayBtns.length > 0 ? (
-                      refundPayBtns.map((payment) => (
-                        <div className="Table3-cash">
-                          <button
-                            className={
-                              refundPaySelected === payment.ConfigId &&
-                              (UpinotSelected || CardoptionnotSelected)
-                                ? 'Btn-payment-mode-notupisel'
-                                : refundPaySelected === payment.ConfigId &&
-                                    (!UpinotSelected || !CardoptionnotSelected)
-                                  ? 'Btn-payment-mode'
-                                  : 'Btn-payment-mode-sel'
-                            }
-                            style={{
-                              fontFamily: FontFamily['para'],
-                              position: 'relative',
-                              animation: blink
-                                ? 'blink-animation 0.5s infinite alternate'
-                                : 'none',
-                            }}
-                            onClick={() =>
-                              handleRefundPaymentMode(
-                                payment?.ConfigId,
-                                payment?.ConfigName
-                              )
-                            }
-                          >
-                            {/* {UpiOption === "" && payment?.ModeName?.toLowerCase() === "upi" && <p> UPI</p>} */}
-
-                            <div
-                              style={{
-                                display: 'flex',
-                                flexDirection: 'row',
-                                columnGap: '0.5rem',
-                              }}
-                            >
-                              {payment.ConfigName}
-                            </div>
-                          </button>
-                        </div>
-                      ))
-                    ) : (
-                      <div
-                        onClick={handlepaymentoptions}
-                        style={{ cursor: 'pointer' }}
-                        className="payment-error-msg"
-                      >
-                        Please Set Payment Options
-                      </div>
-                    )}
-                  </div>
-                </TooltipWrapper>
-              </div>
-
-              <div />
-            </div>
-
-            <div className="">
-              <table className="BSBillingTable5-billtablediv ">
-                <tr className="BSBillingTable2-table-tr">
-                  <td
-                    className="BSBillingTable5-billtable-td"
-                    style={{
-                      fontFamily: FontFamily['para'],
-                      textAlign: 'left',
-                    }}
-                  >
-                    Items :&nbsp;
-                  </td>
-                  <td
-                    className="BSBillingTable5-billtable-td"
-                    style={{
-                      fontFamily: FontFamily['para'],
-                      textAlign: 'right',
-                    }}
-                  >
-                    {TotalItems}{' '}
-                  </td>
-                </tr>
-                <tr className="BSBillingTable2-table-tr">
-                  <td
-                    className="BSBillingTable5-billtable-total"
-                    style={{
-                      fontFamily: FontFamily['para'],
-                      textAlign: 'left',
-                    }}
-                  >
-                    Qty :&nbsp;
-                  </td>
-                  <td
-                    className="BSBillingTable5-billtable-total"
-                    style={{
-                      fontFamily: FontFamily['para'],
-                      textAlign: 'right',
-                    }}
-                  >
-                    {Qty}
-                  </td>
-                </tr>
-              </table>
-            </div>
-            <div className="BS3hold-sum">
-              {OrderCardDetail?.length > 0 &&
-                ParkingDisplay &&
-                !OtherServicesglobal && (
-                  <div
-                    style={{
-                      width: '1.5rem',
-                      color: 'rgb(18, 146, 238)',
-                      display: 'flex',
-                      alignItems: 'center',
-                      height: '2.46rem',
-                    }}
-                  >
-                    <BSOtherServiceClaim />
-                  </div>
-                )}
-              {!OtherServicesglobal && unpaidFlow == true ? (
-                <TooltipWrapper title="Print Bill" isMobile={isMobile}>
-                  {' '}
-                  <PozoBillIcon
-                    className="Hover"
-                    style={{
-                      fontSize: '25px',
-                      cursor: 'pointer',
-                      color: unpaidFlow ? '#52c41a' : '#1292EE',
-                    }}
-                    onClick={() => {
-                      Recipt();
-                    }}
-                  />
-                </TooltipWrapper>
-              ) : (
-                ''
-              )}
-              <div className="Table5-Price-summarypop">
-                <Popover
-                  content={
-                    <>
-                      <a onClick={hide}>
-                        <AiOutlineClose color="#000" />
-                      </a>
-
-                      <BSSummery1 />
-                    </>
-                  }
-                  trigger="click"
-                  open={open2}
-                  onOpenChange={handleOpenChange2}
-                >
-                  <TooltipWrapper title="Summary" isMobile={isMobile}>
-                    {!open2 ? (
-                      <UpCircleOutlined
-                        style={{
-                          fontSize: '23px',
-                          cursor: 'pointer',
-                          color: '#1292EE',
-                        }}
-                        onClick={handleIconClick}
-                      />
-                    ) : (
-                      <DownCircleOutlined
-                        style={{
-                          fontSize: '23px',
-                          cursor: 'pointer',
-                          color: '#1292EE',
-                        }}
-                        onClick={handleIconClick}
-                      />
-                    )}
-                  </TooltipWrapper>
-                </Popover>
-              </div>
-            </div>
-          </div>
-          <div style={{ justifyContent: 'center' }} className="CustomerAddSrch">
-            <div style={{ height: '2.1rem' }}>
-              {tableOptions
-                .filter((item) => item.OptionName === 'AddCustomer')
-                .map((filteredItem) => (
-                  <React.Fragment key={filteredItem.TemplateOptionsId}>
-                    <div
-                      style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        columnGap: '0.5rem',
-                      }}
-                    >
-                      <BSCustomerSelect />
-
-                      <TooltipWrapper
-                        title={'Add Customer'}
-                        isMobile={isMobile}
-                      >
-                        {' '}
-                        <PozoAddCustomerIcon
-                          className="BSBillingNav-icon-table-icon"
-                          onClick={handleAddCustomer}
-                          style={{
-                            fontSize: '25px',
-                            color:
-                              selOption || GetCustId ? '#52c41a' : '#1292EE',
-                            cursor: Custdisable ? 'not-allowed' : 'pointer',
-                          }}
-                        />
-                      </TooltipWrapper>
-                    </div>
-                  </React.Fragment>
-                ))}
-            </div>
-            {paybtns?.length > 1 && (
-              <div
-                style={{
-                  pointerEvents:
-                    (BookingType === 'Dine In' ||
-                      BookingTypeBoth ||
-                      CheckOrderType?.length > 0) &&
-                    !unpaidFlow &&
-                    OrderStatus
-                      ? 'none'
-                      : 'auto',
-                  opacity:
-                    (BookingType === 'Dine In' ||
-                      BookingTypeBoth ||
-                      CheckOrderType?.length > 0) &&
-                    !unpaidFlow &&
-                    OrderStatus
-                      ? 0.5
-                      : 1,
-                  width: '2rem',
-                }}
-              >
-                {!OtherServicesglobal && (
-                  <TooltipWrapper title="Split Payment" isMobile={isMobile}>
-                    {' '}
-                    <div
-                      className="BSBillingNav-icon-table-icon"
-                      onClick={
-                        CheckBookingStatus != 'Close' && !addnewAccess
-                          ? SplitPaymentOpen
-                          : ''
-                      }
-                      style={{
-                        width: '1.5rem',
-                        cursor:
-                          OrderCardDetail?.length === 0 ||
-                          CheckBookingStatus == 'Close' ||
-                          addnewAccess
-                            ? 'not-allowed'
-                            : 'pointer',
-                        color:
-                          OrderCardDetail?.length === 0 ||
-                          CheckBookingStatus == 'Close' ||
-                          addnewAccess
-                            ? 'gray'
-                            : 'rgb(18, 146, 238)',
-                        display: 'flex',
-                        alignItems: 'center',
-                        height: '2.46rem',
-                      }}
-                    >
-                      <PozoSplitPaymentIcon />
-                    </div>
-                  </TooltipWrapper>
-                )}
-              </div>
-            )}
-          </div>
-
-          {/* btns */}
-
-          <div className="BSBIllingTable5-btns">
-            {tableOptions?.filter((item) => item.OptionName === 'AddCustomer')
-              .length === 1 || navCust === true ? (
-              <div style={{ width: '2rem' }}>
-                {Object.keys(useOptions)?.length > 0 &&
-                  useOptions?.some((flow) =>
-                    flow.OptionDetails.some(
-                      (option) =>
-                        option.OptionName === 'Pay at the counter' &&
-                        option.ModeDetails.some(
-                          (mode) => mode.ModeName === 'Credit'
-                        )
-                    )
-                  ) &&
-                  !OtherServicesglobal && (
-                    <React.Fragment key="CreditCustomerFragment">
-                      <TooltipWrapper
-                        title="Advance Amount"
-                        isMobile={isMobile}
-                      >
-                        {' '}
-                        <PozoAdvanceIcon
-                          className="BSBillingNav-icon-table-icon"
-                          onClick={CreditCustomerFun}
-                          style={{
-                            cursor:
-                              OrderCardDetail?.length > 0 && 'not-allowed',
-                            color:
-                              OrderCardDetail?.length > 0 ||
-                              (selOption?.value === undefined &&
-                                GlobalAddCustomerDetails1?.length === 0 &&
-                                GetCustId?.CustMobile === undefined)
-                                ? 'gray'
-                                : 'rgb(18, 146, 238)',
-                            fontSize: '28px',
-                          }}
-                        />
-                      </TooltipWrapper>
-                    </React.Fragment>
-                  )}
-              </div>
-            ) : (
-              ''
-            )}
-            {/* Customer Orders */}
-            {SelCustId &&
-              tableOptions?.filter(
-                (item) => item.OptionName === 'PreviousBillFetch'
-              ).length === 1 && (
-                <Tooltip title="Customer Orders" isMobile={isMobile}>
-                  {' '}
-                  <div
-                    className="BSBillingNav-icon-table-icon"
-                    onClick={() => {
-                      if (
-                        CheckBookingStatus !== 'Close' &&
-                        !addnewAccess &&
-                        !(OrderCardDetail?.length > 0)
-                      ) {
-                        setCustomerPreviesOrders(true);
-                      }
-                    }}
-                    style={{
-                      cursor: OrderCardDetail?.length > 0 && 'not-allowed',
-                      color:
-                        OrderCardDetail?.length > 0 ||
-                        (OrderCardDetail?.length > 0 &&
-                          GetCustId?.CustMobile === undefined)
-                          ? 'gray'
-                          : 'rgb(18, 146, 238)',
-                      fontSize: '25px',
-                      display: 'flex',
-                      alignItems: 'center',
-                      height: '2.46rem',
-                      width: '1.5rem',
-                    }}
-                  >
-                    <FaCartPlus />
-                  </div>
-                </Tooltip>
-              )}
-            {tabledata?.length > 0 && dinePreference && (
-              <div style={{ width: '2rem' }}>
-                {tableOptions
-                  .filter((item) => item.OptionName === 'UnpaidBill')
-                  .map((filteredItem) => (
-                    <React.Fragment key={filteredItem.TemplateOptionsId}>
-                      {!OtherServicesglobal && (
-                        <TooltipWrapper
-                          title="Unpaid Bills"
-                          isMobile={isMobile}
-                        >
-                          {' '}
-                          <PozoUnpaidIcon
-                            className="BSBillingNav-icon-table-icon"
-                            style={{
-                              fontSize: '27px',
-                              cursor: 'pointer',
-                              color: unpaidFlow ? '#52c41a' : '#1292EE',
-                            }}
-                            onClick={() => {
-                              (setUnpaidOpen(true), getUnpaiddatas());
-                            }}
-                          />
-                        </TooltipWrapper>
-                      )}
-                    </React.Fragment>
-                  ))}
-              </div>
-            )}
-            {OtherServicesglobal && OrderCardDetail.length >= 1 && (
-              <TooltipWrapper title="Vehicle Number" isMobile={isMobile}>
-                {' '}
-                <div
-                  className="BSBillingNav-icon-table-icon"
-                  onClick={
-                    // CheckBookingStatus != 'Close' && !addnewAccess?
-                    Otherservicesvehicleno
-                    // : ''
-                  }
-                  style={{
-                    width: '1.5rem',
-                    cursor:
-                      OrderCardDetail?.length === 0 ||
-                      CheckBookingStatus == 'Close' ||
-                      addnewAccess
-                        ? 'not-allowed'
-                        : 'pointer',
-                    color:
-                      OrderCardDetail?.length === 0 ||
-                      CheckBookingStatus == 'Close' ||
-                      addnewAccess
-                        ? 'gray'
-                        : 'rgb(18, 146, 238)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    height: '2.46rem',
-                  }}
-                >
-                  <TfiClipboard />
-                </div>
-              </TooltipWrapper>
-            )}
-            {dinePreference && (
-              <div style={{ width: '2rem' }}>
-                {(BookingType === 'Dine In' ||
-                  BookingTypeBoth ||
-                  CheckOrderType?.length > 0) &&
-                  !unpaidFlow &&
-                  SelectedTableDetails?.length !== 0 && (
-                    <>
-                      <TooltipWrapper title="ORDER" isMobile={isMobile}>
-                        {' '}
-                        <PozoDineInIcon
-                          className={
-                            FirstPaymentclick === false && !addnewAccess
-                              ? OrderStatus
-                                ? 'Dinein-order-btn pulse-element ChairClrRed'
-                                : 'Dinein-order-btn pulse-element ChairClrGreen'
-                              : 'Dinein-order-btn-disabled pulse-element'
-                          }
-                          onClick={() =>
-                            FirstPaymentclick === false && !addnewAccess
-                              ? changeOrderStatus()
-                              : ''
-                          }
-                        />
-                      </TooltipWrapper>
-                      {FirstPaymentclick === false &&
-                        !addnewAccess &&
-                        !OrderStatus && <BSTipAmount />}
-                    </>
-                  )}
-              </div>
-            )}
-            {!OtherServicesglobal && (
-              <div style={{ width: '6rem' }}>
-                {tableOptions?.map((item) => (
-                  <>
-                    {unpaidFlow == false
-                      ? item?.OptionName == 'Hold' &&
-                        !BookingTypeBoth &&
-                        BookingType !== 'Dine In' &&
-                        OrderCardDetail?.length != 0 &&
-                        CheckOrderType?.length === 0 &&
-                        OrderType != 'Failed' &&
-                        paybtns?.length > 0 &&
-                        CheckBookingStatus != 'Close' &&
-                        !addnewAccess && (
-                          <TooltipWrapper title={'Hold'} isMobile={isMobile}>
-                            <button
-                              className="BSBIllingTable5-cnclbtn"
-                              onClick={() => AddBookingDetails('Hold')}
-                              style={{
-                                color: 'default',
-                                backgroundColor: '#eef3f3',
-                              }}
-                            >
-                              <p className="BigScreen">HOLD ✋</p>
-                              <span className="SmallScreen">✋</span>
-                            </button>
-                          </TooltipWrapper>
-                        )
-                      : ''}
-                    {unpaidFlow === false &&
-                      item?.OptionName === 'Hold' &&
-                      !BookingTypeBoth &&
-                      BookingType !== 'Dine In' &&
-                      Holddata?.length > 0 &&
-                      OrderCardDetail?.length === 0 &&
-                      paybtns?.length > 0 &&
-                      CheckBookingStatus != 'Close' &&
-                      !addnewAccess && (
-                        <TooltipWrapper title={'Recall'} isMobile={isMobile}>
-                          <Badge count={Holddata?.length}>
-                            <button
-                              className="BSBIllingTable5-cnclbtn"
-                              onClick={() => HandleholdModelOpen()}
-                              style={{
-                                color: Holddata ? '#000000' : 'default',
-                                pointerEvents:
-                                  OrderType === 'Failed' ? 'none' : 'auto',
-                              }}
-                            >
-                              <p className="BigScreen">Recall</p>
-                              <span className="SmallScreen">✋</span>
-                            </button>
-                          </Badge>
-                        </TooltipWrapper>
-                      )}
-                  </>
-                ))}
-              </div>
-            )}
-            <TooltipWrapper title="Create Bill (F4)" isMobile={isMobile}>
-              <button
-                className={
-                  // (empData?.AddAccess === "N" || SAAccessCommonMaster?.AddAccess === "N")
-                  addnewAccess
-                    ? 'BSBIllingTable5-paybtn-noitems-disable'
-                    : FirstPaymentclick === false &&
-                        OrderCardDetail?.length > 0 &&
-                        paybtnselected &&
-                        CheckBookingStatus != 'Close'
-                      ? !OrderStatus
-                        ? salesBillEdit &&
-                          currentOrderNetAmount < previousNetAmount
-                          ? 'BSBIllingTable5-paybtn-noitems'
-                          : 'BSBIllingTable5-paybtn-noitems'
-                        : 'BSBIllingTable5-paybtn-noitems Order'
-                      : 'BSBIllingTable5-paybtn-noitems-disable'
-                }
-                // onClick={() => {
-                //   (qrCode && SelectedUPIPayOption === "Default") ? UpiPayment() : OrderStatus ? AddBookingDetails("Dine-In") : AddBookingDetails(BookingType, true);
-                // }}
-                onClick={
-                  // BranchFinancialStatus==='N'? financialYearError:
-                  handleButtonClick
-                }
-              >
-                {!OrderStatus ? (
-                  salesBillEdit && currentOrderNetAmount < previousNetAmount ? (
-                    <div>
-                      Refund: ₹
-                      {(previousNetAmount || 0) - (currentOrderNetAmount || 0)}
-                    </div>
-                  ) : (
-                    <>
-                      {/* ₹ {Math.round(TotalAmount)}  */}
-                      {isMobile ? (
-                        `₹ ${safeRound(
-                          OrderType === 'Failed'
-                            ? FailedTotalAmt
-                            : credit && overAllBal >= 0
-                              ? Math.max(0, TotalAmount - overAllBal)
-                              : TotalAmount
-                        )}`
-                      ) : (
-                        <div>
-                          ₹{' '}
-                          <CountUp
-                            duration={0.4}
-                            className="counter"
-                            end={safeRound(
-                              OrderType === 'Failed'
-                                ? FailedTotalAmt
-                                : credit && overAllBal >= 0
-                                  ? Math.max(0, TotalAmount - overAllBal)
-                                  : TotalAmount
-                            )}
-                          />
-                        </div>
-                      )}
-                      <ArrowRightOutlined />
-                    </>
-                  )
-                ) : (
-                  <div>ORDER</div>
-                )}
-              </button>
-            </TooltipWrapper>
-          </div>
-          <DefaultModal
-            open={UpiOpen}
-            title="UPI PAYMENT"
-            width={500}
-            handleCancel={() => {
-              Upimodel('Cancel');
-            }}
-            footer={false}
-            children={
-              <div style={{ overflow: 'scroll' }}>
-                {/* <h1 className="formHeader">UPI PAYMENT</h1> */}
-
-                <div
-                  style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'space-evenly',
-                    alignItems: 'center',
-                  }}
-                >
-                  <div>
-                    <QrinScreen
-                      Amount={
-                        OrderType === 'Failed'
-                          ? FailedTotalAmt
-                          : Math.round(TotalAmount)
-                      }
-                      UpiId={UpiId}
-                    />
-                  </div>
-
-                  <div>
-                    <h1>
-                      {' '}
-                      RS :
-                      {OrderType === 'Failed'
-                        ? FailedTotalAmt
-                        : Math.round(TotalAmount)}{' '}
-                    </h1>
-                  </div>
-                </div>
-
-                <div className="sentok">
-                  {(selOption || SelCustId) && (
-                    <div className="sentLink" onClick={onFinalSubmit}>
-                      Sent Payment Link
-                      <img
-                        src={WpIcon}
-                        alt="Your Alt Text"
-                        style={{ width: '30px', height: '30px' }}
-                      />
-                      {/* <ArrowRightOutlined /> */}
-                    </div>
-                  )}
-
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'row-reverse',
-                      width: '100px',
-                    }}
-                  >
-                    <Buttons
-                      buttonText="OK"
-                      color="901D77"
-                      icon={<ArrowRightOutlined />}
-                      handleSubmit={() => {
-                        Upimodel('Submit');
-                      }}
-                    />
-                  </div>
-                </div>
-              </div>
-            }
-          />
-          {PrintOrderDetails?.length > 0 &&
-            PrintOrderDetails?.[0]?.OrderDetails?.map((orderDetail, index) => (
-              <div style={{ display: 'none' }}>
-                <PaymentPdfBooking
-                  index={index}
-                  table2Data={orderDetail}
-                  singleData2={orderDetail?.productDetails}
-                  orderId={
-                    orderDetail?.OrderId &&
-                    extractLastNumberOrderId(
-                      orderDetail?.OrderId,
-                      orderDetail?.FYStatus
-                    )
-                  }
-                  CreatedDate={orderDetail?.CreatedDate}
-                  PaymentStatus={PrintOrderDetails?.[0]?.PaymentOrderDtl}
-                  Preference={SettingDataSelector}
-                  printDatas={printDatas}
-                />
-              </div>
-            ))}
-          {PrintOrderDetails?.length > 0 &&
-            (TokenOnly?.SettingValue === 'Y' ||
-              IndividualToken?.SettingValue === 'Y') &&
-            PrintOrderDetails?.[0]?.OrderDetails?.map((orderDetail, index) => (
-              <div style={{ display: 'none' }}>
-                <TokensinglePrint
-                  index={index}
-                  table2Data={orderDetail}
-                  singleData2={orderDetail?.productDetails}
-                  orderId={
-                    orderDetail?.OrderId &&
-                    extractLastNumberOrderId(
-                      orderDetail?.OrderId,
-                      orderDetail?.FYStatus
-                    )
-                  }
-                  CreatedDate={orderDetail?.CreatedDate}
-                  PaymentStatus={PrintOrderDetails?.[0]?.PaymentOrderDtl}
-                />
-              </div>
-            ))}
-          {CreditCustomer && (
-            <div style={{ display: 'none' }}>
-              <BsBillingCreditCustomer
-                ModalCreditCustomer={CreditCustomer}
-                handlemodalclose={() => {
-                  handleCreditCustomer('Cancel');
-                }}
-                handleOk={() => {
-                  handleCreditCustomer('Submit');
-                }}
-              />
-            </div>
-          )}
-        </div>
         {unpaidopen && (
           <DefaultModal
             open={unpaidopen}

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

@@ -3987,7 +3987,11 @@ const BsBill = () => {
         <tbody>
           {tableDataTakeAway?.length > 0 &&
             tableDataTakeAway?.map((item, index) => (
-              <tr
+              <tr  key={
+                  OldtableDataDinein?.length +
+                  OldtableDataTakeAway?.length +
+                  index
+                }
                 className={
                   BookingType === 'Dine In' && item?.SalesId
                     ? 'BSBillingTable5-table-tr-disabled'

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

@@ -6,6 +6,7 @@ import '../../../../../Styles/BookingScreen/Components/BSBillingTables/BSBilling
 import { GlobalExpDateforHeight } from '../../../../../Features/BookingScreen/BookingData/BookingData';
 import { isMobile } from 'react-device-detect';
 import { getTemplateData } from '../../../../../Features/ThemeChange/ThemeChange';
+import BSBillingTable3 from '../BSBillingTable3/BSBillingTable3';
 
 const BSBTOverall6 = () => {
   const templateData = useSelector(getTemplateData);
@@ -74,7 +75,7 @@ const BSBTOverall6 = () => {
         style={{ height: containerHeight }}
       >
         <div className="BSBTOverall6-defaultscreen-table">
-          <BSBillingTable6 />
+          <BSBillingTable3 TableName='Table6'/>
         </div>
 
         <div />

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

@@ -2283,7 +2283,7 @@ const BSBillingTable6 = () => {
                       index == 0 &&
                       tableitem.OptionName == 'Sl.No' && (
                         <td
-                          rowspan={tableData.length}
+                          rowSpan={tableData.length}
                           style={{ backgroundColor: '#CFB59D' }}
                         >
                           <img width="30px" alt="" src={TakeAwayIcon} />
@@ -2544,7 +2544,7 @@ const BSBillingTable6 = () => {
                       index == 0 &&
                       tableitem.OptionName == 'Sl.No' && (
                         <td
-                          rowspan={tableData.length}
+                          rowSpan={tableData.length}
                           style={{ backgroundColor: '#A2C3CD' }}
                         >
                           <img width="30px" alt="" src={dineInIcon} />
@@ -2836,7 +2836,7 @@ const BSBillingTable6 = () => {
                       index == 0 &&
                       tableitem.OptionName == 'Sl.No' && (
                         <td
-                          rowspan={tableData.length}
+                          rowSpan={tableData.length}
                           style={{ backgroundColor: '#CFB59D' }}
                         >
                           <img width="30px" alt="" src={TakeAwayIcon} />
@@ -3130,7 +3130,7 @@ const BSBillingTable6 = () => {
                       index == 0 &&
                       tableitem.OptionName == 'Sl.No' && (
                         <td
-                          rowspan={tableData.length}
+                          rowSpan={tableData.length}
                           style={{ backgroundColor: '#A2C3CD' }}
                         >
                           <img width="30px" alt="" src={dineInIcon} />

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

@@ -9,6 +9,7 @@ import {
   GlobalScreenSize,
 } from '../../../../../Features/BookingScreen/BookingData/BookingData';
 import '../../../../../Styles/BookingScreen/Components/BSBillingTables/BSBillingTable7/BSBillingTable7.scss';
+import BSBillingTable3 from '../BSBillingTable3/BSBillingTable3';
 
 const BSBillingTable7Overall = () => {
   const templateData = useSelector(getTemplateData);
@@ -79,7 +80,7 @@ const BSBillingTable7Overall = () => {
     >
       {screenwidth > 768 && (
         <div className="BSTable3">
-          <BSBillingTable7 />
+          <BSBillingTable3 TableName="Table7" />
         </div>
       )}
       <div className="BSTable3_payroll">

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

@@ -5,20 +5,15 @@ import WebFont from 'webfontloader';
 import { AiOutlineClose, AiFillDelete } from 'react-icons/ai';
 import TakeAwayIcon from '../../../../../Images/Take away.svg';
 import dineInIcon from '../../../../../Images/Dine In.svg';
-
 import { getCustomerDisplayWindow } from '../../../../../Features/customerDisplayWindow/customerDisplayWindow.js';
 const BSEditTotalAmt = lazy(
   () => import('../BSEditTotalAmount/BSEditTotalAmt.jsx')
 );
-
 const StandardTablePayment = lazy(() => import('./StandardTablePayment.jsx'));
-
 const CustomerPriceHistory = lazy(
   () => import('../../UtillComponents/CustomerPriceHistory.jsx')
 );
-
 const BSImeiDetails = lazy(() => import('../BSImeiDetails/BSImeiDetails.jsx'));
-
 const BSBillingEditQuantity = lazy(
   () => import('../BSBillingEditQuantity/BSBillingEditQuantity')
 );

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

@@ -27,7 +27,6 @@
   width: 100%;
   border-spacing: 0 0px;
   text-align: center;
-  padding: 0 10px;
 
   @media (max-width: 768px) {
     font-size: 0.875rem;
@@ -1086,7 +1085,7 @@
     width: 100%;
     height: max-content;
     overflow: hidden;
-    position: fixed;
+    // position: fixed;
     bottom: 0;
     padding-bottom: 0;
   }
@@ -1213,7 +1212,6 @@
 
 .booking-table-footer {
   width: 100%;
-  // padding: 1rem 1rem 0rem 1rem;
    padding: 10px 10px 4px 10px;
   display: flex;
   flex-direction: column;
@@ -1291,7 +1289,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  // justify-content: space-around;
    gap: 0.5rem;
   opacity: 1;
   background-color: #0d9488;
@@ -1505,6 +1502,7 @@
   align-items: center;
   gap: 1rem;
   justify-content: space-between;
+  padding: 0 4px;
 }
 
 .summaryopenClose {
@@ -1513,7 +1511,8 @@
   gap: 5px;
   background-color: #2564eb2f;
   color: #2563eb;
-  font-size: 13px;
+  font-size: 10px;
+  font-weight: 500;
   padding: 1px 10px 4px 10px;
   border-radius: 50px;
   cursor: pointer;
@@ -1580,7 +1579,6 @@
     height: max-content !important;
     max-height: 30vh !important;
     position: fixed;
-    // bottom: 23%;
      bottom: 140px;
     width: 100%;
   }

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

@@ -230,6 +230,10 @@ import { BiRightArrowAlt } from 'react-icons/bi';
 import PozoAdvanceIcon from '../../UtillComponents/Pozo retail icons/PozoAdvanceIcon';
 import { MdSms } from 'react-icons/md';
 
+import '../../../../BookingScreen/Components/BSBillingTables/StandardTable/StandardTable.scss';
+import BSCustomerSelect from '../../UtillComponents/BSSelectCustomer.jsx';
+import BSNavBarAddUser from '../../UtillComponents/BSNavBarAddUser.jsx';
+
 //
 const subDirectory = import.meta.env.ENV_BASE_URL;
 const MainHomeUrl = import.meta.env.ENV_MAIN_BASE_URL;
@@ -3503,7 +3507,7 @@ const StandardTablePayment = () => {
         </div>
       )}
       <div className="payment-buttons-container">
-        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
           <Tooltip title="Advance Amount" isMobile={isMobile}>
             <div>
               {' '}
@@ -3714,11 +3718,16 @@ const StandardTablePayment = () => {
                 </Tooltip>
               </div>
             )}
+
+          <div className="NavbarCus-Add">
+            <BSCustomerSelect TopName={'navbar-top'} />
+            <BSNavBarAddUser />
+          </div>
         </div>
         <button className="summaryopenClose" onClick={handleSummary}>
           {summary ? (
             <>
-              Summary Close <IoClose color="#e33333" />
+              Close <IoClose color="#e33333" />
             </>
           ) : (
             <>

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

@@ -2206,7 +2206,7 @@ const BSC1Payment = (props) => {
       Type: a.Type,
       OrderQty: a.OrderQty,
       OrderRate: a.OrderRate,
-   // TotalAmt: a.OrderQty * a.OrderRate, //sri
+      // TotalAmt: a.OrderQty * a.OrderRate,
       TotalAmt: a.TotalAmt,
       TaxAmt: a.TaxAmt,
       RefundQty: 0,

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

@@ -6120,7 +6120,7 @@ const BSItemCard = (props) => {
                       ['Layout1', 'Layout2'].includes(
                         templateData?.BookingLayout?.[0]
                       )
-                    ? '13px'
+                    ? '3px'
                     : templateData?.BookingNavbar?.[0] === 'Navbar3' &&
                         ['Layout4', 'Layout5', 'Layout6'].includes(
                           templateData?.BookingLayout?.[0]
@@ -6129,7 +6129,7 @@ const BSItemCard = (props) => {
                       : ['Layout4', 'Layout5', 'Layout6'].includes(
                             templateData?.BookingLayout?.[0]
                           )
-                        ? '2.8rem'
+                        ? '3.1rem'
                         : templateData?.BookingNavbar?.[0] === 'Navbar3'
                           ? '3rem'
                           : '',

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

@@ -371,7 +371,12 @@ const BSNavbar1 = (props, BookingNavbar) => {
     }).format(d);
     setFormattedDate(formatted);
     dispatch(
-      getPreferenceData({ CompId: CompId, AppId: AppId, BranchId: BranchId,UserId:UserId })
+      getPreferenceData({
+        CompId: CompId,
+        AppId: AppId,
+        BranchId: BranchId,
+        UserId: UserId,
+      })
     );
     dispatch(getUserProfile({ UserId: UserId, ActiveStatus: 'A' })).unwrap();
     fetchBranchData();
@@ -431,6 +436,9 @@ const BSNavbar1 = (props, BookingNavbar) => {
   const background = '#ffff';
 
   const handleHome = () => {
+    if (document.fullscreenElement) {
+      document.exitFullscreen().catch(() => {});
+    }
     navigate(`${subDirectory}app-page/home`);
     dispatch(Changedragging(false));
   };

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

@@ -336,7 +336,7 @@ const BSLayout1 = () => {
           )}
         <div
           className="BSLayout1-Master"
-          style={{ height: containerHeight, overflow: 'hidden' }}
+          style={{ height: '99vh', overflow: 'hidden' }}
         >
           <div className="BSLayout1-NavBar">
             <BSNavbar1
@@ -355,7 +355,7 @@ const BSLayout1 = () => {
           >
             <div
               className="Layout-bill-container"
-              style={{ marginTop: '12px' }}
+              // style={{ marginTop: '12px' }}
             >
               <div
                 className={
@@ -624,37 +624,41 @@ const BSLayout1 = () => {
                   </div>
                 </div>
               </div>
-              <div className="BSCategory1-tablecont">
+              {/* <div className="BSCategory1-tablecont"> */}
+              <div
+                className={
+                  BookingBilling === 'Billing5'
+                    ? 'BSlayout1-Table5'
+                    : BookingBilling === 'Billing6'
+                      ? 'BillingLayout-table6'
+                      : 'BSCategory1-tablecont'
+                }
+              >
                 {action ? (
                   <BranchTransferComponent />
                 ) : (
                   <>
-                    {BSLayout1Data?.BookingBilling?.[0] == 'Billing1' && (
+                    {(BSLayout1Data?.BookingBilling?.[0] === 'Billing1' ||
-                      <BSBillingTable1 />
+                      BSLayout1Data?.BookingBilling?.[0] === 'Billing3' ||
-                    )}
+                      BSLayout1Data?.BookingBilling?.[0] === 'Billing4' ||
-                    {BSLayout1Data?.BookingBilling?.[0] == 'Billing2' && (
+                      BSLayout1Data?.BookingBilling?.[0] === 'Billing5' ||
-                      <BSBillingTable2 />
+                      BSLayout1Data?.BookingBilling?.[0] === 'Billing6' ||
-                    )}
+                      BSLayout1Data?.BookingBilling?.[0] === 'Billing7') && (
-                    {BSLayout1Data?.BookingBilling?.[0] == 'Billing3' && (
                       <BSBillingTable3 />
                     )}
-                    {BSLayout1Data?.BookingBilling?.[0] == 'Billing4' && (
+
-                      <BSBillingTable4 />
+                    {BSLayout1Data?.BookingBilling?.[0] === 'Billing2' && (
+                      <BSBillingTable2 />
                     )}
-                    {BSLayout1Data?.BookingBilling?.[0] == 'Billing5' && (
+
-                      <BSBillingTable5 />
+                    {BSLayout1Data?.BookingBilling?.[0] === 'Billing8' && (
+                      <ComboSalesBillTable />
                     )}
-                    {BSLayout1Data?.BookingBilling?.[0] == 'Billing6' && (
+
-                      <BSBillingTable6 />
+                    {BSLayout1Data?.BookingBilling?.[0] ===
-                    )}
-                    {BSLayout1Data?.BookingBilling?.[0] == 'Billing7' && (
-                      <BSBillingTable7 />
-                    )}
-                    {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
-                    {BSLayout1Data?.BookingBilling?.[0] ==
                       'StandardBilling' && (
                       <div className="BSCategory2New">
-                        <StandardTable />
+                        <BSBillingTable3 />
                       </div>
                     )}
                   </>

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

@@ -133,9 +133,6 @@ const BranchTransferComponent = lazy(
 const BSExpireProductsList = lazy(
   () => import('../../Components/UtillComponents/BSExpireProductsList.jsx')
 );
-// const PlanExpireNotification = lazy(
-//   () => import('../PlanExpireNotification.jsx')
-// );
 import PlanExpireNotification from '../PlanExpireNotification.jsx';
 const BSLayout2 = () => {
   const dispatch = useDispatch();
@@ -364,7 +361,7 @@ const BSLayout2 = () => {
             >
               <div
                 className="Layout-bill-container"
-                style={{ marginTop: '9px' }}
+                // style={{ marginTop: '9px' }}
               >
                 <div
                   className={
@@ -607,33 +604,27 @@ const BSLayout2 = () => {
                     <BranchTransferComponent />
                   ) : (
                     <>
-                      {BSLayout2Data?.BookingBilling?.[0] == 'Billing1' && (
+                      {(BSLayout2Data?.BookingBilling?.[0] === 'Billing1' ||
-                        <BSBillingTable1 />
+                        BSLayout2Data?.BookingBilling?.[0] === 'Billing3' ||
-                      )}
+                        BSLayout2Data?.BookingBilling?.[0] === 'Billing4' ||
-                      {BSLayout2Data?.BookingBilling?.[0] == 'Billing2' && (
+                        BSLayout2Data?.BookingBilling?.[0] === 'Billing5' ||
-                        <BSBillingTable2 />
+                        BSLayout2Data?.BookingBilling?.[0] === 'Billing6' ||
-                      )}
+                        BSLayout2Data?.BookingBilling?.[0] === 'Billing7') && (
-                      {BSLayout2Data?.BookingBilling?.[0] == 'Billing3' && (
                         <BSBillingTable3 />
                       )}
-                      {BSLayout2Data?.BookingBilling?.[0] == 'Billing4' && (
+
-                        <BSBillingTable4 />
+                      {BSLayout2Data?.BookingBilling?.[0] === 'Billing2' && (
-                      )}
+                        <BSBillingTable2 />
-                      {BSLayout2Data?.BookingBilling?.[0] == 'Billing5' && (
-                        <BSBillingTable5 />
-                      )}
-                      {BSLayout2Data?.BookingBilling?.[0] == 'Billing6' && (
-                        <BSBillingTable6 />
-                      )}
-                      {BSLayout2Data?.BookingBilling?.[0] == 'Billing7' && (
-                        <BSBillingTable7 />
                       )}
 
-                      {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
+                      {BSLayout2Data?.BookingBilling?.[0] === 'Billing8' && (
-                      {BSLayout2Data?.BookingBilling?.[0] ==
+                        <ComboSalesBillTable />
+                      )}
+
+                      {BSLayout2Data?.BookingBilling?.[0] ===
                         'StandardBilling' && (
                         <div className="BSCategory2New">
-                          <StandardTable />
+                          <BSBillingTable3 />
                         </div>
                       )}
                     </>

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

@@ -334,7 +334,7 @@ const BSLayout3 = () => {
               backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
             }}
           >
-            <div className="Layout-bill-container" style={{ marginTop: '9px' }}>
+            <div className="Layout-bill-container">
               <div
                 className={
                   BookingNavbar === 'Navbar3'
@@ -578,32 +578,27 @@ const BSLayout3 = () => {
                   <BranchTransferComponent />
                 ) : (
                   <>
-                    {BSLayout3Data?.BookingBilling?.[0] == 'Billing1' && (
+                    {(BSLayout3Data?.BookingBilling?.[0] === 'Billing1' ||
-                      <BSBillingTable1 />
+                      BSLayout3Data?.BookingBilling?.[0] === 'Billing3' ||
-                    )}
+                      BSLayout3Data?.BookingBilling?.[0] === 'Billing4' ||
-                    {BSLayout3Data?.BookingBilling?.[0] == 'Billing2' && (
+                      BSLayout3Data?.BookingBilling?.[0] === 'Billing5' ||
-                      <BSBillingTable2 />
+                      BSLayout3Data?.BookingBilling?.[0] === 'Billing6' ||
-                    )}
+                      BSLayout3Data?.BookingBilling?.[0] === 'Billing7') && (
-                    {BSLayout3Data?.BookingBilling?.[0] == 'Billing3' && (
                       <BSBillingTable3 />
                     )}
-                    {BSLayout3Data?.BookingBilling?.[0] == 'Billing4' && (
+
-                      <BSBillingTable4 />
+                    {BSLayout3Data?.BookingBilling?.[0] === 'Billing2' && (
+                      <BSBillingTable2 />
                     )}
-                    {BSLayout3Data?.BookingBilling?.[0] == 'Billing5' && (
+
-                      <BSBillingTable5 />
+                    {BSLayout3Data?.BookingBilling?.[0] === 'Billing8' && (
+                      <ComboSalesBillTable />
                     )}
-                    {BSLayout3Data?.BookingBilling?.[0] == 'Billing6' && (
+
-                      <BSBillingTable6 />
+                    {BSLayout3Data?.BookingBilling?.[0] ===
-                    )}
-                    {BSLayout3Data?.BookingBilling?.[0] == 'Billing7' && (
-                      <BSBillingTable7 />
-                    )}
-                    {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
-                    {BSLayout3Data?.BookingBilling?.[0] ==
                       'StandardBilling' && (
                       <div className="BSCategory2New">
-                        <StandardTable />
+                        <BSBillingTable3 />
                       </div>
                     )}
                   </>

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

@@ -345,7 +345,7 @@ const BSLayout4 = () => {
             />
           </div>
 
-          <div className="Layout-bill-container" style={{ margin: '0' }}>
+          <div className="Layout-bill-container">
             <div
               className={
                 BookingNavbar === 'Navbar3'
@@ -561,42 +561,30 @@ const BSLayout4 = () => {
                 <BranchTransferComponent />
               ) : (
                 <>
-                  {BSLayout4Data?.BookingBilling?.[0] == 'Billing1' && (
+                  {(BSLayout4Data?.BookingBilling?.[0] === 'Billing1' ||
-                    <BSBillingTable1 />
+                    BSLayout4Data?.BookingBilling?.[0] === 'Billing3' ||
-                  )}
+                    BSLayout4Data?.BookingBilling?.[0] === 'Billing4' ||
-                  {BSLayout4Data?.BookingBilling?.[0] == 'Billing2' && (
+                    BSLayout4Data?.BookingBilling?.[0] === 'Billing5' ||
-                    <BSBillingTable2 />
+                    BSLayout4Data?.BookingBilling?.[0] === 'Billing6' ||
-                  )}
+                    BSLayout4Data?.BookingBilling?.[0] === 'Billing7') && (
-                  {BSLayout4Data?.BookingBilling?.[0] == 'Billing3' && (
                     <BSBillingTable3 />
                   )}
-                  {BSLayout4Data?.BookingBilling?.[0] == 'Billing4' && (
+
-                    <BSBillingTable4 />
+                  {BSLayout4Data?.BookingBilling?.[0] === 'Billing2' && (
+                    <BSBillingTable2 />
                   )}
-                  {BSLayout4Data?.BookingBilling?.[0] == 'Billing5' && (
+
-                    <BSBillingTable5 />
+                  {BSLayout4Data?.BookingBilling?.[0] === 'Billing8' && (
+                    <ComboSalesBillTable />
                   )}
-                  {BSLayout4Data?.BookingBilling?.[0] == 'Billing6' && (
+
-                    <BSBillingTable6 />
+                  {BSLayout4Data?.BookingBilling?.[0] === 'StandardBilling' && (
-                  )}
-                  {BSLayout4Data?.BookingBilling?.[0] == 'Billing7' && (
-                    <BSBillingTable7 />
-                  )}
-                  {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
-                  {BSLayout4Data?.BookingBilling?.[0] == 'StandardBilling' && (
                     <div className="BSCategory2New">
-                      <StandardTable />
+                      <BSBillingTable3 />
                     </div>
                   )}
                 </>
               )}
-              {/* <div className="salesStoreName"
-              style={{
-                color: SelectedBillColor?.['FontColor'],
-                backgroundColor: SelectedBillColor?.['BackgroundColor'],
-              }}>
-              <BranchName/>
-            </div> */}
             </div>
           </div>
         </div>

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

@@ -494,17 +494,17 @@ const BSLayout5 = () => {
                   <BranchTransferComponent />
                 ) : (
                   <>
-                    {BookingBilling == 'Billing1' && <BSBillingTable1 />}
+                    {BookingBilling == 'Billing1' && <BSBillingTable3 />}
                     {BookingBilling == 'Billing2' && <BSBillingTable2 />}
                     {BookingBilling == 'Billing3' && <BSBillingTable3 />}
-                    {BookingBilling == 'Billing4' && <BSBillingTable4 />}
+                    {BookingBilling == 'Billing4' && <BSBillingTable3 />}
-                    {BookingBilling == 'Billing5' && <BSBillingTable5 />}
+                    {BookingBilling == 'Billing5' && <BSBillingTable3 />}
-                    {BookingBilling == 'Billing6' && <BSBillingTable6 />}
+                    {BookingBilling == 'Billing6' && <BSBillingTable3 />}
-                    {BookingBilling == 'Billing7' && <BSBillingTable7 />}
+                    {BookingBilling == 'Billing7' && <BSBillingTable3 />}
                     {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
                     {BookingBilling == 'StandardBilling' && (
                       <div className="BSCategory2New">
-                        <StandardTable />
+                        <BSBillingTable3 />
                       </div>
                     )}
                   </>

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

@@ -570,48 +570,31 @@ const BSLayout6 = () => {
                   <BranchTransferComponent />
                 ) : (
                   <>
-                    {BSLayout6Data?.BookingBilling?.[0] == 'Billing1' && (
+                    {(BSLayout6Data?.BookingBilling?.[0] === 'Billing1' ||
-                      <BSBillingTable1 />
+                      BSLayout6Data?.BookingBilling?.[0] === 'Billing3' ||
-                    )}
+                      BSLayout6Data?.BookingBilling?.[0] === 'Billing4' ||
-                    {BSLayout6Data?.BookingBilling?.[0] == 'Billing2' && (
+                      BSLayout6Data?.BookingBilling?.[0] === 'Billing5' ||
-                      <BSBillingTable2 />
+                      BSLayout6Data?.BookingBilling?.[0] === 'Billing6' ||
-                    )}
+                      BSLayout6Data?.BookingBilling?.[0] === 'Billing7') && (
-                    {BSLayout6Data?.BookingBilling?.[0] == 'Billing3' && (
                       <BSBillingTable3 />
                     )}
-                    {BSLayout6Data?.BookingBilling?.[0] == 'Billing4' && (
+
-                      <BSBillingTable4 />
+                    {BSLayout6Data?.BookingBilling?.[0] === 'Billing2' && (
+                      <BSBillingTable2 />
                     )}
-                    {BSLayout6Data?.BookingBilling?.[0] == 'Billing5' && (
+
-                      <BSBillingTable5 />
+                    {BSLayout6Data?.BookingBilling?.[0] === 'Billing8' && (
+                      <ComboSalesBillTable />
                     )}
-                    {BSLayout6Data?.BookingBilling?.[0] == 'Billing6' && (
+
-                      <BSBillingTable6 />
+                    {BSLayout6Data?.BookingBilling?.[0] ===
-                    )}
-                    {BSLayout6Data?.BookingBilling?.[0] == 'Billing7' && (
-                      <BSBillingTable7 />
-                    )}
-                    {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
-                    {BSLayout6Data?.BookingBilling?.[0] ==
                       'StandardBilling' && (
-                      <div
+                      <div className="BSCategory2New">
-                        className="BSCategory2New"
+                        <BSBillingTable3 />
-                        style={{
-                          height: BSLayout6Data ? '88vh' : '99vh',
-                        }}
-                      >
-                        <StandardTable />
                       </div>
                     )}
                   </>
                 )}
-                {/* <div className="salesStoreName"
-                style={{
-                  color: SelectedBillColor?.['FontColor'],
-                  backgroundColor: SelectedBillColor?.['BackgroundColor'],
-                }}>
-                <BranchName />
-              </div> */}
               </div>
             </div>
           </div>

src/Pages/BookingScreen/Template/BSLayout7/BSCombo1.jsx

@@ -9,10 +9,10 @@ import React, {
 import { useDispatch, useSelector } from 'react-redux';
 import moment from 'moment';
 import { Tooltip, Badge, Popconfirm } from 'antd';
-const BSBillingTable1 = lazy(
+// const BSBillingTable1 = lazy(
-  () =>
+//   () =>
-    import('../../Components/BSBillingTables/BSBillingTable1/BSBillingTable1')
+//     import('../../Components/BSBillingTables/BSBillingTable1/BSBillingTable1')
-);
+// );
 const BSBillingTable2 = lazy(
   () => import('../../Components/BSBillingTables/BSBillingTable2/BsBill2')
 );
@@ -20,10 +20,10 @@ const BSBillingTable3 = lazy(
   () =>
     import('../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3')
 );
-const BSBillingTable4 = lazy(
+// const BSBillingTable4 = lazy(
-  () =>
+//   () =>
-    import('../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4')
+//     import('../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4')
-);
+// );
 const BSBillingTable5 = lazy(
   () => import('../../Components/BSBillingTables/BSBillingTable5/BsBill')
 );
@@ -315,7 +315,6 @@ export default function BSCombo1() {
     let Postresponse = await dispatch(PutBookingClose(Postdata)).unwrap();
     if (Postresponse?.data?.statusCode === 1) {
       fetchBookingStatus();
-    } else {
     }
   };
   const OpenBookingModal = () => {
@@ -604,10 +603,10 @@ export default function BSCombo1() {
               ) : (
                 // <ComboSalesBillTable />
                 <>
-                  {BookingBilling == 'Billing1' && <BSBillingTable1 />}
+                  {BookingBilling == 'Billing1' && <BSBillingTable3 />}
                   {BookingBilling == 'Billing2' && <BSBillingTable2 />}
                   {BookingBilling == 'Billing3' && <BSBillingTable3 />}
-                  {BookingBilling == 'Billing4' && <BSBillingTable4 />}
+                  {BookingBilling == 'Billing4' && <BSBillingTable3 />}
                   {BookingBilling == 'Billing5' && <BSBillingTable5 />}
                   {BookingBilling == 'Billing6' && <BSBillingTable6 />}
                   {BookingBilling == 'Billing7' && <BSBillingTable7 />}
@@ -624,19 +623,19 @@ export default function BSCombo1() {
             </div>
           </div>
           {paymentloader === true && (
-            <div class="Payment-loader1">
+            <div className="Payment-loader1">
-              <div class="Payment-loader">
+              <div className="Payment-loader">
-                <div class="contener_mixte">
+                <div className="contener_mixte">
-                  <div class="ballcolor ball_1">&nbsp;</div>
+                  <div className="ballcolor ball_1">&nbsp;</div>
                 </div>
-                <div class="contener_mixte">
+                <div className="contener_mixte">
-                  <div class="ballcolor ball_2">&nbsp;</div>
+                  <div className="ballcolor ball_2">&nbsp;</div>
                 </div>
-                <div class="contener_mixte">
+                <div className="contener_mixte">
-                  <div class="ballcolor ball_3">&nbsp;</div>
+                  <div className="ballcolor ball_3">&nbsp;</div>
                 </div>
-                <div class="contener_mixte">
+                <div className="contener_mixte">
-                  <div class="ballcolor ball_4">&nbsp;</div>
+                  <div className="ballcolor ball_4">&nbsp;</div>
                 </div>
                 <p style={{ marginTop: '2rem' }}>
                   {' '}

src/Styles/BookingScreen/Components/BSBillingTables/BSBillingTable1/BSBPayment.scss

@@ -1,7 +1,9 @@
 .BST1-Payment-payicons {
   display: flex;
   flex-direction: row;
-  justify-content: space-around;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
 }
 
 .BST1-Payment-onlypay {
@@ -16,6 +18,11 @@
   display: flex;
   flex-direction: column;
   gap: 5px;
+  padding: 6px 4px;
+  @media (max-width: 768px) {
+    height: 150px;
+    width: 100%;
+  }
 }
 
 input::-webkit-outer-spin-button,
@@ -28,12 +35,15 @@ input::-webkit-inner-spin-button {
   display: flex;
   justify-content: space-evenly;
   gap: 0.3rem;
+  @media (max-width: 500px) {
+    width: 95%;
+  }
 }
 
 .received-button {
   width: 100px;
   height: 40px;
-  border-radius: 8px;
+  border-radius: 6px;
   border: 0px solid none;
   font-size: 18px;
   font-weight: 600;
@@ -41,6 +51,14 @@ input::-webkit-inner-spin-button {
   color: #696969;
   border: none;
   text-align: center;
+  font-family: "Poppins";
+  display: flex;
+  align-items: center;
+  outline: none;
+  justify-content: center;
+  @media (max-width: 500px) {
+    flex: 1;
+  }
 }
 
 .received-button1 {
@@ -68,17 +86,21 @@ input::-webkit-inner-spin-button {
 }
 
 .price-button {
-  border-radius: 8px;
+  border-radius: 6px;
   border: none;
-  font-size: 24px;
+  font-size: 20px;
-  font-weight: 600;
+  font-weight: 500;
   background-color: var(--SELECTED_COLOR);
   color: #fff;
   border: none;
   width: max-content;
   padding: 0px 12px;
   cursor: pointer;
+  font-family: "Poppins" !important;
   height: 40px;
+  @media (max-width: 500px) {
+    flex: 1;
+  }
 }
 
 .price-button-disabled {
@@ -99,14 +121,22 @@ input::-webkit-inner-spin-button {
 .Balance-button {
   width: 100px;
   height: 40px;
-  border-radius: 8px;
+  border-radius: 6px;
   border: 0px solid none;
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 600;
   background-color: #e3ffd5;
   color: #555555;
   border: none;
   text-align: center;
+  font-family: "Poppins";
+  display: flex;
+  align-items: center;
+  outline: none;
+  justify-content: center;
+  @media (max-width: 500px) {
+    flex: 1;
+  }
 }
 
 .payment-div-0 {
@@ -144,7 +174,7 @@ input::-webkit-inner-spin-button {
   justify-content: center;
   gap: 0.2rem;
   background-color: #dbdbdb;
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
 }
 
 .payment-div-0-userplus {
@@ -164,9 +194,7 @@ input::-webkit-inner-spin-button {
 .BST1-Payment-onlyicons {
   display: flex;
   flex-direction: row;
-  // gap: 1rem;
    justify-content: center;
-  //naresh
    column-gap: 0.5rem;
 }
 
@@ -182,16 +210,6 @@ input::-webkit-inner-spin-button {
     width: 80px;
   }
 
-  .received-button {
-    font-size: 16px;
-    width: 80px;
-  }
-
-  .price-button {
-    font-size: 16px;
-    width: 80px;
-  }
-
   .payment-div-subdiv-select {
     width: 80px;
     height: 40px;
@@ -203,7 +221,6 @@ input::-webkit-inner-spin-button {
   }
 
   .BST1-Payment-payicons {
-    // flex-direction: column;
      flex-direction: row;
     align-items: center;
     justify-content: space-evenly;
@@ -212,7 +229,6 @@ input::-webkit-inner-spin-button {
   .BST1-Payment-onlyicons {
     display: flex;
     flex-direction: row;
-    // gap: 1rem;
      justify-content: center;
   }
 
@@ -226,6 +242,9 @@ input::-webkit-inner-spin-button {
   .BSBTOverall1-Default-summary .BST1-Payment-structure {
     display: none !important;
   }
+  .BSBTOverall1Defaultsummary .BST1-Payment-structure {
+    display: none !important;
+  }
 }
 
 .Order {
@@ -252,7 +271,7 @@ input::-webkit-inner-spin-button {
   display: flex;
   gap: 0.2rem;
   align-items: center;
-  font-family: 'Poppins';
+  font-family: "Poppins";
   justify-content: center;
   cursor: pointer;
   text-transform: capitalize;
@@ -273,7 +292,7 @@ input::-webkit-inner-spin-button {
   display: flex;
   gap: 0.2rem;
   align-items: center;
-  font-family: 'Poppins';
+  font-family: "Poppins";
   justify-content: center;
   cursor: pointer;
   text-transform: capitalize;

src/Styles/BookingScreen/Components/BSBillingTables/BSBillingTable1/BSBTOverall.scss

@@ -4,9 +4,7 @@
 
 .BSBTOverall1-Default {
   width: inherit;
-  // height: inherit;
+  height: 85vh;
-  height: 83vh;
-  // height: 80vh;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -20,9 +18,26 @@
 .BSBTOverall1-Default-summary {
   display: flex;
   justify-content: center;
-  // margin-Top:2rem;
    align-items: center;
   gap: 1rem;
+  .icon-button {
+    font-size: 10px;
+    font-weight: 500;
+    height: unset;
+    padding: 4px 6px;
+  }
+}
+.BSBTOverall1Defaultsummary {
+  display: flex;
+  justify-content: center;
+   align-items: center;
+  gap: 1rem;
+  .icon-button {
+    font-size: 10px;
+    font-weight: 500;
+    height: unset;
+    padding: 4px 6px;
+  }
 }
 
 .BSBTOverall1-div {
@@ -31,7 +46,18 @@
   row-gap: 0.5rem;
   background-color: #fff;
   width: inherit;
-  // position: fixed;
+   bottom: 0;
+
+  padding: 0.8rem 0rem;
+  border-top: solid 1px #7c7c7c;
+  border-radius: 7px;
+}
+.PaySectionModified {
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.5rem;
+  background-color: #fff;
+  width: inherit;
    bottom: 0;
 
   padding: 0.8rem 0rem;
@@ -39,7 +65,7 @@
   border-radius: 7px;
 }
 .Btn-responsiveBill {
-  font-family: 'GIlroy';
+  font-family: "GIlroy";
   font-size: 12px;
   font-weight: 400;
   padding: 4px 14px;
@@ -82,6 +108,7 @@
 
   .BSBillingTable1-summeryTable {
     display: block;
+    height: 0 !important;
   }
 
   .BSBTOverall1-Mobile {
@@ -103,6 +130,18 @@
     border-top: solid 1px #7c7c7c;
     border-radius: 7px;
   }
+
+  .PaySectionModified {
+    position: fixed;
+    width: 100%;
+    background-color: #fff;
+    bottom: 5px;
+    left: 0;
+    row-gap: 0rem;
+    padding: 0rem 0rem;
+    border-top: solid 1px #7c7c7c;
+    border-radius: 7px;
+  }
   .Btn-responsiveBill {
     display: block !important;
   }
@@ -120,9 +159,42 @@
   .BSBTOverall1-Default-summary {
     display: flex;
     justify-content: center;
-    // margin-Top:2rem;
     align-items: center;
     gap: 0rem;
-    // transform: scale(0.9);
+  }
+  .BSBTOverall1Defaultsummary {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0rem;
+  }
+}
+
+// 1 with 6th Modified code style
+
+.PaySectionModified {
+  .payment-div {
+    width: 100%;
+    padding: 1px 5px;
+    input,
+    button {
+      flex: 1;
+    }
+  }
+  .received-button {
+    background-color: #fff;
+    border: 1px solid #333;
+    font-weight: 500;
+    outline: none;
+    font-size: 16px;
+    font-family: "Poppins";
+  }
+  .Balance-button {
+    background-color: #fff;
+    border: 1px solid #333;
+    font-weight: 500;
+    outline: none;
+    font-size: 16px;
+    font-family: "Poppins";
   }
 }

src/Styles/BookingScreen/Components/BSBillingTables/BSBillingTable2/BSBIllingTable2.scss

@@ -10,38 +10,27 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  // height: 83vh;
-  //vm
-  height: 80vh;
   width: 430px;
-  // background-color: #fff;
+  .BSBilling3PayMaster {
+    height: 150px !important;
+    flex-grow: unset;
   }
-
-.BsTable2-Master-6 {
-  //vm
-  height: 71vh;
-}
-
-.BSBillingTable2-summary-container {
-  // position: fixed;
-  bottom: 0;
-  width: inherit;
-  padding: 0.5rem 0.5rem;
-  background-color: #fff;
-  box-shadow: var(--BOX_SHADOW_LEVEL2);
 }
 
 .BSBillingTable2-billtablediv {
   width: 100%;
   font-family: var(--PARA_FONT_FAMILY);
   line-height: 1;
-  // font-family: 'Manrope';
  }
 
 .BSBillingTable2-Summary {
   width: inherit;
-  // height: clamp(66vh, 50vh, 40vh);
+  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+  background-color: #ffffff;
   overflow: auto;
+  height: 65vh;
+  padding: 0 4px;
+  scrollbar-width: none;
 }
 
 .BSBillingTable2-orders-div {
@@ -50,7 +39,7 @@
   row-gap: 0.5rem;
   height: inherit;
   width: inherit;
-  // justify-content: space-around;
+
   align-items: center;
 }
 
@@ -66,7 +55,7 @@
   column-gap: 1rem;
   margin: 0vw 5vh;
   justify-content: flex-start;
-  // width: 20vw;
+
   border: none;
 }
 
@@ -129,7 +118,6 @@
 .BSBillingTable2-table-div {
   background-color: #ececec;
   height: 40vh;
-  // margin: 1vw 2vh;
    padding: 1vw 1vh;
   width: 100%;
   overflow: auto;
@@ -185,8 +173,8 @@
   column-gap: 1rem;
   text-align: left;
   padding: 10px 5px;
-  width: 100%;
+  width: 98%;
-  margin: 0.5rem 0rem;
+  margin: 0.2rem 0rem;
   align-items: left;
   background-color: #ffffff;
   border-radius: 6px;
@@ -250,8 +238,6 @@
 
 .BSBillingTable2-pay-btn-div {
   display: flex;
-  // width: 90%;
-  //naresh
    width: 90%;
   justify-content: space-around;
   align-items: center;
@@ -260,7 +246,6 @@
   background-color: #fff;
 }
 
-// Payment Options
  .pay-btn-div {
   display: flex;
   align-items: center;
@@ -283,7 +268,6 @@
 }
 
 .Table3-cash .pay-opt-btn {
-  // width: 70px;
    transform: scale(0.9);
 }
 
@@ -293,7 +277,6 @@
   display: flex;
   align-items: center;
   flex-direction: row;
-  // column-gap: 0.6rem;
    font-weight: 600;
   border-radius: 4.982px;
   font-family: var(--HEADING_FONT_FAMILY);
@@ -376,12 +359,7 @@
   width: 30px;
   font-size: 20px;
   cursor: pointer;
-  // cursor: pointer;
-  // font-size:30px;
    color: var(--SELECTED_COLOR);
-  // cursor: pointer;
-  // font-size:30px;
-  // color: #52C41A;
  }
 
 .Tbl2-Dinein-order-btn-disable {
@@ -389,12 +367,7 @@
   width: 30px;
   font-size: 20px;
   cursor: pointer;
-  // cursor: pointer;
-  // font-size:30px;
    color: var(--SELECTED_COLOR);
-  // cursor: pointer;
-  // font-size:30px;
-  // color: #52C41A;
    pointer-events: none;
 }
 
@@ -442,7 +415,6 @@
 }
 
 .BSBillingTable2-table-td {
-  // border: 1px solid #dddddd;
    border-bottom: 1.9px dashed #000;
   text-align: left;
   padding: 8px;
@@ -453,14 +425,13 @@
 }
 
 .BSBillingTable2-table-th {
-  // border: 1px solid #dddddd;
    border-bottom: 1.9px solid #000;
   padding: 8px;
   text-align: center;
 }
 
 .BSBillingTable2-table-notes {
-  font-size: '14px';
+  font-size: 14px;
   font-weight: 500;
 }
 
@@ -471,14 +442,12 @@
 }
 
 .BSBillingTable2-table-sub-td {
-  // display: flex;
     font-size: 14px;
   font-weight: 500;
   color: #52c41a;
 }
 
 .BSBillingTable2-table-tr:nth-child(even) {
-  // background-color: #dddddd;
    text-align: center;
 }
 
@@ -503,7 +472,6 @@
 
 .BsBill2Sum-pop {
   position: absolute;
-  // bottom: 100px;
    right: 0;
   width: 100%;
   height: 100%;
@@ -523,8 +491,6 @@
     height: 0vh !important;
   }
 
-  // .BSBillingTable2-bill-amnt-cont
-  // .BsBill-Popover,
    .BSBillingTable2-billtablediv,
   .BSBillingTable2-order-cont,
   .BSBillingTable2-bill-cont,
@@ -540,7 +506,6 @@
     width: 60px !important;
   }
 
-  // .BSBillingTable2-bill-amnt-cont
    .mobscrn-sum {
     display: flex;
     font-size: 20px;
@@ -571,7 +536,6 @@
   }
 
   .BSBillingTable2-Summary {
-    // position: fixed;
      bottom: 0;
     right: 0;
   }
@@ -581,26 +545,11 @@
   }
 
   .BSBillingTable2-pay-btn-div {
-    // position: fixed;
      right: 0;
     column-gap: 1rem;
-    // width: 90%;
-    // overflow-x: scroll;
-    // transform: scale(0.75);
      margin: 0rem 0rem;
-    // nk
-    //
-    //
      bottom: 5.2rem;
   }
-
-  // .billing-btn-deactive {
-  //   padding: 2.2rem !important;
-  // }
-
-  // .billing-btn {
-  //   padding: 2.2rem !important;
-  // }
 }
 
 @media (min-width: 280px) and (max-width: 499px) {
@@ -611,39 +560,18 @@
     width: 100% !important;
   }
 
-  .BsLayout4-Master .BSBillingTable2-summary-container {
-    width: 100vw !important;
-    position: fixed;
-    z-index: 1;
-    bottom: 2.3rem;
-    left: 0rem;
-  }
-
-  // .BsLayout4-Master .BSBillingTable2-pay-btn-div {
-  //   position: fixed;
-  //   right: 0;
-  //   bottom: 4.3rem;
-  // }
-
-  .BsTable2-Master {
-    height: 0px;
-  }
-
   .pay-options-btns {
     padding: 0.5rem 0rem !important;
     font-size: 12px !important;
   }
 
-  // .BSBillingTable2-pay-btn-div {
+ 
-  //   justify-content: space-around;
-  // }
   .BSBillingTable2-icon-container {
     display: flex;
   }
 
   .BSBillingTable2-Summary {
-    // width:100vw !important;
+ 
-    // position: fixed;
     bottom: 100px;
     right: 0;
   }
@@ -654,17 +582,6 @@
     width: 100%;
   }
 
-  .BSBillingTable2-summary-container {
-    width: 100vw !important;
-    position: fixed;
-    z-index: 1;
-    bottom: 2.1rem;
-    // nk
-    // bottom: 5rem;
-    //
-    left: 0rem;
-  }
-
   .BSBillingTable2-bill-amnt-content {
     position: fixed;
     bottom: 88px;
@@ -704,42 +621,10 @@
     height: 0vh !important;
   }
 
-  .BsTable2-Master {
-    height: 0px;
-  }
-
-  .BsLayout4-Master .BSBillingTable2-summary-container {
-    position: fixed !important;
-    width: 100vw !important;
-    z-index: 23;
-    left: 0;
-  }
-
-  .BSBillingTable2-summary-container {
-    bottom: 0;
-    width: inherit;
-    background-color: #fff;
-    //nk
-    padding: 1.3rem 0.5rem;
-    //
-
-    position: fixed;
-    width: 100vw;
-    // height: 0px !important;
-  }
-
   .shrct {
     display: none !important;
   }
 
-  // .BSBillingTable2-bill-amnt-cont,
-  .BSBillingTable2-order-cont,
-  .BSBillingTable2-bill-cont,
-  .tkaway-dine-btns {
-    // display: none !important;
-  }
-
-  // .BSBillingTable2-bill-amnt-cont
   .BSBillingTable2-orders-div {
     width: 100vw;
   }
@@ -751,7 +636,6 @@
   }
 
   .BSBillingTable2-pay-btn-div {
-    // justify-content: space-around;
      background-color: #fff;
   }
 
@@ -760,7 +644,6 @@
   }
 
   .BSBillingTable2-Summary {
-    // position: fixed;
      display: none;
     bottom: 0;
     right: 0;

src/Styles/BookingScreen/Components/BSBillingTables/BSBillingTable4/BSBillingTable4.scss

@@ -13,9 +13,7 @@
   height: 83vh;
 }
 
-.BSLayout6-fullbody .BSTable3_overall {
+ 
-  height: 71vh;
-}
 
 .BSLayout6-fullbody .BsTable2-Master {
   height: 71vh;
@@ -735,7 +733,6 @@
   justify-content: space-evenly;
   padding: 0px 0px;
 }
-//nk
  .Table7-price-icon-container {
   display: flex;
   flex-direction: column;

src/Styles/BookingScreen/Components/BSBillingTables/BSBillingTable6/BSBillingTable6.scss

@@ -16,14 +16,10 @@
 }
 
 .BillingTable6-Table1 {
-  // width: inherit;
-  // width: 100vw;
    border-spacing: 0px;
 }
 
 .BillingTable6Table1-head {
-  // background-color: #124A79;
-  // color: #fff;
    text-align: center;
   position: sticky;
   top: 0;
@@ -33,6 +29,7 @@
   padding: 1vh 1vh 1vh 1vh;
   border: 0.1px solid rgba(168, 168, 168, 0.5019607843);
   font-family: "Poppins", sans-serif;
+  // border:none; // Mohan 1
 }
 
 .BillingTable6-Table1-row {
@@ -53,7 +50,8 @@
   border: 0.1px solid #a8a8a880;
   border-top: none;
   font-family: "Poppins", sans-serif;
-  font-size: 12px;
+  font-size: 14px;
+  // border:none; // Mohan 2
 }
 
 .BillingTable6Table1-body {

src/Styles/BookingScreen/Components/BSBillingTables/BSBillingTable6/BST6Payment.scss

@@ -72,7 +72,8 @@ input::-webkit-inner-spin-button {
   height: 38.16px;
   border-radius: 8.3px;
   border: 0.83px solid #8e8e8e;
-  font-size: 12px;
+  font-size: 18px;
+  font-weight: 500;
   font-family: "Poppins", sans-serif;
   text-align: center;
 }
@@ -96,9 +97,10 @@ input::-webkit-inner-spin-button {
   height: 38.16px;
   border-radius: 8.3px;
   border: 0.83px solid #8e8e8e;
-  font-size: 12px;
+  font-size: 18px;
   font-family: "Poppins", sans-serif;
   text-align: center;
+  font-weight: 500;
 }
 
 .BST6Payment-Structure {
@@ -205,7 +207,8 @@ input::-webkit-inner-spin-button {
 .Btn-payment-mode {
   background-color: var(--SELECTED_COLOR);
   font-size: 13px !important;
-  font-weight: 500;border: none;
+  font-weight: 500;
+  border: none;
   height: 40px;
   outline: none;
   flex-grow: 1;
@@ -243,7 +246,8 @@ input::-webkit-inner-spin-button {
   background-color: var(--DEFAULT_SELECTED_COLOR);
   font-size: 13px !important;
   font-weight: 500;
-  outline: none;border: none;
+  outline: none;
+  border: none;
   height: 40px;
   width: max-content !important;
   flex: 1;
@@ -290,8 +294,6 @@ input::-webkit-inner-spin-button {
   width: 20px;
   height: 20px;
   cursor: pointer;
-  // background-color: #bebebe;
-  // color: #000000;
    border: none;
   border-radius: 6px;
 }
@@ -399,7 +401,6 @@ input::-webkit-inner-spin-button {
   }
 
   .BST6Payment-Button-pay {
-    // width: max-content;
      width: 155px;
     height: 40px;
     font-size: 19px;

src/Styles/BookingScreen/Components/BSBillingTables/BSBillingTable7/BSBillingTable7.scss

@@ -392,9 +392,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    svg {
+ 
-      margin-top: -7px;
-    }
   }
 }
 

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

@@ -10,10 +10,12 @@
   padding: 0.3rem 0.3rem;
   border-top: 1px solid #b5b5b5;
   gap: 4px;
+  border-radius: 0 0 10px 10px;
   @media (max-width: 768px) {
     flex-direction: column;
     width: 100% !important;
-    padding: 0 12px;
+    padding: 0 6px;
+    border-top: none;
   }
 }
 
@@ -21,6 +23,7 @@
   width: 100%;
   border-spacing: 0 0px;
   text-align: center;
+ 
 }
 
 .BSBill-Table3-throw {
@@ -29,6 +32,7 @@
   background-color: white;
   top: 0;
   height: 3rem;
+  z-index: 9;
 }
 
 .summery-div {
@@ -45,6 +49,7 @@
   border-radius: 5px;
   width: 170px;
   height: 45px;
+  vertical-align: middle;
 }
 
 .BSBilling3-price-full {
@@ -304,7 +309,7 @@
 .lstamount {
   text-align: right;
   font-weight: 600;
-  font-size: 18px;
+  font-size: 14px;
   font-family: "Poppins";
 }
 
@@ -321,20 +326,8 @@
   overflow: auto;
   scrollbar-width: none;
   width: inherit;
-  height: 85vh;
+  height: 85vh !important;
-  border-radius: 10px;
+  gap: 4px;
-  @media (max-width: 768px) {
-    width: 100% !important;
-  }
-}
-.BSTable3_overallLayout1 {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  overflow: auto;
-  scrollbar-width: none;
-  width: inherit;
-  height: 85vh;
   border-radius: 10px;
   @media (max-width: 768px) {
     width: 100% !important;
@@ -348,8 +341,8 @@
 .BSTable3 {
   overflow-y: auto;
   scrollbar-width: none;
-  height: 100vh;
+  height: 70vh;
-  background-color: #fff;
+  background-color: #ffffff;
 }
 
 .Cust-tag {
@@ -393,6 +386,14 @@
   bottom: 0;
   width: inherit;
   z-index: 1;
+  height: 160px;
+  border-radius: 0 0 10px 10px;
+  @media (max-width: 768px) {
+    height: unset;
+    .BSBill-Table3 {
+      display: block;
+    }
+  }
 }
 
 .BSTable3_hold {
@@ -428,7 +429,7 @@
 }
 
 .Discountpay {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 600;
 }
 
@@ -645,7 +646,7 @@
   }
 }
 
-//   new inp style  ************
+// new input style  ************
 
 .custom-dropdown {
   position: relative;
@@ -705,8 +706,6 @@
   background-color: #f0f0f0;
 }
 
-//draft by Sri
-
 @media (max-width: 768px) {
   .Table3-Price-div {
     flex-direction: row !important;
@@ -771,21 +770,13 @@
     font-size: 10px;
   }
  
-  .BSBilling3PayMaster {
-    position: fixed;
-    bottom: 0;
-    display: flex;
-    flex-direction: column;
-    row-gap: 0rem !important;
-    column-gap: 0rem !important;
-  }
 
   .BSBill-Table3 {
     border-spacing: 0;
   }
 
   .BS3hold-sum {
-    justify-content: space-between !important;
+    justify-content: space-around !important;
     width: 100% !important;
   }
 
@@ -967,8 +958,6 @@
   right: 92%;
 }
 
-//karthiga 3012
-
 .Order {
   background-color: var(--SELECTED_COLOR);
 }
@@ -1059,3 +1048,323 @@
     display: none;
   }
 }
+
+// Vicky
+.Bill8-ShopCart-Header {
+  font-family: "Poppins", sans-serif;
+  font-size: 14px;
+  text-align: left;
+  width: 100%;
+  background-color: #2563eb;
+  color: #fff;
+  font-weight: 500;
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  p {
+    background-color: #dbe7ff;
+    font-size: 11px;
+    font-weight: 400;
+    text-align: center;
+    vertical-align: middle;
+    display: flex;
+    color: #2563eb;
+    padding: 0px 6px;
+    border-radius: 2px;
+  }
+}
+
+.BSCategory2New {
+  width: 425px;
+}
+
+.BSBilling3-tablediv {
+  height: 60vh !important;
+  overflow: auto;
+  scrollbar-width: none;
+  @media (max-width: 768px) {
+    padding-bottom: 10rem;
+  }
+  @media (max-width: 500px) {
+    padding-bottom: 15rem;
+  }
+}
+
+.TableStandardPay {
+  padding: 4px;
+  @media (max-width: 768px) {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ffffff;
+    position: fixed;
+    width: 100%;
+    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
+  }
+}
+
+.BillTable-carticon {
+  display: none;
+  svg {
+    font-size: 25px;
+    cursor: pointer;
+  }
+  @media (max-width: 768px) {
+    display: flex;
+    align-items: center;
+    padding: 4px;
+    font-family: "Popins";
+    font-weight: 500;
+    font-size: 14px;
+    width: 100%;
+    justify-content: center;
+  }
+}
+@keyframes cartFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes cartFadeOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+}
+
+.BSTaleforSales-common {
+  overflow-y: auto;
+  scrollbar-width: none;
+  background-color: #ffffff;
+  animation: cartFadeIn 0.3s ease forwards;
+  @media (max-width: 768px) {
+    position: fixed;
+    left: 0;
+    width: 100%;
+    padding: 4px;
+    right: 0;
+    bottom: 0;
+  }
+}
+/* Default Table Alignment for Bill Table Dont Change this */
+
+.headBilltable-sino,
+.headBilltable-MRP,
+.headBilltable-Discount,
+.headBilltable-Qty,
+.BodyBillTable-SINO,
+.BodyBillTable-MRP,
+.BodyBillTable-Dis,
+.BodyBillTable-Qty,
+.BodyBillTable-Action {
+  text-align: center;
+}
+.headBilltable-Item,
+.BodyBillTable-Item {
+  text-align: left;
+}
+.headBilltable-Rate,
+.headBilltable-Amt,
+.BodyBillTable-Rate,
+.BodyBillTable-Amt {
+  text-align: right;
+}
+.del-all-btn {
+  svg {
+    display: flex;
+  }
+}
+
+.table5-QtyAddMin {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+  .BodyBillTable-Qty {
+    padding: 2px !important;
+    width: 20px !important;
+  }
+}
+
+/* Standard BillTable Style Start Here */
+
+.SalesBillTable-Standard {
+  width: 100%;
+  border-collapse: collapse;
+  tr,
+  thead {
+    width: 100%;
+  }
+  th,
+  td {
+    font-family: "Inter", sans-serif !important;
+  }
+  .BSBill-Table3-throw {
+    height: 2.3rem !important;
+    background-color: rgb(255, 255, 255) !important;
+    border-bottom: 1px solid #e5e7e7;
+    th {
+      padding: 4px 6px !important;
+      font-size: 11px !important;
+      font-weight: 500;
+      color: #555 !important;
+      text-transform: uppercase;
+      background-color: #eef3ff;
+    }
+  }
+  .del-all-btn {
+    padding: 0;
+  }
+  tbody td {
+    padding: 4px 6px !important;
+    font-size: 12px !important;
+    font-weight: 500;
+    color: #000 !important;
+  }
+  tbody tr {
+    &:nth-child(even) {
+      background-color: #d6d6d6 !important;
+    }
+  }
+
+  // For Header Text Align
+  .headBilltable-Item {
+    text-align: left;
+  }
+  .headBilltable-Rate,
+  .headBilltable-Amt {
+    text-align: right;
+  }
+  .headBilltable-Action,
+  .headBilltable-sino,
+  .headBilltable-Discount {
+    text-align: center;
+  }
+  // For Body Text align
+  .BodyBillTable-SINO,
+  .BodyBillTable-Dis,
+  .BodyBillTable-Qty {
+    text-align: center;
+  }
+  .BodyBillTable-Item {
+    text-align: left;
+  }
+  .BodyBillTable-Rate,
+  .BodyBillTable-Amt {
+    text-align: right;
+  }
+}
+
+/*  BillTable - 1 Style Start Here */
+
+.Billingtable1-Main {
+  border: none;
+  border-collapse: collapse;
+  width: 100%;
+
+  .BSBill-Table3-throw {
+    height: 2.7rem;
+    width: 100%;
+  }
+  thead th {
+    padding: 4px 5px;
+    font-size: 15px !important;
+    font-weight: 600 !important;
+    font-family: "Gilroy" !important;
+    @media (max-width: 500px) {
+      font-size: 13px !important;
+    }
+  }
+  .table3body {
+    position: relative;
+    td {
+      padding: 4px 5px;
+      font-size: 13px !important;
+      font-weight: 500 !important;
+      font-family: "Poppins" !important;
+      @media (max-width: 500px) {
+        font-size: 12px !important;
+      }
+    }
+  }
+  .BSBill-Table3-content {
+    border-bottom: 1px dashed #000;
+  }
+}
+
+/*  BillTable - 3 Style Start Here */
+
+.BSBill-Table3 {
+  .BSBill-Table3-throw {
+    width: 100%;
+  }
+  thead th {
+    padding: 4px 5px;
+    font-size: 15px !important;
+    font-weight: 600 !important;
+    font-family: "Gilroy" !important;
+    @media (max-width: 500px) {
+      font-size: 13px !important;
+    }
+  }
+
+  .table3body {
+    position: relative;
+    td {
+      padding: 4px 5px;
+      font-size: 13px !important;
+      font-weight: 500 !important;
+      font-family: "Poppins" !important;
+      @media (max-width: 500px) {
+        font-size: 12px !important;
+      }
+    }
+  }
+}
+
+/*  BillTable - 6 Style Start Here */
+.BillingLayout-table6 {
+  .BSBill-Table3 thead th,
+  .BSBill-Table3 .table3body td {
+    border: 1px solid #eeeeee;
+  }
+}
+
+.BSBill-Table6 {
+  width: 100%;
+  text-align: center;
+  border-collapse: collapse;
+  th {
+    border: 1px solid #b8b8b8 !important;
+  }
+  td {
+    border: 1px solid #b8b8b8 !important;
+  }
+
+  thead th {
+    padding: 4px 5px;
+    font-size: 15px !important;
+    font-weight: 600 !important;
+    font-family: "Gilroy" !important;
+    @media (max-width: 500px) {
+      font-size: 13px !important;
+    }
+  }
+  td {
+    padding: 4px 5px;
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    font-family: "Poppins" !important;
+  }
+}

src/Styles/BookingScreen/Components/BSItemCards/BSItemCard.scss

@@ -9,7 +9,7 @@
   }
 
   .voiceToTextIcon {
-    top: 13px;
+    top: 5px;
   }
 }
 
@@ -174,6 +174,7 @@
   row-gap: 0.5rem;
   cursor: pointer;
   justify-content: space-around;
+ 
 }
 
 .BSItemCard-containers-smallimage-mobile {

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

@@ -3,8 +3,8 @@
   display: flex;
   align-items: center;
   width: 100vw;
-  height: 42px;
+  height: 45px !important;
-  box-shadow: var(--BOX_SHADOW_LEVEL2);
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
   padding: 1px 6px;
   gap: 12px;
   background-color: #fff;
@@ -39,7 +39,7 @@
   display: flex;
   align-items: center;
   width: 100vw;
-  height: 45px;
+  height: 7vh !important;
   box-shadow: var(--BOX_SHADOW_LEVEL2);
   padding: 1px 6px;
   gap: 12px;
@@ -59,6 +59,9 @@
   align-items: center;
   width: 100vw;
   color: var(--DEFAULT_SELECTED_COLOR);
+  .RiVerifiedBadgeFill {
+    color: #fff !important;
+  }
 
   .BSBillingNavBar1-SearchBar {
     font-size: 12px !important;
@@ -79,6 +82,7 @@
     background-color: #1292ee;
     padding: 4px;
     cursor: pointer;
+    color: #fff !important;
   }
 }
 

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

@@ -2,9 +2,9 @@
   display: flex;
   align-items: center;
   width: 100%;
-  height: 40px;
+  height: 45px;
   padding: 0rem 1rem;
-  box-shadow: var(--BOX_SHADOW_LEVEL2);
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
   background-color: #ffffff;
   .RiVerifiedBadgeFill {
     color: #1292ee !important;

src/Styles/BookingScreen/Template/BSLayout1/BSLayout1.scss

@@ -5,14 +5,13 @@
 .BSLayout1-Master {
   display: flex;
   flex-direction: column;
-  row-gap: 3rem;
+  row-gap: 0;
   background-color: #fff;
 }
 
 .BSLayout1Standard {
   overflow: hidden;
   position: relative;
-  top: 2.01rem;
    height: 100%;
 
   @media (max-width: 768px) {
@@ -30,8 +29,9 @@
 
 .BSLayout1-NavBar {
   width: 100%;
-  position: fixed;
+  position: sticky;
   z-index: 3;
+  top: 0;
 }
 
 body {
@@ -41,8 +41,8 @@ body {
 .BSLayout1Main {
   overflow: hidden;
   position: relative;
-  top: 34px;
+  height: 91.5vh;
-  height: 98vh;
+  background-color: #fff;
 }
 
 .BSBillingTable-oCbtn {
@@ -59,7 +59,7 @@ body {
   flex-direction: column;
   padding: 0rem 0rem;
   width: 100%;
-  height: 98%;
+  height: 100%;
 }
 
 .BSLayout1-Card-Cat-Sub {
@@ -70,12 +70,15 @@ body {
 
 .BSLayout1Master {
   display: flex;
-  height: 98vh;
+  height: 85.5vh;
   width: 100%;
   justify-content: space-between;
   overflow: hidden;
   gap: 6px;
-  padding: 3px 5px;
+  @media (max-width: 768px) {
+    height: 90vh;
+    position: relative;
+  }
 
   .CategoryHorizontalNew {
     background-color: #f4f4f4;
@@ -83,20 +86,51 @@ body {
     border-radius: 4px;
   }
 
-  .BsTable2-Master {
-    height: 84vh !important;
-  }
-
   .BSTable3_overall {
-    height: 84vh !important;
+    height: 85vh !important;
   }
 }
 
 .BSCategory1-tablecont {
   width: 430px;
-  height: clamp(100vh, 51rem, 45vh);
+  height: 85vh;
+  margin: 0.1rem 0.1rem;
+  @media (max-width: 768px) {
+    position: relative;
+    width: 0%;
+  }
+}
+
+.BSlayout1-Table5 {
+  width: 460px;
+  height: clamp(95vh, 51rem, 45vh);
   margin: 0.1rem 0.1rem;
   background-color: #fff;
+
+  .BSBilling3PayMaster {
+    height: 150px;
+  }
+  .BSBill-Table3-content {
+    border-bottom: 1px dashed #000 !important;
+  }
+  @media (max-width: 768px) {
+    .TableStandardPay {
+      bottom: 40px;
+    }
+  }
+}
+.BillingLayout-table6 {
+  width: 460px;
+  height: clamp(95vh, 51rem, 45vh);
+  margin: 0.1rem 0.1rem;
+  background-color: #fff;
+
+  .BSBilling3PayMaster {
+    height: 150px;
+  }
+  .BSBill-Table3-content {
+    border-bottom: 1px dashed #000 !important;
+  }
 }
 
 .Layout-bill-container {
@@ -104,6 +138,22 @@ body {
   height: 30px;
   align-items: center;
   display: flex;
+  background-color: rgb(255, 255, 255);
+
+  @media (max-width: 768px) {
+    .pricing-name-details {
+      display: none;
+    }
+    .SalesCountComponent-Master {
+      justify-content: flex-end;
+      gap: 1rem;
+    }
+  }
+  @media (max-width: 500px) {
+    .SalesCountComponent-Master {
+      display: none;
+    }
+  }
 }
 
 @media (min-width: 280px) and (max-width: 499px) {
@@ -131,7 +181,15 @@ body {
     height: 100% !important;
   }
 
-  .BSCategory1-tablecont {
+ 
+  .BSlayout1-Table5 {
+    width: 0px;
+    justify-content: flex-end !important;
+    margin: 0rem 0rem !important;
+    display: flex !important;
+    align-items: center !important;
+  }
+  .BillingLayout-table6 {
     width: 0px;
     justify-content: flex-end !important;
     margin: 0rem 0rem !important;
@@ -162,7 +220,16 @@ body {
     height: 100% !important;
   }
 
-  .BSCategory1-tablecont {
+ 
+  .BSlayout1-Table5 {
+    width: 0px;
+    margin: 0rem 0rem !important;
+    display: flex !important;
+    justify-content: space-between !important;
+    position: fixed !important;
+    align-items: center !important;
+  }
+  .BillingLayout-table6 {
     width: 0px;
     margin: 0rem 0rem !important;
     display: flex !important;
@@ -173,7 +240,11 @@ body {
 }
 
 @media (width: 1280px) and (max-height: 1024px) {
-  .BSCategory1-tablecont {
+ 
+  .BSlayout1-Table5 {
+    height: clamp(79.5vh, 80rem, 76vh) !important;
+  }
+  .BillingLayout-table6 {
     height: clamp(79.5vh, 80rem, 76vh) !important;
   }
 }
@@ -184,7 +255,7 @@ body {
 
 .Layout-bill-container {
   width: 100vw;
-  height: 30px;
+  height: 36px;
   align-items: center;
   display: flex;
 }
@@ -200,7 +271,8 @@ body {
 
   @media (max-width: 500px) {
     font-size: 10px;
-    flex-wrap: wrap;
+    gap: 10px !important;
+    justify-content: flex-end !important;
   }
 }
 .Layout-IfNavbar3 {

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

@@ -1,12 +1,11 @@
 .BSLayout2-Master {
   display: flex;
   flex-direction: column;
-  row-gap: 3rem;
+  row-gap: 0;
 }
 
 .BSLayout2-NavBar {
   width: 100%;
-  position: fixed;
   z-index: 3;
   display: flex;
   align-items: center;
@@ -40,7 +39,6 @@ body {
 .BSLayout2Standard {
   overflow: hidden;
   position: relative;
-  top: 2.1rem;
    height: 100%;
 
   @media (max-width: 768px) {
@@ -86,11 +84,13 @@ body {
 
 .BsLayout2-ContentDiv {
   display: flex;
-  height: 89vh;
+  height: 86vh;
   overflow: hidden;
   justify-content: space-between;
-  background-color: #f1f5f9;
+  background-color: #ffffff;
   width: 100%;
+  gap: 10px;
+  padding: 0 2px;
 
   @media (max-width: 768px) {
     height: 85vh;
@@ -100,6 +100,11 @@ body {
   @media (max-width: 500px) {
     height: 80vh;
   }
+  .TableStandardPay {
+    .BSBillingTable1-summeryTable {
+      display: none;
+    }
+  }
 }
 
 .BsLayout2-ContentDivNew {
@@ -108,9 +113,10 @@ body {
 
 .BSCategory2-tablecont {
   width: 425px;
-  margin: 0.2rem 0.5rem;
+  margin: 0.2rem 0rem;
   background-color: #fff;
   border-radius: 12px;
+  height: 85vh;
 
   @media (max-width: 768px) {
     width: 100%;
@@ -206,7 +212,7 @@ body {
 }
 
 .BSLayout2-Master .BSTable3_overall {
-  height: 81vh;
+  height: 85vh;
 }
 
 .BSLayout2-Master .BSBilling4TableCont-default {
@@ -444,7 +450,6 @@ body {
 
   @media (max-width: 500px) {
     font-size: 10px;
-    flex-wrap: wrap;
   }
 }
 
@@ -499,6 +504,9 @@ body {
   @media (max-width: 500px) {
     font-size: 10px !important;
   }
+  @media (max-width: 768px) {
+    display: none;
+  }
 }
 
 .KeyshortCutNav3 {
@@ -529,3 +537,6 @@ body {
   align-items: center;
   gap: 8px;
 }
+.Layout-bill-container {
+  height: 36px;
+}

src/Styles/BookingScreen/Template/BSLayout3/BSLayout3.scss

@@ -1,21 +1,18 @@
 .BSLayout3-Master {
   display: flex;
   flex-direction: column;
-  row-gap: 3rem;
+  row-gap: 0;
 }
 
 .BSLayout3-NavBar {
   width: 100%;
-  position: fixed;
   z-index: 3;
   background-color: #000;
-  height: 40px;
 }
 
 .BSLayout3 {
   overflow: hidden;
   position: relative;
-  top: 2rem;
 }
 
 .BSLayout3Standard {
@@ -58,14 +55,15 @@
 .BsLayout3-ContentDiv {
   display: flex;
   overflow: hidden;
-  height: 89vh;
+  height: 86vh;
   justify-content: space-between;
+  gap: 6px;
+  padding: 0 4px;
 }
 
 .BSCategory3-tablecont {
   width: 430px !important;
-  margin: 1rem 0.5rem;
+  height: 86vh;
-  height: clamp(68vh, 50rem, 50vh);
   background-color: #fff;
   @media (max-width: 768px) {
     width: 100% !important;
@@ -420,7 +418,6 @@
   padding: 0rem 0.4rem;
   background-color: #fff;
   font-size: 12px;
-  // font-weight: 700;
    border-radius: 3px;
   color: #000;
 }
@@ -459,7 +456,6 @@
 
   @media (max-width: 500px) {
     font-size: 10px;
-    flex-wrap: wrap;
   }
 }
 
@@ -514,6 +510,9 @@
   @media (max-width: 500px) {
     font-size: 10px !important;
   }
+  @media (max-width: 768px) {
+    display: none;
+  }
 }
 
 .RenewalExpired {

src/Styles/BookingScreen/Template/BSLayout4/BSLayout4.scss

@@ -16,7 +16,8 @@
 .Bslayout4_overall {
   display: flex;
   overflow: hidden;
-  height: 100vh;
+  height: 86vh;
+  gap: 6px;
   width: 100%;
   justify-content: space-between;
 }
@@ -46,8 +47,9 @@
 
 .Bslayout4_table {
   width: 425px !important;
-  height: clamp(68vh, 71rem, 50vh);
+   height: 86vh;
   background-color: #fff;
+  border-radius: 8px;
 }
 
 .BSTable-3-Mobilescreen {
@@ -249,7 +251,6 @@
 
   @media (max-width: 500px) {
     font-size: 10px;
-    flex-wrap: wrap;
   }
 }
 .Layout-IfNavbar3 {
@@ -303,6 +304,9 @@
   @media (max-width: 500px) {
     font-size: 10px !important;
   }
+  @media (max-width: 768px) {
+    display: none;
+  }
 }
 
 .bslayout4Cat5Flex {

src/Styles/BookingScreen/Template/BSLayout5/BSLayout5.scss

@@ -9,6 +9,8 @@
 }
 .BsLayout5-ContentDiv {
   display: flex;
+  gap: 6px;
+  height: 86vh;
 }
 
 .BSCategory5-Cardcont {
@@ -38,8 +40,9 @@
 
 .BSCategory5-tablecont {
   width: 430px;
-  height: clamp(85vh, 71rem, 50vh);
+  height: clamp(86vh, 71rem, 50vh);
   background-color: #fff;
+  border-radius: 8px;
 }
 @media (min-width: 500px) and (max-width: 768px) {
   .BSCategory5-Cardcont {
@@ -133,7 +136,6 @@
 
   @media (max-width: 500px) {
     font-size: 10px;
-    flex-wrap: wrap;
   }
 }
 
@@ -189,4 +191,7 @@
   @media (max-width: 500px) {
     font-size: 10px !important;
   }
+  @media (max-width: 768px) {
+    display: none;
+  }
 }

src/Styles/BookingScreen/Template/BSLayout6/BSLayout6.scss

@@ -21,6 +21,9 @@
   width: 430px;
   flex-direction: column;
   height: inherit;
+  .BSTable3_overall {
+    height: 72vh !important;
+  }
 }
 
 .BSLayout6-category {
@@ -33,6 +36,7 @@
   padding: 0rem 0.5rem;
   width: 100%;
   justify-content: space-between;
+  gap: 6px;
 }
 
 .BSLayout6-cards {
@@ -236,7 +240,6 @@
   padding: 0 6px;
   @media (max-width: 500px) {
     font-size: 10px;
-    flex-wrap: wrap;
   }
 }
 
@@ -291,4 +294,7 @@
   @media (max-width: 500px) {
     font-size: 10px !important;
   }
+  @media (max-width: 768px) {
+    display: none;
+  }
 }