adding dummy dashboard

.gitignore

@@ -94,4 +94,5 @@ typings/
 .vscode/*
 
 avatars/
-images/
+images/
+react-material-dashboard-master/

client/package.json

@@ -4,14 +4,21 @@
   "private": true,
   "dependencies": {
     "@date-io/moment": "1.3.11",
+    "@fullcalendar/core": "^4.3.1",
+    "@fullcalendar/daygrid": "^4.3.0",
+    "@fullcalendar/interaction": "^4.3.0",
+    "@fullcalendar/react": "^4.3.0",
+    "@fullcalendar/timegrid": "^4.3.0",
     "@material-ui/core": "4.6.0",
     "@material-ui/icons": "4.5.1",
     "@material-ui/lab": "4.0.0-alpha.31",
     "@material-ui/pickers": "3.2.7",
     "axios": "0.19.0",
+    "chart.js": "^2.9.2",
     "classnames": "2.2.6",
     "moment": "2.24.0",
     "react": "16.11.0",
+    "react-chartjs-2": "^2.8.0",
     "react-dom": "16.11.0",
     "react-facebook-login": "4.1.1",
     "react-google-login": "5.0.7",
@@ -24,12 +31,7 @@
     "redux-thunk": "2.3.0",
     "slick-carousel": "1.8.1",
     "typeface-montserrat": "0.0.75",
-    "uuid": "3.3.3",
-    "@fullcalendar/core": "^4.3.1",
-    "@fullcalendar/daygrid": "^4.3.0",
-    "@fullcalendar/interaction": "^4.3.0",
-    "@fullcalendar/react": "^4.3.0",
-    "@fullcalendar/timegrid": "^4.3.0"
+    "uuid": "3.3.3"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/pages/Admin/DashboardPage/DashboardPage.js

@@ -1,17 +1,51 @@
 import React, { Component } from 'react';
-import { withStyles } from '@material-ui/core';
+import { withStyles, Grid } from '@material-ui/core';
 import Dashboard from '../../../layouts/Dashboard/Dashboard';
+import {
+  TotalUsers,
+  TotalCinemas,
+  TotalMovies,
+  TotalReservations,
+  LatestSales,
+  UsersByDevice
+} from './components';
 
 const styles = theme => ({
   root: {
     textAlign: 'center',
-    paddingTop: theme.spacing(2)
+    padding: theme.spacing(4)
   }
 });
 
 class DashboardPage extends Component {
   render() {
-    return <Dashboard title="Admin Dashboard" />;
+    const { classes } = this.props;
+    return (
+      <Dashboard title="Admin Dashboard">
+        <div className={classes.root}>
+          <Grid container spacing={4}>
+            <Grid item lg={3} sm={6} xl={3} xs={12}>
+              <TotalUsers users={'20'} />
+            </Grid>
+            <Grid item lg={3} sm={6} xl={3} xs={12}>
+              <TotalCinemas cinemas={'10'} />
+            </Grid>
+            <Grid item lg={3} sm={6} xl={3} xs={12}>
+              <TotalMovies movies={'100'} />
+            </Grid>
+            <Grid item lg={3} sm={6} xl={3} xs={12}>
+              <TotalReservations reservations={'10'} />
+            </Grid>
+            <Grid item lg={8} md={12} xl={9} xs={12}>
+              <LatestSales />
+            </Grid>
+            <Grid item lg={4} md={6} xl={3} xs={12}>
+              <UsersByDevice />
+            </Grid>
+          </Grid>
+        </div>
+      </Dashboard>
+    );
   }
 }
 

client/src/pages/Admin/DashboardPage/components/LatestSales/LatestSales.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { Bar } from 'react-chartjs-2';
+import { makeStyles } from '@material-ui/styles';
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  CardActions,
+  Divider,
+  Button
+} from '@material-ui/core';
+import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import ArrowRightIcon from '@material-ui/icons/ArrowRight';
+
+import { data, options } from './chart';
+
+const useStyles = makeStyles(() => ({
+  root: {},
+  chartContainer: {
+    height: 400,
+    position: 'relative'
+  },
+  actions: {
+    justifyContent: 'flex-end'
+  }
+}));
+
+const LatestSales = props => {
+  const { className } = props;
+
+  const classes = useStyles();
+
+  return (
+    <Card className={classnames(classes.root, className)}>
+      <CardHeader
+        action={
+          <Button size="small" variant="text">
+            Last 7 days <ArrowDropDownIcon />
+          </Button>
+        }
+        title="Latest Sales"
+      />
+      <Divider />
+      <CardContent>
+        <div className={classes.chartContainer}>
+          <Bar data={data} options={options} />
+        </div>
+      </CardContent>
+      <Divider />
+      <CardActions className={classes.actions}>
+        <Button color="primary" size="small" variant="text">
+          Overview <ArrowRightIcon />
+        </Button>
+      </CardActions>
+    </Card>
+  );
+};
+
+LatestSales.propTypes = {
+  className: PropTypes.string
+};
+
+export default LatestSales;

client/src/pages/Admin/DashboardPage/components/LatestSales/chart.js

@@ -0,0 +1,72 @@
+import palette from '../../../../../theme/palette';
+
+export const data = {
+  labels: ['1 Aug', '2 Aug', '3 Aug', '4 Aug', '5 Aug', '6 Aug'],
+  datasets: [
+    {
+      label: 'This year',
+      backgroundColor: palette.primary.main,
+      data: [18, 5, 19, 27, 29, 19, 20]
+    },
+    {
+      label: 'Last year',
+      backgroundColor: palette.neutral,
+      data: [11, 20, 12, 29, 30, 25, 13]
+    }
+  ]
+};
+
+export const options = {
+  responsive: true,
+  maintainAspectRatio: false,
+  animation: false,
+  legend: { display: false },
+  cornerRadius: 20,
+  tooltips: {
+    enabled: true,
+    mode: 'index',
+    intersect: false,
+    borderWidth: 1,
+    borderColor: palette.divider,
+    backgroundColor: palette.white,
+    titleFontColor: palette.text.primary,
+    bodyFontColor: palette.text.secondary,
+    footerFontColor: palette.text.secondary
+  },
+  layout: { padding: 0 },
+  scales: {
+    xAxes: [
+      {
+        barThickness: 12,
+        maxBarThickness: 10,
+        barPercentage: 0.5,
+        categoryPercentage: 0.5,
+        ticks: {
+          fontColor: palette.text.secondary
+        },
+        gridLines: {
+          display: false,
+          drawBorder: false
+        }
+      }
+    ],
+    yAxes: [
+      {
+        ticks: {
+          fontColor: palette.text.secondary,
+          beginAtZero: true,
+          min: 0
+        },
+        gridLines: {
+          borderDash: [2],
+          borderDashOffset: [2],
+          color: palette.divider,
+          drawBorder: false,
+          zeroLineBorderDash: [2],
+          zeroLineBorderDashOffset: [2],
+          zeroLineColor: palette.divider
+        }
+      }
+    ]
+  }
+};

client/src/pages/Admin/DashboardPage/components/LatestSales/index.js

@@ -0,0 +1 @@
+export { default } from './LatestSales';

client/src/pages/Admin/DashboardPage/components/TotalCinemas/TotalCinemas.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/styles';
+import { Card, CardContent, Grid, Typography, Avatar } from '@material-ui/core';
+import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
+import TheatersIcon from '@material-ui/icons/Theaters';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    height: '100%'
+  },
+  content: {
+    alignItems: 'center',
+    display: 'flex'
+  },
+  title: {
+    fontWeight: 700
+  },
+  avatar: {
+    backgroundColor: theme.palette.error.main,
+    height: 56,
+    width: 56
+  },
+  icon: {
+    height: 32,
+    width: 32
+  },
+  difference: {
+    marginTop: theme.spacing(2),
+    display: 'flex',
+    alignItems: 'center'
+  },
+  differenceIcon: {
+    color: theme.palette.error.dark
+  },
+  differenceValue: {
+    color: theme.palette.error.dark,
+    marginRight: theme.spacing(1)
+  }
+}));
+
+const TotalCinemas = props => {
+  const { className, cinemas } = props;
+
+  const classes = useStyles();
+
+  return (
+    <Card className={classnames(classes.root, className)}>
+      <CardContent>
+        <Grid container justify="space-between">
+          <Grid item>
+            <Typography
+              className={classes.title}
+              color="textSecondary"
+              gutterBottom
+              variant="body2">
+              TOTAL CINEMAS
+            </Typography>
+            <Typography variant="h3">{cinemas}</Typography>
+          </Grid>
+          <Grid item>
+            <Avatar className={classes.avatar}>
+              <TheatersIcon className={classes.icon} />
+            </Avatar>
+          </Grid>
+        </Grid>
+        <div className={classes.difference}>
+          <ArrowDownwardIcon className={classes.differenceIcon} />
+          <Typography className={classes.differenceValue} variant="body2">
+            16%
+          </Typography>
+          <Typography className={classes.caption} variant="caption">
+            Since last month
+          </Typography>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+TotalCinemas.propTypes = {
+  className: PropTypes.string
+};
+
+export default TotalCinemas;

client/src/pages/Admin/DashboardPage/components/TotalCinemas/index.js

@@ -0,0 +1 @@
+export { default } from './TotalCinemas';