ah-admin/Mieterportal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dark-mode): Farben auf Haeuser-&-Wohnungen-Seite fuer Dunkelmodus korrigiert

Browse Source
This commit is contained in:
ah-admin
2026-10-04 14:50:22 +02:00
parent 9707b6700d
commit f15f816871
1 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Bestand.tsx
+29 -29
View File
@@ -295,7 +295,7 @@ export default function Bestand() {
<div className="flex flex-wrap items-end justify-between gap-3"> <div className="flex flex-wrap items-end justify-between gap-3">
<div> <div>
<h1 className="text-2xl font-bold tracking-tight">Häuser & Wohnungen</h1> <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 Bestand pflegen – jedes Haus besteht aus mehreren Wohneinheiten, die hier
zugeordnet angelegt und bearbeitet werden zugeordnet angelegt und bearbeitet werden
</p> </p>
@@ -307,8 +307,8 @@ export default function Bestand() {
</div> </div>
{buildings.length === 0 ? ( {buildings.length === 0 ? (
<div className="rounded-2xl border border-dashed bg-white p-10 text-center text-sm text-slate-500"> <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" /> <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. Noch keine Häuser angelegt – legen Sie zuerst ein Haus an, dann dessen Wohneinheiten.
</div> </div>
) : ( ) : (
@@ -323,12 +323,12 @@ export default function Bestand() {
{/* Haus-Kopf */} {/* Haus-Kopf */}
<div className="flex items-start justify-between gap-2"> <div className="flex items-start justify-between gap-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="rounded-xl bg-slate-100 p-2"> <span className="rounded-xl bg-slate-100 p-2 dark:bg-slate-800">
<Building2 className="h-5 w-5 text-slate-600" /> <Building2 className="h-5 w-5 text-slate-600 dark:text-slate-300" />
</span> </span>
<div> <div>
<div className="font-semibold">{h.name}</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} <MapPin className="h-3 w-3" /> {h.adresse}
</div> </div>
</div> </div>
@@ -336,82 +336,82 @@ export default function Bestand() {
<HausDialog haus={h} /> <HausDialog haus={h} />
</div> </div>
<dl className="mt-4 grid grid-cols-2 gap-x-4 gap-y-2 text-xs"> <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 <CalendarDays className="h-3.5 w-3.5 shrink-0" /> Baujahr
</div> </div>
<dd className="text-right font-medium text-slate-800">{h.baujahr}</dd> <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"> <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 <ArrowUpDown className="h-3.5 w-3.5 shrink-0" /> Stockwerke
</div> </div>
<dd className="text-right font-medium text-slate-800">{h.stockwerke}</dd> <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"> <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 <Ruler className="h-3.5 w-3.5 shrink-0" /> Etagenhöhe
</div> </div>
<dd className="text-right font-medium text-slate-800">{h.etagenhoehe.toLocaleString('de-DE')} m</dd> <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"> <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 <Home className="h-3.5 w-3.5 shrink-0" /> Wohnfläche
</div> </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> </dl>
{/* Belegungsfortschritt: angelegte Wohneinheiten gegen Soll */} {/* Belegungsfortschritt: angelegte Wohneinheiten gegen Soll */}
<div className="mt-4"> <div className="mt-4">
<div className="mb-1 flex items-center justify-between text-xs"> <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 <LayoutGrid className="h-3.5 w-3.5" /> Wohneinheiten
</span> </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 {angelegt} von {h.wohneinheiten} angelegt
</span> </span>
</div> </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 <div
className={`h-full rounded-full transition-all ${voll ? 'bg-teal-500' : ueberSoll ? 'bg-amber-500' : 'bg-slate-400'}`} 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)}%` }} style={{ width: `${Math.min(100, h.wohneinheiten ? (angelegt / h.wohneinheiten) * 100 : 0)}%` }}
/> />
</div> </div>
{ueberSoll && ( {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> </div>
{/* Wohneinheiten des Hauses (1:n) */} {/* Wohneinheiten des Hauses (1:n) */}
<div className="mt-4 border-t pt-3"> <div className="mt-4 border-t pt-3">
<div className="mb-2 flex items-center justify-between"> <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}) Wohneinheiten ({angelegt})
</h3> </h3>
<WohnungDialog gebaeude={gebaeudeNamen} festesHaus={h.name} /> <WohnungDialog gebaeude={gebaeudeNamen} festesHaus={h.name} />
</div> </div>
{angelegt === 0 ? ( {angelegt === 0 ? (
<div className="rounded-xl border border-dashed py-6 text-center text-xs text-slate-400"> <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" /> <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. Noch keine Wohnungen – über „+ Wohnung" die erste Einheit anlegen.
</div> </div>
) : ( ) : (
<ul className="space-y-2"> <ul className="space-y-2">
{wohnungen.map((u) => ( {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="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} 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² Etage {u.floor} · {u.size.toLocaleString('de-DE')} m²
</span> </span>
</div> </div>
<Badge <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" variant="secondary"
> >
{u.status} {u.status}
</Badge> </Badge>
</div> </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"> <span className="flex items-center gap-1 truncate">
<Users className="h-3.5 w-3.5 shrink-0" /> {u.tenant ?? '–'} <Users className="h-3.5 w-3.5 shrink-0" /> {u.tenant ?? '–'}
</span> </span>
<span className="flex shrink-0 items-center gap-2"> <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} /> <WohnungDialog wohnung={u} gebaeude={gebaeudeNamen} festesHaus={h.name} />
</span> </span>
</div> </div>
@@ -429,12 +429,12 @@ export default function Bestand() {
{verwaisteWohnungen.length > 0 && ( {verwaisteWohnungen.length > 0 && (
<section className="space-y-3"> <section className="space-y-3">
<h2 className="text-lg font-semibold">Wohnungen ohne Hauszuordnung</h2> <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. Diese Wohnungen verweisen auf ein nicht angelegtes Haus – bitte Zuordnung über „Bearbeiten" korrigieren.
</p> </p>
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3"> <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
{verwaisteWohnungen.map((u) => ( {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="font-semibold">{u.building}, Whg. {u.number}</div>
<div className="mt-2"> <div className="mt-2">
<WohnungDialog wohnung={u} gebaeude={gebaeudeNamen} /> <WohnungDialog wohnung={u} gebaeude={gebaeudeNamen} />