403 lines
16 KiB
TypeScript
403 lines
16 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import { useSession } from 'next-auth/react';
|
||
import Image from 'next/image';
|
||
|
||
// Import shared components
|
||
import {
|
||
InfoCard,
|
||
ExperienceSection,
|
||
ProfileCard,
|
||
SpecializationSection,
|
||
TestimonialsSection,
|
||
StatusButtons,
|
||
ContactInfo,
|
||
PhotoUploadModal,
|
||
} from '@/components/profile';
|
||
import { agentsService, AgentProfile, FieldValueResponse } from '@/services/agents.service';
|
||
import { uploadService } from '@/services/upload.service';
|
||
import { mapFieldValuesToExperience, mapFieldValuesToProfileCard, mapFieldValuesToAvailability, ExperienceData, ProfileCardData, AvailabilityData } from '@/utils/profileDataMapper';
|
||
|
||
// Mock data for sections not yet available from API
|
||
const mockData = {
|
||
experience: {
|
||
years: '10+ years',
|
||
contracts: '10+ Contracts',
|
||
licensingAreas: ['Colorado Springs', 'Monument', 'Falcon', 'Castle Rock', 'Fountain', 'Momentum'],
|
||
expertiseYears: [
|
||
{ area: 'Colorado', years: '10 yrs' },
|
||
{ area: 'Falcon', years: '10 yrs' },
|
||
{ area: 'Colorado', years: '10 yrs' },
|
||
{ area: 'Colorado', years: '10 yrs' },
|
||
],
|
||
certifications: [
|
||
{ name: 'Certified Residential Specialist (CRS)', org: 'RESIDENTIAL REAL ESTATE COUNCIL' },
|
||
{ name: 'Certified Residential Specialist (CRS)', org: 'RESIDENTIAL REAL ESTATE COUNCIL' },
|
||
],
|
||
},
|
||
availability: {
|
||
type: 'Full-time',
|
||
days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
|
||
},
|
||
preferredWorkEnvironment: 'Preferred work environment includes on-site property visits, in-depth market research, client consultations, property tours, and active involvement in negotiations to ensure the best outcomes',
|
||
testimonialHighlight: "The most amazing experience I've had as a real estate professional is helping a family secure their dream home and seeing their happiness when they received the keys.",
|
||
specialization: {
|
||
types: ['Buyers', 'Sellers', 'First time Buyers', 'First time Sellers', 'Divorce'],
|
||
loanTypes: ['Conventional', 'FHA', 'VA', 'USDA'],
|
||
propertyTypes: ['SFR', 'Town home', 'Rural', 'Luxury', 'Condo'],
|
||
hobbies: ['Boating', 'Horses', 'RV', 'Automotive', 'Aviation'],
|
||
pricePoints: ['Under $100K', '$100K – $300K', '$300K – $500K', '$500K – $1M', '$1M and above'],
|
||
},
|
||
testimonials: [
|
||
{
|
||
id: 1,
|
||
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
|
||
author: 'Kenedy Kenney',
|
||
role: 'Chief Operations Officer',
|
||
rating: 5,
|
||
},
|
||
{
|
||
id: 2,
|
||
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
|
||
author: 'Kenedy Kenney',
|
||
role: 'Chief Operations Officer',
|
||
rating: 5,
|
||
},
|
||
{
|
||
id: 3,
|
||
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
|
||
author: 'Kenedy Kenney',
|
||
role: 'Chief Operations Officer',
|
||
rating: 5,
|
||
},
|
||
],
|
||
};
|
||
|
||
// Default experience data when no field values are available
|
||
const defaultExperience: ExperienceData = {
|
||
years: '-',
|
||
contracts: '-',
|
||
licensingAreas: [],
|
||
expertiseYears: [],
|
||
certifications: [],
|
||
};
|
||
|
||
// Default profile card data when no field values are available
|
||
const defaultProfileCardData: ProfileCardData = {
|
||
bio: '',
|
||
expertise: [],
|
||
serviceAreas: [],
|
||
};
|
||
|
||
// Default availability data when no field values are available
|
||
const defaultAvailabilityData: AvailabilityData = {
|
||
type: '',
|
||
schedule: [],
|
||
};
|
||
|
||
export default function AgentDashboard() {
|
||
const { data: session } = useSession();
|
||
const [agentProfile, setAgentProfile] = useState<AgentProfile | null>(null);
|
||
const [fieldValues, setFieldValues] = useState<FieldValueResponse[]>([]);
|
||
const [experienceData, setExperienceData] = useState<ExperienceData>(defaultExperience);
|
||
const [profileCardData, setProfileCardData] = useState<ProfileCardData>(defaultProfileCardData);
|
||
const [availabilityData, setAvailabilityData] = useState<AvailabilityData>(defaultAvailabilityData);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [isPhotoModalOpen, setIsPhotoModalOpen] = useState(false);
|
||
const [imageError, setImageError] = useState(false);
|
||
const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
|
||
|
||
const defaultImage = '/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg';
|
||
|
||
// Helper to check if avatar is an S3 key (not a full URL or local path)
|
||
const isS3Key = (avatar: string | null | undefined): boolean => {
|
||
if (!avatar) return false;
|
||
// S3 keys don't start with http or /
|
||
return !avatar.startsWith('http') && !avatar.startsWith('/');
|
||
};
|
||
|
||
// Fetch agent profile and field values on mount
|
||
useEffect(() => {
|
||
const fetchData = async () => {
|
||
try {
|
||
setLoading(true);
|
||
setError(null);
|
||
|
||
// Fetch profile and field values in parallel
|
||
const [profile, fieldValuesResponse] = await Promise.all([
|
||
agentsService.getMyProfile(),
|
||
agentsService.getFieldValues(),
|
||
]);
|
||
|
||
setAgentProfile(profile);
|
||
setFieldValues(fieldValuesResponse.fieldValues);
|
||
|
||
// Map field values to experience data structure
|
||
const mappedExperience = mapFieldValuesToExperience(fieldValuesResponse.fieldValues);
|
||
setExperienceData(mappedExperience);
|
||
|
||
// Map field values to profile card data (bio, expertise)
|
||
const mappedProfileCard = mapFieldValuesToProfileCard(fieldValuesResponse.fieldValues);
|
||
setProfileCardData(mappedProfileCard);
|
||
|
||
// Map field values to availability data
|
||
const mappedAvailability = mapFieldValuesToAvailability(fieldValuesResponse.fieldValues);
|
||
setAvailabilityData(mappedAvailability);
|
||
|
||
// If avatar is an S3 key, fetch presigned URL
|
||
if (profile.avatar && isS3Key(profile.avatar)) {
|
||
try {
|
||
const presignedUrl = await uploadService.getPresignedDownloadUrl(profile.avatar);
|
||
setAvatarUrl(presignedUrl);
|
||
} catch (avatarErr) {
|
||
console.error('Failed to get avatar URL:', avatarErr);
|
||
// Don't fail the whole page, just use default image
|
||
}
|
||
} else if (profile.avatar) {
|
||
// It's already a full URL or local path
|
||
setAvatarUrl(profile.avatar);
|
||
}
|
||
} catch (err) {
|
||
console.error('Failed to fetch profile:', err);
|
||
setError('Failed to load profile data');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
fetchData();
|
||
}, []);
|
||
|
||
const handlePhotoUpload = async (file: File) => {
|
||
// Upload avatar to S3 (uses agent ID as filename for auto-replacement)
|
||
const uploadedFile = await uploadService.uploadAvatar(file);
|
||
|
||
// Update agent profile with the S3 key
|
||
const updatedProfile = await agentsService.updateProfile({ avatar: uploadedFile.url });
|
||
setImageError(false); // Reset error state for new image
|
||
setAgentProfile(updatedProfile);
|
||
|
||
// Fetch new presigned URL for the uploaded avatar
|
||
if (uploadedFile.url && isS3Key(uploadedFile.url)) {
|
||
try {
|
||
const presignedUrl = await uploadService.getPresignedDownloadUrl(uploadedFile.url);
|
||
setAvatarUrl(presignedUrl);
|
||
} catch (err) {
|
||
console.error('Failed to get presigned URL for new avatar:', err);
|
||
}
|
||
}
|
||
};
|
||
|
||
const getProfileImageUrl = () => {
|
||
// If image failed to load, return default
|
||
if (imageError) {
|
||
return defaultImage;
|
||
}
|
||
|
||
// If we have a presigned URL from S3, use it
|
||
if (avatarUrl) {
|
||
return avatarUrl;
|
||
}
|
||
|
||
// Check for null, undefined, or empty string
|
||
if (!agentProfile?.avatar || agentProfile.avatar.trim() === '') {
|
||
return defaultImage;
|
||
}
|
||
|
||
// For relative paths (local assets), return as-is
|
||
if (agentProfile.avatar.startsWith('/')) {
|
||
return agentProfile.avatar;
|
||
}
|
||
|
||
// Default fallback
|
||
return defaultImage;
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="flex items-center justify-center h-[calc(100vh-180px)]">
|
||
<div className="flex flex-col items-center gap-4">
|
||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#E58625]"></div>
|
||
<p className="text-[14px] font-serif text-[#00293D]/70">Loading profile...</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (error || !agentProfile) {
|
||
return (
|
||
<div className="flex items-center justify-center h-[calc(100vh-180px)]">
|
||
<div className="bg-white rounded-[20px] p-8 shadow-[0px_10px_20px_rgba(217,217,217,0.5)] max-w-md text-center">
|
||
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<svg className="w-8 h-8 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
</div>
|
||
<h2 className="text-[18px] font-bold font-serif text-[#00293D] mb-2">Unable to Load Profile</h2>
|
||
<p className="text-[14px] font-serif text-[#00293D]/70 mb-4">{error || 'Profile not found'}</p>
|
||
<button
|
||
onClick={() => window.location.reload()}
|
||
className="px-6 py-2 bg-[#E58625] rounded-full text-[14px] font-semibold font-serif text-white hover:bg-[#E58625]/90 transition-colors"
|
||
>
|
||
Try Again
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// Format member since date
|
||
const formatMemberSince = (dateString?: string) => {
|
||
if (!dateString) return 'Member';
|
||
try {
|
||
const date = new Date(dateString);
|
||
return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
|
||
} catch {
|
||
return 'Member';
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* Main Layout - Responsive: Column on mobile, Row on desktop */}
|
||
<div className="flex flex-col lg:flex-row gap-6 lg:items-stretch">
|
||
{/* Left Sidebar - Status & Contact */}
|
||
<div className="w-full lg:w-[280px] flex-shrink-0 space-y-4 flex flex-col items-center lg:items-start">
|
||
{/* Profile Image */}
|
||
<div className="relative w-[200px] lg:w-[260px]">
|
||
<div className="w-[200px] h-[200px] lg:w-[260px] lg:h-[260px] rounded-[15px] overflow-hidden">
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src={getProfileImageUrl()}
|
||
alt="Profile"
|
||
className="w-full h-full object-cover"
|
||
onError={(e) => {
|
||
const target = e.target as HTMLImageElement;
|
||
target.src = defaultImage;
|
||
}}
|
||
/>
|
||
{/* Gradient Overlay */}
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent pointer-events-none" />
|
||
</div>
|
||
{/* Edit Icon - Top Right Outside */}
|
||
<button
|
||
onClick={() => setIsPhotoModalOpen(true)}
|
||
className="absolute -top-3 -right-3 w-9 h-9 bg-white rounded-[10px] shadow-md flex items-center justify-center hover:bg-gray-50 transition-colors"
|
||
>
|
||
<Image
|
||
src="/assets/icons/edit-icon.svg"
|
||
alt="Edit profile image"
|
||
width={20}
|
||
height={20}
|
||
/>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Status Buttons */}
|
||
<StatusButtons />
|
||
|
||
{/* Contact Info */}
|
||
<ContactInfo
|
||
email={agentProfile.email || agentProfile.user?.email || ''}
|
||
phone={agentProfile.phone || ''}
|
||
/>
|
||
</div>
|
||
|
||
{/* Right Content - Profile Info + Experience + All Sections */}
|
||
<div className="flex-1 space-y-4">
|
||
{/* Profile Card */}
|
||
<ProfileCard
|
||
firstName={agentProfile.firstName}
|
||
lastName={agentProfile.lastName}
|
||
isVerified={agentProfile.isVerified}
|
||
title={agentProfile.agentType?.name || 'Real Estate Agent'}
|
||
location={profileCardData.serviceAreas?.[0] || (agentProfile as unknown as { city?: string }).city || 'United States'}
|
||
memberSince={formatMemberSince((agentProfile as unknown as { createdAt?: string }).createdAt)}
|
||
bio={profileCardData.bio || agentProfile.bio || ''}
|
||
expertise={profileCardData.expertise}
|
||
showEditButton={true}
|
||
editHref="/agent/edit"
|
||
messageHref="/agent/message"
|
||
requestsHref="/agent/network"
|
||
/>
|
||
|
||
{/* Experience Section - Dynamic data from profile fields */}
|
||
<ExperienceSection experience={experienceData} />
|
||
|
||
{/* Info Cards Section */}
|
||
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6">
|
||
<InfoCard
|
||
title="Availability"
|
||
icon={
|
||
<Image
|
||
src="/assets/icons/availability-clock-icon.svg"
|
||
alt="Availability"
|
||
width={28}
|
||
height={31}
|
||
/>
|
||
}
|
||
content={
|
||
<div>
|
||
{availabilityData.type && (
|
||
<p className="font-semibold font-serif text-[14px] leading-[19px] text-[#00293D] mb-2">{availabilityData.type}</p>
|
||
)}
|
||
<div className="space-y-1">
|
||
{availabilityData.schedule.length > 0 ? (
|
||
availabilityData.schedule.map((item, index) => (
|
||
<p key={index} className="font-normal font-serif text-[14px] leading-[19px] text-[#00293D]">{item}</p>
|
||
))
|
||
) : (
|
||
<p className="font-normal font-serif text-[14px] leading-[19px] text-[#00293D]/60">Not specified</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
}
|
||
/>
|
||
<InfoCard
|
||
title=""
|
||
icon={
|
||
<Image
|
||
src="/assets/icons/work-environment-icon.svg"
|
||
alt="Work environment"
|
||
width={28}
|
||
height={28}
|
||
/>
|
||
}
|
||
content={<p className="font-serif font-semibold text-[14px] leading-[19px] text-[#00293D]">{mockData.preferredWorkEnvironment}</p>}
|
||
/>
|
||
<InfoCard
|
||
title=""
|
||
icon={
|
||
<Image
|
||
src="/assets/icons/testimonial-star-icon.svg"
|
||
alt="Testimonial"
|
||
width={28}
|
||
height={28}
|
||
/>
|
||
}
|
||
content={<p className="text-[14px] font-semibold font-serif leading-[19px] text-center text-[#00293D]">“{mockData.testimonialHighlight}”</p>}
|
||
/>
|
||
</div>
|
||
|
||
{/* Specialization Section */}
|
||
<SpecializationSection specialization={mockData.specialization} />
|
||
|
||
{/* Testimonials Section */}
|
||
<TestimonialsSection testimonials={mockData.testimonials} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Photo Upload Modal */}
|
||
<PhotoUploadModal
|
||
isOpen={isPhotoModalOpen}
|
||
onClose={() => setIsPhotoModalOpen(false)}
|
||
onUpload={handlePhotoUpload}
|
||
currentPhoto={agentProfile.avatar}
|
||
currentPhotoUrl={avatarUrl}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|