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

570 lines
21 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';
import { useState } from 'react';
update svg
2026-01-12 12:17:16 +05:30
import { Button } from '@/components/ui/Button';
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',
profileImage: '/assets/agent-placeholder.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' },
],
},
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, nisleget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc.',
author: 'Kennedy 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, nisleget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc.',
author: 'Kennedy 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, nisleget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc.',
author: 'Kennedy Kenney',
role: 'Chief Operations Officer',
rating: 5,
},
],
};
// Star Rating Component
function StarRating({ rating }: { rating: number }) {
return (
<div className="flex gap-0.5">
{[1, 2, 3, 4, 5].map((star) => (
update svg
2026-01-12 12:17:16 +05:30
<Image
main layout
2026-01-11 22:09:41 +05:30
key={star}
update svg
2026-01-12 12:17:16 +05:30
src={star <= rating ? '/assets/icons/star-filled-icon.svg' : '/assets/icons/star-empty-icon.svg'}
alt={star <= rating ? 'Filled star' : 'Empty star'}
width={16}
height={16}
/>
main layout
2026-01-11 22:09:41 +05:30
))}
</div>
);
}
// Tag Component
function Tag({ children, variant = 'default' }: { children: React.ReactNode; variant?: 'default' | 'light' | 'orange' }) {
return (
<span
update svg
2026-01-12 12:17:16 +05:30
className={`inline-flex items-center px-3 py-1 rounded-full text-sm border ${variant === 'light'
main layout
2026-01-11 22:09:41 +05:30
? 'border-[#00293d]/30 text-[#00293d] bg-transparent'
: variant === 'orange'
update svg
2026-01-12 12:17:16 +05:30
? 'border-[#e58625] text-[#e58625] bg-transparent'
: 'border-[#00293d] text-[#00293d] bg-transparent'
}`}
main layout
2026-01-11 22:09:41 +05:30
>
{children}
</span>
);
}
// Specialization Card Component
function SpecializationCard({
title,
items,
icon,
}: {
title: string;
items: string[];
icon: React.ReactNode;
}) {
return (
<div className="bg-white rounded-[20px] p-6 text-center shadow-sm">
update svg
2026-01-12 12:17:16 +05:30
<div className="flex justify-center mb-3">{icon}</div>
main layout
2026-01-11 22:09:41 +05:30
<h4 className="font-bold text-[#00293d] text-sm mb-4">{title}</h4>
<div className="space-y-1">
{items.map((item, idx) => (
<p key={idx} className="text-[#00293d] text-sm">
{item}
</p>
))}
</div>
<button className="mt-4 inline-flex items-center gap-1 text-[#e58625] text-xs font-medium hover:opacity-80 transition-opacity">
Show More
update svg
2026-01-12 12:17:16 +05:30
<Image
src="/assets/icons/chevron-down-icon.svg"
alt="Show more"
width={12}
height={12}
/>
main layout
2026-01-11 22:09:41 +05:30
</button>
</div>
);
}
// Info Card Component
function InfoCard({
title,
content,
icon,
}: {
title: string;
content: React.ReactNode;
icon: React.ReactNode;
}) {
return (
update svg
2026-01-12 12:17:16 +05:30
<div className="bg-white rounded-[10px] shadow-[0px_10px_20px_0px_rgba(217,217,217,0.5)] p-6 text-center">
<div className="flex justify-center mb-3">{icon}</div>
{title && <h4 className="font-bold text-[#00293d] text-sm mb-3">{title}</h4>}
main layout
2026-01-11 22:09:41 +05:30
<div className="text-[#00293d] text-sm">{content}</div>
</div>
);
}
default layuout
2026-01-11 21:30:57 +05:30
export default function AgentDashboard() {
const { data: session } = useSession();
return (
<div className="space-y-6">
main layout
2026-01-11 22:09:41 +05:30
{/* Main Profile Section with Left Sidebar */}
<div className="flex flex-col lg:flex-row gap-6">
{/* Left Sidebar - Status & Contact */}
<div className="w-full lg:w-[180px] flex-shrink-0 space-y-4">
{/* Profile Image */}
update svg
2026-01-12 12:17:16 +05:30
<div className="relative mx-auto lg:mx-0">
{/* Profile Image */}
<div className="w-[200px] h-[200px] rounded-[15px] overflow-hidden">
<Image
src="/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg"
alt="Profile"
width={200}
height={200}
className="w-full h-full object-cover"
/>
default layuout
2026-01-11 21:30:57 +05:30
</div>
update svg
2026-01-12 12:17:16 +05:30
{/* Edit Icon - Top Right Outside */}
<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}
/>
main layout
2026-01-11 22:09:41 +05:30
</button>
default layuout
2026-01-11 21:30:57 +05:30
</div>
main layout
2026-01-11 22:09:41 +05:30
{/* 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>
default layuout
2026-01-11 21:30:57 +05:30
</div>
</div>
main layout
2026-01-11 22:09:41 +05:30
{/* 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">
update svg
2026-01-12 12:17:16 +05:30
<Image
src="/assets/icons/edit-pencil-icon.svg"
alt="Edit phone"
width={16}
height={16}
/>
main layout
2026-01-11 22:09:41 +05:30
</button>
default layuout
2026-01-11 21:30:57 +05:30
</div>
</div>
</div>
main layout
2026-01-11 22:09:41 +05:30
{/* Right Content - Profile Info */}
<div className="flex-1">
{/* Profile Header Card */}
<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>
{/* Name and Verification */}
<div className="flex items-center gap-2 mb-1">
update svg
2026-01-12 12:17:16 +05:30
<h1 className="text-[18px] text-[#00293d]">
main layout
2026-01-11 22:09:41 +05:30
<span className="font-bold">{agentData.name.split(' ')[0]}</span>{' '}
<span className="font-normal">{agentData.name.split(' ')[1]}</span>
</h1>
{agentData.isVerified && (
update svg
2026-01-12 12:17:16 +05:30
<>
<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>
</>
main layout
2026-01-11 22:09:41 +05:30
)}
<button className="p-1 hover:bg-gray-100 rounded transition-colors">
update svg
2026-01-12 12:17:16 +05:30
<Image
src="/assets/icons/edit-pencil-icon.svg"
alt="Edit name"
width={16}
height={16}
/>
main layout
2026-01-11 22:09:41 +05:30
</button>
</div>
default layuout
2026-01-11 21:30:57 +05:30
main layout
2026-01-11 22:09:41 +05:30
{/* Title */}
<p className="text-[#00293d] text-sm mb-2">{agentData.title}</p>
{/* Location and Member Since */}
<div className="flex items-center gap-4 text-sm text-[#00293d]">
<span className="flex items-center gap-1 text-[#e58625] font-medium">
update svg
2026-01-12 12:17:16 +05:30
<Image
src="/assets/icons/location-icon.svg"
alt="Location"
width={16}
height={16}
/>
main layout
2026-01-11 22:09:41 +05:30
{agentData.location}
</span>
<span className="flex items-center gap-1">
update svg
2026-01-12 12:17:16 +05:30
<Image
src="/assets/icons/calendar-icon.svg"
alt="Calendar"
width={16}
height={16}
/>
main layout
2026-01-11 22:09:41 +05:30
Member Since {agentData.memberSince}
</span>
</div>
</div>
{/* Action Buttons */}
update svg
2026-01-12 12:17:16 +05:30
<div className="flex items-center gap-3">
<Button
variant="action"
size="sm"
leftIcon={
<Image
src="/assets/icons/message-icon.svg"
alt="Message"
width={16}
height={16}
/>
}
>
main layout
2026-01-11 22:09:41 +05:30
Message
update svg
2026-01-12 12:17:16 +05:30
</Button>
<Button
variant="action"
size="sm"
leftIcon={
<Image
src="/assets/icons/clipboard-icon.svg"
alt="Requests"
width={16}
height={16}
/>
}
>
main layout
2026-01-11 22:09:41 +05:30
Requests
update svg
2026-01-12 12:17:16 +05:30
</Button>
main layout
2026-01-11 22:09:41 +05:30
</div>
default layuout
2026-01-11 21:30:57 +05:30
</div>
main layout
2026-01-11 22:09:41 +05:30
{/* 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>
default layuout
2026-01-11 21:30:57 +05:30
</div>
main layout
2026-01-11 22:09:41 +05:30
</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 */}
<div className="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">
{/* Left Column */}
<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>
default layuout
2026-01-11 21:30:57 +05:30
</div>
main layout
2026-01-11 22:09:41 +05:30
<div>
<p className="font-bold text-[#00293d] text-sm mb-2">Number of contract coised</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>
default layuout
2026-01-11 21:30:57 +05:30
</div>
</div>
main layout
2026-01-11 22:09:41 +05:30
{/* Divider */}
<div className="hidden lg:block w-px bg-gray-200" />
{/* Right Column */}
<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>
default layuout
2026-01-11 21:30:57 +05:30
</div>
main layout
2026-01-11 22:09:41 +05:30
<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>
default layuout
2026-01-11 21:30:57 +05:30
</div>
</div>
main layout
2026-01-11 22:09:41 +05:30
</div>
</div>
default layuout
2026-01-11 21:30:57 +05:30
main layout
2026-01-11 22:09:41 +05:30
{/* Info Cards Section */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<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>
{/* Specialization Section - Light Gray Background */}
<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>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<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>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto">
<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>
{/* Testimonials Section */}
<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>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{agentData.testimonials.map((testimonial) => (
<div key={testimonial.id} className="p-4">
<div className="flex items-start gap-3 mb-4">
<div className="w-8 h-8 rounded-full bg-[#e58625]/20 flex items-center justify-center flex-shrink-0">
<span className="text-[#e58625] text-lg font-serif">&ldquo;</span>
</div>
<p className="font-bold text-[#00293d] text-sm">I have been working with Lorem .</p>
</div>
<p className="text-[#00293d]/70 text-sm mb-4 leading-relaxed">{testimonial.text}</p>
<div className="flex items-center gap-3 pt-4 border-t border-gray-100">
<div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden">
update svg
2026-01-12 12:17:16 +05:30
<Image
src="/assets/icons/user-placeholder-icon.svg"
alt="User"
width={24}
height={24}
/>
main layout
2026-01-11 22:09:41 +05:30
</div>
<div className="flex-1">
<StarRating rating={testimonial.rating} />
<p className="font-bold text-[#00293d] text-sm">{testimonial.author}</p>
<p className="text-[#00293d]/50 text-xs">{testimonial.role}</p>
</div>
</div>
default layuout
2026-01-11 21:30:57 +05:30
</div>
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