From 7a372922e61687978c3a6e4361bdf2eccabb85e1 Mon Sep 17 00:00:00 2001
From: CCS Admin <martin.porwoll@complexcaresolutions.de>
Date: Sat, 28 Feb 2026 16:01:29 +0000
Subject: [PATCH] fix: show admin dashboard cards even when no data exists for
 selected year

Previously the Abrechnungsstatus and Top 10 Gutachter cards were hidden
when no data existed (e.g. gutachter field unpopulated in 2026). Now both
cards render with a "no data" placeholder message instead.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/DashboardPage.tsx | 64 +++++++++++++++-------------
 1 file changed, 35 insertions(+), 29 deletions(-)

diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index 8370c01..8e38242 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -346,13 +346,13 @@ export function DashboardPage() {
       {isAdmin && data && (
         <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
           {/* Abrechnungsstatus Donut */}
-          {abrechnungsData.length > 0 && (
-            <Card>
-              <CardHeader>
-                <CardTitle>Abrechnungsstatus</CardTitle>
-                <p className="text-xs text-muted-foreground">Gutachten: abgerechnet vs. offen</p>
-              </CardHeader>
-              <CardContent>
+          <Card>
+            <CardHeader>
+              <CardTitle>Abrechnungsstatus</CardTitle>
+              <p className="text-xs text-muted-foreground">Gutachten: abgerechnet vs. offen</p>
+            </CardHeader>
+            <CardContent>
+              {abrechnungsData.length > 0 ? (
                 <ResponsiveContainer width="100%" height={300}>
                   <PieChart>
                     <Pie
@@ -386,37 +386,43 @@ export function DashboardPage() {
                     />
                   </PieChart>
                 </ResponsiveContainer>
-              </CardContent>
-            </Card>
-          )}
+              ) : (
+                <p className="text-sm text-muted-foreground py-8 text-center">Keine Gutachten für {jahr} vorhanden.</p>
+              )}
+            </CardContent>
+          </Card>
 
           {/* Gutachter-Verteilung */}
-          {topGutachterData && topGutachterData.items.length > 0 && (
+          {topGutachterData && (
             <Card className="lg:col-span-2">
               <CardHeader>
                 <CardTitle>Top 10 Gutachter</CardTitle>
                 <p className="text-xs text-muted-foreground">Gutachten pro Gutachter in {jahr}</p>
               </CardHeader>
               <CardContent>
-                <div className="space-y-3">
-                  {topGutachterData.items.map((item, idx) => (
-                    <div key={item.gutachter} className="space-y-1">
-                      <div className="flex items-center justify-between text-sm">
-                        <span className="font-medium truncate max-w-[200px]">{item.gutachter}</span>
-                        <span className="text-muted-foreground tabular-nums">{item.count}</span>
+                {topGutachterData.items.length > 0 ? (
+                  <div className="space-y-3">
+                    {topGutachterData.items.map((item, idx) => (
+                      <div key={item.gutachter} className="space-y-1">
+                        <div className="flex items-center justify-between text-sm">
+                          <span className="font-medium truncate max-w-[200px]">{item.gutachter}</span>
+                          <span className="text-muted-foreground tabular-nums">{item.count}</span>
+                        </div>
+                        <div className="h-2 w-full rounded-full bg-muted overflow-hidden">
+                          <div
+                            className="h-full rounded-full transition-all duration-300"
+                            style={{
+                              width: `${(item.count / topGutachterMax) * 100}%`,
+                              backgroundColor: CHART_COLORS[idx % CHART_COLORS.length],
+                            }}
+                          />
+                        </div>
                       </div>
-                      <div className="h-2 w-full rounded-full bg-muted overflow-hidden">
-                        <div
-                          className="h-full rounded-full transition-all duration-300"
-                          style={{
-                            width: `${(item.count / topGutachterMax) * 100}%`,
-                            backgroundColor: CHART_COLORS[idx % CHART_COLORS.length],
-                          }}
-                        />
-                      </div>
-                    </div>
-                  ))}
-                </div>
+                    ))}
+                  </div>
+                ) : (
+                  <p className="text-sm text-muted-foreground py-8 text-center">Keine Gutachter-Zuordnungen für {jahr} vorhanden.</p>
+                )}
               </CardContent>
             </Card>
           )}