feat: Implement agent-user connection request system with a new service and dynamic profile card buttons.

src/components/profile/ProfileCard.tsx

@@ -1,11 +1,14 @@
 'use client';
 
+import { useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useSession } from 'next-auth/react';
 import { useRouter, usePathname } from 'next/navigation';
 import { Tag } from './Tag';
 
+type ConnectionStatus = 'PENDING' | 'ACCEPTED' | 'REJECTED' | null;
+
 interface ProfileCardProps {
   firstName: string;
   lastName: string;
@@ -19,6 +22,9 @@ interface ProfileCardProps {
   editHref?: string;
   messageHref?: string;
   requestsHref?: string;
+  connectionStatus?: ConnectionStatus;
+  onConnectClick?: () => void; // Callback when Connect button is clicked (for opening modal)
+  onUnlinkClick?: () => void; // Callback when Unlink button is clicked
 }
 
 export function ProfileCard({
@@ -34,10 +40,25 @@ export function ProfileCard({
   editHref = '/agent/edit',
   messageHref,
   requestsHref,
+  connectionStatus,
+  onConnectClick,
+  onUnlinkClick,
 }: ProfileCardProps) {
   const { data: session } = useSession();
   const router = useRouter();
   const pathname = usePathname();
+  const [isUnlinking, setIsUnlinking] = useState(false);
+
+  // Handle unlink click
+  const handleUnlinkClick = async () => {
+    if (isUnlinking) return;
+    setIsUnlinking(true);
+    try {
+      await onUnlinkClick?.();
+    } finally {
+      setIsUnlinking(false);
+    }
+  };
 
   // Handle action click - require login if not authenticated
   const handleActionClick = (e: React.MouseEvent, targetHref?: string) => {
@@ -146,7 +167,8 @@ export function ProfileCard({
               Message
             </button>
           )}
-          {requestsHref ? (
+          {showEditButton && requestsHref ? (
+            // Agent's own profile - show Requests link
             <Link
               href={requestsHref}
               onClick={(e) => handleActionClick(e, requestsHref)}
@@ -154,25 +176,63 @@ export function ProfileCard({
             >
               <Image
                 src="/assets/icons/requests-dark-icon.svg"
-                alt="Connect"
+                alt="Requests"
                 width={14}
                 height={13}
               />
-              {showEditButton ? 'Requests' : 'Connect'}
+              Requests
             </Link>
           ) : (
-            <button
-              onClick={(e) => handleActionClick(e)}
-              className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif cursor-pointer"
-            >
-              <Image
-                src="/assets/icons/requests-dark-icon.svg"
-                alt="Connect"
-                width={14}
-                height={13}
-              />
-              {showEditButton ? 'Requests' : 'Connect'}
-            </button>
+            // Public view - show Connect/Pending/Unlink button based on connection status
+            connectionStatus === 'PENDING' ? (
+              <button
+                disabled
+                className="flex items-center gap-2 px-4 py-1.5 bg-[#fef3c7] text-[#92600f] text-sm font-normal rounded-[15px] border border-[#00293d]/10 cursor-not-allowed font-serif"
+              >
+                <Image
+                  src="/assets/icons/requests-dark-icon.svg"
+                  alt="Pending"
+                  width={14}
+                  height={13}
+                />
+                Pending
+              </button>
+            ) : connectionStatus === 'ACCEPTED' ? (
+              <button
+                onClick={handleUnlinkClick}
+                disabled={isUnlinking}
+                className="flex items-center gap-2 px-4 py-1.5 bg-red-500 text-white text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-red-600 transition-colors font-serif cursor-pointer disabled:opacity-50"
+              >
+                <Image
+                  src="/assets/icons/requests-dark-icon.svg"
+                  alt="Unlink"
+                  width={14}
+                  height={13}
+                />
+                {isUnlinking ? 'Unlinking...' : 'Unlink'}
+              </button>
+            ) : (
+              <button
+                onClick={(e) => {
+                  if (!session) {
+                    e.preventDefault();
+                    const returnUrl = encodeURIComponent(pathname);
+                    router.push(`/login?callbackUrl=${returnUrl}`);
+                    return;
+                  }
+                  onConnectClick?.();
+                }}
+                className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif cursor-pointer"
+              >
+                <Image
+                  src="/assets/icons/requests-dark-icon.svg"
+                  alt="Connect"
+                  width={14}
+                  height={13}
+                />
+                Connect
+              </button>
+            )
           )}
         </div>
       </div>