Skip to content

Commit

Permalink
Dashboard page
Browse files Browse the repository at this point in the history
  • Loading branch information
@karanikiotis
karanikiotis committed Oct 8, 2024
1 parent e617e87 commit 964b29d
Show file tree
Hide file tree
Showing 8 changed files with 207 additions and 29 deletions.
2 changes: 1 addition & 1 deletion src/components/GuestOnly.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { jwt } from "../utils/index.js";
const GuestOnly = ({ c }) => {
const location = useLocation();
return jwt.isAuthenticated()
? <Navigate to="/home" state={{ from: location }} />
? <Navigate to="/dashboard" state={{ from: location }} />
: c;
};

Expand Down
8 changes: 0 additions & 8 deletions src/components/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,17 +131,9 @@ const Header = ({ isAuthenticated }) => {

const pathnames = location.pathname.split("/").filter(Boolean);
const crumps = [];
crumps.push(
<CrumpLink to="/">
{"Home"}
</CrumpLink>,
);

for (const [ind, path] of pathnames.entries()) {
let text = capitalize(path);
// eslint-disable-next-line no-continue
if (path === "home") continue;

crumps.push(<CrumpLink to={`/${pathnames.slice(0, ind + 1).join("/")}`}>{text}</CrumpLink>);
}

Expand Down
6 changes: 6 additions & 0 deletions src/components/Sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,12 @@ const Sidebar = ({ isSmall: sidebarIsSmall }) => {
useEffect(() => setIsSmall(sidebarIsSmall), [sidebarIsSmall]);

const buttons = [
{
text: "Dashboard",
handler: () => {
navigate("/dashboard");
},
},
{
text: "Users",
handler: () => {
Expand Down
4 changes: 2 additions & 2 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import ResetPassword from "./screens/ResetPassword.js";
import SignUp from "./screens/SignUp.js";
import InvitedSignUp from "./screens/InvitedSignUp.js";
import Auth from "./screens/Auth.js";
import Home from "./screens/Home.js";
import Dashboard from "./screens/Dashboard.js";
import Users from "./screens/Users.js";
import { adjustColors, jwt, colorSuggestions } from "./utils/index.js";

Expand Down Expand Up @@ -94,7 +94,7 @@ const App = () => {
<Route path="reset-password" element={<GuestOnly c={<ResetPassword />} />} />
<Route path="sign-up" element={<GuestOnly c={<SignUp />} />} />
<Route path="register" element={<GuestOnly c={<InvitedSignUp />} />} />
<Route path="home" element={<Protected c={<Home />} />} />
<Route path="dashboard" element={<Protected c={<Dashboard />} />} />
<Route path="users" element={<Protected c={<Users />} />} />
<Route path="*" element={<NotFound />} />
</Routes>
Expand Down
2 changes: 1 addition & 1 deletion src/screens/Auth.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import api from "../api/index.js";
const Auth = () => {
const location = useLocation();
const { error: error_ } = useSnackbar();
const [redirectTo, setRedirectTo] = useState("/home");
const [redirectTo, setRedirectTo] = useState("/dashboard");

useEffect(() => {
try {
Expand Down
196 changes: 196 additions & 0 deletions src/screens/Dashboard.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
import { useEffect, useState } from "react";
import { Grid, Typography, Box } from "@mui/material";

import Dropdown from "../components/Dropdown.js";
import Card from "../components/Card.js";
import Plot from "../components/Plot.js";

const availableCities = ["Thessaloniki", "Athens", "Patras"];
const generateRandomData = (minimum = 0, maximum = 100) => {
return Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
};

const formatNumber = (number, symbol = "", showSign = true) => {
if (!number) return "-";

let formattedNumber = (number > 0 && showSign) ? "+" : "";
formattedNumber += number;
formattedNumber += symbol;

return formattedNumber;
};

const Dashboard = () => {
const [selectedCity, setSelectedCity] = useState("Thessaloniki");
const [data, setData] = useState({});

useEffect(() => {
const newData = {
undernourishment: {
value: generateRandomData(),
change: generateRandomData(-100, 100),
},
localFoodCropProduction: {
value: generateRandomData(0, 10_000),
change: generateRandomData(-100, 100),
},
localBreedPopulation: {
value: generateRandomData(0, 100_000),
change: generateRandomData(-100, 100),
},
livestockFarmingIndex: Array.from({ length: 7 }, () => generateRandomData(0, 100)),
dairySales: Array.from({ length: 12 }, () => generateRandomData(0, 500)),
foodSecurityIndex: Array.from({ length: 12 }, () => generateRandomData(0, 500)),
};

setData(newData);
}, [selectedCity]);

return (
<Grid container py={2} flexDirection="column">
<Typography variant="h4" gutterBottom color="white.main">
Dashboard
</Typography>

<Grid item style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", marginBottom: "20px" }}>
<Typography variant="body1" style={{ marginRight: "10px" }} color="white.main">Dashboard Area:</Typography>
<Dropdown
items={availableCities.map((city) => ({ value: city, text: city }))}
value={selectedCity}
onChange={(event) => setSelectedCity(event.target.value)}
/>
</Grid>

<Grid container spacing={2}>
<Grid item xs={12} sm={4}>
<Card title="Undernourishment">
<Box display="flex" flexDirection="column" alignItems="center">
<Typography variant="h3" fontWeight="bold" color="secondary.main">{formatNumber(data?.undernourishment?.value, "%", false)}</Typography>
<Grid item display="flex" flexDirection="row">
<Typography variant="body" color={data?.undernourishment?.change > 0 ? "success.main" : "error.main"}>
{formatNumber(data?.undernourishment?.change, "%")}
</Typography>
<Typography variant="body" color="secondary.main" ml={1}>
{"than last month"}
</Typography>
</Grid>
</Box>
</Card>
</Grid>
<Grid item xs={12} sm={4}>
<Card title="Local Food Crop Production">
<Box display="flex" flexDirection="column" alignItems="center">
<Typography variant="h3" fontWeight="bold" color="secondary.main">{formatNumber(data?.localFoodCropProduction?.value, "", false)}</Typography>
<Grid item display="flex" flexDirection="row">
<Typography variant="body" color={data?.localFoodCropProduction?.change > 0 ? "success.main" : "error.main"}>
{formatNumber(data?.localFoodCropProduction?.change, "%")}
</Typography>
<Typography variant="body" color="secondary.main" ml={1}>
{"than last month"}
</Typography>
</Grid>
</Box>
</Card>
</Grid>
<Grid item xs={12} sm={4}>
<Card title="Local Breed Population">
<Box display="flex" flexDirection="column" alignItems="center">
<Typography variant="h3" fontWeight="bold" color="secondary.main">{formatNumber(data?.localBreedPopulation?.value, "", false)}</Typography>
<Grid item display="flex" flexDirection="row">
<Typography variant="body" color={data?.localBreedPopulation?.change > 0 ? "success.main" : "error.main"}>
{formatNumber(data?.localBreedPopulation?.change, "%")}
</Typography>
<Typography variant="body" color="secondary.main" ml={1}>
{"than last month"}
</Typography>
</Grid>
</Box>
</Card>
</Grid>

<Grid item xs={12} sm={4}>
<Card
title="Livestock Farming Index"
footer={(
<Grid sx={{ width: "100%", borderTop: "1px solid gray" }}>
<Typography variant="body2" component="p" sx={{ marginTop: "10px" }}>{"🕗 averages (last month)"}</Typography>
</Grid>
)}
footerBackgroundColor="white"
footerColor="gray"
>
<Plot
data={[
{
x: ["M", "T", "W", "T", "F", "S", "S"],
y: data?.livestockFarmingIndex,
type: "bar",
color: "third",
},
]}
showLegend={false}
title="Number of livestock in supply chain"
titleColor="primary"
titleFontSize={16}
displayBar={false}
/>
</Card>
</Grid>
<Grid item xs={12} sm={4}>
<Card
title="Dairy Sales"
footer={(
<Grid sx={{ width: "100%", borderTop: "1px solid gray" }}>
<Typography variant="body2" component="p" sx={{ marginTop: "10px" }}>{"🕗 updated 4min ago"}</Typography>
</Grid>
)}
footerBackgroundColor="white"
footerColor="gray"
>
<Plot
data={[{
x: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Dec"],
y: data?.dairySales,
type: "lines+markers",
color: "third",
}]}
showLegend={false}
title="15% increase in sales this month"
titleColor="primary"
titleFontSize={16}
displayBar={false}
/>
</Card>
</Grid>
<Grid item xs={12} sm={4}>
<Card
title="Food Security Index"
footer={(
<Grid sx={{ width: "100%", borderTop: "1px solid gray" }}>
<Typography variant="body2" component="p" sx={{ marginTop: "10px" }}>{"🕗 just updated"}</Typography>
</Grid>
)}
footerBackgroundColor="white"
footerColor="gray"
>
<Plot
data={[{
x: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Dec"],
y: data?.foodSecurityIndex,
type: "lines+markers",
color: "third",
}]}
showLegend={false}
title="Number of people nourished properly"
titleColor="primary"
titleFontSize={16}
displayBar={false}
/>
</Card>
</Grid>
</Grid>
</Grid>
);
};

export default Dashboard;
16 changes: 0 additions & 16 deletions src/screens/Home.js
View file

This file was deleted.

2 changes: 1 addition & 1 deletion src/screens/SignIn.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const SignIn = () => {

useEffect(() => {
try {
sessionStorage.setItem("redirectTo", JSON.stringify(state?.from || { pathname: "/home" }));
sessionStorage.setItem("redirectTo", JSON.stringify(state?.from || { pathname: "/dashboard" }));
} catch { /** */ }
}, [state]);

Expand Down

0 comments on commit 964b29d

Please sign in to comment.