feat: mockup page with template library and generator UI

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

@@ -0,0 +1,100 @@
+'use client'
+import { useState } from 'react'
+import { Header } from '@/components/layout/Header'
+import { TemplateLibrary } from '@/components/mockup/TemplateLibrary'
+import { MockupGenerator } from '@/components/mockup/MockupGenerator'
+
+type Tab = 'generate' | 'library'
+
+export default function MockupPage() {
+  const [tab, setTab] = useState<Tab>('generate')
+
+  const [shopifyId, setShopifyId] = useState('')
+  const [productName, setProductName] = useState('')
+  const [family, setFamily] = useState('Menuiserie')
+  const [dimensions, setDimensions] = useState('')
+  const [cutoutB64, setCutoutB64] = useState<string | null>(null)
+
+  const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    const reader = new FileReader()
+    reader.onload = ev => {
+      const result = ev.target?.result as string
+      setCutoutB64(result.split(',')[1])
+    }
+    reader.readAsDataURL(file)
+  }
+
+  return (
+    <>
+      <Header title="🖼️ Mockups" actions={
+        <div className="flex gap-2">
+          {(['generate', 'library'] as Tab[]).map(t => (
+            <button
+              key={t}
+              type="button"
+              onClick={() => setTab(t)}
+              className={`px-3 py-1 text-xs rounded-lg transition-colors ${tab === t ? 'bg-indigo-600 text-white' : 'text-gray-400 hover:text-white'}`}
+            >
+              {t === 'generate' ? 'Générer' : 'Bibliothèque templates'}
+            </button>
+          ))}
+        </div>
+      } />
+
+      <div className="p-6 max-w-2xl mx-auto">
+        {tab === 'library' ? (
+          <TemplateLibrary />
+        ) : (
+          <div className="space-y-4">
+            <div className="bg-slate-800 rounded-xl p-4 border border-slate-700 space-y-3">
+              <h2 className="text-sm font-semibold text-white">Produit</h2>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-xs text-gray-400 mb-1">Nom produit</label>
+                  <input value={productName} onChange={e => setProductName(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" />
+                </div>
+                <div>
+                  <label className="block text-xs text-gray-400 mb-1">ID Shopify</label>
+                  <input value={shopifyId} onChange={e => setShopifyId(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" />
+                </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">
+                    {['Menuiserie', 'Baies vitrées', 'Carrelage', 'Tous'].map(f => <option key={f}>{f}</option>)}
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-xs text-gray-400 mb-1">Dimensions (ex: 90x215cm)</label>
+                  <input value={dimensions} onChange={e => setDimensions(e.target.value)}
+                    placeholder="optionnel"
+                    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>
+              <div>
+                <label className="block text-xs text-gray-400 mb-1">Image découpée (PNG)</label>
+                <input type="file" accept="image/png" onChange={handleFile} className="text-sm text-gray-300" />
+              </div>
+            </div>
+
+            {cutoutB64 ? (
+              <MockupGenerator
+                productCutoutBase64={cutoutB64}
+                productName={productName}
+                shopifyId={shopifyId || undefined}
+                family={family}
+                dimensions={dimensions || undefined}
+              />
+            ) : (
+              <p className="text-sm text-gray-500 text-center py-8">Sélectionnez une image découpée pour commencer.</p>
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  )
+}

src/components/layout/Sidebar.tsx

@@ -16,6 +16,7 @@ const NAV_ITEMS: NavItem[] = [
   { href: '/images',     label: 'Images',       icon: '🖼️' },
   { href: '/sync',       label: 'Sync Sheets',  icon: '🔄' },
   { href: '/creation',   label: 'Création',     icon: '✨' },
+  { href: '/mockup',     label: 'Mockups',      icon: '🖼️' },
   { href: '/parametres', label: 'Paramètres',   icon: '⚙️', adminOnly: true },
 ]
 

src/components/mockup/TemplateLibrary.tsx

@@ -0,0 +1,144 @@
+'use client'
+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 [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 [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))
+  }
+
+  useEffect(load, [])
+
+  const upload = async (e: React.FormEvent) => {
+    e.preventDefault()
+    const file = fileRef.current?.files?.[0]
+    if (!file || !name || !family) return
+    setUploading(true)
+    setError(null)
+    try {
+      const form = new FormData()
+      form.append('name', name)
+      form.append('family', family)
+      form.append('description', description)
+      form.append('image', file)
+      const res = await fetch('/api/mockup/templates', { method: 'POST', body: form })
+      if (!res.ok) throw new Error((await res.json()).error)
+      setName(''); setDescription('')
+      if (fileRef.current) fileRef.current.value = ''
+      load()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Erreur')
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  const remove = async (id: string) => {
+    await fetch(`/api/mockup/templates/${id}`, { method: 'DELETE' })
+    load()
+  }
+
+  const byFamily = FAMILIES.reduce<Record<string, MockupTemplate[]>>((acc, f) => {
+    acc[f] = templates.filter(t => t.family === f)
+    return acc
+  }, {})
+
+  return (
+    <div className="space-y-6">
+      <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)}
+                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"
+              />
+            </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>
+            </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)}
+              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"
+            />
+          </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"
+          >
+            {uploading ? 'Ajout…' : '+ Ajouter'}
+          </button>
+        </form>
+      </div>
+
+      {loading ? (
+        <p className="text-sm text-gray-400">Chargement…</p>
+      ) : (
+        FAMILIES.map(f => byFamily[f]?.length > 0 ? (
+          <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 => (
+                <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"
+                  />
+                  <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>
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : null)
+      )}
+    </div>
+  )
+}