feat: Add user profile page with detailed card, display saved routes, and introduce a route discovery panel.

client/app/(private)/home/routes/(from)/(to)/page.tsx

@@ -4,7 +4,7 @@
 
 import { useSearchParams } from "next/navigation";
 
 import { Bookmark } from "lucide-react";
 import { toast } from "sonner";
 
 import InsightToast from "@/components/routes/InsightToast";
@@ -245,18 +245,14 @@
             coordinates: [destination.lng, destination.lat],
           },
         },
-        routes: [
-          {
-            distance: routes[selectedRouteIndex].distance,
-            duration: routes[selectedRouteIndex].duration,
-            routeGeometry: routes[selectedRouteIndex].geometry,
-            lastComputedScore:
-              routes[selectedRouteIndex].aqiScore ||
-              Math.floor(Math.random() * 100),
-            lastComputedAt: new Date(),
-            travelMode: selectedMode,
-          },
-        ],
+        routes: routes.map((route) => ({
+          distance: route.distance / 1000,
+          duration: route.duration / 60,
+          routeGeometry: route.geometry,
+          lastComputedScore: route.aqiScore || Math.floor(Math.random() * 100),
+          lastComputedAt: new Date(),
+          travelMode: selectedMode,
+        })),
         isFavorite: false,
       };
 
@@ -304,6 +300,8 @@
           onModeChange={handleModeChange}
           routeName={routeName}
           onRouteNameChange={setRouteName}
+          onSaveRoute={saveRoute}
+          canSave={!isLoading && !error && routes.length > 0}
         />
         <RouteComparisonPanel
           routes={routes}
@@ -315,19 +313,6 @@
         />
         <InsightToast />
         <MapControls />
-
-        {/* Save Route Button - Bottom Right */}
-        {!isLoading && !error && routes.length > 0 && (
-          <button
-            onClick={saveRoute}
-            className="absolute right-6 bottom-10 z-40 flex items-center gap-3 rounded-xl bg-white px-6 py-3.5 font-bold text-slate-800 shadow-2xl transition-all hover:scale-105 hover:bg-slate-50 active:scale-95 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700"
-          >
-            <div className="flex size-8 items-center justify-center rounded-full bg-[#2bee6c]/10 text-[#2bee6c]">
-              <Bookmark className="size-4" />
-            </div>
-            <span>Save Route</span>
-          </button>
-        )}
       </main>
     </div>
   );

client/app/(private)/profile/page.tsx

@@ -1,3 +1,5 @@
+import { Suspense } from "react";
+
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
 
@@ -42,7 +44,23 @@ export default async function ProfilePage() {
     <div className="bg-bc-bg-light min-h-screen">
       <main className="mx-auto max-w-4xl px-6 py-8">
         <ProfileCard user={user} />
-        <SavedRoutes />
+        <Suspense
+          fallback={
+            <div className="mt-6 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+              <div className="mb-4 h-6 w-32 animate-pulse rounded bg-slate-100" />
+              <div className="space-y-3">
+                {[1, 2, 3].map((i) => (
+                  <div
+                    key={i}
+                    className="h-20 animate-pulse rounded-xl border border-slate-100 bg-slate-50"
+                  />
+                ))}
+              </div>
+            </div>
+          }
+        >
+          <SavedRoutes />
+        </Suspense>
         <NotificationPreference />
       </main>
     </div>

client/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Outfit } from "next/font/google";
 
-import { toast, Toaster } from "sonner";
+import { Toaster } from "sonner";
 
 import "./globals.css";
 

client/components/home/HomeMap.tsx

@@ -318,14 +318,15 @@ export default function HomeMap({ className }: HomeMapProps) {
 
     initMap();
 
+    const markersInstance = markersRef.current; // Capture ref value
+
     return () => {
       isCancelled = true;
       cleanupRef.current();
 
       // Safe Cleanup
-      const markers = markersRef.current;
-      if (markers.source) markers.source.remove();
-      if (markers.dest) markers.dest.remove();
+      if (markersInstance.source) markersInstance.source.remove();
+      if (markersInstance.dest) markersInstance.dest.remove();
 
       mapRef.current = null;
     };

client/components/profile/ProfileCard.tsx

@@ -26,6 +26,8 @@ export default function ProfileCard({ user }: { user: UserData }) {
           <div className="relative">
             {user.picture ? (
               <Image
+                width={100}
+                height={100}
                 src={user.picture}
                 alt={user.name}
                 className="h-28 w-28 rounded-2xl border-4 border-white object-cover shadow-lg"

client/components/profile/SavedRouteItemClient.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { Navigation } from "lucide-react";
+
+interface SavedRouteLinkProps {
+  routeId: string;
+}
+
+export default function SavedRouteLink({
+  routeId: _routeId,
+}: SavedRouteLinkProps) {
+  // This could handle navigation or tracking in the future
+  return (
+    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-emerald-50 text-[#2bee6c] transition-colors group-hover:bg-[#2bee6c] group-hover:text-white">
+      <Navigation className="h-5 w-5" />
+    </div>
+  );
+}

client/components/profile/SavedRoutes.tsx

@@ -1,75 +1,121 @@
-import { Clock, MapPin, Navigation } from "lucide-react";
+import { cookies } from "next/headers";
+import Link from "next/link";
 
-const savedRoutes = [
-  {
-    name: "Home to Office",
-    from: "Connaught Place",
-    to: "Cyber City, Gurugram",
-    aqiScore: 62,
-    lastUsed: "Today",
-  },
-  {
-    name: "Morning Jog Route",
-    from: "Lodhi Garden Gate 1",
-    to: "Lodhi Garden Gate 3",
-    aqiScore: 45,
-    lastUsed: "Yesterday",
-  },
-  {
-    name: "Weekend Market",
-    from: "Sarojini Nagar Metro",
-    to: "Sarojini Nagar Market",
-    aqiScore: 89,
-    lastUsed: "3 days ago",
-  },
-];
+import { Clock, Inbox, MapPin } from "lucide-react";
+
+import type { ISavedRoute } from "../saved-routes/types";
+import SavedRouteItemClient from "./SavedRouteItemClient";
 
 function getAqiBadge(aqi: number) {
-  if (aqi <= 50) return { label: "Good", color: "bg-green-100 text-green-700" };
+  if (aqi <= 50)
+    return { label: "Good", color: "bg-emerald-100 text-emerald-700" };
   if (aqi <= 100)
     return { label: "Moderate", color: "bg-yellow-100 text-yellow-700" };
   return { label: "Poor", color: "bg-red-100 text-red-700" };
 }
 
-export default function SavedRoutes() {
+async function getTopRoutes(): Promise<ISavedRoute[]> {
+  const cookieStore = await cookies();
+  const refreshToken = cookieStore.get("refreshToken");
+
+  if (!refreshToken) return [];
+
+  try {
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/v1/saved-routes`,
+      {
+        headers: {
+          Cookie: `refreshToken=${refreshToken.value}`,
+        },
+        next: { revalidate: 0 }, // Ensure fresh data
+      }
+    );
+
+    if (!res.ok) return [];
+    const data = await res.json();
+    return data.success && data.routes ? data.routes.slice(0, 3) : [];
+  } catch (error) {
+    console.error("Failed to fetch routes on server:", error);
+    return [];
+  }
+}
+
+export default async function SavedRoutes() {
+  const routes = await getTopRoutes();
+
+  if (routes.length === 0) {
+    return (
+      <div className="mt-6 rounded-2xl border border-slate-200 bg-white p-8 text-center shadow-sm">
+        <div className="flex flex-col items-center justify-center">
+          <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-slate-50">
+            <Inbox className="h-8 w-8 text-slate-300" />
+          </div>
+          <h3 className="text-lg font-semibold text-slate-900">
+            No Routes Found
+          </h3>
+          <p className="mx-auto mt-2 max-w-xs text-sm text-slate-500">
+            You haven&apos;t saved any routes yet. Start exploring to find the
+            cleanest paths for your journey.
+          </p>
+          <Link
+            href="/home"
+            className="mt-6 inline-block rounded-xl bg-[#2bee6c] px-6 py-2.5 text-sm font-bold text-[#102216] shadow-md shadow-[#2bee6c]/10 transition-all hover:opacity-90 active:scale-95"
+          >
+            Find a Route
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="mt-6 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
       <div className="mb-4 flex items-center justify-between">
         <h3 className="text-lg font-semibold text-slate-900">Saved Routes</h3>
-        <span className="text-sm text-slate-400">
-          {savedRoutes.length} routes
+        <span className="rounded-full bg-slate-50 px-2 py-1 text-xs font-medium text-slate-400">
+          Showing Top {routes.length}
         </span>
       </div>
       <div className="space-y-3">
-        {savedRoutes.map((route) => {
-          const badge = getAqiBadge(route.aqiScore);
+        {routes.map((route) => {
+          const aqi = route.routes?.[0]?.lastComputedScore ?? 0;
+          const badge = getAqiBadge(aqi);
+
+          const date = new Date(route.updatedAt);
+          const lastUsed = date.toLocaleDateString("en-IN", {
+            day: "numeric",
+            month: "short",
+          });
+
           return (
-            <div
-              key={route.name}
-              className="flex items-center gap-4 rounded-xl border border-slate-100 p-4 transition-colors hover:bg-slate-50"
+            <Link
+              key={route._id}
+              href={`/saved-routes?id=${route._id}`}
+              className="group flex items-center gap-4 rounded-xl border border-slate-100 p-4 transition-all hover:border-[#2bee6c]/30 hover:bg-slate-50/50"
             >
-              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-emerald-50">
-                <Navigation className="text-bc-primary h-5 w-5" />
-              </div>
+              <SavedRouteItemClient routeId={route._id} />
               <div className="min-w-0 flex-1">
-                <p className="font-medium text-slate-900">{route.name}</p>
-                <p className="truncate text-sm text-slate-500">
+                <p className="truncate font-semibold text-slate-900">
+                  {route.name || "Untitled Route"}
+                </p>
+                <p className="mt-0.5 truncate text-xs text-slate-500">
                   <MapPin className="mr-1 inline h-3 w-3" />
-                  {route.from} → {route.to}
+                  {route.from.address.split(",")[0]} →{" "}
+                  {route.to.address.split(",")[0]}
                 </p>
               </div>
-              <div className="flex shrink-0 flex-col items-end gap-1">
+              <div className="flex shrink-0 flex-col items-end gap-1.5">
                 <span
-                  className={`rounded-full px-2 py-0.5 text-xs font-medium ${badge.color}`}
+                  className={`rounded-full px-2.5 py-1 text-[10px] font-bold ${badge.color} border border-current opacity-90`}
                 >
-                  AQI {route.aqiScore} · {badge.label}
+                  AQI {aqi} · {badge.label}
                 </span>
-                <span className="flex items-center gap-1 text-xs text-slate-400">
+                <span className="flex items-center gap-1 text-[10px] font-medium text-slate-400">
                   <Clock className="h-3 w-3" />
-                  {route.lastUsed}
+                  {lastUsed}
                 </span>
               </div>
-            </div>
+            </Link>
           );
         })}
       </div>

client/components/routes/RouteDiscoveryPanel.tsx

@@ -1,13 +1,12 @@
 "use client";
 
-import { useState } from "react";
-
 import { useRouter } from "next/navigation";
 
 import {
-  Activity,
   Bike,
+  Bookmark,
   Car,
+  ChevronLeft,
   CircleDot,
   Info,
   MapPin,
@@ -24,6 +23,8 @@ type RouteDiscoveryPanelProps = {
   onModeChange: (mode: TravelMode) => void;
   routeName: string;
   onRouteNameChange: (name: string) => void;
+  onSaveRoute: () => void;
+  canSave: boolean;
 };
 
 export default function RouteDiscoveryPanel({
@@ -33,6 +34,8 @@ export default function RouteDiscoveryPanel({
   onModeChange,
   routeName,
   onRouteNameChange,
+  onSaveRoute,
+  canSave,
 }: RouteDiscoveryPanelProps) {
   const router = useRouter();
 
@@ -43,13 +46,24 @@ export default function RouteDiscoveryPanel({
   return (
     <aside className="absolute top-6 left-6 z-40 w-80">
       <div className="flex flex-col overflow-hidden rounded-xl border border-white bg-white/95 shadow-2xl backdrop-blur-xl dark:border-slate-700 dark:bg-slate-900/95">
-        <div className="border-b border-slate-100 p-5 dark:border-slate-800">
-          <h1 className="mb-1 text-lg font-bold text-slate-800 dark:text-white">
-            Route Discovery
-          </h1>
-          <p className="text-xs text-slate-500 dark:text-slate-400">
-            Find the path with lowest pollution
-          </p>
+        <div className="flex items-center justify-between border-b border-slate-100 p-5 dark:border-slate-800">
+          <div className="flex items-center justify-center gap-3">
+            <button
+              onClick={handleChangeRoute}
+              className="flex items-center justify-center rounded-lg bg-slate-100 p-2 text-slate-600 transition-all hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700"
+              title="Change Route"
+            >
+              <ChevronLeft size={18} />
+            </button>
+            <div>
+              <h1 className="mb-1 text-lg font-bold text-slate-800 dark:text-white">
+                Route Discovery
+              </h1>
+              <p className="text-xs text-slate-500 dark:text-slate-400">
+                Find the path with lowest pollution
+              </p>
+            </div>
+          </div>
         </div>
 
         <div className="space-y-5 overflow-y-auto p-5">
@@ -166,11 +180,16 @@ export default function RouteDiscoveryPanel({
 
         <div className="border-t border-slate-100 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-800/50">
           <button
-            onClick={handleChangeRoute}
-            className="flex w-full items-center justify-center gap-2 rounded-xl bg-[#2bee6c] py-3.5 font-bold text-slate-900 shadow-lg shadow-[#2bee6c]/20 transition-all hover:bg-[#2bee6c]/90"
+            onClick={onSaveRoute}
+            disabled={!canSave}
+            className={`flex w-full items-center justify-center gap-2 rounded-xl py-3.5 font-bold shadow-lg transition-all ${
+              canSave
+                ? "bg-[#2bee6c] text-slate-900 shadow-[#2bee6c]/20 hover:bg-[#2bee6c]/90"
+                : "cursor-not-allowed bg-slate-200 text-slate-400 dark:bg-slate-700 dark:text-slate-500"
+            }`}
           >
-            <Activity className="h-5 w-5" />
-            Change Route
+            <Bookmark className="h-5 w-5" />
+            Save Route
           </button>
         </div>
       </div>