From 2007f3f659aa0c4921b19d1ef19b7128c3b2073c Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Wed, 6 May 2026 08:44:15 +0200
Subject: [PATCH] feat: enhance TrainingPlanningPage with new training unit
 creation UI

- Introduced a new layout for creating training units within a card format, improving visual organization and user experience.
- Added CSS styles for various elements related to training unit creation, including titles, hints, and action buttons.
- Removed the quick template ID state and related functionality to streamline the creation process.
- Updated user prompts and hints to guide users more effectively in selecting training groups and creating new training units.
---
 frontend/src/app.css                        |  92 ++++++++++++++
 frontend/src/pages/TrainingPlanningPage.jsx | 130 ++++++--------------
 2 files changed, 130 insertions(+), 92 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index f916c44..da9d417 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -3824,6 +3824,98 @@ a.analysis-split__nav-item {
   }
 }
 
+/* ── Trainingsplanung: Abschnitt „Neue Trainingseinheit“ + Vorlage im Modal ───────── */
+.training-planning-create--in-card {
+  margin-top: 1.25rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.08));
+}
+
+.training-planning-create__intro {
+  margin-bottom: 1rem;
+}
+
+.training-planning-create__title {
+  margin: 0 0 0.45rem;
+  font-size: 1.06rem;
+  font-weight: 700;
+  color: var(--text1);
+  letter-spacing: -0.01em;
+}
+
+.training-planning-create__lede {
+  margin: 0;
+  font-size: 0.92rem;
+  line-height: 1.55;
+  color: var(--text2);
+  max-width: 52rem;
+}
+
+.training-planning-create__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+}
+
+.training-planning-create__cta {
+  min-height: 44px;
+  padding-left: 1.35rem;
+  padding-right: 1.35rem;
+  font-weight: 600;
+}
+
+.training-planning-create__secondary {
+  min-height: 44px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.training-planning-create__hint {
+  margin: 0.85rem 0 0;
+  font-size: 0.82rem;
+  line-height: 1.45;
+  color: var(--text3);
+  max-width: 48rem;
+}
+
+.training-planning-create__hint--warn {
+  color: var(--text2);
+  margin-top: 0.65rem;
+  padding: 0.55rem 0.7rem;
+  border-radius: 8px;
+  background: var(--surface2);
+  border: 1px solid var(--border2);
+}
+
+.training-planning-template-panel {
+  padding: 1rem 1.1rem;
+  border-radius: 12px;
+  border: 1px solid var(--border2);
+  background: linear-gradient(165deg, var(--surface2) 0%, var(--surface) 100%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.training-planning-template-panel__label {
+  font-weight: 600;
+  margin-bottom: 0.4rem;
+  display: block;
+}
+
+.training-planning-template-panel__select {
+  font-size: 0.94rem;
+  padding: 0.55rem 0.65rem;
+  width: 100%;
+  max-width: 100%;
+}
+
+.training-planning-template-panel__help {
+  margin: 0.65rem 0 0;
+  font-size: 0.82rem;
+  color: var(--text2);
+  line-height: 1.48;
+}
+
 @media print {
   .desktop-sidebar,
   .bottom-nav,
diff --git a/frontend/src/pages/TrainingPlanningPage.jsx b/frontend/src/pages/TrainingPlanningPage.jsx
index a1b5725..e6e5726 100644
--- a/frontend/src/pages/TrainingPlanningPage.jsx
+++ b/frontend/src/pages/TrainingPlanningPage.jsx
@@ -121,7 +121,6 @@ function TrainingPlanningPage() {
   /** Abschnitts-Editor bei Bearbeitung: Planung vs. Nachbereitung (Ist & Abweichungen) */
   const [sectionsEditMode, setSectionsEditMode] = useState('planning')
   const [draftPlanTemplateId, setDraftPlanTemplateId] = useState('')
-  const [quickTemplateId, setQuickTemplateId] = useState('')
   const [exercisePickerOpen, setExercisePickerOpen] = useState(false)
   const [exercisePickerTarget, setExercisePickerTarget] = useState(null)
   const [planningPeekCtx, setPlanningPeekCtx] = useState(null)
@@ -461,28 +460,6 @@ function TrainingPlanningPage() {
     return { fpTitle, slotBit, fpId: unit.origin_framework_program_id }
   }
 
-  const handleQuickCreate = async () => {
-    if (!selectedGroupId) {
-      alert('Bitte wähle zuerst eine Trainingsgruppe')
-      return
-    }
-    const date = prompt('Datum für neue Trainingseinheit (YYYY-MM-DD):', today)
-    if (!date) return
-    try {
-      const body = {
-        group_id: parseInt(selectedGroupId, 10),
-        planned_date: date
-      }
-      if (quickTemplateId) {
-        body.plan_template_id = parseInt(quickTemplateId, 10)
-      }
-      await api.quickCreateTrainingUnit(body)
-      await loadUnits()
-    } catch (err) {
-      alert('Fehler beim Erstellen: ' + err.message)
-    }
-  }
-
   const handleCreate = () => {
     if (!selectedGroupId) {
       alert('Bitte wähle zuerst eine Trainingsgruppe')
@@ -1191,80 +1168,39 @@ function TrainingPlanningPage() {
             </div>
           )}
 
-          <div
-            style={{
-              marginTop: '1.25rem',
-              paddingTop: '1rem',
-              borderTop: '1px solid var(--border, rgba(0,0,0,0.08))'
-            }}
-          >
-            <p style={{ fontSize: '0.88rem', color: 'var(--text2)', marginBottom: '0.75rem' }}>
-              <strong>Plan anlegen:</strong> neue Trainingseinheit mit Datum, Zeit und Ablauf — oder schnell nur mit Datum (Zeiten aus der Gruppe).
+          <div className="training-planning-create training-planning-create--in-card">
+            <div className="training-planning-create__intro">
+              <h3 className="training-planning-create__title">Neue Trainingseinheit</h3>
+              <p className="training-planning-create__lede">
+                Termin mit Datum, Zeiten und Ablauf (Abschnitte &amp; Übungen) festlegen — optional eine{' '}
+                <strong>Trainingsvorlage</strong> für die Gliederung wählen oder Inhalte aus einem{' '}
+                <strong>Rahmenprogramm</strong> übernehmen.
+              </p>
               {!selectedGroupId && (
-                <span style={{ display: 'block', marginTop: '0.35rem' }}>
-                  Wähle oben eine Trainingsgruppe, um die Schaltflächen zu aktivieren.
-                </span>
+                <p className="training-planning-create__hint training-planning-create__hint--warn">
+                  Wähle oben eine Trainingsgruppe, um fortzufahren.
+                </p>
               )}
               {groups.length === 0 && (
-                <span style={{ display: 'block', marginTop: '0.35rem' }}>
+                <p className="training-planning-create__hint training-planning-create__hint--warn">
                   Es gibt noch keine aktive Trainingsgruppe — unter{' '}
-                  <Link to="/clubs">
-                    Vereine
-                  </Link>{' '}
-                  anlegen oder aktivieren.
-                </span>
+                  <Link to="/clubs">Vereine</Link> anlegen oder aktivieren.
+                </p>
               )}
-            </p>
-            <div
-              style={{
-                display: 'flex',
-                flexWrap: 'wrap',
-                gap: '0.5rem',
-                alignItems: 'center'
-              }}
-            >
+            </div>
+            <div className="training-planning-create__actions">
               <button
                 type="button"
-                className="btn btn-primary"
+                className="btn btn-primary training-planning-create__cta"
                 disabled={!selectedGroupId}
                 title={!selectedGroupId ? 'Zuerst eine Trainingsgruppe wählen' : undefined}
                 onClick={handleCreate}
               >
-                + Neue Trainingseinheit planen
+                Trainingseinheit planen…
               </button>
-              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
-                <label className="form-label" style={{ marginBottom: 0 }}>
-                  Schnell (+ optional Vorlage):
-                </label>
-                <select
-                  className="form-input"
-                  style={{ minWidth: '180px', marginBottom: 0 }}
-                  value={quickTemplateId}
-                  onChange={(e) => setQuickTemplateId(e.target.value)}
-                  disabled={!selectedGroupId}
-                  title={!selectedGroupId ? 'Zuerst Trainingsgruppe wählen' : undefined}
-                >
-                  <option value="">Standard (leer)</option>
-                  {planTemplates.map((t) => (
-                    <option key={t.id} value={String(t.id)}>
-                      {t.name}
-                      {typeof t.sections_count === 'number' ? ` (${t.sections_count} Abschn.)` : ''}
-                    </option>
-                  ))}
-                </select>
-                <button
-                  type="button"
-                  className="btn btn-secondary"
-                  disabled={!selectedGroupId}
-                  title={!selectedGroupId ? 'Zuerst eine Trainingsgruppe wählen' : undefined}
-                  onClick={handleQuickCreate}
-                >
-                  Schnell erstellen
-                </button>
-              </div>
               <button
                 type="button"
-                className="btn btn-secondary"
+                className="btn btn-secondary training-planning-create__secondary"
                 disabled={!selectedGroupId}
                 title={!selectedGroupId ? 'Zuerst eine Trainingsgruppe wählen' : undefined}
                 onClick={openFrameworkImportModal}
@@ -1272,13 +1208,18 @@ function TrainingPlanningPage() {
                 Aus Rahmen übernehmen…
               </button>
             </div>
+            <p className="training-planning-create__hint">
+              Vorlage („Ohne Vorlage“ oder gespeicherte Gliederung) stellst du im sich öffnenden Dialog ein; dort auch
+              Kalenderdatum und Zeiten.
+            </p>
           </div>
         </div>
 
         {!selectedGroupId ? (
           <div className="card">
             <p style={{ color: 'var(--text2)', textAlign: 'center' }}>
-              Wähle oben eine Trainingsgruppe — danach kannst du mit <strong>„Neue Trainingseinheit planen“</strong> starten.
+              Wähle oben eine Trainingsgruppe — danach kannst du unter{' '}
+              <strong>„Trainingseinheit planen…“</strong> einen Termin anlegen.
             </p>
           </div>
         ) : planView === 'calendar' ? (
@@ -1460,8 +1401,8 @@ function TrainingPlanningPage() {
         ) : units.length === 0 ? (
           <div className="card">
             <p style={{ color: 'var(--text2)', textAlign: 'center' }}>
-              Keine Trainingseinheiten in diesem Zeitraum. Nutze oben <strong>„Neue Trainingseinheit planen“</strong> oder{' '}
-              <strong>„Schnell erstellen“</strong>, um den ersten Termin anzulegen.
+              Keine Trainingseinheiten in diesem Zeitraum. Unten unter <strong>„Neue Trainingseinheit“</strong> einen
+              Termin anlegen — optional mit Vorlage im Dialog.
             </p>
           </div>
         ) : (
@@ -2099,22 +2040,27 @@ function TrainingPlanningPage() {
               })() : null}
 
               {!editingUnit && (
-                <div className="form-row" style={{ marginBottom: '1.25rem' }}>
-                  <label className="form-label">Gliederungsvorlage (optional)</label>
+                <div className="training-planning-template-panel" style={{ marginBottom: '1.35rem' }}>
+                  <label className="form-label training-planning-template-panel__label" htmlFor="planning-draft-template">
+                    Vorlage für den Ablauf
+                  </label>
                   <select
-                    className="form-input"
+                    id="planning-draft-template"
+                    className="form-input training-planning-template-panel__select"
                     value={draftPlanTemplateId}
                     onChange={(e) => applyTemplateFromSelect(e.target.value)}
                   >
-                    <option value="">Keine Vorlage</option>
+                    <option value="">Ohne Vorlage — leere Gliederung (ein Abschnitt)</option>
                     {planTemplates.map((t) => (
                       <option key={t.id} value={String(t.id)}>
                         {t.name}
+                        {typeof t.sections_count === 'number' ? ` · ${t.sections_count} Abschn.` : ''}
                       </option>
                     ))}
                   </select>
-                  <p style={{ fontSize: '0.8rem', color: 'var(--text2)', marginTop: '0.35rem' }}>
-                    Lädt die Abschnitte und Hinweise aus der Vorlage; Übungen fügst du hier ein.
+                  <p className="training-planning-template-panel__help">
+                    Übernimmt nur die <strong>Sektionsstruktur</strong> aus der Bibliothek; Übungen trägst du unten bei
+                    den Abschnitten ein. Gespeicherte Vorlagen kannst du unter Planung später erweitern.
                   </p>
                 </div>
               )}