Update view record details web and print layout
This commit is contained in:
@@ -21,10 +21,10 @@
|
|||||||
<div class="header-content">
|
<div class="header-content">
|
||||||
<h1>
|
<h1>
|
||||||
<i class="fas fa-file-alt"></i>
|
<i class="fas fa-file-alt"></i>
|
||||||
Record Details
|
Time Attendance Record Details
|
||||||
</h1>
|
</h1>
|
||||||
<p class="header-description">
|
<p class="header-description">
|
||||||
Detailed information for attendance record #{{ record.id }}
|
Detailed information for {{ record.employee_name }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -44,33 +44,8 @@
|
|||||||
|
|
||||||
<!-- Record Details -->
|
<!-- Record Details -->
|
||||||
<div class="record-detail-container">
|
<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="detail-section">
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<h2>
|
<h2>
|
||||||
@@ -79,31 +54,78 @@
|
|||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="section-body">
|
<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-item">
|
||||||
<div class="info-label">
|
<div class="info-label">
|
||||||
<i class="fas fa-calendar"></i>
|
<i class="fas fa-calendar"></i>
|
||||||
Date
|
Date
|
||||||
</div>
|
</div>
|
||||||
<div class="info-value">
|
<div class="info-value">
|
||||||
{{ record.attendance_date.strftime('%A, %B %d, %Y') }}
|
{{ record.attendance_date.strftime('%Y-%m-%d') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 5. Time -->
|
||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
<div class="info-label">
|
<div class="info-label">
|
||||||
<i class="fas fa-clock"></i>
|
<i class="fas fa-clock"></i>
|
||||||
Time
|
Time
|
||||||
</div>
|
</div>
|
||||||
<div class="info-value time-display">
|
<div class="info-value time-display">
|
||||||
{{ record.attendance_time.strftime('%I:%M:%S %p') }}
|
{{ record.attendance_time.strftime('%H:%M:%S') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 6. Location Name -->
|
||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
<div class="info-label">
|
<div class="info-label">
|
||||||
<i class="fas fa-tag"></i>
|
<i class="fas fa-map-marker-alt"></i>
|
||||||
Action
|
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>
|
||||||
<div class="info-value">
|
<div class="info-value">
|
||||||
<span class="action-badge {{ record.action_description.lower().replace(' ', '-') }}">
|
<span class="action-badge {{ record.action_description.lower().replace(' ', '-') }}">
|
||||||
@@ -119,41 +141,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info-item">
|
<!-- 8. Event Description -->
|
||||||
<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>
|
|
||||||
|
|
||||||
{% if record.event_description %}
|
{% if record.event_description %}
|
||||||
<div class="info-item full-width">
|
<div class="info-item">
|
||||||
<div class="info-label">
|
<div class="info-label">
|
||||||
<i class="fas fa-info-circle"></i>
|
<i class="fas fa-info-circle"></i>
|
||||||
Event Description
|
Event Description
|
||||||
@@ -164,45 +154,23 @@
|
|||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if record.recorded_address %}
|
<!-- 9. Recorded Address -->
|
||||||
<div class="info-item full-width">
|
<div class="info-item full-width">
|
||||||
<div class="info-label">
|
<div class="info-label">
|
||||||
<i class="fas fa-map-pin"></i>
|
<i class="fas fa-location-arrow"></i>
|
||||||
Recorded Address
|
Recorded Address
|
||||||
</div>
|
</div>
|
||||||
<div class="info-value address">
|
<div class="info-value address">
|
||||||
|
{% if record.recorded_address %}
|
||||||
{{ record.recorded_address }}
|
{{ record.recorded_address }}
|
||||||
</div>
|
{% else %}
|
||||||
</div>
|
<span class="text-muted">No address recorded</span>
|
||||||
{% endif %}
|
{% 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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Import Information -->
|
<!-- Import Information -->
|
||||||
<div class="detail-section">
|
<div class="detail-section">
|
||||||
@@ -213,7 +181,7 @@
|
|||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="section-body">
|
<div class="section-body">
|
||||||
<div class="info-grid">
|
<div class="detail-info-grid">
|
||||||
{% if record.import_batch_id %}
|
{% if record.import_batch_id %}
|
||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
<div class="info-label">
|
<div class="info-label">
|
||||||
@@ -261,7 +229,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Related Records -->
|
<!-- Quick Actions -->
|
||||||
<div class="detail-section">
|
<div class="detail-section">
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<h2>
|
<h2>
|
||||||
@@ -294,28 +262,17 @@
|
|||||||
</a>
|
</a>
|
||||||
|
|
||||||
{% if record.import_batch_id %}
|
{% 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">
|
class="action-card">
|
||||||
<div class="action-icon">
|
<div class="action-icon">
|
||||||
<i class="fas fa-file-import"></i>
|
<i class="fas fa-file-import"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="action-content">
|
<div class="action-content">
|
||||||
<h4>View Batch Records</h4>
|
<h4>View Import Batch</h4>
|
||||||
<p>See all records from this import batch</p>
|
<p>See all records from this import batch</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% 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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -323,32 +280,33 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Delete Confirmation Modal -->
|
<!-- 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-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h3>
|
<h3>
|
||||||
<i class="fas fa-exclamation-triangle text-danger"></i>
|
<i class="fas fa-exclamation-triangle"></i>
|
||||||
Confirm Deletion
|
Confirm Delete
|
||||||
</h3>
|
</h3>
|
||||||
<button class="modal-close" onclick="closeDeleteModal()">
|
|
||||||
<i class="fas fa-times"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<p>Are you sure you want to delete this attendance record?</p>
|
<p>Are you sure you want to delete this attendance record?</p>
|
||||||
<div class="record-summary">
|
<div class="record-summary">
|
||||||
<div><strong>Employee:</strong> {{ record.employee_name }}</div>
|
<p><strong>Employee:</strong> {{ record.employee_name }} ({{ record.employee_id }})</p>
|
||||||
<div><strong>Date:</strong> {{ record.attendance_date.strftime('%Y-%m-%d') }}</div>
|
<p><strong>Date:</strong> {{ record.attendance_date.strftime('%Y-%m-%d') }}</p>
|
||||||
<div><strong>Time:</strong> {{ record.attendance_time.strftime('%H:%M:%S') }}</div>
|
<p><strong>Time:</strong> {{ record.attendance_time.strftime('%H:%M:%S') }}</p>
|
||||||
<div><strong>Action:</strong> {{ record.action_description }}</div>
|
<p><strong>Location:</strong> {{ record.location_name }}</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="warning-text">
|
<p class="warning-text">
|
||||||
<i class="fas fa-exclamation-triangle"></i>
|
<i class="fas fa-exclamation-circle"></i>
|
||||||
This action cannot be undone.
|
This action cannot be undone!
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<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;">
|
<form method="POST" action="{{ url_for('delete_time_attendance_record', record_id=record.id) }}" style="display: inline;">
|
||||||
<button type="submit" class="btn btn-danger">
|
<button type="submit" class="btn btn-danger">
|
||||||
<i class="fas fa-trash"></i>
|
<i class="fas fa-trash"></i>
|
||||||
@@ -358,17 +316,21 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
/* Override and fix layout for record detail page */
|
||||||
.record-detail-container {
|
.record-detail-container {
|
||||||
display: grid;
|
display: block;
|
||||||
gap: 2rem;
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-section {
|
.detail-section {
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border-radius: 0.75rem;
|
border-radius: 12px;
|
||||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
margin-bottom: 2rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -376,17 +338,6 @@
|
|||||||
background: #f8fafc;
|
background: #f8fafc;
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
border-bottom: 1px solid #e2e8f0;
|
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 {
|
.section-header h2 {
|
||||||
@@ -407,70 +358,26 @@
|
|||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.employee-profile {
|
/* Custom grid for detail info */
|
||||||
display: flex;
|
.detail-info-grid {
|
||||||
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 {
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 1.5rem;
|
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 {
|
.info-item {
|
||||||
padding: 1.5rem;
|
display: block;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-item.full-width {
|
.info-item.full-width {
|
||||||
@@ -482,51 +389,85 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #374151;
|
color: #64748b;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-label i {
|
.info-label i {
|
||||||
color: #8b5cf6;
|
color: #8b5cf6;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-value {
|
.info-value {
|
||||||
color: #0f172a;
|
color: #0f172a;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: 500;
|
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 {
|
.info-value.time-display {
|
||||||
font-family: monospace;
|
font-family: 'Courier New', monospace;
|
||||||
font-size: 1.125rem;
|
font-size: 1rem;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
color: #1e40af;
|
color: #1e40af;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-value.address {
|
.info-value.address {
|
||||||
line-height: 1.5;
|
line-height: 1.6;
|
||||||
color: #475569;
|
color: #475569;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-value.platform {
|
.action-badge {
|
||||||
font-family: monospace;
|
display: inline-flex;
|
||||||
color: #475569;
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-weight: 600;
|
||||||
font-size: 0.875rem;
|
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 {
|
.batch-id {
|
||||||
background: #f1f5f9;
|
background: #f1f5f9;
|
||||||
padding: 0.5rem 0.75rem;
|
padding: 0.5rem 0.75rem;
|
||||||
border-radius: 0.375rem;
|
border-radius: 6px;
|
||||||
font-family: monospace;
|
font-family: 'Courier New', monospace;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
color: #475569;
|
color: #475569;
|
||||||
border: 1px solid #cbd5e1;
|
border: 1px solid #cbd5e1;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Action Grid */
|
||||||
.action-grid {
|
.action-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
@@ -540,17 +481,17 @@
|
|||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
background: #f8fafc;
|
background: #f8fafc;
|
||||||
border: 1px solid #e2e8f0;
|
border: 1px solid #e2e8f0;
|
||||||
border-radius: 0.75rem;
|
border-radius: 12px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
transition: all 0.2s ease-in-out;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-card:hover {
|
.action-card:hover {
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border-color: #8b5cf6;
|
border-color: #8b5cf6;
|
||||||
transform: translateY(-2px);
|
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;
|
text-decoration: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
@@ -559,7 +500,7 @@
|
|||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
|
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
|
||||||
border-radius: 0.5rem;
|
border-radius: 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -572,162 +513,100 @@
|
|||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #0f172a;
|
color: #0f172a;
|
||||||
margin-bottom: 0.25rem;
|
margin: 0 0 0.25rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-content p {
|
.action-content p {
|
||||||
|
font-size: 0.875rem;
|
||||||
color: #64748b;
|
color: #64748b;
|
||||||
font-size: 0.875rem;
|
|
||||||
margin: 0;
|
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 Styles */
|
||||||
.modal {
|
.modal {
|
||||||
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: rgba(0, 0, 0, 0.5);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
display: flex;
|
z-index: 1000;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
z-index: 1000;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
background: #ffffff;
|
background: white;
|
||||||
border-radius: 0.75rem;
|
border-radius: 12px;
|
||||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
max-height: 90vh;
|
margin: 2rem;
|
||||||
overflow-y: auto;
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-header {
|
.modal-header {
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
border-bottom: 1px solid #e2e8f0;
|
border-bottom: 1px solid #e2e8f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-header h3 {
|
.modal-header h3 {
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 1.125rem;
|
font-size: 1.25rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #0f172a;
|
color: #0f172a;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-close {
|
.modal-header h3 i {
|
||||||
background: none;
|
color: #ef4444;
|
||||||
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-body {
|
.modal-body {
|
||||||
padding: 1.5rem;
|
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 {
|
.modal-footer {
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-top: 1px solid #e2e8f0;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
justify-content: flex-end;
|
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 */
|
/* Responsive Design */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.time-attendance-header {
|
.detail-info-grid {
|
||||||
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 {
|
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -735,15 +614,6 @@
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-card {
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-body {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
margin: 1rem;
|
margin: 1rem;
|
||||||
width: calc(100% - 2rem);
|
width: calc(100% - 2rem);
|
||||||
@@ -752,31 +622,160 @@
|
|||||||
.modal-footer {
|
.modal-footer {
|
||||||
flex-direction: column;
|
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 {
|
.time-attendance-page {
|
||||||
padding: 1rem;
|
padding: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
background: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.time-attendance-header {
|
.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 {
|
.header-content h1 {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem !important;
|
||||||
|
color: #000 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-item {
|
.header-description {
|
||||||
padding: 1rem;
|
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 {
|
.section-header {
|
||||||
padding: 1rem;
|
background: #f8f8f8 !important;
|
||||||
|
border-bottom: 1px solid #ddd !important;
|
||||||
|
-webkit-print-color-adjust: exact;
|
||||||
|
print-color-adjust: exact;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-card {
|
.section-header::before {
|
||||||
padding: 1rem;
|
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>
|
</style>
|
||||||
@@ -792,11 +791,14 @@ function closeDeleteModal() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Close modal when clicking outside
|
// Close modal when clicking outside
|
||||||
document.getElementById('deleteModal').addEventListener('click', function(e) {
|
const modal = document.getElementById('deleteModal');
|
||||||
if (e.target === this) {
|
if (modal) {
|
||||||
closeDeleteModal();
|
modal.addEventListener('click', function(e) {
|
||||||
}
|
if (e.target === this) {
|
||||||
});
|
closeDeleteModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Escape key to close modal
|
// Escape key to close modal
|
||||||
document.addEventListener('keydown', function(e) {
|
document.addEventListener('keydown', function(e) {
|
||||||
@@ -804,10 +806,5 @@ document.addEventListener('keydown', function(e) {
|
|||||||
closeDeleteModal();
|
closeDeleteModal();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Print functionality
|
|
||||||
function printRecord() {
|
|
||||||
window.print();
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
Reference in New Issue
Block a user