Fix broken Run Payroll link + redesign dashboard stat cards
- index.html: Fix Run Payroll shortcut (href="#" → payroll_dashboard URL) - index.html: Remove max-height scroll on Outstanding by Project card - payroll_dashboard.html: Redesign analytics cards — 7/5 split layout with 3 stat cards stacked left, project breakdown card right (no scroll) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Konrad du Plessis
parent
f486bd532b
commit
81573ba814
@ -85,7 +85,7 @@
|
||||
<div class="col me-2">
|
||||
<div class="text-xs font-weight-bold text-uppercase mb-1" style="color: #3b82f6;">
|
||||
Outstanding by Project</div>
|
||||
<div class="mb-0 text-gray-800" style="font-size: 0.85rem; max-height: 60px; overflow-y: auto;">
|
||||
<div class="mb-0 text-gray-800" style="font-size: 0.85rem;">
|
||||
{% if outstanding_by_project %}
|
||||
<ul class="list-unstyled mb-0">
|
||||
{% for proj, amount in outstanding_by_project.items %}
|
||||
@ -131,7 +131,7 @@
|
||||
<a href="{% url 'attendance_log' %}" class="btn btn-lg btn-outline-primary mb-2">
|
||||
<i class="fas fa-clipboard-list mb-2 d-block fa-2x"></i> Log Work
|
||||
</a>
|
||||
<a href="#" class="btn btn-lg btn-outline-success mb-2">
|
||||
<a href="{% url 'payroll_dashboard' %}" class="btn btn-lg btn-outline-success mb-2">
|
||||
<i class="fas fa-money-check-alt mb-2 d-block fa-2x"></i> Run Payroll
|
||||
</a>
|
||||
<a href="{% url 'work_history' %}" class="btn btn-lg btn-outline-secondary mb-2">
|
||||
|
||||
@ -23,90 +23,90 @@
|
||||
</div>
|
||||
|
||||
{# === ANALYTICS CARDS === #}
|
||||
<div class="row g-4 mb-4">
|
||||
{# Outstanding Total #}
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="card stat-card h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col me-2">
|
||||
<div class="text-xs font-weight-bold text-uppercase mb-1" style="color: #ef4444;">
|
||||
Outstanding Payments</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">R {{ outstanding_total|floatformat:2 }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-exclamation-circle fa-2x text-danger opacity-50"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{# Left side: 3 single-value stat cards (2 on top + 1 below) #}
|
||||
{# Right side: Project breakdown card spanning full height — no scroll #}
|
||||
<div class="row g-3 mb-4">
|
||||
|
||||
{# Recent Payments #}
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="card stat-card h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col me-2">
|
||||
<div class="text-xs font-weight-bold text-uppercase mb-1" style="color: #10b981;">
|
||||
Paid (Last 60 Days)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">R {{ recent_payments_total|floatformat:2 }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check-circle fa-2x text-success opacity-50"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Outstanding by Project #}
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="card stat-card h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col me-2">
|
||||
<div class="text-xs font-weight-bold text-uppercase mb-1" style="color: #3b82f6;">
|
||||
Outstanding by Project</div>
|
||||
<div class="mb-0 text-gray-800" style="font-size: 0.85rem; max-height: 60px; overflow-y: auto;">
|
||||
{% if outstanding_project_costs %}
|
||||
<ul class="list-unstyled mb-0">
|
||||
{% for pc in outstanding_project_costs %}
|
||||
<li><strong>{{ pc.name }}:</strong> R {{ pc.cost|floatformat:2 }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<span class="text-muted">None</span>
|
||||
{% endif %}
|
||||
{# --- Left column: stat cards --- #}
|
||||
<div class="col-xl-7">
|
||||
<div class="row g-3 h-100">
|
||||
{# Outstanding Total #}
|
||||
<div class="col-sm-6">
|
||||
<div class="card stat-card h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<div class="text-xs font-weight-bold text-uppercase mb-1" style="color: #ef4444;">
|
||||
Outstanding Payments</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">R {{ outstanding_total|floatformat:2 }}</div>
|
||||
</div>
|
||||
<i class="fas fa-exclamation-circle fa-2x text-danger opacity-25"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-chart-pie fa-2x text-primary opacity-50"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Recent Payments #}
|
||||
<div class="col-sm-6">
|
||||
<div class="card stat-card h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<div class="text-xs font-weight-bold text-uppercase mb-1" style="color: #10b981;">
|
||||
Paid (Last 60 Days)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">R {{ recent_payments_total|floatformat:2 }}</div>
|
||||
</div>
|
||||
<i class="fas fa-check-circle fa-2x text-success opacity-25"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Active Loans — spans full width below the first two #}
|
||||
<div class="col-12">
|
||||
<div class="card stat-card h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<div class="text-xs font-weight-bold text-uppercase mb-1" style="color: #f59e0b;">
|
||||
Active Loans ({{ active_loans_count }})</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">R {{ active_loans_balance|floatformat:2 }}</div>
|
||||
</div>
|
||||
<i class="fas fa-hand-holding-usd fa-2x text-warning opacity-25"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Loans #}
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="card stat-card h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col me-2">
|
||||
<div class="text-xs font-weight-bold text-uppercase mb-1" style="color: #f59e0b;">
|
||||
Active Loans ({{ active_loans_count }})</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">
|
||||
R {{ active_loans_balance|floatformat:2 }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-hand-holding-usd fa-2x text-warning opacity-50"></i>
|
||||
</div>
|
||||
{# --- Right column: project breakdown (grows to fit all projects) --- #}
|
||||
<div class="col-xl-5 d-flex">
|
||||
<div class="card stat-card py-2 w-100">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="d-flex align-items-center justify-content-between mb-3">
|
||||
<div class="text-xs font-weight-bold text-uppercase" style="color: #3b82f6;">
|
||||
Outstanding by Project</div>
|
||||
<i class="fas fa-chart-pie fa-2x text-primary opacity-25"></i>
|
||||
</div>
|
||||
{% if outstanding_project_costs %}
|
||||
<div class="flex-grow-1">
|
||||
{% for pc in outstanding_project_costs %}
|
||||
<div class="d-flex justify-content-between align-items-center {% if not forloop.last %}mb-2 pb-2 border-bottom{% endif %}">
|
||||
<span class="fw-semibold text-gray-800">{{ pc.name }}</span>
|
||||
<span class="fw-bold" style="color: #3b82f6;">R {{ pc.cost|floatformat:2 }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="flex-grow-1 d-flex align-items-center justify-content-center">
|
||||
<span class="text-muted"><i class="fas fa-check-circle me-1"></i> No outstanding amounts</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{# === CHARTS === #}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user