Add Today action lists and clickable KPI links (Phase 3).

Show upcoming appointments for the rest of today and link each KPI card to its relevant dashboard tab.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/today/KpiCard.tsx

@@ -1,3 +1,4 @@
+import { Link } from '@/i18n/navigation';
 import { Card } from '@/components/ui/shared/Card';
 import type { KpiCardColor } from '@/components/today/widget-registry';
 import type { LucideIcon } from 'lucide-react';
@@ -18,6 +19,7 @@ interface KpiCardProps {
   icon?: LucideIcon;
   color?: KpiCardColor;
   loading?: boolean;
+  href?: string;
 }
 
 export function KpiCard({
@@ -27,9 +29,12 @@ export function KpiCard({
   icon: Icon,
   color = 'default',
   loading = false,
+  href,
 }: KpiCardProps) {
-  return (
-    <Card className={colorClasses[color]}>
+  const card = (
+    <Card
+      className={`${colorClasses[color]} ${href && !loading ? 'transition-opacity hover:opacity-90' : ''}`}
+    >
       <div className="flex items-start justify-between gap-3">
         <p className="text-sm font-medium">{title}</p>
         {Icon ? <Icon className="h-4 w-4 shrink-0 opacity-80" aria-hidden /> : null}
@@ -44,4 +49,14 @@ export function KpiCard({
       ) : null}
     </Card>
   );
+
+  if (href && !loading) {
+    return (
+      <Link href={href} className="block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 rounded-[var(--radius-lg)]">
+        {card}
+      </Link>
+    );
+  }
+
+  return card;
 }