mirror of
https://github.com/R0m1k3/Priceflow.git
synced 2026-10-11 17:29:14 +02:00
feat: add comprehensive admin page for user, system settings, notification, and job management.
This commit is contained in:
Michael committed
1 parent
9637d77cef
commit
a26bd343ec
2 files changed
+215
-911
No files matched your search
+215
-102
@@ -41,7 +41,8 @@ export default function Admin() {
|
||||
const [adminPasswordChange, setAdminPasswordChange] = useState({ userId: null, newPassword: '' });
|
||||
|
||||
// Settings state (from Settings.jsx)
|
||||
const [profiles, setProfiles] = useState([]);
|
||||
// Settings state (from Settings.jsx)
|
||||
const [channels, setChannels] = useState([]);
|
||||
const [jobConfig, setJobConfig] = useState({ refresh_interval_minutes: 60, next_run: null, running: false });
|
||||
const [config, setConfig] = useState({
|
||||
ai_provider: 'ollama',
|
||||
@@ -59,16 +60,20 @@ export default function Admin() {
|
||||
text_context_length: 5000,
|
||||
scraper_timeout: 90000
|
||||
});
|
||||
const [newProfile, setNewProfile] = useState({
|
||||
const [newChannel, setNewChannel] = useState({
|
||||
name: '',
|
||||
apprise_url: '',
|
||||
check_interval_minutes: 60,
|
||||
notify_on_price_drop: true,
|
||||
notify_on_target_price: true,
|
||||
price_drop_threshold_percent: 10,
|
||||
notify_on_stock_change: true
|
||||
type: 'email',
|
||||
configuration: '',
|
||||
// Helper fields for UI
|
||||
email_user: '',
|
||||
email_pass: '',
|
||||
email_host: '',
|
||||
email_port: '',
|
||||
discord_webhook: '',
|
||||
mattermost_webhook: '',
|
||||
is_active: true
|
||||
});
|
||||
const [editingProfileId, setEditingProfileId] = useState(null);
|
||||
const [editingChannelId, setEditingChannelId] = useState(null);
|
||||
const [showAdvancedAI, setShowAdvancedAI] = useState(false);
|
||||
const [searchSites, setSearchSites] = useState([]);
|
||||
const [resettingSites, setResettingSites] = useState(false);
|
||||
@@ -101,16 +106,16 @@ export default function Admin() {
|
||||
const fetchAll = async () => {
|
||||
try {
|
||||
const headers = getAuthHeaders();
|
||||
const [usersRes, profilesRes, settingsRes, jobRes, sitesRes] = await Promise.all([
|
||||
const [usersRes, channelsRes, settingsRes, jobRes, sitesRes] = await Promise.all([
|
||||
axios.get(`${API_URL}/auth/users`, { headers }),
|
||||
axios.get(`${API_URL}/notification-profiles`),
|
||||
axios.get(`${API_URL}/notifications/channels`),
|
||||
axios.get(`${API_URL}/settings`),
|
||||
axios.get(`${API_URL}/jobs/config`),
|
||||
axios.get(`${API_URL}/search-sites`)
|
||||
]);
|
||||
|
||||
setUsers(usersRes.data);
|
||||
setProfiles(profilesRes.data);
|
||||
setChannels(channelsRes.data);
|
||||
setJobConfig(jobRes.data);
|
||||
setSearchSites(sitesRes.data);
|
||||
|
||||
@@ -254,63 +259,131 @@ export default function Admin() {
|
||||
}
|
||||
};
|
||||
|
||||
// Profile functions
|
||||
const handleProfileSubmit = async (e) => {
|
||||
// Channel functions
|
||||
const handleChannelSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
if (editingProfileId) {
|
||||
await axios.put(`${API_URL}/notification-profiles/${editingProfileId}`, newProfile);
|
||||
toast.success('Profil mis à jour');
|
||||
} else {
|
||||
await axios.post(`${API_URL}/notification-profiles`, newProfile);
|
||||
toast.success('Profil créé');
|
||||
let configuration = newChannel.configuration;
|
||||
|
||||
// Construct configuration based on type
|
||||
if (newChannel.type === 'email') {
|
||||
configuration = JSON.stringify({
|
||||
user: newChannel.email_user,
|
||||
password: newChannel.email_pass,
|
||||
host: newChannel.email_host,
|
||||
port: newChannel.email_port
|
||||
});
|
||||
} else if (newChannel.type === 'discord') {
|
||||
configuration = JSON.stringify({
|
||||
webhook_url: newChannel.discord_webhook
|
||||
});
|
||||
} else if (newChannel.type === 'mattermost') {
|
||||
configuration = JSON.stringify({
|
||||
webhook_url: newChannel.mattermost_webhook
|
||||
});
|
||||
}
|
||||
setNewProfile({
|
||||
name: '', apprise_url: '', check_interval_minutes: 60,
|
||||
notify_on_price_drop: true, notify_on_target_price: true,
|
||||
price_drop_threshold_percent: 10, notify_on_stock_change: true
|
||||
});
|
||||
setEditingProfileId(null);
|
||||
|
||||
const channelData = {
|
||||
name: newChannel.name,
|
||||
type: newChannel.type,
|
||||
configuration: configuration,
|
||||
is_active: newChannel.is_active
|
||||
};
|
||||
|
||||
if (editingChannelId) {
|
||||
await axios.put(`${API_URL}/notifications/channels/${editingChannelId}`, channelData);
|
||||
toast.success('Channel updated');
|
||||
} else {
|
||||
await axios.post(`${API_URL}/notifications/channels`, channelData);
|
||||
toast.success('Channel created');
|
||||
}
|
||||
|
||||
resetChannelForm();
|
||||
fetchAll();
|
||||
} catch (error) {
|
||||
toast.error('Erreur lors de l\'enregistrement');
|
||||
toast.error(editingChannelId ? 'Failed to update channel' : 'Failed to create channel');
|
||||
}
|
||||
};
|
||||
|
||||
const editProfile = (profile) => {
|
||||
setNewProfile({
|
||||
name: profile.name, apprise_url: profile.apprise_url,
|
||||
check_interval_minutes: profile.check_interval_minutes,
|
||||
notify_on_price_drop: profile.notify_on_price_drop,
|
||||
notify_on_target_price: profile.notify_on_target_price,
|
||||
price_drop_threshold_percent: profile.price_drop_threshold_percent,
|
||||
notify_on_stock_change: profile.notify_on_stock_change
|
||||
const resetChannelForm = () => {
|
||||
setNewChannel({
|
||||
name: '',
|
||||
type: 'email',
|
||||
configuration: '',
|
||||
email_user: '',
|
||||
email_pass: '',
|
||||
email_host: '',
|
||||
email_port: '',
|
||||
discord_webhook: '',
|
||||
mattermost_webhook: '',
|
||||
is_active: true
|
||||
});
|
||||
setEditingProfileId(profile.id);
|
||||
setEditingChannelId(null);
|
||||
};
|
||||
|
||||
const cancelEdit = () => {
|
||||
setNewProfile({
|
||||
name: '', apprise_url: '', check_interval_minutes: 60,
|
||||
notify_on_price_drop: true, notify_on_target_price: true,
|
||||
price_drop_threshold_percent: 10, notify_on_stock_change: true
|
||||
const editChannel = (channel) => {
|
||||
let email_user = '';
|
||||
let email_pass = '';
|
||||
let email_host = '';
|
||||
let email_port = '';
|
||||
let discord_webhook = '';
|
||||
let mattermost_webhook = '';
|
||||
|
||||
try {
|
||||
const config = JSON.parse(channel.configuration);
|
||||
if (channel.type === 'email') {
|
||||
email_user = config.user || '';
|
||||
email_pass = config.password || '';
|
||||
email_host = config.host || '';
|
||||
email_port = config.port || '';
|
||||
} else if (channel.type === 'discord') {
|
||||
discord_webhook = config.webhook_url || '';
|
||||
} else if (channel.type === 'mattermost') {
|
||||
mattermost_webhook = config.webhook_url || '';
|
||||
}
|
||||
} catch (e) {
|
||||
// If config is not JSON, maybe it's a raw URL
|
||||
}
|
||||
|
||||
setNewChannel({
|
||||
name: channel.name,
|
||||
type: channel.type,
|
||||
configuration: channel.configuration,
|
||||
email_user,
|
||||
email_pass,
|
||||
email_host,
|
||||
email_port,
|
||||
discord_webhook,
|
||||
mattermost_webhook,
|
||||
is_active: channel.is_active
|
||||
});
|
||||
setEditingProfileId(null);
|
||||
setEditingChannelId(channel.id);
|
||||
};
|
||||
|
||||
const deleteProfile = async (id) => {
|
||||
if (confirm('Êtes-vous sûr de vouloir supprimer ce profil ?')) {
|
||||
const deleteChannel = async (id) => {
|
||||
if (confirm('Are you sure you want to delete this channel?')) {
|
||||
try {
|
||||
await axios.delete(`${API_URL}/notification-profiles/${id}`);
|
||||
toast.success('Profil supprimé');
|
||||
if (editingProfileId === id) cancelEdit();
|
||||
await axios.delete(`${API_URL}/notifications/channels/${id}`);
|
||||
toast.success('Channel deleted');
|
||||
if (editingChannelId === id) {
|
||||
resetChannelForm();
|
||||
}
|
||||
fetchAll();
|
||||
} catch (error) {
|
||||
toast.error('Erreur lors de la suppression');
|
||||
toast.error('Failed to delete channel');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const testChannel = async (id) => {
|
||||
try {
|
||||
await axios.post(`${API_URL}/notifications/channels/${id}/test`);
|
||||
toast.success('Test notification queued');
|
||||
} catch (error) {
|
||||
toast.error('Failed to send test notification');
|
||||
}
|
||||
};
|
||||
|
||||
// Site functions
|
||||
const toggleSiteActive = async (site) => {
|
||||
try {
|
||||
@@ -774,77 +847,117 @@ export default function Admin() {
|
||||
{activeTab === 'notifications' && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2"><Bell className="h-5 w-5" />Profils de notification</CardTitle>
|
||||
<CardTitle className="flex items-center gap-2"><Bell className="h-5 w-5" />Notification Channels</CardTitle>
|
||||
<CardDescription>Configure where you want to receive alerts (Email, Discord, Mattermost).</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-8">
|
||||
<form onSubmit={handleProfileSubmit} className="space-y-4 border-b pb-8">
|
||||
<form onSubmit={handleChannelSubmit} className="space-y-4 border-b pb-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="text-sm font-medium">{editingProfileId ? 'Modifier le profil' : 'Nouveau profil'}</h4>
|
||||
{editingProfileId && <Button type="button" variant="ghost" size="sm" onClick={cancelEdit}>Annuler</Button>}
|
||||
<h4 className="text-sm font-medium">{editingChannelId ? 'Edit Channel' : 'Create New Channel'}</h4>
|
||||
{editingChannelId && (
|
||||
<Button type="button" variant="ghost" size="sm" onClick={resetChannelForm}>Cancel Edit</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Nom</Label>
|
||||
<Input required value={newProfile.name} onChange={(e) => setNewProfile({ ...newProfile, name: e.target.value })} />
|
||||
<Label>Name</Label>
|
||||
<Input required value={newChannel.name} onChange={(e) => setNewChannel({ ...newChannel, name: e.target.value })} placeholder="e.g., My Discord" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>URL Apprise</Label>
|
||||
<Input required value={newProfile.apprise_url} onChange={(e) => setNewProfile({ ...newProfile, apprise_url: e.target.value })} />
|
||||
<Label>Type</Label>
|
||||
<Select
|
||||
value={newChannel.type}
|
||||
onValueChange={(val) => setNewChannel({ ...newChannel, type: val })}
|
||||
>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="email">Email</SelectItem>
|
||||
<SelectItem value="discord">Discord</SelectItem>
|
||||
<SelectItem value="mattermost">Mattermost</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Intervalle (min)</Label>
|
||||
<Input type="number" min="1" value={newProfile.check_interval_minutes} onChange={(e) => setNewProfile({ ...newProfile, check_interval_minutes: parseInt(e.target.value) })} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Seuil de baisse (%)</Label>
|
||||
<Input type="number" min="1" max="100" value={newProfile.price_drop_threshold_percent} onChange={(e) => setNewProfile({ ...newProfile, price_drop_threshold_percent: parseFloat(e.target.value) })} />
|
||||
</div>
|
||||
|
||||
{/* Configuration Fields based on Type */}
|
||||
<div className="space-y-4 border p-4 rounded-lg bg-muted/20">
|
||||
{newChannel.type === 'email' && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>SMTP User</Label>
|
||||
<Input value={newChannel.email_user} onChange={(e) => setNewChannel({ ...newChannel, email_user: e.target.value })} placeholder="user@example.com" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>SMTP Password</Label>
|
||||
<Input type="password" value={newChannel.email_pass} onChange={(e) => setNewChannel({ ...newChannel, email_pass: e.target.value })} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>SMTP Host</Label>
|
||||
<Input value={newChannel.email_host} onChange={(e) => setNewChannel({ ...newChannel, email_host: e.target.value })} placeholder="smtp.gmail.com" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>SMTP Port</Label>
|
||||
<Input value={newChannel.email_port} onChange={(e) => setNewChannel({ ...newChannel, email_port: e.target.value })} placeholder="587" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{newChannel.type === 'discord' && (
|
||||
<div className="space-y-2">
|
||||
<Label>Webhook URL</Label>
|
||||
<Input value={newChannel.discord_webhook} onChange={(e) => setNewChannel({ ...newChannel, discord_webhook: e.target.value })} placeholder="https://discord.com/api/webhooks/..." />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{newChannel.type === 'mattermost' && (
|
||||
<div className="space-y-2">
|
||||
<Label>Webhook URL</Label>
|
||||
<Input value={newChannel.mattermost_webhook} onChange={(e) => setNewChannel({ ...newChannel, mattermost_webhook: e.target.value })} placeholder="https://mattermost.example.com/hooks/..." />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch checked={newProfile.notify_on_price_drop} onCheckedChange={(checked) => setNewProfile({ ...newProfile, notify_on_price_drop: checked })} />
|
||||
<Label>Baisse de prix</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch checked={newProfile.notify_on_target_price} onCheckedChange={(checked) => setNewProfile({ ...newProfile, notify_on_target_price: checked })} />
|
||||
<Label>Prix cible</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch checked={newProfile.notify_on_stock_change} onCheckedChange={(checked) => setNewProfile({ ...newProfile, notify_on_stock_change: checked })} />
|
||||
<Label>Changement stock</Label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch checked={newChannel.is_active} onCheckedChange={(checked) => setNewChannel({ ...newChannel, is_active: checked })} />
|
||||
<Label>Active</Label>
|
||||
</div>
|
||||
<Button type="submit">{editingProfileId ? 'Mettre à jour' : 'Créer'}</Button>
|
||||
|
||||
<Button type="submit">{editingChannelId ? 'Update Channel' : 'Create Channel'}</Button>
|
||||
</form>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-sm font-medium">Profils existants</h4>
|
||||
{profiles.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">Aucun profil créé.</p>
|
||||
<h4 className="text-sm font-medium">Existing Channels</h4>
|
||||
{channels.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No channels created yet.</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{profiles.map(profile => (
|
||||
<div key={profile.id} className={cn("relative group rounded-xl border bg-card p-6 space-y-4", editingProfileId === profile.id && "ring-2 ring-primary")}>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="font-semibold">{profile.name}</h3>
|
||||
<p className="text-sm text-muted-foreground truncate max-w-[200px]">{profile.apprise_url}</p>
|
||||
{channels.map(channel => (
|
||||
<div key={channel.id} className={cn(
|
||||
"relative group overflow-hidden rounded-xl border bg-card text-card-foreground shadow transition-all hover:shadow-md",
|
||||
editingChannelId === channel.id && "ring-2 ring-primary",
|
||||
!channel.is_active && "opacity-60"
|
||||
)}>
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="font-semibold leading-none tracking-tight flex items-center gap-2">
|
||||
{channel.name}
|
||||
{!channel.is_active && <span className="text-xs font-normal text-muted-foreground">(Inactive)</span>}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mt-1 capitalize">{channel.type}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => testChannel(channel.id)} title="Send Test Notification">
|
||||
<Bell className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => editChannel(channel)}>
|
||||
<Edit2 className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-destructive hover:text-destructive" onClick={() => deleteChannel(channel.id)}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => editProfile(profile)}><Edit2 className="h-4 w-4" /></Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-destructive" onClick={() => deleteProfile(profile.id)}><Trash2 className="h-4 w-4" /></Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div className="flex items-center gap-2"><Clock className="h-4 w-4 text-muted-foreground" /><span>{profile.check_interval_minutes}m</span></div>
|
||||
<div className="flex items-center gap-2"><TrendingDown className="h-4 w-4 text-muted-foreground" /><span>{profile.price_drop_threshold_percent}%</span></div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 pt-2">
|
||||
{profile.notify_on_price_drop && <span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs bg-secondary"><DollarSign className="mr-1 h-3 w-3" />Baisse</span>}
|
||||
{profile.notify_on_target_price && <span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs bg-secondary"><CheckCircle2 className="mr-1 h-3 w-3" />Cible</span>}
|
||||
{profile.notify_on_stock_change && <span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs bg-secondary"><Package className="mr-1 h-3 w-3" />Stock</span>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -854,6 +967,6 @@ export default function Admin() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
@@ -1,809 +0,0 @@
|
||||
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, RefreshCw, Filter, Eye, Code, Brain, Sparkles, Globe, RotateCcw } 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';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Slider } from '@/components/ui/slider';
|
||||
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 [channels, setChannels] = useState([]);
|
||||
const [jobConfig, setJobConfig] = useState({ refresh_interval_minutes: 60, next_run: null, running: false });
|
||||
const [config, setConfig] = useState({
|
||||
ai_provider: 'ollama',
|
||||
ai_model: 'moondream',
|
||||
ai_api_key: '',
|
||||
ai_api_base: 'http://ollama:11434',
|
||||
ai_temperature: 0.1,
|
||||
ai_max_tokens: 300,
|
||||
confidence_threshold_price: 0.5,
|
||||
confidence_threshold_stock: 0.5,
|
||||
enable_json_repair: true,
|
||||
smart_scroll_enabled: false,
|
||||
smart_scroll_pixels: 350,
|
||||
text_context_enabled: false,
|
||||
text_context_length: 5000,
|
||||
scraper_timeout: 90000
|
||||
});
|
||||
const [newChannel, setNewChannel] = useState({
|
||||
name: '',
|
||||
type: 'email',
|
||||
configuration: '',
|
||||
// Helper fields for UI
|
||||
email_user: '',
|
||||
email_pass: '',
|
||||
email_host: '',
|
||||
email_port: '',
|
||||
discord_webhook: '',
|
||||
mattermost_webhook: '',
|
||||
is_active: true
|
||||
});
|
||||
|
||||
const [editingChannelId, setEditingChannelId] = useState(null);
|
||||
const [showAdvancedAI, setShowAdvancedAI] = useState(false);
|
||||
|
||||
// Search Sites state
|
||||
const [searchSites, setSearchSites] = useState([]);
|
||||
const [resettingSites, setResettingSites] = 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 [channelsRes, settingsRes, jobRes, sitesRes] = await Promise.all([
|
||||
axios.get(`${API_URL}/notifications/channels`),
|
||||
axios.get(`${API_URL}/settings`),
|
||||
axios.get(`${API_URL}/jobs/config`),
|
||||
axios.get(`${API_URL}/search-sites`)
|
||||
]);
|
||||
|
||||
setChannels(channelsRes.data);
|
||||
setJobConfig(jobRes.data);
|
||||
setSearchSites(sitesRes.data);
|
||||
|
||||
const settingsMap = {};
|
||||
settingsRes.data.forEach(s => settingsMap[s.key] = s.value);
|
||||
|
||||
setConfig({
|
||||
ai_provider: settingsMap['ai_provider'] || 'ollama',
|
||||
ai_model: settingsMap['ai_model'] || 'moondream',
|
||||
ai_api_key: settingsMap['ai_api_key'] || '',
|
||||
ai_api_base: settingsMap['ai_api_base'] || 'http://ollama:11434',
|
||||
ai_temperature: parseFloat(settingsMap['ai_temperature'] || '0.1'),
|
||||
ai_max_tokens: parseInt(settingsMap['ai_max_tokens'] || '300'),
|
||||
confidence_threshold_price: parseFloat(settingsMap['confidence_threshold_price'] || '0.5'),
|
||||
confidence_threshold_stock: parseFloat(settingsMap['confidence_threshold_stock'] || '0.5'),
|
||||
enable_json_repair: settingsMap['enable_json_repair'] !== 'false',
|
||||
smart_scroll_enabled: settingsMap['smart_scroll_enabled'] === 'true',
|
||||
smart_scroll_pixels: parseInt(settingsMap['smart_scroll_pixels'] || '350'),
|
||||
text_context_enabled: settingsMap['text_context_enabled'] === 'true',
|
||||
text_context_length: parseInt(settingsMap['text_context_length'] || '5000'),
|
||||
scraper_timeout: parseInt(settingsMap['scraper_timeout'] || '90000')
|
||||
});
|
||||
} catch (error) {
|
||||
toast.error('Failed to fetch settings');
|
||||
}
|
||||
};
|
||||
|
||||
const updateSetting = async (key, value) => {
|
||||
try {
|
||||
await axios.post(`${API_URL}/settings`, { key, value: value.toString() });
|
||||
setConfig(prev => ({ ...prev, [key]: value }));
|
||||
toast.success('Setting updated');
|
||||
} catch (error) {
|
||||
toast.error('Failed to update setting');
|
||||
}
|
||||
};
|
||||
|
||||
const updateJobConfig = async () => {
|
||||
try {
|
||||
await axios.post(`${API_URL}/jobs/config`, {
|
||||
key: 'refresh_interval_minutes',
|
||||
value: jobConfig.refresh_interval_minutes.toString()
|
||||
});
|
||||
toast.success('Job configuration updated');
|
||||
fetchAll();
|
||||
} catch (error) {
|
||||
toast.error('Failed to update job config');
|
||||
}
|
||||
};
|
||||
|
||||
const handleChannelSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
let configuration = newChannel.configuration;
|
||||
|
||||
// Construct configuration based on type
|
||||
if (newChannel.type === 'email') {
|
||||
configuration = JSON.stringify({
|
||||
user: newChannel.email_user,
|
||||
password: newChannel.email_pass,
|
||||
host: newChannel.email_host,
|
||||
port: newChannel.email_port
|
||||
});
|
||||
} else if (newChannel.type === 'discord') {
|
||||
configuration = JSON.stringify({
|
||||
webhook_url: newChannel.discord_webhook
|
||||
});
|
||||
} else if (newChannel.type === 'mattermost') {
|
||||
configuration = JSON.stringify({
|
||||
webhook_url: newChannel.mattermost_webhook
|
||||
});
|
||||
}
|
||||
|
||||
const channelData = {
|
||||
name: newChannel.name,
|
||||
type: newChannel.type,
|
||||
configuration: configuration,
|
||||
is_active: newChannel.is_active
|
||||
};
|
||||
|
||||
if (editingChannelId) {
|
||||
await axios.put(`${API_URL}/notifications/channels/${editingChannelId}`, channelData);
|
||||
toast.success('Channel updated');
|
||||
} else {
|
||||
await axios.post(`${API_URL}/notifications/channels`, channelData);
|
||||
toast.success('Channel created');
|
||||
}
|
||||
|
||||
resetChannelForm();
|
||||
fetchAll();
|
||||
} catch (error) {
|
||||
toast.error(editingChannelId ? 'Failed to update channel' : 'Failed to create channel');
|
||||
}
|
||||
};
|
||||
|
||||
const resetChannelForm = () => {
|
||||
setNewChannel({
|
||||
name: '',
|
||||
type: 'email',
|
||||
configuration: '',
|
||||
email_user: '',
|
||||
email_pass: '',
|
||||
email_host: '',
|
||||
email_port: '',
|
||||
discord_webhook: '',
|
||||
mattermost_webhook: '',
|
||||
is_active: true
|
||||
});
|
||||
setEditingChannelId(null);
|
||||
};
|
||||
|
||||
const editChannel = (channel) => {
|
||||
let email_user = '';
|
||||
let email_pass = '';
|
||||
let email_host = '';
|
||||
let email_port = '';
|
||||
let discord_webhook = '';
|
||||
let mattermost_webhook = '';
|
||||
|
||||
try {
|
||||
const config = JSON.parse(channel.configuration);
|
||||
if (channel.type === 'email') {
|
||||
email_user = config.user || '';
|
||||
email_pass = config.password || '';
|
||||
email_host = config.host || '';
|
||||
email_port = config.port || '';
|
||||
} else if (channel.type === 'discord') {
|
||||
discord_webhook = config.webhook_url || '';
|
||||
} else if (channel.type === 'mattermost') {
|
||||
mattermost_webhook = config.webhook_url || '';
|
||||
}
|
||||
} catch (e) {
|
||||
// If config is not JSON, maybe it's a raw URL
|
||||
}
|
||||
|
||||
setNewChannel({
|
||||
name: channel.name,
|
||||
type: channel.type,
|
||||
configuration: channel.configuration,
|
||||
email_user,
|
||||
email_pass,
|
||||
email_host,
|
||||
email_port,
|
||||
discord_webhook,
|
||||
mattermost_webhook,
|
||||
is_active: channel.is_active
|
||||
});
|
||||
setEditingChannelId(channel.id);
|
||||
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const deleteChannel = async (id) => {
|
||||
if (confirm('Are you sure you want to delete this channel?')) {
|
||||
try {
|
||||
await axios.delete(`${API_URL}/notifications/channels/${id}`);
|
||||
toast.success('Channel deleted');
|
||||
if (editingChannelId === id) {
|
||||
resetChannelForm();
|
||||
}
|
||||
fetchAll();
|
||||
} catch (error) {
|
||||
toast.error('Failed to delete channel');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const testChannel = async (id) => {
|
||||
try {
|
||||
await axios.post(`${API_URL}/notifications/channels/${id}/test`);
|
||||
toast.success('Test notification queued');
|
||||
} catch (error) {
|
||||
toast.error('Failed to send test notification');
|
||||
}
|
||||
};
|
||||
|
||||
// Search Sites functions
|
||||
const toggleSiteActive = async (site) => {
|
||||
try {
|
||||
await axios.put(`${API_URL}/search-sites/${site.id}`, { is_active: !site.is_active });
|
||||
fetchAll();
|
||||
} catch (error) {
|
||||
toast.error('Erreur lors de la mise à jour');
|
||||
}
|
||||
};
|
||||
|
||||
const resetSitesToDefaults = async () => {
|
||||
if (!confirm('Êtes-vous sûr de vouloir réinitialiser tous les sites ? Cette action va remettre les valeurs par défaut.')) {
|
||||
return;
|
||||
}
|
||||
setResettingSites(true);
|
||||
try {
|
||||
const response = await axios.post(`${API_URL}/search-sites/reset`);
|
||||
toast.success(response.data.message);
|
||||
fetchAll();
|
||||
} catch (error) {
|
||||
toast.error('Erreur lors de la réinitialisation');
|
||||
} finally {
|
||||
setResettingSites(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6 animate-in fade-in duration-500 max-w-5xl mx-auto pb-10">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Settings</h2>
|
||||
<p className="text-muted-foreground">Configure application preferences and notifications.</p>
|
||||
</div>
|
||||
|
||||
{/* AI Configuration */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2"><Cpu className="h-5 w-5" />AI Configuration</CardTitle>
|
||||
<CardDescription>Configure the AI model used for analyzing product pages.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<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>
|
||||
{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>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"
|
||||
size="sm"
|
||||
className="w-full flex items-center justify-between"
|
||||
onClick={() => setShowAdvancedAI(!showAdvancedAI)}
|
||||
>
|
||||
<span>Advanced Settings</span>
|
||||
{showAdvancedAI ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{showAdvancedAI && (
|
||||
<div className="space-y-6 pt-4 animate-in slide-in-from-top-2 duration-200">
|
||||
<div className="space-y-2">
|
||||
<Label>API Base URL</Label>
|
||||
<Input value={config.ai_api_base} onChange={(e) => updateSetting('ai_api_base', e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<Label>Temperature</Label>
|
||||
<span className="text-xs text-muted-foreground">{config.ai_temperature}</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.1}
|
||||
value={config.ai_temperature}
|
||||
onChange={(e) => updateSetting('ai_temperature', parseFloat(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<Label>Price Confidence Threshold</Label>
|
||||
<span className="text-xs text-muted-foreground">{config.confidence_threshold_price}</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.1}
|
||||
value={config.confidence_threshold_price}
|
||||
onChange={(e) => updateSetting('confidence_threshold_price', parseFloat(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<Label>Stock Confidence Threshold</Label>
|
||||
<span className="text-xs text-muted-foreground">{config.confidence_threshold_stock}</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.1}
|
||||
value={config.confidence_threshold_stock}
|
||||
onChange={(e) => updateSetting('confidence_threshold_stock', parseFloat(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Max Tokens</Label>
|
||||
<Input type="number" value={config.ai_max_tokens} onChange={(e) => updateSetting('ai_max_tokens', parseInt(e.target.value))} />
|
||||
</div>
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<Label htmlFor="json_repair">Enable JSON Repair</Label>
|
||||
<Switch id="json_repair" checked={config.enable_json_repair} onCheckedChange={(checked) => updateSetting('enable_json_repair', checked)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Scraper Configuration */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2"><SettingsIcon className="h-5 w-5" />Scraper Configuration</CardTitle>
|
||||
<CardDescription>Configure how the scraper interacts with web pages.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label>Smart Scroll</Label>
|
||||
<p className="text-sm text-muted-foreground">Scroll down to trigger lazy loading.</p>
|
||||
</div>
|
||||
<Switch checked={config.smart_scroll_enabled} onCheckedChange={(checked) => updateSetting('smart_scroll_enabled', checked)} />
|
||||
</div>
|
||||
{config.smart_scroll_enabled && (
|
||||
<div className="space-y-2">
|
||||
<Label>Scroll Pixels</Label>
|
||||
<Input type="number" value={config.smart_scroll_pixels} onChange={(e) => updateSetting('smart_scroll_pixels', parseInt(e.target.value))} />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label>Text Context</Label>
|
||||
<p className="text-sm text-muted-foreground">Send page text to AI along with screenshot.</p>
|
||||
</div>
|
||||
<Switch checked={config.text_context_enabled} onCheckedChange={(checked) => updateSetting('text_context_enabled', checked)} />
|
||||
</div>
|
||||
{config.text_context_enabled && (
|
||||
<div className="space-y-2">
|
||||
<Label>Max Text Length</Label>
|
||||
<Input type="number" value={config.text_context_length} onChange={(e) => updateSetting('text_context_length', parseInt(e.target.value))} />
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label>Timeout (ms)</Label>
|
||||
<Input type="number" value={config.scraper_timeout} onChange={(e) => updateSetting('scraper_timeout', parseInt(e.target.value))} />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Job Configuration */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2"><Clock className="h-5 w-5" />Automated Refresh Job</CardTitle>
|
||||
<CardDescription>Configure the background job that checks for price updates.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Refresh Interval (Minutes)</Label>
|
||||
<Input type="number" min="1" value={jobConfig.refresh_interval_minutes} onChange={(e) => setJobConfig({ ...jobConfig, refresh_interval_minutes: e.target.value })} />
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground space-y-1">
|
||||
<p>Next run: {jobConfig.next_run ? new Date(jobConfig.next_run).toLocaleString() : 'Not scheduled'}</p>
|
||||
<p>Status: {jobConfig.running ? 'Running' : 'Idle'}</p>
|
||||
</div>
|
||||
<Button onClick={updateJobConfig}>Save Job Config</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Search Sites Configuration */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2"><Globe className="h-5 w-5" />Sites de recherche</CardTitle>
|
||||
<CardDescription>Sites e-commerce français configurés pour la recherche de produits.</CardDescription>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={resetSitesToDefaults} disabled={resettingSites}>
|
||||
<RotateCcw className={cn("h-4 w-4 mr-2", resettingSites && "animate-spin")} />
|
||||
Réinitialiser
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between text-sm text-muted-foreground">
|
||||
<span>{searchSites.filter(s => s.is_active).length} site(s) actif(s) sur {searchSites.length}</span>
|
||||
</div>
|
||||
|
||||
{searchSites.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground py-4 text-center">Aucun site configuré. Cliquez sur "Réinitialiser" pour charger les sites par défaut.</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{searchSites.map(site => (
|
||||
<div key={site.id} className={cn(
|
||||
"relative overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm transition-all",
|
||||
!site.is_active && "opacity-50"
|
||||
)}>
|
||||
<div className="p-3 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-medium text-sm truncate">{site.name}</h3>
|
||||
<p className="text-xs text-muted-foreground truncate">{site.domain}</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={site.is_active}
|
||||
onCheckedChange={() => toggleSiteActive(site)}
|
||||
className="ml-2"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{site.category && (
|
||||
<span className="inline-flex items-center rounded-full border px-2 py-0.5 text-xs bg-secondary text-secondary-foreground">
|
||||
{site.category}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Notification Profiles */}
|
||||
{/* Notification Channels */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2"><Bell className="h-5 w-5" />Notification Channels</CardTitle>
|
||||
<CardDescription>Configure where you want to receive alerts (Email, Discord, Mattermost).</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-8">
|
||||
<form onSubmit={handleChannelSubmit} className="space-y-4 border-b pb-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="text-sm font-medium">{editingChannelId ? 'Edit Channel' : 'Create New Channel'}</h4>
|
||||
{editingChannelId && (
|
||||
<Button type="button" variant="ghost" size="sm" onClick={resetChannelForm}>Cancel Edit</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Name</Label>
|
||||
<Input required value={newChannel.name} onChange={(e) => setNewChannel({ ...newChannel, name: e.target.value })} placeholder="e.g., My Discord" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Type</Label>
|
||||
<Select
|
||||
value={newChannel.type}
|
||||
onValueChange={(val) => setNewChannel({ ...newChannel, type: val })}
|
||||
>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="email">Email</SelectItem>
|
||||
<SelectItem value="discord">Discord</SelectItem>
|
||||
<SelectItem value="mattermost">Mattermost</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Configuration Fields based on Type */}
|
||||
<div className="space-y-4 border p-4 rounded-lg bg-muted/20">
|
||||
{newChannel.type === 'email' && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>SMTP User</Label>
|
||||
<Input value={newChannel.email_user} onChange={(e) => setNewChannel({ ...newChannel, email_user: e.target.value })} placeholder="user@example.com" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>SMTP Password</Label>
|
||||
<Input type="password" value={newChannel.email_pass} onChange={(e) => setNewChannel({ ...newChannel, email_pass: e.target.value })} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>SMTP Host</Label>
|
||||
<Input value={newChannel.email_host} onChange={(e) => setNewChannel({ ...newChannel, email_host: e.target.value })} placeholder="smtp.gmail.com" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>SMTP Port</Label>
|
||||
<Input value={newChannel.email_port} onChange={(e) => setNewChannel({ ...newChannel, email_port: e.target.value })} placeholder="587" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{newChannel.type === 'discord' && (
|
||||
<div className="space-y-2">
|
||||
<Label>Webhook URL</Label>
|
||||
<Input value={newChannel.discord_webhook} onChange={(e) => setNewChannel({ ...newChannel, discord_webhook: e.target.value })} placeholder="https://discord.com/api/webhooks/..." />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{newChannel.type === 'mattermost' && (
|
||||
<div className="space-y-2">
|
||||
<Label>Webhook URL</Label>
|
||||
<Input value={newChannel.mattermost_webhook} onChange={(e) => setNewChannel({ ...newChannel, mattermost_webhook: e.target.value })} placeholder="https://mattermost.example.com/hooks/..." />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch checked={newChannel.is_active} onCheckedChange={(checked) => setNewChannel({ ...newChannel, is_active: checked })} />
|
||||
<Label>Active</Label>
|
||||
</div>
|
||||
|
||||
<Button type="submit">{editingChannelId ? 'Update Channel' : 'Create Channel'}</Button>
|
||||
</form>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-sm font-medium">Existing Channels</h4>
|
||||
{channels.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No channels created yet.</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{channels.map(channel => (
|
||||
<div key={channel.id} className={cn(
|
||||
"relative group overflow-hidden rounded-xl border bg-card text-card-foreground shadow transition-all hover:shadow-md",
|
||||
editingChannelId === channel.id && "ring-2 ring-primary",
|
||||
!channel.is_active && "opacity-60"
|
||||
)}>
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="font-semibold leading-none tracking-tight flex items-center gap-2">
|
||||
{channel.name}
|
||||
{!channel.is_active && <span className="text-xs font-normal text-muted-foreground">(Inactive)</span>}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mt-1 capitalize">{channel.type}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => testChannel(channel.id)} title="Send Test Notification">
|
||||
<Bell className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => editChannel(channel)}>
|
||||
<Edit2 className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-destructive hover:text-destructive" onClick={() => deleteChannel(channel.id)}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user