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

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">
-            <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>
+          <StatusButtons />
 
           {/* Contact Info */}
-          <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">********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>
+          <ContactInfo email={agentData.email} phone={agentData.phone} />
         </div>
 
         {/* Right Content - Profile Info + Experience + All Sections */}