Skip to content

Commit e9ce76a

Browse files
sylee212sylee212
authored
Merge pull request #4 from codersforcauses/Organization_Dashboard
Organization dashboard
2 parents e0ad3ca + 744f0fc commit e9ce76a

5 files changed

Lines changed: 151 additions & 31 deletions

File tree

‎client/package-lock.json‎

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/src/components/ui/button_go_organization_dashboard.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// src/components/ui/button_go_organization_dashboard.tsx
2+
3+
/*
4+
This is the button component that will take us to the organization dashboard page
5+
Copy this function into its own file so it can be reused in multiple places
6+
*/
7+
8+
// Next.js uses the Link component for client-side navigation
9+
// better and faster then <a> tags.
10+
import Link from "next/link";
11+
import React from "react";
12+
13+
/*
14+
legacyBehavior is used to enable the older behavior of Link component
15+
we dont actually need to have an <a> tag inside Link cause Link itself can handle it,
16+
but for styling purposes we are using it here
17+
*/
18+
const ButtonGoOrganizationDashboard = () => {
19+
return (
20+
// Change the href to match the new page name, the name is based on the file name
21+
// example: organization_dashboard.tsx -> /organization_dashboard
22+
<Link href="/organization_dashboard" legacyBehavior>
23+
<a
24+
style={{
25+
padding: "10px 20px",
26+
marginTop: "20px",
27+
backgroundColor: "#0070f3",
28+
color: "white",
29+
borderRadius: "5px",
30+
textDecoration: "none",
31+
fontSize: "1.1em",
32+
}}
33+
>
34+
Go to Dashboard
35+
</a>
36+
</Link>
37+
);
38+
};
39+
40+
// Use default export so it can be easily imported into the page
41+
export default ButtonGoOrganizationDashboard;

‎client/src/pages/index.tsx‎

Lines changed: 28 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,33 @@
1-
import { Inter as FontSans } from "next/font/google";
2-
import { useState } from "react";
1+
// this is the path to this page
2+
// src/pages/index.tsx
33

4-
import { usePings } from "@/hooks/pings";
5-
import { cn } from "@/lib/utils";
6-
7-
import { Button } from "../components/ui/button";
8-
9-
const fontSans = FontSans({
10-
subsets: ["latin"],
11-
variable: "--font-sans",
12-
});
13-
14-
export default function Home() {
15-
const [clicked, setClicked] = useState(false);
16-
const { data, isLoading } = usePings({
17-
enabled: clicked,
18-
});
4+
import ButtonGoOrganizationDashboard from "../components/ui/button_go_organization_dashboard";
195

6+
// this is a react functional component
7+
// it returns a html element that will render the jsx inside it
8+
const LandingPage = () => {
209
return (
21-
<main
22-
className={cn(
23-
"flex min-h-screen flex-col items-center gap-4 p-24 font-sans",
24-
fontSans.variable,
25-
)}
10+
<div
11+
// Simple inline styles for centering content
12+
style={{
13+
display: "flex",
14+
flexDirection: "column",
15+
alignItems: "center",
16+
justifyContent: "center",
17+
minHeight: "100vh",
18+
textAlign: "center",
19+
}}
2620
>
27-
<h1 className="text-3xl text-primary">Test title</h1>
28-
<Button onClick={() => setClicked(true)}>
29-
{isLoading ? "Loading" : "Ping"}
30-
</Button>
31-
<p>
32-
Response from server: <span>{data as string}</span>
33-
</p>
34-
</main>
21+
<h1>Welcome to the Inventory Management System</h1>
22+
<p>This is the main landing page for your application.</p>
23+
24+
{/* The Next.js Link component handles navigation.
25+
href="/dashboard" will take us to the page we just renamed.
26+
*/}
27+
28+
<ButtonGoOrganizationDashboard />
29+
</div>
3530
);
36-
}
31+
};
32+
33+
export default LandingPage;

‎client/src/pages/organization_dashboard.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// src/pages/organization_dashboard.tsx (Update the import path)
2+
3+
import Head from "next/head";
4+
// The Header component is now one directory level up from 'pages',
5+
// so the path is '../components/Header'
6+
//import Header from '../components/Header';
7+
8+
const DashboardPage = () => {
9+
return (
10+
<>
11+
<Head>
12+
<title>Inventory Dashboard</title>
13+
</Head>
14+
<div className="dashboard-container">
15+
{/* 1. Navigation Bar */}
16+
{/* <Header /> */}
17+
18+
{/* 2. Main content wrapper */}
19+
<main className="dashboard-content">
20+
{/* Components for Statistics, Recent Activity, and Quick Actions */}
21+
<h1>Welcome to the Dashboard!</h1>{" "}
22+
{/* Add a temporary header to confirm it works */}
23+
</main>
24+
</div>
25+
</>
26+
);
27+
};
28+
29+
// export to make the function available to other parts of the app
30+
export default DashboardPage;

‎client/src/pages/original_index.txt‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Inter as FontSans } from "next/font/google";
2+
import { useState } from "react";
3+
4+
import { usePings } from "@/hooks/pings";
5+
import { cn } from "@/lib/utils";
6+
7+
import { Button } from "../components/ui/button";
8+
9+
const fontSans = FontSans({
10+
subsets: ["latin"],
11+
variable: "--font-sans",
12+
});
13+
14+
export default function Home() {
15+
const [clicked, setClicked] = useState(false);
16+
const { data, isLoading } = usePings({
17+
enabled: clicked,
18+
});
19+
20+
return (
21+
<main
22+
className={cn(
23+
"flex min-h-screen flex-col items-center gap-4 p-24 font-sans",
24+
fontSans.variable,
25+
)}
26+
>
27+
<h1 className="text-3xl text-primary">Test title</h1>
28+
<Button onClick={() => setClicked(true)}>
29+
{isLoading ? "Loading" : "Ping"}
30+
</Button>
31+
<p>
32+
Response from server: <span>{data as string}</span>
33+
</p>
34+
</main>
35+
);
36+
}

0 commit comments

Comments
 (0)