72 lines
2.7 KiB
TypeScript
72 lines
2.7 KiB
TypeScript
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;
|
|
informationSection: React.ReactNode;
|
|
phoneNumberSection: React.ReactNode;
|
|
notesSection: React.ReactNode;
|
|
projectsSection: React.ReactNode;
|
|
};
|
|
|
|
export default function CustomerDetailContent({
|
|
loading,
|
|
customer,
|
|
informationSection,
|
|
phoneNumberSection,
|
|
notesSection,
|
|
projectsSection,
|
|
}: 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="flex flex-col gap-4 h-full">
|
|
{/* Row 1: 50/50 layout */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{informationSection}
|
|
{phoneNumberSection}
|
|
</div>
|
|
|
|
{/* Row 2: Fill remaining height */}
|
|
<div className="flex-1 grid grid-cols-1 xl:grid-cols-10 gap-4 min-h-0">
|
|
<div className="xl:col-span-6 flex flex-col min-h-0">
|
|
<div className="flex-1 overflow-auto">{notesSection}</div>
|
|
</div>
|
|
<div className="xl:col-span-4 flex flex-col min-h-0">
|
|
<div className="flex-1 overflow-auto">{projectsSection}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|