361 lines
13 KiB
TypeScript
361 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { useParams, useRouter } from "next/navigation";
|
|
import { ArrowLeft, Edit, Plus, Trash2 } from "lucide-react";
|
|
|
|
import ConfirmDialog from "@/components/common/ConfirmDialog";
|
|
import DetailSection from "@/components/common/DetailSection";
|
|
import { useToast } from "@/components/common/ToastProvider";
|
|
import { Button } from "@/components/ui/button";
|
|
import CustomerContactFormDialog from "@/components/customers/CustomerContactFormDialog";
|
|
import CustomerFormDialog from "@/components/customers/CustomerFormDialog";
|
|
import CustomerStatusBadge from "@/components/customers/CustomerStatusBadge";
|
|
import { api } from "@/lib/api";
|
|
import { hasPermission } from "@/lib/permissions";
|
|
import type { CurrentUser } from "@/types/rbac";
|
|
import type { Customer, CustomerContact, CustomerContactPayload, CustomerPayload } from "@/types/customer";
|
|
|
|
function getErrorMessage(error: unknown) {
|
|
if (typeof error === "object" && error !== null && "response" in error) {
|
|
const response = (error as { response?: { data?: { detail?: string } } }).response;
|
|
return response?.data?.detail ?? "Aktion konnte nicht abgeschlossen werden";
|
|
}
|
|
return "Aktion konnte nicht abgeschlossen werden";
|
|
}
|
|
|
|
function formatDateTime(value: string) {
|
|
return new Intl.DateTimeFormat("de-DE", {
|
|
dateStyle: "medium",
|
|
timeStyle: "short",
|
|
}).format(new Date(value));
|
|
}
|
|
|
|
export default function CustomerDetailPage() {
|
|
const { showToast } = useToast();
|
|
const params = useParams<{ id: string }>();
|
|
const router = useRouter();
|
|
const [customer, setCustomer] = useState<Customer | null>(null);
|
|
const [currentUser, setCurrentUser] = useState<CurrentUser | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState("");
|
|
const [pending, setPending] = useState(false);
|
|
const [formOpen, setFormOpen] = useState(false);
|
|
const [formError, setFormError] = useState("");
|
|
const [contactOpen, setContactOpen] = useState(false);
|
|
const [contactError, setContactError] = useState("");
|
|
const [selectedContact, setSelectedContact] = useState<CustomerContact | null>(null);
|
|
const [deleteContact, setDeleteContact] = useState<CustomerContact | null>(null);
|
|
const [deleteCustomerOpen, setDeleteCustomerOpen] = useState(false);
|
|
const [deleteError, setDeleteError] = useState("");
|
|
|
|
const loadCustomer = useCallback(async () => {
|
|
try {
|
|
const [customerResponse, meResponse] = await Promise.all([
|
|
api.get<Customer>(`/customers/${params.id}`),
|
|
api.get<CurrentUser>("/me"),
|
|
]);
|
|
setCustomer(customerResponse.data);
|
|
setCurrentUser(meResponse.data);
|
|
} catch (err) {
|
|
setError(getErrorMessage(err));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [params.id]);
|
|
|
|
useEffect(() => {
|
|
queueMicrotask(() => {
|
|
void loadCustomer();
|
|
});
|
|
}, [loadCustomer]);
|
|
|
|
async function saveCustomer(payload: CustomerPayload) {
|
|
if (!customer) {
|
|
return;
|
|
}
|
|
setPending(true);
|
|
setFormError("");
|
|
try {
|
|
const response = await api.put<Customer>(`/customers/${customer.id}`, payload);
|
|
setCustomer(response.data);
|
|
setFormOpen(false);
|
|
showToast({ type: "success", title: "Kunde aktualisiert", description: response.data.company_name });
|
|
} catch (err) {
|
|
const message = getErrorMessage(err);
|
|
setFormError(message);
|
|
showToast({ type: "error", title: "Kunde konnte nicht gespeichert werden", description: message });
|
|
} finally {
|
|
setPending(false);
|
|
}
|
|
}
|
|
|
|
function openContactDialog(contact: CustomerContact | null) {
|
|
setSelectedContact(contact);
|
|
setContactError("");
|
|
setContactOpen(true);
|
|
}
|
|
|
|
async function saveContact(payload: CustomerContactPayload) {
|
|
if (!customer) {
|
|
return;
|
|
}
|
|
setPending(true);
|
|
setContactError("");
|
|
try {
|
|
if (selectedContact) {
|
|
await api.put<CustomerContact>(`/customers/${customer.id}/contacts/${selectedContact.id}`, payload);
|
|
showToast({ type: "success", title: "Ansprechpartner aktualisiert" });
|
|
} else {
|
|
await api.post<CustomerContact>(`/customers/${customer.id}/contacts`, payload);
|
|
showToast({ type: "success", title: "Ansprechpartner erstellt" });
|
|
}
|
|
const response = await api.get<Customer>(`/customers/${customer.id}`);
|
|
setCustomer(response.data);
|
|
setContactOpen(false);
|
|
} catch (err) {
|
|
const message = getErrorMessage(err);
|
|
setContactError(message);
|
|
showToast({ type: "error", title: "Ansprechpartner konnte nicht gespeichert werden", description: message });
|
|
} finally {
|
|
setPending(false);
|
|
}
|
|
}
|
|
|
|
async function confirmContactDelete() {
|
|
if (!customer || !deleteContact) {
|
|
return;
|
|
}
|
|
setPending(true);
|
|
setDeleteError("");
|
|
try {
|
|
await api.delete(`/customers/${customer.id}/contacts/${deleteContact.id}`);
|
|
const response = await api.get<Customer>(`/customers/${customer.id}`);
|
|
setCustomer(response.data);
|
|
showToast({ type: "success", title: "Ansprechpartner gelöscht", description: `${deleteContact.first_name} ${deleteContact.last_name}` });
|
|
setDeleteContact(null);
|
|
} catch (err) {
|
|
const message = getErrorMessage(err);
|
|
setDeleteError(message);
|
|
showToast({ type: "error", title: "Ansprechpartner konnte nicht gelöscht werden", description: message });
|
|
} finally {
|
|
setPending(false);
|
|
}
|
|
}
|
|
|
|
async function confirmCustomerDelete() {
|
|
if (!customer) {
|
|
return;
|
|
}
|
|
setPending(true);
|
|
setDeleteError("");
|
|
try {
|
|
const deletedCustomerName = customer.company_name;
|
|
await api.delete(`/customers/${customer.id}`);
|
|
showToast({ type: "success", title: "Kunde gelöscht", description: deletedCustomerName });
|
|
router.push("/customers");
|
|
} catch (err) {
|
|
const message = getErrorMessage(err);
|
|
setDeleteError(message);
|
|
showToast({ type: "error", title: "Kunde konnte nicht gelöscht werden", description: message });
|
|
} finally {
|
|
setPending(false);
|
|
}
|
|
}
|
|
|
|
if (loading) {
|
|
return <div className="rounded-lg border bg-white p-8 text-slate-500">Kunde wird geladen...</div>;
|
|
}
|
|
|
|
if (error || !customer) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<Link href="/customers" className="inline-flex items-center gap-2 text-sm text-slate-500 hover:text-slate-900">
|
|
<ArrowLeft size={16} />
|
|
Zurück zur Kundenliste
|
|
</Link>
|
|
<div className="rounded-lg border bg-white p-8 text-red-600">{error || "Kunde nicht gefunden"}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
|
<div>
|
|
<Link href="/customers" className="inline-flex items-center gap-2 text-sm text-slate-500 hover:text-slate-900">
|
|
<ArrowLeft size={16} />
|
|
Zurück zur Kundenliste
|
|
</Link>
|
|
<div className="mt-3 flex items-center gap-3">
|
|
<h1 className="text-3xl font-bold text-slate-950">{customer.company_name}</h1>
|
|
<CustomerStatusBadge status={customer.status} />
|
|
</div>
|
|
<p className="mt-1 text-sm text-slate-500">{customer.customer_number}</p>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
{hasPermission(currentUser, "customers.update") && (
|
|
<Button type="button" onClick={() => setFormOpen(true)}>
|
|
<Edit size={16} />
|
|
Bearbeiten
|
|
</Button>
|
|
)}
|
|
{hasPermission(currentUser, "customers.delete") && (
|
|
<Button type="button" variant="destructive" onClick={() => setDeleteCustomerOpen(true)}>
|
|
<Trash2 size={16} />
|
|
Löschen
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<DetailSection title="Stammdaten">
|
|
<dl className="grid gap-5 md:grid-cols-2">
|
|
<Detail label="Kundennummer" value={customer.customer_number} />
|
|
<Detail label="Typ" value={customer.customer_type} />
|
|
<Detail label="Rechtlicher Name" value={customer.legal_name || "-"} />
|
|
<Detail label="Branche" value={customer.industry || "-"} />
|
|
<Detail label="E-Mail" value={customer.email || "-"} />
|
|
<Detail label="Telefon" value={customer.phone || "-"} />
|
|
<Detail label="Website" value={customer.website || "-"} />
|
|
<Detail label="USt-ID" value={customer.vat_id || "-"} />
|
|
</dl>
|
|
</DetailSection>
|
|
|
|
<DetailSection title="Adressen">
|
|
{customer.addresses.length === 0 ? (
|
|
<p className="text-sm text-slate-500">Noch keine Adressen vorhanden.</p>
|
|
) : (
|
|
<div className="grid gap-3 md:grid-cols-2">
|
|
{customer.addresses.map((address) => (
|
|
<div key={address.id} className="rounded-lg border p-4 text-sm">
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<span className="font-medium capitalize">{address.type}</span>
|
|
{address.is_primary && <span className="rounded-full bg-slate-100 px-2 py-1 text-xs">Primär</span>}
|
|
</div>
|
|
<p>{address.street || "-"}</p>
|
|
<p>{address.postal_code} {address.city}</p>
|
|
<p>{address.state}</p>
|
|
<p>{address.country}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</DetailSection>
|
|
|
|
<DetailSection
|
|
title="Ansprechpartner"
|
|
actions={hasPermission(currentUser, "customers.update") && (
|
|
<Button type="button" size="sm" onClick={() => openContactDialog(null)}>
|
|
<Plus size={16} />
|
|
Ansprechpartner
|
|
</Button>
|
|
)}
|
|
>
|
|
{customer.contacts.length === 0 ? (
|
|
<p className="text-sm text-slate-500">Noch keine Ansprechpartner vorhanden.</p>
|
|
) : (
|
|
<div className="grid gap-3 md:grid-cols-2">
|
|
{customer.contacts.map((contact) => (
|
|
<div key={contact.id} className="rounded-lg border p-4 text-sm">
|
|
<div className="mb-2 flex items-center justify-between gap-3">
|
|
<div>
|
|
<p className="font-medium text-slate-950">{contact.first_name} {contact.last_name}</p>
|
|
<p className="text-slate-500">{contact.position || "-"}</p>
|
|
</div>
|
|
{contact.is_primary && <span className="rounded-full bg-slate-100 px-2 py-1 text-xs">Primär</span>}
|
|
</div>
|
|
<p>{contact.email || "-"}</p>
|
|
<p>{contact.phone || contact.mobile || "-"}</p>
|
|
{hasPermission(currentUser, "customers.update") && (
|
|
<div className="mt-3 flex gap-2">
|
|
<Button type="button" variant="outline" size="sm" onClick={() => openContactDialog(contact)}>
|
|
Bearbeiten
|
|
</Button>
|
|
<Button type="button" variant="destructive" size="sm" onClick={() => setDeleteContact(contact)}>
|
|
Löschen
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</DetailSection>
|
|
|
|
<DetailSection title="Notizen">
|
|
<p className="whitespace-pre-wrap text-sm text-slate-700">{customer.notes || "Noch keine Notizen vorhanden."}</p>
|
|
</DetailSection>
|
|
|
|
<DetailSection title="Metadaten">
|
|
<dl className="grid gap-5 md:grid-cols-2">
|
|
<Detail label="Erstellt" value={formatDateTime(customer.created_at)} />
|
|
<Detail label="Aktualisiert" value={formatDateTime(customer.updated_at)} />
|
|
</dl>
|
|
</DetailSection>
|
|
|
|
<CustomerFormDialog
|
|
open={formOpen}
|
|
customer={customer}
|
|
pending={pending}
|
|
serverError={formError}
|
|
onOpenChange={setFormOpen}
|
|
onSubmit={saveCustomer}
|
|
/>
|
|
|
|
<CustomerContactFormDialog
|
|
open={contactOpen}
|
|
contact={selectedContact}
|
|
pending={pending}
|
|
serverError={contactError}
|
|
onOpenChange={setContactOpen}
|
|
onSubmit={saveContact}
|
|
/>
|
|
|
|
<ConfirmDialog
|
|
open={Boolean(deleteContact)}
|
|
title="Ansprechpartner löschen"
|
|
description="Möchten Sie den Ansprechpartner wirklich löschen?"
|
|
pending={pending}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
setDeleteContact(null);
|
|
setDeleteError("");
|
|
}
|
|
}}
|
|
onConfirm={confirmContactDelete}
|
|
>
|
|
{deleteContact && <p className="text-sm font-medium">{deleteContact.first_name} {deleteContact.last_name}</p>}
|
|
{deleteError && <p className="mt-2 text-sm text-red-600">{deleteError}</p>}
|
|
</ConfirmDialog>
|
|
|
|
<ConfirmDialog
|
|
open={deleteCustomerOpen}
|
|
title="Kunde löschen"
|
|
description="Möchten Sie den Kunden wirklich löschen?"
|
|
pending={pending}
|
|
onOpenChange={(open) => {
|
|
setDeleteCustomerOpen(open);
|
|
if (!open) {
|
|
setDeleteError("");
|
|
}
|
|
}}
|
|
onConfirm={confirmCustomerDelete}
|
|
>
|
|
<p className="text-sm font-medium">{customer.customer_number} · {customer.company_name}</p>
|
|
{deleteError && <p className="mt-2 text-sm text-red-600">{deleteError}</p>}
|
|
</ConfirmDialog>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Detail({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div>
|
|
<dt className="text-sm text-slate-500">{label}</dt>
|
|
<dd className="mt-1 font-medium text-slate-950">{value}</dd>
|
|
</div>
|
|
);
|
|
}
|