mirror of
https://github.com/DRYTRIX/TimeTracker.git
synced 2026-05-02 10:19:58 -05:00
Dries Peeters
0da5ac0077
Implement a feature-rich project dashboard that provides visual analytics and key performance indicators for project tracking and management. Features: - Individual project dashboard route (/projects/<id>/dashboard) - Key metrics cards: Total Hours, Budget Used, Tasks Complete, Team Size - Budget vs. Actual bar chart with threshold warnings - Task status distribution doughnut chart - Team member contributions horizontal bar chart (top 10) - Time tracking timeline line chart - Team member details with progress bars - Recent activity feed (last 10 activities) - Period filtering (All Time, 7/30/90/365 Days) - Responsive design with dark mode support - Navigation button added to project view page Technical Implementation: - New route: project_dashboard() in app/routes/projects.py - Template: app/templates/projects/dashboard.html with Chart.js 4.4.0 - Data aggregation for budget, tasks, team contributions, and timeline - Optimized database queries with proper filtering - JavaScript escaping handled with |tojson filters and autoescape control Testing: - 20 comprehensive unit tests (test_project_dashboard.py) - 23 smoke tests (smoke_test_project_dashboard.py) - Full test coverage for all dashboard functionality Documentation: - Complete feature guide (docs/features/PROJECT_DASHBOARD.md) - Implementation summary (PROJECT_DASHBOARD_IMPLEMENTATION_SUMMARY.md) - Usage examples and troubleshooting guide Fixes: - JavaScript syntax errors from HTML entity escaping - Proper use of |tojson filter for dynamic values in JavaScript - Autoescape disabled for script blocks to prevent operator mangling This dashboard provides project managers and team members with valuable insights into project health, progress, budget utilization, and resource allocation at a glance.
209 lines
14 KiB
HTML
209 lines
14 KiB
HTML
{% extends "base.html" %}
|
|
{% from "components/ui.html" import confirm_dialog %}
|
|
|
|
{% block content %}
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold flex items-center gap-2">
|
|
<span>{{ project.name }}</span>
|
|
{% if project.code_display %}
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold tracking-wide uppercase bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200" title="{{ _('Project Code') }}">{{ project.code_display }}</span>
|
|
{% endif %}
|
|
</h1>
|
|
<p class="text-text-muted-light dark:text-text-muted-dark">{{ project.client.name }}</p>
|
|
</div>
|
|
{% if current_user.is_admin or has_any_permission(['edit_projects', 'archive_projects']) %}
|
|
<div class="flex gap-2">
|
|
<a href="{{ url_for('projects.project_dashboard', project_id=project.id) }}" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg mt-4 md:mt-0 flex items-center gap-2">
|
|
<i class="fas fa-chart-line"></i>
|
|
{{ _('Dashboard') }}
|
|
</a>
|
|
{% if current_user.is_admin or has_permission('edit_projects') %}
|
|
<a href="{{ url_for('projects.edit_project', project_id=project.id) }}" class="bg-primary text-white px-4 py-2 rounded-lg mt-4 md:mt-0">{{ _('Edit Project') }}</a>
|
|
{% endif %}
|
|
{% if current_user.is_admin or has_permission('edit_projects') %}
|
|
{% if project.status == 'active' %}
|
|
<form method="POST" action="{{ url_for('projects.deactivate_project', project_id=project.id) }}" onsubmit="event.preventDefault(); window.showConfirm('{{ _('Mark project as Inactive?') }}', { title: '{{ _('Change Project Status') }}', confirmText: '{{ _('Change') }}' }).then(ok=>{ if(ok) this.submit(); });" class="inline">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<button type="submit" class="px-4 py-2 rounded-lg bg-amber-500 text-white mt-4 md:mt-0">{{ _('Mark Inactive') }}</button>
|
|
</form>
|
|
{% elif project.status == 'inactive' %}
|
|
<form method="POST" action="{{ url_for('projects.activate_project', project_id=project.id) }}" onsubmit="event.preventDefault(); window.showConfirm('{{ _('Activate project?') }}', { title: '{{ _('Activate Project') }}', confirmText: '{{ _('Activate') }}' }).then(ok=>{ if(ok) this.submit(); });" class="inline">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<button type="submit" class="px-4 py-2 rounded-lg bg-emerald-600 text-white mt-4 md:mt-0">{{ _('Activate') }}</button>
|
|
</form>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% if current_user.is_admin or has_permission('archive_projects') %}
|
|
{% if not project.is_archived %}
|
|
<a href="{{ url_for('projects.archive_project', project_id=project.id) }}" class="inline-block px-4 py-2 rounded-lg bg-gray-600 text-white mt-4 md:mt-0 hover:bg-gray-700 transition-colors">{{ _('Archive') }}</a>
|
|
{% else %}
|
|
<form method="POST" action="{{ url_for('projects.unarchive_project', project_id=project.id) }}" onsubmit="event.preventDefault(); window.showConfirm('{{ _('Unarchive project?') }}', { title: '{{ _('Unarchive Project') }}', confirmText: '{{ _('Unarchive') }}' }).then(ok=>{ if(ok) this.submit(); });" class="inline">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<button type="submit" class="px-4 py-2 rounded-lg bg-sky-600 text-white mt-4 md:mt-0">{{ _('Unarchive') }}</button>
|
|
</form>
|
|
{% endif %}
|
|
{% endif %}
|
|
<button type="button" class="bg-red-600 text-white px-4 py-2 rounded-lg mt-4 md:mt-0"
|
|
onclick="document.getElementById('confirmDeleteProject-{{ project.id }}').classList.remove('hidden')">
|
|
{{ _('Delete Project') }}
|
|
</button>
|
|
<form id="confirmDeleteProject-{{ project.id }}-form" method="POST" action="{{ url_for('projects.delete_project', project_id=project.id) }}" class="hidden">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Left Column: Project Details -->
|
|
<div class="lg:col-span-1 space-y-6">
|
|
<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
|
|
<h2 class="text-lg font-semibold mb-4">Details</h2>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<h3 class="text-sm font-medium text-text-muted-light dark:text-text-muted-dark">{{ _('Project Code') }}</h3>
|
|
<p>
|
|
{% if project.code_display %}
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold tracking-wide uppercase bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200">{{ project.code_display }}</span>
|
|
{% else %}
|
|
—
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-medium text-text-muted-light dark:text-text-muted-dark">Description</h3>
|
|
<div class="prose prose-sm dark:prose-invert max-w-none">{{ (project.description or 'No description provided.') | markdown | safe }}</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-medium text-text-muted-light dark:text-text-muted-dark">Status</h3>
|
|
{% set status_map = {
|
|
'active': {'cls': 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300', 'label': _('Active')},
|
|
'inactive': {'cls': 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300', 'label': _('Inactive')},
|
|
'archived': {'cls': 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200', 'label': _('Archived')},
|
|
} %}
|
|
{% set st = status_map.get(project.status, status_map['inactive']) %}
|
|
<span class="px-2 py-1 rounded-full text-xs font-medium whitespace-nowrap {{ st.cls }}">{{ st.label }}</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-medium text-text-muted-light dark:text-text-muted-dark">Billing</h3>
|
|
<p>{{ 'Billable' if project.billable else 'Not Billable' }} {% if project.hourly_rate %}({{ "%.2f"|format(project.hourly_rate) }}/hr){% endif %}</p>
|
|
</div>
|
|
{% if project.is_archived and project.archived_at %}
|
|
<div class="pt-4 border-t border-border-light dark:border-border-dark">
|
|
<h3 class="text-sm font-medium text-text-muted-light dark:text-text-muted-dark mb-2">{{ _('Archive Information') }}</h3>
|
|
<div class="space-y-2 text-sm">
|
|
<div>
|
|
<span class="text-text-muted-light dark:text-text-muted-dark">{{ _('Archived on:') }}</span>
|
|
<span class="font-medium">{{ project.archived_at.strftime('%Y-%m-%d %H:%M') }}</span>
|
|
</div>
|
|
{% if project.archived_by_user %}
|
|
<div>
|
|
<span class="text-text-muted-light dark:text-text-muted-dark">{{ _('Archived by:') }}</span>
|
|
<span class="font-medium">{{ project.archived_by_user.full_name or project.archived_by_user.username }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if project.archived_reason %}
|
|
<div>
|
|
<span class="text-text-muted-light dark:text-text-muted-dark">{{ _('Reason:') }}</span>
|
|
<p class="mt-1 p-2 bg-gray-50 dark:bg-gray-800 rounded text-gray-700 dark:text-gray-300">{{ project.archived_reason }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
|
|
<h2 class="text-lg font-semibold mb-4">User Contributions</h2>
|
|
<ul>
|
|
{% for user_total in user_totals %}
|
|
<li class="flex justify-between py-2 border-b border-border-light dark:border-border-dark">
|
|
<span>{{ user_total.username }}</span>
|
|
<span class="font-semibold">{{ "%.2f"|format(user_total.total_hours) }} hrs</span>
|
|
</li>
|
|
{% else %}
|
|
<li>No hours logged yet.</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Tabs for Tasks, Entries, etc. -->
|
|
<div class="lg:col-span-2">
|
|
<div class="bg-card-light dark:bg-card-dark rounded-lg shadow p-6 overflow-x-auto">
|
|
<h3 class="text-lg font-semibold mb-4">{{ _('Tasks for this project') }}</h3>
|
|
<table class="w-full text-left">
|
|
<thead class="border-b border-border-light dark:border-border-dark">
|
|
<tr>
|
|
<th class="p-3">{{ _('Name') }}</th>
|
|
<th class="p-3">{{ _('Priority') }}</th>
|
|
<th class="p-3">{{ _('Status') }}</th>
|
|
<th class="p-3">{{ _('Due') }}</th>
|
|
<th class="p-3">{{ _('Progress') }}</th>
|
|
<th class="p-3">{{ _('Actions') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for task in tasks %}
|
|
<tr class="border-b border-border-light dark:border-border-dark">
|
|
<td class="p-3">{{ task.name }}</td>
|
|
<td class="p-3">
|
|
{% set p = task.priority %}
|
|
{% set pcls = {'low':'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300',
|
|
'medium':'bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-300',
|
|
'high':'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
|
|
'urgent':'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'}[p] if p in ['low','medium','high','urgent'] else 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300' %}
|
|
<span class="px-2 py-1 rounded-full text-xs font-medium whitespace-nowrap {{ pcls }}">{{ task.priority_display }}</span>
|
|
</td>
|
|
<td class="p-3">
|
|
{% set s = task.status %}
|
|
{% set scls = {'todo':'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300',
|
|
'in_progress':'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300',
|
|
'review':'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
|
|
'done':'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300',
|
|
'cancelled':'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200'}[s] if s in ['todo','in_progress','review','done','cancelled'] else 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300' %}
|
|
<span class="px-2 py-1 rounded-full text-xs font-medium whitespace-nowrap {{ scls }}">{{ task.status_display }}</span>
|
|
</td>
|
|
<td class="p-3">
|
|
{% if task.due_date %}
|
|
{% set overdue = task.is_overdue %}
|
|
<span class="px-2 py-1 rounded-md text-xs font-medium whitespace-nowrap {{ 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300' if overdue else 'bg-primary/10 text-primary' }}">{{ task.due_date.strftime('%Y-%m-%d') }}</span>
|
|
{% else %}
|
|
<span class="text-text-muted-light dark:text-text-muted-dark">—</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="p-3">
|
|
{% set pct = task.progress_percentage or 0 %}
|
|
<div class="w-28 h-2 bg-gray-200 dark:bg-gray-700 rounded">
|
|
<div class="h-2 rounded {{ 'bg-emerald-500' if pct>=100 else 'bg-primary' }}" style="width: {{ [pct,100]|min }}%"></div>
|
|
</div>
|
|
</td>
|
|
<td class="p-3">
|
|
<a href="{{ url_for('tasks.view_task', task_id=task.id) }}" class="text-primary hover:underline">{{ _('View') }}</a>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="6" class="p-3 text-center text-text-muted-light dark:text-text-muted-dark">{{ _('No tasks for this project.') }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if current_user.is_admin or has_permission('delete_projects') %}
|
|
{{ confirm_dialog(
|
|
'confirmDeleteProject-' ~ project.id,
|
|
'Delete Project',
|
|
'Are you sure you want to delete this project? This action cannot be undone.',
|
|
'Delete',
|
|
'Cancel',
|
|
'danger'
|
|
) }}
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block scripts_extra %}{% endblock %}
|