feat(platform): add audit logs and activity feed

frontend/athena/components/common/ToastProvider.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import { CheckCircle2, Info, X, XCircle } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+type ToastType = "success" | "error" | "info";
+
+type Toast = {
+  id: number;
+  type: ToastType;
+  title: string;
+  description?: string;
+};
+
+type ToastInput = Omit<Toast, "id">;
+
+type ToastContextValue = {
+  showToast: (toast: ToastInput) => void;
+};
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+const iconByType = {
+  success: CheckCircle2,
+  error: XCircle,
+  info: Info,
+};
+
+const colorByType = {
+  success: "border-emerald-200 bg-emerald-50 text-emerald-950",
+  error: "border-red-200 bg-red-50 text-red-950",
+  info: "border-slate-200 bg-white text-slate-950",
+};
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const dismissToast = useCallback((id: number) => {
+    setToasts((current) => current.filter((toast) => toast.id !== id));
+  }, []);
+
+  const showToast = useCallback((toast: ToastInput) => {
+    const id = Date.now() + Math.floor(Math.random() * 1000);
+    setToasts((current) => [...current, { ...toast, id }]);
+    window.setTimeout(() => dismissToast(id), 5000);
+  }, [dismissToast]);
+
+  const value = useMemo(() => ({ showToast }), [showToast]);
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <div className="fixed right-6 top-6 z-50 flex w-[min(24rem,calc(100vw-3rem))] flex-col gap-3">
+        {toasts.map((toast) => {
+          const Icon = iconByType[toast.type];
+
+          return (
+            <div
+              key={toast.id}
+              className={`rounded-lg border p-4 shadow-lg ${colorByType[toast.type]}`}
+              role="status"
+            >
+              <div className="flex gap-3">
+                <Icon className="mt-0.5 h-5 w-5 shrink-0" />
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-semibold">{toast.title}</p>
+                  {toast.description && (
+                    <p className="mt-1 text-sm opacity-80">{toast.description}</p>
+                  )}
+                </div>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 shrink-0"
+                  onClick={() => dismissToast(toast.id)}
+                  aria-label="Meldung schließen"
+                >
+                  <X size={16} />
+                </Button>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  const context = useContext(ToastContext);
+
+  if (!context) {
+    throw new Error("useToast muss innerhalb des ToastProvider verwendet werden");
+  }
+
+  return context;
+}