369 lines
16 KiB
HTML
369 lines
16 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Training Management{% endblock %}
|
|
|
|
{% block content %}
|
|
<div id="content" class="app-content">
|
|
<div class="container-fluid">
|
|
<ul class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'hr:dashboard' %}">HR</a></li>
|
|
<li class="breadcrumb-item active">Training Management</li>
|
|
</ul>
|
|
|
|
<div class="row align-items-center mb-3">
|
|
<div class="col">
|
|
<h1 class="page-header">Training Management</h1>
|
|
<p class="text-muted">Employee training records and certification tracking</p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a class="btn btn-primary" href="{% url 'hr:training_record_create' %}">
|
|
<i class="fa fa-plus me-2"></i>New Training Record
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Overview -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-3">
|
|
<div class="card bg-primary text-white">
|
|
<div class="card-body d-flex align-items-center">
|
|
<div class="flex-grow-1">
|
|
<h4 class="mb-0">{{ total_records }}</h4>
|
|
<p class="mb-0">Total Records</p>
|
|
</div>
|
|
<i class="fa fa-database fa-2x ms-3"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card bg-success text-white">
|
|
<div class="card-body d-flex align-items-center">
|
|
<div class="flex-grow-1">
|
|
<h4 class="mb-0">{{ completed_trainings }}</h4>
|
|
<p class="mb-0">Completed</p>
|
|
</div>
|
|
<i class="fa fa-check-circle fa-2x ms-3"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card bg-warning text-white">
|
|
<div class="card-body d-flex align-items-center">
|
|
<div class="flex-grow-1">
|
|
<h4 class="mb-0">{{ pending_trainings }}</h4>
|
|
<p class="mb-0">Scheduled / In Progress</p>
|
|
</div>
|
|
<i class="fa fa-clock fa-2x ms-3"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card bg-danger text-white">
|
|
<div class="card-body d-flex align-items-center">
|
|
<div class="flex-grow-1">
|
|
<h4 class="mb-0">{{ overdue_trainings }}</h4>
|
|
<p class="mb-0">Expired / Overdue</p>
|
|
</div>
|
|
<i class="fa fa-exclamation-triangle fa-2x ms-3"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<ul class="nav nav-tabs card-header-tabs" id="trainingTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="records-tab" data-bs-toggle="tab" data-bs-target="#records" type="button" role="tab">
|
|
<i class="fa fa-list me-2"></i>Training Records
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="compliance-tab" data-bs-toggle="tab" data-bs-target="#compliance" type="button" role="tab">
|
|
<i class="fa fa-shield-alt me-2"></i>Compliance
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="tab-content" id="trainingTabContent">
|
|
|
|
<!-- Training Records -->
|
|
<div class="tab-pane fade show active" id="records" role="tabpanel">
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" placeholder="Search records..." id="recordSearch">
|
|
<button class="btn btn-outline-secondary" type="button">
|
|
<i class="fa fa-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<select class="form-select" id="recordType">
|
|
<option value="">All Types</option>
|
|
<option value="ORIENTATION">Orientation</option>
|
|
<option value="MANDATORY">Mandatory</option>
|
|
<option value="CONTINUING_ED">Continuing Education</option>
|
|
<option value="CERTIFICATION">Certification</option>
|
|
<option value="SKILLS">Skills Training</option>
|
|
<option value="SAFETY">Safety Training</option>
|
|
<option value="COMPLIANCE">Compliance Training</option>
|
|
<option value="LEADERSHIP">Leadership Development</option>
|
|
<option value="TECHNICAL">Technical Training</option>
|
|
<option value="OTHER">Other</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<select class="form-select" id="recordStatus">
|
|
<option value="">All Status</option>
|
|
<option value="SCHEDULED">Scheduled</option>
|
|
<option value="IN_PROGRESS">In Progress</option>
|
|
<option value="COMPLETED">Completed</option>
|
|
<option value="CANCELLED">Cancelled</option>
|
|
<option value="NO_SHOW">No Show</option>
|
|
<option value="FAILED">Failed</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2 text-end">
|
|
<a class="btn btn-primary w-100" href="{% url 'hr:training_record_create' %}">
|
|
<i class="fa fa-plus me-1"></i>Create
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-hover" id="recordsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Employee</th>
|
|
<th>Training</th>
|
|
<th>Type</th>
|
|
<th>Training Date</th>
|
|
<th>Completion</th>
|
|
<th>Status</th>
|
|
<th>Expiry</th>
|
|
<th>Score</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for tr in training_records %}
|
|
<tr>
|
|
<td>
|
|
<div>
|
|
<strong>{{ tr.employee.get_full_name }}</strong><br>
|
|
<small class="text-muted">{{ tr.employee.job_title }}</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div>
|
|
<strong>{{ tr.training_name }}</strong>
|
|
{% if tr.training_provider %}<br><small class="text-muted">{{ tr.training_provider }}</small>{% endif %}
|
|
</div>
|
|
</td>
|
|
<td><span class="badge bg-secondary">{{ tr.get_training_type_display }}</span></td>
|
|
<td>{{ tr.training_date|date:"M d, Y" }}</td>
|
|
<td>
|
|
{% if tr.completion_date %}
|
|
{{ tr.completion_date|date:"M d, Y" }}
|
|
{% else %}
|
|
<span class="text-muted">—</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if tr.status == 'COMPLETED' %}
|
|
<span class="badge bg-success">Completed</span>
|
|
{% elif tr.status == 'IN_PROGRESS' %}
|
|
<span class="badge bg-warning">In Progress</span>
|
|
{% elif tr.status == 'SCHEDULED' %}
|
|
<span class="badge bg-info">Scheduled</span>
|
|
{% elif tr.status == 'CANCELLED' %}
|
|
<span class="badge bg-secondary">Cancelled</span>
|
|
{% elif tr.status == 'NO_SHOW' %}
|
|
<span class="badge bg-dark">No Show</span>
|
|
{% elif tr.status == 'FAILED' %}
|
|
<span class="badge bg-danger">Failed</span>
|
|
{% else %}
|
|
<span class="badge bg-light text-dark">{{ tr.get_status_display }}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if tr.expiry_date %}
|
|
<span class="{% if tr.is_expired %}text-danger{% elif tr.is_due_for_renewal %}text-warning{% endif %}">
|
|
{{ tr.expiry_date|date:"M d, Y" }}
|
|
</span>
|
|
{% else %}
|
|
<span class="text-muted">No expiry</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if tr.score is not None %}
|
|
{{ tr.score }}
|
|
{% else %}
|
|
<span class="text-muted">—</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div class="btn-group btn-group-sm">
|
|
<a class="btn btn-outline-primary" href="{% url 'hr:training_record_detail' tr.id %}" title="View">
|
|
<i class="fa fa-eye"></i>
|
|
</a>
|
|
<a class="btn btn-outline-secondary" href="{% url 'hr:training_record_update' tr.id %}" title="Edit">
|
|
<i class="fa fa-edit"></i>
|
|
</a>
|
|
<a class="btn btn-outline-danger" href="{% url 'hr:training_record_delete' tr.id %}" title="Delete">
|
|
<i class="fa fa-trash"></i>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="9" class="text-center py-4">
|
|
<i class="fa fa-graduation-cap fa-3x text-muted mb-3"></i>
|
|
<h5 class="text-muted">No training records found</h5>
|
|
<a class="btn btn-primary mt-2" href="{% url 'hr:training_record_create' %}">
|
|
<i class="fa fa-plus me-2"></i>Create Training Record
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% if is_paginated %}
|
|
{% include 'partial/pagination.html'%}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Compliance -->
|
|
<div class="tab-pane fade" id="compliance" role="tabpanel">
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header"><h5 class="card-title mb-0">Compliance Overview</h5></div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-6 text-center">
|
|
<div class="h2 text-success">{{ compliance_rate }}%</div>
|
|
<div class="text-muted">Overall Compliance</div>
|
|
</div>
|
|
<div class="col-6 text-center">
|
|
<div class="h2 text-warning">{{ expiring_soon_count }}</div>
|
|
<div class="text-muted">Expiring Soon (≤ 30d)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header"><h5 class="card-title mb-0">Department Compliance</h5></div>
|
|
<div class="card-body">
|
|
{% for dept in department_compliance %}
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<span>{{ dept.name }}</span>
|
|
<div class="d-flex align-items-center">
|
|
<div class="progress me-2" style="width: 120px; height: 8px;">
|
|
<div class="progress-bar bg-{{ dept.compliance_color }}" style="width: {{ dept.compliance_rate }}%"></div>
|
|
</div>
|
|
<span class="text-muted">{{ dept.compliance_rate }}%</span>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<p class="text-muted mb-0">No departments.</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header"><h5 class="card-title mb-0">Compliance Alerts</h5></div>
|
|
<div class="card-body">
|
|
{% if compliance_alerts %}
|
|
<div class="table-responsive">
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Employee</th>
|
|
<th>Requirement</th>
|
|
<th>Due Date</th>
|
|
<th>Priority</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for alert in compliance_alerts %}
|
|
<tr>
|
|
<td>{{ alert.employee.get_full_name }}</td>
|
|
<td>{{ alert.requirement }}</td>
|
|
<td><span class="text-{{ alert.urgency_color }}">{{ alert.due_date|date:"M d, Y" }}</span></td>
|
|
<td><span class="badge bg-{{ alert.priority_color }}">{{ alert.get_priority_display }}</span></td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-4">
|
|
<i class="fa fa-shield-alt fa-3x text-success mb-3"></i>
|
|
<h5 class="text-success">All Clear!</h5>
|
|
<p class="text-muted">No compliance alerts at this time.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div><!-- /Compliance -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script>
|
|
// Simple client-side filtering for the records table
|
|
function filterRecords() {
|
|
const search = (document.getElementById('recordSearch').value || '').toLowerCase();
|
|
const type = document.getElementById('recordType').value;
|
|
const status = document.getElementById('recordStatus').value;
|
|
|
|
document.querySelectorAll('#recordsTable tbody tr').forEach(row => {
|
|
const text = row.innerText.toLowerCase();
|
|
const rowType = row.querySelector('td:nth-child(3) .badge')?.innerText.trim().toUpperCase() || '';
|
|
const rowStatus = row.querySelector('td:nth-child(6) .badge')?.innerText.trim().toUpperCase().replace(' ', '_') || '';
|
|
|
|
const matchesSearch = !search || text.includes(search);
|
|
const matchesType = !type || rowType === document.querySelector(`#recordType option[value="${type}"]`).innerText.toUpperCase();
|
|
const matchesStatus = !status || rowStatus === status;
|
|
|
|
row.style.display = (matchesSearch && matchesType && matchesStatus) ? '' : 'none';
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
['recordSearch', 'recordType', 'recordStatus'].forEach(id => {
|
|
const el = document.getElementById(id);
|
|
if (el) el.addEventListener('input', filterRecords);
|
|
if (el && el.tagName === 'SELECT') el.addEventListener('change', filterRecords);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.progress { background-color: #e9ecef; }
|
|
.progress-bar { transition: width .3s ease; }
|
|
.nav-tabs .nav-link { border: none; color: #6c757d; }
|
|
.nav-tabs .nav-link.active { background: transparent; border-bottom: 2px solid #0d6efd; color: #0d6efd; }
|
|
.badge { font-size: .75em; font-weight: 500; }
|
|
.table th { border-top: none; font-weight: 600; color: #495057; background-color: #f8f9fa; }
|
|
.table-hover tbody tr:hover { background-color: rgba(0,0,0,.025); }
|
|
@media (max-width: 768px){ .table-responsive{ font-size:.875rem; } }
|
|
</style>
|
|
{% endblock %} |