feat(T02): vehicle management + mobile.de push + vehicle UI

- Vehicle model: 25+ fields, 5 vehicle types, soft-delete - Vehicle CRUD: 7 API endpoints with JWT auth, filter/sort/paginate - mobile.de: push/update/delete listings, field mapping, retry logic - MobileDeListing model for sync status tracking - Frontend: VehicleList, VehicleForm, VehicleDetail, MobileDeStatus - 73 backend tests (82% coverage), 16 frontend tests
2026-07-14 12:03:19 +02:00
parent d89304845a
commit 74b5e6afb8
24 changed files with 3847 additions and 97 deletions
@@ -0,0 +1,131 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { Button } from '@/components/ui/Button';
+import {
+  getMobileDeStatus,
+  pushToMobileDe,
+  type MobileDeStatusResponse,
+} from '@/lib/vehicles';
+
+interface MobileDeStatusProps {
+  vehicleId: string;
+}
+
+const STATUS_STYLES: Record<string, string> = {
+  synced: 'bg-green-100 text-green-800',
+  pending: 'bg-yellow-100 text-yellow-800',
+  fehler: 'bg-red-100 text-red-800',
+  deleted: 'bg-gray-100 text-gray-800',
+};
+
+const STATUS_LABELS: Record<string, string> = {
+  synced: 'Synced',
+  pending: 'Pending',
+  fehler: 'Error',
+  deleted: 'Deleted',
+};
+
+export function MobileDeStatus({ vehicleId }: MobileDeStatusProps) {
+  const [status, setStatus] = useState<MobileDeStatusResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [pushing, setPushing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchStatus = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await getMobileDeStatus(vehicleId);
+      setStatus(data);
+    } catch (err: unknown) {
+      const apiErr = err as { error?: { message?: string } };
+      setError(apiErr?.error?.message || 'Failed to load mobile.de status');
+    } finally {
+      setLoading(false);
+    }
+  }, [vehicleId]);
+
+  useEffect(() => {
+    fetchStatus();
+  }, [fetchStatus]);
+
+  const handlePush = async () => {
+    setPushing(true);
+    setError(null);
+    try {
+      await pushToMobileDe(vehicleId);
+      await fetchStatus();
+    } catch (err: unknown) {
+      const apiErr = err as { error?: { message?: string } };
+      setError(apiErr?.error?.message || 'Failed to push to mobile.de');
+    } finally {
+      setPushing(false);
+    }
+  };
+
+  const syncStatus = status?.sync_status || 'pending';
+  const statusStyle = STATUS_STYLES[syncStatus] || 'bg-gray-100 text-gray-800';
+  const statusLabel = STATUS_LABELS[syncStatus] || syncStatus;
+
+  return (
+    <div data-testid="mobile-de-status" className="p-6 bg-surface rounded-lg border border-border space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold text-text">mobile.de Status</h2>
+        <Button
+          variant="primary"
+          loading={pushing}
+          onClick={handlePush}
+          data-testid="mobile-de-push-button"
+        >
+          Push to mobile.de
+        </Button>
+      </div>
+
+      {loading ? (
+        <div data-testid="mobile-de-loading" className="text-text-muted">
+          Loading status...
+        </div>
+      ) : error ? (
+        <div data-testid="mobile-de-error" className="text-error">
+          {error}
+        </div>
+      ) : status ? (
+        <div className="space-y-3">
+          <div className="flex items-center gap-3">
+            <span className="text-sm font-medium text-text-muted">Sync Status:</span>
+            <span
+              data-testid="mobile-de-sync-status"
+              className={`px-3 py-1 rounded-full text-sm font-medium ${statusStyle}`}
+            >
+              {statusLabel}
+            </span>
+          </div>
+
+          <div data-testid="mobile-de-synced" className="grid grid-cols-2 gap-4">
+            <div>
+              <dt className="text-sm font-medium text-text-muted">Synced</dt>
+              <dd className="text-text">{status.synced ? 'Yes' : 'No'}</dd>
+            </div>
+            <div>
+              <dt className="text-sm font-medium text-text-muted">Ad ID</dt>
+              <dd className="text-text">{status.ad_id || '—'}</dd>
+            </div>
+            <div>
+              <dt className="text-sm font-medium text-text-muted">Synced At</dt>
+              <dd className="text-text">
+                {status.synced_at ? new Date(status.synced_at).toLocaleString('de-DE') : '—'}
+              </dd>
+            </div>
+          </div>
+
+          {status.error_log && (
+            <div data-testid="mobile-de-error-log" className="p-3 bg-error/10 text-error rounded-lg text-sm">
+              <strong>Error:</strong> {status.error_log}
+            </div>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}