Merge pull request #69 from wulfland/fix-meso-navigation

Enhance MesocycleDashboard navigation by adding onNavigate prop for p…

Author: wulfland

src/App.tsx

@@ -349,7 +349,9 @@ function App() {
           )}
         </div>
 
-        {currentPage === 'mesocycles' && <MesocycleDashboard />}
+        {currentPage === 'mesocycles' && (
+          <MesocycleDashboard onNavigate={setCurrentPage} />
+        )}
 
         {currentPage === 'workout' && (
           <WorkoutSession onNavigate={setCurrentPage} />

src/components/mesocycles/MesocycleDashboard.tsx

@@ -10,12 +10,19 @@ import {
   updateMesocycle,
 } from '../../hooks/useDatabase';
 import type { Mesocycle } from '../../types/models';
+import type { Page } from '../../layouts/Layout';
 import MesocycleCard from './MesocycleCard';
 import MesocycleForm from './MesocycleForm';
 import SplitProgressTracker from './SplitProgressTracker';
 import './MesocycleDashboard.css';
 
-export default function MesocycleDashboard() {
+interface MesocycleDashboardProps {
+  onNavigate?: (page: Page) => void;
+}
+
+export default function MesocycleDashboard({
+  onNavigate,
+}: MesocycleDashboardProps) {
   const allMesocycles = useMesocycles();
   const activeMesocycle = useActiveMesocycle();
   const [showForm, setShowForm] = useState(false);
@@ -112,14 +119,10 @@ export default function MesocycleDashboard() {
   const handleStartWorkout = (splitDayId: string) => {
     // Store the selected split day ID in localStorage for the workout session to pick up
     localStorage.setItem('selectedSplitDayId', splitDayId);
-    // In a real app with routing, we would navigate to /workout
-    // For now, we'll just alert (the parent App component would handle navigation)
-    alert(
-      'Navigate to workout session with split day: ' +
-        splitDayId +
-        '\n\n' +
-        'Note: Full integration requires navigation support in the parent component.'
-    );
+    // Navigate to workout page
+    if (onNavigate) {
+      onNavigate('workout');
+    }
   };
 
   return (

src/layouts/Layout.tsx

@@ -1,7 +1,12 @@
 import type { ReactNode } from 'react';
 import './Layout.css';
 
-type Page = 'mesocycles' | 'workout' | 'exercises' | 'progress' | 'settings';
+export type Page =
+  | 'mesocycles'
+  | 'workout'
+  | 'exercises'
+  | 'progress'
+  | 'settings';
 
 interface LayoutProps {
   children: ReactNode;