feat: add dashboard request panels

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>