refactor: enhance profile data handling and loading state in ProfilePage

This commit is contained in:
seaznCode 2025-11-30 13:31:20 +01:00
parent 01ce0f5346
commit da7047566e

View File

@ -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 />