@open-mercato/core 0.6.3-develop.3651.1.d3a548a5f1 → 0.6.3-develop.3653.1.b8558737ae

package/dist/modules/customers/backend/customers/deals/pipeline/page.js

@@ -1,9 +1,36 @@
 "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 { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  MeasuringStrategy,
+  PointerSensor,
+  pointerWithin,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import { ChevronLeft, ChevronRight, Layers, Plus, SlidersHorizontal, Workflow } from "lucide-react";
 import { Page, PageBody } from "@open-mercato/ui/backend/Page";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from "@open-mercato/ui/primitives/breadcrumb";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { SearchInput } from "@open-mercato/ui/primitives/search-input";
+import { Spinner } from "@open-mercato/ui/primitives/spinner";
+import { ErrorNotice } from "@open-mercato/ui/primitives/ErrorNotice";
+import { EmptyState } from "@open-mercato/ui/primitives/empty-state";
 import {
   Select,
   SelectContent,
@@ -11,24 +38,86 @@ import {
   SelectTrigger,
   SelectValue
 } from "@open-mercato/ui/primitives/select";
-import { Layers, MoveRight, Workflow } from "lucide-react";
-import { Spinner } from "@open-mercato/ui/primitives/spinner";
-import { ErrorNotice } from "@open-mercato/ui/primitives/ErrorNotice";
-import { EmptyState } from "@open-mercato/ui/primitives/empty-state";
-import { apiCallOrThrow, readApiResultOrThrow } from "@open-mercato/ui/backend/utils/apiCall";
+import { apiCall, apiCallOrThrow, readApiResultOrThrow } from "@open-mercato/ui/backend/utils/apiCall";
+import { useCurrentUserId } from "@open-mercato/ui/backend/utils/useCurrentUserId";
 import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
+import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
+import { useAppEvent } from "@open-mercato/ui/backend/injection/useAppEvent";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { translateWithFallback } from "@open-mercato/shared/lib/i18n/translate";
 import { useOrganizationScopeVersion } from "@open-mercato/shared/lib/frontend/useOrganizationScope";
-const DEALS_QUERY_LIMIT = 100;
-const dealsQueryKey = (scopeVersion, pipelineId) => ["customers", "deals", "pipeline", `scope:${scopeVersion}`, `pipeline:${pipelineId ?? "none"}`];
-const sortOptions = ["probability", "createdAt", "expectedCloseAt"];
+import { ViewTabsRow } from "./components/ViewTabsRow.js";
+import { LANE_WIDTH_CLASS } from "./components/constants.js";
+import { useCurrencyDictionary } from "../../../../components/detail/hooks/useCurrencyDictionary.js";
+import { FilterBarRow } from "./components/FilterBarRow.js";
+import { Lane } from "./components/Lane.js";
+import { LaneCurrencyBreakdown } from "./components/LaneCurrencyBreakdown.js";
+import { CurrencyFilterPopover } from "./components/CurrencyFilterPopover.js";
+import { AddStageLane } from "./components/AddStageLane.js";
+import {
+  QuickDealDialog
+} from "./components/QuickDealDialog.js";
+import { AddStageDialog } from "./components/AddStageDialog.js";
+import { StatusFilterPopover } from "./components/StatusFilterPopover.js";
+import { PipelineFilterPopover } from "./components/PipelineFilterPopover.js";
+import { SortByPopover } from "./components/SortByPopover.js";
+import { EntityFilterPopover } from "./components/EntityFilterPopover.js";
+import { CloseDateFilterPopover } from "./components/CloseDateFilterPopover.js";
+import { CustomizeViewDialog } from "./components/CustomizeViewDialog.js";
+import {
+  ActivityComposerDialog
+} from "./components/ActivityComposerDialog.js";
+import { BulkActionsBar } from "./components/BulkActionsBar.js";
+import { ChangeStageDialog } from "./components/ChangeStageDialog.js";
+import { ChangeOwnerDialog } from "./components/ChangeOwnerDialog.js";
+import { buildCrudExportUrl, deleteCrud } from "@open-mercato/ui/backend/utils/crud";
+import { runBulkDelete, groupBulkDeleteFailures } from "@open-mercato/ui/backend/utils/bulkDelete";
+import {
+  fetchAssignableStaffMembers
+} from "../../../../components/detail/assignableStaff.js";
+const DEFAULT_SORT = "updated_desc";
+const LANE_PAGE_SIZE = 25;
+const FALLBACK_TONES = ["success", "warning", "error", "info", "neutral", "brand"];
+const EMPTY_DEAL_ARRAY = [];
+const DEFAULT_LANE_WIDTH = 308;
+const MIN_LANE_WIDTH = 240;
+const MAX_LANE_WIDTH = 576;
+const LANE_GAP = 14;
+const LANE_WIDTHS_STORAGE_KEY_PREFIX = "kanban-lane-widths-v2";
+function loadLaneWidths(scopeKey) {
+  if (typeof window === "undefined") return {};
+  try {
+    const raw = window.localStorage.getItem(`${LANE_WIDTHS_STORAGE_KEY_PREFIX}:${scopeKey}`);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== "object") return {};
+    const out = {};
+    for (const [k, v] of Object.entries(parsed)) {
+      if (typeof v === "number" && Number.isFinite(v) && v >= MIN_LANE_WIDTH && v <= MAX_LANE_WIDTH) {
+        out[k] = v;
+      }
+    }
+    return out;
+  } catch {
+    return {};
+  }
+}
+function saveLaneWidths(scopeKey, widths) {
+  if (typeof window === "undefined") return;
+  try {
+    if (Object.keys(widths).length === 0) {
+      window.localStorage.removeItem(`${LANE_WIDTHS_STORAGE_KEY_PREFIX}:${scopeKey}`);
+    } else {
+      window.localStorage.setItem(`${LANE_WIDTHS_STORAGE_KEY_PREFIX}:${scopeKey}`, JSON.stringify(widths));
+    }
+  } catch {
+  }
+}
 function normalizeAmount(value) {
   if (typeof value === "number" && Number.isFinite(value)) return value;
-  if (typeof value === "string") {
-    const trimmed = value.trim();
-    if (!trimmed.length) return null;
-    const parsed = Number(trimmed);
+  if (typeof value === "string" && value.trim().length) {
+    const parsed = Number(value);
     return Number.isFinite(parsed) ? parsed : null;
   }
   return null;
@@ -36,116 +125,189 @@ function normalizeAmount(value) {
 function normalizeProbability(value) {
   const parsed = normalizeAmount(value);
   if (parsed === null) return null;
-  if (parsed < 0) return 0;
-  if (parsed > 100) return 100;
-  return Math.round(parsed);
+  return Math.min(Math.max(Math.round(parsed), 0), 100);
 }
-function normalizeTimestamp(value) {
-  if (typeof value !== "string" || !value.trim().length) return { iso: null, ts: null };
+function normalizeIso(value) {
+  if (typeof value !== "string" || !value.trim().length) return null;
   const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return { iso: null, ts: null };
-  return { iso: date.toISOString(), ts: date.getTime() };
+  return Number.isNaN(date.getTime()) ? null : date.toISOString();
+}
+function normalizeAssociation(entry) {
+  if (!entry || typeof entry !== "object") return null;
+  const ref = entry;
+  const id = typeof ref.id === "string" ? ref.id : null;
+  if (!id) return null;
+  const label = typeof ref.label === "string" && ref.label.trim().length ? ref.label.trim() : id;
+  return { id, label };
 }
-function buildStageDefinitionsFromPipelineStages(pipelineStages, deals, t) {
-  const result = pipelineStages.slice().sort((a, b) => a.order - b.order).map((stage) => ({
+function mapDealRecord(item, fallbackTitle) {
+  const id = typeof item.id === "string" ? item.id : null;
+  if (!id) return null;
+  const title = typeof item.title === "string" && item.title.trim().length ? item.title.trim() : fallbackTitle;
+  const status = typeof item.status === "string" && item.status.trim().length ? item.status.trim() : null;
+  const valueAmount = normalizeAmount(item.value_amount);
+  const valueCurrency = typeof item.value_currency === "string" && item.value_currency.trim().length ? item.value_currency.trim().toUpperCase() : null;
+  const probability = normalizeProbability(item.probability);
+  const expectedCloseAt = normalizeIso(item.expected_close_at);
+  const createdAt = normalizeIso(item.created_at);
+  const updatedAt = normalizeIso(item.updated_at);
+  const ownerUserId = typeof item.owner_user_id === "string" && item.owner_user_id.trim().length ? item.owner_user_id : null;
+  const companies = Array.isArray(item.companies) ? item.companies.map(normalizeAssociation).filter(Boolean) : [];
+  const primaryCompany = companies[0] ?? null;
+  const pipelineState = {
+    openActivitiesCount: typeof item._pipeline?.openActivitiesCount === "number" ? item._pipeline.openActivitiesCount : 0,
+    daysInCurrentStage: typeof item._pipeline?.daysInCurrentStage === "number" ? item._pipeline.daysInCurrentStage : 0,
+    isStuck: !!item._pipeline?.isStuck,
+    isOverdue: !!item._pipeline?.isOverdue
+  };
+  return {
+    id,
+    title,
+    status,
+    valueAmount,
+    valueCurrency,
+    probability,
+    expectedCloseAt,
+    createdAt,
+    updatedAt,
+    owner: ownerUserId ? { userId: ownerUserId, label: "" } : null,
+    primaryCompany,
+    pipelineState
+  };
+}
+const KNOWN_STAGE_TONES = /* @__PURE__ */ new Set([
+  "success",
+  "warning",
+  "info",
+  "error",
+  "neutral",
+  "brand",
+  "pink"
+]);
+function buildLaneStages(stages, unassignedLabel, hasUnassigned) {
+  const sorted = stages.slice().sort((a, b) => a.order - b.order);
+  const lanes = sorted.map((stage, index) => ({
     id: stage.id,
-    value: stage.id,
     label: stage.label,
-    color: null,
-    icon: null
+    // Prefer the stage's persisted tone (now stored as a canonical identifier post-migration)
+    // so colors picked by operators in AddStageDialog actually show up on the kanban. Falls
+    // back to the position-based rotation for stages with no color set or unmapped legacy
+    // values that survived the migration's neutral-fallback arm.
+    tone: stage.color && KNOWN_STAGE_TONES.has(stage.color) ? stage.color : FALLBACK_TONES[index % FALLBACK_TONES.length]
   }));
-  const knownIds = new Set(pipelineStages.map((s) => s.id));
-  const hasUnassigned = deals.some((deal) => !deal.pipelineStageId || !knownIds.has(deal.pipelineStageId));
   if (hasUnassigned) {
-    result.push({
-      id: "stage:__unassigned",
-      value: null,
-      label: translateWithFallback(t, "customers.deals.pipeline.unassigned", "No stage"),
-      color: null,
-      icon: null
-    });
+    lanes.push({ id: "__unassigned", label: unassignedLabel, tone: "neutral" });
   }
-  return result;
-}
-function createDealMap(deals) {
-  return deals.reduce((acc, deal) => acc.set(deal.id, deal), /* @__PURE__ */ new Map());
+  return lanes;
 }
-function groupDealsByStageId(deals) {
-  const byStage = /* @__PURE__ */ new Map();
-  deals.forEach((deal) => {
-    const stageKey = deal.pipelineStageId ?? null;
-    const bucket = byStage.get(stageKey) ?? [];
+function groupDealsByStageId(deals, stageIdByDealId) {
+  const grouped = /* @__PURE__ */ new Map();
+  for (const deal of deals) {
+    const stageKey = stageIdByDealId.get(deal.id) ?? "__unassigned";
+    const bucket = grouped.get(stageKey) ?? [];
     bucket.push(deal);
-    byStage.set(stageKey, bucket);
-  });
-  return byStage;
+    grouped.set(stageKey, bucket);
+  }
+  return grouped;
+}
+function mapSortOptionToApi(option) {
+  switch (option) {
+    case "updated_desc":
+      return { sortField: "updatedAt", sortDir: "desc" };
+    case "updated_asc":
+      return { sortField: "updatedAt", sortDir: "asc" };
+    case "created_desc":
+      return { sortField: "createdAt", sortDir: "desc" };
+    case "value_desc":
+      return { sortField: "value", sortDir: "desc" };
+    case "value_asc":
+      return { sortField: "value", sortDir: "asc" };
+    case "probability_desc":
+      return { sortField: "probability", sortDir: "desc" };
+    case "close_asc":
+      return { sortField: "expectedCloseAt", sortDir: "asc" };
+    case "owner_asc":
+    default:
+      return null;
+  }
 }
 function sortDeals(deals, option) {
-  const sorted = [...deals];
+  const sorted = deals.slice();
   sorted.sort((a, b) => {
-    if (option === "probability") {
-      const ap = typeof a.probability === "number" ? a.probability : -1;
-      const bp = typeof b.probability === "number" ? b.probability : -1;
-      if (ap !== bp) return bp - ap;
-    }
-    if (option === "expectedCloseAt") {
-      const at2 = typeof a.expectedCloseAtTs === "number" ? a.expectedCloseAtTs : Number.POSITIVE_INFINITY;
-      const bt2 = typeof b.expectedCloseAtTs === "number" ? b.expectedCloseAtTs : Number.POSITIVE_INFINITY;
-      if (at2 !== bt2) return at2 - bt2;
-    }
-    const at = typeof a.createdAtTs === "number" ? a.createdAtTs : Number.NEGATIVE_INFINITY;
-    const bt = typeof b.createdAtTs === "number" ? b.createdAtTs : Number.NEGATIVE_INFINITY;
-    if (option === "createdAt") {
-      if (at !== bt) return bt - at;
-    } else if (option === "expectedCloseAt" || option === "probability") {
-      if (at !== bt) return bt - at;
+    switch (option) {
+      case "value_desc":
+      case "value_asc": {
+        const aValue = typeof a.valueAmount === "number" ? a.valueAmount : Number.NEGATIVE_INFINITY;
+        const bValue = typeof b.valueAmount === "number" ? b.valueAmount : Number.NEGATIVE_INFINITY;
+        return option === "value_desc" ? bValue - aValue : aValue - bValue;
+      }
+      case "probability_desc": {
+        const aProb = typeof a.probability === "number" ? a.probability : -1;
+        const bProb = typeof b.probability === "number" ? b.probability : -1;
+        return bProb - aProb;
+      }
+      case "close_asc": {
+        const aTs = a.expectedCloseAt ? new Date(a.expectedCloseAt).getTime() : Number.POSITIVE_INFINITY;
+        const bTs = b.expectedCloseAt ? new Date(b.expectedCloseAt).getTime() : Number.POSITIVE_INFINITY;
+        return aTs - bTs;
+      }
+      case "created_desc": {
+        const aTs = a.createdAt ? new Date(a.createdAt).getTime() : 0;
+        const bTs = b.createdAt ? new Date(b.createdAt).getTime() : 0;
+        return bTs - aTs;
+      }
+      case "owner_asc": {
+        const aLabel = a.owner?.label ?? a.owner?.userId ?? "";
+        const bLabel = b.owner?.label ?? b.owner?.userId ?? "";
+        return aLabel.localeCompare(bLabel);
+      }
+      case "updated_asc":
+        return (a.updatedAt ?? a.createdAt ?? "").localeCompare(b.updatedAt ?? b.createdAt ?? "");
+      case "updated_desc":
+      default:
+        return (b.updatedAt ?? b.createdAt ?? "").localeCompare(a.updatedAt ?? a.createdAt ?? "");
     }
-    return a.title.localeCompare(b.title, void 0, { sensitivity: "base" });
   });
   return sorted;
 }
-function formatCurrency(amount, currency, fallback) {
-  if (amount === null || Number.isNaN(amount)) return fallback;
-  const code = currency && currency.length === 3 ? currency.toUpperCase() : "USD";
-  try {
-    return new Intl.NumberFormat(void 0, {
-      style: "currency",
-      currency: code,
-      maximumFractionDigits: 2
-    }).format(amount);
-  } catch {
-    return `${code} ${amount.toFixed(2)}`;
-  }
-}
-function formatProbability(probability, fallback) {
-  if (typeof probability !== "number" || Number.isNaN(probability)) return fallback;
-  return `${probability}%`;
-}
-function SalesPipelinePage() {
+function DealsKanbanPage() {
   const t = useT();
-  const translate = React.useCallback(
-    (key, fallback, params) => {
-      const value = translateWithFallback(t, key, fallback, params);
-      if (value === fallback && params) {
-        return fallback.replace(/\{\{(\w+)\}\}|\{(\w+)\}/g, (match, doubleToken, singleToken) => {
-          const token = doubleToken ?? singleToken;
-          if (!token) return match;
-          const replacement = params[token];
-          if (replacement === void 0) {
-            return doubleToken ? `{{${token}}}` : `{${token}}`;
-          }
-          return String(replacement);
-        });
-      }
-      return value;
-    },
-    [t]
-  );
+  const router = useRouter();
   const scopeVersion = useOrganizationScopeVersion();
   const queryClient = useQueryClient();
-  const [sortBy, setSortBy] = React.useState("probability");
-  const [pendingDealId, setPendingDealId] = React.useState(null);
   const [selectedPipelineId, setSelectedPipelineId] = React.useState(null);
+  const [search, setSearch] = React.useState("");
+  const [sortBy, setSortBy] = React.useState(DEFAULT_SORT);
+  const [statusFilters, setStatusFilters] = React.useState([]);
+  const [ownerFilters, setOwnerFilters] = React.useState([]);
+  const [peopleFilters, setPeopleFilters] = React.useState([]);
+  const [companyFilters, setCompanyFilters] = React.useState([]);
+  const [closeDateFilter, setCloseDateFilter] = React.useState({ from: null, to: null });
+  const [currencyFilter, setCurrencyFilter] = React.useState(null);
+  const [ownerLabels, setOwnerLabels] = React.useState({});
+  const [peopleLabels, setPeopleLabels] = React.useState({});
+  const [companyLabels, setCompanyLabels] = React.useState({});
+  const [selectedDealIds, setSelectedDealIds] = React.useState(/* @__PURE__ */ new Set());
+  const [pendingDealId, setPendingDealId] = React.useState(null);
+  const [quickDealContext, setQuickDealContext] = React.useState(null);
+  const [addStageContext, setAddStageContext] = React.useState(null);
+  const [customizeOpen, setCustomizeOpen] = React.useState(false);
+  const [activityContext, setActivityContext] = React.useState(null);
+  const [changeStageOpen, setChangeStageOpen] = React.useState(false);
+  const [changeOwnerOpen, setChangeOwnerOpen] = React.useState(false);
+  const [isBulkMutating, setIsBulkMutating] = React.useState(false);
+  const [singleMoveStageContext, setSingleMoveStageContext] = React.useState(null);
+  const { confirm, ConfirmDialogElement } = useConfirmDialog();
+  const fallbackTitle = translateWithFallback(
+    t,
+    "customers.deals.pipeline.untitled",
+    "Untitled deal"
+  );
+  const unassignedLabel = translateWithFallback(
+    t,
+    "customers.deals.pipeline.unassigned",
+    "No stage"
+  );
   const pipelinesQuery = useQuery({
     queryKey: ["customers", "pipelines", `scope:${scopeVersion}`],
     staleTime: 6e4,
@@ -153,7 +315,13 @@ function SalesPipelinePage() {
       const payload = await readApiResultOrThrow(
         "/api/customers/pipelines",
         void 0,
-        { errorMessage: translate("customers.deals.pipeline.loadError", "Failed to load pipelines.") }
+        {
+          errorMessage: translateWithFallback(
+            t,
+            "customers.deals.pipeline.loadError",
+            "Failed to load pipelines."
+          )
+        }
       );
       return payload?.items ?? [];
     }
@@ -162,381 +330,2128 @@ function SalesPipelinePage() {
     if (selectedPipelineId) return;
     const pipelines = pipelinesQuery.data;
     if (!pipelines || !pipelines.length) return;
-    const defaultPipeline = pipelines.find((p) => p.isDefault) ?? pipelines[0];
+    const defaultPipeline = pipelines.find((pipeline) => pipeline.isDefault) ?? pipelines[0];
     if (defaultPipeline) setSelectedPipelineId(defaultPipeline.id);
   }, [pipelinesQuery.data, selectedPipelineId]);
+  const staffQuery = useQuery({
+    queryKey: ["customers", "deals", "kanban", "staff", `scope:${scopeVersion}`],
+    staleTime: 3e5,
+    queryFn: async () => fetchAssignableStaffMembers("", { pageSize: 100 })
+  });
+  const ownerNamesById = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const member of staffQuery.data ?? []) {
+      if (member.userId && member.displayName) map.set(member.userId, member.displayName);
+    }
+    return map;
+  }, [staffQuery.data]);
+  const currentUserId = useCurrentUserId();
+  const currentUserLabel = React.useMemo(() => {
+    if (!currentUserId) return void 0;
+    return ownerNamesById.get(currentUserId);
+  }, [currentUserId, ownerNamesById]);
+  const laneWidthsScopeKey = React.useMemo(
+    () => `${currentUserId ?? "anon"}:${selectedPipelineId ?? "none"}`,
+    [currentUserId, selectedPipelineId]
+  );
+  const [laneWidths, setLaneWidths] = React.useState({});
+  React.useEffect(() => {
+    setLaneWidths(loadLaneWidths(laneWidthsScopeKey));
+  }, [laneWidthsScopeKey]);
+  React.useEffect(() => {
+    const handle = window.setTimeout(() => saveLaneWidths(laneWidthsScopeKey, laneWidths), 250);
+    return () => window.clearTimeout(handle);
+  }, [laneWidthsScopeKey, laneWidths]);
+  const handleLaneResize = React.useCallback(
+    (stageId, deltaPx) => {
+      setLaneWidths((prev) => {
+        const current = prev[stageId] ?? DEFAULT_LANE_WIDTH;
+        const next = Math.max(MIN_LANE_WIDTH, Math.min(MAX_LANE_WIDTH, current + deltaPx));
+        if (next === current) return prev;
+        return { ...prev, [stageId]: next };
+      });
+    },
+    []
+  );
+  const handleResetLaneWidth = React.useCallback((stageId) => {
+    setLaneWidths((prev) => {
+      if (!(stageId in prev)) return prev;
+      const { [stageId]: _omit, ...rest } = prev;
+      return rest;
+    });
+  }, []);
+  const handleResetAllLaneWidths = React.useCallback(() => {
+    setLaneWidths({});
+  }, []);
+  const currencyDictionary = useCurrencyDictionary();
+  const companiesQuery = useQuery({
+    queryKey: ["customers", "companies", "kanban-quick-deal", `scope:${scopeVersion}`],
+    staleTime: 3e5,
+    queryFn: async () => {
+      const call = await apiCall(
+        "/api/customers/companies?page=1&pageSize=100&sortField=display_name&sortDir=asc"
+      );
+      if (!call.ok) return [];
+      const items = Array.isArray(call.result?.items) ? call.result.items : [];
+      const options = [];
+      for (const item of items) {
+        const id = typeof item.id === "string" ? item.id : null;
+        const displayName = typeof item.display_name === "string" && item.display_name.trim().length ? item.display_name.trim() : null;
+        if (id && displayName) options.push({ id, label: displayName });
+      }
+      return options;
+    }
+  });
   const stagesQuery = useQuery({
     queryKey: ["customers", "pipeline-stages", `scope:${scopeVersion}`, `pipeline:${selectedPipelineId}`],
     enabled: !!selectedPipelineId,
     staleTime: 3e4,
     queryFn: async () => {
+      if (!selectedPipelineId) return [];
       const payload = await readApiResultOrThrow(
         `/api/customers/pipeline-stages?pipelineId=${encodeURIComponent(selectedPipelineId)}`,
         void 0,
-        { errorMessage: translate("customers.deals.pipeline.loadError", "Failed to load stages.") }
+        {
+          errorMessage: translateWithFallback(
+            t,
+            "customers.deals.pipeline.loadError",
+            "Failed to load stages."
+          )
+        }
       );
       return payload?.items ?? [];
     }
   });
-  const dealsKey = React.useMemo(() => dealsQueryKey(scopeVersion, selectedPipelineId), [scopeVersion, selectedPipelineId]);
-  const dealsQuery = useQuery({
-    queryKey: dealsKey,
+  const [extraCardsByStage, setExtraCardsByStage] = React.useState({});
+  const [loadingMoreByStage, setLoadingMoreByStage] = React.useState({});
+  React.useEffect(() => {
+    setExtraCardsByStage({});
+    setLoadingMoreByStage({});
+  }, [selectedPipelineId, search, statusFilters, ownerFilters, peopleFilters, companyFilters, closeDateFilter, currencyFilter]);
+  const filterSignature = React.useMemo(
+    () => ({
+      pipelineId: selectedPipelineId,
+      search: search.trim(),
+      status: statusFilters.slice().sort().join(","),
+      owners: ownerFilters.slice().sort().join(","),
+      people: peopleFilters.slice().sort().join(","),
+      companies: companyFilters.slice().sort().join(","),
+      closeFrom: closeDateFilter.from ?? "",
+      closeTo: closeDateFilter.to ?? "",
+      currency: currencyFilter ?? ""
+    }),
+    [selectedPipelineId, search, statusFilters, ownerFilters, peopleFilters, companyFilters, closeDateFilter, currencyFilter]
+  );
+  const aggregateQuery = useQuery({
+    queryKey: [
+      "customers",
+      "deals",
+      "kanban-aggregate",
+      `scope:${scopeVersion}`,
+      `pipeline:${selectedPipelineId ?? "none"}`,
+      `search:${filterSignature.search}`,
+      `status:${filterSignature.status}`,
+      `owners:${filterSignature.owners}`,
+      `people:${filterSignature.people}`,
+      `companies:${filterSignature.companies}`,
+      `close:${filterSignature.closeFrom}-${filterSignature.closeTo}`
+    ],
     enabled: !!selectedPipelineId,
     staleTime: 3e4,
     queryFn: async () => {
-      const search = new URLSearchParams();
-      search.set("page", "1");
-      search.set("pageSize", String(DEALS_QUERY_LIMIT));
-      search.set("sortField", "createdAt");
-      search.set("sortDir", "desc");
-      if (selectedPipelineId) search.set("pipelineId", selectedPipelineId);
-      const payload = await readApiResultOrThrow(
-        `/api/customers/deals?${search.toString()}`,
-        void 0,
-        { errorMessage: translate("customers.deals.pipeline.loadError", "Failed to load deals.") }
+      if (!selectedPipelineId) return null;
+      const params = new URLSearchParams();
+      params.set("pipelineId", selectedPipelineId);
+      if (filterSignature.search.length) params.set("search", filterSignature.search);
+      for (const status of statusFilters) params.append("status", status);
+      for (const ownerId of ownerFilters) params.append("ownerUserId", ownerId);
+      for (const personId of peopleFilters) params.append("personId", personId);
+      for (const companyId of companyFilters) params.append("companyId", companyId);
+      if (closeDateFilter.from) params.set("expectedCloseAtFrom", closeDateFilter.from);
+      if (closeDateFilter.to) params.set("expectedCloseAtTo", closeDateFilter.to);
+      const call = await apiCall(
+        `/api/customers/deals/aggregate?${params.toString()}`
       );
-      const items = Array.isArray(payload?.items) ? payload.items : [];
-      const deals2 = [];
-      items.forEach((item) => {
-        if (!item || typeof item !== "object") return;
-        const data = item;
-        const id = typeof data.id === "string" ? data.id : null;
-        if (!id) return;
-        const title = typeof data.title === "string" && data.title.trim().length ? data.title.trim() : translate("customers.deals.pipeline.untitled", "Untitled deal");
-        const status = typeof data.status === "string" && data.status.trim().length ? data.status.trim() : null;
-        const stage = typeof data.pipeline_stage === "string" && data.pipeline_stage.trim().length ? data.pipeline_stage.trim() : null;
-        const amount = normalizeAmount(data.value_amount);
-        const currency = typeof data.value_currency === "string" && data.value_currency.trim().length ? data.value_currency.trim().toUpperCase() : null;
-        const probability = normalizeProbability(data.probability);
-        const expected = normalizeTimestamp(data.expected_close_at);
-        const created = normalizeTimestamp(data.created_at);
-        const updated = normalizeTimestamp(data.updated_at);
-        const rawPeople = Array.isArray(data.people) ? data.people : [];
-        const people = rawPeople.map((entry) => {
-          if (!entry || typeof entry !== "object") return null;
-          const ref = entry;
-          const personId = typeof ref.id === "string" ? ref.id : null;
-          if (!personId) return null;
-          const label = typeof ref.label === "string" && ref.label.trim().length ? ref.label.trim() : personId;
-          return { id: personId, label };
-        }).filter((entry) => !!entry);
-        const rawCompanies = Array.isArray(data.companies) ? data.companies : [];
-        const companies = rawCompanies.map((entry) => {
-          if (!entry || typeof entry !== "object") return null;
-          const ref = entry;
-          const companyId = typeof ref.id === "string" ? ref.id : null;
-          if (!companyId) return null;
-          const label = typeof ref.label === "string" && ref.label.trim().length ? ref.label.trim() : companyId;
-          return { id: companyId, label };
-        }).filter((entry) => !!entry);
-        deals2.push({
-          id,
-          title,
-          status,
-          pipelineStage: stage,
-          pipelineId: typeof data.pipeline_id === "string" ? data.pipeline_id : null,
-          pipelineStageId: typeof data.pipeline_stage_id === "string" ? data.pipeline_stage_id : null,
-          valueAmount: amount,
-          valueCurrency: currency,
-          probability,
-          expectedCloseAt: expected.iso,
-          expectedCloseAtTs: expected.ts,
-          createdAt: created.iso,
-          createdAtTs: created.ts,
-          updatedAt: updated.iso,
-          people,
-          companies
-        });
+      return call.ok ? call.result ?? null : null;
+    }
+  });
+  const aggregateByStage = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    const data = aggregateQuery.data;
+    if (!data) return map;
+    for (const row of data.perStage) {
+      map.set(row.stageId, {
+        count: row.count,
+        totalInBaseCurrency: row.totalInBaseCurrency,
+        byCurrency: row.byCurrency,
+        baseCurrencyCode: data.baseCurrencyCode,
+        // Default to "complete conversion" when the field is absent (older response, or no
+        // base currency case where the route still returns the field). The aggregate route
+        // explicitly sets `convertedAll: false` when at least one currency was excluded.
+        convertedAll: row.convertedAll ?? true,
+        missingRateCurrencies: row.missingRateCurrencies ?? []
       });
-      const total2 = typeof payload?.total === "number" ? payload.total : deals2.length;
-      return { deals: deals2, total: total2 };
     }
+    return map;
+  }, [aggregateQuery.data]);
+  const stagesData = stagesQuery.data ?? [];
+  const aggregateData = aggregateQuery.data;
+  const lanes = React.useMemo(() => {
+    const knownStageIds = new Set(stagesData.map((stage) => stage.id));
+    const hasUnassigned = (aggregateData?.perStage ?? []).some(
+      (row) => row.stageId === "__unassigned" || !!row.stageId && !knownStageIds.has(row.stageId)
+    );
+    return buildLaneStages(stagesData, unassignedLabel, hasUnassigned);
+  }, [stagesData, aggregateData, unassignedLabel]);
+  const apiSort = React.useMemo(() => {
+    const mapped = mapSortOptionToApi(sortBy);
+    return mapped ?? { sortField: "updatedAt", sortDir: "desc" };
+  }, [sortBy]);
+  const laneQueries = useQueries({
+    queries: lanes.map((stage) => {
+      return {
+        queryKey: [
+          "customers",
+          "deals",
+          "kanban-lane",
+          `scope:${scopeVersion}`,
+          `pipeline:${filterSignature.pipelineId ?? "none"}`,
+          `search:${filterSignature.search}`,
+          `status:${filterSignature.status}`,
+          `owners:${filterSignature.owners}`,
+          `people:${filterSignature.people}`,
+          `companies:${filterSignature.companies}`,
+          `close:${filterSignature.closeFrom}-${filterSignature.closeTo}`,
+          // Sort affects which 25 deals come back on page 1, so it MUST be in the key —
+          // otherwise switching from "Value (high to low)" to "Close (soonest)" reuses
+          // the old (wrong-sort) cache and silently keeps the wrong slice on screen.
+          `sort:${apiSort.sortField}:${apiSort.sortDir}`,
+          `currency:${filterSignature.currency}`,
+          `stage:${stage.id}`
+        ],
+        enabled: !!selectedPipelineId,
+        staleTime: 3e4,
+        queryFn: async () => {
+          if (!selectedPipelineId) return { items: [], total: 0 };
+          const params = new URLSearchParams();
+          params.set("page", "1");
+          params.set("pageSize", String(LANE_PAGE_SIZE));
+          params.set("pipelineId", selectedPipelineId);
+          params.set("pipelineStageId", stage.id);
+          params.set("sortField", apiSort.sortField);
+          params.set("sortDir", apiSort.sortDir);
+          if (filterSignature.search.length) params.set("search", filterSignature.search);
+          for (const status of statusFilters) params.append("status", status);
+          for (const ownerId of ownerFilters) params.append("ownerUserId", ownerId);
+          for (const personId of peopleFilters) params.append("personId", personId);
+          for (const companyId of companyFilters) params.append("companyId", companyId);
+          if (closeDateFilter.from) params.set("expectedCloseAtFrom", closeDateFilter.from);
+          if (closeDateFilter.to) params.set("expectedCloseAtTo", closeDateFilter.to);
+          if (currencyFilter) params.set("valueCurrency", currencyFilter);
+          const payload = await readApiResultOrThrow(
+            `/api/customers/deals?${params.toString()}`,
+            void 0,
+            {
+              errorMessage: translateWithFallback(
+                t,
+                "customers.deals.pipeline.loadError",
+                "Failed to load deals."
+              )
+            }
+          );
+          const items = Array.isArray(payload?.items) ? payload.items : [];
+          return { items, total: typeof payload?.total === "number" ? payload.total : items.length };
+        }
+      };
+    })
   });
-  const deals = dealsQuery.data?.deals ?? [];
-  const total = dealsQuery.data?.total ?? deals.length;
-  const dealMap = React.useMemo(() => createDealMap(deals), [deals]);
-  const groupedDeals = React.useMemo(() => groupDealsByStageId(deals), [deals]);
-  const stages = React.useMemo(
-    () => buildStageDefinitionsFromPipelineStages(stagesQuery.data ?? [], deals, t),
-    [stagesQuery.data, deals, t]
-  );
-  const dateFormatter = React.useMemo(
-    () => new Intl.DateTimeFormat(void 0, {
-      dateStyle: "medium"
-    }),
+  const laneState = React.useMemo(() => {
+    const dealsByStage2 = /* @__PURE__ */ new Map();
+    const stageIdByDealId2 = /* @__PURE__ */ new Map();
+    const allDeals = [];
+    let total2 = 0;
+    laneQueries.forEach((query, idx) => {
+      const stage = lanes[idx];
+      if (!stage) return;
+      const firstPage = query.data?.items ?? [];
+      const extra = extraCardsByStage[stage.id] ?? [];
+      const seen = /* @__PURE__ */ new Set();
+      const merged = [];
+      for (const item of [...firstPage, ...extra]) {
+        if (!item.id || seen.has(item.id)) continue;
+        seen.add(item.id);
+        merged.push(item);
+      }
+      const list = [];
+      for (const item of merged) {
+        const mapped = mapDealRecord(item, fallbackTitle);
+        if (!mapped) continue;
+        list.push(mapped);
+        const stageId = typeof item.pipeline_stage_id === "string" && item.pipeline_stage_id.trim().length ? item.pipeline_stage_id : "__unassigned";
+        stageIdByDealId2.set(mapped.id, stageId);
+        allDeals.push(mapped);
+      }
+      dealsByStage2.set(stage.id, list);
+      total2 += list.length;
+    });
+    return { dealsByStage: dealsByStage2, stageIdByDealId: stageIdByDealId2, allDeals, total: total2 };
+  }, [laneQueries, lanes, fallbackTitle, extraCardsByStage]);
+  const rawDeals = laneState.allDeals;
+  const stageIdByDealId = laneState.stageIdByDealId;
+  const total = aggregateData?.perStage?.reduce((sum, row) => sum + row.count, 0) ?? laneState.total;
+  const boardSummary = React.useMemo(() => {
+    const perStage = aggregateData?.perStage ?? [];
+    if (perStage.length === 0) {
+      return null;
+    }
+    const totalsByCurrency = /* @__PURE__ */ new Map();
+    let totalInBaseCurrency = 0;
+    let convertedAll = true;
+    const missingRateCurrencies = /* @__PURE__ */ new Set();
+    for (const row of perStage) {
+      totalInBaseCurrency += row.totalInBaseCurrency;
+      if (!(row.convertedAll ?? true)) convertedAll = false;
+      for (const c of row.missingRateCurrencies ?? []) missingRateCurrencies.add(c);
+      for (const cur of row.byCurrency) {
+        const entry = totalsByCurrency.get(cur.currency) ?? { total: 0, count: 0 };
+        entry.total += cur.total;
+        entry.count += cur.count;
+        totalsByCurrency.set(cur.currency, entry);
+      }
+    }
+    const rows = Array.from(totalsByCurrency.entries()).map(([currency, value]) => ({ currency, total: value.total, count: value.count })).sort((a, b) => b.total - a.total);
+    return {
+      baseCurrencyCode: aggregateData?.baseCurrencyCode ?? null,
+      totalInBaseCurrency,
+      convertedAll,
+      missingRateCurrencies: Array.from(missingRateCurrencies),
+      rows
+    };
+  }, [aggregateData]);
+  const deals = React.useMemo(() => {
+    if (ownerNamesById.size === 0) return rawDeals;
+    return rawDeals.map((deal) => {
+      if (!deal.owner) return deal;
+      const resolvedLabel = ownerNamesById.get(deal.owner.userId);
+      if (!resolvedLabel || resolvedLabel === deal.owner.label) return deal;
+      return { ...deal, owner: { ...deal.owner, label: resolvedLabel } };
+    });
+  }, [ownerNamesById, rawDeals]);
+  const dealsByStage = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (ownerNamesById.size === 0) {
+      for (const [stageId, list] of laneState.dealsByStage) map.set(stageId, list);
+      return map;
+    }
+    for (const [stageId, list] of laneState.dealsByStage) {
+      map.set(
+        stageId,
+        list.map((deal) => {
+          if (!deal.owner) return deal;
+          const resolvedLabel = ownerNamesById.get(deal.owner.userId);
+          if (!resolvedLabel || resolvedLabel === deal.owner.label) return deal;
+          return { ...deal, owner: { ...deal.owner, label: resolvedLabel } };
+        })
+      );
+    }
+    return map;
+  }, [laneState.dealsByStage, ownerNamesById]);
+  const sortedDealsByStage = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const [stageId, list] of dealsByStage) {
+      map.set(stageId, sortDeals(list, sortBy));
+    }
+    return map;
+  }, [dealsByStage, sortBy]);
+  const handleLoadMoreInLane = React.useCallback(
+    async (stageId) => {
+      if (!selectedPipelineId) return;
+      if (loadingMoreByStage[stageId]) return;
+      const already = extraCardsByStage[stageId]?.length ?? 0;
+      const nextPage = Math.floor((LANE_PAGE_SIZE + already) / LANE_PAGE_SIZE) + 1;
+      setLoadingMoreByStage((prev) => ({ ...prev, [stageId]: true }));
+      try {
+        const params = new URLSearchParams();
+        params.set("page", String(nextPage));
+        params.set("pageSize", String(LANE_PAGE_SIZE));
+        params.set("pipelineId", selectedPipelineId);
+        params.set("pipelineStageId", stageId);
+        params.set("sortField", apiSort.sortField);
+        params.set("sortDir", apiSort.sortDir);
+        if (filterSignature.search.length) params.set("search", filterSignature.search);
+        for (const status of statusFilters) params.append("status", status);
+        for (const ownerId of ownerFilters) params.append("ownerUserId", ownerId);
+        for (const personId of peopleFilters) params.append("personId", personId);
+        for (const companyId of companyFilters) params.append("companyId", companyId);
+        if (closeDateFilter.from) params.set("expectedCloseAtFrom", closeDateFilter.from);
+        if (closeDateFilter.to) params.set("expectedCloseAtTo", closeDateFilter.to);
+        if (currencyFilter) params.set("valueCurrency", currencyFilter);
+        const call = await apiCall(
+          `/api/customers/deals?${params.toString()}`
+        );
+        if (!call.ok) return;
+        const items = Array.isArray(call.result?.items) ? call.result.items : [];
+        setExtraCardsByStage((prev) => ({
+          ...prev,
+          [stageId]: [...prev[stageId] ?? [], ...items]
+        }));
+      } finally {
+        setLoadingMoreByStage((prev) => {
+          const next = { ...prev };
+          delete next[stageId];
+          return next;
+        });
+      }
+    },
+    [
+      selectedPipelineId,
+      loadingMoreByStage,
+      extraCardsByStage,
+      filterSignature.search,
+      statusFilters,
+      ownerFilters,
+      peopleFilters,
+      companyFilters,
+      closeDateFilter.from,
+      closeDateFilter.to,
+      apiSort
+    ]
+  );
+  const isInitialLoading = !!selectedPipelineId && lanes.length === 0 ? stagesQuery.isLoading : laneQueries.some((laneQuery) => laneQuery.isLoading && !laneQuery.data);
+  const firstError = laneQueries.find((laneQuery) => laneQuery.isError)?.error ?? null;
+  const invalidateKanbanData = React.useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: ["customers", "deals", "kanban-lane"] }).catch(() => {
+    });
+    queryClient.invalidateQueries({ queryKey: ["customers", "deals", "kanban-aggregate"] }).catch(() => {
+    });
+    setExtraCardsByStage({});
+  }, [queryClient]);
+  const trackedBulkProgressJobIdsRef = React.useRef(/* @__PURE__ */ new Set());
+  const trackBulkProgressJob = React.useCallback((jobId) => {
+    if (!jobId) return;
+    trackedBulkProgressJobIdsRef.current.add(jobId);
+  }, []);
+  const clearTrackedBulkProgressJob = React.useCallback((jobId) => {
+    if (!jobId) return false;
+    return trackedBulkProgressJobIdsRef.current.delete(jobId);
+  }, []);
+  useAppEvent(
+    "progress.job.completed",
+    (event) => {
+      const payload = event.payload;
+      const jobId = typeof payload?.jobId === "string" ? payload.jobId : null;
+      if (!clearTrackedBulkProgressJob(jobId)) return;
+      invalidateKanbanData();
+    },
+    [clearTrackedBulkProgressJob, invalidateKanbanData]
+  );
+  useAppEvent(
+    "progress.job.failed",
+    (event) => {
+      const payload = event.payload;
+      const jobId = typeof payload?.jobId === "string" ? payload.jobId : null;
+      clearTrackedBulkProgressJob(jobId);
+    },
+    [clearTrackedBulkProgressJob]
+  );
+  useAppEvent(
+    "progress.job.cancelled",
+    (event) => {
+      const payload = event.payload;
+      const jobId = typeof payload?.jobId === "string" ? payload.jobId : null;
+      clearTrackedBulkProgressJob(jobId);
+    },
+    [clearTrackedBulkProgressJob]
+  );
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+  const [activeDragDealId, setActiveDragDealId] = React.useState(null);
+  const activeDragDeal = React.useMemo(
+    () => activeDragDealId ? deals.find((deal) => deal.id === activeDragDealId) ?? null : null,
+    [activeDragDealId, deals]
+  );
+  const collisionDetection = React.useCallback((args) => pointerWithin(args), []);
+  const measuringConfig = React.useMemo(
+    () => ({ droppable: { strategy: MeasuringStrategy.BeforeDragging } }),
     []
   );
-  const updateStageMutation = useMutation({
-    mutationFn: async ({ id, pipelineStageId }) => {
-      await apiCallOrThrow(
-        "/api/customers/deals",
-        {
-          method: "PUT",
-          headers: { "content-type": "application/json" },
-          body: JSON.stringify({ id, pipelineStageId })
+  const moveMutationContextId = "customers-deals-kanban:stage-move";
+  const { runMutation: runMoveMutation, retryLastMutation } = useGuardedMutation({
+    contextId: moveMutationContextId,
+    blockedMessage: translateWithFallback(
+      t,
+      "ui.forms.flash.saveBlocked",
+      "Save blocked by validation"
+    )
+  });
+  const dealMutationContextId = "customers-deals-kanban:deal-mutation";
+  const { runMutation: runDealMutation, retryLastMutation: retryDealMutation } = useGuardedMutation({
+    contextId: dealMutationContextId,
+    blockedMessage: translateWithFallback(
+      t,
+      "ui.forms.flash.saveBlocked",
+      "Save blocked by validation"
+    )
+  });
+  const moveDealToStage = React.useCallback(
+    (dealId, targetStageId) => {
+      if (!targetStageId || targetStageId === "__unassigned") return;
+      const currentStageId = stageIdByDealId.get(dealId);
+      if (currentStageId === targetStageId) return;
+      const laneCachePredicate = { queryKey: ["customers", "deals", "kanban-lane"] };
+      const snapshot = queryClient.getQueriesData(laneCachePredicate);
+      const extraSnapshot = extraCardsByStage;
+      let movingItem = null;
+      for (const [key, data] of snapshot) {
+        if (!data) continue;
+        const idx = data.items.findIndex((it) => it.id === dealId);
+        if (idx < 0) continue;
+        const stageKey = key.find((part) => typeof part === "string" && part.startsWith("stage:"));
+        if (typeof stageKey !== "string") continue;
+        const stageId = stageKey.slice("stage:".length);
+        if (stageId === currentStageId) {
+          queryClient.setQueryData(key, {
+            ...data,
+            items: data.items.filter((it) => it.id !== dealId),
+            total: Math.max(0, data.total - 1)
+          });
+          movingItem = { ...data.items[idx], pipeline_stage_id: targetStageId };
+        }
+      }
+      if (!movingItem && currentStageId) {
+        const extras = extraCardsByStage[currentStageId] ?? [];
+        const found = extras.find((it) => it.id === dealId);
+        if (found) movingItem = { ...found, pipeline_stage_id: targetStageId };
+      }
+      if (currentStageId && extraCardsByStage[currentStageId]?.some((it) => it.id === dealId)) {
+        setExtraCardsByStage((prev) => {
+          const list = prev[currentStageId] ?? [];
+          return { ...prev, [currentStageId]: list.filter((it) => it.id !== dealId) };
+        });
+      }
+      if (movingItem) {
+        for (const [key, data] of snapshot) {
+          if (!data) continue;
+          const stageKey = key.find((part) => typeof part === "string" && part.startsWith("stage:"));
+          if (typeof stageKey !== "string") continue;
+          const stageId = stageKey.slice("stage:".length);
+          if (stageId !== targetStageId) continue;
+          queryClient.setQueryData(key, {
+            ...data,
+            items: [movingItem, ...data.items],
+            total: data.total + 1
+          });
+        }
+      }
+      setPendingDealId(dealId);
+      runMoveMutation({
+        operation: async () => {
+          await apiCallOrThrow(
+            "/api/customers/deals",
+            {
+              method: "PUT",
+              headers: { "content-type": "application/json" },
+              body: JSON.stringify({ id: dealId, pipelineStageId: targetStageId })
+            },
+            {
+              errorMessage: translateWithFallback(
+                t,
+                "customers.deals.pipeline.moveError",
+                "Failed to update deal stage."
+              )
+            }
+          );
         },
-        { errorMessage: translate("customers.deals.pipeline.moveError", "Failed to update deal stage.") }
-      );
-      return { id, pipelineStageId };
+        context: {
+          formId: moveMutationContextId,
+          resourceKind: "customers.deal",
+          resourceId: dealId,
+          retryLastMutation
+        }
+      }).then(() => {
+        flash(
+          translateWithFallback(t, "customers.deals.pipeline.moveSuccess", "Deal updated."),
+          "success"
+        );
+      }).catch((error) => {
+        for (const [key, data] of snapshot) {
+          queryClient.setQueryData(key, data);
+        }
+        setExtraCardsByStage(extraSnapshot);
+        const message = error instanceof Error && error.message ? error.message : translateWithFallback(
+          t,
+          "customers.deals.pipeline.moveError",
+          "Failed to update deal stage."
+        );
+        flash(message, "error");
+      }).finally(() => {
+        setPendingDealId(null);
+        invalidateKanbanData();
+      });
     },
-    onMutate: async ({ id, pipelineStageId }) => {
-      setPendingDealId(id);
-      await queryClient.cancelQueries({ queryKey: dealsKey });
-      const previous = queryClient.getQueryData(dealsKey);
-      if (previous) {
-        const nextDeals = previous.deals.map(
-          (deal) => deal.id === id ? { ...deal, pipelineStageId } : deal
+    [invalidateKanbanData, queryClient, retryLastMutation, runMoveMutation, stageIdByDealId, t]
+  );
+  const bulkMoveDealsToStage = React.useCallback(
+    async (dealIds, targetStageId) => {
+      if (!targetStageId || targetStageId === "__unassigned" || dealIds.length === 0) return;
+      const uniqueIds = Array.from(new Set(dealIds));
+      const idsToMove = uniqueIds.filter((id) => stageIdByDealId.get(id) !== targetStageId);
+      if (idsToMove.length === 0) return;
+      const laneCachePredicate = { queryKey: ["customers", "deals", "kanban-lane"] };
+      const snapshot = queryClient.getQueriesData(laneCachePredicate);
+      const extraSnapshot = extraCardsByStage;
+      const newExtras = { ...extraCardsByStage };
+      for (const dealId of idsToMove) {
+        const currentStageId = stageIdByDealId.get(dealId);
+        if (!currentStageId) continue;
+        let movingItem = null;
+        for (const [key, data] of snapshot) {
+          if (!data) continue;
+          const stageKey = key.find(
+            (part) => typeof part === "string" && part.startsWith("stage:")
+          );
+          if (typeof stageKey !== "string") continue;
+          const stageId = stageKey.slice("stage:".length);
+          if (stageId !== currentStageId) continue;
+          const current = queryClient.getQueryData(
+            key
+          );
+          if (!current) continue;
+          const idx = current.items.findIndex((it) => it.id === dealId);
+          if (idx < 0) continue;
+          movingItem = { ...current.items[idx], pipeline_stage_id: targetStageId };
+          queryClient.setQueryData(key, {
+            ...current,
+            items: current.items.filter((it) => it.id !== dealId),
+            total: Math.max(0, current.total - 1)
+          });
+          break;
+        }
+        if (!movingItem) {
+          const extras = newExtras[currentStageId] ?? [];
+          const found = extras.find((it) => it.id === dealId);
+          if (found) {
+            movingItem = { ...found, pipeline_stage_id: targetStageId };
+            newExtras[currentStageId] = extras.filter((it) => it.id !== dealId);
+          }
+        } else if (newExtras[currentStageId]?.some((it) => it.id === dealId)) {
+          newExtras[currentStageId] = (newExtras[currentStageId] ?? []).filter((it) => it.id !== dealId);
+        }
+        if (!movingItem) continue;
+        for (const [key, data] of snapshot) {
+          if (!data) continue;
+          const stageKey = key.find(
+            (part) => typeof part === "string" && part.startsWith("stage:")
+          );
+          if (typeof stageKey !== "string") continue;
+          const stageId = stageKey.slice("stage:".length);
+          if (stageId !== targetStageId) continue;
+          const current = queryClient.getQueryData(
+            key
+          );
+          if (!current) continue;
+          queryClient.setQueryData(key, {
+            ...current,
+            items: [movingItem, ...current.items],
+            total: current.total + 1
+          });
+        }
+      }
+      setExtraCardsByStage(newExtras);
+      setIsBulkMutating(true);
+      let progressJobId = null;
+      try {
+        await runDealMutation({
+          operation: async () => {
+            const call = await apiCallOrThrow(
+              "/api/customers/deals/bulk-update-stage",
+              {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({
+                  ids: idsToMove,
+                  pipelineStageId: targetStageId
+                })
+              },
+              {
+                errorMessage: translateWithFallback(
+                  t,
+                  "customers.deals.kanban.bulk.changeStage.error",
+                  "Failed to start bulk stage update."
+                )
+              }
+            );
+            progressJobId = call.result?.progressJobId ?? null;
+          },
+          context: {
+            formId: dealMutationContextId,
+            resourceKind: "customers.deals.bulk_stage",
+            resourceId: idsToMove.join(","),
+            retryLastMutation: retryDealMutation
+          }
+        });
+        flash(
+          translateWithFallback(
+            t,
+            "customers.deals.kanban.bulk.changeStage.queued",
+            "Bulk stage update started ({count} deals).",
+            { count: idsToMove.length }
+          ),
+          "success"
         );
-        queryClient.setQueryData(dealsKey, { ...previous, deals: nextDeals });
+        if (progressJobId) {
+          trackBulkProgressJob(progressJobId);
+        }
+      } catch (error) {
+        for (const [key, data] of snapshot) {
+          queryClient.setQueryData(key, data);
+        }
+        setExtraCardsByStage(extraSnapshot);
+        const message = error instanceof Error && error.message ? error.message : translateWithFallback(
+          t,
+          "customers.deals.kanban.bulk.changeStage.error",
+          "Failed to start bulk stage update."
+        );
+        flash(message, "error");
+      } finally {
+        setIsBulkMutating(false);
       }
-      return { previous };
     },
-    onError: (error, _variables, context) => {
-      if (context?.previous) {
-        queryClient.setQueryData(dealsKey, context.previous);
+    [
+      dealMutationContextId,
+      extraCardsByStage,
+      queryClient,
+      retryDealMutation,
+      runDealMutation,
+      stageIdByDealId,
+      t,
+      trackBulkProgressJob
+    ]
+  );
+  const boardScrollerRef = React.useRef(null);
+  const LANE_STEP = 322;
+  const [scrollEdges, setScrollEdges] = React.useState({
+    atStart: true,
+    atEnd: false
+  });
+  const EDGE_TOLERANCE = 4;
+  const updateScrollEdges = React.useCallback(() => {
+    const el = boardScrollerRef.current;
+    if (!el) return;
+    const maxScroll = el.scrollWidth - el.clientWidth;
+    const nextAtStart = el.scrollLeft <= EDGE_TOLERANCE;
+    const nextAtEnd = maxScroll <= EDGE_TOLERANCE || el.scrollLeft >= maxScroll - EDGE_TOLERANCE;
+    setScrollEdges(
+      (prev) => prev.atStart === nextAtStart && prev.atEnd === nextAtEnd ? prev : { atStart: nextAtStart, atEnd: nextAtEnd }
+    );
+  }, []);
+  const cleanupScrollerRef = React.useRef(null);
+  const setBoardScroller = React.useCallback(
+    (el) => {
+      cleanupScrollerRef.current?.();
+      cleanupScrollerRef.current = null;
+      boardScrollerRef.current = el;
+      if (!el) return;
+      updateScrollEdges();
+      el.addEventListener("scroll", updateScrollEdges, { passive: true });
+      const ro = new ResizeObserver(updateScrollEdges);
+      ro.observe(el);
+      cleanupScrollerRef.current = () => {
+        el.removeEventListener("scroll", updateScrollEdges);
+        ro.disconnect();
+      };
+    },
+    [updateScrollEdges]
+  );
+  React.useEffect(() => {
+    updateScrollEdges();
+  }, [updateScrollEdges, lanes.length]);
+  const activeAnimRef = React.useRef(null);
+  const animateScrollTo = React.useCallback(
+    (el, target) => {
+      activeAnimRef.current?.cancel();
+      const startLeft = el.scrollLeft;
+      const clampedTarget = Math.max(0, Math.min(el.scrollWidth - el.clientWidth, target));
+      const distance = clampedTarget - startLeft;
+      if (Math.abs(distance) < 1) {
+        updateScrollEdges();
+        return;
       }
-      const message = error instanceof Error && error.message ? error.message : translate("customers.deals.pipeline.moveError", "Failed to update deal stage.");
-      flash(message, "error");
+      const duration = 200;
+      const hasRaf = typeof window !== "undefined" && typeof window.requestAnimationFrame === "function";
+      const now = () => typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+      const startTime = now();
+      let handle = 0;
+      let cancelled = false;
+      const step = () => {
+        if (cancelled) return;
+        const t2 = Math.min(1, (now() - startTime) / duration);
+        const eased = 1 - Math.pow(1 - t2, 3);
+        el.scrollLeft = startLeft + distance * eased;
+        if (t2 < 1) {
+          handle = hasRaf ? window.requestAnimationFrame(step) : window.setTimeout(step, 16);
+        } else {
+          updateScrollEdges();
+        }
+      };
+      handle = hasRaf ? window.requestAnimationFrame(step) : window.setTimeout(step, 16);
+      activeAnimRef.current = {
+        cancel: () => {
+          cancelled = true;
+          if (hasRaf) window.cancelAnimationFrame(handle);
+          else window.clearTimeout(handle);
+        }
+      };
     },
-    onSuccess: () => {
-      flash(translate("customers.deals.pipeline.moveSuccess", "Deal updated."), "success");
+    [updateScrollEdges]
+  );
+  const laneOffsets = React.useMemo(() => {
+    const offsets = [];
+    let left = 0;
+    for (const stage of lanes) {
+      offsets.push(left);
+      const w = laneWidths[stage.id] ?? DEFAULT_LANE_WIDTH;
+      left += w + LANE_GAP;
+    }
+    return offsets;
+  }, [lanes, laneWidths]);
+  const stepScroll = React.useCallback(
+    (direction) => {
+      const el = boardScrollerRef.current;
+      if (!el) return false;
+      const sl = el.scrollLeft;
+      const maxScroll = Math.max(0, el.scrollWidth - el.clientWidth);
+      if (maxScroll <= EDGE_TOLERANCE) return false;
+      if (direction < 0 && sl <= EDGE_TOLERANCE) return false;
+      if (direction > 0 && sl >= maxScroll - EDGE_TOLERANCE) return false;
+      let target;
+      if (direction > 0) {
+        const next = laneOffsets.find((off) => off > sl + EDGE_TOLERANCE);
+        target = next ?? maxScroll;
+      } else {
+        let prev = 0;
+        for (const off of laneOffsets) {
+          if (off >= sl - EDGE_TOLERANCE) break;
+          prev = off;
+        }
+        target = prev;
+      }
+      if (target > maxScroll - EDGE_TOLERANCE) target = maxScroll;
+      if (target < EDGE_TOLERANCE) target = 0;
+      if (Math.abs(target - sl) < 1) return false;
+      animateScrollTo(el, target);
+      window.setTimeout(() => {
+        if (!boardScrollerRef.current) return;
+        const cur = boardScrollerRef.current.scrollLeft;
+        if (Math.abs(cur - target) > EDGE_TOLERANCE) {
+          boardScrollerRef.current.scrollLeft = target;
+        }
+        updateScrollEdges();
+      }, 240);
+      return true;
     },
-    onSettled: () => {
-      setPendingDealId(null);
-      queryClient.invalidateQueries({ queryKey: dealsKey }).catch(() => {
-      });
+    [animateScrollTo, updateScrollEdges, laneOffsets]
+  );
+  const holdTimerRef = React.useRef(null);
+  const stopContinuousScroll = React.useCallback(() => {
+    if (holdTimerRef.current !== null) {
+      window.clearInterval(holdTimerRef.current);
+      holdTimerRef.current = null;
     }
-  });
-  const [draggingId, setDraggingId] = React.useState(null);
-  const [activeLane, setActiveLane] = React.useState(null);
-  const handleActionClick = React.useCallback((event) => {
-    event.stopPropagation();
-  }, []);
-  const handleSortChange = React.useCallback((value) => {
-    if (sortOptions.includes(value)) setSortBy(value);
   }, []);
-  const handleDragStart = React.useCallback((dealId) => {
-    setDraggingId(dealId);
+  const startContinuousScroll = React.useCallback(
+    (direction) => {
+      stopContinuousScroll();
+      const moved = stepScroll(direction);
+      if (!moved) return;
+      const HOLD_DELAY = 320;
+      const REPEAT_INTERVAL = 240;
+      holdTimerRef.current = window.setTimeout(function repeat() {
+        const more = stepScroll(direction);
+        if (!more) {
+          stopContinuousScroll();
+          return;
+        }
+        holdTimerRef.current = window.setTimeout(repeat, REPEAT_INTERVAL);
+      }, HOLD_DELAY);
+    },
+    [stepScroll, stopContinuousScroll]
+  );
+  React.useEffect(() => {
+    return () => stopContinuousScroll();
+  }, [stopContinuousScroll]);
+  const lastPointerDownAtRef = React.useRef(0);
+  const handleScrollPrev = React.useCallback(() => {
+    if (Date.now() - lastPointerDownAtRef.current < 500) return;
+    stepScroll(-1);
+  }, [stepScroll]);
+  const handleScrollNext = React.useCallback(() => {
+    if (Date.now() - lastPointerDownAtRef.current < 500) return;
+    stepScroll(1);
+  }, [stepScroll]);
+  const handleHoldPrevStart = React.useCallback(() => {
+    lastPointerDownAtRef.current = Date.now();
+    startContinuousScroll(-1);
+  }, [startContinuousScroll]);
+  const handleHoldNextStart = React.useCallback(() => {
+    lastPointerDownAtRef.current = Date.now();
+    startContinuousScroll(1);
+  }, [startContinuousScroll]);
+  React.useEffect(() => {
+    const onKey = (event) => {
+      if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+      if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+      const target = event.target;
+      if (target) {
+        const tag = target.tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+        if (target.isContentEditable) return;
+      }
+      if (typeof document !== "undefined") {
+        if (document.querySelector('[role="dialog"][data-state="open"], [role="alertdialog"][data-state="open"]')) return;
+        if (document.querySelector('[data-radix-popper-content-wrapper] [data-state="open"]')) return;
+      }
+      if (!boardScrollerRef.current) return;
+      event.preventDefault();
+      stepScroll(event.key === "ArrowRight" ? 1 : -1);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [stepScroll]);
+  const handleDragStart = React.useCallback((event) => {
+    const id = typeof event.active.id === "string" ? event.active.id : null;
+    setActiveDragDealId(id);
   }, []);
-  const handleDragEnd = React.useCallback(() => {
-    setDraggingId(null);
-    setActiveLane(null);
+  const handleDragCancel = React.useCallback(() => {
+    setActiveDragDealId(null);
   }, []);
-  const handleDrop = React.useCallback(
-    (stage) => async (event) => {
-      event.preventDefault();
-      setActiveLane(null);
-      const dealId = event.dataTransfer.getData("text/plain") || draggingId;
+  const handleDragEnd = React.useCallback(
+    (event) => {
+      setActiveDragDealId(null);
+      const dealId = typeof event.active.id === "string" ? event.active.id : null;
       if (!dealId) return;
-      const deal = dealMap.get(dealId);
+      const overId = event.over?.id;
+      if (typeof overId !== "string") return;
+      let targetStageId = null;
+      if (overId.startsWith("lane:")) {
+        targetStageId = overId.slice("lane:".length);
+      } else {
+        targetStageId = stageIdByDealId.get(overId) ?? null;
+      }
+      if (!targetStageId) return;
+      const isBulkDrag = selectedDealIds.has(dealId) && selectedDealIds.size > 1;
+      if (isBulkDrag) {
+        void bulkMoveDealsToStage(Array.from(selectedDealIds), targetStageId);
+      } else {
+        moveDealToStage(dealId, targetStageId);
+      }
+    },
+    [bulkMoveDealsToStage, moveDealToStage, selectedDealIds, stageIdByDealId]
+  );
+  const bulkDragActive = React.useMemo(
+    () => activeDragDealId !== null && selectedDealIds.has(activeDragDealId) && selectedDealIds.size > 1,
+    [activeDragDealId, selectedDealIds]
+  );
+  const handleToggleSelect = React.useCallback((dealId) => {
+    setSelectedDealIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(dealId)) next.delete(dealId);
+      else next.add(dealId);
+      return next;
+    });
+  }, []);
+  const handleOpenDetail = React.useCallback(
+    (dealId) => {
+      router.push(`/backend/customers/deals/${dealId}`);
+    },
+    [router]
+  );
+  const handleComingSoon = React.useCallback(
+    (label) => {
+      flash(
+        translateWithFallback(
+          t,
+          "customers.deals.kanban.comingSoon",
+          "{feature} arrives in the next iteration.",
+          { feature: label }
+        ),
+        "info"
+      );
+    },
+    [t]
+  );
+  const handleChipClick = React.useCallback(
+    (chipId) => {
+      handleComingSoon(
+        translateWithFallback(
+          t,
+          "customers.deals.kanban.filter.aria.chip",
+          "Filter by {label}",
+          { label: chipId }
+        )
+      );
+    },
+    [handleComingSoon, t]
+  );
+  const handleCustomizeView = React.useCallback(() => {
+    setCustomizeOpen(true);
+  }, []);
+  const handleResetView = React.useCallback(() => {
+    setStatusFilters([]);
+    setOwnerFilters([]);
+    setPeopleFilters([]);
+    setCompanyFilters([]);
+    setCloseDateFilter({ from: null, to: null });
+    setCurrencyFilter(null);
+    setSearch("");
+    setSortBy(DEFAULT_SORT);
+  }, []);
+  const activePipelineName = React.useMemo(() => {
+    if (!selectedPipelineId) return "";
+    return pipelinesQuery.data?.find((pipeline) => pipeline.id === selectedPipelineId)?.name ?? "";
+  }, [pipelinesQuery.data, selectedPipelineId]);
+  const stageLabelById = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const lane of lanes) map.set(lane.id, lane.label);
+    return map;
+  }, [lanes]);
+  const handleQuickAdd = React.useCallback(
+    (stageId) => {
+      if (!selectedPipelineId) return;
+      const stageLabel = stageLabelById.get(stageId);
+      if (!stageLabel || stageId === "__unassigned") return;
+      setQuickDealContext({
+        pipelineId: selectedPipelineId,
+        pipelineName: activePipelineName,
+        pipelineStageId: stageId,
+        pipelineStageLabel: stageLabel
+      });
+    },
+    [activePipelineName, selectedPipelineId, stageLabelById]
+  );
+  const handleAddStage = React.useCallback(() => {
+    if (!selectedPipelineId) return;
+    const orderedStages = stagesData.filter((stage) => stage.pipelineId === selectedPipelineId).slice().sort((a, b) => a.order - b.order).map((stage) => ({ id: stage.id, label: stage.label, order: stage.order }));
+    setAddStageContext({
+      pipelineId: selectedPipelineId,
+      pipelineName: activePipelineName,
+      existingStages: orderedStages
+    });
+  }, [activePipelineName, selectedPipelineId, stagesData]);
+  const handleDialogCreated = React.useCallback(() => {
+    invalidateKanbanData();
+    queryClient.invalidateQueries({
+      queryKey: ["customers", "pipeline-stages", `scope:${scopeVersion}`, `pipeline:${selectedPipelineId}`]
+    }).catch(() => {
+    });
+  }, [invalidateKanbanData, scopeVersion, selectedPipelineId]);
+  const updateDealStatus = React.useCallback(
+    async (dealId, status) => {
+      setPendingDealId(dealId);
+      try {
+        await runDealMutation({
+          operation: async () => {
+            await apiCallOrThrow(
+              "/api/customers/deals",
+              {
+                method: "PUT",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({ id: dealId, status })
+              },
+              {
+                errorMessage: translateWithFallback(
+                  t,
+                  "customers.deals.kanban.menu.error.status",
+                  "Failed to update deal status."
+                )
+              }
+            );
+          },
+          context: {
+            formId: dealMutationContextId,
+            resourceKind: "customers.deal",
+            resourceId: dealId,
+            retryLastMutation: retryDealMutation
+          }
+        });
+        flash(
+          status === "win" ? translateWithFallback(
+            t,
+            "customers.deals.kanban.menu.markWon.success",
+            "Deal marked as won."
+          ) : translateWithFallback(
+            t,
+            "customers.deals.kanban.menu.markLost.success",
+            "Deal marked as lost."
+          ),
+          "success"
+        );
+        invalidateKanbanData();
+      } catch (error) {
+        const message = error instanceof Error && error.message ? error.message : translateWithFallback(
+          t,
+          "customers.deals.kanban.menu.error.status",
+          "Failed to update deal status."
+        );
+        flash(message, "error");
+      } finally {
+        setPendingDealId(null);
+      }
+    },
+    [invalidateKanbanData, retryDealMutation, runDealMutation, t]
+  );
+  const deleteDeal = React.useCallback(
+    async (dealId, dealTitle) => {
+      const confirmed = await confirm({
+        title: translateWithFallback(
+          t,
+          "customers.deals.kanban.menu.delete.confirmTitle",
+          "Delete deal \u201C{title}\u201D?",
+          { title: dealTitle }
+        ),
+        text: translateWithFallback(
+          t,
+          "customers.deals.kanban.menu.delete.confirmText",
+          "This action cannot be undone."
+        ),
+        variant: "destructive",
+        confirmText: translateWithFallback(t, "customers.deals.kanban.menu.delete", "Delete")
+      });
+      if (!confirmed) return;
+      setPendingDealId(dealId);
+      try {
+        await runDealMutation({
+          operation: async () => {
+            await deleteCrud("customers/deals", {
+              body: { id: dealId },
+              errorMessage: translateWithFallback(
+                t,
+                "customers.deals.kanban.menu.delete.error",
+                "Failed to delete deal."
+              )
+            });
+          },
+          context: {
+            formId: dealMutationContextId,
+            resourceKind: "customers.deal",
+            resourceId: dealId,
+            retryLastMutation: retryDealMutation
+          }
+        });
+        flash(
+          translateWithFallback(t, "customers.deals.kanban.menu.delete.success", "Deal deleted."),
+          "success"
+        );
+        invalidateKanbanData();
+      } catch (error) {
+        const message = error instanceof Error && error.message ? error.message : translateWithFallback(
+          t,
+          "customers.deals.kanban.menu.delete.error",
+          "Failed to delete deal."
+        );
+        flash(message, "error");
+      } finally {
+        setPendingDealId(null);
+      }
+    },
+    [confirm, invalidateKanbanData, retryDealMutation, runDealMutation, t]
+  );
+  const bulkSelectionSummary = React.useMemo(() => {
+    if (selectedDealIds.size === 0) return { count: 0, totalLabel: null, currency: null, ids: [] };
+    const totalsByCurrency = /* @__PURE__ */ new Map();
+    const ids = [];
+    for (const deal of deals) {
+      if (!selectedDealIds.has(deal.id)) continue;
+      ids.push(deal.id);
+      if (typeof deal.valueAmount === "number" && Number.isFinite(deal.valueAmount) && deal.valueAmount > 0) {
+        const code = deal.valueCurrency && deal.valueCurrency.length === 3 ? deal.valueCurrency.toUpperCase() : "USD";
+        totalsByCurrency.set(code, (totalsByCurrency.get(code) ?? 0) + deal.valueAmount);
+      }
+    }
+    const rows = Array.from(totalsByCurrency.entries()).map(([code, amount]) => ({ code, amount })).sort((a, b) => b.amount - a.amount);
+    const formatOne = (code, amount) => {
+      try {
+        return new Intl.NumberFormat(void 0, {
+          style: "currency",
+          currency: code,
+          maximumFractionDigits: 0
+        }).format(amount);
+      } catch {
+        return `${code} ${Math.round(amount)}`;
+      }
+    };
+    let totalLabel = null;
+    if (rows.length === 1) {
+      totalLabel = formatOne(rows[0].code, rows[0].amount);
+    } else if (rows.length >= 2) {
+      const visible = rows.slice(0, 3).map((row) => formatOne(row.code, row.amount));
+      const overflow = rows.length - visible.length;
+      totalLabel = overflow > 0 ? `${visible.join(" + ")} +${overflow}` : visible.join(" + ");
+    }
+    const currency = rows.length === 1 ? rows[0].code : null;
+    return { count: ids.length, totalLabel, currency, ids };
+  }, [deals, selectedDealIds]);
+  const handleBulkClear = React.useCallback(() => {
+    setSelectedDealIds(/* @__PURE__ */ new Set());
+  }, []);
+  const stageOptions = React.useMemo(
+    () => (stagesQuery.data ?? []).slice().sort((a, b) => a.order - b.order).map((stage) => ({ id: stage.id, label: stage.label })),
+    [stagesQuery.data]
+  );
+  const handleBulkChangeStage = React.useCallback(
+    async (stageId) => {
+      if (bulkSelectionSummary.ids.length === 0) return;
+      setIsBulkMutating(true);
+      let progressJobId = null;
+      try {
+        await runDealMutation({
+          operation: async () => {
+            const call = await apiCallOrThrow(
+              "/api/customers/deals/bulk-update-stage",
+              {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({
+                  ids: bulkSelectionSummary.ids,
+                  pipelineStageId: stageId
+                })
+              },
+              {
+                errorMessage: translateWithFallback(
+                  t,
+                  "customers.deals.kanban.bulk.changeStage.error",
+                  "Failed to start bulk stage update."
+                )
+              }
+            );
+            progressJobId = call.result?.progressJobId ?? null;
+          },
+          context: {
+            formId: dealMutationContextId,
+            resourceKind: "customers.deals.bulk_stage",
+            resourceId: bulkSelectionSummary.ids.join(","),
+            retryLastMutation: retryDealMutation
+          }
+        });
+        flash(
+          translateWithFallback(
+            t,
+            "customers.deals.kanban.bulk.changeStage.queued",
+            "Bulk stage update started ({count} deals).",
+            { count: bulkSelectionSummary.count }
+          ),
+          "success"
+        );
+        setChangeStageOpen(false);
+        setSelectedDealIds(/* @__PURE__ */ new Set());
+        if (progressJobId) {
+          trackBulkProgressJob(progressJobId);
+        }
+        invalidateKanbanData();
+      } catch (error) {
+        const message = error instanceof Error && error.message ? error.message : translateWithFallback(
+          t,
+          "customers.deals.kanban.bulk.changeStage.error",
+          "Failed to start bulk stage update."
+        );
+        flash(message, "error");
+      } finally {
+        setIsBulkMutating(false);
+      }
+    },
+    [
+      bulkSelectionSummary.count,
+      bulkSelectionSummary.ids,
+      dealMutationContextId,
+      invalidateKanbanData,
+      retryDealMutation,
+      runDealMutation,
+      t,
+      trackBulkProgressJob
+    ]
+  );
+  const handleBulkChangeOwner = React.useCallback(
+    async (ownerUserId) => {
+      if (bulkSelectionSummary.ids.length === 0) return;
+      setIsBulkMutating(true);
+      let progressJobId = null;
+      try {
+        await runDealMutation({
+          operation: async () => {
+            const call = await apiCallOrThrow(
+              "/api/customers/deals/bulk-update-owner",
+              {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({
+                  ids: bulkSelectionSummary.ids,
+                  ownerUserId
+                })
+              },
+              {
+                errorMessage: translateWithFallback(
+                  t,
+                  "customers.deals.kanban.bulk.changeOwner.error",
+                  "Failed to start bulk owner update."
+                )
+              }
+            );
+            progressJobId = call.result?.progressJobId ?? null;
+          },
+          context: {
+            formId: dealMutationContextId,
+            resourceKind: "customers.deals.bulk_owner",
+            resourceId: bulkSelectionSummary.ids.join(","),
+            retryLastMutation: retryDealMutation
+          }
+        });
+        flash(
+          translateWithFallback(
+            t,
+            "customers.deals.kanban.bulk.changeOwner.queued",
+            "Bulk owner update started ({count} deals).",
+            { count: bulkSelectionSummary.count }
+          ),
+          "success"
+        );
+        setChangeOwnerOpen(false);
+        setSelectedDealIds(/* @__PURE__ */ new Set());
+        if (progressJobId) {
+          trackBulkProgressJob(progressJobId);
+        }
+        invalidateKanbanData();
+      } catch (error) {
+        const message = error instanceof Error && error.message ? error.message : translateWithFallback(
+          t,
+          "customers.deals.kanban.bulk.changeOwner.error",
+          "Failed to start bulk owner update."
+        );
+        flash(message, "error");
+      } finally {
+        setIsBulkMutating(false);
+      }
+    },
+    [
+      bulkSelectionSummary.count,
+      bulkSelectionSummary.ids,
+      dealMutationContextId,
+      invalidateKanbanData,
+      retryDealMutation,
+      runDealMutation,
+      t,
+      trackBulkProgressJob
+    ]
+  );
+  const handleBulkExport = React.useCallback(() => {
+    if (bulkSelectionSummary.ids.length === 0) return;
+    const url = buildCrudExportUrl(
+      "customers/deals",
+      {
+        ids: bulkSelectionSummary.ids.join(","),
+        exportScope: "view"
+      },
+      "csv"
+    );
+    if (typeof window !== "undefined") {
+      window.open(url, "_blank", "noopener");
+    }
+  }, [bulkSelectionSummary.ids]);
+  const handleBulkDelete = React.useCallback(async () => {
+    if (bulkSelectionSummary.ids.length === 0) return;
+    const confirmed = await confirm({
+      title: translateWithFallback(
+        t,
+        "customers.deals.kanban.bulk.delete.title",
+        "Delete {count} deals?",
+        { count: bulkSelectionSummary.count }
+      ),
+      text: translateWithFallback(
+        t,
+        "customers.deals.kanban.bulk.delete.text",
+        "This action cannot be undone."
+      ),
+      variant: "destructive",
+      confirmText: translateWithFallback(t, "customers.deals.kanban.bulk.delete", "Delete")
+    });
+    if (!confirmed) return;
+    const rows = deals.filter((deal) => selectedDealIds.has(deal.id)).map((deal) => ({ id: deal.id }));
+    setIsBulkMutating(true);
+    try {
+      const { succeeded, failures } = await runBulkDelete(
+        rows,
+        async (row) => {
+          await deleteCrud("customers/deals", {
+            body: { id: row.id },
+            errorMessage: translateWithFallback(
+              t,
+              "customers.deals.kanban.menu.delete.error",
+              "Failed to delete deal."
+            )
+          });
+        },
+        {
+          fallbackErrorMessage: translateWithFallback(
+            t,
+            "customers.deals.kanban.menu.delete.error",
+            "Failed to delete deal."
+          ),
+          logTag: "customers.deals.kanban",
+          progress: {
+            jobType: "customers.deals.bulk_delete",
+            name: translateWithFallback(
+              t,
+              "customers.deals.kanban.bulk.delete.progress.name",
+              "Delete selected deals"
+            ),
+            description: translateWithFallback(
+              t,
+              "customers.deals.kanban.bulk.delete.progress.description",
+              "{count} deals queued for deletion",
+              { count: rows.length }
+            ),
+            meta: { source: "customers.deals.kanban" }
+          }
+        }
+      );
+      if (succeeded.length > 0) {
+        flash(
+          translateWithFallback(
+            t,
+            "customers.deals.kanban.bulk.delete.success",
+            "{count} deals deleted.",
+            { count: succeeded.length }
+          ),
+          failures.length === 0 ? "success" : "warning"
+        );
+      }
+      for (const group of groupBulkDeleteFailures(failures)) {
+        const message = group.count === 1 ? group.sampleMessage : translateWithFallback(
+          t,
+          "customers.deals.kanban.bulk.delete.failedGroup",
+          "{count} deals could not be deleted: {message}",
+          { count: group.count, message: group.sampleMessage }
+        );
+        flash(message, "error");
+      }
+      setSelectedDealIds(/* @__PURE__ */ new Set());
+      invalidateKanbanData();
+    } finally {
+      setIsBulkMutating(false);
+    }
+  }, [
+    bulkSelectionSummary.count,
+    bulkSelectionSummary.ids,
+    confirm,
+    deals,
+    queryClient,
+    selectedDealIds,
+    t
+  ]);
+  const duplicateDeal = React.useCallback(
+    async (deal) => {
+      setPendingDealId(deal.id);
+      try {
+        const stageId = stageIdByDealId.get(deal.id) ?? null;
+        const payload = {
+          title: translateWithFallback(
+            t,
+            "customers.deals.kanban.menu.duplicate.titleSuffix",
+            "{title} (copy)",
+            { title: deal.title }
+          ),
+          status: "open"
+        };
+        if (selectedPipelineId) payload.pipelineId = selectedPipelineId;
+        if (stageId && stageId !== "__unassigned") payload.pipelineStageId = stageId;
+        if (typeof deal.valueAmount === "number") payload.valueAmount = deal.valueAmount;
+        if (deal.valueCurrency) payload.valueCurrency = deal.valueCurrency;
+        if (typeof deal.probability === "number") payload.probability = deal.probability;
+        if (deal.expectedCloseAt) payload.expectedCloseAt = deal.expectedCloseAt;
+        if (deal.owner?.userId) payload.ownerUserId = deal.owner.userId;
+        await runDealMutation({
+          operation: async () => {
+            await apiCallOrThrow(
+              "/api/customers/deals",
+              {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify(payload)
+              },
+              {
+                errorMessage: translateWithFallback(
+                  t,
+                  "customers.deals.kanban.menu.duplicate.error",
+                  "Failed to duplicate deal."
+                )
+              }
+            );
+          },
+          context: {
+            formId: dealMutationContextId,
+            resourceKind: "customers.deal",
+            resourceId: deal.id,
+            retryLastMutation: retryDealMutation
+          }
+        });
+        flash(
+          translateWithFallback(
+            t,
+            "customers.deals.kanban.menu.duplicate.success",
+            "Deal duplicated."
+          ),
+          "success"
+        );
+        invalidateKanbanData();
+      } catch (error) {
+        const message = error instanceof Error && error.message ? error.message : translateWithFallback(
+          t,
+          "customers.deals.kanban.menu.duplicate.error",
+          "Failed to duplicate deal."
+        );
+        flash(message, "error");
+      } finally {
+        setPendingDealId(null);
+      }
+    },
+    [
+      queryClient,
+      retryDealMutation,
+      runDealMutation,
+      selectedPipelineId,
+      stageIdByDealId,
+      t
+    ]
+  );
+  const buildMenuItems = React.useCallback(
+    (deal) => [
+      {
+        id: "open",
+        label: translateWithFallback(t, "customers.deals.kanban.menu.open", "Open deal"),
+        onSelect: () => handleOpenDetail(deal.id)
+      },
+      {
+        id: "edit",
+        label: translateWithFallback(t, "customers.deals.kanban.menu.edit", "Edit"),
+        onSelect: () => handleOpenDetail(deal.id)
+      },
+      {
+        id: "duplicate",
+        label: translateWithFallback(t, "customers.deals.kanban.menu.duplicate", "Duplicate"),
+        onSelect: () => void duplicateDeal(deal)
+      },
+      {
+        id: "move-stage",
+        label: translateWithFallback(t, "customers.deals.kanban.menu.moveStage", "Move stage\u2026"),
+        onSelect: () => setSingleMoveStageContext({
+          dealId: deal.id,
+          currentStageId: stageIdByDealId.get(deal.id) ?? null
+        })
+      },
+      {
+        id: "mark-won",
+        label: translateWithFallback(t, "customers.deals.kanban.menu.markWon", "Mark as Won"),
+        onSelect: () => void updateDealStatus(deal.id, "win")
+      },
+      {
+        id: "mark-lost",
+        label: translateWithFallback(t, "customers.deals.kanban.menu.markLost", "Mark as Lost"),
+        onSelect: () => void updateDealStatus(deal.id, "loose")
+      },
+      {
+        id: "delete",
+        label: translateWithFallback(t, "customers.deals.kanban.menu.delete", "Delete"),
+        destructive: true,
+        onSelect: () => void deleteDeal(deal.id, deal.title)
+      }
+    ],
+    [
+      deleteDeal,
+      duplicateDeal,
+      handleOpenDetail,
+      stageIdByDealId,
+      t,
+      updateDealStatus
+    ]
+  );
+  const handleComposeActivity = React.useCallback(
+    (dealId, type) => {
+      const deal = deals.find((entry) => entry.id === dealId);
       if (!deal) return;
-      if (stage.value === null) {
+      const entityId = deal.primaryCompany?.id;
+      if (!entityId) {
         flash(
-          translate("customers.deals.pipeline.unassignedDisabled", 'Moving to "No stage" is not supported.'),
+          translateWithFallback(
+            t,
+            "customers.deals.kanban.activityComposer.noEntity",
+            "Link a company to this deal before logging activities here."
+          ),
           "info"
         );
         return;
       }
-      if (deal.pipelineStageId === stage.value) return;
-      updateStageMutation.mutate({ id: dealId, pipelineStageId: stage.value });
+      setActivityContext({
+        dealId,
+        dealTitle: deal.title,
+        type,
+        entityId
+      });
     },
-    [dealMap, draggingId, translate, updateStageMutation]
+    [deals, t]
   );
-  const handleDragOver = React.useCallback(
-    (stageId) => (event) => {
-      event.preventDefault();
-      event.dataTransfer.dropEffect = "move";
-      if (activeLane !== stageId) setActiveLane(stageId);
+  const filterChips = React.useMemo(() => [], []);
+  const pipelineFilterOptions = React.useMemo(
+    () => (pipelinesQuery.data ?? []).map((pipeline) => ({
+      id: pipeline.id,
+      name: pipeline.name
+    })),
+    [pipelinesQuery.data]
+  );
+  const loadOwnerOptions = React.useCallback(
+    async (query, _signal) => {
+      const items = await fetchAssignableStaffMembers(query ?? "", { pageSize: 100 });
+      const opts = items.filter((user) => !!user.userId && !!user.displayName).map((user) => ({ value: user.userId, label: user.displayName }));
+      setOwnerLabels((prev) => {
+        const next = { ...prev };
+        for (const option of opts) next[option.value] = option.label;
+        return next;
+      });
+      return opts;
     },
-    [activeLane]
+    []
   );
-  const renderLaneHeader = (stage, count) => {
-    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-3 border-b border-border px-4 py-3", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: stage.label }),
-      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: translate("customers.deals.pipeline.countLabel", "Deals: {count}", { count }) })
-    ] }) }) });
-  };
-  return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-foreground", children: translate("customers.deals.pipeline.title", "Sales Pipeline") }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: translate(
-          "customers.deals.pipeline.subtitle",
-          "Track deals by pipeline stage and drag them between lanes to update progress."
-        ) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-        pipelinesQuery.data && pipelinesQuery.data.length > 0 ? /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm font-medium text-muted-foreground", children: [
-          /* @__PURE__ */ jsx("span", { children: translate("customers.deals.pipeline.switch.label", "Pipeline") }),
+  const loadPeopleOptions = React.useCallback(
+    async (query, signal) => {
+      const params = new URLSearchParams();
+      params.set("page", "1");
+      params.set("pageSize", "50");
+      if (query) params.set("search", query);
+      params.set("sortField", "displayName");
+      params.set("sortDir", "asc");
+      const call = await apiCall(`/api/customers/people?${params.toString()}`, { signal });
+      if (!call.ok) return [];
+      const items = call.result?.items ?? [];
+      const opts = [];
+      for (const it of items) {
+        if (!it.id) continue;
+        const label = it.display_name && it.display_name.trim().length ? it.display_name.trim() : [it.first_name, it.last_name].filter(Boolean).join(" ").trim() || it.id.slice(0, 8);
+        opts.push({ value: it.id, label });
+      }
+      setPeopleLabels((prev) => {
+        const next = { ...prev };
+        for (const o of opts) next[o.value] = o.label;
+        return next;
+      });
+      return opts;
+    },
+    []
+  );
+  const loadCompanyOptions = React.useCallback(
+    async (query, signal) => {
+      const params = new URLSearchParams();
+      params.set("page", "1");
+      params.set("pageSize", "50");
+      if (query) params.set("search", query);
+      params.set("sortField", "display_name");
+      params.set("sortDir", "asc");
+      const call = await apiCall(
+        `/api/customers/companies?${params.toString()}`,
+        { signal }
+      );
+      if (!call.ok) return [];
+      const items = call.result?.items ?? [];
+      const opts = [];
+      for (const it of items) {
+        if (!it.id || !it.display_name) continue;
+        opts.push({ value: it.id, label: it.display_name });
+      }
+      setCompanyLabels((prev) => {
+        const next = { ...prev };
+        for (const o of opts) next[o.value] = o.label;
+        return next;
+      });
+      return opts;
+    },
+    []
+  );
+  const leadingChipsNode = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(StatusFilterPopover, { values: statusFilters, onApply: setStatusFilters }),
+    /* @__PURE__ */ jsx(
+      PipelineFilterPopover,
+      {
+        pipelines: pipelineFilterOptions,
+        selectedPipelineId,
+        onApply: setSelectedPipelineId
+      }
+    ),
+    boardSummary && boardSummary.rows.length > 0 ? /* @__PURE__ */ jsx(
+      CurrencyFilterPopover,
+      {
+        rows: boardSummary.rows,
+        baseCurrencyCode: boardSummary.baseCurrencyCode,
+        totalInBaseCurrency: boardSummary.totalInBaseCurrency,
+        headingLabel: translateWithFallback(
+          t,
+          "customers.deals.kanban.boardSummary.headingLabel",
+          "PIPELINE"
+        ),
+        headingCount: total,
+        selectedCurrency: currencyFilter,
+        onApply: setCurrencyFilter
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      EntityFilterPopover,
+      {
+        label: translateWithFallback(t, "customers.deals.kanban.filter.owner", "Owner"),
+        anyLabel: translateWithFallback(t, "customers.deals.kanban.filter.all", "All"),
+        values: ownerFilters,
+        onApply: setOwnerFilters,
+        loadOptions: loadOwnerOptions,
+        labelById: ownerLabels
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      EntityFilterPopover,
+      {
+        label: translateWithFallback(t, "customers.deals.kanban.filter.people", "People"),
+        values: peopleFilters,
+        onApply: setPeopleFilters,
+        loadOptions: loadPeopleOptions,
+        labelById: peopleLabels
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      EntityFilterPopover,
+      {
+        label: translateWithFallback(t, "customers.deals.kanban.filter.companies", "Companies"),
+        values: companyFilters,
+        onApply: setCompanyFilters,
+        loadOptions: loadCompanyOptions,
+        labelById: companyLabels
+      }
+    ),
+    /* @__PURE__ */ jsx(CloseDateFilterPopover, { value: closeDateFilter, onApply: setCloseDateFilter })
+  ] });
+  const sortNode = /* @__PURE__ */ jsx(SortByPopover, { value: sortBy, onApply: setSortBy });
+  const activePipeline = React.useMemo(() => {
+    if (!selectedPipelineId) return null;
+    return pipelinesQuery.data?.find((pipeline) => pipeline.id === selectedPipelineId) ?? null;
+  }, [pipelinesQuery.data, selectedPipelineId]);
+  const dragHint = translateWithFallback(
+    t,
+    "customers.deals.kanban.helper.dragHint",
+    "Drag cards between lanes to update stage"
+  );
+  const footerCount = translateWithFallback(
+    t,
+    "customers.deals.kanban.footer.count",
+    "Showing {visible} of {total} deals in {pipeline} pipeline",
+    {
+      visible: deals.length,
+      total,
+      pipeline: activePipeline?.name ?? "\u2014"
+    }
+  );
+  return /* @__PURE__ */ jsxs(Page, { children: [
+    /* @__PURE__ */ jsxs(PageBody, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
+          /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Link, { href: "/backend", children: translateWithFallback(t, "customers.deals.kanban.breadcrumb.dashboard", "Dashboard") }) }) }),
+          /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+          /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { children: translateWithFallback(t, "customers.deals.kanban.breadcrumb.deals", "Deals") }) })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold leading-tight text-foreground sm:text-2xl", children: translateWithFallback(t, "customers.deals.kanban.pageTitle", "Deals") }),
+            boardSummary && boardSummary.rows.length > 0 ? (
+              /*
+               * Pipeline-wide value summary. The headline number is the converted total in
+               * the tenant's base currency, paired with the deal count for context. When at
+               * least one currency lacks an FX rate, we show a `~` prefix and a "partial"
+               * caveat — the `LaneCurrencyBreakdown` popover (anchored on the `+N` chip)
+               * surfaces the full breakdown and missing-rate disclosure. Clicking the
+               * popover trigger here gives the operator the same board-level detail view.
+               */
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+                /* @__PURE__ */ jsx("span", { children: translateWithFallback(
+                  t,
+                  "customers.deals.kanban.boardSummary.count",
+                  "{count} deals",
+                  { count: total }
+                ) }),
+                boardSummary.baseCurrencyCode && boardSummary.totalInBaseCurrency > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+                  /* @__PURE__ */ jsxs("span", { className: "flex items-baseline gap-1 font-semibold text-foreground", children: [
+                    boardSummary.convertedAll ? null : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": "true", children: "~" }),
+                    /* @__PURE__ */ jsx("span", { children: new Intl.NumberFormat(void 0, {
+                      style: "decimal",
+                      maximumFractionDigits: 0
+                    }).format(boardSummary.totalInBaseCurrency) }),
+                    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: boardSummary.baseCurrencyCode })
+                  ] }),
+                  !boardSummary.convertedAll ? /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "text-overline uppercase tracking-wide text-status-warning-text",
+                      title: translateWithFallback(
+                        t,
+                        "customers.deals.kanban.boardSummary.partialHint",
+                        "Missing FX rates for {currencies} \u2014 excluded from total",
+                        { currencies: boardSummary.missingRateCurrencies.join(", ") }
+                      ),
+                      children: translateWithFallback(
+                        t,
+                        "customers.deals.kanban.boardSummary.partial",
+                        "partial"
+                      )
+                    }
+                  ) : null
+                ] }) : null,
+                boardSummary.rows.length > 1 ? /* @__PURE__ */ jsx(
+                  LaneCurrencyBreakdown,
+                  {
+                    rows: boardSummary.rows,
+                    baseCurrencyCode: boardSummary.baseCurrencyCode,
+                    totalInBaseCurrency: boardSummary.totalInBaseCurrency,
+                    convertedAll: boardSummary.convertedAll,
+                    missingRateCurrencies: boardSummary.missingRateCurrencies,
+                    headingLabel: translateWithFallback(
+                      t,
+                      "customers.deals.kanban.boardSummary.headingLabel",
+                      "PIPELINE"
+                    ),
+                    headingCount: total,
+                    triggerLabel: translateWithFallback(
+                      t,
+                      "customers.deals.kanban.boardSummary.breakdownTrigger",
+                      "Breakdown"
+                    ),
+                    triggerClassName: "inline-flex items-center rounded-md border border-border bg-card px-2 py-0.5 text-overline font-medium uppercase tracking-wide text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                  }
+                ) : null
+              ] })
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2.5", children: [
+            /* @__PURE__ */ jsx(
+              SearchInput,
+              {
+                value: search,
+                onChange: setSearch,
+                placeholder: translateWithFallback(
+                  t,
+                  "customers.deals.kanban.search.placeholder",
+                  "Search deals\u2026"
+                ),
+                className: "w-64"
+              }
+            ),
+            /* @__PURE__ */ jsxs(Button, { variant: "outline", type: "button", onClick: handleCustomizeView, children: [
+              /* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-4", "aria-hidden": "true" }),
+              translateWithFallback(t, "customers.deals.kanban.cta.customize", "Customize view")
+            ] }),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline",
+                type: "button",
+                onClick: handleAddStage,
+                disabled: !selectedPipelineId,
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { className: "size-4", "aria-hidden": "true" }),
+                  translateWithFallback(t, "customers.deals.kanban.cta.newStage", "New stage")
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { asChild: true, children: /* @__PURE__ */ jsxs(Link, { href: "/backend/customers/deals/create?returnTo=/backend/customers/deals/pipeline", children: [
+              /* @__PURE__ */ jsx(Plus, { className: "size-4", "aria-hidden": "true" }),
+              translateWithFallback(t, "customers.deals.kanban.cta.newDeal", "New deal")
+            ] }) })
+          ] })
+        ] }),
+        pipelinesQuery.data && pipelinesQuery.data.length > 1 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pb-1 text-sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: translateWithFallback(t, "customers.deals.pipeline.switch.label", "Pipeline") }),
           /* @__PURE__ */ jsxs(
             Select,
             {
-              value: selectedPipelineId || void 0,
+              value: selectedPipelineId ?? void 0,
               onValueChange: (value) => setSelectedPipelineId(value || null),
               children: [
-                /* @__PURE__ */ jsx(SelectTrigger, { className: "w-auto min-w-[12rem]", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-                /* @__PURE__ */ jsx(SelectContent, { children: pipelinesQuery.data.map((p) => /* @__PURE__ */ jsx(SelectItem, { value: p.id, children: p.name }, p.id)) })
+                /* @__PURE__ */ jsx(SelectTrigger, { className: "w-auto min-w-48", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: pipelinesQuery.data.map((pipeline) => /* @__PURE__ */ jsx(SelectItem, { value: pipeline.id, children: pipeline.name }, pipeline.id)) })
               ]
             }
           )
-        ] }) : null,
-        /* @__PURE__ */ jsx(
-          Link,
-          {
-            href: "/backend/config/customers/pipeline-stages",
-            className: "text-sm font-medium text-primary hover:underline",
-            children: translate("customers.deals.pipeline.manageStages", "Manage stages")
-          }
-        ),
-        /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm font-medium text-muted-foreground", children: [
-          /* @__PURE__ */ jsx("span", { children: translate("customers.deals.pipeline.sort.label", "Sort by") }),
-          /* @__PURE__ */ jsxs(Select, { value: sortBy, onValueChange: handleSortChange, children: [
-            /* @__PURE__ */ jsx(SelectTrigger, { className: "w-auto min-w-[14rem]", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-            /* @__PURE__ */ jsxs(SelectContent, { children: [
-              /* @__PURE__ */ jsx(SelectItem, { value: "probability", children: translate("customers.deals.pipeline.sort.probability", "Probability (high to low)") }),
-              /* @__PURE__ */ jsx(SelectItem, { value: "createdAt", children: translate("customers.deals.pipeline.sort.createdAt", "Created (newest first)") }),
-              /* @__PURE__ */ jsx(SelectItem, { value: "expectedCloseAt", children: translate("customers.deals.pipeline.sort.expectedCloseAt", "Expected close (soonest first)") })
-            ] })
-          ] })
-        ] })
-      ] })
-    ] }),
-    !selectedPipelineId ? /* @__PURE__ */ jsx(
-      EmptyState,
-      {
-        icon: /* @__PURE__ */ jsx(Workflow, { className: "h-8 w-8", "aria-hidden": "true" }),
-        title: translate("customers.deals.pipeline.noPipeline", "No pipeline selected. Create a pipeline in settings."),
-        className: "h-[50vh] w-full"
-      }
-    ) : dealsQuery.isLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-[50vh] items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }) : dealsQuery.isError ? /* @__PURE__ */ jsx("div", { className: "max-w-xl", children: /* @__PURE__ */ jsx(
-      ErrorNotice,
-      {
-        message: dealsQuery.error instanceof Error ? dealsQuery.error.message : translate("customers.deals.pipeline.loadError", "Failed to load deals.")
-      }
-    ) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-      total > deals.length ? /* @__PURE__ */ jsx("div", { className: "rounded-md border border-border bg-muted/30 px-4 py-2 text-sm text-muted-foreground", children: translate(
-        "customers.deals.pipeline.limitNotice",
-        "Showing the first {count} deals. Refine your filters to see more.",
-        { count: deals.length }
-      ) }) : null,
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 pb-6 md:flex-row md:overflow-x-auto", children: stages.length === 0 ? /* @__PURE__ */ jsx(
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx(ViewTabsRow, { active: "kanban", className: "mt-4" }),
+      /* @__PURE__ */ jsx(
+        FilterBarRow,
+        {
+          leadingChips: leadingChipsNode,
+          chips: filterChips,
+          sortNode,
+          onChipClick: handleChipClick
+        }
+      ),
+      !selectedPipelineId ? /* @__PURE__ */ jsx(
         EmptyState,
         {
-          icon: /* @__PURE__ */ jsx(Layers, { className: "h-8 w-8", "aria-hidden": "true" }),
-          title: translate("customers.deals.pipeline.noStages", "Define pipeline stages to start tracking deals."),
+          icon: /* @__PURE__ */ jsx(Workflow, { className: "size-8", "aria-hidden": "true" }),
+          title: translateWithFallback(
+            t,
+            "customers.deals.pipeline.noPipeline",
+            "No pipeline selected. Create a pipeline in settings."
+          ),
           className: "h-[50vh] w-full"
         }
-      ) : stages.map((stage) => {
-        const stageKey = stage.value ?? null;
-        const laneDeals = groupedDeals.get(stageKey) ?? [];
-        const sortedLaneDeals = sortDeals(laneDeals, sortBy);
-        const isActive = activeLane === stage.id;
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `flex min-h-[60vh] w-full flex-1 flex-col overflow-hidden rounded-lg border border-border bg-card shadow-sm transition-all md:w-72 md:flex-none ${isActive ? "ring-2 ring-ring/40" : ""}`,
-            onDragOver: handleDragOver(stage.id),
-            onDrop: handleDrop(stage),
-            children: [
-              renderLaneHeader(stage, laneDeals.length),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-3 overflow-y-auto px-4 py-3", children: sortedLaneDeals.length === 0 ? /* @__PURE__ */ jsx(
-                EmptyState,
+      ) : isInitialLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-[50vh] items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }) : firstError ? /* @__PURE__ */ jsx("div", { className: "max-w-xl", children: /* @__PURE__ */ jsx(
+        ErrorNotice,
+        {
+          message: firstError instanceof Error ? firstError.message : translateWithFallback(
+            t,
+            "customers.deals.pipeline.loadError",
+            "Failed to load deals."
+          )
+        }
+      ) }) : /* @__PURE__ */ jsxs(
+        DndContext,
+        {
+          sensors,
+          collisionDetection,
+          measuring: measuringConfig,
+          onDragStart: handleDragStart,
+          onDragEnd: handleDragEnd,
+          onDragCancel: handleDragCancel,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-stretch", children: [
+              /* @__PURE__ */ jsx("div", { className: "relative z-10 flex w-11 mr-2 shrink-0 items-center justify-center bg-card shadow-lg [clip-path:inset(-40px_-40px_-40px_0)]", children: /* @__PURE__ */ jsx(
+                IconButton,
                 {
-                  size: "sm",
-                  icon: /* @__PURE__ */ jsx(MoveRight, { className: "h-6 w-6", "aria-hidden": "true" }),
-                  title: translate("customers.deals.pipeline.emptyLane", "No deals in this stage yet.")
+                  variant: "outline",
+                  size: "lg",
+                  fullRadius: true,
+                  onClick: handleScrollPrev,
+                  onPointerDown: handleHoldPrevStart,
+                  onPointerUp: stopContinuousScroll,
+                  onPointerLeave: stopContinuousScroll,
+                  onPointerCancel: stopContinuousScroll,
+                  "aria-label": translateWithFallback(t, "customers.deals.kanban.board.scrollPrev", "Scroll to previous stage"),
+                  "aria-disabled": scrollEdges.atStart,
+                  className: `absolute left-0 top-28 flex size-9 items-center justify-center rounded-full border border-border bg-card text-foreground shadow-lg transition-opacity hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${scrollEdges.atStart ? "opacity-30" : ""}`,
+                  children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-5", "aria-hidden": "true" })
                 }
-              ) : sortedLaneDeals.map((deal) => {
-                const isDragging = draggingId === deal.id || pendingDealId === deal.id && updateStageMutation.isPending;
-                const valueLabel = formatCurrency(
-                  deal.valueAmount,
-                  deal.valueCurrency,
-                  translate("customers.deals.list.noValue", "No value assigned")
-                );
-                const probabilityLabel = formatProbability(
-                  deal.probability,
-                  translate("customers.deals.pipeline.noProbability", "N/A")
-                );
-                const expectedLabel = deal.expectedCloseAt ? dateFormatter.format(new Date(deal.expectedCloseAt)) : translate("customers.deals.pipeline.noExpectedClose", "No date");
-                return /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: `group flex cursor-grab flex-col gap-2 rounded-md border border-border bg-background p-4 shadow-xs transition ${isDragging ? "opacity-50" : "hover:shadow-sm"}`,
-                    draggable: true,
-                    onDragStart: (event) => {
-                      event.dataTransfer.effectAllowed = "move";
-                      event.dataTransfer.setData("text/plain", deal.id);
-                      handleDragStart(deal.id);
-                    },
-                    onDragEnd: handleDragEnd,
-                    children: [
-                      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-                        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                          /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-sm font-medium text-foreground", children: deal.title }),
-                          deal.status ? /* @__PURE__ */ jsx("span", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: deal.status }) : null
-                        ] }),
-                        pendingDealId === deal.id && updateStageMutation.isPending ? /* @__PURE__ */ jsx(Spinner, { className: "size-4" }) : null
-                      ] }),
-                      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
-                        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                          /* @__PURE__ */ jsx("span", { children: translate("customers.deals.pipeline.card.value", "Value") }),
-                          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: valueLabel })
-                        ] }),
-                        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                          /* @__PURE__ */ jsx("span", { children: translate("customers.deals.pipeline.card.probability", "Probability") }),
-                          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: probabilityLabel })
-                        ] }),
-                        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                          /* @__PURE__ */ jsx("span", { children: translate("customers.deals.pipeline.card.expectedClose", "Expected close") }),
-                          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: expectedLabel })
-                        ] })
-                      ] }),
-                      /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-wrap gap-2 text-xs", children: /* @__PURE__ */ jsx(
-                        Link,
-                        {
-                          href: `/backend/customers/deals/${deal.id}`,
-                          className: "font-medium text-primary hover:underline",
-                          draggable: false,
-                          onClick: handleActionClick,
-                          children: translate("customers.deals.pipeline.actions.openDeal", "Open deal")
-                        }
-                      ) }),
-                      deal.people.length ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: deal.people.map((person) => /* @__PURE__ */ jsx(
-                        Link,
-                        {
-                          className: "rounded-full bg-primary/5 px-3 py-1 text-xs text-primary transition-colors hover:bg-primary/10",
-                          href: `/backend/customers/people-v2/${person.id}`,
-                          draggable: false,
-                          onClick: handleActionClick,
-                          children: person.label
-                        },
-                        person.id
-                      )) }) : null,
-                      deal.companies.length ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: deal.companies.map((company) => /* @__PURE__ */ jsx(
-                        Link,
+              ) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: setBoardScroller,
+                  "data-kanban-scroller": true,
+                  className: `flex min-w-0 flex-1 gap-3.5 overflow-x-auto pb-6 ${activeDragDealId ? "cursor-grabbing select-none" : ""}`,
+                  children: lanes.length === 0 ? /* @__PURE__ */ jsx(
+                    EmptyState,
+                    {
+                      icon: /* @__PURE__ */ jsx(Layers, { className: "size-8", "aria-hidden": "true" }),
+                      title: translateWithFallback(
+                        t,
+                        "customers.deals.pipeline.noStages",
+                        "Define pipeline stages to start tracking deals."
+                      ),
+                      className: "h-[50vh] w-full"
+                    }
+                  ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    lanes.map((stage) => {
+                      const laneDeals = sortedDealsByStage.get(stage.id) ?? EMPTY_DEAL_ARRAY;
+                      return /* @__PURE__ */ jsx(
+                        Lane,
                         {
-                          className: "rounded-full bg-secondary/10 px-3 py-1 text-xs text-secondary-foreground transition-colors hover:bg-secondary/20",
-                          href: `/backend/customers/companies-v2/${company.id}`,
-                          draggable: false,
-                          onClick: handleActionClick,
-                          children: company.label
+                          stage,
+                          deals: laneDeals,
+                          aggregate: aggregateByStage.get(stage.id) ?? null,
+                          selectedDealIds,
+                          buildMenuItems,
+                          activeDragDealId,
+                          isLoadingMore: !!loadingMoreByStage[stage.id],
+                          width: laneWidths[stage.id] ?? null,
+                          onToggleSelect: handleToggleSelect,
+                          onComposeActivity: handleComposeActivity,
+                          onOpenDetail: handleOpenDetail,
+                          onQuickAddClick: handleQuickAdd,
+                          onLoadMore: handleLoadMoreInLane,
+                          onResize: handleLaneResize,
+                          onResetWidth: handleResetLaneWidth
                         },
-                        company.id
-                      )) }) : null
+                        stage.id
+                      );
+                    }),
+                    /* @__PURE__ */ jsx(AddStageLane, { onClick: handleAddStage })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "relative z-10 flex w-11 ml-3.5 shrink-0 items-center justify-center bg-card shadow-lg [clip-path:inset(-40px_0_-40px_-40px)]", children: /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  variant: "outline",
+                  size: "lg",
+                  fullRadius: true,
+                  onClick: handleScrollNext,
+                  onPointerDown: handleHoldNextStart,
+                  onPointerUp: stopContinuousScroll,
+                  onPointerLeave: stopContinuousScroll,
+                  onPointerCancel: stopContinuousScroll,
+                  "aria-label": translateWithFallback(t, "customers.deals.kanban.board.scrollNext", "Scroll to next stage"),
+                  "aria-disabled": scrollEdges.atEnd,
+                  className: `absolute right-0 top-28 flex size-9 items-center justify-center rounded-full border border-border bg-card text-foreground shadow-lg transition-opacity hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${scrollEdges.atEnd ? "opacity-30" : ""}`,
+                  children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-5", "aria-hidden": "true" })
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: activeDragDeal ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx("div", { className: `pointer-events-none ${LANE_WIDTH_CLASS} rotate-2 cursor-grabbing select-none rounded-lg border border-border bg-card px-4 py-3.5 shadow-xl ring-2 ring-accent-indigo/40`, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ jsx("h3", { className: "line-clamp-2 text-base font-semibold leading-normal text-foreground", children: activeDragDeal.title }),
+                typeof activeDragDeal.valueAmount === "number" ? /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-lg font-bold leading-normal text-foreground", children: new Intl.NumberFormat(void 0, {
+                    style: "decimal",
+                    maximumFractionDigits: 0,
+                    useGrouping: true
+                  }).format(activeDragDeal.valueAmount) }),
+                  activeDragDeal.valueCurrency ? /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold leading-normal text-muted-foreground", children: activeDragDeal.valueCurrency.toUpperCase() }) : null
+                ] }) : null,
+                activeDragDeal.primaryCompany ? /* @__PURE__ */ jsx("span", { className: "inline-flex w-fit max-w-full items-center gap-1.5 overflow-hidden rounded-md bg-muted px-2.5 py-1 text-sm font-semibold leading-normal text-foreground", children: /* @__PURE__ */ jsx("span", { className: "truncate", children: activeDragDeal.primaryCompany.label }) }) : null
+              ] }) }),
+              bulkDragActive ? (
+                // +N badge tells the operator how many cards are travelling with the dragged
+                // one — round-2 UX review item 32. N excludes the dragged card itself, so a
+                // selection of 5 shows "+4" floating above the dragged surface.
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    "aria-label": translateWithFallback(
+                      t,
+                      "customers.deals.kanban.bulk.dragOverlayBadge",
+                      "{count} more selected",
+                      { count: selectedDealIds.size - 1 }
+                    ),
+                    className: "pointer-events-none absolute -right-3 -top-3 inline-flex h-7 min-w-7 rotate-2 items-center justify-center rounded-full border-2 border-card bg-foreground px-2 text-xs font-bold tabular-nums text-background shadow-lg",
+                    children: [
+                      "+",
+                      selectedDealIds.size - 1
                     ]
-                  },
-                  deal.id
-                );
-              }) })
-            ]
-          },
-          stage.id
-        );
-      }) })
-    ] })
-  ] }) }) });
+                  }
+                )
+              ) : null
+            ] }) : null })
+          ]
+        }
+      ),
+      selectedPipelineId && !isInitialLoading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 border-t border-border pt-3 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between", children: [
+        /* @__PURE__ */ jsx("span", { children: footerCount }),
+        /* @__PURE__ */ jsx("span", { children: dragHint }),
+        pendingDealId ? /* @__PURE__ */ jsx(Spinner, { className: "size-3" }) : null
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      QuickDealDialog,
+      {
+        open: !!quickDealContext,
+        context: quickDealContext,
+        onClose: () => setQuickDealContext(null),
+        onCreated: handleDialogCreated,
+        currentUserId: currentUserId || void 0,
+        currentUserLabel,
+        companies: companiesQuery.data ?? [],
+        currencies: currencyDictionary.data ? currencyDictionary.data.entries.map((entry) => ({
+          code: entry.value,
+          label: entry.label,
+          isBase: boardSummary?.baseCurrencyCode ? entry.value === boardSummary.baseCurrencyCode : false
+        })) : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AddStageDialog,
+      {
+        open: !!addStageContext,
+        context: addStageContext,
+        onClose: () => setAddStageContext(null),
+        onCreated: handleDialogCreated
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CustomizeViewDialog,
+      {
+        open: customizeOpen,
+        resizedLanesCount: Object.keys(laneWidths).length,
+        onClose: () => setCustomizeOpen(false),
+        onResetToDefault: handleResetView,
+        onResetColumnWidths: handleResetAllLaneWidths
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ActivityComposerDialog,
+      {
+        open: !!activityContext,
+        context: activityContext,
+        onClose: () => setActivityContext(null),
+        onCreated: handleDialogCreated
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ChangeStageDialog,
+      {
+        open: changeStageOpen,
+        selectedCount: bulkSelectionSummary.count,
+        pipelineName: activePipelineName,
+        stages: stageOptions,
+        isSubmitting: isBulkMutating,
+        onClose: () => setChangeStageOpen(false),
+        onConfirm: (stageId) => void handleBulkChangeStage(stageId)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ChangeStageDialog,
+      {
+        open: !!singleMoveStageContext,
+        selectedCount: 1,
+        pipelineName: activePipelineName,
+        stages: stageOptions,
+        isSubmitting: false,
+        onClose: () => setSingleMoveStageContext(null),
+        onConfirm: (stageId) => {
+          if (singleMoveStageContext) {
+            moveDealToStage(singleMoveStageContext.dealId, stageId);
+          }
+          setSingleMoveStageContext(null);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ChangeOwnerDialog,
+      {
+        open: changeOwnerOpen,
+        selectedCount: bulkSelectionSummary.count,
+        isSubmitting: isBulkMutating,
+        onClose: () => setChangeOwnerOpen(false),
+        onConfirm: (userId) => void handleBulkChangeOwner(userId)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      BulkActionsBar,
+      {
+        count: bulkSelectionSummary.count,
+        totalLabel: bulkSelectionSummary.totalLabel,
+        onChangeStage: () => setChangeStageOpen(true),
+        onChangeOwner: () => setChangeOwnerOpen(true),
+        onExportCsv: handleBulkExport,
+        onDelete: () => void handleBulkDelete(),
+        onClear: handleBulkClear
+      }
+    ),
+    ConfirmDialogElement
+  ] });
 }
 export {
-  SalesPipelinePage as default
+  DealsKanbanPage as default
 };
 //# sourceMappingURL=page.js.map