1108 lines
30 KiB
React
1108 lines
30 KiB
React
|
import { useState, useEffect, useCallback, useRef } from 'react';
|
||
|
|
import { useDispatch } from 'react-redux';
|
||
|
|
import { Tables } from '../../Components/Tables/Table.jsx';
|
||
|
|
import FormHeader from '../PageComponents/FormHeader.jsx';
|
||
|
|
import Search from '../../Components/Forms/Search.jsx';
|
||
|
|
import {
|
||
|
|
dateFormatChange,
|
||
|
|
extractLastNumberOrderId,
|
||
|
|
extractLastNumber,
|
||
|
|
getSession,
|
||
|
|
printDiv,
|
||
|
|
dateTimeFormatChange,
|
||
|
|
} from '../../Services/WSOthers.js';
|
||
|
|
import { Messages } from '../../Components/Notifications/Messages.jsx';
|
||
|
|
import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx';
|
||
|
|
import { Table } from 'antd';
|
||
|
|
import { getAbstractList } from '../../Features/WholeSale/WholeSaleAbstract.js';
|
||
|
|
import { BiSolidPrinter } from 'react-icons/bi';
|
||
|
|
import { changeBreadCrumb } from '../../Features/AppPage/CenterPage.js';
|
||
|
|
import WSAbstract from '../PurchaseScreen/WholeSalePrint/WSAbstract.jsx';
|
||
|
|
import dayjs from 'dayjs';
|
||
|
|
import './WholeSaleAbstract.scss';
|
||
|
|
import { DatePicker } from 'antd';
|
||
|
|
const { RangePicker } = DatePicker;
|
||
|
|
const subDirectory = import.meta.env.BASE_URL;
|
||
|
|
|
||
|
|
const items = [
|
||
|
|
{
|
||
|
|
name: 'Home',
|
||
|
|
link: `${subDirectory}app-page/home`,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const WholeSaleAbstract = () => {
|
||
|
|
const dispatch = useDispatch();
|
||
|
|
const formRef = useRef(null);
|
||
|
|
|
||
|
|
const [messageType, setMessageType] = useState(null);
|
||
|
|
const [messageData, setMessageData] = useState(null);
|
||
|
|
const [TableData, setTableData] = useState([]);
|
||
|
|
const [PrintData, setPrintData] = useState([]);
|
||
|
|
const [filteredInfo, setFilteredInfo] = useState({});
|
||
|
|
const [sortedInfo, setSortedInfo] = useState({});
|
||
|
|
const [searchedText, setSearchedText] = useState('');
|
||
|
|
const [OsearchedText, setOSearchedText] = useState('');
|
||
|
|
const [OsearchedTextAmt, setOSearchedTextAmt] = useState('');
|
||
|
|
const [EditRecord, setEditRecord] = useState({});
|
||
|
|
const [EditRecordModal, setEditRecordModal] = useState(false);
|
||
|
|
const [PaymentType, setPaymentType] = useState('P');
|
||
|
|
const [OrderFromDate, setOrderFromDate] = useState();
|
||
|
|
const [page, setpage] = useState(1);
|
||
|
|
const [Rpage, setRpage] = useState(1);
|
||
|
|
const [Opage, setOpage] = useState(1);
|
||
|
|
const [orderModel, setOrderModel] = useState(false);
|
||
|
|
const [OTableData, setOTableData] = useState([]);
|
||
|
|
const [ORTableData, setORTableData] = useState([]);
|
||
|
|
const [OFullData, setOFullData] = useState({});
|
||
|
|
|
||
|
|
const itemsPerPage = 10;
|
||
|
|
const indexOfLastItem = page * itemsPerPage;
|
||
|
|
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
||
|
|
const currentItems = TableData?.slice(indexOfFirstItem, indexOfLastItem);
|
||
|
|
const totalPages = Math.ceil(TableData?.length / itemsPerPage);
|
||
|
|
|
||
|
|
const AppId = getSession('AppId');
|
||
|
|
const CompId = getSession('CompId');
|
||
|
|
const BranchId = getSession('BranchId');
|
||
|
|
const UserId = getSession('UserId');
|
||
|
|
// const UserType = getSession('UserType')
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
dispatch(changeBreadCrumb({ items: items }));
|
||
|
|
fetchData();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
async function fetchData() {
|
||
|
|
const data = {
|
||
|
|
AppId: AppId,
|
||
|
|
CompId: CompId,
|
||
|
|
BranchId: BranchId,
|
||
|
|
};
|
||
|
|
const gettingTableData = await dispatch(getAbstractList(data)).unwrap();
|
||
|
|
if (gettingTableData?.data?.statusCode === 1) {
|
||
|
|
setTableData(gettingTableData?.data?.data);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleChange = (pagination, filters, sorter) => {
|
||
|
|
setFilteredInfo(filters);
|
||
|
|
setSortedInfo(sorter);
|
||
|
|
};
|
||
|
|
|
||
|
|
const onSearch = (value) => {
|
||
|
|
setSearchedText(value);
|
||
|
|
};
|
||
|
|
const onSearchChange = (e) => {
|
||
|
|
setSearchedText(e?.target?.value);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handlePageChange = (current) => {
|
||
|
|
setpage(current);
|
||
|
|
};
|
||
|
|
useEffect(() => {
|
||
|
|
if ([EditRecord]?.length > 0 && EditRecordModal) {
|
||
|
|
if (EditRecord?.UniqueId) {
|
||
|
|
const percentageAmt = EditRecord?.Amount ?? 0;
|
||
|
|
formRef?.current?.setFieldsValue({ PercentageAmt: percentageAmt });
|
||
|
|
let cmsAmt = 0;
|
||
|
|
if (EditRecord?.AmountType === 'F') {
|
||
|
|
cmsAmt = EditRecord?.Amount;
|
||
|
|
} else if (EditRecord?.AmountType === 'P') {
|
||
|
|
cmsAmt = (EditRecord?.OverallSales || 0) * (percentageAmt / 100);
|
||
|
|
}
|
||
|
|
formRef?.current?.setFieldsValue({
|
||
|
|
CommissionAmt: cmsAmt > 0 ? cmsAmt : 0,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, [EditRecord, EditRecordModal]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (PrintData?.length > 0) {
|
||
|
|
PrintFun();
|
||
|
|
}
|
||
|
|
}, [PrintData]);
|
||
|
|
|
||
|
|
const onchangepaymentType = (value) => {
|
||
|
|
formRef.current?.resetFields();
|
||
|
|
formRef.current?.setFieldsValue({ PaymentType: value });
|
||
|
|
setPaymentType(value);
|
||
|
|
};
|
||
|
|
|
||
|
|
const AmountChange = (e) => {
|
||
|
|
const percentageAmt = e ?? 0;
|
||
|
|
formRef.current?.setFieldsValue({ PercentageAmt: percentageAmt });
|
||
|
|
let cmsAmt = 0;
|
||
|
|
if (PaymentType === 'F') {
|
||
|
|
cmsAmt = e;
|
||
|
|
} else if (PaymentType === 'P') {
|
||
|
|
cmsAmt = (EditRecord?.OverallSales || 0) * (percentageAmt / 100);
|
||
|
|
}
|
||
|
|
formRef.current?.setFieldsValue({ CommissionAmt: cmsAmt > 0 ? cmsAmt : 0 });
|
||
|
|
};
|
||
|
|
|
||
|
|
const vieworders = async (event) => {
|
||
|
|
const TableData = event?.OrderDetails;
|
||
|
|
const ORTableData = event?.ReceivedDetails;
|
||
|
|
console.log('ORTableData', TableData, ORTableData);
|
||
|
|
setOrderModel(true);
|
||
|
|
setOTableData(TableData);
|
||
|
|
setORTableData(ORTableData);
|
||
|
|
};
|
||
|
|
|
||
|
|
const OhandlePageChange = (current) => {
|
||
|
|
setOpage(current);
|
||
|
|
};
|
||
|
|
|
||
|
|
const ORhandlePageChange = (current) => {
|
||
|
|
setRpage(current);
|
||
|
|
};
|
||
|
|
|
||
|
|
const onOSearch = (value) => {
|
||
|
|
setOSearchedText(value);
|
||
|
|
};
|
||
|
|
|
||
|
|
const onOSearchChange = (e) => {
|
||
|
|
setOSearchedText(e?.target?.value);
|
||
|
|
};
|
||
|
|
const onOSearchAmt = (value) => {
|
||
|
|
setOSearchedTextAmt(value);
|
||
|
|
};
|
||
|
|
|
||
|
|
const onOSearchChangeAmt = (e) => {
|
||
|
|
setOSearchedTextAmt(e?.target?.value);
|
||
|
|
};
|
||
|
|
|
||
|
|
const printSet = () => {
|
||
|
|
setPrintData(TableData);
|
||
|
|
};
|
||
|
|
|
||
|
|
const PrintFun = async () => {
|
||
|
|
const WholeSaleStyle = `<style>
|
||
|
|
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=Calistoga&display=swap');
|
||
|
|
@media print {
|
||
|
|
body {
|
||
|
|
font-family:"Calistoga", serif;
|
||
|
|
font-size: 13px; /* Adjust font size for print */
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
* {
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.SalesBill-Master {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: #ffffff;
|
||
|
|
font-family: "Calistoga", serif !important;
|
||
|
|
|
||
|
|
p {
|
||
|
|
font-family: "Calistoga", serif;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.WSAbstract-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
gap: 4px;
|
||
|
|
padding: 4px 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.imagelogo {
|
||
|
|
width: 50px;
|
||
|
|
height: 60px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.SBadd1 {
|
||
|
|
font-size: 8px;
|
||
|
|
font-weight: 600;
|
||
|
|
width: 95%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.SBadd2 {
|
||
|
|
font-size: 8px;
|
||
|
|
font-weight: 600;
|
||
|
|
width: 95%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.SBphone {
|
||
|
|
font-size: 8px;
|
||
|
|
font-weight: 600;
|
||
|
|
width: 95%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.infoOfMandi {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.WSAbstract-datetime {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 0 8px;
|
||
|
|
width: 95%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.WSAbstract-date {
|
||
|
|
font-size: 10px;
|
||
|
|
font-weight: 600;
|
||
|
|
padding: 1px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.WSAbstract-supName {
|
||
|
|
font-size: 9px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.WSAbstract-comTable {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-end;
|
||
|
|
justify-content: flex-end;
|
||
|
|
padding: 0 8px;
|
||
|
|
width: 99.5%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wstddata {
|
||
|
|
// font-size: clamp(6px, 1vw, 16px) !important;
|
||
|
|
font-size: 8px !important;
|
||
|
|
font-weight: 400 !important;
|
||
|
|
padding: 5px 1px !important;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.denominationTitle {
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cashierDiv {
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 700;
|
||
|
|
padding: 0 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.thnkyouDiv {
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: 600;
|
||
|
|
padding: 0 10px;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inword {
|
||
|
|
font-size: 7px;
|
||
|
|
text-align: end;
|
||
|
|
width: 95%;
|
||
|
|
font-weight: 600;
|
||
|
|
padding: 0 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wc-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
gap: 4px;
|
||
|
|
padding: 4px 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.imagelogo {
|
||
|
|
width: 65px;
|
||
|
|
height: 60px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mandiName {
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: 700;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wcadd1 {
|
||
|
|
font-size: 10px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wcadd2 {
|
||
|
|
font-size: 10px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wcphone {
|
||
|
|
font-size: 8px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.infoOfMandi {
|
||
|
|
width: 100%;
|
||
|
|
// text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wc-datetime {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 0 8px;
|
||
|
|
width: 95%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wc-date {
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 600;
|
||
|
|
padding: 1px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wc-supName {
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.signatureofownerbill {
|
||
|
|
font-size: 10px;
|
||
|
|
text-align: end;
|
||
|
|
width: 95%;
|
||
|
|
font-weight: 600;
|
||
|
|
padding: 2rem 1rem;
|
||
|
|
}
|
||
|
|
.Add-Shortname{
|
||
|
|
display: flex;
|
||
|
|
width: 95%;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
}
|
||
|
|
.Address{
|
||
|
|
display:flex;
|
||
|
|
flex-direction:column;
|
||
|
|
width:77%
|
||
|
|
}
|
||
|
|
.ShortNameDiv{
|
||
|
|
display:flex;
|
||
|
|
width:23%;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 700;
|
||
|
|
background: #252525 !important;
|
||
|
|
color:white;
|
||
|
|
text-align:center;
|
||
|
|
justify-content:center;
|
||
|
|
align-items:center;
|
||
|
|
margin:2px ;
|
||
|
|
padding: 0px 5px;
|
||
|
|
border: 1px solid black;
|
||
|
|
border-radius:5px;
|
||
|
|
-webkit-print-color-adjust: exact;
|
||
|
|
print-color-adjust: exact;
|
||
|
|
}
|
||
|
|
</style>`;
|
||
|
|
|
||
|
|
await printDiv(`WSledger`, WholeSaleStyle);
|
||
|
|
setPrintData([]);
|
||
|
|
};
|
||
|
|
const Ocolumns = [
|
||
|
|
{
|
||
|
|
title: 'Sl.No',
|
||
|
|
key: 'sno',
|
||
|
|
align: 'center',
|
||
|
|
width: '80px',
|
||
|
|
render: (text, object, index) => (
|
||
|
|
<a style={{ color: 'black' }}>{(Opage - 1) * 10 + index + 1}</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Sales No',
|
||
|
|
key: 'OrderId',
|
||
|
|
dataIndex: 'OrderId',
|
||
|
|
render: (productDetails, record) => (
|
||
|
|
<a style={{ color: 'black' }}>
|
||
|
|
{extractLastNumberOrderId(record?.OrderId, record?.FYStatus)}
|
||
|
|
</a>
|
||
|
|
),
|
||
|
|
filteredValue: [OsearchedText],
|
||
|
|
onFilter: (value, record) => {
|
||
|
|
return (
|
||
|
|
String(extractLastNumberOrderId(record?.OrderId, record?.FYStatus))
|
||
|
|
?.toLowerCase()
|
||
|
|
?.includes(value?.toLowerCase()) ||
|
||
|
|
String(record.productDetails?.map((item, index) => item.ProdName))
|
||
|
|
?.toLowerCase()
|
||
|
|
?.includes(value?.toLowerCase())
|
||
|
|
);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Sales Date',
|
||
|
|
key: 'SalesDate',
|
||
|
|
dataIndex: 'SalesDate',
|
||
|
|
render: (productDetails, record) => (
|
||
|
|
<a style={{ color: 'black' }}>{dateFormatChange(record?.SalesDate)}</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
title: 'Product',
|
||
|
|
key: 'ProdDetails',
|
||
|
|
dataIndex: 'productDetails',
|
||
|
|
render: (productDetails) =>
|
||
|
|
productDetails?.length > 0
|
||
|
|
? productDetails.map((item, index) => (
|
||
|
|
<div key={index}>{item.ProdName}</div>
|
||
|
|
))
|
||
|
|
: 'No Products',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Quality / UOM',
|
||
|
|
key: 'ProdDetails',
|
||
|
|
dataIndex: 'productDetails',
|
||
|
|
render: (productDetails) =>
|
||
|
|
productDetails?.length > 0
|
||
|
|
? productDetails.map((item, index) => (
|
||
|
|
<div key={index}>{`${item.QualityName}- ${item.UomName}`}</div>
|
||
|
|
))
|
||
|
|
: 'No Products',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Received Qty',
|
||
|
|
key: 'productDetails',
|
||
|
|
dataIndex: 'productDetails',
|
||
|
|
align: 'right',
|
||
|
|
render: (productDetails) =>
|
||
|
|
productDetails?.length > 0
|
||
|
|
? productDetails.map((item, index) => (
|
||
|
|
<div key={index}>{item.SalesQty}</div>
|
||
|
|
))
|
||
|
|
: 'No Recived Quantity',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Total Amount',
|
||
|
|
key: 'NetAmount',
|
||
|
|
dataIndex: 'NetAmount',
|
||
|
|
align: 'right',
|
||
|
|
render: (productDetails, record) => (
|
||
|
|
<a
|
||
|
|
style={{ color: 'black' }}
|
||
|
|
onClick={() => OnSelectPaidList(productDetails, record)}
|
||
|
|
>
|
||
|
|
{record?.NetAmount}
|
||
|
|
</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const ORcolumns = [
|
||
|
|
{
|
||
|
|
title: 'Sl.No',
|
||
|
|
key: 'sno',
|
||
|
|
align: 'center',
|
||
|
|
width: '80px',
|
||
|
|
render: (text, object, index) => (
|
||
|
|
<a style={{ color: 'black' }}>{(Rpage - 1) * 10 + index + 1}</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'No',
|
||
|
|
key: 'UniqueId',
|
||
|
|
dataIndex: 'UniqueId',
|
||
|
|
render: (record) => <a style={{ color: 'black' }}>{record}</a>,
|
||
|
|
filteredValue: [OsearchedTextAmt],
|
||
|
|
onFilter: (value, record) => {
|
||
|
|
return String(extractLastNumber(record?.UniqueId))
|
||
|
|
?.toLowerCase()
|
||
|
|
?.includes(value?.toLowerCase());
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Date',
|
||
|
|
key: 'Date',
|
||
|
|
dataIndex: 'Date',
|
||
|
|
render: (record) => (
|
||
|
|
<a style={{ color: 'black' }}>{dateTimeFormatChange(record)}</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
title: 'Type',
|
||
|
|
key: 'PaymentTypeName',
|
||
|
|
dataIndex: 'PaymentTypeName',
|
||
|
|
render: (record) => <a style={{ color: 'black' }}>{record}</a>,
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
title: 'Amount',
|
||
|
|
key: 'Amount',
|
||
|
|
dataIndex: 'Amount',
|
||
|
|
align: 'right',
|
||
|
|
render: (record) => <a style={{ color: 'black' }}>{record}</a>,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const calculateBalance = (record) => {
|
||
|
|
const openingBalance = record?.OpeningBalance || 0;
|
||
|
|
const overallSales = record?.OverallSales || 0;
|
||
|
|
const commissionAmount = record?.CommissionAmount || 0;
|
||
|
|
const extraChargeAmount = record?.ExtraChargeAmount || 0;
|
||
|
|
|
||
|
|
if (openingBalance >= 0) {
|
||
|
|
return (
|
||
|
|
Math.abs(openingBalance) -
|
||
|
|
(overallSales - commissionAmount + extraChargeAmount)
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
return (
|
||
|
|
openingBalance - (overallSales - commissionAmount + extraChargeAmount)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const calculateFinalBalance = (record) => {
|
||
|
|
const balance = calculateBalance(record);
|
||
|
|
if (balance >= 0) {
|
||
|
|
return balance - (record?.OverallReceivedAmount || 0);
|
||
|
|
} else {
|
||
|
|
return balance + (record?.OverallReceivedAmount || 0);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const columns = [
|
||
|
|
{
|
||
|
|
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',
|
||
|
|
dataIndex: 'CustSuppName',
|
||
|
|
key: 'CustSuppName',
|
||
|
|
width: '150px',
|
||
|
|
align: 'left',
|
||
|
|
render: (value, record) => (
|
||
|
|
<a style={{ color: 'black', width: '200px' }}>
|
||
|
|
{record.CustShortName
|
||
|
|
? record.CustShortName
|
||
|
|
: record.CustSuppName
|
||
|
|
? record.CustSuppName
|
||
|
|
: record.CustSuppMobileNo}
|
||
|
|
</a>
|
||
|
|
),
|
||
|
|
filteredValue: [searchedText],
|
||
|
|
onFilter: (value, record) => {
|
||
|
|
return String(record.CustSuppName)
|
||
|
|
?.toLowerCase()
|
||
|
|
.includes(value?.toLowerCase());
|
||
|
|
},
|
||
|
|
sorter: (a, b) => a?.CustSuppName?.length - b?.CustSuppName?.length,
|
||
|
|
sortOrder:
|
||
|
|
sortedInfo.columnKey === 'CustSuppName' ? sortedInfo.order : null,
|
||
|
|
ellipsis: true,
|
||
|
|
onCell: (record) => ({
|
||
|
|
onClick: () => {
|
||
|
|
vieworders(record);
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'OB',
|
||
|
|
dataIndex: 'OpeningBalance',
|
||
|
|
key: 'OpeningBalance',
|
||
|
|
width: '80px',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
title: 'Balance',
|
||
|
|
dataIndex: 'OpeningBalance',
|
||
|
|
key: 'OpeningBalance',
|
||
|
|
width: '90px',
|
||
|
|
align: 'right',
|
||
|
|
render: (text, record) => (
|
||
|
|
<a style={{ color: 'red' }}>{text < 0 ? Math.abs(text) : 0}</a>
|
||
|
|
),
|
||
|
|
onCell: (record) => ({
|
||
|
|
onClick: () => {
|
||
|
|
vieworders(record);
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Advance',
|
||
|
|
dataIndex: 'OpeningBalance',
|
||
|
|
key: 'OpeningBalance',
|
||
|
|
width: '90px',
|
||
|
|
align: 'right',
|
||
|
|
render: (text, record) => (
|
||
|
|
<a style={{ color: 'green' }}>{text > 0 ? Math.abs(text) : 0}</a>
|
||
|
|
),
|
||
|
|
onCell: (record) => ({
|
||
|
|
onClick: () => {
|
||
|
|
vieworders(record);
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
],
|
||
|
|
onCell: (record) => ({
|
||
|
|
onClick: () => {
|
||
|
|
vieworders(record);
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
title: 'Sales',
|
||
|
|
dataIndex: 'OverallSales',
|
||
|
|
key: 'OverallSales',
|
||
|
|
width: '100px',
|
||
|
|
align: 'right',
|
||
|
|
render: (text) => <a style={{ color: 'black' }}>{text}</a>,
|
||
|
|
onCell: (record) => ({
|
||
|
|
onClick: () => {
|
||
|
|
vieworders(record);
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
title: 'Commission',
|
||
|
|
dataIndex: 'CommissionAmount',
|
||
|
|
key: 'CommissionAmount',
|
||
|
|
width: '110px',
|
||
|
|
align: 'right',
|
||
|
|
render: (text, row) => (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: '#1677ff',
|
||
|
|
cursor: 'pointer',
|
||
|
|
fontWeight: 'Bold',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{text}
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
onCell: (record) => ({
|
||
|
|
onClick: () => {
|
||
|
|
vieworders(record);
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Others',
|
||
|
|
dataIndex: 'ExtraChargeAmount',
|
||
|
|
key: 'ExtraChargeAmount',
|
||
|
|
width: '110px',
|
||
|
|
align: 'right',
|
||
|
|
render: (text, row) => (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: '#1677ff',
|
||
|
|
cursor: 'pointer',
|
||
|
|
fontWeight: 'Bold',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{text}
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
onCell: (record) => ({
|
||
|
|
onClick: () => {
|
||
|
|
vieworders(record);
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Total',
|
||
|
|
dataIndex: 'Total',
|
||
|
|
key: 'Total',
|
||
|
|
width: '80px',
|
||
|
|
align: 'right',
|
||
|
|
render: (text, record) => (
|
||
|
|
<a style={{ color: 'black' }}>
|
||
|
|
{(record.OverallSales || 0) -
|
||
|
|
(record.CommissionAmount || 0) +
|
||
|
|
(record.ExtraChargeAmount || 0)}
|
||
|
|
</a>
|
||
|
|
),
|
||
|
|
filteredValue: filteredInfo.SuppPOC || null,
|
||
|
|
onCell: (record) => ({
|
||
|
|
onClick: () => {
|
||
|
|
vieworders(record);
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Grand Total',
|
||
|
|
dataIndex: 'GrandTotal',
|
||
|
|
key: 'GrandTotal',
|
||
|
|
width: '100px',
|
||
|
|
align: 'right',
|
||
|
|
render: (text, record) => {
|
||
|
|
const grandTotal = calculateBalance(record)?.toFixed(2);
|
||
|
|
const color = grandTotal > 0 ? 'green' : 'red';
|
||
|
|
return <a style={{ color }}>{Math.abs(grandTotal)}</a>;
|
||
|
|
},
|
||
|
|
onCell: (record) => ({
|
||
|
|
onClick: () => {
|
||
|
|
vieworders(record);
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Received',
|
||
|
|
dataIndex: 'OverallReceivedAmount',
|
||
|
|
key: 'OverallReceivedAmount',
|
||
|
|
width: '90px',
|
||
|
|
align: 'right',
|
||
|
|
render: (text) => <a style={{ color: 'black' }}>{text}</a>,
|
||
|
|
onCell: (record) => ({
|
||
|
|
onClick: () => {
|
||
|
|
vieworders(record);
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Balance',
|
||
|
|
dataIndex: 'Balance',
|
||
|
|
key: 'Balance',
|
||
|
|
width: '85px',
|
||
|
|
align: 'right',
|
||
|
|
render: (text, record) => {
|
||
|
|
let finalBalance;
|
||
|
|
const balance = calculateBalance(record);
|
||
|
|
if (balance >= 0) {
|
||
|
|
finalBalance = (
|
||
|
|
balance - (record?.OverallReceivedAmount || 0)
|
||
|
|
).toFixed(2);
|
||
|
|
} else {
|
||
|
|
finalBalance = (
|
||
|
|
balance + (record?.OverallReceivedAmount || 0)
|
||
|
|
).toFixed(2);
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<a style={{ color: 'red' }}>
|
||
|
|
{finalBalance < 0 ? Math.abs(finalBalance) : 0}
|
||
|
|
</a>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
onCell: (record) => ({
|
||
|
|
onClick: () => {
|
||
|
|
vieworders(record);
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Advance',
|
||
|
|
dataIndex: 'Balance',
|
||
|
|
key: 'Balance',
|
||
|
|
align: 'right',
|
||
|
|
render: (text, record) => {
|
||
|
|
let finalAdvance;
|
||
|
|
const balance = calculateBalance(record);
|
||
|
|
if (balance >= 0) {
|
||
|
|
finalAdvance = (
|
||
|
|
balance - (record?.OverallReceivedAmount || 0)
|
||
|
|
).toFixed(2);
|
||
|
|
} else {
|
||
|
|
finalAdvance = (
|
||
|
|
balance + (record?.OverallReceivedAmount || 0)
|
||
|
|
).toFixed(2);
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<a style={{ color: 'green' }}>
|
||
|
|
{finalAdvance > 0 ? Math.abs(finalAdvance) : 0}
|
||
|
|
</a>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
onCell: (record) => ({
|
||
|
|
onClick: () => {
|
||
|
|
vieworders(record);
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const onComplete = useCallback(() => {
|
||
|
|
setMessageData(null);
|
||
|
|
setMessageType(null);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const rangePresets = [
|
||
|
|
{
|
||
|
|
label: 'Last 7 Days',
|
||
|
|
value: [dayjs().add(-7, 'd'), dayjs()],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Last 14 Days',
|
||
|
|
value: [dayjs().add(-14, 'd'), dayjs()],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Last 30 Days',
|
||
|
|
value: [dayjs().add(-30, 'd'), dayjs()],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Last 90 Days',
|
||
|
|
value: [dayjs().add(-90, 'd'), dayjs()],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const dateFormat = 'DD-MM-YYYY';
|
||
|
|
|
||
|
|
const onRangeChange = async (dates, dateStrings) => {
|
||
|
|
let fromDateVal = dateStrings[0]?.split('-');
|
||
|
|
let toDateVal = dateStrings[1]?.split('-');
|
||
|
|
if (dates) {
|
||
|
|
let data = {
|
||
|
|
CompId: CompId,
|
||
|
|
BranchId: BranchId,
|
||
|
|
AppId: AppId,
|
||
|
|
FromDate: fromDateVal[2] + '-' + fromDateVal[1] + '-' + fromDateVal[0],
|
||
|
|
ToDate: toDateVal[2] + '-' + toDateVal[1] + '-' + toDateVal[0],
|
||
|
|
};
|
||
|
|
|
||
|
|
let gettingTableData = await dispatch(getAbstractList(data)).unwrap();
|
||
|
|
if (gettingTableData?.data?.statusCode === 1) {
|
||
|
|
setTableData(gettingTableData?.data?.data);
|
||
|
|
} else {
|
||
|
|
setTableData([]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const disabledDate = (current) => {
|
||
|
|
// Can not select days before today and today
|
||
|
|
return current && current > dayjs().endOf('day');
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<div className="WholeSaleAbstract">
|
||
|
|
<div className="userPageContent">
|
||
|
|
<Messages
|
||
|
|
messageType={messageType}
|
||
|
|
messageData={messageData}
|
||
|
|
onComplete={onComplete}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{orderModel && (
|
||
|
|
<DefaultModal
|
||
|
|
open={orderModel}
|
||
|
|
footer={false}
|
||
|
|
width={950}
|
||
|
|
className={'orderDetailsModal-abstract'}
|
||
|
|
children={
|
||
|
|
<div className="kot-table">
|
||
|
|
<div
|
||
|
|
className="modalSearchBar"
|
||
|
|
style={{ paddingBottom: '10px' }}
|
||
|
|
>
|
||
|
|
<h3 className="kot-title">Order Details</h3>
|
||
|
|
<Search
|
||
|
|
placeholder="Search"
|
||
|
|
onSearch={onOSearch}
|
||
|
|
onSearchChange={onOSearchChange}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="WholeSaleAbstract-Order">
|
||
|
|
<Tables
|
||
|
|
columns={Ocolumns}
|
||
|
|
dataSource={OTableData}
|
||
|
|
data={OTableData}
|
||
|
|
pagination={OhandlePageChange}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
{ORTableData?.length > 0 && (
|
||
|
|
<>
|
||
|
|
<div className="WholeSaleAbstract-Order">
|
||
|
|
<div
|
||
|
|
className="modalSearchBar"
|
||
|
|
style={{ paddingBottom: '10px' }}
|
||
|
|
>
|
||
|
|
<div className="kot-title">Received</div>
|
||
|
|
<div>
|
||
|
|
<Search
|
||
|
|
placeholder="Search"
|
||
|
|
onSearch={onOSearchAmt}
|
||
|
|
onSearchChange={onOSearchChangeAmt}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Tables
|
||
|
|
columns={ORcolumns}
|
||
|
|
dataSource={ORTableData}
|
||
|
|
data={ORTableData}
|
||
|
|
pagination={ORhandlePageChange}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
handleCancel={() => {
|
||
|
|
setOrderModel(false);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="formAddNew">
|
||
|
|
<div>
|
||
|
|
<FormHeader title={'Abstract For Sales'} />
|
||
|
|
</div>
|
||
|
|
<div className="searchAddDiv">
|
||
|
|
<div className="formSearch">
|
||
|
|
<Search
|
||
|
|
placeholder="Search"
|
||
|
|
onSearch={onSearch}
|
||
|
|
onSearchChange={onSearchChange}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||
|
|
<div className="Dashboardrange">
|
||
|
|
<RangePicker
|
||
|
|
presets={rangePresets}
|
||
|
|
onChange={onRangeChange}
|
||
|
|
format={dateFormat}
|
||
|
|
disabledDate={disabledDate}
|
||
|
|
inputReadOnly={true}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<BiSolidPrinter
|
||
|
|
className={
|
||
|
|
TableData?.length > 0
|
||
|
|
? 'DateWiseReport-printerIcon'
|
||
|
|
: 'DateWiseReport-printerIcon-disabled'
|
||
|
|
}
|
||
|
|
onClick={() => {
|
||
|
|
printSet();
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="reportTable">
|
||
|
|
<Tables
|
||
|
|
columns={columns}
|
||
|
|
data={currentItems}
|
||
|
|
dataSource={currentItems}
|
||
|
|
// pagination={handlePageChange}
|
||
|
|
onChange={handleChange}
|
||
|
|
summary={(pageData) => {
|
||
|
|
let totalOBBalanceAmount = pageData?.reduce((sum, item) => {
|
||
|
|
return (
|
||
|
|
sum + (item.OpeningBalance < 0 ? item.OpeningBalance : 0)
|
||
|
|
);
|
||
|
|
}, 0);
|
||
|
|
let totalOBAdvanceAmount = pageData?.reduce((sum, item) => {
|
||
|
|
return (
|
||
|
|
sum + (item.OpeningBalance > 0 ? item.OpeningBalance : 0)
|
||
|
|
);
|
||
|
|
}, 0);
|
||
|
|
let totalSalesAmount = pageData?.reduce(
|
||
|
|
(sum, item) => sum + item.OverallSales,
|
||
|
|
0
|
||
|
|
);
|
||
|
|
let totalCommissionAmount = pageData?.reduce(
|
||
|
|
(sum, item) => sum + (item.CommissionAmount || 0),
|
||
|
|
0
|
||
|
|
);
|
||
|
|
let totalExtraChargeAmount = pageData?.reduce(
|
||
|
|
(sum, item) => sum + (item.ExtraChargeAmount || 0),
|
||
|
|
0
|
||
|
|
);
|
||
|
|
let totalAmount = pageData?.reduce(
|
||
|
|
(sum, item) =>
|
||
|
|
sum +
|
||
|
|
(item?.OverallSales -
|
||
|
|
(item?.CommissionAmount || 0) +
|
||
|
|
(item?.ExtraChargeAmount || 0)),
|
||
|
|
0
|
||
|
|
);
|
||
|
|
let totalGrandTotalAmount = pageData?.reduce((sum, item) => {
|
||
|
|
return sum + calculateBalance(item);
|
||
|
|
}, 0);
|
||
|
|
|
||
|
|
let totalRecivedAmount = pageData?.reduce((sum, item) => {
|
||
|
|
const receivedAmount = item?.OverallReceivedAmount || 0;
|
||
|
|
return sum + receivedAmount;
|
||
|
|
}, 0);
|
||
|
|
|
||
|
|
let totalBalanceAmount = pageData?.reduce((sum, item) => {
|
||
|
|
const balance = calculateFinalBalance(item);
|
||
|
|
return sum + (balance < 0 ? balance : 0);
|
||
|
|
}, 0);
|
||
|
|
|
||
|
|
let totalAdvanceAmount = pageData?.reduce((sum, item) => {
|
||
|
|
const advance = calculateFinalBalance(item);
|
||
|
|
return sum + (advance > 0 ? advance : 0);
|
||
|
|
}, 0);
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Table.Summary.Row className="reportTable-totalSummary">
|
||
|
|
<Table.Summary.Cell index={0}></Table.Summary.Cell>
|
||
|
|
<Table.Summary.Cell index={1}>Total</Table.Summary.Cell>
|
||
|
|
<Table.Summary.Cell index={2} align="right">
|
||
|
|
{Math.abs(totalOBBalanceAmount)}
|
||
|
|
</Table.Summary.Cell>
|
||
|
|
<Table.Summary.Cell index={3} align="right">
|
||
|
|
{totalOBAdvanceAmount}
|
||
|
|
</Table.Summary.Cell>
|
||
|
|
<Table.Summary.Cell index={4} align="right">
|
||
|
|
{totalSalesAmount}
|
||
|
|
</Table.Summary.Cell>
|
||
|
|
<Table.Summary.Cell index={5} align="right">
|
||
|
|
{totalCommissionAmount?.toFixed(2)}
|
||
|
|
</Table.Summary.Cell>
|
||
|
|
<Table.Summary.Cell index={6} align="right">
|
||
|
|
{totalExtraChargeAmount?.toFixed(2)}
|
||
|
|
</Table.Summary.Cell>
|
||
|
|
<Table.Summary.Cell index={7} align="right">
|
||
|
|
{totalAmount?.toFixed(2)}
|
||
|
|
</Table.Summary.Cell>
|
||
|
|
<Table.Summary.Cell index={8} align="right">
|
||
|
|
{Math.abs(totalGrandTotalAmount?.toFixed(2))}
|
||
|
|
</Table.Summary.Cell>
|
||
|
|
<Table.Summary.Cell index={9} align="right">
|
||
|
|
{totalRecivedAmount}
|
||
|
|
</Table.Summary.Cell>
|
||
|
|
<Table.Summary.Cell index={10} align="right">
|
||
|
|
{Math.abs(totalBalanceAmount)}
|
||
|
|
</Table.Summary.Cell>
|
||
|
|
<Table.Summary.Cell index={11} align="right">
|
||
|
|
{totalAdvanceAmount}
|
||
|
|
</Table.Summary.Cell>
|
||
|
|
</Table.Summary.Row>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}}
|
||
|
|
/>{' '}
|
||
|
|
</div>
|
||
|
|
{totalPages > 1 && (
|
||
|
|
<div
|
||
|
|
className="paginationControls"
|
||
|
|
style={{ justifyContent: 'flex-start' }}
|
||
|
|
>
|
||
|
|
{[...Array(totalPages)].map((_, pageIndex) => (
|
||
|
|
<button
|
||
|
|
key={pageIndex}
|
||
|
|
onClick={() => handlePageChange(pageIndex + 1)}
|
||
|
|
>
|
||
|
|
{pageIndex + 1}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style={{ display: 'none' }}>
|
||
|
|
<WSAbstract data={TableData} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default WholeSaleAbstract;
|