malty/ca-grow-ops-manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
- 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
1 changed files with 16 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
frontend/src/pages/DashboardPage.tsx
View file

@ -1,4 +1,5 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { useAuth } from '../context/AuthContext'; import { useAuth } from '../context/AuthContext';
import { useToast } from '../context/ToastContext'; import { useToast } from '../context/ToastContext';
import { Plus, Leaf, ClipboardCheck, AlertTriangle, Activity, Droplet, Salad, Bug, Eye, ArrowRight } from 'lucide-react'; 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 ? [ const metrics = overview ? [
{ label: 'Active Batches', value: overview.activeBatches.toString(), icon: Leaf, accent: 'accent' }, { label: 'Active Batches', value: overview.activeBatches.toString(), icon: Leaf, accent: 'accent', link: '/batches' },
{ label: 'Total Plants', value: overview.totalPlants.toString(), icon: Leaf, accent: 'success' }, { label: 'Total Plants', value: overview.totalPlants.toString(), icon: Leaf, accent: 'success', link: '/batches' },
{ label: 'Tasks Completed', value: overview.tasksCompletedThisWeek.toString(), icon: ClipboardCheck, accent: 'accent' }, { label: 'Tasks Completed', value: overview.tasksCompletedThisWeek.toString(), icon: ClipboardCheck, accent: 'accent', link: '/tasks' },
{ label: 'Tasks Pending', value: overview.tasksPending.toString(), icon: AlertTriangle, accent: 'warning' }, { label: 'Tasks Pending', value: overview.tasksPending.toString(), icon: AlertTriangle, accent: 'warning', link: '/tasks' },
{ label: 'Touch Points', value: overview.touchPointsToday.toString(), icon: Activity, accent: 'accent' }, { label: 'Touch Points', value: overview.touchPointsToday.toString(), icon: Activity, accent: 'accent', link: '/touch-points' },
{ label: 'Rooms', value: overview.totalRooms.toString(), icon: Leaf, accent: 'neutral' }, { label: 'Rooms', value: overview.totalRooms.toString(), icon: Leaf, accent: 'neutral', link: '/rooms' },
] : []; ] : [];
const handlePullRefresh = async () => { const handlePullRefresh = async () => {
@ -114,21 +115,25 @@ export default function DashboardPage() {
)) ))
) : ( ) : (
metrics.map((m, i) => ( metrics.map((m, i) => (
<div <Link
key={i} 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` }} style={{ animationDelay: `${i * 50}ms` }}
> >
<div className={`w-8 h-8 rounded-md flex items-center justify-center mb-3 ${getAccentClasses(m.accent)}`}> <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} /> <m.icon size={16} />
</div> </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"> <p className="text-2xl font-semibold text-primary tracking-tight">
{m.value} {m.value}
</p> </p>
<p className="text-xs text-tertiary mt-1"> <p className="text-xs text-tertiary mt-1">
{m.label} {m.label}
</p> </p>
</div> </Link>
)) ))
)} )}
</div> </div>