967 lines
25 KiB
React
967 lines
25 KiB
React
|
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 = `<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:20px;
|
||
|
|
|
||
|
|
// }
|
||
|
|
// .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:20px;
|
||
|
|
|
||
|
|
// }
|
||
|
|
// .Quo-Print-Total{
|
||
|
|
// display:flex;
|
||
|
|
// justify-content:flex-end;
|
||
|
|
// border:0.5px solid black;
|
||
|
|
// width:300px;
|
||
|
|
// margin-right: 10px;
|
||
|
|
// font-size:20px;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// }
|
||
|
|
|
||
|
|
// </style>`;
|
||
|
|
|
||
|
|
// 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 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 = `<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>`;
|
||
|
|
|
||
|
|
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) => (
|
||
|
|
<span style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</span>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Quotation No',
|
||
|
|
key: 'QuotationNo',
|
||
|
|
dataIndex: 'QuotationNo',
|
||
|
|
align: 'center',
|
||
|
|
render: (text) => <span style={{ color: 'black' }}>{text}</span>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Customer Name',
|
||
|
|
key: 'CustName',
|
||
|
|
dataIndex: 'CustName',
|
||
|
|
// align: "center",
|
||
|
|
render: (text, row) => (
|
||
|
|
<a style={{ color: 'black' }}>{`${text ? text : row?.MobileNo} `} </a>
|
||
|
|
),
|
||
|
|
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) => (
|
||
|
|
<a style={{ color: 'black' }}>{ExtractDateFormate(text)}</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Amount',
|
||
|
|
key: 'BillAmount',
|
||
|
|
dataIndex: 'BillAmount',
|
||
|
|
align: 'center',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Product Details',
|
||
|
|
key: 'ProductDetails',
|
||
|
|
dataIndex: 'ProductDetails',
|
||
|
|
|
||
|
|
align: 'center',
|
||
|
|
render: (ProductDetails, record) => (
|
||
|
|
<IoEye
|
||
|
|
style={{ color: '#1292EE', fontSize: '25px', cursor: 'pointer' }}
|
||
|
|
onClick={() => ViewOrderdetails(ProductDetails)}
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
title: 'Shared Product Details',
|
||
|
|
key: 'OrderDetails',
|
||
|
|
dataIndex: 'OrderDetails',
|
||
|
|
align: 'center',
|
||
|
|
render: (ProductDetails, record) => (
|
||
|
|
<div style={{ display: 'flex', justifyContent: 'center', gap: '12px' }}>
|
||
|
|
<MdOutlineMail
|
||
|
|
size={30}
|
||
|
|
color="#25D366"
|
||
|
|
style={{ cursor: 'pointer' }}
|
||
|
|
title="Share by Email"
|
||
|
|
onClick={() => handleEmailClick(ProductDetails, record)}
|
||
|
|
/>
|
||
|
|
<FaPrint
|
||
|
|
size={25}
|
||
|
|
color="#1292EE"
|
||
|
|
style={{ cursor: 'pointer' }}
|
||
|
|
title="Print"
|
||
|
|
onClick={() => handlePrint(ProductDetails, record)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const QuoationDataColumns = [
|
||
|
|
{
|
||
|
|
title: 'SL.NO',
|
||
|
|
key: 'sno',
|
||
|
|
align: 'center',
|
||
|
|
|
||
|
|
render: (text, object, index) => (
|
||
|
|
<a style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Product Name',
|
||
|
|
dataIndex: 'ProdName',
|
||
|
|
key: 'ProdName',
|
||
|
|
align: 'left',
|
||
|
|
render: (text, row) => (
|
||
|
|
<a style={{ color: 'black' }}>
|
||
|
|
{row.ProdName} ({row.ProdVariantName})
|
||
|
|
</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Qnt',
|
||
|
|
dataIndex: 'Qty',
|
||
|
|
key: 'Qty',
|
||
|
|
render: (text) => <a style={{ color: 'black' }}>{`${text} `}</a>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'UOM',
|
||
|
|
dataIndex: 'UomName',
|
||
|
|
key: 'UomName',
|
||
|
|
width: '80px',
|
||
|
|
align: 'center',
|
||
|
|
render: (text) => <a style={{ color: 'black' }}>{`${text} `}</a>,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (usrMailDataModel) {
|
||
|
|
form.resetFields();
|
||
|
|
}
|
||
|
|
}, [usrMailDataModel]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="userPageTable">
|
||
|
|
<div className="userPageContent">
|
||
|
|
<Messages
|
||
|
|
messageType={messageType}
|
||
|
|
messageData={messageData}
|
||
|
|
onComplete={onComplete}
|
||
|
|
/>
|
||
|
|
<div className="formAddNew">
|
||
|
|
<div>
|
||
|
|
<FormHeader title={'Sales Quotation'} />
|
||
|
|
</div>
|
||
|
|
<div className="searchAddDiv">
|
||
|
|
<div className="formSearch">
|
||
|
|
<Search
|
||
|
|
placeholder="Search by Customer Name"
|
||
|
|
onSearch={onSearch}
|
||
|
|
onSearchChange={onSearchChange}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div style={{ display: 'flex' }}>
|
||
|
|
{/* <TertiaryButton
|
||
|
|
buttonText="IMPORT / EXPORT EXCEL"
|
||
|
|
className="tertiary_Button"
|
||
|
|
handleSubmit={openModal}
|
||
|
|
></TertiaryButton> */}
|
||
|
|
<Buttons
|
||
|
|
buttonText={'Add New'}
|
||
|
|
handleSubmit={() => handelAddButton()}
|
||
|
|
color="901D77"
|
||
|
|
icon={<PlusOutlined />}
|
||
|
|
>
|
||
|
|
ADD
|
||
|
|
</Buttons>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<DefaultModal
|
||
|
|
open={OrderDataModel}
|
||
|
|
title="Product Details"
|
||
|
|
handleCancel={handleOrdermodalCancel}
|
||
|
|
footer={false}
|
||
|
|
children={
|
||
|
|
<div style={{ height: '400px', overflowY: 'scroll' }}>
|
||
|
|
<Table
|
||
|
|
dataSource={QuotationProductdata}
|
||
|
|
columns={QuoationDataColumns}
|
||
|
|
pagination={handlePageChange}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
<DefaultModal
|
||
|
|
width={400}
|
||
|
|
open={usrMailDataModel}
|
||
|
|
title="User Mail"
|
||
|
|
handleCancel={handleUserMailmodalCancel}
|
||
|
|
footer={false}
|
||
|
|
children={
|
||
|
|
<div>
|
||
|
|
<Form form={form} 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 placeholder="Enter your email" />
|
||
|
|
</Form.Item>
|
||
|
|
|
||
|
|
<Button type="primary" htmlType="submit">
|
||
|
|
Submit
|
||
|
|
</Button>
|
||
|
|
</Form>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Tables
|
||
|
|
dataSource={QuotationData}
|
||
|
|
data={QuotationData}
|
||
|
|
columns={columns}
|
||
|
|
pagination={handlePageChange}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div style={{ display: 'none' }}>
|
||
|
|
<PurchaseQuotationPrint
|
||
|
|
PrintingData={PrintData}
|
||
|
|
PrintTempData={PrintTempData}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default PurchaseQuotationList;
|