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

package/src/modules/customers/backend/customers/deals/[id]/hooks/useDealData.ts

@@ -3,13 +3,40 @@ import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import type { DealDetailPayload } from './types'
 
+type LoadDataOptions = {
+  cache?: boolean
+}
+
 type UseDealDataResult = {
   data: DealDetailPayload | null
   setData: React.Dispatch<React.SetStateAction<DealDetailPayload | null>>
   isLoading: boolean
   error: string | null
   isNotFound: boolean
-  loadData: () => Promise<void>
+  loadData: (options?: LoadDataOptions) => Promise<void>
+}
+
+type DealDataCacheEntry = {
+  promise: Promise<DealDetailPayload>
+}
+
+const dealDataCache = new Map<string, DealDataCacheEntry>()
+
+function fetchDealData(id: string, errorMessage: string, useCache: boolean): Promise<DealDetailPayload> {
+  const url = `/api/customers/deals/${encodeURIComponent(id)}?include=stages&view=lite`
+  const cached = dealDataCache.get(url)
+  if (useCache && cached) return cached.promise
+  const entry: DealDataCacheEntry = {
+    promise: readApiResultOrThrow<DealDetailPayload>(
+      url,
+      undefined,
+      { errorMessage },
+    ),
+  }
+  if (useCache) dealDataCache.set(url, entry)
+  return entry.promise.finally(() => {
+    if (dealDataCache.get(url) === entry) dealDataCache.delete(url)
+  })
 }
 
 export function useDealData(id: string): UseDealDataResult {
@@ -20,7 +47,7 @@ export function useDealData(id: string): UseDealDataResult {
   const [isNotFound, setIsNotFound] = React.useState(false)
   const initialLoadDoneRef = React.useRef(false)
 
-  const loadData = React.useCallback(async () => {
+  const loadData = React.useCallback(async (options: LoadDataOptions = {}) => {
     if (!id) {
       setIsNotFound(true)
       setIsLoading(false)
@@ -31,10 +58,10 @@ export function useDealData(id: string): UseDealDataResult {
     }
     setError(null)
     try {
-      const payload = await readApiResultOrThrow<DealDetailPayload>(
-        `/api/customers/deals/${encodeURIComponent(id)}?include=stages&view=lite`,
-        undefined,
-        { errorMessage: t('customers.deals.detail.error.load', 'Failed to load deal.') },
+      const payload = await fetchDealData(
+        id,
+        t('customers.deals.detail.error.load', 'Failed to load deal.'),
+        options.cache === true,
       )
       setData(payload)
     } catch (loadError) {

package/src/modules/customers/backend/customers/deals/[id]/page.tsx

@@ -105,7 +105,7 @@ export default function DealDetailPage({ params }: { params?: { id?: string } })
   } = useDealActivities({ dealId: id, runMutationWithContext })
 
   React.useEffect(() => {
-    void Promise.all([loadData(), loadPlannedActivities()])
+    void Promise.all([loadData({ cache: true }), loadPlannedActivities({ cache: true })])
   }, [loadData, loadPlannedActivities])
 
   const activityEntities = React.useMemo(
@@ -294,6 +294,20 @@ export default function DealDetailPage({ params }: { params?: { id?: string } })
     })
   }, [closeLostPopup, data, openScheduleEdit, selectedActivityEntity, t])
 
+  const currentPipelineName = data
+    ? data.pipelineName ?? wonStats?.pipelineName ?? lostStats?.pipelineName ?? null
+    : wonStats?.pipelineName ?? lostStats?.pipelineName ?? null
+  const formPipelineOptions = React.useMemo(
+    () => data?.deal.pipelineId
+      ? [{
+          id: data.deal.pipelineId,
+          name: currentPipelineName ?? t('customers.deals.detail.pipeline.defaultName', 'Current pipeline'),
+          isDefault: false,
+        }]
+      : [],
+    [currentPipelineName, data?.deal.pipelineId, t],
+  )
+
   if (isLoading) {
     return (
       <Page>
@@ -338,7 +352,6 @@ export default function DealDetailPage({ params }: { params?: { id?: string } })
   }
 
   const amountLabel = formatCurrency(data.deal.valueAmount, data.deal.valueCurrency)
-  const currentPipelineName = data.pipelineName ?? wonStats?.pipelineName ?? lostStats?.pipelineName ?? null
   const dealName = data.deal.title || t('customers.deals.detail.untitled', 'Untitled deal')
 
   const zone1Content = (
@@ -353,6 +366,8 @@ export default function DealDetailPage({ params }: { params?: { id?: string } })
         showVersionHistory={false}
         showCancelAction={false}
         onDirtyChange={setIsDirty}
+        initialPipelineOptions={formPipelineOptions}
+        initialPipelineStageOptions={data.pipelineStages}
         collapsibleGroups={{ pageType: 'deal-detail-v3', chevronPosition: 'right' }}
         sortableGroups={{ pageType: 'deal-detail-v3' }}
         initialValues={{

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

@@ -21,13 +21,20 @@ 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, type StatusBadgeVariant } 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'
+import { DealsKpiStrip } from '../../../components/DealsKpiStrip'
 import { E } from '#generated/entities.ids.generated'
 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,
   type CustomerDictionaryKind,
   type CustomerDictionaryMap,
 } from '../../../lib/dictionaries'
@@ -149,20 +156,6 @@ function extractIdsFromParams(params: URLSearchParams | null | undefined, key: s
   return normalizeIdCandidates(values)
 }
 
-function formatCurrency(amount: number | null | undefined, currency: string | null | undefined, fallback: string): string {
-  if (typeof amount !== 'number' || Number.isNaN(amount)) return fallback
-  try {
-    if (currency && currency.trim().length) {
-      const formatter = new Intl.NumberFormat(undefined, { style: 'currency', currency })
-      return formatter.format(amount)
-    }
-    const formatter = new Intl.NumberFormat(undefined, { style: 'decimal', maximumFractionDigits: 2 })
-    return formatter.format(amount)
-  } catch {
-    return currency ? `${amount} ${currency}` : String(amount)
-  }
-}
-
 function formatDateValue(value: string | null | undefined, fallback: string): string {
   if (!value) return fallback
   const date = new Date(value)
@@ -170,6 +163,30 @@ function formatDateValue(value: string | null | undefined, fallback: string): st
   return date.toLocaleDateString()
 }
 
+const STATUS_BADGE_VARIANTS: ReadonlySet<StatusBadgeVariant> = new Set([
+  'success',
+  'warning',
+  'error',
+  'info',
+  'neutral',
+])
+
+function coerceStatusBadgeVariant(
+  tone: ReturnType<typeof mapDictionaryColorToTone>,
+): StatusBadgeVariant {
+  if (tone && STATUS_BADGE_VARIANTS.has(tone as StatusBadgeVariant)) {
+    return tone as StatusBadgeVariant
+  }
+  return 'neutral'
+}
+
+const groupedAmountFormatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: 0 })
+
+function formatGroupedAmount(amount: number | null | undefined): string | null {
+  if (typeof amount !== 'number' || Number.isNaN(amount)) return null
+  return groupedAmountFormatter.format(amount)
+}
+
 export default function CustomersDealsPage() {
   const t = useT()
   const { confirm, ConfirmDialogElement } = useConfirmDialog()
@@ -192,6 +209,7 @@ export default function CustomersDealsPage() {
   const [isLoading, setIsLoading] = React.useState(false)
   const [reloadToken, setReloadToken] = React.useState(0)
   const [pendingDeleteId, setPendingDeleteId] = React.useState<string | null>(null)
+  const [needsAttentionOnly, setNeedsAttentionOnly] = React.useState(() => searchParams?.get('needsAttention') === 'true')
   // One-shot URL hydration used as the hook's initial value. The hook is the
   // single source of truth from this point on — the page MUST NOT keep a
   // parallel `useState<AdvancedFilterTree>` (see spec "Migration & Backward
@@ -323,12 +341,13 @@ export default 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)),
@@ -400,6 +419,7 @@ export default 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)) {
@@ -409,7 +429,7 @@ export default 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([
@@ -498,6 +518,16 @@ export default function CustomersDealsPage() {
     setPage(1)
   }, [])
 
+  const handleNeedsAttentionFilter = React.useCallback(() => {
+    setNeedsAttentionOnly(true)
+    setPage(1)
+  }, [])
+
+  const handleNeedsAttentionClear = React.useCallback(() => {
+    setNeedsAttentionOnly(false)
+    setPage(1)
+  }, [])
+
   const handleBulkDelete = React.useCallback(async (selectedRows: DealRow[]) => {
     const confirmed = await confirm({
       title: t('customers.deals.list.bulkDelete.title', 'Delete {count} deals?', { count: selectedRows.length }),
@@ -586,15 +616,27 @@ export default function CustomersDealsPage() {
   })
   const currentUserId = useCurrentUserId()
   const [ownerFilterOptions, setOwnerFilterOptions] = React.useState<AdvancedFilterOption[]>([])
+  // Single staff load drives both the owner FILTER options and the owner-name
+  // map shared with the OWNER cell + the KPI strip (userId → display name).
+  // No per-row fetch — see spec audit "Owner names" resolution.
+  const [ownerNames, setOwnerNames] = React.useState<Record<string, string>>({})
   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: Record<string, string> = {}
+        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
@@ -614,32 +656,20 @@ export default function CustomersDealsPage() {
     return mapAssignableStaffToFilterOptions(items)
   }, [])
 
+  const startOfToday = React.useMemo(() => {
+    const today = new Date()
+    today.setHours(0, 0, 0, 0)
+    return today
+  }, [])
+  const isDealOverdue = React.useCallback(
+    (row: DealRow): boolean =>
+      !!row.expectedCloseAt && new Date(row.expectedCloseAt) < startOfToday && row.status === 'open',
+    [startOfToday],
+  )
+
   const columns = React.useMemo<ColumnDef<DealRow>[]>(() => {
     const noValue = <span className="text-muted-foreground text-sm">{t('customers.deals.list.noValue')}</span>
-    const renderDictionaryCell = (kind: DictionaryKey, value: string | null | undefined) => (
-      <DictionaryValue
-        value={value}
-        map={dictionaryMaps[kind]}
-        fallback={value ? <span className="text-sm">{value}</span> : 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: { id: string; label: string }[],
-      fallbackLabel: string,
-    ) => {
-      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 (
-        <CollectionPreviewCell labels={labels} maxVisible={1} />
-      )
-    }
+    const unknownOwner = t('customers.deals.list.unknownOwner')
 
     const customColumns = customFieldDefs
       .filter((def) => supportsCustomFieldColumn(def))
@@ -695,7 +725,20 @@ export default function CustomersDealsPage() {
           filterGroup: 'Deal',
           maxWidth: '280px',
         },
-        cell: ({ row }) => <span className="font-medium text-sm">{row.original.title}</span>,
+        cell: ({ row }) => (
+          <div className="flex items-center gap-2 min-w-0">
+            <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
+              <Briefcase className="h-4 w-4" />
+            </span>
+            <span className="font-medium text-foreground truncate">{row.original.title}</span>
+            {isDealOverdue(row.original) ? (
+              <AlertTriangle
+                className="h-4 w-4 shrink-0 text-status-warning-text"
+                aria-label={t('customers.deals.list.close.overdue')}
+              />
+            ) : null}
+          </div>
+        ),
       },
       {
         accessorKey: 'status',
@@ -707,7 +750,14 @@ export default 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 <StatusBadge variant={variant} dot>{label}</StatusBadge>
+        },
       },
       {
         accessorKey: 'pipelineStage',
@@ -719,7 +769,12 @@ export default 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 <span className="text-foreground">{label}</span>
+        },
       },
       {
         accessorKey: 'pipelineId',
@@ -744,11 +799,17 @@ export default function CustomersDealsPage() {
           filterKey: 'value_amount',
           filterGroup: 'Deal',
         },
-        cell: ({ row }) => (
-          <span className="text-sm font-medium">
-            {formatCurrency(row.original.valueAmount ?? null, row.original.valueCurrency ?? null, t('customers.deals.list.noValue'))}
-          </span>
-        ),
+        cell: ({ row }) => {
+          const amount = formatGroupedAmount(row.original.valueAmount ?? null)
+          if (amount === null) return noValue
+          const currency = row.original.valueCurrency
+          return (
+            <div className="flex flex-col">
+              <span className="font-medium text-foreground">{amount}</span>
+              {currency ? <span className="text-xs text-muted-foreground">{currency}</span> : null}
+            </div>
+          )
+        },
       },
       {
         accessorKey: 'probability',
@@ -762,7 +823,7 @@ export default function CustomersDealsPage() {
         cell: ({ row }) => {
           const value = row.original.probability
           if (typeof value === 'number' && Number.isFinite(value)) {
-            return <span className="text-sm">{`${Math.min(Math.max(value, 0), 100)}%`}</span>
+            return <span className="font-medium text-foreground">{`${Math.min(Math.max(value, 0), 100)}%`}</span>
           }
           return noValue
         },
@@ -776,11 +837,37 @@ export default function CustomersDealsPage() {
           filterGroup: 'Activity',
           filterIconName: 'calendar',
         },
-        cell: ({ row }) => (
-          <span className="text-sm">
-            {formatDateValue(row.original.expectedCloseAt ?? null, t('customers.deals.list.noValue'))}
-          </span>
-        ),
+        cell: ({ row }) => {
+          const expectedCloseAt = row.original.expectedCloseAt
+          if (!expectedCloseAt) return noValue
+          let subtitle: React.ReactNode = null
+          if (isDealOverdue(row.original)) {
+            subtitle = (
+              <span className="text-xs text-status-error-text">{t('customers.deals.list.close.overdue')}</span>
+            )
+          } else if (row.original.status === 'win') {
+            subtitle = (
+              <span className="text-xs text-muted-foreground">{t('customers.deals.list.close.won')}</span>
+            )
+          } else if (row.original.status === 'loose') {
+            subtitle = (
+              <span className="text-xs text-muted-foreground">{t('customers.deals.list.close.lost')}</span>
+            )
+          } else {
+            const relative = formatRelativeTime(expectedCloseAt, { translate: t })
+            if (relative) {
+              subtitle = <span className="text-xs text-muted-foreground">{relative}</span>
+            }
+          }
+          return (
+            <div className="flex flex-col">
+              <span className="text-foreground">
+                {formatDateValue(expectedCloseAt, t('customers.deals.list.noValue'))}
+              </span>
+              {subtitle}
+            </div>
+          )
+        },
       },
       {
         accessorKey: 'ownerUserId',
@@ -793,9 +880,18 @@ export default function CustomersDealsPage() {
           filterGroup: 'CRM',
           filterIconName: 'user-round',
           filterKey: 'owner_user_id',
-          hidden: true,
         },
-        cell: ({ row }) => row.original.ownerUserId ?? null,
+        cell: ({ row }) => {
+          const ownerUserId = row.original.ownerUserId
+          if (!ownerUserId) return noValue
+          const label = ownerNames[ownerUserId]?.trim() || unknownOwner
+          return (
+            <div className="flex items-center gap-2 min-w-0">
+              <Avatar label={label} size="sm" />
+              <span className="text-foreground truncate">{label}</span>
+            </div>
+          )
+        },
       },
       {
         accessorKey: 'companies',
@@ -811,7 +907,22 @@ export default 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 (
+            <div className="flex items-center gap-1.5 min-w-0">
+              <Tag variant="neutral" className="max-w-36">
+                <span className="truncate">{firstLabel}</span>
+              </Tag>
+              {overflow > 0 ? <Tag variant="neutral">{`+${overflow}`}</Tag> : null}
+            </div>
+          )
+        },
       },
       {
         accessorKey: 'people',
@@ -827,7 +938,30 @@ export default 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 (
+            <SimpleTooltip content={tooltip} side="top">
+              <span className="inline-flex">
+                <AvatarStack max={4} size="sm">
+                  {people.map((person) => (
+                    <Avatar
+                      key={person.id}
+                      label={person.label || t('customers.deals.list.unnamedPerson')}
+                      size="sm"
+                    />
+                  ))}
+                </AvatarStack>
+              </span>
+            </SimpleTooltip>
+          )
+        },
       },
       {
         accessorKey: 'updatedAt',
@@ -846,7 +980,7 @@ export default function CustomersDealsPage() {
       },
       ...customColumns,
     ]
-  }, [customFieldDefs, dictionaryMaps, dictionaryOptions, loadOwnerFilterOptions, pipelineNames, resolvedOwnerFilterOptions, t])
+  }, [customFieldDefs, dictionaryMaps, dictionaryOptions, isDealOverdue, loadOwnerFilterOptions, ownerNames, pipelineNames, resolvedOwnerFilterOptions, t])
 
   const { advancedFilterFields } = useAutoDiscoveredFields({ columns, customFieldDefs })
 
@@ -920,9 +1054,19 @@ export default function CustomersDealsPage() {
     <Page>
       <PageBody>
         <ViewTabsRow active="list" className="mb-4" />
+        <DealsKpiStrip
+          ownerNames={ownerNames}
+          stageDictionary={dictionaryMaps['pipeline-stages'] ?? {}}
+          pipelineCount={Object.keys(pipelineNames).length}
+          scopeVersion={scopeVersion}
+          reloadToken={reloadToken}
+          onNeedsAttentionClick={handleNeedsAttentionFilter}
+          className="mb-4"
+        />
         <DataTable<DealRow>
           stickyFirstColumn
           stickyActionsColumn
+          actionsColumnAlign="center"
           title={t('customers.deals.list.title')}
           actions={(
             <Button asChild>
@@ -1016,6 +1160,29 @@ export default function CustomersDealsPage() {
           }}
           activeFilterChips={(
             <>
+              {needsAttentionOnly ? (
+                <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"
+                >
+                  <div
+                    className="inline-flex items-center gap-1"
+                    data-testid="active-filter-chip"
+                    aria-label={t('customers.deals.list.filters.needsAttention')}
+                  >
+                    <Tag variant="warning" dot>{t('customers.deals.list.filters.needsAttention')}</Tag>
+                    <IconButton
+                      type="button"
+                      variant="ghost"
+                      size="xs"
+                      aria-label={t('customers.deals.list.filters.needsAttentionRemove')}
+                      onClick={handleNeedsAttentionClear}
+                    >
+                      <X className="size-3" />
+                    </IconButton>
+                  </div>
+                </div>
+              ) : null}
               <ActiveFilterChips
                 tree={associationFilterTree}
                 fields={associationFilterFields}
@@ -1033,11 +1200,32 @@ export default 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={(
             <ListEmptyState

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/backend/customers/people-v2/[id]/page.tsx

@@ -37,6 +37,7 @@ import { ScheduleActivityDialog, type ScheduleActivityEditData } from '../../../
 import { PersonDetailHeader } from '../../../../components/detail/PersonDetailHeader'
 import { ChangelogTab } from '../../../../components/detail/ChangelogTab'
 import { PersonDetailTabs, resolveLegacyTab, type PersonTabId } from '../../../../components/detail/PersonDetailTabs'
+import { AddressesSection } from '../../../../components/detail/AddressesSection'
 import { PersonCompaniesSection } from '../../../../components/detail/PersonCompaniesSection'
 import { MobilePersonDetail } from '../../../../components/detail/MobilePersonDetail'
 import type { TagsSectionController } from '@open-mercato/ui/backend/detail'
@@ -541,6 +542,7 @@ export default function PersonDetailV2Page({ params }: { params?: { id?: string
                 activitiesCount={interactionCount}
                 dealsCount={dealCount}
                 companiesCount={companyCount}
+                addressesCount={data?.counts?.addresses ?? 0}
                 tasksCount={todoCount}
                 sectionAction={sectionAction}
               >
@@ -619,6 +621,22 @@ export default function PersonDetailV2Page({ params }: { params?: { id?: string
                     )
                   }
 
+                  if (activeTab === 'addresses') {
+                    return (
+                      <AddressesSection
+                        entityId={personId}
+                        emptyLabel={t('customers.people.detail.empty.addresses', 'No addresses linked to this person.')}
+                        addActionLabel={t('customers.people.detail.addresses.add', 'Add address')}
+                        emptyState={{
+                          title: t('customers.people.detail.emptyState.addresses.title', 'No addresses yet'),
+                          actionLabel: t('customers.people.detail.emptyState.addresses.action', 'Add address'),
+                        }}
+                        onActionChange={handleSectionActionChange}
+                        translator={detailTranslator}
+                      />
+                    )
+                  }
+
                   if (activeTab === 'tasks') {
                     return (
                       <TasksSection