feat: add Zustand store, product list and add product modal (Steps 2-3)

- Create useProductStore with Zustand for state management
- Enrich client.js with all API functions (CRUD, scrape)
- Connect HomePage to store with loading/error states
- Add ProductCard with scrape/delete actions
- Add ProductGrid component
- Add AddProductModal with URL extraction
- Update Header with refresh and scrape all buttons
- Add comprehensive styles for cards and modal

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.gitignore

@@ -1,5 +1,8 @@
 .venv/
+__pycache__/
+*.pyc
 backend/data/
 backend/logs/
 frontend/node_modules/
+frontend/dist/
 .env

backend/app/api/__init__.py

@@ -1,10 +1,12 @@
 """Module routers."""
 from .routes_config import router as config_router
+from .routes_debug import router as debug_router
 from .routes_products import router as products_router
 from .routes_scrape import router as scrape_router
 
 __all__ = [
     "config_router",
+    "debug_router",
     "products_router",
     "scrape_router",
 ]

backend/app/api/routes_debug.py

@@ -0,0 +1,115 @@
+from __future__ import annotations
+
+import json
+from pathlib import Path
+from typing import Any
+
+from fastapi import APIRouter, Depends, Query
+from sqlalchemy.orm import Session
+
+from backend.app.api.deps import get_db
+from backend.app.db.models import Product, ProductSnapshot, ScrapeRun
+
+router = APIRouter(prefix="/debug", tags=["debug"])
+
+LOGS_DIR = Path(__file__).resolve().parent.parent.parent / "logs"
+
+
+@router.get("/tables")
+def get_tables(
+    limit: int = Query(default=50, le=200),
+    db: Session = Depends(get_db),
+) -> dict[str, Any]:
+    """Dump des tables SQLite pour debug (products, snapshots, scrape_runs)."""
+    products = db.query(Product).order_by(Product.id.desc()).limit(limit).all()
+    snapshots = db.query(ProductSnapshot).order_by(ProductSnapshot.id.desc()).limit(limit).all()
+    scrape_runs = db.query(ScrapeRun).order_by(ScrapeRun.id.desc()).limit(limit).all()
+
+    return {
+        "products": [
+            {
+                "id": p.id,
+                "boutique": p.boutique,
+                "url": p.url,
+                "asin": p.asin,
+                "titre": p.titre,
+                "url_image": p.url_image,
+                "categorie": p.categorie,
+                "type": p.type,
+                "actif": p.actif,
+                "cree_le": p.cree_le.isoformat() if p.cree_le else None,
+                "modifie_le": p.modifie_le.isoformat() if p.modifie_le else None,
+            }
+            for p in products
+        ],
+        "snapshots": [
+            {
+                "id": s.id,
+                "produit_id": s.produit_id,
+                "run_scrap_id": s.run_scrap_id,
+                "scrape_le": s.scrape_le.isoformat() if s.scrape_le else None,
+                "prix_actuel": s.prix_actuel,
+                "prix_conseille": s.prix_conseille,
+                "prix_min_30j": s.prix_min_30j,
+                "etat_stock": s.etat_stock,
+                "en_stock": s.en_stock,
+                "note": s.note,
+                "nombre_avis": s.nombre_avis,
+                "prime": s.prime,
+                "choix_amazon": s.choix_amazon,
+                "offre_limitee": s.offre_limitee,
+                "exclusivite_amazon": s.exclusivite_amazon,
+                "statut_scrap": s.statut_scrap,
+                "message_erreur": s.message_erreur,
+            }
+            for s in snapshots
+        ],
+        "scrape_runs": [
+            {
+                "id": r.id,
+                "demarre_le": r.demarre_le.isoformat() if r.demarre_le else None,
+                "termine_le": r.termine_le.isoformat() if r.termine_le else None,
+                "statut": r.statut,
+                "nb_total": r.nb_total,
+                "nb_ok": r.nb_ok,
+                "nb_echec": r.nb_echec,
+                "chemin_log": r.chemin_log,
+            }
+            for r in scrape_runs
+        ],
+    }
+
+
+@router.get("/logs")
+def get_logs(
+    lines: int = Query(default=100, le=1000),
+) -> dict[str, Any]:
+    """Lecture des dernières lignes du fichier de log scrap."""
+    log_file = LOGS_DIR / "scrap.log"
+
+    if not log_file.exists():
+        return {"logs": [], "file": str(log_file), "exists": False}
+
+    # Lire les dernières lignes
+    with open(log_file, encoding="utf-8") as f:
+        all_lines = f.readlines()
+
+    recent_lines = all_lines[-lines:]
+
+    # Parser les lignes JSON si possible
+    parsed_logs = []
+    for line in recent_lines:
+        line = line.strip()
+        if not line:
+            continue
+        try:
+            parsed_logs.append(json.loads(line))
+        except json.JSONDecodeError:
+            parsed_logs.append({"raw": line})
+
+    return {
+        "logs": parsed_logs,
+        "file": str(log_file),
+        "exists": True,
+        "total_lines": len(all_lines),
+    }

backend/app/main.py

@@ -5,7 +5,7 @@ from os import getenv
 from fastapi import FastAPI
 from dotenv import load_dotenv
 
-from backend.app.api import routes_config, routes_products, routes_scrape
+from backend.app.api import routes_config, routes_debug, routes_products, routes_scrape
 from backend.app.core.logging import logger
 from backend.app.core.scheduler import start_scheduler
 from backend.app.db.database import Base, engine
@@ -17,6 +17,7 @@ app = FastAPI(title="suivi_produit")
 app.include_router(routes_products.router)
 app.include_router(routes_scrape.router)
 app.include_router(routes_config.router)
+app.include_router(routes_debug.router)
 
 
 @app.on_event("startup")

frontend/package.json

@@ -10,13 +10,14 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.22.0",
     "chart.js": "^4.4.0",
     "zustand": "^4.4.0",
-    "@fortawesome/fontawesome-free": "^7.2.0"
+    "@fortawesome/fontawesome-free": "^6.5.0"
   },
   "devDependencies": {
     "vite": "^5.1.3",
     "@vitejs/plugin-react": "^4.0.0",
-    "sass": "^2.0.0"
+    "sass": "^1.77.0"
   }
 }

frontend/src/App.jsx

@@ -1,21 +1,71 @@
-import React from "react";
+import React, { useState } from "react";
+import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom";
+import HomePage from "./pages/HomePage";
+import DebugPage from "./pages/DebugPage";
+import useProductStore from "./stores/useProductStore";
+import AddProductModal from "./components/products/AddProductModal";
 
-const App = () => (
-  <div className="app-shell">
+const Header = () => {
+  const { fetchProducts, scrapeAll, loading } = useProductStore();
+  const [showAddModal, setShowAddModal] = useState(false);
+
+  const handleRefresh = () => {
+    fetchProducts();
+  };
+
+  const handleScrapeAll = async () => {
+    if (!confirm("Lancer le scraping de tous les produits ?")) return;
+    try {
+      await scrapeAll();
+    } catch (err) {
+      console.error("Erreur scrape all:", err);
+    }
+  };
+
+  return (
+    <>
       <header className="app-header">
-      <div className="brand">suivi_produits</div>
+        <div className="brand">
+          <NavLink to="/">suivi_produits</NavLink>
+        </div>
+        <nav className="nav-links">
+          <NavLink to="/" end className={({ isActive }) => isActive ? "active" : ""}>
+            <i className="fa-solid fa-home"></i> Accueil
+          </NavLink>
+          <NavLink to="/debug" className={({ isActive }) => isActive ? "active" : ""}>
+            <i className="fa-solid fa-bug"></i> Debug
+          </NavLink>
+        </nav>
         <div className="actions">
-        <button className="btn">Add Product</button>
-        <button className="btn">Refresh</button>
+          <button className="btn btn-primary" onClick={() => setShowAddModal(true)}>
+            <i className="fa-solid fa-plus"></i> Add Product
+          </button>
+          <button className="btn" onClick={handleScrapeAll} disabled={loading}>
+            <i className="fa-solid fa-bolt"></i> Scrape All
+          </button>
+          <button className="btn" onClick={handleRefresh} disabled={loading}>
+            <i className={`fa-solid fa-refresh ${loading ? "fa-spin" : ""}`}></i>
+          </button>
         </div>
       </header>
-    <main className="app-grid">
-      {/* état vide avant ajout de produit */}
-      <section className="empty-state">
-        <p>Aucun produit pour l'instant, ajoutez un lien Amazon.fr !</p>
-      </section>
-    </main>
+
+      {showAddModal && (
+        <AddProductModal onClose={() => setShowAddModal(false)} />
+      )}
+    </>
+  );
+};
+
+const App = () => (
+  <BrowserRouter>
+    <div className="app-shell">
+      <Header />
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/debug" element={<DebugPage />} />
+      </Routes>
     </div>
+  </BrowserRouter>
 );
 
 export default App;

frontend/src/api/client.js

@@ -1,7 +1,82 @@
 const BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:8008";
 
-export const fetchProducts = async () => {
-  // point d'entrée simple vers l'API FastAPI
-  const response = await fetch(`${BASE_URL}/products`);
+// Helper pour gérer les erreurs
+const handleResponse = async (response) => {
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ detail: "Erreur réseau" }));
+    throw new Error(error.detail || `Erreur ${response.status}`);
+  }
   return response.json();
 };
+
+// Products
+export const fetchProducts = async () => {
+  const response = await fetch(`${BASE_URL}/products`);
+  return handleResponse(response);
+};
+
+export const fetchProduct = async (id) => {
+  const response = await fetch(`${BASE_URL}/products/${id}`);
+  return handleResponse(response);
+};
+
+export const createProduct = async (data) => {
+  const response = await fetch(`${BASE_URL}/products`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  });
+  return handleResponse(response);
+};
+
+export const updateProduct = async (id, data) => {
+  const response = await fetch(`${BASE_URL}/products/${id}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  });
+  return handleResponse(response);
+};
+
+export const deleteProduct = async (id) => {
+  const response = await fetch(`${BASE_URL}/products/${id}`, {
+    method: "DELETE",
+  });
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ detail: "Erreur réseau" }));
+    throw new Error(error.detail || `Erreur ${response.status}`);
+  }
+  return true;
+};
+
+// Scraping
+export const scrapeProduct = async (id) => {
+  const response = await fetch(`${BASE_URL}/scrape/product/${id}`, {
+    method: "POST",
+  });
+  return handleResponse(response);
+};
+
+export const scrapeAll = async () => {
+  const response = await fetch(`${BASE_URL}/scrape/all`, {
+    method: "POST",
+  });
+  return handleResponse(response);
+};
+
+// Snapshots
+export const fetchSnapshots = async (productId, limit = 30) => {
+  const response = await fetch(`${BASE_URL}/products/${productId}/snapshots?limit=${limit}`);
+  return handleResponse(response);
+};
+
+// Debug
+export const fetchDebugTables = async (limit = 50) => {
+  const response = await fetch(`${BASE_URL}/debug/tables?limit=${limit}`);
+  return handleResponse(response);
+};
+
+export const fetchDebugLogs = async (lines = 100) => {
+  const response = await fetch(`${BASE_URL}/debug/logs?lines=${lines}`);
+  return handleResponse(response);
+};

frontend/src/components/ProductCard.jsx

@@ -1,14 +0,0 @@
-import React from "react";
-
-const ProductCard = ({ product }) => (
-  <article className="product-card">
-    {/* vignette produit : image + infos principales */}
-    <div className="product-image" />
-    <div className="product-info">
-      <h3>{product.titre}</h3>
-      <p>Prix actuel : {product.prix_actuel ?? "-"} €</p>
-    </div>
-  </article>
-);
-
-export default ProductCard;

frontend/src/components/products/AddProductModal.jsx

@@ -0,0 +1,123 @@
+import React, { useState } from "react";
+import useProductStore from "../../stores/useProductStore";
+
+const AddProductModal = ({ onClose }) => {
+  const { addProduct } = useProductStore();
+  const [url, setUrl] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  // Extrait l'ASIN d'une URL Amazon
+  const extractAsin = (amazonUrl) => {
+    const patterns = [
+      /\/dp\/([A-Z0-9]{10})/i,
+      /\/gp\/product\/([A-Z0-9]{10})/i,
+      /\/ASIN\/([A-Z0-9]{10})/i,
+      /\?asin=([A-Z0-9]{10})/i,
+    ];
+
+    for (const pattern of patterns) {
+      const match = amazonUrl.match(pattern);
+      if (match) return match[1].toUpperCase();
+    }
+    return null;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+
+    // Validation URL Amazon
+    if (!url.includes("amazon.fr")) {
+      setError("L'URL doit être une URL Amazon.fr");
+      return;
+    }
+
+    const asin = extractAsin(url);
+    if (!asin) {
+      setError("Impossible d'extraire l'ASIN de cette URL");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      // Construire l'URL canonique
+      const canonicalUrl = `https://www.amazon.fr/dp/${asin}`;
+
+      await addProduct({
+        boutique: "amazon",
+        url: canonicalUrl,
+        asin: asin,
+        titre: null,
+        url_image: null,
+        categorie: null,
+        type: null,
+        actif: true,
+      });
+
+      onClose();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <div className="modal-backdrop" onClick={handleBackdropClick}>
+      <div className="modal">
+        <div className="modal-header">
+          <h2>Ajouter un produit</h2>
+          <button className="btn-close" onClick={onClose}>
+            <i className="fa-solid fa-times"></i>
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="modal-body">
+          {error && <div className="form-error">{error}</div>}
+
+          <div className="form-group">
+            <label htmlFor="url">URL Amazon.fr</label>
+            <input
+              type="url"
+              id="url"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              placeholder="https://www.amazon.fr/dp/B0..."
+              required
+              autoFocus
+            />
+            <p className="form-hint">
+              Collez l'URL complète du produit Amazon.fr
+            </p>
+          </div>
+
+          <div className="modal-actions">
+            <button type="button" className="btn" onClick={onClose}>
+              Annuler
+            </button>
+            <button type="submit" className="btn btn-primary" disabled={loading}>
+              {loading ? (
+                <>
+                  <i className="fa-solid fa-spinner fa-spin"></i> Ajout...
+                </>
+              ) : (
+                <>
+                  <i className="fa-solid fa-plus"></i> Ajouter
+                </>
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default AddProductModal;

frontend/src/components/products/ProductCard.jsx

@@ -0,0 +1,94 @@
+import React from "react";
+import useProductStore from "../../stores/useProductStore";
+
+const ProductCard = ({ product }) => {
+  const { scrapeProduct, deleteProduct, scraping } = useProductStore();
+  const isScraping = scraping[product.id];
+
+  const handleScrape = async () => {
+    try {
+      await scrapeProduct(product.id);
+    } catch (err) {
+      console.error("Erreur scraping:", err);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!confirm(`Supprimer "${product.titre || product.asin}" ?`)) return;
+    try {
+      await deleteProduct(product.id);
+    } catch (err) {
+      console.error("Erreur suppression:", err);
+    }
+  };
+
+  return (
+    <article className="product-card">
+      <div className="product-header">
+        <span className="boutique">{product.boutique}</span>
+        {product.actif ? (
+          <span className="status active">Actif</span>
+        ) : (
+          <span className="status inactive">Inactif</span>
+        )}
+      </div>
+
+      <div className="product-body">
+        <div className="product-image">
+          {product.url_image ? (
+            <img src={product.url_image} alt={product.titre} />
+          ) : (
+            <div className="no-image">
+              <i className="fa-solid fa-image"></i>
+            </div>
+          )}
+        </div>
+
+        <div className="product-info">
+          <h3 className="product-title" title={product.titre}>
+            {product.titre || "Titre non disponible"}
+          </h3>
+
+          <div className="product-meta">
+            <span className="asin">ASIN: {product.asin}</span>
+            {product.categorie && (
+              <span className="category">{product.categorie}</span>
+            )}
+          </div>
+
+          <a
+            href={product.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="product-link"
+          >
+            <i className="fa-solid fa-external-link"></i> Voir sur Amazon
+          </a>
+        </div>
+      </div>
+
+      <div className="product-actions">
+        <button
+          className="btn btn-scrape"
+          onClick={handleScrape}
+          disabled={isScraping}
+        >
+          {isScraping ? (
+            <>
+              <i className="fa-solid fa-spinner fa-spin"></i> Scraping...
+            </>
+          ) : (
+            <>
+              <i className="fa-solid fa-download"></i> Scraper
+            </>
+          )}
+        </button>
+        <button className="btn btn-delete" onClick={handleDelete}>
+          <i className="fa-solid fa-trash"></i>
+        </button>
+      </div>
+    </article>
+  );
+};
+
+export default ProductCard;

frontend/src/components/products/ProductGrid.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import ProductCard from "./ProductCard";
+
+const ProductGrid = ({ products }) => {
+  if (!products || products.length === 0) {
+    return (
+      <section className="empty-state">
+        <i className="fa-solid fa-box-open empty-icon"></i>
+        <p>Aucun produit pour l'instant</p>
+        <p className="hint">Ajoutez un lien Amazon.fr pour commencer !</p>
+      </section>
+    );
+  }
+
+  return (
+    <div className="product-grid">
+      {products.map((product) => (
+        <ProductCard key={product.id} product={product} />
+      ))}
+    </div>
+  );
+};
+
+export default ProductGrid;

frontend/src/main.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
+import "@fortawesome/fontawesome-free/css/all.min.css";
 import "./styles/global.scss";
 
 ReactDOM.createRoot(document.getElementById("root")).render(

frontend/src/pages/DebugPage.jsx

@@ -0,0 +1,163 @@
+import React, { useEffect, useState } from "react";
+
+const BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:8008";
+
+const DbTable = ({ title, data, columns }) => {
+  if (!data || data.length === 0) {
+    return (
+      <section className="debug-table">
+        <h3>{title}</h3>
+        <p className="empty">Aucune donnée</p>
+      </section>
+    );
+  }
+
+  return (
+    <section className="debug-table">
+      <h3>{title} ({data.length})</h3>
+      <div className="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              {columns.map((col) => (
+                <th key={col}>{col}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((row, idx) => (
+              <tr key={row.id || idx}>
+                {columns.map((col) => (
+                  <td key={col} title={String(row[col] ?? "")}>
+                    {formatCell(row[col])}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+};
+
+const formatCell = (value) => {
+  if (value === null || value === undefined) return "-";
+  if (typeof value === "boolean") return value ? "Oui" : "Non";
+  if (typeof value === "string" && value.length > 50) {
+    return value.substring(0, 50) + "...";
+  }
+  return String(value);
+};
+
+const LogViewer = ({ logs }) => {
+  if (!logs || logs.length === 0) {
+    return (
+      <section className="debug-logs">
+        <h3>Logs Scraping</h3>
+        <p className="empty">Aucun log disponible</p>
+      </section>
+    );
+  }
+
+  return (
+    <section className="debug-logs">
+      <h3>Logs Scraping ({logs.length} lignes)</h3>
+      <div className="logs-wrapper">
+        {logs.map((log, idx) => (
+          <pre key={idx} className={`log-entry ${log.level || "info"}`}>
+            {JSON.stringify(log, null, 2)}
+          </pre>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+const DebugPage = () => {
+  const [tables, setTables] = useState({ products: [], snapshots: [], scrape_runs: [] });
+  const [logs, setLogs] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const fetchDebugData = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [tablesRes, logsRes] = await Promise.all([
+        fetch(`${BASE_URL}/debug/tables`),
+        fetch(`${BASE_URL}/debug/logs`),
+      ]);
+
+      if (!tablesRes.ok || !logsRes.ok) {
+        throw new Error("Erreur lors du chargement des données debug");
+      }
+
+      const tablesData = await tablesRes.json();
+      const logsData = await logsRes.json();
+
+      setTables(tablesData);
+      setLogs(logsData.logs || []);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchDebugData();
+  }, []);
+
+  if (loading) {
+    return (
+      <main className="debug-page">
+        <h2>Debug</h2>
+        <p>Chargement...</p>
+      </main>
+    );
+  }
+
+  if (error) {
+    return (
+      <main className="debug-page">
+        <h2>Debug</h2>
+        <p className="error">{error}</p>
+        <button onClick={fetchDebugData} className="btn">Réessayer</button>
+      </main>
+    );
+  }
+
+  return (
+    <main className="debug-page">
+      <div className="debug-header">
+        <h2>Debug</h2>
+        <button onClick={fetchDebugData} className="btn">
+          <i className="fa-solid fa-refresh"></i> Rafraîchir
+        </button>
+      </div>
+
+      <DbTable
+        title="Products"
+        data={tables.products}
+        columns={["id", "boutique", "asin", "titre", "categorie", "actif", "cree_le"]}
+      />
+
+      <DbTable
+        title="Snapshots"
+        data={tables.snapshots}
+        columns={["id", "produit_id", "scrape_le", "prix_actuel", "en_stock", "note", "statut_scrap"]}
+      />
+
+      <DbTable
+        title="Scrape Runs"
+        data={tables.scrape_runs}
+        columns={["id", "demarre_le", "termine_le", "statut", "nb_total", "nb_ok", "nb_echec"]}
+      />
+
+      <LogViewer logs={logs} />
+    </main>
+  );
+};
+
+export default DebugPage;

frontend/src/pages/HomePage.jsx

@@ -0,0 +1,35 @@
+import React, { useEffect } from "react";
+import useProductStore from "../stores/useProductStore";
+import ProductGrid from "../components/products/ProductGrid";
+
+const HomePage = () => {
+  const { products, loading, error, fetchProducts, clearError } = useProductStore();
+
+  useEffect(() => {
+    fetchProducts();
+  }, [fetchProducts]);
+
+  return (
+    <main className="home-page">
+      {error && (
+        <div className="error-banner">
+          <span>{error}</span>
+          <button onClick={clearError} className="btn-close">
+            <i className="fa-solid fa-times"></i>
+          </button>
+        </div>
+      )}
+
+      {loading && products.length === 0 ? (
+        <div className="loading-state">
+          <i className="fa-solid fa-spinner fa-spin"></i>
+          <p>Chargement des produits...</p>
+        </div>
+      ) : (
+        <ProductGrid products={products} />
+      )}
+    </main>
+  );
+};
+
+export default HomePage;

frontend/src/stores/useProductStore.js

@@ -0,0 +1,89 @@
+import { create } from "zustand";
+import * as api from "../api/client";
+
+const useProductStore = create((set, get) => ({
+  // State
+  products: [],
+  loading: false,
+  error: null,
+  scraping: {}, // { [productId]: true } pour les produits en cours de scraping
+
+  // Actions
+  fetchProducts: async () => {
+    set({ loading: true, error: null });
+    try {
+      const products = await api.fetchProducts();
+      set({ products, loading: false });
+    } catch (err) {
+      set({ error: err.message, loading: false });
+    }
+  },
+
+  addProduct: async (data) => {
+    set({ loading: true, error: null });
+    try {
+      const newProduct = await api.createProduct(data);
+      set((state) => ({
+        products: [newProduct, ...state.products],
+        loading: false,
+      }));
+      return newProduct;
+    } catch (err) {
+      set({ error: err.message, loading: false });
+      throw err;
+    }
+  },
+
+  deleteProduct: async (id) => {
+    set({ error: null });
+    try {
+      await api.deleteProduct(id);
+      set((state) => ({
+        products: state.products.filter((p) => p.id !== id),
+      }));
+    } catch (err) {
+      set({ error: err.message });
+      throw err;
+    }
+  },
+
+  scrapeProduct: async (id) => {
+    set((state) => ({
+      scraping: { ...state.scraping, [id]: true },
+      error: null,
+    }));
+    try {
+      const result = await api.scrapeProduct(id);
+      // Refresh la liste pour avoir les nouvelles données
+      await get().fetchProducts();
+      set((state) => {
+        const { [id]: _, ...rest } = state.scraping;
+        return { scraping: rest };
+      });
+      return result;
+    } catch (err) {
+      set((state) => {
+        const { [id]: _, ...rest } = state.scraping;
+        return { scraping: rest, error: err.message };
+      });
+      throw err;
+    }
+  },
+
+  scrapeAll: async () => {
+    set({ loading: true, error: null });
+    try {
+      const result = await api.scrapeAll();
+      await get().fetchProducts();
+      set({ loading: false });
+      return result;
+    } catch (err) {
+      set({ error: err.message, loading: false });
+      throw err;
+    }
+  },
+
+  clearError: () => set({ error: null }),
+}));
+
+export default useProductStore;

frontend/src/styles/global.scss

@@ -1,7 +1,15 @@
+// Gruvbox Dark Theme
 $bg: #282828;
+$bg-soft: #32302f;
 $text: #ebdbb2;
+$text-muted: #928374;
 $card: #3c3836;
+$card-hover: #504945;
 $accent: #fe8019;
+$accent-yellow: #fabd2f;
+$accent-green: #b8bb26;
+$accent-red: #fb4934;
+$accent-aqua: #8ec07c;
 
 * {
   box-sizing: border-box;
@@ -14,43 +22,573 @@ body {
   color: $text;
 }
 
+a {
+  color: $accent;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+// App Shell
 .app-shell {
   min-height: 100vh;
   background: $bg;
-  padding: 16px;
 }
 
+// Header
 .app-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-bottom: 16px;
+  padding: 16px 24px;
+  background: $bg-soft;
+  border-bottom: 1px solid $card;
+  position: sticky;
+  top: 0;
+  z-index: 100;
 }
 
 .brand {
   font-size: 1.5rem;
   font-weight: 600;
+  a {
+    color: $text;
+    &:hover {
+      color: $accent;
+      text-decoration: none;
+    }
+  }
 }
 
-.actions .btn {
+.nav-links {
+  display: flex;
+  gap: 8px;
+
+  a {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    border-radius: 8px;
+    color: $text-muted;
+    transition: all 0.2s;
+
+    &:hover {
+      background: $card;
+      color: $text;
+      text-decoration: none;
+    }
+
+    &.active {
+      background: $card;
+      color: $accent;
+    }
+  }
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   background: $card;
   border: none;
   color: $text;
   padding: 8px 16px;
-  margin-left: 8px;
-  border-radius: 999px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 0.9rem;
+
+  &:hover {
+    background: $card-hover;
   }
 
-.app-grid {
+  &.btn-primary {
+    background: $accent;
+    color: $bg;
+    font-weight: 500;
+
+    &:hover {
+      filter: brightness(1.1);
+    }
+  }
+}
+
+// Home Page
+.home-page {
+  padding: 24px;
+}
+
+.product-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+  gap: 20px;
 }
 
 .empty-state {
   background: $card;
-  border-radius: 16px;
-  padding: 32px;
+  border-radius: 12px;
+  padding: 64px 32px;
   text-align: center;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+
+  .empty-icon {
+    font-size: 3rem;
+    color: $text-muted;
+    margin-bottom: 16px;
+  }
+
+  p {
+    color: $text-muted;
+    font-size: 1.1rem;
+    margin: 8px 0;
+  }
+
+  .hint {
+    font-size: 0.9rem;
+  }
+}
+
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 64px;
+  color: $text-muted;
+
+  i {
+    font-size: 2rem;
+    margin-bottom: 16px;
+  }
+}
+
+.error-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: rgba($accent-red, 0.15);
+  color: $accent-red;
+  padding: 12px 16px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+
+  .btn-close {
+    background: none;
+    border: none;
+    color: $accent-red;
+    cursor: pointer;
+    padding: 4px 8px;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+}
+
+// Product Card
+.product-card {
+  background: $card;
+  border-radius: 12px;
+  overflow: hidden;
+  transition: transform 0.2s, box-shadow 0.2s;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+  }
+}
+
+.product-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: $bg-soft;
+  border-bottom: 1px solid $bg;
+
+  .boutique {
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: $accent;
+  }
+
+  .status {
+    font-size: 0.75rem;
+    padding: 2px 8px;
+    border-radius: 4px;
+
+    &.active {
+      background: rgba($accent-green, 0.2);
+      color: $accent-green;
+    }
+
+    &.inactive {
+      background: rgba($text-muted, 0.2);
+      color: $text-muted;
+    }
+  }
+}
+
+.product-body {
+  display: flex;
+  gap: 16px;
+  padding: 16px;
+}
+
+.product-image {
+  flex-shrink: 0;
+  width: 100px;
+  height: 100px;
+  background: $bg;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+
+  .no-image {
+    color: $text-muted;
+    font-size: 2rem;
+  }
+}
+
+.product-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.product-title {
+  font-size: 0.95rem;
+  font-weight: 500;
+  margin: 0 0 8px 0;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.product-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 8px;
+
+  .asin {
+    font-size: 0.75rem;
+    color: $text-muted;
+    font-family: monospace;
+  }
+
+  .category {
+    font-size: 0.75rem;
+    background: $bg;
+    padding: 2px 8px;
+    border-radius: 4px;
+    color: $accent-yellow;
+  }
+}
+
+.product-link {
+  font-size: 0.8rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.product-actions {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid $bg;
+  background: $bg-soft;
+
+  .btn-scrape {
+    flex: 1;
+  }
+
+  .btn-delete {
+    background: rgba($accent-red, 0.15);
+    color: $accent-red;
+
+    &:hover {
+      background: rgba($accent-red, 0.25);
+    }
+  }
+}
+
+// Modal
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+  padding: 20px;
+}
+
+.modal {
+  background: $card;
+  border-radius: 12px;
+  width: 100%;
+  max-width: 500px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid $bg;
+
+  h2 {
+    margin: 0;
+    font-size: 1.2rem;
+  }
+
+  .btn-close {
+    background: none;
+    border: none;
+    color: $text-muted;
+    cursor: pointer;
+    padding: 8px;
+    font-size: 1.1rem;
+
+    &:hover {
+      color: $text;
+    }
+  }
+}
+
+.modal-body {
+  padding: 24px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+
+  label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+    color: $text;
+  }
+
+  input, select, textarea {
+    width: 100%;
+    padding: 12px 16px;
+    background: $bg;
+    border: 1px solid $card-hover;
+    border-radius: 8px;
+    color: $text;
+    font-size: 0.95rem;
+
+    &:focus {
+      outline: none;
+      border-color: $accent;
+    }
+
+    &::placeholder {
+      color: $text-muted;
+    }
+  }
+
+  .form-hint {
+    margin-top: 6px;
+    font-size: 0.8rem;
+    color: $text-muted;
+  }
+}
+
+.form-error {
+  background: rgba($accent-red, 0.15);
+  color: $accent-red;
+  padding: 12px 16px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  font-size: 0.9rem;
+}
+
+.modal-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  margin-top: 24px;
+}
+
+// Button states
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+// Debug Page
+.debug-page {
+  padding: 24px;
+  max-width: 1600px;
+  margin: 0 auto;
+
+  h2 {
+    margin: 0 0 24px 0;
+    color: $text;
+  }
+
+  .error {
+    color: $accent-red;
+    background: rgba($accent-red, 0.1);
+    padding: 12px 16px;
+    border-radius: 8px;
+    margin-bottom: 16px;
+  }
+}
+
+.debug-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+
+  h2 {
+    margin: 0;
+  }
+}
+
+.debug-table {
+  background: $card;
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 24px;
+
+  h3 {
+    margin: 0 0 16px 0;
+    color: $accent;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .empty {
+    color: $text-muted;
+    font-style: italic;
+  }
+
+  .table-wrapper {
+    overflow-x: auto;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.85rem;
+
+    th, td {
+      padding: 10px 12px;
+      text-align: left;
+      border-bottom: 1px solid $bg;
+    }
+
+    th {
+      background: $bg-soft;
+      color: $text-muted;
+      font-weight: 500;
+      text-transform: uppercase;
+      font-size: 0.75rem;
+      letter-spacing: 0.5px;
+    }
+
+    tr:hover td {
+      background: $card-hover;
+    }
+
+    td {
+      max-width: 200px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
+.debug-logs {
+  background: $card;
+  border-radius: 12px;
+  padding: 20px;
+
+  h3 {
+    margin: 0 0 16px 0;
+    color: $accent;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .empty {
+    color: $text-muted;
+    font-style: italic;
+  }
+
+  .logs-wrapper {
+    max-height: 500px;
+    overflow-y: auto;
+  }
+
+  .log-entry {
+    background: $bg;
+    padding: 12px;
+    margin-bottom: 8px;
+    border-radius: 6px;
+    font-family: "JetBrains Mono", "Fira Code", monospace;
+    font-size: 0.8rem;
+    overflow-x: auto;
+    border-left: 3px solid $text-muted;
+
+    &.error, &.ERROR {
+      border-left-color: $accent-red;
+    }
+
+    &.warning, &.WARNING {
+      border-left-color: $accent-yellow;
+    }
+
+    &.info, &.INFO {
+      border-left-color: $accent-aqua;
+    }
+
+    &.success, &.SUCCESS {
+      border-left-color: $accent-green;
+    }
+  }
+}
+
+// Scrollbar styling
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: $bg;
+}
+
+::-webkit-scrollbar-thumb {
+  background: $card-hover;
+  border-radius: 4px;
+
+  &:hover {
+    background: $text-muted;
+  }
 }