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>
This commit is contained in:
CCS Admin 2026-02-28 16:01:29 +00:00
parent 42fd1808c4
commit 7a372922e6

View file

@ -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>
)}