Initial commit - ERP System

app/components/AppShell.tsx

@@ -0,0 +1,443 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { signOut, useSession } from "next-auth/react";
+import { usePathname, useRouter } from "next/navigation";
+import {
+  LayoutDashboard, Users, Ticket, LogOut, Shield, ShieldCheck, FileText, Settings,
+  UserCircle, Search, Key, Menu, X, ChevronRight, Building2
+} from "lucide-react";
+
+// ──────────────────────────────────────────────
+// STATUS TRANSLATION HELPER
+// ──────────────────────────────────────────────
+export const statusLabels: Record<string, string> = {
+  OPEN: 'Offen',
+  IN_PROGRESS: 'In Bearbeitung',
+  WAITING_FOR_CUSTOMER: 'Wartet auf Kunde',
+  RESOLVED: 'Gelöst',
+  CLOSED: 'Geschlossen',
+};
+
+export const priorityLabels: Record<string, string> = {
+  LOW: 'Niedrig',
+  MEDIUM: 'Mittel',
+  HIGH: 'Hoch',
+  CRITICAL: 'Kritisch',
+};
+
+export const priorityColors: Record<string, string> = {
+  LOW: 'bg-slate-100 text-slate-600 border-slate-200',
+  MEDIUM: 'bg-blue-50 text-blue-600 border-blue-200',
+  HIGH: 'bg-orange-50 text-orange-600 border-orange-200',
+  CRITICAL: 'bg-red-50 text-red-700 border-red-200',
+};
+
+export function getStatusBadge(status: string) {
+  const label = statusLabels[status] || status;
+  const colors: Record<string, string> = {
+    OPEN: 'text-red-700 bg-red-50 border-red-200',
+    IN_PROGRESS: 'text-amber-700 bg-amber-50 border-amber-200',
+    WAITING_FOR_CUSTOMER: 'text-indigo-700 bg-indigo-50 border-indigo-200',
+    RESOLVED: 'text-emerald-700 bg-emerald-50 border-emerald-200',
+    CLOSED: 'text-slate-700 bg-slate-50 border-slate-200',
+  };
+
+  return (
+    <span className={`px-2.5 py-1 rounded-md text-xs font-semibold border ${colors[status] || colors.CLOSED}`}>
+      {label}
+    </span>
+  );
+}
+
+export function getPriorityBadge(priority: string) {
+  const label = priorityLabels[priority] || priority;
+  const color = priorityColors[priority] || priorityColors.MEDIUM;
+  return (
+    <span className={`px-2.5 py-1 rounded-md text-xs font-semibold border ${color}`}>
+      {label}
+    </span>
+  );
+}
+
+// ──────────────────────────────────────────────
+// BREADCRUMBS
+// ──────────────────────────────────────────────
+const breadcrumbLabels: Record<string, string> = {
+  '': 'Übersicht',
+  customers: 'Kunden',
+  tickets: 'Tickets',
+  billing: 'Abrechnung',
+  products: 'Produkte',
+  sales: 'Verkauf',
+  users: 'Team',
+  roles: 'Rechte',
+  settings: 'Einstellungen',
+  search: 'Suche',
+  new: 'Neu',
+};
+
+function Breadcrumbs() {
+  const pathname = usePathname();
+  const segments = pathname.split('/').filter(Boolean);
+
+  if (segments.length === 0) return null;
+
+  const crumbs = segments.map((seg, idx) => {
+    const href = '/' + segments.slice(0, idx + 1).join('/');
+    const isLast = idx === segments.length - 1;
+    const label = breadcrumbLabels[seg] || (seg.startsWith('[') ? seg : `#${seg}`);
+
+    return (
+      <span key={href} className="flex items-center gap-1.5">
+        <ChevronRight className="w-3.5 h-3.5 text-slate-300" />
+        {isLast ? (
+          <span className="text-slate-600 font-medium">{label}</span>
+        ) : (
+          <a href={href} className="text-slate-400 hover:text-indigo-600 transition">{label}</a>
+        )}
+      </span>
+    );
+  });
+
+  return (
+    <div className="flex items-center gap-1 text-sm">
+      <a href="/" className="text-slate-400 hover:text-indigo-600 transition">Start</a>
+      {crumbs}
+    </div>
+  );
+}
+
+// ──────────────────────────────────────────────
+// FORCE PASSWORD CHANGE FORM (CUSTOMER)
+// ──────────────────────────────────────────────
+function ForcePasswordChangeForm() {
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    const res = await fetch('/api/portal/password', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ password })
+    });
+
+    if (res.ok) {
+      signOut({ callbackUrl: '/login' });
+    } else {
+      setError('Passwort muss mindestens 6 Zeichen lang sein.');
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-indigo-50 flex flex-col items-center justify-center p-4">
+      <div className="bg-white p-8 rounded-2xl shadow-xl max-w-md w-full border border-slate-200">
+        <div className="w-14 h-14 bg-amber-100 text-amber-600 rounded-2xl flex items-center justify-center mb-5 mx-auto">
+          <Key className="w-7 h-7" />
+        </div>
+        <h2 className="text-xl font-bold text-center text-slate-900 mb-2">Sicherheitshinweis</h2>
+        <p className="text-sm text-slate-500 text-center mb-6">
+          Aus Sicherheitsgründen musst du dein initiales Passwort ändern, bevor du das Portal nutzen kannst.
+        </p>
+
+        {error && <div className="mb-4 p-3 bg-red-50 text-red-700 border border-red-200 rounded-lg text-sm">{error}</div>}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Neues Passwort vergeben</label>
+            <input type="password" required minLength={6}
+              className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-amber-500 outline-none transition"
+              value={password} onChange={e => setPassword(e.target.value)} />
+          </div>
+          <button type="submit" disabled={loading}
+            className="w-full bg-amber-600 text-white font-bold py-2.5 rounded-lg hover:bg-amber-700 transition disabled:opacity-50"
+          >
+            {loading ? 'Speichert...' : 'Passwort ändern & neu einloggen'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+// ──────────────────────────────────────────────
+// MAIN APP SHELL (Sidebar + Header + Content)
+// ──────────────────────────────────────────────
+export default function AppShell({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { data: session, status } = useSession();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [liveResults, setLiveResults] = useState<any[]>([]);
+  const [showLiveResults, setShowLiveResults] = useState(false);
+  const [liveLoading, setLiveLoading] = useState(false);
+  const searchRef = useRef<HTMLDivElement>(null);
+  const debounceRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Close dropdown on click outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (searchRef.current && !searchRef.current.contains(e.target as Node)) {
+        setShowLiveResults(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Debounced live search
+  const handleSearchInput = useCallback((value: string) => {
+    setSearchQuery(value);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    if (value.trim().length < 2) {
+      setLiveResults([]);
+      setShowLiveResults(false);
+      return;
+    }
+    debounceRef.current = setTimeout(async () => {
+      setLiveLoading(true);
+      try {
+        const res = await fetch(`/api/customers/search?q=${encodeURIComponent(value)}`);
+        if (res.ok) {
+          const data = await res.json();
+          setLiveResults(data);
+          setShowLiveResults(true);
+        }
+      } catch { /* ignore */ }
+      setLiveLoading(false);
+    }, 300);
+  }, []);
+
+  const isLoginPage = pathname === "/login";
+
+  if (isLoginPage) return <div className="bg-slate-50 h-screen">{children}</div>;
+
+  if (status === "loading") {
+    return (
+      <div className="h-screen bg-gradient-to-br from-slate-50 via-white to-indigo-50 flex items-center justify-center">
+        <div className="flex flex-col items-center gap-4">
+          <div className="w-10 h-10 border-4 border-indigo-600 border-t-transparent rounded-full animate-spin"></div>
+          <p className="text-sm text-slate-500 font-medium animate-pulse">Lade System...</p>
+        </div>
+      </div>
+    );
+  }
+
+  const userType = (session?.user as any)?.userType;
+  const permissions = (session?.user as any)?.permissions || [];
+  const canManageTeam = permissions.includes('TEAM_MANAGE');
+  const canManageSettings = permissions.includes('SYSTEM_SETTINGS');
+
+  // ── CUSTOMER PORTAL ──
+  if (userType === 'CUSTOMER') {
+    if ((session?.user as any)?.forcePasswordChange) {
+      return <ForcePasswordChangeForm />;
+    }
+
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-indigo-50 flex flex-col">
+        <header className="h-16 bg-white/80 backdrop-blur-md border-b border-slate-200 flex items-center justify-between px-6 md:px-8 shadow-sm sticky top-0 z-30">
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 bg-gradient-to-br from-indigo-600 to-indigo-700 rounded-lg flex items-center justify-center font-bold text-white text-sm shadow-sm">P</div>
+            <span className="text-lg font-bold text-slate-800">Kundenportal</span>
+          </div>
+          <div className="flex items-center gap-4 md:gap-6">
+            <div className="hidden sm:flex items-center gap-2 text-sm font-medium text-slate-600">
+              <UserCircle className="w-5 h-5" />
+              {(session?.user as any)?.firstName} {(session?.user as any)?.lastName}
+            </div>
+            <button onClick={() => signOut({ callbackUrl: '/login' })}
+              className="text-sm font-medium text-slate-500 hover:text-red-600 transition flex items-center gap-2">
+              <LogOut className="w-4 h-4" /> <span className="hidden sm:inline">Abmelden</span>
+            </button>
+          </div>
+        </header>
+        <main className="flex-1 w-full max-w-5xl mx-auto p-4 md:p-8">{children}</main>
+      </div>
+    );
+  }
+
+  const canPurchasing = permissions.includes('PURCHASING_MANAGE');
+  const canSales = permissions.includes('SALES_MANAGE');
+
+  // ── TEAM LAYOUT ──
+  const navCategories = [
+    {
+      title: 'Übersicht & CRM',
+      items: [
+        { name: 'Dashboard', href: '/', icon: LayoutDashboard },
+        { name: 'Kunden', href: '/customers', icon: Users },
+      ]
+    },
+    {
+      title: 'Service & Abrechnung',
+      items: [
+        { name: 'Tickets', href: '/tickets', icon: Ticket },
+        ...(canManageTeam ? [{ name: 'Abrechnung', href: '/billing', icon: FileText }] : [])
+      ]
+    },
+    {
+      title: 'Warenwirtschaft',
+      items: [
+        ...(canPurchasing ? [{ name: 'Produkte', href: '/products', icon: Building2 }] : []),
+        ...(canSales ? [{ name: 'Verkauf', href: '/sales', icon: FileText }] : [])
+      ]
+    },
+    {
+      title: 'Administration',
+      items: [
+        ...(canManageTeam ? [
+          { name: 'Team', href: '/users', icon: Shield },
+          { name: 'Rechte', href: '/roles', icon: ShieldCheck }
+        ] : []),
+        ...(canManageSettings ? [{ name: 'Einstellungen', href: '/settings', icon: Settings }] : [])
+      ]
+    }
+  ];
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (searchQuery.trim()) {
+      router.push(`/search?q=${encodeURIComponent(searchQuery)}`);
+      setSidebarOpen(false);
+    }
+  };
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-slate-50">
+      {/* Mobile Overlay */}
+      {sidebarOpen && (
+        <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-30 lg:hidden animate-fade-in"
+          onClick={() => setSidebarOpen(false)} />
+      )}
+
+      {/* Sidebar */}
+      <aside className={`
+        fixed lg:static inset-y-0 left-0 z-40 w-64 bg-slate-900 text-slate-300 flex flex-col border-r border-slate-800 shadow-2xl lg:shadow-none
+        transform transition-transform duration-300 ease-in-out
+        ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
+      `}>
+        <div className="h-16 flex items-center justify-between px-6 border-b border-slate-800/50">
+          <div className="flex items-center gap-2">
+            <div className="w-8 h-8 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-lg shadow-lg flex items-center justify-center">
+              <ShieldCheck className="w-5 h-5 text-white" />
+            </div>
+            <span className="font-extrabold text-white tracking-tight text-lg">ERP Pro</span>
+          </div>
+          <button className="lg:hidden p-1 hover:bg-slate-800 rounded-lg transition" onClick={() => setSidebarOpen(false)}>
+            <X className="w-5 h-5 text-slate-400" />
+          </button>
+        </div>
+        <nav className="flex-1 px-4 py-6 space-y-6 overflow-y-auto">
+          {navCategories.map((category) => {
+            if (category.items.length === 0) return null;
+            return (
+              <div key={category.title} className="space-y-1">
+                <h3 className="px-3 text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">
+                  {category.title}
+                </h3>
+                {category.items.map((item) => {
+                  const isActive = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href));
+                  const Icon = item.icon;
+                  return (
+                    <a key={item.name} href={item.href}
+                      onClick={() => setSidebarOpen(false)}
+                      className={`flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 ${
+                        isActive 
+                          ? 'bg-gradient-to-r from-indigo-500/15 to-transparent text-indigo-400 font-semibold border-l-2 border-indigo-500' 
+                          : 'border-l-2 border-transparent hover:bg-slate-800/50 hover:text-white hover:translate-x-1'
+                      }`}
+                    >
+                      <Icon className={`w-5 h-5 ${isActive ? 'text-indigo-400' : 'text-slate-400'}`} /> {item.name}
+                    </a>
+                  );
+                })}
+              </div>
+            );
+          })}
+        </nav>
+        <div className="p-4 border-t border-slate-800">
+          <div className="px-3 py-2 mb-2 text-xs text-slate-500 truncate">
+            <UserCircle className="w-4 h-4 inline mr-1.5" />
+            {(session?.user as any)?.firstName} {(session?.user as any)?.lastName}
+          </div>
+          <button onClick={() => signOut({ callbackUrl: '/login' })}
+            className="flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-slate-400 hover:bg-red-500/10 hover:text-red-400 transition-all">
+            <LogOut className="w-5 h-5" /> Abmelden
+          </button>
+        </div>
+      </aside>
+
+      {/* Main Content Area */}
+      <main className="flex-1 flex flex-col h-screen overflow-hidden bg-slate-50/50">
+        <header className="h-16 bg-white/70 backdrop-blur-xl border-b border-slate-200 flex items-center justify-between px-4 md:px-8 sticky top-0 z-10 shadow-sm">
+          <div className="flex items-center gap-3">
+            <button className="lg:hidden p-2 hover:bg-slate-100 rounded-lg transition" onClick={() => setSidebarOpen(true)}>
+              <Menu className="w-5 h-5 text-slate-600" />
+            </button>
+            <Breadcrumbs />
+          </div>
+          <div className="flex items-center gap-4">
+            <div ref={searchRef} className="relative hidden sm:block">
+              <form onSubmit={handleSearch}>
+                <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 z-10" />
+                <input type="text" placeholder="Kunde suchen… (Enter = alle Module)"
+                  value={searchQuery}
+                  onChange={(e) => handleSearchInput(e.target.value)}
+                  onFocus={() => { if (liveResults.length > 0) setShowLiveResults(true); }}
+                  className="pl-9 pr-4 py-2 bg-slate-100/80 border border-slate-200 focus:bg-white focus:border-indigo-400 focus:ring-4 focus:ring-indigo-500/10 rounded-xl text-sm outline-none transition-all w-48 md:w-72 shadow-sm" />
+              </form>
+
+              {/* Live Search Dropdown */}
+              {showLiveResults && (
+                <div className="absolute top-full left-0 right-0 mt-2 bg-white rounded-2xl shadow-2xl border border-slate-200 overflow-hidden z-50 animate-fade-in-up">
+                  {liveLoading ? (
+                    <div className="px-4 py-3 text-sm text-slate-400 text-center">Suche...</div>
+                  ) : liveResults.length === 0 ? (
+                    <div className="px-4 py-3 text-sm text-slate-400 text-center">Keine Kunden gefunden</div>
+                  ) : (
+                    <ul className="max-h-72 overflow-y-auto divide-y divide-slate-50">
+                      {liveResults.map((c: any) => (
+                        <li key={c.id}>
+                          <button
+                            type="button"
+                            onClick={() => { router.push(`/customers/${c.id}`); setShowLiveResults(false); setSearchQuery(''); }}
+                            className="w-full px-4 py-3 flex items-center gap-3 hover:bg-indigo-50/60 transition-colors text-left"
+                          >
+                            <div className="p-1.5 bg-slate-100 rounded-lg flex-shrink-0">
+                              <Building2 className="w-4 h-4 text-slate-500" />
+                            </div>
+                            <div className="min-w-0">
+                              <p className="text-sm font-semibold text-slate-800 truncate">{c.companyName || `${c.firstName} ${c.lastName}`}</p>
+                              <p className="text-xs text-slate-400 truncate">{c.email}</p>
+                            </div>
+                          </button>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                  <div className="border-t border-slate-100 px-4 py-2.5">
+                    <button
+                      type="button"
+                      onClick={() => { handleSearch({ preventDefault: () => {} } as any); setShowLiveResults(false); }}
+                      className="w-full text-xs font-semibold text-indigo-600 hover:text-indigo-700 text-center transition"
+                    >
+                      Alle Module durchsuchen →
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </header>
+        <div className="flex-1 overflow-y-auto p-4 md:p-8">{children}</div>
+      </main>
+    </div>
+  );
+}

app/components/ToastProvider.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { createContext, useContext, useState, useCallback, useRef, useEffect } from 'react';
+import { CheckCircle2, AlertTriangle, Info, X, AlertCircle } from 'lucide-react';
+
+type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+interface Toast {
+  id: string;
+  message: string;
+  type: ToastType;
+  duration?: number;
+}
+
+interface ConfirmOptions {
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  danger?: boolean;
+}
+
+interface ToastContextType {
+  toast: (message: string, type?: ToastType, duration?: number) => void;
+  confirm: (options: ConfirmOptions) => Promise<boolean>;
+}
+
+const ToastContext = createContext<ToastContextType | null>(null);
+
+export function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error('useToast must be used within ToastProvider');
+  return ctx;
+}
+
+const icons: Record<ToastType, React.ReactNode> = {
+  success: <CheckCircle2 className="w-5 h-5 text-emerald-500" />,
+  error: <AlertCircle className="w-5 h-5 text-red-500" />,
+  warning: <AlertTriangle className="w-5 h-5 text-amber-500" />,
+  info: <Info className="w-5 h-5 text-blue-500" />,
+};
+
+const bgColors: Record<ToastType, string> = {
+  success: 'bg-emerald-50 border-emerald-200',
+  error: 'bg-red-50 border-red-200',
+  warning: 'bg-amber-50 border-amber-200',
+  info: 'bg-blue-50 border-blue-200',
+};
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const [confirmState, setConfirmState] = useState<{
+    options: ConfirmOptions;
+    resolve: (value: boolean) => void;
+  } | null>(null);
+
+  const toast = useCallback((message: string, type: ToastType = 'info', duration = 4000) => {
+    const id = Math.random().toString(36).slice(2) + Date.now().toString(36);
+    setToasts(prev => [...prev, { id, message, type, duration }]);
+    if (duration > 0) {
+      setTimeout(() => {
+        setToasts(prev => prev.filter(t => t.id !== id));
+      }, duration);
+    }
+  }, []);
+
+  const confirm = useCallback((options: ConfirmOptions): Promise<boolean> => {
+    return new Promise((resolve) => {
+      setConfirmState({ options, resolve });
+    });
+  }, []);
+
+  const handleConfirm = (result: boolean) => {
+    confirmState?.resolve(result);
+    setConfirmState(null);
+  };
+
+  const removeToast = (id: string) => {
+    setToasts(prev => prev.filter(t => t.id !== id));
+  };
+
+  return (
+    <ToastContext.Provider value={{ toast, confirm }}>
+      {children}
+
+      {/* Toast Container */}
+      <div className="fixed top-4 right-4 z-[100] space-y-3 pointer-events-none" style={{ maxWidth: '400px' }}>
+        {toasts.map((t) => (
+          <div
+            key={t.id}
+            className={`pointer-events-auto flex items-start gap-3 p-4 rounded-xl border shadow-lg backdrop-blur-sm ${bgColors[t.type]} animate-slide-in`}
+          >
+            <div className="flex-shrink-0 mt-0.5">{icons[t.type]}</div>
+            <p className="text-sm font-medium text-slate-800 flex-1">{t.message}</p>
+            <button onClick={() => removeToast(t.id)} className="flex-shrink-0 text-slate-400 hover:text-slate-600 transition">
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+        ))}
+      </div>
+
+      {/* Confirm Modal */}
+      {confirmState && (
+        <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center z-[110] p-4 animate-fade-in">
+          <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8 animate-scale-in">
+            <div className={`w-12 h-12 rounded-full flex items-center justify-center mb-4 ${confirmState.options.danger ? 'bg-red-100' : 'bg-blue-100'}`}>
+              {confirmState.options.danger
+                ? <AlertTriangle className="w-6 h-6 text-red-600" />
+                : <Info className="w-6 h-6 text-blue-600" />
+              }
+            </div>
+            <h3 className="text-lg font-bold text-slate-900 mb-2">{confirmState.options.title}</h3>
+            <p className="text-sm text-slate-600 mb-8">{confirmState.options.message}</p>
+            <div className="flex justify-end gap-3">
+              <button
+                onClick={() => handleConfirm(false)}
+                className="px-5 py-2.5 rounded-lg text-slate-600 font-medium hover:bg-slate-100 transition"
+              >
+                {confirmState.options.cancelLabel || 'Abbrechen'}
+              </button>
+              <button
+                onClick={() => handleConfirm(true)}
+                className={`px-5 py-2.5 rounded-lg font-medium text-white shadow-sm transition ${confirmState.options.danger ? 'bg-red-600 hover:bg-red-700' : 'bg-indigo-600 hover:bg-indigo-700'}`}
+              >
+                {confirmState.options.confirmLabel || 'Bestätigen'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </ToastContext.Provider>
+  );
+}