{% extends "base.html" %}
{% block actions %}<form class="d-flex gap-2" method="get"><select class="form-select form-select-sm" name="group_by" onchange="this.form.submit()">{% for g in ['engine','route','key','day'] %}<option {% if group_by==g %}selected{% endif %}>{{ g }}</option>{% endfor %}</select><select class="form-select form-select-sm" name="days" onchange="this.form.submit()">{% for d in [7,30,90] %}<option value="{{d}}" {% if days==d %}selected{% endif %}>{{ d }} d</option>{% endfor %}</select></form>{% endblock %}
{% block content %}
<div class="alert alert-light border py-2 small"><i class="bi bi-info-circle me-1"></i>{{ _('Costs are estimates') }} - computed from the price table below; local engines cost 0.</div>
<div class="row g-3 stagger"><div class="col-12 col-md-4"><div class="card kpi"><div class="card-body"><div class="v">${{ '%.4f'|format(summary.cost_cents/100) }}</div><div class="l">{{ _('estimated spend') }}</div></div></div></div><div class="col-6 col-md-4"><div class="card kpi"><div class="card-body"><div class="v">{{ summary.pages }}</div><div class="l">{{ _('pages') }}</div></div></div></div><div class="col-6 col-md-4"><div class="card kpi"><div class="card-body"><div class="v">${{ '%.3f'|format(summary.month_cost_cents/100) }}</div><div class="l">{{ _('month to date') }}</div></div></div></div></div>
<div class="row g-3 mt-1">
<div class="col-12 col-xl-5"><div class="card h-100"><div class="card-header"><i class="bi bi-graph-up"></i>{{ _('estimated spend') }}</div><div class="card-body"><div class="chart"><canvas id="c-spend"></canvas></div></div></div></div>
<div class="col-12 col-xl-7"><div class="card h-100"><div class="card-header"><i class="bi bi-table"></i>{{ group_by }}</div><div class="table-responsive"><table class="table table-hover mb-0"><thead><tr><th>{{ group_by }}</th><th class="text-end">{{ _('runs') }}</th><th class="text-end">ok</th><th class="text-end">{{ _('pages') }}</th><th class="text-end d-none d-md-table-cell">{{ _('chars') }}</th><th class="text-end d-none d-md-table-cell">{{ _('avg ms') }}</th><th class="text-end">{{ _('cost') }}</th></tr></thead><tbody>
{% for r in rows %}<tr><td>{{ r.group }}</td><td class="text-end num">{{ r.runs }}</td><td class="text-end num">{{ r.successes }}</td><td class="text-end num">{{ r.pages }}</td><td class="text-end num d-none d-md-table-cell">{{ r.chars }}</td><td class="text-end num d-none d-md-table-cell">{{ r.avg_ms }}</td><td class="text-end num">${{ '%.4f'|format(r.cost_cents/100) }}</td></tr>{% else %}<tr><td colspan="7" class="text-muted">{{ _('Nothing here yet.') }}</td></tr>{% endfor %}</tbody></table></div>
<div class="card-footer bg-transparent"><a class="btn btn-outline-secondary btn-sm" href="/v1/usage?group_by={{ group_by }}" download="usage.json"><i class="bi bi-download me-1"></i>{{ _('Export JSON') }}</a></div></div></div></div>
<div class="card mt-3"><div class="card-header"><i class="bi bi-currency-dollar"></i>Price table (API engines) · {{ _('Estimates only') }}</div><div class="table-responsive"><table class="table mb-0 align-middle"><thead><tr><th>{{ _('engine') }}</th><th>{{ _('cost model') }}</th><th>{{ _('unit price (¢)') }}</th><th></th></tr></thead><tbody>
{% for e in engines %}<tr><td>{{ e.name }}</td><td><select class="form-select form-select-sm cm" data-id="{{ e.id }}">{% for m in ['free','per_page','per_token','per_request'] %}<option {% if e.cost_model==m %}selected{% endif %}>{{ m }}</option>{% endfor %}</select></td><td><input class="form-control form-control-sm up num" data-id="{{ e.id }}" type="number" step="0.00001" value="{{ e.unit_price }}"></td><td><button class="btn btn-outline-secondary btn-sm save" data-id="{{ e.id }}">{{ _('Save') }}</button></td></tr>{% endfor %}</tbody></table></div></div>
{% endblock %}
{% block scripts %}<script>
document.addEventListener("DOMContentLoaded", () => { const {api, toast, chart} = OcrRoute; const daily = {{ daily|tojson }};
chart(document.getElementById("c-spend"), "line", daily.map(d => d.day.slice(5)), [{label: "¢", data: daily.map(d => +d.cost_cents.toFixed(4))}]);
document.querySelectorAll(".save").forEach(b => b.onclick = async () => { const id = b.dataset.id; try { await api("PATCH", `/v1/engines/${id}`, {cost_model: document.querySelector(`.cm[data-id="${id}"]`).value, unit_price: parseFloat(document.querySelector(`.up[data-id="${id}"]`).value || 0)}); toast("Saved"); } catch (e) { toast(e.message, true); } }); });
</script>{% endblock %}