Update attendance report functions: edit & delete record for admin & payroll users

static/css/attendance.css

@@ -1284,3 +1284,71 @@
     display: none;
   }
 }
+/* Delete button styling */
+.btn-delete {
+  background: var(--danger-light);
+  color: var(--danger-color);
+  border: 1px solid rgba(220, 38, 38, 0.2);
+}
+
+.btn-delete:hover {
+  background: var(--danger-color);
+  color: var(--white);
+  border-color: var(--danger-color);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
+}
+
+/* Enhanced action buttons container */
+.record-actions {
+  display: flex;
+  gap: var(--spacing-2);
+  justify-content: center;
+}
+
+/* Action button improvements */
+.action-btn {
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all var(--transition);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-sm);
+  border: 1px solid transparent;
+}
+
+.action-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.action-btn:active {
+  transform: translateY(0);
+}
+
+/* Form styling for edit page */
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+@media (max-width: 768px) {
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+
+  .record-actions {
+    flex-direction: column;
+    gap: var(--spacing-1);
+  }
+
+  .action-btn {
+    width: 100%;
+    height: 32px;
+  }
+}

static/js/attendance_report.js

@@ -379,11 +379,26 @@ function createTableRow(record, displayIndex) {
         </td>
         <td>
             <div class="record-actions">
+                ${
+                  hasEditPermission
+                    ? `
                 <button onclick="editRecord('${record.id}')" 
                         class="action-btn btn-edit"
                         title="Edit Record">
                     <i class="fas fa-edit"></i>
                 </button>
+                <button onclick="deleteRecord('${record.id}', '${record.employeeId}')" 
+                        class="action-btn btn-delete"
+                        title="Delete Record">
+                    <i class="fas fa-trash"></i>
+                </button>
+                `
+                    : `
+                <span class="text-muted" title="Admin or Payroll access required">
+                    <i class="fas fa-lock"></i>
+                </span>
+                `
+                }
             </div>
         </td>
     `;
@@ -511,9 +526,72 @@ function updateFilterStats() {
 
 // Enhanced record actions
 function editRecord(recordId) {
+  // Check permissions before allowing edit
+  if (!hasEditPermission) {
+    alert(
+      "Access denied. Only administrators and payroll staff can edit attendance records."
+    );
+    return;
+  }
+
   console.log(`Edit record: ${recordId}`);
-  // Implement edit functionality
-  alert("Edit functionality to be implemented");
+  // Log the action
+  console.log(`[LOG] User attempting to edit attendance record: ${recordId}`);
+
+  // Redirect to edit page
+  window.location.href = `/attendance/${recordId}/edit`;
+}
+
+function deleteRecord(recordId, employeeId) {
+  // Check permissions before allowing delete
+  if (!hasEditPermission) {
+    alert(
+      "Access denied. Only administrators and payroll staff can delete attendance records."
+    );
+    return;
+  }
+
+  console.log(`Delete record: ${recordId}`);
+
+  // Confirmation dialog
+  const confirmMessage = `Are you sure you want to delete the attendance record for employee "${employeeId}"?\n\nThis action cannot be undone.`;
+
+  if (confirm(confirmMessage)) {
+    console.log(
+      `[LOG] User confirmed deletion of attendance record: ${recordId}`
+    );
+
+    // Send delete request
+    fetch(`/attendance/${recordId}/delete`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Requested-With": "XMLHttpRequest",
+      },
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        if (data.success) {
+          console.log(
+            `[LOG] Successfully deleted attendance record: ${recordId}`
+          );
+          alert("Attendance record deleted successfully!");
+          window.location.reload();
+        } else {
+          console.error(
+            `[LOG] Failed to delete attendance record: ${recordId} - ${data.message}`
+          );
+          alert(data.message || "Error deleting record. Please try again.");
+        }
+      })
+      .catch((error) => {
+        console.error(
+          `[LOG] Error during attendance record deletion: ${recordId}`,
+          error
+        );
+        alert("Error deleting record. Please try again.");
+      });
+  }
 }
 
 function closeModal() {
@@ -696,11 +774,26 @@ function createTableRow(record, displayIndex) {
         </td>
         <td>
             <div class="record-actions">
+                ${
+                  hasEditPermission
+                    ? `
                 <button onclick="editRecord('${record.id}')" 
                         class="action-btn btn-edit"
                         title="Edit Record">
                     <i class="fas fa-edit"></i>
                 </button>
+                <button onclick="deleteRecord('${record.id}', '${record.employeeId}')" 
+                        class="action-btn btn-delete"
+                        title="Delete Record">
+                    <i class="fas fa-trash"></i>
+                </button>
+                `
+                    : `
+                <span class="text-muted" title="Admin or Payroll access required">
+                    <i class="fas fa-lock"></i>
+                </span>
+                `
+                }
             </div>
         </td>
     `;