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

v1.1: Rebrand Hinterstein Immobilien + echtes Auth-System

Browse Source 
- Rebrand: Kunden-Logo, Joseph-Hinterstein-Portrait, Kontakt-Banner, Texte
- Login-Pflicht auf /login (Route-Guard), Gruppen Verwaltung/Mieter
- Mieter-Registrierung per einmaligem Registrierungscode
- Benutzerverwaltung als 6. Modul (/benutzer, nur Verwaltung)
- Demo-Zugänge mit Passwort 0815 (j.hinterstein, a.berger, m.wolf)
- Mail-Server-API: Token-Auth (/send, X-Api-Token), Mail-Stack live auf Server
- Store-Key hinterstein-mieterportal-v2, Doku (kimi.md, README) nachgeführt
This commit is contained in:
ah-admin
2026-10-02 12:11:43 +02:00
parent ccfe08ad24
commit fbe033ebd6
22 changed files with 1067 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AppLayout.tsx
+35 -46
View File
@@ -1,17 +1,17 @@
import { NavLink, Outlet } from 'react-router'
import { NavLink, Outlet, useNavigate } from 'react-router'
import {
LayoutDashboard,
Wallet,
Wrench,
FileText,
MessagesSquare,
UserCog,
LogOut,
Building2,
Bell,
} from 'lucide-react'
import { useStore } from '../store/store'
import ThemeToggle from './ThemeToggle'
import logo from '../assets/logo.png'
import logo from '../assets/hinterstein/logo.png'
const navItems = [
{ to: '/', label: 'Dashboard', icon: LayoutDashboard, end: true },
@@ -22,44 +22,46 @@ const navItems = [
]
export default function AppLayout() {
const { role, dispatch, threads } = useStore()
const { role, me, logout, threads } = useStore()
const navigate = useNavigate()
const unread = threads.filter((t) =>
role === 'tenant' ? t.unreadByTenant : t.unreadByAdmin,
).length
const abmelden = () => {
logout()
navigate('/login')
}
const alleNavItems =
role === 'admin'
? [...navItems, { to: '/benutzer', label: 'Benutzerverwaltung', icon: UserCog }]
: navItems
return (
<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">
<aside className="hidden w-72 flex-col bg-[#22333b] text-white md:flex">
<div className="flex items-center gap-3 px-6 py-6">
<img src={logo} alt="Hocks Logo" className="h-11 w-11" />
<img src={logo} alt="Logo Hinterstein Immobilien" className="h-12 w-12 rounded-full bg-white/95 object-contain p-1" />
<div>
<div className="text-lg font-bold leading-tight">Hocks Mieterportal</div>
<div className="text-xs text-teal-200/80">mieterportal.hocks.eu</div>
<div className="text-lg font-bold leading-tight">Hinterstein</div>
<div className="text-xs text-amber-200/90">Immobilien · Mieterportal</div>
</div>
</div>
<div className="mx-6 mb-4 rounded-xl bg-white/10 p-3 text-sm">
<div className="mb-1 text-xs uppercase tracking-wide text-teal-200/70">
<div className="mb-1 text-xs uppercase tracking-wide text-slate-300/80">
Angemeldet als
</div>
<div className="font-semibold">
{role === 'tenant' ? 'Anna Berger (Mieterin)' : 'Hocks Verwaltung'}
<div className="font-semibold">{me?.name}</div>
<div className="text-xs text-slate-300/80">
{role === 'admin' ? 'Gruppe: Verwaltung' : 'Gruppe: Mieter'}
</div>
<button
onClick={() =>
dispatch({ type: 'setRole', role: role === 'tenant' ? 'admin' : 'tenant' })
}
className="mt-2 w-full rounded-lg bg-teal-500/20 px-3 py-1.5 text-xs font-medium text-teal-100 transition hover:bg-teal-500/30"
>
{role === 'tenant'
? '→ Als Verwaltung anzeigen'
: '→ Als Mieterin anzeigen'}
</button>
</div>
<nav className="flex-1 space-y-1 px-4">
{navItems.map(({ to, label, icon: Icon, end }) => (
{alleNavItems.map(({ to, label, icon: Icon, end }) => (
<NavLink
key={to}
to={to}
@@ -67,8 +69,8 @@ export default function AppLayout() {
className={({ isActive }) =>
`flex items-center gap-3 rounded-xl px-4 py-2.5 text-sm font-medium transition ${
isActive
? 'bg-teal-500 text-white shadow'
: 'text-teal-100/80 hover:bg-white/10 hover:text-white'
? 'bg-amber-500 text-slate-900 shadow'
: 'text-slate-200/80 hover:bg-white/10 hover:text-white'
}`
}
>
@@ -84,17 +86,17 @@ export default function AppLayout() {
</nav>
<div className="border-t border-white/10 p-4">
<div className="mb-2 flex items-center gap-2 px-2 text-xs text-teal-200/70">
<div className="mb-2 flex items-center gap-2 px-2 text-xs text-slate-300/70">
<Building2 className="h-3.5 w-3.5" />
3 Häuser · 50 Wohnungen
</div>
<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"
<button
onClick={abmelden}
className="flex flex-1 items-center gap-3 rounded-xl px-4 py-2.5 text-sm text-slate-200/80 transition hover:bg-white/10 hover:text-white"
>
<LogOut className="h-4 w-4" /> Abmelden
</NavLink>
</button>
<ThemeToggle dunkelStil />
</div>
</div>
@@ -103,27 +105,19 @@ export default function AppLayout() {
{/* 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 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] dark:text-teal-100">Hocks Mieterportal</div>
<img src={logo} alt="Logo Hinterstein Immobilien" className="h-9 w-9 rounded-full bg-white object-contain p-0.5 ring-1 ring-slate-200" />
<div className="flex-1 font-bold text-[#22333b] dark:text-amber-100">Hinterstein Immobilien</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 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 dark:bg-slate-900 md:hidden">
{navItems.map(({ to, label, icon: Icon, end }) => (
{alleNavItems.map(({ to, label, icon: Icon, end }) => (
<NavLink
key={to}
to={to}
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 dark:text-slate-300'
isActive ? 'bg-amber-500 text-slate-900' : 'text-slate-600 dark:text-slate-300'
}`
}
>
@@ -137,11 +131,6 @@ export default function AppLayout() {
<Outlet />
</main>
</div>
{/* Decorative fixed bell (placeholder for notifications) */}
<div className="pointer-events-none fixed bottom-4 right-4 hidden opacity-0">
<Bell />
</div>
</div>
)
}