fix: Load actual start_date in edit form + improve timeline display
All checks were successful
Deploy Development / deploy (push) Successful in 48s
Build Test / lint-backend (push) Successful in 1s
Build Test / build-frontend (push) Successful in 15s

**Problem 1:** Edit form showed today's date instead of stored start_date
- Cause: Fallback logic `goal.start_date || today` always defaulted to today
- Fix: Load actual date or empty string (no fallback)
- Input field: Remove fallback from value binding

**Problem 2:** Timeline only showed target_date, not start_date
- Added dedicated timeline display below values
- Shows: "📅 15.01.26 → 31.05.26"
- Only appears if at least one date exists
- Start date with calendar icon, target date bold

**Result:**
- Editing goals now preserves the start_date ✓
- Timeline clearly shows start → target dates ✓
- No more accidental overwrites with today's date ✓

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lars 2026-03-28 13:50:47 +01:00
parent e479627f0f
commit 3604ebc781

View File

@ -196,7 +196,7 @@ export default function GoalsPage() {
priority: goal.priority || 2, priority: goal.priority || 2,
target_value: goal.target_value, target_value: goal.target_value,
unit: goal.unit, unit: goal.unit,
start_date: goal.start_date || new Date().toISOString().split('T')[0], start_date: goal.start_date || '', // Load actual date or empty (not today!)
target_date: goal.target_date || '', target_date: goal.target_date || '',
name: goal.name || '', name: goal.name || '',
description: goal.description || '', description: goal.description || '',
@ -683,14 +683,24 @@ export default function GoalsPage() {
<span style={{ color: 'var(--text2)' }}>Ziel:</span>{' '} <span style={{ color: 'var(--text2)' }}>Ziel:</span>{' '}
<strong style={{ color: catInfo.color }}>{goal.target_value} {goal.unit}</strong> <strong style={{ color: catInfo.color }}>{goal.target_value} {goal.unit}</strong>
</div> </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> </div>
{/* Timeline: Start → Ziel */}
{(goal.start_date || goal.target_date) && (
<div style={{ display: 'flex', gap: 12, fontSize: 13, color: 'var(--text2)', marginBottom: 12, alignItems: 'center' }}>
{goal.start_date && (
<>
<Calendar size={13} style={{ verticalAlign: 'middle' }} />
<span>{dayjs(goal.start_date).format('DD.MM.YY')}</span>
</>
)}
{goal.start_date && goal.target_date && <span></span>}
{goal.target_date && (
<span style={{ fontWeight: 500 }}>{dayjs(goal.target_date).format('DD.MM.YY')}</span>
)}
</div>
)}
{goal.progress_pct !== null && ( {goal.progress_pct !== null && (
<div> <div>
<div style={{ <div style={{
@ -1108,7 +1118,7 @@ export default function GoalsPage() {
type="date" type="date"
className="form-input" className="form-input"
style={{ width: '100%', textAlign: 'left' }} style={{ width: '100%', textAlign: 'left' }}
value={formData.start_date || new Date().toISOString().split('T')[0]} value={formData.start_date || ''}
onChange={e => setFormData(f => ({ ...f, start_date: e.target.value }))} onChange={e => setFormData(f => ({ ...f, start_date: e.target.value }))}
/> />
<div style={{ fontSize: 12, color: 'var(--text3)', marginTop: 4 }}> <div style={{ fontSize: 12, color: 'var(--text3)', marginTop: 4 }}>