nngo/GOV_QR_Codes_Management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update view record details web and print layout

Browse Source
This commit is contained in:
nngo
2025-10-09 12:02:08 -04:00
parent f83f032a60
commit 7d0f5c363c
1 changed files with 345 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/time_attendance_record_detail.html
+340 -343
View File
@@ -21,10 +21,10 @@
<div class="header-content">
<h1>
<i class="fas fa-file-alt"></i>
Record Details
Time Attendance Record Details
</h1>
<p class="header-description">
Detailed information for attendance record #{{ record.id }}
Detailed information for {{ record.employee_name }}
</p>
</div>
@@ -44,33 +44,8 @@
<!-- Record Details -->
<div class="record-detail-container">
<!-- Employee Information -->
<div class="detail-section">
<div class="section-header">
<h2>
<i class="fas fa-user"></i>
Employee Information
</h2>
</div>
<div class="section-body">
<div class="employee-profile">
<div class="employee-avatar large">
{{ record.employee_name[0].upper() if record.employee_name else record.employee_id[0].upper() }}
</div>
<div class="employee-details">
<h3>{{ record.employee_name }}</h3>
<div class="employee-meta">
<div class="meta-item">
<i class="fas fa-id-card"></i>
<span>Employee ID: {{ record.employee_id }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Attendance Information -->
<!-- Attendance Information Section - Matching Excel Column Order -->
<div class="detail-section">
<div class="section-header">
<h2>
@@ -79,31 +54,78 @@
</h2>
</div>
<div class="section-body">
<div class="info-grid">
<div class="detail-info-grid">
<!-- 1. ID (Employee ID) -->
<div class="info-item">
<div class="info-label">
<i class="fas fa-id-card"></i>
ID
</div>
<div class="info-value">
{{ record.employee_id }}
</div>
</div>
<!-- 2. Name -->
<div class="info-item">
<div class="info-label">
<i class="fas fa-user"></i>
Name
</div>
<div class="info-value">
{{ record.employee_name }}
</div>
</div>
<!-- 3. Platform -->
<div class="info-item">
<div class="info-label">
<i class="fas fa-mobile-alt"></i>
Platform
</div>
<div class="info-value platform">
{{ record.platform if record.platform else 'Not specified' }}
</div>
</div>
<!-- 4. Date -->
<div class="info-item">
<div class="info-label">
<i class="fas fa-calendar"></i>
Date
</div>
<div class="info-value">
{{ record.attendance_date.strftime('%A, %B %d, %Y') }}
{{ record.attendance_date.strftime('%Y-%m-%d') }}
</div>
</div>
<!-- 5. Time -->
<div class="info-item">
<div class="info-label">
<i class="fas fa-clock"></i>
Time
</div>
<div class="info-value time-display">
{{ record.attendance_time.strftime('%I:%M:%S %p') }}
{{ record.attendance_time.strftime('%H:%M:%S') }}
</div>
</div>
<!-- 6. Location Name -->
<div class="info-item">
<div class="info-label">
<i class="fas fa-tag"></i>
Action
<i class="fas fa-map-marker-alt"></i>
Location Name
</div>
<div class="info-value">
{{ record.location_name }}
</div>
</div>
<!-- 7. Action Description -->
<div class="info-item">
<div class="info-label">
<i class="fas fa-tasks"></i>
Action Description
</div>
<div class="info-value">
<span class="action-badge {{ record.action_description.lower().replace(' ', '-') }}">
@@ -119,41 +141,9 @@
</div>
</div>
<div class="info-item">
<div class="info-label">
<i class="fas fa-calendar-plus"></i>
Full Date & Time
</div>
<div class="info-value">
{{ record.formatted_datetime }}
</div>
</div>
</div>
</div>
</div>
<!-- Location Information -->
<div class="detail-section">
<div class="section-header">
<h2>
<i class="fas fa-map-marker-alt"></i>
Location Information
</h2>
</div>
<div class="section-body">
<div class="info-grid">
<div class="info-item full-width">
<div class="info-label">
<i class="fas fa-building"></i>
Location Name
</div>
<div class="info-value">
{{ record.location_name }}
</div>
</div>
<!-- 8. Event Description -->
{% if record.event_description %}
<div class="info-item full-width">
<div class="info-item">
<div class="info-label">
<i class="fas fa-info-circle"></i>
Event Description
@@ -164,45 +154,23 @@
</div>
{% endif %}
{% if record.recorded_address %}
<!-- 9. Recorded Address -->
<div class="info-item full-width">
<div class="info-label">
<i class="fas fa-map-pin"></i>
<i class="fas fa-location-arrow"></i>
Recorded Address
</div>
<div class="info-value address">
{% if record.recorded_address %}
{{ record.recorded_address }}
</div>
</div>
{% else %}
<span class="text-muted">No address recorded</span>
{% endif %}
</div>
</div>
</div>
<!-- Device Information -->
{% if record.platform %}
<div class="detail-section">
<div class="section-header">
<h2>
<i class="fas fa-mobile-alt"></i>
Device Information
</h2>
</div>
<div class="section-body">
<div class="info-grid">
<div class="info-item full-width">
<div class="info-label">
<i class="fas fa-desktop"></i>
Platform
</div>
<div class="info-value platform">
{{ record.platform }}
</div>
</div>
</div>
</div>
</div>
{% endif %}
<!-- Import Information -->
<div class="detail-section">
@@ -213,7 +181,7 @@
</h2>
</div>
<div class="section-body">
<div class="info-grid">
<div class="detail-info-grid">
{% if record.import_batch_id %}
<div class="info-item">
<div class="info-label">
@@ -261,7 +229,7 @@
</div>
</div>
<!-- Related Records -->
<!-- Quick Actions -->
<div class="detail-section">
<div class="section-header">
<h2>
@@ -294,28 +262,17 @@
</a>
{% if record.import_batch_id %}
<a href="{{ url_for('time_attendance_records', import_batch=record.import_batch_id) }}"
<a href="{{ url_for('view_import_batch', batch_id=record.import_batch_id) }}"
class="action-card">
<div class="action-icon">
<i class="fas fa-file-import"></i>
</div>
<div class="action-content">
<h4>View Batch Records</h4>
<h4>View Import Batch</h4>
<p>See all records from this import batch</p>
</div>
</a>
{% endif %}
<a href="{{ url_for('time_attendance_records', start_date=record.attendance_date, end_date=record.attendance_date) }}"
class="action-card">
<div class="action-icon">
<i class="fas fa-calendar-day"></i>
</div>
<div class="action-content">
<h4>View Daily Records</h4>
<p>See all records for {{ record.attendance_date.strftime('%Y-%m-%d') }}</p>
</div>
</a>
</div>
</div>
</div>
@@ -323,32 +280,33 @@
</div>
<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="modal" style="display: none;">
{% if session.role == 'admin' %}
<div class="modal" id="deleteModal">
<div class="modal-content">
<div class="modal-header">
<h3>
<i class="fas fa-exclamation-triangle text-danger"></i>
Confirm Deletion
<i class="fas fa-exclamation-triangle"></i>
Confirm Delete
</h3>
<button class="modal-close" onclick="closeDeleteModal()">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this attendance record?</p>
<div class="record-summary">
<div><strong>Employee:</strong> {{ record.employee_name }}</div>
<div><strong>Date:</strong> {{ record.attendance_date.strftime('%Y-%m-%d') }}</div>
<div><strong>Time:</strong> {{ record.attendance_time.strftime('%H:%M:%S') }}</div>
<div><strong>Action:</strong> {{ record.action_description }}</div>
<p><strong>Employee:</strong> {{ record.employee_name }} ({{ record.employee_id }})</p>
<p><strong>Date:</strong> {{ record.attendance_date.strftime('%Y-%m-%d') }}</p>
<p><strong>Time:</strong> {{ record.attendance_time.strftime('%H:%M:%S') }}</p>
<p><strong>Location:</strong> {{ record.location_name }}</p>
</div>
<p class="warning-text">
<i class="fas fa-exclamation-triangle"></i>
This action cannot be undone.
<i class="fas fa-exclamation-circle"></i>
This action cannot be undone!
</p>
</div>
<div class="modal-footer">
<button class="btn btn-outline" onclick="closeDeleteModal()">Cancel</button>
<button class="btn btn-secondary" onclick="closeDeleteModal()">
<i class="fas fa-times"></i>
Cancel
</button>
<form method="POST" action="{{ url_for('delete_time_attendance_record', record_id=record.id) }}" style="display: inline;">
<button type="submit" class="btn btn-danger">
<i class="fas fa-trash"></i>
@@ -358,17 +316,21 @@
</div>
</div>
</div>
{% endif %}
<style>
/* Override and fix layout for record detail page */
.record-detail-container {
display: grid;
gap: 2rem;
display: block;
max-width: 1200px;
margin: 0 auto;
}
.detail-section {
background: #ffffff;
border-radius: 0.75rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
overflow: hidden;
}
@@ -376,17 +338,6 @@
background: #f8fafc;
padding: 1.5rem;
border-bottom: 1px solid #e2e8f0;
position: relative;
}
.section-header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}
.section-header h2 {
@@ -407,70 +358,26 @@
padding: 2rem;
}
.employee-profile {
display: flex;
align-items: center;
gap: 1.5rem;
}
.employee-avatar.large {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 2rem;
font-weight: 600;
flex-shrink: 0;
}
.employee-details h3 {
font-size: 1.5rem;
font-weight: 700;
color: #0f172a;
margin-bottom: 0.5rem;
}
.employee-meta {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.meta-item {
display: flex;
align-items: center;
gap: 0.5rem;
color: #64748b;
font-size: 0.875rem;
}
.meta-item i {
width: 16px;
text-align: center;
color: #8b5cf6;
}
.info-grid {
/* Custom grid for detail info */
.detail-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.detail-info-grid .info-item {
background: transparent;
border: none;
padding: 0;
}
.detail-info-grid .info-item:hover {
background: transparent;
border: none;
}
.info-item {
padding: 1.5rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
transition: all 0.2s ease-in-out;
}
.info-item:hover {
background: #f1f5f9;
border-color: #cbd5e1;
display: block;
}
.info-item.full-width {
@@ -482,51 +389,85 @@
align-items: center;
gap: 0.5rem;
font-weight: 600;
color: #374151;
color: #64748b;
font-size: 0.875rem;
margin-bottom: 0.75rem;
margin-bottom: 0.5rem;
}
.info-label i {
color: #8b5cf6;
width: 16px;
text-align: center;
font-size: 0.875rem;
}
.info-value {
color: #0f172a;
font-size: 1rem;
font-weight: 500;
padding-left: 1.5rem;
}
.info-value.platform {
font-family: 'Courier New', monospace;
color: #64748b;
font-size: 0.875rem;
}
.info-value.time-display {
font-family: monospace;
font-size: 1.125rem;
font-weight: 600;
font-family: 'Courier New', monospace;
font-size: 1rem;
font-weight: 700;
color: #1e40af;
}
.info-value.address {
line-height: 1.5;
line-height: 1.6;
color: #475569;
}
.info-value.platform {
font-family: monospace;
color: #475569;
.action-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.875rem;
border: none;
}
.action-badge.check-in {
background: #dcfce7;
color: #166534;
}
.action-badge.check-out {
background: #fef3c7;
color: #92400e;
}
.action-badge i {
font-size: 0.875rem;
}
.text-muted {
color: #94a3b8;
font-style: italic;
}
.batch-id {
background: #f1f5f9;
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
font-family: monospace;
border-radius: 6px;
font-family: 'Courier New', monospace;
font-size: 0.875rem;
color: #475569;
border: 1px solid #cbd5e1;
display: inline-block;
}
/* Action Grid */
.action-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -540,17 +481,17 @@
padding: 1.5rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
border-radius: 12px;
text-decoration: none;
color: inherit;
transition: all 0.2s ease-in-out;
transition: all 0.2s ease;
}
.action-card:hover {
background: #ffffff;
border-color: #8b5cf6;
transform: translateY(-2px);
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
text-decoration: none;
color: inherit;
}
@@ -559,7 +500,7 @@
width: 50px;
height: 50px;
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
border-radius: 0.5rem;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
@@ -572,162 +513,100 @@
font-size: 1rem;
font-weight: 600;
color: #0f172a;
margin-bottom: 0.25rem;
margin: 0 0 0.25rem 0;
}
.action-content p {
font-size: 0.875rem;
color: #64748b;
font-size: 0.875rem;
margin: 0;
}
.record-summary {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 1rem;
margin: 1rem 0;
}
.record-summary div {
margin-bottom: 0.5rem;
}
.record-summary div:last-child {
margin-bottom: 0;
}
.warning-text {
color: #dc2626;
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
margin-bottom: 0;
}
.text-danger {
color: #dc2626;
}
/* Modal Styles */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
z-index: 1000;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content {
background: #ffffff;
border-radius: 0.75rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
background: white;
border-radius: 12px;
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
margin: 2rem;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid #e2e8f0;
}
.modal-header h3 {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
font-size: 1.125rem;
font-size: 1.25rem;
font-weight: 600;
color: #0f172a;
display: flex;
align-items: center;
gap: 0.75rem;
}
.modal-close {
background: none;
border: none;
color: #64748b;
cursor: pointer;
font-size: 1.25rem;
padding: 0.5rem;
border-radius: 0.25rem;
transition: color 0.2s ease-in-out;
}
.modal-close:hover {
color: #0f172a;
.modal-header h3 i {
color: #ef4444;
}
.modal-body {
padding: 1.5rem;
color: #475569;
line-height: 1.6;
}
.modal-body p {
margin: 0.5rem 0;
}
.record-summary {
background: #f8fafc;
padding: 1.5rem;
border-radius: 8px;
margin: 1rem 0;
border: 1px solid #e2e8f0;
}
.record-summary p {
margin: 0.5rem 0;
color: #475569;
}
.warning-text {
color: #dc2626;
font-weight: 600;
margin-top: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.modal-footer {
padding: 1.5rem;
border-top: 1px solid #e2e8f0;
display: flex;
gap: 1rem;
justify-content: flex-end;
padding: 1.5rem;
border-top: 1px solid #e2e8f0;
}
/* Print Styles */
@media print {
.time-attendance-header .header-actions,
.modal {
display: none !important;
}
.detail-section {
page-break-inside: avoid;
box-shadow: none;
border: 1px solid #e2e8f0;
}
.record-detail-container {
gap: 1rem;
}
}
/* Responsive Design */
@media (max-width: 768px) {
.time-attendance-header {
flex-direction: column;
align-items: stretch;
gap: 1rem;
text-align: center;
}
.header-navigation {
text-align: left;
margin-bottom: 0.5rem;
}
.header-actions {
justify-content: center;
}
.employee-profile {
flex-direction: column;
text-align: center;
}
.employee-avatar.large {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.info-grid {
.detail-info-grid {
grid-template-columns: 1fr;
}
@@ -735,15 +614,6 @@
grid-template-columns: 1fr;
}
.action-card {
flex-direction: column;
text-align: center;
}
.section-body {
padding: 1rem;
}
.modal-content {
margin: 1rem;
width: calc(100% - 2rem);
@@ -752,31 +622,160 @@
.modal-footer {
flex-direction: column;
}
.modal-footer .btn,
.modal-footer form {
width: 100%;
}
.modal-footer .btn {
justify-content: center;
}
}
@media (max-width: 480px) {
/* Print Styles */
@media print {
/* Hide elements not needed in print */
.header-navigation,
.header-actions,
.action-grid,
.modal,
.back-button,
.btn,
.detail-section:last-child {
display: none !important;
}
/* Reset page layout for print */
body {
background: white !important;
}
.time-attendance-page {
padding: 1rem;
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
background: white !important;
}
.time-attendance-header {
padding: 1rem;
box-shadow: none !important;
border: 1px solid #ddd !important;
page-break-after: avoid;
}
.time-attendance-header::before {
display: none !important;
}
.header-content h1 {
font-size: 1.5rem;
font-size: 1.5rem !important;
color: #000 !important;
}
.info-item {
padding: 1rem;
.header-description {
color: #333 !important;
}
/* Record detail container */
.record-detail-container {
max-width: 100% !important;
}
/* Detail sections */
.detail-section {
box-shadow: none !important;
border: 1px solid #ddd !important;
page-break-inside: avoid;
margin-bottom: 1rem !important;
}
.section-header {
padding: 1rem;
background: #f8f8f8 !important;
border-bottom: 1px solid #ddd !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.action-card {
padding: 1rem;
.section-header::before {
display: none !important;
}
.section-header h2 {
color: #000 !important;
}
.section-header h2 i {
color: #666 !important;
}
.section-body {
padding: 1.5rem !important;
}
/* Info grid - maintain 2 column layout in print */
.detail-info-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 1rem !important;
}
.info-item {
page-break-inside: avoid;
}
.info-item.full-width {
grid-column: 1 / -1 !important;
}
.info-label {
color: #333 !important;
font-size: 0.8rem !important;
}
.info-label i {
color: #666 !important;
}
.info-value {
color: #000 !important;
font-size: 0.9rem !important;
}
/* Action badges */
.action-badge {
border: 1px solid #ddd !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.action-badge.check-in {
background: #e8f5e9 !important;
color: #2e7d32 !important;
}
.action-badge.check-out {
background: #fff3e0 !important;
color: #e65100 !important;
}
/* Batch ID */
.batch-id {
border: 1px solid #ddd !important;
background: #f8f8f8 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Force page breaks */
.detail-section:last-child {
page-break-after: avoid;
}
/* Ensure colors print */
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
}
</style>
@@ -792,11 +791,14 @@ function closeDeleteModal() {
}
// Close modal when clicking outside
document.getElementById('deleteModal').addEventListener('click', function(e) {
const modal = document.getElementById('deleteModal');
if (modal) {
modal.addEventListener('click', function(e) {
if (e.target === this) {
closeDeleteModal();
}
});
});
}
// Escape key to close modal
document.addEventListener('keydown', function(e) {
@@ -804,10 +806,5 @@ document.addEventListener('keydown', function(e) {
closeDeleteModal();
}
});
// Print functionality
function printRecord() {
window.print();
}
</script>
{% endblock %}