\n {info.label}\n

\n \n {value < 1 && value > 0 ? value.toFixed(2) : Math.round(value)} {info.unit}\n \n {goal && (\n / {goal}\n )}\n

\n );\n}\n\ninterface NutrientSectionProps {\n title: string;\n keys: NutrientKey[];\n data: DailyNutrition;\n nutritionGoals?: NutritionGoals | null;\n hideEmpty?: boolean;\n}\n\nfunction NutrientSection({ title, keys, data, nutritionGoals, hideEmpty }: NutrientSectionProps) {\n const hasAnyData = keys.some(key => (data[key] ?? 0) > 0);\n if (hideEmpty && !hasAnyData && title !== 'Macronutrients') return null;\n\n return (\n

{title}

\n {keys.map(key => {\n let goal: number | null = null;\n if (nutritionGoals?.primaryGoalType === key) goal = nutritionGoals.primaryGoalValue;\n else if (nutritionGoals?.subGoal1Type === key) goal = nutritionGoals.subGoal1Value;\n else if (nutritionGoals?.subGoal2Type === key) goal = nutritionGoals.subGoal2Value;\n\n return (\n \n );\n })}\n

\n );\n}\n\nfunction calculateEntryNutrition(entry: MealPlanEntry): DailyNutrition {\n const result = createEmptyDailyNutrition();\n let sourceNutrition: FDCNutrition | null = null;\n let scale = 1;\n\n if (entry.recipe && entry.recipe.nutrition) {\n sourceNutrition = entry.recipe.nutrition;\n scale = entry.servings;\n } else if (entry.customFood) {\n sourceNutrition = entry.customFood;\n scale = (entry.amountGrams ?? entry.customFood.servingSizeGrams) / entry.customFood.servingSizeGrams;\n } else if (entry.fdcId && entry.fdcFood) {\n sourceNutrition = entry.fdcFood.nutrition;\n scale = (entry.amountGrams ?? 100) / 100;\n }\n\n if (sourceNutrition) {\n (Object.keys(NUTRIENT_INFO) as NutrientKey[]).forEach(key => {\n const val = sourceNutrition![key as keyof FDCNutrition];\n if (typeof val === 'number') {\n result[key as keyof DailyNutrition] = val * scale;\n }\n });\n }\n\n return result;\n}\n\nconst ItemDetailModal = ({\n entry,\n nutritionGoals,\n onClose,\n onRemove,\n onDuplicate\n}: {\n entry: MealPlanEntry;\n nutritionGoals: NutritionGoals | null;\n onClose: () => void;\n onRemove: (id: string) => Promise;\n onDuplicate: (entry: MealPlanEntry, days: DayOfWeek[]) => Promise;\n}) => {\n const [showNutrition, setShowNutrition] = useState(false);\n const [showDuplicate, setShowDuplicate] = useState(false);\n const [duplicateDays, setDuplicateDays] = useState([]);\n const [isRemoving, setIsRemoving] = useState(false);\n const [isDuplicating, setIsDuplicating] = useState(false);\n\n const entryNutrition = calculateEntryNutrition(entry);\n\n let name = 'Unknown';\n if (entry.recipeId && entry.recipe) name = entry.recipe.title;\n else if (entry.customFoodId && entry.customFood) name = entry.customFood.name;\n else if (entry.fdcId && entry.fdcFood) name = entry.fdcFood.description;\n\n const handleRemove = async () => {\n setIsRemoving(true);\n await onRemove(entry.id);\n onClose();\n };\n\n const handleDuplicate = async () => {\n if (duplicateDays.length === 0) return;\n setIsDuplicating(true);\n await onDuplicate(entry, duplicateDays);\n onClose();\n };\n\n return (\n

e.stopPropagation()}>\n

{name}

\n {MEAL_TYPE_LABELS[entry.mealType]} • {DAY_NAMES[entry.dayOfWeek]}\n

\n \n

\n\n {!showNutrition && !showDuplicate ? (\n

\n setShowNutrition(true)}\n className=\"w-full flex items-center gap-3 p-4 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors border border-transparent hover:border-gray-100 dark:hover:border-gray-700\"\n >\n

\n \n

View Nutrition

{Math.round(entryNutrition.calories)} kcal • {Math.round(entryNutrition.protein)}g protein

\n \n\n setShowDuplicate(true)}\n className=\"w-full flex items-center gap-3 p-4 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors border border-transparent hover:border-gray-100 dark:hover:border-gray-700\"\n >\n

\n \n

Duplicate

Add to other days of the week

\n \n\n \n

\n {isRemoving ? (\n \n ) : (\n \n )}\n

Delete

\n \n

\n ) : showNutrition ? (\n

\n setShowNutrition(false)}\n className=\"text-xs font-medium flex items-center gap-1 hover:underline\"\n style={{ color: 'var(--accent)' }}\n >\n ← Back to Options\n \n

\n \n \n \n

\n ) : (\n

\n setShowDuplicate(false)}\n className=\"text-xs font-medium flex items-center gap-1 hover:underline mb-2\"\n style={{ color: 'var(--accent)' }}\n >\n ← Back to Options\n \n

\n Select days to add this to:\n

\n {DAY_NAMES.map((day, i) => (\n {\n if (duplicateDays.includes(i as DayOfWeek)) {\n setDuplicateDays(duplicateDays.filter(d => d !== i));\n } else {\n setDuplicateDays([...duplicateDays, i as DayOfWeek]);\n }\n }}\n className=\"px-3 py-2 rounded-lg text-sm font-medium transition-all border\"\n style={duplicateDays.includes(i as DayOfWeek)\n ? { background: 'var(--accent)', color: 'white', borderColor: 'var(--accent)' }\n : { background: 'var(--bg-tertiary)', color: 'var(--text-secondary)', borderColor: 'transparent' }}\n >\n {day.slice(0, 3)}\n \n ))}\n

\n \n {isDuplicating ? (\n \n ) : null}\n {isDuplicating ? 'Duplicating...' : `Add to ${duplicateDays.length} day${duplicateDays.length === 1 ? '' : 's'}`}\n \n

\n )}\n

\n );\n};\n\nconst AllNutrientsView = ({\n displayData,\n displayLabel,\n nutritionGoals,\n onClose\n}: {\n displayData: DailyNutrition;\n displayLabel: string;\n nutritionGoals?: NutritionGoals | null;\n onClose: () => void;\n}) => {\n // Define comprehensive nutrient groups\n const macroKeys: NutrientKey[] = ['calories', 'protein', 'fat', 'carbs', 'fiber', 'sugars', 'addedSugars', 'starch'];\n const fatsKeys: NutrientKey[] = ['saturatedFat', 'transFat', 'monounsaturatedFat', 'polyunsaturatedFat', 'cholesterol'];\n const otherKeys: NutrientKey[] = ['water', 'alcohol', 'caffeine'];\n const mineralKeys: NutrientKey[] = ['sodium', 'potassium', 'calcium', 'iron', 'magnesium', 'zinc', 'phosphorus', 'selenium', 'copper', 'manganese', 'fluoride', 'chromium', 'molybdenum', 'iodine', 'chloride'];\n const vitaminFatSolubleKeys: NutrientKey[] = ['vitaminA', 'retinol', 'vitaminD', 'vitaminD2', 'vitaminD3', 'vitaminE', 'vitaminK', 'vitaminK2'];\n const carotenoidKeys: NutrientKey[] = ['betaCarotene', 'alphaCarotene', 'betaCryptoxanthin', 'lycopene', 'luteinZeaxanthin'];\n const vitaminWaterSolubleKeys: NutrientKey[] = ['vitaminC', 'vitaminB6', 'vitaminB12', 'thiamin', 'riboflavin', 'niacin', 'pantothenicAcid', 'biotin', 'folate', 'folicAcid', 'choline', 'betaine'];\n\n return (\n

e.stopPropagation()}>\n

{displayLabel}

\n \n \n \n

\n\n

\n \n \n \n \n \n \n \n

\n\n

\n \n

\n );\n};\n\ninterface WeeklyNutritionData {\n daily: Record;\n weeklyAverage: DailyNutrition;\n goals: NutritionGoals | null;\n}\n\nfunction getWeekStartDate(date: Date): string {\n const d = new Date(date);\n const day = d.getDay();\n d.setDate(d.getDate() - day);\n d.setHours(0, 0, 0, 0);\n return d.toISOString().split('T')[0];\n}\n\nfunction formatDate(dateStr: string, dayOffset: number): string {\n const date = new Date(dateStr);\n date.setDate(date.getDate() + dayOffset);\n return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });\n}\n\nexport function MealPlanView({ recipes, customFoods, nutritionGoals }: MealPlanViewProps) {\n const [currentWeek, setCurrentWeek] = useState(() => getWeekStartDate(new Date()));\n const [mealPlan, setMealPlan] = useState(null);\n const [nutritionData, setNutritionData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [showAddMeal, setShowAddMeal] = useState<{ day: DayOfWeek; mealType: MealType } | null>(null);\n const [addMealTab, setAddMealTab] = useState('recipes');\n const [showSchedule, setShowSchedule] = useState(false);\n const [scheduleRecipe, setScheduleRecipe] = useState('');\n const [scheduleCustomFood, setScheduleCustomFood] = useState('');\n const [scheduleFdcId, setScheduleFdcId] = useState(null);\n const [scheduleTab, setScheduleTab] = useState('recipes');\n const [scheduleMealType, setScheduleMealType] = useState('breakfast');\n const [scheduleDays, setScheduleDays] = useState([]);\n const [scheduleAmountGrams, setScheduleAmountGrams] = useState('');\n\n // FDC search state for ingredients tab\n const [fdcSearchQuery, setFdcSearchQuery] = useState('');\n const [fdcSearchResults, setFdcSearchResults] = useState([]);\n const [fdcSearchLoading, setFdcSearchLoading] = useState(false);\n const [selectedFdcId, setSelectedFdcId] = useState(null);\n const [fdcAmountGrams, setFdcAmountGrams] = useState('100');\n const [customFoodAmountGrams, setCustomFoodAmountGrams] = useState('');\n\n // Day selection state: null = weekly average, 0-6 = specific day\n const [selectedDay, setSelectedDay] = useState(null);\n const [showAllNutrients, setShowAllNutrients] = useState(false);\n\n // Loading states to prevent duplicate submissions\n const [addingRecipe, setAddingRecipe] = useState(false);\n const [addingCustomFood, setAddingCustomFood] = useState(false);\n const [addingFdcIngredient, setAddingFdcIngredient] = useState(false);\n const [schedulingMeals, setSchedulingMeals] = useState(false);\n const [removingMealId, setRemovingMealId] = useState(null);\n const [selectedEntry, setSelectedEntry] = useState(null);\n\n const fetchMealPlan = useCallback(async () => {\n setLoading(true);\n try {\n const [planRes, nutritionRes] = await Promise.all([\n fetch(`/api/meal-plans?weekStartDate=${currentWeek}`),\n fetch(`/api/nutrition/weekly?weekStartDate=${currentWeek}`),\n ]);\n\n const planData = await planRes.json();\n const nutritionDataJson = await nutritionRes.json();\n\n if (planData.success) {\n setMealPlan(planData.data);\n }\n if (nutritionDataJson.success) {\n setNutritionData(nutritionDataJson.data);\n }\n } catch (err) {\n console.error('Failed to fetch meal plan:', err);\n } finally {\n setLoading(false);\n }\n }, [currentWeek]);\n\n useEffect(() => {\n fetchMealPlan();\n }, [fetchMealPlan]);\n\n const navigateWeek = (direction: number) => {\n // Parse the date string explicitly to avoid timezone issues\n const [year, month, day] = currentWeek.split('-').map(Number);\n const date = new Date(year, month - 1, day);\n date.setDate(date.getDate() + (direction * 7));\n setCurrentWeek(getWeekStartDate(date));\n };\n\n const goToCurrentWeek = () => {\n setCurrentWeek(getWeekStartDate(new Date()));\n };\n\n const handleAddRecipe = async (recipeId: string) => {\n if (!showAddMeal || addingRecipe) return;\n\n setAddingRecipe(true);\n try {\n const response = await fetch('/api/meal-plans/entries', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n weekStartDate: currentWeek,\n dayOfWeek: showAddMeal.day,\n mealType: showAddMeal.mealType,\n recipeId,\n servings: 1,\n }),\n });\n\n if (response.ok) {\n await fetchMealPlan();\n setShowAddMeal(null);\n }\n } finally {\n setAddingRecipe(false);\n }\n };\n\n const handleAddCustomFood = async (customFoodId: string, food: CustomFood) => {\n if (!showAddMeal || addingCustomFood) return;\n\n setAddingCustomFood(true);\n try {\n const amountGrams = customFoodAmountGrams ? parseFloat(customFoodAmountGrams) : food.servingSizeGrams;\n\n const response = await fetch('/api/meal-plans/entries', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n weekStartDate: currentWeek,\n dayOfWeek: showAddMeal.day,\n mealType: showAddMeal.mealType,\n customFoodId,\n amountGrams,\n }),\n });\n\n if (response.ok) {\n await fetchMealPlan();\n setShowAddMeal(null);\n setCustomFoodAmountGrams('');\n }\n } finally {\n setAddingCustomFood(false);\n }\n };\n\n const handleAddFdcIngredient = async () => {\n if (!showAddMeal || !selectedFdcId || addingFdcIngredient) return;\n\n setAddingFdcIngredient(true);\n try {\n const amountGrams = parseFloat(fdcAmountGrams) || 100;\n\n const response = await fetch('/api/meal-plans/entries', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n weekStartDate: currentWeek,\n dayOfWeek: showAddMeal.day,\n mealType: showAddMeal.mealType,\n fdcId: selectedFdcId,\n amountGrams,\n }),\n });\n\n if (response.ok) {\n await fetchMealPlan();\n setShowAddMeal(null);\n setSelectedFdcId(null);\n setFdcSearchQuery('');\n setFdcSearchResults([]);\n setFdcAmountGrams('100');\n }\n } finally {\n setAddingFdcIngredient(false);\n }\n };\n\n const handleFdcSearch = async () => {\n if (!fdcSearchQuery.trim()) return;\n\n setFdcSearchLoading(true);\n try {\n const response = await fetch(`/api/fdc/search?query=${encodeURIComponent(fdcSearchQuery)}`);\n const data = await response.json();\n if (data.success) {\n setFdcSearchResults(data.data);\n }\n } catch (err) {\n console.error('FDC search failed:', err);\n } finally {\n setFdcSearchLoading(false);\n }\n };\n\n const handleRemoveMeal = async (entryId: string) => {\n if (removingMealId) return;\n\n setRemovingMealId(entryId);\n try {\n const response = await fetch(`/api/meal-plans/entries/${entryId}`, {\n method: 'DELETE',\n });\n\n if (response.ok) {\n await fetchMealPlan();\n }\n } finally {\n setRemovingMealId(null);\n }\n };\n\n const handleDuplicateEntry = async (entry: MealPlanEntry, days: DayOfWeek[]) => {\n setSchedulingMeals(true);\n try {\n const response = await fetch('/api/meal-plans/schedule', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n weekStartDate: currentWeek,\n mealType: entry.mealType,\n days,\n recipeId: entry.recipeId,\n customFoodId: entry.customFoodId,\n fdcId: entry.fdcId,\n servings: entry.servings,\n amountGrams: entry.amountGrams,\n }),\n });\n\n if (response.ok) {\n await fetchMealPlan();\n }\n } finally {\n setSchedulingMeals(false);\n }\n };\n\n const handleScheduleMeals = async () => {\n if (schedulingMeals) return;\n\n let payload: any = {\n weekStartDate: currentWeek,\n mealType: scheduleMealType,\n days: scheduleDays,\n servings: 1,\n };\n\n if (scheduleTab === 'recipes') {\n if (!scheduleRecipe || scheduleDays.length === 0) return;\n payload.recipeId = scheduleRecipe;\n } else if (scheduleTab === 'custom-foods') {\n if (!scheduleCustomFood || scheduleDays.length === 0) return;\n payload.customFoodId = scheduleCustomFood;\n payload.amountGrams = parseFloat(scheduleAmountGrams) || 0;\n } else if (scheduleTab === 'ingredients') {\n if (!selectedFdcId || scheduleDays.length === 0) return;\n payload.fdcId = selectedFdcId;\n payload.amountGrams = parseFloat(fdcAmountGrams) || 100;\n }\n\n setSchedulingMeals(true);\n try {\n const response = await fetch('/api/meal-plans/schedule', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(payload),\n });\n\n if (response.ok) {\n await fetchMealPlan();\n setShowSchedule(false);\n setScheduleRecipe('');\n setScheduleCustomFood('');\n setScheduleFdcId(null);\n setScheduleDays([]);\n setScheduleAmountGrams('');\n // Reset generic search state too\n setSelectedFdcId(null);\n setFdcSearchQuery('');\n setFdcSearchResults([]);\n setFdcAmountGrams('100');\n }\n } finally {\n setSchedulingMeals(false);\n }\n };\n\n const getEntriesForCell = (day: DayOfWeek, mealType: MealType): MealPlanEntry[] => {\n if (!mealPlan?.entries) return [];\n return mealPlan.entries.filter(e => e.dayOfWeek === day && e.mealType === mealType);\n };\n\n const getNutritionProgress = (value: number, goal: number): { percent: number; status: 'success' | 'warning' | 'primary' } => {\n const percent = Math.min((value / goal) * 100, 100);\n if (percent >= 90 && percent <= 110) return { percent, status: 'success' };\n if (percent > 110) return { percent: 100, status: 'warning' };\n return { percent, status: 'primary' };\n };\n\n if (loading) {\n return (\n

\n );\n }\n\n return (\n

\n {/* Header */}\n

\n navigateWeek(-1)}\n className=\"p-1.5 rounded-lg transition-colors\"\n style={{ color: 'var(--text-secondary)' }}\n >\n \n \n

\n Week of {formatDate(currentWeek, 0)}\n

\n {formatDate(currentWeek, 0)} - {formatDate(currentWeek, 6)}\n

\n navigateWeek(1)}\n className=\"p-1.5 rounded-lg transition-colors\"\n style={{ color: 'var(--text-secondary)' }}\n >\n \n \n

\n\n

\n \n \n

\n\n {/* Nutrition summary - Weekly average or selected day */}\n {nutritionData && nutritionGoals && (() => {\n // Get nutrition data based on selection\n const displayData = selectedDay !== null\n ? nutritionData.daily[selectedDay]\n : nutritionData.weeklyAverage;\n const displayLabel = selectedDay !== null\n ? `${DAY_NAMES[selectedDay]}'s Nutrition`\n : 'Weekly Average';\n\n // Define all macronutrients\n const allMacros = [\n { key: 'calories', label: 'Calories', unit: 'kcal' },\n { key: 'protein', label: 'Protein', unit: 'g' },\n { key: 'carbs', label: 'Carbs', unit: 'g' },\n { key: 'fat', label: 'Fat', unit: 'g' },\n { key: 'fiber', label: 'Fiber', unit: 'g' },\n ];\n\n // Sort macros: ones with goals first, then others\n const sortedMacros = allMacros.sort((a, b) => {\n const aHasGoal =\n nutritionGoals.primaryGoalType === a.key ||\n nutritionGoals.subGoal1Type === a.key ||\n nutritionGoals.subGoal2Type === a.key;\n const bHasGoal =\n nutritionGoals.primaryGoalType === b.key ||\n nutritionGoals.subGoal1Type === b.key ||\n nutritionGoals.subGoal2Type === b.key;\n\n if (aHasGoal && !bHasGoal) return -1;\n if (!aHasGoal && bHasGoal) return 1;\n\n // If both have goals, prioritize by goal order (primary > sub1 > sub2)\n if (aHasGoal && bHasGoal) {\n const aPriority =\n nutritionGoals.primaryGoalType === a.key ? 1 :\n nutritionGoals.subGoal1Type === a.key ? 2 :\n nutritionGoals.subGoal2Type === a.key ? 3 : 99;\n const bPriority =\n nutritionGoals.primaryGoalType === b.key ? 1 :\n nutritionGoals.subGoal1Type === b.key ? 2 :\n nutritionGoals.subGoal2Type === b.key ? 3 : 99;\n return aPriority - bPriority;\n }\n\n return 0;\n });\n\n return (\n

{displayLabel}

\n setShowAllNutrients(true)}\n className=\"text-xs font-medium hover:underline\"\n style={{ color: 'var(--accent)' }}\n >\n View All Nutrients →\n \n

\n {sortedMacros.map(({ key, label, unit }) => {\n const value = displayData[key as keyof DailyNutrition];\n let goal: number | null = null;\n\n if (nutritionGoals.primaryGoalType === key) goal = nutritionGoals.primaryGoalValue;\n else if (nutritionGoals.subGoal1Type === key) goal = nutritionGoals.subGoal1Value;\n else if (nutritionGoals.subGoal2Type === key) goal = nutritionGoals.subGoal2Value;\n\n return (\n

\n {Math.round(value)}\n {unit}\n

{label}

\n {goal && (\n

\n \n

\n )}\n

\n );\n })}\n

\n );\n })()}\n

\n\n {/* Calendar grid */}\n

\n {/* Day headers - clickable to view day nutrition */}\n

{/* Label column spacer */}\n {DAY_NAMES.map((day, i) => {\n const isSelected = selectedDay === i;\n return (\n setSelectedDay(isSelected ? null : i as DayOfWeek)}\n className=\"text-center p-1.5 rounded-lg transition-all cursor-pointer\"\n style={{\n background: isSelected ? 'rgba(59, 130, 246, 0.12)' : 'transparent',\n opacity: selectedDay !== null && !isSelected ? 0.4 : 1,\n border: 'none',\n marginBottom: '0',\n }}\n >\n

{day}

{formatDate(currentWeek, i)}

\n \n );\n })}\n

\n\n {/* Meal rows */}\n

\n {MEAL_TYPES.map((mealType, mealIdx) => (\n

\n {MEAL_TYPE_LABELS[mealType]}\n

\n {[0, 1, 2, 3, 4, 5, 6].map((day) => {\n const entries = getEntriesForCell(day as DayOfWeek, mealType);\n const isSelected = selectedDay === day;\n const isFirstRow = mealIdx === 0;\n const isLastRow = mealIdx === MEAL_TYPES.length - 1;\n \n return (\n \n {entries.length > 0 ? (\n

\n {entries.map((entry) => {\n let name = 'Unknown';\n if (entry.recipeId && entry.recipe) name = entry.recipe.title;\n else if (entry.customFoodId && entry.customFood) name = entry.customFood.name;\n else if (entry.fdcId && entry.fdcFood) name = entry.fdcFood.description;\n\n return (\n setSelectedEntry(entry)}\n className=\"w-full text-left text-sm p-1.5 rounded hover:bg-white dark:hover:bg-gray-700 shadow-sm border border-transparent hover:border-gray-200 dark:hover:border-gray-600 transition-all\"\n style={{ background: 'var(--bg-secondary)' }}\n >\n

\n {name}\n

\n \n );\n })}\n

\n ) : (\n setShowAddMeal({ day: day as DayOfWeek, mealType })}\n className=\"w-full h-full min-h-[40px] flex items-center justify-center text-gray-300 hover:text-gray-500 transition-colors opacity-0 group-hover:opacity-100\"\n >\n \n \n )}\n\n {/* Add more button when has entries */}\n {entries.length > 0 && (\n setShowAddMeal({ day: day as DayOfWeek, mealType })}\n className=\"absolute bottom-1 right-1 p-0.5 rounded text-gray-300 hover:text-gray-500 opacity-0 group-hover:opacity-100 transition-all\"\n >\n \n \n )}\n

\n );\n })}\n

\n ))}\n

\n\n {/* Add meal modal - with tabs for recipes, custom foods, and ingredients */}\n {showAddMeal && (\n

setShowAddMeal(null)}>\n

e.stopPropagation()}>\n

\n Add {MEAL_TYPE_LABELS[showAddMeal.mealType]} - {DAY_NAMES[showAddMeal.day]}\n

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

\n setAddMealTab('recipes')}\n className=\"pb-2 px-3 text-sm font-medium border-b-2 transition-colors\"\n style={addMealTab === 'recipes' \n ? { borderColor: 'var(--accent)', color: 'var(--accent)' } \n : { borderColor: 'transparent', color: 'var(--text-secondary)' }}\n >\n Recipes\n \n setAddMealTab('custom-foods')}\n className=\"pb-2 px-3 text-sm font-medium border-b-2 transition-colors\"\n style={addMealTab === 'custom-foods' \n ? { borderColor: 'var(--accent)', color: 'var(--accent)' } \n : { borderColor: 'transparent', color: 'var(--text-secondary)' }}\n >\n Custom Foods\n \n setAddMealTab('ingredients')}\n className=\"pb-2 px-3 text-sm font-medium border-b-2 transition-colors\"\n style={addMealTab === 'ingredients' \n ? { borderColor: 'var(--accent)', color: 'var(--accent)' } \n : { borderColor: 'transparent', color: 'var(--text-secondary)' }}\n >\n USDA Foods\n \n

\n\n

\n {/* Recipes Tab */}\n {addMealTab === 'recipes' && (\n <>\n {recipes.length === 0 ? (\n

\n No recipes yet. Create a recipe first.\n

\n ) : (\n

\n {recipes.map((recipe) => (\n handleAddRecipe(recipe.id)}\n disabled={addingRecipe}\n className=\"w-full p-3 text-left rounded-lg transition-colors flex items-center justify-between disabled:opacity-50 disabled:cursor-not-allowed\"\n style={{ background: 'transparent' }}\n >\n

{recipe.title}

\n {recipe.nutrition?.calories && (\n

\n {Math.round(recipe.nutrition.calories)} kcal per serving\n

\n )}\n

\n \n \n ))}\n

\n )}\n \n )}\n\n {/* Custom Foods Tab */}\n {addMealTab === 'custom-foods' && (\n <>\n {customFoods.length === 0 ? (\n

\n No custom foods yet. Create one in the Recipes tab.\n

\n ) : (\n

\n {customFoods.map((food) => (\n

\n {food.name}\n Custom\n

\n {food.calories && (\n

\n {Math.round(food.calories)} kcal per {food.servingSizeGrams}g\n

\n )}\n

\n setCustomFoodAmountGrams(e.target.value)}\n className=\"input w-24 text-sm py-1\"\n min=\"1\"\n />\n grams\n handleAddCustomFood(food.id, food)}\n disabled={addingCustomFood}\n className=\"btn-primary text-sm py-1 px-3 ml-auto disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {addingCustomFood ? 'Adding...' : 'Add'}\n \n

\n ))}\n

\n )}\n \n )}\n\n {/* USDA Foods/Ingredients Tab */}\n {addMealTab === 'ingredients' && (\n

\n {/* Search */}\n

\n setFdcSearchQuery(e.target.value)}\n className=\"input flex-1\"\n onKeyDown={(e) => e.key === 'Enter' && handleFdcSearch()}\n />\n \n {fdcSearchLoading ? '...' : 'Search'}\n \n

\n\n {/* Search results */}\n {fdcSearchResults.length > 0 && (\n

\n {fdcSearchResults.map((result) => (\n setSelectedFdcId(result.fdcId)}\n className=\"w-full p-2 text-left rounded-lg transition-colors\"\n style={selectedFdcId === result.fdcId\n ? { border: '1px solid var(--accent)', background: 'var(--bg-tertiary)' }\n : { border: '1px solid var(--border-primary)' }}\n >\n

{result.description}

\n \n {result.dataType === 'Branded' ? 'Branded' : 'USDA'}\n \n {result.brandOwner && {result.brandOwner}}\n

\n \n ))}\n

\n )}\n\n {/* Amount and Add button */}\n {selectedFdcId && (\n

\n Amount:\n setFdcAmountGrams(e.target.value)}\n className=\"input w-24 text-sm py-1\"\n min=\"1\"\n />\n grams\n \n {addingFdcIngredient ? 'Adding...' : 'Add to Meal'}\n \n

\n )}\n

\n\n

\n \n

\n )}\n\n {/* Schedule meals modal */}\n {showSchedule && (\n

setShowSchedule(false)}>\n

e.stopPropagation()}>\n

Schedule Meals

Add items to multiple days at once

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

\n setScheduleTab('recipes')}\n className=\"pb-2 px-3 text-sm font-medium border-b-2 transition-colors\"\n style={scheduleTab === 'recipes' \n ? { borderColor: 'var(--accent)', color: 'var(--accent)' } \n : { borderColor: 'transparent', color: 'var(--text-secondary)' }}\n >\n Recipes\n \n setScheduleTab('custom-foods')}\n className=\"pb-2 px-3 text-sm font-medium border-b-2 transition-colors\"\n style={scheduleTab === 'custom-foods' \n ? { borderColor: 'var(--accent)', color: 'var(--accent)' } \n : { borderColor: 'transparent', color: 'var(--text-secondary)' }}\n >\n Custom Foods\n \n setScheduleTab('ingredients')}\n className=\"pb-2 px-3 text-sm font-medium border-b-2 transition-colors\"\n style={scheduleTab === 'ingredients' \n ? { borderColor: 'var(--accent)', color: 'var(--accent)' } \n : { borderColor: 'transparent', color: 'var(--text-secondary)' }}\n >\n USDA Foods\n \n

\n\n

\n {/* Content based on tab */}\n {scheduleTab === 'recipes' && (\n

\n Recipe\n setScheduleRecipe(e.target.value)}\n className=\"input\"\n >\n \n {recipes.map((recipe) => (\n \n ))}\n \n

\n )}\n\n {scheduleTab === 'custom-foods' && (\n

\n Custom Food\n {\n setScheduleCustomFood(e.target.value);\n const food = customFoods.find(f => f.id === e.target.value);\n if (food) setScheduleAmountGrams(food.servingSizeGrams.toString());\n }}\n className=\"input\"\n >\n \n {customFoods.map((food) => (\n \n ))}\n \n

\n {scheduleCustomFood && (\n

\n Amount:\n setScheduleAmountGrams(e.target.value)}\n className=\"input w-24 text-sm\"\n min=\"1\"\n />\n grams\n

\n )}\n

\n )}\n\n {scheduleTab === 'ingredients' && (\n

\n setFdcSearchQuery(e.target.value)}\n className=\"input flex-1\"\n onKeyDown={(e) => e.key === 'Enter' && handleFdcSearch()}\n />\n \n {fdcSearchLoading ? '...' : 'Search'}\n \n

\n\n {fdcSearchResults.length > 0 && (\n

{result.description}

{result.brandOwner || result.dataType}

\n \n ))}\n

\n )}\n\n {selectedFdcId && (\n

\n Amount:\n setFdcAmountGrams(e.target.value)}\n className=\"input w-24 text-sm\"\n min=\"1\"\n />\n grams\n

\n )}\n

\n )}\n\n

\n\n {/* Meal type */}\n

\n Meal Type\n setScheduleMealType(e.target.value as MealType)}\n className=\"input\"\n >\n {MEAL_TYPES.map((type) => (\n \n ))}\n \n

\n\n {/* Days selection */}\n

\n Days\n

\n {DAY_NAMES.map((day, i) => (\n {\n if (scheduleDays.includes(i as DayOfWeek)) {\n setScheduleDays(scheduleDays.filter(d => d !== i));\n } else {\n setScheduleDays([...scheduleDays, i as DayOfWeek]);\n }\n }}\n className=\"px-3 py-1.5 rounded-lg text-sm font-medium transition-colors\"\n style={scheduleDays.includes(i as DayOfWeek) \n ? { background: 'var(--accent)', color: 'white' } \n : { background: 'var(--bg-tertiary)', color: 'var(--text-secondary)' }}\n >\n {day.slice(0, 3)}\n \n ))}\n

\n setScheduleDays([0, 1, 2, 3, 4, 5, 6])}\n className=\"text-xs mt-2 hover:underline\"\n style={{ color: 'var(--accent)' }}\n >\n Select all (repeat daily)\n \n

\n {\n setShowSchedule(false);\n setScheduleRecipe('');\n setScheduleCustomFood('');\n setSelectedFdcId(null);\n setFdcSearchQuery('');\n setFdcSearchResults([]);\n }}\n className=\"btn-secondary flex-1\"\n >\n Cancel\n \n \n {schedulingMeals ? 'Scheduling...' : 'Schedule'}\n \n

\n )}\n\n {/* View All Nutrients Modal */}\n {showAllNutrients && nutritionData && (() => {\n const displayData = selectedDay !== null\n ? nutritionData.daily[selectedDay]\n : nutritionData.weeklyAverage;\n const displayLabel = selectedDay !== null\n ? `${DAY_NAMES[selectedDay]} - All Nutrients`\n : 'Weekly Average - All Nutrients';\n\n return (\n setShowAllNutrients(false)}\n />\n );\n })()}\n\n {/* Item Detail Modal */}\n {selectedEntry && (\n setSelectedEntry(null)}\n onRemove={handleRemoveMeal}\n onDuplicate={handleDuplicateEntry}\n />\n )}\n \n );\n}\n\n\n","deleted","label",[175,176,157],"frontend","components","permalink","https://www.val.town/x/shapedlines/carmy/code/frontend/components/MealPlanView.tsx","extension","actionData","errors"]