-
-
-
đïž Gravl
-
-
-
-
- Vecka {currentWeek}
-
-
-
-
-
-
- {program?.name || 'Laddar...'}
- {program?.description}
-
-
-
- Veckans pass
- {program?.days?.map((day, idx) => (
- startWorkout(day)}>
-
- Dag {day.day_number}
- {day.name}
-
-
- {day.exercises?.filter(e => e.name).slice(0, 3).map((ex, i) => (
- {ex.name}
- ))}
- {day.exercises?.filter(e => e.name).length > 3 && (
- +{day.exercises.filter(e => e.name).length - 3}
- )}
-
-
- Starta â
-
-
+
)
}
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
new file mode 100644
index 0000000..550796c
--- /dev/null
+++ b/frontend/src/pages/Dashboard.jsx
@@ -0,0 +1,246 @@
+import { useState, useEffect } from 'react'
+import { useAuth } from '../context/AuthContext'
+
+const API_URL = '/api'
+
+// Coach greetings based on time and context
+const getCoachGreeting = (user, todayWorkout) => {
+ const hour = new Date().getHours()
+ const name = user?.name?.split(' ')[0] || 'du'
+
+ if (hour < 10) {
+ return todayWorkout
+ ? `Godmorgon ${name}! đȘ Redo för ${todayWorkout.name.toLowerCase()}?`
+ : `Godmorgon ${name}! Vilodag idag â Ă„terhĂ€mtning Ă€r ocksĂ„ trĂ€ning.`
+ } else if (hour < 14) {
+ return todayWorkout
+ ? `Dags att köra ${name}! ${todayWorkout.name} vÀntar.`
+ : `Lugn dag idag ${name}. Ladda batterierna! đ`
+ } else if (hour < 18) {
+ return todayWorkout
+ ? `Eftermiddagspass? ${todayWorkout.name} stĂ„r pĂ„ schemat đïž`
+ : `Vila upp dig ${name}. Imorgon kör vi igen!`
+ } else {
+ return todayWorkout
+ ? `KvÀllspass ${name}? Perfekt för att slÀppa dagen.`
+ : `Bra jobbat denna veckan! Vila gott. đŽ`
+ }
+}
+
+// Get weekday names
+const weekdays = ['MÄn', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör', 'Sön']
+
+function Dashboard({ onStartWorkout }) {
+ const { user, logout } = useAuth()
+ const [program, setProgram] = useState(null)
+ const [todayWorkout, setTodayWorkout] = useState(null)
+ const [loading, setLoading] = useState(true)
+ const [currentWeekStart, setCurrentWeekStart] = useState(getWeekStart(new Date()))
+
+ useEffect(() => {
+ fetchData()
+ }, [])
+
+ const fetchData = async () => {
+ try {
+ // Fetch user's program
+ const res = await fetch(`${API_URL}/programs/1`)
+ const data = await res.json()
+ setProgram(data)
+
+ // Determine today's workout based on day of week
+ const dayOfWeek = new Date().getDay() // 0 = Sunday
+ const adjustedDay = dayOfWeek === 0 ? 7 : dayOfWeek // Convert to 1-7 (Mon-Sun)
+
+ // Find if there's a workout scheduled for today
+ const todayDay = data.days?.find(d => d.day_number === adjustedDay)
+ setTodayWorkout(todayDay || null)
+
+ setLoading(false)
+ } catch (err) {
+ console.error('Failed to fetch data:', err)
+ setLoading(false)
+ }
+ }
+
+ if (loading) {
+ return (
+
+ )
+ }
+
+ const workoutDays = program?.days?.map(d => d.day_number) || []
+
+ return (
+
+
+
+
+ {/* Coach Greeting */}
+
+ đ§ââïž
+
+
{getCoachGreeting(user, todayWorkout)}
+
+
+
+ {formatWeekRange(currentWeekStart)}
+
+
+
+
+ {weekdays.map((name, idx) => {
+ const date = addDays(currentWeekStart, idx)
+ const dayNum = idx + 1
+ const isToday = isSameDay(date, new Date())
+ const hasWorkout = workoutDays.includes(dayNum)
+ const workout = program?.days?.find(d => d.day_number === dayNum)
+
+ return (
+
hasWorkout && workout && onStartWorkout(workout)}
+ >
+ {name}
+ {date.getDate()}
+ {hasWorkout && â}
+
+ )
+ })}
+
Dagens pass
+ {todayWorkout ? (
+ onStartWorkout(todayWorkout)}>
+
+
{todayWorkout.name}
+ ~45 min
+
+
+ {todayWorkout.exercises?.filter(e => e.name).map((ex, i) => (
+
+ {ex.name}
+ {ex.sets}Ă{ex.reps_min}-{ex.reps_max}
+
+ ))}
+
+
+
+
đ§
+
Vilodag
+
Inga pass schemalagda. Fokusera pÄ ÄterhÀmtning!
+
+ đ€ Sömn
+ đ„ NĂ€ring
+ đ¶ LĂ€tt rörelse
+
+
+ {workoutDays.length}
+ Pass/vecka
+
+
+ 2
+ Denna vecka
+
+
+ đȘ
+ Streak: 5
+
+
+
+ {/* Upcoming Workouts */}
+
+ Kommande pass
+
+ {program?.days?.slice(0, 3).map((day, idx) => (
+
onStartWorkout(day)}
+ >
+ {weekdays[day.day_number - 1]}
+ {day.name}
+ â
+
+ ))}
+
+
+ )
+}
+
+// Helper functions
+function getWeekStart(date) {
+ const d = new Date(date)
+ const day = d.getDay()
+ const diff = d.getDate() - day + (day === 0 ? -6 : 1)
+ return new Date(d.setDate(diff))
+}
+
+function addDays(date, days) {
+ const d = new Date(date)
+ d.setDate(d.getDate() + days)
+ return d
+}
+
+function isSameDay(d1, d2) {
+ return d1.getDate() === d2.getDate() &&
+ d1.getMonth() === d2.getMonth() &&
+ d1.getFullYear() === d2.getFullYear()
+}
+
+function formatWeekRange(weekStart) {
+ const end = addDays(weekStart, 6)
+ const startMonth = weekStart.toLocaleDateString('sv-SE', { month: 'short' })
+ const endMonth = end.toLocaleDateString('sv-SE', { month: 'short' })
+
+ if (startMonth === endMonth) {
+ return `${weekStart.getDate()} - ${end.getDate()} ${startMonth}`
+ }
+ return `${weekStart.getDate()} ${startMonth} - ${end.getDate()} ${endMonth}`
+}
+
+export default Dashboard