feat: email notifications + deadline reminder system
Database: - notification_preferences table (user_id, tenant_id, reminder days, email/digest toggles) - notifications table (type, entity link, read/sent tracking, dedup index) Backend: - NotificationService with background goroutine checking reminders hourly - CheckDeadlineReminders: finds deadlines due in N days per user prefs, creates notifications - Overdue deadline detection and notification - Daily digest at 8am: compiles pending notifications into one email - SendEmail via `m mail send` CLI command - Deduplication: same notification type + entity + day = skip - API: GET/PATCH notifications, unread count, mark read/all-read - API: GET/PUT notification-preferences with upsert Frontend: - NotificationBell in header with unread count badge (polls every 30s) - Dropdown panel with notification list, type-colored dots, time-ago, entity links - Mark individual/all as read - NotificationSettings in Einstellungen page: reminder day toggles, email toggle, digest toggle
This commit is contained in:
m
205
frontend/src/components/notifications/NotificationBell.tsx
Normal file
205
frontend/src/components/notifications/NotificationBell.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { Bell, Check, CheckCheck, ExternalLink } from "lucide-react";
|
||||
import { api } from "@/lib/api";
|
||||
import type { Notification, NotificationListResponse } from "@/lib/types";
|
||||
|
||||
function getEntityLink(n: Notification): string | null {
|
||||
if (!n.entity_type || !n.entity_id) return null;
|
||||
switch (n.entity_type) {
|
||||
case "deadline":
|
||||
return `/fristen/${n.entity_id}`;
|
||||
case "appointment":
|
||||
return `/termine/${n.entity_id}`;
|
||||
case "case":
|
||||
return `/akten/${n.entity_id}`;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function getTypeColor(type: Notification["type"]): string {
|
||||
switch (type) {
|
||||
case "deadline_overdue":
|
||||
return "bg-red-500";
|
||||
case "deadline_reminder":
|
||||
return "bg-amber-500";
|
||||
case "case_update":
|
||||
return "bg-blue-500";
|
||||
case "assignment":
|
||||
return "bg-violet-500";
|
||||
default:
|
||||
return "bg-neutral-500";
|
||||
}
|
||||
}
|
||||
|
||||
function timeAgo(dateStr: string): string {
|
||||
const now = new Date();
|
||||
const date = new Date(dateStr);
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffMin = Math.floor(diffMs / 60000);
|
||||
if (diffMin < 1) return "gerade eben";
|
||||
if (diffMin < 60) return `vor ${diffMin} Min.`;
|
||||
const diffHours = Math.floor(diffMin / 60);
|
||||
if (diffHours < 24) return `vor ${diffHours} Std.`;
|
||||
const diffDays = Math.floor(diffHours / 24);
|
||||
if (diffDays === 1) return "gestern";
|
||||
return `vor ${diffDays} Tagen`;
|
||||
}
|
||||
|
||||
export function NotificationBell() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const panelRef = useRef<HTMLDivElement>(null);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data: unreadData } = useQuery({
|
||||
queryKey: ["notifications-unread-count"],
|
||||
queryFn: () =>
|
||||
api.get<{ unread_count: number }>("/api/notifications/unread-count"),
|
||||
refetchInterval: 30_000,
|
||||
});
|
||||
|
||||
const { data: notifData } = useQuery({
|
||||
queryKey: ["notifications"],
|
||||
queryFn: () =>
|
||||
api.get<NotificationListResponse>("/api/notifications?limit=20"),
|
||||
enabled: open,
|
||||
});
|
||||
|
||||
const markRead = useMutation({
|
||||
mutationFn: (id: string) =>
|
||||
api.patch(`/api/notifications/${id}/read`),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["notifications"] });
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["notifications-unread-count"],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const markAllRead = useMutation({
|
||||
mutationFn: () => api.patch("/api/notifications/read-all"),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["notifications"] });
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["notifications-unread-count"],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// Close on click outside
|
||||
useEffect(() => {
|
||||
function handleClickOutside(e: MouseEvent) {
|
||||
if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
if (open) {
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
}
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, [open]);
|
||||
|
||||
const unreadCount = unreadData?.unread_count ?? 0;
|
||||
const notifications = notifData?.data ?? [];
|
||||
|
||||
return (
|
||||
<div className="relative" ref={panelRef}>
|
||||
<button
|
||||
onClick={() => setOpen(!open)}
|
||||
className="relative rounded-md p-1.5 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600"
|
||||
title="Benachrichtigungen"
|
||||
>
|
||||
<Bell className="h-4 w-4" />
|
||||
{unreadCount > 0 && (
|
||||
<span className="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-bold text-white">
|
||||
{unreadCount > 99 ? "99+" : unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute right-0 top-full z-50 mt-2 w-80 rounded-xl border border-neutral-200 bg-white shadow-lg sm:w-96">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between border-b border-neutral-100 px-4 py-3">
|
||||
<h3 className="text-sm font-semibold text-neutral-900">
|
||||
Benachrichtigungen
|
||||
</h3>
|
||||
{unreadCount > 0 && (
|
||||
<button
|
||||
onClick={() => markAllRead.mutate()}
|
||||
className="flex items-center gap-1 text-xs text-neutral-500 hover:text-neutral-700"
|
||||
>
|
||||
<CheckCheck className="h-3 w-3" />
|
||||
Alle gelesen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Notification list */}
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
{notifications.length === 0 ? (
|
||||
<div className="p-6 text-center text-sm text-neutral-400">
|
||||
Keine Benachrichtigungen
|
||||
</div>
|
||||
) : (
|
||||
notifications.map((n) => {
|
||||
const link = getEntityLink(n);
|
||||
return (
|
||||
<div
|
||||
key={n.id}
|
||||
className={`flex items-start gap-3 border-b border-neutral-50 px-4 py-3 transition-colors last:border-0 ${
|
||||
n.read_at
|
||||
? "bg-white"
|
||||
: "bg-blue-50/50"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`mt-1.5 h-2 w-2 flex-shrink-0 rounded-full ${getTypeColor(n.type)}`}
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium text-neutral-900 leading-snug">
|
||||
{n.title}
|
||||
</p>
|
||||
{n.body && (
|
||||
<p className="mt-0.5 text-xs text-neutral-500 line-clamp-2">
|
||||
{n.body}
|
||||
</p>
|
||||
)}
|
||||
<div className="mt-1.5 flex items-center gap-2">
|
||||
<span className="text-[11px] text-neutral-400">
|
||||
{timeAgo(n.created_at)}
|
||||
</span>
|
||||
{link && (
|
||||
<a
|
||||
href={link}
|
||||
onClick={() => setOpen(false)}
|
||||
className="flex items-center gap-0.5 text-[11px] text-blue-600 hover:text-blue-700"
|
||||
>
|
||||
<ExternalLink className="h-2.5 w-2.5" />
|
||||
Anzeigen
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{!n.read_at && (
|
||||
<button
|
||||
onClick={() => markRead.mutate(n.id)}
|
||||
className="flex-shrink-0 rounded p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
|
||||
title="Als gelesen markieren"
|
||||
>
|
||||
<Check className="h-3 w-3" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user