2040 lines
61 KiB
JavaScript
2040 lines
61 KiB
JavaScript
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useDispatch } from 'react-redux';
|
|
import { ImWarning } from 'react-icons/im';
|
|
import {
|
|
Form,
|
|
Table,
|
|
Input,
|
|
Select,
|
|
AutoComplete,
|
|
Button,
|
|
Tooltip,
|
|
} from 'antd';
|
|
import { BsUpcScan } from 'react-icons/bs';
|
|
import { FaLink } from 'react-icons/fa';
|
|
import {
|
|
DeleteFilled,
|
|
ArrowRightOutlined,
|
|
SearchOutlined,
|
|
} from '@ant-design/icons';
|
|
import { Messages } from '../../Components/Notifications/Messages.jsx';
|
|
import { InputField } from '../../Components/Forms/InputField.jsx';
|
|
import Buttons from '../../Components/Forms/Buttons.jsx';
|
|
import {
|
|
getSession,
|
|
pdfDiv,
|
|
printDiv,
|
|
validateSafeInput,
|
|
} from '../../Services/Others';
|
|
import FormHeader from '../PageComponents/FormHeader.jsx';
|
|
import { DropDowns } from '../../Components/Forms/DropDown.jsx';
|
|
import { CiBarcode } from 'react-icons/ci';
|
|
import {
|
|
AdminUserData,
|
|
Emailsend,
|
|
getProdQuoaVariantdata,
|
|
getPurProductData,
|
|
postPurcQuotation,
|
|
} from '../../Features/PurchaseQuotation/PurchaseQuotation.js';
|
|
import '../../Styles/PurchaseQuotation/PurchaseQuotation.scss';
|
|
import PurchaseQuotationPrint from './PurchaseQuotationPrint.jsx';
|
|
import { getPurchaseTaxTypeData } from '../../Features/StockMaster/StockMaster.js';
|
|
import {
|
|
changeBreadCrumb,
|
|
getEmpAccess,
|
|
} from '../../Features/AppPage/CenterPage.js';
|
|
import { useAuth } from '../../AuthContext.jsx';
|
|
import {
|
|
getAllCustomer,
|
|
getPreferenceData,
|
|
} from '../../Features/BookingScreen/BookingData/BookingData.js';
|
|
const subDirectory = import.meta.env.BASE_URL;
|
|
import TooltipWrapper from '../../Components/Tooltip/Tooltip';
|
|
import { FaEye, FaPrint } from 'react-icons/fa';
|
|
import { MdOutlineMail } from 'react-icons/md';
|
|
import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx';
|
|
import FloatLabel from '../../Components/Forms/FloatLabel/index.jsx';
|
|
import { debounce } from 'lodash';
|
|
import { getPrintSelectionComponentData } from '../../Features/ThemeChange/ThemeChange.js';
|
|
import { PrintStyleFunction } from '../paymentpdfPage/PrintStyleFunction.js';
|
|
import { isMobile } from 'react-device-detect';
|
|
import { PurchaseQtMobilePrint } from './PurchaseQtMobilePrint.js';
|
|
import BarCodeScan from '../../Services/BarCodeScan.jsx';
|
|
const SalesQuotationForm = () => {
|
|
const { SadminuserAccess } = useAuth();
|
|
let SAAccessCommonMaster = SadminuserAccess?.find(
|
|
(e) => e?.MenuName === 'Sales Quotation'
|
|
);
|
|
const formRef = useRef(null);
|
|
|
|
const [form] = Form.useForm();
|
|
const [emailform] = Form.useForm();
|
|
const dispatch = useDispatch();
|
|
const navigate = useNavigate();
|
|
const CompId = getSession('CompId');
|
|
const BranchId = getSession('BranchId');
|
|
const AppId = getSession('AppId');
|
|
const UserId = getSession('UserId');
|
|
const UserType = getSession('UserType');
|
|
const [messageType, setMessageType] = useState(null);
|
|
const [messageData, setMessageData] = useState(null);
|
|
const [AdminUser, setAdminUser] = useState([]);
|
|
const [SelecAdminUser, setSelecAdminUser] = useState(null);
|
|
const [SelTaxType, setSelTaxType] = useState(null);
|
|
const [SelTaxTypeName, setSelTaxTypeName] = useState(null);
|
|
const [ProductData, setProductData] = useState([]);
|
|
const [AllCustomer, setAllCustomer] = useState(null);
|
|
|
|
const [SelProduct, setSelProduct] = useState(null);
|
|
const [selectedProductName, setSelectedProductName] = useState(null);
|
|
const [productSearchText, setProductSearchText] = useState('');
|
|
const [scanner, setScanner] = useState(false);
|
|
|
|
console.log(SelTaxTypeName, 'SelTaxTypeName');
|
|
const [selectedProductVariantData, setselectedProductVariantData] =
|
|
useState(null);
|
|
const [Variants, setVariants] = useState();
|
|
const [TableData, setTableData] = useState([]);
|
|
const [editingKey, setEditingKey] = useState('');
|
|
const [index, setindex] = useState();
|
|
const [Delete, setDelete] = useState(false);
|
|
const [allowDecimal, setAllowDecimal] = useState(false);
|
|
const [TotalBillAmount, setTotalBillAmount] = useState(null);
|
|
const [TotalCgst, setTotalCgst] = useState(null);
|
|
const [TotalSgst, setTotalSgst] = useState(null);
|
|
const [TotalIgst, setTotalIgst] = useState(null);
|
|
const [TotalAmount, setTotalAmount] = useState(null);
|
|
const [PurcTaxTypeData, setPurcTaxTypeData] = useState(null);
|
|
const [PrintData, setPrintData] = useState([]);
|
|
const isEditing = (record, index) => index === editingKey;
|
|
const [empData, setEmpData] = useState();
|
|
const [addnewAccess, setaddnewAccess] = useState(true);
|
|
const [isbarcode, setisbarcode] = useState(false);
|
|
const [isSubmitted, setIsSubmitted] = useState(false);
|
|
const [usrMailDataModel, setusrMailDataModel] = useState(false);
|
|
const [EnteredMailId, setEnteredMailId] = useState(null);
|
|
const [PrintTempData, setPrintTempData] = useState([]);
|
|
console.log(TableData, 'TableData');
|
|
const items = [
|
|
{
|
|
name: 'Home',
|
|
link: `${subDirectory}app-page/home`,
|
|
},
|
|
|
|
{
|
|
name: 'Sales Quotation',
|
|
link: `${subDirectory}setting/sales-quotation`,
|
|
},
|
|
];
|
|
|
|
// const QuotationStylepdf = `<style>
|
|
// * {
|
|
// box-sizing: border-box;
|
|
// font-family: 'Poppins', sans-serif;
|
|
// }
|
|
|
|
// body {
|
|
// margin: 0;
|
|
// padding: 0;
|
|
// font-size: 12px;
|
|
// }
|
|
|
|
// .Quo-Print-Body {
|
|
// padding: 20px;
|
|
// width: 100%;
|
|
// }
|
|
|
|
// .Quo-Print-Content {
|
|
// border: 1px solid #aaa;
|
|
// padding: 16px;
|
|
// margin-bottom: 24px;
|
|
// page-break-after: always;
|
|
// }
|
|
|
|
// .Quo-print-Logo {
|
|
// width: 50px;
|
|
// height: 50px;
|
|
// margin: 10px;
|
|
// }
|
|
|
|
// .Quo-Print-Header {
|
|
// display: flex;
|
|
// justify-content: space-between;
|
|
// align-items: flex-start;
|
|
// }
|
|
|
|
// .Quo-Print-Company, .Quo-Print-Qno {
|
|
// font-size: 12px;
|
|
// }
|
|
|
|
// .Quo-Print-Cname {
|
|
// font-size: 16px;
|
|
// font-weight: bold;
|
|
// }
|
|
|
|
// .Quo-Print-address {
|
|
// font-size: 12px;
|
|
// }
|
|
|
|
// .Horizondal-line {
|
|
// border-bottom: 1px solid #aaa;
|
|
// margin: 8px 0;
|
|
// }
|
|
|
|
// .Quo-Print-Customer {
|
|
// font-size: 12px;
|
|
// margin-top: 8px;
|
|
// }
|
|
|
|
// .Quo-Print-Table {
|
|
// margin-top: 12px;
|
|
// overflow-x: auto;
|
|
// }
|
|
|
|
// .Quo-Print-ProTable {
|
|
// width: 100%;
|
|
// border-collapse: collapse;
|
|
// font-size: 11px;
|
|
// table-layout: fixed;
|
|
// }
|
|
|
|
// .Quo-Print-ProTable th,
|
|
// .Quo-Print-ProTable td {
|
|
// border: 1px solid #aaa;
|
|
// padding: 6px;
|
|
// word-wrap: break-word;
|
|
// }
|
|
|
|
// .Quo-Print-headingData {
|
|
// background-color: #f2f2f2;
|
|
// font-weight: bold;
|
|
// text-align: center;
|
|
// }
|
|
|
|
// .Quo-Print-TableDataSno,
|
|
// .Quo-Print-TableDataName,
|
|
// .Quo-Print-TableData,
|
|
// .Quo-Print-TableDataAmt {
|
|
// text-align: left;
|
|
// }
|
|
|
|
// .Quo-Print-TableDataAmt {
|
|
// text-align: right;
|
|
// }
|
|
|
|
// .Quo-Print-Summary {
|
|
// margin-top: 16px;
|
|
// display: flex;
|
|
// justify-content: flex-end;
|
|
// }
|
|
|
|
// .Quo-Print-Total {
|
|
// width: 280px;
|
|
// border: 1px solid #000;
|
|
// padding: 8px;
|
|
// font-size: 12px;
|
|
// }
|
|
|
|
// .Quo-Print-Total table {
|
|
// width: 100%;
|
|
// }
|
|
|
|
// .Quo-Print-SummTableData {
|
|
// text-align: right;
|
|
// padding: 4px 6px;
|
|
// }
|
|
// </style>`;
|
|
// const QuotationStyle = `<style>
|
|
// .Quo-Print-Body{
|
|
// height: 100%;
|
|
// margin: 0vw 0vh;
|
|
// }
|
|
// .page {
|
|
|
|
// page-break-after: always;
|
|
// page-break-inside: avoid;
|
|
// }
|
|
|
|
// .Quo-Print-Content{
|
|
// display:flex;
|
|
// flex-direction:column;
|
|
// height:95vh;
|
|
// width:93vw;
|
|
// border:0.5px solid rgb(170, 164, 164);
|
|
// margin:2rem 1rem 1rem 1rem;
|
|
// gap:1.5rem;
|
|
// page-break-after: always;
|
|
|
|
// }
|
|
// .Quo-print-Logo{
|
|
// width: 50px ;
|
|
// height: 50px;
|
|
// margin:10px 0 0 10px;
|
|
// }
|
|
// .Quo-Print-ComCus{
|
|
// display:flex;
|
|
// flex-direction:column;
|
|
// height:18vh;
|
|
// justify-content:space-between;
|
|
// }
|
|
// .Quo-Print-Tabsum{
|
|
// display:flex;
|
|
// flex-direction:column;
|
|
// justify-content:space-between;
|
|
// gap:1rem;
|
|
// height:60vh;
|
|
// }
|
|
// .Quo-Print-Header{
|
|
// display: flex;
|
|
// flex-direction: row;
|
|
// justify-content: space-between;
|
|
|
|
// }
|
|
|
|
// .Quo-Print-Company{
|
|
// display:flex;
|
|
// flex-direction:column;
|
|
// padding:10px;
|
|
// gap:0.1rem;
|
|
// }
|
|
// .Quo-Print-Cname{
|
|
// font-size:25px;
|
|
// }
|
|
// .Quo-Print-address{
|
|
// font-size:22px;
|
|
// display:flex;
|
|
// flex-wrap:wrap;
|
|
// }
|
|
// .Quo-Print-Qno{
|
|
// display:flex;
|
|
// flex-direction:column;
|
|
// padding:10px;
|
|
// gap:0.1rem;
|
|
// }
|
|
// .Quo-Print-Customer{
|
|
// display:flex;
|
|
// flex-direction:Column;
|
|
// padding-left:10px;
|
|
// gap:0.1rem;
|
|
// }
|
|
// .Horizondal-line{
|
|
// border-bottom: 0.5px solid rgb(170, 164, 164);
|
|
// }
|
|
// .Quo-Print-Table{
|
|
// display:flex;
|
|
// }
|
|
|
|
// .Quo-Print-ProTable{
|
|
// width:100%;
|
|
// border-collapse: collapse;
|
|
// }
|
|
// .Quo-Print-DataRow{
|
|
// line-height:2rem;
|
|
// }
|
|
// .Quo-Print-tableheader{
|
|
// border-top:0.5px solid rgb(170, 164, 164);
|
|
// border-bottom: 0.5px solid rgb(170, 164, 164);
|
|
// line-height:4rem;
|
|
// }
|
|
// .Quo-Print-TableData{
|
|
// text-align:right;
|
|
// padding:1px;
|
|
// font-size:22px;
|
|
|
|
// }
|
|
// .Quo-Print-TableDataSno{
|
|
// text-align:center;
|
|
// padding:1px;
|
|
// font-size:20px;
|
|
|
|
// }
|
|
|
|
// .Quo-Print-TableDataName{
|
|
// text-align:left;
|
|
// padding-left:1px;
|
|
// font-size:20px;
|
|
// }
|
|
// .Quo-Print-headingData{
|
|
// text-align:center;
|
|
// padding:1px;
|
|
// font-size:22px;
|
|
// }
|
|
// .Quo-Print-TableDataAmt{
|
|
// text-align:right;
|
|
// padding-right:5px;
|
|
// font-size:20px;
|
|
// }
|
|
// .Quo-Print-Summary{
|
|
// display:flex;
|
|
// flex-direction:row;
|
|
// justify-content: flex-end;
|
|
|
|
// }
|
|
// .Quo-Print-SummTableData{
|
|
// text-align:right;
|
|
// padding:1px;
|
|
// font-size:22px;
|
|
|
|
// }
|
|
// .Quo-Print-Total{
|
|
// display:flex;
|
|
// justify-content:flex-end;
|
|
// border:0.5px solid black;
|
|
// width:300px;
|
|
// margin-right: 10px;
|
|
// font-size:20px;
|
|
// }
|
|
|
|
// }
|
|
|
|
// </style>`;
|
|
|
|
const PurchaseOrderStyle = `<style>
|
|
@media print {
|
|
@page {
|
|
size: A4;
|
|
margin: 0;
|
|
}
|
|
|
|
.Quo-Print-Body {
|
|
width: 195mm;
|
|
margin: 0 auto;
|
|
// padding: 10mm;
|
|
}
|
|
}
|
|
|
|
.Quo-Print-Body {
|
|
margin: 0;
|
|
padding: 10px;
|
|
background: white;
|
|
}
|
|
|
|
.Quo-Print-Content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
max-width: 200mm;
|
|
margin: 0 auto;
|
|
border: 1px solid rgb(170, 164, 164);
|
|
padding: 10px;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
|
|
|
}
|
|
.Quo-print-Logo{
|
|
width: 50px ;
|
|
height: 50px;
|
|
margin:5px 0 0 5;
|
|
}
|
|
.Quo-Print-ComCus{
|
|
display:flex;
|
|
flex-direction:column;
|
|
height:18vh;
|
|
justify-content:space-between;
|
|
}
|
|
.Quo-Print-Tabsum{
|
|
display:flex;
|
|
flex-direction:column;
|
|
justify-content:space-between;
|
|
gap:1rem;
|
|
height:60vh;
|
|
}
|
|
.Quo-Print-Header{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
.Quo-Print-Company{
|
|
display:flex;
|
|
flex-direction:column;
|
|
padding:10px;
|
|
gap:0.1rem;
|
|
}
|
|
.Quo-Print-Cname{
|
|
font-size:25px;
|
|
}
|
|
.Quo-Print-address{
|
|
font-size:22px;
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
}
|
|
.Quo-Print-Qno{
|
|
display:flex;
|
|
flex-direction:column;
|
|
padding:10px;
|
|
gap:0.1rem;
|
|
}
|
|
.Quo-Print-Customer{
|
|
display:flex;
|
|
flex-direction:Column;
|
|
padding-left:10px;
|
|
gap:0.1rem;
|
|
}
|
|
.Horizondal-line{
|
|
border-bottom: 0.5px solid rgb(170, 164, 164);
|
|
}
|
|
.Quo-Print-Table{
|
|
display:flex;
|
|
}
|
|
.Quo-Print-ProTable {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.Quo-Print-DataRow {
|
|
// line-height: 2.5rem;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.Quo-Print-tableheader {
|
|
background-color: #f8f9fa;
|
|
border-top: 1px solid rgb(170, 164, 164);
|
|
border-bottom: 1px solid rgb(170, 164, 164);
|
|
line-height: 3rem;
|
|
}
|
|
|
|
.Quo-Print-TableData {
|
|
text-align: right;
|
|
padding: 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.Quo-Print-TableDataSno {
|
|
text-align: center;
|
|
padding: 8px;
|
|
font-size: 14px;
|
|
width: 60px;
|
|
}
|
|
|
|
.Quo-Print-TableDataName {
|
|
text-align: left;
|
|
padding: 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.Quo-Print-headingData {
|
|
text-align: center;
|
|
padding: 8px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
.Quo-Print-TableDataAmt{
|
|
text-align:right;
|
|
padding-right:5px;
|
|
font-size:25px;
|
|
}
|
|
.Quo-Print-Summary{
|
|
display:flex;
|
|
flex-direction:row;
|
|
justify-content: flex-end;
|
|
|
|
}
|
|
.Quo-Print-SummTableData{
|
|
text-align:right;
|
|
padding:1px;
|
|
font-size:22px;
|
|
|
|
}
|
|
.Quo-Print-Total{
|
|
display:flex;
|
|
justify-content:flex-end;
|
|
border:0.5px solid black;
|
|
width:300px;
|
|
margin-right: 10px;
|
|
font-size:20px;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
</style>`;
|
|
|
|
useEffect(() => {
|
|
dispatch(changeBreadCrumb({ items: items }));
|
|
getAdminUserdata();
|
|
getProduct();
|
|
getPurchaseTaxType();
|
|
fetchdata();
|
|
getPreference();
|
|
// if (UserType === "Employee") {
|
|
// fetchApi()
|
|
// }
|
|
}, []);
|
|
// console.log(TableData, "TableDataTableData")
|
|
const debouncedScannerSearch = useCallback(
|
|
debounce((value) => {
|
|
const qr = value?.trim();
|
|
|
|
const matchedProduct = ProductData.find(
|
|
(p) => p.QRCode?.toLowerCase() === qr?.toLowerCase()
|
|
);
|
|
if (matchedProduct) {
|
|
let productName = {};
|
|
productName.label = `${matchedProduct?.ProdName} (${matchedProduct.Size} ${matchedProduct.UomName})${matchedProduct?.BrandName ? ` - ${matchedProduct?.BrandName}` : ''}`;
|
|
ProductDropDownChange(matchedProduct.ProdId, productName);
|
|
if (matchedProduct?.ProdVariantPriceDetails?.length < 2) {
|
|
setSelectedProductName('');
|
|
setSelProduct(null);
|
|
}
|
|
} else {
|
|
setMessageType('error');
|
|
setMessageData('The Scanned Product not Available in Product List');
|
|
}
|
|
}, 300),
|
|
[ProductData]
|
|
);
|
|
|
|
const getPreference = async () => {
|
|
const data = { AppId: AppId, CompId: CompId, BranchId: BranchId, UserId: UserId };
|
|
const { data: res } = await dispatch(getPreferenceData(data)).unwrap();
|
|
const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find(
|
|
(setting) =>
|
|
setting?.SettingIdName?.toLowerCase() === 'decimal' &&
|
|
setting?.SettingValue === 'Y'
|
|
);
|
|
if (decimalSetting) {
|
|
setAllowDecimal(true);
|
|
}
|
|
};
|
|
const changebarcode = useCallback(() => {
|
|
setisbarcode((prev) => !prev);
|
|
}, []);
|
|
useEffect(() => {
|
|
if (UserType === 'Employee') {
|
|
fetchApi();
|
|
}
|
|
}, [UserType]);
|
|
useEffect(() => {
|
|
let hasAccess = false;
|
|
|
|
if (UserType === 'Admin' || UserType === 'Super Admin') {
|
|
hasAccess = true;
|
|
} else if (UserType === 'Employee') {
|
|
hasAccess = empData?.AddAccess === 'Y';
|
|
} else if (UserType === 'Super Admin User') {
|
|
hasAccess = SAAccessCommonMaster?.AddAccess === 'Y';
|
|
}
|
|
|
|
setaddnewAccess(!hasAccess);
|
|
}, [empData, SAAccessCommonMaster, UserType]);
|
|
|
|
const fetchApi = async () => {
|
|
let data = {
|
|
CompId: CompId,
|
|
BranchId: BranchId,
|
|
AppId: AppId,
|
|
EmpId: UserId,
|
|
};
|
|
let response = await dispatch(getEmpAccess(data)).unwrap();
|
|
let datas = response?.data?.data?.[0]?.EmpAccessDetails?.filter(
|
|
(item) => item.ConfigName === 'Sales Quotation'
|
|
);
|
|
setEmpData(datas?.[0]);
|
|
};
|
|
|
|
// useEffect(() => {
|
|
// Print();
|
|
// }, [PrintData]);
|
|
|
|
useEffect(() => {
|
|
let total = TableData?.reduce((accumulator, currentValue) => {
|
|
return accumulator + currentValue.NetAmt;
|
|
}, 0);
|
|
setTotalAmount(total);
|
|
let cgst = TableData?.filter(
|
|
(item) => item.TaxName?.toLowerCase() === 'cgst,sgst'
|
|
);
|
|
let totalgst = cgst?.reduce((accumulator, currentValue) => {
|
|
return accumulator + currentValue.TaxAmt;
|
|
}, 0);
|
|
setTotalCgst(totalgst / 2);
|
|
setTotalSgst(totalgst / 2);
|
|
let igst = TableData?.filter(
|
|
(item) => item.TaxName?.toLowerCase() === 'igst'
|
|
);
|
|
let totaligst = igst?.reduce((accumulator, currentValue) => {
|
|
return accumulator + currentValue.TaxAmt;
|
|
}, 0);
|
|
setTotalIgst(totaligst);
|
|
let billtotal = TableData?.reduce((accumulator, currentValue) => {
|
|
return accumulator + currentValue.BillAmount;
|
|
}, 0);
|
|
setTotalBillAmount(billtotal);
|
|
}, [TableData]);
|
|
|
|
const getProduct = async () => {
|
|
let Product = await dispatch(
|
|
getPurProductData({
|
|
CompId: CompId,
|
|
AppId: AppId,
|
|
BranchId: BranchId,
|
|
ActiveStatus: 'A',
|
|
})
|
|
).unwrap();
|
|
if (Product?.data?.statusCode === 1) {
|
|
let Productonlydata = Product?.data?.data?.filter(
|
|
(item) =>
|
|
item?.ProdTypeName === 'Product' &&
|
|
(item?.StockAvailable === 'Y' ? item?.BalanceQty > 0 : true)
|
|
);
|
|
|
|
setProductData(Productonlydata);
|
|
} else {
|
|
setProductData([]);
|
|
}
|
|
};
|
|
const getAdminUserdata = async () => {
|
|
let adminuser = await dispatch(AdminUserData()).unwrap();
|
|
if (adminuser?.data?.statusCode === 1) {
|
|
setAdminUser(adminuser?.data?.data);
|
|
console.log(adminuser?.data?.data, 'adminuser');
|
|
} else {
|
|
setAdminUser([]);
|
|
}
|
|
};
|
|
const fetchdata = async () => {
|
|
let res = await dispatch(
|
|
getAllCustomer({ CompId: CompId, AppId: AppId, branchId: BranchId })
|
|
).unwrap();
|
|
await setAllCustomer(res?.data?.data);
|
|
|
|
const Data = { AppId, CompId, BranchId };
|
|
|
|
const printtemp = await dispatch(
|
|
getPrintSelectionComponentData(Data)
|
|
).unwrap();
|
|
const printTypeName = printtemp?.data?.data
|
|
?.flatMap((template) => template.ComponentDetails || [])
|
|
?.find(
|
|
(comp) =>
|
|
comp.SetasDefault === 'Y' && comp.PrintTypeName === 'Sales Quotation'
|
|
);
|
|
setPrintTempData(printTypeName);
|
|
};
|
|
|
|
const getPurchaseTaxType = async () => {
|
|
let res = await dispatch(getPurchaseTaxTypeData()).unwrap();
|
|
if (res?.data?.statusCode === 1) {
|
|
setPurcTaxTypeData(res?.data?.data);
|
|
let tempniltax = res?.data?.data?.find(
|
|
(item) => item?.ConfigName?.toLowerCase() === 'withtax'
|
|
);
|
|
setSelTaxType(tempniltax?.ConfigId);
|
|
setSelTaxTypeName(tempniltax?.ConfigName);
|
|
formRef.current?.setFieldsValue({ TaxType: tempniltax?.ConfigId });
|
|
} else {
|
|
setPurcTaxTypeData(null);
|
|
}
|
|
};
|
|
// const Print = async () => {
|
|
// if (PrintData?.length > 0) {
|
|
// await printDiv(`Pur-Quot-Print`, QuotationStyle);
|
|
// }
|
|
// };
|
|
const handleAdminUserDropDownChange = (UserId) => {
|
|
setSelecAdminUser(UserId);
|
|
formRef.current?.setFieldsValue({ CustId: UserId });
|
|
setIsSubmitted();
|
|
};
|
|
const handleQuoTaxTypeChange = (taxtype) => {
|
|
setSelTaxType(taxtype);
|
|
formRef.current?.setFieldsValue({ TaxType: taxtype });
|
|
let taxname = PurcTaxTypeData?.find((item) => item.ConfigId === taxtype);
|
|
setSelTaxTypeName(taxname?.ConfigName);
|
|
let taxchange = TableData?.map((item) => {
|
|
return {
|
|
...item,
|
|
TaxAmt:
|
|
taxname?.ConfigName?.toLowerCase() === 'withtax'
|
|
? (item?.NetAmt * parseInt(item?.TaxPercentage)) /
|
|
(100 + parseInt(item?.TaxPercentage))?.toFixed(2)
|
|
: 0,
|
|
};
|
|
});
|
|
|
|
setTableData(taxchange);
|
|
};
|
|
const handleScanSearch = () => {
|
|
if (scanner === false) {
|
|
setMessageType('success');
|
|
setMessageData('Search by QrCode/BarCode Enabled');
|
|
} else {
|
|
setMessageType('success');
|
|
setMessageData('Search by QrCode/BarCode Disabled');
|
|
}
|
|
setScanner((prev) => !prev);
|
|
setSelectedProductName(null);
|
|
setselectedProductVariantData(null);
|
|
setVariants(null);
|
|
formRef?.current?.setFieldsValue({
|
|
ProdId: null,
|
|
VarProdId: null,
|
|
});
|
|
};
|
|
const handleProductSearch = (value) => {
|
|
if (scanner) {
|
|
debouncedScannerSearch(value);
|
|
}
|
|
setProductSearchText(value);
|
|
setSelectedProductName(value);
|
|
setselectedProductVariantData([]);
|
|
setVariants([]);
|
|
};
|
|
const ProductDropDownChange = async (ProdId, option) => {
|
|
setProductSearchText('');
|
|
setSelectedProductName(option?.label ? option?.label : '');
|
|
formRef?.current?.resetFields(['VarProdId']);
|
|
|
|
console.log(ProductData, 'ProdIdProdId');
|
|
setSelProduct(ProdId);
|
|
|
|
formRef.current?.setFieldsValue({ ProdId: ProdId });
|
|
|
|
let x = ProductData?.find((e) => e.ProdId === ProdId)?.ProdName;
|
|
|
|
let variantValues1 = await dispatch(
|
|
getProdQuoaVariantdata({
|
|
CompId: CompId,
|
|
AppId: AppId,
|
|
BranchId: BranchId,
|
|
prodName: x,
|
|
})
|
|
).unwrap();
|
|
|
|
let variants1 = variantValues1?.data?.data;
|
|
|
|
// let cc = variants1?.[0]?.ProductDetail;
|
|
let cc = variants1?.filter((item) => item?.ProdName == x)?.[0]
|
|
?.ProductDetail;
|
|
|
|
setVariants(
|
|
cc?.[0]?.ProdVariantDetails?.map((detail) => ({
|
|
...detail,
|
|
ProdIdProdName: `${detail.ProdVariantName} ${detail.ProdId}`,
|
|
}))
|
|
);
|
|
|
|
if (cc?.[0]?.ProdVariantDetails?.length < 2) {
|
|
if (TableData?.some((e) => e.ProdId == ProdId)) {
|
|
setMessageType('error');
|
|
|
|
setMessageData('Already Product Exists');
|
|
} else {
|
|
let ProductData1 = ProductData?.find((e) => e.ProdId === ProdId);
|
|
console.log(ProductData1, 'ProductData1ProductData1');
|
|
let ProduData2 = {
|
|
ProdId: ProductData1?.ProdId,
|
|
ProdName: ProductData1?.ProdName,
|
|
UomName: ProductData1?.UomName,
|
|
Price: ProductData1?.SellPrice,
|
|
TaxName: ProductData1?.TaxName,
|
|
HSNCode: ProductData1?.HSNCode,
|
|
Size: ProductData1?.Size,
|
|
// OnePcsAvailable:ProductData1?.OnePcsAvailable,
|
|
// NumberofPieceinside: ProductData1?.NoOfPcs,
|
|
// AmountPerPiece: ProductData1?.OnePcsPrice,
|
|
TaxId: ProductData1?.TaxId,
|
|
TaxPercentage: ProductData1?.TaxPercentage,
|
|
};
|
|
|
|
let tempPurData = {
|
|
...ProduData2,
|
|
Qty: 0,
|
|
// 'InwardPrice': 0,
|
|
PurcDisc: 0,
|
|
NetAmt: 0,
|
|
BillAmount: 0,
|
|
DiscType: 'P',
|
|
// 'WhSalePrice': 0,
|
|
// 'ReceivedQty': 0,
|
|
// 'AcceptedQty': 0,
|
|
// 'RejectedQty': 0,
|
|
// "OfferPrice": 0,
|
|
// "SpecialPrice": 0,
|
|
ProdVariantName: 'Variant 1',
|
|
// "FreeItem": 0,
|
|
// 'TaxPerc': PurcselectedTax ? PurcselectedTax : 0,
|
|
TaxAmt: 0,
|
|
// 'TaxType': SelectedPurcTaxType ? SelectedPurcTaxType : 0,
|
|
};
|
|
form.setFieldsValue({
|
|
[`BalanceQty${TableData.length + 1}`]: undefined,
|
|
// [`ReceivedQty${index}`]: undefined,
|
|
// [`AcceptedQty${index}`]: undefined,
|
|
// [`RejectedQty${index}`]: undefined,
|
|
[`Amount${TableData.length + 1}`]: ProductData1?.SellPrice,
|
|
// [`FreeQty${index}`]: undefined,
|
|
// [`InwardPrice${index}`]: undefined,
|
|
// [`MRP${index}`]: undefined,
|
|
[`PurcDisc${TableData.length + 1}`]: 0,
|
|
[`SellPrice${TableData.length + 1}`]: ProductData1?.SellPrice,
|
|
// [`WhSalePrice${index}`]: undefined,
|
|
// [`offerSalePrice${index}`]: undefined,
|
|
// [`splSalePrice${index}`]: undefined
|
|
});
|
|
setTableData([...TableData, tempPurData]);
|
|
}
|
|
}
|
|
};
|
|
|
|
const ProductVariantDropDownChange = (value) => {
|
|
const ProdName2 = Variants?.filter(
|
|
(item) => item.ProdIdProdName === value
|
|
)?.[0]?.ProdVariantName;
|
|
|
|
const ProdName1 = TableData?.some(
|
|
(e) => e.ProdId == SelProduct && e.ProdVariantName === ProdName2
|
|
);
|
|
if (ProdName1) {
|
|
setMessageType('error');
|
|
setMessageData('Already variant Exists');
|
|
} else {
|
|
const ProdName = Variants?.filter(
|
|
(item) => item.ProdIdProdName === value
|
|
)?.[0]?.ProdVariantName;
|
|
const OnePcsAvailable = Variants?.filter(
|
|
(item) => item.ProdIdProdName === value
|
|
)?.[0]?.OnePcsAvailable;
|
|
formRef?.current?.setFieldsValue({ VarProdId: value });
|
|
setselectedProductVariantData(ProdName);
|
|
|
|
// let x = VariantData1?.filter((e) => e.InwardDtlId == value);
|
|
// let u = ProductData?.find((e) => e.ProdId == selectedProductData);
|
|
// console.log(first)
|
|
let ProductData1 = ProductData?.find((e) => e.ProdId == SelProduct);
|
|
console.log(ProductData1, 'ProductData1ProductData1');
|
|
let mrp;
|
|
let sellprice;
|
|
if (ProdName == 'Variant 1') {
|
|
mrp = ProductData1?.MRP;
|
|
sellprice = ProductData1?.SellPrice;
|
|
} else {
|
|
mrp = ProductData1?.ProdVariantPriceDetails?.find(
|
|
(item) => item.ProdVariantName == ProdName
|
|
)?.MRP;
|
|
sellprice = ProductData1?.ProdVariantPriceDetails?.find(
|
|
(item) => item.ProdVariantName == ProdName
|
|
)?.SellPrice;
|
|
}
|
|
|
|
let ProduData2 = {
|
|
ProdId: ProductData1?.ProdId,
|
|
// MRP: mrp,
|
|
ProdName: ProductData1?.ProdName,
|
|
UomName: ProductData1?.UomName,
|
|
Price: sellprice,
|
|
TaxName: ProductData1?.TaxName,
|
|
HSNCode: ProductData1?.HSNCode,
|
|
// StockAvailable: ProductData1?.StockAvailable,
|
|
// OnePcsAvailable:ProductData1?.OnePcsAvailable,
|
|
// NumberofPieceinside: ProductData1?.NoOfPcs,
|
|
// AmountPerPiece: ProductData1?.OnePcsPrice,
|
|
Size: ProductData1?.Size,
|
|
TaxId: ProductData1?.TaxId,
|
|
TaxPercentage: ProductData1?.TaxPercentage,
|
|
};
|
|
// ProduData2["StockAvailable"]="Y"
|
|
|
|
let tempPurData = {
|
|
...ProduData2,
|
|
Qty: 0,
|
|
PurcDisc: 0,
|
|
NetAmt: 0,
|
|
BillAmount: 0,
|
|
DiscType: 'P',
|
|
ProdVariantName: ProdName,
|
|
TaxAmt: 0,
|
|
};
|
|
|
|
setTableData([...TableData, tempPurData]);
|
|
}
|
|
};
|
|
const onComplete = useCallback(() => {
|
|
setMessageData(null);
|
|
setMessageType(null);
|
|
}, []);
|
|
const save = async (index) => {
|
|
try {
|
|
const row = await form?.validateFields();
|
|
|
|
const modifiedObject = {};
|
|
for (const key in row) {
|
|
const newKey = key.slice(0, -1); // Remove the last character ("0") from the key
|
|
modifiedObject[newKey] = row[key];
|
|
}
|
|
|
|
const newData = [...TableData];
|
|
// const index = newData.findIndex((item) => recordKey === item.InwardDtlId);
|
|
if (index > -1) {
|
|
const item = newData[index];
|
|
newData.splice(index, 1, { ...item, ...modifiedObject });
|
|
setTableData(newData);
|
|
setEditingKey('');
|
|
}
|
|
} catch (err) {
|
|
console.error('Save failed:', err);
|
|
}
|
|
};
|
|
const handleKeyPress = async (e, record, index) => {
|
|
if (e.key === 'Enter') {
|
|
try {
|
|
await form.validateFields();
|
|
save(index);
|
|
} catch (error) {
|
|
console.error('Save failed:', error);
|
|
}
|
|
}
|
|
};
|
|
const getColumns = (data, seltax) => {
|
|
const hasDiscount = data?.some((record) => record.PurcDisc > 0);
|
|
|
|
const baseColumns = [
|
|
{
|
|
title: 'Sl.No',
|
|
align: 'center',
|
|
key: 'sno',
|
|
render: (text, object, index) => (
|
|
<a style={{ color: 'black' }}>{index + 1}</a>
|
|
),
|
|
},
|
|
{
|
|
title: 'Product Name',
|
|
dataIndex: 'ProdName',
|
|
key: 'ProdName',
|
|
width: '230px',
|
|
align: 'right',
|
|
render: (text, record, index) => (
|
|
<a style={{ color: 'black' }}>
|
|
{record?.ProdName +
|
|
'(' +
|
|
record?.Size +
|
|
'-' +
|
|
record?.UomName +
|
|
')' +
|
|
'(' +
|
|
record?.ProdVariantName +
|
|
')'}
|
|
</a>
|
|
),
|
|
},
|
|
{
|
|
title: 'Qty',
|
|
dataIndex: 'Qty',
|
|
key: 'Qty',
|
|
editable: true,
|
|
// with: '100px',
|
|
render: (text, record, index) => {
|
|
return isEditing(record, index) ? (
|
|
<Form.Item
|
|
name={'Qty' + index}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
pattern: /^[1-9]\d*(\.\d+)?$/,
|
|
message: 'Please enter quantity',
|
|
},
|
|
]}
|
|
>
|
|
<Input
|
|
onPressEnter={(e) => handleKeyPress(e, record, index)}
|
|
onBlur={(e) => handleQtyChange(e, record)}
|
|
onChange={(e) => handleQtyChange(e, record, index)}
|
|
autoComplete="off"
|
|
inputMode="decimal"
|
|
onInput={(e) => {
|
|
let cleanedValue = e.target.value.replace(/[^0-9.]/g, ''); // Remove invalid characters
|
|
const parts = cleanedValue.split('.');
|
|
|
|
if (cleanedValue.startsWith('.')) {
|
|
cleanedValue = '0' + cleanedValue;
|
|
}
|
|
|
|
e.target.value =
|
|
parts.length > 2
|
|
? `${parts[0]}.${parts.slice(1).join('')}`
|
|
: cleanedValue;
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
) : (
|
|
text
|
|
);
|
|
},
|
|
},
|
|
// {
|
|
// title: 'Hsn Code',
|
|
// dataIndex: 'HSNCode',
|
|
// key: 'HSNCode',
|
|
// },
|
|
{
|
|
title: 'Uom',
|
|
dataIndex: 'UomName',
|
|
key: 'UOMName',
|
|
},
|
|
{
|
|
title: 'Rate',
|
|
dataIndex: 'Price',
|
|
key: 'Price',
|
|
editable: true,
|
|
render: (text, record, index) => {
|
|
return isEditing(record, index) ? (
|
|
<Form.Item
|
|
name={'Price' + index}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
pattern: /^[1-9]\d*(\.\d+)?$/,
|
|
message: 'Please enter Sales Rate',
|
|
},
|
|
]}
|
|
>
|
|
<Input
|
|
onPressEnter={(e) => handleKeyPress(e, record, index)}
|
|
onChange={(e) => handlePurrateChange(e, record, index)}
|
|
onBlur={(e) => handlePurrateChange(e, record, index)}
|
|
autoComplete="off"
|
|
inputMode="decimal"
|
|
onInput={(e) => {
|
|
let cleanedValue = e.target.value.replace(/[^0-9.]/g, ''); // Remove invalid characters
|
|
const parts = cleanedValue.split('.');
|
|
|
|
if (cleanedValue.startsWith('.')) {
|
|
cleanedValue = '0' + cleanedValue;
|
|
}
|
|
|
|
e.target.value =
|
|
parts.length > 2
|
|
? `${parts[0]}.${parts.slice(1).join('')}`
|
|
: cleanedValue;
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
) : (
|
|
text
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Discount',
|
|
dataIndex: 'PurcDisc',
|
|
key: 'PurcDisc',
|
|
editable: true,
|
|
render: (text, record, index) => {
|
|
return isEditing(record, index) ? (
|
|
<Form.Item
|
|
name={'PurcDisc' + index}
|
|
rules={[
|
|
{
|
|
validator: async (_, value) => {
|
|
const PurcDiscType = form.getFieldValue([
|
|
`DiscType${index}`,
|
|
]);
|
|
console.log(PurcDiscType, 'PurcDiscType');
|
|
if (value === undefined || value === '')
|
|
return Promise.resolve();
|
|
|
|
if (PurcDiscType === 'P') {
|
|
console.log(PurcDiscType, 'PurcDiscType');
|
|
if (
|
|
!/^(100(\.0{1,2})?|[0-9]{1,2}(\.\d{1,2})?)$/.test(value)
|
|
) {
|
|
return Promise.reject(
|
|
'Please enter a valid discount (0-100%)'
|
|
);
|
|
}
|
|
}
|
|
|
|
return Promise.resolve();
|
|
},
|
|
},
|
|
]}
|
|
>
|
|
<Input
|
|
onPressEnter={(e) => handleKeyPress(e, record, index)}
|
|
onChange={(e) => handlePurdiscChange(e, record, index)}
|
|
onBlur={(e) => handlePurdiscChange(e, record)}
|
|
autoComplete="off"
|
|
inputMode="decimal"
|
|
onInput={(e) => {
|
|
let cleanedValue = e.target.value.replace(/[^0-9.]/g, ''); // Remove invalid characters
|
|
const parts = cleanedValue.split('.');
|
|
|
|
if (cleanedValue.startsWith('.')) {
|
|
cleanedValue = '0' + cleanedValue;
|
|
}
|
|
|
|
e.target.value =
|
|
parts.length > 2
|
|
? `${parts[0]}.${parts.slice(1).join('')}`
|
|
: cleanedValue;
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
) : (
|
|
text
|
|
);
|
|
},
|
|
},
|
|
|
|
{
|
|
title: 'Amount',
|
|
dataIndex: 'NetAmt',
|
|
key: 'NetAmt',
|
|
editable: true,
|
|
},
|
|
];
|
|
|
|
// Conditionally add the Discount Type column if there's a discount
|
|
if (hasDiscount) {
|
|
baseColumns.splice(6, 0, {
|
|
title: 'Discount Type',
|
|
dataIndex: 'DiscType',
|
|
key: 'DiscType',
|
|
editable: true,
|
|
render: (text, record, index) => {
|
|
const purchaseDiscount = record.PurcDisc || 0; // Ensure a valid number
|
|
return isEditing(record, index) && purchaseDiscount > 0 ? (
|
|
<Form.Item
|
|
name={'DiscType' + index}
|
|
initialValue={record.DiscountType}
|
|
rules={[
|
|
{ required: true, message: 'Please select a Discount Type' },
|
|
{
|
|
validator: async (_, value) => {
|
|
const PurcDisc = form.getFieldValue([`PurcDisc${index}`]);
|
|
const PurcDiscType = form.getFieldValue([
|
|
`DiscType${index}`,
|
|
]);
|
|
if (value === undefined || value === '')
|
|
return Promise.resolve();
|
|
|
|
if (PurcDisc > 99 && PurcDiscType == 'P') {
|
|
console.log(
|
|
PurcDiscType,
|
|
PurcDisc,
|
|
'record.DiscountType'
|
|
);
|
|
const newData = TableData.map((item, index1) => {
|
|
if (index1 === index) {
|
|
return {
|
|
...item,
|
|
PurcDisc: 0,
|
|
NetAmt: item.Price * item.Qty,
|
|
// TaxAmt: taxamount,
|
|
BillAmount: item.Price * item.Qty - item.taxamount,
|
|
};
|
|
}
|
|
return item;
|
|
});
|
|
setTableData(newData);
|
|
form.setFieldsValue({
|
|
...form.getFieldsValue(),
|
|
[`PurcDisc${index}`]: 0,
|
|
});
|
|
|
|
// if (
|
|
// !/^(100(\.0{1,2})?|[0-9]{1,2}(\.\d{1,2})?)$/.test(value)
|
|
// ) {
|
|
// return Promise.reject('enter a valid discount (0-100%)');
|
|
// }
|
|
}
|
|
|
|
return Promise.resolve();
|
|
},
|
|
},
|
|
]}
|
|
>
|
|
<Select
|
|
onChange={(value) =>
|
|
handleDiscountTypeChange(value, record, index)
|
|
}
|
|
>
|
|
<Option value="P">%</Option>
|
|
<Option value="A">Amt</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
) : (
|
|
text
|
|
);
|
|
},
|
|
});
|
|
}
|
|
if (seltax !== 'WOT') {
|
|
baseColumns.splice(8, 0, {
|
|
title: 'Tax %',
|
|
dataIndex: 'TaxPercentage',
|
|
key: 'TaxPercentage',
|
|
editable: true,
|
|
});
|
|
baseColumns.splice(9, 0, {
|
|
title: 'Tax Name',
|
|
dataIndex: 'TaxName',
|
|
key: 'TaxName',
|
|
editable: true,
|
|
});
|
|
}
|
|
baseColumns.push({
|
|
title: 'Action',
|
|
dataIndex: 'Action',
|
|
key: 'Action',
|
|
align: 'center',
|
|
editable: false,
|
|
render: (_, record, index) => (
|
|
<a>
|
|
<DeleteFilled
|
|
style={{ color: '#FF4D4F' }}
|
|
onClick={(e) => {
|
|
e.stopPropagation(); // Stop event from bubbling up to row
|
|
statusFormatters(record, index);
|
|
}}
|
|
/>
|
|
</a>
|
|
),
|
|
});
|
|
return baseColumns;
|
|
};
|
|
|
|
const columns = getColumns(TableData, SelTaxType);
|
|
|
|
const edit = (record, index) => {
|
|
form.setFieldsValue({ ...record });
|
|
setEditingKey(index);
|
|
setindex(index);
|
|
|
|
form.setFieldsValue({
|
|
[`Qty${index}`]: record?.Qty,
|
|
[`NetAmt${index}`]: !isNaN(record?.NetAmt) ? record?.NetAmt : 0,
|
|
[`PurcDisc${index}`]: record?.PurcDisc,
|
|
[`Price${index}`]: record?.Price,
|
|
});
|
|
};
|
|
const statusFormatters = (record, index) => {
|
|
// Remove the row from table data
|
|
const newData = TableData.filter((_, i) => i !== index);
|
|
setTableData(newData);
|
|
setDelete(true);
|
|
setEditingKey('');
|
|
// Get all current form values
|
|
const currentFormValues = form.getFieldsValue();
|
|
|
|
// Clear all form fields first
|
|
const allFieldsToClear = [];
|
|
for (let i = 0; i < TableData.length; i++) {
|
|
allFieldsToClear.push(
|
|
`BalanceQty${i}`,
|
|
`Amount${i}`,
|
|
`PurcDisc${i}`,
|
|
`SellPrice${i}`,
|
|
`Qty${i}`,
|
|
`NetAmt${i}`,
|
|
`Price${i}`,
|
|
`DiscType${i}`
|
|
);
|
|
}
|
|
|
|
const clearAllValues = {};
|
|
allFieldsToClear.forEach((field) => {
|
|
clearAllValues[field] = undefined;
|
|
});
|
|
|
|
// Set new form values with correct indices
|
|
const newFormValues = {};
|
|
newData.forEach((item, newIndex) => {
|
|
newFormValues[`Qty${newIndex}`] = item.Qty;
|
|
newFormValues[`NetAmt${newIndex}`] = item.NetAmt;
|
|
newFormValues[`PurcDisc${newIndex}`] = item.PurcDisc;
|
|
newFormValues[`Price${newIndex}`] = item.Price;
|
|
newFormValues[`DiscType${newIndex}`] = item.DiscType;
|
|
});
|
|
|
|
// Apply the new form values
|
|
form.setFieldsValue({ ...clearAllValues, ...newFormValues });
|
|
console.log(form.getFieldsValue(), 'jjij');
|
|
};
|
|
const handleQtyChange = (e, record, index) => {
|
|
const qty = e.target.value;
|
|
if (!/^\d*\.?\d*$/.test(qty)) {
|
|
setMessageType('error');
|
|
setMessageData('Only numeric values are allowed');
|
|
return;
|
|
}
|
|
const sellprice = parseInt(record.Price);
|
|
const Amount = !isNaN(sellprice * parseInt(qty))
|
|
? sellprice * parseInt(qty)
|
|
: 0;
|
|
|
|
const taxamt =
|
|
SelTaxTypeName?.toLowerCase() === 'withtax'
|
|
? (Amount * parseInt(record?.TaxPercentage)) /
|
|
(100 + parseInt(record?.TaxPercentage))
|
|
: 0;
|
|
const newData = TableData.map((item, index1) => {
|
|
if (index1 === index) {
|
|
return {
|
|
...item,
|
|
Qty: qty,
|
|
NetAmt: Amount,
|
|
TaxAmt: taxamt,
|
|
BillAmount: Amount - taxamt,
|
|
};
|
|
}
|
|
return item;
|
|
});
|
|
|
|
setTableData(newData);
|
|
form.setFieldsValue({
|
|
...form.getFieldsValue(),
|
|
|
|
[`Qty${index}`]: qty,
|
|
[`NetAmt${index}`]: Amount,
|
|
|
|
[`PurcDisc${index}`]: 0,
|
|
[`DiscType${index}`]: 'P',
|
|
});
|
|
};
|
|
const handleDiscountTypeChange = (value, record, index) => {
|
|
const tempamt = record.Qty * record.Price;
|
|
const DisType = value;
|
|
const amount =
|
|
value === 'A'
|
|
? tempamt - record.PurcDisc
|
|
: tempamt - tempamt * (record.PurcDisc / 100);
|
|
const taxamt =
|
|
SelTaxTypeName?.toLowerCase() === 'withtax'
|
|
? (amount * parseInt(record?.TaxPercentage)) /
|
|
(100 + parseInt(record?.TaxPercentage))?.toFixed(2)
|
|
: 0;
|
|
// You can calculate acceptedQty based on your requirement
|
|
const newData = TableData.map((item, index1) => {
|
|
if (index1 === index) {
|
|
return {
|
|
...item,
|
|
|
|
NetAmt: amount,
|
|
TaxAmt: taxamt,
|
|
BillAmount: amount - taxamt,
|
|
DiscType: DisType,
|
|
};
|
|
}
|
|
return item;
|
|
});
|
|
setTableData(newData);
|
|
};
|
|
|
|
const handlePurrateChange = (e, record, index) => {
|
|
const inputValue = e.target.value;
|
|
|
|
// Validate if inputValue is numeric
|
|
if (!/^\d*\.?\d*$/.test(inputValue)) {
|
|
setMessageType('error');
|
|
setMessageData('Only numeric values are allowed');
|
|
return;
|
|
}
|
|
|
|
const PurcRate = inputValue;
|
|
// const PurcRate = e.target.value
|
|
const tempamt = !isNaN(parseInt(PurcRate) * parseInt(record?.Qty))
|
|
? parseInt(PurcRate) * parseInt(record?.Qty)
|
|
: 0;
|
|
const amount =
|
|
record?.PurcDisc === 0
|
|
? tempamt
|
|
: record?.DiscType === 'A'
|
|
? tempamt - record.PurcDisc
|
|
: tempamt - tempamt * (record.PurcDisc / 100);
|
|
const taxamt =
|
|
SelTaxTypeName?.toLowerCase() === 'withtax'
|
|
? (amount * parseInt(record?.TaxPercentage)) /
|
|
(100 + parseInt(record?.TaxPercentage))?.toFixed(2)
|
|
: 0;
|
|
// You can calculate acceptedQty based on your requirement
|
|
const newData = TableData.map((item, index1) => {
|
|
if (index1 === index) {
|
|
return {
|
|
...item,
|
|
Price: PurcRate,
|
|
NetAmt: amount,
|
|
TaxAmt: taxamt,
|
|
BillAmount: amount - taxamt,
|
|
};
|
|
}
|
|
return item;
|
|
});
|
|
setTableData(newData);
|
|
form.setFieldsValue({
|
|
...form.getFieldsValue(),
|
|
[`Price${index}`]: PurcRate,
|
|
[`NetAmt${index}`]: amount,
|
|
});
|
|
};
|
|
const handlePurdiscChange = (e, record, index) => {
|
|
console.log(e.target.value, record, 'discountdiscount');
|
|
const PurcDisc = e.target.value;
|
|
const PurcRate = record?.Price;
|
|
const tempamt = parseInt(record?.Price) * record?.Qty;
|
|
const amount =
|
|
record.DiscType === 'A'
|
|
? tempamt - PurcDisc
|
|
: tempamt - tempamt * (parseFloat(PurcDisc) / 100);
|
|
const taxamount =
|
|
SelTaxTypeName?.toLowerCase() === 'withtax'
|
|
? (amount * parseInt(record?.TaxPercentage)) /
|
|
(100 + parseInt(record?.TaxPercentage))?.toFixed(2)
|
|
: 0;
|
|
form.setFields([{ name: [`PurcDisc${index}`], errors: [] }]);
|
|
|
|
// Check if PurcDisc is a valid number
|
|
if (!isNaN(parseFloat(PurcDisc)) && isFinite(PurcDisc)) {
|
|
if (record?.Qty > 0) {
|
|
const newData = TableData.map((item, index1) => {
|
|
if (index1 === index) {
|
|
return {
|
|
...item,
|
|
PurcDisc: PurcDisc,
|
|
NetAmt: amount,
|
|
TaxAmt: taxamount,
|
|
BillAmount: amount - taxamount,
|
|
};
|
|
}
|
|
return item;
|
|
});
|
|
setTableData(newData);
|
|
form.setFieldsValue({
|
|
...form.getFieldsValue(),
|
|
[`PurcDisc${index}`]: PurcDisc,
|
|
[`NetAmt${index}`]: amount,
|
|
// [`DiscType${index}`]: 'P',
|
|
});
|
|
} else {
|
|
form.setFields([
|
|
{
|
|
name: [`PurcDisc${index}`],
|
|
errors: [' Please Enter Purchase Quantity'],
|
|
},
|
|
]);
|
|
}
|
|
} else {
|
|
// Set error if PurcDisc is not a valid number
|
|
form.setFields([
|
|
{ name: [`PurcDisc${index}`], errors: [' Discount must be a number'] },
|
|
]);
|
|
}
|
|
};
|
|
|
|
const PrintQuotation = async () => {
|
|
// await printDiv(`Pur-Quot-Print`, QuotationStyle)
|
|
if (
|
|
TableData?.length > 0 &&
|
|
TableData?.every((item) => item.Qty !== 0 && item.Amount !== 0)
|
|
) {
|
|
let PostData = formRef.current?.getFieldsValue();
|
|
PostData['ProductDetails'] = TableData;
|
|
PostData['BillAmount'] = parseFloat(TotalBillAmount?.toFixed(2));
|
|
PostData['NetAmount'] = parseFloat(TotalAmount?.toFixed(2));
|
|
PostData['TaxAmount'] = parseFloat(
|
|
(TotalCgst + TotalSgst + TotalIgst)?.toFixed(2)
|
|
);
|
|
((PostData['CompId'] = CompId),
|
|
(PostData['BranchId'] = BranchId),
|
|
(PostData['AppId'] = AppId));
|
|
let res = await dispatch(postPurcQuotation(PostData)).unwrap();
|
|
if (res?.data?.statusCode === 1) {
|
|
setMessageType('success');
|
|
setMessageData(res?.data?.response);
|
|
const custId = formRef.current?.getFieldValue('CustId');
|
|
const customer = AllCustomer?.find((c) => c.UserId === custId);
|
|
console.log(customer, 'customertrt');
|
|
|
|
setPrintData(res?.data?.data);
|
|
setIsSubmitted(true);
|
|
formRef?.current?.resetFields([
|
|
'CustId',
|
|
'ProdId',
|
|
'QRCode',
|
|
'VarProdId',
|
|
'TaxType',
|
|
]);
|
|
setTableData([]);
|
|
setSelProduct(null);
|
|
setSelectedProductName(null);
|
|
setSelecAdminUser(null);
|
|
setSelTaxType(null);
|
|
setSelTaxTypeName(null);
|
|
setVariants(null);
|
|
setselectedProductVariantData(null);
|
|
|
|
// Reset totals
|
|
setTotalBillAmount(null);
|
|
setTotalCgst(null);
|
|
setTotalSgst(null);
|
|
setTotalIgst(null);
|
|
setTotalAmount(null);
|
|
|
|
// Reset editing state
|
|
setEditingKey('');
|
|
setindex(null);
|
|
|
|
// Clear form values for all table rows
|
|
const clearFields = {};
|
|
TableData.forEach((_, index) => {
|
|
clearFields[`Qty${index}`] = undefined;
|
|
clearFields[`Price${index}`] = undefined;
|
|
clearFields[`PurcDisc${index}`] = undefined;
|
|
clearFields[`NetAmt${index}`] = undefined;
|
|
clearFields[`DiscType${index}`] = undefined;
|
|
});
|
|
form.setFieldsValue(clearFields);
|
|
} else {
|
|
setMessageType('error');
|
|
setMessageData(res?.data?.response);
|
|
}
|
|
} else {
|
|
setMessageType('error');
|
|
setMessageData('Please give Product Quantity for all Product ');
|
|
}
|
|
};
|
|
|
|
const onChangeprodFunction = (e) => {
|
|
console.log(e, 'yyyyyyyyyyyyyy');
|
|
|
|
if (isbarcode) {
|
|
// When in barcode mode, search by QRCode
|
|
const productByQR = ProductData.find(
|
|
(p) => p.QRCode && p.QRCode?.toLowerCase() === e?.toLowerCase()
|
|
);
|
|
if (productByQR) {
|
|
const productValue =
|
|
productByQR.ProdName +
|
|
' ' +
|
|
'(' +
|
|
productByQR.Size +
|
|
productByQR.UomName +
|
|
')';
|
|
form.setFieldsValue({ ProdId: productValue });
|
|
setSelProduct(productValue);
|
|
ProductDropDownChange({ value: productValue });
|
|
}
|
|
} else {
|
|
// Normal mode - search by product name
|
|
form.setFieldsValue({ ProdId: e });
|
|
setSelProduct(e);
|
|
}
|
|
};
|
|
|
|
const handlePrint = async () => {
|
|
const style = await PrintStyleFunction(
|
|
PrintTempData?.StyleName == undefined
|
|
? 'Style 13'
|
|
: PrintTempData?.StyleName,
|
|
'Quotation'
|
|
);
|
|
|
|
const stylesMap = {
|
|
'Style 1': 'SQPrintStyle1',
|
|
'Style 2': 'SQPrintStyle2',
|
|
'Style 3': 'SQPrintStyle3',
|
|
'Style 4': 'SQPrintStyle4',
|
|
'Style 5': 'SQPrintStyle5',
|
|
'Style 6': 'SQPrintStyle6',
|
|
'Style 7': 'SQPrintStyle7',
|
|
'Style 8': 'SQPrintStyle8',
|
|
'Style 9': 'SQPrintStyle9',
|
|
'Style 10': 'SQPrintStyle10',
|
|
'Style 11': 'SQPrintStyle11',
|
|
'Style 12': 'SQPrintStyle12',
|
|
'Style 13': 'Pur-Quot-Print',
|
|
A4: 'SQPrintStyleA4',
|
|
A5: 'SQPrintStyleA5',
|
|
A4Standard: 'SQA4Standard',
|
|
TaxInvoice: 'TaxInvoice',
|
|
};
|
|
|
|
const selectedStyle =
|
|
stylesMap[
|
|
PrintTempData?.StyleName == undefined
|
|
? 'Style 13'
|
|
: PrintTempData?.StyleName
|
|
];
|
|
|
|
if (isMobile) {
|
|
PurchaseQtMobilePrint({
|
|
PrintTempData: PrintTempData,
|
|
PrintOrderDetails: PrintData,
|
|
UserId: UserId,
|
|
dispatch,
|
|
});
|
|
} else if (selectedStyle) {
|
|
await printDiv(`${selectedStyle}`, style);
|
|
}
|
|
};
|
|
|
|
const handleEmailClick = async (mail, data) => {
|
|
let record = mail == 'mail' ? data : PrintData?.[0];
|
|
|
|
if (record?.Email) {
|
|
setTimeout(async () => {
|
|
try {
|
|
const blob = await pdfDiv('Pur-Quot-Print', PurchaseOrderStyle);
|
|
|
|
const payload = {
|
|
fileBlob: blob,
|
|
toEmail: record?.Email,
|
|
type: 'Quotation',
|
|
messageTemplatesList: [],
|
|
};
|
|
|
|
const res = await dispatch(Emailsend(payload)).unwrap();
|
|
if (res?.data?.status === 1) {
|
|
setMessageData(res?.data?.response);
|
|
setMessageType('success');
|
|
} else {
|
|
setMessageData(res?.data?.response);
|
|
setMessageType('error');
|
|
}
|
|
|
|
// setMessageData("Email sent successfully");
|
|
// setMessageType('success');
|
|
} catch (error) {
|
|
console.error('❌ Email send failed:', error);
|
|
// alert('❌ Email failed to send');
|
|
setMessageData('Email failed to send');
|
|
setMessageType('error');
|
|
}
|
|
}, 300);
|
|
} else {
|
|
setusrMailDataModel(true);
|
|
}
|
|
};
|
|
|
|
const handleUserMailmodalCancel = () => {
|
|
setusrMailDataModel(false);
|
|
setEnteredMailId(null);
|
|
emailform.resetFields();
|
|
// setQuotationProductdata([])
|
|
};
|
|
|
|
const emailSubmit = (values) => {
|
|
let data = {
|
|
...PrintData?.[0],
|
|
...{ CustMail: values.email },
|
|
...{ Email: values.email },
|
|
};
|
|
handleEmailClick('mail', data);
|
|
setEnteredMailId(null);
|
|
emailform.resetFields();
|
|
emailform.setFieldsValue({ email: '' });
|
|
setusrMailDataModel(false);
|
|
};
|
|
|
|
return (
|
|
<div className="pageOverAll">
|
|
<div className="userPage">
|
|
<div className="userPageContent">
|
|
<Messages
|
|
messageType={messageType}
|
|
messageData={messageData}
|
|
onComplete={onComplete}
|
|
/>
|
|
<div
|
|
className="formName"
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
marginTop: '5px',
|
|
}}
|
|
>
|
|
<FormHeader title={'Sales Quotation'} />
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '7px',
|
|
padding: '6px 12px',
|
|
backgroundColor: '#059645',
|
|
borderRadius: '8px',
|
|
color: 'white',
|
|
cursor: 'pointer',
|
|
fontFamily: 'Poppins',
|
|
fontWeight: '400',
|
|
whiteSpace: 'nowrap',
|
|
fontSize: '15px',
|
|
}}
|
|
onClick={() =>
|
|
navigate(`${subDirectory}setting/sales-quotation/list`)
|
|
}
|
|
>
|
|
<FaEye /> <span>View Quotation</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="Quo-formDiv">
|
|
<Form
|
|
ref={formRef}
|
|
className="formDivAnt"
|
|
onFinish={PrintQuotation}
|
|
>
|
|
<div className="formDivS">
|
|
<div className="inputForm">
|
|
<div className="purchaseQuoaDetails">
|
|
<Form.Item
|
|
name="CustId"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: 'Please Select Customer',
|
|
},
|
|
]}
|
|
>
|
|
<DropDowns
|
|
options={AllCustomer?.map((option) => ({
|
|
value: option.CustId,
|
|
label:
|
|
option.CustName ||
|
|
option.CustShortName ||
|
|
option.CustMobile,
|
|
}))}
|
|
label={<label class="required">Customer</label>}
|
|
className="field-DropDown"
|
|
onChangeFunction={handleAdminUserDropDownChange}
|
|
/>
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
name="TaxType"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: 'Please Select Purchase Tax Type',
|
|
},
|
|
]}
|
|
>
|
|
<DropDowns
|
|
options={PurcTaxTypeData?.map((option) => ({
|
|
value: option.ConfigId,
|
|
label: option.ConfigName,
|
|
}))}
|
|
label={
|
|
<label class="required">Purchase Tax Type</label>
|
|
}
|
|
className="field-DropDown"
|
|
onChangeFunction={(e) => handleQuoTaxTypeChange(e)}
|
|
valueData={SelTaxType}
|
|
/>
|
|
</Form.Item>
|
|
<div className="ProductDropDownChange-Quotation">
|
|
<Form.Item name="ProdId">
|
|
<div className="product-scan sales-quotation">
|
|
<FloatLabel
|
|
label={'Product Name'}
|
|
value={selectedProductName}
|
|
>
|
|
<AutoComplete
|
|
className="field-DropDown"
|
|
value={selectedProductName}
|
|
filterOption={(input, option) => {
|
|
const product = ProductData.find(
|
|
(p) => p.ProdId === option.value
|
|
);
|
|
const nameMatch = option.label
|
|
?.toLowerCase()
|
|
?.includes(productSearchText?.toLowerCase());
|
|
const qrMatch =
|
|
product?.QRCode?.toLowerCase() ==
|
|
productSearchText?.toLowerCase();
|
|
return nameMatch || qrMatch;
|
|
}}
|
|
options={
|
|
!scanner
|
|
? ProductData?.map((option) => ({
|
|
value: option.ProdId,
|
|
label: `${option.ProdName} (${option.Size} ${option.UomName})${option?.BrandName ? ` - ${option?.BrandName}` : ''}`,
|
|
}))
|
|
: []
|
|
}
|
|
onSelect={ProductDropDownChange}
|
|
onChange={handleProductSearch}
|
|
onKeyDown={(e) => {
|
|
if (scanner && e.key === 'Enter') {
|
|
e.preventDefault();
|
|
}
|
|
}}
|
|
disabled={ProductData?.length === 0}
|
|
></AutoComplete>
|
|
</FloatLabel>
|
|
<Tooltip title={'BarCode/QrCode'} placement={'top'}>
|
|
<div className="BsUpcScanSQ">
|
|
{!isMobile ? <BsUpcScan
|
|
strokeWidth={0.5}
|
|
color="#000"
|
|
style={{
|
|
fontSize: '16px',
|
|
color: scanner ? '#52c41a' : '#888',
|
|
fontWeight: '600',
|
|
}}
|
|
className="product-scan-Icon"
|
|
onClick={handleScanSearch}
|
|
/>
|
|
: <BarCodeScan
|
|
onScan={(value) => {
|
|
debouncedScannerSearch(value);
|
|
}}
|
|
/>}
|
|
</div>
|
|
</Tooltip>
|
|
{ProductData?.length === 0 && (
|
|
<p style={{ color: 'red' }}>
|
|
<ImWarning /> All Products have no Stock
|
|
</p>
|
|
)}
|
|
</div>
|
|
</Form.Item>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
{Variants?.length > 1 && (
|
|
<Form.Item name="VarProdId">
|
|
<DropDowns
|
|
options={Variants?.map((option) => ({
|
|
value: option.ProdIdProdName,
|
|
label: option.ProdVariantName,
|
|
}))}
|
|
label={'Variant Name'}
|
|
className="field-DropDown"
|
|
onChangeFunction={(e) =>
|
|
ProductVariantDropDownChange(e)
|
|
}
|
|
/>
|
|
</Form.Item>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="Quotation-table"
|
|
style={{
|
|
maxwidth: '500px',
|
|
overflow: TableData?.length > 0 ? 'auto' : 'hidden',
|
|
// overflowX: TableData?.length > 0 ? "auto" : "hidden",
|
|
}}
|
|
>
|
|
<Form form={form} component={false}>
|
|
<Table
|
|
bordered
|
|
dataSource={TableData}
|
|
columns={columns}
|
|
rowClassName="editable-row"
|
|
onRow={(record, index) => ({
|
|
onClick: () => {
|
|
edit(record, index);
|
|
},
|
|
})}
|
|
pagination={false}
|
|
/>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="QuosubmitButton"
|
|
style={{ display: 'flex', gap: '1rem' }}
|
|
>
|
|
<Buttons
|
|
buttonText="SUBMIT"
|
|
color="901D77"
|
|
disabled={addnewAccess}
|
|
icon={<ArrowRightOutlined />}
|
|
htmlType={true}
|
|
/>
|
|
{isSubmitted && PrintData?.length > 0 && (
|
|
<>
|
|
<div>
|
|
<MdOutlineMail
|
|
size={39}
|
|
color="#25D366"
|
|
style={{ cursor: 'pointer' }}
|
|
onClick={handleEmailClick}
|
|
title="Share by Email"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<FaPrint
|
|
size={32}
|
|
color="#1292EE"
|
|
style={{ cursor: 'pointer' }}
|
|
onClick={handlePrint}
|
|
title="Print"
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</Form>
|
|
{TableData?.length > 0 && (
|
|
<div className="Quo-Summary-Quotation">
|
|
<div className="Quotation-summary">
|
|
{' '}
|
|
Gross Total:{' '}
|
|
{allowDecimal ? TotalBillAmount?.toFixed(2) : TotalBillAmount}
|
|
</div>
|
|
<div className="Quotation-summary">
|
|
{' '}
|
|
Total GST:{' '}
|
|
{allowDecimal
|
|
? (TotalCgst + TotalSgst + TotalIgst)?.toFixed(2)
|
|
: TotalCgst + TotalSgst + TotalIgst}
|
|
</div>
|
|
{/* <div> Total SGST: {TotalSgst?.toFixed(2)}</div>
|
|
<div> Total IGST: {TotalIgst?.toFixed(2)}</div> */}
|
|
<div className="Quotation-summary">
|
|
{' '}
|
|
Total Amount:{' '}
|
|
{allowDecimal
|
|
? Math.round(TotalAmount)?.toFixed(2)
|
|
: Math.round(TotalAmount)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<DefaultModal
|
|
width={400}
|
|
open={usrMailDataModel}
|
|
title="User Mail"
|
|
handleCancel={handleUserMailmodalCancel}
|
|
footer={false}
|
|
children={
|
|
<div>
|
|
<Form form={emailform} layout="vertical" onFinish={emailSubmit}>
|
|
<Form.Item
|
|
label="Mail ID"
|
|
name="email"
|
|
rules={[
|
|
{ required: true, message: 'Email is required' },
|
|
{ type: 'email', message: 'Enter a valid email address' },
|
|
]}
|
|
>
|
|
<Input autoComplete="off" placeholder="Enter your email" />
|
|
</Form.Item>
|
|
|
|
<Button type="primary" htmlType="submit">
|
|
Submit
|
|
</Button>
|
|
</Form>
|
|
</div>
|
|
}
|
|
/>
|
|
|
|
<div style={{ display: 'none' }}>
|
|
<PurchaseQuotationPrint
|
|
PrintingData={PrintData}
|
|
PrintTempData={PrintTempData}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
export default SalesQuotationForm;
|