@open-mercato/core 0.6.4-develop.4236.1.9fa6806b34 → 0.6.4-develop.4254.1.7a123d970c

package/src/modules/business_rules/backend/logs/[id]/page.tsx

@@ -10,6 +10,7 @@ import { Page, PageBody } from '@open-mercato/ui/backend/Page'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { JsonDisplay } from '@open-mercato/ui/backend/JsonDisplay'
+import { RecordNotFoundState, ErrorMessage } from '@open-mercato/ui/backend/detail'
 
 type RuleExecutionLog = {
   id: string
@@ -54,7 +55,13 @@ export default function ExecutionLogDetailPage() {
     queryFn: async () => {
       const response = await apiFetch(`/api/business_rules/logs/${logId}`)
       if (!response.ok) {
-        throw new Error(t('business_rules.logs.errors.fetchFailed'))
+        const httpErr = new Error(
+          response.status === 404
+            ? t('business_rules.logs.errors.notFound', 'Execution log not found.')
+            : t('business_rules.logs.errors.fetchFailed')
+        ) as Error & { status: number }
+        httpErr.status = response.status
+        throw httpErr
       }
       const result = await response.json()
       return result as RuleExecutionLog
@@ -75,16 +82,34 @@ export default function ExecutionLogDetailPage() {
     )
   }
 
+  const isNotFound = !isLoading && (error as (Error & { status?: number }) | null)?.status === 404
+
+  if (isNotFound) {
+    return (
+      <Page>
+        <PageBody>
+          <RecordNotFoundState
+            label={t('business_rules.logs.errors.notFound', 'Execution log not found.')}
+            backHref="/backend/logs"
+            backLabel={t('business_rules.logs.backToList', 'Back to logs')}
+          />
+        </PageBody>
+      </Page>
+    )
+  }
+
   if (error || !log) {
     return (
       <Page>
         <PageBody>
-          <div className="flex h-[50vh] flex-col items-center justify-center gap-2 text-muted-foreground">
-            <p>{error ? t('business_rules.logs.errors.loadFailed') : t('business_rules.logs.errors.notFound')}</p>
-            <Button asChild variant="outline">
-              <Link href="/backend/logs">{t('business_rules.logs.backToList')}</Link>
-            </Button>
-          </div>
+          <ErrorMessage
+            label={(error as Error | null)?.message ?? t('business_rules.logs.errors.loadFailed')}
+            action={
+              <Button asChild variant="outline" size="sm">
+                <Link href="/backend/logs">{t('business_rules.logs.backToList', 'Back to logs')}</Link>
+              </Button>
+            }
+          />
         </PageBody>
       </Page>
     )

package/src/modules/business_rules/cli.ts

@@ -2,6 +2,10 @@ import type { ModuleCli } from '@open-mercato/shared/modules/registry'
 import { createRequestContainer } from '@open-mercato/shared/lib/di/container'
 import type { EntityManager } from '@mikro-orm/postgresql'
 import { BusinessRule } from './data/entities'
+import {
+  invalidateBusinessRuleDiscoveryCache,
+  resolveBusinessRuleDiscoveryCache,
+} from './lib/rule-engine'
 import * as fs from 'fs'
 import * as path from 'path'
 
@@ -39,6 +43,7 @@ const seedGuardRules: ModuleCli = {
     try {
       const { resolve } = await createRequestContainer()
       const em = resolve<EntityManager>('em')
+      const cache = resolveBusinessRuleDiscoveryCache(resolve)
 
       // Read guard rules from workflows examples
       const rulesPath = path.join(__dirname, '../workflows/examples', 'guard-rules-example.json')
@@ -70,6 +75,7 @@ const seedGuardRules: ModuleCli = {
         })
 
         await em.persist(rule).flush()
+        await invalidateBusinessRuleDiscoveryCache(cache, tenantId, organizationId)
         console.log(`  ✓ Seeded guard rule: ${rule.ruleName}`)
         seededCount++
       }

package/src/modules/business_rules/lib/rule-engine.ts

@@ -1,4 +1,5 @@
 import type { EntityManager } from '@mikro-orm/core'
+import { runWithCacheTenant, type CacheStrategy } from '@open-mercato/cache'
 import type { EventBus } from '@open-mercato/events'
 import { BusinessRule, RuleExecutionLog, type RuleType } from '../data/entities'
 import * as ruleEvaluator from './rule-evaluator'
@@ -22,6 +23,7 @@ const EXECUTION_RESULT_FAILURE = 'FAILURE'
 const MAX_RULES_PER_EXECUTION = 100
 const MAX_SINGLE_RULE_TIMEOUT_MS = 30000  // 30 seconds
 const MAX_TOTAL_EXECUTION_TIMEOUT_MS = 60000  // 60 seconds
+const RULE_DISCOVERY_CACHE_TTL = 5 * 60 * 1000
 
 /**
  * Rule execution context
@@ -86,8 +88,138 @@ export interface RuleDiscoveryOptions {
   ruleType?: RuleType
 }
 
+type CachedRuleDiscovery = {
+  ruleIds: string[]
+}
+
+export type RuleDiscoveryCache = Pick<CacheStrategy, 'get' | 'set' | 'deleteByTags'>
+
+export type RuleDiscoveryCacheOptions = {
+  cache?: RuleDiscoveryCache | null
+}
+
+function normalizeCachePart(value: string | null | undefined): string {
+  return encodeURIComponent(value?.trim() || '*')
+}
+
+function getRuleDiscoveryCacheKey(options: RuleDiscoveryOptions): string {
+  return [
+    normalizeCachePart(options.tenantId),
+    normalizeCachePart(options.organizationId),
+    normalizeCachePart(options.entityType),
+    normalizeCachePart(options.eventType),
+    normalizeCachePart(options.ruleType),
+  ].join(':')
+}
+
+function isCachedRuleDiscovery(value: unknown): value is CachedRuleDiscovery {
+  if (!value || typeof value !== 'object') return false
+  const ruleIds = (value as CachedRuleDiscovery).ruleIds
+  return Array.isArray(ruleIds) && ruleIds.every((entry) => typeof entry === 'string')
+}
+
+export function isRuleDiscoveryCache(value: unknown): value is RuleDiscoveryCache {
+  if (!value || typeof value !== 'object') return false
+  const candidate = value as Partial<RuleDiscoveryCache>
+  return (
+    typeof candidate.get === 'function'
+    && typeof candidate.set === 'function'
+    && typeof candidate.deleteByTags === 'function'
+  )
+}
+
+export function resolveBusinessRuleDiscoveryCache(resolve: (token: string) => unknown): RuleDiscoveryCache | null {
+  try {
+    const cache = resolve('cache')
+    return isRuleDiscoveryCache(cache) ? cache : null
+  } catch {
+    return null
+  }
+}
+
+function getRuleDiscoveryCacheTags(options: Pick<RuleDiscoveryOptions, 'organizationId'>): string[] {
+  return [
+    'business_rules:discovery',
+    `business_rules:discovery:organization:${options.organizationId}`,
+  ]
+}
+
+async function getCachedRuleDiscovery(
+  cache: RuleDiscoveryCache | null | undefined,
+  options: RuleDiscoveryOptions,
+): Promise<CachedRuleDiscovery | null> {
+  if (!cache) return null
+
+  let value: unknown
+  try {
+    value = await runWithCacheTenant(options.tenantId, () =>
+      cache.get(getRuleDiscoveryCacheKey(options))
+    )
+  } catch (error) {
+    console.warn('[business_rules] Failed to read rule discovery cache:', error)
+    return null
+  }
+
+  return isCachedRuleDiscovery(value) ? value : null
+}
+
+async function cacheRuleDiscovery(
+  cache: RuleDiscoveryCache | null | undefined,
+  options: RuleDiscoveryOptions,
+  rules: BusinessRule[],
+): Promise<void> {
+  if (!cache) return
+
+  const ruleIds = rules
+    .map((rule) => rule.id)
+    .filter((id): id is string => typeof id === 'string' && id.length > 0)
+
+  if (ruleIds.length !== rules.length) return
+
+  try {
+    await runWithCacheTenant(options.tenantId, () =>
+      cache.set(
+        getRuleDiscoveryCacheKey(options),
+        { ruleIds },
+        {
+          ttl: RULE_DISCOVERY_CACHE_TTL,
+          tags: getRuleDiscoveryCacheTags(options),
+        },
+      )
+    )
+  } catch (error) {
+    console.warn('[business_rules] Failed to write rule discovery cache:', error)
+  }
+}
+
+export async function invalidateBusinessRuleDiscoveryCache(
+  cache: RuleDiscoveryCache | null | undefined,
+  tenantId?: string | null,
+  organizationId?: string | null,
+): Promise<void> {
+  if (!cache) return
+
+  const normalizedTenantId = tenantId?.trim()
+  const normalizedOrganizationId = organizationId?.trim()
+
+  if (!normalizedTenantId) {
+    return
+  }
+
+  const tags = normalizedOrganizationId
+    ? [`business_rules:discovery:organization:${normalizedOrganizationId}`]
+    : ['business_rules:discovery']
+
+  try {
+    await runWithCacheTenant(normalizedTenantId, () => cache.deleteByTags(tags))
+  } catch (error) {
+    console.warn('[business_rules] Failed to invalidate rule discovery cache:', error)
+  }
+}
+
 export type RuleEngineExecutionOptions = {
   eventBus?: Pick<EventBus, 'emitEvent'> | null
+  cache?: RuleDiscoveryCache | null
 }
 
 type RuleExecutionFailedPayload = {
@@ -213,7 +345,7 @@ export async function executeRules(
       eventType: context.eventType,
       tenantId: context.tenantId,
       organizationId: context.organizationId,
-    })
+    }, { cache: options.cache })
 
     // Check rule count limit
     if (rules.length > MAX_RULES_PER_EXECUTION) {
@@ -468,14 +600,14 @@ export async function executeSingleRule(
  */
 export async function findApplicableRules(
   em: EntityManager,
-  options: RuleDiscoveryOptions
+  options: RuleDiscoveryOptions,
+  cacheOptions: RuleDiscoveryCacheOptions = {},
 ): Promise<BusinessRule[]> {
   // Validate input
   ruleDiscoveryOptionsSchema.parse(options)
 
   const { entityType, eventType, tenantId, organizationId, ruleType } = options
-
-  const where: Partial<BusinessRule> = {
+  const baseWhere: Record<string, unknown> = {
     entityType,
     tenantId,
     organizationId,
@@ -484,16 +616,38 @@ export async function findApplicableRules(
   }
 
   if (eventType) {
-    where.eventType = eventType
+    baseWhere.eventType = eventType
   }
 
   if (ruleType) {
-    where.ruleType = ruleType
+    baseWhere.ruleType = ruleType
   }
 
-  const rules = await em.find(BusinessRule, where, {
-    orderBy: { priority: 'DESC', ruleId: 'ASC' },
-  })
+  const cached = await getCachedRuleDiscovery(cacheOptions.cache, options)
+  let rules: BusinessRule[]
+
+  if (cached) {
+    if (cached.ruleIds.length === 0) {
+      rules = []
+    } else {
+      const cachedRules = await em.find(BusinessRule, {
+        ...baseWhere,
+        id: { $in: cached.ruleIds },
+      }, {
+        orderBy: { priority: 'DESC', ruleId: 'ASC' },
+      } as any)
+      const byId = new Map(cachedRules.map((rule) => [rule.id, rule]))
+      rules = cached.ruleIds
+        .map((id) => byId.get(id))
+        .filter((rule): rule is BusinessRule => Boolean(rule))
+    }
+  } else {
+    rules = await em.find(BusinessRule, baseWhere as Partial<BusinessRule>, {
+      orderBy: { priority: 'DESC', ruleId: 'ASC' },
+    })
+
+    await cacheRuleDiscovery(cacheOptions.cache, options, rules)
+  }
 
   // Filter by effective date range
   const now = new Date()

package/src/modules/business_rules/subscribers/crud-rule-trigger.ts

@@ -11,7 +11,7 @@
  */
 
 import type { EntityManager } from '@mikro-orm/core'
-import { executeRules } from '../lib/rule-engine'
+import { executeRules, resolveBusinessRuleDiscoveryCache } from '../lib/rule-engine'
 
 export const metadata = {
   event: '*',
@@ -64,6 +64,7 @@ export default async function handle(
   if (!tenantId || !organizationId) return
 
   const em = ctx.resolve<EntityManager>('em')
+  const cache = resolveBusinessRuleDiscoveryCache(ctx.resolve)
 
   try {
     await executeRules(em, {
@@ -72,7 +73,7 @@ export default async function handle(
       data,
       tenantId,
       organizationId,
-    })
+    }, { cache })
   } catch (error) {
     console.error(`[business_rules] Rule execution failed for event ${eventName}:`, error)
   }

package/src/modules/catalog/api/offers/route.ts

@@ -94,11 +94,25 @@ export async function decorateOffersWithDetails(
     .filter((value): value is string => !!value)
   if (!offerIds.length && !productIds.length) return
   const em = ctx.container.resolve('em') as EntityManager
+  const scopeTenantId = ctx.auth?.tenantId ?? null
+  if (!scopeTenantId) {
+    throw new CrudHttpError(403, '[internal] Missing tenant scope for offer decoration')
+  }
+  const scopeOrgIds =
+    Array.isArray(ctx.organizationIds) && ctx.organizationIds.length
+      ? Array.from(new Set(ctx.organizationIds))
+      : (ctx.selectedOrganizationId ?? ctx.auth?.orgId ?? null)
+        ? [(ctx.selectedOrganizationId ?? ctx.auth?.orgId) as string]
+        : []
+  const scopeWhere: Record<string, unknown> = { tenantId: scopeTenantId }
+  if (scopeOrgIds.length === 1) scopeWhere.organizationId = scopeOrgIds[0]
+  else if (scopeOrgIds.length > 1) scopeWhere.organizationId = { $in: scopeOrgIds }
+  const scope = { tenantId: scopeTenantId, organizationId: scopeOrgIds.length === 1 ? scopeOrgIds[0] : null }
   const [products, prices, defaultVariants] = await Promise.all([
     productIds.length
       ? em.find(
           CatalogProduct,
-          { id: { $in: productIds } },
+          { id: { $in: productIds }, ...scopeWhere },
           {
             fields: ['id', 'title', 'description', 'defaultMediaId', 'defaultMediaUrl', 'sku'],
           },
@@ -108,15 +122,15 @@ export async function decorateOffersWithDetails(
       ? findWithDecryption(
           em,
           CatalogProductPrice,
-          { offer: { $in: offerIds } },
+          { offer: { $in: offerIds }, ...scopeWhere },
           { populate: ['priceKind'] },
-          { tenantId: ctx.auth?.tenantId ?? null, organizationId: ctx.auth?.orgId ?? null },
+          scope,
         )
       : [],
     productIds.length
       ? em.find(
           CatalogProductVariant,
-          { product: { $in: productIds }, isDefault: true },
+          { product: { $in: productIds }, isDefault: true, ...scopeWhere },
           { fields: ['id', 'product'] },
         )
       : [],
@@ -227,6 +241,7 @@ export async function decorateOffersWithDetails(
         CatalogProductPrice,
         {
           offer: null,
+          ...scopeWhere,
           $and: [
             { $or: fallbackTargets },
             channelFilterValues.includes(null)
@@ -240,7 +255,7 @@ export async function decorateOffersWithDetails(
           ],
         },
         { populate: ['priceKind'] },
-        { tenantId: ctx.auth?.tenantId ?? null, organizationId: ctx.auth?.orgId ?? null },
+        scope,
       )
     : []
   fallbackEntries.forEach((entry) => {

package/src/modules/catalog/api/products/route.ts

@@ -628,9 +628,13 @@ async function decorateProductsAfterList(
       "catalogPricingService",
     );
 
+    const pricingEntries: Array<{ rows: PriceRow[]; context: PricingContext } | null> = [];
     for (const item of items) {
       const id = typeof item.id === "string" ? item.id : null;
-      if (!id) continue;
+      if (!id) {
+        pricingEntries.push(null);
+        continue;
+      }
       const offerEntries = offersByProduct.get(id) ?? [];
       item.offers = offerEntries;
       const channelIds = Array.from(
@@ -668,10 +672,25 @@ async function decorateProductsAfterList(
         pricingContext.channelId || channelIds.length !== 1
           ? pricingContext
           : { ...pricingContext, channelId: channelIds[0] };
-      const best = await pricingService.resolvePrice(priceCandidates, {
-        ...channelScopedContext,
-        quantity: normalizedQuantityForPricing,
+      pricingEntries.push({
+        rows: priceCandidates,
+        context: { ...channelScopedContext, quantity: normalizedQuantityForPricing },
       });
+    }
+
+    const resolveInputs: Array<{ rows: PriceRow[]; context: PricingContext }> = [];
+    const resolveIndices: number[] = [];
+    for (let i = 0; i < pricingEntries.length; i++) {
+      if (pricingEntries[i] !== null) {
+        resolveInputs.push(pricingEntries[i]!);
+        resolveIndices.push(i);
+      }
+    }
+    const priceResults = await pricingService.resolvePriceMany(resolveInputs);
+
+    for (let i = 0; i < resolveIndices.length; i++) {
+      const item = items[resolveIndices[i]];
+      const best = priceResults[i];
       if (best) {
         item.pricing = {
           kind: resolvePriceKindCode(best),

package/src/modules/catalog/lib/pricing.ts

@@ -180,3 +180,12 @@ export async function resolveCatalogPrice(
 
   return resolved ?? null
 }
+
+export async function resolveCatalogPriceBatch(
+  entries: Array<{ rows: PriceRow[]; context: PricingContext }>,
+  options?: { eventBus?: EventBus | null }
+): Promise<Array<PriceRow | null>> {
+  return Promise.all(
+    entries.map(({ rows, context }) => resolveCatalogPrice(rows, context, options))
+  )
+}

package/src/modules/catalog/services/catalogPricingService.ts

@@ -1,12 +1,14 @@
 import type { EventBus } from '@open-mercato/events'
 import {
   resolveCatalogPrice,
+  resolveCatalogPriceBatch,
   type PriceRow,
   type PricingContext,
 } from '../lib/pricing'
 
 export interface CatalogPricingService {
   resolvePrice(rows: PriceRow[], context: PricingContext): Promise<PriceRow | null>
+  resolvePriceMany(entries: Array<{ rows: PriceRow[]; context: PricingContext }>): Promise<Array<PriceRow | null>>
 }
 
 export class DefaultCatalogPricingService implements CatalogPricingService {
@@ -15,6 +17,10 @@ export class DefaultCatalogPricingService implements CatalogPricingService {
   async resolvePrice(rows: PriceRow[], context: PricingContext): Promise<PriceRow | null> {
     return resolveCatalogPrice(rows, context, { eventBus: this.eventBus })
   }
+
+  async resolvePriceMany(entries: Array<{ rows: PriceRow[]; context: PricingContext }>): Promise<Array<PriceRow | null>> {
+    return resolveCatalogPriceBatch(entries, { eventBus: this.eventBus })
+  }
 }
 
 export type { PriceRow, PricingContext }

package/src/modules/currencies/backend/currencies/[id]/page.tsx

@@ -12,6 +12,7 @@ import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { SendObjectMessageDialog } from '@open-mercato/ui/backend/messages'
 import { DataLoader } from '@open-mercato/ui/primitives/DataLoader'
 import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
+import { RecordNotFoundState, ErrorMessage } from '@open-mercato/ui/backend/detail'
 
 type CurrencyData = {
   id: string
@@ -35,6 +36,7 @@ export default function EditCurrencyPage({ params }: { params?: { id?: string }
   const [currency, setCurrency] = React.useState<CurrencyData | null>(null)
   const [loading, setLoading] = React.useState(true)
   const [error, setError] = React.useState<string | null>(null)
+  const [isNotFound, setIsNotFound] = React.useState(false)
 
   React.useEffect(() => {
     async function loadCurrency() {
@@ -42,8 +44,10 @@ export default function EditCurrencyPage({ params }: { params?: { id?: string }
         const response = await apiCall<{ items: CurrencyData[] }>(`/api/currencies/currencies?id=${params?.id}`)
         if (response.ok && response.result && response.result.items.length > 0) {
           setCurrency(response.result.items[0])
+        } else if (!response.ok) {
+          setError(t('currencies.form.errors.load'))
         } else {
-          setError(t('currencies.form.errors.notFound'))
+          setIsNotFound(true)
         }
       } catch (err) {
         setError(t('currencies.form.errors.load'))
@@ -163,11 +167,26 @@ export default function EditCurrencyPage({ params }: { params?: { id?: string }
     )
   }
 
+  if (isNotFound) {
+    return (
+      <Page>
+        <PageBody>
+          <RecordNotFoundState
+            label={t('currencies.form.errors.notFound', 'Currency not found.')}
+            backHref="/backend/currencies"
+            backLabel={t('currencies.form.actions.backToList', 'Back to currencies')}
+          />
+        </PageBody>
+        {ConfirmDialogElement}
+      </Page>
+    )
+  }
+
   if (error || !currency) {
     return (
       <Page>
         <PageBody>
-          <div className="text-destructive">{error || t('currencies.form.errors.notFound')}</div>
+          <ErrorMessage label={error ?? t('currencies.form.errors.notFound', 'Currency not found.')} />
         </PageBody>
         {ConfirmDialogElement}
       </Page>

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

@@ -41,6 +41,7 @@
   "currencies.flash.updated": "Währung erfolgreich aktualisiert",
   "currencies.form.action.create": "Währung erstellen",
   "currencies.form.action.save": "Änderungen speichern",
+  "currencies.form.actions.backToList": "Zurück zu Währungen",
   "currencies.form.errors.codeFormat": "Währungscode muss genau 3 Großbuchstaben sein (z.B. USD)",
   "currencies.form.errors.delete": "Währung konnte nicht gelöscht werden",
   "currencies.form.errors.load": "Währung konnte nicht geladen werden",

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

@@ -41,6 +41,7 @@
   "currencies.flash.updated": "Currency updated successfully",
   "currencies.form.action.create": "Create Currency",
   "currencies.form.action.save": "Save Changes",
+  "currencies.form.actions.backToList": "Back to currencies",
   "currencies.form.errors.codeFormat": "Currency code must be exactly 3 uppercase letters (e.g., USD)",
   "currencies.form.errors.delete": "Failed to delete currency",
   "currencies.form.errors.load": "Failed to load currency",

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

@@ -41,6 +41,7 @@
   "currencies.flash.updated": "Moneda actualizada correctamente",
   "currencies.form.action.create": "Crear Moneda",
   "currencies.form.action.save": "Guardar Cambios",
+  "currencies.form.actions.backToList": "Volver a divisas",
   "currencies.form.errors.codeFormat": "El código de moneda debe ser exactamente 3 letras mayúsculas (ej. USD)",
   "currencies.form.errors.delete": "Error al eliminar moneda",
   "currencies.form.errors.load": "Error al cargar moneda",

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

@@ -41,6 +41,7 @@
   "currencies.flash.updated": "Waluta zaktualizowana pomyślnie",
   "currencies.form.action.create": "Utwórz Walutę",
   "currencies.form.action.save": "Zapisz Zmiany",
+  "currencies.form.actions.backToList": "Wróć do walut",
   "currencies.form.errors.codeFormat": "Kod waluty musi składać się z dokładnie 3 wielkich liter (np. USD)",
   "currencies.form.errors.delete": "Nie udało się usunąć waluty",
   "currencies.form.errors.load": "Nie udało się załadować waluty",

package/src/modules/customer_accounts/backend/customer_accounts/roles/[id]/page.tsx

@@ -11,6 +11,7 @@ import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { apiCall, 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'
+import { RecordNotFoundState, ErrorMessage } from '@open-mercato/ui/backend/detail'
 
 type RoleDetail = {
   id: string
@@ -146,10 +147,11 @@ export default function CustomerRoleDetailPage({ params }: { params?: { id?: str
   const [data, setData] = React.useState<RoleDetail | null>(null)
   const [isLoading, setIsLoading] = React.useState(true)
   const [error, setError] = React.useState<string | null>(null)
+  const [isNotFound, setIsNotFound] = React.useState(false)
 
   React.useEffect(() => {
     if (!id) {
-      setError(t('customer_accounts.admin.roleDetail.error.notFound', 'Role not found'))
+      setIsNotFound(true)
       setIsLoading(false)
       return
     }
@@ -157,6 +159,7 @@ export default function CustomerRoleDetailPage({ params }: { params?: { id?: str
     async function load() {
       setIsLoading(true)
       setError(null)
+      setIsNotFound(false)
       try {
         const payload = await readApiResultOrThrow<RoleDetail>(
           `/api/customer_accounts/admin/roles/${encodeURIComponent(id!)}`,
@@ -167,8 +170,12 @@ export default function CustomerRoleDetailPage({ params }: { params?: { id?: str
         setData(payload)
       } catch (err) {
         if (cancelled) return
-        const message = err instanceof Error ? err.message : t('customer_accounts.admin.roleDetail.error.load', 'Failed to load role')
-        setError(message)
+        if ((err as { status?: number }).status === 404) {
+          setIsNotFound(true)
+        } else {
+          const message = err instanceof Error ? err.message : t('customer_accounts.admin.roleDetail.error.load', 'Failed to load role')
+          setError(message)
+        }
       } finally {
         if (!cancelled) setIsLoading(false)
       }
@@ -300,18 +307,34 @@ export default function CustomerRoleDetailPage({ params }: { params?: { id?: str
     )
   }
 
+  if (isNotFound) {
+    return (
+      <Page>
+        <PageBody>
+          <RecordNotFoundState
+            label={t('customer_accounts.admin.roleDetail.error.notFound', 'Role not found')}
+            backHref="/backend/customer_accounts/roles"
+            backLabel={t('customer_accounts.admin.roleDetail.actions.backToList', 'Back to roles')}
+          />
+        </PageBody>
+      </Page>
+    )
+  }
+
   if (error || !data) {
     return (
       <Page>
         <PageBody>
-          <div className="flex h-[50vh] flex-col items-center justify-center gap-2 text-muted-foreground">
-            <p>{error || t('customer_accounts.admin.roleDetail.error.notFound', 'Role not found')}</p>
-            <Button asChild variant="outline">
-              <Link href="/backend/customer_accounts/roles">
-                {t('customer_accounts.admin.roleDetail.actions.backToList', 'Back to roles')}
-              </Link>
-            </Button>
-          </div>
+          <ErrorMessage
+            label={error ?? t('customer_accounts.admin.roleDetail.error.notFound', 'Role not found')}
+            action={
+              <Button asChild variant="outline" size="sm">
+                <Link href="/backend/customer_accounts/roles">
+                  {t('customer_accounts.admin.roleDetail.actions.backToList', 'Back to roles')}
+                </Link>
+              </Button>
+            }
+          />
         </PageBody>
       </Page>
     )