feat: KPI-cards klikbaar met SPA-navigatie naar detailpagina

frontend/src/components/ui.jsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { X, Loader2 } from 'lucide-react';
 
 // ---- Kleurmapping voor statussen ----
@@ -58,6 +59,7 @@ export function Card({ title, subtitle, actions, children, className = '', paddi
 }
 
 export function KpiCard({ icon: Icon, label, value, sub, color = 'accent', to, iconColor: iconCol }) {
+  const navigate = useNavigate();
   const colors = {
     accent: 'text-accent bg-accent-soft',
     green: 'text-green bg-green/15',
@@ -66,8 +68,11 @@ export function KpiCard({ icon: Icon, label, value, sub, color = 'accent', to, i
     blue: 'text-blue bg-blue/15',
     purple: 'text-purple bg-purple/15'
   };
-  const inner = (
-    <div className="bg-card border border-border-soft rounded-xl p-4 card-hover h-full">
+  return (
+    <div
+      onClick={to ? () => navigate(to) : undefined}
+      className={`bg-card border border-border-soft rounded-xl p-4 card-hover h-full ${to ? 'cursor-pointer' : ''}`}
+    >
       <div className="flex items-start justify-between">
         <div>
           <div className="text-[12px] text-muted mb-1">{label}</div>
@@ -82,7 +87,6 @@ export function KpiCard({ icon: Icon, label, value, sub, color = 'accent', to, i
       </div>
     </div>
   );
-  return to ? <a href={to} className="block">{inner}</a> : inner;
 }
 
 const BTN_VARIANTS = {

frontend/src/pages/Dashboard.jsx

@@ -4,7 +4,7 @@ import {
   Users, Briefcase, CheckCircle2, Clock, Receipt, Wallet,
   AlertTriangle, Lightbulb, Activity, ArrowRight
 } from 'lucide-react';
-import { useSettings, iconColor } from '../settings';
+import { useSettings } from '../settings';
 import {
   ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, CartesianGrid,
   PieChart, Pie, Cell, Legend
@@ -64,12 +64,12 @@ export default function Dashboard() {
 
       {/* KPI's */}
       <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-3">
-        <KpiCard icon={Users} label="Cliënten" value={stats.totalClients} sub={`${stats.activeClients} actief · ${stats.leads} leads`} color="accent" iconColor={iconColor('users', settings)} />
-        <KpiCard icon={Briefcase} label="Lopende engagements" value={stats.activeEngagements} color="blue" iconColor={iconColor('briefcase', settings)} />
-        <KpiCard icon={CheckCircle2} label="Open taken" value={stats.totalTasks - stats.completedTasks} sub={stats.overdueTasks > 0 ? `${stats.overdueTasks} te laat` : undefined} color={stats.overdueTasks > 0 ? 'red' : 'green'} iconColor={iconColor('check-circle', settings)} />
-        <KpiCard icon={Clock} label="Uren totaal" value={fmt.hours(stats.totalHours)} sub={`${fmt.hours(stats.billableHours)} facturabel`} color="purple" iconColor={iconColor('clock', settings)} />
-        <KpiCard icon={Receipt} label="Openstaand" value={fmt.euro(stats.totalOutstanding)} color="yellow" iconColor={iconColor('receipt', settings)} />
-        <KpiCard icon={Wallet} label="Betaald" value={fmt.euro(stats.totalPaid)} color="green" iconColor={iconColor('wallet', settings)} />
+        <KpiCard icon={Users} label="Cliënten" value={stats.totalClients} sub={`${stats.activeClients} actief · ${stats.leads} leads`} color="accent" to="/clients" />
+        <KpiCard icon={Briefcase} label="Lopende engagements" value={stats.activeEngagements} color="blue" to="/engagements" />
+        <KpiCard icon={CheckCircle2} label="Open taken" value={stats.totalTasks - stats.completedTasks} sub={stats.overdueTasks > 0 ? `${stats.overdueTasks} te laat` : undefined} color={stats.overdueTasks > 0 ? 'red' : 'green'} to="/tasks" />
+        <KpiCard icon={Clock} label="Uren totaal" value={fmt.hours(stats.totalHours)} sub={`${fmt.hours(stats.billableHours)} facturabel`} color="purple" to="/time" />
+        <KpiCard icon={Receipt} label="Openstaand" value={fmt.euro(stats.totalOutstanding)} color="yellow" to="/invoices" />
+        <KpiCard icon={Wallet} label="Betaald" value={fmt.euro(stats.totalPaid)} color="green" to="/finance" />
       </div>
 
       {/* Grafieken */}

public/spa/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Mek-Tech — Consultancy Platform</title>
-    <script type="module" crossorigin src="/app/assets/index-ChJCS-Nd.js"></script>
+    <script type="module" crossorigin src="/app/assets/index-CzYZ2WD_.js"></script>
     <link rel="stylesheet" crossorigin href="/app/assets/index-Cmof3-vz.css">
   </head>
   <body>