Initial commit: Kalender, Buchungen mit Slot-Reservierung, Resend-E-Mails, Admin-UI, Startscript

src/client/components/admin-availability.tsx

@@ -0,0 +1,94 @@
+import { useState } from "react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { queryClient } from "@/client/rpc-client";
+
+export function AdminAvailability() {
+  const today = new Date().toISOString().split("T")[0];
+  const [selectedDate, setSelectedDate] = useState<string>(today);
+  const [time, setTime] = useState<string>("09:00");
+  const [duration, setDuration] = useState<number>(30);
+
+  const { data: slots } = useQuery(
+    queryClient.availability.live.byDate.experimental_liveOptions(selectedDate)
+  );
+
+  const { mutate: createSlot, isPending: isCreating } = useMutation(
+    queryClient.availability.create.mutationOptions()
+  );
+  const { mutate: removeSlot } = useMutation(
+    queryClient.availability.remove.mutationOptions()
+  );
+
+  const addSlot = () => {
+    if (!selectedDate || !time || !duration) return;
+    createSlot({ sessionId: localStorage.getItem("sessionId") || "", date: selectedDate, time, durationMinutes: duration });
+  };
+
+  return (
+    <div className="max-w-3xl mx-auto space-y-6">
+      <h2 className="text-xl font-semibold">Verfügbarkeiten verwalten</h2>
+
+      <div className="flex items-center gap-3">
+        <input
+          type="date"
+          value={selectedDate}
+          onChange={(e) => setSelectedDate(e.target.value)}
+          className="border rounded px-3 py-2"
+        />
+        <input
+          type="time"
+          value={time}
+          onChange={(e) => setTime(e.target.value)}
+          className="border rounded px-3 py-2"
+        />
+        <input
+          type="number"
+          min={5}
+          step={5}
+          value={duration}
+          onChange={(e) => setDuration(Number(e.target.value))}
+          className="border rounded px-3 py-2 w-28"
+        />
+        <button
+          onClick={addSlot}
+          disabled={isCreating}
+          className="bg-black text-white px-4 py-2 rounded"
+        >
+          {isCreating ? "Anlegen..." : "Slot hinzufügen"}
+        </button>
+      </div>
+
+      <div className="space-y-2">
+        <h3 className="font-medium">Slots am {selectedDate}</h3>
+        <div className="grid grid-cols-1 gap-2">
+          {slots?.sort((a, b) => a.time.localeCompare(b.time)).map((slot) => (
+            <div key={slot.id} className="flex items-center justify-between border rounded px-3 py-2">
+              <div className="flex items-center gap-3">
+                <span className="font-mono">{slot.time}</span>
+                <span className="text-sm text-gray-600">{slot.durationMinutes} Min</span>
+                <span className={`text-xs px-2 py-1 rounded ${slot.status === "free" ? "bg-green-100 text-green-800" : "bg-yellow-100 text-yellow-800"}`}>
+                  {slot.status === "free" ? "frei" : "reserviert"}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => removeSlot({ sessionId: localStorage.getItem("sessionId") || "", id: slot.id })}
+                  className="text-red-600 hover:underline"
+                  disabled={slot.status === "reserved"}
+                  title={slot.status === "reserved" ? "Slot ist reserviert" : "Slot löschen"}
+                >
+                  Löschen
+                </button>
+              </div>
+            </div>
+          ))}
+          {slots?.length === 0 && (
+            <div className="text-sm text-gray-600">Keine Slots vorhanden.</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+