-
-
-
-
Something went wrong
-
-
We're sorry - an unexpected error occurred. Please try refreshing the page.
- {process.env.NODE_ENV === 'development' && (
-
- Error details
-
-
{this.state.error && this.state.error.toString()}
-
{this.state.errorInfo?.componentStack}
-
- )}
-
-
-
-
-
-
+
+
Something went wrong
+
{this.state.error.message}
);
}
-
return this.props.children;
}
}
diff --git a/frontend/src/components/FileUpload.jsx b/frontend/src/components/FileUpload.jsx
index 85d5f10..d2bf7d7 100644
--- a/frontend/src/components/FileUpload.jsx
+++ b/frontend/src/components/FileUpload.jsx
@@ -1,10 +1,9 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState } from 'react';
+import { toast } from 'react-toastify';
const FileUpload = ({ onUpload, acceptedTypes = ['.gpx'] }) => {
const [isDragging, setIsDragging] = useState(false);
- const [previewContent, setPreviewContent] = useState(null);
- const [error, setError] = useState(null);
- const [isLoading, setIsLoading] = useState(false);
+ const [files, setFiles] = useState([]);
const handleDragOver = (e) => {
e.preventDefault();
@@ -18,66 +17,85 @@ const FileUpload = ({ onUpload, acceptedTypes = ['.gpx'] }) => {
const handleDrop = (e) => {
e.preventDefault();
setIsDragging(false);
-
- const files = e.dataTransfer.files;
- if (files.length > 0) {
- handleFile(files[0]);
- }
+ handleFiles(e.dataTransfer.files);
};
const handleFileInput = (e) => {
- const files = e.target.files;
- if (files.length > 0) {
- handleFile(files[0]);
+ handleFiles(e.target.files);
+ };
+
+ const handleFiles = (newFiles) => {
+ const validFiles = Array.from(newFiles).map(file => {
+ const fileExt = file.name.split('.').pop().toLowerCase();
+
+ // Validate file type
+ if (!acceptedTypes.includes(`.${fileExt}`)) {
+ return { file, error: 'Invalid file type', progress: 0 };
+ }
+
+ // Validate file size
+ if (file.size > 10 * 1024 * 1024) {
+ return { file, error: 'File too large', progress: 0 };
+ }
+
+ return { file, progress: 0, error: null };
+ });
+
+ setFiles(prev => [...prev, ...validFiles]);
+ uploadFiles(validFiles.filter(f => !f.error));
+ };
+
+ const uploadFiles = async (filesToUpload) => {
+ for (const fileObj of filesToUpload) {
+ try {
+ const formData = new FormData();
+ formData.append('files', fileObj.file);
+
+ const response = await fetch('/api/routes/upload', {
+ method: 'POST',
+ body: formData
+ });
+
+ if (!response.ok) throw new Error('Upload failed');
+
+ setFiles(prev => prev.map(f =>
+ f.file === fileObj.file ? { ...f, progress: 100 } : f
+ ));
+
+ toast.success(`${fileObj.file.name} uploaded successfully`);
+
+ if (onUpload) onUpload(fileObj.file);
+
+ } catch (err) {
+ setFiles(prev => prev.map(f =>
+ f.file === fileObj.file ? { ...f, error: err.message } : f
+ ));
+ toast.error(`${fileObj.file.name} upload failed: ${err.message}`);
+ }
}
};
- const handleFile = async (file) => {
- setError(null);
-
- // Validate file type
- const fileExt = file.name.split('.').pop().toLowerCase();
- if (!acceptedTypes.includes(`.${fileExt}`)) {
- setError(`Invalid file type. Supported types: ${acceptedTypes.join(', ')}`);
- return;
- }
-
- // Validate file size (max 10MB)
- if (file.size > 10 * 1024 * 1024) {
- setError('File size exceeds 10MB limit');
- return;
- }
-
+ const parseGPXMetadata = (content) => {
try {
- setIsLoading(true);
-
- // Preview GPX content
- if (fileExt === 'gpx') {
- const content = await file.text();
- setPreviewContent(content);
- } else {
- setPreviewContent(null);
- }
-
- // Pass file to parent component for upload
- if (onUpload) {
- onUpload(file);
- }
- } catch (err) {
- console.error('File processing error:', err);
- setError('Failed to process file');
- } finally {
- setIsLoading(false);
+ const parser = new DOMParser();
+ const xmlDoc = parser.parseFromString(content, "text/xml");
+ return {
+ name: xmlDoc.getElementsByTagName('name')[0]?.textContent || 'Unnamed Route',
+ distance: xmlDoc.getElementsByTagName('distance')[0]?.textContent || 'N/A',
+ elevation: xmlDoc.getElementsByTagName('ele')[0]?.textContent || 'N/A'
+ };
+ } catch {
+ return null;
}
};
- const clearPreview = () => {
- setPreviewContent(null);
+ const removeFile = (fileName) => {
+ setFiles(prev => prev.filter(f => f.file.name !== fileName));
};
return (
-
-
+
{
className="hidden"
accept={acceptedTypes.join(',')}
onChange={handleFileInput}
+ multiple
/>
-
- {isLoading ? (
- <>
-
-
Processing file...
-
- ) : (
- <>
-
-
- Click to upload or drag and drop
-
-
- {acceptedTypes.join(', ')} files, max 10MB
-
-
- )}
+
+
+ Click to upload or drag and drop
+
+
+ {acceptedTypes.join(', ')} files, max 10MB each
+
-
- {error && (
-
- {error}
-
- )}
-
- {previewContent && (
-
-
-
File Preview
-
-
-
+
+ {files.length > 0 && (
+
+ {files.map((fileObj, index) => (
+
+
+
+ {fileObj.file.name}
+ {fileObj.error && (
+ - {fileObj.error}
+ )}
+
+
+
+ {!fileObj.error && (
+
+ )}
+
+ ))}
)}
diff --git a/frontend/src/components/GarminSync.jsx b/frontend/src/components/GarminSync.jsx
index d705060..bce8814 100644
--- a/frontend/src/components/GarminSync.jsx
+++ b/frontend/src/components/GarminSync.jsx
@@ -9,10 +9,16 @@ const GarminSync = () => {
setSyncing(true);
setError(null);
try {
+ // Check API key configuration
+ if (!process.env.REACT_APP_API_KEY) {
+ throw new Error('API key missing - check environment configuration');
+ }
+
const response = await fetch('/api/workouts/sync', {
method: 'POST',
headers: {
- 'X-API-Key': process.env.REACT_APP_API_KEY
+ 'X-API-Key': process.env.REACT_APP_API_KEY,
+ 'Content-Type': 'application/json'
}
});
@@ -105,10 +111,28 @@ const GarminSync = () => {
)}
- {syncStatus.error_message && (
+
Last Updated:
+
+ {syncStatus.last_sync_time
+ ? new Date(syncStatus.last_sync_time).toLocaleTimeString([], {
+ hour: '2-digit', minute: '2-digit', hour12: true
+ })
+ : 'Never'}
+
+
+ {syncStatus.activities_synced > 0 && (
<>
-
Error:
-
{syncStatus.error_message}
+
New Activities:
+
{syncStatus.activities_synced}
+
+ )}
+
+ {syncStatus.warnings?.length > 0 && (
+ <>
+
Warnings:
+
+ {syncStatus.warnings.join(', ')}
+
)}
diff --git a/frontend/src/components/LoadingSpinner.jsx b/frontend/src/components/LoadingSpinner.jsx
new file mode 100644
index 0000000..f5e6a47
--- /dev/null
+++ b/frontend/src/components/LoadingSpinner.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const LoadingSpinner = () => (
+
+);
+
+export default LoadingSpinner;
\ No newline at end of file
diff --git a/frontend/src/components/Navigation.jsx b/frontend/src/components/Navigation.jsx
new file mode 100644
index 0000000..de87fbe
--- /dev/null
+++ b/frontend/src/components/Navigation.jsx
@@ -0,0 +1,38 @@
+import { Link } from 'react-router-dom';
+
+const Navigation = () => {
+ return (
+
+ );
+};
+
+export default Navigation;
\ No newline at end of file
diff --git a/frontend/src/components/WorkoutAnalysis.jsx b/frontend/src/components/WorkoutAnalysis.jsx
index d381618..027c75f 100644
--- a/frontend/src/components/WorkoutAnalysis.jsx
+++ b/frontend/src/components/WorkoutAnalysis.jsx
@@ -157,6 +157,45 @@ const WorkoutAnalysis = ({ workout, analysis }) => {
)}
);
+
+ useEffect(() => {
+ const fetchMetrics = async () => {
+ try {
+ const response = await fetch(`/api/workouts/${workout.id}/metrics`);
+ const data = await response.json();
+ setMetrics(data);
+ } catch (err) {
+ console.error('Error fetching workout metrics:', err);
+ } finally {
+ setLoadingMetrics(false);
+ }
+ };
+
+ if (workout?.id) {
+ fetchMetrics();
+ }
+ }, [workout]);
+
+ return (
+
+ {/* Workout Summary */}
+
+
+ {workout.activity_type || 'Cycling'} - {new Date(workout.start_time).toLocaleDateString()}
+
+
+
+ {/* Existing metric cards */}
+
+
+
+ {/* Metrics Charts */}
+ {/* Existing chart implementation */}
+
+ {/* Analysis Content */}
+ {/* Existing analysis content */}
+
+ );
};
export default WorkoutAnalysis;
\ No newline at end of file
diff --git a/frontend/src/components/analysis/WorkoutAnalysis.jsx b/frontend/src/components/analysis/WorkoutAnalysis.jsx
new file mode 100644
index 0000000..f767521
--- /dev/null
+++ b/frontend/src/components/analysis/WorkoutAnalysis.jsx
@@ -0,0 +1,97 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import { useAuth } from '../../context/AuthContext';
+import WorkoutMetrics from './WorkoutMetrics';
+
+const WorkoutAnalysis = ({ workoutId }) => {
+ const { apiKey } = useAuth();
+ const [analysis, setAnalysis] = useState(null);
+ const [isApproving, setIsApproving] = useState(false);
+
+ useEffect(() => {
+ const fetchAnalysis = async () => {
+ try {
+ const response = await axios.get(`/api/analyses/${workoutId}`, {
+ headers: { 'X-API-Key': apiKey }
+ });
+ setAnalysis(response.data);
+ } catch (error) {
+ console.error('Error fetching analysis:', error);
+ }
+ };
+
+ if (workoutId) {
+ fetchAnalysis();
+ }
+ }, [workoutId, apiKey]);
+
+ const handleApprove = async () => {
+ setIsApproving(true);
+ try {
+ await axios.post(`/api/analyses/${analysis.id}/approve`, {}, {
+ headers: { 'X-API-Key': apiKey }
+ });
+ // Refresh analysis data
+ const response = await axios.get(`/api/analyses/${analysis.id}`, {
+ headers: { 'X-API-Key': apiKey }
+ });
+ setAnalysis(response.data);
+ } catch (error) {
+ console.error('Approval failed:', error);
+ }
+ setIsApproving(false);
+ };
+
+ if (!analysis) return
Loading analysis...
;
+
+ return (
+
+
+ {analysis.workout.activity_type} Analysis
+
+
+
+
+
+
AI Feedback
+
+
{analysis.jsonb_feedback.summary}
+
+
+
Strengths
+
+ {analysis.jsonb_feedback.strengths.map((s, i) => (
+ - {s}
+ ))}
+
+
+
+
Improvements
+
+ {analysis.jsonb_feedback.areas_for_improvement.map((s, i) => (
+ - {s}
+ ))}
+
+
+
+
+
+
+ {analysis.suggestions?.length > 0 && !analysis.approved && (
+
+
+
+ )}
+
+
+
+ );
+};
+
+export default WorkoutAnalysis;
\ No newline at end of file
diff --git a/frontend/src/components/analysis/WorkoutCharts.jsx b/frontend/src/components/analysis/WorkoutCharts.jsx
new file mode 100644
index 0000000..5ae4487
--- /dev/null
+++ b/frontend/src/components/analysis/WorkoutCharts.jsx
@@ -0,0 +1,76 @@
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+
+const WorkoutCharts = ({ metrics }) => {
+ if (!metrics?.time_series?.length) return null;
+
+ // Process metrics data for charting
+ const chartData = metrics.time_series.map(entry => ({
+ time: new Date(entry.start_time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+ power: entry.avg_power,
+ heartRate: entry.avg_heart_rate,
+ cadence: entry.avg_cadence
+ }));
+
+ return (
+
+
+
Power Output
+
+
+
+
+
+
+
+
+
+
+
+
+
Heart Rate
+
+
+
+
+
+
+
+
+
+
+
+
+
Cadence
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default WorkoutCharts;
\ No newline at end of file
diff --git a/frontend/src/components/analysis/WorkoutMetrics.jsx b/frontend/src/components/analysis/WorkoutMetrics.jsx
new file mode 100644
index 0000000..b9b87fd
--- /dev/null
+++ b/frontend/src/components/analysis/WorkoutMetrics.jsx
@@ -0,0 +1,43 @@
+const WorkoutMetrics = ({ workout }) => {
+ const formatDuration = (seconds) => {
+ const mins = Math.floor(seconds / 60);
+ return `${mins} minutes`;
+ };
+
+ return (
+
+
+
Duration
+
+ {formatDuration(workout.duration_seconds)}
+
+
+
+
Distance
+
+ {(workout.distance_m / 1000).toFixed(1)} km
+
+
+
+
Avg Power
+
+ {workout.avg_power?.toFixed(0) || '-'} W
+
+
+
+
Avg HR
+
+ {workout.avg_hr?.toFixed(0) || '-'} bpm
+
+
+
+
Elevation
+
+ {workout.elevation_gain_m?.toFixed(0) || '-'} m
+
+
+
+ );
+};
+
+export default WorkoutMetrics;
\ No newline at end of file
diff --git a/frontend/src/components/garmin/GarminSync.jsx b/frontend/src/components/garmin/GarminSync.jsx
new file mode 100644
index 0000000..ce2ec09
--- /dev/null
+++ b/frontend/src/components/garmin/GarminSync.jsx
@@ -0,0 +1,86 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import { formatDistanceToNow } from 'date-fns';
+
+const GarminSync = ({ apiKey }) => {
+ const [syncStatus, setSyncStatus] = useState(null);
+ const [isSyncing, setIsSyncing] = useState(false);
+ const [error, setError] = useState('');
+
+ const fetchSyncStatus = async () => {
+ try {
+ const response = await axios.get('/api/workouts/sync-status', {
+ headers: { 'X-API-Key': apiKey }
+ });
+ setSyncStatus(response.data);
+ } catch (err) {
+ setError('Failed to fetch sync status');
+ }
+ };
+
+ const triggerSync = async () => {
+ setIsSyncing(true);
+ setError('');
+ try {
+ await axios.post('/api/workouts/sync', {}, {
+ headers: { 'X-API-Key': apiKey }
+ });
+ // Poll status every 2 seconds
+ const interval = setInterval(fetchSyncStatus, 2000);
+ setTimeout(() => {
+ clearInterval(interval);
+ setIsSyncing(false);
+ }, 30000);
+ } catch (err) {
+ setError('Failed to start sync');
+ setIsSyncing(false);
+ }
+ };
+
+ useEffect(() => {
+ fetchSyncStatus();
+ }, []);
+
+ return (
+
+
+
Garmin Connect Sync
+
+
+
+ {error && (
+
{error}
+ )}
+
+ {syncStatus && (
+
+
+ Last sync: {syncStatus.last_sync_time ?
+ formatDistanceToNow(new Date(syncStatus.last_sync_time)) + ' ago' : 'Never'}
+
+
+ Status: {syncStatus.status}
+
+ {syncStatus.activities_synced > 0 && (
+
+ Activities synced: {syncStatus.activities_synced}
+
+ )}
+ {syncStatus.error_message && (
+
{syncStatus.error_message}
+ )}
+
+ )}
+
+ );
+};
+
+export default GarminSync;
\ No newline at end of file
diff --git a/frontend/src/components/plans/PlanTimeline.jsx b/frontend/src/components/plans/PlanTimeline.jsx
new file mode 100644
index 0000000..bfbe018
--- /dev/null
+++ b/frontend/src/components/plans/PlanTimeline.jsx
@@ -0,0 +1,93 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import { useAuth } from '../../context/AuthContext';
+import { formatDistanceToNow } from 'date-fns';
+
+const PlanTimeline = ({ planId }) => {
+ const { apiKey } = useAuth();
+ const [evolution, setEvolution] = useState([]);
+ const [selectedVersion, setSelectedVersion] = useState(null);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ const fetchEvolution = async () => {
+ try {
+ const response = await axios.get(`/api/plans/${planId}/evolution`, {
+ headers: { 'X-API-Key': apiKey }
+ });
+ setEvolution(response.data.evolution_history);
+ setSelectedVersion(response.data.current_version);
+ } catch (error) {
+ console.error('Error fetching plan evolution:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ if (planId) {
+ fetchEvolution();
+ }
+ }, [planId, apiKey]);
+
+ if (loading) return
Loading plan history...
;
+
+ return (
+
+
Plan Evolution
+
+
+
+ {evolution.map((version, idx) => (
+
setSelectedVersion(version)}
+ className={`p-4 border-l-4 cursor-pointer transition-colors ${
+ selectedVersion?.version === version.version
+ ? 'border-blue-500 bg-blue-50'
+ : 'border-gray-200 hover:bg-gray-50'
+ }`}
+ >
+
+ v{version.version}
+
+ {formatDistanceToNow(new Date(version.created_at))} ago
+
+
+
+ {version.trigger || 'Initial version'}
+
+
+ ))}
+
+
+ {selectedVersion && (
+
+
+ Version {selectedVersion.version} Details
+
+
+
+ Created:{' '}
+ {new Date(selectedVersion.created_at).toLocaleString()}
+
+ {selectedVersion.changes_summary && (
+
+ Changes:{' '}
+ {selectedVersion.changes_summary}
+
+ )}
+ {selectedVersion.parent_plan_id && (
+
+ Parent Version:{' '}
+ v{selectedVersion.parent_plan_id}
+
+ )}
+
+
+ )}
+
+
+ );
+};
+
+export default PlanTimeline;
\ No newline at end of file
diff --git a/frontend/src/context/AuthContext.jsx b/frontend/src/context/AuthContext.jsx
new file mode 100644
index 0000000..ac658f4
--- /dev/null
+++ b/frontend/src/context/AuthContext.jsx
@@ -0,0 +1,51 @@
+import { createContext, useContext, useState } from 'react';
+import { toast } from 'react-toastify';
+
+const AuthContext = createContext();
+
+export const AuthProvider = ({ children }) => {
+ const [apiKey] = useState(process.env.REACT_APP_API_KEY);
+ const [loading, setLoading] = useState(false);
+
+ const handleError = (error) => {
+ toast.error(error.message || 'API request failed');
+ throw error;
+ };
+
+ const authFetch = async (url, options = {}) => {
+ setLoading(true);
+ try {
+ const response = await fetch(url, {
+ ...options,
+ headers: {
+ ...options.headers,
+ 'X-API-Key': apiKey
+ }
+ });
+
+ if (!response.ok) {
+ throw new Error(`Request failed: ${response.status} ${response.statusText}`);
+ }
+
+ return await response.json();
+ } catch (error) {
+ handleError(error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useAuth = () => {
+ const context = useContext(AuthContext);
+ if (!context) {
+ throw new Error('useAuth must be used within an AuthProvider');
+ }
+ return context;
+};
\ No newline at end of file
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index 0ceb674..dd37015 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -1,141 +1,169 @@
-import { useEffect, useState } from 'react'
-import { Link } from 'react-router-dom'
+import { useEffect, useState } from 'react';
+import GarminSync from '../components/garmin/GarminSync';
+import WorkoutChart from '../components/analysis/WorkoutCharts';
+import PlanTimeline from '../components/plans/PlanTimeline';
+import { useAuth } from '../context/AuthContext';
+import LoadingSpinner from '../components/LoadingSpinner';
const Dashboard = () => {
- const [dashboardData, setDashboardData] = useState(null)
- const [loading, setLoading] = useState(true)
- const [error, setError] = useState(null)
+ const { apiKey, loading: apiLoading } = useAuth();
+ const [recentWorkouts, setRecentWorkouts] = useState([]);
+ const [currentPlan, setCurrentPlan] = useState(null);
+ const [stats, setStats] = useState({ totalWorkouts: 0, totalDistance: 0 });
+ const [healthStatus, setHealthStatus] = useState(null);
+ const [localLoading, setLocalLoading] = useState(true);
+ const [error, setError] = useState('');
useEffect(() => {
const fetchDashboardData = async () => {
try {
- const response = await fetch('/api/dashboard', {
- headers: {
- 'X-API-Key': process.env.REACT_APP_API_KEY
- }
- })
+ const [workoutsRes, planRes, statsRes, healthRes] = await Promise.all([
+ fetch('/api/workouts?limit=3', {
+ headers: { 'X-API-Key': apiKey }
+ }),
+ fetch('/api/plans/active', {
+ headers: { 'X-API-Key': apiKey }
+ }),
+ fetch('/api/stats', {
+ headers: { 'X-API-Key': apiKey }
+ }),
+ fetch('/api/health', {
+ headers: { 'X-API-Key': apiKey }
+ })
+ ]);
+
+ const errors = [];
+ if (!workoutsRes.ok) errors.push('Failed to fetch workouts');
+ if (!planRes.ok) errors.push('Failed to fetch plan');
+ if (!statsRes.ok) errors.push('Failed to fetch stats');
+ if (!healthRes.ok) errors.push('Failed to fetch health status');
- if (!response.ok) {
- throw new Error(`Dashboard load failed: ${response.statusText}`)
- }
-
- const data = await response.json()
- setDashboardData(data)
- setError(null)
+ if (errors.length > 0) throw new Error(errors.join(', '));
+
+ const [workoutsData, planData, statsData, healthData] = await Promise.all([
+ workoutsRes.json(),
+ planRes.json(),
+ statsRes.json(),
+ healthRes.json()
+ ]);
+
+ setRecentWorkouts(workoutsData.workouts || []);
+ setCurrentPlan(planData);
+ setStats(statsData.workouts || { totalWorkouts: 0, totalDistance: 0 });
+ setHealthStatus(healthData);
} catch (err) {
- console.error('Dashboard error:', err)
- setError(err.message)
+ setError(err.message);
} finally {
- setLoading(false)
+ setLocalLoading(false);
}
- }
+ };
- fetchDashboardData()
- }, [])
+ fetchDashboardData();
+ }, [apiKey]);
- if (loading) {
- return (
-
-
-
-
Loading your training dashboard...
-
-
- )
- }
+ if (localLoading || apiLoading) return
;
+ if (error) return
{error}
;
- if (error) {
- return (
-
-
-
Error loading dashboard
-
{error}
-
-
-
- )
- }
+ // Calculate total distance in km
+ const totalDistanceKm = (stats.totalDistance / 1000).toFixed(0);
return (
-
-
- {/* Metrics Overview */}
-
-
-
Weekly Volume
-
- {dashboardData.metrics.weekly_volume?.toFixed(1) || 0} hours
-
+
+
Training Dashboard
+
+
+
+
+
+ {/* Stats Summary Cards */}
+
+
+
Total Workouts
+
{stats.totalWorkouts}
+
+
+
Total Distance
+
{totalDistanceKm} km
+
+
+
Current Plan
+
+ {currentPlan ? `v${currentPlan.version}` : 'None'}
+
+
+
+
System Status
+
+
+
+ {healthStatus?.status || 'unknown'}
+
-
-
Plan Progress
-
- {dashboardData.metrics.plan_progress || 0}%
-
+
+
+
+
+
+
+
Performance Metrics
+
+
+
+
+
Recent Activities
+ {recentWorkouts.length > 0 ? (
+
+ {recentWorkouts.map(workout => (
+
+
+
+
{new Date(workout.start_time).toLocaleDateString()}
+
{workout.activity_type}
+
+
+
{(workout.distance_m / 1000).toFixed(1)} km
+
{Math.round(workout.duration_seconds / 60)} mins
+
+
+
+ ))}
+
+ ) : (
+
No recent activities found
+ )}
- {/* Recent Workouts */}
-
-
Recent Workouts
-
- {dashboardData.recent_workouts.map(workout => (
-
+
+
+
Current Plan
+ {currentPlan ? (
+
+ ) : (
+
No active training plan
+ )}
+
+
+
+
Upcoming Workouts
+ {currentPlan?.jsonb_plan.weeks[0]?.workouts.map((workout, index) => (
+
-
-
{new Date(workout.start_time).toLocaleDateString()}
-
{workout.activity_type}
-
-
-
- {(workout.distance_m / 1000).toFixed(1)} km
-
-
- {Math.floor(workout.duration_seconds / 60)} minutes
-
-
+
{workout.day}
+
+ {workout.type.replace('_', ' ')}
+
+
{workout.description}
))}
-
- {/* Current Plan */}
- {dashboardData.current_plan && (
-
-
-
Current Training Plan
-
- View Details →
-
-
-
-
-
{dashboardData.current_plan.name}
-
- {dashboardData.current_plan.duration_weeks} week plan
-
-
-
-
-
- )}
- )
-}
+ );
+};
-export default Dashboard
\ No newline at end of file
+export default Dashboard;
\ No newline at end of file
diff --git a/frontend/src/pages/Plans.jsx b/frontend/src/pages/Plans.jsx
new file mode 100644
index 0000000..0f047ce
--- /dev/null
+++ b/frontend/src/pages/Plans.jsx
@@ -0,0 +1,66 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import { useAuth } from '../context/AuthContext';
+import PlanTimeline from '../components/plans/PlanTimeline';
+
+const Plans = () => {
+ const { apiKey } = useAuth();
+ const [plans, setPlans] = useState([]);
+ const [selectedPlan, setSelectedPlan] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState('');
+
+ useEffect(() => {
+ const fetchPlans = async () => {
+ try {
+ const response = await axios.get('/api/plans', {
+ headers: { 'X-API-Key': apiKey }
+ });
+ setPlans(response.data);
+ if (response.data.length > 0) {
+ setSelectedPlan(response.data[0].id);
+ }
+ } catch (err) {
+ setError('Failed to load training plans');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchPlans();
+ }, [apiKey]);
+
+ if (loading) return
Loading plans...
;
+ if (error) return
{error}
;
+
+ return (
+
+
Training Plans
+
+
+
+ {plans.map(plan => (
+
setSelectedPlan(plan.id)}
+ className={`p-4 bg-white rounded-lg shadow-md cursor-pointer ${
+ selectedPlan === plan.id ? 'ring-2 ring-blue-500' : ''
+ }`}
+ >
+
Plan v{plan.version}
+
+ Created {new Date(plan.created_at).toLocaleDateString()}
+
+
+ ))}
+
+
+
+
+
+ );
+};
+
+export default Plans;
\ No newline at end of file
diff --git a/frontend/src/pages/RoutesPage.jsx b/frontend/src/pages/RoutesPage.jsx
new file mode 100644
index 0000000..ed563af
--- /dev/null
+++ b/frontend/src/pages/RoutesPage.jsx
@@ -0,0 +1,16 @@
+import { useAuth } from '../context/AuthContext';
+
+const RoutesPage = () => {
+ const { apiKey } = useAuth();
+
+ return (
+
+
Routes
+
+
Route management will be displayed here
+
+
+ );
+};
+
+export default RoutesPage;
\ No newline at end of file
diff --git a/frontend/src/pages/Workouts.jsx b/frontend/src/pages/Workouts.jsx
new file mode 100644
index 0000000..33980dc
--- /dev/null
+++ b/frontend/src/pages/Workouts.jsx
@@ -0,0 +1,67 @@
+import { useState, useEffect } from 'react';
+import { useAuth } from '../context/AuthContext';
+import axios from 'axios';
+import WorkoutAnalysis from '../components/analysis/WorkoutAnalysis';
+
+const Workouts = () => {
+ const { apiKey } = useAuth();
+ const [workouts, setWorkouts] = useState([]);
+ const [selectedWorkout, setSelectedWorkout] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState('');
+
+ useEffect(() => {
+ const fetchWorkouts = async () => {
+ try {
+ const response = await axios.get('/api/workouts', {
+ headers: { 'X-API-Key': apiKey }
+ });
+ setWorkouts(response.data.workouts);
+ } catch (err) {
+ setError('Failed to load workouts');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchWorkouts();
+ }, [apiKey]);
+
+ if (loading) return
Loading workouts...
;
+ if (error) return
{error}
;
+
+ return (
+
+
Workouts
+
+
+
+ {workouts.map(workout => (
+
setSelectedWorkout(workout)}
+ className={`p-4 bg-white rounded-lg shadow-md cursor-pointer ${
+ selectedWorkout?.id === workout.id ? 'ring-2 ring-blue-500' : ''
+ }`}
+ >
+
+ {new Date(workout.start_time).toLocaleDateString()} - {workout.activity_type}
+
+
+ Duration: {Math.round(workout.duration_seconds / 60)}min
+
+
+ ))}
+
+
+ {selectedWorkout && (
+
+
+
+ )}
+
+
+ );
+};
+
+export default Workouts;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..080970e
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,59 @@
+{
+ "name": "AICyclingCoach",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "dependencies": {
+ "react-toastify": "^11.0.5"
+ }
+ },
+ "node_modules/clsx": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+ "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/react": {
+ "version": "19.1.1",
+ "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
+ "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
+ "peer": true,
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/react-dom": {
+ "version": "19.1.1",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
+ "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
+ "peer": true,
+ "dependencies": {
+ "scheduler": "^0.26.0"
+ },
+ "peerDependencies": {
+ "react": "^19.1.1"
+ }
+ },
+ "node_modules/react-toastify": {
+ "version": "11.0.5",
+ "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
+ "integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
+ "dependencies": {
+ "clsx": "^2.1.1"
+ },
+ "peerDependencies": {
+ "react": "^18 || ^19",
+ "react-dom": "^18 || ^19"
+ }
+ },
+ "node_modules/scheduler": {
+ "version": "0.26.0",
+ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
+ "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
+ "peer": true
+ }
+ }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..902955e
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+ "dependencies": {
+ "react-toastify": "^11.0.5"
+ }
+}