Merge pull request 'temp/preference-category-change' (#278) from temp/preference-category-change into main

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

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

@@ -213,6 +213,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

@@ -180,6 +180,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);
@@ -687,43 +688,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 && (
@@ -793,16 +794,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
@@ -1125,7 +1126,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/BSSubCategories/BSSubCategoryHorizontal.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import '../../../../Styles/BookingScreen/Components/BSSubCategories/BSSubCategoryHorizontal.scss';
 import {
@@ -6,6 +6,7 @@ import {
   SelectedGlobalSubCatgFont,
   StoredSessionData,
 } from '../../../../Features/ThemeChange/ThemeChange';
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import {
   GlobalProductCategorie,
   getLayoutSubCategories,
@@ -20,8 +21,12 @@ import {
 } from '../../../../Features/BookingScreen/BookingData/BookingData';
 import WebFont from 'webfontloader';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import { isMobile } from 'react-device-detect';
+import TooltipWrapper from '../../../../Components/Tooltip/Tooltip';
 
 function BSSubCategoryHorizontal(props) {
+  const { subCategoryType = null } = props;
+  const isVertical = subCategoryType === 'vertical';
   const dispatch = useDispatch();
   const prevRef = useRef();
   const SelectedSubCatgColor = useSelector(SelectedGlobalSubCatgColorDetail);
@@ -40,6 +45,7 @@ function BSSubCategoryHorizontal(props) {
   const scrollContainerRef = useRef(null);
   const [isDragging, setIsDragging] = useState(false);
   const [startX, setStartX] = useState(null);
+  const [startY, setStartY] = useState(null);
 
   const AppId = SessionData?.AppId;
   const CompId = SessionData?.CompId;
@@ -52,14 +58,18 @@ function BSSubCategoryHorizontal(props) {
   const Reverse1 = categoryFunction?.ImageRight && 'row-reverse';
   const padding = categoryFunction?.BigCard && '12px';
   const Uppercase = categoryFunction?.TextCapitalize && 'uppercase';
-  const [width, setWidth] = useState(window.innerWidth);
 
-  console.log(AppId, CompId, 'CompIdCompIdCompId');
+  const [width, setWidth] = useState(window.innerWidth);
+  const [height, setHeight] = useState(window.innerHeight);
+
+  console.log(categoryData, 'categoryData');
 
   const containerRef = useRef(null);
 
   const [showLeftButton, setShowLeftButton] = useState(false);
   const [showRightButton, setShowRightButton] = useState(true);
+  const [showUpButton, setShowUpButton] = useState(false);
+  const [showDownButton, setShowDownButton] = useState(false);
 
   useEffect(() => {
     const container = containerRef.current;
@@ -73,46 +83,40 @@ function BSSubCategoryHorizontal(props) {
   }, []);
 
   useEffect(() => {
-    function handleResize() {
+    const handleResize = () => {
       setWidth(window.innerWidth);
-    }
+      setHeight(window.innerHeight);
-    window.addEventListener('resize', handleResize);
+    };
-    return () => window.removeEventListener('resize', handleResize);
-  }, [width]);
 
-  useEffect(() => {
-    function handleResize() {
-      setWidth(window.innerWidth);
-    }
     window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
+    handleResize(); // initial value
-  }, [categoryData]);
 
-  useEffect(() => {
-    function handleResize() {
-      setWidth(window.innerWidth);
-    }
-    window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
-  }, [width, categoryData]);
+  }, []);
 
   useEffect(() => {
     const container = scrollContainerRef?.current;
+    if (!container) return;
 
-    if (scrollContainerRef?.current?.scrollLeft == 0) {
+    const updateButtons = () => {
-      setShowLeftButton(false);
+      if (isVertical) {
-    } else {
+        setShowUpButton(container.scrollTop > 0);
-      setShowLeftButton(true);
+        setShowDownButton(
-    }
+          container.scrollTop + container.clientHeight < container.scrollHeight
-    if (
+        );
-      container?.scrollLeft + container?.clientWidth ===
+      } else {
-      container?.scrollWidth
+        setShowLeftButton(container.scrollLeft > 0);
-    ) {
+        setShowRightButton(
-      setShowRightButton(false);
+          container.scrollLeft + container.clientWidth < container.scrollWidth
-    } else {
+        );
-      setShowRightButton(true);
+      }
-    }
+    };
-  }, [scrollContainerRef?.current?.scrollLeft, width]);
+
+    container.addEventListener('scroll', updateButtons);
+    updateButtons(); // initial check
+
+    return () => container.removeEventListener('scroll', updateButtons);
+  }, [subCategoryType]);
 
   useEffect(() => {
     // Accessing the DOM elements
@@ -180,6 +184,20 @@ function BSSubCategoryHorizontal(props) {
     }
   };
 
+  const scrollUp = () => {
+    const container = scrollContainerRef.current;
+    if (container.scrollTop > 0) {
+      container.scrollTop -= 100;
+    }
+  };
+
+  const scrollDown = () => {
+    const container = scrollContainerRef.current;
+    if (container.scrollTop + container.clientHeight < container.scrollHeight) {
+      container.scrollTop += 100;
+    }
+  };
+
   const easeLinear = (t) => {
     return t;
   };
@@ -258,27 +276,6 @@ function BSSubCategoryHorizontal(props) {
       ).unwrap();
   }, [ProdCat]);
 
-  const handleMouseDown = (e) => {
-    e.preventDefault();
-    setIsDragging(true);
-    setStartX(e.clientX);
-  };
-
-  const handleMouseMove = (e) => {
-    if (!isDragging) return;
-
-    const scrollContainer = scrollContainerRef.current;
-    if (!scrollContainer) return;
-
-    const deltaX = e.clientX - startX;
-    scrollContainer.scrollLeft -= deltaX;
-    setStartX(e.clientX);
-  };
-
-  const handleMouseUp = () => {
-    setIsDragging(false);
-  };
-
   const handleClick = async (e, ProdSubCat, index) => {
     let data = {
       compId: CompId,
@@ -310,22 +307,73 @@ function BSSubCategoryHorizontal(props) {
   // useEffect(() => {
   //   setIndexVal(1);
   // }, [ProdCat]);
+
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+
+    if (isVertical) {
+      setStartY(e.clientY);
+    } else {
+      setStartX(e.clientX);
+    }
+  };
+
   const handleTouchStart = (e) => {
     setIsDragging(true);
-    setStartX(e.touches[0].clientX);
+
+    if (isVertical) {
+      setStartY(e.touches[0].clientY);
+    } else {
+      setStartX(e.touches[0].clientX);
+    }
   };
+
+  const handleMouseMove = (e) => {
+    if (!isDragging) return;
+
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    if (isVertical) {
+      const deltaY = startY - e.clientY;
+      container.scrollTop += deltaY;
+      setStartY(e.clientY);
+    } else {
+      const deltaX = e.clientX - startX;
+      container.scrollLeft -= deltaX;
+      setStartX(e.clientX);
+    }
+  };
+
   const handleTouchMove = (e) => {
     if (!isDragging) return;
 
-    const scrollContainer = scrollContainerRef.current;
+    const container = scrollContainerRef.current;
-    if (!scrollContainer) return;
+    if (!container) return;
 
-    const deltaX = e.touches[0].clientX - startX;
+    if (isVertical) {
-    scrollContainer.scrollLeft -= deltaX;
+      const deltaY = startY - e.touches[0].clientY;
-    setStartX(e.touches[0].clientX);
+      container.scrollTop += deltaY;
+      setStartY(e.touches[0].clientY);
+    } else {
+      const deltaX = e.touches[0].clientX - startX;
+      container.scrollLeft -= deltaX;
+      setStartX(e.touches[0].clientX);
+    }
+
+    e.preventDefault();
   };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
   const handleTouchEnd = () => {
     setIsDragging(false);
+    if (isVertical) {
+      document.body.style.overscrollBehaviorY = 'auto';
+    }
   };
 
   useEffect(() => {
@@ -375,24 +423,6 @@ function BSSubCategoryHorizontal(props) {
   const maindiv = document.getElementById('mainDiv');
   const count = maindiv?.querySelectorAll('div');
 
-  useEffect(() => {
-    const container = scrollContainerRef?.current;
-
-    if (scrollContainerRef?.current?.scrollLeft == 0) {
-      setShowLeftButton(false);
-    } else {
-      setShowLeftButton(true);
-    }
-    if (
-      container?.scrollLeft + container?.clientWidth ===
-      container?.scrollWidth
-    ) {
-      setShowRightButton(false);
-    } else {
-      setShowRightButton(true);
-    }
-  }, [count]);
-
   const lightenColor = (color, percent) => {
     let r = parseInt(color.substring(1, 3), 16);
     let g = parseInt(color.substring(3, 5), 16);
@@ -426,45 +456,80 @@ function BSSubCategoryHorizontal(props) {
     return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
   }
 
-  const handleSubCatDragEnd = async (result) => {
+  const handleSubCategoryDragEnd = async (result) => {
     if (!result.destination) return;
-    let index = result?.destination?.index + 1;
+
+    const index = result.destination.index + 1;
     setIndexVal(index);
+
     const items = Array.from(categoryData);
-    const items2 = Array.from(categoryData);
+    const itemsCopy = Array.from(categoryData);
-    let selectData = items2?.splice(result.source.index, 1)?.[0];
+
+    const selectedData = itemsCopy.splice(result.source.index, 1)[0];
+
     const [movedItem] = items.splice(result.source.index, 1);
     items.splice(result.destination.index, 0, movedItem);
+
     await dispatch(ChangeSubcategoryData(items));
-    handleClick('e', selectData.ProdSubCat, index);
+
+    handleClick('e', selectedData.ProdSubCat, index);
   };
 
   return (
-    <>
+    <div
+      className={
+        isVertical ? 'SubCategoryVertical' : 'SubCategoryHorizontal bs1'
+      }
+      ref={!isVertical ? containerRef : null}
+      style={
+        !isVertical
+          ? {
+              overflowX: 'auto',
+              width: '100%',
+              whiteSpace: 'nowrap',
+              margin: '0',
+            }
+          : {}
+      }
+    >
       {!globalAccessForOthers && !CardAccess && (
-        <div
+        <>
-          className="SubCategoryHorizontal bs1"
+          {!isVertical ? (
-          ref={containerRef}
+            <div style={{ width: '50px' }}>
-          style={{ overflowX: 'auto', width: '100%', whiteSpace: 'nowrap' }}
+              {showLeftButton && (
-        >
+                <div
-          {/* {isRightDisabled &&  <button className="SubCategoryHorizontal-icon" onClick={scrollLeft}>
+                  className="CategoryHorizontal-icon"
-          <LeftOutlined />
+                  onClick={() => handleScrollClickLeft(-50, 0)}
-        </button>} */}
+                >
-
+                  ◄
-          <div style={{ width: '50px' }}>
+                </div>
-            {showLeftButton && (
+              )}
-              <div
+            </div>
-                className="CategoryHorizontal-icon"
+          ) : (
-                onClick={() => handleScrollClickLeft(-50, 0)}
+            <div className="SubCategoryVertical-buttons">
-              >
+              {showUpButton && (
-                ◄
+                <button className="SubCategoryVertical-icon" onClick={scrollUp}>
-              </div>
+                  <UpOutlined />
-            )}
+                </button>
-          </div>
+              )}
+              {showDownButton && (
+                <button
+                  className="SubCategoryVertical-icon"
+                  onClick={scrollDown}
+                >
+                  <DownOutlined />
+                </button>
+              )}
+            </div>
+          )}
 
           <div
             id="mainDiv"
-            className="SubCategoryHorizontal-scroll-container"
+            className={
+              isVertical
+                ? 'SubCategoryVertical-scroll-container'
+                : 'SubCategoryHorizontal-scroll-container'
+            }
             ref={scrollContainerRef}
             onMouseDown={handleMouseDown}
             onTouchStart={handleTouchStart}
@@ -476,12 +541,13 @@ function BSSubCategoryHorizontal(props) {
             style={{
               cursor: isDragging ? 'grabbing' : 'grab',
               touchAction: isDragging ? 'none' : 'auto',
-              whiteSpace: 'nowrap',
+              whiteSpace: isVertical ? 'normal' : 'nowrap',
             }}
           >
             {draggingComponent !== 'sub-category' &&
               categoryData?.map((eachData, index) => (
                 <div
+                  key={index}
                   style={{
                     borderRadius: Radius,
                     backgroundColor:
@@ -491,8 +557,6 @@ function BSSubCategoryHorizontal(props) {
                             SelectedSubCatgColor['BackgroundColor'],
                             0.4
                           ),
-                    // backgroundColor:
-                    //   index + 1 != indexval ? SelectedSubCatgColor["BackgroundColor"] : "white",
                     padding: padding,
                     border: '1px solid',
                     borderColor:
@@ -509,43 +573,65 @@ function BSSubCategoryHorizontal(props) {
                                 70
                               ),
                   }}
-                  key={index}
+                  className={
-                  className="sampleCardhorizontalsubcat"
+                    isVertical
+                      ? 'SubCategoryVertical-sampleCard'
+                      : 'sampleCardhorizontalsubcat'
+                  }
                   onClick={(e) =>
                     handleClick(e, eachData.ProdSubCat, index + 1)
                   }
                 >
-                  <div
+                  {
-                    style={{ flexDirection: Reverse1 }}
+                    <TooltipWrapper
-                    className="SubCategoryHorizontal-sub-samplecard"
+                      title={eachData.ProdSubCatName}
-                  >
+                      placement="rightTop"
-                    <p
+                      isMobile={isMobile}
-                      style={{
-                        textTransform: Uppercase,
-                        fontFamily: SelectedFontFamily
-                          ? SelectedFontFamily
-                          : '',
-                        color: SelectedSubCatgColor
-                          ? SelectedSubCatgColor['FontColor']
-                          : '',
-                      }}
-                      className="SubCategoryHorizontal-text"
                     >
-                      {eachData.ProdSubCatName
+                      <div
-                        ? eachData.ProdSubCatName
+                        style={{ flexDirection: Reverse1 }}
-                        : 'General'}
+                        className={
-                    </p>
+                          isVertical
-                  </div>
+                            ? 'SubCategoryVertical-sub-samplecard'
+                            : 'SubCategoryHorizontal-sub-samplecard'
+                        }
+                      >
+                        <p
+                          style={{
+                            textTransform: Uppercase,
+                            fontFamily: SelectedFontFamily
+                              ? SelectedFontFamily
+                              : '',
+                            color: SelectedSubCatgColor
+                              ? SelectedSubCatgColor['FontColor']
+                              : '',
+                          }}
+                          className={
+                            isVertical
+                              ? 'SubCategoryVertical-text'
+                              : 'SubCategoryHorizontal-text'
+                          }
+                        >
+                          {eachData.ProdSubCatName || 'General'}
+                        </p>
+                      </div>
+                    </TooltipWrapper>
+                  }
                 </div>
               ))}
             {draggingComponent == 'sub-category' && (
-              <DragDropContext onDragEnd={handleSubCatDragEnd}>
+              <DragDropContext onDragEnd={handleSubCategoryDragEnd}>
-                <Droppable droppableId="subCategories" direction="horizontal">
+                <Droppable
+                  droppableId={
+                    isVertical ? 'sub-category-droppable' : 'subCategories'
+                  }
+                  direction={isVertical ? 'vertical' : 'horizontal'}
+                >
                   {(provided) => (
                     <div
                       ref={provided.innerRef}
                       {...provided.droppableProps}
-                      style={{ display: 'flex', gap: '8px' }} // or your preferred spacing
+                      style={isVertical ? {} : { display: 'flex', gap: '8px' }}
                     >
                       {categoryData?.map((eachData, index) => (
                         <Draggable
@@ -561,6 +647,7 @@ function BSSubCategoryHorizontal(props) {
                               style={{
                                 ...provided.draggableProps.style,
                                 borderRadius: Radius,
+                                marginBottom: isVertical ? 8 : 0,
                                 backgroundColor:
                                   index + 1 !== indexval
                                     ? SelectedSubCatgColor['BackgroundColor']
@@ -588,32 +675,48 @@ function BSSubCategoryHorizontal(props) {
                                             70
                                           ),
                               }}
-                              className="sampleCardhorizontalsubcat"
+                              className={
+                                isVertical
+                                  ? 'SubCategoryVertical-sampleCard'
+                                  : 'sampleCardhorizontalsubcat'
+                              }
                               onClick={(e) =>
                                 handleClick(e, eachData.ProdSubCat, index + 1)
                               }
                             >
-                              <div
+                              <TooltipWrapper
-                                style={{ flexDirection: Reverse1 }}
+                                title={eachData.ProdSubCatName}
-                                className="SubCategoryHorizontal-sub-samplecard"
+                                placement="rightTop"
+                                isMobile={isMobile}
                               >
-                                <p
+                                <div
-                                  style={{
+                                  style={{ flexDirection: Reverse1 }}
-                                    textTransform: Uppercase,
+                                  className={
-                                    fontFamily: SelectedFontFamily
+                                    isVertical
-                                      ? SelectedFontFamily
+                                      ? 'SubCategoryVertical-sub-samplecard'
-                                      : '',
+                                      : 'SubCategoryHorizontal-sub-samplecard'
-                                    color: SelectedSubCatgColor
+                                  }
-                                      ? SelectedSubCatgColor['FontColor']
-                                      : '',
-                                  }}
-                                  className="SubCategoryHorizontal-text"
                                 >
-                                  {eachData.ProdSubCatName
+                                  <p
-                                    ? eachData.ProdSubCatName
+                                    style={{
-                                    : 'General'}
+                                      textTransform: Uppercase,
-                                </p>
+                                      fontFamily: SelectedFontFamily
-                              </div>
+                                        ? SelectedFontFamily
+                                        : '',
+                                      color: SelectedSubCatgColor
+                                        ? SelectedSubCatgColor['FontColor']
+                                        : '',
+                                    }}
+                                    className={
+                                      isVertical
+                                        ? 'SubCategoryVertical-text'
+                                        : 'SubCategoryHorizontal-text'
+                                    }
+                                  >
+                                    {eachData.ProdSubCatName || 'General'}
+                                  </p>
+                                </div>
+                              </TooltipWrapper>
                             </div>
                           )}
                         </Draggable>
@@ -625,21 +728,24 @@ function BSSubCategoryHorizontal(props) {
               </DragDropContext>
             )}
           </div>
-          <div
+
-            style={{ width: '50px', display: 'flex', justifyContent: 'end' }}
+          {!isVertical && (
-          >
+            <div
-            {showRightButton && (
+              style={{ width: '50px', display: 'flex', justifyContent: 'end' }}
-              <div
+            >
-                className="CategoryHorizontal-icon"
+              {showRightButton && (
-                onClick={() => handleScrollClickRight(50, 0)}
+                <div
-              >
+                  className="CategoryHorizontal-icon"
-                ►
+                  onClick={() => handleScrollClickRight(50, 0)}
-              </div>
+                >
-            )}
+                  ►
-          </div>
+                </div>
-        </div>
+              )}
+            </div>
+          )}
+        </>
       )}
-    </>
+    </div>
   );
 }
 

src/Pages/BookingScreen/Components/BSSubCategories/BSSubCategoryVertical.jsx

@@ -102,26 +102,6 @@ function BSSubCategoryVertical(props) {
     };
   }, []);
 
-  useEffect(
-    () => {
-      function handleResize() {
-        setHeight(window.innerHeight);
-      }
-      window.addEventListener('resize', handleResize);
-      return () => window.removeEventListener('resize', handleResize);
-    },
-    [height],
-    categoryData
-  );
-
-  useEffect(() => {
-    function handleResize() {
-      setHeight(window.innerHeight);
-    }
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, [categoryData]);
-
   useEffect(() => {
     if (SelectedFontFamily) {
       WebFont.load({
@@ -279,7 +259,7 @@ function BSSubCategoryVertical(props) {
 
   useEffect(() => {
     function handleResize() {
-      setHeight(window.innerheight);
+      setHeight(window.innerHeight);
     }
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);

src/Pages/BookingScreen/Components/BSSubCategories/StandardSubcategory.jsx

@@ -1,135 +1,136 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from 'react';
-import { useSelector } from "react-redux";
+import { useSelector } from 'react-redux';
-import { changeProductSubCategorie, getCardDataWithoutSub, getLayoutproductCard, getLayoutSubCategories, GlobalProductCategorie, GlobalSubcategorieData } from "../../../../Features/BookingScreen/BookingData/BookingData";
+import {
-import { FaAngleUp } from "react-icons/fa";
+  changeProductSubCategorie,
-import { useDispatch } from "react-redux";
+  getCardDataWithoutSub,
-import { StoredSessionData } from "../../../../Features/ThemeChange/ThemeChange";
+  getLayoutproductCard,
-import { ApplicationPreferences } from "../../../../Features/BrachLogin/BranchLogin";
+  getLayoutSubCategories,
-import { useDateStore } from "../../../../Features/BookingScreen/BookingData/DateStore";
+  GlobalProductCategorie,
+  GlobalSubcategorieData,
+} from '../../../../Features/BookingScreen/BookingData/BookingData';
+import { FaAngleUp } from 'react-icons/fa';
+import { useDispatch } from 'react-redux';
+import { StoredSessionData } from '../../../../Features/ThemeChange/ThemeChange';
+import { ApplicationPreferences } from '../../../../Features/BrachLogin/BranchLogin';
+import { useDateStore } from '../../../../Features/BookingScreen/BookingData/DateStore';
 
 const StandardSubcategory = ({ handleSubCatClose, isClosing }) => {
-    const dispatch = useDispatch();
+  const dispatch = useDispatch();
-    const ProdCat = useSelector(GlobalProductCategorie);
+  const ProdCat = useSelector(GlobalProductCategorie);
-    const SubcategorieData = useSelector(GlobalSubcategorieData);
+  const SubcategorieData = useSelector(GlobalSubcategorieData);
-    const SessionData = useSelector(StoredSessionData);
+  const SessionData = useSelector(StoredSessionData);
-    const formRef = useRef(null);
+  const formRef = useRef(null);
-    const [selectedSubCat, setSelectedSubCat] = useState(SubcategorieData);
+  const [selectedSubCat, setSelectedSubCat] = useState(SubcategorieData);
-    const AppId = SessionData?.AppId;
+  const AppId = SessionData?.AppId;
-    const CompId = SessionData?.CompId;
+  const CompId = SessionData?.CompId;
-    const BranchId = SessionData?.BranchId;
+  const BranchId = SessionData?.BranchId;
-    const UserId = SessionData?.UserId;
+  const UserId = SessionData?.UserId;
-     const ApplicationPreferenceData = useSelector(ApplicationPreferences);
+  const ApplicationPreferenceData = useSelector(ApplicationPreferences);
-      const { selectedDate } = useDateStore();
+  const { selectedDate } = useDateStore();
-      const salespagefields = ApplicationPreferenceData
+  const salespagefields = ApplicationPreferenceData?.find(
-        ?.find(pref => pref?.PreferredCatName === "Sales Page Fields")
+    (pref) => pref?.PreferredCatName === 'Sales Page Fields'
-        ?.PreferenceCatDetails
+  )?.PreferenceCatDetails;
-      const AvailableDate = salespagefields
+  const AvailableDate = salespagefields?.find(
-        ?.find(type => type?.PreferredSubCatName?.toLowerCase() === "available date" && type?.PreferredStatus === "Y");
+    (type) =>
-    useEffect(() => {
+      type?.PreferredSubCatName?.toLowerCase() === 'available date' &&
-        // ProdCat &&
+      type?.PreferredStatus === 'Y'
-        //   dispatch(
+  );
-        //     getLayoutSubCategories({
+  useEffect(() => {
-        //       CompId: CompId,
+    // ProdCat &&
-        //       BranchId: BranchId,
+    //   dispatch(
-        //       AppId: AppId,
+    //     getLayoutSubCategories({
-        //       ProdCat: ProdCat,
+    //       CompId: CompId,
-        //          ...(AvailableDate && selectedDate 
+    //       BranchId: BranchId,
-        //   ? {
+    //       AppId: AppId,
-        //       fromDate: selectedDate?.[0],
+    //       ProdCat: ProdCat,
-        //       toDate:selectedDate?.[1],
+    //          ...(AvailableDate && selectedDate
-        //     }
+    //   ? {
-        //   : {}),
+    //       fromDate: selectedDate?.[0],
-        //     })
+    //       toDate:selectedDate?.[1],
-        //   ).unwrap();
+    //     }
-        setSelectedSubCat(0)
+    //   : {}),
+    //     })
+    //   ).unwrap();
+    setSelectedSubCat(0);
+  }, [ProdCat]);
 
-      }, [ProdCat]);
+  const handleSubCatClick = async (e, ProdSubCat, index) => {
-    
+    await dispatch(changeProductSubCategorie(ProdSubCat));
-      const handleSubCatClick = async (e, ProdSubCat, index) => {
+    const data = {
-        await dispatch(changeProductSubCategorie(ProdSubCat));
+      compId: CompId,
-        const data = {
+      branchId: BranchId,
-          compId: CompId,
+      appId: AppId,
-          branchId: BranchId,
+      prodCat: ProdCat,
-          appId: AppId,
+      ...(AvailableDate && selectedDate
-          prodCat: ProdCat,
+        ? {
-             ...(AvailableDate && selectedDate 
+            fromDate: selectedDate?.[0],
-          ? {
+            toDate: selectedDate?.[1],
-              fromDate: selectedDate?.[0],
+          }
-              toDate:selectedDate?.[1],
+        : {}),
-            }
+    };
-          : {}),
-        };
-    
-        const data1 = {
-          CompId: CompId,
-          BranchId: BranchId,
-          ProdSubCat: ProdSubCat,
-          AppId: AppId,
-            ...(AvailableDate && selectedDate 
-          ? {
-              fromDate: selectedDate?.[0],
-              toDate:selectedDate?.[1],
-            }
-          : {}),
-        };
-    
-        setSelectedSubCat(index);
-        if (ProdSubCat == null) {
-        
-          console.log(selectedDate,"selectedDate")
-          await dispatch(getCardDataWithoutSub(data)).unwrap();
-        } else {
-         
-          //  console.log((AvailableDate && selectedDate ? { date: selectedDate.format('YYYY-MM-DD') } : {}),selectedDate,"subcatedate")
-          // Call API with subcategory - fetch items for this subcategory
-          await dispatch(getLayoutproductCard(data1));
-          // await dispatch(changeProductSubCategorie(ProdSubCat)).unwrap();
-    
-        }
-    
-        // Remove previous border styling
-        if (formRef.current && formRef.current !== e.currentTarget) {
-          formRef.current.classList.remove('SubCategoryVertical-sampleCard-border');
-        }
-    
-        // Add border to clicked element
-        e.currentTarget?.classList?.add('SubCategoryVertical-sampleCard-border');
-        formRef.current = e.currentTarget;
-      };
-    
-    
 
-    return (
+    const data1 = {
+      CompId: CompId,
+      BranchId: BranchId,
+      ProdSubCat: ProdSubCat,
+      AppId: AppId,
+      ...(AvailableDate && selectedDate
+        ? {
+            fromDate: selectedDate?.[0],
+            toDate: selectedDate?.[1],
+          }
+        : {}),
+    };
 
-        <div className={`subCategoryNewDiv-Main ${isClosing ? 'closing' : ''}`}>
+    setSelectedSubCat(index);
-                                <button className='closeSubCatBTN' onClick={handleSubCatClose}>
+    if (ProdSubCat == null) {
-                                    <FaAngleUp />
+      console.log(selectedDate, 'selectedDate');
-                                </button>
+      await dispatch(getCardDataWithoutSub(data)).unwrap();
-                                <div className="subCategoryNewDiv">
+    } else {
-                                    {
+      //  console.log((AvailableDate && selectedDate ? { date: selectedDate.format('YYYY-MM-DD') } : {}),selectedDate,"subcatedate")
-                                    SubcategorieData?.map((item, index) => {
+      // Call API with subcategory - fetch items for this subcategory
-                                        const key = item?.ProdSubCat ?? `general-${index}`;
+      await dispatch(getLayoutproductCard(data1));
-                                        const isActive = selectedSubCat === index;
+      // await dispatch(changeProductSubCategorie(ProdSubCat)).unwrap();
-                
+    }
-                                        // Check if the name is null, undefined, or empty string
+
-                                        const displayName =
+    // Remove previous border styling
-                                        item?.ProdSubCatName && item.ProdSubCatName.trim() !== ""
+    if (formRef.current && formRef.current !== e.currentTarget) {
-                                            ? item.ProdSubCatName
+      formRef.current.classList.remove('SubCategoryVertical-sampleCard-border');
-                                            : "General";
+    }
-                
+
-                                        return (
+    // Add border to clicked element
-                                        <div
+    e.currentTarget?.classList?.add('SubCategoryVertical-sampleCard-border');
-                                            key={key}
+    formRef.current = e.currentTarget;
-                                            className={`subcatNewLayout ${isActive ? "active" : ""}`}
+  };
-                                            onClick={(e) => handleSubCatClick(e, item?.ProdSubCat, index)}
+
-                                        >
+  return (
-                                            {displayName}
+    <div className={`subCategoryNewDiv-Main ${isClosing ? 'closing' : ''}`}>
-                                        </div>
+      <button className="closeSubCatBTN" onClick={handleSubCatClose}>
-                                        );
+        <FaAngleUp />
-                                    })}
+      </button>
-                
+      <div className="subCategoryNewDiv">
-                                </div>
+        {SubcategorieData?.map((item, index) => {
-                                </div>
+          const key = item?.ProdSubCat ?? `general-${index}`;
-        )
+          const isActive = selectedSubCat === index;
-        }
+
-        export default StandardSubcategory;
+          // Check if the name is null, undefined, or empty string
+          const displayName =
+            item?.ProdSubCatName && item.ProdSubCatName.trim() !== ''
+              ? item.ProdSubCatName
+              : 'General';
+
+          return (
+            <div
+              key={key}
+              className={`subcatNewLayout ${isActive ? 'active' : ''}`}
+              onClick={(e) => handleSubCatClick(e, item?.ProdSubCat, index)}
+            >
+              {displayName}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+export default StandardSubcategory;

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

@@ -237,10 +237,12 @@ const SelectionComponent = forwardRef((props, ref) => {
   const [BillingTableData, setBillingTableData] = useState([]);
 
   //  selected Dropdown ids
+  const [manualChange, setManualChange] = useState(null);
   const [currentLayoutsessionID, setCurrentLayoutsessionID] = useState(null);
   const [SelectedLayoutId, setSelectedLayoutId] = useState(null);
   const [SelectedNavbarId, setSelectedNavbarId] = useState(null);
   const [SelectedCategoryId, setSelectedCategoryId] = useState(null);
+  const [selectedCategoryName, setSelectedCategoryName] = useState(null);
   const [SelectedSubCategoryId, setSelectedSubCategoryId] = useState(null);
   const [SelectedCardId, setSelectedCardId] = useState(null);
   const [SelectedBillingTableId, setSelectedBillingTableId] = useState(null);
@@ -439,6 +441,12 @@ const SelectionComponent = forwardRef((props, ref) => {
     }
   }, [UserType]);
 
+  useEffect(() => {
+    if (selectedCategoryName === 'Category5') {
+      setSelectedSubCategoryId(null);
+    }
+  }, [selectedCategoryName]);
+
   useEffect(() => {
     let hasAccess = false;
 
@@ -707,7 +715,11 @@ const SelectionComponent = forwardRef((props, ref) => {
       }
 
       dispatch(getCatFonts(CategoryData[0]?.SessionId)).unwrap;
-      selectCategory(editCategoryrVal?.[0]?.['ComponentId']);
+      selectCategory(
+        manualChange
+          ? CategoryData?.[0]?.['ComponentId']
+          : editCategoryrVal?.[0]?.['ComponentId']
+      );
       let optionIds = templateData?.['BookingCategory']?.[1]?.map(
         (item) => item?.OptionId
       );
@@ -1104,12 +1116,13 @@ const SelectionComponent = forwardRef((props, ref) => {
       );
     }
   };
-  const GetCategoryFun = async () => {
+  const GetCategoryFun = async (manualChange) => {
     const gettingCategoryData = await dispatch(getCategory()).unwrap();
     if (gettingCategoryData?.data?.statusCode === 1) {
       dispatch(getCatFonts(gettingCategoryData?.data?.data?.[0]?.SessionId))
         .unwrap;
       setCategoryData(gettingCategoryData?.data?.data);
+      setManualChange(manualChange);
     }
   };
   const GetSubCategoryFun = async () => {
@@ -1193,7 +1206,7 @@ const SelectionComponent = forwardRef((props, ref) => {
   };
 
   // Selected value functions
-  const selectLayout = (e) => {
+  const selectLayout = async (e, manualChange = false) => {
     formRef.current?.setFieldsValue({ LayoutId: e });
     setSelectedLayoutId(e);
     dispatch(
@@ -1214,7 +1227,7 @@ const SelectionComponent = forwardRef((props, ref) => {
 
     GetNavbarFun();
     GetLayoutBackgroundFun();
-    GetCategoryFun();
+    await GetCategoryFun(manualChange);
     GetCardFun();
     GetSubCategoryFun();
     GetBillingTableFun();
@@ -1294,6 +1307,7 @@ const SelectionComponent = forwardRef((props, ref) => {
     setSelectedCategoryId(e);
     dispatch(changeSelectedCategory({ CategoryId: e }));
     let CategoryItems = CategoryData?.filter((a) => a.ComponentId === e);
+    setSelectedCategoryName(CategoryItems[0]?.ComponentName);
     dispatch(
       changePreviewComponents({
         BookingCategory: [
@@ -2779,6 +2793,7 @@ const SelectionComponent = forwardRef((props, ref) => {
         SelectedCategoryCheckList != undefined ? SelectedCategoryCheckList : [],
     });
 
+    selectedCategoryName !== 'Category5' &&
     ShowDropDownData?.find((a) => a.OptionName === 'SubCategory')
       ? tempData.push({
           ComponentId: SelectedSubCategoryId,
@@ -3140,7 +3155,7 @@ const SelectionComponent = forwardRef((props, ref) => {
                         label: option.ComponentName,
                       }))}
                       label="Layout"
-                      onChangeFunction={selectLayout}
+                      onChangeFunction={(e) => selectLayout(e, true)}
                       className="field-DropDown-Selection"
                       isOnchanges={SelectedLayoutId ? true : false}
                       valueData={SelectedLayoutId}
@@ -3306,35 +3321,38 @@ const SelectionComponent = forwardRef((props, ref) => {
                   </Form.Item>
                 </div>
               )}
-              {ShowDropDownData?.find(
+              {selectedCategoryName !== 'Category5' &&
-                (a) => a.OptionName === 'SubCategory'
+                ShowDropDownData?.find(
-              ) && (
+                  (a) => a.OptionName === 'SubCategory'
-                <div>
+                ) && (
-                  <p className="Selection-Component-SubHeading">Sub Category</p>
+                  <div>
+                    <p className="Selection-Component-SubHeading">
+                      Sub Category
+                    </p>
 
-                  <Form.Item
+                    <Form.Item
-                    name="SubCategoryId"
+                      name="SubCategoryId"
-                    rules={[
+                      rules={[
-                      {
+                        {
-                        required: true,
+                          required: true,
-                        message: 'Please Select SubCategory',
+                          message: 'Please Select SubCategory',
-                      },
+                        },
-                    ]}
+                      ]}
-                  >
+                    >
-                    <DropDowns
+                      <DropDowns
-                      options={SubCategoryData?.map((option) => ({
+                        options={SubCategoryData?.map((option) => ({
-                        value: option.ComponentId,
+                          value: option.ComponentId,
-                        label: option.ComponentName,
+                          label: option.ComponentName,
-                      }))}
+                        }))}
-                      label="Sub Category"
+                        label="Sub Category"
-                      onChangeFunction={selectSubCategory}
+                        onChangeFunction={selectSubCategory}
-                      className="field-DropDown-Selection"
+                        className="field-DropDown-Selection"
-                      isOnchanges={SelectedSubCategoryId ? true : false}
+                        isOnchanges={SelectedSubCategoryId ? true : false}
-                      valueData={SelectedSubCategoryId}
+                        valueData={SelectedSubCategoryId}
-                    />
+                      />
-                  </Form.Item>
+                    </Form.Item>
-                </div>
+                  </div>
-              )}
+                )}
               {ShowDropDownData?.find((a) => a.OptionName === 'Card') && (
                 <div>
                   <p className="Selection-Component-SubHeading">Card</p>
@@ -4006,7 +4024,8 @@ const SelectionComponent = forwardRef((props, ref) => {
                     </div>
                   </div>
                 )}
-              {ShowDropDownData?.find((a) => a.OptionName === 'SubCategory') &&
+              {selectedCategoryName !== 'Category5' &&
+                ShowDropDownData?.find((a) => a.OptionName === 'SubCategory') &&
                 SubCategoryCheckList?.length > 0 && (
                   <div className="Selection-Component-selectContainer">
                     <div className="Selection-Component-selectheadingMainDiv">

src/Pages/BookingScreen/Components/PreviewLayouts/PreviewLayout3.jsx

@@ -83,22 +83,25 @@ const PreviewLayout3 = (props) => {
               )}
             />
           </div>
-          <div
+          {Preview3Data?.BookingSubCategory?.[0] !== undefined && (
-            style={{
+            <div
-              backgroundColor: SelectedSubCatgColor?.['OverallBackgroundColor'],
+              style={{
-            }}
+                backgroundColor:
-          >
+                  SelectedSubCatgColor?.['OverallBackgroundColor'],
-            <PCSubCategoryHor
+              }}
-              categoryFunction={dynamicComponentProps(
+            >
-                'SubCategory',
+              <PCSubCategoryHor
-                dynamicPreviewOptions(
+                categoryFunction={dynamicComponentProps(
-                  Preview3Data?.BookingSubCategory?.[1],
+                  'SubCategory',
-                  selectedSubCategoryOptions
+                  dynamicPreviewOptions(
-                ),
+                    Preview3Data?.BookingSubCategory?.[1],
-                Preview3Data?.BookingSubCategory?.[0]
+                    selectedSubCategoryOptions
-              )}
+                  ),
-            />
+                  Preview3Data?.BookingSubCategory?.[0]
-          </div>
+                )}
+              />
+            </div>
+          )}
         </div>
       </div>
       <div className="PCLayout3-content">

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/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;
@@ -174,4 +202,4 @@
   .primary_Button {
     width: 200px !important;
   }
-}
+}

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

@@ -1,8 +1,9 @@
 .CategoryHorizontal {
   display: flex;
   align-items: center;
-  margin: 4px 10px 10px 10px;
+  margin: 4px 8px 10px 8px;
   justify-content: space-between;
+  gap: 4px;
 }
 
 .bs1 {
@@ -12,7 +13,6 @@
 .CategoryHorizontal-master-container {
   display: flex;
   flex-direction: row;
-  // flex-wrap: wrap;
   column-gap: 0.7rem;
   row-gap: 0.7rem;
   width: max-content;
@@ -21,11 +21,15 @@
 .CategoryHorizontal-icon {
   border: none;
   font-size: 15px;
-  padding: 3px;
+  padding: 8px;
-  border-radius: 30px;
+  border-radius: 6px;
-  background-color: #e2e2e2;
+  background-color: #d8d8d8;
-  margin: 10px;
+  margin: 3px;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
 }
 
 .CategoryHorizontal-image {
@@ -39,18 +43,8 @@
   position: absolute;
 }
 
-.CategoryHorizontal-icon {
-  border: none;
-  font-size: 15px;
-  padding: 3px;
-  border-radius: 30px;
-  background-color: #e2e2e2;
-  margin: 10px;
-  cursor: pointer;
-}
-
 .CategoryHorizontal-scroll-container {
-  overflow-y: scroll;
+  overflow-y: auto;
   max-height: 300px;
   scrollbar-width: none;
   display: flex;
@@ -63,28 +57,12 @@
   font-size: 14px;
 }
 
-// ::-webkit-scrollbar-button:start {
-//   background-color: #333;
-//   border: 1px solid #666;
-// }
-
-// /* Style the scroll-down button */
-// ::-webkit-scrollbar-button:end {
-//   background-color: #333;
-//   border: 1px solid #666;
-// }
-
-// ::-webkit-scrollbar {
-//   display: none;
-// }
-
 .CategoryHorizontal-btn-option2 {
   display: flex;
   align-items: center;
   padding: 8px 10px;
   width: max-content !important;
   cursor: pointer;
-  // border-radius: 20px;
 }
 
 .CategoryHorizontal-input-style:checked + span {
@@ -97,19 +75,12 @@
   }
 }
 
-// .CategoryHorizontal-btn-option2 {
-//   display: flex;
-//   align-items: center;
-//   padding: 10px  10px;
-//   width: max-content !important;
-// }
 .CategoryHorizontal-btn-option2-reverse {
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
   padding: 10px 10px;
   width: max-content !important;
-  // border-radius: 20px;
 }
 
 .CategoryHorizontal-curved {
@@ -121,7 +92,6 @@
 }
 
 .CategoryHorizontal-scroll-container {
-  // overflow: hidden !important;
   width: 100%;
   white-space: nowrap;
 }
@@ -130,7 +100,6 @@
   min-width: max-content;
   display: flex;
   align-items: center;
-  // flex-grow: 1;
 }
 
 .sampleCard:active,
@@ -140,7 +109,7 @@
 
 .CategoryHorizontal-sub-samplecard {
   width: max-content;
-  padding: 3px 5px;
+  padding: 2px 8px;
   display: flex;
   align-items: center;
   p {
@@ -157,13 +126,8 @@
 }
 
 .sampleCard {
-  /* Your existing styles for sampleCard */
-  /* ... */
-
-  /* Add this to specify the border style */
   border: 1px solid transparent;
   cursor: pointer;
-  /* Optional: add a pointer cursor to indicate clickability */
 }
 
 .sampleCard1 {
@@ -172,7 +136,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: 16px;
+  margin-top: 2px;
   font-family: "Poppins", sans-serif;
   font-weight: 400;
 
@@ -192,14 +156,6 @@
 
 .sampleCard-border {
   border-color: black;
-  /* Specify the border color you want */
-}
-
-.CategoryHorizontal-icon {
-  background-color: transparent;
-  border: none;
-  padding: 8px;
-  cursor: pointer;
 }
 
 .uom-container .ant-select {
@@ -236,9 +192,6 @@
     width: 110px !important;
   }
 
-  //  .ant-input-group-wrapper {
-  //   width: 70% !important;
-  // }
   .quantity-amt .example {
     width: auto !important;
   }
@@ -279,12 +232,8 @@
 
   .CategoryHorizontal-scroll-container {
     overflow-y: auto !important;
-    /* Add a vertical scrollbar when content overflows */
     max-height: 300px;
-    /* Set a maximum height for the container */
-
     display: flex;
-    // flex-direction: row;
     column-gap: 0.5rem;
   }
 
@@ -304,18 +253,12 @@
   }
 
   .bill-inother {
-    // flex-direction: column;
     column-gap: 1rem !important;
     flex-wrap: wrap;
     font-size: 12px !important;
   }
 }
 
-//////////////////
-///
-/// new
-///
-
 .CategoryHorizontalNew {
   padding: 1.5rem;
   font-family: "Inter", sans-serif;
@@ -418,13 +361,8 @@
   font-size: 15px;
   line-height: 1.25rem;
   color: #4b5563;
-  // font-family: "Inter", sans-serif !important;
   font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
-
-  // -webkit-text-stroke-width: 0.2px;
   width: max-content;
-  // min-width: 150px;
-  // max-width: 250px;
   text-align: center;
   transition: all 0.2s ease;
   white-space: nowrap;
@@ -461,7 +399,6 @@
   align-items: center;
   background-color: #fff;
   width: 100%;
-  // padding: 2px 16px;
   gap: 10px;
   animation: slideDown 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   transform-origin: top;
@@ -522,7 +459,6 @@
 .subcatNewLayout {
   padding: 1rem 1.5rem;
   height: 100%;
-  // background-color: #f9fafb;
   cursor: pointer;
   font-weight: 500;
   font-size: 15px;
@@ -530,7 +466,6 @@
   color: #4b5563;
   font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
   width: max-content;
-  // min-width: 150px;
   border-radius: 4px;
   text-align: center;
   transition: all 0.2s ease;

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

@@ -562,7 +562,7 @@
     padding: 10px 30px 10px 30px;
   }
   .search-icon {
-    top: 53%;
+    top: 43%;
   }
 }
 .BsNavbar1FullScreen {

src/Styles/BookingScreen/Components/BSSubCategories/BSSubCategoryVertical.scss

@@ -106,7 +106,7 @@
 
 .SubCategoryVertical-sampleCard {
   min-width: max-content;
-  flex-grow: 1;
+  // flex-grow: 1;
 }
 
 .SubCategoryVertical-sub-samplecard p {

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;
@@ -295,4 +319,4 @@ body {
   display: flex;
   align-items: center;
   gap: 2px;
-}
+}

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

@@ -90,6 +90,7 @@ body {
   overflow: hidden;
   justify-content: space-between;
   background-color: #f1f5f9;
+  width: 100%;
 
   @media (max-width: 768px) {
     height: 85vh;

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

@@ -25,12 +25,14 @@
   display: flex;
   overflow: scroll;
   height: 100%;
+  margin-top: 10px;
 }
 
 .BSlayout_subdiv {
   height: 100vh;
   overflow: hidden;
   display: flex;
+  width: 100%;
   flex-direction: row;
 }
 
@@ -43,7 +45,7 @@
 }
 
 .Bslayout4_table {
-  width: 426px !important;
+  width: 425px !important;
   height: clamp(68vh, 71rem, 50vh);
   background-color: #fff;
 }
@@ -264,3 +266,19 @@
     font-size: 10px !important;
   }
 }
+
+.bslayout4Cat5Flex {
+  display: flex;
+  flex-direction: column;
+  width: 68%;
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+
+  .CategoryHorizontalNew {
+    width: 100%;
+  }
+  .Bslayout4_card {
+    width: 100% !important;
+  }
+}

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

@@ -18,11 +18,27 @@
 .BSCategory5-Contentcont {
   display: flex;
   height: 100%;
+  width: 70%;
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+}
+.BSlayout5Cat5Flex {
+  display: flex;
+  height: 100%;
+  width: 70%;
+  flex-direction: column;
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+  .CategoryHorizontalNew-scroll-container {
+    width: 97%;
+  }
 }
 
 .BSCategory5-tablecont {
   width: 430px;
-  height: clamp(73vh, 71rem, 50vh);
+  height: clamp(85vh, 71rem, 50vh);
   background-color: #fff;
 }
 @media (min-width: 500px) and (max-width: 768px) {
@@ -34,7 +50,6 @@
     width: 0px !important;
     z-index: 3;
   }
-  //nk
   .BSLayout5-Master .BsTable2-Master {
     height: 0 !important;
   }