Hocks Mieterportal: 5 Module (Dashboard, Mietkonto, Schadensmeldungen, Dokumente, Nachrichten), Docker-Setup, eigenes Branding

2026-10-02 10:02:19 +02:00
commit 38d5099a2c
91 changed files with 17062 additions and 0 deletions
@@ -0,0 +1,142 @@
+import { NavLink, Outlet } from 'react-router'
+import {
+  LayoutDashboard,
+  Wallet,
+  Wrench,
+  FileText,
+  MessagesSquare,
+  LogOut,
+  Building2,
+  Bell,
+} from 'lucide-react'
+import { useStore } from '../store/store'
+import logo from '../assets/logo.png'
+
+const navItems = [
+  { to: '/', label: 'Dashboard', icon: LayoutDashboard, end: true },
+  { to: '/mietkonto', label: 'Mietkonto & Zahlungen', icon: Wallet },
+  { to: '/schadensmeldungen', label: 'Schadensmeldungen', icon: Wrench },
+  { to: '/dokumente', label: 'Dokumente', icon: FileText },
+  { to: '/nachrichten', label: 'Nachrichten', icon: MessagesSquare },
+]
+
+export default function AppLayout() {
+  const { role, dispatch, threads } = useStore()
+  const unread = threads.filter((t) =>
+    role === 'tenant' ? t.unreadByTenant : t.unreadByAdmin,
+  ).length
+
+  return (
+    <div className="flex min-h-screen bg-slate-50">
+      {/* 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">
+          <img src={logo} alt="Hocks Logo" className="h-11 w-11" />
+          <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>
+        </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">
+            Angemeldet als
+          </div>
+          <div className="font-semibold">
+            {role === 'tenant' ? 'Anna Berger (Mieterin)' : 'Hocks Verwaltung'}
+          </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 }) => (
+            <NavLink
+              key={to}
+              to={to}
+              end={end}
+              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'
+                }`
+              }
+            >
+              <Icon className="h-4.5 w-4.5" />
+              <span className="flex-1">{label}</span>
+              {label === 'Nachrichten' && unread > 0 && (
+                <span className="rounded-full bg-red-500 px-2 py-0.5 text-[10px] font-bold">
+                  {unread}
+                </span>
+              )}
+            </NavLink>
+          ))}
+        </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">
+            <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>
+      </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">
+          <img src={logo} alt="Hocks Logo" className="h-9 w-9" />
+          <div className="flex-1 font-bold text-[#0b3a44]">Hocks Mieterportal</div>
+          <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"
+          >
+            {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">
+          {navItems.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'
+                }`
+              }
+            >
+              <Icon className="h-3.5 w-3.5" />
+              {label.split(' &')[0]}
+            </NavLink>
+          ))}
+        </nav>
+
+        <main className="flex-1 p-4 md:p-8">
+          <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>
+  )
+}