@open-mercato/core 0.5.1-develop.2663.2c29774b5b → 0.5.1-develop.2681.c559bb2bc3

package/dist/modules/customers/backend/customers/deals/[id]/page.js

@@ -1,538 +1,591 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { Pencil, MousePointerClick } from "lucide-react";
+import { Building2, Users } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { Page, PageBody } from "@open-mercato/ui/backend/Page";
 import { Button } from "@open-mercato/ui/primitives/button";
-import { FormHeader } from "@open-mercato/ui/backend/forms";
-import { VersionHistoryAction } from "@open-mercato/ui/backend/version-history";
-import { SendObjectMessageDialog } from "@open-mercato/ui/backend/messages";
-import { Spinner } from "@open-mercato/ui/primitives/spinner";
-import { flash } from "@open-mercato/ui/backend/FlashMessages";
-import { apiCallOrThrow, readApiResultOrThrow } from "@open-mercato/ui/backend/utils/apiCall";
-import { useT } from "@open-mercato/shared/lib/i18n/context";
-import { useOrganizationScopeVersion } from "@open-mercato/shared/lib/frontend/useOrganizationScope";
+import { AttachmentsSection, ErrorMessage, LoadingMessage, NotesSection } from "@open-mercato/ui/backend/detail";
+import { InjectionSpot } from "@open-mercato/ui/backend/injection/InjectionSpot";
 import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
-import { NotesSection } from "@open-mercato/ui/backend/detail";
-import { ActivitiesSection } from "../../../../components/detail/ActivitiesSection.js";
-import { DealForm } from "../../../../components/detail/DealForm.js";
-import { useCustomerDictionary } from "../../../../components/detail/hooks/useCustomerDictionary.js";
+import { CollapsibleZoneLayout } from "@open-mercato/ui/backend/crud/CollapsibleZoneLayout";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { createTranslatorWithFallback } from "@open-mercato/shared/lib/i18n/translate";
-import { renderDictionaryColor, renderDictionaryIcon } from "@open-mercato/core/modules/dictionaries/components/dictionaryAppearance";
-import { ICON_SUGGESTIONS } from "../../../../lib/dictionaries.js";
+import { E } from "../../../../../../generated/entities.ids.generated.js";
+import { ActivitiesSection } from "../../../../components/detail/ActivitiesSection.js";
+import { ChangelogTab } from "../../../../components/detail/ChangelogTab.js";
+import { DealClosureActionBar } from "../../../../components/detail/DealClosureActionBar.js";
+import { DealDetailHeader } from "../../../../components/detail/DealDetailHeader.js";
+import { DealDetailTabs, resolveLegacyTab } from "../../../../components/detail/DealDetailTabs.js";
+import { DealForm, useDealAssociationLookups } from "../../../../components/detail/DealForm.js";
+import { DealLinkedEntitiesTab } from "../../../../components/detail/DealLinkedEntitiesTab.js";
+import { ConfirmDealLostDialog } from "../../../../components/detail/ConfirmDealLostDialog.js";
+import { DealLostSummaryDialog } from "../../../../components/detail/DealLostSummaryDialog.js";
+import { DealWonPopup } from "../../../../components/detail/DealWonPopup.js";
+import { InlineActivityComposer } from "../../../../components/detail/InlineActivityComposer.js";
+import { PipelineStepper } from "../../../../components/detail/PipelineStepper.js";
+import { PlannedActivitiesSection } from "../../../../components/detail/PlannedActivitiesSection.js";
+import { ScheduleActivityDialog } from "../../../../components/detail/ScheduleActivityDialog.js";
 import { createCustomerNotesAdapter } from "../../../../components/detail/notesAdapter.js";
 import { readMarkdownPreferenceCookie, writeMarkdownPreferenceCookie } from "../../../../lib/markdownPreference.js";
-const CRUD_FOCUSABLE_SELECTOR = '[data-crud-focus-target], input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
-function formatCurrency(amount, currency) {
-  if (!amount) return null;
-  const value = Number(amount);
-  if (!Number.isFinite(value)) return currency ? `${amount} ${currency}` : amount;
-  if (!currency) return value.toLocaleString();
-  try {
-    return new Intl.NumberFormat(void 0, { style: "currency", currency }).format(value);
-  } catch {
-    return `${value.toLocaleString()} ${currency}`;
-  }
-}
-function formatDate(value, fallback) {
-  if (!value) return fallback;
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return fallback;
-  return date.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
-}
-function resolveDictionaryLabel(value, map) {
-  if (!value) return null;
-  const entry = map?.[value];
-  if (entry && entry.label && entry.label.length) return entry.label;
-  return value;
-}
+import { ICON_SUGGESTIONS } from "../../../../lib/dictionaries.js";
+import { renderDictionaryColor, renderDictionaryIcon } from "@open-mercato/core/modules/dictionaries/components/dictionaryAppearance";
+import { formatCurrency, startOfNextQuarter } from "./hooks/formatters.js";
+import { useDealActivities } from "./hooks/useDealActivities.js";
+import { useDealAssociations } from "./hooks/useDealAssociations.js";
+import { useDealClosure } from "./hooks/useDealClosure.js";
+import { useDealData } from "./hooks/useDealData.js";
+import { useDealFormHandlers } from "./hooks/useDealFormHandlers.js";
+import { useDealInjectedTabs } from "./hooks/useDealInjectedTabs.js";
+import { useDealMutationContext } from "./hooks/useDealMutationContext.js";
+import { useDealPipeline } from "./hooks/useDealPipeline.js";
+import { useScheduleDialog } from "./hooks/useScheduleDialog.js";
 function DealDetailPage({ params }) {
+  const id = params?.id ?? "";
   const t = useT();
+  const router = useRouter();
+  const searchParams = useSearchParams();
   const { confirm, ConfirmDialogElement } = useConfirmDialog();
   const detailTranslator = React.useMemo(() => createTranslatorWithFallback(t), [t]);
-  const notesAdapter = React.useMemo(() => createCustomerNotesAdapter(detailTranslator), [detailTranslator]);
-  const router = useRouter();
-  const id = params?.id ?? "";
-  const scopeVersion = useOrganizationScopeVersion();
-  const statusDictionaryQuery = useCustomerDictionary("deal-statuses", scopeVersion);
-  const pipelineDictionaryQuery = useCustomerDictionary("pipeline-stages", scopeVersion);
-  const statusDictionaryMap = statusDictionaryQuery.data?.map ?? null;
-  const pipelineDictionaryMap = pipelineDictionaryQuery.data?.map ?? null;
-  const [data, setData] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [error, setError] = React.useState(null);
-  const [isSaving, setIsSaving] = React.useState(false);
-  const [isDeleting, setIsDeleting] = React.useState(false);
-  const [reloadToken, setReloadToken] = React.useState(0);
-  const [activeTab, setActiveTab] = React.useState("notes");
-  const [sectionAction, setSectionAction] = React.useState(null);
-  const handleNotesLoadingChange = React.useCallback(() => {
-  }, []);
-  const handleActivitiesLoadingChange = React.useCallback(() => {
-  }, []);
-  const focusDealField = React.useCallback(
-    (fieldId) => {
-      if (typeof window === "undefined" || typeof document === "undefined") return;
-      const focusOnce = () => {
-        const container = document.querySelector(`[data-crud-field-id="${fieldId}"]`);
-        if (!container) return false;
-        const target = container.querySelector(CRUD_FOCUSABLE_SELECTOR) ?? container;
-        if (!target || typeof target.focus !== "function") return false;
-        if (typeof container.scrollIntoView === "function") {
-          container.scrollIntoView({ behavior: "smooth", block: "center" });
-        }
-        target.focus();
-        if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
-          try {
-            target.select();
-          } catch {
-          }
-        }
-        return true;
-      };
-      const schedule = () => {
-        const focused = focusOnce();
-        if (focused) return;
-        window.setTimeout(() => {
-          focusOnce();
-        }, 60);
-      };
-      if (typeof window.requestAnimationFrame === "function") {
-        window.requestAnimationFrame(schedule);
-      } else {
-        schedule();
-      }
-    },
-    []
+  const { data, setData, isLoading, error, loadData } = useDealData(id);
+  const [isDirty, setIsDirty] = React.useState(false);
+  const {
+    scheduleDialogOpen,
+    scheduleEditData,
+    openSchedule,
+    openEdit: openScheduleEdit,
+    closeSchedule
+  } = useScheduleDialog();
+  const formWrapperRef = React.useRef(null);
+  const initialTab = React.useMemo(() => resolveLegacyTab(searchParams?.get("tab")), [searchParams]);
+  const [activeTab, setActiveTab] = React.useState(initialTab);
+  React.useEffect(() => {
+    setActiveTab(initialTab);
+  }, [initialTab]);
+  const currentDealId = data?.deal.id ?? id;
+  const { injectionContext, runMutationWithContext } = useDealMutationContext({
+    currentDealId,
+    fallbackId: id,
+    data
+  });
+  const notesAdapter = React.useMemo(
+    () => createCustomerNotesAdapter(detailTranslator, { runMutation: runMutationWithContext }),
+    [detailTranslator, runMutationWithContext]
   );
-  const dealSettingsRef = React.useRef(null);
-  const scrollToDealSettings = React.useCallback(() => {
-    if (typeof window === "undefined") return;
-    if (dealSettingsRef.current && typeof dealSettingsRef.current.scrollIntoView === "function") {
-      dealSettingsRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
-    }
-    window.setTimeout(() => {
-      focusDealField("title");
-    }, 160);
-  }, [focusDealField]);
+  const { injectedTabs, injectedTabMap } = useDealInjectedTabs({
+    injectionContext,
+    data,
+    setData
+  });
+  const { searchPeoplePage, fetchPeopleByIds, searchCompaniesPage, fetchCompaniesByIds } = useDealAssociationLookups({
+    excludeLinkedDealId: data?.deal.id ?? null
+  });
+  const {
+    plannedActivities,
+    activityRefreshKey,
+    loadPlannedActivities,
+    handleActivityCreated,
+    handleMarkDone,
+    handleCancelActivity
+  } = useDealActivities({ dealId: id, runMutationWithContext });
   React.useEffect(() => {
-    if (!id) {
-      setError(t("customers.deals.detail.missingId", "Deal id is required."));
-      setIsLoading(false);
-      return;
-    }
-    let cancelled = false;
-    async function loadDeal() {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const payload = await readApiResultOrThrow(
-          `/api/customers/deals/${encodeURIComponent(id)}`,
-          void 0,
-          { errorMessage: t("customers.deals.detail.loadError", "Failed to load deal.") }
-        );
-        if (cancelled) return;
-        setData(payload);
-      } catch (err) {
-        if (cancelled) return;
-        const message = err instanceof Error && err.message ? err.message : t("customers.deals.detail.loadError", "Failed to load deal.");
-        setError(message);
-        setData(null);
-      } finally {
-        if (!cancelled) setIsLoading(false);
-      }
-    }
-    loadDeal().catch(() => {
+    void Promise.all([loadData(), loadPlannedActivities()]);
+  }, [loadData, loadPlannedActivities]);
+  const activityEntities = React.useMemo(
+    () => data ? [...data.people, ...data.companies].map((entry) => ({
+      id: entry.id,
+      label: entry.subtitle ? `${entry.label} \xB7 ${entry.subtitle}` : entry.label,
+      kind: entry.kind
+    })) : [],
+    [data]
+  );
+  const [selectedActivityEntityId, setSelectedActivityEntityId] = React.useState(null);
+  React.useEffect(() => {
+    setSelectedActivityEntityId((current) => {
+      if (activityEntities.length === 1) return activityEntities[0].id;
+      if (current && activityEntities.some((entry) => entry.id === current)) return current;
+      return null;
     });
-    return () => {
-      cancelled = true;
-    };
-  }, [id, reloadToken, t]);
-  const handleFormSubmit = React.useCallback(
-    async ({ base, custom }) => {
-      if (!data || isSaving) return;
-      setIsSaving(true);
-      try {
-        const payload = {
-          id: data.deal.id,
-          title: base.title,
-          status: base.status ?? void 0,
-          pipelineStage: base.pipelineStage ?? void 0,
-          pipelineId: base.pipelineId ?? void 0,
-          pipelineStageId: base.pipelineStageId ?? void 0,
-          valueAmount: typeof base.valueAmount === "number" ? base.valueAmount : void 0,
-          valueCurrency: base.valueCurrency ?? void 0,
-          probability: typeof base.probability === "number" ? base.probability : void 0,
-          expectedCloseAt: base.expectedCloseAt ?? void 0,
-          description: base.description ?? void 0,
-          personIds: base.personIds && base.personIds.length ? base.personIds : void 0,
-          companyIds: base.companyIds && base.companyIds.length ? base.companyIds : void 0
-        };
-        if (Object.keys(custom).length) payload.customFields = custom;
-        await apiCallOrThrow(
-          "/api/customers/deals",
-          {
-            method: "PUT",
-            headers: { "content-type": "application/json" },
-            body: JSON.stringify(payload)
-          },
-          { errorMessage: t("customers.deals.detail.saveError", "Failed to update deal.") }
-        );
-        flash(t("customers.deals.detail.saveSuccess", "Deal updated."), "success");
-        setReloadToken((token) => token + 1);
-      } catch (err) {
-        const message = err instanceof Error && err.message ? err.message : t("customers.deals.detail.saveError", "Failed to update deal.");
-        flash(message, "error");
-        throw err instanceof Error ? err : new Error(message);
-      } finally {
-        setIsSaving(false);
-      }
-    },
-    [data, isSaving, t]
+  }, [activityEntities]);
+  const selectedActivityEntity = React.useMemo(
+    () => activityEntities.find((entry) => entry.id === selectedActivityEntityId) ?? null,
+    [activityEntities, selectedActivityEntityId]
+  );
+  const dealOptions = React.useMemo(
+    () => data ? [{ id: data.deal.id, label: data.deal.title || t("customers.deals.detail.untitled", "Untitled deal") }] : [],
+    [data, t]
   );
-  const handleDelete = React.useCallback(async () => {
-    if (!data || isDeleting) return;
-    const confirmed = await confirm({
-      title: t(
-        "customers.deals.detail.deleteConfirm",
-        "Delete this deal? This action cannot be undone."
+  const entityOptions = React.useMemo(
+    () => activityEntities.map(({ id: id2, label }) => ({ id: id2, label })),
+    [activityEntities]
+  );
+  const confirmDiscardIfDirty = React.useCallback(async () => {
+    if (!isDirty) return true;
+    return confirm({
+      title: t("customers.deals.detail.unsavedTitle", "Discard unsaved changes?"),
+      description: t(
+        "customers.deals.detail.unsavedDescription",
+        "You have unsaved edits in this deal. Save them first or continue to discard them."
       ),
+      confirmText: t("customers.deals.detail.unsavedConfirm", "Discard changes"),
+      cancelText: t("customers.deals.detail.unsavedCancel", "Keep editing"),
       variant: "destructive"
     });
-    if (!confirmed) return;
-    setIsDeleting(true);
-    try {
-      await apiCallOrThrow(
-        "/api/customers/deals",
-        {
-          method: "DELETE",
-          headers: { "content-type": "application/json" },
-          body: JSON.stringify({ id: data.deal.id })
-        },
-        { errorMessage: t("customers.deals.detail.deleteError", "Failed to delete deal.") }
-      );
-      flash(t("customers.deals.detail.deleteSuccess", "Deal deleted."), "success");
-      router.push("/backend/customers/deals");
-    } catch (err) {
-      const message = err instanceof Error && err.message ? err.message : t("customers.deals.detail.deleteError", "Failed to delete deal.");
-      flash(message, "error");
-    } finally {
-      setIsDeleting(false);
+  }, [confirm, isDirty, t]);
+  const {
+    peopleEditorIds,
+    companiesEditorIds,
+    peopleSaving,
+    companiesSaving,
+    handlePeopleAssociationsChange,
+    handleCompaniesAssociationsChange,
+    loadLinkedPeoplePage,
+    loadLinkedCompaniesPage
+  } = useDealAssociations({
+    currentDealId,
+    data,
+    setData,
+    runMutationWithContext
+  });
+  const { isStageSaving, handleStageChange } = useDealPipeline({
+    currentDealId,
+    data,
+    runMutationWithContext,
+    confirmDiscardIfDirty,
+    onStageChanged: loadData
+  });
+  const {
+    lostDialogOpen,
+    wonPopupOpen,
+    lostPopupOpen,
+    wonStats,
+    lostStats,
+    openLostDialog,
+    closeLostDialog,
+    closeWonPopup,
+    closeLostPopup,
+    handleWon,
+    handleLostConfirm
+  } = useDealClosure({
+    currentDealId,
+    runMutationWithContext,
+    confirmDiscardIfDirty,
+    onClosed: loadData
+  });
+  const handleTabChange = React.useCallback(async (tab) => {
+    if (!await confirmDiscardIfDirty()) return;
+    setActiveTab(tab);
+    const nextParams = new URLSearchParams(searchParams?.toString() ?? "");
+    nextParams.set("tab", tab);
+    router.replace(`/backend/customers/deals/${encodeURIComponent(id)}?${nextParams.toString()}`, { scroll: false });
+  }, [confirmDiscardIfDirty, id, router, searchParams]);
+  const { isSaving, handleFormSubmit, handleDelete, handleHeaderSave } = useDealFormHandlers({
+    data,
+    currentDealId,
+    loadData,
+    runMutationWithContext,
+    formWrapperRef,
+    confirm
+  });
+  const handleEditActivity = React.useCallback((activity) => {
+    if (activity.entityId && activityEntities.some((entry) => entry.id === activity.entityId)) {
+      setSelectedActivityEntityId(activity.entityId);
     }
-  }, [confirm, data, isDeleting, router, t]);
-  React.useEffect(() => {
-    setSectionAction(null);
-  }, [activeTab]);
-  const handleSectionAction = React.useCallback(() => {
-    if (!sectionAction || sectionAction.disabled) return;
-    sectionAction.onClick();
-  }, [sectionAction]);
-  const dealOptions = React.useMemo(
-    () => data ? [
-      {
-        id: data.deal.id,
-        label: data.deal.title && data.deal.title.length ? data.deal.title : t("customers.deals.detail.untitled", "Untitled deal")
-      }
-    ] : [],
-    [data, t]
-  );
-  const entityOptions = React.useMemo(() => {
-    if (!data) return [];
-    const entries = [];
-    data.people.forEach((person) => {
-      if (!person.id) return;
-      const suffix = person.subtitle ? ` \xB7 ${person.subtitle}` : "";
-      entries.push({ id: person.id, label: `${person.label}${suffix}` });
+    openScheduleEdit({
+      id: activity.id,
+      interactionType: activity.interactionType,
+      title: activity.title ?? null,
+      body: activity.body ?? null,
+      scheduledAt: activity.scheduledAt ?? null,
+      durationMinutes: activity.duration ?? null,
+      location: activity.location ?? null,
+      allDay: activity.allDay ?? null,
+      recurrenceRule: activity.recurrenceRule ?? null,
+      recurrenceEnd: activity.recurrenceEnd ?? null,
+      participants: activity.participants ?? null,
+      reminderMinutes: activity.reminderMinutes ?? null,
+      visibility: activity.visibility ?? null,
+      linkedEntities: activity.linkedEntities ?? null,
+      guestPermissions: activity.guestPermissions ?? null
     });
-    data.companies.forEach((company) => {
-      if (!company.id) return;
-      const suffix = company.subtitle ? ` \xB7 ${company.subtitle}` : "";
-      entries.push({ id: company.id, label: `${company.label}${suffix}` });
+  }, [activityEntities, openScheduleEdit]);
+  const handleViewDashboard = React.useCallback(() => {
+    closeWonPopup();
+    router.push("/backend");
+  }, [closeWonPopup, router]);
+  const handleBackToPipeline = React.useCallback(() => {
+    closeWonPopup();
+    closeLostPopup();
+    router.push("/backend/customers/deals/pipeline");
+  }, [closeLostPopup, closeWonPopup, router]);
+  const handleScheduleLostFollowUp = React.useCallback(() => {
+    if (!data || !selectedActivityEntity) return;
+    const nextQuarterDate = startOfNextQuarter(/* @__PURE__ */ new Date());
+    closeLostPopup();
+    openScheduleEdit({
+      id: "",
+      interactionType: "task",
+      title: data.deal.title ? t("customers.deals.detail.lost.followUpTitle", "Revisit {{title}}", { title: data.deal.title }) : t("customers.deals.detail.lost.followUpFallbackTitle", "Revisit closed deal"),
+      body: data.deal.lossNotes ?? null,
+      scheduledAt: nextQuarterDate.toISOString(),
+      durationMinutes: 30,
+      location: null,
+      allDay: false,
+      recurrenceRule: null,
+      recurrenceEnd: null,
+      participants: null,
+      reminderMinutes: 1440,
+      visibility: "team",
+      linkedEntities: [
+        {
+          id: data.deal.id,
+          type: "deal",
+          label: data.deal.title || t("customers.deals.detail.untitled", "Untitled deal")
+        }
+      ]
     });
-    return entries;
-  }, [data]);
-  const defaultEntityId = React.useMemo(() => {
-    if (entityOptions.length) return entityOptions[0].id;
-    return null;
-  }, [entityOptions]);
-  const tabs = React.useMemo(
-    () => [
-      { id: "notes", label: t("customers.deals.detail.tabs.notes", "Notes") },
-      { id: "activities", label: t("customers.deals.detail.tabs.activities", "Activities") }
-    ],
-    [t]
-  );
+  }, [closeLostPopup, data, openScheduleEdit, selectedActivityEntity, t]);
   if (isLoading) {
-    return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-[50vh] flex-col items-center justify-center gap-2 text-muted-foreground", children: [
-      /* @__PURE__ */ jsx(Spinner, { className: "h-6 w-6" }),
-      /* @__PURE__ */ jsx("span", { children: t("customers.deals.detail.loading", "Loading deal\u2026") })
-    ] }) }) });
+    return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx(LoadingMessage, { label: t("customers.deals.detail.loading", "Loading deal\u2026") }) }) });
   }
   if (error || !data) {
-    return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-[50vh] flex-col items-center justify-center gap-3 text-muted-foreground", children: [
-      /* @__PURE__ */ jsx("p", { children: error || t("customers.deals.detail.notFound", "Deal not found.") }),
-      /* @__PURE__ */ jsx(Button, { variant: "outline", asChild: true, children: /* @__PURE__ */ jsx(Link, { href: "/backend/customers/deals", children: t("customers.deals.detail.backToList", "Back to deals") }) })
-    ] }) }) });
+    return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx(
+      ErrorMessage,
+      {
+        label: error || t("customers.deals.detail.error.notFound", "Deal not found."),
+        action: /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", children: /* @__PURE__ */ jsx(Link, { href: "/backend/customers/deals", children: t("customers.deals.detail.actions.backToList", "Back to deals") }) })
+      }
+    ) }) });
   }
-  const probabilityLabel = data.deal.probability !== null && data.deal.probability !== void 0 ? `${data.deal.probability}%` : t("customers.deals.detail.noValue", "Not provided");
-  const valueLabel = formatCurrency(data.deal.valueAmount, data.deal.valueCurrency) ?? t("customers.deals.detail.noValue", "Not provided");
-  const expectedCloseLabel = formatDate(data.deal.expectedCloseAt, t("customers.deals.detail.noValue", "Not provided"));
-  const statusLabel = resolveDictionaryLabel(data.deal.status, statusDictionaryMap) ?? t("customers.deals.detail.noStatus", "No status");
-  const statusDictEntry = data.deal.status ? statusDictionaryMap?.[data.deal.status] ?? null : null;
-  const pipelineLabel = resolveDictionaryLabel(data.deal.pipelineStage, pipelineDictionaryMap);
-  const pipelineDictEntry = data.deal.pipelineStage ? pipelineDictionaryMap?.[data.deal.pipelineStage] ?? null : null;
-  const previewValueAmount = formatCurrency(data.deal.valueAmount, data.deal.valueCurrency);
-  const previewProbability = data.deal.probability !== null && data.deal.probability !== void 0 ? `${data.deal.probability}%` : null;
-  const dealPreviewMetadata = {};
-  if (previewValueAmount) dealPreviewMetadata[t("customers.deals.detail.fields.value")] = previewValueAmount;
-  if (previewProbability) dealPreviewMetadata[t("customers.deals.detail.fields.probability")] = previewProbability;
-  const peopleSummaryLabel = data.people.length === 1 ? t("customers.deals.detail.peopleSummaryOne") : t("customers.deals.detail.peopleSummaryMany", void 0, { count: data.people.length });
-  const companiesSummaryLabel = data.companies.length === 1 ? t("customers.deals.detail.companiesSummaryOne") : t("customers.deals.detail.companiesSummaryMany", void 0, { count: data.companies.length });
-  const viewer = data.viewer ?? null;
-  return /* @__PURE__ */ jsxs(Page, { children: [
-    /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+  const amountLabel = formatCurrency(data.deal.valueAmount, data.deal.valueCurrency);
+  const currentPipelineName = data.pipelineName ?? wonStats?.pipelineName ?? lostStats?.pipelineName ?? null;
+  const dealName = data.deal.title || t("customers.deals.detail.untitled", "Untitled deal");
+  const zone1Content = /* @__PURE__ */ jsx("div", { ref: formWrapperRef, children: /* @__PURE__ */ jsx(
+    DealForm,
+    {
+      mode: "edit",
+      embedded: true,
+      trackDirtyWhenEmbedded: true,
+      hideFooterActions: true,
+      singleColumnGroups: true,
+      showAssociationsGroup: false,
+      showVersionHistory: false,
+      showCancelAction: false,
+      onDirtyChange: setIsDirty,
+      collapsibleGroups: { pageType: "deal-detail-v3", chevronPosition: "left" },
+      sortableGroups: { pageType: "deal-detail-v3" },
+      initialValues: {
+        ...data.deal,
+        valueAmount: typeof data.deal.valueAmount === "string" && data.deal.valueAmount.trim().length ? Number(data.deal.valueAmount) : null,
+        personIds: data.linkedPersonIds,
+        companyIds: data.linkedCompanyIds,
+        customFields: data.customFields,
+        ...Object.fromEntries(Object.entries(data.customFields ?? {}).map(([key, value]) => [`cf_${key}`, value]))
+      },
+      onSubmit: handleFormSubmit,
+      onCancel: () => {
+        void loadData();
+      },
+      onDelete: handleDelete
+    }
+  ) });
+  const zone2Content = /* @__PURE__ */ jsx("div", { className: "rounded-[10px] border border-border bg-card px-5 py-5", children: (() => {
+    const injected = injectedTabMap.get(activeTab);
+    if (injected) return injected();
+    if (activeTab === "activities") {
+      const activityEntitySelection = activityEntities.length > 1 ? /* @__PURE__ */ jsxs("div", { className: "rounded-[10px] border border-border bg-muted/20 px-5 py-5", children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "deal-activity-entity", className: "text-sm font-semibold text-foreground", children: t("customers.deals.detail.activities.selectEntityLabel", "Choose customer record") }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-muted-foreground", children: t(
+          "customers.deals.detail.activities.selectEntityDescription",
+          "Pick the person or company that should own new deal activities and follow-ups."
+        ) }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            id: "deal-activity-entity",
+            "aria-label": t("customers.deals.detail.activities.selectEntityLabel", "Choose customer record"),
+            className: "mt-4 h-9 w-full rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+            value: selectedActivityEntityId ?? "",
+            onChange: (event) => setSelectedActivityEntityId(event.target.value || null),
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: t("customers.deals.detail.activities.selectEntityPlaceholder", "Select a person or company") }),
+              activityEntities.map((entry) => /* @__PURE__ */ jsx("option", { value: entry.id, children: entry.label }, entry.id))
+            ]
+          }
+        )
+      ] }) : null;
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        activityEntities.length > 1 ? activityEntitySelection : null,
+        activityEntities.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "rounded-[10px] border border-border bg-muted/20 px-5 py-5", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: t("customers.deals.detail.activities.linkEntityTitle", "Link a person or company first") }),
+          /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-muted-foreground", children: t("customers.deals.detail.activities.linkEntityDescription", "Activities on a deal still need a customer record for timeline ownership.") }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-4 flex gap-2", children: [
+            /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => handleTabChange("people"), children: t("customers.deals.detail.tabs.people", "People") }),
+            /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => handleTabChange("companies"), children: t("customers.deals.detail.tabs.companies", "Companies") })
+          ] })
+        ] }) : selectedActivityEntity ? /* @__PURE__ */ jsx(
+          InlineActivityComposer,
+          {
+            entityType: selectedActivityEntity.kind,
+            entityId: selectedActivityEntity.id,
+            dealId: data.deal.id,
+            onActivityCreated: () => {
+              void handleActivityCreated();
+            },
+            runGuardedMutation: runMutationWithContext,
+            onScheduleRequested: openSchedule
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "rounded-[10px] border border-dashed border-border bg-muted/10 px-5 py-5", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: t("customers.deals.detail.activities.selectEntityRequiredTitle", "Choose a person or company to continue") }),
+          /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-muted-foreground", children: t(
+            "customers.deals.detail.activities.selectEntityRequiredDescription",
+            "Select the customer record that should receive new deal activities before logging or scheduling anything."
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          PlannedActivitiesSection,
+          {
+            activities: plannedActivities,
+            onComplete: (interactionId) => {
+              void handleMarkDone(interactionId);
+            },
+            onSchedule: selectedActivityEntity ? openSchedule : void 0,
+            onEdit: handleEditActivity,
+            onCancel: (interactionId) => {
+              void handleCancelActivity(interactionId);
+            }
+          }
+        ),
+        selectedActivityEntity ? /* @__PURE__ */ jsx(
+          ActivitiesSection,
+          {
+            entityId: selectedActivityEntity.id,
+            entityName: selectedActivityEntity.label,
+            dealId: data.deal.id,
+            dealOptions,
+            entityOptions,
+            defaultEntityId: selectedActivityEntity.id,
+            addActionLabel: t("customers.deals.detail.activitiesAdd", "Log activity"),
+            emptyState: {
+              title: t("customers.deals.detail.activitiesEmptyTitle", "No activities yet"),
+              actionLabel: t("customers.deals.detail.activitiesEmptyAction", "Log activity")
+            },
+            runGuardedMutation: runMutationWithContext,
+            onDataRefresh: () => {
+              void handleActivityCreated();
+            },
+            refreshKey: activityRefreshKey,
+            onEditActivity: handleEditActivity
+          }
+        ) : null
+      ] });
+    }
+    if (activeTab === "people") {
+      return /* @__PURE__ */ jsx(
+        DealLinkedEntitiesTab,
+        {
+          entityLabel: t("customers.deals.detail.tabs.peopleSingular", "Person"),
+          entityLabelPlural: t("customers.deals.detail.tabs.people", "People"),
+          manageLabel: t("customers.deals.detail.peopleEditorTitle", "Manage linked people"),
+          searchPlaceholder: t("customers.deals.detail.peopleSearch", "Search linked people\u2026"),
+          linkedItems: data.people,
+          linkedCount: data.counts.people,
+          selectedIds: peopleEditorIds,
+          disabled: peopleSaving || isSaving,
+          savePending: peopleSaving,
+          hrefBuilder: (personId) => `/backend/customers/people-v2/${encodeURIComponent(personId)}`,
+          onSaveSelection: (next) => handlePeopleAssociationsChange(next),
+          loadLinkedPage: loadLinkedPeoplePage,
+          searchEntities: searchPeoplePage,
+          fetchEntitiesByIds: fetchPeopleByIds,
+          icon: /* @__PURE__ */ jsx(Users, { className: "size-4" })
+        }
+      );
+    }
+    if (activeTab === "companies") {
+      return /* @__PURE__ */ jsx(
+        DealLinkedEntitiesTab,
+        {
+          entityLabel: t("customers.deals.detail.tabs.companySingular", "Company"),
+          entityLabelPlural: t("customers.deals.detail.tabs.companies", "Companies"),
+          manageLabel: t("customers.deals.detail.companiesEditorTitle", "Manage linked companies"),
+          searchPlaceholder: t("customers.deals.detail.companiesSearch", "Search linked companies\u2026"),
+          linkedItems: data.companies,
+          linkedCount: data.counts.companies,
+          selectedIds: companiesEditorIds,
+          disabled: companiesSaving || isSaving,
+          savePending: companiesSaving,
+          hrefBuilder: (companyId) => `/backend/customers/companies-v2/${encodeURIComponent(companyId)}`,
+          onSaveSelection: (next) => handleCompaniesAssociationsChange(next),
+          loadLinkedPage: loadLinkedCompaniesPage,
+          searchEntities: searchCompaniesPage,
+          fetchEntitiesByIds: fetchCompaniesByIds,
+          icon: /* @__PURE__ */ jsx(Building2, { className: "size-4" })
+        }
+      );
+    }
+    if (activeTab === "notes") {
+      return /* @__PURE__ */ jsx(
+        NotesSection,
+        {
+          entityId: null,
+          dealId: data.deal.id,
+          dealOptions,
+          entityOptions,
+          emptyLabel: t("customers.deals.detail.notesEmpty", "No notes yet."),
+          viewerUserId: data.viewer?.userId ?? null,
+          viewerName: data.viewer?.name ?? null,
+          viewerEmail: data.viewer?.email ?? null,
+          addActionLabel: t("customers.deals.detail.notesAdd", "Add note"),
+          emptyState: {
+            title: t("customers.deals.detail.notesEmptyTitle", "Keep everyone in the loop"),
+            actionLabel: t("customers.deals.detail.notesEmptyAction", "Add a note")
+          },
+          translator: detailTranslator,
+          dataAdapter: notesAdapter,
+          renderIcon: renderDictionaryIcon,
+          renderColor: renderDictionaryColor,
+          iconSuggestions: ICON_SUGGESTIONS,
+          readMarkdownPreference: readMarkdownPreferenceCookie,
+          writeMarkdownPreference: writeMarkdownPreferenceCookie
+        }
+      );
+    }
+    if (activeTab === "files") {
+      return /* @__PURE__ */ jsx(
+        AttachmentsSection,
+        {
+          entityId: E.customers.customer_deal,
+          recordId: data.deal.id,
+          title: t("customers.deals.detail.tabs.files", "Files"),
+          description: t("customers.deals.detail.files.subtitle", "Upload and manage files linked to this deal.")
+        }
+      );
+    }
+    if (activeTab === "changelog") {
+      return /* @__PURE__ */ jsx(ChangelogTab, { entityId: data.deal.id, entityType: "deal" });
+    }
+    return null;
+  })() });
+  return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsxs(PageBody, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx(InjectionSpot, { spotId: "detail:customers.deal:header", context: injectionContext, data }),
       /* @__PURE__ */ jsx(
-        FormHeader,
+        DealDetailHeader,
         {
-          mode: "detail",
-          backHref: "/backend/customers/deals",
-          backLabel: t("customers.deals.detail.backToList", "Back to deals"),
-          utilityActions: /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              SendObjectMessageDialog,
-              {
-                object: {
-                  entityModule: "customers",
-                  entityType: "deal",
-                  entityId: data.deal.id,
-                  sourceEntityType: "customers.deal",
-                  sourceEntityId: data.deal.id,
-                  previewData: {
-                    title: data.deal.title || t("customers.deals.detail.untitled", "Untitled deal"),
-                    status: data.deal.status ? statusLabel : void 0,
-                    metadata: Object.keys(dealPreviewMetadata).length > 0 ? dealPreviewMetadata : void 0
-                  }
-                },
-                viewHref: `/backend/customers/deals/${data.deal.id}`,
-                defaultValues: {
-                  sourceEntityType: "customers.deal",
-                  sourceEntityId: data.deal.id
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              VersionHistoryAction,
-              {
-                config: { resourceKind: "customers.deal", resourceId: data.deal.id },
-                t
-              }
-            )
-          ] }),
-          title: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { children: data.deal.title || t("customers.deals.detail.untitled", "Untitled deal") }),
-            /* @__PURE__ */ jsxs(
-              Button,
-              {
-                type: "button",
-                variant: "ghost",
-                size: "sm",
-                className: "gap-1 text-muted-foreground hover:text-foreground",
-                onClick: scrollToDealSettings,
-                children: [
-                  /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4", "aria-hidden": true }),
-                  /* @__PURE__ */ jsx(MousePointerClick, { className: "h-4 w-4", "aria-hidden": true }),
-                  /* @__PURE__ */ jsx("span", { children: t("customers.deals.detail.goToSettings", "Edit deal details") })
-                ]
-              }
-            )
-          ] }),
-          subtitle: t("customers.deals.detail.summary", void 0, {
-            status: statusLabel,
-            pipeline: pipelineLabel ?? t("customers.deals.detail.noPipeline", "No pipeline")
-          }),
+          deal: data.deal,
+          owner: data.owner,
+          people: data.people,
+          companies: data.companies,
+          pipelineName: currentPipelineName,
+          stageOptions: data.pipelineStages,
+          currentStageId: data.deal.pipelineStageId,
+          onStageChange: handleStageChange,
+          isStageSaving,
+          onSave: handleHeaderSave,
           onDelete: handleDelete,
-          isDeleting,
-          deleteLabel: t("ui.actions.delete", "Delete")
+          isDirty,
+          isSaving
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "grid gap-6 lg:grid-cols-[minmax(0,2fr),minmax(0,1.1fr)]", children: [
-        /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-          /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
-            /* @__PURE__ */ jsx("h2", { className: "mb-4 text-sm font-semibold uppercase text-muted-foreground", children: t("customers.deals.detail.highlights", "Highlights") }),
-            /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase text-muted-foreground", children: t("customers.deals.detail.fields.value", "Deal value") }),
-                /* @__PURE__ */ jsx("p", { className: "text-base font-semibold text-foreground", children: valueLabel })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase text-muted-foreground", children: t("customers.deals.detail.fields.probability", "Probability") }),
-                /* @__PURE__ */ jsx("p", { className: "text-base font-semibold text-foreground", children: probabilityLabel })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase text-muted-foreground", children: t("customers.deals.detail.fields.status", "Status") }),
-                /* @__PURE__ */ jsxs("p", { className: "text-base text-foreground flex items-center gap-2", children: [
-                  statusDictEntry?.color ? renderDictionaryColor(statusDictEntry.color) : null,
-                  statusDictEntry?.icon ? renderDictionaryIcon(statusDictEntry.icon) : null,
-                  statusLabel
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase text-muted-foreground", children: t("customers.deals.detail.fields.pipeline", "Pipeline stage") }),
-                /* @__PURE__ */ jsxs("p", { className: "text-base text-foreground flex items-center gap-2", children: [
-                  pipelineDictEntry?.color ? renderDictionaryColor(pipelineDictEntry.color) : null,
-                  pipelineDictEntry?.icon ? renderDictionaryIcon(pipelineDictEntry.icon) : null,
-                  pipelineLabel ?? t("customers.deals.detail.noValue", "Not provided")
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase text-muted-foreground", children: t("customers.deals.detail.fields.expectedClose", "Expected close") }),
-                /* @__PURE__ */ jsx("p", { className: "text-base text-foreground", children: expectedCloseLabel })
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: tabs.map((tab) => /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "sm",
-                  onClick: () => setActiveTab(tab.id),
-                  className: `h-auto rounded-none border-b-2 px-0 py-1 ${activeTab === tab.id ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground hover:bg-transparent"}`,
-                  children: tab.label
-                },
-                tab.id
-              )) }),
-              sectionAction ? /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  type: "button",
-                  size: "sm",
-                  disabled: sectionAction.disabled,
-                  onClick: handleSectionAction,
-                  children: [
-                    sectionAction.icon ?? null,
-                    sectionAction.label
-                  ]
-                }
-              ) : null
-            ] }),
-            activeTab === "notes" ? /* @__PURE__ */ jsx(
-              NotesSection,
-              {
-                entityId: null,
-                dealId: data.deal.id,
-                dealOptions,
-                entityOptions,
-                emptyLabel: t("customers.deals.detail.notesEmpty", "No notes yet."),
-                viewerUserId: viewer?.userId ?? null,
-                viewerName: viewer?.name ?? null,
-                viewerEmail: viewer?.email ?? null,
-                addActionLabel: t("customers.deals.detail.notesAdd", "Add note"),
-                emptyState: {
-                  title: t("customers.deals.detail.notesEmptyTitle", "Keep everyone in the loop"),
-                  actionLabel: t("customers.deals.detail.notesEmptyAction", "Add a note")
-                },
-                onActionChange: setSectionAction,
-                translator: detailTranslator,
-                onLoadingChange: handleNotesLoadingChange,
-                dataAdapter: notesAdapter,
-                renderIcon: renderDictionaryIcon,
-                renderColor: renderDictionaryColor,
-                iconSuggestions: ICON_SUGGESTIONS,
-                readMarkdownPreference: readMarkdownPreferenceCookie,
-                writeMarkdownPreference: writeMarkdownPreferenceCookie
-              }
-            ) : null,
-            activeTab === "activities" ? /* @__PURE__ */ jsx(
-              ActivitiesSection,
-              {
-                entityId: null,
-                dealId: data.deal.id,
-                dealOptions,
-                entityOptions,
-                defaultEntityId: defaultEntityId ?? void 0,
-                addActionLabel: t("customers.deals.detail.activitiesAdd", "Log activity"),
-                emptyState: {
-                  title: t("customers.deals.detail.activitiesEmptyTitle", "No activities yet"),
-                  actionLabel: t("customers.deals.detail.activitiesEmptyAction", "Add an activity")
-                },
-                onActionChange: setSectionAction,
-                onLoadingChange: handleActivitiesLoadingChange
-              }
-            ) : null
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
-              /* @__PURE__ */ jsxs("div", { className: "mb-3 space-y-1", children: [
-                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: t("customers.deals.detail.peopleSection", "People") }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: peopleSummaryLabel })
-              ] }),
-              data.people.length ? /* @__PURE__ */ jsx("ul", { className: "space-y-2 text-sm", children: data.people.map((person) => /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ jsx(Link, { href: `/backend/customers/people-v2/${encodeURIComponent(person.id)}`, className: "font-medium text-foreground hover:underline", children: person.label }),
-                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: person.subtitle ?? t("customers.deals.detail.peopleNoDetails", "No additional details") })
-              ] }, person.id)) }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("customers.deals.detail.noPeople", "No people linked to this deal yet.") })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
-              /* @__PURE__ */ jsxs("div", { className: "mb-3 space-y-1", children: [
-                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: t("customers.deals.detail.companiesSection", "Companies") }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: companiesSummaryLabel })
-              ] }),
-              data.companies.length ? /* @__PURE__ */ jsx("ul", { className: "space-y-2 text-sm", children: data.companies.map((company) => /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ jsx(Link, { href: `/backend/customers/companies-v2/${encodeURIComponent(company.id)}`, className: "font-medium text-foreground hover:underline", children: company.label }),
-                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: company.subtitle ?? t("customers.deals.detail.companiesNoDetails", "No additional details") })
-              ] }, company.id)) }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("customers.deals.detail.noCompanies", "No companies linked to this deal yet.") })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: dealSettingsRef,
-            id: "deal-settings",
-            className: "rounded-lg border bg-card p-4",
-            children: [
-              /* @__PURE__ */ jsx("h2", { className: "mb-4 text-sm font-semibold uppercase text-muted-foreground", children: t("customers.deals.detail.formTitle", "Deal settings") }),
-              /* @__PURE__ */ jsx(
-                DealForm,
-                {
-                  mode: "edit",
-                  initialValues: {
-                    id: data.deal.id,
-                    title: data.deal.title ?? "",
-                    status: data.deal.status ?? "",
-                    pipelineStage: data.deal.pipelineStage ?? "",
-                    pipelineId: data.deal.pipelineId ?? "",
-                    pipelineStageId: data.deal.pipelineStageId ?? "",
-                    valueAmount: data.deal.valueAmount ? Number(data.deal.valueAmount) : null,
-                    valueCurrency: data.deal.valueCurrency ?? void 0,
-                    probability: data.deal.probability ?? null,
-                    expectedCloseAt: data.deal.expectedCloseAt ?? null,
-                    description: data.deal.description ?? "",
-                    personIds: data.people.map((person) => person.id),
-                    companyIds: data.companies.map((company) => company.id),
-                    people: data.people.map((person) => ({ id: person.id, label: person.label })),
-                    companies: data.companies.map((company) => ({ id: company.id, label: company.label })),
-                    ...Object.fromEntries(
-                      Object.entries(data.customFields).filter(([key]) => key.startsWith("cf_")).map(([key, value]) => [key, value])
-                    )
-                  },
-                  onSubmit: handleFormSubmit,
-                  onCancel: () => setReloadToken((token) => token + 1),
-                  onDelete: handleDelete,
-                  isSubmitting: isSaving || isDeleting
-                },
-                data.deal.updatedAt
-              )
-            ]
-          }
-        ) })
-      ] })
-    ] }) }),
-    ConfirmDialogElement
-  ] });
+      /* @__PURE__ */ jsx(InjectionSpot, { spotId: "detail:customers.deal:status-badges", context: injectionContext, data }),
+      /* @__PURE__ */ jsx(
+        PipelineStepper,
+        {
+          stages: data.pipelineStages,
+          transitions: data.stageTransitions,
+          currentStageId: data.deal.pipelineStageId,
+          pipelineName: currentPipelineName,
+          closureOutcome: data.deal.closureOutcome,
+          footer: data.deal.closureOutcome ? null : /* @__PURE__ */ jsx(
+            DealClosureActionBar,
+            {
+              embedded: true,
+              closureOutcome: data.deal.closureOutcome,
+              onWon: () => {
+                void handleWon();
+              },
+              onLost: openLostDialog
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DealDetailTabs,
+        {
+          activeTab,
+          onTabChange: handleTabChange,
+          injectedTabs: injectedTabs.map((tab) => ({ id: tab.id, label: tab.label })),
+          peopleCount: data.counts.people,
+          companiesCount: data.counts.companies,
+          children: /* @__PURE__ */ jsx(
+            CollapsibleZoneLayout,
+            {
+              pageType: "deal-detail-v3",
+              entityName: dealName,
+              isDirty,
+              zone1DefaultWidth: "540px",
+              zone1: zone1Content,
+              zone2: zone2Content
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(InjectionSpot, { spotId: "detail:customers.deal:footer", context: injectionContext, data })
+    ] }),
+    ConfirmDialogElement,
+    selectedActivityEntity ? /* @__PURE__ */ jsx(
+      ScheduleActivityDialog,
+      {
+        open: scheduleDialogOpen,
+        onClose: closeSchedule,
+        entityId: selectedActivityEntity.id,
+        dealId: data.deal.id,
+        entityType: selectedActivityEntity.kind,
+        entityName: selectedActivityEntity.label,
+        companyName: selectedActivityEntity.kind === "company" ? selectedActivityEntity.label : data.companies[0]?.label ?? null,
+        onActivityCreated: () => {
+          void handleActivityCreated();
+        },
+        editData: scheduleEditData
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      ConfirmDealLostDialog,
+      {
+        open: lostDialogOpen,
+        onClose: closeLostDialog,
+        dealTitle: data.deal.title || t("customers.deals.detail.untitled", "Untitled deal"),
+        dealValue: amountLabel,
+        companyName: data.companies[0]?.label ?? null,
+        onConfirm: handleLostConfirm
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DealWonPopup,
+      {
+        open: wonPopupOpen,
+        onClose: closeWonPopup,
+        dealTitle: data.deal.title || t("customers.deals.detail.untitled", "Untitled deal"),
+        stats: wonStats,
+        onViewDashboard: handleViewDashboard,
+        onBackToPipeline: handleBackToPipeline
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DealLostSummaryDialog,
+      {
+        open: lostPopupOpen,
+        onClose: closeLostPopup,
+        dealTitle: data.deal.title || t("customers.deals.detail.untitled", "Untitled deal"),
+        lossNotes: data.deal.lossNotes,
+        stats: lostStats,
+        onBackToPipeline: handleBackToPipeline,
+        onScheduleFollowUp: selectedActivityEntity ? handleScheduleLostFollowUp : void 0
+      }
+    )
+  ] }) });
 }
 export {
   DealDetailPage as default