109 lines
3.9 KiB
TypeScript
109 lines
3.9 KiB
TypeScript
import { useNavigate } from "react-router-dom";
|
|
import { useEffect, useState } from "react";
|
|
import { getTimeOfDay } from "../utilities";
|
|
import { retrieveUserInformation } from "../security/users";
|
|
import UserProfilePicture from "../components/UserProfilePicture";
|
|
import { Button, Card } from "@nextui-org/react";
|
|
import { PencilSquareIcon } from "../icons";
|
|
import EcoconnectFullLogo from "../components/EcoconnectFullLogo";
|
|
|
|
export default function AdministratorSpringboard() {
|
|
const navigate = useNavigate();
|
|
let accessToken = localStorage.getItem("accessToken");
|
|
if (!accessToken) {
|
|
navigate("/signin");
|
|
}
|
|
const [userInformation, setUserInformation] = useState<any>();
|
|
let timeOfDay = getTimeOfDay();
|
|
|
|
let greeting = "";
|
|
if (timeOfDay === 0) {
|
|
greeting = "Good morning";
|
|
} else if (timeOfDay === 1) {
|
|
greeting = "Good afternoon";
|
|
} else if (timeOfDay === 2) {
|
|
greeting = "Good evening";
|
|
}
|
|
|
|
useEffect(() => {
|
|
retrieveUserInformation()
|
|
.then((response) => {
|
|
if (response.accountType != 2) {
|
|
navigate("/");
|
|
}
|
|
setUserInformation(response);
|
|
})
|
|
.catch(() => {
|
|
navigate("/signin");
|
|
});
|
|
return;
|
|
}, []);
|
|
return (
|
|
<div>
|
|
{userInformation && (
|
|
<div className="flex flex-col w-full pb-2">
|
|
<div className="flex flex-row justify-between p-8 pt-14 *:my-auto">
|
|
<div className="flex flex-col gap-3">
|
|
<p className="text-3xl font-bold">
|
|
{greeting}, {userInformation.firstName}.
|
|
</p>
|
|
<div className="flex flex-row gap-2 *:my-auto">
|
|
<p className="text-xl">A staff member of</p>
|
|
<EcoconnectFullLogo />
|
|
</div>
|
|
<p className="text-primary-500">{userInformation.email}</p>
|
|
<Button
|
|
className="w-max"
|
|
size="sm"
|
|
variant="flat"
|
|
color="primary"
|
|
startContent={
|
|
<div className="scale-80">
|
|
<PencilSquareIcon />
|
|
</div>
|
|
}
|
|
onPress={() => {
|
|
navigate("/manage-account");
|
|
}}
|
|
>
|
|
Manage your account
|
|
</Button>
|
|
</div>
|
|
<UserProfilePicture userId={userInformation.id} editable={false} />
|
|
</div>
|
|
<div className="flex flex-row justify-stretch *:w-full *:h-56 w-full p-4 pt-0 gap-4"></div>
|
|
<Card className="w-full bg-primary-500 p-8 text-white rounded-r-none">
|
|
<div className="flex flex-col gap-4">
|
|
<p className="font-bold text-4xl">Statistics Overview</p>
|
|
<div className="h-[500px] w-full bg-primary-600 rounded-2xl flex flex-row p-6">
|
|
<div className="w-60 flex flex-col justify-between">
|
|
<div className="flex flex-col">
|
|
<p className="text-2xl">User Count</p>
|
|
<p className="opacity-70">(past 30 days)</p>
|
|
</div>
|
|
<p className="text-lg">
|
|
Total: <span className="font-bold">2139</span> users
|
|
</p>
|
|
</div>
|
|
<div className="w-full h-full bg-white rounded-xl">
|
|
{/* TODO: Graph */}
|
|
<p className="text-black">GRAPH HERE</p>
|
|
</div>
|
|
</div>
|
|
<div className="h-[500px] w-full bg-primary-600 rounded-2xl flex flex-row p-6">
|
|
<div className="w-60 flex flex-col justify-between">
|
|
<p className="text-2xl">Population Distribution</p>
|
|
</div>
|
|
<div className="w-full h-full bg-white rounded-xl">
|
|
{/* TODO: Graph */}
|
|
<p className="text-black">GRAPH HERE</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|