ewoooc/templates/admin/budget.html

{% extends "base.html" %}

{% block title %}預算控管{% endblock %}

{% block content %}
<div class="container-fluid mt-3">
  <h2 class="mb-3"><i class="fas fa-wallet me-2"></i>預算控管
    <small class="text-muted">ai_call_budgets × 當月實際支出即時對比</small>
  </h2>

  {% if error %}<div class="alert alert-warning"><strong><i class="fas fa-exclamation-triangle me-1"></i></strong> {{ error }}</div>{% endif %}

  <p class="text-muted small">
    依 ADR-028 預算 + Phase 20 成本節流：每小時 cron 檢查當月支出，
    線性外推月底成本超 110% → 自動節流（claude→gemini fallback）。
    手動編輯預算後立即生效（不需重啟）。
  </p>

  <table class="table table-hover">
    <thead class="table-light">
      <tr>
        <th>週期</th><th>供應商</th>
        <th class="text-end">已花費 (USD)</th>
        <th>預算 (USD)</th><th>警示閾值 %</th>
        <th class="text-end">使用率</th><th>狀態</th>
        <th>更新時間</th><th>動作</th>
      </tr>
    </thead>
    <tbody>
      {% for r in rows %}
        <tr {% if r.throttled %}class="table-danger"{% elif r.ratio >= 0.8 %}class="table-warning"{% endif %}>
          <td><span class="badge bg-secondary">{{ r.period }}</span></td>
          <td><code>{{ r.provider }}</code></td>
          <td class="text-end">${{ "%.2f"|format(r.spent) }}</td>
          <td>
            <input type="number" step="0.01" min="0.01" value="{{ "%.2f"|format(r.budget_usd) }}"
                   class="form-control form-control-sm budget-input"
                   data-budget-id="{{ r.id }}" style="width: 110px;">
          </td>
          <td>
            <input type="number" min="1" max="100" value="{{ r.alert_pct }}"
                   class="form-control form-control-sm alert-input"
                   data-budget-id="{{ r.id }}" style="width: 80px;">
          </td>
          <td class="text-end">
            <strong class="{% if r.ratio >= 1.10 %}text-danger{% elif r.ratio >= 0.8 %}text-warning{% else %}text-success{% endif %}">
              {{ "%.0f"|format(r.ratio * 100) }}%
            </strong>
          </td>
          <td>
            {% if r.throttled %}
              <span class="badge bg-danger"><i class="fas fa-exclamation-triangle me-1"></i>已節流</span>
            {% elif r.ratio >= 0.8 %}
              <span class="badge bg-warning"><i class="fas fa-exclamation me-1"></i>接近上限</span>
            {% else %}
              <span class="badge bg-success"><i class="fas fa-check me-1"></i>正常</span>
            {% endif %}
          </td>
          <td><small>{{ r.updated_at }}</small></td>
          <td>
            <button class="btn btn-primary btn-sm save-budget-btn"
                    data-budget-id="{{ r.id }}" onclick="saveBudget({{ r.id }})">
              <i class="fas fa-save me-1"></i>儲存
            </button>
          </td>
        </tr>
      {% else %}
        <tr><td colspan="9" class="text-center text-muted">無預算資料（需先跑 migrations/025）</td></tr>
      {% endfor %}
    </tbody>
  </table>

  <p class="text-muted mt-3"><small>
    <i class="fas fa-robot me-1"></i>Operation Ollama-First v5.0 / Phase 29 — 預算控管
  </small></p>
</div>

<script>
async function saveBudget(id) {
  const budgetInput = document.querySelector(`.budget-input[data-budget-id="${id}"]`);
  const alertInput = document.querySelector(`.alert-input[data-budget-id="${id}"]`);
  const btn = document.querySelector(`.save-budget-btn[data-budget-id="${id}"]`);
  btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
  try {
    const r = await fetch(`/observability/budget/update/${id}`, {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        budget_usd: parseFloat(budgetInput.value),
        alert_pct: parseInt(alertInput.value),
      }),
    });
    const d = await r.json();
    if (d.ok) {
      btn.innerHTML = '<i class="fas fa-check"></i> 已儲存';
      setTimeout(() => { btn.innerHTML = '<i class="fas fa-save me-1"></i>儲存'; btn.disabled = false; }, 1500);
    } else {
      alert('更新失敗：' + (d.error || 'unknown'));
      btn.disabled = false; btn.innerHTML = '<i class="fas fa-save me-1"></i>儲存';
    }
  } catch (e) {
    alert('Error：' + e);
    btn.disabled = false; btn.innerHTML = '<i class="fas fa-save me-1"></i>儲存';
  }
}
</script>
{% endblock %}