All tweaks added

2026-06-06 18:10:35 +01:00
parent 043b3b7269
commit ec5a01d12a
92 changed files with 7517 additions and 784 deletions
@@ -0,0 +1,147 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import api from '../utils/api'
+import {
+  formatDuration, formatDistance, formatPace, formatHeartRate,
+  formatDate, sportIcon, sportColor,
+} from '../utils/format'
+
+const SPORTS = ['all', 'running', 'cycling', 'hiking', 'walking']
+
+export default function ActivitiesPage() {
+  const [sport, setSport] = useState('all')
+  const [page, setPage] = useState(1)
+
+  const { data: activities, isLoading } = useQuery({
+    queryKey: ['activities', sport, page],
+    queryFn: () =>
+      api.get('/activities/', {
+        params: {
+          sport_type: sport === 'all' ? undefined : sport,
+          page,
+          per_page: 20,
+        },
+      }).then(r => r.data),
+  })
+
+  return (
+    <div className="p-6">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold text-white">Activities</h1>
+        <Link
+          to="/upload"
+          className="bg-blue-600 hover:bg-blue-700 text-white text-sm px-4 py-2 rounded-lg transition-colors"
+        >
+          + Import
+        </Link>
+      </div>
+
+      {/* Sport filter */}
+      <div className="flex gap-2 mb-6 flex-wrap">
+        {SPORTS.map(s => (
+          <button
+            key={s}
+            onClick={() => { setSport(s); setPage(1) }}
+            className={`capitalize text-sm px-3 py-1.5 rounded-full border transition-colors ${
+              sport === s
+                ? 'bg-blue-600 border-blue-600 text-white'
+                : 'border-gray-700 text-gray-400 hover:text-white hover:border-gray-500'
+            }`}
+          >
+            {s === 'all' ? 'All' : `${sportIcon(s)} ${s}`}
+          </button>
+        ))}
+      </div>
+
+      {/* Activity list */}
+      {isLoading ? (
+        <div className="text-gray-500 text-sm">Loading…</div>
+      ) : (
+        <div className="space-y-2">
+          {activities?.map(activity => (
+            <Link
+              key={activity.id}
+              to={`/activities/${activity.id}`}
+              className="flex items-center gap-4 bg-gray-900 hover:bg-gray-800 border border-gray-800 hover:border-gray-700 rounded-xl p-4 transition-all group"
+            >
+              {/* Sport indicator */}
+              <div
+                className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 text-lg"
+                style={{ backgroundColor: sportColor(activity.sport_type) + '22' }}
+              >
+                {sportIcon(activity.sport_type)}
+              </div>
+
+              {/* Name + date */}
+              <div className="flex-1 min-w-0">
+                <p className="font-medium text-white group-hover:text-blue-400 transition-colors truncate">
+                  {activity.name}
+                </p>
+                <p className="text-xs text-gray-500 mt-0.5">{formatDate(activity.start_time)}</p>
+              </div>
+
+              {/* Metrics */}
+              <div className="hidden sm:flex items-center gap-6 text-sm">
+                <div className="text-right">
+                  <p className="text-gray-200 font-medium">{formatDistance(activity.distance_m)}</p>
+                  <p className="text-xs text-gray-600">distance</p>
+                </div>
+                <div className="text-right">
+                  <p className="text-gray-200 font-medium">{formatDuration(activity.duration_s)}</p>
+                  <p className="text-xs text-gray-600">time</p>
+                </div>
+                <div className="text-right">
+                  <p className="text-gray-200 font-medium">{formatPace(activity.avg_speed_ms, activity.sport_type)}</p>
+                  <p className="text-xs text-gray-600">pace</p>
+                </div>
+                <div className="text-right">
+                  <p className="text-red-400 font-medium">{formatHeartRate(activity.avg_heart_rate)}</p>
+                  <p className="text-xs text-gray-600">avg HR</p>
+                </div>
+                <div className="text-right">
+                  <p className="text-gray-200 font-medium">
+                    {activity.elevation_gain_m ? `↑ ${Math.round(activity.elevation_gain_m)}m` : '--'}
+                  </p>
+                  <p className="text-xs text-gray-600">elev</p>
+                </div>
+              </div>
+
+              <span className="text-gray-700 group-hover:text-gray-400 transition-colors ml-2">›</span>
+            </Link>
+          ))}
+
+          {activities?.length === 0 && (
+            <div className="text-center py-16 text-gray-600">
+              <p className="text-4xl mb-3">🏃</p>
+              <p className="text-lg">No activities yet</p>
+              <p className="text-sm mt-1">
+                <Link to="/upload" className="text-blue-400 hover:underline">Import your Garmin or Strava data</Link> to get started
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Pagination */}
+      {activities?.length === 20 && (
+        <div className="flex justify-center gap-3 mt-6">
+          <button
+            onClick={() => setPage(p => Math.max(1, p - 1))}
+            disabled={page === 1}
+            className="px-4 py-2 text-sm bg-gray-800 text-gray-300 rounded-lg disabled:opacity-30 hover:bg-gray-700 transition-colors"
+          >
+            ← Previous
+          </button>
+          <span className="px-4 py-2 text-sm text-gray-500">Page {page}</span>
+          <button
+            onClick={() => setPage(p => p + 1)}
+            className="px-4 py-2 text-sm bg-gray-800 text-gray-300 rounded-lg hover:bg-gray-700 transition-colors"
+          >
+            Next →
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}