create-crm-tmp 1.1.3 → 2.1.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,28 @@ 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 overscroll-contain"
+        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 +108,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">
@@ -109,10 +122,10 @@ export function ViewAsModal({ isOpen, onClose }: ViewAsModalProps) {
                     router.refresh();
                   }}
                   className={cn(
-                    'w-full cursor-pointer rounded-lg border-2 p-4 text-left transition-all',
+                    'w-full cursor-pointer rounded-lg border-2 p-4 text-left transition-colors',
                     !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">
@@ -120,9 +133,7 @@ export function ViewAsModal({ isOpen, onClose }: ViewAsModalProps) {
                       <div
                         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',
+                          !viewAsUser ? 'bg-blue-600 text-white' : 'bg-blue-100 text-blue-800',
                         )}
                       >
                         {getInitials(session.user.name || session.user.email)}
@@ -130,12 +141,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>
               )}
@@ -148,10 +159,10 @@ export function ViewAsModal({ isOpen, onClose }: ViewAsModalProps) {
                     key={user.id}
                     onClick={() => handleSelectUser(user)}
                     className={cn(
-                      'w-full cursor-pointer rounded-lg border-2 p-4 text-left transition-all',
+                      'w-full cursor-pointer rounded-lg border-2 p-4 text-left transition-colors',
                       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 +171,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 +184,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,362 @@
+'use client';
+
+import { CheckCircle2, Info, TriangleAlert, X, XCircle } from 'lucide-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 {
+  success: (message: string) => void;
+  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-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,
+  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, exitType: ToastExitType = 'slide') => {
+    const timeout = timersRef.current[id];
+    if (timeout) {
+      clearTimeout(timeout);
+      delete timersRef.current[id];
+    }
+    delete expiresAtRef.current[id];
+    delete remainingMsRef.current[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(
+    (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,
+      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 () => {
+      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),
+      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, errorConfigRequired, dismiss],
+  );
+
+  const PEEK = 10;
+  const MAX_STACK = 3;
+  const activeToasts = toasts.filter((t) => !t.isExiting);
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <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)}
+              >
+                <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>
+  );
+}
+
+export function useAppToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useAppToast must be used within AppToastProvider');
+  }
+  return context;
+}

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

@@ -21,7 +21,6 @@ const STORAGE_KEY = 'dashboard_theme';
 export function DashboardThemeProvider({ children }: Readonly<{ children: ReactNode }>) {
   const [themeKey, setThemeKeyState] = useState(DEFAULT_THEME_KEY);
 
-  // Charger le thème depuis le localStorage
   useEffect(() => {
     const stored = localStorage.getItem(STORAGE_KEY);
     if (stored && DASHBOARD_THEMES.some((t) => t.key === stored)) {
@@ -38,15 +37,11 @@ export function DashboardThemeProvider({ children }: Readonly<{ children: ReactN
 
   const value = useMemo(
     () => ({ theme, setThemeKey, themes: DASHBOARD_THEMES }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+     
     [theme],
   );
 
-  return (
-    <DashboardThemeContext.Provider value={value}>
-      {children}
-    </DashboardThemeContext.Provider>
-  );
+  return <DashboardThemeContext.Provider value={value}>{children}</DashboardThemeContext.Provider>;
 }
 
 export function useDashboardTheme() {