From d7243438ba4ab7b24e7fc25ef72bf5e8e5cede9d Mon Sep 17 00:00:00 2001
From: dhaval055 <dhavaldave055@gmail.com>
Date: Mon, 13 Jun 2022 15:16:35 +0530
Subject: [PATCH] added initial dashboard files

---
 frontend/src/App.jsx                 |  12 ++
 frontend/src/views/TempDashboard.jsx | 298 +++++++++++++++++++++++++++
 2 files changed, 310 insertions(+)
 create mode 100644 frontend/src/views/TempDashboard.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index a16a3302..d152d9f2 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -40,6 +40,7 @@ import { isMobile } from "react-device-detect";
 
 import detectEthereumProvider from "@metamask/detect-provider";
 import Drift from "react-driftjs";
+import DashboardPage from "./views/TempDashboard.jsx";
 
 // Production - backend proxy forwarding in nginx
 var globalUrl = window.location.origin;
@@ -643,6 +644,17 @@ const App = (message, props) => {
         	      {...props}
         	    />
         	  }
+        	/>
+			<Route
+        	  exact
+        	  path="/testdashboard"
+        	  element={
+        	    <DashboardPage
+        	      isLoaded={isLoaded}
+        	      globalUrl={globalUrl}
+        	      {...props}
+        	    />
+        	  }
         	/>
         	<Route
         	  exact
diff --git a/frontend/src/views/TempDashboard.jsx b/frontend/src/views/TempDashboard.jsx
new file mode 100644
index 00000000..f0972449
--- /dev/null
+++ b/frontend/src/views/TempDashboard.jsx
@@ -0,0 +1,298 @@
+import React from "react";
+import { Grid, Container, Divider } from "@mui/material";
+
+import { makeStyles } from "@material-ui/core/styles";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import Typography from "@material-ui/core/Typography";
+
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import Paper from "@material-ui/core/Paper";
+
+import { LineChart, LineSeries, BarChart } from "reaviz";
+import { Gridline, GridStripe } from "reaviz";
+import { GridlineSeries } from "reaviz";
+
+import InputLabel from '@material-ui/core/InputLabel';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+
+const data = [
+  {
+    key: new Date("11/29/2019"),
+    data: 10,
+  },
+  {
+    key: new Date("11/30/2019"),
+    data: 14,
+  },
+  {
+    key: new Date("12/01/2019"),
+    data: 5,
+  },
+  {
+    key: new Date("12/02/2019"),
+    data: 18,
+  },
+];
+
+const useStyles1 = makeStyles((theme) => ({
+  formControl: {
+    margin: theme.spacing(1),
+    minWidth: 120,
+  },
+  selectEmpty: {
+    marginTop: theme.spacing(2),
+  },
+}));
+
+
+const useStyles = makeStyles({
+  table: {
+    minWidth: 650,
+  },
+  root: {
+    minWidth: 275,
+  },
+  bullet: {
+    display: "inline-block",
+    margin: "0 2px",
+    transform: "scale(0.8)",
+  },
+  title: {
+    fontSize: 14,
+  },
+  pos: {
+    marginBottom: 12,
+  },
+});
+
+function createData(name, calories, fat, carbs, protein) {
+  return { name, calories, fat, carbs, protein };
+}
+
+const rows = [
+  createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
+  createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
+  createData("Eclair", 262, 16.0, 24, 6.0),
+  createData("Cupcake", 305, 3.7, 67, 4.3),
+  createData("Gingerbread", 356, 16.0, 49, 3.9),
+];
+
+const DashboardPage = () => {
+  const classes = useStyles();
+  const classes1 = useStyles1();
+
+  const [age, setAge] = React.useState(0);
+
+  const handleChange = (event) => {
+    setAge(event.target.value);
+
+  };
+
+  return (
+    <Container maxWidth="xl">
+      <Grid>
+        <Grid item xl={8} style={{"border":"20px"}}>
+          <center>
+            <Typography type="title" variant="h1" color="inherit">
+              Dashboard
+            </Typography>
+            <div style={{
+            "paddingLeft": "50px"
+          }}>
+            <FormControl className={classes1.formControl}>
+              <InputLabel id="demo-simple-select-label">Organization</InputLabel>
+              <Select
+                labelId="demo-simple-select-label"
+                onChange={handleChange}
+              >
+                <MenuItem value={10}>Ten</MenuItem>
+                <MenuItem value={20}>Twenty</MenuItem>
+                <MenuItem value={30}>Thirty</MenuItem>
+              </Select>
+            </FormControl>
+          </div>
+          </center>
+          </Grid>
+          <Divider />
+        </Grid>
+      <Grid
+        container
+        spacing={2}
+        style={{
+          maxWidth: "1250px",
+          margin: "auto auto 10px",
+          padding: "10px",
+        }}
+      >
+        <Grid item xs={4}>
+          <Card
+            className={classes.root}
+            style={{
+              color: "white",
+              backgroundColor: "RGB(31, 32, 36)",
+              height: "100px",
+              border: "2px solid rgb(197, 17, 82)",
+            }}
+          >
+            <CardContent>
+              <Typography
+                className={classes.title}
+                color="textSecondary"
+                gutterBottom
+              >
+                Total workflows executions
+              </Typography>
+              <Typography
+                variant="h1"
+                className={classes.pos}
+                color="textSecondary"
+              >
+                456
+              </Typography>
+            </CardContent>
+          </Card>
+        </Grid>
+        <Grid item xs={4}>
+          <Card
+            className={classes.root}
+            style={{
+              color: "white",
+              backgroundColor: "RGB(31, 32, 36)",
+              height: "100px",
+              border: "2px solid rgb(244, 194, 13)",
+            }}
+          >
+            <CardContent>
+              <Typography
+                className={classes.title}
+                color="textSecondary"
+                gutterBottom
+              >
+                Total Apps executions
+              </Typography>
+              <Typography
+                variant="h1"
+                className={classes.pos}
+                color="textSecondary"
+              >
+                587
+              </Typography>
+            </CardContent>
+          </Card>
+        </Grid>
+        <Grid item xs={4}>
+          <Card
+            className={classes.root}
+            style={{
+              color: "white",
+              backgroundColor: "RGB(31, 32, 36)",
+              height: "100px",
+              border: "2px solid rgb(72, 133, 237)",
+            }}
+          >
+            <CardContent>
+              <Typography
+                className={classes.title}
+                color="textSecondary"
+                gutterBottom
+              >
+                Total failed executions
+              </Typography>
+              <Typography
+                variant="h1"
+                className={classes.pos}
+                color="textSecondary"
+              >
+                999
+              </Typography>
+            </CardContent>
+          </Card>
+        </Grid>
+      </Grid>
+      <Grid
+        container
+        spacing={3}
+        style={{
+          maxWidth: "1250px",
+          margin: "auto auto 10px",
+          color: "white",
+          backgroundColor: "rgb(39, 41, 45)",
+          padding: "20px",
+        }}
+      >
+        <Grid item md={6}>
+          <BarChart width={600} height={400} data={data} />
+        </Grid>
+        <Grid item md={6}>
+          <LineChart
+            width={600}
+            height={400}
+            data={data}
+            line={<GridStripe fill={"a#393c3e"} />}
+            series={<LineSeries symbols={null} />}
+          />
+        </Grid>
+      </Grid>
+      <Grid
+        container
+        spacing={1}
+        style={{
+          maxWidth: "1250px",
+          margin: "auto auto 10px",
+          color: "white",
+          backgroundColor: "rgb(39, 41, 45)",
+          padding: "20px",
+        }}
+      >
+        <Grid item md={12}>
+          <TableContainer
+            component={Paper}
+            style={{
+              color: "white",
+              backgroundColor: "rgb(39, 41, 45) ",
+            }}
+          >
+            <Table
+              className={classes.table}
+              size="small"
+              aria-label="a dense table"
+            >
+              <TableHead>
+                <TableRow>
+                  <TableCell>Dessert (100g serving)</TableCell>
+                  <TableCell align="right">Calories</TableCell>
+                  <TableCell align="right">Fat&nbsp;(g)</TableCell>
+                  <TableCell align="right">Carbs&nbsp;(g)</TableCell>
+                  <TableCell align="right">Protein&nbsp;(g)</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow key={row.name}>
+                    <TableCell component="th" scope="row">
+                      {row.name}
+                    </TableCell>
+                    <TableCell align="right">{row.calories}</TableCell>
+                    <TableCell align="right">{row.fat}</TableCell>
+                    <TableCell align="right">{row.carbs}</TableCell>
+                    <TableCell align="right">{row.protein}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+};
+
+export default DashboardPage;