refactor(intake): split IntakeDetailView god-file into detail/* sub-components (628→178)

The 628-line intake detail view mixed ~14 JSX sections in one return. Decompose
into a thin composition + 7 co-located sub-components under intake/detail/ — pure
view split, useIntakeDetail hook / types / ChecklistGroup untouched:

- IntakeHeader · IntakeDeviceSummary · IntakeQcStatus (QC-status cluster) ·
  IntakeChecklistSection · IntakePublishSection · IntakeTierChangeDialog ·
  IntakeTimeline

Behavior identical: verbatim JSX, every status-conditional preserved, multi-
section children returned as Fragments so DOM order + space-y-6 rhythm are
unchanged; derived view values computed once in the composition and threaded as
props. Verified: full tsc exit 0, eslint clean.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: catomean

src/app/admin/intake/IntakeDetailView.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { Button } from '@/components/ui/button'
+import { AlertCircle } from 'lucide-react'
+import type { ChecklistResult } from '@/config/intake-checklist'
+import { INTAKE_STATUS } from '@/config/intake-status'
+import Heading from '@/components/admin/AdminHeading'
+import { ChecklistGroup } from '../ChecklistGroup'
+import type { DetailData } from '../types'
+
+interface IntakeChecklistSectionProps {
+  detail: DetailData
+  checklistPendingItems: ReadonlySet<string>
+  onSetChecklistResult: (
+    itemId: string,
+    result: ChecklistResult | null,
+    notes?: string,
+    options?: { secondPersonOverride?: boolean },
+  ) => void
+  qcGate: boolean
+  publishPrice: number
+  publishing: boolean
+  onStartQc: () => void
+  startingQc: boolean
+  onPublish: (options?: { skipQc?: boolean }) => void
+}
+
+export function IntakeChecklistSection({
+  detail,
+  checklistPendingItems,
+  onSetChecklistResult,
+  qcGate,
+  publishPrice,
+  publishing,
+  onStartQc,
+  startingQc,
+  onPublish,
+}: IntakeChecklistSectionProps) {
+  const t = useTranslations('admin.intake.detail')
+  return (
+    <>
+      {/* Checklist Groups */}
+      <div className="space-y-4">
+        {detail.checklist_grouped.map((group) => (
+          <ChecklistGroup
+            key={`${group.category}-${detail.marketplace_status}`}
+            group={group}
+            readOnly={detail.marketplace_status === INTAKE_STATUS.PUBLISHED}
+            pendingItems={checklistPendingItems}
+            onSetResult={onSetChecklistResult}
+          />
+        ))}
+      </div>
+
+      {/* QC gate — quick capture of a device category that requires the
+          checklist: no publishing until the workflow is started */}
+      {qcGate && detail.marketplace_status !== INTAKE_STATUS.PUBLISHED && (
+        <div className="border-2 border-warning-300 bg-warning-50 dark:bg-warning-900/20 rounded-lg p-4 space-y-3">
+          <Heading level={3} className="font-medium flex items-center gap-2 text-warning-800 dark:text-warning-200">
+            <AlertCircle className="w-4 h-4" /> {t('qcGate.heading')}
+          </Heading>
+          <p className="text-sm text-warning-700 dark:text-warning-200">{t('qcGate.body')}</p>
+          <div className="flex flex-wrap items-center gap-2">
+            <Button
+              type="button"
+              onClick={onStartQc}
+              disabled={startingQc}
+              variant="primary"
+              size="sm"
+            >
+              {startingQc ? t('qcGate.starting') : t('qcGate.start')}
+            </Button>
+            {/* Same escape hatch as the checklist path: one click, audited,
+                listing without Prüfsiegel. */}
+            <Button
+              type="button"
+              onClick={() => onPublish({ skipQc: true })}
+              disabled={publishing || publishPrice <= 0}
+              variant="outline"
+              size="sm"
+              title={t('publishUntestedTitle')}
+            >
+              {publishing ? t('publishing') : t('publishUntested')}
+            </Button>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

src/app/admin/intake/detail/IntakeChecklistSection.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { Image as ImageIcon } from 'lucide-react'
+import { KATEGORIEN, getConditionLabel } from '@/config/erfassung'
+import { formatDateShort } from '@/lib/date-formats'
+import type { DetailData } from '../types'
+
+interface IntakeDeviceSummaryProps {
+  detail: DetailData
+}
+
+export function IntakeDeviceSummary({ detail }: IntakeDeviceSummaryProps) {
+  const t = useTranslations('admin.intake.detail')
+  return (
+    <div className="bg-surface-base border rounded-lg p-4">
+      <div className="flex gap-4">
+        <div className="h-24 w-24 shrink-0 overflow-hidden rounded-lg border border-subtle bg-surface-raised">
+          {detail.image_url ? (
+
+            <img src={detail.image_url} alt={`${detail.brand} ${detail.product_name}`} className="h-full w-full object-cover" />
+          ) : (
+            <div className="flex h-full w-full items-center justify-center">
+              <ImageIcon className="h-8 w-8 text-text-muted" aria-hidden="true" />
+            </div>
+          )}
+        </div>
+        <dl className="grid flex-1 grid-cols-2 gap-x-4 gap-y-2 text-sm sm:grid-cols-3">
+          <div>
+            <dt className="text-xs text-text-tertiary">{t('device.condition')}</dt>
+            <dd className="font-medium text-text-primary">{getConditionLabel(detail.condition)}</dd>
+          </div>
+          <div>
+            <dt className="text-xs text-text-tertiary">{t('device.category')}</dt>
+            <dd className="font-medium text-text-primary">
+              {KATEGORIEN.find(k => k.value === detail.category)?.label || '—'}
+            </dd>
+          </div>
+          <div>
+            <dt className="text-xs text-text-tertiary">{t('device.price')}</dt>
+            <dd className="font-medium text-text-primary tabular-nums">
+              {detail.selling_price_chf != null ? `CHF ${Number(detail.selling_price_chf).toFixed(2)}` : '—'}
+            </dd>
+          </div>
+          <div className="col-span-2 sm:col-span-3">
+            <dt className="text-xs text-text-tertiary">{t('device.captured')}</dt>
+            <dd className="text-text-secondary">
+              {formatDateShort(detail.created_at)}
+              {detail.created_by_name ? ` · ${detail.created_by_name}` : ''}
+            </dd>
+          </div>
+        </dl>
+      </div>
+      {detail.short_description && (
+        <p className="mt-3 border-t border-subtle pt-3 text-sm text-text-secondary">
+          {detail.short_description}
+        </p>
+      )}
+    </div>
+  )
+}

src/app/admin/intake/detail/IntakeDeviceSummary.tsx

@@ -0,0 +1,105 @@
+'use client'
+
+import Link from 'next/link'
+import { useTranslations } from 'next-intl'
+import { adminInteractive } from '@/lib/admin-ui'
+import { Button } from '@/components/ui/button'
+import { Check, RefreshCw, AlertCircle, ArrowDownUp, QrCode } from 'lucide-react'
+import { ROUTES } from '@/config/routes'
+import {
+  INTAKE_TIERS,
+  INTAKE_TIER_LABELS,
+  INTAKE_TIER_ICONS,
+  QUICK_CAPTURE_LABEL,
+  QUICK_CAPTURE_ICON,
+} from '@/config/intake-checklist'
+import type { IntakeTier } from '@/config/intake-checklist'
+import { INTAKE_STATUS } from '@/config/intake-status'
+import { LISTING_STATUS } from '@/config/marketplace'
+import Heading from '@/components/admin/AdminHeading'
+import type { DetailData } from '../types'
+
+interface IntakeHeaderProps {
+  detail: DetailData
+  onBack: () => void
+  onRefresh: () => void
+  setNewTier: (tier: IntakeTier) => void
+  setShowTierChange: (show: boolean) => void
+}
+
+export function IntakeHeader({ detail, onBack, onRefresh, setNewTier, setShowTierChange }: IntakeHeaderProps) {
+  const t = useTranslations('admin.intake.detail')
+  return (
+    <div className="flex items-start justify-between">
+      <div>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onBack}
+          className="text-sm text-action hover:underline mb-2 flex items-center gap-1"
+        >
+          {t('backToPipeline')}
+        </Button>
+        <Heading level={2} className="text-lg font-semibold">{detail.brand} {detail.product_name}</Heading>
+        <div className="flex items-center gap-3 text-sm text-text-tertiary mt-1">
+          <span className="font-mono">{detail.item_uuid}</span>
+          <span>
+            {detail.intake_tier
+              ? <>{INTAKE_TIER_ICONS[detail.intake_tier]} {INTAKE_TIER_LABELS[detail.intake_tier]}</>
+              : <>{QUICK_CAPTURE_ICON} {QUICK_CAPTURE_LABEL}</>}
+          </span>
+          {detail.source_donation_id && (
+            <span className="text-action">{detail.donor_name ? t('donationWithName', { name: detail.donor_name }) : t('donation')}</span>
+          )}
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2 flex-wrap justify-end">
+        <Link
+          href={ROUTES.admin.intakeLabel(detail.id)}
+          className={`flex items-center gap-1 px-2 py-1.5 text-xs border rounded-lg min-h-11 sm:min-h-0 ${adminInteractive.rowHover}`}
+          title={t('printLabelTitle')}
+        >
+          <QrCode className="w-3.5 h-3.5" /> {t('printLabel')}
+        </Link>
+        {detail.marketplace_status === INTAKE_STATUS.PUBLISHED ? (
+          detail.listing_id && detail.listing_status === LISTING_STATUS.ACTIVE ? (
+            <Link
+              href={ROUTES.public.marketplaceListing(detail.listing_id)}
+              target="_blank"
+              className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm bg-action-muted text-action hover:underline"
+            >
+              <Check className="w-4 h-4" /> {t('inShop')}
+            </Link>
+          ) : detail.listing_status === LISTING_STATUS.SOLD ? (
+            <span className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm bg-surface-overlay text-text-secondary">
+              <Check className="w-4 h-4" /> {t('listingSold')}
+            </span>
+          ) : (
+            <span className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm bg-warning-100 text-warning-800 dark:bg-warning-900/30 dark:text-warning-200">
+              <AlertCircle className="w-4 h-4" /> {t('listingInactive')}
+            </span>
+          )
+        ) : (
+          <>
+            {detail.intake_tier && (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => { setNewTier(detail.intake_tier === INTAKE_TIERS.REFURBISH ? INTAKE_TIERS.PARTS : INTAKE_TIERS.REFURBISH); setShowTierChange(true) }}
+                className={`flex items-center gap-1 px-2 py-1.5 text-xs border rounded-lg ${adminInteractive.rowHover}`}
+                title={t('changeTier')}
+              >
+                <ArrowDownUp className="w-3.5 h-3.5" /> {t('changeTier')}
+              </Button>
+            )}
+            <Button onClick={onRefresh} variant="ghost" size="icon" title={t('refresh')}>
+              <RefreshCw className="w-4 h-4" />
+            </Button>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

src/app/admin/intake/detail/IntakeHeader.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+import Link from 'next/link'
+import { useTranslations } from 'next-intl'
+import { adminInteractive } from '@/lib/admin-ui'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { ExternalLink, AlertCircle, ClipboardList } from 'lucide-react'
+import { ROUTES } from '@/config/routes'
+import { INTAKE_TIERS } from '@/config/intake-checklist'
+import { INTAKE_STATUS } from '@/config/intake-status'
+import Heading from '@/components/admin/AdminHeading'
+import type { DetailData, ChecklistItemWithState } from '../types'
+
+interface IntakePublishSectionProps {
+  detail: DetailData
+  qcGate: boolean
+  openRequired: ChecklistItemWithState[]
+  publishPrice: number
+  setPublishPrice: (price: number) => void
+  publishing: boolean
+  onPublish: (options?: { skipQc?: boolean }) => void
+}
+
+export function IntakePublishSection({
+  detail,
+  qcGate,
+  openRequired,
+  publishPrice,
+  setPublishPrice,
+  publishing,
+  onPublish,
+}: IntakePublishSectionProps) {
+  const t = useTranslations('admin.intake.detail')
+
+  // Publish Section — refurbish-tier items (checklist-gated) and quick
+  // captures of accessory categories (no QC required)
+  if (!(!detail.checklist_complete && (detail.intake_tier === INTAKE_TIERS.REFURBISH || (detail.intake_tier === null && !qcGate)) && detail.marketplace_status !== INTAKE_STATUS.PUBLISHED)) {
+    return null
+  }
+
+  return (
+    <div className={`border-2 rounded-lg p-4 ${
+      detail.checklist_complete
+        ? 'border-strong bg-action-muted'
+        : 'border bg-surface-raised'
+    }`}>
+      <Heading level={3} className="font-medium mb-3 flex items-center gap-2">
+        <ExternalLink className="w-4 h-4" />
+        {t('publishHeading')}
+      </Heading>
+
+      {!detail.checklist_complete && (
+        <div className="flex items-start gap-2 mb-3 text-sm text-warning-700 dark:text-warning-200 bg-warning-50 dark:bg-warning-900/20 p-2 rounded-sm">
+          <AlertCircle className="w-4 h-4 mt-0.5 shrink-0" />
+          <span>
+            {t('publishGate')}
+            {openRequired.length > 0 && (
+              <> {t('publishGateMissing', { items: openRequired.map(i => i.label).join(', ') })}</>
+            )}
+          </span>
+        </div>
+      )}
+
+      <div className="flex flex-wrap items-end gap-3">
+        <div>
+          <label className="block text-sm font-medium mb-1">{t('sellingPriceLabel')}</label>
+          <Input
+            type="number"
+            value={publishPrice || ''}
+            onChange={(e) => setPublishPrice(Number(e.target.value))}
+            min={0}
+            className="w-32"
+          />
+        </div>
+        <Button
+          onClick={() => onPublish()}
+          disabled={!detail.checklist_complete || publishing || publishPrice <= 0}
+          variant="primary"
+          size="sm"
+        >
+          {publishing ? t('publishing') : t('publishNow')}
+        </Button>
+        {/* Deliberate escape hatch: publish now, explicitly WITHOUT the
+            Prüfsiegel (audited; blocked if a check actually failed). */}
+        {!detail.checklist_failed && (
+          <Button
+            onClick={() => onPublish({ skipQc: true })}
+            disabled={publishing || publishPrice <= 0}
+            variant="outline"
+            size="sm"
+            title={t('publishUntestedTitle')}
+          >
+            {publishing ? t('publishing') : t('publishUntested')}
+          </Button>
+        )}
+        {detail.checklist_complete && (
+          <Link
+            href={`${ROUTES.admin.intakeCapture}?edit=${detail.id}&returnTo=${encodeURIComponent(ROUTES.admin.intakeDetail(detail.id))}`}
+            className={`inline-flex items-center gap-1.5 px-4 py-2 border border-default text-text-secondary rounded-lg ${adminInteractive.rowHover} text-sm font-medium`}
+            title={t('openFullErfassungTitle')}
+          >
+            <ClipboardList className="w-4 h-4" />
+            {t('openFullErfassung')}
+          </Link>
+        )}
+      </div>
+    </div>
+  )
+}