@devpablocristo/modules-scheduling 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devpablocristo/modules-scheduling",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Scheduling calendar, queue operator, and public booking flow for Pymes (React + FullCalendar).",
   "type": "module",
   "exports": {

package/src/SchedulingCalendar.test.tsx

@@ -2,7 +2,7 @@
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { useEffect } from 'react';
+import { useEffect, type ReactNode } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import type { SchedulingClient } from './client';
 import { SchedulingCalendar } from './SchedulingCalendarBoard';
@@ -204,22 +204,40 @@ vi.mock('../../../calendar/board/ts/src/next', () => ({
     onEventResize,
     eventDurationEditable,
     onDatesSet,
+    toolbarTrailing,
   }: {
     calendarRef: { current: unknown };
-    events?: Array<{ extendedProps?: { calendarEvent?: CalendarEvent } }>;
-    onEventClick?: (info: { event: { extendedProps: { calendarEvent?: CalendarEvent } } }) => void;
+    events?: Array<{
+      extendedProps?: { calendarEvent?: CalendarEvent; freeTimeSlot?: TimeSlot };
+    }>;
+    onEventClick?: (info: {
+      event: { extendedProps: { calendarEvent?: CalendarEvent; freeTimeSlot?: TimeSlot } };
+    }) => void;
     onDateClick?: (info: { date: Date; dateStr: string }) => void;
     onSelect?: (info: { start: Date; end: Date; startStr: string; endStr: string }) => void;
     onEventDrop?: (info: {
-      event: { id: string; startStr: string; start?: Date; end?: Date; extendedProps: { calendarEvent?: CalendarEvent } };
+      event: {
+        id: string;
+        startStr: string;
+        start?: Date;
+        end?: Date;
+        extendedProps: { calendarEvent?: CalendarEvent; freeTimeSlot?: TimeSlot };
+      };
       revert: () => void;
     }) => void;
     onEventResize?: (info: {
-      event: { id: string; startStr: string; start?: Date; end?: Date; extendedProps: { calendarEvent?: CalendarEvent } };
+      event: {
+        id: string;
+        startStr: string;
+        start?: Date;
+        end?: Date;
+        extendedProps: { calendarEvent?: CalendarEvent; freeTimeSlot?: TimeSlot };
+      };
       revert: () => void;
     }) => Promise<void> | void;
     eventDurationEditable?: boolean;
     onDatesSet?: (info: { start: Date; end: Date }) => void;
+    toolbarTrailing?: ReactNode;
   }) => {
     const currentEvents = events ?? [];
     calendarSurfaceMocks.last = { onEventDrop, onEventResize, onSelect };
@@ -249,9 +267,13 @@ vi.mock('../../../calendar/board/ts/src/next', () => ({
       });
     }, []);
 
+    const bookingEvent = currentEvents.find((ev) => ev.extendedProps?.calendarEvent);
+    const freeSlotEvents = currentEvents.filter((ev) => ev.extendedProps?.freeTimeSlot);
+
     return (
       <div data-testid="calendar-surface">
         calendar
+        {toolbarTrailing}
         <button
           type="button"
           onClick={() =>
@@ -276,12 +298,29 @@ vi.mock('../../../calendar/board/ts/src/next', () => ({
         >
           open-calendar-select
         </button>
-        {currentEvents.length > 0 ? (
+        {freeSlotEvents.map((ev, idx) => (
+          <button
+            key={`free-slot-${idx}`}
+            type="button"
+            onClick={() =>
+              onEventClick?.({
+                event: {
+                  extendedProps: {
+                    freeTimeSlot: ev.extendedProps?.freeTimeSlot,
+                  },
+                },
+              })
+            }
+          >
+            Reservar slot
+          </button>
+        ))}
+        {bookingEvent?.extendedProps?.calendarEvent ? (
           <>
             <button
               type="button"
               onClick={() => {
-                const calendarEvent = currentEvents[0]?.extendedProps?.calendarEvent;
+                const calendarEvent = bookingEvent.extendedProps?.calendarEvent;
                 if (calendarEvent) {
                   onEventClick?.({ event: { extendedProps: { calendarEvent } } });
                 }
@@ -292,7 +331,7 @@ vi.mock('../../../calendar/board/ts/src/next', () => ({
             <button
               type="button"
               onClick={() => {
-                const calendarEvent = currentEvents[0]?.extendedProps?.calendarEvent;
+                const calendarEvent = bookingEvent.extendedProps?.calendarEvent;
                 if (calendarEvent) {
                   onEventDrop?.({
                     event: {
@@ -312,7 +351,7 @@ vi.mock('../../../calendar/board/ts/src/next', () => ({
               <button
                 type="button"
                 onClick={() => {
-                  const calendarEvent = currentEvents[0]?.extendedProps?.calendarEvent;
+                  const calendarEvent = bookingEvent.extendedProps?.calendarEvent;
                   if (calendarEvent) {
                     onEventResize?.({
                       event: {
@@ -799,7 +838,6 @@ describe('SchedulingCalendar', () => {
 
     renderCalendar(client);
 
-    await screen.findAllByRole('button', { name: 'Reservar slot' });
     fireEvent.click(await screen.findByRole('button', { name: 'Bloquear horario' }));
 
     const reasonInput = await screen.findByLabelText('Motivo');

package/src/SchedulingCalendarBoard.tsx

@@ -14,7 +14,6 @@ import type { SchedulingClient } from './client';
 import {
   formatSchedulingClock,
   formatSchedulingCompactClock,
-  formatSchedulingDateOnly,
   resolveSchedulingCopyLocale,
 } from './locale';
 import {
@@ -40,6 +39,7 @@ import {
   buildSchedulingDetailsModalState,
   buildSlotIdentity,
   buildSyntheticTimeSlotFromEditor,
+  calendarSelectionAllowedWithBuffers,
   resolveBookingDisplayTitle,
   toDateInputValue as toDateInputValueFromIso,
   toTimeInputValue,
@@ -503,19 +503,6 @@ export function SchedulingCalendar({
     staleTime: 20_000,
   });
 
-  const slotsQuery = useQuery<TimeSlot[]>({
-    queryKey: schedulingKeys.slots(selectedBranchId, selectedServiceId, selectedResourceId, focusedDate),
-    queryFn: () =>
-      client.listSlots({
-        branchId: selectedBranchId ?? '',
-        serviceId: selectedServiceId ?? '',
-        resourceId: selectedResourceId,
-        date: focusedDate,
-      }),
-    enabled: Boolean(selectedBranchId && selectedServiceId),
-    staleTime: 10_000,
-  });
-
   const createEditorDate = modalState.open && modalState.mode === 'create' ? modalState.editor.date : focusedDate;
 
   const createSlotsQuery = useQuery<TimeSlot[]>({
@@ -867,17 +854,51 @@ export function SchedulingCalendar({
     });
   }, [bookingsQuery.data, selectedServiceId, selectedResourceId, scheduleServices, filteredResources, deferredSearch, copy.statuses]);
 
-  const slotItems = useMemo(() => {
-    const source = slotsQuery.data ?? [];
-    return source.filter((slot) =>
-      matchesSearch(deferredSearch, [
-        slot.resource_name,
-        formatSchedulingClock(slot.start_at, locale),
-        formatSchedulingClock(slot.end_at, locale),
-        selectedService?.name,
-      ]),
+  /** Reservas para colisiones en el calendario (sin filtro de búsqueda: no ocultar conflictos). */
+  const collisionBookings = useMemo(() => {
+    const source = bookingsQuery.data ?? [];
+    return source.filter((booking) => {
+      if (selectedServiceId && booking.service_id !== selectedServiceId) {
+        return false;
+      }
+      if (selectedResourceId && booking.resource_id !== selectedResourceId) {
+        return false;
+      }
+      return true;
+    });
+  }, [bookingsQuery.data, selectedServiceId, selectedResourceId]);
+
+  const filteredFreeSlots = useMemo(() => {
+    return visibleSlots.filter(
+      (slot) =>
+        slot.remaining > 0 &&
+        matchesSearch(deferredSearch, [
+          slot.resource_name,
+          formatSchedulingClock(slot.start_at, locale),
+          formatSchedulingClock(slot.end_at, locale),
+          selectedService?.name,
+        ]),
     );
-  }, [slotsQuery.data, deferredSearch, selectedService?.name, locale]);
+  }, [visibleSlots, deferredSearch, selectedService?.name, locale]);
+
+  const freeSlotCalendarEvents = useMemo<EventInput[]>(
+    () =>
+      filteredFreeSlots.map((slot) => ({
+        id: `free-slot:${buildSlotIdentity(slot.resource_id, slot.start_at, slot.end_at)}`,
+        title: copy.openBooking,
+        start: slot.start_at,
+        end: slot.end_at,
+        backgroundColor: '#d1fae5',
+        borderColor: '#34d399',
+        textColor: '#065f46',
+        classNames: ['modules-scheduling__calendar-event--free-slot'],
+        editable: false,
+        extendedProps: {
+          freeTimeSlot: slot,
+        },
+      })),
+    [filteredFreeSlots, copy.openBooking],
+  );
 
   const calendarEvents = useMemo(
     () => buildSchedulingCalendarEvents(filteredBookings, scheduleServices, filteredResources, eventColor),
@@ -907,33 +928,103 @@ export function SchedulingCalendar({
   );
 
   const fullCalendarEventInputs = useMemo(
-    () => [...buildFullCalendarEventInputs(calendarEvents), ...blockedRangeEventInputs],
-    [calendarEvents, blockedRangeEventInputs],
+    () => [
+      ...freeSlotCalendarEvents,
+      ...blockedRangeEventInputs,
+      ...buildFullCalendarEventInputs(calendarEvents),
+    ],
+    [freeSlotCalendarEvents, blockedRangeEventInputs, calendarEvents],
   );
 
   const resolveDaySlots = (value: Date): TimeSlot[] => visibleSlotsByDate.get(toDateInputValue(value)) ?? [];
 
   const handleSelectAllow = (info: CalendarSelectAllowArg) => {
-    // Google-like: allow any non-empty range when a service is selected.
-    // Backend revalidates against availability rules, blocked ranges and overlaps
-    // when the booking is persisted; the frontend only requires a service.
     if (!selectedService || !info.start || !info.end) {
       return false;
     }
-    return info.end.getTime() > info.start.getTime();
+    if (info.end.getTime() <= info.start.getTime()) {
+      return false;
+    }
+    const resourceIds = filteredResources.map((r) => r.id);
+    return calendarSelectionAllowedWithBuffers({
+      start: info.start,
+      end: info.end,
+      service: selectedService,
+      resourceIds,
+      bookings: collisionBookings,
+      blockedRanges,
+    });
   };
 
   const handleEventAllow = (dropInfo: CalendarEventAllowArg, draggedEvent: CalendarDraggedEventArg) => {
-    if (!draggedEvent) {
+    if (!draggedEvent || !dropInfo.start || !dropInfo.end) {
       return false;
     }
-    // Both blocks and bookings are draggable/resizable freely from the owner console.
-    // Backend revalidates against availability rules, blocked ranges, and booking
-    // overlaps when persisting; the frontend only requires a non-empty range.
-    return Boolean(dropInfo.start && dropInfo.end);
+    const ext = draggedEvent.extendedProps as {
+      blockedRange?: BlockedRange;
+      calendarEvent?: CalendarEvent;
+    };
+    const blockedRange = ext.blockedRange;
+    const sourceBooking = ext.calendarEvent?.sourceBooking;
+    if (blockedRange) {
+      const resourceIds = blockedRange.resource_id
+        ? [blockedRange.resource_id]
+        : filteredResources.map((r) => r.id);
+      if (!resourceIds.length) {
+        return false;
+      }
+      return calendarSelectionAllowedWithBuffers({
+        start: dropInfo.start,
+        end: dropInfo.end,
+        service: selectedService,
+        resourceIds,
+        bookings: collisionBookings,
+        blockedRanges,
+        occupancyIsExplicit: true,
+        excludeBlockedRangeId: blockedRange.id,
+      });
+    }
+    if (sourceBooking) {
+      const dragService =
+        scheduleServices.find((s) => s.id === sourceBooking.service_id) ?? selectedService;
+      if (!dragService) {
+        return false;
+      }
+      return calendarSelectionAllowedWithBuffers({
+        start: dropInfo.start,
+        end: dropInfo.end,
+        service: dragService,
+        resourceIds: [sourceBooking.resource_id],
+        bookings: collisionBookings,
+        blockedRanges,
+        excludeBookingId: sourceBooking.id,
+      });
+    }
+    return true;
   };
 
   const renderEventContent = (info: EventContentArg) => {
+    const freeSlot = info.event.extendedProps.freeTimeSlot as TimeSlot | undefined;
+    if (freeSlot) {
+      const listView = info.view.type.startsWith('list');
+      const rangeLabel = `${formatSchedulingClock(freeSlot.start_at, locale)} – ${formatSchedulingClock(freeSlot.end_at, locale)}`;
+      const compactRange = `${formatSchedulingCompactClock(freeSlot.start_at, locale)}-${formatSchedulingCompactClock(freeSlot.end_at, locale)}`;
+      const secondary = listView
+        ? `${rangeLabel} · ${freeSlot.resource_name} · ${copy.slotRemainingLabel}: ${freeSlot.remaining}`
+        : `${compactRange} · ${freeSlot.resource_name} · ${copy.slotRemainingLabel} ${freeSlot.remaining}`;
+      return (
+        <div
+          className={`modules-scheduling__calendar-event modules-scheduling__calendar-event--free-slot${listView ? ' modules-scheduling__calendar-event--list' : ''}`}
+        >
+          <div className="modules-scheduling__calendar-event-top">
+            <strong>{copy.openBooking}</strong>
+          </div>
+          <div className="modules-scheduling__calendar-event-meta">
+            <span>{secondary}</span>
+          </div>
+        </div>
+      );
+    }
     const calendarEvent = info.event.extendedProps.calendarEvent as CalendarEvent | undefined;
     if (!calendarEvent) {
       return <span>{info.event.title}</span>;
@@ -966,8 +1057,16 @@ export function SchedulingCalendar({
   };
 
   const openCreateBookingModal = (slot: TimeSlot, resourceName?: string) => {
+    const dayKey = toDateInputValueFromIso(slot.start_at);
+    const sameDaySlots = visibleSlots.filter((s) => toDateInputValueFromIso(s.start_at) === dayKey);
     setModalState(
-      buildSchedulingCreateModalStateFromSlot(slot, selectedService, slotsQuery.data ?? [], filteredResources, resourceName),
+      buildSchedulingCreateModalStateFromSlot(
+        slot,
+        selectedService,
+        sameDaySlots.length > 0 ? sameDaySlots : [slot],
+        filteredResources,
+        resourceName,
+      ),
     );
   };
 
@@ -1092,6 +1191,11 @@ export function SchedulingCalendar({
   };
 
   const handleCalendarEventClick = (info: EventClickArg) => {
+    const freeSlot = info.event.extendedProps.freeTimeSlot as TimeSlot | undefined;
+    if (freeSlot) {
+      openCreateBookingModal(freeSlot, freeSlot.resource_name);
+      return;
+    }
     const blockedRange = info.event.extendedProps.blockedRange as BlockedRange | undefined;
     if (blockedRange) {
       openBlockedRangeEditModal(blockedRange);
@@ -1327,8 +1431,8 @@ export function SchedulingCalendar({
           {(copy.timelineTitle || copy.timelineDescription) && (
             <div className="card-header">
               <div>
-                {copy.timelineTitle && <h2>{copy.timelineTitle}</h2>}
-                {copy.timelineDescription && <p className="text-secondary">{copy.timelineDescription}</p>}
+                {copy.timelineTitle ? <h2>{copy.timelineTitle}</h2> : null}
+                {copy.timelineDescription ? <p className="text-secondary">{copy.timelineDescription}</p> : null}
               </div>
             </div>
           )}
@@ -1365,6 +1469,16 @@ export function SchedulingCalendar({
                 scrollCalendarToRelevantTime();
               });
             }}
+            toolbarTrailing={
+              <button
+                type="button"
+                className="btn-secondary btn-sm"
+                onClick={openBlockedRangeCreateModal}
+                disabled={!selectedBranchId}
+              >
+                {copy.blockedRangeAction}
+              </button>
+            }
             scrollTime={timeGridViewport.scrollTime}
             scrollTimeReset={false}
             slotMinTime={timeGridViewport.slotMinTime}
@@ -1391,86 +1505,6 @@ export function SchedulingCalendar({
             }}
           />
         </div>
-
-        <aside className="card modules-scheduling__slots-card">
-          <div className="card-header">
-            <div>
-              <h2>{copy.slotsTitle}</h2>
-              <p className="text-secondary">{copy.slotsDescription}</p>
-            </div>
-            <button
-              type="button"
-              className="btn-secondary btn-sm"
-              onClick={openBlockedRangeCreateModal}
-              disabled={!selectedBranchId}
-            >
-              {copy.blockedRangeAction}
-            </button>
-          </div>
-          <div className="modules-scheduling__slots-date">
-            <span>{formatSchedulingDateOnly(focusedDate, locale)}</span>
-            {selectedBranch ? <span>{selectedBranch.name}</span> : null}
-          </div>
-          {slotsQuery.isLoading ? (
-            <div className="modules-scheduling__empty">{copy.slotsLoading}</div>
-          ) : slotItems.length === 0 ? (
-            <div className="modules-scheduling__empty">{copy.slotsEmpty}</div>
-          ) : (
-            <ul className="modules-scheduling__slot-list">
-              {slotItems.map((slot) => (
-                <li key={`${slot.resource_id}:${slot.start_at}`} className="modules-scheduling__slot-card">
-                  <div className="modules-scheduling__slot-main">
-                    <strong>
-                      {formatSchedulingClock(slot.start_at, locale)} - {formatSchedulingClock(slot.end_at, locale)}
-                    </strong>
-                    <span>{slot.resource_name}</span>
-                  </div>
-                  <div className="modules-scheduling__slot-meta">
-                    <span>
-                      {copy.slotRemainingLabel}: {slot.remaining}
-                    </span>
-                    <button
-                      type="button"
-                      className="btn-primary btn-sm"
-                      onClick={() => openCreateBookingModal(slot, slot.resource_name)}
-                    >
-                      {copy.openBooking}
-                    </button>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          )}
-
-          <div className="modules-scheduling__results">
-            {filteredBookings.length === 0 ? (
-              <span className="text-muted">{copy.searchPlaceholder}</span>
-            ) : (
-              filteredBookings.slice(0, 6).map((booking) => {
-                const serviceName = scheduleServices.find((service) => service.id === booking.service_id)?.name;
-                const resourceName = filteredResources.find((resource) => resource.id === booking.resource_id)?.name;
-                return (
-                  <button
-                    key={booking.id}
-                    type="button"
-                    className="modules-scheduling__booking-row"
-                    onClick={() => setModalState(buildSchedulingDetailsModalState(booking, scheduleServices, filteredResources))}
-                  >
-                    <div className="modules-scheduling__booking-row-main">
-                      <strong>{resolveBookingDisplayTitle(booking)}</strong>
-                      <span>{serviceName ?? booking.service_id}</span>
-                    </div>
-                    <div className="modules-scheduling__booking-row-meta">
-                      <span>{formatSchedulingClock(booking.start_at, locale)}</span>
-                      <span className={statusClassName(booking.status)}>{copy.statuses[booking.status]}</span>
-                      <span>{resourceName ?? booking.resource_id}</span>
-                    </div>
-                  </button>
-                );
-              })
-            )}
-          </div>
-        </aside>
       </div>
 
       <div className="card">

package/src/schedulingCalendarLogic.collision.test.ts

@@ -0,0 +1,158 @@
+import { describe, expect, it } from 'vitest';
+import type { Booking, Service } from './types';
+import {
+  bookingBlocksCollisions,
+  bookingOccupancyOverlapsWindow,
+  buildOccupancyWindowFromServiceRange,
+  calendarSelectionAllowedWithBuffers,
+  schedulingIntervalsOverlap,
+} from './schedulingCalendarLogic';
+
+const baseService: Service = {
+  id: 'svc',
+  org_id: 'o',
+  code: 'c',
+  name: 'N',
+  description: '',
+  fulfillment_mode: 'schedule',
+  default_duration_minutes: 30,
+  buffer_before_minutes: 0,
+  buffer_after_minutes: 15,
+  slot_granularity_minutes: 15,
+  max_concurrent_bookings: 1,
+  min_cancel_notice_minutes: 0,
+  allow_waitlist: false,
+  active: true,
+  resource_ids: [],
+  metadata: {},
+  created_at: '',
+  updated_at: '',
+};
+
+describe('schedulingIntervalsOverlap', () => {
+  it('detecta solape y permite límite contiguo sin solape', () => {
+    const a0 = new Date('2026-04-09T15:30:00Z');
+    const a1 = new Date('2026-04-09T16:00:00Z');
+    const b0 = new Date('2026-04-09T16:00:00Z');
+    const b1 = new Date('2026-04-09T16:30:00Z');
+    expect(schedulingIntervalsOverlap(a0, a1, b0, b1)).toBe(false);
+    expect(schedulingIntervalsOverlap(a0, a1, new Date('2026-04-09T15:45:00Z'), b1)).toBe(true);
+  });
+});
+
+describe('buildOccupancyWindowFromServiceRange', () => {
+  it('extiende el fin con buffer_after', () => {
+    const start = new Date('2026-04-09T16:00:00Z');
+    const end = new Date('2026-04-09T16:30:00Z');
+    const { occupiesFrom, occupiesUntil } = buildOccupancyWindowFromServiceRange(start, end, baseService);
+    expect(occupiesFrom.toISOString()).toBe('2026-04-09T16:00:00.000Z');
+    expect(occupiesUntil.toISOString()).toBe('2026-04-09T16:45:00.000Z');
+  });
+});
+
+describe('calendarSelectionAllowedWithBuffers', () => {
+  const booking: Booking = {
+    id: 'b1',
+    org_id: 'o',
+    branch_id: 'br',
+    service_id: baseService.id,
+    resource_id: 'res1',
+    reference: 'r',
+    customer_name: 'A',
+    customer_phone: '1',
+    status: 'confirmed',
+    source: 'admin',
+    start_at: '2026-04-09T15:30:00Z',
+    end_at: '2026-04-09T16:00:00Z',
+    occupies_from: '2026-04-09T15:30:00Z',
+    occupies_until: '2026-04-09T16:15:00Z',
+    notes: '',
+    created_by: 'x',
+    created_at: '',
+    updated_at: '',
+  };
+
+  it('rechaza selección que cae en ventana de buffer del turno previo', () => {
+    const ok = calendarSelectionAllowedWithBuffers({
+      start: new Date('2026-04-09T16:00:00Z'),
+      end: new Date('2026-04-09T16:30:00Z'),
+      service: baseService,
+      resourceIds: ['res1'],
+      bookings: [booking],
+      blockedRanges: [],
+    });
+    expect(ok).toBe(false);
+  });
+
+  it('acepta selección tras el buffer del turno previo', () => {
+    const ok = calendarSelectionAllowedWithBuffers({
+      start: new Date('2026-04-09T16:15:00Z'),
+      end: new Date('2026-04-09T16:45:00Z'),
+      service: baseService,
+      resourceIds: ['res1'],
+      bookings: [booking],
+      blockedRanges: [],
+    });
+    expect(ok).toBe(true);
+  });
+});
+
+describe('bookingOccupancyOverlapsWindow', () => {
+  it('usa occupies del booking', () => {
+    const booking: Booking = {
+      id: 'b1',
+      org_id: 'o',
+      branch_id: 'br',
+      service_id: 's',
+      resource_id: 'res1',
+      reference: 'r',
+      customer_name: 'A',
+      customer_phone: '1',
+      status: 'confirmed',
+      source: 'admin',
+      start_at: '2026-04-09T15:30:00Z',
+      end_at: '2026-04-09T16:00:00Z',
+      occupies_from: '2026-04-09T15:30:00Z',
+      occupies_until: '2026-04-09T16:15:00Z',
+      notes: '',
+      created_by: 'x',
+      created_at: '',
+      updated_at: '',
+    };
+    expect(
+      bookingOccupancyOverlapsWindow(
+        booking,
+        new Date('2026-04-09T16:00:00Z'),
+        new Date('2026-04-09T16:30:00Z'),
+      ),
+    ).toBe(true);
+  });
+});
+
+describe('bookingBlocksCollisions', () => {
+  it('excluye hold vencido', () => {
+    const past = new Date(Date.now() - 60_000).toISOString();
+    const booking: Booking = {
+      id: 'h',
+      org_id: 'o',
+      branch_id: 'br',
+      service_id: 's',
+      resource_id: 'r',
+      reference: 'r',
+      customer_name: 'A',
+      customer_phone: '1',
+      status: 'hold',
+      source: 'admin',
+      start_at: '2099-01-01T10:00:00Z',
+      end_at: '2099-01-01T10:30:00Z',
+      occupies_from: '2099-01-01T10:00:00Z',
+      occupies_until: '2099-01-01T10:30:00Z',
+      hold_expires_at: past,
+      notes: '',
+      created_by: 'x',
+      created_at: '',
+      updated_at: '',
+    };
+    expect(bookingBlocksCollisions(booking)).toBe(false);
+  });
+});

package/src/schedulingCalendarLogic.ts

@@ -5,7 +5,16 @@ import type {
   SchedulingBookingModalState,
   SchedulingBookingRecurrenceDraft,
 } from './SchedulingBookingModal';
-import type { AvailabilityRule, Booking, Branch, CalendarEvent, Resource, Service, TimeSlot } from './types';
+import type {
+  AvailabilityRule,
+  BlockedRange,
+  Booking,
+  Branch,
+  CalendarEvent,
+  Resource,
+  Service,
+  TimeSlot,
+} from './types';
 
 export type SchedulingBusinessHours = {
   daysOfWeek: number[];
@@ -371,3 +380,152 @@ export function buildSyntheticTimeSlotFromEditor(
     granularity_minutes: service.slot_granularity_minutes,
   };
 }
+
+/** Paridad con `bookingStatusesBlocking` en el repositorio Go. */
+export const SCHEDULING_BLOCKING_BOOKING_STATUSES: ReadonlySet<Booking['status']> = new Set([
+  'hold',
+  'pending_confirmation',
+  'confirmed',
+  'checked_in',
+  'in_service',
+]);
+
+export function bookingBlocksCollisions(booking: Booking, nowMs: number = Date.now()): boolean {
+  if (!SCHEDULING_BLOCKING_BOOKING_STATUSES.has(booking.status)) {
+    return false;
+  }
+  if (booking.status === 'hold' && booking.hold_expires_at) {
+    const exp = Date.parse(booking.hold_expires_at);
+    if (Number.isFinite(exp) && exp < nowMs) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function buildOccupancyWindowFromServiceRange(
+  start: Date,
+  end: Date,
+  service: Pick<Service, 'buffer_before_minutes' | 'buffer_after_minutes'>,
+): { occupiesFrom: Date; occupiesUntil: Date } {
+  const beforeMs = Math.max(0, service.buffer_before_minutes ?? 0) * 60_000;
+  const afterMs = Math.max(0, service.buffer_after_minutes ?? 0) * 60_000;
+  return {
+    occupiesFrom: new Date(start.getTime() - beforeMs),
+    occupiesUntil: new Date(end.getTime() + afterMs),
+  };
+}
+
+/** Solape de intervalos [aStart,aEnd) vs [bStart,bEnd) alineado al criterio SQL del backend. */
+export function schedulingIntervalsOverlap(aStart: Date, aEnd: Date, bStart: Date, bEnd: Date): boolean {
+  return aStart.getTime() < bEnd.getTime() && aEnd.getTime() > bStart.getTime();
+}
+
+export function bookingOccupancyOverlapsWindow(
+  booking: Booking,
+  occupiesFrom: Date,
+  occupiesUntil: Date,
+): boolean {
+  const bStart = new Date(booking.occupies_from);
+  const bEnd = new Date(booking.occupies_until);
+  if (!Number.isFinite(bStart.getTime()) || !Number.isFinite(bEnd.getTime())) {
+    return false;
+  }
+  return schedulingIntervalsOverlap(occupiesFrom, occupiesUntil, bStart, bEnd);
+}
+
+export function blockedRangeOverlapsWindow(
+  range: BlockedRange,
+  occupiesFrom: Date,
+  occupiesUntil: Date,
+  resourceId: string,
+): boolean {
+  const rStart = new Date(range.start_at);
+  const rEnd = new Date(range.end_at);
+  if (!Number.isFinite(rStart.getTime()) || !Number.isFinite(rEnd.getTime())) {
+    return false;
+  }
+  const appliesToResource = !range.resource_id || range.resource_id === resourceId;
+  if (!appliesToResource) {
+    return false;
+  }
+  return schedulingIntervalsOverlap(occupiesFrom, occupiesUntil, rStart, rEnd);
+}
+
+/**
+ * Comprueba si algún recurso candidato admite la selección sin solapar ocupaciones existentes
+ * (incl. buffers del servicio) ni bloqueos. Evita abrir el modal con rangos que el backend
+ * rechazará con 409.
+ */
+export function calendarSelectionAllowedWithBuffers(params: {
+  start: Date;
+  end: Date;
+  /** Obligatorio salvo cuando `occupancyIsExplicit` es true (solo se usa para buffers). */
+  service: Service | null;
+  resourceIds: readonly string[];
+  bookings: readonly Booking[];
+  blockedRanges: readonly BlockedRange[];
+  /** Ventana de ocupación = [start,end] sin ampliar por buffers (p. ej. arrastre de bloqueo). */
+  occupancyIsExplicit?: boolean;
+  excludeBookingId?: string | null;
+  excludeBlockedRangeId?: string | null;
+}): boolean {
+  const {
+    start,
+    end,
+    service,
+    resourceIds,
+    bookings,
+    blockedRanges,
+    occupancyIsExplicit = false,
+    excludeBookingId,
+    excludeBlockedRangeId,
+  } = params;
+  if (!resourceIds.length) {
+    return false;
+  }
+  if (!occupancyIsExplicit && !service) {
+    return false;
+  }
+  const { occupiesFrom, occupiesUntil } = occupancyIsExplicit
+    ? { occupiesFrom: start, occupiesUntil: end }
+    : buildOccupancyWindowFromServiceRange(start, end, service!);
+  if (occupiesUntil.getTime() <= occupiesFrom.getTime()) {
+    return false;
+  }
+
+  for (const resourceId of resourceIds) {
+    let collides = false;
+    for (const booking of bookings) {
+      if (excludeBookingId && booking.id === excludeBookingId) {
+        continue;
+      }
+      if (!bookingBlocksCollisions(booking)) {
+        continue;
+      }
+      if (booking.resource_id !== resourceId) {
+        continue;
+      }
+      if (bookingOccupancyOverlapsWindow(booking, occupiesFrom, occupiesUntil)) {
+        collides = true;
+        break;
+      }
+    }
+    if (collides) {
+      continue;
+    }
+    for (const range of blockedRanges) {
+      if (excludeBlockedRangeId && range.id === excludeBlockedRangeId) {
+        continue;
+      }
+      if (blockedRangeOverlapsWindow(range, occupiesFrom, occupiesUntil, resourceId)) {
+        collides = true;
+        break;
+      }
+    }
+    if (!collides) {
+      return true;
+    }
+  }
+  return false;
+}

package/src/styles.css

@@ -17,14 +17,13 @@
 }
 
 .modules-scheduling__layout {
-  display: grid;
-  grid-template-columns: 1fr;
+  display: flex;
+  flex-direction: column;
   gap: var(--space-4);
-  align-items: start;
+  align-items: stretch;
 }
 
-.modules-scheduling__calendar-card,
-.modules-scheduling__slots-card {
+.modules-scheduling__calendar-card {
   min-width: 0;
 }
 
@@ -33,12 +32,6 @@
   min-height: 620px;
 }
 
-.modules-scheduling__slots-card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
-
 .modules-scheduling__calendar-event {
   display: flex;
   flex-direction: column;
@@ -94,6 +87,14 @@
   white-space: normal;
 }
 
+.modules-scheduling__calendar-event--free-slot {
+  cursor: pointer;
+}
+
+.modules-scheduling__calendar-event--free-slot strong {
+  font-size: 0.78rem;
+}
+
 .modules-scheduling__slots-date {
   display: flex;
   align-items: center;
@@ -590,10 +591,6 @@
 }
 
 @media (max-width: 1100px) {
-  .modules-scheduling__layout {
-    grid-template-columns: 1fr;
-  }
-
   .modules-scheduling__calendar-card .modules-calendar {
     height: calc(100vh - 240px);
     min-height: 540px;