feat: introduce agent network page with sidebar, invitation cards, and new icons, while refactoring dashboard components and updating profile links.

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

@@ -95,7 +95,10 @@ export function ProfileCard({
             />
             Message
           </button>
-          <button 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">
+          <Link
+            href="/agent/network"
+            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="Requests"
@@ -103,7 +106,7 @@ export function ProfileCard({
               height={13}
             />
             Requests
-          </button>
+          </Link>
         </div>
       </div>
 

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

@@ -1,141 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-import { Button } from '@/components/ui/Button';
-import { Tag } from './Tag';
-
-interface ProfileHeaderProps {
-  name: string;
-  isVerified: boolean;
-  title: string;
-  location: string;
-  memberSince: string;
-  bio: string;
-  expertise: string[];
-}
-
-export function ProfileHeader({
-  name,
-  isVerified,
-  title,
-  location,
-  memberSince,
-  bio,
-  expertise,
-}: ProfileHeaderProps) {
-  const [firstName, lastName] = name.split(' ');
-
-  return (
-    <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">
-        <div>
-          {/* Name and Verification */}
-          <div className="flex items-center gap-2 mb-1">
-            <h1 className="text-[18px] text-[#00293d] font-[family-name:var(--font-fractul)]">
-              <span className="font-bold">{firstName}</span>{' '}
-              <span className="font-normal">{lastName}</span>
-            </h1>
-            {isVerified && (
-              <>
-                <Image
-                  src="/assets/icons/verified-icon.svg"
-                  alt="Verified"
-                  width={15}
-                  height={14}
-                />
-                <span className="text-[14px] text-[#638559] font-medium font-serif">
-                  (Verified Expert)
-                </span>
-              </>
-            )}
-            <button className="p-1 hover:bg-gray-100 rounded transition-colors">
-              <Image
-                src="/assets/icons/edit-pencil-orange-icon.svg"
-                alt="Edit name"
-                width={19}
-                height={19}
-              />
-            </button>
-          </div>
-
-          {/* Title */}
-          <p className="text-[#00293d] text-sm mb-2">{title}</p>
-
-          {/* Location and Member Since */}
-          <div className="flex items-center gap-4 text-sm text-[#00293d]">
-            <span className="flex items-center gap-1 text-[#e58625] font-medium">
-              <Image
-                src="/assets/icons/location-icon.svg"
-                alt="Location"
-                width={16}
-                height={16}
-              />
-              {location}
-            </span>
-            <span className="flex items-center gap-1">
-              <Image
-                src="/assets/icons/calendar-icon.svg"
-                alt="Calendar"
-                width={16}
-                height={16}
-              />
-              Member Since {memberSince}
-            </span>
-          </div>
-        </div>
-
-        {/* Action Buttons */}
-        <div className="flex items-center gap-3">
-          <div className="relative overflow-visible">
-            <Button
-              variant="action"
-              size="sm"
-              leftIcon={
-                <Image
-                  src="/assets/icons/message-icon.svg"
-                  alt="Message"
-                  width={16}
-                  height={16}
-                />
-              }
-            >
-              Message
-            </Button>
-            <span className="absolute -top-2 -right-2 w-3 h-3 bg-red-500 rounded-full border-2 border-white z-10"></span>
-          </div>
-          <div className="relative overflow-visible">
-            <Button
-              variant="action"
-              size="sm"
-              leftIcon={
-                <Image
-                  src="/assets/icons/clipboard-icon.svg"
-                  alt="Requests"
-                  width={16}
-                  height={16}
-                />
-              }
-            >
-              Requests
-            </Button>
-            <span className="absolute -top-2 -right-2 w-3 h-3 bg-red-500 rounded-full border-2 border-white z-10"></span>
-          </div>
-        </div>
-      </div>
-
-      {/* Bio */}
-      <p className="text-[#00293d] text-sm leading-relaxed mb-4">{bio}</p>
-
-      {/* Expertise Tags */}
-      <div>
-        <p className="font-bold text-[#00293d] text-sm mb-2">Expertise:</p>
-        <div className="flex flex-wrap gap-2">
-          {expertise.map((tag, idx) => (
-            <Tag key={idx}>{tag}</Tag>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -4,7 +4,6 @@ export { Tag } from './Tag';
 export { InfoCard } from './InfoCard';
 export { SpecializationCard } from './SpecializationCard';
 export { ProfileSidebar } from './ProfileSidebar';
-export { ProfileHeader } from './ProfileHeader';
 export { ProfileCard } from './ProfileCard';
 export { ExperienceSection } from './ExperienceSection';
 export { SpecializationSection } from './SpecializationSection';