feat(T06): Verkaufsmodul + Rechtsdokumente + DATEV-Export + Sales UI
This commit is contained in:
@@ -0,0 +1,76 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { getContractDownloadUrl, regenerateContract } from '@/lib/sales';
|
||||
|
||||
interface ContractPreviewProps {
|
||||
saleId: string;
|
||||
contractPdfPath?: string | null;
|
||||
}
|
||||
|
||||
export function ContractPreview({ saleId, contractPdfPath }: ContractPreviewProps) {
|
||||
const [regenerating, setRegenerating] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [pdfPath, setPdfPath] = useState<string | null>(contractPdfPath || null);
|
||||
|
||||
const handleRegenerate = async () => {
|
||||
setRegenerating(true);
|
||||
setError(null);
|
||||
try {
|
||||
const result = await regenerateContract(saleId);
|
||||
setPdfPath(result.contract_pdf_path);
|
||||
} catch (err: unknown) {
|
||||
const apiErr = err as { error?: { message?: string } };
|
||||
setError(apiErr?.error?.message || 'Failed to regenerate contract');
|
||||
} finally {
|
||||
setRegenerating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const downloadUrl = getContractDownloadUrl(saleId);
|
||||
|
||||
return (
|
||||
<div className="space-y-4" data-testid="contract-preview">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-xl font-bold">Vertrags-PDF</h2>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={handleRegenerate}
|
||||
disabled={regenerating}
|
||||
data-testid="contract-regenerate-btn"
|
||||
>
|
||||
{regenerating ? 'Wird erstellt...' : 'Vertrag neu generieren'}
|
||||
</Button>
|
||||
{pdfPath && (
|
||||
<a href={downloadUrl} target="_blank" rel="noopener noreferrer" data-testid="contract-download-link">
|
||||
<Button>Herunterladen</Button>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 text-red-600 p-3 rounded" data-testid="contract-error">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{pdfPath ? (
|
||||
<iframe
|
||||
src={downloadUrl}
|
||||
className="w-full h-[600px] border rounded"
|
||||
data-testid="contract-iframe"
|
||||
title="Vertrags-PDF"
|
||||
/>
|
||||
) : (
|
||||
<div className="bg-gray-50 p-8 text-center rounded" data-testid="contract-empty">
|
||||
<p className="text-gray-500">Es wurde noch kein Vertrag generiert.</p>
|
||||
<p className="text-sm text-gray-400 mt-2">
|
||||
Klicken Sie auf "Vertrag neu generieren", um ein PDF zu erstellen.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { Table } from '@/components/ui/Table';
|
||||
import {
|
||||
createDatevExport,
|
||||
listDatevExports,
|
||||
getDatevDownloadUrl,
|
||||
type DATEVExportResponse,
|
||||
} from '@/lib/datev';
|
||||
import type { PaginatedResponse } from '@/lib/api';
|
||||
|
||||
export function DatevExport() {
|
||||
const [exports, setExports] = useState<DATEVExportResponse[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
|
||||
const [startDate, setStartDate] = useState('');
|
||||
const [endDate, setEndDate] = useState('');
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
const fetchExports = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data: PaginatedResponse<DATEVExportResponse> = await listDatevExports();
|
||||
setExports(data.items);
|
||||
setTotal(data.total);
|
||||
} catch (err: unknown) {
|
||||
const apiErr = err as { error?: { message?: string } };
|
||||
setError(apiErr?.error?.message || 'Failed to load exports');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchExports();
|
||||
}, [fetchExports]);
|
||||
|
||||
const handleCreateExport = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setCreating(true);
|
||||
setError(null);
|
||||
setSuccess(null);
|
||||
try {
|
||||
const result = await createDatevExport({ start_date: startDate, end_date: endDate });
|
||||
setSuccess(`Export erstellt: ${result.total_amount} EUR`);
|
||||
fetchExports();
|
||||
} catch (err: unknown) {
|
||||
const apiErr = err as { error?: { message?: string } };
|
||||
setError(apiErr?.error?.message || 'Failed to create export');
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
key: 'start_date',
|
||||
label: 'Von',
|
||||
render: (row: DATEVExportResponse) =>
|
||||
new Date(row.start_date).toLocaleDateString('de-DE'),
|
||||
},
|
||||
{
|
||||
key: 'end_date',
|
||||
label: 'Bis',
|
||||
render: (row: DATEVExportResponse) =>
|
||||
new Date(row.end_date).toLocaleDateString('de-DE'),
|
||||
},
|
||||
{
|
||||
key: 'total_amount',
|
||||
label: 'Gesamtbetrag',
|
||||
render: (row: DATEVExportResponse) =>
|
||||
new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(row.total_amount),
|
||||
},
|
||||
{
|
||||
key: 'created_at',
|
||||
label: 'Erstellt am',
|
||||
render: (row: DATEVExportResponse) =>
|
||||
row.created_at ? new Date(row.created_at).toLocaleString('de-DE') : 'N/A',
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
label: 'Aktion',
|
||||
render: (row: DATEVExportResponse) => (
|
||||
<a
|
||||
href={getDatevDownloadUrl(row.id)}
|
||||
data-testid={`datev-download-${row.id}`}
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
CSV herunterladen
|
||||
</a>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-4" data-testid="datev-export">
|
||||
<h1 className="text-2xl font-bold">DATEV Export</h1>
|
||||
|
||||
{/* Create export form */}
|
||||
<form onSubmit={handleCreateExport} className="flex gap-4 items-end" data-testid="datev-export-form">
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium mb-1">Von Datum *</label>
|
||||
<Input
|
||||
data-testid="datev-start-date"
|
||||
type="date"
|
||||
value={startDate}
|
||||
onChange={e => setStartDate(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium mb-1">Bis Datum *</label>
|
||||
<Input
|
||||
data-testid="datev-end-date"
|
||||
type="date"
|
||||
value={endDate}
|
||||
onChange={e => setEndDate(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" disabled={creating} data-testid="datev-create-btn">
|
||||
{creating ? 'Wird erstellt...' : 'Export erstellen'}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 text-red-600 p-3 rounded" data-testid="datev-error">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<div className="bg-green-50 text-green-600 p-3 rounded" data-testid="datev-success">
|
||||
{success}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div data-testid="datev-loading">Wird geladen...</div>
|
||||
) : (
|
||||
<Table columns={columns} data={exports} rowKey={(row) => row.id} />
|
||||
)}
|
||||
|
||||
{total === 0 && !loading && (
|
||||
<p className="text-gray-500" data-testid="datev-empty">Noch keine Exporte vorhanden.</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { createSale, type SaleCreateData } from '@/lib/sales';
|
||||
import { listVehicles, type VehicleResponse } from '@/lib/vehicles';
|
||||
import { useEffect, useCallback } from 'react';
|
||||
import type { PaginatedResponse } from '@/lib/api';
|
||||
|
||||
export function SaleForm() {
|
||||
const router = useRouter();
|
||||
const [vehicles, setVehicles] = useState<VehicleResponse[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [formData, setFormData] = useState<SaleCreateData>({
|
||||
vehicle_id: '',
|
||||
buyer_contact_id: '',
|
||||
sale_price: 0,
|
||||
sale_date: new Date().toISOString().split('T')[0],
|
||||
status: 'draft',
|
||||
is_gwg: false,
|
||||
});
|
||||
|
||||
const fetchVehicles = useCallback(async () => {
|
||||
try {
|
||||
const data: PaginatedResponse<VehicleResponse> = await listVehicles({ page: 1, page_size: 100 });
|
||||
setVehicles(data.items.filter(v => v.availability === 'available'));
|
||||
} catch {
|
||||
// ignore - vehicles list is optional
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchVehicles();
|
||||
}, [fetchVehicles]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const sale = await createSale(formData);
|
||||
router.push(`/de/verkauf/${sale.id}`);
|
||||
} catch (err: unknown) {
|
||||
const apiErr = err as { error?: { message?: string } };
|
||||
setError(apiErr?.error?.message || 'Failed to create sale');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4 max-w-2xl" data-testid="sale-form">
|
||||
<h1 className="text-2xl font-bold">Neuer Verkauf</h1>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 text-red-600 p-3 rounded" data-testid="sale-form-error">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Fahrzeug *</label>
|
||||
<select
|
||||
data-testid="sale-vehicle-select"
|
||||
className="w-full border rounded px-3 py-2"
|
||||
value={formData.vehicle_id}
|
||||
onChange={e => setFormData(prev => ({ ...prev, vehicle_id: e.target.value }))}
|
||||
required
|
||||
>
|
||||
<option value="">Fahrzeug auswählen</option>
|
||||
{vehicles.map(v => (
|
||||
<option key={v.id} value={v.id}>
|
||||
{v.make} {v.model} - {v.fin}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Käufer Kontakt ID *</label>
|
||||
<Input
|
||||
data-testid="sale-buyer-input"
|
||||
value={formData.buyer_contact_id}
|
||||
onChange={e => setFormData(prev => ({ ...prev, buyer_contact_id: e.target.value }))}
|
||||
placeholder="UUID des Käufer-Kontakts"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Verkaufspreis (EUR) *</label>
|
||||
<Input
|
||||
data-testid="sale-price-input"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
value={formData.sale_price}
|
||||
onChange={e => setFormData(prev => ({ ...prev, sale_price: parseFloat(e.target.value) || 0 }))}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Verkaufsdatum</label>
|
||||
<Input
|
||||
data-testid="sale-date-input"
|
||||
type="date"
|
||||
value={formData.sale_date}
|
||||
onChange={e => setFormData(prev => ({ ...prev, sale_date: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Status</label>
|
||||
<select
|
||||
data-testid="sale-status-select"
|
||||
className="w-full border rounded px-3 py-2"
|
||||
value={formData.status}
|
||||
onChange={e => setFormData(prev => ({ ...prev, status: e.target.value }))}
|
||||
>
|
||||
<option value="draft">Entwurf</option>
|
||||
<option value="completed">Abgeschlossen</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
data-testid="sale-gwg-toggle"
|
||||
type="checkbox"
|
||||
id="is_gwg"
|
||||
checked={formData.is_gwg}
|
||||
onChange={e => setFormData(prev => ({ ...prev, is_gwg: e.target.checked }))}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<label htmlFor="is_gwg" className="text-sm font-medium">
|
||||
Geringwertiges Wirtschaftsgut (GwG) - §6 Abs. 2 EStG
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button type="submit" disabled={loading} data-testid="sale-submit-btn">
|
||||
{loading ? 'Wird gespeichert...' : 'Verkauf anlegen'}
|
||||
</Button>
|
||||
<Button type="button" onClick={() => router.back()} variant="secondary">
|
||||
Abbrechen
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user