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 = {