Skip to content

Add user page frontend #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cxdy05 merged 2 commits into from
Dec 12, 2025
Merged

Add user page frontend #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d708d1c
Add user page frontend
cxdy05 Dec 12, 2025
47f71de
Add user page frontend
cxdy05 Dec 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions client/src/components/ui/button_go_user_page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion client/src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
30 changes: 30 additions & 0 deletions client/src/pages/user_page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Loading