SalesScreen Table payment Design Optimization

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,9 +139,10 @@ const PozoMenu = ({ items = [], mode = "vertical", style = {}, onClick, collapse
     } else {
       // Nested menu positioning
       const parentKeys = Object.keys(dropdownPositions);
-      const parentDirection = parentKeys.length > 0
-        ? dropdownPositions[parentKeys[level - 1]]?.direction || 'right'
-        : 'right';
+      const parentDirection =
+        parentKeys.length > 0
+          ? dropdownPositions[parentKeys[level - 1]]?.direction || 'right'
+          : 'right';
 
       if (parentDirection.includes('right')) {
         if (spaceRight >= spaceNeeded) {
@@ -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 },
-      spaces: { right: spaceRight, left: spaceLeft, above: spaceAbove, below: spaceBelow },
+      clicked: {
+        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 => {
-          // Keep only keys that are not this item or its descendants
-          return !key.startsWith(itemKey) && key !== itemKey;
-        }));
-        setDropdownPositions(prev => {
+        setOpenKeys((prev) =>
+          prev.filter((key) => {
+            // Keep only keys that are not this item or its descendants
+            return !key.startsWith(itemKey) && key !== itemKey;
+          })
+        );
+        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
-      className={`pozo-menu pozo-menu-${mode}`}
-      style={style}
-    >
+    <div 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,39 +653,42 @@ export default function BST1Payment() {
     Discount,
   ]);
   useEffect(() => {
- 
-   const fetchPrinterMapping = async () => {
-     try {
-       if (UserType !== 'Super Admin'  && isMobile && MobileA4Print) {
-         const data = {
-           CompId: CompId,
-           BranchId: BranchId,
-           AppId: AppId,
-           UserId: UserId,
-         };
- // && isMobile && MobileA4Print
-         const response = await dispatch(getPrinterMappingDetails(data)).unwrap();
-         if (response?.data?.statusCode === 0) {
-               handlePrintMappingClick()  
-           }
-         console.log(response, "printer mapping response");
-       }
-     } catch (error) {
-       console.error("Error fetching printer mapping:", error);
-     }
-   };
- 
-   fetchPrinterMapping();
- 
- }, []);
+    const fetchPrinterMapping = async () => {
+      try {
+        if (UserType !== 'Super Admin' && isMobile && MobileA4Print) {
+          const data = {
+            CompId: CompId,
+            BranchId: BranchId,
+            AppId: AppId,
+            UserId: UserId,
+          };
+          // && isMobile && MobileA4Print
+          const response = await dispatch(
+            getPrinterMappingDetails(data)
+          ).unwrap();
+          if (response?.data?.statusCode === 0) {
+            handlePrintMappingClick();
+          }
+          console.log(response, 'printer mapping response');
+        }
+      } catch (error) {
+        console.error('Error fetching printer mapping:', error);
+      }
+    };
+
+    fetchPrinterMapping();
+  }, []);
   const handlePrintMappingClick = () => {
-     // setReprint1(true)
-     window.dispatchEvent(new Event('CLICK PRINTER MAPPING'));
-   };
+    // setReprint1(true)
+    window.dispatchEvent(new Event('CLICK PRINTER MAPPING'));
+  };
   //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();
@@ -924,7 +943,7 @@ export default function BST1Payment() {
 
     const selectedStyle =
       stylesMap[
-      printerTemplateStyle == undefined ? 'Style 13' : printerTemplateStyle
+        printerTemplateStyle == undefined ? 'Style 13' : printerTemplateStyle
       ];
 
     if (selectedStyle) {
@@ -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') {
@@ -2046,15 +2068,15 @@ export default function BST1Payment() {
       OrderStatus: 'O',
       OrderType:
         BookingType === 'Dine In' ||
-          BookingTypeBoth ||
-          Estimation?.SettingValue == 'N'
+        BookingTypeBoth ||
+        Estimation?.SettingValue == 'N'
           ? 'S'
           : GlobEstBooking === 'OvrAllEst'
             ? 'E'
             : GlobEstBooking === 'ParEst'
               ? GlobProdwisedata?.includes(
-                a.InwardDtlId + ' ' + a?.BookingTypeName
-              )
+                  a.InwardDtlId + ' ' + a?.BookingTypeName
+                )
                 ? 'E'
                 : 'S'
               : 'S',
@@ -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
@@ -2147,7 +2169,7 @@ export default function BST1Payment() {
           : Paybtnnameselected?.toLowerCase() === 'credit'
             ? 'S'
             : Paybtnnameselected?.toLowerCase() === 'upi' &&
-              SelectedUPIPayOption?.toLowerCase() === 'default'
+                SelectedUPIPayOption?.toLowerCase() === 'default'
               ? 'S'
               : 'P',
       OrderDtlDetails:
@@ -2164,9 +2186,9 @@ export default function BST1Payment() {
           ? globalTipAmount === 0
             ? SelectedTableDetails
             : SelectedTableDetails?.map((item) => ({
-              ...item,
-              TipsAmount: globalTipAmount,
-            }))
+                ...item,
+                TipsAmount: globalTipAmount,
+              }))
           : null,
 
       SalesPaymentType: 'normal',
@@ -2182,8 +2204,8 @@ export default function BST1Payment() {
                     ? PaymentgatewayUPI?.[0]?.ModeId
                     : SelectedUPIPayOption?.toLowerCase() === 'business'
                       ? BusinessPayOption?.find(
-                        (busupi) => busupi?.ModeId === UpiId
-                      )?.ModeId
+                          (busupi) => busupi?.ModeId === UpiId
+                        )?.ModeId
                       : paybtnselected
                 : paybtnselected
                   ? paybtnselected
@@ -2196,15 +2218,15 @@ export default function BST1Payment() {
             salesBillEdit && currentOrderNetAmount < previousNetAmount
               ? null
               : Paybtnnameselected?.toLowerCase() === 'upi' &&
-                SelectedUPIPayOption?.toLowerCase() === 'business'
+                  SelectedUPIPayOption?.toLowerCase() === 'business'
                 ? BusinessPayOption?.find((busupi) => busupi?.ModeId === UpiId)
-                  ?.MerchantId
+                    ?.MerchantId
                 : null,
           PaymentOptionType:
             salesBillEdit &&
-              currentOrderNetAmount < previousNetAmount &&
-              (refundPaySelectedName?.toLowerCase() === 'cash' ||
-                refundPaySelectedName?.toLowerCase() === 'credit')
+            currentOrderNetAmount < previousNetAmount &&
+            (refundPaySelectedName?.toLowerCase() === 'cash' ||
+              refundPaySelectedName?.toLowerCase() === 'credit')
               ? 'PC'
               : Paybtnnameselected?.toLowerCase() === 'cash'
                 ? 'PC'
@@ -2224,29 +2246,29 @@ export default function BST1Payment() {
               ? null
               : SelectedUPIPayOption?.toLowerCase() === 'default'
                 ? PaymentUpiOptions?.find((upipay) => upipay?.UPIId === UpiId)
-                  ?.UPIDetailId
+                    ?.UPIDetailId
                 : SelectedUPIPayOption?.toLowerCase() === 'business'
                   ? BusinessPayOption?.find(
-                    (busupi) => busupi?.ModeId === UpiId
-                  )?.MerchantUPIId
+                      (busupi) => busupi?.ModeId === UpiId
+                    )?.MerchantUPIId
                   : null,
           AccountDtl:
             salesBillEdit && currentOrderNetAmount < previousNetAmount
               ? []
               : Paybtnnameselected?.toLowerCase() === 'upi' &&
-                SelectedUPIPayOption?.toLowerCase() === 'default'
+                  SelectedUPIPayOption?.toLowerCase() === 'default'
                 ? useOptions?.[0]?.PaymentDetails?.Payatthecounter?.find(
-                  (upipay) => upipay?.UPIId === UpiId
-                )
+                    (upipay) => upipay?.UPIId === UpiId
+                  )
                 : (Paybtnnameselected?.toLowerCase() === 'upi' &&
-                  SelectedUPIPayOption?.toLowerCase() === 'pd') ||
-                  (Paybtnnameselected?.toLowerCase() === 'card' &&
-                    SelectedCardOption?.toLowerCase() === 'pd')
+                      SelectedUPIPayOption?.toLowerCase() === 'pd') ||
+                    (Paybtnnameselected?.toLowerCase() === 'card' &&
+                      SelectedCardOption?.toLowerCase() === 'pd')
                   ? useOptions?.[0]?.PaymentDetails?.PaymentDevice
                   : (Paybtnnameselected?.toLowerCase() === 'upi' &&
-                    SelectedUPIPayOption?.toLowerCase() === 'pg') ||
-                    (Paybtnnameselected?.toLowerCase() === 'card' &&
-                      SelectedCardOption?.toLowerCase() === 'pg')
+                        SelectedUPIPayOption?.toLowerCase() === 'pg') ||
+                      (Paybtnnameselected?.toLowerCase() === 'card' &&
+                        SelectedCardOption?.toLowerCase() === 'pg')
                     ? useOptions?.[0]?.PaymentDetails?.PaymentGateway
                     : [],
           PaymentStatus:
@@ -2257,13 +2279,13 @@ export default function BST1Payment() {
                 : Paybtnnameselected?.toLowerCase() === 'credit'
                   ? 'S'
                   : Paybtnnameselected?.toLowerCase() === 'upi' &&
-                    SelectedUPIPayOption?.toLowerCase() === 'default'
+                      SelectedUPIPayOption?.toLowerCase() === 'default'
                     ? 'S'
                     : 'P',
           Debit:
             salesBillEdit &&
-              currentOrderNetAmount < previousNetAmount &&
-              refundPaySelectedName?.toLowerCase() === 'credit'
+            currentOrderNetAmount < previousNetAmount &&
+            refundPaySelectedName?.toLowerCase() === 'credit'
               ? Math.round(previousNetAmount - currentOrderNetAmount)
               : 0,
           Credit: salesBillEdit
@@ -2339,14 +2361,14 @@ export default function BST1Payment() {
         setMessageType('success');
         setMessageData(
           response?.data?.response +
-          ' ' +
-          (response?.data?.OrderDetails?.length > 0
-            ? response?.data?.OrderId &&
-            extractLastNumberOrderId(
-              response?.data?.OrderId,
-              response?.data?.OrderDetails?.[0]?.FYStatus
-            )
-            : '')
+            ' ' +
+            (response?.data?.OrderDetails?.length > 0
+              ? response?.data?.OrderId &&
+                extractLastNumberOrderId(
+                  response?.data?.OrderId,
+                  response?.data?.OrderDetails?.[0]?.FYStatus
+                )
+              : '')
         );
         response?.data?.OrderDetails?.length > 0 &&
           setPrintOrderDetails([response?.data]);
@@ -2503,14 +2525,14 @@ export default function BST1Payment() {
           setMessageType('success');
           setMessageData(
             response?.data?.response +
-            ' ' +
-            (response?.data?.OrderDetails?.length > 0
-              ? response?.data?.OrderId &&
-              extractLastNumberOrderId(
-                response?.data?.OrderId,
-                response?.data?.OrderDetails?.[0]?.FYStatus
-              )
-              : '')
+              ' ' +
+              (response?.data?.OrderDetails?.length > 0
+                ? response?.data?.OrderId &&
+                  extractLastNumberOrderId(
+                    response?.data?.OrderId,
+                    response?.data?.OrderDetails?.[0]?.FYStatus
+                  )
+                : '')
           );
           response?.data?.OrderDetails?.length > 0 &&
             setPrintOrderDetails([response?.data]);
@@ -2611,14 +2633,14 @@ export default function BST1Payment() {
         }
         setMessageData(
           response?.data?.response +
-          ' ' +
-          (response?.data?.OrderDetails?.length > 0
-            ? response?.data?.OrderId &&
-            extractLastNumberOrderId(
-              response?.data?.OrderId,
-              response?.data?.OrderDetails?.[0]?.FYStatus
-            )
-            : '')
+            ' ' +
+            (response?.data?.OrderDetails?.length > 0
+              ? response?.data?.OrderId &&
+                extractLastNumberOrderId(
+                  response?.data?.OrderId,
+                  response?.data?.OrderDetails?.[0]?.FYStatus
+                )
+              : '')
         );
         if (response?.data?.OrderDetails?.length > 0) {
           setPrintOrderDetails([response?.data]);
@@ -2793,14 +2815,14 @@ export default function BST1Payment() {
             setMessageType('success');
             setMessageData(
               bookingpaymentupdate?.data?.response +
-              ' ' +
-              (bookingpaymentupdate?.data?.OrderDetails?.length > 0
-                ? bookingpaymentupdate?.data?.OrderId &&
-                extractLastNumberOrderId(
-                  bookingpaymentupdate?.data?.OrderId,
-                  bookingpaymentupdate?.data?.OrderDetail?.[0]?.FYStatus
-                )
-                : '')
+                ' ' +
+                (bookingpaymentupdate?.data?.OrderDetails?.length > 0
+                  ? bookingpaymentupdate?.data?.OrderId &&
+                    extractLastNumberOrderId(
+                      bookingpaymentupdate?.data?.OrderId,
+                      bookingpaymentupdate?.data?.OrderDetail?.[0]?.FYStatus
+                    )
+                  : '')
             );
             bookingpaymentupdate?.data?.OrderDetails?.length > 0 &&
               setPrintOrderDetails([bookingpaymentupdate?.data]);
@@ -2818,7 +2840,7 @@ export default function BST1Payment() {
         if (
           Date.now() - startTime >
           useOptions?.[0]?.PDConfigDetails?.[0]?.AutoCancelDurationInMinutes *
-          60000
+            60000
         ) {
           // 60,000 ms = 1 minute
 
@@ -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">
@@ -3598,31 +3723,31 @@ export default function BST1Payment() {
                       (BookingType === 'Dine In' ||
                         BookingTypeBoth ||
                         CheckOrderType?.length > 0) &&
-                        !unpaidFlow &&
-                        OrderStatus
+                      !unpaidFlow &&
+                      OrderStatus
                         ? 'none'
                         : 'auto',
                     opacity:
                       (BookingType === 'Dine In' ||
                         BookingTypeBoth ||
                         CheckOrderType?.length > 0) &&
-                        !unpaidFlow &&
-                        OrderStatus
+                      !unpaidFlow &&
+                      OrderStatus
                         ? 0.5
                         : 1,
                   }}
                 >
                   {paybtns?.length > 0 &&
-                    currentOrderNetAmount >= previousNetAmount ? (
+                  currentOrderNetAmount >= previousNetAmount ? (
                     paybtns?.map((payment) => (
                       <div className="Table3-cash">
                         <button
                           className={
                             paybtnselected === payment.ModeId &&
-                              (UpinotSelected || CardoptionnotSelected)
+                            (UpinotSelected || CardoptionnotSelected)
                               ? 'Btn-payment-mode-notupisel'
                               : paybtnselected === payment.ModeId &&
-                                (!UpinotSelected || !CardoptionnotSelected)
+                                  (!UpinotSelected || !CardoptionnotSelected)
                                 ? 'Btn-payment-mode'
                                 : 'Btn-payment-mode-sel'
                           }
@@ -3636,13 +3761,13 @@ export default function BST1Payment() {
                           onClick={() =>
                             payment?.ModeName?.toLowerCase() === 'upi' // Change the condition to payment.Id
                               ? handleUPIButtonClick(
-                                payment.ModeId,
-                                payment.ModeName
-                              )
+                                  payment.ModeId,
+                                  payment.ModeName
+                                )
                               : handlePaymentMode(
-                                payment.ModeId,
-                                payment.ModeName
-                              )
+                                  payment.ModeId,
+                                  payment.ModeName
+                                )
                           }
                         >
                           {/* {UpiOption === "" && payment?.ModeName?.toLowerCase() === "upi" && <p> UPI</p>} */}
@@ -3701,10 +3826,10 @@ export default function BST1Payment() {
                         <button
                           className={
                             refundPaySelected === payment.ConfigId &&
-                              (UpinotSelected || CardoptionnotSelected)
+                            (UpinotSelected || CardoptionnotSelected)
                               ? 'Btn-payment-mode-notupisel'
                               : refundPaySelected === payment.ConfigId &&
-                                (!UpinotSelected || !CardoptionnotSelected)
+                                  (!UpinotSelected || !CardoptionnotSelected)
                                 ? 'Btn-payment-mode'
                                 : 'Btn-payment-mode-sel'
                           }
@@ -3779,9 +3904,9 @@ export default function BST1Payment() {
                                 OrderCardDetail?.length > 0 && 'not-allowed',
                               color:
                                 OrderCardDetail?.length > 0 ||
-                                  (selOption?.value === undefined &&
-                                    GlobalAddCustomerDetails1?.length === 0 &&
-                                    GetCustId?.CustMobile === undefined)
+                                (selOption?.value === undefined &&
+                                  GlobalAddCustomerDetails1?.length === 0 &&
+                                  GetCustId?.CustMobile === undefined)
                                   ? 'gray'
                                   : 'rgb(18, 146, 238)',
                               fontSize: '28px',
@@ -3831,16 +3956,16 @@ export default function BST1Payment() {
                     (BookingType === 'Dine In' ||
                       BookingTypeBoth ||
                       CheckOrderType?.length > 0) &&
-                      !unpaidFlow &&
-                      OrderStatus
+                    !unpaidFlow &&
+                    OrderStatus
                       ? 'none'
                       : 'auto',
                   opacity:
                     (BookingType === 'Dine In' ||
                       BookingTypeBoth ||
                       CheckOrderType?.length > 0) &&
-                      !unpaidFlow &&
-                      OrderStatus
+                    !unpaidFlow &&
+                    OrderStatus
                       ? 0.5
                       : 1,
                 }}
@@ -3859,14 +3984,14 @@ export default function BST1Payment() {
                         width: '1.5rem',
                         cursor:
                           OrderCardDetail?.length === 0 ||
-                            CheckBookingStatus == 'Close' ||
-                            addnewAccess
+                          CheckBookingStatus == 'Close' ||
+                          addnewAccess
                             ? 'not-allowed'
                             : 'pointer',
                         color:
                           OrderCardDetail?.length === 0 ||
-                            CheckBookingStatus == 'Close' ||
-                            addnewAccess
+                          CheckBookingStatus == 'Close' ||
+                          addnewAccess
                             ? 'gray'
                             : 'rgb(18, 146, 238)',
                         display: 'flex',
@@ -3882,8 +4007,10 @@ export default function BST1Payment() {
             )}
 
             {/* Customer Orders */}
-            {(SelCustId && tableOptions?.filter((item) => item.OptionName === 'PreviousBillFetch')
-              .length === 1) && (
+            {SelCustId &&
+              tableOptions?.filter(
+                (item) => item.OptionName === 'PreviousBillFetch'
+              ).length === 1 && (
                 <Tooltip title="Customer Orders" isMobile={isMobile}>
                   {' '}
                   <div
@@ -3901,8 +4028,8 @@ export default function BST1Payment() {
                       cursor: OrderCardDetail?.length > 0 && 'not-allowed',
                       color:
                         OrderCardDetail?.length > 0 ||
-                          (OrderCardDetail?.length > 0 &&
-                            GetCustId?.CustMobile === undefined)
+                        (OrderCardDetail?.length > 0 &&
+                          GetCustId?.CustMobile === undefined)
                           ? 'gray'
                           : 'rgb(18, 146, 238)',
                       fontSize: '25px',
@@ -3931,14 +4058,14 @@ export default function BST1Payment() {
                     width: '1.5rem',
                     cursor:
                       OrderCardDetail?.length === 0 ||
-                        CheckBookingStatus == 'Close' ||
-                        addnewAccess
+                      CheckBookingStatus == 'Close' ||
+                      addnewAccess
                         ? 'not-allowed'
                         : 'pointer',
                     color:
                       OrderCardDetail?.length === 0 ||
-                        CheckBookingStatus == 'Close' ||
-                        addnewAccess
+                      CheckBookingStatus == 'Close' ||
+                      addnewAccess
                         ? 'gray'
                         : 'rgb(18, 146, 238)',
                     display: 'flex',
@@ -4020,58 +4147,58 @@ export default function BST1Payment() {
               <div>
                 {unpaidFlow == false
                   ? holdCheckedSalesSetup &&
-                  BookingType !== 'Dine In' &&
-                  !BookingTypeBoth &&
-                  OrderCardDetail?.length != 0 &&
-                  CheckOrderType?.length === 0 &&
-                  OrderType != 'Failed' &&
-                  CheckBookingStatus != 'Close' &&
-                  paybtns?.length > 0 &&
-                  !addnewAccess && (
-                    <TooltipWrapper title={'Hold'} isMobile={isMobile}>
-                      {' '}
-                      <PozoHoldIcon
-                        className="BSBillingNav-icon-table-icon"
-                        onClick={() => AddBookingDetails('Hold')}
-                        style={{
-                          fontSize: '30px',
-                          cursor: 'pointer',
-                          color: '' ? '#52c41a' : '#1292EE',
-                        }}
-                      />
-                    </TooltipWrapper>
-                  )
+                    BookingType !== 'Dine In' &&
+                    !BookingTypeBoth &&
+                    OrderCardDetail?.length != 0 &&
+                    CheckOrderType?.length === 0 &&
+                    OrderType != 'Failed' &&
+                    CheckBookingStatus != 'Close' &&
+                    paybtns?.length > 0 &&
+                    !addnewAccess && (
+                      <TooltipWrapper title={'Hold'} isMobile={isMobile}>
+                        {' '}
+                        <PozoHoldIcon
+                          className="BSBillingNav-icon-table-icon"
+                          onClick={() => AddBookingDetails('Hold')}
+                          style={{
+                            fontSize: '30px',
+                            cursor: 'pointer',
+                            color: '' ? '#52c41a' : '#1292EE',
+                          }}
+                        />
+                      </TooltipWrapper>
+                    )
                   : ''}
                 {unpaidFlow == false
                   ? holdCheckedSalesSetup &&
-                  paybtns?.length > 0 &&
-                  BookingType !== 'Dine In' &&
-                  !BookingTypeBoth &&
-                  Holddata?.length > 0 &&
-                  OrderCardDetail?.length == 0 &&
-                  CheckBookingStatus != 'Close' &&
-                  !addnewAccess && (
-                    <TooltipWrapper title={'Recall'} isMobile={isMobile}>
-                      {' '}
-                      <Badge
-                        count={Holddata?.length}
-                        size={'small'}
-                        offset={[0, 7]}
-                      >
-                        <PozoHoldIcon
-                          className="BSBillingNav-icon-table-icon"
-                          onClick={() => HandleholdModelOpen()}
-                          style={{
-                            fontSize: '28px',
-                            cursor: 'pointer',
-                            color: Holddata ? '#52c41a' : 'default',
-                            pointerEvents:
-                              OrderType === 'Failed' ? 'none' : 'auto',
-                          }}
-                        />
-                      </Badge>
-                    </TooltipWrapper>
-                  )
+                    paybtns?.length > 0 &&
+                    BookingType !== 'Dine In' &&
+                    !BookingTypeBoth &&
+                    Holddata?.length > 0 &&
+                    OrderCardDetail?.length == 0 &&
+                    CheckBookingStatus != 'Close' &&
+                    !addnewAccess && (
+                      <TooltipWrapper title={'Recall'} isMobile={isMobile}>
+                        {' '}
+                        <Badge
+                          count={Holddata?.length}
+                          size={'small'}
+                          offset={[0, 7]}
+                        >
+                          <PozoHoldIcon
+                            className="BSBillingNav-icon-table-icon"
+                            onClick={() => HandleholdModelOpen()}
+                            style={{
+                              fontSize: '28px',
+                              cursor: 'pointer',
+                              color: Holddata ? '#52c41a' : 'default',
+                              pointerEvents:
+                                OrderType === 'Failed' ? 'none' : 'auto',
+                            }}
+                          />
+                        </Badge>
+                      </TooltipWrapper>
+                    )
                   : ''}
               </div>
             )}
@@ -4114,9 +4241,9 @@ export default function BST1Payment() {
                   addnewAccess
                     ? 'price-button-disabled'
                     : FirstPaymentclick === false &&
-                      OrderCardDetail?.length > 0 &&
-                      paybtnselected &&
-                      CheckBookingStatus != 'Close'
+                        OrderCardDetail?.length > 0 &&
+                        paybtnselected &&
+                        CheckBookingStatus != 'Close'
                       ? !OrderStatus
                         ? salesBillEdit &&
                           currentOrderNetAmount < previousNetAmount
@@ -4138,7 +4265,7 @@ export default function BST1Payment() {
                 {isMobile ? (
                   !OrderStatus ? (
                     salesBillEdit &&
-                      currentOrderNetAmount < previousNetAmount ? (
+                    currentOrderNetAmount < previousNetAmount ? (
                       <div>
                         Refund: ₹
                         {(previousNetAmount || 0) -
@@ -4364,14 +4491,14 @@ export default function BST1Payment() {
             OrderType === 'Failed'
               ? FailedTotalAmt
               : Math.round(
-                OrderCardDetail?.reduce(
-                  (acc, data) => data?.TotalAmt + acc,
-                  0
-                ) -
-                ((OverAllSales > 0 ? OverAllSales : 0) +
-                  (OverAllEstimate > 0 ? OverAllEstimate : 0) +
-                  (Discount > 0 ? Discount : 0))
-              )
+                  OrderCardDetail?.reduce(
+                    (acc, data) => data?.TotalAmt + acc,
+                    0
+                  ) -
+                    ((OverAllSales > 0 ? OverAllSales : 0) +
+                      (OverAllEstimate > 0 ? OverAllEstimate : 0) +
+                      (Discount > 0 ? Discount : 0))
+                )
           }
           failedOrderData={failedOrderData}
         />
@@ -4504,9 +4631,9 @@ export default function BST1Payment() {
 
               const qty = isGroup
                 ? OrderCardDetail.filter((o) => o.id === groupKey).reduce(
-                  (sum, o) => sum + (o.OrderQty || 1),
-                  0
-                )
+                    (sum, o) => sum + (o.OrderQty || 1),
+                    0
+                  )
                 : item.OrderQty || 1;
 
               return (

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 { useState } from 'react';
+import {
+  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'
-            ? 'BSTable3_overall BSTable3_overall-6'
-            : templateData?.BookingLayout?.[0] === 'Layout1' && isMobile
-              ? 'BSTable3_overallLayout1 BSTable3_overall-1'
-              : 'BSTable3_overall'
-        }
-        style={{ height: containerHeight }}
-      >
-        <div className="BSTable3">
+    <div
+      className={
+        layout === 'Layout6'
+          ? 'BSTable3_overall BSTable3_overall-6'
+          : layout === 'Layout1' && isMobile
+            ? 'BSTable3_overallLayout1 BSTable3_overall-1'
+            : 'BSTable3_overall'
+      }
+      style={{ height: containerHeight }}
+    >
+      {/* ✅ 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>
-    </>
+    </div>
   );
 };
+
 export default BSBillingTable3overall;

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/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,14 +3108,7 @@ 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);
+       setUnpaidConfirmation(true);
       setunpaidselectedindex(event);
     } else {
       const UpdatedData = tabledata?.[event]?.productDetails;
@@ -3228,15 +3223,7 @@ 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);
-    }
+     }
   };
 
   const Upimodel = (type) => {
@@ -3686,890 +3673,13 @@ const BSBillingTable5 = () => {
             className="BS5Billtble"
             style={{ height: 'inherit', overflow: 'auto' }}
           >
-            <BsBill />
+            <BSBillingTable3 TableName="Table5" />
           </div>
         )}
 
         {/* bill table */}
 
-        <div className="BSBillingTable-ftr">
-          {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>
+        <BSBillingTable3Pay />
         {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);
@@ -20,7 +21,7 @@ const BSBillingTable7Overall = () => {
     containerHeight = isMobile
       ? ExpDate <= 7
         ? '480px'
-        : '468px' // billing table 7 height in POS  
+        : '468px' // billing table 7 height in POS
       : ExpDate <= 7
         ? '82vh'
         : '';
@@ -30,7 +31,7 @@ const BSBillingTable7Overall = () => {
     containerHeight = isMobile
       ? ExpDate <= 7
         ? '490px'
-        : '475px' // billing table 7 height in POS  
+        : '475px' // billing table 7 height in POS
       : ExpDate <= 7
         ? '84vh'
         : '';
@@ -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,8 +1212,7 @@
 
 .booking-table-footer {
   width: 100%;
-  // padding: 1rem 1rem 0rem 1rem;
-  padding: 10px 10px 4px 10px;
+   padding: 10px 10px 4px 10px;
   display: flex;
   flex-direction: column;
   gap: 3px;
@@ -1291,8 +1289,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  // justify-content: space-around;
-  gap: 0.5rem;
+   gap: 0.5rem;
   opacity: 1;
   background-color: #0d9488;
   color: #fff;
@@ -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,8 +1579,7 @@
     height: max-content !important;
     max-height: 30vh !important;
     position: fixed;
-    // bottom: 23%;
-    bottom: 140px;
+     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,14 +355,14 @@ const BSLayout1 = () => {
           >
             <div
               className="Layout-bill-container"
-              style={{ marginTop: '12px' }}
+              // style={{ marginTop: '12px' }}
             >
               <div
-                           className={
-                BookingNavbar === 'Navbar3'
-                  ? 'Layout-IfNavbar3'
-                  : 'Layout-bill-Subcontainer'
-              }
+                className={
+                  BookingNavbar === 'Navbar3'
+                    ? 'Layout-IfNavbar3'
+                    : 'Layout-bill-Subcontainer'
+                }
                 style={{ width: OtherServicesglobal ? '10%' : '100%' }}
               >
                 {UserType !== 'Employee' && (
@@ -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' && (
-                      <BSBillingTable1 />
-                    )}
-                    {BSLayout1Data?.BookingBilling?.[0] == 'Billing2' && (
-                      <BSBillingTable2 />
-                    )}
-                    {BSLayout1Data?.BookingBilling?.[0] == 'Billing3' && (
+                    {(BSLayout1Data?.BookingBilling?.[0] === 'Billing1' ||
+                      BSLayout1Data?.BookingBilling?.[0] === 'Billing3' ||
+                      BSLayout1Data?.BookingBilling?.[0] === 'Billing4' ||
+                      BSLayout1Data?.BookingBilling?.[0] === 'Billing5' ||
+                      BSLayout1Data?.BookingBilling?.[0] === 'Billing6' ||
+                      BSLayout1Data?.BookingBilling?.[0] === 'Billing7') && (
                       <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] == 'Billing7' && (
-                      <BSBillingTable7 />
-                    )}
-                    {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
-                    {BSLayout1Data?.BookingBilling?.[0] ==
+
+                    {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' && (
-                        <BSBillingTable1 />
-                      )}
-                      {BSLayout2Data?.BookingBilling?.[0] == 'Billing2' && (
-                        <BSBillingTable2 />
-                      )}
-                      {BSLayout2Data?.BookingBilling?.[0] == 'Billing3' && (
+                      {(BSLayout2Data?.BookingBilling?.[0] === 'Billing1' ||
+                        BSLayout2Data?.BookingBilling?.[0] === 'Billing3' ||
+                        BSLayout2Data?.BookingBilling?.[0] === 'Billing4' ||
+                        BSLayout2Data?.BookingBilling?.[0] === 'Billing5' ||
+                        BSLayout2Data?.BookingBilling?.[0] === 'Billing6' ||
+                        BSLayout2Data?.BookingBilling?.[0] === 'Billing7') && (
                         <BSBillingTable3 />
                       )}
-                      {BSLayout2Data?.BookingBilling?.[0] == 'Billing4' && (
-                        <BSBillingTable4 />
-                      )}
-                      {BSLayout2Data?.BookingBilling?.[0] == 'Billing5' && (
-                        <BSBillingTable5 />
-                      )}
-                      {BSLayout2Data?.BookingBilling?.[0] == 'Billing6' && (
-                        <BSBillingTable6 />
-                      )}
-                      {BSLayout2Data?.BookingBilling?.[0] == 'Billing7' && (
-                        <BSBillingTable7 />
+
+                      {BSLayout2Data?.BookingBilling?.[0] === 'Billing2' && (
+                        <BSBillingTable2 />
                       )}
 
-                      {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
-                      {BSLayout2Data?.BookingBilling?.[0] ==
+                      {BSLayout2Data?.BookingBilling?.[0] === 'Billing8' && (
+                        <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' && (
-                      <BSBillingTable1 />
-                    )}
-                    {BSLayout3Data?.BookingBilling?.[0] == 'Billing2' && (
-                      <BSBillingTable2 />
-                    )}
-                    {BSLayout3Data?.BookingBilling?.[0] == 'Billing3' && (
+                    {(BSLayout3Data?.BookingBilling?.[0] === 'Billing1' ||
+                      BSLayout3Data?.BookingBilling?.[0] === 'Billing3' ||
+                      BSLayout3Data?.BookingBilling?.[0] === 'Billing4' ||
+                      BSLayout3Data?.BookingBilling?.[0] === 'Billing5' ||
+                      BSLayout3Data?.BookingBilling?.[0] === 'Billing6' ||
+                      BSLayout3Data?.BookingBilling?.[0] === 'Billing7') && (
                       <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] == 'Billing7' && (
-                      <BSBillingTable7 />
-                    )}
-                    {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
-                    {BSLayout3Data?.BookingBilling?.[0] ==
+
+                    {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' && (
-                    <BSBillingTable1 />
-                  )}
-                  {BSLayout4Data?.BookingBilling?.[0] == 'Billing2' && (
-                    <BSBillingTable2 />
-                  )}
-                  {BSLayout4Data?.BookingBilling?.[0] == 'Billing3' && (
+                  {(BSLayout4Data?.BookingBilling?.[0] === 'Billing1' ||
+                    BSLayout4Data?.BookingBilling?.[0] === 'Billing3' ||
+                    BSLayout4Data?.BookingBilling?.[0] === 'Billing4' ||
+                    BSLayout4Data?.BookingBilling?.[0] === 'Billing5' ||
+                    BSLayout4Data?.BookingBilling?.[0] === 'Billing6' ||
+                    BSLayout4Data?.BookingBilling?.[0] === 'Billing7') && (
                     <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] == 'Billing7' && (
-                    <BSBillingTable7 />
-                  )}
-                  {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
-                  {BSLayout4Data?.BookingBilling?.[0] == 'StandardBilling' && (
+
+                  {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 == 'Billing5' && <BSBillingTable5 />}
-                    {BookingBilling == 'Billing6' && <BSBillingTable6 />}
-                    {BookingBilling == 'Billing7' && <BSBillingTable7 />}
+                    {BookingBilling == 'Billing4' && <BSBillingTable3 />}
+                    {BookingBilling == 'Billing5' && <BSBillingTable3 />}
+                    {BookingBilling == 'Billing6' && <BSBillingTable3 />}
+                    {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' && (
-                      <BSBillingTable1 />
-                    )}
-                    {BSLayout6Data?.BookingBilling?.[0] == 'Billing2' && (
-                      <BSBillingTable2 />
-                    )}
-                    {BSLayout6Data?.BookingBilling?.[0] == 'Billing3' && (
+                    {(BSLayout6Data?.BookingBilling?.[0] === 'Billing1' ||
+                      BSLayout6Data?.BookingBilling?.[0] === 'Billing3' ||
+                      BSLayout6Data?.BookingBilling?.[0] === 'Billing4' ||
+                      BSLayout6Data?.BookingBilling?.[0] === 'Billing5' ||
+                      BSLayout6Data?.BookingBilling?.[0] === 'Billing6' ||
+                      BSLayout6Data?.BookingBilling?.[0] === 'Billing7') && (
                       <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] == 'Billing7' && (
-                      <BSBillingTable7 />
-                    )}
-                    {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
-                    {BSLayout6Data?.BookingBilling?.[0] ==
+
+                    {BSLayout6Data?.BookingBilling?.[0] ===
                       'StandardBilling' && (
-                      <div
-                        className="BSCategory2New"
-                        style={{
-                          height: BSLayout6Data ? '88vh' : '99vh',
-                        }}
-                      >
-                        <StandardTable />
+                      <div className="BSCategory2New">
+                        <BSBillingTable3 />
                       </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(
-  () =>
-    import('../../Components/BSBillingTables/BSBillingTable1/BSBillingTable1')
-);
+// const BSBillingTable1 = lazy(
+//   () =>
+//     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(
-  () =>
-    import('../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4')
-);
+// const BSBillingTable4 = lazy(
+//   () =>
+//     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 class="Payment-loader">
-                <div class="contener_mixte">
-                  <div class="ballcolor ball_1">&nbsp;</div>
+            <div className="Payment-loader1">
+              <div className="Payment-loader">
+                <div className="contener_mixte">
+                  <div className="ballcolor ball_1">&nbsp;</div>
                 </div>
-                <div class="contener_mixte">
-                  <div class="ballcolor ball_2">&nbsp;</div>
+                <div className="contener_mixte">
+                  <div className="ballcolor ball_2">&nbsp;</div>
                 </div>
-                <div class="contener_mixte">
-                  <div class="ballcolor ball_3">&nbsp;</div>
+                <div className="contener_mixte">
+                  <div className="ballcolor ball_3">&nbsp;</div>
                 </div>
-                <div class="contener_mixte">
-                  <div class="ballcolor ball_4">&nbsp;</div>
+                <div className="contener_mixte">
+                  <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-weight: 600;
+  font-size: 20px;
+  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,10 +194,8 @@ input::-webkit-inner-spin-button {
 .BST1-Payment-onlyicons {
   display: flex;
   flex-direction: row;
-  // gap: 1rem;
-  justify-content: center;
-  //naresh
-  column-gap: 0.5rem;
+   justify-content: center;
+   column-gap: 0.5rem;
 }
 
 @media (min-width: 500px) and (max-width: 768px) {
@@ -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,8 +221,7 @@ input::-webkit-inner-spin-button {
   }
 
   .BST1-Payment-payicons {
-    // flex-direction: column;
-    flex-direction: row;
+     flex-direction: row;
     align-items: center;
     justify-content: space-evenly;
   }
@@ -212,8 +229,7 @@ input::-webkit-inner-spin-button {
   .BST1-Payment-onlyicons {
     display: flex;
     flex-direction: row;
-    // gap: 1rem;
-    justify-content: center;
+     justify-content: center;
   }
 
   .Table1-payment-mode {
@@ -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: 83vh;
-  // height: 80vh;
+  height: 85vh;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -14,15 +12,32 @@
   justify-content: space-between;
 }
 .layout6-height {
-  height: 71vh ;
+  height: 71vh;
 }
 
 .BSBTOverall1-Default-summary {
   display: flex;
   justify-content: center;
-  // margin-Top:2rem;
-  align-items: center;
+   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,15 +46,26 @@
   row-gap: 0.5rem;
   background-color: #fff;
   width: inherit;
-  // position: fixed;
-  bottom: 0;
+   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;
   border-top: solid 1px #7c7c7c;
   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;
-}
-
-.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);
+  .BSBilling3PayMaster {
+    height: 150px !important;
+    flex-grow: unset;
+  }
 }
 
 .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,8 +118,7 @@
 .BSBillingTable2-table-div {
   background-color: #ececec;
   height: 40vh;
-  // margin: 1vw 2vh;
-  padding: 1vw 1vh;
+   padding: 1vw 1vh;
   width: 100%;
   overflow: auto;
 }
@@ -185,8 +173,8 @@
   column-gap: 1rem;
   text-align: left;
   padding: 10px 5px;
-  width: 100%;
-  margin: 0.5rem 0rem;
+  width: 98%;
+  margin: 0.2rem 0rem;
   align-items: left;
   background-color: #ffffff;
   border-radius: 6px;
@@ -250,9 +238,7 @@
 
 .BSBillingTable2-pay-btn-div {
   display: flex;
-  // width: 90%;
-  //naresh
-  width: 90%;
+   width: 90%;
   justify-content: space-around;
   align-items: center;
   flex-direction: row;
@@ -260,8 +246,7 @@
   background-color: #fff;
 }
 
-// Payment Options
-.pay-btn-div {
+ .pay-btn-div {
   display: flex;
   align-items: center;
 }
@@ -283,8 +268,7 @@
 }
 
 .Table3-cash .pay-opt-btn {
-  // width: 70px;
-  transform: scale(0.9);
+   transform: scale(0.9);
 }
 
 .pay-opt-btn {
@@ -293,8 +277,7 @@
   display: flex;
   align-items: center;
   flex-direction: row;
-  // column-gap: 0.6rem;
-  font-weight: 600;
+   font-weight: 600;
   border-radius: 4.982px;
   font-family: var(--HEADING_FONT_FAMILY);
   background-color: var(--DEFAULT_SELECTED_COLOR);
@@ -376,26 +359,16 @@
   width: 30px;
   font-size: 20px;
   cursor: pointer;
-  // cursor: pointer;
-  // font-size:30px;
-  color: var(--SELECTED_COLOR);
-  // cursor: pointer;
-  // font-size:30px;
-  // color: #52C41A;
-}
+   color: var(--SELECTED_COLOR);
+ }
 
 .Tbl2-Dinein-order-btn-disable {
   height: 35px;
   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;
+   color: var(--SELECTED_COLOR);
+   pointer-events: none;
 }
 
 .billing-div {
@@ -442,8 +415,7 @@
 }
 
 .BSBillingTable2-table-td {
-  // border: 1px solid #dddddd;
-  border-bottom: 1.9px dashed #000;
+   border-bottom: 1.9px dashed #000;
   text-align: left;
   padding: 8px;
   text-align: center;
@@ -453,14 +425,13 @@
 }
 
 .BSBillingTable2-table-th {
-  // border: 1px solid #dddddd;
-  border-bottom: 1.9px solid #000;
+   border-bottom: 1.9px solid #000;
   padding: 8px;
   text-align: center;
 }
 
 .BSBillingTable2-table-notes {
-  font-size: '14px';
+  font-size: 14px;
   font-weight: 500;
 }
 
@@ -471,15 +442,13 @@
 }
 
 .BSBillingTable2-table-sub-td {
-  // display: flex;
-  font-size: 14px;
+    font-size: 14px;
   font-weight: 500;
   color: #52c41a;
 }
 
 .BSBillingTable2-table-tr:nth-child(even) {
-  // background-color: #dddddd;
-  text-align: center;
+   text-align: center;
 }
 
 .mobscrn-sum {
@@ -503,8 +472,7 @@
 
 .BsBill2Sum-pop {
   position: absolute;
-  // bottom: 100px;
-  right: 0;
+   right: 0;
   width: 100%;
   height: 100%;
   background-color: #fff;
@@ -523,9 +491,7 @@
     height: 0vh !important;
   }
 
-  // .BSBillingTable2-bill-amnt-cont
-  // .BsBill-Popover,
-  .BSBillingTable2-billtablediv,
+   .BSBillingTable2-billtablediv,
   .BSBillingTable2-order-cont,
   .BSBillingTable2-bill-cont,
   .tkaway-dine-btns {
@@ -540,8 +506,7 @@
     width: 60px !important;
   }
 
-  // .BSBillingTable2-bill-amnt-cont
-  .mobscrn-sum {
+   .mobscrn-sum {
     display: flex;
     font-size: 20px;
   }
@@ -571,8 +536,7 @@
   }
 
   .BSBillingTable2-Summary {
-    // position: fixed;
-    bottom: 0;
+     bottom: 0;
     right: 0;
   }
 
@@ -581,26 +545,11 @@
   }
 
   .BSBillingTable2-pay-btn-div {
-    // position: fixed;
-    right: 0;
+     right: 0;
     column-gap: 1rem;
-    // width: 90%;
-    // overflow-x: scroll;
-    // transform: scale(0.75);
-    margin: 0rem 0rem;
-    // nk
-    //
-    //
-    bottom: 5.2rem;
+     margin: 0rem 0rem;
+     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,8 +636,7 @@
   }
 
   .BSBillingTable2-pay-btn-div {
-    // justify-content: space-around;
-    background-color: #fff;
+     background-color: #fff;
   }
 
   .BSBillingTable2-icon-container {
@@ -760,8 +644,7 @@
   }
 
   .BSBillingTable2-Summary {
-    // position: fixed;
-    display: none;
+     display: none;
     bottom: 0;
     right: 0;
     width: 100vw;

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,8 +733,7 @@
   justify-content: space-evenly;
   padding: 0px 0px;
 }
-//nk
-.Table7-price-icon-container {
+ .Table7-price-icon-container {
   display: flex;
   flex-direction: column;
   width: 100%;

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

@@ -16,15 +16,11 @@
 }
 
 .BillingTable6-Table1 {
-  // width: inherit;
-  // width: 100vw;
-  border-spacing: 0px;
+   border-spacing: 0px;
 }
 
 .BillingTable6Table1-head {
-  // background-color: #124A79;
-  // color: #fff;
-  text-align: center;
+   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,9 +294,7 @@ input::-webkit-inner-spin-button {
   width: 20px;
   height: 20px;
   cursor: pointer;
-  // background-color: #bebebe;
-  // color: #000000;
-  border: none;
+   border: none;
   border-radius: 6px;
 }
 
@@ -399,8 +401,7 @@ input::-webkit-inner-spin-button {
   }
 
   .BST6Payment-Button-pay {
-    // width: max-content;
-    width: 155px;
+     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;
-  border-radius: 10px;
-  @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;
+  height: 85vh !important;
+  gap: 4px;
   border-radius: 10px;
   @media (max-width: 768px) {
     width: 100% !important;
@@ -348,8 +341,8 @@
 .BSTable3 {
   overflow-y: auto;
   scrollbar-width: none;
-  height: 100vh;
-  background-color: #fff;
+  height: 70vh;
+  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;
@@ -770,22 +769,14 @@
     padding: 2px !important;
     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;
-  box-shadow: var(--BOX_SHADOW_LEVEL2);
+  height: 45px !important;
+  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,15 +5,14 @@
 .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%;
+   height: 100%;
 
   @media (max-width: 768px) {
     top: 2rem;
@@ -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: 98vh;
+  height: 91.5vh;
+  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,8 +39,7 @@ body {
 .BSLayout2Standard {
   overflow: hidden;
   position: relative;
-  top: 2.1rem;
-  height: 100%;
+   height: 100%;
 
   @media (max-width: 768px) {
     top: 2rem;
@@ -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: clamp(68vh, 50rem, 50vh);
+  height: 86vh;
   background-color: #fff;
   @media (max-width: 768px) {
     width: 100% !important;
@@ -420,8 +418,7 @@
   padding: 0rem 0.4rem;
   background-color: #fff;
   font-size: 12px;
-  // font-weight: 700;
-  border-radius: 3px;
+   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;
+  }
 }