546 lines
21 KiB
HTML
546 lines
21 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}
|
|
{{ record.title }} | Training Record
|
|
{% endblock %}
|
|
|
|
{% block css %}
|
|
<style>
|
|
.record-header {
|
|
background-color: #f8f9fa;
|
|
border-radius: 5px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.record-section {
|
|
background-color: #fff;
|
|
border-radius: 5px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
|
|
}
|
|
.record-section-title {
|
|
border-bottom: 1px solid #dee2e6;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.badge-status {
|
|
font-size: 85%;
|
|
}
|
|
.badge-completed {
|
|
background-color: #198754;
|
|
}
|
|
.badge-in-progress {
|
|
background-color: #0d6efd;
|
|
}
|
|
.badge-scheduled {
|
|
background-color: #6f42c1;
|
|
}
|
|
.badge-expired {
|
|
background-color: #dc3545;
|
|
}
|
|
.badge-upcoming {
|
|
background-color: #ffc107;
|
|
color: #000;
|
|
}
|
|
.timeline {
|
|
position: relative;
|
|
padding-left: 30px;
|
|
}
|
|
.timeline:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 2px;
|
|
background-color: #dee2e6;
|
|
}
|
|
.timeline-item {
|
|
position: relative;
|
|
padding-bottom: 20px;
|
|
}
|
|
.timeline-item:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
.timeline-item:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -34px;
|
|
top: 0;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background-color: #2d62ed;
|
|
}
|
|
.timeline-date {
|
|
color: #6c757d;
|
|
font-size: 0.85rem;
|
|
}
|
|
.progress-container {
|
|
margin-bottom: 20px;
|
|
}
|
|
.progress {
|
|
height: 10px;
|
|
}
|
|
.certificate-card {
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 5px;
|
|
padding: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.certificate-card .certificate-icon {
|
|
font-size: 2rem;
|
|
color: #2d62ed;
|
|
}
|
|
.quick-actions {
|
|
position: sticky;
|
|
top: 20px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- begin breadcrumb -->
|
|
<ol class="breadcrumb float-xl-end">
|
|
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'hr:dashboard' %}">HR</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'hr:training_record_list' %}">Training Records</a></li>
|
|
<li class="breadcrumb-item active">{{ record.title }}</li>
|
|
</ol>
|
|
<!-- end breadcrumb -->
|
|
|
|
<!-- begin page-header -->
|
|
<h1 class="page-header">
|
|
Training Record: {{ record.title }}
|
|
</h1>
|
|
<!-- end page-header -->
|
|
|
|
<!-- begin row -->
|
|
<div class="row">
|
|
<!-- begin col-9 -->
|
|
<div class="col-xl-9">
|
|
<!-- begin record header -->
|
|
<div class="record-header">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h4>{{ record.title }}</h4>
|
|
<p class="text-muted mb-2">{{ record.get_training_type_display }} by {{ record.provider }}</p>
|
|
<div class="mb-3">
|
|
<span class="badge badge-{{ record.status|lower }} badge-status">
|
|
{{ record.get_status_display }}
|
|
</span>
|
|
{% if record.is_mandatory %}
|
|
<span class="badge bg-danger ms-1">Mandatory</span>
|
|
{% endif %}
|
|
{% if record.is_certified %}
|
|
<span class="badge bg-success ms-1">Certified</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 text-md-end">
|
|
<div class="mb-2">
|
|
<strong>Employee:</strong>
|
|
<a href="{% url 'hr:employee_detail' record.employee.id %}">
|
|
{{ record.employee.get_full_name }}
|
|
</a>
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Department:</strong> {{ record.employee.department.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if record.status == 'IN_PROGRESS' %}
|
|
<div class="progress-container">
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<span>Progress</span>
|
|
<span>{{ record.completion_percentage|default:"0" }}%</span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-primary" role="progressbar" style="width: {{ record.completion_percentage|default:'0' }}%" aria-valuenow="{{ record.completion_percentage|default:'0' }}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="row mt-3">
|
|
<div class="col-md-3 mb-2">
|
|
<strong>Start Date:</strong><br>
|
|
{{ record.start_date|date:"M d, Y" }}
|
|
</div>
|
|
<div class="col-md-3 mb-2">
|
|
<strong>End Date:</strong><br>
|
|
{{ record.end_date|date:"M d, Y" }}
|
|
</div>
|
|
<div class="col-md-3 mb-2">
|
|
<strong>Completion Date:</strong><br>
|
|
{{ record.completion_date|date:"M d, Y"|default:"Not completed" }}
|
|
</div>
|
|
<div class="col-md-3 mb-2">
|
|
<strong>Expiration Date:</strong><br>
|
|
{{ record.expiration_date|date:"M d, Y"|default:"No expiration" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end record header -->
|
|
|
|
<!-- begin description section -->
|
|
<div class="record-section">
|
|
<h5 class="record-section-title">Description</h5>
|
|
<div class="mb-3">
|
|
{{ record.description|linebreaks|default:"No description provided." }}
|
|
</div>
|
|
|
|
{% if record.learning_objectives %}
|
|
<h6>Learning Objectives</h6>
|
|
<ul>
|
|
{% for objective in record.learning_objectives_list %}
|
|
<li>{{ objective }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
</div>
|
|
<!-- end description section -->
|
|
|
|
<!-- begin completion details section -->
|
|
<div class="record-section">
|
|
<h5 class="record-section-title">Completion Details</h5>
|
|
|
|
{% if record.status == 'COMPLETED' %}
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<strong>Completion Date:</strong><br>
|
|
{{ record.completion_date|date:"M d, Y" }}
|
|
</div>
|
|
<div class="col-md-4">
|
|
<strong>Score/Grade:</strong><br>
|
|
{{ record.score_grade|default:"Not recorded" }}
|
|
</div>
|
|
<div class="col-md-4">
|
|
<strong>Hours Completed:</strong><br>
|
|
{{ record.hours_completed|default:"0" }} hours
|
|
</div>
|
|
</div>
|
|
|
|
{% if record.completion_notes %}
|
|
<div class="mb-3">
|
|
<strong>Completion Notes:</strong><br>
|
|
{{ record.completion_notes|linebreaks }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if record.is_certified %}
|
|
<h6>Certification Details</h6>
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<strong>Certificate Number:</strong><br>
|
|
{{ record.certificate_number|default:"Not recorded" }}
|
|
</div>
|
|
<div class="col-md-4">
|
|
<strong>Issued By:</strong><br>
|
|
{{ record.provider }}
|
|
</div>
|
|
<div class="col-md-4">
|
|
<strong>Expiration Date:</strong><br>
|
|
{{ record.expiration_date|date:"M d, Y"|default:"No expiration" }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if certificates %}
|
|
<h6>Certificates</h6>
|
|
<div class="row">
|
|
{% for certificate in certificates %}
|
|
<div class="col-md-6 mb-3">
|
|
<div class="certificate-card">
|
|
<div class="d-flex align-items-center">
|
|
<div class="certificate-icon me-3">
|
|
<i class="fas fa-certificate"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-1">{{ certificate.title }}</h6>
|
|
<p class="mb-2 text-muted">{{ certificate.file.name|split:"/"|last }}</p>
|
|
<a href="{{ certificate.file.url }}" class="btn btn-sm btn-primary" target="_blank">
|
|
<i class="fas fa-download"></i> Download
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle"></i> This training has not been completed yet.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<!-- end completion details section -->
|
|
|
|
<!-- begin timeline section -->
|
|
<div class="record-section">
|
|
<h5 class="record-section-title">Timeline</h5>
|
|
|
|
<div class="timeline">
|
|
{% if record.created_at %}
|
|
<div class="timeline-item">
|
|
<div class="timeline-date">{{ record.created_at|date:"M d, Y H:i" }}</div>
|
|
<div class="timeline-content">
|
|
<h6>Training Record Created</h6>
|
|
<p>Training record was created by {{ record.created_by.get_full_name|default:"System" }}</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if record.start_date %}
|
|
<div class="timeline-item">
|
|
<div class="timeline-date">{{ record.start_date|date:"M d, Y" }}</div>
|
|
<div class="timeline-content">
|
|
<h6>Training Started</h6>
|
|
<p>{{ record.title }} training began</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if record.status == 'IN_PROGRESS' and record.last_updated %}
|
|
<div class="timeline-item">
|
|
<div class="timeline-date">{{ record.last_updated|date:"M d, Y H:i" }}</div>
|
|
<div class="timeline-content">
|
|
<h6>Progress Updated</h6>
|
|
<p>Progress updated to {{ record.completion_percentage|default:"0" }}%</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if record.completion_date %}
|
|
<div class="timeline-item">
|
|
<div class="timeline-date">{{ record.completion_date|date:"M d, Y" }}</div>
|
|
<div class="timeline-content">
|
|
<h6>Training Completed</h6>
|
|
<p>{{ record.title }} training was successfully completed</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if record.expiration_date and record.status == 'EXPIRED' %}
|
|
<div class="timeline-item">
|
|
<div class="timeline-date">{{ record.expiration_date|date:"M d, Y" }}</div>
|
|
<div class="timeline-content">
|
|
<h6>Certification Expired</h6>
|
|
<p>The certification for this training has expired</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if record.end_date and record.end_date > today and record.status != 'COMPLETED' %}
|
|
<div class="timeline-item">
|
|
<div class="timeline-date">{{ record.end_date|date:"M d, Y" }}</div>
|
|
<div class="timeline-content">
|
|
<h6>Expected Completion</h6>
|
|
<p>Training is expected to be completed by this date</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<!-- end timeline section -->
|
|
|
|
<!-- begin attachments section -->
|
|
{% if attachments %}
|
|
<div class="record-section">
|
|
<h5 class="record-section-title">Attachments</h5>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>File Type</th>
|
|
<th>Uploaded</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for attachment in attachments %}
|
|
<tr>
|
|
<td>{{ attachment.title }}</td>
|
|
<td>{{ attachment.file.name|split:"."|last|upper }}</td>
|
|
<td>{{ attachment.uploaded_at|date:"M d, Y" }}</td>
|
|
<td>
|
|
<a href="{{ attachment.file.url }}" class="btn btn-sm btn-primary" target="_blank">
|
|
<i class="fas fa-download"></i> Download
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<!-- end attachments section -->
|
|
|
|
<!-- begin notes section -->
|
|
{% if record.notes %}
|
|
<div class="record-section">
|
|
<h5 class="record-section-title">Notes</h5>
|
|
|
|
<div class="mb-3">
|
|
{{ record.notes|linebreaks }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<!-- end notes section -->
|
|
</div>
|
|
<!-- end col-9 -->
|
|
|
|
<!-- begin col-3 -->
|
|
<div class="col-xl-3">
|
|
<!-- begin quick actions -->
|
|
<div class="quick-actions">
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">Quick Actions</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-grid gap-2">
|
|
<a href="{% url 'hr:training_record_update' record.id %}" class="btn btn-primary">
|
|
<i class="fas fa-edit"></i> Edit Record
|
|
</a>
|
|
|
|
{% if record.status != 'COMPLETED' %}
|
|
<a href="{% url 'hr:training_record_mark_complete' record.id %}" class="btn btn-success">
|
|
<i class="fas fa-check-circle"></i> Mark as Completed
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% if record.is_certified and record.status == 'EXPIRED' %}
|
|
<a href="{% url 'hr:training_record_renew' record.id %}" class="btn btn-info">
|
|
<i class="fas fa-sync-alt"></i> Renew Certification
|
|
</a>
|
|
{% endif %}
|
|
|
|
<a href="{% url 'hr:training_record_delete' record.id %}" class="btn btn-danger">
|
|
<i class="fas fa-trash"></i> Delete Record
|
|
</a>
|
|
|
|
<div class="dropdown">
|
|
<button class="btn btn-secondary dropdown-toggle w-100" type="button" id="moreActionsDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="fas fa-ellipsis-h"></i> More Actions
|
|
</button>
|
|
<ul class="dropdown-menu w-100" aria-labelledby="moreActionsDropdown">
|
|
<li>
|
|
<a class="dropdown-item" href="{% url 'hr:training_record_print' record.id %}">
|
|
<i class="fas fa-print"></i> Print Record
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="{% url 'hr:training_record_export_pdf' record.id %}">
|
|
<i class="fas fa-file-pdf"></i> Export as PDF
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="{% url 'hr:training_record_duplicate' record.id %}">
|
|
<i class="fas fa-copy"></i> Duplicate Record
|
|
</a>
|
|
</li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li>
|
|
<a class="dropdown-item" href="{% url 'hr:training_record_upload_certificate' record.id %}">
|
|
<i class="fas fa-certificate"></i> Upload Certificate
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- begin employee info -->
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">Employee Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-3">
|
|
{% if record.employee.profile_picture %}
|
|
<img src="{{ record.employee.profile_picture.url }}" alt="{{ record.employee.get_full_name }}" class="rounded-circle me-3" width="50" height="50">
|
|
{% else %}
|
|
<div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
|
|
{{ record.employee.get_initials }}
|
|
</div>
|
|
{% endif %}
|
|
<div>
|
|
<h6 class="mb-0">{{ record.employee.get_full_name }}</h6>
|
|
<p class="text-muted mb-0">{{ record.employee.job_title }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<strong>Department:</strong><br>
|
|
{{ record.employee.department.name }}
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<strong>Employee ID:</strong><br>
|
|
{{ record.employee.employee_id }}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<strong>Email:</strong><br>
|
|
{{ record.employee.email }}
|
|
</div>
|
|
|
|
<a href="{% url 'hr:employee_detail' record.employee.id %}" class="btn btn-sm btn-outline-primary w-100">
|
|
<i class="fas fa-user"></i> View Employee Profile
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- end employee info -->
|
|
|
|
<!-- begin related trainings -->
|
|
{% if related_trainings %}
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">Related Trainings</h5>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="list-group list-group-flush">
|
|
{% for training in related_trainings %}
|
|
<a href="{% url 'hr:training_record_detail' training.id %}" class="list-group-item list-group-item-action">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="mb-1">{{ training.title }}</h6>
|
|
<p class="text-muted mb-0 small">{{ training.get_training_type_display }}</p>
|
|
</div>
|
|
<span class="badge badge-{{ training.status|lower }} badge-status">
|
|
{{ training.get_status_display }}
|
|
</span>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<!-- end related trainings -->
|
|
</div>
|
|
<!-- end quick actions -->
|
|
</div>
|
|
<!-- end col-3 -->
|
|
</div>
|
|
<!-- end row -->
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Any JavaScript functionality can be added here
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|