feat: implement public booking cancellation feature

- Added cancelPublicBooking handler to manage booking cancellations. - Updated public booking service to include cancellation logic. - Created cancelPublicBooking schema for input validation. - Modified public booking confirmation page to allow users to cancel their bookings. - Enhanced email service to send cancellation confirmation emails. - Made customerEmail field required in booking schemas and updated related components. - Updated API client to support cancellation requests. - Added migration to enforce non-nullable customer_email fields in the database.
feat(booking-ui): add confirmation dialog for cancelling bookings and improve mobile UI
2026-06-05 11:24:02 -03:00 · 2026-06-04 16:39:45 -03:00 · 2026-06-04 16:33:51 -03:00 · 2026-06-04 14:06:23 -03:00 · 2026-06-03 10:57:23 -03:00 · 2026-06-03 13:44:12 +00:00
38 changed files with 1153 additions and 468 deletions
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -193,3 +193,61 @@ await getAvailability('my-club', { date: '2026-04-20' });
 1. Create `lib/api/resources/[resource].ts`
 2. Export functions using `http` from `../http`
 3. Add exports in `lib/api/index.ts`
+
+## Email Templates
+
+Todos los emails deben usar la misma estética. El layout compartido está en `apps/backend/src/emails/booking-confirmation.ts`.
+
+### Layout (`wrapLayout`)
+
+Exportado como `wrapLayout(content)`. Proporciona:
+- Fondo: `#edf7f4`
+- Card blanca: `max-width: 520px`, `border-radius: 28px`, `box-shadow: 0 24px 70px rgba(15,23,42,0.12)`, `border: 1px solid rgba(5,9,20,0.1)`
+- Playzer favicon: `{APP_BASE_URL}/playzer-favicon-512-transparent.png` (está en `apps/frontend/public/`)
+- **Sin `min-height: 100vh`**: la card empieza arriba, no centrada verticalmente
+
+```typescript
+import { wrapLayout } from '@/emails/booking-confirmation';
+
+const html = wrapLayout(`<tr>...contenido...</tr>`);
+```
+
+### Estructura de cada email
+
+| Sección | Descripción |
+|---------|-------------|
+| **Header** | Dos columnas: badge pill a la izquierda + Playzer (favicon + texto) a la derecha. El badge usa `border-radius: 999px`, `padding: 4px 12px`, `font-size: 11px`, `font-weight: 700`, `letter-spacing: 0.14em`, `text-transform: uppercase`. |
+| **Card fecha/hora** | Fondo `#f0fdf4`, borde `1px solid rgba(5,150,105,0.3)`, `border-radius: 24px`. Siempre verde aunque el email sea de cancelación. |
+| **Grilla detalles** | `border: 1px solid #e5e7eb`, `border-radius: 22px`, dos celdas de 50% con `border-right` en la primera. |
+| **Botón CTA** | Tabla con fondo `#059669`, `border-radius: 12px`, link blanco con `padding: 14px 32px`. |
+| **Pie** | Sin pie de marca. Solo texto secundario opcional centrado si es necesario. |
+| **Sin botones de acción** | Los emails de booking **no** incluyen los botones "Compartir por WhatsApp" ni "Hacer otra reserva". |
+
+### Padding estándar
+
+| Ubicación | Valor |
+|-----------|-------|
+| Wrapper (outer `<td>`) | `padding: 24px 12px` |
+| Primer `<td>` del contenido (header) | `padding: 24px 20px 16px` |
+| `<td>` intermedios (cards, texto) | `padding: 0 20px 16px` |
+| Último `<td>` del contenido | `padding: 0 20px 24px` |
+
+### Colores de badges según estado
+
+| Estado | Fondo badge | Texto badge |
+|--------|-------------|-------------|
+| Confirmado | `#f0fdf4` | `#15803d` |
+| Cancelado | `#fef2f2` | `#dc2626` |
+| No concretado | `#fffbeb` | `#d97706` |
+| Neutro (verificación, etc.) | `#f4f4f5` | `#71717a` |
+
+### Archivos de templates
+
+| Archivo | Templates |
+|---------|-----------|
+| `apps/backend/src/emails/booking-confirmation.ts` | `bookingConfirmationHtml`, `bookingCancelledHtml`, `bookingNoShowHtml` + exporta `wrapLayout` |
+| `apps/backend/src/lib/auth.ts` | Email de verificación de Better Auth (usa `wrapLayout` inline) |
+
+### Regla general
+
+Para emails nuevos: importar `wrapLayout`, construir el HTML interno con `<tr>`s, usar la misma estructura de cabecera (badge + Playzer), y nunca incluir el pie "Playzer — Reserva de canchas online". Usar `APP_BASE_URL` para construir URLs absolutas al logo.
--- a/apps/backend/package.json
+++ b/apps/backend/package.json
@@ -4,7 +4,7 @@
    "dev": "bun run --hot src/server.ts",
    "start": "bun src/server.ts",
    "build": "tsc -b",
-    "test": "bun test",
+    "test": "bun test --preload ./test/support/prisma.mock.ts ./test",
    "lint": "biome check .",
    "lint:fix": "biome check --write .",
    "format": "biome format --write .",
--- a/apps/backend/prisma/court.prisma
+++ b/apps/backend/prisma/court.prisma
@@ -85,7 +85,7 @@ model CourtBooking {
  endTime       String              @map("end_time") @db.VarChar(5)
  customerName  String              @map("customer_name") @db.VarChar(120)
  customerPhone String              @map("customer_phone") @db.VarChar(30)
-  customerEmail String?             @map("customer_email") @db.VarChar(254)
+  customerEmail String              @map("customer_email") @db.VarChar(254)
  status        CourtBookingStatus  @default(CONFIRMED)
  createdAt     DateTime            @default(now()) @map("created_at")
  updatedAt     DateTime            @updatedAt @map("updated_at")
@@ -108,7 +108,7 @@ model CourtBookingLog {
  newStatus      CourtBookingStatus  @map("new_status")
  customerName  String               @map("customer_name") @db.VarChar(120)
  customerPhone String               @map("customer_phone") @db.VarChar(30)
-  customerEmail String?              @map("customer_email") @db.VarChar(254)
+  customerEmail String               @map("customer_email") @db.VarChar(254)
  changedAt      DateTime            @default(now()) @map("changed_at")

  @@map("court_booking_logs")
--- a/apps/backend/prisma/migrations/20260605121954_make_email_required/migration.sql
+++ b/apps/backend/prisma/migrations/20260605121954_make_email_required/migration.sql
@@ -0,0 +1,16 @@
+/*
+  Warnings:
+
+  - Made the column `customer_email` on table `court_booking_logs` required. This step will fail if there are existing NULL values in that column.
+  - Made the column `customer_email` on table `court_bookings` required. This step will fail if there are existing NULL values in that column.
+
+*/
+-- Backfill existing NULL values with placeholder
+UPDATE "court_booking_logs" SET "customer_email" = 'missing@playzer.app' WHERE "customer_email" IS NULL;
+UPDATE "court_bookings" SET "customer_email" = 'missing@playzer.app' WHERE "customer_email" IS NULL;
+
+-- AlterTable
+ALTER TABLE "court_booking_logs" ALTER COLUMN "customer_email" SET NOT NULL;
+
+-- AlterTable
+ALTER TABLE "court_bookings" ALTER COLUMN "customer_email" SET NOT NULL;
--- a/apps/backend/src/emails/booking-confirmation.ts
+++ b/apps/backend/src/emails/booking-confirmation.ts
@@ -1,5 +1,6 @@
 type BookingEmailData = {
  bookingCode: string;
+  complexSlug?: string;
  complexName: string;
  date: string;
  startTime: string;
@@ -10,6 +11,20 @@ type BookingEmailData = {
  price?: number;
 };

+const APP_BASE_URL = process.env.APP_BASE_URL ?? 'http://localhost:5173';
+
+function formatBookingPrice(price: number): string {
+  if (price === 0) {
+    return 'Sin cargo';
+  }
+
+  return new Intl.NumberFormat('es-AR', {
+    style: 'currency',
+    currency: 'ARS',
+    maximumFractionDigits: Number.isInteger(price) ? 0 : 2,
+  }).format(price);
+}
+
 function formatFriendlyDate(isoDate: string): string {
  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(isoDate);
  if (!match) return isoDate;
@@ -27,7 +42,7 @@ const BASE_STYLES = `
  body {
    margin: 0;
    padding: 0;
-    background-color: #f4f4f5;
+    background-color: #edf7f4;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }
  * {
@@ -35,7 +50,7 @@ const BASE_STYLES = `
  }
 `;

-function wrapLayout(content: string) {
+export function wrapLayout(content: string) {
  return `<!DOCTYPE html>
 <html lang="es">
 <head>
@@ -44,11 +59,11 @@ function wrapLayout(content: string) {
  <title>Playzer</title>
  <style>${BASE_STYLES}</style>
 </head>
-<body style="margin:0;padding:0;background-color:#f4f4f5;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;">
-  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f4f5;min-height:100vh;">
+<body style="margin:0;padding:0;background-color:#edf7f4;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;">
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#edf7f4;">
    <tr>
-      <td align="center" style="padding:32px 16px;">
-        <table role="presentation" width="100%" style="max-width:520px;background-color:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.08);">
+      <td align="center" style="padding:24px 12px;">
+        <table role="presentation" width="100%" style="max-width:520px;background-color:#ffffff;border-radius:28px;overflow:hidden;box-shadow:0 24px 70px rgba(15,23,42,0.12);border:1px solid rgba(5,9,20,0.1);">
          ${content}
        </table>
      </td>
@@ -58,160 +73,227 @@ function wrapLayout(content: string) {
 </html>`;
 }

-function headerSection() {
-  return `
-    <tr>
-      <td style="background-color:#0a1628;padding:32px 32px 28px;text-align:center;">
-        <span style="font-size:24px;font-weight:700;color:#10b981;letter-spacing:-0.3px;">Playzer</span>
-      </td>
-    </tr>`;
-}
+export function bookingConfirmationHtml(data: BookingEmailData): string {
+  const formattedPrice = formatBookingPrice(data.price ?? 0);
+  const friendlyDate = formatFriendlyDate(data.date);

-function divider() {
-  return `
+  const content = `
    <tr>
-      <td style="padding:0 32px;">
+      <td style="padding:24px 20px 16px;">
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
          <tr>
-            <td style="height:1px;background-color:#e5e7eb;line-height:1px;font-size:1px;">&nbsp;</td>
+            <td valign="top">
+              <table role="presentation" cellpadding="0" cellspacing="0" style="display:inline-block;background-color:#f0fdf4;border-radius:999px;padding:4px 12px;">
+                <tr>
+                  <td style="font-size:11px;font-weight:700;letter-spacing:0.14em;color:#15803d;text-transform:uppercase;line-height:1.25rem;">
+                    &#10003; Reserva confirmada
+                  </td>
+                </tr>
+              </table>
+              <h1 style="margin:12px 0 0;font-size:28px;font-weight:700;color:#111827;letter-spacing:-0.025em;">
+                ${data.complexName}
+              </h1>
+            </td>
+            <td valign="top" align="right" style="white-space:nowrap;">
+              <table role="presentation" cellpadding="0" cellspacing="0">
+                <tr>
+                  <td valign="middle" style="padding-right:8px;">
+                    <img src="${APP_BASE_URL}/playzer-favicon-512-transparent.png" alt="Playzer" width="32" height="32" style="display:block;" />
+                  </td>
+                  <td valign="middle">
+                    <span style="font-size:18px;font-weight:700;color:#475569;letter-spacing:-0.025em;">Playzer</span>
+                  </td>
+                </tr>
+              </table>
+            </td>
          </tr>
        </table>
      </td>
-    </tr>`;
-}
+    </tr>

-function dateTimeBlock(date: string, startTime: string, endTime: string): string {
-  const friendlyDate = formatFriendlyDate(date);
-
-  return `
    <tr>
-      <td style="padding:0 32px;">
-        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f0fdf4;border-radius:10px;border:1px solid #bbf7d0;">
+      <td style="padding:0 20px 16px;">
+        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f0fdf4;border-radius:24px;border:1px solid rgba(5,150,105,0.3);">
          <tr>
-            <td style="padding:20px 24px;text-align:center;">
-              <p style="margin:0;font-size:16px;font-weight:700;color:#065f46;line-height:1.4;">
-                ${friendlyDate}
+            <td style="padding:20px 24px;">
+              <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
+                <tr>
+                  <td valign="bottom">
+                    <p style="margin:0;font-size:13px;font-weight:600;color:#15803d;">
+                      Tu turno
+                    </p>
+                    <p style="margin:12px 0 0;font-size:28px;font-weight:900;color:#111827;line-height:1.1;letter-spacing:-0.025em;">
+                      ${friendlyDate}
+                    </p>
+                    <p style="margin:8px 0 0;font-size:24px;font-weight:900;color:#059669;line-height:1;letter-spacing:-0.025em;">
+                      ${data.startTime} &mdash; ${data.endTime}
+                    </p>
+                  </td>
+                  <td valign="bottom" align="right" style="padding-left:16px;">
+                    <table role="presentation" cellpadding="0" cellspacing="0" style="background-color:rgba(255,255,255,0.8);border-radius:16px;border:1px solid rgba(5,150,105,0.2);">
+                      <tr>
+                        <td style="padding:12px 16px;text-align:right;min-width:120px;">
+                          <p style="margin:0;font-size:11px;font-weight:500;color:#6b7280;">Precio del turno</p>
+                          <p style="margin:4px 0 0;font-size:20px;font-weight:700;color:#111827;">${formattedPrice}</p>
+                        </td>
+                      </tr>
+                    </table>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+
+    <tr>
+      <td style="padding:0 20px 16px;">
+        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e5e7eb;border-radius:22px;overflow:hidden;">
+          <tr>
+            <td width="50%" style="padding:16px;border-right:1px solid #e5e7eb;background-color:#ffffff;">
+              <p style="margin:0;font-size:13px;font-weight:500;color:#6b7280;">
+                Cancha
              </p>
-              <p style="margin:8px 0 0;font-size:22px;font-weight:800;color:#059669;letter-spacing:-0.3px;">
-                ${startTime} &mdash; ${endTime}
+              <p style="margin:8px 0 0;font-size:14px;font-weight:600;color:#111827;">
+                ${data.courtName} &mdash; ${data.sportName}
+              </p>
+            </td>
+            <td width="50%" style="padding:16px;background-color:#ffffff;">
+              <p style="margin:0;font-size:13px;font-weight:500;color:#6b7280;">
+                C&oacute;digo de reserva
+              </p>
+              <p style="margin:8px 0 0;font-family:monospace;font-size:16px;font-weight:700;letter-spacing:0.18em;color:#111827;">
+                ${data.bookingCode}
              </p>
            </td>
          </tr>
        </table>
      </td>
-    </tr>`;
-}
-
-export function bookingConfirmationHtml(data: BookingEmailData): string {
-  const formattedPrice =
-    data.price !== undefined && data.price > 0
-      ? new Intl.NumberFormat('es-AR', {
-          style: 'currency',
-          currency: 'ARS',
-          maximumFractionDigits: Number.isInteger(data.price) ? 0 : 2,
-        }).format(data.price)
-      : undefined;
-
-  const content = `
-    ${headerSection()}
-    <tr>
-      <td style="padding:32px 32px 8px;">
-        <h1 style="margin:0;font-size:22px;font-weight:700;color:#111827;text-align:center;">
-          Reserva confirmada
-        </h1>
-        <p style="margin:8px 0 0;font-size:14px;color:#6b7280;text-align:center;">
-          ${data.complexName}
-        </p>
-      </td>
    </tr>

+    ${
+      data.complexSlug
+        ? `
    <tr>
-      <td style="padding:20px 32px 12px;">
-        ${dateTimeBlock(data.date, data.startTime, data.endTime)}
-      </td>
-    </tr>
-
-    ${divider()}
-
-    <tr>
-      <td style="padding:24px 32px;">
+      <td style="padding:0 20px 24px;">
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
-          ${detailRow('Código', `<span style="font-family:monospace;font-weight:700;letter-spacing:2px;">${data.bookingCode}</span>`)}
-          ${detailRow('Cancha', `${data.courtName} &mdash; ${data.sportName}`)}
-          ${detailRow('Cliente', data.customerName)}
-          ${formattedPrice ? detailRow('Precio', formattedPrice) : ''}
+          <tr>
+            <td align="center">
+              <table role="presentation" cellpadding="0" cellspacing="0" style="background-color:#059669;border-radius:12px;">
+                <tr>
+                  <td style="padding:14px 32px;font-size:15px;font-weight:600;">
+                    <a href="${APP_BASE_URL}/${data.complexSlug}/booking/confirmed/${data.bookingCode}" style="color:#ffffff;text-decoration:none;display:inline-block;">
+                      Cancelar reserva
+                    </a>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
        </table>
      </td>
-    </tr>
-
-    ${divider()}
-
-    <tr>
-      <td style="padding:24px 32px;">
-        <p style="margin:0;font-size:13px;color:#6b7280;text-align:center;line-height:1.5;">
-          Presentá el código de reserva al llegar al complejo.
-          <br />
-          Si necesitás cancelar o modificar, contactate directamente con el complejo.
-        </p>
-      </td>
-    </tr>
-
-    <tr>
-      <td style="background-color:#f9fafb;padding:20px 32px;text-align:center;">
-        <p style="margin:0;font-size:12px;color:#9ca3af;">
-          Playzer &mdash; Reserva de canchas online
-        </p>
-      </td>
-    </tr>`;
+    </tr>`
+        : ''
+    }`;

  return wrapLayout(content);
 }

 export function bookingCancelledHtml(data: BookingEmailData): string {
+  const friendlyDate = formatFriendlyDate(data.date);
+
  const content = `
-    ${headerSection()}
    <tr>
-      <td style="padding:32px 32px 8px;">
-        <h1 style="margin:0;font-size:22px;font-weight:700;color:#dc2626;text-align:center;">
-          Reserva cancelada
-        </h1>
-        <p style="margin:8px 0 0;font-size:14px;color:#6b7280;text-align:center;">
-          ${data.complexName}
-        </p>
-      </td>
-    </tr>
-
-    <tr>
-      <td style="padding:20px 32px 12px;">
-        ${dateTimeBlock(data.date, data.startTime, data.endTime)}
-      </td>
-    </tr>
-
-    ${divider()}
-
-    <tr>
-      <td style="padding:24px 32px;">
-        <p style="margin:0;font-size:14px;color:#374151;line-height:1.6;">
-          La reserva <strong style="font-family:monospace;font-weight:700;letter-spacing:2px;">${data.bookingCode}</strong>
-          fue cancelada. Si tenés dudas, contactate con el complejo.
-        </p>
-      </td>
-    </tr>
-
-    <tr>
-      <td style="padding:0 32px 24px;">
+      <td style="padding:24px 20px 16px;">
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
-          ${detailRow('Cancha', `${data.courtName} &mdash; ${data.sportName}`)}
-          ${detailRow('Cliente', data.customerName)}
+          <tr>
+            <td valign="top">
+              <table role="presentation" cellpadding="0" cellspacing="0" style="display:inline-block;background-color:#fef2f2;border-radius:999px;padding:4px 12px;">
+                <tr>
+                  <td style="font-size:11px;font-weight:700;letter-spacing:0.14em;color:#dc2626;text-transform:uppercase;line-height:1.25rem;">
+                    &#10007; Reserva cancelada
+                  </td>
+                </tr>
+              </table>
+              <h1 style="margin:12px 0 0;font-size:28px;font-weight:700;color:#111827;letter-spacing:-0.025em;">
+                ${data.complexName}
+              </h1>
+            </td>
+            <td valign="top" align="right" style="white-space:nowrap;">
+              <table role="presentation" cellpadding="0" cellspacing="0">
+                <tr>
+                  <td valign="middle" style="padding-right:8px;">
+                    <img src="${APP_BASE_URL}/playzer-favicon-512-transparent.png" alt="Playzer" width="32" height="32" style="display:block;" />
+                  </td>
+                  <td valign="middle">
+                    <span style="font-size:18px;font-weight:700;color:#475569;letter-spacing:-0.025em;">Playzer</span>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
        </table>
      </td>
    </tr>

    <tr>
-      <td style="background-color:#f9fafb;padding:20px 32px;text-align:center;">
-        <p style="margin:0;font-size:12px;color:#9ca3af;">
-          Playzer &mdash; Reserva de canchas online
-        </p>
+      <td style="padding:0 20px 16px;">
+        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f0fdf4;border-radius:24px;border:1px solid rgba(5,150,105,0.3);">
+          <tr>
+            <td style="padding:20px 24px;">
+              <p style="margin:0;font-size:13px;font-weight:600;color:#15803d;">
+                Tu turno
+              </p>
+              <p style="margin:12px 0 0;font-size:28px;font-weight:900;color:#111827;line-height:1.1;letter-spacing:-0.025em;">
+                ${friendlyDate}
+              </p>
+              <p style="margin:8px 0 0;font-size:24px;font-weight:900;color:#059669;line-height:1;letter-spacing:-0.025em;">
+                ${data.startTime} &mdash; ${data.endTime}
+              </p>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+
+    <tr>
+      <td style="padding:0 20px 16px;">
+        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#fef2f2;border-radius:24px;border:1px solid rgba(220,38,38,0.3);">
+          <tr>
+            <td style="padding:20px 24px;">
+              <p style="margin:0;font-size:14px;color:#374151;line-height:1.6;">
+                La reserva <strong style="font-family:monospace;font-weight:700;letter-spacing:2px;">${data.bookingCode}</strong>
+                fue cancelada. Si ten&eacute;s dudas, contactate con el complejo.
+              </p>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+
+    <tr>
+      <td style="padding:0 20px 24px;">
+        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e5e7eb;border-radius:22px;overflow:hidden;">
+          <tr>
+            <td width="50%" style="padding:16px;border-right:1px solid #e5e7eb;background-color:#ffffff;">
+              <p style="margin:0;font-size:13px;font-weight:500;color:#6b7280;">
+                Cancha
+              </p>
+              <p style="margin:8px 0 0;font-size:14px;font-weight:600;color:#111827;">
+                ${data.courtName} &mdash; ${data.sportName}
+              </p>
+            </td>
+            <td width="50%" style="padding:16px;background-color:#ffffff;">
+              <p style="margin:0;font-size:13px;font-weight:500;color:#6b7280;">
+                Cliente
+              </p>
+              <p style="margin:8px 0 0;font-size:14px;font-weight:600;color:#111827;">
+                ${data.customerName}
+              </p>
+            </td>
+          </tr>
+        </table>
      </td>
    </tr>`;

@@ -219,70 +301,101 @@ export function bookingCancelledHtml(data: BookingEmailData): string {
 }

 export function bookingNoShowHtml(data: BookingEmailData): string {
+  const friendlyDate = formatFriendlyDate(data.date);
+
  const content = `
-    ${headerSection()}
    <tr>
-      <td style="padding:32px 32px 8px;">
-        <h1 style="margin:0;font-size:22px;font-weight:700;color:#d97706;text-align:center;">
-          Reserva no concretada
-        </h1>
-        <p style="margin:8px 0 0;font-size:14px;color:#6b7280;text-align:center;">
-          ${data.complexName}
-        </p>
-      </td>
-    </tr>
-
-    <tr>
-      <td style="padding:20px 32px 12px;">
-        ${dateTimeBlock(data.date, data.startTime, data.endTime)}
-      </td>
-    </tr>
-
-    ${divider()}
-
-    <tr>
-      <td style="padding:24px 32px;">
-        <p style="margin:0;font-size:14px;color:#374151;line-height:1.6;">
-          La reserva <strong style="font-family:monospace;font-weight:700;letter-spacing:2px;">${data.bookingCode}</strong>
-          fue registrada como no concretada por falta de asistencia.
-        </p>
-      </td>
-    </tr>
-
-    <tr>
-      <td style="padding:0 32px 24px;">
+      <td style="padding:24px 20px 16px;">
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
-          ${detailRow('Cancha', `${data.courtName} &mdash; ${data.sportName}`)}
-          ${detailRow('Cliente', data.customerName)}
+          <tr>
+            <td valign="top">
+              <table role="presentation" cellpadding="0" cellspacing="0" style="display:inline-block;background-color:#fffbeb;border-radius:999px;padding:4px 12px;">
+                <tr>
+                  <td style="font-size:11px;font-weight:700;letter-spacing:0.14em;color:#d97706;text-transform:uppercase;line-height:1.25rem;">
+                    Reserva no concretada
+                  </td>
+                </tr>
+              </table>
+              <h1 style="margin:12px 0 0;font-size:28px;font-weight:700;color:#111827;letter-spacing:-0.025em;">
+                ${data.complexName}
+              </h1>
+            </td>
+            <td valign="top" align="right" style="white-space:nowrap;">
+              <table role="presentation" cellpadding="0" cellspacing="0">
+                <tr>
+                  <td valign="middle" style="padding-right:8px;">
+                    <img src="${APP_BASE_URL}/playzer-favicon-512-transparent.png" alt="Playzer" width="32" height="32" style="display:block;" />
+                  </td>
+                  <td valign="middle">
+                    <span style="font-size:18px;font-weight:700;color:#475569;letter-spacing:-0.025em;">Playzer</span>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
        </table>
      </td>
    </tr>

    <tr>
-      <td style="background-color:#f9fafb;padding:20px 32px;text-align:center;">
-        <p style="margin:0;font-size:12px;color:#9ca3af;">
-          Playzer &mdash; Reserva de canchas online
-        </p>
-      </td>
-    </tr>`;
-
-  return wrapLayout(content);
-}
-
-function detailRow(label: string, value: string): string {
-  return `
-    <tr>
-      <td style="padding:6px 0;">
-        <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
+      <td style="padding:0 20px 16px;">
+        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f0fdf4;border-radius:24px;border:1px solid rgba(5,150,105,0.3);">
          <tr>
-            <td style="width:100px;font-size:13px;color:#6b7280;vertical-align:top;padding:2px 0;">
-              ${label}
+            <td style="padding:20px 24px;">
+              <p style="margin:0;font-size:13px;font-weight:600;color:#15803d;">
+                Tu turno
+              </p>
+              <p style="margin:12px 0 0;font-size:28px;font-weight:900;color:#111827;line-height:1.1;letter-spacing:-0.025em;">
+                ${friendlyDate}
+              </p>
+              <p style="margin:8px 0 0;font-size:24px;font-weight:900;color:#059669;line-height:1;letter-spacing:-0.025em;">
+                ${data.startTime} &mdash; ${data.endTime}
+              </p>
            </td>
-            <td style="font-size:13px;font-weight:600;color:#111827;vertical-align:top;padding:2px 0;">
-              ${value}
+          </tr>
+        </table>
+      </td>
+    </tr>
+
+    <tr>
+      <td style="padding:0 20px 16px;">
+        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#fffbeb;border-radius:24px;border:1px solid rgba(217,119,6,0.3);">
+          <tr>
+            <td style="padding:20px 24px;">
+              <p style="margin:0;font-size:14px;color:#374151;line-height:1.6;">
+                La reserva <strong style="font-family:monospace;font-weight:700;letter-spacing:2px;">${data.bookingCode}</strong>
+                fue registrada como no concretada por falta de asistencia.
+              </p>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+
+    <tr>
+      <td style="padding:0 20px 24px;">
+        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e5e7eb;border-radius:22px;overflow:hidden;">
+          <tr>
+            <td width="50%" style="padding:16px;border-right:1px solid #e5e7eb;background-color:#ffffff;">
+              <p style="margin:0;font-size:13px;font-weight:500;color:#6b7280;">
+                Cancha
+              </p>
+              <p style="margin:8px 0 0;font-size:14px;font-weight:600;color:#111827;">
+                ${data.courtName} &mdash; ${data.sportName}
+              </p>
+            </td>
+            <td width="50%" style="padding:16px;background-color:#ffffff;">
+              <p style="margin:0;font-size:13px;font-weight:500;color:#6b7280;">
+                Cliente
+              </p>
+              <p style="margin:8px 0 0;font-size:14px;font-weight:600;color:#111827;">
+                ${data.customerName}
+              </p>
            </td>
          </tr>
        </table>
      </td>
    </tr>`;
+
+  return wrapLayout(content);
 }
--- a/apps/backend/src/generated/prisma/internal/class.ts
+++ b/apps/backend/src/generated/prisma/internal/class.ts
--- a/apps/backend/src/generated/prisma/models/CourtBooking.ts
+++ b/apps/backend/src/generated/prisma/models/CourtBooking.ts
@@ -198,7 +198,7 @@ export type CourtBookingGroupByOutputType = {
  endTime: string
  customerName: string
  customerPhone: string
-  customerEmail: string | null
+  customerEmail: string
  status: $Enums.CourtBookingStatus
  createdAt: Date
  updatedAt: Date
@@ -234,7 +234,7 @@ export type CourtBookingWhereInput = {
  endTime?: Prisma.StringFilter<"CourtBooking"> | string
  customerName?: Prisma.StringFilter<"CourtBooking"> | string
  customerPhone?: Prisma.StringFilter<"CourtBooking"> | string
-  customerEmail?: Prisma.StringNullableFilter<"CourtBooking"> | string | null
+  customerEmail?: Prisma.StringFilter<"CourtBooking"> | string
  status?: Prisma.EnumCourtBookingStatusFilter<"CourtBooking"> | $Enums.CourtBookingStatus
  createdAt?: Prisma.DateTimeFilter<"CourtBooking"> | Date | string
  updatedAt?: Prisma.DateTimeFilter<"CourtBooking"> | Date | string
@@ -250,7 +250,7 @@ export type CourtBookingOrderByWithRelationInput = {
  endTime?: Prisma.SortOrder
  customerName?: Prisma.SortOrder
  customerPhone?: Prisma.SortOrder
-  customerEmail?: Prisma.SortOrderInput | Prisma.SortOrder
+  customerEmail?: Prisma.SortOrder
  status?: Prisma.SortOrder
  createdAt?: Prisma.SortOrder
  updatedAt?: Prisma.SortOrder
@@ -270,7 +270,7 @@ export type CourtBookingWhereUniqueInput = Prisma.AtLeast<{
  endTime?: Prisma.StringFilter<"CourtBooking"> | string
  customerName?: Prisma.StringFilter<"CourtBooking"> | string
  customerPhone?: Prisma.StringFilter<"CourtBooking"> | string
-  customerEmail?: Prisma.StringNullableFilter<"CourtBooking"> | string | null
+  customerEmail?: Prisma.StringFilter<"CourtBooking"> | string
  status?: Prisma.EnumCourtBookingStatusFilter<"CourtBooking"> | $Enums.CourtBookingStatus
  createdAt?: Prisma.DateTimeFilter<"CourtBooking"> | Date | string
  updatedAt?: Prisma.DateTimeFilter<"CourtBooking"> | Date | string
@@ -286,7 +286,7 @@ export type CourtBookingOrderByWithAggregationInput = {
  endTime?: Prisma.SortOrder
  customerName?: Prisma.SortOrder
  customerPhone?: Prisma.SortOrder
-  customerEmail?: Prisma.SortOrderInput | Prisma.SortOrder
+  customerEmail?: Prisma.SortOrder
  status?: Prisma.SortOrder
  createdAt?: Prisma.SortOrder
  updatedAt?: Prisma.SortOrder
@@ -307,7 +307,7 @@ export type CourtBookingScalarWhereWithAggregatesInput = {
  endTime?: Prisma.StringWithAggregatesFilter<"CourtBooking"> | string
  customerName?: Prisma.StringWithAggregatesFilter<"CourtBooking"> | string
  customerPhone?: Prisma.StringWithAggregatesFilter<"CourtBooking"> | string
-  customerEmail?: Prisma.StringNullableWithAggregatesFilter<"CourtBooking"> | string | null
+  customerEmail?: Prisma.StringWithAggregatesFilter<"CourtBooking"> | string
  status?: Prisma.EnumCourtBookingStatusWithAggregatesFilter<"CourtBooking"> | $Enums.CourtBookingStatus
  createdAt?: Prisma.DateTimeWithAggregatesFilter<"CourtBooking"> | Date | string
  updatedAt?: Prisma.DateTimeWithAggregatesFilter<"CourtBooking"> | Date | string
@@ -321,7 +321,7 @@ export type CourtBookingCreateInput = {
  endTime: string
  customerName: string
  customerPhone: string
-  customerEmail?: string | null
+  customerEmail: string
  status?: $Enums.CourtBookingStatus
  createdAt?: Date | string
  updatedAt?: Date | string
@@ -337,7 +337,7 @@ export type CourtBookingUncheckedCreateInput = {
  endTime: string
  customerName: string
  customerPhone: string
-  customerEmail?: string | null
+  customerEmail: string
  status?: $Enums.CourtBookingStatus
  createdAt?: Date | string
  updatedAt?: Date | string
@@ -351,7 +351,7 @@ export type CourtBookingUpdateInput = {
  endTime?: Prisma.StringFieldUpdateOperationsInput | string
  customerName?: Prisma.StringFieldUpdateOperationsInput | string
  customerPhone?: Prisma.StringFieldUpdateOperationsInput | string
-  customerEmail?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
+  customerEmail?: Prisma.StringFieldUpdateOperationsInput | string
  status?: Prisma.EnumCourtBookingStatusFieldUpdateOperationsInput | $Enums.CourtBookingStatus
  createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
  updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
@@ -367,7 +367,7 @@ export type CourtBookingUncheckedUpdateInput = {
  endTime?: Prisma.StringFieldUpdateOperationsInput | string
  customerName?: Prisma.StringFieldUpdateOperationsInput | string
  customerPhone?: Prisma.StringFieldUpdateOperationsInput | string
-  customerEmail?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
+  customerEmail?: Prisma.StringFieldUpdateOperationsInput | string
  status?: Prisma.EnumCourtBookingStatusFieldUpdateOperationsInput | $Enums.CourtBookingStatus
  createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
  updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
@@ -382,7 +382,7 @@ export type CourtBookingCreateManyInput = {
  endTime: string
  customerName: string
  customerPhone: string
-  customerEmail?: string | null
+  customerEmail: string
  status?: $Enums.CourtBookingStatus
  createdAt?: Date | string
  updatedAt?: Date | string
@@ -396,7 +396,7 @@ export type CourtBookingUpdateManyMutationInput = {
  endTime?: Prisma.StringFieldUpdateOperationsInput | string
  customerName?: Prisma.StringFieldUpdateOperationsInput | string
  customerPhone?: Prisma.StringFieldUpdateOperationsInput | string
-  customerEmail?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
+  customerEmail?: Prisma.StringFieldUpdateOperationsInput | string
  status?: Prisma.EnumCourtBookingStatusFieldUpdateOperationsInput | $Enums.CourtBookingStatus
  createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
  updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
@@ -411,7 +411,7 @@ export type CourtBookingUncheckedUpdateManyInput = {
  endTime?: Prisma.StringFieldUpdateOperationsInput | string
  customerName?: Prisma.StringFieldUpdateOperationsInput | string
  customerPhone?: Prisma.StringFieldUpdateOperationsInput | string
-  customerEmail?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
+  customerEmail?: Prisma.StringFieldUpdateOperationsInput | string
  status?: Prisma.EnumCourtBookingStatusFieldUpdateOperationsInput | $Enums.CourtBookingStatus
  createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
  updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
@@ -532,7 +532,7 @@ export type CourtBookingCreateWithoutCourtInput = {
  endTime: string
  customerName: string
  customerPhone: string
-  customerEmail?: string | null
+  customerEmail: string
  status?: $Enums.CourtBookingStatus
  createdAt?: Date | string
  updatedAt?: Date | string
@@ -546,7 +546,7 @@ export type CourtBookingUncheckedCreateWithoutCourtInput = {
  endTime: string
  customerName: string
  customerPhone: string
-  customerEmail?: string | null
+  customerEmail: string
  status?: $Enums.CourtBookingStatus
  createdAt?: Date | string
  updatedAt?: Date | string
@@ -590,7 +590,7 @@ export type CourtBookingScalarWhereInput = {
  endTime?: Prisma.StringFilter<"CourtBooking"> | string
  customerName?: Prisma.StringFilter<"CourtBooking"> | string
  customerPhone?: Prisma.StringFilter<"CourtBooking"> | string
-  customerEmail?: Prisma.StringNullableFilter<"CourtBooking"> | string | null
+  customerEmail?: Prisma.StringFilter<"CourtBooking"> | string
  status?: Prisma.EnumCourtBookingStatusFilter<"CourtBooking"> | $Enums.CourtBookingStatus
  createdAt?: Prisma.DateTimeFilter<"CourtBooking"> | Date | string
  updatedAt?: Prisma.DateTimeFilter<"CourtBooking"> | Date | string
@@ -604,7 +604,7 @@ export type CourtBookingCreateManyCourtInput = {
  endTime: string
  customerName: string
  customerPhone: string
-  customerEmail?: string | null
+  customerEmail: string
  status?: $Enums.CourtBookingStatus
  createdAt?: Date | string
  updatedAt?: Date | string
@@ -618,7 +618,7 @@ export type CourtBookingUpdateWithoutCourtInput = {
  endTime?: Prisma.StringFieldUpdateOperationsInput | string
  customerName?: Prisma.StringFieldUpdateOperationsInput | string
  customerPhone?: Prisma.StringFieldUpdateOperationsInput | string
-  customerEmail?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
+  customerEmail?: Prisma.StringFieldUpdateOperationsInput | string
  status?: Prisma.EnumCourtBookingStatusFieldUpdateOperationsInput | $Enums.CourtBookingStatus
  createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
  updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
@@ -632,7 +632,7 @@ export type CourtBookingUncheckedUpdateWithoutCourtInput = {
  endTime?: Prisma.StringFieldUpdateOperationsInput | string
  customerName?: Prisma.StringFieldUpdateOperationsInput | string
  customerPhone?: Prisma.StringFieldUpdateOperationsInput | string
-  customerEmail?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
+  customerEmail?: Prisma.StringFieldUpdateOperationsInput | string
  status?: Prisma.EnumCourtBookingStatusFieldUpdateOperationsInput | $Enums.CourtBookingStatus
  createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
  updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
@@ -646,7 +646,7 @@ export type CourtBookingUncheckedUpdateManyWithoutCourtInput = {
  endTime?: Prisma.StringFieldUpdateOperationsInput | string
  customerName?: Prisma.StringFieldUpdateOperationsInput | string
  customerPhone?: Prisma.StringFieldUpdateOperationsInput | string
-  customerEmail?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
+  customerEmail?: Prisma.StringFieldUpdateOperationsInput | string
  status?: Prisma.EnumCourtBookingStatusFieldUpdateOperationsInput | $Enums.CourtBookingStatus
  createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
  updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
@@ -742,7 +742,7 @@ export type $CourtBookingPayload<ExtArgs extends runtime.Types.Extensions.Intern
    endTime: string
    customerName: string
    customerPhone: string
-    customerEmail: string | null
+    customerEmail: string
    status: $Enums.CourtBookingStatus
    createdAt: Date
    updatedAt: Date
--- a/apps/backend/src/lib/auth.ts
+++ b/apps/backend/src/lib/auth.ts
@@ -1,3 +1,4 @@
+import { wrapLayout } from '@/emails/booking-confirmation';
 import { dash } from '@better-auth/infra';
 import { betterAuth } from 'better-auth';
 import { prismaAdapter } from 'better-auth/adapters/prisma';
@@ -34,10 +35,73 @@ export const auth = betterAuth({
      const verificationUrl = new URL(url);
      const appUrl = process.env.APP_BASE_URL ?? 'http://localhost:5173';
      verificationUrl.searchParams.set('callbackURL', appUrl);
+
+      const content = `
+        <tr>
+          <td style="padding:24px 20px 16px;">
+            <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
+              <tr>
+                <td valign="top">
+                  <table role="presentation" cellpadding="0" cellspacing="0" style="display:inline-block;background-color:#f4f4f5;border-radius:999px;padding:4px 12px;">
+                    <tr>
+                      <td style="font-size:11px;font-weight:700;letter-spacing:0.14em;color:#71717a;text-transform:uppercase;line-height:1.25rem;">
+                        Verificaci&oacute;n de email
+                      </td>
+                    </tr>
+                  </table>
+                  <h1 style="margin:16px 0 0;font-size:24px;font-weight:700;color:#111827;letter-spacing:-0.025em;">
+                    Verific&aacute; tu direcci&oacute;n de correo electr&oacute;nico
+                  </h1>
+                </td>
+                <td valign="top" align="right" style="white-space:nowrap;">
+                  <table role="presentation" cellpadding="0" cellspacing="0">
+                    <tr>
+                      <td valign="middle" style="padding-right:8px;">
+                        <img src="${appUrl}/playzer-favicon-512-transparent.png" alt="Playzer" width="32" height="32" style="display:block;" />
+                      </td>
+                      <td valign="middle">
+                        <span style="font-size:18px;font-weight:700;color:#475569;letter-spacing:-0.025em;">Playzer</span>
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+
+        <tr>
+padding:0 20px 16px;
+            <p style="margin:0;font-size:15px;color:#374151;line-height:1.6;">
+              Hac&eacute; click en el bot&oacute;n de abajo para verificar tu direcci&oacute;n de correo electr&oacute;nico y empezar a usar Playzer.
+            </p>
+          </td>
+        </tr>
+
+        <tr>
+          <td style="padding:0 20px 24px;">
+            <table role="presentation" cellpadding="0" cellspacing="0">
+              <tr>
+                <td style="background-color:#059669;border-radius:12px;text-align:center;">
+                  <a href="${verificationUrl.toString()}" style="display:block;padding:14px 32px;font-size:15px;font-weight:600;color:#ffffff;text-decoration:none;line-height:1.25rem;">Verificar email</a>
+                </td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+
+        <tr>
+          <td style="padding:0 20px 24px;">
+            <p style="margin:0;font-size:13px;color:#9ca3af;text-align:center;line-height:1.5;">
+              Si no creaste una cuenta en Playzer, ignor&aacute; este mensaje.
+            </p>
+          </td>
+        </tr>`;
+
      await sendMail({
        to: user.email,
        subject: 'Verificá tu email en Playzer',
-        html: `Hacé click para verificar tu email: <a href="${verificationUrl.toString()}">${verificationUrl.toString()}</a>`,
+        html: wrapLayout(content),
        text: `Hacé click para verificar tu email: ${verificationUrl.toString()}`,
      });
    },
--- a/apps/backend/src/modules/admin-booking/handlers/create-admin-booking.handler.ts
+++ b/apps/backend/src/modules/admin-booking/handlers/create-admin-booking.handler.ts
@@ -1,3 +1,4 @@
+import { db } from '@/lib/prisma';
 import {
  AdminBookingServiceError,
  createAdminBooking,
@@ -16,8 +17,14 @@ export async function createAdminBookingHandler(c: AppContext) {
  try {
    const booking = await createAdminBooking(user.id, complexId, payload);

+    const complex = await db.complex.findUnique({
+      where: { id: complexId },
+      select: { complexSlug: true },
+    });
+
    void sendBookingConfirmation({
      bookingCode: booking.bookingCode,
+      complexSlug: complex?.complexSlug ?? '',
      complexName: booking.complexName,
      date: booking.date,
      startTime: booking.startTime,
--- a/apps/backend/src/modules/admin-booking/services/admin-booking.service.ts
+++ b/apps/backend/src/modules/admin-booking/services/admin-booking.service.ts
@@ -199,7 +199,7 @@ function mapBookingResponse(booking: {
  endTime: string;
  customerName: string;
  customerPhone: string;
-  customerEmail: string | null;
+  customerEmail: string;
  status: 'CONFIRMED' | 'CANCELLED' | 'COMPLETED' | 'NOSHOW';
  createdAt: Date;
  updatedAt: Date;
@@ -235,7 +235,7 @@ function mapBookingResponse(booking: {
    endTime: booking.endTime,
    customerName: booking.customerName,
    customerPhone: booking.customerPhone,
-    customerEmail: booking.customerEmail ?? undefined,
+    customerEmail: booking.customerEmail,
    price: booking.price ?? 0,
    status: booking.status,
    createdAt: booking.createdAt.toISOString(),
@@ -424,7 +424,7 @@ export async function createAdminBooking(
            endTime: selectedSlot.endTime,
            customerName: input.customerName.trim(),
            customerPhone: input.customerPhone.trim(),
-            customerEmail: input.customerEmail?.trim() || null,
+            customerEmail: input.customerEmail.trim(),
            status: 'CONFIRMED',
          },
          include: {
--- a/apps/backend/src/modules/public-booking/handlers/cancel-public-booking.handler.ts
+++ b/apps/backend/src/modules/public-booking/handlers/cancel-public-booking.handler.ts
@@ -0,0 +1,55 @@
+import { sseManager } from '@/lib/sse';
+import {
+  PublicBookingServiceError,
+  cancelPublicBooking,
+} from '@/modules/public-booking/services/public-booking.service';
+import { sendBookingCancelled } from '@/services/booking-email.service';
+import type { AppContext } from '@/types/hono';
+import type { CancelPublicBookingInput } from '@repo/api-contract';
+
+type ComplexSlugParams = { complexSlug: string };
+
+export async function cancelPublicBookingHandler(c: AppContext) {
+  const { complexSlug } = c.req.valid('param' as never) as ComplexSlugParams;
+  const payload = c.req.valid('json' as never) as CancelPublicBookingInput;
+
+  try {
+    const booking = await cancelPublicBooking(complexSlug, payload);
+
+    const channel = `complex-${booking.complexId}`;
+    sseManager.emit(
+      channel,
+      JSON.stringify({
+        type: 'booking_cancelled',
+        booking: {
+          bookingCode: booking.bookingCode,
+          courtId: booking.courtId,
+          date: booking.date,
+          startTime: booking.startTime,
+          endTime: booking.endTime,
+        },
+      })
+    );
+
+    void sendBookingCancelled({
+      bookingCode: booking.bookingCode,
+      complexSlug: booking.complexSlug,
+      complexName: booking.complexName,
+      date: booking.date,
+      startTime: booking.startTime,
+      endTime: booking.endTime,
+      courtName: booking.courtName,
+      sportName: booking.sport.name,
+      customerName: booking.customerName,
+      customerEmail: booking.customerEmail,
+    });
+
+    return c.json(booking);
+  } catch (error) {
+    if (error instanceof PublicBookingServiceError) {
+      return c.json({ message: error.message }, error.status);
+    }
+
+    throw error;
+  }
+}
--- a/apps/backend/src/modules/public-booking/handlers/create-public-booking.handler.ts
+++ b/apps/backend/src/modules/public-booking/handlers/create-public-booking.handler.ts
@@ -33,6 +33,7 @@ export async function createPublicBookingHandler(c: AppContext) {

    void sendBookingConfirmation({
      bookingCode: booking.bookingCode,
+      complexSlug: booking.complexSlug,
      complexName: booking.complexName,
      date: booking.date,
      startTime: booking.startTime,
--- a/apps/backend/src/modules/public-booking/public-booking.routes.ts
+++ b/apps/backend/src/modules/public-booking/public-booking.routes.ts
@@ -1,9 +1,14 @@
+import { cancelPublicBookingHandler } from '@/modules/public-booking/handlers/cancel-public-booking.handler';
 import { createPublicBookingHandler } from '@/modules/public-booking/handlers/create-public-booking.handler';
 import { getPublicBookingConfirmationHandler } from '@/modules/public-booking/handlers/get-public-booking-confirmation.handler';
 import { listPublicAvailabilityHandler } from '@/modules/public-booking/handlers/list-public-availability.handler';
 import type { AppEnv } from '@/types/hono';
 import { zValidator } from '@hono/zod-validator';
-import { createPublicBookingSchema, publicAvailabilityQuerySchema } from '@repo/api-contract';
+import {
+  cancelPublicBookingSchema,
+  createPublicBookingSchema,
+  publicAvailabilityQuerySchema,
+} from '@repo/api-contract';
 import { Hono } from 'hono';
 import { z } from 'zod';

@@ -33,3 +38,10 @@ publicBookingRoutes.get(
  zValidator('param', confirmationParamsSchema),
  getPublicBookingConfirmationHandler
 );
+
+publicBookingRoutes.post(
+  '/complex/:complexSlug/cancel',
+  zValidator('param', complexSlugParamsSchema),
+  zValidator('json', cancelPublicBookingSchema),
+  cancelPublicBookingHandler
+);
--- a/apps/backend/src/modules/public-booking/services/public-booking.service.ts
+++ b/apps/backend/src/modules/public-booking/services/public-booking.service.ts
@@ -2,6 +2,7 @@ import { randomInt } from 'node:crypto';
 import { db } from '@/lib/prisma';
 import { evaluatePlanUsage, parsePlanRules } from '@/modules/plan/services/plan-rules.service';
 import type {
+  CancelPublicBookingInput,
  CreatePublicBookingInput,
  DayOfWeek,
  PublicAvailabilityQuery,
@@ -42,7 +43,6 @@ export class PublicBookingServiceError extends Error {

  constructor(message: string, status: 400 | 403 | 404 | 409) {
    super(message);
-    this.name = 'PublicBookingServiceError';
    this.status = status;
  }
 }
@@ -276,7 +276,7 @@ function mapBookingResponse(input: {
  endTime: string;
  customerName: string;
  customerPhone: string;
-  customerEmail: string | null;
+  customerEmail: string;
  price: number;
  status: 'CONFIRMED' | 'CANCELLED' | 'COMPLETED' | 'NOSHOW';
  court: {
@@ -306,7 +306,7 @@ function mapBookingResponse(input: {
    endTime: input.endTime,
    customerName: input.customerName,
    customerPhone: input.customerPhone,
-    customerEmail: input.customerEmail ?? undefined,
+    customerEmail: input.customerEmail,
    status: input.status,
    price: input.price,
    createdAt: input.createdAt.toISOString(),
@@ -386,7 +386,7 @@ export async function getPublicBookingConfirmation(complexSlug: string, bookingC
      slug: booking.court.sport.slug,
    },
    status: booking.status,
-    customerEmail: booking.customerEmail ?? undefined,
+    customerEmail: booking.customerEmail,
    createdAt: booking.createdAt.toISOString(),
  };
 }
@@ -631,7 +631,7 @@ export async function createPublicBooking(complexSlug: string, input: CreatePubl
            endTime: selectedSlot.endTime,
            customerName: input.customerName.trim(),
            customerPhone: input.customerPhone.trim(),
-            customerEmail: input.customerEmail?.trim() || null,
+            customerEmail: input.customerEmail.trim(),
            status: 'CONFIRMED',
          },
          select: {
@@ -712,3 +712,108 @@ export async function createPublicBooking(complexSlug: string, input: CreatePubl
    409
  );
 }
+
+export async function cancelPublicBooking(complexSlug: string, input: CancelPublicBookingInput) {
+  const normalizedBookingCode = input.bookingCode.toUpperCase();
+  const booking = await db.courtBooking.findFirst({
+    where: {
+      bookingCode: normalizedBookingCode,
+      court: {
+        complex: {
+          complexSlug,
+        },
+      },
+    },
+    include: {
+      court: {
+        select: {
+          id: true,
+          name: true,
+          basePrice: true,
+          priceRules: {
+            where: { isActive: true },
+            orderBy: [{ dayOfWeek: 'asc' }, { startTime: 'asc' }],
+          },
+          sport: {
+            select: {
+              id: true,
+              name: true,
+              slug: true,
+            },
+          },
+          complex: {
+            select: {
+              id: true,
+              complexName: true,
+              complexSlug: true,
+            },
+          },
+        },
+      },
+    },
+  });
+
+  if (!booking) {
+    throw new PublicBookingServiceError('Reserva no encontrada.', 404);
+  }
+
+  if (booking.status !== 'CONFIRMED') {
+    throw new PublicBookingServiceError(
+      'Solo se pueden cancelar reservas en estado confirmada.',
+      409
+    );
+  }
+
+  if (booking.customerPhone !== input.customerPhone.trim()) {
+    throw new PublicBookingServiceError('Los datos ingresados no coinciden con la reserva.', 403);
+  }
+
+  const date = formatIsoDate(booking.bookingDate);
+  const { dayOfWeek } = parseIsoDate(date);
+  const price = resolveSlotPrice(booking.court, dayOfWeek, {
+    startTime: booking.startTime,
+    endTime: booking.endTime,
+  });
+
+  await db.courtBookingLog.create({
+    data: {
+      id: uuidv7(),
+      bookingCode: booking.bookingCode,
+      courtId: booking.courtId,
+      bookingDate: booking.bookingDate,
+      startTime: booking.startTime,
+      endTime: booking.endTime,
+      customerName: booking.customerName,
+      customerPhone: booking.customerPhone,
+      customerEmail: booking.customerEmail,
+      previousStatus: booking.status,
+      newStatus: 'CANCELLED',
+    },
+  });
+
+  await db.courtBooking.delete({
+    where: { id: booking.id },
+  });
+
+  return mapBookingResponse({
+    bookingId: booking.id,
+    bookingCode: booking.bookingCode,
+    bookingDate: booking.bookingDate,
+    createdAt: booking.createdAt,
+    startTime: booking.startTime,
+    endTime: booking.endTime,
+    customerName: booking.customerName,
+    customerPhone: booking.customerPhone,
+    customerEmail: booking.customerEmail,
+    price,
+    status: 'CANCELLED',
+    court: {
+      id: booking.court.id,
+      name: booking.court.name,
+      complexId: booking.court.complex.id,
+      complexName: booking.court.complex.complexName,
+      complexSlug: booking.court.complex.complexSlug,
+      sport: booking.court.sport,
+    },
+  });
+}
--- a/apps/backend/src/services/booking-email.service.ts
+++ b/apps/backend/src/services/booking-email.service.ts
@@ -7,6 +7,7 @@ import { sendMail } from '@/lib/mailer';

 type BookingEmailInput = {
  bookingCode: string;
+  complexSlug?: string;
  complexName: string;
  date: string;
  startTime: string;
@@ -14,7 +15,7 @@ type BookingEmailInput = {
  courtName: string;
  sportName: string;
  customerName: string;
-  customerEmail?: string;
+  customerEmail: string;
  price?: number;
 };

@@ -23,6 +24,7 @@ export async function sendBookingConfirmation(data: BookingEmailInput) {

  const html = bookingConfirmationHtml({
    bookingCode: data.bookingCode,
+    complexSlug: data.complexSlug,
    complexName: data.complexName,
    date: data.date,
    startTime: data.startTime,
--- a/apps/backend/test/complex/invite-complex-user.handler.test.ts
+++ b/apps/backend/test/complex/invite-complex-user.handler.test.ts
@@ -1,6 +1,5 @@
 import { beforeEach, expect, mock, test } from 'bun:test';

-import { createInviteComplexUserHandler } from '@/modules/complex/handlers/invite-complex-user.handler';
 import type { InviteComplexUserResponse } from '@repo/api-contract';

 const inviteComplexUserMock = mock(async () => undefined as unknown as InviteComplexUserResponse);
@@ -15,6 +14,10 @@ class MockComplexMembersError extends Error {
  }
 }

+const { createInviteComplexUserHandler } = await import(
+  '@/modules/complex/handlers/invite-complex-user.handler'
+);
+
 const inviteComplexUserHandler = createInviteComplexUserHandler({
  inviteComplexUser: inviteComplexUserMock,
  ComplexMembersError: MockComplexMembersError,
@@ -59,7 +62,6 @@ function createContext(input: {

 beforeEach(() => {
  inviteComplexUserMock.mockReset();
-  mock.clearAllMocks();
 });

 test('returns 201 with the service result', async () => {
--- a/apps/backend/test/complex/invite-complex-user.test.ts
+++ b/apps/backend/test/complex/invite-complex-user.test.ts
@@ -1,14 +1,15 @@
-import { beforeEach, expect, mock, test } from 'bun:test';
+import { beforeEach, expect, test } from 'bun:test';

-import {
-  ComplexMembersError,
-  inviteComplexUser,
-} from '@/modules/complex/services/complex-members.service';
 import { prismaMock, sendMailMock, transactionMock } from '../support/prisma.mock';

+const { ComplexMembersError, inviteComplexUser } = await import(
+  '@/modules/complex/services/complex-members.service'
+);
+
 beforeEach(() => {
  prismaMock._reset();
-  mock.clearAllMocks();
+  sendMailMock.mockClear();
+  transactionMock.mockClear();
 });

 test('creates a pending invitation and sends the email', async () => {
@@ -21,10 +22,10 @@ test('creates a pending invitation and sends the email', async () => {
    complexId: 'complex-1',
    email: 'new.member@example.com',
    tokenHash: 'token-hash',
-    expiresAt: new Date('2026-04-29T00:00:00.000Z'),
+    expiresAt: new Date('2027-01-01T00:00:00.000Z'),
    acceptedAt: null,
    revokedAt: null,
-    createdAt: new Date('2026-04-22T00:00:00.000Z'),
+    createdAt: new Date('2026-12-01T00:00:00.000Z'),
  } as never);

  const result = await inviteComplexUser('admin-1', 'complex-1', {
@@ -79,7 +80,7 @@ test('rejects when the invite target already belongs to the complex', async () =
  }

  expect(caught).toBeInstanceOf(ComplexMembersError);
-  expect((caught as ComplexMembersError).status).toBe(409);
+  expect((caught as InstanceType<typeof ComplexMembersError>).status).toBe(409);
  expect(transactionMock).not.toHaveBeenCalled();
  expect(sendMailMock).not.toHaveBeenCalled();
 });
--- a/apps/backend/test/sport/create-sport.handler.test.ts
+++ b/apps/backend/test/sport/create-sport.handler.test.ts
@@ -49,7 +49,6 @@ function createContext(body: unknown) {

 beforeEach(() => {
  createSportMock.mockReset();
-  mock.clearAllMocks();
 });

 test('returns 201 with the created sport', async () => {
--- a/apps/backend/test/sport/sport.service.test.ts
+++ b/apps/backend/test/sport/sport.service.test.ts
@@ -6,7 +6,6 @@ import type { PrismaClient } from '@/generated/prisma/client';
 import type { PrismaClientMock } from 'bun-mock-prisma';

 const prismaMock = createPrismaMock<PrismaClient>() as PrismaClientMock<PrismaClient>;
-const uuidV7Mock = mock(() => '00000000-0000-4000-8000-000000000001');

 mock.module('@/lib/prisma', () => ({
  __esModule: true,
@@ -15,10 +14,7 @@ mock.module('@/lib/prisma', () => ({
  },
 }));

-mock.module('uuid', () => ({
-  __esModule: true,
-  v7: uuidV7Mock,
-}));
+const { uuidV7Mock } = await import('../support/prisma.mock');

 const { createSport, getSportById, listSports, updateSport } = await import(
  '@/modules/sport/services/sport.service'
@@ -26,7 +22,7 @@ const { createSport, getSportById, listSports, updateSport } = await import(

 beforeEach(() => {
  prismaMock._reset();
-  mock.clearAllMocks();
+  uuidV7Mock.mockClear();
 });

 test('listSports returns sports ordered by name', async () => {
--- a/apps/backend/test/support/prisma.mock.ts
+++ b/apps/backend/test/support/prisma.mock.ts
@@ -33,3 +33,10 @@ mock.module('@/lib/mailer', () => ({
  __esModule: true,
  sendMail: sendMailMock,
 }));
+
+export const uuidV7Mock = mock(() => '00000000-0000-4000-8000-000000000001');
+
+mock.module('uuid', () => ({
+  __esModule: true,
+  v7: uuidV7Mock,
+}));
--- a/apps/frontend/public/playzer-favicon-512-transparent.png
+++ b/apps/frontend/public/playzer-favicon-512-transparent.png
--- a/apps/frontend/src/features/booking/booking-provider.tsx
+++ b/apps/frontend/src/features/booking/booking-provider.tsx
@@ -41,7 +41,7 @@ interface CreateManualBookingPayload {
  startTime: string;
  customerName: string;
  customerPhone: string;
-  customerEmail?: string;
+  customerEmail: string;
 }

 interface BookingContextValue {
@@ -316,7 +316,7 @@ export function BookingProvider({ children, complex }: BookingProviderProps) {
        startTime: payload.startTime,
        customerName: payload.customerName,
        customerPhone: payload.customerPhone,
-        customerEmail: payload.customerEmail || undefined,
+        customerEmail: payload.customerEmail,
      }),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ['admin-bookings', complex.id] });
--- a/apps/frontend/src/features/booking/components/booking-create-dialog.tsx
+++ b/apps/frontend/src/features/booking/components/booking-create-dialog.tsx
@@ -42,7 +42,7 @@ const bookingFormSchema = z.object({
    .trim()
    .min(6, 'Ingresa un telefono válido.')
    .max(30, 'El telefono no puede superar los 30 caracteres.'),
-  customerEmail: z.string().email('Ingresá un email válido.').optional().or(z.literal('')),
+  customerEmail: z.string().email('Ingresá un email válido.'),
 });

 type BookingForm = z.infer<typeof bookingFormSchema>;
@@ -156,7 +156,7 @@ export function BookingCreateDialog() {
      startTime,
      customerName: values.customerName,
      customerPhone: values.customerPhone,
-      customerEmail: values.customerEmail || undefined,
+      customerEmail: values.customerEmail,
    });
  };

--- a/apps/frontend/src/features/booking/components/booking-tools-dialog.tsx
+++ b/apps/frontend/src/features/booking/components/booking-tools-dialog.tsx
@@ -24,6 +24,7 @@ import {
  Wrench,
  XCircle,
 } from 'lucide-react';
+import { useState } from 'react';
 import { useBooking } from '../booking-provider';

 function formatDate(date: string | undefined) {
@@ -70,6 +71,7 @@ export function BookingToolsDialog() {
    useBooking();
  const isMobile = useIsMobile();
  const booking = selectedSegment?.booking;
+  const [confirmCancelOpen, setConfirmCancelOpen] = useState(false);

  const status = statusConfig[booking?.status ?? 'CONFIRMED'] ?? {
    label: booking?.status,
@@ -93,149 +95,211 @@ export function BookingToolsDialog() {
    closeBookingTools();
  };

+  const cancelConfirmDialog = (
+    <ResponsiveDialog
+      open={confirmCancelOpen}
+      onOpenChange={(open) => !open && setConfirmCancelOpen(false)}
+    >
+      <ResponsiveDialogContent>
+        <ResponsiveDialogHeader>
+          <ResponsiveDialogTitle>¿Cancelar reserva?</ResponsiveDialogTitle>
+          <ResponsiveDialogDescription>
+            Esta acción no se puede deshacer. Se eliminará la reserva y la cancha volverá a estar
+            disponible.
+          </ResponsiveDialogDescription>
+        </ResponsiveDialogHeader>
+
+        <div className="space-y-2 rounded-lg border bg-card p-4">
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-muted-foreground">Cliente</span>
+            <span className="text-sm font-medium">{booking?.customerName ?? '-'}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-muted-foreground">Cancha</span>
+            <span className="text-sm font-medium">{booking?.courtName ?? '-'}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-muted-foreground">Fecha</span>
+            <span className="text-sm font-medium">{formatDate(booking?.date) || '-'}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-muted-foreground">Horario</span>
+            <span className="text-sm font-medium">
+              {booking?.startTime ?? '--:--'} a {booking?.endTime ?? '--:--'}
+            </span>
+          </div>
+        </div>
+
+        <ResponsiveDialogFooter>
+          <ResponsiveDialogClose asChild>
+            <Button variant="outline">Volver</Button>
+          </ResponsiveDialogClose>
+          <Button
+            variant="destructive"
+            onClick={() => {
+              setConfirmCancelOpen(false);
+              updateStatus('CANCELLED');
+            }}
+          >
+            Sí, cancelar reserva
+          </Button>
+        </ResponsiveDialogFooter>
+      </ResponsiveDialogContent>
+    </ResponsiveDialog>
+  );
+
  if (isMobile) {
    return (
+      <>
+        <ResponsiveDialog
+          open={bookingToolsOpen}
+          onOpenChange={(open) => !open && closeBookingTools()}
+        >
+          <ResponsiveDialogContent
+            className="data-[variant=drawer]:!h-[92dvh] data-[variant=drawer]:!max-h-[92dvh] data-[variant=drawer]:overflow-hidden data-[variant=drawer]:px-0 data-[variant=drawer]:pb-0"
+            onOpenAutoFocus={(event) => event.preventDefault()}
+          >
+            <MobileBookingToolsSheet
+              status={status}
+              onComplete={() => updateStatus('COMPLETED')}
+              onCancel={() => setConfirmCancelOpen(true)}
+              onReminder={sendWhatsappReminder}
+              onNoShow={() => updateStatus('NOSHOW')}
+            />
+          </ResponsiveDialogContent>
+        </ResponsiveDialog>
+        {cancelConfirmDialog}
+      </>
+    );
+  }
+
+  return (
+    <>
      <ResponsiveDialog
        open={bookingToolsOpen}
        onOpenChange={(open) => !open && closeBookingTools()}
      >
        <ResponsiveDialogContent
-          className="data-[variant=drawer]:!h-[92dvh] data-[variant=drawer]:!max-h-[92dvh] data-[variant=drawer]:overflow-hidden data-[variant=drawer]:px-0 data-[variant=drawer]:pb-0"
+          className="data-[variant=dialog]:max-w-5xl data-[variant=drawer]:max-h-[92dvh] data-[variant=drawer]:overflow-y-auto data-[variant=drawer]:px-4 data-[variant=drawer]:pb-5"
          onOpenAutoFocus={(event) => event.preventDefault()}
        >
-          <MobileBookingToolsSheet
-            status={status}
-            onComplete={() => updateStatus('COMPLETED')}
-            onCancel={() => updateStatus('CANCELLED')}
-            onReminder={sendWhatsappReminder}
-            onNoShow={() => updateStatus('NOSHOW')}
-          />
+          <ResponsiveDialogHeader className="data-[variant=drawer]:px-0 data-[variant=drawer]:text-left">
+            <ResponsiveDialogTitle>Detalles de la reserva</ResponsiveDialogTitle>
+            <ResponsiveDialogDescription>
+              Administra la reserva y su estado.
+            </ResponsiveDialogDescription>
+          </ResponsiveDialogHeader>
+
+          <section className="mx-0 px-0 pt-3 pb-3 sm:-mx-6 sm:px-6 sm:pb-5">
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-3 sm:gap-0">
+              <DetailItem
+                icon={<MapPin className="h-5 w-5" />}
+                label="Cancha"
+                value={selectedSegment?.booking?.courtName ?? '-'}
+                helper={selectedSegment?.booking?.sport?.name}
+                withDivider
+              />
+
+              <DetailItem
+                icon={<BadgeCheck className="h-5 w-5" />}
+                label="Estado actual"
+                value={status.label}
+                valueClassName="text-emerald-400 uppercase dark:text-emerald-500"
+                withDivider
+              />
+
+              <DetailItem
+                icon={<User className="h-5 w-5" />}
+                label="Cliente"
+                value={selectedSegment?.booking?.customerName ?? '-'}
+              />
+
+              <DetailItem
+                icon={<Clock className="h-5 w-5" />}
+                label="Fecha"
+                value={`${formatDate(selectedSegment?.booking?.date)}`}
+                withDivider
+                className="sm:pt-10"
+              />
+
+              <DetailItem
+                icon={<Clock className="h-5 w-5" />}
+                label="Hora"
+                value={`${selectedSegment?.booking?.startTime} a ${selectedSegment?.booking?.endTime}`}
+                withDivider
+                className="sm:pt-10"
+              />
+
+              <DetailItem
+                icon={<Phone className="h-5 w-5" />}
+                label="Teléfono"
+                value={selectedSegment?.booking?.customerPhone ?? '-'}
+                className="sm:pt-10"
+              />
+            </div>
+          </section>
+
+          <Separator className="dark:bg-slate-800 bg-slate-300" />
+
+          {booking?.status !== 'COMPLETED' && (
+            <section className="space-y-3">
+              <div>
+                <h3 className="font-medium text-slate-100">Acciones disponibles</h3>
+                <p className="text-sm text-slate-400">
+                  Elegí qué hacer según lo que ocurrió con el cliente.
+                </p>
+              </div>
+              <div className="grid gap-3 sm:grid-cols-2">
+                <ActionButton
+                  icon={<CheckCircle2 className="h-5 w-5" />}
+                  title="Completar reserva"
+                  description="El cliente se presentó para usar la cancha."
+                  className="border-emerald-500/40 bg-emerald-500/10 text-lg text-emerald-600 hover:bg-emerald-500/15 hover:text-emerald-800"
+                  onClick={() => {
+                    updateStatus('COMPLETED');
+                  }}
+                />
+
+                <ActionButton
+                  icon={<XCircle className="h-5 w-5" />}
+                  title="Cancelar reserva"
+                  description="El cliente avisó que no va a venir. La cancha vuelve a estar disponible."
+                  className="border-red-500/40 bg-red-500/10 text-lg text-red-600 hover:bg-red-500/15 hover:text-red-800"
+                  onClick={() => setConfirmCancelOpen(true)}
+                />
+
+                <ActionButton
+                  icon={<MessageCircle className="h-5 w-5" />}
+                  title="Enviar recordatorio"
+                  description="Enviar un mensaje por WhatsApp al cliente."
+                  className="border-sky-500/40 bg-sky-500/10 text-lg text-sky-600 hover:bg-sky-500/15 hover:text-sky-800"
+                  onClick={sendWhatsappReminder}
+                />
+
+                <ActionButton
+                  icon={<AlertTriangle className="h-5 w-5" />}
+                  title="Marcar como No Show"
+                  description="El cliente no vino y no canceló."
+                  className="border-amber-500/40 bg-amber-500/10 text-lg text-amber-600 hover:bg-amber-500/15 hover:text-amber-800"
+                  onClick={() => {
+                    updateStatus('NOSHOW');
+                  }}
+                />
+              </div>
+            </section>
+          )}
+
+          <ResponsiveDialogFooter className="data-[variant=drawer]:px-0">
+            <ResponsiveDialogClose asChild>
+              <Button variant="outline" className="data-[variant=drawer]:h-11">
+                Cerrar
+              </Button>
+            </ResponsiveDialogClose>
+          </ResponsiveDialogFooter>
        </ResponsiveDialogContent>
      </ResponsiveDialog>
-    );
-  }
-
-  return (
-    <ResponsiveDialog open={bookingToolsOpen} onOpenChange={(open) => !open && closeBookingTools()}>
-      <ResponsiveDialogContent
-        className="data-[variant=dialog]:max-w-5xl data-[variant=drawer]:max-h-[92dvh] data-[variant=drawer]:overflow-y-auto data-[variant=drawer]:px-4 data-[variant=drawer]:pb-5"
-        onOpenAutoFocus={(event) => event.preventDefault()}
-      >
-        <ResponsiveDialogHeader className="data-[variant=drawer]:px-0 data-[variant=drawer]:text-left">
-          <ResponsiveDialogTitle>Detalles de la reserva</ResponsiveDialogTitle>
-          <ResponsiveDialogDescription>
-            Administra la reserva y su estado.
-          </ResponsiveDialogDescription>
-        </ResponsiveDialogHeader>
-
-        <section className="mx-0 px-0 pt-3 pb-3 sm:-mx-6 sm:px-6 sm:pb-5">
-          <div className="grid grid-cols-1 gap-3 sm:grid-cols-3 sm:gap-0">
-            <DetailItem
-              icon={<MapPin className="h-5 w-5" />}
-              label="Cancha"
-              value={selectedSegment?.booking?.courtName ?? '-'}
-              helper={selectedSegment?.booking?.sport?.name}
-              withDivider
-            />
-
-            <DetailItem
-              icon={<BadgeCheck className="h-5 w-5" />}
-              label="Estado actual"
-              value={status.label}
-              valueClassName="text-emerald-400 uppercase dark:text-emerald-500"
-              withDivider
-            />
-
-            <DetailItem
-              icon={<User className="h-5 w-5" />}
-              label="Cliente"
-              value={selectedSegment?.booking?.customerName ?? '-'}
-            />
-
-            <DetailItem
-              icon={<Clock className="h-5 w-5" />}
-              label="Fecha"
-              value={`${formatDate(selectedSegment?.booking?.date)}`}
-              withDivider
-              className="sm:pt-10"
-            />
-
-            <DetailItem
-              icon={<Clock className="h-5 w-5" />}
-              label="Hora"
-              value={`${selectedSegment?.booking?.startTime} a ${selectedSegment?.booking?.endTime}`}
-              withDivider
-              className="sm:pt-10"
-            />
-
-            <DetailItem
-              icon={<Phone className="h-5 w-5" />}
-              label="Teléfono"
-              value={selectedSegment?.booking?.customerPhone ?? '-'}
-              className="sm:pt-10"
-            />
-          </div>
-        </section>
-
-        <Separator className="dark:bg-slate-800 bg-slate-300" />
-
-        <section className="space-y-3">
-          <div>
-            <h3 className="font-medium text-slate-100">Acciones disponibles</h3>
-            <p className="text-sm text-slate-400">
-              Elegí qué hacer según lo que ocurrió con el cliente.
-            </p>
-          </div>
-          <div className="grid gap-3 sm:grid-cols-2">
-            <ActionButton
-              icon={<CheckCircle2 className="h-5 w-5" />}
-              title="Completar reserva"
-              description="El cliente se presentó para usar la cancha."
-              className="border-emerald-500/40 bg-emerald-500/10 text-lg text-emerald-600 hover:bg-emerald-500/15 hover:text-emerald-800"
-              onClick={() => {
-                updateStatus('COMPLETED');
-              }}
-            />
-
-            <ActionButton
-              icon={<XCircle className="h-5 w-5" />}
-              title="Cancelar reserva"
-              description="El cliente avisó que no va a venir. La cancha vuelve a estar disponible."
-              className="border-red-500/40 bg-red-500/10 text-lg text-red-600 hover:bg-red-500/15 hover:text-red-800"
-              onClick={() => {
-                updateStatus('CANCELLED');
-              }}
-            />
-
-            <ActionButton
-              icon={<MessageCircle className="h-5 w-5" />}
-              title="Enviar recordatorio"
-              description="Enviar un mensaje por WhatsApp al cliente."
-              className="border-sky-500/40 bg-sky-500/10 text-lg text-sky-600 hover:bg-sky-500/15 hover:text-sky-800"
-              onClick={sendWhatsappReminder}
-            />
-
-            <ActionButton
-              icon={<AlertTriangle className="h-5 w-5" />}
-              title="Marcar como No Show"
-              description="El cliente no vino y no canceló."
-              className="border-amber-500/40 bg-amber-500/10 text-lg text-amber-600 hover:bg-amber-500/15 hover:text-amber-800"
-              onClick={() => {
-                updateStatus('NOSHOW');
-              }}
-            />
-          </div>
-        </section>
-
-        <ResponsiveDialogFooter className="data-[variant=drawer]:px-0">
-          <ResponsiveDialogClose asChild>
-            <Button variant="outline" className="data-[variant=drawer]:h-11">
-              Cerrar
-            </Button>
-          </ResponsiveDialogClose>
-        </ResponsiveDialogFooter>
-      </ResponsiveDialogContent>
-    </ResponsiveDialog>
+      {cancelConfirmDialog}
+    </>
  );
 }

@@ -321,42 +385,44 @@ function MobileBookingToolsSheet({
        </section>
      </div>

-      <section className="shrink-0 border-t border-border/70 bg-popover/95 px-4 py-3">
-        <h3 className="text-sm font-medium">Acciones</h3>
-        <div className="mt-3 grid grid-cols-2 gap-2">
-          <MobileActionButton
-            icon={<CheckCircle2 className="size-5" />}
-            label="Completar"
-            className="border-primary/45 bg-primary/12 text-primary"
-            onClick={onComplete}
-          />
-          <MobileActionButton
-            icon={<MessageCircle className="size-5" />}
-            label="Recordar"
-            className="border-reserved/45 bg-reserved/12 text-reserved"
-            onClick={onReminder}
-          />
-          <MobileActionButton
-            icon={<XCircle className="size-5" />}
-            label="Cancelar"
-            className="border-destructive/45 bg-destructive/12 text-destructive"
-            onClick={onCancel}
-          />
-          <MobileActionButton
-            icon={<AlertTriangle className="size-5" />}
-            label="No show"
-            className="border-warning/50 bg-warning/12 text-warning"
-            onClick={onNoShow}
-          />
-        </div>
-        <ResponsiveDialogFooter className="px-0 pb-0 pt-3">
-          <ResponsiveDialogClose asChild>
-            <Button variant="outline" className="h-11 w-full rounded-lg">
-              Cerrar
-            </Button>
-          </ResponsiveDialogClose>
-        </ResponsiveDialogFooter>
-      </section>
+      {booking?.status !== 'COMPLETED' && (
+        <section className="shrink-0 border-t border-border/70 bg-popover/95 px-4 py-3">
+          <h3 className="text-sm font-medium">Acciones</h3>
+          <div className="mt-3 grid grid-cols-2 gap-2">
+            <MobileActionButton
+              icon={<CheckCircle2 className="size-5" />}
+              label="Completar"
+              className="border-primary/45 bg-primary/12 text-primary"
+              onClick={onComplete}
+            />
+            <MobileActionButton
+              icon={<MessageCircle className="size-5" />}
+              label="Recordar"
+              className="border-reserved/45 bg-reserved/12 text-reserved"
+              onClick={onReminder}
+            />
+            <MobileActionButton
+              icon={<XCircle className="size-5" />}
+              label="Cancelar"
+              className="border-destructive/45 bg-destructive/12 text-destructive"
+              onClick={onCancel}
+            />
+            <MobileActionButton
+              icon={<AlertTriangle className="size-5" />}
+              label="No show"
+              className="border-warning/50 bg-warning/12 text-warning"
+              onClick={onNoShow}
+            />
+          </div>
+          <ResponsiveDialogFooter className="px-0 pb-0 pt-3">
+            <ResponsiveDialogClose asChild>
+              <Button variant="outline" className="h-11 w-full rounded-lg">
+                Cerrar
+              </Button>
+            </ResponsiveDialogClose>
+          </ResponsiveDialogFooter>
+        </section>
+      )}
    </div>
  );
 }
--- a/apps/frontend/src/features/home/home-page.tsx
+++ b/apps/frontend/src/features/home/home-page.tsx
@@ -49,8 +49,14 @@ export function HomePage() {
  useEffect(() => {
    async function autoSelect() {
      if (myComplexesQuery.data && myComplexesQuery.data.length === 1) {
-        await apiClient.complexes.select({ complexId: myComplexesQuery.data[0].id });
-        queryClient.invalidateQueries({ queryKey: ['current-complex'] });
+        try {
+          const result = await apiClient.complexes.select({
+            complexId: myComplexesQuery.data[0].id,
+          });
+          queryClient.setQueryData(['current-complex'], result);
+        } catch (error) {
+          console.error('Error al auto-seleccionar complejo:', error);
+        }
      } else if (
        myComplexesQuery.data &&
        myComplexesQuery.data.length > 1 &&
--- a/apps/frontend/src/features/public-booking/components/share-whatsapp-button.tsx
+++ b/apps/frontend/src/features/public-booking/components/share-whatsapp-button.tsx
@@ -6,7 +6,8 @@ type ShareWhatsappButtonProps = {
  confirmation: PublicBookingConfirmation;
 };

-function formatDateLabel(isoDate: string) {
+function formatDateLabel(isoDate: string | null | undefined) {
+  if (!isoDate) return '';
  const [year, month, day] = isoDate.split('-').map(Number);
  const date = new Date(year, (month ?? 1) - 1, day ?? 1);

@@ -61,16 +62,21 @@ export function ShareWhatsappButton({ confirmation }: ShareWhatsappButtonProps)
      className="h-12 w-full rounded-xl border-slate-200 bg-white text-sm font-semibold text-slate-900 hover:bg-slate-50 sm:text-base"
      asChild
    >
-      <a href={whatsappUrl} target="_blank" rel="noopener noreferrer">
+      <a
+        href={whatsappUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        title="Compartir por WhatsApp"
+      >
        <svg
          viewBox="0 0 24 24"
          aria-hidden="true"
-          className="size-4"
+          className="size-5"
          style={{ color: `#${siWhatsapp.hex}` }}
        >
          <path d={siWhatsapp.path} fill="currentColor" />
        </svg>
-        Compartir por WhatsApp
+        <span className="sm:hidden">Compartir por WhatsApp</span>
      </a>
    </Button>
  );
--- a/apps/frontend/src/features/public-booking/public-booking-confirmation-page.tsx
+++ b/apps/frontend/src/features/public-booking/public-booking-confirmation-page.tsx
@@ -1,7 +1,17 @@
 import PlayzerIcon from '@/assets/playzer-favicon-512-transparent.png';
 import { Button } from '@/components/ui/button';
-import { ApiClientError, apiClient } from '@/lib/api-client';
-import { useQuery } from '@tanstack/react-query';
+import { Input } from '@/components/ui/input';
+import {
+  ResponsiveDialog,
+  ResponsiveDialogClose,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+} from '@/components/ui/responsive-dialog';
+import { apiClient } from '@/lib/api-client';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 import {
  AlertCircle,
@@ -12,7 +22,9 @@ import {
  LoaderCircle,
  Receipt,
  Trophy,
+  XCircle,
 } from 'lucide-react';
+import { useState } from 'react';
 import { ShareWhatsappButton } from './components/share-whatsapp-button';

 type PublicBookingConfirmationPageProps = {
@@ -21,14 +33,12 @@ type PublicBookingConfirmationPageProps = {
 };

 function extractMessage(error: unknown, fallback: string) {
-  if (error instanceof ApiClientError) {
-    return error.message || fallback;
-  }
-
-  return fallback;
+  const msg = (error as { message?: string } | undefined)?.message;
+  return msg || fallback;
 }

-function formatDateLabel(isoDate: string) {
+function formatDateLabel(isoDate: string | undefined | null) {
+  if (!isoDate) return '';
  const [year, month, day] = isoDate.split('-').map(Number);
  const date = new Date(year, (month ?? 1) - 1, day ?? 1);

@@ -58,23 +68,70 @@ export function PublicBookingConfirmationPage({
  bookingCode,
 }: PublicBookingConfirmationPageProps) {
  const navigate = useNavigate();
+  const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
+  const [customerPhone, setCustomerPhone] = useState('');
+  const [cancelError, setCancelError] = useState<string | null>(null);
+  const [cancelledBooking, setCancelledBooking] = useState<{
+    date: string;
+    startTime: string;
+    endTime: string;
+    courtName: string;
+    sport: { name: string };
+    bookingCode: string;
+    price: number;
+    complexName: string;
+  } | null>(null);
+
  const confirmationQuery = useQuery({
    queryKey: ['public-booking-confirmation', complexSlug, bookingCode],
    queryFn: () => apiClient.publicBookings.getConfirmation(complexSlug, bookingCode),
  });

+  const cancelMutation = useMutation({
+    mutationFn: (phone: string) =>
+      apiClient.publicBookings.cancelPublic(complexSlug, {
+        bookingCode,
+        customerPhone: phone,
+      }),
+  });
+
+  const handleCancelClick = () => {
+    cancelMutation.reset();
+    setCustomerPhone('');
+    setCancelError(null);
+    setCancelDialogOpen(true);
+  };
+
+  const handleConfirmCancel = async () => {
+    setCancelError(null);
+    try {
+      const data = await cancelMutation.mutateAsync(customerPhone);
+      setCancelledBooking(data);
+      setCancelDialogOpen(false);
+      setCustomerPhone('');
+    } catch (error: unknown) {
+      console.error('[Cancel]', error);
+      setCancelError(
+        (error as { message?: string } | undefined)?.message ?? 'No pudimos cancelar la reserva.'
+      );
+    }
+  };
+
+  const isCancelled = cancelledBooking !== null;
+  const displayData = cancelledBooking ?? confirmationQuery.data;
+
  return (
    <main className="min-h-screen bg-[#edf7f4] text-[#111827]">
      <div className="mx-auto flex min-h-screen w-full max-w-3xl items-center px-4 py-8 sm:px-6">
        <section className="w-full rounded-[28px] border border-emerald-950/10 bg-white p-5 shadow-[0_24px_70px_rgba(15,23,42,0.12)] sm:p-8">
-          {confirmationQuery.isLoading && (
+          {confirmationQuery.isLoading && !cancelledBooking && (
            <div className="flex items-center gap-3 text-sm text-slate-500">
              <LoaderCircle className="size-5 animate-spin text-emerald-600" />
              Cargando confirmación...
            </div>
          )}

-          {confirmationQuery.isError && (
+          {confirmationQuery.isError && !cancelledBooking && (
            <div className="flex gap-3 rounded-2xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">
              <AlertCircle className="mt-0.5 size-5 shrink-0" />
              <p>
@@ -86,16 +143,23 @@ export function PublicBookingConfirmationPage({
            </div>
          )}

-          {confirmationQuery.data && (
+          {displayData && (
            <div className="space-y-6">
              <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                <div>
-                  <div className="inline-flex items-center gap-2 rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold tracking-[0.14em] text-emerald-700 uppercase">
-                    <CheckCircle2 className="size-4" />
-                    Reserva confirmada
-                  </div>
+                  {isCancelled ? (
+                    <div className="inline-flex items-center gap-2 rounded-full bg-red-50 px-3 py-1 text-xs font-semibold tracking-[0.14em] text-red-600 uppercase">
+                      <XCircle className="size-4" />
+                      Reserva cancelada
+                    </div>
+                  ) : (
+                    <div className="inline-flex items-center gap-2 rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold tracking-[0.14em] text-emerald-700 uppercase">
+                      <CheckCircle2 className="size-4" />
+                      Reserva confirmada
+                    </div>
+                  )}
                  <h1 className="mt-3 text-2xl font-bold tracking-tight sm:text-3xl">
-                    {confirmationQuery.data.complexName}
+                    {displayData.complexName}
                  </h1>
                </div>
                <div className="flex items-center gap-2 text-slate-600">
@@ -112,17 +176,17 @@ export function PublicBookingConfirmationPage({
                      Tu turno
                    </p>
                    <p className="mt-3 text-2xl font-black leading-tight tracking-tight text-slate-950 sm:text-4xl">
-                      {formatDateLabel(confirmationQuery.data.date)}
+                      {formatDateLabel(displayData.date)}
                    </p>
                    <p className="mt-2 flex items-center gap-2 text-3xl font-black leading-none text-emerald-700 sm:text-5xl">
                      <Clock3 className="size-7 sm:size-9" />
-                      {confirmationQuery.data.startTime} - {confirmationQuery.data.endTime}
+                      {displayData.startTime} - {displayData.endTime}
                    </p>
                  </div>
                  <div className="rounded-2xl border border-emerald-600/20 bg-white/80 px-4 py-3 sm:min-w-40 sm:text-right">
                    <p className="text-xs font-medium text-slate-500">Precio del turno</p>
                    <p className="mt-1 text-2xl font-bold text-slate-950">
-                      {formatBookingPrice(confirmationQuery.data.price)}
+                      {formatBookingPrice(displayData.price)}
                    </p>
                  </div>
                </div>
@@ -136,7 +200,7 @@ export function PublicBookingConfirmationPage({
                      Cancha
                    </p>
                    <p className="mt-2 text-base font-semibold text-slate-950">
-                      {confirmationQuery.data.courtName} · {confirmationQuery.data.sport.name}
+                      {displayData.courtName} · {displayData.sport.name}
                    </p>
                  </div>
                  <div className="bg-white p-4">
@@ -145,32 +209,90 @@ export function PublicBookingConfirmationPage({
                      Código de reserva
                    </p>
                    <p className="mt-2 font-mono text-lg font-bold tracking-[0.18em] text-slate-950">
-                      {confirmationQuery.data.bookingCode}
+                      {displayData.bookingCode}
                    </p>
                  </div>
                </div>
              </div>

-              <div className="grid gap-3 sm:grid-cols-2">
-                <ShareWhatsappButton confirmation={confirmationQuery.data} />
-                <Button
-                  type="button"
-                  className="h-12 w-full rounded-xl bg-emerald-600 text-sm font-semibold text-white hover:bg-emerald-500 sm:text-base"
-                  onClick={() => {
-                    void navigate({
-                      to: '/$complexSlug/booking',
-                      params: { complexSlug },
-                    });
-                  }}
-                >
-                  Hacer otra reserva
-                  <ArrowRight className="size-4" />
-                </Button>
-              </div>
+              {isCancelled ? (
+                <div className="rounded-2xl bg-red-50 p-4 text-center text-sm text-red-700">
+                  Esta reserva fue cancelada. Te enviamos un email con los detalles de la
+                  cancelación.
+                </div>
+              ) : (
+                <div className="grid grid-cols-3 gap-2 sm:gap-3">
+                  <ShareWhatsappButton confirmation={confirmationQuery.data!} />
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="h-12 w-full rounded-xl border-red-200 text-sm font-semibold text-red-600 hover:bg-red-50 hover:text-red-700 sm:text-base"
+                    onClick={handleCancelClick}
+                  >
+                    Cancelar
+                  </Button>
+                  <Button
+                    type="button"
+                    className="h-12 w-full rounded-xl bg-emerald-600 text-sm font-semibold text-white hover:bg-emerald-500 sm:text-base"
+                    onClick={() => {
+                      void navigate({
+                        to: '/$complexSlug/booking',
+                        params: { complexSlug },
+                      });
+                    }}
+                  >
+                    <span className="hidden sm:inline">Hacer otra reserva</span>
+                    <span className="sm:hidden">Otra</span>
+                    <ArrowRight className="size-4" />
+                  </Button>
+                </div>
+              )}
            </div>
          )}
        </section>
      </div>
+
+      <ResponsiveDialog open={cancelDialogOpen} onOpenChange={setCancelDialogOpen}>
+        <ResponsiveDialogContent>
+          <ResponsiveDialogHeader>
+            <ResponsiveDialogTitle>Cancelar reserva</ResponsiveDialogTitle>
+            <ResponsiveDialogDescription>
+              Ingresá el número de teléfono que usaste al hacer la reserva para confirmar la
+              cancelación.
+            </ResponsiveDialogDescription>
+          </ResponsiveDialogHeader>
+
+          <div className="px-6 pb-2">
+            <Input
+              type="tel"
+              placeholder="Ej: 1134567890"
+              value={customerPhone}
+              onChange={(e) => {
+                setCustomerPhone(e.target.value);
+                setCancelError(null);
+              }}
+            />
+            {cancelError && <p className="mt-2 text-sm text-red-600">{cancelError}</p>}
+          </div>
+
+          <ResponsiveDialogFooter>
+            <ResponsiveDialogClose asChild>
+              <Button variant="outline">Volver</Button>
+            </ResponsiveDialogClose>
+            <Button
+              variant="destructive"
+              disabled={!customerPhone.trim() || cancelMutation.isPending}
+              onClick={handleConfirmCancel}
+            >
+              {cancelMutation.isPending ? (
+                <LoaderCircle className="size-4 animate-spin" />
+              ) : (
+                'Sí, cancelar reserva'
+              )}
+            </Button>
+          </ResponsiveDialogFooter>
+        </ResponsiveDialogContent>
+      </ResponsiveDialog>
    </main>
  );
 }
--- a/apps/frontend/src/features/public-booking/public-booking-page.tsx
+++ b/apps/frontend/src/features/public-booking/public-booking-page.tsx
@@ -62,7 +62,7 @@ const bookingFormSchema = z.object({
    .trim()
    .min(6, 'Ingresá un teléfono válido.')
    .max(30, 'El teléfono no puede superar los 30 caracteres.'),
-  customerEmail: z.string().email('Ingresá un email válido.').optional().or(z.literal('')),
+  customerEmail: z.string().email('Ingresá un email válido.'),
 });

 type BookingFormValues = z.infer<typeof bookingFormSchema>;
@@ -1297,7 +1297,7 @@ function SelectedSlotCard(props: BookingShellProps & { compact?: boolean }) {

          <Field data-invalid={Boolean(errors.customerEmail)}>
            <FieldLabel htmlFor="customerEmail" className="text-white/76">
-              Email <span className="text-white/40 font-normal">(opcional)</span>
+              Email
            </FieldLabel>
            <Input
              id="customerEmail"
@@ -1445,7 +1445,7 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
        startTime: selectedSlot.startTime,
        customerName: payload.customerName,
        customerPhone: payload.customerPhone,
-        customerEmail: payload.customerEmail || undefined,
+        customerEmail: payload.customerEmail,
      });
    },
  });
--- a/apps/frontend/src/features/select-complex/select-complex-page.tsx
+++ b/apps/frontend/src/features/select-complex/select-complex-page.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@/components/ui/button';
 import { apiClient } from '@/lib/api-client';
 import type { ComplexWithRole } from '@repo/api-contract';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 import { Building2, Loader2 } from 'lucide-react';

@@ -13,12 +13,15 @@ export function SelectComplexPage() {
    queryFn: () => apiClient.complexes.listMine(),
  });

+  const queryClient = useQueryClient();
+
  const selectMutation = useMutation({
    mutationFn: async (complexId: string) => {
      const response = await apiClient.complexes.select({ complexId });
      return response;
    },
-    onSuccess: () => {
+    onSuccess: (data) => {
+      queryClient.setQueryData(['current-complex'], data);
      navigate({ to: '/' });
    },
  });
--- a/apps/frontend/src/lib/api-client.ts
+++ b/apps/frontend/src/lib/api-client.ts
@@ -52,6 +52,7 @@ export const apiClient = {
    getAvailability: api.getAvailability,
    create: api.createPublic,
    getConfirmation: api.getConfirmation,
+    cancelPublic: api.cancelPublic,
  },
  adminBookings: {
    listByComplex: api.listByComplex,
--- a/apps/frontend/src/lib/api/http.ts
+++ b/apps/frontend/src/lib/api/http.ts
@@ -10,13 +10,35 @@ export const http: AxiosInstance = axios.create({
 });

 function extractMessage(details: unknown, fallback: string): string {
-  if (
-    typeof details === 'object' &&
-    details &&
-    'message' in details &&
-    typeof details.message === 'string'
-  ) {
-    return details.message;
+  if (typeof details === 'object' && details) {
+    if ('message' in details && typeof details.message === 'string') {
+      return details.message;
+    }
+    if ('detail' in details && typeof details.detail === 'string') {
+      return details.detail;
+    }
+    if ('error' in details && typeof details.error === 'object' && details.error) {
+      const zodError = details.error as Record<string, unknown>;
+      if (Array.isArray(zodError.issues) && zodError.issues.length > 0) {
+        const firstIssue = zodError.issues[0] as { message?: string };
+        if (typeof firstIssue.message === 'string') return firstIssue.message;
+      }
+      if (typeof zodError.message === 'string') {
+        try {
+          const parsed = JSON.parse(zodError.message);
+          if (
+            Array.isArray(parsed) &&
+            parsed.length > 0 &&
+            typeof parsed[0]?.message === 'string'
+          ) {
+            return parsed[0].message;
+          }
+        } catch {
+          /* not JSON, use raw string */
+        }
+        return zodError.message;
+      }
+    }
  }
  return fallback;
 }
--- a/apps/frontend/src/lib/api/index.ts
+++ b/apps/frontend/src/lib/api/index.ts
@@ -8,6 +8,7 @@ export * as sports from './resources/sports';
 export * as plans from './resources/plans';

 export {
+  cancelPublic,
  getAvailability,
  createPublic,
  getConfirmation,
--- a/apps/frontend/src/lib/api/resources/bookings.ts
+++ b/apps/frontend/src/lib/api/resources/bookings.ts
@@ -1,5 +1,6 @@
 import type {
  AdminBooking,
+  CancelPublicBookingInput,
  CreateAdminBookingInput,
  CreatePublicBookingInput,
  PublicAvailabilityResponse,
@@ -51,6 +52,14 @@ export async function createAdmin(complexId: string, payload: CreateAdminBooking
  return response.data;
 }

+export async function cancelPublic(complexSlug: string, payload: CancelPublicBookingInput) {
+  const response = await http.post<PublicBooking>(
+    `/api/public-bookings/complex/${complexSlug}/cancel`,
+    payload
+  );
+  return response.data;
+}
+
 export async function updateStatus(bookingId: string, payload: UpdateAdminBookingStatusInput) {
  const response = await http.patch<AdminBooking>(
    `/api/admin-bookings/${bookingId}/status`,
--- a/bunfig.toml
+++ b/bunfig.toml
@@ -0,0 +1,2 @@
+[test]
+preload = ["./apps/backend/test/support/prisma.mock.ts"]
--- a/package.json
+++ b/package.json
@@ -19,7 +19,8 @@
    "lint:frontend": "bun --filter frontend lint",
    "lint:frontend:fix": "bun --filter frontend lint:fix",
    "lint:backend": "bun --filter backend lint",
-    "lint:backend:fix": "bun --filter backend lint:fix"
+    "lint:backend:fix": "bun --filter backend lint:fix",
+    "test": "bun --filter backend test"
  },
  "devDependencies": {
    "@biomejs/biome": "^1.9.4",
--- a/packages/api-contract/src/admin-booking.ts
+++ b/packages/api-contract/src/admin-booking.ts
@@ -25,7 +25,7 @@ export const adminBookingSchema = z.object({
  endTime: z.string().regex(TIME_REGEX),
  customerName: z.string(),
  customerPhone: z.string(),
-  customerEmail: z.string().optional(),
+  customerEmail: z.string(),
  price: z.number().nonnegative(),
  status: bookingStatusSchema,
  createdAt: z.string().datetime(),
@@ -56,9 +56,7 @@ export const createAdminBookingSchema = z.object({
    .max(30, 'El telefono no puede superar los 30 caracteres.'),
  customerEmail: z
    .string()
-    .email('El email ingresado no es valido.')
-    .optional()
-    .or(z.literal('')),
+    .email('El email ingresado no es valido.'),
 })

 export const updateAdminBookingStatusSchema = z.object({
--- a/packages/api-contract/src/index.ts
+++ b/packages/api-contract/src/index.ts
@@ -98,9 +98,11 @@ export {
  publicBookingSchema,
  publicBookingSlotSchema,
  publicBookingSportSchema,
+  cancelPublicBookingSchema,
 } from './public-booking'
 export type {
  CreatePublicBookingInput,
+  CancelPublicBookingInput,
  PublicAvailabilityCourt,
  PublicAvailabilityQuery,
  PublicAvailabilityResponse,
--- a/packages/api-contract/src/public-booking.ts
+++ b/packages/api-contract/src/public-booking.ts
@@ -59,9 +59,16 @@ export const createPublicBookingSchema = z.object({
    .max(30, 'El telefono no puede superar los 30 caracteres.'),
  customerEmail: z
    .string()
-    .email('El email ingresado no es valido.')
-    .optional()
-    .or(z.literal('')),
+    .email('El email ingresado no es valido.'),
+})
+
+export const cancelPublicBookingSchema = z.object({
+  bookingCode: z.string().regex(BOOKING_CODE_REGEX, 'El codigo de reserva no es valido.'),
+  customerPhone: z
+    .string()
+    .trim()
+    .min(6, 'El telefono debe tener al menos 6 caracteres.')
+    .max(30, 'El telefono no puede superar los 30 caracteres.'),
 })

 export const publicBookingSchema = z.object({
@@ -78,7 +85,7 @@ export const publicBookingSchema = z.object({
  endTime: z.string().regex(TIME_REGEX),
  customerName: z.string(),
  customerPhone: z.string(),
-  customerEmail: z.string().optional(),
+  customerEmail: z.string(),
  status: z.enum(['CONFIRMED', 'CANCELLED', 'COMPLETED']),
  price: z.number().nonnegative(),
  createdAt: z.string().datetime(),
@@ -96,7 +103,7 @@ export const publicBookingConfirmationSchema = z.object({
  courtName: z.string(),
  sport: publicBookingSportSchema,
  status: z.enum(['CONFIRMED', 'CANCELLED', 'COMPLETED']),
-  customerEmail: z.string().optional(),
+  customerEmail: z.string(),
  createdAt: z.string().datetime(),
 })

@@ -106,5 +113,6 @@ export type PublicBookingSlot = z.infer<typeof publicBookingSlotSchema>
 export type PublicAvailabilityCourt = z.infer<typeof publicAvailabilityCourtSchema>
 export type PublicAvailabilityResponse = z.infer<typeof publicAvailabilityResponseSchema>
 export type CreatePublicBookingInput = z.infer<typeof createPublicBookingSchema>
+export type CancelPublicBookingInput = z.infer<typeof cancelPublicBookingSchema>
 export type PublicBooking = z.infer<typeof publicBookingSchema>
 export type PublicBookingConfirmation = z.infer<typeof publicBookingConfirmationSchema>
Author	SHA1	Message	Date
Jose Selesan	260d79fc99	feat: implement public booking cancellation feature - Added cancelPublicBooking handler to manage booking cancellations. - Updated public booking service to include cancellation logic. - Created cancelPublicBooking schema for input validation. - Modified public booking confirmation page to allow users to cancel their bookings. - Enhanced email service to send cancellation confirmation emails. - Made customerEmail field required in booking schemas and updated related components. - Updated API client to support cancellation requests. - Added migration to enforce non-nullable customer_email fields in the database.	2026-06-05 11:24:02 -03:00
Jose Selesan	1210854c22	feat(booking-ui): add confirmation dialog for cancelling bookings and improve mobile UI	2026-06-04 16:39:45 -03:00
Jose Selesan	7ca784d5f5	feat(booking-ui): conditionally render action buttons based on booking status	2026-06-04 16:33:51 -03:00
Jose Selesan	e441f15ee4	feat(complex-selection): enhance auto-selection logic and error handling for complex selection	2026-06-04 14:06:23 -03:00
Jose Selesan	228004a7e0	feat(emails): update email layout padding and remove min-height for improved design consistency	2026-06-03 10:57:23 -03:00
jselesan	b20b5c2b8b	Merge pull request 'feat/improve-emails' (#8 ) from feat/improve-emails into development Reviewed-on: #8	2026-06-03 13:44:12 +00:00
Jose Selesan	457accfbfa	feat(emails): add standardized email templates and layout guidelines	2026-06-03 10:43:17 -03:00
Jose Selesan	43287a4baa	feat(emails): integrate email verification layout into auth email sending process	2026-06-03 10:41:56 -03:00
Jose Selesan	93fea8ecad	feat(emails): enhance booking cancellation and no-show email templates with improved layout and styling	2026-06-03 10:37:07 -03:00
Jose Selesan	ba7b0322ff	Refactor code structure for improved readability and maintainability	2026-06-03 10:31:01 -03:00
Jose Selesan	473686528e	feat(tests): update test configurations and improve mocking setup	2026-06-03 09:35:04 -03:00