Liste mit dazu

frontend/src/App.jsx

@@ -26,6 +26,20 @@ function App() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [appointmentToDeleteId, setAppointmentToDeleteId] = useState(null);
   
+  // Helfer: Start des heutigen Tages für Filter "aktuelle Termine"
+  const startOfToday = new Date();
+  startOfToday.setHours(0, 0, 0, 0);
+  
+  // Gefilterte Liste: nur nicht erledigte Termine ab heute
+  const currentAppointments = appointments
+    .filter(a => !a.erledigt && a.termin >= startOfToday)
+    .sort((a, b) => a.termin - b.termin);
+  
+  // Drucken triggern
+  const handlePrintCurrent = () => {
+    window.print();
+  };
+
   // NEU: Lädt Termine vom Backend beim Start
   useEffect(() => {
     fetchAppointments();
@@ -188,20 +202,30 @@ function App() {
 
   return (
     <div className="app-container">
-      {/* ... (Header und Formular-Einbindung) ... */}
+      <div className="screen-only">
+        {/* Druck-Button für aktuelle Termine */}
+        <div className="print-controls">
+          <button className="print-button" onClick={handlePrintCurrent}>
+            Aktuelle Termine drucken
+          </button>
+        </div>
+
+        {/* Formular */}
         <AppointmentForm 
           onAddAppointment={addAppointment} 
           editingAppointment={editingAppointment}
           onUpdateAppointment={updateAppointment}
           onCancelEdit={() => setEditingAppointment(null)}
         />
-      {/* ... */}
+
+        {/* Gesamte Liste */}
         <AppointmentList 
           appointments={appointments} 
           onToggleDone={toggleDone} 
           onEdit={(app) => setEditingAppointment(app)}
           onDelete={openDeleteModal}
         />
+
         {/* NEU: MODAL KOMPONENTE */}
         <ConfirmationModal
           isOpen={isModalOpen}
@@ -210,7 +234,36 @@ function App() {
           onConfirm={handleConfirmDelete}
           onCancel={handleCancelDelete}
         />
-      {/* Debug Output kann nun entfernt werden */}
+      </div>
+
+      {/* Druckansicht: nur aktuelle (offene) Termine ab heute */}
+      <div className="print-only">
+        <h1>Aktuelle Arzt-Termine</h1>
+        {currentAppointments.length === 0 ? (
+          <p>Keine aktuellen Termine vorhanden.</p>
+        ) : (
+          <table className="print-table">
+            <thead>
+              <tr>
+                <th>Arzt</th>
+                <th>Fachrichtung</th>
+                <th>Datum</th>
+                <th>Bemerkungen</th>
+              </tr>
+            </thead>
+            <tbody>
+              {currentAppointments.map(app => (
+                <tr key={app.id}>
+                  <td>{app.arztName}</td>
+                  <td>{app.arztArt || ''}</td>
+                  <td>{app.termin.toLocaleString('de-DE')}</td>
+                  <td>{app.bemerkungen || ''}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
     </div>
   );
 }

frontend/src/AppStyles.css

@@ -208,3 +208,71 @@ body {
 .cancel-button:hover {
     background-color: #c82333;
 }
+
+/* Druck-Funktionalität */
+.print-controls {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 20px;
+}
+
+.print-button {
+    background-color: #007bff;
+    color: white;
+    padding: 10px 16px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.print-button:hover {
+    background-color: #0069d9;
+}
+
+/* Standard: Druckbereich ausblenden, Bildschirm-Inhalte anzeigen */
+.print-only {
+    display: none;
+}
+
+@media print {
+    /* Bildschirm-UI ausblenden */
+    .screen-only, .screen-only * {
+        display: none !important;
+    }
+
+    /* Nur Druckbereich anzeigen */
+    .print-only {
+        display: block !important;
+    }
+
+    body {
+        background: #ffffff;
+        margin: 10mm;
+        color: #000;
+    }
+
+    .print-only h1 {
+        margin-top: 0;
+        font-size: 20px;
+    }
+
+    .print-table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 12px;
+    }
+
+    .print-table th,
+    .print-table td {
+        border: 1px solid #000;
+        padding: 6px;
+        text-align: left;
+    }
+
+    .print-table thead th {
+        background: #eee;
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+    }
+}