create-crm-tmp 2.0.0 → 2.1.0

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

@@ -1,15 +1,36 @@
 'use client';
 
 import { CheckCircle2, Info, TriangleAlert, X, XCircle } from 'lucide-react';
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import Link from 'next/link';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { AnimatePresence, motion } from 'motion/react';
 import { cn } from '@/lib/utils';
 
 type ToastTone = 'success' | 'error' | 'info' | 'warning';
+type ToastExitType = 'slide' | 'fade';
 
 interface ToastItem {
   id: string;
   message: string;
   tone: ToastTone;
+  /** Lien vers la config - affiché dans le toast. Si présent, le toast est persistant (pas de fermeture auto). */
+  actionLink?: string;
+  actionLabel?: string;
+  /** Action secondaire (bouton) — ex. Annuler après une action destructive */
+  actionOnClick?: () => void | Promise<void>;
+  isPersistent?: boolean;
+  onDismiss?: () => void | Promise<void>;
+  /** Phase de sortie : déclenche l'animation avant suppression */
+  isExiting?: boolean;
+  exitType?: ToastExitType;
 }
 
 interface ToastContextValue {
@@ -17,29 +38,46 @@ interface ToastContextValue {
   error: (message: string) => void;
   info: (message: string) => void;
   warning: (message: string) => void;
+  /** Toast persistant avec lien de configuration - ne se ferme que sur clic du lien ou de la croix */
+  errorConfigRequired: (message: string, configLink: string) => void;
+  persistent: (
+    tone: ToastTone,
+    message: string,
+    options?: {
+      actionLink?: string;
+      actionLabel?: string;
+      actionOnClick?: () => void | Promise<void>;
+      onDismiss?: () => void | Promise<void>;
+      /** Fermeture auto même pour un toast « persistant » (ex. fenêtre undo courte) */
+      autoDismissMs?: number;
+    },
+  ) => string;
+  dismissById: (id: 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_STYLES: Record<
+  ToastTone,
+  { icon: React.ComponentType<{ className?: string }>; className: string }
+> = {
+  success: {
+    icon: CheckCircle2,
+    className: 'border-primary/30 bg-primary text-white',
+  },
+  error: {
+    icon: XCircle,
+    className: 'border-destructive/30 bg-destructive text-white',
+  },
+  info: {
+    icon: Info,
+    className: 'border-blue-600/30 bg-blue-600 text-white',
+  },
+  warning: {
+    icon: TriangleAlert,
+    className: 'border-blue-400/40 bg-blue-600 text-white',
+  },
+};
 
 const TOAST_DURATION_MS: Record<ToastTone, number> = {
   success: 4500,
@@ -58,7 +96,7 @@ export function AppToastProvider({ children }: Readonly<{ children: React.ReactN
   const expiresAtRef = useRef<Record<string, number>>({});
   const remainingMsRef = useRef<Record<string, number>>({});
 
-  const dismiss = useCallback((id: string) => {
+  const dismiss = useCallback((id: string, exitType: ToastExitType = 'slide') => {
     const timeout = timersRef.current[id];
     if (timeout) {
       clearTimeout(timeout);
@@ -66,7 +104,28 @@ export function AppToastProvider({ children }: Readonly<{ children: React.ReactN
     }
     delete expiresAtRef.current[id];
     delete remainingMsRef.current[id];
-    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+
+    let onDismissCb: (() => void | Promise<void>) | undefined;
+    setToasts((prev) => {
+      const t = prev.find((x) => x.id === id);
+      if (t?.isExiting) return prev;
+      if (t?.onDismiss) {
+        onDismissCb = t.onDismiss;
+      }
+      return prev.map((x) =>
+        x.id === id ? { ...x, isExiting: true, exitType } : x,
+      );
+    });
+    if (onDismissCb) {
+      const cb = onDismissCb;
+      queueMicrotask(() => {
+        void cb();
+      });
+    }
+  }, []);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
 
   const startTimer = useCallback(
@@ -102,11 +161,51 @@ export function AppToastProvider({ children }: Readonly<{ children: React.ReactN
     [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]);
+  const push = useCallback(
+    (
+      tone: ToastTone,
+      message: string,
+      options?: {
+        actionLink?: string;
+        actionLabel?: string;
+        actionOnClick?: () => void | Promise<void>;
+        persistent?: boolean;
+        onDismiss?: () => void | Promise<void>;
+        autoDismissMs?: number;
+      },
+    ): string => {
+      const id = createToastId();
+      const item: ToastItem = { id, tone, message };
+      if (options?.actionLink) item.actionLink = options.actionLink;
+      if (options?.actionLabel) item.actionLabel = options.actionLabel;
+      if (options?.actionOnClick) item.actionOnClick = options.actionOnClick;
+      const needsPersistent =
+        Boolean(options?.persistent) ||
+        Boolean(options?.actionLink || options?.actionOnClick);
+      if (needsPersistent) item.isPersistent = true;
+      if (options?.onDismiss) item.onDismiss = options.onDismiss;
+      setToasts((prev) => [...prev, item]);
+      const auto = options?.autoDismissMs;
+      if (auto != null && auto > 0) {
+        startTimer(id, auto);
+      } else if (!item.isPersistent) {
+        startTimer(id, TOAST_DURATION_MS[tone]);
+      }
+      return id;
+    },
+    [startTimer],
+  );
+
+  const errorConfigRequired = useCallback(
+    (message: string, configLink: string) => {
+      push('error', message, {
+        actionLink: configLink,
+        actionLabel: 'Configurer dans les paramètres →',
+        persistent: true,
+      });
+    },
+    [push],
+  );
 
   useEffect(() => {
     return () => {
@@ -123,43 +222,132 @@ export function AppToastProvider({ children }: Readonly<{ children: React.ReactN
       error: (message) => push('error', message),
       info: (message) => push('info', message),
       warning: (message) => push('warning', message),
+      errorConfigRequired,
+      persistent: (tone, message, options) =>
+        push(tone, message, {
+          actionLink: options?.actionLink,
+          actionLabel: options?.actionLabel,
+          actionOnClick: options?.actionOnClick,
+          onDismiss: options?.onDismiss,
+          autoDismissMs: options?.autoDismissMs,
+          persistent: true,
+        }),
+      dismissById: (id) => dismiss(id, 'fade'),
     }),
-    [push],
+    [push, errorConfigRequired, dismiss],
   );
 
+  const PEEK = 10;
+  const MAX_STACK = 3;
+  const activeToasts = toasts.filter((t) => !t.isExiting);
+
   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"
+      <div
+        className="fixed right-4 bottom-4 z-60 grid"
+        style={{ gridTemplateAreas: "'stack'" }}
+      >
+        <AnimatePresence>
+          {toasts.map((toast) => {
+            const { className, icon: Icon } = TOAST_STYLES[toast.tone];
+            const isPersistent = Boolean(toast.isPersistent);
+            const isExiting = Boolean(toast.isExiting);
+            const exitType = toast.exitType ?? 'slide';
+
+            const activeIdx = activeToasts.findIndex((t) => t.id === toast.id);
+            const depth = isExiting ? 0 : Math.max(0, activeToasts.length - 1 - activeIdx);
+            const isHidden = depth >= MAX_STACK;
+
+            const exitAnimation =
+              exitType === 'fade'
+                ? { opacity: 0, scale: 0.95 }
+                : { x: 120, opacity: 0 };
+
+            const scale = 1 - depth * 0.04;
+            const y = -(depth * PEEK);
+
+            return (
+              <motion.div
+                key={toast.id}
+                layout
+                initial={{ x: 120, opacity: 0, scale: 0.95 }}
+                animate={
+                  isExiting
+                    ? exitAnimation
+                    : {
+                        x: 0,
+                        y,
+                        scale,
+                        opacity: isHidden ? 0 : 1,
+                      }
+                }
+                exit={{ x: 120, opacity: 0 }}
+                transition={{ type: 'spring', stiffness: 400, damping: 30 }}
+                onAnimationComplete={() => {
+                  if (isExiting) removeToast(toast.id);
+                }}
+                style={{
+                  gridArea: 'stack',
+                  alignSelf: 'end',
+                  zIndex: 100 - depth,
+                  transformOrigin: 'bottom center',
+                  pointerEvents: depth > 0 ? 'none' : 'auto',
+                }}
+                className={cn(
+                  'flex min-w-[280px] max-w-sm flex-col gap-2 rounded-2xl border px-3 py-2.5 text-sm shadow-lg',
+                  className,
+                )}
+                role={toast.tone === 'error' || toast.tone === 'warning' ? 'alert' : 'status'}
+                aria-live={
+                  toast.tone === 'error' || toast.tone === 'warning' ? 'assertive' : 'polite'
+                }
+                onMouseEnter={() => !isPersistent && depth === 0 && pauseTimer(toast.id)}
+                onMouseLeave={() => !isPersistent && depth === 0 && resumeTimer(toast.id)}
+                onFocusCapture={() => !isPersistent && depth === 0 && pauseTimer(toast.id)}
+                onBlurCapture={() => !isPersistent && depth === 0 && resumeTimer(toast.id)}
               >
-                <X className="h-3.5 w-3.5" />
-              </button>
-            </div>
-          );
-        })}
+                <div className="flex items-start gap-2">
+                  <Icon className="mt-0.5 h-4 w-4 shrink-0" />
+                  <div className="min-w-0 flex-1">
+                    <p className="font-medium">{toast.message}</p>
+                    {toast.actionLink ? (
+                      <Link
+                        href={toast.actionLink}
+                        onClick={() => dismiss(toast.id, 'fade')}
+                        className="mt-1.5 inline-flex items-center font-medium text-white underline underline-offset-2 opacity-90 hover:opacity-100"
+                      >
+                        {toast.actionLabel || 'Voir le détail →'}
+                      </Link>
+                    ) : toast.actionOnClick && toast.actionLabel ? (
+                      <button
+                        type="button"
+                        onClick={async () => {
+                          try {
+                            await toast.actionOnClick?.();
+                          } finally {
+                            dismiss(toast.id, 'fade');
+                          }
+                        }}
+                        className="mt-1.5 inline-flex cursor-pointer items-center font-medium text-white underline underline-offset-2 opacity-90 hover:opacity-100"
+                      >
+                        {toast.actionLabel}
+                      </button>
+                    ) : null}
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => dismiss(toast.id, 'fade')}
+                    className="cursor-pointer shrink-0 rounded p-1 opacity-75 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-current/40 focus-visible:outline-none"
+                    aria-label="Fermer la notification"
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </button>
+                </div>
+              </motion.div>
+            );
+          })}
+        </AnimatePresence>
       </div>
     </ToastContext.Provider>
   );

package/template/src/contexts/dashboard-theme-context.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
+import {
+  type DashboardTheme,
+  DASHBOARD_THEMES,
+  DEFAULT_THEME_KEY,
+  getThemeByKey,
+} from '@/lib/dashboard-themes';
+
+interface DashboardThemeContextType {
+  theme: DashboardTheme;
+  setThemeKey: (key: string) => void;
+  themes: DashboardTheme[];
+}
+
+const DashboardThemeContext = createContext<DashboardThemeContextType | undefined>(undefined);
+
+const STORAGE_KEY = 'dashboard_theme';
+
+export function DashboardThemeProvider({ children }: Readonly<{ children: ReactNode }>) {
+  const [themeKey, setThemeKeyState] = useState(DEFAULT_THEME_KEY);
+
+  useEffect(() => {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored && DASHBOARD_THEMES.some((t) => t.key === stored)) {
+      setThemeKeyState(stored);
+    }
+  }, []);
+
+  const setThemeKey = (key: string) => {
+    setThemeKeyState(key);
+    localStorage.setItem(STORAGE_KEY, key);
+  };
+
+  const theme = getThemeByKey(themeKey);
+
+  const value = useMemo(
+    () => ({ theme, setThemeKey, themes: DASHBOARD_THEMES }),
+     
+    [theme],
+  );
+
+  return <DashboardThemeContext.Provider value={value}>{children}</DashboardThemeContext.Provider>;
+}
+
+export function useDashboardTheme() {
+  const context = useContext(DashboardThemeContext);
+  if (!context) {
+    throw new Error('useDashboardTheme doit être utilisé dans un DashboardThemeProvider');
+  }
+  return context;
+}

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

@@ -13,43 +13,48 @@ interface SidebarContextType {
 
 const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
 
+/** Valeurs initiales fixes = même rendu SSR et 1er rendu client (évite mismatch d’hydratation). */
+const SIDEBAR_PINNED_DEFAULT = true;
+const IS_MOBILE_DEFAULT = false;
+
 export function SidebarProvider({ children }: { children: ReactNode }) {
-  const [isPinned, setIsPinnedState] = useState(() =>
-    safeLocalStorageGet<boolean>('sidebar-pinned', true),
-  );
-  const [isMobile, setIsMobile] = useState(() =>
-    typeof globalThis.window === 'undefined' ? false : globalThis.window.innerWidth < 1024,
-  );
+  const [isPinned, setIsPinnedState] = useState(SIDEBAR_PINNED_DEFAULT);
+  const [isMobile, setIsMobile] = useState(IS_MOBILE_DEFAULT);
   const isCollapsed = isMobile ? false : !isPinned;
 
-  // Sauvegarder la préférence dans localStorage et adapter le collapse
-  useEffect(() => {
-    if (typeof globalThis.window === 'undefined') return;
-    safeLocalStorageSet('sidebar-pinned', isPinned);
-  }, [isPinned]);
-
-  // Écouter les changements de taille d'écran
+  // Après hydratation : lire localStorage + viewport (pas dans useState pour coller au HTML serveur)
   useEffect(() => {
-    if (typeof globalThis.window === 'undefined') return;
+    setIsPinnedState(safeLocalStorageGet<boolean>('sidebar-pinned', SIDEBAR_PINNED_DEFAULT));
 
     const handleResize = () => {
       setIsMobile(globalThis.window.innerWidth < 1024);
     };
-
+    handleResize();
     globalThis.window.addEventListener('resize', handleResize);
     return () => globalThis.window.removeEventListener('resize', handleResize);
   }, []);
 
+  const persistPinned = (pinned: boolean) => {
+    safeLocalStorageSet('sidebar-pinned', pinned);
+  };
+
   const setIsPinned = (pinned: boolean) => {
     setIsPinnedState(pinned);
+    persistPinned(pinned);
   };
 
   const setIsCollapsed = (collapsed: boolean) => {
-    setIsPinnedState(!collapsed);
+    const pinned = !collapsed;
+    setIsPinnedState(pinned);
+    persistPinned(pinned);
   };
 
   const togglePin = () => {
-    setIsPinnedState(!isPinned);
+    setIsPinnedState((prev) => {
+      const next = !prev;
+      persistPinned(next);
+      return next;
+    });
   };
 
   return (