feat(T03): OCR-Erfassung via OpenRouter Qwen2.5-VL + OCR UI with drag-and-drop

2026-07-17 00:45:14 +02:00
parent b128ea6b39
commit 149ac04dc1
20 changed files with 2348 additions and 182 deletions
@@ -0,0 +1,131 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import { applyOCRToVehicle, type OCRResultResponse } from '@/lib/ocr';
+
+interface OCRDetailProps {
+  result: OCRResultResponse;
+  onApplyComplete?: () => void;
+}
+
+export function OCRDetail({ result, onApplyComplete }: OCRDetailProps) {
+  const [applying, setApplying] = useState(false);
+  const [applyError, setApplyError] = useState<string | null>(null);
+  const [applySuccess, setApplySuccess] = useState<string | null>(null);
+
+  const handleApply = async () => {
+    setApplying(true);
+    setApplyError(null);
+    setApplySuccess(null);
+    try {
+      const response = await applyOCRToVehicle(result.id);
+      setApplySuccess(`Applied ${response.updated_fields.length} fields to vehicle`);
+      if (onApplyComplete) onApplyComplete();
+    } catch (err: unknown) {
+      const apiErr = err as { error?: { message?: string } };
+      setApplyError(apiErr?.error?.message || 'Failed to apply OCR data');
+    } finally {
+      setApplying(false);
+    }
+  };
+
+  const data = result.structured_data;
+  const canApply = result.vehicle_id && result.structured_data && result.status === 'completed';
+
+  return (
+    <div data-testid="ocr-detail" className="space-y-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {/* Original Scan Side */}
+        <Card title="Original Scan">
+          <div data-testid="ocr-original-scan" className="space-y-2">
+            <p className="text-sm text-text-muted">File: {result.file_name}</p>
+            <p className="text-sm text-text-muted">Type: {result.mime_type}</p>
+            <p className="text-sm text-text-muted">Status: {result.status}</p>
+            {result.confidence_score != null && (
+              <p className="text-sm text-text-muted">
+                Confidence: {(result.confidence_score * 100).toFixed(1)}%
+              </p>
+            )}
+            {result.error_message && (
+              <p className="text-sm text-error">Error: {result.error_message}</p>
+            )}
+            {result.raw_text && (
+              <div className="mt-4">
+                <p className="text-sm font-medium text-text mb-1">Raw Text:</p>
+                <pre data-testid="ocr-raw-text" className="text-xs bg-gray-50 p-3 rounded overflow-auto max-h-48">
+                  {result.raw_text}
+                </pre>
+              </div>
+            )}
+          </div>
+        </Card>
+
+        {/* Extracted Data Side */}
+        <Card title="Extracted Data">
+          <div data-testid="ocr-extracted-data" className="space-y-2">
+            {data ? (
+              <dl className="space-y-2">
+                <div className="flex justify-between">
+                  <dt className="text-sm font-medium text-text">Brand:</dt>
+                  <dd className="text-sm text-text-muted" data-testid="ocr-field-brand">{data.brand || '-'}</dd>
+                </div>
+                <div className="flex justify-between">
+                  <dt className="text-sm font-medium text-text">Model:</dt>
+                  <dd className="text-sm text-text-muted" data-testid="ocr-field-model">{data.model || '-'}</dd>
+                </div>
+                <div className="flex justify-between">
+                  <dt className="text-sm font-medium text-text">VIN:</dt>
+                  <dd className="text-sm text-text-muted" data-testid="ocr-field-vin">{data.vin || '-'}</dd>
+                </div>
+                <div className="flex justify-between">
+                  <dt className="text-sm font-medium text-text">First Registration:</dt>
+                  <dd className="text-sm text-text-muted" data-testid="ocr-field-first_registration">{data.first_registration || '-'}</dd>
+                </div>
+                <div className="flex justify-between">
+                  <dt className="text-sm font-medium text-text">Mileage:</dt>
+                  <dd className="text-sm text-text-muted" data-testid="ocr-field-mileage">{data.mileage != null ? `${data.mileage} km` : '-'}</dd>
+                </div>
+                <div className="flex justify-between">
+                  <dt className="text-sm font-medium text-text">Power (kW):</dt>
+                  <dd className="text-sm text-text-muted" data-testid="ocr-field-power_kw">{data.power_kw != null ? `${data.power_kw} kW` : '-'}</dd>
+                </div>
+                <div className="flex justify-between">
+                  <dt className="text-sm font-medium text-text">Fuel Type:</dt>
+                  <dd className="text-sm text-text-muted" data-testid="ocr-field-fuel_type">{data.fuel_type || '-'}</dd>
+                </div>
+              </dl>
+            ) : (
+              <p className="text-sm text-text-muted">No structured data available yet.</p>
+            )}
+
+            {canApply && (
+              <div className="mt-4">
+                <Button
+                  data-testid="ocr-apply-button"
+                  onClick={handleApply}
+                  loading={applying}
+                >
+                  Apply to Vehicle
+                </Button>
+              </div>
+            )}
+
+            {applyError && (
+              <div data-testid="ocr-apply-error" className="mt-2 p-3 bg-error/10 text-error rounded text-sm">
+                {applyError}
+              </div>
+            )}
+
+            {applySuccess && (
+              <div data-testid="ocr-apply-success" className="mt-2 p-3 bg-green-50 text-green-700 rounded text-sm">
+                {applySuccess}
+              </div>
+            )}
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}