diff --git a/client/src/components/ui/button_go_user_page.tsx b/client/src/components/ui/button_go_user_page.tsx new file mode 100644 index 0000000..e4f53c4 --- /dev/null +++ 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 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 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 + + + Go to Dashboard + + + ); +}; + +// 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 index 02c599a..dae4104 100644 --- 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 new file mode 100644 index 0000000..97f3674 --- /dev/null +++ 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 ( + <> + + Inventory Dashboard + +
+ {/* 1. Navigation Bar */} + {/*
*/} + + {/* 2. Main content wrapper */} +
+ {/* Components for Statistics, Recent Activity, and Quick Actions */} +

Welcome to the Dashboard!

{" "} + {/* Add a temporary header to confirm it works */} +
+
+ + ); +}; + +// export to make the function available to other parts of the app +export default DashboardPage;