Backbutton

frontend/src/App.jsx

@@ -11,11 +11,13 @@ import Footer from "./Components/footer";
 import ScrollRevealWrapper from "./Components/ui/ScrollRevealWrapper";
 import Loader from "./Components/ui/Loader"; // ✅ Import the Loader
 
+
 import Login from "./Components/auth/Login";
 import Register from "./Components/auth/Register";
 import Profile from "./Components/profile/Profile";
 import ProtectedRoute from "./Components/auth/ProtectedRoute";
 import Dashboard from "./Components/Dashboard";
+import PageWithBackButton from "./Components/layout/PageWithBackButton";
 
 
 // Home component that contains the main landing page content
@@ -114,18 +116,19 @@ function App() {
   return (
     <Routes>
       <Route path="/" element={<Home />} />
-      <Route path="/login" element={<Login />} />
-      <Route path="/register" element={<Register />} />
-
+      <Route path="/login" element={<PageWithBackButton><Login /></PageWithBackButton>} />
+      <Route path="/register" element={<PageWithBackButton><Register /></PageWithBackButton>} />
       <Route 
         path="/profile" 
         element={
-          <ProtectedRoute>
-            <Profile />
-          </ProtectedRoute>
+          <PageWithBackButton>
+            <ProtectedRoute>
+              <Profile />
+            </ProtectedRoute>
+          </PageWithBackButton>
         } 
       />
-      <Route path="/dashboard" element={<Dashboard />} />
+      <Route path="/dashboard" element={<PageWithBackButton><Dashboard /></PageWithBackButton>} />
     </Routes>
   );
 }

frontend/src/Components/layout/PageWithBackButton.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { useLocation } from "react-router-dom";
+import BackButton from "../ui/BackButton";
+
+/**
+ * Layout wrapper that adds a back button to all pages except home ("/").
+ * Usage: <PageWithBackButton><YourPageComponent /></PageWithBackButton>
+ */
+export default function PageWithBackButton({ children }) {
+  const location = useLocation();
+  // Hide back button on home page
+  const hideBack = location.pathname === "/";
+
+  return (
+    <>
+      {!hideBack && <BackButton />}
+      {children}
+    </>
+  );
+}

frontend/src/Components/profile/Profile.jsx

@@ -294,6 +294,7 @@ const Profile = () => {
 
   return (
     <div className="min-h-screen w-full bg-gradient-to-b from-[#E4ECF1] to-[#D2DEE7]">
+      {/* Back Button handled globally by layout */}
       {/* Navbar */}
       <Navbar />
 

frontend/src/Components/ui/BackButton.jsx

@@ -0,0 +1,33 @@
+import { useNavigate } from 'react-router-dom';
+import { Button } from '../ui/button';
+import { ArrowLeft } from 'lucide-react';
+
+/**
+ * Reusable BackButton component for navigation.
+ * Navigates to previous page or dashboard if no history.
+ *
+ * Usage: <BackButton />
+ */
+export default function BackButton({ to = '/dashboard', className = '' }) {
+  const navigate = useNavigate();
+
+  function handleBack() {
+    if (window.history.length > 2) {
+      navigate(-1);
+    } else {
+      navigate(to);
+    }
+  }
+
+  return (
+    <Button
+      onClick={handleBack}
+      variant="ghost"
+      size="icon"
+      aria-label="Go back"
+      className={`fixed top-4 left-4 z-50 rounded-full shadow-md bg-white/80 hover:bg-white dark:bg-black/60 dark:hover:bg-black/80 border border-gray-200 dark:border-gray-700 backdrop-blur-md transition-all ${className}`}
+    >
+      <ArrowLeft className="w-5 h-5 text-gray-700 dark:text-gray-200" />
+    </Button>
+  );
+}