feat: Extract dashboard status buttons and contact information into reusable components, adding show/hide functionality for contact details.

public/assets/icons/eye-off-icon.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.359 11.238C15.06 9.72 16 8 16 8C16 8 13 2.5 8 2.5C7.03958 2.50331 6.09018 2.70585 5.21 3.095L5.98 3.87C6.61 3.63 7.29 3.5 8 3.5C11.64 3.5 14 7.14 14.75 8.5C14.3482 9.24623 13.8612 9.94289 13.3 10.578L13.359 11.238Z" fill="#00293d"/>
+<path d="M10.79 8.67C10.9267 8.04308 10.8677 7.39055 10.6212 6.79967C10.3747 6.20879 9.95332 5.70875 9.41356 5.36593C8.8738 5.02311 8.24172 4.85411 7.60343 4.88138C6.96514 4.90865 6.35033 5.13093 5.84 5.52L6.56 6.24C6.89252 6.01264 7.28713 5.89171 7.69065 5.89339C8.09416 5.89507 8.48774 6.01927 8.81833 6.24931C9.14893 6.47935 9.40107 6.80469 9.54195 7.18192C9.68282 7.55915 9.70579 7.97052 9.608 8.36L10.79 8.67Z" fill="#00293d"/>
+<path d="M8 13.5C4.36 13.5 2 9.86 1.25 8.5C1.65185 7.75377 2.1388 7.05711 2.7 6.422L2.641 5.762C0.94 7.28 0 9 0 9C0 9 3 14.5 8 14.5C8.96042 14.4967 9.90982 14.2942 10.79 13.905L10.02 13.13C9.39 13.37 8.71 13.5 8 13.5Z" fill="#00293d"/>
+<path d="M1 1L15 15" stroke="#00293d" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/app/(agent)/agent/dashboard/component/ContactInfo.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+
+interface ContactInfoProps {
+  email: string;
+  phone: string;
+}
+
+// Helper function to mask email
+function maskEmail(email: string): string {
+  const [localPart, domain] = email.split('@');
+  if (!domain) return '********';
+  const maskedLocal = localPart.slice(0, 2) + '********';
+  return `${maskedLocal}@${domain}`;
+}
+
+// Helper function to mask phone
+function maskPhone(phone: string): string {
+  if (phone.length <= 4) return '********';
+  return phone.slice(0, -4).replace(/./g, '*') + phone.slice(-4);
+}
+
+export function ContactInfo({ email, phone }: ContactInfoProps) {
+  const [showEmail, setShowEmail] = useState(false);
+  const [showPhone, setShowPhone] = useState(false);
+
+  return (
+    <div className="w-full max-w-[354px] lg:max-w-none border border-[#00293d]/10 rounded-[15px] p-4">
+      <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">
+          {showEmail ? email : maskEmail(email)}
+        </span>
+        <button
+          className="p-1 hover:bg-gray-100 rounded ml-auto"
+          onClick={() => setShowEmail(!showEmail)}
+        >
+          <Image
+            src={showEmail ? "/assets/icons/eye-off-icon.svg" : "/assets/icons/eye-icon.svg"}
+            alt={showEmail ? "Hide email" : "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">
+          {showPhone ? phone : maskPhone(phone)}
+        </span>
+        <button
+          className="p-1 hover:bg-gray-100 rounded ml-auto"
+          onClick={() => setShowPhone(!showPhone)}
+        >
+          <Image
+            src={showPhone ? "/assets/icons/eye-off-icon.svg" : "/assets/icons/eye-icon.svg"}
+            alt={showPhone ? "Hide phone" : "Show phone"}
+            width={16}
+            height={16}
+          />
+        </button>
+      </div>
+    </div>
+  );
+}

src/app/(agent)/agent/dashboard/component/StatusButtons.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+interface StatusButtonsProps {
+  isAvailable?: boolean;
+}
+
+export function StatusButtons({ isAvailable = true }: StatusButtonsProps) {
+  return (
+    <div className="w-full max-w-[354px] lg:max-w-none space-y-2">
+      <div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[50px] 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] font-fractul">Available.</span>
+        </div>
+        <button className="px-5 py-1.5 bg-[#e58625] text-white text-sm rounded-[15px] hover:bg-[#d47720] transition-colors font-fractul">
+          Connect
+        </button>
+      </div>
+      <div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[50px] 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] font-fractul">Unavailable.</span>
+        </div>
+        <button className="px-5 py-1.5 bg-[#00293d] text-white text-sm rounded-[15px] hover:bg-[#001d2b] transition-colors font-fractul">
+          Connect
+        </button>
+      </div>
+    </div>
+  );
+}

src/app/(agent)/agent/dashboard/component/index.ts

@@ -10,3 +10,5 @@ export { ExperienceSection } from './ExperienceSection';
 export { SpecializationSection } from './SpecializationSection';
 export { TestimonialCard } from './TestimonialCard';
 export { TestimonialsSection } from './TestimonialsSection';
+export { StatusButtons } from './StatusButtons';
+export { ContactInfo } from './ContactInfo';

src/app/(agent)/agent/dashboard/page.tsx

@@ -10,6 +10,8 @@ import {
   ProfileCard,
   SpecializationSection,
   TestimonialsSection,
+  StatusButtons,
+  ContactInfo,
 } from './component';
 
 // Mock agent data - in production, this would come from API
@@ -105,54 +107,10 @@ export default function AgentDashboard() {
           </div>
 
           {/* Status Buttons */}
-          <div className="w-full max-w-[354px] lg:max-w-none space-y-2">
+          <StatusButtons />
-            <div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[50px] lg:h-[50px] 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] font-fractul">Available.</span>
-              </div>
-              <button className="px-5 py-1.5 bg-[#e58625] text-white text-sm rounded-[15px] hover:bg-[#d47720] transition-colors font-fractul">
-                Connect
-              </button>
-            </div>
-            <div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[50px] lg:h-[50px] 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] font-fractul">Unavailable.</span>
-              </div>
-              <button className="px-5 py-1.5 bg-[#00293d] text-white text-sm rounded-[15px] hover:bg-[#001d2b] transition-colors font-fractul">
-                Connect
-              </button>
-            </div>
-          </div>
 
           {/* Contact Info */}
-          <div className="w-full max-w-[354px] lg:max-w-none border border-[#00293d]/10 rounded-[15px] p-4">
+          <ContactInfo email={agentData.email} phone={agentData.phone} />
-            <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">********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/eye-icon.svg"
-                  alt="Show phone"
-                  width={16}
-                  height={16}
-                />
-              </button>
-            </div>
-          </div>
         </div>
 
         {/* Right Content - Profile Info + Experience + All Sections */}