Initial Commit
This commit is contained in:
@@ -0,0 +1,197 @@
|
||||
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 api from '../utils/api'
|
||||
import StatCard from '../components/ui/StatCard'
|
||||
import {
|
||||
formatDuration, formatDistance, formatPace, formatHeartRate,
|
||||
formatDate, sportIcon, formatSleep,
|
||||
} from '../utils/format'
|
||||
|
||||
function WeeklyChart({ activities }) {
|
||||
if (!activities?.length) return null
|
||||
|
||||
// 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++
|
||||
})
|
||||
|
||||
const data = Object.values(weeks).slice(-8)
|
||||
|
||||
return (
|
||||
<ResponsiveContainer width="100%" height={140}>
|
||||
<BarChart data={data} margin={{ top: 4, right: 4, bottom: 4, left: 0 }} barSize={20}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1f2937" vertical={false} />
|
||||
<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']}
|
||||
/>
|
||||
<Bar dataKey="km" fill="#3b82f6" radius={[3, 3, 0, 0]} isAnimationActive={false} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const { data: recentActivities } = useQuery({
|
||||
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),
|
||||
})
|
||||
|
||||
const { data: healthSummary } = useQuery({
|
||||
queryKey: ['health-summary'],
|
||||
queryFn: () => api.get('/health-metrics/summary').then(r => r.data),
|
||||
})
|
||||
|
||||
const { data: records } = useQuery({
|
||||
queryKey: ['records-running'],
|
||||
queryFn: () => api.get('/records/', { params: { sport_type: 'running' } }).then(r => r.data),
|
||||
})
|
||||
|
||||
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>
|
||||
</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="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>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-gray-600">No health data. Import a Garmin export.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent activities */}
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-sm font-medium text-gray-300">Recent activities</h3>
|
||||
<Link to="/activities" className="text-xs text-blue-400 hover:underline">View all →</Link>
|
||||
</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"
|
||||
>
|
||||
<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>
|
||||
</Link>
|
||||
))}
|
||||
{!recentActivities?.length && (
|
||||
<p className="text-gray-600 text-sm text-center py-8">
|
||||
No activities yet — <Link to="/upload" className="text-blue-400 hover:underline">import some data</Link>
|
||||
</p>
|
||||
)}
|
||||
</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">
|
||||
<h3 className="text-sm font-medium text-gray-300">Running PRs</h3>
|
||||
<Link to="/records" className="text-xs text-blue-400 hover:underline">View all →</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
|
||||
{records.slice(0, 5).map(rec => (
|
||||
<div key={rec.id} className="bg-gray-800/60 rounded-lg p-3 text-center">
|
||||
<p className="text-xs text-gray-500 mb-1">{rec.distance_label}</p>
|
||||
<p className="font-mono font-semibold text-yellow-400">{formatDuration(rec.duration_s)}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user