Time Attendance
This commit is contained in:
Nguyen Ngo
@@ -0,0 +1,853 @@
|
||||
{% extends "base_authenticated.html" %}
|
||||
{% block title %}Import Results - {{ COMPANY_NAME }}{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/time_attendance.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block page_title %}Import Results{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="time-attendance-page">
|
||||
<!-- Page Header -->
|
||||
<div class="time-attendance-header">
|
||||
<div class="header-navigation">
|
||||
<a href="{{ url_for('import_time_attendance') }}" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
Back to Import
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="header-content">
|
||||
<h1>
|
||||
{% if import_result.success %}
|
||||
<i class="fas fa-check-circle text-success"></i>
|
||||
Import Completed Successfully
|
||||
{% else %}
|
||||
<i class="fas fa-exclamation-circle text-danger"></i>
|
||||
Import Failed
|
||||
{% endif %}
|
||||
</h1>
|
||||
<p class="header-description">
|
||||
{% if import_result.success %}
|
||||
Your time attendance data has been successfully imported into the system.
|
||||
{% else %}
|
||||
There were issues importing your time attendance data. Please review the errors below.
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="header-actions">
|
||||
{% if import_result.success %}
|
||||
<a href="{{ url_for('time_attendance_records', import_batch=import_result.batch_id) }}"
|
||||
class="btn btn-primary">
|
||||
<i class="fas fa-eye"></i>
|
||||
View Imported Records
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="{{ url_for('time_attendance_dashboard') }}" class="btn btn-secondary">
|
||||
<i class="fas fa-tachometer-alt"></i>
|
||||
Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Import Summary -->
|
||||
<div class="import-results {% if import_result.success %}success{% else %}error{% endif %}">
|
||||
<div class="results-header">
|
||||
<h2>
|
||||
<i class="fas fa-chart-bar"></i>
|
||||
Import Summary
|
||||
</h2>
|
||||
</div>
|
||||
<div class="results-body">
|
||||
<div class="results-summary">
|
||||
<div class="summary-item">
|
||||
<div class="summary-icon">
|
||||
<i class="fas fa-file-alt"></i>
|
||||
</div>
|
||||
<div class="summary-content">
|
||||
<div class="number">{{ import_result.total_records }}</div>
|
||||
<div class="label">Total Records</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-item success">
|
||||
<div class="summary-icon">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
</div>
|
||||
<div class="summary-content">
|
||||
<div class="number">{{ import_result.imported_records }}</div>
|
||||
<div class="label">Successfully Imported</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if import_result.failed_records > 0 %}
|
||||
<div class="summary-item error">
|
||||
<div class="summary-icon">
|
||||
<i class="fas fa-exclamation-circle"></i>
|
||||
</div>
|
||||
<div class="summary-content">
|
||||
<div class="number">{{ import_result.failed_records }}</div>
|
||||
<div class="label">Failed Records</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="summary-item">
|
||||
<div class="summary-icon">
|
||||
<i class="fas fa-percentage"></i>
|
||||
</div>
|
||||
<div class="summary-content">
|
||||
<div class="number">
|
||||
{{ "%.1f"|format((import_result.imported_records / import_result.total_records * 100) if import_result.total_records > 0 else 0) }}%
|
||||
</div>
|
||||
<div class="label">Success Rate</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Batch Information -->
|
||||
{% if import_result.success %}
|
||||
<div class="batch-info">
|
||||
<h3>
|
||||
<i class="fas fa-info-circle"></i>
|
||||
Import Details
|
||||
</h3>
|
||||
<div class="batch-details">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Batch ID:</span>
|
||||
<code class="batch-id">{{ import_result.batch_id }}</code>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Import Date:</span>
|
||||
<span class="detail-value">{{ import_result.import_date.strftime('%Y-%m-%d %H:%M:%S') }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Processing Time:</span>
|
||||
<span class="detail-value">{{ "%.2f"|format((import_result.import_date - import_result.import_date).total_seconds()) }} seconds</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Error Details -->
|
||||
{% if import_result.errors %}
|
||||
<div class="error-section">
|
||||
<h3>
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
Error Details
|
||||
</h3>
|
||||
<div class="error-list">
|
||||
{% for error in import_result.errors %}
|
||||
<div class="error-item">
|
||||
<i class="fas fa-times-circle"></i>
|
||||
<span>{{ error }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Success Actions -->
|
||||
{% if import_result.success %}
|
||||
<div class="success-actions">
|
||||
<h3>
|
||||
<i class="fas fa-rocket"></i>
|
||||
What's Next?
|
||||
</h3>
|
||||
<div class="action-grid">
|
||||
<a href="{{ url_for('time_attendance_records', import_batch=import_result.batch_id) }}"
|
||||
class="action-card">
|
||||
<div class="action-icon">
|
||||
<i class="fas fa-eye"></i>
|
||||
</div>
|
||||
<div class="action-content">
|
||||
<h4>View Imported Records</h4>
|
||||
<p>Review all {{ import_result.imported_records }} imported attendance records</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('time_attendance_records') }}"
|
||||
class="action-card">
|
||||
<div class="action-icon">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
<div class="action-content">
|
||||
<h4>Search & Filter</h4>
|
||||
<p>Use advanced filters to find specific records</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('import_time_attendance') }}"
|
||||
class="action-card">
|
||||
<div class="action-icon">
|
||||
<i class="fas fa-plus"></i>
|
||||
</div>
|
||||
<div class="action-content">
|
||||
<h4>Import More Data</h4>
|
||||
<p>Upload additional Excel files with attendance data</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="action-card" onclick="generateReport()">
|
||||
<div class="action-icon">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
</div>
|
||||
<div class="action-content">
|
||||
<h4>Generate Reports</h4>
|
||||
<p>Create attendance reports and analytics</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Retry Actions for Failed Imports -->
|
||||
{% if not import_result.success %}
|
||||
<div class="retry-actions">
|
||||
<h3>
|
||||
<i class="fas fa-redo"></i>
|
||||
Try Again
|
||||
</h3>
|
||||
<p>Here are some suggestions to resolve the import issues:</p>
|
||||
<div class="suggestion-list">
|
||||
<div class="suggestion-item">
|
||||
<i class="fas fa-check"></i>
|
||||
<span>Ensure your Excel file has all required columns: ID, Name, Date, Time, Location Name, Action Description</span>
|
||||
</div>
|
||||
<div class="suggestion-item">
|
||||
<i class="fas fa-calendar"></i>
|
||||
<span>Check that dates are in YYYY-MM-DD format and times are in HH:MM:SS format</span>
|
||||
</div>
|
||||
<div class="suggestion-item">
|
||||
<i class="fas fa-file-excel"></i>
|
||||
<span>Verify that your file is a valid Excel format (.xlsx or .xls)</span>
|
||||
</div>
|
||||
<div class="suggestion-item">
|
||||
<i class="fas fa-database"></i>
|
||||
<span>Make sure employee IDs and location names are properly formatted</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="retry-buttons">
|
||||
<a href="{{ url_for('import_time_attendance') }}" class="btn btn-primary">
|
||||
<i class="fas fa-upload"></i>
|
||||
Try Import Again
|
||||
</a>
|
||||
<a href="#" class="btn btn-secondary" onclick="downloadTemplate()">
|
||||
<i class="fas fa-download"></i>
|
||||
Download Template
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Import Statistics -->
|
||||
{% if import_result.success and import_result.imported_records > 0 %}
|
||||
<div class="statistics-section">
|
||||
<div class="section-header">
|
||||
<h2>
|
||||
<i class="fas fa-chart-pie"></i>
|
||||
Import Statistics
|
||||
</h2>
|
||||
</div>
|
||||
<div class="section-body">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<h4>Records by Action</h4>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="progress-item">
|
||||
<span class="progress-label">Check In</span>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 75%"></div>
|
||||
</div>
|
||||
<span class="progress-value">75%</span>
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<span class="progress-label">Check Out</span>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 25%"></div>
|
||||
</div>
|
||||
<span class="progress-value">25%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<h4>Processing Speed</h4>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="speed-metric">
|
||||
<div class="metric-value">{{ import_result.imported_records }}</div>
|
||||
<div class="metric-label">records/minute</div>
|
||||
</div>
|
||||
<div class="speed-info">
|
||||
Fast and efficient processing of your attendance data
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.text-success {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.results-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.summary-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.summary-item.success {
|
||||
border-color: #10b981;
|
||||
background: linear-gradient(135deg, #dcfce7, #f0fdf4);
|
||||
}
|
||||
|
||||
.summary-item.error {
|
||||
border-color: #ef4444;
|
||||
background: linear-gradient(135deg, #fee2e2, #fef2f2);
|
||||
}
|
||||
|
||||
.summary-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.summary-item .summary-icon {
|
||||
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.summary-item.success .summary-icon {
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.summary-item.error .summary-icon {
|
||||
background: linear-gradient(135deg, #ef4444, #dc2626);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.summary-content .number {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.summary-content .label {
|
||||
color: #64748b;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.batch-info {
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.batch-info h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.batch-details {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem;
|
||||
background: #ffffff;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-family: monospace;
|
||||
color: #475569;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.batch-id {
|
||||
background: #f1f5f9;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
font-family: monospace;
|
||||
font-size: 0.875rem;
|
||||
color: #475569;
|
||||
border: 1px solid #cbd5e1;
|
||||
}
|
||||
|
||||
.error-section {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.error-section h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #991b1b;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.error-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.error-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: #ffffff;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 0.5rem;
|
||||
color: #dc2626;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.error-item i {
|
||||
color: #ef4444;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.success-actions {
|
||||
background: #f0fdf4;
|
||||
border: 1px solid #bbf7d0;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.success-actions h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #166534;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.action-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.action-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: #ffffff;
|
||||
border: 1px solid #bbf7d0;
|
||||
border-radius: 0.5rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.action-card:hover {
|
||||
background: #f8fafc;
|
||||
border-color: #8b5cf6;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.action-content h4 {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.action-content p {
|
||||
color: #64748b;
|
||||
font-size: 0.75rem;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.retry-actions {
|
||||
background: #fffbeb;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.retry-actions h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #92400e;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.retry-actions p {
|
||||
color: #92400e;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.suggestion-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: #ffffff;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.suggestion-item i {
|
||||
color: #f59e0b;
|
||||
margin-top: 0.125rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.retry-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.statistics-section {
|
||||
background: #ffffff;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section-header h2 i {
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.section-body {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.stat-header h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.progress-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.progress-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
min-width: 80px;
|
||||
font-size: 0.875rem;
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: #e2e8f0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #8b5cf6, #7c3aed);
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.progress-value {
|
||||
min-width: 40px;
|
||||
text-align: right;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.speed-metric {
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #8b5cf6;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
color: #64748b;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.speed-info {
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.results-summary {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.batch-details {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.action-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.retry-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.time-attendance-page {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.time-attendance-header {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.summary-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.summary-content .number {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.action-card {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Generate report functionality
|
||||
function generateReport() {
|
||||
// This would typically redirect to a reporting interface
|
||||
alert('Report generation feature coming soon!');
|
||||
}
|
||||
|
||||
// Download template functionality
|
||||
function downloadTemplate() {
|
||||
// This would typically generate and download an Excel template
|
||||
alert('Template download feature coming soon!');
|
||||
}
|
||||
|
||||
// Animate progress bars on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const progressBars = document.querySelectorAll('.progress-fill');
|
||||
progressBars.forEach(bar => {
|
||||
const width = bar.style.width;
|
||||
bar.style.width = '0%';
|
||||
setTimeout(() => {
|
||||
bar.style.width = width;
|
||||
}, 500);
|
||||
});
|
||||
|
||||
// Animate metric values
|
||||
const metricValues = document.querySelectorAll('.metric-value');
|
||||
metricValues.forEach(metric => {
|
||||
const finalValue = parseInt(metric.textContent);
|
||||
let currentValue = 0;
|
||||
const increment = Math.ceil(finalValue / 30);
|
||||
|
||||
const counter = setInterval(() => {
|
||||
currentValue += increment;
|
||||
if (currentValue >= finalValue) {
|
||||
currentValue = finalValue;
|
||||
clearInterval(counter);
|
||||
}
|
||||
metric.textContent = currentValue;
|
||||
}, 50);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user