{"App.tsx":"import React, { useState } from \"react\";\nimport Header from \"./components/Header\";\nimport Dashboard from \"./components/Dashboard\";\nimport HealthScan from \"./components/HealthScan\";\nimport Settings from \"./components/Settings\";\nimport Onboarding from \"./components/Onboarding\";\nimport BottomNav from \"./components/BottomNav\";\nimport Insights from \"./components/Insights\";\nimport Messages from \"./components/Messages\";\nimport ScanResults from \"./components/ScanResults\";\nimport SubscriptionScreen from \"./components/SubscriptionScreen\";\n\nexport default function App() {\n const [currentView, setCurrentView] = useState(\"dashboard\");\n const [isNewUser, setIsNewUser] = useState(false);\n const [scanResults, setScanResults] = useState(null);\n const [userProfile, setUserProfile] = useState({\n name: \"Alex\",\n wellnessScore: \"85\",\n subscription: \"freemium\",\n preferences: {\n scanFrequency: \"2\",\n metrics: {\n heartRate: true,\n respiratory: true,\n stress: true\n },\n notifications: \"desktop\",\n goal: \"stress\"\n }\n });\n\n const handleOnboardingComplete = (preferences) => {\n setUserProfile(prev => ({\n ...prev,\n preferences: preferences\n }));\n setIsNewUser(false);\n };\n\n const handleScanComplete = (results) => {\n setScanResults(results);\n setCurrentView(\"scan-results\");\n };\n\n const handleSubscriptionChange = (plan) => {\n setUserProfile(prev => ({\n ...prev,\n subscription: plan\n }));\n setCurrentView(\"settings\");\n };\n\n if (isNewUser) {\n return ;\n }\n\n const renderCurrentView = () => {\n switch (currentView) {\n case \"dashboard\":\n return (\n setCurrentView(\"scan\")} \n />\n );\n case \"scan\":\n return ;\n case \"scan-results\":\n return scanResults && ;\n case \"insights\":\n return ;\n case \"messages\":\n return ;\n case \"settings\":\n return (\n \n );\n case \"subscription\":\n return (\n setCurrentView(\"settings\")}\n />\n );\n default:\n return setCurrentView(\"scan\")} />;\n }\n };\n\n const isSubscriptionView = currentView === \"subscription\";\n\n return (\n

\n {!isSubscriptionView && (\n

\n )}\n

\n {renderCurrentView()}\n

\n {!isSubscriptionView && (\n \n )}\n

\n );\n}","components/Header.tsx":"import React from \"react\";\nimport { Cog6ToothIcon, HeartIcon, ArrowTrendingUpIcon, BoltIcon } from \"@heroicons/react/24/outline\";\n\ninterface HeaderProps {\n userProfile: {\n name: string;\n wellnessScore: number;\n subscription: string;\n };\n onNavigate: (view: string) => void;\n}\n\nexport default function Header({ userProfile, onNavigate }: HeaderProps) {\n const realtimeStats = {\n heartRate: \"72\",\n respiratoryRate: \"16\",\n stressLevel: \"Low\",\n insight: \"Your stress levels are steady today! Keep up your routine.\"\n };\n\n return (\n

\n \n\n

Welcome, {userProfile.name}

\n Score: {userProfile.wellnessScore}\n

\n onNavigate(\"settings\")}\n className=\"p-2 text-gray-500 hover:text-purple-600 rounded-full hover:bg-purple-50\"\n >\n \n \n

\n\n {/* Real-time Stats Bar - Scrollable on mobile */}\n

\n \n {realtimeStats.heartRate} bpm\n

\n \n {realtimeStats.respiratoryRate} br/min\n

\n \n Stress: {realtimeStats.stressLevel}\n

\n {realtimeStats.insight}\n

\n );\n}","components/Dashboard.tsx":"import React from \"react\";\nimport HealthStats from \"./HealthStats\";\nimport InsightsPanel from \"./InsightsPanel\";\nimport TrendGraphs from \"./TrendGraphs\";\nimport ScanControls from \"./ScanControls\";\nimport PersonalAssistant from \"./PersonalAssistant\";\n\ninterface DashboardProps {\n userProfile: {\n name: string;\n wellnessScore: number;\n subscription: string;\n };\n onStartScan: () => void;\n}\n\nexport default function Dashboard({ userProfile, onStartScan }: DashboardProps) {\n return (\n

\n {/* Personal Assistant takes full width on mobile */}\n

\n \n

\n\n {/* Health Stats - Full width on mobile */}\n

\n \n

\n\n {/* Insights and Trends - Stack on mobile */}\n

\n \n \n

\n\n {/* Scan Controls - Fixed at bottom on mobile */}\n

\n \n

\n );\n}","components/HealthStats.tsx":"import React from \"react\";\nimport { HeartIcon, ArrowTrendingUpIcon, BoltIcon } from \"@heroicons/react/24/outline\";\n\ninterface HealthStatsProps {\n userProfile: {\n subscription: string;\n };\n}\n\nexport default function HealthStats({ userProfile }: HealthStatsProps) {\n const metrics = [\n {\n name: \"Heart Rate\",\n value: \"72\",\n unit: \"bpm\",\n status: \"normal\",\n icon: HeartIcon,\n color: \"text-red-500\"\n },\n {\n name: \"Respiratory Rate\",\n value: \"16\",\n unit: \"br/min\",\n status: \"normal\",\n icon: ArrowTrendingUpIcon,\n color: \"text-blue-500\"\n },\n {\n name: \"Stress Level\",\n value: \"Low\",\n status: \"good\",\n icon: BoltIcon,\n color: \"text-green-500\"\n }\n ];\n\n return (\n

Real-time Health Stats

\n {metrics.map((metric) => (\n

\n \n

{metric.name}

\n {metric.value} {metric.unit}\n {metric.status}\n

\n ))}\n

\n );\n}","components/InsightsPanel.tsx":"import React from \"react\";\nimport { ChatBubbleBottomCenterTextIcon } from \"@heroicons/react/24/outline\";\n\ninterface InsightsPanelProps {\n userProfile: {\n subscription: string;\n };\n}\n\nexport default function InsightsPanel({ userProfile }: InsightsPanelProps) {\n const insights = [\n {\n message: \"Your stress levels are rising. Consider a 5-minute break.\",\n type: \"suggestion\"\n },\n {\n message: \"HRV trending well - keep up your regular breathing exercises!\",\n type: \"positive\"\n },\n {\n message: \"Respiratory rate has been stable throughout the day.\",\n type: \"info\"\n }\n ];\n\n return (\n

Recent Insights

\n {insights.map((insight, index) => (\n \n \n

{insight.message}

\n ))}\n

\n \n );\n}","components/ScanControls.tsx":"import React, { useState } from \"react\";\nimport { PlayIcon, PauseIcon } from \"@heroicons/react/24/solid\";\n\ninterface ScanControlsProps {\n userProfile: {\n subscription: string;\n };\n onStartScan: () => void;\n}\n\nexport default function ScanControls({ userProfile, onStartScan }: ScanControlsProps) {\n const [isAutoScan, setIsAutoScan] = useState(true);\n const [nextScan, setNextScan] = useState(\"2:45 PM\");\n\n return (\n

Scan Controls

\n setIsAutoScan(!isAutoScan)}\n className={`p-3 rounded-lg ${isAutoScan ? \"bg-purple-100 text-purple-600\" : \"bg-gray-100 text-gray-600\"}`}\n >\n {isAutoScan ? (\n \n ) : (\n \n )}\n \n

\n {isAutoScan ? \"Auto-Scan Active\" : \"Auto-Scan Paused\"}\n

\n Next scan at {nextScan}\n

\n \n

\n );\n}","components/Onboarding.tsx":"import React, { useState, useEffect } from \"react\";\nimport { CameraIcon, BellIcon, HeartIcon, CheckCircleIcon } from \"@heroicons/react/24/outline\";\n\ninterface OnboardingProps {\n onComplete: (preferences: any) => void;\n}\n\nexport default function Onboarding({ onComplete }: OnboardingProps) {\n const [step, setStep] = useState(1);\n const [preferences, setPreferences] = useState({\n \"scanFrequency\": \"2\",\n \"metrics\": {\n \"heartRate\": true,\n \"respiratory\": true,\n \"stress\": true\n },\n \"notifications\": \"desktop\",\n \"goal\": \"stress\"\n });\n const [cameraReady, setCameraReady] = useState(false);\n const [stream, setStream] = useState(null);\n const videoRef = React.useRef(null);\n\n const handleCameraTest = async () => {\n try {\n const mediaStream = await navigator.mediaDevices.getUserMedia({ \"video\": true });\n setStream(mediaStream);\n if (videoRef.current) {\n videoRef.current.srcObject = mediaStream;\n }\n setCameraReady(true);\n } catch (error) {\n console.error(\"Camera access error:\", error);\n setCameraReady(false);\n }\n };\n\n useEffect(() => {\n return () => {\n if (stream) {\n stream.getTracks().forEach(track => track.stop());\n }\n };\n }, [stream]);\n\n const renderStep = () => {\n switch (step) {\n case 1:\n return (\n

\n \n

\n Welcome to Veo\n

\n Track your health effortlessly—no wearables required.\n

\n setStep(2)}\n className=\"w-full py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700\"\n >\n Get Started\n \n

\n );\n\n case 2:\n return (\n

Setup Preferences

\n \n Wellness Goal\n \n setPreferences({ ...preferences, \"goal\": e.target.value })}\n className=\"w-full p-2 border border-gray-300 rounded-lg\"\n >\n \n \n \n \n

\n\n

\n \n Scan Frequency\n \n setPreferences({ ...preferences, \"scanFrequency\": e.target.value })}\n className=\"w-full p-2 border border-gray-300 rounded-lg\"\n >\n \n \n \n \n

\n\n

\n \n Metrics to Track\n \n

\n {Object.entries(preferences.metrics).map(([key, value]) => (\n \n \n setPreferences({\n ...preferences,\n \"metrics\": {\n ...preferences.metrics,\n [key]: e.target.checked\n }\n })\n }\n className=\"mr-2\"\n />\n {key.charAt(0).toUpperCase() + key.slice(1)}\n \n ))}\n

\n setStep(3)}\n className=\"w-full py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700\"\n >\n Continue\n \n

\n );\n\n case 3:\n return (\n

Camera Setup

\n Veo needs camera access to measure your health metrics.\n

\n\n

\n {!cameraReady ? (\n

\n \n \n Test Camera\n \n

\n ) : (\n

\n \n

Camera is ready!

\n )}\n

\n\n setStep(4)}\n disabled={!cameraReady}\n className={`w-full py-3 rounded-lg ${cameraReady ? 'bg-purple-600 text-white hover:bg-purple-700' : 'bg-gray-300 text-gray-500 cursor-not-allowed'}`}\n >\n Continue\n \n

\n );\n\n case 4:\n return (\n

Notifications

\n How would you like to receive updates?\n

\n\n

\n {[\n { \"value\": \"desktop\", \"label\": \"Desktop Notifications\", \"icon\": BellIcon },\n { \"value\": \"email\", \"label\": \"Email Updates\", \"icon\": BellIcon },\n { \"value\": \"none\", \"label\": \"No Notifications\", \"icon\": BellIcon }\n ].map((option) => (\n setPreferences({ ...preferences, \"notifications\": option.value })}\n className={`w-full p-4 flex items-center border rounded-lg ${preferences.notifications === option.value ? 'border-purple-600 bg-purple-50' : 'border-gray-200'}`}\n >\n \n {option.label}\n \n ))}\n

\n\n onComplete(preferences)}\n className=\"w-full py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700\"\n >\n Complete Setup\n \n

\n );\n\n default:\n return null;\n }\n };\n\n return (\n

\n {[1, 2, 3, 4].map((stepNumber) => (\n \n ))}\n

\n Step {step} of 4\n

\n\n {renderStep()}\n

\n );\n}","components/Settings.tsx":"import React, { useState } from \"react\";\nimport { Switch } from \"@radix-ui/react-switch\";\nimport { SparklesIcon, ChartBarIcon, BoltIcon } from \"@heroicons/react/24/outline\";\n\ninterface SettingsProps {\n userProfile: {\n subscription: string;\n };\n onUpdateProfile: (profile: any) => void;\n onNavigate: (view: string) => void;\n}\n\nexport default function Settings({ userProfile, onUpdateProfile, onNavigate }: SettingsProps) {\n const [settings, setSettings] = useState({\n heartRate: true,\n respiratory: true,\n stress: true,\n scanFrequency: \"2\",\n notifications: \"desktop\",\n goal: \"stress\"\n });\n\n const handleSettingChange = (setting: string, value: any) => {\n setSettings(prev => ({ ...prev, [setting]: value }));\n };\n\n return (\n

Privacy Settings

\n All scans are processed locally on your device. No data is stored or uploaded.\n

\n \n

\n Heart Rate Monitoring\n handleSettingChange(\"heartRate\", checked)}\n />\n

\n Respiratory Rate Tracking\n handleSettingChange(\"respiratory\", checked)}\n />\n

\n Stress Monitoring\n handleSettingChange(\"stress\", checked)}\n />\n

\n\n

Subscription

\n \n

Current Plan: {userProfile.subscription === \"freemium\" ? \"Freemium\" : \"Veo Plus\"}

\n {userProfile.subscription === \"freemium\" && (\n

\n Upgrade to Veo Plus to unlock:\n

\n \n Full trend history and analytics\n
\n \n Unlimited scans and insights\n

\n \n

\n )}\n

\n\n

Scan Frequency

\n Experts recommend scanning every 2-4 hours for optimal wellness tracking and trend accuracy.\n

\n {userProfile.subscription === \"freemium\" && (\n

\n Upgrade to Veo Plus for unlimited scans and comprehensive wellness tracking!\n

\n )}\n handleSettingChange(\"scanFrequency\", e.target.value)}\n className=\"w-full p-2 border border-gray-300 rounded-lg\"\n >\n \n \n \n \n

\n\n

Notifications

\n handleSettingChange(\"notifications\", e.target.value)}\n className=\"w-full p-2 border border-gray-300 rounded-lg\"\n >\n \n \n \n \n

\n );\n}","components/HealthScan.tsx":"import React, { useState, useEffect, useRef } from \"react\";\nimport { CameraIcon, CheckCircleIcon, XCircleIcon, LightBulbIcon } from \"@heroicons/react/24/outline\";\n\ninterface HealthScanProps {\n userProfile: {\n subscription: string;\n };\n onScanComplete: (results: any) => void;\n}\n\nexport default function HealthScan({ userProfile, onScanComplete }: HealthScanProps) {\n const [scanState, setScanState] = useState({\n status: \"ready\",\n progress: 0,\n error: \"\",\n feedback: \"\"\n });\n const [stream, setStream] = useState(null);\n const videoRef = useRef(null);\n const canvasRef = useRef(null);\n\n useEffect(() => {\n return () => {\n if (stream) {\n stream.getTracks().forEach(track => track.stop());\n }\n };\n }, [stream]);\n\n const initializeCamera = async () => {\n try {\n const permissions = await navigator.permissions.query({ name: 'camera' as PermissionName });\n \n if (permissions.state === 'denied') {\n setScanState(prev => ({\n ...prev,\n status: \"error\",\n error: \"Camera permission denied. Please enable camera access in your browser settings.\"\n }));\n return false;\n }\n\n const mediaStream = await navigator.mediaDevices.getUserMedia({\n video: { \n facingMode: \"user\",\n width: { ideal: 1280 },\n height: { ideal: 720 }\n }\n });\n\n setStream(mediaStream);\n if (videoRef.current) {\n videoRef.current.srcObject = mediaStream;\n }\n return true;\n } catch (error) {\n console.error(\"Camera access error:\", error);\n setScanState(prev => ({\n ...prev,\n status: \"error\",\n error: \"Unable to access camera. Please ensure you have a working camera and have granted permission.\"\n }));\n return false;\n }\n };\n\n const startScan = async () => {\n setScanState(prev => ({ \n ...prev, \n status: \"initializing\", \n error: \"\",\n feedback: \"Initializing camera...\"\n }));\n \n const cameraReady = await initializeCamera();\n if (!cameraReady) return;\n\n setScanState(prev => ({ \n ...prev, \n status: \"scanning\", \n progress: 0,\n feedback: \"Detecting face position...\"\n }));\n \n let progress = 0;\n const interval = setInterval(() => {\n progress += 2;\n let feedback = \"\";\n \n if (progress < 30) {\n feedback = \"Detecting heart rate...\";\n } else if (progress < 60) {\n feedback = \"Analyzing respiratory patterns...\";\n } else if (progress < 90) {\n feedback = \"Calculating stress levels...\";\n } else {\n feedback = \"Finalizing analysis...\";\n }\n\n setScanState(prev => ({ ...prev, progress, feedback }));\n\n if (progress >= 100) {\n clearInterval(interval);\n setScanState(prev => ({ \n ...prev, \n feedback: \"Scan complete! Preparing your results...\"\n }));\n \n const results = {\n heartRate: 72 + Math.floor(Math.random() * 10),\n respiratoryRate: 16 + Math.floor(Math.random() * 4),\n stressLevel: [\"Low\", \"Moderate\", \"High\"][Math.floor(Math.random() * 3)],\n confidence: 95 + Math.floor(Math.random() * 5),\n timestamp: new Date().toLocaleString()\n };\n \n setTimeout(() => onScanComplete(results), 1000);\n }\n }, 100);\n };\n\n const resetScan = () => {\n if (stream) {\n stream.getTracks().forEach(track => track.stop());\n setStream(null);\n }\n setScanState({ status: \"ready\", progress: 0, error: \"\", feedback: \"\" });\n };\n\n return (\n

Health Scan

\n\n {scanState.status === \"ready\" && (\n

\n \n Scan Guidelines\n

• Ensure proper lighting for the most accurate scan
• Keep your face centered and still during the scan
• Maintain a neutral expression
• A quick scan helps track your heart rate and stress levels over time

\n )}\n\n

\n \n\n {scanState.status === \"ready\" && (\n

\n \n

Ready to scan

Position your face in the frame

\n )}\n\n {(scanState.status === \"initializing\" || scanState.status === \"scanning\") && (\n

{scanState.feedback}

\n {scanState.status === \"scanning\" && (\n

{scanState.progress}% complete

\n )}\n

\n\n

\n {scanState.status === \"ready\" && (\n \n Start Scan\n \n )}\n\n {scanState.status === \"scanning\" && (\n

\n \n

\n )}\n\n {scanState.status === \"error\" && (\n

\n \n {scanState.error}\n

\n \n Try Again\n \n

\n )}\n

\n );\n}","components/TrendGraphs.tsx":"import React, { useState } from 'react';\nimport { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';\n\nexport default function TrendGraphs() {\n const generateHourlyData = () => {\n const data = [];\n const now = new Date();\n \n for (let i = 23; i >= 0; i--) {\n const time = new Date(now.getTime() - i * 60 * 60 * 1000);\n data.push({\n time: time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),\n hrv: Math.floor(45 + Math.random() * 15),\n respiratoryRate: Math.floor(14 + Math.random() * 4)\n });\n }\n return data;\n };\n\n const [data] = useState(generateHourlyData());\n\n const CustomTooltip = ({ active, payload, label }: any) => {\n if (active && payload && payload.length) {\n return (\n

{label}

\n {payload.map((entry: any) => (\n

\n {entry.dataKey === 'hrv' ? 'HRV' : 'Respiratory Rate'}: \n {entry.value} {entry.dataKey === 'hrv' ? 'ms' : 'br/min'}\n

\n ))}\n

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

24-Hour Trends

\n \n

Heart Rate Variability

\n \n \n \n value.split(':')[0] + ':00'}\n />\n `${value}ms`}\n />\n } />\n \n \n \n

\n\n

Respiratory Rate

\n \n \n \n value.split(':')[0] + ':00'}\n />\n `${value}br/min`}\n />\n } />\n \n \n \n

\n );\n}","components/BottomNav.tsx":"import React from \"react\";\nimport { HomeIcon, CameraIcon, ChartBarIcon, Cog6ToothIcon, ChatBubbleLeftIcon } from \"@heroicons/react/24/outline\";\nimport { HomeIcon as HomeIconSolid, CameraIcon as CameraIconSolid, ChartBarIcon as ChartBarIconSolid, Cog6ToothIcon as Cog6ToothIconSolid, ChatBubbleLeftIcon as ChatBubbleLeftIconSolid } from \"@heroicons/react/24/solid\";\n\ninterface BottomNavProps {\n currentView: string;\n onNavigate: (view: string) => void;\n}\n\nexport default function BottomNav({ currentView, onNavigate }: BottomNavProps) {\n const navItems = [\n {\n \"id\": \"dashboard\",\n \"label\": \"Home\",\n \"icon\": HomeIcon,\n \"activeIcon\": HomeIconSolid\n },\n {\n \"id\": \"scan\",\n \"label\": \"Scan\",\n \"icon\": CameraIcon,\n \"activeIcon\": CameraIconSolid\n },\n {\n \"id\": \"insights\",\n \"label\": \"Insights\",\n \"icon\": ChartBarIcon,\n \"activeIcon\": ChartBarIconSolid\n },\n {\n \"id\": \"messages\",\n \"label\": \"Messages\",\n \"icon\": ChatBubbleLeftIcon,\n \"activeIcon\": ChatBubbleLeftIconSolid\n },\n {\n \"id\": \"settings\",\n \"label\": \"Settings\",\n \"icon\": Cog6ToothIcon,\n \"activeIcon\": Cog6ToothIconSolid\n }\n ];\n\n return (\n

\n {navItems.map((item) => {\n const isActive = currentView === item.id;\n const Icon = isActive ? item.activeIcon : item.icon;\n\n return (\n onNavigate(item.id)}\n className={`flex flex-col items-center justify-center w-full h-full space-y-1\n ${isActive ? 'text-purple-600' : 'text-gray-500 hover:text-gray-700'}`}\n >\n \n {item.label}\n \n );\n })}\n

\n );\n}","components/ScanResults.tsx":"import React, { useState } from \"react\";\nimport { ArrowUpIcon, ArrowDownIcon, HeartIcon, LightBulbIcon, BoltIcon, BeakerIcon, ClockIcon, CheckIcon } from \"@heroicons/react/24/outline\";\n\ninterface ScanResultsProps {\n results: {\n heartRate: number;\n respiratoryRate: number;\n stressLevel: string;\n confidence: number;\n timestamp: string;\n };\n}\n\nexport default function ScanResults({ results }: ScanResultsProps) {\n const [showReminderModal, setShowReminderModal] = useState(false);\n const [reminderSet, setReminderSet] = useState(false);\n const [selectedTime, setSelectedTime] = useState(() => {\n const defaultTime = new Date();\n defaultTime.setHours(defaultTime.getHours() + 2);\n return defaultTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n });\n\n // Define normal ranges and thresholds\n const ranges = {\n heartRate: { min: 60, max: 100, target: 75 },\n respiratoryRate: { min: 12, max: 20, target: 16 },\n stressLevel: { optimal: \"Low\", acceptable: \"Moderate\" }\n };\n\n // Calculate personalized insights\n const getPersonalizedInsights = () => {\n const insights = [];\n\n // Heart Rate Analysis\n const hrDiff = results.heartRate - ranges.heartRate.target;\n if (Math.abs(hrDiff) > 10) {\n insights.push({\n type: \"attention\",\n icon: HeartIcon,\n color: \"purple\",\n title: hrDiff > 0 ? \"Heart Rate Elevated\" : \"Heart Rate Lower Than Usual\",\n message: hrDiff > 0\n ? \"Consider taking a hydration break and a few deep breaths to help regulate your heart rate.\"\n : \"Your lower heart rate suggests good relaxation. Keep maintaining these calm moments.\",\n action: hrDiff > 0 ? \"Try breathing exercise\" : \"View relaxation trends\"\n });\n }\n\n // Respiratory Rate Insights\n const rrDiff = results.respiratoryRate - ranges.respiratoryRate.target;\n if (Math.abs(rrDiff) > 2) {\n insights.push({\n type: \"info\",\n icon: LightBulbIcon,\n color: \"blue\",\n title: rrDiff > 0 ? \"Breathing Rate Increased\" : \"Steady Breathing Pattern\",\n message: rrDiff > 0\n ? \"Your breathing is slightly faster than usual. Try our guided breathing exercise to find your rhythm.\"\n : \"Your calm breathing pattern indicates good relaxation—perfect for maintaining focus.\",\n action: \"View breathing techniques\"\n });\n }\n\n // Stress Level Recommendations\n const stressInsight = {\n type: results.stressLevel === \"High\" ? \"warning\" : \"success\",\n icon: BoltIcon,\n color: results.stressLevel === \"High\" ? \"red\" : \"green\",\n title: `${results.stressLevel} Stress Detected`,\n message: results.stressLevel === \"High\"\n ? \"Your stress levels are elevated. Let's take a moment to reset with a quick mindfulness exercise.\"\n : results.stressLevel === \"Moderate\"\n ? \"Your stress is manageable, but let's maintain balance with regular breaks.\"\n : \"Great job managing stress! Your body shows signs of good recovery.\",\n action: results.stressLevel === \"High\" ? \"Start stress relief\" : \"View stress patterns\"\n };\n insights.push(stressInsight);\n\n // Hydration/Wellness Tip\n insights.push({\n type: \"tip\",\n icon: BeakerIcon,\n color: \"teal\",\n title: \"Wellness Tip\",\n message: \"Stay hydrated! Regular water intake helps maintain heart rate stability and stress resilience.\",\n action: \"Set hydration reminder\"\n });\n\n return insights;\n };\n\n const insights = getPersonalizedInsights();\n\n const handleTimeChange = (e: React.ChangeEvent) => {\n setSelectedTime(e.target.value);\n };\n\n const handleSetReminder = () => {\n setReminderSet(true);\n setShowReminderModal(false);\n\n if (\"Notification\" in window) {\n Notification.requestPermission().then(permission => {\n if (permission === \"granted\") {\n const reminderTime = selectedTime;\n const [hours, minutes] = reminderTime.split(':');\n const scheduledTime = new Date();\n scheduledTime.setHours(parseInt(hours));\n scheduledTime.setMinutes(parseInt(minutes));\n\n if (scheduledTime < new Date()) {\n scheduledTime.setDate(scheduledTime.getDate() + 1);\n }\n\n const timeUntilReminder = scheduledTime.getTime() - new Date().getTime();\n\n setTimeout(() => {\n new Notification(\"Time for Your Veo Scan\", {\n body: \"It's time for your next wellness scan!\"\n });\n }, timeUntilReminder);\n\n new Notification(\"Scan Reminder Set\", {\n body: `We'll remind you for your next scan at ${reminderTime}`\n });\n }\n });\n }\n };\n\n const ReminderModal = () => (\n

Set Scan Reminder

\n \n Remind me at\n \n \n

\n We'll send you a notification when it's time for your next scan\n

\n \n Set Reminder\n \n setShowReminderModal(false)}\n className=\"flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200\"\n >\n Cancel\n \n

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

Scan Complete

\n {results.timestamp}\n

\n\n {/* Key Metrics */}\n

Heart Rate

\n {results.heartRate} BPM\n

\n {Math.abs(results.heartRate - ranges.heartRate.target) > 5 && (\n

ranges.heartRate.target ? 'text-red-500' : 'text-green-500'}`}>\n {results.heartRate > ranges.heartRate.target ? (\n \n ) : (\n \n )}\n

\n )}\n

\n\n

Respiratory Rate

\n {results.respiratoryRate} br/min\n

\n\n

Stress Level

{results.stressLevel}

\n\n

Scan Accuracy

{results.confidence}%

\n\n {/* Personalized Insights */}\n

Your Wellness Insights

\n {insights.map((insight, index) => (\n

\n \n

{insight.title}

{insight.message}

\n \n

\n ))}\n

\n\n {/* Next Steps */}\n

\n \n Next scan available in 2 hours\n

\n {reminderSet ? (\n

\n \n Reminder set for {selectedTime}\n

\n ) : (\n \n )}\n

\n\n {showReminderModal && }\n

\n );\n}","components/Insights.tsx":"import React, { useState } from \"react\";\nimport { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from \"recharts\";\nimport { CalendarIcon, ClockIcon, ArrowTrendingUpIcon, ArrowTrendingDownIcon, SunIcon, MoonIcon, BoltIcon, BeakerIcon } from \"@heroicons/react/24/outline\";\n\nexport default function Insights() {\n const [mealInput, setMealInput] = useState(\"\");\n const [afternoonMood, setAfternoonMood] = useState(\"\");\n const [showMealFeedback, setShowMealFeedback] = useState(false);\n const [showMoodFeedback, setShowMoodFeedback] = useState(false);\n\n const generateTrendData = () => {\n const data = [];\n const now = new Date();\n for (let i = 6; i >= 0; i--) {\n const date = new Date(now);\n date.setDate(date.getDate() - i);\n data.push({\n date: date.toLocaleDateString('en-US', { weekday: 'short' }),\n hrvScore: 65 + Math.random() * 20,\n stressLevel: 30 + Math.random() * 40,\n energyLevel: 50 + Math.random() * 30\n });\n }\n return data;\n };\n\n const [trendData] = useState(generateTrendData());\n\n const getMealFeedback = (meal: string) => {\n const lowercaseMeal = meal.toLowerCase();\n if (lowercaseMeal.includes(\"coffee\") && !lowercaseMeal.includes(\"food\")) {\n return \"I notice you tend to have afternoon energy dips when having just coffee. Consider adding protein to your breakfast.\";\n }\n if (lowercaseMeal.includes(\"oatmeal\") || lowercaseMeal.includes(\"yogurt\")) {\n return \"Great choice! Your focus tends to be best after protein-rich breakfasts like this.\";\n }\n if (lowercaseMeal.includes(\"skip\") || lowercaseMeal.includes(\"nothing\")) {\n return \"Your stress levels tend to be higher on days when you skip breakfast. Would you like some quick breakfast ideas?\";\n }\n return \"Thanks for tracking your meal! This helps us understand your energy patterns better.\";\n };\n\n const getMoodBasedSuggestion = (mood: string) => {\n switch (mood) {\n case \"energized\":\n return \"Great! This is your optimal time for focused work. Want to block your calendar for deep work?\";\n case \"tired\":\n return \"Your HRV shows better recovery after short afternoon walks. Would you like to try a 10-minute walk?\";\n case \"stressed\":\n return \"I notice this pattern before your 3 PM meetings. Let's try a quick breathing exercise.\";\n default:\n return \"Thanks for sharing! This helps us personalize your wellness insights.\";\n }\n };\n\n const handleMealSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n setShowMealFeedback(true);\n };\n\n const handleMoodSubmit = (mood: string) => {\n setAfternoonMood(mood);\n setShowMoodFeedback(true);\n };\n\n return (\n

Weekly Wellness Trends

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

\n\n

Daily Wellness Check

\n \n

Morning Reflection

\n \n {showMealFeedback && mealInput && (\n

\n \n

{getMealFeedback(mealInput)}

\n )}\n

\n\n

Afternoon Check-in

How are you feeling this afternoon?

\n {[\"energized\", \"tired\", \"stressed\"].map((mood) => (\n handleMoodSubmit(mood)}\n className={`p-3 rounded-lg border transition-colors ${\n afternoonMood === mood\n ? 'border-purple-600 bg-purple-50 text-purple-700'\n : 'border-gray-200 hover:border-purple-600 hover:bg-purple-50'\n }`}\n >\n {mood}\n \n ))}\n

\n {showMoodFeedback && afternoonMood && (\n

\n \n

{getMoodBasedSuggestion(afternoonMood)}

\n )}\n

\n\n

Your Wellness Patterns

Sleep & Recovery

\n Your HRV scores are highest after nights with 7+ hours of sleep. Consider maintaining your recent 10:30 PM bedtime routine.\n

Focus & Productivity

\n Your peak focus hours are between 9-11 AM. Try scheduling important tasks during this window.\n

Stress Management

\n Regular breathing exercises have reduced your afternoon stress levels by 15% this week.\n

\n );\n}","components/SubscriptionModal.tsx":"import React from \"react\";\nimport { XMarkIcon, CheckIcon } from \"@heroicons/react/24/outline\";\n\ninterface SubscriptionModalProps {\n isOpen: boolean;\n onClose: () => void;\n onSubscribe: (plan: string) => void;\n currentPlan: string;\n}\n\nexport default function SubscriptionModal({ isOpen, onClose, onSubscribe, currentPlan }: SubscriptionModalProps) {\n if (!isOpen) return null;\n\n const plans = [\n {\n name: \"Freemium\",\n price: \"$0\",\n period: \"forever\",\n features: [\n \"Basic heart rate & HRV tracking\",\n \"One scan per day\",\n \"Simple stress level analysis\",\n \"Essential health tips\",\n \"Basic dashboard\"\n ],\n limitations: [\n \"Limited historical data\",\n \"Basic insights only\",\n \"No advanced analytics\"\n ]\n },\n {\n name: \"Veo Plus\",\n price: \"$5\",\n period: \"per month\",\n features: [\n \"Unlimited scans\",\n \"Advanced HRV trend analysis\",\n \"Personalized stress reduction plans\",\n \"AI-driven health insights\",\n \"Progress tracking\",\n \"Deep data analytics\",\n \"Historical comparisons\",\n \"Priority support\"\n ],\n highlight: true\n }\n ];\n\n return (\n

Choose Your Plan

\n \n

\n\n

\n {plans.map((plan) => (\n

{plan.name}

{plan.price}

{plan.period}

\n\n

\n {plan.features.map((feature) => (\n

\n \n {feature}\n

\n ))}\n\n {plan.limitations && (\n

\n {plan.limitations.map((limitation) => (\n

\n \n {limitation}\n

\n ))}\n

\n )}\n

\n\n

\n {currentPlan !== plan.name.toLowerCase() ? (\n onSubscribe(plan.name.toLowerCase())}\n className={`w-full py-2 rounded-lg ${plan.highlight ? 'bg-purple-600 text-white hover:bg-purple-700' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}\n >\n {plan.name === \"Freemium\" ? \"Switch to Free\" : \"Upgrade Now\"}\n \n ) : (\n

Current Plan

\n )}\n

\n ))}\n

\n\n

\n Prices shown are in USD. Annual subscriptions available with 10% discount.\n

\n );\n}","components/Notifications.tsx":"import React, { useState } from \"react\";\nimport { HeartIcon, FireIcon, SparklesIcon, BoltIcon, ClockIcon, BrainIcon, CheckCircleIcon, ArrowTrendingUpIcon, ArrowTrendingDownIcon, StarIcon } from \"@heroicons/react/24/outline\";\n\ninterface Toast {\n message: string;\n type: 'success' | 'info' | 'warning';\n detail?: string;\n}\n\nfunction ToastComponent({ show, toast }: { show: boolean; toast: Toast | null }) {\n if (!show || !toast) return null;\n\n const getToastStyles = (type: string) => {\n switch (type) {\n case 'success':\n return 'bg-green-50 text-green-800';\n case 'warning':\n return 'bg-yellow-50 text-yellow-800';\n default:\n return 'bg-blue-50 text-blue-800';\n }\n };\n\n const getToastIcon = (type: string) => {\n switch (type) {\n case 'success':\n return ;\n case 'warning':\n return ;\n default:\n return ;\n }\n };\n\n return (\n

\n {getToastIcon(toast.type)}\n

{toast.message}

\n {toast.detail && (\n

{toast.detail}

\n )}\n

\n );\n}\n\nexport default function Notifications() {\n const userName = \"Alex\";\n const [showToast, setShowToast] = useState(false);\n const [toast, setToast] = useState(null);\n \n const [hasCheckedIn, setHasCheckedIn] = useState(() => {\n try {\n const savedDate = localStorage.getItem('checkInDate');\n const today = new Date().toISOString().split('T')[0];\n return savedDate === today;\n } catch (e) {\n return false;\n }\n });\n\n const handleCheckIn = (mood: string) => {\n const today = new Date().toISOString().split('T')[0];\n localStorage.setItem('checkInDate', today);\n localStorage.setItem('lastMood', mood);\n setHasCheckedIn(true);\n \n const feedback = getMoodFeedback(mood);\n setToast(feedback);\n setShowToast(true);\n\n setTimeout(() => {\n setShowToast(false);\n }, 5000);\n };\n\n const achievements = [\n {\n id: \"1\",\n title: \"Wellness Warrior\",\n description: `${userName}, you've kept your HRV steady for 5 days—this is a sign of great stress management!`,\n icon: FireIcon,\n color: \"text-orange-500 bg-orange-100\",\n isNew: true\n },\n {\n id: \"2\",\n title: \"Mindfulness Master\",\n description: `Great work ${userName}! Your consistent breathing exercises are showing results in your stress patterns.`,\n icon: SparklesIcon,\n color: \"text-purple-500 bg-purple-100\",\n isNew: true\n }\n ];\n\n const wellnessUpdates = [\n {\n id: \"1\",\n type: \"success\",\n message: `${userName}, your stress resilience is improving! Your last week's readings show better recovery patterns.`,\n time: \"2 hours ago\",\n icon: HeartIcon,\n color: \"text-green-500 bg-green-100\"\n },\n {\n id: \"2\",\n type: \"suggestion\",\n message: `Time for your afternoon scan, ${userName}? It helps us track your daily patterns more accurately.`,\n time: \"Just now\",\n icon: ClockIcon,\n color: \"text-blue-500 bg-blue-100\"\n },\n {\n id: \"3\",\n type: \"milestone\",\n message: `You're building great habits, ${userName}! Your consistent check-ins are helping build a clearer picture of your wellness.`,\n time: \"4 hours ago\",\n icon: StarIcon,\n color: \"text-purple-500 bg-purple-100\"\n }\n ];\n\n const personalizedMessages = [\n {\n id: \"1\",\n message: `${userName}, I notice your stress levels tend to rise around this time. How about a 2-minute breathing break?`,\n time: \"Just now\",\n icon: BoltIcon,\n bgColor: \"bg-purple-100\",\n textColor: \"text-purple-600\"\n },\n {\n id: \"2\",\n message: `Your HRV is showing positive trends this week, ${userName}! The mindfulness exercises seem to be working well for you.`,\n time: \"1 hour ago\",\n icon: HeartIcon,\n bgColor: \"bg-green-100\",\n textColor: \"text-green-600\"\n },\n {\n id: \"3\",\n message: `Remember to take short breaks between tasks, ${userName}. It helps maintain your stress balance.`,\n time: \"2 hours ago\",\n icon: BrainIcon,\n bgColor: \"bg-blue-100\",\n textColor: \"text-blue-600\"\n }\n ];\n\n const getMoodFeedback = (mood: string) => {\n const feedbacks = {\n '😊': {\n message: `Great to hear that, ${userName}!`,\n type: 'success' as const,\n detail: \"Your data shows consistency—keep up the good habits!\"\n },\n '😐': {\n message: `Thanks for checking in, ${userName}`,\n type: 'info' as const,\n detail: \"Your stress has been trending up lately. Would you like to try a quick breathing exercise?\"\n },\n '😔': {\n message: `Thank you for being honest, ${userName}`,\n type: 'warning' as const,\n detail: \"I notice your stress levels tend to be higher during this time. Let's try a 2-minute mindfulness exercise.\"\n }\n };\n\n return feedbacks[mood] || {\n message: `Thanks for checking in, ${userName}!`,\n type: 'success' as const\n };\n };\n\n return (\n

\n {/* Achievements Section */}\n

Your Achievements

\n {achievements.map((achievement) => (\n

\n \n

{achievement.title}

\n {achievement.isNew && (\n \n New\n \n )}\n

{achievement.description}

\n ))}\n

\n\n {/* Wellness Updates */}\n

Wellness Updates

\n {wellnessUpdates.map((update) => (\n

\n \n

{update.message}

{update.time}

\n ))}\n

\n\n {/* Personal Insights */}\n

Personal Insights

\n {personalizedMessages.map((message) => (\n

\n \n

{message.message}

{message.time}

\n ))}\n

\n\n {/* Daily Check-in */}\n

Daily Check-in

\n {hasCheckedIn \n ? `Thanks for checking in today, ${userName}!` \n : `How are you feeling today, ${userName}?`}\n

\n {!hasCheckedIn && (\n

\n {['😊', '😐', '😔'].map((emoji) => (\n handleCheckIn(emoji)}\n className=\"text-2xl md:text-3xl p-3 md:p-4 rounded-full hover:bg-gray-100 transition-colors\"\n >\n {emoji}\n \n ))}\n

\n Your response helps us provide better insights\n

\n )}\n {hasCheckedIn && (\n

Come back tomorrow for your next check-in!

Check your Insights tab for mood patterns and trends

\n )}\n

\n\n \n

\n );\n}","components/SubscriptionScreen.tsx":"import React from \"react\";\nimport { CheckIcon, XMarkIcon, ArrowLeftIcon } from \"@heroicons/react/24/outline\";\n\ninterface SubscriptionScreenProps {\n currentPlan: string;\n onSubscribe: (plan: string) => void;\n onBack: () => void;\n}\n\nexport default function SubscriptionScreen({ currentPlan, onSubscribe, onBack }: SubscriptionScreenProps) {\n const plans = [\n {\n name: \"Freemium\",\n price: \"$0\",\n period: \"forever\",\n features: [\n \"Basic heart rate & HRV tracking\",\n \"One scan per day\",\n \"Simple stress level analysis\",\n \"Essential health tips\",\n \"Basic dashboard\"\n ],\n limitations: [\n \"Limited historical data\",\n \"Basic insights only\",\n \"No advanced analytics\"\n ]\n },\n {\n name: \"Veo Plus\",\n price: \"$5\",\n period: \"per month\",\n features: [\n \"Unlimited scans\",\n \"Advanced HRV trend analysis\",\n \"Personalized stress reduction plans\",\n \"AI-driven health insights\",\n \"Progress tracking\",\n \"Deep data analytics\",\n \"Historical comparisons\",\n \"Priority support\"\n ],\n highlight: true\n }\n ];\n\n return (\n

\n \n

Choose Your Plan

\n\n

\n {plans.map((plan) => (\n

{plan.name}

{plan.price}

{plan.period}

\n\n

\n {plan.features.map((feature) => (\n

\n \n {feature}\n

\n ))}\n\n {plan.limitations && (\n

\n {plan.limitations.map((limitation) => (\n

\n \n {limitation}\n

\n ))}\n

\n )}\n

\n\n

\n {currentPlan !== plan.name.toLowerCase() ? (\n onSubscribe(plan.name.toLowerCase())}\n className={`w-full py-3 rounded-lg font-medium\n ${plan.highlight ? 'bg-purple-600 text-white hover:bg-purple-700' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}\n >\n {plan.name === \"Freemium\" ? \"Switch to Free\" : \"Upgrade Now\"}\n \n ) : (\n

Current Plan

\n )}\n

\n ))}\n

\n\n

Prices shown are in USD

Annual subscriptions available with 10% discount

\n );\n}","styles/globals.css":"@keyframes slideUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.animate-slide-up {\n animation: slideUp 0.3s ease-out;\n}","components/PersonalAssistant.tsx":"import React, { useState } from \"react\";\nimport { SparklesIcon, LightBulbIcon, ClockIcon, HeartIcon, BoltIcon, CalendarIcon, ChartBarIcon, SunIcon, MoonIcon, BeakerIcon } from \"@heroicons/react/24/outline\";\n\ninterface PersonalAssistantProps {\n userProfile: {\n name: string;\n wellnessScore: number;\n };\n}\n\nexport default function PersonalAssistant({ userProfile }: PersonalAssistantProps) {\n const [showAllSuggestions, setShowAllSuggestions] = useState(true);\n const [showBreathingExercise, setShowBreathingExercise] = useState(false);\n const [showStretchingExercise, setShowStretchingExercise] = useState(false);\n\n const userPatterns = {\n activityPatterns: {\n lastBreakTime: Date.now() - 4000000,\n suggestedBreaks: [11, 15, 17],\n missedBreakfastDays: \"3\",\n preferredMealTimes: {\n breakfast: \"skipped\",\n lunch: \"12:30\",\n dinner: \"19:00\"\n }\n },\n calendar: {\n nextMeeting: new Date(Date.now() + 1500000).toISOString(),\n meetingStressPattern: \"pre-meeting-anxiety\"\n },\n stressLevel: \"increasing\",\n energyLevel: \"decreasing\",\n sleepPatterns: {\n averageBedtime: \"23:30\",\n consistency: \"irregular\",\n qualityTrend: \"declining\",\n lastWeekAverage: \"6.5\"\n },\n hrvPatterns: {\n meetingImpact: \"negative\",\n recoveryTime: \"slow\",\n bestTimeOfDay: \"morning\"\n },\n streaks: {\n breathingExercises: \"4\",\n consistentSleep: \"0\",\n regularMeals: \"2\"\n }\n };\n\n const getCurrentTimeContext = () => {\n const hour = new Date().getHours();\n if (hour < 12) return \"morning\";\n if (hour < 17) return \"afternoon\";\n return \"evening\";\n };\n\n const getAdaptiveInsights = () => {\n const timeContext = getCurrentTimeContext();\n const currentHour = new Date().getHours();\n const suggestions = [];\n\n const hasUpcomingMeeting = userPatterns.calendar?.nextMeeting && \n (new Date(userPatterns.calendar.nextMeeting).getTime() - Date.now() < 1800000);\n\n const sittingDuration = Date.now() - userPatterns.activityPatterns.lastBreakTime;\n if (sittingDuration > 3600000) {\n suggestions.push({\n id: \"movement-prompt\",\n type: \"health\",\n icon: SparklesIcon,\n title: \"Time to Move!\",\n message: `${userProfile.name}, you've been sitting for ${Math.floor(sittingDuration / 3600000)} hour(s). A quick stretch could help maintain your improved stress levels.`,\n actions: [\n { \n label: \"Start 5-min Stretch\", \n onClick: () => setShowStretchingExercise(true),\n primary: true \n },\n { label: \"Remind Later\", secondary: true }\n ],\n color: \"green\"\n });\n }\n\n if (hasUpcomingMeeting && userPatterns.stressLevel === \"increasing\") {\n suggestions.push({\n id: \"pre-meeting-calm\",\n type: \"wellness\",\n icon: BoltIcon,\n title: \"Pre-meeting Wellness Check\",\n message: \"Your stress levels tend to rise before meetings. Let's take a moment to reset with a quick breathing exercise.\",\n actions: [\n { \n label: \"2-min Breathing Exercise\", \n onClick: () => setShowBreathingExercise(true),\n primary: true \n },\n { label: \"View Stress Trends\", secondary: true }\n ],\n color: \"purple\"\n });\n }\n\n if (timeContext === \"morning\" && currentHour >= 6 && currentHour <= 10) {\n suggestions.push({\n id: \"morning-nutrition\",\n type: \"nutrition\",\n icon: SunIcon,\n title: `Good morning, ${userProfile.name}!`,\n message: \"Based on your patterns, a protein-rich breakfast helps maintain steady energy levels until lunch. Would you like to see your personalized breakfast suggestions?\",\n actions: [\n { label: \"View Suggestions\", primary: true },\n { label: \"Track Breakfast\", secondary: true }\n ],\n color: \"amber\"\n });\n }\n\n if (timeContext === \"afternoon\" && userPatterns.energyLevel === \"decreasing\") {\n suggestions.push({\n id: \"afternoon-boost\",\n type: \"energy\",\n icon: LightBulbIcon,\n title: \"Energy Boost Needed?\",\n message: \"I notice your focus typically dips around this time. A short walk or hydration break could help maintain your morning's productivity.\",\n actions: [\n { label: \"Start Quick Break\", primary: true },\n { label: \"View Energy Tips\", secondary: true }\n ],\n color: \"blue\"\n });\n }\n\n if (timeContext === \"evening\" && currentHour >= 17) {\n suggestions.push({\n id: \"evening-winddown\",\n type: \"relaxation\",\n icon: MoonIcon,\n title: \"Evening Wind-down\",\n message: \"Your recovery scores are best when you start winding down after 6 PM. Ready to start your relaxation routine?\",\n actions: [\n { label: \"Start Wind-down\", primary: true },\n { label: \"View Recovery Stats\", secondary: true }\n ],\n color: \"indigo\"\n });\n }\n\n if (userPatterns.streaks?.breathingExercises > 3) {\n suggestions.push({\n id: \"habit-streak\",\n type: \"achievement\",\n icon: HeartIcon,\n title: \"Great Habit Building!\",\n message: `You've done breathing exercises for ${userPatterns.streaks.breathingExercises} days in a row! Your HRV scores show improvement.`,\n actions: [\n { label: \"View Progress\", primary: true },\n { label: \"Share Achievement\", secondary: true }\n ],\n color: \"teal\"\n });\n }\n\n suggestions.sort((a, b) => {\n if (a.type === \"stress\" && hasUpcomingMeeting) return -1;\n if (b.type === \"stress\" && hasUpcomingMeeting) return 1;\n \n if (timeContext === \"morning\" && a.type === \"nutrition\") return -1;\n if (timeContext === \"evening\" && a.type === \"recovery\") return -1;\n \n return 0;\n });\n\n return suggestions;\n };\n\n const suggestions = getAdaptiveInsights();\n\n return (\n

Your Wellness Assistant

Personalized insights based on your patterns

\n {suggestions.length > 4 && (\n setShowAllSuggestions(!showAllSuggestions)}\n className=\"text-sm text-purple-600 hover:text-purple-700\"\n >\n {showAllSuggestions ? \"Show less\" : \"Show all insights\"}\n \n )}\n

\n\n

\n {suggestions.slice(0, showAllSuggestions ? suggestions.length : 4).map((suggestion) => (\n \n

\n \n

{suggestion.title}

{suggestion.message}

\n {suggestion.actions.map((action, index) => (\n \n {action.label} {!action.secondary && '→'}\n \n ))}\n

\n ))}\n

\n\n {showBreathingExercise && (\n

4-7-8 Breathing Exercise

Follow the animation and breathe along

\n Inhale: 4s\n Hold: 7s\n Exhale: 8s\n

\n )}\n\n {showStretchingExercise && (\n

Quick Stretch Break

Simple stretches you can do at your desk

Neck Rolls

Gently roll your head in circles, 5 times each direction

Shoulder Stretches

Roll shoulders backward and forward, 10 times each

Wrist Flexes

Stretch wrists up and down, 10 times each

\n )}\n\n

\n Updated every 30 minutes based on your wellness patterns\n

\n );\n}","getAdaptiveInsights":"function getAdaptiveInsights() {\n const suggestions = [];\n\n // Hydration Check\n const lastHydrationTime = Date.now() - 7200000; // Mock 2 hours since last hydration\n if (lastHydrationTime > 3600000) { // More than 1 hour\n suggestions.push({\n id: 'hydration-reminder',\n type: 'wellness',\n icon: BeakerIcon,\n title: 'Hydration Check',\n message: `${userProfile.name}, it's been a while since your last water break. Even mild dehydration can affect focus and energy. Keep a water bottle nearby and aim for a glass every hour.`,\n actions: [\n { \n label: 'Track Water Intake', \n primary: true \n },\n { label: 'Set Reminder', secondary: true }\n ],\n color: 'blue'\n });\n }\n\n // Focus Break Reminder\n const intenseFocusTime = Date.now() - 5400000; // Mock 90 minutes of focus time\n if (intenseFocusTime > 5400000) { // More than 90 minutes\n suggestions.push({\n id: 'focus-break',\n type: 'productivity',\n icon: ClockIcon,\n title: 'Focus Break Needed',\n message: 'You\\'ve been working intensely for the last 90 minutes. Consider a 5-minute break to reset your focus and maintain your productivity momentum!',\n actions: [\n { \n label: 'Start Quick Break', \n primary: true \n },\n { label: 'View Focus Stats', secondary: true }\n ],\n color: 'indigo'\n });\n }\n\n // Energy Level Check\n if (userPatterns.energyLevel === 'decreasing' && currentHour >= 14) {\n suggestions.push({\n id: 'energy-boost',\n type: 'energy',\n icon: BoltIcon,\n title: 'Afternoon Energy Check',\n message: `${userProfile.name}, I notice a slight dip in your energy levels. A short walk and hydration break could help maintain your morning's momentum.`,\n actions: [\n { \n label: 'Start Energy Boost', \n onClick: () => setShowEnergyBoostExercise(true),\n primary: true \n },\n { label: 'View Energy Tips', secondary: true }\n ],\n color: 'amber'\n });\n }\n\n // Peak Focus Window Alert\n const isInPeakFocusHours = currentHour >= 9 && currentHour <= 11;\n if (isInPeakFocusHours && !hasUpcomingMeeting) {\n suggestions.push({\n id: 'peak-focus',\n type: 'productivity',\n icon: SparklesIcon,\n title: 'Peak Focus Window',\n message: `${userProfile.name}, you're in your peak focus hours (9-11 AM). Your HRV data shows this is your most productive time. Want to block distractions?`,\n actions: [\n { label: 'Enable Focus Mode', primary: true },\n { label: 'View Focus Pattern', secondary: true }\n ],\n color: 'purple'\n });\n }\n\n return suggestions;\n}","imports":"import { HomeIcon, CameraIcon, ChartBarIcon, Cog6ToothIcon, BellIcon, ChatBubbleLeftIcon } from \"@heroicons/react/24/outline\";\nimport { HomeIcon as HomeIconSolid, CameraIcon as CameraIconSolid, ChartBarIcon as ChartBarIconSolid, Cog6ToothIcon as Cog6ToothIconSolid, BellIcon as BellIconSolid, ChatBubbleLeftIcon as ChatBubbleLeftIconSolid } from \"@heroicons/react/24/solid\";","stateVariables":"const [mealInput, setMealInput] = useState(\"\");\nconst [afternoonMood, setAfternoonMood] = useState(\"\");\nconst [showMealFeedback, setShowMealFeedback] = useState(false);\nconst [showMoodFeedback, setShowMoodFeedback] = useState(false);","insightsComponent":"return ;","stateDeclarations":"const [mealInput, setMealInput] = useState(\"\");\nconst [afternoonMood, setAfternoonMood] = useState(\"\");\nconst [showMealFeedback, setShowMealFeedback] = useState(false);\nconst [showMoodFeedback, setShowMoodFeedback] = useState(false);","insightsCase":"case \"insights\": return ;","userPatterns":{"focusMetrics":{"lastBreak":"Date.now() - 5400000","lastHydration":"Date.now() - 7200000","peakHours":[9,10,11],"breakInterval":"5400000","hydrationInterval":"3600000"}},"code":"// components/Messages.tsx\nimport React, { useState } from \"react\";\nimport { HeartIcon, FireIcon, SparklesIcon, BoltIcon, ClockIcon, BrainIcon, CheckCircleIcon, StarIcon } from \"@heroicons/react/24/outline\";\n\nexport default function Messages() {\n const userName = \"Alex\";\n const [selectedMood, setSelectedMood] = useState(\"\");\n\n const achievements = [\n {\n \"id\": \"1\",\n \"title\": \"Wellness Warrior\",\n \"description\": `${userName}, you've kept your HRV steady for 5 days—this is a sign of great stress management!`,\n \"icon\": FireIcon,\n \"color\": \"text-orange-500 bg-orange-100\",\n \"isNew\": true\n },\n {\n \"id\": \"2\",\n \"title\": \"Mindfulness Master\",\n \"description\": `Great work ${userName}! Your consistent breathing exercises are showing results in your stress patterns.`,\n \"icon\": SparklesIcon,\n \"color\": \"text-purple-500 bg-purple-100\",\n \"isNew\": true\n }\n ];\n\n const wellnessUpdates = [\n {\n \"id\": \"1\",\n \"type\": \"success\",\n \"message\": `${userName}, your stress resilience is improving! Your last week's readings show better recovery patterns.`,\n \"time\": \"2 hours ago\",\n \"icon\": HeartIcon,\n \"color\": \"text-green-500 bg-green-100\"\n },\n {\n \"id\": \"2\",\n \"type\": \"suggestion\",\n \"message\": `Time for your afternoon scan, ${userName}? It helps us track your daily patterns more accurately.`,\n \"time\": \"Just now\",\n \"icon\": ClockIcon,\n \"color\": \"text-blue-500 bg-blue-100\"\n },\n {\n \"id\": \"3\",\n \"type\": \"milestone\",\n \"message\": `You're building great habits, ${userName}! Your consistent check-ins are helping build a clearer picture of your wellness.`,\n \"time\": \"4 hours ago\",\n \"icon\": StarIcon,\n \"color\": \"text-purple-500 bg-purple-100\"\n }\n ];\n\n const personalizedMessages = [\n {\n \"id\": \"1\",\n \"message\": `${userName}, I notice your stress levels tend to rise around this time. How about a 2-minute breathing break?`,\n \"time\": \"Just now\",\n \"icon\": BoltIcon,\n \"bgColor\": \"bg-purple-100\",\n \"textColor\": \"text-purple-600\"\n },\n {\n \"id\": \"2\",\n \"message\": `Your HRV is showing positive trends this week, ${userName}! The mindfulness exercises seem to be working well for you.`,\n \"time\": \"1 hour ago\",\n \"icon\": HeartIcon,\n \"bgColor\": \"bg-green-100\",\n \"textColor\": \"text-green-600\"\n },\n {\n \"id\": \"3\",\n \"message\": `Remember to take short breaks between tasks, ${userName}. It helps maintain your stress balance.`,\n \"time\": \"2 hours ago\",\n \"icon\": BrainIcon,\n \"bgColor\": \"bg-blue-100\",\n \"textColor\": \"text-blue-600\"\n }\n ];\n\n return (\n

\n {/* Achievements Section */}\n

Your Achievements

\n {achievements.map((achievement) => (\n

\n \n

{achievement.title}

\n {achievement.isNew && (\n \n New\n \n )}\n

{achievement.description}

\n ))}\n

\n\n {/* Wellness Updates */}\n

Wellness Updates

\n {wellnessUpdates.map((update) => (\n

\n \n

{update.message}

{update.time}

\n ))}\n

\n\n {/* Personal Insights */}\n

Personal Insights

\n {personalizedMessages.map((message) => (\n

\n \n

{message.message}

{message.time}

\n ))}\n

\n\n {/* Daily Check-in */}\n

Daily Check-in

\n How are you feeling today, {userName}?\n

\n {['😊', '😐', '😔'].map((emoji) => (\n setSelectedMood(emoji)}\n className={`text-2xl md:text-3xl p-3 md:p-4 rounded-full transition-colors ${\n selectedMood === emoji ? 'bg-purple-100' : 'hover:bg-gray-100'\n }`}\n >\n {emoji}\n \n ))}\n

\n Your response helps us provide better insights\n

\n );\n}","state":"const [showAllInsightsPopup, setShowAllInsightsPopup] = useState(false);","filePath":"components/Dashboard.tsx","language":"typescript","components/Toast.tsx":"import React from \"react\";\nimport { CheckCircleIcon, ArrowTrendingUpIcon, ArrowTrendingDownIcon } from \"@heroicons/react/24/outline\";\n\ninterface ToastProps {\n show: boolean;\n toast: {\n message: string;\n type: 'success' | 'info' | 'warning';\n detail?: string;\n } | null;\n}\n\nexport default function Toast({ show, toast }: ToastProps) {\n if (!show || !toast) return null;\n\n const getToastStyles = (type: string) => {\n switch (type) {\n case 'success':\n return 'bg-green-50 text-green-800';\n case 'warning':\n return 'bg-yellow-50 text-yellow-800';\n default:\n return 'bg-blue-50 text-blue-800';\n }\n };\n\n const getToastIcon = (type: string) => {\n switch (type) {\n case 'success':\n return ;\n case 'warning':\n return ;\n default:\n return ;\n }\n };\n\n return (\n

\n {getToastIcon(toast.type)}\n

{toast.message}

\n {toast.detail && (\n

{toast.detail}

\n )}\n

\n );\n}","navItems":[{"id":"dashboard","label":"Home","icon":"HomeIcon","activeIcon":"HomeIconSolid"},{"id":"scan","label":"Scan","icon":"CameraIcon","activeIcon":"CameraIconSolid"},{"id":"insights","label":"Insights","icon":"ChartBarIcon","activeIcon":"ChartBarIconSolid"},{"id":"messages","label":"Messages","icon":"ChatBubbleLeftIcon","activeIcon":"ChatBubbleLeftIconSolid"},{"id":"notifications","label":"Updates","icon":"BellIcon","activeIcon":"BellIconSolid"},{"id":"settings","label":"Settings","icon":"Cog6ToothIcon","activeIcon":"Cog6ToothIconSolid"}],"components/Messages.tsx":"import React, { useState } from \"react\";\n\nexport default function Messages() {\n const userName = \"Alex\";\n const [selectedMood, setSelectedMood] = useState(\"\");\n const [moodFeedback, setMoodFeedback] = useState(\"\");\n const [feedbackColor, setFeedbackColor] = useState(\"\");\n\n const achievements = [\n {\n \"id\": \"1\",\n \"title\": \"Wellness Warrior\",\n \"description\": `${userName}, you've kept your HRV steady for 5 daysâthis is a sign of great stress management!`,\n \"color\": \"text-orange-500 bg-orange-100\",\n \"isNew\": true\n },\n {\n \"id\": \"2\",\n \"title\": \"Mindfulness Master\",\n \"description\": `Great work ${userName}! Your consistent breathing exercises are showing results in your stress patterns.`,\n \"color\": \"text-purple-500 bg-purple-100\",\n \"isNew\": true\n }\n ];\n\n const wellnessUpdates = [\n {\n \"id\": \"1\",\n \"type\": \"success\",\n \"message\": `${userName}, your stress resilience is improving! Your last week's readings show better recovery patterns.`,\n \"time\": \"2 hours ago\",\n \"color\": \"text-green-500 bg-green-100\"\n },\n {\n \"id\": \"2\",\n \"type\": \"suggestion\",\n \"message\": `Time for your afternoon scan, ${userName}? It helps us track your daily patterns more accurately.`,\n \"time\": \"Just now\",\n \"color\": \"text-blue-500 bg-blue-100\"\n },\n {\n \"id\": \"3\",\n \"type\": \"milestone\",\n \"message\": `You're building great habits, ${userName}! Your consistent check-ins are helping build a clearer picture of your wellness.`,\n \"time\": \"4 hours ago\",\n \"color\": \"text-purple-500 bg-purple-100\"\n }\n ];\n\n const personalizedMessages = [\n {\n \"id\": \"1\",\n \"message\": `${userName}, I notice your stress levels tend to rise around this time. How about a 2-minute breathing break?`,\n \"time\": \"Just now\",\n \"bgColor\": \"bg-purple-100\",\n \"textColor\": \"text-purple-600\"\n },\n {\n \"id\": \"2\",\n \"message\": `Your HRV is showing positive trends this week, ${userName}! The mindfulness exercises seem to be working well for you.`,\n \"time\": \"1 hour ago\",\n \"bgColor\": \"bg-green-100\",\n \"textColor\": \"text-green-600\"\n },\n {\n \"id\": \"3\",\n \"message\": `Remember to take short breaks between tasks, ${userName}. It helps maintain your stress balance.`,\n \"time\": \"2 hours ago\",\n \"bgColor\": \"bg-blue-100\",\n \"textColor\": \"text-blue-600\"\n }\n ];\n\n const getMoodFeedback = (mood: string) => {\n switch (mood) {\n case \"ð\": \n setFeedbackColor(\"text-green-600\");\n return \"Great! Your data shows consistencyâkeep up the good habits!\";\n case \"ð\": \n setFeedbackColor(\"text-amber-600\");\n return \"Feeling neutral? Check your trendsâany recent stress spikes?\";\n case \"ð\": \n setFeedbackColor(\"text-purple-600\");\n return \"Your stress has been trending up. Try a quick breathing exercise.\";\n default:\n return \"\";\n }\n };\n\n const handleMoodSelection = (mood: string) => {\n setSelectedMood(mood);\n setMoodFeedback(getMoodFeedback(mood));\n };\n\n return (\n

\n {/* Achievements Section */}\n

Your Achievements

\n {achievements.map((achievement) => (\n

{achievement.title}

\n {achievement.isNew && (\n \n New\n \n )}\n

{achievement.description}

\n ))}\n

\n\n {/* Wellness Updates */}\n

Wellness Updates

\n {wellnessUpdates.map((update) => (\n

{update.message}

{update.time}

\n ))}\n

\n\n {/* Personal Insights */}\n

Personal Insights

\n {personalizedMessages.map((message) => (\n

{message.message}

{message.time}

\n ))}\n

\n\n {/* Daily Check-in */}\n

Daily Check-in

\n How are you feeling today, {userName}?\n

\n {['ð', 'ð', 'ð'].map((emoji) => (\n handleMoodSelection(emoji)}\n className={`text-2xl md:text-3xl p-3 md:p-4 rounded-full transition-colors ${\n selectedMood === emoji ? 'bg-purple-100' : 'hover:bg-gray-100'\n }`}\n >\n {emoji}\n \n ))}\n

\n {selectedMood && moodFeedback && (\n

{moodFeedback}

\n {selectedMood === \"ð\" && (\n console.log(\"Start breathing exercise\")}\n >\n Start Quick Breathing Exercise â\n \n )}\n

\n )}\n

\n Your response helps us provide better insights\n

\n );\n}","// components/BottomNav.tsx":"import React from \"react\";\nimport { HomeIcon, CameraIcon, ChartBarIcon, Cog6ToothIcon, ChatBubbleLeftIcon } from \"@heroicons/react/24/outline\";\nimport { HomeIcon as HomeIconSolid, CameraIcon as CameraIconSolid, ChartBarIcon as ChartBarIconSolid, Cog6ToothIcon as Cog6ToothIconSolid, ChatBubbleLeftIcon as ChatBubbleLeftIconSolid } from \"@heroicons/react/24/solid\";\n\ninterface BottomNavProps {\n currentView: string;\n onNavigate: (view: string) => void;\n}\n\nexport default function BottomNav({ currentView, onNavigate }: BottomNavProps) {\n const navItems = [\n {\n \"id\": \"dashboard\",\n \"label\": \"Home\",\n \"icon\": HomeIcon,\n \"activeIcon\": HomeIconSolid\n },\n {\n \"id\": \"scan\",\n \"label\": \"Scan\",\n \"icon\": CameraIcon,\n \"activeIcon\": CameraIconSolid\n },\n {\n \"id\": \"insights\",\n \"label\": \"Insights\",\n \"icon\": ChartBarIcon,\n \"activeIcon\": ChartBarIconSolid\n },\n {\n \"id\": \"messages\",\n \"label\": \"Messages\",\n \"icon\": ChatBubbleLeftIcon,\n \"activeIcon\": ChatBubbleLeftIconSolid\n },\n {\n \"id\": \"settings\",\n \"label\": \"Settings\",\n \"icon\": Cog6ToothIcon,\n \"activeIcon\": Cog6ToothIconSolid\n }\n ];\n\n return (\n

\n );\n}"}

Welcome back,