601 lines
22 KiB
TypeScript
601 lines
22 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useCallback, Suspense } from 'react';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { FilterModal, FilterState, clientSpecializations, loanTypes, propertyTypes, pricePoints } from '@/components/profiles/FilterModal';
|
|
import { agentsService, AgentType, PublicAgentProfile, SearchAgentsParams } from '@/services/agents.service';
|
|
import { uploadService } from '@/services/upload.service';
|
|
|
|
interface FilterSectionProps {
|
|
title: string;
|
|
options: string[];
|
|
selectedOptions: string[];
|
|
onToggle: (option: string) => void;
|
|
showMore?: boolean;
|
|
}
|
|
|
|
function FilterSection({ title, options, selectedOptions, onToggle, showMore }: FilterSectionProps) {
|
|
const [expanded, setExpanded] = useState(false);
|
|
const displayOptions = expanded ? options : options.slice(0, 6);
|
|
|
|
return (
|
|
<div className="pb-4 mb-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="font-fractul font-semibold text-[14px] text-[#00293d]">{title}</h3>
|
|
<button className="text-[#00293d]">
|
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
|
<path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{displayOptions.map((option) => (
|
|
<label key={option} className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedOptions.includes(option)}
|
|
onChange={() => onToggle(option)}
|
|
className="w-4 h-4 rounded border-[#00293d]/30 text-[#e58625] focus:ring-[#e58625]"
|
|
/>
|
|
<span className="font-serif text-[13px] text-[#00293d]">{option}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
{showMore && options.length > 6 && (
|
|
<button
|
|
onClick={() => setExpanded(!expanded)}
|
|
className="mt-2 font-serif text-[13px] text-[#e58625] hover:underline"
|
|
>
|
|
{expanded ? 'Show Less' : 'Show More'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface ProfileCardProps {
|
|
profile: PublicAgentProfile;
|
|
}
|
|
|
|
function ProfileCard({ profile }: ProfileCardProps) {
|
|
const [showFullBio, setShowFullBio] = useState(false);
|
|
const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
|
|
const defaultImage = '/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg';
|
|
|
|
const truncatedBio = profile.bio && profile.bio.length > 150
|
|
? profile.bio.slice(0, 150) + '...'
|
|
: profile.bio || '';
|
|
|
|
// Fetch presigned URL for avatar if it's an S3 key
|
|
useEffect(() => {
|
|
const fetchAvatarUrl = async () => {
|
|
if (profile.avatar && !profile.avatar.startsWith('http') && !profile.avatar.startsWith('/')) {
|
|
try {
|
|
const presignedUrl = await uploadService.getPresignedDownloadUrl(profile.avatar);
|
|
setAvatarUrl(presignedUrl);
|
|
} catch (error) {
|
|
console.error('Failed to get avatar URL:', error);
|
|
}
|
|
} else if (profile.avatar) {
|
|
setAvatarUrl(profile.avatar);
|
|
}
|
|
};
|
|
fetchAvatarUrl();
|
|
}, [profile.avatar]);
|
|
|
|
const getProfileImageUrl = () => {
|
|
if (avatarUrl) return avatarUrl;
|
|
if (profile.avatar?.startsWith('/')) return profile.avatar;
|
|
return defaultImage;
|
|
};
|
|
|
|
// 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="bg-white rounded-[15px] p-4 flex gap-4 shadow-[0px_4px_20px_rgba(0,0,0,0.08)]">
|
|
{/* Profile Image */}
|
|
<div className="flex-shrink-0">
|
|
<div className="relative w-[120px] h-[140px] rounded-[10px] overflow-hidden">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={getProfileImageUrl()}
|
|
alt={`${profile.firstName} ${profile.lastName}`}
|
|
className="w-full h-full object-cover"
|
|
onError={(e) => {
|
|
const target = e.target as HTMLImageElement;
|
|
target.src = defaultImage;
|
|
}}
|
|
/>
|
|
</div>
|
|
<Link href={`/user/profile/${profile.id}`}>
|
|
<button className="w-full mt-3 px-6 py-2.5 bg-[#e58625] hover:bg-[#d47720] text-[#00293d] font-fractul font-bold text-[14px] rounded-[15px] transition-colors">
|
|
View Profile
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Profile Info */}
|
|
<div className="flex-1 min-w-0">
|
|
{/* Header */}
|
|
<div className="flex items-start justify-between mb-1">
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="font-fractul font-bold text-[16px] text-[#00293d]">
|
|
{profile.firstName} {profile.lastName}
|
|
</h3>
|
|
{profile.isVerified && (
|
|
<span className="flex items-center gap-1 text-[#e58625] font-serif text-[12px]">
|
|
<Image
|
|
src="/assets/icons/verified-badge-blue.svg"
|
|
alt="Verified"
|
|
width={14}
|
|
height={14}
|
|
/>
|
|
(Verified Expert)
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="font-serif text-[13px] text-[#00293d] mt-0.5">
|
|
{profile.agentType?.name || 'Real Estate Professional'}
|
|
</p>
|
|
</div>
|
|
{profile.rating && (
|
|
<div className="bg-[#e58625] text-white px-3 py-1 rounded-full font-fractul font-bold text-[12px]">
|
|
{profile.rating.toFixed(1)} Rating
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Location & Member Since */}
|
|
<div className="flex items-center gap-4 mt-2">
|
|
{profile.serviceAreas && profile.serviceAreas.length > 0 && (
|
|
<div className="flex items-center gap-1.5">
|
|
<Image
|
|
src="/assets/icons/location-pin-orange.svg"
|
|
alt="Location"
|
|
width={12}
|
|
height={15}
|
|
/>
|
|
<span className="font-serif text-[12px] text-[#00293d]">{profile.serviceAreas[0]}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-1.5">
|
|
<Image
|
|
src="/assets/icons/calendar-icon.svg"
|
|
alt="Member Since"
|
|
width={14}
|
|
height={14}
|
|
/>
|
|
<span className="font-serif text-[12px] text-[#00293d]">
|
|
Member Since {formatMemberSince(profile.createdAt)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bio */}
|
|
{profile.bio && (
|
|
<p className="font-serif text-[13px] text-[#00293d] mt-3 leading-relaxed">
|
|
{showFullBio ? profile.bio : truncatedBio}
|
|
{profile.bio.length > 150 && (
|
|
<button
|
|
onClick={() => setShowFullBio(!showFullBio)}
|
|
className="text-[#e58625] ml-1 hover:underline font-medium"
|
|
>
|
|
{showFullBio ? 'Show Less' : 'Show More.'}
|
|
</button>
|
|
)}
|
|
</p>
|
|
)}
|
|
|
|
{/* Specializations */}
|
|
{profile.specializations && profile.specializations.length > 0 && (
|
|
<div className="mt-3">
|
|
<p className="font-fractul font-semibold text-[12px] text-[#00293d] mb-2">Expertise:</p>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{profile.specializations.map((tag, index) => (
|
|
<span
|
|
key={index}
|
|
className="border border-[#00293d]/30 rounded-full px-3 py-1 font-serif text-[11px] text-[#00293d]"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Languages */}
|
|
{profile.languages && profile.languages.length > 0 && (
|
|
<div className="flex flex-wrap gap-1.5 mt-2">
|
|
{profile.languages.map((lang, index) => (
|
|
<span
|
|
key={index}
|
|
className="border border-[#00293d]/30 rounded-full px-3 py-1 font-serif text-[11px] text-[#00293d]"
|
|
>
|
|
{lang}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ProfilesPageContent() {
|
|
const searchParams = useSearchParams();
|
|
|
|
// State for API data
|
|
const [agents, setAgents] = useState<PublicAgentProfile[]>([]);
|
|
const [agentTypes, setAgentTypes] = useState<AgentType[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [totalPages, setTotalPages] = useState(1);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [totalResults, setTotalResults] = useState(0);
|
|
|
|
// State for search and filters
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [activeTypeId, setActiveTypeId] = useState<string | null>(null);
|
|
const [listingType, setListingType] = useState<'agents' | 'lenders'>('agents');
|
|
const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
|
|
const [filters, setFilters] = useState<FilterState>({
|
|
clientSpecialization: [],
|
|
loanType: [],
|
|
propertyType: [],
|
|
pricePoint: [],
|
|
specialInterests: [],
|
|
popularFilters: [],
|
|
});
|
|
|
|
// Initialize from URL params
|
|
useEffect(() => {
|
|
const type = searchParams.get('type');
|
|
const name = searchParams.get('name');
|
|
const location = searchParams.get('location');
|
|
|
|
if (type) setActiveTypeId(type);
|
|
if (name) setSearchQuery(name);
|
|
// Location is handled separately in search params
|
|
}, [searchParams]);
|
|
|
|
// Fetch agent types on mount
|
|
useEffect(() => {
|
|
const fetchAgentTypes = async () => {
|
|
try {
|
|
const types = await agentsService.getAgentTypes();
|
|
setAgentTypes(types);
|
|
} catch (error) {
|
|
console.error('Failed to fetch agent types:', error);
|
|
}
|
|
};
|
|
fetchAgentTypes();
|
|
}, []);
|
|
|
|
// Fetch agents based on filters
|
|
const fetchAgents = useCallback(async () => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
const params: SearchAgentsParams = {
|
|
page: currentPage,
|
|
limit: 10,
|
|
sortBy: 'createdAt',
|
|
sortOrder: 'desc',
|
|
};
|
|
|
|
// Add search query
|
|
if (searchQuery) {
|
|
params.search = searchQuery;
|
|
}
|
|
|
|
// Add agent type filter
|
|
if (activeTypeId) {
|
|
params.agentTypeId = activeTypeId;
|
|
}
|
|
|
|
// Add location from URL params
|
|
const location = searchParams.get('location');
|
|
if (location) {
|
|
// Try to set as city first
|
|
params.city = location;
|
|
}
|
|
|
|
const response = await agentsService.searchAgents(params);
|
|
setAgents(response.data);
|
|
setTotalPages(response.totalPages);
|
|
setTotalResults(response.total);
|
|
} catch (err) {
|
|
console.error('Failed to fetch agents:', err);
|
|
setError('Failed to load agents. Please try again.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [currentPage, searchQuery, activeTypeId, searchParams]);
|
|
|
|
// Fetch agents when filters change
|
|
useEffect(() => {
|
|
fetchAgents();
|
|
}, [fetchAgents]);
|
|
|
|
const toggleFilter = (category: string, option: string) => {
|
|
setFilters(prev => ({
|
|
...prev,
|
|
[category]: (prev[category as keyof FilterState] || []).includes(option)
|
|
? (prev[category as keyof FilterState] || []).filter((o: string) => o !== option)
|
|
: [...(prev[category as keyof FilterState] || []), option]
|
|
}));
|
|
};
|
|
|
|
const clearAllFilters = () => {
|
|
setFilters({
|
|
clientSpecialization: [],
|
|
loanType: [],
|
|
propertyType: [],
|
|
pricePoint: [],
|
|
specialInterests: [],
|
|
popularFilters: [],
|
|
});
|
|
};
|
|
|
|
const applyFilters = () => {
|
|
setIsFilterModalOpen(false);
|
|
setCurrentPage(1); // Reset to first page when applying filters
|
|
// Filters are applied via the fetchAgents effect
|
|
};
|
|
|
|
const handleSearch = () => {
|
|
setCurrentPage(1);
|
|
fetchAgents();
|
|
};
|
|
|
|
const handleTypeChange = (typeId: string | null) => {
|
|
setActiveTypeId(typeId);
|
|
setCurrentPage(1);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<div className="flex gap-6">
|
|
{/* Left Sidebar */}
|
|
<div className="w-[220px] flex-shrink-0">
|
|
{/* Listing Type */}
|
|
<div className="mb-6">
|
|
<h2 className="font-fractul font-bold text-[14px] text-[#00293d] mb-3">Listing Type</h2>
|
|
<div className="space-y-2">
|
|
<button
|
|
onClick={() => setListingType('agents')}
|
|
className={`block font-serif text-[14px] ${
|
|
listingType === 'agents' ? 'text-[#00293d] font-medium' : 'text-[#00293d]/70'
|
|
}`}
|
|
>
|
|
Agents
|
|
</button>
|
|
<button
|
|
onClick={() => setListingType('lenders')}
|
|
className={`block font-serif text-[14px] ${
|
|
listingType === 'lenders' ? 'text-[#00293d] font-medium' : 'text-[#00293d]/70'
|
|
}`}
|
|
>
|
|
Lenders
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="font-fractul font-bold text-[14px] text-[#00293d]">Filters</h2>
|
|
<button
|
|
onClick={() => setIsFilterModalOpen(true)}
|
|
className="text-[#00293d] hover:opacity-70"
|
|
>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
|
|
<path d="M3 6H21M7 12H17M11 18H13" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<FilterSection
|
|
title="Client Specialization"
|
|
options={clientSpecializations}
|
|
selectedOptions={filters.clientSpecialization}
|
|
onToggle={(option) => toggleFilter('clientSpecialization', option)}
|
|
/>
|
|
|
|
<FilterSection
|
|
title="Loan Type"
|
|
options={loanTypes}
|
|
selectedOptions={filters.loanType}
|
|
onToggle={(option) => toggleFilter('loanType', option)}
|
|
/>
|
|
|
|
<FilterSection
|
|
title="Property Type"
|
|
options={propertyTypes}
|
|
selectedOptions={filters.propertyType}
|
|
onToggle={(option) => toggleFilter('propertyType', option)}
|
|
showMore
|
|
/>
|
|
|
|
<FilterSection
|
|
title="Price Point"
|
|
options={pricePoints}
|
|
selectedOptions={filters.pricePoint}
|
|
onToggle={(option) => toggleFilter('pricePoint', option)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-1">
|
|
{/* Search Bar */}
|
|
<div className="mb-4">
|
|
<div className="relative">
|
|
<input
|
|
type="text"
|
|
placeholder="Search Agents"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
|
className="w-full h-[44px] px-4 pr-12 rounded-[10px] border border-[#00293d]/20 bg-white font-serif text-[14px] text-[#00293d] placeholder:text-[#00293d]/50 focus:outline-none focus:border-[#e58625]"
|
|
/>
|
|
<button
|
|
onClick={handleSearch}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 w-[36px] h-[36px] bg-[#e58625] rounded-[8px] flex items-center justify-center"
|
|
>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
|
|
<path d="M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Agent Type Tabs */}
|
|
<div className="flex flex-wrap gap-2 mb-6">
|
|
<button
|
|
onClick={() => handleTypeChange(null)}
|
|
className={`px-4 py-2 rounded-full font-serif text-[13px] border transition-colors ${
|
|
activeTypeId === null
|
|
? 'bg-[#00293d] text-white border-[#00293d]'
|
|
: 'bg-white text-[#00293d] border-[#00293d]/20 hover:border-[#00293d]/40'
|
|
}`}
|
|
>
|
|
All Types
|
|
</button>
|
|
{agentTypes.map((type) => (
|
|
<button
|
|
key={type.id}
|
|
onClick={() => handleTypeChange(type.id)}
|
|
className={`px-4 py-2 rounded-full font-serif text-[13px] border transition-colors ${
|
|
activeTypeId === type.id
|
|
? 'bg-[#00293d] text-white border-[#00293d]'
|
|
: 'bg-white text-[#00293d] border-[#00293d]/20 hover:border-[#00293d]/40'
|
|
}`}
|
|
>
|
|
{type.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Results Count */}
|
|
{!loading && (
|
|
<p className="font-serif text-[13px] text-[#00293d]/70 mb-4">
|
|
{totalResults} {totalResults === 1 ? 'agent' : 'agents'} found
|
|
</p>
|
|
)}
|
|
|
|
{/* Loading State */}
|
|
{loading && (
|
|
<div className="flex items-center justify-center py-12">
|
|
<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 agents...</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Error State */}
|
|
{error && !loading && (
|
|
<div className="bg-red-50 border border-red-200 rounded-[15px] p-6 text-center">
|
|
<p className="text-red-600 font-serif text-[14px]">{error}</p>
|
|
<button
|
|
onClick={fetchAgents}
|
|
className="mt-4 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>
|
|
)}
|
|
|
|
{/* Empty State */}
|
|
{!loading && !error && agents.length === 0 && (
|
|
<div className="bg-gray-50 rounded-[15px] p-12 text-center">
|
|
<div className="w-16 h-16 bg-[#E58625]/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<svg className="w-8 h-8 text-[#E58625]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="font-fractul font-bold text-[18px] text-[#00293d] mb-2">No agents found</h3>
|
|
<p className="font-serif text-[14px] text-[#00293d]/70">
|
|
Try adjusting your search criteria or filters
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Profile Cards */}
|
|
{!loading && !error && agents.length > 0 && (
|
|
<div className="space-y-4">
|
|
{agents.map((profile) => (
|
|
<ProfileCard key={profile.id} profile={profile} />
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Pagination */}
|
|
{!loading && !error && totalPages > 1 && (
|
|
<div className="flex justify-center gap-2 mt-8">
|
|
<button
|
|
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
|
|
disabled={currentPage === 1}
|
|
className="px-4 py-2 rounded-[10px] border border-[#00293d]/20 font-serif text-[13px] text-[#00293d] disabled:opacity-50 disabled:cursor-not-allowed hover:border-[#00293d]/40 transition-colors"
|
|
>
|
|
Previous
|
|
</button>
|
|
<span className="px-4 py-2 font-serif text-[13px] text-[#00293d]">
|
|
Page {currentPage} of {totalPages}
|
|
</span>
|
|
<button
|
|
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
|
|
disabled={currentPage === totalPages}
|
|
className="px-4 py-2 rounded-[10px] border border-[#00293d]/20 font-serif text-[13px] text-[#00293d] disabled:opacity-50 disabled:cursor-not-allowed hover:border-[#00293d]/40 transition-colors"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filter Modal */}
|
|
<FilterModal
|
|
isOpen={isFilterModalOpen}
|
|
onClose={() => setIsFilterModalOpen(false)}
|
|
filters={filters}
|
|
onToggleFilter={toggleFilter}
|
|
onClearAll={clearAllFilters}
|
|
onApply={applyFilters}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function ProfilesPage() {
|
|
return (
|
|
<Suspense fallback={
|
|
<div className="min-h-screen bg-white flex items-center justify-center">
|
|
<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...</p>
|
|
</div>
|
|
</div>
|
|
}>
|
|
<ProfilesPageContent />
|
|
</Suspense>
|
|
);
|
|
}
|