482 lines
14 KiB
JavaScript
482 lines
14 KiB
JavaScript
import { useDispatch } from 'react-redux';
|
|
import {
|
|
changeOrderCardDetails,
|
|
CustomerOrderList,
|
|
getProductsearch,
|
|
getStockDetailsByVariantName,
|
|
} from '../../../../Features/BookingScreen/BookingData/BookingData';
|
|
import { useEffect, useState } from 'react';
|
|
import { ExtractDateFormate, getSession } from '../../../../Services/Others';
|
|
import { Tables } from '../../../../Components/Tables/Table';
|
|
import { IoEye } from 'react-icons/io5';
|
|
import { DatePicker, Modal } from 'antd';
|
|
import dayjs from 'dayjs';
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
import { Buttons, DefaultModal } from '../../../../../ownLib/my-ui-lib';
|
|
import { ArrowRightOutlined } from '@ant-design/icons';
|
|
const CustomerOrders = ({ CustomerDetails, close }) => {
|
|
const CompId = getSession('CompId');
|
|
const BranchId = getSession('BranchId');
|
|
const AppId = getSession('AppId');
|
|
const { RangePicker } = DatePicker;
|
|
const dispatch = useDispatch();
|
|
const [custpmerOrderData, setCustpmerOrderData] = useState();
|
|
console.log(CustomerDetails, 'CustomerDetails');
|
|
|
|
const [page, setpage] = useState(1);
|
|
const [selectedProducts, setSelectedProducts] = useState();
|
|
const [productModal, setProductModal] = useState(false);
|
|
const [selectedRange, setSelectedRange] = useState([dayjs(), dayjs()]);
|
|
const [stockDetailModel, setStockDetailModel] = useState(false);
|
|
const [StockDetails, setStockDetails] = useState([]);
|
|
console.log(StockDetails, 'StockDetails');
|
|
useEffect(() => {
|
|
if (selectedRange && selectedRange[0] && selectedRange[1]) {
|
|
customerFetch();
|
|
}
|
|
}, [selectedRange]);
|
|
|
|
const getApiRange = () => {
|
|
if (!selectedRange || !selectedRange[0] || !selectedRange[1])
|
|
return { fromDate: '', toDate: '' };
|
|
|
|
return {
|
|
fromDate: selectedRange[0].format('YYYY-MM-DD'),
|
|
toDate: selectedRange[1].format('YYYY-MM-DD'),
|
|
};
|
|
};
|
|
|
|
const customerFetch = async () => {
|
|
const { fromDate, toDate } = getApiRange();
|
|
const data = {
|
|
AppId: AppId,
|
|
BranchId: BranchId,
|
|
CompId: CompId,
|
|
MobileNo: CustomerDetails?.value,
|
|
FromDate: fromDate,
|
|
ToDate: toDate,
|
|
};
|
|
const response = await dispatch(CustomerOrderList(data)).unwrap();
|
|
if (response?.data?.statusCode === 1) {
|
|
setCustpmerOrderData(response?.data?.data);
|
|
} else {
|
|
setCustpmerOrderData();
|
|
}
|
|
};
|
|
|
|
const ViewProductdetails = (products) => {
|
|
setSelectedProducts(products);
|
|
setProductModal(true);
|
|
};
|
|
const handlePageChange = (current) => {
|
|
setpage(current);
|
|
};
|
|
// const handleRowDataClick = (record) => {
|
|
// dispatch(changeOrderCardDetails(record?.productDetails));
|
|
// close();
|
|
// };
|
|
|
|
// const getProductsearchData = async (prodName) => {
|
|
// const data = {
|
|
// CompId,
|
|
// BranchId,
|
|
// AppId,
|
|
// ProdName: prodName
|
|
// }
|
|
// const response = await dispatch(getProductsearch(data)).unwrap();
|
|
// console.log(response, 'response23232323');
|
|
|
|
// }
|
|
const getLastBuyQty = (index, variant, prodId) => {
|
|
const productDetails = custpmerOrderData?.[index]?.productDetails;
|
|
if (!productDetails) return 0;
|
|
|
|
let SalesQty = 0;
|
|
for (let i = 0; i < productDetails.length; i++) {
|
|
const product = productDetails[i];
|
|
if (product?.ProdId === prodId && product?.ProdVariantName === variant) {
|
|
SalesQty += product?.SalesQty;
|
|
}
|
|
}
|
|
|
|
return SalesQty;
|
|
};
|
|
|
|
const getStockAllocation = (StockDtls, Qty) => {
|
|
let AllocatedData = [];
|
|
let RemainngQty = Qty;
|
|
for (let i = 0; i < StockDtls?.length; i++) {
|
|
const stock = StockDtls[i];
|
|
if (RemainngQty <= 0) break;
|
|
if (stock?.BalanceQty > 0) {
|
|
const allocQty = Math.min(stock.BalanceQty, RemainngQty);
|
|
AllocatedData.push({
|
|
InwardDtlId: stock.InwardDtlId,
|
|
AllocatedQty: allocQty,
|
|
MRP: stock?.MRP,
|
|
SellPrice: stock?.SellPrice,
|
|
InwardId: stock?.InwardId,
|
|
BatchRef: stock?.BatchRef,
|
|
SuppId: stock?.SuppName,
|
|
SuppName: stock?.SuppName,
|
|
InwardDate: stock?.InwardDate,
|
|
});
|
|
RemainngQty -= allocQty;
|
|
}
|
|
}
|
|
|
|
return AllocatedData;
|
|
};
|
|
const handleRowDataClick = async (record, index) => {
|
|
if (!record?.productDetails?.length) return;
|
|
let products = record?.productDetails?.map((e) => ({
|
|
prodId: e?.ProdId,
|
|
ProdVariantName: e?.ProdVariantName,
|
|
}));
|
|
let Data = {
|
|
products: products,
|
|
};
|
|
let Response = await dispatch(getStockDetailsByVariantName(Data)).unwrap();
|
|
if (Response?.data?.statusCode == 1) {
|
|
const result =
|
|
Response?.data?.data?.flatMap((product) =>
|
|
product?.ProductDetail?.flatMap((detail) =>
|
|
detail?.ProdVariantDetails?.flatMap((variant) => {
|
|
const prevQty = getLastBuyQty(
|
|
index,
|
|
variant.ProdVariantName,
|
|
variant.ProdId
|
|
);
|
|
|
|
const allocations = getStockAllocation(
|
|
variant?.StockDetails,
|
|
prevQty
|
|
);
|
|
|
|
const safeAllocations =
|
|
allocations?.length > 0
|
|
? allocations
|
|
: [
|
|
{
|
|
InwardDtlId: variant?.StockDetails?.[0]?.InwardDtlId,
|
|
InwardId: variant?.StockDetails?.[0]?.InwardId,
|
|
InwardDate: variant?.StockDetails?.[0]?.InwardDate,
|
|
AllocatedQty: prevQty,
|
|
SellPrice: variant?.StockDetails?.[0]?.SellPrice ?? 0,
|
|
MRP: variant?.StockDetails?.[0]?.MRP ?? 0,
|
|
OrderRate: variant?.StockDetails?.[0]?.SellPrice ?? 0,
|
|
TotalAmt:
|
|
(prevQty ?? 0) *
|
|
(variant?.StockDetails?.[0]?.SellPrice ?? 0),
|
|
BatchRef: null,
|
|
SuppId: null,
|
|
SuppName: null,
|
|
},
|
|
];
|
|
|
|
return safeAllocations.map((allocation) => ({
|
|
...variant,
|
|
|
|
// ===== PRODUCT LEVEL =====
|
|
ProdId: detail.ProdId,
|
|
ProdName: detail.ProdName,
|
|
ProdCat: product.ProdCat,
|
|
BrandName: detail.BrandName ?? null,
|
|
|
|
// ===== VARIANT / STOCK =====
|
|
PreviousPurchasedQty: prevQty,
|
|
available:
|
|
detail?.StockAvailable === 'N'
|
|
? true
|
|
: (variant.OverAllQty ?? 0) >= prevQty,
|
|
InwardDtlId: allocation.InwardDtlId,
|
|
InwardId: allocation.InwardId,
|
|
OrderQty: allocation.AllocatedQty,
|
|
InwardDate: allocation.InwardDate,
|
|
|
|
TotalAmt:
|
|
(allocation.AllocatedQty ?? 0) * (allocation.SellPrice ?? 0),
|
|
|
|
BalanceQty: detail.BalanceQty ?? 0,
|
|
BatchRef: allocation.BatchRef,
|
|
|
|
// ===== PRICE =====
|
|
MRP: allocation.MRP ?? 0,
|
|
OrderRate: allocation.SellPrice ?? 0,
|
|
SellingPrice: allocation.SellPrice ?? 0,
|
|
|
|
// ===== TAX =====
|
|
TaxId: detail.TaxId ?? null,
|
|
TaxPercentage: detail.TaxPercentage ?? 0,
|
|
TaxAmt: detail.TaxAmt ?? 0,
|
|
TaxName: detail.TaxName,
|
|
WithoutTaxRate: detail.WithoutTaxRate ?? 0,
|
|
|
|
// ===== OTHERS =====
|
|
SinglePc: 'N',
|
|
Size: detail.Size,
|
|
StockAvailable: detail.StockAvailable,
|
|
PartNumber: detail.PartNumber,
|
|
SuppId: allocation.SuppId,
|
|
SuppName: allocation.SuppName,
|
|
QRCode: detail.QRCode,
|
|
QtyBasedPrice: detail.QtyBasedPrice,
|
|
HSNCode: detail.HSNCode ?? null,
|
|
Rack: detail.Rack ?? null,
|
|
|
|
BookingTypeName: 'TakeAway',
|
|
ActiveStatus: 'A',
|
|
ModelNumber: null,
|
|
NoOfPcs: 0,
|
|
Offer: 0,
|
|
OpeningQty: 0,
|
|
FullProductIdentifierDtls: [],
|
|
CounterName: product.CounterName,
|
|
Type: 'P',
|
|
|
|
// ===== META =====
|
|
UniqueId: detail.UniqueId,
|
|
UomName: detail.UomName,
|
|
ScaleType: detail.ScaleType ?? '',
|
|
TokenAvailable: detail.TokenAvailable,
|
|
localId: uuidv4(),
|
|
}));
|
|
})
|
|
)
|
|
) ?? [];
|
|
|
|
setStockDetails(result);
|
|
setpage(1);
|
|
setStockDetailModel(true);
|
|
}
|
|
|
|
// close();
|
|
};
|
|
|
|
const handleSave = () => {
|
|
let Data = StockDetails?.filter((e) => e?.available == true)?.map(
|
|
({ stockDetails, available, PreviousPurchasedQty, ...rest }) => rest
|
|
);
|
|
dispatch(changeOrderCardDetails(Data));
|
|
close();
|
|
};
|
|
const columns = [
|
|
{
|
|
title: 'Sl.No',
|
|
key: 'sno',
|
|
align: 'center',
|
|
render: (_, __, index) => (page - 1) * 10 + index + 1,
|
|
onCell: (record, index) => ({
|
|
onClick: () => handleRowDataClick(record, index),
|
|
style: { cursor: 'pointer' },
|
|
}),
|
|
},
|
|
{
|
|
title: 'Sales Date',
|
|
dataIndex: 'SalesDate',
|
|
key: 'SalesDate',
|
|
align: 'center',
|
|
render: (text) => ExtractDateFormate(text),
|
|
onCell: (record, index) => ({
|
|
onClick: () => handleRowDataClick(record, index),
|
|
style: { cursor: 'pointer' },
|
|
}),
|
|
},
|
|
{
|
|
title: 'Amount',
|
|
dataIndex: 'NetAmount',
|
|
key: 'NetAmount',
|
|
align: 'center',
|
|
onCell: (record, index) => ({
|
|
onClick: () => handleRowDataClick(record, index),
|
|
style: { cursor: 'pointer' },
|
|
}),
|
|
},
|
|
|
|
{
|
|
title: 'No of Products',
|
|
key: 'productCount',
|
|
align: 'center',
|
|
render: (_, record) => (
|
|
<span
|
|
style={{ color: '#1292EE', fontSize: '16px', cursor: 'pointer' }}
|
|
onClick={(e) => {
|
|
e.stopPropagation(); // 👈 IMPORTANT
|
|
ViewProductdetails(record.productDetails);
|
|
}}
|
|
>
|
|
{record?.productDetails?.length || 0}
|
|
</span>
|
|
),
|
|
},
|
|
];
|
|
const stockcolumns = [
|
|
{
|
|
title: 'Sl.No',
|
|
key: 'sno',
|
|
align: 'center',
|
|
render: (_, __, index) => (page - 1) * 10 + index + 1,
|
|
},
|
|
{
|
|
title: 'Product',
|
|
key: 'ProdName',
|
|
dataIndex: 'ProdName',
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: 'Variant',
|
|
key: 'ProdVariantName',
|
|
dataIndex: 'ProdVariantName',
|
|
align: 'center',
|
|
},
|
|
|
|
{
|
|
title: 'Purchased Qty',
|
|
key: 'PreviousPurchasedQty',
|
|
dataIndex: 'PreviousPurchasedQty',
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: 'Total Qty',
|
|
key: 'OverAllQty',
|
|
dataIndex: 'OverAllQty',
|
|
align: 'center',
|
|
render: (value, record) =>
|
|
record?.StockAvailable == 'N' ? '-' : record?.OverAllQty,
|
|
},
|
|
|
|
{
|
|
title: 'available',
|
|
key: 'available',
|
|
dataIndex: 'available',
|
|
align: 'center',
|
|
render: (value) => (value ? 'Yes' : 'No'),
|
|
},
|
|
];
|
|
|
|
const productColumns = [
|
|
{
|
|
title: 'Sl.No',
|
|
key: 'sno',
|
|
align: 'center',
|
|
render: (_, __, index) => index + 1,
|
|
},
|
|
{
|
|
title: 'Product Name',
|
|
dataIndex: 'ProdName',
|
|
key: 'ProdName',
|
|
align: 'center',
|
|
render: (_, record) =>
|
|
`${record?.ProdName || '-'}${record?.UomName ? ` ${record.Size + record.UomName}` : ''}`,
|
|
},
|
|
{
|
|
title: 'Qty',
|
|
dataIndex: 'SalesQty',
|
|
key: 'SalesQty',
|
|
align: 'center',
|
|
render: (_, record) => record?.SalesQty || '-',
|
|
},
|
|
{
|
|
title: 'Variant',
|
|
key: 'ProdVariantName',
|
|
align: 'ProdVariantName',
|
|
render: (_, record) => record?.ProdVariantName || '-',
|
|
},
|
|
{
|
|
title: 'Rate',
|
|
key: 'Rate',
|
|
align: 'right',
|
|
render: (_, record) => record?.Rate || 0,
|
|
},
|
|
{
|
|
title: 'MRP',
|
|
key: 'MRP',
|
|
align: 'right',
|
|
render: (_, record) => record?.MRP || 0,
|
|
},
|
|
];
|
|
|
|
const disableFutureDates = (current) => {
|
|
return current && current > dayjs().endOf('day');
|
|
};
|
|
const onRangeChange = (dates) => {
|
|
setSelectedRange(dates);
|
|
};
|
|
const getRangePickerValue = () => selectedRange || [dayjs(), dayjs()];
|
|
|
|
return (
|
|
<>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
<div>
|
|
<p>Customer Name : {CustomerDetails?.CustName}</p>
|
|
<p>Customer Name : {CustomerDetails?.value}</p>
|
|
</div>
|
|
<div className="fromlabelDate">
|
|
<label>Select Date</label>
|
|
<RangePicker
|
|
onChange={onRangeChange}
|
|
format="DD-MMM-YYYY" // display format
|
|
disabledDate={disableFutureDates}
|
|
inputReadOnly={true}
|
|
value={getRangePickerValue()}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="reportTable">
|
|
<Tables
|
|
columns={columns}
|
|
data={custpmerOrderData}
|
|
dataSource={custpmerOrderData}
|
|
pagination={handlePageChange}
|
|
/>{' '}
|
|
<Modal
|
|
open={productModal}
|
|
title="Product Details"
|
|
width={700}
|
|
footer={null}
|
|
onCancel={() => setProductModal(false)}
|
|
>
|
|
<Tables
|
|
columns={productColumns}
|
|
data={selectedProducts}
|
|
pagination={false}
|
|
/>
|
|
</Modal>
|
|
</div>
|
|
|
|
<DefaultModal
|
|
open={stockDetailModel}
|
|
title="Stock Details"
|
|
handleCancel={() => {
|
|
setStockDetailModel(false);
|
|
setStockDetails([]);
|
|
}}
|
|
footer={false}
|
|
width={700}
|
|
children={
|
|
<div>
|
|
<Tables
|
|
columns={stockcolumns}
|
|
data={StockDetails}
|
|
pagination={handlePageChange}
|
|
/>{' '}
|
|
<div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
|
|
<Buttons
|
|
buttonText="SUBMIT"
|
|
color="901D77"
|
|
icon={<ArrowRightOutlined />}
|
|
handleSubmit={() => {
|
|
handleSave();
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CustomerOrders;
|