feat(sprint-6): Phase 6 — Notifications (WebSocket) + PWA

- WebSocket: Spring STOMP + SockJS, NotificationService, persistent notifications table
- NotificationController: GET/PUT endpoints for notification management
- Frontend: notification bell with unread badge, dropdown panel, real-time via STOMP
- PWA: manifest.json, service worker (manual sw.js), offline page, install prompt
- PWA icons (192+512), dark theme colors, standalone display
- Full i18n (de/en) for notifications and PWA
- Flyway V10 migration for notifications table
- spring-boot-starter-websocket dependency added

cannamanage-frontend/src/components/notification-bell.tsx

@@ -0,0 +1,154 @@
+"use client"
+
+import { useState } from "react"
+import {
+  getNotifications,
+  markAllNotificationsAsRead,
+  markNotificationAsRead,
+} from "@/services/notifications"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { useTranslations } from "next-intl"
+import { Bell, Check, CheckCheck } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function NotificationBell() {
+  const t = useTranslations("notifications")
+  const queryClient = useQueryClient()
+  const [open, setOpen] = useState(false)
+
+  const { data } = useQuery({
+    queryKey: ["notifications"],
+    queryFn: getNotifications,
+    refetchInterval: 30000, // Poll every 30s as fallback
+  })
+
+  const markReadMutation = useMutation({
+    mutationFn: markNotificationAsRead,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["notifications"] })
+    },
+  })
+
+  const markAllReadMutation = useMutation({
+    mutationFn: markAllNotificationsAsRead,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["notifications"] })
+    },
+  })
+
+  const notifications = data?.notifications ?? []
+  const unreadCount = data?.unreadCount ?? 0
+
+  const handleNotificationClick = (id: string, link: string) => {
+    markReadMutation.mutate(id)
+    setOpen(false)
+    if (link) {
+      window.location.href = link
+    }
+  }
+
+  const getTypeIcon = (type: string) => {
+    switch (type) {
+      case "QUOTA_WARNING":
+        return "⚠️"
+      case "BATCH_RECALLED":
+        return "🔴"
+      case "DISTRIBUTION_RECORDED":
+        return "✅"
+      case "SUBSCRIPTION_EXPIRING":
+        return "⏰"
+      default:
+        return "🔔"
+    }
+  }
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="relative"
+          aria-label={t("title")}
+        >
+          <Bell className="h-5 w-5" />
+          {unreadCount > 0 && (
+            <Badge
+              variant="destructive"
+              className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full p-0 text-xs"
+            >
+              {unreadCount > 9 ? "9+" : unreadCount}
+            </Badge>
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-80">
+        <DropdownMenuLabel className="flex items-center justify-between">
+          <span>{t("title")}</span>
+          {unreadCount > 0 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-auto p-1 text-xs"
+              onClick={() => markAllReadMutation.mutate()}
+            >
+              <CheckCheck className="mr-1 h-3 w-3" />
+              {t("markAllRead")}
+            </Button>
+          )}
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {notifications.length === 0 ? (
+          <div className="px-4 py-6 text-center text-sm text-muted-foreground">
+            {t("noNotifications")}
+          </div>
+        ) : (
+          notifications.map((notification) => (
+            <DropdownMenuItem
+              key={notification.id}
+              className={`flex cursor-pointer flex-col items-start gap-1 p-3 ${
+                !notification.read ? "bg-muted/50" : ""
+              }`}
+              onClick={() =>
+                handleNotificationClick(notification.id, notification.link)
+              }
+            >
+              <div className="flex w-full items-center gap-2">
+                <span className="text-sm">
+                  {getTypeIcon(notification.type)}
+                </span>
+                <span className="flex-1 text-sm font-medium">
+                  {notification.title}
+                </span>
+                {!notification.read && (
+                  <Check className="h-3 w-3 text-primary" />
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground line-clamp-2 pl-6">
+                {notification.message}
+              </p>
+              <span className="text-xs text-muted-foreground pl-6">
+                {new Date(notification.createdAt).toLocaleDateString("de-DE", {
+                  day: "2-digit",
+                  month: "2-digit",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                })}
+              </span>
+            </DropdownMenuItem>
+          ))
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

cannamanage-frontend/src/components/pwa-install-prompt.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useTranslations } from "next-intl"
+import { Download, X } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+
+interface BeforeInstallPromptEvent extends Event {
+  prompt: () => Promise<void>
+  userChoice: Promise<{ outcome: "accepted" | "dismissed" }>
+}
+
+export function PwaInstallPrompt() {
+  const t = useTranslations("pwa")
+  const [deferredPrompt, setDeferredPrompt] =
+    useState<BeforeInstallPromptEvent | null>(null)
+  const [dismissed, setDismissed] = useState(false)
+
+  useEffect(() => {
+    // Check if already dismissed permanently
+    if (localStorage.getItem("pwa-install-dismissed") === "true") {
+      setDismissed(true)
+      return
+    }
+
+    const handler = (e: Event) => {
+      e.preventDefault()
+      setDeferredPrompt(e as BeforeInstallPromptEvent)
+    }
+
+    window.addEventListener("beforeinstallprompt", handler)
+    return () => window.removeEventListener("beforeinstallprompt", handler)
+  }, [])
+
+  const handleInstall = async () => {
+    if (!deferredPrompt) return
+    await deferredPrompt.prompt()
+    const { outcome } = await deferredPrompt.userChoice
+    if (outcome === "accepted") {
+      setDeferredPrompt(null)
+    }
+  }
+
+  const handleDismiss = () => {
+    setDismissed(true)
+    localStorage.setItem("pwa-install-dismissed", "true")
+    setDeferredPrompt(null)
+  }
+
+  if (!deferredPrompt || dismissed) return null
+
+  return (
+    <div className="fixed bottom-4 left-4 right-4 z-50 mx-auto max-w-md animate-in slide-in-from-bottom-4 rounded-lg border bg-card p-4 shadow-lg">
+      <div className="flex items-start gap-3">
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10">
+          <Download className="h-5 w-5 text-primary" />
+        </div>
+        <div className="flex-1">
+          <p className="text-sm font-medium">{t("install")}</p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            {t("installDesc")}
+          </p>
+          <div className="mt-3 flex gap-2">
+            <Button size="sm" onClick={handleInstall}>
+              {t("install")}
+            </Button>
+            <Button size="sm" variant="ghost" onClick={handleDismiss}>
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

cannamanage-frontend/src/components/sw-registration.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import { useEffect } from "react"
+
+/**
+ * Registers the service worker on mount.
+ * Must be rendered as a client component in the root layout.
+ */
+export function ServiceWorkerRegistration() {
+  useEffect(() => {
+    if ("serviceWorker" in navigator && process.env.NODE_ENV === "production") {
+      navigator.serviceWorker.register("/sw.js").catch((err) => {
+        console.warn("SW registration failed:", err)
+      })
+    }
+  }, [])
+
+  return null
+}