v1.30: Wohnungsformular einspaltig mit Abschnitten

kimi.md

@@ -189,6 +189,11 @@ tar -czf mp-dist.tar.gz -C dist .
 
 ## 8. Verlauf / offene Punkte
 
+**Erledigt 04.10. (v1.30):** Wohnungsformular einspaltig (Analogie Haus-Formular
+v1.26): Abschnitte Zuordnung (Haus, Wohnungsnummer) / Ausstattung (Etage,
+Wohnfläche, Heizungsart) / Miete (Kalt-/Warmmiete) / Mieter (Name, Status),
+gemeinsame Helfer Abschnitt + Feld, Dialog max-h-90vh overflow-y-auto.
+
 **Erledigt 04.10. (v1.29):** Heizungsart-Dropdown in Haus- und Wohnungsverwaltung;
 Listenansicht ist jetzt Standard in allen Modulen. DB: buildings + units je
 ALTER heizungsart TEXT DEFAULT ''; Server HEIZUNGSARTEN-Liste + heizungsartValid

src/pages/Bestand.tsx

@@ -233,7 +233,7 @@ function WohnungDialog({ wohnung, gebaeude, festesHaus }: { wohnung?: Unit; geba
           </Button>
         )}
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent className="max-h-[90vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>
             {bearbeiten
@@ -244,7 +244,7 @@ function WohnungDialog({ wohnung, gebaeude, festesHaus }: { wohnung?: Unit; geba
           </DialogTitle>
         </DialogHeader>
         <div className="space-y-4">
-          <div className="grid gap-4 sm:grid-cols-2">
+          <Abschnitt titel="Zuordnung">
             <div className="space-y-1.5">
               <Label>Haus</Label>
               <Select value={building} onValueChange={waehleHaus} disabled={Boolean(festesHaus)}>
@@ -255,50 +255,13 @@ function WohnungDialog({ wohnung, gebaeude, festesHaus }: { wohnung?: Unit; geba
                   ))}
                 </SelectContent>
               </Select>
-              {festesHaus && <p className="text-xs text-slate-400">Die Wohnung gehört fest zu diesem Haus.</p>}
+              {festesHaus && <p className="text-xs text-slate-400 dark:text-slate-500">Die Wohnung gehört fest zu diesem Haus.</p>}
             </div>
-            <div className="space-y-1.5">
+            <Feld id="w-nr" label="Wohnungsnummer" placeholder="z. B. 12" value={number} onChange={(e) => setNumber(e.target.value)} />
-              <Label htmlFor="w-nr">Wohnungsnummer</Label>
+          </Abschnitt>
-              <Input id="w-nr" placeholder="z. B. 12" value={number} onChange={(e) => setNumber(e.target.value)} />
+          <Abschnitt titel="Ausstattung">
-            </div>
+            <Feld id="w-etage" label="Etage" hint="0 = Erdgeschoss, negative Werte = Keller" inputMode="numeric" placeholder="z. B. 1" value={floor} onChange={(e) => setFloor(e.target.value)} />
-          </div>
+            <Feld id="w-qm" label="Wohnfläche (m²)" inputMode="decimal" placeholder="z. B. 68,5" value={size} onChange={(e) => setSize(e.target.value)} />
-          <div className="grid gap-4 sm:grid-cols-2">
-            <div className="space-y-1.5">
-              <Label htmlFor="w-etage">Etage</Label>
-              <Input id="w-etage" inputMode="numeric" placeholder="0 = Erdgeschoss" value={floor} onChange={(e) => setFloor(e.target.value)} />
-            </div>
-            <div className="space-y-1.5">
-              <Label htmlFor="w-qm">Wohnfläche (m²)</Label>
-              <Input id="w-qm" inputMode="decimal" placeholder="z. B. 68,5" value={size} onChange={(e) => setSize(e.target.value)} />
-            </div>
-          </div>
-          <div className="grid gap-4 sm:grid-cols-2">
-            <div className="space-y-1.5">
-              <Label htmlFor="w-kalt">Kaltmiete (€)</Label>
-              <Input id="w-kalt" inputMode="decimal" placeholder="z. B. 520" value={coldRent} onChange={(e) => setColdRent(e.target.value)} />
-            </div>
-            <div className="space-y-1.5">
-              <Label htmlFor="w-warm">Warmmiete (€)</Label>
-              <Input id="w-warm" inputMode="decimal" placeholder="z. B. 690" value={warmRent} onChange={(e) => setWarmRent(e.target.value)} />
-            </div>
-          </div>
-          <div className="grid gap-4 sm:grid-cols-2">
-            <div className="space-y-1.5">
-              <Label htmlFor="w-mieter">Mieter (Name)</Label>
-              <Input id="w-mieter" placeholder="leer = frei" value={tenant} onChange={(e) => setTenant(e.target.value)} />
-            </div>
-            <div className="space-y-1.5">
-              <Label>Status</Label>
-              <Select value={status} onValueChange={(v) => setStatus(v as 'vermietet' | 'frei')}>
-                <SelectTrigger><SelectValue /></SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="vermietet">vermietet</SelectItem>
-                  <SelectItem value="frei">frei</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-          <div className="grid gap-4 sm:grid-cols-2">
             <div className="space-y-1.5">
               <Label>Heizungsart</Label>
               <Select value={heizungsart || '__keine'} onValueChange={(v) => setHeizungsart(v === '__keine' ? '' : v)}>
@@ -310,13 +273,28 @@ function WohnungDialog({ wohnung, gebaeude, festesHaus }: { wohnung?: Unit; geba
                   ))}
                 </SelectContent>
               </Select>
-              {!bearbeiten && (
+              <p className="text-xs text-slate-400 dark:text-slate-500">
-                <p className="text-xs text-slate-400 dark:text-slate-500">
+                Optional{!bearbeiten && ' – wird bei Neuanlage automatisch aus dem Haus übernommen'}.
-                  Wird bei Neuanlage automatisch aus dem Haus übernommen.
+              </p>
-                </p>
-              )}
             </div>
-          </div>
+          </Abschnitt>
+          <Abschnitt titel="Miete">
+            <Feld id="w-kalt" label="Kaltmiete (€)" inputMode="decimal" placeholder="z. B. 520" value={coldRent} onChange={(e) => setColdRent(e.target.value)} />
+            <Feld id="w-warm" label="Warmmiete (€)" inputMode="decimal" placeholder="z. B. 690" value={warmRent} onChange={(e) => setWarmRent(e.target.value)} />
+          </Abschnitt>
+          <Abschnitt titel="Mieter">
+            <Feld id="w-mieter" label="Mieter (Name)" hint="Leer lassen, solange die Wohnung frei ist" placeholder="z. B. Anna Berger" value={tenant} onChange={(e) => setTenant(e.target.value)} />
+            <div className="space-y-1.5">
+              <Label>Status</Label>
+              <Select value={status} onValueChange={(v) => setStatus(v as 'vermietet' | 'frei')}>
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="vermietet">vermietet</SelectItem>
+                  <SelectItem value="frei">frei</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </Abschnitt>
           {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}