feat(admin,trpc): company metrics dashboard from PostHog, Stripe, Neon, and Mercury

.github/workflows/deploy-production.yml

@@ -112,6 +112,7 @@ jobs:
           QSTASH_CURRENT_SIGNING_KEY: ${{ secrets.QSTASH_CURRENT_SIGNING_KEY }}
           QSTASH_NEXT_SIGNING_KEY: ${{ secrets.QSTASH_NEXT_SIGNING_KEY }}
           STRIPE_SECRET_KEY: ${{ secrets.STRIPE_SECRET_KEY }}
+          MERCURY_API_TOKEN: ${{ secrets.MERCURY_API_TOKEN }}
           STRIPE_WEBHOOK_SECRET: ${{ secrets.STRIPE_WEBHOOK_SECRET }}
           STRIPE_PRO_MONTHLY_PRICE_ID: ${{ secrets.STRIPE_PRO_MONTHLY_PRICE_ID }}
           STRIPE_PRO_YEARLY_PRICE_ID: ${{ secrets.STRIPE_PRO_YEARLY_PRICE_ID }}
@@ -161,6 +162,7 @@ jobs:
             --env QSTASH_CURRENT_SIGNING_KEY=$QSTASH_CURRENT_SIGNING_KEY \
             --env QSTASH_NEXT_SIGNING_KEY=$QSTASH_NEXT_SIGNING_KEY \
             --env STRIPE_SECRET_KEY=$STRIPE_SECRET_KEY \
+            --env MERCURY_API_TOKEN=$MERCURY_API_TOKEN \
             --env STRIPE_WEBHOOK_SECRET=$STRIPE_WEBHOOK_SECRET \
             --env STRIPE_PRO_MONTHLY_PRICE_ID=$STRIPE_PRO_MONTHLY_PRICE_ID \
             --env STRIPE_PRO_YEARLY_PRICE_ID=$STRIPE_PRO_YEARLY_PRICE_ID \
@@ -401,6 +403,7 @@ jobs:
           KV_URL: ${{ secrets.KV_URL }}
           RESEND_API_KEY: ${{ secrets.RESEND_API_KEY }}
           STRIPE_SECRET_KEY: ${{ secrets.STRIPE_SECRET_KEY }}
+          MERCURY_API_TOKEN: ${{ secrets.MERCURY_API_TOKEN }}
           STRIPE_WEBHOOK_SECRET: ${{ secrets.STRIPE_WEBHOOK_SECRET }}
           STRIPE_PRO_MONTHLY_PRICE_ID: ${{ secrets.STRIPE_PRO_MONTHLY_PRICE_ID }}
           STRIPE_PRO_YEARLY_PRICE_ID: ${{ secrets.STRIPE_PRO_YEARLY_PRICE_ID }}
@@ -431,6 +434,7 @@ jobs:
             --env KV_URL=$KV_URL \
             --env RESEND_API_KEY=$RESEND_API_KEY \
             --env STRIPE_SECRET_KEY=$STRIPE_SECRET_KEY \
+            --env MERCURY_API_TOKEN=$MERCURY_API_TOKEN \
             --env STRIPE_WEBHOOK_SECRET=$STRIPE_WEBHOOK_SECRET \
             --env STRIPE_PRO_MONTHLY_PRICE_ID=$STRIPE_PRO_MONTHLY_PRICE_ID \
             --env STRIPE_PRO_YEARLY_PRICE_ID=$STRIPE_PRO_YEARLY_PRICE_ID \

apps/admin/src/app/(dashboard)/components/AppSidebar/AppSidebar.tsx

@@ -20,7 +20,7 @@ import {
 	SidebarRail,
 } from "@superset/ui/sidebar";
 import { usePathname } from "next/navigation";
-import { LuChevronRight, LuHouse, LuUsers } from "react-icons/lu";
+import { LuChevronRight, LuHouse } from "react-icons/lu";
 
 import { AppSidebarHeader } from "./components/AppSidebarHeader";
 import { NavUser } from "./components/NavUser";
@@ -34,18 +34,10 @@ const topLevelNav = [
 	},
 ];
 
-const sections = [
-	{
-		title: "User Management",
-		items: [
-			{
-				title: "All Users",
-				url: "/users",
-				icon: LuUsers,
-			},
-		],
-	},
-];
+const sections: {
+	title: string;
+	items: { title: string; url: string; icon: typeof LuHouse }[];
+}[] = [];
 
 export interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
 	user: NonNullable<RouterOutputs["user"]["me"]>;

apps/admin/src/app/(dashboard)/components/BurnByVendorTile/BurnByVendorTile.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+
+import { useTRPC } from "@/trpc/react";
+
+import { InsightTileFrame } from "../InsightTileFrame";
+
+// Where the money goes: average monthly outflow per counterparty over the
+// last 3 complete months — the actionable half of a burn chart.
+export function BurnByVendorTile() {
+	const trpc = useTRPC();
+	const query = useQuery(trpc.business.getCashFlow.queryOptions());
+
+	const unavailableReason =
+		query.data && !query.data.available ? query.data.reason : null;
+	const vendors = query.data?.available ? query.data.topVendors : [];
+	const maxSpend = vendors[0]?.avgMonthlyUsd ?? 0;
+
+	return (
+		<InsightTileFrame
+			title="Burn by vendor (Mercury)"
+			description="Avg monthly outflow per counterparty, last 3 complete months"
+			lastRefresh={query.data?.available ? query.data.asOf : null}
+			isLoading={query.isLoading}
+			error={query.error}
+			empty={vendors.length === 0}
+			emptyLabel={
+				unavailableReason ? `Unavailable: ${unavailableReason}` : "No data"
+			}
+		>
+			<div className="space-y-2">
+				{vendors.map((vendor) => (
+					<div key={vendor.name} className="flex items-center gap-2 text-xs">
+						<span className="w-40 shrink-0 truncate" title={vendor.name}>
+							{vendor.name}
+						</span>
+						<div className="bg-muted/40 h-4 flex-1 overflow-hidden rounded-sm">
+							<div
+								className="h-full rounded-sm"
+								style={{
+									width: `${maxSpend > 0 ? (vendor.avgMonthlyUsd / maxSpend) * 100 : 0}%`,
+									background: "var(--chart-1)",
+								}}
+							/>
+						</div>
+						<span className="w-20 shrink-0 text-right tabular-nums">
+							${vendor.avgMonthlyUsd.toLocaleString()}/mo
+						</span>
+					</div>
+				))}
+			</div>
+		</InsightTileFrame>
+	);
+}

apps/admin/src/app/(dashboard)/components/BurnByVendorTile/index.ts

@@ -0,0 +1 @@
+export { BurnByVendorTile } from "./BurnByVendorTile";

apps/admin/src/app/(dashboard)/components/CashBalanceTile/CashBalanceTile.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import {
+	type ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from "@superset/ui/chart";
+import { useQuery } from "@tanstack/react-query";
+import { Area, AreaChart, XAxis, YAxis } from "recharts";
+
+import { useTRPC } from "@/trpc/react";
+
+import { makeDateAxis } from "../../utils/chartAxis";
+import { InsightTileFrame } from "../InsightTileFrame";
+
+const chartConfig = {
+	cashUsd: { label: "total cash", color: "var(--chart-2)" },
+} satisfies ChartConfig;
+
+// Total cash across all Mercury accounts + Treasury, reconstructed from the
+// transaction history. Tranche wires show as steps up; burn as gentle slope.
+export function CashBalanceTile() {
+	const trpc = useTRPC();
+	const query = useQuery(trpc.business.getCashFlow.queryOptions());
+
+	const unavailableReason =
+		query.data && !query.data.available ? query.data.reason : null;
+	const points = query.data?.available ? query.data.cashSeries : [];
+	const xAxis = makeDateAxis(points.map((point) => point.date));
+
+	return (
+		<InsightTileFrame
+			title="Cash — total balance (Mercury)"
+			description="Checking + savings + Treasury over time; fundraise tranches are the steps"
+			lastRefresh={query.data?.available ? query.data.asOf : null}
+			isLoading={query.isLoading}
+			error={query.error}
+			empty={points.length === 0}
+			emptyLabel={
+				unavailableReason ? `Unavailable: ${unavailableReason}` : "No data"
+			}
+		>
+			<ChartContainer config={chartConfig} className="h-[240px] w-full">
+				<AreaChart data={points}>
+					<XAxis
+						dataKey="date"
+						tickLine={false}
+						axisLine={false}
+						fontSize={11}
+						ticks={xAxis.ticks}
+						tickFormatter={xAxis.tickFormatter}
+					/>
+					<YAxis
+						tickLine={false}
+						axisLine={false}
+						width={64}
+						tickFormatter={(v: number) => `$${(v / 1_000_000).toFixed(1)}M`}
+					/>
+					<ChartTooltip content={<ChartTooltipContent />} />
+					<Area
+						dataKey="cashUsd"
+						stroke="var(--color-cashUsd)"
+						fill="var(--color-cashUsd)"
+						fillOpacity={0.15}
+						strokeWidth={2}
+						type="stepAfter"
+					/>
+				</AreaChart>
+			</ChartContainer>
+		</InsightTileFrame>
+	);
+}

apps/admin/src/app/(dashboard)/components/CashBalanceTile/index.ts

@@ -0,0 +1 @@
+export { CashBalanceTile } from "./CashBalanceTile";

apps/admin/src/app/(dashboard)/components/ChurnHeatmapTile/ChurnHeatmapTile.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+
+import { useTRPC } from "@/trpc/react";
+
+import { formatMonth } from "../../utils/chartAxis";
+import { CohortGrid, type CohortRow } from "../CohortGrid";
+import { InsightTileFrame } from "../InsightTileFrame";
+
+// Cohort survival from Neon subscriptions: rows are signup months, columns
+// are months since subscribing, cells are % still subscribed. Shares the
+// cohort-triangle rendering with weekly retention.
+export function ChurnHeatmapTile() {
+	const trpc = useTRPC();
+	const query = useQuery(
+		trpc.business.getChurnCohorts.queryOptions({ months: 7 }),
+	);
+
+	const data = query.data ?? [];
+	const cohortMonths = [...new Set(data.map((row) => row.cohort_month))];
+	const offsets = [...new Set(data.map((row) => row.month_offset))].sort(
+		(a, b) => a - b,
+	);
+	const byCell = new Map(
+		data.map((row) => [`${row.cohort_month}:${row.month_offset}`, row]),
+	);
+
+	const rows: CohortRow[] = cohortMonths.map((cohort) => ({
+		key: cohort,
+		label: formatMonth(cohort),
+		size: byCell.get(`${cohort}:0`)?.cohort_size ?? 0,
+		cells: offsets.map((offset) => {
+			const cell = byCell.get(`${cohort}:${offset}`);
+			return cell
+				? { pct: cell.surviving_pct, state: "complete" as const }
+				: { pct: null, state: "future" as const };
+		}),
+	}));
+
+	return (
+		<InsightTileFrame
+			title="Paid churn — cohort survival"
+			description="% of subscriptions started each month still active k months later (Neon, enterprise excluded)"
+			isLoading={query.isLoading}
+			error={query.error}
+			empty={data.length === 0}
+		>
+			<CohortGrid
+				columnLabels={offsets.map((offset) => `Month ${offset}`)}
+				rows={rows}
+				labelHeader="Cohort"
+				sizeHeader="Subs"
+			/>
+		</InsightTileFrame>
+	);
+}

apps/admin/src/app/(dashboard)/components/ChurnHeatmapTile/index.ts

@@ -0,0 +1 @@
+export { ChurnHeatmapTile } from "./ChurnHeatmapTile";

apps/admin/src/app/(dashboard)/components/CohortGrid/CohortGrid.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { cn } from "@superset/ui/utils";
+
+// Shared cohort-triangle rendering for retention and survival grids: solid
+// chips scaled by percentage, dashed outline while a period is still in
+// progress, and nothing at all for periods a cohort hasn't reached.
+export type CohortCellState = "complete" | "inProgress" | "future";
+
+export interface CohortCell {
+	pct: number | null;
+	state: CohortCellState;
+}
+
+export interface CohortRow {
+	key: string;
+	label: string;
+	size: number;
+	cells: CohortCell[];
+	emphasis?: boolean;
+}
+
+interface CohortGridProps {
+	columnLabels: string[];
+	rows: CohortRow[];
+	labelHeader?: string;
+	sizeHeader?: string;
+}
+
+function Cell({ cell, isBaseline }: { cell: CohortCell; isBaseline: boolean }) {
+	if (cell.state === "future" || cell.pct === null) {
+		return <div />;
+	}
+	if (cell.state === "inProgress") {
+		return (
+			<div className="border-border text-muted-foreground rounded-md border border-dashed px-1 py-3 text-center tabular-nums">
+				{cell.pct.toFixed(1)}%
+			</div>
+		);
+	}
+	return (
+		<div
+			className={cn(
+				"rounded-md px-1 py-3 text-center tabular-nums",
+				(isBaseline || cell.pct >= 45) && "text-white",
+			)}
+			style={{
+				background: isBaseline
+					? "var(--chart-1)"
+					: `color-mix(in oklch, var(--chart-1) ${Math.max(8, Math.round(cell.pct))}%, transparent)`,
+			}}
+		>
+			{cell.pct.toFixed(1)}%
+		</div>
+	);
+}
+
+export function CohortGrid({
+	columnLabels,
+	rows,
+	labelHeader = "Cohort",
+	sizeHeader = "Size",
+}: CohortGridProps) {
+	return (
+		<div className="overflow-x-auto">
+			<div
+				className="grid min-w-[860px] items-center gap-1 text-xs"
+				style={{
+					gridTemplateColumns: `5.5rem 3.5rem repeat(${columnLabels.length}, minmax(3.5rem, 1fr))`,
+				}}
+			>
+				<span className="text-muted-foreground">{labelHeader}</span>
+				<span className="text-muted-foreground pr-3 text-right">
+					{sizeHeader}
+				</span>
+				{columnLabels.map((label) => (
+					<span key={label} className="text-muted-foreground text-center">
+						{label}
+					</span>
+				))}
+
+				{rows.map((row) => [
+					<span
+						key={`${row.key}-label`}
+						className={cn(
+							"whitespace-nowrap",
+							row.emphasis ? "font-medium" : "text-muted-foreground",
+						)}
+					>
+						{row.label}
+					</span>,
+					<span
+						key={`${row.key}-size`}
+						className={cn(
+							"pr-3 text-right tabular-nums",
+							row.emphasis && "font-medium",
+						)}
+					>
+						{row.size}
+					</span>,
+					...columnLabels.map((label, index) => (
+						<Cell
+							key={`${row.key}-${label}`}
+							cell={row.cells[index] ?? { pct: null, state: "future" }}
+							isBaseline={index === 0}
+						/>
+					)),
+				])}
+			</div>
+		</div>
+	);
+}

apps/admin/src/app/(dashboard)/components/CohortGrid/index.ts

@@ -0,0 +1,2 @@
+export type { CohortCell, CohortCellState, CohortRow } from "./CohortGrid";
+export { CohortGrid } from "./CohortGrid";