From 9632214f99d98929b2f88bf44dde6c8b526b44a7 Mon Sep 17 00:00:00 2001 From: Konrad du Plessis Date: Wed, 22 Apr 2026 23:37:39 +0200 Subject: [PATCH] Report: hero KPI band (4 cards) replacing All-Time/YTD row Chapter 0 of the executive redesign: four large cards at the top showing Paid This Period, Outstanding Now (live, stamped with the generation time), FoxFitt Avg/Day, and FoxFitt Avg/Month. Drops the old four-small-cards All-Time/YTD row (YTD specifically documented as redundant per design doc section 3). All-Time detail moves into Chapter I in the next task. New .stat-card--hero variant uses Poppins 1.85rem for the number, uppercase tracked labels, subtle tertiary sub-lines. tabular-nums keeps the R-amounts pixel-aligned across cards. Co-Authored-By: Claude Opus 4.7 (1M context) --- core/templates/core/report.html | 91 +++++++-------------------------- static/css/custom.css | 37 ++++++++++++++ 2 files changed, 55 insertions(+), 73 deletions(-) diff --git a/core/templates/core/report.html b/core/templates/core/report.html index bc34843..04fd31d 100644 --- a/core/templates/core/report.html +++ b/core/templates/core/report.html @@ -58,89 +58,34 @@

- -
- +{# === HERO KPI BAND === #} +
-
-
-
All Time — Projects
-
-
- {% if alltime_projects %} - - - - {% for item in alltime_projects %} - - {% endfor %} - -
ProjectCost
{{ item.project }}R {{ item.total|money }}
- {% else %}

No data

{% endif %} -
+
+
Paid This Period
+
R {{ total_paid_out|money }}
+
{{ start_date|date:"d M Y" }} – {{ end_date|date:"d M Y" }}
-
-
-
-
All Time — Teams
-
-
- {% if alltime_teams %} - - - - {% for item in alltime_teams %} - - {% endfor %} - -
TeamCost
{{ item.team }}R {{ item.total|money }}
- {% else %}

No data

{% endif %} -
+
+
Outstanding Now
+
R {{ current_outstanding.total|money }}
+
as of {{ current_as_of|date:"H:i" }}
-
-
-
-
{{ current_year }} — Projects
-
-
- {% if year_projects %} - - - - {% for item in year_projects %} - - {% endfor %} - -
ProjectCost
{{ item.project }}R {{ item.total|money }}
- {% else %}

No data

{% endif %} -
+
+
FoxFitt Avg / Day
+
R {{ company_avg_daily|money }}
+
lifetime avg · {{ company_working_days }} working days
-
-
-
-
{{ current_year }} — Teams
-
-
- {% if year_teams %} - - - - {% for item in year_teams %} - - {% endfor %} - -
TeamCost
{{ item.team }}R {{ item.total|money }}
- {% else %}

No data

{% endif %} -
+
+
FoxFitt Avg / Month
+
R {{ company_avg_monthly|money }}
+
lifetime avg · ~30.44 days/month
diff --git a/static/css/custom.css b/static/css/custom.css index 7c074a5..e1501f0 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -1649,3 +1649,40 @@ body, .card, .modal-content, .form-control, .form-select, font-style: italic; background: transparent !important; } + +/* === Hero KPI card variant (executive report) === */ +/* + A larger, more typographic version of the existing .stat-card, + used for the top-of-report KPI band. Keeps the same --accent-based + colour stripes (stat-card--danger, --warning, --info) but scales + the number, flattens the label to uppercase tracked caps, and adds + a subtle tertiary sub-line for context like "as of 15:42" or the + date range. +*/ +.stat-card--hero { + padding: 1.25rem 1.4rem; + min-height: 130px; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.stat-card--hero .stat-label { + font-size: 0.7rem; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--text-tertiary); + margin-bottom: 0.4rem; +} +.stat-card--hero .stat-value { + font-family: 'Poppins', sans-serif; + font-weight: 600; + font-size: 1.85rem; + line-height: 1; + color: var(--text-primary); + font-variant-numeric: tabular-nums; +} +.stat-card--hero .stat-subline { + font-size: 0.78rem; + color: var(--text-tertiary); + margin-top: 0.6rem; +}