feat: affichage images produit dans la liste avec thumbnail et compteur

src/components/products/ProductTable.tsx

@@ -36,6 +36,7 @@ export function ProductTable({ products, loading }: Props) {
         <thead>
           <tr className="text-left text-gray-400 border-b border-slate-700">
             <th className="pb-3 pr-4 font-medium">Référence</th>
+            <th className="pb-3 pr-4 font-medium">Images</th>
             <th className="pb-3 pr-4 font-medium">Titre</th>
             <th className="pb-3 pr-4 font-medium">Prix</th>
             <th className="pb-3 pr-4 font-medium">Stock</th>
@@ -48,6 +49,18 @@ export function ProductTable({ products, loading }: Props) {
           {displayed.map((p) => (
             <tr key={p.shopifyId} className="border-b border-slate-700/50 hover:bg-slate-700/30 transition-colors">
               <td className="py-3 pr-4 font-mono text-indigo-300">{p.ref}</td>
+              <td className="py-3 pr-4">
+                {p.images.length > 0 ? (
+                  <div className="flex items-center gap-1.5">
+                    <img src={p.images[0]} alt="" className="w-8 h-8 object-cover rounded border border-slate-600" />
+                    {p.images.length > 1 && (
+                      <span className="text-xs text-gray-400">+{p.images.length - 1}</span>
+                    )}
+                  </div>
+                ) : (
+                  <span className="text-xs text-gray-600">—</span>
+                )}
+              </td>
               <td className="py-3 pr-4 text-white">{p.title}</td>
               <td className="py-3 pr-4 text-gray-300">{p.price} €</td>
               <td className="py-3 pr-4 text-gray-300">{p.stock}</td>