Public Access
feat: implement frontend Web UI pages
- Add types for all API models (MealPlan, Recipe, Ingredient, etc.) - Add API client with mealPlannerApi wrapper for all endpoints - Implement Dashboard with weekly meal plan grid view - Implement Pantry page with add/remove functionality - Implement MealDetail page with recipe display - Implement ShoppingList page with aisle grouping - Add ShoppingList route to App.tsx - Add vite-env.d.ts for Vite env type support
This commit is contained in:
@@ -3,6 +3,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
import Dashboard from './pages/Dashboard'
|
||||
import MealDetail from './pages/MealDetail'
|
||||
import Pantry from './pages/Pantry'
|
||||
import ShoppingList from './pages/ShoppingList'
|
||||
|
||||
const queryClient = new QueryClient()
|
||||
|
||||
@@ -21,6 +22,9 @@ function App() {
|
||||
<Link to="/pantry" className="inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-500 hover:text-gray-900">
|
||||
Pantry
|
||||
</Link>
|
||||
<Link to="/shopping-list" className="inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-500 hover:text-gray-900">
|
||||
Shopping List
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -30,6 +34,7 @@ function App() {
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/meals/:id" element={<MealDetail />} />
|
||||
<Route path="/pantry" element={<Pantry />} />
|
||||
<Route path="/shopping-list" element={<ShoppingList />} />
|
||||
</Routes>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const API_BASE = import.meta.env.VITE_API_URL || '/api'
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: API_BASE,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
|
||||
export const mealPlannerApi = {
|
||||
profile: {
|
||||
get: () => api.get('/profile'),
|
||||
update: (data: any) => api.put('/profile', data),
|
||||
getMembers: () => api.get('/profile/members'),
|
||||
addMember: (data: any) => api.post('/profile/members', data),
|
||||
deleteMember: (id: string) => api.delete(`/profile/members/${id}`),
|
||||
},
|
||||
|
||||
recipes: {
|
||||
list: (params?: any) => api.get('/recipes', { params }),
|
||||
get: (id: string) => api.get(`/recipes/${id}`),
|
||||
create: (data: any) => api.post('/recipes', data),
|
||||
delete: (id: string) => api.delete(`/recipes/${id}`),
|
||||
listIngredients: () => api.get('/recipes/ingredients/list'),
|
||||
createIngredient: (data: any) => api.post('/recipes/ingredients', data),
|
||||
},
|
||||
|
||||
meals: {
|
||||
getPlanned: () => api.get('/meals/planned'),
|
||||
get: (id: string) => api.get(`/meals/${id}`),
|
||||
getItem: (id: string) => api.get(`/meals/items/${id}`),
|
||||
create: (data: any) => api.post('/meals', data),
|
||||
lock: (id: string) => api.post(`/meals/${id}/lock`),
|
||||
getVotePage: (itemId: string, token: string) => api.get(`/meals/items/${itemId}/vote/${token}`),
|
||||
submitVote: (itemId: string, token: string, data: any) => api.post(`/meals/items/${itemId}/vote/${token}`, data),
|
||||
swapItem: (itemId: string, newRecipeId: string) => api.post(`/meals/items/${itemId}/swap?new_recipe_id=${newRecipeId}`),
|
||||
},
|
||||
|
||||
pantry: {
|
||||
list: () => api.get('/pantry'),
|
||||
add: (data: any) => api.post('/pantry', data),
|
||||
update: (id: string, data: any) => api.put(`/pantry/${id}`, data),
|
||||
remove: (id: string) => api.delete(`/pantry/${id}`),
|
||||
},
|
||||
|
||||
shoppingList: {
|
||||
get: () => api.get('/shopping-list'),
|
||||
getPrint: () => api.get('/shopping-list/print'),
|
||||
},
|
||||
|
||||
admin: {
|
||||
triggerScrape: (source?: string, type?: string) => api.post('/admin/scrape', null, { params: { source, scrape_type: type } }),
|
||||
getLogs: (params?: any) => api.get('/admin/logs', { params }),
|
||||
getLog: (id: string) => api.get(`/admin/logs/${id}`),
|
||||
getEmailLogs: (params?: any) => api.get('/admin/email-logs', { params }),
|
||||
getMealPlans: (params?: any) => api.get('/admin/meal-plans', { params }),
|
||||
getStats: () => api.get('/admin/stats'),
|
||||
testEmail: (email: string) => api.post('/admin/test-email', null, { params: { email } }),
|
||||
},
|
||||
}
|
||||
|
||||
export default api
|
||||
@@ -1,8 +1,153 @@
|
||||
export default function Dashboard() {
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { mealPlannerApi } from '../api'
|
||||
import type { MealPlan, MealPlanItem } from '../types'
|
||||
|
||||
const DAY_NAMES = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
|
||||
const MEAL_TYPES = ['breakfast', 'lunch', 'dinner'] as const
|
||||
|
||||
function MealCard({ item }: { item: MealPlanItem }) {
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow p-4 flex gap-4">
|
||||
{item.recipe?.image_url && (
|
||||
<img
|
||||
src={item.recipe.image_url}
|
||||
alt={item.recipe.name}
|
||||
className="w-24 h-24 object-cover rounded-lg"
|
||||
/>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-gray-900">{item.recipe?.name || 'Unknown Recipe'}</h3>
|
||||
{item.recipe && (
|
||||
<p className="text-sm text-gray-500">
|
||||
{item.recipe.total_time_minutes || (item.recipe.prep_time_minutes || 0) + (item.recipe.cook_time_minutes || 0)} min
|
||||
{' · '}
|
||||
{item.recipe.servings} servings
|
||||
</p>
|
||||
)}
|
||||
<div className="mt-2 flex items-center gap-2">
|
||||
<span className={`inline-flex px-2 py-1 text-xs rounded-full ${
|
||||
item.approval_status === 'approved' ? 'bg-green-100 text-green-800' :
|
||||
item.approval_status === 'denied' ? 'bg-red-100 text-red-800' :
|
||||
item.approval_status === 'swapped' ? 'bg-yellow-100 text-yellow-800' :
|
||||
'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{item.approval_status}
|
||||
</span>
|
||||
{item.estimated_cost && (
|
||||
<span className="text-sm text-gray-600">${item.estimated_cost.toFixed(2)}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DayColumn({ dayIndex, items }: { dayIndex: number; items: MealPlanItem[] }) {
|
||||
return (
|
||||
<div className="flex-1 min-w-[200px]">
|
||||
<div className="bg-gray-100 rounded-t-lg px-4 py-2 font-semibold text-gray-700">
|
||||
{DAY_NAMES[dayIndex]}
|
||||
</div>
|
||||
<div className="space-y-3 p-2">
|
||||
{MEAL_TYPES.map(mealType => {
|
||||
const item = items.find(i => i.meal_type === mealType)
|
||||
return (
|
||||
<div key={mealType} className="text-xs text-gray-500 uppercase">
|
||||
{mealType}
|
||||
{item ? <MealCard item={item} /> : <div className="bg-gray-50 border-2 border-dashed rounded-lg h-24" />}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Dashboard() {
|
||||
const { data: mealPlan, isLoading } = useQuery<MealPlan | null>({
|
||||
queryKey: ['mealPlan'],
|
||||
queryFn: () => mealPlannerApi.meals.getPlanned().then(r => r.data),
|
||||
})
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
if (!mealPlan) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">This Week's Meal Plan</h1>
|
||||
<p className="text-gray-500">Meal planning UI coming soon...</p>
|
||||
<div className="bg-white rounded-lg shadow p-8 text-center">
|
||||
<p className="text-gray-500 mb-4">No meal plan generated yet</p>
|
||||
<button className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
|
||||
Generate Meal Plan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const itemsByDay = Array.from({ length: 7 }, (_, i) =>
|
||||
mealPlan.items.filter(item => item.day_of_week === i + 1)
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
Week of {new Date(mealPlan.week_start_date).toLocaleDateString()}
|
||||
</h1>
|
||||
<div className="flex gap-2">
|
||||
<span className={`inline-flex px-3 py-1 text-sm rounded-full ${
|
||||
mealPlan.status === 'approved' ? 'bg-green-100 text-green-800' :
|
||||
mealPlan.status === 'locked' ? 'bg-blue-100 text-blue-800' :
|
||||
mealPlan.status === 'pending_approval' ? 'bg-yellow-100 text-yellow-800' :
|
||||
'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{mealPlan.status.replace('_', ' ')}
|
||||
</span>
|
||||
{mealPlan.total_estimated_cost && (
|
||||
<span className="px-3 py-1 bg-gray-100 text-gray-800 rounded-full">
|
||||
${mealPlan.total_estimated_cost.toFixed(2)} total
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="text-lg font-semibold mb-4">Weekly Overview</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<div className="flex gap-4 min-w-[1400px]">
|
||||
{itemsByDay.map((items, index) => (
|
||||
<DayColumn key={index} dayIndex={index} items={items} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="text-lg font-semibold mb-4">Shopping List</h2>
|
||||
<a href="/shopping-list" className="text-blue-600 hover:text-blue-800">
|
||||
View shopping list →
|
||||
</a>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="text-lg font-semibold mb-4">Quick Actions</h2>
|
||||
<div className="space-y-2">
|
||||
<a href="/pantry" className="block text-blue-600 hover:text-blue-800">
|
||||
Manage Pantry →
|
||||
</a>
|
||||
<a href="/recipes" className="block text-blue-600 hover:text-blue-800">
|
||||
Browse Recipes →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,11 +1,119 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { mealPlannerApi } from '../api'
|
||||
import type { MealPlanItem } from '../types'
|
||||
|
||||
export default function MealDetail() {
|
||||
const { id } = useParams()
|
||||
const { id } = useParams<{ id: string }>()
|
||||
|
||||
const { data: item, isLoading } = useQuery<MealPlanItem>({
|
||||
queryKey: ['mealItem', id],
|
||||
queryFn: () => mealPlannerApi.meals.getItem(id!).then(r => r.data),
|
||||
enabled: !!id,
|
||||
})
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
if (!item?.recipe) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Meal Detail</h1>
|
||||
<p className="text-gray-500">Meal {id} details coming soon...</p>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Recipe Not Found</h1>
|
||||
<p className="text-gray-500">This meal item doesn't have an associated recipe.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const recipe = item.recipe
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{recipe.image_url && (
|
||||
<img
|
||||
src={recipe.image_url}
|
||||
alt={recipe.name}
|
||||
className="w-full h-64 object-cover rounded-lg"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">{recipe.name}</h1>
|
||||
{recipe.description && (
|
||||
<p className="mt-2 text-gray-600">{recipe.description}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-2xl font-bold text-gray-900">
|
||||
${item.estimated_cost?.toFixed(2) || 'N/A'}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">per serving</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 text-sm text-gray-600">
|
||||
{recipe.prep_time_minutes && (
|
||||
<span>Prep: {recipe.prep_time_minutes} min</span>
|
||||
)}
|
||||
{recipe.cook_time_minutes && (
|
||||
<span>Cook: {recipe.cook_time_minutes} min</span>
|
||||
)}
|
||||
<span>Serves: {recipe.servings}</span>
|
||||
{recipe.cuisine_tags?.length > 0 && (
|
||||
<span>{recipe.cuisine_tags.join(', ')}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="text-xl font-semibold mb-4">Ingredients</h2>
|
||||
<ul className="space-y-2">
|
||||
{recipe.ingredients?.map((ing, idx) => (
|
||||
<li key={idx} className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 bg-gray-400 rounded-full" />
|
||||
<span>
|
||||
{ing.quantity && `${ing.quantity} `}
|
||||
{ing.unit && `${ing.unit} `}
|
||||
{ing.name}
|
||||
{ing.is_optional && ' (optional)'}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="text-xl font-semibold mb-4">Instructions</h2>
|
||||
<ol className="space-y-4">
|
||||
{recipe.instructions?.map((step, idx) => (
|
||||
<li key={idx} className="flex gap-4">
|
||||
<span className="flex-shrink-0 w-8 h-8 bg-blue-100 text-blue-800 rounded-full flex items-center justify-center font-semibold">
|
||||
{idx + 1}
|
||||
</span>
|
||||
<p className="pt-1">{step}</p>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={() => window.print()}
|
||||
className="bg-gray-100 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-200"
|
||||
>
|
||||
Print Recipe
|
||||
</button>
|
||||
<a
|
||||
href="/"
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"
|
||||
>
|
||||
Back to Meal Plan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,8 +1,179 @@
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { mealPlannerApi } from '../api'
|
||||
import type { HomePantryItem, Ingredient } from '../types'
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function Pantry() {
|
||||
const queryClient = useQueryClient()
|
||||
const [showAddForm, setShowAddForm] = useState(false)
|
||||
const [selectedIngredient, setSelectedIngredient] = useState<string>('')
|
||||
const [quantity, setQuantity] = useState<string>('')
|
||||
const [unit, setUnit] = useState<string>('')
|
||||
|
||||
const { data: pantryItems, isLoading } = useQuery<HomePantryItem[]>({
|
||||
queryKey: ['pantry'],
|
||||
queryFn: () => mealPlannerApi.pantry.list().then(r => r.data),
|
||||
})
|
||||
|
||||
const { data: ingredients } = useQuery<Ingredient[]>({
|
||||
queryKey: ['ingredients'],
|
||||
queryFn: () => mealPlannerApi.recipes.listIngredients().then(r => r.data),
|
||||
})
|
||||
|
||||
const addMutation = useMutation({
|
||||
mutationFn: (data: { ingredient_id: string; quantity?: number; unit?: string }) =>
|
||||
mealPlannerApi.pantry.add(data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['pantry'] })
|
||||
setShowAddForm(false)
|
||||
setSelectedIngredient('')
|
||||
setQuantity('')
|
||||
setUnit('')
|
||||
},
|
||||
})
|
||||
|
||||
const removeMutation = useMutation({
|
||||
mutationFn: (id: string) => mealPlannerApi.pantry.remove(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['pantry'] })
|
||||
},
|
||||
})
|
||||
|
||||
const handleAdd = () => {
|
||||
if (!selectedIngredient) return
|
||||
addMutation.mutate({
|
||||
ingredient_id: selectedIngredient,
|
||||
quantity: quantity ? parseFloat(quantity) : undefined,
|
||||
unit: unit || undefined,
|
||||
})
|
||||
}
|
||||
|
||||
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 (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Home Pantry</h1>
|
||||
<p className="text-gray-500">Manage your pantry items...</p>
|
||||
<button
|
||||
onClick={() => setShowAddForm(!showAddForm)}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"
|
||||
>
|
||||
{showAddForm ? 'Cancel' : 'Add Item'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showAddForm && (
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="text-lg font-semibold mb-4">Add Pantry Item</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Ingredient</label>
|
||||
<select
|
||||
value={selectedIngredient}
|
||||
onChange={(e) => setSelectedIngredient(e.target.value)}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2"
|
||||
>
|
||||
<option value="">Select ingredient...</option>
|
||||
{ingredients?.map(ing => (
|
||||
<option key={ing.id} value={ing.id}>
|
||||
{ing.name} {ing.aisle ? `(${ing.aisle})` : ''}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Quantity</label>
|
||||
<input
|
||||
type="number"
|
||||
value={quantity}
|
||||
onChange={(e) => setQuantity(e.target.value)}
|
||||
placeholder="e.g., 5"
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Unit</label>
|
||||
<input
|
||||
type="text"
|
||||
value={unit}
|
||||
onChange={(e) => setUnit(e.target.value)}
|
||||
placeholder="e.g., cans, lbs"
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-end">
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
disabled={!selectedIngredient || addMutation.isPending}
|
||||
className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
{addMutation.isPending ? 'Adding...' : 'Add'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{pantryItems && pantryItems.length > 0 ? (
|
||||
<div className="bg-white rounded-lg shadow overflow-hidden">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Item</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Aisle</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Quantity</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Expires</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{pantryItems.map((item) => (
|
||||
<tr key={item.id}>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="font-medium text-gray-900">
|
||||
{item.ingredient?.name || 'Unknown'}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{item.ingredient?.aisle || '-'}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{item.quantity} {item.unit || ''}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{item.expires_at ? new Date(item.expires_at).toLocaleDateString() : '-'}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right">
|
||||
<button
|
||||
onClick={() => removeMutation.mutate(item.id)}
|
||||
className="text-red-600 hover:text-red-800"
|
||||
disabled={removeMutation.isPending}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white rounded-lg shadow p-8 text-center">
|
||||
<p className="text-gray-500 mb-4">Your pantry is empty</p>
|
||||
<button
|
||||
onClick={() => setShowAddForm(true)}
|
||||
className="text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
Add your first item
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { mealPlannerApi } from '../api'
|
||||
import type { ShoppingList } from '../types'
|
||||
|
||||
export default function ShoppingListPage() {
|
||||
const { data: shoppingList, isLoading } = useQuery<ShoppingList>({
|
||||
queryKey: ['shoppingList'],
|
||||
queryFn: () => mealPlannerApi.shoppingList.get().then(r => r.data),
|
||||
})
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
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>
|
||||
</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"
|
||||
>
|
||||
Print List
|
||||
</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>
|
||||
</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>
|
||||
)}
|
||||
</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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
export interface FamilyProfile {
|
||||
id: string
|
||||
name: string
|
||||
household_size: number
|
||||
adult_count: number
|
||||
child_count: number
|
||||
dietary_notes?: string
|
||||
budget_per_meal: number
|
||||
created_at?: string
|
||||
updated_at?: string
|
||||
members: FamilyMember[]
|
||||
}
|
||||
|
||||
export interface FamilyMember {
|
||||
id: string
|
||||
family_profile_id: string
|
||||
name: string
|
||||
email?: string
|
||||
role: 'adult' | 'child'
|
||||
likes_mushrooms: boolean
|
||||
created_at?: string
|
||||
updated_at?: string
|
||||
}
|
||||
|
||||
export interface Recipe {
|
||||
id: string
|
||||
family_profile_id?: string
|
||||
name: string
|
||||
description?: string
|
||||
image_url?: string
|
||||
image_source?: string
|
||||
prep_time_minutes?: number
|
||||
cook_time_minutes?: number
|
||||
servings: number
|
||||
servings_scaled?: number
|
||||
cuisine_tags: string[]
|
||||
dietary_tags: string[]
|
||||
protein_type?: string
|
||||
spice_level?: number
|
||||
ingredients: RecipeIngredient[]
|
||||
instructions: string[]
|
||||
source_url?: string
|
||||
is_manually_added: boolean
|
||||
scraped_at?: string
|
||||
created_at?: string
|
||||
updated_at?: string
|
||||
total_time_minutes?: number
|
||||
}
|
||||
|
||||
export interface RecipeIngredient {
|
||||
ingredient_id?: string
|
||||
name: string
|
||||
quantity?: number
|
||||
unit?: string
|
||||
is_optional: boolean
|
||||
}
|
||||
|
||||
export interface MealPlan {
|
||||
id: string
|
||||
family_profile_id: string
|
||||
week_start_date: string
|
||||
status: 'draft' | 'pending_approval' | 'approved' | 'locked'
|
||||
approval_deadline?: string
|
||||
total_estimated_cost?: number
|
||||
notes?: string
|
||||
created_at?: string
|
||||
updated_at?: string
|
||||
items: MealPlanItem[]
|
||||
}
|
||||
|
||||
export interface MealPlanItem {
|
||||
id: string
|
||||
meal_plan_id: string
|
||||
recipe_id: string
|
||||
day_of_week: number
|
||||
meal_type: 'breakfast' | 'lunch' | 'dinner'
|
||||
approval_status: 'pending' | 'approved' | 'denied' | 'swapped'
|
||||
denial_reason?: string
|
||||
denial_details?: string
|
||||
estimated_cost?: number
|
||||
used_pantry_items: string[]
|
||||
recipe?: Recipe
|
||||
created_at?: string
|
||||
updated_at?: string
|
||||
}
|
||||
|
||||
export interface HomePantryItem {
|
||||
id: string
|
||||
family_profile_id: string
|
||||
ingredient_id: string
|
||||
quantity?: number
|
||||
unit?: string
|
||||
expires_at?: string
|
||||
added_at?: string
|
||||
created_at?: string
|
||||
ingredient?: Ingredient
|
||||
}
|
||||
|
||||
export interface Ingredient {
|
||||
id: string
|
||||
name: string
|
||||
name_lower: string
|
||||
plural_name?: string
|
||||
aisle?: string
|
||||
typical_price?: number
|
||||
unit?: string
|
||||
season_months?: number[]
|
||||
created_at?: string
|
||||
}
|
||||
|
||||
export interface ShoppingListItem {
|
||||
ingredient_id?: string
|
||||
name: string
|
||||
quantity?: number
|
||||
unit?: string
|
||||
aisle?: string
|
||||
estimated_price?: number
|
||||
is_on_sale: boolean
|
||||
sale_price?: number
|
||||
in_season: boolean
|
||||
in_pantry: boolean
|
||||
}
|
||||
|
||||
export interface ShoppingList {
|
||||
week_start_date: string
|
||||
items: ShoppingListItem[]
|
||||
total_estimated_cost: number
|
||||
sale_items_count: number
|
||||
by_aisle: Record<string, ShoppingListItem[]>
|
||||
}
|
||||
|
||||
export interface VoteRequest {
|
||||
vote: boolean
|
||||
denial_reason?: string
|
||||
denial_details?: string
|
||||
}
|
||||
|
||||
export interface ScrapeLog {
|
||||
id: string
|
||||
source: string
|
||||
scrape_type: string
|
||||
status: string
|
||||
items_scraped?: number
|
||||
error_message?: string
|
||||
started_at?: string
|
||||
completed_at?: string
|
||||
duration_seconds?: number
|
||||
}
|
||||
|
||||
export interface SystemStats {
|
||||
recipes: number
|
||||
ingredients: number
|
||||
meal_plans: number
|
||||
}
|
||||
Vendored
+9
@@ -0,0 +1,9 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_API_URL?: string
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv
|
||||
}
|
||||
Reference in New Issue
Block a user