added preference in sales and category horizontal and vertical clean

src/Features/BookingScreen/BookingData/BookingData.js

@@ -1764,6 +1764,9 @@ const BookingData = createSlice({
     changeothersdata: (state, action) => {
       state.othersdata = action?.payload;
     },
+    changePreferenceData: (state, action) => {
+      state.PreferenceData = action?.payload || [];
+    },
     ChangeNewQrProduct: (state, action) => {
       state.NewQrProduct = action?.payload;
     },
@@ -2258,6 +2261,7 @@ export const {
   changeBillEditingMode,
   changePreviousOrderPayment,
   changePreviousOrderOfferDetail,
+  changePreferenceData
 } = BookingData.actions;
 
 export const GlobalComboRedirectionToDefaultLayoutForParking = (state) =>

src/Pages/BookingScreen/Components/BSCategories/BSCategoryVertical.jsx

@@ -1,12 +1,6 @@
-import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { Form, Tooltip, AutoComplete } from 'antd';
 import horizontal from '../../../../Images/others.png';
-import {
-  InfoCircleOutlined,
-  ArrowRightOutlined,
-  SearchOutlined,
-} from '@ant-design/icons';
 import '../../../../Styles/BookingScreen/Components/BSCategories/BSCategoryVertical.scss';
 import {
   SelectedGlobalCatgColorDetail,
@@ -21,7 +15,6 @@ import {
   GlobalCategorieData,
   changeProductCategorie,
   getSelectedFavItems,
-  changeothersdata,
   GlobalFocusCatCard,
   ChangeFocusCatCard,
   changeProductSubCategorieProdCatfun,
@@ -46,28 +39,16 @@ import {
   ChangeisFavClicked,
 } from '../../../../Features/BookingScreen/BookingData/BookingData.js';
 import catLogo from '../../../../Images/heart-outline-19.png';
-import {
-  othernamedrop,
-  getproducttypeid,
-  getsupplierBasedOnCmpIdBrIdAppId,
-  getUomData,
-  getAdmin,
-  postProductData,
-} from '../../../../Features/BookingScreen/BookingData/BookingData.js';
-import { DefaultModal } from '../../../../Components/Modal/DefaultModal';
-import { DropDowns } from '../../../../Components/Forms/DropDown.jsx';
-import { InputField } from '../../../../Components/Forms/InputField.jsx';
 import { Messages } from '../../../../Components/Notifications/Messages';
-import Buttons from '../../../../Components/Forms/Buttons.jsx';
 import WebFont from 'webfontloader';
 import TooltipWrapper from '../../../../Components/Tooltip/Tooltip';
 import { isMobile } from 'react-device-detect';
-import { validateSafeInput } from '../../../../Services/Others.js';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import { BsSortAlphaDown } from 'react-icons/bs';
 import { BsSortAlphaDownAlt } from 'react-icons/bs';
 import { ApplicationPreferences } from '../../../../Features/BrachLogin/BranchLogin.js';
 import { useDateStore } from '../../../../Features/BookingScreen/BookingData/DateStore.js';
+import OtherItemsModal from './OtherItemsModal.jsx';
 
 function BSCategoryVertical(props) {
   const formRef = useRef(null);
@@ -116,22 +97,9 @@ function BSCategoryVertical(props) {
   const [accessToCard, setaccessToCard] = useState(false);
   const [accessOther, setAccessOther] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [EditState, setEditState] = useState();
   const [messageType, setMessageType] = useState(null);
   const [messageData, setMessageData] = useState(null);
-  const [Tabledropname, setTabledropname] = useState();
+
-  const [Tableuomname, setTableuomname] = useState();
-  const [Tabletaxname, setTabletaxname] = useState();
-  const [supplierid, setsupplierid] = useState();
-  const [billAmount, setbillAmount] = useState(0);
-  const [taxAmount, settaxAmount] = useState(0);
-  const [totalAmount, settotalAmount] = useState(0);
-  const [selectedTaxPercentage, setSelectedTaxPercentage] = useState();
-  const [selectedUom, setselectedUom] = useState(null);
-  const [selectedprod, setselectedprod] = useState('');
-  const [prodtype, setprodtype] = useState([]);
-  const [add, setAdd] = useState(false);
-  const [defaultQuantity, setdefaultQuantity] = useState(1);
   const [isSortClicked, setIsSortClicked] = useState(false);
   const [ComboListdata, setComboListdata] = useState([]);
   const Comboglobal = useSelector(GlobalCombosearch);
@@ -139,7 +107,6 @@ function BSCategoryVertical(props) {
   const AppId = SessionData?.AppId;
   const CompId = SessionData?.CompId;
   const BranchId = SessionData?.BranchId;
-  const UserId = SessionData?.UserId;
 
   const [height, setHeight] = useState(window.innerHeight);
 
@@ -310,30 +277,6 @@ function BSCategoryVertical(props) {
     }
   }, [SelectedFontFamily]);
 
-  const getTaxname = async () => {
-    const responses = await dispatch(
-      getAdmin({ CompId: CompId, AppId: AppId })
-    ).unwrap();
-    if (responses?.data?.statusCode === 1) {
-      setTabletaxname(responses?.data?.data);
-      let nilltax = responses?.data?.data?.find(
-        (item) => item.TaxIdName?.toLowerCase() === 'nil'
-      );
-      onChangeFunction(nilltax?.TaxId);
-      // setSelectedTaxPercentage(nilltax?.TaxId)
-      // formRef.current?.setFieldsValue({TaxId:nilltax?.TaxId});
-      formRef.current?.setFieldsValue({ Quantity: defaultQuantity });
-    }
-  };
-  const getUom = async () => {
-    const getUomResponse = await dispatch(getUomData()).unwrap();
-    let UomId = getUomResponse?.data?.data?.filter(
-      (item) => item.ConfigName?.toLowerCase() === 'pcs'
-    )?.[0]?.['ConfigId'];
-    formRef.current?.setFieldsValue({ UOM: UomId });
-    setselectedUom(UomId);
-  };
-
   const scrollUp = () => {
     const container = scrollContainerRef.current;
     if (container.scrollTop > 0) {
@@ -374,10 +317,6 @@ function BSCategoryVertical(props) {
     dispatch(ChangeCardAccess(accessToCard));
   };
 
-  const easeLinear = (t) => {
-    return t;
-  };
-
   const handleClick = async (e, ProdCat, index) => {
     let data = false;
     setaccessToCard(false);
@@ -397,6 +336,7 @@ function BSCategoryVertical(props) {
       await dispatch(changeProductSubCategorieProdCatfun());
     }
   };
+
   const handleClick1 = async () => {
     await dispatch(changeCombosearch(false));
     let data = false;
@@ -424,20 +364,19 @@ function BSCategoryVertical(props) {
   };
 
   const handleClick2 = async () => {
-    getTaxname();
-    getUom();
     setIndexVal(-1);
     setAccessOther(true);
     setIsModalOpen(true);
 
-    let data = true;
+    await dispatch(changeAccessForOthers(true));
-    await dispatch(changeAccessForOthers(data));
   };
+
   useEffect(() => {
     if (AppId && CompId && BranchId) {
       getselectCards();
     }
   }, [AppId, CompId, BranchId]);
+
   const getselectCards = async () => {
     let data = {
       CompId: CompId,
@@ -483,289 +422,18 @@ function BSCategoryVertical(props) {
     }
   }, [AutoLocatetofav]);
 
-  const resetForm = () => {
-    formRef?.current?.resetFields();
-    formRef?.current?.setFieldsValue({
-      TaxId: null,
-      Size: null,
-      UOM: null,
-      MRP: null,
-      ProdName: null,
-      Quantity: null,
-    });
-    setSelectedTaxPercentage(null);
-    setselectedUom(null);
-    setselectedprod('');
-    setEditState();
-    setbillAmount(0);
-    settaxAmount(0);
-    settotalAmount(0);
-    getselectCards();
-  };
-
-  const handleCancel = () => {
-    setIsModalOpen(false);
-    formRef?.current?.resetFields();
-    resetForm();
-  };
-
-  useEffect(() => {
-    if (isModalOpen) {
-      holdnamedrop();
-    }
-  }, [isModalOpen]);
-
-  const holdnamedrop = async () => {
-    let data = {
-      CompId: CompId,
-      BranchId: BranchId,
-      AppId: AppId,
-      ProdType: 'O',
-    };
-    const respons = await dispatch(othernamedrop(data)).unwrap();
-    setTabledropname(respons?.data?.data);
-
-    const response = await dispatch(getUomData()).unwrap();
-
-    const UomTypePreference = ApplicationPreferenceData?.find(
-      (preference) => preference?.PreferredCatName === 'Product Uom'
-    )?.PreferenceCatDetails;
-    const UomPreference = response?.data?.data?.filter((item) =>
-      UomTypePreference?.some?.(
-        (e) =>
-          e?.PreferredSubCatName?.toLowerCase() ==
-          item?.ConfigName?.toLowerCase() && e?.PreferredStatus == 'Y'
-      )
-    );
-
-    setTableuomname(UomPreference);
-    let UomId = UomPreference?.filter(
-      (item) => item.ConfigName?.toLowerCase() === 'pcs'
-    )?.[0]?.['ConfigId'];
-    formRef.current?.setFieldsValue({ UOM: UomId });
-    setselectedUom(UomId);
-
-    const responses = await dispatch(
-      getAdmin({ CompId: CompId, AppId: AppId })
-    ).unwrap();
-    setTabletaxname(responses?.data?.data);
-
-    const responsess = await dispatch(
-      getsupplierBasedOnCmpIdBrIdAppId({
-        CompId: CompId,
-        AppId: AppId,
-        BranchId: BranchId,
-      })
-    ).unwrap();
-    let suppid = responsess?.data?.data?.filter(
-      (item) => item.SuppName?.toLowerCase() === 'self'
-    );
-    setsupplierid(suppid?.[0]?.SuppId);
-
-    const res = await dispatch(getproducttypeid()).unwrap();
-    let productname = res?.data?.data?.filter(
-      (item) => item.ConfigName === 'Others'
-    );
-    setprodtype(productname?.[0]?.ConfigId);
-  };
-
   const onComplete = useCallback(() => {
     setMessageData(null);
     setMessageType(null);
   }, []);
 
-  const onChangeFunction = (selectedValue) => {
-    formRef.current?.setFieldsValue({ TaxId: selectedValue });
-    setSelectedTaxPercentage(selectedValue);
-    let data = {
-      TaxId: selectedValue,
-      Size: formRef.current?.getFieldsValue()?.Size,
-      MRP: formRef.current?.getFieldsValue()?.MRP,
-      Quantity: formRef.current?.getFieldsValue()?.Quantity,
-    };
-    handleValuesChange(data);
-  };
-  const getOptionLabel = (option, selected) => {
-    return selected
-      ? option.TaxPercentage + ' %'
-      : option.TaxIdName + ' - ' + option.TaxPercentage + ' % ';
-  };
-
-  const onChangeuomFunction = (selectedValues) => {
-    formRef.current?.setFieldsValue({ UOM: selectedValues });
-    setselectedUom(selectedValues);
-  };
-
-  const onChangeprodFunction = (e) => {
-    setAdd(true);
-    setselectedprod(e);
-    formRef.current?.setFieldsValue({
-      UOM: Tableuomname?.filter(
-        (item) => item.ConfigName?.toLowerCase() === 'pcs'
-      )?.[0]?.['ConfigId'],
-    });
-    formRef.current?.setFieldsValue({ Quantity: 1 });
-    formRef?.current?.setFieldsValue({ MRP: null });
-    formRef?.current?.setFieldsValue({ Size: 1 });
-    setselectedUom(
-      Tableuomname?.filter(
-        (item) => item.ConfigName?.toLowerCase() === 'pcs'
-      )?.[0]?.['ConfigId']
-    );
-    setdefaultQuantity(1);
-    setEditState();
-  };
-  const onAutocompleteChange = (selectedOption) => {
-    setAdd(false);
-    const pattern = /(.+?) \(\d*[^\d]+\)/;
-    const matches = selectedOption?.value.match(pattern);
-    const value = Tabledropname?.filter(
-      (item) => item.ProdName === String(matches[1]?.trim())
-    )?.[0]?.ProdId;
-    let PreviousProduct = Tabledropname?.find(
-      (item) => item?.ProdId === String(value)
-    );
-
-    setEditState(PreviousProduct);
-    if (PreviousProduct) {
-      formRef.current?.setFieldsValue({
-        TaxId: PreviousProduct?.TaxId,
-        UOM: PreviousProduct?.UOM,
-        Size: PreviousProduct?.Size,
-        MRP: PreviousProduct?.SellPrice,
-      });
-      setSelectedTaxPercentage(PreviousProduct?.TaxId);
-      setselectedUom(PreviousProduct?.UOM);
-
-      let data = {
-        TaxId: PreviousProduct?.TaxId,
-        Size: PreviousProduct?.Size,
-        MRP: PreviousProduct?.SellPrice,
-        Quantity: formRef.current?.getFieldsValue()?.Quantity,
-      };
-      handleValuesChange(data);
-    }
-  };
-
-  var today = new Date();
-  var formattedDate = today.toISOString()?.split('T')[0];
-
-  const onFinish = async (values) => {
-    let postData = {};
-    const pattern = /(.+?) \(\d*[^\d]+\)/;
-    const matches = selectedprod.match(pattern);
-
-    let response = {};
-
-    postData['CompId'] = CompId;
-    postData['BranchId'] = BranchId;
-    postData['AppId'] = AppId;
-    postData['CreatedBy'] = UserId;
-    postData['ProdType'] = prodtype;
-    postData['QtyBasedPrice'] = 'N';
-    postData['StockAvailable'] = 'N';
-    postData['InwardDate'] = formattedDate;
-    postData['SuppId'] = supplierid;
-    postData['SellPrice'] = values.MRP;
-    postData['AutoGenerateQr'] = 'N';
-    postData['ProdName'] = matches ? matches : selectedprod;
-    postData['TokenAvailable'] = 'N';
-    postData['UOM'] = values.UOM;
-    postData['Size'] = values.Size;
-    postData['MRP'] = values.MRP;
-    postData['TaxId'] = values.TaxId;
-    postData['SinglePc'] = 'N';
-    if (EditState) {
-      const updatedData = {
-        ...EditState,
-        Quantity: parseInt(values.Quantity),
-        SellPrice: values.MRP,
-        OtherProduct: 'Others',
-        SinglePc: 'N',
-      };
-      dispatch(changeothersdata(updatedData));
-      setEditState();
-    } else {
-      response = await dispatch(postProductData(postData)).unwrap();
-      if (response?.data?.statusCode != 0) {
-        let othersdata = response?.data?.ProductDetails?.[0];
-
-        const updatedData = {
-          ...othersdata,
-          Quantity: parseInt(values.Quantity),
-          OtherProduct: 'Others',
-          SinglePc: 'N',
-        };
-        dispatch(changeothersdata(updatedData));
-
-        setMessageType('success');
-        setMessageData(response?.data?.response);
-        setIsModalOpen(false);
-      } else {
-        setMessageType('error');
-
-        setMessageData(response?.data?.response);
-        handleCancel();
-      }
-    }
-    setselectedprod(null);
-    handleCancel();
-
-    formRef?.current?.resetFields();
-    resetForm();
-    // let data = {
-    //   CompId: CompId,
-    //   BranchId: BranchId,
-    //   AppId: AppId,
-    //   ProdType: 'O',
-    // };
-    // const respons = await dispatch(othernamedrop(data)).unwrap();
-    // if (respons?.data?.statusCode == 1) {
-    //   setTabledropname(respons?.data?.data);
-    // }
-  };
-
-  const handleValuesChange = (values) => {
-    const { Size, MRP, TaxId, Quantity } = values;
-    let taxpercentagevalue = Tabletaxname?.find((item) => item.TaxId === TaxId);
-
-    const parsedSize = parseInt(Quantity);
-    const parsedMRP = parseInt(MRP);
-    const taxRate = parseFloat(taxpercentagevalue?.TaxPercentage);
-
-    if (!isNaN(parsedSize) && !isNaN(parsedMRP)) {
-      const newBillAmount = parsedSize * parsedMRP;
-
-      const newTaxAmount =
-        taxRate === 0 ? 0 : (newBillAmount * taxRate) / (100 + taxRate);
-
-      const finalBillAmount = newBillAmount - newTaxAmount;
-      const newTotalAmount = newBillAmount;
-
-      setbillAmount(finalBillAmount.toFixed(2));
-      settaxAmount(newTaxAmount.toFixed(2));
-      settotalAmount(newTotalAmount.toFixed(2));
-    } else {
-      setbillAmount(0);
-      settaxAmount(0);
-      settotalAmount(0);
-    }
-  };
   useEffect(() => {
     function handleResize() {
       setHeight(window.innerHeight);
     }
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
-  }, [height]);
+  }, [height, categoryData]);
-
-  useEffect(() => {
-    function handleResize() {
-      setHeight(window.innerHeight);
-    }
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, [categoryData]);
 
   // ...
 
@@ -785,14 +453,6 @@ function BSCategoryVertical(props) {
     };
   }, [scrollContainerRef]);
 
-  useEffect(() => {
-    function handleResize() {
-      setHeight(window.innerheight);
-    }
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, [height, categoryData]);
-
   const maindiv = document.getElementById('mainDiv');
   const count = maindiv?.querySelectorAll('div');
 
@@ -828,6 +488,7 @@ function BSCategoryVertical(props) {
     // Return the lightened color as a HEX string
     return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
   };
+
   function darkenColor(hex, percent) {
     if (!hex) return '#000000'; // Default to black if no color is provided
 
@@ -901,336 +562,8 @@ function BSCategoryVertical(props) {
           onComplete={onComplete}
         />
       )}
-      {isModalOpen && (
-        <DefaultModal
-          open={isModalOpen}
-          title="Other Items"
-          footer={false}
-          children={
-            <>
-              <br />
-              <div className="configMsrMainDiv">
-                <Form
-                  ref={formRef}
-                  onFinish={onFinish}
-                  // onValuesChange={handleValuesChange}
-                  onValuesChange={(changedValues, allValues) =>
-                    handleValuesChange(allValues)
-                  }
-                >
-                  <div className="configMsrSubDiv">
-                    <Form.Item
-                      name="ProdName"
-                      style={{ margin: '-17px 8px 0px -7px' }}
-                      rules={[
-                        {
-                          required: true,
-                          message: 'Please enter Product Name',
-                        },
-                        {
-                          validator: async (_, value) => {
-                            await validateSafeInput(value);
 
-                            if (value && value.length > 50) {
+      {isModalOpen && <OtherItemsModal open={isModalOpen} setOpen={isModalOpen} getselectCards={getselectCards} />}
-                              return Promise.reject(
-                                'Product Name should not exceed 50 characters'
-                              );
-                            }
-
-                            return Promise.resolve();
-                          },
-                        },
-                      ]}
-                    >
-                      <AutoComplete
-                        options={Tabledropname?.map((option) => ({
-                          value:
-                            option.ProdName +
-                            ' ' +
-                            '(' +
-                            option.Size +
-                            option.UomName +
-                            ')',
-                          label:
-                            option.ProdName +
-                            ' ' +
-                            '(' +
-                            option.Size +
-                            option.UomName +
-                            ')',
-                        }))}
-                        style={{ width: '250px', height: '48px' }}
-                        onSelect={(value, option) =>
-                          onAutocompleteChange(option)
-                        }
-                        filterOption={(inputValue, option) =>
-                          option.label
-                            .toLowerCase()
-                            .includes(inputValue.toLowerCase()) ||
-                          option.value
-                            .toString()
-                            .toLowerCase()
-                            .includes(inputValue.toLowerCase())
-                        }
-                      >
-                        <InputField
-                          label="Product Name"
-                          style={{}}
-                          value={selectedprod}
-                          onChange={(e) =>
-                            onChangeprodFunction(e?.target?.value)
-                          }
-                          onPressEnter={(e) =>
-                            onChangeprodFunction(e?.target?.value)
-                          }
-                          isOnChange={EditState ? true : false}
-                          suffix={
-                            <TooltipWrapper
-                              title="Search Product Name"
-                              isMobile={isMobile}
-                            >
-                              <SearchOutlined
-                                style={{ color: 'rgba(0,0,0,.45)' }}
-                              />
-                            </TooltipWrapper>
-                          }
-                        />
-                      </AutoComplete>
-                    </Form.Item>
-                    <Form.Item name="TaxId">
-                      <DropDowns
-                        options={Tabletaxname?.map((option) => ({
-                          value: option.TaxId,
-                          label: getOptionLabel(
-                            option,
-                            selectedTaxPercentage === option.TaxId
-                          ),
-                          // label:
-                          //   option.TaxIdName +
-                          //   " - " +
-                          //   option.TaxPercentage +
-                          //   " % ",
-                        }))}
-                        className="field-DropDown"
-                        label={<label class="required">Tax</label>}
-                        // optionsNames={{ value: "TaxPercentage", label: "TaxIdName" }}
-                        onChangeFunction={(selectedValue) =>
-                          onChangeFunction(selectedValue)
-                        }
-                        valueData={selectedTaxPercentage}
-                        isOnChange={EditState ? true : false}
-                        disabled={add || !EditState ? false : true}
-                      />
-                    </Form.Item>
-                    <Form.Item
-                      name="Size"
-                      rules={[
-                        {
-                          required: true,
-                          message: 'Please Enter No.of.Units',
-                        },
-                        {
-                          validator: async (_, value) => {
-                            await validateSafeInput(value);
-                            if (value && value.length > 10) {
-                              return Promise.reject(
-                                'No.of.Units should not exceed 10 characters'
-                              );
-                            }
-
-                            return Promise.resolve();
-                          },
-                        },
-                      ]}
-                    >
-                      <InputField
-                        label={<label class="required">No.of.Units</label>}
-                        autocomplete="off"
-                        onChange={(e) =>
-                          handleValuesChange({
-                            ...formRef.current.getFieldsValue(),
-                            Size: e?.target?.value,
-                          })
-                        }
-                        isOnChange={!EditState ? (add ? true : false) : true}
-                        disabled={add || !EditState ? false : true}
-                        suffix={
-                          <Tooltip
-                            title={
-                              <>
-                                <div>Enter No.of.Units as:</div>
-                                <div>
-                                  - Single number (<strong>5</strong>)
-                                </div>
-                                <div>
-                                  - Decimal (<strong>1.500 or 1.5</strong>)
-                                </div>
-                                <div>
-                                  - Width x Height (<strong>10x10</strong>)
-                                </div>
-                              </>
-                            }
-                          >
-                            <InfoCircleOutlined
-                              style={{
-                                color: 'rgba(0,0,0,.45)',
-                              }}
-                            />
-                          </Tooltip>
-                        }
-                      />
-                    </Form.Item>
-                    <Form.Item
-                      name="UOM"
-                      rules={[
-                        {
-                          required: true,
-                          message: 'Please Select UOM',
-                        },
-                      ]}
-                    >
-                      <DropDowns
-                        options={Tableuomname?.map((option) => ({
-                          value: option.ConfigId,
-                          label: option.ConfigName,
-                        }))}
-                        placeholder="ConfigType"
-                        label={<label class="required">UOM</label>}
-                        optionsNames={{ value: 'TypeId', label: 'TypeName' }}
-                        className="field-DropDown"
-                        onChangeFunction={(selectedValues) =>
-                          onChangeuomFunction(selectedValues)
-                        }
-                        valueData={selectedUom}
-                        disabled={add || !EditState ? false : true}
-                      />
-                    </Form.Item>
-                    <Form.Item
-                      name="Quantity"
-                      rules={[
-                        {
-                          required: true,
-                          pattern: /^[1-9]\d*(\.\d+)?$/,
-                          message: 'Please Enter Quantity',
-                        },
-                        {
-                          validator: async (_, value) => {
-                            await validateSafeInput(value);
-                            if (!value) {
-                              return Promise.resolve();
-                            }
-
-                            if (!/^\d+(\.\d{1,2})?$/.test(value)) {
-                              return Promise.reject(
-                                'Enter valid Quantity (Max 2 decimal places)'
-                              );
-                            }
-                            if (parseFloat(value) === 0) {
-                              return Promise.reject(' Quantity cannot be 0');
-                            }
-                            if (value?.length > 10) {
-                              return Promise.reject(
-                                'Quantity cannot exceed 10 digits'
-                              );
-                            } else {
-                              return Promise.resolve();
-                            }
-                          },
-                        },
-                      ]}
-                    >
-                      <InputField
-                        label={<label class="required">Quantity</label>}
-                        valueData={defaultQuantity}
-                        autocomplete="off"
-                        onChange={(e) =>
-                          handleValuesChange({
-                            ...formRef.current.getFieldsValue(),
-                            Quantity: e?.target?.value,
-                          })
-                        }
-                        isOnChange={defaultQuantity ? true : false}
-                      />
-                    </Form.Item>
-                    <Form.Item
-                      name="MRP"
-                      rules={[
-                        {
-                          required: true,
-                          pattern: /^[1-9]\d*(\.\d+)?$/,
-                          message: 'Please Enter MRP',
-                        },
-                        {
-                          validator: async (_, value) => {
-                            await validateSafeInput(value);
-
-                            if (!value) {
-                              return Promise.resolve();
-                            }
-
-                            if (!/^\d+(\.\d{1,2})?$/.test(value)) {
-                              return Promise.reject(
-                                'Enter valid MRP (Max 2 decimal places)'
-                              );
-                            }
-
-                            if (parseFloat(value) === 0) {
-                              return Promise.reject('MRP cannot be 0');
-                            }
-
-                            if (value?.length > 10) {
-                              return Promise.reject(
-                                'MRP cannot exceed 10 digits'
-                              );
-                            }
-
-                            return Promise.resolve();
-                          },
-                        },
-                      ]}
-                    >
-                      <InputField
-                        label={
-                          <label class="required">Amount / Per Item</label>
-                        }
-                        autocomplete="off"
-                        onChange={(e) =>
-                          handleValuesChange({
-                            ...formRef.current.getFieldsValue(),
-                            MRP: e?.target?.value,
-                          })
-                        }
-                        isOnChange={EditState ? true : false}
-                      // disabled={!!EditState}
-                      />
-                    </Form.Item>
-                  </div>
-                  <div
-                    style={{
-                      display: 'flex',
-                      columnGap: '5rem',
-                      fontSize: '16px',
-                    }}
-                  >
-                    <p>Bill Amount {isNaN(billAmount) ? 0 : billAmount}</p>
-                    <p>Tax Amount {isNaN(taxAmount) ? 0 : taxAmount}</p>
-                    <p>Total Amount {isNaN(totalAmount) ? 0 : totalAmount}</p>
-                  </div>
-                  <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                    <Buttons
-                      buttonText="SUBMIT"
-                      color="901D77"
-                      icon={<ArrowRightOutlined />}
-                      onClick={() => onFinish()}
-                    />
-                  </div>
-                </Form>
-              </div>
-            </>
-          }
-          handleCancel={handleCancel}
-        />
-      )}
 
       <div className="CategoryVertical-buttons" ref={containerRef}>
         <div

src/Pages/BookingScreen/Components/BSCategories/OtherItemsModal.jsx

@@ -0,0 +1,665 @@
+import { getSession, validateSafeInput } from "../../../../Services/Others";
+import { TooltipWrapper } from "../../../../../ownLib/my-ui-lib";
+import { isMobile } from "react-device-detect";
+import { InputField } from "../../../../Components/Forms/InputField";
+import { AutoComplete, Form, Tooltip } from "antd";
+import { DropDowns } from "../../../../Components/Forms/DropDown";
+import Buttons from "../../../../Components/Forms/Buttons";
+import { changeothersdata, getAdmin, getproducttypeid, getsupplierBasedOnCmpIdBrIdAppId, getUomData, othernamedrop, postProductData } from "../../../../Features/BookingScreen/BookingData/BookingData";
+import { useState, useRef, useEffect, useCallback } from "react";
+import { ApplicationPreferences } from "../../../../Features/BrachLogin/BranchLogin";
+import { useSelector, useDispatch } from "react-redux";
+import { Messages } from "../../../../Components/Notifications/Messages";
+import {
+    InfoCircleOutlined,
+    ArrowRightOutlined,
+    SearchOutlined,
+} from '@ant-design/icons';
+import { DefaultModal } from "../../../../Components/Modal/DefaultModal";
+
+const OtherItemsModal = ({
+    open = false,
+    setOpen = () => { },
+    getselectCards = () => { }
+}) => {
+
+    const formRef = useRef(null);
+
+    const dispatch = useDispatch();
+
+    const AppId = getSession('AppId');
+    const CompId = getSession('CompId');
+    const BranchId = getSession('BranchId');
+    const UserId = getSession('UserId');
+
+    const ApplicationPreferenceData = useSelector(ApplicationPreferences);
+
+    const [billAmount, setBillAmount] = useState(0);
+    const [prevOtherItems, setPrevOtherItems] = useState([]);
+    const [uomConfigs, setUomConfigs] = useState([]);
+    const [taxAmount, setTaxAmount] = useState(0);
+    const [totalAmount, setTotalAmount] = useState(0);
+    const [taxData, setTaxData] = useState([]);
+    const [selectedTaxPercentage, setSelectedTaxPercentage] = useState(null);
+    const [selectedUom, setSelectedUom] = useState(null);
+    const [selectedProduct, setSelectedProduct] = useState(null);
+    const [editState, setEditState] = useState(false);
+    const [prodType, setProdType] = useState(null);
+    const [add, setAdd] = useState(false);
+    const [supplierId, setSupplierId] = useState(null);
+    const [messageType, setMessageType] = useState(null);
+    const [messageData, setMessageData] = useState(null);
+    const [defaultQuantity, setDefaultQuantity] = useState(1);
+    console.log(formRef?.current?.getFieldsValue(), "formRef", defaultQuantity, taxData)
+
+    const getOptionLabel = (option, selected) => {
+        return selected
+            ? option.TaxPercentage + ' %'
+            : option.TaxIdName + ' - ' + option.TaxPercentage + ' % ';
+    };
+
+    const handleTaxChange = (selectedValue) => {
+        formRef.current?.setFieldsValue({ TaxId: selectedValue });
+        setSelectedTaxPercentage(selectedValue);
+        let data = {
+            TaxId: selectedValue,
+            Size: formRef.current?.getFieldsValue()?.Size,
+            MRP: formRef.current?.getFieldsValue()?.MRP,
+            Quantity: formRef.current?.getFieldsValue()?.Quantity,
+        };
+        handleValuesChange(data);
+    };
+
+    const handleProductChange = (e) => {
+        setAdd(true);
+        setSelectedProduct(e);
+        formRef.current?.setFieldsValue({
+            UOM: uomConfigs?.filter(
+                (item) => item.ConfigName?.toLowerCase() === 'pcs'
+            )?.[0]?.['ConfigId'],
+        });
+        formRef.current?.setFieldsValue({ Quantity: 1 });
+        formRef?.current?.setFieldsValue({ MRP: null });
+        formRef?.current?.setFieldsValue({ Size: 1 });
+        setSelectedUom(
+            uomConfigs?.filter(
+                (item) => item.ConfigName?.toLowerCase() === 'pcs'
+            )?.[0]?.['ConfigId']
+        );
+        setDefaultQuantity(1);
+        setEditState(false);
+    };
+
+    const handleUOMChange = (selectedValues) => {
+        formRef.current?.setFieldsValue({ UOM: selectedValues });
+        setSelectedUom(selectedValues);
+    };
+
+    const handleValuesChange = (values) => {
+        const { Size, MRP, TaxId, Quantity } = values;
+        let taxPercentageValue = taxData?.find((item) => item.TaxId === TaxId);
+
+        const parsedSize = parseInt(Quantity);
+        const parsedMRP = parseInt(MRP);
+        const taxRate = parseFloat(taxPercentageValue?.TaxPercentage);
+
+        if (!isNaN(parsedSize) && !isNaN(parsedMRP)) {
+            const newBillAmount = parsedSize * parsedMRP;
+
+            const newTaxAmount =
+                taxRate === 0 ? 0 : (newBillAmount * taxRate) / (100 + taxRate);
+
+            const finalBillAmount = newBillAmount - newTaxAmount;
+            const newTotalAmount = newBillAmount;
+
+            setBillAmount(finalBillAmount.toFixed(2));
+            setTaxAmount(newTaxAmount.toFixed(2));
+            setTotalAmount(newTotalAmount.toFixed(2));
+        } else {
+            setBillAmount(0);
+            setTaxAmount(0);
+            setTotalAmount(0);
+        }
+    };
+
+    useEffect(() => {
+        if (!open) return;
+        fetchOtherProductsData();
+    }, [open]);
+
+    const fetchOtherProductsData = async () => {
+        try {
+            const data = {
+                CompId,
+                BranchId,
+                AppId,
+                ProdType: "O",
+            };
+
+            const [
+                otherProducts,
+                uomResponse,
+                taxResponse,
+                supplierResponse,
+                prodTypeResponse
+            ] = await Promise.all([
+                dispatch(othernamedrop(data)).unwrap(),
+                dispatch(getUomData()).unwrap(),
+                dispatch(getAdmin({ CompId, AppId })).unwrap(),
+                dispatch(getsupplierBasedOnCmpIdBrIdAppId({ CompId, AppId, BranchId })).unwrap(),
+                dispatch(getproducttypeid()).unwrap()
+            ]);
+
+            /* OTHER PRODUCTS */
+            setPrevOtherItems(otherProducts?.data?.data || []);
+
+            /* UOM */
+            const UomTypePreference = ApplicationPreferenceData?.find(
+                (preference) => preference?.PreferredCatName === "Product Uom"
+            )?.PreferenceCatDetails;
+
+            const UomPreference = uomResponse?.data?.data?.filter((item) =>
+                UomTypePreference?.some(
+                    (e) =>
+                        e?.PreferredSubCatName?.toLowerCase() ===
+                        item?.ConfigName?.toLowerCase() &&
+                        e?.PreferredStatus === "Y"
+                )
+            );
+
+            setUomConfigs(UomPreference || []);
+
+            const pcsUom = UomPreference?.find(
+                (item) => item.ConfigName?.toLowerCase() === "pcs"
+            );
+
+            formRef.current?.setFieldsValue({ UOM: pcsUom?.ConfigId });
+            setSelectedUom(pcsUom?.ConfigId);
+
+            /* TAX */
+            if (taxResponse?.data?.statusCode === 1) {
+                const taxList = taxResponse?.data?.data || [];
+                setTaxData(taxList);
+
+                const nilTax = taxList.find(
+                    (item) => item.TaxIdName?.toLowerCase() === "nil"
+                );
+
+                handleTaxChange(nilTax?.TaxId);
+                formRef.current?.setFieldsValue({ Quantity: defaultQuantity });
+            } else {
+                setTaxData([]);
+            }
+
+            /* SUPPLIER */
+            const supp = supplierResponse?.data?.data?.find(
+                (item) => item.SuppName?.toLowerCase() === "self"
+            );
+
+            setSupplierId(supp?.SuppId || "");
+
+            /* PRODUCT TYPE */
+            const prodType = prodTypeResponse?.data?.data?.find(
+                (item) => item.ConfigName === "Others"
+            );
+
+            setProdType(prodType?.ConfigId);
+
+        } catch (error) {
+            console.error("Failed to load Other Items data", error);
+        }
+    };
+
+    const handleAutoCompleteChange = (selectedOption) => {
+        setAdd(false);
+        const pattern = /(.+?) \(\d*[^\d]+\)/;
+        const matches = selectedOption?.value?.match(pattern);
+        const value = prevOtherItems?.filter(
+            (item) => item.ProdName === String(matches[1]?.trim())
+        )?.[0]?.ProdId;
+        const previousProduct = prevOtherItems?.find(
+            (item) => item?.ProdId === String(value)
+        );
+
+        setEditState(previousProduct);
+        if (previousProduct) {
+            formRef.current?.setFieldsValue({
+                TaxId: previousProduct?.TaxId,
+                UOM: previousProduct?.UOM,
+                Size: previousProduct?.Size,
+                MRP: previousProduct?.SellPrice,
+            });
+            setSelectedTaxPercentage(previousProduct?.TaxId);
+            setSelectedUom(previousProduct?.UOM);
+
+            let data = {
+                TaxId: previousProduct?.TaxId,
+                Size: previousProduct?.Size,
+                MRP: previousProduct?.SellPrice,
+                Quantity: formRef.current?.getFieldsValue()?.Quantity,
+            };
+            handleValuesChange(data);
+        }
+    };
+
+    const resetForm = async () => {
+        formRef?.current?.resetFields();
+        formRef?.current?.setFieldsValue({
+            TaxId: null,
+            Size: null,
+            UOM: null,
+            MRP: null,
+            ProdName: null,
+            Quantity: null,
+        });
+        setSelectedTaxPercentage(null);
+        setSelectedUom(null);
+        setSelectedProduct(null);
+        setEditState(false);
+        setBillAmount(0);
+        setTaxAmount(0);
+        setTotalAmount(0);
+        await getselectCards();
+    };
+
+    const today = new Date();
+    const formattedDate = today.toISOString()?.split('T')[0];
+
+    const handleSubmit = async (values) => {
+        let postData = {};
+        const pattern = /(.+?) \(\d*[^\d]+\)/;
+        const matches = selectedProduct?.match(pattern);
+
+        postData['CompId'] = CompId;
+        postData['BranchId'] = BranchId;
+        postData['AppId'] = AppId;
+        postData['CreatedBy'] = UserId;
+        postData['ProdType'] = prodType;
+        postData['QtyBasedPrice'] = 'N';
+        postData['StockAvailable'] = 'N';
+        postData['InwardDate'] = formattedDate;
+        postData['SuppId'] = supplierId;
+        postData['SellPrice'] = values.MRP;
+        postData['AutoGenerateQr'] = 'N';
+        postData['ProdName'] = matches ? matches : selectedProduct;
+        postData['TokenAvailable'] = 'N';
+        postData['UOM'] = values.UOM;
+        postData['Size'] = values.Size;
+        postData['MRP'] = values.MRP;
+        postData['TaxId'] = values.TaxId;
+        postData['SinglePc'] = 'N';
+        if (editState) {
+            const updatedData = {
+                ...editState,
+                Quantity: parseInt(values.Quantity),
+                SellPrice: values.MRP,
+                OtherProduct: 'Others',
+                SinglePc: 'N',
+            };
+            dispatch(changeothersdata(updatedData));
+            setEditState(null);
+            await handleCancel();
+        } else {
+            const response = await dispatch(postProductData(postData)).unwrap();
+            if (response?.data?.statusCode != 0) {
+                let othersdata = response?.data?.ProductDetails?.[0];
+
+                const updatedData = {
+                    ...othersdata,
+                    Quantity: parseInt(values.Quantity),
+                    OtherProduct: 'Others',
+                    SinglePc: 'N',
+                };
+                dispatch(changeothersdata(updatedData));
+
+                setMessageType('success');
+                setMessageData(response?.data?.response);
+                await handleCancel();
+            } else {
+                setMessageType('error');
+                setMessageData(response?.data?.response);
+            }
+        }
+    };
+
+    const handleCancel = async () => {
+        setOpen(false);
+        formRef?.current?.resetFields();
+        await resetForm();
+    };
+
+    const onComplete = useCallback(() => {
+        setMessageData(null)
+        setMessageType(null)
+    }, [])
+
+    return (
+        <>
+            <Messages messageData={messageData} messageType={messageType} onComplete={onComplete} />
+            <DefaultModal
+                open={open}
+                title="Other Items"
+                footer={false}
+                children={
+                    <>
+                        <br />
+                        <div className="configMsrMainDiv">
+                            <Form
+                                ref={formRef}
+                                onFinish={handleSubmit}
+                                // onValuesChange={handleValuesChange}
+                                onValuesChange={(changedValues, allValues) =>
+                                    handleValuesChange(allValues)
+                                }
+                            >
+                                <div className="configMsrSubDiv">
+                                    <Form.Item
+                                        name="ProdName"
+                                        style={{ margin: '-17px 8px 0px -7px' }}
+                                        rules={[
+                                            {
+                                                required: true,
+                                                message: 'Please enter Product Name',
+                                            },
+                                            {
+                                                validator: async (_, value) => {
+                                                    await validateSafeInput(value);
+
+                                                    if (value && value.length > 50) {
+                                                        return Promise.reject(
+                                                            'Product Name should not exceed 50 characters'
+                                                        );
+                                                    }
+
+                                                    return Promise.resolve();
+                                                },
+                                            },
+                                        ]}
+                                    >
+                                        <AutoComplete
+                                            options={prevOtherItems?.map((option) => ({
+                                                value:
+                                                    option.ProdName +
+                                                    ' ' +
+                                                    '(' +
+                                                    option.Size +
+                                                    option.UomName +
+                                                    ')',
+                                                label:
+                                                    option.ProdName +
+                                                    ' ' +
+                                                    '(' +
+                                                    option.Size +
+                                                    option.UomName +
+                                                    ')',
+                                            }))}
+                                            style={{ width: '250px', height: '48px' }}
+                                            onSelect={(value, option) =>
+                                                handleAutoCompleteChange(option)
+                                            }
+                                            filterOption={(inputValue, option) =>
+                                                option.label
+                                                    .toLowerCase()
+                                                    .includes(inputValue.toLowerCase()) ||
+                                                option.value
+                                                    .toString()
+                                                    .toLowerCase()
+                                                    .includes(inputValue.toLowerCase())
+                                            }
+                                        >
+                                            <InputField
+                                                label="Product Name"
+                                                value={selectedProduct}
+                                                onChange={(e) =>
+                                                    handleProductChange(e?.target?.value)
+                                                }
+                                                onPressEnter={(e) =>
+                                                    handleProductChange(e?.target?.value)
+                                                }
+                                                isOnChange={editState ? true : false}
+                                                suffix={
+                                                    <TooltipWrapper
+                                                        title="Search Product Name"
+                                                        isMobile={isMobile}
+                                                    >
+                                                        <SearchOutlined
+                                                            style={{ color: 'rgba(0,0,0,.45)' }}
+                                                        />
+                                                    </TooltipWrapper>
+                                                }
+                                            />
+                                        </AutoComplete>
+                                    </Form.Item>
+                                    <Form.Item name="TaxId">
+                                        <DropDowns
+                                            options={taxData?.map((option) => ({
+                                                value: option.TaxId,
+                                                label: getOptionLabel(
+                                                    option,
+                                                    selectedTaxPercentage === option.TaxId
+                                                ),
+                                                // label:
+                                                //   option.TaxIdName +
+                                                //   " - " +
+                                                //   option.TaxPercentage +
+                                                //   " % ",
+                                            }))}
+                                            className="field-DropDown"
+                                            label={<label class="required">Tax</label>}
+                                            // optionsNames={{ value: "TaxPercentage", label: "TaxIdName" }}
+                                            onChangeFunction={handleTaxChange}
+                                            valueData={selectedTaxPercentage}
+                                            isOnChange={editState ? true : false}
+                                            disabled={add || !editState ? false : true}
+                                        />
+                                    </Form.Item>
+                                    <Form.Item
+                                        name="Size"
+                                        rules={[
+                                            {
+                                                required: true,
+                                                message: 'Please Enter No.of.Units',
+                                            },
+                                            {
+                                                validator: async (_, value) => {
+                                                    await validateSafeInput(value);
+                                                    if (value && value.length > 10) {
+                                                        return Promise.reject(
+                                                            'No.of.Units should not exceed 10 characters'
+                                                        );
+                                                    }
+
+                                                    return Promise.resolve();
+                                                },
+                                            },
+                                        ]}
+                                    >
+                                        <InputField
+                                            label={<label class="required">No.of.Units</label>}
+                                            autocomplete="off"
+                                            onChange={(e) =>
+                                                handleValuesChange({
+                                                    ...formRef.current.getFieldsValue(),
+                                                    Size: e?.target?.value,
+                                                })
+                                            }
+                                            isOnChange={!editState ? (add ? true : false) : true}
+                                            disabled={add || !editState ? false : true}
+                                            suffix={
+                                                <Tooltip
+                                                    title={
+                                                        <>
+                                                            <div>Enter No.of.Units as:</div>
+                                                            <div>
+                                                                - Single number (<strong>5</strong>)
+                                                            </div>
+                                                            <div>
+                                                                - Decimal (<strong>1.500 or 1.5</strong>)
+                                                            </div>
+                                                            <div>
+                                                                - Width x Height (<strong>10x10</strong>)
+                                                            </div>
+                                                        </>
+                                                    }
+                                                >
+                                                    <InfoCircleOutlined
+                                                        style={{
+                                                            color: 'rgba(0,0,0,.45)',
+                                                        }}
+                                                    />
+                                                </Tooltip>
+                                            }
+                                        />
+                                    </Form.Item>
+                                    <Form.Item
+                                        name="UOM"
+                                        rules={[
+                                            {
+                                                required: true,
+                                                message: 'Please Select UOM',
+                                            },
+                                        ]}
+                                    >
+                                        <DropDowns
+                                            options={uomConfigs?.map((option) => ({
+                                                value: option.ConfigId,
+                                                label: option.ConfigName,
+                                            }))}
+                                            placeholder="ConfigType"
+                                            label={<label class="required">UOM</label>}
+                                            optionsNames={{ value: 'TypeId', label: 'TypeName' }}
+                                            className="field-DropDown"
+                                            onChangeFunction={handleUOMChange}
+                                            valueData={selectedUom}
+                                            disabled={add || !editState ? false : true}
+                                        />
+                                    </Form.Item>
+                                    <Form.Item
+                                        name="Quantity"
+                                        rules={[
+                                            {
+                                                required: true,
+                                                pattern: /^[1-9]\d*(\.\d+)?$/,
+                                                message: 'Please Enter Quantity',
+                                            },
+                                            {
+                                                validator: async (_, value) => {
+                                                    await validateSafeInput(value);
+                                                    if (!value) {
+                                                        return Promise.resolve();
+                                                    }
+
+                                                    if (!/^\d+(\.\d{1,2})?$/.test(value)) {
+                                                        return Promise.reject(
+                                                            'Enter valid Quantity (Max 2 decimal places)'
+                                                        );
+                                                    }
+                                                    if (parseFloat(value) === 0) {
+                                                        return Promise.reject(' Quantity cannot be 0');
+                                                    }
+                                                    if (value?.length > 10) {
+                                                        return Promise.reject(
+                                                            'Quantity cannot exceed 10 digits'
+                                                        );
+                                                    } else {
+                                                        return Promise.resolve();
+                                                    }
+                                                },
+                                            },
+                                        ]}
+                                    >
+                                        <InputField
+                                            label={<label class="required">Quantity</label>}
+                                            valueData={defaultQuantity}
+                                            autocomplete="off"
+                                            onChange={(e) =>
+                                                handleValuesChange({
+                                                    ...formRef.current.getFieldsValue(),
+                                                    Quantity: e?.target?.value,
+                                                })
+                                            }
+                                            isOnChange={defaultQuantity ? true : false}
+                                        />
+                                    </Form.Item>
+                                    <Form.Item
+                                        name="MRP"
+                                        rules={[
+                                            {
+                                                required: true,
+                                                pattern: /^[1-9]\d*(\.\d+)?$/,
+                                                message: 'Please Enter MRP',
+                                            },
+                                            {
+                                                validator: async (_, value) => {
+                                                    await validateSafeInput(value);
+
+                                                    if (!value) {
+                                                        return Promise.resolve();
+                                                    }
+
+                                                    if (!/^\d+(\.\d{1,2})?$/.test(value)) {
+                                                        return Promise.reject(
+                                                            'Enter valid MRP (Max 2 decimal places)'
+                                                        );
+                                                    }
+
+                                                    if (parseFloat(value) === 0) {
+                                                        return Promise.reject('MRP cannot be 0');
+                                                    }
+
+                                                    if (value?.length > 10) {
+                                                        return Promise.reject(
+                                                            'MRP cannot exceed 10 digits'
+                                                        );
+                                                    }
+
+                                                    return Promise.resolve();
+                                                },
+                                            },
+                                        ]}
+                                    >
+                                        <InputField
+                                            label={
+                                                <label class="required">Amount / Per Item</label>
+                                            }
+                                            autocomplete="off"
+                                            onChange={(e) =>
+                                                handleValuesChange({
+                                                    ...formRef.current.getFieldsValue(),
+                                                    MRP: e?.target?.value,
+                                                })
+                                            }
+                                            isOnChange={editState ? true : false}
+                                        // disabled={!!editState}
+                                        />
+                                    </Form.Item>
+                                </div>
+                                <div
+                                    style={{
+                                        display: 'flex',
+                                        columnGap: '5rem',
+                                        fontSize: '16px',
+                                    }}
+                                >
+                                    <p>Bill Amount {isNaN(billAmount) ? 0 : billAmount}</p>
+                                    <p>Tax Amount {isNaN(taxAmount) ? 0 : taxAmount}</p>
+                                    <p>Total Amount {isNaN(totalAmount) ? 0 : totalAmount}</p>
+                                </div>
+                                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+                                    <Buttons
+                                        buttonText="SUBMIT"
+                                        color="901D77"
+                                        icon={<ArrowRightOutlined />}
+                                    />
+                                </div>
+                            </Form>
+                        </div>
+                    </>
+                }
+                handleCancel={handleCancel}
+            />
+        </>
+    )
+};
+
+export default OtherItemsModal;

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

@@ -212,6 +212,7 @@ const BSNavbar2 = () => {
       ?.ScreenStatus ?? 'Open';
   const navbarOptions = BSLayout1Data?.BookingNavbar?.[1];
   const PreferenceDatas = useSelector(PreferenceData);
+  
   const userProfileData = useSelector(userDataByUserId);
   const [preOrderOpen, setPreOrderOpen] = useState(false);
   const [preOrderhiseandShow, setpreOrderhiseandShow] = useState(false);

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

@@ -187,6 +187,7 @@ const BSNavbar3 = ({ optionNames }) => {
   const userProfileData = useSelector(userDataByUserId);
   const appPreferences = useSelector(ApplicationPreferences);
   const preferences = useSelector(PreferenceData);
+  console.log(preferences, "preferencespreferences")
   const orderType = useSelector(GlobalOrderType);
   const bookingType = useSelector(GlobalBookingType, shallowEqual);
   const layoutData = useSelector(getTemplateData);
@@ -712,43 +713,43 @@ const BSNavbar3 = ({ optionNames }) => {
                 (item) =>
                   item?.FeatureAddonName?.toLowerCase() !== 'weight scale'
               ) && (
-                <div
+                  <div
-                  style={{
+                    style={{
-                    pointerEvents: orderType === 'Failed' ? 'none' : 'auto',
+                      pointerEvents: orderType === 'Failed' ? 'none' : 'auto',
-                  }}
+                    }}
-                >
+                  >
-                  <BSNavBarWeightScale />
+                    <BSNavBarWeightScale />
-                </div>
+                  </div>
-              )}
+                )}
               {FeatureAddonData?.FeatureDtls?.find(
                 (item) => item?.FeatureAddonName?.toLowerCase() === 'preorder'
               ) && (
-                <div
+                  <div
-                  className="BSBillingNavBar2-AllIcons"
+                    className="BSBillingNavBar2-AllIcons"
-                  style={{
+                    style={{
-                    pointerEvents:
+                      pointerEvents:
-                      tableData || orderType === 'Failed' ? 'none' : 'auto',
+                        tableData || orderType === 'Failed' ? 'none' : 'auto',
-                    opacity: tableData ? 0.5 : 1,
+                      opacity: tableData ? 0.5 : 1,
-                  }}
+                    }}
-                >
+                  >
-                  <TooltipWrapper title={'Pre Booking'} isMobile={isMobile}>
+                    <TooltipWrapper title={'Pre Booking'} isMobile={isMobile}>
-                    <Badge
+                      <Badge
-                      count={preOrderPendingCount}
+                        count={preOrderPendingCount}
-                      offset={[-5, 10]}
+                        offset={[-5, 10]}
-                      size="small"
+                        size="small"
-                    >
+                      >
-                      <PozoPreOrderIcon
+                        <PozoPreOrderIcon
-                        className="BSBillingNav-icon"
+                          className="BSBillingNav-icon"
-                        fill={preOrderOpen ? '#52C41A' : '#1292EE'}
+                          fill={preOrderOpen ? '#52C41A' : '#1292EE'}
-                        onClick={() => {
+                          onClick={() => {
-                          openPreOrder();
+                            openPreOrder();
-                        }}
+                          }}
-                        HandleClose={preOrderHandleclose}
+                          HandleClose={preOrderHandleclose}
-                      />
+                        />
-                    </Badge>
+                      </Badge>
-                  </TooltipWrapper>
+                    </TooltipWrapper>
-                </div>
+                  </div>
-              )}
+                )}
             </>
           )}
           {preOrderOpen && (
@@ -818,16 +819,16 @@ const BSNavbar3 = ({ optionNames }) => {
             (item) =>
               item?.FeatureAddonName?.toLowerCase() === 'customer display'
           ) && (
-            <TooltipWrapper title="Customer Display" isMobile={isMobile}>
+              <TooltipWrapper title="Customer Display" isMobile={isMobile}>
-              <div
+                <div
-                onClick={openNewTab}
+                  onClick={openNewTab}
-                className="BSBillingNavBar1-AllIcons"
+                  className="BSBillingNavBar1-AllIcons"
-                style={{ width: '1.3rem', margin: '10px', cursor: 'pointer' }}
+                  style={{ width: '1.3rem', margin: '10px', cursor: 'pointer' }}
-              >
+                >
-                <CustomerDisplayicon />
+                  <CustomerDisplayicon />
-              </div>
+                </div>
-            </TooltipWrapper>
+              </TooltipWrapper>
-          )}
+            )}
           <TooltipWrapper title="Reprint (Alt+R)" isMobile={isMobile}>
             {reprintOption && (
               <div
@@ -1150,7 +1151,7 @@ const BSNavbar3 = ({ optionNames }) => {
                         pointerEvents: orderType === 'Failed' ? 'none' : 'auto',
                       }}
                     >
-                      <div className="mobile-action-item" onClick={() => {}}>
+                      <div className="mobile-action-item" onClick={() => { }}>
                         <BSNavBarEstimate />
                         <div>Estimate</div>
                       </div>

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

@@ -5,6 +5,7 @@ import TooltipWrapper from '../../../../Components/Tooltip/Tooltip';
 import './AllSalesPageSettings.scss';
 import TableHeadersetting from './TableHeadersetting';
 import PaymentOptions from '../../../Payment/PaymentOptions/PaymentOptions';
+import PreferenceList from '../../../Preference/PreferenceList';
 
 const AllSalesPageSettings = () => {
   const [settingModal, setsettingModal] = useState(false);
@@ -38,6 +39,7 @@ const AllSalesPageSettings = () => {
       </TooltipWrapper>
 
       <DefaultModal
+        className={'sales-setting-modal'}
         open={settingModal}
         footer={false}
         handleCancel={onclose}
@@ -58,8 +60,14 @@ const AllSalesPageSettings = () => {
             >
               Table
             </div>
+            <div
+              className={selectedComponent === 'Preference' ? 'selected' : ''}
+              onClick={() => ComponentSelect('Preference')}
+            >
+              Preference
+            </div>
           </div>
-          <div className="SettingsComponentDiv">
+          <div className={`SettingsComponentDiv ${selectedComponent === 'Preference' ? 'no-overflow' : ''}`}>
             {selectedComponent == 'Payment' && (
               <div>
                 <PaymentOptions setModalOpen={setsettingModal} />
@@ -69,6 +77,10 @@ const AllSalesPageSettings = () => {
             {selectedComponent === 'Table' && (
               <TableHeadersetting setModalOpen={setsettingModal} />
             )}
+            {selectedComponent === 'Preference' && (
+              <PreferenceList setting={true} />
+            )}
+
           </div>
         </div>
       </DefaultModal>

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

@@ -92,14 +92,20 @@
   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;
   }
+
+  &.no-overflow {
+    overflow: hidden !important;
+  }
 }
 
 .SettingsListSwitchBTN {
@@ -114,6 +120,7 @@
   padding: 5px;
   border-radius: 4px;
   height: 80vh;
+
   div {
     width: 100%;
     background-color: #fff;
@@ -130,6 +137,7 @@
     &:hover {
       background-color: #d1d8ec;
     }
+
     &.selected {
       background-color: #ffffff;
       color: #2563eb;
@@ -153,6 +161,7 @@
   gap: 4px;
   cursor: pointer;
   border-radius: 6px;
+
   svg {
     color: #fff !important;
     font-weight: 500;
@@ -177,8 +186,35 @@
   flex-wrap: wrap;
   margin-top: 10px;
 }
+
 .selctfontBackInput {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
+
+.sales-setting-modal {
+  .PreferencesBTN {
+    // bottom: 40px !important;
+    // right: 160px !important;
+    position: absolute;
+  }
+
+  .SettingsComponentDiv {
+    .formHeader {
+      display: none;
+    }
+  }
+
+  .menu-and-preferences {
+    gap: 10px !important;
+  }
+
+  .preferences-list {
+    margin-bottom: 5rem;
+  }
+
+  .modal-menu {
+    text-decoration: none;
+  }
+}

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

@@ -185,9 +185,9 @@ const BSLayout1 = () => {
       ? '575px'
       : '595px'
     : (UserType != 'Super Admin' &&
-          UserType != 'Super Admin User' &&
+      UserType != 'Super Admin User' &&
-          AppExpDate?.RemainingDays <= 7) ||
+      AppExpDate?.RemainingDays <= 7) ||
-        AppExpDate?.PlanType?.toLowerCase() === 'extend'
+      AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '96vh'
       : '99vh';
 
@@ -319,7 +319,7 @@ const BSLayout1 = () => {
     setListOfInvoices(false);
   };
   return (
-      <Suspense fallback={<CardSkeleton />}>
+    <Suspense fallback={<CardSkeleton />}>
       <>
         <Messages
           messageType={messageType}
@@ -344,7 +344,7 @@ const BSLayout1 = () => {
           </div>
           <div
             className={
-              BookingNavbar != 'Navbar3' ? 'BSLayout1' : 'BSLayout1Standard'
+              BookingNavbar != 'Navbar3' ? 'BSLayout1Main' : 'BSLayout1Standard'
             }
             style={{
               backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
@@ -520,8 +520,8 @@ const BSLayout1 = () => {
                 GlobalsalesDetailData={GlobalsalesDetailData}
               />
             )}
-            <div className="BSLayout1-ContentDiv">
+            <div className="BSLayout1Master">
-              <div className="BSCategory1-Contentcont">
+              <div className="BSCategoryCardDiv">
                 <div
                   style={{
                     backgroundColor:
@@ -648,10 +648,10 @@ const BSLayout1 = () => {
                     {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
                     {BSLayout1Data?.BookingBilling?.[0] ==
                       'StandardBilling' && (
-                      <div className="BSCategory2New">
+                        <div className="BSCategory2New">
-                        <StandardTable />
+                          <StandardTable />
-                      </div>
+                        </div>
-                    )}
+                      )}
                   </>
                 )}
               </div>
@@ -671,7 +671,7 @@ const BSLayout1 = () => {
           />
         )}
       </>
-     </Suspense> 
+    </Suspense>
   );
 };
 

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

@@ -6,8 +6,8 @@ import { isMobile } from 'react-device-detect';
 import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
 const BSNavbar1 = lazy(() => import('../../Components/BSNavbar/BSNavbar1'));
 const BSNavbar2 = lazy(() => import('../../Components/BSNavbar/BSNavbar2'));
-const CategoryVertical = lazy(
+const CategoryHorizontal = lazy(
-  () => import('../../Components/BSCategories/BSCategoryVertical')
+  () => import('../../Components/BSCategories/BSCategoryHorizontal')
 );
 const BSItemCard = lazy(
   () => import('../../Components/BSItemCards/BSItemCard')
@@ -195,9 +195,9 @@ const BSLayout4 = () => {
       ? '575px'
       : '590px'
     : (UserType != 'Super Admin' &&
-          UserType != 'Super Admin User' &&
+      UserType != 'Super Admin User' &&
-          AppExpDate?.RemainingDays <= 7) ||
+      AppExpDate?.RemainingDays <= 7) ||
-        AppExpDate?.PlanType?.toLowerCase() === 'extend'
+      AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '96vh'
       : '99vh';
   const [ListOfInvoices, setListOfInvoices] = useState(false);
@@ -497,12 +497,13 @@ const BSLayout4 = () => {
                 }}
               >
                 {!OtherServicesglobal && (
-                  <CategoryVertical
+                  <CategoryHorizontal
                     categoryFunction={dynamicComponentProps(
                       'Category',
                       BookingCategory?.[1],
                       BookingCategory?.[0]
                     )}
+                    categoryType={'vertical'}
                   />
                 )}
                 {OtherServicesglobal && (
@@ -612,7 +613,7 @@ const BSLayout4 = () => {
           />
         )}
       </>
-     </Suspense>
+    </Suspense>
   );
 };
 

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

@@ -38,7 +38,9 @@ const BSBillingTable7 = lazy(
     import('../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx')
 );
 import BSItemCard from '../../Components/BSItemCards/BSItemCard';
-import CategoryVertical from '../../Components/BSCategories/BSCategoryVertical';
+const CategoryHorizontal = lazy(
+  () => import('../../Components/BSCategories/BSCategoryHorizontal')
+);
 import { dynamicComponentProps } from '../DynamicComponentProps.js';
 import {
   GlobalPricingAppPricingName,
@@ -160,9 +162,9 @@ const BSLayout5 = () => {
       ? '580px'
       : '590px'
     : (UserType != 'Super Admin' &&
-          UserType != 'Super Admin User' &&
+      UserType != 'Super Admin User' &&
-          AppExpDate?.RemainingDays <= 7) ||
+      AppExpDate?.RemainingDays <= 7) ||
-        AppExpDate?.PlanType?.toLowerCase() === 'extend'
+      AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '96vh'
       : '99vh';
   const [ListOfInvoices, setListOfInvoices] = useState(false);
@@ -529,12 +531,13 @@ const BSLayout5 = () => {
                   }}
                 >
                   {!OtherServicesglobal && (
-                    <CategoryVertical
+                    <CategoryHorizontal
                       categoryFunction={dynamicComponentProps(
                         'Category',
                         BookingCategory?.[1],
                         BookingCategory?.[0]
                       )}
+                      categoryType={'vertical'}
                     />
                   )}
                   {OtherServicesglobal && (
@@ -603,7 +606,7 @@ const BSLayout5 = () => {
           />
         )}
       </>
-     </Suspense>
+    </Suspense>
   );
 };
 

src/Pages/Preference/PreferenceList.jsx

@@ -21,8 +21,9 @@ import { useAuth } from '../../AuthContext.jsx';
 import { ApplicationPreferences } from '../../Features/BrachLogin/BranchLogin.js';
 import './PreferenceList.scss';
 import { InputField } from '../../Components/Forms/InputField.jsx';
+import { changePreferenceData } from '../../Features/BookingScreen/BookingData/BookingData.js';
 
-const PreferenceList = () => {
+const PreferenceList = ({ setting = false }) => {
   const { SadminuserAccess, featureaddDetails } = useAuth();
   const dispatch = useDispatch();
   const formRef = useRef();
@@ -301,7 +302,12 @@ const PreferenceList = () => {
   };
 
   const fetchTableData = async () => {
-    await dispatch(gettableData({ CompId, BranchId, AppId })).unwrap();
+    const res = await dispatch(gettableData({ CompId, BranchId, AppId })).unwrap();
+    if (res?.data?.statusCode === 1 && res?.data?.data?.length > 0) {
+      await dispatch(changePreferenceData(res?.data?.data));
+    } else {
+      await dispatch(changePreferenceData([]));
+    }
     handleApplicationChange(AppId);
   };
 
@@ -477,8 +483,8 @@ const PreferenceList = () => {
       />
       <div className="userPageTable" style={{ overflow: 'hidden' }}>
         <FormHeader title="Preference" />
-        <div className="menu-and-preferences">
+        <div className={`menu-and-preferences ${setting ? 'preferences-menu' : ''}`}>
-          <div className="menu-section">
+          <div className={`menu-section ${setting ? 'modal-menu' : ''}`}>
             <div
               onClick={(e) => handleMenuClick(e, 'general')}
               style={{
@@ -586,25 +592,25 @@ const PreferenceList = () => {
               {(allSettingsMap['onlineindividualslots'] !== undefined ||
                 allSettingsMap['allow individual booking'] !== undefined ||
                 allSettingsMap['single booking only'] !== undefined) && (
-                <Form.Item
+                  <Form.Item
-                  name="BookingOptionsandmethod"
+                    name="BookingOptionsandmethod"
-                  label="Individual Selling Setup"
+                    label="Individual Selling Setup"
-                >
+                  >
-                  <Checkbox.Group>
+                    <Checkbox.Group>
-                    {allSettingsMap['allow individual booking'] !==
+                      {allSettingsMap['allow individual booking'] !==
-                      undefined && (
+                        undefined && (
-                      <Checkbox value="allow individual booking">
+                          <Checkbox value="allow individual booking">
-                        Allow online individual booking
+                            Allow online individual booking
-                      </Checkbox>
+                          </Checkbox>
-                    )}
+                        )}
-                    {allSettingsMap['single booking only'] !== undefined && (
+                      {allSettingsMap['single booking only'] !== undefined && (
-                      <Checkbox value="single booking only">
+                        <Checkbox value="single booking only">
-                        Allow single booking Only
+                          Allow single booking Only
-                      </Checkbox>
+                        </Checkbox>
-                    )}
+                      )}
-                  </Checkbox.Group>
+                    </Checkbox.Group>
-                </Form.Item>
+                  </Form.Item>
-              )}
+                )}
               {featureaddDetails?.find(
                 (item) =>
                   item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
@@ -734,23 +740,23 @@ const PreferenceList = () => {
               {(allSettingsMap['onbilltime'] !== undefined ||
                 allSettingsMap['1daybefore'] !== undefined ||
                 allSettingsMap['1hourbefore'] !== undefined) && (
-                <Form.Item
+                  <Form.Item
-                  name="notification"
+                    name="notification"
-                  label="Choose notification timing:"
+                    label="Choose notification timing:"
-                >
+                  >
-                  <Checkbox.Group>
+                    <Checkbox.Group>
-                    {allSettingsMap['onbilltime'] !== undefined && (
+                      {allSettingsMap['onbilltime'] !== undefined && (
-                      <Checkbox value="onbilltime">On Bill Time</Checkbox>
+                        <Checkbox value="onbilltime">On Bill Time</Checkbox>
-                    )}
+                      )}
-                    {allSettingsMap['1daybefore'] !== undefined && (
+                      {allSettingsMap['1daybefore'] !== undefined && (
-                      <Checkbox value="1daybefore">1 Day Before</Checkbox>
+                        <Checkbox value="1daybefore">1 Day Before</Checkbox>
-                    )}
+                      )}
-                    {allSettingsMap['1hourbefore'] !== undefined && (
+                      {allSettingsMap['1hourbefore'] !== undefined && (
-                      <Checkbox value="1hourbefore">1 Hour Before</Checkbox>
+                        <Checkbox value="1hourbefore">1 Hour Before</Checkbox>
-                    )}
+                      )}
-                  </Checkbox.Group>
+                    </Checkbox.Group>
-                </Form.Item>
+                  </Form.Item>
-              )}
+                )}
             </div>
 
             <div
@@ -777,37 +783,37 @@ const PreferenceList = () => {
 
               {(allSettingsMap['offer'] !== undefined ||
                 allSettingsMap['parking'] !== undefined) && (
-                <Form.Item
+                  <Form.Item
-                  name="enabledFeatures"
+                    name="enabledFeatures"
-                  label="Select the features you want to enable:"
+                    label="Select the features you want to enable:"
-                >
+                  >
-                  <Checkbox.Group>
+                    <Checkbox.Group>
-                    {allSettingsMap['parking'] !== undefined && (
+                      {allSettingsMap['parking'] !== undefined && (
-                      <Checkbox value="parking">Parking</Checkbox>
+                        <Checkbox value="parking">Parking</Checkbox>
-                    )}
+                      )}
-                    {allSettingsMap['offer'] !== undefined && (
+                      {allSettingsMap['offer'] !== undefined && (
-                      <Checkbox value="offer">Offer</Checkbox>
+                        <Checkbox value="offer">Offer</Checkbox>
-                    )}
+                      )}
-                  </Checkbox.Group>
+                    </Checkbox.Group>
-                </Form.Item>
+                  </Form.Item>
-              )}
+                )}
               {((allSettingsMap['dinein'] !== undefined && dinePreference) ||
                 allSettingsMap['estimation'] !== undefined) && (
-                <Form.Item
+                  <Form.Item
-                  name="enabledModules"
+                    name="enabledModules"
-                  label="Select the modules you want to enable:"
+                    label="Select the modules you want to enable:"
-                >
+                  >
-                  <Checkbox.Group>
+                    <Checkbox.Group>
-                    {allSettingsMap['dinein'] !== undefined &&
+                      {allSettingsMap['dinein'] !== undefined &&
-                      dinePreference && (
+                        dinePreference && (
-                        <Checkbox value="dinein">Dine-In</Checkbox>
+                          <Checkbox value="dinein">Dine-In</Checkbox>
+                        )}
+                      {allSettingsMap['estimation'] !== undefined && (
+                        <Checkbox value="estimation">Estimation</Checkbox>
                       )}
-                    {allSettingsMap['estimation'] !== undefined && (
+                    </Checkbox.Group>
-                      <Checkbox value="estimation">Estimation</Checkbox>
+                  </Form.Item>
-                    )}
+                )}
-                  </Checkbox.Group>
-                </Form.Item>
-              )}
 
               {renderCheckbox('stockselection', 'Enable stock selection?')}
               {renderCheckbox('weightasquantity', 'Use Weight as Quantity?')}
@@ -896,72 +902,72 @@ const PreferenceList = () => {
 
               {(allSettingsMap['overalllimit'] !== undefined ||
                 allSettingsMap['itemwiselimit'] !== undefined) && (
-                <>
+                  <>
-                  <Form.Item
+                    <Form.Item
-                    name="quantityrestriction"
+                      name="quantityrestriction"
-                    label="Do you want to restrict the quantity that can be sold in a single order?"
+                      label="Do you want to restrict the quantity that can be sold in a single order?"
-                    valuePropName="checked"
+                      valuePropName="checked"
-                  >
+                    >
-                    <Checkbox>Yes</Checkbox>
+                      <Checkbox>Yes</Checkbox>
-                  </Form.Item>
+                    </Form.Item>
 
-                  <Form.Item
+                    <Form.Item
-                    noStyle
+                      noStyle
-                    shouldUpdate={(prev, curr) =>
+                      shouldUpdate={(prev, curr) =>
-                      prev.quantityrestriction !== curr.quantityrestriction
+                        prev.quantityrestriction !== curr.quantityrestriction
-                    }
+                      }
-                  >
+                    >
-                    {({ getFieldValue }) =>
+                      {({ getFieldValue }) =>
-                      getFieldValue('quantityrestriction') && (
+                        getFieldValue('quantityrestriction') && (
-                        <>
+                          <>
-                          <Form.Item
+                            <Form.Item
-                            name="quantityrestrictiontype"
+                              name="quantityrestrictiontype"
-                            label="How would you like to apply the quantity restriction?"
+                              label="How would you like to apply the quantity restriction?"
-                          >
-                            <Radio.Group
-                              onChange={() =>
-                                formRef.current?.setFieldsValue({
-                                  maxquantity: undefined,
-                                })
-                              }
                             >
-                              {allSettingsMap['overalllimit'] !== undefined && (
+                              <Radio.Group
-                                <Radio value="overall">
+                                onChange={() =>
-                                  Overall Order Quantity
+                                  formRef.current?.setFieldsValue({
-                                </Radio>
+                                    maxquantity: undefined,
-                              )}
+                                  })
-                              {allSettingsMap['itemwiselimit'] !==
+                                }
-                                undefined && (
+                              >
-                                <Radio value="itemwise">
+                                {allSettingsMap['overalllimit'] !== undefined && (
-                                  Item-wise Quantity
+                                  <Radio value="overall">
-                                </Radio>
+                                    Overall Order Quantity
-                              )}
+                                  </Radio>
-                            </Radio.Group>
+                                )}
-                          </Form.Item>
+                                {allSettingsMap['itemwiselimit'] !==
+                                  undefined && (
+                                    <Radio value="itemwise">
+                                      Item-wise Quantity
+                                    </Radio>
+                                  )}
+                              </Radio.Group>
+                            </Form.Item>
 
-                          <Form.Item
+                            <Form.Item
-                            name="maxquantity"
+                              name="maxquantity"
-                            label="Maximum quantity allowed:"
+                              label="Maximum quantity allowed:"
-                            rules={[
+                              rules={[
-                              {
+                                {
-                                required: true,
+                                  required: true,
-                                message: 'Please enter maximum quantity',
+                                  message: 'Please enter maximum quantity',
-                              },
+                                },
-                              {
+                                {
-                                type: 'number',
+                                  type: 'number',
-                                min: 1,
+                                  min: 1,
-                                message: 'Quantity must be greater than 0',
+                                  message: 'Quantity must be greater than 0',
-                              },
+                                },
-                            ]}
+                              ]}
-                          >
+                            >
-                            <InputNumber min={1} style={{ width: '200px' }} />
+                              <InputNumber min={1} style={{ width: '200px' }} />
-                          </Form.Item>
+                            </Form.Item>
-                        </>
+                          </>
-                      )
+                        )
-                    }
+                      }
-                  </Form.Item>
+                    </Form.Item>
-                </>
+                  </>
-              )}
+                )}
             </div>
 
             <Divider />
@@ -984,46 +990,46 @@ const PreferenceList = () => {
               {['whatsapp', 'sms', 'email'].some(
                 (k) => allSettingsMap[k] !== undefined
               ) && (
-                <>
+                  <>
-                  <Form.Item
+                    <Form.Item
-                    name="billOption"
+                      name="billOption"
-                    label="Choose how to handle bills:"
+                      label="Choose how to handle bills:"
-                  >
+                    >
-                    <Radio.Group>
+                      <Radio.Group>
-                      <Radio value="print">Print Bill</Radio>
+                        <Radio value="print">Print Bill</Radio>
-                      <Radio value="pdf">Send PDF</Radio>
+                        <Radio value="pdf">Send PDF</Radio>
-                    </Radio.Group>
+                      </Radio.Group>
-                  </Form.Item>
+                    </Form.Item>
 
-                  <Form.Item
+                    <Form.Item
-                    noStyle
+                      noStyle
-                    shouldUpdate={(prev, curr) =>
+                      shouldUpdate={(prev, curr) =>
-                      prev.billOption !== curr.billOption
+                        prev.billOption !== curr.billOption
-                    }
+                      }
-                  >
+                    >
-                    {({ getFieldValue }) =>
+                      {({ getFieldValue }) =>
-                      getFieldValue('billOption') === 'pdf' && (
+                        getFieldValue('billOption') === 'pdf' && (
-                        <Form.Item
+                          <Form.Item
-                          name="pdfSendOptions"
+                            name="pdfSendOptions"
-                          label="Select how to send the PDF:"
+                            label="Select how to send the PDF:"
-                        >
+                          >
-                          <Checkbox.Group>
+                            <Checkbox.Group>
-                            {allSettingsMap['whatsapp'] !== undefined && (
+                              {allSettingsMap['whatsapp'] !== undefined && (
-                              <Checkbox value="whatsapp">WhatsApp</Checkbox>
+                                <Checkbox value="whatsapp">WhatsApp</Checkbox>
-                            )}
+                              )}
-                            {allSettingsMap['email'] !== undefined && (
+                              {allSettingsMap['email'] !== undefined && (
-                              <Checkbox value="email">Email</Checkbox>
+                                <Checkbox value="email">Email</Checkbox>
-                            )}
+                              )}
-                            {allSettingsMap['sms'] !== undefined && (
+                              {allSettingsMap['sms'] !== undefined && (
-                              <Checkbox value="sms">SMS</Checkbox>
+                                <Checkbox value="sms">SMS</Checkbox>
-                            )}
+                              )}
-                          </Checkbox.Group>
+                            </Checkbox.Group>
-                        </Form.Item>
+                          </Form.Item>
-                      )
+                        )
-                    }
+                      }
-                  </Form.Item>
+                    </Form.Item>
-                </>
+                  </>
-              )}
+                )}
 
               {renderCheckbox(
                 'tokenonly',
@@ -1053,25 +1059,25 @@ const PreferenceList = () => {
               {['printuom', 'printlogo', 'printgreetings'].some(
                 (k) => allSettingsMap[k] !== undefined
               ) && (
-                <Form.Item
+                  <Form.Item
-                  name="printOptions"
+                    name="printOptions"
-                  label="Select what you want to include in the print:"
+                    label="Select what you want to include in the print:"
-                >
+                  >
-                  <Checkbox.Group>
+                    <Checkbox.Group>
-                    {allSettingsMap['printuom'] !== undefined && (
+                      {allSettingsMap['printuom'] !== undefined && (
-                      <Checkbox value="printuom">
+                        <Checkbox value="printuom">
-                        Unit of Measure (UOM)
+                          Unit of Measure (UOM)
-                      </Checkbox>
+                        </Checkbox>
-                    )}
+                      )}
-                    {allSettingsMap['printlogo'] !== undefined && (
+                      {allSettingsMap['printlogo'] !== undefined && (
-                      <Checkbox value="printlogo">Branch Logo</Checkbox>
+                        <Checkbox value="printlogo">Branch Logo</Checkbox>
-                    )}
+                      )}
-                    {allSettingsMap['printgreetings'] !== undefined && (
+                      {allSettingsMap['printgreetings'] !== undefined && (
-                      <Checkbox value="printgreetings">Greetings</Checkbox>
+                        <Checkbox value="printgreetings">Greetings</Checkbox>
-                    )}
+                      )}
-                  </Checkbox.Group>
+                    </Checkbox.Group>
-                </Form.Item>
+                  </Form.Item>
-              )}
+                )}
 
               {renderCheckbox(
                 'mobilea4',
@@ -1079,24 +1085,24 @@ const PreferenceList = () => {
               )}
               {(allSettingsMap['estimateprintheader'] !== undefined ||
                 allSettingsMap['estimatetitle'] !== undefined) && (
-                <Form.Item
+                  <Form.Item
-                  name="estimateSettings"
+                    name="estimateSettings"
-                  label="Estimate Print Settings :"
+                    label="Estimate Print Settings :"
-                >
+                  >
-                  <Checkbox.Group>
+                    <Checkbox.Group>
-                    {allSettingsMap['estimateprintheader'] !== undefined && (
+                      {allSettingsMap['estimateprintheader'] !== undefined && (
-                      <Checkbox value="estimateprintheader">
+                        <Checkbox value="estimateprintheader">
-                        Show shop header (Name, Address, GST)
+                          Show shop header (Name, Address, GST)
-                      </Checkbox>
+                        </Checkbox>
-                    )}
+                      )}
-                    {allSettingsMap['estimatetitle'] !== undefined && (
+                      {allSettingsMap['estimatetitle'] !== undefined && (
-                      <Checkbox value="estimatetitle">
+                        <Checkbox value="estimatetitle">
-                        Show “Estimate (R/W)” title
+                          Show “Estimate (R/W)” title
-                      </Checkbox>
+                        </Checkbox>
-                    )}
+                      )}
-                  </Checkbox.Group>
+                    </Checkbox.Group>
-                </Form.Item>
+                  </Form.Item>
-              )}
+                )}
             </div>
             <div className="PreferencesBTN">
               <Buttons

src/Pages/Preference/PreferenceList.scss

@@ -18,7 +18,7 @@
     color: #1890ff; // Ant Design blue
   }
 
-  .ant-form-item-label > label {
+  .ant-form-item-label>label {
     font-weight: 500;
     color: #000000;
     font-size: 16px;
@@ -62,7 +62,7 @@
   .submitButton {
     position: unset;
 
-    > button {
+    >button {
       width: max-content;
       bottom: 30px;
     }
@@ -83,7 +83,7 @@
 .menu-section {
   padding: 10px 0;
 
-  > div {
+  >div {
     font-family: "Poppins";
     font-weight: 400;
     font-size: 14px;
@@ -99,17 +99,45 @@
     &:hover {
       background-color: #c0cbf8;
     }
+
     @media (max-width: 500px) {
       border: none !important;
       text-decoration: none !important;
       font-style: unset !important;
     }
   }
+
   @media (max-width: 500px) {
     overflow: auto;
   }
 }
 
+.modal-menu {
+  display: flex;
+  flex-direction: row;
+  gap: 2px;
+  white-space: nowrap;
+  width: 75vw;
+  overflow: hidden;
+  margin: 0;
+  text-decoration: underline;
+
+  >div {
+    font-size: 12px;
+    margin: 0;
+    background-color: unset;
+    border-radius: unset;
+
+    &:hover {
+      background-color: unset;
+    }
+  }
+}
+
+.preferences-menu {
+  flex-direction: column !important;
+}
+
 @media (max-width: 500px) {
   .menu-and-preferences {
     flex-direction: column;
@@ -126,7 +154,7 @@
       font-size: 1rem;
     }
 
-    .ant-form-item-label > label {
+    .ant-form-item-label>label {
       font-size: 14px;
     }
 
@@ -149,7 +177,7 @@
     margin: 0;
     text-decoration: underline;
 
-    > div {
+    >div {
       font-size: 12px;
       margin: 0;
       background-color: unset;

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

@@ -6,7 +6,9 @@
   display: flex;
   flex-direction: column;
   row-gap: 3rem;
+  background-color: #fff;
 }
+
 .BSLayout1Standard {
   overflow: hidden;
   position: relative;
@@ -16,10 +18,12 @@
   @media (max-width: 768px) {
     top: 2rem;
   }
+
   @media (max-width: 500px) {
     top: 2rem;
   }
 }
+
 .layout1-card-content {
   height: 100% !important;
 }
@@ -34,11 +38,11 @@ body {
   background-color: #f3f3f3;
 }
 
-.BSLayout1 {
+.BSLayout1Main {
   overflow: hidden;
   position: relative;
-  top: 2rem;
+  top: 34px;
-  height: 99vh;
+  height: 98vh;
 }
 
 .BSBillingTable-oCbtn {
@@ -49,11 +53,13 @@ body {
   top: 5rem;
 }
 
-.BSCategory1-Contentcont {
+.BSCategoryCardDiv {
   overflow: hidden;
   display: flex;
   flex-direction: column;
   padding: 0rem 0rem;
+  width: 100%;
+  height: 98%;
 }
 
 .BSCategory1-Cardcont {
@@ -62,18 +68,28 @@ body {
   height: 85vh;
 }
 
-.BSLayout1-ContentDiv {
+.BSLayout1Master {
   display: flex;
-  height: 95vh;
+  height: 98vh;
   width: 100%;
   justify-content: space-between;
   overflow: hidden;
+  gap: 6px;
+  padding: 3px 5px;
+
+  .BsTable2-Master {
+    height: 84vh !important;
+  }
+
+  .BSTable3_overall {
+    height: 84vh !important;
+  }
 }
 
 .BSCategory1-tablecont {
   width: 430px;
   height: clamp(100vh, 51rem, 45vh);
-  margin: 0.5rem 0.3rem 1rem 0.3rem;
+  margin: 0.1rem 0.1rem;
   background-color: #fff;
 }
 
@@ -95,7 +111,7 @@ body {
     column-gap: 0 !important;
   }
 
-  .BSLayout1 {
+  .BSLayout1Main {
     height: 88vh !important;
   }
 
@@ -216,7 +232,7 @@ body {
   align-items: center;
 }
 
-.custom-search .ant-input-affix-wrapper > input.ant-input {
+.custom-search .ant-input-affix-wrapper>input.ant-input {
   padding: 0;
 }
 
@@ -230,22 +246,27 @@ body {
   white-space: nowrap;
   margin-left: 8rem;
   font-weight: 400;
+
   @media (max-width: 500px) {
     font-size: 10px !important;
   }
 }
 
 @keyframes shake {
+
   0%,
   100% {
     transform: rotate(0deg);
   }
+
   25% {
     transform: rotate(-15deg);
   }
+
   50% {
     transform: rotate(15deg);
   }
+
   75% {
     transform: rotate(-10deg);
   }
@@ -271,13 +292,15 @@ body {
   font-weight: 500;
   cursor: pointer;
 }
+
 .BookingCloseButton {
-  background: red;
+  background: #f70000;
   color: white;
   border: none;
   padding: 2px;
   border-radius: 5px;
 }
+
 .BookingOpenButton {
   background: #52c41a;
   color: white;
@@ -285,6 +308,7 @@ body {
   padding: 2px;
   border-radius: 5px;
 }
+
 .BookingCloseModal {
   .ant-modal .ant-modal-content {
     padding: 10px 10px !important;