@open-mercato/core 0.4.5-develop-610fbb24ec → 0.4.5-develop-811deeb983

package/src/modules/resources/message-objects.ts

@@ -0,0 +1,36 @@
+import type { MessageObjectTypeDefinition } from '@open-mercato/shared/modules/messages/types'
+import { MessageObjectDetail, MessageObjectPreview } from '@open-mercato/ui/backend/messages'
+
+const objectMessageTypes = ['default', 'messages.defaultWithObjects']
+
+export const messageObjectTypes: MessageObjectTypeDefinition[] = [
+  {
+    module: 'resources',
+    entityType: 'resource',
+    messageTypes: objectMessageTypes,
+    entityId: 'resources:resources_resource',
+    optionLabelField: 'name',
+    optionSubtitleField: 'description',
+    labelKey: 'resources.messageObjects.resource.title',
+    icon: 'package',
+    PreviewComponent: MessageObjectPreview,
+    DetailComponent: MessageObjectDetail,
+    actions: [
+      {
+        id: 'view',
+        labelKey: 'common.view',
+        variant: 'outline',
+        href: '/backend/resources/resources/{entityId}',
+      },
+    ],
+    loadPreview: async (entityId, ctx) => {
+      if (typeof window !== 'undefined') {
+        return { title: 'Resource', subtitle: entityId }
+      }
+      const { loadResourcePreview } = await import('./lib/messageObjectPreviews')
+      return loadResourcePreview(entityId, ctx)
+    },
+  },
+]
+
+export default messageObjectTypes

package/src/modules/sales/backend/sales/channels/[channelId]/edit/page.tsx

@@ -12,6 +12,7 @@ import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { useChannelFields, buildChannelPayload, type ChannelFormValues } from '@open-mercato/core/modules/sales/components/channels/channelFormFields'
 import { E } from '#generated/entities.ids.generated'
 import { SalesChannelOffersPanel } from '@open-mercato/core/modules/sales/components/channels/SalesChannelOffersPanel'
+import { SendObjectMessageDialog } from '@open-mercato/ui/backend/messages'
 
 type ChannelApiResponse = {
   items?: Array<Record<string, unknown>>
@@ -126,6 +127,23 @@ export default function EditChannelPage({ params }: { params?: { channelId?: str
           <CrudForm<ChannelFormValues>
             title={t('sales.channels.form.editTitle', 'Edit channel')}
             versionHistory={{ resourceKind: 'sales.channel', resourceId: channelId ? String(channelId) : '' }}
+            extraActions={channelId ? (
+              <SendObjectMessageDialog
+                object={{
+                  entityModule: 'sales',
+                  entityType: 'channel',
+                  entityId: channelId,
+                  previewData: {
+                    title: initialValues?.name ?? '',
+                    metadata: {
+                      [t('sales.channels.form.contactEmail')]: initialValues?.contactEmail ?? '-',
+                      [t('sales.channels.form.websiteUrl')]: initialValues?.websiteUrl ?? '-',
+                    },
+                  },
+                }}
+                viewHref={`/backend/sales/channels/${channelId}/edit`}
+              />
+            ) : undefined}
             entityId={E.sales.sales_channel}
             fields={fields}
             groups={[

package/src/modules/sales/backend/sales/documents/[id]/page.tsx

@@ -63,6 +63,16 @@ import { readMarkdownPreferenceCookie, writeMarkdownPreferenceCookie } from '@op
 import { InjectionSpot, useInjectionWidgets } from '@open-mercato/ui/backend/injection/InjectionSpot'
 import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
 
+function formatMessageAmount(amount: number | null | undefined, currency: string | null | undefined): string | null {
+  if (typeof amount !== 'number' || !Number.isFinite(amount)) return null
+  if (!currency) return amount.toLocaleString()
+  try {
+    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(amount)
+  } catch {
+    return `${amount.toLocaleString()} ${currency}`
+  }
+}
+
 function CurrencyInlineEditor({
   label,
   value,
@@ -1844,9 +1854,11 @@ function StatusInlineEditor({
 export default function SalesDocumentDetailPage({
   params,
   initialKind,
+  includeAmountInMessageMetadata,
 }: {
   params: { id: string }
   initialKind?: 'order' | 'quote'
+  includeAmountInMessageMetadata?: boolean
 }) {
   const t = useT()
   const router = useRouter()
@@ -2729,6 +2741,11 @@ export default function SalesDocumentDetailPage({
       : null
   const contactEmail = resolveCustomerEmail(customerSnapshot) ?? metadataEmail ?? record?.contactEmail ?? null
   const statusDisplay = record?.status ? statusDictionaryMap[record.status] ?? null : null
+  const previewAmount = formatMessageAmount(record?.grandTotalGrossAmount ?? null, record?.currencyCode ?? null)
+  const messagePreviewMetadata: Record<string, string> = {}
+  if (includeAmountInMessageMetadata && previewAmount) {
+    messagePreviewMetadata[t('sales.documents.detail.totals.grandTotalGross')] = previewAmount
+  }
   const contactRecordId = customerSnapshot?.contact?.id ?? customerSnapshot?.customer?.id ?? record?.customerEntityId ?? null
   const resolveAdjustmentLabel = React.useCallback(
     (row: AdjustmentRowData) => {
@@ -4434,7 +4451,13 @@ export default function SalesDocumentDetailPage({
                   entityId: record.id,
                   sourceEntityType: kind === 'order' ? 'sales.order' : 'sales.quote',
                   sourceEntityId: record.id,
+                  previewData: {
+                    title: number,
+                    status: statusDisplay?.label ?? record?.status ?? undefined,
+                    metadata: Object.keys(messagePreviewMetadata).length > 0 ? messagePreviewMetadata : undefined,
+                  },
                 }}
+                viewHref={`/backend/sales/${kind === 'order' ? 'orders' : 'quotes'}/${record.id}`}
                 defaultValues={{
                   sourceEntityType: kind === 'order' ? 'sales.order' : 'sales.quote',
                   sourceEntityId: record.id,

package/src/modules/sales/backend/sales/quotes/[id]/page.tsx

@@ -3,5 +3,5 @@
 import SalesDocumentDetailPage from '../../documents/[id]/page'
 
 export default function SalesQuoteDetailPage(props: { params: { id: string } }) {
-  return <SalesDocumentDetailPage {...props} initialKind="quote" />
+  return <SalesDocumentDetailPage {...props} initialKind="quote" includeAmountInMessageMetadata />
 }

package/src/modules/sales/lib/messageObjectPreviews.ts

@@ -3,7 +3,7 @@ import { findOneWithDecryption } from '@open-mercato/shared/lib/encryption/find'
 import { resolveTranslations } from '@open-mercato/shared/lib/i18n/server'
 import type { ObjectPreviewData } from '@open-mercato/shared/modules/messages/types'
 import type { EntityManager } from '@mikro-orm/postgresql'
-import { SalesOrder, SalesQuote } from '../data/entities'
+import { SalesChannel, SalesOrder, SalesQuote } from '../data/entities'
 
 type PreviewContext = {
   tenantId: string
@@ -84,9 +84,12 @@ async function buildPreview(kind: DocumentKind, entityId: string, record: SalesD
   const subtitle = subtitleParts.length > 0 ? subtitleParts.join(' • ') : entityId
 
   const metadata: Record<string, string> = {}
-  if (number) metadata.Number = number
-  if (customerName) metadata.Customer = customerName
-  if (total) metadata.Total = total
+  const numberLabel = t('sales.documents.detail.number')
+  const customerLabel = t('sales.documents.detail.customer')
+  const totalLabel = t('sales.documents.detail.totals.grandTotalGross')
+  if (number) metadata[numberLabel] = number
+  if (customerName) metadata[customerLabel] = customerName
+  if (total) metadata[totalLabel] = total
 
   return {
     title: number && number.trim().length > 0 ? number : defaultTitle,
@@ -147,4 +150,51 @@ export async function loadSalesOrderPreview(entityId: string, ctx: PreviewContex
   return await buildPreview('order', entityId, record)
 }
 
+export async function loadSalesChannelPreview(entityId: string, ctx: PreviewContext): Promise<ObjectPreviewData> {
+  const { t } = await resolveTranslations()
+  const defaultTitle = t('sales.messageObjects.channel.title')
+
+  if (!ctx.organizationId) {
+    return { title: defaultTitle, subtitle: entityId }
+  }
+
+  const { resolve } = await createRequestContainer()
+  const em = resolve('em') as EntityManager
+  const entity = await findOneWithDecryption(
+    em,
+    SalesChannel,
+    {
+      id: entityId,
+      tenantId: ctx.tenantId,
+      organizationId: ctx.organizationId,
+      deletedAt: null,
+    },
+    undefined,
+    { tenantId: ctx.tenantId, organizationId: ctx.organizationId },
+  )
+
+  if (!entity) {
+    return {
+      title: defaultTitle,
+      subtitle: entityId,
+      status: t('sales.messageObjects.notFound'),
+      statusColor: 'gray',
+    }
+  }
+
+  const metadata: Record<string, string> = {}
+  const contactEmailLabel = t('sales.channels.form.contactEmail')
+  const websiteUrlLabel = t('sales.channels.form.websiteUrl')
+  if (entity.contactEmail && entity.contactEmail.trim().length > 0) metadata[contactEmailLabel] = entity.contactEmail
+  if (entity.websiteUrl && entity.websiteUrl.trim().length > 0) metadata[websiteUrlLabel] = entity.websiteUrl
+
+  return {
+    title: entity.name,
+    subtitle: entity.status ?? undefined,
+    status: entity.status ?? undefined,
+    statusColor: statusColor(entity.status),
+    metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
+  }
+}
+
 

package/src/modules/sales/message-objects.ts

@@ -1,4 +1,5 @@
 import type { MessageObjectTypeDefinition } from '@open-mercato/shared/modules/messages/types'
+import { MessageObjectDetail, MessageObjectPreview } from '@open-mercato/ui/backend/messages'
 import { SalesDocumentMessageDetail } from './widgets/messages/SalesDocumentMessageDetail'
 import { SalesDocumentMessagePreview } from './widgets/messages/SalesDocumentMessagePreview'
 
@@ -16,7 +17,14 @@ export const messageObjectTypes: MessageObjectTypeDefinition[] = [
     icon: 'receipt-text',
     PreviewComponent: SalesDocumentMessagePreview,
     DetailComponent: SalesDocumentMessageDetail,
-    actions: [],
+    actions: [
+      {
+        id: 'view',
+        labelKey: 'common.view',
+        variant: 'outline',
+        href: '/backend/sales/orders/{entityId}',
+      },
+    ],
     loadPreview: async (entityId, ctx) => {
       if (typeof window !== 'undefined') {
         return {
@@ -39,7 +47,14 @@ export const messageObjectTypes: MessageObjectTypeDefinition[] = [
     icon: 'file-text',
     PreviewComponent: SalesDocumentMessagePreview,
     DetailComponent: SalesDocumentMessageDetail,
-    actions: [],
+    actions: [
+      {
+        id: 'view',
+        labelKey: 'common.view',
+        variant: 'outline',
+        href: '/backend/sales/quotes/{entityId}',
+      },
+    ],
     loadPreview: async (entityId, ctx) => {
       if (typeof window !== 'undefined') {
         return {
@@ -51,6 +66,33 @@ export const messageObjectTypes: MessageObjectTypeDefinition[] = [
       return loadSalesQuotePreview(entityId, ctx)
     },
   },
+  {
+    module: 'sales',
+    entityType: 'channel',
+    messageTypes: objectMessageTypes,
+    entityId: 'sales:sales_channel',
+    optionLabelField: 'name',
+    optionSubtitleField: 'status',
+    labelKey: 'sales.messageObjects.channel.title',
+    icon: 'store',
+    PreviewComponent: MessageObjectPreview,
+    DetailComponent: MessageObjectDetail,
+    actions: [
+      {
+        id: 'view',
+        labelKey: 'common.view',
+        variant: 'outline',
+        href: '/backend/sales/channels/{entityId}/edit',
+      },
+    ],
+    loadPreview: async (entityId, ctx) => {
+      if (typeof window !== 'undefined') {
+        return { title: 'Sales channel', subtitle: entityId }
+      }
+      const { loadSalesChannelPreview } = await import('./lib/messageObjectPreviews')
+      return loadSalesChannelPreview(entityId, ctx)
+    },
+  },
 ]
 
 export default messageObjectTypes

package/src/modules/sales/widgets/messages/SalesDocumentMessageDetail.tsx

@@ -1,52 +1,90 @@
 "use client"
 
 import * as React from 'react'
+import Link from 'next/link'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import type { ObjectDetailProps } from '@open-mercato/shared/modules/messages/types'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { SalesDocumentMessagePreview } from './SalesDocumentMessagePreview'
 
+function resolveActionHref(template: string, entityId: string): string {
+  return template.replace('{entityId}', encodeURIComponent(entityId))
+}
+
 export function SalesDocumentMessageDetail(props: ObjectDetailProps) {
   const t = useT()
   const [executingActionId, setExecutingActionId] = React.useState<string | null>(null)
 
+  const viewAction = props.actions.find((a) => a.id === 'view')
+  const otherActions = props.actions.filter((a) => a.id !== 'view')
+
+  const preview = (
+    <SalesDocumentMessagePreview
+      entityId={props.entityId}
+      entityModule={props.entityModule}
+      entityType={props.entityType}
+      snapshot={props.snapshot}
+      previewData={props.previewData}
+      actionRequired={props.actionRequired}
+      actionType={props.actionType}
+      actionLabel={props.actionLabel}
+    />
+  )
+
   return (
     <div className="space-y-3 rounded border p-3">
-      <SalesDocumentMessagePreview
-        entityId={props.entityId}
-        entityModule={props.entityModule}
-        entityType={props.entityType}
-        snapshot={props.snapshot}
-        previewData={props.previewData}
-        actionRequired={props.actionRequired}
-        actionType={props.actionType}
-        actionLabel={props.actionLabel}
-      />
-
-      {props.actions.length > 0 ? (
+      {viewAction?.href ? (
+        <Link
+          href={resolveActionHref(viewAction.href, props.entityId)}
+          className="block rounded-md transition-opacity hover:opacity-75"
+        >
+          {preview}
+        </Link>
+      ) : (
+        preview
+      )}
+
+      {otherActions.length > 0 ? (
         <div className="flex flex-wrap gap-2">
-          {props.actions.map((action) => (
-            <Button
-              key={action.id}
-              type="button"
-              size="sm"
-              variant={action.variant ?? 'default'}
-              disabled={executingActionId !== null}
-              onClick={async () => {
-                if (executingActionId) return
-                setExecutingActionId(action.id)
-                try {
-                  await props.onAction(action.id, { id: props.entityId })
-                } finally {
-                  setExecutingActionId(null)
-                }
-              }}
-            >
-              {executingActionId === action.id
-                ? t('messages.actions.executing', 'Executing...')
-                : t(action.labelKey ?? action.id, action.id)}
-            </Button>
-          ))}
+          {otherActions.map((action) => {
+            if (action.href) {
+              return (
+                <Button
+                  key={action.id}
+                  type="button"
+                  size="sm"
+                  variant={action.variant ?? 'default'}
+                  asChild
+                >
+                  <Link href={resolveActionHref(action.href, props.entityId)}>
+                    {t(action.labelKey ?? action.id, action.id)}
+                  </Link>
+                </Button>
+              )
+            }
+            return (
+              <Button
+                key={action.id}
+                type="button"
+                size="sm"
+                variant={action.variant ?? 'default'}
+                disabled={executingActionId !== null}
+                onClick={async () => {
+                  if (executingActionId) return
+                  setExecutingActionId(action.id)
+                  try {
+                    await props.onAction(action.id, { id: props.entityId })
+                  } finally {
+                    setExecutingActionId(null)
+                  }
+                }}
+              >
+                {executingActionId === action.id
+                  ? t('messages.actions.executing', 'Executing...')
+                  : t(action.labelKey ?? action.id, action.id)}
+              </Button>
+            )
+          })}
         </div>
       ) : null}
     </div>

package/src/modules/sales/widgets/messages/SalesDocumentMessagePreview.tsx

@@ -19,7 +19,7 @@ export function SalesDocumentMessagePreview({
     ? t('sales.documents.detail.quote', 'Sales quote')
     : t('sales.documents.detail.order', 'Sales order')
   const title = previewData?.title || fallbackTitle
-  const subtitle = previewData?.subtitle || entityId
+  const subtitle = previewData?.subtitle || ""
 
   return (
     <div className="flex items-start gap-3 rounded-md border bg-muted/20 p-3">

package/src/modules/staff/backend/staff/leave-requests/[id]/page.tsx

@@ -112,21 +112,7 @@ export default function StaffLeaveRequestDetailPage({ params }: { params?: { id?
     note: record?.note ?? null,
   }), [record, memberLabel])
 
-  const messageContextPreview = React.useMemo(() => (
-    <div className="space-y-1">
-      <p className="font-medium">{t('staff.leaveRequests.messages.contextTitle', 'Linked leave request')}</p>
-      {memberLabel ? (
-        <p className="text-xs text-muted-foreground">
-          {t('staff.leaveRequests.detail.member', 'Team member')}: {memberLabel}
-        </p>
-      ) : null}
-      <p className="text-xs text-muted-foreground">
-        {t('staff.leaveRequests.detail.dates', 'Dates')}: {dateSummary}
-      </p>
-    </div>
-  ), [dateSummary, memberLabel, t])
-
-  const handleSubmit = React.useCallback(async (values: LeaveRequestFormValues) => {
+const handleSubmit = React.useCallback(async (values: LeaveRequestFormValues) => {
     if (!record?.id) return
     const payload = buildLeaveRequestPayload(values, { id: record.id })
     await updateCrud('staff/leave-requests', payload, {
@@ -239,7 +225,13 @@ export default function StaffLeaveRequestDetailPage({ params }: { params?: { id?
                 entityId: record.id,
                 sourceEntityType: 'staff:leave_request',
                 sourceEntityId: record.id,
+                previewData: {
+                  title: memberLabel || t('staff.leaveRequests.messages.contextTitle', 'Linked leave request'),
+                  subtitle: dateSummary || undefined,
+                  status: record?.status ?? undefined,
+                },
               }}
+              viewHref={`/backend/staff/leave-requests/${record.id}`}
               lockedType="staff.leave_request_approval"
               requiredActionConfig={{
                 mode: 'required',
@@ -253,20 +245,6 @@ export default function StaffLeaveRequestDetailPage({ params }: { params?: { id?
                 subject: t('staff.leaveRequests.messages.compose.subject', 'Leave request approval needed'),
                 body: t('staff.leaveRequests.messages.compose.body', 'Please review this leave request and take action.'),
               }}
-              contextPreview={messageContextPreview}
-              renderTrigger={({ openComposer, disabled }) => (
-                <Button
-                  type="button"
-                  size="icon"
-                  variant="outline"
-                  onClick={openComposer}
-                  disabled={disabled}
-                  aria-label={t('staff.leaveRequests.messages.compose.action', 'Send for review')}
-                  title={t('staff.leaveRequests.messages.compose.action', 'Send for review')}
-                >
-                  <Send className="h-4 w-4" />
-                </Button>
-              )}
             />
           ) : null}
         />

package/src/modules/staff/backend/staff/my-availability/page.tsx

@@ -9,6 +9,7 @@ import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { AvailabilityRulesEditor } from '@open-mercato/core/modules/planner/components/AvailabilityRulesEditor'
 import { buildMemberScheduleItems } from '@open-mercato/core/modules/staff/lib/memberSchedule'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { SendObjectMessageDialog } from '@open-mercato/ui/backend/messages'
 
 type SelfMemberResponse = {
   member?: {
@@ -112,6 +113,19 @@ export default function StaffMyAvailabilityPage() {
     <Page>
       <PageBody>
         <div className="space-y-4">
+          {member.availabilityRuleSetId ? (
+            <div className="flex justify-end">
+              <SendObjectMessageDialog
+                object={{
+                  entityModule: 'staff',
+                  entityType: 'my_availability',
+                  entityId: member.availabilityRuleSetId,
+                  previewData: { title: member.displayName ?? t('staff.myAvailability.title', 'My Availability') },
+                }}
+                viewHref="/backend/staff/my-availability"
+              />
+            </div>
+          ) : null}
           {!canManageAvailability ? (
             <div className="space-y-2 rounded-lg border bg-card p-4 text-sm text-muted-foreground">
               <p className="font-medium text-foreground">

package/src/modules/staff/backend/staff/my-leave-requests/[id]/page.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 import { useRouter } from 'next/navigation'
-import { Leaf } from 'lucide-react'
+import { Send } from 'lucide-react'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
 import { Badge } from '@open-mercato/ui/primitives/badge'
 import { Button } from '@open-mercato/ui/primitives/button'
@@ -102,21 +102,7 @@ export default function StaffMyLeaveRequestDetailPage({ params }: { params?: { i
     record?.startDate ?? record?.start_date ?? null,
     record?.endDate ?? record?.end_date ?? null,
   )
-  const messageContextPreview = React.useMemo(() => (
-    <div className="space-y-1">
-      <p className="font-medium">{t('staff.leaveRequests.messages.contextTitle', 'Linked leave request')}</p>
-      {memberLabel ? (
-        <p className="text-xs text-muted-foreground">
-          {t('staff.leaveRequests.detail.member', 'Team member')}: {memberLabel}
-        </p>
-      ) : null}
-      <p className="text-xs text-muted-foreground">
-        {t('staff.leaveRequests.detail.dates', 'Dates')}: {dateSummary}
-      </p>
-    </div>
-  ), [dateSummary, memberLabel, t])
-
-  const handleSubmit = React.useCallback(async (values: LeaveRequestFormValues) => {
+const handleSubmit = React.useCallback(async (values: LeaveRequestFormValues) => {
     if (!record?.id) return
     const payload = buildLeaveRequestPayload(values, { id: record.id })
     await updateCrud('staff/leave-requests', payload, {
@@ -186,7 +172,13 @@ export default function StaffMyLeaveRequestDetailPage({ params }: { params?: { i
                   entityId: record.id,
                   sourceEntityType: 'staff:leave_request',
                   sourceEntityId: record.id,
+                  previewData: {
+                    title: memberLabel || t('staff.leaveRequests.messages.contextTitle', 'Linked leave request'),
+                    subtitle: dateSummary || undefined,
+                    status: record?.status ?? undefined,
+                  },
                 }}
+                viewHref={`/backend/staff/leave-requests/${record.id}`}
                 lockedType="staff.leave_request_approval"
                 requiredActionConfig={{
                   mode: 'required',
@@ -200,20 +192,6 @@ export default function StaffMyLeaveRequestDetailPage({ params }: { params?: { i
                   subject: t('staff.leaveRequests.messages.compose.subject', 'Leave request approval needed'),
                   body: t('staff.leaveRequests.messages.compose.body', 'Please review this leave request and take action.'),
                 }}
-                contextPreview={messageContextPreview}
-                renderTrigger={({ openComposer, disabled }) => (
-                  <Button
-                    type="button"
-                    size="icon"
-                    variant="outline"
-                    onClick={openComposer}
-                    disabled={disabled}
-                    aria-label={t('staff.leaveRequests.messages.compose.action', 'Send for review')}
-                    title={t('staff.leaveRequests.messages.compose.action', 'Send for review')}
-                  >
-                    <Leaf className="h-4 w-4" />
-                  </Button>
-                )}
               />
             ) : null}
           />

package/src/modules/staff/backend/staff/team-members/[id]/page.tsx

@@ -31,6 +31,7 @@ import { JobHistorySection } from '@open-mercato/core/modules/staff/components/d
 import type { DictionarySelectLabels } from '@open-mercato/core/modules/dictionaries/components/DictionaryEntrySelect'
 import { Plus } from 'lucide-react'
 import { TranslationDrawerAction } from '@open-mercato/core/modules/translations/components/TranslationDrawerAction'
+import { SendObjectMessageDialog } from '@open-mercato/ui/backend/messages'
 
 const MARKDOWN_CLASSNAME =
   'text-sm text-muted-foreground break-words [&>*]:mb-2 [&>*:last-child]:mb-0 [&_ul]:ml-4 [&_ul]:list-disc [&_ol]:ml-4 [&_ol]:list-decimal [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:text-xs'
@@ -325,13 +326,33 @@ export default function StaffTeamMemberDetailPage({ params }: { params?: { id?:
                 </p>
               </div>
             </div>
-            <TranslationDrawerAction
-              config={memberId ? {
-                entityType: 'staff:staff_team_member',
-                recordId: memberId,
-                baseValues: memberRecord ?? undefined,
-              } : null}
-            />
+            <div className="flex items-center gap-2">
+              {memberId ? (
+                <SendObjectMessageDialog
+                  object={{
+                    entityModule: 'staff',
+                    entityType: 'team_member',
+                    entityId: memberId,
+                    previewData: {
+                      title: displayName,
+                      metadata: {
+                        [t('staff.teamMembers.detail.fields.team')]: teamLabel,
+                        [t('staff.teamMembers.detail.fields.user')]: userEmail ?? t('staff.teamMembers.detail.fields.userEmpty', 'No user linked'),
+                        [t('staff.teamMembers.detail.fields.roles')]: roleLabels.join(', '),
+                      },
+                    },
+                  }}
+                  viewHref={`/backend/staff/team-members/${memberId}`}
+                />
+              ) : null}
+              <TranslationDrawerAction
+                config={memberId ? {
+                  entityType: 'staff:staff_team_member',
+                  recordId: memberId,
+                  baseValues: memberRecord ?? undefined,
+                } : null}
+              />
+            </div>
           </div>
 
           <div className="border-b">

package/src/modules/staff/backend/staff/team-roles/[id]/edit/page.tsx

@@ -8,6 +8,7 @@ import { updateCrud, deleteCrud } from '@open-mercato/ui/backend/utils/crud'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { TeamRoleForm, type TeamRoleFormValues, type TeamRoleOption, buildTeamRolePayload } from '@open-mercato/core/modules/staff/components/TeamRoleForm'
+import { SendObjectMessageDialog } from '@open-mercato/ui/backend/messages'
 import { extractCustomFieldEntries } from '@open-mercato/shared/lib/crud/custom-fields-client'
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
 
@@ -143,6 +144,17 @@ export default function StaffTeamRoleEditPage({ params }: { params?: { id?: stri
           onDelete={handleDelete}
           isLoading={!initialValues}
           loadingMessage={t('staff.teamRoles.form.loading', 'Loading team role...')}
+          extraActions={roleId ? (
+            <SendObjectMessageDialog
+              object={{
+                entityModule: 'staff',
+                entityType: 'team_role',
+                entityId: roleId,
+                previewData: { title: initialValues?.name ?? ''},
+              }}
+              viewHref={`/backend/staff/team-roles/${roleId}/edit`}
+            />
+          ) : undefined}
         />
       </PageBody>
     </Page>