Refactor: Verbessere CalDAV und Bookings für Multi-Treatment-Support

- CalDAV SUMMARY zeigt jetzt alle Treatment-Namen als Liste statt Anzahl
- Treatments-Array im Booking-Type optional für Rückwärtskompatibilität
- Neue addMinutesToTime Helper-Funktion für saubere DTEND-Berechnung
- getTreatmentNames filtert leere Namen und liefert sicheren Fallback

src/client/components/admin-bookings.tsx

@@ -64,8 +64,20 @@ export function AdminBookings() {
     })
   );
 
-  const getTreatmentName = (treatmentId: string) => {
-     return treatments?.find(t => t.id === treatmentId)?.name || "Unbekannte Behandlung";
+  const getTreatmentNames = (booking: any) => {
+    // Handle new treatments array structure
+    if (booking.treatments && Array.isArray(booking.treatments) && booking.treatments.length > 0) {
+      const names = booking.treatments
+        .map((t: any) => t.name)
+        .filter((name: string) => name && name.trim())
+        .join(", ");
+      return names || "Keine Behandlung";
+    }
+    // Fallback to deprecated treatmentId for backward compatibility
+    if (booking.treatmentId) {
+      return treatments?.find(t => t.id === booking.treatmentId)?.name || "Unbekannte Behandlung";
+    }
+    return "Keine Behandlung";
   };
 
   const getStatusColor = (status: string) => {
@@ -260,8 +272,8 @@ export function AdminBookings() {
                     <div className="text-sm text-gray-500">{booking.customerPhone || '—'}</div>
                   </div>
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div className="text-sm text-gray-900">{getTreatmentName(booking.treatmentId)}</div>
+                <td className="px-6 py-4">
+                  <div className="text-sm text-gray-900">{getTreatmentNames(booking)}</div>
                   {booking.notes && (
                      <div className="text-sm text-gray-500">Notizen: {booking.notes}</div>
                   )}
@@ -445,6 +457,15 @@ export function AdminBookings() {
               const booking = bookings?.find(b => b.id === showMessageModal);
               if (!booking) return null;
               
+              // Calculate totals for multiple treatments
+              const hasTreatments = booking.treatments && Array.isArray(booking.treatments) && booking.treatments.length > 0;
+              const totalDuration = hasTreatments 
+                ? booking.treatments.reduce((sum: number, t: any) => sum + (t.duration || 0), 0)
+                : (booking.bookedDurationMinutes || 0);
+              const totalPrice = hasTreatments
+                ? booking.treatments.reduce((sum: number, t: any) => sum + (t.price || 0), 0)
+                : 0;
+              
               return (
                 <div className="mb-4 bg-gray-50 p-4 rounded-md">
                   <p className="text-sm text-gray-700">
@@ -456,9 +477,29 @@ export function AdminBookings() {
                   <p className="text-sm text-gray-700">
                     <strong>Termin:</strong> {new Date(booking.appointmentDate).toLocaleDateString()} um {booking.appointmentTime}
                   </p>
-                  <p className="text-sm text-gray-700">
-                    <strong>Behandlung:</strong> {getTreatmentName(booking.treatmentId)}
-                  </p>
+                  <div className="text-sm text-gray-700 mt-2">
+                    <strong>Behandlungen:</strong>
+                    {hasTreatments ? (
+                      <div className="mt-1 ml-2">
+                        {booking.treatments.map((treatment: any, index: number) => (
+                          <div key={index} className="mb-1">
+                            • {treatment.name} ({treatment.duration} Min., {treatment.price}€)
+                          </div>
+                        ))}
+                        {booking.treatments.length > 1 && (
+                          <div className="mt-2 pt-2 border-t border-gray-300 font-semibold">
+                            Gesamt: {totalDuration} Min., {totalPrice.toFixed(2)}€
+                          </div>
+                        )}
+                      </div>
+                    ) : booking.treatmentId ? (
+                      <div className="mt-1 ml-2">
+                        • {treatments?.find(t => t.id === booking.treatmentId)?.name || "Unbekannte Behandlung"}
+                      </div>
+                    ) : (
+                      <span className="ml-2 text-gray-500">Keine Behandlung</span>
+                    )}
+                  </div>
                 </div>
               );
             })()}

src/client/components/booking-status-page.tsx

@@ -8,6 +8,50 @@ interface BookingStatusPageProps {
 
 type BookingStatus = "pending" | "confirmed" | "cancelled" | "completed";
 
+interface Treatment {
+  id: string;
+  name: string;
+  duration: number;
+  price: number;
+}
+
+interface BookingDetails {
+  id: string;
+  customerName: string;
+  customerEmail?: string;
+  customerPhone?: string;
+  appointmentDate: string;
+  appointmentTime: string;
+  treatments: Treatment[];
+  totalDuration: number;
+  totalPrice: number;
+  status: BookingStatus;
+  notes?: string;
+  formattedDate: string;
+  createdAt: string;
+  canCancel: boolean;
+  hoursUntilAppointment: number;
+}
+
+interface RescheduleProposalDetails {
+  booking: {
+    id: string;
+    customerName: string;
+    customerEmail?: string;
+    customerPhone?: string;
+    status: BookingStatus;
+    treatments: Treatment[];
+    totalDuration: number;
+    totalPrice: number;
+  };
+  original: { date: string; time: string };
+  proposed: { date: string; time: string };
+  expiresAt: string;
+  hoursUntilExpiry: number;
+  isExpired: boolean;
+  canRespond: boolean;
+}
+
 function getStatusInfo(status: BookingStatus) {
   switch (status) {
     case "pending":
@@ -57,7 +101,7 @@ export default function BookingStatusPage({ token }: BookingStatusPageProps) {
   const [showCancelConfirm, setShowCancelConfirm] = useState(false);
   const [isCancelling, setIsCancelling] = useState(false);
   const [cancellationResult, setCancellationResult] = useState<{ success: boolean; message: string; formattedDate?: string } | null>(null);
-  const [rescheduleProposal, setRescheduleProposal] = useState<any | null>(null);
+  const [rescheduleProposal, setRescheduleProposal] = useState<RescheduleProposalDetails | null>(null);
   const [rescheduleResult, setRescheduleResult] = useState<{ success: boolean; message: string } | null>(null);
   const [isAccepting, setIsAccepting] = useState(false);
   const [isDeclining, setIsDeclining] = useState(false);
@@ -71,7 +115,7 @@ export default function BookingStatusPage({ token }: BookingStatusPageProps) {
   );
 
   // Try fetching reschedule proposal if booking not found or error
-  const rescheduleQuery = useQuery({
+  const rescheduleQuery = useQuery<RescheduleProposalDetails>({
     ...queryClient.cancellation.getRescheduleProposal.queryOptions({ input: { token } }),
     enabled: !!token && (!!bookingError || !booking),
   });
@@ -311,12 +355,56 @@ export default function BookingStatusPage({ token }: BookingStatusPageProps) {
               <div className="border rounded-lg p-4 bg-gray-50">
                 <div className="text-sm text-gray-500 font-semibold mb-1">Aktueller Termin</div>
                 <div className="text-gray-900 font-medium">{rescheduleProposal.original.date} um {rescheduleProposal.original.time} Uhr</div>
-                <div className="text-gray-700 text-sm">{rescheduleProposal.booking.treatmentName}</div>
+                <div className="text-gray-700 text-sm mt-2">
+                  {rescheduleProposal.booking.treatments && rescheduleProposal.booking.treatments.length > 0 ? (
+                    <>
+                      {rescheduleProposal.booking.treatments.length <= 2 ? (
+                        rescheduleProposal.booking.treatments.map((t, i) => (
+                          <div key={i}>{t.name}</div>
+                        ))
+                      ) : (
+                        <>
+                          {rescheduleProposal.booking.treatments.slice(0, 2).map((t, i) => (
+                            <div key={i}>{t.name}</div>
+                          ))}
+                          <div className="text-gray-500 italic">+{rescheduleProposal.booking.treatments.length - 2} weitere</div>
+                        </>
+                      )}
+                      <div className="text-gray-600 mt-1 text-xs">
+                        {rescheduleProposal.booking.totalDuration} Min
+                      </div>
+                    </>
+                  ) : (
+                    <span className="text-gray-400 italic">Keine Behandlungen</span>
+                  )}
+                </div>
               </div>
               <div className="border rounded-lg p-4 bg-orange-50">
                 <div className="text-sm text-orange-700 font-semibold mb-1">Neuer Vorschlag</div>
                 <div className="text-gray-900 font-medium">{rescheduleProposal.proposed.date} um {rescheduleProposal.proposed.time} Uhr</div>
-                <div className="text-gray-700 text-sm">{rescheduleProposal.booking.treatmentName}</div>
+                <div className="text-gray-700 text-sm mt-2">
+                  {rescheduleProposal.booking.treatments && rescheduleProposal.booking.treatments.length > 0 ? (
+                    <>
+                      {rescheduleProposal.booking.treatments.length <= 2 ? (
+                        rescheduleProposal.booking.treatments.map((t, i) => (
+                          <div key={i}>{t.name}</div>
+                        ))
+                      ) : (
+                        <>
+                          {rescheduleProposal.booking.treatments.slice(0, 2).map((t, i) => (
+                            <div key={i}>{t.name}</div>
+                          ))}
+                          <div className="text-gray-500 italic">+{rescheduleProposal.booking.treatments.length - 2} weitere</div>
+                        </>
+                      )}
+                      <div className="text-gray-600 mt-1 text-xs">
+                        {rescheduleProposal.booking.totalDuration} Min
+                      </div>
+                    </>
+                  ) : (
+                    <span className="text-gray-400 italic">Keine Behandlungen</span>
+                  )}
+                </div>
               </div>
             </div>
             <div className="mt-4 bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-sm text-yellow-800">
@@ -478,20 +566,44 @@ export default function BookingStatusPage({ token }: BookingStatusPageProps) {
               <span className="text-gray-600">Uhrzeit:</span>
               <span className="font-medium text-gray-900">{booking?.appointmentTime} Uhr</span>
             </div>
-            <div className="flex justify-between py-2 border-b border-gray-100">
-              <span className="text-gray-600">Behandlung:</span>
-              <span className="font-medium text-gray-900">{booking?.treatmentName}</span>
+            
+            {/* Treatments List */}
+            <div className="py-2 border-b border-gray-100">
+              <div className="text-gray-600 mb-2">Behandlungen:</div>
+              {booking?.treatments && booking.treatments.length > 0 ? (
+                <div className="bg-gray-50 rounded-lg p-3 space-y-2">
+                  {booking.treatments.map((treatment, index) => (
+                    <div key={index} className="flex justify-between items-center text-sm">
+                      <span className="font-medium text-gray-900">• {treatment.name}</span>
+                      <span className="text-gray-600">
+                        {treatment.duration} Min - {treatment.price.toFixed(2)} €
+                      </span>
+                    </div>
+                  ))}
+                  <div className="flex justify-between items-center pt-2 mt-2 border-t border-gray-200 font-semibold">
+                    <span className="text-gray-900">Gesamt:</span>
+                    <span className="text-gray-900">
+                      {booking.totalDuration} Min - {booking.totalPrice.toFixed(2)} €
+                    </span>
+                  </div>
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  <span className="text-gray-400 text-sm italic">Keine Behandlungen angegeben</span>
+                  {((booking?.totalDuration ?? 0) > 0 || (booking?.totalPrice ?? 0) > 0) && (
+                    <div className="bg-gray-50 rounded-lg p-3">
+                      <div className="flex justify-between items-center font-semibold text-sm">
+                        <span className="text-gray-900">Gesamt:</span>
+                        <span className="text-gray-900">
+                          {booking?.totalDuration ?? 0} Min - {(booking?.totalPrice ?? 0).toFixed(2)} €
+                        </span>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
             </div>
-            <div className="flex justify-between py-2 border-b border-gray-100">
-              <span className="text-gray-600">Dauer:</span>
-              <span className="font-medium text-gray-900">{booking?.treatmentDuration} Minuten</span>
-            </div>
-            {booking?.treatmentPrice && booking.treatmentPrice > 0 && (
-              <div className="flex justify-between py-2 border-b border-gray-100">
-                <span className="text-gray-600">Preis:</span>
-                <span className="font-medium text-gray-900">{booking.treatmentPrice.toFixed(2)} €</span>
-              </div>
-            )}
+            
             {booking?.hoursUntilAppointment && booking.hoursUntilAppointment > 0 && booking.status !== "cancelled" && booking.status !== "completed" && (
               <div className="flex justify-between py-2">
                 <span className="text-gray-600">Verbleibende Zeit:</span>

src/server/routes/caldav.ts

@@ -5,7 +5,7 @@ import { assertOwner } from "../lib/auth.js";
 // Types für Buchungen (vereinfacht für CalDAV)
 type Booking = {
   id: string;
-  treatmentId: string;
+  treatments?: Array<{id: string, name: string, duration: number, price: number}>;
   customerName: string;
   customerEmail?: string;
   customerPhone?: string;
@@ -13,6 +13,8 @@ type Booking = {
   appointmentTime: string; // HH:MM
   status: "pending" | "confirmed" | "cancelled" | "completed";
   notes?: string;
+  // Deprecated fields for backward compatibility
+  treatmentId?: string;
   bookedDurationMinutes?: number;
   createdAt: string;
 };
@@ -44,6 +46,14 @@ function formatDateTime(dateStr: string, timeStr: string): string {
   return date.toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '');
 }
 
+function addMinutesToTime(timeStr: string, minutesToAdd: number): string {
+  const [hours, minutes] = timeStr.split(':').map(Number);
+  const totalMinutes = hours * 60 + minutes + minutesToAdd;
+  const newHours = Math.floor(totalMinutes / 60);
+  const newMinutes = totalMinutes % 60;
+  return `${String(newHours).padStart(2, '0')}:${String(newMinutes).padStart(2, '0')}`;
+}
+
 function generateICSContent(bookings: Booking[], treatments: Treatment[]): string {
   const now = new Date().toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '');
   
@@ -63,14 +73,41 @@ X-WR-TIMEZONE:Europe/Berlin
   );
 
   for (const booking of activeBookings) {
-    const treatment = treatments.find(t => t.id === booking.treatmentId);
-    const treatmentName = treatment?.name || 'Unbekannte Behandlung';
-    const duration = booking.bookedDurationMinutes || treatment?.duration || 60;
+    // Handle new treatments array structure
+    let treatmentNames: string;
+    let duration: number;
+    let treatmentDetails: string;
+    let totalPrice = 0;
+
+    if (booking.treatments && Array.isArray(booking.treatments) && booking.treatments.length > 0) {
+      // Use new treatments array
+      treatmentNames = booking.treatments.map(t => t.name).join(', ');
+      
+      duration = booking.treatments.reduce((sum, t) => sum + (t.duration || 0), 0);
+      totalPrice = booking.treatments.reduce((sum, t) => sum + (t.price || 0), 0);
+      
+      // Build detailed treatment list for description
+      treatmentDetails = booking.treatments
+        .map(t => `- ${t.name} (${t.duration} Min., ${t.price}€)`)
+        .join('\\n');
+      
+      if (booking.treatments.length > 1) {
+        treatmentDetails += `\\n\\nGesamt: ${duration} Min., ${totalPrice.toFixed(2)}€`;
+      }
+    } else {
+      // Fallback to deprecated treatmentId for backward compatibility
+      const treatment = booking.treatmentId ? treatments.find(t => t.id === booking.treatmentId) : null;
+      treatmentNames = treatment?.name || 'Unbekannte Behandlung';
+      duration = booking.bookedDurationMinutes || treatment?.duration || 60;
+      treatmentDetails = `Behandlung: ${treatmentNames}`;
+      if (treatment?.price) {
+        treatmentDetails += ` (${duration} Min., ${treatment.price}€)`;
+      }
+    }
     
     const startTime = formatDateTime(booking.appointmentDate, booking.appointmentTime);
-    const endTime = formatDateTime(booking.appointmentDate, 
-      `${String(Math.floor((parseInt(booking.appointmentTime.split(':')[0]) * 60 + parseInt(booking.appointmentTime.split(':')[1]) + duration) / 60)).padStart(2, '0')}:${String((parseInt(booking.appointmentTime.split(':')[0]) * 60 + parseInt(booking.appointmentTime.split(':')[1]) + duration) % 60).padStart(2, '0')}`
-    );
+    const endTimeStr = addMinutesToTime(booking.appointmentTime, duration);
+    const endTime = formatDateTime(booking.appointmentDate, endTimeStr);
 
     // UID für jeden Termin (eindeutig)
     const uid = `booking-${booking.id}@stargirlnails.de`;
@@ -83,8 +120,8 @@ UID:${uid}
 DTSTAMP:${now}
 DTSTART:${startTime}
 DTEND:${endTime}
-SUMMARY:${treatmentName} - ${booking.customerName}
-DESCRIPTION:Behandlung: ${treatmentName}\\nKunde: ${booking.customerName}${booking.customerPhone ? `\\nTelefon: ${booking.customerPhone}` : ''}${booking.notes ? `\\nNotizen: ${booking.notes}` : ''}
+SUMMARY:${treatmentNames} - ${booking.customerName}
+DESCRIPTION:${treatmentDetails}\\n\\nKunde: ${booking.customerName}${booking.customerPhone ? `\\nTelefon: ${booking.customerPhone}` : ''}${booking.notes ? `\\nNotizen: ${booking.notes}` : ''}
 STATUS:${status}
 TRANSP:OPAQUE
 END:VEVENT