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

ux(colors): apply semantic palette to Loans tab + Active Loans card

Browse Source 
Konrad caught that /payroll/?status=loans was still using Bootstrap
defaults (bg-primary for Loan, bg-info for Advance) while the other
three tabs had moved to the semantic palette. The Preview-payslip
modal's Active Loans card had the same inconsistency in its JS-built
badge.

- Added .advance-flag-badge as a sibling to .loan-flag-badge; both
  just reference the existing --badge-loan-* / --badge-advance-*
  tokens so no new colours introduced.
- /payroll/?status=loans row badge: bg-primary/bg-info → loan-flag-
  badge/advance-flag-badge.
- Worker-lookup / Preview-payslip modal JS: same swap on the badge
  className.

Loan-family items now wear the same amber/blue colour pair on every
tab + modal they appear on. Transactional status (Active/Paid Off)
stays on Bootstrap greens/yellows — they're lifecycle, not type.

docs/design-tokens.md updated to record the new class + every place
the --badge-loan-* / --badge-advance-* tokens now appear.

Tests: 69/69.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Konrad du Plessis 2026-04-24 10:52:02 +02:00
parent f159a9f6f2
commit aafa6df189
3 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
core/templates/core/payroll_dashboard.html
View File

@ -513,10 +513,14 @@
<td class="ps-4 align-middle"><a href="#" class="worker-lookup-link fw-bold"
data-worker-id="{{ loan.worker.id }}">{{ loan.worker.name }}</a></td>
<td class="align-middle">
{# Loan vs Advance: same semantic palette as the Adjustments tab #}
{# Loan-type rows wear amber (.loan-flag-badge), advances wear blue #}
{# (.advance-flag-badge). Transactional state ("Active" / "Paid Off") #}
{# is separate — see the next cell — and stays on Bootstrap colours. #}
{% if loan.loan_type == 'advance' %}
<span class="badge bg-info text-dark">Advance</span>
<span class="badge advance-flag-badge">Advance</span>
{% else %}
<span class="badge bg-primary">Loan</span>
<span class="badge loan-flag-badge">Loan</span>
{% endif %}
</td>
<td class="align-middle">R {{ loan.principal_amount|floatformat:2 }}</td>
@ -2556,8 +2560,12 @@ document.addEventListener('DOMContentLoaded', function() {
var topRow = document.createElement('div');
topRow.className = 'd-flex justify-content-between align-items-center mb-1';
// Loan-type badge in the Preview-payslip / Worker-lookup modal's
// "Active Loans & Advances" card — mirrors the server-rendered
// /payroll/?status=loans colours so the same loan looks the same
// everywhere. See custom.css .loan-flag-badge / .advance-flag-badge.
var badge = document.createElement('span');
badge.className = 'badge ' + (loan.type === 'advance' ? 'bg-info text-dark' : 'bg-primary');
badge.className = 'badge ' + (loan.type === 'advance' ? 'advance-flag-badge' : 'loan-flag-badge');
badge.textContent = loan.type_label;
topRow.appendChild(badge);

4
docs/design-tokens.md
View File

@ -40,9 +40,9 @@ Token definitions live in `static/css/custom.css`:
| `--badge-bonus-*` (green) | Adjustments tab type badge; By-Type group-header left-border accent |
| `--badge-overtime-*` (mauve) | Adjustments tab type badge; By-Type group-header accent |
| `--badge-deduction-*` (purple) | Adjustments tab type badge; By-Type group-header accent |
| `--badge-loan-*` (amber/yellow) | Adjustments tab type badge; By-Type group-header accent; Pending tab "Loan" worker flag (`.loan-flag-badge`) |
| `--badge-loan-*` (amber/yellow) | Adjustments tab type badge; By-Type group-header accent; Pending tab "Loan" worker flag (`.loan-flag-badge`); Loans-and-Advances tab row badge for Loan-type rows (`.loan-flag-badge`); Preview-payslip modal's Active Loans card |
| `--badge-loan-rep-*` (deeper amber, +15% saturation) | Adjustments tab type badge for Loan Repayment; By-Type group-header accent |
| `--badge-advance-*` (blue) | Adjustments tab type badge; By-Type group-header accent |
| `--badge-advance-*` (blue) | Adjustments tab type badge; By-Type group-header accent; Loans-and-Advances tab row badge for Advance-type rows (`.advance-flag-badge`); Preview-payslip modal's Active Loans card |
| `--badge-advance-rep-*` (deeper blue, +15% saturation) | Adjustments tab type badge for Advance Repayment; By-Type group-header accent |
## Transactional-state colours (Bootstrap — unchanged)

12
static/css/custom.css
View File

@ -1941,14 +1941,18 @@ body, .card, .modal-content, .form-control, .form-select,
.badge-type-advance-repayment { background: var(--badge-advance-rep-bg); color: var(--badge-advance-rep-fg); }
/* --- Status flags that borrow a type's colour for semantic consistency.
"Has an active loan or advance" -> Loan-type amber/yellow, so the
worker flag on the Pending tab visually matches the Adjustments
type badge for Loan. Keeps the Loan colour family unified across
the app regardless of which tab you're looking at. --- */
The Pending tab's "Loan" worker flag (Has-an-active-loan-or-advance),
and the Loans-and-Advances tab's per-row type badge (Loan vs Advance),
should all look like the Adjustments tab's Loan + Advance type badges.
Same concept, same colour, every tab. --- */
.loan-flag-badge {
background: var(--badge-loan-bg);
color: var(--badge-loan-fg);
}
.advance-flag-badge {
background: var(--badge-advance-bg);
color: var(--badge-advance-fg);
}
/* --- Sticky filter bar (keeps filters visible as the table scrolls) --- */
.adjustments-filter-bar {