Unify customer KPIs with Pulse (#6703)

* Align customer overview KPIs with net-sales analytics

Scope order stats per channel, compute recent total and AOV from subtotal.net, and surface shipping and refunds via a value tooltip while keeping lifetime counts server-filtered.

* Refine customer KPIs with channel-scoped orders and net/gross table

Filter KPI order fetches by channel in the API, exclude drafts from counts, show net and gross in recent orders with guidance, and tighten provider loading for channel switches.

* Extract messages

Author: mirekm

.changeset/customer-overview-kpis.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Customer profiles now show channel-scoped order statistics: total orders, recent net sales, and average order value. Net sales use product revenue after discounts and exclude shipping and tax; hover the amount for shipping and refund details from the same orders. The recent orders table shows net and gross amounts per order, with a hint explaining how net relates to the overview figures.

locale/defaultMessages.json

@@ -398,6 +398,10 @@
     "context": "grant refund within return, structured reason select label",
     "string": "Reason"
   },
+  "02j7gU": {
+    "context": "customer recent orders table, net column tooltip aria label",
+    "string": "Net order value explanation"
+  },
   "033/zW": {
     "context": "explore extensions section name",
     "string": "Explore"
@@ -2321,10 +2325,6 @@
     "context": "scope note for model type tab grouping help tooltip",
     "string": "Browser-only display — does not rename, merge, or change your model types or data."
   },
-  "AJMlmz": {
-    "context": "customer overview stat label: sum of recent orders",
-    "string": "Recent orders total"
-  },
   "ALe+of": {
     "string": "You don't have permission to manage webhooks. Contact your administrator for access."
   },
@@ -2899,6 +2899,10 @@
     "context": "variant created error message",
     "string": "Variant creation failed"
   },
+  "DGgIIw": {
+    "context": "customer recent orders table column: checkout total including shipping and tax",
+    "string": "Gross"
+  },
   "DILs4b": {
     "string": "Unsupported media provider or incorrect URL"
   },
@@ -5543,6 +5547,10 @@
   "Qb2XN5": {
     "string": "\"Mark as paid\" feature creates a {link} - used by Payment Apps"
   },
+  "QcXdj6": {
+    "context": "customer recent orders table column: net product sales after discounts",
+    "string": "Net"
+  },
   "QclvqG": {
     "context": "input label",
     "string": "Checkout line limit"
@@ -6072,10 +6080,6 @@
     "context": "intro for model type tab grouping help tooltip",
     "string": "Each model type name is split at the first matching separator. The part before becomes the tab name; the part after appears in the tab menu."
   },
-  "TZq1Tm": {
-    "context": "customer overview, subtitle scoping a money stat when every fetched recent order belongs to this currency",
-    "string": "Across last {count, plural, one {# order} other {# orders}} in {currency}"
-  },
   "TZtvTG": {
     "context": "table header required stock label",
     "string": "Required"
@@ -7548,6 +7552,10 @@
   "bIAY+o": {
     "string": "Address updated"
   },
+  "bIttOt": {
+    "context": "customer overview, AOV tooltip",
+    "string": "Average product revenue per order in this channel, from the last {windowSize} orders. Excludes shipping and tax."
+  },
   "bKCoN5": {
     "context": "order line discount updated title",
     "string": "{productName} discount was updated"
@@ -8061,6 +8069,10 @@
   "dnbJKr": {
     "string": "This transaction doesn't have any events"
   },
+  "doQvFl": {
+    "context": "customer overview, subtitle scoping recent money stats to the selected channel window",
+    "string": "{count} of last {windowSize, plural, one {# order} other {# orders}} in {channelName}"
+  },
   "dpXfQL": {
     "context": "channel link title and a11y label",
     "string": "View orders from {channelName}"
@@ -8128,10 +8140,6 @@
     "context": "product inventory, checkbox",
     "string": "Variant currently in preorder"
   },
-  "eAvs2Y": {
-    "context": "customer overview, subtitle scoping a money stat when only part of the fetched recent orders belong to this currency",
-    "string": "{count} of last {total, plural, one {# order} other {# orders}} in {currency}"
-  },
   "eB6oHa": {
     "context": "Message when product is not in any channel",
     "string": "Product is not listed in any channel"
@@ -8760,6 +8768,10 @@
     "context": "table head",
     "string": "Collection Name"
   },
+  "htV3fN": {
+    "context": "customer overview, prefix before channel name or channel selector",
+    "string": "Statistics from"
+  },
   "htvX+Z": {
     "string": "Deny"
   },
@@ -9697,10 +9709,18 @@
     "context": "button",
     "string": "Create shipping zone"
   },
+  "mKu838": {
+    "context": "customer overview, value tooltip heading for shipping and refund breakdown",
+    "string": "From these orders"
+  },
   "mLZMb6": {
     "context": "ChannelsSection select field label",
     "string": "Channel"
   },
+  "mMEpFC": {
+    "context": "customer overview, refunded row label in value tooltip",
+    "string": "Refunded"
+  },
   "mMOskm": {
     "string": "Open product detail"
   },
@@ -9816,6 +9836,10 @@
     "context": "customer's address book, header",
     "string": "{fullName}'s Address Book"
   },
+  "n8tEIV": {
+    "context": "customer overview, last login tooltip",
+    "string": "Most recent time this customer signed in to their account."
+  },
   "n97Ii0": {
     "context": "export selected items to csv file",
     "string": "Selected giftCards ({number})"
@@ -10509,6 +10533,10 @@
     "context": "Badge label showing number of errors",
     "string": "{count, plural, one {{count} error} other {{count} errors}}"
   },
+  "qXjR1X": {
+    "context": "customer overview, shipping row label in value tooltip",
+    "string": "Shipping"
+  },
   "qYukJi": {
     "context": "Status when product is partially configured",
     "string": "Scheduled"
@@ -11018,6 +11046,10 @@
   "tLM9Jr": {
     "string": "The operation cannot be performed right now. This might be due to a pending installation with the same identifier. {docsLink} ({errorCode})"
   },
+  "tQA//+": {
+    "context": "customer overview, recent net sales tooltip",
+    "string": "Sum of product revenue from this customer's last {windowSize} orders in this channel. Excludes shipping and tax. Discounts are already applied."
+  },
   "tQxBXs": {
     "context": "PageTypeDeleteWarningDialog single assigned items description",
     "string": "You are about to delete page type <b>{typeName}</b>. It is assigned to {assignedItemsCount} {assignedItemsCount,plural,one{page} other{pages}}. Deleting this page type will also delete those pages. Are you sure you want to do this?"
@@ -11068,10 +11100,6 @@
     "context": "variant stocks section subtitle",
     "string": "Assign this variant to a channel in the product channel manager to define warehouses allocation"
   },
-  "taX/V3": {
-    "context": "order total amount",
-    "string": "Total"
-  },
   "tf+OkY": {
     "context": "link to edit variant metadata",
     "string": "Edit on variant page"
@@ -11752,6 +11780,10 @@
     "context": "relative time",
     "string": "just now"
   },
+  "wPhgkN": {
+    "context": "customer recent orders table, net column tooltip",
+    "string": "Product revenue after discounts. Excludes shipping and tax. Matches the net sales figures in the overview above."
+  },
   "wQdR8M": {
     "string": "Add search engine title and description to make this category easier to find"
   },
@@ -11801,6 +11833,10 @@
     "context": "deactivate customer dialog, confirm button label",
     "string": "Deactivate"
   },
+  "wek82T": {
+    "context": "customer overview stat label: sum of recent orders net product sales",
+    "string": "Recent orders total"
+  },
   "werrDz": {
     "context": "refunded event title",
     "string": "Products were refunded"
@@ -12040,6 +12076,10 @@
     "context": "Info message when user sets a past publication date",
     "string": "This date is in the past. The product will be visible immediately when you save."
   },
+  "xwXFUB": {
+    "context": "customer overview, total orders tooltip",
+    "string": "Number of orders placed by this customer in the selected channel. Draft and cancelled orders are not counted."
+  },
   "xxQxLE": {
     "string": "Email Address"
   },
@@ -12261,10 +12301,6 @@
     "context": "create new structure, header",
     "string": "Add Item"
   },
-  "zJuyv/": {
-    "context": "customer overview, AOV tooltip clarifying that the average is computed only over the fetched recent orders, not the customer's lifetime",
-    "string": "Sum of the recent orders shown divided by their count."
-  },
   "zKEVOg": {
     "context": "error message when required attributes are not filled",
     "string": "Please fill in all required attributes before generating variants."

src/components/KpiCard/KpiCard.module.css

@@ -26,3 +26,19 @@
 .subtitleSlot {
   min-height: 1rem;
 }
+
+.tooltipContent {
+  display: block;
+  width: max-content;
+  max-width: min(52.5rem, calc(100vw - 2rem));
+  white-space: normal;
+  text-align: left;
+  line-height: 1.4;
+}
+
+.valueWithTooltip {
+  cursor: help;
+  text-decoration: underline dotted;
+  text-decoration-color: var(--mu-colors-border-default2);
+  text-underline-offset: 0.2em;
+}

src/components/KpiCard/KpiCard.stories.tsx

@@ -62,6 +62,23 @@ export const WithTooltip: Story = {
   },
 };
 
+export const WithValueTooltip: Story = {
+  args: {
+    title: "Recent orders total",
+    value: "$142.68 USD",
+    icon: <ShoppingCart size={16} />,
+    tooltip: "Net product sales from the last 10 orders. Excludes shipping and tax.",
+    valueTooltip: (
+      <>
+        Shipping: $34.20
+        <br />
+        Refunded: $25.00
+      </>
+    ),
+    subtitle: "3 of last 3 orders in USD",
+  },
+};
+
 export const SubtitleOnly: Story = {
   args: {
     title: "Recent orders total",

src/components/KpiCard/KpiCard.test.tsx

@@ -69,6 +69,30 @@ describe("KpiCard", () => {
     expect(onSelect).toHaveBeenCalledTimes(1);
   });
 
+  it("does not invoke onSelect when value tooltip trigger is used", () => {
+    // Arrange
+    const onSelect = jest.fn();
+
+    renderCard(
+      <KpiCard
+        title="Orders"
+        value="28"
+        valueTooltip="Shipping: $10"
+        onSelect={onSelect}
+        dataTestId="kpi-clickable"
+      />,
+    );
+
+    // Act
+    const valueTooltipTrigger = screen.getByTestId("kpi-value-tooltip-trigger");
+
+    fireEvent.pointerDown(valueTooltipTrigger);
+    fireEvent.click(valueTooltipTrigger);
+
+    // Assert
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
   it("does not invoke onSelect when tooltip trigger is used", () => {
     // Arrange
     const onSelect = jest.fn();

src/components/KpiCard/KpiCard.tsx

@@ -16,6 +16,7 @@ interface KpiCardProps {
   icon?: ReactNode;
   subtitle?: ReactNode;
   tooltip?: ReactNode;
+  valueTooltip?: ReactNode;
   delta?: KpiDelta;
   loading?: boolean;
   active?: boolean;
@@ -51,6 +52,7 @@ export const KpiCard = ({
   icon,
   subtitle,
   tooltip,
+  valueTooltip,
   delta,
   loading,
   active,
@@ -131,19 +133,51 @@ export const KpiCard = ({
                   <Info size={13} />
                 </Box>
               </Tooltip.Trigger>
-              <Tooltip.Content side="top">
+              <Tooltip.Content side="top" className={styles.tooltipContent}>
                 <Tooltip.Arrow />
-                {tooltip}
+                <Text size={2} color="default1">
+                  {tooltip}
+                </Text>
               </Tooltip.Content>
             </Tooltip>
           </Box>
         )}
       </Box>
 
       <Box display="flex" flexDirection="column" gap={1}>
-        <Text size={7} fontWeight="bold" __lineHeight="1.1">
-          {value}
-        </Text>
+        {valueTooltip ? (
+          <Box
+            display="inline-flex"
+            alignSelf="start"
+            onClick={interactive ? stopEventPropagation : undefined}
+            onKeyDown={interactive ? stopEventPropagation : undefined}
+            onPointerDown={interactive ? stopEventPropagation : undefined}
+            data-test-id="kpi-value-tooltip-trigger"
+          >
+            <Tooltip>
+              <Tooltip.Trigger>
+                <Text
+                  size={7}
+                  fontWeight="bold"
+                  __lineHeight="1.1"
+                  className={styles.valueWithTooltip}
+                >
+                  {value}
+                </Text>
+              </Tooltip.Trigger>
+              <Tooltip.Content side="top" className={styles.tooltipContent}>
+                <Tooltip.Arrow />
+                <Text size={2} color="default1">
+                  {valueTooltip}
+                </Text>
+              </Tooltip.Content>
+            </Tooltip>
+          </Box>
+        ) : (
+          <Text size={7} fontWeight="bold" __lineHeight="1.1">
+            {value}
+          </Text>
+        )}
 
         <Box display="flex" alignItems="center" gap={1} className={styles.subtitleSlot}>
           {delta && (

src/customers/components/CustomerOrders/CustomerOrders.module.css

@@ -3,7 +3,23 @@
  * `.table th:last-child` !important padding rules (specificity 0,2,1)
  * by adding `:last-child` AND chaining the class (specificity 0,3,1).
  */
-td.totalCell.totalCell:last-child,
-th.totalCell.totalCell:last-child {
+td.lastAmountCell.lastAmountCell:last-child,
+th.lastAmountCell.lastAmountCell:last-child {
   padding-right: var(--mu-spacing-6) !important;
 }
+
+.amountHeaderCell {
+  text-align: right !important;
+}
+
+.amountHeaderContent {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--mu-spacing-1);
+  width: 100%;
+}
+
+.tooltipContent {
+  max-width: 16.25rem;
+}