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>

frontend/src/App.jsx

@@ -1,17 +1,35 @@
-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 = () => (
+const Header = () => {
-  <BrowserRouter>
+  const { fetchProducts, scrapeAll, loading } = useProductStore();
-    <div className="app-shell">
+  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">
           <NavLink to="/">suivi_produits</NavLink>
         </div>
         <nav className="nav-links">
-          <NavLink to="/" className={({ isActive }) => isActive ? "active" : ""}>
+          <NavLink to="/" end className={({ isActive }) => isActive ? "active" : ""}>
             <i className="fa-solid fa-home"></i> Accueil
           </NavLink>
           <NavLink to="/debug" className={({ isActive }) => isActive ? "active" : ""}>
@@ -19,15 +37,29 @@ const App = () => (
           </NavLink>
         </nav>
         <div className="actions">
-          <button className="btn btn-primary">
+          <button className="btn btn-primary" onClick={() => setShowAddModal(true)}>
             <i className="fa-solid fa-plus"></i> Add Product
           </button>
-          <button className="btn">
+          <button className="btn" onClick={handleScrapeAll} disabled={loading}>
-            <i className="fa-solid fa-refresh"></i> Refresh
+            <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>
 
+      {showAddModal && (
+        <AddProductModal onClose={() => setShowAddModal(false)} />
+      )}
+    </>
+  );
+};
+
+const App = () => (
+  <BrowserRouter>
+    <div className="app-shell">
+      <Header />
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/debug" element={<DebugPage />} />

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 () => {
+// Helper pour gérer les erreurs
-  // point d'entrée simple vers l'API FastAPI
+const handleResponse = async (response) => {
-  const response = await fetch(`${BASE_URL}/products`);
+  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/pages/HomePage.jsx

@@ -1,11 +1,35 @@
-import React from "react";
+import React, { useEffect } from "react";
+import useProductStore from "../stores/useProductStore";
+import ProductGrid from "../components/products/ProductGrid";
 
-const HomePage = () => (
+const HomePage = () => {
-  <main className="app-grid">
+  const { products, loading, error, fetchProducts, clearError } = useProductStore();
-    <section className="empty-state">
+
-      <p>Aucun produit pour l'instant, ajoutez un lien Amazon.fr !</p>
+  useEffect(() => {
-    </section>
+    fetchProducts();
-  </main>
+  }, [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

@@ -121,24 +121,321 @@ a {
 }
 
 // Home Page
-.app-grid {
+.home-page {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-  gap: 20px;
   padding: 24px;
 }
 
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+  gap: 20px;
+}
+
 .empty-state {
-  grid-column: 1 / -1;
   background: $card;
   border-radius: 12px;
-  padding: 48px 32px;
+  padding: 64px 32px;
   text-align: center;
 
+  .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