From 327319115d36cf695ea4cff14cc62531bb5d920f Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Sat, 28 Mar 2026 13:15:56 +0100
Subject: [PATCH] feat: Frontend - Startdatum field in goal form

Added start_date field to goal creation/editing form:

1. New "Startdatum" input field before "Zieldatum"
   - Defaults to today
   - Hint: "Startwert wird automatisch aus historischen Daten ermittelt"

2. Display start_date in goals list
   - Shows next to start_value: "85 kg (01.01.26)"
   - Compact format for better readability

3. Updated formData state
   - Added start_date with today as default
   - API calls automatically include it

User can now:
- Set historical start date (e.g., 3 months ago)
- Backend auto-populates start_value from that date
- See exact start date and value for each goal

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/GoalsPage.jsx | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/frontend/src/pages/GoalsPage.jsx b/frontend/src/pages/GoalsPage.jsx
index 5492acb..4033f46 100644
--- a/frontend/src/pages/GoalsPage.jsx
+++ b/frontend/src/pages/GoalsPage.jsx
@@ -89,6 +89,7 @@ export default function GoalsPage() {
     priority: 2,
     target_value: '',
     unit: 'kg',
+    start_date: new Date().toISOString().split('T')[0], // Default to today
     target_date: '',
     name: '',
     description: '',
@@ -666,6 +667,11 @@ export default function GoalsPage() {
                                 <div>
                                   <span style={{ color: 'var(--text2)' }}>Start:</span>{' '}
                                   <strong>{goal.start_value} {goal.unit}</strong>
+                                  {goal.start_date && (
+                                    <span style={{ fontSize: 12, color: 'var(--text3)', marginLeft: 4 }}>
+                                      ({dayjs(goal.start_date).format('DD.MM.YY')})
+                                    </span>
+                                  )}
                                 </div>
                                 <div>
                                   <span style={{ color: 'var(--text2)' }}>Aktuell:</span>{' '}
@@ -1085,6 +1091,29 @@ export default function GoalsPage() {
               </div>
             </div>
 
+            {/* Startdatum */}
+            <div style={{ marginBottom: 16 }}>
+              <label style={{
+                display: 'block',
+                fontSize: 13,
+                fontWeight: 500,
+                marginBottom: 4,
+                color: 'var(--text2)'
+              }}>
+                Startdatum
+              </label>
+              <input
+                type="date"
+                className="form-input"
+                style={{ width: '100%', textAlign: 'left' }}
+                value={formData.start_date || new Date().toISOString().split('T')[0]}
+                onChange={e => setFormData(f => ({ ...f, start_date: e.target.value }))}
+              />
+              <div style={{ fontSize: 12, color: 'var(--text3)', marginTop: 4 }}>
+                Startwert wird automatisch aus historischen Daten ermittelt
+              </div>
+            </div>
+
             {/* Zieldatum */}
             <div style={{ marginBottom: 16 }}>
               <label style={{