\n \n {type === 'calories' ? '🔥' : type === 'protein' ? '💪' : type === 'fiber' ? '🥬' : type === 'fat' ? '🥑' : '🍞'}\n \n

{NUTRITION_GOAL_LABELS[type]}

\n {isPrimary && (\n \n Primary Goal\n \n )}\n

{Math.round(currentValue)}

of {targetValue} {NUTRITION_GOAL_UNITS[type]}

\n \n

\n {Math.round(percent)}% of daily goal\n = 90 && percent <= 110 ? 'var(--leaf)' : percent > 110 ? '#fbbf24' : 'var(--text-secondary)' }}\n >\n {targetValue - currentValue > 0 ? `${Math.round(targetValue - currentValue)} ${NUTRITION_GOAL_UNITS[type]} remaining` : 'Goal reached!'}\n \n

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

\n {/* Header */}\n

Nutrition Goals

Track your daily nutrition against your goals

\n setEditing(true)}\n className=\"btn-secondary text-sm\"\n >\n {goals ? 'Edit Goals' : 'Set Goals'}\n \n

\n \n {/* Goals display */}\n {goals ? (\n

\n {/* Primary goal */}\n

\n {renderGoalCard(\n goals.primaryGoalType,\n goals.primaryGoalValue,\n weeklyData?.weeklyAverage[goals.primaryGoalType as keyof DailyNutrition] || 0,\n true\n )}\n \n {/* Sub goals */}\n {goals.subGoal1Type && goals.subGoal1Value && (\n renderGoalCard(\n goals.subGoal1Type,\n goals.subGoal1Value,\n weeklyData?.weeklyAverage[goals.subGoal1Type as keyof DailyNutrition] || 0,\n false\n )\n )}\n \n {goals.subGoal2Type && goals.subGoal2Value && (\n renderGoalCard(\n goals.subGoal2Type,\n goals.subGoal2Value,\n weeklyData?.weeklyAverage[goals.subGoal2Type as keyof DailyNutrition] || 0,\n false\n )\n )}\n

\n \n {/* Weekly overview */}\n {weeklyData && (\n

This Week's Overview

\n {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day, i) => {\n const dayData = weeklyData.daily[i];\n const percent = (dayData[goals.primaryGoalType as keyof DailyNutrition] / goals.primaryGoalValue) * 100;\n \n return (\n

{day}

\n \n

\n {Math.round(dayData[goals.primaryGoalType as keyof DailyNutrition])}\n

\n );\n })}\n

\n On target (90-110%)\n

\n Over target\n

\n Under target\n

\n )}\n \n {/* All nutrition breakdown */}\n

Weekly Average Breakdown

\n {GOAL_TYPES.map((type) => {\n const value = weeklyData?.weeklyAverage[type as keyof DailyNutrition] || 0;\n let goal: number | null = null;\n \n if (goals.primaryGoalType === type) goal = goals.primaryGoalValue;\n else if (goals.subGoal1Type === type) goal = goals.subGoal1Value;\n else if (goals.subGoal2Type === type) goal = goals.subGoal2Value;\n \n return (\n

\n {type === 'calories' ? '🔥' : type === 'protein' ? '💪' : type === 'fiber' ? '🥬' : type === 'fat' ? '🥑' : '🍞'}\n

\n {Math.round(value)}\n {NUTRITION_GOAL_UNITS[type]}\n

{NUTRITION_GOAL_LABELS[type]}

\n {goal && (\n

\n {Math.round((value / goal) * 100)}% of goal\n

\n )}\n

\n );\n })}\n

\n ) : (\n

\n 🎯\n

Set Your Nutrition Goals

\n Define your daily nutrition targets to track your progress and stay on track with your health goals.\n

\n \n

\n )}\n

\n \n {/* Edit goals modal */}\n {editing && (\n

setEditing(false)}>\n

e.stopPropagation()}>\n

\n {goals ? 'Edit Nutrition Goals' : 'Set Nutrition Goals'}\n

\n Set one primary goal and up to two sub-goals\n

\n \n

\n {/* Primary goal */}\n

\n \n Primary Goal\n \n

\n Type\n setPrimaryType(e.target.value as NutritionGoalType)}\n className=\"input\"\n >\n {GOAL_TYPES.map((type) => (\n \n ))}\n \n

\n \n Target ({NUTRITION_GOAL_UNITS[primaryType]})\n \n setPrimaryValue(e.target.value)}\n className=\"input\"\n required\n />\n

\n \n {/* Sub-goal 1 */}\n

\n Sub-Goal 1 (Optional)\n {sub1Type && (\n { setSub1Type(''); setSub1Value(''); }}\n className=\"text-xs hover:text-red-500\"\n style={{ color: 'var(--text-secondary)' }}\n >\n Remove\n \n )}\n

\n setSub1Type(e.target.value as NutritionGoalType)}\n className=\"input\"\n >\n \n {GOAL_TYPES.filter(t => t !== primaryType && t !== sub2Type).map((type) => (\n \n ))}\n \n

\n setSub1Value(e.target.value)}\n className=\"input\"\n placeholder={sub1Type ? NUTRITION_GOAL_UNITS[sub1Type] : 'Target'}\n disabled={!sub1Type}\n />\n

\n \n {/* Sub-goal 2 */}\n

\n Sub-Goal 2 (Optional)\n {sub2Type && (\n { setSub2Type(''); setSub2Value(''); }}\n className=\"text-xs hover:text-red-500\"\n style={{ color: 'var(--text-secondary)' }}\n >\n Remove\n \n )}\n

\n setSub2Type(e.target.value as NutritionGoalType)}\n className=\"input\"\n >\n \n {GOAL_TYPES.filter(t => t !== primaryType && t !== sub1Type).map((type) => (\n \n ))}\n \n

\n setSub2Value(e.target.value)}\n className=\"input\"\n placeholder={sub2Type ? NUTRITION_GOAL_UNITS[sub2Type] : 'Target'}\n disabled={!sub2Type}\n />\n

\n \n

\n \n \n

\n )}\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/NutritionView.tsx","extension","actionData","errors"]