Enhance dashboard layout

UI adjustments

Author: modularcoder

src/Dashboard/Dashboard.js

@@ -6,8 +6,10 @@ import BasePageContainer from '../_common/BasePageContainer'
 import BasePageToolbar from '../_common/BasePageToolbar'
 
 import DashboardActions from './DashboardActions'
+import SubscriptionsHistory from './SubscriptionsHistory'
 import KeyNumbers from './KeyNumbers'
-import Subscriptions from './Subscriptions'
+import SubscriptionsRecent from './SubscriptionsRecent'
+import SubscriptionsBreakdown from './SubscriptionsBreakdown'
 
 const Dashboard = () => {
   return (
@@ -18,9 +20,11 @@ const Dashboard = () => {
       ></BasePageToolbar>
       <Grid container spacing={3}>
         <Grid item xs={12}>
-          <Subscriptions />
+          <SubscriptionsHistory />
         </Grid>
         <KeyNumbers />
+        <SubscriptionsRecent />
+        <SubscriptionsBreakdown />
       </Grid>
     </BasePageContainer>
   )

src/Dashboard/Revenue/Revenue.js

@@ -0,0 +1,109 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+  makeStyles,
+  Grid,
+  Card,
+  CardHeader,
+  CardContent,
+  IconButton,
+} from '@material-ui/core'
+import { BarChart as IconBarChart, MoreVert as IconMoreVert } from '@material-ui/icons'
+import { Bar } from 'react-chartjs-2'
+
+import { chart } from './data'
+
+const SubscriptionsBreakdown = props => {
+  const classes = useStyles()
+
+  return (
+    <Grid item xs={12} sm={12} md={6} className={classes.card}>
+      <Card>
+        <CardHeader
+          className={classes.cardHeader}
+          avatar={<IconBarChart className={classes.headerIcon} />}
+          action={
+            <IconButton aria-label="settings" size="small">
+              <IconMoreVert />
+            </IconButton>
+          }
+          title="Subscriptions Breakdown"
+        />
+        <CardContent className={classes.cardContent}>
+          <div className={classes.chartContainer}>
+            <div className={classes.chart}>
+              <Bar data={chart.data} options={chart.options} />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </Grid>
+  )
+}
+
+SubscriptionsBreakdown.propTypes = {}
+
+const useStyles = makeStyles(theme => ({
+  card: {
+    height: '100%',
+  },
+  cardHeader: {
+    borderBottom: '1px solid',
+    borderBottomColor: theme.palette.divider,
+  },
+  cardBody: {
+    overflow: 'hidden',
+  },
+  headerTitleBox: {},
+  headerActionsBox: {
+    textAlign: 'right',
+  },
+  headerIcon: {
+    color: theme.palette.primary.main,
+    verticalAlign: 'sub',
+    marginRight: '.3em',
+  },
+  chartBox: {
+    borderRight: '1px solid',
+    borderRightColor: theme.palette.divider,
+  },
+  chartContainer: {
+    width: '100%',
+    position: 'relative',
+    paddingBottom: '25%',
+    minHeight: 240,
+  },
+  chart: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0,
+  },
+  cardContent: {
+    height: '100%',
+    '&:last-child': {
+      paddingBottom: 'default',
+    },
+  },
+  ratingBox: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  },
+  ratingItemValueBox: {
+    textAlign: 'right',
+    fontSize: '0.7em',
+  },
+  ratingItemValue: {
+    display: 'inline-block',
+  },
+  ratingItemRatio: {
+    marginLeft: 4,
+    display: 'inline-block',
+    width: '3em',
+    // fontSize: '1em',
+  },
+}))
+
+export default SubscriptionsBreakdown

src/Dashboard/Revenue/index.js

@@ -0,0 +1,60 @@
+import theme from '../../_theme'
+
+export const chart = {
+  data: {
+    datasets: [
+      {
+        backgroundColor: theme.palette.secondary.main,
+        borderColor: theme.palette.secondary.main,
+        borderWidth: 2,
+        label: 'Customers',
+        fill: false,
+        data: [1545, 540, 749, 310, 56],
+        yAxisID: 'y1',
+      },
+      {
+        backgroundColor: 'rgba(136, 151, 170, 0.1)',
+        borderColor: '#8897aa',
+        borderDash: [5, 5],
+        borderWidth: 1,
+        data: [23686, 30820, 59622, 146465, 78160],
+        label: 'Total Monthly Revenue, $',
+        yAxisID: 'y2',
+      },
+    ],
+    labels: ['Trial', 'Starter', 'Pro', 'Silver', 'Gold'],
+  },
+  options: {
+    scales: {
+      xAxes: [
+        {
+          gridLines: { display: false },
+          ticks: { fontColor: '#aaa', autoSkipPadding: 50 },
+        },
+      ],
+      yAxes: [
+        {
+          id: 'y1',
+          gridLines: { display: false },
+          ticks: { fontColor: '#aaa', maxTicksLimit: 5 },
+        },
+        {
+          position: 'right',
+          id: 'y2',
+          gridLines: { display: false },
+          ticks: { fontColor: '#aaa', maxTicksLimit: 5 },
+        },
+      ],
+    },
+    tooltips: {
+      mode: 'index',
+      intersect: false,
+    },
+    hover: {
+      mode: 'index',
+      intersect: false,
+    },
+    responsive: true,
+    maintainAspectRatio: false,
+  },
+}

src/Dashboard/Sales/Sales.js

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