Add user page route and landing page button

cxdy05 · cxdy05 · commit 73c8d56c60f8 · 2025-12-13T14:31:55.000+08:00
diff --git a/client/src/components/ui/button_go_user_page.tsx b/client/src/components/ui/button_go_user_page.tsx
@@ -1,26 +1,9 @@
-// src/components/ui/button_go_organization_dashboard.tsx
-
-/* 
-This is the button component that will take us to the organization dashboard page
-Copy this function into its own file so it can be reused in multiple places
-*/
-
-// Next.js uses the Link component for client-side navigation
-// better and faster then <a> tags.
 import Link from "next/link";
-import React from "react";
 
-/* 
-legacyBehavior is used to enable the older behavior of Link component 
-we dont actually need to have an <a> tag inside Link cause Link itself can handle it,
-but for styling purposes we are using it here
-*/
-const ButtonGoOrganizationDashboard = () => {
+export default function ButtonGoUserPage() {
   return (
-    // Change the href to match the new page name, the name is based on the file name
-    // example: organization_dashboard.tsx -> /organization_dashboard
-    <Link href="/organization_dashboard" legacyBehavior>
-      <a
+    <Link href="/user_page">
+      <button
         style={{
           padding: "10px 20px",
           marginTop: "20px",
@@ -31,11 +14,8 @@ const ButtonGoOrganizationDashboard = () => {
           fontSize: "1.1em",
         }}
       >
-        Go to Dashboard
-      </a>
+        Go to User Page
+      </button>
     </Link>
   );
-};
-
-// Use default export so it can be easily imported into the page
-export default ButtonGoOrganizationDashboard;
+}
diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx
@@ -1,7 +1,8 @@
 // this is the path to this page
 // src/pages/index.tsx
 
-import ButtonGoOrganizationDashboard from "../components/ui/button_go_user_page";
+import ButtonGoOrganizationDashboard from "../components/ui/button_go_organization_dashboard";
+import ButtonGoUserPage from "../components/ui/button_go_user_page";
 
 // this is a react functional component
 // it returns a html element that will render the jsx inside it
@@ -26,6 +27,7 @@ const LandingPage = () => {
       */}
 
       <ButtonGoOrganizationDashboard />
+      <ButtonGoUserPage />
     </div>
   );
 };
diff --git a/client/src/pages/user_page.tsx b/client/src/pages/user_page.tsx
@@ -1,30 +1,18 @@
-// src/pages/organization_dashboard.tsx (Update the import path)
-
 import Head from "next/head";
-// The Header component is now one directory level up from 'pages',
-// so the path is '../components/Header'
-//import Header from '../components/Header';
 
 const DashboardPage = () => {
   return (
     <>
       <Head>
-        <title>Inventory Dashboard</title>
+        <title>User Page</title>
       </Head>
-      <div className="dashboard-container">
-        {/* 1. Navigation Bar */}
-        {/* <Header /> */}
-
-        {/* 2. Main content wrapper */}
-        <main className="dashboard-content">
-          {/* Components for Statistics, Recent Activity, and Quick Actions */}
-          <h1>Welcome to the Dashboard!</h1>{" "}
-          {/* Add a temporary header to confirm it works */}
+      <div className="user-container">
+        <main className="user-content">
+          <h1>Welcome to the Users Page!</h1>{" "}
         </main>
       </div>
     </>
   );
 };
 
-// export to make the function available to other parts of the app
 export default DashboardPage;
