mirror of
https://github.com/R0m1k3/Priceflow.git
synced 2026-10-18 20:58:59 +02:00
feat: Add initial application structure, core data models, and a new catalog module with Bonial scraping capabilities.
This commit is contained in:
Michael committed
1 parent
906c6b483d
commit
58e6be3f0d
17 files changed
+2483
-7
No files matched your search
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user