453 lines
19 KiB
TypeScript
453 lines
19 KiB
TypeScript
import { useState, useEffect } 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];
|
||
|
||
// Tab-Navigation (Slots entfernt)
|
||
const [activeSubTab, setActiveSubTab] = useState<"recurring" | "timeoff">("recurring");
|
||
|
||
// 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>("");
|
||
|
||
|
||
// Neue Queries für wiederkehrende Verfügbarkeiten (mit Authentifizierung)
|
||
const { data: recurringRules, refetch: refetchRecurringRules } = 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>("");
|
||
|
||
// Auto-clear messages after 5 seconds
|
||
useEffect(() => {
|
||
if (errorMsg) {
|
||
const timer = setTimeout(() => setErrorMsg(""), 5000);
|
||
return () => clearTimeout(timer);
|
||
}
|
||
}, [errorMsg]);
|
||
|
||
useEffect(() => {
|
||
if (successMsg) {
|
||
const timer = setTimeout(() => setSuccessMsg(""), 5000);
|
||
return () => clearTimeout(timer);
|
||
}
|
||
}, [successMsg]);
|
||
|
||
// 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()
|
||
);
|
||
|
||
|
||
// Helper-Funktion für Wochentag-Namen
|
||
const getDayName = (dayOfWeek: number): string => {
|
||
const days = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
|
||
return days[dayOfWeek];
|
||
};
|
||
|
||
|
||
return (
|
||
<div className="max-w-4xl mx-auto space-y-6">
|
||
{/* 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("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>
|
||
|
||
{/* Slot-Tab und Slot-UI entfernt */}
|
||
|
||
{/* 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.`);
|
||
// Sofort aktualisieren (zusätzlich zur Live-Subscription), damit Nutzer den Eintrag direkt sieht
|
||
refetchRecurringRules();
|
||
},
|
||
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>
|
||
);
|
||
}
|
||
|
||
|