@open-mercato/core 0.6.1-develop.3256.1.fe3dec2464 → 0.6.1-develop.3276.1.1fcd145078

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

@@ -172,6 +172,7 @@
   "auth.users.form.errors.notFound": "User not found",
   "auth.users.form.errors.widgetsAssign": "Failed to assign dashboard widgets to the new user",
   "auth.users.form.field.email": "Email",
+  "auth.users.form.field.name": "Display name",
   "auth.users.form.field.newPassword": "New Password",
   "auth.users.form.field.organization": "Organization",
   "auth.users.form.field.password": "Password",
@@ -190,8 +191,11 @@
   "auth.users.form.loading": "Loading user data...",
   "auth.users.form.title.create": "Create User",
   "auth.users.form.title.edit": "Edit User",
+  "auth.users.list.columns.name": "Display name",
   "auth.users.list.error.delete": "Failed to delete user",
   "auth.users.list.error.load": "Failed to load users",
+  "auth.users.list.filters.name": "Display name",
+  "auth.users.list.filters.namePlaceholder": "Filter by display name",
   "auth.users.widgets.errors.load": "Unable to load dashboard widgets. You can configure them later from the user page.",
   "auth.users.widgets.loading": "Loading widgets…",
   "auth.users.widgets.mode.hint": "New users inherit widgets from their assigned roles. Override to pick a custom set.",

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

@@ -172,6 +172,7 @@
   "auth.users.form.errors.notFound": "Usuario no encontrado",
   "auth.users.form.errors.widgetsAssign": "No se pudieron asignar los widgets del panel al nuevo usuario",
   "auth.users.form.field.email": "Correo electrónico",
+  "auth.users.form.field.name": "Nombre visible",
   "auth.users.form.field.newPassword": "Nueva contraseña",
   "auth.users.form.field.organization": "Organización",
   "auth.users.form.field.password": "Contraseña",
@@ -190,8 +191,11 @@
   "auth.users.form.loading": "Cargando datos del usuario...",
   "auth.users.form.title.create": "Crear usuario",
   "auth.users.form.title.edit": "Editar usuario",
+  "auth.users.list.columns.name": "Nombre visible",
   "auth.users.list.error.delete": "No se pudo eliminar el usuario",
   "auth.users.list.error.load": "No se pudieron cargar los usuarios",
+  "auth.users.list.filters.name": "Nombre visible",
+  "auth.users.list.filters.namePlaceholder": "Filtrar por nombre visible",
   "auth.users.widgets.errors.load": "No se pudieron cargar los widgets del panel. Puedes configurarlos más tarde desde la página del usuario.",
   "auth.users.widgets.loading": "Cargando widgets…",
   "auth.users.widgets.mode.hint": "Los nuevos usuarios heredan los widgets de las funciones asignadas. Sobrescribe para elegir un conjunto personalizado.",

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

@@ -172,6 +172,7 @@
   "auth.users.form.errors.notFound": "Nie znaleziono użytkownika",
   "auth.users.form.errors.widgetsAssign": "Nie udało się przypisać widżetów pulpitu do nowego użytkownika",
   "auth.users.form.field.email": "Email",
+  "auth.users.form.field.name": "Nazwa wyświetlana",
   "auth.users.form.field.newPassword": "Nowe hasło",
   "auth.users.form.field.organization": "Organizacja",
   "auth.users.form.field.password": "Hasło",
@@ -190,8 +191,11 @@
   "auth.users.form.loading": "Ładowanie danych użytkownika...",
   "auth.users.form.title.create": "Utwórz użytkownika",
   "auth.users.form.title.edit": "Edytuj użytkownika",
+  "auth.users.list.columns.name": "Nazwa wyświetlana",
   "auth.users.list.error.delete": "Nie udało się usunąć użytkownika",
   "auth.users.list.error.load": "Nie udało się wczytać użytkowników",
+  "auth.users.list.filters.name": "Nazwa wyświetlana",
+  "auth.users.list.filters.namePlaceholder": "Filtruj po nazwie wyświetlanej",
   "auth.users.widgets.errors.load": "Nie udało się załadować widżetów pulpitu. Możesz skonfigurować je później na stronie użytkownika.",
   "auth.users.widgets.loading": "Ładowanie widżetów…",
   "auth.users.widgets.mode.hint": "Nowi użytkownicy dziedziczą widżety z przypisanych ról. Zastąp wybór, aby wskazać własny zestaw.",

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

@@ -438,7 +438,7 @@ export default function CompanyDetailV2Page({ params }: { params?: { id?: string
                   onSubmit={handleFormSubmit}
                   onDelete={handleDelete}
                   hideFooterActions
-                  collapsibleGroups={{ pageType: 'company-v2', chevronPosition: 'left' }}
+                  collapsibleGroups={{ pageType: 'company-v2', chevronPosition: 'right' }}
                   sortableGroups={{ pageType: 'company-v2' }}
                   onDirtyChange={setIsDirty}
                 />

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

@@ -2,7 +2,8 @@
 
 import * as React from 'react'
 import Link from 'next/link'
-import { Building2, Users } from 'lucide-react'
+import { Building2, UserSearch, Users } from 'lucide-react'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
 import { Button } from '@open-mercato/ui/primitives/button'
@@ -337,7 +338,7 @@ export default function DealDetailPage({ params }: { params?: { id?: string } })
         showVersionHistory={false}
         showCancelAction={false}
         onDirtyChange={setIsDirty}
-        collapsibleGroups={{ pageType: 'deal-detail-v3', chevronPosition: 'left' }}
+        collapsibleGroups={{ pageType: 'deal-detail-v3', chevronPosition: 'right' }}
         sortableGroups={{ pageType: 'deal-detail-v3' }}
         initialValues={{
           ...data.deal,
@@ -424,17 +425,15 @@ export default function DealDetailPage({ params }: { params?: { id?: string } })
                   onScheduleRequested={openSchedule}
                 />
               ) : (
-                <div className="rounded-[10px] border border-dashed border-border bg-muted/10 px-5 py-5">
-                  <div className="text-sm font-semibold text-foreground">
-                    {t('customers.deals.detail.activities.selectEntityRequiredTitle', 'Choose a person or company to continue')}
-                  </div>
-                  <div className="mt-1 text-sm text-muted-foreground">
-                    {t(
-                      'customers.deals.detail.activities.selectEntityRequiredDescription',
-                      'Select the customer record that should receive new deal activities before logging or scheduling anything.',
-                    )}
-                  </div>
-                </div>
+                <EmptyState
+                  size="sm"
+                  icon={<UserSearch className="h-8 w-8" aria-hidden="true" />}
+                  title={t('customers.deals.detail.activities.selectEntityRequiredTitle', 'Choose a person or company to continue')}
+                  description={t(
+                    'customers.deals.detail.activities.selectEntityRequiredDescription',
+                    'Select the customer record that should receive new deal activities before logging or scheduling anything.',
+                  )}
+                />
               )}
               <PlannedActivitiesSection
                 activities={plannedActivities}

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

@@ -11,8 +11,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@open-mercato/ui/primitives/select'
+import { Layers, MoveRight, Workflow } from 'lucide-react'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { ErrorNotice } from '@open-mercato/ui/primitives/ErrorNotice'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
 import { apiCallOrThrow, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -528,11 +530,11 @@ export default function SalesPipelinePage(): React.ReactElement {
           </div>
 
           {!selectedPipelineId ? (
-            <div className="flex h-[50vh] items-center justify-center">
-              <span className="text-sm text-muted-foreground">
-                {translate('customers.deals.pipeline.noPipeline', 'No pipeline selected. Create a pipeline in settings.')}
-              </span>
-            </div>
+            <EmptyState
+              icon={<Workflow className="h-8 w-8" aria-hidden="true" />}
+              title={translate('customers.deals.pipeline.noPipeline', 'No pipeline selected. Create a pipeline in settings.')}
+              className="h-[50vh] w-full"
+            />
           ) : dealsQuery.isLoading ? (
             <div className="flex h-[50vh] items-center justify-center">
               <Spinner />
@@ -561,11 +563,11 @@ export default function SalesPipelinePage(): React.ReactElement {
 
               <div className="flex flex-col gap-4 pb-6 md:flex-row md:overflow-x-auto">
                 {stages.length === 0 ? (
-                  <div className="flex h-[50vh] w-full items-center justify-center rounded-lg border border-dashed border-border bg-muted/30">
-                    <span className="text-sm text-muted-foreground">
-                      {translate('customers.deals.pipeline.noStages', 'Define pipeline stages to start tracking deals.')}
-                    </span>
-                  </div>
+                  <EmptyState
+                    icon={<Layers className="h-8 w-8" aria-hidden="true" />}
+                    title={translate('customers.deals.pipeline.noStages', 'Define pipeline stages to start tracking deals.')}
+                    className="h-[50vh] w-full"
+                  />
                 ) : (
                   stages.map((stage) => {
                     const stageKey = stage.value ?? null
@@ -584,9 +586,11 @@ export default function SalesPipelinePage(): React.ReactElement {
                         {renderLaneHeader(stage, laneDeals.length)}
                         <div className="flex flex-1 flex-col gap-3 overflow-y-auto px-4 py-3">
                           {sortedLaneDeals.length === 0 ? (
-                            <div className="rounded-md border border-dashed border-border bg-muted/30 p-4 text-center text-xs text-muted-foreground">
-                              {translate('customers.deals.pipeline.emptyLane', 'No deals in this stage yet.')}
-                            </div>
+                            <EmptyState
+                              size="sm"
+                              icon={<MoveRight className="h-6 w-6" aria-hidden="true" />}
+                              title={translate('customers.deals.pipeline.emptyLane', 'No deals in this stage yet.')}
+                            />
                           ) : (
                             sortedLaneDeals.map((deal) => {
                               const isDragging = draggingId === deal.id

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

@@ -446,7 +446,7 @@ export default function PersonDetailV2Page({ params }: { params?: { id?: string
                   onSubmit={handleFormSubmit}
                   onDelete={handleFormDelete}
                   hideFooterActions
-                  collapsibleGroups={{ pageType: 'person-v2', chevronPosition: 'left' }}
+                  collapsibleGroups={{ pageType: 'person-v2', chevronPosition: 'right' }}
                   sortableGroups={{ pageType: 'person-v2' }}
                   onDirtyChange={setIsDirty}
                 />

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

@@ -19,6 +19,12 @@ import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/u
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@open-mercato/ui/primitives/accordion'
 import {
   AppearanceSelector,
   type AppearanceSelectorLabels,
@@ -207,10 +213,6 @@ export default function PipelineSettings(): React.ReactElement {
     await loadPipelines()
   }, [confirm, expandedPipelineId, loadPipelines, t])
 
-  const toggleExpand = React.useCallback((pipelineId: string) => {
-    setExpandedPipelineId((prev) => (prev === pipelineId ? null : pipelineId))
-  }, [])
-
   const openCreateStage = React.useCallback((pipelineId: string) => {
     setStageForm({ label: '', color: null, icon: null })
     setStageDialog({ mode: 'create', pipelineId })
@@ -359,35 +361,107 @@ export default function PipelineSettings(): React.ReactElement {
           {t('customers.pipelines.empty', 'No pipelines yet. Create one to get started.')}
         </p>
       ) : (
-        <div className="divide-y divide-border rounded-md border">
+        <Accordion
+          type="single"
+          collapsible
+          value={expandedPipelineId ?? ''}
+          onValueChange={(next) => setExpandedPipelineId(next || null)}
+          className="space-y-2"
+        >
           {pipelines.map((pipeline) => {
-            const isExpanded = expandedPipelineId === pipeline.id
             const pipelineStages = stages[pipeline.id] ?? []
             const isLoadingStages = loadingStages[pipeline.id] ?? false
 
             return (
-              <div key={pipeline.id}>
-                <div className="flex items-center justify-between gap-3 px-4 py-3">
-                  <div className="flex items-center gap-2">
+              <AccordionItem key={pipeline.id} value={pipeline.id}>
+                <AccordionTrigger triggerIcon="chevron">
+                  <span className="flex items-center gap-2">
                     <span className="text-sm font-medium">{pipeline.name}</span>
                     {pipeline.isDefault ? (
                       <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary">
                         {t('customers.pipelines.defaultBadge', 'Default')}
                       </span>
                     ) : null}
+                  </span>
+                </AccordionTrigger>
+                <AccordionContent>
+                  <div className="mb-3 flex items-center justify-between">
+                    <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                      {t('customers.pipelines.stages.title', 'Stages')}
+                    </span>
+                    <Button size="sm" variant="outline" onClick={() => openCreateStage(pipeline.id)}>
+                      {t('customers.pipelines.stages.add', 'Add stage')}
+                    </Button>
                   </div>
-                  <div className="flex items-center gap-2">
+
+                  {isLoadingStages ? (
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <Spinner className="h-3 w-3" />
+                      {t('customers.pipelines.stages.loading', 'Loading…')}
+                    </div>
+                  ) : pipelineStages.length === 0 ? (
+                    <p className="text-sm text-muted-foreground">
+                      {t('customers.pipelines.stages.empty', 'No stages yet.')}
+                    </p>
+                  ) : (
+                    <div className="divide-y divide-border rounded-md border bg-background">
+                      {pipelineStages.map((stage, idx) => (
+                        <div key={stage.id} className="flex items-center justify-between gap-3 px-3 py-2">
+                          <div className="flex items-center gap-2">
+                            <span className="w-5 text-center text-xs text-muted-foreground">{idx + 1}</span>
+                            {stage.color ? renderDictionaryColor(stage.color, 'h-3 w-3 rounded-full') : null}
+                            {stage.icon ? renderDictionaryIcon(stage.icon, 'h-4 w-4') : null}
+                            <span className="text-sm">{stage.label}</span>
+                          </div>
+                          <div className="flex items-center gap-1">
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="h-7 w-7"
+                              disabled={idx === 0}
+                              onClick={() => void handleMoveStage(stage, 'up')}
+                              title={t('customers.pipelines.stages.moveUp', 'Move up')}
+                            >
+                              ↑
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="h-7 w-7"
+                              disabled={idx === pipelineStages.length - 1}
+                              onClick={() => void handleMoveStage(stage, 'down')}
+                              title={t('customers.pipelines.stages.moveDown', 'Move down')}
+                            >
+                              ↓
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => openEditStage(stage)}
+                            >
+                              {t('customers.pipelines.stages.edit', 'Edit')}
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="text-destructive hover:text-destructive"
+                              onClick={() => void handleDeleteStage(stage)}
+                            >
+                              {t('customers.pipelines.stages.delete', 'Delete')}
+                            </Button>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+
+                  <div className="mt-4 flex items-center justify-end gap-2 border-t pt-3">
                     <Button
                       variant="ghost"
                       size="sm"
-                      onClick={() => toggleExpand(pipeline.id)}
+                      onClick={() => openEditPipeline(pipeline)}
                     >
-                      {isExpanded
-                        ? t('customers.pipelines.actions.hideStages', 'Hide stages')
-                        : t('customers.pipelines.actions.manageStages', 'Manage stages')}
-                    </Button>
-                    <Button variant="ghost" size="sm" onClick={() => openEditPipeline(pipeline)}>
-                      {t('customers.pipelines.actions.edit', 'Edit')}
+                      {t('customers.pipelines.actions.edit', 'Edit pipeline')}
                     </Button>
                     <Button
                       variant="ghost"
@@ -395,88 +469,14 @@ export default function PipelineSettings(): React.ReactElement {
                       className="text-destructive hover:text-destructive"
                       onClick={() => void handleDeletePipeline(pipeline)}
                     >
-                      {t('customers.pipelines.actions.delete', 'Delete')}
+                      {t('customers.pipelines.actions.delete', 'Delete pipeline')}
                     </Button>
                   </div>
-                </div>
-
-                {isExpanded ? (
-                  <div className="border-t border-border bg-muted/30 px-4 py-3">
-                    <div className="mb-3 flex items-center justify-between">
-                      <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
-                        {t('customers.pipelines.stages.title', 'Stages')}
-                      </span>
-                      <Button size="sm" variant="outline" onClick={() => openCreateStage(pipeline.id)}>
-                        {t('customers.pipelines.stages.add', 'Add stage')}
-                      </Button>
-                    </div>
-
-                    {isLoadingStages ? (
-                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                        <Spinner className="h-3 w-3" />
-                        {t('customers.pipelines.stages.loading', 'Loading…')}
-                      </div>
-                    ) : pipelineStages.length === 0 ? (
-                      <p className="text-sm text-muted-foreground">
-                        {t('customers.pipelines.stages.empty', 'No stages yet.')}
-                      </p>
-                    ) : (
-                      <div className="divide-y divide-border rounded-md border bg-background">
-                        {pipelineStages.map((stage, idx) => (
-                          <div key={stage.id} className="flex items-center justify-between gap-3 px-3 py-2">
-                            <div className="flex items-center gap-2">
-                              <span className="w-5 text-center text-xs text-muted-foreground">{idx + 1}</span>
-                              {stage.color ? renderDictionaryColor(stage.color, 'h-3 w-3 rounded-full') : null}
-                              {stage.icon ? renderDictionaryIcon(stage.icon, 'h-4 w-4') : null}
-                              <span className="text-sm">{stage.label}</span>
-                            </div>
-                            <div className="flex items-center gap-1">
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                className="h-7 w-7"
-                                disabled={idx === 0}
-                                onClick={() => void handleMoveStage(stage, 'up')}
-                                title={t('customers.pipelines.stages.moveUp', 'Move up')}
-                              >
-                                ↑
-                              </Button>
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                className="h-7 w-7"
-                                disabled={idx === pipelineStages.length - 1}
-                                onClick={() => void handleMoveStage(stage, 'down')}
-                                title={t('customers.pipelines.stages.moveDown', 'Move down')}
-                              >
-                                ↓
-                              </Button>
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => openEditStage(stage)}
-                              >
-                                {t('customers.pipelines.stages.edit', 'Edit')}
-                              </Button>
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                className="text-destructive hover:text-destructive"
-                                onClick={() => void handleDeleteStage(stage)}
-                              >
-                                {t('customers.pipelines.stages.delete', 'Delete')}
-                              </Button>
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                ) : null}
-              </div>
+                </AccordionContent>
+              </AccordionItem>
             )
           })}
-        </div>
+        </Accordion>
       )}
 
       {/* Pipeline Dialog */}

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

@@ -2,7 +2,8 @@
 
 import * as React from 'react'
 import Link from 'next/link'
-import { Search, Check, Settings2 } from 'lucide-react'
+import { Search, Check, CheckCheck, Settings2 } from 'lucide-react'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
 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'
@@ -419,12 +420,14 @@ export function AssignRoleDialog({
                 </div>
 
                 {!availableRoleTypes.length ? (
-                  <div className="rounded-lg border border-dashed border-border/80 px-4 py-6 text-sm text-muted-foreground">
-                    {t(
+                  <EmptyState
+                    size="sm"
+                    icon={<CheckCheck className="h-8 w-8" aria-hidden="true" />}
+                    title={t(
                       'customers.roles.dialog.noAvailableRoles',
                       'All available role types are already assigned.',
                     )}
-                  </div>
+                  />
                 ) : null}
               </div>
             ) : null}

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

@@ -1,7 +1,8 @@
 'use client'
 
 import * as React from 'react'
-import { Check, Plus, Search, SlidersHorizontal, Tag, X } from 'lucide-react'
+import { Check, Plus, Search, SearchX, SlidersHorizontal, Tag, X } from 'lucide-react'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { cn, slugifyTagLabel } from '@open-mercato/shared/lib/utils'
@@ -1238,13 +1239,17 @@ export function EntityTagsDialog({
                           {t('customers.personTags.loading', 'Loading...')}
                         </div>
                       ) : (
-                        <div className="rounded-lg border border-dashed border-border bg-background px-4 py-6 text-center text-sm text-muted-foreground">
-                          {searchValue.trim().length > 0
-                            ? t('customers.personTags.emptySearchResults', 'No options match the current search.')
-                            : activeCategory.source === 'dictionary'
-                              ? t('customers.personTags.emptyDictionaryCategory', 'No options are configured for this category yet.')
-                              : t('customers.personTags.emptyCategory', 'No items have been added for this category yet.')}
-                        </div>
+                        <EmptyState
+                          size="sm"
+                          icon={<SearchX className="h-8 w-8" aria-hidden="true" />}
+                          title={
+                            searchValue.trim().length > 0
+                              ? t('customers.personTags.emptySearchResults', 'No options match the current search.')
+                              : activeCategory.source === 'dictionary'
+                                ? t('customers.personTags.emptyDictionaryCategory', 'No options are configured for this category yet.')
+                                : t('customers.personTags.emptyCategory', 'No items have been added for this category yet.')
+                          }
+                        />
                       )}
 
                       {activeCategory.supportsCreate ? (

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

@@ -1,7 +1,8 @@
 'use client'
 
 import * as React from 'react'
-import { ArrowLeft, ArrowRight, Link2 } from 'lucide-react'
+import { ArrowLeft, ArrowRight, Building2, Link2 } from 'lucide-react'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { apiCallOrThrow, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
@@ -437,17 +438,20 @@ export function PersonCompaniesSection({
             ))}
           </div>
         ) : items.length === 0 ? (
-          <div className="rounded-2xl border border-dashed border-border/60 px-6 py-12 text-center text-sm text-muted-foreground">
-            {search.trim().length
-              ? t(
-                  'customers.people.detail.companies.noSearchResults',
-                  'No linked companies match your search.',
-                )
-              : t(
-                  'customers.people.detail.empty.companies',
-                  'No company linked to this person.',
-                )}
-          </div>
+          <EmptyState
+            icon={<Building2 className="h-8 w-8" aria-hidden="true" />}
+            title={
+              search.trim().length
+                ? t(
+                    'customers.people.detail.companies.noSearchResults',
+                    'No linked companies match your search.',
+                  )
+                : t(
+                    'customers.people.detail.empty.companies',
+                    'No company linked to this person.',
+                  )
+            }
+          />
         ) : (
           <>
             <div className="space-y-4">

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

@@ -2,7 +2,8 @@
 
 import * as React from 'react'
 import Link from 'next/link'
-import { Plus } from 'lucide-react'
+import { Plus, Settings, UserCheck } from 'lucide-react'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { apiCallOrThrow, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
@@ -254,37 +255,39 @@ export function RolesSection({ entityType, entityId, entityName }: RolesSectionP
           )}
         </div>
       ) : hasConfiguredRoleTypes ? (
-        <div className="rounded-lg border border-dashed p-4 text-center">
-          <p className="text-xs text-muted-foreground">
-            {t('customers.roles.emptyState', 'No roles assigned yet. Click below to assign a person.')}
-          </p>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            className="mt-2"
-            onClick={() => openDialog(null)}
-          >
-            {t('customers.roles.choosePerson', 'Choose person')}
-          </Button>
-        </div>
+        <EmptyState
+          size="sm"
+          icon={<UserCheck className="h-8 w-8" aria-hidden="true" />}
+          title={t('customers.roles.emptyState', 'No roles assigned yet. Click below to assign a person.')}
+          actions={
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => openDialog(null)}
+            >
+              <Plus className="h-4 w-4" aria-hidden="true" />
+              {t('customers.roles.choosePerson', 'Choose person')}
+            </Button>
+          }
+        />
       ) : (
-        <div className="rounded-lg border border-dashed p-4 text-center">
-          <div className="text-sm font-medium text-foreground">
-            {t('customers.roles.noRoleTypesTitle', 'No role types configured')}
-          </div>
-          <p className="mt-2 text-xs text-muted-foreground">
-            {t(
-              'customers.roles.noRoleTypesDescription',
-              'Create role types in Customers config before assigning owners here.',
-            )}
-          </p>
-          <Button asChild type="button" variant="outline" size="sm" className="mt-3">
-            <Link href="/backend/config/customers">
-              {t('customers.roles.configureRoleTypes', 'Configure role types')}
-            </Link>
-          </Button>
-        </div>
+        <EmptyState
+          size="sm"
+          icon={<Settings className="h-8 w-8" aria-hidden="true" />}
+          title={t('customers.roles.noRoleTypesTitle', 'No role types configured')}
+          description={t(
+            'customers.roles.noRoleTypesDescription',
+            'Create role types in Customers config before assigning owners here.',
+          )}
+          actions={
+            <Button asChild type="button" variant="outline" size="sm">
+              <Link href="/backend/config/customers">
+                {t('customers.roles.configureRoleTypes', 'Configure role types')}
+              </Link>
+            </Button>
+          }
+        />
       )}
 
       {hasConfiguredRoleTypes ? (