Michael/Priceflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/Priceflow.git synced 2026-10-23 23:28:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Rebranding PriceFlow + OpenRouter + i18n FR + Docker

Browse Source 
Modifications majeures:

1. Rebranding: Pricecious → PriceFlow
   - Mise à jour du titre, logo et noms de projet

2. Intégration OpenRouter
   - Ajout comme provider IA avec filtres (chat, vision, code, reasoning, free)
   - Récupération dynamique des modèles et coûts
   - Service et router dédiés (/api/openrouter/models)

3. Internationalisation (i18n)
   - Installation i18next + react-i18next
   - Application entièrement traduite en français
   - Fichier de traduction: fr.json

4. Configuration Docker
   - docker-compose.yml avec réseau nginx_default (external)
   - PostgreSQL sur port 5488:5432
   - Browserless sur port 3012:3000
   - init.sql pour initialisation de la base de données
   - .env.example avec variables documentées

5. Favicon
   - Documentation ajoutée dans index.html pour faciliter le remplacement
This commit is contained in:
Claude committed 2025-11-22 09:22:39 +00:00
1 parent afed10abc5
commit d6c39252f2
19 files changed
+914 -76
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/dashboard/DeleteConfirmationModal.jsx
+7 -4
View File
@@ -1,20 +1,23 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
export function DeleteConfirmationModal({ item, onClose, onConfirm, open }) {
const { t } = useTranslation();
return (
<Dialog open={open} onOpenChange={onClose}>
<DialogContent>
<DialogHeader>
<DialogTitle>Delete Item</DialogTitle>
<DialogTitle>{t('dashboard.delete')}</DialogTitle>
<DialogDescription>
Are you sure you want to delete <span className="font-semibold text-foreground">{item?.name}</span>? This action cannot be undone.
{t('dashboard.confirmDelete')} <span className="font-semibold text-foreground">{item?.name}</span> ? {t('dashboard.deleteWarning')}
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="outline" onClick={onClose}>Cancel</Button>
<Button variant="destructive" onClick={onConfirm}>Delete</Button>
<Button variant="outline" onClick={onClose}>{t('dashboard.cancel')}</Button>
<Button variant="destructive" onClick={onConfirm}>{t('dashboard.confirm')}</Button>
</DialogFooter>
</DialogContent>
</Dialog>
frontend/src/components/dashboard/ItemCard.jsx
+13 -10
View File
@@ -1,4 +1,5 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { ExternalLink, Edit2, RefreshCw, Trash2, AlertTriangle, Clock } from 'lucide-react';
import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
@@ -6,10 +7,12 @@ import { Marquee } from '@/components/ui/marquee';
import { cn } from '@/lib/utils';
export function ItemCard({ item, onEdit, onDelete, onCheck, onZoom }) {
const { t } = useTranslation();
const getStockStatus = (inStock) => {
if (inStock === true) return { label: 'In Stock', color: 'bg-green-500/90 text-white border-green-400/50' };
if (inStock === false) return { label: 'Out of Stock', color: 'bg-red-500/90 text-white border-red-400/50' };
return { label: 'Unknown', color: 'bg-zinc-500/90 text-white border-zinc-400/50' };
if (inStock === true) return { label: t('dashboard.inStock'), color: 'bg-green-500/90 text-white border-green-400/50' };
if (inStock === false) return { label: t('dashboard.outOfStock'), color: 'bg-red-500/90 text-white border-red-400/50' };
return { label: t('dashboard.stockUnknown'), color: 'bg-zinc-500/90 text-white border-zinc-400/50' };
};
const stockStatus = getStockStatus(item.in_stock);
@@ -29,7 +32,7 @@ export function ItemCard({ item, onEdit, onDelete, onCheck, onZoom }) {
</>
) : (
<div className="flex h-full w-full items-center justify-center text-sm text-zinc-400">
No screenshot
Pas de capture
</div>
)}
@@ -79,14 +82,14 @@ export function ItemCard({ item, onEdit, onDelete, onCheck, onZoom }) {
<div className="space-y-4">
<div>
<div className="mb-1 flex items-baseline justify-between">
<span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Price</span>
<span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('dashboard.currentPrice')}</span>
{item.target_price && (
<span className={cn("rounded px-2 py-0.5 text-xs font-medium",
item.current_price <= item.target_price
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
: 'bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400'
)}>
Target: ${item.target_price}
{t('dashboard.targetPrice')}: {item.target_price}€
</span>
)}
</div>
@@ -97,7 +100,7 @@ export function ItemCard({ item, onEdit, onDelete, onCheck, onZoom }) {
? 'text-green-600 dark:text-green-400'
: 'text-foreground'
)}>
{item.current_price ? `$${item.current_price}` : '---'}
{item.current_price ? `${item.current_price}€` : '---'}
</span>
</div>
@@ -114,7 +117,7 @@ export function ItemCard({ item, onEdit, onDelete, onCheck, onZoom }) {
/>
</div>
<div className="absolute -bottom-4 left-0 text-[10px] text-muted-foreground opacity-0 transition-opacity group-hover/confidence:opacity-100">
Price Confidence: {Math.round(item.current_price_confidence * 100)}%
{t('dashboard.confidence')} (prix): {Math.round(item.current_price_confidence * 100)}%
</div>
</div>
)}
@@ -145,12 +148,12 @@ export function ItemCard({ item, onEdit, onDelete, onCheck, onZoom }) {
<div className="flex items-center gap-3 text-[10px] text-muted-foreground">
<div className="flex items-center gap-1.5">
<Clock className="h-3 w-3" />
<span>{item.last_checked ? new Date(item.last_checked).toLocaleString() : 'Never'}</span>
<span>{item.last_checked ? new Date(item.last_checked).toLocaleString('fr-FR') : t('dashboard.never')}</span>
</div>
{item.last_error && (
<div className="flex items-center gap-1 text-destructive" title={item.last_error}>
<AlertTriangle className="h-3 w-3" />
<span className="max-w-[100px] truncate">Error</span>
<span className="max-w-[100px] truncate">{t('common.error')}</span>
</div>
)}
</div>
frontend/src/components/dashboard/ItemModal.jsx
+22 -20
View File
@@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { toast } from 'sonner';
import { useTranslation } from 'react-i18next';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
@@ -10,6 +11,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
const API_URL = '/api';
export function ItemModal({ item, onClose, onSaved, open }) {
const { t } = useTranslation();
const [formData, setFormData] = useState({
url: '',
name: '',
@@ -62,16 +64,16 @@ export function ItemModal({ item, onClose, onSaved, open }) {
if (item) {
await axios.put(`${API_URL}/items/${item.id}`, payload);
toast.success('Item updated');
toast.success(t('toast.itemUpdated'));
} else {
await axios.post(`${API_URL}/items`, payload);
toast.success('Item added');
toast.success(t('toast.itemCreated'));
}
onSaved();
onClose();
} catch (error) {
console.error('Error saving item:', error);
toast.error('Failed to save item');
toast.error(t('toast.itemError'));
}
};
@@ -79,33 +81,33 @@ export function ItemModal({ item, onClose, onSaved, open }) {
<Dialog open={open} onOpenChange={onClose}>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle>{item ? 'Edit Item' : 'Add New Item'}</DialogTitle>
<DialogTitle>{item ? t('itemModal.editTitle') : t('itemModal.addTitle')}</DialogTitle>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4 py-4">
<div className="space-y-2">
<Label htmlFor="url">URL</Label>
<Label htmlFor="url">{t('itemModal.url')}</Label>
<Input
id="url"
type="url"
required
placeholder="https://example.com/product"
placeholder={t('itemModal.urlPlaceholder')}
value={formData.url}
onChange={e => setFormData({ ...formData, url: e.target.value })}
/>
</div>
<div className="space-y-2">
<Label htmlFor="name">Name</Label>
<Label htmlFor="name">{t('itemModal.name')}</Label>
<Input
id="name"
required
placeholder="Product Name"
placeholder={t('itemModal.namePlaceholder')}
value={formData.name}
onChange={e => setFormData({ ...formData, name: e.target.value })}
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="target_price">Target Price ($)</Label>
<Label htmlFor="target_price">{t('itemModal.targetPrice')} (€)</Label>
<Input
id="target_price"
type="number"
@@ -116,26 +118,26 @@ export function ItemModal({ item, onClose, onSaved, open }) {
/>
</div>
<div className="space-y-2">
<Label htmlFor="selector">Selector (Optional)</Label>
<Label htmlFor="selector">{t('itemModal.selector')}</Label>
<Input
id="selector"
placeholder=".price-class"
placeholder={t('itemModal.selectorPlaceholder')}
value={formData.selector}
onChange={e => setFormData({ ...formData, selector: e.target.value })}
/>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="profile">Notification Profile</Label>
<Label htmlFor="profile">{t('itemModal.notificationProfile')}</Label>
<Select
value={formData.notification_profile_id}
onValueChange={(value) => setFormData({ ...formData, notification_profile_id: value })}
>
<SelectTrigger>
<SelectValue placeholder="Select a profile" />
<SelectValue placeholder={t('itemModal.selectProfile')} />
</SelectTrigger>
<SelectContent>
<SelectItem value="none">None</SelectItem>
<SelectItem value="none">{t('itemModal.noProfile')}</SelectItem>
{profiles.map(p => (
<SelectItem key={p.id} value={p.id.toString()}>{p.name}</SelectItem>
))}
@@ -143,27 +145,27 @@ export function ItemModal({ item, onClose, onSaved, open }) {
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="tags">Tags</Label>
<Label htmlFor="tags">{t('itemModal.tags')}</Label>
<Input
id="tags"
placeholder="tech, home, gift (comma separated)"
placeholder={t('itemModal.tagsPlaceholder')}
value={formData.tags}
onChange={e => setFormData({ ...formData, tags: e.target.value })}
/>
</div>
<div className="space-y-2">
<Label htmlFor="description">Description</Label>
<Label htmlFor="description">{t('itemModal.description')}</Label>
<textarea
id="description"
className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
placeholder="Add notes about this item..."
placeholder={t('itemModal.descriptionPlaceholder')}
value={formData.description}
onChange={e => setFormData({ ...formData, description: e.target.value })}
/>
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={onClose}>Cancel</Button>
<Button type="submit">Save Item</Button>
<Button type="button" variant="outline" onClick={onClose}>{t('common.cancel')}</Button>
<Button type="submit">{t('itemModal.save')}</Button>
</DialogFooter>
</form>
</DialogContent>
frontend/src/components/layout/Layout.jsx
+13 -11
View File
@@ -1,17 +1,19 @@
import React, { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { LayoutDashboard, Settings, Moon, Sun, Menu } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { cn } from '@/lib/utils';
const Layout = ({ children, theme, toggleTheme }) => {
const { t } = useTranslation();
const location = useLocation();
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const navItems = [
{ icon: LayoutDashboard, label: 'Dashboard', path: '/' },
{ icon: Settings, label: 'Settings', path: '/settings' },
{ icon: LayoutDashboard, label: t('nav.dashboard'), path: '/' },
{ icon: Settings, label: t('nav.settings'), path: '/settings' },
];
return (
@@ -21,9 +23,9 @@ const Layout = ({ children, theme, toggleTheme }) => {
<div className="flex h-full flex-col">
<div className="flex h-14 items-center border-b px-6">
<Link to="/" className="flex items-center gap-2 font-semibold">
<img src="/logo.png" alt="Pricecious Logo" className="h-8 w-8" />
<img src="/logo.png" alt="PriceFlow Logo" className="h-8 w-8" />
<span className="text-xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
Pricecious
PriceFlow
</span>
</Link>
</div>
@@ -54,12 +56,12 @@ const Layout = ({ children, theme, toggleTheme }) => {
{theme === 'dark' ? (
<>
<Sun className="h-4 w-4" />
<span>Light Mode</span>
<span>{t('nav.lightMode')}</span>
</>
) : (
<>
<Moon className="h-4 w-4" />
<span>Dark Mode</span>
<span>{t('nav.darkMode')}</span>
</>
)}
</Button>
@@ -78,7 +80,7 @@ const Layout = ({ children, theme, toggleTheme }) => {
<SheetContent side="left" className="w-64 p-0">
<div className="flex h-full flex-col">
<div className="flex h-14 items-center border-b px-6">
<img src="/logo.png" alt="Pricecious Logo" className="h-8 w-8 mr-2" />
<img src="/logo.png" alt="PriceFlow Logo" className="h-8 w-8 mr-2" />
<span className="text-xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
Pricecious
</span>
@@ -109,12 +111,12 @@ const Layout = ({ children, theme, toggleTheme }) => {
{theme === 'dark' ? (
<>
<Sun className="h-4 w-4" />
<span>Light Mode</span>
<span>{t('nav.lightMode')}</span>
</>
) : (
<>
<Moon className="h-4 w-4" />
<span>Dark Mode</span>
<span>{t('nav.darkMode')}</span>
</>
)}
</Button>
@@ -123,8 +125,8 @@ const Layout = ({ children, theme, toggleTheme }) => {
</SheetContent>
</Sheet>
<Link to="/" className="flex items-center gap-2 font-semibold">
<img src="/logo.png" alt="Pricecious Logo" className="h-6 w-6" />
Pricecious
<img src="/logo.png" alt="PriceFlow Logo" className="h-6 w-6" />
PriceFlow
</Link>
<div className="ml-auto flex items-center gap-2">
<Button variant="ghost" size="icon" onClick={toggleTheme}>
frontend/src/i18n/index.js
+18
View File
@@ -0,0 +1,18 @@
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import fr from './locales/fr.json';
i18n
.use(initReactI18next)
.init({
resources: {
fr: { translation: fr }
},
lng: 'fr', // Langue par défaut: Français
fallbackLng: 'fr',
interpolation: {
escapeValue: false
}
});
export default i18n;
frontend/src/i18n/locales/fr.json
+195
View File
@@ -0,0 +1,195 @@
{
"app": {
"name": "PriceFlow",
"tagline": "Suivi de prix intelligent"
},
"nav": {
"dashboard": "Tableau de bord",
"settings": "Paramètres",
"lightMode": "Mode clair",
"darkMode": "Mode sombre"
},
"dashboard": {
"title": "Tableau de bord",
"description": "Gérez vos articles suivis et surveillez les changements de prix.",
"addItem": "Ajouter un article",
"refreshAll": "Actualiser tout",
"noItems": "Aucun article suivi",
"noItemsDescription": "Ajoutez votre premier article pour commencer le suivi des prix.",
"search": "Rechercher des articles...",
"filterAll": "Tous",
"filterActive": "Actifs",
"filterInactive": "Inactifs",
"itemCount": "{{count}} article(s)",
"lastChecked": "Dernière vérification",
"never": "Jamais",
"targetPrice": "Prix cible",
"currentPrice": "Prix actuel",
"inStock": "En stock",
"outOfStock": "Rupture de stock",
"stockUnknown": "Stock inconnu",
"priceHistory": "Historique des prix",
"confidence": "Confiance",
"refresh": "Actualiser",
"edit": "Modifier",
"delete": "Supprimer",
"confirmDelete": "Êtes-vous sûr de vouloir supprimer cet article ?",
"deleteWarning": "Cette action est irréversible. L'historique des prix sera également supprimé.",
"cancel": "Annuler",
"confirm": "Confirmer"
},
"itemModal": {
"addTitle": "Ajouter un article",
"editTitle": "Modifier l'article",
"url": "URL de la page produit",
"urlPlaceholder": "https://exemple.com/produit",
"name": "Nom de l'article",
"namePlaceholder": "ex: iPhone 15 Pro",
"nameOptional": "(optionnel - extrait automatiquement)",
"targetPrice": "Prix cible",
"targetPricePlaceholder": "ex: 999.99",
"targetPriceOptional": "(optionnel)",
"selector": "Sélecteur CSS",
"selectorPlaceholder": "ex: .price",
"selectorOptional": "(optionnel - pour les pages complexes)",
"tags": "Tags",
"tagsPlaceholder": "ex: tech, téléphone",
"tagsOptional": "(optionnel - séparés par des virgules)",
"description": "Description",
"descriptionPlaceholder": "Notes personnelles...",
"descriptionOptional": "(optionnel)",
"notificationProfile": "Profil de notification",
"selectProfile": "Sélectionner un profil",
"noProfile": "Aucun profil",
"active": "Actif",
"activeDescription": "Activer le suivi automatique",
"save": "Enregistrer",
"saving": "Enregistrement...",
"close": "Fermer"
},
"settings": {
"title": "Paramètres",
"description": "Configurez les préférences de l'application et les notifications.",
"ai": {
"title": "Configuration IA",
"description": "Configurez le modèle IA utilisé pour analyser les pages produits.",
"provider": "Fournisseur",
"model": "Modèle",
"modelPlaceholder": "ex: moondream",
"apiKey": "Clé API",
"apiKeyPlaceholder": "Optionnel pour les modèles locaux",
"apiKeyOpenRouter": "sk-or-...",
"advancedSettings": "Paramètres avancés",
"apiBaseUrl": "URL de base de l'API",
"temperature": "Température",
"maxTokens": "Tokens maximum",
"priceConfidence": "Seuil de confiance (prix)",
"stockConfidence": "Seuil de confiance (stock)",
"jsonRepair": "Activer la réparation JSON",
"jsonRepairDescription": "Tente de réparer les réponses JSON invalides"
},
"openrouter": {
"title": "Sélection du modèle OpenRouter",
"refresh": "Actualiser",
"loading": "Chargement des modèles...",
"modelsAvailable": "{{count}} disponibles",
"selectModel": "Sélectionner un modèle",
"input": "Entrée",
"output": "Sortie",
"context": "Contexte",
"tokens": "tokens",
"free": "Gratuit",
"categories": {
"all": "Tous",
"chat": "Chat",
"vision": "Vision",
"code": "Code",
"reasoning": "Raisonnement",
"free": "Gratuit"
}
},
"scraper": {
"title": "Configuration du scraper",
"description": "Configurez comment le scraper interagit avec les pages web.",
"smartScroll": "Défilement intelligent",
"smartScrollDescription": "Faire défiler pour déclencher le chargement différé.",
"scrollPixels": "Pixels de défilement",
"textContext": "Contexte textuel",
"textContextDescription": "Envoyer le texte de la page à l'IA avec la capture d'écran.",
"maxTextLength": "Longueur max du texte",
"timeout": "Délai d'attente (ms)"
},
"job": {
"title": "Tâche de rafraîchissement automatique",
"description": "Configurez la tâche de fond qui vérifie les mises à jour de prix.",
"refreshInterval": "Intervalle de rafraîchissement (minutes)",
"nextRun": "Prochaine exécution",
"notScheduled": "Non planifiée",
"status": "Statut",
"running": "En cours",
"idle": "En attente",
"saveConfig": "Enregistrer la configuration"
},
"notifications": {
"title": "Profils de notification",
"description": "Gérez les paramètres de notification pour différents groupes d'articles.",
"createTitle": "Créer un nouveau profil",
"editTitle": "Modifier le profil",
"cancelEdit": "Annuler",
"name": "Nom",
"namePlaceholder": "ex: Alertes email",
"appriseUrl": "URL Apprise",
"appriseUrlPlaceholder": "mailto://user:pass@gmail.com",
"checkInterval": "Intervalle de vérification (minutes)",
"priceDropThreshold": "Seuil de baisse de prix (%)",
"notifyOnDrop": "Notifier en cas de baisse",
"notifyOnTarget": "Notifier au prix cible",
"notifyOnStock": "Notifier en cas de changement de stock",
"createProfile": "Créer le profil",
"updateProfile": "Mettre à jour le profil",
"existingProfiles": "Profils existants",
"noProfiles": "Aucun profil créé.",
"interval": "intervalle",
"drop": "baisse",
"badges": {
"priceDrop": "Baisse de prix",
"targetHit": "Prix cible atteint",
"stockChange": "Changement de stock"
},
"confirmDelete": "Êtes-vous sûr de vouloir supprimer ce profil ?"
}
},
"common": {
"loading": "Chargement...",
"error": "Erreur",
"success": "Succès",
"save": "Enregistrer",
"cancel": "Annuler",
"delete": "Supprimer",
"edit": "Modifier",
"close": "Fermer",
"confirm": "Confirmer",
"yes": "Oui",
"no": "Non",
"or": "ou",
"and": "et"
},
"toast": {
"settingUpdated": "Paramètre mis à jour",
"settingError": "Erreur lors de la mise à jour",
"fetchError": "Erreur lors du chargement",
"profileCreated": "Profil créé",
"profileUpdated": "Profil mis à jour",
"profileDeleted": "Profil supprimé",
"profileError": "Erreur lors de l'opération sur le profil",
"itemCreated": "Article ajouté",
"itemUpdated": "Article mis à jour",
"itemDeleted": "Article supprimé",
"itemError": "Erreur lors de l'opération sur l'article",
"refreshStarted": "Actualisation lancée",
"refreshComplete": "Actualisation terminée",
"refreshError": "Erreur lors de l'actualisation",
"jobConfigUpdated": "Configuration de la tâche mise à jour",
"openrouterError": "Erreur lors du chargement des modèles OpenRouter"
}
}
frontend/src/main.jsx
+1
View File
@@ -2,6 +2,7 @@ import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import './i18n' // Initialisation i18n - Français par défaut
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
frontend/src/pages/Dashboard.jsx
+16 -14
View File
@@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { toast } from 'sonner';
import { useTranslation } from 'react-i18next';
import { Plus, RefreshCw, Search, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
@@ -11,6 +12,7 @@ import { DeleteConfirmationModal } from '@/components/dashboard/DeleteConfirmati
const API_URL = '/api';
export default function Dashboard() {
const { t } = useTranslation();
const [items, setItems] = useState([]);
const [searchTerm, setSearchTerm] = useState('');
const [showAddModal, setShowAddModal] = useState(false);
@@ -25,7 +27,7 @@ export default function Dashboard() {
setItems(sortedItems);
} catch (error) {
console.error('Error fetching items:', error);
toast.error('Failed to fetch items');
toast.error(t('toast.fetchError'));
}
};
@@ -37,25 +39,25 @@ export default function Dashboard() {
const handleCheck = async (id) => {
try {
toast.info('Check triggered...');
toast.info(t('toast.refreshStarted'));
await axios.post(`${API_URL}/items/${id}/check`);
toast.success('Check started in background');
toast.success(t('toast.refreshComplete'));
refreshItems();
} catch (error) {
console.error('Error triggering check:', error);
toast.error('Failed to trigger check');
toast.error(t('toast.refreshError'));
}
};
const handleRefreshAll = async () => {
try {
toast.info('Triggering refresh for all items...');
toast.info(t('toast.refreshStarted'));
setItems(prevItems => prevItems.map(item => ({ ...item, is_refreshing: true })));
await axios.post(`${API_URL}/jobs/refresh-all`);
toast.success('Refresh all started');
toast.success(t('toast.refreshComplete'));
} catch (error) {
console.error('Error triggering refresh all:', error);
toast.error('Failed to trigger refresh all');
toast.error(t('toast.refreshError'));
refreshItems();
}
};
@@ -64,12 +66,12 @@ export default function Dashboard() {
if (!itemToDelete) return;
try {
await axios.delete(`${API_URL}/items/${itemToDelete.id}`);
toast.success('Item deleted');
toast.success(t('toast.itemDeleted'));
refreshItems();
setItemToDelete(null);
} catch (error) {
console.error('Error deleting item:', error);
toast.error('Failed to delete item');
toast.error(t('toast.itemError'));
}
};
@@ -87,14 +89,14 @@ export default function Dashboard() {
<div className="space-y-6 animate-in fade-in duration-500">
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div>
<h2 className="text-2xl font-bold tracking-tight">Dashboard</h2>
<p className="text-muted-foreground">Manage and monitor your product watchlist.</p>
<h2 className="text-2xl font-bold tracking-tight">{t('dashboard.title')}</h2>
<p className="text-muted-foreground">{t('dashboard.description')}</p>
</div>
<div className="flex items-center gap-2">
<div className="relative w-full md:w-64">
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
placeholder="Search items..."
placeholder={t('dashboard.search')}
className="pl-8"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
@@ -102,11 +104,11 @@ export default function Dashboard() {
</div>
<Button variant="outline" onClick={handleRefreshAll}>
<RefreshCw className="mr-2 h-4 w-4" />
Refresh All
{t('dashboard.refreshAll')}
</Button>
<Button onClick={() => setShowAddModal(true)}>
<Plus className="mr-2 h-4 w-4" />
Add Item
{t('dashboard.addItem')}
</Button>
</div>
</div>
frontend/src/pages/Settings.jsx
+192 -8
View File
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { toast } from 'sonner';
import { Sun, Clock, Cpu, Settings as SettingsIcon, Bell, Trash2, ChevronDown, ChevronUp, Edit2, CheckCircle2, AlertCircle, TrendingDown, DollarSign, Package } from 'lucide-react';
import { Sun, Clock, Cpu, Settings as SettingsIcon, Bell, Trash2, ChevronDown, ChevronUp, Edit2, CheckCircle2, AlertCircle, TrendingDown, DollarSign, Package, RefreshCw, Filter, Eye, Code, Brain, Sparkles } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
@@ -13,6 +13,15 @@ import { cn } from '@/lib/utils';
const API_URL = '/api';
// Icônes pour les catégories OpenRouter
const categoryIcons = {
chat: Sparkles,
vision: Eye,
code: Code,
reasoning: Brain,
free: DollarSign
};
export default function Settings() {
const [profiles, setProfiles] = useState([]);
const [jobConfig, setJobConfig] = useState({ refresh_interval_minutes: 60, next_run: null, running: false });
@@ -45,10 +54,58 @@ export default function Settings() {
const [editingProfileId, setEditingProfileId] = useState(null);
const [showAdvancedAI, setShowAdvancedAI] = useState(false);
// OpenRouter state
const [openrouterModels, setOpenrouterModels] = useState([]);
const [openrouterLoading, setOpenrouterLoading] = useState(false);
const [openrouterCategory, setOpenrouterCategory] = useState('all');
const [openrouterCategories] = useState([
{ id: 'all', name: 'Tous', description: 'Tous les modèles' },
{ id: 'chat', name: 'Chat', description: 'Conversation générale' },
{ id: 'vision', name: 'Vision', description: 'Analyse d\'images' },
{ id: 'code', name: 'Code', description: 'Programmation' },
{ id: 'reasoning', name: 'Raisonnement', description: 'Raisonnement avancé' },
{ id: 'free', name: 'Gratuit', description: 'Modèles gratuits' }
]);
useEffect(() => {
fetchAll();
}, []);
// Charger les modèles OpenRouter quand le provider change ou la catégorie
useEffect(() => {
if (config.ai_provider === 'openrouter') {
fetchOpenRouterModels();
}
}, [config.ai_provider, openrouterCategory]);
const fetchOpenRouterModels = async () => {
setOpenrouterLoading(true);
try {
const params = new URLSearchParams();
if (config.ai_api_key) {
params.append('api_key', config.ai_api_key);
}
if (openrouterCategory && openrouterCategory !== 'all') {
params.append('category', openrouterCategory);
}
const response = await axios.get(`${API_URL}/openrouter/models?${params.toString()}`);
setOpenrouterModels(response.data.models || []);
} catch (error) {
console.error('Erreur chargement modèles OpenRouter:', error);
toast.error('Erreur lors du chargement des modèles OpenRouter');
} finally {
setOpenrouterLoading(false);
}
};
const formatPrice = (pricePerToken) => {
if (!pricePerToken || pricePerToken === 0) return 'Gratuit';
const pricePerMillion = pricePerToken * 1000000;
if (pricePerMillion < 0.01) return `$${pricePerMillion.toFixed(4)}/1M`;
if (pricePerMillion < 1) return `$${pricePerMillion.toFixed(3)}/1M`;
return `$${pricePerMillion.toFixed(2)}/1M`;
};
const fetchAll = async () => {
try {
const [profilesRes, settingsRes, jobRes] = await Promise.all([
@@ -192,26 +249,153 @@ export default function Settings() {
<CardContent className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label>Provider</Label>
<Label>Fournisseur</Label>
<Select value={config.ai_provider} onValueChange={(val) => updateSetting('ai_provider', val)}>
<SelectTrigger><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="ollama">Ollama</SelectItem>
<SelectItem value="openai">OpenAI</SelectItem>
<SelectItem value="anthropic">Anthropic</SelectItem>
<SelectItem value="openrouter">OpenRouter</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label>Model</Label>
<Input value={config.ai_model} onChange={(e) => updateSetting('ai_model', e.target.value)} placeholder="e.g., moondream" />
</div>
{config.ai_provider !== 'openrouter' ? (
<div className="space-y-2">
<Label>Modèle</Label>
<Input value={config.ai_model} onChange={(e) => updateSetting('ai_model', e.target.value)} placeholder="ex: moondream" />
</div>
) : (
<div className="space-y-2">
<Label>Catégorie</Label>
<Select value={openrouterCategory} onValueChange={setOpenrouterCategory}>
<SelectTrigger>
<SelectValue placeholder="Filtrer par catégorie" />
</SelectTrigger>
<SelectContent>
{openrouterCategories.map(cat => (
<SelectItem key={cat.id} value={cat.id}>
<span className="flex items-center gap-2">
{cat.name}
</span>
</SelectItem>
))}
</SelectContent>
</Select>
</div>
)}
</div>
<div className="space-y-2">
<Label>API Key</Label>
<Input type="password" value={config.ai_api_key} onChange={(e) => updateSetting('ai_api_key', e.target.value)} placeholder="Optional for local models" />
<Label>Clé API</Label>
<Input
type="password"
value={config.ai_api_key}
onChange={(e) => updateSetting('ai_api_key', e.target.value)}
placeholder={config.ai_provider === 'openrouter' ? 'sk-or-...' : 'Optionnel pour les modèles locaux'}
/>
</div>
{/* OpenRouter Model Selector */}
{config.ai_provider === 'openrouter' && (
<div className="space-y-4 p-4 border rounded-lg bg-muted/30">
<div className="flex items-center justify-between">
<Label className="text-base font-medium">Sélection du modèle OpenRouter</Label>
<Button
variant="outline"
size="sm"
onClick={fetchOpenRouterModels}
disabled={openrouterLoading}
>
<RefreshCw className={cn("h-4 w-4 mr-2", openrouterLoading && "animate-spin")} />
Actualiser
</Button>
</div>
{/* Filtres par catégorie - badges cliquables */}
<div className="flex flex-wrap gap-2">
{openrouterCategories.map(cat => {
const Icon = categoryIcons[cat.id] || Filter;
return (
<Button
key={cat.id}
variant={openrouterCategory === cat.id ? "default" : "outline"}
size="sm"
onClick={() => setOpenrouterCategory(cat.id)}
className="text-xs"
>
<Icon className="h-3 w-3 mr-1" />
{cat.name}
</Button>
);
})}
</div>
{/* Liste des modèles */}
<div className="space-y-2">
<Label>Modèle ({openrouterModels.length} disponibles)</Label>
{openrouterLoading ? (
<div className="text-sm text-muted-foreground py-4 text-center">
Chargement des modèles...
</div>
) : (
<Select
value={config.ai_model}
onValueChange={(val) => updateSetting('ai_model', val)}
>
<SelectTrigger>
<SelectValue placeholder="Sélectionner un modèle" />
</SelectTrigger>
<SelectContent className="max-h-[300px]">
{openrouterModels.map(model => (
<SelectItem key={model.id} value={model.id}>
<div className="flex flex-col">
<span className="font-medium">{model.name}</span>
<span className="text-xs text-muted-foreground">
Entrée: {formatPrice(model.pricing?.prompt)} | Sortie: {formatPrice(model.pricing?.completion)}
</span>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
)}
</div>
{/* Afficher les détails du modèle sélectionné */}
{config.ai_model && openrouterModels.length > 0 && (
<div className="text-sm p-3 bg-background rounded border">
{(() => {
const selectedModel = openrouterModels.find(m => m.id === config.ai_model);
if (!selectedModel) return <span className="text-muted-foreground">Modèle: {config.ai_model}</span>;
return (
<div className="space-y-2">
<div className="font-medium">{selectedModel.name}</div>
<div className="text-muted-foreground text-xs">{selectedModel.description}</div>
<div className="flex flex-wrap gap-2 pt-1">
<span className="px-2 py-0.5 bg-primary/10 rounded text-xs">
Contexte: {selectedModel.context_length?.toLocaleString()} tokens
</span>
<span className="px-2 py-0.5 bg-green-500/10 text-green-700 dark:text-green-400 rounded text-xs">
Entrée: {formatPrice(selectedModel.pricing?.prompt)}
</span>
<span className="px-2 py-0.5 bg-blue-500/10 text-blue-700 dark:text-blue-400 rounded text-xs">
Sortie: {formatPrice(selectedModel.pricing?.completion)}
</span>
{selectedModel.categories?.map(cat => (
<span key={cat} className="px-2 py-0.5 bg-secondary rounded text-xs capitalize">
{cat}
</span>
))}
</div>
</div>
);
})()}
</div>
)}
</div>
)}
<div className="pt-2">
<Button
variant="outline"