feat: add core PWA screens (auth, dashboard, purchases, products, alerts, settings)

Build all 8 primary screens for CAR-33 on top of the Phase 1 scaffold:
- Auth: login, register, forgot password with JWT flow and mock fallback
- Dashboard: triggered alerts banner, spending stats, price trend sparklines (Recharts), recent purchases
- Purchase History: store filter chips, paginated list with item previews
- Purchase Detail: receipt view with line items linking to product pages
- Products: search with instant filter, store price comparison badges
- Product Detail: 90-day price history chart (Recharts), store comparison table
- Store Comparison: ranked store cards with savings banner
- Price Alerts: triggered/watching sections, create form, progress bars, delete
- Coupons: expiration warnings, copy-to-clipboard coupon codes
- Account Linking: connect Meijer/Kroger/Target with status indicators
- Settings: profile, connected stores, notification toggles, theme switcher, sign out

Also adds:
- Mock data layer (src/lib/mock-data.ts) for demo/screenshot use
- StoreIcon component with store brand colors
- Code-split Recharts chunk (initial JS: 117KB, Recharts lazy: 498KB)
- All 48px+ touch targets, mobile-first Tailwind layout

Co-Authored-By: Paperclip <noreply@paperclip.ing>

src/pages/PurchaseDetail.tsx

@@ -0,0 +1,84 @@
+import { useParams, Link } from 'react-router-dom'
+import { mockPurchases } from '../lib/mock-data.ts'
+import { StoreIcon } from '../components/StoreIcon.tsx'
+
+export function PurchaseDetail() {
+  const { id } = useParams<{ id: string }>()
+  const purchase = mockPurchases.find((p) => p.id === id)
+
+  if (!purchase) {
+    return (
+      <div className="py-8 text-center">
+        <p className="text-sm text-gray-500">Purchase not found.</p>
+        <Link to="/purchases" className="mt-4 inline-block text-sm text-brand-blue">
+          Back to purchases
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      {/* Back link */}
+      <Link to="/purchases" className="inline-flex items-center gap-1 text-sm text-brand-blue">
+        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+        </svg>
+        Purchases
+      </Link>
+
+      {/* Receipt header */}
+      <div className="mt-4 rounded-xl bg-white p-4 shadow-sm">
+        <div className="flex items-center gap-3">
+          <StoreIcon storeId={purchase.storeId} />
+          <div>
+            <h1 className="text-lg font-bold text-gray-900">{purchase.storeName}</h1>
+            <p className="text-sm text-gray-500">
+              {new Date(purchase.date).toLocaleDateString('en-US', {
+                weekday: 'long',
+                month: 'long',
+                day: 'numeric',
+                year: 'numeric',
+              })}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Line items */}
+      <div className="mt-4 rounded-xl bg-white shadow-sm">
+        <div className="divide-y divide-gray-100">
+          {purchase.items.map((item) => (
+            <Link
+              key={item.id}
+              to={`/products/${item.productId}`}
+              className="flex items-center justify-between px-4 py-3 active:bg-gray-50"
+            >
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-medium text-gray-900">{item.name}</p>
+                {item.quantity > 1 && (
+                  <p className="text-xs text-gray-500">
+                    {item.quantity} × ${item.unitPrice.toFixed(2)}
+                  </p>
+                )}
+              </div>
+              <span className="ml-4 text-sm font-medium text-gray-900">
+                ${item.price.toFixed(2)}
+              </span>
+            </Link>
+          ))}
+        </div>
+
+        {/* Total */}
+        <div className="border-t-2 border-gray-200 px-4 py-3">
+          <div className="flex items-center justify-between">
+            <span className="text-base font-bold text-gray-900">Total</span>
+            <span className="text-base font-bold text-gray-900">
+              ${purchase.total.toFixed(2)}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}