create-crm-tmp 1.0.0

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

@@ -0,0 +1,186 @@
+'use client';
+
+import { useState, useEffect } 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 { useRouter } from 'next/navigation';
+import { cn } from '@/lib/utils';
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  customRole: {
+    id: string;
+    name: string;
+    permissions: string[];
+  } | null;
+}
+
+interface ViewAsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function ViewAsModal({ isOpen, onClose }: ViewAsModalProps) {
+  const { data: session } = useSession();
+  const { viewAsUser, setViewAsUser, clearViewAsUser } = useViewAs();
+  const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const router = useRouter();
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchUsers();
+    }
+  }, [isOpen]);
+
+  const fetchUsers = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/users/list');
+      if (response.ok) {
+        const data = await response.json();
+        setUsers(data);
+      }
+    } catch (error) {
+      console.error('Erreur lors du chargement des utilisateurs:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSelectUser = (user: User) => {
+    setViewAsUser(user);
+    onClose();
+    // Rafraîchir la page pour appliquer les changements
+    router.refresh();
+  };
+
+  const getInitials = (name: string) => {
+    return name
+      .split(' ')
+      .map((n) => n[0])
+      .join('')
+      .toUpperCase()
+      .slice(0, 2);
+  };
+
+  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">
+        {/* 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 gap-3 text-white">
+            <UserIcon className="h-6 w-6" />
+            <div>
+              <h2 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>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="cursor-pointer rounded-lg p-2 text-white transition-colors hover:bg-white/20"
+            aria-label="Fermer"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* 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>
+          ) : (
+            <div className="space-y-2">
+              {/* Ma vue */}
+              {session?.user && (
+                <button
+                  onClick={() => {
+                    clearViewAsUser();
+                    onClose();
+                    router.refresh();
+                  }}
+                  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',
+                  )}
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-4">
+                      <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',
+                        )}
+                      >
+                        {getInitials(session.user.name || session.user.email)}
+                      </div>
+                      <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>}
+                        </div>
+                        <span className="text-sm text-gray-600">{session.user.name}</span>
+                      </div>
+                    </div>
+                    {!viewAsUser && <Check className="h-6 w-6 text-indigo-600" />}
+                  </div>
+                </button>
+              )}
+
+              {/* Autres utilisateurs */}
+              {users
+                .filter((user) => user.id !== session?.user?.id)
+                .map((user) => (
+                  <button
+                    key={user.id}
+                    onClick={() => handleSelectUser(user)}
+                    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',
+                    )}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-4">
+                        <div
+                          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-gray-200 text-gray-600',
+                          )}
+                        >
+                          {getInitials(user.name || user.email)}
+                        </div>
+                        <div>
+                          <div className="font-semibold text-gray-900">{user.name}</div>
+                          <div className="text-sm text-gray-600">
+                            {user.customRole?.name || 'Sans profil'} · {user.email.split('@')[0]}
+                          </div>
+                        </div>
+                      </div>
+                      {viewAsUser?.id === user.id && <Check className="h-6 w-6 text-indigo-600" />}
+                    </div>
+                  </button>
+                ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/src/contexts/mobile-menu-context.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { createContext, useContext, useState, ReactNode } from 'react';
+
+interface MobileMenuContextType {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  toggle: () => void;
+}
+
+const MobileMenuContext = createContext<MobileMenuContextType | undefined>(undefined);
+
+export function MobileMenuProvider({ children }: { children: ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggle = () => setIsOpen(!isOpen);
+
+  return (
+    <MobileMenuContext.Provider value={{ isOpen, setIsOpen, toggle }}>
+      {children}
+    </MobileMenuContext.Provider>
+  );
+}
+
+export function useMobileMenuContext() {
+  const context = useContext(MobileMenuContext);
+  if (context === undefined) {
+    throw new Error('useMobileMenuContext must be used within a MobileMenuProvider');
+  }
+  return context;
+}

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

@@ -0,0 +1,107 @@
+'use client';
+
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+
+interface SidebarContextType {
+  isCollapsed: boolean;
+  isPinned: boolean;
+  setIsCollapsed: (collapsed: boolean) => void;
+  setIsPinned: (pinned: boolean) => void;
+  togglePin: () => void;
+}
+
+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);
+    }
+  }, []);
+
+  // 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);
+    }
+  }, [isPinned]);
+
+  // Écouter les changements de taille d'écran
+  useEffect(() => {
+    if (typeof 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);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [isPinned]);
+
+  const setIsPinned = (pinned: boolean) => {
+    setIsPinnedState(pinned);
+  };
+
+  const setIsCollapsed = (collapsed: boolean) => {
+    setIsCollapsedState(collapsed);
+  };
+
+  const togglePin = () => {
+    setIsPinnedState(!isPinned);
+  };
+
+  return (
+    <SidebarContext.Provider
+      value={{
+        isCollapsed,
+        isPinned,
+        setIsCollapsed,
+        setIsPinned,
+        togglePin,
+      }}
+    >
+      {children}
+    </SidebarContext.Provider>
+  );
+}
+
+export function useSidebarContext() {
+  const context = useContext(SidebarContext);
+  if (context === undefined) {
+    throw new Error('useSidebarContext must be used within a SidebarProvider');
+  }
+  return context;
+}

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

@@ -0,0 +1,239 @@
+'use client';
+
+import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { useSession } from '@/lib/auth-client';
+import { useUserRole } from '@/hooks/use-user-role';
+import Link from 'next/link';
+import { Bell, X } from 'lucide-react';
+
+type Task = {
+  id: string;
+  type: 'CALL' | 'MEETING' | 'EMAIL' | 'OTHER';
+  title: string | null;
+  description: string;
+  priority: 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT';
+  scheduledAt: string;
+  completed: boolean;
+  reminderMinutesBefore?: number | null;
+  contact: {
+    id: string;
+    firstName: string | null;
+    lastName: string | null;
+  } | null;
+};
+
+type Notification = { id: string; message: string; link?: string };
+
+type TaskReminderContextValue = {
+  notifications: Notification[];
+  dismissNotification: (id: string) => void;
+};
+
+const TaskReminderContext = createContext<TaskReminderContextValue | undefined>(undefined);
+
+const TASK_TYPE_LABELS: Record<Task['type'], string> = {
+  CALL: 'Appel téléphonique',
+  MEETING: 'RDV',
+  EMAIL: 'Email',
+  OTHER: 'Autre',
+};
+
+function formatTime(dateString: string) {
+  return new Date(dateString).toLocaleTimeString('fr-FR', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+export function TaskReminderProvider({ children }: { children: React.ReactNode }) {
+  const { data: session } = useSession();
+  const { isAdmin } = useUserRole();
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const notifiedKeysRef = useRef<Set<string>>(new Set());
+
+  // Charger les tâches pertinentes pour les rappels
+  useEffect(() => {
+    if (!session) return;
+
+    const fetchTasks = async () => {
+      try {
+        const now = new Date();
+        const start = new Date(now);
+        start.setDate(start.getDate() - 1); // hier
+        const end = new Date(now);
+        end.setDate(end.getDate() + 1); // demain
+
+        const params = new URLSearchParams({
+          startDate: start.toISOString(),
+          endDate: end.toISOString(),
+        });
+
+        const response = await fetch(`/api/tasks?${params.toString()}`);
+        if (response.ok) {
+          const data = await response.json();
+          setTasks(data);
+        }
+      } catch (error) {
+        console.error('Erreur lors du chargement des tâches pour les rappels:', error);
+      }
+    };
+
+    fetchTasks();
+    const interval = setInterval(fetchTasks, 5 * 60 * 1000); // rafraîchir toutes les 5 min
+    return () => clearInterval(interval);
+  }, [session, isAdmin]);
+
+  // Supprimer les notifications des tâches qui n'existent plus
+  useEffect(() => {
+    if (!session) return;
+
+    const taskIds = new Set(tasks.map((task) => task.id));
+    setNotifications((prev) =>
+      prev.filter((notif) => {
+        // Extraire l'ID de la tâche depuis l'ID de la notification
+        // Format: `${task.id}-due` ou `${task.id}-reminder`
+        let taskId: string;
+        if (notif.id.endsWith('-due')) {
+          taskId = notif.id.slice(0, -4); // Retirer '-due'
+        } else if (notif.id.endsWith('-reminder')) {
+          taskId = notif.id.slice(0, -9); // Retirer '-reminder'
+        } else {
+          // Format inattendu, on garde la notification pour éviter de la supprimer par erreur
+          return true;
+        }
+        return taskIds.has(taskId);
+      }),
+    );
+
+    // Nettoyer aussi les clés de notification des tâches supprimées
+    const validKeys = new Set<string>();
+    tasks.forEach((task) => {
+      validKeys.add(`${task.id}-due`);
+      validKeys.add(`${task.id}-reminder`);
+    });
+    notifiedKeysRef.current = new Set(
+      Array.from(notifiedKeysRef.current).filter((key) => validKeys.has(key)),
+    );
+  }, [tasks, session]);
+
+  // Génération des notifications
+  useEffect(() => {
+    if (!session) return;
+
+    const interval = setInterval(() => {
+      const now = new Date();
+      const newNotifications: Notification[] = [];
+      const notified = new Set(notifiedKeysRef.current);
+
+      tasks.forEach((task) => {
+        if (task.completed) return;
+        const scheduled = new Date(task.scheduledAt);
+
+        // Notification à l'heure exacte de la tâche (fenêtre de 5 minutes)
+        const dueKey = `${task.id}-due`;
+        const diffMs = now.getTime() - scheduled.getTime();
+        if (diffMs >= 0 && diffMs < 5 * 60 * 1000 && !notified.has(dueKey)) {
+          notified.add(dueKey);
+          newNotifications.push({
+            id: dueKey,
+            message: `Vous avez une tâche maintenant : ${
+              task.title || TASK_TYPE_LABELS[task.type]
+            } (${formatTime(task.scheduledAt)})`,
+            link: task.contact ? `/contacts/${task.contact.id}` : undefined,
+          });
+        }
+
+        // Notification de rappel avant l'heure
+        if (task.reminderMinutesBefore != null && task.reminderMinutesBefore > 0) {
+          const reminderMs = task.reminderMinutesBefore * 60 * 1000;
+          const reminderTime = new Date(scheduled.getTime() - reminderMs);
+          const reminderKey = `${task.id}-reminder`;
+          const diffReminderMs = now.getTime() - reminderTime.getTime();
+
+          if (
+            diffReminderMs >= 0 &&
+            diffReminderMs < 5 * 60 * 1000 &&
+            now < scheduled &&
+            !notified.has(reminderKey)
+          ) {
+            notified.add(reminderKey);
+            newNotifications.push({
+              id: reminderKey,
+              message: `Rappel dans ${task.reminderMinutesBefore} min : ${
+                task.title || TASK_TYPE_LABELS[task.type]
+              } (${formatTime(task.scheduledAt)})`,
+              link: task.contact ? `/contacts/${task.contact.id}` : undefined,
+            });
+          }
+        }
+      });
+
+      if (newNotifications.length > 0) {
+        setNotifications((prev) => [...prev, ...newNotifications]);
+        notifiedKeysRef.current = notified;
+
+        // Faire disparaître automatiquement les nouvelles notifications après 5 secondes
+        newNotifications.forEach((notif) => {
+          setTimeout(() => {
+            setNotifications((prev) => prev.filter((n) => n.id !== notif.id));
+          }, 5000);
+        });
+      }
+    }, 60 * 1000); // vérif toutes les minutes
+
+    return () => clearInterval(interval);
+  }, [tasks, session]);
+
+  const dismissNotification = (id: string) => {
+    setNotifications((prev) => prev.filter((n) => n.id !== id));
+  };
+
+  return (
+    <TaskReminderContext.Provider value={{ notifications, dismissNotification }}>
+      {children}
+      {notifications.length > 0 && (
+        <div className="pointer-events-none fixed right-4 bottom-4 z-50 space-y-3">
+          {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"
+            >
+              <div className="mt-0.5 rounded-full bg-indigo-50 p-2 text-indigo-600">
+                <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>
+                {notif.link && (
+                  <Link
+                    href={notif.link}
+                    className="mt-2 inline-flex text-xs font-medium text-indigo-600 hover:text-indigo-700"
+                  >
+                    Ouvrir le contact
+                  </Link>
+                )}
+              </div>
+              <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"
+              >
+                <span className="sr-only">Fermer</span>
+                <X />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </TaskReminderContext.Provider>
+  );
+}
+
+export function useTaskReminders() {
+  const ctx = useContext(TaskReminderContext);
+  if (!ctx) {
+    throw new Error('useTaskReminders doit être utilisé dans un TaskReminderProvider');
+  }
+  return ctx;
+}

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

@@ -0,0 +1,84 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  customRole: {
+    id: string;
+    name: string;
+    permissions: string[];
+  } | null;
+  permissions?: string[]; // Alias pour faciliter l'accès
+}
+
+interface ViewAsContextType {
+  viewAsUser: User | null;
+  setViewAsUser: (user: User | null) => void;
+  isViewingAsOther: boolean;
+  clearViewAsUser: () => void;
+}
+
+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 setViewAsUser = (user: User | null) => {
+    // Si l'utilisateur a un customRole, copier les permissions dans un champ direct pour faciliter l'accès
+    const userWithPermissions = user
+      ? {
+          ...user,
+          permissions: user.customRole?.permissions || [],
+        }
+      : null;
+
+    setViewAsUserState(userWithPermissions);
+    if (userWithPermissions) {
+      localStorage.setItem('viewAsUser', JSON.stringify(userWithPermissions));
+    } else {
+      localStorage.removeItem('viewAsUser');
+    }
+  };
+
+  const clearViewAsUser = () => {
+    setViewAsUser(null);
+  };
+
+  const isViewingAsOther = viewAsUser !== null;
+
+  return (
+    <ViewAsContext.Provider
+      value={{
+        viewAsUser,
+        setViewAsUser,
+        isViewingAsOther,
+        clearViewAsUser,
+      }}
+    >
+      {children}
+    </ViewAsContext.Provider>
+  );
+}
+
+export function useViewAs() {
+  const context = useContext(ViewAsContext);
+  if (context === undefined) {
+    throw new Error('useViewAs must be used within a ViewAsProvider');
+  }
+  return context;
+}