Add files via upload

frontend/src/App.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+import { Toaster } from 'sonner'
+import Layout from '@/components/layout/Layout'
+import Dashboard from '@/pages/Dashboard'
+import Settings from '@/pages/Settings'
+import { useTheme } from '@/hooks/use-theme'
+
+export default function App() {
+    const { theme, toggleTheme } = useTheme();
+
+    return (
+        <Router>
+            <Toaster position="bottom-right" theme={theme} />
+            <Layout theme={theme} toggleTheme={toggleTheme}>
+                <Routes>
+                    <Route path="/" element={<Dashboard />} />
+                    <Route path="/settings" element={<Settings />} />
+                </Routes>
+            </Layout>
+        </Router>
+    );
+}

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>
+    );
+}

frontend/src/components/layout/Layout.jsx

@@ -0,0 +1,146 @@
+import React, { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+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 location = useLocation();
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+    const navItems = [
+        { icon: LayoutDashboard, label: 'Dashboard', path: '/' },
+        { icon: Settings, label: 'Settings', path: '/settings' },
+    ];
+
+    return (
+        <div className="min-h-screen bg-background font-sans antialiased">
+            {/* Sidebar */}
+            <aside className="fixed left-0 top-0 z-40 h-screen w-64 border-r bg-card hidden md:block">
+                <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" />
+                            <span className="text-xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
+                                Pricecious
+                            </span>
+                        </Link>
+                    </div>
+                    <nav className="flex-1 space-y-1 p-4">
+                        {navItems.map((item) => {
+                            const Icon = item.icon;
+                            const isActive = location.pathname === item.path;
+                            return (
+                                <Link key={item.path} to={item.path}>
+                                    <Button
+                                        variant={isActive ? "secondary" : "ghost"}
+                                        className={cn("w-full justify-start gap-2", isActive && "bg-secondary")}
+                                    >
+                                        <Icon className="h-4 w-4" />
+                                        {item.label}
+                                    </Button>
+                                </Link>
+                            );
+                        })}
+                    </nav>
+                    <div className="border-t p-4">
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={toggleTheme}
+                            className="w-full justify-start gap-2 px-4"
+                        >
+                            {theme === 'dark' ? (
+                                <>
+                                    <Sun className="h-4 w-4" />
+                                    <span>Light Mode</span>
+                                </>
+                            ) : (
+                                <>
+                                    <Moon className="h-4 w-4" />
+                                    <span>Dark Mode</span>
+                                </>
+                            )}
+                        </Button>
+                    </div>
+                </div>
+            </aside>
+
+            {/* Mobile Header */}
+            <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-6 md:hidden">
+                <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
+                    <SheetTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                            <Menu className="h-5 w-5" />
+                        </Button>
+                    </SheetTrigger>
+                    <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" />
+                                <span className="text-xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
+                                    Pricecious
+                                </span>
+                            </div>
+                            <nav className="flex-1 space-y-1 p-4">
+                                {navItems.map((item) => {
+                                    const Icon = item.icon;
+                                    const isActive = location.pathname === item.path;
+                                    return (
+                                        <Link key={item.path} to={item.path} onClick={() => setMobileMenuOpen(false)}>
+                                            <Button
+                                                variant={isActive ? "secondary" : "ghost"}
+                                                className={cn("w-full justify-start gap-2", isActive && "bg-secondary")}
+                                            >
+                                                <Icon className="h-4 w-4" />
+                                                {item.label}
+                                            </Button>
+                                        </Link>
+                                    );
+                                })}
+                            </nav>
+                            <div className="border-t p-4">
+                                <Button
+                                    variant="ghost"
+                                    onClick={toggleTheme}
+                                    className="w-full justify-start gap-2"
+                                >
+                                    {theme === 'dark' ? (
+                                        <>
+                                            <Sun className="h-4 w-4" />
+                                            <span>Light Mode</span>
+                                        </>
+                                    ) : (
+                                        <>
+                                            <Moon className="h-4 w-4" />
+                                            <span>Dark Mode</span>
+                                        </>
+                                    )}
+                                </Button>
+                            </div>
+                        </div>
+                    </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
+                </Link>
+                <div className="ml-auto flex items-center gap-2">
+                    <Button variant="ghost" size="icon" onClick={toggleTheme}>
+                        {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+                    </Button>
+                </div>
+            </header>
+
+            {/* Main Content */}
+            <main className="flex-1 md:pl-64">
+                <div className="container py-6">
+                    {children}
+                </div>
+            </main>
+        </div>
+    );
+};
+
+export default Layout;

frontend/src/components/ui/button.jsx

@@ -0,0 +1,38 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+    "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+    {
+        variants: {
+            variant: {
+                default: "bg-primary text-primary-foreground hover:bg-primary/90",
+                destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+                outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+                secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                ghost: "hover:bg-accent hover:text-accent-foreground",
+                link: "text-primary underline-offset-4 hover:underline",
+            },
+            size: {
+                default: "h-10 px-4 py-2",
+                sm: "h-9 rounded-md px-3",
+                lg: "h-11 rounded-md px-8",
+                icon: "h-10 w-10",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    }
+)
+
+const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+})
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

frontend/src/components/ui/card.jsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            "rounded-lg border bg-card text-card-foreground shadow-sm",
+            className
+        )}
+        {...props}
+    />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("flex flex-col space-y-1.5 p-6", className)}
+        {...props}
+    />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+    <h3
+        ref={ref}
+        className={cn(
+            "text-2xl font-semibold leading-none tracking-tight",
+            className
+        )}
+        {...props}
+    />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+    <p
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("flex items-center p-6 pt-0", className)}
+        {...props}
+    />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

frontend/src/components/ui/dialog.jsx

@@ -0,0 +1,107 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+    <DialogPrimitive.Overlay
+        ref={ref}
+        className={cn(
+            "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            className
+        )}
+        {...props}
+    />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (
+    <DialogPortal>
+        <DialogOverlay />
+        <DialogPrimitive.Content
+            ref={ref}
+            className={cn(
+                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+                className
+            )}
+            {...props}
+        >
+            {children}
+            <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+    </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+    className,
+    ...props
+}) => (
+    <div
+        className={cn(
+            "flex flex-col space-y-1.5 text-center sm:text-left",
+            className
+        )}
+        {...props}
+    />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+    className,
+    ...props
+}) => (
+    <div
+        className={cn(
+            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+            className
+        )}
+        {...props}
+    />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+        ref={ref}
+        className={cn(
+            "text-lg font-semibold leading-none tracking-tight",
+            className
+        )}
+        {...props}
+    />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+    <DialogPrimitive.Description
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+    Dialog,
+    DialogPortal,
+    DialogOverlay,
+    DialogClose,
+    DialogTrigger,
+    DialogContent,
+    DialogHeader,
+    DialogFooter,
+    DialogTitle,
+    DialogDescription,
+}

frontend/src/components/ui/input.jsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+    return (
+        <input
+            type={type}
+            className={cn(
+                "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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",
+                className
+            )}
+            ref={ref}
+            {...props}
+        />
+    )
+})
+Input.displayName = "Input"
+
+export { Input }

frontend/src/components/ui/label.jsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+    "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef(({ className, ...props }, ref) => (
+    <LabelPrimitive.Root
+        ref={ref}
+        className={cn(labelVariants(), className)}
+        {...props}
+    />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

frontend/src/components/ui/marquee.jsx

@@ -0,0 +1,38 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { cn } from '@/lib/utils'
+
+export function Marquee({ text, className }) {
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    const containerRef = useRef(null);
+    const textRef = useRef(null);
+
+    useEffect(() => {
+        const checkOverflow = () => {
+            if (containerRef.current && textRef.current) {
+                const isOver = textRef.current.scrollWidth > containerRef.current.clientWidth;
+                setIsOverflowing(isOver);
+                if (isOver) {
+                    const distance = textRef.current.scrollWidth + 32; // 32px gap
+                    containerRef.current.style.setProperty('--marquee-duration', `${distance / 40}s`); // 40px/s speed
+                    containerRef.current.style.setProperty('--marquee-distance', `${distance}px`);
+                }
+            }
+        };
+
+        checkOverflow();
+        window.addEventListener('resize', checkOverflow);
+        return () => window.removeEventListener('resize', checkOverflow);
+    }, [text]);
+
+    return (
+        <div ref={containerRef} className={cn("overflow-hidden w-full group", className)}>
+            <div
+                ref={textRef}
+                className={cn("whitespace-nowrap flex gap-8", isOverflowing && "group-hover:animate-scroll")}
+            >
+                <span>{text}</span>
+                {isOverflowing && <span aria-hidden="true">{text}</span>}
+            </div>
+        </div>
+    );
+}

frontend/src/components/ui/select.jsx

@@ -0,0 +1,136 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Trigger
+        ref={ref}
+        className={cn(
+            "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+            className
+        )}
+        {...props}
+    >
+        {children}
+        <SelectPrimitive.Icon asChild>
+            <ChevronDown className="h-4 w-4 opacity-50" />
+        </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
+    <SelectPrimitive.ScrollUpButton
+        ref={ref}
+        className={cn(
+            "flex cursor-default items-center justify-center py-1",
+            className
+        )}
+        {...props}
+    >
+        <ChevronUp className="h-4 w-4" />
+    </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
+    <SelectPrimitive.ScrollDownButton
+        ref={ref}
+        className={cn(
+            "flex cursor-default items-center justify-center py-1",
+            className
+        )}
+        {...props}
+    >
+        <ChevronDown className="h-4 w-4" />
+    </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+    SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (
+    <SelectPrimitive.Portal>
+        <SelectPrimitive.Content
+            ref={ref}
+            className={cn(
+                "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+                position === "popper" &&
+                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+                className
+            )}
+            position={position}
+            {...props}
+        >
+            <SelectScrollUpButton />
+            <SelectPrimitive.Viewport
+                className={cn(
+                    "p-1",
+                    position === "popper" &&
+                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+                )}
+            >
+                {children}
+            </SelectPrimitive.Viewport>
+            <SelectScrollDownButton />
+        </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
+    <SelectPrimitive.Label
+        ref={ref}
+        className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+        {...props}
+    />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Item
+        ref={ref}
+        className={cn(
+            "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            className
+        )}
+        {...props}
+    >
+        <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <SelectPrimitive.ItemIndicator>
+                <Check className="h-4 w-4" />
+            </SelectPrimitive.ItemIndicator>
+        </span>
+
+        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
+    <SelectPrimitive.Separator
+        ref={ref}
+        className={cn("-mx-1 my-1 h-px bg-muted", className)}
+        {...props}
+    />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+    Select,
+    SelectGroup,
+    SelectValue,
+    SelectTrigger,
+    SelectContent,
+    SelectLabel,
+    SelectItem,
+    SelectSeparator,
+    SelectScrollUpButton,
+    SelectScrollDownButton,
+}

frontend/src/components/ui/sheet.jsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva } from "class-variance-authority"
+import { X } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => (
+    <SheetPrimitive.Overlay
+        className={cn(
+            "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            className
+        )}
+        {...props}
+        ref={ref}
+    />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+    "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+    {
+        variants: {
+            side: {
+                top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+                bottom:
+                    "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+                left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+                right:
+                    "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+            },
+        },
+        defaultVariants: {
+            side: "right",
+        },
+    }
+)
+
+const SheetContent = React.forwardRef(({ side = "right", className, children, ...props }, ref) => (
+    <SheetPortal>
+        <SheetOverlay />
+        <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+            {children}
+            <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+            </SheetPrimitive.Close>
+        </SheetPrimitive.Content>
+    </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+    className,
+    ...props
+}) => (
+    <div
+        className={cn(
+            "flex flex-col space-y-2 text-center sm:text-left",
+            className
+        )}
+        {...props}
+    />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+    className,
+    ...props
+}) => (
+    <div
+        className={cn(
+            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+            className
+        )}
+        {...props}
+    />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef(({ className, ...props }, ref) => (
+    <SheetPrimitive.Title
+        ref={ref}
+        className={cn("text-lg font-semibold text-foreground", className)}
+        {...props}
+    />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef(({ className, ...props }, ref) => (
+    <SheetPrimitive.Description
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+    Sheet,
+    SheetPortal,
+    SheetOverlay,
+    SheetTrigger,
+    SheetClose,
+    SheetContent,
+    SheetHeader,
+    SheetFooter,
+    SheetTitle,
+    SheetDescription,
+}

frontend/src/components/ui/slider.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+const Slider = React.forwardRef(({ className, ...props }, ref) => (
+    <input
+        type="range"
+        className={cn(
+            "w-full h-2 bg-zinc-200 rounded-lg appearance-none cursor-pointer dark:bg-zinc-700 accent-primary",
+            className
+        )}
+        ref={ref}
+        {...props}
+    />
+));
+Slider.displayName = "Slider";
+
+export { Slider };

frontend/src/components/ui/switch.jsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef(({ className, ...props }, ref) => (
+    <SwitchPrimitive.Root
+        className={cn(
+            "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+            className
+        )}
+        {...props}
+        ref={ref}
+    >
+        <SwitchPrimitive.Thumb
+            className={cn(
+                "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+            )}
+        />
+    </SwitchPrimitive.Root>
+))
+Switch.displayName = SwitchPrimitive.Root.displayName
+
+export { Switch }

frontend/src/hooks/use-theme.js

@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react';
+
+export function useTheme() {
+    const [theme, setTheme] = useState(localStorage.getItem('theme') || 'dark');
+
+    useEffect(() => {
+        const root = window.document.documentElement;
+        root.classList.remove('light', 'dark');
+        root.classList.add(theme);
+        localStorage.setItem('theme', theme);
+    }, [theme]);
+
+    const toggleTheme = () => setTheme(prev => prev === 'dark' ? 'light' : 'dark');
+
+    return { theme, toggleTheme };
+}

frontend/src/index.css

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+ 
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+ 
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+ 
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+ 
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+ 
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+ 
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+ 
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+ 
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+ 
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+ 
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+ 
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+ 
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

frontend/src/lib/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+    return twMerge(clsx(inputs))
+}

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+)

frontend/src/pages/Dashboard.jsx

@@ -0,0 +1,172 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { toast } from 'sonner';
+import { Plus, RefreshCw, Search, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { ItemCard } from '@/components/dashboard/ItemCard';
+import { ItemModal } from '@/components/dashboard/ItemModal';
+import { DeleteConfirmationModal } from '@/components/dashboard/DeleteConfirmationModal';
+
+const API_URL = '/api';
+
+export default function Dashboard() {
+    const [items, setItems] = useState([]);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [showAddModal, setShowAddModal] = useState(false);
+    const [editingItem, setEditingItem] = useState(null);
+    const [itemToDelete, setItemToDelete] = useState(null);
+    const [zoomedImage, setZoomedImage] = useState(null);
+
+    const refreshItems = async () => {
+        try {
+            const response = await axios.get(`${API_URL}/items`);
+            const sortedItems = response.data.sort((a, b) => a.id - b.id);
+            setItems(sortedItems);
+        } catch (error) {
+            console.error('Error fetching items:', error);
+            toast.error('Failed to fetch items');
+        }
+    };
+
+    useEffect(() => {
+        refreshItems();
+        const interval = setInterval(refreshItems, 10000);
+        return () => clearInterval(interval);
+    }, []);
+
+    const handleCheck = async (id) => {
+        try {
+            toast.info('Check triggered...');
+            await axios.post(`${API_URL}/items/${id}/check`);
+            toast.success('Check started in background');
+            refreshItems();
+        } catch (error) {
+            console.error('Error triggering check:', error);
+            toast.error('Failed to trigger check');
+        }
+    };
+
+    const handleRefreshAll = async () => {
+        try {
+            toast.info('Triggering refresh for all items...');
+            setItems(prevItems => prevItems.map(item => ({ ...item, is_refreshing: true })));
+            await axios.post(`${API_URL}/jobs/refresh-all`);
+            toast.success('Refresh all started');
+        } catch (error) {
+            console.error('Error triggering refresh all:', error);
+            toast.error('Failed to trigger refresh all');
+            refreshItems();
+        }
+    };
+
+    const handleDelete = async () => {
+        if (!itemToDelete) return;
+        try {
+            await axios.delete(`${API_URL}/items/${itemToDelete.id}`);
+            toast.success('Item deleted');
+            refreshItems();
+            setItemToDelete(null);
+        } catch (error) {
+            console.error('Error deleting item:', error);
+            toast.error('Failed to delete item');
+        }
+    };
+
+    const filteredItems = items.filter(item => {
+        const term = searchTerm.toLowerCase();
+        return (
+            item.name.toLowerCase().includes(term) ||
+            item.url.toLowerCase().includes(term) ||
+            (item.tags && item.tags.toLowerCase().includes(term)) ||
+            (item.description && item.description.toLowerCase().includes(term))
+        );
+    });
+
+    return (
+        <div className="space-y-6 animate-in fade-in duration-500">
+            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+                <div>
+                    <h2 className="text-2xl font-bold tracking-tight">Dashboard</h2>
+                    <p className="text-muted-foreground">Manage and monitor your product watchlist.</p>
+                </div>
+                <div className="flex items-center gap-2">
+                    <div className="relative w-full md:w-64">
+                        <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                        <Input
+                            placeholder="Search items..."
+                            className="pl-8"
+                            value={searchTerm}
+                            onChange={(e) => setSearchTerm(e.target.value)}
+                        />
+                    </div>
+                    <Button variant="outline" onClick={handleRefreshAll}>
+                        <RefreshCw className="mr-2 h-4 w-4" />
+                        Refresh All
+                    </Button>
+                    <Button onClick={() => setShowAddModal(true)}>
+                        <Plus className="mr-2 h-4 w-4" />
+                        Add Item
+                    </Button>
+                </div>
+            </div>
+
+            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                {filteredItems.map(item => (
+                    <ItemCard
+                        key={item.id}
+                        item={item}
+                        onEdit={setEditingItem}
+                        onDelete={setItemToDelete}
+                        onCheck={handleCheck}
+                        onZoom={setZoomedImage}
+                    />
+                ))}
+            </div>
+
+            <ItemModal
+                open={showAddModal}
+                onClose={() => setShowAddModal(false)}
+                onSaved={refreshItems}
+            />
+
+            <ItemModal
+                open={!!editingItem}
+                item={editingItem}
+                onClose={() => setEditingItem(null)}
+                onSaved={refreshItems}
+            />
+
+            <DeleteConfirmationModal
+                open={!!itemToDelete}
+                item={itemToDelete}
+                onClose={() => setItemToDelete(null)}
+                onConfirm={handleDelete}
+            />
+
+            {/* Image Zoom Modal */}
+            {zoomedImage && (
+                <div
+                    className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4 animate-in fade-in duration-200"
+                    onClick={() => setZoomedImage(null)}
+                >
+                    <div className="relative max-h-full max-w-full">
+                        <img
+                            src={zoomedImage}
+                            alt="Zoomed screenshot"
+                            className="max-h-[90vh] max-w-[90vw] rounded-lg shadow-2xl"
+                        />
+                        <Button
+                            size="icon"
+                            variant="secondary"
+                            className="absolute -right-4 -top-4 rounded-full shadow-lg"
+                            onClick={() => setZoomedImage(null)}
+                        >
+                            <X className="h-4 w-4" />
+                        </Button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

frontend/src/pages/Settings.jsx

@@ -0,0 +1,471 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { toast } from 'sonner';
+import { Sun, Clock, Cpu, Settings as SettingsIcon, Bell, Trash2, ChevronDown, ChevronUp, Edit2, CheckCircle2, AlertCircle, TrendingDown, DollarSign, Package } from 'lucide-react';
+import { 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';
+
+export default function Settings() {
+    const [profiles, setProfiles] = 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 [newProfile, setNewProfile] = 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
+    });
+
+    const [editingProfileId, setEditingProfileId] = useState(null);
+    const [showAdvancedAI, setShowAdvancedAI] = useState(false);
+
+    useEffect(() => {
+        fetchAll();
+    }, []);
+
+    const fetchAll = async () => {
+        try {
+            const [profilesRes, settingsRes, jobRes] = await Promise.all([
+                axios.get(`${API_URL}/notification-profiles`),
+                axios.get(`${API_URL}/settings`),
+                axios.get(`${API_URL}/jobs/config`)
+            ]);
+
+            setProfiles(profilesRes.data);
+            setJobConfig(jobRes.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 handleProfileSubmit = async (e) => {
+        e.preventDefault();
+        try {
+            if (editingProfileId) {
+                await axios.put(`${API_URL}/notification-profiles/${editingProfileId}`, newProfile);
+                toast.success('Profile updated');
+            } else {
+                await axios.post(`${API_URL}/notification-profiles`, newProfile);
+                toast.success('Profile created');
+            }
+
+            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);
+            fetchAll();
+        } catch (error) {
+            toast.error(editingProfileId ? 'Failed to update profile' : 'Failed to create profile');
+        }
+    };
+
+    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
+        });
+        setEditingProfileId(profile.id);
+        window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+    };
+
+    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
+        });
+        setEditingProfileId(null);
+    };
+
+    const deleteProfile = async (id) => {
+        if (confirm('Are you sure you want to delete this profile?')) {
+            try {
+                await axios.delete(`${API_URL}/notification-profiles/${id}`);
+                toast.success('Profile deleted');
+                if (editingProfileId === id) {
+                    cancelEdit();
+                }
+                fetchAll();
+            } catch (error) {
+                toast.error('Failed to delete profile');
+            }
+        }
+    };
+
+    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>Provider</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>
+                                </SelectContent>
+                            </Select>
+                        </div>
+                        <div className="space-y-2">
+                            <Label>Model</Label>
+                            <Input value={config.ai_model} onChange={(e) => updateSetting('ai_model', e.target.value)} placeholder="e.g., moondream" />
+                        </div>
+                    </div>
+                    <div className="space-y-2">
+                        <Label>API Key</Label>
+                        <Input type="password" value={config.ai_api_key} onChange={(e) => updateSetting('ai_api_key', e.target.value)} placeholder="Optional for local models" />
+                    </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>
+
+            {/* Notification Profiles */}
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2"><Bell className="h-5 w-5" />Notification Profiles</CardTitle>
+                    <CardDescription>Manage notification settings for different groups of items.</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-8">
+                    <form onSubmit={handleProfileSubmit} className="space-y-4 border-b pb-8">
+                        <div className="flex items-center justify-between">
+                            <h4 className="text-sm font-medium">{editingProfileId ? 'Edit Profile' : 'Create New Profile'}</h4>
+                            {editingProfileId && (
+                                <Button type="button" variant="ghost" size="sm" onClick={cancelEdit}>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={newProfile.name} onChange={(e) => setNewProfile({ ...newProfile, name: e.target.value })} placeholder="e.g., Email Alerts" />
+                            </div>
+                            <div className="space-y-2">
+                                <Label>Apprise URL</Label>
+                                <Input required value={newProfile.apprise_url} onChange={(e) => setNewProfile({ ...newProfile, apprise_url: e.target.value })} placeholder="mailto://user:pass@gmail.com" />
+                            </div>
+                        </div>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div className="space-y-2">
+                                <Label>Check Interval (Minutes)</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>Price Drop Threshold (%)</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>
+                        </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>Notify on Drop</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>Notify on Target</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>Notify on Stock Change</Label>
+                            </div>
+                        </div>
+                        <Button type="submit">{editingProfileId ? 'Update Profile' : 'Create Profile'}</Button>
+                    </form>
+
+                    <div className="space-y-4">
+                        <h4 className="text-sm font-medium">Existing Profiles</h4>
+                        {profiles.length === 0 ? (
+                            <p className="text-sm text-muted-foreground">No profiles 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 overflow-hidden rounded-xl border bg-card text-card-foreground shadow transition-all hover:shadow-md",
+                                        editingProfileId === profile.id && "ring-2 ring-primary"
+                                    )}>
+                                        <div className="p-6 space-y-4">
+                                            <div className="flex items-start justify-between">
+                                                <div>
+                                                    <h3 className="font-semibold leading-none tracking-tight">{profile.name}</h3>
+                                                    <p className="text-sm text-muted-foreground mt-1 truncate max-w-[200px]" title={profile.apprise_url}>{profile.apprise_url}</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={() => editProfile(profile)}>
+                                                        <Edit2 className="h-4 w-4" />
+                                                    </Button>
+                                                    <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive hover: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 interval</span>
+                                                </div>
+                                                <div className="flex items-center gap-2">
+                                                    <TrendingDown className="h-4 w-4 text-muted-foreground" />
+                                                    <span>{profile.price_drop_threshold_percent}% drop</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 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
+                                                        <DollarSign className="mr-1 h-3 w-3" /> Price Drop
+                                                    </span>
+                                                )}
+                                                {profile.notify_on_target_price && (
+                                                    <span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
+                                                        <CheckCircle2 className="mr-1 h-3 w-3" /> Target Hit
+                                                    </span>
+                                                )}
+                                                {profile.notify_on_stock_change && (
+                                                    <span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
+                                                        <Package className="mr-1 h-3 w-3" /> Stock Change
+                                                    </span>
+                                                )}
+                                            </div>
+                                        </div>
+                                        <div className="absolute top-0 right-0 p-6 opacity-5 pointer-events-none">
+                                            <Bell className="h-24 w-24" />
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}