feat: dashboard metrics now clickable with navigation
Some checks are pending
Deploy to Production / deploy (push) Waiting to run
Test / backend-test (push) Waiting to run
Test / frontend-test (push) Waiting to run

- Active Batches → /batches
- Total Plants → /batches
- Tasks Completed → /tasks
- Tasks Pending → /tasks
- Touch Points → /touch-points
- Rooms → /rooms
- Added arrow indicator on hover
This commit is contained in:
fullsizemalt 2025-12-12 17:24:07 -08:00
parent 93a39c2f2c
commit 625deb2bd3

View file

@ -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>