Edit file File name : payslip.php Content :<?php session_start(); if (!isset($_SESSION['user_id'])) { header('Location: index.php'); exit(); } require_once '_helpers.php'; require_once '_payroll_helpers.php'; $conn = get_db_connection(); $business = $conn->query("SELECT * FROM business_settings LIMIT 1")->fetch_assoc(); $employee_id = $_GET['id'] ?? null; if (!$employee_id) die('Employee ID is required.'); // Fetch employee data try { $stmt = $conn->prepare("SELECT * FROM payroll WHERE id = ?"); $stmt->bind_param("s", $employee_id); $stmt->execute(); $result = fetch_all_assoc($stmt); if (empty($result)) die('Employee not found.'); $employee_data_raw = $result[0]; $employee_data = calculate_payroll($employee_data_raw); $conn->close(); } catch (Exception $e) { die('Error fetching employee data.'); } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Payslip - <?php echo htmlspecialchars($employee_data['employeeName']); ?></title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> <style>:root { --primary: <?php echo htmlspecialchars($business['primary_color'] ?? '217 91% 60%'); ?>; } .bg-primary { background-color: hsl(var(--primary)); } .text-primary { color: hsl(var(--primary)); }</style> </head> <body class="bg-slate-50"> <div class="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8 flex flex-col gap-8"> <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"> <div> <h1 class="text-3xl font-bold tracking-tight">Payslip</h1> <p class="text-slate-500">Payslip for <?php echo htmlspecialchars($employee_data['employeeName']); ?> for the period of <?php echo date('F Y'); ?></p> </div> <div class="flex items-center gap-2 self-end sm:self-auto"> <a href="run-payroll.php" class="px-4 py-2 border rounded-full text-sm font-medium hover:bg-slate-100">Back to Payroll</a> <button id="export-pdf" class="px-4 py-2 bg-primary text-white rounded-full text-sm font-semibold flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>Export PDF</button> </div> </div> <div id="payslip-content" class="bg-white rounded-lg shadow-sm border p-4 sm:p-8"> <header class="flex flex-col sm:flex-row justify-between items-start"> <div> <?php if (!empty($business['logo'])): ?> <img src="<?php echo htmlspecialchars($business['logo']); ?>" alt="Business Logo" class="w-36 h-auto"> <?php endif; ?> </div> <div class="text-left sm:text-right mt-4 sm:mt-0"> <h2 class="text-3xl font-bold">Payslip</h2> <p class="text-slate-500">For <?php echo date('F Y'); ?></p> </div> </header> <hr class="my-6"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm"> <div><p class="text-lg font-semibold"><?php echo htmlspecialchars($employee_data['employeeName']); ?></p></div> <div class="text-left sm:text-right"> <p class="font-semibold"><?php echo htmlspecialchars($business['name']); ?></p> <p class="text-slate-500"><?php echo htmlspecialchars($business['address'] ?? ''); ?></p> </div> </div> <hr class="my-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <div> <h4 class="font-semibold mb-2">Earnings</h4> <table class="w-full"> <tbody> <tr class="border-b"><td class="py-2">Base Salary</td><td class="py-2 text-right"><?php echo format_currency($employee_data['baseSalary']); ?></td></tr> <tr class="border-b"><td class="py-2">Bonus</td><td class="py-2 text-right"><?php echo format_currency($employee_data['bonus']); ?></td></tr> <tr class="font-bold bg-slate-50"><td class="p-2">Gross Earnings</td><td class="p-2 text-right"><?php echo format_currency($employee_data['grossSalary']); ?></td></tr> </tbody> </table> </div> <div> <h4 class="font-semibold mb-2">Deductions</h4> <table class="w-full"> <tbody> <tr class="border-b"><td class="py-2">PAYE</td><td class="py-2 text-right"><?php echo format_currency($employee_data['paye']); ?></td></tr> <tr class="border-b"><td class="py-2">Social Security</td><td class="py-2 text-right"><?php echo format_currency($employee_data['socialSecurity']); ?></td></tr> <tr class="border-b"><td class="py-2">Salary Advance</td><td class="py-2 text-right"><?php echo format_currency($employee_data['advanceDeduction']); ?></td></tr> <tr class="font-bold bg-slate-50"><td class="p-2">Total Deductions</td><td class="p-2 text-right"><?php echo format_currency($employee_data['totalDeductions']); ?></td></tr> </tbody> </table> </div> </div> <div class="mt-8 flex justify-end"> <div class="w-full md:w-1/2 bg-primary/10 p-4 rounded-lg"> <div class="flex justify-between items-center text-lg font-bold"><span>Net Salary</span><span><?php echo format_currency($employee_data['netSalary']); ?></span></div> </div> </div> <div class="mt-8 text-sm text-slate-500"> <h4 class="font-semibold text-slate-900 mb-2">Employer Contributions</h4> <table class="w-full"> <tbody> <tr class="border-b"><td class="py-2">Social Security</td><td class="py-2 text-right"><?php echo format_currency($employee_data['employerSocialSecurity']); ?></td></tr> </tbody> </table> </div> </div> </div> <script> document.getElementById('export-pdf').addEventListener('click', function() { const element = document.getElementById('payslip-content'); html2canvas(element, { scale: 2 }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const { jsPDF } = window.jspdf; const pdf = new jsPDF('p', 'mm', 'a4'); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const imgProps= pdf.getImageProperties(imgData); const ratio = imgProps.height / imgProps.width; const imgWidth = pdfWidth - 20; // 10mm margin on each side const imgHeight = imgWidth * ratio; pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight); pdf.save("payslip-<?php echo htmlspecialchars($employee_data['id']); ?>.pdf"); }); }); </script> </body> </html> Save