Erledigte Termine ans Ende + blasser, neuer Tab 'Liste'

- Erledigte Einträge werden nicht mehr durchgestrichen, nur die Textfarbe wird blasser dargestellt - Erledigte Termine werden in der Liste hinter die offenen sortiert - Neuer Tab 'Liste' (Route /liste) mit einer read-only Übersicht aller Termine; TabLayout auf echte Tabs (Link/usePathname) umgestellt - AppointmentList: Handler optional, damit die Liste read-only nutzbar ist Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-01 18:38:26 +02:00
parent 1a0fe18e89
commit 2662b9a3e1
4 changed files with 141 additions and 55 deletions
@@ -0,0 +1,45 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import TabLayout from '@/components/TabLayout';
+import AppointmentList from '@/components/AppointmentList';
+import { Appointment } from '@/types/appointment';
+
+export default function ListePage() {
+  const [appointments, setAppointments] = useState<Appointment[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const fetchAppointments = async () => {
+    try {
+      const res = await fetch('/api/appointments', { cache: 'no-store' });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      if (data.success) {
+        setAppointments(data.data);
+      }
+    } catch (error) {
+      console.error('Fehler beim Laden der Termine:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Termine einmalig beim Mount laden.
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    fetchAppointments();
+  }, []);
+
+  return (
+    <TabLayout>
+      <div className="bg-white border border-black rounded-lg shadow-md p-6">
+        <h2 className="text-xl font-semibold mb-4">Alle Termine</h2>
+        {isLoading ? (
+          <div className="text-center py-4">Lade Daten...</div>
+        ) : (
+          <AppointmentList appointments={appointments} />
+        )}
+      </div>
+    </TabLayout>
+  );
+}
@@ -4,9 +4,9 @@ import { Appointment } from '@/types/appointment';

 interface AppointmentListProps {
  appointments: Appointment[];
-  onToggleDone: (id: string) => void;
-  onEdit: (appointment: Appointment) => void;
-  onDelete: (id: string) => void;
+  onToggleDone?: (id: string) => void;
+  onEdit?: (appointment: Appointment) => void;
+  onDelete?: (id: string) => void;
 }

 const weekdays = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
@@ -33,17 +33,22 @@ export default function AppointmentList({
  onEdit,
  onDelete,
 }: AppointmentListProps) {
+  const hasActions = Boolean(onEdit || onDelete);
+
  if (appointments.length === 0) {
    return (
      <div className="text-center py-8 text-gray-500">
-        Keine Termine vorhanden. Fügen Sie oben einen neuen Termin hinzu!
+        Keine Termine vorhanden.
      </div>
    );
  }

-  const sorted = [...appointments].sort(
-    (a, b) => new Date(a.termin).getTime() - new Date(b.termin).getTime()
-  );
+  // Erledigte Einträge hinter die offenen schieben; innerhalb der Gruppen
+  // aufsteigend nach Termin sortieren.
+  const sorted = [...appointments].sort((a, b) => {
+    if (a.erledigt !== b.erledigt) return a.erledigt ? 1 : -1;
+    return new Date(a.termin).getTime() - new Date(b.termin).getTime();
+  });

  return (
    <div className="overflow-x-auto">
@@ -57,17 +62,19 @@ export default function AppointmentList({
            <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-center">Aktion</th>
+            {hasActions && <th className="p-2 text-center">Aktion</th>}
          </tr>
        </thead>
        <tbody>
          {sorted.map((app, index) => (
            <tr
              key={app.id}
-              onClick={() => onEdit(app)}
-              className={`border-b border-gray-300 hover:bg-gray-100 cursor-pointer ${
+              onClick={onEdit ? () => onEdit(app) : undefined}
+              className={`border-b border-gray-300 hover:bg-gray-100 ${
+                onEdit ? 'cursor-pointer' : ''
+              } ${
                app.erledigt
-                  ? 'bg-green-50 text-gray-400 line-through'
+                  ? 'bg-green-50 text-gray-400'
                  : index % 2 === 0
                    ? 'bg-white'
                    : 'bg-gray-50'
@@ -79,9 +86,12 @@ export default function AppointmentList({
              >
                <input
                  type="checkbox"
-                  className="w-4 h-4 cursor-pointer"
+                  className={`w-4 h-4 ${onToggleDone ? 'cursor-pointer' : ''}`}
                  checked={app.erledigt}
-                  onChange={() => onToggleDone(app.id)}
+                  disabled={!onToggleDone}
+                  onChange={
+                    onToggleDone ? () => onToggleDone(app.id) : undefined
+                  }
                />
              </td>
              <td className="p-2 text-center font-medium">{app.arztName}</td>
@@ -90,25 +100,31 @@ export default function AppointmentList({
              <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-center"
-                onClick={(e) => e.stopPropagation()}
-              >
-                <div className="flex gap-2 justify-center no-underline">
-                  <button
-                    onClick={() => onEdit(app)}
-                    className="text-blue-600 hover:text-blue-800 text-sm no-underline"
-                  >
-                    Editieren
-                  </button>
-                  <button
-                    onClick={() => onDelete(app.id)}
-                    className="text-red-600 hover:text-red-800 text-sm no-underline"
-                  >
-                    Löschen
-                  </button>
-                </div>
-              </td>
+              {hasActions && (
+                <td
+                  className="p-2 text-center"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <div className="flex gap-2 justify-center">
+                    {onEdit && (
+                      <button
+                        onClick={() => onEdit(app)}
+                        className="text-blue-600 hover:text-blue-800 text-sm"
+                      >
+                        Editieren
+                      </button>
+                    )}
+                    {onDelete && (
+                      <button
+                        onClick={() => onDelete(app.id)}
+                        className="text-red-600 hover:text-red-800 text-sm"
+                      >
+                        Löschen
+                      </button>
+                    )}
+                  </div>
+                </td>
+              )}
            </tr>
          ))}
        </tbody>
@@ -1,5 +1,7 @@
 'use client';

+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import packageJson from '@/package.json';

 interface TabLayoutProps {
@@ -7,7 +9,13 @@ interface TabLayoutProps {
  onPrint?: () => void;
 }

+const TABS = [
+  { href: '/', label: 'Termine' },
+  { href: '/liste', label: 'Liste' },
+];
+
 export default function TabLayout({ children, onPrint }: TabLayoutProps) {
+  const pathname = usePathname();
  const version = packageJson.version;
  const buildDate =
    process.env.NEXT_PUBLIC_BUILD_DATE ||
@@ -31,29 +39,46 @@ export default function TabLayout({ children, onPrint }: TabLayoutProps) {
          {/* Tab-Leiste */}
          <div className="flex justify-between items-end">
            <div className="flex">
-              <span
-                className="px-6 py-2 text-sm font-semibold border-t-2 border-l-2 border-r-2 rounded-tl-lg rounded-tr-lg mr-1"
-                style={{
-                  backgroundColor: '#FFFFDD',
-                  color: '#000000',
-                  borderColor: '#000000',
-                  borderBottom: '2px solid #FFFFDD',
-                  marginBottom: '-2px',
-                  position: 'relative',
-                  zIndex: 10,
-                }}
-              >
-                Termine
-              </span>
-            </div>
-            <div className="pb-1">
-              <button
-                onClick={onPrint}
-                className="px-4 py-2 bg-[#85B7D7] hover:bg-[#6a9fc5] text-black text-sm rounded-lg shadow-md transition-colors"
-              >
-                🖨️ Aktuelle Termine drucken
-              </button>
+              {TABS.map((tab) => {
+                const isActive = pathname === tab.href;
+                return (
+                  <Link
+                    key={tab.href}
+                    href={tab.href}
+                    className="px-6 py-2 text-sm font-semibold border-t-2 border-l-2 border-r-2 rounded-tl-lg rounded-tr-lg mr-1 transition-colors"
+                    style={
+                      isActive
+                        ? {
+                            backgroundColor: '#FFFFDD',
+                            color: '#000000',
+                            borderColor: '#000000',
+                            borderBottom: '2px solid #FFFFDD',
+                            marginBottom: '-2px',
+                            position: 'relative',
+                            zIndex: 10,
+                          }
+                        : {
+                            backgroundColor: '#85B7D7',
+                            color: '#374151',
+                            borderColor: '#000000',
+                          }
+                    }
+                  >
+                    {tab.label}
+                  </Link>
+                );
+              })}
            </div>
+            {onPrint && (
+              <div className="pb-1">
+                <button
+                  onClick={onPrint}
+                  className="px-4 py-2 bg-[#85B7D7] hover:bg-[#6a9fc5] text-black text-sm rounded-lg shadow-md transition-colors"
+                >
+                  🖨️ Aktuelle Termine drucken
+                </button>
+              </div>
+            )}
          </div>

          {/* Inhaltsbereich */}
@@ -40,7 +40,7 @@ echo ""
 # 3. Docker Image bauen und pushen
 echo ">>> Baue Multiplatform Docker Image und pushe zu Registry..."
 docker buildx build \
-  --platform linux/amd64,linux/arm64 \
+  --platform linux/amd64 \
  --build-arg BUILD_DATE="${BUILD_DATE}" \
  -t "${FULL_IMAGE}" \
  --push \