Add navigation controls to go from the "dashboard" < -- > grant list

backend/dist/auth/auth.controller.js

@@ -1,5 +1,4 @@
 "use strict";
-// src/auth/auth.controller.ts
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

frontend/src/Account.tsx

@@ -0,0 +1,57 @@
+import { observer } from "mobx-react-lite";
+import { useAuthContext } from "./context/auth/authContext";
+import { logoutUser } from "./external/bcanSatchel/actions";
+import Profile from "./Profile";
+import { Link } from "react-router-dom";
+
+const Account = observer(() => {
+  const { user } = useAuthContext();
+
+  const handleLogout = () => {
+    logoutUser();
+  };
+
+  return (
+    <div
+      style={{
+        padding: "20px",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-end",
+      }}
+    >
+      <div>
+        <Link style={{ color: "white" }} to="/grant-info">
+          <button
+            style={{
+              padding: "10px",
+              fontSize: "16px",
+              marginRight: "5px",
+              backgroundColor: "black",
+              color: "white",
+            }}
+          >
+            Home
+          </button>
+        </Link>
+        <button
+          onClick={handleLogout}
+          style={{
+            padding: "10px",
+            fontSize: "16px",
+            marginBottom: "10px", // Adds space below the button
+            backgroundColor: "black",
+            color: "white",
+          }}
+        >
+          Logout
+        </button>
+      </div>
+      <h1>Welcome, {user?.userId}</h1>
+
+      <Profile />
+    </div>
+  );
+});
+
+export default Account;

frontend/src/App.tsx

@@ -1,51 +1,56 @@
-import './App.css';
+import "./App.css";
 // Components
-import Login from './Login';
-import Register from './Register';
-import Dashboard from './Dashboard';
+import Login from "./Login";
+import Register from "./Register";
+import Account from "./Account.tsx";
 import GrantPage from "./grant-info/components/GrantPage.tsx";
 // Libraries
-import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
-import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
-import { observer } from 'mobx-react-lite';
+import { ChakraProvider, defaultSystem } from "@chakra-ui/react";
+import {
+  BrowserRouter as Router,
+  Route,
+  Routes,
+  Navigate,
+} from "react-router-dom";
+import { observer } from "mobx-react-lite";
 // Register store and mutators
-import './external/bcanSatchel/mutators';
-import { useAuthContext } from './context/auth/authContext';
-
+import "./external/bcanSatchel/mutators";
+import { useAuthContext } from "./context/auth/authContext";
 
 const App = observer(() => {
-  const { isAuthenticated } = useAuthContext()
+  const { isAuthenticated } = useAuthContext();
 
   return (
     <Router>
       <ChakraProvider value={defaultSystem}>
-      < div className="app-container">
-      <Routes>
-        <Route
-          path="/login"
-          element={isAuthenticated ? <Navigate to="/dashboard" /> : <Login />}
-        />
-        <Route
-          path="/register"
-          element={isAuthenticated ? <Navigate to="/dashboard" /> : <Register />}
-        />
-        <Route
-          path="/dashboard"
-          element={isAuthenticated ? <Dashboard /> : <Navigate to="/login" />}
-        />
-          <Route
-              path='/grant-info'
-              element={<GrantPage/>}
-          />
-          <Route
-          path="*"
-          element={<Navigate to={isAuthenticated ? '/dashboard' : '/login'} />}
-        />
-      </Routes>
-      </div>
+        <div className="app-container">
+          <Routes>
+            <Route
+              path="/login"
+              element={isAuthenticated ? <Navigate to="/account" /> : <Login />}
+            />
+            <Route
+              path="/register"
+              element={
+                isAuthenticated ? <Navigate to="/account" /> : <Register />
+              }
+            />
+            <Route
+              path="/account"
+              element={isAuthenticated ? <Account /> : <Navigate to="/login" />}
+            />
+            <Route path="/grant-info" element={<GrantPage />} />
+            <Route
+              path="*"
+              element={
+                <Navigate to={isAuthenticated ? "/account" : "/login"} />
+              }
+            />
+          </Routes>
+        </div>
       </ChakraProvider>
     </Router>
   );
 });
 
-export default App;
+export default App;

frontend/src/Login.tsx

@@ -1,70 +1,86 @@
-import React, { useState } from 'react';
-import { useAuthContext } from './context/auth/authContext'
-import { observer } from 'mobx-react-lite';
-import { useNavigate } from 'react-router-dom';
-import './external/bcanSatchel/mutators';
+import React, { useState } from "react";
+import { useAuthContext } from "./context/auth/authContext";
+import { observer } from "mobx-react-lite";
+import { useNavigate } from "react-router-dom";
+import "./external/bcanSatchel/mutators";
 
 const Login = observer(() => {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
   const navigate = useNavigate();
   const { login } = useAuthContext();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     try {
-        await login(username, password);
-        navigate('/dashboard');
+      await login(username, password);
+      navigate("/account");
     } catch (error) {
-      console.error('Error during login:', error);
-      alert('An error occurred while logging in. Please try again later.');
+      console.error("Error during login:", error);
+      alert("An error occurred while logging in. Please try again later.");
     }
   };
 
   return (
-    <form onSubmit={handleSubmit} style={{ maxWidth: '400px', 
-                                           margin: '0 auto', 
-                                           justifyContent: 'center', 
-                                           alignItems: 'center', 
-                                           border: '1px solid #ccc', 
-                                           borderRadius: '8px', 
-                                           padding: '20px 30px'}}>
+    <form
+      onSubmit={handleSubmit}
+      style={{
+        maxWidth: "400px",
+        margin: "0 auto",
+        justifyContent: "center",
+        alignItems: "center",
+        border: "1px solid #ccc",
+        borderRadius: "8px",
+        padding: "20px 30px",
+      }}
+    >
       <h2>Login</h2>
       <div>
-        <label style={{ display: 'block', textAlign: 'left' }}>Username</label>
+        <label style={{ display: "block", textAlign: "left" }}>Username</label>
         <input
           type="text"
           value={username}
           onChange={(e) => setUsername(e.target.value)}
           required
-          style={{width: '90%', 
-                  padding: '8px', 
-                  margin: '8px 0'}}
+          style={{ width: "90%", padding: "8px", margin: "8px 0" }}
         />
       </div>
       <div>
-        <label style={{ display: 'block', textAlign: 'left' }} >Password</label>
+        <label style={{ display: "block", textAlign: "left" }}>Password</label>
         <input
           type="password"
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           required
-          style={{ width: '90%', padding: '8px', margin: '8px 0'}}
+          style={{ width: "90%", padding: "8px", margin: "8px 0" }}
         />
-
       </div>
-      <button 
-          type="submit" 
-          style={{ padding: '8px', width :'100%', margin: '8px 0', backgroundColor: 'black', color: 'white'}}>
-          Login
+      <button
+        type="submit"
+        style={{
+          padding: "8px",
+          width: "100%",
+          margin: "8px 0",
+          backgroundColor: "black",
+          color: "white",
+        }}
+      >
+        Login
       </button>
-      <button 
-          type="submit" 
-          style={{ padding: '8px', width :'100%', margin: '8px 0', backgroundColor: 'white', color: 'black'}}>
-          Forgot Password?
+      <button
+        type="submit"
+        style={{
+          padding: "8px",
+          width: "100%",
+          margin: "8px 0",
+          backgroundColor: "white",
+          color: "black",
+        }}
+      >
+        Forgot Password?
       </button>
     </form>
   );
 });
 
-export default Login;
+export default Login;