refactor: migrate DashboardPage to TanStack Query

Replace manual useState/useEffect data fetching with useDashboard hook
that uses TanStack Query for automatic caching, refetching, and loading
state management.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/hooks/useDashboard.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query'
+import api from '@/services/api'
+import type { DashboardResponse } from '@/types'
+
+export function useDashboard(jahr: number) {
+  return useQuery({
+    queryKey: ['dashboard', jahr],
+    queryFn: () => api.get<DashboardResponse>('/reports/dashboard', { params: { jahr } }).then(r => r.data),
+  })
+}

frontend/src/pages/DashboardPage.tsx

@@ -1,11 +1,10 @@
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import {
   BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
   PieChart, Pie, Cell, ResponsiveContainer,
 } from 'recharts'
 import { FileText, Clock, Code, Stethoscope } from 'lucide-react'
-import api from '@/services/api'
+import { useDashboard } from '@/hooks/useDashboard'
-import type { DashboardResponse } from '@/types'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import {
   Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
@@ -31,16 +30,7 @@ const CHART_COLORS = [
 export function DashboardPage() {
   const currentYear = new Date().getFullYear()
   const [jahr, setJahr] = useState(currentYear)
-  const [data, setData] = useState<DashboardResponse | null>(null)
+  const { data, isLoading: loading } = useDashboard(jahr)
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    setLoading(true)
-    api.get<DashboardResponse>('/reports/dashboard', { params: { jahr } })
-      .then((res) => setData(res.data))
-      .catch(() => setData(null))
-      .finally(() => setLoading(false))
-  }, [jahr])
 
   const fallgruppenData = data
     ? Object.entries(data.kpis.fallgruppen).map(([key, value]) => ({