Resolve conflicts with main

src/Features/BookingScreen/BookingData/BookingData.js

@@ -804,19 +804,17 @@ export const getPaymentOptionFeatureApi = createAsyncThunk(
 );
 
 export const getProductsearch = createAsyncThunk(
-  "BookingData/getProductsearch",
+  'BookingData/getProductsearch',
   async (
     { CompId, BranchId, AppId, ProdName },
     { signal, rejectWithValue }
   ) => {
     try {
       if (!CompId || !BranchId || !AppId || !ProdName) {
-        return rejectWithValue("Invalid params");
+        return rejectWithValue('Invalid params');
       }
 
-      const response = await axiosRetailInstanceData.get(
+      const response = await axiosRetailInstanceData.get(`/productCardList`, {
-        `/productCardList`,
-        {
         params: {
           CompId,
           BranchId,
@@ -824,17 +822,16 @@ export const getProductsearch = createAsyncThunk(
           ProdName,
         },
         signal, // ✅ Abort works here
-        }
+      });
-      );
 
       return response.data; // ✅ return only data
     } catch (error) {
       // ✅ Abort error – ignore
-      if (error.name === "CanceledError" || error.name === "AbortError") {
+      if (error.name === 'CanceledError' || error.name === 'AbortError') {
         throw error;
       }
 
-      return rejectWithValue(error.response?.data || "API Error");
+      return rejectWithValue(error.response?.data || 'API Error');
     }
   }
 );
@@ -1472,7 +1469,6 @@ export const CustomerOrderList = createAsyncThunk(
         `/LastBuyProductList?compId=${CompId}&branchId=${BranchId}&appId=${AppId}&mobileNo=${MobileNo}`
       );
     }
-
   }
 );
 
@@ -1493,8 +1489,6 @@ export const getmultipleSearch = createAsyncThunk(
   }
 );
 
-
-
 const initialState = {
   PrintStyle: null,
   CustId: null,
@@ -1995,9 +1989,8 @@ const BookingData = createSlice({
           state.SelectedDatas = [];
         }
       }),
-
       builder.addCase(getProductsearch.fulfilled, (state, action) => {
-        console.log(action?.payload, "mohanaacacacca")
+        console.log(action?.payload, 'mohanaacacacca');
         if (action?.payload?.statusCode === 1) {
           state.SelectedDatas = action?.payload?.data;
         } else {

src/Features/PurchaseOrder/PurchaseOrder.js

@@ -101,7 +101,7 @@ export const getPurProdvaraiantdata = createAsyncThunk(
       data?.prodName !== undefined
     ) {
       return await axiosRetailInstanceData.get(
-        `/ProductCardList?CompId=${data?.CompId}&BranchId=${data?.BranchId}&AppId=${data?.AppId}&prodName=${encodeURIComponent(data?.prodName)}`
+        `/ProductCardList?CompId=${data?.CompId}&BranchId=${data?.BranchId}&AppId=${data?.AppId}&prodName=${encodeURIComponent(data?.prodName)}&type=S`
       );
     }
   }

src/Features/StockMaster/StockMaster.js

@@ -31,7 +31,7 @@ export const getInvoiceImageData = createAsyncThunk(
     formData.append("file", file); // 👈 actual file here
 
     const response = await axiosRetailOcrData.post(
-      "/invoiceupload",
+      "/invoice",
       formData,
       {
         headers: {

src/Features/ThemeChange/ThemeChange.js

@@ -364,7 +364,14 @@ export const getPrintSelectionComponentData = createAsyncThunk(
     );
   }
 );
-
+export const getSalesTemplate = createAsyncThunk(
+  'theme/getSalesTemplate',
+  async (Data) => {
+    return await axiosRetailInstanceData.get(
+      `${apiUrl}/ThemeMaster?compId=${Data.CompId}&branchId=${Data.BranchId}&appId=${Data.AppId}`
+    );
+  }
+);
 export const PricingAppPricingNameData = createAsyncThunk(
   'theme/PricingAppPricingNameData',
   async (data) => {
@@ -463,6 +470,7 @@ const initialState = {
   notes: false,
   SignatureImage: '',
   BillName: '',
+  SelectedHeaderColor: '#000000',
   allColors: [],
   allColorsCat: [],
   LayoutOverallColorsList: [],
@@ -2139,6 +2147,9 @@ const ThemeSlice = createSlice({
     changeBillName: (state, action) => {
       state.BillName = action?.payload;
     },
+      changeSelectedHeaderColor: (state, action) => {
+          state.SelectedHeaderColor = action?.payload;
+        },
     changeCurrentColor: (state, action) => {
       const { color } = action?.payload;
       state.CurrentColor = color;
@@ -2332,16 +2343,7 @@ const ThemeSlice = createSlice({
         getPrintSelectionComponentData.fulfilled,
         (state, action) => {
           if (action?.payload?.data?.statusCode === 1) {
-            const Advance = state?.PricingAppPricingName?.some(
+           
-              (item) => item.PricingName === 'Premium'
-            );
-            const hasCustomizedTemplate =
-              state.FeatureAddonData?.FeatureDtls?.some(
-                (item) =>
-                  item?.FeatureAddonName?.toLowerCase() ===
-                  'customized template'
-              );
-            if (Advance || hasCustomizedTemplate) {
               state.PrintTemplate =
                 action?.payload?.data?.data?.[0]?.ComponentDetails?.find(
                   (item) =>
@@ -2367,7 +2369,7 @@ const ThemeSlice = createSlice({
                   acc[item.ConfigName] = true;
                   return acc;
                 }, {});
-            }
+            
           } else if (action?.payload?.data?.statusCode == 0) {
             state.PrintTemplate = undefined;
           }
@@ -2683,6 +2685,7 @@ export const {
   changeOthersTheme,
   changeActiveTheme,
   changeScanTemplate,
+  changeSelectedHeaderColor,
 } = ThemeSlice.actions;
 
 export const GlobalPricingAppPricingName = (state) =>
@@ -2713,6 +2716,8 @@ export const GlobalthemeFormat = (state) => state.theme?.themeFormat;
 export const Globalnotes = (state) => state.theme?.notes;
 export const GlobalSignatureImage = (state) => state.theme?.SignatureImage;
 export const GlobalBillName = (state) => state.theme?.BillName;
+export const GlobalSelectedPrintHeaderColor = (state) =>
+  state.theme?.SelectedHeaderColor;
 
 export const changeCurrentColorValue = (state) => state.theme?.CurrentColor;
 export const changeCurrentTextValue = (state) => state.theme?.CurrentText;

src/Pages/AppPage/AppPage.jsx

@@ -580,28 +580,16 @@ console.log(iswarehouse,'iswarehouseiswarehouseiswarehouse');
         'GST Invoice Setup',
         `${subDirectory}setting/gst-invoice-setup`
       ),
-       ((Advance ||
+       (!iswarehouse) &&
-        featureaddDetails?.find(
-          (item) =>
-            item?.FeatureAddonName?.toLowerCase() === 'customized template'
-        )) &&   !iswarehouse) &&
     getsubItem('Customization', `${subDirectory}setting/Customize`, null, [
-      (Advance ||
+      
-        featureaddDetails?.find(
-          (item) =>
-            item?.FeatureAddonName?.toLowerCase() === 'customized template'
-        )) &&
       !iswarehouse
         ? getsubItem(
             'Sales Screen',
             `${subDirectory}saleslayouts/sales-selection`
           )
         : '',
-      (Advance ||
+      
-        featureaddDetails?.find(
-          (item) =>
-            item?.FeatureAddonName?.toLowerCase() === 'customized template'
-        )) &&
       !iswarehouse
         ? getsubItem(
             'Print Forms',
@@ -616,11 +604,7 @@ console.log(iswarehouse,'iswarehouseiswarehouseiswarehouse');
             `${subDirectory}saleslayouts/kiosk-selection`
           )
         : '',
-      (Advance ||
+     
-        featureaddDetails?.find(
-          (item) =>
-            item?.FeatureAddonName?.toLowerCase() === 'customized template'
-        )) &&
       !iswarehouse
         ? getsubItem(
             'Barcode / QR',
@@ -1318,29 +1302,17 @@ console.log(iswarehouse,'iswarehouseiswarehouseiswarehouse');
           'GST Invoice Setup',
           `${subDirectory}setting/gst-invoice-setup`
         ),
-      ((Advance ||
+      (
-        featureaddDetails?.find(
-          (item) =>
-            item?.FeatureAddonName?.toLowerCase() === 'customized template'
-        )) &&
         !iswarehouse) &&
         getsubItem('Customization', `${subDirectory}setting/Customize`, null, [
-          (Advance ||
+          
-            featureaddDetails?.find(
-              (item) =>
-                item?.FeatureAddonName?.toLowerCase() === 'customized template'
-            )) &&
           !iswarehouse
             ? getsubItem(
                 'Sales Screen',
                 `${subDirectory}saleslayouts/sales-selection`
               )
             : '',
-          (Advance ||
+         
-            featureaddDetails?.find(
-              (item) =>
-                item?.FeatureAddonName?.toLowerCase() === 'customized template'
-            )) &&
           !iswarehouse
             ? getsubItem(
                 'Print Forms',
@@ -1355,11 +1327,7 @@ console.log(iswarehouse,'iswarehouseiswarehouseiswarehouse');
                 `${subDirectory}saleslayouts/kiosk-selection`
               )
             : '',
-          (Advance ||
+          
-            featureaddDetails?.find(
-              (item) =>
-                item?.FeatureAddonName?.toLowerCase() === 'customized template'
-            )) &&
           !iswarehouse
             ? getsubItem(
                 'Barcode / QR',
@@ -2563,26 +2531,14 @@ const customizedmenuitem = []
             'GST Invoice Setup',
             `${subDirectory}setting/gst-invoice-setup`
           ),
-        (Advance ||
+      
-          featureaddDetails?.find(
-            (item) =>
-              item?.FeatureAddonName?.toLowerCase() === 'customized template'
-          ) ||
-          featureaddDetails?.find(
-            (item) => item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
-          )) &&
           !sportsAppPreference &&
           getsubItem(
             'Customization',
             `${subDirectory}setting/Customized`,
             null,
             [
-              (Advance ||
+              
-                featureaddDetails?.find(
-                  (item) =>
-                    item?.FeatureAddonName?.toLowerCase() ===
-                    'customized template'
-                )) &&
               !sportsAppPreference &&
               !iswarehouse
                 ? getsubItem(
@@ -2590,12 +2546,7 @@ const customizedmenuitem = []
                     `${subDirectory}saleslayouts/sales-selection`
                   )
                 : '',
-              (Advance ||
+             
-                featureaddDetails?.find(
-                  (item) =>
-                    item?.FeatureAddonName?.toLowerCase() ===
-                    'customized template'
-                )) &&
               !iswarehouse
                 ? getsubItem(
                     'Print Forms',
@@ -2611,12 +2562,7 @@ const customizedmenuitem = []
                     `${subDirectory}saleslayouts/kiosk-selection`
                   )
                 : '',
-              (Advance ||
+             
-                featureaddDetails?.find(
-                  (item) =>
-                    item?.FeatureAddonName?.toLowerCase() ===
-                    'customized template'
-                )) &&
               !iswarehouse &&
               !sportsAppPreference
                 ? getsubItem(

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

@@ -87,11 +87,13 @@ const BSBillingEditQuantity = (props) => {
   );
   const ReorderProductData = useSelector(GlobalReorderProductDetails);
   const templateData = useSelector(getTemplateData);
-  const OfferCheckedInSetup = templateData?.BookingNavbar?.[1].some(
+  const OfferCheckedInSetup =
+    templateData?.BookingNavbar?.[1].some(
       (item) => item?.OptionName == 'Offer'
-  ) || (templateData?.BookingCombo1?.[1]?.some(
+    ) ||
+    templateData?.BookingCombo1?.[1]?.some(
       (item) => item?.OptionName == 'Offer'
-  ));
+    );
   const [ClearQuantity, setClearQuantity] = useState(false);
   const CartOrderDetails = useSelector(GlobalOrderCardDetails);
   const SettingDataSelector = useSelector(PreferenceData);
@@ -3158,9 +3160,10 @@ const BSBillingEditQuantity = (props) => {
 
       const UpdatedCartItemWithOffer = {
         ...updatedProduct,
-        Offer: (bestOffer?.OfferMode === 'I' || bestOffer?.OfferMode === 'Q') ?
+        Offer:
-          bestOffer?.OfferAmount || updatedProduct.Offer :
+          bestOffer?.OfferMode === 'I' || bestOffer?.OfferMode === 'Q'
-          updatedProduct.Offer || bestOffer?.OfferAmount,
+            ? bestOffer?.OfferAmount || updatedProduct.Offer
+            : updatedProduct.Offer || bestOffer?.OfferAmount,
         OfferType: updatedProduct?.OfferType || bestOffer?.OfferType,
         OfferMessage: updatedProduct?.OfferMessage || bestOffer?.OfferMessage,
       };
@@ -3175,10 +3178,11 @@ const BSBillingEditQuantity = (props) => {
         !c.SalesId &&
         ((c?.OfferModeType && c?.OfferMode === 'B'
           ? true
-          : c?.OfferMode !== 'B')
+          : c?.OfferMode !== 'B') &&
-          && c?.OfferMode !== 'P'
+        c?.OfferMode !== 'P' &&
-          && c?.OfferMode !== 'C' && c?.OfferMode !== 'O'
+        c?.OfferMode !== 'C' &&
-          && c?.OfferMode !== 'L'
+        c?.OfferMode !== 'O' &&
+        c?.OfferMode !== 'L'
           ? true
           : c?.Offer === 0);
 
@@ -3708,9 +3712,10 @@ const BSBillingEditQuantity = (props) => {
       />
       <DefaultModal
         title={
-          <div className="EditQuantity-title">
+          'Change'
-            <FormHeader title={'Change'} />
+          // <div className="EditQuantity-title">
-          </div>
+          //   <FormHeader title={'Change'} />
+          // </div>
         }
         open={EditOpen}
         width={600}
@@ -3817,38 +3822,38 @@ const BSBillingEditQuantity = (props) => {
                       &#x2716;
                     </button>
                   </div>
-                  <div className="grid-container">
+                  <div className="gridEQcontainer">
-                    <div className="grid-item" onClick={() => AddQuantity(1)}>
+                    <div className="gridEQitem" onClick={() => AddQuantity(1)}>
                       1
                     </div>
-                    <div className="grid-item" onClick={() => AddQuantity(2)}>
+                    <div className="gridEQitem" onClick={() => AddQuantity(2)}>
                       2
                     </div>
-                    <div className="grid-item" onClick={() => AddQuantity(3)}>
+                    <div className="gridEQitem" onClick={() => AddQuantity(3)}>
                       3
                     </div>
 
-                    <div className="grid-item" onClick={() => AddQuantity(4)}>
+                    <div className="gridEQitem" onClick={() => AddQuantity(4)}>
                       4
                     </div>
-                    <div className="grid-item" onClick={() => AddQuantity(5)}>
+                    <div className="gridEQitem" onClick={() => AddQuantity(5)}>
                       5
                     </div>
-                    <div className="grid-item" onClick={() => AddQuantity(6)}>
+                    <div className="gridEQitem" onClick={() => AddQuantity(6)}>
                       6
                     </div>
 
-                    <div className="grid-item" onClick={() => AddQuantity(7)}>
+                    <div className="gridEQitem" onClick={() => AddQuantity(7)}>
                       7
                     </div>
-                    <div className="grid-item" onClick={() => AddQuantity(8)}>
+                    <div className="gridEQitem" onClick={() => AddQuantity(8)}>
                       8
                     </div>
-                    <div className="grid-item" onClick={() => AddQuantity(9)}>
+                    <div className="gridEQitem" onClick={() => AddQuantity(9)}>
                       9
                     </div>
                     <div></div>
-                    <div className="grid-item" onClick={() => AddQuantity(0)}>
+                    <div className="gridEQitem" onClick={() => AddQuantity(0)}>
                       0
                     </div>
                     <div></div>

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

@@ -222,6 +222,7 @@ import pozologoimg from '../../../../../Images/pozologoimg.png';
 import PaymentGatewayEmbedded from '../../UtillComponents/PaymentGatewayEmbedded.jsx';
 import MobileMultiPdfPrintTrigger from '../../UtillComponents/MobileMultiPdfPrintTrigger.jsx';
 import { useDateStore } from '../../../../../Features/BookingScreen/BookingData/DateStore.js';
+import CustomerOrders from '../../BookingFunctionality/CustomerOrders.jsx';
 
 const subDirectory = import.meta.env.ENV_BASE_URL;
 const MainHomeUrl = import.meta.env.ENV_MAIN_BASE_URL;

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

@@ -3789,40 +3789,7 @@ const BSBilling4Payment = () => {
                       </div>
                     </TooltipWrapper>
                   )}
-                  {/* Customer Orders */}
+
-                  {GetCustId && (
-                    <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>
-                  )}
                   {OtherServicesglobal && OrderCardDetail.length >= 1 && (
                     <TooltipWrapper title="Vehicle Number" isMobile={isMobile}>
                       {' '}
@@ -3859,6 +3826,41 @@ const BSBilling4Payment = () => {
                   {/* </React.Fragment> */}
                 </div>
               )}
+
+              {/* Customer Orders */}
+              {GetCustId && (
+                <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 && (
                 <div style={{ width: '2rem' }}>
                   {tableOptions

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

@@ -220,6 +220,7 @@ import UpiPopover from '../StandardTable/Utils/UpiPopOver.jsx';
 import PaymentGatewayEmbedded from '../../UtillComponents/PaymentGatewayEmbedded.jsx';
 import MobileMultiPdfPrintTrigger from '../../UtillComponents/MobileMultiPdfPrintTrigger.jsx';
 import { useDateStore } from '../../../../../Features/BookingScreen/BookingData/DateStore.js';
+import CustomerOrders from '../../BookingFunctionality/CustomerOrders.jsx';
 
 const subDirectory = import.meta.env.ENV_BASE_URL;
 const MainHomeUrl = import.meta.env.ENV_MAIN_BASE_URL;

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

@@ -350,7 +350,10 @@ const BSC1Payment = (props) => {
   )?.PreferenceCatDetails;
   const sportsAppPreference = commonModulePreference?.find(
     (preference) => preference?.PreferredSubCatName === 'SportsApp'
+     &&
+      preference?.PreferredStatus == 'Y'
   );
+  console.log(sportsAppPreference,commonModulePreference,"sportsAppPreference")
   const bookingTypePreference = appPreferences?.find(
     (preference) => preference?.PreferredCatName === 'Booking Type'
   )?.PreferenceCatDetails;

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

@@ -2640,6 +2640,8 @@ export default function BSC1Search(props) {
             ?.StockDetails?.[stockIndex]?.OnePcsPrice
           : a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex]
             ?.StockDetails?.[stockIndex]?.MRP,
+        FullProductIdentifierDtls:a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex]
+            ?.StockDetails?.[stockIndex]?.ProductIdentifierDtls,
         OrderRate: parseFloat(TotalOrderRate).toFixed(2),
         SellingPrice: parseFloat(TotalOrderRate).toFixed(2),
         SuppId:
@@ -2769,6 +2771,8 @@ export default function BSC1Search(props) {
           Offer:
             a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex]
               ?.StockDetails?.[stockIndex]?.OfferPrice,
+        FullProductIdentifierDtls:a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex]
+         ?.StockDetails?.[stockIndex]?.ProductIdentifierDtls,
           BookingTypeName: BookingType,
           CounterName: a?.CounterName,
         };

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

@@ -1,15 +1,20 @@
-import { useDispatch } from "react-redux";
+import { useDispatch } from 'react-redux';
-import { changeOrderCardDetails, CustomerOrderList, getProductsearch } from "../../../../Features/BookingScreen/BookingData/BookingData";
+import {
-import { useEffect, useState } from "react";
+  changeOrderCardDetails,
-import { ExtractDateFormate, getSession } from "../../../../Services/Others";
+  CustomerOrderList,
-import { Tables } from "../../../../Components/Tables/Table";
+  getProductsearch,
-import { IoEye } from "react-icons/io5";
+  getStockDetailsByVariantName,
-import { DatePicker, Modal } from "antd";
+} from '../../../../Features/BookingScreen/BookingData/BookingData';
-import dayjs from "dayjs";
+import { useEffect, useState } from 'react';
+import { ExtractDateFormate, getSession } from '../../../../Services/Others';
+import { Tables } from '../../../../Components/Tables/Table';
+import { IoEye } from 'react-icons/io5';
+import { DatePicker, Modal } from 'antd';
+import dayjs from 'dayjs';
 import { v4 as uuidv4 } from 'uuid';
-
+import { Buttons, DefaultModal } from '../../../../../ownLib/my-ui-lib';
+import { ArrowRightOutlined } from '@ant-design/icons';
 const CustomerOrders = ({ CustomerDetails, close }) => {
-
   const CompId = getSession('CompId');
   const BranchId = getSession('BranchId');
   const AppId = getSession('AppId');
@@ -22,12 +27,9 @@ const CustomerOrders = ({ CustomerDetails, close }) => {
   const [selectedProducts, setSelectedProducts] = useState();
   const [productModal, setProductModal] = useState(false);
   const [selectedRange, setSelectedRange] = useState([dayjs(), dayjs()]);
-
+  const [stockDetailModel, setStockDetailModel] = useState(false);
-    useEffect(() => {
+  const [StockDetails, setStockDetails] = useState([]);
-        setSelectedRange([dayjs(), dayjs()]);
+  console.log(StockDetails, 'StockDetails');
-        customerFetch();
-    }, []);
-
   useEffect(() => {
     if (selectedRange && selectedRange[0] && selectedRange[1]) {
       customerFetch();
@@ -35,7 +37,8 @@ const CustomerOrders = ({ CustomerDetails, close }) => {
   }, [selectedRange]);
 
   const getApiRange = () => {
-        if (!selectedRange || !selectedRange[0] || !selectedRange[1]) return { fromDate: '', toDate: '' };
+    if (!selectedRange || !selectedRange[0] || !selectedRange[1])
+      return { fromDate: '', toDate: '' };
 
     return {
       fromDate: selectedRange[0].format('YYYY-MM-DD'),
@@ -52,17 +55,14 @@ const CustomerOrders = ({ CustomerDetails, close }) => {
       MobileNo: CustomerDetails?.value,
       FromDate: fromDate,
       ToDate: toDate,
-        }
+    };
     const response = await dispatch(CustomerOrderList(data)).unwrap();
     if (response?.data?.statusCode === 1) {
-            setCustpmerOrderData(response?.data?.data)
+      setCustpmerOrderData(response?.data?.data);
+    } else {
+      setCustpmerOrderData();
     }
-        else {
+  };
-            setCustpmerOrderData()
-        }
-
-    }
-
 
   const ViewProductdetails = (products) => {
     setSelectedProducts(products);
@@ -76,121 +76,198 @@ const CustomerOrders = ({ CustomerDetails, close }) => {
   //     close();
   // };
 
+  // const getProductsearchData = async (prodName) => {
+  //     const data = {
+  //         CompId,
+  //         BranchId,
+  //         AppId,
+  //         ProdName: prodName
+  //     }
+  //     const response = await dispatch(getProductsearch(data)).unwrap();
+  //     console.log(response, 'response23232323');
 
+  // }
+  const getLastBuyQty = (index, variant, prodId) => {
+    const productDetails = custpmerOrderData?.[index]?.productDetails;
+    if (!productDetails) return 0;
 
-    const getProductsearchData = async (prodName) => {
+    let SalesQty = 0;
-        const data = {
+    for (let i = 0; i < productDetails.length; i++) {
-            CompId,
+      const product = productDetails[i];
-            BranchId,
+      if (product?.ProdId === prodId && product?.ProdVariantName === variant) {
-            AppId,
+        SalesQty += product?.SalesQty;
-            ProdName: prodName
       }
-        const response = await dispatch(getProductsearch(data)).unwrap();
-        console.log(response, 'response23232323');
-
     }
 
-    const handleRowDataClick = (record) => {
+    return SalesQty;
-        if (!record?.productDetails?.length) return;
-        const prodName = record.productDetails[0]?.ProdName;
-        getProductsearchData(prodName);
-
-        console.log(record.productDetails[0]?.ProdName, 'record?.productDetails');
-
-        const formattedData = record.productDetails.map((prod) => ({
-            ProdCat: prod.ProdCat,
-            Type: prod.Type,
-
-            OverallQuantity: prod.OverallQuantity ?? 0,
-            ActiveStatus: record.ActiveStatus,
-
-            AvailableFrom: prod.AvailableFrom,
-            AvailableTo: prod.AvailableTo,
-
-            Cess: prod.Cess ?? 0,
-            HSNCode: prod.HSN ?? null,
-
-            BrandName: prod.BrandName ?? null,
-            OpeningQty: prod.OpeningQty ?? 0,
-            PartNumber: prod.PartNumber ?? null,
-
-            ProdId: prod.ProdId,
-            ProdLogo: prod.ProdLogo ?? null,
-            ProdName: prod.ProdName,
-
-            QRCode: prod.QRCode ?? null,
-            QtyBasedPrice: prod.QtyBasedPrice ?? null,
-            Rack: prod.Rack ?? null,
-            Size: prod.Size,
-
-            StockAvailable: prod.StockAvailable ?? null,
-            TokenAvailable: prod.TokenAvailable ?? null,
-
-            TaxId: prod.ProdTaxId ?? null,
-            TaxPercentage: prod.ProdTaxPercentage ?? 0,
-            TaxName: prod.TaxName ?? null,
-
-            UniqueId: prod.UniqueId ?? null,
-            UomName: prod.UomName,
-
-            SinglePc: prod.SinglePc ?? null,
-            NoOfPcs: prod.NoOfPcs ?? 0,
-
-            ProdVariantName: prod.ProdVariantName ?? null,
-            VariantAvailableFrom: prod.VariantAvailableFrom ?? null,
-            VariantAvailableTo: prod.VariantAvailableTo ?? null,
-
-            BalanceQty: prod.BalanceQty ?? 0,
-            BatchRef: prod.BatchRef ?? null,
-
-            FullProductIdentifierDtls: prod.ProductIdentifierDtls ?? [],
-
-            InwardDate: prod.BookingDate ?? null,
-            InwardDtlId: prod.InwardDtlId ?? null,
-            InwardId: prod.InwardId ?? null,
-
-            MRP: prod.MRP ?? 0,
-            OrderRate: prod.Rate ?? 0,
-            SellingPrice: prod.Rate ?? 0,
-
-            SuppId: prod.SuppId ?? null,
-            SuppName: prod.SuppName ?? null,
-
-            OverAllPcs: prod.OverAllPcs ?? 0,
-            Offer: prod.OfferAmt ?? 0,
-
-            BookingTypeName: prod.BookingTypeName ?? null,
-            CounterName: prod.CounterName ?? null,
-
-            DiscountLimitType: prod.DiscountLimitType ?? null,
-            DiscountLimit: prod.DiscountLimit ?? 0,
-
-            BookedDate: prod.BookedDate ?? [],
-            BalanceBookedQty: prod.BalanceBookedQty ?? null,
-
-            ScaleType: prod.ScaleType ?? "",
-
-            localId: prod.localId ?? uuidv4(),
-
-            OrderQty: prod.SalesQty ?? 0,
-            TotalAmt: prod.TotalAmt ?? 0,
-            TaxAmt: prod.TaxAmt ?? 0,
-            WithoutTaxRate: prod.WithoutTaxRate ?? 0,
-        }));
-
-        dispatch(changeOrderCardDetails(formattedData));
-        close();
   };
 
+  const getStockAllocation = (StockDtls, Qty) => {
+    let AllocatedData = [];
+    let RemainngQty = Qty;
+    for (let i = 0; i < StockDtls?.length; i++) {
+      const stock = StockDtls[i];
+      if (RemainngQty <= 0) break;
+      if (stock?.BalanceQty > 0) {
+        const allocQty = Math.min(stock.BalanceQty, RemainngQty);
+        AllocatedData.push({
+          InwardDtlId: stock.InwardDtlId,
+          AllocatedQty: allocQty,
+          MRP: stock?.MRP,
+          SellPrice: stock?.SellPrice,
+          InwardId: stock?.InwardId,
+          BatchRef: stock?.BatchRef,
+          SuppId: stock?.SuppName,
+          SuppName: stock?.SuppName,
+          InwardDate: stock?.InwardDate,
+        });
+        RemainngQty -= allocQty;
+      }
+    }
 
+    return AllocatedData;
+  };
+  const handleRowDataClick = async (record, index) => {
+    if (!record?.productDetails?.length) return;
+    let products = record?.productDetails?.map((e) => ({
+      prodId: e?.ProdId,
+      ProdVariantName: e?.ProdVariantName,
+    }));
+    let Data = {
+      products: products,
+    };
+    let Response = await dispatch(getStockDetailsByVariantName(Data)).unwrap();
+    if (Response?.data?.statusCode == 1) {
+      const result =
+        Response?.data?.data?.flatMap((product) =>
+          product?.ProductDetail?.flatMap((detail) =>
+            detail?.ProdVariantDetails?.flatMap((variant) => {
+              const prevQty = getLastBuyQty(
+                index,
+                variant.ProdVariantName,
+                variant.ProdId
+              );
+
+              const allocations = getStockAllocation(
+                variant?.StockDetails,
+                prevQty
+              );
+
+              const safeAllocations =
+                allocations?.length > 0
+                  ? allocations
+                  : [
+                      {
+                        InwardDtlId: variant?.StockDetails?.[0]?.InwardDtlId,
+                        InwardId: variant?.StockDetails?.[0]?.InwardId,
+                        InwardDate: variant?.StockDetails?.[0]?.InwardDate,
+                        AllocatedQty: prevQty,
+                        SellPrice: variant?.StockDetails?.[0]?.SellPrice ?? 0,
+                        MRP: variant?.StockDetails?.[0]?.MRP ?? 0,
+                        OrderRate: variant?.StockDetails?.[0]?.SellPrice ?? 0,
+                        TotalAmt:
+                          (prevQty ?? 0) *
+                          (variant?.StockDetails?.[0]?.SellPrice ?? 0),
+                        BatchRef: null,
+                        SuppId: null,
+                        SuppName: null,
+                      },
+                    ];
+
+              return safeAllocations.map((allocation) => ({
+                ...variant,
+
+                // ===== PRODUCT LEVEL =====
+                ProdId: detail.ProdId,
+                ProdName: detail.ProdName,
+                ProdCat: product.ProdCat,
+                BrandName: detail.BrandName ?? null,
+
+                // ===== VARIANT / STOCK =====
+                PreviousPurchasedQty: prevQty,
+                available:
+                  detail?.StockAvailable === 'N'
+                    ? true
+                    : (variant.OverAllQty ?? 0) >= prevQty,
+                InwardDtlId: allocation.InwardDtlId,
+                InwardId: allocation.InwardId,
+                OrderQty: allocation.AllocatedQty,
+                InwardDate: allocation.InwardDate,
+
+                TotalAmt:
+                  (allocation.AllocatedQty ?? 0) * (allocation.SellPrice ?? 0),
+
+                BalanceQty: detail.BalanceQty ?? 0,
+                BatchRef: allocation.BatchRef,
+
+                // ===== PRICE =====
+                MRP: allocation.MRP ?? 0,
+                OrderRate: allocation.SellPrice ?? 0,
+                SellingPrice: allocation.SellPrice ?? 0,
+
+                // ===== TAX =====
+                TaxId: detail.TaxId ?? null,
+                TaxPercentage: detail.TaxPercentage ?? 0,
+                TaxAmt: detail.TaxAmt ?? 0,
+                TaxName: detail.TaxName,
+                WithoutTaxRate: detail.WithoutTaxRate ?? 0,
+
+                // ===== OTHERS =====
+                SinglePc: 'N',
+                Size: detail.Size,
+                StockAvailable: detail.StockAvailable,
+                PartNumber: detail.PartNumber,
+                SuppId: allocation.SuppId,
+                SuppName: allocation.SuppName,
+                QRCode: detail.QRCode,
+                QtyBasedPrice: detail.QtyBasedPrice,
+                HSNCode: detail.HSNCode ?? null,
+                Rack: detail.Rack ?? null,
+
+                BookingTypeName: 'TakeAway',
+                ActiveStatus: 'A',
+                ModelNumber: null,
+                NoOfPcs: 0,
+                Offer: 0,
+                OpeningQty: 0,
+                FullProductIdentifierDtls: [],
+                CounterName: product.CounterName,
+                Type: 'P',
+
+                // ===== META =====
+                UniqueId: detail.UniqueId,
+                UomName: detail.UomName,
+                ScaleType: detail.ScaleType ?? '',
+                TokenAvailable: detail.TokenAvailable,
+                localId: uuidv4(),
+              }));
+            })
+          )
+        ) ?? [];
+
+      setStockDetails(result);
+      setpage(1);
+      setStockDetailModel(true);
+    }
+
+    // close();
+  };
+
+  const handleSave = () => {
+    let Data = StockDetails?.filter((e) => e?.available == true)?.map(
+      ({ stockDetails, available, PreviousPurchasedQty, ...rest }) => rest
+    );
+    dispatch(changeOrderCardDetails(Data));
+    close();
+  };
   const columns = [
     {
       title: 'Sl.No',
       key: 'sno',
       align: 'center',
       render: (_, __, index) => (page - 1) * 10 + index + 1,
-            onCell: (record) => ({
+      onCell: (record, index) => ({
-                onClick: () => handleRowDataClick(record),
+        onClick: () => handleRowDataClick(record, index),
         style: { cursor: 'pointer' },
       }),
     },
@@ -200,8 +277,8 @@ const CustomerOrders = ({ CustomerDetails, close }) => {
       key: 'SalesDate',
       align: 'center',
       render: (text) => ExtractDateFormate(text),
-            onCell: (record) => ({
+      onCell: (record, index) => ({
-                onClick: () => handleRowDataClick(record),
+        onClick: () => handleRowDataClick(record, index),
         style: { cursor: 'pointer' },
       }),
     },
@@ -210,8 +287,8 @@ const CustomerOrders = ({ CustomerDetails, close }) => {
       dataIndex: 'NetAmount',
       key: 'NetAmount',
       align: 'center',
-            onCell: (record) => ({
+      onCell: (record, index) => ({
-                onClick: () => handleRowDataClick(record),
+        onClick: () => handleRowDataClick(record, index),
         style: { cursor: 'pointer' },
       }),
     },
@@ -233,6 +310,49 @@ const CustomerOrders = ({ CustomerDetails, close }) => {
       ),
     },
   ];
+  const stockcolumns = [
+    {
+      title: 'Sl.No',
+      key: 'sno',
+      align: 'center',
+      render: (_, __, index) => (page - 1) * 10 + index + 1,
+    },
+    {
+      title: 'Product',
+      key: 'ProdName',
+      dataIndex: 'ProdName',
+      align: 'center',
+    },
+    {
+      title: 'Variant',
+      key: 'ProdVariantName',
+      dataIndex: 'ProdVariantName',
+      align: 'center',
+    },
+
+    {
+      title: 'Purchased Qty',
+      key: 'PreviousPurchasedQty',
+      dataIndex: 'PreviousPurchasedQty',
+      align: 'center',
+    },
+    {
+      title: 'Total Qty',
+      key: 'OverAllQty',
+      dataIndex: 'OverAllQty',
+      align: 'center',
+      render: (value, record) =>
+        record?.StockAvailable == 'N' ? '-' : record?.OverAllQty,
+    },
+
+    {
+      title: 'available',
+      key: 'available',
+      dataIndex: 'available',
+      align: 'center',
+      render: (value) => (value ? 'Yes' : 'No'),
+    },
+  ];
 
   const productColumns = [
     {
@@ -254,29 +374,25 @@ const CustomerOrders = ({ CustomerDetails, close }) => {
       dataIndex: 'SalesQty',
       key: 'SalesQty',
       align: 'center',
-            render: (_, record) =>
+      render: (_, record) => record?.SalesQty || '-',
-                record?.SalesQty || '-',
     },
     {
       title: 'Variant',
       key: 'ProdVariantName',
       align: 'ProdVariantName',
-            render: (_, record) =>
+      render: (_, record) => record?.ProdVariantName || '-',
-                record?.ProdVariantName || '-',
     },
     {
       title: 'Rate',
       key: 'Rate',
       align: 'right',
-            render: (_, record) =>
+      render: (_, record) => record?.Rate || 0,
-                record?.Rate || 0,
     },
     {
       title: 'MRP',
       key: 'MRP',
       align: 'right',
-            render: (_, record) =>
+      render: (_, record) => record?.MRP || 0,
-                record?.MRP || 0,
     },
   ];
 
@@ -288,7 +404,6 @@ const CustomerOrders = ({ CustomerDetails, close }) => {
   };
   const getRangePickerValue = () => selectedRange || [dayjs(), dayjs()];
 
-
   return (
     <>
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
@@ -296,7 +411,7 @@ const CustomerOrders = ({ CustomerDetails, close }) => {
           <p>Customer Name : {CustomerDetails?.CustName}</p>
           <p>Customer Name : {CustomerDetails?.value}</p>
         </div>
-                <div className='fromlabelDate'>
+        <div className="fromlabelDate">
           <label>Select Date</label>
           <RangePicker
             onChange={onRangeChange}
@@ -315,8 +430,6 @@ const CustomerOrders = ({ CustomerDetails, close }) => {
           dataSource={custpmerOrderData}
           pagination={handlePageChange}
         />{' '}
-
-
         <Modal
           open={productModal}
           title="Product Details"
@@ -330,10 +443,39 @@ const CustomerOrders = ({ CustomerDetails, close }) => {
             pagination={false}
           />
         </Modal>
-
       </div>
+
+      <DefaultModal
+        open={stockDetailModel}
+        title="Stock Details"
+        handleCancel={() => {
+          setStockDetailModel(false);
+          setStockDetails([]);
+        }}
+        footer={false}
+        width={700}
+        children={
+          <div>
+            <Tables
+              columns={stockcolumns}
+              data={StockDetails}
+              pagination={handlePageChange}
+            />{' '}
+            <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
+              <Buttons
+                buttonText="SUBMIT"
+                color="901D77"
+                icon={<ArrowRightOutlined />}
+                handleSubmit={() => {
+                  handleSave();
+                }}
+              />
+            </div>
+          </div>
+        }
+      />
     </>
-    )
+  );
-}
+};
 
 export default CustomerOrders;

src/Pages/BookingScreen/Components/MainPage/SelectionComponent.jsx

@@ -2278,6 +2278,7 @@ const SelectionComponent = forwardRef((props, ref) => {
       });
   };
   const validateFontsTable = async (values) => {
+    console.log(values,"table font")
     const apiUrl = `https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDP1HqNkLI53iIAH-SB9_mt_24QdkUZ_24`;
     fetch(apiUrl)
       .then((response) => response.json())
@@ -4982,6 +4983,8 @@ const SelectionComponent = forwardRef((props, ref) => {
                             className="plusOutlinedIcon"
 
                           />
+                          
+                        </div>
                         <DefaultModal
                             open={TableModelopen}
                             title="Fonts"
@@ -5027,7 +5030,6 @@ const SelectionComponent = forwardRef((props, ref) => {
                             buttonText="SAVE"
                           />
                       </div>
-                      </div>
                       {SelectedBillTableCheckValues?.filter(
                         (item) =>
                           item ==

src/Pages/BookingScreen/Components/PrintMainPage/PrinterSelection.jsx

@@ -12,6 +12,7 @@ import { DropDowns } from "../../../../Components/Forms/DropDown";
 import { Switch } from "antd";
 import { useSelector } from "react-redux";
 import KioskPrinterSelection from "./KioskPrinterSelection";
+import { GlobalFeatAddOnData } from "../../../../Features/BookingScreen/BookingData/BookingData";
 
 const PrinterSelection = (props) => {
   const CompId = getSession("CompId");
@@ -28,6 +29,7 @@ const PrinterSelection = (props) => {
   const [activePrinterId, setActivePrinterId] = useState(null);
   const [initialPrinters, setInitialPrinters] = useState([]);
   const PrinterDetails = useSelector(GlobalPrinterMappingDtls);
+  const FeatureAddonData = useSelector(GlobalFeatAddOnData);
   const  [MyPrinter, setMyPrinter] = useState(true);
   const [MyKioskPrinter, setMyKioskPrinter] = useState(false);
   const { onClose } = props;
@@ -314,6 +316,10 @@ const PrinterSelection = (props) => {
             {/* <HiOutlineSquares2X2 size={16} /> */}
           My Printer
           </div>
+          {FeatureAddonData?.FeatureDtls?.find(
+                (item) =>
+                  item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+              ) && 
             <div
               className={MyKioskPrinter ? 'selected' : ''}
                onClick={openKioskPrinter}
@@ -321,6 +327,7 @@ const PrinterSelection = (props) => {
               {/* <HiSquaresPlus size={16} /> */}
                Kiosk Printer
             </div>
+          }
         </div>
        
                             

src/Pages/BookingScreen/Components/PrintMainPage/SelectionComponent.jsx

@@ -68,6 +68,7 @@ import {
   changeSelectedLogo,
   changeSelectedCredit,
   changeSelectedTax,
+  changeSelectedHeaderColor,
 } from '../../../../Features/ThemeChange/ThemeChange';
 import '../../../../Styles/BookingScreen/Components/SelectionComponent/SelectionComponent.scss';
 import { useAuth } from '../../../../AuthContext.jsx';
@@ -732,6 +733,13 @@ const SelectionComponent = forwardRef((props, ref) => {
     )
       ? dispatch(changeNotes(true))
       : dispatch(changeNotes(false));
+
+    checkedValues?.includes(
+      sizeCheckList.find((item) => item.ConfigName === 'Header Colour')
+        ?.ConfigId
+    )
+      ? setisheadercolour(true)
+      : setisheadercolour(false);
   };
 
   const handleOptions = async () => {
@@ -1278,12 +1286,7 @@ const SelectionComponent = forwardRef((props, ref) => {
             >
               <Row>
                 {sizeCheckList
-                  ?.filter(
+                  ?.filter((item) => item.ConfigName)
-                    (item) =>
-                      item.ConfigName &&
-                      (SelectedStyleName == 'TaxInvoice' ||
-                        item.ConfigName != 'Header Colour')
-                  )
                   ?.map((value, key) => (
                     <Checkbox
                       style={{ padding: '12px' }}
@@ -1383,14 +1386,18 @@ const SelectionComponent = forwardRef((props, ref) => {
                 </Modal>
               </div>
             )}
-            {isheadercolour && SelectedStyleName == 'TaxInvoice' && (
+            {isheadercolour && (
+              // {isheadercolour && SelectedStyleName == 'TaxInvoice' && (
               <div style={{ marginTop: '1rem' }}>
                 <Title level={5} style={{ marginBottom: 12 }}>
                   Header Color
                 </Title>
                 <ColorPicker
                   value={selectedColour}
-                  onChange={setSelectedColour}
+                  onChange={(color) => {
+                    setSelectedColour(color);
+                    dispatch(changeSelectedHeaderColor(color));
+                  }}
                   placeholder="Select color"
                 />
               </div>

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

@@ -1,19 +1,21 @@
-import { useState } from "react";
+import { useState } from 'react';
-import { IoMdSettings } from "react-icons/io";
+import { IoMdAdd, IoMdSettings } from 'react-icons/io';
-import { DefaultModal } from "../../../../Components/Modal/DefaultModal";
+import { DefaultModal } from '../../../../Components/Modal/DefaultModal';
-import TooltipWrapper from "../../../../Components/Tooltip/Tooltip";
+import TooltipWrapper from '../../../../Components/Tooltip/Tooltip';
+import './AllSalesPageSettings.scss';
+import TableHeadersetting from './TableHeadersetting';
+import PaymentOptions from '../../../Payment/PaymentOptions/PaymentOptions';
 
 const AllSalesPageSettings = () => {
-        const [settingModal,setsettingModal] = useState(false)
+  const [settingModal, setsettingModal] = useState(false);
-        const [checkboxItems, setCheckboxItems] = useState([
+  const [selectedComponent, setselectedComponent] = useState('Payment');
-            { id: 'item1', label: 'Show Details', checked: true },
+
-            { id: 'item2', label: 'Auto Refresh', checked: false },
-            { id: 'item3', label: 'Notifications', checked: true }
-        ])
-        console.log(settingModal,"settingModal")
   const onclose = () => {
-        setsettingModal(false)
+    setsettingModal(false);
-    }
+  };
+  const ComponentSelect = (value) => {
+    setselectedComponent(value);
+  };
   return (
     <>
       <TooltipWrapper>
@@ -26,11 +28,11 @@ const AllSalesPageSettings = () => {
             gap: '5px',
             padding: '5px 10px',
             borderRadius: '4px',
-            
             fontSize: '14px',
+            backgroundColor: '#f0f0f0',
           }}
         >
-             <IoMdSettings />  
+          <IoMdSettings size={16} />
         </div>
       </TooltipWrapper>
 
@@ -38,31 +40,39 @@ const AllSalesPageSettings = () => {
         open={settingModal}
         footer={false}
         handleCancel={onclose}
-              
+        title={'Settings'}
-                title={"Settings"} width={500}>
+        width={850}
-                <div style={{ padding: '20px' }}>
+      >
-                    {checkboxItems.map(item => (
+        <div className="AllSalesPageSettingsMainDiv">
-                        <div key={item.id} style={{ marginBottom: '10px' }}>
+          <div className="SettingsListSwitchBTN">
-                            <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
+            <div
-                                <input
+              className={selectedComponent === 'Payment' ? 'selected' : ''}
-                                    type="checkbox"
+              onClick={() => ComponentSelect('Payment')}
-                                    checked={item.checked}
+            >
-                                    onChange={(e) => {
+              Payment Option
-                                        setCheckboxItems(prev => 
+            </div>
-                                            prev.map(i => 
+            <div
-                                                i.id === item.id ? { ...i, checked: e.target.checked } : i
+              className={selectedComponent === 'Table' ? 'selected' : ''}
-                                            )
+              onClick={() => ComponentSelect('Table')}
-                                        )
+            >
-                                    }}
+              Table
-                                />
+            </div>
-                                {item.label}
+          </div>
-                            </label>
+          <div className="SettingsComponentDiv">
+            {selectedComponent == 'Payment' && (
+              <div>
+                <PaymentOptions setModalOpen={setsettingModal}/>
+              </div>
+            )}
+
+            {selectedComponent === 'Table' && (
+              <TableHeadersetting setModalOpen={setsettingModal} />
+            )}
           </div>
-                    ))}
         </div>
       </DefaultModal>
     </>
-    )
+  );
-}
+};
 
 export default AllSalesPageSettings;

src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss

@@ -0,0 +1,184 @@
+// /// Another  swtich button style code
+
+// .SettingsListSwitchBTN {
+//   display: inline-flex;
+//   gap: 16px;
+//   font-family: "Poppins";
+//   margin-bottom: 12px;
+//   border-bottom: 1px solid #d1d5db;
+// }
+
+// .SettingsListSwitchBTN > div {
+//   font-size: 22px;
+//   font-weight: 600;
+//   cursor: pointer;
+//   color: #6b7280;
+//   display: flex;
+//   align-items: center;
+//   gap: 6px;
+//   position: relative;
+//   border: none;
+//   background: transparent;
+//   font-family: "Gilroy";
+//   transition: color 0.2s ease;
+//   @media (max-width: 600px) {
+//     font-size: 18px;
+//   }
+// }
+
+// .SettingsListSwitchBTN > div:hover {
+//   color: #0f172a;
+// }
+
+// .SettingsSwitchBTN > div.selected {
+//   color: #0f172a;
+// }
+
+// .SettingsListSwitchBTN > div.selected::after {
+//   content: "";
+//   position: absolute;
+//   left: 0;
+//   bottom: -1px;
+//   width: 100%;
+//   height: 2px;
+//   background: #2c88ee;
+//   border-radius: 2px;
+// }
+
+// .SettingsListSwitchBTN > div.selected svg {
+//   color: #4765db !important;
+// }
+
+// // End
+// .settingsales-DropDown-Selection {
+//   width: 150px !important;
+// }
+// .settingaddNewSalesFiledBTN {
+//   background-color: #2563eb;
+//   // background-color: #1292ee;
+//   color: #fff !important;
+//   width: max-content;
+//   height: max-content;
+//   padding: 4px 8px;
+//   font-size: 13px;
+//   font-weight: 400;
+//   display: flex;
+//   align-items: center;
+//   gap: 4px;
+//   cursor: pointer;
+//   border-radius: 6px;
+//   svg {
+//     color: #fff !important;
+//     font-weight: 500;
+//     display: flex;
+//     font-size: 16px;
+//   }
+// }
+
+.AllSalesPageSettingsMainDiv {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  font-family: "Poppins", sans-serif;
+  justify-content: flex-start;
+}
+
+.SettingsComponentDiv {
+  height: max-content;
+  max-height: 80vh;
+  width: 100%;
+  scrollbar-width: thin;
+  padding-right: 10px;
+  overflow: auto;
+  .option-maindiv {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+  .ant-checkbox-wrapper {
+    padding: 8px !important;
+  }
+}
+
+.SettingsListSwitchBTN {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  gap: 6px;
+  width: 210px;
+  height: 100%;
+  overflow: auto;
+  background-color: #d8e5ff;
+  padding: 5px;
+  border-radius: 4px;
+  height: 80vh;
+  div {
+    width: 100%;
+    background-color: #fff;
+    outline: none;
+    border: none;
+    font-family: "Poppins", sans-serif;
+    padding: 8px 6px;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s ease-in-out;
+    font-size: 14px;
+    font-weight: 400;
+
+    &:hover {
+      background-color: #d1d8ec;
+    }
+    &.selected {
+      background-color: #ffffff;
+      color: #2563eb;
+      font-weight: 500;
+      border-right: 3px solid #2563eb;
+    }
+  }
+}
+
+.settingaddNewSalesFiledBTN {
+  background-color: #2563eb;
+  // background-color: #1292ee;
+  color: #fff !important;
+  width: max-content;
+  height: max-content;
+  padding: 4px 8px;
+  font-size: 13px;
+  font-weight: 400;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  border-radius: 6px;
+  svg {
+    color: #fff !important;
+    font-weight: 500;
+    display: flex;
+    font-size: 16px;
+  }
+}
+
+// Table Header Setting CSS start here|||
+
+.SelectionComponentSubHeading {
+  color: #333;
+  font-size: 12px;
+  font-weight: 500;
+  font-family: "Poppins", sans-serif;
+}
+
+.selctfontBackInputMain {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+.selctfontBackInput {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}

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

@@ -1,17 +1,18 @@
 import React, { useEffect, useState } from "react";
 import { getSession } from "../../../../Services/Others";
 import { useDispatch } from "react-redux";
-import { getmultipleSearch, PostProductSearch } from "../../../../Features/BookingScreen/BookingData/BookingData";
+import {
+  getmultipleSearch,
+  PostProductSearch,
+} from "../../../../Features/BookingScreen/BookingData/BookingData";
 import Buttons from "../../../../Components/Forms/Buttons";
 
-
 const MultipleSearch = ({ close }) => {
   const CompId = getSession("CompId");
   const BranchId = getSession("BranchId");
   const AppId = getSession("AppId");
   const dispatch = useDispatch();
 
-
   const options = [
     { label: "Product Name", value: "ProdName" },
     { label: "Product Variant Name", value: "ProdVariantName" },
@@ -24,15 +25,13 @@ const MultipleSearch = ({ close }) => {
     { label: "Brand Name", value: "BrandName" },
   ];
 
-
   const [selectedValues, setSelectedValues] = useState([]);
-    console.log(selectedValues, 'selectedValuesselectedValues');
+  console.log(selectedValues, "selectedValuesselectedValues");
 
   useEffect(() => {
     GetmultipleSearchData();
   }, []);
 
-
   const postMultipleSearch = async () => {
     if (selectedValues.length === 0) {
       alert("Please select at least one option!");
@@ -48,7 +47,7 @@ const MultipleSearch = ({ close }) => {
       const response = await dispatch(PostProductSearch(data)).unwrap();
       console.log("Search Response:", response);
       if (response?.data?.statusCode == 1) {
-                setSelectedValues('')
+        setSelectedValues("");
         close(false);
       }
     } catch (error) {
@@ -56,7 +55,6 @@ const MultipleSearch = ({ close }) => {
     }
   };
 
-
   const GetmultipleSearchData = async () => {
     const data = {
       AppId,
@@ -68,8 +66,9 @@ const MultipleSearch = ({ close }) => {
       const response = await dispatch(getmultipleSearch(data)).unwrap();
 
       if (response?.data?.statusCode === 1) {
-                const selected = response?.data?.data?.[0]?.SearchTermDtl?.map(
+        const selected =
-                    (item) => item?.SearchTerm
+          response?.data?.data?.[0]?.SearchTermDtl?.map(
+            (item) => item?.SearchTerm,
           ) || [];
 
         setSelectedValues(selected);
@@ -81,7 +80,9 @@ const MultipleSearch = ({ close }) => {
 
   return (
     <>
-            <div>
+      <div
+        style={{ fontFamily: "Poppins", fontWeight: "500", marginTop: "10px" }}
+      >
         {options.map((item) => (
           <label
             key={item.value}
@@ -91,6 +92,7 @@ const MultipleSearch = ({ close }) => {
               cursor: "pointer",
               fontSize: "14px",
               color: "#333",
+              margin: "6px 0",
             }}
           >
             <input
@@ -100,7 +102,7 @@ const MultipleSearch = ({ close }) => {
                 setSelectedValues((prev) =>
                   prev.includes(item.value)
                     ? prev.filter((i) => i !== item.value)
-                                        : [...prev, item.value]
+                    : [...prev, item.value],
                 );
               }}
               style={{ marginRight: "8px" }}
@@ -108,17 +110,14 @@ const MultipleSearch = ({ close }) => {
             {item.label}
           </label>
         ))}
-
       </div>
-            <div>
+      <div style={{ display: "flex", width: "100%", marginTop: "2rem" }}>
         <Buttons
-                    buttonText={'Submit'}
+          buttonText={"Submit"}
           handleSubmit={postMultipleSearch}
           color="901D77" 
-                // icon={<PlusOutlined />}
         />
       </div>
-
     </>
   );
 };

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

@@ -1,18 +1,32 @@
-import { shallowEqual, useSelector } from "react-redux";
+import { shallowEqual, useSelector } from 'react-redux';
-import { GlobalAccessForOthers, GlobalCardAccess, GlobalCombosearch, GlobalItemCard, GlobalProductCategorie, GlobalSelectedDatas, GlobalWithoutSubCatItemCard, triggerProductCard } from "../../../../Features/BookingScreen/BookingData/BookingData";
+import {
-import { DefaultModal } from "../../../../Components/Modal/DefaultModal";
+  GlobalAccessForOthers,
-import { useCallback, useEffect, useRef, useState } from "react";
+  GlobalCardAccess,
-import { Tables } from "../../../../Components/Tables/Table";
+  GlobalCombosearch,
-import { InputField } from "../../../../Components/Forms/InputField";
+  GlobalItemCard,
-import { Form, Pagination, Tooltip } from "antd";
+  GlobalProductCategorie,
-import { getSession } from "../../../../Services/Others";
+  GlobalSelectedDatas,
-import { Messages } from "../../../../Components/Notifications/Messages";
+  GlobalWithoutSubCatItemCard,
-import { useDispatch } from "react-redux";
+  triggerProductCard,
-import { PutStockPrice } from "../../../../Features/StockPriceUpdate/StockPriceUpdateMaster";
+} from '../../../../Features/BookingScreen/BookingData/BookingData';
-import PriceChange from "../../../../Images/PayOptImgs/PriceChange.svg"
+import { DefaultModal } from '../../../../Components/Modal/DefaultModal';
-
+import { useCallback, useEffect, useRef, useState } from 'react';
-const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, productPriceChange = false, setProductPriceChange = () => { }, setPriceChangeProduct = () => { } }) => {
+import { Tables } from '../../../../Components/Tables/Table';
+import { InputField } from '../../../../Components/Forms/InputField';
+import { Form, Pagination, Tooltip } from 'antd';
+import { getSession } from '../../../../Services/Others';
+import { Messages } from '../../../../Components/Notifications/Messages';
+import { useDispatch } from 'react-redux';
+import { PutStockPrice } from '../../../../Features/StockPriceUpdate/StockPriceUpdateMaster';
+import PriceChange from '../../../../Images/PayOptImgs/PriceChange.svg';
 
+const ProductPriceChange = ({
+  showButton = true,
+  priceChangeProduct = [],
+  productPriceChange = false,
+  setProductPriceChange = () => {},
+  setPriceChangeProduct = () => {},
+}) => {
   const formRef = useRef(null);
   const dispatch = useDispatch();
 
@@ -32,20 +46,32 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
   const comboSearch = useSelector(GlobalCombosearch);
   const ProdCat = useSelector(GlobalProductCategorie, shallowEqual);
   const ItemCard = useSelector(GlobalItemCard, shallowEqual);
-    const withoutSubCatItemCard = useSelector(GlobalWithoutSubCatItemCard, shallowEqual);
+  const withoutSubCatItemCard = useSelector(
+    GlobalWithoutSubCatItemCard,
+    shallowEqual
+  );
   const CardAccess = useSelector(GlobalCardAccess, shallowEqual);
-    const globalAccessForOthers = useSelector(GlobalAccessForOthers, shallowEqual);
+  const globalAccessForOthers = useSelector(
+    GlobalAccessForOthers,
+    shallowEqual
+  );
   const SelectedDatas = useSelector(GlobalSelectedDatas, shallowEqual);
   const [tableData, setTableData] = useState([]);
   const [editingKey, setEditingKey] = useState(null);
   const [priceChangedProducts, setPriceChangedProducts] = useState([]);
-    console.log(comboSearch, "comboSearch")
+  console.log(comboSearch, 'comboSearch');
 
   // console.log(noSubcatCardData, "noSubcatCardData")
 
   useEffect(() => {
-        if (ProdCat && (ItemCard || withoutSubCatItemCard) && (!noSubcatCardData || noSubcatCardData?.length === 0)) {
+    if (
-            setNoSubcatCardData(ItemCard?.length === 0 ? withoutSubCatItemCard : ItemCard);
+      ProdCat &&
+      (ItemCard || withoutSubCatItemCard) &&
+      (!noSubcatCardData || noSubcatCardData?.length === 0)
+    ) {
+      setNoSubcatCardData(
+        ItemCard?.length === 0 ? withoutSubCatItemCard : ItemCard
+      );
     }
   }, [ProdCat, ItemCard, withoutSubCatItemCard, noSubcatCardData]);
 
@@ -56,7 +82,9 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
       key: 'SlNo',
       width: '60px',
       align: 'center',
-            render: (text, record, index) => <div>{(currentPage - 1) * pageSize + index + 1}</div>
+      render: (text, record, index) => (
+        <div>{(currentPage - 1) * pageSize + index + 1}</div>
+      ),
     },
     {
       title: 'Product Name',
@@ -90,22 +118,20 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
                   if (value === '') {
                     return Promise.resolve();
                   } else if (parseFloat(value) < 1) {
-                                        return Promise.reject(`MRP should be greater than 0`)
+                    return Promise.reject(`MRP should be greater than 0`);
                   }
                   return Promise.resolve();
                 },
               },
-                        ]}>
+            ]}
+          >
             <InputField
               value={text}
               placeholder="Enter New MRP"
               onChange={(e) => handleNewMRPChange(e?.target?.value, index)}
               inputMode="decimal"
               onInput={(e) => {
-                                let cleanedValue = e.target.value.replace(
+                let cleanedValue = e.target.value.replace(/[^0-9.]/g, ''); // Remove invalid characters
-                                    /[^0-9.]/g,
-                                    ''
-                                ); // Remove invalid characters
                 const parts = cleanedValue.split('.');
 
                 if (cleanedValue.startsWith('.')) {
@@ -149,7 +175,9 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
                   if (value === '') {
                     return Promise.resolve();
                   } else if (parseFloat(value) < 1) {
-                                        return Promise.reject(`Sell Price should be greater than 0`)
+                    return Promise.reject(
+                      `Sell Price should be greater than 0`
+                    );
                   }
                   return Promise.resolve();
                 },
@@ -159,13 +187,12 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
             <InputField
               value={text}
               placeholder="Enter New Sell Price"
-                            onChange={(e) => handleNewSellPriceChange(e?.target?.value, index)}
+              onChange={(e) =>
+                handleNewSellPriceChange(e?.target?.value, index)
+              }
               inputMode="decimal"
               onInput={(e) => {
-                                let cleanedValue = e.target.value.replace(
+                let cleanedValue = e.target.value.replace(/[^0-9.]/g, ''); // Remove invalid characters
-                                    /[^0-9.]/g,
-                                    ''
-                                ); // Remove invalid characters
                 const parts = cleanedValue.split('.');
 
                 if (cleanedValue.startsWith('.')) {
@@ -191,49 +218,58 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
         : SelectedDatas?.[0]?.AppId === 0 && SelectedDatas?.[0]?.CompId === 0
           ? []
           : SelectedDatas
-            : ItemCard?.length === 0 || (ItemCard?.[0]?.AppId === 0 && ItemCard?.[0]?.CompId === 0)
+      : ItemCard?.length === 0 ||
+          (ItemCard?.[0]?.AppId === 0 && ItemCard?.[0]?.CompId === 0)
         ? noSubcatCardData
         : ItemCard
-        : '';
+    : [];
 
-    console.log(cardData, "noSubcatCardDatanoSubcatCardData", ItemCard)
+  console.log(cardData, 'noSubcatCardDatanoSubcatCardData', ItemCard);
 
   useEffect(() => {
+   if (priceChangeModal || productPriceChange) {
     const extractStockDtls = (data) => {
-            if (data?.length === 0) return [];
+      if (data?.length === 0 || !data) return [];
 
       let stockDtls = []; 
 
-            data?.forEach(item => {
+      data?.forEach((item) => {
-                let products = item?.ProductDetail?.flatMap(product => product);
+        let products = item?.ProductDetail?.flatMap((product) => product);
 
-                let variants = products?.flatMap(product => product?.ProdVariantDetails);
+        let variants = products?.flatMap(
-                const filteredVariants = variants?.filter(variant => variant?.StockDetails?.length > 0);
+          (product) => product?.ProdVariantDetails
-                const stocks = filteredVariants?.flatMap(variant =>
+        );
-                    variant?.StockDetails?.map(stock => ({
+        const filteredVariants = variants?.filter(
+          (variant) => variant?.StockDetails?.length > 0
+        );
+        const stocks = filteredVariants?.flatMap((variant) =>
+          variant?.StockDetails?.map((stock) => ({
             ...stock,
-                        ProdName: products?.[0]?.ProdName + (variant?.ProdVariantName ? ` (${variant?.ProdVariantName})` : ''),
+            ProdName:
+              products?.[0]?.ProdName +
+              (variant?.ProdVariantName
+                ? ` (${variant?.ProdVariantName})`
+                : ''),
             StockAvailable: products?.[0]?.StockAvailable,
-                        ProdVariantName: variant?.ProdVariantName
+            ProdVariantName: variant?.ProdVariantName,
           }))
         );
 
-                stockDtls.push(...stocks?.filter(stock =>
+        stockDtls.push(
-                    stock?.StockAvailable === 'Y'
+          ...stocks?.filter((stock) =>
-                        ? stock?.BatchRef
+            stock?.StockAvailable === 'Y' ? stock?.BatchRef : true
-                        : true
+          )
-                ));
+        );
-
       });
-            console.log("extractStockDtls", stockDtls);
+      console.log('extractStockDtls', stockDtls);
       return stockDtls;
+    };
+    setTableData(extractStockDtls(priceChangeProduct || cardData || []));
+    setCurrentPage(1);
     }
-        setTableData(extractStockDtls(priceChangeProduct || cardData))
+  }, [cardData, priceChangeProduct, priceChangeModal, productPriceChange]);
-        setCurrentPage(1)
-    }, [cardData, priceChangeProduct])
 
   const handleNewMRPChange = (value, index) => {
-
     const updatedTableData = [...tableData];
     updatedTableData[index].NewMRP = value;
     setTableData(updatedTableData);
@@ -244,7 +280,9 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
     });
 
     const priceChangedProdList = [...priceChangedProducts];
-        const prodIndex = priceChangedProdList?.findIndex(prod => prod?.InwardDtlId === updatedTableData[index]?.InwardDtlId);
+    const prodIndex = priceChangedProdList?.findIndex(
+      (prod) => prod?.InwardDtlId === updatedTableData[index]?.InwardDtlId
+    );
     if (prodIndex !== -1) {
       priceChangedProdList[prodIndex] = {
         ...priceChangedProdList?.[prodIndex],
@@ -253,7 +291,7 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
       };
     }
     setPriceChangedProducts(priceChangedProdList);
-    }
+  };
 
   const handleNewSellPriceChange = (value, index) => {
     const updatedTableData = [...tableData];
@@ -267,7 +305,9 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
         updatedTableData[index].NewSellPrice = null;
         setTableData(updatedTableData);
         const priceChangedProdList = [...priceChangedProducts];
-                const prodIndex = priceChangedProdList?.findIndex(prod => prod?.InwardDtlId === updatedTableData[index]?.InwardDtlId);
+        const prodIndex = priceChangedProdList?.findIndex(
+          (prod) => prod?.InwardDtlId === updatedTableData[index]?.InwardDtlId
+        );
 
         if (prodIndex !== -1) {
           priceChangedProdList.splice(prodIndex, 1);
@@ -286,7 +326,9 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
         updatedTableData[index].NewSellPrice = null;
         setTableData(updatedTableData);
         const priceChangedProdList = [...priceChangedProducts];
-                const prodIndex = priceChangedProdList?.findIndex(prod => prod?.InwardDtlId === updatedTableData[index]?.InwardDtlId);
+        const prodIndex = priceChangedProdList?.findIndex(
+          (prod) => prod?.InwardDtlId === updatedTableData[index]?.InwardDtlId
+        );
 
         if (prodIndex !== -1) {
           priceChangedProdList.splice(prodIndex, 1);
@@ -302,41 +344,47 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
     });
 
     const priceChangedProdList = [...priceChangedProducts];
-        const prodIndex = priceChangedProdList?.findIndex(prod => prod?.InwardDtlId === updatedTableData[index]?.InwardDtlId);
+    const prodIndex = priceChangedProdList?.findIndex(
+      (prod) => prod?.InwardDtlId === updatedTableData[index]?.InwardDtlId
+    );
 
     if (prodIndex !== -1) {
       priceChangedProdList[prodIndex] = {
         ...priceChangedProdList[prodIndex],
-                SellPrice: String(value)
+        SellPrice: String(value),
       };
     } else {
       priceChangedProdList.push({
         ProdId: updatedTableData[index]?.ProdId,
         ProdName: updatedTableData[index]?.ProdName,
-                MRP: String(updatedTableData[index]?.NewMRP || updatedTableData[index]?.MRP),
+        MRP: String(
+          updatedTableData[index]?.NewMRP || updatedTableData[index]?.MRP
+        ),
         SellPrice: String(value),
-                AdjComment: "string",
+        AdjComment: 'string',
-                InwardDtlId: updatedTableData[index]?.InwardDtlId
+        InwardDtlId: updatedTableData[index]?.InwardDtlId,
       });
     }
 
     setPriceChangedProducts(priceChangedProdList);
-    }
+  };
 
   const edit = (record, index) => {
-        console.log("edit", record, index);
+    console.log('edit', record, index);
     setEditingKey(index);
-    }
+  };
 
   const handleSubmit = async () => {
-        console.log("submit");
+    console.log('submit');
 
     if (priceChangedProducts?.length > 0) {
-            console.log("priceChangedProducts", priceChangedProducts);
+      console.log('priceChangedProducts', priceChangedProducts);
       const validation = priceChangedProducts?.every((prod) => {
         if (parseFloat(prod?.MRP) < parseFloat(prod?.SellPrice)) {
           setMessageType('error');
-                    setMessageData(`${prod?.ProdName}: MRP cannot be less than Sell Price`);
+          setMessageData(
+            `${prod?.ProdName}: MRP cannot be less than Sell Price`
+          );
           return false;
         }
         if (!parseFloat(prod?.SellPrice) || !parseFloat(prod?.MRP)) {
@@ -354,7 +402,7 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
         BranchId: BranchId,
         ProductDetails: priceChangedProducts,
         UpdatedBy: UserId,
-            }
+      };
 
       const res = await dispatch(PutStockPrice(data))?.unwrap();
       if (res?.data?.statusCode === 1) {
@@ -365,42 +413,52 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
         setEditingKey(null);
         setPriceChangedProducts([]);
         setTableData([]);
-                dispatch(triggerProductCard())
+        dispatch(triggerProductCard());
         setPriceChangeProduct(null);
         formRef.current.resetFields();
       } else {
-                setMessageData('Error Updating Product Price')
+        setMessageData('Error Updating Product Price');
         setMessageType('error');
       }
     } else {
       setMessageType('error');
       setMessageData('No changes made / No sell price entered');
     }
-
+  };
-    }
 
   const onComplete = useCallback(() => {
     setMessageData(null);
     setMessageType(null);
-    }, [])
+  }, []);
 
   return (
     <>
-
+      <Messages
-            <Messages messageData={messageData} messageType={messageType} onComplete={onComplete} />
+        messageData={messageData}
-            {showButton ? <Tooltip title="Price Change">
+        messageType={messageType}
-                <button className="price-change-btn" type="button" onClick={() => {
+        onComplete={onComplete}
+      />
+      {showButton ? (
+        <Tooltip title="Price Change">
+          <button
+            className="price-change-btn"
+            type="button"
+            onClick={() => {
               if (comboSearch) {
                 setMessageType('warning');
                 setMessageData('Price change will not work for combo products');
-                        return
+                return;
               }
-                    setPriceChangeModal(true)
+              setPriceChangeModal(true);
-                }}>
+            }}
+          >
             {/* <FaIndianRupeeSign size={35}/> */}
             <img src={PriceChange} alt="" width={30} />
           </button>
-            </Tooltip> : <></>}
+        </Tooltip>
+      ) : (
+        <></>
+      )}
       <DefaultModal
         title="Price Change"
         className={'price-change-modal'}
@@ -422,28 +480,39 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
           <Form ref={formRef}>
             <Tables
               columns={priceChangeColumns}
-                            data={tableData?.slice((currentPage - 1) * pageSize, currentPage * pageSize)}
+              data={tableData?.slice(
+                (currentPage - 1) * pageSize,
+                currentPage * pageSize
+              )}
               onRow={(record, index) => ({
                 onClick: () => {
                   edit(record, index);
                 },
               })}
             />
-                        <div style={{ display: 'flex', justifyContent: 'center', margin: '20px 0' }}>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                margin: '20px 0',
+              }}
+            >
               <Pagination
                 current={currentPage}
                 pageSize={pageSize}
                 total={tableData?.length}
                 onChange={(page) => setCurrentPage(page)}
                 showSizeChanger={false}
-                                showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
+                showTotal={(total, range) =>
+                  `${range[0]}-${range[1]} of ${total} items`
+                }
               />
             </div>
           </Form>
         </div>
       </DefaultModal>
     </>
-    )
+  );
-}
+};
 
 export default ProductPriceChange;

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { Modal, List, Typography, Tooltip } from 'antd';
+import { List, Typography, Tooltip } from 'antd';
 import { FaKeyboard } from 'react-icons/fa';
+import { DefaultModal } from '../../../../Components/Modal/DefaultModal';
 
 const { Title, Text } = Typography;
 
@@ -40,15 +41,15 @@ const ShortcutKeyHelper = ({}) => {
         </div>
       </Tooltip>
 
-      <Modal
+      <DefaultModal
         title={
           <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
             <FaKeyboard />
-            <Title level={4} style={{ margin: 0 }}>Keyboard Shortcuts</Title>
+            Keyboard Shortcuts
           </div>
         }
         open={isModalOpen}
-        onCancel={() => setIsModalOpen(false)}
+        handleCancel={() => setIsModalOpen(false)}
         footer={null}
         width={500}
       >
@@ -65,7 +66,7 @@ const ShortcutKeyHelper = ({}) => {
             </List.Item>
           )}
         />
-      </Modal>
+      </DefaultModal>
     </>
   );
 };

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

@@ -0,0 +1,965 @@
+import { Checkbox, Form, Modal, Row } from 'antd';
+import { DropDowns } from '../../../../Components/Forms/DropDown';
+import { InputField } from '../../../../Components/Forms/InputField';
+import { validateSafeInput } from '../../../../Services/Others';
+import { DefaultModal } from '../../../../Components/Modal/DefaultModal';
+import { CloseOutlined, ArrowRightOutlined } from '@ant-design/icons';
+import { IoMdAdd } from 'react-icons/io';
+import { useCallback, useEffect, useState } from 'react';
+import { SwatchesPicker } from 'react-color';
+import { RadioGrpButton } from '../../../../Components/Forms/RadioGroup';
+import { useSelector } from 'react-redux';
+import {
+  getSalesTemplate,
+  getTemplate,
+  postColorData,
+  postTableFontData,
+  putSelectionComponentData,
+  StoredSessionData,
+} from '../../../../Features/ThemeChange/ThemeChange';
+import { useDispatch } from 'react-redux';
+import Buttons from '../../../../Components/Forms/Buttons';
+import { Messages } from '../../../../Components/Notifications/Messages';
+import './AllSalesPageSettings.scss';
+
+const TableHeadersetting = ({ setModalOpen }) => {
+  const dispatch = useDispatch();
+  const SessionData = useSelector(StoredSessionData);
+  const AppId = SessionData?.AppId;
+  const CompId = SessionData?.CompId;
+  const BranchId = SessionData?.BranchId;
+  const UserId = SessionData?.UserId;
+  const UserType = SessionData?.UserType;
+  const [messageType, setMessageType] = useState(null);
+  const [messageData, setMessageData] = useState(null);
+  const [TemplateDetails, setTemplateDetails] = useState([]);
+  const [TableFontData, setTableFontData] = useState([
+    { FontId: 1, SessionFont: 'Arial' },
+    { FontId: 2, SessionFont: 'Roboto' },
+    { FontId: 3, SessionFont: 'Open Sans' },
+    { FontId: 4, SessionFont: 'Lato' },
+    { FontId: 5, SessionFont: 'Montserrat' },
+  ]);
+  const [selectedTableFont, setSelectedTableFont] = useState();
+  console.log(selectedTableFont, 'selectedTableFontselectedTableFont');
+  const [TableFontModelopen, setTableFontModelopen] = useState(false);
+  const [SelectedTableColor, setSelectedTableColor] = useState(null);
+  const [Tableform] = Form.useForm();
+  const [billingSettings, setBillingSettings] = useState();
+  console.log(billingSettings, 'billingSettingsbillingSettings');
+  const [SelectedBillTableCheckValues, setSelectedBillTableCheckValues] =
+    useState([]);
+  const backgroundOptionId = billingSettings?.ComponentOptionsDetails?.find(
+    (item) => item?.OptionName === 'Background'
+  )?.OptionId;
+
+  const hasBackground =
+    SelectedBillTableCheckValues?.includes(backgroundOptionId);
+  const OverallbackgroundOptionId =
+    billingSettings?.ComponentOptionsDetails?.find(
+      (item) => item?.OptionName === 'OverallBackground'
+    )?.OptionId;
+
+  const hasOverallBackground = SelectedBillTableCheckValues?.includes(
+    OverallbackgroundOptionId
+  );
+  // Hold and addcustomer OptionsDetails
+  const [HoldButton, setHoldButton] = useState(false);
+  const [AddCustomerButton, setAddCustomerButton] = useState(false);
+  const [DineInChecked, setDineInChecked] = useState(false);
+  console.log(billingSettings, 'billingSettingsbillingSettings');
+  const [TableBackgroundColorData, setTableBackgroundColorData] = useState([
+    {
+      ColorId: 4,
+      SessionId: 55,
+      OptionId: 108,
+      FontColor: '#000000',
+      BackgroundColor: '#f06292',
+      ThemeName: 'Theme 4',
+      ActiveStatus: 'A',
+    },
+    {
+      ColorId: 14,
+      SessionId: 55,
+      OptionId: 108,
+      FontColor: '#000000',
+      BackgroundColor: '#52C41A',
+      ThemeName: 'Theme 14',
+      ActiveStatus: 'A',
+    },
+    {
+      ColorId: 23,
+      SessionId: 55,
+      OptionId: 108,
+      FontColor: '#000000',
+      BackgroundColor: '#0d47a1',
+      ThemeName: 'Theme 23',
+      ActiveStatus: 'A',
+    },
+    {
+      ColorId: 25,
+      SessionId: 55,
+      OptionId: 108,
+      FontColor: '#000000',
+      BackgroundColor: '#f8bbd0',
+      ThemeName: 'Theme 25',
+      ActiveStatus: 'A',
+    },
+    {
+      ColorId: 29,
+      SessionId: 55,
+      OptionId: 108,
+      FontColor: '#000000',
+      BackgroundColor: '#ffcdd2',
+      ThemeName: 'Theme 29',
+      ActiveStatus: 'A',
+    },
+  ]);
+  const [BillingOverallColorsList, setBillingOverallColorsList] = useState();
+  const [BillUploadColor, setBillUploadColor] = useState(false);
+  const [TableColorType, setTableColorType] = useState('Y');
+  const [TablebackgroundColor, setTablebackgroundColor] = useState('#009b00');
+  const [tableBGHex, setTableBGHex] = useState(
+    TablebackgroundColor?.replace('#', '').trim()
+  );
+  const [TablefontColor, setTablefontColor] = useState('#000000');
+  const [tableFontHex, setTableFontHex] = useState(
+    TablefontColor?.replace('#', '').trim()
+  );
+  const [BillingUploadOverallColor, setBillingUploadOverallColor] =
+    useState(false);
+  const [BillingOverallColor, setBillingOverallColor] = useState('#000000');
+  const [billingOverallHex, setBillingOverallHex] = useState(
+    BillingOverallColor?.replace('#', '').trim()
+  );
+  const [selectOverallSelected, setSelectOverallSelected] = useState(true);
+  const [dropdownBillingOverallColor, setdropdownBillingOverallColor] =
+    useState(null);
+  const [FirstOnClick, setFirstOnClick] = useState(false);
+
+  useEffect(() => {
+    GetTemplatedetails();
+  }, []);
+
+  const GetTemplatedetails = async () => {
+    let Data = {
+      CompId: CompId,
+      AppId: AppId,
+      BranchId: BranchId,
+    };
+    const templateresponse = await dispatch(getSalesTemplate(Data)).unwrap();
+    let AllDetails = templateresponse?.data?.data;
+    setTemplateDetails(AllDetails?.Templates);
+    let selectedBilling = AllDetails?.Templates?.[0]?.ComponentDetails?.find(
+      (item) => item?.SessionName === 'BookingBilling'
+    );
+    let selectedNavbar = AllDetails?.Templates?.[0]?.ComponentDetails?.find(
+      (item) => item?.SessionName === 'BookingNavbar'
+    );
+    let AllBillingdetails = AllDetails?.Components?.find(
+      (item) => item?.ComponentName === selectedBilling?.ComponentName
+    );
+    console.log(AllDetails, selectedNavbar, 'templateresponse');
+    setBillingSettings(AllBillingdetails);
+    const optionIds = selectedBilling?.FieldDetails?.map(
+      (item) => item?.OptionId
+    );
+    setSelectedBillTableCheckValues(optionIds);
+
+    let Allfontdata = AllDetails?.Fonts?.filter(
+      (item) => item.SessionId === selectedBilling?.SessionId
+    );
+    setTableFontData(Allfontdata);
+    let selectedFont = AllDetails?.Templates?.[0]?.FontDetail?.find(
+      (item) => item?.SessionId === selectedBilling?.SessionId
+    );
+
+    setSelectedTableFont(selectedFont?.FontId);
+    const hasHold = selectedNavbar?.FieldDetails?.some(
+      (item) => item.OptionName === 'Hold'
+    );
+    const hasAddcustomer = selectedNavbar?.FieldDetails?.some(
+      (item) => item.OptionName === 'AddCustomer'
+    );
+    const hasDinein = selectedNavbar?.FieldDetails?.some(
+      (item) => item.OptionName === 'DineIn'
+    );
+    setHoldButton(hasHold);
+    setAddCustomerButton(hasAddcustomer);
+    setDineInChecked(hasDinein);
+    let allcolordata = AllDetails?.Colors?.filter(
+      (item) =>
+        item.SessionId === selectedBilling?.SessionId &&
+        item.OptionName === 'OverallBackground'
+    );
+    setBillingOverallColorsList(allcolordata);
+    let allBackcolordata = AllDetails?.Colors?.filter(
+      (item) =>
+        item.SessionId === selectedBilling?.SessionId &&
+        item.OptionName === 'Background'
+    );
+
+    setTableBackgroundColorData(allBackcolordata);
+    let selectedcolors = AllDetails?.Templates?.[0]?.ColorDetail?.filter(
+      (item) => item?.SessionName === 'BookingBilling'
+    );
+    console.log(selectedcolors, 'selectedOverallBackgroudcolor');
+    selectedcolors?.forEach((item) => {
+      if (item?.['BackgroundColor']) {
+        setSelectedTableColor(item?.['ColorId']);
+      } else if (item?.['OverallBackgroundColor']) {
+        setdropdownBillingOverallColor(item?.['ColorId']);
+      }
+    });
+    // await setdropdownBillingOverallColor(selectedOverallBackgroudcolor);
+    // formRef.current?.setFieldsValue({ BillingOverallColor: value });
+
+    // setTableBackgroundColorData
+    console.log(Allfontdata, 'All table colors');
+    // BookingBilling templateData?.['BookingBilling']?.[0]
+  };
+
+  const BillTableSelectlistonChange = (checkedValues) => {
+    setSelectedBillTableCheckValues(checkedValues);
+  };
+  const handleChange = (itemId, checked) => {
+    setBillingSettings((prev) =>
+      prev.map((item) => (item.id === itemId ? { ...item, checked } : item))
+    );
+  };
+  const selectFont3 = (value) => {
+    setSelectedTableFont(value);
+  };
+  const TablehandleUploadFonts = () => {
+    setTableFontModelopen(true);
+  };
+  const TablehandleCancel = () => {
+    setTableFontModelopen(false);
+    Tableform.resetFields();
+  };
+  const selectTableColor = async (value) => {
+    await setSelectedTableColor(value);
+    // formRef.current?.setFieldsValue({ TableColor: value });
+  };
+  const BillhandleUploadColor = () => {
+    setBillUploadColor(true);
+  };
+  const handleColorChange4 = (color, event) => {
+    if (TableColorType == 'Y') {
+      setTablebackgroundColor(color['hex']);
+      setTableBGHex(color?.hex?.replace('#', '').trim());
+    }
+    if (TableColorType == 'N') {
+      setTablefontColor(color['hex']);
+      setTableFontHex(color?.hex?.replace('#', '').trim());
+    }
+  };
+
+  const handleBackgroundColorSubmit = async () => {
+    if (TablebackgroundColor !== TablefontColor) {
+      let response;
+      try {
+        let postData = {
+          BackgroundColor: TablebackgroundColor,
+          FontColor: TablefontColor,
+          CreatedBy: UserId,
+          SessionId: billingSettings?.SessionId,
+          OptionId: backgroundOptionId,
+        };
+        response = await dispatch(postColorData(postData)).unwrap();
+      } catch (err) {
+        if (err['message'] == 'Request failed with status code 422') {
+          response = {
+            data: {
+              statusCode: 0,
+              response: 'Color Not Added',
+              data: [],
+            },
+          };
+        }
+      }
+      if (response?.data?.statusCode == 1) {
+        if (response?.data?.response == 'Color Already Exists') {
+          setMessageType('warning');
+          setMessageData(response?.data?.response);
+        } else {
+          setMessageType('success');
+          setMessageData(response?.data?.response);
+          // BillsetUploadColor(false);
+        }
+        GetTemplatedetails();
+        setBillUploadColor(false);
+      } else {
+        setMessageData(response?.data?.response);
+        setMessageType('error');
+      }
+    } else {
+      setMessageData('Please select different color for background and font');
+      setMessageType('warning');
+    }
+  };
+  const TableonCancel4 = () => {
+    setBillUploadColor(false);
+  };
+  const handleTableHexChange = (e) => {
+    if (TableColorType?.toLowerCase() === 'y') {
+      setTableBGHex(e?.target?.value);
+      if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) {
+        e.target.value = '009b00';
+      }
+      setTablebackgroundColor(`#${e.target.value}`);
+    }
+    if (TableColorType?.toLowerCase() === 'n') {
+      setTableFontHex(e?.target?.value);
+      if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) {
+        e.target.value = '000000';
+      }
+      setTablefontColor(`#${e.target.value}`);
+    }
+  };
+  const handleBillingOverallHexCode = (e) => {
+    setBillingOverallHex(e?.target?.value);
+    if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) {
+      e.target.value = '000000';
+    }
+    setBillingOverallColor(`#${e.target.value}`);
+  };
+  const handleBillingOverallColorChange = (color, event) => {
+    setBillingOverallColor(color['hex']);
+    setBillingOverallHex(color?.hex?.replace('#', '').trim());
+  };
+  const handleBillingOverallColorSubmit = async () => {
+    let response;
+
+    try {
+      let postData = {
+        BackgroundColor: BillingOverallColor,
+        FontColor: '#000000',
+        CreatedBy: UserId,
+        SessionId: billingSettings?.SessionId,
+        OptionId: OverallbackgroundOptionId,
+      };
+      response = await dispatch(postColorData(postData)).unwrap();
+    } catch (err) {
+      if (err['message'] == 'Request failed with status code 422') {
+        response = {
+          data: {
+            statusCode: 0,
+            response: 'Color Not Added',
+            data: [],
+          },
+        };
+      }
+    }
+    if (response?.data?.statusCode == 1) {
+      if (response?.data?.response == 'Color Already Exists') {
+        setMessageType('warning');
+        setMessageData(response?.data?.response);
+      } else {
+        setMessageType('success');
+        setMessageData(response?.data?.response);
+        setBillingUploadOverallColor(false);
+      }
+      GetTemplatedetails();
+      BillingUploadOverallColor(false);
+    } else {
+      setMessageData(response?.data?.response);
+      setMessageType('error');
+    }
+  };
+  const selectBillingOverallColor = async (value) => {
+    await setdropdownBillingOverallColor(value);
+    // formRef.current?.setFieldsValue({ BillingOverallColor: value });
+  };
+  const openColour4 = (value) => {
+    setTableColorType(value);
+  };
+  const handleBillingUploadOverallColor = () => {
+    setBillingUploadOverallColor(true);
+  };
+
+  const TablehandleSubmit = async () => {
+    const values = await Tableform.validateFields();
+    validateFontsTable(values);
+  };
+  const validateFontsTable = async (values) => {
+    console.log(values, 'valuesvalues');
+    const apiUrl = `https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDP1HqNkLI53iIAH-SB9_mt_24QdkUZ_24`;
+    fetch(apiUrl)
+      .then((response) => response.json())
+      .then(async (data) => {
+        const fontNames = data?.items?.map((item) => item.family);
+
+        if (fontNames.includes(formatFontName(values['TableFont']))) {
+          let response;
+          try {
+            let postData = {
+              SessionFont: formatFontName(values['TableFont']),
+              CreatedBy: UserId,
+              SessionId: billingSettings?.SessionId,
+            };
+            response = await dispatch(postTableFontData(postData)).unwrap();
+          } catch (err) {
+            if (err['message'] == 'Request failed with status code 422') {
+              response = {
+                data: {
+                  statusCode: 0,
+                  response: 'Font Not Added',
+                  data: [],
+                },
+              };
+            }
+          }
+          if (response?.data?.statusCode == 1) {
+            setTableFontModelopen(false);
+            setMessageData(response?.data?.response);
+            if (response?.data?.response == 'Font Already Exists') {
+              setMessageType('warning');
+            } else {
+              setMessageType('success');
+            }
+
+            dispatch(getTableFonts(BillingTableData?.[0]?.SessionId)).unwrap;
+            GetTemplatedetails();
+            Tableform.resetFields();
+          } else {
+            setMessageData(response?.data?.response);
+            setMessageType('error');
+          }
+        } else {
+          setMessageType('warning');
+          setMessageData('Please give the Correct google fonts Name!');
+        }
+      })
+      .catch((error) => {
+        console.error('Error fetching fonts:', error);
+      });
+  };
+  function formatFontName(input) {
+    return input
+      ?.toLowerCase()
+      .split(/\s+/)
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each word
+      .join(' ');
+  }
+  const HandleSubmit = async () => {
+    console.log(TemplateDetails, 'TemplateDetails.ColorDetail');
+    const result = {
+      AppId: AppId,
+      CompId: CompId,
+      UserId: UserId,
+      BranchId: BranchId,
+      ColorId: [
+        ...(TemplateDetails?.[0]?.ColorDetail?.filter(
+          (c) => c.SessionName !== 'BookingBilling'
+        )?.map((c) => c.ColorId) || []),
+
+        SelectedTableColor,
+        dropdownBillingOverallColor,
+      ],
+      FontId: TemplateDetails?.[0]?.FontDetail?.map((f) =>
+        f.SessionName === 'BookingBilling' ? selectedTableFont : f.FontId
+      ),
+      CreatedBy: UserId,
+      TemplateDetails: TemplateDetails?.[0]?.ComponentDetails.map((comp) => ({
+        ComponentId: comp.ComponentId, // ✅ dynamic
+        ComponentDetails:
+          comp.SessionName === 'BookingBilling'
+            ? SelectedBillTableCheckValues?.map((id) => ({ OptionId: id })) // ✅ NEW checked list
+            : comp.FieldDetails.map((field) => ({ OptionId: field.OptionId })), // existing
+      })),
+    };
+    console.log(result, 'final result to submit');
+    var response = await dispatch(putSelectionComponentData(result)).unwrap();
+    if (response?.data?.statusCode == 1) {
+      if (response?.data?.response === 'Application Template Already Exists') {
+        setMessageType('warning');
+        setMessageData('Application Template Already Exists');
+        setFirstOnClick(false);
+      } else {
+        setMessageType('success');
+        setMessageData('Template Details Added Successfully');
+        setFirstOnClick(false);
+      }
+      await dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap();
+      setModalOpen(false);
+    } else {
+      setMessageType('error');
+      setMessageData(response?.data?.response);
+      setFirstOnClick(false);
+    }
+  };
+  const onComplete = useCallback(() => {
+    setMessageData(null);
+    setMessageType(null);
+  }, []);
+
+  return (
+    <>
+      <Messages
+        messageType={messageType}
+        messageData={messageData}
+        onComplete={onComplete}
+      />
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '10px',
+          marginTop: '20px',
+        }}
+      >
+        <Checkbox.Group
+          style={{
+            width: '100%',
+          }}
+          onChange={BillTableSelectlistonChange}
+          value={SelectedBillTableCheckValues}
+        >
+          <Row>
+            {billingSettings?.ComponentOptionsDetails?.map((value, key) => (
+              <Checkbox
+                style={{ padding: '12px' }}
+                value={value?.OptionId}
+                // onClick={() => Navholdoption(value.OptionName)}
+                key={value?.OptionId}
+                disabled={
+                  value.OptionName === 'Hold' && HoldButton
+                    ? true
+                    : value.OptionName === 'AddCustomer' && AddCustomerButton
+                      ? true
+                      : value.OptionName === 'Item'
+                        ? true
+                        : value.OptionName === 'UnpaidBill' && !DineInChecked
+                          ? true
+                          : false
+                }
+              >
+                {value.OptionName}
+              </Checkbox>
+            ))}
+          </Row>
+        </Checkbox.Group>
+        {/* {billingSettings?.ComponentOptionsDetails?.map((item) => (
+          <div key={item.id} style={{ flex: '0 0 48%' }}>
+            <Checkbox
+              checked={item.checked}
+              onChange={(e) => handleChange(item.id, e.target.checked)}
+            >
+              {item.label}
+            </Checkbox>
+          </div>
+        ))} */}
+      </div>
+      <div className="selctfontBackInputMain">
+        <div className="selctfontBackInput">
+          <p className="SelectionComponentSubHeading">BillTable Font</p>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              gap: '10px',
+              alignItems: 'center',
+            }}
+          >
+            <DropDowns
+              options={TableFontData?.map((option) => ({
+                value: option.FontId,
+                label: option.SessionFont,
+              }))}
+              label="Font"
+              onChangeFunction={selectFont3}
+              className="settingsales-DropDown-Selection"
+              isOnchanges={!!selectedTableFont}
+              valueData={selectedTableFont}
+            />
+            <div
+              className="settingaddNewSalesFiledBTN"
+              onClick={TablehandleUploadFonts}
+            >
+              Add
+              <IoMdAdd
+              // className="plusOutlinedIcon"
+              />
+            </div>
+          </div>
+        </div>
+
+        {hasBackground ? (
+          <div>
+            <div
+              style={{
+                display: 'flex',
+                gap: '10px',
+                flexWrap: 'nowrap',
+                alignItems: 'center',
+              }}
+            >
+              <div className="colorDropdown">
+                <Form.Item
+                  name="TableColor"
+                  rules={[
+                    {
+                      required: true,
+                      message: 'Please Select Color',
+                    },
+                  ]}
+                >
+                  <p className="SelectionComponentSubHeading">
+                    BillTable Background Color
+                  </p>
+                  <DropDowns
+                    options={TableBackgroundColorData?.map((option) => ({
+                      value: option.ColorId,
+                      label: (
+                        <div
+                          style={{
+                            display: 'flex',
+                            gap: '0.5rem',
+                          }}
+                        >
+                          <div
+                            style={{
+                              width: '27px',
+                              height: '27px',
+                              borderRadius: '25.774192810058594px',
+                              backgroundColor: option.BackgroundColor,
+                            }}
+                          >
+                            <span
+                              style={{
+                                width: '27px',
+                                height: '27px',
+                                borderRadius: '50px',
+                                marginLeft: '15px',
+                                backgroundColor: option.FontColor,
+                              }}
+                            >
+                              &nbsp;&nbsp;&nbsp;
+                            </span>
+                          </div>
+                          <div>{option.ThemeName}</div>
+                        </div>
+                      ),
+                    }))}
+                    labelChange={true}
+                    label="Color"
+                    className="field-DropDown-Selection"
+                    onChangeFunction={selectTableColor}
+                    isOnchanges={SelectedTableColor ? true : false}
+                    valueData={SelectedTableColor}
+                  />
+                </Form.Item>
+              </div>
+              <div
+                className="addNewSalesFiledBTN"
+                onClick={BillhandleUploadColor}
+              >
+                Add
+                <IoMdAdd className="plusOutlinedIcon" />
+              </div>
+            </div>
+          </div>
+        ) : null}
+
+        {hasOverallBackground ? (
+          <div>
+            <Modal
+              open={BillingUploadOverallColor}
+              title="BillTable Overall Background Color"
+              closeIcon={
+                <CloseOutlined
+                  onClick={() => {
+                    setBillingUploadOverallColor(false);
+                  }}
+                />
+              }
+              width={400}
+              footer={null}
+            >
+              <div>
+                <div
+                  style={{
+                    display: 'flex',
+                    align: 'center',
+                    width: '60%',
+                    gap: '0.5rem',
+                    border: '1px solid black',
+                    borderRadius: '10px',
+                    padding: '10px',
+                  }}
+                >
+                  <p style={{ fontSize: '14px', fontWeight: 700 }}>
+                    Selected Color:{' '}
+                  </p>
+                  <div
+                    style={{
+                      width: '35px',
+                      height: '23px',
+                      borderRadius: '5px',
+                      backgroundColor: BillingOverallColor
+                        ? BillingOverallColor
+                        : null,
+                    }}
+                  ></div>
+                </div>
+                <div className="hex-input">
+                  <InputField
+                    prefix="#"
+                    value={billingOverallHex}
+                    inputMode="numeric"
+                    maxLength={8}
+                    onChange={handleBillingOverallHexCode}
+                  />
+                </div>
+              </div>
+
+              <SwatchesPicker onChange={handleBillingOverallColorChange} />
+
+              <div>
+                <button
+                  className="colorBtn"
+                  onClick={handleBillingOverallColorSubmit}
+                >
+                  SAVE
+                </button>
+              </div>
+            </Modal>
+            <div
+              style={{
+                display: 'flex',
+                gap: '1rem',
+                flexWrap: 'nowrap',
+                alignItems: 'center',
+              }}
+            >
+              <div className="colorDropdown">
+                <Form.Item
+                  name="BillingOverallColor"
+                  rules={[
+                    {
+                      required: true,
+                      message: 'Please Select Color',
+                    },
+                  ]}
+                >
+                  <p className="SelectionComponentSubHeading">
+                    BillTable Overall-Background
+                  </p>
+                  <DropDowns
+                    options={BillingOverallColorsList?.map((option) => ({
+                      value: option.ColorId,
+                      label: (
+                        <div
+                          style={{
+                            display: 'flex',
+                            gap: '0.5rem',
+                          }}
+                        >
+                          <div
+                            style={{
+                              width: '27px',
+                              height: '27px',
+                              borderRadius: '25.774192810058594px',
+                              backgroundColor: option.BackgroundColor,
+                            }}
+                          >
+                            <span
+                              style={{
+                                width: '27px',
+                                height: '27px',
+                                borderRadius: '50px',
+                                marginLeft: '15px',
+                                backgroundColor: option.FontColor,
+                              }}
+                            >
+                              &nbsp;&nbsp;&nbsp;
+                            </span>
+                          </div>
+                          <div>{option.ThemeName}</div>
+                        </div>
+                      ),
+                    }))}
+                    labelChange={true}
+                    label={
+                      <p style={{ fontSize: '11px' }}>Overall Background</p>
+                    }
+                    className="field-DropDown-Selection"
+                    onChangeFunction={selectBillingOverallColor}
+                    isOnchanges={dropdownBillingOverallColor ? true : false}
+                    valueData={dropdownBillingOverallColor}
+                  />
+                </Form.Item>
+              </div>
+              <div
+                className="addNewSalesFiledBTN"
+                onClick={handleBillingUploadOverallColor}
+              >
+                Add
+                <IoMdAdd
+                  className="plusOutlinedIcon"
+                  onClick={handleBillingUploadOverallColor}
+                />
+              </div>
+            </div>
+          </div>
+        ) : null}
+      </div>
+      <DefaultModal
+        open={TableFontModelopen}
+        title="Fonts"
+        footer={true}
+        children={
+          <Form form={Tableform}>
+            <div className="fontInputs">
+              <div>
+                <Form.Item
+                  name="TableFont"
+                  rules={[
+                    {
+                      required: true,
+                      pattern: /^(?!\s*$).+/,
+                      message: 'Please Enter Font',
+                    },
+                    {
+                      validator: async (_, value) => {
+                        await validateSafeInput(value); // To block HTML tags & SQL keywords
+                        return Promise.resolve();
+                      },
+                    },
+                  ]}
+                >
+                  <InputField
+                    field="TableFont"
+                    label="Font"
+                    className="Input"
+                    fieldState={true}
+                    fieldApi={true}
+                    autoComplete="off"
+                  />
+                </Form.Item>
+              </div>
+            </div>
+            <p style={{ color: 'red' }}>* Google Fonts Only</p>
+          </Form>
+        }
+        handleCancel={TablehandleCancel}
+        handleSubmit={TablehandleSubmit}
+        buttonText="SAVE"
+      />
+
+      <Modal
+        open={BillUploadColor}
+        title="Colors"
+        closeIcon={<CloseOutlined onClick={TableonCancel4} />}
+        width={400}
+        footer={null}
+      >
+        <div>
+          <div className="color-hex-select">
+            <RadioGrpButton
+              content={[
+                { value: 'Y', label: 'Background' },
+                { value: 'N', label: 'Font' },
+              ]}
+              defaultSelect={TableColorType}
+              fieldState={true}
+              onSelectFuntion={(e) => openColour4(e)}
+            />
+            <div className="hex-input">
+              <InputField
+                prefix="#"
+                value={
+                  TableColorType?.toLowerCase() === 'y'
+                    ? tableBGHex
+                    : TableColorType?.toLowerCase() === 'n'
+                      ? tableFontHex
+                      : ''
+                }
+                inputMode="numeric"
+                maxLength={8}
+                onChange={handleTableHexChange}
+              />
+            </div>
+          </div>
+
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              gap: '1rem',
+              justifyContent: 'center',
+              marginTop: '10px',
+              borderRadius: '10px',
+              border: '1px solid #000',
+              padding: '10px',
+              width: '110%',
+            }}
+          >
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.5rem',
+              }}
+            >
+              <p style={{ fontSize: '10px', fontWeight: 700 }}>
+                {' '}
+                Selected Background Color :{' '}
+              </p>
+              <div
+                style={{
+                  width: '35px',
+                  height: '23px',
+                  borderRadius: '5px',
+                  backgroundColor: TablebackgroundColor
+                    ? TablebackgroundColor
+                    : null,
+                }}
+              ></div>
+              <>|</>
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.5rem',
+              }}
+            >
+              <p style={{ fontSize: '10px', fontWeight: 700 }}>
+                {' '}
+                Selected Font Color :{' '}
+              </p>
+              <div
+                style={{
+                  width: '35px',
+                  height: '23px',
+                  borderRadius: '5px',
+                  backgroundColor: TablefontColor ? TablefontColor : null,
+                }}
+              ></div>
+            </div>
+          </div>
+        </div>
+
+        <SwatchesPicker onChange={handleColorChange4} />
+
+        <div>
+          <button className="colorBtn" onClick={handleBackgroundColorSubmit}>
+            SAVE
+          </button>
+        </div>
+      </Modal>
+      <div className=" submitButtonDiv">
+        <Buttons
+          buttonText="SUBMIT"
+          color="901D77"
+          icon={<ArrowRightOutlined />}
+          htmlType={true}
+          handleSubmit={HandleSubmit}
+        />
+      </div>
+    </>
+  );
+};
+export default TableHeadersetting;

src/Pages/BookingScreen/PrintTemplates/A4/A4Standard.jsx

@@ -97,7 +97,7 @@ const InvoiceTemplate = ({
   const estimatePrintHeader =
     SettingData?.[0]?.SettingDtlDetails?.find(
       (setting) =>
-        setting?.SettingIdName?.toLowerCase() === 'estimateprintheader',
+        setting?.SettingIdName?.toLowerCase() === 'estimateprintheader'
     )?.SettingValue === 'Y';
   const keysLength = Object.keys(table2Data ?? {}).length;
   console.log(GlobalDiscount, Discount, 'Discount');
@@ -141,13 +141,13 @@ const InvoiceTemplate = ({
   const formattedDate = `${day}-${monthNames[monthIndex]}-${year}`;
 
   const TakeawayData = table2Data?.productDetails?.filter(
-    (item) => item.BookingTypeName?.toLowerCase() === 'takeaway',
+    (item) => item.BookingTypeName?.toLowerCase() === 'takeaway'
   );
   const DineInData = table2Data?.productDetails?.filter(
-    (item) => item.BookingTypeName?.toLowerCase() === 'dine in',
+    (item) => item.BookingTypeName?.toLowerCase() === 'dine in'
   );
   let PaymentStatusSuccess = PaymentStatus?.filter(
-    (ps) => ps.PaymentStatus === 'S',
+    (ps) => ps.PaymentStatus === 'S'
   );
   const isEditedBill = PaymentStatus?.some(payment => {
     const type = payment?.AdjustmentType?.toLowerCase();
@@ -198,22 +198,22 @@ const InvoiceTemplate = ({
   });
   const hasMappedOffer = offers.some((offer) =>
     ['ItemWiseOffers', 'BundleOffers', 'QuantityWiseOffers'].includes(
-      offer.TableName,
+      offer.TableName
-    ),
+    )
   );
 
   if (hasMappedOffer) {
     const productTotal = productsData?.reduce(
       (acc, item) =>
         acc + (item?.Type != 'C' ? item.OfferAmt : item.OfferValue || 0),
-      0,
+      0
     );
     TotalOfferAmount += productTotal;
   } else {
     const Combothere = productsData?.filter((item) => item?.Type == 'C');
     const CombothereTotal = Combothere?.reduce(
       (acc, item) => acc + (item.OfferValue || 0),
-      0,
+      0
     );
     TotalOfferAmount += CombothereTotal;
   }
@@ -936,7 +936,7 @@ const InvoiceTemplate = ({
                             : table2Data?.OrderId &&
                               extractLastNumberOrderId(
                                 table2Data?.OrderId,
-                              table2Data?.FYStatus,
+                                table2Data?.FYStatus
                               )}
                         </div>
                       </div>
@@ -1263,12 +1263,12 @@ const InvoiceTemplate = ({
                                       >
                                         <div>{item?.ProdName}</div>
                                         {PackageDetails?.filter(
-                                        (pkg) => pkg.ProdId === item.ProdId,
+                                          (pkg) => pkg.ProdId === item.ProdId
                                         ).length > 0 ? (
                                           <div>
                                             {PackageDetails?.filter(
                                               (pkg) =>
-                                              pkg.ProdId === item.ProdId,
+                                                pkg.ProdId === item.ProdId
                                             )?.map((item, index) => (
                                               <span
                                                 key={index}
@@ -1302,7 +1302,7 @@ const InvoiceTemplate = ({
                                                 !(
                                                   items.SerialNumber == '' ||
                                                   items.SerialNumber == null
-                                            ),
+                                                )
                                             )?.map((a) => {
                                               return (
                                                 <div>{a.SerialNumber}</div>
@@ -1313,7 +1313,7 @@ const InvoiceTemplate = ({
                                           ? item?.ProductIdentifierDtls.filter(
                                               (item1) =>
                                                 item1.IMEI1 !== '' ||
-                                            item1.IMEI2 !== '',
+                                                item1.IMEI2 !== ''
                                             )?.map((item2) => {
                                               const imei1 = item2.IMEI1 || '';
                                               const imei2 = item2.IMEI2 || '';
@@ -1472,7 +1472,7 @@ const InvoiceTemplate = ({
                                       </td>
                                     )}
                               </tr>
-                            ),
+                            )
                           )}
                         </tbody>
                       </table>
@@ -1724,7 +1724,7 @@ const InvoiceTemplate = ({
                                         </div>
                                         <div>
                                           {Number(
-                                            item.WithOutTaxAmount,
+                                            item.WithOutTaxAmount
                                           ).toFixed(2)}
                                         </div>
                                       </div>
@@ -2371,7 +2371,7 @@ const InvoiceTemplate = ({
                             <span>Total Amount Payable</span>
                             <span>
                               {Number(
-                                GlobaldummyData ? 736 : table2Data?.NetAmount,
+                                GlobaldummyData ? 736 : table2Data?.NetAmount
                               )?.toFixed(2)}
                             </span>
                           </div>

src/Pages/BookingScreen/PrintTemplates/A4/PrintA4Style11.jsx

@@ -635,7 +635,8 @@ const PrintA4Style11 = ({
                                           Tax %
                                         </th>
                                       )
-                                    : (Tax && table2Data?.OrderType !== 'E') && (
+                                    : Tax &&
+                                      table2Data?.OrderType !== 'E' && (
                                         <th
                                           style={{
                                             width: '8%',
@@ -828,7 +829,8 @@ const PrintA4Style11 = ({
                                       ? GlobalTax && (
                                           <td>{item.ProdTaxPercentage}</td>
                                         )
-                                      : (Tax && table2Data?.OrderType !== 'E') && (
+                                      : Tax &&
+                                        table2Data?.OrderType !== 'E' && (
                                           <td style={{ textAlign: 'right' }}>
                                             {item?.ProdTaxPercentage || 0}
                                           </td>
@@ -1066,25 +1068,62 @@ const PrintA4Style11 = ({
                                         )}
                                     <hr className="PrintA4Style11-print-dottline" />
 
-                                    {(table2Data?.OrderType !== "E") && OrderDetailGST?.length > 0 &&
+                                    {table2Data?.OrderType !== 'E' &&
+                                      OrderDetailGST?.length > 0 &&
                                       OrderDetailGST?.[0]?.TaxAmt > 0 && (
                                         <>
-                                          <p style={{ margin: 0, padding: 0, fontSize: "12px", textAlign: "center" }}>
+                                          <p
-                                            --------- GST Breakup Details -----------</p>
+                                            style={{
+                                              margin: 0,
+                                              padding: 0,
+                                              fontSize: '12px',
+                                              textAlign: 'center',
+                                            }}
+                                          >
+                                            --------- GST Breakup Details
+                                            -----------
+                                          </p>
                                           <table className="PrintA4Style11-print-table">
                                             <thead>
                                               <tr>
-                                                <th style={{ width: '10px', textAlign: 'center' }}>GST Rate</th>
+                                                <th
-                                                <th style={{ width: '10px', textAlign: 'right' }}>
+                                                  style={{
+                                                    width: '10px',
+                                                    textAlign: 'center',
+                                                  }}
+                                                >
+                                                  GST Rate
+                                                </th>
+                                                <th
+                                                  style={{
+                                                    width: '10px',
+                                                    textAlign: 'right',
+                                                  }}
+                                                >
                                                   Taxable Amount
                                                 </th>
-                                                <th style={{ width: '10px', textAlign: 'right' }}>
+                                                <th
+                                                  style={{
+                                                    width: '10px',
+                                                    textAlign: 'right',
+                                                  }}
+                                                >
                                                   CGST
                                                 </th>
-                                                <th style={{ width: '10px', textAlign: 'right' }}>
+                                                <th
+                                                  style={{
+                                                    width: '10px',
+                                                    textAlign: 'right',
+                                                  }}
+                                                >
                                                   SGST
                                                 </th>
-                                                <th style={{ width: '10px', textAlign: 'right' }}>
+                                                <th
+                                                  style={{
+                                                    width: '10px',
+                                                    textAlign: 'right',
+                                                  }}
+                                                >
                                                   Total
                                                 </th>
                                               </tr>
@@ -1092,28 +1131,52 @@ const PrintA4Style11 = ({
                                             <tbody>
                                               {OrderDetailGST?.map((item) => (
                                                 <tr>
-                                                  <td style={{ textAlign: 'center' }}>
+                                                  <td
+                                                    style={{
+                                                      textAlign: 'center',
+                                                    }}
+                                                  >
                                                     {item?.TaxPercentage}%{' '}
                                                   </td>
-                                                  <td style={{ textAlign: 'right' }}>
-                                                    {' '}
-                                                    {Number(item.WithOutTaxAmount).toFixed(2)}{' '}
-                                                  </td>
-                                                  <td style={{ textAlign: 'right' }}>
-                                                    {' '}
-                                                    {Number(item.CGST).toFixed(2)}
-                                                  </td>
                                                   <td
-                                                    style={{ textAlign: 'right' }}
+                                                    style={{
+                                                      textAlign: 'right',
+                                                    }}
                                                   >
                                                     {' '}
-                                                    {Number(item.SGST).toFixed(2)}
+                                                    {Number(
+                                                      item.WithOutTaxAmount
+                                                    ).toFixed(2)}{' '}
                                                   </td>
                                                   <td
-                                                    style={{ textAlign: 'right' }}
+                                                    style={{
+                                                      textAlign: 'right',
+                                                    }}
                                                   >
                                                     {' '}
-                                                    {Number(item.TotalAmt).toFixed(2)}
+                                                    {Number(item.CGST).toFixed(
+                                                      2
+                                                    )}
+                                                  </td>
+                                                  <td
+                                                    style={{
+                                                      textAlign: 'right',
+                                                    }}
+                                                  >
+                                                    {' '}
+                                                    {Number(item.SGST).toFixed(
+                                                      2
+                                                    )}
+                                                  </td>
+                                                  <td
+                                                    style={{
+                                                      textAlign: 'right',
+                                                    }}
+                                                  >
+                                                    {' '}
+                                                    {Number(
+                                                      item.TotalAmt
+                                                    ).toFixed(2)}
                                                   </td>
                                                 </tr>
                                               ))}
@@ -1635,7 +1698,8 @@ const PrintA4Style11 = ({
                                           Tax %
                                         </th>
                                       )
-                                    : (Tax && table2Data?.OrderType !== 'E') && (
+                                    : Tax &&
+                                      table2Data?.OrderType !== 'E' && (
                                         <th
                                           style={{
                                             width: '8%',
@@ -1808,7 +1872,8 @@ const PrintA4Style11 = ({
                                       ? GlobalTax && (
                                           <td>{item.ProdTaxPercentage}</td>
                                         )
-                                      : (Tax && table2Data?.OrderType !== 'E') && (
+                                      : Tax &&
+                                        table2Data?.OrderType !== 'E' && (
                                           <td style={{ textAlign: 'right' }}>
                                             {item?.ProdTaxPercentage || 0}
                                           </td>
@@ -2046,25 +2111,62 @@ const PrintA4Style11 = ({
                                         )}
                                     <hr className="PrintA4Style11-print-dottline" />
 
-                                    {(table2Data?.OrderType !== "E") && OrderDetailGST?.length > 0 &&
+                                    {table2Data?.OrderType !== 'E' &&
+                                      OrderDetailGST?.length > 0 &&
                                       OrderDetailGST?.[0]?.TaxAmt > 0 && (
                                         <>
-                                          <p style={{ margin: 0, padding: 0, fontSize: "12px", textAlign: "center" }}>
+                                          <p
-                                            --------- GST Breakup Details -----------</p>
+                                            style={{
+                                              margin: 0,
+                                              padding: 0,
+                                              fontSize: '12px',
+                                              textAlign: 'center',
+                                            }}
+                                          >
+                                            --------- GST Breakup Details
+                                            -----------
+                                          </p>
                                           <table className="PrintA4Style11-print-table">
                                             <thead>
                                               <tr>
-                                                <th style={{ width: '10px', textAlign: 'center' }}>GST Rate</th>
+                                                <th
-                                                <th style={{ width: '10px', textAlign: 'right' }}>
+                                                  style={{
+                                                    width: '10px',
+                                                    textAlign: 'center',
+                                                  }}
+                                                >
+                                                  GST Rate
+                                                </th>
+                                                <th
+                                                  style={{
+                                                    width: '10px',
+                                                    textAlign: 'right',
+                                                  }}
+                                                >
                                                   Taxable Amount
                                                 </th>
-                                                <th style={{ width: '10px', textAlign: 'right' }}>
+                                                <th
+                                                  style={{
+                                                    width: '10px',
+                                                    textAlign: 'right',
+                                                  }}
+                                                >
                                                   CGST
                                                 </th>
-                                                <th style={{ width: '10px', textAlign: 'right' }}>
+                                                <th
+                                                  style={{
+                                                    width: '10px',
+                                                    textAlign: 'right',
+                                                  }}
+                                                >
                                                   SGST
                                                 </th>
-                                                <th style={{ width: '10px', textAlign: 'right' }}>
+                                                <th
+                                                  style={{
+                                                    width: '10px',
+                                                    textAlign: 'right',
+                                                  }}
+                                                >
                                                   Total
                                                 </th>
                                               </tr>
@@ -2072,28 +2174,52 @@ const PrintA4Style11 = ({
                                             <tbody>
                                               {OrderDetailGST?.map((item) => (
                                                 <tr>
-                                                  <td style={{ textAlign: 'center' }}>
+                                                  <td
+                                                    style={{
+                                                      textAlign: 'center',
+                                                    }}
+                                                  >
                                                     {item?.TaxPercentage}%{' '}
                                                   </td>
-                                                  <td style={{ textAlign: 'right' }}>
-                                                    {' '}
-                                                    {Number(item.WithOutTaxAmount).toFixed(2)}{' '}
-                                                  </td>
-                                                  <td style={{ textAlign: 'right' }}>
-                                                    {' '}
-                                                    {Number(item.CGST).toFixed(2)}
-                                                  </td>
                                                   <td
-                                                    style={{ textAlign: 'right' }}
+                                                    style={{
+                                                      textAlign: 'right',
+                                                    }}
                                                   >
                                                     {' '}
-                                                    {Number(item.SGST).toFixed(2)}
+                                                    {Number(
+                                                      item.WithOutTaxAmount
+                                                    ).toFixed(2)}{' '}
                                                   </td>
                                                   <td
-                                                    style={{ textAlign: 'right' }}
+                                                    style={{
+                                                      textAlign: 'right',
+                                                    }}
                                                   >
                                                     {' '}
-                                                    {Number(item.TotalAmt).toFixed(2)}
+                                                    {Number(item.CGST).toFixed(
+                                                      2
+                                                    )}
+                                                  </td>
+                                                  <td
+                                                    style={{
+                                                      textAlign: 'right',
+                                                    }}
+                                                  >
+                                                    {' '}
+                                                    {Number(item.SGST).toFixed(
+                                                      2
+                                                    )}
+                                                  </td>
+                                                  <td
+                                                    style={{
+                                                      textAlign: 'right',
+                                                    }}
+                                                  >
+                                                    {' '}
+                                                    {Number(
+                                                      item.TotalAmt
+                                                    ).toFixed(2)}
                                                   </td>
                                                 </tr>
                                               ))}
@@ -2625,25 +2751,46 @@ const PrintA4Style11 = ({
                         )}
                     <hr className="PrintA4Style11-print-dottline" />
 
-                    {(table2Data?.OrderType !== "E") && OrderDetailGST?.length > 0 &&
+                    {table2Data?.OrderType !== 'E' &&
+                      OrderDetailGST?.length > 0 &&
                       OrderDetailGST?.[0]?.TaxAmt > 0 && (
                         <>
-                          <p style={{ margin: 0, padding: 0, fontSize: "12px", textAlign: "center" }}>
+                          <p
-                            --------- GST Breakup Details -----------</p>
+                            style={{
+                              margin: 0,
+                              padding: 0,
+                              fontSize: '12px',
+                              textAlign: 'center',
+                            }}
+                          >
+                            --------- GST Breakup Details -----------
+                          </p>
                           <table className="PrintA4Style11-print-table">
                             <thead>
                               <tr>
-                                <th style={{ width: '10px', textAlign: 'center' }}>GST Rate</th>
+                                <th
-                                <th style={{ width: '10px', textAlign: 'right' }}>
+                                  style={{ width: '10px', textAlign: 'center' }}
+                                >
+                                  GST Rate
+                                </th>
+                                <th
+                                  style={{ width: '10px', textAlign: 'right' }}
+                                >
                                   Taxable Amount
                                 </th>
-                                <th style={{ width: '10px', textAlign: 'right' }}>
+                                <th
+                                  style={{ width: '10px', textAlign: 'right' }}
+                                >
                                   CGST
                                 </th>
-                                <th style={{ width: '10px', textAlign: 'right' }}>
+                                <th
+                                  style={{ width: '10px', textAlign: 'right' }}
+                                >
                                   SGST
                                 </th>
-                                <th style={{ width: '10px', textAlign: 'right' }}>
+                                <th
+                                  style={{ width: '10px', textAlign: 'right' }}
+                                >
                                   Total
                                 </th>
                               </tr>
@@ -2656,21 +2803,19 @@ const PrintA4Style11 = ({
                                   </td>
                                   <td style={{ textAlign: 'right' }}>
                                     {' '}
-                                    {Number(item.WithOutTaxAmount).toFixed(2)}{' '}
+                                    {Number(item.WithOutTaxAmount).toFixed(
+                                      2
+                                    )}{' '}
                                   </td>
                                   <td style={{ textAlign: 'right' }}>
                                     {' '}
                                     {Number(item.CGST).toFixed(2)}
                                   </td>
-                                  <td
+                                  <td style={{ textAlign: 'right' }}>
-                                    style={{ textAlign: 'right' }}
-                                  >
                                     {' '}
                                     {Number(item.SGST).toFixed(2)}
                                   </td>
-                                  <td
+                                  <td style={{ textAlign: 'right' }}>
-                                    style={{ textAlign: 'right' }}
-                                  >
                                     {' '}
                                     {Number(item.TotalAmt).toFixed(2)}
                                   </td>
@@ -3170,15 +3315,26 @@ const PrintA4Style11 = ({
                     )}
                 <hr className="PrintA4Style11-print-dottline" />
 
-                {(table2Data?.OrderType !== "E") && OrderDetailGST?.length > 0 &&
+                {table2Data?.OrderType !== 'E' &&
+                  OrderDetailGST?.length > 0 &&
                   OrderDetailGST?.[0]?.TaxAmt > 0 && (
                     <>
-                      <p style={{ margin: 0, padding: 0, fontSize: "12px", textAlign: "center" }}>
+                      <p
-                        --------- GST Breakup Details -----------</p>
+                        style={{
+                          margin: 0,
+                          padding: 0,
+                          fontSize: '12px',
+                          textAlign: 'center',
+                        }}
+                      >
+                        --------- GST Breakup Details -----------
+                      </p>
                       <table className="PrintA4Style11-print-table">
                         <thead>
                           <tr>
-                            <th style={{ width: '10px', textAlign: 'center' }}>GST Rate</th>
+                            <th style={{ width: '10px', textAlign: 'center' }}>
+                              GST Rate
+                            </th>
                             <th style={{ width: '10px', textAlign: 'right' }}>
                               Taxable Amount
                             </th>
@@ -3207,15 +3363,11 @@ const PrintA4Style11 = ({
                                 {' '}
                                 {Number(item.CGST).toFixed(2)}
                               </td>
-                              <td
+                              <td style={{ textAlign: 'right' }}>
-                                style={{ textAlign: 'right' }}
-                              >
                                 {' '}
                                 {Number(item.SGST).toFixed(2)}
                               </td>
-                              <td
+                              <td style={{ textAlign: 'right' }}>
-                                style={{ textAlign: 'right' }}
-                              >
                                 {' '}
                                 {Number(item.TotalAmt).toFixed(2)}
                               </td>

src/Pages/BookingScreen/PrintTemplates/A4/TaxInvoice.jsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { GlobalPritdummyData } from '../../../../Features/ThemeChange/ThemeChange';
+import {
+  GlobalPritdummyData,
+  GlobalSelectedPrintHeaderColor,
+} from '../../../../Features/ThemeChange/ThemeChange';
 import { isMobile } from 'react-device-detect';
 import { extractLastNumberOrderId } from '../../../../Services/Others';
 import moment from 'moment';
@@ -29,6 +32,8 @@ const TaxInvoice = ({
     )?.SettingValue === 'Y';
   let BillName = printDatas?.PrintHdrName;
   let companyColour = printDatas?.PrintHdrColor ?? '#00000';
+
+  const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
   // Function to convert number to words
   const numberToWords = (num) => {
     const a = [
@@ -481,7 +486,8 @@ const TaxInvoice = ({
                   {invoiceData.customerMobile && (
                     <div>Mobile: {invoiceData.customerMobile}</div>
                   )}
-                  {(invoiceData.customerGSTIN && table2Data?.OrderType !== 'E') && (
+                  {invoiceData.customerGSTIN &&
+                    table2Data?.OrderType !== 'E' && (
                       <div style={{ fontWeight: '700', fontSize: '15px' }}>
                         GSTIN/UIN: {invoiceData.customerGSTIN}
                       </div>

src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1.jsx

@@ -30,6 +30,7 @@ import {
   GlobalprintLogo,
   GlobalprintCredit,
   GlobalprintTax,
+  GlobalSelectedPrintHeaderColor,
 } from '../../../../Features/ThemeChange/ThemeChange';
 import '../../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1.scss';
 import QRCode from 'react-qr-code';
@@ -95,6 +96,7 @@ const PrintStyle1 = ({
   const GlobalCashierName = useSelector(GlobalprintCashierName);
   const GlobalLogo = useSelector(GlobalprintLogo);
   const GlobalCredit = useSelector(GlobalprintCredit);
+  const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
 
   const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
   const GlobalSignatureImages = useSelector(GlobalSignatureImage);
@@ -236,9 +238,12 @@ const PrintStyle1 = ({
     }
   });
   const hasMappedOffer = offers.some((offer) =>
-    ['ItemWiseOffers', 'BundleOffers', 'QuantityWiseOffers', 'MemberShip'].includes(
+    [
-      offer.TableName
+      'ItemWiseOffers',
-    )
+      'BundleOffers',
+      'QuantityWiseOffers',
+      'MemberShip',
+    ].includes(offer.TableName)
   );
 
   if (hasMappedOffer) {
@@ -447,6 +452,7 @@ const PrintStyle1 = ({
                       style={{
                         fontSize: 'clamp(2rem, 2.5vw, 2rem)',
                         fontWeight: '600',
+                        color: SelectedHeaderColor,
                       }}
                     >
                       {' '}
@@ -3691,6 +3697,7 @@ const PrintStyle1 = ({
                 style={{
                   fontSize: 'clamp(2rem, 2.5vw, 2rem)',
                   fontWeight: '600',
+                  color: SelectedHeaderColor,
                 }}
               >
                 {' '}

src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle10.jsx

@@ -27,6 +27,7 @@ import {
   GlobalprintLogo,
   GlobalprintCredit,
   GlobalprintTax,
+  GlobalSelectedPrintHeaderColor,
 } from '../../../../Features/ThemeChange/ThemeChange';
 import {
   GlobalUpiIDprint,
@@ -121,6 +122,7 @@ const PrintStyle10 = ({
   const paymentTypeUPI = PaymentStatus?.find(
     (ps) => ps.PaymentTypeName === 'UPI'
   );
+  const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
 
   const isEditedBill = PaymentStatus?.some((payment) => {
     const type = payment?.AdjustmentType?.toLowerCase();
@@ -419,7 +421,13 @@ const PrintStyle10 = ({
                       </div>
 
                       <div className="Address" style={{ fontWeight: '600' }}>
-                        <div className="ShopName" style={{ fontWeight: '600' }}>
+                      <div
+                          className="ShopName"
+                          style={{
+                            fontWeight: '600',
+                            color: SelectedHeaderColor,
+                          }}
+                        >
                           {GlobaldummyData
                             ? 'ABC Shop'
                             : table2Data?.BrName}{' '}
@@ -3078,7 +3086,10 @@ const PrintStyle10 = ({
                 </div>
 
                 <div className="Address" style={{ fontWeight: '600' }}>
-                  <div className="ShopName" style={{ fontWeight: '600' }}>
+                    <div
+                    className="ShopName"
+                    style={{ fontWeight: '600', color: SelectedHeaderColor }}
+                  >
                     {GlobaldummyData ? 'ABC Shop' : table2Data?.BrName}{' '}
                   </div>
                   {GlobaldummyData

src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle11.jsx

@@ -29,6 +29,7 @@ import {
   GlobalprintLogo,
   GlobalprintCredit,
   GlobalprintTax,
+  GlobalSelectedPrintHeaderColor,
 } from '../../../../Features/ThemeChange/ThemeChange';
 import {
   GlobalUpiIDprint,
@@ -405,6 +406,7 @@ const PrintStyle11 = ({
                             fontWeight: '600',
                             // fontFamily: "Lemon",
                             fontSize: 'clamp(1rem, 2.5vw, 2.5rem)',
+                              color: SelectedHeaderColor,
                           }}
                         >
                           {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
@@ -3051,6 +3053,7 @@ const PrintStyle11 = ({
                       fontWeight: '600',
                       // fontFamily: "Lemon",
                       fontSize: 'clamp(1rem, 2.5vw, 2.5rem)',
+                        color: SelectedHeaderColor,
                     }}
                   >
                     {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
@@ -3155,7 +3158,7 @@ const PrintStyle11 = ({
 
                 <table
                   className="PrintStyle11-print-table"
-                  style={{ width: GlobaldummyData ? '100%' : '90%' }}
+                  style={{ width: GlobaldummyData ? '100%' : '' }}
                 >
                   <thead>
                     <tr>

src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle12.jsx

@@ -30,6 +30,7 @@ import {
   GlobalprintLogo,
   GlobalprintCredit,
   GlobalprintTax,
+  GlobalSelectedPrintHeaderColor,
 } from '../../../../Features/ThemeChange/ThemeChange';
 import {
   GlobalUpiIDprint,
@@ -540,6 +541,7 @@ const Printstyle12 = ({
                         style={{
                           fontSize: 'clamp(0.75rem, 2.5vw, 1.8rem)',
                           fontWeight: '600',
+                          color: SelectedHeaderColor,
                         }}
                       >
                         {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
@@ -1427,7 +1429,6 @@ const Printstyle12 = ({
                             )}
                           </>
                         )}
-
                         {table2Data?.OrderType === 'E' ? (
                           ''
                         ) : (
@@ -1756,7 +1757,6 @@ const Printstyle12 = ({
                                 : 0}
                           </div>
                         </div>
-
                         {/* <div style={{ display: "flex", justifyContent: "space-between" }}>
                             <div style={{ width: '45%' }}>
                                 Recived Amt
@@ -2420,7 +2420,6 @@ const Printstyle12 = ({
                           )}
                         </>
                       )}
-
                       {!estimatePrintHeader && table2Data?.OrderType === 'E' ? (
                         ''
                       ) : (
@@ -3217,6 +3216,7 @@ const Printstyle12 = ({
                   style={{
                     fontSize: 'clamp(0.75rem, 2.5vw, 1.8rem)',
                     fontWeight: '600',
+                    color: SelectedHeaderColor,
                   }}
                 >
                   {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
@@ -4000,7 +4000,6 @@ const Printstyle12 = ({
                   ))}
                 </>
               )}
-
               {table2Data?.OrderType === 'E' ? (
                 ''
               ) : (

src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle2.jsx

@@ -28,6 +28,7 @@ import {
   GlobalprintLogo,
   GlobalprintCredit,
   GlobalprintTax,
+  GlobalSelectedPrintHeaderColor,
 } from '../../../../Features/ThemeChange/ThemeChange';
 import Logo from '../../../../Images/Logo.jpg';
 import QRCode from 'react-qr-code';
@@ -93,6 +94,7 @@ const Printstyle2 = ({
   const paymentTypeUPI = PaymentStatus?.find(
     (ps) => ps.PaymentTypeName === 'UPI'
   );
+   const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
   console.log(Qrcodet, 'Qrcodet', paymentTypeUPI);
   const GlobalSignature = useSelector(GlobalprintSignature);
   const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
@@ -411,7 +413,13 @@ const Printstyle2 = ({
                         fontWeight: '600',
                       }}
                     >
-                      <div style={{ fontSize: '18px', fontWeight: '600' }}>
+        <div
+                        style={{
+                          fontSize: '18px',
+                          fontWeight: '600',
+                          color: SelectedHeaderColor,
+                        }}
+                      >
                         {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
                       </div>
 
@@ -3029,7 +3037,13 @@ const Printstyle2 = ({
                   fontWeight: '600',
                 }}
               >
-                <div style={{ fontSize: '18px', fontWeight: '600' }}>
+              <div
+                  style={{
+                    fontSize: '18px',
+                    fontWeight: '600',
+                    color: SelectedHeaderColor,
+                  }}
+                >
                   {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
                 </div>
 

src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle4.jsx

@@ -28,9 +28,13 @@ import {
   GlobalprintLogo,
   GlobalprintCredit,
   GlobalprintTax,
+  GlobalSelectedPrintHeaderColor,
 } from '../../../../Features/ThemeChange/ThemeChange';
 import '../../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle4.scss';
-import { GlobalUpiIDprint, PreferenceData } from '../../../../Features/BookingScreen/BookingData/BookingData';
+import {
+  GlobalUpiIDprint,
+  PreferenceData,
+} from '../../../../Features/BookingScreen/BookingData/BookingData';
 import QRCode from 'react-qr-code';
 import signature from '../../../../Images/signatureimage.jpg';
 import { ApplicationPreferences } from '../../../../Features/BrachLogin/BranchLogin';
@@ -131,6 +135,7 @@ const Printstyle4 = ({
   const paymentTypeUPI = PaymentStatus?.find(
     (ps) => ps.PaymentTypeName === 'UPI'
   );
+  const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
 
   console.log(GlobalDiscount, Discount, 'Discount');
 
@@ -423,6 +428,7 @@ const Printstyle4 = ({
                           fontWeight: '600',
                           width: '100%',
                           textAlign: 'center',
+                           color: SelectedHeaderColor,
                         }}
                       >
                         {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}{' '}

src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle5.jsx

@@ -28,6 +28,7 @@ import {
   GlobalprintLogo,
   GlobalprintCredit,
   GlobalprintTax,
+  GlobalSelectedPrintHeaderColor,
 } from '../../../../Features/ThemeChange/ThemeChange';
 import {
   GlobalUpiIDprint,
@@ -124,6 +125,8 @@ const PrintStyle5 = ({
     (ps) => ps.PaymentTypeName === 'UPI'
   );
 
+  const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
+
   console.log(GlobalDiscount, Discount, 'Discount');
 
   let TermsAndConditions = printDatas?.TermsandConditions;
@@ -394,6 +397,7 @@ const PrintStyle5 = ({
                         style={{
                           fontSize: 'clamp(2rem, 2.5vw, 2rem)',
                           fontWeight: '600',
+                          color: SelectedHeaderColor,
                         }}
                       >
                         {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
@@ -2686,6 +2690,7 @@ const PrintStyle5 = ({
                   style={{
                     fontSize: 'clamp(2rem, 2.5vw, 2rem)',
                     fontWeight: '600',
+                    color: SelectedHeaderColor,
                   }}
                 >
                   {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}

src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle6.jsx

@@ -29,6 +29,7 @@ import {
   GlobalprintLogo,
   GlobalprintCredit,
   GlobalprintTax,
+  GlobalSelectedPrintHeaderColor,
 } from '../../../../Features/ThemeChange/ThemeChange';
 import {
   GlobalUpiIDprint,
@@ -412,8 +413,10 @@ const Printstyle6 = ({
                           />
                         ) : null}
                       </div>
+                      <div style={{ color: SelectedHeaderColor }}>
                         {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
                       </div>
+                    </div>
 
                     <div style={{ fontSize: 'clamp(0.75rem, 2.5vw, 1rem)' }}>
                       {GlobaldummyData
@@ -3264,8 +3267,10 @@ const Printstyle6 = ({
                     />
                   ) : null}
                 </div>
+               <div style={{ color: SelectedHeaderColor }}>
                   {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
                 </div>
+              </div>
 
               <div style={{ fontSize: 'clamp(0.75rem, 2.5vw, 1rem)' }}>
                 {GlobaldummyData

src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle7.jsx

@@ -25,6 +25,7 @@ import {
   GlobalprintLogo,
   GlobalprintCredit,
   GlobalprintTax,
+  GlobalSelectedPrintHeaderColor,
 } from '../../../../Features/ThemeChange/ThemeChange';
 import Logo from '../../../../Images/Logo.jpg';
 import {
@@ -423,7 +424,13 @@ const PrintStyle7 = ({
                           width={100}
                         />
                       ) : null}
-                      <div style={{ fontSize: '16px', fontWeight: '600' }}>
+                      <div
+                        style={{
+                          fontSize: '16px',
+                          fontWeight: '600',
+                          color: SelectedHeaderColor,
+                        }}
+                      >
                         {' '}
                         {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
                       </div>
@@ -1591,7 +1598,7 @@ const PrintStyle7 = ({
                           style={{
                             marginLeft: '13px',
                             padding: 0,
-                            fontSize: '10px',
+                            fontSize: '8px',
                             fontWeight: '600',
                           }}
                         >
@@ -1609,7 +1616,7 @@ const PrintStyle7 = ({
                             style={{
                               marginLeft: '13px',
                               padding: 0,
-                              fontSize: '10px',
+                              fontSize: '8px',
                               fontWeight: '600',
                             }}
                           >
@@ -2495,7 +2502,7 @@ const PrintStyle7 = ({
                         style={{
                           marginLeft: '13px',
                           padding: 0,
-                          fontSize: '10px',
+                          fontSize: '8px',
                           fontWeight: '600',
                         }}
                       >
@@ -2513,7 +2520,7 @@ const PrintStyle7 = ({
                           style={{
                             marginLeft: '13px',
                             padding: 0,
-                            fontSize: '10px',
+                            fontSize: '8px',
                             fontWeight: '600',
                           }}
                         >
@@ -2869,7 +2876,13 @@ const PrintStyle7 = ({
                     width={100}
                   />
                 ) : null}
-                <div style={{ fontSize: '16px', fontWeight: '600' }}>
+                <div
+                  style={{
+                    fontSize: '16px',
+                    fontWeight: '600',
+                    color: SelectedHeaderColor,
+                  }}
+                >
                   {' '}
                   {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
                 </div>
@@ -3964,7 +3977,7 @@ const PrintStyle7 = ({
                 style={{
                   marginLeft: '13px',
                   padding: 0,
-                  fontSize: '10px',
+                  fontSize: '8px',
                   fontWeight: '600',
                 }}
               >
@@ -3982,7 +3995,7 @@ const PrintStyle7 = ({
                   style={{
                     marginLeft: '13px',
                     padding: 0,
-                    fontSize: '10px',
+                    fontSize: '8px',
                     fontWeight: '600',
                   }}
                 >
@@ -3996,7 +4009,7 @@ const PrintStyle7 = ({
                 style={{
                   marginLeft: '13px',
                   padding: 0,
-                  fontSize: '10px',
+                  fontSize: '8px',
                   fontWeight: '600',
                 }}
               >

src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle8.jsx

@@ -28,6 +28,7 @@ import {
   GlobalprintLogo,
   GlobalprintCredit,
   GlobalprintTax,
+  GlobalSelectedPrintHeaderColor,
 } from '../../../../Features/ThemeChange/ThemeChange';
 import Logo from '../../../../Images/Logo.jpg';
 import {
@@ -140,6 +141,10 @@ const Printstyle8 = ({
     (ps) => ps.PaymentStatus === 'S' && ps?.LastOrderTran === 'Y'
   );
 
+   const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
+
+  console.log(GlobalDiscount, Discount, 'Discount');
+
   let TermsAndConditions = printDatas?.TermsandConditions;
   let SignatureImg = printDatas?.Signature;
   let Notestext = printDatas?.Notes;
@@ -436,6 +441,7 @@ const Printstyle8 = ({
                         style={{
                           fontSize: 'clamp(1.25rem, 2.5vw, 1.75rem)',
                           fontWeight: '600',
+                            color: SelectedHeaderColor,
                         }}
                       >
                         {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
@@ -1763,7 +1769,6 @@ const Printstyle8 = ({
                           padding: 0,
                           fontSize: '15px',
                           fontWeight: '600',
-                          textAlign: 'center',
                         }}
                       >
                         {PaymentStatusSuccess?.length === 1
@@ -1870,6 +1875,7 @@ const Printstyle8 = ({
                         {GlobaldummyData && GlobalCashierName && (
                           <div
                             style={{
+                              marginLeft: '14px',
                               padding: 0,
                               fontSize: '12px',
                               fontWeight: '600',
@@ -1886,6 +1892,7 @@ const Printstyle8 = ({
                           CashierNameField && (
                             <div
                               style={{
+                                marginLeft: '14px',
                                 padding: 0,
                                 fontSize: '12px',
                                 fontWeight: '600',
@@ -2001,13 +2008,7 @@ const Printstyle8 = ({
                       )}
                     </div>
 
-                    <div
+                    <div style={{ fontSize: '10px' }}>
-                      style={{
-                        fontSize: '12px',
-                        fontWeight: '600',
-                        color: '#000',
-                      }}
-                    >
                       Your Order No :
                       {GlobaldummyData
                         ? '01'
@@ -2761,7 +2762,6 @@ const Printstyle8 = ({
                         padding: 0,
                         fontSize: '15px',
                         fontWeight: '600',
-                        textAlign: 'center',
                       }}
                     >
                       {PaymentStatusSuccess?.length === 1
@@ -2868,6 +2868,7 @@ const Printstyle8 = ({
                       {GlobaldummyData && GlobalCashierName && (
                         <div
                           style={{
+                            marginLeft: '14px',
                             padding: 0,
                             fontSize: '12px',
                             fontWeight: '600',
@@ -2884,6 +2885,7 @@ const Printstyle8 = ({
                         CashierNameField && (
                           <div
                             style={{
+                              marginLeft: '14px',
                               padding: 0,
                               fontSize: '12px',
                               fontWeight: '600',
@@ -2990,13 +2992,7 @@ const Printstyle8 = ({
                     )}
                   </div>
 
-                  <div
+                  <div style={{ fontSize: '10px' }}>
-                    style={{
-                      fontSize: '12px',
-                      fontWeight: '600',
-                      color: '#000',
-                    }}
-                  >
                     Your Order No :
                     {GlobaldummyData
                       ? '01'
@@ -3247,6 +3243,7 @@ const Printstyle8 = ({
                   style={{
                     fontSize: 'clamp(1.25rem, 2.5vw, 1.75rem)',
                     fontWeight: '600',
+                      color: SelectedHeaderColor,
                   }}
                 >
                   {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
@@ -4351,7 +4348,6 @@ const Printstyle8 = ({
                 padding: 0,
                 fontSize: '14px',
                 fontWeight: '600',
-                textAlign: 'center',
               }}
             >
               {PaymentStatusSuccess?.length === 1
@@ -4442,6 +4438,7 @@ const Printstyle8 = ({
               {GlobaldummyData && GlobalCashierName && (
                 <div
                   style={{
+                    marginLeft: '14px',
                     padding: 0,
                     fontSize: '12px',
                     fontWeight: '600',
@@ -4458,6 +4455,7 @@ const Printstyle8 = ({
                 CashierNameField && (
                   <div
                     style={{
+                      marginLeft: '14px',
                       padding: 0,
                       fontSize: '12px',
                       fontWeight: '600',
@@ -4563,7 +4561,7 @@ const Printstyle8 = ({
             )}
           </div>
 
-          <div style={{ fontSize: '12px', fontWeight: '600', color: '#000' }}>
+          <div style={{ fontSize: '10px' }}>
             Your Order No :
             {GlobaldummyData
               ? '01'

src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle9.jsx

@@ -28,6 +28,7 @@ import {
   GlobalprintLogo,
   GlobalprintCredit,
   GlobalprintTax,
+  GlobalSelectedPrintHeaderColor,
 } from '../../../../Features/ThemeChange/ThemeChange';
 import Logo from '../../../../Images/Logo.jpg';
 import {
@@ -135,6 +136,7 @@ const PrintStyle9 = ({
     (ps) => ps.PaymentStatus === 'S' && ps?.LastOrderTran === 'Y'
   );
 
+   const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
   let TermsAndConditions = printDatas?.TermsandConditions;
   let SignatureImg = printDatas?.Signature;
   let Notestext = printDatas?.Notes;
@@ -427,6 +429,7 @@ const PrintStyle9 = ({
                         style={{
                           fontSize: 'clamp(1.5rem, 2.5vw, 2rem)',
                           fontWeight: '600',
+                           color: SelectedHeaderColor,
                         }}
                         className="PrintStyle9-Branch"
                       >
@@ -3164,6 +3167,7 @@ const PrintStyle9 = ({
                   style={{
                     fontSize: 'clamp(1.5rem, 2.5vw, 2rem)',
                     fontWeight: '600',
+                     color: SelectedHeaderColor,
                   }}
                   className="PrintStyle9-Branch"
                 >

src/Pages/BookingScreen/Template/SalesCountForStandard.jsx

@@ -60,6 +60,7 @@ import { GoPackageDependencies } from 'react-icons/go';
 import { Messages } from '../../../../ownLib/my-ui-lib.js';
 
 import ShortcutKeyHelper from '../Components/UtillComponents/ShortcutKeyHelper.jsx';
+import AllSalesPageSettings from '../Components/UtillComponents/AllSalesPageSettings.jsx';
 
 const SalesCountForStandard = ({
   DineInAccess,
@@ -830,6 +831,7 @@ const SalesCountForStandard = ({
         </button>
       )}
       {preferenceshortcutkey && <ShortcutKeyHelper />}
+      <AllSalesPageSettings />
       <div style={{ display: 'flex', alignItems: 'center' }}>
         {Customisebillno && <CustomisedInvoiceChange />}
         {SessionData?.FeatureAddonData?.FeatureDtls?.find(

src/Pages/Payment/PaymentOptions/PaymentOptions.jsx

@@ -33,7 +33,7 @@ import { FaCreditCard } from 'react-icons/fa';
 
 const subDirectory = import.meta.env.BASE_URL;
 
-function PaymentOptions() {
+function PaymentOptions({ setModalOpen }) {
   const { SadminuserAccess } = useAuth();
   let SAAccessCommonMaster = SadminuserAccess?.find(
     (e) => e?.MenuName === 'Payment Options'
@@ -1356,6 +1356,7 @@ function PaymentOptions() {
             : 'Data Updated Successfully'
         );
         await dispatch(changeSalesPaymentoption(false));
+        setModalOpen(false)
         // ✅ Call the function here to update global state
         try {
           await fetchAndSetPaymentOptions(dispatch, {

src/Pages/Preference/PreferenceList.jsx

@@ -752,8 +752,7 @@ const PreferenceList = () => {
 
               {renderCheckbox('scanlayout', 'Do you Want Scan Layout Page?')}
             </div>
-
+            <div className="PreferencesBTN">
-            <div className="submitButton">
               <Buttons
                 buttonText="Submit Preferences"
                 color="901D77"

src/Pages/Preference/PreferenceList.scss

@@ -1,12 +1,12 @@
 .preferences-list {
-  max-height: 84vh;
+  max-height: 75vh;
   overflow-y: auto;
   background: #fff;
   width: 100%;
   scrollbar-width: thin;
   scroll-behavior: smooth;
   border-radius: 12px;
-  padding-bottom: 4rem;
+  padding-bottom: 3rem;
 
   .preference-headers {
     font-size: 1.2rem;
@@ -41,7 +41,7 @@
   }
 
   .ant-form-item {
-    margin-bottom: 1.2rem;
+    margin-bottom: 1rem;
   }
 
   .ant-checkbox-wrapper,
@@ -49,11 +49,6 @@
     margin-right: 1rem;
   }
 
-  .ant-btn {
-    margin-top: 2rem;
-    float: right;
-  }
-
   // Optional: Scrollbar for long modals
   &::-webkit-scrollbar {
     width: 6px;
@@ -89,7 +84,7 @@
   padding: 10px 0;
 
   > div {
-    font-family: 'Poppins';
+    font-family: "Poppins";
     font-weight: 400;
     font-size: 14px;
     margin: 4px 0;
@@ -154,3 +149,13 @@
     }
   }
 }
+.PreferencesBTN {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  width: 100%;
+  margin-top: 1rem;
+  .primary_Button {
+    width: 200px !important;
+  }
+}

src/Pages/PurchaseOrder/PurchaseOrder.jsx

@@ -970,7 +970,7 @@ console.log('hi');
       PostData['LocationType'] = Supplierdata?.find(
         (find) => find.SuppId === selecPurSupplier
       )?.Type;
-      PostData['DeliveryAddressDetails'] = deliveryAddress;
+      PostData['DeliveryAddressDetails'] = [deliveryAddress];
       let PostPurOrder = await dispatch(postPurcOrderData(PostData)).unwrap();
       if (PostPurOrder?.data?.statusCode === 1) {
         setMessage({ type: 'success', data: PostPurOrder?.data?.response });
@@ -2371,7 +2371,7 @@ console.log('hi');
                     >
                       <InputField
                         autoComplete="off"
-                        label={<label class="required">Address</label>}
+                        label={<label class="required">Address 1</label>}
                       />
                     </Form.Item>
                     <Form.Item
@@ -2392,7 +2392,7 @@ console.log('hi');
                     >
                       <InputField
                         autoComplete="off"
-                        label={<label class="required">Address</label>}
+                        label={<label class="required">Address 2</label>}
                       />
                     </Form.Item>
                     <Form.Item

src/Pages/StockMaster/StockBulkUpload.jsx

@@ -1,4 +1,10 @@
-import React, { useState, useRef, useEffect, useContext, useCallback } from 'react';
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useContext,
+  useCallback,
+} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { read, utils } from 'xlsx';
 import ExcelJS from 'exceljs';
@@ -19,12 +25,15 @@ import { MdOutlineAppRegistration } from 'react-icons/md';
 import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx';
 import Buttons from '../../Components/Forms/Buttons.jsx';
 import { IoClose } from 'react-icons/io5';
-import { ArrowRightOutlined } from '@ant-design/icons'
+import { ArrowRightOutlined } from '@ant-design/icons';
 import { ApplicationPreferences } from '../../Features/BrachLogin/BranchLogin.js';
 import FormHeader from '../PageComponents/FormHeader.jsx';
 import { DropDowns } from '../../Components/Forms/DropDown.jsx';
 import { getSession } from '../../Services/Others.js';
-import { getFieldSetupData, postFieldSetup } from '../../Features/ProductPage/ProductPage.js';
+import {
+  getFieldSetupData,
+  postFieldSetup,
+} from '../../Features/ProductPage/ProductPage.js';
 import { Messages } from '../../Components/Notifications/Messages.jsx';
 import { getPurchaseSupplierAndWareHouseData } from '../../Features/PurchaseOrder/PurchaseOrder.js';
 import { getSupplaierIdwithTypeBasedProducts } from '../../Features/SupplierProductMapping/SupplierProductMapping.js';
@@ -57,10 +66,10 @@ const StockExcel = ({
 
   const dispatch = useDispatch();
 
-  const AppId = getSession("AppId");
+  const AppId = getSession('AppId');
-  const CompId = getSession("CompId");
+  const CompId = getSession('CompId');
-  const BranchId = getSession("BranchId");
+  const BranchId = getSession('BranchId');
-  const UserId = getSession("UserId");
+  const UserId = getSession('UserId');
 
   const formRef = useRef(null);
   const fileInputRef = useRef(fileInputRefSelector);
@@ -70,14 +79,14 @@ const StockExcel = ({
   const excelFileError = useSelector(excelFileErrorSelector);
   const ApplicationPreferenceData = useSelector(ApplicationPreferences);
   const purchaseReceiptBulkUploadCatId = ApplicationPreferenceData?.find(
-    p => p?.PreferredCatName?.toLowerCase() === "purchase receipt bulk"
+    (p) => p?.PreferredCatName?.toLowerCase() === 'purchase receipt bulk'
   )?.PreferredCatId;
 
   const [worksheet1, setWorksheet1] = useState(null);
   const [editdelete, seteditdelete] = useState('');
 
   const [Datas, setDatas] = useState();
-  console.log(Datas, "Datas")
+  console.log(Datas, 'Datas');
   const [showSupplierModal, setShowSupplierModal] = useState(false);
   const [suppliers, setSuppliers] = useState([]);
   const [selectedSupplier, setSelectedSupplier] = useState(null);
@@ -96,7 +105,7 @@ const StockExcel = ({
 
   useEffect(() => {
     getFieldSetup();
-  }, [purchaseReceiptBulkUploadCatId])
+  }, [purchaseReceiptBulkUploadCatId]);
 
   const onComplete = useCallback(() => {
     setMessageData(null);
@@ -105,19 +114,33 @@ const StockExcel = ({
 
   const getFieldSetup = async () => {
     try {
-      const response = await dispatch(getFieldSetupData({ AppId, CompId, BranchId, categoryId: purchaseReceiptBulkUploadCatId, Type: 'EB' })).unwrap();
+      const response = await dispatch(
+        getFieldSetupData({
+          AppId,
+          CompId,
+          BranchId,
+          categoryId: purchaseReceiptBulkUploadCatId,
+          Type: 'EB',
+        })
+      ).unwrap();
       if (response?.data?.statusCode === 1) {
-        console.log(response?.data?.data?.[0]?.ConfigDtl, "Field Setup Data");
+        console.log(response?.data?.data?.[0]?.ConfigDtl, 'Field Setup Data');
-        setSelectedFields(response?.data?.data?.[0]?.ConfigDtl?.filter(c => c.ConfigId && c.Access === 'Y')?.map(c => c.ConfigId) || []);
+        setSelectedFields(
-        setTableFieldPreferences(response?.data?.data?.[0]?.ConfigDtl?.map(c => ({
+          response?.data?.data?.[0]?.ConfigDtl?.filter(
+            (c) => c.ConfigId && c.Access === 'Y'
+          )?.map((c) => c.ConfigId) || []
+        );
+        setTableFieldPreferences(
+          response?.data?.data?.[0]?.ConfigDtl?.map((c) => ({
             value: c.ConfigId,
             label: c.ConfigName,
-          access: c.Access
+            access: c.Access,
-        })) || []);
+          })) || []
+        );
         setFieldValues(response?.data?.data?.[0]?.ConfigDtl);
       } else {
-        setMessageType("error");
+        setMessageType('error');
-        setMessageData("Failed to fetch field setup");
+        setMessageData('Failed to fetch field setup');
       }
     } catch (error) {
       console.error('Error fetching field setup:', error);
@@ -131,7 +154,7 @@ const StockExcel = ({
 
       slicedData.forEach((item, index) => {
         // Skip empty rows
-        if (!item || Object.values(item).every(val => !val)) return;
+        if (!item || Object.values(item).every((val) => !val)) return;
 
         const rowData = {
           key: index,
@@ -164,8 +187,10 @@ const StockExcel = ({
         if (String(supplierValue).trim() === 'Self') {
           rowData.OwnWithPaid = item['2'];
           // Shift all subsequent columns by 1
-          Object.keys(rowData).forEach(key => {
+          Object.keys(rowData).forEach((key) => {
-            if (!['key', 'InwardDate', 'Supplier', 'OwnWithPaid'].includes(key)) {
+            if (
+              !['key', 'InwardDate', 'Supplier', 'OwnWithPaid'].includes(key)
+            ) {
               const currentIndex = parseInt(Object.keys(rowData).indexOf(key));
               rowData[key] = item[currentIndex.toString()];
             }
@@ -182,18 +207,26 @@ const StockExcel = ({
           { key: 'BatchNo', header: 'Batch No.' },
           { key: 'ModelNo', header: 'Model No.' },
           { key: 'RejectedQty', header: 'Rejected Qty' },
-          { key: 'FreeQty', header: 'Free Qty' }
+          { key: 'FreeQty', header: 'Free Qty' },
+          { key: 'WholesalePrice', header: 'Wholesale Price' },
         ];
 
         // Get headers from first row to determine which optional fields exist
         const headers = excelData[0];
-        optionalFields.forEach(field => {
+        optionalFields.forEach((field) => {
           if (headers.includes(field.header)) {
             rowData[field.key] = item[currentColIndex.toString()];
             currentColIndex++;
           }
         });
-        if (rowData?.Amount && rowData?.MRP && rowData?.SalesPrice && rowData?.ProductName && rowData?.PaymentAmount) {
+        if (
+          rowData?.PurchaseRate &&
+          rowData?.Amount &&
+          rowData?.MRP &&
+          rowData?.SalesPrice &&
+          rowData?.ProductName &&
+          rowData?.PaymentAmount
+        ) {
           ExcelToJsConversion.push(rowData);
         }
       });
@@ -292,12 +325,17 @@ const StockExcel = ({
   // ...existing code...
   const handleDownload = async () => {
     try {
-      if (!supplierProducts || supplierProducts.length === 0 || !selectedSupplierData) {
+      if (
+        !supplierProducts ||
+        supplierProducts.length === 0 ||
+        !selectedSupplierData
+      ) {
         setMessageData('No products available to generate Excel.');
         setMessageType('warning');
         return;
       }
-      const supplierDisplayName = getSupplierDisplayName(selectedSupplierData) || 'Supplier';
+      const supplierDisplayName =
+        getSupplierDisplayName(selectedSupplierData) || 'Supplier';
       // Fetch excelColumns config (optional fields access)
       let excelColumns = [];
       try {
@@ -314,12 +352,17 @@ const StockExcel = ({
           excelColumns = response?.data?.data?.[0]?.ConfigDtl || [];
         }
       } catch (err) {
-        console.warn('Failed to fetch excelColumns config, proceeding with defaults', err);
+        console.warn(
+          'Failed to fetch excelColumns config, proceeding with defaults',
+          err
+        );
         excelColumns = [];
       }
 
       const isOptionalFieldAllowed = (name) => {
-        const found = excelColumns.find((c) => String(c.ConfigName).trim() === String(name).trim());
+        const found = excelColumns.find(
+          (c) => String(c.ConfigName).trim() === String(name).trim()
+        );
         return found ? found.Access === 'Y' : false;
       };
 
@@ -331,7 +374,7 @@ const StockExcel = ({
           allowBlank: allowBlank,
           showErrorMessage: true,
           errorTitle: 'Invalid Number',
-          error: 'Please enter a valid number'
+          error: 'Please enter a valid number',
         };
       };
 
@@ -374,12 +417,20 @@ const StockExcel = ({
       pushCol('Amount Per Piece', 'AmountPerPiece', true);
       pushCol('Number of Piece Inside', 'NumberofPieceInside', true);
 
-      if (isOptionalFieldAllowed('Manufacture Date')) pushCol('Manufacture Date', 'ManufDate', false);
+      if (isOptionalFieldAllowed('Manufacture Date'))
-      if (isOptionalFieldAllowed('Expire Date')) pushCol('Expire Date', 'ExpDate', false);
+        pushCol('Manufacture Date', 'ManufDate', false);
-      if (isOptionalFieldAllowed('Batch No.')) pushCol('Batch No.', 'BatchNo', false);
+      if (isOptionalFieldAllowed('Expire Date'))
-      if (isOptionalFieldAllowed('Model No.')) pushCol('Model No.', 'ModelNo', false);
+        pushCol('Expire Date', 'ExpDate', false);
-      if (isOptionalFieldAllowed('Rejected Qty')) pushCol('Rejected Qty', 'RejectedQty', false);
+      if (isOptionalFieldAllowed('Batch No.'))
-      if (isOptionalFieldAllowed('Free Qty')) pushCol('Free Qty', 'FreeQty', false);
+        pushCol('Batch No.', 'BatchNo', false);
+      if (isOptionalFieldAllowed('Model No.'))
+        pushCol('Model No.', 'ModelNo', false);
+      if (isOptionalFieldAllowed('Rejected Qty'))
+        pushCol('Rejected Qty', 'RejectedQty', false);
+      if (isOptionalFieldAllowed('Free Qty'))
+        pushCol('Free Qty', 'FreeQty', false);
+      if (isOptionalFieldAllowed('Wholesale Price'))
+        pushCol('Wholesale Price', 'WholesalePrice', false);
 
       worksheet.columns = columns.map((c) => ({
         header: c.header,
@@ -388,7 +439,11 @@ const StockExcel = ({
           c.key === 'ProdName' || c.key === 'VariantName'
             ? 40
             : c.key === 'Quantity'
-              ? 10 : c.key === 'Supplier' || c.key === 'InvoiceDeliveryChallan' || c.key === 'SupplierInvoiceNumber' ? 30
+              ? 10
+              : c.key === 'Supplier' ||
+                c.key === 'InvoiceDeliveryChallan' ||
+                c.key === 'SupplierInvoiceNumber'
+                ? 30
                 : 20,
       }));
 
@@ -410,12 +465,21 @@ const StockExcel = ({
         };
       });
 
-      hiddenSheet.addRow(['ProductName', 'VariantName', 'MRP', 'SellPrice', 'Number of Piece Inside', 'Amount Per Piece']);
+      hiddenSheet.addRow([
+        'ProductName',
+        'VariantName',
+        'MRP',
+        'SellPrice',
+        'Number of Piece Inside',
+        'Amount Per Piece',
+      ]);
       let currentRow = 2;
       const productNames = supplierProducts.map((p) => p.ProdName);
 
       supplierProducts.forEach((product) => {
-        const activeVariants = (product.ProdVariantPriceDetails || []).filter(v => v.ActiveStatus === 'A');
+        const activeVariants = (product.ProdVariantPriceDetails || []).filter(
+          (v) => v.ActiveStatus === 'A'
+        );
         const uniqueVariantsMap = new Map();
         activeVariants.forEach((variant) => {
           const variantName = variant.ProdVariantName;
@@ -442,7 +506,8 @@ const StockExcel = ({
           .trim()
           .replace(/[^A-Za-z0-9_]/g, '_')
           .replace(/^(\d)/, '_$1');
-        if (!safeName) safeName = `Product_${Math.random().toString(36).slice(2, 8)}`;
+        if (!safeName)
+          safeName = `Product_${Math.random().toString(36).slice(2, 8)}`;
         const rangeRef = `ProductVariantMap!$B$${startRow}:$B$${endRow}`;
         try {
           workbook.definedNames.add(rangeRef, safeName);
@@ -452,10 +517,41 @@ const StockExcel = ({
       });
 
       const startDataRow = 2;
-      const numberOfRows = 50;
+      const today = new Date();
-      for (let i = 0; i < numberOfRows; i++) {
+
-        worksheet.addRow({});
+      // Pre-populate all products and variants as rows
+      supplierProducts.forEach((product) => {
+        const activeVariants = (product.ProdVariantPriceDetails || []).filter(
+          (v) => v.ActiveStatus === 'A'
+        );
+        const uniqueVariantsMap = new Map();
+        activeVariants.forEach((variant) => {
+          const variantName = variant.ProdVariantName;
+          if (!uniqueVariantsMap.has(variantName)) {
+            uniqueVariantsMap.set(variantName, variant);
           }
+        });
+        const uniqueVariants = Array.from(uniqueVariantsMap.values());
+
+        uniqueVariants.forEach((variant) => {
+          const rowData = {
+            InwardDate: today,
+            Supplier: supplierDisplayName,
+            ProdName: product.ProdName,
+            VariantName: variant.ProdVariantName,
+            MRP: variant.MRP || 0,
+            SalesPrice: variant.SellPrice || 0,
+            NumberofPieceInside: variant.NoOfPcs || 0,
+            AmountPerPiece: variant.OnePcsPrice || 0,
+          };
+
+          if (String(selectedSupplierData?.SuppName).trim() === 'Self') {
+            rowData.OwnWithPaid = '';
+          }
+
+          worksheet.addRow(rowData);
+        });
+      });
 
       const colKeyToIndex = {};
       worksheet.columns.forEach((c, idx) => {
@@ -473,47 +569,19 @@ const StockExcel = ({
         return s;
       };
 
-      const today = new Date();
       const inwardDateCol = colIndex('InwardDate');
-      if (inwardDateCol) {
+      const numberOfRows = worksheet.rowCount;
-        const cell = worksheet.getCell(`${colLetter(inwardDateCol)}${startDataRow}`);
-        cell.value = today;
-        cell.numFmt = 'yyyy-mm-dd';
-      }
 
-      const supplierName = selectedSupplierData?.SuppName || '';
+      for (let r = startDataRow; r <= numberOfRows; r++) {
-      const productNamesLiteral = productNames.join(',');
-
-      for (let r = startDataRow; r < startDataRow + numberOfRows; r++) {
         if (colIndex('ProdName')) {
           const cIdx = colIndex('ProdName');
-          const letter = colLetter(cIdx);
+          const cell = worksheet.getCell(r, cIdx);
-          const prodCellRef = `${letter}${r}`;
+          cell.protection = { locked: true };
-          const cell = worksheet.getCell(prodCellRef);
-          cell.dataValidation = {
-            type: 'list',
-            allowBlank: false,
-            formulae: [`"${productNamesLiteral}"`],
-          };
-          cell.protection = { locked: false };
         }
         if (colIndex('VariantName')) {
           const cIdx = colIndex('VariantName');
-          const letter = colLetter(cIdx);
+          const cell = worksheet.getCell(r, cIdx);
-          const varCellRef = `${letter}${r}`;
+          cell.protection = { locked: true };
-          const productColLetter = colLetter(colIndex('ProdName'));
-          const productCellRef = `${productColLetter}${r}`;
-          const formula = `INDIRECT(SUBSTITUTE(SUBSTITUTE(SUBSTITUTE(SUBSTITUTE(SUBSTITUTE(SUBSTITUTE(SUBSTITUTE(SUBSTITUTE(SUBSTITUTE(SUBSTITUTE(${productCellRef}," ","_"),"-","_"),"&","_"),"/","_"),".","_"),"(","_"),")","_"),"[","_"),"]","_"),",","_"))`;
-          const cell = worksheet.getCell(varCellRef);
-          cell.dataValidation = {
-            type: 'list',
-            allowBlank: true,
-            formulae: [formula],
-            showErrorMessage: true,
-            errorTitle: 'Invalid Variant',
-            error: 'Please select a variant from the dropdown'
-          };
-          cell.protection = { locked: false };
         }
         if (colIndex('Quantity')) {
           const cIdx = colIndex('Quantity');
@@ -544,7 +612,8 @@ const StockExcel = ({
             error: 'Must be a valid number and less than total quantity',
             showInputMessage: true,
             promptTitle: 'Rejected Qty',
-            prompt: 'Enter rejected quantity (must be less than total quantity)'
+            prompt:
+              'Enter rejected quantity (must be less than total quantity)',
           };
           rejCell.protection = { locked: false };
         }
@@ -565,31 +634,55 @@ const StockExcel = ({
             formulae: [new Date(1900, 0, 1)],
             showErrorMessage: true,
             errorTitle: 'Invalid Date',
-            error: 'Please enter a valid date'
+            error: 'Please enter a valid date',
           };
           dCell.protection = { locked: false };
         }
         if (colIndex('Supplier')) {
           const cIdx = colIndex('Supplier');
           const cell = worksheet.getCell(r, cIdx);
-          cell.dataValidation = { type: 'list', formulae: [`"${supplierDisplayName}"`] };
+          cell.protection = { locked: true };
-          cell.value = supplierDisplayName;
-          cell.protection = { locked: false };
         }
+
         if (colIndex('OwnWithPaid')) {
           const cIdx = colIndex('OwnWithPaid');
           const cell = worksheet.getCell(r, cIdx);
-          cell.dataValidation = { type: 'list', formulae: ['"Own,With Paid"'] };
+
+          cell.dataValidation = {
+            type: 'list',
+            formulae: ['"Own,With Paid"'],
+            allowBlank: true
+          };
+
+          if (!cell.value) {
+            cell.value = 'Own';
+          }
+
           cell.protection = { locked: false };
         }
+
         if (colIndex('InvoiceDeliveryChallan')) {
           const cIdx = colIndex('InvoiceDeliveryChallan');
           const cell = worksheet.getCell(r, cIdx);
-          cell.dataValidation = { type: 'list', formulae: ['"Invoice,Delivery Challan"'] };
+
+          cell.dataValidation = {
+            type: 'list',
+            formulae: ['"Invoice,Delivery Challan"'],
+            allowBlank: true,
+          };
+
+          // ✅ Default value
+          if (!cell.value) {
+            cell.value = 'Invoice';
+          }
+
           cell.protection = { locked: false };
         }
+
         if (colIndex('SupplierInvoiceNumber')) {
-          worksheet.getCell(r, colIndex('SupplierInvoiceNumber')).protection = { locked: false };
+          worksheet.getCell(r, colIndex('SupplierInvoiceNumber')).protection = {
+            locked: false,
+          };
         }
         if (colIndex('SupplierInvoiceDate')) {
           const cell = worksheet.getCell(r, colIndex('SupplierInvoiceDate'));
@@ -601,12 +694,14 @@ const StockExcel = ({
             formulae: [new Date(1900, 0, 1)],
             showErrorMessage: true,
             errorTitle: 'Invalid Date',
-            error: 'Please enter a valid date'
+            error: 'Please enter a valid date',
           };
           cell.protection = { locked: false };
         }
         if (colIndex('DeliveryChallanNo')) {
-          worksheet.getCell(r, colIndex('DeliveryChallanNo')).protection = { locked: false };
+          worksheet.getCell(r, colIndex('DeliveryChallanNo')).protection = {
+            locked: false,
+          };
         }
         if (colIndex('DeliveryInvoiceDate')) {
           const cell = worksheet.getCell(r, colIndex('DeliveryInvoiceDate'));
@@ -618,63 +713,33 @@ const StockExcel = ({
             formulae: [new Date(1900, 0, 1)],
             showErrorMessage: true,
             errorTitle: 'Invalid Date',
-            error: 'Please enter a valid date'
+            error: 'Please enter a valid date',
           };
           cell.protection = { locked: false };
         }
         if (colIndex('MRP')) {
           const mrpCol = colIndex('MRP');
-          const prodCol = colIndex('ProdName');
-          const varCol = colIndex('VariantName');
           const mrpCell = worksheet.getCell(r, mrpCol);
-          const prodLetter = colLetter(prodCol);
-          const varLetter = colLetter(varCol);
-          mrpCell.value = {
-            formula: `IF(OR(${prodLetter}${r}="",${varLetter}${r}=""),"",SUMPRODUCT((ProductVariantMap!$A$2:$A$1000=${prodLetter}${r})*(ProductVariantMap!$B$2:$B$1000=${varLetter}${r})*ProductVariantMap!$C$2:$C$1000))`
-          };
           mrpCell.numFmt = '#,##0.00';
           mrpCell.protection = { locked: false };
-          addNumberValidation(mrpCell, true, 0);
         }
         if (colIndex('SalesPrice')) {
           const spCol = colIndex('SalesPrice');
-          const prodCol = colIndex('ProdName');
-          const varCol = colIndex('VariantName');
           const spCell = worksheet.getCell(r, spCol);
-          const prodLetter = colLetter(prodCol);
-          const varLetter = colLetter(varCol);
-          spCell.value = {
-            formula: `IF(OR(${prodLetter}${r}="",${varLetter}${r}=""),"",SUMPRODUCT((ProductVariantMap!$A$2:$A$1000=${prodLetter}${r})*(ProductVariantMap!$B$2:$B$1000=${varLetter}${r})*ProductVariantMap!$D$2:$D$1000))`
-          };
           spCell.numFmt = '#,##0.00';
           spCell.protection = { locked: false };
-          addNumberValidation(spCell, true, 0);
         }
         if (colIndex('NumberofPieceInside')) {
           const nopCol = colIndex('NumberofPieceInside');
-          const prodCol = colIndex('ProdName');
-          const varCol = colIndex('VariantName');
           const nopCell = worksheet.getCell(r, nopCol);
-          const prodLetter = colLetter(prodCol);
-          const varLetter = colLetter(varCol);
-          nopCell.value = {
-            formula: `IF(OR(${prodLetter}${r}="",${varLetter}${r}=""),"",SUMPRODUCT((ProductVariantMap!$A$2:$A$1000=${prodLetter}${r})*(ProductVariantMap!$B$2:$B$1000=${varLetter}${r})*ProductVariantMap!$E$2:$E$1000))`
-          };
           nopCell.numFmt = '#,##0';
-          addNumberValidation(nopCell, true, 0);
+          nopCell.protection = { locked: false };
         }
         if (colIndex('AmountPerPiece')) {
           const appCol = colIndex('AmountPerPiece');
-          const prodCol = colIndex('ProdName');
-          const varCol = colIndex('VariantName');
           const appCell = worksheet.getCell(r, appCol);
-          const prodLetter = colLetter(prodCol);
-          const varLetter = colLetter(varCol);
-          appCell.value = {
-            formula: `IF(OR(${prodLetter}${r}="",${varLetter}${r}=""),"",SUMPRODUCT((ProductVariantMap!$A$2:$A$1000=${prodLetter}${r})*(ProductVariantMap!$B$2:$B$1000=${varLetter}${r})*ProductVariantMap!$F$2:$F$1000))`
-          };
           appCell.numFmt = '#,##0.00';
-          addNumberValidation(appCell, true, 0);
+          appCell.protection = { locked: false };
         }
         if (colIndex('PaymentType')) {
           const cIdx = colIndex('PaymentType');
@@ -708,13 +773,16 @@ const StockExcel = ({
           pmCell.dataValidation = {
             type: 'list',
             allowBlank: true,
-            formulae: [`IF(${paymentTypeLetter}${r}="Paid",ValidationHelper!$A$1:$A$3,"")`],
+            formulae: [
+              `IF(${paymentTypeLetter}${r}="Paid",ValidationHelper!$A$1:$A$3,"")`,
+            ],
             showErrorMessage: true,
             errorTitle: 'Invalid Payment Mode',
             error: 'Select Cash, Credit, or UPI when Payment Type is Paid',
             showInputMessage: true,
             promptTitle: 'Payment Mode',
-            prompt: 'If Payment Type is Credit, leave empty. If Paid, select: Cash, Credit, or UPI'
+            prompt:
+              'If Payment Type is Credit, leave empty. If Paid, select: Cash, Credit, or UPI',
           };
           pmCell.protection = { locked: false };
         }
@@ -729,7 +797,7 @@ const StockExcel = ({
             formulae: [new Date(1900, 0, 1)],
             showErrorMessage: true,
             errorTitle: 'Invalid Date',
-            error: 'Please enter a valid date'
+            error: 'Please enter a valid date',
           };
           dueCell.protection = { locked: false };
         }
@@ -744,7 +812,7 @@ const StockExcel = ({
             formulae: [new Date(1900, 0, 1)],
             showErrorMessage: true,
             errorTitle: 'Invalid Date',
-            error: 'Please enter a valid date'
+            error: 'Please enter a valid date',
           };
           manufCell.protection = { locked: false };
         }
@@ -759,7 +827,7 @@ const StockExcel = ({
             formulae: [new Date(1900, 0, 1)],
             showErrorMessage: true,
             errorTitle: 'Invalid Date',
-            error: 'Please enter a valid date'
+            error: 'Please enter a valid date',
           };
           expCell.protection = { locked: false };
         }
@@ -769,7 +837,9 @@ const StockExcel = ({
           const rLetter = colLetter(rIdx);
           const qLetter = colLetter(qIdx);
           const recCell = worksheet.getCell(`${rLetter}${r}`);
-          recCell.value = { formula: `IF(${qLetter}${r}="","",${qLetter}${r})` };
+          recCell.value = {
+            formula: `IF(${qLetter}${r}="","",${qLetter}${r})`,
+          };
           addNumberValidation(recCell, true, 0);
         }
         if (colIndex('AcceptedQty') && colIndex('Quantity')) {
@@ -782,15 +852,21 @@ const StockExcel = ({
           const formulaCell = worksheet.getCell(`${aLetter}${r}`);
           if (rejLetter) {
             formulaCell.value = {
-              formula: `IF(${qLetter}${r}="","",MAX(0,${qLetter}${r}-IF(${rejLetter}${r}="",0,${rejLetter}${r})))`
+              formula: `IF(${qLetter}${r}="","",MAX(0,${qLetter}${r}-IF(${rejLetter}${r}="",0,${rejLetter}${r})))`,
             };
           } else {
-            formulaCell.value = { formula: `IF(${qLetter}${r}="","",${qLetter}${r})` };
+            formulaCell.value = {
+              formula: `IF(${qLetter}${r}="","",${qLetter}${r})`,
+            };
           }
           addNumberValidation(formulaCell, true, 0);
           formulaCell.protection = { locked: true };
         }
-        if (colIndex('PaymentAmount') && colIndex('Quantity') && colIndex('PurchaseRate')) {
+        if (
+          colIndex('PaymentAmount') &&
+          colIndex('Quantity') &&
+          colIndex('PurchaseRate')
+        ) {
           const payIdx = colIndex('PaymentAmount');
           const qIdx = colIndex('Quantity');
           const pIdx = colIndex('PurchaseRate');
@@ -812,7 +888,11 @@ const StockExcel = ({
           formulaCell.numFmt = '#,##0.00';
           addNumberValidation(formulaCell, true, 0);
         }
-        if (colIndex('Amount') && colIndex('Quantity') && colIndex('PurchaseRate')) {
+        if (
+          colIndex('Amount') &&
+          colIndex('Quantity') &&
+          colIndex('PurchaseRate')
+        ) {
           const amtIdx = colIndex('Amount');
           const qIdx = colIndex('Quantity');
           const pIdx = colIndex('PurchaseRate');
@@ -827,11 +907,21 @@ const StockExcel = ({
               formula: `IF(${qLetter}${r}="","",IF(${rejLetter}${r}="",(${qLetter}${r})*${pLetter}${r},(${qLetter}${r}-${rejLetter}${r})*${pLetter}${r}))`,
             };
           } else {
-            amtCell.value = { formula: `IF(${qLetter}${r}="","",(${qLetter}${r})*${pLetter}${r})` };
+            amtCell.value = {
+              formula: `IF(${qLetter}${r}="","",(${qLetter}${r})*${pLetter}${r})`,
+            };
           }
           amtCell.numFmt = '#,##0.00';
           addNumberValidation(amtCell, true, 0);
         }
+        if (colIndex('WholesalePrice')) {
+          const cIdx = colIndex('WholesalePrice');
+          const letter = colLetter(cIdx);
+          const cell = worksheet.getCell(`${letter}${r}`);
+          cell.protection = { locked: false };
+          cell.numFmt = '#,##0.00';
+          addNumberValidation(cell, true, 0);
+        }
       }
 
       await worksheet.protect('', {
@@ -1070,6 +1160,12 @@ const StockExcel = ({
       key: 'FreeQty',
       editable: true,
     },
+    {
+      title: 'Wholesale Price',
+      dataIndex: 'WholesalePrice',
+      key: 'WholesalePrice',
+      editable: true,
+    },
   ];
 
   const column = columns?.map((col) => {
@@ -1205,7 +1301,7 @@ const StockExcel = ({
       RetailPrice: row?.RetailPrice,
       AmountperPiece: row?.AmountperPiece,
       NumberofPieceInside: row?.NumberofPieceInside,
-      WholeSale: row?.WholeSale,
+      WholesalePrice: row?.WholesalePrice,
       Offer: row?.Offer,
       SplPrice: row?.SplPrice,
       ReceivedQuantity: row?.ReceivedQuantity,
@@ -1245,31 +1341,31 @@ const StockExcel = ({
 
   const handleFieldSetupSubmit = async () => {
     const postData = {
-      "AppId": AppId,
+      AppId: AppId,
-      "CompId": CompId,
+      CompId: CompId,
-      "BranchId": BranchId,
+      BranchId: BranchId,
-      "Type": "EB",
+      Type: 'EB',
-      "FormType": "PurchaseEntry",
+      FormType: 'PurchaseEntry',
-      "TypeId": purchaseReceiptBulkUploadCatId,
+      TypeId: purchaseReceiptBulkUploadCatId,
-      "ConfigDtl": selectedFields?.map((field) => ({
+      ConfigDtl: selectedFields?.map((field) => ({
-        "ConfigId": field,
+        ConfigId: field,
-        "Access": 'Y',
+        Access: 'Y',
       })),
-      "CreatedBy": UserId
+      CreatedBy: UserId,
-    }
+    };
 
     const response = await dispatch(postFieldSetup(postData))?.unwrap();
 
     if (response?.data?.statusCode === 1) {
-      setMessageType("success");
+      setMessageType('success');
       setMessageData(response?.data?.response);
       setFieldSetup(false);
       await getFieldSetup();
     } else {
-      setMessageType("error");
+      setMessageType('error');
-      setMessageData("Failed to set up fields");
+      setMessageData('Failed to set up fields');
-    }
     }
+  };
 
   const handleFieldSelect = (value) => {
     setSelectedFields((prev) => {
@@ -1320,7 +1416,7 @@ const StockExcel = ({
     } catch (error) {
       console.error('Error fetching suppliers:', error);
       setMessageData('Failed to fetch suppliers.');
-      setMessageType('error')
+      setMessageType('error');
     }
   }, [CompId, AppId, BranchId, dispatch]);
 
@@ -1331,14 +1427,22 @@ const StockExcel = ({
 
       const type = supplierData.Type;
       const LocationType =
-        type === 'Supplier' ? 'S' : type === 'Branch' ? 'B' : type === 'WareHouse' ? 'W' : '';
+        type === 'Supplier'
+          ? 'S'
+          : type === 'Branch'
+            ? 'B'
+            : type === 'WareHouse'
+              ? 'W'
+              : '';
 
       const response = await dispatch(
         getSupplaierIdwithTypeBasedProducts({
           CompId: LocationType === 'S' ? CompId : supplierData?.SuppCompId,
           AppId: LocationType === 'S' ? AppId : supplierData?.SuppAppId,
-          BranchId: LocationType === 'S' ? BranchId : supplierData?.SuppBranchId,
+          BranchId:
-          SuppId: LocationType === 'S' ? supplierId : supplierData?.SuppBranchId,
+            LocationType === 'S' ? BranchId : supplierData?.SuppBranchId,
+          SuppId:
+            LocationType === 'S' ? supplierId : supplierData?.SuppBranchId,
           LocationType,
         })
       )?.unwrap();
@@ -1349,25 +1453,24 @@ const StockExcel = ({
         } else {
           setSupplierProducts([]);
           setMessageData('No products are mapped to this supplier.');
-          setMessageType('warning')
+          setMessageType('warning');
         }
       } else {
         setSupplierProducts([]);
         setMessageData('Failed to fetch supplier products.');
-        setMessageType('error')
+        setMessageType('error');
       }
     } catch (error) {
       console.error('Error fetching supplier products:', error);
       setMessageData('An error occurred while fetching products.');
-      setMessageType('error')
+      setMessageType('error');
     }
   };
 
-
   const handleSupplierBasedProducts = useCallback(async () => {
     if (!selectedSupplier) {
       setMessageData('Please select a supplier.');
-      setMessageType('warning')
+      setMessageType('warning');
       return;
     }
 
@@ -1400,19 +1503,25 @@ const StockExcel = ({
           onSubmit={handleFileSubmit}
         >
           <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-            <div className='upload-excel-header'>
+            <div className="upload-excel-header">
               <h3>UPLOAD YOUR EXCEL</h3>
               <Tooltip title="Field Setup">
-                <div className="btn btn--info" style={{
+                <div
-                  background: "#00694aff",
+                  className="btn btn--info"
-                  color: "#fff",
+                  style={{
-                  display: "flex",
+                    background: '#00694aff',
-                  alignItems: "center",
+                    color: '#fff',
-                  justifyContent: "center",
+                    display: 'flex',
-                  padding: "5px 12px",
+                    alignItems: 'center',
-                  borderRadius: "4px",
+                    justifyContent: 'center',
-                  cursor: 'pointer'
+                    padding: '5px 12px',
-                }} onClick={handleFieldSetup}><MdOutlineAppRegistration size={19} /></div>
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                  }}
+                  onClick={handleFieldSetup}
+                >
+                  <MdOutlineAppRegistration size={19} />
+                </div>
               </Tooltip>
             </div>
 
@@ -1549,7 +1658,9 @@ const StockExcel = ({
         children={
           <div className="field-setup-container">
             <div className="field-setup-header">
-              <FormHeader title={'Select the fields you want to include in the table'} />
+              <FormHeader
+                title={'Select the fields you want to include in the table'}
+              />
             </div>
             <div className="field-setup-content">
               <Form onFinish={handleFieldSetupSubmit} ref={formRef}>
@@ -1558,11 +1669,16 @@ const StockExcel = ({
                     label="Select fields"
                     // valueData={selectedFields}
                     onChangeFunction={handleFieldSelect}
-                    options={tableFieldPreferences?.filter(p => !selectedFields?.some(s => s === p.value))} />
+                    options={tableFieldPreferences?.filter(
+                      (p) => !selectedFields?.some((s) => s === p.value)
+                    )}
+                  />
                 </Form.Item>
                 <div className="field-setup-selected-fields">
                   {selectedFields
-                    ?.map((id) => tableFieldPreferences?.find((p) => p.value === id))
+                    ?.map((id) =>
+                      tableFieldPreferences?.find((p) => p.value === id)
+                    )
                     .filter(Boolean)
                     .map((field) => (
                       <div className="selected-field" key={field.value}>

src/Pages/StockMaster/StockList.jsx

@@ -11,7 +11,11 @@ import { Tables } from '../../Components/Tables/Table';
 import FormHeader from '../PageComponents/FormHeader.jsx';
 import Search from '../../Components/Forms/Search.jsx';
 import Buttons from '../../Components/Forms/Buttons';
-import { getSession, dateFormatChange, ExtractDateFormate } from '../../Services/Others';
+import {
+  getSession,
+  dateFormatChange,
+  ExtractDateFormate,
+} from '../../Services/Others';
 import { Messages } from '../../Components/Notifications/Messages';
 import {
   getStockData,
@@ -175,12 +179,16 @@ const StockList = () => {
   };
   const getPreference = async () => {
     const data = { AppId: AppId, CompId: CompId, BranchId: BranchId };
-    const { data: res } = await dispatch(getPreferenceData(data)).unwrap()
+    const { data: res } = await dispatch(getPreferenceData(data)).unwrap();
-    const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find((setting) => setting?.SettingIdName?.toLowerCase() === "decimal" && setting?.SettingValue === 'Y');
+    const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find(
+      (setting) =>
+        setting?.SettingIdName?.toLowerCase() === 'decimal' &&
+        setting?.SettingValue === 'Y'
+    );
     if (decimalSetting) {
-      setAllowDecimal(true)
+      setAllowDecimal(true);
-    }
     }
+  };
   const actionsFormatter = async (row, rowIndex) => {
     navigate(
       `${subDirectory}setting/purchase-entry/update`,
@@ -200,11 +208,15 @@ const StockList = () => {
   };
 
   const handlePrevImage = () => {
-    setCurrentImageIndex(prev => prev > 0 ? prev - 1 : productImageDetails.length - 1);
+    setCurrentImageIndex((prev) =>
+      prev > 0 ? prev - 1 : productImageDetails.length - 1
+    );
   };
 
   const handleNextImage = () => {
-    setCurrentImageIndex(prev => prev < productImageDetails.length - 1 ? prev + 1 : 0);
+    setCurrentImageIndex((prev) =>
+      prev < productImageDetails.length - 1 ? prev + 1 : 0
+    );
   };
 
   const handleProductmodalCancel = () => {
@@ -218,7 +230,7 @@ const StockList = () => {
     setImageModal(false);
     setProductImageDetails([]);
     setCurrentImageIndex(0);
-  }
+  };
   // WRITED BY SREE
   function safeRound(amountStr) {
     if (amountStr == null) return allowDecimal ? '0.00' : '0';
@@ -254,7 +266,8 @@ const StockList = () => {
       ),
       filteredValue: [searchedText],
       onFilter: (value, record) => {
-        return extractLastNumberOrderId(record.InvoiceNo, record?.FYStatus)?.toString()
+        return extractLastNumberOrderId(record.InvoiceNo, record?.FYStatus)
+          ?.toString()
           .toLowerCase()
           .includes(value.toLowerCase());
       },
@@ -273,11 +286,8 @@ const StockList = () => {
       key: 'CustSuppName',
       align: 'center',
       render: (text, row) => (
-        <a style={{ color: 'black' }}>
+        <a style={{ color: 'black' }}>{row?.CustSuppName || '-'}</a>
-          {row?.CustSuppName || '-'}
-        </a>
       ),
-
     },
     {
       title: 'Supp Invoice No',
@@ -285,11 +295,8 @@ const StockList = () => {
       key: 'SuppInvoiceNo',
       align: 'center',
       render: (text, row) => (
-        <a style={{ color: 'black' }}>
+        <a style={{ color: 'black' }}>{row?.SuppInvoiceNo || '-'}</a>
-          {row?.SuppInvoiceNo || '-'}
-        </a>
       ),
-
     },
 
     {
@@ -323,17 +330,17 @@ const StockList = () => {
       align: 'center',
       render: (data, record) => {
         if (data?.length > 0) {
-          return <IoEye
+          return (
+            <IoEye
               style={{ color: '#1292EE', fontSize: '25px', cursor: 'pointer' }}
               onClick={() => viewImages(data)}
             />
+          );
         } else {
-          return <p>-</p>
+          return <p>-</p>;
-        }
-      }
-
-      ,
         }
+      },
+    },
   ];
   const Proddetailcolumns = [
     {
@@ -529,9 +536,11 @@ const StockList = () => {
 
   useEffect(() => {
     let updatedExceldatasubmit = Exceldatasubmit?.map((excelItem) => {
-
+      const [productName, sizeAndUom] =
-      const [productName, sizeAndUom] = (excelItem?.ProductName?.split(' (')) || [];
+        excelItem?.ProductName?.split(' (') || [];
-      const [size, uomName] = (sizeAndUom ? sizeAndUom.slice(0, -1).split(' ') : []);
+      const [size, uomName] = sizeAndUom
+        ? sizeAndUom.slice(0, -1).split(' ')
+        : [];
 
       const matchingProduct = Productdata?.find(
         (product) =>
@@ -584,7 +593,8 @@ const StockList = () => {
 
   // Helper function to check if product already exists in ProdDetails
   const isDuplicateProduct = (prodDetails, newItem) => {
-    return prodDetails.some(item =>
+    return prodDetails.some(
+      (item) =>
         item.ProdName === newItem.ProdName &&
         item.VariantName === newItem.VariantName &&
         item.MRP === newItem.MRP &&
@@ -594,7 +604,6 @@ const StockList = () => {
     );
   };
 
-
   const handleSubmit = async () => {
     let FilterData = Exceldatasubmit?.filter((a) => a['ProductName'] != '');
     if (FilterData && FilterData.length > 0) {
@@ -618,7 +627,7 @@ const StockList = () => {
               DeliveryInvoiceDate: data.DeliveryInvoiceDate,
               DueDate: data.DueDate,
             },
-            products: []
+            products: [],
           };
         }
 
@@ -636,7 +645,6 @@ const StockList = () => {
       };
 
       const formattedData = Object.values(groupedData).map((group) => {
-     
         const { groupInfo, products } = group;
 
         // Calculate totals based on products
@@ -666,25 +674,33 @@ const StockList = () => {
           PaymentMode: groupInfo.PaymentMode,
           PaymentAmount: PaymentAmount.toFixed(2),
           InvoiceDate: groupInfo.InwardDate
-            ? moment(groupInfo.InwardDate, 'YYYY-MM-DD').format('YYYY-MM-DDTHH:mm:ss')
+            ? moment(groupInfo.InwardDate, 'YYYY-MM-DD').format(
+              'YYYY-MM-DDTHH:mm:ss'
+            )
             : null,
           SuppInvoiceNo: groupInfo.SupplierInvoiceNumber,
           SuppInvoiceDate: groupInfo.SupplierInvoiceDate
-            ? moment(groupInfo.SupplierInvoiceDate, 'YYYY-MM-DD').format('YYYY-MM-DDTHH:mm:ss')
+            ? moment(groupInfo.SupplierInvoiceDate, 'YYYY-MM-DD').format(
+              'YYYY-MM-DDTHH:mm:ss'
+            )
             : null,
           DeliveryChallanNo: groupInfo.DeliveryChallanNo,
           DeliveryInvoiceDate: groupInfo.DeliveryInvoiceDate
-            ? moment(groupInfo.DeliveryInvoiceDate, 'YYYY-MM-DD').format('YYYY-MM-DDTHH:mm:ss')
+            ? moment(groupInfo.DeliveryInvoiceDate, 'YYYY-MM-DD').format(
+              'YYYY-MM-DDTHH:mm:ss'
+            )
             : null,
           DueDate: groupInfo.DueDate
-            ? moment(groupInfo.DueDate, 'YYYY-MM-DD').format('YYYY-MM-DDTHH:mm:ss')
+            ? moment(groupInfo.DueDate, 'YYYY-MM-DD').format(
+              'YYYY-MM-DDTHH:mm:ss'
+            )
             : null,
           InvoiceAmount: Totalamount.toFixed(2),
           TaxAmount: Totaltax.toFixed(2),
           TotalAmount: Totalamount.toFixed(2),
           BillAmount: Billamount.toFixed(2),
-          PaymentStatus: "S",
+          PaymentStatus: 'S',
-          PurOrderStatus: "P",
+          PurOrderStatus: 'P',
           ProdDetails: products.map((item) => ({
             ProdName: item.ProductName,
             ProdVariantName: item.VariantName,
@@ -694,10 +710,14 @@ const StockList = () => {
             AcceptedQty: item.AcceptedQty,
             FreeQty: item.FreeQty,
             ManufDate: item.ManufactureDate
-              ? moment(item.ManufactureDate, 'YYYY-MM-DD').format('YYYY-MM-DDTHH:mm:ss')
+              ? moment(item.ManufactureDate, 'YYYY-MM-DD').format(
+                'YYYY-MM-DDTHH:mm:ss'
+              )
               : null,
             ExpDate: item.ExpireDate
-              ? moment(item.ExpireDate, 'YYYY-MM-DD').format('YYYY-MM-DDTHH:mm:ss')
+              ? moment(item.ExpireDate, 'YYYY-MM-DD').format(
+                'YYYY-MM-DDTHH:mm:ss'
+              )
               : null,
             BatchNo: item.BatchNo,
             ModelNo: item.ModelNo,
@@ -707,6 +727,7 @@ const StockList = () => {
             SellPrice: item.SalesPrice,
             OnePcsPrice: item.AmountPerPiece,
             NoOfPcs: item.NumberofPieceInside,
+            WhSalePrice: item.WholesalePrice 
           })),
         };
       });
@@ -905,31 +926,35 @@ const StockList = () => {
         width={600}
         className={'padding-less-modal'}
         children={
-          <div >
+          <div>
             {productImageDetails?.length > 0 && (
-              <div className='image-preview'>
+              <div className="image-preview">
                 {productImageDetails.length > 1 && (
                   <>
                     <button
                       onClick={handlePrevImage}
-                      className='image-preview__nav-btn'
+                      className="image-preview__nav-btn"
                     >
                       <FaAngleLeft />
                     </button>
                   </>
                 )}
-                <div className='image-preview__content'>
+                <div className="image-preview__content">
                   <Image
                     src={productImageDetails[currentImageIndex]?.ImageUrl}
                     alt="Preview"
-                    style={{ maxWidth: '100%', maxHeight: '400px', objectFit: 'contain' }}
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '400px',
+                      objectFit: 'contain',
+                    }}
                   />
                 </div>
                 {productImageDetails.length > 1 && (
                   <>
                     <button
                       onClick={handleNextImage}
-                      className='image-preview__nav-btn'
+                      className="image-preview__nav-btn"
                     >
                       <FaAngleRight />
                     </button>
@@ -937,7 +962,14 @@ const StockList = () => {
                 )}
               </div>
             )}
-            <div style={{ marginTop: '10px', color: '#666', textAlign: 'center', fontFamily: 'Poppins' }}>
+            <div
+              style={{
+                marginTop: '10px',
+                color: '#666',
+                textAlign: 'center',
+                fontFamily: 'Poppins',
+              }}
+            >
               {currentImageIndex + 1} of {productImageDetails.length}
             </div>
           </div>

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

@@ -42,22 +42,30 @@
   justify-content: center;
   border-radius: 10px;
 }
-.grid-container {
+.gridEQcontainer {
   display: grid;
   grid-template-columns: auto auto auto;
-  padding: 5px;
+  padding: 12px;
+  border-radius: 6px;
   background: #e1eef1;
   margin: 5px;
 }
-.grid-item {
+.gridEQitem {
   background-color: rgba(255, 255, 255, 0.8);
   // border: 1px solid rgba(0, 0, 0, 0.8);
   padding: 5px;
   font-size: 30px;
   text-align: center;
-  border-radius: 25px;
+  border-radius: 30px;
-  margin: 6px;
+  margin: 5px;
-  // margin-left: 10px;
+  height: 60px;
+  width: 90%;
+  cursor: pointer;
+  font-family: "Poppins";
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 400;
 }
 .grid-item-add {
   background-color: var(--SELECTED_COLOR);
@@ -90,14 +98,27 @@
   flex-direction: row;
   align-items: center;
   column-gap: 0.5rem;
-  font-family: 'Poppins';
+  font-family: "Poppins", sans-serif;
 }
 .EditQuantity-Quantitybox {
   width: 5rem;
   height: 2rem;
   border: none;
   background-color: #eff3f3;
+  border: 1px solid #e4e4e4;
   padding-left: 5px;
+  border-radius: 4px;
+  font-family: "Poppins", sans-serif;
+  font-size: 15px;
+  font-weight: 400;
+  letter-spacing: 0.3px;
+  outline: none !important;
+  &:focus {
+    border-color: #a6daff;
+  }
+  &:active {
+    border-color: #a6daff;
+  }
 }
 .EditQuantity-Pricebox {
   width: 5rem;
@@ -110,6 +131,14 @@
   height: 2rem;
   width: 2rem;
   border: none;
+  border: 1px solid #ffdfdf;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ffeded;
+  color: #c21919;
 }
 .EditQuantity-PriceChange {
   display: flex;

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

@@ -41,10 +41,10 @@ $white: #ffffff;
 .packing-container {
     max-width: 50rem;
     //   margin: 0 auto;
-    padding: 1.5rem;
+    margin: 1rem 0;
-    @include gradient-bg(#eff6ff, #e0e7ff);
+    padding: 1rem;
+    @include gradient-bg(#e6f1ff, #dfe7ff);
     border-radius: 1rem;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 
     // Header section
     .header {
@@ -119,15 +119,15 @@ $white: #ffffff;
     .rows-header {
         display: grid;
         // grid-template-columns: 120px 120px 120px 120px 100px; // Type, Qty, Count, Total, Action
-        grid-template-columns: 1fr  1fr 1fr 1fr 1fr  1fr ; 
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
         background: $gray-100;
-        padding: 0.75rem 1rem;
+        padding: 0.5rem 0.5rem;
         font-weight: 600;
         font-size: 0.875rem;
         color: $gray-700;
         border-radius: 0.5rem;
         border: 1px solid $gray-200;
-        margin-bottom: 0.50rem;
+        margin-bottom: 0.5rem;
 
         .header-cell {
             text-align: center;
@@ -279,9 +279,8 @@ $white: #ffffff;
                 gap: 0.5rem;
 
                 .action-button {
-                    
+                    width: 2rem;
-                    width: 2.0rem;
+                    height: 2rem;
-                    height: 2.0rem;
                     border-radius: 50%;
                     border: none;
                     color: $white;
@@ -311,7 +310,7 @@ $white: #ffffff;
                 min-width: 2rem;
 
                 .total-display {
-                    padding: 0.25rem 0.70rem;
+                    padding: 0.25rem 0.7rem;
                     background: $gray-50;
                     // border: 1px solid $gray-200;
                     // border-radius: 0.5rem;
@@ -338,8 +337,7 @@ $white: #ffffff;
         background: $white;
         border-radius: 0.75rem;
         padding: 1.5rem;
-        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        border: 2px solid #d6e1ff;
-        border: 2px solid $gray-100;
 
         .summary-content {
             display: flex;

src/Styles/BookingScreen/Components/BSCategories/BSCategoryHorizontal.scss

@@ -325,7 +325,7 @@
 }
 
 .CategoryHorizontalNew {
-  padding: 1rem 1rem;
+  padding: 10px 10px;
   font-family: 'Inter', sans-serif;
   display: flex;
   align-items: center;

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

@@ -116,7 +116,7 @@
   .CustomerActions {
     display: flex;
     align-items: center;
-    gap: 0.1rem;
+    gap: 0.3rem;
 
     .RiVerifiedBadgeFill {
       transition: all 0.2s ease-in-out;

src/Styles/PurchaseReturn/purchasereturn.scss

@@ -338,7 +338,7 @@
   display: flex;
   align-items: center;
   gap: 7px;
-  padding: 10px 16px;
+  padding: 8px 16px;
   background-color: #0bad77;
   border-radius: 7px;
   color: white;
@@ -346,7 +346,7 @@
   font-family: 'Poppins';
   font-weight: 400;
   white-space: nowrap;
-  font-size: 14px;
+  font-size: 13.5px;
   transition: all 0.2s;
   &:hover {
     background-color: #069666;
@@ -356,15 +356,15 @@
   display: flex;
   align-items: center;
   gap: 7px;
-  padding: 10px 16px;
+  padding: 8px 16px;
-  background-color: #0ea5e9;
+  background-color: #1292ee;
   border-radius: 7px;
   color: white;
   cursor: pointer;
-  font-family: 'Poppins';
+  font-family: "Poppins";
   font-weight: 400;
   white-space: nowrap;
-  font-size: 14px;
+  font-size: 13.5px;
   transition: all 0.2s;
   &:hover {
     background-color: #0985be;

src/Styles/Reports/KOT/kot.scss

@@ -71,7 +71,7 @@
 .kot-date {
   display: flex;
   font-size: 14px;
-  font-family: 'Gilroy';
+  font-family: "Gilroy";
   font-weight: 500;
   border-radius: 5px;
   color: #212529 !important;
@@ -122,7 +122,7 @@
     right: 0;
   }
   .ant-segmented-item-label {
-    font-family: 'Poppins';
+    font-family: "Poppins";
     font-size: 12px !important;
   }
   .ant-segmented-item-selected {
@@ -134,9 +134,7 @@
   }
 }
 
-.kot-search-dev
+.kot-search-dev :where(.css-dev-only-do-not-override-2i2tap).ant-segmented .ant-segmented-group {
-  :where(.css-dev-only-do-not-override-2i2tap).ant-segmented
-  .ant-segmented-group {
   position: relative;
   display: flex;
   //srinath
@@ -149,9 +147,7 @@
     rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
 }
 
-.kot-search-dev
+.kot-search-dev :where(.css-dev-only-do-not-override-2i2tap).ant-segmented .ant-segmented-item-selected {
-  :where(.css-dev-only-do-not-override-2i2tap).ant-segmented
-  .ant-segmented-item-selected {
   background-color: #ffffff;
   box-shadow:
     0 1px 2px 0 rgba(0, 0, 0, 0.03),
@@ -168,6 +164,13 @@
   margin: 12px 0 12px 0;
   height: 70vh;
   overflow: scroll;
+
+  .ant-table-thead {
+    background-color: #2c88ee !important;
+  }
+  .ant-table-cell {
+    padding: 6px !important;
+  }
   @media (max-width: 768px) {
     height: 60vh;
     scrollbar-width: thin;
@@ -179,7 +182,7 @@
   }
   table {
     tbody {
-      font-family: 'Poppins';
+      font-family: "Poppins";
       > tr:nth-child(even) {
         background-color: #b4b4b4;
       }
@@ -221,7 +224,7 @@
     transition: all 0.2s ease;
     min-width: 70px;
     text-align: center;
-    font-family: 'Poppins', sans-serif;
+    font-family: "Poppins", sans-serif;
     color: #fff;
     -webkit-text-stroke-width: 0.1px;
 

src/Styles/Stock/StockMaster.scss

@@ -36,13 +36,14 @@
 }
 
 .Product-table {
+
   table {
     border-spacing: unset;
   }
 }
 
 .Product-table .ant-input {
-  width: 5rem !important;
+  width: 4rem !important;
 }
 
 .Product-table .ant-picker {
@@ -87,7 +88,7 @@
     width: 180px !important;
   }
 
-  > div:nth-child(2) {
+  >div:nth-child(2) {
     p {
       display: none !important;
     }
@@ -145,7 +146,7 @@
     max-width: 130px !important;
   }
 
-  > td:nth-child(3) {
+  >td:nth-child(3) {
     .ant-input {
       width: max-content !important;
       max-width: 70px !important;
@@ -153,7 +154,7 @@
     }
   }
 
-  > td:nth-child(5) {
+  >td:nth-child(5) {
     .ant-input {
       width: max-content !important;
       max-width: 100px !important;
@@ -202,6 +203,8 @@
   flex-direction: row;
   gap: 1.5rem;
   padding-top: 0.5rem;
+  justify-content: space-between;
+  width: 100%;
 
   & .field-DropDown {
     width: 200px !important;
@@ -299,8 +302,8 @@
   }
 }
 
-.inputForm .ant-table-content {
+.inputFormSTOCKFORM .ant-table-content {
-  width: 70vw;
+  width: 100% !important;
 }
 
 .pe-inward-date {
@@ -322,24 +325,22 @@
 }
 
 .purchase-status {
-  > div:nth-child(1) {
+  >div:nth-child(1) {
     display: flex;
     align-items: center;
     gap: 10px;
 
-    > p {
+    >p {
       padding-bottom: 0 !important;
     }
   }
 }
 
 .purchase-status-data {
-  margin-top: 10px;
   display: flex;
   align-items: center;
   gap: 30px;
   justify-content: flex-end;
-  padding: 1rem 3rem;
   width: 100%;
 }
 
@@ -447,7 +448,7 @@
 
   .invoice-date {
     .ant-form-item-control-input-content {
-      > label {
+      >label {
         font-family: 'Poppins';
         font-weight: 500;
       }
@@ -473,7 +474,7 @@
     gap: 1rem;
     margin-bottom: 10px;
 
-    > button {
+    >button {
       font-family: 'Poppins';
       background-color: #ef4444;
       color: #fff;
@@ -481,8 +482,8 @@
       align-items: center;
 
       .ant-btn-icon {
-        > span {
+        >span {
-          > svg {
+          >svg {
             width: 13px;
             height: 13px;
           }
@@ -516,6 +517,8 @@
 }
 
 .stockformTabele {
+  width: 80vw;
+
   .float-label,
   .ant-select {
     width: 60px !important;
@@ -563,9 +566,7 @@
     width: 100%;
   }
 
-  .inputForm .ant-table-content {
+
-    width: 100vw;
-  }
 
   .stock-input {
     // width: 100vw;
@@ -607,13 +608,12 @@
     width: 100%;
   }
 
-  .inputForm .ant-table-content {
+
-    width: 100vw;
-  }
 
   .stock-input {
     width: 100vw;
   }
+
   .tipsForUpload {
     ul li {
       font-size: 10px !important;
@@ -689,14 +689,17 @@
     top: 0;
     opacity: 1;
   }
+
   50% {
     opacity: 0.8;
   }
+
   100% {
     top: calc(100% - 3px);
     opacity: 1;
   }
 }
+
 .preview-text-data {
   display: flex;
   flex-direction: column;
@@ -724,6 +727,7 @@
     font-weight: 500;
   }
 }
+
 .loading-overlay {
   position: absolute;
   top: 0;
@@ -761,12 +765,66 @@
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
 }
+
 .purchase-receipt-table {
   .ant-input {
     padding-top: 6px !important;
   }
+
+  .ant-table-cell {
+    padding: 5px !important;
+  }
+}
+
+
+.addallProductTBN {
+  border: none;
+  outline: none;
+  padding: 8px 16px;
+  width: max-content;
+  font-family: "Poppins";
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  background-color: #1292ee;
+  height: max-content;
+  color: #fff;
+  border-radius: 4px;
+}
+
+.productSearchRecipt {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  flex-direction: row-reverse;
+  gap: 1rem;
+
+  .ant-input-affix-wrapper {
+    width: 250px !important;
+  }
+
+  .ant-input {
+    padding: 3px 14px 6px 11px !important;
+  }
+}
+
+.finalSubmitPRBTN {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.imeiSNTable {
+
+  .ant-input {
+    padding: 4px 4px !important;
+    text-align: center;
+  }
 }