feat(frontend): einheitliche Seiten-Header mit Icon-Badge

Neue PageHeader-Komponente (Gradient-Icon-Badge + Titel + Beschreibung
+ Aktionen) ersetzt die nackten <h1>-Zeilen auf den meistgenutzten
Seiten (Voelker, Bienenstaende, Koeniginnen, Aufgaben, Honigchargen,
Statistik, Webhooks, Benutzerverwaltung). Gradient variiert pro
Bereich (Honig/Salbei/Himmel), passend zum jeweiligen Sidebar-Icon.
This commit is contained in:
Nick Szaunig committed 2026-08-23 20:31:03 +02:00
1 parent 3af56c96fa
commit 60b59c120a
9 files changed
+142 -63

No files matched your search

@@ -1,5 +1,6 @@
"use client";
import { BarChart3 } from "lucide-react";
import { useQuery } from "@tanstack/react-query";
import { fetchApiaries } from "@/lib/apiaries/api";
import { fetchColonies } from "@/lib/colonies/api";
@@ -12,6 +13,7 @@ import {
fetchVarroaStats,
} from "@/lib/statistics/api";
import { StatBarList } from "@/components/stat-bar-list";
import { PageHeader } from "@/components/page-header";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -286,10 +288,12 @@ export default function StatisticsPage() {
return (
<main className="flex flex-col gap-6 p-4 sm:p-6">
<div>
<h1 className="text-2xl font-semibold tracking-tight">Statistik</h1>
<p className="text-sm text-muted-foreground">Auswertungen über deine Imkerei</p>
</div>
<PageHeader
icon={BarChart3}
title="Statistik"
description="Auswertungen über deine Imkerei"
gradient="var(--gradient-sky)"
/>
<Tabs defaultValue="colonies">
<TabsList className="w-full sm:w-fit">