From 06a25b4e28c2256669c6c40129cef629f6ffa9bd Mon Sep 17 00:00:00 2001
From: neodk2004 <barac.daniel@gmail.com>
Date: Tue, 25 Aug 2026 19:14:43 +0200
Subject: [PATCH] feat(admin): link attention stat tiles to their queue pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Open reports and Verifications pending summarized a number but gave no way to
act on it — link each tile straight to /reports and /verification, with
hover/focus states and a chevron affordance so it reads as navigation, not
just a number.
---
 src/app/p/[secret]/page.tsx | 36 ++++++++++++++++++++++++++++--------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/app/p/[secret]/page.tsx b/src/app/p/[secret]/page.tsx
index 09fdb2b..fcbb0d2 100644
--- a/src/app/p/[secret]/page.tsx
+++ b/src/app/p/[secret]/page.tsx
@@ -1,15 +1,18 @@
 "use client";
 
 import { useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useTRPC } from "@/trpc/client";
-import { Flag, Clock, TriangleAlert, TrendingUp, ShieldAlert, Info } from "lucide-react";
+import { Flag, Clock, TriangleAlert, TrendingUp, ShieldAlert, Info, ChevronRight } from "lucide-react";
 import { TimeSeriesChart } from "@/components/admin/TimeSeriesChart";
 import { GranularityToggle, type Granularity } from "@/components/admin/GranularityToggle";
 import { Button } from "@/components/ui/button";
 import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent } from "@/components/ui/card";
 
 export default function AdminDashboard() {
+  const pathname = usePathname();
   const trpc = useTRPC();
   const qc = useQueryClient();
   const { data: stats, isLoading } = useQuery(trpc.admin.getStats.queryOptions());
@@ -95,8 +98,18 @@ export default function AdminDashboard() {
           <div>
             <h2 className="text-sm font-semibold text-foreground mb-3">Needs attention</h2>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-              <AttentionStat icon={Flag} label="Open reports" value={stats?.reports ?? 0} />
-              <AttentionStat icon={Clock} label="Verifications pending" value={stats?.verificationPending ?? 0} />
+              <AttentionStat
+                icon={Flag}
+                label="Open reports"
+                value={stats?.reports ?? 0}
+                href={`${pathname}/reports`}
+              />
+              <AttentionStat
+                icon={Clock}
+                label="Verifications pending"
+                value={stats?.verificationPending ?? 0}
+                href={`${pathname}/verification`}
+              />
             </div>
           </div>
 
@@ -247,31 +260,38 @@ export default function AdminDashboard() {
 /**
  * The only stat tiles with individual weight and color — color means
  * "this needs action" (orange when > 0), not a decorative per-item hue.
+ * Each one links straight to the queue it summarizes.
  */
 function AttentionStat({
   icon: Icon,
   label,
   value,
+  href,
 }: {
   icon: React.ElementType;
   label: string;
   value: number;
+  href: string;
 }) {
   const needsAttention = value > 0;
   return (
-    <div
-      className={`rounded-xl ring-1 px-5 py-4 flex items-center gap-4 ${
-        needsAttention ? "ring-orange-500/30 bg-orange-500/5" : "ring-foreground/10 bg-card"
+    <Link
+      href={href}
+      className={`group rounded-xl ring-1 px-5 py-4 flex items-center gap-4 transition-colors focus-visible:outline-none focus-visible:ring-2 ${
+        needsAttention
+          ? "ring-orange-500/30 bg-orange-500/5 hover:bg-orange-500/10 focus-visible:ring-orange-500/50"
+          : "ring-foreground/10 bg-card hover:bg-muted focus-visible:ring-foreground/30"
       }`}
     >
       <Icon className={`h-5 w-5 shrink-0 ${needsAttention ? "text-orange-400" : "text-muted-foreground"}`} />
-      <div>
+      <div className="flex-1">
         <p className={`text-2xl font-bold ${needsAttention ? "text-orange-400" : "text-foreground"}`}>
           {value.toLocaleString()}
         </p>
         <p className="text-xs text-muted-foreground mt-0.5">{label}</p>
       </div>
-    </div>
+      <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
+    </Link>
   );
 }