@open-mercato/core 0.6.6-develop.6257.1.6d0af84d26 → 0.6.6-develop.6290.1.4bb5a8ba3f

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

@@ -485,37 +485,13 @@ export async function GET(_req: Request, ctx: { params?: { id?: string } }) {
       return forbidden('Access denied')
     }
 
-    profile = await findOneWithDecryption(em, CustomerPersonProfile, { entity: person }, { populate: ['company'] }, { tenantId: person.tenantId ?? auth.tenantId ?? null, organizationId: person.organizationId ?? auth.orgId ?? null })
+    const [profileResult, personCompanyLinks] = await Promise.all([
+      findOneWithDecryption(em, CustomerPersonProfile, { entity: person }, { populate: ['company'] }, { tenantId: person.tenantId ?? auth.tenantId ?? null, organizationId: person.organizationId ?? auth.orgId ?? null }),
+      loadPersonCompanyLinks(em, person),
+    ])
+    profile = profileResult
     profiler.mark('profile_loaded', { found: !!profile })
-    companies = summarizePersonCompanies(profile, await loadPersonCompanyLinks(em, person))
-
-    if (includeAddresses) {
-      addresses = await findWithDecryption(em, CustomerAddress, { entity: person.id }, { orderBy: { isPrimary: 'desc', createdAt: 'desc' } }, { tenantId: person.tenantId ?? auth.tenantId ?? null, organizationId: person.organizationId ?? auth.orgId ?? null })
-      profiler.mark('addresses_loaded', { count: addresses.length })
-    }
-
-    tagAssignments = await findWithDecryption(
-      em,
-      CustomerTagAssignment,
-      { entity: person.id },
-      { populate: ['tag'] },
-      { tenantId: person.tenantId ?? auth.tenantId ?? null, organizationId: person.organizationId ?? auth.orgId ?? null },
-    )
-    profiler.mark('tags_loaded', { count: tagAssignments.length })
-
-    const labelAssignments = await findWithDecryption(
-      em,
-      CustomerLabelAssignment,
-      { entity: person.id },
-      { populate: ['label'] },
-      { tenantId: person.tenantId ?? auth.tenantId ?? null, organizationId: person.organizationId ?? auth.orgId ?? null },
-    )
-    profiler.mark('labels_loaded', { count: labelAssignments.length })
-
-    if (includeComments) {
-      comments = await findWithDecryption(em, CustomerComment, { entity: person.id }, { orderBy: { createdAt: 'desc' }, limit: 50 }, { tenantId: person.tenantId ?? auth.tenantId ?? null, organizationId: person.organizationId ?? auth.orgId ?? null })
-      profiler.mark('comments_loaded', { count: comments.length })
-    }
+    companies = summarizePersonCompanies(profile, personCompanyLinks)
 
     // Per-user email privacy (CRM email integration spec, "Layer 1 — DB filter"):
     // exclude private email interactions owned by other users from every read
@@ -528,18 +504,46 @@ export async function GET(_req: Request, ctx: { params?: { id?: string } }) {
       userFeatures: undefined,
     })
 
+    const personScope = { tenantId: person.tenantId ?? auth.tenantId ?? null, organizationId: person.organizationId ?? auth.orgId ?? null }
     const shouldLoadCanonicalInteractions = includeInteractions || includeActivities || includeTodos
-    const canonicalInteractionRows = shouldLoadCanonicalInteractions
-      ? await findWithDecryption(
-          em,
-          CustomerInteraction,
-          interactionFlags.unified
-            ? { entity: person.id, deletedAt: null, ...emailVisibilityFilter }
-            : { entity: person.id, ...emailVisibilityFilter },
-          { orderBy: { scheduledAt: 'asc', createdAt: 'desc' }, limit: 100 },
-          { tenantId: person.tenantId ?? auth.tenantId ?? null, organizationId: person.organizationId ?? auth.orgId ?? null },
-        )
-      : []
+
+    // These reads only depend on the resolved person + scope + email visibility
+    // filter, so dispatch them together to avoid a server-side request waterfall
+    // before the detail surface can render (issue #3203).
+    const [
+      addressesResult,
+      tagAssignmentsResult,
+      labelAssignments,
+      commentsResult,
+      canonicalInteractionRows,
+    ] = await Promise.all([
+      includeAddresses
+        ? findWithDecryption(em, CustomerAddress, { entity: person.id }, { orderBy: { isPrimary: 'desc', createdAt: 'desc' } }, personScope)
+        : Promise.resolve<CustomerAddress[]>([]),
+      findWithDecryption(em, CustomerTagAssignment, { entity: person.id }, { populate: ['tag'] }, personScope),
+      findWithDecryption(em, CustomerLabelAssignment, { entity: person.id }, { populate: ['label'] }, personScope),
+      includeComments
+        ? findWithDecryption(em, CustomerComment, { entity: person.id }, { orderBy: { createdAt: 'desc' }, limit: 50 }, personScope)
+        : Promise.resolve<CustomerComment[]>([]),
+      shouldLoadCanonicalInteractions
+        ? findWithDecryption(
+            em,
+            CustomerInteraction,
+            interactionFlags.unified
+              ? { entity: person.id, deletedAt: null, ...emailVisibilityFilter }
+              : { entity: person.id, ...emailVisibilityFilter },
+            { orderBy: { scheduledAt: 'asc', createdAt: 'desc' }, limit: 100 },
+            personScope,
+          )
+        : Promise.resolve<CustomerInteraction[]>([]),
+    ])
+    addresses = addressesResult
+    tagAssignments = tagAssignmentsResult
+    comments = commentsResult
+    profiler.mark('addresses_loaded', { count: addresses.length })
+    profiler.mark('tags_loaded', { count: tagAssignments.length })
+    profiler.mark('labels_loaded', { count: labelAssignments.length })
+    profiler.mark('comments_loaded', { count: comments.length })
     profiler.mark('canonical_interactions_loaded', { count: canonicalInteractionRows.length })
     const canonicalActiveInteractions = canonicalInteractionRows.filter((interaction) => !interaction.deletedAt)
     const canonicalInteractions = shouldLoadCanonicalInteractions
@@ -676,35 +680,39 @@ export async function GET(_req: Request, ctx: { params?: { id?: string } }) {
       profiler.mark('deals_loaded', { count: deals.length })
     }
 
-    const entityCustomFieldValues = await loadCustomFieldValues({
-      em,
-      entityId: E.customers.customer_entity,
-      recordIds: [person.id],
-      tenantIdByRecord: { [person.id]: person.tenantId ?? null },
-      organizationIdByRecord: { [person.id]: person.organizationId ?? null },
-      tenantFallbacks: [
-        person.tenantId ?? auth.tenantId ?? null,
-      ].filter((v): v is string => !!v),
-    })
-    profiler.mark('entity_custom_fields_loaded', { keys: Object.keys(entityCustomFieldValues?.[person.id] ?? {}).length })
-
-    let profileCustomFieldValues: Record<string, Record<string, unknown>> = {}
+    // Entity custom fields, profile custom fields, and the routing lookup do not
+    // depend on each other (profileId is already resolved above), so load them in
+    // parallel instead of three sequential awaits (issue #3203).
     const profileId = profile?.id ?? null
-    if (profileId) {
-      profileCustomFieldValues = await loadCustomFieldValues({
+    const [entityCustomFieldValues, profileCustomFieldValues, routing] = await Promise.all([
+      loadCustomFieldValues({
         em,
-        entityId: E.customers.customer_person_profile,
-        recordIds: [profileId],
-        tenantIdByRecord: { [profileId]: profile?.tenantId ?? null },
-        organizationIdByRecord: { [profileId]: profile?.organizationId ?? null },
+        entityId: E.customers.customer_entity,
+        recordIds: [person.id],
+        tenantIdByRecord: { [person.id]: person.tenantId ?? null },
+        organizationIdByRecord: { [person.id]: person.organizationId ?? null },
         tenantFallbacks: [
-          profile?.tenantId ?? person.tenantId ?? auth.tenantId ?? null,
+          person.tenantId ?? auth.tenantId ?? null,
         ].filter((v): v is string => !!v),
-      })
+      }),
+      profileId
+        ? loadCustomFieldValues({
+            em,
+            entityId: E.customers.customer_person_profile,
+            recordIds: [profileId],
+            tenantIdByRecord: { [profileId]: profile?.tenantId ?? null },
+            organizationIdByRecord: { [profileId]: profile?.organizationId ?? null },
+            tenantFallbacks: [
+              profile?.tenantId ?? person.tenantId ?? auth.tenantId ?? null,
+            ].filter((v): v is string => !!v),
+          })
+        : Promise.resolve<Record<string, Record<string, unknown>>>({}),
+      resolvePersonCustomFieldRouting(em, person.tenantId ?? null, person.organizationId ?? null),
+    ])
+    profiler.mark('entity_custom_fields_loaded', { keys: Object.keys(entityCustomFieldValues?.[person.id] ?? {}).length })
+    if (profileId) {
       profiler.mark('profile_custom_fields_loaded', { keys: Object.keys(profileCustomFieldValues?.[profileId] ?? {}).length })
     }
-
-    const routing = await resolvePersonCustomFieldRouting(em, person.tenantId ?? null, person.organizationId ?? null)
     profiler.mark('custom_field_routing_resolved', { keys: routing.size })
     customFields = normalizeCustomerDetailCustomFields(
       mergePersonCustomFieldValues(
@@ -716,16 +724,25 @@ export async function GET(_req: Request, ctx: { params?: { id?: string } }) {
     profiler.mark('custom_fields_merged', { keys: Object.keys(customFields).length })
 
     const viewerUserIdFinal = viewerUserId
-    const counts = {
-      tags: tagAssignments.length + labelAssignments.length,
-      comments: includeComments
-        ? comments.length
-        : await em.count(CustomerComment, {
+    // The count fields are independent of each other; dispatch them together so
+    // the response counts object is assembled in one round of parallel queries
+    // instead of an inline await waterfall (issue #3203).
+    const [
+      commentsCount,
+      activitiesCount,
+      interactionsCount,
+      todosCount,
+      addressesCount,
+      dealsCount,
+    ] = await Promise.all([
+      includeComments
+        ? Promise.resolve(comments.length)
+        : em.count(CustomerComment, {
             entity: person.id,
             organizationId: person.organizationId,
             tenantId: person.tenantId,
           }),
-      activities: await em.count(CustomerInteraction, {
+      em.count(CustomerInteraction, {
         entity: person.id,
         organizationId: person.organizationId,
         tenantId: person.tenantId,
@@ -733,38 +750,47 @@ export async function GET(_req: Request, ctx: { params?: { id?: string } }) {
         interactionType: { $ne: 'task' },
         ...emailVisibilityFilter,
       }),
-      interactions: await em.count(CustomerInteraction, {
+      em.count(CustomerInteraction, {
         entity: person.id,
         organizationId: person.organizationId,
         tenantId: person.tenantId,
         deletedAt: null,
         ...emailVisibilityFilter,
       }),
-      todos: interactionFlags.unified
-        ? await em.count(CustomerInteraction, {
+      interactionFlags.unified
+        ? em.count(CustomerInteraction, {
             entity: person.id,
             organizationId: person.organizationId,
             tenantId: person.tenantId,
             deletedAt: null,
             interactionType: 'task',
           })
-        : await em.count(CustomerTodoLink, {
+        : em.count(CustomerTodoLink, {
             entity: person.id,
             organizationId: person.organizationId,
             tenantId: person.tenantId,
           }),
-      addresses: includeAddresses
-        ? addresses.length
-        : await em.count(CustomerAddress, {
+      includeAddresses
+        ? Promise.resolve(addresses.length)
+        : em.count(CustomerAddress, {
             entity: person.id,
             organizationId: person.organizationId,
             tenantId: person.tenantId,
           }),
-      deals: includeDeals
-        ? deals.length
-        : await em.count(CustomerDealPersonLink, {
+      includeDeals
+        ? Promise.resolve(deals.length)
+        : em.count(CustomerDealPersonLink, {
             person: person.id,
           }),
+    ])
+    const counts = {
+      tags: tagAssignments.length + labelAssignments.length,
+      comments: commentsCount,
+      activities: activitiesCount,
+      interactions: interactionsCount,
+      todos: todosCount,
+      addresses: addressesCount,
+      deals: dealsCount,
       companies: companies.length,
     }
 

package/src/modules/customers/backend/config/customers/pipeline-stages/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import * as React from 'react'
+import { ChevronDown, ChevronUp } from 'lucide-react'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { apiCall, withScopedApiRequestHeaders } from '@open-mercato/ui/backend/utils/apiCall'
@@ -8,6 +9,8 @@ import { buildOptimisticLockHeader } from '@open-mercato/ui/backend/utils/optimi
 import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
 import { Input } from '@open-mercato/ui/primitives/input'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@open-mercato/ui/primitives/dialog'
 import {
@@ -516,24 +519,28 @@ export default function PipelineStagesPage() {
                       {stages.map((stage, index) => (
                         <div key={stage.id} className="flex items-center gap-3 px-4 py-3">
                           <div className="flex flex-col gap-1">
-                            <button
+                            <IconButton
                               type="button"
-                              className="text-muted-foreground hover:text-foreground disabled:opacity-50"
+                              variant="ghost"
+                              size="xs"
+                              className="text-muted-foreground hover:text-foreground"
                               onClick={() => moveStage(index, 'up')}
                               disabled={index === 0}
                               aria-label={t('customers.config.pipelineStages.moveUp', 'Move up')}
                             >
-                              ↑
-                            </button>
-                            <button
+                              <ChevronUp className="size-4" />
+                            </IconButton>
+                            <IconButton
                               type="button"
-                              className="text-muted-foreground hover:text-foreground disabled:opacity-50"
+                              variant="ghost"
+                              size="xs"
+                              className="text-muted-foreground hover:text-foreground"
                               onClick={() => moveStage(index, 'down')}
                               disabled={index === stages.length - 1}
                               aria-label={t('customers.config.pipelineStages.moveDown', 'Move down')}
                             >
-                              ↓
-                            </button>
+                              <ChevronDown className="size-4" />
+                            </IconButton>
                           </div>
                           <span className="flex-1 text-sm flex items-center gap-2">
                             {stage.color ? renderDictionaryColor(stage.color) : null}
@@ -583,11 +590,11 @@ export default function PipelineStagesPage() {
                   autoFocus
                 />
               </div>
-              <label className="flex items-center gap-2 text-sm cursor-pointer">
-                <input
-                  type="checkbox"
+              <label htmlFor="pipeline-is-default" className="flex items-center gap-2 text-sm cursor-pointer">
+                <Checkbox
+                  id="pipeline-is-default"
                   checked={pipelineIsDefault}
-                  onChange={(e) => setPipelineIsDefault(e.target.checked)}
+                  onCheckedChange={(checked) => setPipelineIsDefault(checked === true)}
                 />
                 {t('customers.config.pipelineStages.setAsDefault', 'Set as default pipeline')}
               </label>

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

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import { Check, Phone, Mail, Users, CheckSquare } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
 import { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
 
 export type ActivityKind = 'meeting' | 'call' | 'task' | 'email'
@@ -34,28 +35,29 @@ export function ActivitiesAddNewMenu({ onSelect, disabled }: ActivitiesAddNewMen
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <button
+        <Button
           type="button"
           disabled={disabled}
           aria-label={t('customers.activities.addNew', 'Add new')}
-          className="inline-flex items-center gap-1.5 overflow-hidden rounded-md bg-foreground pl-3 pr-3.5 py-2 text-xs font-semibold text-background transition-colors hover:bg-foreground/90 disabled:opacity-60"
+          className="gap-1.5 overflow-hidden rounded-md bg-foreground pl-3 pr-3.5 py-2 text-xs font-semibold text-background hover:bg-foreground/90 disabled:opacity-60"
         >
           <Check className="size-3.5" />
           {t('customers.activities.addNew', 'Add new')}
-        </button>
+        </Button>
       </PopoverTrigger>
       <PopoverContent align="end" className="w-[180px] p-1">
         <ul className="flex flex-col">
           {MENU_ITEMS.map(({ kind, icon: Icon, key, fallback }) => (
             <li key={kind}>
-              <button
+              <Button
                 type="button"
+                variant="ghost"
                 onClick={() => handleSelect(kind)}
-                className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-foreground hover:bg-accent/40"
+                className="h-auto w-full justify-start gap-2 rounded-md px-2 py-1.5 text-sm font-normal text-foreground hover:bg-accent/40"
               >
                 <Icon className="size-4 text-muted-foreground" />
                 {t(key, fallback)}
-              </button>
+              </Button>
             </li>
           ))}
         </ul>

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

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { AiIcon } from '@open-mercato/ui/ai/AiIcon'
+import { Button } from '@open-mercato/ui/primitives/button'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@open-mercato/ui/primitives/tooltip'
 import { AI_TIMELINE_ACTIONS_BY_TYPE, resolveAiActions } from './aiActionCatalog'
 
@@ -23,13 +24,15 @@ export function AiActionChips({ activityType }: AiActionChipsProps) {
         {actions.map((action) => (
           <Tooltip key={action.key}>
             <TooltipTrigger asChild>
-              <button
+              <Button
                 type="button"
-                className="inline-flex items-center gap-1 rounded-[4px] border border-dashed border-border bg-card pl-1.5 pr-[7px] py-[3px] text-[9px] font-medium text-muted-foreground/70 transition-colors hover:border-muted-foreground hover:text-foreground"
+                variant="outline"
+                size="sm"
+                className="h-auto gap-1 rounded-[4px] border-dashed bg-card pl-1.5 pr-[7px] py-[3px] text-[9px] font-medium text-muted-foreground/70 shadow-none hover:border-muted-foreground hover:text-foreground"
               >
                 <AiIcon className="size-2.5 shrink-0" />
                 {t(action.i18nKey, action.fallback)}
-              </button>
+              </Button>
             </TooltipTrigger>
             <TooltipContent side="bottom" className="text-xs">
               {t('customers.ai.comingSoon', 'Coming soon')}

package/src/modules/customers/components/detail/schedule/ParticipantsField.tsx

@@ -1,12 +1,14 @@
 'use client'
 
 import * as React from 'react'
-import { Users, Search, X, Clock, CheckCircle2, XCircle } from 'lucide-react'
+import { Users, X, Clock, CheckCircle2, XCircle } 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 { Checkbox } from '@open-mercato/ui/primitives/checkbox'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
 import { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
+import { SearchInput } from '@open-mercato/ui/primitives/search-input'
 import { fetchAssignableStaffMembersPage } from '../assignableStaff'
 import type { ActivityType, ScheduleFieldId } from './fieldConfig'
 import { isVisible, getFieldLabel } from './fieldConfig'
@@ -84,17 +86,13 @@ function ParticipantSearchPopover({
         </Button>
       </PopoverTrigger>
       <PopoverContent align="start" className="w-72 p-2">
-        <div className="flex items-center gap-2 rounded-md border bg-background px-2 py-1.5 mb-2">
-          <Search className="size-3.5 text-muted-foreground shrink-0" />
-          <input
-            type="text"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            placeholder={t('customers.schedule.searchParticipant', 'Search team members...')}
-            className="flex-1 bg-transparent text-sm focus:outline-none"
-            autoFocus
-          />
-        </div>
+        <SearchInput
+          value={query}
+          onChange={setQuery}
+          placeholder={t('customers.schedule.searchParticipant', 'Search team members...')}
+          className="mb-2"
+          autoFocus
+        />
         {selectableResults.length ? (
           <div className="mb-2">
             <Button
@@ -228,16 +226,16 @@ export function ParticipantsField({
       {participants.length > 0 && (
         <div className="mt-3 flex flex-wrap items-center gap-x-[16px] gap-y-[6px] text-xs">
           <span className="font-medium text-muted-foreground">{t('customers.schedule.guestPermissions', 'Guest permissions:')}</span>
-          <label className="flex items-center gap-1.5 cursor-pointer">
-            <input type="checkbox" checked={guestPermissions.canInviteOthers} onChange={(e) => setGuestPermissions((p) => ({ ...p, canInviteOthers: e.target.checked }))} className="rounded" />
+          <label htmlFor="guest-perm-invite" className="flex items-center gap-1.5 cursor-pointer">
+            <Checkbox id="guest-perm-invite" checked={guestPermissions.canInviteOthers} onCheckedChange={(checked) => setGuestPermissions((p) => ({ ...p, canInviteOthers: checked === true }))} />
             {t('customers.schedule.guestPerm.invite', 'Invite others')}
           </label>
-          <label className="flex items-center gap-1.5 cursor-pointer">
-            <input type="checkbox" checked={guestPermissions.canModify} onChange={(e) => setGuestPermissions((p) => ({ ...p, canModify: e.target.checked }))} className="rounded" />
+          <label htmlFor="guest-perm-modify" className="flex items-center gap-1.5 cursor-pointer">
+            <Checkbox id="guest-perm-modify" checked={guestPermissions.canModify} onCheckedChange={(checked) => setGuestPermissions((p) => ({ ...p, canModify: checked === true }))} />
             {t('customers.schedule.guestPerm.modify', 'Modify')}
           </label>
-          <label className="flex items-center gap-1.5 cursor-pointer">
-            <input type="checkbox" checked={guestPermissions.canSeeList} onChange={(e) => setGuestPermissions((p) => ({ ...p, canSeeList: e.target.checked }))} className="rounded" />
+          <label htmlFor="guest-perm-see-list" className="flex items-center gap-1.5 cursor-pointer">
+            <Checkbox id="guest-perm-see-list" checked={guestPermissions.canSeeList} onCheckedChange={(checked) => setGuestPermissions((p) => ({ ...p, canSeeList: checked === true }))} />
             {t('customers.schedule.guestPerm.seeList', 'See list')}
           </label>
         </div>

package/src/modules/data_sync/api/runs/[id]/cancel.ts

@@ -79,7 +79,7 @@ export async function POST(req: Request, ctx: { params?: Promise<{ id?: string }
     } catch (error) {
       const job = await progressService.getJob(run.progressJobId, progressCtx)
       const cancelRequested = job && (job.status === 'running' || job.status === 'cancelled')
-        ? await progressService.isCancellationRequested(run.progressJobId, progressCtx.tenantId)
+        ? await progressService.isCancellationRequested(run.progressJobId, progressCtx.tenantId, progressCtx.organizationId)
         : false
 
       if (job?.status !== 'cancelled' && !cancelRequested) {

package/src/modules/data_sync/backend/data-sync/page.tsx

@@ -7,7 +7,8 @@ import { DataTable } from '@open-mercato/ui/backend/DataTable'
 import type { ColumnDef } from '@tanstack/react-table'
 import type { FilterDef, FilterValues } from '@open-mercato/ui/backend/FilterBar'
 import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
-import { Badge, type BadgeProps } from '@open-mercato/ui/primitives/badge'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
 import { Card, CardContent, CardHeader, CardTitle } from '@open-mercato/ui/primitives/card'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
@@ -40,6 +41,7 @@ import {
   Settings2,
   ShieldCheck,
 } from 'lucide-react'
+import { getSyncRunStatusVariant, getSyncSummaryVariant } from '../../lib/syncRunStatus'
 
 type SyncRunRow = {
   id: string
@@ -107,57 +109,8 @@ type SyncScheduleEditorState = {
   updatedAt?: string | null
 }
 
-const STATUS_STYLES: Record<string, string> = {
-  pending: 'bg-gray-100 text-gray-800',
-  running: 'bg-blue-100 text-blue-800',
-  completed: 'bg-green-100 text-green-800',
-  failed: 'bg-red-100 text-red-800',
-  cancelled: 'bg-yellow-100 text-yellow-800',
-  paused: 'bg-orange-100 text-orange-800',
-}
-
 const DEFAULT_TIMEZONE = Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC'
 
-type SummaryBadgeStyle = {
-  variant: BadgeProps['variant']
-  className?: string
-}
-
-function getSummaryBadgeStyle(kind: 'enabled' | 'disabled' | 'ready' | 'missing' | 'scheduled' | 'paused' | 'none'): SummaryBadgeStyle {
-  if (kind === 'enabled' || kind === 'ready') {
-    return {
-      variant: 'outline',
-      className: 'border-emerald-500/30 bg-emerald-500/15 text-emerald-200',
-    }
-  }
-
-  if (kind === 'disabled' || kind === 'missing') {
-    return {
-      variant: 'outline',
-      className: 'border-red-500/30 bg-red-500/15 text-red-200',
-    }
-  }
-
-  if (kind === 'paused') {
-    return {
-      variant: 'outline',
-      className: 'border-amber-500/30 bg-amber-500/15 text-amber-200',
-    }
-  }
-
-  if (kind === 'scheduled') {
-    return {
-      variant: 'outline',
-      className: 'border-sky-500/30 bg-sky-500/15 text-sky-200',
-    }
-  }
-
-  return {
-    variant: 'outline',
-    className: 'border-muted-foreground/20 bg-muted/50 text-muted-foreground',
-  }
-}
-
 function formatEntityTypeLabel(entityType: string): string {
   return entityType
     .replace(/[_-]+/g, ' ')
@@ -589,9 +542,9 @@ export default function SyncRunsDashboardPage() {
       accessorKey: 'status',
       header: t('data_sync.dashboard.columns.status'),
       cell: ({ row }) => (
-        <Badge variant="secondary" className={STATUS_STYLES[row.original.status] ?? ''}>
+        <StatusBadge variant={getSyncRunStatusVariant(row.original.status)}>
           {t(`data_sync.dashboard.status.${row.original.status}`)}
-        </Badge>
+        </StatusBadge>
       ),
     },
     {
@@ -622,9 +575,9 @@ export default function SyncRunsDashboardPage() {
   )
   const hasSavedSchedule = Boolean(scheduleEditor.id)
   const selectedEntityLabel = selectedEntityType ? formatEntityTypeLabel(selectedEntityType) : t('data_sync.dashboard.columns.entityType')
-  const integrationStateBadge = getSummaryBadgeStyle(selectedIntegration?.isEnabled ? 'enabled' : 'disabled')
-  const credentialsBadge = getSummaryBadgeStyle(selectedIntegration?.hasCredentials ? 'ready' : 'missing')
-  const scheduleBadge = getSummaryBadgeStyle(
+  const integrationStateVariant = getSyncSummaryVariant(selectedIntegration?.isEnabled ? 'enabled' : 'disabled')
+  const credentialsVariant = getSyncSummaryVariant(selectedIntegration?.hasCredentials ? 'ready' : 'missing')
+  const scheduleVariant = getSyncSummaryVariant(
     hasSavedSchedule
       ? (scheduleEditor.isEnabled ? 'scheduled' : 'paused')
       : 'none',
@@ -668,19 +621,19 @@ export default function SyncRunsDashboardPage() {
                   <ArrowRightLeft className="size-3.5" />
                   {t(`data_sync.dashboard.direction.${selectedDirection}`)}
                 </Badge>
-                <Badge variant={integrationStateBadge.variant} className={`gap-1.5 ${integrationStateBadge.className ?? ''}`}>
+                <Badge variant={integrationStateVariant} className="gap-1.5">
                   <ShieldCheck className="size-3.5" />
                   {selectedIntegration.isEnabled
                     ? t('data_sync.dashboard.start.status.enabled', 'Integration enabled')
                     : t('data_sync.dashboard.start.status.disabled', 'Integration disabled')}
                 </Badge>
-                <Badge variant={credentialsBadge.variant} className={`gap-1.5 ${credentialsBadge.className ?? ''}`}>
+                <Badge variant={credentialsVariant} className="gap-1.5">
                   <PlugZap className="size-3.5" />
                   {selectedIntegration.hasCredentials
                     ? t('data_sync.dashboard.start.status.credentialsReady', 'Credentials ready')
                     : t('data_sync.dashboard.start.status.credentialsMissing', 'Credentials missing')}
                 </Badge>
-                <Badge variant={scheduleBadge.variant} className={`gap-1.5 ${scheduleBadge.className ?? ''}`}>
+                <Badge variant={scheduleVariant} className="gap-1.5">
                   <CalendarClock className="size-3.5" />
                   {hasSavedSchedule
                     ? (scheduleEditor.isEnabled