feat: add debug page with tables and logs viewer (Step 1)

Backend:
- Add /debug/tables endpoint to dump SQLite tables
- Add /debug/logs endpoint to read scrap.log

Frontend:
- Add react-router-dom for navigation
- Create HomePage and DebugPage components
- Add navigation bar with Debug link
- Style debug page with Gruvbox theme
- Fix package.json dependencies versions

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,39 @@
 import React from "react";
+import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom";
+import HomePage from "./pages/HomePage";
+import DebugPage from "./pages/DebugPage";
 
 const App = () => (
+  <BrowserRouter>
     <div className="app-shell">
       <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="/" 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">
+            <i className="fa-solid fa-plus"></i> Add Product
+          </button>
+          <button className="btn">
+            <i className="fa-solid fa-refresh"></i> Refresh
+          </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>
+
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/debug" element={<DebugPage />} />
+      </Routes>
     </div>
+  </BrowserRouter>
 );
 
 export default App;

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,11 @@
+import React from "react";
+
+const HomePage = () => (
+  <main className="app-grid">
+    <section className="empty-state">
+      <p>Aucun produit pour l'instant, ajoutez un lien Amazon.fr !</p>
+    </section>
+  </main>
+);
+
+export default HomePage;

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,276 @@ 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;
   }
 
+  &.btn-primary {
+    background: $accent;
+    color: $bg;
+    font-weight: 500;
+
+    &:hover {
+      filter: brightness(1.1);
+    }
+  }
+}
+
+// Home Page
 .app-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 20px;
+  padding: 24px;
 }
 
 .empty-state {
+  grid-column: 1 / -1;
   background: $card;
-  border-radius: 16px;
-  padding: 32px;
+  border-radius: 12px;
+  padding: 48px 32px;
   text-align: center;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+
+  p {
+    color: $text-muted;
+    font-size: 1.1rem;
+  }
+}
+
+// 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;
+  }
 }