diff --git a/src/client/components/admin-bookings.tsx b/src/client/components/admin-bookings.tsx index 610db15..b7e07ad 100644 --- a/src/client/components/admin-bookings.tsx +++ b/src/client/components/admin-bookings.tsx @@ -7,6 +7,8 @@ export function AdminBookings() { const [selectedPhoto, setSelectedPhoto] = useState(""); const [showPhotoModal, setShowPhotoModal] = useState(false); const [showCancelConfirm, setShowCancelConfirm] = useState(null); + const [showMessageModal, setShowMessageModal] = useState(null); + const [messageText, setMessageText] = useState(""); const [successMsg, setSuccessMsg] = useState(""); const [errorMsg, setErrorMsg] = useState(""); @@ -49,6 +51,19 @@ export function AdminBookings() { }) ); + const { mutate: sendMessage, isPending: isSendingMessage } = useMutation( + queryClient.bookings.sendCustomerMessage.mutationOptions({ + onSuccess: () => { + setSuccessMsg("Nachricht wurde erfolgreich gesendet."); + setShowMessageModal(null); + setMessageText(""); + }, + onError: (error: any) => { + setErrorMsg(error?.message || "Fehler beim Senden der Nachricht."); + } + }) + ); + const getTreatmentName = (treatmentId: string) => { return treatments?.find(t => t.id === treatmentId)?.name || "Unbekannte Behandlung"; }; @@ -83,6 +98,35 @@ export function AdminBookings() { setSelectedPhoto(""); }; + const openMessageModal = (bookingId: string) => { + setShowMessageModal(bookingId); + setMessageText(""); + }; + + const closeMessageModal = () => { + setShowMessageModal(null); + setMessageText(""); + }; + + const handleSendMessage = () => { + if (!showMessageModal || !messageText.trim()) { + setErrorMsg("Bitte gib eine Nachricht ein."); + return; + } + + sendMessage({ + sessionId: localStorage.getItem("sessionId") || "", + bookingId: showMessageModal, + message: messageText.trim(), + }); + }; + + // Check if booking is in the future + const isFutureBooking = (appointmentDate: string) => { + const today = new Date().toISOString().split("T")[0]; + return appointmentDate >= today; + }; + const filteredBookings = bookings?.filter(booking => selectedDate ? booking.appointmentDate === selectedDate : true ).sort((a, b) => { @@ -251,45 +295,57 @@ export function AdminBookings() { -
- {booking.status === "pending" && ( - <> +
+
+ {booking.status === "pending" && ( + <> + + + + )} + {booking.status === "confirmed" && ( + <> + + + + )} + {(booking.status === "cancelled" || booking.status === "completed") && ( - - - )} - {booking.status === "confirmed" && ( - <> - - - - )} - {(booking.status === "cancelled" || booking.status === "completed") && ( + )} +
+ {/* Show message button for future bookings with email */} + {isFutureBooking(booking.appointmentDate) && booking.customerEmail && ( )}
@@ -369,6 +425,87 @@ export function AdminBookings() {
)} + + {/* Message Modal */} + {showMessageModal && ( +
+
+
+

Nachricht an Kunden senden

+ +
+ + {(() => { + const booking = bookings?.find(b => b.id === showMessageModal); + if (!booking) return null; + + return ( +
+

+ Kunde: {booking.customerName} +

+

+ E-Mail: {booking.customerEmail} +

+

+ Termin: {new Date(booking.appointmentDate).toLocaleDateString()} um {booking.appointmentTime} +

+

+ Behandlung: {getTreatmentName(booking.treatmentId)} +

+
+ ); + })()} + +
+ +