create-crm-tmp 1.1.2 → 2.0.0

package/template/src/components/view-as-modal.tsx

@@ -1,11 +1,13 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useSession } from '@/lib/auth-client';
 import { useViewAs } from '@/contexts/view-as-context';
 import { X, Check, User as UserIcon } from 'lucide-react';
+import { Spinner } from '@/components/skeleton';
 import { useRouter } from 'next/navigation';
 import { cn } from '@/lib/utils';
+import { useFocusTrap } from '@/hooks/use-focus-trap';
 
 interface User {
   id: string;
@@ -67,17 +69,20 @@ export function ViewAsModal({ isOpen, onClose }: ViewAsModalProps) {
       .slice(0, 2);
   };
 
+  const contentRef = useRef<HTMLDivElement>(null);
+  useFocusTrap(isOpen, contentRef, { onClose });
+
   if (!isOpen) return null;
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center rounded-lg bg-gray-500/20 p-4 shadow-xl backdrop-blur-sm">
-      <div className="w-full max-w-2xl rounded-lg bg-white shadow-xl">
+      <div ref={contentRef} className="w-full max-w-2xl rounded-lg bg-white shadow-xl" role="dialog" aria-modal="true" aria-labelledby="view-as-title">
         {/* En-tête */}
-        <div className="flex items-center justify-between rounded-t-lg border-b border-gray-200 bg-indigo-600 px-6 py-4">
+        <div className="flex items-center justify-between rounded-t-lg border-b border-gray-200 bg-blue-600 px-6 py-4">
           <div className="flex items-center gap-3 text-white">
             <UserIcon className="h-6 w-6" />
             <div>
-              <h2 className="text-xl font-bold">Changer de vue</h2>
+              <h2 id="view-as-title" className="text-xl font-bold">Changer de vue</h2>
               <p className="text-sm text-white/90">
                 Voir l'application avec les permissions d'un profil
               </p>
@@ -95,8 +100,8 @@ export function ViewAsModal({ isOpen, onClose }: ViewAsModalProps) {
         {/* Contenu */}
         <div className="max-h-[60vh] overflow-y-auto p-6">
           {loading ? (
-            <div className="py-12 text-center">
-              <div className="mx-auto h-8 w-8 animate-spin rounded-full border-4 border-indigo-600 border-t-transparent"></div>
+            <div className="flex justify-center py-12">
+              <Spinner size="lg" />
             </div>
           ) : (
             <div className="space-y-2">
@@ -111,8 +116,8 @@ export function ViewAsModal({ isOpen, onClose }: ViewAsModalProps) {
                   className={cn(
                     'w-full cursor-pointer rounded-lg border-2 p-4 text-left transition-all',
                     !viewAsUser
-                      ? 'border-indigo-500 bg-indigo-50'
-                      : 'border-gray-200 bg-white hover:border-indigo-300 hover:bg-indigo-50/50',
+                      ? 'border-blue-500 bg-blue-50'
+                      : 'border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-50/50',
                   )}
                 >
                   <div className="flex items-center justify-between">
@@ -121,8 +126,8 @@ export function ViewAsModal({ isOpen, onClose }: ViewAsModalProps) {
                         className={cn(
                           'flex h-12 w-12 items-center justify-center rounded-full text-lg font-bold',
                           !viewAsUser
-                            ? 'bg-indigo-600 text-white'
-                            : 'bg-indigo-100 text-indigo-600',
+                            ? 'bg-blue-600 text-white'
+                            : 'bg-blue-100 text-blue-800',
                         )}
                       >
                         {getInitials(session.user.name || session.user.email)}
@@ -130,12 +135,12 @@ export function ViewAsModal({ isOpen, onClose }: ViewAsModalProps) {
                       <div>
                         <div className="flex items-center gap-2">
                           <span className="font-semibold text-gray-900">Ma vue</span>
-                          {!viewAsUser && <span className="text-sm text-indigo-600">← Retour</span>}
+                          {!viewAsUser && <span className="text-sm text-blue-600">← Retour</span>}
                         </div>
                         <span className="text-sm text-gray-600">{session.user.name}</span>
                       </div>
                     </div>
-                    {!viewAsUser && <Check className="h-6 w-6 text-indigo-600" />}
+                    {!viewAsUser && <Check className="h-6 w-6 text-blue-600" />}
                   </div>
                 </button>
               )}
@@ -150,8 +155,8 @@ export function ViewAsModal({ isOpen, onClose }: ViewAsModalProps) {
                     className={cn(
                       'w-full cursor-pointer rounded-lg border-2 p-4 text-left transition-all',
                       viewAsUser?.id === user.id
-                        ? 'border-indigo-500 bg-indigo-50'
-                        : 'border-gray-200 bg-white hover:border-indigo-300 hover:bg-indigo-50/50',
+                        ? 'border-blue-500 bg-blue-50'
+                        : 'border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-50/50',
                     )}
                   >
                     <div className="flex items-center justify-between">
@@ -160,7 +165,7 @@ export function ViewAsModal({ isOpen, onClose }: ViewAsModalProps) {
                           className={cn(
                             'flex h-12 w-12 items-center justify-center rounded-full text-sm font-bold',
                             viewAsUser?.id === user.id
-                              ? 'bg-indigo-600 text-white'
+                              ? 'bg-blue-600 text-white'
                               : 'bg-gray-200 text-gray-600',
                           )}
                         >
@@ -173,7 +178,7 @@ export function ViewAsModal({ isOpen, onClose }: ViewAsModalProps) {
                           </div>
                         </div>
                       </div>
-                      {viewAsUser?.id === user.id && <Check className="h-6 w-6 text-indigo-600" />}
+                      {viewAsUser?.id === user.id && <Check className="h-6 w-6 text-blue-600" />}
                     </div>
                   </button>
                 ))}

package/template/src/config/nav-pages.ts

@@ -0,0 +1,108 @@
+import {
+  LayoutDashboard,
+  Users,
+  Building2,
+  CalendarRange,
+  Columns3,
+  Zap,
+  FileText,
+  UserCog,
+  Shield,
+  KeyRound,
+  Settings,
+  Plug,
+  SlidersHorizontal,
+  AppWindow,
+  MonitorCog,
+  type LucideIcon,
+} from 'lucide-react';
+
+export interface NavPage {
+  name: string;
+  href: string;
+  icon: LucideIcon;
+  permissions: string[];
+  parentLabel?: string;
+}
+
+export const NAV_PAGES: NavPage[] = [
+  { name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard, permissions: ['dashboard.view'] },
+  {
+    name: 'Contacts',
+    href: '/contacts',
+    icon: Users,
+    permissions: ['contacts.view_all', 'contacts.view_own'],
+  },
+  {
+    name: 'Agenda',
+    href: '/agenda',
+    icon: CalendarRange,
+    permissions: ['tasks.view_all', 'tasks.view_own'],
+  },
+  {
+    name: 'Closing',
+    href: '/closing',
+    icon: Columns3,
+    permissions: ['contacts.view_all', 'contacts.view_own'],
+  },
+  { name: 'Automatisations', href: '/automatisation', icon: Zap, permissions: ['workflows.view'] },
+  { name: 'Templates', href: '/templates', icon: FileText, permissions: ['templates.view'] },
+  { name: "Droits d'accès", href: '/users', icon: UserCog, permissions: ['users.view'] },
+  {
+    name: 'Utilisateurs',
+    href: '/users/list',
+    icon: Users,
+    permissions: ['users.view'],
+    parentLabel: "Droits d'accès",
+  },
+  {
+    name: 'Profils',
+    href: '/users/roles',
+    icon: Shield,
+    permissions: ['users.manage_roles'],
+    parentLabel: "Droits d'accès",
+  },
+  {
+    name: 'Permissions',
+    href: '/users/permissions',
+    icon: KeyRound,
+    permissions: ['users.manage_roles'],
+    parentLabel: "Droits d'accès",
+  },
+  { name: 'Paramètres', href: '/settings', icon: Settings, permissions: ['settings.view'] },
+  {
+    name: 'Paramètres Généraux',
+    href: '/settings?section=general',
+    icon: SlidersHorizontal,
+    permissions: ['settings.view'],
+    parentLabel: 'Paramètres',
+  },
+  {
+    name: "Paramètres de l'Application",
+    href: '/settings?section=app',
+    icon: AppWindow,
+    permissions: ['users.manage_roles'],
+    parentLabel: 'Paramètres',
+  },
+  {
+    name: 'Paramètres Système',
+    href: '/settings?section=system',
+    icon: MonitorCog,
+    permissions: ['settings.view'],
+    parentLabel: 'Paramètres',
+  },
+  {
+    name: 'Intégrations',
+    href: '/settings?section=integrations',
+    icon: Plug,
+    permissions: ['settings.view'],
+    parentLabel: 'Paramètres',
+  },
+  {
+    name: 'Entreprises',
+    href: '/contacts?entity=companies',
+    icon: Building2,
+    permissions: ['contacts.view_all', 'contacts.view_own'],
+    parentLabel: 'Contacts',
+  },
+];

package/template/src/contexts/app-toast-context.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import { CheckCircle2, Info, TriangleAlert, X, XCircle } from 'lucide-react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { cn } from '@/lib/utils';
+
+type ToastTone = 'success' | 'error' | 'info' | 'warning';
+
+interface ToastItem {
+  id: string;
+  message: string;
+  tone: ToastTone;
+}
+
+interface ToastContextValue {
+  success: (message: string) => void;
+  error: (message: string) => void;
+  info: (message: string) => void;
+  warning: (message: string) => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+const TOAST_STYLES: Record<ToastTone, { icon: React.ComponentType<{ className?: string }>; className: string }> =
+  {
+    success: {
+      icon: CheckCircle2,
+      className: 'border-primary/30 bg-primary text-primary-foreground',
+    },
+    error: {
+      icon: XCircle,
+      className: 'border-destructive/30 bg-destructive text-white',
+    },
+    info: {
+      icon: Info,
+      className: 'border-border bg-card text-foreground',
+    },
+    warning: {
+      icon: TriangleAlert,
+      className: 'border-blue-400/40 bg-blue-500 text-blue-950',
+    },
+  };
+
+const TOAST_DURATION_MS: Record<ToastTone, number> = {
+  success: 4500,
+  info: 5500,
+  warning: 6500,
+  error: 7000,
+};
+
+function createToastId() {
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+export function AppToastProvider({ children }: Readonly<{ children: React.ReactNode }>) {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+  const timersRef = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
+  const expiresAtRef = useRef<Record<string, number>>({});
+  const remainingMsRef = useRef<Record<string, number>>({});
+
+  const dismiss = useCallback((id: string) => {
+    const timeout = timersRef.current[id];
+    if (timeout) {
+      clearTimeout(timeout);
+      delete timersRef.current[id];
+    }
+    delete expiresAtRef.current[id];
+    delete remainingMsRef.current[id];
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+
+  const startTimer = useCallback(
+    (id: string, durationMs: number) => {
+      const existing = timersRef.current[id];
+      if (existing) clearTimeout(existing);
+      expiresAtRef.current[id] = Date.now() + durationMs;
+      remainingMsRef.current[id] = durationMs;
+      timersRef.current[id] = setTimeout(() => dismiss(id), durationMs);
+    },
+    [dismiss],
+  );
+
+  const pauseTimer = useCallback((id: string) => {
+    const timeout = timersRef.current[id];
+    if (!timeout) return;
+    clearTimeout(timeout);
+    delete timersRef.current[id];
+    const remaining = Math.max(0, (expiresAtRef.current[id] ?? Date.now()) - Date.now());
+    remainingMsRef.current[id] = remaining;
+  }, []);
+
+  const resumeTimer = useCallback(
+    (id: string) => {
+      const remaining = remainingMsRef.current[id];
+      if (remaining == null) return;
+      if (remaining <= 0) {
+        dismiss(id);
+        return;
+      }
+      startTimer(id, remaining);
+    },
+    [dismiss, startTimer],
+  );
+
+  const push = useCallback((tone: ToastTone, message: string) => {
+    const id = createToastId();
+    setToasts((prev) => [...prev, { id, tone, message }]);
+    startTimer(id, TOAST_DURATION_MS[tone]);
+  }, [startTimer]);
+
+  useEffect(() => {
+    return () => {
+      Object.values(timersRef.current).forEach((timeout) => clearTimeout(timeout));
+      timersRef.current = {};
+      expiresAtRef.current = {};
+      remainingMsRef.current = {};
+    };
+  }, []);
+
+  const value = useMemo<ToastContextValue>(
+    () => ({
+      success: (message) => push('success', message),
+      error: (message) => push('error', message),
+      info: (message) => push('info', message),
+      warning: (message) => push('warning', message),
+    }),
+    [push],
+  );
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <div className="pointer-events-none fixed right-4 bottom-4 z-60 space-y-2">
+        {toasts.map((toast) => {
+          const { className, icon: Icon } = TOAST_STYLES[toast.tone];
+          return (
+            <div
+              key={toast.id}
+              className={cn(
+                'pointer-events-auto flex min-w-[280px] max-w-sm items-start gap-2 rounded-lg border px-3 py-2 text-sm shadow-(--shadow-dropdown) transition-all duration-200',
+                className,
+              )}
+              role={toast.tone === 'error' || toast.tone === 'warning' ? 'alert' : 'status'}
+              aria-live={toast.tone === 'error' || toast.tone === 'warning' ? 'assertive' : 'polite'}
+              onMouseEnter={() => pauseTimer(toast.id)}
+              onMouseLeave={() => resumeTimer(toast.id)}
+              onFocusCapture={() => pauseTimer(toast.id)}
+              onBlurCapture={() => resumeTimer(toast.id)}
+            >
+              <Icon className="mt-0.5 h-4 w-4 shrink-0" />
+              <p className="flex-1">{toast.message}</p>
+              <button
+                type="button"
+                onClick={() => dismiss(toast.id)}
+                className="cursor-pointer rounded p-1 opacity-75 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/40"
+                aria-label="Fermer la notification"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+export function useAppToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useAppToast must be used within AppToastProvider');
+  }
+  return context;
+}

package/template/src/contexts/sidebar-context.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { safeLocalStorageGet, safeLocalStorageSet } from '@/lib/local-storage';
 
 interface SidebarContextType {
   isCollapsed: boolean;
@@ -13,70 +14,38 @@ interface SidebarContextType {
 const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
 
 export function SidebarProvider({ children }: { children: ReactNode }) {
-  // Éviter tout accès à window/localStorage pendant le rendu SSR
-  // Valeurs par défaut stables côté serveur et lors de la toute première
-  // hydratation côté client. Les vraies valeurs sont appliquées ensuite via useEffect.
-  const [isPinned, setIsPinnedState] = useState(false);
-  // Par défaut on considère la sidebar comme réduite (desktop),
-  // puis on ajuste après le montage en fonction de la taille d'écran et de la préférence.
-  const [isCollapsed, setIsCollapsedState] = useState(true);
-
-  // Lecture initiale de la préférence et de la taille d'écran après montage
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const saved = window.localStorage.getItem('sidebar-pinned');
-    const initialPinned = saved === 'true';
-    setIsPinnedState(initialPinned);
-
-    if (window.innerWidth < 1024) {
-      // En mobile, jamais de collapse
-      setIsCollapsedState(false);
-    } else {
-      // En desktop, utiliser la préférence
-      setIsCollapsedState(!initialPinned);
-    }
-  }, []);
+  const [isPinned, setIsPinnedState] = useState(() =>
+    safeLocalStorageGet<boolean>('sidebar-pinned', true),
+  );
+  const [isMobile, setIsMobile] = useState(() =>
+    typeof globalThis.window === 'undefined' ? false : globalThis.window.innerWidth < 1024,
+  );
+  const isCollapsed = isMobile ? false : !isPinned;
 
   // Sauvegarder la préférence dans localStorage et adapter le collapse
   useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    window.localStorage.setItem('sidebar-pinned', String(isPinned));
-
-    // Ne réduire la sidebar qu'en desktop (>= 1024px)
-    if (window.innerWidth >= 1024) {
-      setIsCollapsedState(!isPinned);
-    } else {
-      // En mobile, toujours false (pas de collapse)
-      setIsCollapsedState(false);
-    }
+    if (typeof globalThis.window === 'undefined') return;
+    safeLocalStorageSet('sidebar-pinned', isPinned);
   }, [isPinned]);
 
   // Écouter les changements de taille d'écran
   useEffect(() => {
-    if (typeof window === 'undefined') return;
+    if (typeof globalThis.window === 'undefined') return;
 
     const handleResize = () => {
-      // En mobile, toujours false (pas de collapse)
-      if (window.innerWidth < 1024) {
-        setIsCollapsedState(false);
-      } else {
-        // En desktop, utiliser la préférence isPinned
-        setIsCollapsedState(!isPinned);
-      }
+      setIsMobile(globalThis.window.innerWidth < 1024);
     };
 
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, [isPinned]);
+    globalThis.window.addEventListener('resize', handleResize);
+    return () => globalThis.window.removeEventListener('resize', handleResize);
+  }, []);
 
   const setIsPinned = (pinned: boolean) => {
     setIsPinnedState(pinned);
   };
 
   const setIsCollapsed = (collapsed: boolean) => {
-    setIsCollapsedState(collapsed);
+    setIsPinnedState(!collapsed);
   };
 
   const togglePin = () => {

package/template/src/contexts/task-reminder-context.tsx

@@ -197,18 +197,18 @@ export function TaskReminderProvider({ children }: { children: React.ReactNode }
           {notifications.map((notif) => (
             <div
               key={notif.id}
-              className="pointer-events-auto flex max-w-sm items-start gap-3 rounded-xl border border-indigo-100 bg-white p-4 shadow-xl"
+              className="pointer-events-auto flex max-w-sm items-start gap-3 rounded-xl border border-blue-200 bg-card p-4 shadow-(--shadow-dropdown)"
             >
-              <div className="mt-0.5 rounded-full bg-indigo-50 p-2 text-indigo-600">
+              <div className="mt-0.5 rounded-full bg-blue-100 p-2 text-blue-700">
                 <Bell className="h-4 w-4" />
               </div>
               <div className="flex-1">
-                <p className="text-sm font-medium text-gray-900">Rappel de tâche</p>
-                <p className="mt-1 text-sm text-gray-700">{notif.message}</p>
+                <p className="text-sm font-medium text-foreground">Rappel de tâche</p>
+                <p className="mt-1 text-sm text-muted-foreground">{notif.message}</p>
                 {notif.link && (
                   <Link
                     href={notif.link}
-                    className="mt-2 inline-flex text-xs font-medium text-indigo-600 hover:text-indigo-700"
+                    className="mt-2 inline-flex text-xs font-medium text-blue-700 hover:text-blue-800"
                   >
                     Ouvrir le contact
                   </Link>
@@ -217,7 +217,7 @@ export function TaskReminderProvider({ children }: { children: React.ReactNode }
               <button
                 type="button"
                 onClick={() => dismissNotification(notif.id)}
-                className="ml-2 inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+                className="ml-2 inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground"
               >
                 <span className="sr-only">Fermer</span>
                 <X />

package/template/src/contexts/view-as-context.tsx

@@ -1,6 +1,11 @@
 'use client';
 
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import React, { createContext, useContext, useState } from 'react';
+import {
+  safeLocalStorageGet,
+  safeLocalStorageSet,
+  safeLocalStorageRemove,
+} from '@/lib/local-storage';
 
 interface User {
   id: string;
@@ -24,19 +29,9 @@ interface ViewAsContextType {
 const ViewAsContext = createContext<ViewAsContextType | undefined>(undefined);
 
 export function ViewAsProvider({ children }: { children: React.ReactNode }) {
-  const [viewAsUser, setViewAsUserState] = useState<User | null>(null);
-
-  // Charger depuis le localStorage au démarrage
-  useEffect(() => {
-    const stored = localStorage.getItem('viewAsUser');
-    if (stored) {
-      try {
-        setViewAsUserState(JSON.parse(stored));
-      } catch (e) {
-        localStorage.removeItem('viewAsUser');
-      }
-    }
-  }, []);
+  const [viewAsUser, setViewAsUserState] = useState<User | null>(() =>
+    safeLocalStorageGet<User | null>('viewAsUser', null),
+  );
 
   const setViewAsUser = (user: User | null) => {
     // Si l'utilisateur a un customRole, copier les permissions dans un champ direct pour faciliter l'accès
@@ -49,9 +44,9 @@ export function ViewAsProvider({ children }: { children: React.ReactNode }) {
 
     setViewAsUserState(userWithPermissions);
     if (userWithPermissions) {
-      localStorage.setItem('viewAsUser', JSON.stringify(userWithPermissions));
+      safeLocalStorageSet('viewAsUser', userWithPermissions);
     } else {
-      localStorage.removeItem('viewAsUser');
+      safeLocalStorageRemove('viewAsUser');
     }
   };
 

package/template/src/hooks/use-alert.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+
+interface AlertOptions {
+  title: string;
+  description: string;
+  confirmText?: string;
+}
+
+export function useAlert() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [options, setOptions] = useState<AlertOptions>({
+    title: '',
+    description: '',
+    confirmText: 'OK',
+  });
+  const [resolvePromise, setResolvePromise] = useState<(() => void) | null>(null);
+
+  const alert = (opts: AlertOptions | string): Promise<void> => {
+    const normalizedOpts = typeof opts === 'string' ? { title: 'Alerte', description: opts } : opts;
+
+    setOptions({
+      confirmText: 'OK',
+      ...normalizedOpts,
+    });
+    setIsOpen(true);
+
+    return new Promise<void>((resolve) => {
+      setResolvePromise(() => resolve);
+    });
+  };
+
+  const handleConfirm = () => {
+    if (resolvePromise) {
+      resolvePromise();
+    }
+    setIsOpen(false);
+  };
+
+  const AlertDialogComponent = () => (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{options.title}</AlertDialogTitle>
+          <AlertDialogDescription>{options.description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogAction onClick={handleConfirm}>{options.confirmText}</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+
+  return { alert, AlertDialog: AlertDialogComponent };
+}