Gerhard Scheikl
118 lines
3.6 KiB
TypeScript
118 lines
3.6 KiB
TypeScript
import Link from 'next/link';
|
|
import { computeMetrics } from '@/lib/admin/metrics';
|
|
import { getSupabaseAdmin } from '@/lib/supabase/admin';
|
|
import { formatBytes, formatDate } from '@/lib/format';
|
|
|
|
export const dynamic = 'force-dynamic';
|
|
|
|
type OverQuotaRow = {
|
|
user_id: string;
|
|
subdomain: string;
|
|
bytes_used: number;
|
|
quota_bytes: number;
|
|
};
|
|
|
|
export default async function AdminOverviewPage() {
|
|
const metrics = await computeMetrics();
|
|
const admin = getSupabaseAdmin();
|
|
|
|
// Recent signups (latest 5 users).
|
|
const { data: recentUsersData } = await admin.auth.admin.listUsers({
|
|
page: 1,
|
|
perPage: 5,
|
|
});
|
|
const recentUsers = recentUsersData?.users ?? [];
|
|
|
|
// Over-quota tunnels (compute in memory).
|
|
const { data: tunnelsData } = await admin
|
|
.from('tunnels')
|
|
.select('user_id, subdomain, bytes_used, quota_bytes');
|
|
const overQuota = ((tunnelsData ?? []) as OverQuotaRow[])
|
|
.filter((t) => t.quota_bytes > 0 && t.bytes_used >= t.quota_bytes)
|
|
.slice(0, 5);
|
|
|
|
const kpis: { label: string; value: string }[] = [
|
|
{ label: 'Total users', value: String(metrics.totalUsers) },
|
|
{ label: 'Total tunnels', value: String(metrics.totalTunnels) },
|
|
{ label: 'Active tunnels', value: String(metrics.activeTunnels) },
|
|
{ label: 'Inactive tunnels', value: String(metrics.inactiveTunnels) },
|
|
{ label: 'Over quota', value: String(metrics.overQuota) },
|
|
{ label: 'Active last 24h', value: String(metrics.recentlyActive) },
|
|
{ label: 'Signups (7d)', value: String(metrics.signups7d) },
|
|
{ label: 'Signups (30d)', value: String(metrics.signups30d) },
|
|
{ label: 'Bandwidth used', value: formatBytes(metrics.bytesUsedTotal) },
|
|
{ label: 'Total quota', value: formatBytes(metrics.quotaTotal) },
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<h1>Overview</h1>
|
|
|
|
<div className="kpi-grid">
|
|
{kpis.map((k) => (
|
|
<div className="kpi-card" key={k.label}>
|
|
<div className="kpi-value">{k.value}</div>
|
|
<div className="kpi-label">{k.label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="admin-cols">
|
|
<div className="card">
|
|
<h2>Recent signups</h2>
|
|
{recentUsers.length === 0 ? (
|
|
<p className="muted">No users yet.</p>
|
|
) : (
|
|
<table className="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Email</th>
|
|
<th>Joined</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{recentUsers.map((u) => (
|
|
<tr key={u.id}>
|
|
<td>
|
|
<Link href={`/admin/users/${u.id}`}>
|
|
{u.email ?? u.id}
|
|
</Link>
|
|
</td>
|
|
<td>{formatDate(u.created_at)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
|
|
<div className="card">
|
|
<h2>Over-quota tunnels</h2>
|
|
{overQuota.length === 0 ? (
|
|
<p className="muted">None over quota.</p>
|
|
) : (
|
|
<table className="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Subdomain</th>
|
|
<th>Usage</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{overQuota.map((t) => (
|
|
<tr key={t.user_id}>
|
|
<td>{t.subdomain}</td>
|
|
<td>
|
|
{formatBytes(t.bytes_used)} / {formatBytes(t.quota_bytes)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|