feat: add Privy logins page to admin dashboard

app/privy/page.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import PrivyLoginsPage from "@/components/PrivyLogins/PrivyLoginsPage";
+
+export const metadata: Metadata = {
+  title: "Privy Logins — Recoup Admin",
+};
+
+export default function Page() {
+  return <PrivyLoginsPage />;
+}

components/Home/AdminDashboard.tsx

@@ -11,6 +11,7 @@ export default function AdminDashboard() {
       <nav className="flex gap-4">
         <NavButton href="/sandboxes" label="View Sandboxes" />
         <NavButton href="/sandboxes/orgs" label="View Org Commits" />
+        <NavButton href="/privy" label="View Privy Logins" />
       </nav>
     </div>
   );

components/PrivyLogins/ChartSkeleton.tsx

@@ -0,0 +1,8 @@
+export default function ChartSkeleton() {
+  return (
+    <div className="mb-6 rounded-lg border p-4">
+      <div className="mb-4 h-4 w-32 animate-pulse rounded bg-muted" />
+      <div className="h-[250px] w-full animate-pulse rounded bg-muted" />
+    </div>
+  );
+}

components/PrivyLogins/PrivyLastSeenChart.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/components/ui/chart";
+import type { PrivyUser } from "@/types/privy";
+import { getLastSeenByDate } from "@/lib/privy/getLastSeenByDate";
+
+const chartConfig = {
+  count: {
+    label: "Last Seen",
+    color: "#345A5D",
+  },
+} satisfies ChartConfig;
+
+interface PrivyLastSeenChartProps {
+  logins: PrivyUser[];
+}
+
+export default function PrivyLastSeenChart({ logins }: PrivyLastSeenChartProps) {
+  const data = getLastSeenByDate(logins);
+
+  if (data.length === 0) return null;
+
+  return (
+    <div className="mb-6 rounded-lg border p-4">
+      <h2 className="mb-4 text-sm font-medium text-gray-700 dark:text-gray-300">
+        Last Seen Activity
+      </h2>
+      <ChartContainer config={chartConfig} className="h-[250px] w-full">
+        <LineChart data={data} accessibilityLayer>
+          <CartesianGrid vertical={false} />
+          <XAxis
+            dataKey="date"
+            tickLine={false}
+            axisLine={false}
+            tickMargin={8}
+            tickFormatter={(value: string) => {
+              const d = new Date(value + "T00:00:00");
+              return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+            }}
+          />
+          <YAxis tickLine={false} axisLine={false} allowDecimals={false} />
+          <ChartTooltip
+            content={
+              <ChartTooltipContent
+                labelFormatter={(value) => {
+                  const d = new Date(String(value) + "T00:00:00");
+                  return d.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" });
+                }}
+              />
+            }
+          />
+          <Line
+            dataKey="count"
+            type="monotone"
+            stroke="var(--color-count)"
+            strokeWidth={2}
+            dot={{ fill: "var(--color-count)", r: 4 }}
+          />
+        </LineChart>
+      </ChartContainer>
+    </div>
+  );
+}

components/PrivyLogins/PrivyLoginsPage.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import PageBreadcrumb from "@/components/Sandboxes/PageBreadcrumb";
+import ApiDocsLink from "@/components/ApiDocsLink";
+import { usePrivyLogins } from "@/hooks/usePrivyLogins";
+import PrivyLoginsTable from "@/components/PrivyLogins/PrivyLoginsTable";
+import PrivyPeriodSelector from "@/components/PrivyLogins/PrivyPeriodSelector";
+import PrivyLoginsStats from "@/components/PrivyLogins/PrivyLoginsStats";
+import TableSkeleton from "@/components/Sandboxes/TableSkeleton";
+import ChartSkeleton from "@/components/PrivyLogins/ChartSkeleton";
+import PrivyLastSeenChart from "@/components/PrivyLogins/PrivyLastSeenChart";
+import type { PrivyLoginsPeriod } from "@/types/privy";
+
+export default function PrivyLoginsPage() {
+  const [period, setPeriod] = useState<PrivyLoginsPeriod>("all");
+  const { data, isLoading, error } = usePrivyLogins(period);
+
+  return (
+    <main className="mx-auto max-w-6xl px-4 py-10">
+      <div className="mb-6 flex items-start justify-between">
+        <div>
+          <PageBreadcrumb current="Privy Logins" />
+          <h1 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+            Privy Logins
+          </h1>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            User sign-ins via Privy, grouped by time period.
+          </p>
+        </div>
+        <ApiDocsLink path="admins/privy" />
+      </div>
+
+      <div className="mb-6 flex items-center gap-4">
+        <PrivyPeriodSelector period={period} onPeriodChange={setPeriod} />
+        {data && <PrivyLoginsStats data={data} />}
+      </div>
+
+      {isLoading && (
+        <>
+          <ChartSkeleton />
+          <TableSkeleton columns={["Email", "Created At", "Last Seen"]} />
+        </>
+      )}
+
+      {error && (
+        <div className="rounded-md bg-red-50 p-4 text-sm text-red-700 dark:bg-red-900/20 dark:text-red-400">
+          {error instanceof Error ? error.message : "Failed to load Privy logins"}
+        </div>
+      )}
+
+      {!isLoading && !error && data && data.logins.length === 0 && (
+        <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+          No logins found for this period.
+        </div>
+      )}
+
+      {!isLoading && !error && data && data.logins.length > 0 && (
+        <>
+          <PrivyLastSeenChart logins={data.logins} />
+          <PrivyLoginsTable logins={data.logins} />
+        </>
+      )}
+    </main>
+  );
+}

components/PrivyLogins/PrivyLoginsStats.tsx

@@ -0,0 +1,18 @@
+import type { PrivyLoginsResponse } from "@/types/privy";
+
+interface PrivyLoginsStatsProps {
+  data: PrivyLoginsResponse;
+}
+
+export default function PrivyLoginsStats({ data }: PrivyLoginsStatsProps) {
+  return (
+    <div className="flex gap-4 text-sm text-gray-500 dark:text-gray-400">
+      <span>
+        <span className="font-semibold text-gray-900 dark:text-gray-100">{data.total_new}</span> new
+      </span>
+      <span>
+        <span className="font-semibold text-gray-900 dark:text-gray-100">{data.total_active}</span> active
+      </span>
+    </div>
+  );
+}

components/PrivyLogins/PrivyLoginsTable.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type SortingState,
+} from "@tanstack/react-table";
+import { useState } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { privyLoginsColumns } from "@/components/PrivyLogins/privyLoginsColumns";
+import type { PrivyUser } from "@/types/privy";
+
+interface PrivyLoginsTableProps {
+  logins: PrivyUser[];
+}
+
+export default function PrivyLoginsTable({ logins }: PrivyLoginsTableProps) {
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: "created_at", desc: true },
+  ]);
+
+  const table = useReactTable({
+    data: logins,
+    columns: privyLoginsColumns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  return (
+    <div className="rounded-lg border">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(header.column.columnDef.header, header.getContext())}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={privyLoginsColumns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

components/PrivyLogins/PrivyPeriodSelector.tsx

@@ -0,0 +1,33 @@
+import type { PrivyLoginsPeriod } from "@/types/privy";
+
+const PERIODS: { value: PrivyLoginsPeriod; label: string }[] = [
+  { value: "all", label: "All Time" },
+  { value: "daily", label: "Daily" },
+  { value: "weekly", label: "Weekly" },
+  { value: "monthly", label: "Monthly" },
+];
+
+interface PrivyPeriodSelectorProps {
+  period: PrivyLoginsPeriod;
+  onPeriodChange: (period: PrivyLoginsPeriod) => void;
+}
+
+export default function PrivyPeriodSelector({ period, onPeriodChange }: PrivyPeriodSelectorProps) {
+  return (
+    <div className="flex rounded-lg border bg-white dark:bg-gray-900 overflow-hidden">
+      {PERIODS.map(({ value, label }) => (
+        <button
+          key={value}
+          onClick={() => onPeriodChange(value)}
+          className={`px-4 py-2 text-sm font-medium transition-colors ${
+            period === value
+              ? "bg-gray-900 text-white dark:bg-white dark:text-gray-900"
+              : "text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800"
+          }`}
+        >
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}

components/PrivyLogins/privyLoginsColumns.tsx

@@ -0,0 +1,34 @@
+import { type ColumnDef } from "@tanstack/react-table";
+import { SortableHeader } from "@/components/SandboxOrgs/SortableHeader";
+import { getEmail } from "@/lib/privy/getEmail";
+import { getLastSeen } from "@/lib/privy/getLastSeen";
+import type { PrivyUser } from "@/types/privy";
+
+export const privyLoginsColumns: ColumnDef<PrivyUser>[] = [
+  {
+    id: "email",
+    accessorFn: (row) => getEmail(row),
+    header: "Email",
+    cell: ({ getValue }) => {
+      const email = getValue<string | null>();
+      return email ?? <span className="text-gray-400 italic">No email</span>;
+    },
+  },
+  {
+    id: "created_at",
+    accessorKey: "created_at",
+    header: ({ column }) => <SortableHeader column={column} label="Created At" />,
+    cell: ({ getValue }) => new Date(getValue<number>() * 1000).toLocaleString(),
+    sortingFn: "basic",
+  },
+  {
+    id: "last_seen",
+    accessorFn: (row) => getLastSeen(row),
+    header: ({ column }) => <SortableHeader column={column} label="Last Seen" />,
+    cell: ({ getValue }) => {
+      const ts = getValue<number | null>();
+      return ts ? new Date(ts * 1000).toLocaleString() : <span className="text-gray-400 italic">Never</span>;
+    },
+    sortingFn: "basic",
+  },
+];