first commit
This commit is contained in:
Stefan Hacker
@@ -0,0 +1,370 @@
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { Link, useSearchParams, useNavigate } from 'react-router-dom';
|
||||
import { contractApi } from '../../services/api';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import Card from '../../components/ui/Card';
|
||||
import Button from '../../components/ui/Button';
|
||||
import Input from '../../components/ui/Input';
|
||||
import Select from '../../components/ui/Select';
|
||||
import Badge from '../../components/ui/Badge';
|
||||
import { Plus, Search, Eye, Edit, Trash2, User, Users } from 'lucide-react';
|
||||
import type { Contract, ContractType, ContractStatus } from '../../types';
|
||||
|
||||
const typeLabels: Record<ContractType, string> = {
|
||||
ELECTRICITY: 'Strom',
|
||||
GAS: 'Gas',
|
||||
DSL: 'DSL',
|
||||
CABLE: 'Kabelinternet',
|
||||
FIBER: 'Glasfaser',
|
||||
MOBILE: 'Mobilfunk',
|
||||
TV: 'TV',
|
||||
CAR_INSURANCE: 'KFZ-Versicherung',
|
||||
};
|
||||
|
||||
const statusLabels: Record<ContractStatus, string> = {
|
||||
DRAFT: 'Entwurf',
|
||||
PENDING: 'Ausstehend',
|
||||
ACTIVE: 'Aktiv',
|
||||
CANCELLED: 'Gekündigt',
|
||||
EXPIRED: 'Abgelaufen',
|
||||
DEACTIVATED: 'Deaktiviert',
|
||||
};
|
||||
|
||||
const statusVariants: Record<ContractStatus, 'success' | 'warning' | 'danger' | 'default'> = {
|
||||
ACTIVE: 'success',
|
||||
PENDING: 'warning',
|
||||
CANCELLED: 'danger',
|
||||
EXPIRED: 'danger',
|
||||
DRAFT: 'default',
|
||||
DEACTIVATED: 'default',
|
||||
};
|
||||
|
||||
export default function ContractList() {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Filter-Werte aus URL-Parametern lesen
|
||||
const [search, setSearch] = useState(searchParams.get('search') || '');
|
||||
const [type, setType] = useState(searchParams.get('type') || '');
|
||||
const [status, setStatus] = useState(searchParams.get('status') || '');
|
||||
const [page, setPage] = useState(parseInt(searchParams.get('page') || '1', 10));
|
||||
|
||||
const { hasPermission, isCustomer, isCustomerPortal, user } = useAuth();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// URL-Parameter aktualisieren wenn sich Filter ändern
|
||||
useEffect(() => {
|
||||
const params = new URLSearchParams();
|
||||
if (search) params.set('search', search);
|
||||
if (type) params.set('type', type);
|
||||
if (status) params.set('status', status);
|
||||
if (page > 1) params.set('page', page.toString());
|
||||
setSearchParams(params, { replace: true });
|
||||
}, [search, type, status, page, setSearchParams]);
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: contractApi.delete,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['contracts'] });
|
||||
},
|
||||
});
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['contracts', search, type, status, page, isCustomer ? user?.customerId : null],
|
||||
queryFn: () =>
|
||||
contractApi.getAll({
|
||||
search: search || undefined,
|
||||
type: type || undefined,
|
||||
status: status || undefined,
|
||||
page,
|
||||
limit: 20,
|
||||
customerId: isCustomer ? user?.customerId : undefined,
|
||||
}),
|
||||
});
|
||||
|
||||
// Für Kundenportal: Verträge nach Kunde gruppieren
|
||||
const groupedContracts = useMemo(() => {
|
||||
if (!isCustomerPortal || !data?.data) return null;
|
||||
|
||||
const groups: Record<number, { customerName: string; isOwn: boolean; contracts: Contract[] }> = {};
|
||||
|
||||
for (const contract of data.data) {
|
||||
const customerId = contract.customerId;
|
||||
if (!groups[customerId]) {
|
||||
const customerName = contract.customer
|
||||
? (contract.customer.companyName || `${contract.customer.firstName} ${contract.customer.lastName}`)
|
||||
: `Kunde ${customerId}`;
|
||||
groups[customerId] = {
|
||||
customerName,
|
||||
isOwn: customerId === user?.customerId,
|
||||
contracts: [],
|
||||
};
|
||||
}
|
||||
groups[customerId].contracts.push(contract);
|
||||
}
|
||||
|
||||
// Eigene Verträge zuerst, dann alphabetisch nach Name
|
||||
return Object.values(groups).sort((a, b) => {
|
||||
if (a.isOwn && !b.isOwn) return -1;
|
||||
if (!a.isOwn && b.isOwn) return 1;
|
||||
return a.customerName.localeCompare(b.customerName);
|
||||
});
|
||||
}, [data?.data, isCustomerPortal, user?.customerId]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-2xl font-bold">Verträge</h1>
|
||||
{hasPermission('contracts:create') && !isCustomer && (
|
||||
<Link to="/contracts/new">
|
||||
<Button>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Neuer Vertrag
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Card className="mb-6">
|
||||
<div className="flex gap-4 flex-wrap">
|
||||
<div className="flex-1 min-w-[200px]">
|
||||
<Input
|
||||
placeholder="Suchen..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Select
|
||||
value={type}
|
||||
onChange={(e) => setType(e.target.value)}
|
||||
options={Object.entries(typeLabels).map(([value, label]) => ({ value, label }))}
|
||||
className="w-48"
|
||||
/>
|
||||
<Select
|
||||
value={status}
|
||||
onChange={(e) => setStatus(e.target.value)}
|
||||
options={Object.entries(statusLabels).map(([value, label]) => ({ value, label }))}
|
||||
className="w-48"
|
||||
/>
|
||||
<Button variant="secondary">
|
||||
<Search className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{isLoading ? (
|
||||
<Card>
|
||||
<div className="text-center py-8 text-gray-500">Laden...</div>
|
||||
</Card>
|
||||
) : data?.data && data.data.length > 0 ? (
|
||||
<>
|
||||
{/* Kundenportal: Gruppierte Ansicht */}
|
||||
{isCustomerPortal && groupedContracts ? (
|
||||
<div className="space-y-6">
|
||||
{groupedContracts.map((group) => (
|
||||
<Card key={group.isOwn ? 'own' : group.customerName}>
|
||||
{/* Gruppen-Header */}
|
||||
<div className="flex items-center gap-3 mb-4 pb-3 border-b">
|
||||
{group.isOwn ? (
|
||||
<>
|
||||
<User className="w-5 h-5 text-blue-600" />
|
||||
<h2 className="text-lg font-semibold text-gray-900">Meine Verträge</h2>
|
||||
<Badge variant="default">{group.contracts.length}</Badge>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Users className="w-5 h-5 text-purple-600" />
|
||||
<h2 className="text-lg font-semibold text-gray-900">
|
||||
Verträge von {group.customerName}
|
||||
</h2>
|
||||
<Badge variant="default">{group.contracts.length}</Badge>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Vertrags-Tabelle */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="text-left py-3 px-4 font-medium text-gray-600">Vertragsnr.</th>
|
||||
<th className="text-left py-3 px-4 font-medium text-gray-600">Typ</th>
|
||||
<th className="text-left py-3 px-4 font-medium text-gray-600">Anbieter / Tarif</th>
|
||||
<th className="text-left py-3 px-4 font-medium text-gray-600">Status</th>
|
||||
<th className="text-left py-3 px-4 font-medium text-gray-600">Beginn</th>
|
||||
<th className="text-right py-3 px-4 font-medium text-gray-600">Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{group.contracts.map((contract) => (
|
||||
<tr key={contract.id} className="border-b hover:bg-gray-50">
|
||||
<td className="py-3 px-4 font-mono text-sm">{contract.contractNumber}</td>
|
||||
<td className="py-3 px-4">
|
||||
<Badge>{typeLabels[contract.type]}</Badge>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
{contract.providerName || '-'}
|
||||
{contract.tariffName && (
|
||||
<span className="text-gray-500"> / {contract.tariffName}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<Badge variant={statusVariants[contract.status]}>
|
||||
{statusLabels[contract.status]}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
{contract.startDate
|
||||
? new Date(contract.startDate).toLocaleDateString('de-DE')
|
||||
: '-'}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-right">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigate(`/contracts/${contract.id}`, {
|
||||
state: { from: 'contracts' }
|
||||
})}
|
||||
>
|
||||
<Eye className="w-4 h-4" />
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
/* Standard-Ansicht für Mitarbeiter */
|
||||
<Card>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="text-left py-3 px-4 font-medium text-gray-600">Vertragsnr.</th>
|
||||
{!isCustomer && (
|
||||
<th className="text-left py-3 px-4 font-medium text-gray-600">Kunde</th>
|
||||
)}
|
||||
<th className="text-left py-3 px-4 font-medium text-gray-600">Typ</th>
|
||||
<th className="text-left py-3 px-4 font-medium text-gray-600">Anbieter / Tarif</th>
|
||||
<th className="text-left py-3 px-4 font-medium text-gray-600">Status</th>
|
||||
<th className="text-left py-3 px-4 font-medium text-gray-600">Beginn</th>
|
||||
<th className="text-right py-3 px-4 font-medium text-gray-600">Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.data.map((contract) => (
|
||||
<tr key={contract.id} className="border-b hover:bg-gray-50">
|
||||
<td className="py-3 px-4 font-mono text-sm">{contract.contractNumber}</td>
|
||||
{!isCustomer && (
|
||||
<td className="py-3 px-4">
|
||||
{contract.customer && (
|
||||
<Link
|
||||
to={`/customers/${contract.customer.id}`}
|
||||
className="text-blue-600 hover:underline"
|
||||
>
|
||||
{contract.customer.companyName ||
|
||||
`${contract.customer.firstName} ${contract.customer.lastName}`}
|
||||
</Link>
|
||||
)}
|
||||
</td>
|
||||
)}
|
||||
<td className="py-3 px-4">
|
||||
<Badge>{typeLabels[contract.type]}</Badge>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
{contract.providerName || '-'}
|
||||
{contract.tariffName && (
|
||||
<span className="text-gray-500"> / {contract.tariffName}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<Badge variant={statusVariants[contract.status]}>
|
||||
{statusLabels[contract.status]}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
{contract.startDate
|
||||
? new Date(contract.startDate).toLocaleDateString('de-DE')
|
||||
: '-'}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigate(`/contracts/${contract.id}`, {
|
||||
state: { from: 'contracts' }
|
||||
})}
|
||||
>
|
||||
<Eye className="w-4 h-4" />
|
||||
</Button>
|
||||
{hasPermission('contracts:update') && !isCustomer && (
|
||||
<Link to={`/contracts/${contract.id}/edit`}>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Edit className="w-4 h-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
{hasPermission('contracts:delete') && !isCustomer && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
if (confirm('Vertrag wirklich löschen?')) {
|
||||
deleteMutation.mutate(contract.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 text-red-500" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{data.pagination && data.pagination.totalPages > 1 && (
|
||||
<div className="mt-4 flex items-center justify-between">
|
||||
<p className="text-sm text-gray-500">
|
||||
Seite {data.pagination.page} von {data.pagination.totalPages} (
|
||||
{data.pagination.total} Einträge)
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
disabled={page === 1}
|
||||
>
|
||||
Zurück
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => setPage((p) => p + 1)}
|
||||
disabled={page >= data.pagination.totalPages}
|
||||
>
|
||||
Weiter
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Card>
|
||||
<div className="text-center py-8 text-gray-500">Keine Verträge gefunden.</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user