Organisations and new Account page

packages/frontend/src/Account.tsx

@@ -1,13 +1,15 @@
-import LogOutButton from "@/components/log-out-button";
+import { Link } from "react-router-dom";
 
 function Account() {
     return (
-        <main className="w-full h-[100vh] flex flex-col items-center justify-center gap-4 p-4">
+        <main className="w-full h-[100vh] flex flex-col items-start gap-4 p-4">
-            <h1 className="text-3xl font-bold">Account</h1>
+            <h1 className="text-3xl font-600">Account</h1>
 
             <p className="text-muted-foreground">Account page here</p>
-            
+
-            <LogOutButton />
+            <Link to="/" className="">
+                Go to Home
+            </Link>
         </main>
     );
 }

packages/frontend/src/App.tsx

@@ -1,8 +1,10 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Account from "@/Account";
 import { Auth } from "@/components/auth-provider";
+import NotFound from "@/components/NotFound";
 import { ThemeProvider } from "@/components/theme-provider";
 import Index from "@/Index";
-import Account from "@/Account";
+import Organisations from "@/Organisations";
 import Test from "@/Test";
 
 function App() {
@@ -12,8 +14,10 @@ function App() {
                 <BrowserRouter>
                     <Routes>
                         <Route path="/" element={<Index />} />
-                        <Route path="/account" element={<Account />} />
+                        <Route path="/settings/account" element={<Account />} />
+                        <Route path="/settings/organisations" element={<Organisations />} />
                         <Route path="/test" element={<Test />} />
+                        <Route path={"*"} element={<NotFound />} />
                     </Routes>
                 </BrowserRouter>
             </Auth>

packages/frontend/src/Index.tsx

@@ -8,6 +8,8 @@ import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -185,9 +187,16 @@ function Index() {
                             <SmallUserDisplay user={user} />
                         </DropdownMenuTrigger>
                         <DropdownMenuContent align={"end"}>
+                            <DropdownMenuLabel className="text-end">Settings</DropdownMenuLabel>
+                            <DropdownMenuSeparator />
                             <DropdownMenuItem asChild className="flex items-end justify-end">
-                                <Link to="/account" className="p-0 text-end">
+                                <Link to="/settings/account" className="p-0 text-end">
-                                    Settings
+                                    My Account
+                                </Link>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem asChild className="flex items-end justify-end">
+                                <Link to="/settings/organisations" className="p-0 text-end">
+                                    My Organisations
                                 </Link>
                             </DropdownMenuItem>
                         </DropdownMenuContent>

packages/frontend/src/Organisations.tsx

@@ -0,0 +1,17 @@
+import { Link } from "react-router-dom";
+
+function Organisations() {
+    return (
+        <main className="w-full h-[100vh] flex flex-col items-start gap-4 p-4">
+            <h1 className="text-3xl font-600">Organisations</h1>
+
+            <p className="text-muted-foreground">Organisations page here</p>
+
+            <Link to="/" className="">
+                Go to Home
+            </Link>
+        </main>
+    );
+}
+
+export default Organisations;