- {/* 1. Navigation Bar */}
- {/*
*/}
+ {/* 1. Navigation Bar */}
+
+ {/* Page background */}
+
{/* 2. Main content wrapper */}
-
+
{/* Components for Statistics, Recent Activity, and Quick Actions */}
- Welcome to the User Dashboard!
{" "}
- {/* Add a temporary header to confirm it works */}
+
+ Welcome to the User Dashboard!
+
+
+ {/* Dashboard Grid */}
+
+ {/* Inventory Panel (Scrollable) */}
+
+
+
My Inventory
+ {/* route to inventory page TODO:*/}
+
+
+
+
+
+
+
+ {/* Top right panel */}
+
+
+
Due Soon
+ {/* route to inventory page TODO: (or just regular inventory page ig) */}
+
+
+
+
+
+
+
+ {/* Middle right panel */}
+
+
+
My Groups
+ {/* route to groups page TODO:*/}
+
+
+
+
+
+
+
+ {/* Bottom right panel */}
+
+
+
My Friends
+ {/* route to groups page TODO:*/}
+
+
+
+
+
+
+
diff --git a/client/src/pages/user_friends.tsx b/client/src/pages/user_friends.tsx
new file mode 100644
index 0000000..660c19c
--- /dev/null
+++ b/client/src/pages/user_friends.tsx
@@ -0,0 +1,58 @@
+// src/pages/user_dashboard.tsx (Update the import path)
+//import "";
+
+import Head from "next/head";
+import { useState } from "react";
+
+// import {useState, useEffect} from "react";
+import UserFriendsSearchPopup from "../components/ui/popups/user_friends_search_popup";
+import UserNavbar from "../components/ui/user_navbar";
+import UserFriendsTable from "../components/ui/user_tables/user_friends_table";
+
+const UserFriendsPage = () => {
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ return (
+ <>
+
+
My Friends
+
+ {/* Navbar */}
+
+ {/* Page background */}
+
+ {/* 2. Main content wrapper */}
+
+ {/* Components for Statistics, Recent Activity, and Quick Actions */}
+ My Friends
+
+ {/* Inventory Grid */}
+
+
+
+
My Friends
+
+
+
+
+
+
+
setIsModalOpen(false)}
+ />
+
+
+ );
+};
+
+// export to make the function available to other parts of the app
+export default UserFriendsPage;
diff --git a/client/src/pages/user_friends_search.tsx b/client/src/pages/user_friends_search.tsx
new file mode 100644
index 0000000..72ab289
--- /dev/null
+++ b/client/src/pages/user_friends_search.tsx
@@ -0,0 +1,34 @@
+import Head from "next/head";
+
+import UserNavbar from "../components/ui/user_navbar";
+import UserFriendSearchTable from "../components/ui/user_tables/user_friends_search_table";
+
+const UserSearchPage = () => {
+ return (
+ <>
+
+
My Inventory
+
+ {/* Navbar */}
+
+ {/* Page background */}
+
+ {/* 2. Main content wrapper */}
+
+ {/* Components for Statistics, Recent Activity, and Quick Actions */}
+ {/* Search for Friends
*/}
+
+ {/* Friend Grid */}
+
+
+
+
+ );
+};
+
+// export to make the function available to other parts of the app
+export default UserSearchPage;
diff --git a/client/src/pages/user_groups.tsx b/client/src/pages/user_groups.tsx
new file mode 100644
index 0000000..6cd15f4
--- /dev/null
+++ b/client/src/pages/user_groups.tsx
@@ -0,0 +1,42 @@
+// src/pages/user_dashboard.tsx (Update the import path)
+//import "";
+
+import Head from "next/head";
+
+import UserNavbar from "../components/ui/user_navbar";
+// import {useState, useEffect} from "react";
+import UserGroupsTable from "../components/ui/user_tables/user_groups_table";
+
+// The Header component is now one directory level up from 'pages',
+// so the path is '../components/Header'
+//import Header from '../components/Header';
+
+const UserGroupsPage = () => {
+ return (
+ <>
+
+
My Groups
+
+ {/* Page background */}
+
+
+ {/* 2. Main content wrapper */}
+
+ {/* Components for Statistics, Recent Activity, and Quick Actions */}
+ My Groups
+
+ {/* Inventory Grid */}
+
+
+
+
+ );
+};
+
+// export to make the function available to other parts of the app
+export default UserGroupsPage;
diff --git a/client/src/pages/user_inventory.tsx b/client/src/pages/user_inventory.tsx
new file mode 100644
index 0000000..dd16b8e
--- /dev/null
+++ b/client/src/pages/user_inventory.tsx
@@ -0,0 +1,38 @@
+// src/pages/user_dashboard.tsx (Update the import path)
+//import "";
+
+import Head from "next/head";
+
+import UserNavbar from "../components/ui/user_navbar";
+import UserInventoryTable from "../components/ui/user_tables/user_inventory_table";
+
+const UserInventoryPage = () => {
+ return (
+ <>
+
+
My Inventory
+
+ {/* Navbar */}
+
+ {/* Page background */}
+
+ {/* 2. Main content wrapper */}
+
+ {/* Components for Statistics, Recent Activity, and Quick Actions */}
+ My Inventory
+
+ {/* Inventory Grid */}
+
+
+
+
+ );
+};
+
+// export to make the function available to other parts of the app
+export default UserInventoryPage;
diff --git a/client/src/pages/user_login.tsx b/client/src/pages/user_login.tsx
new file mode 100644
index 0000000..c9590ff
--- /dev/null
+++ b/client/src/pages/user_login.tsx
@@ -0,0 +1,85 @@
+// import axios from "axios";
+// import { useRouter } from "next/router";
+import Link from "next/link";
+import React, { useState } from "react";
+
+import { useAuth } from "../context/AuthContext";
+
+const Login = () => {
+ const [username, setUsername] = useState("");
+ const [password, setPassword] = useState("");
+ const [error, setError] = useState("");
+
+ // Get the login function from AuthContext
+ const { login } = useAuth();
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setError("");
+
+ try {
+ // Use the context function instead of manual axios calls
+ await login(username, password);
+ // Note: Redirect is handled inside AuthContext's login function
+ // } catch (err: any) {
+ } catch (err) {
+ setError("Invalid username or password");
+ console.error("Login Error:", err);
+ }
+ };
+
+ return (
+
+
+
+
+ Sign in to your account
+
+
+
+
+
+
+ );
+};
+
+export default Login;
diff --git a/client/src/pages/user_profile_page.tsx b/client/src/pages/user_profile_page.tsx
index 8cf0c6f..f40db39 100644
--- a/client/src/pages/user_profile_page.tsx
+++ b/client/src/pages/user_profile_page.tsx
@@ -1,8 +1,21 @@
import Head from "next/head";
+import Link from "next/link";
+import { useEffect, useState } from "react";
import User_Navbar from "../components/ui/user_navbar";
+import { useAuth } from "../context/AuthContext";
+import { getFriends } from "../lib/api/friends";
+import { Friend } from "../types/friends";
export default function UserPage() {
+ const [friends, setFriends] = useState
([]);
+ const { user } = useAuth();
+
+ useEffect(() => {
+ getFriends().then((res) => {
+ setFriends(res.data.friends);
+ });
+ }, []);
return (
<>
@@ -54,7 +67,11 @@ export default function UserPage() {
{/* User details */}
- New User 12345678
+ {user?.username}
+
+ {/* Should instead be an api call for friends name of curent user profile viewed,
+ not necessarily the current logged in user, update later in backend and frontend,
+ (could update existing views with permissions of auth allowing interactivity ?? ) */}
Perth, Western Australia
@@ -69,10 +86,24 @@ export default function UserPage() {
}}
>
-
+
+
+
+
+ {/* Should instead be an api call for friends number of curent user profile viewed,
+ not necessarily the current logged in user, update later in backend and frontend,
+ and link should also point to specific page for friends of user being viewed
+ (could update existing views with permissions of auth allowing interactivity ?? ) */}
+