Added dashboard feature

website/index.html

@@ -7,7 +7,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Gabarito:wght@300;400;500;600;700&display=swap"
     />
     <link
       rel="stylesheet"

website/package.json

@@ -13,7 +13,9 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.13",
     "@mui/material": "^5.14.13",
+    "@mui/x-charts": "^6.0.0-alpha.15",
     "firebase": "^10.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

website/src/App.tsx

@@ -4,7 +4,7 @@ import { Box, Button, CircularProgress, Typography } from "@mui/material";
 import Typewriter from "typewriter-effect";
 import UserHome from "./components/UserHome";
 import Dots from "./components/Dots";
-import { auth, getUserData, githubProvider } from "./firebase";
+import { auth, getCurrentUserData, githubProvider } from "./firebase";
 import { UserData } from "./types";
 import "./App.css";
 
@@ -18,7 +18,7 @@ function App() {
   useEffect(() => {
     onAuthStateChanged(auth, async (user) => {
       if (user) {
-        setUserData(await getUserData(user.uid));
+        setUserData(await getCurrentUserData(user));
       } else {
         setUserData(undefined);
       }
@@ -39,7 +39,7 @@ function App() {
         flexDirection="column"
         gap={2}
         sx={{
-          background: loading || user ? "#2c3e50" : undefined,
+          background: loading || user ? "#0abde3" : undefined,
           position: "relative",
           overflow: "hidden",
         }}
@@ -93,7 +93,7 @@ function App() {
                 Compete with your friends to save the most energy!
               </Typography>
               <Button
-                style={{ color: "lightgrey" }}
+                style={{ color: "white" }}
                 variant="outlined"
                 onClick={() =>
                   window.open(

website/src/components/DataTable.tsx

@@ -0,0 +1,35 @@
+import { Box, Typography } from "@mui/material";
+import { useMemo } from "react";
+import DataTableEntry from "./DataTableEntry";
+
+interface IProps {
+  title: string;
+  data: [string, number[]][];
+}
+
+function DataTable(props: IProps) {
+  const data = useMemo(() => {
+    return props.data.sort(
+      (a, b) => b[1][b[1].length - 1] - a[1][a[1].length - 1]
+    );
+  }, [props.data]);
+
+  return (
+    <>
+      <Box display="flex" justifyContent="space-between" px={2} py={1}>
+        <Typography>{props.title}</Typography>
+        <Typography>Power Consumption (W)</Typography>
+      </Box>
+      {data.map((d, i) => (
+        <DataTableEntry
+          key={i}
+          name={d[0]}
+          values={d[1]}
+          color={i % 2 === 0 ? "#e6e6e6" : "whitesmoke"}
+        />
+      ))}
+    </>
+  );
+}
+
+export default DataTable;

website/src/components/DataTableEntry.tsx

@@ -0,0 +1,69 @@
+import { Box, Card, IconButton, Modal, Typography } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { LineChart } from "@mui/x-charts";
+import { useState } from "react";
+
+interface IProps {
+  color?: string;
+  name: string;
+  values: number[];
+}
+
+function DataTableEntry(props: IProps) {
+  const [open, setOpen] = useState(false);
+
+  console.log(open);
+
+  return (
+    <>
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        px={2}
+        py={1}
+        sx={{
+          background: props.color,
+          cursor: "pointer",
+        }}
+        onClick={() => setOpen(true)}
+      >
+        <Typography>{props.name}</Typography>
+        <Typography>{props.values[props.values.length - 1]}</Typography>
+      </Box>
+      <Modal open={open} onClose={() => setOpen(false)}>
+        <Card
+          elevation={8}
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%,-50%)",
+            backgroundColor: "whitesmoke",
+            borderRadius: 10,
+            width: 600,
+            padding: 16,
+          }}
+        >
+          <Box
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Typography variant="h5">{props.name}</Typography>
+            <IconButton onClick={() => setOpen(false)}>
+              <CloseIcon />
+            </IconButton>
+          </Box>
+          <LineChart
+            xAxis={[{ data: props.values.map((_, i) => i) }]}
+            series={[{ data: props.values }]}
+            width={600 - 2 * 16}
+            height={400}
+          />
+        </Card>
+      </Modal>
+    </>
+  );
+}
+
+export default DataTableEntry;