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

Schulportal-Konventionen übernommen: Dark Mode (ThemeToggle), beispieldaten.py + generated.json, kimi.md, mail-server (Postfix-Relay + API), Deploy-Workflow (pscp/plink, npm_default), Screenshots in preview/

Browse Source
This commit is contained in:
ah-admin
2026-10-02 10:46:10 +02:00
parent ca97ea028f
commit b3dfb8ab7c
27 changed files with 7284 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AppLayout.tsx
+17 -12
View File
@@ -10,6 +10,7 @@ import {
Bell,
} from 'lucide-react'
import { useStore } from '../store/store'
import ThemeToggle from './ThemeToggle'
import logo from '../assets/logo.png'
const navItems = [
@@ -27,7 +28,7 @@ export default function AppLayout() {
).length
return (
<div className="flex min-h-screen bg-slate-50">
<div className="flex min-h-screen bg-slate-50 dark:bg-slate-950">
{/* Sidebar */}
<aside className="hidden w-72 flex-col bg-[#0b3a44] text-white md:flex">
<div className="flex items-center gap-3 px-6 py-6">
@@ -87,30 +88,34 @@ export default function AppLayout() {
<Building2 className="h-3.5 w-3.5" />
3 Häuser · 50 Wohnungen
</div>
<NavLink
to="/login"
className="flex items-center gap-3 rounded-xl px-4 py-2.5 text-sm text-teal-100/80 transition hover:bg-white/10 hover:text-white"
>
<LogOut className="h-4 w-4" /> Abmelden
</NavLink>
<div className="flex items-center gap-2">
<NavLink
to="/login"
className="flex flex-1 items-center gap-3 rounded-xl px-4 py-2.5 text-sm text-teal-100/80 transition hover:bg-white/10 hover:text-white"
>
<LogOut className="h-4 w-4" /> Abmelden
</NavLink>
<ThemeToggle dunkelStil />
</div>
</div>
</aside>
{/* Mobile top bar */}
<div className="flex min-h-screen flex-1 flex-col">
<header className="sticky top-0 z-20 flex items-center gap-3 border-b bg-white/90 px-4 py-3 backdrop-blur md:hidden">
<header className="sticky top-0 z-20 flex items-center gap-3 border-b bg-white/90 px-4 py-3 backdrop-blur dark:bg-slate-900/90 md:hidden">
<img src={logo} alt="Hocks Logo" className="h-9 w-9" />
<div className="flex-1 font-bold text-[#0b3a44]">Hocks Mieterportal</div>
<div className="flex-1 font-bold text-[#0b3a44] dark:text-teal-100">Hocks Mieterportal</div>
<ThemeToggle />
<button
onClick={() =>
dispatch({ type: 'setRole', role: role === 'tenant' ? 'admin' : 'tenant' })
}
className="rounded-lg bg-teal-50 px-2.5 py-1.5 text-xs font-semibold text-teal-700"
className="rounded-lg bg-teal-50 px-2.5 py-1.5 text-xs font-semibold text-teal-700 dark:bg-teal-500/20 dark:text-teal-100"
>
{role === 'tenant' ? 'Verwaltung' : 'Mieterin'}
</button>
</header>
<nav className="sticky top-[57px] z-10 flex gap-1 overflow-x-auto border-b bg-white px-2 py-2 md:hidden">
<nav className="sticky top-[57px] z-10 flex gap-1 overflow-x-auto border-b bg-white px-2 py-2 dark:bg-slate-900 md:hidden">
{navItems.map(({ to, label, icon: Icon, end }) => (
<NavLink
key={to}
@@ -118,7 +123,7 @@ export default function AppLayout() {
end={end}
className={({ isActive }) =>
`flex shrink-0 items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium ${
isActive ? 'bg-teal-600 text-white' : 'text-slate-600'
isActive ? 'bg-teal-600 text-white' : 'text-slate-600 dark:text-slate-300'
}`
}
>
src/components/ThemeToggle.tsx
+41
View File
@@ -0,0 +1,41 @@
import { useEffect, useState } from 'react'
import { Moon, Sun } from 'lucide-react'
import { istDunkel, setzeTheme } from '@/lib/theme'
/** Dark-Mode-Umschalter (Sonne/Mond) mit gespeicherter Präferenz. */
export default function ThemeToggle({ dunkelStil = false }: { dunkelStil?: boolean }) {
const [dunkel, setDunkel] = useState(istDunkel())
useEffect(() => {
const sync = () => setDunkel(istDunkel())
window.addEventListener('storage', sync)
return () => window.removeEventListener('storage', sync)
}, [])
const umschalten = () => {
const neu = !dunkel
setzeTheme(neu)
setDunkel(neu)
}
return (
<button
type="button"
onClick={umschalten}
aria-pressed={dunkel}
aria-label={dunkel ? 'Helles Design aktivieren' : 'Dunkles Design aktivieren'}
title={dunkel ? 'Helles Design aktivieren' : 'Dunkles Design aktivieren'}
className={`inline-flex h-8 w-8 items-center justify-center rounded-md border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
dunkelStil
? 'border-white/20 text-teal-100 hover:bg-white/10 hover:text-white'
: 'border-input text-muted-foreground hover:bg-accent hover:text-accent-foreground'
}`}
>
{dunkel ? (
<Sun className="h-4 w-4" aria-hidden="true" />
) : (
<Moon className="h-4 w-4" aria-hidden="true" />
)}
</button>
)
}
src/data/generated.json
+6452
View File
File diff suppressed because it is too large Load Diff
src/data/seed.ts
+4 -86
View File
@@ -6,97 +6,15 @@ import type {
Thread,
Announcement,
} from '../types'
const buildings = [
{ name: 'Hauptstraße 12', prefix: 'HS', count: 20, baseRent: 9.8 },
{ name: 'Ringweg 3', prefix: 'RW', count: 15, baseRent: 8.9 },
{ name: 'Am Park 5', prefix: 'AP', count: 15, baseRent: 10.4 },
]
const firstNames = [
'Anna', 'Jonas', 'Marta', 'Leon', 'Sofia', 'Felix', 'Lena', 'Paul',
'Emma', 'Noah', 'Clara', 'Ben', 'Nora', 'Max', 'Julia', 'Tim',
'Sarah', 'Finn', 'Laura', 'Jan', 'Mia', 'Tom', 'Ela', 'Kim',
]
const lastNames = [
'Berger', 'Klein', 'Wolf', 'Neumann', 'Schäfer', 'Krüger', 'Brandt',
'Vogel', 'Otto', 'Horn', 'Busch', 'Thomas', 'Pohl', 'Sander', 'Lindner',
]
import generated from './generated.json'
// Demo-Mieter: Whg. Hauptstraße 12 Nr. 7
export const DEMO_TENANT = 'Anna Berger'
export const DEMO_UNIT_ID = 'hs-7'
let nameIdx = 0
function nextName(): string {
const n = `${firstNames[nameIdx % firstNames.length]} ${lastNames[nameIdx % lastNames.length]}`
nameIdx++
return n
}
export const units: Unit[] = buildings.flatMap((b) =>
Array.from({ length: b.count }, (_, i) => {
const num = i + 1
const size = 38 + ((num * 7 + b.prefix.length * 3) % 78) // 38–115 m²
const coldRent = Math.round(size * b.baseRent)
const warmRent = coldRent + Math.round(2.4 * size) + (num % 3 === 0 ? 35 : 0)
const floor = num <= 2 ? 0 : Math.min(4, Math.floor((num - 1) / 4))
const occupied = num % 9 !== 0 // ~89 % Vermietung -> 50 Wohnungen, ~5 frei
const tenant =
b.prefix === 'HS' && num === 7
? DEMO_TENANT
: occupied
? nextName()
: null
return {
id: `${b.prefix.toLowerCase()}-${num}`,
building: b.name,
number: `${num}`,
floor,
size,
coldRent,
warmRent,
tenant,
status: occupied ? ('vermietet' as const) : ('frei' as const),
}
}),
)
const monthNames = [
'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember',
]
export const transactions: Transaction[] = units
.filter((u) => u.status === 'vermietet')
.flatMap((u) => {
const txs: Transaction[] = []
for (let m = 0; m < 12; m++) {
const dueMonth = m + 1
txs.push({
id: `tx-${u.id}-${m}`,
unitId: u.id,
tenant: u.tenant!,
month: monthNames[m],
year: 2026,
amount: u.warmRent,
type: 'Miete',
status:
dueMonth <= 9
? (u.id.charCodeAt(3) + m) % 11 === 0
? 'überfällig'
: 'bezahlt'
: dueMonth === 10
? 'offen'
: 'offen',
paidAt:
dueMonth <= 9 && (u.id.charCodeAt(3) + m) % 11 !== 0
? `0${(m % 8) + 1}.0${dueMonth}.2026`
: undefined,
})
}
return txs
})
// Maschinell erzeugte Bestandsdaten (beispieldaten.py -> generated.json)
export const units = generated.units as Unit[]
export const transactions = generated.transactions as Transaction[]
export const tickets: Ticket[] = [
{
src/index.css
+14
View File
@@ -72,4 +72,18 @@
body {
@apply bg-background text-foreground;
}
}
/* Dark-Mode-Umrechnung fester Oberflächenfarben (Karten/Zeilen) */
.dark {
color-scheme: dark;
}
.dark .bg-white {
background-color: hsl(222 47% 11%);
}
.dark .bg-slate-50 {
background-color: hsl(222 47% 14%);
}
.dark .bg-teal-50 {
background-color: hsl(180 60% 12%);
}
src/lib/theme.ts
+29
View File
@@ -0,0 +1,29 @@
/** Dark-Mode-Helfer: Klasse auf <html>, Präferenz in localStorage. */
export const THEME_KEY = 'mp-theme'
export function initTheme() {
let dunkel = false
try {
const gespeichert = localStorage.getItem(THEME_KEY)
dunkel = gespeichert
? gespeichert === 'dark'
: window.matchMedia('(prefers-color-scheme: dark)').matches
} catch {
dunkel = false
}
document.documentElement.classList.toggle('dark', dunkel)
}
export function istDunkel(): boolean {
return document.documentElement.classList.contains('dark')
}
export function setzeTheme(dunkel: boolean) {
document.documentElement.classList.toggle('dark', dunkel)
try {
localStorage.setItem(THEME_KEY, dunkel ? 'dark' : 'light')
} catch {
// Speicher nicht verfügbar – Theme gilt nur für diese Sitzung
}
}
src/main.tsx
+3
View File
@@ -2,8 +2,11 @@ import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router'
import './index.css'
import { initTheme } from './lib/theme'
import App from './App.tsx'
initTheme()
createRoot(document.getElementById('root')!).render(
<StrictMode>
<BrowserRouter>
src/pages/Dashboard.tsx
+4 -4
View File
@@ -128,7 +128,7 @@ function TenantDashboard() {
<XAxis dataKey="m" tick={{ fontSize: 12 }} stroke="#94a3b8" />
<YAxis tick={{ fontSize: 12 }} stroke="#94a3b8" width={70} />
<Tooltip formatter={(v) => fmtEUR.format(Number(v))} />
<Bar dataKey="Betrag" fill="#0d9488" radius={[6, 6, 0, 0]} />
<Bar dataKey="Betrag" fill="#0d9488" radius={[6, 6, 0, 0]} isAnimationActive={false} />
</BarChart>
</ResponsiveContainer>
</div>
@@ -276,7 +276,7 @@ function AdminDashboard() {
<XAxis dataKey="m" tick={{ fontSize: 12 }} stroke="#94a3b8" />
<YAxis tick={{ fontSize: 12 }} stroke="#94a3b8" width={80} />
<Tooltip formatter={(v) => fmtEUR.format(Number(v))} />
<Area type="monotone" dataKey="Einnahmen" stroke="#0d9488" fill="url(#gIncome)" strokeWidth={2.5} />
<Area type="monotone" dataKey="Einnahmen" stroke="#0d9488" fill="url(#gIncome)" strokeWidth={2.5} isAnimationActive={false} />
</AreaChart>
</ResponsiveContainer>
</div>
@@ -291,8 +291,8 @@ function AdminDashboard() {
<XAxis type="number" tick={{ fontSize: 11 }} stroke="#94a3b8" />
<YAxis type="category" dataKey="name" tick={{ fontSize: 11 }} stroke="#94a3b8" width={95} />
<Tooltip />
<Bar dataKey="Vermietet" stackId="a" fill="#0d9488" radius={[0, 0, 0, 0]} />
<Bar dataKey="Frei" stackId="a" fill="#f59e0b" radius={[0, 6, 6, 0]} />
<Bar dataKey="Vermietet" stackId="a" fill="#0d9488" radius={[0, 0, 0, 0]} isAnimationActive={false} />
<Bar dataKey="Frei" stackId="a" fill="#f59e0b" radius={[0, 6, 6, 0]} isAnimationActive={false} />
</BarChart>
</ResponsiveContainer>
</div>