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

frontend/src/App.tsx

@@ -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>

frontend/src/api/index.ts

@@ -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

frontend/src/pages/Dashboard.tsx

@@ -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>
+        <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">
-      <h1 className="text-2xl font-bold text-gray-900">This Week's Meal Plan</h1>
+      <div className="flex justify-between items-center">
-      <p className="text-gray-500">Meal planning UI coming soon...</p>
+        <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>
   )
 }

frontend/src/pages/MealDetail.tsx

@@ -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">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">
-      <h1 className="text-2xl font-bold text-gray-900">Meal Detail</h1>
+      {recipe.image_url && (
-      <p className="text-gray-500">Meal {id} details coming soon...</p>
+        <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>
   )
 }

frontend/src/pages/Pantry.tsx

@@ -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">
-      <h1 className="text-2xl font-bold text-gray-900">Home Pantry</h1>
+      <div className="flex justify-between items-center">
-      <p className="text-gray-500">Manage your pantry items...</p>
+        <h1 className="text-2xl font-bold text-gray-900">Home Pantry</h1>
+        <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>
   )
 }

frontend/src/pages/ShoppingList.tsx

@@ -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>
+  )
+}

frontend/src/types/index.ts

@@ -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
+}

frontend/src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}