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>

.dockerignore

@@ -0,0 +1,46 @@
+# dependencies
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# next.js
+.next/
+out/
+build
+dist
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+*.log
+
+# local env files
+.env
+.env.local
+.env.*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+# git
+.git
+.gitignore
+
+# editor
+.vscode
+.idea
+
+# docker
+Dockerfile
+.dockerignore
+docker-compose*.yml
+
+# other
+README.md

.env.docker

@@ -1,3 +0,0 @@
-# Environment variables for Docker Compose
-MONGO_ROOT_USER=root
-MONGO_ROOT_PASSWD=SFluorit

.env.example

@@ -1,19 +1,16 @@
-# Vorlage für die Produktionsumgebung.
+# Vorlage für die Umgebungsvariablen.
 # Kopieren nach .env und Werte anpassen:  cp .env.example .env
 
-# --- MongoDB Zugangsdaten (werden beim ersten Start der DB angelegt) ---
+# --- MongoDB ---
+# Verbindungs-URI. Die Datenbank wird aus der URI abgeleitet.
+# Lokal:   mongodb://localhost:27017/appointmentsdb
+# Docker:  mongodb://<user>:<passwd>@mongodb:27017/appointmentsdb?authSource=admin
+MONGO_URI=mongodb://localhost:27017/appointmentsdb
+
+# --- MongoDB Root-Zugangsdaten (nur für docker-compose, DB-Erstanlage) ---
 MONGO_ROOT_USER=root
 MONGO_ROOT_PASSWD=bitte-aendern
 
 # --- Frontend ---
-# Host-Port, unter dem die App erreichbar ist (Standard: 80)
+# Host-Port, unter dem die App erreichbar ist (Standard: 3000)
-FRONTEND_PORT=80
+APP_PORT=3000
-
-# --- Images (nur für docker-compose.images.yml) ---
-# Tag der Images aus docker.citysensor.de (Standard: latest)
-# IMAGE_TAG=latest
-
-# --- Backend / CORS ---
-# Nur nötig, falls das Frontend NICHT über denselben Host/nginx-Proxy läuft.
-# Standardmäßig nicht erforderlich. Mehrere Origins kommagetrennt, "*" für alle.
-# CORS_ORIGIN=https://meine-domain.de

.gitignore

@@ -1,32 +1,38 @@
-# Dependencies
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-node_modules/
-package-lock.json
 
-# Environment variables
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files
 .env
 .env.local
 .env.*.local
 
-# Build output
+# vercel
-dist/
+.vercel
-build/
 
-# Logs
+# typescript
-*.log
+*.tsbuildinfo
-npm-debug.log*
+next-env.d.ts
-yarn-debug.log*
-yarn-error.log*
-
-# IDE
-.vscode/
-.idea/
-*.swp
-*.swo
-*~
-.DS_Store
-
-# Testing
-coverage/
-
-# Misc
-.cache/

.npmrc

@@ -0,0 +1 @@
+audit-level=high

Dockerfile

@@ -0,0 +1,47 @@
+# Multi-stage build für die Next.js-Anwendung
+FROM node:22-alpine AS base
+
+# Nur Dependencies installieren, wenn nötig
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+# Quellcode bauen
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Build-Datum als Build-Argument
+ARG BUILD_DATE
+ENV NEXT_PUBLIC_BUILD_DATE=${BUILD_DATE}
+
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN npm run build
+
+# Produktions-Image
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["node", "server.js"]

README.md

@@ -0,0 +1,47 @@
+# Arzt-Termine (Next.js)
+
+Verwaltung von Arzt-Terminen als Next.js-Anwendung (App Router) mit MongoDB als
+Datenspeicher. Design und Layout orientieren sich am Projekt `werte-next`.
+
+Vormals bestand das Projekt aus einem getrennten React/Vite-Frontend und einem
+Express-Backend. Beides wurde in eine einzelne Next.js-App zusammengeführt:
+
+- **UI** – React-Client-Komponenten in `components/`, Seite in `app/page.tsx`
+- **API** – Next.js Route Handler unter `app/api/appointments`
+- **DB** – MongoDB-Zugriff in `lib/db.ts`
+
+## Funktionen
+
+- Termine anlegen, bearbeiten, als erledigt markieren und (soft) löschen
+- Felder: Arztname, Fachrichtung, Datum/Uhrzeit, Bemerkungen
+- Druckansicht mit den aktuellen (offenen) Terminen ab heute
+
+## Entwicklung
+
+```bash
+cp .env.example .env      # MONGO_URI setzen
+npm install
+npm run dev               # http://localhost:3000
+```
+
+## Produktion (Docker)
+
+```bash
+cp .env.example .env      # MONGO_ROOT_USER / MONGO_ROOT_PASSWD setzen
+docker compose up -d --build
+```
+
+## Deploy zur Registry
+
+```bash
+./deploy.sh [tag]         # baut & pusht docker.citysensor.de/aerzte-next
+```
+
+## Umgebungsvariablen
+
+| Variable            | Beschreibung                                    |
+| ------------------- | ----------------------------------------------- |
+| `MONGO_URI`         | MongoDB-Verbindung inkl. Datenbankname          |
+| `MONGO_ROOT_USER`   | Root-User für den MongoDB-Container (Compose)   |
+| `MONGO_ROOT_PASSWD` | Root-Passwort für den MongoDB-Container         |
+| `APP_PORT`          | Host-Port der App (Standard: 3000)              |

app/api/appointments/[id]/route.ts

@@ -0,0 +1,93 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { ObjectId, WithId, Document } from 'mongodb';
+import { getDb, APPOINTMENTS_COLLECTION } from '@/lib/db';
+import { Appointment } from '@/types/appointment';
+
+function normalize(doc: WithId<Document>): Appointment {
+  return {
+    id: doc._id.toString(),
+    arztName: doc.arztName,
+    arztArt: doc.arztArt ?? '',
+    termin: new Date(doc.termin).toISOString(),
+    erledigt: Boolean(doc.erledigt),
+    bemerkungen: doc.bemerkungen ?? '',
+  };
+}
+
+// PUT /api/appointments/:id - Termin aktualisieren (ganz oder teilweise)
+export async function PUT(
+  request: NextRequest,
+  context: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await context.params;
+    const body = await request.json();
+
+    // Nur bekannte Felder übernehmen; termin ggf. in Date umwandeln.
+    const updateFields: Record<string, unknown> = {};
+    if (body.arztName !== undefined) updateFields.arztName = body.arztName;
+    if (body.arztArt !== undefined) updateFields.arztArt = body.arztArt;
+    if (body.termin !== undefined) updateFields.termin = new Date(body.termin);
+    if (body.erledigt !== undefined) updateFields.erledigt = Boolean(body.erledigt);
+    if (body.bemerkungen !== undefined) updateFields.bemerkungen = body.bemerkungen;
+
+    const db = await getDb();
+    const filter = { _id: new ObjectId(id) };
+
+    const result = await db
+      .collection(APPOINTMENTS_COLLECTION)
+      .updateOne(filter, { $set: updateFields });
+
+    if (result.matchedCount === 0) {
+      return NextResponse.json(
+        { success: false, error: 'Termin nicht gefunden.' },
+        { status: 404 }
+      );
+    }
+
+    const updated = await db
+      .collection(APPOINTMENTS_COLLECTION)
+      .findOne(filter);
+
+    return NextResponse.json({ success: true, data: normalize(updated!) });
+  } catch (error) {
+    console.error('Fehler beim Aktualisieren des Termins:', error);
+    return NextResponse.json(
+      { success: false, error: 'Ungültige ID oder Serverfehler' },
+      { status: 400 }
+    );
+  }
+}
+
+// DELETE /api/appointments/:id - Soft-Delete (setzt deleted-Flag)
+export async function DELETE(
+  request: NextRequest,
+  context: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await context.params;
+
+    const db = await getDb();
+    const result = await db
+      .collection(APPOINTMENTS_COLLECTION)
+      .updateOne(
+        { _id: new ObjectId(id) },
+        { $set: { deleted: true, deletedAt: new Date() } }
+      );
+
+    if (result.matchedCount === 0) {
+      return NextResponse.json(
+        { success: false, error: 'Termin nicht gefunden.' },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error('Fehler beim Löschen des Termins:', error);
+    return NextResponse.json(
+      { success: false, error: 'Ungültige ID oder Serverfehler' },
+      { status: 400 }
+    );
+  }
+}

app/api/appointments/route.ts

@@ -0,0 +1,83 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { WithId, Document } from 'mongodb';
+import { getDb, APPOINTMENTS_COLLECTION } from '@/lib/db';
+import { Appointment, AppointmentPayload } from '@/types/appointment';
+
+// Wandelt ein MongoDB-Dokument in das vom Frontend erwartete Format um
+// (_id -> id als String, termin als ISO-String).
+function normalize(doc: WithId<Document>): Appointment {
+  return {
+    id: doc._id.toString(),
+    arztName: doc.arztName,
+    arztArt: doc.arztArt ?? '',
+    termin: new Date(doc.termin).toISOString(),
+    erledigt: Boolean(doc.erledigt),
+    bemerkungen: doc.bemerkungen ?? '',
+  };
+}
+
+// GET /api/appointments - Alle nicht gelöschten Termine abrufen
+export async function GET() {
+  try {
+    const db = await getDb();
+    const docs = await db
+      .collection(APPOINTMENTS_COLLECTION)
+      .find({ deleted: { $ne: true } })
+      .sort({ termin: 1 })
+      .toArray();
+
+    return NextResponse.json(
+      { success: true, data: docs.map(normalize) },
+      {
+        headers: {
+          'Cache-Control': 'no-store, no-cache, must-revalidate',
+          Pragma: 'no-cache',
+          Expires: '0',
+        },
+      }
+    );
+  } catch (error) {
+    console.error('Fehler beim Abrufen der Termine:', error);
+    return NextResponse.json(
+      { success: false, error: 'Fehler beim Abrufen der Termine' },
+      { status: 500 }
+    );
+  }
+}
+
+// POST /api/appointments - Neuen Termin erstellen
+export async function POST(request: NextRequest) {
+  try {
+    const body: AppointmentPayload = await request.json();
+
+    if (!body.arztName || !body.termin) {
+      return NextResponse.json(
+        { success: false, error: 'Arztname und Termin sind erforderlich.' },
+        { status: 400 }
+      );
+    }
+
+    const db = await getDb();
+    const doc = {
+      arztName: body.arztName,
+      arztArt: body.arztArt ?? '',
+      termin: new Date(body.termin),
+      erledigt: Boolean(body.erledigt),
+      bemerkungen: body.bemerkungen ?? '',
+      deleted: false,
+    };
+
+    const result = await db.collection(APPOINTMENTS_COLLECTION).insertOne(doc);
+
+    return NextResponse.json(
+      { success: true, data: normalize({ _id: result.insertedId, ...doc }) },
+      { status: 201 }
+    );
+  } catch (error) {
+    console.error('Fehler beim Erstellen des Termins:', error);
+    return NextResponse.json(
+      { success: false, error: 'Fehler beim Speichern des Termins' },
+      { status: 500 }
+    );
+  }
+}

app/globals.css

@@ -0,0 +1,71 @@
+/* stylelint-disable at-rule-no-unknown */
+@import "tailwindcss";
+@source "../components/**/*.tsx";
+@source "../app/**/*.tsx";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+/* --- Druckansicht --- */
+/* Standard: Druckbereich ausblenden */
+.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;
+  }
+}

app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Arzt-Termine",
+  description: "Verwaltung von Arzt-Terminen",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="de">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

app/liste/page.tsx

@@ -0,0 +1,74 @@
+'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();
+  }, []);
+
+  // 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">
+        <h2 className="text-xl font-semibold mb-4">Alle Termine</h2>
+        {isLoading ? (
+          <div className="text-center py-4">Lade Daten...</div>
+        ) : (
+          <AppointmentList
+            appointments={appointments}
+            onToggleDone={toggleDone}
+          />
+        )}
+      </div>
+    </TabLayout>
+  );
+}

app/page.tsx

@@ -0,0 +1,215 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import TabLayout from '@/components/TabLayout';
+import AppointmentForm from '@/components/AppointmentForm';
+import AppointmentList from '@/components/AppointmentList';
+import ConfirmationModal from '@/components/ConfirmationModal';
+import { Appointment, AppointmentPayload } from '@/types/appointment';
+
+export default function Home() {
+  const [appointments, setAppointments] = useState<Appointment[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [editingAppointment, setEditingAppointment] =
+    useState<Appointment | null>(null);
+  const [deleteId, setDeleteId] = useState<string | null>(null);
+
+  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();
+  }, []);
+
+  // CREATE
+  const addAppointment = async (payload: AppointmentPayload) => {
+    try {
+      const res = await fetch('/api/appointments', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+      if (!res.ok) throw new Error('Fehler beim Hinzufügen.');
+      const data = await res.json();
+      if (data.success) {
+        setAppointments((prev) => [...prev, data.data]);
+      }
+    } catch (error) {
+      console.error('Fehler beim Speichern des Termins:', error);
+      alert('Fehler beim Speichern!');
+    }
+  };
+
+  // UPDATE (vollständig, vom Formular)
+  const updateAppointment = async (id: string, payload: AppointmentPayload) => {
+    try {
+      const res = await fetch(`/api/appointments/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+      if (!res.ok) throw new Error('Fehler beim Aktualisieren.');
+      const data = await res.json();
+      if (data.success) {
+        setAppointments((prev) =>
+          prev.map((a) => (a.id === id ? data.data : a))
+        );
+        setEditingAppointment(null);
+      }
+    } catch (error) {
+      console.error('Fehler beim Aktualisieren des Termins:', error);
+      alert('Fehler beim Aktualisieren!');
+    }
+  };
+
+  // Statuswechsel (erledigt)
+  const toggleDone = async (id: string) => {
+    const current = appointments.find((a) => a.id === id);
+    if (!current) return;
+    const newStatus = !current.erledigt;
+    // Optimistisches Update
+    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))
+      );
+    }
+  };
+
+  // DELETE (Soft-Delete) mit Bestätigung
+  const confirmDelete = async () => {
+    const id = deleteId;
+    setDeleteId(null);
+    if (!id) return;
+    try {
+      const res = await fetch(`/api/appointments/${id}`, { method: 'DELETE' });
+      if (!res.ok) throw new Error('Fehler beim Löschen.');
+      setAppointments((prev) => prev.filter((a) => a.id !== id));
+      if (editingAppointment && editingAppointment.id === id) {
+        setEditingAppointment(null);
+      }
+    } catch (error) {
+      console.error('Fehler beim Löschen des Termins:', error);
+      alert('Fehler beim Löschen!');
+    }
+  };
+
+  const startEdit = (appointment: Appointment) => {
+    setEditingAppointment(appointment);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  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);
+  const currentAppointments = appointments
+    .filter((a) => !a.erledigt && new Date(a.termin) >= startOfToday)
+    .sort(
+      (a, b) => new Date(a.termin).getTime() - new Date(b.termin).getTime()
+    );
+
+  return (
+    <>
+      {/* Bildschirmansicht */}
+      <div className="screen-only">
+        <TabLayout onPrint={handlePrint}>
+          <div className="mb-8">
+            <h2 className="text-xl font-semibold mb-4">
+              {editingAppointment
+                ? '✍️ Termin bearbeiten'
+                : '🗓️ Neuen Termin hinzufügen'}
+            </h2>
+            <AppointmentForm
+              key={editingAppointment?.id ?? 'new'}
+              onAdd={addAppointment}
+              onUpdate={updateAppointment}
+              editingAppointment={editingAppointment}
+              onCancelEdit={() => setEditingAppointment(null)}
+            />
+          </div>
+
+          <div className="bg-white border border-black rounded-lg shadow-md p-6">
+            <h2 className="text-xl font-semibold mb-4">Offene Termine</h2>
+            {isLoading ? (
+              <div className="text-center py-4">Lade Daten...</div>
+            ) : (
+              <AppointmentList
+                appointments={openAppointments}
+                onToggleDone={toggleDone}
+                onEdit={startEdit}
+                onDelete={setDeleteId}
+              />
+            )}
+          </div>
+        </TabLayout>
+      </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>{new Date(app.termin).toLocaleString('de-DE')}</td>
+                  <td>{app.bemerkungen || ''}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      <ConfirmationModal
+        isOpen={deleteId !== null}
+        title="Termin löschen"
+        message="Möchten Sie diesen Termin wirklich löschen?"
+        onConfirm={confirmDelete}
+        onCancel={() => setDeleteId(null)}
+      />
+    </>
+  );
+}

backend/.dockerignore

@@ -1,5 +0,0 @@
-node_modules
-npm-debug.log
-.env
-.git
-.gitignore

backend/Dockerfile

@@ -1,18 +0,0 @@
-FROM node:20-alpine
-
-WORKDIR /app
-
-# Copy package files
-COPY package*.json ./
-
-# Install dependencies
-RUN npm ci
-
-# Copy source code
-COPY . .
-
-# Expose the application port
-EXPOSE 3001
-
-# Start the application
-CMD ["npm", "run", "dev"]

backend/Dockerfile.prod

@@ -1,17 +0,0 @@
-FROM node:20-alpine
-
-WORKDIR /app
-
-# Nur Produktions-Abhängigkeiten installieren
-COPY package*.json ./
-RUN npm ci --omit=dev
-
-# Quellcode kopieren
-COPY . .
-
-ENV NODE_ENV=production
-
-EXPOSE 3001
-
-# Produktionsstart (ohne nodemon)
-CMD ["npm", "start"]

backend/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "backend",
-  "type": "module",
-  "version": "1.0.0",
-  "vdate": "2025-11-23 11:00 UTC",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "start": "node src/server.js",
-    "dev": "nodemon src/server.js" 
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "cors": "^2.8.5",
-    "dotenv": "^17.2.3",
-    "express": "^5.1.0",
-    "mongodb": "^7.0.0"
-  },
-  "devDependencies": {
-    "nodemon": "^3.1.11"
-  }
-}

backend/src/db/db.js

@@ -1,40 +0,0 @@
-// src/db/db.js
-import 'dotenv/config'; // Importiert und lädt Umgebungsvariablen
-import { MongoClient } from 'mongodb';
-
-// MongoDB Verbindungs-URI aus der .env-Datei
-const uri = process.env.MONGO_URI;
-
-let db; 
-
-/**
- * Stellt die Verbindung zur MongoDB her.
- * @returns {db} Die verbundene Datenbankinstanz.
- */
-export async function connectToDb() {
-  try {
-    const client = new MongoClient(uri, { 
-    });
-    
-    await client.connect();
-    
-    // Die Datenbankinstanz speichern
-    db = client.db(); 
-    
-    console.log(`✅ Erfolgreich mit MongoDB verbunden.`);
-    
-    return db;
-    
-  } catch (error) {
-    console.error("❌ Fehler bei der Verbindung zur MongoDB:", error);
-    process.exit(1); 
-  }
-}
-
-/**
- * Gibt die gespeicherte Datenbankinstanz zurück.
- * @returns {db} Die Datenbankinstanz.
- */
-export function getDb() {
-  return db;
-}

backend/src/server.js

@@ -1,175 +0,0 @@
-// src/server.js
-import 'dotenv/config'; 
-import express from 'express';
-import cors from 'cors';
-import { connectToDb, getDb } from './db/db.js'; 
-import { ObjectId } from 'mongodb'; // Wichtig für die Arbeit mit MongoDB IDs
-
-// Initialisiert Express
-const app = express();
-const PORT = process.env.PORT || 3001;
-
-// Erlaubte CORS-Origins aus der Umgebung (kommagetrennt).
-// In Produktion wird das Frontend i.d.R. über denselben Host (nginx-Proxy)
-// ausgeliefert, dann sind keine Cross-Origin-Anfragen nötig.
-// Standard: localhost:5173 für die lokale Entwicklung.
-// CORS_ORIGIN="*" erlaubt alle Origins.
-const corsOrigins = (process.env.CORS_ORIGIN || 'http://localhost:5173')
-    .split(',')
-    .map((o) => o.trim());
-
-app.use(cors({
-    origin: corsOrigins.includes('*') ? true : corsOrigins,
-    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
-    allowedHeaders: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept'],
-    credentials: true,
-}));
-
-app.use((req, res, next) => {
-    console.log(`📥 ${req.method} ${req.path} from ${req.get('origin') || 'unknown origin'}`);
-    next();
-});
-app.use(express.json());
-
-// -----------------------------------------------------
-// API ROUTEN
-// -----------------------------------------------------
-
-// Root-Route zur Status-Überprüfung
-app.get('/', (req, res) => {
-    res.json({ 
-        message: 'Appointment API Server läuft',
-        status: 'ok',
-        endpoints: {
-            appointments: '/api/appointments'
-        }
-    });
-});
-
-// 1. READ: Alle Termine abrufen (GET /api/appointments)
-app.get('/api/appointments', async (req, res) => {
-    try {
-        const db = getDb();
-        // Finde alle Dokumente in der Collection 'appointments', die nicht gelöscht sind
-        const appointments = await db.collection('appointments')
-            .find({ deleted: { $ne: true } })
-            // Optional: Nach Termindatum sortieren (aufsteigend)
-            .sort({ termin: 1 }) 
-            .toArray();
-        
-        // Sende die Daten zurück an das Frontend
-        res.json(appointments);
-
-    } catch (error) {
-        console.error("Fehler beim Abrufen der Termine:", error);
-        res.status(500).json({ message: "Interner Serverfehler beim Abrufen der Daten." });
-    }
-});
-
-// 2. CREATE: Neuen Termin erstellen (POST /api/appointments)
-app.post('/api/appointments', async (req, res) => {
-    try {
-        const db = getDb();
-        const appointmentData = req.body; // Die Daten kommen vom React-Formular
-
-        // Validiere, dass der Termin ein gültiges Datum hat (Optional, aber gut)
-        if (!appointmentData.arztName || !appointmentData.termin) {
-            return res.status(400).json({ message: "Arztname und Termin sind erforderlich." });
-        }
-        
-        // Mongo generiert die _id automatisch.
-        const result = await db.collection('appointments').insertOne(appointmentData);
-
-        // Der eingefügte Termin, inklusive der von Mongo erstellten _id
-        const newAppointment = { _id: result.insertedId, ...appointmentData };
-
-        // Sende den neu erstellten Termin zurück an das Frontend (Status 201 Created)
-        res.status(201).json(newAppointment);
-
-    } catch (error) {
-        console.error("Fehler beim Erstellen des Termins:", error);
-        res.status(500).json({ message: "Interner Serverfehler beim Speichern der Daten." });
-    }
-});
-
-// 3. UPDATE: Termin aktualisieren (PUT /api/appointments/:id)
-app.put('/api/appointments/:id', async (req, res) => {
-    try {
-        const db = getDb();
-        const { id } = req.params;
-        const updatedFields = req.body; // Enthält alle Felder (oder nur die geänderten)
-
-        // Die _id des Dokuments muss ein gültiges ObjectId-Objekt sein
-        const filter = { _id: new ObjectId(id) };
-        
-        // Entferne das _id Feld aus den aktualisierten Daten, um Fehler zu vermeiden
-        delete updatedFields._id; 
-        
-        // Führe die Aktualisierung durch
-        const result = await db.collection('appointments').updateOne(
-            filter,
-            { $set: updatedFields }
-        );
-
-        if (result.matchedCount === 0) {
-            return res.status(404).json({ message: "Termin nicht gefunden." });
-        }
-        
-        // Hole das aktualisierte Dokument, um es zurückzusenden (optional, aber nützlich)
-        const updatedAppointment = await db.collection('appointments').findOne(filter);
-
-        res.json(updatedAppointment);
-
-    } catch (error) {
-        console.error(`Fehler beim Aktualisieren des Termins ${req.params.id}:`, error);
-        // Gib einen 400 Bad Request zurück, falls die ID ungültig ist (z.B. falsches Format)
-        res.status(400).json({ message: "Ungültige ID oder Serverfehler." });
-    }
-});
-
-// 4. DELETE: Termin löschen (DELETE /api/appointments/:id)
-// Soft Delete: Setzt das deleted-Flag statt den Eintrag zu löschen
-app.delete('/api/appointments/:id', async (req, res) => {
-    try {
-        const db = getDb();
-        const { id } = req.params;
-
-        const filter = { _id: new ObjectId(id) };
-
-        // Setze das deleted-Flag auf true statt den Eintrag zu löschen
-        const result = await db.collection('appointments').updateOne(
-            filter,
-            { $set: { deleted: true, deletedAt: new Date() } }
-        );
-
-        if (result.matchedCount === 0) {
-            return res.status(404).json({ message: "Termin nicht gefunden." });
-        }
-        
-        // Sende Status 204 (No Content), um den erfolgreichen Löschvorgang zu signalisieren
-        res.status(204).send(); 
-
-    } catch (error) {
-        console.error(`Fehler beim Löschen des Termins ${req.params.id}:`, error);
-        res.status(400).json({ message: "Ungültige ID oder Serverfehler." });
-    }
-});
-
-
-// -----------------------------------------------------
-// Server Start Logik
-// -----------------------------------------------------
-async function startServer() {
-    try {
-        await connectToDb(); 
-        
-        app.listen(PORT, () => {
-            console.log(`🚀 Server läuft auf Port ${PORT}`);
-        });
-        
-    } catch (error) {
-        console.error("Fehler beim Starten des Servers:", error);
-    }
-}
-
-startServer();

components/AppointmentForm.tsx

@@ -0,0 +1,226 @@
+'use client';
+
+import { useState } from 'react';
+import { Appointment, AppointmentFormData, AppointmentPayload } from '@/types/appointment';
+
+interface AppointmentFormProps {
+  onAdd: (payload: AppointmentPayload) => void;
+  onUpdate: (id: string, payload: AppointmentPayload) => void;
+  editingAppointment: Appointment | null;
+  onCancelEdit: () => void;
+}
+
+const emptyForm: AppointmentFormData = {
+  arztName: '',
+  arztArt: '',
+  terminDatum: '',
+  terminUhrzeit: '',
+  bemerkungen: '',
+};
+
+// Hilfsfunktionen: ISO-String -> Formularfelder
+const toDateInput = (iso: string) => {
+  const d = new Date(iso);
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+};
+const toTimeInput = (iso: string) => {
+  const d = new Date(iso);
+  const h = String(d.getHours()).padStart(2, '0');
+  const min = String(d.getMinutes()).padStart(2, '0');
+  return `${h}:${min}`;
+};
+
+// Leitet die Formularfelder aus dem zu bearbeitenden Termin ab (oder leer).
+const buildInitialForm = (
+  editing: Appointment | null
+): AppointmentFormData =>
+  editing
+    ? {
+        arztName: editing.arztName,
+        arztArt: editing.arztArt ?? '',
+        terminDatum: toDateInput(editing.termin),
+        terminUhrzeit: toTimeInput(editing.termin),
+        bemerkungen: editing.bemerkungen ?? '',
+      }
+    : emptyForm;
+
+export default function AppointmentForm({
+  onAdd,
+  onUpdate,
+  editingAppointment,
+  onCancelEdit,
+}: AppointmentFormProps) {
+  // Der Anfangszustand wird aus den Props abgeleitet. Wechselt der zu
+  // bearbeitende Termin, wird die Komponente über einen `key` im Parent
+  // neu gemountet – dadurch entfällt ein setState im Effect.
+  const [formData, setFormData] = useState<AppointmentFormData>(() =>
+    buildInitialForm(editingAppointment)
+  );
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!formData.arztName || !formData.terminDatum || !formData.terminUhrzeit) {
+      alert('Bitte füllen Sie Name, Datum und Uhrzeit aus.');
+      return;
+    }
+
+    const termin = new Date(
+      `${formData.terminDatum}T${formData.terminUhrzeit}`
+    ).toISOString();
+
+    const payload: AppointmentPayload = {
+      arztName: formData.arztName,
+      arztArt: formData.arztArt,
+      termin,
+      erledigt: editingAppointment ? editingAppointment.erledigt : false,
+      bemerkungen: formData.bemerkungen,
+    };
+
+    if (editingAppointment) {
+      onUpdate(editingAppointment.id, payload);
+    } else {
+      onAdd(payload);
+    }
+  };
+
+  const inputClass =
+    '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 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
+          Termin. Klicken Sie auf &quot;Aktualisieren&quot;, um die Änderungen zu
+          speichern, oder &quot;Abbrechen&quot;, um zur Neuerfassung
+          zurückzukehren.
+        </div>
+      )}
+      <form onSubmit={handleSubmit}>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label
+              htmlFor="arztName"
+              className="block text-sm font-medium text-gray-800 mb-1"
+            >
+              Name des Arztes
+            </label>
+            <input
+              type="text"
+              id="arztName"
+              name="arztName"
+              className={inputClass}
+              value={formData.arztName}
+              onChange={handleChange}
+              required
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="arztArt"
+              className="block text-sm font-medium text-gray-800 mb-1"
+            >
+              Art des Arztes
+            </label>
+            <input
+              type="text"
+              id="arztArt"
+              name="arztArt"
+              className={inputClass}
+              placeholder="z.B. Zahnarzt, Kardiologe"
+              value={formData.arztArt}
+              onChange={handleChange}
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="terminDatum"
+              className="block text-sm font-medium text-gray-800 mb-1"
+            >
+              Datum
+            </label>
+            <input
+              type="date"
+              id="terminDatum"
+              name="terminDatum"
+              className={inputClass}
+              value={formData.terminDatum}
+              onChange={handleChange}
+              required
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="terminUhrzeit"
+              className="block text-sm font-medium text-gray-800 mb-1"
+            >
+              Uhrzeit
+            </label>
+            <input
+              type="time"
+              id="terminUhrzeit"
+              name="terminUhrzeit"
+              className={inputClass}
+              value={formData.terminUhrzeit}
+              onChange={handleChange}
+              required
+            />
+          </div>
+
+          <div className="md:col-span-2">
+            <label
+              htmlFor="bemerkungen"
+              className="block text-sm font-medium text-gray-800 mb-1"
+            >
+              Bemerkungen
+            </label>
+            <textarea
+              id="bemerkungen"
+              name="bemerkungen"
+              rows={3}
+              className={`${inputClass} resize-y`}
+              value={formData.bemerkungen}
+              onChange={handleChange}
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-center gap-4 mt-6">
+          <button
+            type="submit"
+            className="bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium py-2 px-8 rounded-lg transition-colors"
+          >
+            {editingAppointment ? 'Aktualisieren' : 'Speichern'}
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              if (editingAppointment) {
+                onCancelEdit();
+              } else {
+                setFormData(emptyForm);
+              }
+            }}
+            className="bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium py-2 px-8 rounded-lg transition-colors"
+          >
+            {editingAppointment ? 'Abbrechen' : 'Löschen'}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

components/AppointmentList.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { Appointment } from '@/types/appointment';
+
+interface AppointmentListProps {
+  appointments: Appointment[];
+  onToggleDone?: (id: string) => void;
+  onEdit?: (appointment: Appointment) => void;
+  onDelete?: (id: string) => void;
+}
+
+const weekdays = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
+
+const formatDate = (iso: string) => {
+  const d = new Date(iso);
+  const day = String(d.getDate()).padStart(2, '0');
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  return `${day}.${m}.${d.getFullYear()}`;
+};
+
+const formatTime = (iso: string) => {
+  const d = new Date(iso);
+  const h = String(d.getHours()).padStart(2, '0');
+  const min = String(d.getMinutes()).padStart(2, '0');
+  return `${h}:${min}`;
+};
+
+const getWeekday = (iso: string) => weekdays[new Date(iso).getDay()];
+
+export default function AppointmentList({
+  appointments,
+  onToggleDone,
+  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.
+      </div>
+    );
+  }
+
+  // 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">
+      <table className="w-full border-collapse">
+        <thead>
+          <tr className="bg-[#CCCCFF] border-b-2 border-gray-400">
+            <th className="p-2 text-center">Erledigt</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-left">Bemerkungen</th>
+            {hasActions && <th className="p-2 text-center">Aktion</th>}
+          </tr>
+        </thead>
+        <tbody>
+          {sorted.map((app, index) => (
+            <tr
+              key={app.id}
+              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'
+                  : index % 2 === 0
+                    ? 'bg-white'
+                    : 'bg-gray-50'
+              }`}
+            >
+              <td
+                className="p-2 text-center"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <input
+                  type="checkbox"
+                  className={`w-4 h-4 ${onToggleDone ? 'cursor-pointer' : ''}`}
+                  checked={app.erledigt}
+                  disabled={!onToggleDone}
+                  onChange={
+                    onToggleDone ? () => onToggleDone(app.id) : undefined
+                  }
+                />
+              </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-left">{app.bemerkungen || '-'}</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>
+      </table>
+    </div>
+  );
+}

components/ConfirmationModal.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+interface ConfirmationModalProps {
+  isOpen: boolean;
+  title?: string;
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export default function ConfirmationModal({
+  isOpen,
+  title,
+  message,
+  onConfirm,
+  onCancel,
+}: ConfirmationModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
+      onClick={onCancel}
+    >
+      <div
+        className="bg-white border border-gray-300 rounded-lg shadow-lg p-6 w-80 text-center"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {title && (
+          <h3 className="text-lg font-semibold text-gray-900 mb-3">{title}</h3>
+        )}
+        <p className="mb-6 text-gray-800 font-medium">{message}</p>
+        <div className="flex justify-center gap-4">
+          <button
+            onClick={onConfirm}
+            className="bg-red-500 hover:bg-red-600 text-white font-medium py-1.5 px-6 rounded-lg transition-colors"
+          >
+            Löschen
+          </button>
+          <button
+            onClick={onCancel}
+            className="bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium py-1.5 px-6 rounded-lg transition-colors"
+          >
+            Abbrechen
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

components/TabLayout.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import packageJson from '@/package.json';
+
+interface TabLayoutProps {
+  children: React.ReactNode;
+  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 ||
+    new Date().toLocaleDateString('de-DE', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+    });
+
+  return (
+    <div className="min-h-screen py-8 px-4">
+      {/* Äußerer Rahmen */}
+      <div className="max-w-316 mx-auto border-2 border-black rounded-xl bg-gray-200 p-6">
+        {/* Seitentitel */}
+        <h1 className="text-4xl font-bold text-center mb-6 tracking-tight">
+          Arzt-Termine
+        </h1>
+
+        {/* Innerer Inhalt */}
+        <div className="max-w-6xl mx-auto">
+          {/* Tab-Leiste */}
+          <div className="flex justify-between items-end">
+            <div className="flex">
+              {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 */}
+          <main className="border-2 border-black rounded-b-lg rounded-tr-lg p-6 bg-[#FFFFDD]">
+            {children}
+          </main>
+
+          <footer className="mt-8 flex justify-between items-center text-sm text-gray-600 px-4">
+            <a href="mailto:rxf@gmx.de" className="hover:underline">
+              mailto:rxf@gmx.de
+            </a>
+            <div>
+              Version {version} - {buildDate}
+            </div>
+          </footer>
+        </div>
+      </div>
+    </div>
+  );
+}

deploy.sh

@@ -1,37 +1,35 @@
 #!/bin/bash
 
-# Deploy Script
+# Deploy Script für aerzte-next
-# Baut die Produktions-Images und lädt sie zur Registry hoch
+# Baut das Docker Image und lädt es zu docker.citysensor.de hoch
 
 set -e
 
 # Konfiguration
 REGISTRY="docker.citysensor.de"
-PROJEKT="aerzte"
+IMAGE_NAME="aerzte-next"
-IMAGE_NAME=("${PROJEKT}-frontend" "${PROJEKT}-backend")
+TAG="${1:-latest}"  # Erster Parameter oder "latest"
-TAG="${TAG:-$(date +%Y%m%d%H%M)}"  # default Datum
+FULL_IMAGE="${REGISTRY}/${IMAGE_NAME}:${TAG}"
 
-# Build-Datum und Version
+# Build-Datum
 BUILD_DATE=$(date +%d.%m.%Y)
-VERSION=$(grep '"version"' frontend/package.json | head -1 | sed 's/.*"version": "\(.*\)".*/\1/')
 
 echo "=========================================="
-echo " Deploy Script"
+echo "Aerzte-Next Deploy Script"
 echo "=========================================="
 echo "Registry: ${REGISTRY}"
-echo "Images: ${IMAGE_NAME[*]}"
+echo "Image: ${IMAGE_NAME}"
 echo "Tag: ${TAG}"
-echo "Version: ${VERSION}"
 echo "Build-Datum: ${BUILD_DATE}"
 echo "=========================================="
 echo ""
 
-# 1. Login zur Registry (falls noch nicht eingeloggt)
+# 1. Login zur Registry
 echo ">>> Login zu ${REGISTRY}..."
 docker login "${REGISTRY}"
 echo ""
 
-# 2. Multiplatform Builder einrichten (docker-container driver erforderlich)
+# 2. Multiplatform Builder einrichten
 echo ">>> Richte Multiplatform Builder ein..."
 if ! docker buildx inspect multiplatform-builder &>/dev/null; then
   docker buildx create --name multiplatform-builder --driver docker-container --bootstrap
@@ -39,47 +37,22 @@ fi
 docker buildx use multiplatform-builder
 echo ""
 
-for image in "${IMAGE_NAME[@]}"; do
+# 3. Docker Image bauen und pushen
-  # Verzeichnisname = Image-Name ohne Projekt-Präfix (frontend / backend)
+echo ">>> Baue Multiplatform Docker Image und pushe zu Registry..."
-  IMAGE_DIR="${image#${PROJEKT}-}"
-  FULL_IMAGE="${REGISTRY}/${image}:${TAG}"
-
-  echo "=========================================="
-  echo ">>> Baue ${image}..."
-  echo ">>> Image: ${FULL_IMAGE}"
-  echo "=========================================="
-
-  # 3. Produktions-Image bauen und pushen (Multiplatform)
-  #    -> nutzt das jeweilige Dockerfile.prod (nginx bzw. npm start)
 docker buildx build \
   --platform linux/amd64 \
-    -f "./${IMAGE_DIR}/Dockerfile.prod" \
+  --build-arg BUILD_DATE="${BUILD_DATE}" \
   -t "${FULL_IMAGE}" \
   --push \
-    "./${IMAGE_DIR}"
+  .
-
-  # 4. Tagge auch als :${VERSION} und :latest
-  echo ">>> Tagge ${image} als :${VERSION} und :latest..."
-  docker buildx imagetools create \
-    -t "${REGISTRY}/${image}:${VERSION}" \
-    -t "${REGISTRY}/${image}:latest" \
-    "${FULL_IMAGE}"
-
-  echo "✓ ${image} erfolgreich gebaut und gepusht!"
-  echo ""
-done
-
-echo ">>> Alle Builds erfolgreich!"
 
+echo ">>> Build und Push erfolgreich!"
 echo ""
 echo "=========================================="
 echo "✓ Deploy erfolgreich abgeschlossen!"
 echo "=========================================="
-echo "Registry: ${REGISTRY}"
-echo "Projekt: ${PROJEKT}"
-echo "Tag: ${TAG}  (zusätzlich: ${VERSION}, latest)"
 echo ""
 echo "Auf dem Server ausführen:"
-echo "  docker compose -f docker-compose.images.yml pull"
+echo "  docker pull ${FULL_IMAGE}"
-echo "  docker compose -f docker-compose.images.yml up -d"
+echo "  docker compose -f docker-compose.prod.yml up -d"
 echo ""

docker-compose.images.yml

@@ -1,65 +0,0 @@
-# Produktions-Setup mit vorgebauten Images aus der Registry docker.citysensor.de.
-# Geeignet für Stack-Manager wie dockhand/Dockge, wo nur die Compose-Datei
-# im Stack-Verzeichnis liegt.
-#
-# 1) Images bauen und in die Registry pushen (im Projektverzeichnis mit Quellcode):
-#      docker build -t docker.citysensor.de/aerzte-backend:latest  -f ./backend/Dockerfile.prod  ./backend
-#      docker build -t docker.citysensor.de/aerzte-frontend:latest -f ./frontend/Dockerfile.prod ./frontend
-#      docker push docker.citysensor.de/aerzte-backend:latest
-#      docker push docker.citysensor.de/aerzte-frontend:latest
-#
-# 2) Diese Datei (+ .env) ins Stack-Verzeichnis legen und starten:
-#      docker compose pull && docker compose up -d
-#
-# Benötigt eine .env-Datei (siehe .env.example) mit:
-#   MONGO_ROOT_USER, MONGO_ROOT_PASSWD und optional FRONTEND_PORT, IMAGE_TAG.
-
-services:
-  mongodb:
-    image: mongo:latest
-    container_name: mongodb
-    restart: unless-stopped
-    # Kein Host-Port: MongoDB ist nur im internen Docker-Netz erreichbar
-    environment:
-      MONGO_INITDB_ROOT_USERNAME: ${MONGO_ROOT_USER}
-      MONGO_INITDB_ROOT_PASSWORD: ${MONGO_ROOT_PASSWD}
-    volumes:
-      - mongodb_data:/data/db
-      - mongodb_config:/data/configdb
-    networks:
-      - app-network
-
-  backend:
-    image: docker.citysensor.de/aerzte-backend:${IMAGE_TAG:-latest}
-    container_name: backend
-    restart: unless-stopped
-    # Kein Host-Port: Das Backend wird nur intern über nginx (Frontend) angesprochen
-    environment:
-      - PORT=3001
-      - NODE_ENV=production
-      - MONGO_URI=mongodb://${MONGO_ROOT_USER}:${MONGO_ROOT_PASSWD}@mongodb:27017/appointmentsdb?authSource=admin
-      # Frontend läuft über denselben Host (nginx-Proxy) -> kein Cross-Origin nötig.
-      - CORS_ORIGIN=${CORS_ORIGIN:-http://localhost:5173}
-    depends_on:
-      - mongodb
-    networks:
-      - app-network
-
-  frontend:
-    image: docker.citysensor.de/aerzte-frontend:${IMAGE_TAG:-latest}
-    container_name: frontend
-    restart: unless-stopped
-    ports:
-      - "${FRONTEND_PORT:-80}:80"
-    depends_on:
-      - backend
-    networks:
-      - app-network
-
-volumes:
-  mongodb_data:
-  mongodb_config:
-
-networks:
-  app-network:
-    driver: bridge

docker-compose.prod.yml

@@ -1,8 +1,8 @@
-# Produktions-Setup für den Serverbetrieb.
+# Produktions-Setup für den Serverbetrieb: Next.js-App + MongoDB
-# Starten mit:  docker compose -f docker-compose.prod.yml up -d --build
+# Starten mit:  docker compose -f docker-compose.prod.yml up -d
 #
-# Benötigt eine .env-Datei (siehe .env.example) mit:
+# Benötigt eine .env-Datei (siehe .env.example) mit
-#   MONGO_ROOT_USER, MONGO_ROOT_PASSWD und optional FRONTEND_PORT.
+#   MONGO_ROOT_USER, MONGO_ROOT_PASSWD und optional APP_PORT.
 
 services:
   mongodb:
@@ -19,35 +19,17 @@ services:
     networks:
       - app-network
 
-  backend:
+  app:
-    build:
+    image: docker.citysensor.de/aerzte-next:latest
-      context: ./backend
+    container_name: aerzte-app
-      dockerfile: Dockerfile.prod
-    container_name: backend
-    restart: unless-stopped
-    # Kein Host-Port: Das Backend wird nur intern über nginx (Frontend) angesprochen
-    environment:
-      - PORT=3001
-      - NODE_ENV=production
-      - MONGO_URI=mongodb://${MONGO_ROOT_USER}:${MONGO_ROOT_PASSWD}@mongodb:27017/appointmentsdb?authSource=admin
-      # Frontend läuft über denselben Host (nginx-Proxy) -> kein Cross-Origin nötig.
-      # Bei Bedarf hier die öffentliche Frontend-URL eintragen.
-      - CORS_ORIGIN=${CORS_ORIGIN:-http://localhost:5173}
-    depends_on:
-      - mongodb
-    networks:
-      - app-network
-
-  frontend:
-    build:
-      context: ./frontend
-      dockerfile: Dockerfile.prod
-    container_name: frontend
     restart: unless-stopped
     ports:
-      - "${FRONTEND_PORT:-80}:80"
+      - "${APP_PORT:-3000}:3000"
+    environment:
+      - NODE_ENV=production
+      - MONGO_URI=mongodb://${MONGO_ROOT_USER}:${MONGO_ROOT_PASSWD}@mongodb:27017/appointmentsdb?authSource=admin
     depends_on:
-      - backend
+      - mongodb
     networks:
       - app-network
 

docker-compose.yml

@@ -1,3 +1,8 @@
+# Lokales Entwicklungs-/Test-Setup: Next.js-App + MongoDB
+# Starten mit:  docker compose up -d --build
+#
+# Benötigt eine .env-Datei (siehe .env.example) mit
+#   MONGO_ROOT_USER, MONGO_ROOT_PASSWD und optional APP_PORT.
 
 services:
   mongodb:
@@ -15,41 +20,19 @@ services:
     networks:
       - app-network
 
-  backend:
+  app:
     build:
-      context: ./backend
+      context: .
       dockerfile: Dockerfile
-    container_name: backend
+    container_name: aerzte-app
     restart: unless-stopped
     ports:
-      - "3001:3001"
+      - "${APP_PORT:-3000}:3000"
     environment:
-      - PORT=3001
+      - NODE_ENV=production
       - MONGO_URI=mongodb://${MONGO_ROOT_USER}:${MONGO_ROOT_PASSWD}@mongodb:27017/appointmentsdb?authSource=admin
     depends_on:
       - mongodb
-    volumes:
-      - ./backend/src:/app/src
-      - ./backend/package.json:/app/package.json
-    networks:
-      - app-network
-
-  frontend:
-    build:
-      context: ./frontend
-      dockerfile: Dockerfile
-    container_name: frontend
-    restart: unless-stopped
-    ports:
-      - "5173:5173"
-    environment:
-      # Vite proxyt /api an das Backend im selben Compose-Netz
-      - VITE_PROXY_TARGET=http://backend:3001
-    depends_on:
-      - backend
-    volumes:
-      - ./frontend/src:/app/src
-      - ./frontend/package.json:/app/package.json
     networks:
       - app-network
 

eslint.config.mjs

@@ -0,0 +1,17 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

frontend/.dockerignore

@@ -1,5 +0,0 @@
-node_modules
-npm-debug.log
-dist
-.git
-.gitignore

frontend/Dockerfile

@@ -1,18 +0,0 @@
-FROM node:20-alpine
-
-WORKDIR /app
-
-# Copy package files
-COPY package*.json ./
-
-# Install dependencies
-RUN npm ci
-
-# Copy source code
-COPY . .
-
-# Expose Vite dev server port
-EXPOSE 5173
-
-# Start Vite dev server
-CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

frontend/Dockerfile.prod

@@ -1,23 +0,0 @@
-# --- Build-Stage: Statische Dateien mit Vite bauen ---
-FROM node:20-alpine AS build
-
-WORKDIR /app
-
-COPY package*.json ./
-RUN npm ci
-
-COPY . .
-RUN npm run build
-
-# --- Serve-Stage: Auslieferung über nginx ---
-FROM nginx:alpine
-
-# Eigene nginx-Konfiguration (statische Auslieferung + /api-Proxy)
-COPY nginx.conf /etc/nginx/conf.d/default.conf
-
-# Gebaute Dateien aus der Build-Stage übernehmen
-COPY --from=build /app/dist /usr/share/nginx/html
-
-EXPOSE 80
-
-CMD ["nginx", "-g", "daemon off;"]

frontend/README.md

@@ -1,16 +0,0 @@
-# React + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## React Compiler
-
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

frontend/eslint.config.js

@@ -1,36 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import { defineConfig, globalIgnores } from 'eslint/config'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{js,jsx}'],
-    extends: [
-      js.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-      parserOptions: {
-        ecmaVersion: 'latest',
-        ecmaFeatures: { jsx: true },
-        sourceType: 'module',
-      },
-    },
-    rules: {
-      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
-    },
-  },
-  {
-    // Konfigurationsdateien laufen in Node, nicht im Browser
-    files: ['*.config.js'],
-    languageOptions: {
-      globals: globals.node,
-    },
-  },
-])

frontend/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>aerzte</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>

frontend/nginx.conf

@@ -1,23 +0,0 @@
-server {
-    listen 80;
-    server_name _;
-
-    root /usr/share/nginx/html;
-    index index.html;
-
-    # API-Anfragen an das Backend weiterleiten.
-    # "backend" ist der Service-Name aus docker-compose.
-    location /api/ {
-        proxy_pass http://backend:3001;
-        proxy_http_version 1.1;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-    }
-
-    # SPA-Routing: alle übrigen Pfade auf index.html (React Router etc.)
-    location / {
-        try_files $uri $uri/ /index.html;
-    }
-}

frontend/package.json

@@ -1,28 +0,0 @@
-{
-  "name": "aerzte",
-  "type": "module", 
-  "private": true,
-  "version": "1.1.0",
-  "vdate": "2025-11-23 16:00 UTC",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@types/react": "^19.2.5",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.5.0",
-    "vite": "^7.2.4"
-  }
-}

frontend/src/App.css_org

@@ -1,73 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
-
-/* In AppStyles.css */
-
-/* Stellt den Delete-Button in die rechte Ecke des Headers */
-.appointment-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between; /* Verteilt Checkbox/Label und Button */
-    margin-bottom: 10px;
-}
-
-.doctor-info {
-    /* Nimmt den verfügbaren Platz ein */
-    flex-grow: 1; 
-}
-
-.delete-button {
-    background: none;
-    border: none;
-    color: #dc3545;
-    font-size: 1.2em;
-    cursor: pointer;
-    margin-left: 15px;
-    padding: 0 5px;
-    transition: color 0.2s;
-}
-
-.delete-button:hover {
-    color: #c82333;
-    transform: scale(1.1);
-}

frontend/src/App.jsx

@@ -1,288 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import AppointmentForm from './components/AppointmentForm';
-import AppointmentList from './components/AppointmentList';
-import ConfirmationModal from './components/ConfirmationModal';
-import './AppStyles.css';
-
-// Die Basis-URL der Express-API
-// Standardmäßig relativ ("/api/appointments"), damit der Browser denselben
-// Host wie das Frontend anspricht. In Produktion leitet nginx /api an das
-// Backend weiter, im Dev-Modus übernimmt das der Vite-Proxy (vite.config.js).
-// Über VITE_API_URL kann optional ein absoluter Backend-Host gesetzt werden.
-const API_BASE = import.meta.env.VITE_API_URL ?? '';
-const API_URL = `${API_BASE}/api/appointments`;
-
-// Funktion zur Umwandlung von MongoDBs _id in die interne id des Frontends
-const normalizeAppointment = (appointment) => ({
-    // Wichtig: _id von Mongo in id umbenennen
-    id: appointment._id, 
-    arztName: appointment.arztName,
-    arztArt: appointment.arztArt,
-    // Termine kommen als String vom Backend, muss in Date-Objekt umgewandelt werden
-    termin: new Date(appointment.termin),
-    erledigt: appointment.erledigt,
-    bemerkungen: appointment.bemerkungen,
-});
-
-function App() {
-  const [appointments, setAppointments] = useState([]);
-  const [editingAppointment, setEditingAppointment] = useState(null); 
-  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();
-  }, []); // [] sorgt dafür, dass es nur einmal beim Mounten ausgeführt wird
-
-  const fetchAppointments = async () => {
-    try {
-      const response = await fetch(API_URL);
-      if (!response.ok) throw new Error('Netzwerkantwort war nicht ok.');
-      
-      const data = await response.json();
-      
-      // Daten aus dem Backend aufbereiten (konvertiere _id und termin)
-      const normalizedData = data.map(normalizeAppointment); 
-      setAppointments(normalizedData);
-      
-    } catch (error) {
-      console.error("Fehler beim Laden der Termine:", error);
-      // Optional: Fehlermeldung anzeigen
-    }
-  };
-
-  // 1. CREATE: Neuen Termin erstellen
-  const addAppointment = async (newApp) => {
-    // Vor dem Senden die temporäre ID und das Date-Objekt entfernen/umwandeln
-    const appToSend = {
-      ...newApp,
-      // Date-Objekt in ISO-String umwandeln (von Mongo erwartet)
-      termin: newApp.termin.toISOString(), 
-      id: undefined // Lokale ID entfernen
-    };
-    
-    try {
-        const response = await fetch(API_URL, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(appToSend),
-        });
-
-        if (!response.ok) throw new Error('Fehler beim Hinzufügen des Termins.');
-
-        const addedApp = await response.json();
-        
-        // Fügt den normalisierten Termin (mit Mongo _id) zum State hinzu
-        setAppointments(prev => [...prev, normalizeAppointment(addedApp)]);
-        setEditingAppointment(null);
-        
-    } catch (error) {
-        console.error("Fehler beim Speichern des Termins:", error);
-    }
-  };
-
-
-  // 2. UPDATE: Bestehenden Termin aktualisieren (vom Formular)
-  const updateAppointment = async (updatedApp) => {
-    const mongoId = updatedApp.id; // Die ID ist jetzt die MongoDB _id
-
-    const appToSend = {
-        ...updatedApp,
-        termin: updatedApp.termin.toISOString(),
-        id: undefined, // Lokale ID entfernen
-    };
-    
-    try {
-        const response = await fetch(`${API_URL}/${mongoId}`, {
-            method: 'PUT',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(appToSend),
-        });
-
-        if (!response.ok) throw new Error('Fehler beim Aktualisieren des Termins.');
-
-        // Nach erfolgreichem Update den State lokal aktualisieren.
-        // Wichtig: updatedApp stammt aus dem Formular und hat bereits ein
-        // Feld "id" (kein "_id"), daher hier NICHT normalizeAppointment nutzen –
-        // sonst würde die ID verloren gehen. Wir behalten die bestehende id
-        // und übernehmen die aktualisierten Felder.
-        setAppointments(prev =>
-            prev.map(app =>
-                app.id === mongoId
-                    ? {
-                        id: mongoId,
-                        arztName: updatedApp.arztName,
-                        arztArt: updatedApp.arztArt,
-                        termin: updatedApp.termin, // bereits ein Date-Objekt
-                        erledigt: updatedApp.erledigt,
-                        bemerkungen: updatedApp.bemerkungen,
-                    }
-                    : app
-            )
-        );
-        setEditingAppointment(null);
-        
-    } catch (error) {
-        console.error("Fehler beim Aktualisieren des Termins:", error);
-    }
-  };
-  
-  // 3. UPDATE: Statuswechsel (Toggle Done)
-  const toggleDone = async (id) => {
-    const currentApp = appointments.find(app => app.id === id);
-    if (!currentApp) return;
-
-    const newStatus = !currentApp.erledigt;
-    
-    try {
-      // Nur das erledigt-Feld senden
-      const response = await fetch(`${API_URL}/${id}`, {
-          method: 'PUT',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ erledigt: newStatus }),
-      });
-
-      if (!response.ok) throw new Error('Fehler beim Statuswechsel.');
-      
-      // Lokalen State synchronisieren, wenn Backend erfolgreich war
-      setAppointments(prev =>
-          prev.map(app => 
-              app.id === id ? { ...app, erledigt: newStatus } : app
-          )
-      );
-
-    } catch (error) {
-      console.error("Fehler beim Statuswechsel:", error);
-    }
-  };
-  
-// 4. DELETE LOGIK START
-
-  // 1. Wird vom Löschen-Button in der Liste aufgerufen (öffnet das Modal)
-  const openDeleteModal = (id) => {
-    setAppointmentToDeleteId(id);
-    setIsModalOpen(true);
-  };
-
-  // 2. Wird vom 'Abbrechen'-Button des Modals aufgerufen
-  const handleCancelDelete = () => {
-    setAppointmentToDeleteId(null);
-    setIsModalOpen(false);
-  };
-  
-  // 3. Wird vom 'Bestätigen'-Button des Modals aufgerufen (führt die Löschung aus)
-  const handleConfirmDelete = async () => {
-    const id = appointmentToDeleteId;
-    
-    // Status zurücksetzen, bevor die asynchrone Funktion aufgerufen wird
-    setIsModalOpen(false);
-    setAppointmentToDeleteId(null); 
-    
-    if (!id) return; // Sicherheit
-
-    try {
-        const response = await fetch(`${API_URL}/${id}`, {
-            method: 'DELETE',
-        });
-
-        if (response.status !== 204) throw new Error('Fehler beim Löschen des Termins.');
-
-        // Lokalen State synchronisieren
-        setAppointments(prev => prev.filter(app => app.id !== id));
-
-        if (editingAppointment && editingAppointment.id === id) {
-            setEditingAppointment(null);
-        }
-
-    } catch (error) {
-        console.error("Fehler beim Löschen des Termins:", error);
-        // Optional: Fehlermeldung anzeigen
-    }
-  };
-
-  // ... (startEdit und cancelEdit bleiben unverändert, sie manipulieren nur den lokalen State)
-
-  return (
-    <div className="app-container">
-      <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}
-          title="Termin löschen bestätigen"
-          message="Möchten Sie diesen Termin wirklich unwiderruflich löschen? Diese Aktion kann nicht rückgängig gemacht werden."
-          onConfirm={handleConfirmDelete}
-          onCancel={handleCancelDelete}
-        />
-      </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>
-  );
-}
-
-export default App;

frontend/src/AppStyles.css

@@ -1,278 +0,0 @@
-/* Globale Styles für App.js */
-body {
-    margin: 0;
-    background-color: #f9f9f9;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    color: #333;
-    /* NEU: Flexbox für die Zentrierung */
-    display: flex; 
-    justify-content: center; /* Zentriert horizontal */
-    align-items: flex-start; /* Hält den Inhalt oben, falls er kürzer als der Bildschirm ist */
-    min-height: 100vh; /* Stellt sicher, dass die Seite mindestens die volle Höhe des Viewports hat */
-}
-
-.app-container {
-    /* Die maximale Breite beibehalten, aber Padding anpassen */
-    padding: 40px 20px;
-    max-width: 900px;
-    width: 100%; /* Wichtig, damit max-width funktioniert */
-    /* min-height-Einstellung ist nun im Body */
-}
-
-.app-header {
-    text-align: center;
-    margin-bottom: 40px;
-    border-bottom: 2px solid #007bff;
-    padding-bottom: 10px;
-}
-
-.app-header h1 {
-    color: #007bff;
-    margin-top: 0;
-}
-
-.separator {
-    border: 0;
-    border-top: 1px solid #ddd;
-    margin: 40px 0;
-}
-
-.debug-output {
-    background-color: #fff;
-    padding: 15px;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-}
-
-.debug-output pre {
-    font-size: 12px;
-    white-space: pre-wrap;
-    word-break: break-all;
-}
-
-/* Styles für AppointmentForm.jsx */
-.form-container {
-    background-color: #fff;
-    padding: 30px;
-    border-radius: 10px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-}
-
-.form-container h3 {
-    border-bottom: 2px solid #f0f0f0;
-    padding-bottom: 10px;
-    margin-bottom: 20px;
-    color: #333;
-}
-
-.input-group {
-    margin-bottom: 15px;
-}
-
-.input-group label {
-    display: block;
-    margin-bottom: 5px;
-    font-weight: bold;
-    color: #555;
-}
-
-.input-group input,
-.input-group textarea {
-    width: 100%;
-    padding: 10px;
-    border-radius: 5px;
-    border: 1px solid #ccc;
-    box-sizing: border-box; /* Stellt sicher, dass Padding und Border zur Gesamtbreite gehören */
-}
-
-.input-group textarea {
-    resize: vertical;
-}
-
-.date-time-control {
-    display: flex;
-    gap: 15px;
-}
-
-.date-time-control > div {
-    flex: 1;
-}
-
-.submit-button {
-    background-color: #28a745;
-    color: white;
-    padding: 12px 20px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 16px;
-    margin-top: 20px;
-    transition: background-color 0.3s;
-}
-
-.submit-button:hover {
-    background-color: #218838;
-}
-
-/* Styles für AppointmentList und AppointmentItem */
-.appointment-list {
-    list-style: none;
-    padding: 0;
-}
-
-.appointment-item {
-    background-color: #fff;
-    padding: 15px;
-    margin-bottom: 10px;
-    border-radius: 8px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-    border-left: 5px solid #007bff; /* Offene Termine */
-    transition: all 0.3s;
-}
-
-.appointment-item.done {
-    opacity: 0.6;
-    border-left: 5px solid #28a745; /* Erledigte Termine */
-    background-color: #e9f5ee;
-}
-
-.appointment-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-}
-
-.appointment-header input[type="checkbox"] {
-    width: 20px;
-    height: 20px;
-    margin-right: 15px;
-    cursor: pointer;
-}
-
-.doctor-info {
-    font-size: 1.1em;
-    color: #007bff;
-    font-weight: 600;
-}
-
-.appointment-item.done .doctor-info,
-.appointment-item.done .appointment-date,
-.appointment-item.done .appointment-notes {
-    text-decoration: line-through;
-}
-
-.arzt-art {
-    font-weight: normal;
-    font-size: 0.9em;
-    color: #6c757d;
-    margin-left: 5px;
-}
-
-.appointment-date {
-    margin: 5px 0;
-    margin-left: 35px; /* Alignment mit der Checkbox */
-    font-size: 0.9em;
-    color: #495057;
-}
-
-.appointment-notes {
-    margin: 5px 0 0 35px;
-    padding-top: 5px;
-    border-top: 1px dashed #eee;
-    font-size: 0.85em;
-    color: #6c757d;
-}
-
-.no-appointments-message {
-    text-align: center;
-    padding: 20px;
-    background-color: #fffae6;
-    border: 1px solid #ffeeba;
-    border-radius: 5px;
-    color: #856404;
-}
-
-.cancel-button {
-    background-color: #dc3545;
-    color: white;
-    padding: 12px 20px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 16px;
-    margin-top: 20px;
-    margin-left: 10px;
-    transition: background-color 0.3s;
-}
-
-.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;
-    }
-}

frontend/src/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

frontend/src/components/AppointmentForm.jsx

@@ -1,158 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-// Hilfsfunktion: Format-Konvertierung vom Date-Objekt zurück ins Formular-Format
-const formatTimeToInput = (date) => date.toTimeString().slice(0, 5); // HH:MM
-const formatDateToInput = (date) => date.toISOString().split('T')[0]; // YYYY-MM-DD
-
-const AppointmentForm = ({ onAddAppointment, editingAppointment, onUpdateAppointment, onCancelEdit }) => {
-  
-  const initialFormData = {
-    arztName: '',
-    arztArt: '',
-    terminDatum: '',
-    terminUhrzeit: '',
-    bemerkungen: '',
-  };
-  const [formData, setFormData] = useState(initialFormData);
-
-  // Füllt das Formular, wenn editingAppointment gesetzt wird
-  useEffect(() => {
-    if (editingAppointment) {
-      setFormData({
-        arztName: editingAppointment.arztName,
-        arztArt: editingAppointment.arztArt,
-        terminDatum: formatDateToInput(editingAppointment.termin),
-        terminUhrzeit: formatTimeToInput(editingAppointment.termin),
-        bemerkungen: editingAppointment.bemerkungen,
-      });
-    } else {
-      // Leert das Formular, wenn Bearbeitung abgeschlossen/abgebrochen
-      setFormData(initialFormData);
-    }
-  }, [editingAppointment]);
-  
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    setFormData(prevData => ({
-      ...prevData,
-      [name]: value
-    }));
-  };
-
- const handleSubmit = (e) => {
-    e.preventDefault();
-
-    if (!formData.arztName || !formData.terminDatum || !formData.terminUhrzeit) {
-      alert("Bitte füllen Sie Name, Datum und Uhrzeit aus.");
-      return;
-    }
-
-    const baseAppointment = {
-      ...formData,
-      // Datum und Uhrzeit zusammenführen
-      termin: new Date(`${formData.terminDatum}T${formData.terminUhrzeit}`),
-      erledigt: editingAppointment ? editingAppointment.erledigt : false 
-    };
-
-    if (editingAppointment) {
-      // UPDATE: Füge die Mongo-ID hinzu und rufe die Update-Funktion auf
-      onUpdateAppointment({ 
-        ...baseAppointment,
-        id: editingAppointment.id 
-      });
-    } else {
-      // ADD: Ruft die Add-Funktion auf (keine temporäre ID mehr erforderlich)
-      onAddAppointment(baseAppointment); 
-    }
-};
-
-  return (
-    <form onSubmit={handleSubmit} className="form-container">
-      <h3 className="form-title">
-        {editingAppointment ? '✍️ Termin bearbeiten' : '🗓️ Neuen Termin hinzufügen'}
-      </h3>
-      
-      {/* Name des Arztes */}
-      <div className="input-group">
-        <label htmlFor="arztName">Name des Arztes:</label>
-        <input
-          type="text"
-          id="arztName"
-          name="arztName"
-          value={formData.arztName}
-          onChange={handleChange}
-          required
-        />
-      </div>
-
-      {/* Art des Arztes */}
-      <div className="input-group">
-        <label htmlFor="arztArt">Art des Arztes:</label>
-        <input
-          type="text"
-          id="arztArt"
-          name="arztArt"
-          value={formData.arztArt}
-          onChange={handleChange}
-          placeholder="z.B. Zahnarzt, Kardiologe"
-        />
-      </div>
-
-      {/* Datum und Uhrzeit */}
-      <div className="input-group">
-        <label>Termin:</label>
-        <div className="date-time-control">
-            <div>
-                <input
-                    type="date"
-                    id="terminDatum"
-                    name="terminDatum"
-                    value={formData.terminDatum}
-                    onChange={handleChange}
-                    required
-                />
-            </div>
-            <div>
-                <input
-                    type="time"
-                    id="terminUhrzeit"
-                    name="terminUhrzeit"
-                    value={formData.terminUhrzeit}
-                    onChange={handleChange}
-                    required
-                />
-            </div>
-        </div>
-      </div>
-      
-      {/* Bemerkungen */}
-      <div className="input-group">
-        <label htmlFor="bemerkungen">Bemerkungen:</label>
-        <textarea
-          id="bemerkungen"
-          name="bemerkungen"
-          value={formData.bemerkungen}
-          onChange={handleChange}
-          rows="3"
-        />
-      </div>
-
-      <button type="submit" className="submit-button">
-        {editingAppointment ? 'Änderungen speichern' : 'Termin speichern'}
-      </button>
-
-      {/* Abbrechen-Button nur im Bearbeitungsmodus anzeigen */}
-      {editingAppointment && (
-        <button 
-          type="button" 
-          onClick={onCancelEdit}
-          className="cancel-button"
-        >
-          Bearbeitung abbrechen
-        </button>
-      )}
-    </form>
-  );
-};
-
-export default AppointmentForm;

frontend/src/components/AppointmentItem.jsx

@@ -1,56 +0,0 @@
-import React from 'react';
-
-const formatDate = (date) => {
-  const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' };
-  return date.toLocaleDateString('de-DE', options);
-};
-
-// NEUE PROP: onEdit
-const AppointmentItem = ({ appointment, onToggleDone, onEdit, onDelete }) => {
-  const { id, arztName, arztArt, termin, erledigt, bemerkungen } = appointment;
-
-  const itemClass = erledigt ? 'appointment-item done' : 'appointment-item';
-
-  return (
-    // Klick auf das Item startet den Bearbeitungsmodus
-    <li className={itemClass} onClick={() => onEdit(appointment)}> 
-      <div className="appointment-header" 
-      onClick={(e) => e.stopPropagation()} >
-        <input 
-          type="checkbox" 
-          checked={erledigt} 
-          onChange={(e) => { 
-            e.stopPropagation(); // Verhindert, dass der Klick das Bearbeitungs-Event auslöst
-            onToggleDone(id); // Führt nur den Statuswechsel aus
-          }} 
-          id={`check-${id}`}
-        />
-        <label htmlFor={`check-${id}`} className="doctor-info">
-          <strong>{arztName}</strong> {arztArt && <span className="arzt-art">({arztArt})</span>}
-        </label>
-        <button 
-            className="delete-button"
-            onClick={(e) => {
-                e.stopPropagation(); // Verhindert, dass das Bearbeiten ausgelöst wird
-                onDelete(id);
-            }}
-            title="Termin löschen"
-        >
-            🗑️
-        </button>
-      </div>
-
-      <p className="appointment-date">
-        <strong>Termin:</strong> {formatDate(termin)}
-      </p>
-
-      {bemerkungen && (
-        <p className="appointment-notes">
-          <strong>Bemerkungen:</strong> {bemerkungen}
-        </p>
-      )}
-    </li>
-  );
-};
-
-export default AppointmentItem;

frontend/src/components/AppointmentList.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import AppointmentItem from './AppointmentItem';
-
-// NEUE PROP: onEdit
-const AppointmentList = ({ appointments, onToggleDone, onEdit, onDelete }) => {
-  
-  if (appointments.length === 0) {
-    return <p className="no-appointments-message">Keine Termine vorhanden. Fügen Sie oben einen neuen Termin hinzu!</p>;
-  }
-
-  return (
-    <ul className="appointment-list">
-      {appointments
-        // Termine nach Datum sortieren
-        .sort((a, b) => a.termin - b.termin)
-        .map(appointment => (
-          <AppointmentItem 
-            key={appointment.id} 
-            appointment={appointment} 
-            onToggleDone={onToggleDone} 
-            onEdit={onEdit} // Funktion an das Item weitergeben
-            onDelete={onDelete} // NEU: Übergabe an das Item
-          />
-        ))}
-    </ul>
-  );
-};
-
-export default AppointmentList;

frontend/src/components/ConfirmationModal.jsx

@@ -1,40 +0,0 @@
-// src/components/ConfirmationModal.jsx
-import React from 'react';
-import './ModalStyles.css'; // Wird gleich definiert
-
-const ConfirmationModal = ({ isOpen, title, message, onConfirm, onCancel }) => {
-  if (!isOpen) {
-    return null;
-  }
-
-  return (
-    // Hintergrund-Overlay (schließt das Modal bei Klick außerhalb)
-    <div className="modal-overlay" onClick={onCancel}>
-      <div 
-        className="modal-content" 
-        // WICHTIG: Stoppt Event-Bubbling, damit Klick auf Content das Modal nicht schließt
-        onClick={(e) => e.stopPropagation()}
-      >
-        <h3 className="modal-title">{title}</h3>
-        <p className="modal-message">{message}</p>
-        
-        <div className="modal-actions">
-          <button 
-            className="modal-button cancel" 
-            onClick={onCancel}
-          >
-            Abbrechen
-          </button>
-          <button 
-            className="modal-button confirm" 
-            onClick={onConfirm}
-          >
-            Bestätigen und Löschen
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ConfirmationModal;

frontend/src/components/ModalStyles.css

@@ -1,74 +0,0 @@
-/* src/components/ModalStyles.css */
-
-.modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.6); /* Dunkles, halbtransparentes Overlay */
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000; /* Stellt sicher, dass es über allem liegt */
-}
-
-.modal-content {
-    background: white;
-    padding: 30px;
-    border-radius: 12px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    width: 90%;
-    max-width: 450px;
-    animation: fadeIn 0.3s ease-out;
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(-20px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-.modal-title {
-    color: #dc3545;
-    border-bottom: 2px solid #f0f0f0;
-    padding-bottom: 10px;
-    margin-top: 0;
-}
-
-.modal-message {
-    color: #333;
-    margin-bottom: 30px;
-}
-
-.modal-actions {
-    display: flex;
-    justify-content: flex-end; /* Buttons nach rechts ausrichten */
-    gap: 10px;
-}
-
-.modal-button {
-    padding: 10px 18px;
-    border: none;
-    border-radius: 6px;
-    font-weight: bold;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.modal-button.cancel {
-    background-color: #f0f0f0;
-    color: #333;
-}
-
-.modal-button.cancel:hover {
-    background-color: #ddd;
-}
-
-.modal-button.confirm {
-    background-color: #dc3545; /* Rot für Löschaktion */
-    color: white;
-}
-
-.modal-button.confirm:hover {
-    background-color: #c82333;
-}

frontend/src/index.css

@@ -1,68 +0,0 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

frontend/src/main.jsx

@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
-
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)

frontend/vite.config.js

@@ -1,27 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-// Im Dev-Modus laufen Frontend (5173) und Backend (3001) getrennt.
-// Damit das Frontend trotzdem relative URLs ("/api/...") verwenden kann,
-// proxyt Vite alle /api-Anfragen an das Backend. Das Ziel ist konfigurierbar:
-// - lokal ohne Docker: http://localhost:3001 (Standard)
-// - Docker-Dev: VITE_PROXY_TARGET=http://backend:3001
-const proxyTarget = process.env.VITE_PROXY_TARGET || 'http://localhost:3001'
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    host: '0.0.0.0',
-    port: 5173,
-    watch: {
-      usePolling: true
-    },
-    proxy: {
-      '/api': {
-        target: proxyTarget,
-        changeOrigin: true
-      }
-    }
-  }
-})

lib/db.ts

@@ -0,0 +1,32 @@
+import { MongoClient, Db } from 'mongodb';
+
+// MongoDB Verbindungs-URI aus der Umgebung.
+// Standard: lokale Instanz mit Datenbank "appointmentsdb".
+const uri = process.env.MONGO_URI || 'mongodb://localhost:27017/appointmentsdb';
+
+// Im Next.js-Dev-Modus wird das Modul bei jedem Hot-Reload neu ausgewertet.
+// Damit nicht bei jeder Änderung eine neue Verbindung aufgebaut wird, wird
+// der Client (bzw. das Promise) global zwischengespeichert.
+const globalForMongo = globalThis as unknown as {
+  _mongoClientPromise?: Promise<MongoClient>;
+};
+
+function getClientPromise(): Promise<MongoClient> {
+  if (!globalForMongo._mongoClientPromise) {
+    const client = new MongoClient(uri);
+    globalForMongo._mongoClientPromise = client.connect();
+  }
+  return globalForMongo._mongoClientPromise;
+}
+
+/**
+ * Gibt die (verbundene) Datenbankinstanz zurück.
+ * Die Datenbank wird aus der URI abgeleitet.
+ */
+export async function getDb(): Promise<Db> {
+  const client = await getClientPromise();
+  return client.db();
+}
+
+// Name der Collection zentral definiert.
+export const APPOINTMENTS_COLLECTION = 'appointments';

next.config.ts

@@ -0,0 +1,24 @@
+import type { NextConfig } from "next";
+import path from "path";
+
+const nextConfig: NextConfig = {
+  output: 'standalone',
+  turbopack: {
+    root: path.resolve(__dirname),
+  },
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          { key: 'X-Frame-Options', value: 'DENY' },
+          { key: 'X-Content-Type-Options', value: 'nosniff' },
+          { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
+          { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
+        ],
+      },
+    ];
+  },
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "aerzte-next",
+  "version": "2.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "mongodb": "^7.0.0",
+    "next": "16.1.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}

types/appointment.ts

@@ -0,0 +1,27 @@
+export interface Appointment {
+  id: string;
+  arztName: string;
+  arztArt?: string;
+  // termin als ISO-String (kommt so vom API-Route)
+  termin: string;
+  erledigt: boolean;
+  bemerkungen?: string;
+}
+
+// Für das Formular: Datum und Uhrzeit getrennt
+export interface AppointmentFormData {
+  arztName: string;
+  arztArt: string;
+  terminDatum: string;
+  terminUhrzeit: string;
+  bemerkungen: string;
+}
+
+// Payload, der an die API gesendet wird (create/update)
+export interface AppointmentPayload {
+  arztName: string;
+  arztArt?: string;
+  termin: string;
+  erledigt: boolean;
+  bemerkungen?: string;
+}