feat: Add user profile page and new modular profile components, integrating them into the agent dashboard.

src/components/profile/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>
+  );
+}