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 = ``; // const QuotationStyle = ``; const PurchaseOrderStyle = ``; 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) => ( {index + 1} ), }, { title: 'Product Name', dataIndex: 'ProdName', key: 'ProdName', width: '230px', align: 'right', render: (text, record, index) => ( {record?.ProdName + '(' + record?.Size + '-' + record?.UomName + ')' + '(' + record?.ProdVariantName + ')'} ), }, { title: 'Qty', dataIndex: 'Qty', key: 'Qty', editable: true, // with: '100px', render: (text, record, index) => { return isEditing(record, index) ? (