Add project management support and integrate customer-project functionality

internal_frontend/components/customers/details/CustomerDetailContent.tsx

@@ -6,10 +6,20 @@ import React from "react";
 type Props = {
     loading: boolean;
     customer: Customer | null;
-    sections: React.ReactNode[];
+    informationSection: React.ReactNode;
+    phoneNumberSection: React.ReactNode;
+    notesSection: React.ReactNode;
+    projectsSection: React.ReactNode;
 };
 
-export default function CustomerDetailContent({loading, customer, sections}: Readonly<Props>) {
+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">
@@ -40,8 +50,22 @@ export default function CustomerDetailContent({loading, customer, sections}: Rea
     }
 
     return (
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-fr">
-            {sections}
+        <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>
     );
 }