geändert auf FormContext - **WOP**

src/App.css

@@ -73,10 +73,6 @@ section {
   font-size: 80%;
 }
 
-.fertig {
-  text-align: center;
-}
-
 .lastbuttons {
   display: flex;
   justify-content: space-around;

src/App.css_claude

@@ -0,0 +1,103 @@
+.App {
+  max-width: 600px;
+  margin: 50px auto;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+
+h1 {
+  text-align: center;
+  color: #333;
+}
+
+.progress {
+  text-align: center;
+  margin-bottom: 20px;
+  padding: 10px;
+  background-color: #e9ecef;
+  border-radius: 5px;
+  font-weight: bold;
+  color: #495057;
+}
+
+.component-box {
+  background-color: #f8f9fa;
+  border: 2px solid #dee2e6;
+  border-radius: 10px;
+  padding: 30px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  transition: all 0.3s ease;
+}
+
+.component-box.completed {
+  background-color: #e8f5e9;
+  border-color: #4caf50;
+  opacity: 0.85;
+}
+
+.completed-marker {
+  color: #4caf50;
+  font-weight: bold;
+  margin-top: 15px;
+  padding: 10px;
+  background-color: rgba(76, 175, 80, 0.1);
+  border-radius: 5px;
+  text-align: center;
+}
+
+.component-box h2 {
+  margin-top: 0;
+  color: #0056b3;
+}
+
+.radio-group {
+  margin: 20px 0;
+  display: flex;
+  gap: 20px;
+}
+
+.radio-group label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.radio-group input[type="radio"] {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
+
+button {
+  background-color: #0056b3;
+  color: white;
+  border: none;
+  padding: 12px 30px;
+  font-size: 16px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  margin-top: 15px;
+}
+
+button:hover:not(:disabled) {
+  background-color: #004494;
+}
+
+button:disabled {
+  background-color: #6c757d;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.back-button {
+  background-color: #6c757d;
+  margin-top: 10px;
+}
+
+.back-button:hover {
+  background-color: #5a6268;
+}

src/App.jsx

@@ -1,26 +1,72 @@
+import { useState } from 'react'
+import { FormProvider } from './components/FormContext.jsx'
 import './App.css'
-import FandStatt from './components/FandStatt.jsx'
+import FandStattVer from './components/FandStattVer.jsx'
 import BesucherBar from './components/BesucherBar.jsx'
 import Spende from './components/Spende.jsx'
 import LastLine from './components/LastLine.jsx'
 import Bemerkungen from './components/Bemerkungen.jsx'
-import Fertig from './components/Fertig.jsx'
 import LastButtons from './components/LastButtons.jsx'
+import NeinPfad from './components/NeinPfad.jsx'
+
 
 function App() {
   const datum = "2025-10-23"
   const name = "Meiehofer"
   const version = "1.0.0"
   const vdate = "2025-11-23"
-  const isBar = true;
+  //const isBar = true
 
-  let withBar = null
+  // let withBar = null
-  if (isBar) {
+  // if (isBar) {
-    withBar = <BesucherBar title="Höhe der Barspende" euro="€" />
+  //   withBar = <BesucherBar title="Höhe der Barspende" euro="€" />
+  // }
+
+  // States
+  const [schritt, setSchritt] = useState(0)
+  const [pfad, setPfad] = useState('')
+
+
+  // Callbacks:
+  const handleFandStattVerNext = (auswahl) => {
+    setPfad(auswahl)
+    setSchritt(1)
+  }
+
+  const handleNext = () => {
+    setSchritt(schritt + 1)
+  }
+
+  // Welche Komponeneten werden angezeigt:
+  const renderCoponents = () => {
+    const components = []
+
+    // Schritt 0: ja/nein - Auswahl
+    components.push(
+      <FandStattVer key="fandstatt" left='ja' right='nein' onNext={handleFandStattVerNext} iscompleted={schritt > 1} />
+    )
+    if (schritt === 0)
+      return components
+
+    // JA-Pfad:
+    if (pfad === 'ja') {
+      // Schritt 1: Besucher-Anzahl
+      if (schritt >= 1) {
+        components.push(<BesucherBar key='besucher' title='Besucher-Anzahl:' eureo='' onNext={handleNext} isComplete={schritt > 1} />
+        )
+      }
+      // Schritt 2: Spende
+      if (schritt >= 2) {
+        components.push(<Spende key='spende' onNext={handleNext} isComplete={schritt > 2} />
+        )
+      }
+
+    }
+    return components
   }
 
   return (
-    <>
+    <FormProvider>
       <div className="wrapper">
         <div>
           <h2 className="topline">
@@ -29,15 +75,12 @@ function App() {
           <h4>für {name}</h4>
           <h2 className="nachbearbeitung">Nachbearbeitung</h2>
         </div>
-        <FandStatt />
+        // Alle Komponenten der Reihe nach anzeigen
-        <BesucherBar title="Besucher-Anzahl" euro="" />
+        {renderCoponents().map(component => component)}
-        <Spende />
-        {withBar}
-        <Bemerkungen />
         <LastButtons />
         <LastLine version={version} vdate={vdate} />
       </div>
-    </>
+    </FormProvider>
   )
 }
 

src/App.jsx_claude

@@ -0,0 +1,202 @@
+import { useState } from 'react'
+import './App.css'
+import FandStattVer from './components/FandStattVer.jsx'
+import BesucherBar from './components/BesucherBar.jsx'
+import Spende from './components/Spende.jsx'
+import LastLine from './components/LastLine.jsx'
+import Bemerkungen from './components/Bemerkungen.jsx'
+import Fertig from './components/Fertig.jsx'
+import LastButtons from './components/LastButtons.jsx'
+import Verschoben from "./components/Verschoben.jsx"
+import NeinPfad from './components/NeinPfad.jsx'
+
+function App() {
+  const datum = "2025-10-23"
+  const name = "Meiehofer"
+  const version = "1.0.0"
+  const vdate = "2025-11-23"
+  const isBar = true
+
+  // State für die Navigation
+  const [schritt, setSchritt] = useState(0)
+  const [pfad, setPfad] = useState('') // 'ja' oder 'nein'
+
+  // Callback für FandStattVer, wenn OK geklickt wird
+  const handleFandStattVerNext = (auswahl) => {
+    setPfad(auswahl)
+    setSchritt(1)
+  }
+
+  // Callback für alle anderen Komponenten
+  const handleNext = () => {
+    setSchritt(schritt + 1)
+  }
+
+  // Bestimme, welche Komponenten angezeigt werden sollen
+  const renderComponents = () => {
+    const components = []
+
+    // Schritt 0: FandStattVer (immer zuerst)
+    components.push(
+      <FandStattVer 
+        key="fandstatt" 
+        left='ja' 
+        right='nein' 
+        onNext={handleFandStattVerNext} 
+        isCompleted={schritt > 0}
+      />
+    )
+
+    // Wenn noch bei Schritt 0, zeige nur FandStattVer
+    if (schritt === 0) {
+      return components
+    }
+
+    // Pfad "JA"
+    if (pfad === 'ja') {
+      // Schritt 1: BesucherBar (Anzahl)
+      if (schritt >= 1) {
+        components.push(
+          <BesucherBar 
+            key="besucher" 
+            title="Besucher-Anzahl" 
+            euro="" 
+            onNext={handleNext} 
+            isCompleted={schritt > 1}
+          />
+        )
+      }
+      
+      // Schritt 2: Spende
+      if (schritt >= 2) {
+        components.push(
+          <Spende 
+            key="spende" 
+            onNext={handleNext} 
+            isCompleted={schritt > 2}
+          />
+        )
+      }
+      
+      // Schritt 3: BesucherBar (Barspende) - nur wenn isBar true
+      if (schritt >= 3 && isBar) {
+        components.push(
+          <BesucherBar 
+            key="barspende" 
+            title="Höhe der Barspende" 
+            euro="€" 
+            onNext={handleNext} 
+            isCompleted={schritt > 3}
+          />
+        )
+      }
+      
+      // Schritt 4: Bemerkungen
+      if (schritt >= 4) {
+        components.push(
+          <Bemerkungen 
+            key="bemerkungen" 
+            onNext={handleNext} 
+            isCompleted={schritt > 4}
+          />
+        )
+      }
+      
+      // Schritt 5: LastButtons
+      if (schritt >= 5) {
+        components.push(
+          <LastButtons 
+            key="lastbuttons" 
+            onNext={handleNext} 
+            isCompleted={schritt > 5}
+          />
+        )
+      }
+      
+      // Schritt 6: Fertig
+      if (schritt >= 6) {
+        components.push(
+          <Fertig key="fertig" />
+        )
+      }
+    }
+
+    // Pfad "NEIN"
+    if (pfad === 'nein') {
+      // Schritt 1: Verschoben
+      if (schritt >= 1) {
+        components.push(
+          <Verschoben 
+            key="verschoben" 
+            onNext={handleNext} 
+            isCompleted={schritt > 1}
+          />
+        )
+      }
+      
+      // Schritt 2: NeinPfad
+      if (schritt >= 2) {
+        components.push(
+          <NeinPfad 
+            key="neinpfad" 
+            isNein={true} 
+            onNext={handleNext} 
+            isCompleted={schritt > 2}
+          />
+        )
+      }
+      
+      // Schritt 3: Bemerkungen
+      if (schritt >= 3) {
+        components.push(
+          <Bemerkungen 
+            key="bemerkungen" 
+            onNext={handleNext} 
+            isCompleted={schritt > 3}
+          />
+        )
+      }
+      
+      // Schritt 4: LastButtons
+      if (schritt >= 4) {
+        components.push(
+          <LastButtons 
+            key="lastbuttons" 
+            onNext={handleNext} 
+            isCompleted={schritt > 4}
+          />
+        )
+      }
+      
+      // Schritt 5: Fertig
+      if (schritt >= 5) {
+        components.push(
+          <Fertig key="fertig" />
+        )
+      }
+    }
+
+    return components
+  }
+
+  return (
+    <>
+      <div className="wrapper">
+        <div>
+          <h2 className="topline">
+            Sonderführung vom <br className="umbruch" />{datum}
+          </h2>
+          <h4>für {name}</h4>
+          <h2 className="nachbearbeitung">Nachbearbeitung</h2>
+        </div>
+
+        {/* Zeige alle Komponenten bis zum aktuellen Schritt */}
+        {renderComponents().map(component => component)}
+
+        <LastLine version={version} vdate={vdate} />
+      </div>
+    </>
+  )
+}
+
+export default App

src/components/BesucherBar.jsx

@@ -1,16 +1,25 @@
-export default function BesucherBar({title, euro}) {
+import { useState, useSyncExternalStore } from 'react'
-    let inClass = 'infeld'
-    if (euro !== '') {
-        inClass = 'infeldsm'
-    }
-    return(
 
+export default function BesucherBar({title, euro, onNext, isCompleted}) {
+
+const [wert, setWert] = useState('')
+const handleOK = () => {
+    if (wert) {
+        onNext()
+    } else {
+        alert('Bitte einen Wert eingeben')
+    }
+}
+
+return(
         <section id="besucherbar">
             <h3>{title}:</h3>
             <div className="besadiv">
-                    <input className={inClass}  />
+                    <input type='number' value={wert} onChange = {(e) => setWert(e.target.value)}
+                        placeholder={euro ? 'Betrag in Euro' : 'Anzahl'} disabled ={isCompleted}
+                    />
                     &nbsp;&nbsp;{euro}
-                    <button className="okbutton">OK</button>
+                    <button className="okbutton" onClick={handleOK} disabled = {!wert}>OK</button>
             </div>
         </section>        
     )

src/components/FandStatt.jsx

@@ -1,18 +0,0 @@
-export default function FandStatt() {
-    return (
-        <section>
-            <h3>Fand die Führung statt?</h3>
-            <div className="fstdiv">
-                <label className="fsLabel">
-                    <input type="radio" name="fst" value="ja" checked />
-                    ja
-                </label>
-                <label className="fsLabel">
-                    <input type="radio" name="fst" value="nein" />
-                    nein
-                </label>
-
-            </div>
-        </section>
-    )
-}

src/components/FandStattVer.jsx

@@ -0,0 +1,34 @@
+import { useState } from 'react'
+import { useFormData } from './FormContext.jsx'
+
+export default function FandStattVer({left, right, onNext, isCompleted}) {
+    const { formData, updateFormData } = useFormData()
+    const [auswahl, setAuswahl] = useState(formData.stattgefunden || '')
+    const handleOK = () => {
+        if(!auswahl) {
+            alert('Bitte ja/nein wäölen')
+            return
+        }
+        updateFormData('stattgefunden', auswahl)
+        onNext(auswahl)
+    }
+
+    return (
+        <section>
+            <h3>Fand die Führung statt?</h3>
+            <div className="fstdiv">
+                <label className="fsLabel">
+                    <input type="radio" name="fst" value={left} checked={auswahl === left}
+                        onChange = {(e) => setAuswahl(e.target.value)} />
+                    {left}
+                </label>
+                <label className="fsLabel">
+                    <input type="radio" name="fst" value={right} checked={auswahl === right}
+                        onChange = {(e) => setAuswahl(e.target.value)} />
+                    {right}
+                </label>
+                <button className="okbutton"  onClick={handleOK} disabled = {!auswahl}>OK</button>
+            </div>
+        </section>
+    )
+}

src/components/FandStattVer.jsx_claude

@@ -0,0 +1,55 @@
+import { useState } from 'react'
+
+function FandStattVer({ left, right, onNext, isCompleted }) {
+  const [auswahl, setAuswahl] = useState('')
+
+  const handleOK = () => {
+    if (auswahl) {
+      // Rufe onNext mit der Auswahl ('ja' oder 'nein') auf
+      onNext(auswahl)
+    } else {
+      alert('Bitte eine Option auswählen')
+    }
+  }
+
+  return (
+    <div className={`component-box ${isCompleted ? 'completed' : ''}`}>
+      <h3>Fand die Veranstaltung statt?</h3>
+      
+      <div className="radio-group">
+        <label>
+          <input
+            type="radio"
+            name="fandstatt"
+            value={left}
+            checked={auswahl === left}
+            onChange={(e) => setAuswahl(e.target.value)}
+            disabled={isCompleted}
+          />
+          {left}
+        </label>
+        
+        <label>
+          <input
+            type="radio"
+            name="fandstatt"
+            value={right}
+            checked={auswahl === right}
+            onChange={(e) => setAuswahl(e.target.value)}
+            disabled={isCompleted}
+          />
+          {right}
+        </label>
+      </div>
+
+      {!isCompleted && (
+        <button onClick={handleOK} disabled={!auswahl}>
+          OK
+        </button>
+      )}
+      
+    </div>
+  )
+}
+
+export default FandStattVer

src/components/Fertig.jsx

@@ -1,10 +0,0 @@
-import LastButtons from "./LastButtons.jsx"
-
-export default function Fertig() {
-    return (
-        <section className="fertig">
-            <h3>Fertig</h3>
-            <LastButtons />
-        </section>
-    )
-}

src/components/FormContext.jsx

@@ -0,0 +1,34 @@
+// ========================================
+// FormContext.jsx - Globaler State für alle Formulardaten
+// ========================================
+import { createContext, useContext, useState } from 'react'
+
+const FormContext = createContext()
+
+export function FormProvider({ children }) {
+  const [formData, setFormData] = useState({
+    stattgefunden: '',
+    anzahl: '',
+    spende: '',
+    betrag: '',
+    bemerkungen: '',
+    neuertermin: ''
+  })
+
+  const updateFormData = (field, value) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }))
+  }
+
+  return (
+    <FormContext.Provider value={{ formData, updateFormData }}>
+      {children}
+    </FormContext.Provider>
+  )
+}
+
+export function useFormData() {
+  return useContext(FormContext)
+}

src/components/NeinPfad.jsx

@@ -0,0 +1,21 @@
+import FandStattVer from "./FandStattVer.jsx";
+import Verschoben from "./Verschoben.jsx";
+
+export default function NeinPfad({ isNein }) {
+    let verschoben = true
+
+    let dt = null
+    if (verschoben) {
+        dt = <Verschoben />
+    }
+    if (isNein) {
+        return (
+            <>
+                <FandStattVer left='abgesagt' right='verschoben' />
+                {dt}
+            </>
+        )
+    } else {
+        return null
+    }
+}

src/components/Spende.jsx

@@ -1,26 +1,67 @@
-export default function Spende() {
+import { useState } from 'react'
+import { useFormData } from './FormContext'
+
+export default function Spende({ onNext, isCompleted }) {
+  const { formData, updateFormData } = useFormData()
+  const [spende, setSpende] = useState(formData.spendenArt || '')
+  const [betrag, setBetrag] = useState(formData.spendenBetrag || '')
+
+  const handleOK = () => {
+    if (!spende) {
+      alert('Bitte wähle eine Spendenart aus')
+      return
+    }
+        updateFormData('spende', spende)
+        updateFormData('betrag', betrag)
+        onNext()
+    }
 
     return (
         <section>
             <h3>Eine Spende</h3>
             <div className="selspende">
                 <label>
-                    <input type="radio" name="spende" value="bar" />
+                    <input type="radio" name="spende" value="bar" 
+                    checked={spende==='bar'} onChange= {(e) => {setSpende(e.target.value)}} disabled={isCompleted}
+                    />
                     ist in bar eingegangen
                 </label>
                 <label>
-                    <input type="radio" name="spende" value="ueber" />
+                    <input type="radio" name="spende" value="ueber"  
+                    checked={spende==='ueber'} onChange= {(e) => {setSpende(e.target.value)}} disabled={isCompleted}
+                    />
                     wird überwiesen
                 </label>
                 <label>
-                    <input type="radio" name="spende" value="kasse" />
+                    <input type="radio" name="spende" value="kasse"  
+                    checked={spende==='kasse'} onChange= {(e) => {setSpende(e.target.value)}} disabled={isCompleted}
+                    />
                     ist in der Spendenkasse
                 </label>
                 <label>
-                    <input type="radio" name="spende" value="not" />
+                    <input type="radio" name="spende" value="not"  
+                    checked={spende==='not'} onChange= {(e) => {setSpende(e.target.value)}} disabled={isCompleted}
+                    />
                     ist nicht vorgesehen
                 </label>
             </div>
+
+            {(spende === 'bar') && !isCompleted && (
+                <div style={{ marginTop: '20px' }}>
+                    <label>Betrag (€):</label>
+                    <input
+                    type='number'
+                    value={betrag}
+                    onChange={(e) => setBetrag(e.target.value)}
+                    placeholder='0'
+                    step='1'
+                    disabled={isCompleted}
+                    />
+                    </div>
+                )}
+                {!isCompleted && (
+                    <button onClick={handleOK} disabled={!spende}>OK</button>
+                )}
         </section>
     )
 }

src/components/Verschoben.jsx

@@ -0,0 +1,16 @@
+
+export default function Verschoben() {
+    let now = new Date()
+    now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
+
+    return (
+        <section>
+            <h3>Verschoben auf:</h3>
+            <div className="verschoben">
+                    <input type="datetime-local" id="datetime" min={now.toISOString().slice(0,16)} />        
+                    <button className="okbutton">OK</button>
+    
+            </div>
+        </section>
+    )
+}