51 lines
2.0 KiB
HTML
51 lines
2.0 KiB
HTML
{% extends "base.html" %}
|
||
{% block content %}
|
||
<div class="page-header">
|
||
<h1>{{ month_name }} {{ year }} — Bill Calendar</h1>
|
||
<div class="month-nav">
|
||
<a href="{{ url_for('bill_calendar', year=prev_year, month=prev_month) }}" class="btn btn-ghost">‹ Prev</a>
|
||
<a href="{{ url_for('bill_calendar', year=next_year, month=next_month) }}" class="btn btn-ghost">Next ›</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cal-wrap">
|
||
<div class="cal-grid">
|
||
{% for day_name in ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'] %}
|
||
<div class="cal-header">{{ day_name }}</div>
|
||
{% endfor %}
|
||
|
||
{% for week in grid %}
|
||
{% for day in week %}
|
||
{% if day is none %}
|
||
<div class="cal-cell cal-empty"></div>
|
||
{% else %}
|
||
<div class="cal-cell {% if today.day == day and today.month == month and today.year == year %}cal-today{% endif %}">
|
||
<div class="cal-day-num">{{ day }}</div>
|
||
{% for bill in bills_by_day.get(day, []) %}
|
||
<div class="cal-bill" style="background: {{ colors.get(bill.category, '#ddd') }};{% if bill.get('paid') %}opacity:0.45;{% endif %}">
|
||
<span class="cal-bill-name" style="{% if bill.get('paid') %}text-decoration:line-through;{% endif %}">{{ bill.name }}</span>
|
||
{% if bill.amount %}<span class="cal-bill-amt">${{ bill.amount | money }}</span>{% endif %}
|
||
{% if bill.get('paid') %}<span style="font-size:0.65rem;"> ✓</span>{% endif %}
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
{% endfor %}
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cal-legend">
|
||
{% for cat, color in colors.items() %}
|
||
<span class="legend-item">
|
||
<span class="legend-dot" style="background: {{ color }};"></span>{{ cat }}
|
||
</span>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<div class="cal-actions">
|
||
<a href="{{ url_for('bills_list') }}" class="btn btn-primary">Manage Bills</a>
|
||
<a href="{{ url_for('weekly_overview', year=year, month=month) }}" class="btn btn-ghost">Weekly Overview →</a>
|
||
</div>
|
||
{% endblock %}
|