All tweaks added

2026-06-06 18:10:35 +01:00
parent 043b3b7269
commit ec5a01d12a
92 changed files with 7517 additions and 784 deletions
@@ -1,7 +1,7 @@
 import { Link } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
-import { format, subDays, startOfWeek } from 'date-fns'
+import { startOfWeek, format, subWeeks, eachWeekOfInterval, subDays } from 'date-fns'
 import api from '../utils/api'
 import StatCard from '../components/ui/StatCard'
 import {
@@ -10,18 +10,29 @@ import {
 } from '../utils/format'

 function WeeklyChart({ activities }) {
-  if (!activities?.length) return null
+  if (!activities?.length) return (
+    <div className="flex items-center justify-center h-36 text-gray-600 text-sm">No activities yet</div>
+  )

-  // Build last 8 weeks of distance data
-  const weeks = {}
-  activities.forEach(a => {
-    const week = format(startOfWeek(new Date(a.start_time)), 'MMM d')
-    if (!weeks[week]) weeks[week] = { week, km: 0, runs: 0 }
-    weeks[week].km += (a.distance_m || 0) / 1000
-    weeks[week].runs++
+  // Build last 8 weeks in chronological order
+  const now = new Date()
+  const weeks = eachWeekOfInterval({
+    start: subWeeks(startOfWeek(now), 7),
+    end: startOfWeek(now),
  })

-  const data = Object.values(weeks).slice(-8)
+  const data = weeks.map(weekStart => {
+    const weekKey = format(weekStart, 'MMM d')
+    const weekEnd = new Date(weekStart)
+    weekEnd.setDate(weekEnd.getDate() + 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: weekKey, km: parseFloat(km.toFixed(2)) }
+  })

  return (
    <ResponsiveContainer width="100%" height={140}>
@@ -30,10 +41,8 @@ function WeeklyChart({ activities }) {
        <XAxis dataKey="week" tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} />
        <YAxis tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} width={28}
          tickFormatter={v => `${v.toFixed(0)}`} />
-        <Tooltip
-          contentStyle={{ background: '#111827', border: '1px solid #374151', borderRadius: 8, fontSize: 12 }}
-          formatter={(v, name) => [`${v.toFixed(1)} km`, 'Distance']}
-        />
+        <Tooltip contentStyle={{ background: '#111827', border: '1px solid #374151', borderRadius: 8, fontSize: 12 }}
+          formatter={(v) => [`${v.toFixed(1)} km`, 'Distance']} />
        <Bar dataKey="km" fill="#3b82f6" radius={[3, 3, 0, 0]} isAnimationActive={false} />
      </BarChart>
    </ResponsiveContainer>
@@ -50,10 +59,7 @@ export default function DashboardPage() {
    queryKey: ['activities-all-chart'],
    queryFn: () =>
      api.get('/activities/', {
-        params: {
-          per_page: 100,
-          from_date: subDays(new Date(), 60).toISOString(),
-        },
+        params: { per_page: 100, from_date: subDays(new Date(), 60).toISOString() },
      }).then(r => r.data),
  })

@@ -68,64 +74,45 @@ export default function DashboardPage() {
  })

  const latest = healthSummary?.latest
-  const totalActivities = recentActivities?.length ?? 0
  const totalDistance = recentActivities?.reduce((s, a) => s + (a.distance_m || 0), 0) ?? 0

  return (
    <div className="p-6 space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-white">Dashboard</h1>
-        <Link
-          to="/upload"
-          className="text-sm text-blue-400 hover:text-blue-300 transition-colors"
-        >
-          + Import data
-        </Link>
+        <Link to="/upload" className="text-sm text-blue-400 hover:text-blue-300 transition-colors">+ Import data</Link>
      </div>

-      {/* Top stats */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
-        <StatCard label="Activities (10)" value={totalActivities} />
-        <StatCard label="Distance (10)" value={formatDistance(totalDistance)} accent="blue" />
+        <StatCard label="Recent activities" value={recentActivities?.length ?? 0} />
+        <StatCard label="Total distance" value={formatDistance(totalDistance)} accent="blue" />
        <StatCard label="Resting HR" value={formatHeartRate(latest?.resting_hr)} accent="red" />
        <StatCard label="Sleep" value={formatSleep(latest?.sleep_duration_s)} />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Weekly distance chart */}
        <div className="lg:col-span-2 bg-gray-900 rounded-xl border border-gray-800 p-4">
          <h3 className="text-sm font-medium text-gray-300 mb-3">Weekly distance (km)</h3>
          <WeeklyChart activities={allActivities} />
        </div>

-        {/* Health snapshot */}
        <div className="bg-gray-900 rounded-xl border border-gray-800 p-4 space-y-3">
          <h3 className="text-sm font-medium text-gray-300">Health today</h3>
          {latest ? (
            <>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-500">HRV</span>
-                <span className="text-white">{latest.hrv_nightly_avg ? `${Math.round(latest.hrv_nightly_avg)} ms` : '--'}</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-500">Sleep score</span>
-                <span className="text-white">{latest.sleep_score ? Math.round(latest.sleep_score) : '--'}</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-500">Steps</span>
-                <span className="text-white">{latest.steps?.toLocaleString() ?? '--'}</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-500">VO2 Max</span>
-                <span className="text-white">{latest.vo2max ? latest.vo2max.toFixed(1) : '--'}</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-500">Stress</span>
-                <span className="text-white">{latest.avg_stress ? Math.round(latest.avg_stress) : '--'}</span>
-              </div>
-              <Link to="/health" className="block text-xs text-blue-400 hover:underline mt-2">
-                View full health dashboard →
-              </Link>
+              {[
+                ['HRV', latest.hrv_nightly_avg ? `${Math.round(latest.hrv_nightly_avg)} ms` : '--'],
+                ['Sleep score', latest.sleep_score ? Math.round(latest.sleep_score) : '--'],
+                ['Steps', latest.steps?.toLocaleString() ?? '--'],
+                ['VO2 Max', latest.vo2max ? latest.vo2max.toFixed(1) : '--'],
+                ['Stress', latest.avg_stress ? Math.round(latest.avg_stress) : '--'],
+              ].map(([label, val]) => (
+                <div key={label} className="flex justify-between text-sm">
+                  <span className="text-gray-500">{label}</span>
+                  <span className="text-white">{val}</span>
+                </div>
+              ))}
+              <Link to="/health" className="block text-xs text-blue-400 hover:underline mt-2">View full health dashboard →</Link>
            </>
          ) : (
            <p className="text-xs text-gray-600">No health data. Import a Garmin export.</p>
@@ -141,29 +128,17 @@ export default function DashboardPage() {
        </div>
        <div className="space-y-2">
          {recentActivities?.slice(0, 5).map(activity => (
-            <Link
-              key={activity.id}
-              to={`/activities/${activity.id}`}
-              className="flex items-center gap-3 py-2 border-b border-gray-800/50 hover:bg-gray-800/30 rounded-lg px-2 -mx-2 transition-colors"
-            >
+            <Link key={activity.id} to={`/activities/${activity.id}`}
+              className="flex items-center gap-3 py-2 border-b border-gray-800/50 hover:bg-gray-800/30 rounded-lg px-2 -mx-2 transition-colors">
              <span className="text-lg">{sportIcon(activity.sport_type)}</span>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-white truncate">{activity.name}</p>
                <p className="text-xs text-gray-500">{formatDate(activity.start_time)}</p>
              </div>
              <div className="flex gap-4 text-sm text-right">
-                <div>
-                  <p className="text-gray-200">{formatDistance(activity.distance_m)}</p>
-                  <p className="text-xs text-gray-600">dist</p>
-                </div>
-                <div>
-                  <p className="text-gray-200">{formatDuration(activity.duration_s)}</p>
-                  <p className="text-xs text-gray-600">time</p>
-                </div>
-                <div>
-                  <p className="text-red-400">{formatHeartRate(activity.avg_heart_rate)}</p>
-                  <p className="text-xs text-gray-600">HR</p>
-                </div>
+                <div><p className="text-gray-200">{formatDistance(activity.distance_m)}</p><p className="text-xs text-gray-600">dist</p></div>
+                <div><p className="text-gray-200">{formatDuration(activity.duration_s)}</p><p className="text-xs text-gray-600">time</p></div>
+                <div><p className="text-red-400">{formatHeartRate(activity.avg_heart_rate)}</p><p className="text-xs text-gray-600">HR</p></div>
              </div>
            </Link>
          ))}
@@ -175,7 +150,6 @@ export default function DashboardPage() {
        </div>
      </div>

-      {/* PRs snapshot */}
      {records?.length > 0 && (
        <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
          <div className="flex items-center justify-between mb-4">