fix(dark-mode): Farben auf Haeuser-&-Wohnungen-Seite fuer Dunkelmodus korrigiert
This commit is contained in:
+29
-29
@@ -295,7 +295,7 @@ export default function Bestand() {
|
||||
<div className="flex flex-wrap items-end justify-between gap-3">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Häuser & Wohnungen</h1>
|
||||
<p className="text-sm text-slate-500">
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
Bestand pflegen – jedes Haus besteht aus mehreren Wohneinheiten, die hier
|
||||
zugeordnet angelegt und bearbeitet werden
|
||||
</p>
|
||||
@@ -307,8 +307,8 @@ export default function Bestand() {
|
||||
</div>
|
||||
|
||||
{buildings.length === 0 ? (
|
||||
<div className="rounded-2xl border border-dashed bg-white p-10 text-center text-sm text-slate-500">
|
||||
<Building2 className="mx-auto mb-3 h-8 w-8 text-slate-300" />
|
||||
<div className="rounded-2xl border border-dashed bg-white p-10 text-center text-sm text-slate-500 dark:text-slate-400">
|
||||
<Building2 className="mx-auto mb-3 h-8 w-8 text-slate-300 dark:text-slate-600" />
|
||||
Noch keine Häuser angelegt – legen Sie zuerst ein Haus an, dann dessen Wohneinheiten.
|
||||
</div>
|
||||
) : (
|
||||
@@ -323,12 +323,12 @@ export default function Bestand() {
|
||||
{/* Haus-Kopf */}
|
||||
<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">
|
||||
<Building2 className="h-5 w-5 text-slate-600" />
|
||||
<span className="rounded-xl bg-slate-100 p-2 dark:bg-slate-800">
|
||||
<Building2 className="h-5 w-5 text-slate-600 dark:text-slate-300" />
|
||||
</span>
|
||||
<div>
|
||||
<div className="font-semibold">{h.name}</div>
|
||||
<div className="flex items-center gap-1 text-xs text-slate-500">
|
||||
<div className="flex items-center gap-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
<MapPin className="h-3 w-3" /> {h.adresse}
|
||||
</div>
|
||||
</div>
|
||||
@@ -336,82 +336,82 @@ export default function Bestand() {
|
||||
<HausDialog haus={h} />
|
||||
</div>
|
||||
<dl className="mt-4 grid grid-cols-2 gap-x-4 gap-y-2 text-xs">
|
||||
<div className="flex items-center gap-1.5 text-slate-500">
|
||||
<div className="flex items-center gap-1.5 text-slate-500 dark:text-slate-400">
|
||||
<CalendarDays className="h-3.5 w-3.5 shrink-0" /> Baujahr
|
||||
</div>
|
||||
<dd className="text-right font-medium text-slate-800">{h.baujahr}</dd>
|
||||
<div className="flex items-center gap-1.5 text-slate-500">
|
||||
<dd className="text-right font-medium text-slate-800 dark:text-slate-100">{h.baujahr}</dd>
|
||||
<div className="flex items-center gap-1.5 text-slate-500 dark:text-slate-400">
|
||||
<ArrowUpDown className="h-3.5 w-3.5 shrink-0" /> Stockwerke
|
||||
</div>
|
||||
<dd className="text-right font-medium text-slate-800">{h.stockwerke}</dd>
|
||||
<div className="flex items-center gap-1.5 text-slate-500">
|
||||
<dd className="text-right font-medium text-slate-800 dark:text-slate-100">{h.stockwerke}</dd>
|
||||
<div className="flex items-center gap-1.5 text-slate-500 dark:text-slate-400">
|
||||
<Ruler className="h-3.5 w-3.5 shrink-0" /> Etagenhöhe
|
||||
</div>
|
||||
<dd className="text-right font-medium text-slate-800">{h.etagenhoehe.toLocaleString('de-DE')} m</dd>
|
||||
<div className="flex items-center gap-1.5 text-slate-500">
|
||||
<dd className="text-right font-medium text-slate-800 dark:text-slate-100">{h.etagenhoehe.toLocaleString('de-DE')} m</dd>
|
||||
<div className="flex items-center gap-1.5 text-slate-500 dark:text-slate-400">
|
||||
<Home className="h-3.5 w-3.5 shrink-0" /> Wohnfläche
|
||||
</div>
|
||||
<dd className="text-right font-medium text-slate-800">{h.quadratmeter.toLocaleString('de-DE')} m²</dd>
|
||||
<dd className="text-right font-medium text-slate-800 dark:text-slate-100">{h.quadratmeter.toLocaleString('de-DE')} m²</dd>
|
||||
</dl>
|
||||
|
||||
{/* Belegungsfortschritt: angelegte Wohneinheiten gegen Soll */}
|
||||
<div className="mt-4">
|
||||
<div className="mb-1 flex items-center justify-between text-xs">
|
||||
<span className="flex items-center gap-1.5 text-slate-500">
|
||||
<span className="flex items-center gap-1.5 text-slate-500 dark:text-slate-400">
|
||||
<LayoutGrid className="h-3.5 w-3.5" /> Wohneinheiten
|
||||
</span>
|
||||
<span className={`font-semibold ${voll ? 'text-teal-700' : ueberSoll ? 'text-amber-600' : 'text-slate-700'}`}>
|
||||
<span className={`font-semibold ${voll ? 'text-teal-700 dark:text-teal-400' : ueberSoll ? 'text-amber-600 dark:text-amber-400' : 'text-slate-700 dark:text-slate-200'}`}>
|
||||
{angelegt} von {h.wohneinheiten} angelegt
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 overflow-hidden rounded-full bg-slate-100">
|
||||
<div className="h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all ${voll ? 'bg-teal-500' : ueberSoll ? 'bg-amber-500' : 'bg-slate-400'}`}
|
||||
style={{ width: `${Math.min(100, h.wohneinheiten ? (angelegt / h.wohneinheiten) * 100 : 0)}%` }}
|
||||
/>
|
||||
</div>
|
||||
{ueberSoll && (
|
||||
<p className="mt-1 text-xs text-amber-600">Achtung: mehr Wohnungen angelegt als im Soll vorgesehen.</p>
|
||||
<p className="mt-1 text-xs text-amber-600 dark:text-amber-400">Achtung: mehr Wohnungen angelegt als im Soll vorgesehen.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Wohneinheiten des Hauses (1:n) */}
|
||||
<div className="mt-4 border-t pt-3">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
||||
Wohneinheiten ({angelegt})
|
||||
</h3>
|
||||
<WohnungDialog gebaeude={gebaeudeNamen} festesHaus={h.name} />
|
||||
</div>
|
||||
{angelegt === 0 ? (
|
||||
<div className="rounded-xl border border-dashed py-6 text-center text-xs text-slate-400">
|
||||
<DoorOpen className="mx-auto mb-2 h-6 w-6 text-slate-300" />
|
||||
<div className="rounded-xl border border-dashed py-6 text-center text-xs text-slate-400 dark:text-slate-500">
|
||||
<DoorOpen className="mx-auto mb-2 h-6 w-6 text-slate-300 dark:text-slate-600" />
|
||||
Noch keine Wohnungen – über „+ Wohnung" die erste Einheit anlegen.
|
||||
</div>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{wohnungen.map((u) => (
|
||||
<li key={u.id} className="rounded-xl border bg-slate-50/60 px-3 py-2">
|
||||
<li key={u.id} className="rounded-xl border bg-slate-50/60 px-3 py-2 dark:bg-slate-800/60">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="text-sm font-semibold text-slate-800">
|
||||
<div className="text-sm font-semibold text-slate-800 dark:text-slate-100">
|
||||
Whg. {u.number}
|
||||
<span className="ml-1.5 text-xs font-normal text-slate-400">
|
||||
<span className="ml-1.5 text-xs font-normal text-slate-400 dark:text-slate-500">
|
||||
Etage {u.floor} · {u.size.toLocaleString('de-DE')} m²
|
||||
</span>
|
||||
</div>
|
||||
<Badge
|
||||
className={u.status === 'vermietet' ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-200 text-slate-600'}
|
||||
className={u.status === 'vermietet' ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300' : 'bg-slate-200 text-slate-600 dark:bg-slate-800 dark:text-slate-300'}
|
||||
variant="secondary"
|
||||
>
|
||||
{u.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="mt-1 flex items-center justify-between gap-2 text-xs text-slate-500">
|
||||
<div className="mt-1 flex items-center justify-between gap-2 text-xs text-slate-500 dark:text-slate-400">
|
||||
<span className="flex items-center gap-1 truncate">
|
||||
<Users className="h-3.5 w-3.5 shrink-0" /> {u.tenant ?? '–'}
|
||||
</span>
|
||||
<span className="flex shrink-0 items-center gap-2">
|
||||
<span className="font-medium text-slate-700">{fmtEUR.format(u.warmRent)}</span>
|
||||
<span className="font-medium text-slate-700 dark:text-slate-200">{fmtEUR.format(u.warmRent)}</span>
|
||||
<WohnungDialog wohnung={u} gebaeude={gebaeudeNamen} festesHaus={h.name} />
|
||||
</span>
|
||||
</div>
|
||||
@@ -429,12 +429,12 @@ export default function Bestand() {
|
||||
{verwaisteWohnungen.length > 0 && (
|
||||
<section className="space-y-3">
|
||||
<h2 className="text-lg font-semibold">Wohnungen ohne Hauszuordnung</h2>
|
||||
<p className="text-sm text-slate-500">
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
Diese Wohnungen verweisen auf ein nicht angelegtes Haus – bitte Zuordnung über „Bearbeiten" korrigieren.
|
||||
</p>
|
||||
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
|
||||
{verwaisteWohnungen.map((u) => (
|
||||
<div key={u.id} className="rounded-2xl border border-amber-200 bg-amber-50/50 p-4">
|
||||
<div key={u.id} className="rounded-2xl border border-amber-200 bg-amber-50/50 p-4 dark:border-amber-900 dark:bg-amber-950/40">
|
||||
<div className="font-semibold">{u.building}, Whg. {u.number}</div>
|
||||
<div className="mt-2">
|
||||
<WohnungDialog wohnung={u} gebaeude={gebaeudeNamen} />
|
||||
|
||||
Reference in New Issue
Block a user