payslips generator

import React, { useState } from “react”;
import { Card, CardContent } from “@/components/ui/card”;
import { Button } from “@/components/ui/button”;
import { Input } from “@/components/ui/input”;
import { Textarea } from “@/components/ui/textarea”;
import { QRCodeSVG } from “qrcode.react”;

const SalarySlipGenerator = () => {
const [employee, setEmployee] = useState({
name: “John Doe”,
id: “EMP12345”,
designation: “Software Engineer”,
department: “IT”,
doj: “2021-05-10”,
payPeriod: “March 2024”,
paymentDate: “2024-03-31”,
accountNumber: “1234567890”,
bankBranch: “XYZ Bank, Main Branch”,
ifsc: “XYZB0001234”,
});

const [salary, setSalary] = useState({
basic: 30000,
hra: 5000,
transport: 2000,
medical: 1500,
overtime: 2500,
bonus: 5000,
reimbursements: 1000,
incomeTax: 3000,
pf: 4000,
healthInsurance: 1500,
loan: 2000,
});

const grossEarnings =
salary.basic + salary.hra + salary.transport + salary.medical +
salary.overtime + salary.bonus + salary.reimbursements;
const totalDeductions = salary.incomeTax + salary.pf + salary.healthInsurance + salary.loan;
const netPay = grossEarnings – totalDeductions;

return (

Salary Slip – {employee.payPeriod}

Company Name

XYZ Pvt Ltd.

123 Business Park, City, Country

Employee Details

Name: {employee.name}

Employee ID: {employee.id}

Designation: {employee.designation}

Department: {employee.department}

Date of Joining: {employee.doj}

Payment Date: {employee.paymentDate}

Salary Breakdown

Earnings

Basic: ₹{salary.basic}

HRA: ₹{salary.hra}

Transport: ₹{salary.transport}

Medical: ₹{salary.medical}

Overtime: ₹{salary.overtime}

Bonus: ₹{salary.bonus}

Reimbursements: ₹{salary.reimbursements}

Deductions

Income Tax: ₹{salary.incomeTax}

Provident Fund: ₹{salary.pf}

Health Insurance: ₹{salary.healthInsurance}

Loan Repayment: ₹{salary.loan}

Net Pay: ₹{netPay} ({netPay.toLocaleString(“en-IN”)} INR)

Bank Details

Account No: {employee.accountNumber}

Branch: {employee.bankBranch}

IFSC: {employee.ifsc}

This is a computer-generated payslip.

);
};

export default SalarySlipGenerator;