443 lines
14 KiB
React
443 lines
14 KiB
React
|
import { useCallback, useEffect, useState } from 'react';
|
||
|
|
import { DefaultModal } from '../../../Components/Modal/DefaultModal';
|
||
|
|
import Denomination from '../../Reports/Denomination/Denomination';
|
||
|
|
import { Tables } from '../../../Components/Tables/Table';
|
||
|
|
import { dateTimeFormatChange, getSession } from '../../../Services/Others';
|
||
|
|
import { IoClose } from 'react-icons/io5';
|
||
|
|
import './RetailBookingClosing.scss';
|
||
|
|
import { useDispatch } from 'react-redux';
|
||
|
|
import { Messages } from '../../../Components/Notifications/Messages';
|
||
|
|
import Buttons from '../../../Components/Forms/Buttons';
|
||
|
|
import { ArrowRightOutlined } from '@ant-design/icons';
|
||
|
|
import {
|
||
|
|
getRetailPaymentClosing,
|
||
|
|
PostBookingClose,
|
||
|
|
} from '../../../Features/BookingScreen/RetailBookingClose';
|
||
|
|
import { getBookingStatus } from '../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail';
|
||
|
|
import { PreferenceData } from '../../../Features/BookingScreen/BookingData/BookingData';
|
||
|
|
import { useSelector } from 'react-redux';
|
||
|
|
|
||
|
|
const RetailBookingClosing = (props) => {
|
||
|
|
const dispatch = useDispatch();
|
||
|
|
const UserType = getSession('UserType');
|
||
|
|
const preferenceDatas = useSelector(PreferenceData);
|
||
|
|
const allowDecimal = preferenceDatas?.[0]?.SettingDtlDetails?.find((setting) => setting?.SettingIdName?.toLowerCase() === "decimal" && setting?.SettingValue === 'Y');
|
||
|
|
const CompId = getSession('CompId');
|
||
|
|
const AppId = getSession('AppId');
|
||
|
|
const UserId = getSession('UserId');
|
||
|
|
const BranchId = getSession('BranchId');
|
||
|
|
const [messageType, setMessageType] = useState(null);
|
||
|
|
const [messageData, setMessageData] = useState(null);
|
||
|
|
const [PaymentClosingData, setPaymentClosingData] = useState([]);
|
||
|
|
const [TotalCashInHand, setTotalCashInHand] = useState(0);
|
||
|
|
console.log(PaymentClosingData, 'PaymentClosingData');
|
||
|
|
const [ReceivedAmountopen, setReceivedAmountOpen] = useState(false);
|
||
|
|
const [SettlementDetails, setSettlementDetails] = useState(false);
|
||
|
|
const [DenominationOpen, setDenominationOpen] = useState(false);
|
||
|
|
const [page, setpage] = useState(1);
|
||
|
|
const [denominationData, setDenominationData] = useState({
|
||
|
|
Amounts: {},
|
||
|
|
OverAllTotal: 0,
|
||
|
|
});
|
||
|
|
useEffect(() => {
|
||
|
|
getWholeSaleClosingList();
|
||
|
|
}, []);
|
||
|
|
const getWholeSaleClosingList = async () => {
|
||
|
|
let data = {
|
||
|
|
AppId: AppId,
|
||
|
|
CompId: CompId,
|
||
|
|
BranchId: BranchId,
|
||
|
|
UserId: UserId,
|
||
|
|
};
|
||
|
|
let response = await dispatch(getRetailPaymentClosing(data)).unwrap();
|
||
|
|
if (response?.data?.statusCode === 1) {
|
||
|
|
setPaymentClosingData(response?.data?.data);
|
||
|
|
let data = response?.data?.data;
|
||
|
|
let TotalCashCal =
|
||
|
|
parseInt(data?.OverAllCashAmount) + parseInt(data?.ReceivedAmount);
|
||
|
|
setTotalCashInHand(TotalCashCal);
|
||
|
|
} else {
|
||
|
|
setPaymentClosingData([]);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const OpenReceivedAmount = () => {
|
||
|
|
setReceivedAmountOpen(!ReceivedAmountopen);
|
||
|
|
};
|
||
|
|
const OpenSettlementDetails = () => {
|
||
|
|
setSettlementDetails(!SettlementDetails);
|
||
|
|
};
|
||
|
|
const OpenDenomination = async () => {
|
||
|
|
setDenominationOpen(true);
|
||
|
|
// const PostData = {
|
||
|
|
// "UserId": UserId,
|
||
|
|
// "ScreenType": "Payment",
|
||
|
|
// "ScreenStatus": "Close",
|
||
|
|
// "OpeningBalance": 0,
|
||
|
|
// "ClosingBalance": 0,
|
||
|
|
// "AppId": AppId,
|
||
|
|
// "CompId": CompId,
|
||
|
|
// "BranchId": BranchId,
|
||
|
|
// "CreatedBy": UserId,
|
||
|
|
// }
|
||
|
|
// let WsPostresponse = await dispatch(WSBookingPost(PostData)).unwrap();
|
||
|
|
// if(WsPostresponse.data?.statusCode == 1){
|
||
|
|
|
||
|
|
// }
|
||
|
|
// else{
|
||
|
|
// setMessageType("error");
|
||
|
|
// setMessageData(WsPostresponse.data?.response);
|
||
|
|
// }
|
||
|
|
};
|
||
|
|
|
||
|
|
const DenominationClose = () => {
|
||
|
|
setDenominationOpen(false);
|
||
|
|
};
|
||
|
|
const handleDenominationChange = (data) => {
|
||
|
|
setDenominationData(data);
|
||
|
|
};
|
||
|
|
const ReceivedAmtcolumns = [
|
||
|
|
{
|
||
|
|
title: 'Sl.No',
|
||
|
|
key: 'sno',
|
||
|
|
align: 'center',
|
||
|
|
width: '80px',
|
||
|
|
render: (text, object, index) => (
|
||
|
|
<a style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Name',
|
||
|
|
key: 'UserName',
|
||
|
|
dataIndex: 'UserName',
|
||
|
|
render: (productDetails, record) => (
|
||
|
|
<a style={{ color: 'black' }}>
|
||
|
|
{record?.UserRole === 'Admin'
|
||
|
|
? `${record?.UserName ? record?.UserName : record?.UserMobile} (Admin)`
|
||
|
|
: record?.UserName
|
||
|
|
? record?.UserName
|
||
|
|
: record?.UserMobile}
|
||
|
|
</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
// {
|
||
|
|
// title: "Date",
|
||
|
|
// key: "Date",
|
||
|
|
// dataIndex: "Date",
|
||
|
|
// render: (productDetails, record) => (
|
||
|
|
// <a
|
||
|
|
// style={{ color: "black" }}
|
||
|
|
// >
|
||
|
|
// {dateTimeFormatChange(record?.Date)}
|
||
|
|
// </a>
|
||
|
|
// ),
|
||
|
|
// },
|
||
|
|
// ...(PaymentType !== "O"
|
||
|
|
// ? [
|
||
|
|
{
|
||
|
|
title: 'Payment Type',
|
||
|
|
key: 'PaymentType',
|
||
|
|
dataIndex: 'PaymentType',
|
||
|
|
render: (productDetails, record) => (
|
||
|
|
<a style={{ color: 'black' }}>{record?.PaymentType}</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
// ]
|
||
|
|
// : []),
|
||
|
|
{
|
||
|
|
title: 'Amount',
|
||
|
|
key: 'Amount',
|
||
|
|
dataIndex: 'Amount',
|
||
|
|
align: 'right',
|
||
|
|
render: (productDetails, record) => (
|
||
|
|
<a
|
||
|
|
style={{
|
||
|
|
color: record?.ReceivedAmount < 0 ? 'red' : 'green',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{Math.abs(record?.ReceivedAmount)}
|
||
|
|
</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const SupplierDtlcolumns = [
|
||
|
|
{
|
||
|
|
title: 'Sl.No',
|
||
|
|
key: 'sno',
|
||
|
|
align: 'center',
|
||
|
|
width: '80px',
|
||
|
|
render: (text, object, index) => (
|
||
|
|
<a style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Name',
|
||
|
|
key: 'UserName',
|
||
|
|
dataIndex: 'UserName',
|
||
|
|
render: (productDetails, record) => (
|
||
|
|
<a style={{ color: 'black' }}>
|
||
|
|
{record?.CustSuppName
|
||
|
|
? record?.CustSuppName
|
||
|
|
: record?.CustShortName
|
||
|
|
? record?.CustShortName
|
||
|
|
: record?.CustSuppMobile}
|
||
|
|
</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
// {
|
||
|
|
// title: "Date",
|
||
|
|
// key: "Date",
|
||
|
|
// dataIndex: "Date",
|
||
|
|
// render: (productDetails, record) => (
|
||
|
|
// <a
|
||
|
|
// style={{ color: "black" }}
|
||
|
|
// >
|
||
|
|
// {dateTimeFormatChange(record?.Date)}
|
||
|
|
// </a>
|
||
|
|
// ),
|
||
|
|
// },
|
||
|
|
|
||
|
|
{
|
||
|
|
title: 'Payment Type',
|
||
|
|
key: 'PaymentType',
|
||
|
|
dataIndex: 'PaymentType',
|
||
|
|
render: (productDetails, record) => (
|
||
|
|
<a style={{ color: 'black' }}>{record?.PaymentType}</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
title: 'Amount',
|
||
|
|
key: 'Amount',
|
||
|
|
dataIndex: 'Amount',
|
||
|
|
align: 'right',
|
||
|
|
render: (productDetails, record) => (
|
||
|
|
<a
|
||
|
|
style={{
|
||
|
|
color: record?.ReceivedAmount < 0 ? 'red' : 'green',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{Math.abs(record?.ReceivedAmount)}
|
||
|
|
</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const onComplete = useCallback(() => {
|
||
|
|
setMessageData(null);
|
||
|
|
setMessageType(null);
|
||
|
|
}, []);
|
||
|
|
const handlePageChange = (current) => {
|
||
|
|
setpage(current);
|
||
|
|
};
|
||
|
|
const PostDenomination = async () => {
|
||
|
|
console.log(denominationData, 'denominationData');
|
||
|
|
const mappedArray = Object.entries(denominationData?.Amounts || {}).map(
|
||
|
|
([denomination, count]) => ({
|
||
|
|
Denomination: parseInt(denomination, 10),
|
||
|
|
DenominationCount: count,
|
||
|
|
DenominationAmount: parseInt(denomination, 10) * count,
|
||
|
|
})
|
||
|
|
);
|
||
|
|
let Postdata = {
|
||
|
|
AppId: AppId,
|
||
|
|
CompId: CompId,
|
||
|
|
BranchId: BranchId,
|
||
|
|
UserId: UserId,
|
||
|
|
BookingDate: new Date(),
|
||
|
|
ServiceTotal:
|
||
|
|
parseInt(PaymentClosingData?.BalanceCash) +
|
||
|
|
parseInt(PaymentClosingData?.BalanceCard) +
|
||
|
|
parseInt(PaymentClosingData?.BalanceUpi),
|
||
|
|
ScreenType: 'Booking',
|
||
|
|
ScreenStatus: 'Close',
|
||
|
|
DenominationDetails: mappedArray?.filter(
|
||
|
|
(item) => item.DenominationCount !== 0
|
||
|
|
),
|
||
|
|
CreatedBy: UserId,
|
||
|
|
};
|
||
|
|
let PostWSDenomination = await dispatch(
|
||
|
|
PostBookingClose(Postdata)
|
||
|
|
).unwrap();
|
||
|
|
if (PostWSDenomination?.data?.statusCode == 1) {
|
||
|
|
setMessageData('Booking Closed Successfully');
|
||
|
|
setMessageType('success');
|
||
|
|
props.PaymentClose();
|
||
|
|
let data = {
|
||
|
|
AppId: AppId,
|
||
|
|
CompId: CompId,
|
||
|
|
BranchId: BranchId,
|
||
|
|
UserId: UserId,
|
||
|
|
};
|
||
|
|
await dispatch(getBookingStatus(data)).unwrap();
|
||
|
|
} else {
|
||
|
|
setMessageType('error');
|
||
|
|
setMessageData('Booking Not Closed ');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
function safeRound(amountStr) {
|
||
|
|
if (amountStr == null) return allowDecimal ? '0.00' : '0';
|
||
|
|
|
||
|
|
const cleaned = String(amountStr).replace(/[^0-9.-]+/g, '');
|
||
|
|
const num = Number(cleaned);
|
||
|
|
|
||
|
|
if (isNaN(num)) return allowDecimal ? '0.00' : '0';
|
||
|
|
|
||
|
|
return allowDecimal ? num.toFixed(2) : Math.round(num).toString();
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="BookingCloseModal">
|
||
|
|
<Messages
|
||
|
|
messageType={messageType}
|
||
|
|
messageData={messageData}
|
||
|
|
onComplete={onComplete}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<DefaultModal
|
||
|
|
open={props.PaymentOpen}
|
||
|
|
title={'Booking Close'}
|
||
|
|
handleCancel={props.PaymentClose}
|
||
|
|
footer={false}
|
||
|
|
width={700}
|
||
|
|
children={
|
||
|
|
<div className="PaymentClosingOverAll">
|
||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||
|
|
<div className="PaymentClosingOverAll-sub">
|
||
|
|
<div>
|
||
|
|
{' '}
|
||
|
|
Received Amount ={' '}
|
||
|
|
<span style={{ color: '#28AA3A', cursor: 'pointer' }}>
|
||
|
|
{safeRound(PaymentClosingData?.ReceivedAmount)}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
Cash Amount ={' '}
|
||
|
|
<span style={{ color: '#28AA3A', cursor: 'pointer' }}>
|
||
|
|
{safeRound(PaymentClosingData?.OverAllCashAmount)}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
Card Amount ={' '}
|
||
|
|
<span style={{ color: '#28AA3A', cursor: 'pointer' }}>
|
||
|
|
{safeRound(PaymentClosingData?.OverAllCardAmount)}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
UPI Amount ={' '}
|
||
|
|
<span style={{ color: '#28AA3A', cursor: 'pointer' }}>
|
||
|
|
{safeRound(PaymentClosingData?.OverAllUpiAmount)}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
Total Cash In Hand ={' '}
|
||
|
|
<span style={{ color: '#28AA3A' }}>
|
||
|
|
{safeRound(TotalCashInHand)}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<>
|
||
|
|
{/* <div className="PaymentTableClose" onClick={DenominationClose}>
|
||
|
|
<IoClose size={15} />
|
||
|
|
</div> */}
|
||
|
|
<div style={{ width: '300px' }}>
|
||
|
|
<Denomination onchange={handleDenominationChange} />
|
||
|
|
</div>
|
||
|
|
{TotalCashInHand < parseInt(denominationData?.OverAllTotal) &&
|
||
|
|
parseInt(denominationData?.OverAllTotal) > 0 && (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: '#ff0000',
|
||
|
|
fontSize: '20px',
|
||
|
|
fontWeight: '600',
|
||
|
|
width: '100%',
|
||
|
|
textAlign: 'center',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Amount is Mismatching
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{ReceivedAmountopen && (
|
||
|
|
<>
|
||
|
|
<div className="PaymentTableClose" onClick={OpenReceivedAmount}>
|
||
|
|
<IoClose size={15} />
|
||
|
|
</div>
|
||
|
|
<div className="PaymentClose-Title">Received Details</div>
|
||
|
|
<div className="Re-Print-table">
|
||
|
|
<Tables
|
||
|
|
columns={ReceivedAmtcolumns}
|
||
|
|
data={PaymentClosingData?.ReceivedAmtDtl}
|
||
|
|
dataSource={PaymentClosingData?.ReceivedAmtDtl}
|
||
|
|
// // data={PaidListData}
|
||
|
|
// // dataSource={PaidListData}
|
||
|
|
pagination={handlePageChange}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
{SettlementDetails && (
|
||
|
|
<>
|
||
|
|
<div
|
||
|
|
className="PaymentTableClose"
|
||
|
|
onClick={OpenSettlementDetails}
|
||
|
|
>
|
||
|
|
<IoClose size={15} />
|
||
|
|
</div>
|
||
|
|
<div className="PaymentClose-Title">Settlement Details</div>
|
||
|
|
<div className="Re-Print-table">
|
||
|
|
<Tables
|
||
|
|
columns={SupplierDtlcolumns}
|
||
|
|
data={PaymentClosingData?.SupplierDtl}
|
||
|
|
dataSource={PaymentClosingData?.SupplierDtl}
|
||
|
|
// data={PaidListData}
|
||
|
|
// dataSource={PaidListData}
|
||
|
|
// pagination={handlePageChange}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
<div className="PaymentCloseButtondiv">
|
||
|
|
<button
|
||
|
|
onClick={
|
||
|
|
parseInt(denominationData?.OverAllTotal) > 0
|
||
|
|
? TotalCashInHand ==
|
||
|
|
parseInt(denominationData?.OverAllTotal)
|
||
|
|
? PostDenomination
|
||
|
|
: ''
|
||
|
|
: PostDenomination
|
||
|
|
}
|
||
|
|
className="PaymentCloseButton"
|
||
|
|
style={{
|
||
|
|
pointerEvents:
|
||
|
|
parseInt(denominationData?.OverAllTotal) > 0
|
||
|
|
? TotalCashInHand !=
|
||
|
|
parseInt(denominationData?.OverAllTotal)
|
||
|
|
? 'none'
|
||
|
|
: ''
|
||
|
|
: '',
|
||
|
|
opacity:
|
||
|
|
parseInt(denominationData?.OverAllTotal) > 0
|
||
|
|
? TotalCashInHand !=
|
||
|
|
parseInt(denominationData?.OverAllTotal)
|
||
|
|
? '0.5'
|
||
|
|
: ''
|
||
|
|
: '',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{' '}
|
||
|
|
Payment Close
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div></div>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
></DefaultModal>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default RetailBookingClosing;
|