create-crm-tmp 1.0.0

package/template/src/components/sidebar.tsx

@@ -0,0 +1,294 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useSession, signOut } from '@/lib/auth-client';
+import { useRouter } from 'next/navigation';
+import { useMemo, useState, useEffect } from 'react';
+import { useUserRole } from '@/hooks/use-user-role';
+import { useMobileMenuContext } from '@/contexts/mobile-menu-context';
+import { useSidebarContext } from '@/contexts/sidebar-context';
+import { useViewAs } from '@/contexts/view-as-context';
+import { ViewAsModal } from '@/components/view-as-modal';
+import {
+  LayoutDashboard,
+  Users,
+  UserCog,
+  Settings,
+  Calendar as CalendarIcon,
+  FileText,
+  Eye,
+  Zap,
+  Columns3,
+  X,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export function Sidebar() {
+  const pathname = usePathname();
+  const { data: session } = useSession();
+  const router = useRouter();
+  const { isOpen: isMobileMenuOpen, setIsOpen: setIsMobileMenuOpen } = useMobileMenuContext();
+  const { isCollapsed, isPinned, setIsCollapsed, togglePin } = useSidebarContext();
+  const { viewAsUser, isViewingAsOther } = useViewAs();
+  const [showViewAsModal, setShowViewAsModal] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+
+  // Éviter l'erreur d'hydratation
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  // Obtenir le rôle de l'utilisateur via le hook personnalisé
+  const { isAdmin, isRealAdmin } = useUserRole();
+
+  // Navigation principale (Dashboard section)
+  const dashboardNav = useMemo(() => {
+    const baseNav = [
+      { name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
+      { name: 'Contacts', href: '/contacts', icon: Users },
+      { name: 'Agenda', href: '/agenda', icon: CalendarIcon },
+      { name: 'Closing', href: '/closing', icon: Columns3 },
+      { name: 'Automatisations', href: '/automatisation', icon: Zap },
+      { name: 'Templates', href: '/templates', icon: FileText },
+    ];
+
+    // Ajouter la gestion des droits d'accès seulement pour les admins
+    if (isAdmin) {
+      baseNav.push({
+        name: "Droits d'accès",
+        href: '/users',
+        icon: UserCog,
+      });
+    }
+
+    baseNav.push({
+      name: 'Paramètres',
+      href: '/settings',
+      icon: Settings,
+    });
+
+    return baseNav;
+  }, [isAdmin]);
+
+  const handleSignOut = async () => {
+    await signOut();
+    router.push('/signin');
+  };
+
+  const handleLinkClick = () => {
+    setIsMobileMenuOpen(false);
+  };
+
+  return (
+    <>
+      {/* Overlay for mobile */}
+      {isMobileMenuOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-gray-500/20 backdrop-blur-sm lg:hidden"
+          onClick={() => setIsMobileMenuOpen(false)}
+        />
+      )}
+
+      {/* Sidebar */}
+      <div
+        className={cn(
+          'fixed top-0 left-0 z-40 flex h-screen flex-col border-r border-gray-200 bg-white transition-all duration-300 ease-in-out lg:relative lg:translate-x-0',
+          isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
+          isCollapsed && !isPinned ? 'w-64 lg:w-16' : 'w-64 lg:w-64',
+        )}
+        onMouseEnter={() => {
+          if (typeof window !== 'undefined' && window.innerWidth >= 1024) {
+            if (!isPinned && isCollapsed) {
+              setIsCollapsed(false);
+            }
+          }
+        }}
+        onMouseLeave={() => {
+          if (typeof window !== 'undefined' && window.innerWidth >= 1024) {
+            if (!isPinned && !isCollapsed) {
+              setIsCollapsed(true);
+            }
+          }
+        }}
+      >
+        {/* Bouton fermer - Mobile seulement */}
+        <div className="flex h-16 items-center justify-end border-b border-gray-200 px-4 lg:hidden">
+          <button
+            onClick={() => setIsMobileMenuOpen(false)}
+            className="cursor-pointer rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100"
+            aria-label="Close menu"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Navigation principale */}
+        <nav className="flex-1 space-y-6 overflow-y-auto py-4">
+          {/* Section Dashboard */}
+          <div className={cn('px-3', isCollapsed && !isPinned && 'lg:px-2')}>
+            {(!isCollapsed || isPinned) && (
+              <h2 className="mb-2 px-3 text-xs font-semibold tracking-wider text-gray-500 uppercase">
+                CRM Template
+              </h2>
+            )}
+            <div className="space-y-1">
+              {dashboardNav.map((item) => {
+                const isActive = pathname === item.href;
+                const Icon = item.icon;
+                return (
+                  <Link
+                    key={item.name}
+                    href={item.href}
+                    onClick={handleLinkClick}
+                    className={cn(
+                      'flex items-center gap-3 rounded-lg py-2 text-sm font-medium transition-colors',
+                      isCollapsed && !isPinned ? 'px-3 lg:justify-center lg:px-2' : 'px-3',
+                      isActive
+                        ? 'bg-indigo-50 text-indigo-600'
+                        : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900',
+                    )}
+                    title={isCollapsed && !isPinned ? item.name : undefined}
+                  >
+                    <Icon className="h-5 w-5 shrink-0" />
+                    {(!isCollapsed || isPinned) && (
+                      <span className="whitespace-nowrap">{item.name}</span>
+                    )}
+                  </Link>
+                );
+              })}
+            </div>
+          </div>
+        </nav>
+
+        {/* Vue active - pour les admins seulement */}
+        {isRealAdmin && (
+          <div
+            className={cn(
+              'border-t border-gray-200 transition-all duration-300',
+              isCollapsed && !isPinned ? 'p-3 lg:p-2' : 'p-3',
+            )}
+          >
+            {!isCollapsed || isPinned ? (
+              <button
+                onClick={() => setShowViewAsModal(true)}
+                className={cn(
+                  'w-full cursor-pointer rounded-lg border-2 p-3 text-left transition-all',
+                  isViewingAsOther
+                    ? 'border-indigo-600 bg-indigo-600 text-white hover:border-indigo-700 hover:bg-indigo-700'
+                    : 'border-gray-300 bg-white text-gray-900 hover:border-indigo-300 hover:bg-indigo-50',
+                )}
+                aria-label="Changer de vue"
+              >
+                <div className="flex items-center gap-3">
+                  <div
+                    className={cn(
+                      'flex h-10 w-10 shrink-0 items-center justify-center rounded-full',
+                      isViewingAsOther ? 'bg-white/20 text-white' : 'bg-indigo-100 text-indigo-600',
+                    )}
+                  >
+                    {!isMounted
+                      ? 'U'
+                      : isViewingAsOther
+                        ? viewAsUser?.name?.[0]?.toUpperCase() || 'U'
+                        : session?.user?.name?.[0]?.toUpperCase() || 'U'}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <p
+                      className={cn(
+                        'text-xs font-medium',
+                        isViewingAsOther ? 'text-white/80' : 'text-gray-500',
+                      )}
+                    >
+                      {isViewingAsOther ? 'Vue:' : 'Ma vue'}
+                    </p>
+                    <p className={`truncate text-sm font-semibold`}>
+                      {!isMounted
+                        ? 'Utilisateur'
+                        : isViewingAsOther
+                          ? viewAsUser?.name
+                          : session?.user?.name || 'Utilisateur'}
+                    </p>
+                  </div>
+                  <Eye className="h-5 w-5 shrink-0" />
+                </div>
+              </button>
+            ) : (
+              <button
+                onClick={() => setShowViewAsModal(true)}
+                className={cn(
+                  'w-full cursor-pointer rounded-lg p-2 transition-colors',
+                  isViewingAsOther
+                    ? 'bg-indigo-600 text-white hover:bg-indigo-700'
+                    : 'text-gray-500 hover:bg-gray-100',
+                )}
+                title="Changer de vue"
+                aria-label="Changer de vue"
+              >
+                <div className="flex items-center justify-center">
+                  <Eye className="h-5 w-5" />
+                </div>
+              </button>
+            )}
+          </div>
+        )}
+
+        {/* User Profile */}
+        <div
+          className={cn(
+            'border-t border-gray-200 transition-all duration-300',
+            isCollapsed && !isPinned ? 'p-4 lg:p-2' : 'p-4',
+          )}
+        >
+          {!isCollapsed || isPinned ? (
+            <>
+              <div className="flex items-center gap-3">
+                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-indigo-600">
+                  {!isMounted ? 'U' : session?.user?.name?.[0]?.toUpperCase() || 'U'}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-sm font-medium text-gray-900">
+                    {!isMounted ? 'Utilisateur' : session?.user?.name || 'Utilisateur'}
+                  </p>
+                  <p className="truncate text-xs text-gray-500">
+                    {!isMounted ? '' : session?.user?.email}
+                  </p>
+                </div>
+              </div>
+              <button
+                onClick={handleSignOut}
+                className="mt-3 w-full cursor-pointer rounded-lg bg-gray-100 px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200"
+              >
+                Déconnexion
+              </button>
+            </>
+          ) : (
+            <div className="flex flex-col items-center gap-2">
+              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-indigo-600">
+                {!isMounted ? 'U' : session?.user?.name?.[0]?.toUpperCase() || 'U'}
+              </div>
+              <button
+                onClick={handleSignOut}
+                className="cursor-pointer rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100"
+                title="Déconnexion"
+                aria-label="Déconnexion"
+              >
+                <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+                  />
+                </svg>
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Modal de changement de vue */}
+      <ViewAsModal isOpen={showViewAsModal} onClose={() => setShowViewAsModal(false)} />
+    </>
+  );
+}

package/template/src/components/skeleton.tsx

@@ -0,0 +1,380 @@
+/**
+ * Composants Skeleton pour les états de chargement
+ */
+
+import { cn } from '@/lib/utils';
+
+export function Skeleton({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn('animate-pulse rounded bg-gray-200', className)}
+      aria-label="Chargement..."
+    />
+  );
+}
+
+export function ContactTableSkeleton() {
+  return (
+    <div className="overflow-x-auto rounded-lg bg-white shadow">
+      <table className="min-w-full divide-y divide-gray-200">
+        <thead className="bg-gray-50">
+          <tr>
+            <th className="px-3 py-3 sm:px-6">
+              <Skeleton className="h-4 w-4" />
+            </th>
+            <th className="px-3 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase sm:px-6">
+              Contact
+            </th>
+            <th className="px-3 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase sm:px-6">
+              Téléphone
+            </th>
+            <th className="px-3 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase sm:px-6">
+              Email
+            </th>
+            <th className="px-3 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase sm:px-6">
+              Statut
+            </th>
+            <th className="px-3 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase sm:px-6">
+              Origine
+            </th>
+            <th className="px-3 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase sm:px-6">
+              COMMERCIAL
+            </th>
+            <th className="px-3 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase sm:px-6">
+              TÉLÉPRO
+            </th>
+            <th className="px-3 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase sm:px-6">
+              CRÉÉ LE
+            </th>
+            <th className="px-3 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase sm:px-6">
+              MODIFIÉ LE
+            </th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-200 bg-white">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <tr key={i} className="hover:bg-gray-50">
+              <td className="px-3 py-4 whitespace-nowrap sm:px-6">
+                <Skeleton className="h-4 w-4" />
+              </td>
+              <td className="px-3 py-4 whitespace-nowrap sm:px-6">
+                <div className="flex items-center">
+                  <Skeleton className="h-10 w-10 rounded-full" />
+                  <div className="ml-3 space-y-2 sm:ml-4">
+                    <Skeleton className="h-4 w-32" />
+                    <Skeleton className="h-3 w-24" />
+                  </div>
+                </div>
+              </td>
+              <td className="px-3 py-4 whitespace-nowrap sm:px-6">
+                <Skeleton className="h-4 w-28" />
+              </td>
+              <td className="px-3 py-4 whitespace-nowrap sm:px-6">
+                <Skeleton className="h-4 w-40" />
+              </td>
+              <td className="px-3 py-4 whitespace-nowrap sm:px-6">
+                <Skeleton className="h-6 w-20 rounded-full" />
+              </td>
+              <td className="px-3 py-4 whitespace-nowrap sm:px-6">
+                <Skeleton className="h-4 w-28" />
+              </td>
+              <td className="px-3 py-4 whitespace-nowrap sm:px-6">
+                <Skeleton className="h-5 w-24 rounded-full" />
+              </td>
+              <td className="px-3 py-4 whitespace-nowrap sm:px-6">
+                <Skeleton className="h-5 w-24 rounded-full" />
+              </td>
+              <td className="px-3 py-4 whitespace-nowrap sm:px-6">
+                <Skeleton className="h-4 w-32" />
+              </td>
+              <td className="px-3 py-4 whitespace-nowrap sm:px-6">
+                <Skeleton className="h-4 w-32" />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export function ContactCardsSkeleton() {
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {Array.from({ length: 9 }).map((_, i) => (
+        <div key={i} className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+          {/* En-tête */}
+          <div className="mb-4 flex items-start justify-between">
+            <div className="flex items-center gap-3">
+              <Skeleton className="h-12 w-12 rounded-full" />
+              <div className="space-y-2">
+                <Skeleton className="h-5 w-32" />
+                <Skeleton className="h-3 w-24" />
+              </div>
+            </div>
+          </div>
+
+          {/* Informations de contact */}
+          <div className="mb-4 space-y-2">
+            <div className="flex items-center">
+              <Skeleton className="mr-2 h-4 w-4" />
+              <Skeleton className="h-4 w-28" />
+            </div>
+            <div className="flex items-center">
+              <Skeleton className="mr-2 h-4 w-4" />
+              <Skeleton className="h-4 w-36" />
+            </div>
+            <div className="flex items-center">
+              <Skeleton className="mr-2 h-4 w-4" />
+              <Skeleton className="h-4 w-32" />
+            </div>
+            <div className="flex items-center">
+              <Skeleton className="mr-2 h-4 w-4" />
+              <Skeleton className="h-4 w-24" />
+            </div>
+          </div>
+
+          {/* Badge statut */}
+          <div className="mb-4">
+            <Skeleton className="h-6 w-24 rounded-full" />
+          </div>
+
+          {/* Pied de carte avec utilisateurs assignés */}
+          <div className="flex items-start justify-between border-t border-gray-100 pt-4">
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-7 w-7 rounded-full" />
+                <div className="space-y-1">
+                  <Skeleton className="h-4 w-20" />
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-7 w-7 rounded-full" />
+                <div className="space-y-1">
+                  <Skeleton className="h-4 w-20" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function AgendaMonthSkeleton() {
+  return (
+    <div className="rounded-lg bg-white shadow">
+      <div className="grid grid-cols-7 border-b border-gray-200">
+        {['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'].map((day) => (
+          <div
+            key={day}
+            className="border-r border-gray-200 p-3 text-center text-sm font-semibold text-gray-700 last:border-r-0"
+          >
+            {day}
+          </div>
+        ))}
+      </div>
+      <div className="grid grid-cols-7">
+        {Array.from({ length: 42 }).map((_, i) => (
+          <div
+            key={i}
+            className="min-h-[100px] border-r border-b border-gray-200 p-2 last:border-r-0"
+          >
+            <Skeleton className="mb-2 h-5 w-6" />
+            <div className="space-y-1">
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-3/4" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function AgendaWeekSkeleton() {
+  const HOURS = Array.from({ length: 17 }, (_, i) => i + 6); // 6h à 22h
+  // Utiliser un pattern déterministe pour éviter les erreurs d'hydratation
+  // On affiche un skeleton toutes les 3 heures pour chaque jour
+  const shouldShowSkeleton = (dayIndex: number, hourIndex: number) => {
+    return (dayIndex + hourIndex) % 3 === 0;
+  };
+
+  return (
+    <div className="overflow-auto rounded-lg bg-white shadow">
+      <div className="grid grid-cols-8 border-b border-gray-200 bg-gray-50 text-xs font-medium text-gray-500">
+        <div className="px-3 py-2 text-right">(UTC+01:00) Hr</div>
+        {Array.from({ length: 7 }).map((_, i) => (
+          <div key={i} className="border-l border-gray-200 px-3 py-2 text-center">
+            <Skeleton className="mx-auto h-4 w-12" />
+            <Skeleton className="mx-auto mt-1 h-8 w-8 rounded-full" />
+          </div>
+        ))}
+      </div>
+      <div className="grid grid-cols-8 text-xs">
+        <div className="border-r border-gray-200 bg-gray-50">
+          {HOURS.map((hour) => (
+            <div
+              key={hour}
+              className="flex h-16 items-start justify-end border-b border-gray-200 pr-2"
+            >
+              <Skeleton className="h-3 w-10" />
+            </div>
+          ))}
+        </div>
+        {Array.from({ length: 7 }).map((_, dayIndex) => (
+          <div key={dayIndex} className="border-l border-gray-200">
+            {HOURS.map((hour, hourIndex) => (
+              <div key={hour} className="relative h-16 border-b border-gray-100 px-1.5 py-0.5">
+                {shouldShowSkeleton(dayIndex, hourIndex) && (
+                  <Skeleton className="h-12 w-full rounded" />
+                )}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function AgendaDaySkeleton() {
+  return (
+    <div className="space-y-4">
+      {Array.from({ length: 5 }).map((_, i) => (
+        <div key={i} className="rounded-lg border border-gray-200 bg-white p-4 shadow">
+          <div className="flex items-start justify-between">
+            <div className="flex-1">
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-5 w-5 rounded-full" />
+                <div className="flex-1 space-y-2">
+                  <div className="flex items-center gap-2">
+                    <Skeleton className="h-5 w-16 rounded-full" />
+                    <Skeleton className="h-4 w-20" />
+                  </div>
+                  <Skeleton className="h-5 w-48" />
+                  <Skeleton className="h-4 w-32" />
+                  <div className="mt-2 flex items-center gap-4">
+                    <Skeleton className="h-4 w-20" />
+                    <Skeleton className="h-4 w-24" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function UsersTableSkeleton() {
+  return (
+    <div className="overflow-x-auto rounded-lg bg-white shadow">
+      <table className="min-w-full divide-y divide-gray-200">
+        <thead className="bg-gray-50">
+          <tr>
+            <th className="px-3 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase sm:px-6">
+              Utilisateur
+            </th>
+            <th className="px-3 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase sm:px-6">
+              Email
+            </th>
+            <th className="px-3 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase sm:px-6">
+              Rôle
+            </th>
+            <th className="px-3 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase sm:px-6">
+              Email vérifié
+            </th>
+            <th className="px-3 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase sm:px-6">
+              Compte
+            </th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-200 bg-white">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <tr key={i} className="hover:bg-gray-50">
+              <td className="px-3 py-4 whitespace-nowrap sm:px-6">
+                <div className="flex items-center">
+                  <Skeleton className="h-8 w-8 rounded-full sm:h-10 sm:w-10" />
+                  <div className="ml-2 space-y-1 sm:ml-4">
+                    <Skeleton className="h-4 w-32" />
+                  </div>
+                </div>
+              </td>
+              <td className="px-3 py-4 whitespace-nowrap sm:px-6">
+                <Skeleton className="h-4 w-40" />
+              </td>
+              <td className="px-3 py-4 whitespace-nowrap sm:px-6">
+                <Skeleton className="h-8 w-24 rounded-md" />
+              </td>
+              <td className="px-3 py-4 whitespace-nowrap sm:px-6">
+                <Skeleton className="h-6 w-20 rounded-full" />
+              </td>
+              <td className="px-3 py-4 whitespace-nowrap sm:px-6">
+                <div className="flex items-center gap-2">
+                  <Skeleton className="h-5 w-9 rounded-full" />
+                  <Skeleton className="h-4 w-12" />
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export function TemplatesPageSkeleton() {
+  return (
+    <div className="h-full">
+      {/* Header Skeleton */}
+      <div className="border-b border-gray-200 bg-white px-4 py-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between">
+          <div className="space-y-2">
+            <Skeleton className="h-8 w-48" />
+            <Skeleton className="h-4 w-64" />
+          </div>
+          <Skeleton className="h-10 w-40 rounded-lg" />
+        </div>
+      </div>
+
+      <div className="p-4 sm:p-6 lg:p-8">
+        {/* Filtres Skeleton */}
+        <div className="mb-6 flex flex-wrap gap-2">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Skeleton key={i} className="h-10 w-24 rounded-lg" />
+          ))}
+        </div>
+
+        {/* Grille de templates Skeleton */}
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div
+              key={i}
+              className="rounded-lg border border-gray-200 bg-white p-4 shadow transition-shadow"
+            >
+              <div className="flex items-start justify-between">
+                <div className="flex-1">
+                  <div className="mb-2 flex items-center gap-2">
+                    <Skeleton className="h-5 w-5" />
+                    <Skeleton className="h-6 w-32" />
+                  </div>
+                  <Skeleton className="mb-2 h-6 w-20 rounded-full" />
+                  <Skeleton className="mb-1 h-4 w-full" />
+                  <Skeleton className="mb-1 h-4 w-3/4" />
+                  <Skeleton className="h-4 w-1/2" />
+                </div>
+              </div>
+              <div className="mt-4 flex items-center justify-end gap-2">
+                <Skeleton className="h-8 w-8 rounded-lg" />
+                <Skeleton className="h-8 w-8 rounded-lg" />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}