05/31 Phase 3
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
{% block page_title %}{{ title }} — {{ month_label }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-7 col-lg-5">
|
||||
<div class="pcard">
|
||||
<form method="POST" novalidate>
|
||||
{{ form.hidden_tag() }}
|
||||
{{ form.month() }}
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.category_id.label(class="form-label fw-medium", style="font-size:13px;") }}
|
||||
{{ form.category_id(class="form-select" + (" is-invalid" if form.category_id.errors else ""), **({'disabled': 'disabled'} if budget else {})) }}
|
||||
{% if budget %}
|
||||
<input type="hidden" name="category_id" value="{{ budget.category_id }}">
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.limit_amount.label(class="form-label fw-medium", style="font-size:13px;") }}
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" style="font-size:13px;">{{ current_user.currency_symbol }}</span>
|
||||
{{ form.limit_amount(class="form-control" + (" is-invalid" if form.limit_amount.errors else ""), placeholder="0.00") }}
|
||||
</div>
|
||||
{% for e in form.limit_amount.errors %}<div class="text-danger mt-1" style="font-size:12px;">{{ e }}</div>{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="form-check">
|
||||
{{ form.rollover_enabled(class="form-check-input") }}
|
||||
{{ form.rollover_enabled.label(class="form-check-label", style="font-size:13px;") }}
|
||||
</div>
|
||||
<small class="text-muted" style="font-size:12px;">Unused budget rolls over to next month.</small>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2">
|
||||
{{ form.submit(class="btn btn-primary") }}
|
||||
<a href="{{ url_for('budgets.index', month=month) }}" class="btn btn-outline-secondary">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,150 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Budgets{% endblock %}
|
||||
{% block page_title %}Budgets{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
.progress-bar-budget { height: 8px; border-radius: 4px; background: #f1f5f9; overflow: hidden; }
|
||||
.progress-bar-fill { height: 100%; border-radius: 4px; transition: width .6s ease; }
|
||||
.budget-over { background: #fee2e2; border-color: #fca5a5 !important; }
|
||||
{% endblock %}
|
||||
|
||||
{% block topbar_actions %}
|
||||
<a href="{{ url_for('budgets.new', month=month) }}" class="btn btn-sm btn-primary" style="font-size:12px;"><i class="bi bi-plus-lg me-1"></i>Add Budget</a>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Month nav -->
|
||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||
<a href="{{ url_for('budgets.index', month=prev_month) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-chevron-left"></i></a>
|
||||
<h5 class="mb-0 fw-semibold">{{ month_label }}</h5>
|
||||
<a href="{{ url_for('budgets.index', month=next_month) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-chevron-right"></i></a>
|
||||
</div>
|
||||
|
||||
<!-- Overall summary -->
|
||||
{% if total_budget > 0 %}
|
||||
<div class="pcard mb-4">
|
||||
<div class="row g-3 align-items-center">
|
||||
<div class="col-12 col-md-8">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span style="font-size:13px;font-weight:500;">Total Budget</span>
|
||||
<span class="mono" style="font-size:13px;">
|
||||
<span class="{% if total_spent > total_budget %}text-expense{% else %}text-income{% endif %}">{{ total_spent | currency }}</span>
|
||||
<span class="text-muted"> / {{ total_budget | currency }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-bar-budget">
|
||||
<div class="progress-bar-fill" style="width:{{ overall_pct }}%;background:{% if overall_pct >= 100 %}#ef4444{% elif overall_pct >= 80 %}#f59e0b{% else %}#10b981{% endif %};"></div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mt-1">
|
||||
<small class="text-muted">{{ overall_pct }}% used</small>
|
||||
<small class="{% if total_budget - total_spent >= 0 %}text-income{% else %}text-expense{% endif %}">
|
||||
{{ (total_budget - total_spent) | currency }} {% if total_budget - total_spent >= 0 %}remaining{% else %}over{% endif %}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 text-md-end">
|
||||
<!-- Copy from prev month -->
|
||||
<form method="POST" action="{{ url_for('budgets.copy_month') }}" class="d-inline">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<input type="hidden" name="from_month" value="{{ prev_month }}">
|
||||
<input type="hidden" name="to_month" value="{{ month }}">
|
||||
<button type="submit" class="btn btn-sm btn-outline-secondary" style="font-size:12px;"
|
||||
onclick="return confirm('Copy budgets from previous month?')">
|
||||
<i class="bi bi-copy me-1"></i>Copy from {{ prev_month }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Budget Items -->
|
||||
{% if summary %}
|
||||
<div class="pcard p-0">
|
||||
<table class="pfm-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="padding-left:20px;">Category</th>
|
||||
<th>Spent</th>
|
||||
<th class="d-none d-md-table-cell">Limit</th>
|
||||
<th>Progress</th>
|
||||
<th class="d-none d-md-table-cell text-end">Remaining</th>
|
||||
<th class="text-end" style="padding-right:20px;">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in summary %}
|
||||
<tr class="{% if item.is_over %}budget-over{% endif %}">
|
||||
<td style="padding-left:20px;">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
{% if item.category %}
|
||||
<div style="width:28px;height:28px;border-radius:7px;background:{{ item.category.color }}22;color:{{ item.category.color }};display:flex;align-items:center;justify-content:center;font-size:14px;">
|
||||
<i class="bi {{ item.category.icon }}"></i>
|
||||
</div>
|
||||
<span style="font-size:13px;font-weight:500;">{{ item.category.name }}</span>
|
||||
{% endif %}
|
||||
{% if not item.has_budget %}
|
||||
<span style="font-size:10px;background:#fef9c3;color:#854d0e;border-radius:4px;padding:1px 5px;">no budget</span>
|
||||
{% endif %}
|
||||
{% if item.budget and item.budget.rollover_amount and item.budget.rollover_amount > 0 %}
|
||||
<span style="font-size:10px;background:#dbeafe;color:#1e40af;border-radius:4px;padding:1px 5px;" title="Includes {{ item.budget.rollover_amount | currency }} rollover">+rollover</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="mono {% if item.is_over %}text-expense{% endif %}" style="font-size:13px;font-weight:500;">{{ item.spent | currency }}</span>
|
||||
</td>
|
||||
<td class="d-none d-md-table-cell">
|
||||
{% if item.limit is not none %}
|
||||
<span class="mono text-muted" style="font-size:12px;">{{ item.limit | currency }}</span>
|
||||
{% else %}
|
||||
<span class="text-muted" style="font-size:12px;">—</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td style="min-width:120px;">
|
||||
{% if item.pct is not none %}
|
||||
<div class="progress-bar-budget">
|
||||
<div class="progress-bar-fill" style="width:{{ item.pct }}%;background:{% if item.pct >= 100 %}#ef4444{% elif item.pct >= 80 %}#f59e0b{% else %}#10b981{% endif %};"></div>
|
||||
</div>
|
||||
<small class="text-muted" style="font-size:10px;">{{ item.pct }}%</small>
|
||||
{% else %}
|
||||
<span class="text-muted" style="font-size:12px;">—</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="d-none d-md-table-cell text-end">
|
||||
{% if item.remaining is not none %}
|
||||
<span class="mono {% if item.remaining >= 0 %}text-income{% else %}text-expense{% endif %}" style="font-size:12px;">{{ item.remaining | currency }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-end" style="padding-right:20px;white-space:nowrap;">
|
||||
{% if item.budget %}
|
||||
<a href="{{ url_for('budgets.edit', id=item.budget.id) }}" class="btn btn-sm btn-outline-secondary" style="font-size:11px;padding:2px 8px;">Edit</a>
|
||||
<form method="POST" action="{{ url_for('budgets.delete', id=item.budget.id) }}" style="display:inline;" onsubmit="return confirm('Remove this budget?')">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<button type="submit" class="btn btn-sm btn-outline-danger ms-1" style="font-size:11px;padding:2px 8px;">Del</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a href="{{ url_for('budgets.new', month=month) }}" class="btn btn-sm btn-outline-primary" style="font-size:11px;padding:2px 8px;">Set Budget</a>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="pcard text-center py-5">
|
||||
<i class="bi bi-pie-chart text-muted" style="font-size:3rem;"></i>
|
||||
<h5 class="mt-3 mb-1">No budgets for {{ month_label }}</h5>
|
||||
<p class="text-muted small mb-3">Set spending limits per category to track your budget.</p>
|
||||
<a href="{{ url_for('budgets.new', month=month) }}" class="btn btn-primary btn-sm">Set First Budget</a>
|
||||
{% set prev_year, prev_mo = prev_month.split('-') %}
|
||||
<form method="POST" action="{{ url_for('budgets.copy_month') }}" class="mt-2 d-inline">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<input type="hidden" name="from_month" value="{{ prev_month }}">
|
||||
<input type="hidden" name="to_month" value="{{ month }}">
|
||||
<button type="submit" class="btn btn-outline-secondary btn-sm">Copy from {{ prev_month }}</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user