82c1906607
Replace the green accent with a warm orange/amber palette and switch to a dark-first design. Add a fixed sidebar for desktop navigation and a bottom tab bar for mobile, replacing the top navbar. Cards now use glass-morphism with left accent bars, buttons use orange gradients, and decorative glow effects add depth. All 8 page templates updated, both light and dark modes tested across desktop and mobile viewports. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
472 lines
22 KiB
HTML
472 lines
22 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Dashboard | FoxFitt{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- === DASHBOARD HEADER — gradient banner with welcome + CTA === -->
|
|
<div class="dashboard-header mb-5 rounded-0 p-4 d-flex justify-content-between align-items-center d-print-none">
|
|
<div>
|
|
<h1 class="h3 mb-1 text-white" style="font-family: 'Poppins', sans-serif;">Dashboard</h1>
|
|
<p class="mb-0" style="color: rgba(255,255,255,0.6); font-size: 0.9rem;">
|
|
Welcome back, {{ user.first_name|default:user.username }}
|
|
</p>
|
|
</div>
|
|
<a href="{% url 'attendance_log' %}" class="btn btn-accent shadow-sm">
|
|
<i class="fas fa-plus fa-sm me-1"></i> Log Daily Work
|
|
</a>
|
|
</div>
|
|
|
|
<div class="container py-2" style="margin-top: -3rem;">
|
|
|
|
{% if is_admin %}
|
|
<!-- ===================================================================
|
|
ADMIN VIEW — stats, quick actions, activity, resources
|
|
=================================================================== -->
|
|
|
|
<!-- === STAT CARDS (4 columns) === -->
|
|
<div class="row g-3 mb-4">
|
|
|
|
<!-- Outstanding Payments -->
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="stat-card stat-card--danger h-100 p-3">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<div class="stat-label">Outstanding Payments</div>
|
|
<div class="stat-value">R {{ outstanding_payments|floatformat:2 }}</div>
|
|
</div>
|
|
<div class="stat-icon stat-icon--danger">
|
|
<i class="fas fa-exclamation-circle"></i>
|
|
</div>
|
|
</div>
|
|
{# Breakdown — wages + adjustments (shown when adjustments exist) #}
|
|
{% if pending_adjustments_add or pending_adjustments_sub %}
|
|
<div class="mt-2 pt-2" style="border-top: 1px solid var(--border-subtle); font-size: 0.75rem; color: var(--text-secondary);">
|
|
<div class="d-flex justify-content-between">
|
|
<span>Unpaid wages</span>
|
|
<span>R {{ unpaid_wages|floatformat:2 }}</span>
|
|
</div>
|
|
{% if pending_adjustments_add %}
|
|
<div class="d-flex justify-content-between">
|
|
<span>+ Additions</span>
|
|
<span style="color: var(--color-success);">R {{ pending_adjustments_add|floatformat:2 }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if pending_adjustments_sub %}
|
|
<div class="d-flex justify-content-between">
|
|
<span>- Deductions</span>
|
|
<span style="color: var(--color-danger);">-R {{ pending_adjustments_sub|floatformat:2 }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
<div class="mt-1" style="font-size: 0.65rem; color: var(--text-tertiary);">
|
|
<i class="fas fa-info-circle"></i> Loan repayments deducted at payment time
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Paid This Month -->
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="stat-card stat-card--success h-100 p-3">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<div class="stat-label">Paid This Month</div>
|
|
<div class="stat-value">R {{ paid_this_month|floatformat:2 }}</div>
|
|
</div>
|
|
<div class="stat-icon stat-icon--success">
|
|
<i class="fas fa-check-circle"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Active Loans -->
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="stat-card stat-card--warning h-100 p-3">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<div class="stat-label">Active Loans ({{ active_loans_count }})</div>
|
|
<div class="stat-value">R {{ active_loans_balance|floatformat:2 }}</div>
|
|
</div>
|
|
<div class="stat-icon stat-icon--warning">
|
|
<i class="fas fa-hand-holding-usd"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Outstanding by Project -->
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="stat-card stat-card--info h-100 p-3">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div style="flex: 1;">
|
|
<div class="stat-label">Outstanding by Project</div>
|
|
{% if outstanding_by_project %}
|
|
<div style="font-size: 0.85rem; margin-top: 0.35rem;">
|
|
{% for proj, amount in outstanding_by_project.items %}
|
|
<div class="d-flex justify-content-between" style="color: var(--text-primary);">
|
|
<span class="text-truncate me-2">{{ proj }}</span>
|
|
<span class="fw-semibold" style="white-space: nowrap;">R {{ amount|floatformat:2 }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<span style="font-size: 0.85rem; color: var(--text-tertiary);">None</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="stat-icon stat-icon--info ms-2">
|
|
<i class="fas fa-chart-pie"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- === ROW 2: This Week + Quick Actions === -->
|
|
<div class="row g-3 mb-4">
|
|
<!-- This Week Summary -->
|
|
<div class="col-lg-4 mb-3 mb-lg-0">
|
|
<div class="card h-100">
|
|
<div class="card-header py-3">
|
|
<h6 class="m-0 fw-bold"><i class="fas fa-calendar-week me-2" style="color: var(--accent);"></i>This Week</h6>
|
|
</div>
|
|
<div class="card-body text-center d-flex flex-column justify-content-center">
|
|
<div class="stat-value" style="font-size: 2.5rem; color: var(--accent);">{{ this_week_logs }}</div>
|
|
<div style="color: var(--text-secondary); font-size: 0.85rem;">Work Logs Created</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="col-lg-8">
|
|
<div class="card h-100">
|
|
<div class="card-header py-3">
|
|
<h6 class="m-0 fw-bold"><i class="fas fa-bolt me-2" style="color: var(--accent);"></i>Quick Actions</h6>
|
|
</div>
|
|
<div class="card-body d-flex align-items-center justify-content-center gap-3 flex-wrap">
|
|
<a href="{% url 'attendance_log' %}" class="quick-action">
|
|
<i class="fas fa-clipboard-list"></i>
|
|
<span>Log Work</span>
|
|
</a>
|
|
<a href="{% url 'payroll_dashboard' %}" class="quick-action">
|
|
<i class="fas fa-money-check-alt"></i>
|
|
<span>Run Payroll</span>
|
|
</a>
|
|
<a href="{% url 'work_history' %}" class="quick-action">
|
|
<i class="fas fa-history"></i>
|
|
<span>View History</span>
|
|
</a>
|
|
<a href="{% url 'create_receipt' %}" class="quick-action">
|
|
<i class="fas fa-receipt"></i>
|
|
<span>New Receipt</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- === ROW 3: Recent Activity + Manage Resources === -->
|
|
<div class="row g-3">
|
|
<!-- Recent Activity -->
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-header py-3 d-flex justify-content-between align-items-center">
|
|
<h6 class="m-0 fw-bold"><i class="fas fa-stream me-2" style="color: var(--accent);"></i>Recent Activity</h6>
|
|
<a href="{% url 'work_history' %}" class="btn btn-sm btn-outline-secondary">View All</a>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="list-group list-group-flush">
|
|
{% for log in recent_activity %}
|
|
<div class="list-group-item px-4 py-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="mb-1 fw-semibold" style="font-size: 0.9rem;">{{ log.project.name }}</h6>
|
|
<small style="color: var(--text-secondary);">
|
|
<i class="fas fa-calendar-day me-1"></i>{{ log.date }}
|
|
<span class="mx-1">·</span>
|
|
<i class="fas fa-users me-1"></i>{{ log.workers.count }} workers
|
|
</small>
|
|
</div>
|
|
<span class="badge" style="background: var(--bg-inset); color: var(--text-secondary); font-size: 0.7rem;">
|
|
{{ log.supervisor.username }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="p-4 text-center" style="color: var(--text-tertiary);">
|
|
<i class="fas fa-inbox fa-2x mb-2 d-block"></i>
|
|
No recent activity
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Manage Resources -->
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-header py-3 d-flex justify-content-between align-items-center">
|
|
<h6 class="m-0 fw-bold"><i class="fas fa-sliders-h me-2" style="color: var(--accent);"></i>Manage Resources</h6>
|
|
<a href="{% url 'export_workers_csv' %}" class="btn btn-sm btn-outline-secondary">
|
|
<i class="fas fa-file-csv me-1"></i> Export
|
|
</a>
|
|
</div>
|
|
<div class="card-body p-0 pt-2">
|
|
<p class="px-3 mb-2" style="font-size: 0.75rem; color: var(--text-tertiary);">
|
|
Toggle active status. Inactive items are hidden from forms.
|
|
</p>
|
|
|
|
<!-- Resource tabs -->
|
|
<ul class="nav nav-tabs px-3" id="resourceTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="workers-tab" data-bs-toggle="tab" data-bs-target="#workers" type="button" role="tab" aria-selected="true">Workers</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="projects-tab" data-bs-toggle="tab" data-bs-target="#projects" type="button" role="tab" aria-selected="false">Projects</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="teams-tab" data-bs-toggle="tab" data-bs-target="#teams" type="button" role="tab" aria-selected="false">Teams</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Active / Inactive / All filter -->
|
|
<div class="btn-group btn-group-sm w-100 px-3 mt-2" id="resourceFilter" role="group">
|
|
<button type="button" class="btn btn-outline-secondary active" data-filter="active">Active</button>
|
|
<button type="button" class="btn btn-outline-secondary" data-filter="inactive">Inactive</button>
|
|
<button type="button" class="btn btn-outline-secondary" data-filter="all">All</button>
|
|
</div>
|
|
|
|
<!-- Tab content with scrollable list -->
|
|
<div class="tab-content mt-2" id="resourceTabsContent" style="max-height: 320px; overflow-y: auto;">
|
|
|
|
{# === WORKERS === #}
|
|
<div class="tab-pane fade show active" id="workers" role="tabpanel">
|
|
{% for item in workers %}
|
|
<div class="resource-row d-flex justify-content-between align-items-center py-2 px-3 border-bottom {% if not item.active %}resource-hidden{% endif %}" data-active="{% if item.active %}true{% else %}false{% endif %}">
|
|
<span class="fw-medium" style="font-size: 0.85rem;">{{ item.name }}</span>
|
|
<div class="form-check form-switch mb-0">
|
|
<input class="form-check-input toggle-active" type="checkbox" role="switch" data-type="worker" data-id="{{ item.id }}" {% if item.active %}checked{% endif %}>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<p class="text-center py-3" style="color: var(--text-tertiary); font-size: 0.85rem;">No workers found.</p>
|
|
{% endfor %}
|
|
<p class="text-center py-2 resource-empty" style="display:none; color: var(--text-tertiary); font-size: 0.85rem;">No matching items.</p>
|
|
</div>
|
|
|
|
{# === PROJECTS === #}
|
|
<div class="tab-pane fade" id="projects" role="tabpanel">
|
|
{% for item in projects %}
|
|
<div class="resource-row d-flex justify-content-between align-items-center py-2 px-3 border-bottom {% if not item.active %}resource-hidden{% endif %}" data-active="{% if item.active %}true{% else %}false{% endif %}">
|
|
<span class="fw-medium" style="font-size: 0.85rem;">{{ item.name }}</span>
|
|
<div class="form-check form-switch mb-0">
|
|
<input class="form-check-input toggle-active" type="checkbox" role="switch" data-type="project" data-id="{{ item.id }}" {% if item.active %}checked{% endif %}>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<p class="text-center py-3" style="color: var(--text-tertiary); font-size: 0.85rem;">No projects found.</p>
|
|
{% endfor %}
|
|
<p class="text-center py-2 resource-empty" style="display:none; color: var(--text-tertiary); font-size: 0.85rem;">No matching items.</p>
|
|
</div>
|
|
|
|
{# === TEAMS === #}
|
|
<div class="tab-pane fade" id="teams" role="tabpanel">
|
|
{% for item in teams %}
|
|
<div class="resource-row d-flex justify-content-between align-items-center py-2 px-3 border-bottom {% if not item.active %}resource-hidden{% endif %}" data-active="{% if item.active %}true{% else %}false{% endif %}">
|
|
<span class="fw-medium" style="font-size: 0.85rem;">{{ item.name }}</span>
|
|
<div class="form-check form-switch mb-0">
|
|
<input class="form-check-input toggle-active" type="checkbox" role="switch" data-type="team" data-id="{{ item.id }}" {% if item.active %}checked{% endif %}>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<p class="text-center py-3" style="color: var(--text-tertiary); font-size: 0.85rem;">No teams found.</p>
|
|
{% endfor %}
|
|
<p class="text-center py-2 resource-empty" style="display:none; color: var(--text-tertiary); font-size: 0.85rem;">No matching items.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% else %}
|
|
<!-- ===================================================================
|
|
SUPERVISOR VIEW — projects, teams, workers + activity
|
|
=================================================================== -->
|
|
|
|
<!-- === STAT CARDS (3 columns) === -->
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-4">
|
|
<div class="stat-card stat-card--purple h-100 p-3">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<div class="stat-label">My Projects</div>
|
|
<div class="stat-value">{{ my_projects_count }}</div>
|
|
</div>
|
|
<div class="stat-icon stat-icon--purple">
|
|
<i class="fas fa-project-diagram"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="stat-card stat-card--info h-100 p-3">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<div class="stat-label">My Teams</div>
|
|
<div class="stat-value">{{ my_teams_count }}</div>
|
|
</div>
|
|
<div class="stat-icon stat-icon--info">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="stat-card stat-card--success h-100 p-3">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<div class="stat-label">My Workers</div>
|
|
<div class="stat-value">{{ my_workers_count }}</div>
|
|
</div>
|
|
<div class="stat-icon stat-icon--success">
|
|
<i class="fas fa-hard-hat"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- === This Week + Recent Activity === -->
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-lg-4 mb-3 mb-lg-0">
|
|
<div class="card h-100">
|
|
<div class="card-header py-3">
|
|
<h6 class="m-0 fw-bold"><i class="fas fa-calendar-week me-2" style="color: var(--accent);"></i>This Week</h6>
|
|
</div>
|
|
<div class="card-body text-center d-flex flex-column justify-content-center">
|
|
<div class="stat-value" style="font-size: 2.5rem; color: var(--accent);">{{ this_week_logs }}</div>
|
|
<div style="color: var(--text-secondary); font-size: 0.85rem;">Work Logs Created</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-8">
|
|
<div class="card h-100">
|
|
<div class="card-header py-3">
|
|
<h6 class="m-0 fw-bold"><i class="fas fa-stream me-2" style="color: var(--accent);"></i>Recent Activity</h6>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="list-group list-group-flush">
|
|
{% for log in recent_activity %}
|
|
<div class="list-group-item px-4 py-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="mb-1 fw-semibold" style="font-size: 0.9rem;">{{ log.project.name }}</h6>
|
|
<small style="color: var(--text-secondary);">
|
|
<i class="fas fa-calendar-day me-1"></i>{{ log.date }}
|
|
<span class="mx-1">·</span>
|
|
<i class="fas fa-users me-1"></i>{{ log.workers.count }} workers
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="p-4 text-center" style="color: var(--text-tertiary);">
|
|
<i class="fas fa-inbox fa-2x mb-2 d-block"></i>
|
|
No recent activity
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- === JAVASCRIPT: Resource filter + AJAX toggle === -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
// === RESOURCE FILTER (Active / Inactive / All) ===
|
|
var currentFilter = 'active';
|
|
var filterBtns = document.querySelectorAll('#resourceFilter button');
|
|
|
|
function applyFilter() {
|
|
document.querySelectorAll('.resource-row').forEach(function(row) {
|
|
var isActive = row.dataset.active === 'true';
|
|
var show = false;
|
|
if (currentFilter === 'all') show = true;
|
|
else if (currentFilter === 'active') show = isActive;
|
|
else if (currentFilter === 'inactive') show = !isActive;
|
|
if (show) {
|
|
row.classList.remove('resource-hidden');
|
|
} else {
|
|
row.classList.add('resource-hidden');
|
|
}
|
|
});
|
|
// Show "No matching items" if tab has rows but none visible
|
|
document.querySelectorAll('.tab-pane').forEach(function(pane) {
|
|
var rows = pane.querySelectorAll('.resource-row');
|
|
var visible = Array.from(rows).filter(function(r) { return !r.classList.contains('resource-hidden'); });
|
|
var emptyMsg = pane.querySelector('.resource-empty');
|
|
if (emptyMsg) {
|
|
emptyMsg.style.display = (rows.length > 0 && visible.length === 0) ? '' : 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
filterBtns.forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
filterBtns.forEach(function(b) { b.classList.remove('active'); });
|
|
this.classList.add('active');
|
|
currentFilter = this.dataset.filter;
|
|
applyFilter();
|
|
});
|
|
});
|
|
|
|
applyFilter();
|
|
|
|
// === TOGGLE HANDLER — AJAX POST to activate/deactivate resources ===
|
|
document.querySelectorAll('.toggle-active').forEach(function(switchEl) {
|
|
switchEl.addEventListener('change', function() {
|
|
var type = this.getAttribute('data-type');
|
|
var id = this.getAttribute('data-id');
|
|
var isChecked = this.checked;
|
|
var row = this.closest('.resource-row');
|
|
|
|
fetch('/toggle/' + type + '/' + id + '/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': '{{ csrf_token }}',
|
|
'Content-Type': 'application/json'
|
|
}
|
|
})
|
|
.then(function(response) {
|
|
if (!response.ok) throw new Error('Network error');
|
|
return response.json();
|
|
})
|
|
.then(function(data) {
|
|
if (data.status === 'success') {
|
|
row.dataset.active = isChecked ? 'true' : 'false';
|
|
applyFilter();
|
|
} else {
|
|
switchEl.checked = !isChecked;
|
|
alert('Error updating status.');
|
|
}
|
|
})
|
|
.catch(function() {
|
|
switchEl.checked = !isChecked;
|
|
alert('Error updating status.');
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{% endblock %}
|