249 lines
12 KiB
HTML
249 lines
12 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n static %}
|
|
|
|
{% block title %}{% trans "Appreciation Leaderboard" %} - {% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid py-4">
|
|
<!-- Breadcrumb -->
|
|
<nav aria-label="breadcrumb" class="mb-4">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{% url 'appreciation:appreciation_list' %}">{% trans "Appreciation" %}</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">{% trans "Leaderboard" %}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- Page Header -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2>
|
|
<i class="bi-trophy text-warning me-2"></i>
|
|
{% trans "Appreciation Leaderboard" %}
|
|
</h2>
|
|
<div>
|
|
<a href="{% url 'appreciation:appreciation_send' %}" class="btn btn-primary">
|
|
<i class="bi-send me-2"></i>
|
|
{% trans "Send Appreciation" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="card shadow-sm mb-4">
|
|
<div class="card-body">
|
|
<form method="get" class="row g-3">
|
|
<div class="col-md-3">
|
|
<label for="year" class="form-label">{% trans "Year" %}</label>
|
|
<select class="form-select" id="year" name="year">
|
|
{% for y in years %}
|
|
<option value="{{ y }}" {% if y == selected_year %}selected{% endif %}>{{ y }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="month" class="form-label">{% trans "Month" %}</label>
|
|
<select class="form-select" id="month" name="month">
|
|
{% for m in months %}
|
|
<option value="{{ m.0 }}" {% if m.0 == selected_month %}selected{% endif %}>{{ m.1 }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="hospital" class="form-label">{% trans "Hospital" %}</label>
|
|
<select class="form-select" id="hospital" name="hospital">
|
|
<option value="">All Hospitals</option>
|
|
{% for hospital in hospitals %}
|
|
<option value="{{ hospital.id }}" {% if filters.hospital == hospital.id|stringformat:"s" %}selected{% endif %}>
|
|
{{ hospital.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="department" class="form-label">{% trans "Department" %}</label>
|
|
<select class="form-select" id="department" name="department">
|
|
<option value="">All Departments</option>
|
|
{% for department in departments %}
|
|
<option value="{{ department.id }}" {% if filters.department == department.id|stringformat:"s" %}selected{% endif %}>
|
|
{{ department.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-12">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="bi-funnel me-2"></i>
|
|
{% trans "Apply Filters" %}
|
|
</button>
|
|
<a href="{% url 'appreciation:leaderboard_view' %}" class="btn btn-outline-secondary">
|
|
<i class="bi-arrow-clockwise me-2"></i>
|
|
{% trans "Reset" %}
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Leaderboard Table -->
|
|
<div class="card shadow-sm">
|
|
<div class="card-body">
|
|
{% if page_obj %}
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Rank</th>
|
|
<th>{% trans "Recipient" %}</th>
|
|
<th>{% trans "Hospital" %}</th>
|
|
<th>{% trans "Department" %}</th>
|
|
<th class="text-center">{% trans "Received" %}</th>
|
|
<th class="text-center">{% trans "Sent" %}</th>
|
|
<th class="text-center">{% trans "Hospital Rank" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item in page_obj %}
|
|
<tr class="{% if item.get_recipient_name == request.user.get_full_name %}table-primary{% endif %}">
|
|
<td>
|
|
{% if forloop.counter <= 3 %}
|
|
<span class="badge bg-{% if forloop.counter == 1 %}warning{% elif forloop.counter == 2 %}secondary{% else %}info{% endif %} fs-6">
|
|
{% if forloop.counter == 1 %}<i class="bi bi-trophy me-1"></i>{% endif %}
|
|
#{{ forloop.counter }}
|
|
</span>
|
|
{% else %}
|
|
<span class="text-muted">#{{ forloop.counter }}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<i class="bi-person text-primary me-2"></i>
|
|
{{ item.get_recipient_name }}
|
|
</td>
|
|
<td>{{ item.hospital.name }}</td>
|
|
<td>{% if item.department %}{{ item.department.name }}{% else %}-{% endif %}</td>
|
|
<td class="text-center">
|
|
<span class="badge bg-success fs-6">{{ item.received_count }}</span>
|
|
</td>
|
|
<td class="text-center">
|
|
<span class="badge bg-info fs-6">{{ item.sent_count }}</span>
|
|
</td>
|
|
<td class="text-center">
|
|
{% if item.hospital_rank %}
|
|
{% if item.hospital_rank <= 3 %}
|
|
<span class="badge bg-warning">
|
|
#{{ item.hospital_rank }}
|
|
</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">
|
|
#{{ item.hospital_rank }}
|
|
</span>
|
|
{% endif %}
|
|
{% else %}
|
|
-
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
{% if page_obj.has_other_pages %}
|
|
<nav aria-label="Page navigation" class="mt-4">
|
|
<ul class="pagination justify-content-center">
|
|
{% if page_obj.has_previous %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if filters.urlencode %}&{{ filters.urlencode }}{% endif %}">
|
|
{% trans "Previous" %}
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item disabled">
|
|
<span class="page-link">{% trans "Previous" %}</span>
|
|
</li>
|
|
{% endif %}
|
|
|
|
{% for num in page_obj.paginator.page_range %}
|
|
{% if page_obj.number == num %}
|
|
<li class="page-item active">
|
|
<span class="page-link">{{ num }}</span>
|
|
</li>
|
|
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page={{ num }}{% if filters.urlencode %}&{{ filters.urlencode }}{% endif %}">{{ num }}</a>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if page_obj.has_next %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page={{ page_obj.next_page_number }}{% if filters.urlencode %}&{{ filters.urlencode }}{% endif %}">
|
|
{% trans "Next" %}
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item disabled">
|
|
<span class="page-link">{% trans "Next" %}</span>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</nav>
|
|
{% endif %}
|
|
{% else %}
|
|
<div class="text-center py-5">
|
|
<i class="bi-trophy fa-4x text-muted mb-3"></i>
|
|
<h4 class="text-muted">{% trans "No appreciations found for this period" %}</h4>
|
|
<p class="text-muted">{% trans "Try changing the filters or select a different time period" %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="row mt-4">
|
|
<div class="col-md-4">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-body text-center">
|
|
<i class="bi-send fa-3x text-primary mb-3"></i>
|
|
<h5>{% trans "Send Appreciation" %}</h5>
|
|
<p class="text-muted mb-3">{% trans "Share your appreciation with colleagues" %}</p>
|
|
<a href="{% url 'appreciation:appreciation_send' %}" class="btn btn-primary">
|
|
{% trans "Send Now" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-body text-center">
|
|
<i class="bi-award fa-3x text-warning mb-3"></i>
|
|
<h5>{% trans "View Badges" %}</h5>
|
|
<p class="text-muted mb-3">{% trans "See your earned badges" %}</p>
|
|
<a href="{% url 'appreciation:my_badges_view' %}" class="btn btn-warning">
|
|
{% trans "My Badges" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-body text-center">
|
|
<i class="bi-list fa-3x text-info mb-3"></i>
|
|
<h5>{% trans "All Appreciations" %}</h5>
|
|
<p class="text-muted mb-3">{% trans "View your appreciations" %}</p>
|
|
<a href="{% url 'appreciation:appreciation_list' %}" class="btn btn-info">
|
|
{% trans "View List" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
{{ block.super }}
|
|
<script>
|
|
// Add any leaderboard-specific JavaScript here
|
|
</script>
|
|
{% endblock %}
|