Entferne Slots-Tab und Slot-RPCs; bereinige recurring-availability; Texte angepasst

src/client/components/admin-availability.tsx

@@ -4,14 +4,9 @@ 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 [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");
+  // Tab-Navigation (Slots entfernt)
+  const [activeSubTab, setActiveSubTab] = useState<"recurring" | "timeoff">("recurring");
   
   // States für Recurring Rules
   const [selectedDayOfWeek, setSelectedDayOfWeek] = useState<number>(1); // 1=Montag
@@ -25,14 +20,6 @@ export function AdminAvailability() {
   const [timeOffReason, setTimeOffReason] = useState<string>("");
   const [editingTimeOffId, setEditingTimeOffId] = useState<string>("");
   
-
-  const { data: allSlots, refetch: refetchSlots } = useQuery(
-    queryClient.availability.live.list.experimental_liveOptions()
-  );
-
-  const { data: treatments } = useQuery(
-    queryClient.treatments.live.list.experimental_liveOptions()
-  );
   
   // Neue Queries für wiederkehrende Verfügbarkeiten (mit Authentifizierung)
   const { data: recurringRules } = useQuery(
@@ -64,16 +51,6 @@ export function AdminAvailability() {
     }
   }, [successMsg]);
 
-  const { mutate: createSlot, isPending: isCreating } = useMutation(
-    queryClient.availability.create.mutationOptions()
-  );
-  const { mutate: removeSlot } = useMutation(
-    queryClient.availability.remove.mutationOptions()
-  );
-  const { mutate: cleanupPastSlots } = useMutation(
-    queryClient.availability.cleanupPastSlots.mutationOptions()
-  );
-  
   // Neue Mutations für wiederkehrende Verfügbarkeiten
   const { mutate: createRule } = useMutation(
     queryClient.recurringAvailability.createRule.mutationOptions()
@@ -97,96 +74,20 @@ export function AdminAvailability() {
     queryClient.recurringAvailability.deleteTimeOff.mutationOptions()
   );
 
-  // Auto-update duration when treatment is selected
-  useEffect(() => {
-    if (selectedTreatmentId && treatments) {
-      const treatment = treatments.find(t => t.id === selectedTreatmentId);
-      if (treatment) {
-        setDuration(treatment.duration);
-      }
-    }
-  }, [selectedTreatmentId, treatments]);
-
-  // Get selected treatment details
-  const selectedTreatment = treatments?.find(t => t.id === selectedTreatmentId);
-
-  // Get treatment name for display
-  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("");
-    setSuccessMsg("");
-    
-    // Validation based on slot type
-    if (slotType === "treatment" && !selectedTreatmentId) {
-      setErrorMsg("Bitte eine Behandlung auswählen.");
-      return;
-    }
-    if (!selectedDate || !time || !duration) {
-      setErrorMsg("Bitte Datum, Uhrzeit und Dauer angeben.");
-      return;
-    }
-    
-    const sessionId = localStorage.getItem("sessionId") || "";
-    if (!sessionId) {
-      setErrorMsg("Nicht eingeloggt. Bitte als Inhaber anmelden.");
-      return;
-    }
-    
-    createSlot(
-      { sessionId, date: selectedDate, time, durationMinutes: duration },
-      {
-        onSuccess: () => {
-          const slotDescription = slotType === "treatment" 
-            ? `${getTreatmentName(selectedTreatmentId)} (${duration} Min)`
-            : `Manueller Slot (${duration} Min)`;
-          setSuccessMsg(`${slotDescription} angelegt.`);
-          
-          // Manually refetch slots to ensure live updates
-          refetchSlots();
-          
-          // advance time by the duration of the slot
-          const [hStr, mStr] = time.split(":");
-          let h = parseInt(hStr, 10);
-          let m = parseInt(mStr, 10);
-          m += duration;
-          if (m >= 60) { h += Math.floor(m / 60); m = m % 60; }
-          if (h >= 24) { h = h % 24; }
-          const next = `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
-          setTime(next);
-        },
-        onError: (err: any) => {
-          const msg = (err && (err.message || (err as any).toString())) || "Fehler beim Anlegen.";
-          setErrorMsg(msg);
-        },
-      }
-    );
-  };
+  
 
   return (
     <div className="max-w-4xl mx-auto space-y-6">
-      {/* Tab-Navigation */}
+      {/* Tab-Navigation (Slots entfernt) */}
       <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 ${
@@ -211,316 +112,7 @@ export function AdminAvailability() {
         </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>
-        
-        <div className="flex flex-wrap gap-2 mb-4">
-          <button
-            onClick={() => setSlotType("treatment")}
-            className={`px-4 py-2 rounded-md font-medium transition-colors ${
-              slotType === "treatment"
-                ? "bg-pink-600 text-white"
-                : "bg-gray-100 text-gray-700 hover:bg-gray-200"
-            }`}
-          >
-            💅 Behandlungs-Slot
-          </button>
-          <button
-            onClick={() => setSlotType("manual")}
-            className={`px-4 py-2 rounded-md font-medium transition-colors ${
-              slotType === "manual"
-                ? "bg-pink-600 text-white"
-                : "bg-gray-100 text-gray-700 hover:bg-gray-200"
-            }`}
-          >
-            ⚙️ Manueller Slot
-          </button>
-        </div>
-
-        <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">
-              Datum
-            </label>
-            <input
-              type="date"
-              value={selectedDate}
-              onChange={(e) => setSelectedDate(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">
-              Startzeit
-            </label>
-            <input
-              type="time"
-              value={time}
-              onChange={(e) => setTime(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>
-
-          {slotType === "treatment" ? (
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Behandlung
-              </label>
-              <select
-                value={selectedTreatmentId}
-                onChange={(e) => setSelectedTreatmentId(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="">Behandlung wählen...</option>
-                {treatments?.map((treatment) => (
-                  <option key={treatment.id} value={treatment.id}>
-                    {treatment.name} ({treatment.duration} Min)
-                  </option>
-                ))}
-              </select>
-            </div>
-          ) : (
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Dauer (Minuten)
-              </label>
-              <input
-                type="number"
-                min={5}
-                step={5}
-                value={duration}
-                onChange={(e) => setDuration(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"
-              />
-            </div>
-          )}
-
-          <div className="flex items-end">
-            <button
-              onClick={addSlot}
-              disabled={isCreating || (slotType === "treatment" && !selectedTreatmentId)}
-              className="w-full bg-pink-600 text-white px-4 py-2 rounded-md hover:bg-pink-700 disabled:bg-gray-400 disabled:cursor-not-allowed font-medium transition-colors"
-            >
-              {isCreating ? "Anlegen..." : "Slot hinzufügen"}
-            </button>
-          </div>
-        </div>
-
-        {/* Treatment Info Display */}
-        {slotType === "treatment" && selectedTreatment && (
-          <div className="mt-4 p-3 bg-pink-50 rounded-md border border-pink-200">
-            <div className="flex items-center justify-between">
-              <div>
-                <h4 className="font-medium text-pink-900">{selectedTreatment.name}</h4>
-                <p className="text-sm text-pink-700">{selectedTreatment.description}</p>
-              </div>
-              <div className="text-right">
-                <div className="text-lg font-semibold text-pink-900">
-                  {(selectedTreatment.price / 100).toFixed(2)} €
-                </div>
-                <div className="text-sm text-pink-700">
-                  {selectedTreatment.duration} Minuten
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {(errorMsg || successMsg) && (
-        <div className="fixed top-4 right-4 z-50 max-w-md">
-          {errorMsg && (
-            <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg shadow-lg mb-2">
-              <div className="flex items-center">
-                <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
-                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
-                </svg>
-                <span className="font-medium">Fehler:</span>
-                <span className="ml-1">{errorMsg}</span>
-              </div>
-            </div>
-          )}
-          {successMsg && (
-            <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg shadow-lg">
-              <div className="flex items-center">
-                <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
-                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
-                </svg>
-                <span className="font-medium">Erfolg:</span>
-                <span className="ml-1">{successMsg}</span>
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Quick Stats */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div className="bg-white rounded-lg shadow p-4">
-          <div className="text-2xl font-bold text-green-600">
-            {allSlots?.filter(s => s.status === "free").length || 0}
-          </div>
-          <div className="text-sm text-gray-600">Freie Slots</div>
-        </div>
-        <div className="bg-white rounded-lg shadow p-4">
-          <div className="text-2xl font-bold text-yellow-600">
-            {allSlots?.filter(s => s.status === "reserved").length || 0}
-          </div>
-          <div className="text-sm text-gray-600">Reservierte Slots</div>
-        </div>
-        <div className="bg-white rounded-lg shadow p-4">
-          <div className="text-2xl font-bold text-blue-600">
-            {allSlots?.length || 0}
-          </div>
-          <div className="text-sm text-gray-600">Slots gesamt</div>
-        </div>
-      </div>
-
-      {/* Cleanup Button */}
-      <div className="bg-white rounded-lg shadow p-4">
-        <div className="flex items-center justify-between">
-          <div>
-            <h3 className="text-lg font-medium text-gray-900">Bereinigung</h3>
-            <p className="text-sm text-gray-600">Vergangene Slots automatisch löschen</p>
-          </div>
-          <button
-            onClick={() => {
-              const sessionId = localStorage.getItem("sessionId") || "";
-              if (!sessionId) {
-                setErrorMsg("Nicht eingeloggt. Bitte als Inhaber anmelden.");
-                return;
-              }
-              
-              cleanupPastSlots(
-                { sessionId },
-                {
-                  onSuccess: (result: any) => {
-                    setSuccessMsg(result.message || "Bereinigung abgeschlossen.");
-                    refetchSlots();
-                  },
-                  onError: (err: any) => {
-                    setErrorMsg(err?.message || "Fehler bei der Bereinigung.");
-                  }
-                }
-              );
-            }}
-            className="px-4 py-2 bg-orange-600 text-white rounded-md hover:bg-orange-700 transition-colors"
-          >
-            Vergangene Slots löschen
-          </button>
-        </div>
-      </div>
-
-      {/* All Slots List */}
-      <div className="bg-white rounded-lg shadow">
-        <div className="p-4 border-b">
-          <h3 className="text-lg font-semibold">Alle Slots</h3>
-        </div>
-        <div className="divide-y">
-          {allSlots
-            ?.sort((a, b) => (a.date === b.date ? a.time.localeCompare(b.time) : a.date.localeCompare(b.date)))
-            .map((slot) => {
-              // Try to find matching treatment based on duration
-              const matchingTreatments = treatments?.filter(t => t.duration === slot.durationMinutes) || [];
-              
-              return (
-                <div key={slot.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="text-center">
-                        <div className="text-sm text-gray-500">Datum</div>
-                        <div className="font-medium">{new Date(slot.date).toLocaleDateString('de-DE')}</div>
-                      </div>
-                      <div className="text-center">
-                        <div className="text-sm text-gray-500">Zeit</div>
-                        <div className="font-mono text-lg">{slot.time}</div>
-                      </div>
-                      <div className="text-center">
-                        <div className="text-sm text-gray-500">Dauer</div>
-                        <div className="font-medium">{slot.durationMinutes} Min</div>
-                      </div>
-                      {matchingTreatments.length > 0 && (
-                        <div className="text-center">
-                          <div className="text-sm text-gray-500">Passende Behandlungen</div>
-                          <div className="text-sm">
-                            {matchingTreatments.length === 1 
-                              ? matchingTreatments[0].name
-                              : `${matchingTreatments.length} Behandlungen`
-                            }
-                          </div>
-                        </div>
-                      )}
-                      <span className={`px-3 py-1 rounded-full text-sm font-medium ${
-                        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={() => {
-                          const sessionId = localStorage.getItem("sessionId");
-                          if (!sessionId) {
-                            setErrorMsg("Nicht eingeloggt. Bitte als Inhaber anmelden.");
-                            return;
-                          }
-                          removeSlot(
-                            { sessionId, id: slot.id },
-                            {
-                              onSuccess: () => {
-                                setSuccessMsg("Slot erfolgreich gelöscht.");
-                                // Manually refetch slots to ensure live updates
-                                refetchSlots();
-                              },
-                              onError: (err: any) => {
-                                const msg = (err && (err.message || (err as any).toString())) || "Fehler beim Löschen des Slots.";
-                                setErrorMsg(msg);
-                              }
-                            }
-                          );
-                        }}
-                        className="px-3 py-1 text-red-600 hover:bg-red-50 rounded-md transition-colors text-sm"
-                        disabled={slot.status === "reserved"}
-                        title={slot.status === "reserved" ? "Slot ist reserviert" : "Slot löschen"}
-                      >
-                        Löschen
-                      </button>
-                    </div>
-                  </div>
-                  
-                  {/* Show matching treatments if multiple */}
-                  {matchingTreatments.length > 1 && (
-                    <div className="mt-2 ml-20">
-                      <div className="text-xs text-gray-500 mb-1">Passende Behandlungen:</div>
-                      <div className="flex flex-wrap gap-1">
-                        {matchingTreatments.map(treatment => (
-                          <span key={treatment.id} className="px-2 py-1 bg-pink-100 text-pink-700 rounded text-xs">
-                            {treatment.name}
-                          </span>
-                        ))}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              );
-            })}
-          {allSlots?.length === 0 && (
-            <div className="p-8 text-center text-gray-500">
-              <div className="text-lg font-medium mb-2">Keine Slots vorhanden</div>
-              <div className="text-sm">Legen Sie den ersten Slot an, um zu beginnen.</div>
-            </div>
-          )}
-        </div>
-      </div>
-        </>
-      )}
+      {/* Slot-Tab und Slot-UI entfernt */}
       
       {/* Tab "Wiederkehrende Zeiten" */}
       {activeSubTab === "recurring" && (