feat(frontend): EmptyState statt Fließtext in verschachtelten Listen

Ersetzt den bisherigen reinen Fließtext ("Noch keine X dokumentiert.")
durch die gemeinsame EmptyState-Komponente (Icon, Titel, Beschreibung)
in allen verschachtelten Listen auf den Volk- und Königin-Detailseiten:
Fütterung, Behandlungen, Varroa, Durchsichten, Historie (Volk und
Königin), Bewertungen und Honigmessungen.

Rundet den bereits umgesetzten EmptyState-Look der Hauptlistenseiten
konsistent auf die Detailseiten-Unterkarten ab.
This commit is contained in:
Nick Szaunig committed 2026-08-24 00:27:04 +02:00
1 parent e889edd6c5
commit c0922387fd
8 files changed
+56 -9

No files matched your search

@@ -1,9 +1,11 @@
"use client";
import Link from "next/link";
import { Utensils } from "lucide-react";
import { useQuery } from "@tanstack/react-query";
import { fetchColonyFeedings, fetchColonyFeedingsSummary } from "@/lib/feedings/api";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/empty-state";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
export function ColonyFeedingsCard({ colonyId }: { colonyId: string }) {
@@ -39,7 +41,11 @@ export function ColonyFeedingsCard({ colonyId }: { colonyId: string }) {
) : null}
{isLoading ? <p className="text-muted-foreground">Lädt…</p> : null}
{!isLoading && (!feedings || feedings.length === 0) ? (
<p className="text-muted-foreground">Noch keine Fütterung dokumentiert.</p>
<EmptyState
icon={Utensils}
title="Noch keine Fütterung"
description="Erfasse die erste Fütterung für dieses Volk."
/>
) : null}
{feedings?.map((feeding) => (
<div key={feeding.id} className="rounded-md border p-3">
@@ -1,7 +1,9 @@
"use client";
import { History } from "lucide-react";
import { useQuery } from "@tanstack/react-query";
import { fetchColonyHistory } from "@/lib/colonies/api";
import { EmptyState } from "@/components/empty-state";
import {
Card,
CardContent,
@@ -31,7 +33,11 @@ export function ColonyHistoryCard({ colonyId }: { colonyId: string }) {
</CardHeader>
<CardContent className="flex flex-col gap-3 text-sm">
{!hasHistory ? (
<p className="text-muted-foreground">Noch keine Historie vorhanden.</p>
<EmptyState
icon={History}
title="Noch keine Historie"
description="Standortwechsel und Ableger erscheinen hier."
/>
) : null}
{history.apiaryHistory.map((entry) => (
<p key={entry.id}>
@@ -1,9 +1,11 @@
"use client";
import Link from "next/link";
import { ClipboardCheck } from "lucide-react";
import { useQuery } from "@tanstack/react-query";
import { fetchColonyInspections } from "@/lib/inspections/api";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/empty-state";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
export function ColonyInspectionsCard({ colonyId }: { colonyId: string }) {
@@ -27,7 +29,11 @@ export function ColonyInspectionsCard({ colonyId }: { colonyId: string }) {
<CardContent className="flex flex-col gap-3 text-sm">
{isLoading ? <p className="text-muted-foreground">Lädt…</p> : null}
{!isLoading && (!inspections || inspections.length === 0) ? (
<p className="text-muted-foreground">Noch keine Durchsicht dokumentiert.</p>
<EmptyState
icon={ClipboardCheck}
title="Noch keine Durchsicht"
description="Dokumentiere die erste Durchsicht für dieses Volk."
/>
) : null}
{inspections?.map((inspection) => (
<div key={inspection.id} className="rounded-md border p-3">
@@ -1,9 +1,11 @@
"use client";
import Link from "next/link";
import { Syringe } from "lucide-react";
import { useQuery } from "@tanstack/react-query";
import { fetchColonyTreatments } from "@/lib/treatments/api";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/empty-state";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
export function ColonyTreatmentsCard({ colonyId }: { colonyId: string }) {
@@ -27,7 +29,11 @@ export function ColonyTreatmentsCard({ colonyId }: { colonyId: string }) {
<CardContent className="flex flex-col gap-3 text-sm">
{isLoading ? <p className="text-muted-foreground">Lädt…</p> : null}
{!isLoading && (!treatments || treatments.length === 0) ? (
<p className="text-muted-foreground">Noch keine Behandlung dokumentiert.</p>
<EmptyState
icon={Syringe}
title="Noch keine Behandlung"
description="Dokumentiere die erste Behandlung für dieses Volk."
/>
) : null}
{treatments?.map((treatment) => (
<div key={treatment.id} className="rounded-md border p-3">
@@ -1,9 +1,11 @@
"use client";
import Link from "next/link";
import { Bug } from "lucide-react";
import { useQuery } from "@tanstack/react-query";
import { fetchColonyVarroaMeasurements } from "@/lib/varroa/api";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/empty-state";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
const CHART_WIDTH = 280;
@@ -64,7 +66,11 @@ export function ColonyVarroaCard({ colonyId }: { colonyId: string }) {
<CardContent className="flex flex-col gap-3 text-sm">
{isLoading ? <p className="text-muted-foreground">Lädt…</p> : null}
{!isLoading && (!measurements || measurements.length === 0) ? (
<p className="text-muted-foreground">Noch keine Varroamessung dokumentiert.</p>
<EmptyState
icon={Bug}
title="Noch keine Varroamessung"
description="Erfasse die erste Messung für dieses Volk."
/>
) : null}
<VarroaTrendChart values={values} />
{measurements?.map((measurement) => (