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
2026-06-12 23:02:44 +02:00
parent 076fd6f9b3
commit 599514c0db
39 changed files with 6684 additions and 3217 deletions
@@ -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>
+  )
+}