Umstellung auf Next.js (App Router), Design analog werte-next

Führt das getrennte React/Vite-Frontend und Express/MongoDB-Backend in eine einzelne Next.js-Anwendung zusammen: - UI: React-Client-Komponenten (TabLayout, AppointmentForm, -List, ConfirmationModal) im Look von werte-next (Farben #CCCCFF/#85B7D7/ #FFFFDD, Rahmenbox, Tabellen-Liste, Footer mit Version/Datum) - API: Next.js Route Handler unter /api/appointments (GET/POST/PUT/DELETE, Soft-Delete beibehalten) - DB: MongoDB via lib/db.ts (gecachter Client, Standard appointmentsdb) - Tailwind 4 + TypeScript, Standalone-Docker-Build wie werte-next - Druckansicht der aktuellen offenen Termine beibehalten - Deployment: Dockerfile (multi-stage), docker-compose(.prod), deploy.sh Entfernt die alten frontend/- und backend/-Verzeichnisse. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-01 14:24:34 +02:00
parent 91a31f04b1
commit 1a0fe18e89
55 changed files with 8216 additions and 1756 deletions
@@ -0,0 +1,76 @@
+'use client';
+
+import packageJson from '@/package.json';
+
+interface TabLayoutProps {
+  children: React.ReactNode;
+  onPrint?: () => void;
+}
+
+export default function TabLayout({ children, onPrint }: TabLayoutProps) {
+  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">
+              <span
+                className="px-6 py-2 text-sm font-semibold border-t-2 border-l-2 border-r-2 rounded-tl-lg rounded-tr-lg mr-1"
+                style={{
+                  backgroundColor: '#FFFFDD',
+                  color: '#000000',
+                  borderColor: '#000000',
+                  borderBottom: '2px solid #FFFFDD',
+                  marginBottom: '-2px',
+                  position: 'relative',
+                  zIndex: 10,
+                }}
+              >
+                Termine
+              </span>
+            </div>
+            <div className="pb-1">
+              <button
+                onClick={onPrint}
+                className="px-4 py-2 bg-[#85B7D7] hover:bg-[#6a9fc5] text-black text-sm rounded-lg shadow-md transition-colors"
+              >
+                🖨️ Aktuelle Termine drucken
+              </button>
+            </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>
+  );
+}