Public Access
feat: full UI redesign with design system, Nielsen heuristics compliance
- Install lucide-react, framer-motion, react-hot-toast, clsx, tailwind-merge - Custom Tailwind config: semantic color tokens, Inter font, shadow scale, border radius scale, custom animations (fadeIn, slideUp, shimmer) - Shared component library: Button, Badge, Card, Input, Select, Textarea, EmptyState, Skeleton, LoadingSpinner - Global CSS with @layer components (.btn, .card, .input, .badge, .skeleton) - Toast notification system via react-hot-toast + showToast utility - ErrorBoundary wrapper for graceful error recovery - Redesigned navigation: sticky, active state indicators, Lucide icons - Dashboard: hero header, today highlighting, scrollable week grid, redesigned meal cards, empty states, skeleton loading - Meal Detail: hero image with gradient overlay, metadata row with icons, Lucide star rating, edit-existing-feedback flow - Pantry: inline add form, search/filter, visual quantity badges, expiry warnings, confirmation dialogs - Shopping List: gradient summary cards, aisle grouping with badges, sale strikethrough pricing, empty state - Login: centered card with icon, Input component, Button component - All old gray/blue utility classes migrated to new surface/primary tokens - TypeScript clean, production build passes
This commit is contained in:
@@ -1,6 +1,44 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Printer, ShoppingCart, Package, Tag, Receipt } from 'lucide-react'
|
||||
import { mealPlannerApi } from '../api'
|
||||
import type { ShoppingList } from '../types'
|
||||
import { Button } from '../components/ui/Button'
|
||||
import { Badge } from '../components/ui/Badge'
|
||||
import { Card, CardBody } from '../components/ui/Card'
|
||||
import { Skeleton, SkeletonText } from '../components/ui/Skeleton'
|
||||
import { EmptyState } from '../components/ui/EmptyState'
|
||||
|
||||
function ShoppingListSkeleton() {
|
||||
return (
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
<div className="flex justify-between items-center">
|
||||
<Skeleton className="h-8 w-64" />
|
||||
<Skeleton className="h-9 w-28" />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<SkeletonCard />
|
||||
<SkeletonCard />
|
||||
<SkeletonCard />
|
||||
</div>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<SkeletonText lines={6} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SkeletonCard() {
|
||||
return (
|
||||
<Card>
|
||||
<CardBody>
|
||||
<Skeleton className="h-10 w-24 mb-2" />
|
||||
<Skeleton className="h-4 w-32" />
|
||||
</CardBody>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default function ShoppingListPage() {
|
||||
const { data: shoppingList, isLoading } = useQuery<ShoppingList>({
|
||||
@@ -9,98 +47,147 @@ export default function ShoppingListPage() {
|
||||
})
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex justify-center items-center py-12">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900" />
|
||||
</div>
|
||||
)
|
||||
return <ShoppingListSkeleton />
|
||||
}
|
||||
|
||||
if (!shoppingList || shoppingList.items.length === 0) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Shopping List</h1>
|
||||
<div className="bg-white rounded-lg shadow p-8 text-center">
|
||||
<p className="text-gray-500 mb-4">No shopping list available</p>
|
||||
<p className="text-sm text-gray-400">Generate a meal plan first to see your shopping list.</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-primary-50 flex items-center justify-center">
|
||||
<ShoppingCart className="w-5 h-5 text-primary-600" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-surface-900">Shopping List</h1>
|
||||
</div>
|
||||
<EmptyState
|
||||
icon={Receipt}
|
||||
title="No shopping list yet"
|
||||
description="Generate a meal plan first to see your aisle-organized shopping list with sale tracking."
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
Shopping List - Week of {new Date(shoppingList.week_start_date).toLocaleDateString()}
|
||||
</h1>
|
||||
<button
|
||||
onClick={() => window.print()}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-primary-50 flex items-center justify-center">
|
||||
<ShoppingCart className="w-5 h-5 text-primary-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-surface-900">
|
||||
Shopping List
|
||||
</h1>
|
||||
<p className="text-sm text-surface-500">
|
||||
Week of {new Date(shoppingList.week_start_date).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="secondary" icon={<Printer className="w-4 h-4" />} onClick={() => window.print()}>
|
||||
Print List
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<div className="text-3xl font-bold text-gray-900">
|
||||
${shoppingList.total_estimated_cost.toFixed(2)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">Estimated Total</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<div className="text-3xl font-bold text-gray-900">{shoppingList.items.length}</div>
|
||||
<div className="text-sm text-gray-500">Total Items</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<div className="text-3xl font-bold text-green-600">{shoppingList.sale_items_count}</div>
|
||||
<div className="text-sm text-gray-500">Items on Sale</div>
|
||||
</div>
|
||||
{/* Summary Stats */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<Card className="bg-gradient-to-br from-primary-50 to-primary-100/50 border-primary-200">
|
||||
<CardBody>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-primary-100 flex items-center justify-center">
|
||||
<Receipt className="w-5 h-5 text-primary-600" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-surface-900">
|
||||
${shoppingList.total_estimated_cost.toFixed(2)}
|
||||
</div>
|
||||
<div className="text-sm text-surface-500">Estimated Total</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardBody>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-surface-100 flex items-center justify-center">
|
||||
<Package className="w-5 h-5 text-surface-600" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-surface-900">{shoppingList.items.length}</div>
|
||||
<div className="text-sm text-surface-500">Total Items</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gradient-to-br from-success-50 to-success-100/50 border-success-200">
|
||||
<CardBody>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-success-100 flex items-center justify-center">
|
||||
<Tag className="w-5 h-5 text-success-600" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-success-700">{shoppingList.sale_items_count}</div>
|
||||
<div className="text-sm text-surface-500">Items on Sale</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{Object.entries(shoppingList.by_aisle).map(([aisle, items]) => (
|
||||
<div key={aisle} className="bg-white rounded-lg shadow">
|
||||
<div className="px-6 py-4 border-b border-gray-200 bg-gray-50">
|
||||
<h2 className="text-lg font-semibold text-gray-900">{aisle}</h2>
|
||||
<span className="text-sm text-gray-500">{items.length} items</span>
|
||||
</div>
|
||||
<ul className="divide-y divide-gray-200">
|
||||
{items.map((item, idx) => (
|
||||
<li key={idx} className="px-6 py-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-5 h-5 border-2 border-gray-300 rounded flex-shrink-0" />
|
||||
<div>
|
||||
<span className="font-medium text-gray-900">{item.name}</span>
|
||||
{item.in_pantry && (
|
||||
<span className="ml-2 text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded">
|
||||
In Pantry
|
||||
</span>
|
||||
)}
|
||||
{item.is_on_sale && (
|
||||
<span className="ml-2 text-xs bg-red-100 text-red-800 px-2 py-0.5 rounded">
|
||||
SALE
|
||||
</span>
|
||||
)}
|
||||
{/* Aisle Groups */}
|
||||
<div className="space-y-4">
|
||||
{Object.entries(shoppingList.by_aisle).map(([aisle, items]) => (
|
||||
<Card key={aisle} className="overflow-hidden">
|
||||
<div className="px-5 py-3 border-b border-surface-200 bg-surface-50 flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-surface-900">{aisle}</h3>
|
||||
<Badge variant="neutral">{items.length} items</Badge>
|
||||
</div>
|
||||
<ul className="divide-y divide-surface-200">
|
||||
{items.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className="px-5 py-3.5 flex items-center justify-between hover:bg-surface-50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded border-2 border-surface-300 flex-shrink-0" />
|
||||
<div>
|
||||
<span className="text-sm font-medium text-surface-900">{item.name}</span>
|
||||
<div className="flex gap-1.5 mt-0.5">
|
||||
{item.in_pantry && <Badge variant="success">In Pantry</Badge>}
|
||||
{item.is_on_sale && <Badge variant="danger">SALE</Badge>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
{item.quantity && (
|
||||
<span className="text-sm text-gray-500 mr-4">
|
||||
{item.quantity} {item.unit || ''}
|
||||
</span>
|
||||
)}
|
||||
{item.sale_price ? (
|
||||
<span className="font-semibold text-red-600">${item.sale_price.toFixed(2)}</span>
|
||||
) : item.estimated_price ? (
|
||||
<span className="text-gray-600">${item.estimated_price.toFixed(2)}</span>
|
||||
) : null}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
<div className="text-right flex items-center gap-3">
|
||||
{item.quantity && (
|
||||
<span className="text-sm text-surface-500">
|
||||
{item.quantity} {item.unit || ''}
|
||||
</span>
|
||||
)}
|
||||
{item.sale_price ? (
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-sm font-semibold text-danger-600">${item.sale_price.toFixed(2)}</span>
|
||||
{item.estimated_price && item.estimated_price > item.sale_price && (
|
||||
<span className="text-xs text-surface-400 line-through">
|
||||
${item.estimated_price.toFixed(2)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
) : item.estimated_price ? (
|
||||
<span className="text-sm font-medium text-surface-700">
|
||||
${item.estimated_price.toFixed(2)}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user