feat(T06): Verkaufsmodul + Rechtsdokumente + DATEV-Export + Sales UI

2026-07-17 01:58:34 +02:00
parent a38d340ddc
commit 6603e411e9
33 changed files with 3481 additions and 107 deletions
@@ -0,0 +1,206 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { Table } from '@/components/ui/Table';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import {
+  listSales,
+  type SaleResponse,
+  type SaleListParams,
+} from '@/lib/sales';
+import type { PaginatedResponse } from '@/lib/api';
+
+const STATUS_OPTIONS = ['draft', 'completed', 'cancelled'];
+
+export function SaleList() {
+  const router = useRouter();
+  const [sales, setSales] = useState<SaleResponse[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(20);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [filters, setFilters] = useState<SaleListParams>({
+    page: 1,
+    page_size: 20,
+  });
+
+  const fetchSales = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data: PaginatedResponse<SaleResponse> = await listSales(filters);
+      setSales(data.items);
+      setTotal(data.total);
+      setPage(data.page);
+    } catch (err: unknown) {
+      const apiErr = err as { error?: { message?: string } };
+      setError(apiErr?.error?.message || 'Failed to load sales');
+    } finally {
+      setLoading(false);
+    }
+  }, [filters]);
+
+  useEffect(() => {
+    fetchSales();
+  }, [fetchSales]);
+
+  const handleFilterChange = (key: keyof SaleListParams, value: string) => {
+    setFilters(prev => ({
+      ...prev,
+      page: 1,
+      [key]: value || undefined,
+    }));
+  };
+
+  const handlePageChange = (newPage: number) => {
+    setFilters(prev => ({ ...prev, page: newPage }));
+  };
+
+  const columns = [
+    {
+      key: 'sale_date',
+      label: 'Datum',
+      render: (row: SaleResponse) =>
+        new Date(row.sale_date).toLocaleDateString('de-DE'),
+    },
+    {
+      key: 'vehicle',
+      label: 'Fahrzeug',
+      render: (row: SaleResponse) =>
+        row.vehicle ? `${row.vehicle.make} ${row.vehicle.model}` : 'N/A',
+    },
+    {
+      key: 'buyer',
+      label: 'Käufer',
+      render: (row: SaleResponse) =>
+        row.buyer?.company_name || 'N/A',
+    },
+    {
+      key: 'sale_price',
+      label: 'Preis',
+      render: (row: SaleResponse) =>
+        new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(row.sale_price),
+    },
+    {
+      key: 'status',
+      label: 'Status',
+      render: (row: SaleResponse) => (
+        <span
+          data-testid={`sale-status-${row.id}`}
+          className={`px-2 py-1 rounded text-xs font-medium ${
+            row.status === 'completed' ? 'bg-green-100 text-green-800' :
+            row.status === 'cancelled' ? 'bg-red-100 text-red-800' :
+            'bg-yellow-100 text-yellow-800'
+          }`}
+        >
+          {row.status}
+        </span>
+      ),
+    },
+    {
+      key: 'is_gwg',
+      label: 'GwG',
+      render: (row: SaleResponse) =>
+        row.is_gwg ? (
+          <span data-testid={`sale-gwg-${row.id}`} className="text-blue-600 font-medium">Ja</span>
+        ) : 'Nein',
+    },
+    {
+      key: 'actions',
+      label: 'Aktionen',
+      render: (row: SaleResponse) => (
+        <button
+          data-testid={`sale-row-${row.id}`}
+          onClick={() => router.push(`/de/verkauf/${row.id}`)}
+          className="text-primary hover:underline"
+        >
+          Details
+        </button>
+      ),
+    },
+  ];
+
+  const totalPages = Math.ceil(total / pageSize);
+
+  return (
+    <div className="space-y-4" data-testid="sale-list">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Verkäufe</h1>
+        <Button onClick={() => router.push('/de/verkauf/neu')} data-testid="sale-create-btn">
+          Neuer Verkauf
+        </Button>
+      </div>
+
+      {/* Filters */}
+      <div className="flex gap-4 items-end" data-testid="sale-filters">
+        <div className="flex-1">
+          <label className="block text-sm font-medium mb-1">Status</label>
+          <select
+            data-testid="sale-status-filter"
+            className="w-full border rounded px-3 py-2"
+            value={filters.status || ''}
+            onChange={e => handleFilterChange('status', e.target.value)}
+          >
+            <option value="">Alle</option>
+            {STATUS_OPTIONS.map(s => (
+              <option key={s} value={s}>{s}</option>
+            ))}
+          </select>
+        </div>
+        <div className="flex-1">
+          <label className="block text-sm font-medium mb-1">Von</label>
+          <Input
+            type="date"
+            data-testid="sale-date-from"
+            value={filters.date_from || ''}
+            onChange={e => handleFilterChange('date_from', e.target.value)}
+          />
+        </div>
+        <div className="flex-1">
+          <label className="block text-sm font-medium mb-1">Bis</label>
+          <Input
+            type="date"
+            data-testid="sale-date-to"
+            value={filters.date_to || ''}
+            onChange={e => handleFilterChange('date_to', e.target.value)}
+          />
+        </div>
+      </div>
+
+      {error && (
+        <div className="bg-red-50 text-red-600 p-3 rounded" data-testid="sale-error">
+          {error}
+        </div>
+      )}
+
+      {loading ? (
+        <div data-testid="sale-loading">Wird geladen...</div>
+      ) : (
+        <Table columns={columns} data={sales} rowKey={(row) => row.id} />
+      )}
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between" data-testid="sale-pagination">
+          <Button
+            disabled={page <= 1}
+            onClick={() => handlePageChange(page - 1)}
+          >
+            Zurück
+          </Button>
+          <span>Seite {page} von {totalPages}</span>
+          <Button
+            disabled={page >= totalPages}
+            onClick={() => handlePageChange(page + 1)}
+          >
+            Weiter
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}