import { PayrollProcessServices } from "@gtpl/shared-services/hrms"; import { Button, Card, Col, Descriptions, Form, Row, Select } from "antd"; import logo from 'apps/ui/masters-ui/src/app/BMRpayslip.jpg'; import { PayslipGenerationReq } from "libs/shared-models/hrms/src/lib/payroll-process/payslip-generation-req"; import moment from "moment"; import React, { useEffect, useState } from "react"; import { useParams } from 'react-router-dom'; const { Option } = Select // export const getCssFromComponent = (fromDoc, toDoc) => { // Array.from(fromDoc.styleSheets).forEach((styleSheet: any) => { // if (styleSheet.cssRules) { // // true for inline styles // const newStyleElement = toDoc.createElement("style"); // Array.from(styleSheet.cssRules).forEach((cssRule: any) => { // newStyleElement.appendChild(toDoc.createTextNode(cssRule.cssText)); // }); // toDoc.head.appendChild(newStyleElement); // } // }); // }; export const getCssFromComponent = (fromDoc: Document, toDoc: Document) => { Array.from(fromDoc.styleSheets).forEach((styleSheet: CSSStyleSheet) => { try { if (styleSheet?.cssRules) { // true for inline styles and same-origin stylesheets const newStyleElement = toDoc.createElement("style"); Array.from(styleSheet.cssRules).forEach((cssRule: CSSRule) => { newStyleElement.appendChild(toDoc.createTextNode(cssRule.cssText)); }); toDoc.head.appendChild(newStyleElement); } } catch (e) { console.warn("Could not access stylesheet rules for", styleSheet.href, e); } }); }; enum EmployeeMode { InHouse = 'In-House', NMR = 'NMR', } export const PayslipMail = ({ employeeType, yearMonth, year, employeeId }) => { const [form] = Form.useForm() const service = new PayrollProcessServices() const [data, setData] = useState([]) const [modalOpen, setModalOpen] = useState(false) const [empDetails, setEmpDetails] = useState([]) const monthNames = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"]; // const { employeeType, yearMonth, year, employeeId } = useParams(); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(()=>{ onGenerate() },[employeeId]) const onGenerate = async () => { try { setLoading(true); const employeeIds = employeeId?.split(',')?.map(id => Number(id?.trim())); const req = new PayslipGenerationReq(employeeIds, yearMonth, employeeType, year); const res = await service.getPayrollLogByEmployeeId(req); if (res.status) { setData(res.data); } else { setError("Failed to fetch data"); } } catch (err) { console.error("Error fetching data:", err); setError("An error occurred while fetching data"); } finally { setLoading(false); } }; if (loading) return

Loading...

; if (error) return

Error: {error}

; const handlePrint = () => { const invoiceContent = document.getElementById("print"); if (invoiceContent) { const devContent = invoiceContent.innerHTML; const printWindow = window.open("", "PRINT", "height=900,width=1600"); printWindow.document.write(` ${devContent} `); getCssFromComponent(document, printWindow.document); printWindow.document.close(); setTimeout(function () { printWindow.print(); printWindow.close(); }, 1000); // Add a delay to ensure all content is loaded } }; const totalAmount = (data) => { let totalOFRows: any = [] const earnings = [ parseFloat(data.basic) || 0, parseFloat(data.hraAmount) || 0, parseFloat(data.eduAmount) || 0, parseFloat(data.medicalAmount) || 0, parseFloat(data.splAmount) || 0, parseFloat(data.conveyanceAmount) || 0, parseFloat(data.petrolAmount) || 0, parseFloat(data.shoeAmount) || 0, parseFloat(data.washingAmount) || 0, parseFloat(data.uniformAmount) || 0, parseFloat(data.helperAmount) || 0, parseFloat(data.productionAmount) || 0, parseFloat(data.taAmount) || 0, parseFloat(data.bonusAmount) || 0, ]; const totalEarnings = earnings.reduce((acc, curr) => acc + curr, 0); totalOFRows.push(totalEarnings.toFixed(2).toLocaleString()); return totalOFRows }; const totalGross = (data) => { let totalOFRows: any = [] const earnings = [ parseFloat(data.calBasic) || 0, parseFloat(data.calHra) || 0, parseFloat(data.calEdu) || 0, parseFloat(data.calMedical) || 0, parseFloat(data.calSpl) || 0, parseFloat(data.calConveyance) || 0, parseFloat(data.calPetrol) || 0, parseFloat(data.calShoe) || 0, parseFloat(data.calWashing) || 0, parseFloat(data.calHelper) || 0, parseFloat(data.calProduction) || 0, parseFloat(data.calTa) || 0, parseFloat(data.calBonus) || 0, ]; const totalEarnings = earnings.reduce((acc, curr) => acc + curr, 0); totalOFRows.push(totalEarnings.toFixed(2).toLocaleString()); return totalOFRows }; const totalDeduction = (data) => { let totalRows: any = [] const deductions = [ parseFloat(data.epfAmount) || 0, parseFloat(data.esicAmount) || 0, parseFloat(data.messAmount) || 0, parseFloat(data.professionalTax) || 0, parseFloat(data.othersAmount) || 0, parseFloat(data.tds) || 0, ]; const totalDeductions = deductions.reduce((acc, curr) => acc + curr, 0); totalRows.push(totalDeductions.toFixed(2).toLocaleString()); return totalRows }; const calculateNetAmount = (data) => { const totalEarnings = totalAmount(data); const totalDeductions = totalDeduction(data); const netAmountFromEarnings = totalEarnings - totalDeductions; return netAmountFromEarnings.toFixed(2).toLocaleString(); }; const calculateNetGross = (data) => { const totalGrossAmount = totalGross(data); const totalDeductions = totalDeduction(data); const netAmountFromGross = totalGrossAmount - totalDeductions; return netAmountFromGross.toFixed(2).toLocaleString(); }; const renderEarningsRow = (data) => { const earningsRows = []; if (parseFloat(data.basic) > 0) { earningsRows.push( Basic Salary {data.basic} {data.calBasic} ); } if (parseFloat(data.hraAmount) > 0) { earningsRows.push( House Rent Allowance {data.hraAmount} {data.calHra} ); } if (parseFloat(data.eduAmount) > 0) { earningsRows.push( Education Allowance {data.eduAmount} {data.calEdu} ); } if (parseFloat(data.medicalAmount) > 0) { earningsRows.push( Medical Allowance {data.medicalAmount} {data.calMedical} ); } if (parseFloat(data.splAmount) > 0) { earningsRows.push( Special Allowance {data.splAmount} {data.calSpl} ); } if (parseFloat(data.conveyanceAmount) > 0) { earningsRows.push( Conveyance Allowance {data.conveyanceAmount} {data.calConveyance} ); } if (parseFloat(data.petrolAmount) > 0) { earningsRows.push( Petrol Allowance {data.petrolAmount} {data.calPetrol} ); } if (parseFloat(data.shoeAmount) > 0) { earningsRows.push( Shoe Allowance {data.shoeAmount} {data.calShoe} ); } if (parseFloat(data.washingAmount) > 0) { earningsRows.push( Washing Allowance {data.washingAmount} {data.calWashing} ); } if (parseFloat(data.uniformAmount) > 0) { earningsRows.push( Uniform Allowance {data.uniformAmount} {data.calUniform} ); } if (parseFloat(data.helperAmount) > 0) { earningsRows.push( Helper Allowance {data.helperAmount} {data.calHelper} ); } if (parseFloat(data.productionAmount) > 0) { earningsRows.push( Production Allowance {data.productionAmount} {data.calProduction} ); } if (parseFloat(data.taAmount) > 0) { earningsRows.push( TA Allowance {data.taAmount} {data.calTa} ); } if (parseFloat(data.bonusAmount) > 0) { earningsRows.push( Bonus Allowance {data.bonusAmount} {data.calBonus} ); } return earningsRows; }; const renderDeductionsRow = (data) => { const deductionsRows = []; if (parseFloat(data.epfAmount) > 0) { deductionsRows.push( EPF {data.epfAmount} {data.epfAmount} ); } if (parseFloat(data.esicAmount) > 0) { deductionsRows.push( ESIC Allowance {data.esicAmount} {data.esicAmount} ); } if (parseFloat(data.messAmount) > 0) { deductionsRows.push( Mess Deduction {data.messAmount} {data.messAmount} ); } if (parseFloat(data.professionalTax) > 0) { deductionsRows.push( Professional Tax {data.professionalTax} {data.professionalTax} ); } if (parseFloat(data.othersAmount) > 0) { deductionsRows.push( Other Deduction {data.othersAmount} {data.othersAmount} ); } if (parseFloat(data.tds) > 0) { deductionsRows.push( TDS {data.tds} {data.tds} ); } return deductionsRows; }; const getMonthName = (monthData) => { // Extract the last two digits from monthData const monthIndex = parseInt(monthData?.slice(-2), 10) - 1; // Ensure the index is within the valid range if (monthIndex >= 0 && monthIndex < monthNames.length) { return monthNames[monthIndex]; } else { return "Invalid Month"; // Handle invalid month data } }; const monthName = getMonthName(yearMonth); return ( Payslip Generation} style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#45c8f6', border: 0, paddingTop: "1%", paddingBottom: "1%" }}> {/* setModalOpen(false)}> */}

{data?.map(e => { const indexRecord = empDetails?.find(rec => { return (rec?.employeeId === e?.employeeId) }) const index = indexRecord?.index return (

{/* S.NO :-{index} */}

BMR Industries Private Limited
PAYSLIP FOR THE MONTH OF {monthName}-{year} Employee Name }>{e?.employeeName} Employee No }>{e?.employeeCode} Function }>{e?.department} Designation }>{e?.designation} Location}>Damavaram Bank}>{`${e?.bank ?? ''} ${e?.bankAcNo ?? ''} ${e?.ifsc ?? ''}`} Date Of Join}>{e?.doj ? moment(e.doj).format('YYYY-MM-DD') : 'N/A'} Tax Regime }>Regular Tax Regime Income Tax Number(PAN)}>{e?.pan} Universal Account No }>{e?.uan} PF Account No }>{e?.pfNo} ESI Number}>{e?.esi ? e.esi : ''} PR Account No (PRAN)} > {''}

Attendance

Value

Attendance

{Math.round(e?.attendance)} Days

{renderEarningsRow(e)}

Earnings	Amount	Gross Salary

{/* Deductions Section */} {renderDeductionsRow(e)}

Deduction	Amount	Gross Salary

Total Earnings	{totalAmount(e)}	{totalGross(e)}

Total Deductions	{totalDeduction(e)}	{totalDeduction(e)}
Net Amount	{calculateNetAmount(e)}	{calculateNetGross(e)}

) })}

{/* */} ) } export default PayslipMail