@fayz-ai/plugin-agenda 0.10.2 → 0.12.0

package/dist/index.js

@@ -2,7 +2,7 @@ import { createMockAgendaProvider, createSupabasePublicBookingProvider } from '.
 export { createMockAgendaProvider } from './chunk-ISLJXP7O.js';
 import React13, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { connectionStatus, createConnectionStore, getSupabaseClientOptional, getActiveTenantId, registerTranslations, registerMessageDefaults, createSafeDataProvider, connectorRuntimeToken, CONNECTOR_RUNTIME_TOKEN_HEADER, emitDataChanged, usePluginRuntimeOptional, useTranslation, emitDomainEvent, getCurrentLocale, useDataChanged, formatCurrency } from '@fayz-ai/core';
-import { createPluginContext, fayzConnectorOAuth, setScheduleBlockConfig, getScheduleBlockConfig, PluginSettingsPanel, dedup, useTenantPluginSettings, SettingsGroup, ToggleRow, SelectRow, usePluginPrefs, PersonLink, useLimitGuard, CrudFormPage, CrudDetailPage, ContactPicker, invalidateLimit } from '@fayz-ai/admin';
+import { createPluginContext, fayzConnectorOAuth, setScheduleBlockConfig, getScheduleBlockConfig, PluginSettingsPanel, dedup, useTenantPluginSettings, SettingsGroup, ToggleRow, SelectRow, usePluginPrefs, PersonLink, PageActions, useLimitGuard, useLookupCreate, RightRailPage, CrudFormPage, CrudDetailPage, ContactPicker, invalidateLimit } from '@fayz-ai/admin';
 import FullCalendar from '@fullcalendar/react';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import timeGridPlugin from '@fullcalendar/timegrid';
@@ -10,20 +10,29 @@ import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import listPlugin from '@fullcalendar/list';
 import ptBrLocale from '@fullcalendar/core/locales/pt-br';
-import { Loader2, AlertCircle, RefreshCw, CalendarPlus, X, CheckCircle2, Plus, ChevronDown, ChevronLeft, ChevronRight, Settings, Pencil, Trash2, Clock, User, MapPin, FileText, AlertTriangle, Check, DollarSign, HandCoins, Ban, CheckSquare, Calendar, Briefcase, CircleDot, FileCheck, ArrowRightLeft, CreditCard, QrCode, Banknote, ExternalLink } from 'lucide-react';
+import { Loader2, AlertCircle, RefreshCw, CalendarPlus, X, CheckCircle2, Plus, ChevronDown, Settings, ChevronLeft, ChevronRight, Pencil, Trash2, Clock, User, MapPin, FileText, AlertTriangle, Check, DollarSign, HandCoins, Ban, CheckSquare, Calendar, Briefcase, CircleDot, FileCheck, ArrowRightLeft, CreditCard, QrCode, Banknote, ExternalLink } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
-import { toast, Button, Checkbox, Badge, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, ConfirmDialog, Modal, ModalContent, ModalTitle, SearchCombobox, cn, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@fayz-ai/ui';
+import { toast, Button, Checkbox, Badge, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, PageHeaderActions, ConfirmDialog, SearchCombobox, cn, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@fayz-ai/ui';
 import { createStore } from 'zustand/vanilla';
 
 // src/lib/message-events.ts
 var BOOKING_FIELDS = [
   { name: "customer_name", label: "Cliente", type: "string", example: "Maria Silva" },
+  // Para ONDE a mensagem vai — não é texto de mensagem nenhuma, é o endereço.
+  // A automação de WhatsApp lê este campo (`recipientField`, padrão
+  // 'customer_phone') e pula o disparo quando ele vem vazio: sem número não há
+  // envio, e um evento sem ele é um lembrete que nunca sai.
+  { name: "customer_phone", label: "Telefone do cliente", type: "string", example: "(21) 99889-9889" },
   { name: "service_name", label: "Servi\xE7o", type: "string", example: "Corte + Escova" },
   { name: "professional_name", label: "Profissional", type: "string", example: "Camila Duarte" },
   { name: "booking_date", label: "Data", type: "date", example: "12/08/2026" },
   { name: "booking_time", label: "Hor\xE1rio", type: "string", example: "14:30" },
   { name: "location_name", label: "Local", type: "string", example: "Unidade Centro" },
+  // Not in bookingPayload on purpose: the browser has no reliable source for
+  // the tenant's public name, so the SENDER fills this slot (messaging-send
+  // reads the tenants row). The field stays declared because templates use it
+  // and the editor needs its placeholder.
   { name: "business_name", label: "Seu neg\xF3cio", type: "string", example: "Seu Neg\xF3cio" }
 ];
 function buildAgendaDomainEvents() {
@@ -84,6 +93,10 @@ function buildAgendaDomainEvents() {
     }
   ];
 }
+var CONFIRM_OR_CANCEL = [
+  { id: "confirm", label: "Confirma", kind: "reply" },
+  { id: "cancel", label: "Cancela", kind: "reply" }
+];
 function buildAgendaMessageDefaults() {
   return [
     {
@@ -94,7 +107,13 @@ function buildAgendaMessageDefaults() {
       channels: ["whatsapp", "email"],
       defaults: {
         whatsapp: {
-          body: "Oi {{customer_name}}! Seu hor\xE1rio est\xE1 marcado \u2705\n\n*{{service_name}}*\n{{booking_date}} \xE0s {{booking_time}}\ncom {{professional_name}}\n\nQualquer coisa \xE9 s\xF3 chamar aqui. \u2014 {{business_name}}"
+          // Curto porque os botões dizem o resto: a linha "qualquer coisa é só
+          // chamar" virou Confirmar/Cancelar, que além de ser menos texto já
+          // atualiza o agendamento sozinho.
+          // Sem botões, de propósito (decisão do founder 2026-08-24): esta é a
+          // confirmação informativa de que a reserva EXISTE. Confirmar presença é
+          // trabalho do lembrete de véspera, onde a resposta ainda muda o dia.
+          body: "Oi {{customer_name}}! Tudo certo \u2014 seu hor\xE1rio foi reservado na nossa agenda \u2705\n\nServi\xE7o: *{{service_name}}*\nData: {{booking_date}} \xE0s {{booking_time}}\nProfissional: {{professional_name}}\n\nSe precisar ajustar alguma coisa, \xE9 s\xF3 responder esta mensagem.\n\nEquipe {{business_name}} agradece a prefer\xEAncia!"
         },
         email: {
           subject: "Hor\xE1rio confirmado \u2014 {{booking_date}} \xE0s {{booking_time}}",
@@ -112,7 +131,10 @@ function buildAgendaMessageDefaults() {
       channels: ["whatsapp", "email"],
       defaults: {
         whatsapp: {
-          body: "Oi {{customer_name}}! Passando para lembrar do seu hor\xE1rio amanh\xE3 \u{1F487}\n\n*{{service_name}}*\n{{booking_date}} \xE0s {{booking_time}}\ncom {{professional_name}}\n\nConsegue vir? Se precisar remarcar, me avisa por aqui. \u2014 {{business_name}}"
+          // AQUI moram Confirma/Cancela: na véspera a resposta ainda muda o dia —
+          // libera o horário ou garante a presença.
+          body: "Oi {{customer_name}}! Passando para lembrar do seu hor\xE1rio amanh\xE3 \u{1F487}\n\nServi\xE7o: *{{service_name}}*\nData: {{booking_date}} \xE0s {{booking_time}}\nProfissional: {{professional_name}}\n\nConsegue vir? \xC9 s\xF3 tocar em Confirma ou Cancela aqui embaixo \u2014 e se precisar de outro hor\xE1rio, responde esta mensagem.\n\nEquipe {{business_name}} te espera!",
+          actions: CONFIRM_OR_CANCEL
         },
         email: {
           subject: "Lembrete: seu hor\xE1rio \xE9 amanh\xE3, {{booking_time}}",
@@ -127,7 +149,10 @@ function buildAgendaMessageDefaults() {
       channels: ["whatsapp", "email"],
       defaults: {
         whatsapp: {
-          body: "Oi {{customer_name}}! Seu hor\xE1rio foi remarcado \u{1F5D3}\n\n*{{service_name}}*\nAgora: {{booking_date}} \xE0s {{booking_time}}\ncom {{professional_name}}\n\n\u2014 {{business_name}}"
+          body: "Oi {{customer_name}}! Seu hor\xE1rio foi remarcado \u{1F5D3}\n\nServi\xE7o: *{{service_name}}*\nNova data: {{booking_date}} \xE0s {{booking_time}}\nProfissional: {{professional_name}}\n\nSe a nova data n\xE3o funcionar para voc\xEA, \xE9 s\xF3 responder esta mensagem ou usar os bot\xF5es abaixo.\n\nEquipe {{business_name}} agradece a compreens\xE3o!",
+          // A data mudou, então a confirmação vale de novo: é o momento em que
+          // mais gente some sem avisar.
+          actions: CONFIRM_OR_CANCEL
         },
         email: {
           subject: "Seu hor\xE1rio mudou para {{booking_date}}, {{booking_time}}",
@@ -142,7 +167,9 @@ function buildAgendaMessageDefaults() {
       channels: ["whatsapp", "email"],
       defaults: {
         whatsapp: {
-          body: "Oi {{customer_name}}, seu hor\xE1rio de {{booking_date}} \xE0s {{booking_time}} foi cancelado.\n\nQuer que eu veja outra data para voc\xEA? \u2014 {{business_name}}"
+          // Sem botões, de propósito: não há o que confirmar num horário que já
+          // foi desmarcado, e um "Confirmar" aqui só poderia dar erro.
+          body: "Oi {{customer_name}}, seu hor\xE1rio de {{booking_date}} \xE0s {{booking_time}} foi cancelado.\n\nQuer que eu veja outra data? A equipe {{business_name}} fica \xE0 disposi\xE7\xE3o."
         },
         email: {
           subject: "Hor\xE1rio de {{booking_date}} cancelado",
@@ -159,7 +186,7 @@ function buildAgendaMessageDefaults() {
       channels: ["whatsapp"],
       defaults: {
         whatsapp: {
-          body: "Oi {{customer_name}}! Foi \xF3timo te atender hoje \u{1F49B}\n\nComo foi a experi\xEAncia com {{professional_name}}? Sua opini\xE3o ajuda demais.\n\n\u2014 {{business_name}}"
+          body: "Oi {{customer_name}}! Foi \xF3timo te atender hoje \u{1F49B}\n\nComo foi a experi\xEAncia com {{professional_name}}? Sua opini\xE3o ajuda demais a equipe {{business_name}} a melhorar sempre."
         }
       }
     },
@@ -169,7 +196,7 @@ function buildAgendaMessageDefaults() {
       channels: ["whatsapp"],
       defaults: {
         whatsapp: {
-          body: "Oi {{customer_name}}, senti sua falta no hor\xE1rio de {{booking_date}} \u{1F614}\n\nAconteceu alguma coisa? Se quiser, j\xE1 deixo outro hor\xE1rio separado para voc\xEA. \u2014 {{business_name}}"
+          body: "Oi {{customer_name}}, senti sua falta no hor\xE1rio de {{booking_date}} \u{1F614}\n\nAconteceu alguma coisa? Se quiser, j\xE1 deixo outro hor\xE1rio separado para voc\xEA aqui na {{business_name}}, \xE9 s\xF3 responder."
         }
       }
     }
@@ -962,7 +989,7 @@ function BookingPaymentPanel({ orderId, orderTotal, services, onClose, onPayment
         children: /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "w-full max-w-md rounded-xl border bg-card shadow-2xl mx-4 transition-all duration-200 max-h-[90vh] overflow-y-auto",
+            className: "w-full max-w-md rounded-modal border bg-card shadow-2xl mx-4 transition-all duration-200 max-h-[90vh] overflow-y-auto",
             style: { opacity: visible ? 1 : 0, transform: visible ? "scale(1) translateY(0)" : "scale(0.95) translateY(8px)" },
             onClick: (e) => e.stopPropagation(),
             children: [
@@ -1269,6 +1296,17 @@ function AppointmentModal({ open, mode, bookingId, prefill, initialTab, external
   const [cancellationNotes, setCancellationNotes] = useState("");
   const [cancellationReasonsLoading, setCancellationReasonsLoading] = useState(false);
   const activeType = config.bookingTypes.find((bt) => bt.id === bookingType) ?? config.bookingTypes[0];
+  const requestKey = [
+    mode,
+    bookingId ?? "",
+    initialTab ?? "",
+    prefill?.startsAt ?? "",
+    prefill?.endsAt ?? "",
+    prefill?.professionalId ?? "",
+    prefill?.locationId ?? "",
+    prefill?.clientId ?? "",
+    prefill?.kind ?? ""
+  ].join("|");
   useEffect(() => {
     if (!open) return;
     setClientId(prefill?.clientId ?? "");
@@ -1312,7 +1350,7 @@ function AppointmentModal({ open, mode, bookingId, prefill, initialTab, external
       }
       return "09:00";
     });
-  }, [open]);
+  }, [open, requestKey]);
   useEffect(() => {
     if (!open || mode !== "edit" || !bookingId) return;
     setLoading(true);
@@ -1369,7 +1407,7 @@ function AppointmentModal({ open, mode, bookingId, prefill, initialTab, external
         }).finally(() => setPaymentStatusLoading(false));
       }
     }).catch(() => setLoading(false));
-  }, [open, mode, bookingId]);
+  }, [open, requestKey]);
   useEffect(() => {
     if (modalTab !== "client" || !clientId || !config.contactLookup || clientData) return;
     setClientDataLoading(true);
@@ -1444,6 +1482,21 @@ function AppointmentModal({ open, mode, bookingId, prefill, initialTab, external
   function removeService(idx) {
     setServices((p) => p.filter((_, i) => i !== idx));
   }
+  const serviceCreate = useLookupCreate(
+    config.serviceLookup,
+    (created) => {
+      const duration = created.data?.duration_minutes || 60;
+      setServices((p) => [...p, {
+        serviceId: created.id,
+        name: created.label,
+        durationMinutes: duration,
+        price: created.price ?? 0
+      }]);
+      setServiceSearch("");
+      setServiceOptions([]);
+    },
+    { variant: "inline" }
+  );
   async function handleSubmit(e) {
     e.preventDefault();
     if (!canSubmit) return;
@@ -1513,431 +1566,442 @@ function AppointmentModal({ open, mode, bookingId, prefill, initialTab, external
   const isDirty = mode === "create" || formSnapshot !== initialSnapshot.current;
   const canSubmit = (!activeType.fields.title || title.trim()) && (!activeType.requiresClient || clientId) && (!activeType.fields.professional || professionalId) && (!activeType.requiresServices || services.length > 0) && (!needsCancellationReason || !!cancellationReasonId) && (!needsCancellationNotes || !!cancellationNotes.trim()) && !conflict && !saving;
   const showTabs = config.bookingTypes.length > 1;
-  return /* @__PURE__ */ jsx(Modal, { open, onOpenChange: (v) => {
-    if (!v) onClose();
-  }, children: /* @__PURE__ */ jsxs(ModalContent, { size: "lg", noPadding: true, children: [
-    /* @__PURE__ */ jsxs("div", { className: "px-5 pt-4 pb-3 shrink-0 space-y-3", children: [
-      /* @__PURE__ */ jsx(ModalTitle, { className: "sr-only", children: mode === "create" ? t2("agenda.appointment.new") : t2("agenda.appointment.edit") }),
-      showTabs && mode === "create" ? /* @__PURE__ */ jsx("div", { className: "flex gap-1 border-b fayz-glass-divider", children: config.bookingTypes.map((bt) => {
-        const label = t2(`agenda.bookingType.${bt.id}`) || bt.label;
-        const isActive = bookingType === bt.id;
-        const BtIcon = BOOKING_TYPE_ICONS[bt.icon] ?? Calendar;
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => setBookingType(bt.id),
-            className: `relative flex items-center gap-1.5 pb-2 px-2 text-xs font-medium transition-colors ${isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`,
-            children: [
-              /* @__PURE__ */ jsx(BtIcon, { className: "h-3.5 w-3.5" }),
-              label,
-              isActive && /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 left-0 right-0 h-0.5 rounded-full bg-foreground" })
-            ]
-          },
-          bt.id
-        );
-      }) }) : mode === "edit" && (config.clientEntityDef && clientId || config.modules.financial && editOrderId ? /* @__PURE__ */ jsx("div", { className: "flex gap-1 border-b fayz-glass-divider", children: [
-        { id: "appointment", label: t2(`agenda.bookingType.${bookingType}`) || activeType.label, icon: Calendar, show: true },
-        { id: "client", label: t2("agenda.appointment.clientTab"), icon: User, show: !!config.clientEntityDef && !!clientId },
-        { id: "financial", label: t2("agenda.payment.title"), icon: DollarSign, show: config.modules.financial && !!editOrderId }
-      ].filter((tab) => tab.show).map((tab) => {
-        const isActive = modalTab === tab.id;
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => setModalTab(tab.id),
-            className: `relative flex items-center gap-1.5 pb-2 px-2 text-xs font-medium transition-colors ${isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`,
-            children: [
-              /* @__PURE__ */ jsx(tab.icon, { className: "h-3.5 w-3.5" }),
-              tab.label,
-              tab.id === "financial" && editPaymentStatus === "paid" && /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-success" }),
-              tab.id === "financial" && editPaymentStatus !== "paid" && (editPaymentStatus !== "none" || totalPrice > 0 && date <= (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)) && /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-warning" }),
-              isActive && /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 left-0 right-0 h-0.5 rounded-full bg-foreground" })
-            ]
-          },
-          tab.id
-        );
-      }) }) : /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: t2(`agenda.bookingType.${bookingType}`) || activeType.label })),
-      modalTab === "appointment" && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-sm flex-1 min-w-0", children: [
-            editingDate ? /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "date",
-                value: date,
-                autoFocus: true,
-                onChange: (e) => {
-                  setDate(e.target.value);
-                  setEditingDate(false);
-                },
-                onBlur: () => setEditingDate(false),
-                className: "bg-transparent text-sm font-medium focus:outline-none border-b border-foreground w-auto shrink-0"
-              }
-            ) : /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => setEditingDate(true),
-                className: "px-0.5 py-0.5 font-medium border-b border-transparent hover:border-foreground transition-colors shrink-0",
-                children: formatCompactDate(date, locale)
-              }
-            ),
-            editingTime ? /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "time",
-                value: startTime,
-                autoFocus: true,
-                onChange: (e) => {
-                  if (e.target.value) {
-                    setStartTime(e.target.value);
-                    setEditingTime(false);
-                  }
-                },
-                onBlur: () => setEditingTime(false),
-                className: "bg-transparent text-xs text-muted-foreground focus:outline-none border-b border-foreground w-auto shrink-0"
-              }
-            ) : /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => setEditingTime(true),
-                className: "px-0.5 py-0.5 text-xs text-muted-foreground border-b border-transparent hover:border-foreground transition-colors shrink-0",
-                children: startTime
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground/60", children: "\u2014" }),
-            /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground/60", children: endTime }),
-            activeType.fields.professional && /* @__PURE__ */ jsx("div", { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsx(ProfessionalSelect, { value: professionalId, onChange: setProfessionalId, professionals }) })
-          ] })
-        ] }),
-        conflict && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg bg-destructive/10 px-3 py-1.5 text-xs text-destructive", children: [
-          /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3.5 w-3.5 shrink-0" }),
-          t2("agenda.appointment.conflict")
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-h-0 overflow-hidden", children: [
-      modalTab === "client" && clientId && config.clientEntityDef && /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-5 py-4", children: clientDataLoading ? /* @__PURE__ */ jsx("div", { className: "space-y-3 py-2", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-8 rounded-lg bg-muted animate-pulse" }, i)) }) : clientData ? clientEditing ? /* @__PURE__ */ jsx(
-        CrudFormPage,
-        {
-          embedded: true,
-          entityDef: config.clientEntityDef,
-          mode: "edit",
-          initialData: clientData,
-          namePlural: "",
-          onCancel: () => setClientEditing(false),
-          onSubmit: async (data) => {
-            try {
-              const { getSupabaseClientOptional: getSupabaseClientOptional4 } = await import('@fayz-ai/core');
-              const supabase = getSupabaseClientOptional4();
-              if (!supabase) return;
-              const dbData = {};
-              for (const [k, v] of Object.entries(data)) {
-                dbData[k.replace(/[A-Z]/g, (m) => "_" + m.toLowerCase())] = v;
-              }
-              await supabase.from("people").update(dbData).eq("id", clientId);
-              setClientData({ ...clientData, ...data });
-              setClientEditing(false);
-            } catch {
-            }
-          }
-        }
-      ) : /* @__PURE__ */ jsx(
-        CrudDetailPage,
-        {
-          embedded: true,
-          entityDef: config.clientEntityDef,
-          item: clientData,
-          namePlural: "",
-          basePath: "",
-          onBack: () => setModalTab("appointment"),
-          onEdit: () => setClientEditing(true)
-        }
-      ) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-4 text-center", children: t2("agenda.appointment.noClientData") }) }),
-      modalTab === "financial" && editOrderId && config.financialBridge && /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx(
-        BookingPaymentPanel,
-        {
-          orderId: editOrderId,
-          orderTotal: editOrderTotal,
-          services: services.map((s) => ({ name: s.name, price: s.price, durationMinutes: s.durationMinutes })),
-          formatCurrency: (v) => fmtCurrency(v, currency.locale, currency.code),
-          inline: true,
-          onClose: () => setModalTab("appointment"),
-          onPaymentChange: () => {
-            config.financialBridge.getPaymentDetail(editOrderId).then((d) => {
-              if (d) {
-                setEditPaymentStatus(d.status);
-                setEditOrderTotal(d.totalAmount);
-              }
-            }).catch(() => {
-            });
-            if (agendaDateRange.start) fetchBookings(agendaDateRange);
-          }
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col flex-1 min-h-0 overflow-hidden", style: { display: modalTab === "appointment" ? void 0 : "none" }, children: [
-        /* @__PURE__ */ jsxs("div", { className: "border-t fayz-glass-divider px-5 py-3 space-y-1 flex-1 overflow-y-auto", children: [
-          loading && /* @__PURE__ */ jsx("div", { className: "space-y-2 py-2", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-1.5", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-4 w-4 rounded bg-muted animate-pulse shrink-0" }),
-            /* @__PURE__ */ jsx("div", { className: "h-8 flex-1 rounded-lg bg-muted animate-pulse" })
-          ] }, i)) }),
-          !loading && /* @__PURE__ */ jsxs(Fragment, { children: [
-            activeType.fields.title && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-1", children: [
-              /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
-              /* @__PURE__ */ jsx(
+  const railTitle = mode === "create" ? t2("agenda.appointment.new") : title.trim() || clientSearch || t2("agenda.appointment.edit");
+  return (
+    // A booking is written next to the calendar it belongs to, not on top of
+    // it: the dialog used to dim the week you were reading while you filled in
+    // a slot from it, and a second panel opening from the same edge as the
+    // assistant meant two vocabularies for one side of the screen.
+    /* @__PURE__ */ jsxs(RightRailPage, { title: railTitle, open, onClose, width: "max-w-lg", children: [
+      /* @__PURE__ */ jsxs("div", { className: "px-5 pt-3 pb-3 shrink-0 space-y-3", children: [
+        showTabs && mode === "create" ? /* @__PURE__ */ jsx("div", { className: "flex gap-1 border-b fayz-glass-divider", children: config.bookingTypes.map((bt) => {
+          const label = t2(`agenda.bookingType.${bt.id}`) || bt.label;
+          const isActive = bookingType === bt.id;
+          const BtIcon = BOOKING_TYPE_ICONS[bt.icon] ?? Calendar;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setBookingType(bt.id),
+              className: `relative flex items-center gap-1.5 pb-2 px-2 text-xs font-medium transition-colors ${isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+              children: [
+                /* @__PURE__ */ jsx(BtIcon, { className: "h-3.5 w-3.5" }),
+                label,
+                isActive && /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 left-0 right-0 h-0.5 rounded-full bg-foreground" })
+              ]
+            },
+            bt.id
+          );
+        }) }) : mode === "edit" && (config.clientEntityDef && clientId || config.modules.financial && editOrderId ? /* @__PURE__ */ jsx("div", { className: "flex gap-1 border-b fayz-glass-divider", children: [
+          { id: "appointment", label: t2(`agenda.bookingType.${bookingType}`) || activeType.label, icon: Calendar, show: true },
+          { id: "client", label: t2("agenda.appointment.clientTab"), icon: User, show: !!config.clientEntityDef && !!clientId },
+          { id: "financial", label: t2("agenda.payment.title"), icon: DollarSign, show: config.modules.financial && !!editOrderId }
+        ].filter((tab) => tab.show).map((tab) => {
+          const isActive = modalTab === tab.id;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setModalTab(tab.id),
+              className: `relative flex items-center gap-1.5 pb-2 px-2 text-xs font-medium transition-colors ${isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+              children: [
+                /* @__PURE__ */ jsx(tab.icon, { className: "h-3.5 w-3.5" }),
+                tab.label,
+                tab.id === "financial" && editPaymentStatus === "paid" && /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-success" }),
+                tab.id === "financial" && editPaymentStatus !== "paid" && (editPaymentStatus !== "none" || totalPrice > 0 && date <= (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)) && /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-warning" }),
+                isActive && /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 left-0 right-0 h-0.5 rounded-full bg-foreground" })
+              ]
+            },
+            tab.id
+          );
+        }) }) : null),
+        modalTab === "appointment" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm flex-1 min-w-0", children: [
+              editingDate ? /* @__PURE__ */ jsx(
                 "input",
                 {
-                  type: "text",
-                  value: title,
-                  onChange: (e) => setTitle(e.target.value),
-                  placeholder: t2("agenda.appointment.addTitle"),
-                  autoFocus: mode === "create",
-                  className: "w-full flex-1 rounded-input border border-input bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-2.5 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-ring"
+                  type: "date",
+                  value: date,
+                  autoFocus: true,
+                  onChange: (e) => {
+                    setDate(e.target.value);
+                    setEditingDate(false);
+                  },
+                  onBlur: () => setEditingDate(false),
+                  className: "bg-transparent text-sm font-medium focus:outline-none border-b border-foreground w-auto shrink-0"
                 }
-              )
-            ] }),
-            activeType.fields.client && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-1", children: [
-              /* @__PURE__ */ jsx(User, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
-              /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
-                ContactPicker,
+              ) : /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setEditingDate(true),
+                  className: "px-0.5 py-0.5 font-medium border-b border-transparent hover:border-foreground transition-colors shrink-0",
+                  children: formatCompactDate(date, locale)
+                }
+              ),
+              editingTime ? /* @__PURE__ */ jsx(
+                "input",
                 {
-                  value: clientId || clientSearch ? { id: clientId || void 0, name: clientSearch, phone: clientPhone } : null,
-                  onChange: (contact) => {
-                    setClientId(contact?.id ?? "");
-                    setClientSearch(contact?.name ?? "");
-                    setClientPhone(contact?.phone ?? "");
+                  type: "time",
+                  value: startTime,
+                  autoFocus: true,
+                  onChange: (e) => {
+                    if (e.target.value) {
+                      setStartTime(e.target.value);
+                      setEditingTime(false);
+                    }
                   },
-                  kind: config.clientKind,
-                  extensionTable: "clients",
-                  lookup: config.contactLookup,
-                  clearable: !isPaidBooking,
-                  variant: "inline",
-                  placeholder: t2("agenda.appointment.searchClient"),
-                  createLabel: t2("agenda.appointment.newClient")
+                  onBlur: () => setEditingTime(false),
+                  className: "bg-transparent text-xs text-muted-foreground focus:outline-none border-b border-foreground w-auto shrink-0"
                 }
-              ) })
-            ] }),
-            activeType.fields.location && config.modules.locationSelection && (storeLocations.length > 0 || config.locations.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-1", children: [
-              /* @__PURE__ */ jsx(MapPin, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
-              /* @__PURE__ */ jsx(
-                LocationSelect,
+              ) : /* @__PURE__ */ jsx(
+                "button",
                 {
-                  value: locationId,
-                  onChange: setLocationId,
-                  locations: storeLocations.length > 0 ? storeLocations : config.locations
+                  type: "button",
+                  onClick: () => setEditingTime(true),
+                  className: "px-0.5 py-0.5 text-xs text-muted-foreground border-b border-transparent hover:border-foreground transition-colors shrink-0",
+                  children: startTime
                 }
-              )
-            ] }),
-            activeType.fields.services && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 py-1", children: [
-              /* @__PURE__ */ jsx(Briefcase, { className: "h-4 w-4 mt-1.5 text-muted-foreground shrink-0" }),
-              /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-                services.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-0.5 mb-1", children: services.map((svc, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md bg-muted/30 px-2.5 py-1.5 text-sm", children: [
-                  /* @__PURE__ */ jsx("span", { className: "flex-1 truncate min-w-0", children: svc.name }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 shrink-0 ml-3", children: [
-                    /* @__PURE__ */ jsx(
-                      InlineNumber,
-                      {
-                        value: svc.durationMinutes,
-                        onChange: (v) => setServices((p) => p.map((s, i) => i === idx ? { ...s, durationMinutes: Math.round(v) } : s)),
-                        min: 5,
-                        step: 5,
-                        className: "w-10 shrink-0",
-                        disabled: isPaidBooking,
-                        tooltip: t2("agenda.appointment.duration")
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: "min" })
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 shrink-0 ml-3", children: [
-                    /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: currency.symbol }),
-                    /* @__PURE__ */ jsx(
-                      InlineNumber,
-                      {
-                        value: svc.price,
-                        onChange: (v) => setServices((p) => p.map((s, i) => i === idx ? { ...s, price: v } : s)),
-                        min: 0,
-                        step: 0.01,
-                        className: "w-14 shrink-0",
-                        disabled: isPaidBooking,
-                        tooltip: t2("agenda.appointment.price")
-                      }
-                    )
-                  ] }),
-                  !isPaidBooking && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => removeService(idx), className: "p-0.5 ml-2 text-muted-foreground hover:text-destructive shrink-0", children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
-                ] }, idx)) }),
-                !isPaidBooking && /* @__PURE__ */ jsx(
-                  SearchCombobox,
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground/60", children: "\u2014" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground/60", children: endTime }),
+              activeType.fields.professional && /* @__PURE__ */ jsx("div", { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsx(ProfessionalSelect, { value: professionalId, onChange: setProfessionalId, professionals }) })
+            ] })
+          ] }),
+          conflict && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg bg-destructive/10 px-3 py-1.5 text-xs text-destructive", children: [
+            /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3.5 w-3.5 shrink-0" }),
+            t2("agenda.appointment.conflict")
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-h-0 overflow-hidden", children: [
+        modalTab === "client" && clientId && config.clientEntityDef && /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-5 py-4", children: clientDataLoading ? /* @__PURE__ */ jsx("div", { className: "space-y-3 py-2", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-8 rounded-lg bg-muted animate-pulse" }, i)) }) : clientData ? clientEditing ? /* @__PURE__ */ jsx(
+          CrudFormPage,
+          {
+            embedded: true,
+            entityDef: config.clientEntityDef,
+            mode: "edit",
+            initialData: clientData,
+            namePlural: "",
+            onCancel: () => setClientEditing(false),
+            onSubmit: async (data) => {
+              try {
+                const { getSupabaseClientOptional: getSupabaseClientOptional4 } = await import('@fayz-ai/core');
+                const supabase = getSupabaseClientOptional4();
+                if (!supabase) return;
+                const dbData = {};
+                for (const [k, v] of Object.entries(data)) {
+                  dbData[k.replace(/[A-Z]/g, (m) => "_" + m.toLowerCase())] = v;
+                }
+                await supabase.from("people").update(dbData).eq("id", clientId);
+                setClientData({ ...clientData, ...data });
+                setClientEditing(false);
+              } catch {
+              }
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
+          CrudDetailPage,
+          {
+            embedded: true,
+            entityDef: config.clientEntityDef,
+            item: clientData,
+            namePlural: "",
+            basePath: "",
+            onBack: () => setModalTab("appointment"),
+            onEdit: () => setClientEditing(true)
+          }
+        ) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-4 text-center", children: t2("agenda.appointment.noClientData") }) }),
+        modalTab === "financial" && editOrderId && config.financialBridge && /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx(
+          BookingPaymentPanel,
+          {
+            orderId: editOrderId,
+            orderTotal: editOrderTotal,
+            services: services.map((s) => ({ name: s.name, price: s.price, durationMinutes: s.durationMinutes })),
+            formatCurrency: (v) => fmtCurrency(v, currency.locale, currency.code),
+            inline: true,
+            onClose: () => setModalTab("appointment"),
+            onPaymentChange: () => {
+              config.financialBridge.getPaymentDetail(editOrderId).then((d) => {
+                if (d) {
+                  setEditPaymentStatus(d.status);
+                  setEditOrderTotal(d.totalAmount);
+                }
+              }).catch(() => {
+              });
+              if (agendaDateRange.start) fetchBookings(agendaDateRange);
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col flex-1 min-h-0 overflow-hidden", style: { display: modalTab === "appointment" ? void 0 : "none" }, children: [
+          /* @__PURE__ */ jsxs("div", { className: "border-t fayz-glass-divider px-5 py-3 space-y-1 flex-1 overflow-y-auto", children: [
+            loading && /* @__PURE__ */ jsx("div", { className: "space-y-2 py-2", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-1.5", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-4 w-4 rounded bg-muted animate-pulse shrink-0" }),
+              /* @__PURE__ */ jsx("div", { className: "h-8 flex-1 rounded-lg bg-muted animate-pulse" })
+            ] }, i)) }),
+            !loading && /* @__PURE__ */ jsxs(Fragment, { children: [
+              activeType.fields.title && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-1", children: [
+                /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+                /* @__PURE__ */ jsx(
+                  "input",
                   {
-                    value: serviceSearch,
-                    onChange: setServiceSearch,
-                    onSelect: addService,
-                    options: serviceOptions,
-                    placeholder: t2("agenda.appointment.searchService"),
-                    onBlurEmpty: () => {
-                    },
-                    onFocus: () => {
-                      if (!serviceSearch && serviceOptions.length === 0) setServiceOptions(initialServiceOptions);
-                    },
-                    renderRight: (opt) => {
-                      const dur = opt.data?.duration_minutes || 0;
-                      const hasPrice = opt.price != null;
-                      if (!hasPrice && !dur) return null;
-                      return /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-xs whitespace-nowrap", children: [
-                        hasPrice && fmtCurrency(opt.price, currency.locale, currency.code),
-                        hasPrice && dur > 0 && " \xB7 ",
-                        dur > 0 && `${dur}min`
-                      ] });
+                    type: "text",
+                    value: title,
+                    onChange: (e) => setTitle(e.target.value),
+                    placeholder: t2("agenda.appointment.addTitle"),
+                    autoFocus: mode === "create",
+                    "aria-required": true,
+                    className: "w-full flex-1 rounded-input border border-input bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-2.5 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-ring"
+                  }
+                )
+              ] }),
+              activeType.fields.client && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-1", children: [
+                /* @__PURE__ */ jsx(User, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+                /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+                  ContactPicker,
+                  {
+                    value: clientId || clientSearch ? { id: clientId || void 0, name: clientSearch, phone: clientPhone } : null,
+                    onChange: (contact) => {
+                      setClientId(contact?.id ?? "");
+                      setClientSearch(contact?.name ?? "");
+                      setClientPhone(contact?.phone ?? "");
                     },
-                    minimal: true,
-                    inlineLabel: services.length > 0 ? t2("agenda.appointment.addService") : t2("agenda.appointment.addServiceFirst"),
-                    inlineIcon: services.length > 0 ? "plus" : "search"
+                    kind: config.clientKind,
+                    lookup: config.contactLookup,
+                    createEntityDef: config.clientEntityDef,
+                    clearable: !isPaidBooking,
+                    variant: "inline",
+                    placeholder: t2("agenda.appointment.searchClient"),
+                    createLabel: t2("agenda.appointment.newClient"),
+                    required: activeType.requiresClient
+                  }
+                ) })
+              ] }),
+              activeType.fields.location && config.modules.locationSelection && (storeLocations.length > 0 || config.locations.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-1", children: [
+                /* @__PURE__ */ jsx(MapPin, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+                /* @__PURE__ */ jsx(
+                  LocationSelect,
+                  {
+                    value: locationId,
+                    onChange: setLocationId,
+                    locations: storeLocations.length > 0 ? storeLocations : config.locations
                   }
                 )
-              ] })
-            ] }),
-            activeType.fields.status && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-1", children: [
-              /* @__PURE__ */ jsx(CircleDot, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
-              /* @__PURE__ */ jsx(StatusSelect, { value: status, onChange: setStatus, statuses: config.statuses, bookingDate: date })
-            ] }),
-            needsCancellationReason && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 py-1", children: [
-              /* @__PURE__ */ jsx(Ban, { className: "h-4 w-4 mt-2 text-muted-foreground shrink-0" }),
-              /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
-                /* @__PURE__ */ jsxs(
-                  "select",
+              ] }),
+              activeType.fields.services && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 py-1", children: [
+                /* @__PURE__ */ jsx(Briefcase, { className: "h-4 w-4 mt-1.5 text-muted-foreground shrink-0" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                  services.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-0.5 mb-1", children: services.map((svc, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md bg-muted/30 px-2.5 py-1.5 text-sm", children: [
+                    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate min-w-0", children: svc.name }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 shrink-0 ml-3", children: [
+                      /* @__PURE__ */ jsx(
+                        InlineNumber,
+                        {
+                          value: svc.durationMinutes,
+                          onChange: (v) => setServices((p) => p.map((s, i) => i === idx ? { ...s, durationMinutes: Math.round(v) } : s)),
+                          min: 5,
+                          step: 5,
+                          className: "w-10 shrink-0",
+                          disabled: isPaidBooking,
+                          tooltip: t2("agenda.appointment.duration")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: "min" })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 shrink-0 ml-3", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: currency.symbol }),
+                      /* @__PURE__ */ jsx(
+                        InlineNumber,
+                        {
+                          value: svc.price,
+                          onChange: (v) => setServices((p) => p.map((s, i) => i === idx ? { ...s, price: v } : s)),
+                          min: 0,
+                          step: 0.01,
+                          className: "w-14 shrink-0",
+                          disabled: isPaidBooking,
+                          tooltip: t2("agenda.appointment.price")
+                        }
+                      )
+                    ] }),
+                    !isPaidBooking && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => removeService(idx), className: "p-0.5 ml-2 text-muted-foreground hover:text-destructive shrink-0", children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
+                  ] }, idx)) }),
+                  serviceCreate.creating && serviceCreate.form,
+                  !isPaidBooking && !serviceCreate.creating && /* @__PURE__ */ jsx(
+                    SearchCombobox,
+                    {
+                      value: serviceSearch,
+                      onChange: setServiceSearch,
+                      onSelect: addService,
+                      options: serviceOptions,
+                      placeholder: t2("agenda.appointment.searchService"),
+                      onBlurEmpty: () => {
+                      },
+                      onFocus: () => {
+                        if (!serviceSearch && serviceOptions.length === 0) setServiceOptions(initialServiceOptions);
+                      },
+                      renderRight: (opt) => {
+                        const dur = opt.data?.duration_minutes || 0;
+                        const hasPrice = opt.price != null;
+                        if (!hasPrice && !dur) return null;
+                        return /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-xs whitespace-nowrap", children: [
+                          hasPrice && fmtCurrency(opt.price, currency.locale, currency.code),
+                          hasPrice && dur > 0 && " \xB7 ",
+                          dur > 0 && `${dur}min`
+                        ] });
+                      },
+                      minimal: true,
+                      chevron: true,
+                      required: activeType.requiresServices && services.length === 0,
+                      allowCreate: !!serviceCreate.onCreate,
+                      onCreateNew: serviceCreate.onCreate,
+                      createLabel: t2("agenda.appointment.newService"),
+                      inlineLabel: services.length > 0 ? t2("agenda.appointment.addService") : t2("agenda.appointment.addServiceFirst"),
+                      inlineIcon: services.length > 0 ? "plus" : "search"
+                    }
+                  )
+                ] })
+              ] }),
+              activeType.fields.status && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-1", children: [
+                /* @__PURE__ */ jsx(CircleDot, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+                /* @__PURE__ */ jsx(StatusSelect, { value: status, onChange: setStatus, statuses: config.statuses, bookingDate: date })
+              ] }),
+              needsCancellationReason && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 py-1", children: [
+                /* @__PURE__ */ jsx(Ban, { className: "h-4 w-4 mt-2 text-muted-foreground shrink-0" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+                  /* @__PURE__ */ jsxs(
+                    "select",
+                    {
+                      value: cancellationReasonId,
+                      onChange: (event) => setCancellationReasonId(event.target.value),
+                      disabled: cancellationReasonsLoading,
+                      "aria-required": true,
+                      className: "w-full rounded-input border border-input bg-card px-2.5 py-1.5 text-sm shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] focus:outline-none focus:ring-2 focus:ring-ring",
+                      children: [
+                        /* @__PURE__ */ jsx("option", { value: "", children: cancellationReasonsLoading ? t2("agenda.cancellation.loadingReasons") : t2("agenda.cancellation.selectReason") }),
+                        cancellationReasons.map((reason) => /* @__PURE__ */ jsxs("option", { value: reason.id, children: [
+                          reason.label,
+                          reason.requiresNotes ? " *" : ""
+                        ] }, reason.id))
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "textarea",
+                    {
+                      value: cancellationNotes,
+                      onChange: (event) => setCancellationNotes(event.target.value),
+                      placeholder: needsCancellationNotes ? t2("agenda.cancellation.notesRequired") : t2("agenda.cancellation.notesOptional"),
+                      rows: 2,
+                      "aria-required": needsCancellationNotes || void 0,
+                      className: "w-full rounded-input border border-input bg-card px-2.5 py-1.5 text-sm resize-none shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] focus:outline-none focus:ring-2 focus:ring-ring"
+                    }
+                  )
+                ] })
+              ] }),
+              !showNotes ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-1", children: [
+                /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+                /* @__PURE__ */ jsx(
+                  "button",
                   {
-                    value: cancellationReasonId,
-                    onChange: (event) => setCancellationReasonId(event.target.value),
-                    disabled: cancellationReasonsLoading,
-                    className: "w-full rounded-input border border-input bg-card px-2.5 py-1.5 text-sm shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] focus:outline-none focus:ring-2 focus:ring-ring",
-                    children: [
-                      /* @__PURE__ */ jsx("option", { value: "", children: cancellationReasonsLoading ? t2("agenda.cancellation.loadingReasons") : t2("agenda.cancellation.selectReason") }),
-                      cancellationReasons.map((reason) => /* @__PURE__ */ jsxs("option", { value: reason.id, children: [
-                        reason.label,
-                        reason.requiresNotes ? " *" : ""
-                      ] }, reason.id))
-                    ]
+                    type: "button",
+                    onClick: () => setShowNotes(true),
+                    className: "text-sm text-muted-foreground hover:text-foreground transition-colors text-left py-1.5 pl-2",
+                    children: t2("agenda.appointment.addNotes")
                   }
-                ),
+                )
+              ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 py-1", children: [
+                /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4 mt-2 text-muted-foreground shrink-0" }),
                 /* @__PURE__ */ jsx(
                   "textarea",
                   {
-                    value: cancellationNotes,
-                    onChange: (event) => setCancellationNotes(event.target.value),
-                    placeholder: needsCancellationNotes ? t2("agenda.cancellation.notesRequired") : t2("agenda.cancellation.notesOptional"),
+                    value: notes,
+                    onChange: (e) => setNotes(e.target.value),
+                    placeholder: t2("agenda.appointment.addDescription"),
                     rows: 2,
-                    className: "w-full rounded-input border border-input bg-card px-2.5 py-1.5 text-sm resize-none shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] focus:outline-none focus:ring-2 focus:ring-ring"
+                    autoFocus: true,
+                    className: "w-full flex-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-2.5 py-1.5 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring"
                   }
                 )
               ] })
-            ] }),
-            !showNotes ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-1", children: [
-              /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setShowNotes(true),
-                  className: "text-sm text-muted-foreground hover:text-foreground transition-colors text-left py-1.5 pl-2",
-                  children: t2("agenda.appointment.addNotes")
-                }
-              )
-            ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 py-1", children: [
-              /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4 mt-2 text-muted-foreground shrink-0" }),
-              /* @__PURE__ */ jsx(
-                "textarea",
-                {
-                  value: notes,
-                  onChange: (e) => setNotes(e.target.value),
-                  placeholder: t2("agenda.appointment.addDescription"),
-                  rows: 2,
-                  autoFocus: true,
-                  className: "w-full flex-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-2.5 py-1.5 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring"
-                }
-              )
-            ] })
-          ] })
-        ] }),
-        modalTab === "appointment" && !clientEditing && /* @__PURE__ */ jsx("div", { className: "px-5 py-2.5 border-t fayz-glass-divider bg-transparent shrink-0 sm:rounded-b-2xl", children: confirmingDelete ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-xs text-destructive font-medium", children: t2("agenda.appointment.deleteConfirm") }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setConfirmingDelete(false), children: t2("agenda.appointment.cancel") }),
-            /* @__PURE__ */ jsx(Button, { type: "button", variant: "destructive", size: "sm", onClick: handleDelete, disabled: deleting, children: deleting ? t2("agenda.appointment.deleting") : t2("agenda.appointment.confirmDelete") })
-          ] })
-        ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-            mode === "edit" && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setConfirmingDelete(true), className: "text-xs text-destructive font-medium hover:underline", children: t2("agenda.appointment.delete") }),
-            services.length > 0 && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
-              totalDuration,
-              "min",
-              config.modules.financial && totalPrice > 0 && mode === "edit" ? paymentStatusLoading ? /* @__PURE__ */ jsx("span", { className: "h-4 w-16 rounded-full bg-muted animate-pulse" }) : isPaidBooking ? /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    setModalTab("financial");
-                  },
-                  className: "inline-flex items-center gap-1 rounded-full bg-success/10 px-2 py-0.5 text-[10px] font-medium text-success hover:bg-success/20 transition-colors",
-                  children: [
-                    /* @__PURE__ */ jsx(Check, { className: "h-2.5 w-2.5" }),
-                    fmtCurrency(totalPrice, currency.locale, currency.code),
-                    " \xB7 ",
-                    t2("agenda.payment.paid")
-                  ]
-                }
-              ) : date <= (/* @__PURE__ */ new Date()).toISOString().slice(0, 10) ? /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    setModalTab("financial");
-                  },
-                  className: "inline-flex items-center gap-1 rounded-full bg-warning/10 px-2 py-0.5 text-[10px] font-medium text-warning hover:bg-warning/20 transition-colors",
-                  children: [
-                    /* @__PURE__ */ jsx(HandCoins, { className: "h-3 w-3" }),
-                    fmtCurrency(totalPrice, currency.locale, currency.code),
-                    " \xB7 ",
-                    t2("agenda.payment.collect")
-                  ]
-                }
-              ) : /* @__PURE__ */ jsxs("span", { children: [
-                "\xB7 ",
-                fmtCurrency(totalPrice, currency.locale, currency.code)
-              ] }) : /* @__PURE__ */ jsxs("span", { children: [
-                "\xB7 ",
-                fmtCurrency(totalPrice, currency.locale, currency.code)
-              ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onClose, className: "hidden sm:inline-flex", children: t2("agenda.appointment.cancel") }),
-            /* @__PURE__ */ jsx(Button, { type: "submit", variant: "default", size: "sm", disabled: !canSubmit || !isDirty, children: saving ? t2("agenda.appointment.saving") : mode === "create" ? t2("agenda.appointment.save") : t2("agenda.appointment.update") })
-          ] })
-        ] }) })
-      ] }),
-      modalTab !== "appointment" && !clientEditing && /* @__PURE__ */ jsx("div", { className: "px-5 py-2.5 border-t fayz-glass-divider bg-transparent shrink-0 sm:rounded-b-2xl", children: /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            setModalTab("appointment");
-            setClientEditing(false);
-          },
-          className: "inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors",
-          children: [
-            /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M10 12L6 8l4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
-            t2("agenda.payment.backToAppointment")
-          ]
-        }
-      ) }) })
+          modalTab === "appointment" && !clientEditing && /* @__PURE__ */ jsx("div", { className: "px-5 py-2.5 border-t fayz-glass-divider bg-transparent shrink-0", children: confirmingDelete ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-destructive font-medium", children: t2("agenda.appointment.deleteConfirm") }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setConfirmingDelete(false), children: t2("agenda.appointment.cancel") }),
+              /* @__PURE__ */ jsx(Button, { type: "button", variant: "destructive", size: "sm", onClick: handleDelete, disabled: deleting, children: deleting ? t2("agenda.appointment.deleting") : t2("agenda.appointment.confirmDelete") })
+            ] })
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              mode === "edit" && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setConfirmingDelete(true), className: "text-xs text-destructive font-medium hover:underline", children: t2("agenda.appointment.delete") }),
+              services.length > 0 && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+                /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
+                totalDuration,
+                "min",
+                config.modules.financial && totalPrice > 0 && mode === "edit" ? paymentStatusLoading ? /* @__PURE__ */ jsx("span", { className: "h-4 w-16 rounded-full bg-muted animate-pulse" }) : isPaidBooking ? /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setModalTab("financial");
+                    },
+                    className: "inline-flex items-center gap-1 rounded-full bg-success/10 px-2 py-0.5 text-[10px] font-medium text-success hover:bg-success/20 transition-colors",
+                    children: [
+                      /* @__PURE__ */ jsx(Check, { className: "h-2.5 w-2.5" }),
+                      fmtCurrency(totalPrice, currency.locale, currency.code),
+                      " \xB7 ",
+                      t2("agenda.payment.paid")
+                    ]
+                  }
+                ) : date <= (/* @__PURE__ */ new Date()).toISOString().slice(0, 10) ? /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setModalTab("financial");
+                    },
+                    className: "inline-flex items-center gap-1 rounded-full bg-warning/10 px-2 py-0.5 text-[10px] font-medium text-warning hover:bg-warning/20 transition-colors",
+                    children: [
+                      /* @__PURE__ */ jsx(HandCoins, { className: "h-3 w-3" }),
+                      fmtCurrency(totalPrice, currency.locale, currency.code),
+                      " \xB7 ",
+                      t2("agenda.payment.collect")
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsxs("span", { children: [
+                  "\xB7 ",
+                  fmtCurrency(totalPrice, currency.locale, currency.code)
+                ] }) : /* @__PURE__ */ jsxs("span", { children: [
+                  "\xB7 ",
+                  fmtCurrency(totalPrice, currency.locale, currency.code)
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(Button, { type: "submit", variant: "default", size: "sm", disabled: !canSubmit || !isDirty, children: saving ? t2("agenda.appointment.saving") : mode === "create" ? t2("agenda.appointment.save") : t2("agenda.appointment.update") }) })
+          ] }) })
+        ] }),
+        modalTab !== "appointment" && !clientEditing && /* @__PURE__ */ jsx("div", { className: "px-5 py-2.5 border-t fayz-glass-divider bg-transparent shrink-0", children: /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setModalTab("appointment");
+              setClientEditing(false);
+            },
+            className: "inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors",
+            children: [
+              /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M10 12L6 8l4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+              t2("agenda.payment.backToAppointment")
+            ]
+          }
+        ) }) })
+      ] })
     ] })
-  ] }) });
+  );
 }
 var STYLE_ID2 = "saas-floating-panel";
 if (typeof document !== "undefined" && !document.getElementById(STYLE_ID2)) {
@@ -2369,7 +2433,20 @@ function timeLabel(iso) {
   const d = new Date(iso);
   return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
 }
-function AgendaMobileList({ bookings, statusColors, currencyCode, onSelect }) {
+function AgendaMobileListSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: "flex-1 space-y-5 overflow-hidden px-3 py-3", "aria-busy": "true", "aria-live": "polite", children: [0, 1].map((g) => /* @__PURE__ */ jsxs("div", { className: "animate-pulse", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-2 ml-1 h-3 w-20 rounded bg-muted" }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: [0, 1].map((r) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-card border border-border bg-card px-3 py-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-2 w-2 shrink-0 rounded-full bg-muted" }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-3.5 w-2/3 rounded bg-muted" }),
+        /* @__PURE__ */ jsx("div", { className: "h-3 w-12 rounded bg-muted" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "h-3.5 w-14 shrink-0 rounded bg-muted" })
+    ] }, r)) })
+  ] }, g)) });
+}
+function AgendaMobileList({ bookings, statusColors, currencyCode, onSelect, onCreate }) {
   const t2 = useTranslation();
   const locale = getCurrentLocale() === "pt-BR" ? "pt-BR" : "en";
   const groups = useMemo(() => {
@@ -2394,7 +2471,18 @@ function AgendaMobileList({ bookings, statusColors, currencyCode, onSelect }) {
     return date.toLocaleDateString(locale, { weekday: "long", day: "numeric", month: "long" });
   }
   if (groups.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col items-center justify-center px-6 py-16 text-center text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: t2("agenda.list.empty") }) });
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-4 px-6 py-16 text-center", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t2("agenda.list.empty") }),
+      onCreate && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onCreate,
+          className: "fz-tap inline-flex items-center rounded-full bg-primary px-5 text-sm font-medium text-primary-foreground active:scale-[0.98]",
+          children: t2("agenda.calendar.newAppointment")
+        }
+      )
+    ] });
   }
   return /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-3 py-3 space-y-5", children: groups.map((g) => /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("h3", { className: "px-1 pb-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: dayLabel(g.date) }),
@@ -2405,7 +2493,7 @@ function AgendaMobileList({ bookings, statusColors, currencyCode, onSelect }) {
         "button",
         {
           onClick: () => onSelect(b),
-          className: "flex w-full items-center gap-3 rounded-lg border bg-card px-3 py-2.5 text-left shadow-sm transition-colors active:bg-muted/50",
+          className: "flex w-full items-center gap-3 rounded-card border bg-card px-3 py-2.5 text-left shadow-sm transition-colors active:bg-muted/50",
           children: [
             /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { backgroundColor: color } }),
             /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -2595,7 +2683,7 @@ function CalendarView() {
     endTime: agendaSettings.endTime
   };
   const bookings = useAgendaStore((s) => s.bookings);
-  useAgendaStore((s) => s.bookingsLoading);
+  const bookingsLoading = useAgendaStore((s) => s.bookingsLoading);
   const professionals = useAgendaStore((s) => s.professionals);
   const professionalsLoading = useAgendaStore((s) => s.professionalsLoading);
   const currentView = useAgendaStore((s) => s.currentView);
@@ -2646,6 +2734,7 @@ function CalendarView() {
   const [profSectionOpen, setProfSectionOpen] = useState(true);
   const [statusSectionOpen, setStatusSectionOpen] = useState(false);
   const [visibleRange, setVisibleRange] = useState(null);
+  useEffect(() => () => closeModal(), [closeModal]);
   const openModal = useCallback((...args) => {
     setPopoverVisible(false);
     setSelectedBooking(null);
@@ -3140,18 +3229,37 @@ function CalendarView() {
         }) })
       ] })
     ] }),
+    isMobile && /* @__PURE__ */ jsx(PageHeaderActions, { children: /* @__PURE__ */ jsx(
+      PageActions,
+      {
+        actions: [
+          {
+            id: "new-booking",
+            label: t2("agenda.calendar.newAppointment"),
+            icon: Plus,
+            intent: "primary",
+            creates: true,
+            onSelect: () => openModal("create")
+          },
+          {
+            id: "agenda-settings",
+            label: t2("agenda.settings.title"),
+            icon: Settings,
+            // Utility, not an alternative way to book: the shell gives it
+            // its own quiet circle above the "+" instead of hiding it in a
+            // create menu.
+            intent: "utility",
+            onSelect: () => {
+              window.location.hash = "/settings/agenda";
+            }
+          }
+        ]
+      }
+    ) }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-w-0 overflow-hidden", children: [
       /* @__PURE__ */ jsxs("div", { className: "shrink-0 border-b", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pl-4 pr-14 md:px-4 h-12", children: [
+        /* @__PURE__ */ jsxs("div", { className: `${mobileGridActive ? "flex" : "hidden"} md:flex h-12 items-center justify-between pl-4 pr-4`, children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => openModal("create"),
-                className: "md:hidden flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground",
-                children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" })
-              }
-            ),
             /* @__PURE__ */ jsxs("div", { className: `${mobileGridActive ? "flex" : "hidden"} md:flex items-center gap-3`, children: [
               /* @__PURE__ */ jsx(
                 "button",
@@ -3166,7 +3274,7 @@ function CalendarView() {
                 /* @__PURE__ */ jsx("button", { onClick: handleNext, className: "flex h-7 w-7 items-center justify-center rounded-full hover:bg-muted transition-colors", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) })
               ] })
             ] }),
-            /* @__PURE__ */ jsx("h1", { className: "text-base sm:text-lg font-normal truncate", children: isMobile && !mobileGridActive ? t2("agenda.calendar.viewAgenda") : calendarTitle })
+            !(isMobile && !mobileGridActive) && /* @__PURE__ */ jsx("h2", { className: "truncate text-base font-normal sm:text-lg", children: calendarTitle })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
             /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center gap-1", children: viewOptions.map((opt) => /* @__PURE__ */ jsx(
@@ -3184,8 +3292,9 @@ function CalendarView() {
                 variant: "outline",
                 size: "icon",
                 onClick: () => window.location.hash = "/settings/agenda",
-                title: "Agenda Settings",
-                className: "ml-1",
+                "aria-label": t2("agenda.settings.title"),
+                title: t2("agenda.settings.title"),
+                className: "ml-1 hidden md:inline-flex",
                 children: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" })
               }
             )
@@ -3195,20 +3304,27 @@ function CalendarView() {
           "button",
           {
             onClick: () => handleMobileViewChange(opt.key),
-            className: `shrink-0 rounded-md px-3 py-1 text-sm transition-colors ${mobileView === opt.key ? "bg-primary/10 text-primary font-medium" : "text-muted-foreground hover:bg-muted/50"}`,
+            "aria-pressed": mobileView === opt.key,
+            className: `flex min-h-[2.75rem] shrink-0 items-center rounded-full px-4 text-sm transition-colors active:scale-[0.98] ${mobileView === opt.key ? "bg-primary/10 font-medium text-primary" : "text-muted-foreground hover:bg-muted/50"}`,
             children: t2(opt.labelKey)
           },
           opt.key
         )) })
       ] }),
-      isMobile && !mobileGridActive ? /* @__PURE__ */ jsx(
-        AgendaMobileList,
-        {
-          bookings,
-          statusColors,
-          currencyCode: config.currency.code,
-          onSelect: (b) => openModal("edit", { bookingId: b.id })
-        }
+      isMobile && !mobileGridActive ? (
+        // The mobile branch used to sit in front of the loading check, so the
+        // list rendered empty while the query ran — which on this screen reads
+        // as "nothing scheduled", the one wrong answer it must not give.
+        bookingsLoading && bookings.length === 0 ? /* @__PURE__ */ jsx(AgendaMobileListSkeleton, {}) : /* @__PURE__ */ jsx(
+          AgendaMobileList,
+          {
+            bookings,
+            statusColors,
+            currencyCode: config.currency.code,
+            onSelect: (b) => openModal("edit", { bookingId: b.id }),
+            onCreate: () => openModal("create")
+          }
+        )
       ) : professionalsLoading && professionals.length === 0 ? /* @__PURE__ */ jsx(CalendarSkeleton, { profCount: 2 }) : /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: "flex-1 overflow-hidden agenda-calendar", children: /* @__PURE__ */ jsx(
         FullCalendar,
         {
@@ -3784,7 +3900,11 @@ function createSupabaseAgendaProvider(providerOptions) {
     },
     async getProfessionals() {
       const { core } = getClients();
-      const { data, error } = await core.from("people").select("id, name, avatar_url, is_active").eq("kind", professionalKind).eq("is_active", true).order("name");
+      const base = () => core.from("people").select("id, name, avatar_url, is_active").eq("kind", professionalKind).eq("is_active", true);
+      let { data, error } = await base().eq("is_bookable", true).order("name");
+      if (error && error.code === "42703") {
+        ({ data, error } = await base().order("name"));
+      }
       if (error) throw error;
       return (data ?? []).map((p) => ({
         id: p.id,
@@ -3843,6 +3963,12 @@ function bookingPayload(booking) {
   const starts = new Date(booking.startsAt);
   return {
     customer_name: booking.clientName ?? "",
+    // O destino do WhatsApp, exatamente como está na ficha do cliente — máscara,
+    // DDD solto, o que houver. Normalizar é trabalho de quem envia
+    // (normalizeBrPhoneToE164), e adivinhar aqui só criaria uma quinta versão da
+    // mesma regra. Vazio quando a ficha não tem telefone: a automação pula, e um
+    // envio pulado é melhor que um envio para o número de outra pessoa.
+    customer_phone: booking.clientPhone ?? "",
     service_name: (booking.services ?? []).map((s) => s.name).join(" + "),
     professional_name: booking.professionalName ?? "",
     booking_date: starts.toLocaleDateString("pt-BR"),
@@ -4201,6 +4327,8 @@ var en = {
   "agenda.appointment.name": "Name",
   "agenda.appointment.new": "New Appointment",
   "agenda.appointment.newClient": "New client",
+  "agenda.appointment.required": "Required",
+  "agenda.appointment.newService": "New service",
   "agenda.appointment.notes": "Notes",
   "agenda.appointment.phone": "Phone",
   "agenda.appointment.professional": "Professional",
@@ -4421,6 +4549,8 @@ var ptBR = {
   "agenda.appointment.name": "Nome",
   "agenda.appointment.new": "Novo Agendamento",
   "agenda.appointment.newClient": "Novo cliente",
+  "agenda.appointment.required": "Obrigat\xF3rio",
+  "agenda.appointment.newService": "Novo servi\xE7o",
   "agenda.appointment.notes": "Observa\xE7\xF5es",
   "agenda.appointment.phone": "Telefone",
   "agenda.appointment.professional": "Profissional",
@@ -4661,8 +4791,14 @@ ALTER TABLE public.order_items
   ADD COLUMN IF NOT EXISTS duration_minutes integer,
   ADD COLUMN IF NOT EXISTS assignee_id uuid REFERENCES public.people(id) ON DELETE SET NULL;
 
--- Upsert key for public customers (per tenant, by normalized phone)
-CREATE UNIQUE INDEX IF NOT EXISTS people_tenant_customer_phone
+-- Lookup key for public customers (per tenant, by normalized phone).
+-- NOT UNIQUE. It was, and spine/110 says why it cannot be: \`kind\` became a
+-- derived column, so an imported 'client' turns into a 'customer' and a
+-- placeholder phone shared by eight real people lands under one key. The upsert
+-- that used to lean on it takes a per-(tenant, phone) advisory lock instead
+-- (003, 009) \u2014 the index is here for the lookup that lock guards.
+DROP INDEX IF EXISTS public.people_tenant_customer_phone;
+CREATE INDEX IF NOT EXISTS people_tenant_customer_phone
   ON public.people(tenant_id, phone)
   WHERE kind = 'customer' AND phone IS NOT NULL;
 
@@ -4674,6 +4810,8 @@ CREATE INDEX IF NOT EXISTS appointments_assignee_time
 -- \xA72 \u2014 admin read model (security_invoker \u2192 underlying RLS applies; anon sees 0 rows)
 -- DROP first: 013 widens this view and CREATE OR REPLACE cannot narrow a live
 -- view on replay ("cannot drop columns from view"). 013 replays right after.
+-- 013 builds on this one, so the drop needs its dependents out and back (143).
+SELECT app.detach_view_dependents('public.v_appointments');
 DROP VIEW IF EXISTS public.v_appointments;
 CREATE VIEW public.v_appointments
 WITH (security_invoker = true) AS
@@ -4883,16 +5021,32 @@ BEGIN
     RAISE EXCEPTION 'too many open bookings for this phone';
   END IF;
 
-  -- upsert the customer by (tenant, phone) \u2014 matches people_tenant_customer_phone
-  INSERT INTO people (tenant_id, kind, name, phone, email, metadata)
-  VALUES (p_tenant_id, 'customer', trim(p_name), v_phone, p_email,
-          jsonb_build_object('source', 'public_booking'))
-  ON CONFLICT (tenant_id, phone) WHERE kind = 'customer' AND phone IS NOT NULL
-  DO UPDATE SET
-    name = EXCLUDED.name,
-    email = COALESCE(EXCLUDED.email, people.email),
-    updated_at = now()
-  RETURNING id INTO v_person_id;
+  -- Upsert the customer by (tenant, phone). NOT ON CONFLICT: the partial unique
+  -- index this used to infer is gone (spine/110 \u2014 a placeholder phone is shared
+  -- by real, distinct people). 003 already settled the replacement: take a
+  -- per-(tenant, phone) advisory lock so two first-bookings serialise, then look
+  -- before inserting. Oldest match wins, so a returning caller keeps the record
+  -- that carries their history.
+  PERFORM pg_advisory_xact_lock(hashtextextended(p_tenant_id::text || ':' || v_phone, 1));
+
+  SELECT p.id INTO v_person_id
+    FROM people p
+   WHERE p.tenant_id = p_tenant_id AND p.kind = 'customer' AND p.phone = v_phone
+   ORDER BY p.created_at
+   LIMIT 1;
+
+  IF v_person_id IS NOT NULL THEN
+    UPDATE people SET
+      name = trim(p_name),
+      email = COALESCE(p_email, people.email),
+      updated_at = now()
+    WHERE id = v_person_id;
+  ELSE
+    INSERT INTO people (tenant_id, kind, name, phone, email, metadata)
+    VALUES (p_tenant_id, 'customer', trim(p_name), v_phone, p_email,
+            jsonb_build_object('source', 'public_booking'))
+    RETURNING id INTO v_person_id;
+  END IF;
 
   -- order + booking + order_item (statuses hardcoded \u2014 caller cannot set)
   INSERT INTO orders (tenant_id, kind, status, party_id, assignee_id, subtotal, total, notes, metadata)
@@ -4922,6 +5076,8 @@ $$;
 REVOKE ALL ON FUNCTION public.create_public_booking(uuid, uuid, timestamptz, text, text, text, text) FROM public;
 GRANT EXECUTE ON FUNCTION public.create_public_booking(uuid, uuid, timestamptz, text, text, text, text)
   TO anon, authenticated, service_role;
+
+SELECT app.reattach_view_dependents();
 `;
 function computeCommissionAmount(total, ratePercent) {
   const base = Number(total) || 0;
@@ -5042,7 +5198,7 @@ function createFinancialBridge(provider2) {
       if (!supabase) return null;
       const { data: order } = await supabase.from("orders").select("id, tenant_id, assignee_id, total").eq("id", orderId).single();
       if (!order || !order.assignee_id) return null;
-      const { data: staff } = await supabase.from("v_staff").select("commission_rate").eq("id", order.assignee_id).single();
+      const { data: staff } = await supabase.from("v_professional_rates").select("commission_rate").eq("id", order.assignee_id).single();
       const rate = Number(staff?.commission_rate) || 0;
       const base = Number(order.total) || 0;
       const amount = computeCommissionAmount(base, rate);
@@ -5715,7 +5871,7 @@ function ImportEventsWizard({
       setImporting(false);
     }
   }
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border bg-card", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-card border bg-card", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-2", children: [
       /* @__PURE__ */ jsx(CalendarPlus, { className: "h-4 w-4 text-muted-foreground" }),
       /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: "Import future events" }),
@@ -8000,6 +8156,7 @@ function createAgendaPlugin(options) {
   const PageComponent = () => React13.createElement(AgendaPage, { config, provider: provider2, store });
   return {
     id: "agenda",
+    defaultAgentRole: "frontdesk",
     name: config.labels.pageTitle,
     icon: "Calendar",
     version: "1.0.0",
@@ -8009,6 +8166,15 @@ function createAgendaPlugin(options) {
     // the saas/admin Panel world, not the ecommerce storefront.
     scaffolds: ["saas"],
     defaultEnabled: true,
+    // The parts a plan can permit separately (#281, ADR 0025). This is the
+    // plugin ADR 0018 named: it ships open with the "suggest a slot" button,
+    // and the intelligence behind that button is a service we host — so the
+    // facet is what says whether this tenant contracted it.
+    facets: [
+      { id: "scheduling", label: "Agenda", description: "Hor\xE1rios, profissionais e reservas.", includedWithPlugin: true },
+      { id: "public_booking", label: "Agendamento online", description: "A p\xE1gina p\xFAblica onde o cliente marca sozinho." },
+      { id: "smart_fit", label: "Encaixe inteligente", description: "Sugere o melhor hor\xE1rio lendo a agenda inteira." }
+    ],
     dependencies: [],
     // Os FATOS da agenda — só expostos enquanto o módulo está ATIVO.
     events: buildAgendaDomainEvents(),