@fayz-ai/plugin-agenda 0.10.2 → 0.11.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, 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';
@@ -13,7 +13,7 @@ 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 { 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, ConfirmDialog, SearchCombobox, cn, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@fayz-ai/ui';
 import { createStore } from 'zustand/vanilla';
 
 // src/lib/message-events.ts
@@ -962,7 +962,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 +1269,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 +1323,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 +1380,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 +1455,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 +1539,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)) {
@@ -2405,7 +2442,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: [
@@ -2646,6 +2683,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);
@@ -3784,7 +3822,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,
@@ -4201,6 +4243,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 +4465,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",
@@ -5715,7 +5761,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 +8046,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",