feat: dashboard metrics now clickable with navigation
- 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:
parent
93a39c2f2c
commit
625deb2bd3
1 changed files with 16 additions and 11 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue