@open-mercato/core 0.6.4-develop.4236.1.9fa6806b34 → 0.6.4-develop.4239.1.4a264a5828

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/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>
     )

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

@@ -16,6 +16,7 @@ import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
 import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
+import { RecordNotFoundState, ErrorMessage } from '@open-mercato/ui/backend/detail'
 
 type UserDetail = {
   id: string
@@ -147,6 +148,7 @@ export default function CustomerUserDetailPage({ params }: { params?: { id?: str
   const [data, setData] = React.useState<UserDetail | null>(null)
   const [isLoading, setIsLoading] = React.useState(true)
   const [error, setError] = React.useState<string | null>(null)
+  const [isNotFound, setIsNotFound] = React.useState(false)
   const [isSaving, setIsSaving] = React.useState(false)
   const [editActive, setEditActive] = React.useState<boolean | null>(null)
   const [editDisplayName, setEditDisplayName] = React.useState('')
@@ -186,7 +188,7 @@ export default function CustomerUserDetailPage({ params }: { params?: { id?: str
 
   React.useEffect(() => {
     if (!id) {
-      setError(t('customer_accounts.admin.detail.error.notFound', 'User not found'))
+      setIsNotFound(true)
       setIsLoading(false)
       return
     }
@@ -194,6 +196,7 @@ export default function CustomerUserDetailPage({ params }: { params?: { id?: str
     async function load() {
       setIsLoading(true)
       setError(null)
+      setIsNotFound(false)
       try {
         const payload = await readApiResultOrThrow<UserDetail>(
           `/api/customer_accounts/admin/users/${encodeURIComponent(id!)}`,
@@ -209,8 +212,12 @@ export default function CustomerUserDetailPage({ params }: { params?: { id?: str
         setEditCustomerEntityId(payload.customerEntityId)
       } catch (err) {
         if (cancelled) return
-        const message = err instanceof Error ? err.message : t('customer_accounts.admin.detail.error.load', 'Failed to load user')
-        setError(message)
+        if ((err as { status?: number }).status === 404) {
+          setIsNotFound(true)
+        } else {
+          const message = err instanceof Error ? err.message : t('customer_accounts.admin.detail.error.load', 'Failed to load user')
+          setError(message)
+        }
       } finally {
         if (!cancelled) setIsLoading(false)
       }
@@ -463,18 +470,34 @@ export default function CustomerUserDetailPage({ params }: { params?: { id?: str
     )
   }
 
+  if (isNotFound) {
+    return (
+      <Page>
+        <PageBody>
+          <RecordNotFoundState
+            label={t('customer_accounts.admin.detail.error.notFound', 'User not found')}
+            backHref="/backend/customer_accounts/users"
+            backLabel={t('customer_accounts.admin.detail.actions.backToList', 'Back to list')}
+          />
+        </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.detail.error.notFound', 'User not found')}</p>
-            <Button asChild variant="outline">
-              <Link href="/backend/customer_accounts/users">
-                {t('customer_accounts.admin.detail.actions.backToList', 'Back to list')}
-              </Link>
-            </Button>
-          </div>
+          <ErrorMessage
+            label={error ?? t('customer_accounts.admin.detail.error.notFound', 'User not found')}
+            action={
+              <Button asChild variant="outline" size="sm">
+                <Link href="/backend/customer_accounts/users">
+                  {t('customer_accounts.admin.detail.actions.backToList', 'Back to list')}
+                </Link>
+              </Button>
+            }
+          />
         </PageBody>
       </Page>
     )

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

@@ -20,6 +20,8 @@ import {
   NotesSection,
   type CommentSummary,
   type SectionAction,
+  RecordNotFoundState,
+  ErrorMessage,
 } from '@open-mercato/ui/backend/detail'
 import {
   TagsSection,
@@ -116,6 +118,7 @@ export default function CustomerPersonDetailPage({ params }: { params?: { id?: s
   const [data, setData] = React.useState<PersonOverview | null>(null)
   const [isLoading, setIsLoading] = React.useState(true)
   const [error, setError] = React.useState<string | null>(null)
+  const [isNotFound, setIsNotFound] = React.useState(false)
   const [activeTab, setActiveTab] = React.useState<SectionKey>(initialTab)
   const [sectionAction, setSectionAction] = React.useState<SectionAction | null>(null)
   const [isDeleting, setIsDeleting] = React.useState(false)
@@ -276,7 +279,7 @@ export default function CustomerPersonDetailPage({ params }: { params?: { id?: s
   const initialLoadDoneRef = React.useRef(false)
   const loadData = React.useCallback(async () => {
     if (!id) {
-      setError(t('customers.people.detail.error.notFound'))
+      setIsNotFound(true)
       setIsLoading(false)
       return
     }
@@ -284,6 +287,7 @@ export default function CustomerPersonDetailPage({ params }: { params?: { id?: s
       setIsLoading(true)
     }
     setError(null)
+    setIsNotFound(false)
     try {
       const payload = await readApiResultOrThrow<PersonOverview>(
         `/api/customers/people/${encodeURIComponent(id)}?include=todos`,
@@ -292,8 +296,12 @@ export default function CustomerPersonDetailPage({ params }: { params?: { id?: s
       )
       setData(payload as PersonOverview)
     } catch (err) {
-      const message = err instanceof Error ? err.message : t('customers.people.detail.error.load')
-      setError(message)
+      if ((err as { status?: number }).status === 404) {
+        setIsNotFound(true)
+      } else {
+        const message = err instanceof Error ? err.message : t('customers.people.detail.error.load')
+        setError(message)
+      }
       if (!initialLoadDoneRef.current) setData(null)
     } finally {
       setIsLoading(false)
@@ -469,18 +477,34 @@ export default function CustomerPersonDetailPage({ params }: { params?: { id?: s
       )
     }
   
+    if (isNotFound) {
+      return (
+        <Page>
+          <PageBody>
+            <RecordNotFoundState
+              label={t('customers.people.detail.error.notFound', 'Person not found.')}
+              backHref="/backend/customers/people"
+              backLabel={t('customers.people.detail.actions.backToList', 'Back to people')}
+            />
+          </PageBody>
+        </Page>
+      )
+    }
+
     if (error || !data || !personId) {
       return (
         <Page>
           <PageBody>
-            <div className="flex h-[50vh] flex-col items-center justify-center gap-2 text-muted-foreground">
-              <p>{error || t('customers.people.detail.error.notFound')}</p>
-              <Button asChild variant="outline">
-                <Link href="/backend/customers/people">
-                  {t('customers.people.detail.actions.backToList')}
-                </Link>
-              </Button>
-            </div>
+            <ErrorMessage
+              label={error ?? t('customers.people.detail.error.notFound', 'Person not found.')}
+              action={
+                <Button asChild variant="outline" size="sm">
+                  <Link href="/backend/customers/people">
+                    {t('customers.people.detail.actions.backToList', 'Back to people')}
+                  </Link>
+                </Button>
+              }
+            />
           </PageBody>
         </Page>
       )

package/src/modules/progress/acl.ts

@@ -8,21 +8,25 @@ export const features = [
     id: 'progress.create',
     title: 'Create progress jobs',
     module: 'progress',
+    dependsOn: ['progress.view'],
   },
   {
     id: 'progress.update',
     title: 'Update progress jobs',
     module: 'progress',
+    dependsOn: ['progress.view'],
   },
   {
     id: 'progress.cancel',
     title: 'Cancel progress jobs',
     module: 'progress',
+    dependsOn: ['progress.view'],
   },
   {
     id: 'progress.manage',
     title: 'Manage all progress jobs',
     module: 'progress',
+    dependsOn: ['progress.view'],
   },
 ]
 

package/src/modules/workflows/backend/events/[id]/page.tsx

@@ -11,6 +11,7 @@ import { Button } from '@open-mercato/ui/primitives/button'
 import { FormHeader } from '@open-mercato/ui/backend/forms'
 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 WorkflowEvent = {
   id: string
@@ -55,8 +56,13 @@ export default function WorkflowEventDetailPage() {
       const response = await apiFetch(`/api/workflows/events/${eventId}`)
 
       if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}))
-        throw new Error(t('workflows.events.messages.loadFailed'))
+        const httpErr = new Error(
+          response.status === 404
+            ? t('workflows.events.notFound', 'Event not found.')
+            : t('workflows.events.messages.loadFailed')
+        ) as Error & { status: number }
+        httpErr.status = response.status
+        throw httpErr
       }
       const result = await response.json()
       return result as WorkflowEvent
@@ -77,18 +83,34 @@ export default function WorkflowEventDetailPage() {
     )
   }
 
+  const isNotFound = !isLoading && (error as (Error & { status?: number }) | null)?.status === 404
+
+  if (isNotFound) {
+    return (
+      <Page>
+        <PageBody>
+          <RecordNotFoundState
+            label={t('workflows.events.notFound', 'Event not found.')}
+            backHref="/backend/events"
+            backLabel={t('workflows.events.backToList', 'Back to Events')}
+          />
+        </PageBody>
+      </Page>
+    )
+  }
+
   if (error || !event) {
     return (
       <Page>
         <PageBody>
-          <div className="flex h-[50vh] flex-col items-center justify-center gap-2 text-muted-foreground">
-            <p>{error ? t('workflows.events.messages.loadFailed') : t('workflows.events.notFound')}</p>
-            <Button asChild variant="outline">
-              <Link href="/backend/events">
-                {t('workflows.events.backToList')}
-              </Link>
-            </Button>
-          </div>
+          <ErrorMessage
+            label={(error as Error | null)?.message ?? t('workflows.events.messages.loadFailed')}
+            action={
+              <Button asChild variant="outline" size="sm">
+                <Link href="/backend/events">{t('workflows.events.backToList', 'Back to Events')}</Link>
+              </Button>
+            }
+          />
         </PageBody>
       </Page>
     )

package/src/modules/workflows/backend/instances/[id]/page.tsx

@@ -19,6 +19,7 @@ import { MobileInstanceOverview } from '../../../components/mobile/MobileInstanc
 import { useIsMobile } from '@open-mercato/ui/hooks/useIsMobile'
 import { definitionToGraph } from '../../../lib/graph-utils'
 import { Node } from '@xyflow/react'
+import { RecordNotFoundState, ErrorMessage } from '@open-mercato/ui/backend/detail'
 
 export default function WorkflowInstanceDetailPage({ params }: { params?: { id?: string } }) {
   const id = params?.id
@@ -32,7 +33,13 @@ export default function WorkflowInstanceDetailPage({ params }: { params?: { id?:
     queryFn: async () => {
       const response = await apiFetch(`/api/workflows/instances/${id}`)
       if (!response.ok) {
-        throw new Error(t('workflows.instances.notFound') || 'Instance not found')
+        const httpErr = new Error(
+          response.status === 404
+            ? t('workflows.instances.detail.notFound', 'Workflow instance not found.')
+            : t('workflows.instances.loadFailed', 'Failed to load workflow instance.')
+        ) as Error & { status: number }
+        httpErr.status = response.status
+        throw httpErr
       }
       const data = await response.json()
       return data.data as WorkflowInstance
@@ -368,18 +375,35 @@ export default function WorkflowInstanceDetailPage({ params }: { params?: { id?:
     )
   }
 
+  const isNotFound = !isLoading && (error as (Error & { status?: number }) | null)?.status === 404
+
+  if (isNotFound) {
+    return (
+      <Page>
+        <PageBody>
+          <RecordNotFoundState
+            label={t('workflows.instances.detail.notFound', 'Workflow instance not found.')}
+            backHref="/backend/instances"
+            backLabel={t('workflows.instances.actions.backToList', 'Back to instances')}
+          />
+        </PageBody>
+        {ConfirmDialogElement}
+      </Page>
+    )
+  }
+
   if (error || !instance) {
     return (
       <Page>
         <PageBody>
-          <div className="flex h-[50vh] flex-col items-center justify-center gap-2 text-muted-foreground">
-            <p>{error ? t('workflows.instances.loadFailed') : t('workflows.instances.detail.notFound') || 'Workflow instance not found.'}</p>
-            <Button asChild variant="outline">
-              <Link href="/backend/instances">
-                {t('workflows.instances.actions.backToList') || 'Back to instances'}
-              </Link>
-            </Button>
-          </div>
+          <ErrorMessage
+            label={(error as Error | null)?.message ?? t('workflows.instances.loadFailed', 'Failed to load workflow instance.')}
+            action={
+              <Button asChild variant="outline" size="sm">
+                <Link href="/backend/instances">{t('workflows.instances.actions.backToList', 'Back to instances')}</Link>
+              </Button>
+            }
+          />
         </PageBody>
         {ConfirmDialogElement}
       </Page>

package/src/modules/workflows/backend/tasks/[id]/page.tsx

@@ -25,6 +25,7 @@ import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { MobileTaskForm } from '../../../components/mobile/MobileTaskForm'
 import { useIsMobile } from '@open-mercato/ui/hooks/useIsMobile'
 import type { UserTaskResponse, UserTaskStatus } from '../../../data/types'
+import { RecordNotFoundState, ErrorMessage } from '@open-mercato/ui/backend/detail'
 
 export default function UserTaskDetailPage({ params }: { params: { id: string } }) {
   const router = useRouter()
@@ -44,12 +45,16 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
       const result = await apiCall<{ data: UserTaskResponse }>(
         `/api/workflows/tasks/${params.id}`
       )
-
       if (!result.ok) {
-        throw new Error('Failed to fetch task')
+        const httpErr = new Error(
+          result.status === 404
+            ? t('workflows.tasks.detail.notFound', 'Task not found')
+            : t('workflows.tasks.detail.loadFailed', 'Failed to load task')
+        ) as Error & { status: number }
+        httpErr.status = result.status
+        throw httpErr
       }
-
-      return result.result?.data || null
+      return result.result?.data ?? null
     },
   })
 
@@ -347,16 +352,34 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
     )
   }
 
+  const isNotFound = !isLoading && (error as (Error & { status?: number }) | null)?.status === 404
+
+  if (isNotFound) {
+    return (
+      <Page>
+        <PageBody>
+          <RecordNotFoundState
+            label={t('workflows.tasks.detail.notFound', 'Task not found')}
+            backHref="/backend/tasks"
+            backLabel={t('workflows.tasks.detail.backToList', 'Back to Tasks')}
+          />
+        </PageBody>
+      </Page>
+    )
+  }
+
   if (error || !task) {
     return (
       <Page>
         <PageBody>
-          <div className="p-8 text-center">
-            <p className="text-status-error-text">{t('workflows.tasks.detail.notFound')}</p>
-            <Button onClick={() => router.push('/backend/tasks')} className="mt-4">
-              {t('workflows.tasks.detail.backToList')}
-            </Button>
-          </div>
+          <ErrorMessage
+            label={(error as Error | null)?.message ?? t('workflows.tasks.detail.loadFailed', 'Failed to load task')}
+            action={
+              <Button asChild variant="outline" size="sm">
+                <Link href="/backend/tasks">{t('workflows.tasks.detail.backToList', 'Back to Tasks')}</Link>
+              </Button>
+            }
+          />
         </PageBody>
       </Page>
     )