From 9b6fbeb4fdcbabd5ac87e995a59b2f0f74895c85 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Fri, 20 Mar 2026 02:32:58 +0530
Subject: [PATCH] feat: Introduce and integrate a mobile back button component
 across agent and user profile pages.

---
 src/app/(agent)/agent/edit/page.tsx        |  4 +++
 src/app/(user)/user/profile/[id]/page.tsx  |  2 ++
 src/app/(user)/user/profiles/page.tsx      |  4 ++-
 src/components/layout/MobileBackButton.tsx | 36 ++++++++++++++++++++++
 4 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 src/components/layout/MobileBackButton.tsx

diff --git a/src/app/(agent)/agent/edit/page.tsx b/src/app/(agent)/agent/edit/page.tsx
index 4c95440..050298b 100644
--- a/src/app/(agent)/agent/edit/page.tsx
+++ b/src/app/(agent)/agent/edit/page.tsx
@@ -7,6 +7,7 @@ import DynamicSection from './components/DynamicSection';
 import RepeatableSection, { RepeatableEntryData } from './components/RepeatableSection';
 import { profileSectionsService, ProfileSection, AgentTypeSectionsResponse } from '@/services/profile-sections.service';
 import { agentsService, AgentProfile, FieldValueInput } from '@/services/agents.service';
+import { MobileBackButton } from '@/components/layout/MobileBackButton';
 
 export default function EditProfilePage() {
   const router = useRouter();
@@ -364,6 +365,8 @@ export default function EditProfilePage() {
   }
 
   return (
+    <div>
+      <MobileBackButton label="Back" fallbackHref="/agent/dashboard" />
     <div className="flex gap-6 h-[calc(100vh-180px)]">
       {/* Left Sidebar - Quick Links */}
       <div className="w-[220px] flex-shrink-0 hidden lg:block h-full overflow-y-auto scrollbar-thin">
@@ -448,5 +451,6 @@ export default function EditProfilePage() {
         </div>
       </div>
     </div>
+    </div>
   );
 }
diff --git a/src/app/(user)/user/profile/[id]/page.tsx b/src/app/(user)/user/profile/[id]/page.tsx
index 1bcd097..d61ae53 100644
--- a/src/app/(user)/user/profile/[id]/page.tsx
+++ b/src/app/(user)/user/profile/[id]/page.tsx
@@ -16,6 +16,7 @@ import {
   ContactInfo,
 } from '@/components/profile';
 import { ConnectRequestModal } from '@/components/modals';
+import { MobileBackButton } from '@/components/layout/MobileBackButton';
 import { agentsService, AgentProfile, FieldValueResponse } from '@/services/agents.service';
 import { connectionRequestsService, ConnectionStatus } from '@/services/connection-requests.service';
 import { uploadService } from '@/services/upload.service';
@@ -277,6 +278,7 @@ export default function AgentProfileView() {
 
   return (
     <div className="max-w-7xl mx-auto px-4 lg:px-8 py-6 space-y-6">
+      <MobileBackButton label="Back" fallbackHref="/user/profiles" />
       {/* Main Layout - Responsive: Column on mobile, Row on desktop */}
       <div className="flex flex-col lg:flex-row gap-6 lg:items-stretch">
         {/* Left Sidebar - Status & Contact */}
diff --git a/src/app/(user)/user/profiles/page.tsx b/src/app/(user)/user/profiles/page.tsx
index cb47e69..91bff01 100644
--- a/src/app/(user)/user/profiles/page.tsx
+++ b/src/app/(user)/user/profiles/page.tsx
@@ -8,6 +8,7 @@ import { FilterModal, FilterState, FilterField } from '@/components/profiles/Fil
 import { agentsService, AgentType, PublicAgentProfile, SearchAgentsParams } from '@/services/agents.service';
 import { profileSectionsService, FilterableField } from '@/services/profile-sections.service';
 import { uploadService } from '@/services/upload.service';
+import { MobileBackButton } from '@/components/layout/MobileBackButton';
 
 interface FilterSectionProps {
   title: string;
@@ -281,7 +282,7 @@ function ProfileCard({ profile, resolvedAvatarUrl }: ProfileCardProps) {
           className="w-full sm:w-[200px] h-[200px] rounded-[15px]"
         />
         <Link href={`/user/profile/${profile.id}`} className="mt-4">
-          <button className="w-[113px] py-2.5 bg-[#e58625] hover:bg-[#d47720] text-[#00293d] font-fractul font-bold text-[14px] rounded-[15px] transition-colors">
+          <button className="w-[113px] py-2.5 bg-[#e58625] hover:bg-[#d47720] text-[#00293d] font-fractul font-bold text-[14px] rounded-[15px] transition-colors text-center flex items-center justify-center">
             View Profile
           </button>
         </Link>
@@ -609,6 +610,7 @@ function ProfilesPageContent() {
   return (
     <div className="min-h-screen bg-white">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+        <MobileBackButton label="Back" fallbackHref="/user/dashboard" />
         <div className="flex gap-6">
           {/* Left Sidebar - hidden on mobile, sticky */}
           <div className="hidden lg:block w-[220px] flex-shrink-0 self-start sticky top-6 max-h-[calc(100vh-48px)] overflow-y-auto scrollbar-thin">
diff --git a/src/components/layout/MobileBackButton.tsx b/src/components/layout/MobileBackButton.tsx
new file mode 100644
index 0000000..fcd66ee
--- /dev/null
+++ b/src/components/layout/MobileBackButton.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+interface MobileBackButtonProps {
+  label?: string;
+  fallbackHref?: string;
+}
+
+export function MobileBackButton({ label, fallbackHref }: MobileBackButtonProps) {
+  const router = useRouter();
+
+  const handleBack = () => {
+    if (window.history.length > 1) {
+      router.back();
+    } else if (fallbackHref) {
+      router.push(fallbackHref);
+    } else {
+      router.push('/');
+    }
+  };
+
+  return (
+    <button
+      onClick={handleBack}
+      className="lg:hidden flex items-center gap-2 mb-4 hover:opacity-70 transition-opacity cursor-pointer"
+    >
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+        <path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="#00293D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      </svg>
+      {label && (
+        <span className="font-fractul font-medium text-[14px] text-[#00293D]">{label}</span>
+      )}
+    </button>
+  );
+}