281 lines
14 KiB
HTML
281 lines
14 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ provider.name }}{% endblock %}
|
|
{% block page_title %}{{ provider.name }}{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
.util-chip { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: .05em; }
|
|
.trend-up { color: #ef4444; }
|
|
.trend-down { color: #10b981; }
|
|
{% endblock %}
|
|
|
|
{% block topbar_actions %}
|
|
<a href="{{ url_for('utilities.index') }}" class="btn btn-sm btn-outline-secondary" style="font-size:12px;">← Utilities</a>
|
|
<a href="{{ url_for('utilities.provider_edit', id=provider.id) }}" class="btn btn-sm btn-outline-secondary" style="font-size:12px;"><i class="bi bi-pencil me-1"></i><span class="btn-label">Edit</span></a>
|
|
<a href="{{ url_for('utilities.bill_new', provider_id=provider.id) }}" class="btn btn-sm btn-primary" style="font-size:12px;"><i class="bi bi-plus-lg me-1"></i><span class="btn-label">Add Bill</span></a>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<!-- Header -->
|
|
<div class="pcard mb-4" style="border-left:4px solid {{ provider.color }};">
|
|
<div class="d-flex align-items-center gap-3 flex-wrap">
|
|
<div style="width:46px;height:46px;border-radius:11px;background:{{ provider.color }}22;color:{{ provider.color }};display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">
|
|
<i class="bi {{ provider.icon }}"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<div style="font-size:16px;font-weight:600;">{{ provider.name }}</div>
|
|
<div style="font-size:12px;color:var(--muted);">
|
|
{{ provider.type_label }}
|
|
{% if provider.account_number %} · Acct <span class="mono">{{ provider.account_number }}</span>{% endif %}
|
|
{% if provider.default_account %} · Paid from {{ provider.default_account.name }}{% endif %}
|
|
{% if provider.billing_day %} · Bills on day {{ provider.billing_day }}{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if provider.notes %}
|
|
<div style="font-size:12px;color:var(--muted);margin-top:10px;padding-top:10px;border-top:1px solid var(--border);">{{ provider.notes }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-6 col-xl-3">
|
|
<div class="stat-card">
|
|
<div class="stat-label">Latest Bill</div>
|
|
<div class="stat-value">{{ stats.latest.amount | currency if stats.latest else '—' }}</div>
|
|
{% if stats.amount_change_pct is not none %}
|
|
<small class="{% if stats.amount_change_pct > 0 %}trend-up{% else %}trend-down{% endif %}" style="font-size:11px;">
|
|
<i class="bi bi-arrow-{% if stats.amount_change_pct > 0 %}up{% else %}down{% endif %}-short"></i>{{ stats.amount_change_pct | abs }}% vs prev
|
|
</small>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-xl-3">
|
|
<div class="stat-card">
|
|
<div class="stat-label">Average Bill</div>
|
|
<div class="stat-value">{{ stats.avg_amount | currency }}</div>
|
|
<small class="text-muted" style="font-size:11px;">Last 12 months</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-xl-3">
|
|
<div class="stat-card">
|
|
<div class="stat-label">12-Month Total</div>
|
|
<div class="stat-value">{{ stats.total_12mo | currency }}</div>
|
|
<small class="text-muted" style="font-size:11px;">{{ stats.bill_count }} bill{{ '' if stats.bill_count == 1 else 's' }} on record</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-xl-3">
|
|
<div class="stat-card">
|
|
<div class="stat-label">{% if provider.tracks_usage %}Avg Usage{% else %}Year over Year{% endif %}</div>
|
|
{% if provider.tracks_usage %}
|
|
<div class="stat-value">{{ '%.1f' | format(stats.avg_usage) if stats.avg_usage else '—' }}<span style="font-size:13px;color:var(--muted);"> {{ provider.usage_unit }}</span></div>
|
|
{% if stats.usage_change_pct is not none %}
|
|
<small class="{% if stats.usage_change_pct > 0 %}trend-up{% else %}trend-down{% endif %}" style="font-size:11px;">
|
|
<i class="bi bi-arrow-{% if stats.usage_change_pct > 0 %}up{% else %}down{% endif %}-short"></i>{{ stats.usage_change_pct | abs }}% latest vs prev
|
|
</small>
|
|
{% endif %}
|
|
{% else %}
|
|
<div class="stat-value">{% if stats.yoy_change_pct is not none %}{{ '+' if stats.yoy_change_pct > 0 else '' }}{{ stats.yoy_change_pct }}%{% else %}—{% endif %}</div>
|
|
<small class="text-muted" style="font-size:11px;">Latest vs same period last year</small>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart -->
|
|
{% if series.labels %}
|
|
<div class="pcard mb-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div class="pcard-title mb-0">Billing History</div>
|
|
{% if series.has_usage %}
|
|
<div class="btn-group btn-group-sm" role="group">
|
|
<button class="btn btn-outline-secondary active" style="font-size:11px;" data-mode="amount">Amount</button>
|
|
<button class="btn btn-outline-secondary" style="font-size:11px;" data-mode="usage">Usage</button>
|
|
<button class="btn btn-outline-secondary" style="font-size:11px;" data-mode="rate">Unit Rate</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div style="height:300px;"><canvas id="histChart"></canvas></div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Bills -->
|
|
<div class="pcard p-0">
|
|
<div class="d-flex justify-content-between align-items-center p-3" style="border-bottom:1px solid var(--border);">
|
|
<div class="pcard-title mb-0">Bills</div>
|
|
</div>
|
|
|
|
{% if bills %}
|
|
<div class="table-wrap">
|
|
<table class="pfm-table wide">
|
|
<thead>
|
|
<tr>
|
|
<th>Period</th>
|
|
<th class="d-mob-none">Due</th>
|
|
<th class="text-end">Amount</th>
|
|
{% if provider.tracks_usage %}
|
|
<th class="text-end d-mob-none">Usage</th>
|
|
<th class="text-end d-mob-none">Rate</th>
|
|
{% endif %}
|
|
<th>Status</th>
|
|
<th class="text-end">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for b in bills %}
|
|
<tr>
|
|
<td style="font-size:12px;">
|
|
{{ b.period_label }}
|
|
{% if b.notes %}<div style="font-size:11px;color:var(--muted);">{{ b.notes | truncate(60) }}</div>{% endif %}
|
|
</td>
|
|
<td class="d-mob-none" style="font-size:12px;">{{ b.due_date.strftime('%b %d, %Y') if b.due_date else '—' }}</td>
|
|
<td class="text-end mono fw-bold" style="font-size:13px;">{{ b.amount | currency }}</td>
|
|
{% if provider.tracks_usage %}
|
|
<td class="text-end mono d-mob-none" style="font-size:12px;">
|
|
{% if b.usage %}{{ '%.1f' | format(b.usage | float) }} <span style="color:var(--muted);">{{ b.usage_unit or provider.usage_unit }}</span>{% else %}—{% endif %}
|
|
</td>
|
|
<td class="text-end mono d-mob-none" style="font-size:12px;">
|
|
{% if b.rate_per_unit %}{{ current_user.currency_symbol }}{{ '%.4f' | format(b.rate_per_unit) }}{% else %}—{% endif %}
|
|
</td>
|
|
{% endif %}
|
|
<td>
|
|
{% if b.status == 'paid' %}
|
|
<span class="util-chip" style="background:#d1fae5;color:#065f46;">Paid</span>
|
|
{% if b.paid_date %}<div style="font-size:10px;color:var(--muted);margin-top:2px;">{{ b.paid_date.strftime('%b %d') }}</div>{% endif %}
|
|
{% elif b.status == 'overdue' %}
|
|
<span class="util-chip" style="background:#fee2e2;color:#991b1b;">{{ b.days_until_due | abs }}d late</span>
|
|
{% elif b.status == 'due_soon' %}
|
|
<span class="util-chip" style="background:#fef3c7;color:#92400e;">Due in {{ b.days_until_due }}d</span>
|
|
{% else %}
|
|
<span class="util-chip" style="background:#f1f5f9;color:#475569;">Unpaid</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="text-end">
|
|
<div class="dropdown">
|
|
<button class="btn btn-sm" style="background:none;border:none;color:var(--muted);padding:2px 6px;" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></button>
|
|
<ul class="dropdown-menu dropdown-menu-end" style="font-size:13px;">
|
|
{% if not b.is_paid %}
|
|
<li><a class="dropdown-item" href="{{ url_for('utilities.bill_pay', id=b.id) }}"><i class="bi bi-check2-circle me-2"></i>Mark Paid</a></li>
|
|
<li><a class="dropdown-item" href="{{ url_for('utilities.bill_link', id=b.id) }}"><i class="bi bi-link-45deg me-2"></i>Link Existing Payment</a></li>
|
|
{% else %}
|
|
{% if b.transaction_id %}
|
|
<li><a class="dropdown-item" href="{{ url_for('transactions.edit', id=b.transaction_id) }}"><i class="bi bi-receipt me-2"></i>View Payment</a></li>
|
|
{% endif %}
|
|
<li>
|
|
<form method="POST" action="{{ url_for('utilities.bill_unpay', id=b.id) }}" onsubmit="return confirm('Reopen this bill? A payment transaction created by PFM will be deleted.')">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<button type="submit" class="dropdown-item"><i class="bi bi-arrow-counterclockwise me-2"></i>Reopen</button>
|
|
</form>
|
|
</li>
|
|
{% endif %}
|
|
<li><a class="dropdown-item" href="{{ url_for('utilities.bill_edit', id=b.id) }}"><i class="bi bi-pencil me-2"></i>Edit</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li>
|
|
<form method="POST" action="{{ url_for('utilities.bill_delete', id=b.id) }}" onsubmit="return confirm('Delete this bill?')">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<button type="submit" class="dropdown-item text-danger"><i class="bi bi-trash me-2"></i>Delete</button>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{% if pagination.pages > 1 %}
|
|
<div class="d-flex justify-content-between align-items-center p-3" style="border-top:1px solid var(--border);font-size:12px;color:var(--muted);">
|
|
<span>Page {{ pagination.page }} of {{ pagination.pages }} · {{ pagination.total }} bills</span>
|
|
<div class="d-flex gap-2">
|
|
{% if pagination.has_prev %}
|
|
<a href="{{ url_for('utilities.provider_detail', id=provider.id, page=pagination.prev_num) }}" class="btn btn-sm btn-outline-secondary" style="font-size:11px;">← Prev</a>
|
|
{% endif %}
|
|
{% if pagination.has_next %}
|
|
<a href="{{ url_for('utilities.provider_detail', id=provider.id, page=pagination.next_num) }}" class="btn btn-sm btn-outline-secondary" style="font-size:11px;">Next →</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
<div class="text-center py-5">
|
|
<i class="bi bi-receipt text-muted" style="font-size:2.5rem;"></i>
|
|
<h6 class="mt-3 mb-1">No bills recorded</h6>
|
|
<p class="text-muted small mb-3">Add a bill to start tracking cost{% if provider.tracks_usage %} and usage{% endif %}.</p>
|
|
<a href="{{ url_for('utilities.bill_new', provider_id=provider.id) }}" class="btn btn-primary btn-sm">Add First Bill</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
{% if series.labels %}
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
|
|
<script>
|
|
(function () {
|
|
const dark = document.documentElement.getAttribute('data-pfm-dark') === '1';
|
|
const grid = dark ? 'rgba(148,163,184,.15)' : 'rgba(148,163,184,.25)';
|
|
const tick = dark ? '#94a3b8' : '#64748b';
|
|
const sym = {{ current_user.currency_symbol | tojson }};
|
|
const color = {{ provider.color | tojson }};
|
|
const S = {{ series | tojson }};
|
|
|
|
const MODES = {
|
|
amount: { label: 'Amount', data: S.amounts, type: 'bar', fmt: function (v) { return sym + v.toFixed(2); } },
|
|
usage: { label: 'Usage (' + S.unit + ')', data: S.usage, type: 'line', fmt: function (v) { return v.toFixed(1) + ' ' + S.unit; } },
|
|
rate: { label: 'Rate per ' + S.unit, data: S.rates, type: 'line', fmt: function (v) { return sym + v.toFixed(4); } }
|
|
};
|
|
|
|
let chart = null;
|
|
function render(mode) {
|
|
const m = MODES[mode];
|
|
if (chart) chart.destroy();
|
|
chart = new Chart(document.getElementById('histChart'), {
|
|
type: m.type,
|
|
data: {
|
|
labels: S.labels,
|
|
datasets: [{
|
|
label: m.label,
|
|
data: m.data,
|
|
backgroundColor: m.type === 'bar' ? color : color + '22',
|
|
borderColor: color,
|
|
borderWidth: 2,
|
|
borderRadius: 4,
|
|
tension: .3,
|
|
fill: m.type === 'line',
|
|
pointRadius: 3,
|
|
spanGaps: true
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true, maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: { callbacks: { label: function (c) { return m.label + ': ' + m.fmt(c.parsed.y); } } }
|
|
},
|
|
scales: {
|
|
x: { grid: { display: false }, ticks: { font: { size: 11 }, color: tick } },
|
|
y: { grid: { color: grid }, ticks: { font: { size: 11 }, color: tick,
|
|
callback: function (v) { return mode === 'amount' ? sym + v : v; } } }
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
render('amount');
|
|
|
|
document.querySelectorAll('[data-mode]').forEach(function (btn) {
|
|
btn.addEventListener('click', function () {
|
|
document.querySelectorAll('[data-mode]').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
render(btn.dataset.mode);
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
{% endif %}
|
|
{% endblock %}
|