346 lines
10 KiB
HTML
346 lines
10 KiB
HTML
{% extends "base_authenticated.html" %}
|
|
{% block title %}Edit Attendance Record - QR Code Management{% endblock %}
|
|
{% block extra_head %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/forms.css') }}" />
|
|
<style>
|
|
.edit-attendance-container {
|
|
max-width: 800px;
|
|
margin: 2rem auto;
|
|
padding: 2rem;
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.form-header {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 2px solid #e5e7eb;
|
|
}
|
|
|
|
.form-header h1 {
|
|
color: #1f2937;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.form-header p {
|
|
color: #6b7280;
|
|
margin: 0;
|
|
}
|
|
|
|
.form-section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.form-section h3 {
|
|
color: #374151;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
margin-top: 2rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.record-info {
|
|
background: #f9fafb;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.record-info h4 {
|
|
color: #374151;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.record-info p {
|
|
color: #6b7280;
|
|
margin: 0.25rem 0;
|
|
}
|
|
|
|
.audit-note-section {
|
|
background: #fef3c7;
|
|
border: 1px solid #f59e0b;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.audit-note-section h3 {
|
|
color: #b45309;
|
|
border-bottom-color: #f59e0b;
|
|
}
|
|
|
|
.audit-note-section .form-group label {
|
|
color: #b45309;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.audit-note-section textarea {
|
|
border-color: #f59e0b;
|
|
}
|
|
|
|
.audit-note-section textarea:focus {
|
|
border-color: #d97706;
|
|
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
|
|
}
|
|
|
|
.existing-notes {
|
|
background: #f3f4f6;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 6px;
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.existing-notes h4 {
|
|
color: #374151;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.notes-display textarea {
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
border: 1px solid #d1d5db;
|
|
}
|
|
|
|
.audit-note-section textarea {
|
|
width: 95%;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="edit-attendance-container">
|
|
<div class="form-header">
|
|
<h1>
|
|
<i class="fas fa-edit"></i>
|
|
Edit Attendance Record
|
|
</h1>
|
|
<p>Modify attendance record details (Admin & Accounting Access)</p>
|
|
</div>
|
|
|
|
<!-- Current Record Info -->
|
|
<div class="record-info">
|
|
<h4><i class="fas fa-info-circle"></i> Current Record Information</h4>
|
|
<p><strong>Record ID:</strong> {{ attendance_record.id }}</p>
|
|
<p><strong>Current Employee:</strong> {{ attendance_record.employee_id }}</p>
|
|
<p><strong>Current Date:</strong> {{ attendance_record.check_in_date.strftime('%Y-%m-%d') }}</p>
|
|
<p><strong>Current Time:</strong> {{ attendance_record.check_in_time.strftime('%H:%M') }}</p>
|
|
<p><strong>Current Location:</strong> {{ attendance_record.location_name }}</p>
|
|
</div>
|
|
|
|
<form method="POST" action="{{ url_for('edit_attendance', record_id=attendance_record.id) }}">
|
|
|
|
<!-- Audit Note Section -->
|
|
<div class="audit-note-section">
|
|
<h3><i class="fas fa-clipboard-list"></i> Audit Information</h3>
|
|
|
|
{% if attendance_record.edit_note %}
|
|
<div class="existing-notes">
|
|
<h4><i class="fas fa-history"></i> Previous Edit History</h4>
|
|
<div class="notes-display">
|
|
<textarea readonly class="form-control" rows="4" style="background-color: #f8f9fa; font-family: monospace; font-size: 0.9em;">{{ attendance_record.edit_note }}</textarea>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="form-group" style="margin-top: 1rem;">
|
|
<label for="edit_note">{% if attendance_record.edit_note %}New Edit Reason (Required) *{% else %}Reason for Edit (Required) *{% endif %}</label>
|
|
<textarea
|
|
id="edit_note"
|
|
name="edit_note"
|
|
required
|
|
class="form-control"
|
|
rows="3"
|
|
placeholder="Please provide a reason for editing this attendance record (for audit purposes)"
|
|
></textarea>
|
|
<small class="form-help">
|
|
{% if attendance_record.edit_note %}
|
|
<strong>Note:</strong> Your new reason will be appended to the existing audit trail.
|
|
{% else %}
|
|
This note will be logged for audit purposes and added to the record's audit trail.
|
|
{% endif %}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Employee Information -->
|
|
<div class="form-section">
|
|
<h3><i class="fas fa-user"></i> Employee Information</h3>
|
|
<div class="form-group">
|
|
<label for="employee_id">Employee ID *</label>
|
|
<input
|
|
type="text"
|
|
id="employee_id"
|
|
name="employee_id"
|
|
value="{{ attendance_record.employee_id }}"
|
|
required
|
|
class="form-control"
|
|
placeholder="Enter employee ID"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Date & Time Information -->
|
|
<div class="form-section">
|
|
<h3><i class="fas fa-clock"></i> Check-in Details</h3>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="check_in_date">Check-in Date *</label>
|
|
<input
|
|
type="date"
|
|
id="check_in_date"
|
|
name="check_in_date"
|
|
value="{{ attendance_record.check_in_date.strftime('%Y-%m-%d') }}"
|
|
required
|
|
class="form-control"
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="check_in_time">Check-in Time *</label>
|
|
<input
|
|
type="time"
|
|
id="check_in_time"
|
|
name="check_in_time"
|
|
value="{{ attendance_record.check_in_time.strftime('%H:%M') }}"
|
|
required
|
|
class="form-control"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location Information -->
|
|
<div class="form-section">
|
|
<h3><i class="fas fa-map-marker-alt"></i> Location Information</h3>
|
|
<div class="form-group">
|
|
<label for="location_name">Location Name *</label>
|
|
<input
|
|
type="text"
|
|
id="location_name"
|
|
name="location_name"
|
|
value="{{ attendance_record.location_name }}"
|
|
required
|
|
class="form-control"
|
|
placeholder="Enter location name"
|
|
/>
|
|
</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
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
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();
|
|
const locationName = document.getElementById("location_name").value.trim();
|
|
const editNote = document.getElementById("edit_note").value.trim();
|
|
|
|
if (!employeeId || !locationName || !editNote) {
|
|
e.preventDefault();
|
|
alert("Please fill in all required fields, including the audit note.");
|
|
return;
|
|
}
|
|
|
|
// Confirm update
|
|
const confirmUpdate = confirm(
|
|
"Are you sure you want to update this attendance record?\n\nThis action will be logged for audit purposes."
|
|
);
|
|
if (!confirmUpdate) {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
|
|
// Auto-uppercase employee ID
|
|
document.getElementById("employee_id").addEventListener("input", function () {
|
|
this.value = this.value.toUpperCase();
|
|
});
|
|
|
|
// Character counter for audit note
|
|
const noteTextarea = document.getElementById("edit_note");
|
|
const maxLength = 500;
|
|
|
|
// Add character counter
|
|
const charCounter = document.createElement("small");
|
|
charCounter.className = "form-help";
|
|
charCounter.style.float = "right";
|
|
charCounter.style.color = "#6b7280";
|
|
noteTextarea.parentNode.appendChild(charCounter);
|
|
|
|
function updateCharCounter() {
|
|
const remaining = maxLength - noteTextarea.value.length;
|
|
charCounter.textContent = `${remaining} characters remaining`;
|
|
if (remaining < 50) {
|
|
charCounter.style.color = "#ef4444";
|
|
} else {
|
|
charCounter.style.color = "#6b7280";
|
|
}
|
|
}
|
|
|
|
noteTextarea.setAttribute("maxlength", maxLength);
|
|
noteTextarea.addEventListener("input", updateCharCounter);
|
|
updateCharCounter();
|
|
});
|
|
</script>
|
|
{% endblock %} |