refactor: enhance profile data handling and loading state in ProfilePage

src/app/profile/page.tsx

@@ -55,6 +55,8 @@ const defaultProfileData = {
   profileComplete: 0,
   accountHolder: '',
   iban: '',
+  contactPersonName: '',
+  userType: '',
 };
 
 export default function ProfilePage() {
@@ -129,7 +131,7 @@ export default function ProfilePage() {
       return {
         firstName: 'Admin',
         lastName: 'User',
-        email: user.email || 'office@profit-planet.com',
+        email: user?.email || 'office@profit-planet.com',
         phone: '+49 123 456 789',
         address: 'Musterstraße 123, 12345 Berlin',
         joinDate: 'Oktober 2024',
@@ -137,6 +139,8 @@ export default function ProfilePage() {
         profileComplete: progressPercent,
         accountHolder: '', // Always empty string if not provided
         iban: '',
+        contactPersonName: '',
+        userType: user?.userType || '',
       };
     }
     const { user: apiUser = {}, profile: apiProfile = {}, userStatus = {} } = profileDataApi;
@@ -153,6 +157,8 @@ export default function ProfilePage() {
       profileComplete: progressPercent,
       accountHolder: apiProfile.account_holder_name ?? '', // Only use account_holder_name
       iban: apiUser.iban ?? '',
+      contactPersonName: apiProfile.contact_person_name ?? '',
+      userType: apiUser.userType ?? '',
     };
   }, [profileDataApi, user, progressPercent]);
 
@@ -258,11 +264,23 @@ export default function ProfilePage() {
     }
   }, [showRefreshing, profileLoading, mediaLoading, completionLoading]);
 
+  const loadingUser = !user;
+
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50">
+    <div className="min-h-screen flex flex-col bg-gray-50" suppressHydrationWarning>
       <Header />
       <main className="flex-1 py-8 px-4 sm:px-6 lg:px-8">
         <div className="max-w-4xl mx-auto">
+          {loadingUser && (
+            <div className="flex items-center justify-center py-20">
+              <div className="text-center">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#8D6B1D] mx-auto mb-4"></div>
+                <p className="text-[#4A4A4A]">Loading...</p>
+              </div>
+            </div>
+          )}
+          {!loadingUser && (
+            <>
           {/* Page Header */}
           <div className="mb-8">
             <h1 className="text-3xl font-bold text-gray-900">Profile Settings</h1>
@@ -328,7 +346,7 @@ export default function ProfilePage() {
                     onClick={() => router.push('/dashboard')}
                     className="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg transition-colors"
                   >
-                    Back to Dashboard
+                    Go to Dashboard
                   </button>
                   <button className="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
                     Download Account Data
@@ -398,6 +416,8 @@ export default function ProfilePage() {
               </div>
             </div>
           </div>
+            </>
+          )}
         </div>
       </main>
       <Footer />