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
2026-05-04 20:54:54 -07:00
parent 933a0cc9db
commit 08e196b0ab
8 changed files with 773 additions and 11 deletions
@@ -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>
+  )
+}