Modification: add Accounting role to edit record

templates/attendance_report.html

@@ -347,7 +347,7 @@
                                     </button>
                                 {% endif %}
                                 
-                                {% if session.role in ['admin'] %}
+                                {% if session.role in ['admin', 'payroll', 'accounting'] %}
                                 <button onclick="editRecord('{{ record.id }}')" 
                                         class="action-btn btn-edit"
                                         title="Edit Record">
@@ -463,7 +463,8 @@
 <script>
 // Template variables (processed by Flask)
 const userRole = '{{ session.role }}';
-const hasEditPermission = ['admin'].includes(userRole);
+const hasEditPermission = ['admin', 'payroll', 'accounting'].includes(userRole);
+const hasDeletePermission = ['admin'].includes(userRole);
 
 // Enhanced JavaScript for new functionality
 const hasLocationAccuracy = {{ 'true' if has_location_accuracy_feature else 'false' }};
@@ -616,7 +617,7 @@ function editRecord(recordId) {
     
     // Check permissions before allowing edit
     if (!hasEditPermission) {
-        alert('Access denied. Only administrators can edit attendance records.');
+        alert('Access denied. Only administrators, accounting staff can edit attendance records.');
         return;
     }
     
@@ -630,7 +631,7 @@ function deleteRecord(recordId, employeeId) {
     console.log('Delete function called for record:', recordId);
     
     // Check permissions before allowing delete
-    if (!hasEditPermission) {
+    if (!hasDeletePermission) {
         alert('Access denied. Only administrators and can delete attendance records.');
         return;
     }

templates/edit_attendance.html

@@ -126,7 +126,7 @@
       <i class="fas fa-edit"></i>
       Edit Attendance Record
     </h1>
-    <p>Modify attendance record details (Admin & Payroll Access)</p>
+    <p>Modify attendance record details (Admin & Accounting Access)</p>
   </div>
 
   <!-- Current Record Info -->
@@ -237,12 +237,22 @@
       </div>
     </div>
 
+    <!-- Read-Only Notice for Non-Authorized Users -->
+    {% if session.role not in ['admin', 'accounting'] %}
+    <div class="alert alert-warning" style="background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem;">
+      <i class="fas fa-exclamation-triangle"></i>
+      <strong>Read-Only Access:</strong> You can view this record but cannot make changes. Only Admin and Accounting staff can modify attendance records.
+    </div>
+    {% endif %}
+
     <!-- Form Actions -->
     <div class="form-actions">
+      {% if session.role in ['admin', 'accounting'] %}
       <button type="submit" class="btn btn-primary">
         <i class="fas fa-save"></i>
         Update Record
       </button>
+      {% endif %}
       <a href="{{ url_for('attendance_report') }}" class="btn btn-secondary">
         <i class="fas fa-times"></i>
         Cancel
@@ -255,7 +265,32 @@
 {% block extra_scripts %}
 <script>
   document.addEventListener("DOMContentLoaded", function () {
-    // Form validation
+    const userRole = '{{ session.role }}';
+    const authorizedRoles = ['admin', 'accounting'];
+    
+    // Disable all form inputs for non-authorized roles
+    if (!authorizedRoles.includes(userRole)) {
+      const formInputs = document.querySelectorAll('input, textarea, select, button[type="submit"]');
+      formInputs.forEach(input => {
+        if (input.type !== 'button' && !input.closest('a')) {
+          input.disabled = true;
+          input.style.backgroundColor = '#f3f4f6';
+          input.style.cursor = 'not-allowed';
+        }
+      });
+      
+      // Prevent form submission
+      const form = document.querySelector("form");
+      form.addEventListener("submit", function (e) {
+        e.preventDefault();
+        alert("You do not have permission to modify this record. Only Admin and Accounting staff can make changes.");
+        return false;
+      });
+      
+      return; // Exit early for non-authorized users
+    }
+    
+    // Form validation (only for authorized users)
     const form = document.querySelector("form");
     form.addEventListener("submit", function (e) {
       const employeeId = document.getElementById("employee_id").value.trim();