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>
)
}