feat(customers): add dashboard and customer management
This commit is contained in:
Schubert Ferenc
parent
694b7bd09a
commit
92cb8d1286
28 changed files with 2521 additions and 13 deletions
|
|
@ -0,0 +1,188 @@
|
|||
"use client";
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
import type { FormEvent, ReactNode } from "react";
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import type { CustomerContact, CustomerContactPayload } from "@/types/customer";
|
||||
|
||||
const emptyContact: CustomerContactPayload = {
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
position: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
mobile: "",
|
||||
is_primary: false,
|
||||
notes: "",
|
||||
};
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
contact?: CustomerContact | null;
|
||||
pending?: boolean;
|
||||
serverError?: string;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onSubmit: (payload: CustomerContactPayload) => Promise<void>;
|
||||
};
|
||||
|
||||
export default function CustomerContactFormDialog({
|
||||
open,
|
||||
contact,
|
||||
pending = false,
|
||||
serverError,
|
||||
onOpenChange,
|
||||
onSubmit,
|
||||
}: Props) {
|
||||
const initialForm = contact
|
||||
? {
|
||||
first_name: contact.first_name,
|
||||
last_name: contact.last_name,
|
||||
position: contact.position,
|
||||
email: contact.email,
|
||||
phone: contact.phone,
|
||||
mobile: contact.mobile,
|
||||
is_primary: contact.is_primary,
|
||||
notes: contact.notes,
|
||||
}
|
||||
: emptyContact;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-2xl">
|
||||
{open && (
|
||||
<ContactForm
|
||||
key={contact?.id ?? "new"}
|
||||
initialForm={initialForm}
|
||||
pending={pending}
|
||||
serverError={serverError}
|
||||
onCancel={() => onOpenChange(false)}
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function ContactForm({
|
||||
initialForm,
|
||||
pending,
|
||||
serverError,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
}: {
|
||||
initialForm: CustomerContactPayload;
|
||||
pending: boolean;
|
||||
serverError?: string;
|
||||
onCancel: () => void;
|
||||
onSubmit: (payload: CustomerContactPayload) => Promise<void>;
|
||||
}) {
|
||||
const [form, setForm] = useState<CustomerContactPayload>(initialForm);
|
||||
const errors = useMemo(() => ({
|
||||
name: form.first_name.trim() || form.last_name.trim()
|
||||
? ""
|
||||
: "Vorname oder Nachname erforderlich",
|
||||
email: !form.email || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)
|
||||
? ""
|
||||
: "Gültige E-Mail erforderlich",
|
||||
}), [form.email, form.first_name, form.last_name]);
|
||||
const valid = Object.values(errors).every((error) => !error);
|
||||
|
||||
function update<K extends keyof CustomerContactPayload>(key: K, value: CustomerContactPayload[K]) {
|
||||
setForm((current) => ({ ...current, [key]: value }));
|
||||
}
|
||||
|
||||
async function handleSubmit(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
await onSubmit({
|
||||
...form,
|
||||
email: form.email?.trim() || null,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Ansprechpartner {initialForm.first_name || initialForm.last_name ? "bearbeiten" : "hinzufügen"}</DialogTitle>
|
||||
<DialogDescription>Ansprechpartnerdaten und Primärkennzeichnung pflegen.</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<Field label="Vorname" error={errors.name}>
|
||||
<Input value={form.first_name} onChange={(event) => update("first_name", event.target.value)} />
|
||||
</Field>
|
||||
<Field label="Nachname">
|
||||
<Input value={form.last_name} onChange={(event) => update("last_name", event.target.value)} />
|
||||
</Field>
|
||||
<Field label="Position">
|
||||
<Input value={form.position} onChange={(event) => update("position", event.target.value)} />
|
||||
</Field>
|
||||
<Field label="E-Mail" error={errors.email}>
|
||||
<Input type="email" value={form.email ?? ""} onChange={(event) => update("email", event.target.value)} />
|
||||
</Field>
|
||||
<Field label="Telefon">
|
||||
<Input value={form.phone} onChange={(event) => update("phone", event.target.value)} />
|
||||
</Field>
|
||||
<Field label="Mobil">
|
||||
<Input value={form.mobile} onChange={(event) => update("mobile", event.target.value)} />
|
||||
</Field>
|
||||
<label className="flex h-8 items-center gap-2 rounded-lg border px-2.5 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.is_primary}
|
||||
onChange={(event) => update("is_primary", event.target.checked)}
|
||||
/>
|
||||
Primärer Ansprechpartner
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Field label="Notizen">
|
||||
<Input value={form.notes} onChange={(event) => update("notes", event.target.value)} />
|
||||
</Field>
|
||||
|
||||
{serverError && <p className="text-sm text-red-600">{serverError}</p>}
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" disabled={pending} onClick={onCancel}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button type="submit" disabled={!valid || pending}>
|
||||
{pending ? "Speichern..." : "Speichern"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
label,
|
||||
error,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
error?: string;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<Label>{label}</Label>
|
||||
{children}
|
||||
{error && <p className="text-xs text-red-600">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
283
frontend/athena/components/customers/CustomerFormDialog.tsx
Normal file
283
frontend/athena/components/customers/CustomerFormDialog.tsx
Normal file
|
|
@ -0,0 +1,283 @@
|
|||
"use client";
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
import type { FormEvent } from "react";
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import type { Customer, CustomerPayload, CustomerStatus, CustomerType } from "@/types/customer";
|
||||
|
||||
const customerTypes: Array<{ value: CustomerType; label: string }> = [
|
||||
{ value: "company", label: "Unternehmen" },
|
||||
{ value: "private", label: "Privat" },
|
||||
{ value: "public_sector", label: "Öffentlicher Sektor" },
|
||||
{ value: "partner", label: "Partner" },
|
||||
{ value: "supplier", label: "Lieferant" },
|
||||
];
|
||||
|
||||
const statuses: Array<{ value: CustomerStatus; label: string }> = [
|
||||
{ value: "lead", label: "Lead" },
|
||||
{ value: "active", label: "Aktiv" },
|
||||
{ value: "inactive", label: "Inaktiv" },
|
||||
{ value: "blocked", label: "Gesperrt" },
|
||||
{ value: "archived", label: "Archiviert" },
|
||||
];
|
||||
|
||||
const emptyCustomer: CustomerPayload = {
|
||||
customer_number: "",
|
||||
company_name: "",
|
||||
legal_name: "",
|
||||
customer_type: "company",
|
||||
status: "lead",
|
||||
industry: "",
|
||||
website: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
tax_number: "",
|
||||
vat_id: "",
|
||||
notes: "",
|
||||
addresses: [
|
||||
{
|
||||
type: "primary",
|
||||
street: "",
|
||||
postal_code: "",
|
||||
city: "",
|
||||
state: "",
|
||||
country: "Deutschland",
|
||||
is_primary: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
customer?: Customer | null;
|
||||
pending?: boolean;
|
||||
serverError?: string;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onSubmit: (payload: CustomerPayload) => Promise<void>;
|
||||
};
|
||||
|
||||
export default function CustomerFormDialog({
|
||||
open,
|
||||
customer,
|
||||
pending = false,
|
||||
serverError,
|
||||
onOpenChange,
|
||||
onSubmit,
|
||||
}: Props) {
|
||||
const initialForm = customer
|
||||
? {
|
||||
customer_number: customer.customer_number,
|
||||
company_name: customer.company_name,
|
||||
legal_name: customer.legal_name,
|
||||
customer_type: customer.customer_type,
|
||||
status: customer.status,
|
||||
industry: customer.industry,
|
||||
website: customer.website,
|
||||
email: customer.email,
|
||||
phone: customer.phone,
|
||||
tax_number: customer.tax_number,
|
||||
vat_id: customer.vat_id,
|
||||
notes: customer.notes,
|
||||
addresses: customer.addresses.length > 0
|
||||
? customer.addresses.map((address) => ({
|
||||
type: address.type,
|
||||
street: address.street,
|
||||
postal_code: address.postal_code,
|
||||
city: address.city,
|
||||
state: address.state,
|
||||
country: address.country,
|
||||
is_primary: address.is_primary,
|
||||
}))
|
||||
: emptyCustomer.addresses,
|
||||
}
|
||||
: emptyCustomer;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-3xl">
|
||||
{open && (
|
||||
<CustomerForm
|
||||
key={customer?.id ?? "new"}
|
||||
initialForm={initialForm}
|
||||
pending={pending}
|
||||
serverError={serverError}
|
||||
onCancel={() => onOpenChange(false)}
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function CustomerForm({
|
||||
initialForm,
|
||||
pending,
|
||||
serverError,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
}: {
|
||||
initialForm: CustomerPayload;
|
||||
pending: boolean;
|
||||
serverError?: string;
|
||||
onCancel: () => void;
|
||||
onSubmit: (payload: CustomerPayload) => Promise<void>;
|
||||
}) {
|
||||
const [form, setForm] = useState<CustomerPayload>(initialForm);
|
||||
|
||||
const errors = useMemo(() => ({
|
||||
customer_number: form.customer_number.trim() ? "" : "Kundennummer erforderlich",
|
||||
company_name: form.company_name.trim() ? "" : "Firmenname erforderlich",
|
||||
email: !form.email || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)
|
||||
? ""
|
||||
: "Gültige E-Mail erforderlich",
|
||||
}), [form.company_name, form.customer_number, form.email]);
|
||||
|
||||
const valid = Object.values(errors).every((error) => !error);
|
||||
|
||||
function update<K extends keyof CustomerPayload>(key: K, value: CustomerPayload[K]) {
|
||||
setForm((current) => ({ ...current, [key]: value }));
|
||||
}
|
||||
|
||||
function updateAddress(index: number, key: keyof CustomerPayload["addresses"][number], value: string | boolean) {
|
||||
setForm((current) => ({
|
||||
...current,
|
||||
addresses: current.addresses.map((address, itemIndex) => (
|
||||
itemIndex === index
|
||||
? { ...address, [key]: value }
|
||||
: key === "is_primary" && value === true
|
||||
? { ...address, is_primary: false }
|
||||
: address
|
||||
)),
|
||||
}));
|
||||
}
|
||||
|
||||
async function handleSubmit(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
await onSubmit({
|
||||
...form,
|
||||
website: form.website?.trim() || null,
|
||||
email: form.email?.trim() || null,
|
||||
addresses: form.addresses.map((address, index) => ({
|
||||
...address,
|
||||
is_primary: address.is_primary || index === 0,
|
||||
})),
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Kunde {initialForm.customer_number ? "bearbeiten" : "erstellen"}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Stammdaten und primäre Adresse des Kunden verwalten.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<Field label="Kundennummer" error={errors.customer_number}>
|
||||
<Input value={form.customer_number} onChange={(event) => update("customer_number", event.target.value)} />
|
||||
</Field>
|
||||
<Field label="Firmenname" error={errors.company_name}>
|
||||
<Input value={form.company_name} onChange={(event) => update("company_name", event.target.value)} />
|
||||
</Field>
|
||||
<Field label="Rechtlicher Name">
|
||||
<Input value={form.legal_name} onChange={(event) => update("legal_name", event.target.value)} />
|
||||
</Field>
|
||||
<Field label="Branche">
|
||||
<Input value={form.industry} onChange={(event) => update("industry", event.target.value)} />
|
||||
</Field>
|
||||
<Field label="Typ">
|
||||
<select value={form.customer_type} onChange={(event) => update("customer_type", event.target.value as CustomerType)} className="h-8 w-full rounded-lg border border-input bg-transparent px-2.5 text-sm">
|
||||
{customerTypes.map((type) => <option key={type.value} value={type.value}>{type.label}</option>)}
|
||||
</select>
|
||||
</Field>
|
||||
<Field label="Status">
|
||||
<select value={form.status} onChange={(event) => update("status", event.target.value as CustomerStatus)} className="h-8 w-full rounded-lg border border-input bg-transparent px-2.5 text-sm">
|
||||
{statuses.map((status) => <option key={status.value} value={status.value}>{status.label}</option>)}
|
||||
</select>
|
||||
</Field>
|
||||
<Field label="E-Mail" error={errors.email}>
|
||||
<Input type="email" value={form.email ?? ""} onChange={(event) => update("email", event.target.value)} />
|
||||
</Field>
|
||||
<Field label="Telefon">
|
||||
<Input value={form.phone} onChange={(event) => update("phone", event.target.value)} />
|
||||
</Field>
|
||||
<Field label="Website">
|
||||
<Input value={form.website ?? ""} onChange={(event) => update("website", event.target.value)} />
|
||||
</Field>
|
||||
<Field label="USt-ID">
|
||||
<Input value={form.vat_id} onChange={(event) => update("vat_id", event.target.value)} />
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border p-4">
|
||||
<h3 className="mb-4 text-sm font-semibold">Primäradresse</h3>
|
||||
{form.addresses.slice(0, 1).map((address, index) => (
|
||||
<div key={index} className="grid gap-4 sm:grid-cols-2">
|
||||
<Field label="Straße">
|
||||
<Input value={address.street} onChange={(event) => updateAddress(index, "street", event.target.value)} />
|
||||
</Field>
|
||||
<Field label="PLZ">
|
||||
<Input value={address.postal_code} onChange={(event) => updateAddress(index, "postal_code", event.target.value)} />
|
||||
</Field>
|
||||
<Field label="Ort">
|
||||
<Input value={address.city} onChange={(event) => updateAddress(index, "city", event.target.value)} />
|
||||
</Field>
|
||||
<Field label="Land">
|
||||
<Input value={address.country} onChange={(event) => updateAddress(index, "country", event.target.value)} />
|
||||
</Field>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Field label="Notizen">
|
||||
<Input value={form.notes} onChange={(event) => update("notes", event.target.value)} />
|
||||
</Field>
|
||||
|
||||
{serverError && <p className="text-sm text-red-600">{serverError}</p>}
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" disabled={pending} onClick={onCancel}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button type="submit" disabled={!valid || pending}>
|
||||
{pending ? "Speichern..." : "Speichern"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
label,
|
||||
error,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
error?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<Label>{label}</Label>
|
||||
{children}
|
||||
{error && <p className="text-xs text-red-600">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
26
frontend/athena/components/customers/CustomerStatusBadge.tsx
Normal file
26
frontend/athena/components/customers/CustomerStatusBadge.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { cn } from "@/lib/utils";
|
||||
import type { CustomerStatus } from "@/types/customer";
|
||||
|
||||
const labels: Record<CustomerStatus, string> = {
|
||||
lead: "Lead",
|
||||
active: "Aktiv",
|
||||
inactive: "Inaktiv",
|
||||
blocked: "Gesperrt",
|
||||
archived: "Archiviert",
|
||||
};
|
||||
|
||||
const styles: Record<CustomerStatus, string> = {
|
||||
lead: "bg-sky-50 text-sky-700 ring-sky-600/20",
|
||||
active: "bg-emerald-50 text-emerald-700 ring-emerald-600/20",
|
||||
inactive: "bg-slate-100 text-slate-600 ring-slate-500/20",
|
||||
blocked: "bg-red-50 text-red-700 ring-red-600/20",
|
||||
archived: "bg-zinc-100 text-zinc-600 ring-zinc-500/20",
|
||||
};
|
||||
|
||||
export default function CustomerStatusBadge({ status }: { status: CustomerStatus }) {
|
||||
return (
|
||||
<span className={cn("inline-flex h-6 items-center rounded-full px-2 text-xs font-medium ring-1", styles[status])}>
|
||||
{labels[status]}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue