@elevasis/ui 2.22.0 → 2.24.0

package/dist/{chunk-IOTLB6ND.js → chunk-VGNAV3TH.js}

@@ -4,16 +4,18 @@ import { SubshellNavItem } from './chunk-CEWTOKE7.js';
 import { SubshellSidebarSection } from './chunk-IIMU5YAJ.js';
 import { FilterBar } from './chunk-PDHTXPSF.js';
 import { CustomModal } from './chunk-KVJ3LFH2.js';
-import { useDealTasksDue, useDealsLookup, useCreateDealTask, useDealsSummary, useDeleteDeal, usePaginationState, useDeals, useTableSort, sortData, useTableSelection, useDealDetail, useCompany } from './chunk-B4FHWKEF.js';
+import { useExecuteAction, useDealTasksDue, useDealsLookup, useCreateDealTask, useDealsSummary, useDeleteDeal, usePaginationState, useDeals, useTableSort, sortData, useTableSelection, useDealDetail, useCompany } from './chunk-QULLZ5PE.js';
+import { useCrmActions, deriveActions } from './chunk-UDJE54WN.js';
 import { SubshellContentContainer } from './chunk-TKAYX2SP.js';
 import { CenteredErrorState, CardHeader, PageTitleCaption, EmptyState, ActivityTimeline } from './chunk-XUYBOO32.js';
 import { useRouterContext } from './chunk-Q7DJKLEN.js';
 import { PAGE_SIZE_DEFAULT, formatTimeAgo } from './chunk-SGXXJE52.js';
 import { useElevasisServices } from './chunk-IRW7JMQ4.js';
-import { Box, Stack, Group, Text, Badge, Center, Loader, UnstyledButton, Button, Modal, Title, Select, TextInput, Textarea, Paper, Alert, SimpleGrid, Table, Checkbox, Pagination, ActionIcon, Tabs, Card, Code, Divider, Anchor } from '@mantine/core';
-import { IconLayoutGrid, IconColumns, IconFileInvoice, IconAddressBook, IconTrophy, IconClockExclamation, IconUser, IconPlus, IconChecklist, IconAlertCircle, IconHistory, IconSearch, IconTargetArrow, IconAlertTriangle, IconArrowLeft, IconFileText, IconTrash, IconX, IconBuilding, IconCheckbox, IconCalendar, IconMail, IconPhone, IconArrowRight, IconNote } from '@tabler/icons-react';
+import { Button, Modal, Stack, NumberInput, Switch, Select, Textarea, TextInput, Group, Alert, Text, Box, Badge, Center, Loader, UnstyledButton, Title, Paper, Table, SimpleGrid, Checkbox, Pagination, ActionIcon, Tabs, Card, Code, Divider, CopyButton, Tooltip } from '@mantine/core';
+import { IconLayoutGrid, IconColumns, IconFileInvoice, IconAddressBook, IconAlertCircle, IconTrophy, IconClockExclamation, IconUser, IconPlus, IconChecklist, IconHistory, IconSearch, IconTargetArrow, IconAlertTriangle, IconArrowLeft, IconFileText, IconTrash, IconX, IconBuilding, IconCheckbox, IconCalendar, IconMail, IconPhone, IconArrowRight, IconNote, IconCheck, IconCopy } from '@tabler/icons-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useMemo, useEffect } from 'react';
+import { useForm } from '@mantine/form';
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 
@@ -43,6 +45,282 @@ var SAVED_VIEW_PRESETS = [
     urlFilters: { stage: "closed_won" }
   }
 ];
+function ActionButton({ action, dealId }) {
+  const executeAction = useExecuteAction({ dealId });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "light",
+      size: "sm",
+      loading: executeAction.isPending,
+      onClick: () => executeAction.mutate({ key: action.key }),
+      children: action.label
+    }
+  );
+}
+function getType(schema) {
+  const zodSchema = schema;
+  return zodSchema._def?.type ?? zodSchema._def?.typeName ?? "";
+}
+function unwrapField(schema) {
+  const type = getType(schema);
+  if (type === "optional" || type === "ZodOptional") {
+    const inner = schema._def?.innerType;
+    if (!inner) return { schema, required: false, nullable: false, defaultValue: void 0 };
+    return { ...unwrapField(inner), required: false };
+  }
+  if (type === "nullable" || type === "ZodNullable") {
+    const inner = schema._def?.innerType;
+    if (!inner) return { schema, required: true, nullable: true, defaultValue: null };
+    return { ...unwrapField(inner), nullable: true };
+  }
+  if (type === "default" || type === "ZodDefault") {
+    const def = schema._def;
+    const inner = def?.innerType;
+    const defaultValue = typeof def?.defaultValue === "function" ? def.defaultValue() : def?.defaultValue;
+    if (!inner) return { schema, required: false, nullable: false, defaultValue };
+    return { ...unwrapField(inner), required: false, defaultValue };
+  }
+  return { schema, required: true, nullable: false, defaultValue: void 0 };
+}
+function getObjectShape(schema) {
+  const zodSchema = schema;
+  const type = getType(schema);
+  if (type !== "object" && type !== "ZodObject") {
+    return null;
+  }
+  const shape = zodSchema.shape;
+  if (!shape || typeof shape !== "object" || Array.isArray(shape)) {
+    return null;
+  }
+  return shape;
+}
+function getEnumValues(schema) {
+  const zodSchema = schema;
+  const values = zodSchema.options ?? zodSchema._def?.values ?? Object.values(zodSchema._def?.entries ?? {});
+  if (!Array.isArray(values) || values.some((value) => typeof value !== "string")) {
+    return null;
+  }
+  return values;
+}
+function labelForField(name) {
+  return name.replace(/[_-]+/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/^./, (s) => s.toUpperCase());
+}
+function isLongTextField(name) {
+  return ["body", "message", "reply", "replyBody", "emailBody"].includes(name);
+}
+function initialValueFor(field, defaultValue) {
+  if (defaultValue !== void 0) {
+    if (field.kind === "date" && defaultValue instanceof Date) {
+      return defaultValue.toISOString().slice(0, 10);
+    }
+    return defaultValue;
+  }
+  switch (field.kind) {
+    case "boolean":
+      return false;
+    case "number":
+      return field.required ? 0 : "";
+    case "enum":
+      return field.required ? field.enumValues?.[0] ?? "" : "";
+    case "date":
+    case "dateString":
+    case "string":
+      return "";
+  }
+}
+function describeSchema(schema) {
+  if (!schema) {
+    return { supported: false, reason: "This action does not define a payload schema." };
+  }
+  const shape = getObjectShape(schema);
+  if (!shape) {
+    return { supported: false, reason: "This action requires a payload schema that is not a flat object." };
+  }
+  const fields = [];
+  const initialValues = {};
+  for (const [name, rawFieldSchema] of Object.entries(shape)) {
+    const { schema: fieldSchema, required, nullable, defaultValue } = unwrapField(rawFieldSchema);
+    const type = getType(fieldSchema);
+    const zodField = fieldSchema;
+    const stringFormat = zodField._def?.format;
+    let descriptor = null;
+    if (type === "string" || type === "ZodString") {
+      descriptor = {
+        name,
+        label: labelForField(name),
+        kind: stringFormat === "date" ? "dateString" : "string",
+        schema: rawFieldSchema,
+        required,
+        nullable
+      };
+    } else if (type === "number" || type === "ZodNumber") {
+      descriptor = { name, label: labelForField(name), kind: "number", schema: rawFieldSchema, required, nullable };
+    } else if (type === "boolean" || type === "ZodBoolean") {
+      descriptor = { name, label: labelForField(name), kind: "boolean", schema: rawFieldSchema, required, nullable };
+    } else if (type === "enum" || type === "ZodEnum") {
+      const enumValues = getEnumValues(fieldSchema);
+      if (!enumValues) {
+        return { supported: false, reason: `Field "${name}" uses an enum shape that is not supported by this form.` };
+      }
+      descriptor = {
+        name,
+        label: labelForField(name),
+        kind: "enum",
+        schema: rawFieldSchema,
+        required,
+        nullable,
+        enumValues
+      };
+    } else if (type === "date" || type === "ZodDate") {
+      descriptor = { name, label: labelForField(name), kind: "date", schema: rawFieldSchema, required, nullable };
+    }
+    if (!descriptor) {
+      return {
+        supported: false,
+        reason: `Field "${name}" is not supported. CRM action forms currently support only flat string, number, boolean, enum, and date fields.`
+      };
+    }
+    const field = { ...descriptor, defaultValue: initialValueFor(descriptor, defaultValue) };
+    fields.push(field);
+    initialValues[name] = field.defaultValue;
+  }
+  return { supported: true, fields, initialValues };
+}
+function normalizeValue(field, value) {
+  const isEmpty = value === "" || value === void 0 || value === null;
+  if (isEmpty) {
+    if (!field.required) return void 0;
+    if (field.nullable) return null;
+    return value;
+  }
+  if (field.kind === "date") {
+    const acceptsString = (field.schema._def?.coerce ?? false) === true;
+    return acceptsString ? value : new Date(String(value));
+  }
+  return value;
+}
+function buildPayload(fields, values) {
+  return fields.reduce((payload, field) => {
+    const value = normalizeValue(field, values[field.name]);
+    if (value !== void 0 || field.required) {
+      payload[field.name] = value;
+    }
+    return payload;
+  }, {});
+}
+function ActionFormButton({ action, dealId }) {
+  const [opened, setOpened] = useState(false);
+  const executeAction = useExecuteAction({ dealId });
+  const schemaDescription = describeSchema(action.payloadSchema);
+  const form = useForm({
+    initialValues: schemaDescription.supported ? schemaDescription.initialValues : {}
+  });
+  const handleClose = () => {
+    setOpened(false);
+    form.reset();
+    form.clearErrors();
+  };
+  const handleSubmit = form.onSubmit(async (values) => {
+    if (!schemaDescription.supported || !action.payloadSchema) return;
+    form.clearErrors();
+    const payload = buildPayload(schemaDescription.fields, values);
+    const parsed = action.payloadSchema.safeParse(payload);
+    if (!parsed.success) {
+      const formErrors = {};
+      for (const issue of parsed.error.issues) {
+        const fieldName = issue.path[0];
+        if (typeof fieldName === "string" && schemaDescription.fields.some((field) => field.name === fieldName)) {
+          formErrors[fieldName] = issue.message;
+        }
+      }
+      form.setErrors(formErrors);
+      return;
+    }
+    await executeAction.mutateAsync({ key: action.key, payload: parsed.data });
+    handleClose();
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { variant: "light", size: "sm", onClick: () => setOpened(true), children: action.label }),
+    /* @__PURE__ */ jsx(Modal, { opened, onClose: handleClose, title: action.label, size: "xl", children: schemaDescription.supported ? /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+      schemaDescription.fields.map((field) => {
+        if (field.kind === "number") {
+          return /* @__PURE__ */ jsx(
+            NumberInput,
+            {
+              label: field.label,
+              required: field.required,
+              disabled: executeAction.isPending,
+              error: form.errors[field.name],
+              ...form.getInputProps(field.name)
+            },
+            field.name
+          );
+        }
+        if (field.kind === "boolean") {
+          return /* @__PURE__ */ jsx(
+            Switch,
+            {
+              label: field.label,
+              disabled: executeAction.isPending,
+              error: form.errors[field.name],
+              ...form.getInputProps(field.name, { type: "checkbox" })
+            },
+            field.name
+          );
+        }
+        if (field.kind === "enum") {
+          return /* @__PURE__ */ jsx(
+            Select,
+            {
+              label: field.label,
+              required: field.required,
+              disabled: executeAction.isPending,
+              data: field.enumValues ?? [],
+              error: form.errors[field.name],
+              ...form.getInputProps(field.name)
+            },
+            field.name
+          );
+        }
+        if (field.kind === "string" && isLongTextField(field.name)) {
+          return /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              label: field.label,
+              required: field.required,
+              disabled: executeAction.isPending,
+              error: form.errors[field.name],
+              autosize: true,
+              minRows: 6,
+              ...form.getInputProps(field.name)
+            },
+            field.name
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            label: field.label,
+            type: field.kind === "date" || field.kind === "dateString" ? "date" : "text",
+            required: field.required,
+            disabled: executeAction.isPending,
+            error: form.errors[field.name],
+            ...form.getInputProps(field.name)
+          },
+          field.name
+        );
+      }),
+      /* @__PURE__ */ jsxs(Group, { justify: "flex-end", gap: "sm", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "default", onClick: handleClose, disabled: executeAction.isPending, children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", loading: executeAction.isPending, children: action.label })
+      ] })
+    ] }) }) : /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+      /* @__PURE__ */ jsx(Alert, { color: "yellow", variant: "light", icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: 16 }), title: "Unsupported action form", children: /* @__PURE__ */ jsx(Text, { size: "sm", children: schemaDescription.reason }) }),
+      /* @__PURE__ */ jsx(Button, { variant: "default", onClick: handleClose, disabled: executeAction.isPending, children: "Close" })
+    ] }) })
+  ] });
+}
 var KIND_ICONS = {
   call: IconPhone,
   email: IconMail,
@@ -63,7 +341,7 @@ function formatDueLabel(dueAt) {
   return `in ${diffDays}d`;
 }
 function TaskRow({ task, onClick }) {
-  const KindIcon2 = KIND_ICONS[task.kind];
+  const KindIcon = KIND_ICONS[task.kind];
   const dueLabel = formatDueLabel(task.dueAt);
   const isOverdue = task.dueAt !== null && new Date(task.dueAt) < /* @__PURE__ */ new Date();
   return /* @__PURE__ */ jsx(
@@ -84,7 +362,7 @@ function TaskRow({ task, onClick }) {
         e.currentTarget.style.backgroundColor = "transparent";
       },
       children: /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
-        /* @__PURE__ */ jsx(KindIcon2, { size: 14, style: { color: "var(--color-text-dimmed)", flexShrink: 0 } }),
+        /* @__PURE__ */ jsx(KindIcon, { size: 14, style: { color: "var(--color-text-dimmed)", flexShrink: 0 } }),
         /* @__PURE__ */ jsx(Text, { size: "xs", truncate: true, style: { flex: 1, minWidth: 0 }, children: task.title }),
         dueLabel && /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: isOverdue ? "red" : "gray", style: { flexShrink: 0 }, children: dueLabel })
       ] })
@@ -381,11 +659,35 @@ function useRecentCrmActivity(opts) {
     error: query.error
   };
 }
-var currencyFormatter = new Intl.NumberFormat("en-US", {
-  style: "currency",
-  currency: "USD",
-  maximumFractionDigits: 0
-});
+
+// src/features/crm/pages/shared.ts
+var DEAL_STAGE_COLORS = {
+  interested: "blue",
+  proposal: "yellow",
+  closing: "orange",
+  closed_won: "green",
+  closed_lost: "red",
+  nurturing: "grape"
+};
+var DEAL_STAGE_OPTIONS = [
+  { value: "interested", label: "Interested" },
+  { value: "proposal", label: "Proposal" },
+  { value: "closing", label: "Closing" },
+  { value: "closed_won", label: "Closed Won" },
+  { value: "closed_lost", label: "Closed Lost" },
+  { value: "nurturing", label: "Nurturing" }
+];
+function formatDealStageLabel(stage) {
+  if (!stage) return "Unknown";
+  return stage.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+var BOOKING_PAGE_URL = "https://elevasis.io/inbound/book";
+function buildBookingUrl(opts = {}) {
+  const params = new URLSearchParams();
+  if (opts.dealId) params.set("dealId", opts.dealId);
+  if (opts.contactId) params.set("contactId", opts.contactId);
+  return params.size > 0 ? `${BOOKING_PAGE_URL}?${params.toString()}` : BOOKING_PAGE_URL;
+}
 var STAGE_LABELS = {
   interested: "Interested",
   proposal: "Proposal",
@@ -403,143 +705,54 @@ function PipelineFunnelWidget({ onStageClick, getDealValue }) {
     return /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "md", children: /* @__PURE__ */ jsx(CenteredErrorState, { error, title: "Failed to load pipeline data" }) });
   }
   const totalDeals = data.reduce((sum, s) => sum + s.count, 0);
-  const maxCount = Math.max(...data.map((s) => s.count), 1);
-  if (totalDeals === 0) {
-    return /* @__PURE__ */ jsxs(Paper, { withBorder: true, p: "md", children: [
-      /* @__PURE__ */ jsx(CardHeader, { icon: /* @__PURE__ */ jsx(IconColumns, { size: 16 }), title: "Pipeline" }),
-      /* @__PURE__ */ jsx(Center, { h: 200, children: /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconAlertCircle, {}), color: "gray", variant: "light", children: "No deals in the pipeline yet" }) })
-    ] });
-  }
   return /* @__PURE__ */ jsxs(Paper, { withBorder: true, p: "md", children: [
     /* @__PURE__ */ jsx(
       CardHeader,
       {
         icon: /* @__PURE__ */ jsx(IconColumns, { size: 16 }),
         title: "Pipeline",
-        subtitle: `${totalDeals} deal${totalDeals !== 1 ? "s" : ""} total`
+        subtitle: totalDeals === 0 ? "No deals in the pipeline yet" : `${totalDeals} deal${totalDeals !== 1 ? "s" : ""} total`
       }
     ),
-    /* @__PURE__ */ jsx(Box, { children: PIPELINE_FUNNEL_ORDER.map((stage) => {
+    /* @__PURE__ */ jsx(Group, { gap: "lg", wrap: "nowrap", mt: "md", children: PIPELINE_FUNNEL_ORDER.map((stage) => {
       const summary = data.find((s) => s.stage === stage);
       const isEmpty = summary.count === 0;
-      const barWidth = isEmpty ? 2 : Math.max(4, summary.count / maxCount * 100);
-      return /* @__PURE__ */ jsx(
+      const stageColor = DEAL_STAGE_COLORS[stage] ?? "gray";
+      const accent = `var(--mantine-color-${stageColor}-6)`;
+      return /* @__PURE__ */ jsxs(
         Box,
         {
           onClick: () => onStageClick(stage),
           style: {
+            flex: 1,
+            minWidth: 0,
             cursor: "pointer",
-            borderRadius: "var(--mantine-radius-sm)",
-            padding: "6px 8px",
-            transition: `background-color var(--duration-fast) var(--easing)`,
-            marginBottom: 4
+            padding: "4px 0"
           },
-          onMouseEnter: (e) => {
-            e.currentTarget.style.backgroundColor = "var(--color-surface-hover)";
-          },
-          onMouseLeave: (e) => {
-            e.currentTarget.style.backgroundColor = "transparent";
-          },
-          children: /* @__PURE__ */ jsxs(Group, { gap: "sm", wrap: "nowrap", children: [
-            /* @__PURE__ */ jsx(Text, { size: "sm", c: isEmpty ? "dimmed" : void 0, style: { width: 130, flexShrink: 0 }, children: STAGE_LABELS[stage] }),
-            /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "light", color: isEmpty ? "gray" : void 0, style: { flexShrink: 0 }, children: summary.count }),
-            /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "outline", color: isEmpty ? "gray" : "teal", style: { flexShrink: 0 }, children: currencyFormatter.format(summary.totalValue) }),
-            /* @__PURE__ */ jsx(Box, { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx(
-              Box,
-              {
-                style: {
-                  height: 8,
-                  width: `${barWidth}%`,
-                  borderRadius: 4,
-                  backgroundColor: isEmpty ? "var(--color-border)" : "color-mix(in srgb, var(--color-primary) 70%, transparent)",
-                  opacity: isEmpty ? 0.4 : 1,
-                  transition: `width var(--duration-normal) var(--easing)`
+          children: [
+            /* @__PURE__ */ jsxs(Group, { gap: 8, wrap: "nowrap", align: "center", mb: 6, children: [
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  style: {
+                    width: 8,
+                    height: 8,
+                    borderRadius: "50%",
+                    background: accent,
+                    flexShrink: 0
+                  }
                 }
-              }
-            ) })
-          ] })
+              ),
+              /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", truncate: true, children: STAGE_LABELS[stage] })
+            ] }),
+            /* @__PURE__ */ jsx(Text, { size: "xl", fw: 600, c: isEmpty ? "dimmed" : void 0, lh: 1, children: summary.count })
+          ]
         },
         stage
       );
     }) })
   ] });
 }
-var MAX_VISIBLE = 5;
-function KindIcon({ kind }) {
-  const size = 16;
-  switch (kind) {
-    case "call":
-      return /* @__PURE__ */ jsx(IconPhone, { size });
-    case "email":
-      return /* @__PURE__ */ jsx(IconMail, { size });
-    case "meeting":
-      return /* @__PURE__ */ jsx(IconCalendar, { size });
-    default:
-      return /* @__PURE__ */ jsx(IconCheckbox, { size });
-  }
-}
-function formatDueDate(dueAt) {
-  if (!dueAt) return "No due date";
-  return new Date(dueAt).toLocaleDateString();
-}
-function TasksDueWidget({ onTaskClick, onSeeAll }) {
-  const { data: tasks, isLoading, error } = useDealTasksDue({ window: "today_and_overdue" });
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "md", children: /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "md", children: /* @__PURE__ */ jsx(CenteredErrorState, { error, title: "Failed to load tasks" }) });
-  }
-  const totalCount = tasks?.length ?? 0;
-  const visibleTasks = (tasks ?? []).slice(0, MAX_VISIBLE);
-  const hasMore = totalCount > MAX_VISIBLE;
-  const seeAllLink = onSeeAll && hasMore ? /* @__PURE__ */ jsxs(Anchor, { size: "sm", onClick: onSeeAll, style: { cursor: "pointer" }, children: [
-    "See all (",
-    totalCount,
-    ")"
-  ] }) : void 0;
-  if (totalCount === 0) {
-    return /* @__PURE__ */ jsxs(Paper, { withBorder: true, p: "md", children: [
-      /* @__PURE__ */ jsx(CardHeader, { icon: /* @__PURE__ */ jsx(IconChecklist, { size: 16 }), title: "Tasks Due" }),
-      /* @__PURE__ */ jsx(Center, { h: 120, children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "No tasks due today" }) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Paper, { withBorder: true, p: "md", children: [
-    /* @__PURE__ */ jsx(
-      CardHeader,
-      {
-        icon: /* @__PURE__ */ jsx(IconChecklist, { size: 16 }),
-        title: "Tasks Due",
-        subtitle: `${totalCount} task${totalCount !== 1 ? "s" : ""}`,
-        rightSection: seeAllLink
-      }
-    ),
-    /* @__PURE__ */ jsx(Stack, { gap: "xs", children: visibleTasks.map((task) => /* @__PURE__ */ jsx(
-      Box,
-      {
-        onClick: () => onTaskClick(task.dealId),
-        style: {
-          cursor: "pointer",
-          borderRadius: "var(--mantine-radius-sm)",
-          padding: "6px 8px",
-          transition: `background-color var(--duration-fast) var(--easing)`
-        },
-        onMouseEnter: (e) => {
-          e.currentTarget.style.backgroundColor = "var(--color-surface-hover)";
-        },
-        onMouseLeave: (e) => {
-          e.currentTarget.style.backgroundColor = "transparent";
-        },
-        children: /* @__PURE__ */ jsxs(Group, { gap: "sm", wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx(Text, { c: "dimmed", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(KindIcon, { kind: task.kind }) }),
-          /* @__PURE__ */ jsx(Text, { size: "sm", style: { flex: 1, minWidth: 0 }, truncate: true, children: task.title }),
-          /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: "gray", style: { flexShrink: 0 }, children: formatDueDate(task.dueAt) })
-        ] })
-      },
-      task.id
-    )) })
-  ] });
-}
 function ActivityKindIcon({ kind }) {
   const size = 16;
   switch (kind) {
@@ -578,41 +791,28 @@ function ActivityFeedWidget({ onDealClick, limit }) {
       /* @__PURE__ */ jsx(Center, { h: 120, children: /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconAlertCircle, {}), color: "gray", variant: "light", children: "No recent activity" }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs(Paper, { withBorder: true, p: "md", children: [
+  return /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "md", children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
     /* @__PURE__ */ jsx(CardHeader, { icon: /* @__PURE__ */ jsx(IconHistory, { size: 16 }), title: "Recent Activity" }),
-    /* @__PURE__ */ jsx(Stack, { gap: 4, children: data.map((entry) => {
-      const name = entry.contactName ?? entry.companyName ?? "Unknown";
-      return /* @__PURE__ */ jsx(
-        Box,
-        {
-          onClick: () => onDealClick(entry.dealId),
-          style: {
-            cursor: "pointer",
-            borderRadius: "var(--mantine-radius-sm)",
-            padding: "6px 8px",
-            transition: `background-color var(--duration-fast) var(--easing)`
-          },
-          onMouseEnter: (e) => {
-            e.currentTarget.style.backgroundColor = "var(--color-surface-hover)";
-          },
-          onMouseLeave: (e) => {
-            e.currentTarget.style.backgroundColor = "transparent";
-          },
-          children: /* @__PURE__ */ jsxs(Group, { gap: "sm", wrap: "nowrap", align: "flex-start", children: [
-            /* @__PURE__ */ jsx(Text, { c: "dimmed", style: { flexShrink: 0, paddingTop: 2 }, children: /* @__PURE__ */ jsx(ActivityKindIcon, { kind: entry.kind }) }),
-            /* @__PURE__ */ jsx(Box, { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
-              /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, truncate: true, style: { flexShrink: 0, maxWidth: 140 }, children: name }),
-              /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", truncate: true, style: { flex: 1, minWidth: 0 }, children: entry.description })
-            ] }) }),
-            /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: { flexShrink: 0, whiteSpace: "nowrap" }, children: formatRelativeTime(entry.occurredAt) })
-          ] })
-        },
-        entry.id
-      );
-    }) })
-  ] });
+    /* @__PURE__ */ jsxs(Table, { highlightOnHover: true, children: [
+      /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+        /* @__PURE__ */ jsx(Table.Th, { w: 40 }),
+        /* @__PURE__ */ jsx(Table.Th, { children: "Name" }),
+        /* @__PURE__ */ jsx(Table.Th, { children: "Activity" }),
+        /* @__PURE__ */ jsx(Table.Th, { w: 120, children: "When" })
+      ] }) }),
+      /* @__PURE__ */ jsx(Table.Tbody, { children: data.map((entry) => {
+        const name = entry.contactName ?? entry.companyName ?? "Unknown";
+        return /* @__PURE__ */ jsxs(Table.Tr, { style: { cursor: "pointer" }, onClick: () => onDealClick(entry.dealId), children: [
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { c: "dimmed", component: "span", children: /* @__PURE__ */ jsx(ActivityKindIcon, { kind: entry.kind }) }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, truncate: true, children: name }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", truncate: true, children: entry.description }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: { whiteSpace: "nowrap" }, children: formatRelativeTime(entry.occurredAt) }) })
+        ] }, entry.id);
+      }) })
+    ] })
+  ] }) });
 }
-var currencyFormatter2 = new Intl.NumberFormat("en-US", {
+var currencyFormatter = new Intl.NumberFormat("en-US", {
   style: "currency",
   currency: "USD",
   maximumFractionDigits: 0
@@ -629,7 +829,7 @@ function StatTile({ label, value }) {
 function MetricsStrip() {
   const { data } = useCrmQuickMetrics();
   return /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "md", children: /* @__PURE__ */ jsxs(SimpleGrid, { cols: { base: 2, sm: 4 }, children: [
-    /* @__PURE__ */ jsx(StatTile, { label: "Total Pipeline Value", value: currencyFormatter2.format(data.totalPipelineValue) }),
+    /* @__PURE__ */ jsx(StatTile, { label: "Total Pipeline Value", value: currencyFormatter.format(data.totalPipelineValue) }),
     /* @__PURE__ */ jsx(StatTile, { label: "Win Rate", value: formatPercent(data.winRate) }),
     /* @__PURE__ */ jsx(StatTile, { label: "Open Deals", value: String(data.openDeals) }),
     /* @__PURE__ */ jsx(StatTile, { label: "Won This Period", value: String(data.wonDeals) })
@@ -653,13 +853,8 @@ function CrmOverview({
       }
     ),
     /* @__PURE__ */ jsx(MetricsStrip, {}),
-    /* @__PURE__ */ jsxs(SimpleGrid, { cols: { base: 1, lg: 2 }, spacing: "md", children: [
-      /* @__PURE__ */ jsx(PipelineFunnelWidget, { onStageClick, getDealValue }),
-      /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
-        /* @__PURE__ */ jsx(TasksDueWidget, { onTaskClick: onDealClick }),
-        /* @__PURE__ */ jsx(ActivityFeedWidget, { onDealClick })
-      ] })
-    ] })
+    /* @__PURE__ */ jsx(PipelineFunnelWidget, { onStageClick, getDealValue }),
+    /* @__PURE__ */ jsx(ActivityFeedWidget, { onDealClick })
   ] });
 }
 var crmManifest = {
@@ -669,33 +864,11 @@ var crmManifest = {
   icon: IconAddressBook,
   sidebar: CrmSidebar
 };
-
-// src/features/crm/pages/shared.ts
-var DEAL_STAGE_COLORS = {
-  interested: "blue",
-  proposal: "yellow",
-  closing: "orange",
-  closed_won: "green",
-  closed_lost: "red",
-  nurturing: "grape"
-};
-var DEAL_STAGE_OPTIONS = [
-  { value: "interested", label: "Interested" },
-  { value: "proposal", label: "Proposal" },
-  { value: "closing", label: "Closing" },
-  { value: "closed_won", label: "Closed Won" },
-  { value: "closed_lost", label: "Closed Lost" },
-  { value: "nurturing", label: "Nurturing" }
-];
-function formatDealStageLabel(stage) {
-  if (!stage) return "Unknown";
-  return stage.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
-}
 var sortAccessors = {
   company: (deal) => deal.contact?.company?.name || deal.discovery_data?.company || deal.contact_email?.split("@")[1] || "",
   contact: (deal) => [deal.contact?.first_name, deal.contact?.last_name].filter(Boolean).join(" ") || "",
   email: (deal) => deal.contact_email || "",
-  stage: (deal) => deal.cached_stage || "",
+  stage: (deal) => deal.stage_key || "",
   updated: (deal) => deal.updated_at || ""
 };
 function DealsListPage() {
@@ -705,7 +878,12 @@ function DealsListPage() {
   const [searchQuery, setSearchQuery] = useState("");
   const [showBatchDelete, setShowBatchDelete] = useState(false);
   const pagination = usePaginationState(PAGE_SIZE_DEFAULT, [stageFilter, searchQuery]);
-  const { data: deals, total, isLoading, error } = useDeals({
+  const {
+    data: deals,
+    total,
+    isLoading,
+    error
+  } = useDeals({
     stage: stageFilter || void 0,
     search: searchQuery || void 0,
     limit: PAGE_SIZE_DEFAULT,
@@ -800,7 +978,7 @@ function DealsListPage() {
                   /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { fw: 500, children: companyName }) }),
                   /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: contactName || "-" }) }),
                   /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: deal.contact_email || "-" }) }),
-                  /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { variant: "light", color: DEAL_STAGE_COLORS[deal.cached_stage || ""] || "gray", size: "sm", children: formatDealStageLabel(deal.cached_stage) }) }),
+                  /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { variant: "light", color: DEAL_STAGE_COLORS[deal.stage_key || ""] || "gray", size: "sm", children: formatDealStageLabel(deal.stage_key) }) }),
                   /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: formatTimeAgo(deal.updated_at) }) })
                 ]
               },
@@ -852,11 +1030,31 @@ function DealsListPage() {
     )
   ] });
 }
+function BookingLinkPanel({ dealId, contactId }) {
+  const url = buildBookingUrl({ dealId, contactId });
+  return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsx(Title, { order: 4, children: "Booking Link" }),
+    /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          size: "sm",
+          c: "var(--color-primary)",
+          style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+          children: url
+        }
+      ),
+      /* @__PURE__ */ jsx(CopyButton, { value: url, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, children: /* @__PURE__ */ jsx(ActionIcon, { variant: "light", color: copied ? "teal" : void 0, onClick: copy, children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 16 }) : /* @__PURE__ */ jsx(IconCopy, { size: 16 }) }) }) })
+    ] })
+  ] }) });
+}
 function DealDetailPage({ dealId, renderActions, onDealLoaded }) {
   const navigate = useNavigate();
   const deleteDeal = useDeleteDeal();
   const { data: deal, isLoading, error } = useDealDetail(dealId);
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  const crmActions = useCrmActions();
+  const actions = useMemo(() => deal ? deriveActions(deal, crmActions) : [], [deal, crmActions]);
   useEffect(() => {
     if (deal) onDealLoaded?.(deal);
   }, [deal, onDealLoaded]);
@@ -889,9 +1087,21 @@ function DealDetailPage({ dealId, renderActions, onDealLoaded }) {
         children: "View Proposal"
       }
     ),
+    actions.map(
+      (action) => action.payloadSchema ? /* @__PURE__ */ jsx(ActionFormButton, { action, dealId: deal.id }, action.key) : /* @__PURE__ */ jsx(ActionButton, { action, dealId: deal.id }, action.key)
+    ),
     renderActions?.(deal),
     /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", color: "red", onClick: () => setDeleteModalOpen(true), children: /* @__PURE__ */ jsx(IconTrash, { size: 16 }) })
-  ] }) : /* @__PURE__ */ jsx(Button, { variant: "light", size: "sm", leftSection: /* @__PURE__ */ jsx(IconArrowLeft, { size: 16 }), onClick: () => navigate({ to: "/crm/deals" }), children: "Deals" });
+  ] }) : /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "light",
+      size: "sm",
+      leftSection: /* @__PURE__ */ jsx(IconArrowLeft, { size: 16 }),
+      onClick: () => navigate({ to: "/crm/deals" }),
+      children: "Deals"
+    }
+  );
   if (isLoading) {
     return /* @__PURE__ */ jsx(SubshellContentContainer, { children: /* @__PURE__ */ jsxs(PageContainer, { children: [
       /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsx(PageTitleCaption, { title, caption: "Loading deal details...", rightSection: headerActions }) }),
@@ -916,7 +1126,7 @@ function DealDetailPage({ dealId, renderActions, onDealLoaded }) {
       PageTitleCaption,
       {
         title,
-        caption: `${companyName || "Unknown"} - ${formatDealStageLabel(deal.cached_stage)}`,
+        caption: `${companyName || "Unknown"} - ${formatDealStageLabel(deal.stage_key)}`,
         rightSection: headerActions
       }
     ) }),
@@ -931,7 +1141,7 @@ function DealDetailPage({ dealId, renderActions, onDealLoaded }) {
           /* @__PURE__ */ jsx(Title, { order: 4, children: "Deal" }),
           /* @__PURE__ */ jsxs(Group, { children: [
             /* @__PURE__ */ jsx(Text, { fw: 500, children: "Stage:" }),
-            /* @__PURE__ */ jsx(Badge, { color: DEAL_STAGE_COLORS[deal.cached_stage || ""] || "gray", children: formatDealStageLabel(deal.cached_stage) })
+            /* @__PURE__ */ jsx(Badge, { color: DEAL_STAGE_COLORS[deal.stage_key || ""] || "gray", children: formatDealStageLabel(deal.stage_key) })
           ] }),
           /* @__PURE__ */ jsxs(Group, { children: [
             /* @__PURE__ */ jsx(Text, { fw: 500, children: "Sent:" }),
@@ -974,6 +1184,7 @@ function DealDetailPage({ dealId, renderActions, onDealLoaded }) {
             ] })
           ] })
         ] }) }),
+        deal.contact_id && /* @__PURE__ */ jsx(BookingLinkPanel, { dealId: deal.id, contactId: deal.contact_id }),
         /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
           /* @__PURE__ */ jsx(Title, { order: 4, children: "Company" }),
           /* @__PURE__ */ jsxs(SimpleGrid, { cols: { base: 1, sm: 2 }, spacing: "sm", children: [
@@ -1003,7 +1214,7 @@ function DealDetailPage({ dealId, renderActions, onDealLoaded }) {
             ] })
           ] })
         ] }) }),
-        ["proposal_signed", "payment_sent", "closed_won"].includes(deal.cached_stage || "") && /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+        ["closing", "closed_won"].includes(deal.stage_key || "") && /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
           /* @__PURE__ */ jsx(Title, { order: 4, children: "Payment" }),
           /* @__PURE__ */ jsxs(SimpleGrid, { cols: { base: 1, sm: 2 }, spacing: "sm", children: [
             /* @__PURE__ */ jsxs(Group, { children: [
@@ -1188,4 +1399,4 @@ function CompanyDetailPage({ companyId }) {
   ] }) });
 }
 
-export { ActivityFeedWidget, CRM_ITEMS, CompanyDetailPage, CrmOverview, CrmSidebar, CrmSidebarMiddle, CrmSidebarTop, DEAL_STAGE_COLORS, DEAL_STAGE_OPTIONS, DealDetailPage, DealsListPage, MetricsStrip, MyTasksPanel, PIPELINE_FUNNEL_ORDER, PipelineFunnelWidget, QuickCreateActions, SAVED_VIEW_PRESETS, SavedViewsPanel, TasksDueWidget, crmManifest, formatDealStageLabel, useCrmPipelineSummary, useCrmQuickMetrics, useRecentCrmActivity };
+export { ActionButton, ActionFormButton, ActivityFeedWidget, CRM_ITEMS, CompanyDetailPage, CrmOverview, CrmSidebar, CrmSidebarMiddle, CrmSidebarTop, DEAL_STAGE_COLORS, DEAL_STAGE_OPTIONS, DealDetailPage, DealsListPage, MetricsStrip, MyTasksPanel, PIPELINE_FUNNEL_ORDER, PipelineFunnelWidget, QuickCreateActions, SAVED_VIEW_PRESETS, SavedViewsPanel, crmManifest, formatDealStageLabel, useCrmPipelineSummary, useCrmQuickMetrics, useRecentCrmActivity };