Files
TimeTracker/app/templates/reports/summary.html
Dries Peeters 3c3faf13d4 feat: Implement Tailwind CSS UI redesign across application
Migrate frontend from custom CSS to Tailwind CSS framework with comprehensive
template updates and improved component structure.

Breaking Changes:
- Remove legacy CSS files (base.css, calendar.css, ui.css, etc.)
- Replace with Tailwind-based styling system

New Features:
- Add Tailwind CSS configuration with PostCSS pipeline
- Create new template components for admin, clients, invoices, projects, reports
- Add form-bridge.css for smooth transition between legacy and Tailwind styles
- Add default avatar SVG asset
- Implement Tailwind-based kanban board template
- Add comprehensive UI quick wins documentation

Infrastructure:
- Add package.json with Tailwind dependencies
- Configure PostCSS and Tailwind build pipeline
- Update .gitignore for Node modules and build artifacts

Testing:
- Add template rendering tests (test_tasks_templates.py)
- Add UI component tests (test_ui_quick_wins.py)

Templates Added:
- Admin: dashboard, settings, system info, user management
- Clients: list and detail views
- Invoices: full CRUD templates with payment recording
- Projects: list, detail, and Tailwind kanban views
- Reports: comprehensive reporting templates
- Timer: manual entry interface

This commit represents the first phase of the UI redesign initiative,
maintaining backward compatibility where needed while establishing the
foundation for modern, responsive interfaces.
2025-10-17 11:51:36 +02:00

39 lines
1.4 KiB
HTML

{% extends "base.html" %}
{% from "components/cards.html" import info_card %}
{% block content %}
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">Summary Report</h1>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
{{ info_card("Today's Hours", "%.2f"|format(today_hours), "Logged today") }}
{{ info_card("Week's Hours", "%.2f"|format(week_hours), "Logged this week") }}
{{ info_card("Month's Hours", "%.2f"|format(month_hours), "Logged this month") }}
</div>
<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
<h2 class="text-lg font-semibold mb-4">Top Projects (Last 30 Days)</h2>
<table class="w-full text-left">
<thead>
<tr>
<th class="p-2">Project</th>
<th class="p-2">Total Hours</th>
</tr>
</thead>
<tbody>
{% for stat in project_stats %}
<tr class="border-b border-border-light dark:border-border-dark">
<td class="p-2">{{ stat.project.name }}</td>
<td class="p-2">{{ "%.2f"|format(stat.hours) }}</td>
</tr>
{% else %}
<tr>
<td colspan="2" class="p-4 text-center">No project data for the last 30 days.</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock %}