feat: Add initial application structure, core data models, and a new catalog module with Bonial scraping capabilities.

frontend/src/App.jsx

@@ -5,6 +5,7 @@ import Layout from '@/components/layout/Layout'
 import Dashboard from '@/pages/Dashboard'
 import Search from '@/pages/Search'
 import MultiSearch from '@/pages/MultiSearch'
+import Catalogues from '@/pages/Catalogues'
 import Login from '@/pages/Login'
 import Admin from '@/pages/Admin'
 import { useTheme } from '@/hooks/use-theme'
@@ -77,6 +78,7 @@ function AppRoutes() {
                                     <Route path="/" element={<Dashboard />} />
                                     <Route path="/search" element={<Search />} />
                                     <Route path="/compare" element={<MultiSearch />} />
+                                    <Route path="/catalogues" element={<Catalogues />} />
                                     <Route
                                         path="/admin"
                                         element={

frontend/src/components/dashboard/CatalogueAdmin.jsx

@@ -0,0 +1,229 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { toast } from 'sonner';
+import { Loader2, Play, Clock, CheckCircle2, XCircle, AlertCircle } from 'lucide-react';
+
+const API_BASE = '/api/catalogues/admin';
+
+export default function CatalogueAdmin() {
+    const [loading, setLoading] = useState(false);
+    const [scraping, setScraping] = useState(false);
+    const [logs, setLogs] = useState([]);
+    const [stats, setStats] = useState(null);
+    const [enseignes, setEnseignes] = useState([]);
+
+    useEffect(() => {
+        loadEnseignes();
+        loadStats();
+        loadLogs();
+    }, []);
+
+    const loadEnseignes = async () => {
+        try {
+            const response = await axios.get('/api/catalogues/enseignes');
+            setEnseignes(response.data);
+        } catch (error) {
+            console.error('Error loading enseignes:', error);
+        }
+    };
+
+    const loadStats = async () => {
+        try {
+            const response = await axios.get(`${API_BASE}/stats`);
+            setStats(response.data);
+        } catch (error) {
+            console.error('Error loading stats:', error);
+        }
+    };
+
+    const loadLogs = async () => {
+        setLoading(true);
+        try {
+            const response = await axios.get(`${API_BASE}/scraping/logs?limit=20`);
+            setLogs(response.data);
+        } catch (error) {
+            console.error('Error loading logs:', error);
+            toast.error('Erreur lors du chargement des logs');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const triggerScraping = async (enseigneId = null) => {
+        setScraping(true);
+        try {
+            const params = enseigneId ? { enseigne_id: enseigneId } : {};
+            const response = await axios.post(`${API_BASE}/scraping/trigger`, null, { params });
+
+            toast.success(response.data.message);
+            toast.info(`${response.data.catalogues_nouveaux} nouveaux catalogues trouvés`);
+
+            // Reload data
+            await Promise.all([loadStats(), loadLogs()]);
+        } catch (error) {
+            console.error('Error triggering scraping:', error);
+            toast.error('Erreur lors du déclenchement du scraping');
+        } finally {
+            setScraping(false);
+        }
+    };
+
+    const getStatusIcon = (status) => {
+        switch (status) {
+            case 'success':
+                return <CheckCircle2 className="h-5 w-5 text-green-500" />;
+            case 'error':
+                return <XCircle className="h-5 w-5 text-red-500" />;
+            case 'partial':
+                return <AlertCircle className="h-5 w-5 text-yellow-500" />;
+            default:
+                return <Clock className="h-5 w-5 text-gray-500" />;
+        }
+    };
+
+    const formatDate = (dateString) => {
+        const date = new Date(dateString);
+        return date.toLocaleString('fr-FR');
+    };
+
+    return (
+        <div className="space-y-6">
+            <div>
+                <h2 className="text-2xl font-bold mb-2">Administration Catalogues</h2>
+                <p className="text-muted-foreground">Gérer le scraping des catalogues Bonial</p>
+            </div>
+
+            {/* Stats Cards */}
+            {stats && (
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div className="bg-card rounded-lg border p-6">
+                        <h3 className="text-sm font-medium text-muted-foreground mb-2">Total Catalogues</h3>
+                        <p className="text-3xl font-bold">{stats.total_catalogues}</p>
+                    </div>
+                    <div className="bg-card rounded-lg border p-6">
+                        <h3 className="text-sm font-medium text-muted-foreground mb-2">Dernière Mise à Jour</h3>
+                        <p className="text-lg font-medium">
+                            {stats.derniere_mise_a_jour
+                                ? formatDate(stats.derniere_mise_a_jour)
+                                : 'Jamais'}
+                        </p>
+                    </div>
+                    <div className="bg-card rounded-lg border p-6">
+                        <h3 className="text-sm font-medium text-muted-foreground mb-2">Prochaine Exécution</h3>
+                        <p className="text-lg font-medium">{stats.prochaine_execution}</p>
+                    </div>
+                </div>
+            )}
+
+            {/* Manual Scraping */}
+            <div className="bg-card rounded-lg border p-6">
+                <h3 className="text-lg font-semibold mb-4">Scraping Manuel</h3>
+                <div className="space-y-4">
+                    <button
+                        onClick={() => triggerScraping()}
+                        disabled={scraping}
+                        className="w-full md:w-auto px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 flex items-center gap-2"
+                    >
+                        {scraping ? (
+                            <>
+                                <Loader2 className="h-5 w-5 animate-spin" />
+                                Scraping en cours...
+                            </>
+                        ) : (
+                            <>
+                                <Play className="h-5 w-5" />
+                                Scraper toutes les enseignes
+                            </>
+                        )}
+                    </button>
+
+                    <div className="border-t pt-4">
+                        <p className="text-sm text-muted-foreground mb-3">Ou scraper une enseigne spécifique:</p>
+                        <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
+                            {enseignes.map(enseigne => (
+                                <button
+                                    key={enseigne.id}
+                                    onClick={() => triggerScraping(enseigne.id)}
+                                    disabled={scraping}
+                                    className="px-4 py-2 rounded-lg border hover:bg-secondary disabled:opacity-50 text-left"
+                                >
+                                    <div className="font-medium">{enseigne.nom}</div>
+                                    <div className="text-xs text-muted-foreground">
+                                        {enseigne.catalogues_actifs_count} catalogue(s)
+                                    </div>
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Catalogues par Enseigne */}
+            {stats && (
+                <div className="bg-card rounded-lg border p-6">
+                    <h3 className="text-lg font-semibold mb-4">Catalogues par Enseigne</h3>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        {Object.entries(stats.catalogues_par_enseigne).map(([nom, count]) => (
+                            <div key={nom} className="flex justify-between items-center p-3 rounded-lg bg-secondary">
+                                <span className="font-medium">{nom}</span>
+                                <span className="text-lg font-bold text-primary">{count}</span>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {/* Scraping Logs */}
+            <div className="bg-card rounded-lg border p-6">
+                <div className="flex justify-between items-center mb-4">
+                    <h3 className="text-lg font-semibold">Historique des Scraping</h3>
+                    <button
+                        onClick={loadLogs}
+                        disabled={loading}
+                        className="px-3 py-1 text-sm rounded-lg border hover:bg-secondary"
+                    >
+                        Actualiser
+                    </button>
+                </div>
+
+                {loading ? (
+                    <div className="flex justify-center py-8">
+                        <Loader2 className="h-6 w-6 animate-spin text-primary" />
+                    </div>
+                ) : logs.length === 0 ? (
+                    <p className="text-center text-muted-foreground py-8">Aucun log disponible</p>
+                ) : (
+                    <div className="space-y-2">
+                        {logs.map(log => (
+                            <div
+                                key={log.id}
+                                className="flex items-start gap-3 p-4 rounded-lg border hover:bg-secondary/50 transition-colors"
+                            >
+                                <div className="mt-0.5">
+                                    {getStatusIcon(log.statut)}
+                                </div>
+                                <div className="flex-1 min-w-0">
+                                    <div className="flex items-center gap-2 mb-1">
+                                        <span className="font-medium">{log.enseigne_nom || 'Toutes'}</span>
+                                        <span className="text-xs text-muted-foreground">
+                                            {formatDate(log.date_execution)}
+                                        </span>
+                                    </div>
+                                    <div className="text-sm text-muted-foreground">
+                                        {log.catalogues_trouves} trouvé(s) • {log.catalogues_nouveaux} nouveau(x)
+                                        {log.duree_secondes && ` • ${log.duree_secondes.toFixed(1)}s`}
+                                    </div>
+                                    {log.message_erreur && (
+                                        <div className="text-sm text-red-500 mt-1">
+                                            {log.message_erreur}
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

frontend/src/components/layout/Layout.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { LayoutDashboard, Search, TrendingUp, Moon, Sun, Menu, LogOut, Shield } from 'lucide-react';
+import { LayoutDashboard, Search, TrendingUp, BookOpen, Moon, Sun, Menu, LogOut, Shield } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { cn } from '@/lib/utils';
@@ -23,6 +23,7 @@ const Layout = ({ children, theme, toggleTheme }) => {
         { icon: LayoutDashboard, label: t('nav.dashboard'), path: '/' },
         { icon: Search, label: t('nav.search') || 'Recherche', path: '/search' },
         { icon: TrendingUp, label: 'Comparateur', path: '/compare' },
+        { icon: BookOpen, label: 'Catalogues', path: '/catalogues' },
     ];
 
     // Add admin link for admin users

frontend/src/pages/Admin.jsx

@@ -7,7 +7,7 @@ import {
     Settings as SettingsIcon, Cpu, Clock, Bell, Globe,
     ChevronDown, ChevronUp, RefreshCw, RotateCcw, Edit2,
     Sparkles, Eye, Code, Brain, DollarSign, Filter,
-    TrendingDown, CheckCircle2, Package, Bug, Download
+    TrendingDown, CheckCircle2, Package, Bug, Download, BookOpen
 } from 'lucide-react';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
@@ -18,6 +18,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Slider } from '@/components/ui/slider';
 import { cn } from '@/lib/utils';
 import { useAuth } from '@/hooks/use-auth';
+import CatalogueAdmin from '@/components/dashboard/CatalogueAdmin';
 
 const API_URL = '/api';
 
@@ -495,6 +496,7 @@ export default function Admin() {
         { id: 'sites', label: 'Sites', icon: Globe },
         { id: 'jobs', label: 'Jobs', icon: Clock },
         { id: 'notifications', label: 'Notifications', icon: Bell },
+        { id: 'catalogues', label: 'Catalogues', icon: BookOpen },
         { id: 'debug', label: 'Debug', icon: Bug },
     ];
 
@@ -1120,6 +1122,9 @@ export default function Admin() {
                     </CardContent>
                 </Card>
             )}
-        </div >
+
+            {/* Catalogues Tab */}
+            {activeTab === 'catalogues' && <CatalogueAdmin />}
+        </div>
     );
 }

frontend/src/pages/Catalogues.jsx

@@ -0,0 +1,323 @@
+import React, { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { Loader2, Calendar, BookOpen, Search, ChevronRight, Eye } from 'lucide-react';
+import axios from 'axios';
+
+const API_BASE = '/api/catalogues';
+
+export default function Catalogues() {
+    const [loading, setLoading] = useState(true);
+    const [enseignes, setEnseignes] = useState([]);
+    const [catalogues, setCatalogues] = useState([]);
+    const [selectedEnseigne, setSelectedEnseigne] = useState(null);
+    const [pagination, setPagination] = useState({ page: 1, limit: 12, total: 0 });
+    const [selectedCatalogue, setSelectedCatalogue] = useState(null);
+    const [cataloguePages, setCataloguePages] = useState([]);
+    const [searchQuery, setSearchQuery] = useState('');
+
+    useEffect(() => {
+        loadEnseignes();
+        loadCatalogues();
+    }, []);
+
+    useEffect(() => {
+        loadCatalogues();
+    }, [pagination.page, selectedEnseigne, searchQuery]);
+
+    const loadEnseignes = async () => {
+        try {
+            const response = await axios.get(`${API_BASE}/enseignes`);
+            setEnseignes(response.data);
+        } catch (error) {
+            console.error('Error loading enseignes:', error);
+            toast.error('Erreur lors du chargement des enseignes');
+        }
+    };
+
+    const loadCatalogues = async () => {
+        setLoading(true);
+        try {
+            const params = {
+                page: pagination.page,
+                limit: pagination.limit,
+                statut: 'actif',
+            };
+
+            if (selectedEnseigne) {
+                params.enseigne_ids = selectedEnseigne.id.toString();
+            }
+
+            if (searchQuery) {
+                params.recherche = searchQuery;
+            }
+
+            const response = await axios.get(API_BASE, { params });
+            setCatalogues(response.data.data);
+            setPagination(prev => ({ ...prev, total: response.data.pagination.total }));
+        } catch (error) {
+            console.error('Error loading catalogues:', error);
+            toast.error('Erreur lors du chargement des catalogues');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const loadCataloguePages = async (catalogueId) => {
+        try {
+            const response = await axios.get(`${API_BASE}/${catalogueId}/pages`);
+            setCataloguePages(response.data);
+        } catch (error) {
+            console.error('Error loading pages:', error);
+            toast.error('Erreur lors du chargement des pages');
+        }
+    };
+
+    const openCatalogue = (catalogue) => {
+        setSelectedCatalogue(catalogue);
+        loadCataloguePages(catalogue.id);
+    };
+
+    const closeCatalogue = () => {
+        setSelectedCatalogue(null);
+        setCataloguePages([]);
+    };
+
+    const formatDate = (dateString) => {
+        const date = new Date(dateString);
+        return date.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' });
+    };
+
+    const isValidNow = (catalogue) => {
+        const now = new Date();
+        const debut = new Date(catalogue.date_debut);
+        const fin = new Date(catalogue.date_fin);
+        return now >= debut && now <= fin;
+    };
+
+    return (
+        <div className="p-6 max-w-7xl mx-auto">
+            {/* Header */}
+            <div className="mb-8">
+                <h1 className="text-3xl font-bold mb-2">Catalogues Promotionnels</h1>
+                <p className="text-muted-foreground">
+                    Consultez les catalogues et prospectus des enseignes discount
+                </p>
+            </div>
+
+            {/* Search Bar */}
+            <div className="mb-6">
+                <div className="relative">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                    <input
+                        type="text"
+                        placeholder="Rechercher dans les catalogues..."
+                        className="w-full pl-10 pr-4 py-3 rounded-lg border bg-background"
+                        value={searchQuery}
+                        onChange={(e) => {
+                            setSearchQuery(e.target.value);
+                            setPagination(prev => ({ ...prev, page: 1 }));
+                        }}
+                    />
+                </div>
+            </div>
+
+            {/* Enseignes Filter */}
+            <div className="mb-6">
+                <div className="flex gap-2 overflow-x-auto pb-2">
+                    <button
+                        onClick={() => {
+                            setSelectedEnseigne(null);
+                            setPagination(prev => ({ ...prev, page: 1 }));
+                        }}
+                        className={`px-4 py-2 rounded-lg whitespace-nowrap transition-colors ${!selectedEnseigne
+                                ? 'bg-primary text-primary-foreground'
+                                : 'bg-secondary hover:bg-secondary/80'
+                            }`}
+                    >
+                        Toutes les enseignes
+                    </button>
+                    {enseignes.map(enseigne => (
+                        <button
+                            key={enseigne.id}
+                            onClick={() => {
+                                setSelectedEnseigne(enseigne);
+                                setPagination(prev => ({ ...prev, page: 1 }));
+                            }}
+                            className={`px-4 py-2 rounded-lg whitespace-nowrap transition-colors ${selectedEnseigne?.id === enseigne.id
+                                    ? 'bg-primary text-primary-foreground'
+                                    : 'bg-secondary hover:bg-secondary/80'
+                                }`}
+                            style={
+                                selectedEnseigne?.id === enseigne.id
+                                    ? { backgroundColor: enseigne.couleur, color: 'white' }
+                                    : {}
+                            }
+                        >
+                            {enseigne.nom}
+                            {enseigne.catalogues_actifs_count > 0 && (
+                                <span className="ml-2 px-2 py-0.5 rounded-full bg-white/20 text-xs">
+                                    {enseigne.catalogues_actifs_count}
+                                </span>
+                            )}
+                        </button>
+                    ))}
+                </div>
+            </div>
+
+            {/* Catalogues Grid */}
+            {loading ? (
+                <div className="flex justify-center items-center py-20">
+                    <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                </div>
+            ) : catalogues.length === 0 ? (
+                <div className="text-center py-20">
+                    <BookOpen className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+                    <h3 className="text-lg font-medium mb-2">Aucun catalogue trouvé</h3>
+                    <p className="text-muted-foreground">
+                        {searchQuery
+                            ? 'Aucun catalogue ne correspond à votre recherche'
+                            : 'Aucun catalogue disponible pour le moment'}
+                    </p>
+                </div>
+            ) : (
+                <>
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                        {catalogues.map(catalogue => (
+                            <div
+                                key={catalogue.id}
+                                className="group bg-card rounded-lg border overflow-hidden hover:shadow-lg transition-all cursor-pointer"
+                                onClick={() => openCatalogue(catalogue)}
+                            >
+                                {/* Cover Image */}
+                                <div className="relative aspect-[3/4] overflow-hidden bg-secondary">
+                                    <img
+                                        src={catalogue.image_couverture_url}
+                                        alt={catalogue.titre}
+                                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                                    />
+                                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
+                                        <div className="absolute bottom-4 left-4 right-4 text-white">
+                                            <Eye className="h-5 w-5 mx-auto mb-2" />
+                                            <p className="text-sm text-center">Voir le catalogue</p>
+                                        </div>
+                                    </div>
+                                    {isValidNow(catalogue) && (
+                                        <div className="absolute top-2 right-2">
+                                            <span className="px-2 py-1 rounded-full bg-green-500 text-white text-xs font-medium">
+                                                En cours
+                                            </span>
+                                        </div>
+                                    )}
+                                </div>
+
+                                {/* Content */}
+                                <div className="p-4">
+                                    {/* Enseigne Badge */}
+                                    <div
+                                        className="inline-block px-3 py-1 rounded-full text-white text-xs font-medium mb-2"
+                                        style={{ backgroundColor: catalogue.enseigne.couleur }}
+                                    >
+                                        {catalogue.enseigne.nom}
+                                    </div>
+
+                                    {/* Title */}
+                                    <h3 className="font-semibold text-base mb-2 line-clamp-2">
+                                        {catalogue.titre}
+                                    </h3>
+
+                                    {/* Dates */}
+                                    <div className="flex items-center gap-1 text-sm text-muted-foreground mb-2">
+                                        <Calendar className="h-4 w-4" />
+                                        <span>
+                                            {formatDate(catalogue.date_debut)} - {formatDate(catalogue.date_fin)}
+                                        </span>
+                                    </div>
+
+                                    {/* Pages */}
+                                    <div className="flex items-center gap-1 text-sm text-muted-foreground">
+                                        <BookOpen className="h-4 w-4" />
+                                        <span>{catalogue.nombre_pages} pages</span>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* Pagination */}
+                    {pagination.total > pagination.limit && (
+                        <div className="mt-8 flex justify-center items-center gap-2">
+                            <button
+                                onClick={() => setPagination(prev => ({ ...prev, page: prev.page - 1 }))}
+                                disabled={pagination.page === 1}
+                                className="px-4 py-2 rounded-lg border bg-background disabled:opacity-50"
+                            >
+                                Précédent
+                            </button>
+                            <span className="px-4 py-2 text-sm text-muted-foreground">
+                                Page {pagination.page} sur {Math.ceil(pagination.total / pagination.limit)}
+                            </span>
+                            <button
+                                onClick={() => setPagination(prev => ({ ...prev, page: prev.page + 1 }))}
+                                disabled={pagination.page >= Math.ceil(pagination.total / pagination.limit)}
+                                className="px-4 py-2 rounded-lg border bg-background disabled:opacity-50"
+                            >
+                                Suivant
+                            </button>
+                        </div>
+                    )}
+                </>
+            )}
+
+            {/* Catalogue Viewer Modal */}
+            {selectedCatalogue && (
+                <div className="fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4">
+                    <div className="bg-background rounded-lg max-w-4xl w-full max-h-[90vh] flex flex-col">
+                        {/* Header */}
+                        <div className="p-4 border-b flex justify-between items-start">
+                            <div>
+                                <h2 className="text-xl font-bold mb-1">{selectedCatalogue.titre}</h2>
+                                <p className="text-sm text-muted-foreground">
+                                    {selectedCatalogue.enseigne.nom} • {cataloguePages.length} pages
+                                </p>
+                            </div>
+                            <button
+                                onClick={closeCatalogue}
+                                className="px-4 py-2 rounded-lg hover:bg-secondary"
+                            >
+                                Fermer
+                            </button>
+                        </div>
+
+                        {/* Pages Viewer */}
+                        <div className="flex-1 overflow-y-auto p-4">
+                            {cataloguePages.length === 0 ? (
+                                <div className="flex justify-center py-20">
+                                    <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                                </div>
+                            ) : (
+                                <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+                                    {cataloguePages.map(page => (
+                                        <div
+                                            key={page.id}
+                                            className="relative aspect-[3/4] rounded-lg overflow-hidden border cursor-pointer hover:shadow-lg transition-shadow"
+                                            onClick={() => window.open(page.image_url, '_blank')}
+                                        >
+                                            <img
+                                                src={page.image_url}
+                                                alt={`Page ${page.numero_page}`}
+                                                className="w-full h-full object-cover"
+                                            />
+                                            <div className="absolute top-2 left-2 px-2 py-1 rounded bg-black/70 text-white text-xs font-medium">
+                                                Page {page.numero_page}
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}