77 lines
3.0 KiB
HTML
77 lines
3.0 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="page-header">
|
|
<div>
|
|
<h1 class="page-title">Time Budgets <span class="page-count">({{ count }})</span></h1>
|
|
</div>
|
|
<a href="/time-budgets/create" class="btn btn-primary">+ New Budget</a>
|
|
</div>
|
|
|
|
{% if overcommitted %}
|
|
<div class="alert alert-warning mb-3">
|
|
<strong>Overcommitted!</strong> Your budgets total {{ "%.1f"|format(total_budgeted) }} hours/week, which exceeds the 168 hours available.
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if current_budgets %}
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<span class="card-title">This Week's Budget vs Actual</span>
|
|
<span class="text-muted text-sm">{{ "%.1f"|format(total_budgeted) }}h budgeted total</span>
|
|
</div>
|
|
|
|
{% for b in current_budgets %}
|
|
<div class="list-row" style="flex-wrap: wrap; gap: 8px;">
|
|
<span class="domain-dot" style="background: {{ b.domain_color or '#4F6EF7' }}; flex-shrink: 0;"></span>
|
|
<div class="row-title" style="min-width: 120px;">
|
|
{{ b.domain_name }}
|
|
</div>
|
|
<div style="flex: 2; min-width: 200px; display: flex; align-items: center; gap: 8px;">
|
|
<div class="progress-bar" style="flex: 1; height: 8px;">
|
|
<div class="progress-fill" style="width: {{ [b.pct, 100] | min }}%; {{ 'background: var(--red);' if b.pct > 100 }}"></div>
|
|
</div>
|
|
</div>
|
|
<span class="row-meta" style="min-width: 100px; text-align: right;">
|
|
<strong>{{ b.actual_hours }}h</strong> / {{ b.weekly_hours_float }}h
|
|
</span>
|
|
<span class="row-meta" style="min-width: 40px; text-align: right; {{ 'color: var(--red); font-weight: 600;' if b.pct > 100 else ('color: var(--green);' if b.pct >= 80 else '') }}">
|
|
{{ b.pct }}%
|
|
</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if all_budgets %}
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="card-title">All Budgets</span>
|
|
</div>
|
|
|
|
{% for b in all_budgets %}
|
|
<div class="list-row">
|
|
<span class="domain-dot" style="background: {{ b.domain_color or '#4F6EF7' }}; flex-shrink: 0;"></span>
|
|
<div class="row-title">
|
|
{{ b.domain_name }}
|
|
</div>
|
|
<span class="row-meta">{{ b.weekly_hours }}h / week</span>
|
|
<span class="row-meta">from {{ b.effective_from.strftime('%b %-d, %Y') if b.effective_from else '—' }}</span>
|
|
<div class="row-actions">
|
|
<a href="/time-budgets/{{ b.id }}/edit" class="btn btn-ghost btn-xs">Edit</a>
|
|
<form method="POST" action="/time-budgets/{{ b.id }}/delete" data-confirm="Delete this budget?">
|
|
<button type="submit" class="btn btn-ghost btn-xs" style="color: var(--red);">Delete</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<div class="empty-state-icon">⏱</div>
|
|
<div class="empty-state-text">No time budgets defined</div>
|
|
<a href="/time-budgets/create" class="btn btn-primary">Create a Budget</a>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|