@open-mercato/core 0.4.5-develop-5191db4ef3 → 0.4.5-develop-9f9549ebc8

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

@@ -1106,6 +1106,9 @@
   "sales.errors.tag_required": "La etiqueta es obligatoria.",
   "sales.errors.tenant_required": "Se requiere el contexto del inquilino",
   "sales.errors.unauthorized": "No autorizado",
+  "sales.messageObjects.notFound": "No encontrado",
+  "sales.messageObjects.order.title": "Pedido",
+  "sales.messageObjects.quote.title": "Cotización",
   "sales.module.description": "Cotizaciones, pedidos, cumplimiento, facturación y pagos conectados al catálogo de productos.",
   "sales.module.title": "Gestión de ventas",
   "sales.nav.channels": "Canales de ventas",

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

@@ -1106,6 +1106,9 @@
   "sales.errors.tag_required": "Tag jest wymagany.",
   "sales.errors.tenant_required": "Wymagany jest kontekst najemcy",
   "sales.errors.unauthorized": "Brak autoryzacji",
+  "sales.messageObjects.notFound": "Nie znaleziono",
+  "sales.messageObjects.order.title": "Zamówienie",
+  "sales.messageObjects.quote.title": "Oferta",
   "sales.module.description": "Oferty, zamówienia, realizacja, fakturowanie i płatności powiązane z katalogiem produktów.",
   "sales.module.title": "Sprzedaż",
   "sales.nav.channels": "Kanały sprzedaży",

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

@@ -0,0 +1,150 @@
+import { createRequestContainer } from '@open-mercato/shared/lib/di/container'
+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'
+
+type PreviewContext = {
+  tenantId: string
+  organizationId?: string | null
+}
+
+type DocumentKind = 'order' | 'quote'
+
+type SalesDocumentPreviewRecord = {
+  id: string
+  status?: string | null
+  customerSnapshot?: Record<string, unknown> | null
+  currencyCode?: string | null
+  grandTotalGrossAmount?: string | null
+  orderNumber?: string
+  quoteNumber?: string
+}
+
+function resolveCustomerName(snapshot: Record<string, unknown> | null): string | null {
+  if (!snapshot) return null
+  const customer = snapshot.customer as Record<string, unknown> | undefined
+  const contact = snapshot.contact as Record<string, unknown> | undefined
+  const displayName = typeof customer?.displayName === 'string' ? customer.displayName : null
+  if (displayName && displayName.trim().length > 0) return displayName.trim()
+  const first = typeof contact?.firstName === 'string' ? contact.firstName : null
+  const last = typeof contact?.lastName === 'string' ? contact.lastName : null
+  const preferred = typeof contact?.preferredName === 'string' ? contact.preferredName : null
+  const parts = [preferred ?? first, last]
+    .map((part) => (typeof part === 'string' ? part.trim() : ''))
+    .filter((part) => part.length > 0)
+  return parts.length > 0 ? parts.join(' ') : null
+}
+
+function formatTotal(amount: string | null | undefined, currency: string | null | undefined): string | null {
+  if (!amount) return null
+  const value = Number(amount)
+  if (!Number.isFinite(value)) return currency ? `${amount} ${currency}` : amount
+  if (!currency) return value.toLocaleString()
+  try {
+    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(value)
+  } catch {
+    return `${value.toLocaleString()} ${currency}`
+  }
+}
+
+function statusColor(status: string | null | undefined): string | undefined {
+  if (!status) return undefined
+  const value = status.toLowerCase()
+  if (value.includes('approved') || value.includes('paid') || value.includes('fulfilled') || value.includes('accepted')) {
+    return 'green'
+  }
+  if (value.includes('cancel') || value.includes('rejected') || value.includes('void')) {
+    return 'red'
+  }
+  if (value.includes('draft') || value.includes('pending') || value.includes('open') || value.includes('sent')) {
+    return 'amber'
+  }
+  return 'blue'
+}
+
+async function buildPreview(kind: DocumentKind, entityId: string, record: SalesDocumentPreviewRecord | null): Promise<ObjectPreviewData> {
+  const { t } = await resolveTranslations()
+  const defaultTitle = kind === 'quote' ? t('sales.messageObjects.quote.title') : t('sales.messageObjects.order.title')
+  if (!record) {
+    return {
+      title: defaultTitle,
+      subtitle: entityId,
+      status: t('sales.messageObjects.notFound'),
+      statusColor: 'gray',
+    }
+  }
+
+  const number = kind === 'quote' ? record.quoteNumber : record.orderNumber
+  const customerName = resolveCustomerName(record.customerSnapshot ?? null)
+  const total = formatTotal(record.grandTotalGrossAmount, record.currencyCode)
+
+  const subtitleParts = [customerName, total].filter((part): part is string => Boolean(part && part.trim().length > 0))
+  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
+
+  return {
+    title: number && number.trim().length > 0 ? number : defaultTitle,
+    subtitle,
+    status: record.status ?? undefined,
+    statusColor: statusColor(record.status),
+    metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
+  }
+}
+
+async function loadDocumentRecord(
+  kind: DocumentKind,
+  entityId: string,
+  ctx: PreviewContext,
+): Promise<SalesDocumentPreviewRecord | null> {
+  if (!ctx.organizationId) return null
+
+  const { resolve } = await createRequestContainer()
+  const em = resolve('em') as EntityManager
+  const scope = { tenantId: ctx.tenantId, organizationId: ctx.organizationId }
+
+  if (kind === 'quote') {
+    return await findOneWithDecryption(
+      em,
+      SalesQuote,
+      {
+        id: entityId,
+        tenantId: ctx.tenantId,
+        organizationId: ctx.organizationId,
+        deletedAt: null,
+      },
+      undefined,
+      scope,
+    )
+  }
+
+  return await findOneWithDecryption(
+    em,
+    SalesOrder,
+    {
+      id: entityId,
+      tenantId: ctx.tenantId,
+      organizationId: ctx.organizationId,
+      deletedAt: null,
+    },
+    undefined,
+    scope,
+  )
+}
+
+export async function loadSalesQuotePreview(entityId: string, ctx: PreviewContext): Promise<ObjectPreviewData> {
+  const record = await loadDocumentRecord('quote', entityId, ctx)
+  return await buildPreview('quote', entityId, record)
+}
+
+export async function loadSalesOrderPreview(entityId: string, ctx: PreviewContext): Promise<ObjectPreviewData> {
+  const record = await loadDocumentRecord('order', entityId, ctx)
+  return await buildPreview('order', entityId, record)
+}
+
+

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

@@ -0,0 +1,56 @@
+import type { MessageObjectTypeDefinition } from '@open-mercato/shared/modules/messages/types'
+import { SalesDocumentMessageDetail } from './widgets/messages/SalesDocumentMessageDetail'
+import { SalesDocumentMessagePreview } from './widgets/messages/SalesDocumentMessagePreview'
+
+const objectMessageTypes = ['default', 'messages.defaultWithObjects']
+
+export const messageObjectTypes: MessageObjectTypeDefinition[] = [
+  {
+    module: 'sales',
+    entityType: 'order',
+    messageTypes: objectMessageTypes,
+    entityId: 'sales:sales_order',
+    optionLabelField: 'number',
+    optionSubtitleField: 'status',
+    labelKey: 'sales.documents.detail.order',
+    icon: 'receipt-text',
+    PreviewComponent: SalesDocumentMessagePreview,
+    DetailComponent: SalesDocumentMessageDetail,
+    actions: [],
+    loadPreview: async (entityId, ctx) => {
+      if (typeof window !== 'undefined') {
+        return {
+          title: 'Sales order',
+          subtitle: entityId,
+        }
+      }
+      const { loadSalesOrderPreview } = await import('./lib/messageObjectPreviews')
+      return loadSalesOrderPreview(entityId, ctx)
+    },
+  },
+  {
+    module: 'sales',
+    entityType: 'quote',
+    messageTypes: objectMessageTypes,
+    entityId: 'sales:sales_quote',
+    optionLabelField: 'number',
+    optionSubtitleField: 'status',
+    labelKey: 'sales.documents.detail.quote',
+    icon: 'file-text',
+    PreviewComponent: SalesDocumentMessagePreview,
+    DetailComponent: SalesDocumentMessageDetail,
+    actions: [],
+    loadPreview: async (entityId, ctx) => {
+      if (typeof window !== 'undefined') {
+        return {
+          title: 'Sales quote',
+          subtitle: entityId,
+        }
+      }
+      const { loadSalesQuotePreview } = await import('./lib/messageObjectPreviews')
+      return loadSalesQuotePreview(entityId, ctx)
+    },
+  },
+]
+
+export default messageObjectTypes

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

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from 'react'
+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'
+
+export function SalesDocumentMessageDetail(props: ObjectDetailProps) {
+  const t = useT()
+  const [executingActionId, setExecutingActionId] = React.useState<string | null>(null)
+
+  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 ? (
+        <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>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export default SalesDocumentMessageDetail
+

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

@@ -0,0 +1,46 @@
+"use client"
+
+import { FileText, ReceiptText } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { ObjectPreviewProps } from '@open-mercato/shared/modules/messages/types'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+
+export function SalesDocumentMessagePreview({
+  entityType,
+  entityId,
+  previewData,
+  actionRequired,
+  actionLabel,
+}: ObjectPreviewProps) {
+  const t = useT()
+  const isQuote = entityType === 'quote'
+  const Icon = isQuote ? FileText : ReceiptText
+  const fallbackTitle = isQuote
+    ? t('sales.documents.detail.quote', 'Sales quote')
+    : t('sales.documents.detail.order', 'Sales order')
+  const title = previewData?.title || fallbackTitle
+  const subtitle = previewData?.subtitle || entityId
+
+  return (
+    <div className="flex items-start gap-3 rounded-md border bg-muted/20 p-3">
+      <Icon className="mt-0.5 h-4 w-4 text-muted-foreground" />
+      <div className="min-w-0 flex-1 space-y-1">
+        <div className="flex items-center gap-2">
+          <p className="truncate text-sm font-medium">{title}</p>
+          {actionRequired ? (
+            <Badge variant="secondary" className="text-xs">
+              {actionLabel || t('messages.composer.objectActionRequired', 'Action required')}
+            </Badge>
+          ) : null}
+        </div>
+        <p className="truncate text-xs text-muted-foreground">{subtitle}</p>
+        {previewData?.status ? (
+          <Badge variant="outline" className="text-xs">{previewData.status}</Badge>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+export default SalesDocumentMessagePreview
+

package/src/modules/sales/widgets/messages/index.ts

@@ -0,0 +1,2 @@
+export { SalesDocumentMessageDetail } from './SalesDocumentMessageDetail'
+export { SalesDocumentMessagePreview } from './SalesDocumentMessagePreview'

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

@@ -2,11 +2,13 @@
 
 import * as React from 'react'
 import { useRouter } from 'next/navigation'
+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'
 import { Textarea } from '@open-mercato/ui/primitives/textarea'
 import { LoadingMessage, ErrorMessage } from '@open-mercato/ui/backend/detail'
+import { SendObjectMessageDialog } from '@open-mercato/ui/backend/messages'
 import { apiCallOrThrow, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { updateCrud } from '@open-mercato/ui/backend/utils/crud'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
@@ -110,6 +112,20 @@ 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) => {
     if (!record?.id) return
     const payload = buildLeaveRequestPayload(values, { id: record.id })
@@ -215,6 +231,44 @@ export default function StaffLeaveRequestDetailPage({ params }: { params?: { id?
           onSubmit={handleSubmit}
           allowMemberSelect
           memberLabel={memberLabel}
+          extraActions={record.id ? (
+            <SendObjectMessageDialog
+              object={{
+                entityModule: 'staff',
+                entityType: 'leave_request',
+                entityId: record.id,
+                sourceEntityType: 'staff:leave_request',
+                sourceEntityId: record.id,
+              }}
+              lockedType="staff.leave_request_approval"
+              requiredActionConfig={{
+                mode: 'required',
+                options: [
+                  { id: 'approve', label: t('staff.notifications.leaveRequest.actions.approve', 'Approve') },
+                  { id: 'reject', label: t('staff.notifications.leaveRequest.actions.reject', 'Reject') },
+                ],
+              }}
+              defaultValues={{
+                type: 'staff.leave_request_approval',
+                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}
         />
       </PageBody>
     </Page>

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

@@ -2,9 +2,12 @@
 
 import * as React from 'react'
 import { useRouter } from 'next/navigation'
+import { Leaf } 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'
 import { LoadingMessage, ErrorMessage } from '@open-mercato/ui/backend/detail'
+import { SendObjectMessageDialog } from '@open-mercato/ui/backend/messages'
 import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { updateCrud } from '@open-mercato/ui/backend/utils/crud'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
@@ -95,6 +98,23 @@ export default function StaffMyLeaveRequestDetailPage({ params }: { params?: { i
     unavailabilityReasonValue: record?.unavailabilityReasonValue ?? record?.unavailability_reason_value ?? null,
     note: record?.note ?? null,
   }), [record, memberLabel])
+  const dateSummary = formatDateRange(
+    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) => {
     if (!record?.id) return
@@ -158,6 +178,44 @@ export default function StaffMyLeaveRequestDetailPage({ params }: { params?: { i
             onSubmit={handleSubmit}
             allowMemberSelect={false}
             memberLabel={memberLabel}
+            extraActions={record.id ? (
+              <SendObjectMessageDialog
+                object={{
+                  entityModule: 'staff',
+                  entityType: 'leave_request',
+                  entityId: record.id,
+                  sourceEntityType: 'staff:leave_request',
+                  sourceEntityId: record.id,
+                }}
+                lockedType="staff.leave_request_approval"
+                requiredActionConfig={{
+                  mode: 'required',
+                  options: [
+                    { id: 'approve', label: t('staff.notifications.leaveRequest.actions.approve', 'Approve') },
+                    { id: 'reject', label: t('staff.notifications.leaveRequest.actions.reject', 'Reject') },
+                  ],
+                }}
+                defaultValues={{
+                  type: 'staff.leave_request_approval',
+                  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}
           />
         ) : (
           <div className="rounded-lg border bg-card p-4 text-sm text-muted-foreground">

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

@@ -2,9 +2,7 @@
 
 import * as React from 'react'
 import Link from 'next/link'
-import dynamic from 'next/dynamic'
 import { useRouter, useSearchParams } from 'next/navigation'
-import type { PluggableList } from 'unified'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
@@ -23,6 +21,7 @@ import { renderDictionaryColor, renderDictionaryIcon, ICON_SUGGESTIONS } from '@
 import { createStaffNotesAdapter } from '@open-mercato/core/modules/staff/components/detail/notesAdapter'
 import { createStaffActivitiesAdapter } from '@open-mercato/core/modules/staff/components/detail/activitiesAdapter'
 import { createStaffAddressAdapter, createStaffAddressTypesAdapter } from '@open-mercato/core/modules/staff/components/detail/addressesAdapter'
+import { MarkdownContent } from '@open-mercato/ui/backend/markdown/MarkdownContent'
 import {
   createStaffDictionaryEntry,
   loadStaffDictionary,
@@ -32,31 +31,9 @@ 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'
 
-const isTestEnv = typeof process !== 'undefined' && process.env.NODE_ENV === 'test'
 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'
 
-type MarkdownPreviewProps = { children: string; className?: string; remarkPlugins?: PluggableList }
-
-const MarkdownPreview: React.ComponentType<MarkdownPreviewProps> = isTestEnv
-  ? ({ children, className }) => <div className={className}>{children}</div>
-  : (dynamic(() => import('react-markdown').then((mod) => mod.default as React.ComponentType<MarkdownPreviewProps>), {
-      ssr: false,
-      loading: () => null,
-    }) as unknown as React.ComponentType<MarkdownPreviewProps>)
-
-let markdownPluginsPromise: Promise<PluggableList> | null = null
-
-async function loadMarkdownPlugins(): Promise<PluggableList> {
-  if (isTestEnv) return []
-  if (!markdownPluginsPromise) {
-    markdownPluginsPromise = import('remark-gfm')
-      .then((mod) => [mod.default ?? mod] as PluggableList)
-      .catch(() => [])
-  }
-  return markdownPluginsPromise
-}
-
 type TeamMemberRecord = {
   id: string
   teamId?: string | null
@@ -97,7 +74,6 @@ export default function StaffTeamMemberDetailPage({ params }: { params?: { id?:
   const [sectionAction, setSectionAction] = React.useState<SectionAction | null>(null)
   const [activityDictionaryId, setActivityDictionaryId] = React.useState<string | null>(null)
   const [activityTypeEntries, setActivityTypeEntries] = React.useState<DictionaryEntryOption[]>([])
-  const [markdownPlugins, setMarkdownPlugins] = React.useState<PluggableList>([])
   const flashShownRef = React.useRef(false)
 
   const notesAdapter = React.useMemo(() => createStaffNotesAdapter(detailTranslator), [detailTranslator])
@@ -105,10 +81,6 @@ export default function StaffTeamMemberDetailPage({ params }: { params?: { id?:
   const addressesAdapter = React.useMemo(() => createStaffAddressAdapter(detailTranslator), [detailTranslator])
   const addressTypesAdapter = React.useMemo(() => createStaffAddressTypesAdapter(detailTranslator), [detailTranslator])
 
-  React.useEffect(() => {
-    void loadMarkdownPlugins().then((plugins) => setMarkdownPlugins(plugins))
-  }, [])
-
   const activityTypeLabels = React.useMemo<DictionarySelectLabels>(() => ({
     placeholder: t('staff.teamMembers.detail.activities.dictionary.placeholder', 'Select an activity type'),
     addLabel: t('staff.teamMembers.detail.activities.dictionary.add', 'Add type'),
@@ -519,9 +491,7 @@ export default function StaffTeamMemberDetailPage({ params }: { params?: { id?:
                     </h2>
                     <div className="space-y-2">
                       {memberRecord?.description ? (
-                        <MarkdownPreview remarkPlugins={markdownPlugins} className={MARKDOWN_CLASSNAME}>
-                          {memberRecord.description}
-                        </MarkdownPreview>
+                        <MarkdownContent body={memberRecord.description} format="markdown" className={MARKDOWN_CLASSNAME} />
                       ) : (
                         <p className="text-sm text-muted-foreground">
                           {t('staff.teamMembers.detail.descriptionEmpty', 'No description provided.')}