v1.9: Zähler-Modul (Strom/Wasser/Gas) + Registrierungs-Mail an Verwaltung + Vorname/Nachname im Formular
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user