feat: gestion templates mockup dans les paramètres avec familles depuis Sheets

src/app/(dashboard)/parametres/page.tsx

@@ -4,36 +4,42 @@ import { useSession } from 'next-auth/react'
 import { Header } from '@/components/layout/Header'
 import { UsersManager } from '@/components/settings/UsersManager'
 import { ConnectionStatus } from '@/components/settings/ConnectionStatus'
+import { TemplateLibrary } from '@/components/mockup/TemplateLibrary'
 
-type Tab = 'connexions' | 'utilisateurs'
+type Tab = 'connexions' | 'utilisateurs' | 'mockup-templates'
 
 export default function ParametresPage() {
   const { data: session } = useSession()
   const isAdmin = session?.user?.role === 'admin'
   const [tab, setTab] = useState<Tab>('connexions')
 
+  const tabs: { id: Tab; label: string; adminOnly?: boolean }[] = [
+    { id: 'connexions', label: 'Connexions' },
+    { id: 'mockup-templates', label: 'Templates mockup' },
+    { id: 'utilisateurs', label: 'Utilisateurs', adminOnly: true },
+  ]
+
   return (
     <>
       <Header title="Paramètres" />
       <div className="p-6 space-y-6">
-        {isAdmin && (
-          <div className="flex gap-2">
-            {(['connexions', 'utilisateurs'] as Tab[]).map((t) => (
-              <button
-                key={t}
-                onClick={() => setTab(t)}
-                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-                  tab === t
-                    ? 'bg-indigo-600 text-white'
-                    : 'bg-slate-700 text-gray-300 hover:bg-slate-600'
-                }`}
-              >
-                {t === 'connexions' ? 'Connexions' : 'Utilisateurs'}
-              </button>
-            ))}
-          </div>
-        )}
-        {(!isAdmin || tab === 'connexions') && <ConnectionStatus />}
+        <div className="flex gap-2">
+          {tabs.filter(t => !t.adminOnly || isAdmin).map(t => (
+            <button
+              key={t.id}
+              onClick={() => setTab(t.id)}
+              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                tab === t.id
+                  ? 'bg-indigo-600 text-white'
+                  : 'bg-slate-700 text-gray-300 hover:bg-slate-600'
+              }`}
+            >
+              {t.label}
+            </button>
+          ))}
+        </div>
+        {tab === 'connexions' && <ConnectionStatus />}
+        {tab === 'mockup-templates' && <TemplateLibrary />}
         {isAdmin && tab === 'utilisateurs' && <UsersManager />}
       </div>
     </>