admin/38686-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Report: Chapter I (lifetime context) + chapter numbering

Browse Source 
Replaces the old narrow four-card All-Time/YTD row (dropped in Task 9)
with two wider cards under a numbered 'Chapter I - Lifetime Context'
heading. Projects card gains Start, Working Days, Total Cost, and
Avg R / Working Day columns per the design. Teams card keeps name +
total.

Adds .chapter-heading and .chapter-num CSS for the orange numbered
markers (I, II, III, IV) and .report-numeric class that applies
tabular-nums across the number columns of every report table.

Renames the existing 'Selected Period' heading to Chapter II.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Konrad du Plessis 2026-04-22 23:43:14 +02:00
parent 9632214f99
commit 68c9afd939
2 changed files with 97 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
core/templates/core/report.html
View File

@ -90,15 +90,74 @@
</div> </div>
</div> </div>
{# === CHAPTER I — Lifetime Context === #}
<h5 class="chapter-heading mb-3"><span class="chapter-num">I</span>Lifetime Context</h5>
<div class="row g-3 mb-4">
<div class="col-lg-7">
<div class="card h-100">
<div class="card-header py-3">
<h6 class="m-0 fw-bold"><i class="fas fa-project-diagram me-2" style="color: var(--accent);"></i>All Time &mdash; Projects</h6>
</div>
<div class="card-body p-0">
{% if alltime_projects %}
<div class="table-responsive">
<table class="table table-sm mb-0 report-numeric">
<thead>
<tr>
<th>Project</th>
<th>Start</th>
<th class="text-end">Working Days</th>
<th class="text-end">Total Cost</th>
<th class="text-end">Avg R / Working Day</th>
</tr>
</thead>
<tbody>
{% for item in alltime_projects %}
<tr>
<td class="fw-medium">{{ item.project }}</td>
<td>{% if item.start_date %}{{ item.start_date|date:"d M Y" }}{% else %}<span class="text-muted">&mdash;</span>{% endif %}</td>
<td class="text-end">{{ item.working_days|default:"—" }}</td>
<td class="text-end fw-semibold">R {{ item.total|money }}</td>
<td class="text-end">{% if item.working_days %}R {{ item.avg_per_working_day|money }}{% else %}<span class="text-muted">&mdash;</span>{% endif %}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}<p class="text-muted text-center py-3 mb-0">No lifetime project data.</p>{% endif %}
</div>
</div>
</div>
<div class="col-lg-5">
<div class="card h-100">
<div class="card-header py-3">
<h6 class="m-0 fw-bold"><i class="fas fa-users me-2" style="color: var(--accent);"></i>All Time &mdash; Teams</h6>
</div>
<div class="card-body p-0">
{% if alltime_teams %}
<div class="table-responsive">
<table class="table table-sm mb-0 report-numeric">
<thead><tr><th>Team</th><th class="text-end">Total Cost</th></tr></thead>
<tbody>
{% for item in alltime_teams %}
<tr><td>{{ item.team }}</td><td class="text-end fw-semibold">R {{ item.total|money }}</td></tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}<p class="text-muted text-center py-3 mb-0">No lifetime team data.</p>{% endif %}
</div>
</div>
</div>
</div>
<!-- =================================================================== <!-- ===================================================================
SELECTED PERIOD — detailed breakdown SELECTED PERIOD — detailed breakdown
Summary cards (totals for the chosen date range) now live here Summary cards (totals for the chosen date range) now live here
under the Selected Period heading, grouped as Loans pair and under the Selected Period heading, grouped as Loans pair and
Advances pair for quick scanning. Advances pair for quick scanning.
=================================================================== --> =================================================================== -->
<h5 class="fw-bold mb-3" style="color: var(--text-primary);"> <h5 class="chapter-heading mb-3"><span class="chapter-num">II</span>Selected Period: {{ start_date|date:"d M Y" }} &ndash; {{ end_date|date:"d M Y" }}</h5>
<i class="fas fa-filter me-2" style="color: var(--accent);"></i>Selected Period: {{ start_date|date:"d M Y" }} &mdash; {{ end_date|date:"d M Y" }}
</h5>
<!-- === SUMMARY CARDS — scoped to the selected period === --> <!-- === SUMMARY CARDS — scoped to the selected period === -->
<!-- Order: Total Paid Out, Worker-Days, Loans pair, Advances pair --> <!-- Order: Total Paid Out, Worker-Days, Loans pair, Advances pair -->

35
static/css/custom.css
View File

@ -1686,3 +1686,38 @@ body, .card, .modal-content, .form-control, .form-select,
color: var(--text-tertiary); color: var(--text-tertiary);
margin-top: 0.6rem; margin-top: 0.6rem;
} }
/* === Report chapter headings === */
/*
Numbered chapter markers (I, II, III, IV) on the executive report.
Each heading has an orange filled circle with the Roman numeral
followed by the chapter title. Used on Chapter I (Lifetime Context),
II (Selected Period), III (Worker Breakdown), IV (Team x Project).
*/
.chapter-heading {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--text-primary);
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
.chapter-heading .chapter-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.85rem;
height: 1.85rem;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: 0.85rem;
font-weight: 700;
font-family: 'Inter', sans-serif;
}
/* tabular-nums for all numeric report tables */
.report-numeric td,
.report-numeric th {
font-variant-numeric: tabular-nums;
}