From de275976ed73da21305334945e5ae9eb16b685ae Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Wed, 22 Apr 2026 13:50:41 -0400
Subject: [PATCH] feat: add dashboard request panels

---
 .../app/dashboard/components/ActivityFeed.tsx | 31 ++++++++-
 .../dashboard/components/RequestHistory.tsx   | 69 ++++++++++++++++++-
 frontend/src/app/dashboard/page.tsx           | 35 ++++++++--
 3 files changed, 129 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/dashboard/components/ActivityFeed.tsx b/frontend/src/app/dashboard/components/ActivityFeed.tsx
index c809dcb..07ebbc2 100644
--- a/frontend/src/app/dashboard/components/ActivityFeed.tsx
+++ b/frontend/src/app/dashboard/components/ActivityFeed.tsx
@@ -1 +1,30 @@
-export function ActivityFeed() { return null; }
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { transactionApi } from "@/lib/api";
+
+export function ActivityFeed() {
+	const [items, setItems] = useState<any[]>([]);
+	useEffect(() => {
+		transactionApi
+			.getRecentActivity()
+			.then((r) => setItems(r.data.transactions || []));
+	}, []);
+	return (
+		<div className="space-y-2">
+			<div className="text-lg font-semibold">Recent activity</div>
+			{items.map((t) => (
+				<Card key={t.id}>
+					<CardContent className="p-3 text-sm flex justify-between">
+						<span>
+							{t.user?.plexUsername || "You"} • {t.type} •{" "}
+							{t.contentTitle || t.description || "Activity"}
+						</span>
+						<span>{t.amount} $COOP</span>
+					</CardContent>
+				</Card>
+			))}
+		</div>
+	);
+}
diff --git a/frontend/src/app/dashboard/components/RequestHistory.tsx b/frontend/src/app/dashboard/components/RequestHistory.tsx
index 0977934..979e5fe 100644
--- a/frontend/src/app/dashboard/components/RequestHistory.tsx
+++ b/frontend/src/app/dashboard/components/RequestHistory.tsx
@@ -1 +1,68 @@
-export function RequestHistory() { return null; }
+"use client";
+
+import { useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { userApi } from "@/lib/api";
+
+export function RequestHistory() {
+	const [requests, setRequests] = useState<any[]>([]);
+	const [status, setStatus] = useState("");
+	const [query, setQuery] = useState("");
+
+	const load = async () => {
+		const res = await userApi.getRequests(1, 50, status || undefined);
+		setRequests(res.data.requests || []);
+	};
+
+	useEffect(() => {
+		load();
+	}, [status]);
+
+	const filtered = requests.filter(
+		(r) =>
+			!query ||
+			`${r.title} ${r.mediaType}`.toLowerCase().includes(query.toLowerCase()),
+	);
+
+	return (
+		<div className="space-y-4">
+			<div className="flex gap-2">
+				<Input
+					value={query}
+					onChange={(e) => setQuery(e.target.value)}
+					placeholder="Filter requests"
+				/>
+				<Button variant="secondary" onClick={() => setStatus("")}>
+					All
+				</Button>
+				<Button variant="secondary" onClick={() => setStatus("PENDING")}>
+					Pending
+				</Button>
+				<Button variant="secondary" onClick={() => setStatus("APPROVED")}>
+					Approved
+				</Button>
+				<Button variant="secondary" onClick={() => setStatus("DECLINED")}>
+					Declined
+				</Button>
+			</div>
+			<div className="grid gap-3">
+				{filtered.map((r) => (
+					<Card key={r.id}>
+						<CardContent className="flex items-center justify-between p-4">
+							<div>
+								<div className="font-medium">{r.title}</div>
+								<div className="text-sm text-muted-foreground">
+									{r.mediaType} • {r.creditsCost} $COOP
+								</div>
+							</div>
+							<Badge>{r.status}</Badge>
+						</CardContent>
+					</Card>
+				))}
+			</div>
+		</div>
+	);
+}
diff --git a/frontend/src/app/dashboard/page.tsx b/frontend/src/app/dashboard/page.tsx
index 085ef9c..5de0eb5 100644
--- a/frontend/src/app/dashboard/page.tsx
+++ b/frontend/src/app/dashboard/page.tsx
@@ -12,7 +12,7 @@ import {
 } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { api, overseerApi } from "@/lib/api";
+import { api, overseerApi, userApi } from "@/lib/api";
 import { useSocket } from "@/lib/socket";
 import { useStore } from "@/lib/store";
 import { formatNumber } from "@/lib/utils";
@@ -33,6 +33,7 @@ export default function DashboardPage() {
 	const { isAuthenticated } = useStore();
 	const [wallet, setWallet] = useState<WalletData | null>(null);
 	const [requestCosts, setRequestCosts] = useState({ movie: 500, tv: 1000 });
+	const [pendingRequests, setPendingRequests] = useState<any[]>([]);
 	const [isLoading, setIsLoading] = useState(true);
 	const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
 	const socket = useSocket();
@@ -59,12 +60,14 @@ export default function DashboardPage() {
 
 	const loadData = async () => {
 		try {
-			const [walletRes, costsRes] = await Promise.all([
+			const [walletRes, costsRes, reqRes] = await Promise.all([
 				api.get("/wallet"),
 				overseerApi.getCosts(),
+				userApi.getRequests(1, 10, "PENDING"),
 			]);
 			setWallet(walletRes.data);
 			setRequestCosts(costsRes.data);
+			setPendingRequests(reqRes.data.requests || []);
 		} catch {
 			toast.error("Failed to load dashboard");
 		} finally {
@@ -111,8 +114,32 @@ export default function DashboardPage() {
 					</div>
 				</CardContent>
 			</Card>
-			<div className="text-sm text-muted-foreground">
-				Request costs: movie {requestCosts.movie}, tv {requestCosts.tv}
+			<div className="grid gap-4 md:grid-cols-3">
+				<Card>
+					<CardHeader>
+						<CardTitle>Pending requests</CardTitle>
+						<CardDescription>My requests waiting</CardDescription>
+					</CardHeader>
+					<CardContent className="text-2xl font-bold">
+						{pendingRequests.length}
+					</CardContent>
+				</Card>
+				<Card>
+					<CardHeader>
+						<CardTitle>Movie cost</CardTitle>
+					</CardHeader>
+					<CardContent className="text-2xl font-bold">
+						{requestCosts.movie}
+					</CardContent>
+				</Card>
+				<Card>
+					<CardHeader>
+						<CardTitle>TV cost</CardTitle>
+					</CardHeader>
+					<CardContent className="text-2xl font-bold">
+						{requestCosts.tv}
+					</CardContent>
+				</Card>
 			</div>
 			<Tabs defaultValue="history">
 				<TabsList>