Enhance dashboar view

Author: modularcoder

src/Dashboard/Dashboard.js

@@ -1,9 +1,13 @@
 import React from 'react'
 
+import Grid from '@material-ui/core/Grid'
+
 import BasePageContainer from '../_common/BasePageContainer'
 import BasePageToolbar from '../_common/BasePageToolbar'
 
 import DashboardActions from './DashboardActions'
+import KeyNumbers from './KeyNumbers'
+import Subscriptions from './Subscriptions'
 
 const Dashboard = () => {
   return (
@@ -12,6 +16,12 @@ const Dashboard = () => {
         title={'Dashboard'}
         actionsComponent={DashboardActions}
       ></BasePageToolbar>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <Subscriptions />
+        </Grid>
+        <KeyNumbers />
+      </Grid>
     </BasePageContainer>
   )
 }

src/Dashboard/KeyNumbers/KeyNumbers.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { makeStyles } from '@material-ui/core/styles'
+import Paper from '@material-ui/core/Paper'
+import Grid from '@material-ui/core/Grid'
+
+const KeyNumbers = props => {
+  const classes = useStyles()
+
+  return (
+    <>
+      <Grid item xs={6} sm={3}>
+        <Paper className={classes.paper}>xs=3</Paper>
+      </Grid>
+      <Grid item xs={6} sm={3}>
+        <Paper className={classes.paper}>xs=3</Paper>
+      </Grid>
+      <Grid item xs={6} sm={3}>
+        <Paper className={classes.paper}>xs=3</Paper>
+      </Grid>
+      <Grid item xs={6} sm={3}>
+        <Paper className={classes.paper}>xs=3</Paper>
+      </Grid>
+    </>
+  )
+}
+
+KeyNumbers.propTypes = {}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  paper: {
+    padding: theme.spacing(2),
+    textAlign: 'center',
+    color: theme.palette.text.secondary,
+  },
+}))
+
+export default KeyNumbers

src/Dashboard/KeyNumbers/index.js

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

src/Dashboard/Revenue/Revenue.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Revenue = props => {
+  return <div></div>
+}
+
+Revenue.propTypes = {}
+
+export default Revenue

src/Dashboard/Revenue/index.js

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

src/Dashboard/Sales/Sales.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Sales = props => {
+  return <div></div>
+}
+
+Sales.propTypes = {}
+
+export default Sales

src/Dashboard/Sales/index.js

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

src/Dashboard/Subscriptions/Subscriptions.js

@@ -0,0 +1,105 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+  makeStyles,
+  ButtonGroup,
+  Button,
+  Grid,
+  Paper,
+  Avatar,
+  Card,
+  CardHeader,
+  CardContent,
+  Typography,
+  IconButton,
+  LinearProgress,
+} from '@material-ui/core'
+import { Timeline as IconTimeline, MoreVert as IconMoreVert } from '@material-ui/icons'
+
+const Subscriptions = props => {
+  const classes = useStyles()
+
+  return (
+    <Card>
+      <CardHeader
+        className={classes.cardHeader}
+        avatar={<IconTimeline className={classes.headerIcon} />}
+        action={
+          <IconButton aria-label="settings" size="small">
+            <IconMoreVert />
+          </IconButton>
+        }
+        title="Subscriptions"
+      />
+      <CardContent className={classes.cardContent}>
+        <Grid container spacing={4}>
+          <Grid item sm={9} className={classes.chartBox}>
+            <div className={classes.chart}></div>
+          </Grid>
+          <Grid item sm={3} className={classes.ratingBox}>
+            <div>
+              <Typography>GitHub.com</Typography>
+              <LinearProgress variant="determinate" value={55} color="primary" />
+            </div>
+            <div>
+              <Typography>MaterialUI.com</Typography>
+              <LinearProgress variant="determinate" value={25} color="primary" />
+            </div>
+            <div>
+              <Typography>Google</Typography>
+              <LinearProgress variant="determinate" value={15} color="primary" />
+            </div>
+            <div>
+              <Typography>ModularCode.io</Typography>
+              <LinearProgress variant="determinate" value={8} color="primary" />
+            </div>
+            <div>
+              <Typography>TypeScript</Typography>
+              <LinearProgress variant="determinate" value={5} color="primary" />
+            </div>
+          </Grid>
+        </Grid>
+      </CardContent>
+    </Card>
+  )
+}
+
+Subscriptions.propTypes = {}
+
+const useStyles = makeStyles(theme => ({
+  cardHeader: {
+    borderBottom: '1px solid rgba(24,28,33,0.06)',
+  },
+  cardBody: {
+    overflow: 'hidden',
+  },
+  headerTitleBox: {},
+  headerActionsBox: {
+    textAlign: 'right',
+  },
+  headerIcon: {
+    color: theme.palette.primary.main,
+    verticalAlign: 'sub',
+    marginRight: '.3em',
+  },
+  chartBox: {
+    borderRight: '1px solid rgba(24,28,33,0.06)',
+  },
+  chart: {
+    width: '100%',
+    paddingBottom: '30%',
+    background: '#efefef',
+  },
+  cardContent: {
+    '&:last-child': {
+      paddingBottom: 'default',
+    },
+  },
+  ratingBox: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  },
+}))
+
+export default Subscriptions

src/Dashboard/Subscriptions/index.js

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

src/Dashboard/Visits/Visits.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Visits = props => {
+  return <div></div>
+}
+
+Visits.propTypes = {}
+
+export default Visits