Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a13dcbf96d89fb4dbbac0a9bd20f6f3d57bc4280
frontend/src/app/(agent)/agent/dashboard/page.tsx

619 lines
25 KiB
TypeScript
Raw Normal View History

default layuout
2026-01-11 21:30:57 +05:30
'use client';
import { useSession } from 'next-auth/react';
main layout
2026-01-11 22:09:41 +05:30
import Image from 'next/image';
split componeent
2026-01-12 12:34:58 +05:30
// Import components from component folder
import {
Tag,
InfoCard,
SpecializationCard,
TestimonialCard,
} from './component';
main layout
2026-01-11 22:09:41 +05:30
// Mock agent data - in production, this would come from API
const agentData = {
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',
split componeent
2026-01-12 12:34:58 +05:30
profileImage: '/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg',
main layout
2026-01-11 22:09:41 +05:30
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,
mobiel view
2026-01-12 14:13:37 +05:30
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: 'Conor Kenney',
main layout
2026-01-11 22:09:41 +05:30
role: 'Chief Operations Officer',
rating: 5,
},
{
id: 2,
mobiel view
2026-01-12 14:13:37 +05:30
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: 'Conor Kenney',
main layout
2026-01-11 22:09:41 +05:30
role: 'Chief Operations Officer',
rating: 5,
},
],
};
default layuout
2026-01-11 21:30:57 +05:30
export default function AgentDashboard() {
const { data: session } = useSession();
mobiel view
2026-01-12 14:13:37 +05:30
const [firstName, lastName] = agentData.name.split(' ');
default layuout
2026-01-11 21:30:57 +05:30
return (
<div className="space-y-6">
mobiel view
2026-01-12 14:13:37 +05:30
{/* Mobile: Profile Image at Top */}
<div className="lg:hidden flex flex-col items-center">
{/* Profile Image */}
<div className="relative w-[200px] mb-4">
<div className="w-[200px] h-[200px] rounded-[15px] overflow-hidden">
<Image
src={agentData.profileImage}
alt="Profile"
width={200}
height={200}
className="w-full h-full object-cover"
/>
</div>
<button 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"
width={20}
height={20}
/>
</button>
</div>
{/* Available/Unavailable Buttons */}
<div className="w-full max-w-[354px] space-y-2 mb-4">
<div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[55px] px-4">
<div className="flex items-center gap-2 flex-1">
<span className="w-3 h-3 bg-green-500 rounded-full" />
<span className="text-sm font-bold text-[#00293d]">Available.</span>
</div>
<button className="px-6 py-2 bg-[#e58625] text-white text-sm rounded-[15px]">
Connect
</button>
</div>
<div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[55px] px-4">
<div className="flex items-center gap-2 flex-1">
<span className="w-3 h-3 bg-white border border-gray-400 rounded-full" />
<span className="text-sm font-bold text-[#00293d]">Unavailable.</span>
</div>
<button className="px-6 py-2 bg-[#00293d] text-white text-sm rounded-[15px]">
Connect
</button>
</div>
</div>
{/* Contact Info Card */}
<div className="w-full max-w-[354px] border border-[#00293d]/10 rounded-[15px] p-4 mb-6">
<div className="flex items-center gap-2 mb-2">
<span className="font-bold text-[#00293d] text-sm">Email:</span>
<span className="text-[#00293d] text-sm font-serif">********brian@gmail.com</span>
</div>
<div className="flex items-center gap-2">
<span className="font-bold text-[#00293d] text-sm">Ph.No:</span>
<span className="text-[#00293d] text-sm font-serif">{agentData.phone}</span>
<button className="p-1 hover:bg-gray-100 rounded ml-auto">
<Image
src="/assets/icons/edit-pencil-icon.svg"
alt="Edit phone"
width={16}
height={16}
/>
</button>
</div>
</div>
{/* Name and Info - Centered for Mobile */}
<div className="text-center mb-4">
<div className="flex items-center justify-center gap-2 mb-1">
<h1 className="text-[18px] text-[#00293d] font-[family-name:var(--font-fractul)]">
<span className="font-bold">{firstName}</span>{' '}
<span className="font-normal">{lastName}</span>
</h1>
{agentData.isVerified && (
<>
<Image
src="/assets/icons/verified-icon.svg"
alt="Verified"
width={15}
height={14}
/>
<span className="text-[14px] text-[#638559] font-medium font-serif">
(Verified Expert)
</span>
</>
)}
<button className="p-1 hover:bg-gray-100 rounded transition-colors">
<Image
src="/assets/icons/edit-pencil-icon.svg"
alt="Edit name"
width={16}
height={16}
/>
</button>
</div>
<p className="text-[#00293d] text-sm mb-2">{agentData.title}</p>
<div className="flex items-center justify-center gap-4 text-sm text-[#00293d]">
<span className="flex items-center gap-1 text-[#e58625] font-medium">
<Image
src="/assets/icons/location-icon.svg"
alt="Location"
width={16}
height={16}
/>
{agentData.location}
</span>
<span className="flex items-center gap-1">
<Image
src="/assets/icons/calendar-icon.svg"
alt="Calendar"
width={16}
height={16}
/>
Member Since {agentData.memberSince}
</span>
</div>
</div>
{/* Bio - Centered for Mobile */}
<p className="text-[#00293d] text-sm leading-relaxed text-center max-w-[338px] mb-4 font-serif">
{agentData.bio}
</p>
</div>
{/* Desktop: Original Layout */}
<div className="hidden lg:flex flex-row gap-6 items-start">
main layout
2026-01-11 22:09:41 +05:30
{/* Left Sidebar - Status & Contact */}
mobiel view
2026-01-12 14:13:37 +05:30
<div className="w-[220px] flex-shrink-0 space-y-4">
{/* Profile Image */}
<div className="relative w-[200px]">
<div className="w-[200px] h-[200px] rounded-[15px] overflow-hidden">
<Image
src={agentData.profileImage}
alt="Profile"
width={200}
height={200}
className="w-full h-full object-cover"
/>
</div>
<button 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"
width={20}
height={20}
/>
</button>
</div>
{/* Status Buttons */}
<div className="space-y-2">
<div className="flex items-center gap-2">
<div className="flex items-center gap-1.5">
<span className="w-2 h-2 bg-green-500 rounded-full" />
<span className="text-sm text-[#00293d]">Available.</span>
</div>
<button className="px-4 py-1.5 bg-[#5ba4a4] text-white text-sm rounded-full hover:bg-[#4a9393] transition-colors">
Connect
</button>
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1.5">
<span className="w-2 h-2 bg-white border border-gray-400 rounded-full" />
<span className="text-sm text-[#00293d]">Unavailable.</span>
</div>
<button className="px-4 py-1.5 bg-[#5ba4a4] text-white text-sm rounded-full hover:bg-[#4a9393] transition-colors">
Connect
</button>
</div>
</div>
{/* Contact Info */}
<div className="space-y-2 pt-2">
<div className="flex items-center gap-2 text-sm">
<span className="font-bold text-[#00293d]">Email:</span>
<span className="text-[#00293d]">*****brian@gmail.com</span>
</div>
<div className="flex items-center gap-2 text-sm">
<span className="font-bold text-[#00293d]">Ph.No:</span>
<span className="text-[#00293d]">{agentData.phone}</span>
<button className="p-1 hover:bg-gray-100 rounded">
<Image
src="/assets/icons/edit-pencil-icon.svg"
alt="Edit phone"
width={16}
height={16}
/>
</button>
</div>
</div>
</div>
default layuout
2026-01-11 21:30:57 +05:30
main layout
2026-01-11 22:09:41 +05:30
{/* Right Content - Profile Info */}
<div className="flex-1">
mobiel view
2026-01-12 14:13:37 +05:30
<div className="bg-white rounded-[20px] border border-gray-200 p-6">
{/* Name and Actions Row */}
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-4">
<div>
<div className="flex items-center gap-2 mb-1">
<h1 className="text-[18px] text-[#00293d] font-[family-name:var(--font-fractul)]">
<span className="font-bold">{firstName}</span>{' '}
<span className="font-normal">{lastName}</span>
</h1>
{agentData.isVerified && (
<>
<Image
src="/assets/icons/verified-icon.svg"
alt="Verified"
width={15}
height={14}
/>
<span className="text-[14px] text-[#638559] font-medium font-serif">
(Verified Expert)
</span>
</>
)}
<button className="p-1 hover:bg-gray-100 rounded transition-colors">
<Image
src="/assets/icons/edit-pencil-icon.svg"
alt="Edit name"
width={16}
height={16}
/>
</button>
</div>
<p className="text-[#00293d] text-sm mb-2">{agentData.title}</p>
<div className="flex items-center gap-4 text-sm text-[#00293d]">
<span className="flex items-center gap-1 text-[#e58625] font-medium">
<Image
src="/assets/icons/location-icon.svg"
alt="Location"
width={16}
height={16}
/>
{agentData.location}
</span>
<span className="flex items-center gap-1">
<Image
src="/assets/icons/calendar-icon.svg"
alt="Calendar"
width={16}
height={16}
/>
Member Since {agentData.memberSince}
</span>
</div>
</div>
{/* Action Buttons */}
<div className="flex items-center gap-3">
<button className="flex items-center gap-2 px-4 py-2 bg-[#5ba4a4] text-white text-sm rounded-[15px] hover:bg-[#4a9393] transition-colors">
<Image
src="/assets/icons/message-icon.svg"
alt="Message"
width={16}
height={16}
/>
Message
</button>
<button className="flex items-center gap-2 px-4 py-2 bg-[#5ba4a4] text-white text-sm rounded-[15px] hover:bg-[#4a9393] transition-colors">
<Image
src="/assets/icons/clipboard-icon.svg"
alt="Requests"
width={16}
height={16}
/>
Requests
</button>
</div>
</div>
{/* Bio */}
<p className="text-[#00293d] text-sm leading-relaxed mb-4">{agentData.bio}</p>
{/* Expertise Tags */}
<div>
<p className="font-bold text-[#00293d] text-sm mb-2">Expertise:</p>
<div className="flex flex-wrap gap-2">
{agentData.expertise.map((tag, idx) => (
<Tag key={idx}>{tag}</Tag>
))}
</div>
</div>
</div>
default layuout
2026-01-11 21:30:57 +05:30
</div>
</div>
main layout
2026-01-11 22:09:41 +05:30
{/* Experience Section */}
mobiel view
2026-01-12 14:13:37 +05:30
<div className="lg:hidden">
<h2 className="text-xl font-bold text-[#00293d] text-center mb-6">Experience</h2>
<div className="space-y-4 px-4">
<div className="border-b border-gray-200 pb-4">
<p className="font-bold text-[#00293d] text-sm mb-2">Years in Experience</p>
<ul className="list-disc list-inside text-[#00293d] text-sm font-serif">
<li>{agentData.experience.years}</li>
</ul>
</div>
<div className="border-b border-gray-200 pb-4">
<p className="font-bold text-[#00293d] text-sm mb-2">Number of contract closed</p>
<ul className="list-disc list-inside text-[#00293d] text-sm font-serif">
<li>{agentData.experience.contracts}</li>
</ul>
</div>
<div className="pb-4">
<p className="font-bold text-[#00293d] text-sm mb-3">Licensing &amp; Areas</p>
<div className="flex flex-wrap gap-2">
{agentData.experience.licensingAreas.map((area, idx) => (
<Tag key={idx} variant="light">{area}</Tag>
))}
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm border border-[#00293d]/10 text-[#00293d]">
+3 More
</span>
</div>
</div>
<div className="pb-4">
<p className="font-bold text-[#00293d] text-sm mb-3">Areas in expertise &amp; Years</p>
<div className="flex flex-wrap gap-2">
{agentData.experience.expertiseYears.map((item, idx) => (
<Tag key={idx} variant="light">
{item.area} – {item.years}
</Tag>
))}
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm border border-[#00293d]/10 text-[#00293d]">
+3More
</span>
</div>
</div>
<div>
<p className="font-bold text-[#00293d] text-sm mb-3">Certifications</p>
<ul className="space-y-3">
{agentData.experience.certifications.map((cert, idx) => (
<li key={idx} className="text-[#00293d] text-sm">
<span className="font-serif">• {cert.name}</span>
<p className="text-[#00293d]/50 text-sm ml-3 font-serif">{cert.org}</p>
</li>
))}
</ul>
</div>
</div>
</div>
{/* Desktop Experience Section */}
<div className="hidden lg:block bg-white rounded-[20px] border border-gray-200 p-6">
<h2 className="text-xl font-bold text-[#00293d] mb-6">Experience</h2>
<div className="flex flex-col lg:flex-row gap-8">
<div className="flex-1 space-y-6">
<div>
<p className="font-bold text-[#00293d] text-sm mb-2">Years in Experience</p>
<ul className="list-disc list-inside text-[#00293d] text-sm">
<li>{agentData.experience.years}</li>
</ul>
</div>
<div>
<p className="font-bold text-[#00293d] text-sm mb-2">Number of contract closed</p>
<ul className="list-disc list-inside text-[#00293d] text-sm">
<li>{agentData.experience.contracts}</li>
</ul>
</div>
<div>
<p className="font-bold text-[#00293d] text-sm mb-3">Licensing &amp; Areas</p>
<div className="flex flex-wrap gap-2">
{agentData.experience.licensingAreas.slice(0, 5).map((area, idx) => (
<Tag key={idx} variant="light">{area}</Tag>
))}
{agentData.experience.licensingAreas.length > 5 && (
<span className="text-[#e58625] text-sm cursor-pointer">+{agentData.experience.licensingAreas.length - 5} More</span>
)}
</div>
</div>
</div>
<div className="hidden lg:block w-px bg-gray-200" />
<div className="flex-1 space-y-6">
<div>
<p className="font-bold text-[#00293d] text-sm mb-3">Areas in expertise &amp; Years</p>
<div className="flex flex-wrap gap-2">
{agentData.experience.expertiseYears.slice(0, 3).map((item, idx) => (
<Tag key={idx} variant="orange">
{item.area} – {item.years}
</Tag>
))}
{agentData.experience.expertiseYears.length > 3 && (
<span className="text-[#e58625] text-sm cursor-pointer">+{agentData.experience.expertiseYears.length - 3}More</span>
)}
</div>
</div>
<div>
<p className="font-bold text-[#00293d] text-sm mb-3">Certifications</p>
<ul className="space-y-3">
{agentData.experience.certifications.map((cert, idx) => (
<li key={idx} className="text-[#00293d] text-sm">
<span>• {cert.name}</span>
<p className="text-[#5ba4a4] text-xs ml-3">{cert.org}</p>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
default layuout
2026-01-11 21:30:57 +05:30
mobiel view
2026-01-12 14:13:37 +05:30
{/* Info Cards Section - Stack on Mobile */}
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6">
main layout
2026-01-11 22:09:41 +05:30
<InfoCard
title="Availability"
icon={
update svg
2026-01-12 12:17:16 +05:30
<Image
src="/assets/icons/clock-icon.svg"
alt="Availability"
width={32}
height={32}
/>
main layout
2026-01-11 22:09:41 +05:30
}
content={
<div>
<p className="font-semibold mb-2">{agentData.availability.type}</p>
<div className="space-y-1">
{agentData.availability.days.map((day) => (
<p key={day}>{day}</p>
))}
</div>
default layuout
2026-01-11 21:30:57 +05:30
</div>
main layout
2026-01-11 22:09:41 +05:30
}
/>
<InfoCard
title="Preferred work environment"
icon={
update svg
2026-01-12 12:17:16 +05:30
<Image
src="/assets/icons/location-large-icon.svg"
alt="Work environment"
width={32}
height={32}
/>
main layout
2026-01-11 22:09:41 +05:30
}
content={<p className="text-sm leading-relaxed">{agentData.preferredWorkEnvironment}</p>}
/>
<InfoCard
title=""
icon={
update svg
2026-01-12 12:17:16 +05:30
<Image
src="/assets/icons/star-icon.svg"
alt="Testimonial"
width={32}
height={32}
/>
main layout
2026-01-11 22:09:41 +05:30
}
content={<p className="text-sm leading-relaxed italic">&ldquo;{agentData.testimonialHighlight}&rdquo;</p>}
/>
</div>
mobiel view
2026-01-12 14:13:37 +05:30
{/* Specialization Section - Single Column on Mobile */}
main layout
2026-01-11 22:09:41 +05:30
<div className="bg-[#e8e8e8] rounded-[20px] p-8">
<div className="text-center mb-8">
<h2 className="text-xl font-bold text-[#00293d]">Specialization</h2>
<p className="text-[#00293d]/70 text-sm">Area Of Expertise and Focus</p>
</div>
mobiel view
2026-01-12 14:13:37 +05:30
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6 mb-6">
main layout
2026-01-11 22:09:41 +05:30
<SpecializationCard
title="Specialization"
items={agentData.specialization.types}
icon={
update svg
2026-01-12 12:17:16 +05:30
<Image
src="/assets/icons/home-icon.svg"
alt="Specialization"
width={24}
height={24}
/>
main layout
2026-01-11 22:09:41 +05:30
}
/>
<SpecializationCard
title="Loan Type"
items={agentData.specialization.loanTypes}
icon={
update svg
2026-01-12 12:17:16 +05:30
<Image
src="/assets/icons/wallet-icon.svg"
alt="Loan Type"
width={24}
height={24}
/>
main layout
2026-01-11 22:09:41 +05:30
}
/>
<SpecializationCard
title="Property Type"
items={agentData.specialization.propertyTypes}
icon={
update svg
2026-01-12 12:17:16 +05:30
<Image
src="/assets/icons/chart-icon.svg"
alt="Property Type"
width={24}
height={24}
/>
main layout
2026-01-11 22:09:41 +05:30
}
/>
</div>
mobiel view
2026-01-12 14:13:37 +05:30
<div className="flex flex-col lg:grid lg:grid-cols-2 gap-6 lg:max-w-2xl lg:mx-auto">
main layout
2026-01-11 22:09:41 +05:30
<SpecializationCard
title="Hobbies & Interests"
items={agentData.specialization.hobbies}
icon={
update svg
2026-01-12 12:17:16 +05:30
<Image
src="/assets/icons/heart-icon.svg"
alt="Hobbies"
width={24}
height={24}
/>
main layout
2026-01-11 22:09:41 +05:30
}
/>
<SpecializationCard
title="Price Point"
items={agentData.specialization.pricePoints}
icon={
update svg
2026-01-12 12:17:16 +05:30
<Image
src="/assets/icons/dollar-icon.svg"
alt="Price Point"
width={24}
height={24}
/>
main layout
2026-01-11 22:09:41 +05:30
}
/>
</div>
</div>
mobiel view
2026-01-12 14:13:37 +05:30
{/* Testimonials Section - Single Column on Mobile */}
main layout
2026-01-11 22:09:41 +05:30
<div className="bg-white rounded-[20px] border border-gray-200 p-8">
<h2 className="text-xl font-bold text-[#00293d] text-center mb-2">Testimonials</h2>
<p className="text-[#00293d]/70 text-sm text-center mb-8">
Clients rate our real estate services 4.9 out of 5 on average, based on recent client reviews.
</p>
mobiel view
2026-01-12 14:13:37 +05:30
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6">
main layout
2026-01-11 22:09:41 +05:30
{agentData.testimonials.map((testimonial) => (
split componeent
2026-01-12 12:34:58 +05:30
<TestimonialCard
key={testimonial.id}
text={testimonial.text}
author={testimonial.author}
role={testimonial.role}
rating={testimonial.rating}
/>
main layout
2026-01-11 22:09:41 +05:30
))}
default layuout
2026-01-11 21:30:57 +05:30
</div>
</div>
</div>
);
}
Reference in New Issue Copy Permalink