From 8df27a285b91445c317304ae09625dc900d780c2 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Sun, 18 Jan 2026 18:16:55 +0530
Subject: [PATCH] feat: Implement responsive ExperienceSection and add eye
 icons to reveal masked contact details on the agent dashboard.

---
 public/assets/icons/eye-icon.svg              |   3 +
 .../dashboard/component/ExperienceSection.tsx | 121 ++++---
 src/app/(agent)/agent/dashboard/page.tsx      | 297 ++++++++++--------
 3 files changed, 260 insertions(+), 161 deletions(-)
 create mode 100644 public/assets/icons/eye-icon.svg

diff --git a/public/assets/icons/eye-icon.svg b/public/assets/icons/eye-icon.svg
new file mode 100644
index 0000000..d4db9d2
--- /dev/null
+++ b/public/assets/icons/eye-icon.svg
@@ -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>
diff --git a/src/app/(agent)/agent/dashboard/component/ExperienceSection.tsx b/src/app/(agent)/agent/dashboard/component/ExperienceSection.tsx
index e66c653..0c2868d 100644
--- a/src/app/(agent)/agent/dashboard/component/ExperienceSection.tsx
+++ b/src/app/(agent)/agent/dashboard/component/ExperienceSection.tsx
@@ -16,58 +16,109 @@ interface ExperienceSectionProps {
 
 export function ExperienceSection({ experience }: ExperienceSectionProps) {
   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>
-      <div className="flex flex-col lg:flex-row gap-8">
-        {/* Left Column */}
-        <div className="flex-1 space-y-6">
-          <div>
+    <>
+      {/* Desktop Layout */}
+      <div className="hidden lg:block bg-white rounded-[20px] border border-gray-200 p-6">
+        <h2 className="text-xl font-bold text-[#00293d] font-serif mb-6">Experience</h2>
+        <div className="flex 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>{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>
-            <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>
             </ul>
           </div>
-          <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">
+          <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>{experience.contracts}</li>
             </ul>
           </div>
-          <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">
-              {experience.licensingAreas.slice(0, 5).map((area, idx) => (
+              {experience.licensingAreas.map((area, idx) => (
                 <Tag key={idx} variant="light">
                   {area}
                 </Tag>
               ))}
-              {experience.licensingAreas.length > 5 && (
-                <span className="text-[#e58625] text-sm cursor-pointer">
-                  +{experience.licensingAreas.length - 5} More
-                </span>
-              )}
+              <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>
-
-        {/* Divider */}
-        <div className="hidden lg:block w-px bg-gray-200" />
-
-        {/* Right Column */}
-        <div className="flex-1 space-y-6">
-          <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">
-              {experience.expertiseYears.slice(0, 3).map((item, idx) => (
-                <Tag key={idx} variant="orange">
+              {experience.expertiseYears.map((item, idx) => (
+                <Tag key={idx} variant="light">
                   {item.area} – {item.years}
                 </Tag>
               ))}
-              {experience.expertiseYears.length > 3 && (
-                <span className="text-[#e58625] text-sm cursor-pointer">
-                  +{experience.expertiseYears.length - 3}More
-                </span>
-              )}
+              <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>
@@ -75,14 +126,14 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
             <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>
+                  <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>
+    </>
   );
 }
diff --git a/src/app/(agent)/agent/dashboard/page.tsx b/src/app/(agent)/agent/dashboard/page.tsx
index a06d49a..3830cca 100644
--- a/src/app/(agent)/agent/dashboard/page.tsx
+++ b/src/app/(agent)/agent/dashboard/page.tsx
@@ -9,6 +9,7 @@ import {
   InfoCard,
   SpecializationCard,
   TestimonialCard,
+  ExperienceSection,
 } from './component';
 
 // Mock agent data - in production, this would come from API
@@ -201,8 +202,8 @@ export default function AgentDashboard() {
         </p>
       </div>
 
-      {/* Desktop: Original Layout */}
-      <div className="hidden lg:flex flex-row gap-6 items-start">
+      {/* Desktop: Original Layout - Sidebar + Right Content (Profile + Experience) */}
+      <div className="hidden lg:flex flex-row gap-6 items-stretch">
         {/* Left Sidebar - Status & Contact */}
         <div className="w-[220px] flex-shrink-0 space-y-4">
           {/* 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="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>
+              <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 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"
+                  src="/assets/icons/eye-icon.svg"
+                  alt="Show phone"
                   width={16}
                   height={16}
                 />
@@ -272,8 +281,9 @@ export default function AgentDashboard() {
           </div>
         </div>
 
-        {/* Right Content - Profile Info */}
-        <div className="flex-1">
+        {/* Right Content - Profile Info + Experience */}
+        <div className="flex-1 space-y-6">
+          {/* Profile 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">
@@ -364,124 +374,159 @@ export default function AgentDashboard() {
               </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>
 
-      {/* Experience Section */}
+      {/* Mobile Experience Section */}
       <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>
-            <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>
+        <ExperienceSection experience={agentData.experience} />
       </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] 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">
+      {/* Info Cards Section - Mobile */}
+      <div className="flex flex-col gap-6 lg:hidden">
         <InfoCard
           title="Availability"
           icon={
@@ -529,13 +574,13 @@ export default function AgentDashboard() {
         />
       </div>
 
-      {/* Specialization Section - Single Column on Mobile */}
-      <div className="bg-[#e8e8e8] rounded-[20px] p-8">
+      {/* Specialization Section - Mobile */}
+      <div className="bg-[#e8e8e8] rounded-[20px] p-8 lg:hidden">
         <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="flex flex-col lg:grid lg:grid-cols-3 gap-6 mb-6">
+        <div className="flex flex-col gap-6 mb-6">
           <SpecializationCard
             title="Specialization"
             items={agentData.specialization.types}
@@ -573,7 +618,7 @@ export default function AgentDashboard() {
             }
           />
         </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
             title="Hobbies & Interests"
             items={agentData.specialization.hobbies}
@@ -601,13 +646,13 @@ export default function AgentDashboard() {
         </div>
       </div>
 
-      {/* Testimonials Section - Single Column on Mobile */}
-      <div className="bg-white rounded-[20px] border border-gray-200 p-8">
+      {/* Testimonials Section - Mobile */}
+      <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>
         <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="flex flex-col lg:grid lg:grid-cols-3 gap-6">
+        <div className="flex flex-col gap-6">
           {agentData.testimonials.map((testimonial) => (
             <TestimonialCard
               key={testimonial.id}