From 625deb2bd3025894c51add3d99cfab40534652e1 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Fri, 12 Dec 2025 17:24:07 -0800
Subject: [PATCH] feat: dashboard metrics now clickable with navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Active Batches → /batches
- Total Plants → /batches
- Tasks Completed → /tasks
- Tasks Pending → /tasks
- Touch Points → /touch-points
- Rooms → /rooms
- Added arrow indicator on hover
---
 frontend/src/pages/DashboardPage.tsx | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index 38cb797..511fd6e 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import { useToast } from '../context/ToastContext';
 import { Plus, Leaf, ClipboardCheck, AlertTriangle, Activity, Droplet, Salad, Bug, Eye, ArrowRight } from 'lucide-react';
@@ -58,12 +59,12 @@ export default function DashboardPage() {
     };
 
     const metrics = overview ? [
-        { label: 'Active Batches', value: overview.activeBatches.toString(), icon: Leaf, accent: 'accent' },
-        { label: 'Total Plants', value: overview.totalPlants.toString(), icon: Leaf, accent: 'success' },
-        { label: 'Tasks Completed', value: overview.tasksCompletedThisWeek.toString(), icon: ClipboardCheck, accent: 'accent' },
-        { label: 'Tasks Pending', value: overview.tasksPending.toString(), icon: AlertTriangle, accent: 'warning' },
-        { label: 'Touch Points', value: overview.touchPointsToday.toString(), icon: Activity, accent: 'accent' },
-        { label: 'Rooms', value: overview.totalRooms.toString(), icon: Leaf, accent: 'neutral' },
+        { label: 'Active Batches', value: overview.activeBatches.toString(), icon: Leaf, accent: 'accent', link: '/batches' },
+        { label: 'Total Plants', value: overview.totalPlants.toString(), icon: Leaf, accent: 'success', link: '/batches' },
+        { label: 'Tasks Completed', value: overview.tasksCompletedThisWeek.toString(), icon: ClipboardCheck, accent: 'accent', link: '/tasks' },
+        { label: 'Tasks Pending', value: overview.tasksPending.toString(), icon: AlertTriangle, accent: 'warning', link: '/tasks' },
+        { label: 'Touch Points', value: overview.touchPointsToday.toString(), icon: Activity, accent: 'accent', link: '/touch-points' },
+        { label: 'Rooms', value: overview.totalRooms.toString(), icon: Leaf, accent: 'neutral', link: '/rooms' },
     ] : [];
 
     const handlePullRefresh = async () => {
@@ -114,13 +115,17 @@ export default function DashboardPage() {
                         ))
                     ) : (
                         metrics.map((m, i) => (
-                            <div
+                            <Link
                                 key={i}
-                                className="card card-interactive p-4 group cursor-default"
+                                to={m.link}
+                                className="card card-interactive p-4 group"
                                 style={{ animationDelay: `${i * 50}ms` }}
                             >
-                                <div className={`w-8 h-8 rounded-md flex items-center justify-center mb-3 ${getAccentClasses(m.accent)}`}>
-                                    <m.icon size={16} />
+                                <div className="flex items-start justify-between mb-3">
+                                    <div className={`w-8 h-8 rounded-md flex items-center justify-center ${getAccentClasses(m.accent)}`}>
+                                        <m.icon size={16} />
+                                    </div>
+                                    <ArrowRight size={12} className="text-tertiary opacity-0 group-hover:opacity-100 transition-opacity duration-fast" />
                                 </div>
                                 <p className="text-2xl font-semibold text-primary tracking-tight">
                                     {m.value}
@@ -128,7 +133,7 @@ export default function DashboardPage() {
                                 <p className="text-xs text-tertiary mt-1">
                                     {m.label}
                                 </p>
-                            </div>
+                            </Link>
                         ))
                     )}
                 </div>