View file File name : hr.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(); // Fetch all payroll data and calculate net salary for display $payroll_result = $conn->query("SELECT * FROM payroll ORDER BY employeeName ASC"); $payroll_list_raw = []; if($payroll_result) { while($row = $payroll_result->fetch_assoc()) { $payroll_list_raw[] = $row; } } $payroll_list = array_map('calculate_payroll', $payroll_list_raw); $conn->close(); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Human Resources - <?php echo htmlspecialchars($business['name']); ?></title> <script src="https://cdn.tailwindcss.com"></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)); } .border-primary { border-color: hsl(var(--primary)); }</style> </head> <body class="bg-slate-50"> <div class="flex h-screen"> <?php include '_sidebar.php'; ?> <div class="flex-1 flex flex-col overflow-hidden lg:ml-64"> <?php include '_header.php'; ?> <main class="flex-1 overflow-x-hidden overflow-y-auto bg-slate-50 p-6"> <div class="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">Human Resources</h1> <p class="text-slate-500">Manage your employee salaries and payments.</p> </div> <div class="flex items-center gap-2 self-end sm:self-auto"> <button class="px-4 py-2 border rounded-full text-sm font-medium hover:bg-slate-100 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> <a href="run-payroll.php" class="px-4 py-2 border rounded-full text-sm font-medium hover:bg-slate-100 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"><polygon points="5 3 19 12 5 21 5 3"/></svg> Run Payroll </a> <a href="employee-form.php" class="px-4 py-2 bg-primary text-white rounded-full text-sm font-semibold hover:bg-opacity-90 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"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="16"/><line x1="8" x2="16" y1="12" y2="12"/></svg> Add Employee </a> </div> </div> <div class="relative w-full max-w-sm"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg> <input id="employee-search" type="text" placeholder="Search by employee name" class="pl-10 w-full h-10 px-3 py-2 border border-slate-300 rounded-full bg-white text-sm"> </div> <div class="bg-white rounded-lg shadow-sm border"> <table class="w-full text-sm" id="payroll-table"> <thead class="bg-slate-50"> <tr> <th class="p-4 text-left font-semibold text-slate-600">Employee Name</th> <th class="p-4 text-left font-semibold text-slate-600 hidden sm:table-cell">Base Salary</th> <th class="p-4 text-left font-semibold text-slate-600 hidden md:table-cell">Bonuses</th> <th class="p-4 text-left font-semibold text-slate-600 hidden lg:table-cell">Social Security</th> <th class="p-4 text-right font-semibold text-slate-600">Net Salary</th> <th class="p-4"></th> </tr> </thead> <tbody> <?php foreach ($payroll_list as $employee): ?> <tr class="border-b hover:bg-slate-50 employee-row" data-name="<?php echo strtolower(htmlspecialchars($employee['employeeName'])); ?>" style="cursor: pointer;" onclick="window.location.href='employee-form.php?id=<?php echo htmlspecialchars($employee['id']); ?>'"> <td class="p-4 font-medium text-slate-800"><?php echo htmlspecialchars($employee['employeeName']); ?></td> <td class="p-4 text-slate-600 hidden sm:table-cell"><?php echo format_currency($employee['baseSalary']); ?></td> <td class="p-4 text-slate-600 hidden md:table-cell"><?php echo format_currency($employee['bonus']); ?></td> <td class="p-4 text-slate-600 hidden lg:table-cell"><?php echo format_currency($employee['socialSecurity']); ?></td> <td class="p-4 text-right font-semibold"><?php echo format_currency($employee['netSalary']); ?></td> <td class="p-4 relative"> <button class="dropdown-toggle p-2 rounded-full hover:bg-slate-100" onclick="event.stopPropagation();"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg> </button> <div class="dropdown-menu hidden absolute right-8 top-1/2 -translate-y-1/2 w-48 bg-white rounded-md shadow-lg border z-10 p-1"> <a href="employee-form.php?id=<?php echo htmlspecialchars($employee['id']); ?>" class="flex items-center gap-2 w-full text-left px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50 rounded-md"><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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>Edit</a> <hr class="my-1"> <button class="employee-action flex items-center gap-2 w-full text-left px-3 py-1.5 text-sm text-red-600 hover:bg-red-50 rounded-md" data-action="delete" data-id="<?php echo htmlspecialchars($employee['id']); ?>" data-name="<?php echo htmlspecialchars($employee['employeeName']); ?>"><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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>Delete</button> </div> </td> </tr> <?php endforeach; ?> </tbody> </table> </div> </div> </main> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const searchInput = document.getElementById('employee-search'); const table = document.getElementById('payroll-table'); const rows = table.querySelectorAll('.employee-row'); searchInput.addEventListener('input', (e) => { const searchTerm = e.target.value.toLowerCase(); rows.forEach(row => { const name = row.dataset.name; if (name.includes(searchTerm)) { row.style.display = ''; } else { row.style.display = 'none'; } }); }); document.body.addEventListener('click', (e) => { document.querySelectorAll('.dropdown-menu').forEach(menu => { if (!menu.parentElement.contains(e.target)) { menu.classList.add('hidden'); } }); const dropdownToggle = e.target.closest('.dropdown-toggle'); if (dropdownToggle) { e.stopPropagation(); const menu = dropdownToggle.nextElementSibling; document.querySelectorAll('.dropdown-menu').forEach(m => { if (m !== menu) m.classList.add('hidden'); }); menu.classList.toggle('hidden'); } const employeeAction = e.target.closest('.employee-action'); if(employeeAction) { e.stopPropagation(); const action = employeeAction.dataset.action; if(action === 'delete') { const employeeId = employeeAction.dataset.id; const employeeName = employeeAction.dataset.name; if(confirm(`Are you sure you want to delete ${employeeName}? This action cannot be undone.`)) { const formData = new FormData(); formData.append('action', 'delete_employee'); formData.append('employee_id', employeeId); fetch('api.php', { method: 'POST', body: formData }) .then(res => res.json()) .then(data => { if(data.success) { alert(data.data.message); location.reload(); } else { alert('Error: ' + data.message); } }); } } } }); }); </script> </body> </html>