first commit
This commit is contained in:
Stefan Hacker
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,245 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { customerApi } from '../../services/api';
|
||||
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 type { Customer } from '../../types';
|
||||
|
||||
type CustomerFormData = Omit<Customer, 'id' | 'customerNumber' | 'createdAt' | 'updatedAt' | 'addresses' | 'bankCards' | 'identityDocuments' | 'meters' | 'contracts'>;
|
||||
|
||||
export default function CustomerForm() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const isEdit = !!id;
|
||||
|
||||
const { register, handleSubmit, reset, watch, setValue, formState: { errors } } = useForm<CustomerFormData>();
|
||||
const customerType = watch('type');
|
||||
|
||||
const { data: customer } = useQuery({
|
||||
queryKey: ['customer', id],
|
||||
queryFn: () => customerApi.getById(parseInt(id!)),
|
||||
enabled: isEdit,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (customer?.data) {
|
||||
const data = { ...customer.data };
|
||||
// Convert date strings to YYYY-MM-DD format for date inputs
|
||||
if (data.birthDate) {
|
||||
data.birthDate = data.birthDate.split('T')[0] as any;
|
||||
}
|
||||
if (data.foundingDate) {
|
||||
data.foundingDate = data.foundingDate.split('T')[0] as any;
|
||||
}
|
||||
reset(data);
|
||||
}
|
||||
}, [customer, reset]);
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: customerApi.create,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['customers'] });
|
||||
navigate('/customers');
|
||||
},
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: (data: Partial<Customer>) => customerApi.update(parseInt(id!), data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['customers'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['customer', id] });
|
||||
navigate(`/customers/${id}`);
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = (data: CustomerFormData) => {
|
||||
// Only include the fields that can be updated - exclude relations and read-only fields
|
||||
const submitData: any = {
|
||||
type: data.type,
|
||||
salutation: data.salutation || undefined,
|
||||
firstName: data.firstName,
|
||||
lastName: data.lastName,
|
||||
companyName: data.companyName || undefined,
|
||||
email: data.email || undefined,
|
||||
phone: data.phone || undefined,
|
||||
mobile: data.mobile || undefined,
|
||||
taxNumber: data.taxNumber || undefined,
|
||||
commercialRegisterNumber: data.commercialRegisterNumber || undefined,
|
||||
notes: data.notes || undefined,
|
||||
birthPlace: data.birthPlace || undefined,
|
||||
};
|
||||
|
||||
// Handle birthDate - convert non-empty string to ISO string, or null to clear
|
||||
if (data.birthDate && typeof data.birthDate === 'string' && data.birthDate.trim() !== '') {
|
||||
submitData.birthDate = new Date(data.birthDate).toISOString();
|
||||
} else {
|
||||
submitData.birthDate = null;
|
||||
}
|
||||
|
||||
// Handle foundingDate for business customers - or null to clear
|
||||
if (data.foundingDate && typeof data.foundingDate === 'string' && data.foundingDate.trim() !== '') {
|
||||
submitData.foundingDate = new Date(data.foundingDate).toISOString();
|
||||
} else {
|
||||
submitData.foundingDate = null;
|
||||
}
|
||||
|
||||
if (isEdit) {
|
||||
updateMutation.mutate(submitData);
|
||||
} else {
|
||||
createMutation.mutate(submitData);
|
||||
}
|
||||
};
|
||||
|
||||
const isLoading = createMutation.isPending || updateMutation.isPending;
|
||||
const error = createMutation.error || updateMutation.error;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold mb-6">
|
||||
{isEdit ? 'Kunde bearbeiten' : 'Neuer Kunde'}
|
||||
</h1>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg">
|
||||
{error instanceof Error ? error.message : 'Ein Fehler ist aufgetreten'}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Card className="mb-6" title="Stammdaten">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Select
|
||||
label="Kundentyp"
|
||||
{...register('type')}
|
||||
options={[
|
||||
{ value: 'PRIVATE', label: 'Privatkunde' },
|
||||
{ value: 'BUSINESS', label: 'Geschäftskunde' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Anrede"
|
||||
{...register('salutation')}
|
||||
options={[
|
||||
{ value: 'Herr', label: 'Herr' },
|
||||
{ value: 'Frau', label: 'Frau' },
|
||||
{ value: 'Divers', label: 'Divers' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Vorname"
|
||||
{...register('firstName', { required: 'Vorname erforderlich' })}
|
||||
error={errors.firstName?.message}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Nachname"
|
||||
{...register('lastName', { required: 'Nachname erforderlich' })}
|
||||
error={errors.lastName?.message}
|
||||
/>
|
||||
|
||||
{customerType === 'BUSINESS' && (
|
||||
<>
|
||||
<Input
|
||||
label="Firmenname"
|
||||
{...register('companyName')}
|
||||
className="md:col-span-2"
|
||||
/>
|
||||
<Input
|
||||
label="Gründungsdatum"
|
||||
type="date"
|
||||
{...register('foundingDate')}
|
||||
value={watch('foundingDate') || ''}
|
||||
onClear={() => setValue('foundingDate', '' as any)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{customerType !== 'BUSINESS' && (
|
||||
<>
|
||||
<Input
|
||||
label="Geburtsdatum"
|
||||
type="date"
|
||||
{...register('birthDate')}
|
||||
value={watch('birthDate') || ''}
|
||||
onClear={() => setValue('birthDate', '' as any)}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Geburtsort"
|
||||
{...register('birthPlace')}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="mb-6" title="Kontaktdaten">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Input
|
||||
label="E-Mail"
|
||||
type="email"
|
||||
{...register('email')}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Telefon"
|
||||
{...register('phone')}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Mobil"
|
||||
{...register('mobile')}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{customerType === 'BUSINESS' && (
|
||||
<Card className="mb-6" title="Geschäftsdaten">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Input
|
||||
label="Steuernummer"
|
||||
{...register('taxNumber')}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Handelsregisternummer"
|
||||
{...register('commercialRegisterNumber')}
|
||||
placeholder="z.B. HRB 12345"
|
||||
/>
|
||||
</div>
|
||||
{isEdit && (
|
||||
<p className="mt-4 text-sm text-gray-500">
|
||||
Dokumente (Gewerbeanmeldung, Handelsregisterauszug) können nach dem Speichern in der Kundendetailansicht hochgeladen werden.
|
||||
</p>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card className="mb-6" title="Notizen">
|
||||
<textarea
|
||||
{...register('notes')}
|
||||
rows={4}
|
||||
className="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="Interne Notizen..."
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<div className="flex justify-end gap-4">
|
||||
<Button type="button" variant="secondary" onClick={() => navigate(-1)}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading ? 'Speichern...' : 'Speichern'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
import { useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { customerApi } 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 Badge from '../../components/ui/Badge';
|
||||
import { Plus, Search, Eye, Edit } from 'lucide-react';
|
||||
|
||||
export default function CustomerList() {
|
||||
const [search, setSearch] = useState('');
|
||||
const [type, setType] = useState('');
|
||||
const [page, setPage] = useState(1);
|
||||
const { hasPermission } = useAuth();
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['customers', search, type, page],
|
||||
queryFn: () => customerApi.getAll({ search, type: type || undefined, page, limit: 20 }),
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-2xl font-bold">Kunden</h1>
|
||||
{hasPermission('customers:create') && (
|
||||
<Link to="/customers/new">
|
||||
<Button>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Neuer Kunde
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Card className="mb-6">
|
||||
<div className="flex gap-2 items-center">
|
||||
<Input
|
||||
placeholder="Suchen..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="flex-1"
|
||||
/>
|
||||
<select
|
||||
value={type}
|
||||
onChange={(e) => setType(e.target.value)}
|
||||
className="px-3 py-2 border border-gray-300 rounded-lg w-28 flex-shrink-0"
|
||||
>
|
||||
<option value="">Alle</option>
|
||||
<option value="PRIVATE">Privat</option>
|
||||
<option value="BUSINESS">Firma</option>
|
||||
</select>
|
||||
<Button variant="secondary" className="flex-shrink-0">
|
||||
<Search className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
{isLoading ? (
|
||||
<div className="text-center py-8 text-gray-500">Laden...</div>
|
||||
) : data?.data && data.data.length > 0 ? (
|
||||
<>
|
||||
<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">Kundennr.</th>
|
||||
<th className="text-left py-3 px-4 font-medium text-gray-600">Name</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">E-Mail</th>
|
||||
<th className="text-left py-3 px-4 font-medium text-gray-600">Verträge</th>
|
||||
<th className="text-right py-3 px-4 font-medium text-gray-600">Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.data.map((customer) => (
|
||||
<tr key={customer.id} className="border-b hover:bg-gray-50">
|
||||
<td className="py-3 px-4 font-mono text-sm">{customer.customerNumber}</td>
|
||||
<td className="py-3 px-4">
|
||||
{customer.type === 'BUSINESS' && customer.companyName
|
||||
? customer.companyName
|
||||
: `${customer.firstName} ${customer.lastName}`}
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<Badge variant={customer.type === 'BUSINESS' ? 'info' : 'default'}>
|
||||
{customer.type === 'BUSINESS' ? 'Firma' : 'Privat'}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="py-3 px-4">{customer.email || '-'}</td>
|
||||
<td className="py-3 px-4">
|
||||
{(customer as any)._count?.contracts || 0}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Link to={`/customers/${customer.id}`}>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Eye className="w-4 h-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
{hasPermission('customers:update') && (
|
||||
<Link to={`/customers/${customer.id}/edit`}>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Edit className="w-4 h-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</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>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
Keine Kunden gefunden.
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user