fix: address PR review — add auth to API routes + polish

- Add Supabase session validation to /api/dashboard/metrics and /activity
- Extract shared types (DashboardMetrics, ActivityItem, POLL_INTERVAL_MS)
- Add 1-second tick for live 'Updated X ago' counter
- Add loading spinner for RecentActivity initial fetch
- Return 500 (not 200) on activity fetch error
- Remove duplicate interface definitions

Co-authored-by: dashboard <dashboard@miriad.systems>

Author: Miriad

app/api/dashboard/activity/route.ts

@@ -1,18 +1,25 @@
 import { NextResponse } from "next/server";
+import { createClient } from "@/lib/supabase/server";
 import { dashboardQuery } from "@/lib/sanity/dashboard";
+import type { ActivityItem } from "@/lib/types/dashboard";
 
 export const dynamic = "force-dynamic";
 
-interface ActivityItem {
-	_id: string;
-	_type: string;
-	_updatedAt: string;
-	title?: string;
-	companyName?: string;
-	status?: string;
-}
-
 export async function GET() {
+	const hasSupabase =
+		process.env.NEXT_PUBLIC_SUPABASE_URL &&
+		process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+	if (hasSupabase) {
+		const supabase = await createClient();
+		const {
+			data: { user },
+		} = await supabase.auth.getUser();
+		if (!user) {
+			return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+		}
+	}
+
 	try {
 		const items = await dashboardQuery<ActivityItem[]>(`
 			*[_type in ["contentIdea", "automatedVideo", "sponsorLead"]] | order(_updatedAt desc) [0..9] {
@@ -28,6 +35,6 @@ export async function GET() {
 		return NextResponse.json(items ?? []);
 	} catch (error) {
 		console.error("Failed to fetch activity:", error);
-		return NextResponse.json([]);
+		return NextResponse.json([], { status: 500 });
 	}
 }

app/api/dashboard/metrics/route.ts

@@ -1,9 +1,25 @@
 import { NextResponse } from "next/server";
+import { createClient } from "@/lib/supabase/server";
 import { dashboardQuery } from "@/lib/sanity/dashboard";
+import type { DashboardMetrics } from "@/lib/types/dashboard";
 
 export const dynamic = "force-dynamic";
 
 export async function GET() {
+	const hasSupabase =
+		process.env.NEXT_PUBLIC_SUPABASE_URL &&
+		process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+	if (hasSupabase) {
+		const supabase = await createClient();
+		const {
+			data: { user },
+		} = await supabase.auth.getUser();
+		if (!user) {
+			return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+		}
+	}
+
 	try {
 		const [videosPublished, flaggedVideos, newIdeas, sponsorPipeline] =
 			await Promise.all([
@@ -21,12 +37,14 @@ export async function GET() {
 				),
 			]);
 
-		return NextResponse.json({
+		const metrics: DashboardMetrics = {
 			videosPublished: videosPublished ?? 0,
 			flaggedForReview: (flaggedVideos ?? 0) + (newIdeas ?? 0),
 			sponsorPipeline: sponsorPipeline ?? 0,
 			revenue: null,
-		});
+		};
+
+		return NextResponse.json(metrics);
 	} catch (error) {
 		console.error("Failed to fetch dashboard metrics:", error);
 		return NextResponse.json(

components/recent-activity.tsx

@@ -2,16 +2,8 @@
 
 import { useEffect, useState, useCallback } from "react";
 import { Badge } from "@/components/ui/badge";
-import { Lightbulb, FileVideo, Handshake, Clock } from "lucide-react";
-
-interface ActivityItem {
-	_id: string;
-	_type: string;
-	_updatedAt: string;
-	title?: string;
-	companyName?: string;
-	status?: string;
-}
+import { Lightbulb, FileVideo, Handshake, Clock, Loader2 } from "lucide-react";
+import { POLL_INTERVAL_MS, type ActivityItem } from "@/lib/types/dashboard";
 
 const typeConfig: Record<
 	string,
@@ -20,20 +12,17 @@ const typeConfig: Record<
 	contentIdea: {
 		icon: Lightbulb,
 		label: "Idea",
-		color:
-			"bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
+		color: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
 	},
 	automatedVideo: {
 		icon: FileVideo,
 		label: "Video",
-		color:
-			"bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300",
+		color: "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300",
 	},
 	sponsorLead: {
 		icon: Handshake,
 		label: "Sponsor",
-		color:
-			"bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
+		color: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
 	},
 };
 
@@ -49,6 +38,7 @@ function formatTimeAgo(dateString: string) {
 
 export function RecentActivity() {
 	const [items, setItems] = useState<ActivityItem[]>([]);
+	const [isLoading, setIsLoading] = useState(true);
 
 	const fetchActivity = useCallback(async () => {
 		try {
@@ -59,52 +49,45 @@ export function RecentActivity() {
 			}
 		} catch (error) {
 			console.error("Failed to fetch activity:", error);
+		} finally {
+			setIsLoading(false);
 		}
 	}, []);
 
 	useEffect(() => {
 		fetchActivity();
-		const interval = setInterval(fetchActivity, 30000);
+		const interval = setInterval(fetchActivity, POLL_INTERVAL_MS);
 		return () => clearInterval(interval);
 	}, [fetchActivity]);
 
 	return (
 		<div className="rounded-lg border p-6">
 			<h2 className="text-lg font-semibold">Recent Activity</h2>
-			{items.length === 0 ? (
+			{isLoading ? (
+				<div className="mt-4 flex items-center justify-center py-8">
+					<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+				</div>
+			) : items.length === 0 ? (
 				<p className="mt-4 text-sm text-muted-foreground">
-					No activity yet \u2014 content will appear here as the pipeline
-					runs.
+					No activity yet \u2014 content will appear here as the pipeline runs.
 				</p>
 			) : (
 				<div className="mt-4 space-y-3">
 					{items.map((item) => {
-						const config =
-							typeConfig[item._type] ?? typeConfig.contentIdea;
+						const config = typeConfig[item._type] ?? typeConfig.contentIdea;
 						const Icon = config.icon;
-						const name =
-							item.title || item.companyName || "Untitled";
+						const name = item.title || item.companyName || "Untitled";
 						return (
-							<div
-								key={item._id}
-								className="flex items-center gap-3"
-							>
+							<div key={item._id} className="flex items-center gap-3">
 								<Icon className="h-4 w-4 shrink-0 text-muted-foreground" />
 								<div className="min-w-0 flex-1">
-									<p className="truncate text-sm font-medium">
-										{name}
-									</p>
+									<p className="truncate text-sm font-medium">{name}</p>
 									<div className="flex items-center gap-2">
-										<Badge
-											variant="outline"
-											className={`text-xs ${config.color}`}
-										>
+										<Badge variant="outline" className={`text-xs ${config.color}`}>
 											{config.label}
 										</Badge>
 										{item.status && (
-											<span className="text-xs text-muted-foreground">
-												{item.status}
-											</span>
+											<span className="text-xs text-muted-foreground">{item.status}</span>
 										)}
 									</div>
 								</div>

components/section-cards-live.tsx

@@ -10,16 +10,14 @@ import {
 } from "@/components/ui/card";
 import { FileVideo, Flag, Handshake, DollarSign, RefreshCw } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { POLL_INTERVAL_MS, type DashboardMetrics } from "@/lib/types/dashboard";
 
-interface Metrics {
-	videosPublished: number;
-	flaggedForReview: number;
-	sponsorPipeline: number;
-	revenue: number | null;
-}
-
-export function SectionCardsLive({ initialMetrics }: { initialMetrics?: Metrics }) {
-	const [metrics, setMetrics] = useState<Metrics>(
+export function SectionCardsLive({
+	initialMetrics,
+}: {
+	initialMetrics?: DashboardMetrics;
+}) {
+	const [metrics, setMetrics] = useState<DashboardMetrics>(
 		initialMetrics ?? {
 			videosPublished: 0,
 			flaggedForReview: 0,
@@ -29,6 +27,7 @@ export function SectionCardsLive({ initialMetrics }: { initialMetrics?: Metrics
 	);
 	const [lastUpdated, setLastUpdated] = useState<Date>(new Date());
 	const [isRefreshing, setIsRefreshing] = useState(false);
+	const [secondsAgo, setSecondsAgo] = useState(0);
 
 	const fetchMetrics = useCallback(async () => {
 		try {
@@ -38,6 +37,7 @@ export function SectionCardsLive({ initialMetrics }: { initialMetrics?: Metrics
 				const data = await res.json();
 				setMetrics(data);
 				setLastUpdated(new Date());
+				setSecondsAgo(0);
 			}
 		} catch (error) {
 			console.error("Failed to refresh metrics:", error);
@@ -48,10 +48,24 @@ export function SectionCardsLive({ initialMetrics }: { initialMetrics?: Metrics
 
 	useEffect(() => {
 		fetchMetrics();
-		const interval = setInterval(fetchMetrics, 30000);
+		const interval = setInterval(fetchMetrics, POLL_INTERVAL_MS);
 		return () => clearInterval(interval);
 	}, [fetchMetrics]);
 
+	useEffect(() => {
+		const tick = setInterval(() => {
+			setSecondsAgo(Math.floor((Date.now() - lastUpdated.getTime()) / 1000));
+		}, 1000);
+		return () => clearInterval(tick);
+	}, [lastUpdated]);
+
+	const timeAgo =
+		secondsAgo < 5
+			? "just now"
+			: secondsAgo < 60
+				? `${secondsAgo}s ago`
+				: `${Math.floor(secondsAgo / 60)}m ago`;
+
 	const cards = [
 		{
 			title: "Videos Published",
@@ -79,15 +93,6 @@ export function SectionCardsLive({ initialMetrics }: { initialMetrics?: Metrics
 		},
 	];
 
-	// Format relative time
-	const secondsAgo = Math.floor((Date.now() - lastUpdated.getTime()) / 1000);
-	const timeAgo =
-		secondsAgo < 5
-			? "just now"
-			: secondsAgo < 60
-				? `${secondsAgo}s ago`
-				: `${Math.floor(secondsAgo / 60)}m ago`;
-
 	return (
 		<div className="flex flex-col gap-2">
 			<div className="flex items-center justify-between">

lib/types/dashboard.ts

@@ -0,0 +1,17 @@
+export const POLL_INTERVAL_MS = 30000;
+
+export interface DashboardMetrics {
+	videosPublished: number;
+	flaggedForReview: number;
+	sponsorPipeline: number;
+	revenue: number | null;
+}
+
+export interface ActivityItem {
+	_id: string;
+	_type: string;
+	_updatedAt: string;
+	title?: string;
+	companyName?: string;
+	status?: string;
+}