feat: Admin Insights page — charts for signups, recipes, tiers, usage (v0.55.0)

New Admin > Insights: signups/day and recipes-created/day (manual vs AI) over the last 30 days, users by tier, recipes by visibility, monthly AI call totals (6 months), and support tickets by status. Two hand-rolled SVG chart components (bar-chart.tsx, time-series-chart.tsx) instead of pulling in a charting library — avoids a new dependency and any React 19 peer-dep risk. Both ship a hover tooltip (crosshair for the time series, per-bar for the bar chart) and a "show as table" toggle per the dataviz method's accessibility requirement. Repurposed the app's existing (previously unused, grayscale-only) shadcn --chart-1..5 CSS variables with a validated categorical palette — run through the dataviz skill's CVD/contrast validator for both light and dark surfaces (both pass; three light-mode slots fall under 3:1 contrast by design, mitigated by the charts' direct value/axis labels). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-19 20:02:58 +02:00
parent 44df734f1c
commit cf7cc6c885
9 changed files with 480 additions and 14 deletions
@@ -0,0 +1,176 @@
+import type { Metadata } from "next";
+import { db, users, recipes, userUsage, supportTickets, gte, sql } from "@epicure/db";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { BarChart } from "@/components/admin/charts/bar-chart";
+import { TimeSeriesChart } from "@/components/admin/charts/time-series-chart";
+
+export const metadata: Metadata = {};
+
+const DAYS = 30;
+
+function lastNDays(n: number): string[] {
+  const out: string[] = [];
+  const now = new Date();
+  for (let i = n - 1; i >= 0; i--) {
+    const d = new Date(now);
+    d.setDate(d.getDate() - i);
+    out.push(d.toISOString().slice(0, 10));
+  }
+  return out;
+}
+
+function formatShortDate(d: string) {
+  const date = new Date(`${d}T00:00:00Z`);
+  return date.toLocaleDateString(undefined, { month: "short", day: "numeric", timeZone: "UTC" });
+}
+
+function lastNMonths(n: number): string[] {
+  const out: string[] = [];
+  const now = new Date();
+  for (let i = n - 1; i >= 0; i--) {
+    const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
+    out.push(`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`);
+  }
+  return out;
+}
+
+function formatMonth(m: string) {
+  const [y, mo] = m.split("-");
+  return new Date(Number(y), Number(mo) - 1, 1).toLocaleDateString(undefined, { month: "short", year: "2-digit" });
+}
+
+export default async function AdminInsightsPage() {
+  const since = new Date();
+  since.setDate(since.getDate() - DAYS);
+
+  const [
+    signupRows,
+    recipeRows,
+    tierRows,
+    visibilityRows,
+    usageRows,
+    ticketRows,
+  ] = await Promise.all([
+    db
+      .select({ day: sql<string>`to_char(${users.createdAt}, 'YYYY-MM-DD')`, n: sql<number>`count(*)::int` })
+      .from(users)
+      .where(gte(users.createdAt, since))
+      .groupBy(sql`1`),
+    db
+      .select({
+        day: sql<string>`to_char(${recipes.createdAt}, 'YYYY-MM-DD')`,
+        aiGenerated: recipes.aiGenerated,
+        n: sql<number>`count(*)::int`,
+      })
+      .from(recipes)
+      .where(gte(recipes.createdAt, since))
+      .groupBy(sql`1`, recipes.aiGenerated),
+    db.select({ tier: users.tier, n: sql<number>`count(*)::int` }).from(users).groupBy(users.tier),
+    db.select({ visibility: recipes.visibility, n: sql<number>`count(*)::int` }).from(recipes).groupBy(recipes.visibility),
+    db
+      .select({ month: userUsage.month, n: sql<number>`coalesce(sum(${userUsage.aiCallsUsed}), 0)::int` })
+      .from(userUsage)
+      .groupBy(userUsage.month),
+    db.select({ status: supportTickets.status, n: sql<number>`count(*)::int` }).from(supportTickets).groupBy(supportTickets.status),
+  ]);
+
+  const signupByDay = new Map(signupRows.map((r) => [r.day, r.n]));
+  const signupSeries = lastNDays(DAYS).map((day) => ({ date: day, value: signupByDay.get(day) ?? 0 }));
+
+  const recipesByDay = new Map<string, { manual: number; ai: number }>();
+  for (const r of recipeRows) {
+    const entry = recipesByDay.get(r.day) ?? { manual: 0, ai: 0 };
+    if (r.aiGenerated) entry.ai += r.n; else entry.manual += r.n;
+    recipesByDay.set(r.day, entry);
+  }
+  const recipesSeries = lastNDays(DAYS).map((day) => {
+    const entry = recipesByDay.get(day) ?? { manual: 0, ai: 0 };
+    return { label: formatShortDate(day), values: [entry.manual, entry.ai] };
+  });
+
+  const TIER_ORDER = ["free", "pro", "family"] as const;
+  const tierByKey = new Map(tierRows.map((r) => [r.tier, r.n]));
+  const tierData = TIER_ORDER.map((tier) => ({ label: tier, values: [tierByKey.get(tier) ?? 0] }));
+
+  const VISIBILITY_ORDER = ["private", "unlisted", "followers", "public"] as const;
+  const visByKey = new Map(visibilityRows.map((r) => [r.visibility, r.n]));
+  const visibilityData = VISIBILITY_ORDER.map((v) => ({ label: v, values: [visByKey.get(v) ?? 0] }));
+
+  const usageByMonth = new Map(usageRows.map((r) => [r.month, r.n]));
+  const usageSeries = lastNMonths(6).map((month) => ({ date: month, value: usageByMonth.get(month) ?? 0 }));
+
+  const STATUS_ORDER = ["open", "triaged", "closed"] as const;
+  const statusByKey = new Map(ticketRows.map((r) => [r.status, r.n]));
+  const statusData = STATUS_ORDER.map((s) => ({ label: s, values: [statusByKey.get(s) ?? 0] }));
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">Insights</h1>
+        <p className="text-muted-foreground text-sm mt-1">Trends and breakdowns across the last {DAYS} days (or 6 months for usage).</p>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">New signups</CardTitle>
+            <CardDescription>Daily, last {DAYS} days</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TimeSeriesChart data={signupSeries} formatDate={formatShortDate} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Recipes created</CardTitle>
+            <CardDescription>Daily, manual vs AI-generated</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <BarChart data={recipesSeries} seriesLabels={["Manual", "AI-generated"]} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Users by tier</CardTitle>
+            <CardDescription>All-time</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <BarChart data={tierData} seriesLabels={["Users"]} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Recipes by visibility</CardTitle>
+            <CardDescription>All-time</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <BarChart data={visibilityData} seriesLabels={["Recipes"]} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">AI calls</CardTitle>
+            <CardDescription>Monthly total across all users, last 6 months</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TimeSeriesChart data={usageSeries} formatDate={formatMonth} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Support tickets by status</CardTitle>
+            <CardDescription>All-time</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <BarChart data={statusData} seriesLabels={["Tickets"]} />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
@@ -3,11 +3,12 @@ import { headers } from "next/headers";
 import { auth } from "@/lib/auth/server";
 import { db, users, eq } from "@epicure/db";
 import Link from "next/link";
-import { Shield, Users, BookOpen, Settings, BarChart3, ClipboardList, HardDrive, Bot, ArrowLeft, Gauge, Mail, Flag, History, LifeBuoy } from "lucide-react";
+import { Shield, Users, BookOpen, Settings, BarChart3, ClipboardList, HardDrive, Bot, ArrowLeft, Gauge, Mail, Flag, History, LifeBuoy, TrendingUp } from "lucide-react";
 import { cn } from "@/lib/utils";

 const adminNav = [
  { href: "/admin", label: "Overview", icon: BarChart3 },
+  { href: "/admin/insights", label: "Insights", icon: TrendingUp },
  { href: "/admin/users", label: "Users", icon: Users },
  { href: "/admin/invites", label: "Invites", icon: Mail },
  { href: "/admin/recipes", label: "Recipes", icon: BookOpen },
@@ -69,11 +69,11 @@
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
+  --chart-1: #2a78d6;
+  --chart-2: #008300;
+  --chart-3: #e87ba4;
+  --chart-4: #eda100;
+  --chart-5: #1baf7a;
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
@@ -105,11 +105,11 @@
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
+  --chart-1: #3987e5;
+  --chart-2: #008300;
+  --chart-3: #d55181;
+  --chart-4: #c98500;
+  --chart-5: #199e70;
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
@@ -0,0 +1,156 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+
+const SERIES_COLORS = ["var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)"];
+
+export type BarChartGroup = {
+  label: string;
+  values: number[];
+};
+
+/** Grouped vertical bar chart — hand-rolled SVG (no charting lib), series
+ *  colors assigned by fixed index (never repainted if a filter changes
+ *  which groups are visible). Includes a hover tooltip and a table-view
+ *  toggle for the low-contrast-slot / no-color accessibility path. */
+export function BarChart({
+  data,
+  seriesLabels,
+  formatValue = (n) => String(n),
+  height = 220,
+}: {
+  data: BarChartGroup[];
+  seriesLabels: string[];
+  formatValue?: (n: number) => string;
+  height?: number;
+}) {
+  const [hovered, setHovered] = useState<number | null>(null);
+  const [showTable, setShowTable] = useState(false);
+
+  const max = Math.max(1, ...data.flatMap((d) => d.values));
+  const width = 600;
+  const paddingBottom = 28;
+  const paddingTop = 12;
+  const plotHeight = height - paddingBottom - paddingTop;
+  const groupWidth = width / Math.max(1, data.length);
+  const barGap = 2;
+  const barWidth = Math.max(4, (groupWidth - 16 - barGap * (seriesLabels.length - 1)) / seriesLabels.length);
+
+  if (data.length === 0) {
+    return <p className="text-sm text-muted-foreground py-8 text-center">No data yet.</p>;
+  }
+
+  return (
+    <div className="space-y-2">
+      {seriesLabels.length > 1 && (
+        <div className="flex flex-wrap gap-3">
+          {seriesLabels.map((label, i) => (
+            <div key={label} className="flex items-center gap-1.5 text-xs text-muted-foreground">
+              <span className="h-2.5 w-2.5 rounded-sm shrink-0" style={{ backgroundColor: SERIES_COLORS[i % SERIES_COLORS.length] }} />
+              {label}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {showTable ? (
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b text-left text-muted-foreground">
+                <th className="py-1.5 pr-4 font-medium">Label</th>
+                {seriesLabels.map((label) => (
+                  <th key={label} className="py-1.5 pr-4 font-medium">{label}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {data.map((d) => (
+                <tr key={d.label} className="border-b last:border-0">
+                  <td className="py-1.5 pr-4">{d.label}</td>
+                  {d.values.map((v, i) => (
+                    <td key={i} className="py-1.5 pr-4 tabular-nums">{formatValue(v)}</td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <div className="relative">
+          <svg viewBox={`0 0 ${width} ${height}`} className="w-full h-auto">
+            <line x1={0} y1={height - paddingBottom} x2={width} y2={height - paddingBottom} stroke="var(--border)" strokeWidth={1} />
+            {data.map((group, gi) => {
+              const gx = gi * groupWidth + 8;
+              return (
+                <g key={group.label} onMouseEnter={() => setHovered(gi)} onMouseLeave={() => setHovered(null)}>
+                  <rect x={gi * groupWidth} y={paddingTop} width={groupWidth} height={plotHeight} fill="transparent" />
+                  {group.values.map((v, si) => {
+                    const barHeight = Math.max(0, (v / max) * plotHeight);
+                    const bx = gx + si * (barWidth + barGap);
+                    const by = height - paddingBottom - barHeight;
+                    return (
+                      <rect
+                        key={si}
+                        x={bx}
+                        y={by}
+                        width={barWidth}
+                        height={barHeight}
+                        rx={3}
+                        fill={SERIES_COLORS[si % SERIES_COLORS.length]}
+                        opacity={hovered === null || hovered === gi ? 1 : 0.45}
+                      />
+                    );
+                  })}
+                  <text
+                    x={gx + (barWidth + barGap) * seriesLabels.length / 2 - barGap / 2}
+                    y={height - paddingBottom + 16}
+                    textAnchor="middle"
+                    fontSize={10}
+                    fill="var(--muted-foreground)"
+                  >
+                    {group.label}
+                  </text>
+                  {seriesLabels.length === 1 && group.values[0]! > 0 && (
+                    <text
+                      x={gx + barWidth / 2}
+                      y={height - paddingBottom - Math.max(0, (group.values[0]! / max) * plotHeight) - 4}
+                      textAnchor="middle"
+                      fontSize={10}
+                      fill="var(--foreground)"
+                    >
+                      {formatValue(group.values[0]!)}
+                    </text>
+                  )}
+                </g>
+              );
+            })}
+          </svg>
+          {hovered !== null && (
+            <div
+              className="pointer-events-none absolute top-0 -translate-x-1/2 rounded-md border bg-popover px-2 py-1 text-xs shadow-md whitespace-nowrap"
+              style={{ left: `${((hovered + 0.5) / data.length) * 100}%` }}
+            >
+              <p className="font-medium text-popover-foreground">{data[hovered]!.label}</p>
+              {data[hovered]!.values.map((v, i) => (
+                <p key={i} className="text-muted-foreground flex items-center gap-1.5">
+                  <span className="h-1.5 w-1.5 rounded-sm shrink-0" style={{ backgroundColor: SERIES_COLORS[i % SERIES_COLORS.length] }} />
+                  {seriesLabels[i]}: {formatValue(v)}
+                </p>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      <button
+        type="button"
+        onClick={() => setShowTable((s) => !s)}
+        className={cn("text-xs text-muted-foreground hover:text-foreground transition-colors underline underline-offset-2")}
+      >
+        {showTable ? "Show chart" : "Show as table"}
+      </button>
+    </div>
+  );
+}
@@ -0,0 +1,121 @@
+"use client";
+
+import { useState, useRef } from "react";
+import { cn } from "@/lib/utils";
+
+export type TimeSeriesPoint = { date: string; value: number };
+
+/** Single-series area/line chart with a hover crosshair+tooltip and a
+ *  table-view fallback — hand-rolled SVG, no charting lib. */
+export function TimeSeriesChart({
+  data,
+  formatValue = (n) => String(n),
+  formatDate = (d) => d,
+  height = 200,
+}: {
+  data: TimeSeriesPoint[];
+  formatValue?: (n: number) => string;
+  formatDate?: (d: string) => string;
+  height?: number;
+}) {
+  const [hovered, setHovered] = useState<number | null>(null);
+  const [showTable, setShowTable] = useState(false);
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  const width = 600;
+  const paddingBottom = 24;
+  const paddingTop = 12;
+  const plotHeight = height - paddingBottom - paddingTop;
+  const max = Math.max(1, ...data.map((d) => d.value));
+  const n = data.length;
+
+  if (n === 0) {
+    return <p className="text-sm text-muted-foreground py-8 text-center">No data yet.</p>;
+  }
+
+  const xFor = (i: number) => (n === 1 ? width / 2 : (i / (n - 1)) * width);
+  const yFor = (v: number) => height - paddingBottom - (v / max) * plotHeight;
+
+  const linePath = data.map((d, i) => `${i === 0 ? "M" : "L"} ${xFor(i)} ${yFor(d.value)}`).join(" ");
+  const areaPath = `${linePath} L ${xFor(n - 1)} ${height - paddingBottom} L ${xFor(0)} ${height - paddingBottom} Z`;
+
+  function handleMove(e: React.MouseEvent<SVGSVGElement>) {
+    const svg = svgRef.current;
+    if (!svg) return;
+    const rect = svg.getBoundingClientRect();
+    const relX = (e.clientX - rect.left) / rect.width;
+    const i = Math.round(relX * (n - 1));
+    setHovered(Math.max(0, Math.min(n - 1, i)));
+  }
+
+  const labelStep = Math.max(1, Math.ceil(n / 6));
+
+  return (
+    <div className="space-y-2">
+      {showTable ? (
+        <div className="overflow-x-auto max-h-64">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b text-left text-muted-foreground sticky top-0 bg-card">
+                <th className="py-1.5 pr-4 font-medium">Date</th>
+                <th className="py-1.5 pr-4 font-medium">Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.map((d) => (
+                <tr key={d.date} className="border-b last:border-0">
+                  <td className="py-1.5 pr-4">{formatDate(d.date)}</td>
+                  <td className="py-1.5 pr-4 tabular-nums">{formatValue(d.value)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <div className="relative">
+          <svg
+            ref={svgRef}
+            viewBox={`0 0 ${width} ${height}`}
+            className="w-full h-auto"
+            onMouseMove={handleMove}
+            onMouseLeave={() => setHovered(null)}
+          >
+            <line x1={0} y1={height - paddingBottom} x2={width} y2={height - paddingBottom} stroke="var(--border)" strokeWidth={1} />
+            <path d={areaPath} fill="var(--chart-1)" opacity={0.15} />
+            <path d={linePath} fill="none" stroke="var(--chart-1)" strokeWidth={2} />
+            {data.map((d, i) => (
+              i % labelStep === 0 && (
+                <text key={i} x={xFor(i)} y={height - paddingBottom + 15} textAnchor="middle" fontSize={10} fill="var(--muted-foreground)">
+                  {formatDate(d.date)}
+                </text>
+              )
+            ))}
+            {hovered !== null && (
+              <>
+                <line x1={xFor(hovered)} y1={paddingTop} x2={xFor(hovered)} y2={height - paddingBottom} stroke="var(--border)" strokeWidth={1} strokeDasharray="3 3" />
+                <circle cx={xFor(hovered)} cy={yFor(data[hovered]!.value)} r={4} fill="var(--chart-1)" stroke="var(--card)" strokeWidth={2} />
+              </>
+            )}
+          </svg>
+          {hovered !== null && (
+            <div
+              className="pointer-events-none absolute top-0 -translate-x-1/2 rounded-md border bg-popover px-2 py-1 text-xs shadow-md whitespace-nowrap"
+              style={{ left: `${(xFor(hovered) / width) * 100}%` }}
+            >
+              <p className="font-medium text-popover-foreground">{formatDate(data[hovered]!.date)}</p>
+              <p className="text-muted-foreground">{formatValue(data[hovered]!.value)}</p>
+            </div>
+          )}
+        </div>
+      )}
+
+      <button
+        type="button"
+        onClick={() => setShowTable((s) => !s)}
+        className={cn("text-xs text-muted-foreground hover:text-foreground transition-colors underline underline-offset-2")}
+      >
+        {showTable ? "Show chart" : "Show as table"}
+      </button>
+    </div>
+  );
+}
@@ -1,5 +1,5 @@
 // Mirrors CHANGELOG.md at the repo root — update both together.
-export const APP_VERSION = "0.54.1";
+export const APP_VERSION = "0.55.0";

 export type ChangelogEntry = {
  version: string;
@@ -11,6 +11,13 @@ export type ChangelogEntry = {
 };

 export const CHANGELOG: ChangelogEntry[] = [
+  {
+    version: "0.55.0",
+    date: "2026-07-19 17:50",
+    added: [
+      "New Admin > Insights page — signups and recipes-created over the last 30 days, users by tier, recipes by visibility, monthly AI usage, and support tickets by status. Charts are hand-built (hover tooltips, table-view fallback, colorblind-safe palette validated against WCAG/CVD checks), no new dependency.",
+    ],
+  },
  {
    version: "0.54.1",
    date: "2026-07-19 17:25",
@@ -1,6 +1,6 @@
 {
  "name": "@epicure/web",
-  "version": "0.54.1",
+  "version": "0.55.0",
  "private": true,
  "scripts": {
    "dev": "next dev",