Merge pull request 'Design Updated and Table Master Form fixing' (#168) from PushMainVM into main

Reviewed-on: Pozomind/pozo-retail-app#168
This commit is contained in:
karthikalakshmi 2026-02-24 17:21:26 +05:30
commit 509ddb50fa
24 changed files with 757 additions and 855 deletions

View File

@ -32,6 +32,7 @@ const ExtendSubscriptionModal = lazy(
const commonSubDir = import.meta.env.ENV_COMMON_BASE_URL;
const subDirectory = import.meta.env.ENV_BASE_URL;
import '../ownLib/my-ui-lib.css';
import CardSkeleton from './Components/Skeleton/CardSkeleton.jsx';
const AppRoutes = () => {
const ItemCard = useSelector(GlobalItemCard);
@ -84,7 +85,7 @@ const AppRoutes = () => {
);
}
return (
<Suspense fallback={<div>Loading</div>}>
<Suspense fallback={<CardSkeleton />}>
<Routes>
<Route
path={`${subDirectory}selfBooking/:SelfBookingId`}

View File

@ -19,7 +19,7 @@
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 14px;
margin-top: 1rem;
width: 70%;
width: 100%;
}
.card-skeleton {

View File

@ -214,6 +214,7 @@ import CardPopover from '../StandardTable/Utils/CardPopover.jsx';
import UpiPopover from '../StandardTable/Utils/UpiPopOver.jsx';
import MobileMultiPdfPrintTrigger from '../../UtillComponents/MobileMultiPdfPrintTrigger.jsx';
import { useDateStore } from '../../../../../Features/BookingScreen/BookingData/DateStore.js';
import BillingTableSkeleton from '../../../../../Components/Skeleton/BillingTableSkeleton.jsx';
const PaymentGatewayEmbedded = lazy(
() => import('../../UtillComponents/PaymentGatewayEmbedded.jsx')
);
@ -3585,9 +3586,9 @@ const BSBillingTable3Pay = () => {
);
};
return (
<Suspense fallback={<div>Suspense Loading...</div>}>
<Suspense fallback={<BillingTableSkeleton />}>
<>
<div className="BSBilling3div">
<div className="BSBilling3PayMaster">
{screenwidth <= 768 && (
<div
className={`BSBillingTable1-summeryTable ${responsiveBill ? 'open' : 'closed'}`}
@ -4016,14 +4017,6 @@ const BSBillingTable3Pay = () => {
</div>
</TooltipWrapper>
)}
<div
style={{
display: 'flex',
flexDirection: 'column',
rowGap: '0.2rem',
}}
></div>
</div>
<div className="CustomerAddSrch">
<div style={{ height: '2.1rem' }}>

View File

@ -684,14 +684,7 @@ const BSNavbar1 = (props) => {
)}
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
columnGap: '0.5rem',
position: 'relative',
}}
>
<div className="NavbarDivForSearch">
{/* Multiple search */}
<Tooltip title={'Multiple Search'}>
<div className="MultiSearchIconDiv">
@ -722,7 +715,7 @@ const BSNavbar1 = (props) => {
</>
))}
{Comboglobal === true && (
<div>
<div className="Navbar1SearchCombo">
<BSNavBarComboSearch SessionData={SessionData} />
</div>
)}

View File

@ -22,7 +22,6 @@ import { changeOfferAppliedProductsForMembership } from '../../../../../Features
import BarCodeScan from '../../../../../Services/BarCodeScan.jsx';
import { isMobile } from 'react-device-detect';
const VerfiedProducts = ({ drawerOpen = false, setDrawerOpen = () => {} }) => {
const dispatch = useDispatch();
const [isOpenModal, setisOpenModal] = useState(false);
@ -73,7 +72,11 @@ const VerfiedProducts = ({ drawerOpen = false, setDrawerOpen = () => {} }) => {
const UpdatedData = payload?.data?.[0]?.productDetails;
if (UpdatedData?.length > 0) {
await dispatch(changeOrderCardDetails(UpdatedData));
dispatch(changeOfferAppliedProductsForMembership(payload?.data?.[0]?.OrderOfferDetails))
dispatch(
changeOfferAppliedProductsForMembership(
payload?.data?.[0]?.OrderOfferDetails
)
);
await dispatch(changeReorderHoldDetails(payload?.data?.[0]));
let data = {
CustId: payload?.data?.[0]?.CustSuppId,
@ -265,7 +268,7 @@ const VerfiedProducts = ({ drawerOpen = false, setDrawerOpen = () => {} }) => {
>
<div
className="verfied-products-modal-content"
style={{ overflow: 'auto', padding: 12 }}
style={{ overflow: 'auto' }}
>
<div style={{ marginBottom: 12 }}>
<ScannerInputField
@ -295,26 +298,31 @@ const VerfiedProducts = ({ drawerOpen = false, setDrawerOpen = () => {} }) => {
? 'Fetch Booking'
: 'Fetch Products'}
</button>
{!isMobile ? (
<button
onClick={() => setShowScanner((s) => !s)}
style={{ backgroundColor: '#dfdfdf', color: '#000' }}
>
{showScanner ? 'Stop Camera' : 'Scan with Camera'}
</button>
) : (
<BarCodeScan
onScan={(value) => {
setScanValue(value);
fetchProductsByOrderId(value);
}}
/>
)}
<button
onClick={() => {
setScanValue('');
setProductData(null);
setMessage('');
}}
style={{ backgroundColor: '#db0000', color: '#ffffff' }}
>
Clear
</button>
{!isMobile ?
(<button onClick={() => setShowScanner((s) => !s)}>
{showScanner ? 'Stop Camera' : 'Scan with Camera'}
</button>)
: (<BarCodeScan
onScan={(value) => {
setScanValue(value);
fetchProductsByOrderId(value);
}}
/>)}
</div>
{message && <div className="SelfBooking-message">{message}</div>}
@ -330,16 +338,7 @@ const VerfiedProducts = ({ drawerOpen = false, setDrawerOpen = () => {} }) => {
<div className="SelfBooking-order-list">
{productData.map((order, idx) => (
<div key={idx} className="SelfBooking-order-card">
<div className="SelfBooking-order-header">
{/* <div>
<p>Order ID</p>
<strong>{order?.OrderId || order?.orderId || scanValue}</strong>
</div>
<div>
<p>Sales ID</p>
<strong>{order?.SalesId}</strong>
</div> */}
</div>
<div className="SelfBooking-order-header"></div>
<div>
<p className="SelfBooking-product-title">

View File

@ -69,9 +69,13 @@
}
.SelfBooking-action-bar {
display: flex;
gap: 10px;
gap: 16px;
margin-bottom: 12px;
flex-wrap: wrap;
margin-top: 16px;
.BarCodeScanMaster {
padding: 0 !important;
}
}
.SelfBooking-action-bar button {
@ -80,17 +84,20 @@
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
font-weight: 400;
transition: all 0.2s ease;
font-family: "Poppins";
height: max-content;
color: #000;
}
.SelfBooking-action-bar .primary-btn {
background-color: #2563eb;
background-color: #1292ee;
color: white;
}
.SelfBooking-action-bar .primary-btn:hover:not(:disabled) {
background-color: #1d4ed8;
background-color: #0679cc;
}
.SelfBooking-action-bar button:not(.primary-btn) {

View File

@ -2987,6 +2987,7 @@ const FeaturesFunctionalities = (props) => {
<InputField
label={<label>Customer Name</label>}
autocomplete="off"
autoFocus
isOnChange={
formRef.current?.getFieldsValue()?.CustName ||
inputValue

View File

@ -26,6 +26,8 @@ import { IoCloseSharp } from 'react-icons/io5';
import TooltipWrapper from '../../../../Components/Tooltip/Tooltip';
import { isMobile } from 'react-device-detect';
import { TfiHandDrag } from 'react-icons/tfi';
import { TfiArrowsHorizontal } from 'react-icons/tfi';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { DropDowns } from '../../../../Components/Forms/DropDown.jsx';
import { Messages } from '../../../../Components/Notifications/Messages.jsx';
@ -164,7 +166,9 @@ const BSNavBarDragItems = ({
<>
<div style={preOrderOpen ? { pointerEvents: 'none' } : {}}>
<TooltipWrapper title={'Dragger Icon'} isMobile={isMobile}>
<TfiHandDrag
<TfiArrowsHorizontal
strokeWidth={0.3}
cursor={'Pointer'}
onClick={(e) => {
e.stopPropagation();
handleDragToggle();

View File

@ -26,8 +26,9 @@ import { SlArrowDown } from 'react-icons/sl';
import { IoCloseSharp } from 'react-icons/io5';
import TooltipWrapper from '../../../../Components/Tooltip/Tooltip';
import { isMobile } from 'react-device-detect';
import '../../../../Styles/BookingScreen/Components/BSNavbar/BSNavbar2.scss';
const BSNavBarFavItems = ({ type, fill,drawerOpen = false }) => {
const BSNavBarFavItems = ({ type, fill, drawerOpen = false }) => {
const [open, setOpen] = useState(false);
const [favopen, setFavopen] = useState(false);
const globalAllItemdata = useSelector(GlobalAllItemData);
@ -80,11 +81,10 @@ const BSNavBarFavItems = ({ type, fill,drawerOpen = false }) => {
useEffect(() => {
if (drawerOpen) {
AddFav();
}
else {
} else {
setOpen(false);
}
}, [drawerOpen])
}, [drawerOpen]);
useEffect(() => {
if (preOrderOpen) {
@ -175,7 +175,13 @@ const BSNavBarFavItems = ({ type, fill,drawerOpen = false }) => {
e.stopPropagation(); // 👈 prevents parent click
AddFav();
}}
fill={globalAllItemdata?.length > 0 ? '#52C41A' : (fill ? fill : '#6b7280')}
fill={
globalAllItemdata?.length > 0
? '#52C41A'
: fill
? fill
: '#6b7280'
}
style={{
cursor: 'pointer',
color: globalAllItemdata ? '#52C41A' : 'default',
@ -187,10 +193,7 @@ const BSNavBarFavItems = ({ type, fill,drawerOpen = false }) => {
{open && favopen && (
<div className="AddFavList">
<div
className="AddFavList-subContainer"
// style={{ display: "flex", flexDirection: "row", columnGap: "2rem" }}
>
<div className="AddFavList-subContainer">
<div
style={{
display: 'flex',

View File

@ -112,6 +112,7 @@ const SalesCountForStandard = lazy(
import BsBookingitemCard from '../../Components/BSItemCards/BsBookingitemCard.jsx';
import LayoutSubCategoryFetcher from '../../LayoutSubCategoryFetcher.jsx';
import NavbarSkeleton from '../../../../Components/Skeleton/NavbarSkeleton.jsx';
import CardSkeleton from '../../../../Components/Skeleton/CardSkeleton.jsx';
const ListOfSalesInvoices = lazy(
() =>
import('../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx')
@ -328,302 +329,303 @@ const BSLayout2 = () => {
setListOfInvoices(false);
};
return (
<>
<Messages
messageType={messageType}
messageData={messageData}
onComplete={onComplete}
/>
<div ref={elementRef} style={{ backgroundColor: '#fff' }}>
{UserType != 'Super Admin' &&
UserType != 'Super Admin User' &&
(AppExpDate?.RemainingDays <= 7 ||
AppExpDate === 'undefined' ||
AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
<Suspense fallback={<NavbarSkeleton />}>
<PlanExpireNotification />
</Suspense>
)}
<div
className="BSLayout2-Master"
style={{ height: containerHeight, overflow: 'hidden' }}
>
<div className="BSLayout2-NavBar">
{BookingNavbar == 'Navbar1' && <BSNavbar1 />}
{BookingNavbar == 'Navbar2' && <BSNavbar2 />}
{BookingNavbar == 'Navbar3' && <BSNavbar3 />}
</div>
<Suspense fallback={<CardSkeleton />}>
<>
<Messages
messageType={messageType}
messageData={messageData}
onComplete={onComplete}
/>
<div ref={elementRef} style={{ backgroundColor: '#fff' }}>
{UserType != 'Super Admin' &&
UserType != 'Super Admin User' &&
(AppExpDate?.RemainingDays <= 7 ||
AppExpDate === 'undefined' ||
AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
<Suspense fallback={<NavbarSkeleton />}>
<PlanExpireNotification />
</Suspense>
)}
<div
// className="BSLayout2"
className={
BookingNavbar != 'Navbar3' ? 'BSLayout2Standard' : 'BSLayout2'
}
className="BSLayout2-Master"
style={{ height: containerHeight, overflow: 'hidden' }}
>
{BookingNavbar != 'Navbar3' ? (
<div
className="Layout-bill-container"
style={{ marginTop: '9px' }}
>
<div className="BSLayout2-NavBar">
{BookingNavbar == 'Navbar1' && <BSNavbar1 />}
{BookingNavbar == 'Navbar2' && <BSNavbar2 />}
{BookingNavbar == 'Navbar3' && <BSNavbar3 />}
</div>
<div
// className="BSLayout2"
className={
BookingNavbar != 'Navbar3' ? 'BSLayout2Standard' : 'BSLayout2'
}
>
{BookingNavbar != 'Navbar3' ? (
<div
className="Layout-bill-Subcontainer"
style={{ width: OtherServicesglobal ? '10%' : '100%' }}
className="Layout-bill-container"
style={{ marginTop: '9px' }}
>
{UserType !== 'Employee' && (
<div className="pricing-name-details">
{PricingAppPricingName?.[0]?.PricingName +
' / ' +
PricingAppPricingName?.[0]?.Type}
</div>
)}
{!OtherServicesglobal && (
<Suspense fallback={null}>
<SalesCountComponent
DineInAccess={DineInAccess}
GlobalsalesDetailData={GlobalsalesDetailData}
/>
</Suspense>
)}
{SessionData?.FeatureAddonData?.FeatureDtls?.find(
(item) =>
item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
) &&
!sportsAppPreference && (
<div
style={{
pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
opacity: OrderStatus > 0 ? 0.5 : 1,
}}
>
{!OtherServicesglobal && (
<Tooltip title={'Kiosk Sales'}>
<Badge
count={badgeCount}
offset={[-10, 3]}
size="small"
>
<PozoKioskIcon
onClick={() => openModalKiosk()}
style={{
cursor: 'pointer',
fontSize: '1.5rem',
}}
className="iconsize"
/>
</Badge>
</Tooltip>
)}
<div
className="Layout-bill-Subcontainer"
style={{ width: OtherServicesglobal ? '10%' : '100%' }}
>
{UserType !== 'Employee' && (
<div className="pricing-name-details">
{PricingAppPricingName?.[0]?.PricingName +
' / ' +
PricingAppPricingName?.[0]?.Type}
</div>
)}
{!OtherServicesglobal && (
<TooltipWrapper
title={'Low Stock Alerts'}
isMobile={isMobile}
>
{' '}
<Suspense fallback={<div>Loading...</div>}>
<BSExpireProductsList />
</Suspense>
</TooltipWrapper>
)}
{Kioskopen && (
<Suspense fallback={<div>Loading...</div>}>
<BSKioskCounterPayment
Kioskopen={Kioskopen}
closeKioskModal={closeModalKiosk}
/>
</Suspense>
)}
{SAdminuserPin?.length > 0 &&
UserType != 'Super Admin User' && (
<Suspense fallback={<div>Loading...</div>}>
<div>
<SAdminUserNotification
SAdminuserPin={SAdminuserPin}
popOverOpen={popOverOpen}
handleSupportUser={handleSupportUser}
handlePopOverOpen={handlePopOverOpen}
/>
</div>
{!OtherServicesglobal && (
<Suspense fallback={null}>
<SalesCountComponent
DineInAccess={DineInAccess}
GlobalsalesDetailData={GlobalsalesDetailData}
/>
</Suspense>
)}
{!OtherServicesglobal && (
<>
{CheckBookingStatus == 'Open' ? (
{SessionData?.FeatureAddonData?.FeatureDtls?.find(
(item) =>
item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
) &&
!sportsAppPreference && (
<div
style={{
pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
opacity: OrderStatus > 0 ? 0.5 : 1,
}}
>
{!OtherServicesglobal && (
<Tooltip title={'Kiosk Sales'}>
<Badge
count={badgeCount}
offset={[-10, 3]}
size="small"
>
<PozoKioskIcon
onClick={() => openModalKiosk()}
style={{
cursor: 'pointer',
fontSize: '1.5rem',
}}
className="iconsize"
/>
</Badge>
</Tooltip>
)}
</div>
)}
{!OtherServicesglobal && (
<TooltipWrapper
title={'Low Stock Alerts'}
isMobile={isMobile}
>
{' '}
<Suspense fallback={null}>
<BSExpireProductsList />
</Suspense>
</TooltipWrapper>
)}
{Kioskopen && (
<Suspense fallback={null}>
<BSKioskCounterPayment
Kioskopen={Kioskopen}
closeKioskModal={closeModalKiosk}
/>
</Suspense>
)}
{SAdminuserPin?.length > 0 &&
UserType != 'Super Admin User' && (
<Suspense fallback={null}>
<div>
<SAdminUserNotification
SAdminuserPin={SAdminuserPin}
popOverOpen={popOverOpen}
handleSupportUser={handleSupportUser}
handlePopOverOpen={handlePopOverOpen}
/>
</div>
</Suspense>
)}
{!OtherServicesglobal && (
<>
{CheckBookingStatus == 'Open' ? (
<div style={{ marginLeft: '10px' }}>
<TooltipWrapper
title={'Booking Close'}
isMobile={isMobile}
>
{' '}
<BookingCloseIcon
onClick={OpenBookingModal}
bgFill={'#52c41a'}
style={{
fontSize: '16px',
marginTop: '4px',
color: '#52c41a',
cursor: 'pointer',
}}
/>
</TooltipWrapper>
</div>
) : (
<div style={{ marginLeft: '10px' }}>
<TooltipWrapper
title="Booking Open"
isMobile={isMobile}
>
<Popconfirm
placement="leftTop"
title="Booking Open"
description="Are you sure you want to Open the sales?"
okText="Yes"
cancelText="No"
onConfirm={() => BookingOpenFun('Open')}
>
<span>
<BookingCloseIcon
bgFill="red"
style={{
fontSize: '16px',
marginTop: '4px',
color: '#52c41a',
cursor: 'pointer',
}}
/>
</span>
</Popconfirm>
</TooltipWrapper>
</div>
)}
<div style={{ marginLeft: '10px' }}>
<TooltipWrapper
title={'Booking Close'}
title={'E-way Bill'}
isMobile={isMobile}
>
{' '}
<BookingCloseIcon
onClick={OpenBookingModal}
bgFill={'#52c41a'}
style={{
fontSize: '16px',
marginTop: '4px',
color: '#52c41a',
cursor: 'pointer',
}}
{''}
<BSEwayBillicon
style={{ cursor: 'pointer', marginTop: '5px' }}
onClick={OpenListOfInvoices}
/>
</TooltipWrapper>
</div>
) : (
<div style={{ marginLeft: '10px' }}>
<TooltipWrapper
title="Booking Open"
isMobile={isMobile}
>
<Popconfirm
placement="leftTop"
title="Booking Open"
description="Are you sure you want to Open the sales?"
okText="Yes"
cancelText="No"
onConfirm={() => BookingOpenFun('Open')}
>
<span>
<BookingCloseIcon
bgFill="red"
style={{
fontSize: '16px',
marginTop: '4px',
color: '#52c41a',
cursor: 'pointer',
}}
/>
</span>
</Popconfirm>
</TooltipWrapper>
</div>
)}
<div style={{ marginLeft: '10px' }}>
<TooltipWrapper
title={'E-way Bill'}
isMobile={isMobile}
>
{''}
<BSEwayBillicon
style={{ cursor: 'pointer', marginTop: '5px' }}
onClick={OpenListOfInvoices}
/>
</TooltipWrapper>
</div>
</>
)}
</>
)}
</div>
</div>
</div>
) : (
<Suspense fallback={null}>
<SalesCountForStandard
PricingAppPricingName={PricingAppPricingName}
DineInAccess={DineInAccess}
GlobalsalesDetailData={GlobalsalesDetailData}
/>
</Suspense>
)}
) : (
<Suspense fallback={null}>
<SalesCountForStandard
PricingAppPricingName={PricingAppPricingName}
DineInAccess={DineInAccess}
GlobalsalesDetailData={GlobalsalesDetailData}
/>
</Suspense>
)}
<div
className="BsLayout2-ContentDiv"
style={{
backgroundColor:
GlobalLayoutColorDetail?.OverallBackgroundColor,
height:
PricingAppPricingName?.[0]?.PricingName == 'Standard'
? '100vh'
: ' ',
}}
>
<div className="BSCategory2-Contentcont">
<div
style={{
backgroundColor:
SelectedCatgColor?.['OverallBackgroundColor'],
}}
>
{!OtherServicesglobal && (
<Suspense fallback={<div>Loading...</div>}>
<CategoryHorizontal
categoryFunction={dynamicComponentProps(
'Category',
BSLayout2Data?.BookingCategory?.[1],
BSLayout2Data?.BookingCategory?.[0]
)}
/>
</Suspense>
)}
{OtherServicesglobal && (
<Suspense fallback={<div>Loading...</div>}>
<BSOtherServicesHorizontalcat
categoryFunction={dynamicComponentProps(
'Category',
BSLayout2Data?.BookingCategory?.[1],
BSLayout2Data?.BookingCategory?.[0]
)}
/>
</Suspense>
)}
<div
className="BsLayout2-ContentDiv"
style={{
backgroundColor:
GlobalLayoutColorDetail?.OverallBackgroundColor,
height:
PricingAppPricingName?.[0]?.PricingName == 'Standard'
? '100vh'
: ' ',
}}
>
<div className="BSCategory2-Contentcont">
<div
style={{
backgroundColor:
SelectedCatgColor?.['OverallBackgroundColor'],
}}
>
{!OtherServicesglobal && (
<Suspense fallback={null}>
<CategoryHorizontal
categoryFunction={dynamicComponentProps(
'Category',
BSLayout2Data?.BookingCategory?.[1],
BSLayout2Data?.BookingCategory?.[0]
)}
/>
</Suspense>
)}
{OtherServicesglobal && (
<Suspense fallback={null}>
<BSOtherServicesHorizontalcat
categoryFunction={dynamicComponentProps(
'Category',
BSLayout2Data?.BookingCategory?.[1],
BSLayout2Data?.BookingCategory?.[0]
)}
/>
</Suspense>
)}
</div>
<div
className="BSCategory2-Cardcont"
style={{
backgroundColor:
SelectedCardColor?.['OverallBackgroundColor'],
display: 'flex',
}}
>
{Comboglobal === false &&
!OtherServicesglobal &&
(AvailableDate ? (
<BsBookingitemCard
cardFunctionality={dynamicComponentProps(
'Card',
BSLayout2Data?.BookingCard?.[1],
BSLayout2Data?.BookingCard?.[0]
)}
/>
) : (
<BSItemCard
cardFunctionality={dynamicComponentProps(
'Card',
BSLayout2Data?.BookingCard?.[1],
BSLayout2Data?.BookingCard?.[0]
)}
/>
))}
{Comboglobal === true && !OtherServicesglobal && (
<Suspense fallback={null}>
<BSComboItemCard
cardFunctionality={dynamicComponentProps(
'Card',
BSLayout2Data?.BookingCard?.[1],
BSLayout2Data?.BookingCard?.[0]
)}
/>
</Suspense>
)}
{OtherServicesglobal && (
<Suspense fallback={null}>
<BSOtherServiceItemCard
// screenHeight={screenHeight}
cardFunctionality={dynamicComponentProps(
'Card',
BSLayout2Data?.BookingCard?.[1],
BSLayout2Data?.BookingCard?.[0]
)}
/>
</Suspense>
)}
</div>
</div>
<div
className="BSCategory2-Cardcont"
style={{
backgroundColor:
SelectedCardColor?.['OverallBackgroundColor'],
display: 'flex',
}}
>
{Comboglobal === false &&
!OtherServicesglobal &&
(AvailableDate ? (
<BsBookingitemCard
cardFunctionality={dynamicComponentProps(
'Card',
BSLayout2Data?.BookingCard?.[1],
BSLayout2Data?.BookingCard?.[0]
)}
/>
) : (
<BSItemCard
cardFunctionality={dynamicComponentProps(
'Card',
BSLayout2Data?.BookingCard?.[1],
BSLayout2Data?.BookingCard?.[0]
)}
/>
))}
{Comboglobal === true && !OtherServicesglobal && (
<Suspense fallback={null}>
<BSComboItemCard
cardFunctionality={dynamicComponentProps(
'Card',
BSLayout2Data?.BookingCard?.[1],
BSLayout2Data?.BookingCard?.[0]
)}
/>
</Suspense>
)}
{OtherServicesglobal && (
<Suspense fallback={null}>
<BSOtherServiceItemCard
// screenHeight={screenHeight}
cardFunctionality={dynamicComponentProps(
'Card',
BSLayout2Data?.BookingCard?.[1],
BSLayout2Data?.BookingCard?.[0]
)}
/>
</Suspense>
)}
</div>
</div>
{/* {PricingAppPricingName?.[0]?.PricingName != 'Standard' ? ( */}
<Suspense fallback={<div>Loading...</div>}>
{/* {PricingAppPricingName?.[0]?.PricingName != 'Standard' ? ( */}
<div className="BSCategory2-tablecont">
{action ? (
<BranchTransferComponent />
) : (
<Suspense fallback={<div>Loading...</div>}>
<Suspense fallback={null}>
<>
{BSLayout2Data?.BookingBilling?.[0] == 'Billing1' && (
<BSBillingTable1 />
@ -653,7 +655,7 @@ const BSLayout2 = () => {
{BSLayout2Data?.BookingBilling?.[0] ==
'StandardBilling' && (
<div className="BSCategory2New">
<Suspense fallback={<div>Loading table...</div>}>
<Suspense fallback={null}>
<StandardTable />
</Suspense>
</div>
@ -662,30 +664,30 @@ const BSLayout2 = () => {
</Suspense>
)}
</div>
</Suspense>
</div>
</div>
</div>
</div>
</div>
{BookingModalOpen && (
<Suspense fallback={null}>
<RetailBookingClosing
PaymentOpen={BookingModalOpen}
PaymentClose={HandleBookingModalClose}
/>
</Suspense>
)}
{ListOfInvoices && (
<Suspense fallback={<div>Loading...</div>}>
<ListOfSalesInvoices
ListOfInvoicesOpen={ListOfInvoices}
handleInvoiceClose={handleInvoiceClose}
/>
</Suspense>
)}
{BookingModalOpen && (
<Suspense fallback={null}>
<RetailBookingClosing
PaymentOpen={BookingModalOpen}
PaymentClose={HandleBookingModalClose}
/>
</Suspense>
)}
{ListOfInvoices && (
<Suspense fallback={null}>
<ListOfSalesInvoices
ListOfInvoicesOpen={ListOfInvoices}
handleInvoiceClose={handleInvoiceClose}
/>
</Suspense>
)}
<LayoutSubCategoryFetcher />
</>
<LayoutSubCategoryFetcher />
</>
</Suspense>
);
};

View File

@ -5,6 +5,7 @@
width: 100%;
margin: 0 0 0 0;
overflow: auto;
scrollbar-width: thin;
padding-bottom: 5rem !important;
border-radius: 12px;
height: 85vh;

View File

@ -7,6 +7,7 @@
overflow: auto;
margin-bottom: 2rem;
border-radius: 12px;
scrollbar-width: thin;
@media (max-width: 768px) {
margin: 10px 0 0 0;
@ -58,7 +59,7 @@
font-size: 13px;
border-radius: 8px;
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
> div:nth-child(1) {
@ -98,14 +99,14 @@
font-weight: 600;
color: #1f2937; // Dark gray, almost black
font-family:
'Poppins',
"Poppins",
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
sans-serif;
line-height: 1.2;
letter-spacing: -0.5px;
@ -116,7 +117,7 @@
font-size: 14px;
font-weight: 500;
color: #6c6c6c;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
line-height: 1.4;
letter-spacing: -0.5px;
margin-top: 2px;
@ -179,14 +180,14 @@
font-weight: 500;
color: #6c6c6c; // Gray text for inactive state
font-family:
'Poppins',
"Poppins",
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
sans-serif;
transition: all 0.2s ease;
}
@ -206,14 +207,14 @@
font-size: 20px;
font-weight: 600;
color: #1f2937;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
p {
// margin: 0 0 16px 0;
font-size: 13px;
color: #000000;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
line-height: 1.5;
}
@ -225,14 +226,14 @@
font-size: 14px;
color: #6c6c6c;
font-family:
'Poppins',
"Poppins",
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
sans-serif;
line-height: 1.6;
margin-bottom: 8px;
@ -288,7 +289,7 @@
padding: 4px 4px !important;
font-size: 12.5px;
font-weight: 500;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
.ant-select {
@ -324,7 +325,7 @@
border: none;
border-radius: 6px;
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
transition: all 0.2s ease;
flex-shrink: 0;
font-size: 24px;
@ -362,7 +363,7 @@
font-size: 13px;
letter-spacing: -0.3px;
color: #000000;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
}
@ -376,14 +377,14 @@
cursor: pointer;
transition: all 0.2s ease;
font-family:
'Poppins',
"Poppins",
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
sans-serif;
&:hover {
@ -398,7 +399,7 @@
border-radius: 6px;
font-size: 14px;
color: #374151;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
width: 190px;
&:focus {
@ -433,7 +434,7 @@
background-color: #2563ea !important;
height: 42px !important;
padding: 10px !important;
font-family: 'Poppins', sans-serif !important;
font-family: "Poppins", sans-serif !important;
}
button:nth-child(1) {
@ -452,7 +453,7 @@
cursor: pointer;
border-radius: 8px;
font-size: 14px;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
display: flex;
align-items: center;
gap: 6px;
@ -473,7 +474,7 @@
width: max-content;
.offercount {
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
font-size: 14px;
color: #878787;
}
@ -484,7 +485,7 @@
margin-top: 10px;
grid-column: 1 / -1;
background-color: #fff;
border-radius: 10px;
border-radius: 10px;
width: 100%;
.ant-table-thead {
position: unset !important;
@ -506,7 +507,7 @@
cursor: pointer;
font-size: 11px;
font-weight: 400;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
transition: all 0.2s ease;
&:hover {
@ -574,14 +575,14 @@
color: #374151;
border-bottom: 1px solid #e2e8f0;
font-family:
'Poppins',
"Poppins",
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
sans-serif;
}
@ -591,14 +592,14 @@
color: #374151;
border-bottom: 1px solid #e2e8f0;
font-family:
'Poppins',
"Poppins",
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
sans-serif;
}
@ -700,7 +701,7 @@
border: 1px solid #565656 !important;
border-radius: 8px;
font-size: 13px;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
&:focus {
outline: none;
@ -722,7 +723,7 @@
border: 1px solid #565656 !important;
border-radius: 8px;
font-size: 13px;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
&:focus {
outline: none;
@ -743,7 +744,7 @@
border-radius: 8px;
cursor: pointer;
font-size: 13px;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
svg {
width: 16px;
@ -768,7 +769,7 @@
border-radius: 10px;
font-size: 12px;
font-weight: 500;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
.chip-remove {
background: none;
@ -792,7 +793,7 @@
color: #6b7280;
margin-top: 6px;
margin-bottom: 0;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
.modal-button-group {
@ -809,7 +810,7 @@
color: #6b7280;
font-size: 14px;
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
.modal-submit-button {
@ -820,7 +821,7 @@
font-size: 13px;
border-radius: 8px;
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
.modal-title {
@ -829,7 +830,7 @@
color: #1f2937;
margin: 0 0 8px 0;
-webkit-text-stroke-width: 0.1px;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
.modal-label {
@ -838,7 +839,7 @@
font-weight: 500;
color: #374151;
margin-bottom: 8px;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
.modal-input-row {
@ -878,7 +879,7 @@
font-weight: 500;
border-radius: 6px;
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
.radio-options {
@ -897,14 +898,14 @@
gap: 10px;
font-size: 14px;
font-weight: 500;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
background-color: #2563ea1a;
border: 1px solid #2563ea40;
padding: 4px 8px;
border-radius: 6px;
color: #000000;
font-weight: 400;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
// -webkit-text-stroke-width: 0.2px;
}
@ -921,10 +922,10 @@
cursor: pointer;
font-size: 14px;
color: #374151;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
.radio-option input[type='radio'] {
.radio-option input[type="radio"] {
width: 16px;
height: 16px;
accent-color: #2563ea;
@ -939,7 +940,7 @@
font-weight: 500;
border-radius: 6px;
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
// Days Section Styles
@ -957,14 +958,14 @@
font-weight: 500;
color: #374151;
font-family:
'Poppins',
"Poppins",
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
sans-serif;
}
@ -978,14 +979,14 @@
cursor: pointer;
transition: all 0.2s ease;
font-family:
'Poppins',
"Poppins",
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
sans-serif;
&:hover {
@ -1015,17 +1016,17 @@
font-size: 14px;
color: #374151;
font-family:
'Poppins',
"Poppins",
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
sans-serif;
input[type='checkbox'] {
input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #3b82f6;
@ -1047,14 +1048,14 @@
font-size: 12px;
color: #6b7280;
font-family:
'Poppins',
"Poppins",
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
sans-serif;
}
}
@ -1067,14 +1068,14 @@
color: #374151;
background: #ffffff;
font-family:
'Poppins',
"Poppins",
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
sans-serif;
&:focus {
@ -1092,14 +1093,14 @@
font-weight: 500;
color: #2563ea;
font-family:
'Poppins',
"Poppins",
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
sans-serif;
margin-top: 8px;
}
@ -1107,11 +1108,11 @@
.days-selected {
font-size: 14px;
color: #6b7280;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
background-color: rgba(37, 99, 234, 0.1019607843);
padding: 8px 8px;
color: #2563ea;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
border-radius: 8px;
line-height: 1.5;
border: rgba(37, 99, 234, 0.4431372549) 1px solid;
@ -1148,7 +1149,7 @@
font-size: 13px;
font-weight: 400;
-webkit-text-stroke-width: 0.2px;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
position: relative;
bottom: 6px;
}
@ -1164,7 +1165,7 @@
background: rgba(37, 99, 234, 0.1019607843);
border: rgba(37, 99, 234, 0.4431372549) 1px solid;
border-radius: 6px;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
.applied-label {
@ -1247,7 +1248,7 @@
color: #000000;
-webkit-text-stroke-width: 0.2px;
margin-bottom: 0;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
display: flex;
align-items: center;
gap: 4px;
@ -1275,7 +1276,7 @@
padding: 4px 4px !important;
font-size: 12.5px;
font-weight: 500;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
}
@ -1283,7 +1284,7 @@
font-size: 14px;
color: #6b7280;
margin: 0;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
.mapping-label {
@ -1291,7 +1292,7 @@
font-size: 13px;
font-weight: 400;
color: #374151;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
.product-list {
@ -1308,7 +1309,7 @@
border-radius: 4px;
font-size: 14px;
color: #374151;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
display: flex;
align-items: center;
justify-content: space-between;
@ -1367,7 +1368,7 @@
font-weight: 400;
cursor: pointer;
transition: all 0.2s ease;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
&:hover {
background: #1d4ed8;
@ -1412,7 +1413,7 @@
background: #f3f4f6;
padding: 2px 8px;
border-radius: 12px;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
.OfferBreadcrumbs {
@ -1431,7 +1432,7 @@
gap: 2px;
font-size: 10px;
font-weight: 400;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
cursor: pointer;
color: #676767;
@ -1461,7 +1462,7 @@
font-weight: 400;
// -webkit-text-stroke-width: 0.1px;
transition: all 0.2s ease;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
&.active {
background: #2563ea;
@ -1517,7 +1518,7 @@
color: #1e1e1e;
margin: 17px 6px;
font-weight: 500;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
-webkit-text-stroke-width: 0.1px;
}
@ -1623,7 +1624,7 @@
cursor: pointer;
font-size: 12px;
font-weight: 400;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
transition: all 0.2s ease;
}
}
@ -1643,7 +1644,7 @@
border-radius: 6px;
transition: all 0.2s ease;
input[type='checkbox'] {
input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #2563ea;
@ -1673,7 +1674,7 @@
font-size: 12px;
-webkit-text-stroke-width: 0.1px;
font-weight: 500;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
.edit-days-button {
@ -1702,7 +1703,7 @@
font-size: 13px;
font-weight: 400;
-webkit-text-stroke-width: 0.2px;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
position: relative;
bottom: 6px;
}
@ -1717,7 +1718,7 @@
gap: 8px;
cursor: pointer;
input[type='radio'] {
input[type="radio"] {
width: 16px;
height: 16px;
accent-color: #2563ea;
@ -1727,7 +1728,7 @@
font-size: 12px;
color: #000000;
font-weight: 500;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
}
}
@ -1751,11 +1752,11 @@
.date-picker {
width: 100%;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
.ant-picker-input {
font-size: 14px;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
&:focus {
outline: none;
@ -1770,11 +1771,11 @@
// Override Ant Design default styles
.ant-picker {
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
.ant-picker-input > input {
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
}
}

View File

@ -5,6 +5,7 @@
width: 100%;
margin: 0 0 0 0;
overflow: auto;
scrollbar-width: thin;
margin-bottom: 2rem;
border-radius: 12px;

View File

@ -148,272 +148,240 @@
// );
// }
import React, { useRef, useState, useEffect } from "react";
import { BarcodeScanner } from "@capacitor-mlkit/barcode-scanning";
import { BsUpcScan } from "react-icons/bs";
import { Capacitor } from "@capacitor/core";
import { DefaultModal } from "../Components/Modal/DefaultModal";
import QrScanner from "qr-scanner/qr-scanner.min.js";
import {
BrowserMultiFormatReader,
BarcodeFormat,
} from "@zxing/library";
import React, { useRef, useState, useEffect } from 'react';
import { BarcodeScanner } from '@capacitor-mlkit/barcode-scanning';
import { BsUpcScan } from 'react-icons/bs';
import { Capacitor } from '@capacitor/core';
import { DefaultModal } from '../Components/Modal/DefaultModal';
import QrScanner from 'qr-scanner/qr-scanner.min.js';
import { BrowserMultiFormatReader, BarcodeFormat } from '@zxing/library';
QrScanner.WORKER_PATH = new URL(
"qr-scanner/qr-scanner-worker.min.js",
import.meta.url
'qr-scanner/qr-scanner-worker.min.js',
import.meta.url
).toString();
export default function BarCodeScan({ onScan }) {
const isMobileApp = Capacitor.getPlatform() !== "web";
const [scanning, setScanning] = useState(false);
const [modalOpen, setModalOpen] = useState(false);
const isMobileApp = Capacitor.getPlatform() !== 'web';
const [scanning, setScanning] = useState(false);
const [modalOpen, setModalOpen] = useState(false);
const videoRef = useRef(null);
const qrScannerRef = useRef(null);
const barcodeReaderRef = useRef(null);
const videoRef = useRef(null);
const qrScannerRef = useRef(null);
const barcodeReaderRef = useRef(null);
// -------------------------
// START SCAN
// -------------------------
const startScan = async () => {
if (scanning) return;
setScanning(true);
// -------------------------
// START SCAN
// -------------------------
const startScan = async () => {
if (scanning) return;
setScanning(true);
if (isMobileApp) {
try {
const perm = await BarcodeScanner.requestPermissions();
if (perm.camera !== "granted") {
alert("Camera permission not granted");
setScanning(false);
return;
}
const { barcodes } = await BarcodeScanner.scan();
if (barcodes?.length > 0) {
onScan(barcodes[0].rawValue);
}
} catch (err) {
console.error(err);
} finally {
setScanning(false);
}
} else {
setModalOpen(true);
}
};
// -------------------------
// START WEB SCAN (HYBRID)
// -------------------------
const startWebScan = async () => {
if (!videoRef.current) return;
// Start QR scanner (fast)
qrScannerRef.current = new QrScanner(
videoRef.current,
(result) => {
stopWebScan();
onScan(result.data);
setModalOpen(false);
},
{
maxScansPerSecond: 25,
}
);
await qrScannerRef.current.start();
// Start Barcode scanner (ZXing)
barcodeReaderRef.current = new BrowserMultiFormatReader(undefined, {
possibleFormats: [
BarcodeFormat.CODE_128,
BarcodeFormat.EAN_13,
BarcodeFormat.UPC_A,
BarcodeFormat.UPC_E,
],
});
barcodeReaderRef.current.timeBetweenDecodingAttempts = 50;
barcodeReaderRef.current.decodeFromVideoDevice(
null,
videoRef.current,
(result) => {
if (result) {
stopWebScan();
onScan(result.getText());
setModalOpen(false);
}
}
);
};
const stopWebScan = () => {
if (qrScannerRef.current) {
qrScannerRef.current.stop();
qrScannerRef.current.destroy();
qrScannerRef.current = null;
if (isMobileApp) {
try {
const perm = await BarcodeScanner.requestPermissions();
if (perm.camera !== 'granted') {
alert('Camera permission not granted');
setScanning(false);
return;
}
if (barcodeReaderRef.current) {
barcodeReaderRef.current.reset();
barcodeReaderRef.current = null;
const { barcodes } = await BarcodeScanner.scan();
if (barcodes?.length > 0) {
onScan(barcodes[0].rawValue);
}
} catch (err) {
console.error(err);
} finally {
setScanning(false);
};
}
} else {
setModalOpen(true);
}
};
const closeModal = () => {
// -------------------------
// START WEB SCAN (HYBRID)
// -------------------------
const startWebScan = async () => {
if (!videoRef.current) return;
// Start QR scanner (fast)
qrScannerRef.current = new QrScanner(
videoRef.current,
(result) => {
stopWebScan();
onScan(result.data);
setModalOpen(false);
};
},
{
maxScansPerSecond: 25,
}
);
useEffect(() => {
if (modalOpen) {
startWebScan();
await qrScannerRef.current.start();
// Start Barcode scanner (ZXing)
barcodeReaderRef.current = new BrowserMultiFormatReader(undefined, {
possibleFormats: [
BarcodeFormat.CODE_128,
BarcodeFormat.EAN_13,
BarcodeFormat.UPC_A,
BarcodeFormat.UPC_E,
],
});
barcodeReaderRef.current.timeBetweenDecodingAttempts = 50;
barcodeReaderRef.current.decodeFromVideoDevice(
null,
videoRef.current,
(result) => {
if (result) {
stopWebScan();
onScan(result.getText());
setModalOpen(false);
}
}, [modalOpen]);
}
);
};
useEffect(() => {
return () => stopWebScan();
}, []);
const stopWebScan = () => {
if (qrScannerRef.current) {
qrScannerRef.current.stop();
qrScannerRef.current.destroy();
qrScannerRef.current = null;
}
return (
<div style={{ display: "flex", justifyContent: "center", padding: 20 }}>
{!scanning && (
<BsUpcScan
onClick={startScan}
style={{
fontSize: 32,
color: "#007bff",
cursor: "pointer",
}}
/>
)}
if (barcodeReaderRef.current) {
barcodeReaderRef.current.reset();
barcodeReaderRef.current = null;
}
{/* <DefaultModal
title="QR / Barcode Reader"
width={500}
open={modalOpen}
footer={false}
handleCancel={closeModal}
>
<div style={{ display: "flex", justifyContent: "center" }}>
<video
ref={videoRef}
style={{
width: "100%",
maxWidth: 400,
borderRadius: 8,
}}
/>
</div>
setScanning(false);
};
<button
onClick={closeModal}
style={{
marginTop: 20,
padding: "10px 20px",
fontSize: 16,
borderRadius: 8,
border: "none",
cursor: "pointer",
}}
>
Close
</button>
</DefaultModal> */}
<DefaultModal
title="QR / Barcode Reader"
width={500}
open={modalOpen}
footer={false}
handleCancel={closeModal}
>
const closeModal = () => {
stopWebScan();
setModalOpen(false);
};
useEffect(() => {
if (modalOpen) {
startWebScan();
}
}, [modalOpen]);
useEffect(() => {
return () => stopWebScan();
}, []);
return (
<div
style={{
position: "relative",
width: "100%",
maxWidth: 400,
margin: "auto",
}}
className="BarCodeScanMaster"
style={{ display: 'flex', justifyContent: 'center', padding: 20 }}
>
{/* VIDEO */}
<video
{!scanning && (
<BsUpcScan
onClick={startScan}
style={{
fontSize: 32,
color: '#007bff',
cursor: 'pointer',
}}
/>
)}
<DefaultModal
title="QR / Barcode Reader"
width={500}
open={modalOpen}
footer={false}
handleCancel={closeModal}
>
<div
style={{
position: 'relative',
width: '100%',
maxWidth: 400,
margin: 'auto',
}}
>
{/* VIDEO */}
<video
ref={videoRef}
style={{
width: "100%",
borderRadius: 8,
width: '100%',
borderRadius: 8,
}}
/>
/>
{/* DARK OVERLAY */}
<div
{/* DARK OVERLAY */}
<div
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
background: "rgba(0,0,0,0.5)",
borderRadius: 8,
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
background: 'rgba(0,0,0,0.5)',
borderRadius: 8,
}}
/>
/>
{/* SCAN BOX */}
<div
{/* SCAN BOX */}
<div
style={{
position: "absolute",
top: "50%",
left: "50%",
width: "70%",
height: "60%",
transform: "translate(-50%, -50%)",
border: "3px solid #00ff00",
borderRadius: 12,
boxShadow: "0 0 0 2000px rgba(0,0,0,0.4)",
position: 'absolute',
top: '50%',
left: '50%',
width: '70%',
height: '60%',
transform: 'translate(-50%, -50%)',
border: '3px solid #00ff00',
borderRadius: 12,
boxShadow: '0 0 0 2000px rgba(0,0,0,0.4)',
}}
/>
/>
{/* SCAN LINE */}
<div
{/* SCAN LINE */}
<div
style={{
position: "absolute",
left: "15%",
width: "70%",
height: 2,
background: "red",
animation: "scanAnimation 2s infinite linear",
position: 'absolute',
left: '15%',
width: '70%',
height: 2,
background: 'red',
animation: 'scanAnimation 2s infinite linear',
}}
/>
</div>
/>
</div>
<button
onClick={closeModal}
style={{
<button
onClick={closeModal}
style={{
marginTop: 20,
padding: "10px 20px",
padding: '10px 20px',
fontSize: 16,
borderRadius: 8,
border: "none",
cursor: "pointer",
}}
>
Close
</button>
border: 'none',
cursor: 'pointer',
}}
>
Close
</button>
{/* Animation */}
<style>
{`
{/* Animation */}
<style>
{`
@keyframes scanAnimation {
0% { top: 25%; }
50% { top: 70%; }
100% { top: 25%; }
}
`}
</style>
</DefaultModal>
</div>
);
}
</style>
</DefaultModal>
</div>
);
}

View File

@ -6,19 +6,9 @@
.BSLayout6-fullbody {
height: 99.3vh;
//nk
// height: 99vh;
//
overflow: hidden;
}
// nk
// .BSLayout6-fullbody .BSBTOverall6-defaultscreen
// {
// height: clamp(40vh,80vh, 100vh) !important;
// }
//
.BSLayout6-fullbody .BSBilling4TableCont-default {
height: 83vh;
}
@ -98,7 +88,6 @@
.BSBill-Table4 th {
border-spacing: 0;
// color: #fff;
text-align: center;
font-size: 16px;
font-style: normal;
@ -114,11 +103,6 @@
padding: 4px;
}
// .Table4-item-price {
// font-size: 14px;
// font-style: normal;
// font-weight: 600;
// }
.BSBill4-item-extraprice {
color: #007e1c;
font-size: 14px;
@ -144,9 +128,6 @@
}
.BSBilling4-down-content {
// flex-wrap: wrap;
// display: flex;
// position: fixed;
bottom: 0;
width: inherit;
background-color: white;
@ -163,7 +144,6 @@
width: 100%;
row-gap: 0rem;
box-shadow: var(--BOX_SHADOW_LEVEL2);
// flex-direction: column;
}
.BSBilling4-customer {
@ -186,10 +166,7 @@
.Table4-price {
display: flex;
flex-wrap: wrap;
//vic
margin-right: 26px;
// background-color:white;
}
.Table4-price-fullflex {
@ -202,9 +179,7 @@
width: 100%;
}
.Table4-customer
.ant-select-single:not(.ant-select-customize-input)
.ant-select-selector {
.Table4-customer .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
width: 10rem;
height: 2rem;
text-align: center;
@ -216,9 +191,7 @@
font-weight: 600;
}
.Table4-customer
.ant-select-single.ant-select-show-arrow
.ant-select-selection-placeholder {
.Table4-customer .ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
color: #000;
padding-inline-end: 0px !important;
}
@ -236,13 +209,11 @@
justify-content: center;
flex-direction: row;
column-gap: 1rem;
// width:38%;
}
.Table4-cash {
display: flex;
width: 60px;
// margin: 5px 5px;
}
.Table4-Btn-payment-mode {
@ -268,8 +239,6 @@
font-size: 14px;
font-style: normal;
font-weight: 600;
// padding: 10px 10px;
// margin: 10px 10px;
}
.Table4-vertical-line {
@ -324,7 +293,7 @@
.Table4-rate {
display: flex;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
font-size: 23px;
font-style: normal;
font-weight: 600;
@ -332,7 +301,6 @@
.Table4-td-names {
text-align: left;
// font-size: 14px;
font-weight: 600;
}
@ -346,7 +314,6 @@
display: flex;
justify-content: space-between;
flex-direction: column;
// row-gap: 1rem;
}
@media (min-width: 280px) and (max-width: 499px) {
@ -355,23 +322,11 @@
padding: 0;
}
// .BSLayout6-fullbody .bsbilltable7 .Table3-Price-summarypopfullscrn {
// display: none;
// }
// .Table4-Price-div{
// display: none !important;
// }
// .Table4-payment-mode {
// // width:55% !important
// }
.T4PTable {
display: flex;
}
.Table4-total-price {
// display: flex;
justify-content: space-between;
}
@ -400,7 +355,6 @@
@media (max-width: 500px) {
.Table4-td-names {
text-align: left;
// font-size: 10px !important;
font-weight: 600;
}
@ -414,7 +368,6 @@
.Table4-price {
display: revert;
//vic
margin-right: 0 !important;
}
@ -432,9 +385,7 @@
border-radius: 20px !important;
}
.Table4-customer
.ant-select-single:not(.ant-select-customize-input)
.ant-select-selector {
.Table4-customer .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
width: 8rem !important;
font-size: 8px !important;
}
@ -446,7 +397,6 @@
.Table4-price {
justify-content: center;
//vic
margin-left: 6px !important;
margin-right: 0 !important;
}
@ -496,13 +446,9 @@
.BSBilling4-vertical-line {
width: 1px;
/* Adjust the width as needed */
height: 100%;
/* This will make the line span the entire height of its container */
background-color: #000;
/* Change the background color to your desired color */
margin: 0 10px;
/* Adjust margin as needed to position the line */
}
// MobileScreen design
@ -516,10 +462,7 @@
flex-direction: column;
row-gap: 1rem;
justify-content: space-between;
// height: inherit ;
overflow: auto;
// height: 85vh;
//vm
height: 80vh;
}
@ -538,8 +481,6 @@
}
.BSBill-Table4 {
// width: 95vw;
//vic
width: 100vw;
border-spacing: 0 4px;
text-align: center;
@ -547,23 +488,12 @@
.BSBill-Table4 th {
border-spacing: 0;
// color: #fff;
text-align: center;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
// .BSBillingDefault-table {
// display: none;
// }
// .BSBilling4-down-content{
// display: none !important;
// }
// .BSLayout6table-fulldiv{
// display: none !important;
// }
.BSBillingDefault-table {
display: none;
}
@ -604,10 +534,6 @@
flex-direction: row;
column-gap: 1rem;
padding: 1rem 1rem;
// nk
// padding: 1rem 1rem;
//
// width:65%;
}
.BSBilling4-price-full {
@ -620,7 +546,6 @@
display: flex;
width: 100%;
// background-color: white;
}
.Table4-Btn-final-price {
@ -656,12 +581,7 @@
.BSBilling4-price-content {
display: flex;
flex-direction: column !important;
// row-gap: 0.5rem !important;
//vic
row-gap: 0.3rem !important;
// nk
// row-gap: 1rem !important;
//
align-items: center;
background-color: #fff;
}
@ -697,7 +617,7 @@
.Table4-item-price {
text-align: center;
font-family: 'Gilroy-Medium';
font-family: "Gilroy-Medium";
font-size: 14px;
text-align: right;
font-weight: 600;
@ -705,8 +625,6 @@
@media (min-width: 280px) and (max-width: 499px) {
.BSBill-Table4 {
// width: 95vw;
//vic
width: 100vw;
border-spacing: 0 4px;
text-align: center;
@ -763,17 +681,8 @@
flex-direction: row;
column-gap: 0.5rem;
padding: 0.4rem 1rem;
// nk
// padding: 1rem 1rem;
//
// width:65%;
}
// .Table4-price-icon-container {
// row-gap: 0 !important;
// flex-wrap: wrap !important;
// }
//nk
.Table4-price-icon-container {
row-gap: 0 !important;
flex-wrap: wrap !important;
@ -795,9 +704,6 @@
display: flex;
flex-direction: column !important;
row-gap: 0rem !important;
// nk
// row-gap: 1rem !important;
//
}
.Table4-price {
@ -848,10 +754,6 @@
}
@media (min-width: 500px) and (max-width: 768px) {
// .Table4-price-icon-container {
// width: 100vw;
// }
//nk
.Table4-price-icon-container {
width: 100vw;
flex-direction: column;

View File

@ -2,13 +2,14 @@
font-family: "Poppins", sans-serif;
}
.BSBilling3div {
.BSBilling3PayMaster {
display: flex;
flex-grow: 1;
height: inherit;
background-color: #fff;
padding: 0.5rem 0.3rem;
padding: 0.3rem 0.3rem;
border-top: 1px solid #b5b5b5;
gap: 4px;
}
.BSBill-Table3 {
@ -53,7 +54,7 @@
align-items: center;
flex-direction: column;
justify-content: space-evenly;
row-gap: 0.3rem;
gap: 0.3rem;
column-gap: 1rem;
width: 100%;
background-color: #fff;
@ -90,21 +91,10 @@
.Table3-payment-mode {
display: flex;
justify-content: space-between;
justify-content: center;
gap: 6px;
padding: 0.5rem 0rem;
width: 100%;
.Table3-cash {
width: 30% !important;
flex: 1;
.Btn-payment-mode {
width: 100% !important;
}
.Btn-payment-mode-sel {
width: 100%;
}
}
}
.Btn-payment-mode {
@ -120,6 +110,7 @@
border-radius: 4.982px;
padding: 5px 6px;
height: 2rem;
width: max-content;
}
.Btn-payment-mode-sel {
@ -134,6 +125,7 @@
column-gap: 0rem;
border-radius: 4.982px;
padding: 5px 6px;
height: 2rem;
}
.Btn-payment-mode-notupisel {
@ -160,7 +152,7 @@
.Table3-vertical-line {
border: 0.83px solid rgb(175, 173, 173);
margin: 1px 10px;
margin: 1px 4px;
}
.Table3-Price-div {
@ -259,7 +251,7 @@
font-family: "Gilroy-Medium";
align-items: right;
text-align: left;
font-weight: 600;
font-weight: 500;
}
.Table3-item-price {
@ -534,7 +526,7 @@
transition-duration: 0.2s;
}
.BSBilling3div .field-DropDown {
.BSBilling3PayMaster .field-DropDown {
width: 180px !important;
}
@ -746,7 +738,7 @@
font-size: 10px;
}
.BSBilling3div {
.BSBilling3PayMaster {
position: fixed;
bottom: 0;
display: flex;

View File

@ -5,6 +5,7 @@
height: 40px;
background-color: #ffffff;
box-shadow: var(--BOX_SHADOW_LEVEL2);
padding: 0 6px;
}
.BSBillingNav1div2 {
@ -26,6 +27,14 @@
text-align: center;
}
}
.RiVerifiedBadgeFill {
width: 30px;
height: 30px;
border-radius: 6px;
background-color: #1292ee;
padding: 4px;
cursor: pointer;
}
}
.BSBillingNavBar1-SearchBar {
@ -70,6 +79,9 @@
color: #fbbf24;
}
}
@media (max-width: 1200px) {
column-gap: 1.2rem;
}
}
.BSBillingnav1-threedots {
@ -116,7 +128,6 @@
.BSBillingNavBar1-AllIcons {
display: none;
column-gap: 1.5rem;
}
.BSBillingNavBar1-smallscreen-Inputsearch-container {
@ -200,6 +211,7 @@
height: 100vh !important;
overflow: scroll;
padding-bottom: 20rem;
scrollbar-width: thin;
}
// user detail style
@ -441,7 +453,7 @@
justify-content: center;
cursor: pointer;
width: 35px !important;
height: 35px;
height: 33px;
padding: 6px;
svg {
@ -488,3 +500,27 @@
background-position: center;
}
}
.Navbar1SearchCombo {
.ant-select.ant-select-in-form-item {
width: 25vw !important;
}
.ant-form-item {
margin-bottom: -10px;
}
}
.NavbarDivForSearch {
display: flex;
align-items: center;
column-gap: 4px;
position: relative;
.BarCodeScanMaster {
position: absolute;
right: 10px;
top: 20%;
padding: 0 !important;
svg {
height: 20px;
width: 20px;
}
}
}

View File

@ -1,9 +1,8 @@
// split payment dropdown size reduce
.SplitPay {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 5px;
gap: 12px;
// align-items: center;
& .field-DropDown {
@ -56,6 +55,7 @@
width: 50px;
align-items: center;
justify-content: space-around;
font-family: "Poppins";
}
.Splitbutton-diabled {
@ -72,6 +72,7 @@
align-items: center;
justify-content: space-around;
pointer-events: none;
font-family: "Poppins";
}
.custom-radio-group .ant-radio-button-wrapper-checked {

View File

@ -48,6 +48,7 @@
width: 50px;
align-items: center;
justify-content: space-around;
font-family: "Poppins";
}
.Splitbutton-diabled {
display: flex;
@ -63,13 +64,10 @@
align-items: center;
justify-content: space-around;
pointer-events: none;
font-family: "Poppins";
}
.custom-radio-group .ant-radio-button-wrapper-checked {
background-color: rgb(
55,
148,
60
) !important; /* Change this to your desired color */
background-color: rgb(55, 148, 60) !important; /* Change this to your desired color */
color: white; /* Text color */
border-color: rgb(55, 148, 60) !important; /* Border color */
}

View File

@ -198,21 +198,17 @@
}
}
//sree
.bsreprintmodaltable-flex {
display: flex;
align-items: center;
// justify-content: space-between;
/* pushes them apart */
gap: 16px;
/* space between date picker & search */
flex-wrap: wrap;
margin-bottom: 16px;
}
.bsreprintmodaltable-search input {
font-family: "Poppins";
width: 250px;
width: 220px;
padding: 4px 14px;
border: 1px solid #ccc;
border-radius: 6px;

View File

@ -24,16 +24,16 @@
table {
tbody {
>tr {
> tr {
box-shadow: unset !important;
border-bottom: unset !important;
}
>tr:nth-child(even) {
> tr:nth-child(even) {
background-color: #4b4b4b49 !important;
}
>tr:nth-child(odd) {
> tr:nth-child(odd) {
background-color: #ffffff00 !important;
}
}
@ -87,7 +87,7 @@
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid #e9ecef;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
font-size: 15px;
font-weight: 500;
width: 100%;
@ -191,6 +191,9 @@
color: #ffffff !important;
}
}
.ant-tabs-tab {
background-color: rgb(0 0 0 / 15%) !important;
}
.ant-tabs-tab:hover {
background-color: #2c5282 !important;
@ -199,5 +202,5 @@
}
.printer-settings-tabs {
font-family: 'Poppins';
}
font-family: "Poppins";
}

View File

@ -600,6 +600,9 @@
height: 70vh;
overflow: auto;
scrollbar-width: thin;
.ant-table-thead tr {
background-color: #2c88ee !important;
}
}
.requiredIcons {

View File

@ -12,8 +12,6 @@
.Quotation-table {
width: 100%;
height: 45vh;
// overflow: scroll;
@media (max-width: 768px) {
overflow: auto !important;
scrollbar-width: thin;
@ -73,6 +71,7 @@
overflow: scroll;
row-gap: 1.5rem;
padding-bottom: 4rem;
scrollbar-width: thin;
@media (max-width: 768px) {
padding-bottom: 4rem;
@ -84,9 +83,6 @@
flex-grow: 1;
justify-content: flex-end;
width: 100%;
// position: fixed;
// bottom: 10px;
// right: 100px;
}
.ant-table-wrapper .ant-table-tbody > tr.ant-table-row:hover > td,
@ -105,14 +101,9 @@
}
.Quotation-table {
// width: 70px;
.ant-table table {
border-spacing: 0px;
}
// .ant-table-wrapper table{
// width: 84% !important;
// }
}
.Quotation-summary {

View File

@ -10,6 +10,12 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
const queryClient = new QueryClient();
// Un Command This line when deployed in App Server
window.addEventListener('beforeunload', (e) => {
e.preventDefault();
e.returnValue = '';
});
ReactDOM.createRoot(document.getElementById('root')).render(
<QueryClientProvider client={queryClient}>
<Provider store={store}>