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">
-          <div className="flex gap-2">
+          {tabs.filter(t => !t.adminOnly || isAdmin).map(t => (
-            {(['connexions', 'utilisateurs'] as Tab[]).map((t) => (
+            <button
-              <button
+              key={t.id}
-                key={t}
+              onClick={() => setTab(t.id)}
-                onClick={() => setTab(t)}
+              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                tab === t.id
-                  tab === t
+                  ? 'bg-indigo-600 text-white'
-                    ? 'bg-indigo-600 text-white'
+                  : 'bg-slate-700 text-gray-300 hover:bg-slate-600'
-                    : 'bg-slate-700 text-gray-300 hover:bg-slate-600'
+              }`}
-                }`}
+            >
-              >
+              {t.label}
-                {t === 'connexions' ? 'Connexions' : 'Utilisateurs'}
+            </button>
-              </button>
+          ))}
-            ))}
+        </div>
-          </div>
+        {tab === 'connexions' && <ConnectionStatus />}
-        )}
+        {tab === 'mockup-templates' && <TemplateLibrary />}
-        {(!isAdmin || tab === 'connexions') && <ConnectionStatus />}
         {isAdmin && tab === 'utilisateurs' && <UsersManager />}
       </div>
     </>

src/components/mockup/TemplateLibrary.tsx

@@ -2,24 +2,31 @@
 import { useState, useEffect, useRef } from 'react'
 import type { MockupTemplate } from '@/types/mockup'
 
-const FAMILIES = ['Menuiserie', 'Baies vitrées', 'Carrelage', 'Tous']
-
 export function TemplateLibrary() {
   const [templates, setTemplates] = useState<MockupTemplate[]>([])
+  const [families, setFamilies] = useState<string[]>(['Tous'])
   const [loading, setLoading] = useState(true)
   const [uploading, setUploading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [name, setName] = useState('')
-  const [family, setFamily] = useState('Menuiserie')
+  const [family, setFamily] = useState('Tous')
   const [description, setDescription] = useState('')
   const fileRef = useRef<HTMLInputElement>(null)
 
   const load = () => {
     setLoading(true)
-    fetch('/api/mockup/templates')
+    Promise.all([
-      .then(r => r.json())
+      fetch('/api/mockup/templates').then(r => r.json()),
-      .then(setTemplates)
+      fetch('/api/sheets/tabs').then(r => r.json()),
-      .finally(() => setLoading(false))
+    ]).then(([tplData, tabsData]) => {
+      setTemplates(tplData as MockupTemplate[])
+      const tabs: string[] = (tabsData.tabs ?? []).filter((t: string) =>
+        !['COLLECTIONS', 'LIVRAISONS', 'ECOPART', 'RECAP'].some(x => t.toUpperCase().includes(x))
+      )
+      const allFamilies = ['Tous', ...tabs]
+      setFamilies(allFamilies)
+      if (!allFamilies.includes(family)) setFamily(allFamilies[0])
+    }).finally(() => setLoading(false))
   }
 
   useEffect(load, [])
@@ -53,91 +60,84 @@ export function TemplateLibrary() {
     load()
   }
 
-  const byFamily = FAMILIES.reduce<Record<string, MockupTemplate[]>>((acc, f) => {
+  const allUsedFamilies = Array.from(new Set(templates.map(t => t.family)))
-    acc[f] = templates.filter(t => t.family === f)
+  const displayFamilies = families.filter(f => allUsedFamilies.includes(f) || f === 'Tous')
-    return acc
-  }, {})
 
   return (
     <div className="space-y-6">
+      {/* Upload form */}
       <div className="bg-slate-800 rounded-xl p-4 border border-slate-700">
         <h2 className="text-sm font-semibold text-white mb-3">Ajouter un template</h2>
         <form onSubmit={upload} className="space-y-3">
           <div className="grid grid-cols-2 gap-3">
             <div>
               <label className="block text-xs text-gray-400 mb-1">Nom</label>
-              <input
+              <input value={name} onChange={e => setName(e.target.value)}
-                value={name}
-                onChange={e => setName(e.target.value)}
                 placeholder="ex: Entrée moderne"
-                className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-indigo-500" />
-              />
             </div>
             <div>
               <label className="block text-xs text-gray-400 mb-1">Famille</label>
-              <select
+              <select value={family} onChange={e => setFamily(e.target.value)}
-                value={family}
+                className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
-                onChange={e => setFamily(e.target.value)}
+                {families.map(f => <option key={f}>{f}</option>)}
-                className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-indigo-500"
-              >
-                {FAMILIES.map(f => <option key={f}>{f}</option>)}
               </select>
             </div>
           </div>
           <div>
             <label className="block text-xs text-gray-400 mb-1">Description (optionnel)</label>
-            <input
+            <input value={description} onChange={e => setDescription(e.target.value)}
-              value={description}
-              onChange={e => setDescription(e.target.value)}
               placeholder="ex: Pièce lumineuse avec parquet"
-              className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-indigo-500"
+              className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-indigo-500" />
-            />
           </div>
           <div>
             <label className="block text-xs text-gray-400 mb-1">Image</label>
             <input ref={fileRef} type="file" accept="image/*" className="text-sm text-gray-300" />
           </div>
           {error && <p className="text-xs text-red-400">{error}</p>}
-          <button
+          <button type="submit" disabled={uploading || !name || !family}
-            type="submit"
+            className="px-4 py-2 bg-indigo-600 text-white text-sm rounded-lg disabled:opacity-40 hover:bg-indigo-500">
-            disabled={uploading || !name || !family}
-            className="px-4 py-2 bg-indigo-600 text-white text-sm rounded-lg disabled:opacity-40 hover:bg-indigo-500"
-          >
             {uploading ? 'Ajout…' : '+ Ajouter'}
           </button>
         </form>
       </div>
 
+      {/* Templates grouped by family */}
       {loading ? (
         <p className="text-sm text-gray-400">Chargement…</p>
+      ) : templates.length === 0 ? (
+        <p className="text-sm text-gray-500">Aucun template. Ajoutez-en un ci-dessus.</p>
       ) : (
-        FAMILIES.map(f => byFamily[f]?.length > 0 ? (
+        <div className="space-y-6">
-          <div key={f}>
+          {displayFamilies.map(f => {
-            <h3 className="text-sm font-medium text-gray-300 mb-2">{f}</h3>
+            const byFamily = templates.filter(t => t.family === f)
-            <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+            if (byFamily.length === 0) return null
-              {byFamily[f].map(t => (
+            return (
-                <div key={t.id} className="relative rounded-lg overflow-hidden border border-slate-600 group">
+              <div key={f}>
-                  <img
+                <h3 className="text-sm font-medium text-gray-300 mb-2 flex items-center gap-2">
-                    src={`/api/mockup/templates/image/${t.filename}`}
+                  {f}
-                    alt={t.name}
+                  <span className="text-xs text-gray-500">{byFamily.length} template{byFamily.length > 1 ? 's' : ''}</span>
-                    className="w-full h-32 object-cover"
+                </h3>
-                  />
+                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
-                  <div className="p-2 bg-slate-800">
+                  {byFamily.map(t => (
-                    <p className="text-xs text-white font-medium truncate">{t.name}</p>
+                    <div key={t.id} className="relative rounded-lg overflow-hidden border border-slate-600 group">
-                    {t.description && <p className="text-xs text-gray-400 truncate">{t.description}</p>}
+                      <img src={`/api/mockup/templates/image/${t.filename}`} alt={t.name}
-                  </div>
+                        className="w-full h-32 object-cover" />
-                  <button
+                      <div className="p-2 bg-slate-800">
-                    type="button"
+                        <p className="text-xs text-white font-medium truncate">{t.name}</p>
-                    onClick={() => remove(t.id)}
+                        {t.description && <p className="text-xs text-gray-400 truncate">{t.description}</p>}
-                    className="absolute top-1 right-1 bg-red-600/80 hover:bg-red-500 text-white text-xs rounded px-1.5 py-0.5 opacity-0 group-hover:opacity-100 transition-opacity"
+                      </div>
-                  >
+                      <button type="button" onClick={() => remove(t.id)}
-                    ✕
+                        className="absolute top-1 right-1 bg-red-600/80 hover:bg-red-500 text-white text-xs rounded px-1.5 py-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
-                  </button>
+                        ✕
+                      </button>
+                    </div>
+                  ))}
                 </div>
-              ))}
+              </div>
-            </div>
+            )
-          </div>
+          })}
-        ) : null)
+        </div>
       )}
     </div>
   )