Verbessere Booking-Form UX: Reset selectedTime bei Treatment-Wechsel, bessere Loading-States und lokale Datumsvalidierung

src/client/components/admin-availability.tsx

@@ -9,6 +9,22 @@ export function AdminAvailability() {
   const [duration, setDuration] = useState<number>(30);
   const [selectedTreatmentId, setSelectedTreatmentId] = useState<string>("");
   const [slotType, setSlotType] = useState<"treatment" | "manual">("treatment");
+  
+  // Neue State-Variablen für Tab-Navigation
+  const [activeSubTab, setActiveSubTab] = useState<"slots" | "recurring" | "timeoff">("slots");
+  
+  // States für Recurring Rules
+  const [selectedDayOfWeek, setSelectedDayOfWeek] = useState<number>(1); // 1=Montag
+  const [ruleStartTime, setRuleStartTime] = useState<string>("13:00");
+  const [ruleEndTime, setRuleEndTime] = useState<string>("18:00");
+  const [editingRuleId, setEditingRuleId] = useState<string>("");
+  
+  // States für Time-Off
+  const [timeOffStartDate, setTimeOffStartDate] = useState<string>("");
+  const [timeOffEndDate, setTimeOffEndDate] = useState<string>("");
+  const [timeOffReason, setTimeOffReason] = useState<string>("");
+  const [editingTimeOffId, setEditingTimeOffId] = useState<string>("");
+  
 
   const { data: allSlots, refetch: refetchSlots } = useQuery(
     queryClient.availability.live.list.experimental_liveOptions()
@@ -17,6 +33,18 @@ export function AdminAvailability() {
   const { data: treatments } = useQuery(
     queryClient.treatments.live.list.experimental_liveOptions()
   );
+  
+  // Neue Queries für wiederkehrende Verfügbarkeiten (mit Authentifizierung)
+  const { data: recurringRules } = useQuery(
+    queryClient.recurringAvailability.live.adminListRules.experimental_liveOptions({
+      input: { sessionId: localStorage.getItem("sessionId") || "" }
+    })
+  );
+  const { data: timeOffPeriods } = useQuery(
+    queryClient.recurringAvailability.live.adminListTimeOff.experimental_liveOptions({
+      input: { sessionId: localStorage.getItem("sessionId") || "" }
+    })
+  );
 
   const [errorMsg, setErrorMsg] = useState<string>("");
   const [successMsg, setSuccessMsg] = useState<string>("");
@@ -45,6 +73,29 @@ export function AdminAvailability() {
   const { mutate: cleanupPastSlots } = useMutation(
     queryClient.availability.cleanupPastSlots.mutationOptions()
   );
+  
+  // Neue Mutations für wiederkehrende Verfügbarkeiten
+  const { mutate: createRule } = useMutation(
+    queryClient.recurringAvailability.createRule.mutationOptions()
+  );
+  const { mutate: updateRule } = useMutation(
+    queryClient.recurringAvailability.updateRule.mutationOptions()
+  );
+  const { mutate: deleteRule } = useMutation(
+    queryClient.recurringAvailability.deleteRule.mutationOptions()
+  );
+  const { mutate: toggleRuleActive } = useMutation(
+    queryClient.recurringAvailability.toggleRuleActive.mutationOptions()
+  );
+  const { mutate: createTimeOff } = useMutation(
+    queryClient.recurringAvailability.createTimeOff.mutationOptions()
+  );
+  const { mutate: updateTimeOff } = useMutation(
+    queryClient.recurringAvailability.updateTimeOff.mutationOptions()
+  );
+  const { mutate: deleteTimeOff } = useMutation(
+    queryClient.recurringAvailability.deleteTimeOff.mutationOptions()
+  );
 
   // Auto-update duration when treatment is selected
   useEffect(() => {
@@ -63,6 +114,12 @@ export function AdminAvailability() {
   const getTreatmentName = (treatmentId: string) => {
     return treatments?.find(t => t.id === treatmentId)?.name || "Unbekannte Behandlung";
   };
+  
+  // Helper-Funktion für Wochentag-Namen
+  const getDayName = (dayOfWeek: number): string => {
+    const days = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
+    return days[dayOfWeek];
+  };
 
   const addSlot = () => {
     setErrorMsg("");
@@ -116,7 +173,48 @@ export function AdminAvailability() {
 
   return (
     <div className="max-w-4xl mx-auto space-y-6">
-      {/* Slot Type Selection */}
+      {/* Tab-Navigation */}
+      <div className="bg-white rounded-lg shadow">
+        <div className="border-b border-gray-200">
+          <nav className="-mb-px flex space-x-8 px-6">
+            <button
+              onClick={() => setActiveSubTab("slots")}
+              className={`py-4 px-1 border-b-2 font-medium text-sm ${
+                activeSubTab === "slots"
+                  ? "border-pink-500 text-pink-600"
+                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+              }`}
+            >
+              📅 Slots
+            </button>
+            <button
+              onClick={() => setActiveSubTab("recurring")}
+              className={`py-4 px-1 border-b-2 font-medium text-sm ${
+                activeSubTab === "recurring"
+                  ? "border-pink-500 text-pink-600"
+                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+              }`}
+            >
+              🔄 Wiederkehrende Zeiten
+            </button>
+            <button
+              onClick={() => setActiveSubTab("timeoff")}
+              className={`py-4 px-1 border-b-2 font-medium text-sm ${
+                activeSubTab === "timeoff"
+                  ? "border-pink-500 text-pink-600"
+                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+              }`}
+            >
+              🏖️ Urlaubszeiten
+            </button>
+          </nav>
+        </div>
+      </div>
+      
+      {/* Tab Inhalt */}
+      {activeSubTab === "slots" && (
+        <>
+          {/* Slot Type Selection */}
       <div className="bg-white rounded-lg shadow p-4">
         <h3 className="text-lg font-semibold mb-4">Neuen Slot anlegen</h3>
         
@@ -421,6 +519,338 @@ export function AdminAvailability() {
           )}
         </div>
       </div>
+        </>
+      )}
+      
+      {/* Tab "Wiederkehrende Zeiten" */}
+      {activeSubTab === "recurring" && (
+        <div className="space-y-6">
+          {/* Neue Regel erstellen */}
+          <div className="bg-white rounded-lg shadow p-4">
+            <h3 className="text-lg font-semibold mb-4">Neue wiederkehrende Regel erstellen</h3>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Wochentag
+                </label>
+                <select
+                  value={selectedDayOfWeek}
+                  onChange={(e) => setSelectedDayOfWeek(Number(e.target.value))}
+                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500"
+                >
+                  <option value={1}>Montag</option>
+                  <option value={2}>Dienstag</option>
+                  <option value={3}>Mittwoch</option>
+                  <option value={4}>Donnerstag</option>
+                  <option value={5}>Freitag</option>
+                  <option value={6}>Samstag</option>
+                  <option value={0}>Sonntag</option>
+                </select>
+              </div>
+              
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Startzeit
+                </label>
+                <input
+                  type="time"
+                  value={ruleStartTime}
+                  onChange={(e) => setRuleStartTime(e.target.value)}
+                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500"
+                />
+              </div>
+              
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Endzeit
+                </label>
+                <input
+                  type="time"
+                  value={ruleEndTime}
+                  onChange={(e) => setRuleEndTime(e.target.value)}
+                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500"
+                />
+              </div>
+            </div>
+            
+            <div className="mt-4">
+              <button
+                onClick={() => {
+                  setErrorMsg("");
+                  setSuccessMsg("");
+                  
+                  if (ruleStartTime >= ruleEndTime) {
+                    setErrorMsg("Startzeit muss vor der Endzeit liegen.");
+                    return;
+                  }
+                  
+                  const sessionId = localStorage.getItem("sessionId") || "";
+                  if (!sessionId) {
+                    setErrorMsg("Nicht eingeloggt. Bitte als Inhaber anmelden.");
+                    return;
+                  }
+                  
+                  createRule(
+                    { sessionId, dayOfWeek: selectedDayOfWeek, startTime: ruleStartTime, endTime: ruleEndTime },
+                    {
+                      onSuccess: () => {
+                        setSuccessMsg(`Regel für ${getDayName(selectedDayOfWeek)} erstellt.`);
+                      },
+                      onError: (err: any) => {
+                        setErrorMsg(err?.message || "Fehler beim Erstellen der Regel.");
+                      }
+                    }
+                  );
+                }}
+                className="bg-pink-600 text-white px-4 py-2 rounded-md hover:bg-pink-700 font-medium transition-colors"
+              >
+                Regel hinzufügen
+              </button>
+            </div>
+          </div>
+          
+          {/* Bestehende Regeln */}
+          <div className="bg-white rounded-lg shadow">
+            <div className="p-4 border-b">
+              <h3 className="text-lg font-semibold">Bestehende Regeln</h3>
+            </div>
+            <div className="divide-y">
+              {recurringRules?.length === 0 && (
+                <div className="p-8 text-center text-gray-500">
+                  <div className="text-lg font-medium mb-2">Noch keine wiederkehrenden Regeln definiert</div>
+                  <div className="text-sm">Erstellen Sie Ihre erste Regel, um automatisch Slots zu generieren.</div>
+                </div>
+              )}
+              {recurringRules?.map((rule) => (
+                <div key={rule.id} className="p-4 hover:bg-gray-50 transition-colors">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-4">
+                      <div className="font-medium">{getDayName(rule.dayOfWeek)}</div>
+                      <div className="text-gray-600">{rule.startTime} - {rule.endTime} Uhr</div>
+                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                        rule.isActive 
+                          ? "bg-green-100 text-green-800" 
+                          : "bg-gray-100 text-gray-800"
+                      }`}>
+                        {rule.isActive ? "Aktiv" : "Inaktiv"}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <button
+                        onClick={() => {
+                          const sessionId = localStorage.getItem("sessionId");
+                          if (!sessionId) {
+                            setErrorMsg("Nicht eingeloggt. Bitte als Inhaber anmelden.");
+                            return;
+                          }
+                          toggleRuleActive(
+                            { sessionId, id: rule.id },
+                            {
+                              onSuccess: () => {
+                                setSuccessMsg(`Regel ${rule.isActive ? "deaktiviert" : "aktiviert"}.`);
+                              },
+                              onError: (err: any) => {
+                                setErrorMsg(err?.message || "Fehler beim Umschalten der Regel.");
+                              }
+                            }
+                          );
+                        }}
+                        className="px-3 py-1 text-blue-600 hover:bg-blue-50 rounded-md transition-colors text-sm"
+                      >
+                        {rule.isActive ? "Deaktivieren" : "Aktivieren"}
+                      </button>
+                      <button
+                        onClick={() => {
+                          const sessionId = localStorage.getItem("sessionId");
+                          if (!sessionId) {
+                            setErrorMsg("Nicht eingeloggt. Bitte als Inhaber anmelden.");
+                            return;
+                          }
+                          deleteRule(
+                            { sessionId, id: rule.id },
+                            {
+                              onSuccess: () => {
+                                setSuccessMsg("Regel gelöscht.");
+                              },
+                              onError: (err: any) => {
+                                setErrorMsg(err?.message || "Fehler beim Löschen der Regel.");
+                              }
+                            }
+                          );
+                        }}
+                        className="px-3 py-1 text-red-600 hover:bg-red-50 rounded-md transition-colors text-sm"
+                      >
+                        Löschen
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+      
+      {/* Tab "Urlaubszeiten" */}
+      {activeSubTab === "timeoff" && (
+        <div className="space-y-6">
+          {/* Neue Urlaubszeit erstellen */}
+          <div className="bg-white rounded-lg shadow p-4">
+            <h3 className="text-lg font-semibold mb-4">Neue Urlaubszeit erstellen</h3>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Von Datum
+                </label>
+                <input
+                  type="date"
+                  value={timeOffStartDate}
+                  onChange={(e) => setTimeOffStartDate(e.target.value)}
+                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500"
+                />
+              </div>
+              
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Bis Datum
+                </label>
+                <input
+                  type="date"
+                  value={timeOffEndDate}
+                  onChange={(e) => setTimeOffEndDate(e.target.value)}
+                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500"
+                />
+              </div>
+              
+              <div className="md:col-span-2">
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Grund/Notiz
+                </label>
+                <input
+                  type="text"
+                  placeholder="z.B. Sommerurlaub, Feiertag"
+                  value={timeOffReason}
+                  onChange={(e) => setTimeOffReason(e.target.value)}
+                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500"
+                />
+              </div>
+            </div>
+            
+            <div className="mt-4">
+              <button
+                onClick={() => {
+                  setErrorMsg("");
+                  setSuccessMsg("");
+                  
+                  if (!timeOffStartDate || !timeOffEndDate || !timeOffReason) {
+                    setErrorMsg("Bitte alle Felder ausfüllen.");
+                    return;
+                  }
+                  
+                  if (timeOffStartDate > timeOffEndDate) {
+                    setErrorMsg("Startdatum muss vor dem Enddatum liegen.");
+                    return;
+                  }
+                  
+                  const sessionId = localStorage.getItem("sessionId") || "";
+                  if (!sessionId) {
+                    setErrorMsg("Nicht eingeloggt. Bitte als Inhaber anmelden.");
+                    return;
+                  }
+                  
+                  createTimeOff(
+                    { sessionId, startDate: timeOffStartDate, endDate: timeOffEndDate, reason: timeOffReason },
+                    {
+                      onSuccess: () => {
+                        setSuccessMsg("Urlaubszeit hinzugefügt.");
+                        setTimeOffStartDate("");
+                        setTimeOffEndDate("");
+                        setTimeOffReason("");
+                      },
+                      onError: (err: any) => {
+                        setErrorMsg(err?.message || "Fehler beim Hinzufügen der Urlaubszeit.");
+                      }
+                    }
+                  );
+                }}
+                className="bg-pink-600 text-white px-4 py-2 rounded-md hover:bg-pink-700 font-medium transition-colors"
+              >
+                Urlaubszeit hinzufügen
+              </button>
+            </div>
+          </div>
+          
+          {/* Bestehende Urlaubszeiten */}
+          <div className="bg-white rounded-lg shadow">
+            <div className="p-4 border-b">
+              <h3 className="text-lg font-semibold">Bestehende Urlaubszeiten</h3>
+            </div>
+            <div className="divide-y">
+              {timeOffPeriods?.length === 0 && (
+                <div className="p-8 text-center text-gray-500">
+                  <div className="text-lg font-medium mb-2">Keine Urlaubszeiten eingetragen</div>
+                  <div className="text-sm">Fügen Sie Urlaubszeiten hinzu, um automatisch Slots zu blockieren.</div>
+                </div>
+              )}
+              {timeOffPeriods?.map((period) => {
+                const today = new Date().toISOString().split("T")[0];
+                const isPast = period.endDate < today;
+                const isCurrent = period.startDate <= today && period.endDate >= today;
+                const isFuture = period.startDate > today;
+                
+                return (
+                  <div key={period.id} className="p-4 hover:bg-gray-50 transition-colors">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-4">
+                        <div className="font-medium">
+                          {new Date(period.startDate).toLocaleDateString('de-DE')} - {new Date(period.endDate).toLocaleDateString('de-DE')}
+                        </div>
+                        <div className="text-gray-600">{period.reason}</div>
+                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                          isPast 
+                            ? "bg-gray-100 text-gray-800"
+                            : isCurrent 
+                            ? "bg-red-100 text-red-800"
+                            : "bg-blue-100 text-blue-800"
+                        }`}>
+                          {isPast ? "Vergangen" : isCurrent ? "Aktuell" : "Geplant"}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <button
+                          onClick={() => {
+                            const sessionId = localStorage.getItem("sessionId");
+                            if (!sessionId) {
+                              setErrorMsg("Nicht eingeloggt. Bitte als Inhaber anmelden.");
+                              return;
+                            }
+                            deleteTimeOff(
+                              { sessionId, id: period.id },
+                              {
+                                onSuccess: () => {
+                                  setSuccessMsg("Urlaubszeit gelöscht.");
+                                },
+                                onError: (err: any) => {
+                                  setErrorMsg(err?.message || "Fehler beim Löschen der Urlaubszeit.");
+                                }
+                              }
+                            );
+                          }}
+                          className="px-3 py-1 text-red-600 hover:bg-red-50 rounded-md transition-colors text-sm"
+                        >
+                          Löschen
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }