C_Ma_For/gestion-materiaux-destock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: product picker with search in mockup page

Browse Source
This commit is contained in:
Mathieu
2026-06-22 14:42:58 +02:00
parent 4811b73c69
commit f6b0ba9685
1 changed files with 74 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(dashboard)/mockup/page.tsx
+74 -23
View File
@@ -1,19 +1,39 @@
'use client'
import { useState } from 'react'
import { useState, useEffect, useRef } from 'react'
import { Header } from '@/components/layout/Header'
import { TemplateLibrary } from '@/components/mockup/TemplateLibrary'
import { MockupGenerator } from '@/components/mockup/MockupGenerator'
type Tab = 'generate' | 'library'
interface Product {
shopifyId: string
title: string
ref: string
}
export default function MockupPage() {
const [tab, setTab] = useState<Tab>('generate')
const [shopifyId, setShopifyId] = useState('')
const [productName, setProductName] = useState('')
const [products, setProducts] = useState<Product[]>([])
const [search, setSearch] = useState('')
const [showDropdown, setShowDropdown] = useState(false)
const [selectedProduct, setSelectedProduct] = useState<Product | null>(null)
const [family, setFamily] = useState('Menuiserie')
const [dimensions, setDimensions] = useState('')
const [cutoutB64, setCutoutB64] = useState<string | null>(null)
const dropdownRef = useRef<HTMLDivElement>(null)
useEffect(() => {
fetch('/api/products/list')
.then(r => r.json())
.then(data => setProducts(data.products ?? []))
}, [])
const filtered = search.length < 2 ? [] : products.filter(p =>
p.title.toLowerCase().includes(search.toLowerCase()) ||
p.ref.toLowerCase().includes(search.toLowerCase())
).slice(0, 20)
const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0]
@@ -31,12 +51,8 @@ export default function MockupPage() {
<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'}`}
>
<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>
))}
@@ -50,17 +66,49 @@ export default function MockupPage() {
<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>
{/* Product picker */}
<div className="relative" ref={dropdownRef}>
<label className="block text-xs text-gray-400 mb-1">Rechercher un produit</label>
{selectedProduct ? (
<div className="flex items-center gap-2 bg-slate-700 border border-slate-600 rounded px-2 py-1.5">
<span className="flex-1 text-sm text-white truncate">{selectedProduct.title}</span>
<span className="text-xs text-gray-400 shrink-0">{selectedProduct.ref}</span>
<button type="button" onClick={() => { setSelectedProduct(null); setSearch('') }}
className="text-gray-400 hover:text-white ml-1 shrink-0">✕</button>
</div>
) : (
<>
<input
type="text"
value={search}
onChange={e => { setSearch(e.target.value); setShowDropdown(true) }}
onFocus={() => setShowDropdown(true)}
placeholder="Nom ou référence du produit…"
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"
/>
{showDropdown && filtered.length > 0 && (
<div className="absolute z-10 mt-1 w-full bg-slate-700 border border-slate-600 rounded shadow-lg max-h-56 overflow-y-auto">
{filtered.map(p => (
<button key={p.shopifyId} type="button"
onMouseDown={() => { setSelectedProduct(p); setSearch(''); setShowDropdown(false) }}
className="w-full text-left px-3 py-2 text-sm text-white hover:bg-slate-600 flex justify-between gap-2">
<span className="truncate">{p.title}</span>
<span className="text-xs text-gray-400 shrink-0">{p.ref}</span>
</button>
))}
</div>
)}
{showDropdown && search.length >= 2 && filtered.length === 0 && (
<div className="absolute z-10 mt-1 w-full bg-slate-700 border border-slate-600 rounded px-3 py-2">
<p className="text-xs text-gray-400">Aucun résultat</p>
</div>
)}
</>
)}
</div>
<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)}
@@ -75,22 +123,25 @@ export default function MockupPage() {
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 ? (
{cutoutB64 && selectedProduct ? (
<MockupGenerator
productCutoutBase64={cutoutB64}
productName={productName}
shopifyId={shopifyId || undefined}
productName={selectedProduct.title}
shopifyId={selectedProduct.shopifyId}
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>
<p className="text-sm text-gray-500 text-center py-8">
{!selectedProduct ? 'Sélectionnez un produit pour commencer.' : 'Chargez une image PNG découpée.'}
</p>
)}
</div>
)}