Merge pull request #5 from codersforcauses/user_page

cxdy05 · web-flow · commit e9f022bc3cf8 · 2025-12-12T12:43:08.000+08:00
Add user page frontend
diff --git a/client/src/components/ui/button_go_user_page.tsx b/client/src/components/ui/button_go_user_page.tsx
@@ -0,0 +1,41 @@
+// 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 = () => {
+  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
+        style={{
+          padding: "10px 20px",
+          marginTop: "20px",
+          backgroundColor: "#0070f3",
+          color: "white",
+          borderRadius: "5px",
+          textDecoration: "none",
+          fontSize: "1.1em",
+        }}
+      >
+        Go to Dashboard
+      </a>
+    </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,7 @@
 // this is the path to this page
 // src/pages/index.tsx
 
-import ButtonGoOrganizationDashboard from "../components/ui/button_go_organization_dashboard";
+import ButtonGoOrganizationDashboard 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
diff --git a/client/src/pages/user_page.tsx b/client/src/pages/user_page.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 DashboardPage = () => {
+  return (
+    <>
+      <Head>
+        <title>Inventory 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 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 DashboardPage;
