karthikalakshmi
/
Android_Retail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added preference in sales and category horizontal and vertical clean

This commit is contained in:
unknown 2026-03-11 19:19:10 +05:30
parent 5b2367fe73
commit c837984398
14 changed files with 1274 additions and 1809 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Features/BookingScreen/BookingData/BookingData.js
View File

@ -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) =>

1007
src/Pages/BookingScreen/Components/BSCategories/BSCategoryHorizontal.jsx
View File

File diff suppressed because it is too large Load Diff

687
src/Pages/BookingScreen/Components/BSCategories/BSCategoryVertical.jsx
View File

@ -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(data));
await dispatch(changeAccessForOthers(true));
};
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]);
useEffect(() => {
function handleResize() {
setHeight(window.innerHeight);
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [categoryData]);
}, [height, 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) {
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}
/>
)}
{isModalOpen && <OtherItemsModal open={isModalOpen} setOpen={isModalOpen} getselectCards={getselectCards} />}
<div className="CategoryVertical-buttons" ref={containerRef}>
<div

665
src/Pages/BookingScreen/Components/BSCategories/OtherItemsModal.jsx Normal file
View File

@ -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;

1
src/Pages/BookingScreen/Components/BSNavbar/BSNavbar2.jsx
View File

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

1
src/Pages/BookingScreen/Components/BSNavbar/BSNavbar3.jsx
View File

@ -187,6 +187,7 @@ const BSNavbar3 = ({ optionNames }) => {
const userProfileData = useSelector(userDataByUserId);
const appPreferences = useSelector(ApplicationPreferences);
const preferences = useSelector(PreferenceData);
console.log(preferences, "preferencespreferences")
const orderType = useSelector(GlobalOrderType);
const bookingType = useSelector(GlobalBookingType, shallowEqual);
const layoutData = useSelector(getTemplateData);

14
src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx
View File

@ -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 className="SettingsComponentDiv">
</div>
<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>

36
src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss
View File

@ -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;
}
}

6
src/Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx
View File

@ -344,7 +344,7 @@ const BSLayout1 = () => {
</div>
<div
className={
BookingNavbar != 'Navbar3' ? 'BSLayout1' : 'BSLayout1Standard'
BookingNavbar != 'Navbar3' ? 'BSLayout1Main' : 'BSLayout1Standard'
}
style={{
backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
@ -520,8 +520,8 @@ const BSLayout1 = () => {
GlobalsalesDetailData={GlobalsalesDetailData}
/>
)}
<div className="BSLayout1-ContentDiv">
<div className="BSCategory1-Contentcont">
<div className="BSLayout1Master">
<div className="BSCategoryCardDiv">
<div
style={{
backgroundColor:

7
src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx
View File

@ -6,8 +6,8 @@ import { isMobile } from 'react-device-detect';
import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
const BSNavbar1 = lazy(() => import('../../Components/BSNavbar/BSNavbar1'));
const BSNavbar2 = lazy(() => import('../../Components/BSNavbar/BSNavbar2'));
const CategoryVertical = lazy(
() => import('../../Components/BSCategories/BSCategoryVertical')
const CategoryHorizontal = lazy(
() => import('../../Components/BSCategories/BSCategoryHorizontal')
);
const BSItemCard = lazy(
() => import('../../Components/BSItemCards/BSItemCard')
@ -497,12 +497,13 @@ const BSLayout4 = () => {
}}
>
{!OtherServicesglobal && (
<CategoryVertical
<CategoryHorizontal
categoryFunction={dynamicComponentProps(
'Category',
BookingCategory?.[1],
BookingCategory?.[0]
)}
categoryType={'vertical'}
/>
)}
{OtherServicesglobal && (

7
src/Pages/BookingScreen/Template/BSLayout5/BSLayout5.jsx
View File

@ -38,7 +38,9 @@ const BSBillingTable7 = lazy(
import('../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx')
);
import BSItemCard from '../../Components/BSItemCards/BSItemCard';
import CategoryVertical from '../../Components/BSCategories/BSCategoryVertical';
const CategoryHorizontal = lazy(
() => import('../../Components/BSCategories/BSCategoryHorizontal')
);
import { dynamicComponentProps } from '../DynamicComponentProps.js';
import {
GlobalPricingAppPricingName,
@ -529,12 +531,13 @@ const BSLayout5 = () => {
}}
>
{!OtherServicesglobal && (
<CategoryVertical
<CategoryHorizontal
categoryFunction={dynamicComponentProps(
'Category',
BookingCategory?.[1],
BookingCategory?.[0]
)}
categoryType={'vertical'}
/>
)}
{OtherServicesglobal && (

14
src/Pages/Preference/PreferenceList.jsx
View File

@ -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-section">
<div className={`menu-and-preferences ${setting ? 'preferences-menu' : ''}`}>
<div className={`menu-section ${setting ? 'modal-menu' : ''}`}>
<div
onClick={(e) => handleMenuClick(e, 'general')}
style={{

28
src/Pages/Preference/PreferenceList.scss
View File

@ -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;

42
src/Styles/BookingScreen/Template/BSLayout1/BSLayout1.scss
View File

@ -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;
height: 99vh;
top: 34px;
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;
}
@ -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;