From e6d913aa1097eb5770827ed9d5579d4f55d13cf0 Mon Sep 17 00:00:00 2001 From: Wind-Explorer Date: Wed, 17 Jul 2024 15:29:36 +0800 Subject: [PATCH] Scaffolded admin page --- client/src/App.tsx | 3 +- .../AdministratorNavigationPanel.tsx | 212 ++++++++++++++++++ ...stratorNavigationPanelNavigationButton.tsx | 28 +++ client/src/components/EcoconnectFullLogo.tsx | 9 + client/src/components/EcoconnectLogo.tsx | 9 + client/src/components/NavigationBar.tsx | 7 +- client/src/icons.tsx | 157 +++++++++++++ client/src/layouts/administrator.tsx | 28 +++ client/src/pages/AdministratorSpringboard.tsx | 111 +++++++++ 9 files changed, 558 insertions(+), 6 deletions(-) create mode 100644 client/src/components/AdministratorNavigationPanel.tsx create mode 100644 client/src/components/AdministratorNavigationPanelNavigationButton.tsx create mode 100644 client/src/components/EcoconnectFullLogo.tsx create mode 100644 client/src/components/EcoconnectLogo.tsx create mode 100644 client/src/layouts/administrator.tsx create mode 100644 client/src/pages/AdministratorSpringboard.tsx diff --git a/client/src/App.tsx b/client/src/App.tsx index 219b961..6865441 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -10,6 +10,7 @@ import CreatePostPage from "./pages/CreatePostPage"; import EditPostPage from "./pages/EditPostPage"; import SchedulePage from "./pages/SchedulePage"; import EventsPage from "./pages/EventsPage"; +import AdministratorSpringboard from "./pages/AdministratorSpringboard"; function App() { return ( @@ -19,13 +20,13 @@ function App() { } path="/signin" /> } path="/springboard" /> } path="/manage-account" /> + } path="/admin" /> } path="/community" /> } path="/createPost" /> } path="/editPost/:id" /> } path="/schedule" /> } path="/events" /> - ); } diff --git a/client/src/components/AdministratorNavigationPanel.tsx b/client/src/components/AdministratorNavigationPanel.tsx new file mode 100644 index 0000000..87549ec --- /dev/null +++ b/client/src/components/AdministratorNavigationPanel.tsx @@ -0,0 +1,212 @@ +import { + Avatar, + Button, + Card, + CircularProgress, + ScrollShadow, +} from "@nextui-org/react"; +import { + CalendarDaysIcon, + ChartBarIcon, + ClipboardDocumentListIcon, + ClockIcon, + TagIcon, + GiftTopIcon, + ChatBubbleOvalLeftIcon, + ChevronLeftIcon, +} from "../icons"; +import EcoconnectFullLogo from "./EcoconnectFullLogo"; +import { retrieveUserInformation } from "../security/users"; +import { useEffect, useState } from "react"; +import config from "../config"; +import AdministratorNavigationPanelNavigationButton from "./AdministratorNavigationPanelNavigationButton"; +import EcoconnectLogo from "./EcoconnectLogo"; + +export default function AdministratorNavigationPanel() { + const [userInformation, setUserInformation] = useState(); + const [userProfileImageURL, setUserProfileImageURL] = useState(""); + const [panelVisible, setPanelVisible] = useState(true); + const [isScrolled, setIsScrolled] = useState(false); + useEffect(() => { + retrieveUserInformation().then((value) => { + setUserInformation(value); + setUserProfileImageURL( + `${config.serverAddress}/users/profile-image/${value.id}` + ); + }); + const handleScroll = () => { + setIsScrolled(window.scrollY > 10); + }; + + window.addEventListener("scroll", handleScroll); + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, []); + return ( +
+
+
+ +
+
+ + {/* Panel */} +
+
+ +
+
+
+ +

+ administrators +

+
+ +
+ {userInformation && ( +
+ +
+
+

+ Events +

+ } + onClickRef="#" + /> +
+
+

+ Community Forums +

+ } + onClickRef="#" + /> + } + onClickRef="#" + /> +
+
+

+ Bill Contest +

+ } + onClickRef="#" + /> + } + onClickRef="#" + /> +
+
+

+ Karang Guni +

+ } + onClickRef="#" + /> + } + onClickRef="#" + /> +
+
+

Users

+ } + onClickRef="#" + /> +
+
+ +
+ +
+
+ )} + {!userInformation && ( +
+
+ +
+
+ )} +
+ +
+
+ ); +} diff --git a/client/src/components/AdministratorNavigationPanelNavigationButton.tsx b/client/src/components/AdministratorNavigationPanelNavigationButton.tsx new file mode 100644 index 0000000..ec5ff28 --- /dev/null +++ b/client/src/components/AdministratorNavigationPanelNavigationButton.tsx @@ -0,0 +1,28 @@ +import { Button } from "@nextui-org/react"; +import React from "react"; +import { useNavigate } from "react-router-dom"; + +export default function AdministratorNavigationPanelNavigationButton({ + text, + icon, + onClickRef, +}: { + text: string; + icon: React.JSX.Element; + onClickRef: string; +}) { + const navigate = useNavigate(); + return ( + + ); +} diff --git a/client/src/components/EcoconnectFullLogo.tsx b/client/src/components/EcoconnectFullLogo.tsx new file mode 100644 index 0000000..bbae06b --- /dev/null +++ b/client/src/components/EcoconnectFullLogo.tsx @@ -0,0 +1,9 @@ +export default function EcoconnectFullLogo() { + return ( + ecoconnect logo + ); +} diff --git a/client/src/components/EcoconnectLogo.tsx b/client/src/components/EcoconnectLogo.tsx new file mode 100644 index 0000000..91dfa4e --- /dev/null +++ b/client/src/components/EcoconnectLogo.tsx @@ -0,0 +1,9 @@ +export default function EcoconnectLogo() { + return ( + ecoconnect logo + ); +} diff --git a/client/src/components/NavigationBar.tsx b/client/src/components/NavigationBar.tsx index 408e929..8121eef 100644 --- a/client/src/components/NavigationBar.tsx +++ b/client/src/components/NavigationBar.tsx @@ -18,6 +18,7 @@ import config from "../config"; import { retrieveUserInformation } from "../security/users"; import { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; +import EcoconnectFullLogo from "./EcoconnectFullLogo"; export default function NavigationBar() { let [userProfileImageURL, setUserProfileImageURL] = useState(""); @@ -69,11 +70,7 @@ export default function NavigationBar() { navigate("/"); }} > - ecoconnect logo +
+ } + onPress={() => { + navigate("/manage-account/"); + }} + > + Manage your account + + + + +
+ +
+

Statistics Overview

+
+
+
+

User Count

+

(past 30 days)

+
+

+ Total: 2139 users +

+
+
+ {/* TODO: Graph */} +

GRAPH HERE

+
+
+
+
+

Population Distribution

+
+
+ {/* TODO: Graph */} +

GRAPH HERE

+
+
+
+ + + + )} + + ); +}