feat: Sprint 4 complete — frontend MVP (admin dashboard + member portal)

Shadboard starter-kit (Next.js 15 + React 19 + shadcn/ui + Tailwind 4) Sprint 4.a — Admin Dashboard: - Auth: NextAuth.js v5, login page, middleware, token rotation - Dashboard: KPI cards, Recharts stock chart, quick actions - Members: TanStack Table (search/sort/paginate), add/edit forms - Distributions: multi-step form, real-time quota check, history - Stock: batch management, recall dialog, bar chart - Reports: monthly/member-list/recall, PDF/CSV download, preview Sprint 4.b — Member Portal: - Separate route group with top-nav layout (mobile-first) - Quota dashboard with radial SVG progress indicators - Distribution history with month filter - Profile/settings with password change Cross-cutting: - i18n: German (default) + English via next-intl - Dark + light mode (next-themes, user-togglable) - Playwright E2E tests (6/6 green) - Docker multi-stage build (node:22-alpine) - API proxy via Next.js rewrites Tech: Next.js 15.2.8, React 19, Tailwind 4, NextAuth v5, TanStack Table, Recharts, Zod, React Hook Form, Playwright
2026-06-12 17:18:38 +02:00
parent a1d4ba44e3
commit fe6e96dd3f
143 changed files with 23568 additions and 0 deletions
@@ -0,0 +1,79 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { useTranslations } from "next-intl"
+import { Cannabis, History, LayoutDashboard, LogOut, User } from "lucide-react"
+
+import { mockPortalUser } from "@/data/mock/portal"
+
+import { cn } from "@/lib/utils"
+
+import { ModeDropdown } from "@/components/layout/mode-dropdown"
+
+const navItems = [
+  { href: "/portal/dashboard", icon: LayoutDashboard, labelKey: "dashboard" },
+  { href: "/portal/history", icon: History, labelKey: "history" },
+  { href: "/portal/profile", icon: User, labelKey: "profile" },
+] as const
+
+export function PortalNavbar() {
+  const t = useTranslations("portal")
+  const pathname = usePathname()
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="mx-auto flex h-14 max-w-4xl items-center justify-between px-4">
+        {/* Logo + Club Name */}
+        <Link
+          href="/portal/dashboard"
+          className="flex items-center gap-2 font-semibold"
+        >
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
+            <Cannabis className="h-4 w-4 text-primary" />
+          </div>
+          <span className="hidden sm:inline-block text-sm">
+            {mockPortalUser.clubName}
+          </span>
+        </Link>
+
+        {/* Navigation Links */}
+        <nav className="flex items-center gap-1">
+          {navItems.map((item) => {
+            const isActive = pathname === item.href
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  "flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                  isActive
+                    ? "bg-primary/10 text-primary"
+                    : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                )}
+              >
+                <item.icon className="h-4 w-4" />
+                <span className="hidden sm:inline-block">
+                  {t(item.labelKey)}
+                </span>
+              </Link>
+            )
+          })}
+        </nav>
+
+        {/* Right Side: Theme + Logout */}
+        <div className="flex items-center gap-1">
+          <ModeDropdown />
+          <Link
+            href="/portal-login"
+            className="flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+            aria-label={t("logout")}
+          >
+            <LogOut className="h-4 w-4" />
+            <span className="hidden sm:inline-block">{t("logout")}</span>
+          </Link>
+        </div>
+      </div>
+    </header>
+  )
+}