first commit

2026-01-13 18:08:59 +01:00
commit 5d2630a02f
41 changed files with 1632 additions and 0 deletions
--- a/components/CalendarBoard.tsx
+++ b/components/CalendarBoard.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import listPlugin from "@fullcalendar/list";
+import interactionPlugin from "@fullcalendar/interaction";
+import { useSession } from "next-auth/react";
+
+type EventItem = {
+  id: string;
+  title: string;
+  description?: string | null;
+  location?: string | null;
+  startAt: string;
+  endAt: string;
+  status: string;
+};
+
+export default function CalendarBoard() {
+  const { data } = useSession();
+  const [events, setEvents] = useState<EventItem[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const fetchEvents = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch("/api/events");
+      if (!response.ok) {
+        throw new Error("Events konnten nicht geladen werden.");
+      }
+      const payload = await response.json();
+      setEvents(payload);
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (data?.user) {
+      fetchEvents();
+    }
+  }, [data?.user]);
+
+  const calendarEvents = useMemo(
+    () =>
+      events.map((event) => ({
+        id: event.id,
+        title: event.title,
+        start: event.startAt,
+        end: event.endAt,
+        extendedProps: {
+          status: event.status,
+          location: event.location,
+          description: event.description
+        }
+      })),
+    [events]
+  );
+
+  if (!data?.user) {
+    return (
+      <div className="rounded border border-dashed border-slate-300 bg-white p-8 text-center">
+        <p className="text-slate-700">
+          Bitte anmelden, um die Vereinskalender zu sehen.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <section className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold">Kalender</h2>
+        <button
+          type="button"
+          onClick={fetchEvents}
+          className="rounded border border-slate-300 px-3 py-1.5 text-sm text-slate-700"
+        >
+          Aktualisieren
+        </button>
+      </div>
+      {error && <p className="text-sm text-red-600">{error}</p>}
+      {loading && <p className="text-sm text-slate-500">Lade Termine...</p>}
+      <div className="rounded bg-white p-4 shadow-sm">
+        <FullCalendar
+          plugins={[dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin]}
+          initialView="dayGridMonth"
+          headerToolbar={{
+            left: "prev,next today",
+            center: "title",
+            right: "dayGridMonth,timeGridWeek,listWeek"
+          }}
+          events={calendarEvents}
+          eventContent={(arg) => {
+            const status = arg.event.extendedProps.status;
+            return (
+              <div>
+                <div className="text-sm font-medium">{arg.event.title}</div>
+                {status !== "APPROVED" && (
+                  <div className="text-xs text-amber-600">{status}</div>
+                )}
+              </div>
+            );
+          }}
+          height="auto"
+        />
+      </div>
+    </section>
+  );
+}