@open-mercato/core 0.7.0 → 0.7.1-develop.7103.1.41ff100d93

package/src/modules/customers/api/people/[id]/route.ts

@@ -38,7 +38,7 @@ import type { EntityId } from '@open-mercato/shared/modules/entities'
 import type { OpenApiRouteDoc } from '@open-mercato/shared/lib/openapi'
 import { findWithDecryption, findOneWithDecryption } from '@open-mercato/shared/lib/encryption/find'
 import { parseBooleanFromUnknown, parseBooleanToken } from '@open-mercato/shared/lib/boolean'
-import { isOrganizationReadAccessAllowed } from '@open-mercato/core/modules/directory/utils/organizationScopeGuard'
+import { denyCustomerDetailReadAsNotFound } from '../../../lib/detailReadAccess'
 import { loadPersonCompanyLinks, summarizePersonCompanies } from '../../../lib/personCompanies'
 import { normalizeCustomerDetailCustomFields } from '../../detailCustomFields'
 import { buildEmailVisibilityMikroFilter } from '../../../lib/visibilityFilter'
@@ -129,10 +129,6 @@ function parseIncludeParams(request: Request): Set<string> {
   return tokens
 }
 
-function forbidden(message: string) {
-  return NextResponse.json({ error: message }, { status: 403 })
-}
-
 function notFound(message: string) {
   return NextResponse.json({ error: message }, { status: 404 })
 }
@@ -542,10 +538,19 @@ export async function GET(_req: Request, ctx: { params?: { id?: string } }) {
       return notFound('Person not found')
     }
 
-    if (!isOrganizationReadAccessAllowed({ scope, auth, organizationId: person.organizationId })) {
-      statusCode = 403
-      profileMeta = { reason: 'organization_forbidden' }
-      return forbidden('Access denied')
+    // Existence oracle (issue #5504): a caller who holds customers.people.view
+    // but whose scope excludes the record's organization must get the SAME
+    // response as for a non-existent id, so 403-when-present / 404-when-absent
+    // collapses to a uniform 404 not-found. The dispatcher already returns a
+    // uniform 403 for callers who lack the feature entirely.
+    const organizationReadDenied = denyCustomerDetailReadAsNotFound(
+      { scope, auth, organizationId: person.organizationId },
+      'Person not found',
+    )
+    if (organizationReadDenied) {
+      statusCode = 404
+      profileMeta = { reason: 'organization_not_in_scope' }
+      return organizationReadDenied
     }
 
     // Gated get-then-set cache. Key on the resolved person plus the effective
@@ -1337,8 +1342,8 @@ export const openApi: OpenApiRouteDoc = {
       errors: [
         { status: 400, description: 'Invalid identifier', schema: personDetailErrorSchema },
         { status: 401, description: 'Unauthorized', schema: personDetailErrorSchema },
-        { status: 403, description: 'Forbidden for tenant/organization scope', schema: personDetailErrorSchema },
-        { status: 404, description: 'Person not found', schema: personDetailErrorSchema },
+        { status: 403, description: 'Forbidden — caller lacks the required feature', schema: personDetailErrorSchema },
+        { status: 404, description: 'Person not found, or its organization is not in the caller’s scope', schema: personDetailErrorSchema },
       ],
     },
   },

package/src/modules/customers/api/people/check-phone/route.ts

@@ -3,9 +3,12 @@ import { z } from 'zod'
 import { createRequestContainer } from '@open-mercato/shared/lib/di/container'
 import { getAuthFromRequest } from '@open-mercato/shared/lib/auth/server'
 import { resolveOrganizationScopeForRequest } from '@open-mercato/core/modules/directory/utils/organizationScope'
-import type { EntityManager } from '@mikro-orm/postgresql'
+import type { EntityManager, FilterQuery } from '@mikro-orm/postgresql'
 import { CustomerEntity } from '../../../data/entities'
 import type { OpenApiRouteDoc } from '@open-mercato/shared/lib/openapi'
+import { findWithDecryption } from '@open-mercato/shared/lib/encryption/find'
+import { isTenantDataEncryptionEnabled } from '@open-mercato/shared/lib/encryption/toggles'
+import { MATCH_CANDIDATE_LIMIT } from '../../../lib/findPeopleByAddresses'
 
 const querySchema = z.object({
   digits: z
@@ -18,6 +21,10 @@ export const metadata = {
   GET: { requireAuth: true, requireFeatures: ['customers.people.view'] },
 }
 
+function normalizePhoneDigits(value: string | null | undefined): string {
+  return typeof value === 'string' ? value.replace(/\D/g, '') : ''
+}
+
 export async function GET(req: Request) {
   const url = new URL(req.url)
   const rawQuery: Record<string, string | null> = { digits: url.searchParams.get('digits') }
@@ -45,18 +52,76 @@ export async function GET(req: Request) {
     return NextResponse.json({ match: null })
   }
 
-  const qb = em.createQueryBuilder(CustomerEntity, 'person')
-  qb.select(['person.id', 'person.displayName'])
-  qb.where({ kind: 'person', deletedAt: null })
-  qb.andWhere('person.primary_phone is not null')
-  qb.andWhere("regexp_replace(person.primary_phone, '\\D', '', 'g') = ?", [parse.data.digits])
+  // SQL fast path, gated on the encryption toggle: it can only match stored
+  // plaintext digits, so running it while tenant data encryption is enabled
+  // (the default) would pay a per-row scan that provably returns nothing.
+  // When encryption is off it serves the pre-encryption single-query behavior,
+  // including legacy plaintext rows. Encrypted rows written before the toggle
+  // was turned off are not resolvable by either path by design; plaintext
+  // legacy rows under an enabled toggle still resolve through the decrypted
+  // scan below, where decryption no-ops on non-ciphertext values.
+  if (!isTenantDataEncryptionEnabled()) {
+    const qb = em.createQueryBuilder(CustomerEntity, 'person')
+    qb.select(['person.id', 'person.displayName'])
+    qb.where({ kind: 'person', deletedAt: null })
+    qb.andWhere('person.primary_phone is not null')
+    qb.andWhere("regexp_replace(person.primary_phone, '\\D', '', 'g') = ?", [parse.data.digits])
+    if (auth.tenantId) {
+      qb.andWhere({ tenantId: auth.tenantId })
+    }
+    qb.andWhere({ organizationId: { $in: Array.from(allowedOrgIds) } })
+    qb.limit(1)
+
+    const fastMatch = await qb.getSingleResult()
+    if (fastMatch) {
+      return NextResponse.json({
+        match: {
+          id: fastMatch.id,
+          displayName: fastMatch.displayName,
+        },
+      })
+    }
+  }
+
+  // Encryption-on path: primary_phone holds random-IV ciphertext, so digit
+  // normalization must run in application code over decrypted rows instead of
+  // SQL against the stored column (issue #3840).
+  // Encryption-on path: primary_phone holds random-IV ciphertext, so digit
+  // normalization must run in application code over decrypted rows instead of
+  // SQL against the stored column (issue #3840). The scan is bounded newest-
+  // first and projected to the columns the route uses plus tenantId/
+  // organizationId, which the decryption path reads per row to resolve each
+  // row's own key (a request-level fallback cannot cover multi-org scans or
+  // null-tenant sessions). A primary_phone blind index is the exact O(1)
+  // follow-up (#5515).
+  const where: FilterQuery<CustomerEntity> = {
+    kind: 'person',
+    deletedAt: null,
+    primaryPhone: { $ne: null },
+    organizationId: { $in: Array.from(allowedOrgIds) },
+  }
   if (auth.tenantId) {
-    qb.andWhere({ tenantId: auth.tenantId })
+    where.tenantId = auth.tenantId
   }
-  qb.andWhere({ organizationId: { $in: Array.from(allowedOrgIds) } })
-  qb.limit(1)
 
-  const match = await qb.getSingleResult()
+  const candidates = await findWithDecryption(
+    em,
+    CustomerEntity,
+    where,
+    {
+      limit: MATCH_CANDIDATE_LIMIT,
+      orderBy: { createdAt: 'DESC' },
+      fields: ['id', 'displayName', 'primaryPhone', 'tenantId', 'organizationId'],
+    },
+    {
+      tenantId: auth.tenantId ?? null,
+      organizationId: scope?.selectedId ?? auth.orgId ?? null,
+    },
+  )
+
+  const match = candidates.find(
+    (candidate) => normalizePhoneDigits(candidate.primaryPhone) === parse.data.digits,
+  )
   if (!match) {
     return NextResponse.json({ match: null })
   }

package/src/modules/customers/api/todos/route.ts

@@ -9,6 +9,7 @@ import type { OpenApiRouteDoc } from '@open-mercato/shared/lib/openapi'
 import type { CommandBus } from '@open-mercato/shared/lib/commands'
 import { isCrudHttpError, notFound } from '@open-mercato/shared/lib/crud/errors'
 import { parseBooleanToken } from '@open-mercato/shared/lib/boolean'
+import { isUnrestrictedOrganizationScope } from '@open-mercato/shared/lib/auth/organizationAccess'
 import { resolveTranslations } from '@open-mercato/shared/lib/i18n/server'
 import {
   runCrudMutationGuardAfterSuccess,
@@ -233,15 +234,36 @@ async function resolveCanonicalTodoTargetId(
 
 export async function GET(request: Request): Promise<Response> {
   try {
-    const { auth, em, organizationIds, container, selectedOrganizationId } =
+    const { auth, em, organizationIds, container, selectedOrganizationId, scope } =
       await resolveCustomersRequestContext(request)
     const query = querySchema.parse(Object.fromEntries(new URL(request.url).searchParams))
     const flags = await resolveCustomerInteractionFeatureFlags(container, auth.tenantId)
     if (!flags.legacyAdapters) {
       return await legacyAdaptersDisabledResponse()
     }
-    const queryEngine = container.resolve('queryEngine') as QueryEngine
     const exportAll = parseBooleanToken(query.all) === true
+    const isUnrestricted = isUnrestrictedOrganizationScope({
+      isSuperAdmin: auth.isSuperAdmin === true,
+      allowedOrganizationIds: scope?.allowedIds,
+    })
+    if (!isUnrestricted && (!organizationIds || organizationIds.length === 0)) {
+      logger.warn('customers.todos.list collapsed organization scope', {
+        tenantId: auth.tenantId,
+        organizationIds,
+        selectedId: scope?.selectedId ?? null,
+        allowedIdsCount: scope?.allowedIds?.length ?? null,
+      })
+      return withAdapterHeaders(
+        NextResponse.json({
+          items: [],
+          total: 0,
+          page: exportAll ? 1 : query.page,
+          pageSize: exportAll ? 0 : query.pageSize,
+          totalPages: 1,
+        }),
+      )
+    }
+    const queryEngine = container.resolve('queryEngine') as QueryEngine
     const search = normalizeTodoSearch(query.search)
 
     if (flags.unified) {
@@ -255,6 +277,7 @@ export async function GET(request: Request): Promise<Response> {
           entityId: query.entityId,
           pagination: exportAll ? null : { page: query.page, pageSize: query.pageSize },
           searchText: search,
+          isUnrestricted,
         },
       )
       const total = canonical.total
@@ -275,6 +298,7 @@ export async function GET(request: Request): Promise<Response> {
     const [legacyRows, canonicalRows] = await Promise.all([
       listLegacyTodoRows(em, queryEngine, auth.tenantId, organizationIds, query.entityId, {
         limit: legacyWindow,
+        isUnrestricted,
       }),
       listCanonicalTodoRows(
         em,
@@ -287,6 +311,7 @@ export async function GET(request: Request): Promise<Response> {
           includeDeleted: true,
           source: CUSTOMER_INTERACTION_TODO_ADAPTER_SOURCE,
           limit: legacyWindow,
+          isUnrestricted,
         },
       ),
     ])

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

@@ -118,6 +118,7 @@ type CompaniesResponse = {
   total?: number
   page?: number
   totalPages?: number
+  totalIsCapped?: boolean
 }
 
 type DictionaryKindKey = CustomerDictionaryKind
@@ -198,9 +199,10 @@ export default function CustomersCompaniesPage() {
   const [sorting, setSorting] = React.useState<SortingState>([])
   const [total, setTotal] = React.useState(0)
   const [totalPages, setTotalPages] = React.useState(1)
-  const [search, setSearch] = React.useState('')
+  const [totalIsCapped, setTotalIsCapped] = React.useState(false)
   const pathname = usePathname()
   const searchParams = useSearchParams()
+  const [search, setSearch] = React.useState(() => searchParams?.get('search')?.trim() ?? '')
   // 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
@@ -422,6 +424,7 @@ export default function CustomersCompaniesPage() {
         setRows(items.map((item) => mapApiItem(item as Record<string, unknown>)).filter((row): row is CompanyRow => !!row))
         setTotal(typeof payload.total === 'number' ? payload.total : items.length)
         setTotalPages(typeof payload.totalPages === 'number' ? payload.totalPages : 1)
+        setTotalIsCapped(payload?.totalIsCapped === true)
       } catch (err) {
         if (!cancelled) {
           setCacheStatus(null)
@@ -963,7 +966,7 @@ export default function CustomersCompaniesPage() {
             />
           )}
           virtualized
-          pagination={{ page, pageSize, total, totalPages, onPageChange: setPage, pageSizeOptions: [10, 25, 50, 100], onPageSizeChange: handlePageSizeChange, cacheStatus }}
+          pagination={{ page, pageSize, total, totalPages, totalIsCapped, onPageChange: setPage, pageSizeOptions: [10, 25, 50, 100], onPageSizeChange: handlePageSizeChange, cacheStatus }}
           isLoading={isLoading}
         />
         <AdvancedFilterPanel

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

@@ -3,7 +3,7 @@
 import * as React from 'react'
 import { extensionPoints } from '@open-mercato/core/modules/customers/extension-points'
 import Link from 'next/link'
-import { Building2, UserSearch, Users } from 'lucide-react'
+import { Building2, FileText, Hash, UserSearch, Users } from 'lucide-react'
 import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
 import { useRouter, useSearchParams, usePathname } from 'next/navigation'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
@@ -12,7 +12,7 @@ import { AttachmentsSection, ErrorMessage, LoadingMessage, NotesSection, RecordN
 import { InjectionSpot } from '@open-mercato/ui/backend/injection/InjectionSpot'
 import { buildRecordInjectionContext, useSetCurrentRecordInjectionContext } from '@open-mercato/ui/backend/injection/recordContext'
 import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
-import { CollapsibleZoneLayout } from '@open-mercato/ui/backend/crud/CollapsibleZoneLayout'
+import { CollapsibleZoneLayout, type ZoneSectionDescriptor } from '@open-mercato/ui/backend/crud/CollapsibleZoneLayout'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { createTranslatorWithFallback } from '@open-mercato/shared/lib/i18n/translate'
 import { E } from '#generated/entities.ids.generated'
@@ -57,6 +57,10 @@ export default function DealDetailPage({ params }: { params?: { id?: string } })
   const pathname = usePathname()
   const { confirm, ConfirmDialogElement } = useConfirmDialog()
   const detailTranslator = React.useMemo(() => createTranslatorWithFallback(t), [t])
+  const zoneSections = React.useMemo<ZoneSectionDescriptor[]>(() => [
+    { id: 'details', icon: FileText, label: t('customers.people.detail.deals.form.details', 'Deal details') },
+    { id: 'custom', icon: Hash, label: t('customers.people.detail.deals.form.customFields', 'Custom fields') },
+  ], [t])
 
   const { data, setData, isLoading, error, isNotFound, loadData } = useDealData(id)
   const [isDirty, setIsDirty] = React.useState(false)
@@ -664,6 +668,7 @@ export default function DealDetailPage({ params }: { params?: { id?: string } })
               pageType="deal-detail-v3"
               entityName={dealName}
               isDirty={isDirty}
+              sections={zoneSections}
               zone1DefaultWidth="540px"
               zone1={zone1Content}
               zone2={zone2Content}

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

@@ -125,6 +125,7 @@ type DealsResponse = {
   items?: Array<Record<string, unknown>>
   total?: number
   totalPages?: number
+  totalIsCapped?: boolean
 }
 
 type FilterOption = { value: string; label: string }
@@ -210,6 +211,7 @@ export default function CustomersDealsPage() {
   const [sorting, setSorting] = React.useState<import('@tanstack/react-table').SortingState>([])
   const [total, setTotal] = React.useState(0)
   const [totalPages, setTotalPages] = React.useState(1)
+  const [totalIsCapped, setTotalIsCapped] = React.useState(false)
   const [search, setSearch] = React.useState(() => searchParams?.get('search')?.trim() ?? '')
   const [isLoading, setIsLoading] = React.useState(false)
   const [reloadToken, setReloadToken] = React.useState(0)
@@ -397,6 +399,7 @@ export default function CustomersDealsPage() {
         setRows(mapped)
         setTotal(typeof payload.total === 'number' ? payload.total : mapped.length)
         setTotalPages(typeof payload.totalPages === 'number' ? payload.totalPages : 1)
+        setTotalIsCapped(payload.totalIsCapped === true)
       } catch (err) {
         if (!cancelled) {
           setCacheStatus(null)
@@ -412,10 +415,12 @@ export default function CustomersDealsPage() {
   }, [queryParams, reloadToken, scopeVersion, t])
 
   React.useEffect(() => {
-    if (totalPages > 0 && page > totalPages) {
+    // A capped totalPages is a floor — pages past it hold reachable rows, so
+    // clamping would bounce a deep-linked user off data that exists.
+    if (!totalIsCapped && totalPages > 0 && page > totalPages) {
       setPage(totalPages)
     }
-  }, [page, totalPages])
+  }, [page, totalPages, totalIsCapped])
 
   const queryRef = React.useRef(searchParams?.toString() ?? '')
   React.useEffect(() => {
@@ -1136,6 +1141,7 @@ export default function CustomersDealsPage() {
             pageSize,
             total,
             totalPages,
+            totalIsCapped,
             onPageChange: (nextPage) => setPage(nextPage),
             pageSizeOptions: [10, 25, 50, 100],
             onPageSizeChange: handlePageSizeChange,

package/src/modules/customers/backend/customers/deals/pipeline/components/Lane.tsx

@@ -7,6 +7,7 @@ import type { RowActionItem } from '@open-mercato/ui/backend/RowActions'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'
 import type { FilterOptionTone } from '@open-mercato/shared/lib/query/advanced-filter'
+import { toneToDotClass } from './toneClasses'
 import { DealCard, type DealCardData } from './DealCard'
 import { DashedTileButton } from './DashedTileButton'
 import { LANE_WIDTH_PX } from './constants'
@@ -52,15 +53,10 @@ type LaneProps = {
   onResetWidth?: (stageId: string) => void
 }
 
-// 4px color bar tone — uses saturated icon tokens so the bar is visibly colored, not pale
-const ACCENT_TONE_CLASS: Record<FilterOptionTone, string> = {
-  success: 'bg-status-success-icon',
-  error: 'bg-status-error-icon',
-  warning: 'bg-status-warning-icon',
-  info: 'bg-status-info-icon',
-  neutral: 'bg-status-neutral-icon',
-  brand: 'bg-brand-violet',
-  pink: 'bg-status-pink-icon',
+// 4px color bar tone — saturated icon tokens shared with the status filter pills
+// (toneClasses.ts) so the lane bar and the filter dots stay in lockstep (#5107 review).
+function getAccentClass(tone: FilterOptionTone | null): string {
+  return toneToDotClass(tone, 'bg-border')
 }
 
 // Count pill bg uses very-light status background, text uses status text color
@@ -74,11 +70,6 @@ const COUNT_BADGE_TONE_CLASS: Record<FilterOptionTone, string> = {
   pink: 'bg-status-pink-bg text-status-pink-text',
 }
 
-function getAccentClass(tone: FilterOptionTone | null): string {
-  if (tone && tone in ACCENT_TONE_CLASS) return ACCENT_TONE_CLASS[tone]
-  return 'bg-border'
-}
-
 function getCountBadgeClass(tone: FilterOptionTone | null): string {
   if (tone && tone in COUNT_BADGE_TONE_CLASS) return COUNT_BADGE_TONE_CLASS[tone]
   return 'bg-muted text-muted-foreground'

package/src/modules/customers/backend/customers/deals/pipeline/components/StatusFilterPopover.tsx

@@ -10,45 +10,70 @@ import {
 } from '@open-mercato/ui/primitives/popover'
 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'
+import { mapDictionaryColorToTone } from '@open-mercato/shared/lib/query/advanced-filter'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { useCustomerDictionary } from '../../../../../components/detail/hooks/useCustomerDictionary'
+import { canonicalDealStatus } from '../../../../../lib/dealStatus'
+import { toneToDotClass } from './toneClasses'
 import { ChipButton } from './ChipButton'
 import { FilterPopoverShell } from './FilterPopoverShell'
 
 /**
  * Filter options exposed to the operator.
  *
- * The deal `status` column accepts the historical 4-value enum (`open` | `closed` | `win` |
- * `loose`), but the codebase only ever **writes** `loose` for a lost deal — `closed` was a
- * latent unused state from an earlier iteration. Exposing a separate "Lost (closed)" filter
- * option therefore filtered to nothing and confused operators. We display a single "Lost"
- * choice and intentionally map it to the canonical wire value `loose` so the filter matches
- * what the rest of the app actually persists. (Renaming the column / migrating the data to
- * `lost` is a deeper data-model change tracked separately.)
+ * The deal `status` column is dictionary-driven (`deal-statuses`); the seeded dictionary
+ * carries five values (`open`, `closed`, `win`, `loose`, `in_progress`) plus any
+ * tenant-custom entries. We render every dictionary entry de-duplicated by canonical
+ * spelling so the kanban Status pill stays aligned with the list page's advanced filter
+ * (which also uses the dictionary). A hard-coded fallback keeps the popover usable while
+ * the dictionary is loading or when a tenant has no entries.
+ *
+ * `won` / `lost` are accepted as aliases for `win` / `loose` at the API layer (see
+ * `lib/dealStatus.ts:expandDealStatusAliases`, shared by the deals list route and the
+ * kanban aggregate route). The UI only exposes the canonical values to avoid duplicate
+ * pills, but `canonicalDealStatus` normalizes any alias passed in through `values` so
+ * the chip and draft selection render the correct label.
  */
-const STATUS_OPTIONS: Array<{
+const FALLBACK_STATUS_OPTIONS: Array<{
   value: string
   labelKey: string
   labelFallback: string
-  /** Tone selects the small ●-dot color on the pill (per Figma: green / amber / gray) */
   dotClass: string
 }> = [
   {
     value: 'open',
     labelKey: 'customers.deals.kanban.filter.status.open',
     labelFallback: 'Open',
-    dotClass: 'bg-status-success-icon',
+    // Tones mirror mapDictionaryColorToTone over the seeded dictionary colors
+    // (#2563eb → info, #22c55e → success, #ef4444 → error) so the fallback pills
+    // render identically to the dictionary-driven ones.
+    dotClass: 'bg-status-info-icon',
   },
   {
     value: 'win',
     labelKey: 'customers.deals.kanban.filter.status.won',
     labelFallback: 'Won',
-    dotClass: 'bg-status-warning-icon',
+    dotClass: 'bg-status-success-icon',
   },
   {
     value: 'loose',
     labelKey: 'customers.deals.kanban.filter.status.lost',
     labelFallback: 'Lost',
+    dotClass: 'bg-status-error-icon',
+  },
+  {
+    value: 'closed',
+    labelKey: 'customers.deals.kanban.filter.status.closed',
+    labelFallback: 'Closed',
     dotClass: 'bg-status-neutral-icon',
   },
+  {
+    value: 'in_progress',
+    labelKey: 'customers.deals.kanban.filter.status.inProgress',
+    labelFallback: 'In progress',
+    dotClass: 'bg-status-warning-icon',
+  },
 ]
 
 type StatusFilterPopoverProps = {
@@ -58,29 +83,75 @@ type StatusFilterPopoverProps = {
 
 export function StatusFilterPopover({ values, onApply }: StatusFilterPopoverProps): React.ReactElement {
   const t = useT()
+  const scopeVersion = useOrganizationScopeVersion()
+  const { data: dictionaryData, isLoading: dictionaryLoading } = useCustomerDictionary(
+    'deal-statuses',
+    scopeVersion,
+  )
   const [open, setOpen] = React.useState(false)
-  const [draft, setDraft] = React.useState<string[]>(values)
+  const normalizedValues = React.useMemo(
+    () => Array.from(new Set(values.map(canonicalDealStatus))),
+    [values],
+  )
+  const [draft, setDraft] = React.useState<string[]>(normalizedValues)
 
   React.useEffect(() => {
-    if (open) setDraft(values)
-  }, [open, values])
+    if (open) setDraft(normalizedValues)
+  }, [open, normalizedValues])
+
+  const statusOptions = React.useMemo(() => {
+    const entries = dictionaryData?.entries
+    if (entries && entries.length > 0) {
+      const byCanonical = new Map<string, { value: string; label: string; dotClass: string }>()
+      for (const entry of entries) {
+        const canonical = canonicalDealStatus(entry.value)
+        if (byCanonical.has(canonical)) continue
+        const tone = mapDictionaryColorToTone(entry.color ?? null)
+        byCanonical.set(canonical, {
+          value: canonical,
+          label: entry.label,
+          dotClass: toneToDotClass(tone),
+        })
+      }
+      // Sort by label exactly like the List page's advanced filter
+      // (backend/customers/deals/page.tsx dictionaryOptions) so both surfaces render
+      // the same pills in the same order.
+      return Array.from(byCanonical.values()).sort((a, b) =>
+        a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }),
+      )
+    }
+    return FALLBACK_STATUS_OPTIONS.map((entry) => ({
+      value: entry.value,
+      label: translateWithFallback(t, entry.labelKey, entry.labelFallback),
+      dotClass: entry.dotClass,
+    }))
+  }, [dictionaryData, t])
+
+  const labelByValue = React.useMemo(() => {
+    const map = new Map<string, string>()
+    for (const option of statusOptions) {
+      map.set(option.value, option.label)
+    }
+    for (const fallback of FALLBACK_STATUS_OPTIONS) {
+      if (!map.has(fallback.value)) {
+        map.set(fallback.value, translateWithFallback(t, fallback.labelKey, fallback.labelFallback))
+      }
+    }
+    return map
+  }, [statusOptions, t])
 
   const chipLabel = translateWithFallback(t, 'customers.deals.kanban.filter.status', 'Status')
   const chipValue =
-    values.length === 0
+    normalizedValues.length === 0
       ? translateWithFallback(t, 'customers.deals.kanban.filter.all', 'All')
-      : values
-          .map((value) => {
-            const option = STATUS_OPTIONS.find((entry) => entry.value === value)
-            return option
-              ? translateWithFallback(t, option.labelKey, option.labelFallback)
-              : value
-          })
+      : normalizedValues
+          .map((value) => labelByValue.get(value) ?? value)
           .join(', ')
 
   const toggleDraft = (value: string) => {
+    const normalized = canonicalDealStatus(value)
     setDraft((prev) =>
-      prev.includes(value) ? prev.filter((entry) => entry !== value) : [...prev, value],
+      prev.includes(normalized) ? prev.filter((entry) => entry !== normalized) : [...prev, normalized],
     )
   }
 
@@ -101,7 +172,7 @@ export function StatusFilterPopover({ values, onApply }: StatusFilterPopoverProp
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <ChipButton label={chipLabel} value={chipValue} active={values.length > 0} />
+        <ChipButton label={chipLabel} value={chipValue} active={normalizedValues.length > 0} />
       </PopoverTrigger>
       <PopoverContent
         className="w-96 rounded-2xl border-border bg-transparent p-0 shadow-xl"
@@ -133,9 +204,19 @@ export function StatusFilterPopover({ values, onApply }: StatusFilterPopoverProp
             {translateWithFallback(t, 'customers.deals.kanban.filter.status', 'Status')}
           </span>
           <div className="flex flex-wrap items-center gap-x-1.5 gap-y-2">
-            {STATUS_OPTIONS.map((option) => {
+            {dictionaryLoading ? (
+              <span className="flex items-center gap-2 text-xs text-muted-foreground" role="status" aria-live="polite">
+                <Spinner className="size-3" />
+                {translateWithFallback(
+                  t,
+                  'customers.deals.kanban.filter.status.loading',
+                  'Loading statuses…',
+                )}
+              </span>
+            ) : (
+              statusOptions.map((option) => {
               const isSelected = draft.includes(option.value)
-              const label = translateWithFallback(t, option.labelKey, option.labelFallback)
+              const label = option.label
               return (
                 <Button
                   key={option.value}
@@ -160,7 +241,8 @@ export function StatusFilterPopover({ values, onApply }: StatusFilterPopoverProp
                   ) : null}
                 </Button>
               )
-            })}
+              })
+            )}
           </div>
         </FilterPopoverShell>
       </PopoverContent>

package/src/modules/customers/backend/customers/deals/pipeline/components/toneClasses.ts

@@ -0,0 +1,21 @@
+import type { FilterOptionTone } from '@open-mercato/shared/lib/query/advanced-filter'
+
+// Saturated icon tokens shared by the kanban lane accent bar and the status filter
+// pills, so both surfaces render the same tone identically (#5107 review).
+export const TONE_DOT_CLASS: Record<FilterOptionTone, string> = {
+  success: 'bg-status-success-icon',
+  error: 'bg-status-error-icon',
+  warning: 'bg-status-warning-icon',
+  info: 'bg-status-info-icon',
+  neutral: 'bg-status-neutral-icon',
+  brand: 'bg-brand-violet',
+  pink: 'bg-status-pink-icon',
+}
+
+export function toneToDotClass(
+  tone: FilterOptionTone | null | undefined,
+  fallback = 'bg-status-neutral-icon',
+): string {
+  if (tone && tone in TONE_DOT_CLASS) return TONE_DOT_CLASS[tone]
+  return fallback
+}