\n {/* Header */}\n

{mealPlan.name}

\n {formatDate(mealPlan.startDate)} - {formatDate(mealPlan.endDate)}\n

\n 📅 {mealPlan.dailyPlans.length} days\n 🔥 {formatNutrition(mealPlan.totalNutrition.calories / mealPlan.dailyPlans.length, 'kcal')} avg/day\n 🛒 {mealPlan.shoppingList.length} ingredients\n

\n \n 🖨️ Print\n \n \n Create New Plan\n \n \n Back to Dashboard\n \n

\n\n {/* Tabs */}\n

\n {[\n { id: 'meals', label: 'Meal Plan', icon: '🍽️' },\n { id: 'shopping', label: 'Shopping List', icon: '🛒' },\n { id: 'nutrition', label: 'Nutrition Summary', icon: '📊' }\n ].map(tab => (\n setActiveTab(tab.id as any)}\n className={`py-4 px-1 border-b-2 font-medium text-sm ${\n activeTab === tab.id\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n {tab.icon}\n {tab.label}\n \n ))}\n

\n\n

\n {/* Meals Tab */}\n {activeTab === 'meals' && (\n

\n {mealPlan.dailyPlans.map((dailyPlan, index) => (\n \n ))}\n

\n )}\n\n {/* Shopping List Tab */}\n {activeTab === 'shopping' && (\n

Shopping List

\n \n 📄 Export List\n \n

\n \n \n

\n )}\n\n {/* Nutrition Tab */}\n {activeTab === 'nutrition' && (\n

Nutrition Summary

\n \n \n \n

\n )}\n

\n );\n}\n\n// Daily Plan Card Component\nfunction DailyPlanCard({ dailyPlan }: { dailyPlan: DailyMealPlan }) {\n return (\n

\n {formatDate(dailyPlan.date)}\n

\n 🔥 {formatNutrition(dailyPlan.dailyNutrition.calories, 'kcal')}\n

\n \n

\n {dailyPlan.meals.breakfast && (\n \n )}\n {dailyPlan.meals.lunch && (\n \n )}\n {dailyPlan.meals.dinner && (\n \n )}\n {dailyPlan.meals.snacks && dailyPlan.meals.snacks.map((snack, index) => (\n \n ))}\n

\n );\n}\n\n// Meal Card Component\nfunction MealCard({ meal, type }: { meal: Meal; type: string }) {\n const [showDetails, setShowDetails] = useState(false);\n\n return (\n

\n \n {type}\n \n \n {meal.difficulty}\n \n

\n \n

{meal.name}

{meal.description}

\n \n

\n ⏱️ {meal.prepTime + meal.cookTime} min\n 🔥 {formatNutrition(meal.nutrition.calories, 'kcal')}\n

\n \n setShowDetails(!showDetails)}\n className=\"text-xs text-blue-600 hover:text-blue-800\"\n >\n {showDetails ? 'Hide Details' : 'Show Details'}\n \n \n {showDetails && (\n

\n Ingredients:\n

\n • {ingredient.amount} {ingredient.unit} {ingredient.name}\n
\n ... and {meal.ingredients.length - 3} more\n

Protein: {formatNutrition(meal.nutrition.protein, 'g')}

Carbs: {formatNutrition(meal.nutrition.carbs, 'g')}

Fat: {formatNutrition(meal.nutrition.fat, 'g')}

Fiber: {formatNutrition(meal.nutrition.fiber, 'g')}

\n )}\n

\n );\n}\n\n// Shopping List View Component\nfunction ShoppingListView({ \n items, \n checkedItems, \n onItemToggle \n}: { \n items: ShoppingListItem[];\n checkedItems: Set;\n onItemToggle: (item: string) => void;\n}) {\n const groupedItems = Object.entries(\n items.reduce((acc, item) => {\n if (!acc[item.category]) acc[item.category] = [];\n acc[item.category].push(item);\n return acc;\n }, {} as Record)\n );\n\n const categoryIcons: Record = {\n protein: '🥩',\n vegetables: '🥬',\n fruits: '🍎',\n grains: '🌾',\n dairy: '🥛',\n fats: '🥑',\n spices: '🧂',\n other: '📦'\n };\n\n return (\n

\n {groupedItems.map(([category, categoryItems]) => (\n

\n {categoryIcons[category] || '📦'}\n {category.charAt(0).toUpperCase() + category.slice(1)}\n

\n {categoryItems.map((item, index) => {\n const itemKey = `${item.ingredient}-${item.amount}-${item.unit}`;\n const isChecked = checkedItems.has(itemKey);\n \n return (\n \n onItemToggle(itemKey)}\n className=\"mr-3\"\n />\n \n {item.ingredient}\n \n \n {item.amount} {item.unit}\n \n \n );\n })}\n

\n ))}\n \n

\n {checkedItems.size} of {items.length} items checked\n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/kiboimichelle/MealplanApp/code/frontend/components/MealPlanView.tsx","extension","actionData","errors"]