Customer Detail Page and Enhance dynamic breadcrumbs

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