5c8508171a
Extends the app with friendly form-based management for Teams and Projects — an alternative to using Django admin for routine maintenance. New URLs (admin-only, all return 403 for non-admins): - /teams/ · /teams/new/ · /teams/<id>/ · /teams/<id>/edit/ - /teams/report/ · /teams/report/csv/ - /projects/ + same 5 variants Forms (core/forms.py): - TeamForm — ModelForm with pay-schedule validation (both or neither field) - ProjectForm — ModelForm with end_date >= start_date validation - _supervisor_user_queryset() — admins + Work Logger group members Views (core/views.py): - 10 new views (5 per model: list, detail, edit, batch_report, batch_csv) - _build_team_report_context() / _build_project_report_context() shared helpers - All views gate on is_admin(user) - Reuses existing get_pay_period() for Team detail Pay Schedule tab Templates (core/templates/core/teams/ and projects/): - list.html — filterable table with search - detail.html — tabbed profile / workers / history / schedule - edit.html — serves both /new/ and /edit/ - batch_report.html — lifetime aggregates per row, CSV download UI integration: - Resources dropdown added to top nav (admin-only, Teams + Projects) - Manage All buttons added to Dashboard Manage Resources tabs (Teams, Projects) No model changes, no migrations — purely additive. CLAUDE.md updated with new routes and section describing the pattern. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
483 lines
25 KiB
HTML
483 lines
25 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Dashboard | FoxFitt{% endblock %}
|
|
|
|
{% block content %}
|
|
<style>
|
|
{# Hide resource rows — needs !important to override Bootstrap's d-flex !important #}
|
|
.resource-hidden { display: none !important; }
|
|
</style>
|
|
<!-- Gradient Header -->
|
|
<div class="dashboard-header mb-5 rounded shadow-sm p-4 d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h1 class="h3 mb-0 text-white" style="font-family: 'Poppins', sans-serif;">Dashboard</h1>
|
|
<p class="text-white-50 mb-0">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 -->
|
|
<div class="row g-4 mb-4 position-relative">
|
|
<!-- Outstanding Payments Card -->
|
|
<!-- Shows the total owed to workers, with a breakdown of wages vs adjustments -->
|
|
<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_payments|floatformat:2 }}</div>
|
|
{# === BREAKDOWN — only shown when there are pending adjustments === #}
|
|
{% if pending_adjustments_add or pending_adjustments_sub %}
|
|
<div class="mt-2 pt-2 border-top" style="font-size: 0.75rem; color: #64748b;">
|
|
<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 class="text-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 class="text-danger">-R {{ pending_adjustments_sub|floatformat:2 }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
<div class="mt-1" style="font-size: 0.65rem; color: #94a3b8;">
|
|
<i class="fas fa-info-circle"></i> Loan repayments deducted at payment time
|
|
</div>
|
|
</div>
|
|
<div class="col-auto align-self-start">
|
|
<i class="fas fa-exclamation-circle fa-2x text-danger opacity-50"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Paid This Month Card -->
|
|
<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 This Month</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">R {{ paid_this_month|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>
|
|
|
|
<!-- Active Loans Card -->
|
|
<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>
|
|
</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;">
|
|
{% if outstanding_by_project %}
|
|
<ul class="list-unstyled mb-0">
|
|
{% for proj, amount in outstanding_by_project.items %}
|
|
<li><strong>{{ proj }}:</strong> R {{ amount|floatformat:2 }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<span class="text-muted">None</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-chart-pie fa-2x text-primary opacity-50"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions and This Week -->
|
|
<div class="row mb-4">
|
|
<!-- This Week -->
|
|
<div class="col-lg-4 mb-4 mb-lg-0">
|
|
<div class="card shadow-sm border-0 h-100">
|
|
<div class="card-header py-3 bg-white">
|
|
<h6 class="m-0 font-weight-bold" style="color: #0f172a;">This Week Summary</h6>
|
|
</div>
|
|
<div class="card-body text-center d-flex flex-column justify-content-center">
|
|
<div class="h1 mb-0 font-weight-bold text-primary">{{ this_week_logs }}</div>
|
|
<div class="text-muted">Work Logs Created This Week</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="col-lg-8">
|
|
<div class="card shadow-sm border-0 h-100">
|
|
<div class="card-header py-3 bg-white">
|
|
<h6 class="m-0 font-weight-bold" style="color: #0f172a;">Quick Actions</h6>
|
|
</div>
|
|
<div class="card-body d-flex align-items-center justify-content-around flex-wrap">
|
|
<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="{% 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">
|
|
<i class="fas fa-history mb-2 d-block fa-2x"></i> View History
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Recent Activity -->
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card shadow-sm border-0 h-100">
|
|
<div class="card-header py-3 bg-white">
|
|
<h6 class="m-0 font-weight-bold" style="color: #0f172a;">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">{{ log.project.name }}</h6>
|
|
<small class="text-muted">{{ log.date }} · {{ log.workers.count }} workers</small>
|
|
</div>
|
|
<span class="badge bg-light text-dark border">{{ log.supervisor.username }}</span>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="p-4 text-center text-muted">
|
|
No recent activity.
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Manage Resources -->
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card shadow-sm border-0 h-100">
|
|
<div class="card-header py-3 bg-white d-flex justify-content-between align-items-center">
|
|
<h6 class="m-0 font-weight-bold" style="color: #0f172a;">Manage Resources</h6>
|
|
<a href="{% url 'export_workers_csv' %}" class="btn btn-outline-success btn-sm">
|
|
<i class="fas fa-file-csv me-1"></i> Export Workers
|
|
</a>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<p class="text-muted small mb-0 px-3 pt-3">Toggle active status. Inactive items are hidden from forms.</p>
|
|
|
|
<ul class="nav nav-tabs px-3 pt-2" 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>
|
|
|
|
{# Filter bar — Active / Inactive / All (defaults to Active) #}
|
|
<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>
|
|
|
|
<div class="tab-content px-0 mt-2" id="resourceTabsContent" style="max-height: 350px; overflow-y: auto;">
|
|
|
|
{# === WORKERS TAB === #}
|
|
<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 %}">
|
|
<strong class="small">{{ item.name }}</strong>
|
|
<div class="form-check form-switch">
|
|
<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-muted small px-3 py-2">No workers found.</p>
|
|
{% endfor %}
|
|
<p class="text-muted small text-center mt-2 resource-empty" style="display:none;">No matching items.</p>
|
|
</div>
|
|
|
|
{# === PROJECTS TAB === #}
|
|
<div class="tab-pane fade" id="projects" role="tabpanel">
|
|
<div class="d-flex justify-content-end px-3 pt-2 pb-1">
|
|
<a href="{% url 'project_list' %}" class="btn btn-outline-primary btn-sm">
|
|
<i class="fas fa-folder-open me-1"></i> Manage All Projects
|
|
</a>
|
|
</div>
|
|
{% 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 %}">
|
|
<strong class="small">{{ item.name }}</strong>
|
|
<div class="form-check form-switch">
|
|
<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-muted small px-3 py-2">No projects found.</p>
|
|
{% endfor %}
|
|
<p class="text-muted small text-center mt-2 resource-empty" style="display:none;">No matching items.</p>
|
|
</div>
|
|
|
|
{# === TEAMS TAB === #}
|
|
<div class="tab-pane fade" id="teams" role="tabpanel">
|
|
<div class="d-flex justify-content-end px-3 pt-2 pb-1">
|
|
<a href="{% url 'team_list' %}" class="btn btn-outline-primary btn-sm">
|
|
<i class="fas fa-users me-1"></i> Manage All Teams
|
|
</a>
|
|
</div>
|
|
{% 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 %}">
|
|
<strong class="small">{{ item.name }}</strong>
|
|
<div class="form-check form-switch">
|
|
<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-muted small px-3 py-2">No teams found.</p>
|
|
{% endfor %}
|
|
<p class="text-muted small text-center mt-2 resource-empty" style="display:none;">No matching items.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<!-- Supervisor View -->
|
|
<!-- Stat Cards — how many projects, teams, and workers this supervisor manages -->
|
|
<div class="row g-4 mb-4 position-relative">
|
|
<div class="col-md-4">
|
|
<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: #8b5cf6;">
|
|
My Projects</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ my_projects_count }}</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-project-diagram fa-2x opacity-50" style="color: #8b5cf6;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<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;">
|
|
My Teams</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ my_teams_count }}</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-users fa-2x opacity-50" style="color: #3b82f6;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<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;">
|
|
My Workers</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ my_workers_count }}</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-hard-hat fa-2x opacity-50" style="color: #10b981;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- This Week + Recent Activity -->
|
|
<div class="row mb-4">
|
|
<div class="col-lg-4 mb-4 mb-lg-0">
|
|
<div class="card shadow-sm border-0 h-100">
|
|
<div class="card-header py-3 bg-white">
|
|
<h6 class="m-0 fw-bold" style="color: #0f172a;">This Week Summary</h6>
|
|
</div>
|
|
<div class="card-body text-center d-flex flex-column justify-content-center">
|
|
<div class="h1 mb-0 fw-bold text-primary">{{ this_week_logs }}</div>
|
|
<div class="text-muted">Work Logs Created This Week</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-8">
|
|
<div class="card shadow-sm border-0 h-100">
|
|
<div class="card-header py-3 bg-white">
|
|
<h6 class="m-0 fw-bold" style="color: #0f172a;">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">{{ log.project.name }}</h6>
|
|
<small class="text-muted">{{ log.date }} · {{ log.workers.count }} workers</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="p-4 text-center text-muted">
|
|
<i class="fas fa-inbox fa-2x mb-2 d-block opacity-50"></i>
|
|
No recent activity.
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
// === RESOURCE FILTER (Active / Inactive / All) ===
|
|
// Hides/shows resource rows based on their data-active attribute.
|
|
// Starts on "Active" so only current items are visible by default.
|
|
var currentFilter = 'active';
|
|
var filterBtns = document.querySelectorAll('#resourceFilter button');
|
|
|
|
function applyFilter() {
|
|
// Use the resource-hidden CLASS (not inline display:none) because
|
|
// Bootstrap's d-flex has !important which overrides inline styles.
|
|
// Our .resource-hidden also has !important, so it wins.
|
|
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 a tab has rows but none are visible
|
|
document.querySelectorAll('.tab-pane').forEach(function(pane) {
|
|
var rows = pane.querySelectorAll('.resource-row');
|
|
var visibleRows = 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 && visibleRows.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();
|
|
});
|
|
});
|
|
|
|
// Apply filter on page load (shows only active by default)
|
|
applyFilter();
|
|
|
|
// === TOGGLE HANDLER ===
|
|
// When a toggle switch is flipped, POST to the server to update active status.
|
|
// On success, update the row's data-active attribute and re-apply the filter
|
|
// so the row moves to the correct section immediately.
|
|
var toggleSwitches = document.querySelectorAll('.toggle-active');
|
|
|
|
toggleSwitches.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') {
|
|
// Update the row's data-active and re-apply filter
|
|
row.dataset.active = isChecked ? 'true' : 'false';
|
|
applyFilter();
|
|
} else {
|
|
switchEl.checked = !isChecked;
|
|
alert('Error updating status.');
|
|
}
|
|
})
|
|
.catch(function(error) {
|
|
switchEl.checked = !isChecked;
|
|
alert('Error updating status.');
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{% endblock %}
|