204 lines
8.4 KiB
HTML
204 lines
8.4 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n static patient_tags %}
|
|
|
|
{% block title %}{% trans "Target Skills Progress" %} - Tenhal{% endblock %}
|
|
|
|
{% block css %}
|
|
<style>
|
|
.stat-card {
|
|
border-left: 4px solid;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.stat-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
}
|
|
.score-badge {
|
|
font-size: 1.1rem;
|
|
padding: 0.5rem 0.75rem;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div>
|
|
<h1 class="page-header mb-0">
|
|
<i class="fas fa-bullseye me-2"></i>{% trans "Target Skills Progress" %}
|
|
</h1>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">{% trans "Dashboard" %}</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'ot:session_list' %}">{% trans "OT Sessions" %}</a></li>
|
|
<li class="breadcrumb-item active">{% trans "Target Skills" %}</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics -->
|
|
<div class="row mb-4">
|
|
<div class="col-lg-4 col-md-6 mb-3">
|
|
<div class="card stat-card h-100" style="border-left-color: #007bff;">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="text-muted mb-1">{% trans "Total Skills Tracked" %}</h6>
|
|
<h2 class="mb-0">{{ stats.total_skills }}</h2>
|
|
</div>
|
|
<div class="text-primary">
|
|
<i class="fas fa-list-check fa-3x opacity-50"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 mb-3">
|
|
<div class="card stat-card h-100" style="border-left-color: #28a745;">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="text-muted mb-1">{% trans "Average Score" %}</h6>
|
|
<h2 class="mb-0">{{ stats.avg_score|floatformat:1 }}/10</h2>
|
|
</div>
|
|
<div class="text-success">
|
|
<i class="fas fa-chart-line fa-3x opacity-50"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 mb-3">
|
|
<div class="card stat-card h-100" style="border-left-color: #ffc107;">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="text-muted mb-1">{% trans "Mastered Skills" %}</h6>
|
|
<h2 class="mb-0">{{ stats.mastered_skills }}</h2>
|
|
<small class="text-muted">{% trans "(Score ≥ 8)" %}</small>
|
|
</div>
|
|
<div class="text-warning">
|
|
<i class="fas fa-trophy fa-3x opacity-50"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="card mb-3">
|
|
<div class="card-body">
|
|
<form method="get" class="row g-3">
|
|
<div class="col-md-4">
|
|
<label for="skill_name" class="form-label">{% trans "Skill Name" %}</label>
|
|
<input type="text" class="form-control" id="skill_name" name="skill_name"
|
|
value="{{ request.GET.skill_name }}" placeholder="{% trans 'Search skill name...' %}">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="patient" class="form-label">{% trans "Patient" %}</label>
|
|
<select class="form-select" id="patient" name="patient">
|
|
<option value="">{% trans "All Patients" %}</option>
|
|
{% comment %}
|
|
Add patient options here if needed
|
|
{% endcomment %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4 d-flex align-items-end">
|
|
<button type="submit" class="btn btn-primary me-2">
|
|
<i class="fas fa-filter me-1"></i>{% trans "Filter" %}
|
|
</button>
|
|
<a href="{% url 'ot:target_skill_progress' %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-times me-1"></i>{% trans "Clear" %}
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Target Skills List -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0"><i class="fas fa-list me-2"></i>{% trans "Target Skills" %}</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if target_skills %}
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>{% trans "Session Date" %}</th>
|
|
<th>{% trans "Patient" %}</th>
|
|
<th>{% trans "Skill Name" %}</th>
|
|
<th>{% trans "Score" %}</th>
|
|
<th>{% trans "Provider" %}</th>
|
|
<th>{% trans "Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for skill in target_skills %}
|
|
<tr>
|
|
<td>{{ skill.session.session_date|date:"M d, Y" }}</td>
|
|
<td>
|
|
<a href="{% url 'core:patient_detail' skill.session.patient.pk %}">
|
|
{% patient_name skill.session.patient %}
|
|
</a>
|
|
<br>
|
|
<small class="text-muted">{{ skill.session.patient.mrn }}</small>
|
|
</td>
|
|
<td>
|
|
<strong>{{ skill.skill_name }}</strong>
|
|
</td>
|
|
<td>
|
|
<span class="badge score-badge {% if skill.score >= 8 %}bg-success{% elif skill.score >= 5 %}bg-warning{% else %}bg-danger{% endif %}">
|
|
{{ skill.score }}/10
|
|
</span>
|
|
</td>
|
|
<td>{{ skill.session.provider.get_full_name }}</td>
|
|
<td>
|
|
<a href="{% url 'ot:session_detail' skill.session.pk %}" class="btn btn-sm btn-outline-primary">
|
|
<i class="fas fa-eye"></i> {% trans "View Session" %}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<!-- Pagination -->
|
|
{% if is_paginated %}
|
|
{% include 'includes/pagination_unified.html' %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
|
|
{% else %}
|
|
<div class="text-center py-5">
|
|
<i class="fas fa-bullseye fa-3x text-muted mb-3"></i>
|
|
<h5 class="text-muted">{% trans "No target skills recorded yet" %}</h5>
|
|
<p class="text-muted">{% trans "Target skills are tracked within OT sessions" %}</p>
|
|
<a href="{% url 'ot:session_list' %}" class="btn btn-primary">
|
|
<i class="fas fa-clipboard-check me-2"></i>{% trans "View Sessions" %}
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize Select2 for patient dropdown if needed
|
|
$('#patient').select2({
|
|
theme: 'bootstrap-5',
|
|
placeholder: '{% trans "Select patient..." %}',
|
|
allowClear: true
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|