mirror of
https://github.com/R0m1k3/Priceflow.git
synced 2026-10-17 12:18:17 +02:00
267 lines
15 KiB
React
267 lines
15 KiB
React
import React, { useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { ExternalLink, Edit2, RefreshCw, Trash2, AlertTriangle, Clock, Tag, History } from 'lucide-react';
|
|
import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Marquee } from '@/components/ui/marquee';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export function ItemCard({ item, onEdit, onDelete, onCheck, onZoom, onCategoryUpdate, categories, onViewHistory }) {
|
|
const { t } = useTranslation();
|
|
const [showCategorySelect, setShowCategorySelect] = useState(false);
|
|
const [showNewCategoryDialog, setShowNewCategoryDialog] = useState(false);
|
|
const [newCategoryName, setNewCategoryName] = useState('');
|
|
|
|
const getStockStatus = (inStock) => {
|
|
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);
|
|
|
|
return (
|
|
<Card className="group overflow-hidden transition-all duration-300 hover:shadow-md border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
|
|
<div className="relative aspect-video overflow-hidden bg-zinc-100 dark:bg-zinc-950 cursor-zoom-in group/image" onClick={() => onZoom(item.screenshot_url)}>
|
|
{item.screenshot_url ? (
|
|
<>
|
|
<img
|
|
src={`${item.screenshot_url}?t=${new Date(item.last_checked).getTime()}`}
|
|
alt={`Screenshot of ${item.name}`}
|
|
className="h-full w-full object-cover transition-transform duration-500 group-hover/image:scale-105"
|
|
onError={(e) => { e.target.style.display = 'none' }}
|
|
/>
|
|
<div className="absolute inset-0 bg-black/0 transition-colors group-hover/image:bg-black/10" />
|
|
</>
|
|
) : (
|
|
<div className="flex h-full w-full items-center justify-center text-sm text-zinc-400">
|
|
Pas de capture
|
|
</div>
|
|
)}
|
|
|
|
{/* Stock Confidence Bar */}
|
|
{(item.in_stock_confidence !== null && item.in_stock_confidence !== undefined) && (
|
|
<div className="absolute bottom-0 left-0 right-0 h-1.5 bg-black/20 backdrop-blur-sm">
|
|
<div
|
|
className={cn("h-full transition-all duration-500",
|
|
item.in_stock_confidence > 0.8 ? 'bg-emerald-500' :
|
|
item.in_stock_confidence > 0.5 ? 'bg-yellow-500' : 'bg-red-500'
|
|
)}
|
|
style={{ width: `${item.in_stock_confidence * 100}%` }}
|
|
title={`Stock Confidence: ${Math.round(item.in_stock_confidence * 100)}%`}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Stock Badge */}
|
|
<div className={cn("absolute right-3 top-3 rounded-full border px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide shadow-sm backdrop-blur-md", stockStatus.color)}>
|
|
{stockStatus.label}
|
|
</div>
|
|
</div>
|
|
|
|
<CardContent className="p-5 relative">
|
|
<div className="mb-4 flex items-start justify-between">
|
|
<div className="flex-1 overflow-hidden pr-2">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<a
|
|
href={item.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex-shrink-0 rounded-md bg-zinc-100 p-1.5 text-zinc-500 transition-colors hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
|
|
>
|
|
<ExternalLink className="h-3.5 w-3.5" />
|
|
</a>
|
|
<div className="w-full overflow-hidden">
|
|
<Marquee text={item.name} className="font-semibold leading-tight" />
|
|
</div>
|
|
</div>
|
|
<a href={item.url} target="_blank" rel="noopener noreferrer" className="block truncate text-xs text-zinc-400 transition-colors hover:text-primary">
|
|
{new URL(item.url).hostname.replace('www.', '')}
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<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">{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'
|
|
)}>
|
|
{t('dashboard.targetPrice')}: {item.target_price}€
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-end gap-2">
|
|
<span className={cn("text-3xl font-bold tracking-tight leading-none",
|
|
item.target_price && item.current_price <= item.target_price
|
|
? 'text-green-600 dark:text-green-400'
|
|
: 'text-foreground'
|
|
)}>
|
|
{item.current_price ? `${item.current_price}€` : '---'}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Price Confidence Bar */}
|
|
{(item.current_price_confidence !== null && item.current_price_confidence !== undefined) && (
|
|
<div className="group/confidence relative mt-2">
|
|
<div className="h-1.5 w-full overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800">
|
|
<div
|
|
className={cn("h-full rounded-full transition-all duration-500",
|
|
item.current_price_confidence > 0.8 ? 'bg-primary' :
|
|
item.current_price_confidence > 0.5 ? 'bg-primary/70' : 'bg-primary/40'
|
|
)}
|
|
style={{ width: `${item.current_price_confidence * 100}%` }}
|
|
/>
|
|
</div>
|
|
<div className="absolute -bottom-4 left-0 text-[10px] text-muted-foreground opacity-0 transition-opacity group-hover/confidence:opacity-100">
|
|
{t('dashboard.confidence')} (prix): {Math.round(item.current_price_confidence * 100)}%
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Tags */}
|
|
{item.tags && (
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{item.tags.split(',').map(tag => (
|
|
<span key={tag} className="rounded-md border bg-secondary px-2 py-0.5 text-[10px] font-medium text-secondary-foreground">
|
|
{tag.trim()}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Category */}
|
|
<div className="flex items-center gap-2">
|
|
{item.category ? (
|
|
<span className="inline-flex items-center gap-1 rounded-md bg-primary/10 px-2 py-0.5 text-[10px] font-medium text-primary">
|
|
<Tag className="h-2.5 w-2.5" />
|
|
{item.category}
|
|
</span>
|
|
) : null}
|
|
{onCategoryUpdate && (
|
|
<Select
|
|
value={item.category || '_none_'}
|
|
onValueChange={(value) => {
|
|
if (value === '__new__') {
|
|
setShowNewCategoryDialog(true);
|
|
} else {
|
|
onCategoryUpdate(item.id, value === '_none_' ? null : value);
|
|
}
|
|
}}
|
|
>
|
|
<SelectTrigger className="h-6 w-[120px] text-[10px]">
|
|
<Tag className="h-2.5 w-2.5 mr-1" />
|
|
<SelectValue placeholder="Catégorie" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="_none_">Aucune</SelectItem>
|
|
{categories && categories.map(cat => (
|
|
<SelectItem key={cat} value={cat}>{cat}</SelectItem>
|
|
))}
|
|
<SelectItem value="__new__">+ Nouvelle...</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
)}
|
|
</div>
|
|
|
|
{/* New Category Dialog */}
|
|
<Dialog open={showNewCategoryDialog} onOpenChange={setShowNewCategoryDialog}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Nouvelle catégorie</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-4 py-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="category-name">Nom de la catégorie</Label>
|
|
<Input
|
|
id="category-name"
|
|
value={newCategoryName}
|
|
onChange={(e) => setNewCategoryName(e.target.value)}
|
|
placeholder="ex: Électronique"
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' && newCategoryName.trim()) {
|
|
onCategoryUpdate(item.id, newCategoryName.trim());
|
|
setNewCategoryName('');
|
|
setShowNewCategoryDialog(false);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => {
|
|
setNewCategoryName('');
|
|
setShowNewCategoryDialog(false);
|
|
}}>
|
|
Annuler
|
|
</Button>
|
|
<Button onClick={() => {
|
|
if (newCategoryName.trim()) {
|
|
onCategoryUpdate(item.id, newCategoryName.trim());
|
|
setNewCategoryName('');
|
|
setShowNewCategoryDialog(false);
|
|
}
|
|
}} disabled={!newCategoryName.trim()}>
|
|
Créer
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Description */}
|
|
{item.description && (
|
|
<p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">
|
|
{item.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
|
|
<CardFooter className="border-t bg-zinc-50/50 p-3 dark:bg-zinc-900/50">
|
|
<div className="flex w-full items-center justify-between">
|
|
<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('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">{t('common.error')}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex gap-1">
|
|
{onViewHistory && (
|
|
<Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => onViewHistory(item)} title={t('dashboard.history') || "Historique"}>
|
|
<History className="h-3 w-3" />
|
|
</Button>
|
|
)}
|
|
<Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => onEdit(item)} title={t('common.edit') || "Modifier"}>
|
|
<Edit2 className="h-3 w-3" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => onCheck(item.id)} disabled={item.is_refreshing} title={t('dashboard.refresh') || "Forcer la mise à jour"}>
|
|
<RefreshCw className={cn("h-3 w-3", item.is_refreshing && "animate-spin text-primary")} />
|
|
</Button>
|
|
<Button variant="ghost" size="icon" className="h-6 w-6 text-destructive hover:text-destructive" onClick={() => onDelete(item)} title={t('common.delete') || "Supprimer"}>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|