v1.9: Zähler-Modul (Strom/Wasser/Gas) + Registrierungs-Mail an Verwaltung + Vorname/Nachname im Formular

src/App.tsx

@@ -8,6 +8,7 @@ import Payments from './pages/Payments'
 import Tickets from './pages/Tickets'
 import Documents from './pages/Documents'
 import Messages from './pages/Messages'
+import Zaehler from './pages/Zaehler'
 import BenutzerVerwaltung from './pages/BenutzerVerwaltung'
 
 /** Fängt Render-Fehler ab – statt schwarzem Bildschirm: Hinweis + Reload. */
@@ -80,6 +81,7 @@ export default function App() {
           <Route path="/" element={<Dashboard />} />
           <Route path="/mietkonto" element={<Payments />} />
           <Route path="/schadensmeldungen" element={<Tickets />} />
+          <Route path="/zaehler" element={<Zaehler />} />
           <Route path="/dokumente" element={<Documents />} />
           <Route path="/nachrichten" element={<Messages />} />
           <Route path="/benutzer" element={<BenutzerVerwaltung />} />

src/components/AppLayout.tsx

@@ -8,6 +8,7 @@ import {
   UserCog,
   LogOut,
   Building2,
+  Gauge,
 } from 'lucide-react'
 import { useStore } from '../store/store'
 import ThemeToggle from './ThemeToggle'
@@ -17,6 +18,7 @@ const navItems = [
   { to: '/', label: 'Dashboard', icon: LayoutDashboard, end: true },
   { to: '/mietkonto', label: 'Mietkonto & Zahlungen', icon: Wallet },
   { to: '/schadensmeldungen', label: 'Schadensmeldungen', icon: Wrench },
+  { to: '/zaehler', label: 'Zählerstände', icon: Gauge },
   { to: '/dokumente', label: 'Dokumente', icon: FileText },
   { to: '/nachrichten', label: 'Nachrichten', icon: MessagesSquare },
 ]

src/pages/Login.tsx

@@ -32,7 +32,8 @@ export default function Login() {
 
   // Registrierung
   const [code, setCode] = useState('')
-  const [rName, setRName] = useState('')
+  const [rVorname, setRVorname] = useState('')
+  const [rNachname, setRNachname] = useState('')
   const [rEmail, setREmail] = useState('')
   const [rBn, setRBn] = useState('')
   const [rPw, setRPw] = useState('')
@@ -53,8 +54,9 @@ export default function Login() {
     setFehler(null)
     if (rPw.length < 4) return setFehler('Das Passwort muss mindestens 4 Zeichen haben.')
     if (rPw !== rPw2) return setFehler('Die Passwörter stimmen nicht überein.')
+    if (!rVorname.trim() || !rNachname.trim()) return setFehler('Bitte Vor- und Nachname angeben.')
     setLade(true)
-    const err = await registrieren(code, rBn, rName, rEmail, rPw)
+    const err = await registrieren(code, rBn, `${rVorname.trim()} ${rNachname.trim()}`, rEmail, rPw)
     setLade(false)
     if (err) setFehler(err)
     else navigate('/')
@@ -198,17 +200,23 @@ export default function Login() {
                   </div>
                   <div className="grid gap-3 sm:grid-cols-2">
                     <div>
-                      <label htmlFor="rname" className="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Name</label>
-                      <input id="rname" className={inputCls} value={rName} onChange={(e) => setRName(e.target.value)} placeholder="Vor- und Nachname" required />
+                      <label htmlFor="rvorname" className="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Vorname</label>
+                      <input id="rvorname" className={inputCls} value={rVorname} onChange={(e) => setRVorname(e.target.value)} placeholder="Max" autoComplete="given-name" required />
                     </div>
                     <div>
-                      <label htmlFor="remail" className="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">E-Mail</label>
-                      <input id="remail" type="email" className={inputCls} value={rEmail} onChange={(e) => setREmail(e.target.value)} required />
+                      <label htmlFor="rnachname" className="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Nachname</label>
+                      <input id="rnachname" className={inputCls} value={rNachname} onChange={(e) => setRNachname(e.target.value)} placeholder="Mustermann" autoComplete="family-name" required />
                     </div>
                   </div>
-                  <div>
-                    <label htmlFor="rbn" className="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Benutzername (frei wählbar)</label>
-                    <input id="rbn" className={inputCls} value={rBn} onChange={(e) => setRBn(e.target.value)} autoComplete="username" required />
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    <div>
+                      <label htmlFor="remail" className="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">E-Mail</label>
+                      <input id="remail" type="email" className={inputCls} value={rEmail} onChange={(e) => setREmail(e.target.value)} autoComplete="email" required />
+                    </div>
+                    <div>
+                      <label htmlFor="rbn" className="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Benutzername (frei wählbar)</label>
+                      <input id="rbn" className={inputCls} value={rBn} onChange={(e) => setRBn(e.target.value)} autoComplete="username" required />
+                    </div>
                   </div>
                   <div className="grid gap-3 sm:grid-cols-2">
                     <div>
@@ -227,7 +235,7 @@ export default function Login() {
                   )}
                   <button
                     type="submit"
-                    disabled={lade || !code || !rName || !rEmail || !rBn || !rPw || !rPw2}
+                    disabled={lade || !code || !rVorname || !rNachname || !rEmail || !rBn || !rPw || !rPw2}
                     className="w-full rounded-xl bg-amber-500 px-6 py-3 font-semibold text-slate-900 shadow transition hover:bg-amber-400 disabled:opacity-50"
                   >
                     {lade ? 'Bitte warten …' : 'Registrieren & anmelden'}

src/pages/Zaehler.tsx

@@ -0,0 +1,276 @@
+import { useMemo, useState } from 'react'
+import { Gauge, Zap, Droplets, Flame, Building2, Hash, CalendarDays, Pencil, Plus } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { useStore } from '../store/store'
+import type { Meter, ZaehlerArt } from '../types'
+
+const ARTEN: ZaehlerArt[] = ['Strom', 'Wasser', 'Gas', 'Wärme', 'Sonstiges']
+
+const artIcon = (art: ZaehlerArt) => {
+  switch (art) {
+    case 'Strom': return Zap
+    case 'Wasser': return Droplets
+    case 'Gas': return Flame
+    default: return Gauge
+  }
+}
+
+const artStyle: Record<ZaehlerArt, string> = {
+  Strom: 'bg-amber-100 text-amber-800',
+  Wasser: 'bg-blue-100 text-blue-800',
+  Gas: 'bg-orange-100 text-orange-800',
+  Wärme: 'bg-red-100 text-red-700',
+  Sonstiges: 'bg-slate-100 text-slate-600',
+}
+
+/** Deutsche Zahlenanzeige: 48231,4 → „48.231,4" (bis zu 3 Nachkommastellen). */
+const fmtStand = (n: number) =>
+  n.toLocaleString('de-DE', { maximumFractionDigits: 3 })
+
+function ZaehlerDialog({ meter }: { meter?: Meter }) {
+  const { addZaehler, updateZaehler, units } = useStore()
+  const bearbeiten = Boolean(meter)
+  const [open, setOpen] = useState(false)
+  const [nummer, setNummer] = useState(meter?.nummer ?? '')
+  const [art, setArt] = useState<ZaehlerArt>(meter?.art ?? 'Strom')
+  const [stand, setStand] = useState(String(meter?.stand ?? '').replace('.', ','))
+  const [unitId, setUnitId] = useState<string>(meter?.unitId ?? 'haus')
+  const [building, setBuilding] = useState(meter?.building ?? 'Hauptstraße 12')
+  const [sende, setSende] = useState(false)
+  const [fehler, setFehler] = useState<string | null>(null)
+
+  const submit = async () => {
+    const standZahl = Number(stand.replace(',', '.'))
+    if (!nummer.trim() || !Number.isFinite(standZahl) || standZahl < 0 || sende) return
+    setSende(true)
+    setFehler(null)
+    const payload = {
+      nummer: nummer.trim(),
+      art,
+      stand: standZahl,
+      unitId: unitId === 'haus' ? null : unitId,
+      building,
+    }
+    const err = bearbeiten ? await updateZaehler(meter!.id, payload) : await addZaehler(payload)
+    setSende(false)
+    if (err) return setFehler(err)
+    setOpen(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {bearbeiten ? (
+          <Button variant="outline" size="sm" className="gap-1.5">
+            <Pencil className="h-3.5 w-3.5" /> Bearbeiten
+          </Button>
+        ) : (
+          <Button className="gap-2">
+            <Plus className="h-4 w-4" /> Neuer Zähler
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{bearbeiten ? `Zähler ${meter!.nummer} bearbeiten` : 'Neuen Zähler anlegen'}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-1.5">
+              <Label htmlFor="z-nr">Zählernummer</Label>
+              <Input
+                id="z-nr"
+                placeholder="z. B. ST-0815-4711"
+                value={nummer}
+                onChange={(e) => setNummer(e.target.value)}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label>Zählerart</Label>
+              <Select value={art} onValueChange={(v) => setArt(v as ZaehlerArt)}>
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {ARTEN.map((a) => (
+                    <SelectItem key={a} value={a}>{a}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="z-stand">Aktueller Zählerstand</Label>
+            <Input
+              id="z-stand"
+              inputMode="decimal"
+              placeholder="z. B. 48231,4"
+              value={stand}
+              onChange={(e) => setStand(e.target.value)}
+            />
+          </div>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-1.5">
+              <Label>Wohneinheit</Label>
+              <Select value={unitId} onValueChange={setUnitId}>
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="haus">Allgemeinzähler (ohne Wohnung)</SelectItem>
+                  {units.map((u) => (
+                    <SelectItem key={u.id} value={u.id}>
+                      {u.building}, Whg. {u.number}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="z-haus">Haus</Label>
+              <Input
+                id="z-haus"
+                value={building}
+                onChange={(e) => setBuilding(e.target.value)}
+                disabled={unitId !== 'haus'}
+                title={unitId !== 'haus' ? 'Das Haus wird aus der Wohneinheit übernommen.' : undefined}
+              />
+            </div>
+          </div>
+          {fehler && (
+            <div className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700 dark:bg-red-950 dark:text-red-300" role="alert">
+              {fehler}
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>Abbrechen</Button>
+          <Button onClick={submit} disabled={!nummer.trim() || !stand.trim() || sende}>
+            {sende ? 'Wird gespeichert …' : bearbeiten ? 'Speichern' : 'Zähler anlegen'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default function Zaehler() {
+  const { meters, units, role } = useStore()
+  const [filterHaus, setFilterHaus] = useState('alle')
+  const [filterArt, setFilterArt] = useState<'alle' | ZaehlerArt>('alle')
+
+  const gebaeude = useMemo(
+    () => Array.from(new Set(meters.map((m) => m.building))).sort(),
+    [meters],
+  )
+
+  const visible = useMemo(
+    () =>
+      meters.filter(
+        (m) =>
+          (filterHaus === 'alle' || m.building === filterHaus) &&
+          (filterArt === 'alle' || m.art === filterArt),
+      ),
+    [meters, filterHaus, filterArt],
+  )
+
+  const einheitLabel = (m: Meter) => {
+    if (!m.unitId) return 'Allgemeinzähler'
+    const u = units.find((x) => x.id === m.unitId)
+    return u ? `Whg. ${u.number}` : m.unitId
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-end justify-between gap-3">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">Zählerstände</h1>
+          <p className="text-sm text-slate-500">
+            {role === 'tenant'
+              ? 'Ihre Zähler: Strom, Wasser und Gas auf einen Blick'
+              : 'Alle Zähler des Bestands – Stände pflegen und Wohnungen zuordnen'}
+          </p>
+        </div>
+        {role === 'admin' && <ZaehlerDialog />}
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        <Select value={filterHaus} onValueChange={setFilterHaus}>
+          <SelectTrigger className="h-9 w-auto min-w-36"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="alle">Alle Häuser</SelectItem>
+            {gebaeude.map((g) => (
+              <SelectItem key={g} value={g}>{g}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Select value={filterArt} onValueChange={(v) => setFilterArt(v as 'alle' | ZaehlerArt)}>
+          <SelectTrigger className="h-9 w-auto min-w-32"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="alle">Alle Arten</SelectItem>
+            {ARTEN.map((a) => (
+              <SelectItem key={a} value={a}>{a}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {visible.length === 0 ? (
+        <div className="rounded-2xl border border-dashed bg-white p-10 text-center text-sm text-slate-500">
+          <Gauge className="mx-auto mb-3 h-8 w-8 text-slate-300" />
+          Keine Zähler für diesen Filter.
+        </div>
+      ) : (
+        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+          {visible.map((m) => {
+            const Icon = artIcon(m.art)
+            return (
+              <div key={m.id} className="rounded-2xl border bg-white p-5 shadow-sm">
+                <div className="flex items-start justify-between gap-2">
+                  <div className="flex items-center gap-2">
+                    <span className="rounded-xl bg-slate-100 p-2">
+                      <Icon className="h-5 w-5 text-slate-600" />
+                    </span>
+                    <Badge className={artStyle[m.art]} variant="secondary">{m.art}</Badge>
+                  </div>
+                  {role === 'admin' && <ZaehlerDialog meter={m} />}
+                </div>
+                <div className="mt-4 text-3xl font-bold tracking-tight tabular-nums">
+                  {fmtStand(m.stand)}
+                </div>
+                <div className="mt-3 space-y-1.5 text-xs text-slate-500">
+                  <div className="flex items-center gap-1.5">
+                    <Hash className="h-3.5 w-3.5 shrink-0" /> {m.nummer}
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <Building2 className="h-3.5 w-3.5 shrink-0" />
+                    {m.building} · {einheitLabel(m)}
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <CalendarDays className="h-3.5 w-3.5 shrink-0" />
+                    Stand: {m.standAm}
+                    <span className="text-slate-400">(gepflegt: {m.geaendertAm})</span>
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

src/store/store.tsx

@@ -29,6 +29,8 @@ import type {
   RegistrierungsCode,
   Unit,
   Announcement,
+  Meter,
+  ZaehlerArt,
 } from '../types'
 import { apiGet, apiPost, apiPatch, ApiFehler } from '../lib/api'
 import { sha256, DEMO_PASSWORT } from '../lib/auth'
@@ -46,6 +48,7 @@ interface Bootstrap {
   announcements: Announcement[]
   benutzer: Benutzer[]
   codes: RegistrierungsCode[]
+  meters: Meter[]
 }
 
 const LEER: Bootstrap = {
@@ -57,6 +60,7 @@ const LEER: Bootstrap = {
   announcements: [],
   benutzer: [],
   codes: [],
+  meters: [],
 }
 
 interface Store extends Bootstrap {
@@ -91,6 +95,18 @@ interface Store extends Bootstrap {
   setPasswort: (id: string, passwort: string) => Promise<void>
   weiseEinheitZu: (id: string, einheitId: string | null) => Promise<void>
   generiereCodes: (anzahl: number, einheitId: string | null) => Promise<RegistrierungsCode[]>
+  // ── Zählerstände (Verwaltung pflegt, Mieter lesen) ──────
+  addZaehler: (z: {
+    nummer: string
+    art: ZaehlerArt
+    stand: number
+    unitId: string | null
+    building: string
+  }) => Promise<string | null>
+  updateZaehler: (
+    id: string,
+    z: Partial<{ nummer: string; art: ZaehlerArt; stand: number; unitId: string | null; building: string }>,
+  ) => Promise<string | null>
 }
 
 const StoreContext = createContext<Store | null>(null)
@@ -259,6 +275,25 @@ export function StoreProvider({ children }: { children: ReactNode }) {
       await ladeAlles()
       return codes
     },
+    // ── Zählerstände ────────────────────────────────────────
+    async addZaehler(z) {
+      try {
+        const { meter } = await apiPost<{ meter: Meter }>('/api/meters', z)
+        setDaten((d) => ({ ...d, meters: [...d.meters, meter] }))
+        return null
+      } catch (e) {
+        return fehlerNachricht(e)
+      }
+    },
+    async updateZaehler(id, z) {
+      try {
+        const { meter } = await apiPatch<{ meter: Meter }>(`/api/meters/${id}`, z)
+        setDaten((d) => ({ ...d, meters: d.meters.map((m) => (m.id === id ? meter : m)) }))
+        return null
+      } catch (e) {
+        return fehlerNachricht(e)
+      }
+    },
   }), [daten, bereit, me, role, meineEinheit, ladeAlles])
 
   return <StoreContext.Provider value={value}>{children}</StoreContext.Provider>

src/types/index.ts

@@ -95,3 +95,16 @@ export interface Announcement {
   date: string
   tag: string
 }
+
+export type ZaehlerArt = 'Strom' | 'Wasser' | 'Gas' | 'Wärme' | 'Sonstiges'
+
+export interface Meter {
+  id: string
+  unitId: string | null // null = Haus-/Allgemeinzähler
+  building: string
+  nummer: string
+  art: ZaehlerArt
+  stand: number
+  standAm: string
+  geaendertAm: string
+}