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

2026-06-24 14:42:44 +02:00
parent 5a10fd4221
commit e85314eb77
2 changed files with 83 additions and 77 deletions
@@ -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) => (
+          {tabs.filter(t => !t.adminOnly || isAdmin).map(t => (
            <button
-                key={t}
-                onClick={() => setTab(t)}
+              key={t.id}
+              onClick={() => setTab(t.id)}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-                  tab === t
+                tab === t.id
                  ? 'bg-indigo-600 text-white'
                  : 'bg-slate-700 text-gray-300 hover:bg-slate-600'
              }`}
            >
-                {t === 'connexions' ? 'Connexions' : 'Utilisateurs'}
+              {t.label}
            </button>
          ))}
        </div>
-        )}
-        {(!isAdmin || tab === 'connexions') && <ConnectionStatus />}
+        {tab === 'connexions' && <ConnectionStatus />}
+        {tab === 'mockup-templates' && <TemplateLibrary />}
        {isAdmin && tab === 'utilisateurs' && <UsersManager />}
      </div>
    </>
@@ -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')
-      .then(r => r.json())
-      .then(setTemplates)
-      .finally(() => setLoading(false))
+    Promise.all([
+      fetch('/api/mockup/templates').then(r => r.json()),
+      fetch('/api/sheets/tabs').then(r => r.json()),
+    ]).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) => {
-    acc[f] = templates.filter(t => t.family === f)
-    return acc
-  }, {})
+  const allUsedFamilies = Array.from(new Set(templates.map(t => t.family)))
+  const displayFamilies = families.filter(f => allUsedFamilies.includes(f) || f === 'Tous')

  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
-                value={name}
-                onChange={e => setName(e.target.value)}
+              <input 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
-                value={family}
-                onChange={e => setFamily(e.target.value)}
-                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 value={family} onChange={e => setFamily(e.target.value)}
+                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
-              value={description}
-              onChange={e => setDescription(e.target.value)}
+            <input 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
-            type="submit"
-            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"
-          >
+          <button type="submit" 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">
+          {displayFamilies.map(f => {
+            const byFamily = templates.filter(t => t.family === f)
+            if (byFamily.length === 0) return null
+            return (
              <div key={f}>
-            <h3 className="text-sm font-medium text-gray-300 mb-2">{f}</h3>
-            <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
-              {byFamily[f].map(t => (
+                <h3 className="text-sm font-medium text-gray-300 mb-2 flex items-center gap-2">
+                  {f}
+                  <span className="text-xs text-gray-500">{byFamily.length} template{byFamily.length > 1 ? 's' : ''}</span>
+                </h3>
+                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
+                  {byFamily.map(t => (
                    <div key={t.id} className="relative rounded-lg overflow-hidden border border-slate-600 group">
-                  <img
-                    src={`/api/mockup/templates/image/${t.filename}`}
-                    alt={t.name}
-                    className="w-full h-32 object-cover"
-                  />
+                      <img src={`/api/mockup/templates/image/${t.filename}`} alt={t.name}
+                        className="w-full h-32 object-cover" />
                      <div className="p-2 bg-slate-800">
                        <p className="text-xs text-white font-medium truncate">{t.name}</p>
                        {t.description && <p className="text-xs text-gray-400 truncate">{t.description}</p>}
                      </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 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>
                    </div>
                  ))}
                </div>
              </div>
-        ) : null)
+            )
+          })}
+        </div>
      )}
    </div>
  )