diff --git a/client/src/components/ui/button_go_user_dashboard.tsx b/client/src/components/ui/button_go_user_dashboard.tsx new file mode 100644 index 0000000..0e476c9 --- /dev/null +++ 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 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 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 + + + Go to User Dashboard + + + ); +}; + +// 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 index 8355932..3437499 100644 --- 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 = () => { */} + ); diff --git a/client/src/pages/user_dashboard.tsx b/client/src/pages/user_dashboard.tsx new file mode 100644 index 0000000..e5a6572 --- /dev/null +++ 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 ( + <> + + User Dashboard + +
+ {/* 1. Navigation Bar */} + {/*
*/} + + {/* 2. Main content wrapper */} +
+ {/* Components for Statistics, Recent Activity, and Quick Actions */} +

Welcome to the User Dashboard!

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