mirror of
https://github.com/R0m1k3/Priceflow.git
synced 2026-10-23 15:18:12 +02:00
feat: Rebranding PriceFlow + OpenRouter + i18n FR + Docker
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:
19 files changed
+914
-76
No files matched your search
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}>
|
||||
|
||||
Reference in new issue
Block a user