Checkbox im Liste-Tab aktivieren (erledigt-Toggle)

Der Liste-Tab erhält einen onToggleDone-Handler mit optimistischem
Update, sodass Termine dort direkt als erledigt/offen markiert werden
können. Editieren/Löschen bleiben dem Termine-Tab vorbehalten.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app/liste/page.tsx

@@ -30,6 +30,32 @@ export default function ListePage() {
     fetchAppointments();
   }, []);
 
+  // Statuswechsel (erledigt) direkt aus der Liste, mit optimistischem Update.
+  const toggleDone = async (id: string) => {
+    const current = appointments.find((a) => a.id === id);
+    if (!current) return;
+    const newStatus = !current.erledigt;
+    setAppointments((prev) =>
+      prev.map((a) => (a.id === id ? { ...a, erledigt: newStatus } : a))
+    );
+    try {
+      const res = await fetch(`/api/appointments/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ erledigt: newStatus }),
+      });
+      if (!res.ok) throw new Error('Fehler beim Statuswechsel.');
+    } catch (error) {
+      console.error('Fehler beim Statuswechsel:', error);
+      // Rückgängig machen bei Fehler
+      setAppointments((prev) =>
+        prev.map((a) =>
+          a.id === id ? { ...a, erledigt: current.erledigt } : a
+        )
+      );
+    }
+  };
+
   return (
     <TabLayout>
       <div className="bg-white border border-black rounded-lg shadow-md p-6">
@@ -37,7 +63,10 @@ export default function ListePage() {
         {isLoading ? (
           <div className="text-center py-4">Lade Daten...</div>
         ) : (
-          <AppointmentList appointments={appointments} />
+          <AppointmentList
+            appointments={appointments}
+            onToggleDone={toggleDone}
+          />
         )}
       </div>
     </TabLayout>