feat: dashboard UI with product cards + sparklines

src/components/ProductCard.tsx

@@ -0,0 +1,37 @@
+import Link from 'next/link'
+import { Sparkline } from './Sparkline'
+
+interface Props {
+  id: string
+  name: string
+  shop: string
+  imageUrl: string | null
+  lastPrice: string | null
+  minPrice: string | null
+  sparkline: Array<{ price: number; t: string }>
+}
+
+export function ProductCard(p: Props) {
+  const last = p.lastPrice ? Number(p.lastPrice) : null
+  const min = p.minPrice ? Number(p.minPrice) : null
+  const deltaFromMin = last !== null && min !== null ? (last - min).toFixed(2) : null
+
+  return (
+    <Link href={`/products/${p.id}`} className="block rounded-lg border border-zinc-800 bg-zinc-900 p-4 hover:border-zinc-700 transition">
+      <div className="flex gap-3">
+        {p.imageUrl && <img src={p.imageUrl} alt="" className="h-16 w-16 object-contain rounded bg-white" />}
+        <div className="flex-1 min-w-0">
+          <div className="text-xs uppercase tracking-wide text-zinc-500">{p.shop}</div>
+          <div className="truncate text-sm font-medium">{p.name}</div>
+          <div className="mt-1 flex items-baseline gap-2">
+            <span className="text-lg font-semibold">{last !== null ? `${last.toFixed(2)} €` : '—'}</span>
+            {deltaFromMin !== null && (
+              <span className="text-xs text-zinc-400">+{deltaFromMin} € vom Tief</span>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="mt-2"><Sparkline data={p.sparkline} /></div>
+    </Link>
+  )
+}