buildmymcpserver/apps/web/app/admin/page.tsx

'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { apiFetch } from '@/lib/api';
import { StatusPill } from '@/components/status-pill';

interface Overview {
  totals: {
    users: number;
    orgs: number;
    servers: number;
    liveServers: number;
    builds: number;
    failedBuilds: number;
    toolCalls: number;
  };
  trends: { newUsersLast7d: number; newServersLast7d: number };
  statusBreakdown: { status: string; c: number }[];
  recentBuilds24h: { status: string; c: number }[];
  recentActivity: {
    id: string;
    action: string;
    resourceType: string | null;
    resourceId: string | null;
    metadata: Record<string, unknown> | null;
    ipAddress: string | null;
    createdAt: string;
  }[];
}

export default function AdminOverview() {
  const [data, setData] = useState<Overview | null>(null);

  useEffect(() => {
    apiFetch<Overview>('/v1/admin/overview').then(setData);
    const t = setInterval(() => apiFetch<Overview>('/v1/admin/overview').then(setData), 8000);
    return () => clearInterval(t);
  }, []);

  if (!data) {
    return <div className="px-8 py-8 mono text-[12px] text-[--color-fg-muted]">Loading…</div>;
  }

  return (
    <div className="px-8 py-8">
      <header className="mb-6">
        <h1 className="text-[22px] font-semibold tracking-tight">Admin overview</h1>
        <p className="mt-1 text-[13px] text-[--color-fg-muted]">
          Live system metrics — refreshes every 8 seconds.
        </p>
      </header>

      <div className="grid gap-3 md:grid-cols-4">
        <Card label="Users" value={data.totals.users} sub={`+${data.trends.newUsersLast7d} last 7d`} />
        <Card
          label="Organizations"
          value={data.totals.orgs}
          sub={`${data.totals.users / Math.max(1, data.totals.orgs)}× users/org avg`}
          subRender={`${(data.totals.users / Math.max(1, data.totals.orgs)).toFixed(1)}× users/org avg`}
        />
        <Card
          label="MCP servers"
          value={data.totals.servers}
          sub={`${data.totals.liveServers} live · +${data.trends.newServersLast7d} last 7d`}
        />
        <Card
          label="Tool calls"
          value={data.totals.toolCalls}
          sub={
            data.totals.builds === 0
              ? '0 builds'
              : `${(((data.totals.builds - data.totals.failedBuilds) / data.totals.builds) * 100).toFixed(0)}% build success`
          }
        />
      </div>

      <div className="mt-8 grid gap-6 md:grid-cols-2">
        <Panel title="Server status">
          {data.statusBreakdown.length === 0 ? (
            <Empty text="No servers." />
          ) : (
            <ul className="space-y-2">
              {data.statusBreakdown.map((row) => (
                <li
                  key={row.status}
                  className="flex items-center justify-between text-[12.5px]"
                >
                  <StatusPill status={row.status as never} />
                  <span className="mono text-[--color-fg]">{row.c}</span>
                </li>
              ))}
            </ul>
          )}
        </Panel>
        <Panel title="Builds (last 24h)">
          {data.recentBuilds24h.length === 0 ? (
            <Empty text="No builds in the last 24h." />
          ) : (
            <ul className="space-y-2">
              {data.recentBuilds24h.map((row) => (
                <li
                  key={row.status}
                  className="flex items-center justify-between text-[12.5px]"
                >
                  <StatusPill status={row.status as never} />
                  <span className="mono text-[--color-fg]">{row.c}</span>
                </li>
              ))}
            </ul>
          )}
        </Panel>
      </div>

      <div className="mt-8">
        <div className="flex items-baseline justify-between">
          <h2 className="text-[14px] font-semibold tracking-tight">Recent activity</h2>
          <Link href="/admin/audit" className="text-[12px] text-[--color-fg-muted] hover:text-[--color-fg]">
            Full audit log →
          </Link>
        </div>
        <div className="panel mt-3">
          {data.recentActivity.length === 0 ? (
            <Empty text="No activity yet." />
          ) : (
            <table className="w-full text-[12px]">
              <thead className="border-b border-[--color-border] text-[--color-fg-subtle]">
                <tr>
                  <th className="px-4 py-2 text-left font-medium">When</th>
                  <th className="px-4 py-2 text-left font-medium">Action</th>
                  <th className="px-4 py-2 text-left font-medium">Resource</th>
                  <th className="px-4 py-2 text-left font-medium">IP</th>
                </tr>
              </thead>
              <tbody>
                {data.recentActivity.map((e) => (
                  <tr key={e.id} className="border-b border-[--color-border] last:border-0">
                    <td className="px-4 py-2 mono text-[--color-fg-muted]">
                      {new Date(e.createdAt).toLocaleString()}
                    </td>
                    <td className="px-4 py-2">
                      <span className="mono rounded-full border border-[--color-border] bg-[--color-bg-subtle] px-2 py-0.5 text-[11px]">
                        {e.action}
                      </span>
                    </td>
                    <td className="px-4 py-2 mono text-[--color-fg-muted]">
                      {e.resourceType
                        ? `${e.resourceType}/${e.resourceId?.slice(0, 8) ?? '—'}`
                        : '—'}
                    </td>
                    <td className="px-4 py-2 mono text-[--color-fg-muted]">{e.ipAddress ?? '—'}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>
    </div>
  );
}

function Card({
  label,
  value,
  sub,
  subRender,
}: {
  label: string;
  value: number;
  sub?: string;
  subRender?: string;
}) {
  return (
    <div className="panel p-4">
      <div className="text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">{label}</div>
      <div className="mt-1.5 text-[24px] font-semibold tabular-nums tracking-tight">
        {value.toLocaleString()}
      </div>
      {sub && (
        <div className="mt-1 text-[12px] text-[--color-fg-muted]">{subRender ?? sub}</div>
      )}
    </div>
  );
}

function Panel({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="panel p-4">
      <div className="text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">{title}</div>
      <div className="mt-3">{children}</div>
    </div>
  );
}

function Empty({ text }: { text: string }) {
  return <p className="text-[12.5px] text-[--color-fg-muted]">{text}</p>;
}