feat(bookings): customer self-service rebooking with real slot picker

CustomerBookingView now carries tenantSlug/serviceId/staffId/
classSessionId so the manage page can query live availability; class
bookings resolve their session title as the display label. Reschedule
rejects waitlisted/completed bookings and session-bound class bookings
(400), collapsing a dead branch in the appointment path.

The manage page reschedule dialog replaces free-form date/time inputs
with a date → availability-slot picker filtered to appointment mode,
so customers can only move to a genuinely free slot with the correct
duration; 409 surfaces "slot just taken". Actions are status-gated:
reschedule for confirmed/pending appointments, cancel for live
bookings, explanatory note for class bookings.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

apps/backend/internal/bookings/customer_service.go

@@ -73,6 +73,12 @@ func (s *CustomerService) managementURL(booking db.BookingRecord) string {
 }
 
 func (s *CustomerService) descriptors(ctx context.Context, booking db.BookingRecord) (serviceName string, locationName string) {
+	if booking.ServiceID == nil && booking.ClassSessionID != nil {
+		// Class bookings carry no service; the session title is the label.
+		if session, err := s.repo.GetClassSessionByID(ctx, *booking.ClassSessionID); err == nil {
+			serviceName = session.Title
+		}
+	}
 	if booking.ServiceID != nil {
 		if services, err := s.repo.ListServicesByTenant(ctx, booking.TenantID); err == nil {
 			for _, service := range services {
@@ -119,6 +125,10 @@ func (s *CustomerService) GetBookingByReference(ctx context.Context, reference s
 		CustomerEmail:    booking.CustomerEmail,
 		Service:          serviceName,
 		BusinessName:     tenant.Name,
+		TenantSlug:       tenant.Slug,
+		ServiceID:        booking.ServiceID,
+		StaffID:          booking.StaffID,
+		ClassSessionID:   booking.ClassSessionID,
 		StartsAt:         booking.StartsAt,
 		EndsAt:           booking.EndsAt,
 		Location:         locationName,
@@ -142,6 +152,18 @@ func (s *CustomerService) RescheduleBooking(ctx context.Context, reference strin
 		return ErrBookingCancelled
 	}
 
+	// Only live bookings may move: waitlisted entries sit in a queue tied to
+	// their session, and completed bookings are history.
+	if booking.Status == "waitlisted" || booking.Status == "completed" {
+		return ErrInvalidReschedule
+	}
+
+	// Class bookings are bound to their session window; moving to another
+	// session means cancelling and booking again.
+	if booking.ClassSessionID != nil {
+		return ErrInvalidReschedule
+	}
+
 	newStartsAt, err := time.Parse(time.RFC3339, req.NewStartsAt)
 	if err != nil {
 		return ErrInvalidReschedule
@@ -174,16 +196,14 @@ func (s *CustomerService) RescheduleBooking(ctx context.Context, reference strin
 		}
 	}
 
-	// Appointments must land inside bookable hours and off blocked days;
-	// class bookings keep their session-defined window.
-	if booking.ClassSessionID == nil {
-		tenant, err := s.repo.GetTenantByID(ctx, booking.TenantID)
-		if err != nil {
-			return err
-		}
-		if err := validateAppointmentTarget(ctx, s.repo, tenant, booking.StaffID, booking.LocationID, newStartsAt, newEndsAt); err != nil {
-			return ErrInvalidReschedule
-		}
+	// Appointments must land inside bookable hours and off blocked days.
+	// Class bookings never reach this point — rejected above.
+	tenant, err := s.repo.GetTenantByID(ctx, booking.TenantID)
+	if err != nil {
+		return err
+	}
+	if err := validateAppointmentTarget(ctx, s.repo, tenant, booking.StaffID, booking.LocationID, newStartsAt, newEndsAt); err != nil {
+		return ErrInvalidReschedule
 	}
 
 	if err := s.repo.RescheduleBooking(ctx, booking.ID, newStartsAt, newEndsAt); err != nil {

apps/backend/internal/bookings/customer_service_test.go

@@ -111,3 +111,41 @@ func TestRescheduleRejectsConflictingSlot(t *testing.T) {
 		t.Fatalf("expected ErrBookingConflict, got %v", err)
 	}
 }
+
+func TestRescheduleRejectsClassWaitlistedAndCompleted(t *testing.T) {
+	repo := db.NewMemoryRepository()
+	svc := NewCustomerService(repo, nil, "http://localhost:3000")
+	sessionID := "4bf74c12-44dd-45ca-86bb-b104f16f2435"
+	future := time.Now().Add(48 * time.Hour)
+
+	cases := []struct {
+		name      string
+		status    string
+		sessionID *string
+	}{
+		{"class booking", "confirmed", &sessionID},
+		{"waitlisted booking", "waitlisted", &sessionID},
+		{"completed booking", "completed", nil},
+	}
+	for i, tc := range cases {
+		_, err := repo.CreateBooking(context.Background(), db.CreateBookingParams{
+			TenantID:       "5d6b3551-0a3e-4b86-bdf0-e9df20a47148",
+			ClassSessionID: tc.sessionID,
+			StartsAt:       future,
+			EndsAt:         future.Add(time.Hour),
+			Status:         tc.status,
+			Reference:      "BOK-RS-" + string(rune('A'+i)),
+			ManageToken:    "tok",
+		})
+		if err != nil {
+			t.Fatalf("%s: create booking: %v", tc.name, err)
+		}
+		err = svc.RescheduleBooking(context.Background(), "BOK-RS-"+string(rune('A'+i)), domain.RescheduleBookingRequest{
+			NewStartsAt: future.Add(2 * time.Hour).Format(time.RFC3339),
+			NewEndsAt:   future.Add(3 * time.Hour).Format(time.RFC3339),
+		}, "tok")
+		if err != ErrInvalidReschedule {
+			t.Fatalf("%s: expected ErrInvalidReschedule, got %v", tc.name, err)
+		}
+	}
+}

apps/backend/internal/domain/models.go

@@ -490,6 +490,12 @@ type CustomerBookingView struct {
 	CustomerEmail string    `json:"customerEmail"`
 	Service       string    `json:"service"`
 	BusinessName  string    `json:"businessName"`
+	TenantSlug    string    `json:"tenantSlug,omitempty"`
+	ServiceID     *string   `json:"serviceId,omitempty"`
+	StaffID       *string   `json:"staffId,omitempty"`
+	// ClassSessionID identifies session-bound bookings; they cannot be
+	// rescheduled to arbitrary times (see RescheduleBooking).
+	ClassSessionID *string  `json:"classSessionId,omitempty"`
 	StartsAt      time.Time `json:"startsAt"`
 	EndsAt        time.Time `json:"endsAt"`
 	Location      string    `json:"location"`

apps/backend/openapi/bookra.openapi.yaml

@@ -346,6 +346,10 @@ paths:
       responses:
         "200":
           description: Booking details
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/CustomerBookingView"
         "403":
           description: Invalid manage token
         "404":
@@ -360,29 +364,37 @@ paths:
           required: true
           schema:
             type: string
+        - in: query
+          name: token
+          required: true
+          schema:
+            type: string
+          description: Manage token issued at booking time
       requestBody:
         required: true
         content:
           application/json:
             schema:
               type: object
-              required: [token, startsAt]
+              required: [newStartsAt, newEndsAt]
               properties:
-                token:
-                  type: string
-                startsAt:
+                newStartsAt:
                   type: string
                   format: date-time
-                endsAt:
+                newEndsAt:
                   type: string
                   format: date-time
+                reason:
+                  type: string
       responses:
         "200":
           description: Booking rescheduled
+        "400":
+          description: Invalid new window, non-reschedulable status, or class booking
         "403":
           description: Invalid manage token
         "409":
-          description: New slot conflicts
+          description: New slot conflicts or booking already cancelled
   /v1/public/bookings/{reference}/cancel:
     post:
       tags: [Public Booking]
@@ -1770,6 +1782,46 @@ components:
         waitlistPosition:
           type: integer
           description: 1-based queue spot for waitlisted class bookings; absent otherwise
+    CustomerBookingView:
+      type: object
+      properties:
+        reference:
+          type: string
+        customerName:
+          type: string
+        customerEmail:
+          type: string
+        service:
+          type: string
+        businessName:
+          type: string
+        tenantSlug:
+          type: string
+        serviceId:
+          type: string
+          format: uuid
+        staffId:
+          type: string
+          format: uuid
+        classSessionId:
+          type: string
+          format: uuid
+          description: Present for session-bound bookings, which cannot be rescheduled to arbitrary times
+        startsAt:
+          type: string
+          format: date-time
+        endsAt:
+          type: string
+          format: date-time
+        location:
+          type: string
+        status:
+          type: string
+        notes:
+          type: string
+        waitlistPosition:
+          type: integer
+          description: 1-based queue spot for waitlisted class bookings; absent otherwise
     DashboardBookingRequest:
       type: object
       required: [customerName, customerEmail, startsAt]

apps/frontend/src/routes/booking-manage-route.tsx

@@ -1,5 +1,5 @@
 import { useParams, useSearchParams } from "@solidjs/router";
-import { createSignal, createResource, Show } from "solid-js";
+import { createSignal, createResource, For, Show } from "solid-js";
 import { apiClient } from "../lib/api-client";
 import { useI18n } from "../providers/i18n-provider";
 import { BookraCharacter } from "../components/bookra-character";
@@ -12,7 +12,8 @@ export function BookingManageRoute() {
   const [isRescheduling, setIsRescheduling] = createSignal(false);
   const [isCancelling, setIsCancelling] = createSignal(false);
   const [newDate, setNewDate] = createSignal("");
-  const [newTime, setNewTime] = createSignal("");
+  const [selectedSlot, setSelectedSlot] = createSignal<{ startsAt: string; endsAt: string } | null>(null);
+  const [rescheduleBusy, setRescheduleBusy] = createSignal(false);
   const [message, setMessage] = createSignal("");
   const [actionSuccess, setActionSuccess] = createSignal<string | null>(null);
   const [actionError, setActionError] = createSignal<string | null>(null);
@@ -20,7 +21,7 @@ export function BookingManageRoute() {
   const token = () => searchParams.token || "";
   const reference = () => params.reference || "";
 
-  const [booking] = createResource(token, async (t) => {
+  const [booking, { refetch: refetchBooking }] = createResource(token, async (t) => {
     if (!t) return null;
     const ref = reference();
     if (!ref) return null;
@@ -49,12 +50,30 @@ export function BookingManageRoute() {
     };
   });
 
+  const [slots] = createResource(
+    () => [booking()?.tenantSlug, newDate(), booking()?.serviceId, booking()?.staffId] as const,
+    async ([slug, date, serviceId, staffId]) => {
+      if (!slug || !date) return [];
+      const query = new URLSearchParams({ date });
+      if (serviceId) query.set("serviceId", serviceId);
+      if (staffId) query.set("staffId", staffId);
+      try {
+        const response = await (apiClient as any).GET(`/v1/public/tenants/${slug}/availability?${query}`);
+        const list = (response.data?.slots ?? []) as any[];
+        return list.filter((s) => s.mode === "appointment");
+      } catch {
+        return [];
+      }
+    },
+  );
+
   const handleReschedule = async () => {
     setActionSuccess(null);
     setActionError(null);
-    
-    if (!newDate() || !newTime()) {
-      setActionError(i18n.locale() === 'cs' ? 'Vyberte prosím nové datum a čas' : 'Please select a new date and time');
+
+    const slot = selectedSlot();
+    if (!slot) {
+      setActionError(i18n.locale() === 'cs' ? 'Vyberte prosím volný termín' : 'Please pick an available slot');
       return;
     }
 
@@ -65,32 +84,36 @@ export function BookingManageRoute() {
       return;
     }
 
-    // Calculate new start and end times
-    const newStart = new Date(`${newDate()}T${newTime()}`);
-    const newEnd = new Date(newStart.getTime() + 60 * 60 * 1000); // Default 1 hour duration
-
+    setRescheduleBusy(true);
     try {
       const response = await (apiClient as any).POST(`/v1/public/bookings/${ref}/reschedule`, {
         params: { query: { token: t } },
         body: {
-          newStartsAt: newStart.toISOString(),
-          newEndsAt: newEnd.toISOString(),
+          newStartsAt: slot.startsAt,
+          newEndsAt: slot.endsAt,
           reason: message()
         }
       });
 
       if (response.error) {
-        setActionError(i18n.locale() === 'cs' ? 'Změna termínu selhala' : 'Reschedule failed');
+        setActionError(
+          (response as any).response?.status === 409
+            ? (i18n.locale() === 'cs' ? 'Tento termín byl právě obsazen, vyberte jiný' : 'That slot was just taken — please pick another')
+            : (i18n.locale() === 'cs' ? 'Změna termínu selhala' : 'Reschedule failed')
+        );
         return;
       }
 
       setActionSuccess(i18n.locale() === 'cs' ? 'Rezervace byla přeplánována' : 'Booking rescheduled successfully');
       setIsRescheduling(false);
       setNewDate("");
-      setNewTime("");
+      setSelectedSlot(null);
       setMessage("");
+      void refetchBooking();
     } catch (err) {
       setActionError(i18n.locale() === 'cs' ? 'Změna termínu selhala' : 'Reschedule failed');
+    } finally {
+      setRescheduleBusy(false);
     }
   };
 
@@ -313,33 +336,44 @@ export function BookingManageRoute() {
                 </div>
 
                 {/* Action Buttons */}
-                <div class="flex flex-col sm:flex-row gap-3 pt-4">
-                  <Button
-                    variant="secondary"
-                    class="flex-1"
-                    onClick={() => setIsRescheduling(true)}
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2">
-                      <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
-                      <line x1="16" y1="2" x2="16" y2="6"/>
-                      <line x1="8" y1="2" x2="8" y2="6"/>
-                      <line x1="3" y1="10" x2="21" y2="10"/>
-                    </svg>
-                    {i18n.locale() === 'cs' ? 'Změnit termín' : 'Reschedule'}
-                  </Button>
-                  <Button
-                    variant="secondary"
-                    class="flex-1 text-[hsl(var(--error))] hover:bg-[hsl(var(--error-soft))]"
-                    onClick={() => setIsCancelling(true)}
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2">
-                      <circle cx="12" cy="12" r="10"/>
-                      <line x1="15" y1="9" x2="9" y2="15"/>
-                      <line x1="9" y1="9" x2="15" y2="15"/>
-                    </svg>
-                    {i18n.locale() === 'cs' ? 'Zrušit rezervaci' : 'Cancel Booking'}
-                  </Button>
-                </div>
+                <Show when={b().status === 'confirmed' || b().status === 'pending' || b().status === 'waitlisted'}>
+                  <div class="flex flex-col sm:flex-row gap-3 pt-4">
+                    <Show when={!b().classSessionId && b().status !== 'waitlisted'}>
+                      <Button
+                        variant="secondary"
+                        class="flex-1"
+                        onClick={() => setIsRescheduling(true)}
+                      >
+                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2">
+                          <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+                          <line x1="16" y1="2" x2="16" y2="6"/>
+                          <line x1="8" y1="2" x2="8" y2="6"/>
+                          <line x1="3" y1="10" x2="21" y2="10"/>
+                        </svg>
+                        {i18n.locale() === 'cs' ? 'Změnit termín' : 'Reschedule'}
+                      </Button>
+                    </Show>
+                    <Button
+                      variant="secondary"
+                      class="flex-1 text-[hsl(var(--error))] hover:bg-[hsl(var(--error-soft))]"
+                      onClick={() => setIsCancelling(true)}
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2">
+                        <circle cx="12" cy="12" r="10"/>
+                        <line x1="15" y1="9" x2="9" y2="15"/>
+                        <line x1="9" y1="9" x2="15" y2="15"/>
+                      </svg>
+                      {i18n.locale() === 'cs' ? 'Zrušit rezervaci' : 'Cancel Booking'}
+                    </Button>
+                  </div>
+                  <Show when={b().classSessionId}>
+                    <p class="text-sm text-ink-muted pt-1">
+                      {i18n.locale() === 'cs'
+                        ? 'Termín lekce je pevně daný. Pro jiný termín rezervaci zrušte a objednejte jinou lekci.'
+                        : 'Class times are fixed. To switch sessions, cancel this booking and book another class.'}
+                    </p>
+                  </Show>
+                </Show>
               </CardContent>
             </Card>
 
@@ -393,28 +427,54 @@ export function BookingManageRoute() {
             </DialogDescription>
           </DialogHeader>
           <div class="space-y-4 mt-4">
-            <div class="grid grid-cols-2 gap-4">
-              <div>
-                <label class="block text-sm font-medium text-ink-muted mb-1.5">
-                  {i18n.locale() === 'cs' ? 'Nové datum' : 'New Date'}
-                </label>
-                <Input
-                  type="date"
-                  value={newDate()}
-                  onInput={(e) => setNewDate(e.currentTarget.value)}
-                />
-              </div>
-              <div>
-                <label class="block text-sm font-medium text-ink-muted mb-1.5">
-                  {i18n.locale() === 'cs' ? 'Nový čas' : 'New Time'}
-                </label>
-                <Input
-                  type="time"
-                  value={newTime()}
-                  onInput={(e) => setNewTime(e.currentTarget.value)}
-                />
-              </div>
+            <div>
+              <label class="block text-sm font-medium text-ink-muted mb-1.5">
+                {i18n.locale() === 'cs' ? 'Nové datum' : 'New date'}
+              </label>
+              <Input
+                type="date"
+                value={newDate()}
+                min={new Date().toISOString().slice(0, 10)}
+                onInput={(e) => { setNewDate(e.currentTarget.value); setSelectedSlot(null); }}
+              />
             </div>
+            <Show when={newDate()}>
+              <div>
+                <label class="block text-sm font-medium text-ink-muted mb-1.5">
+                  {i18n.locale() === 'cs' ? 'Volné termíny' : 'Available times'}
+                </label>
+                <Show when={!slots.loading} fallback={
+                  <div class="p-4 text-center text-sm text-ink-muted animate-pulse">…</div>
+                }>
+                  <Show when={(slots() ?? []).length > 0} fallback={
+                    <p class="p-4 text-sm text-ink-muted bg-canvas-subtle rounded-xl text-center">
+                      {i18n.locale() === 'cs' ? 'V tento den nejsou volné termíny.' : 'No available times on this day.'}
+                    </p>
+                  }>
+                    <div class="grid grid-cols-3 sm:grid-cols-4 gap-2">
+                      <For each={slots() ?? []}>
+                        {(slot: any) => {
+                          const isSelected = () => selectedSlot()?.startsAt === slot.startsAt;
+                          return (
+                            <button
+                              type="button"
+                              onClick={() => setSelectedSlot({ startsAt: slot.startsAt, endsAt: slot.endsAt })}
+                              class={`px-2 py-2 text-sm font-medium rounded-lg border transition-colors ${
+                                isSelected()
+                                  ? 'bg-accent text-canvas border-accent'
+                                  : 'bg-canvas-subtle text-ink border-border hover:border-accent hover:text-accent'
+                              }`}
+                            >
+                              {formatTime(slot.startsAt)}
+                            </button>
+                          );
+                        }}
+                      </For>
+                    </div>
+                  </Show>
+                </Show>
+              </div>
+            </Show>
             <div>
               <label class="block text-sm font-medium text-ink-muted mb-1.5">
                 {i18n.locale() === 'cs' ? 'Zpráva pro podnik (volitelné)' : 'Message to business (optional)'}
@@ -430,8 +490,10 @@ export function BookingManageRoute() {
               <Button variant="secondary" class="flex-1" onClick={() => setIsRescheduling(false)}>
                 {i18n.locale() === 'cs' ? 'Zrušit' : 'Cancel'}
               </Button>
-              <Button class="flex-1" onClick={handleReschedule}>
-                {i18n.locale() === 'cs' ? 'Potvrdit změnu' : 'Confirm Change'}
+              <Button class="flex-1" onClick={handleReschedule} disabled={!selectedSlot() || rescheduleBusy()}>
+                {rescheduleBusy()
+                  ? '…'
+                  : (i18n.locale() === 'cs' ? 'Potvrdit změnu' : 'Confirm Change')}
               </Button>
             </div>
           </div>