Add files via upload

frontend/src/components/dashboard/DeleteConfirmationModal.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+
+export function DeleteConfirmationModal({ item, onClose, onConfirm, open }) {
+    return (
+        <Dialog open={open} onOpenChange={onClose}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Delete Item</DialogTitle>
+                    <DialogDescription>
+                        Are you sure you want to delete <span className="font-semibold text-foreground">{item?.name}</span>? This action cannot be undone.
+                    </DialogDescription>
+                </DialogHeader>
+                <DialogFooter>
+                    <Button variant="outline" onClick={onClose}>Cancel</Button>
+                    <Button variant="destructive" onClick={onConfirm}>Delete</Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

frontend/src/components/dashboard/ItemCard.jsx

@@ -0,0 +1,173 @@
+import React from 'react';
+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';
+import { Marquee } from '@/components/ui/marquee';
+import { cn } from '@/lib/utils';
+
+export function ItemCard({ item, onEdit, onDelete, onCheck, onZoom }) {
+    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' };
+    };
+
+    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">
+                        No screenshot
+                    </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">Price</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}
+                                </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">
+                                    Price Confidence: {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>
+                    )}
+
+                    {/* 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() : '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>
+                            </div>
+                        )}
+                    </div>
+
+                    <div className="flex gap-1">
+                        <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => onEdit(item)}>
+                            <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}>
+                            <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)}>
+                            <Trash2 className="h-3 w-3" />
+                        </Button>
+                    </div>
+                </div>
+            </CardFooter>
+        </Card>
+    );
+}

frontend/src/components/dashboard/ItemModal.jsx

@@ -0,0 +1,172 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { toast } from 'sonner';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+
+const API_URL = '/api';
+
+export function ItemModal({ item, onClose, onSaved, open }) {
+    const [formData, setFormData] = useState({
+        url: '',
+        name: '',
+        target_price: '',
+        selector: '',
+        tags: '',
+        description: '',
+        notification_profile_id: ''
+    });
+    const [profiles, setProfiles] = useState([]);
+
+    useEffect(() => {
+        if (item) {
+            setFormData({
+                url: item.url || '',
+                name: item.name || '',
+                target_price: item.target_price || '',
+                selector: item.selector || '',
+                tags: item.tags || '',
+                description: item.description || '',
+                notification_profile_id: item.notification_profile_id ? item.notification_profile_id.toString() : ''
+            });
+        } else {
+            setFormData({
+                url: '',
+                name: '',
+                target_price: '',
+                selector: '',
+                tags: '',
+                description: '',
+                notification_profile_id: ''
+            });
+        }
+    }, [item, open]);
+
+    useEffect(() => {
+        if (open) {
+            axios.get(`${API_URL}/notification-profiles`).then(res => setProfiles(res.data)).catch(console.error);
+        }
+    }, [open]);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        try {
+            const payload = {
+                ...formData,
+                target_price: formData.target_price ? parseFloat(formData.target_price) : null,
+                notification_profile_id: formData.notification_profile_id ? parseInt(formData.notification_profile_id) : null
+            };
+
+            if (item) {
+                await axios.put(`${API_URL}/items/${item.id}`, payload);
+                toast.success('Item updated');
+            } else {
+                await axios.post(`${API_URL}/items`, payload);
+                toast.success('Item added');
+            }
+            onSaved();
+            onClose();
+        } catch (error) {
+            console.error('Error saving item:', error);
+            toast.error('Failed to save item');
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onClose}>
+            <DialogContent className="sm:max-w-[500px]">
+                <DialogHeader>
+                    <DialogTitle>{item ? 'Edit Item' : 'Add New Item'}</DialogTitle>
+                </DialogHeader>
+                <form onSubmit={handleSubmit} className="space-y-4 py-4">
+                    <div className="space-y-2">
+                        <Label htmlFor="url">URL</Label>
+                        <Input
+                            id="url"
+                            type="url"
+                            required
+                            placeholder="https://example.com/product"
+                            value={formData.url}
+                            onChange={e => setFormData({ ...formData, url: e.target.value })}
+                        />
+                    </div>
+                    <div className="space-y-2">
+                        <Label htmlFor="name">Name</Label>
+                        <Input
+                            id="name"
+                            required
+                            placeholder="Product Name"
+                            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>
+                            <Input
+                                id="target_price"
+                                type="number"
+                                step="0.01"
+                                placeholder="0.00"
+                                value={formData.target_price}
+                                onChange={e => setFormData({ ...formData, target_price: e.target.value })}
+                            />
+                        </div>
+                        <div className="space-y-2">
+                            <Label htmlFor="selector">Selector (Optional)</Label>
+                            <Input
+                                id="selector"
+                                placeholder=".price-class"
+                                value={formData.selector}
+                                onChange={e => setFormData({ ...formData, selector: e.target.value })}
+                            />
+                        </div>
+                    </div>
+                    <div className="space-y-2">
+                        <Label htmlFor="profile">Notification Profile</Label>
+                        <Select
+                            value={formData.notification_profile_id}
+                            onValueChange={(value) => setFormData({ ...formData, notification_profile_id: value })}
+                        >
+                            <SelectTrigger>
+                                <SelectValue placeholder="Select a profile" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="none">None</SelectItem>
+                                {profiles.map(p => (
+                                    <SelectItem key={p.id} value={p.id.toString()}>{p.name}</SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+                    <div className="space-y-2">
+                        <Label htmlFor="tags">Tags</Label>
+                        <Input
+                            id="tags"
+                            placeholder="tech, home, gift (comma separated)"
+                            value={formData.tags}
+                            onChange={e => setFormData({ ...formData, tags: e.target.value })}
+                        />
+                    </div>
+                    <div className="space-y-2">
+                        <Label htmlFor="description">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..."
+                            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>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}