@open-mercato/core 0.6.8-develop.6998.1.d2bc46c56c → 0.6.8-develop.7001.1.03608ab252

package/src/modules/warranty_claims/backend/page.tsx

@@ -0,0 +1,1302 @@
+"use client"
+
+import * as React from 'react'
+import Link from 'next/link'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import type { SortingState } from '@tanstack/react-table'
+import type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'
+import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import { DataTable, type BulkAction, type DataTableExportFormat } from '@open-mercato/ui/backend/DataTable'
+import { RowActions } from '@open-mercato/ui/backend/RowActions'
+import type { FilterDef, FilterValues } from '@open-mercato/ui/backend/FilterBar'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
+import { CrudForm, type CrudField, type CrudFieldOption } from '@open-mercato/ui/backend/CrudForm'
+import { ListEmptyState } from '@open-mercato/ui/backend/filters/ListEmptyState'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
+import { useAppEvent } from '@open-mercato/ui/backend/injection/useAppEvent'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
+import { apiCall, readApiResultOrThrow, withScopedApiRequestHeaders } from '@open-mercato/ui/backend/utils/apiCall'
+import { buildCrudExportUrl } from '@open-mercato/ui/backend/utils/crud'
+import { buildOptimisticLockHeader } from '@open-mercato/ui/backend/utils/optimisticLock'
+import { surfaceRecordConflict } from '@open-mercato/ui/backend/conflicts'
+import { useCurrentUserId } from '@open-mercato/ui/backend/utils/useCurrentUserId'
+import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
+import { emitProgressUpdate } from '@open-mercato/shared/lib/frontend/progressEvents'
+import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
+import { formatDateTime, formatRelativeTime } from '@open-mercato/shared/lib/time'
+import { Plus } from 'lucide-react'
+import {
+  fetchAssignableStaffMembersPage,
+  type AssignableStaffMember,
+} from '@open-mercato/core/modules/customers/lib/assignableStaff'
+import {
+  ClaimPriorityBadge,
+  ClaimStatusBadge,
+  CLAIM_STATUS_BADGE_VARIANTS,
+  type ClaimPriority,
+  type ClaimStatus,
+} from './components/ClaimStatusBadge'
+import { ClaimSlaIndicator } from './components/claimSla'
+import { ClaimsKpiStrip, type WarrantyClaimsStats } from './components/ClaimsKpiStrip'
+import { WarrantyWorkspace } from './components/WarrantyWorkspace'
+import { useUserDisplayNames } from './components/useUserDisplayNames'
+import { extensionPoints } from '../extension-points'
+import { appendSkippedBulkCount } from '../lib/bulkFeedback'
+
+type ClaimType = 'warranty' | 'return' | 'core_return' | 'vendor_recovery'
+type ClaimChannel = 'staff' | 'portal' | 'api'
+
+type ClaimRow = {
+  id: string
+  claimNumber: string | null
+  claimType: ClaimType | string | null
+  channel: ClaimChannel | string | null
+  status: ClaimStatus | string | null
+  priority: ClaimPriority | string | null
+  customerName: string | null
+  orderId: string | null
+  orderNumber: string | null
+  awaitingStaffReply: boolean
+  slaDueAt: string | null
+  slaPausedAt: string | null
+  submittedAt: string | null
+  assigneeUserId: string | null
+  updatedAt: string | null
+}
+
+type ClaimsResponse = {
+  items?: ClaimRow[]
+  total?: number
+  totalPages?: number
+  page?: number
+  pageSize?: number
+  error?: string
+}
+
+type AssignFormValues = {
+  assigneeUserId?: string | null
+}
+
+type ClaimsStats = WarrantyClaimsStats & { slaAtRisk?: number }
+
+type ClaimsStatsResponse = {
+  ok?: boolean
+  result?: ClaimsStats
+  error?: string
+}
+
+type ClaimsTabCounts = Partial<Record<'all' | 'mine' | 'attention' | 'review' | 'goods' | 'resolved', number>>
+
+type SearchParamsLike = {
+  toString: () => string
+}
+
+type RestoredClaimListState = {
+  page: number
+  search: string
+  filterValues: FilterValues
+  sorting: SortingState
+}
+
+type AssignDialogState = {
+  mode: 'single' | 'bulk'
+  rows: ClaimRow[]
+  resolve?: (result: false | { ok: true; affectedCount?: number }) => void
+} | null
+
+type BulkFailure = {
+  message: string
+}
+
+const CLAIM_STATUSES = Object.keys(CLAIM_STATUS_BADGE_VARIANTS) as ClaimStatus[]
+const CLAIM_TYPES: ClaimType[] = ['warranty', 'return', 'core_return', 'vendor_recovery']
+const CLAIM_CHANNELS = ['staff', 'portal', 'api'] as const
+const CLAIM_PRIORITIES: ClaimPriority[] = ['low', 'normal', 'high', 'urgent']
+const CANCEL_BLOCKED_STATUSES = new Set<string>(['received', 'inspecting', 'resolved', 'closed', 'cancelled'])
+const PAGE_SIZE = 20
+const UNASSIGNED_ASSIGNEE_VALUE = '__unassigned__'
+const DEFAULT_SORTING: SortingState = [{ id: 'slaDueAt', desc: false }]
+const SORTABLE_FIELDS = new Set(['slaDueAt', 'createdAt', 'updatedAt'])
+const DATE_ONLY_PATTERN = /^\d{4}-\d{2}-\d{2}$/
+const GOODS_FLOW_STATUSES: ClaimStatus[] = ['approved', 'awaiting_return', 'received', 'inspecting']
+const RESOLVED_STATUSES: ClaimStatus[] = ['resolved', 'closed']
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+}
+
+function toStringOrNull(value: unknown): string | null {
+  return typeof value === 'string' && value.trim().length ? value : null
+}
+
+function normalizeClaimRow(value: unknown): ClaimRow | null {
+  if (!isRecord(value)) return null
+  const id = toStringOrNull(value.id)
+  if (!id) return null
+  return {
+    id,
+    claimNumber: toStringOrNull(value.claimNumber),
+    claimType: toStringOrNull(value.claimType),
+    channel: toStringOrNull(value.channel),
+    status: toStringOrNull(value.status),
+    priority: toStringOrNull(value.priority),
+    customerName: toStringOrNull(value.customerName),
+    orderId: toStringOrNull(value.orderId),
+    orderNumber: toStringOrNull(value.orderNumber),
+    awaitingStaffReply: value.awaitingStaffReply === true,
+    slaDueAt: toStringOrNull(value.slaDueAt),
+    slaPausedAt: toStringOrNull(value.slaPausedAt),
+    submittedAt: toStringOrNull(value.submittedAt),
+    assigneeUserId: toStringOrNull(value.assigneeUserId),
+    updatedAt: toStringOrNull(value.updatedAt),
+  }
+}
+
+function normalizeClaimChannel(value: string | null | undefined): ClaimChannel | null {
+  return value === 'staff' || value === 'portal' || value === 'api' ? value : null
+}
+
+function valueAsStringArray(value: unknown): string[] {
+  if (!Array.isArray(value)) return []
+  return value.filter((entry): entry is string => typeof entry === 'string' && entry.trim().length > 0)
+}
+
+function toDateOnlyOrNull(value: unknown): string | null {
+  const normalized = toStringOrNull(value)
+  return normalized && DATE_ONLY_PATTERN.test(normalized) ? normalized : null
+}
+
+function valueAsDateRange(value: unknown): { from: string | null; to: string | null } {
+  if (!isRecord(value)) return { from: null, to: null }
+  return { from: toDateOnlyOrNull(value.from), to: toDateOnlyOrNull(value.to) }
+}
+
+function defaultSortingState(): SortingState {
+  return DEFAULT_SORTING.map((entry) => ({ ...entry }))
+}
+
+function isOneOf<T extends string>(value: string | null, values: readonly T[]): value is T {
+  return value !== null && (values as readonly string[]).includes(value)
+}
+
+function parseClaimListUrlState(searchParams: SearchParamsLike): RestoredClaimListState {
+  const params = new URLSearchParams(searchParams.toString())
+  const parsedPage = Number(params.get('page') ?? '1')
+  const filterValues: FilterValues = {}
+  const statuses = (params.get('status') ?? '')
+    .split(',')
+    .map((status) => status.trim())
+    .filter((status): status is ClaimStatus => isOneOf(status, CLAIM_STATUSES))
+  if (statuses.length) filterValues.status = statuses
+  const claimType = params.get('claimType')
+  if (isOneOf(claimType, CLAIM_TYPES)) filterValues.claimType = claimType
+  const priority = params.get('priority')
+  if (isOneOf(priority, CLAIM_PRIORITIES)) filterValues.priority = priority
+  const channel = params.get('channel')
+  if (isOneOf(channel, CLAIM_CHANNELS)) filterValues.channel = channel
+  if (params.get('unassignedOnly') === 'true') {
+    filterValues.assigneeUserId = UNASSIGNED_ASSIGNEE_VALUE
+  } else {
+    const assigneeUserId = toStringOrNull(params.get('assigneeUserId'))
+    if (assigneeUserId) filterValues.assigneeUserId = assigneeUserId
+  }
+  const submittedFrom = toDateOnlyOrNull(params.get('submittedFrom'))
+  const submittedTo = toDateOnlyOrNull(params.get('submittedTo'))
+  if (submittedFrom || submittedTo) {
+    filterValues.submittedRange = { from: submittedFrom ?? undefined, to: submittedTo ?? undefined }
+  }
+  const createdFrom = toDateOnlyOrNull(params.get('createdFrom'))
+  const createdTo = toDateOnlyOrNull(params.get('createdTo'))
+  if (createdFrom || createdTo) {
+    filterValues.createdRange = { from: createdFrom ?? undefined, to: createdTo ?? undefined }
+  }
+  if (params.get('overdueOnly') === 'true') filterValues.overdueOnly = true
+  if (params.get('slaAtRiskOnly') === 'true') filterValues.slaAtRiskOnly = true
+  if (params.get('needsAttention') === 'true') filterValues.needsAttention = true
+  if (params.get('attentionOnly') === 'true') filterValues.attentionOnly = true
+  const sortField = params.get('sortField')
+  const sorting = sortField && SORTABLE_FIELDS.has(sortField)
+    ? [{ id: sortField, desc: params.get('sortDir') === 'desc' }]
+    : defaultSortingState()
+  return {
+    page: Number.isFinite(parsedPage) && parsedPage > 0 ? Math.trunc(parsedPage) : 1,
+    search: params.get('search') ?? '',
+    filterValues,
+    sorting,
+  }
+}
+
+function appendClaimListFilterParams(params: URLSearchParams, filterValues: FilterValues): void {
+  const statuses = valueAsStringArray(filterValues.status)
+  if (statuses.length) params.set('status', statuses.join(','))
+  const claimType = toStringOrNull(filterValues.claimType)
+  if (claimType) params.set('claimType', claimType)
+  const priority = toStringOrNull(filterValues.priority)
+  if (priority) params.set('priority', priority)
+  const channel = toStringOrNull(filterValues.channel)
+  if (channel) params.set('channel', channel)
+  const assigneeUserId = toStringOrNull(filterValues.assigneeUserId)
+  if (assigneeUserId === UNASSIGNED_ASSIGNEE_VALUE) params.set('unassignedOnly', 'true')
+  else if (assigneeUserId) params.set('assigneeUserId', assigneeUserId)
+  const submittedRange = valueAsDateRange(filterValues.submittedRange)
+  if (submittedRange.from) params.set('submittedFrom', submittedRange.from)
+  if (submittedRange.to) params.set('submittedTo', submittedRange.to)
+  const createdRange = valueAsDateRange(filterValues.createdRange)
+  if (createdRange.from) params.set('createdFrom', createdRange.from)
+  if (createdRange.to) params.set('createdTo', createdRange.to)
+  if (filterValues.overdueOnly === true) params.set('overdueOnly', 'true')
+  if (filterValues.slaAtRiskOnly === true) params.set('slaAtRiskOnly', 'true')
+  if (filterValues.needsAttention === true) params.set('needsAttention', 'true')
+  if (filterValues.attentionOnly === true) params.set('attentionOnly', 'true')
+}
+
+function appendClaimListSortParams(params: URLSearchParams, sorting: SortingState): void {
+  const primarySort = sorting[0]
+  if (!primarySort || !SORTABLE_FIELDS.has(primarySort.id)) return
+  params.set('sortField', primarySort.id)
+  params.set('sortDir', primarySort.desc ? 'desc' : 'asc')
+}
+
+function buildClaimListUrlQuery(page: number, search: string, filterValues: FilterValues, sorting: SortingState): string {
+  const params = new URLSearchParams()
+  if (search.trim()) params.set('search', search.trim())
+  if (page > 1) params.set('page', String(page))
+  appendClaimListFilterParams(params, filterValues)
+  appendClaimListSortParams(params, sorting)
+  return params.toString()
+}
+
+function buildClaimListApiQuery(page: number, search: string, filterValues: FilterValues, sorting: SortingState): string {
+  const params = new URLSearchParams()
+  params.set('page', String(page))
+  params.set('pageSize', String(PAGE_SIZE))
+  if (search.trim()) params.set('search', search.trim())
+  appendClaimListFilterParams(params, filterValues)
+  appendClaimListSortParams(params, sorting)
+  return params.toString()
+}
+
+function sameStringSet(left: string[], right: string[]): boolean {
+  if (left.length !== right.length) return false
+  const leftSet = new Set(left)
+  return right.every((value) => leftSet.has(value))
+}
+
+function staffOptionLabel(member: AssignableStaffMember): string {
+  return member.email && member.email !== member.displayName
+    ? `${member.displayName} (${member.email})`
+    : member.displayName
+}
+
+function normalizeAssigneeValue(value: string | null | undefined): string | null {
+  const normalized = value?.trim()
+  if (!normalized || normalized === UNASSIGNED_ASSIGNEE_VALUE) return null
+  return normalized
+}
+
+function buildConflictError(call: { status: number; result: unknown }, fallbackMessage: string): Error & Record<string, unknown> {
+  const payload = isRecord(call.result) ? call.result : {}
+  const message = typeof payload.error === 'string' ? payload.error : fallbackMessage
+  return Object.assign(new Error(message), { status: call.status }, payload)
+}
+
+type BulkProgressLabels = {
+  jobType: string
+  name: string
+}
+
+function createClientProgressJobId(jobType: string): string {
+  const cryptoRef =
+    typeof globalThis !== 'undefined'
+      ? (globalThis as { crypto?: { randomUUID?: () => string } }).crypto
+      : undefined
+  if (cryptoRef && typeof cryptoRef.randomUUID === 'function') {
+    return `client:${cryptoRef.randomUUID()}`
+  }
+  return `client:${jobType}:${Date.now()}:${Math.random().toString(36).slice(2)}`
+}
+
+function calculateBulkProgressPercent(processed: number, total: number): number {
+  if (total <= 0) return 100
+  return Math.max(0, Math.min(100, Math.round((processed / total) * 100)))
+}
+
+function calculateBulkEtaSeconds(startedAtMs: number, processed: number, total: number): number | null {
+  if (processed <= 0 || processed >= total) return null
+  const elapsedSeconds = Math.max(1, Math.round((Date.now() - startedAtMs) / 1000))
+  return Math.ceil((elapsedSeconds / processed) * (total - processed))
+}
+
+async function runBulkClaimActionWithProgress(
+  rows: ClaimRow[],
+  progress: BulkProgressLabels,
+  execute: (claim: ClaimRow) => Promise<unknown>,
+  fallbackErrorMessage: string,
+): Promise<{ succeeded: number; failures: BulkFailure[] }> {
+  let succeeded = 0
+  const failures: BulkFailure[] = []
+  const progressJobId = rows.length > 0 ? createClientProgressJobId(progress.jobType) : null
+  const startedAtMs = Date.now()
+  const startedAt = new Date(startedAtMs).toISOString()
+  if (progressJobId) {
+    emitProgressUpdate({
+      jobId: progressJobId,
+      jobType: progress.jobType,
+      name: progress.name,
+      description: null,
+      meta: null,
+      status: 'running',
+      progressPercent: 0,
+      processedCount: 0,
+      totalCount: rows.length,
+      etaSeconds: null,
+      cancellable: false,
+      startedAt,
+    })
+  }
+  for (const claim of rows) {
+    const error = await execute(claim)
+    if (error) failures.push({ message: error instanceof Error ? error.message : fallbackErrorMessage })
+    else succeeded += 1
+    if (progressJobId) {
+      const processed = succeeded + failures.length
+      emitProgressUpdate({
+        jobId: progressJobId,
+        jobType: progress.jobType,
+        name: progress.name,
+        description: null,
+        meta: null,
+        status: 'running',
+        progressPercent: calculateBulkProgressPercent(processed, rows.length),
+        processedCount: processed,
+        totalCount: rows.length,
+        etaSeconds: calculateBulkEtaSeconds(startedAtMs, processed, rows.length),
+        cancellable: false,
+        startedAt,
+      })
+    }
+  }
+  if (progressJobId) {
+    emitProgressUpdate({
+      jobId: progressJobId,
+      jobType: progress.jobType,
+      name: progress.name,
+      description: null,
+      meta: { succeededCount: succeeded, failedCount: failures.length },
+      status: failures.length === rows.length && rows.length > 0 ? 'failed' : 'completed',
+      progressPercent: 100,
+      processedCount: rows.length,
+      totalCount: rows.length,
+      etaSeconds: 0,
+      cancellable: false,
+      startedAt,
+      finishedAt: new Date().toISOString(),
+      errorMessage:
+        failures.length === rows.length && failures[0]?.message
+          ? failures[0].message
+          : null,
+    })
+  }
+  return { succeeded, failures }
+}
+
+export default function WarrantyClaimsPage() {
+  const t = useT()
+  const locale = useLocale()
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const scopeVersion = useOrganizationScopeVersion()
+  const { confirm, ConfirmDialogElement } = useConfirmDialog()
+  const currentUserId = useCurrentUserId()
+  const initialUrlStateRef = React.useRef<RestoredClaimListState | null>(null)
+  if (initialUrlStateRef.current === null) {
+    initialUrlStateRef.current = parseClaimListUrlState(searchParams)
+  }
+  const initialUrlState = initialUrlStateRef.current
+  const [rows, setRows] = React.useState<ClaimRow[]>([])
+  const [page, setPage] = React.useState(initialUrlState.page)
+  const [total, setTotal] = React.useState(0)
+  const [totalPages, setTotalPages] = React.useState(1)
+  const [tabCounts, setTabCounts] = React.useState<ClaimsTabCounts>({})
+  const [search, setSearch] = React.useState(initialUrlState.search)
+  const [filterValues, setFilterValues] = React.useState<FilterValues>(initialUrlState.filterValues)
+  const [sorting, setSorting] = React.useState<SortingState>(initialUrlState.sorting)
+  const [loading, setLoading] = React.useState(true)
+  const [stats, setStats] = React.useState<ClaimsStats | null>(null)
+  const [statsLoading, setStatsLoading] = React.useState(true)
+  const [statsError, setStatsError] = React.useState(false)
+  const [reloadToken, setReloadToken] = React.useState(0)
+  const [assignDialog, setAssignDialog] = React.useState<AssignDialogState>(null)
+  const urlQueryRef = React.useRef(searchParams.toString())
+
+  const mutationContextId = 'warranty-claims-list'
+  const { runMutation, retryLastMutation } = useGuardedMutation<{
+    formId: string
+    resourceKind: string
+    resourceId?: string
+    retryLastMutation: () => Promise<boolean>
+  }>({
+    contextId: mutationContextId,
+    blockedMessage: t('ui.forms.flash.saveBlocked', 'Save blocked by validation'),
+  })
+
+  React.useEffect(() => {
+    const current = searchParams.toString()
+    if (urlQueryRef.current === current) return
+    urlQueryRef.current = current
+    const restored = parseClaimListUrlState(searchParams)
+    setPage(restored.page)
+    setSearch(restored.search)
+    setFilterValues(restored.filterValues)
+    setSorting(restored.sorting)
+  }, [searchParams])
+
+  React.useEffect(() => {
+    if (!pathname) return
+    const next = buildClaimListUrlQuery(page, search, filterValues, sorting)
+    if (urlQueryRef.current === next) return
+    urlQueryRef.current = next
+    router.replace(next ? `${pathname}?${next}` : pathname, { scroll: false })
+  }, [filterValues, page, pathname, router, search, sorting])
+
+  const queryString = React.useMemo(() => {
+    return buildClaimListApiQuery(page, search, filterValues, sorting)
+  }, [filterValues, page, search, sorting])
+
+  const currentParams = React.useMemo(
+    () => Object.fromEntries(new URLSearchParams(queryString)),
+    [queryString],
+  )
+
+  const exportConfig = React.useMemo(() => ({
+    view: {
+      getUrl: (format: DataTableExportFormat) =>
+        buildCrudExportUrl('warranty_claims', { ...currentParams, exportScope: 'view' }, format),
+    },
+    full: {
+      getUrl: (format: DataTableExportFormat) =>
+        buildCrudExportUrl('warranty_claims', { ...currentParams, exportScope: 'full', all: 'true' }, format),
+    },
+  }), [currentParams])
+
+  const reload = React.useCallback(() => {
+    setReloadToken((current) => current + 1)
+  }, [])
+
+  useAppEvent('warranty_claims.claim.*', () => {
+    reload()
+  }, [reload])
+
+  React.useEffect(() => {
+    let cancelled = false
+    async function loadClaims() {
+      setLoading(true)
+      try {
+        const fallback: ClaimsResponse = { items: [], total: 0, totalPages: 1 }
+        const call = await apiCall<ClaimsResponse>(`/api/warranty_claims?${queryString}`, undefined, { fallback })
+        if (!call.ok) {
+          const message = call.result?.error ?? t('warranty_claims.list.error.load')
+          flash(message, 'error')
+          return
+        }
+        if (cancelled) return
+        const items = Array.isArray(call.result?.items) ? call.result.items : []
+        setRows(items.map(normalizeClaimRow).filter((row): row is ClaimRow => row !== null))
+        setTotal(typeof call.result?.total === 'number' ? call.result.total : items.length)
+        setTotalPages(typeof call.result?.totalPages === 'number' ? call.result.totalPages : 1)
+      } catch (error) {
+        if (!cancelled) {
+          const message = error instanceof Error ? error.message : t('warranty_claims.list.error.load')
+          flash(message, 'error')
+        }
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+    void loadClaims()
+    return () => {
+      cancelled = true
+    }
+  }, [queryString, reloadToken, scopeVersion, t])
+
+  const filterAssigneeUserId = toStringOrNull(filterValues.assigneeUserId)
+  const assigneeUserIds = React.useMemo(() => {
+    const ids: Array<string | null> = rows.map((row) => row.assigneeUserId)
+    if (filterAssigneeUserId && filterAssigneeUserId !== UNASSIGNED_ASSIGNEE_VALUE) ids.push(filterAssigneeUserId)
+    return ids
+  }, [filterAssigneeUserId, rows])
+  const assigneeDisplayNames = useUserDisplayNames(assigneeUserIds)
+
+  React.useEffect(() => {
+    const controller = new AbortController()
+    setStatsLoading(true)
+    setStatsError(false)
+    readApiResultOrThrow<ClaimsStatsResponse>(
+      '/api/warranty_claims/stats',
+      { signal: controller.signal },
+      { errorMessage: t('warranty_claims.list.error.load') },
+    )
+      .then((payload) => {
+        if (controller.signal.aborted) return
+        if (payload?.ok === true && payload.result) {
+          setStats(payload.result)
+          setStatsError(false)
+        } else {
+          setStats(null)
+          setStatsError(true)
+        }
+      })
+      .catch(() => {
+        if (!controller.signal.aborted) {
+          setStats(null)
+          setStatsError(true)
+        }
+      })
+      .finally(() => {
+        if (!controller.signal.aborted) setStatsLoading(false)
+      })
+    return () => controller.abort()
+  }, [reloadToken, scopeVersion, t])
+
+  React.useEffect(() => {
+    const controller = new AbortController()
+
+    async function loadCount(query: Record<string, string>): Promise<number> {
+      const params = new URLSearchParams({ page: '1', pageSize: '1', ...query })
+      const fallback: ClaimsResponse = { items: [], total: 0, totalPages: 1 }
+      const call = await apiCall<ClaimsResponse>(
+        `/api/warranty_claims?${params.toString()}`,
+        { signal: controller.signal },
+        { fallback },
+      )
+      if (!call.ok) throw new Error('[internal] Failed to load claim counts')
+      return typeof call.result?.total === 'number' ? call.result.total : 0
+    }
+
+    const mineQuery = currentUserId ? { assigneeUserId: currentUserId } : null
+    Promise.all([
+      loadCount({}),
+      mineQuery ? loadCount(mineQuery) : Promise.resolve(0),
+      loadCount({ attentionOnly: 'true' }),
+      loadCount({ status: 'in_review' }),
+      loadCount({ status: GOODS_FLOW_STATUSES.join(',') }),
+      loadCount({ status: RESOLVED_STATUSES.join(',') }),
+    ])
+      .then(([all, mine, attention, review, goods, resolved]) => {
+        if (!controller.signal.aborted) setTabCounts({ all, mine, attention, review, goods, resolved })
+      })
+      .catch(() => {
+        if (!controller.signal.aborted) setTabCounts({})
+      })
+
+    return () => controller.abort()
+  }, [currentUserId, reloadToken, scopeVersion])
+
+  const statusOptions = React.useMemo(
+    () => CLAIM_STATUSES.map((status) => ({ value: status, label: t(`warranty_claims.status.${status}`) })),
+    [t],
+  )
+  const channelOptions = React.useMemo(
+    () => CLAIM_CHANNELS.map((channel) => ({ value: channel, label: t(`warranty_claims.channel.${channel}`) })),
+    [t],
+  )
+  const claimTypeOptions = React.useMemo(
+    () => CLAIM_TYPES.map((claimType) => ({ value: claimType, label: t(`warranty_claims.claimType.${claimType}`) })),
+    [t],
+  )
+  const priorityOptions = React.useMemo(
+    () => CLAIM_PRIORITIES.map((priority) => ({ value: priority, label: t(`warranty_claims.priority.${priority}`) })),
+    [t],
+  )
+
+  const loadAssignableStaffOptions = React.useCallback(async (query?: string): Promise<CrudFieldOption[]> => {
+    const page = await fetchAssignableStaffMembersPage(query ?? '', { pageSize: 24 })
+    const options = page.items.map((member) => ({
+      value: member.userId,
+      label: staffOptionLabel(member),
+    }))
+    return [
+      {
+        value: UNASSIGNED_ASSIGNEE_VALUE,
+        label: t('warranty_claims.form.assigneeUserId.unassigned', 'Unassigned'),
+      },
+      ...options,
+    ]
+  }, [t])
+
+  const formatAssigneeFilterValue = React.useCallback((value: string) => {
+    if (value === UNASSIGNED_ASSIGNEE_VALUE) return t('warranty_claims.form.assigneeUserId.unassigned', 'Unassigned')
+    return assigneeDisplayNames[value] ?? t('warranty_claims.list.assignee.unknownUser', 'Unknown user')
+  }, [assigneeDisplayNames, t])
+
+  const filters = React.useMemo<FilterDef[]>(() => [
+    {
+      id: 'status',
+      label: t('warranty_claims.list.filter.status'),
+      type: 'select',
+      multiple: true,
+      options: statusOptions,
+    },
+    {
+      id: 'claimType',
+      label: t('warranty_claims.list.filter.claimType'),
+      type: 'select',
+      options: claimTypeOptions,
+    },
+    {
+      id: 'priority',
+      label: t('warranty_claims.list.filter.priority'),
+      type: 'select',
+      options: priorityOptions,
+    },
+    {
+      id: 'channel',
+      label: t('warranty_claims.list.filter.channel'),
+      type: 'select',
+      options: channelOptions,
+    },
+    {
+      id: 'assigneeUserId',
+      label: t('warranty_claims.list.filter.assignee'),
+      type: 'select',
+      loadOptions: loadAssignableStaffOptions,
+      formatValue: formatAssigneeFilterValue,
+    },
+    {
+      id: 'submittedRange',
+      label: t('warranty_claims.list.filter.submittedBetween', 'Submitted between'),
+      type: 'dateRange',
+    },
+    {
+      id: 'createdRange',
+      label: t('warranty_claims.list.filter.createdBetween', 'Created between'),
+      type: 'dateRange',
+    },
+    {
+      id: 'overdueOnly',
+      label: t('warranty_claims.list.filter.overdueOnly'),
+      type: 'checkbox',
+    },
+    {
+      id: 'slaAtRiskOnly',
+      label: t('warranty_claims.list.filter.slaAtRiskOnly', 'SLA at risk only'),
+      type: 'checkbox',
+    },
+  ], [
+    channelOptions,
+    claimTypeOptions,
+    formatAssigneeFilterValue,
+    loadAssignableStaffOptions,
+    priorityOptions,
+    statusOptions,
+    t,
+  ])
+
+  const assignSeedOptions = React.useMemo<CrudFieldOption[]>(() => {
+    const options = new Map<string, CrudFieldOption>()
+    options.set(UNASSIGNED_ASSIGNEE_VALUE, {
+      value: UNASSIGNED_ASSIGNEE_VALUE,
+      label: t('warranty_claims.form.assigneeUserId.unassigned', 'Unassigned'),
+    })
+    for (const row of assignDialog?.rows ?? []) {
+      if (!row.assigneeUserId || options.has(row.assigneeUserId)) continue
+      options.set(row.assigneeUserId, {
+        value: row.assigneeUserId,
+        label: assigneeDisplayNames[row.assigneeUserId]
+          ?? t('warranty_claims.list.assignee.unknownUser', 'Unknown user'),
+      })
+    }
+    return Array.from(options.values())
+  }, [assignDialog?.rows, assigneeDisplayNames, t])
+
+  const executeClaimAction = React.useCallback(async (
+    claim: ClaimRow,
+    actionId: string,
+    endpoint: string,
+    body: Record<string, unknown>,
+  ): Promise<unknown> => {
+    try {
+      await runMutation({
+        operation: async () => {
+          const call = await withScopedApiRequestHeaders(
+            buildOptimisticLockHeader(claim.updatedAt),
+            () => apiCall(endpoint, {
+              method: 'POST',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify(body),
+            }),
+          )
+          if (!call.ok) {
+            const error = buildConflictError(call, t('warranty_claims.detail.error.action'))
+            throw error
+          }
+          return call
+        },
+        mutationPayload: { action: actionId, ...body },
+        context: {
+          formId: mutationContextId,
+          resourceKind: 'warranty_claims.claim',
+          resourceId: claim.id,
+          retryLastMutation,
+        },
+      })
+      return null
+    } catch (error) {
+      return error
+    }
+  }, [mutationContextId, retryLastMutation, runMutation, t])
+
+  const runClaimAction = React.useCallback(async (
+    claim: ClaimRow,
+    actionId: string,
+    endpoint: string,
+    body: Record<string, unknown>,
+    successKey: string,
+    successFallback?: string,
+  ) => {
+    const error = await executeClaimAction(claim, actionId, endpoint, body)
+    if (error) {
+      if (surfaceRecordConflict(error, t, { onRefresh: reload })) return
+      flash(error instanceof Error ? error.message : t('warranty_claims.list.error.action'), 'error')
+      return
+    }
+    flash(t(successKey, successFallback), 'success')
+    reload()
+  }, [executeClaimAction, reload, t])
+
+  const handleCancel = React.useCallback(async (claim: ClaimRow) => {
+    const confirmed = await confirm({
+      title: t('warranty_claims.detail.confirm.cancelTitle'),
+      variant: 'destructive',
+    })
+    if (!confirmed) return
+    await runClaimAction(
+      claim,
+      'cancel',
+      '/api/warranty_claims/transition',
+      { id: claim.id, toStatus: 'cancelled' },
+      'warranty_claims.list.flash.cancelled',
+    )
+  }, [confirm, runClaimAction, t])
+
+  const flashBulkSummary = React.useCallback((succeeded: number, failures: BulkFailure[], skipped = 0) => {
+    const summary = t(
+      'warranty_claims.bulk.summary',
+      'Bulk action finished: {succeeded} succeeded, {failed} failed.',
+      { succeeded, failed: failures.length },
+    )
+    const summaryWithSkipped = appendSkippedBulkCount(summary, skipped, t)
+    if (failures.length) {
+      flash(
+        `${summaryWithSkipped} ${t('warranty_claims.bulk.firstError', 'First error: {message}', { message: failures[0].message })}`,
+        'warning',
+      )
+      return
+    }
+    flash(summaryWithSkipped, skipped > 0 ? 'warning' : 'success')
+  }, [t])
+
+  const runBulkAssign = React.useCallback(async (selectedRows: ClaimRow[], assigneeUserId: string | null) => {
+    const { succeeded, failures } = await runBulkClaimActionWithProgress(
+      selectedRows,
+      {
+        jobType: 'warranty_claims.claims.bulk_assign',
+        name: t('warranty_claims.bulk.assign', 'Assign selected'),
+      },
+      (claim) => executeClaimAction(
+        claim,
+        'bulk-assign',
+        '/api/warranty_claims/assign',
+        { id: claim.id, assigneeUserId },
+      ),
+      t('warranty_claims.list.error.action'),
+    )
+    flashBulkSummary(succeeded, failures)
+    reload()
+    return { ok: true as const, affectedCount: succeeded }
+  }, [executeClaimAction, flashBulkSummary, reload, t])
+
+  const runBulkCancel = React.useCallback(async (selectedRows: ClaimRow[]) => {
+    const { succeeded, failures } = await runBulkClaimActionWithProgress(
+      selectedRows,
+      {
+        jobType: 'warranty_claims.claims.bulk_cancel',
+        name: t('warranty_claims.bulk.cancel', 'Cancel selected'),
+      },
+      (claim) => executeClaimAction(
+        claim,
+        'bulk-cancel',
+        '/api/warranty_claims/transition',
+        { id: claim.id, toStatus: 'cancelled' },
+      ),
+      t('warranty_claims.list.error.action'),
+    )
+    flashBulkSummary(succeeded, failures)
+    reload()
+    return { ok: true as const, affectedCount: succeeded }
+  }, [executeClaimAction, flashBulkSummary, reload, t])
+
+  const runBulkStartReview = React.useCallback(async (selectedRows: ClaimRow[]) => {
+    const eligibleRows = selectedRows.filter((claim) => claim.status === 'submitted')
+    const skipped = selectedRows.length - eligibleRows.length
+    const { succeeded, failures } = await runBulkClaimActionWithProgress(
+      eligibleRows,
+      {
+        jobType: 'warranty_claims.claims.bulk_start_review',
+        name: t('warranty_claims.bulk.startReview', 'Start review for selected'),
+      },
+      (claim) => executeClaimAction(
+        claim,
+        'bulk-start-review',
+        '/api/warranty_claims/transition',
+        { id: claim.id, toStatus: 'in_review' },
+      ),
+      t('warranty_claims.list.error.action'),
+    )
+    flashBulkSummary(succeeded, failures, skipped)
+    reload()
+    return { ok: true as const, affectedCount: succeeded }
+  }, [executeClaimAction, flashBulkSummary, reload, t])
+
+  const closeAssignDialog = React.useCallback((result: false | { ok: true; affectedCount?: number } = false) => {
+    setAssignDialog((current) => {
+      current?.resolve?.(result)
+      return null
+    })
+  }, [])
+
+  const assignFields = React.useMemo<CrudField[]>(() => [
+    {
+      id: 'assigneeUserId',
+      label: t('warranty_claims.form.assigneeUserId'),
+      type: 'combobox',
+      placeholder: t('warranty_claims.form.assigneeUserId.searchPlaceholder', 'Search staff'),
+      loadOptions: loadAssignableStaffOptions,
+      seedOptions: assignSeedOptions,
+      allowCustomValues: false,
+    },
+  ], [assignSeedOptions, loadAssignableStaffOptions, t])
+
+  const bulkActions = React.useMemo<BulkAction<ClaimRow>[]>(() => [
+    {
+      id: 'bulk-assign',
+      label: t('warranty_claims.bulk.assign', 'Assign selected'),
+      onExecute: (selectedRows) => new Promise<false | { ok: true; affectedCount?: number }>((resolve) => {
+        if (!selectedRows.length) {
+          resolve(false)
+          return
+        }
+        setAssignDialog({ mode: 'bulk', rows: selectedRows, resolve })
+      }),
+    },
+    {
+      id: 'bulk-start-review',
+      label: t('warranty_claims.bulk.startReview', 'Start review for selected'),
+      onExecute: async (selectedRows) => {
+        if (!selectedRows.length) return false
+        return runBulkStartReview(selectedRows)
+      },
+    },
+    {
+      id: 'bulk-cancel',
+      label: t('warranty_claims.bulk.cancel', 'Cancel selected'),
+      destructive: true,
+      onExecute: async (selectedRows) => {
+        if (!selectedRows.length) return false
+        const confirmed = await confirm({
+          title: t('warranty_claims.bulk.cancelTitle', 'Cancel selected claims?'),
+          variant: 'destructive',
+        })
+        if (!confirmed) return false
+        return runBulkCancel(selectedRows)
+      },
+    },
+  ], [confirm, runBulkCancel, runBulkStartReview, t])
+
+  const applyOverdueFilter = React.useCallback(() => {
+    setFilterValues((current) => {
+      const next: FilterValues = { ...current }
+      if (current.overdueOnly === true) delete next.overdueOnly
+      else next.overdueOnly = true
+      return next
+    })
+    setPage(1)
+  }, [])
+
+  const clearAllFilters = React.useCallback(() => {
+    setFilterValues({})
+    setPage(1)
+  }, [])
+
+  const handleSortingChange = React.useCallback((nextSorting: SortingState) => {
+    setSorting(nextSorting.length ? nextSorting : defaultSortingState())
+    setPage(1)
+  }, [])
+
+  const currentStatusFilter = valueAsStringArray(filterValues.status)
+  const myClaimsActive = Boolean(currentUserId) && toStringOrNull(filterValues.assigneeUserId) === currentUserId
+  const overdueActive = filterValues.overdueOnly === true
+  const slaAtRiskActive = filterValues.slaAtRiskOnly === true
+  const needsAttentionActive = filterValues.needsAttention === true
+  const attentionOnlyActive = filterValues.attentionOnly === true
+  const activeWorkspaceTab = myClaimsActive
+    ? 'mine'
+    : overdueActive || slaAtRiskActive || needsAttentionActive || attentionOnlyActive
+      ? 'attention'
+      : sameStringSet(currentStatusFilter, ['in_review'])
+        ? 'review'
+        : sameStringSet(currentStatusFilter, GOODS_FLOW_STATUSES)
+          ? 'goods'
+          : sameStringSet(currentStatusFilter, RESOLVED_STATUSES)
+            ? 'resolved'
+            : 'all'
+
+  const handleWorkspaceTabChange = React.useCallback((value: string) => {
+    if (value === 'mine' && currentUserId) {
+      setFilterValues({ assigneeUserId: currentUserId })
+    } else if (value === 'attention') {
+      setFilterValues({ attentionOnly: true })
+    } else if (value === 'review') {
+      setFilterValues({ status: ['in_review'] })
+    } else if (value === 'goods') {
+      setFilterValues({ status: GOODS_FLOW_STATUSES })
+    } else if (value === 'resolved') {
+      setFilterValues({ status: RESOLVED_STATUSES })
+    } else {
+      setFilterValues({})
+    }
+    setPage(1)
+  }, [currentUserId])
+
+  const columns = React.useMemo<ColumnDef<ClaimRow>[]>(() => {
+    const noValue = <span className="text-sm text-muted-foreground">{t('warranty_claims.common.noValue')}</span>
+    return [
+      {
+        accessorKey: 'claimNumber',
+        header: t('warranty_claims.list.column.claimNumber'),
+        meta: { alwaysVisible: true, maxWidth: '140px' },
+        cell: ({ row }) => (
+          <div className="flex items-center gap-2">
+            <Link href={`/backend/warranty_claims/${row.original.id}`} className="font-medium hover:underline">
+              {row.original.claimNumber ?? t('warranty_claims.list.unnumbered', 'Unnumbered claim')}
+            </Link>
+            {row.original.awaitingStaffReply ? (
+              <StatusBadge variant="warning" dot>
+                {t('warranty_claims.list.badge.customerReplied', 'Customer replied')}
+              </StatusBadge>
+            ) : null}
+          </div>
+        ),
+      },
+      {
+        accessorKey: 'claimType',
+        header: t('warranty_claims.list.column.claimType'),
+        cell: ({ row }) => {
+          const value = row.original.claimType
+          return value ? (
+            <StatusBadge variant="neutral">{t(`warranty_claims.claimType.${value}`)}</StatusBadge>
+          ) : noValue
+        },
+      },
+      {
+        accessorKey: 'channel',
+        header: t('warranty_claims.list.column.channel'),
+        cell: ({ row }) => {
+          const value = normalizeClaimChannel(row.original.channel)
+          return value ? <StatusBadge variant="neutral">{t(`warranty_claims.channel.${value}`)}</StatusBadge> : noValue
+        },
+      },
+      {
+        accessorKey: 'status',
+        header: t('warranty_claims.list.column.status'),
+        meta: { maxWidth: '116px' },
+        cell: ({ row }) => <ClaimStatusBadge status={row.original.status} />,
+      },
+      {
+        accessorKey: 'priority',
+        header: t('warranty_claims.list.column.priority'),
+        meta: { maxWidth: '92px' },
+        cell: ({ row }) => <ClaimPriorityBadge priority={row.original.priority} />,
+      },
+      {
+        accessorKey: 'customerName',
+        header: t('warranty_claims.list.column.customer'),
+        meta: { truncate: true, maxWidth: '160px' },
+        cell: ({ row }) => row.original.customerName ? <span>{row.original.customerName}</span> : noValue,
+      },
+      {
+        accessorKey: 'orderId',
+        header: t('warranty_claims.list.column.order'),
+        meta: { truncate: true, maxWidth: '110px' },
+        cell: ({ row }) => {
+          const orderId = row.original.orderId
+          if (!orderId) return noValue
+          const label = row.original.orderNumber ?? t('warranty_claims.list.viewOrder', 'View order')
+          return (
+            <Link href={`/backend/sales/documents/${orderId}`} className="hover:underline">
+              {label}
+            </Link>
+          )
+        },
+      },
+      {
+        accessorKey: 'slaDueAt',
+        header: t('warranty_claims.list.column.slaDueAt'),
+        meta: { maxWidth: '136px' },
+        cell: ({ row }) => (
+          <ClaimSlaIndicator
+            slaDueAt={row.original.slaDueAt}
+            slaPausedAt={row.original.slaPausedAt}
+            submittedAt={row.original.submittedAt}
+            status={row.original.status}
+            atRiskThresholdPct={stats?.slaAtRiskThresholdPct}
+          />
+        ),
+      },
+      {
+        accessorKey: 'assigneeUserId',
+        header: t('warranty_claims.list.column.assignee'),
+        meta: { truncate: true, maxWidth: '120px' },
+        cell: ({ row }) => {
+          const assigneeUserId = row.original.assigneeUserId
+          if (!assigneeUserId) return noValue
+          const displayName = assigneeDisplayNames[assigneeUserId]
+          return displayName ? <span>{displayName}</span> : noValue
+        },
+      },
+      {
+        accessorKey: 'updatedAt',
+        header: t('warranty_claims.list.column.updatedAt'),
+        meta: { maxWidth: '96px' },
+        cell: ({ row }) => (
+          <span className="text-sm text-muted-foreground" title={formatDateTime(row.original.updatedAt) ?? undefined}>
+            {formatRelativeTime(row.original.updatedAt, { locale }) ?? t('warranty_claims.common.noValue')}
+          </span>
+        ),
+      },
+    ]
+  }, [assigneeDisplayNames, locale, stats?.slaAtRiskThresholdPct, t])
+
+  const assignInitialAssignee =
+    assignDialog?.rows.length === 1
+      ? assignDialog.rows[0].assigneeUserId ?? UNASSIGNED_ASSIGNEE_VALUE
+      : UNASSIGNED_ASSIGNEE_VALUE
+  const assignDialogTitle = assignDialog?.mode === 'bulk'
+    ? t('warranty_claims.bulk.assignTitle', 'Assign selected claims')
+    : t('warranty_claims.detail.actions.assign')
+
+  return (
+    <Page>
+      <PageBody>
+        <WarrantyWorkspace
+          title={t('warranty_claims.list.title')}
+          contentClassName="[&>[data-component-handle]>div:first-child]:px-8 [&>[data-component-handle]>div:first-child]:py-4 [&_:has(>[data-slot=search-input-wrapper])]:lg:w-56"
+          summary={(
+            <ClaimsKpiStrip
+              stats={stats}
+              isLoading={statsLoading}
+              hasError={statsError}
+              attentionCount={tabCounts.attention}
+              onOverdueClick={applyOverdueFilter}
+              onOpenClaimsClick={clearAllFilters}
+            />
+          )}
+          activeTab={activeWorkspaceTab}
+          onTabChange={handleWorkspaceTabChange}
+          tabs={[
+            { id: 'all', label: t('warranty_claims.list.tabs.all', 'All'), count: tabCounts.all },
+            { id: 'mine', label: t('warranty_claims.list.quickFilters.myClaims', 'My claims'), count: tabCounts.mine, disabled: !currentUserId },
+            { id: 'attention', label: t('warranty_claims.list.tabs.needsAttention', 'Needs attention'), count: tabCounts.attention },
+            { id: 'review', label: t('warranty_claims.list.quickFilters.inReview', 'In review'), count: tabCounts.review },
+            { id: 'goods', label: t('warranty_claims.list.tabs.goodsFlow', 'Goods flow'), count: tabCounts.goods },
+            { id: 'resolved', label: t('warranty_claims.list.tabs.resolved', 'Resolved'), count: tabCounts.resolved },
+          ]}
+        >
+          <DataTable<ClaimRow>
+            embedded
+            stickyFirstColumn
+            stickyActionsColumn
+            refreshButton={{
+              label: t('warranty_claims.list.actions.refresh'),
+              onRefresh: reload,
+              isRefreshing: loading,
+            }}
+            actions={(
+              <Button asChild>
+                <Link href="/backend/warranty_claims/create">
+                  <Plus className="size-4" aria-hidden />
+                  {t('warranty_claims.list.actions.new')}
+                </Link>
+              </Button>
+            )}
+            columns={columns}
+            columnChooser={{ auto: true }}
+            data={rows}
+            exporter={exportConfig}
+            searchValue={search}
+            onSearchChange={(value) => {
+              setSearch(value)
+              setPage(1)
+            }}
+            searchPlaceholder={t('warranty_claims.list.searchPlaceholder', 'Search claim no., customer, order, serial, or SKU')}
+            filters={filters}
+            filterValues={filterValues}
+            onFiltersApply={(values) => {
+              setFilterValues((current) => {
+                const next: FilterValues = { ...values }
+                if (current.needsAttention === true) next.needsAttention = true
+                if (current.attentionOnly === true) next.attentionOnly = true
+                return next
+              })
+              setPage(1)
+            }}
+            onFiltersClear={clearAllFilters}
+            perspective={{
+              tableId: extensionPoints.hosts.claimsTable.tableId,
+              initialState: {
+                initialSettings: {
+                  columnVisibility: { claimType: false, channel: false },
+                  columnSizing: {
+                    claimNumber: 112,
+                    status: 112,
+                    priority: 88,
+                    customerName: 144,
+                    orderId: 96,
+                    slaDueAt: 136,
+                    assigneeUserId: 104,
+                    updatedAt: 88,
+                  },
+                },
+              },
+            }}
+            onRowClick={(row) => router.push(`/backend/warranty_claims/${row.id}`)}
+            sortable
+            manualSorting
+            sorting={sorting}
+            onSortingChange={handleSortingChange}
+            isLoading={loading}
+            bulkActions={bulkActions}
+            rowActions={(row) => (
+              <RowActions
+                items={[
+                  {
+                    id: 'open',
+                    label: t('warranty_claims.list.actions.open'),
+                    onSelect: () => router.push(`/backend/warranty_claims/${row.id}`),
+                  },
+                  {
+                    id: 'open-new-tab',
+                    label: t('warranty_claims.list.actions.openInNewTab', 'Open in new tab'),
+                    onSelect: () => window.open(`/backend/warranty_claims/${row.id}`, '_blank', 'noopener'),
+                  },
+                  {
+                    id: 'assign',
+                    label: t('warranty_claims.list.actions.assign'),
+                    onSelect: () => setAssignDialog({ mode: 'single', rows: [row] }),
+                  },
+                  ...(Boolean(currentUserId) && row.assigneeUserId !== currentUserId
+                    ? [{
+                      id: 'assign-to-me',
+                      label: t('warranty_claims.list.actions.assignToMe', 'Assign to me'),
+                      onSelect: () => {
+                        void runClaimAction(
+                          row,
+                          'assign-to-me',
+                          '/api/warranty_claims/assign',
+                          { id: row.id, assigneeUserId: currentUserId },
+                          'warranty_claims.list.flash.assigned',
+                        )
+                      },
+                    }]
+                    : []),
+                  ...row.status === 'submitted'
+                    ? [{
+                      id: 'start-review',
+                      label: t('warranty_claims.list.actions.startReview', 'Start review'),
+                      onSelect: () => {
+                        void runClaimAction(
+                          row,
+                          'start-review',
+                          '/api/warranty_claims/transition',
+                          { id: row.id, toStatus: 'in_review' },
+                          'warranty_claims.list.flash.reviewStarted',
+                          'Review started.',
+                        )
+                      },
+                    }]
+                    : [],
+                  ...CANCEL_BLOCKED_STATUSES.has(String(row.status ?? ''))
+                    ? []
+                    : [{
+                      id: 'cancel',
+                      label: t('warranty_claims.list.actions.cancel'),
+                      destructive: true,
+                      onSelect: () => {
+                        void handleCancel(row)
+                      },
+                    }],
+                ]}
+              />
+            )}
+            emptyState={(
+              <ListEmptyState
+                title={t('warranty_claims.list.empty.title')}
+                description={t('warranty_claims.list.empty.description')}
+                createHref="/backend/warranty_claims/create"
+                createLabel={t('warranty_claims.list.actions.new')}
+              />
+            )}
+            pagination={{
+              page,
+              pageSize: PAGE_SIZE,
+              total,
+              totalPages,
+              onPageChange: setPage,
+            }}
+          />
+        </WarrantyWorkspace>
+      </PageBody>
+      <Dialog open={assignDialog !== null} onOpenChange={(open) => { if (!open) closeAssignDialog(false) }}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{assignDialogTitle}</DialogTitle>
+          </DialogHeader>
+          <CrudForm<AssignFormValues>
+            embedded
+            title={assignDialogTitle}
+            fields={assignFields}
+            initialValues={{ assigneeUserId: assignInitialAssignee }}
+            submitLabel={t('warranty_claims.form.submit')}
+            onSubmit={async (values) => {
+              if (!assignDialog) return
+              const assigneeUserId = normalizeAssigneeValue(values.assigneeUserId)
+              if (assignDialog.mode === 'bulk') {
+                const result = await runBulkAssign(assignDialog.rows, assigneeUserId)
+                closeAssignDialog(result)
+                return
+              }
+              const target = assignDialog.rows[0]
+              if (!target) {
+                closeAssignDialog(false)
+                return
+              }
+              await runClaimAction(
+                target,
+                'assign',
+                '/api/warranty_claims/assign',
+                { id: target.id, assigneeUserId },
+                'warranty_claims.list.flash.assigned',
+              )
+              closeAssignDialog({ ok: true, affectedCount: 1 })
+            }}
+          />
+        </DialogContent>
+      </Dialog>
+      {ConfirmDialogElement}
+    </Page>
+  )
+}