Bernard Siebens
44ddf7b6eb
KPIs now use the same flat card+caption anatomy as the dashboard and finance pages instead of the older colored-border style. The range picker moved into the filter strip as a segmented pill control (same pattern as the calendar's Week/Month/Season toggle), and each game card now carries a left accent stripe instead of a full-border colour override, matching parent claims/news list conventions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
107 lines
8.4 KiB
HTML
107 lines
8.4 KiB
HTML
{% extends "management/base.html" %}
|
|
{% load i18n lucide ui %}
|
|
|
|
{% block heading %}{% trans "Referee management" %}{% endblock heading %}
|
|
{% block topbar_context %}<span class="text-sm text-muted">{% trans "Every upcoming home game that needs a club-arranged referee." %}</span>{% endblock topbar_context %}
|
|
|
|
{% block filter_strip %}
|
|
<div class="flex flex-wrap items-center gap-3 border-b border-line bg-white px-7 py-3">
|
|
<div class="flex-1"></div>
|
|
<div class="flex items-center gap-1 rounded-full bg-steel p-1">
|
|
<a href="{% querystring range="week" %}" class="rounded-full px-3 py-1.5 font-display text-xs font-bold tracking-[.08em] uppercase {% if range_choice == "week" %}bg-white text-ink{% else %}text-on-dark hover:text-white{% endif %}">{% trans "This week" %}</a>
|
|
<a href="{% querystring range="two_weeks" %}" class="rounded-full px-3 py-1.5 font-display text-xs font-bold tracking-[.08em] uppercase {% if range_choice == "two_weeks" %}bg-white text-ink{% else %}text-on-dark hover:text-white{% endif %}">{% trans "+ next week" %}</a>
|
|
<a href="{% querystring range="10" %}" class="rounded-full px-3 py-1.5 font-display text-xs font-bold tracking-[.08em] uppercase {% if range_choice == "10" %}bg-white text-ink{% else %}text-on-dark hover:text-white{% endif %}">{% trans "Next 10" %}</a>
|
|
<a href="{% querystring range="25" %}" class="rounded-full px-3 py-1.5 font-display text-xs font-bold tracking-[.08em] uppercase {% if range_choice == "25" %}bg-white text-ink{% else %}text-on-dark hover:text-white{% endif %}">{% trans "Next 25" %}</a>
|
|
<a href="{% querystring range="50" %}" class="rounded-full px-3 py-1.5 font-display text-xs font-bold tracking-[.08em] uppercase {% if range_choice == "50" %}bg-white text-ink{% else %}text-on-dark hover:text-white{% endif %}">{% trans "Next 50" %}</a>
|
|
</div>
|
|
</div>
|
|
{% endblock filter_strip %}
|
|
|
|
{% block panel %}
|
|
<div class="flex flex-wrap gap-3.5">
|
|
<div class="card min-w-0 flex-1 p-4">
|
|
<div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Games in view" %}</div>
|
|
<div class="mt-1 font-display text-[34px] leading-none font-extrabold text-ink tabular-nums">{{ kpi_total }}</div>
|
|
<div class="mt-1 text-[13px] text-muted">{% trans "In the selected range" %}</div>
|
|
</div>
|
|
<div class="card min-w-0 flex-1 p-4">
|
|
<div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Without a referee" %}</div>
|
|
<div class="mt-1 font-display text-[34px] leading-none font-extrabold tabular-nums {% if kpi_no_referee %}text-club{% else %}text-ink{% endif %}">{{ kpi_no_referee }}</div>
|
|
<div class="mt-1 text-[13px] text-muted">{% trans "Nobody assigned yet" %}</div>
|
|
</div>
|
|
<div class="card min-w-0 flex-1 p-4">
|
|
<div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Partially staffed" %}</div>
|
|
<div class="mt-1 font-display text-[34px] leading-none font-extrabold tabular-nums {% if kpi_understaffed %}text-warn{% else %}text-ink{% endif %}">{{ kpi_understaffed }}</div>
|
|
<div class="mt-1 text-[13px] text-muted">{% trans "Still short a referee" %}</div>
|
|
</div>
|
|
<div class="card min-w-0 flex-1 p-4">
|
|
<div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Fully staffed" %}</div>
|
|
<div class="mt-1 font-display text-[34px] leading-none font-extrabold text-ok tabular-nums">{{ kpi_fully_staffed }}</div>
|
|
<div class="mt-1 text-[13px] text-muted">{% trans "Nothing left to do" %}</div>
|
|
</div>
|
|
<div class="card min-w-0 flex-1 p-4">
|
|
<div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Fees not set" %}</div>
|
|
<div class="mt-1 font-display text-[34px] leading-none font-extrabold tabular-nums {% if kpi_fees_pending %}text-warn{% else %}text-ink{% endif %}">{{ kpi_fees_pending }}</div>
|
|
<div class="mt-1 text-[13px] text-muted">{% trans "Referee fee missing" %}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% regroup games by start.date as day_groups %}
|
|
{% for day in day_groups %}
|
|
<div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{{ day.grouper|date:"l j F" }}</div>
|
|
<div class="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
|
|
{% for game in day.list %}
|
|
<div class="card card-body gap-2 border-l-[3px] {% if not game.referee_rows %}border-l-club{% elif not game.referees_full %}border-l-warn{% else %}border-l-transparent{% endif %}">
|
|
<a class="link link-hover font-semibold text-ink" href="{% url 'management:event_detail' game.pk %}">
|
|
{% for team in game.teams.all %}{{ team.short_name }}{% if not forloop.last %}, {% endif %}{% endfor %}
|
|
{% if game.opponent %}{% trans "vs" %} {{ game.opponent }}{% endif %}
|
|
</a>
|
|
<div class="font-mono text-xs text-muted">{{ game.start|date:"H:i" }}{% if game.location %} — {{ game.location }}{% endif %}</div>
|
|
<div class="flex flex-wrap gap-1">
|
|
{% for referee in game.referee_rows %}
|
|
<span class="badge badge-neutral badge-sm">{{ referee.display_name }}{% if referee.is_external %} ({% trans "ext." %}){% endif %}</span>
|
|
{% empty %}
|
|
<span class="text-xs text-muted">{% trans "No referees assigned yet." %}</span>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="flex flex-wrap items-center justify-between gap-2">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="badge badge-sm {% if not game.referee_rows %}badge-error{% elif not game.referees_full %}badge-warning{% else %}badge-success{% endif %}">
|
|
{{ game.referee_rows|length }} / {{ game.max_referees }}
|
|
</span>
|
|
{% if game.fees_pending %}<span class="badge badge-warning badge-sm">{% trans "Fee not set" %}</span>{% endif %}
|
|
</div>
|
|
<div class="flex gap-1">
|
|
<a class="btn btn-xs btn-outline" href="{% url 'management:event_referee_form_pdf' game.pk %}">
|
|
{% lucide "file-down" size=12 %} {% trans "Referee form" %}
|
|
</a>
|
|
<button class="btn btn-xs btn-outline" type="button" onclick="document.getElementById('{{ game.pk|dom_id:"referee_game_modal" }}').showModal()">
|
|
{% lucide "flag" size=12 %} {% trans "Manage" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<dialog id="{{ game.pk|dom_id:"referee_game_modal" }}" class="modal">
|
|
<div class="modal-box w-[36rem] max-w-[91vw]">
|
|
<form method="dialog"><button class="btn btn-ghost btn-square btn-sm absolute top-2 right-2">{% lucide "x" size=16 %}</button></form>
|
|
<h3 class="font-display text-lg font-extrabold text-ink uppercase">
|
|
{% for team in game.teams.all %}{{ team.short_name }}{% if not forloop.last %}, {% endif %}{% endfor %}
|
|
{% if game.opponent %}{% trans "vs" %} {{ game.opponent }}{% endif %}
|
|
</h3>
|
|
<div class="mb-4 font-mono text-sm text-muted">{{ game.start|date:"j M Y H:i" }}</div>
|
|
{% include "management/_referee_assignment_panel.html" with event=game referees=game.referee_rows referee_candidates=game.referee_candidates referees_full=game.referees_full can_manage_referees=True next_url=request.get_full_path %}
|
|
</div>
|
|
<form method="dialog" class="modal-backdrop"><button>close</button></form>
|
|
</dialog>
|
|
{% endfor %}
|
|
</div>
|
|
{% empty %}
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<p class="text-center text-muted">{% trans "No upcoming home games need a club-arranged referee." %}</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endblock panel %}
|