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,61 @@
+import Link from "next/link";
+
+export type Farbton = "info" | "success" | "warning" | "danger" | "neutral" | "primary";
+
+export const FARB_KLASSE: Record<Farbton, string> = {
+  info: "pl-bg-info",
+  success: "pl-bg-success",
+  warning: "pl-bg-warning",
+  danger: "pl-bg-danger",
+  neutral: "pl-bg-neutral",
+  primary: "pl-bg-primary",
+};
+
+interface SmallBoxProps {
+  wert: number | string;
+  text: string;
+  zusatz?: string;
+  icon: string;
+  farbe: Farbton;
+  href: string;
+  linkText?: string;
+}
+
+export function SmallBox({ wert, text, zusatz, icon, farbe, href, linkText = "Mehr Infos" }: SmallBoxProps) {
+  return (
+    <div className={`small-box ${FARB_KLASSE[farbe]}`}>
+      <div className="inner">
+        <h3>{wert}</h3>
+        <p className="mb-2">
+          {text}
+          {zusatz ? <small className="d-block">{zusatz}</small> : null}
+        </p>
+      </div>
+      <i className={`bi ${icon} small-box-icon`} aria-hidden="true" />
+      <Link href={href} className="small-box-footer pl-touch-target">
+        {linkText} <i className="bi bi-arrow-right-circle" aria-hidden="true" />
+      </Link>
+    </div>
+  );
+}
+
+interface InfoBoxProps {
+  text: string;
+  wert: string;
+  icon: string;
+  farbe: Farbton;
+}
+
+export function InfoBox({ text, wert, icon, farbe }: InfoBoxProps) {
+  return (
+    <div className="info-box shadow-sm mb-3 bg-body">
+      <span className={`info-box-icon ${FARB_KLASSE[farbe]}`}>
+        <i className={`bi ${icon}`} aria-hidden="true" />
+      </span>
+      <div className="info-box-content">
+        <span className="info-box-text">{text}</span>
+        <span className="info-box-number">{wert}</span>
+      </div>
+    </div>
+  );
+}