From 4b4af6b42d21a8a4592c049c93a85c31fa05b4a2 Mon Sep 17 00:00:00 2001
From: CCS Admin <martin.porwoll@complexcaresolutions.de>
Date: Thu, 26 Feb 2026 18:21:33 +0000
Subject: [PATCH] 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   | 10 ++++++++++
 frontend/src/pages/DashboardPage.tsx | 16 +++-------------
 2 files changed, 13 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/hooks/useDashboard.ts

diff --git a/frontend/src/hooks/useDashboard.ts b/frontend/src/hooks/useDashboard.ts
new file mode 100644
index 0000000..559275c
--- /dev/null
+++ b/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),
+  })
+}
diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index 2398b01..99f545a 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/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 type { DashboardResponse } from '@/types'
+import { useDashboard } from '@/hooks/useDashboard'
 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 [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 { data, isLoading: loading } = useDashboard(jahr)
 
   const fallgruppenData = data
     ? Object.entries(data.kpis.fallgruppen).map(([key, value]) => ({