From 9499011a3a9e6082d1347d15d0c565a735ac2435 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Reinhard=20X=2E=20F=C3=BCrst?= <rexfue@gmail.com>
Date: Wed, 1 Jul 2026 18:47:02 +0200
Subject: [PATCH] Termine-Tab nur offene Termine, Spalten links, Formular 60%
 Breite
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Termine-Tab (/) zeigt in der Liste nur noch offene (nicht erledigte)
  Termine; Überschrift entsprechend "Offene Termine"
- Spalten Arzt, Fachrichtung und Bemerkungen linksbündig (Header + Zellen)
- Eingabe-Panel (AppointmentForm) auf 60% Breite reduziert und zentriert

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/page.tsx                   |  7 +++++--
 components/AppointmentForm.tsx |  2 +-
 components/AppointmentList.tsx | 12 ++++++------
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index d33073c..bfaa0fa 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -126,6 +126,9 @@ export default function Home() {
 
   const handlePrint = () => window.print();
 
+  // Termine-Tab zeigt nur offene (nicht erledigte) Termine
+  const openAppointments = appointments.filter((a) => !a.erledigt);
+
   // Aktuelle (offene) Termine ab heute für die Druckansicht
   const startOfToday = new Date();
   startOfToday.setHours(0, 0, 0, 0);
@@ -156,12 +159,12 @@ export default function Home() {
           </div>
 
           <div className="bg-white border border-black rounded-lg shadow-md p-6">
-            <h2 className="text-xl font-semibold mb-4">Alle Termine</h2>
+            <h2 className="text-xl font-semibold mb-4">Offene Termine</h2>
             {isLoading ? (
               <div className="text-center py-4">Lade Daten...</div>
             ) : (
               <AppointmentList
-                appointments={appointments}
+                appointments={openAppointments}
                 onToggleDone={toggleDone}
                 onEdit={startEdit}
                 onDelete={setDeleteId}
diff --git a/components/AppointmentForm.tsx b/components/AppointmentForm.tsx
index 5c84577..2e1cbc9 100644
--- a/components/AppointmentForm.tsx
+++ b/components/AppointmentForm.tsx
@@ -98,7 +98,7 @@ export default function AppointmentForm({
     'w-full px-2 py-1 text-sm rounded border-2 border-gray-400 bg-white focus:border-blue-500 focus:outline-none';
 
   return (
-    <div className="bg-[#CCCCFF] border border-black p-6 rounded-lg mb-6">
+    <div className="bg-[#CCCCFF] border border-black p-6 rounded-lg mb-6 w-3/5 mx-auto">
       {editingAppointment && (
         <div className="mb-4 p-3 bg-blue-100 border border-blue-400 rounded text-sm text-blue-800">
           ℹ️ <strong>Bearbeitungsmodus:</strong> Sie bearbeiten einen bestehenden
diff --git a/components/AppointmentList.tsx b/components/AppointmentList.tsx
index c714474..b0c5fe4 100644
--- a/components/AppointmentList.tsx
+++ b/components/AppointmentList.tsx
@@ -56,12 +56,12 @@ export default function AppointmentList({
         <thead>
           <tr className="bg-[#CCCCFF] border-b-2 border-gray-400">
             <th className="p-2 text-center">Erledigt</th>
-            <th className="p-2 text-center">Arzt</th>
-            <th className="p-2 text-center">Fachrichtung</th>
+            <th className="p-2 text-left">Arzt</th>
+            <th className="p-2 text-left">Fachrichtung</th>
             <th className="p-2 text-center">Datum</th>
             <th className="p-2 text-center">Tag</th>
             <th className="p-2 text-center">Zeit</th>
-            <th className="p-2 text-center">Bemerkungen</th>
+            <th className="p-2 text-left">Bemerkungen</th>
             {hasActions && <th className="p-2 text-center">Aktion</th>}
           </tr>
         </thead>
@@ -94,12 +94,12 @@ export default function AppointmentList({
                   }
                 />
               </td>
-              <td className="p-2 text-center font-medium">{app.arztName}</td>
-              <td className="p-2 text-center">{app.arztArt || '-'}</td>
+              <td className="p-2 text-left font-medium">{app.arztName}</td>
+              <td className="p-2 text-left">{app.arztArt || '-'}</td>
               <td className="p-2 text-center">{formatDate(app.termin)}</td>
               <td className="p-2 text-center">{getWeekday(app.termin)}</td>
               <td className="p-2 text-center">{formatTime(app.termin)}</td>
-              <td className="p-2 text-center">{app.bemerkungen || '-'}</td>
+              <td className="p-2 text-left">{app.bemerkungen || '-'}</td>
               {hasActions && (
                 <td
                   className="p-2 text-center"