47 lines
1.9 KiB
TypeScript
47 lines
1.9 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { api } from "@/lib/api";
|
|
|
|
export default function Retention() {
|
|
const [d, setD] = useState<any>(null);
|
|
useEffect(() => { api("/admin/subscription-lifecycle").then(setD).catch(() => {}); }, []);
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
<h2 className="text-xl font-bold">Subscription & Retention</h2>
|
|
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
|
<Kpi label="Active" value={d?.active ?? 0} tint="bg-emerald-50 text-emerald-700" />
|
|
<Kpi label="Grace Period" value={d?.grace ?? 0} tint="bg-amber-50 text-amber-700" />
|
|
<Kpi label="Archived" value={d?.archived ?? 0} tint="bg-slate-100 text-slate-600" />
|
|
<Kpi label="Deleted" value={d?.deleted ?? 0} tint="bg-rose-50 text-rose-700" />
|
|
</div>
|
|
|
|
<div className="card p-5">
|
|
<h3 className="font-bold mb-3">Upcoming Expiries (next 30 days)</h3>
|
|
<div className="space-y-2 text-sm">
|
|
{(d?.upcoming_expiries ?? []).map((u: any, i: number) => (
|
|
<div key={i} className="flex justify-between border-b border-slate-100 py-2">
|
|
<Link href={`/admin/organizations/${u.org_id}`} className="text-brand-700 hover:underline">{u.org}</Link>
|
|
<span className="text-slate-500">{new Date(u.renewal).toLocaleDateString()} · {u.days}d left</span>
|
|
</div>
|
|
))}
|
|
{(!d?.upcoming_expiries || d.upcoming_expiries.length === 0) && (
|
|
<p className="text-slate-400">No upcoming expiries.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Kpi({ label, value, tint }: any) {
|
|
return (
|
|
<div className="card p-5">
|
|
<span className={`text-xs font-semibold px-2 py-1 rounded-full ${tint}`}>{label}</span>
|
|
<div className="text-3xl font-extrabold mt-2">{value}</div>
|
|
</div>
|
|
);
|
|
}
|