feat: goal categories UI - complete rebuild

Completed frontend for multi-dimensional goal priorities.

**UI Changes:**
- Category-grouped goal display with color-coded headers
- Each category shows: icon, name, description, goal count
- Priority stars (⭐⭐⭐/⭐⭐/⭐) replace "PRIMÄR" badge
- Goals have category-colored left border
- Form fields: Category dropdown + Priority selector
- Removed "Gewichtung gesamt" display (useless UX)

**Categories:**
- 📉 Körper (body): Gewicht, Körperfett, Muskelmasse
- 🏋️ Training: Kraft, Frequenz, Performance
- 🍎 Ernährung: Kalorien, Makros, Essgewohnheiten
- 😴 Erholung: Schlaf, Regeneration, Ruhetage
- ❤️ Gesundheit: Vitalwerte, Blutdruck, HRV
- 📌 Sonstiges: Weitere Ziele

**Priority Levels:**
- ⭐⭐⭐ Hoch (1)
- ⭐⭐ Mittel (2)
- ⭐ Niedrig (3)

**Implementation:**
- Load groupedGoals via api.listGoalsGrouped()
- GOAL_CATEGORIES + PRIORITY_LEVELS constants
- handleEditGoal/handleSaveGoal/handleCreateGoal extended
- Backward compatible (is_primary still exists)

Next: Test migration + UI, then update Dashboard to show top-1 per category

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/GoalsPage.jsx

@@ -5,44 +5,22 @@ import dayjs from 'dayjs'
 import 'dayjs/locale/de'
 dayjs.locale('de')
 
-// Goal Mode Definitions
+// Goal Categories
-const GOAL_MODES = [
+const GOAL_CATEGORIES = {
-  {
+  body: { label: 'Körper', icon: '📉', color: '#D85A30', description: 'Gewicht, Körperfett, Muskelmasse' },
-    id: 'weight_loss',
+  training: { label: 'Training', icon: '🏋️', color: '#378ADD', description: 'Kraft, Frequenz, Performance' },
-    icon: '📉',
+  nutrition: { label: 'Ernährung', icon: '🍎', color: '#1D9E75', description: 'Kalorien, Makros, Essgewohnheiten' },
-    label: 'Gewichtsreduktion',
+  recovery: { label: 'Erholung', icon: '😴', color: '#7B68EE', description: 'Schlaf, Regeneration, Ruhetage' },
-    description: 'Kaloriendefizit, Fettabbau',
+  health: { label: 'Gesundheit', icon: '❤️', color: '#E67E22', description: 'Vitalwerte, Blutdruck, HRV' },
-    color: '#D85A30'
+  other: { label: 'Sonstiges', icon: '📌', color: '#94A3B8', description: 'Weitere Ziele' }
-  },
+}
-  {
+
-    id: 'strength',
+// Priority Levels
-    icon: '💪',
+const PRIORITY_LEVELS = {
-    label: 'Kraftaufbau',
+  1: { label: 'Hoch', stars: '⭐⭐⭐', color: 'var(--accent)' },
-    description: 'Muskelwachstum, progressive Belastung',
+  2: { label: 'Mittel', stars: '⭐⭐', color: '#94A3B8' },
-    color: '#378ADD'
+  3: { label: 'Niedrig', stars: '⭐', color: '#CBD5E1' }
-  },
-  {
-    id: 'endurance',
-    icon: '🏃',
-    label: 'Ausdauer',
-    description: 'VO2Max, aerobe Kapazität',
-    color: '#1D9E75'
-  },
-  {
-    id: 'recomposition',
-    icon: '⚖️',
-    label: 'Körperkomposition',
-    description: 'Gleichzeitig Fett ab- & Muskeln aufbauen',
-    color: '#7B68EE'
-  },
-  {
-    id: 'health',
-    icon: '❤️',
-    label: 'Allgemeine Gesundheit',
-    description: 'Ausgewogen, präventiv',
-    color: '#E67E22'
 }
-]
 
 export default function GoalsPage() {
   const [goalMode, setGoalMode] = useState(null)
@@ -56,7 +34,8 @@ export default function GoalsPage() {
     flexibility_pct: 0,
     health_pct: 0
   })
-  const [goals, setGoals] = useState([])
+  const [goals, setGoals] = useState([]) // Kept for backward compat
+  const [groupedGoals, setGroupedGoals] = useState({}) // Category-grouped goals
   const [goalTypes, setGoalTypes] = useState([]) // Dynamic from DB (Phase 1.5)
   const [goalTypesMap, setGoalTypesMap] = useState({}) // For quick lookup
   const [showGoalForm, setShowGoalForm] = useState(false)
@@ -69,6 +48,8 @@ export default function GoalsPage() {
   const [formData, setFormData] = useState({
     goal_type: 'weight',
     is_primary: false,
+    category: 'body',
+    priority: 2,
     target_value: '',
     unit: 'kg',
     target_date: '',
@@ -84,14 +65,16 @@ export default function GoalsPage() {
     setLoading(true)
     setError(null)
     try {
-      const [modeData, goalsData, typesData, focusData] = await Promise.all([
+      const [modeData, goalsData, groupedData, typesData, focusData] = await Promise.all([
         api.getGoalMode(),
         api.listGoals(),
+        api.listGoalsGrouped(), // v2.1: Load grouped by category
         api.listGoalTypeDefinitions(), // Phase 1.5: Load from DB
         api.getFocusAreas() // v2.0: Load focus areas
       ])
       setGoalMode(modeData.goal_mode)
       setGoals(goalsData)
+      setGroupedGoals(groupedData)
 
       // Ensure all focus fields are present and numeric
       const sanitizedFocus = {
@@ -158,6 +141,8 @@ export default function GoalsPage() {
     setFormData({
       goal_type: firstType,
       is_primary: goals.length === 0, // First goal is primary by default
+      category: 'body',
+      priority: 2,
       target_value: '',
       unit: goalTypesMap[firstType]?.unit || 'kg',
       target_date: '',
@@ -172,6 +157,8 @@ export default function GoalsPage() {
     setFormData({
       goal_type: goal.goal_type,
       is_primary: goal.is_primary,
+      category: goal.category || 'other',
+      priority: goal.priority || 2,
       target_value: goal.target_value,
       unit: goal.unit,
       target_date: goal.target_date || '',
@@ -199,6 +186,8 @@ export default function GoalsPage() {
       const data = {
         goal_type: formData.goal_type,
         is_primary: formData.is_primary,
+        category: formData.category,
+        priority: formData.priority,
         target_value: parseFloat(formData.target_value),
         unit: formData.unit,
         target_date: formData.target_date || null,
@@ -367,32 +356,6 @@ export default function GoalsPage() {
               })}
             </div>
 
-            {/* Weight Total Display */}
-            <div style={{
-              padding: 12,
-              background: 'var(--surface2)',
-              border: '1px solid var(--border)',
-              borderRadius: 8,
-              marginBottom: 16
-            }}>
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                <span style={{ fontWeight: 600, color: 'var(--text2)' }}>
-                  Gewichtung gesamt:
-                </span>
-                <span style={{ fontSize: 18, fontWeight: 600, color: 'var(--text1)' }}>
-                  {(() => {
-                    const total = Object.entries(focusTemp)
-                      .filter(([k]) => k.endsWith('_pct'))
-                      .reduce((acc, [k, v]) => acc + (Number(v) || 0), 0)
-                    return (total / 10).toFixed(1)
-                  })()}
-                </span>
-              </div>
-              <div style={{ fontSize: 12, marginTop: 4, color: 'var(--text3)' }}>
-                💡 Die Prozentanteile werden automatisch berechnet
-              </div>
-            </div>
-
             {/* Action Buttons */}
             <div style={{ display: 'flex', gap: 12 }}>
               <button
@@ -482,7 +445,7 @@ export default function GoalsPage() {
         )}
       </div>
 
-      {/* Tactical Goals List */}
+      {/* Tactical Goals List - Category Grouped */}
       <div className="card">
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
           <h2 style={{ margin: 0 }}>🎯 Konkrete Ziele</h2>
@@ -491,7 +454,7 @@ export default function GoalsPage() {
           </button>
         </div>
 
-        {goals.length === 0 ? (
+        {Object.keys(groupedGoals).length === 0 ? (
           <div style={{ textAlign: 'center', padding: '40px 20px', color: 'var(--text2)' }}>
             <Target size={48} style={{ opacity: 0.3, marginBottom: 16 }} />
             <p>Noch keine Ziele definiert</p>
@@ -500,48 +463,78 @@ export default function GoalsPage() {
             </button>
           </div>
         ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
+            {Object.entries(GOAL_CATEGORIES).map(([catKey, catInfo]) => {
+              const categoryGoals = groupedGoals[catKey] || []
+              if (categoryGoals.length === 0) return null
+
+              return (
+                <div key={catKey}>
+                  {/* Category Header */}
+                  <div style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    marginBottom: 16,
+                    paddingBottom: 12,
+                    borderBottom: `3px solid ${catInfo.color}`
+                  }}>
+                    <span style={{ fontSize: 28 }}>{catInfo.icon}</span>
+                    <div style={{ flex: 1 }}>
+                      <h3 style={{ margin: 0, color: catInfo.color, fontSize: 18 }}>{catInfo.label}</h3>
+                      <p style={{ margin: 0, fontSize: 13, color: 'var(--text3)' }}>{catInfo.description}</p>
+                    </div>
+                    <span style={{
+                      background: catInfo.color,
+                      color: 'white',
+                      padding: '4px 12px',
+                      borderRadius: 16,
+                      fontSize: 13,
+                      fontWeight: 600
+                    }}>
+                      {categoryGoals.length} {categoryGoals.length === 1 ? 'Ziel' : 'Ziele'}
+                    </span>
+                  </div>
+
+                  {/* Goals in Category */}
                   <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-            {goals.map(goal => {
+                    {categoryGoals.map(goal => {
-              const typeInfo = goalTypesMap[goal.goal_type] || { label: goal.goal_type, unit: '', icon: '📊' }
+                      const typeInfo = goalTypesMap[goal.goal_type] || { label_de: goal.goal_type, unit: '', icon: '📊' }
+                      const priorityInfo = PRIORITY_LEVELS[goal.priority] || PRIORITY_LEVELS[2]
+
                       return (
                         <div
                           key={goal.id}
                           className="card"
                           style={{
                             background: 'var(--surface2)',
-                    border: goal.is_primary ? '2px solid var(--accent)' : '1px solid var(--border)'
+                            border: `1px solid var(--border)`,
+                            borderLeft: `5px solid ${catInfo.color}`
                           }}
                         >
-                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+                          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16 }}>
                             <div style={{ flex: 1 }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
+                              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8, flexWrap: 'wrap' }}>
                                 <span style={{ fontSize: 20 }}>{typeInfo.icon}</span>
-                        <span style={{ fontWeight: 600 }}>
+                                <span style={{ fontWeight: 600, fontSize: 16 }}>
-                          {goal.name || typeInfo.label}
+                                  {goal.name || typeInfo.label_de}
                                 </span>
-                        {goal.is_primary && (
+                                <span style={{ fontSize: 16 }} title={priorityInfo.label}>
-                          <span style={{
+                                  {priorityInfo.stars}
-                            background: 'var(--accent)',
-                            color: 'white',
-                            fontSize: 11,
-                            padding: '2px 8px',
-                            borderRadius: 4
-                          }}>
-                            PRIMÄR
                                 </span>
-                        )}
                                 <span style={{
                                   background: goal.status === 'active' ? '#E6F4F1' : '#F3F4F6',
                                   color: goal.status === 'active' ? 'var(--accent)' : 'var(--text2)',
                                   fontSize: 11,
-                          padding: '2px 8px',
+                                  padding: '3px 8px',
-                          borderRadius: 4
+                                  borderRadius: 4,
+                                  fontWeight: 500
                                 }}>
-                          {goal.status === 'active' ? 'AKTIV' : goal.status?.toUpperCase()}
+                                  {goal.status === 'active' ? 'AKTIV' : goal.status?.toUpperCase() || 'AKTIV'}
                                 </span>
                               </div>
 
-                      <div style={{ display: 'flex', gap: 24, marginBottom: 12, fontSize: 14 }}>
+                              <div style={{ display: 'flex', gap: 20, marginBottom: 12, fontSize: 14, flexWrap: 'wrap' }}>
                                 <div>
                                   <span style={{ color: 'var(--text2)' }}>Start:</span>{' '}
                                   <strong>{goal.start_value} {goal.unit}</strong>
@@ -552,10 +545,10 @@ export default function GoalsPage() {
                                 </div>
                                 <div>
                                   <span style={{ color: 'var(--text2)' }}>Ziel:</span>{' '}
-                          <strong>{goal.target_value} {goal.unit}</strong>
+                                  <strong style={{ color: catInfo.color }}>{goal.target_value} {goal.unit}</strong>
                                 </div>
                                 {goal.target_date && (
-                          <div>
+                                  <div style={{ color: 'var(--text2)' }}>
                                     <Calendar size={14} style={{ verticalAlign: 'middle', marginRight: 4 }} />
                                     {dayjs(goal.target_date).format('DD.MM.YYYY')}
                                   </div>
@@ -568,49 +561,36 @@ export default function GoalsPage() {
                                     display: 'flex',
                                     justifyContent: 'space-between',
                                     fontSize: 12,
-                            marginBottom: 4
+                                    marginBottom: 4,
+                                    color: 'var(--text2)'
                                   }}>
                                     <span>Fortschritt</span>
-                            <span style={{ fontWeight: 600 }}>{goal.progress_pct}%</span>
+                                    <span style={{ fontWeight: 600, color: 'var(--text1)' }}>{goal.progress_pct}%</span>
                                   </div>
                                   <div style={{
                                     width: '100%',
-                            height: 6,
+                                    height: 8,
                                     background: 'var(--surface)',
-                            borderRadius: 3,
+                                    borderRadius: 4,
                                     overflow: 'hidden'
                                   }}>
                                     <div style={{
                                       width: `${Math.min(100, Math.max(0, goal.progress_pct))}%`,
                                       height: '100%',
-                              background: getProgressColor(goal.progress_pct),
+                                      background: catInfo.color,
                                       transition: 'width 0.3s ease'
                                     }} />
                                   </div>
-
-                          {goal.on_track !== null && (
-                            <div style={{ marginTop: 8, fontSize: 12 }}>
-                              {goal.on_track ? (
-                                <span style={{ color: 'var(--accent)' }}>
-                                  ✓ Ziel voraussichtlich erreichbar bis {dayjs(goal.target_date).format('DD.MM.YYYY')}
-                                </span>
-                              ) : (
-                                <span style={{ color: '#D85A30' }}>
-                                  ⚠ Prognose: {goal.projection_date ? dayjs(goal.projection_date).format('DD.MM.YYYY') : 'Offen'}
-                                  {goal.target_date && ' (später als geplant)'}
-                                </span>
-                              )}
-                            </div>
-                          )}
                                 </div>
                               )}
                             </div>
 
-                    <div style={{ display: 'flex', gap: 8 }}>
+                            <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
                               <button
                                 className="btn-secondary"
                                 onClick={() => handleEditGoal(goal)}
                                 style={{ padding: '6px 12px' }}
+                                title="Bearbeiten"
                               >
                                 <Pencil size={14} />
                               </button>
@@ -618,6 +598,7 @@ export default function GoalsPage() {
                                 className="btn-secondary"
                                 onClick={() => handleDeleteGoal(goal.id)}
                                 style={{ padding: '6px 12px', color: '#DC2626' }}
+                                title="Löschen"
                               >
                                 <Trash2 size={14} />
                               </button>
@@ -627,6 +608,10 @@ export default function GoalsPage() {
                       )
                     })}
                   </div>
+                </div>
+              )
+            })}
+          </div>
         )}
       </div>
 
@@ -817,34 +802,61 @@ export default function GoalsPage() {
               />
             </div>
 
-            {/* Primärziel */}
+            {/* Category & Priority */}
-            <div style={{
+            <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 8, marginTop: 20, color: 'var(--text1)' }}>
-              padding: 12,
+              📂 Kategorisierung
-              background: 'var(--surface2)',
+            </div>
-              borderRadius: 8,
+
-              marginBottom: 20
+            <div style={{ display: 'flex', gap: 12, marginBottom: 16 }}>
-            }}>
+              {/* Category */}
+              <div style={{ flex: 1 }}>
                 <label style={{
-                display: 'flex',
+                  display: 'block',
-                alignItems: 'flex-start',
+                  fontSize: 13,
-                gap: 10,
+                  fontWeight: 500,
-                cursor: 'pointer'
+                  marginBottom: 4,
+                  color: 'var(--text2)'
                 }}>
-                <input
+                  Kategorie *
-                  type="checkbox"
-                  checked={formData.is_primary}
-                  onChange={e => setFormData(f => ({ ...f, is_primary: e.target.checked }))}
-                  style={{ marginTop: 2 }}
-                />
-                <div>
-                  <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 2 }}>
-                    Als Primärziel setzen
-                  </div>
-                  <div style={{ fontSize: 12, color: 'var(--text2)' }}>
-                    Dein Primärziel hat höchste Priorität in Analysen und Charts
-                  </div>
-                </div>
                 </label>
+                <select
+                  className="form-input"
+                  style={{ width: '100%' }}
+                  value={formData.category}
+                  onChange={e => setFormData(f => ({ ...f, category: e.target.value }))}
+                >
+                  {Object.entries(GOAL_CATEGORIES).map(([key, info]) => (
+                    <option key={key} value={key}>
+                      {info.icon} {info.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {/* Priority */}
+              <div style={{ flex: 1 }}>
+                <label style={{
+                  display: 'block',
+                  fontSize: 13,
+                  fontWeight: 500,
+                  marginBottom: 4,
+                  color: 'var(--text2)'
+                }}>
+                  Priorität *
+                </label>
+                <select
+                  className="form-input"
+                  style={{ width: '100%' }}
+                  value={formData.priority}
+                  onChange={e => setFormData(f => ({ ...f, priority: parseInt(e.target.value) }))}
+                >
+                  {Object.entries(PRIORITY_LEVELS).map(([level, info]) => (
+                    <option key={level} value={level}>
+                      {info.stars} {info.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
             </div>
 
             {/* Buttons */}