feat: M1 admin console — all 10 remaining pages + signal/quality/ops infrastructure
Admin console (issues #63–72): - Event stream viewer: live-tail ring buffer (500 events) with subject/user filters - Feature store browser: per-user feature vector history from ml/serving - Model registry panel: MLflow embed at /admin/models - Experiment dashboard: LinUCB per-user stats (pulls, reward, θ) + bandit reset - Recommendation log: per-tip explainability (policy, score, features, latency) - Reward analytics: daily reaction breakdown + per-policy compare - Data quality widget: missing-feature rate, stale-token rate, daily completeness - Ops actions: replay-signal, policy enable/disable; user actions link to Users page - SQL runner: read-only SELECT runner with saved queries - Health rollup: fan-out to api/ml/sqlite/event-bus with auto-refresh Backend: - tip_scores table: logs features+policy+score+latency at every scoring call (#67) - saved_queries table: per-admin saved SQL (#71) - Event bus: 500-event ring buffer + tail() API (#63) - Admin routes: /events, /tips, /reward-analytics, /data-quality, /health, /policies, /replay-signal, /sql, /saved-queries endpoints - /api/ml/* admin-gated proxy to ml/serving (#64, #66) - Shadow-policy registry in recommender (#56) ML serving: - /reset/{user_id}: clear bandit state + feature history (#66) - /stats/{user_id}: pulls, cumulative reward, estimated mean, θ (#66) - /features/{user_id}: last 100 feature vectors logged at scoring time (#64) - Meta (pulls, rewards) persisted alongside A/b matrices Web: - Tip action sheet adds Helpful / Not helpful buttons (#62) - TipFeedback type extended with helpful/not_helpful actions - Rewards mapped: helpful=+0.5, not_helpful=−0.5 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
58
apps/admin/src/components/AdminShell.tsx
Normal file
58
apps/admin/src/components/AdminShell.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
const NAV = [
|
||||
{ href: '/', label: 'Overview' },
|
||||
{ href: '/users', label: 'Users' },
|
||||
{ href: '/events', label: 'Events' },
|
||||
{ href: '/features', label: 'Features' },
|
||||
{ href: '/tips', label: 'Rec log' },
|
||||
{ href: '/reward-analytics', label: 'Rewards' },
|
||||
{ href: '/experiments', label: 'Experiments' },
|
||||
{ href: '/models', label: 'Models' },
|
||||
{ href: '/data-quality', label: 'Data quality' },
|
||||
{ href: '/ops', label: 'Ops' },
|
||||
{ href: '/sql', label: 'SQL runner' },
|
||||
{ href: '/health', label: 'Health' },
|
||||
{ href: '/audit', label: 'Audit log' },
|
||||
{ href: '/docs', label: 'Docs' },
|
||||
];
|
||||
|
||||
export function AdminShell({ children }: { children: React.ReactNode }) {
|
||||
const pathname = usePathname();
|
||||
return (
|
||||
<div className="flex min-h-screen">
|
||||
{/* Sidebar */}
|
||||
<aside className="w-52 flex-shrink-0 border-r border-gray-800 bg-gray-950 flex flex-col">
|
||||
<div className="px-5 py-4 border-b border-gray-800">
|
||||
<span className="text-lg font-bold tracking-tight">oO</span>
|
||||
<span className="ml-2 text-xs text-gray-500 font-medium uppercase tracking-widest">
|
||||
Admin
|
||||
</span>
|
||||
</div>
|
||||
<nav className="flex-1 px-2 py-3 space-y-0.5">
|
||||
{NAV.map(({ href, label }) => {
|
||||
const active = href === '/' ? pathname === '/' : pathname.startsWith(href);
|
||||
return (
|
||||
<Link
|
||||
key={href}
|
||||
href={href}
|
||||
className={`flex items-center px-3 py-2 rounded text-sm transition-colors ${
|
||||
active
|
||||
? 'bg-gray-800 text-white font-medium'
|
||||
: 'text-gray-400 hover:text-white hover:bg-gray-900'
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</aside>
|
||||
{/* Main content */}
|
||||
<main className="flex-1 overflow-auto p-6">{children}</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
112
apps/admin/src/components/AuditLog.tsx
Normal file
112
apps/admin/src/components/AuditLog.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { getAuditLog, type AuditAction } from '@/lib/api';
|
||||
|
||||
const PAGE_SIZE = 50;
|
||||
|
||||
export function AuditLog() {
|
||||
const [rows, setRows] = useState<AuditAction[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [offset, setOffset] = useState(0);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
getAuditLog(PAGE_SIZE, offset)
|
||||
.then(({ actions, total }) => {
|
||||
setRows(actions);
|
||||
setTotal(total);
|
||||
})
|
||||
.catch((e) => setError(String(e.message)))
|
||||
.finally(() => setLoading(false));
|
||||
}, [offset]);
|
||||
|
||||
if (error) return <p className="text-red-400 text-sm">Error: {error}</p>;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-xl font-semibold">Audit log</h1>
|
||||
<span className="text-sm text-gray-500">{total} entries</span>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-gray-800 overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-gray-900 border-b border-gray-800">
|
||||
<tr>
|
||||
{['Time', 'Admin', 'Action', 'Target'].map((h) => (
|
||||
<th
|
||||
key={h}
|
||||
className="text-left px-4 py-2.5 text-xs text-gray-500 font-medium uppercase tracking-wide"
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-800">
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td colSpan={4} className="px-4 py-6 text-center text-gray-500">
|
||||
Loading…
|
||||
</td>
|
||||
</tr>
|
||||
) : rows.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={4} className="px-4 py-6 text-center text-gray-500">
|
||||
No actions logged yet.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
rows.map((a) => (
|
||||
<tr key={a.id} className="hover:bg-gray-900 transition-colors">
|
||||
<td className="px-4 py-2.5 text-xs tabular-nums text-gray-400">
|
||||
{a.createdAt.slice(0, 19).replace('T', ' ')}
|
||||
</td>
|
||||
<td className="px-4 py-2.5 font-mono text-xs text-gray-300 truncate max-w-[8rem]">
|
||||
{a.adminId.slice(0, 8)}…
|
||||
</td>
|
||||
<td className="px-4 py-2.5">
|
||||
<span className="px-1.5 py-0.5 rounded bg-gray-800 text-xs text-gray-200 font-mono">
|
||||
{a.action}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-xs text-gray-400">
|
||||
{a.targetType && (
|
||||
<span className="text-gray-500">{a.targetType}: </span>
|
||||
)}
|
||||
<span className="font-mono">{a.targetId?.slice(0, 12) ?? '—'}</span>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{total > PAGE_SIZE && (
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<button
|
||||
disabled={offset === 0}
|
||||
onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}
|
||||
className="px-3 py-1.5 rounded border border-gray-700 disabled:opacity-30 hover:border-gray-500 transition-colors"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span className="text-gray-500">
|
||||
{offset + 1}–{Math.min(offset + PAGE_SIZE, total)} of {total}
|
||||
</span>
|
||||
<button
|
||||
disabled={offset + PAGE_SIZE >= total}
|
||||
onClick={() => setOffset(offset + PAGE_SIZE)}
|
||||
className="px-3 py-1.5 rounded border border-gray-700 disabled:opacity-30 hover:border-gray-500 transition-colors"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
165
apps/admin/src/components/OverviewDashboard.tsx
Normal file
165
apps/admin/src/components/OverviewDashboard.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { getStats, type AdminStats } from '@/lib/api';
|
||||
|
||||
function KpiCard({
|
||||
title,
|
||||
value,
|
||||
sub,
|
||||
}: {
|
||||
title: string;
|
||||
value: string | number;
|
||||
sub?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-lg border border-gray-800 bg-gray-900 px-5 py-4 space-y-1">
|
||||
<p className="text-xs text-gray-500 uppercase tracking-widest font-medium">{title}</p>
|
||||
<p className="text-3xl font-bold tabular-nums">{value}</p>
|
||||
{sub && <p className="text-xs text-gray-500">{sub}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ReactionBar({ reactions }: { reactions: Record<string, number> }) {
|
||||
const total = Object.values(reactions).reduce((a, b) => a + b, 0);
|
||||
if (total === 0) return <p className="text-sm text-gray-500">No reactions yet.</p>;
|
||||
|
||||
const COLORS: Record<string, string> = {
|
||||
done: 'bg-emerald-500',
|
||||
snooze: 'bg-yellow-400',
|
||||
dismiss: 'bg-red-500',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{Object.entries(reactions).map(([action, count]) => (
|
||||
<div key={action} className="flex items-center gap-3">
|
||||
<span className="w-16 text-xs text-gray-400 capitalize">{action}</span>
|
||||
<div className="flex-1 bg-gray-800 rounded-full h-2">
|
||||
<div
|
||||
className={`${COLORS[action] ?? 'bg-gray-500'} h-2 rounded-full transition-all`}
|
||||
style={{ width: `${((count / total) * 100).toFixed(1)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="w-8 text-right text-xs tabular-nums text-gray-400">{count}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function OverviewDashboard() {
|
||||
const [stats, setStats] = useState<AdminStats | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
getStats()
|
||||
.then(setStats)
|
||||
.catch((e) => setError(String(e.message)));
|
||||
}, []);
|
||||
|
||||
if (error) {
|
||||
return <p className="text-red-400 text-sm">Failed to load stats: {error}</p>;
|
||||
}
|
||||
|
||||
const activationPct =
|
||||
stats && stats.totalUsers > 0
|
||||
? ((stats.activatedUsers / stats.totalUsers) * 100).toFixed(1)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold">Overview</h1>
|
||||
<p className="text-sm text-gray-500 mt-0.5">Last 7 days unless noted</p>
|
||||
</div>
|
||||
|
||||
{/* KPI grid */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<KpiCard title="DAU" value={stats?.dau ?? '—'} sub="unique users today" />
|
||||
<KpiCard title="WAU" value={stats?.wau ?? '—'} sub="unique users last 7 d" />
|
||||
<KpiCard
|
||||
title="Tips served"
|
||||
value={stats?.tipsServedLast7d ?? '—'}
|
||||
sub="last 7 days"
|
||||
/>
|
||||
<KpiCard
|
||||
title="Activation"
|
||||
value={activationPct != null ? `${activationPct}%` : '—'}
|
||||
sub={
|
||||
stats
|
||||
? `${stats.activatedUsers} of ${stats.totalUsers} users`
|
||||
: 'users who saw ≥1 tip'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Reactions */}
|
||||
<div className="rounded-lg border border-gray-800 bg-gray-900 px-5 py-4 max-w-sm">
|
||||
<p className="text-xs text-gray-500 uppercase tracking-widest font-medium mb-3">
|
||||
Reactions last 7 days
|
||||
</p>
|
||||
{stats ? (
|
||||
<ReactionBar reactions={stats.reactionsLast7d} />
|
||||
) : (
|
||||
<p className="text-sm text-gray-500">Loading…</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Activation funnel */}
|
||||
<div className="rounded-lg border border-gray-800 bg-gray-900 px-5 py-4 max-w-sm">
|
||||
<p className="text-xs text-gray-500 uppercase tracking-widest font-medium mb-3">
|
||||
Activation funnel
|
||||
</p>
|
||||
{stats ? (
|
||||
<div className="space-y-2 text-sm">
|
||||
<FunnelRow label="Total users" value={stats.totalUsers} max={stats.totalUsers} />
|
||||
<FunnelRow
|
||||
label="Saw ≥1 tip"
|
||||
value={stats.activatedUsers}
|
||||
max={stats.totalUsers}
|
||||
/>
|
||||
<FunnelRow
|
||||
label="Reacted to tip"
|
||||
value={Object.values(stats.reactionsLast7d).reduce((a, b) => a + b, 0)}
|
||||
max={stats.tipsServedLast7d}
|
||||
dimMax
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-gray-500">Loading…</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FunnelRow({
|
||||
label,
|
||||
value,
|
||||
max,
|
||||
dimMax,
|
||||
}: {
|
||||
label: string;
|
||||
value: number;
|
||||
max: number;
|
||||
dimMax?: boolean;
|
||||
}) {
|
||||
const pct = max > 0 ? (value / max) * 100 : 0;
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="w-32 text-gray-400 text-xs">{label}</span>
|
||||
<div className="flex-1 bg-gray-800 rounded-full h-1.5">
|
||||
<div
|
||||
className="bg-indigo-500 h-1.5 rounded-full transition-all"
|
||||
style={{ width: `${pct.toFixed(1)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="w-8 text-right text-xs tabular-nums text-gray-300">{value}</span>
|
||||
{!dimMax && max > 0 && (
|
||||
<span className="text-xs text-gray-600 tabular-nums">{pct.toFixed(0)}%</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
159
apps/admin/src/components/UserDetail.tsx
Normal file
159
apps/admin/src/components/UserDetail.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { getUserDetail, revokeIntegration, resetBandit, type AdminUserDetail } from '@/lib/api';
|
||||
|
||||
export function UserDetail({ userId }: { userId: string }) {
|
||||
const [data, setData] = useState<AdminUserDetail | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState<string | null>(null); // which action is running
|
||||
|
||||
useEffect(() => {
|
||||
getUserDetail(userId)
|
||||
.then(setData)
|
||||
.catch((e) => setError(String(e.message)));
|
||||
}, [userId]);
|
||||
|
||||
async function handleRevoke(provider: string) {
|
||||
if (!confirm(`Revoke ${provider} for this user?`)) return;
|
||||
setBusy(`revoke:${provider}`);
|
||||
try {
|
||||
await revokeIntegration(userId, provider);
|
||||
setData((d) =>
|
||||
d
|
||||
? { ...d, integrations: d.integrations.filter((i) => i.provider !== provider) }
|
||||
: d,
|
||||
);
|
||||
} catch (e: unknown) {
|
||||
alert(`Failed: ${(e as Error).message}`);
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleResetBandit() {
|
||||
if (!confirm("Reset this user's LinUCB model? Their personalization will start over.")) return;
|
||||
setBusy('bandit');
|
||||
try {
|
||||
await resetBandit(userId);
|
||||
alert('Bandit reset.');
|
||||
} catch (e: unknown) {
|
||||
alert(`Failed: ${(e as Error).message}`);
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
}
|
||||
|
||||
if (error) return <p className="text-red-400 text-sm">Error: {error}</p>;
|
||||
if (!data) return <p className="text-gray-500 text-sm">Loading…</p>;
|
||||
|
||||
const { user, integrations, tipsServed, lastTipAt, recentFeedback } = data;
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-2xl">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold">{user.name ?? user.email}</h1>
|
||||
<p className="text-sm text-gray-400 mt-0.5">{user.email}</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleResetBandit}
|
||||
disabled={busy === 'bandit'}
|
||||
className="px-3 py-1.5 text-xs rounded border border-gray-700 hover:border-red-600 hover:text-red-400 transition-colors disabled:opacity-40"
|
||||
>
|
||||
{busy === 'bandit' ? 'Resetting…' : 'Reset bandit'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Identity */}
|
||||
<Section title="Identity">
|
||||
<Row label="ID" value={user.id} mono />
|
||||
<Row label="Role" value={user.role} />
|
||||
<Row label="Consent" value={user.consentGiven ? `yes (${user.consentAt?.slice(0, 10)})` : 'no'} />
|
||||
<Row label="Joined" value={user.createdAt.slice(0, 10)} />
|
||||
{user.deletedAt && <Row label="Deleted" value={user.deletedAt.slice(0, 10)} />}
|
||||
</Section>
|
||||
|
||||
{/* Integrations */}
|
||||
<Section title="Integrations">
|
||||
{integrations.length === 0 ? (
|
||||
<p className="text-sm text-gray-500">No integrations connected.</p>
|
||||
) : (
|
||||
integrations.map((i) => (
|
||||
<div key={i.provider} className="flex items-center justify-between py-1">
|
||||
<div>
|
||||
<span className="text-sm capitalize">{i.provider}</span>
|
||||
<span className="ml-2 text-xs text-gray-500">
|
||||
connected {i.connectedAt.slice(0, 10)}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleRevoke(i.provider)}
|
||||
disabled={busy === `revoke:${i.provider}`}
|
||||
className="text-xs text-red-500 hover:text-red-400 transition-colors disabled:opacity-40"
|
||||
>
|
||||
{busy === `revoke:${i.provider}` ? 'Revoking…' : 'Revoke'}
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</Section>
|
||||
|
||||
{/* Tip stats */}
|
||||
<Section title="Tip activity">
|
||||
<Row label="Tips served (all time)" value={String(tipsServed)} />
|
||||
<Row label="Last tip" value={lastTipAt?.slice(0, 19).replace('T', ' ') ?? '—'} />
|
||||
</Section>
|
||||
|
||||
{/* Feedback history */}
|
||||
<Section title="Recent feedback">
|
||||
{recentFeedback.length === 0 ? (
|
||||
<p className="text-sm text-gray-500">No feedback recorded.</p>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{recentFeedback.map((f) => (
|
||||
<div key={f.id} className="flex items-center gap-4 text-sm">
|
||||
<span
|
||||
className={`w-16 text-xs font-medium ${
|
||||
f.action === 'done'
|
||||
? 'text-emerald-400'
|
||||
: f.action === 'snooze'
|
||||
? 'text-yellow-400'
|
||||
: 'text-red-400'
|
||||
}`}
|
||||
>
|
||||
{f.action}
|
||||
</span>
|
||||
<span className="text-gray-500 text-xs tabular-nums">
|
||||
{f.createdAt.slice(0, 19).replace('T', ' ')}
|
||||
</span>
|
||||
<span className="text-gray-600 text-xs font-mono truncate">{f.tipId}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Section({ title, children }: { title: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="rounded-lg border border-gray-800 bg-gray-900 px-5 py-4 space-y-2">
|
||||
<p className="text-xs text-gray-500 uppercase tracking-widest font-medium mb-3">{title}</p>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Row({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
|
||||
return (
|
||||
<div className="flex items-baseline gap-3 text-sm">
|
||||
<span className="w-36 flex-shrink-0 text-gray-500">{label}</span>
|
||||
<span className={mono ? 'font-mono text-xs text-gray-300' : 'text-gray-200'}>{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
134
apps/admin/src/components/UsersTable.tsx
Normal file
134
apps/admin/src/components/UsersTable.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { getUsers, type AdminUser } from '@/lib/api';
|
||||
|
||||
const PAGE_SIZE = 50;
|
||||
|
||||
export function UsersTable() {
|
||||
const [users, setUsers] = useState<AdminUser[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [offset, setOffset] = useState(0);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
getUsers(PAGE_SIZE, offset)
|
||||
.then(({ users, total }) => {
|
||||
setUsers(users);
|
||||
setTotal(total);
|
||||
})
|
||||
.catch((e) => setError(String(e.message)))
|
||||
.finally(() => setLoading(false));
|
||||
}, [offset]);
|
||||
|
||||
if (error) return <p className="text-red-400 text-sm">Error: {error}</p>;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-xl font-semibold">Users</h1>
|
||||
<span className="text-sm text-gray-500">{total} total</span>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-gray-800 overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-gray-900 border-b border-gray-800">
|
||||
<tr>
|
||||
{['Email', 'Name', 'Role', 'Consent', 'Joined', 'Status'].map((h) => (
|
||||
<th
|
||||
key={h}
|
||||
className="text-left px-4 py-2.5 text-xs text-gray-500 font-medium uppercase tracking-wide"
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-800">
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-4 py-6 text-center text-gray-500">
|
||||
Loading…
|
||||
</td>
|
||||
</tr>
|
||||
) : users.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-4 py-6 text-center text-gray-500">
|
||||
No users yet.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
users.map((u) => (
|
||||
<tr
|
||||
key={u.id}
|
||||
className="hover:bg-gray-900 transition-colors cursor-pointer"
|
||||
>
|
||||
<td className="px-4 py-2.5">
|
||||
<Link href={`/users/${u.id}`} className="hover:underline text-indigo-400">
|
||||
{u.email}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-gray-300">{u.name ?? '—'}</td>
|
||||
<td className="px-4 py-2.5">
|
||||
<span
|
||||
className={`px-1.5 py-0.5 rounded text-xs font-medium ${
|
||||
u.role === 'admin'
|
||||
? 'bg-indigo-900 text-indigo-300'
|
||||
: 'bg-gray-800 text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{u.role}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2.5">
|
||||
{u.consentGiven ? (
|
||||
<span className="text-emerald-400 text-xs">yes</span>
|
||||
) : (
|
||||
<span className="text-gray-600 text-xs">no</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-gray-400 text-xs tabular-nums">
|
||||
{u.createdAt.slice(0, 10)}
|
||||
</td>
|
||||
<td className="px-4 py-2.5">
|
||||
{u.deletedAt ? (
|
||||
<span className="text-red-500 text-xs">deleted</span>
|
||||
) : (
|
||||
<span className="text-emerald-500 text-xs">active</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{total > PAGE_SIZE && (
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<button
|
||||
disabled={offset === 0}
|
||||
onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}
|
||||
className="px-3 py-1.5 rounded border border-gray-700 disabled:opacity-30 hover:border-gray-500 transition-colors"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span className="text-gray-500">
|
||||
{offset + 1}–{Math.min(offset + PAGE_SIZE, total)} of {total}
|
||||
</span>
|
||||
<button
|
||||
disabled={offset + PAGE_SIZE >= total}
|
||||
onClick={() => setOffset(offset + PAGE_SIZE)}
|
||||
className="px-3 py-1.5 rounded border border-gray-700 disabled:opacity-30 hover:border-gray-500 transition-colors"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user