@open-mercato/core 0.6.5-develop.5382.1.f542de69af → 0.6.5

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

@@ -19,14 +19,19 @@ import { coalesceLastOperations } from "@open-mercato/ui/backend/operations/stor
 import { flash } from "@open-mercato/ui/backend/FlashMessages";
 import { RowActions } from "@open-mercato/ui/backend/RowActions";
 import { Button } from "@open-mercato/ui/primitives/button";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { StatusBadge } from "@open-mercato/ui/primitives/status-badge";
+import { Avatar, AvatarStack } from "@open-mercato/ui/primitives/avatar";
+import { Tag } from "@open-mercato/ui/primitives/tag";
+import { SimpleTooltip } from "@open-mercato/ui/primitives/tooltip";
+import { Briefcase, AlertTriangle, X } from "lucide-react";
+import { formatRelativeTime } from "@open-mercato/shared/lib/time";
 import { ViewTabsRow } from "./pipeline/components/ViewTabsRow.js";
+import { DealsKpiStrip } from "../../../components/DealsKpiStrip.js";
 import { E } from "../../../../../generated/entities.ids.generated.js";
 import { useOrganizationScopeVersion } from "@open-mercato/shared/lib/frontend/useOrganizationScope";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
-import {
-  DictionaryValue
-} from "../../../lib/dictionaries.js";
 import {
   ensureCustomerDictionary,
   invalidateCustomerDictionary
@@ -106,25 +111,30 @@ function extractIdsFromParams(params, key) {
   const values = params.getAll(key);
   return normalizeIdCandidates(values);
 }
-function formatCurrency(amount, currency, fallback) {
-  if (typeof amount !== "number" || Number.isNaN(amount)) return fallback;
-  try {
-    if (currency && currency.trim().length) {
-      const formatter2 = new Intl.NumberFormat(void 0, { style: "currency", currency });
-      return formatter2.format(amount);
-    }
-    const formatter = new Intl.NumberFormat(void 0, { style: "decimal", maximumFractionDigits: 2 });
-    return formatter.format(amount);
-  } catch {
-    return currency ? `${amount} ${currency}` : String(amount);
-  }
-}
 function formatDateValue(value, fallback) {
   if (!value) return fallback;
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) return fallback;
   return date.toLocaleDateString();
 }
+const STATUS_BADGE_VARIANTS = /* @__PURE__ */ new Set([
+  "success",
+  "warning",
+  "error",
+  "info",
+  "neutral"
+]);
+function coerceStatusBadgeVariant(tone) {
+  if (tone && STATUS_BADGE_VARIANTS.has(tone)) {
+    return tone;
+  }
+  return "neutral";
+}
+const groupedAmountFormatter = new Intl.NumberFormat(void 0, { maximumFractionDigits: 0 });
+function formatGroupedAmount(amount) {
+  if (typeof amount !== "number" || Number.isNaN(amount)) return null;
+  return groupedAmountFormatter.format(amount);
+}
 function CustomersDealsPage() {
   const t = useT();
   const { confirm, ConfirmDialogElement } = useConfirmDialog();
@@ -146,6 +156,7 @@ function CustomersDealsPage() {
   const [isLoading, setIsLoading] = React.useState(false);
   const [reloadToken, setReloadToken] = React.useState(0);
   const [pendingDeleteId, setPendingDeleteId] = React.useState(null);
+  const [needsAttentionOnly, setNeedsAttentionOnly] = React.useState(() => searchParams?.get("needsAttention") === "true");
   const initialFilterTree = React.useMemo(() => {
     if (!searchParams) return createEmptyTree();
     const record = {};
@@ -260,12 +271,13 @@ function CustomersDealsPage() {
     if (search.trim().length) params.set("search", search.trim());
     if (selectedPersonIds.length) params.set("personId", selectedPersonIds.join(","));
     if (selectedCompanyIds.length) params.set("companyId", selectedCompanyIds.join(","));
+    if (needsAttentionOnly) params.set("needsAttention", "true");
     const advancedParams = serializeTree(advancedFilterState);
     for (const [key, val] of Object.entries(advancedParams)) {
       params.set(key, val);
     }
     return params.toString();
-  }, [advancedFilterState, page, pageSize, search, selectedCompanyIds, selectedPersonIds, sorting]);
+  }, [advancedFilterState, needsAttentionOnly, page, pageSize, search, selectedCompanyIds, selectedPersonIds, sorting]);
   const currentParams = React.useMemo(
     () => Object.fromEntries(new URLSearchParams(queryParams)),
     [queryParams]
@@ -327,6 +339,7 @@ function CustomersDealsPage() {
     if (search.trim().length) params.set("search", search.trim());
     if (selectedPersonIds.length) selectedPersonIds.forEach((id) => params.append("personId", id));
     if (selectedCompanyIds.length) selectedCompanyIds.forEach((id) => params.append("companyId", id));
+    if (needsAttentionOnly) params.set("needsAttention", "true");
     if (page > 1) params.set("page", String(page));
     const advancedParams = serializeTree(advancedFilterState);
     for (const [key, val] of Object.entries(advancedParams)) {
@@ -336,7 +349,7 @@ function CustomersDealsPage() {
     if (queryRef.current === next) return;
     queryRef.current = next;
     router.replace(next ? `${pathname}?${next}` : pathname, { scroll: false });
-  }, [pathname, router, page, search, selectedPersonIds, selectedCompanyIds, advancedFilterState]);
+  }, [pathname, router, page, search, selectedPersonIds, selectedCompanyIds, needsAttentionOnly, advancedFilterState]);
   const handleRefresh = React.useCallback(() => {
     void Promise.all([
       invalidateCustomerDictionary(queryClient, "deal-statuses"),
@@ -406,6 +419,14 @@ function CustomersDealsPage() {
     setPageSize(newSize);
     setPage(1);
   }, []);
+  const handleNeedsAttentionFilter = React.useCallback(() => {
+    setNeedsAttentionOnly(true);
+    setPage(1);
+  }, []);
+  const handleNeedsAttentionClear = React.useCallback(() => {
+    setNeedsAttentionOnly(false);
+    setPage(1);
+  }, []);
   const handleBulkDelete = React.useCallback(async (selectedRows) => {
     const confirmed = await confirm({
       title: t("customers.deals.list.bulkDelete.title", "Delete {count} deals?", { count: selectedRows.length }),
@@ -486,13 +507,22 @@ function CustomersDealsPage() {
   });
   const currentUserId = useCurrentUserId();
   const [ownerFilterOptions, setOwnerFilterOptions] = React.useState([]);
+  const [ownerNames, setOwnerNames] = React.useState({});
   React.useEffect(() => {
     const controller = new AbortController();
     let cancelled = false;
     void fetchAssignableStaffMembers("", { pageSize: 100, signal: controller.signal }).then((items) => {
-      if (!cancelled) setOwnerFilterOptions(mapAssignableStaffToFilterOptions(items));
+      if (cancelled) return;
+      setOwnerFilterOptions(mapAssignableStaffToFilterOptions(items));
+      const names = {};
+      for (const item of items) {
+        if (item.userId) names[item.userId] = item.displayName;
+      }
+      setOwnerNames(names);
     }).catch(() => {
-      if (!cancelled) setOwnerFilterOptions([]);
+      if (cancelled) return;
+      setOwnerFilterOptions([]);
+      setOwnerNames({});
     });
     return () => {
       cancelled = true;
@@ -511,28 +541,18 @@ function CustomersDealsPage() {
     const items = await fetchAssignableStaffMembers(query ?? "", { pageSize: 100 });
     return mapAssignableStaffToFilterOptions(items);
   }, []);
+  const startOfToday = React.useMemo(() => {
+    const today = /* @__PURE__ */ new Date();
+    today.setHours(0, 0, 0, 0);
+    return today;
+  }, []);
+  const isDealOverdue = React.useCallback(
+    (row) => !!row.expectedCloseAt && new Date(row.expectedCloseAt) < startOfToday && row.status === "open",
+    [startOfToday]
+  );
   const columns = React.useMemo(() => {
     const noValue = /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: t("customers.deals.list.noValue") });
-    const renderDictionaryCell = (kind, value) => /* @__PURE__ */ jsx(
-      DictionaryValue,
-      {
-        value,
-        map: dictionaryMaps[kind],
-        fallback: value ? /* @__PURE__ */ jsx("span", { className: "text-sm", children: value }) : noValue,
-        className: "text-sm",
-        iconWrapperClassName: "inline-flex h-6 w-6 items-center justify-center rounded border border-border bg-card",
-        iconClassName: "h-4 w-4",
-        colorClassName: "h-3 w-3 rounded-full"
-      }
-    );
-    const renderAssociationSummary = (items, fallbackLabel) => {
-      if (!items.length) return noValue;
-      const labels = normalizeCollectionLabels(
-        items.map((entry) => entry.label && entry.label.trim().length ? entry.label : fallbackLabel)
-      );
-      if (!labels.length) return noValue;
-      return /* @__PURE__ */ jsx(CollectionPreviewCell, { labels, maxVisible: 1 });
-    };
+    const unknownOwner = t("customers.deals.list.unknownOwner");
     const customColumns = customFieldDefs.filter((def) => supportsCustomFieldColumn(def)).map((def) => ({
       accessorKey: `cf_${def.key}`,
       header: def.label || def.key,
@@ -577,7 +597,17 @@ function CustomersDealsPage() {
           filterGroup: "Deal",
           maxWidth: "280px"
         },
-        cell: ({ row }) => /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: row.original.title })
+        cell: ({ row }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx(Briefcase, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground truncate", children: row.original.title }),
+          isDealOverdue(row.original) ? /* @__PURE__ */ jsx(
+            AlertTriangle,
+            {
+              className: "h-4 w-4 shrink-0 text-status-warning-text",
+              "aria-label": t("customers.deals.list.close.overdue")
+            }
+          ) : null
+        ] })
       },
       {
         accessorKey: "status",
@@ -589,7 +619,14 @@ function CustomersDealsPage() {
           filterKey: "status",
           filterGroup: "Deal"
         },
-        cell: ({ row }) => renderDictionaryCell("deal-statuses", row.original.status)
+        cell: ({ row }) => {
+          const status = row.original.status;
+          if (!status) return noValue;
+          const entry = dictionaryMaps["deal-statuses"]?.[status];
+          const label = entry?.label ?? status;
+          const variant = coerceStatusBadgeVariant(mapDictionaryColorToTone(entry?.color));
+          return /* @__PURE__ */ jsx(StatusBadge, { variant, dot: true, children: label });
+        }
       },
       {
         accessorKey: "pipelineStage",
@@ -601,7 +638,12 @@ function CustomersDealsPage() {
           filterKey: "pipeline_stage",
           filterGroup: "Deal"
         },
-        cell: ({ row }) => renderDictionaryCell("pipeline-stages", row.original.pipelineStage)
+        cell: ({ row }) => {
+          const stage = row.original.pipelineStage;
+          if (!stage) return noValue;
+          const label = dictionaryMaps["pipeline-stages"]?.[stage]?.label ?? stage;
+          return /* @__PURE__ */ jsx("span", { className: "text-foreground", children: label });
+        }
       },
       {
         accessorKey: "pipelineId",
@@ -626,7 +668,15 @@ function CustomersDealsPage() {
           filterKey: "value_amount",
           filterGroup: "Deal"
         },
-        cell: ({ row }) => /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: formatCurrency(row.original.valueAmount ?? null, row.original.valueCurrency ?? null, t("customers.deals.list.noValue")) })
+        cell: ({ row }) => {
+          const amount = formatGroupedAmount(row.original.valueAmount ?? null);
+          if (amount === null) return noValue;
+          const currency = row.original.valueCurrency;
+          return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: amount }),
+            currency ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: currency }) : null
+          ] });
+        }
       },
       {
         accessorKey: "probability",
@@ -640,7 +690,7 @@ function CustomersDealsPage() {
         cell: ({ row }) => {
           const value = row.original.probability;
           if (typeof value === "number" && Number.isFinite(value)) {
-            return /* @__PURE__ */ jsx("span", { className: "text-sm", children: `${Math.min(Math.max(value, 0), 100)}%` });
+            return /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: `${Math.min(Math.max(value, 0), 100)}%` });
           }
           return noValue;
         }
@@ -654,7 +704,27 @@ function CustomersDealsPage() {
           filterGroup: "Activity",
           filterIconName: "calendar"
         },
-        cell: ({ row }) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: formatDateValue(row.original.expectedCloseAt ?? null, t("customers.deals.list.noValue")) })
+        cell: ({ row }) => {
+          const expectedCloseAt = row.original.expectedCloseAt;
+          if (!expectedCloseAt) return noValue;
+          let subtitle = null;
+          if (isDealOverdue(row.original)) {
+            subtitle = /* @__PURE__ */ jsx("span", { className: "text-xs text-status-error-text", children: t("customers.deals.list.close.overdue") });
+          } else if (row.original.status === "win") {
+            subtitle = /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("customers.deals.list.close.won") });
+          } else if (row.original.status === "loose") {
+            subtitle = /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("customers.deals.list.close.lost") });
+          } else {
+            const relative = formatRelativeTime(expectedCloseAt, { translate: t });
+            if (relative) {
+              subtitle = /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: relative });
+            }
+          }
+          return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-foreground", children: formatDateValue(expectedCloseAt, t("customers.deals.list.noValue")) }),
+            subtitle
+          ] });
+        }
       },
       {
         accessorKey: "ownerUserId",
@@ -666,10 +736,17 @@ function CustomersDealsPage() {
           filterLoadOptions: loadOwnerFilterOptions,
           filterGroup: "CRM",
           filterIconName: "user-round",
-          filterKey: "owner_user_id",
-          hidden: true
+          filterKey: "owner_user_id"
         },
-        cell: ({ row }) => row.original.ownerUserId ?? null
+        cell: ({ row }) => {
+          const ownerUserId = row.original.ownerUserId;
+          if (!ownerUserId) return noValue;
+          const label = ownerNames[ownerUserId]?.trim() || unknownOwner;
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+            /* @__PURE__ */ jsx(Avatar, { label, size: "sm" }),
+            /* @__PURE__ */ jsx("span", { className: "text-foreground truncate", children: label })
+          ] });
+        }
       },
       {
         accessorKey: "companies",
@@ -684,7 +761,17 @@ function CustomersDealsPage() {
             row.companies.map((entry) => entry.label && entry.label.trim().length ? entry.label : t("customers.deals.list.unnamedCompany"))
           ).join(", ")
         },
-        cell: ({ row }) => renderAssociationSummary(row.original.companies, t("customers.deals.list.unnamedCompany"))
+        cell: ({ row }) => {
+          const companies = row.original.companies;
+          if (!companies.length) return noValue;
+          const first = companies[0];
+          const firstLabel = first.label && first.label.trim().length ? first.label : t("customers.deals.list.unnamedCompany");
+          const overflow = companies.length - 1;
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+            /* @__PURE__ */ jsx(Tag, { variant: "neutral", className: "max-w-36", children: /* @__PURE__ */ jsx("span", { className: "truncate", children: firstLabel }) }),
+            overflow > 0 ? /* @__PURE__ */ jsx(Tag, { variant: "neutral", children: `+${overflow}` }) : null
+          ] });
+        }
       },
       {
         accessorKey: "people",
@@ -699,7 +786,22 @@ function CustomersDealsPage() {
             row.people.map((entry) => entry.label && entry.label.trim().length ? entry.label : t("customers.deals.list.unnamedPerson"))
           ).join(", ")
         },
-        cell: ({ row }) => renderAssociationSummary(row.original.people, t("customers.deals.list.unnamedPerson"))
+        cell: ({ row }) => {
+          const people = row.original.people;
+          if (!people.length) return noValue;
+          const labels = normalizeCollectionLabels(
+            people.map((person) => person.label && person.label.trim().length ? person.label : t("customers.deals.list.unnamedPerson"))
+          );
+          const tooltip = labels.join(", ");
+          return /* @__PURE__ */ jsx(SimpleTooltip, { content: tooltip, side: "top", children: /* @__PURE__ */ jsx("span", { className: "inline-flex", children: /* @__PURE__ */ jsx(AvatarStack, { max: 4, size: "sm", children: people.map((person) => /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              label: person.label || t("customers.deals.list.unnamedPerson"),
+              size: "sm"
+            },
+            person.id
+          )) }) }) });
+        }
       },
       {
         accessorKey: "updatedAt",
@@ -714,7 +816,7 @@ function CustomersDealsPage() {
       },
       ...customColumns
     ];
-  }, [customFieldDefs, dictionaryMaps, dictionaryOptions, loadOwnerFilterOptions, pipelineNames, resolvedOwnerFilterOptions, t]);
+  }, [customFieldDefs, dictionaryMaps, dictionaryOptions, isDealOverdue, loadOwnerFilterOptions, ownerNames, pipelineNames, resolvedOwnerFilterOptions, t]);
   const { advancedFilterFields } = useAutoDiscoveredFields({ columns, customFieldDefs });
   React.useEffect(() => {
     setPanelFields((prev) => {
@@ -779,11 +881,24 @@ function CustomersDealsPage() {
   return /* @__PURE__ */ jsxs(Page, { children: [
     /* @__PURE__ */ jsxs(PageBody, { children: [
       /* @__PURE__ */ jsx(ViewTabsRow, { active: "list", className: "mb-4" }),
+      /* @__PURE__ */ jsx(
+        DealsKpiStrip,
+        {
+          ownerNames,
+          stageDictionary: dictionaryMaps["pipeline-stages"] ?? {},
+          pipelineCount: Object.keys(pipelineNames).length,
+          scopeVersion,
+          reloadToken,
+          onNeedsAttentionClick: handleNeedsAttentionFilter,
+          className: "mb-4"
+        }
+      ),
       /* @__PURE__ */ jsx(
         DataTable,
         {
           stickyFirstColumn: true,
           stickyActionsColumn: true,
+          actionsColumnAlign: "center",
           title: t("customers.deals.list.title"),
           actions: /* @__PURE__ */ jsx(Button, { asChild: true, children: /* @__PURE__ */ jsx(Link, { href: "/backend/customers/deals/create", children: t("customers.deals.list.actions.new", "New deal") }) }),
           columns,
@@ -871,6 +986,35 @@ function CustomersDealsPage() {
             }
           },
           activeFilterChips: /* @__PURE__ */ jsxs(Fragment, { children: [
+            needsAttentionOnly ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex items-center gap-2 overflow-x-auto border-b border-border bg-background px-4 py-2",
+                "data-testid": "active-filter-chips",
+                children: /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "inline-flex items-center gap-1",
+                    "data-testid": "active-filter-chip",
+                    "aria-label": t("customers.deals.list.filters.needsAttention"),
+                    children: [
+                      /* @__PURE__ */ jsx(Tag, { variant: "warning", dot: true, children: t("customers.deals.list.filters.needsAttention") }),
+                      /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          type: "button",
+                          variant: "ghost",
+                          size: "xs",
+                          "aria-label": t("customers.deals.list.filters.needsAttentionRemove"),
+                          onClick: handleNeedsAttentionClear,
+                          children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ) : null,
             /* @__PURE__ */ jsx(
               ActiveFilterChips,
               {
@@ -893,11 +1037,32 @@ function CustomersDealsPage() {
             )
           ] }),
           filterAwareEmptyState: {
-            active: advancedFilterState.root.children.length > 0,
+            active: needsAttentionOnly || associationFilterTree.root.children.length > 0 || advancedFilterState.root.children.length > 0,
             entityNamePlural: t("customers.deals.entityPlural", "deals"),
-            canRemoveLast: filterPanel.tree.root.children.length > 0,
-            onClearAll: handleAdvancedFilterClear,
-            onRemoveLast: () => filterPanel.dispatch({ type: "removeLast" })
+            canRemoveLast: needsAttentionOnly || associationFilterTree.root.children.length > 0 || filterPanel.tree.root.children.length > 0,
+            onClearAll: () => {
+              handleAdvancedFilterClear();
+              setSelectedPersonIds([]);
+              setSelectedCompanyIds([]);
+              setNeedsAttentionOnly(false);
+            },
+            onRemoveLast: () => {
+              if (needsAttentionOnly) {
+                handleNeedsAttentionClear();
+                return;
+              }
+              if (selectedCompanyIds.length > 0) {
+                setSelectedCompanyIds([]);
+                setPage(1);
+                return;
+              }
+              if (selectedPersonIds.length > 0) {
+                setSelectedPersonIds([]);
+                setPage(1);
+                return;
+              }
+              filterPanel.dispatch({ type: "removeLast" });
+            }
           },
           emptyState: /* @__PURE__ */ jsx(
             ListEmptyState,