import { useState, useEffect, useCallback } from 'react'; import { useNavigate, useLocation } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import { PlusOutlined, EditFilled, ConsoleSqlOutlined, ArrowRightOutlined, } from '@ant-design/icons'; import { Messages } from '../../Components/Notifications/Messages'; import FormHeader from '../PageComponents/FormHeader.jsx'; import Search from '../../Components/Forms/Search.jsx'; import Buttons from '../../Components/Forms/Buttons'; import { dateFormatChange, ExtractDateFormate, getSession, pdfDiv, printDiv, } from '../../Services/Others.js'; import { changeBreadCrumb } from '../../Features/AppPage/CenterPage.js'; import { Tables } from '../../Components/Tables/Table.jsx'; import { Emailsend, getPurcQuotation, } from '../../Features/PurchaseQuotation/PurchaseQuotation.js'; import { IoEye } from 'react-icons/io5'; import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx'; import { Input, Table, Form, Button } from 'antd'; import { MdOutlineMail } from 'react-icons/md'; import { FaPrint } from 'react-icons/fa'; import PurchaseQuotationPrint from './PurchaseQuotationPrint.jsx'; import { getAllCustomer } from '../../Features/BookingScreen/BookingData/BookingData.js'; import { getPrintSelectionComponentData } from '../../Features/ThemeChange/ThemeChange.js'; import { PrintStyleFunction } from '../paymentpdfPage/PrintStyleFunction.js'; import { isMobile } from 'react-device-detect'; import { MobilePdfPrint } from '../BookingScreen/Components/BookingFunctionality/MobilePdfPrint.js'; import { PurchaseQtMobilePrint } from './PurchaseQtMobilePrint.js'; const subDirectory = import.meta.env.BASE_URL; const PurchaseQuotationList = () => { const navigate = useNavigate(); const location = useLocation(); const dispatch = useDispatch(); const CompId = getSession('CompId'); const BranchId = getSession('BranchId'); const AppId = getSession('AppId'); const UserId = getSession('UserId'); const [messageType, setMessageType] = useState(null); const [messageData, setMessageData] = useState(null); const [page, setpage] = useState(1); const [QuotationData, setQuotationData] = useState([]); const [QuotationProductdata, setQuotationProductdata] = useState([]); const [searchedText, setSearchedText] = useState(''); const [OrderDataModel, setOrderDataModal] = useState(false); const [usrMailDataModel, setusrMailDataModel] = useState(false); const [PrintData, setPrintData] = useState([]); const [AllCustomer, setAllCustomer] = useState(null); const [EnteredMailId, setEnteredMailId] = useState(null); const [PrintTempData, setPrintTempData] = useState(); const [form] = Form.useForm(); const items = [ { name: 'Home', link: `${subDirectory}app-page/home`, }, { name: 'Sales Quotation', link: `${subDirectory}setting/sales-quotation`, }, ]; useEffect(() => { dispatch(changeBreadCrumb({ items: items })); }, []); const onComplete = useCallback(() => { setMessageData(null); setMessageType(null); }, []); const fetchdata = async () => { try { const res = await dispatch( getAllCustomer({ CompId: CompId, AppId: AppId, branchId: BranchId }) ).unwrap(); 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); } catch (error) { console.error('Failed to fetch customers:', error); } }; useEffect(() => { fetchdata(); }, [CompId, AppId, BranchId]); // refetch if any of these change const handelAddButton = () => { navigate(`${subDirectory}setting/sales-quotation`); }; const handlePageChange = (current) => { setpage(current); }; useEffect(() => { getQuotationData(); }, []); const ViewOrderdetails = (orderdetails) => { setQuotationProductdata(orderdetails); setOrderDataModal(true); }; const onSearch = (value) => { setSearchedText(value); }; const onSearchChange = (e) => { setSearchedText(e?.target?.value); }; const handleOrdermodalCancel = () => { setOrderDataModal(false); setQuotationProductdata([]); }; const handleUserMailmodalCancel = () => { setusrMailDataModel(false); setEnteredMailId(null); form.resetFields(); // setQuotationProductdata([]) }; const onChangeprodFunction = (value) => { setEnteredMailId(value); form.resetFields(); form.setFieldsValue({ email: value }); }; const emailSubmit = (values) => { let data = { ...PrintData?.[0], CustMail: values.email, Email: values.email, }; setPrintData([data]); handleEmailClick('', data); setEnteredMailId(null); form.resetFields(); form.setFieldsValue({ email: '' }); setusrMailDataModel(false); }; // const QuotationStyle = ``; // const QuotationStylepdf = ``; // const getQuotationData = async () => { // let quoationData = await dispatch(getPurcQuotation({ CompId: CompId, BranchId: BranchId, AppId: AppId })).unwrap(); // if (quoationData?.data?.statusCode === 1) { // // Flatten ProductDetails from all quotations // const flatData = quoationData?.data?.data?.flatMap(q => // (q.ProductDetails || []).map(p => ({ // ...p, // QuotationNo: q.QuotationNo, // QuotationDate: q.QuotationDate, // CustId: q.CustId, // UserName: q.UserName, // // Add more fields from quotation if needed // })) // ); // setQuotationData(flatData); // console.log(flatData, "Flat table data"); // } else { // setQuotationData([]); // } // } const PurchaseOrderStyle = ``; const getQuotationData = async () => { let quoationData = await dispatch( getPurcQuotation({ CompId: CompId, BranchId: BranchId, AppId: AppId }) ).unwrap(); if (quoationData?.data?.statusCode === 1) { setQuotationData(quoationData?.data?.data); } else { setPurOrderData([]); } }; const handlePrint = (ProductDetails, record) => { const orderData = { ...record, customerName: record?.CustName || '', customerAddress: record?.Address1 || '', customerMobile: record?.MobileNo || '', }; if (isMobile) { setPrintData([orderData]); PurchaseQtMobilePrint({ PrintTempData: PrintTempData, PrintOrderDetails: orderData, setPrintOrderDetails: setPrintTempData, UserId: UserId, dispatch, }); } else { setPrintData([orderData]); Print(); } }; const Print = 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 (selectedStyle) { await printDiv(`${selectedStyle}`, style); } }; // if (selectedStyle) { // await printDiv(`${selectedStyle}`, style); // Use unique IDs for each print // } // // settable2Data({}); // // setPrintData(); // }; const handleEmailClick = async (ProductDetails, record) => { const orderData = { ...record, customerName: record?.CustName || '', customerAddress: record?.CustomerDetails?.[0]?.Address1 || '', Address1: record?.CustomerDetails?.[0]?.Address1 || '', customerMobile: record?.MobileNo || '', CustMail: record?.CustMail || record?.Email || '', ProductDetails: record?.ProductDetails || ProductDetails || [], TaxDetails: record?.TaxDetails || [], AddressDetails: record?.AddressDetails || [], CustomerDetails: record?.CustomerDetails || [], }; setPrintData([orderData]); 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 columns = [ { title: 'SL.NO', key: 'sno', align: 'center', render: (text, object, index) => ( {(page - 1) * 10 + index + 1} ), }, { title: 'Quotation No', key: 'QuotationNo', dataIndex: 'QuotationNo', align: 'center', render: (text) => {text}, }, { title: 'Customer Name', key: 'CustName', dataIndex: 'CustName', // align: "center", render: (text, row) => ( {`${text ? text : row?.MobileNo} `} ), filteredValue: [searchedText], // comes from a search input state onFilter: (value, record) => { return String(record?.CustName) ?.toLowerCase() ?.includes(value?.toLowerCase()); }, }, { title: 'Date', key: 'QuotationDate', dataIndex: 'QuotationDate', align: 'center', render: (text) => ( {ExtractDateFormate(text)} ), }, { title: 'Amount', key: 'BillAmount', dataIndex: 'BillAmount', align: 'center', }, { title: 'Product Details', key: 'ProductDetails', dataIndex: 'ProductDetails', align: 'center', render: (ProductDetails, record) => ( ViewOrderdetails(ProductDetails)} /> ), }, { title: 'Shared Product Details', key: 'OrderDetails', dataIndex: 'OrderDetails', align: 'center', render: (ProductDetails, record) => (
handleEmailClick(ProductDetails, record)} /> handlePrint(ProductDetails, record)} />
), }, ]; const QuoationDataColumns = [ { title: 'SL.NO', key: 'sno', align: 'center', render: (text, object, index) => ( {(page - 1) * 10 + index + 1} ), }, { title: 'Product Name', dataIndex: 'ProdName', key: 'ProdName', align: 'left', render: (text, row) => ( {row.ProdName} ({row.ProdVariantName}) ), }, { title: 'Qnt', dataIndex: 'Qty', key: 'Qty', render: (text) => {`${text} `}, }, { title: 'UOM', dataIndex: 'UomName', key: 'UomName', width: '80px', align: 'center', render: (text) => {`${text} `}, }, ]; useEffect(() => { if (usrMailDataModel) { form.resetFields(); } }, [usrMailDataModel]); return (
{/* */} handelAddButton()} color="901D77" icon={} > ADD
} />
} />
); }; export default PurchaseQuotationList;