+ {/* Header */}
+
+
+
+
+
+
+
+
{t("title")}
+ {wsConnected ? (
+
+
+ {t("common:live")}
+
+ ) : null}
+
+
{t("subtitle")}
+
+
+
+
+
+
+
+
+ {error ? (
+
+ ) : null}
+
+ {/* Summary */}
+ {totals && totals.count > 0 ? (
+
+
+
{t("summary.budgets")}
+
{totals.count}
+
+
+
{t("summary.activeSpend")}
+
+ {fmtCostFull(totals.spent)}
+
+
+
+
{t("summary.activeLimit")}
+
+ {fmtCostFull(totals.limit)}
+
+
+
+
{t("summary.overBudget")}
+
0 ? "text-rose-400" : "text-emerald-400"
+ }`}
+ >
+ {totals.over}
+
+
+
+ ) : null}
+
+ {/* Create / edit form */}
+ {showForm ? (
+
+
+
+ {editingId != null ? t("form.editTitle") : t("form.createTitle")}
+
+
+
+
+
+
+
+
+
+
+
+
+
{t("form.thresholds")}
+
+ {THRESHOLD_PRESETS.map((v) => {
+ const active = form.thresholds.includes(v);
+ return (
+
+ );
+ })}
+
+
+
+
+
+ {formError ?
{formError}
: null}
+
+
+
+
+
+
+ ) : null}
+
+ {/* Budget list */}
+ {budgets === null ? (
+
+ {[0, 1].map((i) => (
+
+
+
+ ))}
+
+ ) : budgets.length === 0 ? (
+
+
+ {t("newBudget")}
+
+ }
+ />
+ ) : (
+
+ {budgets.map((b) => {
+ const sc = statusClasses(b.status);
+ const width = Math.min(b.pct, 100);
+ const dimmed = !b.enabled;
+ return (
+
+
+
+
+
+ {b.label || periodLabel(b.period)}
+
+
+ {b.status === "exceeded" ? (
+
+ ) : b.status === "warning" ? (
+
+ ) : (
+
+ )}
+ {t(`status.${b.status}`)}
+
+
+
+ {b.label ? `${periodLabel(b.period)} · ` : ""}
+ {t("periodKey", { key: b.period_key })}
+
+
+
+
+
+
+
+
+
+ {/* Spend vs limit */}
+
+
+
+ {fmtCostFull(b.spent)}
+
+
+ / {fmtCostFull(b.limit_usd)}
+
+
+
+
+ {Math.round(b.pct)}%
+
+ {b.remaining >= 0
+ ? t("remaining", { amount: fmtCostFull(b.remaining) })
+ : t("over", { amount: fmtCostFull(Math.abs(b.remaining)) })}
+
+
+
+
+ {/* Thresholds */}
+
+ {t("alertsAt")}
+ {b.alert_thresholds.map((th) => {
+ const fired = b.fired_thresholds.includes(th);
+ return (
+
+ {th}%
+
+ );
+ })}
+
+
+ );
+ })}
+