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

package/src/modules/customers/backend/customers/deals/pipeline/page.tsx

@@ -2542,6 +2542,7 @@ export default function DealsKanbanPage(): React.ReactElement {
   return (
     <Page>
       <PageBody>
+        <ViewTabsRow active="kanban" className="mb-4" />
         <div className="flex flex-col gap-2">
           <Breadcrumb>
             <BreadcrumbList>
@@ -2710,8 +2711,6 @@ export default function DealsKanbanPage(): React.ReactElement {
           ) : null}
         </div>
 
-        <ViewTabsRow active="kanban" className="mt-4" />
-
         <FilterBarRow
           leadingChips={leadingChipsNode}
           chips={filterChips}

package/src/modules/customers/cli.ts

@@ -53,7 +53,7 @@ type DictionaryDefault = {
 type CustomFieldValuesPayload = Parameters<DataEngine['setCustomFields']>[0]['values']
 type ProgressBarHandle = ReturnType<typeof createProgressBar>
 
-const DEAL_STATUS_DEFAULTS: DictionaryDefault[] = [
+export const DEAL_STATUS_DEFAULTS: DictionaryDefault[] = [
   { value: 'open', label: 'Open', color: '#2563eb', icon: 'lucide:circle' },
   { value: 'closed', label: 'Closed', color: '#6b7280', icon: 'lucide:check-circle' },
   { value: 'win', label: 'Win', color: '#22c55e', icon: 'lucide:trophy' },
@@ -61,7 +61,7 @@ const DEAL_STATUS_DEFAULTS: DictionaryDefault[] = [
   { value: 'in_progress', label: 'In progress', color: '#f59e0b', icon: 'lucide:activity' },
 ]
 
-const PIPELINE_STAGE_DEFAULTS: DictionaryDefault[] = [
+export const PIPELINE_STAGE_DEFAULTS: DictionaryDefault[] = [
   { value: 'opportunity', label: 'Opportunity', color: '#38bdf8', icon: 'lucide:target' },
   { value: 'marketing_qualified_lead', label: 'Marketing Qualified Lead', color: '#a855f7', icon: 'lucide:sparkles' },
   { value: 'sales_qualified_lead', label: 'Sales Qualified Lead', color: '#f97316', icon: 'lucide:users' },
@@ -72,14 +72,14 @@ const PIPELINE_STAGE_DEFAULTS: DictionaryDefault[] = [
   { value: 'stalled', label: 'Stalled', color: '#6b7280', icon: 'lucide:alert-circle' },
 ]
 
-const ENTITY_STATUS_DEFAULTS: DictionaryDefault[] = [
+export const ENTITY_STATUS_DEFAULTS: DictionaryDefault[] = [
   { value: 'active', label: 'Active', color: '#22c55e', icon: 'lucide:user-check' },
   { value: 'inactive', label: 'Inactive', color: '#94a3b8', icon: 'lucide:pause-circle' },
   { value: 'pending', label: 'Pending', color: '#f59e0b', icon: 'lucide:clock' },
   { value: 'archived', label: 'Archived', color: '#64748b', icon: 'lucide:archive' },
 ]
 
-const ENTITY_LIFECYCLE_STAGE_DEFAULTS: DictionaryDefault[] = [
+export const ENTITY_LIFECYCLE_STAGE_DEFAULTS: DictionaryDefault[] = [
   { value: 'lead', label: 'Lead', color: '#3b82f6', icon: 'lucide:sparkles' },
   { value: 'prospect', label: 'Prospect', color: '#8b5cf6', icon: 'lucide:eye' },
   { value: 'customer', label: 'Customer', color: '#22c55e', icon: 'lucide:handshake' },
@@ -88,7 +88,7 @@ const ENTITY_LIFECYCLE_STAGE_DEFAULTS: DictionaryDefault[] = [
   { value: 'other', label: 'Other', color: '#94a3b8', icon: 'lucide:circle' },
 ]
 
-const ENTITY_SOURCE_DEFAULTS: DictionaryDefault[] = [
+export const ENTITY_SOURCE_DEFAULTS: DictionaryDefault[] = [
   { value: 'linkedin', label: 'LinkedIn', color: '#0a66c2', icon: 'lucide:linkedin' },
   { value: 'email', label: 'Email', color: '#3b82f6', icon: 'lucide:mail' },
   { value: 'web_form', label: 'Web form', color: '#22c55e', icon: 'lucide:globe' },
@@ -291,7 +291,7 @@ function isoDaysFromNow(days: number, options?: { hour?: number; minute?: number
   return base.toISOString()
 }
 
-const CUSTOMER_EXAMPLES: ExampleCompany[] = [
+export const CUSTOMER_EXAMPLES: ExampleCompany[] = [
   {
     slug: 'brightside-solar',
     displayName: 'Brightside Solar',
@@ -307,7 +307,7 @@ const CUSTOMER_EXAMPLES: ExampleCompany[] = [
     primaryPhone: '+1 415-555-0148',
     source: 'partner_referral',
     lifecycleStage: 'customer',
-    status: 'customer',
+    status: 'active',
     custom: {
       relationship_health: 'healthy',
       renewal_quarter: 'Q3',
@@ -364,7 +364,7 @@ const CUSTOMER_EXAMPLES: ExampleCompany[] = [
         phone: '+1 628-555-0199',
         timezone: 'America/Los_Angeles',
         linkedInUrl: 'https://www.linkedin.com/in/danielcho-energy/',
-        source: 'outbound_campaign',
+        source: 'cold_outreach',
         custom: {
           buying_role: 'economic_buyer',
           preferred_pronouns: 'he/him',
@@ -438,7 +438,7 @@ const CUSTOMER_EXAMPLES: ExampleCompany[] = [
         valueCurrency: 'USD',
         expectedCloseAt: isoDaysFromNow(65),
         probability: 40,
-        source: 'inbound_web',
+        source: 'web_form',
         custom: {
           competitive_risk: 'high',
           implementation_complexity: 'complex',
@@ -513,7 +513,7 @@ const CUSTOMER_EXAMPLES: ExampleCompany[] = [
       'Boston-based analytics platform helping consumer brands optimize merchandising decisions.',
     primaryEmail: 'info@harborviewanalytics.com',
     primaryPhone: '+1 617-555-0024',
-    source: 'industry_event',
+    source: 'event',
     lifecycleStage: 'prospect',
     status: 'active',
     custom: {
@@ -545,7 +545,7 @@ const CUSTOMER_EXAMPLES: ExampleCompany[] = [
         phone: '+1 617-555-0168',
         timezone: 'America/New_York',
         linkedInUrl: 'https://www.linkedin.com/in/arjunpatel-sales/',
-        source: 'industry_event',
+        source: 'event',
         custom: {
           buying_role: 'economic_buyer',
           preferred_pronouns: 'he/him',
@@ -563,7 +563,7 @@ const CUSTOMER_EXAMPLES: ExampleCompany[] = [
         phone: '+1 617-555-0179',
         timezone: 'America/New_York',
         linkedInUrl: 'https://www.linkedin.com/in/lenaortiz-retail/',
-        source: 'industry_event',
+        source: 'event',
         custom: {
           buying_role: 'champion',
           preferred_pronouns: 'she/her',
@@ -582,7 +582,7 @@ const CUSTOMER_EXAMPLES: ExampleCompany[] = [
         valueCurrency: 'USD',
         expectedCloseAt: isoDaysFromNow(-25),
         probability: 100,
-        source: 'industry_event',
+        source: 'event',
         custom: {
           competitive_risk: 'low',
           implementation_complexity: 'standard',
@@ -637,7 +637,7 @@ const CUSTOMER_EXAMPLES: ExampleCompany[] = [
         valueCurrency: 'USD',
         expectedCloseAt: isoDaysFromNow(120),
         probability: 35,
-        source: 'outbound_campaign',
+        source: 'cold_outreach',
         custom: {
           competitive_risk: 'medium',
           implementation_complexity: 'complex',
@@ -715,7 +715,7 @@ const CUSTOMER_EXAMPLES: ExampleCompany[] = [
     primaryPhone: '+1 512-555-0456',
     source: 'customer_referral',
     lifecycleStage: 'customer',
-    status: 'customer',
+    status: 'active',
     custom: {
       relationship_health: 'healthy',
       renewal_quarter: 'Q1',

package/src/modules/customers/components/DealsKpiStrip.tsx

@@ -0,0 +1,389 @@
+"use client"
+
+import * as React from 'react'
+import { CheckCircle } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT, useLocale } from '@open-mercato/shared/lib/i18n/context'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { KpiCard, DeltaBadge, Sparkline } from '@open-mercato/ui/backend/charts'
+import { Avatar, AvatarStack } from '@open-mercato/ui/primitives/avatar'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import type { DictionaryMap } from '@open-mercato/core/modules/dictionaries/components/dictionaryAppearance'
+import { PipelineStageBar } from './kpi/PipelineStageBar'
+
+type DeltaDirection = 'up' | 'down' | 'unchanged'
+
+type SummaryDelta = {
+  value: number
+  direction: DeltaDirection
+}
+
+type DealsSummaryResponse = {
+  baseCurrencyCode: string | null
+  convertedAll: boolean
+  missingRateCurrencies: string[]
+  pipelineValue: {
+    value: number
+    delta: SummaryDelta
+    stages: { stage: string | null; count: number; value: number }[]
+  }
+  activeDeals: {
+    value: number
+    delta: SummaryDelta
+    ownersCount: number
+    needAttention: number
+    owners: { id: string; count: number }[]
+    ownersOverflow: number
+  }
+  wonThisQuarter: {
+    value: number
+    delta: SummaryDelta
+    dealsClosed: number
+    avgDeal: number
+  }
+  winRate: {
+    value: number
+    deltaPp: number
+    direction: DeltaDirection
+    previousValue: number
+    series: { period: string; rate: number }[]
+  }
+}
+
+export type DealsKpiStripProps = {
+  ownerNames: Record<string, string>
+  stageDictionary: DictionaryMap
+  pipelineCount: number
+  className?: string
+  /** Bumped by the host when the active org scope changes — forces a KPI refetch so the cards never show another org's data. */
+  scopeVersion?: number
+  /** Bumped by the host on manual refresh / after mutations — forces a KPI refetch so totals stay in sync with the table. */
+  reloadToken?: number
+  onNeedsAttentionClick?: () => void
+}
+
+const compactNumberFormatter = new Intl.NumberFormat(undefined, {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+
+function formatCompact(value: number): string {
+  return compactNumberFormatter.format(value)
+}
+
+function buildCurrencySuffix(code: string | null, convertedAll: boolean): string {
+  if (!code) return convertedAll ? '' : '≈'
+  return convertedAll ? code : `≈ ${code}`
+}
+
+const KPI_TITLE_CLASS = 'text-xs font-semibold uppercase tracking-wide text-muted-foreground'
+
+function DealKpiCard(props: React.ComponentProps<typeof KpiCard>) {
+  return <KpiCard titleClassName={KPI_TITLE_CLASS} {...props} />
+}
+
+function KpiDeltaBadge({
+  direction,
+  value,
+  unit,
+  title,
+}: {
+  direction: DeltaDirection
+  value: number
+  unit?: string
+  title: string
+}) {
+  if (direction === 'unchanged' && value === 0) {
+    return (
+      <span
+        className="inline-flex items-center rounded-md bg-status-neutral-bg px-2 py-0.5 text-xs font-medium text-status-neutral-text"
+        title={title}
+      >
+        --
+      </span>
+    )
+  }
+  return <DeltaBadge direction={direction} value={value} unit={unit} title={title} />
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+// Guard the summary payload before rendering: a non-conforming response (an unrelated
+// endpoint mock, an error body, or a future contract drift) must surface the error card,
+// never crash the whole deals page by dereferencing missing sections/arrays.
+function isDealsSummaryResponse(value: unknown): value is DealsSummaryResponse {
+  if (!isObject(value)) return false
+  const { pipelineValue, activeDeals, wonThisQuarter, winRate } = value
+  return (
+    isObject(pipelineValue) && Array.isArray(pipelineValue.stages) &&
+    isObject(activeDeals) && Array.isArray(activeDeals.owners) &&
+    isObject(wonThisQuarter) &&
+    isObject(winRate) && Array.isArray(winRate.series)
+  )
+}
+
+export function DealsKpiStrip({
+  ownerNames,
+  stageDictionary,
+  pipelineCount,
+  className,
+  scopeVersion,
+  reloadToken,
+  onNeedsAttentionClick,
+}: DealsKpiStripProps) {
+  const t = useT()
+  const locale = useLocale()
+  const pluralCat = React.useCallback((count: number): string => {
+    try {
+      return new Intl.PluralRules(locale).select(count)
+    } catch {
+      return count === 1 ? 'one' : 'other'
+    }
+  }, [locale])
+  const pf = React.useCallback((base: string, count: number): string => {
+    const cat = pluralCat(count)
+    const key = `${base}.${cat}`
+    const out = t(key, { count })
+    return out === key ? t(`${base}.other`, { count }) : out
+  }, [t, pluralCat])
+  const [data, setData] = React.useState<DealsSummaryResponse | null>(null)
+  const [loading, setLoading] = React.useState(true)
+  const [error, setError] = React.useState<string | null>(null)
+  const [retryToken, setRetryToken] = React.useState(0)
+  const previousScopeVersionRef = React.useRef(scopeVersion)
+
+  const retry = React.useCallback(() => {
+    setRetryToken((token) => token + 1)
+  }, [])
+
+  React.useEffect(() => {
+    let cancelled = false
+    const scopeChanged = previousScopeVersionRef.current !== scopeVersion
+    previousScopeVersionRef.current = scopeVersion
+    if (scopeChanged) setData(null)
+    setLoading(true)
+    setError(null)
+    apiCall<DealsSummaryResponse>('/api/customers/deals/summary')
+      .then((call) => {
+        if (cancelled) return
+        if (!call.ok || !isDealsSummaryResponse(call.result)) {
+          setError(t('customers.deals.list.kpi.error'))
+          return
+        }
+        setData(call.result)
+      })
+      .catch(() => {
+        if (cancelled) return
+        setError(t('customers.deals.list.kpi.error'))
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [t, scopeVersion, reloadToken, retryToken])
+
+  const wrapperClassName = cn('space-y-2', className)
+  const gridClassName = 'grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4'
+
+  if (loading && !data) {
+    return (
+      <div className={wrapperClassName}>
+        <div className={gridClassName}>
+          <DealKpiCard loading title={t('customers.deals.list.kpi.pipelineValue')} value={null} />
+          <DealKpiCard loading title={t('customers.deals.list.kpi.activeDeals')} value={null} />
+          <DealKpiCard loading title={t('customers.deals.list.kpi.wonThisQuarter')} value={null} />
+          <DealKpiCard loading title={t('customers.deals.list.kpi.winRate')} value={null} />
+        </div>
+      </div>
+    )
+  }
+
+  if (!data) {
+    const errorMessage = error ?? t('customers.deals.list.kpi.error')
+    return (
+      <div className={wrapperClassName}>
+        <div className="flex items-center justify-between gap-3 rounded-lg border border-destructive/30 bg-destructive/5 p-4">
+          <p className="text-sm text-destructive">{errorMessage}</p>
+          <Button type="button" variant="destructive-outline" size="sm" onClick={retry}>
+            {t('customers.deals.list.kpi.retry')}
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  const currencySuffix = buildCurrencySuffix(data.baseCurrencyCode, data.convertedAll)
+  const unassignedLabel = t('customers.deals.list.kpi.unassignedStage')
+  const deltaTooltip = t('customers.deals.list.kpi.deltaTooltip')
+  const deltaUnavailableTooltip = t('customers.deals.list.kpi.deltaUnavailable')
+  const scopeLabel = t('customers.deals.list.kpi.scopeAllPipelinesThisQuarter')
+  const unknownOwner = t('customers.deals.list.unknownOwner')
+  const currencyHint = !data.convertedAll
+    ? data.baseCurrencyCode
+      ? t('customers.deals.list.kpi.currencyApproxMissing', {
+          currencies: data.missingRateCurrencies.length ? data.missingRateCurrencies.join(', ') : currencySuffix,
+        })
+      : t('customers.deals.list.kpi.currencyApproxNoBase')
+    : null
+  const attentionLabel = pf('customers.deals.list.kpi.frag.needAttention', data.activeDeals.needAttention)
+
+  return (
+    <div className={wrapperClassName}>
+      {error ? (
+        <div className="flex items-center justify-between gap-3 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2">
+          <p className="text-xs text-destructive">{error}</p>
+          <Button type="button" variant="destructive-outline" size="2xs" onClick={retry}>
+            {t('customers.deals.list.kpi.retry')}
+          </Button>
+        </div>
+      ) : null}
+      {loading ? (
+        <div className="flex items-center justify-end gap-2 text-xs text-muted-foreground">
+          <Spinner className="h-3 w-3" />
+          <span>{t('customers.deals.list.kpi.updating')}</span>
+        </div>
+      ) : null}
+      <div className={gridClassName}>
+        <DealKpiCard
+          title={t('customers.deals.list.kpi.pipelineValue')}
+          value={data.pipelineValue.value}
+          formatValue={formatCompact}
+          suffix={currencySuffix}
+          headerAction={
+            <KpiDeltaBadge
+              direction={data.pipelineValue.delta.direction}
+              value={data.pipelineValue.delta.value}
+              title={data.pipelineValue.delta.direction === 'unchanged' && data.pipelineValue.delta.value === 0 ? deltaUnavailableTooltip : deltaTooltip}
+            />
+          }
+          footer={
+            <div className="space-y-2">
+              <p className="text-xs text-muted-foreground">{scopeLabel}</p>
+              <p className="text-xs text-muted-foreground">
+                {t('customers.deals.list.kpi.activeAcrossPipelines', {
+                  deals: pf('customers.deals.list.kpi.frag.activeDeals', data.activeDeals.value),
+                  pipelines: pf('customers.deals.list.kpi.frag.pipelines', pipelineCount),
+                })}
+              </p>
+              {currencyHint ? <p className="text-xs text-muted-foreground">{currencyHint}</p> : null}
+              <PipelineStageBar
+                stages={data.pipelineValue.stages}
+                stageDictionary={stageDictionary}
+                unassignedLabel={unassignedLabel}
+              />
+            </div>
+          }
+        />
+
+        <DealKpiCard
+          title={t('customers.deals.list.kpi.activeDeals')}
+          value={data.activeDeals.value}
+          formatValue={formatCompact}
+          headerAction={
+            <KpiDeltaBadge
+              direction={data.activeDeals.delta.direction}
+              value={data.activeDeals.delta.value}
+              title={data.activeDeals.delta.direction === 'unchanged' && data.activeDeals.delta.value === 0 ? deltaUnavailableTooltip : deltaTooltip}
+            />
+          }
+          footer={
+            <div className="space-y-2">
+              <p className="text-xs text-muted-foreground">{scopeLabel}</p>
+              <div className="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-muted-foreground">
+                <span>{pf('customers.deals.list.kpi.frag.owners', data.activeDeals.ownersCount)}</span>
+                <span aria-hidden="true">·</span>
+                {onNeedsAttentionClick && data.activeDeals.needAttention > 0 ? (
+                  <Button
+                    type="button"
+                    variant="link"
+                    size="2xs"
+                    className="h-auto p-0 text-xs"
+                    onClick={onNeedsAttentionClick}
+                  >
+                    {attentionLabel}
+                  </Button>
+                ) : (
+                  <span>{attentionLabel}</span>
+                )}
+              </div>
+              {data.activeDeals.owners.length > 0 ? (
+                <AvatarStack max={4} size="sm" overflowCount={data.activeDeals.ownersOverflow}>
+                  {data.activeDeals.owners.map((owner) => {
+                    const ownerLabel = ownerNames[owner.id]?.trim() || unknownOwner
+                    return <Avatar key={owner.id} label={ownerLabel} size="sm" />
+                  })}
+                </AvatarStack>
+              ) : null}
+            </div>
+          }
+        />
+
+        <DealKpiCard
+          title={t('customers.deals.list.kpi.wonThisQuarter')}
+          value={data.wonThisQuarter.value}
+          formatValue={formatCompact}
+          suffix={currencySuffix}
+          headerAction={
+            <KpiDeltaBadge
+              direction={data.wonThisQuarter.delta.direction}
+              value={data.wonThisQuarter.delta.value}
+              title={data.wonThisQuarter.delta.direction === 'unchanged' && data.wonThisQuarter.delta.value === 0 ? deltaUnavailableTooltip : deltaTooltip}
+            />
+          }
+          footer={
+            <div className="space-y-1">
+              <p className="text-xs text-muted-foreground">{scopeLabel}</p>
+              <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                <CheckCircle className="h-4 w-4 text-status-success-text" aria-hidden />
+                <span>
+                  {pf('customers.deals.list.kpi.frag.dealsClosed', data.wonThisQuarter.dealsClosed)}
+                </span>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {t('customers.deals.list.kpi.avgDeal', {
+                  value: `${formatCompact(data.wonThisQuarter.avgDeal)}${currencySuffix ? ` ${currencySuffix}` : ''}`,
+                })}
+              </p>
+              {currencyHint ? <p className="text-xs text-muted-foreground">{currencyHint}</p> : null}
+            </div>
+          }
+        />
+
+        <DealKpiCard
+          title={t('customers.deals.list.kpi.winRate')}
+          value={data.winRate.value}
+          suffix="%"
+          headerAction={
+            <KpiDeltaBadge
+              direction={data.winRate.direction}
+              value={Math.abs(data.winRate.deltaPp)}
+              unit="pp"
+              title={data.winRate.previousValue === 0 ? deltaUnavailableTooltip : deltaTooltip}
+            />
+          }
+          footer={
+            <div className="space-y-2">
+              <p className="text-xs text-muted-foreground">{scopeLabel}</p>
+              <p className="text-xs text-muted-foreground">
+                {t('customers.deals.list.kpi.fromLastQuarter', { value: data.winRate.previousValue })}
+              </p>
+              <div className="text-primary">
+                <Sparkline
+                  values={data.winRate.series.map((point) => point.rate)}
+                  ariaLabel={t('customers.deals.list.kpi.winRate')}
+                />
+              </div>
+            </div>
+          }
+        />
+      </div>
+    </div>
+  )
+}
+
+export default DealsKpiStrip

package/src/modules/customers/components/detail/ConfirmDealLostDialog.tsx

@@ -116,7 +116,6 @@ export function ConfirmDealLostDialog({
 
           <div className="space-y-6 px-7 py-6">
             <Alert variant="warning" className="rounded-md">
-              <AlertTriangle className="size-4" />
               <AlertTitle>
                 {t('customers.deals.detail.lost.warningTitle', 'This action closes the deal')}
               </AlertTitle>