Merge pull request #7 from codersforcauses/user_dashboard

cxdy05 · web-flow · commit c1c4ddb62af4 · 2025-12-13T14:51:26.000+08:00
Adding User Dashboard Page
diff --git a/client/src/components/ui/button_go_user_dashboard.tsx b/client/src/components/ui/button_go_user_dashboard.tsx
@@ -0,0 +1,41 @@
+// src/components/ui/button_go_user_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 ButtonGoUserDashboard = () => {
+  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="/user_dashboard" legacyBehavior>
+      <a
+        style={{
+          padding: "10px 20px",
+          marginTop: "20px",
+          backgroundColor: "#0070f3",
+          color: "white",
+          borderRadius: "5px",
+          textDecoration: "none",
+          fontSize: "1.1em",
+        }}
+      >
+        Go to User Dashboard
+      </a>
+    </Link>
+  );
+};
+
+// Use default export so it can be easily imported into the page
+export default ButtonGoUserDashboard;
diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx
@@ -1,6 +1,7 @@
 // this is the path to this page
 // src/pages/index.tsx
 
+import ButtonGoUserDashboard from "../components/ui/button_go_user_dashboard";
 import ButtonGoOrganizationDashboard from "../components/ui/button_go_organization_dashboard";
 import ButtonGoUserPage from "../components/ui/button_go_user_page";
 
@@ -27,6 +28,7 @@ const LandingPage = () => {
       */}
 
       <ButtonGoOrganizationDashboard />
+      <ButtonGoUserDashboard />
       <ButtonGoUserPage />
     </div>
   );
diff --git a/client/src/pages/user_dashboard.tsx b/client/src/pages/user_dashboard.tsx
@@ -0,0 +1,30 @@
+// 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 UserDashboardPage = () => {
+  return (
+    <>
+      <Head>
+        <title>User Dashboard</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 User Dashboard!</h1>{" "}
+          {/* Add a temporary header to confirm it works */}
+        </main>
+      </div>
+    </>
+  );
+};
+
+// export to make the function available to other parts of the app
+export default UserDashboardPage;
