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

package/dist/modules/customers/backend/customers/people-v2/[id]/page.js

@@ -1,10 +1,12 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
+import { User, Hash, Users, Building2 } from "lucide-react";
 import { Page, PageBody } from "@open-mercato/ui/backend/Page";
 import { CrudForm } from "@open-mercato/ui/backend/CrudForm";
+import { CollapsibleZoneLayout } from "@open-mercato/ui/backend/crud/CollapsibleZoneLayout";
 import { updateCrud, deleteCrud } from "@open-mercato/ui/backend/utils/crud";
 import { readApiResultOrThrow } from "@open-mercato/ui/backend/utils/apiCall";
 import { createCrudFormError } from "@open-mercato/ui/backend/utils/serverErrors";
@@ -13,25 +15,27 @@ import { flash } from "@open-mercato/ui/backend/FlashMessages";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { useOrganizationScopeDetail } from "@open-mercato/shared/lib/frontend/useOrganizationScope";
 import { Button } from "@open-mercato/ui/primitives/button";
-import { ErrorMessage, LoadingMessage, NotesSection } from "@open-mercato/ui/backend/detail";
+import { AttachmentsSection, ErrorMessage, LoadingMessage } from "@open-mercato/ui/backend/detail";
+import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
 import { InjectionSpot, useInjectionWidgets } from "@open-mercato/ui/backend/injection/InjectionSpot";
 import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
 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 { createCustomerNotesAdapter } from "../../../../components/detail/notesAdapter.js";
-import { readMarkdownPreferenceCookie, writeMarkdownPreferenceCookie } from "../../../../lib/markdownPreference.js";
 import { ActivitiesSection } from "../../../../components/detail/ActivitiesSection.js";
 import { DealsSection } from "../../../../components/detail/DealsSection.js";
-import { AddressesSection } from "../../../../components/detail/AddressesSection.js";
 import { TasksSection } from "../../../../components/detail/TasksSection.js";
-import { TagsSection } from "../../../../components/detail/TagsSection.js";
-import { DetailTabsLayout } from "../../../../components/detail/DetailTabsLayout.js";
-import { PersonHighlightsSummary } from "../../../../components/detail/CustomerFormHighlights.js";
+import { InlineActivityComposer } from "../../../../components/detail/InlineActivityComposer.js";
+import { PlannedActivitiesSection } from "../../../../components/detail/PlannedActivitiesSection.js";
+import { ScheduleActivityDialog } from "../../../../components/detail/ScheduleActivityDialog.js";
+import { PersonDetailHeader } from "../../../../components/detail/PersonDetailHeader.js";
+import { ChangelogTab } from "../../../../components/detail/ChangelogTab.js";
+import { PersonDetailTabs, resolveLegacyTab } from "../../../../components/detail/PersonDetailTabs.js";
+import { PersonCompaniesSection } from "../../../../components/detail/PersonCompaniesSection.js";
+import { MobilePersonDetail } from "../../../../components/detail/MobilePersonDetail.js";
+import { useInteractionMutations } from "../../../../components/detail/hooks/useInteractionMutations.js";
 import {
   buildPersonEditPayload,
   createPersonEditFields,
-  createPersonEditGroups,
+  createPersonPersonalDataGroups,
   createPersonEditSchema,
   mapPersonOverviewToFormValues
 } from "../../../../components/formConfig.js";
@@ -41,23 +45,26 @@ function PersonDetailV2Page({ params }) {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { organizationId } = useOrganizationScopeDetail();
+  const { confirm, ConfirmDialogElement } = useConfirmDialog();
   const detailTranslator = React.useMemo(() => createTranslatorWithFallback(t), [t]);
-  const notesAdapter = React.useMemo(() => createCustomerNotesAdapter(detailTranslator), [detailTranslator]);
   const formSchema = React.useMemo(() => createPersonEditSchema(), []);
   const fields = React.useMemo(() => createPersonEditFields(t), [t]);
-  const groups = React.useMemo(() => createPersonEditGroups(t), [t]);
+  const groups = React.useMemo(() => createPersonPersonalDataGroups(t), [t]);
   const [data, setData] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(true);
   const [error, setError] = React.useState(null);
+  const [isDirty, setIsDirty] = React.useState(false);
+  const [isSaving, setIsSaving] = React.useState(false);
+  const formWrapperRef = React.useRef(null);
   const initialTab = React.useMemo(() => {
-    const raw = searchParams?.get("tab");
-    if (raw === "notes" || raw === "activities" || raw === "deals" || raw === "addresses" || raw === "tasks") {
-      return raw;
-    }
-    return "notes";
+    return resolveLegacyTab(searchParams?.get("tab"));
   }, [searchParams]);
   const [activeTab, setActiveTab] = React.useState(initialTab);
   const [sectionAction, setSectionAction] = React.useState(null);
+  const [scheduleDialogOpen, setScheduleDialogOpen] = React.useState(false);
+  const [scheduleEditData, setScheduleEditData] = React.useState(null);
+  const [activityRefreshKey, setActivityRefreshKey] = React.useState(0);
+  const [dealCount, setDealCount] = React.useState(0);
   const currentPersonId = data?.person?.id ?? null;
   const mutationContextId = React.useMemo(
     () => currentPersonId ? `customer-person:${currentPersonId}` : `customer-person:${id ?? "pending"}`,
@@ -68,6 +75,12 @@ function PersonDetailV2Page({ params }) {
     blockedMessage: t("ui.forms.flash.saveBlocked", "Save blocked by validation")
   });
   const personName = data?.person?.displayName && data.person.displayName.trim().length ? data.person.displayName : t("customers.people.list.deleteFallbackName", "this person");
+  const zoneSections = React.useMemo(() => [
+    { id: "personalData", icon: User, label: t("customers.people.form.groups.personalData", "Personal data") },
+    { id: "companyRole", icon: Building2, label: t("customers.people.form.groups.companyRole", "Company & role") },
+    { id: "customFields", icon: Hash, label: t("customers.people.form.groups.customAttributes", "Custom attributes") },
+    { id: "roles", icon: Users, label: t("customers.people.form.groups.roles", "My roles") }
+  ], [t]);
   const initialLoadDoneRef = React.useRef(false);
   const loadData = React.useCallback(async () => {
     if (!id) {
@@ -80,11 +93,8 @@ function PersonDetailV2Page({ params }) {
     }
     setError(null);
     try {
-      const search = new URLSearchParams();
-      search.append("include", "todos");
-      search.append("include", "interactions");
       const payload = await readApiResultOrThrow(
-        `/api/customers/people/${encodeURIComponent(id)}?${search.toString()}`,
+        `/api/customers/people/${encodeURIComponent(id)}`,
         void 0,
         { errorMessage: t("customers.people.detail.error.load", "Failed to load person.") }
       );
@@ -99,9 +109,18 @@ function PersonDetailV2Page({ params }) {
     }
   }, [id, t]);
   React.useEffect(() => {
-    loadData().catch(() => {
-    });
+    loadData().catch((err) => console.warn("[people-v2] loadData failed", err));
   }, [loadData]);
+  React.useEffect(() => {
+    setDealCount(data?.counts?.deals ?? 0);
+  }, [data?.counts?.deals]);
+  const handleActivityCreated = React.useCallback(() => {
+    setActivityRefreshKey((k) => k + 1);
+    loadData().catch((err) => console.warn("[people-v2] reload after activity failed", err));
+  }, [loadData]);
+  const plannedActivities = React.useMemo(() => {
+    return data?.plannedActivitiesPreview ?? [];
+  }, [data?.plannedActivitiesPreview]);
   const injectionContext = React.useMemo(
     () => ({
       formId: mutationContextId,
@@ -123,6 +142,33 @@ function PersonDetailV2Page({ params }) {
     },
     [injectionContext, runMutation]
   );
+  const { completeInteraction: handleMarkDone, cancelInteraction: handleCancelActivity } = useInteractionMutations({
+    runMutationWithContext,
+    onAfterChange: handleActivityCreated,
+    logContext: "customers.people-v2"
+  });
+  const handleEditActivity = React.useCallback((activity) => {
+    const raw = activity;
+    const durationValue = typeof raw.duration === "number" ? raw.duration : typeof raw.durationMinutes === "number" ? raw.durationMinutes : null;
+    setScheduleEditData({
+      id: activity.id,
+      interactionType: typeof activity.interactionType === "string" ? activity.interactionType : void 0,
+      title: typeof activity.title === "string" ? activity.title : null,
+      body: typeof activity.body === "string" ? activity.body : null,
+      scheduledAt: typeof activity.scheduledAt === "string" ? activity.scheduledAt : null,
+      durationMinutes: durationValue,
+      location: typeof raw.location === "string" ? raw.location : null,
+      allDay: typeof raw.allDay === "boolean" ? raw.allDay : null,
+      recurrenceRule: typeof raw.recurrenceRule === "string" ? raw.recurrenceRule : null,
+      recurrenceEnd: typeof raw.recurrenceEnd === "string" ? raw.recurrenceEnd : null,
+      participants: Array.isArray(raw.participants) ? raw.participants : null,
+      reminderMinutes: typeof raw.reminderMinutes === "number" ? raw.reminderMinutes : null,
+      visibility: typeof raw.visibility === "string" ? raw.visibility : null,
+      linkedEntities: Array.isArray(raw.linkedEntities) ? raw.linkedEntities : null,
+      guestPermissions: raw.guestPermissions && typeof raw.guestPermissions === "object" ? raw.guestPermissions : null
+    });
+    setScheduleDialogOpen(true);
+  }, []);
   const { widgets: injectedTabWidgets } = useInjectionWidgets("detail:customers.person:tabs", {
     context: injectionContext,
     triggerOnLoad: true
@@ -130,7 +176,7 @@ function PersonDetailV2Page({ params }) {
   const injectedTabs = React.useMemo(
     () => (injectedTabWidgets ?? []).filter((widget) => (widget.placement?.kind ?? "tab") === "tab").map((widget) => {
       const tabId = widget.placement?.groupId ?? widget.widgetId;
-      const label = widget.placement?.groupLabel ?? widget.module.metadata.title;
+      const label = widget.placement?.groupLabel ?? widget.module.metadata.title ?? tabId;
       const priority = typeof widget.placement?.priority === "number" ? widget.placement.priority : 0;
       const render = () => /* @__PURE__ */ jsx(
         widget.module.Widget,
@@ -145,31 +191,16 @@ function PersonDetailV2Page({ params }) {
     [data, injectedTabWidgets, injectionContext]
   );
   const injectedTabMap = React.useMemo(() => new Map(injectedTabs.map((tab) => [tab.id, tab.render])), [injectedTabs]);
-  const tabs = React.useMemo(
-    () => [
-      { id: "notes", label: t("customers.people.detail.tabs.notes", "Notes") },
-      { id: "activities", label: t("customers.people.detail.tabs.activities", "Activities") },
-      { id: "deals", label: t("customers.people.detail.tabs.deals", "Deals") },
-      { id: "addresses", label: t("customers.people.detail.tabs.addresses", "Addresses") },
-      { id: "tasks", label: t("customers.people.detail.tabs.tasks", "Tasks") },
-      ...injectedTabs.map((tab) => ({ id: tab.id, label: tab.label }))
-    ],
-    [injectedTabs, t]
-  );
+  const handleTagsChange = React.useCallback((nextTags) => {
+    setData((prev) => prev ? { ...prev, tags: nextTags } : prev);
+  }, []);
+  const tagsSectionControllerRef = React.useRef(null);
   const handleSectionActionChange = React.useCallback((action) => {
     setSectionAction(action);
   }, []);
-  const handleSectionAction = React.useCallback(() => {
-    if (!sectionAction || sectionAction.disabled) return;
-    sectionAction.onClick();
-  }, [sectionAction]);
   React.useEffect(() => {
     setSectionAction(null);
   }, [activeTab]);
-  const handleTagsChange = React.useCallback((nextTags) => {
-    setData((prev) => prev ? { ...prev, tags: nextTags } : prev);
-  }, []);
-  const tagsSectionControllerRef = React.useRef(null);
   const dealsScope = React.useMemo(
     () => currentPersonId ? { kind: "person", entityId: currentPersonId } : null,
     [currentPersonId]
@@ -178,37 +209,58 @@ function PersonDetailV2Page({ params }) {
     () => data ? mapPersonOverviewToFormValues(data) : void 0,
     [data]
   );
-  const contentHeader = React.useMemo(
-    () => data ? /* @__PURE__ */ jsx(PersonHighlightsSummary, { data }) : void 0,
-    [data]
-  );
   const handleFormSubmit = React.useCallback(
     async (values) => {
-      await tagsSectionControllerRef.current?.flush();
-      let payload;
+      setIsSaving(true);
       try {
-        payload = buildPersonEditPayload(values, organizationId);
-      } catch (err) {
-        if (err instanceof Error && err.message === "DISPLAY_NAME_REQUIRED") {
-          const message = t("customers.people.form.displayName.error");
-          throw createCrudFormError(message, { displayName: message });
+        await tagsSectionControllerRef.current?.flush();
+        let payload;
+        try {
+          payload = buildPersonEditPayload(values, organizationId);
+        } catch (err) {
+          if (err instanceof Error && err.message === "DISPLAY_NAME_REQUIRED") {
+            const message = t("customers.people.form.displayName.error");
+            throw createCrudFormError(message, { displayName: message });
+          }
+          throw err;
         }
-        throw err;
+        await updateCrud("customers/people", payload);
+        flash(t("customers.people.form.updateSuccess", "Person updated."), "success");
+        await loadData();
+      } finally {
+        setIsSaving(false);
       }
-      await updateCrud("customers/people", payload);
-      flash(t("customers.people.form.updateSuccess", "Person updated."), "success");
-      await loadData();
     },
     [loadData, organizationId, t]
   );
   const handleFormDelete = React.useCallback(
     async () => {
-      await deleteCrud("customers/people", { id: data?.person?.id ?? "" });
+      const personId2 = data?.person?.id ?? "";
+      if (!personId2) return;
+      const approved = await confirm({
+        title: t("customers.people.detail.deleteConfirmTitle", "Delete person?"),
+        description: t("customers.people.detail.deleteConfirmDescription", "This action cannot be undone."),
+        confirmText: t("customers.people.detail.actions.delete", "Delete"),
+        cancelText: t("customers.people.detail.actions.cancel", "Cancel"),
+        variant: "destructive"
+      });
+      if (!approved) return;
+      await runMutationWithContext(
+        () => deleteCrud("customers/people", { id: personId2 }),
+        { id: personId2, operation: "deletePerson" }
+      );
       flash(t("customers.people.list.deleteSuccess", "Person deleted."), "success");
       router.push("/backend/customers/people");
     },
-    [data?.person?.id, router, t]
+    [confirm, data?.person?.id, router, runMutationWithContext, t]
   );
+  const handleHeaderSave = React.useCallback(() => {
+    const form = formWrapperRef.current?.querySelector("form");
+    if (form) form.requestSubmit();
+  }, []);
+  const interactionCount = data?.counts?.activities ?? 0;
+  const todoCount = data?.counts?.todos ?? 0;
+  const companyCount = data?.counts?.companies ?? (data?.companies?.length ?? (data?.company ? 1 : 0));
   if (isLoading) {
     return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx(LoadingMessage, { label: t("customers.people.detail.loading", "Loading person\u2026") }) }) });
   }
@@ -223,160 +275,223 @@ function PersonDetailV2Page({ params }) {
   }
   const personId = data.person.id;
   const useCanonicalInteractions = data.interactionMode === "canonical";
-  return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
+  return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsx(InjectionSpot, { spotId: "detail:customers.person:header", context: injectionContext, data }),
     /* @__PURE__ */ jsx(InjectionSpot, { spotId: "detail:customers.person:status-badges", context: injectionContext, data }),
     /* @__PURE__ */ jsx(
-      CrudForm,
+      PersonDetailHeader,
       {
-        title: data.person.displayName,
-        backHref: "/backend/customers/people",
-        versionHistory: {
-          resourceKind: "customers.person",
-          resourceId: personId
+        data,
+        onTagsChange: handleTagsChange,
+        tagsSectionControllerRef,
+        onSave: handleHeaderSave,
+        onDelete: handleFormDelete,
+        isDirty,
+        isSaving,
+        onOpenCompaniesTab: () => setActiveTab("companies"),
+        onDataReload: () => {
+          loadData().catch((err) => console.warn("[people-v2] onDataReload failed", err));
         },
-        injectionSpotId: "customers.person",
-        entityIds: [E.customers.customer_entity, E.customers.customer_person_profile],
-        schema: formSchema,
-        fields,
-        groups,
-        initialValues,
-        contentHeader,
-        onSubmit: handleFormSubmit,
-        onDelete: handleFormDelete
+        onFocusField: (fieldName) => {
+          const selectorMap = {
+            primaryEmail: 'input[type="email"]',
+            primaryPhone: 'input[type="tel"]'
+          };
+          const selector = selectorMap[fieldName];
+          const input = selector ? formWrapperRef.current?.querySelector(selector) : null;
+          if (input) {
+            input.scrollIntoView({ behavior: "smooth", block: "center" });
+            requestAnimationFrame(() => input.focus());
+          }
+        }
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "rounded-md border bg-muted/30 px-4 py-3 text-sm text-muted-foreground", children: t(
-      "customers.detail.saveGuide",
-      "Profile fields save with the main Save button. Tags save automatically. The related sections below save independently inside their own tabs and panels."
-    ) }),
+    (() => {
+      const zone1Content = /* @__PURE__ */ jsx("div", { ref: formWrapperRef, children: /* @__PURE__ */ jsx(
+        CrudForm,
+        {
+          embedded: true,
+          trackDirtyWhenEmbedded: true,
+          injectionSpotId: "customers.person",
+          entityIds: [E.customers.customer_entity, E.customers.customer_person_profile],
+          schema: formSchema,
+          fields,
+          groups,
+          initialValues,
+          onSubmit: handleFormSubmit,
+          onDelete: handleFormDelete,
+          hideFooterActions: true,
+          collapsibleGroups: { pageType: "person-v2", chevronPosition: "left" },
+          sortableGroups: { pageType: "person-v2" },
+          onDirtyChange: setIsDirty
+        }
+      ) });
+      const zone2Content = /* @__PURE__ */ jsx(
+        PersonDetailTabs,
+        {
+          activeTab,
+          onTabChange: setActiveTab,
+          injectedTabs: injectedTabs.map((tab) => ({ id: tab.id, label: tab.label })),
+          activitiesCount: interactionCount,
+          dealsCount: dealCount,
+          companiesCount: companyCount,
+          tasksCount: todoCount,
+          children: /* @__PURE__ */ jsx("div", { className: "min-w-0", children: (() => {
+            const injected = injectedTabMap.get(activeTab);
+            if (injected) return injected();
+            if (activeTab === "activities") {
+              return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsx(
+                  InlineActivityComposer,
+                  {
+                    entityType: "person",
+                    entityId: personId,
+                    onActivityCreated: handleActivityCreated,
+                    runGuardedMutation: runMutationWithContext,
+                    onScheduleRequested: () => {
+                      setScheduleEditData(null);
+                      setScheduleDialogOpen(true);
+                    },
+                    useCanonicalInteractions
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  PlannedActivitiesSection,
+                  {
+                    activities: plannedActivities,
+                    onComplete: handleMarkDone,
+                    onSchedule: () => {
+                      setScheduleEditData(null);
+                      setScheduleDialogOpen(true);
+                    },
+                    onEdit: handleEditActivity,
+                    onCancel: handleCancelActivity
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  ActivitiesSection,
+                  {
+                    entityId: personId,
+                    entityName: personName,
+                    useCanonicalInteractions,
+                    runGuardedMutation: runMutationWithContext,
+                    onDataRefresh: handleActivityCreated,
+                    refreshKey: activityRefreshKey,
+                    addActionLabel: t("customers.people.detail.activities.add", "Log activity"),
+                    emptyState: {
+                      title: t("customers.people.detail.emptyState.activities.title", "No activities logged yet"),
+                      actionLabel: t("customers.people.detail.emptyState.activities.action", "Log activity")
+                    },
+                    onActionChange: handleSectionActionChange,
+                    onEditActivity: handleEditActivity
+                  }
+                )
+              ] });
+            }
+            if (activeTab === "deals") {
+              return /* @__PURE__ */ jsx(
+                DealsSection,
+                {
+                  scope: dealsScope,
+                  emptyLabel: t("customers.people.detail.empty.deals", "No deals linked to this person."),
+                  addActionLabel: t("customers.people.detail.actions.addDeal", "Add deal"),
+                  emptyState: {
+                    title: t("customers.people.detail.emptyState.deals.title", "No deals yet"),
+                    actionLabel: t("customers.people.detail.emptyState.deals.action", "Create a deal")
+                  },
+                  onActionChange: handleSectionActionChange,
+                  translator: detailTranslator,
+                  runGuardedMutation: runMutationWithContext,
+                  onCountDelta: (delta) => setDealCount((current) => Math.max(0, current + delta))
+                }
+              );
+            }
+            if (activeTab === "companies") {
+              return /* @__PURE__ */ jsx(
+                PersonCompaniesSection,
+                {
+                  personId,
+                  personName,
+                  initialLinkedCompanies: data?.companies ?? [],
+                  onChanged: loadData,
+                  runGuardedMutation: runMutationWithContext
+                }
+              );
+            }
+            if (activeTab === "tasks") {
+              return /* @__PURE__ */ jsx(
+                TasksSection,
+                {
+                  entityId: personId,
+                  initialTasks: [],
+                  useCanonicalInteractions,
+                  runGuardedMutation: runMutationWithContext,
+                  onDataRefresh: loadData,
+                  emptyLabel: t("customers.people.detail.empty.todos", "No tasks linked to this person."),
+                  addActionLabel: t("customers.people.detail.tasks.add", "Add task"),
+                  emptyState: {
+                    title: t("customers.people.detail.emptyState.tasks.title", "Plan what happens next"),
+                    actionLabel: t("customers.people.detail.emptyState.tasks.action", "Create task")
+                  },
+                  onActionChange: handleSectionActionChange,
+                  translator: detailTranslator,
+                  entityName: personName,
+                  dialogContextKey: "customers.people.detail.tasks.dialog.context",
+                  dialogContextFallback: "This task will be linked to {{name}}"
+                }
+              );
+            }
+            if (activeTab === "files") {
+              return /* @__PURE__ */ jsx(
+                AttachmentsSection,
+                {
+                  entityId: E.customers.customer_entity,
+                  recordId: personId,
+                  title: t("customers.people.detail.tabs.files", "Files"),
+                  description: t("customers.people.detail.files.subtitle", "Upload and manage files linked to this person.")
+                }
+              );
+            }
+            if (activeTab === "changelog") {
+              return /* @__PURE__ */ jsx(ChangelogTab, { entityId: personId, entityType: "person" });
+            }
+            return null;
+          })() })
+        }
+      );
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(MobilePersonDetail, { zone1: zone1Content, zone2: zone2Content }) }),
+        /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx(
+          CollapsibleZoneLayout,
+          {
+            pageType: "person-v2",
+            entityName: personName,
+            isDirty,
+            sections: zoneSections,
+            zone1: zone1Content,
+            zone2: zone2Content
+          }
+        ) })
+      ] });
+    })(),
+    /* @__PURE__ */ jsx(InjectionSpot, { spotId: "detail:customers.person:footer", context: injectionContext, data }),
     /* @__PURE__ */ jsx(
-      TagsSection,
+      ScheduleActivityDialog,
       {
+        open: scheduleDialogOpen,
+        onClose: () => {
+          setScheduleDialogOpen(false);
+          setScheduleEditData(null);
+        },
         entityId: personId,
-        tags: data.tags,
-        onChange: handleTagsChange,
-        isSubmitting: false,
-        controllerRef: tagsSectionControllerRef
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      DetailTabsLayout,
-      {
-        className: "space-y-6",
-        tabs,
-        activeTab,
-        onTabChange: setActiveTab,
-        sectionAction,
-        onSectionAction: handleSectionAction,
-        navAriaLabel: t("customers.people.detail.tabs.label", "Person detail sections"),
-        navClassName: "gap-4",
-        children: (() => {
-          const injected = injectedTabMap.get(activeTab);
-          if (injected) return injected();
-          if (activeTab === "notes") {
-            return /* @__PURE__ */ jsx(
-              NotesSection,
-              {
-                entityId: personId,
-                emptyLabel: t("customers.people.detail.empty.comments", "No notes yet."),
-                viewerUserId: data.viewer?.userId ?? null,
-                viewerName: data.viewer?.name ?? null,
-                viewerEmail: data.viewer?.email ?? null,
-                addActionLabel: t("customers.people.detail.notes.addLabel", "Add note"),
-                emptyState: {
-                  title: t("customers.people.detail.emptyState.notes.title", "Keep everyone in the loop"),
-                  actionLabel: t("customers.people.detail.emptyState.notes.action", "Create a note")
-                },
-                onActionChange: handleSectionActionChange,
-                translator: detailTranslator,
-                dataAdapter: notesAdapter,
-                renderIcon: renderDictionaryIcon,
-                renderColor: renderDictionaryColor,
-                iconSuggestions: ICON_SUGGESTIONS,
-                readMarkdownPreference: readMarkdownPreferenceCookie,
-                writeMarkdownPreference: writeMarkdownPreferenceCookie
-              }
-            );
-          }
-          if (activeTab === "activities") {
-            return /* @__PURE__ */ jsx(
-              ActivitiesSection,
-              {
-                entityId: personId,
-                useCanonicalInteractions,
-                runGuardedMutation: runMutationWithContext,
-                onDataRefresh: loadData,
-                addActionLabel: t("customers.people.detail.activities.add", "Log activity"),
-                emptyState: {
-                  title: t("customers.people.detail.emptyState.activities.title", "No activities logged yet"),
-                  actionLabel: t("customers.people.detail.emptyState.activities.action", "Log activity")
-                },
-                onActionChange: handleSectionActionChange
-              }
-            );
-          }
-          if (activeTab === "deals") {
-            return /* @__PURE__ */ jsx(
-              DealsSection,
-              {
-                scope: dealsScope,
-                emptyLabel: t("customers.people.detail.empty.deals", "No deals linked to this person."),
-                addActionLabel: t("customers.people.detail.actions.addDeal", "Add deal"),
-                emptyState: {
-                  title: t("customers.people.detail.emptyState.deals.title", "No deals yet"),
-                  actionLabel: t("customers.people.detail.emptyState.deals.action", "Create a deal")
-                },
-                onActionChange: handleSectionActionChange,
-                translator: detailTranslator,
-                runGuardedMutation: runMutationWithContext
-              }
-            );
-          }
-          if (activeTab === "addresses") {
-            return /* @__PURE__ */ jsx(
-              AddressesSection,
-              {
-                entityId: personId,
-                emptyLabel: t("customers.people.detail.empty.addresses", "No addresses recorded."),
-                addActionLabel: t("customers.people.detail.addresses.add", "Add address"),
-                emptyState: {
-                  title: t("customers.people.detail.emptyState.addresses.title", "No addresses yet"),
-                  actionLabel: t("customers.people.detail.emptyState.addresses.action", "Add address")
-                },
-                onActionChange: handleSectionActionChange,
-                translator: detailTranslator
-              }
-            );
-          }
-          if (activeTab === "tasks") {
-            return /* @__PURE__ */ jsx(
-              TasksSection,
-              {
-                entityId: personId,
-                initialTasks: data.todos,
-                useCanonicalInteractions,
-                runGuardedMutation: runMutationWithContext,
-                onDataRefresh: loadData,
-                emptyLabel: t("customers.people.detail.empty.todos", "No tasks linked to this person."),
-                addActionLabel: t("customers.people.detail.tasks.add", "Add task"),
-                emptyState: {
-                  title: t("customers.people.detail.emptyState.tasks.title", "Plan what happens next"),
-                  actionLabel: t("customers.people.detail.emptyState.tasks.action", "Create task")
-                },
-                onActionChange: handleSectionActionChange,
-                translator: detailTranslator,
-                entityName: personName,
-                dialogContextKey: "customers.people.detail.tasks.dialog.context",
-                dialogContextFallback: "This task will be linked to {{name}}"
-              }
-            );
-          }
-          return null;
-        })()
+        entityName: personName,
+        companyName: data.company?.displayName ?? data.companies?.[0]?.displayName ?? null,
+        entityType: "person",
+        onActivityCreated: handleActivityCreated,
+        editData: scheduleEditData
       }
     ),
-    /* @__PURE__ */ jsx(InjectionSpot, { spotId: "detail:customers.person:footer", context: injectionContext, data })
+    ConfirmDialogElement
   ] }) }) });
 }
 export {