Phase5: Automate bill creation
All checks were successful
Build and Push / build (push) Successful in 1m43s
All checks were successful
Build and Push / build (push) Successful in 1m43s
This commit is contained in:
229
src/components/admin/cron/cron-controls.tsx
Normal file
229
src/components/admin/cron/cron-controls.tsx
Normal file
@@ -0,0 +1,229 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useTranslations, useFormatter } from "next-intl";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import type { CronRun } from "@/types";
|
||||
|
||||
interface Props {
|
||||
initialRecent: CronRun[];
|
||||
initialLastSuccess: {
|
||||
monthlyIssue: CronRun | null;
|
||||
reminders: CronRun | null;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Admin cron dashboard. Server pre-loads `initialRecent` and
|
||||
* `initialLastSuccess`; "Run now" clicks POST to the admin
|
||||
* endpoints, then re-fetch the history via GET /api/admin/cron/runs.
|
||||
*
|
||||
* The trigger buttons disable while busy and surface the resulting
|
||||
* counters inline so the admin gets immediate feedback without
|
||||
* needing to scroll to the history table.
|
||||
*/
|
||||
export function CronControls({ initialRecent, initialLastSuccess }: Props) {
|
||||
const t = useTranslations("adminCron");
|
||||
const fmt = useFormatter();
|
||||
const [recent, setRecent] = useState(initialRecent);
|
||||
const [lastSuccess, setLastSuccess] = useState(initialLastSuccess);
|
||||
const [busy, setBusy] = useState<null | "issue" | "reminders">(null);
|
||||
const [flash, setFlash] = useState<null | {
|
||||
kind: "issue" | "reminders";
|
||||
ok: boolean;
|
||||
summary: string;
|
||||
}>(null);
|
||||
|
||||
const refresh = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/admin/cron/runs");
|
||||
if (!res.ok) return;
|
||||
const data = await res.json();
|
||||
setRecent(data.recent);
|
||||
setLastSuccess(data.lastSuccess);
|
||||
} catch {
|
||||
// swallow — refresh is opportunistic
|
||||
}
|
||||
};
|
||||
|
||||
const triggerIssue = async () => {
|
||||
setBusy("issue");
|
||||
setFlash(null);
|
||||
try {
|
||||
const res = await fetch("/api/admin/cron/issue-monthly", {
|
||||
method: "POST",
|
||||
});
|
||||
const j = await res.json();
|
||||
if (!res.ok) {
|
||||
setFlash({
|
||||
kind: "issue",
|
||||
ok: false,
|
||||
summary: j.error ?? `HTTP ${res.status}`,
|
||||
});
|
||||
} else {
|
||||
setFlash({
|
||||
kind: "issue",
|
||||
ok: true,
|
||||
summary: t("flashIssueOk", {
|
||||
success: j.successCount,
|
||||
skipped: j.skippedCount,
|
||||
failure: j.failureCount,
|
||||
}),
|
||||
});
|
||||
}
|
||||
await refresh();
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
};
|
||||
|
||||
const triggerReminders = async () => {
|
||||
setBusy("reminders");
|
||||
setFlash(null);
|
||||
try {
|
||||
const res = await fetch("/api/admin/cron/send-reminders", {
|
||||
method: "POST",
|
||||
});
|
||||
const j = await res.json();
|
||||
if (!res.ok) {
|
||||
setFlash({
|
||||
kind: "reminders",
|
||||
ok: false,
|
||||
summary: j.error ?? `HTTP ${res.status}`,
|
||||
});
|
||||
} else {
|
||||
setFlash({
|
||||
kind: "reminders",
|
||||
ok: true,
|
||||
summary: t("flashRemindersOk", {
|
||||
success: j.successCount,
|
||||
skipped: j.skippedCount,
|
||||
failure: j.failureCount,
|
||||
}),
|
||||
});
|
||||
}
|
||||
await refresh();
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
};
|
||||
|
||||
const fmtRelative = (iso: string | null) => {
|
||||
if (!iso) return t("never");
|
||||
return fmt.dateTime(new Date(iso), {
|
||||
dateStyle: "medium",
|
||||
timeStyle: "short",
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<section className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<h2 className="text-xs uppercase tracking-wider text-text-muted mb-2">
|
||||
{t("monthlyIssue")}
|
||||
</h2>
|
||||
<p className="text-xs text-text-secondary mb-1">
|
||||
{t("scheduleIssueLabel")}: <span className="font-mono">{t("scheduleIssueValue")}</span>
|
||||
</p>
|
||||
<p className="text-xs text-text-secondary mb-3">
|
||||
{t("lastSuccess")}: <span className="font-mono">{fmtRelative(lastSuccess.monthlyIssue?.startedAt ?? null)}</span>
|
||||
</p>
|
||||
<button
|
||||
onClick={triggerIssue}
|
||||
disabled={busy !== null}
|
||||
className="px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
{busy === "issue" ? t("running") : t("runIssueNow")}
|
||||
</button>
|
||||
</Card>
|
||||
<Card>
|
||||
<h2 className="text-xs uppercase tracking-wider text-text-muted mb-2">
|
||||
{t("reminders")}
|
||||
</h2>
|
||||
<p className="text-xs text-text-secondary mb-1">
|
||||
{t("scheduleReminderLabel")}: <span className="font-mono">{t("scheduleReminderValue")}</span>
|
||||
</p>
|
||||
<p className="text-xs text-text-secondary mb-3">
|
||||
{t("lastSuccess")}: <span className="font-mono">{fmtRelative(lastSuccess.reminders?.startedAt ?? null)}</span>
|
||||
</p>
|
||||
<button
|
||||
onClick={triggerReminders}
|
||||
disabled={busy !== null}
|
||||
className="px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
{busy === "reminders" ? t("running") : t("runRemindersNow")}
|
||||
</button>
|
||||
</Card>
|
||||
</section>
|
||||
|
||||
{flash && (
|
||||
<div
|
||||
className={`p-3 rounded-md border text-sm ${
|
||||
flash.ok
|
||||
? "border-success bg-success/10 text-success"
|
||||
: "border-error bg-error/10 text-error"
|
||||
}`}
|
||||
>
|
||||
{flash.summary}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<section>
|
||||
<h2 className="text-xs uppercase tracking-wider text-text-muted mb-3">
|
||||
{t("recentRuns")}
|
||||
</h2>
|
||||
<Card>
|
||||
{recent.length === 0 ? (
|
||||
<p className="text-sm text-text-muted italic py-4">
|
||||
{t("noRunsYet")}
|
||||
</p>
|
||||
) : (
|
||||
<table className="w-full text-sm">
|
||||
<thead className="text-xs text-text-muted text-left">
|
||||
<tr>
|
||||
<th className="pb-2">{t("startedCol")}</th>
|
||||
<th className="pb-2">{t("kindCol")}</th>
|
||||
<th className="pb-2">{t("triggeredByCol")}</th>
|
||||
<th className="pb-2 text-right">{t("okCol")}</th>
|
||||
<th className="pb-2 text-right">{t("skipCol")}</th>
|
||||
<th className="pb-2 text-right">{t("failCol")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{recent.map((r) => (
|
||||
<tr key={r.id} className="border-t border-border align-top">
|
||||
<td className="py-2 text-xs font-mono">
|
||||
{fmtRelative(r.startedAt)}
|
||||
</td>
|
||||
<td className="py-2 text-xs">
|
||||
{t(`kind.${r.runKind}` as any)}
|
||||
</td>
|
||||
<td className="py-2 text-xs text-text-secondary font-mono">
|
||||
{r.triggeredBy === "cron"
|
||||
? t("triggeredByCron")
|
||||
: r.triggeredBy.slice(0, 8) + "…"}
|
||||
</td>
|
||||
<td className="py-2 text-right font-mono text-xs text-success">
|
||||
{r.successCount}
|
||||
</td>
|
||||
<td className="py-2 text-right font-mono text-xs text-text-secondary">
|
||||
{r.skippedCount}
|
||||
</td>
|
||||
<td
|
||||
className={`py-2 text-right font-mono text-xs ${
|
||||
r.failureCount > 0 ? "text-error" : "text-text-muted"
|
||||
}`}
|
||||
>
|
||||
{r.failureCount}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</Card>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user