Goalsystem V1 #50
|
|
@ -5,44 +5,22 @@ import dayjs from 'dayjs'
|
|||
import 'dayjs/locale/de'
|
||||
dayjs.locale('de')
|
||||
|
||||
// Goal Mode Definitions
|
||||
const GOAL_MODES = [
|
||||
{
|
||||
id: 'weight_loss',
|
||||
icon: '📉',
|
||||
label: 'Gewichtsreduktion',
|
||||
description: 'Kaloriendefizit, Fettabbau',
|
||||
color: '#D85A30'
|
||||
},
|
||||
{
|
||||
id: 'strength',
|
||||
icon: '💪',
|
||||
label: 'Kraftaufbau',
|
||||
description: 'Muskelwachstum, progressive Belastung',
|
||||
color: '#378ADD'
|
||||
},
|
||||
{
|
||||
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'
|
||||
}
|
||||
]
|
||||
// Goal Categories
|
||||
const GOAL_CATEGORIES = {
|
||||
body: { label: 'Körper', icon: '📉', color: '#D85A30', description: 'Gewicht, Körperfett, Muskelmasse' },
|
||||
training: { label: 'Training', icon: '🏋️', color: '#378ADD', description: 'Kraft, Frequenz, Performance' },
|
||||
nutrition: { label: 'Ernährung', icon: '🍎', color: '#1D9E75', description: 'Kalorien, Makros, Essgewohnheiten' },
|
||||
recovery: { label: 'Erholung', icon: '😴', color: '#7B68EE', description: 'Schlaf, Regeneration, Ruhetage' },
|
||||
health: { label: 'Gesundheit', icon: '❤️', color: '#E67E22', description: 'Vitalwerte, Blutdruck, HRV' },
|
||||
other: { label: 'Sonstiges', icon: '📌', color: '#94A3B8', description: 'Weitere Ziele' }
|
||||
}
|
||||
|
||||
// Priority Levels
|
||||
const PRIORITY_LEVELS = {
|
||||
1: { label: 'Hoch', stars: '⭐⭐⭐', color: 'var(--accent)' },
|
||||
2: { label: 'Mittel', stars: '⭐⭐', color: '#94A3B8' },
|
||||
3: { label: 'Niedrig', stars: '⭐', color: '#CBD5E1' }
|
||||
}
|
||||
|
||||
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,128 +463,150 @@ export default function GoalsPage() {
|
|||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
{goals.map(goal => {
|
||||
const typeInfo = goalTypesMap[goal.goal_type] || { label: goal.goal_type, unit: '', icon: '📊' }
|
||||
<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={goal.id}
|
||||
className="card"
|
||||
style={{
|
||||
background: 'var(--surface2)',
|
||||
border: goal.is_primary ? '2px solid var(--accent)' : '1px solid var(--border)'
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
||||
<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 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
|
||||
<span style={{ fontSize: 20 }}>{typeInfo.icon}</span>
|
||||
<span style={{ fontWeight: 600 }}>
|
||||
{goal.name || typeInfo.label}
|
||||
</span>
|
||||
{goal.is_primary && (
|
||||
<span style={{
|
||||
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',
|
||||
borderRadius: 4
|
||||
}}>
|
||||
{goal.status === 'active' ? 'AKTIV' : goal.status?.toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div style={{ display: 'flex', gap: 24, marginBottom: 12, fontSize: 14 }}>
|
||||
<div>
|
||||
<span style={{ color: 'var(--text2)' }}>Start:</span>{' '}
|
||||
<strong>{goal.start_value} {goal.unit}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span style={{ color: 'var(--text2)' }}>Aktuell:</span>{' '}
|
||||
<strong>{goal.current_value || '—'} {goal.unit}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span style={{ color: 'var(--text2)' }}>Ziel:</span>{' '}
|
||||
<strong>{goal.target_value} {goal.unit}</strong>
|
||||
</div>
|
||||
{goal.target_date && (
|
||||
<div>
|
||||
<Calendar size={14} style={{ verticalAlign: 'middle', marginRight: 4 }} />
|
||||
{dayjs(goal.target_date).format('DD.MM.YYYY')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Goals in Category */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
{categoryGoals.map(goal => {
|
||||
const typeInfo = goalTypesMap[goal.goal_type] || { label_de: goal.goal_type, unit: '', icon: '📊' }
|
||||
const priorityInfo = PRIORITY_LEVELS[goal.priority] || PRIORITY_LEVELS[2]
|
||||
|
||||
{goal.progress_pct !== null && (
|
||||
<div>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
fontSize: 12,
|
||||
marginBottom: 4
|
||||
}}>
|
||||
<span>Fortschritt</span>
|
||||
<span style={{ fontWeight: 600 }}>{goal.progress_pct}%</span>
|
||||
</div>
|
||||
<div style={{
|
||||
width: '100%',
|
||||
height: 6,
|
||||
background: 'var(--surface)',
|
||||
borderRadius: 3,
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
<div style={{
|
||||
width: `${Math.min(100, Math.max(0, goal.progress_pct))}%`,
|
||||
height: '100%',
|
||||
background: getProgressColor(goal.progress_pct),
|
||||
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')}
|
||||
return (
|
||||
<div
|
||||
key={goal.id}
|
||||
className="card"
|
||||
style={{
|
||||
background: 'var(--surface2)',
|
||||
border: `1px solid var(--border)`,
|
||||
borderLeft: `5px solid ${catInfo.color}`
|
||||
}}
|
||||
>
|
||||
<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, flexWrap: 'wrap' }}>
|
||||
<span style={{ fontSize: 20 }}>{typeInfo.icon}</span>
|
||||
<span style={{ fontWeight: 600, fontSize: 16 }}>
|
||||
{goal.name || typeInfo.label_de}
|
||||
</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 style={{ fontSize: 16 }} title={priorityInfo.label}>
|
||||
{priorityInfo.stars}
|
||||
</span>
|
||||
<span style={{
|
||||
background: goal.status === 'active' ? '#E6F4F1' : '#F3F4F6',
|
||||
color: goal.status === 'active' ? 'var(--accent)' : 'var(--text2)',
|
||||
fontSize: 11,
|
||||
padding: '3px 8px',
|
||||
borderRadius: 4,
|
||||
fontWeight: 500
|
||||
}}>
|
||||
{goal.status === 'active' ? 'AKTIV' : goal.status?.toUpperCase() || 'AKTIV'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<span style={{ color: 'var(--text2)' }}>Aktuell:</span>{' '}
|
||||
<strong>{goal.current_value || '—'} {goal.unit}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span style={{ color: 'var(--text2)' }}>Ziel:</span>{' '}
|
||||
<strong style={{ color: catInfo.color }}>{goal.target_value} {goal.unit}</strong>
|
||||
</div>
|
||||
{goal.target_date && (
|
||||
<div style={{ color: 'var(--text2)' }}>
|
||||
<Calendar size={14} style={{ verticalAlign: 'middle', marginRight: 4 }} />
|
||||
{dayjs(goal.target_date).format('DD.MM.YYYY')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{goal.progress_pct !== null && (
|
||||
<div>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
fontSize: 12,
|
||||
marginBottom: 4,
|
||||
color: 'var(--text2)'
|
||||
}}>
|
||||
<span>Fortschritt</span>
|
||||
<span style={{ fontWeight: 600, color: 'var(--text1)' }}>{goal.progress_pct}%</span>
|
||||
</div>
|
||||
<div style={{
|
||||
width: '100%',
|
||||
height: 8,
|
||||
background: 'var(--surface)',
|
||||
borderRadius: 4,
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
<div style={{
|
||||
width: `${Math.min(100, Math.max(0, goal.progress_pct))}%`,
|
||||
height: '100%',
|
||||
background: catInfo.color,
|
||||
transition: 'width 0.3s ease'
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<button
|
||||
className="btn-secondary"
|
||||
onClick={() => handleEditGoal(goal)}
|
||||
style={{ padding: '6px 12px' }}
|
||||
>
|
||||
<Pencil size={14} />
|
||||
</button>
|
||||
<button
|
||||
className="btn-secondary"
|
||||
onClick={() => handleDeleteGoal(goal.id)}
|
||||
style={{ padding: '6px 12px', color: '#DC2626' }}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
<button
|
||||
className="btn-secondary"
|
||||
onClick={() => handleDeleteGoal(goal.id)}
|
||||
style={{ padding: '6px 12px', color: '#DC2626' }}
|
||||
title="Löschen"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -817,34 +802,61 @@ export default function GoalsPage() {
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Primärziel */}
|
||||
<div style={{
|
||||
padding: 12,
|
||||
background: 'var(--surface2)',
|
||||
borderRadius: 8,
|
||||
marginBottom: 20
|
||||
}}>
|
||||
<label style={{
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
gap: 10,
|
||||
cursor: 'pointer'
|
||||
}}>
|
||||
<input
|
||||
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>
|
||||
{/* Category & Priority */}
|
||||
<div style={{ fontSize: 14, fontWeight: 600, marginBottom: 8, marginTop: 20, color: 'var(--text1)' }}>
|
||||
📂 Kategorisierung
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: 12, marginBottom: 16 }}>
|
||||
{/* Category */}
|
||||
<div style={{ flex: 1 }}>
|
||||
<label style={{
|
||||
display: 'block',
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
marginBottom: 4,
|
||||
color: 'var(--text2)'
|
||||
}}>
|
||||
Kategorie *
|
||||
</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 */}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user