fix: Frontend API Calls & Field Names für renamed tables

- Updated api.js function names:
  - listTrainingStyles → listStyleDirections
  - createTrainingStyle → createStyleDirection
  - updateTrainingStyle → updateStyleDirection
  - deleteTrainingStyle → deleteStyleDirection
  - listTrainingStyleTargetGroups → listStyleDirectionTargetGroups
  - createTrainingStyleTargetGroup → createStyleDirectionTargetGroup
  - updateTrainingStyleTargetGroup → updateStyleDirectionTargetGroup
  - deleteTrainingStyleTargetGroup → deleteStyleDirectionTargetGroup
  - getTrainingStylesHierarchy → getStyleDirectionsHierarchy
- Updated AdminCatalogsPage.jsx:
  - loadData() uses renamed API functions
  - CRUD functions renamed (createStyleDirection, etc.)
  - Matrix uses style_direction_id parameter
  - Hierarchy renders style_directions array
- Fixes data binding between frontend and backend after table rename

version: 0.4.0 (frontend)
module: AdminCatalogsPage 2.2.0

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

frontend/src/pages/AdminCatalogsPage.jsx

@@ -61,7 +61,7 @@ export default function AdminCatalogsPage() {
         const data = await api.listFocusAreas()
         setFocusAreas(data)
       } else if (activeTab === 'training-styles') {
-        const data = await api.listTrainingStyles()
+        const data = await api.listStyleDirections()
         setTrainingStyles(data)
       } else if (activeTab === 'training-characters') {
         const data = await api.listTrainingCharacters()
@@ -85,13 +85,13 @@ export default function AdminCatalogsPage() {
         setProfiles(profs)
         setFocusAreas(areas)
       } else if (activeTab === 'hierarchy') {
-        const data = await api.getTrainingStylesHierarchy()
+        const data = await api.getStyleDirectionsHierarchy()
         setHierarchyData(data)
       } else if (activeTab === 'target-groups-matrix') {
         const [styles, groups, assigns] = await Promise.all([
-          api.listTrainingStyles(),
+          api.listStyleDirections(),
           api.listTargetGroups(),
-          api.listTrainingStyleTargetGroups()
+          api.listStyleDirectionTargetGroups()
         ])
         setTrainingStyles(styles)
         setTargetGroups(groups)
@@ -135,10 +135,10 @@ export default function AdminCatalogsPage() {
     }
   }
 
-  // Training Styles
-  async function createTrainingStyle() {
+  // Style Directions (formerly Training Styles)
+  async function createStyleDirection() {
     try {
-      await api.createTrainingStyle(newTS)
+      await api.createStyleDirection(newTS)
       setNewTS({ name: '', description: '', parent_style_id: null })
       loadData()
     } catch (e) {
@@ -146,9 +146,9 @@ export default function AdminCatalogsPage() {
     }
   }
 
-  async function updateTrainingStyle(id, data) {
+  async function updateStyleDirection(id, data) {
     try {
-      await api.updateTrainingStyle(id, data)
+      await api.updateStyleDirection(id, data)
       setEditingTS(null)
       loadData()
     } catch (e) {
@@ -156,10 +156,10 @@ export default function AdminCatalogsPage() {
     }
   }
 
-  async function deleteTrainingStyle(id) {
-    if (!confirm('Trainingsstil wirklich löschen?')) return
+  async function deleteStyleDirection(id) {
+    if (!confirm('Stilrichtung wirklich löschen?')) return
     try {
-      await api.deleteTrainingStyle(id)
+      await api.deleteStyleDirection(id)
       loadData()
     } catch (e) {
       setError(e.message)
@@ -1046,14 +1046,14 @@ export default function AdminCatalogsPage() {
                     <div>
                       <h3 style={{ margin: 0 }}>{fa.name}</h3>
                       <p style={{ margin: '4px 0 0 0', fontSize: '14px', color: 'var(--text2)' }}>
-                        {fa.training_styles?.length || 0} Trainingsstil(e)
+                        {fa.style_directions?.length || 0} Trainingsstil(e)
                       </p>
                     </div>
                   </div>
 
-                  {expandedNodes.has(`fa-${fa.id}`) && fa.training_styles && fa.training_styles.length > 0 && (
+                  {expandedNodes.has(`fa-${fa.id}`) && fa.style_directions && fa.style_directions.length > 0 && (
                     <div style={{ marginLeft: '40px', marginTop: '12px', borderLeft: '2px solid var(--border)', paddingLeft: '16px' }}>
-                      {fa.training_styles.map(ts => (
+                      {fa.style_directions.map(ts => (
                         <div key={ts.id} style={{ marginBottom: '12px' }}>
                           <div
                             style={{
@@ -1175,7 +1175,7 @@ export default function AdminCatalogsPage() {
                           </td>
                           {targetGroups.map(tg => {
                             const assignment = assignments.find(
-                              a => a.training_style_id === ts.id && a.target_group_id === tg.id
+                              a => a.style_direction_id === ts.id && a.target_group_id === tg.id
                             )
                             const isAssigned = !!assignment
 
@@ -1187,10 +1187,10 @@ export default function AdminCatalogsPage() {
                                   onChange={async () => {
                                     try {
                                       if (isAssigned) {
-                                        await api.deleteTrainingStyleTargetGroup(assignment.id)
+                                        await api.deleteStyleDirectionTargetGroup(assignment.id)
                                       } else {
-                                        await api.createTrainingStyleTargetGroup({
-                                          training_style_id: ts.id,
+                                        await api.createStyleDirectionTargetGroup({
+                                          style_direction_id: ts.id,
                                           target_group_id: tg.id,
                                           is_primary: false
                                         })

frontend/src/utils/api.js

@@ -257,27 +257,27 @@ export async function deleteFocusArea(id) {
   return request(`/api/focus-areas/${id}`, { method: 'DELETE' })
 }
 
-// Training Styles
-export async function listTrainingStyles(filters = {}) {
+// Style Directions (formerly Training Styles)
+export async function listStyleDirections(filters = {}) {
   const query = new URLSearchParams(filters).toString()
   return request(`/api/training-styles${query ? '?' + query : ''}`)
 }
 
-export async function createTrainingStyle(data) {
+export async function createStyleDirection(data) {
   return request('/api/training-styles', {
     method: 'POST',
     body: JSON.stringify(data)
   })
 }
 
-export async function updateTrainingStyle(id, data) {
+export async function updateStyleDirection(id, data) {
   return request(`/api/training-styles/${id}`, {
     method: 'PUT',
     body: JSON.stringify(data)
   })
 }
 
-export async function deleteTrainingStyle(id) {
+export async function deleteStyleDirection(id) {
   return request(`/api/training-styles/${id}`, { method: 'DELETE' })
 }
 
@@ -394,31 +394,31 @@ export async function deleteTargetGroup(id) {
   return request(`/api/target-groups/${id}`, { method: 'DELETE' })
 }
 
-// Training Style → Target Groups (M:N Assignments)
-export async function listTrainingStyleTargetGroups(filters = {}) {
+// Style Direction → Target Groups (M:N Assignments)
+export async function listStyleDirectionTargetGroups(filters = {}) {
   const query = new URLSearchParams(filters).toString()
   return request(`/api/training-style-target-groups${query ? '?' + query : ''}`)
 }
 
-export async function createTrainingStyleTargetGroup(data) {
+export async function createStyleDirectionTargetGroup(data) {
   return request('/api/training-style-target-groups', {
     method: 'POST',
     body: JSON.stringify(data)
   })
 }
 
-export async function updateTrainingStyleTargetGroup(id, data) {
+export async function updateStyleDirectionTargetGroup(id, data) {
   return request(`/api/training-style-target-groups/${id}`, {
     method: 'PUT',
     body: JSON.stringify(data)
   })
 }
 
-export async function deleteTrainingStyleTargetGroup(id) {
+export async function deleteStyleDirectionTargetGroup(id) {
   return request(`/api/training-style-target-groups/${id}`, { method: 'DELETE' })
 }
 
-export async function getTrainingStylesHierarchy(filters = {}) {
+export async function getStyleDirectionsHierarchy(filters = {}) {
   const query = new URLSearchParams(filters).toString()
   return request(`/api/training-styles/hierarchy${query ? '?' + query : ''}`)
 }
@@ -528,10 +528,10 @@ export const api = {
   createFocusArea,
   updateFocusArea,
   deleteFocusArea,
-  listTrainingStyles,
-  createTrainingStyle,
-  updateTrainingStyle,
-  deleteTrainingStyle,
+  listStyleDirections,
+  createStyleDirection,
+  updateStyleDirection,
+  deleteStyleDirection,
   listTrainingCharacters,
   createTrainingCharacter,
   updateTrainingCharacter,
@@ -551,11 +551,11 @@ export const api = {
   createTargetGroup,
   updateTargetGroup,
   deleteTargetGroup,
-  listTrainingStyleTargetGroups,
-  createTrainingStyleTargetGroup,
-  updateTrainingStyleTargetGroup,
-  deleteTrainingStyleTargetGroup,
-  getTrainingStylesHierarchy,
+  listStyleDirectionTargetGroups,
+  createStyleDirectionTargetGroup,
+  updateStyleDirectionTargetGroup,
+  deleteStyleDirectionTargetGroup,
+  getStyleDirectionsHierarchy,
 
   // System
   getVersion,

frontend/src/version.js

@@ -11,5 +11,5 @@ export const PAGE_VERSIONS = {
   ClubsPage: "1.0.0",
   SkillsPage: "1.0.0",
   TrainingPlanningPage: "1.0.0",
-  AdminCatalogsPage: "2.1.0",  // Updated: Stilrichtungen + Trainingsstil-Dimension
+  AdminCatalogsPage: "2.2.0",  // Updated: Frontend API Calls & Field Names für renamed tables
 }