From 3604ebc7811222a736e9dd38abec8c6fd2786c1d Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Sat, 28 Mar 2026 13:50:47 +0100
Subject: [PATCH] fix: Load actual start_date in edit form + improve timeline
 display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**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>
---
 frontend/src/pages/GoalsPage.jsx | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/GoalsPage.jsx b/frontend/src/pages/GoalsPage.jsx
index 02f417a..c26fc51 100644
--- a/frontend/src/pages/GoalsPage.jsx
+++ b/frontend/src/pages/GoalsPage.jsx
@@ -196,7 +196,7 @@ export default function GoalsPage() {
       priority: goal.priority || 2,
       target_value: goal.target_value,
       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 || '',
       name: goal.name || '',
       description: goal.description || '',
@@ -683,14 +683,24 @@ export default function GoalsPage() {
                                   <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>
 
+                              {/* 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 && (
                                 <div>
                                   <div style={{
@@ -1108,7 +1118,7 @@ export default function GoalsPage() {
                 type="date"
                 className="form-input"
                 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 }))}
               />
               <div style={{ fontSize: 12, color: 'var(--text3)', marginTop: 4 }}>