feat(ui): klickbarer Prototyp mit Beispieldaten (#002)

Layout im AdminLTE-Stil (Sidebar, Kopfleiste, Inhaltskopf, Footer), Logo als SVG-Komponente, Farbschema mit Dark-Mode, Dashboard, Kunden- und Host-Ansichten, Rechnungsuebersicht, Jahresbahn und globale Suche (Strg+K). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-17 20:03:15 +02:00
parent d98bde9922
commit 8596a18a27
47 changed files with 4128 additions and 40 deletions
@@ -0,0 +1,49 @@
+import Link from "next/link";
+import type { ReactNode } from "react";
+
+export interface Brotkrume {
+  titel: string;
+  href?: string;
+}
+
+/** Inhaltskopf: Seitentitel links, Breadcrumb rechts (AdminLTE-Standard). */
+export function ContentHeader({
+  titel,
+  brotkrumen = [],
+  aktion,
+}: {
+  titel: string;
+  brotkrumen?: Brotkrume[];
+  aktion?: ReactNode;
+}) {
+  return (
+    <div className="app-content-header">
+      <div className="container-fluid">
+        <div className="row align-items-center">
+          <div className="col-sm-6 d-flex align-items-center gap-3">
+            <h1 className="pl-page-title">{titel}</h1>
+            {aktion}
+          </div>
+          <div className="col-sm-6">
+            <nav aria-label="Brotkrumen">
+              <ol className="breadcrumb float-sm-end mb-0">
+                <li className="breadcrumb-item">
+                  <Link href="/">Start</Link>
+                </li>
+                {brotkrumen.map((k, i) => (
+                  <li
+                    key={`${k.titel}-${i}`}
+                    className={`breadcrumb-item ${i === brotkrumen.length - 1 ? "active" : ""}`}
+                    aria-current={i === brotkrumen.length - 1 ? "page" : undefined}
+                  >
+                    {k.href ? <Link href={k.href}>{k.titel}</Link> : k.titel}
+                  </li>
+                ))}
+              </ol>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}