v1.24: Anleitungsseite (Mieter/Verwaltung), Stand wird vor jedem Build automatisch aktualisiert

2026-10-04 15:07:01 +02:00
parent f15f816871
commit 29d32deef5
9 changed files with 390 additions and 4 deletions
@@ -0,0 +1,119 @@
+import { useMemo, useState } from 'react'
+import {
+  Building2,
+  Calculator,
+  CircleHelp,
+  FileText,
+  Gauge,
+  Info,
+  KeyRound,
+  LayoutDashboard,
+  MessagesSquare,
+  Paintbrush,
+  UserRound,
+  Users,
+  Wallet,
+  Wrench,
+} from 'lucide-react'
+import { useStore } from '../store/store'
+import {
+  anleitungAbschnitte,
+  anleitungIntro,
+  type AnleitungAbschnitt,
+  type AnleitungGruppe,
+} from '../data/anleitung'
+import { anleitungMeta } from '../data/anleitung-meta'
+
+const Icons: Record<string, typeof Info> = {
+  'Anmeldung & Zugang': KeyRound,
+  Dashboard: LayoutDashboard,
+  'Mietkonto & Zahlungen': Wallet,
+  'Schäden melden': Wrench,
+  Zählerstände: Gauge,
+  Dokumente: FileText,
+  Nachrichten: MessagesSquare,
+  'Mein Profil': UserRound,
+  Benutzerverwaltung: Users,
+  'Häuser & Wohnungen': Building2,
+  'Steuer & Kosten': Calculator,
+  'Schadensmeldungen & Kommunikation': MessagesSquare,
+  'Dokumente & Zählerstände': FileText,
+  Darstellung: Paintbrush,
+}
+
+function AbschnittKarte({ abschnitt }: { abschnitt: AnleitungAbschnitt }) {
+  const Icon = Icons[abschnitt.titel] ?? Info
+  return (
+    <section className="rounded-2xl border bg-white p-5 shadow-sm dark:bg-slate-900">
+      <h2 className="flex items-center gap-2 font-semibold">
+        <span className="rounded-xl bg-teal-50 p-2 dark:bg-teal-950">
+          <Icon className="h-4.5 w-4.5 text-teal-700 dark:text-teal-300" />
+        </span>
+        {abschnitt.titel}
+      </h2>
+      <ul className="mt-4 space-y-3">
+        {abschnitt.punkte.map((p) => (
+          <li key={p.titel} className="text-sm">
+            <div className="font-medium text-slate-800 dark:text-slate-100">{p.titel}</div>
+            <p className="mt-0.5 leading-relaxed text-slate-500 dark:text-slate-400">{p.text}</p>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}
+
+export default function Anleitung() {
+  const { role } = useStore()
+  const istVerwaltung = role === 'admin'
+  const [tab, setTab] = useState<AnleitungGruppe>('verwaltung')
+
+  // Mieter sehen nur Mieter-Inhalte; die Verwaltung wählt zwischen beiden Ansichten.
+  const gruppe: AnleitungGruppe = istVerwaltung ? tab : 'mieter'
+
+  const abschnitte = useMemo(
+    () => anleitungAbschnitte.filter((a) => a.gruppe === gruppe),
+    [gruppe],
+  )
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-end justify-between gap-3">
+        <div>
+          <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight">
+            <CircleHelp className="h-6 w-6 text-teal-700 dark:text-teal-300" />
+            Anleitung
+          </h1>
+          <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{anleitungIntro[gruppe]}</p>
+        </div>
+        <div className="rounded-full border bg-white px-4 py-1.5 text-xs text-slate-500 shadow-sm dark:bg-slate-900 dark:text-slate-400">
+          Stand {anleitungMeta.datum} · Build {anleitungMeta.hash}
+        </div>
+      </div>
+
+      {istVerwaltung && (
+        <div className="flex gap-2 border-b border-slate-200 dark:border-slate-800">
+          {([['verwaltung', 'Für die Verwaltung'], ['mieter', 'Mieter-Ansicht']] as const).map(([wert, label]) => (
+            <button
+              key={wert}
+              onClick={() => setTab(wert)}
+              className={`-mb-px border-b-2 px-4 py-2 text-sm font-medium transition ${
+                tab === wert
+                  ? 'border-teal-600 text-teal-700 dark:text-teal-300'
+                  : 'border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200'
+              }`}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        {abschnitte.map((a) => (
+          <AbschnittKarte key={a.titel} abschnitt={a} />
+        ))}
+      </div>
+    </div>
+  )
+}