💪 Wellness Tracker

\n \n

\n {user?.name || 'Demo User'}\n

\n\n {/* Navigation */}\n

\n {[\n { id: 'dashboard', label: '📊 Dashboard' },\n { id: 'activity', label: '🏃 Activity' },\n { id: 'meals', label: '🍽️ Meals' },\n { id: 'sleep', label: '😴 Sleep' },\n { id: 'wearables', label: '⌚ Devices' },\n { id: 'analytics', label: '📈 Analytics' }\n ].map(tab => (\n setActiveTab(tab.id)}\n className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${\n activeTab === tab.id\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700'\n }`}\n >\n {tab.label}\n \n ))}\n

\n\n {/* Main Content */}\n

\n {activeTab === 'dashboard' && (\n \n )}\n {activeTab === 'activity' && }\n {activeTab === 'meals' && }\n {activeTab === 'sleep' && }\n {activeTab === 'wearables' && }\n {activeTab === 'analytics' && }\n

\n );\n\n async function syncDevices() {\n try {\n const response = await fetch('/api/wearables/fitbit/sync', { method: 'POST' });\n if (response.ok) {\n await loadTodayData();\n alert('Device data synced successfully!');\n }\n } catch (error) {\n console.error('Sync failed:', error);\n alert('Sync failed. Please try again.');\n }\n }\n}\n\n// Dashboard Tab Component\nfunction DashboardTab({ \n dailySummary, \n wellnessScore, \n onDataUpdate \n}: { \n dailySummary: DailySummary | null;\n wellnessScore: WellnessScore | null;\n onDataUpdate: () => void;\n}) {\n const [showWaterModal, setShowWaterModal] = useState(false);\n const [showStressModal, setShowStressModal] = useState(false);\n\n const logWater = async (amount: number) => {\n try {\n const response = await fetch('/api/activity/water', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ amount })\n });\n \n if (response.ok) {\n onDataUpdate();\n setShowWaterModal(false);\n }\n } catch (error) {\n console.error('Failed to log water:', error);\n }\n };\n\n const logStress = async (level: number, context?: string) => {\n try {\n const response = await fetch('/api/activity/stress', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ level, context })\n });\n \n if (response.ok) {\n onDataUpdate();\n setShowStressModal(false);\n }\n } catch (error) {\n console.error('Failed to log stress:', error);\n }\n };\n\n return (\n

\n {/* Wellness Score */}\n

Today's Wellness Score

\n {wellnessScore?.totalScore || '--'}\n /100\n \n {wellnessScore?.grade || '-'}\n \n

🎯

\n\n {/* Today's Metrics */}\n

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

\n\n {/* Quick Actions */}\n

\n {/* Navigate to meals tab */}}\n />\n setShowWaterModal(true)}\n />\n setShowStressModal(true)}\n />\n

\n\n {/* Modals */}\n {showWaterModal && (\n setShowWaterModal(false)}\n onSubmit={logWater}\n />\n )}\n \n {showStressModal && (\n setShowStressModal(false)}\n onSubmit={logStress}\n />\n )}\n

\n );\n}\n\n// Metric Card Component\nfunction MetricCard({ \n title, \n value, \n subtitle, \n icon, \n className \n}: {\n title: string;\n value: string;\n subtitle: string;\n icon: string;\n className: string;\n}) {\n return (\n

{title}

{value}

{subtitle}

{icon}

\n );\n}\n\n// Quick Action Card Component\nfunction QuickActionCard({ \n title, \n subtitle, \n icon, \n onClick \n}: {\n title: string;\n subtitle: string;\n icon: string;\n onClick: () => void;\n}) {\n return (\n \n );\n}\n\n// Water Modal Component\nfunction WaterModal({ \n onClose, \n onSubmit \n}: {\n onClose: () => void;\n onSubmit: (amount: number) => void;\n}) {\n const [amount, setAmount] = useState('');\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n const amountNum = parseInt(amount);\n if (amountNum > 0) {\n onSubmit(amountNum);\n }\n };\n\n return (\n

Log Water Intake

\n \n

\n );\n}\n\n// Stress Modal Component\nfunction StressModal({ \n onClose, \n onSubmit \n}: {\n onClose: () => void;\n onSubmit: (level: number, context?: string) => void;\n}) {\n const [level, setLevel] = useState(null);\n const [context, setContext] = useState('');\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (level !== null) {\n onSubmit(level, context || undefined);\n }\n };\n\n return (\n

Log Stress Level

\n Stress Level (1-10)\n

\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(num => (\n setLevel(num)}\n className={`py-2 px-3 rounded text-sm ${\n level === num \n ? 'bg-blue-500 text-white' \n : num <= 2 \n ? 'bg-green-100 hover:bg-green-200'\n : num <= 5\n ? 'bg-yellow-100 hover:bg-yellow-200'\n : num <= 7\n ? 'bg-orange-100 hover:bg-orange-200'\n : 'bg-red-100 hover:bg-red-200'\n }`}\n >\n {num}\n \n ))}\n

1 = Very relaxed, 10 = Very stressed

\n Context (optional)\n setContext(e.target.value)}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2\"\n placeholder=\"What's happening?\"\n />\n

\n \n Cancel\n \n \n Log Stress\n \n

\n );\n}\n\n// Placeholder components for other tabs\nfunction ActivityTab({ onDataUpdate }: { onDataUpdate: () => void }) {\n return

Activity tracking coming soon...

;\n}\n\nfunction MealsTab({ onDataUpdate }: { onDataUpdate: () => void }) {\n return

Meal logging coming soon...

;\n}\n\nfunction SleepTab({ onDataUpdate }: { onDataUpdate: () => void }) {\n return

Sleep tracking coming soon...

;\n}\n\nfunction WearablesTab() {\n return

Wearable device management coming soon...

;\n}\n\nfunction AnalyticsTab() {\n return

Analytics and insights coming soon...

;\n}\n\n// Initialize the app\nconst root = createRoot(document.getElementById('app')!);\nroot.render();","deleted","label",[170,153],"frontend","permalink","https://www.val.town/x/fezokuhlekhumalo14/ATM/code/frontend/index.tsx","extension","actionData","errors"]