feat(customers): add dashboard and customer management

frontend/athena/components/Sidebar.tsx

@@ -22,6 +22,7 @@ const menu = [
     icon: LayoutDashboard,
     name: "Dashboard",
     href: "/dashboard",
+    permission: "dashboard.read",
   },
   {
     icon: Users,
@@ -39,6 +40,7 @@ const menu = [
     icon: Users,
     name: "Kunden",
     href: "/customers",
+    permission: "customers.read",
   },
   {
     icon: Wrench,

frontend/athena/components/common/DetailSection.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+
+type Props = {
+  title: string;
+  actions?: ReactNode;
+  children: ReactNode;
+};
+
+export default function DetailSection({ title, actions, children }: Props) {
+  return (
+    <section className="rounded-lg border bg-white p-6">
+      <div className="mb-5 flex items-center justify-between gap-4">
+        <h2 className="text-lg font-semibold text-slate-950">{title}</h2>
+        {actions}
+      </div>
+      {children}
+    </section>
+  );
+}

frontend/athena/components/common/SummaryCard.tsx

@@ -0,0 +1,13 @@
+type Props = {
+  label: string;
+  value: number | string;
+};
+
+export default function SummaryCard({ label, value }: Props) {
+  return (
+    <div className="rounded-lg border bg-white p-5">
+      <p className="text-sm text-slate-500">{label}</p>
+      <p className="mt-2 text-3xl font-semibold text-slate-950">{value}</p>
+    </div>
+  );
+}

frontend/athena/components/customers/CustomerContactFormDialog.tsx

@@ -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>
+  );
+}

frontend/athena/components/customers/CustomerFormDialog.tsx

@@ -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>
+  );
+}

frontend/athena/components/customers/CustomerStatusBadge.tsx

@@ -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>
+  );
+}