From cf5bbf91d5124769b1651fe6e77286ef0d4494a3 Mon Sep 17 00:00:00 2001
From: Mathieu <mathieu.fort@gmail.com>
Date: Mon, 8 Jun 2026 20:00:20 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20module=20Images=20complet=20=E2=80=94?=
 =?UTF-8?q?=20drop,=20traitement=20IA,=20Shopify,=20upload?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(dashboard)/images/page.tsx | 56 +++++++++++++++++++++++++++--
 1 file changed, 54 insertions(+), 2 deletions(-)

diff --git a/src/app/(dashboard)/images/page.tsx b/src/app/(dashboard)/images/page.tsx
index 760c962..3dae661 100644
--- a/src/app/(dashboard)/images/page.tsx
+++ b/src/app/(dashboard)/images/page.tsx
@@ -1,9 +1,61 @@
+'use client'
+import { useState } from 'react'
 import { Header } from '@/components/layout/Header'
+import { DropZone } from '@/components/images/DropZone'
+import { ImageCard } from '@/components/images/ImageCard'
+import { Lightbox } from '@/components/images/Lightbox'
+import { GlobalActions } from '@/components/images/GlobalActions'
+import { useImages } from '@/hooks/useImages'
+import type { ImageItem } from '@/types/images'
+
 export default function ImagesPage() {
+  const { items, addFiles, setFeather, rotate, uploadOne, uploadAll, removeItem } = useImages()
+  const [lightboxItem, setLightboxItem] = useState<ImageItem | null>(null)
+
   return (
     <>
-      <Header title="🖼️ Images" />
-      <div className="p-6"><p className="text-gray-400 text-sm">Module Images — à implémenter (Plan 2)</p></div>
+      <Header
+        title="🖼️ Images"
+        actions={
+          <span className="text-xs text-slate-500">
+            {items.length > 0 ? `${items.length} image${items.length > 1 ? 's' : ''}` : ''}
+          </span>
+        }
+      />
+
+      <div className="p-6 flex flex-col gap-4 flex-1 overflow-y-auto">
+        <DropZone onFiles={addFiles} />
+
+        {items.length > 0 && (
+          <GlobalActions items={items} onUploadAll={uploadAll} />
+        )}
+
+        {items.length > 0 && (
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+            {items.map((item) => (
+              <ImageCard
+                key={item.id}
+                item={item}
+                onFeatherChange={setFeather}
+                onRotate={rotate}
+                onUpload={uploadOne}
+                onRemove={removeItem}
+                onOpenLightbox={setLightboxItem}
+              />
+            ))}
+          </div>
+        )}
+
+        {items.length === 0 && (
+          <div className="text-center py-12 text-slate-600">
+            <p className="text-4xl mb-3">📂</p>
+            <p className="text-sm">Déposez des images pour commencer</p>
+            <p className="text-xs mt-1">Le nom du fichier (sans extension) doit correspondre à une référence produit Shopify</p>
+          </div>
+        )}
+      </div>
+
+      <Lightbox item={lightboxItem} onClose={() => setLightboxItem(null)} />
     </>
   )
 }