- {peak != null && (
-
{Math.round(peak)}
+
+
+ {peak != null && {Math.round(peak)}}
+ {charged != null && +{charged}}
+ {drained != null && -{drained}}
+ {end_level != null && now {Math.round(end_level)}}
+
+ {hasGraph ? (
+ <>
+
+
+
+ format(new Date(ts), 'HH:mm')}
+ interval={Math.max(1, Math.floor(data.length / 6))} />
+
+ format(new Date(ts), 'HH:mm')} formatter={v => [`${Math.round(v)}%`, 'Battery']} />
+
+ {data.map((d, i) => | )}
+
+
+
+
+
+ {presentTypes.map(type => (
+
+
+
{BB_INFERRED_LABEL[type]}
+
+ ))}
+
+
+ ) : (
+
No body battery data today
)}
- {charged != null &&
+{charged}}
- {drained != null &&
-{drained}}
- {end_level != null &&
now {Math.round(end_level)}}
- {hasGraph ? (
- <>
-
-
-
-
- format(new Date(ts), 'HH:mm')}
- formatter={v => [`${Math.round(v)}%`, 'Battery']}
- />
-
- {data.map((d, i) => | )}
-
-
-
-
-
- {presentTypes.map(type => (
-
-
-
{BB_INFERRED_LABEL[type]}
-
- ))}
-
-
- ) : (
-
No body battery data today
- )}
)
}
-function Vo2MaxWidget({ health, recentHealth }) {
+function Sparkline({ data, dataKey, color, gradId, fmt }) {
+ return (
+
+
+
+
+
+
+
+
+
+ format(new Date(d), 'MMM d')}
+ formatter={v => [fmt ? fmt(v) : v, '']} />
+
+
+
+ )
+}
+
+function Vo2MaxTrend({ health, recentHealth }) {
const series = useMemo(
- () => [...(recentHealth || [])]
- .filter(d => d.vo2max != null)
+ () => [...(recentHealth || [])].filter(d => d.vo2max != null)
.sort((a, b) => new Date(a.date) - new Date(b.date))
.map(d => ({ date: d.date, v: d.vo2max })),
[recentHealth],
)
return (
-
- {health.vo2max != null ? health.vo2max.toFixed(1) : '--'}
- ml/kg/min
-
- {health.fitness_age != null && (
- Fitness age {health.fitness_age}
- )}
- {series.length >= 2 && (
-
-
-
-
-
-
-
-
-
-
- format(new Date(d), 'MMM d')} formatter={v => [v.toFixed(1), 'VOâ‚‚ max']} />
-
-
-
+
+
+ {health.vo2max != null ? health.vo2max.toFixed(1) : '--'}
+ ml/kg/min
- )}
+ {health.fitness_age != null &&
Fitness age {health.fitness_age}
}
+
+ {series.length >= 2
+ ?
v.toFixed(1)} />
+ : Not enough history
}
+
+
+
+ )
+}
+
+function WeightMini({ recentHealth }) {
+ const series = useMemo(
+ () => [...(recentHealth || [])].filter(d => d.weight_kg != null)
+ .sort((a, b) => new Date(a.date) - new Date(b.date))
+ .map(d => ({ date: d.date, w: +d.weight_kg.toFixed(2) })),
+ [recentHealth],
+ )
+ const latest = series.length ? series[series.length - 1].w : null
+ return (
+
+
+
+ {latest != null ? latest.toFixed(1) : '--'}
+ kg
+
+
+ {series.length >= 2
+ ?
`${v.toFixed(1)} kg`} />
+ : Not enough history
}
+
+
)
}
@@ -193,7 +242,7 @@ const SLEEP_STAGES = [
{ key: 'sleep_awake_s', label: 'Awake', color: '#6b7280' },
]
-function SleepMini({ health }) {
+function SleepDetail({ health }) {
const total = SLEEP_STAGES.reduce((s, st) => s + (health[st.key] || 0), 0)
return (
@@ -229,60 +278,39 @@ function SleepMini({ health }) {
)
}
-function HrvWidget({ health }) {
- const status = health.hrv_status
- const cls = status ? (HRV_PALETTE[status.toLowerCase()] || 'text-gray-400 bg-gray-400/10 border-gray-400/30') : null
- return (
-
-
-
- {health.hrv_nightly_avg != null ? Math.round(health.hrv_nightly_avg) : '--'}
- ms
-
- {status
- ?
{status}
- :
No HRV status}
-
No activities yet
- )
- const now = new Date()
- const weeks = eachWeekOfInterval({ start: subWeeks(startOfWeek(now), 7), end: startOfWeek(now) })
- const data = weeks.map(weekStart => {
- const weekEnd = addDays(weekStart, 7)
- const km = activities
- .filter(a => { const t = new Date(a.start_time); return t >= weekStart && t < weekEnd })
- .reduce((s, a) => s + (a.distance_m || 0) / 1000, 0)
- return {
- week: format(weekStart, 'MMM d'),
- km: parseFloat(km.toFixed(2)),
- weekStartISO: format(weekStart, 'yyyy-MM-dd'),
- weekEndISO: format(weekEnd, 'yyyy-MM-dd'),
- }
- })
- const handleBarClick = (entry) => {
- const p = entry?.activePayload?.[0]?.payload
- if (p) navigate(`/activities?from=${p.weekStartISO}&to=${p.weekEndISO}`)
- }
+ const data = useMemo(() => {
+ if (!activities?.length) return []
+ const now = new Date()
+ const weeks = eachWeekOfInterval({ start: subWeeks(startOfWeek(now), 7), end: startOfWeek(now) })
+ return weeks.map(weekStart => {
+ const weekEnd = addDays(weekStart, 7)
+ const km = activities
+ .filter(a => { const t = new Date(a.start_time); return t >= weekStart && t < weekEnd })
+ .reduce((s, a) => s + (a.distance_m || 0) / 1000, 0)
+ return { week: format(weekStart, 'MMM d'), km: parseFloat(km.toFixed(2)), weekStartISO: format(weekStart, 'yyyy-MM-dd'), weekEndISO: format(weekEnd, 'yyyy-MM-dd') }
+ })
+ }, [activities])
+
return (
-
-
-
-
- `${v.toFixed(0)}`} />
- [`${v.toFixed(1)} km`, 'Distance']} cursor={{ fill: 'rgba(59,130,246,0.1)' }} />
-
-
-
+
+ {data.length ? (
+
+ { const p = e?.activePayload?.[0]?.payload; if (p) navigate(`/activities?from=${p.weekStartISO}&to=${p.weekEndISO}`) }}
+ style={{ cursor: 'pointer' }}>
+
+
+ `${v.toFixed(0)}`} />
+ [`${v.toFixed(1)} km`, 'Distance']} cursor={{ fill: 'rgba(59,130,246,0.1)' }} />
+
+
+
+ ) : (
+ No activities yet
+ )}
+
)
}
@@ -296,9 +324,7 @@ function FeaturedActivity({ activity, segments }) {
{sportIcon(activity.sport_type)}
-
- {activity.name}
-
+
{activity.name}
{formatDate(activity.start_time)}
@@ -330,15 +356,11 @@ function FeaturedActivity({ activity, segments }) {
return (
{seg.name}
-
- {formatDuration(seg.duration_s)}
-
+ {formatDuration(seg.duration_s)}
- {isPodium
- ? {MEDALS[seg.rank]}
- : delta != null
- ? +{formatDuration(delta)}
- : --}
+ {isPodium ? {MEDALS[seg.rank]}
+ : delta != null ? +{formatDuration(delta)}
+ : --}
)
@@ -369,9 +391,7 @@ function RecentActivities({ activities }) {
))}
{!activities?.length && (
-
- No activities yet — import some data
-
+ No activities yet — import some data
)}
@@ -404,18 +424,14 @@ export default function DashboardPage() {
queryKey: ['activities-recent'],
queryFn: () => api.get('/activities/', { params: { per_page: 10 } }).then(r => r.data),
})
-
const { data: allActivities } = useQuery({
queryKey: ['activities-all-chart'],
- queryFn: () =>
- api.get('/activities/', { params: { per_page: 100, from_date: subDays(new Date(), 60).toISOString() } }).then(r => r.data),
+ queryFn: () => api.get('/activities/', { params: { per_page: 100, from_date: subDays(new Date(), 60).toISOString() } }).then(r => r.data),
})
-
const { data: recentHealth } = useQuery({
queryKey: ['health-metrics', 'dash'],
queryFn: () => api.get('/health-metrics/', { params: { limit: 365 } }).then(r => r.data),
})
-
const { data: profile } = useQuery({
queryKey: ['profile'],
queryFn: () => api.get('/profile/').then(r => r.data),
@@ -431,7 +447,6 @@ export default function DashboardPage() {
sleep_duration_s: pick('sleep_duration_s'),
sleep_start: latest.sleep_start ?? null,
sleep_end: latest.sleep_end ?? null,
- // Sleep stages + score for the latest night (same row as sleep_start).
sleep_deep_s: latest.sleep_deep_s ?? null,
sleep_rem_s: latest.sleep_rem_s ?? null,
sleep_light_s: latest.sleep_light_s ?? null,
@@ -443,6 +458,8 @@ export default function DashboardPage() {
vo2max: pick('vo2max'),
fitness_age: pick('fitness_age'),
avg_stress: pick('avg_stress'),
+ active_calories: pick('active_calories'),
+ floors_climbed: pick('floors_climbed'),
}
}, [recentHealth])
@@ -451,17 +468,14 @@ export default function DashboardPage() {
queryFn: () => api.get('/health-metrics/intraday', { params: { date: health.date } }).then(r => r.data),
enabled: !!health.date,
})
-
const { data: records } = useQuery({
queryKey: ['records-running'],
queryFn: () => api.get('/records/', { params: { sport_type: 'running' } }).then(r => r.data),
})
-
const { data: ytdStats } = useQuery({
queryKey: ['ytd-stats'],
queryFn: () => api.get('/activities/stats/ytd').then(r => r.data),
})
-
const featured = recentActivities?.[0]
const { data: featuredSegments } = useQuery({
queryKey: ['activity-segments', featured?.id],
@@ -471,11 +485,11 @@ export default function DashboardPage() {
// ── Layout state ──────────────────────────────────────────────────────────
const [editMode, setEditMode] = useState(false)
+ const [addOpen, setAddOpen] = useState(false)
const [layout, setLayout] = useState(() => buildLayout(null))
const saveTimer = useRef(null)
const loadedRef = useRef(false)
- // Apply the saved layout once the profile loads.
useEffect(() => {
if (profile && !loadedRef.current) {
loadedRef.current = true
@@ -483,48 +497,84 @@ export default function DashboardPage() {
}
}, [profile])
+ const qc = useQueryClient()
+ const stripLayout = (lay) => lay.map(({ i, x, y, w, h }) => ({ i, x, y, w, h }))
const saveLayout = useMutation({
- mutationFn: (lay) =>
- api.put('/profile/dashboard-layout', { layout: lay.map(({ i, x, y, w, h }) => ({ i, x, y, w, h })) }),
+ mutationFn: (lay) => api.put('/profile/dashboard-layout', { layout: stripLayout(lay) }),
+ // Keep the cached profile in sync so re-mounting the page doesn't revert the layout.
+ onSuccess: (_d, lay) => qc.setQueryData(['profile'], p => (p ? { ...p, dashboard_layout: stripLayout(lay) } : p)),
})
+ const persist = (lay) => { clearTimeout(saveTimer.current); saveLayout.mutate(lay) }
+
const handleLayoutChange = (next) => {
- setLayout(next)
+ const withMins = attachMins(next)
+ setLayout(withMins)
if (editMode) {
clearTimeout(saveTimer.current)
- saveTimer.current = setTimeout(() => saveLayout.mutate(next), 700)
+ saveTimer.current = setTimeout(() => saveLayout.mutate(withMins), 700)
}
}
- const finishEditing = () => {
- clearTimeout(saveTimer.current)
- saveLayout.mutate(layout)
- setEditMode(false)
+ const addWidget = (id) => {
+ if (layout.some(l => l.i === id)) { setAddOpen(false); return }
+ const maxY = layout.reduce((m, l) => Math.max(m, l.y + l.h), 0)
+ const def = WIDGETS[id]
+ const next = attachMins([...layout, { i: id, x: 0, y: maxY, w: def.w, h: def.h }])
+ setLayout(next); persist(next); setAddOpen(false)
+ }
+ const removeWidget = (id) => { const next = layout.filter(l => l.i !== id); setLayout(next); persist(next) }
+
+ const finishEditing = () => { persist(layout); setEditMode(false); setAddOpen(false) }
+ const resetLayout = () => { const def = attachMins(DEFAULT_LAYOUT); setLayout(def); persist(def) }
+
+ const renderWidget = (id) => {
+ if (STAT_DEFS[id]) {
+ const d = STAT_DEFS[id]
+ return
+ }
+ switch (id) {
+ case 'weekly': return
+ case 'bodyBattery': return
+ case 'vo2maxTrend': return
+ case 'sleepDetail': return
+ case 'weight': return
+ case 'featured': return
+ case 'recent': return
+ case 'prs': return
+ default: return null
+ }
}
- const resetLayout = () => {
- const def = buildLayout(null)
- setLayout(def)
- saveLayout.mutate(def)
- }
-
- const WIDGET_CONTENT = {
- stats:
,
- weekly:
,
- bodyBattery:
,
- vo2max:
,
- sleep:
,
- hrv:
,
- featured:
,
- recent:
,
- prs:
,
- }
+ const presentIds = new Set(layout.map(l => l.i))
+ const available = Object.keys(WIDGETS).filter(id => !presentIds.has(id))
return (
Dashboard
+ {editMode && (
+
+
+ {addOpen && (
+
+ {available.length === 0
+ ?
All widgets are on the dashboard
+ : available.map(id => (
+
+ ))}
+
+ )}
+
+ )}
{editMode && (
)}
@@ -540,7 +590,7 @@ export default function DashboardPage() {
{editMode && (
-
Drag widgets to move them, or drag a corner to resize. Changes save automatically.
+
Drag to move, drag a corner to resize, or remove a widget with ✕. Add widgets from the menu. Changes save automatically.
)}
- {WIDGETS.map(w => (
-
+ {layout.filter(l => WIDGETS[l.i]).map(l => (
+
+ {editMode && (
+
+ )}
- {WIDGET_CONTENT[w.id]}
+ {renderWidget(l.i)}
))}