feat: implement data loading and management for training planning

- Added functions to load training plan templates and active training groups, enhancing data retrieval for the TrainingPlanningPage.
- Implemented error handling and loading states to improve user experience during data fetching.
- Refactored loadUnits function to dynamically fetch training units based on selected group and date range, supporting better planning capabilities.

frontend/src/pages/TrainingPlanningPage.jsx

@@ -122,6 +122,58 @@ function TrainingPlanningPage() {
     sections: [defaultSection()]
   })
 
+  const loadPlanTemplates = useCallback(async () => {
+    try {
+      const tpl = await api.listTrainingPlanTemplates()
+      setPlanTemplates(tpl)
+    } catch (e) {
+      console.error('Vorlagen laden:', e)
+    }
+  }, [])
+
+  const loadData = async () => {
+    try {
+      const groupsData = await api.listTrainingGroups({ status: 'active' })
+      setGroups(groupsData)
+      await loadPlanTemplates()
+
+      if (groupsData.length > 0) {
+        const ownGroup = groupsData.find((g) => g.trainer_id === user?.id)
+        if (ownGroup) {
+          setSelectedGroupId(ownGroup.id)
+        } else if (groupsData.length === 1) {
+          setSelectedGroupId(groupsData[0].id)
+        }
+      }
+    } catch (err) {
+      console.error('Failed to load data:', err)
+      alert('Fehler beim Laden: ' + err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const loadUnits = useCallback(async () => {
+    if (!selectedGroupId) return
+    let start = startDate
+    let end = endDate
+    if (planView === 'calendar') {
+      const r = getCalendarGridRange(calendarMonthStr)
+      start = r.gridStart
+      end = r.gridEnd
+    }
+    try {
+      const unitsData = await api.listTrainingUnits({
+        group_id: selectedGroupId,
+        start_date: start,
+        end_date: end
+      })
+      setUnits(unitsData)
+    } catch (err) {
+      console.error('Failed to load units:', err)
+    }
+  }, [selectedGroupId, startDate, endDate, planView, calendarMonthStr])
+
   useEffect(() => {
     loadData()
   }, [])
@@ -263,58 +315,6 @@ function TrainingPlanningPage() {
     return { fpTitle, slotBit, fpId: unit.origin_framework_program_id }
   }
 
-  const loadPlanTemplates = useCallback(async () => {
-    try {
-      const tpl = await api.listTrainingPlanTemplates()
-      setPlanTemplates(tpl)
-    } catch (e) {
-      console.error('Vorlagen laden:', e)
-    }
-  }, [])
-
-  const loadData = async () => {
-    try {
-      const groupsData = await api.listTrainingGroups({ status: 'active' })
-      setGroups(groupsData)
-      await loadPlanTemplates()
-
-      if (groupsData.length > 0) {
-        const ownGroup = groupsData.find((g) => g.trainer_id === user?.id)
-        if (ownGroup) {
-          setSelectedGroupId(ownGroup.id)
-        } else if (groupsData.length === 1) {
-          setSelectedGroupId(groupsData[0].id)
-        }
-      }
-    } catch (err) {
-      console.error('Failed to load data:', err)
-      alert('Fehler beim Laden: ' + err.message)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const loadUnits = useCallback(async () => {
-    if (!selectedGroupId) return
-    let start = startDate
-    let end = endDate
-    if (planView === 'calendar') {
-      const r = getCalendarGridRange(calendarMonthStr)
-      start = r.gridStart
-      end = r.gridEnd
-    }
-    try {
-      const unitsData = await api.listTrainingUnits({
-        group_id: selectedGroupId,
-        start_date: start,
-        end_date: end
-      })
-      setUnits(unitsData)
-    } catch (err) {
-      console.error('Failed to load units:', err)
-    }
-  }, [selectedGroupId, startDate, endDate, planView, calendarMonthStr])
-
   const handleQuickCreate = async () => {
     if (!selectedGroupId) {
       alert('Bitte wähle zuerst eine Trainingsgruppe')