@open-mercato/core 0.6.6 → 0.6.7-develop.6552.1.5208a19369

package/src/modules/auth/lib/autologin.ts

@@ -0,0 +1,36 @@
+export type AutoLoginCredentials = {
+  email: string
+  password: string
+  tenantId: string | null
+}
+
+function readEnvValue(env: Record<string, string | undefined>, key: string): string {
+  const value = env[key]
+  return typeof value === 'string' ? value.trim() : ''
+}
+
+/**
+ * Reads the optional demo-autologin credentials from env. When both
+ * `OM_AUTOLOGIN_EMAIL` and `OM_AUTOLOGIN_PASSWORD` are set, the homepage hands
+ * unauthenticated visitors to the autologin route which signs them in and drops
+ * them into the app. Unset (the default) → `null` → normal login flow.
+ *
+ * `OM_AUTOLOGIN_TENANT` is optional and only needed when the same email exists
+ * across multiple tenants. Pure: pass the env bag so it stays testable.
+ */
+export function resolveAutoLoginCredentials(
+  env: Record<string, string | undefined> = process.env,
+): AutoLoginCredentials | null {
+  const email = readEnvValue(env, 'OM_AUTOLOGIN_EMAIL')
+  const password = env.OM_AUTOLOGIN_PASSWORD ?? ''
+  if (!email || !password) return null
+  const tenantId = readEnvValue(env, 'OM_AUTOLOGIN_TENANT')
+  return { email, password, tenantId: tenantId || null }
+}
+
+/** True when demo autologin credentials are configured via env. */
+export function isAutoLoginEnabled(
+  env: Record<string, string | undefined> = process.env,
+): boolean {
+  return resolveAutoLoginCredentials(env) !== null
+}

package/src/modules/configs/i18n/de.json

@@ -189,5 +189,9 @@
   "configs.systemStatus.variables.queryIndexWarmupThrottleMs.label": "Warmup-Drosselfenster",
   "configs.systemStatus.variables.scheduleAutoReindex.description": "Automatisch Query-Index-Neuindizierungsaufträge bei Lücken planen.",
   "configs.systemStatus.variables.scheduleAutoReindex.label": "Automatische Neuindizierung",
-  "configs.systemStatus.viewDocs": "Dokumentation anzeigen"
+  "configs.systemStatus.viewDocs": "Dokumentation anzeigen",
+  "configs.upgrades.attachmentsOrgReconcile.cta": "Anhang-Organisationen abgleichen",
+  "configs.upgrades.attachmentsOrgReconcile.loading": "Anhang-Organisationen werden abgeglichen…",
+  "configs.upgrades.attachmentsOrgReconcile.message": "Version {{version}} behebt Anhänge, die unter der falschen Organisation gespeichert wurden. Führen Sie den Abgleich aus, um vorhandene Anhänge in die Organisation des zugehörigen Datensatzes zu verschieben.",
+  "configs.upgrades.attachmentsOrgReconcile.success": "Anhang-Organisationen abgeglichen."
 }

package/src/modules/configs/i18n/en.json

@@ -189,5 +189,9 @@
   "configs.systemStatus.variables.queryIndexWarmupThrottleMs.label": "Warmup throttle window",
   "configs.systemStatus.variables.scheduleAutoReindex.description": "Automatically schedule query index reindex jobs when gaps appear.",
   "configs.systemStatus.variables.scheduleAutoReindex.label": "Auto reindex",
-  "configs.systemStatus.viewDocs": "View documentation"
+  "configs.systemStatus.viewDocs": "View documentation",
+  "configs.upgrades.attachmentsOrgReconcile.cta": "Reconcile attachment organizations",
+  "configs.upgrades.attachmentsOrgReconcile.loading": "Reconciling attachment organizations…",
+  "configs.upgrades.attachmentsOrgReconcile.message": "Version {{version}} fixes attachments that were saved under the wrong organization. Run the reconciliation to move existing attachments to the organization of the record they belong to.",
+  "configs.upgrades.attachmentsOrgReconcile.success": "Attachment organizations reconciled."
 }

package/src/modules/configs/i18n/es.json

@@ -189,5 +189,9 @@
   "configs.systemStatus.variables.queryIndexWarmupThrottleMs.label": "Ventana de limitación del calentamiento",
   "configs.systemStatus.variables.scheduleAutoReindex.description": "Programar automáticamente trabajos de reindexación cuando se detecten brechas.",
   "configs.systemStatus.variables.scheduleAutoReindex.label": "Reindexación automática",
-  "configs.systemStatus.viewDocs": "Ver documentación"
+  "configs.systemStatus.viewDocs": "Ver documentación",
+  "configs.upgrades.attachmentsOrgReconcile.cta": "Reconciliar organizaciones de adjuntos",
+  "configs.upgrades.attachmentsOrgReconcile.loading": "Reconciliando organizaciones de adjuntos…",
+  "configs.upgrades.attachmentsOrgReconcile.message": "La versión {{version}} corrige los adjuntos guardados en la organización incorrecta. Ejecuta la reconciliación para mover los adjuntos existentes a la organización del registro al que pertenecen.",
+  "configs.upgrades.attachmentsOrgReconcile.success": "Organizaciones de adjuntos reconciliadas."
 }

package/src/modules/configs/i18n/pl.json

@@ -189,5 +189,9 @@
   "configs.systemStatus.variables.queryIndexWarmupThrottleMs.label": "Okno throttlingu rozgrzewki",
   "configs.systemStatus.variables.scheduleAutoReindex.description": "Automatycznie uruchamia przebudowę indeksu zapytań, gdy wykryte zostaną luki.",
   "configs.systemStatus.variables.scheduleAutoReindex.label": "Automatyczna przebudowa indeksu",
-  "configs.systemStatus.viewDocs": "Zobacz dokumentację"
+  "configs.systemStatus.viewDocs": "Zobacz dokumentację",
+  "configs.upgrades.attachmentsOrgReconcile.cta": "Uzgodnij organizacje załączników",
+  "configs.upgrades.attachmentsOrgReconcile.loading": "Uzgadnianie organizacji załączników…",
+  "configs.upgrades.attachmentsOrgReconcile.message": "Wersja {{version}} naprawia załączniki zapisane pod niewłaściwą organizacją. Uruchom uzgadnianie, aby przenieść istniejące załączniki do organizacji rekordu, do którego należą.",
+  "configs.upgrades.attachmentsOrgReconcile.success": "Organizacje załączników zostały uzgodnione."
 }

package/src/modules/configs/lib/upgrade-actions.ts

@@ -1,6 +1,11 @@
 import type { EntityManager } from '@mikro-orm/postgresql'
 import * as semver from 'semver'
 import type { AppContainer } from '@open-mercato/shared/lib/di/container'
+import { createLogger } from '@open-mercato/shared/lib/logger'
+import type { QueryEngine } from '@open-mercato/shared/lib/query/types'
+import { reconcileAttachmentOrganizations } from '@open-mercato/core/modules/attachments/lib/reconcileOrganization'
+
+const logger = createLogger('configs').child({ component: 'upgrade-actions' })
 
 export type UpgradeActionContext = {
   tenantId: string
@@ -38,6 +43,25 @@ export function compareVersions(a: string, b: string): number {
 }
 
 export const upgradeActions: UpgradeActionDefinition[] = [
+  {
+    id: 'attachments.reconcile-organization',
+    version: '0.6.6',
+    messageKey: 'configs.upgrades.attachmentsOrgReconcile.message',
+    ctaKey: 'configs.upgrades.attachmentsOrgReconcile.cta',
+    successKey: 'configs.upgrades.attachmentsOrgReconcile.success',
+    loadingKey: 'configs.upgrades.attachmentsOrgReconcile.loading',
+    async run({ container, em, tenantId }) {
+      const queryEngine = container.resolve('queryEngine') as QueryEngine
+      const report = await reconcileAttachmentOrganizations({ em, queryEngine, tenantId })
+      logger.info('attachments organization reconcile completed', {
+        tenantId,
+        scanned: report.scanned,
+        updated: report.updated,
+        unresolved: report.unresolved,
+        skippedVirtual: report.skippedVirtual,
+      })
+    },
+  },
   {
     id: 'customers.seed-interaction-statuses',
     version: '0.6.5',

package/src/modules/customer_accounts/AGENTS.md

@@ -306,15 +306,17 @@ Both link to `/backend/customer_accounts/{sourceEntityId}` for staff review.
 
 | Spot ID | Widget | Purpose |
 |---------|--------|---------|
-| `customers.person` | `account-status` | Shows portal account status on Customers v2 person detail forms |
-| `crud-form:customers.person` | `account-status` | Alias for CrudForm hosts deriving the spot from `customers.person` |
-| `crud-form:customers:customer_person_profile:fields` | `account-status` | Shows portal account status on CRM person detail page |
-| `customers.company` | `company-users` | Shows portal users on Customers v2 company detail forms |
-| `crud-form:customers.company` | `company-users` | Alias for CrudForm hosts deriving the spot from `customers.company` |
-| `crud-form:customers:customer_company_profile:fields` | `company-users` | Shows portal users linked to a CRM company |
+| `customers.person` | `account-status` | Alias for hosts requesting the bare `customers.person` entity spot |
+| `crud-form:customers.person` | `account-status` | Shows portal account status on the person v2 detail page (`people-v2/[id]`) |
+| `customers.company` | `company-users` | Alias for hosts requesting the bare `customers.company` entity spot |
+| `crud-form:customers.company` | `company-users` | Shows portal users on the company v2 detail page (`companies-v2/[id]`) |
 
 Both inject as column 2 groups with priority 200, gated by `customer_accounts.view` feature.
 
+CrudForm derives its spot id as `crud-form:${entityId}` with every `:` normalized to `.`, so a
+registered `crud-form:` key whose entity segment still contains `:` can never be requested by any
+host. Register against the normalized (dot) form only — `injection-table.test.ts` enforces this.
+
 ## Backend Pages
 
 | Path | Purpose |

package/src/modules/customer_accounts/api/admin/roles/[id]/acl.ts

@@ -49,6 +49,7 @@ export async function PUT(req: Request, { params }: { params: { id: string } })
   const role = await em.findOne(CustomerRole, {
     id: params.id,
     tenantId,
+    organizationId: auth.orgId,
     deletedAt: null,
   })
   if (!role) {

package/src/modules/customer_accounts/api/admin/roles/[id].ts

@@ -36,6 +36,7 @@ export async function GET(req: Request, { params }: { params: { id: string } })
   const role = await em.findOne(CustomerRole, {
     id: params.id,
     tenantId: auth.tenantId,
+    organizationId: auth.orgId,
     deletedAt: null,
   })
   if (!role) {
@@ -94,6 +95,7 @@ export async function PUT(req: Request, { params }: { params: { id: string } })
   const role = await em.findOne(CustomerRole, {
     id: params.id,
     tenantId: auth.tenantId,
+    organizationId: auth.orgId,
     deletedAt: null,
   })
   if (!role) {
@@ -127,7 +129,11 @@ export async function PUT(req: Request, { params }: { params: { id: string } })
   if (parsed.data.isDefault !== undefined) updates.isDefault = parsed.data.isDefault
   if (parsed.data.customerAssignable !== undefined) updates.customerAssignable = parsed.data.customerAssignable
 
-  await em.nativeUpdate(CustomerRole, { id: role.id }, updates)
+  await em.nativeUpdate(CustomerRole, {
+    id: role.id,
+    tenantId: auth.tenantId,
+    organizationId: auth.orgId,
+  }, updates)
 
   void emitCustomerAccountsEvent('customer_accounts.role.updated', {
     id: role.id,
@@ -157,6 +163,7 @@ export async function DELETE(req: Request, { params }: { params: { id: string }
   const role = await em.findOne(CustomerRole, {
     id: params.id,
     tenantId: auth.tenantId,
+    organizationId: auth.orgId,
     deletedAt: null,
   })
   if (!role) {
@@ -191,8 +198,15 @@ export async function DELETE(req: Request, { params }: { params: { id: string }
     return NextResponse.json({ ok: false, error: `Cannot delete role with ${assignedUsersCount} assigned user(s). Reassign users first.` }, { status: 400 })
   }
 
-  await em.nativeUpdate(CustomerRole, { id: role.id }, { deletedAt: new Date() })
-  await em.nativeUpdate(CustomerRoleAcl, { role: role.id as any }, { deletedAt: new Date() })
+  await em.nativeUpdate(CustomerRole, {
+    id: role.id,
+    tenantId: auth.tenantId,
+    organizationId: auth.orgId,
+  }, { deletedAt: new Date() })
+  await em.nativeUpdate(CustomerRoleAcl, {
+    role: role.id as any,
+    tenantId: auth.tenantId,
+  }, { deletedAt: new Date() })
 
   void emitCustomerAccountsEvent('customer_accounts.role.deleted', {
     id: role.id,

package/src/modules/customer_accounts/api/portal/users/[id]/roles.ts

@@ -60,7 +60,12 @@ export async function PUT(req: Request, { params }: { params: { id: string } })
     ? await findWithDecryption(
         em,
         CustomerRole,
-        { id: { $in: requestedRoleIds }, tenantId: auth.tenantId, deletedAt: null } as any,
+        {
+          id: { $in: requestedRoleIds },
+          tenantId: auth.tenantId,
+          organizationId: auth.orgId,
+          deletedAt: null,
+        } as any,
         undefined,
         { tenantId: auth.tenantId, organizationId: auth.orgId },
       )

package/src/modules/customer_accounts/api/portal/users-invite.ts

@@ -67,7 +67,12 @@ export async function POST(req: Request) {
     ? await findWithDecryption(
         em,
         CustomerRole,
-        { id: { $in: requestedRoleIds }, tenantId: auth.tenantId, deletedAt: null } as any,
+        {
+          id: { $in: requestedRoleIds },
+          tenantId: auth.tenantId,
+          organizationId: auth.orgId,
+          deletedAt: null,
+        } as any,
         undefined,
         { tenantId: auth.tenantId, organizationId: auth.orgId },
       )

package/src/modules/customer_accounts/services/customerInvitationService.ts

@@ -133,6 +133,7 @@ export class CustomerInvitationService {
           {
             id: { $in: roleIds } as any,
             tenantId: invitation.tenantId,
+            organizationId: invitation.organizationId,
             deletedAt: null,
           } as any,
           undefined,

package/src/modules/customer_accounts/services/customerRbacService.ts

@@ -29,7 +29,9 @@ export class CustomerRbacService {
   }
 
   private getCacheKey(userId: string, scope: { tenantId: string; organizationId: string }): string {
-    return `customer_rbac:${userId}:${scope.tenantId}:${scope.organizationId}`
+    // Keep the authorization query versioned in the key so cache entries created
+    // before scope hardening cannot preserve grants that are no longer valid.
+    return `customer_rbac:v2:${userId}:${scope.tenantId}:${scope.organizationId}`
   }
 
   private getUserTag(userId: string): string {
@@ -89,8 +91,13 @@ export class CustomerRbacService {
     // Aggregate role ACLs
     const links = await em.find(CustomerUserRole, {
       user: userId as any,
+      role: {
+        tenantId: scope.tenantId,
+        organizationId: scope.organizationId,
+        deletedAt: null,
+      },
       deletedAt: null,
-    }, { populate: ['role'] })
+    } as any, { populate: ['role'] })
     const roleIds = links.map((l) => (l.role as any)?.id).filter(Boolean)
 
     let isPortalAdmin = false

package/src/modules/customer_accounts/widgets/injection-table.ts

@@ -19,10 +19,8 @@ const companyUsersWidget = {
 export const injectionTable: ModuleInjectionTable = {
   'customers.person': [accountStatusWidget],
   'crud-form:customers.person': [accountStatusWidget],
-  'crud-form:customers:customer_person_profile:fields': [accountStatusWidget],
   'customers.company': [companyUsersWidget],
   'crud-form:customers.company': [companyUsersWidget],
-  'crud-form:customers:customer_company_profile:fields': [companyUsersWidget],
   // Step 4.10 — Portal AiChat injection example.
   // Mapped to the portal profile page's `pageAfter('profile')` spot;
   // third-party modules targeting other portal pages can copy this entry.

package/src/modules/customers/backend/customers/companies-v2/[id]/page.tsx

@@ -31,6 +31,7 @@ import type { TagsSectionController } from '@open-mercato/ui/backend/detail'
 import { coerceDisplayName } from '../../../../lib/displayName'
 import { CompanyDetailHeader } from '../../../../components/detail/CompanyDetailHeader'
 import { CompanyDetailTabs, resolveLegacyTab, type CompanyTabId } from '../../../../components/detail/CompanyDetailTabs'
+import { useDealsAccess } from '../../../../components/detail/useDealsAccess'
 import { CompanyKpiBar } from '../../../../components/detail/CompanyKpiBar'
 import { ScheduleActivityDialog, type ScheduleActivityEditData } from '../../../../components/detail/ScheduleActivityDialog'
 import { ChangelogTab } from '../../../../components/detail/ChangelogTab'
@@ -69,6 +70,7 @@ export default function CompanyDetailV2Page({ params }: { params?: { id?: string
   }, [searchParams])
   const [activeTab, setActiveTab] = React.useState<CompanyTabId>(initialTab)
   const [sectionAction, setSectionAction] = React.useState<SectionAction | null>(null)
+  const { canViewDeals, isReady: isDealsAccessReady } = useDealsAccess()
 
   // Form state
   const [isDirty, setIsDirty] = React.useState(false)
@@ -328,6 +330,14 @@ export default function CompanyDetailV2Page({ params }: { params?: { id?: string
     setSectionAction(null)
   }, [activeTab])
 
+  // A `?tab=deals` deep link must not strand users without `customers.deals.view`
+  // on a tab that no longer exists for them. Wait for the granted features to load
+  // so a permitted user is never bounced off the tab mid-fetch.
+  React.useEffect(() => {
+    if (!isDealsAccessReady || canViewDeals) return
+    setActiveTab((current) => (current === 'deals' ? 'people' : current))
+  }, [isDealsAccessReady, canViewDeals])
+
   // Deals scope
   const dealsScope = React.useMemo(
     () => (currentCompanyId ? ({ kind: 'company', entityId: currentCompanyId } as const) : null),
@@ -544,7 +554,7 @@ export default function CompanyDetailV2Page({ params }: { params?: { id?: string
                   />
                 )}
 
-                {activeTab === 'deals' && (
+                {activeTab === 'deals' && canViewDeals && (
                   <DealsSection
                     scope={dealsScope}
                     emptyLabel={t('customers.companies.detail.empty.deals', 'No deals linked to this company.')}

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

@@ -24,9 +24,13 @@ export function ViewTabsRow({ active, className }: ViewTabsRowProps): React.Reac
     map: translateWithFallback(t, 'customers.deals.kanban.view.map', 'Map'),
   }
 
+  // Link-based tab row (two routes), so the Tabs primitive (state-driven,
+  // onValueChange) does not fit — real <Link> semantics must stay. Classes
+  // mirror the Tabs underline variant: accent-indigo active border,
+  // shadow-focus halo.
   const baseTab =
-    'inline-flex items-center px-3.5 py-2.5 text-sm leading-normal transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
-  const activeTab = 'border-b-2 border-foreground font-semibold text-foreground'
+    'inline-flex items-center px-3.5 py-2.5 text-sm leading-normal transition-colors focus-visible:outline-none focus-visible:shadow-focus'
+  const activeTab = 'border-b-2 border-accent-indigo font-semibold text-foreground'
   const inactiveTab = 'border-b-2 border-transparent font-normal text-muted-foreground hover:text-foreground'
 
   // Renders the active tab as a non-navigating `<span>` and the inactive tab as a `<Link>`,

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

@@ -1,10 +1,9 @@
 "use client"
 
 import * as React from 'react'
-import { cn } from '@open-mercato/shared/lib/utils'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '@open-mercato/ui/primitives/button'
-import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Tabs, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
 import {
   Users,
   Handshake,
@@ -14,6 +13,7 @@ import {
   Plus,
 } from 'lucide-react'
 import type { SectionAction } from '@open-mercato/ui/backend/detail'
+import { useDealsAccess } from './useDealsAccess'
 
 export type CompanyTabId =
   | 'people'
@@ -27,7 +27,7 @@ type TabDef = {
   id: CompanyTabId
   label: string
   icon?: React.ReactNode
-  badge?: React.ReactNode
+  count?: React.ReactNode
 }
 
 type CompanyDetailTabsProps = {
@@ -58,21 +58,9 @@ export function resolveLegacyTab(tab: string | null | undefined): CompanyTabId {
   return tab as CompanyTabId
 }
 
-function NewBadge() {
-  return (
-    <span className="ml-1.5 rounded bg-foreground px-1.5 py-0.5 text-overline font-semibold leading-none text-background">
-      NEW
-    </span>
-  )
-}
-
-function CountBadge({ count }: { count: number }) {
-  if (count <= 0) return null
-  return (
-    <span className="ml-1.5 rounded-full bg-muted px-1.5 py-0.5 text-xs font-medium leading-none text-muted-foreground">
-      {count > 999 ? '999+' : count}
-    </span>
-  )
+function formatTabCount(count: number): string | number | undefined {
+  if (count <= 0) return undefined
+  return count > 999 ? '999+' : count
 }
 
 export function CompanyDetailTabs({
@@ -87,6 +75,7 @@ export function CompanyDetailTabs({
   children,
 }: CompanyDetailTabsProps) {
   const t = useT()
+  const { canViewDeals } = useDealsAccess()
 
   const builtInTabs: TabDef[] = React.useMemo(
     () => [
@@ -94,34 +83,38 @@ export function CompanyDetailTabs({
         id: 'people',
         label: t('customers.companies.detail.tabs.people', 'People'),
         icon: <Users className="size-4" />,
-        badge: <CountBadge count={peopleCount} />,
-      },
-      {
-        id: 'deals',
-        label: t('customers.companies.detail.tabs.deals', 'Deals'),
-        icon: <Handshake className="size-4" />,
-        badge: <CountBadge count={dealsCount} />,
+        count: formatTabCount(peopleCount),
       },
+      ...(canViewDeals
+        ? [
+            {
+              id: 'deals' as CompanyTabId,
+              label: t('customers.companies.detail.tabs.deals', 'Deals'),
+              icon: <Handshake className="size-4" />,
+              count: formatTabCount(dealsCount),
+            },
+          ]
+        : []),
       {
         id: 'activity-log',
         label: t('customers.companies.detail.tabs.activityLog', 'Activity log'),
         icon: <Clock className="size-4" />,
-        badge: <CountBadge count={activitiesCount} />,
+        count: formatTabCount(activitiesCount),
       },
       {
         id: 'changelog',
         label: t('customers.companies.detail.tabs.changelog', 'Changelog'),
         icon: <History className="size-4" />,
-        badge: <NewBadge />,
+        count: 'NEW',
       },
       {
         id: 'files',
         label: t('customers.companies.detail.tabs.files', 'Files'),
         icon: <Paperclip className="size-4" />,
-        badge: <CountBadge count={filesCount} />,
+        count: formatTabCount(filesCount),
       },
     ],
-    [t, peopleCount, dealsCount, activitiesCount, filesCount],
+    [t, canViewDeals, peopleCount, dealsCount, activitiesCount, filesCount],
   )
 
   const allTabs: TabDef[] = React.useMemo(
@@ -138,33 +131,24 @@ export function CompanyDetailTabs({
   return (
     <div>
       {/* Tab navigation */}
-      <div className="flex items-end justify-between gap-2 border-b" role="tablist" aria-label={t('customers.companies.detail.tabs.label', 'Company detail sections')}>
-        <nav className="-mb-px flex flex-1 gap-1 overflow-x-auto px-1">
-          {allTabs.map((tab) => {
-            const isActive = activeTab === tab.id
-            return (
-              <Button
-                key={tab.id}
-                type="button"
-                variant="ghost"
-                size="sm"
-                role="tab"
-                aria-selected={isActive}
-                onClick={() => onTabChange(tab.id)}
-                className={cn(
-                  'h-auto shrink-0 rounded-none border-b-2 px-3 py-2.5 hover:bg-transparent',
-                  isActive
-                    ? 'border-foreground text-foreground font-semibold'
-                    : 'border-transparent text-muted-foreground hover:text-foreground',
-                )}
-              >
-                {tab.icon && <span className="mr-1.5">{tab.icon}</span>}
+      <div className="flex items-end justify-between gap-2 border-b">
+        <Tabs
+          value={activeTab}
+          onValueChange={(value) => onTabChange(value as CompanyTabId)}
+          variant="underline"
+          className="min-w-0 flex-1"
+        >
+          <TabsList
+            aria-label={t('customers.companies.detail.tabs.label', 'Company detail sections')}
+            className="-mb-px w-full overflow-x-auto border-b-0 px-1"
+          >
+            {allTabs.map((tab) => (
+              <TabsTrigger key={tab.id} value={tab.id} leading={tab.icon} count={tab.count}>
                 {tab.label}
-                {tab.badge}
-              </Button>
-            )
-          })}
-        </nav>
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
         {sectionAction ? (
           <Button
             type="button"

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

@@ -2,9 +2,8 @@
 
 import * as React from 'react'
 import { Activity, Building2, History, NotebookPen, Paperclip, Users } from 'lucide-react'
-import { cn } from '@open-mercato/shared/lib/utils'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
-import { Button } from '@open-mercato/ui/primitives/button'
+import { Tabs, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
 
 export type DealTabId =
   | 'activities'
@@ -19,7 +18,7 @@ type TabDef = {
   id: DealTabId
   label: string
   icon?: React.ReactNode
-  badge?: React.ReactNode
+  count?: React.ReactNode
 }
 
 type DealDetailTabsProps = {
@@ -38,21 +37,9 @@ export function resolveLegacyTab(tab: string | null | undefined): DealTabId {
   return SUPPORTED_TAB_IDS.has(tab as DealTabId) ? (tab as DealTabId) : 'activities'
 }
 
-function CountBadge({ count }: { count: number }) {
-  if (count <= 0) return null
-  return (
-    <span className="ml-1.5 rounded-sm bg-muted px-1.5 py-px text-xs font-semibold leading-none text-muted-foreground">
-      {count > 999 ? '999+' : count}
-    </span>
-  )
-}
-
-function NewBadge() {
-  return (
-    <span className="ml-1.5 rounded-sm bg-muted px-1.5 py-px text-xs font-semibold leading-none text-muted-foreground">
-      NEW
-    </span>
-  )
+function formatTabCount(count: number): string | number | undefined {
+  if (count <= 0) return undefined
+  return count > 999 ? '999+' : count
 }
 
 export function DealDetailTabs({
@@ -76,13 +63,13 @@ export function DealDetailTabs({
         id: 'people',
         label: t('customers.deals.detail.tabs.people', 'People'),
         icon: <Users className="size-4" />,
-        badge: <CountBadge count={peopleCount} />,
+        count: formatTabCount(peopleCount),
       },
       {
         id: 'companies',
         label: t('customers.deals.detail.tabs.companies', 'Companies'),
         icon: <Building2 className="size-4" />,
-        badge: <CountBadge count={companiesCount} />,
+        count: formatTabCount(companiesCount),
       },
       {
         id: 'notes',
@@ -98,7 +85,7 @@ export function DealDetailTabs({
         id: 'changelog',
         label: t('customers.deals.detail.tabs.changelog', 'Changelog'),
         icon: <History className="size-4" />,
-        badge: <NewBadge />,
+        count: 'NEW',
       },
     ],
     [companiesCount, peopleCount, t],
@@ -117,34 +104,22 @@ export function DealDetailTabs({
 
   return (
     <div>
-      <div className="border-b border-border" role="tablist" aria-label={t('customers.deals.detail.tabs.label', 'Deal detail sections')}>
-        <nav className="-mb-px flex gap-7 overflow-x-auto" role="presentation">
-          {allTabs.map((tab) => {
-            const isActive = activeTab === tab.id
-            return (
-              <Button
-                key={tab.id}
-                type="button"
-                variant="ghost"
-                size="sm"
-                role="tab"
-                aria-selected={isActive}
-                onClick={() => onTabChange(tab.id)}
-                className={cn(
-                  'h-auto shrink-0 rounded-none border-b-2 px-3 py-2.5 hover:bg-transparent',
-                  isActive
-                    ? 'border-foreground text-foreground font-semibold'
-                    : 'border-transparent text-muted-foreground hover:text-foreground',
-                )}
-              >
-                {tab.icon ? <span className="mr-1.5">{tab.icon}</span> : null}
-                {tab.label}
-                {tab.badge}
-              </Button>
-            )
-          })}
-        </nav>
-      </div>
+      <Tabs
+        value={activeTab}
+        onValueChange={(value) => onTabChange(value as DealTabId)}
+        variant="underline"
+      >
+        <TabsList
+          aria-label={t('customers.deals.detail.tabs.label', 'Deal detail sections')}
+          className="w-full overflow-x-auto"
+        >
+          {allTabs.map((tab) => (
+            <TabsTrigger key={tab.id} value={tab.id} leading={tab.icon} count={tab.count}>
+              {tab.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
 
       <div className="pt-5" role="tabpanel">
         {children}