diff --git a/src/app/(agent)/agent/dashboard/page.tsx b/src/app/(agent)/agent/dashboard/page.tsx index 3dd86ef..1e5e688 100644 --- a/src/app/(agent)/agent/dashboard/page.tsx +++ b/src/app/(agent)/agent/dashboard/page.tsx @@ -15,8 +15,9 @@ import { ContactInfo, PhotoUploadModal, } from '@/components/profile'; -import { agentsService, AgentProfile } from '@/services/agents.service'; +import { agentsService, AgentProfile, FieldValueResponse } from '@/services/agents.service'; import { uploadService } from '@/services/upload.service'; +import { mapFieldValuesToExperience, ExperienceData } from '@/utils/profileDataMapper'; // Mock data for sections not yet available from API const mockData = { @@ -73,24 +74,68 @@ const mockData = { ], }; +// Default experience data when no field values are available +const defaultExperience: ExperienceData = { + years: '-', + contracts: '-', + licensingAreas: [], + expertiseYears: [], + certifications: [], +}; + export default function AgentDashboard() { const { data: session } = useSession(); const [agentProfile, setAgentProfile] = useState(null); + const [fieldValues, setFieldValues] = useState([]); + const [experienceData, setExperienceData] = useState(defaultExperience); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [isPhotoModalOpen, setIsPhotoModalOpen] = useState(false); const [imageError, setImageError] = useState(false); + const [avatarUrl, setAvatarUrl] = useState(null); const defaultImage = '/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg'; - // Fetch agent profile on mount + // 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 fetchProfile = async () => { + const fetchData = async () => { try { setLoading(true); setError(null); - const profile = await agentsService.getMyProfile(); + + // 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); + + // 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'); @@ -99,17 +144,27 @@ export default function AgentDashboard() { } }; - fetchProfile(); + 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 URL + // 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 = () => { @@ -118,18 +173,23 @@ export default function AgentDashboard() { 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; } - // S3 URLs are full URLs starting with http - if (agentProfile.avatar.startsWith('http')) { + // For relative paths (local assets), return as-is + if (agentProfile.avatar.startsWith('/')) { return agentProfile.avatar; } - // For relative paths (local assets), return as-is - return agentProfile.avatar; + // Default fallback + return defaultImage; }; if (loading) { @@ -240,8 +300,8 @@ export default function AgentDashboard() { requestsHref="/agent/network" /> - {/* Experience Section */} - + {/* Experience Section - Dynamic data from profile fields */} + {/* Info Cards Section */}
@@ -306,6 +366,7 @@ export default function AgentDashboard() { onClose={() => setIsPhotoModalOpen(false)} onUpload={handlePhotoUpload} currentPhoto={agentProfile.avatar} + currentPhotoUrl={avatarUrl} />
); diff --git a/src/app/(user)/user/profile/[id]/page.tsx b/src/app/(user)/user/profile/[id]/page.tsx index 4c18cca..e68edef 100644 --- a/src/app/(user)/user/profile/[id]/page.tsx +++ b/src/app/(user)/user/profile/[id]/page.tsx @@ -1,5 +1,6 @@ 'use client'; +import { useState, useEffect } from 'react'; import Image from 'next/image'; import { useParams } from 'next/navigation'; @@ -13,35 +14,12 @@ import { StatusButtons, ContactInfo, } from '@/components/profile'; +import { agentsService, AgentProfile, FieldValueResponse } from '@/services/agents.service'; +import { getProxyImageUrl } from '@/lib/imageProxy'; +import { mapFieldValuesToExperience, ExperienceData } from '@/utils/profileDataMapper'; -// Mock agent data - in production, this would come from API based on id -const getAgentData = (id: string) => ({ - id, - name: 'Brian Neeland', - isVerified: true, - title: 'Licensed Real Estate Agent', - location: 'Colorado', - memberSince: 'March 2020', - bio: 'Brian brings eight years of hands-on experience helping clients confidently buy, sell, and invest in real estate. He combines strong analytical skills with deep market knowledge to identify the right opportunities and guide clients through every step of the process. With a data-driven approach and clear communication, Brian ensures smooth transactions and informed decisions tailored to each client\'s goals.', - expertise: ['Buyers', 'Sellers', 'Divorce', 'Luxury', 'Retirement', 'Historical', 'condo', 'Rural', 'FHA', 'Conventional', 'USDA', 'Retirement'], - email: 'brian@gmail.com', - phone: '+91*******7493', - profileImage: '/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg', - 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' }, - ], - }, +// Mock data for sections not yet available from API +const mockData = { availability: { type: 'Full-time', days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], @@ -78,15 +56,129 @@ const getAgentData = (id: string) => ({ rating: 5, }, ], -}); +}; + +// Default experience data when no field values are available +const defaultExperience: ExperienceData = { + years: '-', + contracts: '-', + licensingAreas: [], + expertiseYears: [], + certifications: [], +}; export default function AgentProfileView() { const params = useParams(); const id = params.id as string; - // In production, fetch agent data based on id - const agentData = getAgentData(id); - const [firstName, lastName] = agentData.name.split(' '); + const [agentProfile, setAgentProfile] = useState(null); + const [fieldValues, setFieldValues] = useState([]); + const [experienceData, setExperienceData] = useState(defaultExperience); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [imageError, setImageError] = useState(false); + + const defaultImage = '/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg'; + + // Fetch agent profile and field values on mount + useEffect(() => { + const fetchData = async () => { + if (!id) return; + + try { + setLoading(true); + setError(null); + + // Fetch profile and field values in parallel + const [profile, fieldValuesResponse] = await Promise.all([ + agentsService.getAgentById(id), + agentsService.getFieldValuesByAgentId(id), + ]); + + setAgentProfile(profile); + setFieldValues(fieldValuesResponse.fieldValues); + + // Map field values to experience data structure + const mappedExperience = mapFieldValuesToExperience(fieldValuesResponse.fieldValues); + setExperienceData(mappedExperience); + } catch (err) { + console.error('Failed to fetch profile:', err); + setError('Failed to load profile data'); + } finally { + setLoading(false); + } + }; + + fetchData(); + }, [id]); + + const getProfileImageUrl = () => { + // If image failed to load, return default + if (imageError) { + return defaultImage; + } + + // Check for null, undefined, or empty string + if (!agentProfile?.avatar || agentProfile.avatar.trim() === '') { + return defaultImage; + } + + // S3 URLs need to go through the backend proxy + if (agentProfile.avatar.startsWith('http')) { + return getProxyImageUrl(agentProfile.avatar); + } + + // For relative paths (local assets), return as-is + return agentProfile.avatar; + }; + + // 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'; + } + }; + + if (loading) { + return ( +
+
+
+
+

Loading profile...

+
+
+
+ ); + } + + if (error || !agentProfile) { + return ( +
+
+
+
+ + + +
+

Unable to Load Profile

+

{error || 'Profile not found'}

+ +
+
+
+ ); + } return (
@@ -97,12 +189,16 @@ export default function AgentProfileView() { {/* Profile Image */}
- Profile { + const target = e.target as HTMLImageElement; + target.src = defaultImage; + setImageError(true); + }} /> {/* Gradient Overlay */}
@@ -113,27 +209,30 @@ export default function AgentProfileView() { {/* Contact Info */} - +
{/* Right Content - Profile Info + Experience + All Sections */}
{/* Profile Card - No edit button for user view */} - {/* Experience Section */} - + {/* Experience Section - Dynamic data from profile fields */} + {/* Info Cards Section */}
@@ -149,9 +248,9 @@ export default function AgentProfileView() { } content={
-

{agentData.availability.type}

+

{mockData.availability.type}

- {agentData.availability.days.map((day) => ( + {mockData.availability.days.map((day) => (

{day}

))}
@@ -168,7 +267,7 @@ export default function AgentProfileView() { height={28} /> } - content={

{agentData.preferredWorkEnvironment}

} + content={

{mockData.preferredWorkEnvironment}

} /> } - content={

“{agentData.testimonialHighlight}”

} + content={

“{mockData.testimonialHighlight}”

} />
{/* Specialization Section */} - + {/* Testimonials Section */} - +
diff --git a/src/components/profile/ExperienceSection.tsx b/src/components/profile/ExperienceSection.tsx index 6394579..cb026ea 100644 --- a/src/components/profile/ExperienceSection.tsx +++ b/src/components/profile/ExperienceSection.tsx @@ -1,5 +1,6 @@ 'use client'; +import { useState } from 'react'; import { Tag } from './Tag'; interface ExperienceData { @@ -14,7 +15,25 @@ interface ExperienceSectionProps { experience: ExperienceData; } +const INITIAL_DISPLAY_COUNT = 6; +const EXPERTISE_INITIAL_COUNT = 4; + export function ExperienceSection({ experience }: ExperienceSectionProps) { + const [showAllLicensing, setShowAllLicensing] = useState(false); + const [showAllExpertise, setShowAllExpertise] = useState(false); + + // Calculate how many more items are hidden + const licensingRemaining = experience.licensingAreas.length - INITIAL_DISPLAY_COUNT; + const expertiseRemaining = experience.expertiseYears.length - EXPERTISE_INITIAL_COUNT; + + // Get displayed items + const displayedLicensing = showAllLicensing + ? experience.licensingAreas + : experience.licensingAreas.slice(0, INITIAL_DISPLAY_COUNT); + const displayedExpertise = showAllExpertise + ? experience.expertiseYears + : experience.expertiseYears.slice(0, EXPERTISE_INITIAL_COUNT); + return (

Experience

@@ -24,26 +43,51 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {

Years in Experience

    -
  • {experience.years}
    • +
  • + {experience.years !== '-' ? experience.years : Not specified} +
{/* Horizontal divider */}
-

Number of contract closed

+

Number of contracts closed

    -
  • {experience.contracts}
    • +
  • + {experience.contracts !== '-' ? experience.contracts : Not specified} +

Licensing & Areas

- {experience.licensingAreas.map((area, idx) => ( - - {area} - - ))} - +3 More + {experience.licensingAreas.length > 0 ? ( + <> + {displayedLicensing.map((area, idx) => ( + + {area} + + ))} + {!showAllLicensing && licensingRemaining > 0 && ( + + )} + {showAllLicensing && experience.licensingAreas.length > INITIAL_DISPLAY_COUNT && ( + + )} + + ) : ( + No licensed areas added + )}
@@ -57,24 +101,51 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {

Areas in expertise & Years

- {experience.expertiseYears.slice(0, 4).map((item, idx) => ( - - {item.area} – {item.years} - - ))} - +3 More + {experience.expertiseYears.length > 0 ? ( + <> + {displayedExpertise.map((item, idx) => ( + + {item.years ? `${item.area} – ${item.years}` : item.area} + + ))} + {!showAllExpertise && expertiseRemaining > 0 && ( + + )} + {showAllExpertise && experience.expertiseYears.length > EXPERTISE_INITIAL_COUNT && ( + + )} + + ) : ( + No expertise areas added + )}

Certifications

-
    - {experience.certifications.map((cert, idx) => ( -
  • - {cert.name} -

    {cert.org}

    -
    • - ))} -
+ {experience.certifications.length > 0 ? ( +
    + {experience.certifications.map((cert, idx) => ( +
  • + {cert.name} + {cert.org && ( +

    {cert.org}

    + )} +
    • + ))} +
+ ) : ( + No certifications added + )}
diff --git a/src/components/profile/PhotoUploadModal.tsx b/src/components/profile/PhotoUploadModal.tsx index 2447ee1..071c55b 100644 --- a/src/components/profile/PhotoUploadModal.tsx +++ b/src/components/profile/PhotoUploadModal.tsx @@ -8,9 +8,10 @@ interface PhotoUploadModalProps { onClose: () => void; onUpload: (file: File) => Promise; currentPhoto?: string | null; + currentPhotoUrl?: string | null; // Presigned URL for display } -export function PhotoUploadModal({ isOpen, onClose, onUpload, currentPhoto }: PhotoUploadModalProps) { +export function PhotoUploadModal({ isOpen, onClose, onUpload, currentPhoto, currentPhotoUrl }: PhotoUploadModalProps) { const [selectedFile, setSelectedFile] = useState(null); const [previewUrl, setPreviewUrl] = useState(null); const [isDragging, setIsDragging] = useState(false); @@ -170,20 +171,14 @@ export function PhotoUploadModal({ isOpen, onClose, onUpload, currentPhoto }: Ph }`} > {/* Current Photo Preview */} - {currentPhoto && ( + {(currentPhotoUrl || currentPhoto) && (
- Current photo
diff --git a/src/lib/imageProxy.ts b/src/lib/imageProxy.ts new file mode 100644 index 0000000..3524181 --- /dev/null +++ b/src/lib/imageProxy.ts @@ -0,0 +1,22 @@ +/** + * Convert S3 URL to proxy URL through backend API + * This is needed because S3 bucket might not have public read access + */ +export function getProxyImageUrl(url: string | null | undefined): string { + if (!url) { + return '/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg'; + } + + // If it's already a local URL or data URL, return as-is + if (url.startsWith('/') || url.startsWith('data:')) { + return url; + } + + // If it's an S3/external URL, proxy through backend + if (url.startsWith('http')) { + const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001/api/v1'; + return `${apiUrl}/upload/image?url=${encodeURIComponent(url)}`; + } + + return url; +} diff --git a/src/services/agents.service.ts b/src/services/agents.service.ts index 0e4ea74..00f5ff2 100644 --- a/src/services/agents.service.ts +++ b/src/services/agents.service.ts @@ -101,6 +101,13 @@ class AgentsService { ); return response.data.data; } + + async getFieldValuesByAgentId(id: string): Promise { + const response = await api.get>( + `${this.basePath}/${id}/field-values` + ); + return response.data.data; + } } export const agentsService = new AgentsService(); diff --git a/src/services/upload.service.ts b/src/services/upload.service.ts index f91c04d..cd02af2 100644 --- a/src/services/upload.service.ts +++ b/src/services/upload.service.ts @@ -149,6 +149,7 @@ class UploadService { /** * Upload avatar image (uses agent profile ID as filename for auto-replacement) + * Returns the S3 key (not full URL) for storage in database */ async uploadAvatar( file: File, @@ -162,21 +163,32 @@ class UploadService { contentType: file.type, } ); - const { uploadUrl, publicUrl, key } = response.data.data; + const { uploadUrl, key } = response.data.data; // Step 2: Upload directly to S3 await this.uploadToS3(uploadUrl, file, onProgress); - // Step 3: Return uploaded file info + // Step 3: Return uploaded file info with KEY (not full URL) for database storage return { id: key, name: file.name, size: file.size, type: file.type, - url: publicUrl, + url: key, // Store the S3 key, not the full URL uploadedAt: new Date().toISOString(), }; } + + /** + * Get a presigned download URL for an S3 key + */ + async getPresignedDownloadUrl(key: string): Promise { + const response = await api.get<{ data: { url: string } }>( + `${this.basePath}/presigned-download-url`, + { params: { key } } + ); + return response.data.data.url; + } } export const uploadService = new UploadService(); diff --git a/src/utils/profileDataMapper.ts b/src/utils/profileDataMapper.ts new file mode 100644 index 0000000..c7df354 --- /dev/null +++ b/src/utils/profileDataMapper.ts @@ -0,0 +1,126 @@ +import { FieldValueResponse } from '@/services/agents.service'; + +// Experience data structure expected by ExperienceSection component +export interface ExperienceData { + years: string; + contracts: string; + licensingAreas: string[]; + expertiseYears: { area: string; years: string }[]; + certifications: { name: string; org: string }[]; +} + +// Certification entry from repeater field +interface CertificationEntry { + certification_name?: string; + issuing_organization?: string; + issue_date?: string; + expiration_date?: string; +} + +// Helper to get field value by slug +function getFieldValue(fieldValues: FieldValueResponse[], slug: string): unknown { + const field = fieldValues.find(f => f.fieldSlug === slug); + return field?.value; +} + +// Helper to get label from value for select/radio fields +function mapYearsValueToLabel(value: string | undefined): string { + if (!value) return '-'; + + const mapping: Record = { + '<2': 'Less than 2 years', + '2+': '2+ years', + '5+': '5+ years', + '10+': '10+ years', + }; + + return mapping[value] || value; +} + +// Helper to format contracts count +function formatContractsCount(value: unknown): string { + if (!value) return '-'; + + const num = typeof value === 'number' ? value : parseInt(String(value), 10); + if (isNaN(num)) return '-'; + + if (num >= 100) return '100+ Contracts'; + if (num >= 50) return '50+ Contracts'; + if (num >= 20) return '20+ Contracts'; + if (num >= 10) return '10+ Contracts'; + if (num >= 5) return '5+ Contracts'; + return `${num} Contract${num !== 1 ? 's' : ''}`; +} + +// Parse expertise areas with years (format: "Area Name - X yrs" or just "Area Name") +function parseExpertiseAreas(value: unknown): { area: string; years: string }[] { + if (!value || !Array.isArray(value)) return []; + + return value.map((item: string) => { + // Check if it contains a year indicator + const yearMatch = item.match(/^(.+?)\s*[-–]\s*(\d+)\s*(yrs?|years?)$/i); + if (yearMatch) { + return { area: yearMatch[1].trim(), years: `${yearMatch[2]} yrs` }; + } + // Just area name without years + return { area: item.trim(), years: '' }; + }); +} + +// Parse certification entries from repeater field +function parseCertifications(value: unknown): { name: string; org: string }[] { + if (!value) return []; + + // If it's an array of certification entries + if (Array.isArray(value)) { + return value + .filter((entry: CertificationEntry) => entry?.certification_name) + .map((entry: CertificationEntry) => ({ + name: entry.certification_name || '', + org: entry.issuing_organization || '', + })); + } + + return []; +} + +/** + * Maps field values from API response to ExperienceData structure + */ +export function mapFieldValuesToExperience(fieldValues: FieldValueResponse[]): ExperienceData { + // Get years in business (could be years_in_business from Professional or Lender experience) + const yearsInBusiness = getFieldValue(fieldValues, 'years_in_business') as string | undefined; + + // Get contracts completed + const contractsCompleted = getFieldValue(fieldValues, 'contracts_completed'); + + // Get licensing areas (could be licensed_areas from Professional or Lender) + const licensedAreas = getFieldValue(fieldValues, 'licensed_areas') as string[] | undefined; + + // Get expertise areas with years + const expertiseAreas = getFieldValue(fieldValues, 'expertise_areas') as string[] | undefined; + + // Get certification entries from repeater + const certificationEntries = getFieldValue(fieldValues, 'certification_entries'); + + return { + years: mapYearsValueToLabel(yearsInBusiness), + contracts: formatContractsCount(contractsCompleted), + licensingAreas: licensedAreas || [], + expertiseYears: parseExpertiseAreas(expertiseAreas), + certifications: parseCertifications(certificationEntries), + }; +} + +/** + * Check if experience data has any meaningful content + */ +export function hasExperienceData(experience: ExperienceData): boolean { + return ( + experience.years !== '-' || + experience.contracts !== '-' || + experience.licensingAreas.length > 0 || + experience.expertiseYears.length > 0 || + experience.certifications.length > 0 + ); +}