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

package/src/modules/warranty_claims/backend/components/ClaimsKpiStrip.tsx

@@ -0,0 +1,169 @@
+"use client"
+
+import * as React from 'react'
+import { ArrowLeftRight, BadgeCheck, CreditCard, History, Timer, type LucideIcon } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Skeleton } from '@open-mercato/ui/primitives/skeleton'
+
+export type WarrantyClaimsRecoveredCurrency = {
+  currencyCode: string | null
+  total: number
+}
+
+export type WarrantyClaimsStats = {
+  openByStatus: Record<string, number>
+  overdue: number
+  assignedToMe: number
+  resolvedLast30d: number
+  avgResolutionDays: number | null
+  approvalRatePct: number | null
+  recoveredLast30dByCurrency: WarrantyClaimsRecoveredCurrency[]
+  slaAtRiskThresholdPct?: number
+  slaAtRisk?: number
+}
+
+type ClaimsKpiStripProps = {
+  stats: WarrantyClaimsStats | null
+  isLoading: boolean
+  hasError: boolean
+  attentionCount?: number
+  onOverdueClick: () => void
+  onOpenClaimsClick: () => void
+}
+
+type KpiItemProps = {
+  icon: LucideIcon
+  label: string
+  description: string
+  value: React.ReactNode
+  detail?: React.ReactNode
+  onClick?: () => void
+}
+
+function formatNumber(value: number, options?: Intl.NumberFormatOptions): string {
+  return new Intl.NumberFormat(undefined, options).format(value)
+}
+
+function KpiItem({ icon: Icon, label, description, value, detail, onClick }: KpiItemProps) {
+  const content = (
+    <div className="flex min-h-24 w-full items-start gap-3 px-5 py-1 text-left">
+      <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+        <Icon aria-hidden="true" className="size-4" />
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="block text-sm font-semibold leading-5 text-foreground">{label}</span>
+        <span className="block text-overline font-normal leading-4 text-muted-foreground">{description}</span>
+        <span className="mt-2 block text-2xl font-bold leading-8 tabular-nums text-foreground">{value}</span>
+        {detail ? <span className="mt-0.5 block text-xs leading-4 text-muted-foreground">{detail}</span> : null}
+      </span>
+    </div>
+  )
+
+  if (onClick) {
+    return (
+      <Button
+        type="button"
+        variant="ghost"
+        onClick={onClick}
+        className="h-auto min-h-24 w-full whitespace-normal rounded-none p-0 hover:bg-muted/30"
+      >
+        {content}
+      </Button>
+    )
+  }
+
+  return (
+    <div className="flex min-h-24">
+      {content}
+    </div>
+  )
+}
+
+export function ClaimsKpiStrip({
+  stats,
+  isLoading,
+  hasError,
+  attentionCount,
+  onOverdueClick,
+  onOpenClaimsClick,
+}: ClaimsKpiStripProps) {
+  const t = useT()
+
+  if (hasError) return null
+
+  if (isLoading && !stats) {
+    return (
+      <div className="grid grid-cols-2 divide-x divide-border border-y border-border py-5 md:grid-cols-5">
+        {Array.from({ length: 5 }).map((_, index) => (
+          <Skeleton
+            key={index}
+            className="min-h-24 rounded-none"
+            aria-label={t('warranty_claims.kpi.loading', 'Loading claim KPIs')}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  if (!stats) return null
+
+  const openClaims = Object.values(stats.openByStatus).reduce((sum, count) => sum + count, 0)
+  const recoveredCurrencies = stats.recoveredLast30dByCurrency
+  const recovered = recoveredCurrencies[0] ?? null
+  const recoveredLabel = recovered
+    ? formatNumber(recovered.total, { maximumFractionDigits: 2 })
+    : null
+  const recoveredDescription = recoveredCurrencies.length > 1
+    ? t('warranty_claims.kpi.recovered.moreCurrencies', 'Last 30 days — largest of {count} currencies')
+      .replace('{count}', formatNumber(recoveredCurrencies.length))
+    : t('warranty_claims.kpi.last30d', 'Last 30 days')
+  const slaCompliance = openClaims > 0
+    ? Math.max(0, Math.round(((openClaims - stats.overdue) / openClaims) * 100))
+    : 100
+  const approvedCount = stats.approvalRatePct === null
+    ? null
+    : Math.round(stats.resolvedLast30d * stats.approvalRatePct / 100)
+
+  return (
+    <div className="grid grid-cols-2 divide-x divide-y divide-border border-y border-border py-5 md:grid-cols-5 md:divide-y-0">
+      <KpiItem
+        icon={ArrowLeftRight}
+        label={t('warranty_claims.kpi.openClaims', 'Open claims')}
+        description={t('warranty_claims.kpi.openClaims.description', 'Active queue')}
+        value={formatNumber(openClaims)}
+        detail={t('warranty_claims.kpi.openClaims.attention', '{count} need attention', { count: formatNumber(attentionCount ?? stats.overdue) })}
+        onClick={onOpenClaimsClick}
+      />
+      <KpiItem
+        icon={Timer}
+        label={t('warranty_claims.kpi.slaCompliance', 'SLA compliance')}
+        description={t('warranty_claims.kpi.slaCompliance.description', 'Within target window')}
+        value={`${formatNumber(slaCompliance)}%`}
+        detail={t('warranty_claims.kpi.slaCompliance.overdue', '{count} overdue', { count: formatNumber(stats.overdue) })}
+        onClick={onOverdueClick}
+      />
+      <KpiItem
+        icon={History}
+        label={t('warranty_claims.kpi.avgResolutionDays', 'Avg resolution')}
+        description={t('warranty_claims.kpi.last30d', 'Last 30 days')}
+        value={stats.avgResolutionDays === null ? t('warranty_claims.common.noValue') : t('warranty_claims.kpi.daysShort', '{count}d', { count: formatNumber(stats.avgResolutionDays, { maximumFractionDigits: 1 }) })}
+        detail={t('warranty_claims.kpi.avgResolution.resolved', '{count} claims resolved', { count: formatNumber(stats.resolvedLast30d) })}
+      />
+      <KpiItem
+        icon={BadgeCheck}
+        label={t('warranty_claims.kpi.approvalRate', 'Approval rate')}
+        description={t('warranty_claims.kpi.last30d', 'Last 30 days')}
+        value={stats.approvalRatePct === null ? t('warranty_claims.common.noValue') : `${formatNumber(stats.approvalRatePct)}%`}
+        detail={approvedCount === null ? undefined : t('warranty_claims.kpi.approvalRate.approved', '{count} claims approved', { count: formatNumber(approvedCount) })}
+      />
+      <KpiItem
+        icon={CreditCard}
+        label={t('warranty_claims.kpi.recovered', 'Recovered')}
+        description={t('warranty_claims.kpi.recovered.description', 'From vendors')}
+        value={recoveredLabel ?? t('warranty_claims.common.noValue')}
+        detail={recovered ? `${recovered.currencyCode ?? ''} ${t('warranty_claims.kpi.last30d', 'Last 30 days')}`.trim() : recoveredDescription}
+      />
+    </div>
+  )
+}

package/src/modules/warranty_claims/backend/components/EntitlementLookupBadge.tsx

@@ -0,0 +1,203 @@
+"use client"
+
+import * as React from 'react'
+import Link from 'next/link'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { StatusBadge, type StatusBadgeVariant } from '@open-mercato/ui/primitives/status-badge'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+
+type EntitlementClaim = {
+  id?: string | null
+  orderId: string | null
+}
+
+type EntitlementLine = {
+  productId: string | null
+  sku: string | null
+  serialNumber: string | null
+  purchaseDate: string | null
+}
+
+type EntitlementResult = {
+  warrantyStatus?: 'in_warranty' | 'out_of_warranty' | 'unknown'
+  coverageType?: 'standard' | 'extended' | 'none' | null
+  expiresAt?: string | null
+  source?: 'registration' | 'order' | 'manual' | 'resolver' | null
+  hasPriorClaims?: boolean
+  priorClaimCount?: number
+  priorRegistrationCount?: number
+  relatedClaimNumbers?: string[]
+}
+
+const MAX_LINKED_CLAIM_NUMBERS = 3
+
+type EntitlementLookupBadgeProps = {
+  claim: EntitlementClaim
+  lines: EntitlementLine[]
+}
+
+function buildEntitlementQuery(claim: EntitlementClaim, lines: EntitlementLine[]): string | null {
+  const sourceLine = lines.find((line) => line.serialNumber)
+    ?? lines.find((line) => line.productId || line.sku)
+    ?? (claim.orderId ? lines.find((line) => line.purchaseDate) : null)
+    ?? null
+  if (!claim.orderId && !sourceLine?.serialNumber && !sourceLine?.productId && !sourceLine?.sku) return null
+  const params = new URLSearchParams()
+  if (sourceLine?.serialNumber) params.set('serialNumber', sourceLine.serialNumber)
+  if (claim.orderId) params.set('orderId', claim.orderId)
+  if (sourceLine?.productId) params.set('productId', sourceLine.productId)
+  if (sourceLine?.sku) params.set('sku', sourceLine.sku)
+  if (sourceLine?.purchaseDate) params.set('purchaseDate', sourceLine.purchaseDate)
+  if (claim.id) params.set('excludeClaimId', claim.id)
+  const query = params.toString()
+  return query.length ? query : null
+}
+
+function statusVariant(status: string | null | undefined): StatusBadgeVariant {
+  if (status === 'in_warranty') return 'success'
+  if (status === 'out_of_warranty') return 'warning'
+  return 'neutral'
+}
+
+function formatDateLabel(value: string, fallback: string): string {
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return fallback
+  return date.toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  })
+}
+
+export function EntitlementLookupBadge({ claim, lines }: EntitlementLookupBadgeProps) {
+  const t = useT()
+  const query = buildEntitlementQuery(claim, lines)
+  const [debouncedQuery, setDebouncedQuery] = React.useState<string | null>(query)
+  const [result, setResult] = React.useState<EntitlementResult | null>(null)
+  const [loading, setLoading] = React.useState(false)
+  const [error, setError] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    if (!query) {
+      setDebouncedQuery(null)
+      setResult(null)
+      setError(null)
+      return
+    }
+    const timer = window.setTimeout(() => {
+      setDebouncedQuery(query)
+    }, 350)
+    return () => window.clearTimeout(timer)
+  }, [query])
+
+  React.useEffect(() => {
+    if (!debouncedQuery) {
+      setResult(null)
+      setError(null)
+      setLoading(false)
+      return
+    }
+    let cancelled = false
+    setLoading(true)
+    setError(null)
+    apiCall<EntitlementResult>(
+      `/api/warranty_claims/entitlement?${debouncedQuery}`,
+      undefined,
+      { fallback: { warrantyStatus: 'unknown' } },
+    )
+      .then((call) => {
+        if (cancelled) return
+        if (!call.ok) {
+          setResult(null)
+          setError(t('warranty_claims.entitlement.error.load', 'Failed to resolve warranty entitlement.'))
+          return
+        }
+        setResult(call.result ?? { warrantyStatus: 'unknown' })
+      })
+      .catch(() => {
+        if (cancelled) return
+        setResult(null)
+        setError(t('warranty_claims.entitlement.error.load', 'Failed to resolve warranty entitlement.'))
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [debouncedQuery, t])
+
+  if (!query) return null
+  if (loading) {
+    return (
+      <span className="inline-flex items-center gap-2 text-xs text-muted-foreground">
+        <Spinner size="sm" />
+        {t('warranty_claims.entitlement.loading', 'Checking entitlement...')}
+      </span>
+    )
+  }
+  if (error) return <span className="text-xs text-muted-foreground">{error}</span>
+  if (!result) return null
+
+  const status = result.warrantyStatus ?? 'unknown'
+  const coverage = result.coverageType
+    ? t(`warranty_claims.entitlement.coverage.${result.coverageType}`, result.coverageType)
+    : null
+  const source = result.source
+    ? t(`warranty_claims.entitlement.source.${result.source}`, result.source)
+    : null
+  const priorClaimCount = typeof result.priorClaimCount === 'number' ? result.priorClaimCount : null
+  const relatedClaimNumbers = Array.isArray(result.relatedClaimNumbers)
+    ? result.relatedClaimNumbers.filter((claimNumber): claimNumber is string => typeof claimNumber === 'string' && claimNumber.trim().length > 0)
+    : []
+  const linkedClaimNumbers = relatedClaimNumbers.slice(0, MAX_LINKED_CLAIM_NUMBERS)
+  const hiddenClaimNumberCount = relatedClaimNumbers.length - linkedClaimNumbers.length
+
+  return (
+    <span className="inline-flex flex-wrap items-center gap-2">
+      <StatusBadge variant={statusVariant(status)}>
+        {t(`warranty_claims.entitlement.status.${status}`, status)}
+      </StatusBadge>
+      {coverage ? <StatusBadge variant="neutral">{coverage}</StatusBadge> : null}
+      {result.expiresAt ? (
+        <span className="text-xs text-muted-foreground">
+          {t('warranty_claims.entitlement.expiresAt', 'Expires {date}', {
+            date: formatDateLabel(result.expiresAt, result.expiresAt),
+          })}
+        </span>
+      ) : null}
+      {source ? (
+        <span className="text-xs text-muted-foreground">
+          {t('warranty_claims.entitlement.sourceLabel', 'Source: {source}', { source })}
+        </span>
+      ) : null}
+      {result.hasPriorClaims || priorClaimCount ? (
+        <>
+          <StatusBadge variant="warning">
+            {t('warranty_claims.entitlement.priorClaims', '{count} prior claims', {
+              count: priorClaimCount ?? 1,
+            })}
+          </StatusBadge>
+          {linkedClaimNumbers.map((claimNumber) => (
+            <Link
+              key={claimNumber}
+              href={`/backend/warranty_claims?search=${encodeURIComponent(claimNumber)}`}
+              className="text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground"
+              onClick={(event) => event.stopPropagation()}
+            >
+              {claimNumber}
+            </Link>
+          ))}
+          {hiddenClaimNumberCount > 0 ? (
+            <span className="text-xs text-muted-foreground">
+              {t('warranty_claims.entitlement.priorClaims.more', '+{count} more', {
+                count: hiddenClaimNumberCount,
+              })}
+            </span>
+          ) : null}
+        </>
+      ) : null}
+    </span>
+  )
+}

package/src/modules/warranty_claims/backend/components/ReceivingPanel.tsx

@@ -0,0 +1,300 @@
+"use client"
+
+import * as React from 'react'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'
+import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
+import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { ErrorMessage } from '@open-mercato/ui/backend/detail'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
+import { apiCall, withScopedApiRequestHeaders } from '@open-mercato/ui/backend/utils/apiCall'
+import { buildOptimisticLockHeader } from '@open-mercato/ui/backend/utils/optimisticLock'
+import { surfaceRecordConflict } from '@open-mercato/ui/backend/conflicts'
+
+type ConditionGrade = 'A' | 'B' | 'C' | 'D'
+
+type ReceivingLine = {
+  id: string
+  lineNo: number | null
+  productName: string | null
+  sku: string | null
+  serialNumber: string | null
+  conditionGrade: string | null
+  quarantineStatus: string | null
+  inspectionNotes: string | null
+  updatedAt: string | null
+}
+
+type MutationContext = {
+  formId: string
+  resourceKind: string
+  resourceId?: string
+  retryLastMutation: () => Promise<boolean>
+}
+
+type ReceivingPanelProps = {
+  claimId: string
+  lines: ReceivingLine[]
+  canManage: boolean
+  receivingCapable: boolean
+  onRefresh: () => Promise<void>
+}
+
+const CONDITION_GRADES: ConditionGrade[] = ['A', 'B', 'C', 'D']
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+}
+
+function readErrorKey(value: unknown): string | null {
+  if (!isRecord(value)) return null
+  return typeof value.error === 'string' && value.error.trim().length ? value.error.trim() : null
+}
+
+function toApiError(status: number, result: unknown, fallbackKey: string, t: TranslateFn): Error & { status?: number } {
+  const key = readErrorKey(result) ?? fallbackKey
+  return Object.assign(new Error(t(key, key)), { status })
+}
+
+function formatLineTitle(line: ReceivingLine, t: TranslateFn): string {
+  const identifier = line.lineNo !== null
+    ? `#${line.lineNo}`
+    : t('warranty_claims.form.lines.unnamed', 'Unnamed line')
+  const product = line.productName ?? line.sku ?? line.serialNumber
+  return product ? `${identifier} ${product}` : identifier
+}
+
+function gradeVariant(grade: string | null): 'success' | 'info' | 'warning' | 'error' | 'neutral' {
+  if (grade === 'A') return 'success'
+  if (grade === 'B') return 'info'
+  if (grade === 'C') return 'warning'
+  if (grade === 'D') return 'error'
+  return 'neutral'
+}
+
+function quarantineVariant(status: string | null): 'success' | 'warning' | 'neutral' {
+  if (status === 'held') return 'warning'
+  if (status === 'released') return 'success'
+  return 'neutral'
+}
+
+export function ReceivingPanel({
+  claimId,
+  lines,
+  canManage,
+  receivingCapable,
+  onRefresh,
+}: ReceivingPanelProps) {
+  const t = useT()
+  const [dialogLine, setDialogLine] = React.useState<ReceivingLine | null>(null)
+  const [conditionGrade, setConditionGrade] = React.useState<ConditionGrade>('A')
+  const [inspectionNotes, setInspectionNotes] = React.useState('')
+  const [saving, setSaving] = React.useState(false)
+  const [error, setError] = React.useState<string | null>(null)
+  const { runMutation, retryLastMutation } = useGuardedMutation<MutationContext>({
+    contextId: `warranty-claim-receiving:${claimId}`,
+    blockedMessage: t('warranty_claims.common.saveBlocked', 'Save blocked by a mutation guard.'),
+  })
+
+  React.useEffect(() => {
+    if (!dialogLine) return
+    const nextGrade = CONDITION_GRADES.includes(dialogLine.conditionGrade as ConditionGrade)
+      ? dialogLine.conditionGrade as ConditionGrade
+      : 'A'
+    setConditionGrade(nextGrade)
+    setInspectionNotes(dialogLine.inspectionNotes ?? '')
+    setError(null)
+  }, [dialogLine])
+
+  if (!receivingCapable || lines.length === 0) return null
+
+  const runReceivingAction = async (line: ReceivingLine, body: Record<string, unknown>, successKey: string) => {
+    setSaving(true)
+    setError(null)
+    try {
+      await runMutation({
+        operation: async () => {
+          const call = await withScopedApiRequestHeaders(
+            buildOptimisticLockHeader(line.updatedAt),
+            () => apiCall('/api/warranty_claims/receiving', {
+              method: 'POST',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify({ ...body, updatedAt: line.updatedAt }),
+            }),
+          )
+          if (!call.ok) throw toApiError(call.status, call.result, 'warranty_claims.receiving.error.save', t)
+          return call
+        },
+        context: {
+          formId: `warranty-claim-receiving:${claimId}:${line.id}`,
+          resourceKind: 'warranty_claims.claim_line',
+          resourceId: line.id,
+          retryLastMutation,
+        },
+        mutationPayload: body,
+      })
+      flash(t(successKey, 'Receiving action saved.'), 'success')
+      setDialogLine(null)
+      await onRefresh()
+    } catch (err) {
+      if (surfaceRecordConflict(err, t, { onRefresh })) return
+      const message = err instanceof Error && err.message
+        ? err.message
+        : t('warranty_claims.receiving.error.save', 'Failed to save receiving details.')
+      setError(message)
+      flash(message, 'error')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const submitGrade = async () => {
+    if (!dialogLine) return
+    await runReceivingAction(
+      dialogLine,
+      {
+        lineId: dialogLine.id,
+        conditionGrade,
+        inspectionNotes: inspectionNotes.trim() || undefined,
+      },
+      'warranty_claims.receiving.flash.saved',
+    )
+  }
+
+  const releaseLine = async (line: ReceivingLine) => {
+    await runReceivingAction(
+      line,
+      { lineId: line.id, action: 'release' },
+      'warranty_claims.receiving.flash.released',
+    )
+  }
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-4 shadow-sm">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <h3 className="text-sm font-semibold">{t('warranty_claims.receiving.title', 'Receiving and grading')}</h3>
+          <p className="text-xs text-muted-foreground">
+            {t('warranty_claims.receiving.description', 'Capture received condition grades and quarantine status per line.')}
+          </p>
+        </div>
+        {!canManage ? (
+          <StatusBadge variant="neutral">
+            {t('warranty_claims.receiving.readOnly', 'Read only')}
+          </StatusBadge>
+        ) : null}
+      </div>
+      {error ? (
+        <div className="mt-3">
+          <ErrorMessage label={error} />
+        </div>
+      ) : null}
+      <div className="mt-3 space-y-3">
+        {lines.map((line) => (
+          <div key={line.id} className="flex flex-wrap items-start justify-between gap-3 rounded-md border border-border p-3">
+            <div className="min-w-0 space-y-2">
+              <div className="text-sm font-medium">{formatLineTitle(line, t)}</div>
+              <div className="flex flex-wrap items-center gap-2">
+                <StatusBadge variant={gradeVariant(line.conditionGrade)}>
+                  {line.conditionGrade
+                    ? t(`warranty_claims.receiving.grade.${line.conditionGrade}`, `Grade ${line.conditionGrade}`)
+                    : t('warranty_claims.receiving.grade.none', 'No grade')}
+                </StatusBadge>
+                <StatusBadge variant={quarantineVariant(line.quarantineStatus)}>
+                  {t(
+                    `warranty_claims.receiving.quarantine.${line.quarantineStatus ?? 'none'}`,
+                    line.quarantineStatus ?? 'none',
+                  )}
+                </StatusBadge>
+              </div>
+              {line.inspectionNotes ? (
+                <p className="text-xs text-muted-foreground">{line.inspectionNotes}</p>
+              ) : null}
+            </div>
+            {canManage ? (
+              <div className="flex flex-wrap items-center gap-2">
+                <Button type="button" variant="outline" size="sm" onClick={() => setDialogLine(line)}>
+                  {t('warranty_claims.receiving.actions.grade', 'Grade / Receive')}
+                </Button>
+                {line.quarantineStatus === 'held' ? (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    disabled={saving}
+                    onClick={() => { void releaseLine(line) }}
+                  >
+                    {t('warranty_claims.receiving.actions.release', 'Release')}
+                  </Button>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+        ))}
+      </div>
+
+      <Dialog open={dialogLine !== null} onOpenChange={(open) => { if (!open) setDialogLine(null) }}>
+        <DialogContent
+          className="max-w-lg"
+          onKeyDown={(event) => {
+            if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+              event.preventDefault()
+              void submitGrade()
+            }
+            if (event.key === 'Escape') {
+              event.preventDefault()
+              setDialogLine(null)
+            }
+          }}
+        >
+          <DialogHeader>
+            <DialogTitle>{t('warranty_claims.receiving.dialog.title', 'Grade received line')}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="warranty-claim-condition-grade">
+                {t('warranty_claims.receiving.fields.conditionGrade', 'Condition grade')}
+              </Label>
+              <Select value={conditionGrade} onValueChange={(value) => setConditionGrade(value as ConditionGrade)}>
+                <SelectTrigger id="warranty-claim-condition-grade">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {CONDITION_GRADES.map((grade) => (
+                    <SelectItem key={grade} value={grade}>
+                      {t(`warranty_claims.receiving.grade.${grade}`, `Grade ${grade}`)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="warranty-claim-inspection-notes">
+                {t('warranty_claims.receiving.fields.inspectionNotes', 'Inspection notes')}
+              </Label>
+              <Textarea
+                id="warranty-claim-inspection-notes"
+                value={inspectionNotes}
+                onChange={(event) => setInspectionNotes(event.target.value)}
+                rows={4}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setDialogLine(null)}>
+              {t('common.cancel', 'Cancel')}
+            </Button>
+            <Button type="button" disabled={saving} onClick={() => { void submitGrade() }}>
+              {saving ? t('warranty_claims.common.saving', 'Saving...') : t('warranty_claims.form.submit', 'Save')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}