Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement responsive ExperienceSection and add eye icons to reveal masked contact details on the agent dashboard.

Browse Source
This commit is contained in:
pradeepkumar
2026-01-18 18:16:55 +05:30
parent f9a9ab0d5a
commit 8df27a285b
3 changed files with 260 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/assets/icons/eye-icon.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 3C4.36364 3 1.25818 5.28 0 8.5C1.25818 11.72 4.36364 14 8 14C11.6364 14 14.7418 11.72 16 8.5C14.7418 5.28 11.6364 3 8 3ZM8 12.1667C5.97091 12.1667 4.32727 10.5233 4.32727 8.5C4.32727 6.47667 5.97091 4.83333 8 4.83333C10.0291 4.83333 11.6727 6.47667 11.6727 8.5C11.6727 10.5233 10.0291 12.1667 8 12.1667ZM8 6.3C6.78182 6.3 5.8 7.28 5.8 8.5C5.8 9.72 6.78182 10.7 8 10.7C9.21818 10.7 10.2 9.72 10.2 8.5C10.2 7.28 9.21818 6.3 8 6.3Z" fill="#00293d"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 562 B

121
src/app/(agent)/agent/dashboard/component/ExperienceSection.tsx
View File

@@ -16,58 +16,109 @@ interface ExperienceSectionProps {
export function ExperienceSection({ experience }: ExperienceSectionProps) { export function ExperienceSection({ experience }: ExperienceSectionProps) {
return ( return (
<div className="bg-white rounded-[20px] border border-gray-200 p-6"> <>
<h2 className="text-xl font-bold text-[#00293d] mb-6">Experience</h2> {/* Desktop Layout */}
<div className="flex flex-col lg:flex-row gap-8"> <div className="hidden lg:block bg-white rounded-[20px] border border-gray-200 p-6">
{/* Left Column */} <h2 className="text-xl font-bold text-[#00293d] font-serif mb-6">Experience</h2>
<div className="flex-1 space-y-6"> <div className="flex flex-row gap-8">
<div> {/* 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>{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>{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">
{experience.licensingAreas.map((area, idx) => (
<Tag key={idx} variant="light">
{area}
</Tag>
))}
<span className="text-[#e58625] text-sm cursor-pointer">+3 More</span>
</div>
</div>
</div>
{/* Divider */}
<div className="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">
{experience.expertiseYears.slice(0, 4).map((item, idx) => (
<Tag key={idx} variant="orange">
{item.area} – {item.years}
</Tag>
))}
<span className="text-[#e58625] text-sm cursor-pointer">+3More</span>
</div>
</div>
<div>
<p className="font-bold text-[#00293d] text-sm mb-3">Certifications</p>
<ul className="space-y-3">
{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>
{/* Mobile Layout */}
<div className="lg:hidden">
<h2 className="text-xl font-bold text-[#00293d] font-serif 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> <p className="font-bold text-[#00293d] text-sm mb-2">Years in Experience</p>
<ul className="list-disc list-inside text-[#00293d] text-sm"> <ul className="list-disc list-inside text-[#00293d] text-sm font-serif">
<li>{experience.years}</li> <li>{experience.years}</li>
</ul> </ul>
</div> </div>
<div> <div className="border-b border-gray-200 pb-4">
<p className="font-bold text-[#00293d] text-sm mb-2">Number of contract coised</p> <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"> <ul className="list-disc list-inside text-[#00293d] text-sm font-serif">
<li>{experience.contracts}</li> <li>{experience.contracts}</li>
</ul> </ul>
</div> </div>
<div> <div className="pb-4">
<p className="font-bold text-[#00293d] text-sm mb-3">Licensing &amp; Areas</p> <p className="font-bold text-[#00293d] text-sm mb-3">Licensing &amp; Areas</p>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{experience.licensingAreas.slice(0, 5).map((area, idx) => ( {experience.licensingAreas.map((area, idx) => (
<Tag key={idx} variant="light"> <Tag key={idx} variant="light">
{area} {area}
</Tag> </Tag>
))} ))}
{experience.licensingAreas.length > 5 && ( <span className="inline-flex items-center px-3 py-1 rounded-full text-sm border border-[#00293d]/10 text-[#00293d]">
<span className="text-[#e58625] text-sm cursor-pointer"> +3 More
+{experience.licensingAreas.length - 5} More </span>
</span>
)}
</div> </div>
</div> </div>
</div> <div className="pb-4">
{/* 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> <p className="font-bold text-[#00293d] text-sm mb-3">Areas in expertise &amp; Years</p>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{experience.expertiseYears.slice(0, 3).map((item, idx) => ( {experience.expertiseYears.map((item, idx) => (
<Tag key={idx} variant="orange"> <Tag key={idx} variant="light">
{item.area} – {item.years} {item.area} – {item.years}
</Tag> </Tag>
))} ))}
{experience.expertiseYears.length > 3 && ( <span className="inline-flex items-center px-3 py-1 rounded-full text-sm border border-[#00293d]/10 text-[#00293d]">
<span className="text-[#e58625] text-sm cursor-pointer"> +3More
+{experience.expertiseYears.length - 3}More </span>
</span>
)}
</div> </div>
</div> </div>
<div> <div>
@@ -75,14 +126,14 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
<ul className="space-y-3"> <ul className="space-y-3">
{experience.certifications.map((cert, idx) => ( {experience.certifications.map((cert, idx) => (
<li key={idx} className="text-[#00293d] text-sm"> <li key={idx} className="text-[#00293d] text-sm">
<span>• {cert.name}</span> <span className="font-serif">• {cert.name}</span>
<p className="text-[#5ba4a4] text-xs ml-3">{cert.org}</p> <p className="text-[#00293d]/50 text-sm ml-3 font-serif">{cert.org}</p>
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </>
); );
} }

297
src/app/(agent)/agent/dashboard/page.tsx
View File

@@ -9,6 +9,7 @@ import {
InfoCard, InfoCard,
SpecializationCard, SpecializationCard,
TestimonialCard, TestimonialCard,
ExperienceSection,
} from './component'; } from './component';
// Mock agent data - in production, this would come from API // Mock agent data - in production, this would come from API
@@ -201,8 +202,8 @@ export default function AgentDashboard() {
</p> </p>
</div> </div>
{/* Desktop: Original Layout */} {/* Desktop: Original Layout - Sidebar + Right Content (Profile + Experience) */}
<div className="hidden lg:flex flex-row gap-6 items-start"> <div className="hidden lg:flex flex-row gap-6 items-stretch">
{/* Left Sidebar - Status & Contact */} {/* Left Sidebar - Status & Contact */}
<div className="w-[220px] flex-shrink-0 space-y-4"> <div className="w-[220px] flex-shrink-0 space-y-4">
{/* Profile Image */} {/* Profile Image */}
@@ -255,15 +256,23 @@ export default function AgentDashboard() {
<div className="w-full border border-[#00293d]/10 rounded-[15px] p-4 mt-2"> <div className="w-full border border-[#00293d]/10 rounded-[15px] p-4 mt-2">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
<span className="font-bold text-[#00293d] text-sm">Email:</span> <span className="font-bold text-[#00293d] text-sm">Email:</span>
<span className="text-[#00293d] text-sm font-serif">*****brian@gmail.com</span> <span className="text-[#00293d] text-sm font-serif">********brain@gmail.com</span>
<button className="p-1 hover:bg-gray-100 rounded ml-auto">
<Image
src="/assets/icons/eye-icon.svg"
alt="Show email"
width={16}
height={16}
/>
</button>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="font-bold text-[#00293d] text-sm">Ph.No:</span> <span className="font-bold text-[#00293d] text-sm">Ph.No:</span>
<span className="text-[#00293d] text-sm font-serif">{agentData.phone}</span> <span className="text-[#00293d] text-sm font-serif">{agentData.phone}</span>
<button className="p-1 hover:bg-gray-100 rounded ml-auto"> <button className="p-1 hover:bg-gray-100 rounded ml-auto">
<Image <Image
src="/assets/icons/edit-pencil-icon.svg" src="/assets/icons/eye-icon.svg"
alt="Edit phone" alt="Show phone"
width={16} width={16}
height={16} height={16}
/> />
@@ -272,8 +281,9 @@ export default function AgentDashboard() {
</div> </div>
</div> </div>
{/* Right Content - Profile Info */} {/* Right Content - Profile Info + Experience */}
<div className="flex-1"> <div className="flex-1 space-y-6">
{/* Profile Card */}
<div className="bg-white rounded-[20px] border border-gray-200 p-6"> <div className="bg-white rounded-[20px] border border-gray-200 p-6">
{/* Name and Actions Row */} {/* Name and Actions Row */}
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-4"> <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-4">
@@ -364,124 +374,159 @@ export default function AgentDashboard() {
</div> </div>
</div> </div>
</div> </div>
{/* Experience Section - Inside the same row */}
<ExperienceSection experience={agentData.experience} />
{/* Info Cards Section - Desktop */}
<div className="grid grid-cols-3 gap-6">
<InfoCard
title="Availability"
icon={
<Image
src="/assets/icons/clock-icon.svg"
alt="Availability"
width={32}
height={32}
/>
}
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>
</div>
}
/>
<InfoCard
title="Preferred work environment"
icon={
<Image
src="/assets/icons/location-large-icon.svg"
alt="Work environment"
width={32}
height={32}
/>
}
content={<p className="text-sm leading-relaxed">{agentData.preferredWorkEnvironment}</p>}
/>
<InfoCard
title=""
icon={
<Image
src="/assets/icons/star-icon.svg"
alt="Testimonial"
width={32}
height={32}
/>
}
content={<p className="text-sm leading-relaxed italic">&ldquo;{agentData.testimonialHighlight}&rdquo;</p>}
/>
</div>
{/* Specialization Section - Desktop */}
<div className="bg-[#e8e8e8] rounded-[20px] p-8">
<div className="text-center mb-8">
<h2 className="text-xl font-bold text-[#00293d] font-serif">Specialization</h2>
<p className="text-[#00293d]/70 text-sm">Area Of Expertise and Focus</p>
</div>
<div className="grid grid-cols-3 gap-6 mb-6">
<SpecializationCard
title="Specialization"
items={agentData.specialization.types}
icon={
<Image
src="/assets/icons/home-icon.svg"
alt="Specialization"
width={24}
height={24}
/>
}
/>
<SpecializationCard
title="Loan Type"
items={agentData.specialization.loanTypes}
icon={
<Image
src="/assets/icons/wallet-icon.svg"
alt="Loan Type"
width={24}
height={24}
/>
}
/>
<SpecializationCard
title="Property Type"
items={agentData.specialization.propertyTypes}
icon={
<Image
src="/assets/icons/chart-icon.svg"
alt="Property Type"
width={24}
height={24}
/>
}
/>
</div>
<div className="grid grid-cols-2 gap-6 max-w-2xl mx-auto">
<SpecializationCard
title="Hobbies & Interests"
items={agentData.specialization.hobbies}
icon={
<Image
src="/assets/icons/heart-icon.svg"
alt="Hobbies"
width={24}
height={24}
/>
}
/>
<SpecializationCard
title="Price Point"
items={agentData.specialization.pricePoints}
icon={
<Image
src="/assets/icons/dollar-icon.svg"
alt="Price Point"
width={24}
height={24}
/>
}
/>
</div>
</div>
{/* Testimonials Section - Desktop */}
<div className="bg-white rounded-[20px] border border-gray-200 p-8">
<h2 className="text-xl font-bold text-[#00293d] font-serif 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-3 gap-6">
{agentData.testimonials.map((testimonial) => (
<TestimonialCard
key={testimonial.id}
text={testimonial.text}
author={testimonial.author}
role={testimonial.role}
rating={testimonial.rating}
/>
))}
</div>
</div>
</div> </div>
</div> </div>
{/* Experience Section */} {/* Mobile Experience Section */}
<div className="lg:hidden"> <div className="lg:hidden">
<h2 className="text-xl font-bold text-[#00293d] font-serif text-center mb-6">Experience</h2> <ExperienceSection experience={agentData.experience} />
<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> </div>
{/* Desktop Experience Section */} {/* Info Cards Section - Mobile */}
<div className="hidden lg:block bg-white rounded-[20px] border border-gray-200 p-6"> <div className="flex flex-col gap-6 lg:hidden">
<h2 className="text-xl font-bold text-[#00293d] font-serif 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>
{/* Info Cards Section - Stack on Mobile */}
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6">
<InfoCard <InfoCard
title="Availability" title="Availability"
icon={ icon={
@@ -529,13 +574,13 @@ export default function AgentDashboard() {
/> />
</div> </div>
{/* Specialization Section - Single Column on Mobile */} {/* Specialization Section - Mobile */}
<div className="bg-[#e8e8e8] rounded-[20px] p-8"> <div className="bg-[#e8e8e8] rounded-[20px] p-8 lg:hidden">
<div className="text-center mb-8"> <div className="text-center mb-8">
<h2 className="text-xl font-bold text-[#00293d] font-serif">Specialization</h2> <h2 className="text-xl font-bold text-[#00293d] font-serif">Specialization</h2>
<p className="text-[#00293d]/70 text-sm">Area Of Expertise and Focus</p> <p className="text-[#00293d]/70 text-sm">Area Of Expertise and Focus</p>
</div> </div>
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6 mb-6"> <div className="flex flex-col gap-6 mb-6">
<SpecializationCard <SpecializationCard
title="Specialization" title="Specialization"
items={agentData.specialization.types} items={agentData.specialization.types}
@@ -573,7 +618,7 @@ export default function AgentDashboard() {
} }
/> />
</div> </div>
<div className="flex flex-col lg:grid lg:grid-cols-2 gap-6 lg:max-w-2xl lg:mx-auto"> <div className="flex flex-col gap-6">
<SpecializationCard <SpecializationCard
title="Hobbies & Interests" title="Hobbies & Interests"
items={agentData.specialization.hobbies} items={agentData.specialization.hobbies}
@@ -601,13 +646,13 @@ export default function AgentDashboard() {
</div> </div>
</div> </div>
{/* Testimonials Section - Single Column on Mobile */} {/* Testimonials Section - Mobile */}
<div className="bg-white rounded-[20px] border border-gray-200 p-8"> <div className="bg-white rounded-[20px] border border-gray-200 p-8 lg:hidden">
<h2 className="text-xl font-bold text-[#00293d] font-serif text-center mb-2">Testimonials</h2> <h2 className="text-xl font-bold text-[#00293d] font-serif text-center mb-2">Testimonials</h2>
<p className="text-[#00293d]/70 text-sm text-center mb-8"> <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. Clients rate our real estate services 4.9 out of 5 on average, based on recent client reviews.
</p> </p>
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6"> <div className="flex flex-col gap-6">
{agentData.testimonials.map((testimonial) => ( {agentData.testimonials.map((testimonial) => (
<TestimonialCard <TestimonialCard
key={testimonial.id} key={testimonial.id}