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>
This commit is contained in:
Frontend Frankie
@@ -0,0 +1,187 @@
|
||||
import { useParams, Link } from 'react-router-dom'
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
} from 'recharts'
|
||||
import { mockProducts, getMockPriceHistory } from '../lib/mock-data.ts'
|
||||
|
||||
const storeLineColors: Record<string, string> = {
|
||||
meijer: '#e31837',
|
||||
kroger: '#0068a8',
|
||||
target: '#cc0000',
|
||||
}
|
||||
|
||||
export function ProductDetail() {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
const product = mockProducts.find((p) => p.id === id)
|
||||
|
||||
if (!product) {
|
||||
return (
|
||||
<div className="py-8 text-center">
|
||||
<p className="text-sm text-gray-500">Product not found.</p>
|
||||
<Link to="/products" className="mt-4 inline-block text-sm text-brand-blue">
|
||||
Back to products
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const history = getMockPriceHistory(product.id)
|
||||
const lowestPrice = Math.min(...product.prices.map((p) => p.price))
|
||||
|
||||
// Reshape history for chart: { date, meijer, kroger, target }
|
||||
const chartData: Record<string, string | number>[] = []
|
||||
const dateMap = new Map<string, Record<string, string | number>>()
|
||||
for (const h of history) {
|
||||
if (!dateMap.has(h.date)) {
|
||||
dateMap.set(h.date, { date: h.date })
|
||||
}
|
||||
dateMap.get(h.date)![h.storeId] = h.price
|
||||
}
|
||||
for (const entry of dateMap.values()) {
|
||||
chartData.push(entry)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Back link */}
|
||||
<Link to="/products" 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>
|
||||
Products
|
||||
</Link>
|
||||
|
||||
{/* Product header */}
|
||||
<div className="mt-4">
|
||||
<h1 className="text-2xl font-bold text-gray-900">{product.name}</h1>
|
||||
<p className="text-sm text-gray-500">
|
||||
{product.brand} · {product.category}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Price history chart */}
|
||||
<section className="mt-6">
|
||||
<h2 className="mb-3 text-lg font-semibold text-gray-700">Price History (90 days)</h2>
|
||||
<div className="rounded-xl bg-white p-4 shadow-sm">
|
||||
<div className="h-52">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tick={{ fontSize: 10 }}
|
||||
tickFormatter={(d: string) => {
|
||||
const dt = new Date(d)
|
||||
return `${dt.getMonth() + 1}/${dt.getDate()}`
|
||||
}}
|
||||
interval="preserveStartEnd"
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 10 }}
|
||||
domain={['auto', 'auto']}
|
||||
tickFormatter={(v: number) => `$${v.toFixed(2)}`}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(value) => `$${Number(value).toFixed(2)}`}
|
||||
labelFormatter={(label) =>
|
||||
new Date(String(label)).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})
|
||||
}
|
||||
/>
|
||||
<Legend />
|
||||
{['meijer', 'kroger', 'target'].map((store) => (
|
||||
<Line
|
||||
key={store}
|
||||
type="monotone"
|
||||
dataKey={store}
|
||||
name={store.charAt(0).toUpperCase() + store.slice(1)}
|
||||
stroke={storeLineColors[store]}
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
/>
|
||||
))}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Store comparison table */}
|
||||
<section className="mt-6">
|
||||
<h2 className="mb-3 text-lg font-semibold text-gray-700">Store Comparison</h2>
|
||||
<div className="rounded-xl bg-white shadow-sm">
|
||||
<div className="divide-y divide-gray-100">
|
||||
{product.prices
|
||||
.slice()
|
||||
.sort((a, b) => a.price - b.price)
|
||||
.map((pp) => (
|
||||
<div
|
||||
key={pp.storeId}
|
||||
className="flex items-center justify-between px-4 py-3"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={`inline-flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold text-white ${
|
||||
pp.storeId === 'meijer'
|
||||
? 'bg-meijer-red'
|
||||
: pp.storeId === 'kroger'
|
||||
? 'bg-kroger-blue'
|
||||
: 'bg-target-red'
|
||||
}`}
|
||||
>
|
||||
{pp.storeName.charAt(0)}
|
||||
</span>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900">{pp.storeName}</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
Updated{' '}
|
||||
{new Date(pp.lastUpdated).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p
|
||||
className={`text-sm font-bold ${
|
||||
pp.price === lowestPrice ? 'text-green-700' : 'text-gray-900'
|
||||
}`}
|
||||
>
|
||||
${pp.price.toFixed(2)}
|
||||
</p>
|
||||
{pp.price === lowestPrice && (
|
||||
<span className="text-xs text-green-600">Best price</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="mt-6 space-y-3 pb-4">
|
||||
<Link
|
||||
to="/alerts"
|
||||
className="flex min-h-12 items-center justify-center rounded-xl bg-brand-blue px-4 py-3 text-base font-medium text-white active:bg-brand-blue/90"
|
||||
>
|
||||
Set Price Alert
|
||||
</Link>
|
||||
<Link
|
||||
to={`/compare/${product.id}`}
|
||||
className="flex min-h-12 items-center justify-center rounded-xl border border-gray-200 px-4 py-3 text-base font-medium text-gray-700 active:bg-gray-50"
|
||||
>
|
||||
Compare at Nearby Stores
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user