427 lines
12 KiB
React
427 lines
12 KiB
React
|
import { useEffect, useState, useCallback } from 'react';
|
||
|
|
import { useDispatch } from 'react-redux';
|
||
|
|
import FormHeader from '../PageComponents/FormHeader.jsx';
|
||
|
|
import { Search } from '../../Components/Forms/Search.jsx';
|
||
|
|
import { Tables } from '../../Components/Tables/Table.jsx';
|
||
|
|
import { Messages } from '../../Components/Notifications/Messages.jsx';
|
||
|
|
import moment from 'moment';
|
||
|
|
import { DeleteFilled } from '@ant-design/icons';
|
||
|
|
import { changeBreadCrumb } from '../../Features/AppPage/CenterPage.js';
|
||
|
|
import {
|
||
|
|
getCancelPartialPayment,
|
||
|
|
putCancelPartialPayment,
|
||
|
|
} from '../../Features/PendingPaymentCancel/PendingPaymentCancel.js';
|
||
|
|
import { ExtractDateFormate, extractLastNumberOrderId, getSession } from '../../Services/Others.js';
|
||
|
|
import { Space, Table } from 'antd';
|
||
|
|
import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx';
|
||
|
|
import { IoEye } from 'react-icons/io5';
|
||
|
|
import '../../Styles/CancelReschedule/CancelPendingPayment.scss';
|
||
|
|
const subDirectory = import.meta.env.BASE_URL;
|
||
|
|
const CancellationPendingPaymentList = () => {
|
||
|
|
const dispatch = useDispatch();
|
||
|
|
const CompId = getSession('CompId');
|
||
|
|
const BranchId = getSession('BranchId');
|
||
|
|
const AppId = getSession('AppId');
|
||
|
|
const UserId = getSession('UserId');
|
||
|
|
const [messageType, setMessageType] = useState(null);
|
||
|
|
const [messageData, setMessageData] = useState(null);
|
||
|
|
const [searchedText, setSearchedText] = useState('');
|
||
|
|
const [sortedInfo, setSortedInfo] = useState({});
|
||
|
|
const [tabledata, settabledata] = useState([]);
|
||
|
|
const [page, setpage] = useState(1);
|
||
|
|
const [Open, setOpen] = useState({ productDtl: false, ordpaymtDtl: false });
|
||
|
|
const [Details, setDetails] = useState({
|
||
|
|
productDetails: [],
|
||
|
|
OrderPaymentDtl: [],
|
||
|
|
});
|
||
|
|
const items = [
|
||
|
|
{
|
||
|
|
name: 'Home',
|
||
|
|
link: `${subDirectory}app-page/home`,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Cancel Unpaid Orders',
|
||
|
|
link: `${subDirectory}setting/cancel-pendingpayment`,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const ViewProductsandPaymentDtls = async (row, val) => {
|
||
|
|
console.log(row, 'rowrow');
|
||
|
|
|
||
|
|
if (val == 'prod') {
|
||
|
|
setOpen({ productDtl: true, ordpaymtDtl: false });
|
||
|
|
} else {
|
||
|
|
setOpen({ productDtl: false, ordpaymtDtl: true });
|
||
|
|
}
|
||
|
|
setDetails({
|
||
|
|
productDetails: row?.productDetails,
|
||
|
|
OrderPaymentDtl: row?.OrderPaymentDtl,
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const handleCancelNew = () => {
|
||
|
|
setOpen({ productDtl: false, ordpaymtDtl: false });
|
||
|
|
};
|
||
|
|
const columns = [
|
||
|
|
{
|
||
|
|
title: 'Sl.No',
|
||
|
|
key: 'sno',
|
||
|
|
align: 'center',
|
||
|
|
width: '100px',
|
||
|
|
render: (text, object, index) => (
|
||
|
|
<a style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
title: 'ORDER ID',
|
||
|
|
dataIndex: 'OrderId',
|
||
|
|
key: 'OrderId',
|
||
|
|
align: 'right',
|
||
|
|
render: (text, record) => (
|
||
|
|
<a style={{ color: 'black' }}>
|
||
|
|
{record?.OrderId &&
|
||
|
|
extractLastNumberOrderId(record?.OrderId, record?.FYStatus)}
|
||
|
|
</a>
|
||
|
|
),
|
||
|
|
filteredValue: [searchedText],
|
||
|
|
onFilter: (value, record) => {
|
||
|
|
return String(record.OrderId)
|
||
|
|
?.toLowerCase()
|
||
|
|
?.includes(value?.toLowerCase());
|
||
|
|
},
|
||
|
|
ellipsis: true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Customer Mobile ',
|
||
|
|
dataIndex: 'CustSuppName',
|
||
|
|
key: 'CustSuppName',
|
||
|
|
// width: "100px",
|
||
|
|
align: 'center',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Products',
|
||
|
|
dataIndex: 'Products',
|
||
|
|
key: 'Products',
|
||
|
|
// width: "100px",
|
||
|
|
align: 'center',
|
||
|
|
render: (text, record) => (
|
||
|
|
<div>
|
||
|
|
<IoEye
|
||
|
|
style={{ color: '#1292EE', fontSize: '25px', cursor: 'pointer' }}
|
||
|
|
onClick={() => ViewProductsandPaymentDtls(record, 'prod')}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
title: 'Payment Dtl',
|
||
|
|
dataIndex: 'Payment Dtl',
|
||
|
|
key: 'Payment Dtl',
|
||
|
|
align: 'center',
|
||
|
|
render: (text, record) => (
|
||
|
|
<div>
|
||
|
|
<IoEye
|
||
|
|
style={{ color: '#1292EE', fontSize: '25px', cursor: 'pointer' }}
|
||
|
|
onClick={() => ViewProductsandPaymentDtls(record, 'Payment')}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'DATE',
|
||
|
|
dataIndex: 'EffectiveFrom',
|
||
|
|
key: 'EffectiveFrom',
|
||
|
|
|
||
|
|
render: (text) => (
|
||
|
|
<a style={{ color: 'black' }}>{ExtractDateFormate(text)}</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
title: 'Action',
|
||
|
|
key: 'Action',
|
||
|
|
dataIndex: 'Action',
|
||
|
|
align: 'center',
|
||
|
|
render: (_, record, index) =>
|
||
|
|
tabledata?.length >= 1 ? (
|
||
|
|
<button
|
||
|
|
style={{
|
||
|
|
color: '#ffff',
|
||
|
|
background: '#1292ee',
|
||
|
|
padding: '3px 10px',
|
||
|
|
border: '1px solid #1292ee',
|
||
|
|
borderRadius: '4px',
|
||
|
|
cursor: 'pointer',
|
||
|
|
}}
|
||
|
|
onClick={() => actionsFormatter(record)}
|
||
|
|
>
|
||
|
|
Cancel Transaction
|
||
|
|
</button>
|
||
|
|
) : null,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const columns1 = [
|
||
|
|
{
|
||
|
|
title: 'Sl.No',
|
||
|
|
key: 'sno',
|
||
|
|
align: 'center',
|
||
|
|
// width: "100px",
|
||
|
|
render: (text, object, index) => (
|
||
|
|
<a style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
title: 'Product Name',
|
||
|
|
dataIndex: 'ProdName',
|
||
|
|
key: 'ProdName',
|
||
|
|
align: 'left',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'QTY',
|
||
|
|
dataIndex: 'SalesQty',
|
||
|
|
key: 'SalesQty',
|
||
|
|
align: 'center',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'MRP',
|
||
|
|
dataIndex: 'MRP',
|
||
|
|
key: 'ChargesFixed',
|
||
|
|
width: 'MRP',
|
||
|
|
align: 'right',
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const columns2 = [
|
||
|
|
{
|
||
|
|
title: 'Sl.No',
|
||
|
|
key: 'sno',
|
||
|
|
align: 'center',
|
||
|
|
width: '100px',
|
||
|
|
render: (text, object, index) => (
|
||
|
|
<a style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
title: 'Payment Type',
|
||
|
|
dataIndex: 'PaymentTypeName',
|
||
|
|
key: 'PaymentTypeName',
|
||
|
|
width: '100px',
|
||
|
|
align: 'left',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Amount',
|
||
|
|
dataIndex: 'Amount',
|
||
|
|
key: 'Amount',
|
||
|
|
width: '100px',
|
||
|
|
align: 'center',
|
||
|
|
},
|
||
|
|
];
|
||
|
|
useEffect(() => {
|
||
|
|
dispatch(changeBreadCrumb({ items: items }));
|
||
|
|
fetchCancellationPartialData();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const fetchCancellationPartialData = async () => {
|
||
|
|
if (!AppId || !CompId || !BranchId) {
|
||
|
|
console.error(
|
||
|
|
'Missing required identifiers: AppId, CompId, or BranchId.'
|
||
|
|
);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const data = {
|
||
|
|
AppId,
|
||
|
|
CompId,
|
||
|
|
BranchId,
|
||
|
|
};
|
||
|
|
|
||
|
|
try {
|
||
|
|
const res = await dispatch(getCancelPartialPayment(data)).unwrap();
|
||
|
|
if (res?.data?.statusCode === 1) {
|
||
|
|
const fetchedData = res?.data?.data;
|
||
|
|
|
||
|
|
settabledata(fetchedData);
|
||
|
|
} else {
|
||
|
|
settabledata([]);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error(
|
||
|
|
'Failed to fetch cancellation or rescheduling data:',
|
||
|
|
error
|
||
|
|
);
|
||
|
|
settabledata([]);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handlePageChange = (current) => {
|
||
|
|
setpage(current);
|
||
|
|
};
|
||
|
|
|
||
|
|
const actionsFormatter = async (record) => {
|
||
|
|
const data = {
|
||
|
|
OrderId: record?.OrderId,
|
||
|
|
UpdatedBy: UserId,
|
||
|
|
};
|
||
|
|
let response = await dispatch(putCancelPartialPayment(data)).unwrap();
|
||
|
|
if (response?.data?.statusCode == 1) {
|
||
|
|
setMessageType('success');
|
||
|
|
setMessageData(response?.data?.response);
|
||
|
|
fetchCancellationPartialData();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const onSearch = (value) => {
|
||
|
|
setSearchedText(value);
|
||
|
|
};
|
||
|
|
const onSearchChange = (e) => {
|
||
|
|
setSearchedText(e?.target?.value);
|
||
|
|
};
|
||
|
|
const handleChange = (pagination, filters, sorter) => {
|
||
|
|
setSortedInfo(sorter);
|
||
|
|
};
|
||
|
|
const onComplete = useCallback(() => {
|
||
|
|
setMessageData(null);
|
||
|
|
setMessageType(null);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="userPageTable">
|
||
|
|
<div className="userPageContent">
|
||
|
|
<Messages
|
||
|
|
messageType={messageType}
|
||
|
|
messageData={messageData}
|
||
|
|
onComplete={onComplete}
|
||
|
|
/>
|
||
|
|
<div className="formAddNew">
|
||
|
|
<div>
|
||
|
|
<FormHeader title={'Cancel Unpaid Order'} />
|
||
|
|
</div>
|
||
|
|
<div className="searchAddDiv">
|
||
|
|
<div className="formSearch">
|
||
|
|
<Search
|
||
|
|
placeholder="Search"
|
||
|
|
onSearch={onSearch}
|
||
|
|
onSearchChange={onSearchChange}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="reportTable">
|
||
|
|
<Tables
|
||
|
|
columns={columns}
|
||
|
|
data={tabledata}
|
||
|
|
dataSource={tabledata}
|
||
|
|
pagination={handlePageChange}
|
||
|
|
onChange={handleChange}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<DefaultModal
|
||
|
|
open={Open?.productDtl}
|
||
|
|
title="Product Details"
|
||
|
|
footer={false}
|
||
|
|
width={900}
|
||
|
|
children={
|
||
|
|
<>
|
||
|
|
<div>
|
||
|
|
<div></div>
|
||
|
|
|
||
|
|
{/* <div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<Table
|
||
|
|
// rowSelection={{ ...rowSelection, selectedRowKeys }}
|
||
|
|
columns={columns1}
|
||
|
|
dataSource={Details?.productDetails}
|
||
|
|
pagination={{
|
||
|
|
onChange: handlePageChange,
|
||
|
|
defaultPageSize: 10,
|
||
|
|
showSizeChanger: false,
|
||
|
|
hideOnSinglePage: true,
|
||
|
|
}}
|
||
|
|
onChange={handleChange}
|
||
|
|
/>
|
||
|
|
|
||
|
|
</div> */}
|
||
|
|
|
||
|
|
<div className="reportTableCancelPendingPayment">
|
||
|
|
<Tables
|
||
|
|
columns={columns1}
|
||
|
|
data={Details?.productDetails}
|
||
|
|
dataSource={Details?.productDetails}
|
||
|
|
pagination={handlePageChange}
|
||
|
|
onChange={handleChange}
|
||
|
|
/>{' '}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* <div>
|
||
|
|
Payment Details
|
||
|
|
|
||
|
|
|
||
|
|
<Table
|
||
|
|
// rowSelection={{ ...rowSelection, selectedRowKeys }}
|
||
|
|
columns={columns2}
|
||
|
|
dataSource={Details?.OrderPaymentDtl}
|
||
|
|
pagination={{
|
||
|
|
onChange: handlePageChange,
|
||
|
|
defaultPageSize: 10,
|
||
|
|
showSizeChanger: false,
|
||
|
|
hideOnSinglePage: true,
|
||
|
|
}}
|
||
|
|
onChange={handleChange}
|
||
|
|
/>
|
||
|
|
|
||
|
|
</div> */}
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
}
|
||
|
|
// handleSubmit={handleSubmit}
|
||
|
|
handleCancel={handleCancelNew}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<DefaultModal
|
||
|
|
open={Open?.ordpaymtDtl}
|
||
|
|
title="Payment Details"
|
||
|
|
footer={false}
|
||
|
|
width={900}
|
||
|
|
children={
|
||
|
|
<>
|
||
|
|
<div>
|
||
|
|
<div></div>
|
||
|
|
|
||
|
|
{/* <div>
|
||
|
|
<Table
|
||
|
|
columns={columns2}
|
||
|
|
dataSource={Details?.OrderPaymentDtl}
|
||
|
|
pagination={{
|
||
|
|
onChange: handlePageChange,
|
||
|
|
defaultPageSize: 10,
|
||
|
|
showSizeChanger: false,
|
||
|
|
hideOnSinglePage: true,
|
||
|
|
}}
|
||
|
|
onChange={handleChange}
|
||
|
|
/>
|
||
|
|
|
||
|
|
</div> */}
|
||
|
|
<div className="reportTableCancelPendingPayment">
|
||
|
|
<Tables
|
||
|
|
columns={columns2}
|
||
|
|
data={Details?.OrderPaymentDtl}
|
||
|
|
dataSource={Details?.OrderPaymentDtl}
|
||
|
|
pagination={handlePageChange}
|
||
|
|
onChange={handleChange}
|
||
|
|
/>{' '}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
}
|
||
|
|
handleCancel={handleCancelNew}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default CancellationPendingPaymentList;
|