Merge branch 'customer-details-view' into 'dev'

Customer Detail Page and Enhance dynamic breadcrumbs

See merge request rheinsw/rheinsw-mono-repo!18

backend/server/src/main/java/dev/rheinsw/server/customer/controller/CustomerController.java

@@ -53,7 +53,7 @@ public class CustomerController extends AbstractController {
     }
 
     @GetMapping("/{id}")
-    public ResponseEntity<Customer> loadById(@PathVariable UUID id) {
+    public ResponseEntity<Customer> loadById(@PathVariable("id") UUID id) {
         return ResponseEntity.ok(loadCustomerQuery.loadById(id));
     }
 

internal_frontend/app/api/customers/[id]/route.ts

@@ -0,0 +1,14 @@
+import {NextRequest, NextResponse} from "next/server";
+import {serverCall} from "@/lib/api/serverCall";
+
+export async function GET(request: NextRequest) {
+    const id = request.url.split('/').pop();
+    const response = await serverCall(`/customers/${id}`, "GET");
+
+    if (!response.ok) {
+        return NextResponse.json({error: "Customer not found"}, {status: 404});
+    }
+
+    const customer = await response.json();
+    return NextResponse.json(customer);
+}

internal_frontend/app/customers/[id]/page.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import React, {useEffect, useState, useMemo} from "react";
+import {useParams, useRouter} from "next/navigation";
+import {ChevronLeft} from "lucide-react";
+import axios, {AxiosError} from "axios";
+import {Button} from "@/components/ui/button";
+import {Dialog} from "@/components/ui/dialog";
+import {Skeleton} from "@/components/ui/skeleton";
+import CustomerDetailContent from "@/components/customers/details/CustomerDetailContent";
+import {Customer} from "@/services/customers/entities/customer";
+import CustomerInformationContent from "@/components/customers/details/sub/ContactInformationContent";
+import CustomerPhoneNumberContent from "@/components/customers/details/sub/CustomerPhoneNumberContent";
+import CustomerNotesContent from "@/components/customers/details/sub/CustomerNotesContent";
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '/api';
+
+export default function CustomerDetailPage() {
+    const router = useRouter();
+    const {id} = useParams<{ id: string }>();
+    const [customer, setCustomer] = useState<Customer | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [openDialog, setOpenDialog] = useState(false);
+    const [dialogContent, setDialogContent] = useState<React.ReactNode | null>(null);
+
+    useEffect(() => {
+        if (!id) {
+            setError("Keine Kunden-ID angegeben");
+            setLoading(false);
+            return;
+        }
+
+        let isMounted = true;
+        setLoading(true);
+        setError(null);
+
+        axios
+            .get<Customer>(`${API_BASE_URL}/customers/${id}`)
+            .then((res) => {
+                if (isMounted) {
+                    setCustomer(res.data);
+                }
+            })
+            .catch((error: AxiosError) => {
+                if (isMounted) {
+                    console.error('Error fetching customer:', error);
+                    setCustomer(null);
+                    setError(
+                        error.response?.status === 404
+                            ? "Kunde nicht gefunden"
+                            : "Fehler beim Laden der Kundendaten"
+                    );
+                }
+            })
+            .finally(() => {
+                if (isMounted) {
+                    setLoading(false);
+                }
+            });
+
+        return () => {
+            isMounted = false;
+        };
+    }, [id]);
+
+    const handleOpenDialog = (content: React.ReactNode) => {
+        setDialogContent(content);
+        setOpenDialog(true);
+    };
+
+    const formatDate = (date: string) => {
+        try {
+            const formattedDate = new Date(date).toLocaleDateString('de-DE', {
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+            return formattedDate === 'Invalid Date' ? '-' : formattedDate;
+        } catch (error) {
+            console.error('Error formatting date:', error);
+            return '-';
+        }
+    };
+
+    const customerMetadata = useMemo(() => ({
+        createdInfo: customer
+            ? `Erstellt von ${customer.createdBy || "-"} am ${formatDate(customer.createdAt)}`
+            : "Erstellt von - am -",
+        lastActivityInfo: customer
+            ? `Letzte Aktivität: ${customer.updatedBy || "-"} am ${formatDate(customer.updatedAt)}`
+            : "Letzte Aktivität: - am -"
+    }), [customer]);
+
+    const renderMetadata = () => {
+        if (loading) {
+            return (
+                <div className="flex flex-col items-end gap-1">
+                    <div className="space-y-1">
+                        <Skeleton className="h-4 w-[250px]"/>
+                        <Skeleton className="h-4 w-[280px]"/>
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <div className="flex flex-col items-end gap-1 text-xs text-muted-foreground">
+                <div>{customerMetadata.createdInfo}</div>
+                <div>{customerMetadata.lastActivityInfo}</div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="h-full w-full p-6 space-y-4 text-sm">
+            <div className="flex justify-between items-start">
+                <Button
+                    variant="ghost"
+                    onClick={() => router.push("/customers")}
+                    disabled={loading}
+                    aria-label="Zurück zur Kundenliste"
+                >
+                    <ChevronLeft className="w-4 h-4 mr-1"/>
+                    Zurück
+                </Button>
+
+                {renderMetadata()}
+            </div>
+
+            {error ? (
+                <div className="text-center text-red-500 p-4" role="alert">
+                    {error}
+                </div>
+            ) : (
+                <CustomerDetailContent
+                    loading={loading}
+                    customer={customer}
+                    sections={
+                        customer
+                            ? [
+                                <CustomerInformationContent
+                                    key="customerInformation"
+                                    customer={customer}
+                                    handleOpenDialog={handleOpenDialog}
+                                />,
+                                <CustomerPhoneNumberContent
+                                    key="customerPhoneNumberInfo"
+                                    customer={customer}
+                                    handleOpenDialog={handleOpenDialog}
+                                />,
+                                <CustomerNotesContent
+                                    key="customerNotes"
+                                    customer={customer}
+                                    handleOpenDialog={handleOpenDialog}
+                                />
+                            ]
+                            : []
+                    }
+                />
+            )}
+
+            <Dialog open={openDialog} onOpenChange={setOpenDialog}>
+                {dialogContent}
+            </Dialog>
+        </div>
+    );
+}

internal_frontend/app/customers/page.tsx

@@ -24,36 +24,7 @@ import {motion} from "framer-motion";
 import {ArrowRight} from "lucide-react";
 import {NewCustomerModal} from "@/components/customers/modal/NewCustomerModal";
 import axios from "axios";
-
+import {Customer} from "@/services/customers/entities/customer";
-export interface CustomerPhoneNumber {
-    number: string;
-    note: string;
-    creator: string;
-    lastModifier: string;
-    createdAt: string;
-    updatedAt: string;
-}
-
-export interface CustomerNote {
-    text: string;
-    creator: string;
-    lastModifier: string;
-    createdAt: string;
-    updatedAt: string;
-}
-
-export interface Customer {
-    id: string;
-    email: string;
-    name: string;
-    companyName: string;
-    phoneNumbers: CustomerPhoneNumber[];
-    street: string;
-    zip: string;
-    city: string;
-    notes: CustomerNote[];
-    createdAt: string;
-}
 
 export default function CustomersPage() {
     const router = useRouter();
@@ -64,17 +35,30 @@ export default function CustomersPage() {
     const pageSize = 15;
 
     useEffect(() => {
-        axios.get("/api/customers").then((res) => {
+        setLoading(true);
-            setCustomers(res.data);
+        axios.get("/api/customers")
-            setLoading(false);
+            .then((res) => {
-        });
+                setCustomers(res.data);
+            })
+            .catch((error) => {
+                console.error('Error fetching customers:', error);
+                setCustomers([]);
+            })
+            .finally(() => {
+                setLoading(false);
+            });
     }, []);
 
     const filtered = useMemo(() => {
         return customers.filter(
             (c) =>
                 c.name.toLowerCase().includes(search.toLowerCase()) ||
-                c.email.toLowerCase().includes(search.toLowerCase())
+                c.email.toLowerCase().includes(search.toLowerCase()) ||
+                c.companyName.toLowerCase().includes(search.toLowerCase()) ||
+                c.street.toLowerCase().includes(search.toLowerCase()) ||
+                c.zip.toLowerCase().includes(search.toLowerCase()) ||
+                c.city.toLowerCase().includes(search.toLowerCase()) ||
+                c.phoneNumbers?.[0]?.number?.toLowerCase().includes(search.toLowerCase())
         );
     }, [customers, search]);
 

internal_frontend/components/customers/details/CustomerDetailContent.tsx

@@ -0,0 +1,47 @@
+import {Card} from "@/components/ui/card";
+import {Skeleton} from "@/components/ui/skeleton";
+import {Customer} from "@/services/customers/entities/customer";
+import React from "react";
+
+type Props = {
+    loading: boolean;
+    customer: Customer | null;
+    sections: React.ReactNode[];
+};
+
+export default function CustomerDetailContent({loading, customer, sections}: Readonly<Props>) {
+    if (loading) {
+        return (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-fr">
+                <Card className="p-4 space-y-2">
+                    <Skeleton className="h-5 w-40"/>
+                    <Skeleton className="h-4 w-64"/>
+                    <Skeleton className="h-4 w-44"/>
+                    <Skeleton className="h-4 w-72"/>
+                </Card>
+                <Card className="p-4 space-y-2">
+                    <Skeleton className="h-5 w-40"/>
+                    <Skeleton className="h-14 w-full"/>
+                </Card>
+                <Card className="p-4 space-y-2 md:col-span-2">
+                    <Skeleton className="h-5 w-40"/>
+                    <Skeleton className="h-20 w-full"/>
+                </Card>
+            </div>
+        );
+    }
+
+    if (!customer) {
+        return (
+            <div className="text-center text-muted-foreground pt-20">
+                <p className="text-lg">Keine Kundendaten gefunden.</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-fr">
+            {sections}
+        </div>
+    );
+}

internal_frontend/components/customers/details/sub/ContactInformationContent.tsx

@@ -0,0 +1,108 @@
+import {Button} from "@/components/ui/button";
+import {Mail, Pencil, Building, MapPin, User, Copy} from "lucide-react";
+import {Card} from "@/components/ui/card";
+import React from "react";
+import {
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
+import {Customer} from "@/services/customers/entities/customer";
+
+interface Props {
+    customer: Customer,
+    handleOpenDialog: (content: React.ReactNode) => void;
+}
+
+export default function ContactInformationContent({customer, handleOpenDialog}: Readonly<Props>) {
+    const copyToClipboard = async (text: string) => {
+        await navigator.clipboard.writeText(text);
+    };
+
+    const handleEditClick = () => {
+        handleOpenDialog(
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>Kontaktinformationen bearbeiten</DialogTitle>
+                    <DialogDescription>
+                        Bearbeite hier die Kontaktinformationen für {customer.name}.
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                    {/* Add your form fields here */}
+                    <p className="text-sm text-muted-foreground italic">Form fields will go here.</p>
+                    <div className="rounded-lg border bg-muted/40 p-4 space-y-2">
+                        <p className="text-sm"><span className="text-muted-foreground">Name:</span> {customer.name}</p>
+                        <p className="text-sm"><span className="text-muted-foreground">E-Mail:</span> {customer.email}
+                        </p>
+                        <p className="text-sm"><span
+                            className="text-muted-foreground">Firma:</span> {customer.companyName}</p>
+                        <p className="text-sm">
+                            <span
+                                className="text-muted-foreground">Adresse:</span> {customer.street}, {customer.zip} {customer.city}
+                        </p>
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => handleOpenDialog(null)}>Abbrechen</Button>
+                    <Button type="submit">Speichern</Button>
+                </DialogFooter>
+            </DialogContent>
+        );
+    };
+
+    return (
+        <Card className="p-4">
+            <div className="flex justify-between items-start">
+                <div className="flex items-center gap-2">
+                    <Mail className="w-4 h-4 text-muted-foreground"/>
+                    <h2 className="text-lg font-semibold">Kontaktinformationen</h2>
+                </div>
+                <Button
+                    size="icon"
+                    variant="ghost"
+                    onClick={handleEditClick}
+                >
+                    <Pencil className="w-4 h-4"/>
+                </Button>
+            </div>
+            <div className="space-y-3 mt-2">
+                {[
+                    {icon: User, label: "Name", value: customer.name},
+                    {icon: Mail, label: "E-Mail", value: customer.email, copyable: true},
+                    {icon: Building, label: "Firma", value: customer.companyName},
+                    {icon: MapPin, label: "Adresse", value: `${customer.street}, ${customer.zip} ${customer.city}`}
+                ].map((item, index) => (
+                    <div key={index}
+                         className="group flex items-start gap-3 rounded-md p-1.5 hover:bg-muted/50 transition-colors">
+                        <item.icon className="h-4 w-4 text-muted-foreground mt-0.5"/>
+                        <div className="flex-1">
+                            <p className="text-xs text-muted-foreground">{item.label}</p>
+                            <div className="flex items-center justify-between gap-2">
+                                <p className="text-sm font-medium">{item.value}</p>
+                                {item.copyable && (
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <Button
+                                                size="icon"
+                                                variant="ghost"
+                                                className="opacity-0 group-hover:opacity-100 transition-opacity"
+                                                onClick={() => copyToClipboard(item.value)}
+                                            >
+                                                <Copy className="h-4 w-4"/>
+                                            </Button>
+                                        </TooltipTrigger>
+                                        <TooltipContent>Kopieren</TooltipContent>
+                                    </Tooltip>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </Card>
+    );
+}

internal_frontend/components/customers/details/sub/CustomerNotesContent.tsx

@@ -0,0 +1,217 @@
+import React, {useState} from 'react';
+import {motion, AnimatePresence} from "framer-motion";
+import {Card} from "@/components/ui/card";
+import {Button} from "@/components/ui/button";
+import {ChevronDown, ChevronRight, Pencil, Plus, Trash2, Notebook} from "lucide-react";
+import {Customer, CustomerNote} from "@/services/customers/entities/customer";
+import {
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import {Label} from "@/components/ui/label";
+import {Textarea} from "@/components/ui/textarea";
+import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
+
+type Props = {
+    customer: Customer;
+    handleOpenDialog: (content: React.ReactNode) => void;
+};
+
+export default function CustomerNotesContent({customer, handleOpenDialog}: Readonly<Props>) {
+    const [expandedNotes, setExpandedNotes] = useState<number[]>([]);
+
+    const toggleNote = (index: number) => {
+        setExpandedNotes(prev =>
+            prev.includes(index) ? prev.filter(i => i !== index) : [...prev, index]
+        );
+    };
+
+    const handleAddNote = () => {
+        handleOpenDialog(
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Neue Notiz hinzufügen</DialogTitle>
+                    <DialogDescription>
+                        Füge eine neue Notiz für {customer.name} hinzu.
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                    <div className="space-y-2">
+                        <Label htmlFor="note">Notiz</Label>
+                        <Textarea
+                            id="note"
+                            placeholder="Schreib hier deine Notiz..."
+                            className="min-h-[150px]"
+                        />
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => handleOpenDialog(null)}>
+                        Abbrechen
+                    </Button>
+                    <Button type="submit">
+                        Speichern
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        );
+    };
+
+    const handleEditNote = (note: CustomerNote) => {
+        handleOpenDialog(
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Notiz bearbeiten</DialogTitle>
+                    <DialogDescription>
+                        Bearbeite deine Notiz hier.
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                    <div className="space-y-2">
+                        <Label htmlFor="note">Notiz</Label>
+                        <Textarea
+                            id="note"
+                            defaultValue={note.text}
+                            className="min-h-[150px]"
+                        />
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => handleOpenDialog(null)}>
+                        Abbrechen
+                    </Button>
+                    <Button type="submit">
+                        Speichern
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        );
+    };
+
+    const handleDeleteNote = (note: CustomerNote) => {
+        handleOpenDialog(
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Notiz löschen</DialogTitle>
+                    <DialogDescription>
+                        Willst du diese Notiz von der Firma <strong>{customer.companyName}</strong> wirklich löschen?
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="py-4 text-sm text-muted-foreground">
+                    {note.text}
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => handleOpenDialog(null)}>
+                        Abbrechen
+                    </Button>
+                    <Button variant="destructive" onClick={() => {
+                        // Handle delete
+                        handleOpenDialog(null);
+                    }}>
+                        Löschen
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        );
+    };
+
+    return (
+        <Card className="p-4 pb-2 md:col-span-2">
+            <div className="flex justify-between items-start">
+                <div className="flex items-center gap-2">
+                    <Notebook className="w-4 h-4 text-muted-foreground"/>
+                    <h2 className="text-lg font-semibold">Notizen</h2>
+                </div>
+                <Button
+                    size="icon"
+                    variant="ghost"
+                    onClick={handleAddNote}
+                >
+                    <Plus className="w-4 h-4"/>
+                </Button>
+            </div>
+            <div className="space-y-1 mt-2">
+                {customer.notes.map((note, index) => (
+                    <motion.div
+                        key={index}
+                        initial={false}
+                        className="group rounded-md hover:bg-muted/50 transition-colors"
+                    >
+                        <div className="px-2 py-1.5">
+                            <div className="flex items-start gap-2">
+                                <button
+                                    type="button"
+                                    className="text-muted-foreground mt-1"
+                                    onClick={() => toggleNote(index)}
+                                >
+                                    {expandedNotes.includes(index) ?
+                                        <ChevronDown className="w-4 h-4"/> :
+                                        <ChevronRight className="w-4 h-4"/>
+                                    }
+                                </button>
+                                <div className="flex-1">
+                                    <div className="flex justify-between items-start gap-2">
+                                        <div
+                                            className="flex-1 font-medium cursor-pointer"
+                                            onClick={() => toggleNote(index)}
+                                        >
+                                            {note.text}
+                                        </div>
+                                        <div
+                                            className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
+                                            <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <Button
+                                                        size="icon"
+                                                        variant="ghost"
+                                                        onClick={() => handleEditNote(note)}
+                                                    >
+                                                        <Pencil className="w-4 h-4"/>
+                                                    </Button>
+                                                </TooltipTrigger>
+                                                <TooltipContent>Bearbeiten</TooltipContent>
+                                            </Tooltip>
+                                            <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <Button
+                                                        size="icon"
+                                                        variant="ghost"
+                                                        onClick={() => handleDeleteNote(note)}
+                                                    >
+                                                        <Trash2 className="w-4 h-4 text-destructive"/>
+                                                    </Button>
+                                                </TooltipTrigger>
+                                                <TooltipContent>Löschen</TooltipContent>
+                                            </Tooltip>
+                                        </div>
+                                    </div>
+                                    <AnimatePresence>
+                                        {expandedNotes.includes(index) && (
+                                            <motion.div
+                                                initial={{height: 0, opacity: 0}}
+                                                animate={{height: "auto", opacity: 1}}
+                                                exit={{height: 0, opacity: 0}}
+                                                transition={{duration: 0.2}}
+                                                className="overflow-hidden"
+                                            >
+                                                <div className="pt-2 text-sm">
+                                                    <p className="text-xs text-muted-foreground">
+                                                        Erstellt von {note.creator} am {" "}
+                                                        {new Date(note.createdAt).toLocaleString()}
+                                                    </p>
+                                                </div>
+                                            </motion.div>
+                                        )}
+                                    </AnimatePresence>
+                                </div>
+                            </div>
+                        </div>
+                    </motion.div>
+                ))}
+            </div>
+        </Card>
+    );
+}

internal_frontend/components/customers/details/sub/CustomerPhoneNumberContent.tsx

@@ -0,0 +1,230 @@
+import React, {useState} from 'react';
+import {motion, AnimatePresence} from "framer-motion";
+import {Card} from "@/components/ui/card";
+import {Button} from "@/components/ui/button";
+import {Phone, ChevronDown, ChevronRight, Copy, Pencil, Plus, Trash2} from "lucide-react";
+import {
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle
+} from "@/components/ui/dialog";
+import {Input} from "@/components/ui/input";
+import {Label} from "@/components/ui/label";
+import {Textarea} from "@/components/ui/textarea";
+import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
+import {Customer, CustomerPhoneNumber} from "@/services/customers/entities/customer";
+
+interface Props {
+    customer: Customer,
+    handleOpenDialog: (content: React.ReactNode | null) => void;
+}
+
+export default function CustomerPhoneNumberContent({customer, handleOpenDialog}: Readonly<Props>) {
+    const [expandedPhones, setExpandedPhones] = useState<number[]>([]);
+
+    const togglePhone = (index: number) => {
+        setExpandedPhones(prev =>
+            prev.includes(index) ? prev.filter(i => i !== index) : [...prev, index]
+        );
+    };
+
+    const copyToClipboard = async (text: string) => {
+        await navigator.clipboard.writeText(text);
+    };
+
+    const handleAddPhone = () => {
+        handleOpenDialog(
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Neue Telefonnummer</DialogTitle>
+                    <DialogDescription>
+                        Füge eine neue Telefonnummer für <strong>{customer.companyName}</strong> hinzu.
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                    <div className="space-y-2">
+                        <Label htmlFor="phone">Telefonnummer</Label>
+                        <Input id="phone" placeholder="+49 123 456789"/>
+                    </div>
+                    <div className="space-y-2">
+                        <Label htmlFor="note">Notiz</Label>
+                        <Textarea id="note" placeholder="Optionale Notiz zur Telefonnummer" className="h-20"/>
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => handleOpenDialog(null)}>
+                        Abbrechen
+                    </Button>
+                    <Button type="submit">Speichern</Button>
+                </DialogFooter>
+            </DialogContent>
+        );
+    };
+
+    const handleEditPhone = (phone: CustomerPhoneNumber) => {
+        handleOpenDialog(
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Telefonnummer bearbeiten</DialogTitle>
+                    <DialogDescription>
+                        Bearbeite die Telefonnummer für <strong>{customer.companyName}</strong>.
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                    <div className="space-y-2">
+                        <Label htmlFor="phone">Telefonnummer</Label>
+                        <Input id="phone" defaultValue={phone.number} placeholder="+49 123 456789"/>
+                    </div>
+                    <div className="space-y-2">
+                        <Label htmlFor="note">Notiz</Label>
+                        <Textarea
+                            id="note"
+                            defaultValue={phone.note}
+                            placeholder="Optionale Notiz zur Telefonnummer"
+                            className="h-20"
+                        />
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => handleOpenDialog(null)}>
+                        Abbrechen
+                    </Button>
+                    <Button type="submit">Speichern</Button>
+                </DialogFooter>
+            </DialogContent>
+        );
+    };
+
+    const handleDeletePhone = (phone: CustomerPhoneNumber) => {
+        handleOpenDialog(
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Telefonnummer löschen</DialogTitle>
+                    <DialogDescription>
+                        Willst du die Telefonnummer <strong>{phone.number}</strong> von der
+                        Firma <strong>{customer.companyName}</strong> löschen?
+                    </DialogDescription>
+                </DialogHeader>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => handleOpenDialog(null)}>
+                        Abbrechen
+                    </Button>
+                    <Button variant="destructive" onClick={() => {
+                        // Add your delete logic here
+                        handleOpenDialog(null);
+                    }}>
+                        Löschen
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        );
+    };
+
+    return (
+        <Card className="p-4">
+            <div className="flex justify-between items-start">
+                <div className="flex items-center gap-2">
+                    <Phone className="w-4 h-4 text-muted-foreground"/>
+                    <h2 className="text-lg font-semibold">Telefonnummern</h2>
+                </div>
+                <Button
+                    size="icon"
+                    variant="ghost"
+                    onClick={handleAddPhone}
+                >
+                    <Plus className="w-4 h-4"/>
+                </Button>
+            </div>
+            <div className="space-y-1 mt-2">
+                {customer.phoneNumbers.map((phone, index) => (
+                    <motion.div
+                        key={index}
+                        initial={false}
+                        className="group rounded-md hover:bg-muted/50 transition-colors"
+                    >
+                        <div className="px-2 py-1.5">
+                            <div className="flex items-center justify-between">
+                                <button
+                                    type="button"
+                                    className="flex items-center gap-2 flex-1 text-left"
+                                    onClick={() => togglePhone(index)}
+                                >
+                                    <div className="text-muted-foreground">
+                                        {expandedPhones.includes(index) ?
+                                            <ChevronDown className="w-4 h-4"/> :
+                                            <ChevronRight className="w-4 h-4"/>
+                                        }
+                                    </div>
+                                    <span className="font-medium">{phone.number}</span>
+                                </button>
+                                <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <Button
+                                                size="icon"
+                                                variant="ghost"
+                                                onClick={() => copyToClipboard(phone.number)}
+                                            >
+                                                <Copy className="w-4 h-4"/>
+                                            </Button>
+                                        </TooltipTrigger>
+                                        <TooltipContent>Kopieren</TooltipContent>
+                                    </Tooltip>
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <Button
+                                                size="icon"
+                                                variant="ghost"
+                                                onClick={() => handleEditPhone(phone)}
+                                            >
+                                                <Pencil className="w-4 h-4"/>
+                                            </Button>
+                                        </TooltipTrigger>
+                                        <TooltipContent>Bearbeiten</TooltipContent>
+                                    </Tooltip>
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <Button
+                                                size="icon"
+                                                variant="ghost"
+                                                onClick={() => handleDeletePhone(phone)}
+                                            >
+                                                <Trash2 className="w-4 h-4 text-destructive"/>
+                                            </Button>
+                                        </TooltipTrigger>
+                                        <TooltipContent>Löschen</TooltipContent>
+                                    </Tooltip>
+                                </div>
+                            </div>
+                            <AnimatePresence>
+                                {expandedPhones.includes(index) && (
+                                    <motion.div
+                                        initial={{height: 0, opacity: 0}}
+                                        animate={{height: "auto", opacity: 1}}
+                                        exit={{height: 0, opacity: 0}}
+                                        transition={{duration: 0.2}}
+                                        className="overflow-hidden"
+                                    >
+                                        <div className="pt-2 pl-6 text-sm space-y-1">
+                                            {phone.note && (
+                                                <p className="text-muted-foreground">
+                                                    {phone.note}
+                                                </p>
+                                            )}
+                                            <p className="text-xs text-muted-foreground">
+                                                Erstellt von {phone.creator} am {" "}
+                                                {new Date(phone.createdAt).toLocaleDateString()}
+                                            </p>
+                                        </div>
+                                    </motion.div>
+                                )}
+                            </AnimatePresence>
+                        </div>
+                    </motion.div>
+                ))}
+            </div>
+        </Card>
+    );
+}

internal_frontend/components/dynamic-breadcrumb.tsx

@@ -1,4 +1,3 @@
-// components/dynamic-breadcrumb.tsx
 'use client';
 
 import {usePathname} from 'next/navigation';
@@ -9,29 +8,111 @@ import {
     BreadcrumbList,
     BreadcrumbPage,
     BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
+} from '@/components/ui/breadcrumb';
-import React from 'react';
+import {Skeleton} from "@/components/ui/skeleton";
-import {getBreadcrumbs} from "@/utils/BreadcrumbUtils";
+import React, {useEffect, useState} from 'react';
+import {getBreadcrumbs} from '@/utils/BreadcrumbUtils';
+import {breadcrumbResolvers} from "@/lib/breadcrumb-map";
+
+interface ResolvedBreadcrumb {
+    href: string;
+    label: string;
+    isCurrentPage: boolean;
+}
 
 export function DynamicBreadcrumb() {
     const pathname = usePathname();
-    const breadcrumbs = getBreadcrumbs(pathname);
+    const [resolvedBreadcrumbs, setResolvedBreadcrumbs] = useState<ResolvedBreadcrumb[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+
+    // Get initial segments count for skeleton
+    const pathSegments = pathname.split('/').filter(Boolean);
+
+    useEffect(() => {
+        const resolveDynamicLabels = async () => {
+            setIsLoading(true);
+            const raw = getBreadcrumbs(pathname);
+
+            const enhanced = await Promise.all(
+                raw.map(async (b) => {
+                    const pathSegments = b.href.split('/').filter(Boolean);
+                    const lastSegment = pathSegments[pathSegments.length - 1];
+                    const parentSegment = pathSegments[pathSegments.length - 2];
+
+                    const isUUID = /^[0-9a-fA-F-]{36}$/.test(lastSegment);
+                    const resolve = breadcrumbResolvers[parentSegment];
+
+                    if (isUUID && resolve) {
+                        try {
+                            const dynamicLabel = await resolve(lastSegment);
+                            return {
+                                href: b.href,
+                                label: dynamicLabel,
+                                isCurrentPage: b.isCurrentPage ?? false,
+                            };
+                        } catch {
+                            return {
+                                href: b.href,
+                                label: lastSegment,
+                                isCurrentPage: b.isCurrentPage ?? false,
+                            };
+                        }
+                    }
+
+                    return {
+                        href: b.href,
+                        label: b.label,
+                        isCurrentPage: b.isCurrentPage ?? false,
+                    };
+                })
+            );
+
+            setResolvedBreadcrumbs(enhanced);
+            setIsLoading(false);
+        };
+
+        resolveDynamicLabels();
+    }, [pathname]);
+
+    if (isLoading) {
+        return (
+            <Breadcrumb>
+                <BreadcrumbList>
+                    {/* Always show Home for empty path */}
+                    <BreadcrumbItem className="hidden md:block">
+                        <Skeleton className="h-4 w-[60px]"/>
+                    </BreadcrumbItem>
+                    {pathSegments.length > 0 && <BreadcrumbSeparator className="hidden md:block"/>}
+
+                    {/* Show skeleton for each path segment */}
+                    {pathSegments.map((_, index) => (
+                        <React.Fragment key={index}>
+                            <BreadcrumbItem className="hidden md:block">
+                                <Skeleton className={`h-4 w-[${index === pathSegments.length - 1 ? '120' : '80'}px]`}/>
+                            </BreadcrumbItem>
+                            {index < pathSegments.length - 1 && (
+                                <BreadcrumbSeparator className="hidden md:block"/>
+                            )}
+                        </React.Fragment>
+                    ))}
+                </BreadcrumbList>
+            </Breadcrumb>
+        );
+    }
 
     return (
         <Breadcrumb>
             <BreadcrumbList>
-                {breadcrumbs.map((breadcrumb, index) => (
+                {resolvedBreadcrumbs.map((breadcrumb, index) => (
                     <React.Fragment key={breadcrumb.href}>
                         <BreadcrumbItem className="hidden md:block">
                             {breadcrumb.isCurrentPage ? (
                                 <BreadcrumbPage>{breadcrumb.label}</BreadcrumbPage>
                             ) : (
-                                <BreadcrumbLink href={breadcrumb.href}>
+                                <BreadcrumbLink href={breadcrumb.href}>{breadcrumb.label}</BreadcrumbLink>
-                                    {breadcrumb.label}
-                                </BreadcrumbLink>
                             )}
                         </BreadcrumbItem>
-                        {index < breadcrumbs.length - 1 && (
+                        {index < resolvedBreadcrumbs.length - 1 && (
                             <BreadcrumbSeparator className="hidden md:block"/>
                         )}
                     </React.Fragment>

internal_frontend/components/ui/card.tsx

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        "bg-card text-card-foreground flex flex-col gap-3 rounded-xl border py-6 shadow-sm",
         className
       )}
       {...props}

internal_frontend/lib/breadcrumb-map.ts

@@ -6,4 +6,15 @@ export const breadcrumbMap: Record<string, string> = {
     'users': 'User Management',
     'customers': 'Kundenübersicht',
     // Add more mappings as needed
-};
+};
+
+export const breadcrumbResolvers: Record<string, (id: string) => Promise<string>> = {
+    "customers": async (id: string) => {
+        const res = await fetch(`/api/customers/${id}`, {cache: "no-store"});
+        const customer = await res  .json();
+        if (customer.companyName) return `Firma: ${customer.companyName}`;
+        if (customer.name) return `Name: ${customer.name}`;
+        return `ID: ${id}`;
+    },
+    // Add more mappings as needed
+};

internal_frontend/services/customers/entities/customer.ts

@@ -1,17 +1,21 @@
-export interface PhoneNumber {
+export interface CustomerPhoneNumber {
     number: string;
     note: string;
-    createdBy: string;
+    creator: string;
+    createdBy: number;
+    lastModifier: string;
+    updatedBy: number;
     createdAt: string;
-    updatedBy: string;
     updatedAt: string;
 }
 
-export interface Note {
+export interface CustomerNote {
     text: string;
-    createdBy: string;
+    creator: string;
+    createdBy: number;
+    lastModifier: string;
+    updatedBy: number;
     createdAt: string;
-    updatedBy: string;
     updatedAt: string;
 }
 
@@ -20,13 +24,13 @@ export interface Customer {
     email: string;
     name: string;
     companyName: string;
-    phoneNumbers: PhoneNumber[];
+    phoneNumbers: CustomerPhoneNumber[];
     street: string;
     zip: string;
     city: string;
-    notes: Note[];
+    notes: CustomerNote[];
-    createdBy: string;
+    createdBy: number;
+    updatedBy: number;
     createdAt: string;
-    updatedBy: string;
     updatedAt: string;
-}
+}

internal_frontend/services/customers/usecases/validateCustomer.ts

@@ -1,8 +1,8 @@
 "use server";
 
 import {callApi} from "@/lib/api/callApi";
-import {Customer} from "@/app/customers/page";
 import {customerRoutes} from "@/app/api/customers/customerRoutes";
+import {Customer} from "@/services/customers/entities/customer";
 
 export async function validateCustomer(input: {
     email: string;

internal_frontend/utils/BreadcrumbUtils.ts

@@ -1,19 +1,18 @@
-// utils/getBreadcrumbs.ts
+import {breadcrumbMap} from "@/lib/breadcrumb-map";
-import {breadcrumbMap} from '@/lib/breadcrumb-map';
 
-export type Breadcrumb = {
+export interface Breadcrumb {
-    label: string;
     href: string;
-    isCurrentPage?: boolean;
+    label: string;
-};
+    isCurrentPage: boolean;
+}
 
 export function getBreadcrumbs(path: string): Breadcrumb[] {
     const pathSegments = path.split('/').filter(Boolean);
 
     return pathSegments.map((segment, index) => {
         const href = `/${pathSegments.slice(0, index + 1).join('/')}`;
-        // Use the mapping if it exists, otherwise format the segment
+        const label =
-        const label = breadcrumbMap[segment.toLowerCase()] ||
+            breadcrumbMap[segment.toLowerCase()] ||
             segment
                 .split('-')
                 .map(word => word.charAt(0).toUpperCase() + word.slice(1))
@@ -22,7 +21,7 @@ export function getBreadcrumbs(path: string): Breadcrumb[] {
         return {
             label,
             href,
-            isCurrentPage: index === pathSegments.length - 1
+            isCurrentPage: index === pathSegments.length - 1,
         };
     });
 }