1002 lines
34 KiB
JavaScript
1002 lines
34 KiB
JavaScript
import { useEffect, useState, useMemo } from 'react';
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
import { FaChartLine, FaRupeeSign } from 'react-icons/fa';
|
|
import { Badge, DatePicker, Popconfirm, Tooltip } from 'antd';
|
|
import { isMobile } from 'react-device-detect';
|
|
import { ApplicationPreferences } from '../../../Features/BrachLogin/BranchLogin';
|
|
import {
|
|
getPreferenceData,
|
|
GlobalOrderStatus,
|
|
GlobalOtherSevices,
|
|
GlobalSalesDetailData,
|
|
} from '../../../Features/BookingScreen/BookingData/BookingData';
|
|
import { extractLastNumberOrderId, getSession } from '../../../Services/Others';
|
|
import { useDateStore } from '../../../Features/BookingScreen/BookingData/DateStore';
|
|
import dayjs from 'dayjs';
|
|
import moment from 'moment';
|
|
import { BsUiChecks } from 'react-icons/bs';
|
|
import { FaCheckToSlot } from 'react-icons/fa6';
|
|
import PozoKioskIcon from '../Components/UtillComponents/Pozo retail icons/PozoKioskIcon';
|
|
import { globalKioskSalesCount } from '../../../Features/Kiosk/kiosk';
|
|
import BSKioskCounterPayment from '../Components/UtillComponents/BSKioskCounterPayment';
|
|
import BSExpireProductsList from '../Components/UtillComponents/BSExpireProductsList';
|
|
import TooltipWrapper from '../../../Components/Tooltip/Tooltip';
|
|
import { StoredSessionData } from '../../../Features/ThemeChange/ThemeChange';
|
|
import BookingCloseIcon from '../Components/UtillComponents/BookingCloseIcon';
|
|
import RetailBookingClosing from './RetailBookingClose';
|
|
import {
|
|
getBookingStatus,
|
|
GlobalBookingStatus,
|
|
} from '../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail';
|
|
import { PutBookingClose } from '../../../Features/BookingScreen/RetailBookingClose';
|
|
import BSEwayBillicon from '../../BookingScreen/Components/UtillComponents/BSEwayBillicon.jsx';
|
|
import ListOfSalesInvoices from '../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx';
|
|
import { DefaultModal } from '../../../Components/Modal/DefaultModal.jsx';
|
|
|
|
const SalesCountForStandard = ({
|
|
DineInAccess,
|
|
GlobalsalesDetailData,
|
|
PricingAppPricingName,
|
|
}) => {
|
|
const dispatch = useDispatch();
|
|
|
|
const AppId = getSession('AppId');
|
|
const CompId = getSession('CompId');
|
|
const BranchId = getSession('BranchId');
|
|
const UserId = getSession('UserId');
|
|
const [allowDecimal, setAllowDecimal] = useState(false);
|
|
const [BookingModalOpen, setBookingModalOpen] = useState(false);
|
|
const [ListOfInvoices, setListOfInvoices] = useState(false);
|
|
const { selectedDate, setSelectedDate } = useDateStore();
|
|
const [Kioskopen, setKioskopen] = useState(false);
|
|
const badgeCount = useSelector(globalKioskSalesCount);
|
|
const OtherServicesglobal = useSelector(GlobalOtherSevices);
|
|
const appPreferences = useSelector(ApplicationPreferences);
|
|
const SessionData = useSelector(StoredSessionData);
|
|
const OrderStatus = useSelector(GlobalOrderStatus);
|
|
const dailySalesData = useSelector(GlobalSalesDetailData);
|
|
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [isNetAmtModalOpen, setIsNetAmtModalOpen] = useState(false);
|
|
|
|
const bookings = dailySalesData?.[0]?.BookedDetails;
|
|
const orderDetails = dailySalesData?.[0]?.OrderDetails;
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const rowsPerPage = 10;
|
|
|
|
const totalPages = Math.ceil((bookings?.length || 0) / rowsPerPage);
|
|
const startIndex = (currentPage - 1) * rowsPerPage;
|
|
const currentData = bookings?.slice(startIndex, startIndex + rowsPerPage);
|
|
|
|
console.log(dailySalesData, 'dailySalesDatadailySalesData', bookings);
|
|
|
|
const bookingTypePreference =
|
|
appPreferences?.find((p) => p?.PreferredCatName === 'Booking Type')
|
|
?.PreferenceCatDetails || [];
|
|
|
|
const dinePreference = bookingTypePreference.find(
|
|
(p) =>
|
|
p?.PreferredSubCatName?.toLowerCase() === 'dine in' &&
|
|
p?.PreferredStatus === 'Y'
|
|
);
|
|
const takeAwayPreference = bookingTypePreference.find(
|
|
(p) =>
|
|
p?.PreferredSubCatName?.toLowerCase() === 'take away' &&
|
|
p?.PreferredStatus === 'Y'
|
|
);
|
|
const commonModulePreference = appPreferences?.find(
|
|
(preference) => preference?.PreferredCatName === 'Common Module'
|
|
)?.PreferenceCatDetails;
|
|
const sportsAppPreference = commonModulePreference?.find(
|
|
(preference) =>
|
|
preference?.PreferredSubCatName === 'SportsApp' &&
|
|
preference?.PreferredStatus === 'Y'
|
|
);
|
|
const salespagefields = appPreferences?.find(
|
|
(pref) => pref?.PreferredCatName === 'Sales Page Fields'
|
|
)?.PreferenceCatDetails;
|
|
const AvailableDate = salespagefields?.find(
|
|
(type) =>
|
|
type?.PreferredSubCatName?.toLowerCase() === 'available date' &&
|
|
type?.PreferredStatus === 'Y'
|
|
);
|
|
const { isBulk, setIsBulk } = useDateStore();
|
|
const BookingStatus = useSelector(GlobalBookingStatus);
|
|
const CheckBookingStatus =
|
|
BookingStatus?.find((item) => item.ScreenType === 'Booking')
|
|
?.ScreenStatus ?? 'Open';
|
|
|
|
const sales = GlobalsalesDetailData?.[0] || {};
|
|
const {
|
|
DineInOrderCount = 0,
|
|
TakeAwayOrderCount = 0,
|
|
OverAllOrderCount = 0,
|
|
SelfDineInOrderCount = 0,
|
|
SelfTakeAwayOrderCount = 0,
|
|
DineInAmount = 0,
|
|
TakeAwayAmount = 0,
|
|
OverAllTakeAwayOfferAmount = 0,
|
|
OverAllDineInOfferAmount = 0,
|
|
SelfTakeAwayAmount = 0,
|
|
SelfDineInAmount = 0,
|
|
PreOrderAmount = 0,
|
|
} = sales;
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
const { data: res } = await dispatch(
|
|
getPreferenceData({ AppId, CompId, BranchId })
|
|
).unwrap();
|
|
const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find(
|
|
(s) =>
|
|
s?.SettingIdName?.toLowerCase() === 'decimal' &&
|
|
s?.SettingValue === 'Y'
|
|
);
|
|
setAllowDecimal(!!decimalSetting);
|
|
})();
|
|
}, []);
|
|
// useEffect(() => {
|
|
// if (!selectedDate || (Array.isArray(selectedDate) && selectedDate.length === 0)) {
|
|
// setSelectedDate(dayjs());
|
|
// }
|
|
// }, [selectedDate, setSelectedDate]);
|
|
useEffect(() => {
|
|
if (AppId && CompId && BranchId && UserId) {
|
|
fetchBookingStatus();
|
|
}
|
|
}, [AppId, CompId, BranchId, UserId]);
|
|
const safeRound = (value) => {
|
|
const num = Number(String(value).replace(/[^0-9.-]+/g, ''));
|
|
if (isNaN(num)) return allowDecimal ? '0.00' : '0';
|
|
return allowDecimal ? num.toFixed(2) : Math.round(num).toString();
|
|
};
|
|
const disablePastDates = (current) => {
|
|
return current && current < moment().startOf('day');
|
|
};
|
|
const totalTakeAway =
|
|
TakeAwayAmount +
|
|
SelfTakeAwayAmount +
|
|
PreOrderAmount -
|
|
OverAllTakeAwayOfferAmount;
|
|
const totalDineIn =
|
|
DineInAmount + SelfDineInAmount - OverAllDineInOfferAmount;
|
|
const netAmount = totalTakeAway + totalDineIn;
|
|
|
|
const showSalesTooltip = useMemo(() => {
|
|
return (
|
|
DineInAccess?.SettingValue === 'Y' &&
|
|
DineInOrderCount +
|
|
TakeAwayOrderCount +
|
|
SelfTakeAwayOrderCount +
|
|
SelfDineInOrderCount >
|
|
0 &&
|
|
(takeAwayPreference || dinePreference)
|
|
);
|
|
}, [DineInAccess, sales, dinePreference, takeAwayPreference]);
|
|
|
|
const renderBreakdown = (labelMap) => (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
|
<div style={{ display: 'flex', gap: '1rem' }}>
|
|
<div>
|
|
{labelMap.map(
|
|
(item) => item.value !== 0 && <p key={item.label}>{item.label}</p>
|
|
)}
|
|
</div>
|
|
<div style={{ textAlign: 'right' }}>
|
|
{labelMap.map(
|
|
(item) =>
|
|
item.value !== 0 && (
|
|
<p key={item.label}>{safeRound(item.value)}</p>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div style={{ borderBottom: '1px dotted #fff', height: 0 }} />
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'flex-end',
|
|
gap: '1rem',
|
|
fontSize: '16px',
|
|
fontWeight: '600',
|
|
fontFamily: 'Poppins',
|
|
}}
|
|
>
|
|
<div>Total</div>
|
|
<div>
|
|
{safeRound(
|
|
labelMap.reduce(
|
|
(sum, item) => sum + (item.includeInTotal ? item.value : 0),
|
|
0
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// Fix: Convert string dates to dayjs objects for the DatePicker
|
|
const getDatePickerValue = () => {
|
|
if (!selectedDate) return isBulk ? [] : null;
|
|
console.log(selectedDate, 'selectedDate');
|
|
if (isBulk) {
|
|
// For bulk mode, convert string array to dayjs objects array
|
|
if (Array.isArray(selectedDate)) {
|
|
return selectedDate.map((date) => dayjs(date));
|
|
}
|
|
return [];
|
|
} else {
|
|
// For single date mode, handle both string and dayjs object
|
|
if (Array.isArray(selectedDate) && selectedDate.length > 0) {
|
|
return dayjs(selectedDate[0]);
|
|
}
|
|
return dayjs(selectedDate);
|
|
}
|
|
};
|
|
|
|
const handleDateChange = (dateOrDates) => {
|
|
if (isBulk) {
|
|
// For bulk mode, convert dayjs objects to string format
|
|
const formattedDates = dateOrDates
|
|
? dateOrDates.map((d) => d.format('YYYY-MM-DD'))
|
|
: [];
|
|
setSelectedDate(formattedDates);
|
|
} else {
|
|
// For single date mode
|
|
if (dateOrDates) {
|
|
setSelectedDate(dateOrDates);
|
|
} else {
|
|
setSelectedDate([]);
|
|
}
|
|
}
|
|
};
|
|
const fetchBookingStatus = async () => {
|
|
let data = {
|
|
CompId: CompId,
|
|
BranchId: BranchId,
|
|
AppId: AppId,
|
|
UserId: UserId,
|
|
};
|
|
await dispatch(getBookingStatus(data));
|
|
};
|
|
const BookingOpenFun = async (status) => {
|
|
let Postdata = {
|
|
AppId: AppId,
|
|
CompId: CompId,
|
|
BranchId: BranchId,
|
|
UserId: UserId,
|
|
ScreenType: 'Booking',
|
|
ScreenStatus: status,
|
|
CreatedBy: UserId,
|
|
Date: new Date(),
|
|
};
|
|
let Postresponse = await dispatch(PutBookingClose(Postdata)).unwrap();
|
|
if (Postresponse?.data?.statusCode === 1) {
|
|
fetchBookingStatus();
|
|
} else {
|
|
}
|
|
};
|
|
const openModalKiosk = () => {
|
|
setKioskopen(true);
|
|
};
|
|
const closeModalKiosk = () => {
|
|
setKioskopen(false);
|
|
};
|
|
|
|
const OpenBookingModal = () => {
|
|
setBookingModalOpen(true);
|
|
};
|
|
const HandleBookingModalClose = () => {
|
|
setBookingModalOpen(false);
|
|
};
|
|
|
|
const OpenListOfInvoices = () => {
|
|
setListOfInvoices(true);
|
|
};
|
|
const handleInvoiceClose = () => {
|
|
setListOfInvoices(false);
|
|
};
|
|
return (
|
|
<div className="NewLayoutBillContainer">
|
|
<div className="LicenseActive">
|
|
{/* { AvailableDate && <div>
|
|
{isBulk ? <BsUiChecks size={28} onClick={() => {
|
|
setIsBulk(!isBulk);
|
|
setSelectedDate([]);
|
|
}} /> : <FaCheckToSlot size={25} onClick={() => {
|
|
setIsBulk(!isBulk);
|
|
setSelectedDate([]);
|
|
}} />}
|
|
</div>} */}
|
|
|
|
{/* <div>
|
|
{AvailableDate && !isBulk &&
|
|
<div style={{ padding: '3px 5px', marginLeft: '1rem' }}>
|
|
<DatePicker
|
|
disabledDate={disablePastDates}
|
|
format="DD-MMM-YYYY"
|
|
value={getDatePickerValue()}
|
|
onChange={handleDateChange}
|
|
/>
|
|
</div>
|
|
}
|
|
|
|
{isBulk && AvailableDate && (
|
|
<div style={{ padding: '3px 5px', marginLeft: '1rem' }}>
|
|
<DatePicker
|
|
multiple
|
|
value={getDatePickerValue()}
|
|
onChange={handleDateChange}
|
|
format="DD-MMM-YYYY"
|
|
placeholder="Select multiple dates"
|
|
style={{ height: 30, fontSize: 12 }}
|
|
disabledDate={disablePastDates}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div> */}
|
|
<div>
|
|
{showSalesTooltip ? (
|
|
<Tooltip
|
|
className="NetAmountNew"
|
|
placement="bottom"
|
|
title={
|
|
<div style={{ display: 'flex', gap: '1rem' }}>
|
|
{takeAwayPreference && (
|
|
<div style={{ display: 'flex', gap: '5px' }}>
|
|
<div>Takeaway:</div>
|
|
<div>{TakeAwayOrderCount + SelfTakeAwayOrderCount}</div>
|
|
</div>
|
|
)}
|
|
{dinePreference && (
|
|
<div style={{ display: 'flex', gap: '5px' }}>
|
|
<div>Dine-in:</div>
|
|
<div>{DineInOrderCount + SelfDineInOrderCount}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
}
|
|
onClick={() =>
|
|
OverAllOrderCount || (0 > 0 && setIsModalOpen(true))
|
|
}
|
|
>
|
|
<FaChartLine color="#ffffffff" />
|
|
<div className="NetAmountNew">
|
|
{isMobile ? 'Count' : 'Sales Count'} : {OverAllOrderCount}
|
|
</div>
|
|
</Tooltip>
|
|
) : (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
gap: '5px',
|
|
alignItems: 'center',
|
|
fontSize: '0.9rem',
|
|
cursor: 'pointer',
|
|
}}
|
|
onClick={() =>
|
|
OverAllOrderCount || (0 > 0 && setIsModalOpen(true))
|
|
}
|
|
>
|
|
<FaChartLine color="#ffffffff" />
|
|
<div className="NetAmountNew">
|
|
{isMobile ? 'Count' : 'Sales Count'} : {OverAllOrderCount}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Rest of your component remains the same */}
|
|
{DineInAccess?.SettingValue === 'Y' &&
|
|
takeAwayPreference &&
|
|
(TakeAwayOrderCount || SelfTakeAwayOrderCount || PreOrderAmount) >
|
|
0 && (
|
|
<Tooltip
|
|
className="standardTooltipDineIN"
|
|
title={renderBreakdown([
|
|
{
|
|
label: 'Admin + Staff :',
|
|
value: TakeAwayAmount,
|
|
includeInTotal: true,
|
|
},
|
|
{
|
|
label: 'Self Booking :',
|
|
value: SelfTakeAwayAmount,
|
|
includeInTotal: true,
|
|
},
|
|
{
|
|
label: 'Preorder :',
|
|
value: PreOrderAmount,
|
|
includeInTotal: true,
|
|
},
|
|
{
|
|
label: 'Offer(-) :',
|
|
value: -OverAllTakeAwayOfferAmount,
|
|
includeInTotal: true,
|
|
},
|
|
])}
|
|
>
|
|
<div
|
|
className="standardTooltipDineIN"
|
|
style={{
|
|
display: 'flex',
|
|
gap: '5px',
|
|
fontSize: '14px',
|
|
color: '#fff',
|
|
}}
|
|
>
|
|
<div>{isMobile ? 'TA' : 'Take Away'} : </div>
|
|
<div>{`₹ ${safeRound(totalTakeAway)}`}</div>
|
|
</div>
|
|
</Tooltip>
|
|
)}
|
|
|
|
{DineInAccess?.SettingValue === 'Y' &&
|
|
dinePreference &&
|
|
(DineInOrderCount || SelfDineInOrderCount) > 0 && (
|
|
<Tooltip
|
|
className="standardTooltipDineIN"
|
|
title={renderBreakdown([
|
|
{
|
|
label: 'Admin + Staff :',
|
|
value: DineInAmount,
|
|
includeInTotal: true,
|
|
},
|
|
{
|
|
label: 'Self Booking :',
|
|
value: SelfDineInAmount,
|
|
includeInTotal: true,
|
|
},
|
|
{
|
|
label: 'Offer(-) :',
|
|
value: -OverAllDineInOfferAmount,
|
|
includeInTotal: true,
|
|
},
|
|
])}
|
|
>
|
|
<div
|
|
className="standardTooltipDineIN"
|
|
style={{
|
|
display: 'flex',
|
|
gap: '5px',
|
|
fontSize: '14px',
|
|
color: '#fff',
|
|
}}
|
|
>
|
|
<div>{isMobile ? 'DI' : 'Dine In'} : </div>
|
|
<div>{`₹ ${safeRound(totalDineIn)}`}</div>
|
|
</div>
|
|
</Tooltip>
|
|
)}
|
|
|
|
<div className="NetAmountIcons-Main">
|
|
<div
|
|
className="FaRupeeSign"
|
|
onClick={() => netAmount > 0 && setIsNetAmtModalOpen(true)}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<FaRupeeSign color="#ffffffff" />
|
|
<div className="NetAmountNew">
|
|
{isMobile ? 'NA' : 'Net Amount'} : ₹ {safeRound(netAmount)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
|
{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>
|
|
)}
|
|
{Kioskopen && (
|
|
<BSKioskCounterPayment
|
|
Kioskopen={Kioskopen}
|
|
closeKioskModal={closeModalKiosk}
|
|
/>
|
|
)}
|
|
{!OtherServicesglobal && !sportsAppPreference && (
|
|
<TooltipWrapper title={'Low Stock Alerts'} isMobile={isMobile}>
|
|
{' '}
|
|
<BSExpireProductsList />
|
|
</TooltipWrapper>
|
|
)}
|
|
|
|
{!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' }}>
|
|
<Popconfirm
|
|
placement="leftTop"
|
|
title="Booking Open"
|
|
description="Are you sure you want to Open the sales?"
|
|
okText="Yes"
|
|
cancelText="No"
|
|
onConfirm={() => BookingOpenFun('Open')}
|
|
>
|
|
<TooltipWrapper title={'Booking Open'} isMobile={isMobile}>
|
|
<BookingCloseIcon
|
|
bgFill={'red'}
|
|
style={{
|
|
fontSize: '16px',
|
|
marginTop: '4px',
|
|
color: '#52c41a',
|
|
cursor: 'pointer',
|
|
}}
|
|
/>
|
|
|
|
{/* <button className="BookingOpenButton">Booking Open</button> */}
|
|
{/* <button onClick={OpenPaymentModal} className='entryActioncloseBTN-resSales'><IoClose size={15} /></button> */}
|
|
</TooltipWrapper>
|
|
</Popconfirm>
|
|
</div>
|
|
)}
|
|
{!sportsAppPreference && (
|
|
<div style={{ marginLeft: '10px' }}>
|
|
<TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
|
|
{''}
|
|
<BSEwayBillicon
|
|
style={{ cursor: 'pointer', marginTop: '5px' }}
|
|
onClick={OpenListOfInvoices}
|
|
/>
|
|
</TooltipWrapper>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{BookingModalOpen && (
|
|
<RetailBookingClosing
|
|
PaymentOpen={BookingModalOpen}
|
|
PaymentClose={HandleBookingModalClose}
|
|
/>
|
|
)}
|
|
{ListOfInvoices && (
|
|
<ListOfSalesInvoices
|
|
ListOfInvoicesOpen={ListOfInvoices}
|
|
handleInvoiceClose={handleInvoiceClose}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* Modal with table for multiple bookings */}
|
|
<DefaultModal
|
|
open={isModalOpen}
|
|
title="Sales Details"
|
|
handleCancel={() => setIsModalOpen(false)}
|
|
handleSubmit={() => setIsModalOpen(false)}
|
|
width={700}
|
|
footer={false}
|
|
>
|
|
<div style={{ overflowX: 'auto' }}>
|
|
<table
|
|
style={{
|
|
width: '100%',
|
|
borderCollapse: 'collapse',
|
|
fontFamily: "'Segoe UI', Roboto, sans-serif",
|
|
fontSize: '14px',
|
|
borderRadius: '8px',
|
|
overflow: 'hidden',
|
|
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
|
|
}}
|
|
>
|
|
<thead>
|
|
<tr style={{ backgroundColor: '#003366', color: '#fff' }}>
|
|
<th style={{ border: '1px solid #ddd', padding: '10px' }}>
|
|
S.No
|
|
</th>
|
|
<th style={{ border: '1px solid #ddd', padding: '10px' }}>
|
|
Order ID
|
|
</th>
|
|
<th style={{ border: '1px solid #ddd', padding: '10px' }}>
|
|
Customer
|
|
</th>
|
|
<th style={{ border: '1px solid #ddd', padding: '10px' }}>
|
|
Mobile
|
|
</th>
|
|
{/* <th style={{ border: "1px solid #ddd", padding: "10px" }}>Booked By</th> */}
|
|
<th style={{ border: '1px solid #ddd', padding: '10px' }}>
|
|
Payment Type
|
|
</th>
|
|
<th style={{ border: '1px solid #ddd', padding: '10px' }}>
|
|
Amount (₹)
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{currentData?.length > 0 ? (
|
|
currentData?.map((item, index) => (
|
|
<tr
|
|
key={item.OrderId}
|
|
style={{
|
|
backgroundColor: index % 2 === 0 ? '#f7faff' : '#e9f1ff',
|
|
textAlign: 'center',
|
|
transition: 'background 0.3s',
|
|
}}
|
|
onMouseEnter={(e) =>
|
|
(e.currentTarget.style.backgroundColor = '#d6e4ff')
|
|
}
|
|
onMouseLeave={(e) =>
|
|
(e.currentTarget.style.backgroundColor =
|
|
index % 2 === 0 ? '#f7faff' : '#e9f1ff')
|
|
}
|
|
>
|
|
<td style={{ border: '1px solid #ddd', padding: '8px' }}>
|
|
{startIndex + index + 1}
|
|
</td>
|
|
<td style={{ border: '1px solid #ddd', padding: '8px' }}>
|
|
{extractLastNumberOrderId(item.OrderId)}
|
|
</td>
|
|
<td style={{ border: '1px solid #ddd', padding: '8px' }}>
|
|
{item.CustName || '—'}
|
|
</td>
|
|
<td style={{ border: '1px solid #ddd', padding: '8px' }}>
|
|
{item.CustMobile || '—'}
|
|
</td>
|
|
{/* <td style={{ border: "1px solid #ddd", padding: "8px" }}>
|
|
{item.BookedBy || "—"}
|
|
</td> */}
|
|
<td style={{ border: '1px solid #ddd', padding: '8px' }}>
|
|
{item.PaymentTypeName || '—'}
|
|
</td>
|
|
<td
|
|
style={{
|
|
border: '1px solid #ddd',
|
|
padding: '8px',
|
|
fontWeight: '600',
|
|
color: '#2e7d32',
|
|
backgroundColor: '#eaf6ea',
|
|
}}
|
|
>
|
|
₹{item.Amount?.toLocaleString()}
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td
|
|
colSpan="7"
|
|
style={{
|
|
textAlign: 'center',
|
|
padding: '12px',
|
|
border: '1px solid #ddd',
|
|
color: '#888',
|
|
}}
|
|
>
|
|
No booking data available
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
|
|
{/* Pagination */}
|
|
{totalPages > 1 && (
|
|
<div
|
|
style={{
|
|
marginTop: '12px',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
gap: '8px',
|
|
}}
|
|
>
|
|
{currentPage == 1 ? (
|
|
''
|
|
) : (
|
|
<button
|
|
onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
|
|
disabled={currentPage === 1}
|
|
style={{
|
|
padding: '5px 10px',
|
|
backgroundColor: '#003366',
|
|
color: '#fff',
|
|
border: 'none',
|
|
borderRadius: '4px',
|
|
cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
|
|
opacity: currentPage === 1 ? 0.5 : 1,
|
|
}}
|
|
>
|
|
Prev
|
|
</button>
|
|
)}
|
|
|
|
<span style={{ fontWeight: '600' }}>
|
|
Page {currentPage} of {totalPages}
|
|
</span>
|
|
|
|
<button
|
|
onClick={() =>
|
|
setCurrentPage((p) => Math.min(p + 1, totalPages))
|
|
}
|
|
disabled={currentPage === totalPages}
|
|
style={{
|
|
padding: '5px 10px',
|
|
backgroundColor: '#003366',
|
|
color: '#fff',
|
|
border: 'none',
|
|
borderRadius: '4px',
|
|
cursor:
|
|
currentPage === totalPages ? 'not-allowed' : 'pointer',
|
|
opacity: currentPage === totalPages ? 0.5 : 1,
|
|
}}
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</DefaultModal>
|
|
|
|
{/* Modal with table for multiple Net Amt */}
|
|
<DefaultModal
|
|
open={isNetAmtModalOpen}
|
|
title="Sales Net Amount"
|
|
handleCancel={() => setIsNetAmtModalOpen(false)}
|
|
handleSubmit={() => setIsNetAmtModalOpen(false)}
|
|
width={800}
|
|
footer={false}
|
|
>
|
|
<div style={{ overflowX: 'auto' }}>
|
|
<table
|
|
style={{
|
|
width: '100%',
|
|
borderCollapse: 'collapse',
|
|
textAlign: 'center',
|
|
fontFamily: "'Segoe UI', Roboto, sans-serif",
|
|
fontSize: '14px',
|
|
borderRadius: '8px',
|
|
overflow: 'hidden',
|
|
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
|
|
}}
|
|
>
|
|
<thead>
|
|
<tr style={{ backgroundColor: '#003366', color: '#fff' }}>
|
|
<th
|
|
colSpan="2"
|
|
style={{ border: '1px solid #ddd', padding: '10px' }}
|
|
>
|
|
Cash
|
|
</th>
|
|
<th
|
|
colSpan="2"
|
|
style={{ border: '1px solid #ddd', padding: '10px' }}
|
|
>
|
|
UPI
|
|
</th>
|
|
<th
|
|
colSpan="2"
|
|
style={{ border: '1px solid #ddd', padding: '10px' }}
|
|
>
|
|
Card
|
|
</th>
|
|
<th
|
|
colSpan="2"
|
|
style={{ border: '1px solid #ddd', padding: '10px' }}
|
|
>
|
|
Credit
|
|
</th>
|
|
<th
|
|
colSpan="2"
|
|
style={{ border: '1px solid #ddd', padding: '10px' }}
|
|
>
|
|
Business UPI
|
|
</th>
|
|
<th
|
|
rowSpan="2"
|
|
style={{
|
|
border: '1px solid #ddd',
|
|
padding: '10px',
|
|
backgroundColor: '#002244',
|
|
color: '#fff',
|
|
}}
|
|
>
|
|
Total
|
|
</th>
|
|
</tr>
|
|
<tr style={{ backgroundColor: '#004080', color: '#fff' }}>
|
|
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
|
|
Count
|
|
</th>
|
|
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
|
|
Amt
|
|
</th>
|
|
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
|
|
Count
|
|
</th>
|
|
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
|
|
Amt
|
|
</th>
|
|
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
|
|
Count
|
|
</th>
|
|
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
|
|
Amt
|
|
</th>
|
|
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
|
|
Count
|
|
</th>
|
|
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
|
|
Amt
|
|
</th>
|
|
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
|
|
Count
|
|
</th>
|
|
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
|
|
Amt
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{orderDetails?.map((item, index) => {
|
|
const total =
|
|
(item.CashAmount || 0) +
|
|
(item.UpiAmount || 0) +
|
|
(item.CardAmount || 0) +
|
|
(item.CreditAmount || 0);
|
|
|
|
return (
|
|
<tr
|
|
key={index}
|
|
style={{
|
|
backgroundColor: index % 2 === 0 ? '#f7faff' : '#ffffff',
|
|
transition: 'background 0.3s',
|
|
}}
|
|
onMouseEnter={(e) =>
|
|
(e.currentTarget.style.backgroundColor = '#e6f2ff')
|
|
}
|
|
onMouseLeave={(e) =>
|
|
(e.currentTarget.style.backgroundColor =
|
|
index % 2 === 0 ? '#f7faff' : '#ffffff')
|
|
}
|
|
>
|
|
<td
|
|
style={{
|
|
border: '1px solid #ddd',
|
|
fontWeight: '700',
|
|
padding: '8px',
|
|
}}
|
|
>
|
|
{item.CashCount}
|
|
</td>
|
|
<td
|
|
style={{
|
|
border: '1px solid #ddd',
|
|
fontWeight: '700',
|
|
padding: '8px',
|
|
}}
|
|
>
|
|
{item.CashAmount}
|
|
</td>
|
|
<td
|
|
style={{
|
|
border: '1px solid #ddd',
|
|
fontWeight: '700',
|
|
padding: '8px',
|
|
}}
|
|
>
|
|
{item.UpiCount}
|
|
</td>
|
|
<td
|
|
style={{
|
|
border: '1px solid #ddd',
|
|
fontWeight: '700',
|
|
padding: '8px',
|
|
}}
|
|
>
|
|
{item.UpiAmount}
|
|
</td>
|
|
<td
|
|
style={{
|
|
border: '1px solid #ddd',
|
|
fontWeight: '700',
|
|
padding: '8px',
|
|
}}
|
|
>
|
|
{item.CardCount}
|
|
</td>
|
|
<td
|
|
style={{
|
|
border: '1px solid #ddd',
|
|
fontWeight: '700',
|
|
padding: '8px',
|
|
}}
|
|
>
|
|
{item.CardAmount}
|
|
</td>
|
|
<td
|
|
style={{
|
|
border: '1px solid #ddd',
|
|
fontWeight: '700',
|
|
padding: '8px',
|
|
}}
|
|
>
|
|
{item.CreditCount}
|
|
</td>
|
|
<td
|
|
style={{
|
|
border: '1px solid #ddd',
|
|
fontWeight: '700',
|
|
padding: '8px',
|
|
}}
|
|
>
|
|
{item.CreditAmount}
|
|
</td>
|
|
<td
|
|
style={{
|
|
border: '1px solid #ddd',
|
|
fontWeight: '700',
|
|
padding: '8px',
|
|
}}
|
|
>
|
|
{item.BusinessUpiCount}
|
|
</td>
|
|
<td
|
|
style={{
|
|
border: '1px solid #ddd',
|
|
fontWeight: '700',
|
|
padding: '8px',
|
|
}}
|
|
>
|
|
{item.BusinessUpiAmount}
|
|
</td>
|
|
<td
|
|
style={{
|
|
border: '1px solid #ddd',
|
|
padding: '8px',
|
|
fontWeight: '700',
|
|
backgroundColor: '#eaf6ea',
|
|
color: '#2e7d32',
|
|
}}
|
|
>
|
|
{total}
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</DefaultModal>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SalesCountForStandard;
|