Clean admin

webui/src/App.jsx

@@ -3,13 +3,10 @@ import { Router } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 import { Chart } from 'react-chartjs-2';
 import { ThemeProvider } from '@material-ui/styles';
-import validate from 'validate.js';
 
 import { chartjs } from './helpers';
 import theme from './theme';
-import 'react-perfect-scrollbar/dist/css/styles.css';
 import './assets/scss/index.scss';
-import validators from './common/validators';
 import Routes from './Routes';
 
 const browserHistory = createBrowserHistory();
@@ -18,10 +15,6 @@ Chart.helpers.extend(Chart.elements.Rectangle.prototype, {
   draw: chartjs.draw
 });
 
-validate.validators = {
-  ...validate.validators,
-  ...validators
-};
 
 export default class App extends Component {
   render() {

webui/src/Routes.js

@@ -1,93 +0,0 @@
-import React from 'react';
-import { Switch, Redirect } from 'react-router-dom';
-
-import { RouteWithLayout } from './components';
-import { Main as MainLayout, Minimal as MinimalLayout } from './layouts';
-
-import {
-  Dashboard as DashboardView,
-  ProductList as ProductListView,
-  UserList as UserListView,
-  Typography as TypographyView,
-  Icons as IconsView,
-  Account as AccountView,
-  Settings as SettingsView,
-  SignUp as SignUpView,
-  SignIn as SignInView,
-  NotFound as NotFoundView
-} from './views';
-
-const Routes = () => {
-  return (
-    <Switch>
-      <Redirect
-        exact
-        from="/"
-        to="/dashboard"
-      />
-      <RouteWithLayout
-        component={DashboardView}
-        exact
-        layout={MainLayout}
-        path="/dashboard"
-      />
-      <RouteWithLayout
-        component={UserListView}
-        exact
-        layout={MainLayout}
-        path="/users"
-      />
-      <RouteWithLayout
-        component={ProductListView}
-        exact
-        layout={MainLayout}
-        path="/products"
-      />
-      <RouteWithLayout
-        component={TypographyView}
-        exact
-        layout={MainLayout}
-        path="/typography"
-      />
-      <RouteWithLayout
-        component={IconsView}
-        exact
-        layout={MainLayout}
-        path="/icons"
-      />
-      <RouteWithLayout
-        component={AccountView}
-        exact
-        layout={MainLayout}
-        path="/account"
-      />
-      <RouteWithLayout
-        component={SettingsView}
-        exact
-        layout={MainLayout}
-        path="/settings"
-      />
-      <RouteWithLayout
-        component={SignUpView}
-        exact
-        layout={MinimalLayout}
-        path="/sign-up"
-      />
-      <RouteWithLayout
-        component={SignInView}
-        exact
-        layout={MinimalLayout}
-        path="/sign-in"
-      />
-      <RouteWithLayout
-        component={NotFoundView}
-        exact
-        layout={MinimalLayout}
-        path="/not-found"
-      />
-      <Redirect to="/not-found" />
-    </Switch>
-  );
-};
-
-export default Routes;

webui/src/Routes.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {Switch, Redirect} from 'react-router-dom';
+
+import {RouteWithLayout} from './components';
+import {Main as MainLayout, Minimal as MinimalLayout} from './layouts';
+
+import {
+    Dashboard as DashboardView,
+    SignIn as SignInView,
+    NotFound as NotFoundView
+} from './views';
+
+function loggedIn() {
+    return false
+}
+
+function requireAuth(nextState, replace) {
+    console.log("holaa")
+    if (!loggedIn()) {
+        replace({
+            pathname: '/signin'
+        })
+    }
+}
+
+const Routes = () => {
+    return (
+        <Switch>
+            <Redirect exact from="/" to="/dashboard"/>
+            <RouteWithLayout component={DashboardView} exact layout={MainLayout} path="/dashboard" onEnter={requireAuth}/>
+            <RouteWithLayout component={SignInView} exact layout={MinimalLayout} path="/signin"/>
+            <RouteWithLayout component={NotFoundView} exact layout={MinimalLayout} path="/notfound"/>
+            <Redirect to="/notfound"/>
+        </Switch>
+    );
+};
+
+export default Routes;

webui/src/common/validators.js

@@ -1,9 +0,0 @@
-const checked = (value, options) => {
-  if (value !== true) {
-    return options.message || 'must be checked';
-  }
-};
-
-export default {
-  checked
-};

webui/src/components/RouteWithLayout/RouteWithLayout.jsx

@@ -6,9 +6,7 @@ const RouteWithLayout = props => {
   const { layout: Layout, component: Component, ...rest } = props;
 
   return (
-    <Route
-      {...rest}
-      render={matchProps => (
+    <Route {...rest} render={matchProps => (
         <Layout>
           <Component {...matchProps} />
         </Layout>

webui/src/components/SearchInput/SearchInput.js

@@ -1,56 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
-import { Paper, Input } from '@material-ui/core';
-import SearchIcon from '@material-ui/icons/Search';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    borderRadius: '4px',
-    alignItems: 'center',
-    padding: theme.spacing(1),
-    display: 'flex',
-    flexBasis: 420
-  },
-  icon: {
-    marginRight: theme.spacing(1),
-    color: theme.palette.text.secondary
-  },
-  input: {
-    flexGrow: 1,
-    fontSize: '14px',
-    lineHeight: '16px',
-    letterSpacing: '-0.05px'
-  }
-}));
-
-const SearchInput = props => {
-  const { className, onChange, style, ...rest } = props;
-
-  const classes = useStyles();
-
-  return (
-    <Paper
-      {...rest}
-      className={clsx(classes.root, className)}
-      style={style}
-    >
-      <SearchIcon className={classes.icon} />
-      <Input
-        {...rest}
-        className={classes.input}
-        disableUnderline
-        onChange={onChange}
-      />
-    </Paper>
-  );
-};
-
-SearchInput.propTypes = {
-  className: PropTypes.string,
-  onChange: PropTypes.func,
-  style: PropTypes.object
-};
-
-export default SearchInput;

webui/src/components/SearchInput/index.js

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

webui/src/components/index.jsx

@@ -1,3 +1,2 @@
-export { default as SearchInput } from './SearchInput';
 export { default as StatusBullet } from './StatusBullet';
 export { default as RouteWithLayout } from './RouteWithLayout';

webui/src/helpers/chartjs.js

@@ -1,192 +0,0 @@
-// ChartJS extension rounded bar chart
-// https://codepen.io/jedtrow/full/ygRYgo
-function draw() {
-  const { ctx } = this._chart;
-  const vm = this._view;
-  let { borderWidth } = vm;
-
-  let left;
-  let right;
-  let top;
-  let bottom;
-  let signX;
-  let signY;
-  let borderSkipped;
-  let radius;
-
-  // If radius is less than 0 or is large enough to cause drawing errors a max
-  //      radius is imposed. If cornerRadius is not defined set it to 0.
-  let { cornerRadius } = this._chart.config.options;
-  if (cornerRadius < 0) {
-    cornerRadius = 0;
-  }
-
-  if (typeof cornerRadius === 'undefined') {
-    cornerRadius = 0;
-  }
-
-  if (!vm.horizontal) {
-    // bar
-    left = vm.x - vm.width / 2;
-    right = vm.x + vm.width / 2;
-    top = vm.y;
-    bottom = vm.base;
-    signX = 1;
-    signY = bottom > top ? 1 : -1;
-    borderSkipped = vm.borderSkipped || 'bottom';
-  } else {
-    // horizontal bar
-    left = vm.base;
-    right = vm.x;
-    top = vm.y - vm.height / 2;
-    bottom = vm.y + vm.height / 2;
-    signX = right > left ? 1 : -1;
-    signY = 1;
-    borderSkipped = vm.borderSkipped || 'left';
-  }
-
-  // Canvas doesn't allow us to stroke inside the width so we can
-  // adjust the sizes to fit if we're setting a stroke on the line
-  if (borderWidth) {
-    // borderWidth shold be less than bar width and bar height.
-    const barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));
-    borderWidth = borderWidth > barSize ? barSize : borderWidth;
-    const halfStroke = borderWidth / 2;
-    // Adjust borderWidth when bar top position is near vm.base(zero).
-    const borderLeft =
-      left + (borderSkipped !== 'left' ? halfStroke * signX : 0);
-    const borderRight =
-      right + (borderSkipped !== 'right' ? -halfStroke * signX : 0);
-    const borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0);
-    const borderBottom =
-      bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0);
-    // not become a vertical line?
-    if (borderLeft !== borderRight) {
-      top = borderTop;
-      bottom = borderBottom;
-    }
-    // not become a horizontal line?
-    if (borderTop !== borderBottom) {
-      left = borderLeft;
-      right = borderRight;
-    }
-  }
-
-  ctx.beginPath();
-  ctx.fillStyle = vm.backgroundColor;
-  ctx.strokeStyle = vm.borderColor;
-  ctx.lineWidth = borderWidth;
-
-  // Corner points, from bottom-left to bottom-right clockwise
-  // | 1 2 |
-  // | 0 3 |
-  const corners = [[left, bottom], [left, top], [right, top], [right, bottom]];
-
-  // Find first (starting) corner with fallback to 'bottom'
-  const borders = ['bottom', 'left', 'top', 'right'];
-  let startCorner = borders.indexOf(borderSkipped, 0);
-  if (startCorner === -1) {
-    startCorner = 0;
-  }
-
-  function cornerAt(index) {
-    return corners[(startCorner + index) % 4];
-  }
-
-  // Draw rectangle from 'startCorner'
-  let corner = cornerAt(0);
-  ctx.moveTo(corner[0], corner[1]);
-
-  for (let i = 1; i < 4; i += 1) {
-    corner = cornerAt(i);
-    let nextCornerId = i + 1;
-    if (nextCornerId === 4) {
-      nextCornerId = 0;
-    }
-
-    const width = corners[2][0] - corners[1][0];
-    const height = corners[0][1] - corners[1][1];
-    const x = corners[1][0];
-    const y = corners[1][1];
-
-    radius = cornerRadius;
-    // Fix radius being too large
-    if (radius > Math.abs(height) / 2) {
-      radius = Math.floor(Math.abs(height) / 2);
-    }
-    if (radius > Math.abs(width) / 2) {
-      radius = Math.floor(Math.abs(width) / 2);
-    }
-
-    if (height < 0) {
-      // Negative values in a standard bar chart
-      const xTl = x;
-      const xTr = x + width;
-      const yTl = y + height;
-      const yTr = y + height;
-
-      const xBl = x;
-      const xBr = x + width;
-      const yBl = y;
-      const yBr = y;
-
-      // Draw
-      ctx.moveTo(xBl + radius, yBl);
-      ctx.lineTo(xBr - radius, yBr);
-      ctx.quadraticCurveTo(xBr, yBr, xBr, yBr - radius);
-      ctx.lineTo(xTr, yTr + radius);
-      ctx.quadraticCurveTo(xTr, yTr, xTr - radius, yTr);
-      ctx.lineTo(xTl + radius, yTl);
-      ctx.quadraticCurveTo(xTl, yTl, xTl, yTl + radius);
-      ctx.lineTo(xBl, yBl - radius);
-      ctx.quadraticCurveTo(xBl, yBl, xBl + radius, yBl);
-    } else if (width < 0) {
-      // Negative values in a horizontal bar chart
-      const xTl = x + width;
-      const xTr = x;
-      const yTl = y;
-      const yTr = y;
-
-      const xBl = x + width;
-      const xBr = x;
-      const yBl = y + height;
-      const yBr = y + height;
-
-      // Draw
-      ctx.moveTo(xBl + radius, yBl);
-      ctx.lineTo(xBr - radius, yBr);
-      ctx.quadraticCurveTo(xBr, yBr, xBr, yBr - radius);
-      ctx.lineTo(xTr, yTr + radius);
-      ctx.quadraticCurveTo(xTr, yTr, xTr - radius, yTr);
-      ctx.lineTo(xTl + radius, yTl);
-      ctx.quadraticCurveTo(xTl, yTl, xTl, yTl + radius);
-      ctx.lineTo(xBl, yBl - radius);
-      ctx.quadraticCurveTo(xBl, yBl, xBl + radius, yBl);
-    } else {
-      // Positive Value
-      ctx.moveTo(x + radius, y);
-      ctx.lineTo(x + width - radius, y);
-      ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
-      ctx.lineTo(x + width, y + height - radius);
-      ctx.quadraticCurveTo(
-        x + width,
-        y + height,
-        x + width - radius,
-        y + height
-      );
-      ctx.lineTo(x + radius, y + height);
-      ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
-      ctx.lineTo(x, y + radius);
-      ctx.quadraticCurveTo(x, y, x + radius, y);
-    }
-  }
-
-  ctx.fill();
-  if (borderWidth) {
-    ctx.stroke();
-  }
-}
-
-export default {
-  draw
-};

webui/src/helpers/chartjs.jsx

@@ -0,0 +1,192 @@
+// ChartJS extension rounded bar chart
+// https://codepen.io/jedtrow/full/ygRYgo
+function draw() {
+    const {ctx} = this._chart;
+    const vm = this._view;
+    let {borderWidth} = vm;
+
+    let left;
+    let right;
+    let top;
+    let bottom;
+    let signX;
+    let signY;
+    let borderSkipped;
+    let radius;
+
+    // If radius is less than 0 or is large enough to cause drawing errors a max
+    //      radius is imposed. If cornerRadius is not defined set it to 0.
+    let {cornerRadius} = this._chart.config.options;
+    if (cornerRadius < 0) {
+        cornerRadius = 0;
+    }
+
+    if (typeof cornerRadius === 'undefined') {
+        cornerRadius = 0;
+    }
+
+    if (!vm.horizontal) {
+        // bar
+        left = vm.x - vm.width / 2;
+        right = vm.x + vm.width / 2;
+        top = vm.y;
+        bottom = vm.base;
+        signX = 1;
+        signY = bottom > top ? 1 : -1;
+        borderSkipped = vm.borderSkipped || 'bottom';
+    } else {
+        // horizontal bar
+        left = vm.base;
+        right = vm.x;
+        top = vm.y - vm.height / 2;
+        bottom = vm.y + vm.height / 2;
+        signX = right > left ? 1 : -1;
+        signY = 1;
+        borderSkipped = vm.borderSkipped || 'left';
+    }
+
+    // Canvas doesn't allow us to stroke inside the width so we can
+    // adjust the sizes to fit if we're setting a stroke on the line
+    if (borderWidth) {
+        // borderWidth shold be less than bar width and bar height.
+        const barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));
+        borderWidth = borderWidth > barSize ? barSize : borderWidth;
+        const halfStroke = borderWidth / 2;
+        // Adjust borderWidth when bar top position is near vm.base(zero).
+        const borderLeft =
+            left + (borderSkipped !== 'left' ? halfStroke * signX : 0);
+        const borderRight =
+            right + (borderSkipped !== 'right' ? -halfStroke * signX : 0);
+        const borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0);
+        const borderBottom =
+            bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0);
+        // not become a vertical line?
+        if (borderLeft !== borderRight) {
+            top = borderTop;
+            bottom = borderBottom;
+        }
+        // not become a horizontal line?
+        if (borderTop !== borderBottom) {
+            left = borderLeft;
+            right = borderRight;
+        }
+    }
+
+    ctx.beginPath();
+    ctx.fillStyle = vm.backgroundColor;
+    ctx.strokeStyle = vm.borderColor;
+    ctx.lineWidth = borderWidth;
+
+    // Corner points, from bottom-left to bottom-right clockwise
+    // | 1 2 |
+    // | 0 3 |
+    const corners = [[left, bottom], [left, top], [right, top], [right, bottom]];
+
+    // Find first (starting) corner with fallback to 'bottom'
+    const borders = ['bottom', 'left', 'top', 'right'];
+    let startCorner = borders.indexOf(borderSkipped, 0);
+    if (startCorner === -1) {
+        startCorner = 0;
+    }
+
+    function cornerAt(index) {
+        return corners[(startCorner + index) % 4];
+    }
+
+    // Draw rectangle from 'startCorner'
+    let corner = cornerAt(0);
+    ctx.moveTo(corner[0], corner[1]);
+
+    for (let i = 1; i < 4; i += 1) {
+        corner = cornerAt(i);
+        let nextCornerId = i + 1;
+        if (nextCornerId === 4) {
+            nextCornerId = 0;
+        }
+
+        const width = corners[2][0] - corners[1][0];
+        const height = corners[0][1] - corners[1][1];
+        const x = corners[1][0];
+        const y = corners[1][1];
+
+        radius = cornerRadius;
+        // Fix radius being too large
+        if (radius > Math.abs(height) / 2) {
+            radius = Math.floor(Math.abs(height) / 2);
+        }
+        if (radius > Math.abs(width) / 2) {
+            radius = Math.floor(Math.abs(width) / 2);
+        }
+
+        if (height < 0) {
+            // Negative values in a standard bar chart
+            const xTl = x;
+            const xTr = x + width;
+            const yTl = y + height;
+            const yTr = y + height;
+
+            const xBl = x;
+            const xBr = x + width;
+            const yBl = y;
+            const yBr = y;
+
+            // Draw
+            ctx.moveTo(xBl + radius, yBl);
+            ctx.lineTo(xBr - radius, yBr);
+            ctx.quadraticCurveTo(xBr, yBr, xBr, yBr - radius);
+            ctx.lineTo(xTr, yTr + radius);
+            ctx.quadraticCurveTo(xTr, yTr, xTr - radius, yTr);
+            ctx.lineTo(xTl + radius, yTl);
+            ctx.quadraticCurveTo(xTl, yTl, xTl, yTl + radius);
+            ctx.lineTo(xBl, yBl - radius);
+            ctx.quadraticCurveTo(xBl, yBl, xBl + radius, yBl);
+        } else if (width < 0) {
+            // Negative values in a horizontal bar chart
+            const xTl = x + width;
+            const xTr = x;
+            const yTl = y;
+            const yTr = y;
+
+            const xBl = x + width;
+            const xBr = x;
+            const yBl = y + height;
+            const yBr = y + height;
+
+            // Draw
+            ctx.moveTo(xBl + radius, yBl);
+            ctx.lineTo(xBr - radius, yBr);
+            ctx.quadraticCurveTo(xBr, yBr, xBr, yBr - radius);
+            ctx.lineTo(xTr, yTr + radius);
+            ctx.quadraticCurveTo(xTr, yTr, xTr - radius, yTr);
+            ctx.lineTo(xTl + radius, yTl);
+            ctx.quadraticCurveTo(xTl, yTl, xTl, yTl + radius);
+            ctx.lineTo(xBl, yBl - radius);
+            ctx.quadraticCurveTo(xBl, yBl, xBl + radius, yBl);
+        } else {
+            // Positive Value
+            ctx.moveTo(x + radius, y);
+            ctx.lineTo(x + width - radius, y);
+            ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+            ctx.lineTo(x + width, y + height - radius);
+            ctx.quadraticCurveTo(
+                x + width,
+                y + height,
+                x + width - radius,
+                y + height
+            );
+            ctx.lineTo(x + radius, y + height);
+            ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+            ctx.lineTo(x, y + radius);
+            ctx.quadraticCurveTo(x, y, x + radius, y);
+        }
+    }
+
+    ctx.fill();
+    if (borderWidth) {
+        ctx.stroke();
+    }
+}
+
+export default {
+    draw
+};

webui/src/helpers/getInitials.js

@@ -1,7 +0,0 @@
-export default (name = '') =>
-  name
-    .replace(/\s+/, ' ')
-    .split(' ')
-    .slice(0, 2)
-    .map(v => v && v[0].toUpperCase())
-    .join('');

webui/src/helpers/index.js

@@ -1,2 +0,0 @@
-export { default as chartjs } from './chartjs';
-export { default as getInitials } from './getInitials';

webui/src/helpers/index.jsx

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

webui/src/icons/Facebook/index.js

@@ -1,12 +0,0 @@
-import React from 'react';
-
-// Material components
-import { SvgIcon } from '@material-ui/core';
-
-export default function Facebook(props) {
-  return (
-    <SvgIcon {...props}>
-      <path d="M9.53144612,22.005 L9.53144612,13.0552149 L6.44166667,13.0552149 L6.44166667,9.49875 L9.53144612,9.49875 L9.53144612,6.68484375 C9.53144612,5.19972656 9.95946769,4.04680661 10.8155103,3.22608401 C11.6715529,2.4053613 12.808485,1.995 14.2263057,1.995 C15.3766134,1.995 16.3129099,2.04710915 17.0351961,2.15132812 L17.0351961,5.3169726 L15.1090998,5.3169726 C14.3868137,5.3169726 13.8919142,5.47330073 13.6244006,5.78595698 C13.4103902,6.04650407 13.3033846,6.46337874 13.3033846,7.03658198 L13.3033846,9.49875 L16.71418,9.49875 L16.2326559,13.0552149 L13.3033846,13.0552149 L13.3033846,22.005 L9.53144612,22.005 Z" />
-    </SvgIcon>
-  );
-}

webui/src/icons/Google/index.js

@@ -1,12 +0,0 @@
-import React from 'react';
-
-// Material components
-import { SvgIcon } from '@material-ui/core';
-
-export default function Google(props) {
-  return (
-    <SvgIcon {...props}>
-      <path d="M21,12.2177419 C21,13.9112905 20.6311475,15.4233869 19.8934426,16.7540323 C19.1557377,18.0846776 18.1168031,19.1249998 16.7766393,19.875 C15.4364756,20.6250002 13.8934424,21 12.147541,21 C10.4999998,21 8.97540984,20.5947579 7.57377049,19.7842742 C6.17213115,18.9737905 5.05942604,17.8790323 4.23565574,16.5 C3.41188543,15.1209677 3,13.6209679 3,12 C3,10.3790321 3.41188543,8.87903226 4.23565574,7.5 C5.05942604,6.12096774 6.17213115,5.02620949 7.57377049,4.21572581 C8.97540984,3.40524212 10.4999998,3 12.147541,3 C14.5327871,3 16.5737705,3.78629051 18.2704918,5.35887097 L15.7991803,7.71774194 C15.0122953,6.96774175 14.0655738,6.52016129 12.9590164,6.375 C11.9262295,6.22983871 10.9057375,6.375 9.89754098,6.81048387 C8.88934445,7.24596774 8.07786904,7.89919355 7.46311475,8.77016129 C6.79918033,9.71370968 6.46721311,10.7903228 6.46721311,12 C6.46721311,13.0403228 6.72540984,13.9899192 7.24180328,14.8487903 C7.75819672,15.7076615 8.4467215,16.3971776 9.30737705,16.9173387 C10.1680326,17.4374998 11.1147541,17.6975806 12.147541,17.6975806 C13.2540984,17.6975806 14.2254096,17.455645 15.0614754,16.9717742 C15.7254098,16.5846772 16.2786885,16.0645161 16.7213115,15.4112903 C17.0409838,14.8790321 17.2499998,14.3467744 17.3483607,13.8145161 L12.147541,13.8145161 L12.147541,10.6935484 L20.852459,10.6935484 C20.9508199,11.2258066 21,11.7338712 21,12.2177419 Z" />
-    </SvgIcon>
-  );
-}

webui/src/icons/index.js

@@ -1,2 +0,0 @@
-export { default as Facebook } from './Facebook';
-export { default as Google } from './Google';

webui/src/layouts/Main/Main.js

@@ -1,71 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { makeStyles, useTheme } from '@material-ui/styles';
-import { useMediaQuery } from '@material-ui/core';
-
-import { Sidebar, Topbar, Footer } from './components';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    paddingTop: 56,
-    height: '100%',
-    [theme.breakpoints.up('sm')]: {
-      paddingTop: 64
-    }
-  },
-  shiftContent: {
-    paddingLeft: 240
-  },
-  content: {
-    height: '100%'
-  }
-}));
-
-const Main = props => {
-  const { children } = props;
-
-  const classes = useStyles();
-  const theme = useTheme();
-  const isDesktop = useMediaQuery(theme.breakpoints.up('lg'), {
-    defaultMatches: true
-  });
-
-  const [openSidebar, setOpenSidebar] = useState(false);
-
-  const handleSidebarOpen = () => {
-    setOpenSidebar(true);
-  };
-
-  const handleSidebarClose = () => {
-    setOpenSidebar(false);
-  };
-
-  const shouldOpenSidebar = isDesktop ? true : openSidebar;
-
-  return (
-    <div
-      className={clsx({
-        [classes.root]: true,
-        [classes.shiftContent]: isDesktop
-      })}
-    >
-      <Topbar onSidebarOpen={handleSidebarOpen} />
-      <Sidebar
-        onClose={handleSidebarClose}
-        open={shouldOpenSidebar}
-        variant={isDesktop ? 'persistent' : 'temporary'}
-      />
-      <main className={classes.content}>
-        {children}
-        <Footer />
-      </main>
-    </div>
-  );
-};
-
-Main.propTypes = {
-  children: PropTypes.node
-};
-
-export default Main;

webui/src/layouts/Main/Main.jsx

@@ -0,0 +1,71 @@
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import {makeStyles, useTheme} from '@material-ui/styles';
+import {useMediaQuery} from '@material-ui/core';
+
+import {Sidebar, Topbar, Footer} from './components';
+
+const useStyles = makeStyles(theme => ({
+    root: {
+        paddingTop: 56,
+        height: '100%',
+        [theme.breakpoints.up('sm')]: {
+            paddingTop: 64
+        }
+    },
+    shiftContent: {
+        paddingLeft: 240
+    },
+    content: {
+        height: '100%'
+    }
+}));
+
+const Main = props => {
+    const {children} = props;
+
+    const classes = useStyles();
+    const theme = useTheme();
+    const isDesktop = useMediaQuery(theme.breakpoints.up('lg'), {
+        defaultMatches: true
+    });
+
+    const [openSidebar, setOpenSidebar] = useState(false);
+
+    const handleSidebarOpen = () => {
+        setOpenSidebar(true);
+    };
+
+    const handleSidebarClose = () => {
+        setOpenSidebar(false);
+    };
+
+    const shouldOpenSidebar = isDesktop ? true : openSidebar;
+
+    return (
+        <div
+            className={clsx({
+                [classes.root]: true,
+                [classes.shiftContent]: isDesktop
+            })}
+        >
+            <Topbar onSidebarOpen={handleSidebarOpen}/>
+            <Sidebar
+                onClose={handleSidebarClose}
+                open={shouldOpenSidebar}
+                variant={isDesktop ? 'persistent' : 'temporary'}
+            />
+            <main className={classes.content}>
+                {children}
+                <Footer/>
+            </main>
+        </div>
+    );
+};
+
+Main.propTypes = {
+    children: PropTypes.node
+};
+
+export default Main;

webui/src/layouts/Main/components/Footer/Footer.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
-import { Typography, Link } from '@material-ui/core';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    padding: theme.spacing(4)
-  }
-}));
-
-const Footer = props => {
-  const { className, ...rest } = props;
-
-  const classes = useStyles();
-
-  return (
-    <div
-      {...rest}
-      className={clsx(classes.root, className)}
-    >
-      <Typography variant="body1">
-        &copy;{' '}
-        <Link
-          component="a"
-          href="https://devias.io/"
-          target="_blank"
-        >
-          Devias IO
-        </Link>
-        . 2019
-      </Typography>
-      <Typography variant="caption">
-        Created with love for the environment. By designers and developers who
-        love to work together in offices!
-      </Typography>
-    </div>
-  );
-};
-
-Footer.propTypes = {
-  className: PropTypes.string
-};
-
-export default Footer;

webui/src/layouts/Main/components/Footer/Footer.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import {makeStyles} from '@material-ui/styles';
+import {Typography, Link} from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+    root: {
+        padding: theme.spacing(4)
+    }
+}));
+
+const Footer = props => {
+    const {className, ...rest} = props;
+
+    const classes = useStyles();
+
+    return (
+        <div
+            {...rest}
+            className={clsx(classes.root, className)}
+        >
+            <Typography variant="body1">
+                &copy;{' '}
+                <Link
+                    component="a"
+                    href="https://devias.io/"
+                    target="_blank"
+                >
+                    Devias IO
+                </Link>
+                . 2019
+            </Typography>
+        </div>
+    );
+};
+
+Footer.propTypes = {
+    className: PropTypes.string
+};
+
+export default Footer;

webui/src/layouts/Main/components/Footer/index.js

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

webui/src/layouts/Main/components/Footer/index.jsx

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

webui/src/layouts/Main/components/Sidebar/Sidebar.js

@@ -1,119 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/styles';
-import { Divider, Drawer } from '@material-ui/core';
-import DashboardIcon from '@material-ui/icons/Dashboard';
-import PeopleIcon from '@material-ui/icons/People';
-import ShoppingBasketIcon from '@material-ui/icons/ShoppingBasket';
-import TextFieldsIcon from '@material-ui/icons/TextFields';
-import ImageIcon from '@material-ui/icons/Image';
-import AccountBoxIcon from '@material-ui/icons/AccountBox';
-import SettingsIcon from '@material-ui/icons/Settings';
-import LockOpenIcon from '@material-ui/icons/LockOpen';
-
-import { Profile, SidebarNav, UpgradePlan } from './components';
-
-const useStyles = makeStyles(theme => ({
-  drawer: {
-    width: 240,
-    [theme.breakpoints.up('lg')]: {
-      marginTop: 64,
-      height: 'calc(100% - 64px)'
-    }
-  },
-  root: {
-    backgroundColor: theme.palette.white,
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    padding: theme.spacing(2)
-  },
-  divider: {
-    margin: theme.spacing(2, 0)
-  },
-  nav: {
-    marginBottom: theme.spacing(2)
-  }
-}));
-
-const Sidebar = props => {
-  const { open, variant, onClose, className, ...rest } = props;
-
-  const classes = useStyles();
-
-  const pages = [
-    {
-      title: 'Dashboard',
-      href: '/dashboard',
-      icon: <DashboardIcon />
-    },
-    {
-      title: 'Users',
-      href: '/users',
-      icon: <PeopleIcon />
-    },
-    {
-      title: 'Products',
-      href: '/products',
-      icon: <ShoppingBasketIcon />
-    },
-    {
-      title: 'Authentication',
-      href: '/sign-in',
-      icon: <LockOpenIcon />
-    },
-    {
-      title: 'Typography',
-      href: '/typography',
-      icon: <TextFieldsIcon />
-    },
-    {
-      title: 'Icons',
-      href: '/icons',
-      icon: <ImageIcon />
-    },
-    {
-      title: 'Account',
-      href: '/account',
-      icon: <AccountBoxIcon />
-    },
-    {
-      title: 'Settings',
-      href: '/settings',
-      icon: <SettingsIcon />
-    }
-  ];
-
-  return (
-    <Drawer
-      anchor="left"
-      classes={{ paper: classes.drawer }}
-      onClose={onClose}
-      open={open}
-      variant={variant}
-    >
-      <div
-        {...rest}
-        className={clsx(classes.root, className)}
-      >
-        <Profile />
-        <Divider className={classes.divider} />
-        <SidebarNav
-          className={classes.nav}
-          pages={pages}
-        />
-        <UpgradePlan />
-      </div>
-    </Drawer>
-  );
-};
-
-Sidebar.propTypes = {
-  className: PropTypes.string,
-  onClose: PropTypes.func,
-  open: PropTypes.bool.isRequired,
-  variant: PropTypes.string.isRequired
-};
-
-export default Sidebar;

webui/src/layouts/Main/components/Sidebar/Sidebar.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import {makeStyles} from '@material-ui/styles';
+import {Drawer} from '@material-ui/core';
+import DashboardIcon from '@material-ui/icons/Dashboard';
+
+import {SidebarNav} from './components';
+
+const useStyles = makeStyles(theme => ({
+    drawer: {
+        width: 240,
+        [theme.breakpoints.up('lg')]: {
+            marginTop: 64,
+            height: 'calc(100% - 64px)'
+        }
+    },
+    root: {
+        backgroundColor: theme.palette.white,
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        padding: theme.spacing(2)
+    },
+    nav: {
+        marginBottom: theme.spacing(2)
+    }
+}));
+
+const Sidebar = props => {
+    const {open, variant, onClose, className, ...rest} = props;
+
+    const classes = useStyles();
+
+    const pages = [
+        {
+            title: 'Dashboard',
+            href: '/dashboard',
+            icon: <DashboardIcon/>
+        }
+    ];
+
+    return (
+        <Drawer
+            anchor="left"
+            classes={{paper: classes.drawer}}
+            onClose={onClose}
+            open={open}
+            variant={variant}
+        >
+            <div {...rest} className={clsx(classes.root, className)}>
+                <SidebarNav
+                    className={classes.nav}
+                    pages={pages}
+                />
+            </div>
+        </Drawer>
+    );
+};
+
+Sidebar.propTypes = {
+    className: PropTypes.string,
+    onClose: PropTypes.func,
+    open: PropTypes.bool.isRequired,
+    variant: PropTypes.string.isRequired
+};
+
+export default Sidebar;

webui/src/layouts/Main/components/Sidebar/components/Profile/Profile.js

@@ -1,62 +0,0 @@
-import React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/styles';
-import { Avatar, Typography } from '@material-ui/core';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    minHeight: 'fit-content'
-  },
-  avatar: {
-    width: 60,
-    height: 60
-  },
-  name: {
-    marginTop: theme.spacing(1)
-  }
-}));
-
-const Profile = props => {
-  const { className, ...rest } = props;
-
-  const classes = useStyles();
-
-  const user = {
-    name: 'Shen Zhi',
-    avatar: '/images/avatars/avatar_11.png',
-    bio: 'Brain Director'
-  };
-
-  return (
-    <div
-      {...rest}
-      className={clsx(classes.root, className)}
-    >
-      <Avatar
-        alt="Person"
-        className={classes.avatar}
-        component={RouterLink}
-        src={user.avatar}
-        to="/settings"
-      />
-      <Typography
-        className={classes.name}
-        variant="h4"
-      >
-        {user.name}
-      </Typography>
-      <Typography variant="body2">{user.bio}</Typography>
-    </div>
-  );
-};
-
-Profile.propTypes = {
-  className: PropTypes.string
-};
-
-export default Profile;

webui/src/layouts/Main/components/Sidebar/components/Profile/index.js

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

webui/src/layouts/Main/components/Sidebar/components/SidebarNav/SidebarNav.js

@@ -1,88 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-/* eslint-disable react/display-name */
-import React, { forwardRef } from 'react';
-import { NavLink as RouterLink } from 'react-router-dom';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/styles';
-import { List, ListItem, Button, colors } from '@material-ui/core';
-
-const useStyles = makeStyles(theme => ({
-  root: {},
-  item: {
-    display: 'flex',
-    paddingTop: 0,
-    paddingBottom: 0
-  },
-  button: {
-    color: colors.blueGrey[800],
-    padding: '10px 8px',
-    justifyContent: 'flex-start',
-    textTransform: 'none',
-    letterSpacing: 0,
-    width: '100%',
-    fontWeight: theme.typography.fontWeightMedium
-  },
-  icon: {
-    color: theme.palette.icon,
-    width: 24,
-    height: 24,
-    display: 'flex',
-    alignItems: 'center',
-    marginRight: theme.spacing(1)
-  },
-  active: {
-    color: theme.palette.primary.main,
-    fontWeight: theme.typography.fontWeightMedium,
-    '& $icon': {
-      color: theme.palette.primary.main
-    }
-  }
-}));
-
-const CustomRouterLink = forwardRef((props, ref) => (
-  <div
-    ref={ref}
-    style={{ flexGrow: 1 }}
-  >
-    <RouterLink {...props} />
-  </div>
-));
-
-const SidebarNav = props => {
-  const { pages, className, ...rest } = props;
-
-  const classes = useStyles();
-
-  return (
-    <List
-      {...rest}
-      className={clsx(classes.root, className)}
-    >
-      {pages.map(page => (
-        <ListItem
-          className={classes.item}
-          disableGutters
-          key={page.title}
-        >
-          <Button
-            activeClassName={classes.active}
-            className={classes.button}
-            component={CustomRouterLink}
-            to={page.href}
-          >
-            <div className={classes.icon}>{page.icon}</div>
-            {page.title}
-          </Button>
-        </ListItem>
-      ))}
-    </List>
-  );
-};
-
-SidebarNav.propTypes = {
-  className: PropTypes.string,
-  pages: PropTypes.array.isRequired
-};
-
-export default SidebarNav;

webui/src/layouts/Main/components/Sidebar/components/SidebarNav/SidebarNav.jsx

@@ -0,0 +1,88 @@
+/* eslint-disable react/no-multi-comp */
+/* eslint-disable react/display-name */
+import React, {forwardRef} from 'react';
+import {NavLink as RouterLink} from 'react-router-dom';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import {makeStyles} from '@material-ui/styles';
+import {List, ListItem, Button, colors} from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+    root: {},
+    item: {
+        display: 'flex',
+        paddingTop: 0,
+        paddingBottom: 0
+    },
+    button: {
+        color: colors.blueGrey[800],
+        padding: '10px 8px',
+        justifyContent: 'flex-start',
+        textTransform: 'none',
+        letterSpacing: 0,
+        width: '100%',
+        fontWeight: theme.typography.fontWeightMedium
+    },
+    icon: {
+        color: theme.palette.icon,
+        width: 24,
+        height: 24,
+        display: 'flex',
+        alignItems: 'center',
+        marginRight: theme.spacing(1)
+    },
+    active: {
+        color: theme.palette.primary.main,
+        fontWeight: theme.typography.fontWeightMedium,
+        '& $icon': {
+            color: theme.palette.primary.main
+        }
+    }
+}));
+
+const CustomRouterLink = forwardRef((props, ref) => (
+    <div
+        ref={ref}
+        style={{flexGrow: 1}}
+    >
+        <RouterLink {...props} />
+    </div>
+));
+
+const SidebarNav = props => {
+    const {pages, className, ...rest} = props;
+
+    const classes = useStyles();
+
+    return (
+        <List
+            {...rest}
+            className={clsx(classes.root, className)}
+        >
+            {pages.map(page => (
+                <ListItem
+                    className={classes.item}
+                    disableGutters
+                    key={page.title}
+                >
+                    <Button
+                        activeClassName={classes.active}
+                        className={classes.button}
+                        component={CustomRouterLink}
+                        to={page.href}
+                    >
+                        <div className={classes.icon}>{page.icon}</div>
+                        {page.title}
+                    </Button>
+                </ListItem>
+            ))}
+        </List>
+    );
+};
+
+SidebarNav.propTypes = {
+    className: PropTypes.string,
+    pages: PropTypes.array.isRequired
+};
+
+export default SidebarNav;

webui/src/layouts/Main/components/Sidebar/components/UpgradePlan/UpgradePlan.js

@@ -1,79 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/styles';
-import { Typography, Button, colors } from '@material-ui/core';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    backgroundColor: colors.grey[50]
-  },
-  media: {
-    paddingTop: theme.spacing(2),
-    height: 80,
-    textAlign: 'center',
-    '& > img': {
-      height: '100%',
-      width: 'auto'
-    }
-  },
-  content: {
-    padding: theme.spacing(1, 2)
-  },
-  actions: {
-    padding: theme.spacing(1, 2),
-    display: 'flex',
-    justifyContent: 'center'
-  }
-}));
-
-const UpgradePlan = props => {
-  const { className, ...rest } = props;
-
-  const classes = useStyles();
-
-  return (
-    <div
-      {...rest}
-      className={clsx(classes.root, className)}
-    >
-      <div className={classes.media}>
-        <img
-          alt="Upgrade to PRO"
-          src="/images/undraw_resume_folder_2_arse.svg"
-        />
-      </div>
-      <div className={classes.content}>
-        <Typography
-          align="center"
-          gutterBottom
-          variant="h6"
-        >
-          Upgrade to PRO
-        </Typography>
-        <Typography
-          align="center"
-          variant="body2"
-        >
-          Upgrade to Devias Kit PRO and get even more components
-        </Typography>
-      </div>
-      <div className={classes.actions}>
-        <Button
-          color="primary"
-          component="a"
-          href="https://devias.io/products/devias-kit-pro"
-          variant="contained"
-        >
-          Upgrade
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-UpgradePlan.propTypes = {
-  className: PropTypes.string
-};
-
-export default UpgradePlan;

webui/src/layouts/Main/components/Sidebar/components/UpgradePlan/index.js

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

webui/src/layouts/Main/components/Sidebar/components/index.js

@@ -1,3 +0,0 @@
-export { default as Profile } from './Profile';
-export { default as SidebarNav } from './SidebarNav';
-export { default as UpgradePlan } from './UpgradePlan';

webui/src/layouts/Main/components/Sidebar/components/index.jsx

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

webui/src/layouts/Main/components/Topbar/Topbar.js

@@ -1,78 +0,0 @@
-import React, { useState } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/styles';
-import { AppBar, Toolbar, Badge, Hidden, IconButton } from '@material-ui/core';
-import MenuIcon from '@material-ui/icons/Menu';
-import NotificationsIcon from '@material-ui/icons/NotificationsOutlined';
-import InputIcon from '@material-ui/icons/Input';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    boxShadow: 'none'
-  },
-  flexGrow: {
-    flexGrow: 1
-  },
-  signOutButton: {
-    marginLeft: theme.spacing(1)
-  }
-}));
-
-const Topbar = props => {
-  const { className, onSidebarOpen, ...rest } = props;
-
-  const classes = useStyles();
-
-  const [notifications] = useState([]);
-
-  return (
-    <AppBar
-      {...rest}
-      className={clsx(classes.root, className)}
-    >
-      <Toolbar>
-        <RouterLink to="/">
-          <img
-            alt="Logo"
-            src="/images/logos/logo--white.svg"
-          />
-        </RouterLink>
-        <div className={classes.flexGrow} />
-        <Hidden mdDown>
-          <IconButton color="inherit">
-            <Badge
-              badgeContent={notifications.length}
-              color="primary"
-              variant="dot"
-            >
-              <NotificationsIcon />
-            </Badge>
-          </IconButton>
-          <IconButton
-            className={classes.signOutButton}
-            color="inherit"
-          >
-            <InputIcon />
-          </IconButton>
-        </Hidden>
-        <Hidden lgUp>
-          <IconButton
-            color="inherit"
-            onClick={onSidebarOpen}
-          >
-            <MenuIcon />
-          </IconButton>
-        </Hidden>
-      </Toolbar>
-    </AppBar>
-  );
-};
-
-Topbar.propTypes = {
-  className: PropTypes.string,
-  onSidebarOpen: PropTypes.func
-};
-
-export default Topbar;

webui/src/layouts/Main/components/Topbar/Topbar.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import {Link as RouterLink} from 'react-router-dom';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import {makeStyles} from '@material-ui/styles';
+import {AppBar, Toolbar, Hidden, IconButton, Typography} from '@material-ui/core';
+import MenuIcon from '@material-ui/icons/Menu';
+import InputIcon from '@material-ui/icons/Input';
+
+const useStyles = makeStyles(theme => ({
+    root: {
+        boxShadow: 'none'
+    },
+    flexGrow: {
+        flexGrow: 1
+    },
+    signOutButton: {
+        marginLeft: theme.spacing(1)
+    },
+    logo: {
+        color: 'white'
+    }
+}));
+
+const Topbar = props => {
+    const {className, onSidebarOpen, ...rest} = props;
+
+    const classes = useStyles();
+
+    return (
+        <AppBar
+            {...rest}
+            className={clsx(classes.root, className)}
+        >
+            <Toolbar>
+                <RouterLink to="/">
+                    <Typography variant="h1" component="h2" className={classes.logo}>
+                        LiveGO
+                    </Typography>
+                </RouterLink>
+                <div className={classes.flexGrow}/>
+                <Hidden mdDown>
+                    <IconButton
+                        className={classes.signOutButton}
+                        color="inherit"
+                    >
+                        <InputIcon/>
+                    </IconButton>
+                </Hidden>
+                <Hidden lgUp>
+                    <IconButton
+                        color="inherit"
+                        onClick={onSidebarOpen}
+                    >
+                        <MenuIcon/>
+                    </IconButton>
+                </Hidden>
+            </Toolbar>
+        </AppBar>
+    );
+};
+
+Topbar.propTypes = {
+    className: PropTypes.string,
+    onSidebarOpen: PropTypes.func
+};
+
+export default Topbar;

webui/src/layouts/Main/components/index.js

@@ -1,3 +0,0 @@
-export { default as Footer } from './Footer';
-export { default as Sidebar } from './Sidebar';
-export { default as Topbar } from './Topbar';

webui/src/layouts/Main/components/index.jsx

@@ -0,0 +1,3 @@
+export {default as Footer} from './Footer';
+export {default as Sidebar} from './Sidebar';
+export {default as Topbar} from './Topbar';

webui/src/layouts/Main/index.js

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

webui/src/layouts/Main/index.jsx

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

webui/src/layouts/Minimal/components/Topbar/Topbar.jsx

@@ -3,11 +3,14 @@ import { Link as RouterLink } from 'react-router-dom';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/styles';
-import { AppBar, Toolbar } from '@material-ui/core';
+import {AppBar, Toolbar, Typography} from '@material-ui/core';
 
 const useStyles = makeStyles(() => ({
   root: {
     boxShadow: 'none'
+  },
+  logo: {
+    color: 'white'
   }
 }));
 
@@ -25,10 +28,9 @@ const Topbar = props => {
     >
       <Toolbar>
         <RouterLink to="/">
-          <img
-            alt="Logo"
-            src="/images/logos/logo--white.svg"
-          />
+          <Typography variant="h1" component="h2" className={classes.logo}>
+            LiveGO
+          </Typography>
         </RouterLink>
       </Toolbar>
     </AppBar>

webui/src/theme/index.js

@@ -1,17 +0,0 @@
-import { createMuiTheme } from '@material-ui/core';
-
-import palette from './palette';
-import typography from './typography';
-import overrides from './overrides';
-
-const theme = createMuiTheme({
-  palette,
-  typography,
-  overrides,
-  zIndex: {
-    appBar: 1200,
-    drawer: 1100
-  }
-});
-
-export default theme;

webui/src/theme/index.jsx

@@ -0,0 +1,15 @@
+import {createMuiTheme} from '@material-ui/core';
+
+import palette from './palette';
+import typography from './typography';
+
+const theme = createMuiTheme({
+    palette,
+    typography,
+    zIndex: {
+        appBar: 1200,
+        drawer: 1100
+    }
+});
+
+export default theme;

webui/src/theme/overrides/MuiButton.js

@@ -1,7 +0,0 @@
-export default {
-  contained: {
-    boxShadow:
-      '0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20)',
-    backgroundColor: '#FFFFFF'
-  }
-};

webui/src/theme/overrides/MuiIconButton.js

@@ -1,10 +0,0 @@
-import palette from '../palette';
-
-export default {
-  root: {
-    color: palette.icon,
-    '&:hover': {
-      backgroundColor: 'rgba(0, 0, 0, 0.03)'
-    }
-  }
-};

webui/src/theme/overrides/MuiPaper.js

@@ -1,5 +0,0 @@
-export default {
-  elevation1: {
-    boxShadow: '0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15)'
-  }
-};

webui/src/theme/overrides/MuiTableCell.js

@@ -1,9 +0,0 @@
-import palette from '../palette';
-import typography from '../typography';
-
-export default {
-  root: {
-    ...typography.body1,
-    borderBottom: `1px solid ${palette.divider}`
-  }
-};

webui/src/theme/overrides/MuiTableHead.js

@@ -1,7 +0,0 @@
-import { colors } from '@material-ui/core';
-
-export default {
-  root: {
-    backgroundColor: colors.grey[50]
-  }
-};

webui/src/theme/overrides/MuiTableRow.js

@@ -1,14 +0,0 @@
-import palette from '../palette';
-
-export default {
-  root: {
-    '&$selected': {
-      backgroundColor: palette.background.default
-    },
-    '&$hover': {
-      '&:hover': {
-        backgroundColor: palette.background.default
-      }
-    }
-  }
-};

webui/src/theme/overrides/MuiTypography.js

@@ -1,5 +0,0 @@
-export default {
-  gutterBottom: {
-    marginBottom: 8
-  }
-};

webui/src/theme/overrides/index.js

@@ -1,15 +0,0 @@
-import MuiButton from './MuiButton';
-import MuiIconButton from './MuiIconButton';
-import MuiPaper from './MuiPaper';
-import MuiTableCell from './MuiTableCell';
-import MuiTableHead from './MuiTableHead';
-import MuiTypography from './MuiTypography';
-
-export default {
-  MuiButton,
-  MuiIconButton,
-  MuiPaper,
-  MuiTableCell,
-  MuiTableHead,
-  MuiTypography
-};

webui/src/theme/palette.js

@@ -1,56 +0,0 @@
-import { colors } from '@material-ui/core';
-
-const white = '#FFFFFF';
-const black = '#000000';
-
-export default {
-  black,
-  white,
-  primary: {
-    contrastText: white,
-    dark: colors.indigo[900],
-    main: colors.indigo[500],
-    light: colors.indigo[100]
-  },
-  secondary: {
-    contrastText: white,
-    dark: colors.blue[900],
-    main: colors.blue['A400'],
-    light: colors.blue['A400']
-  },
-  success: {
-    contrastText: white,
-    dark: colors.green[900],
-    main: colors.green[600],
-    light: colors.green[400]
-  },
-  info: {
-    contrastText: white,
-    dark: colors.blue[900],
-    main: colors.blue[600],
-    light: colors.blue[400]
-  },
-  warning: {
-    contrastText: white,
-    dark: colors.orange[900],
-    main: colors.orange[600],
-    light: colors.orange[400]
-  },
-  error: {
-    contrastText: white,
-    dark: colors.red[900],
-    main: colors.red[600],
-    light: colors.red[400]
-  },
-  text: {
-    primary: colors.blueGrey[900],
-    secondary: colors.blueGrey[600],
-    link: colors.blue[600]
-  },
-  background: {
-    default: '#F4F6F8',
-    paper: white
-  },
-  icon: colors.blueGrey[600],
-  divider: colors.grey[200]
-};

webui/src/theme/palette.jsx

@@ -0,0 +1,56 @@
+import {colors} from '@material-ui/core';
+
+const white = '#FFFFFF';
+const black = '#000000';
+
+export default {
+    black,
+    white,
+    primary: {
+        contrastText: white,
+        dark: colors.indigo[900],
+        main: colors.indigo[500],
+        light: colors.indigo[100]
+    },
+    secondary: {
+        contrastText: white,
+        dark: colors.blue[900],
+        main: colors.blue['A400'],
+        light: colors.blue['A400']
+    },
+    success: {
+        contrastText: white,
+        dark: colors.green[900],
+        main: colors.green[600],
+        light: colors.green[400]
+    },
+    info: {
+        contrastText: white,
+        dark: colors.blue[900],
+        main: colors.blue[600],
+        light: colors.blue[400]
+    },
+    warning: {
+        contrastText: white,
+        dark: colors.orange[900],
+        main: colors.orange[600],
+        light: colors.orange[400]
+    },
+    error: {
+        contrastText: white,
+        dark: colors.red[900],
+        main: colors.red[600],
+        light: colors.red[400]
+    },
+    text: {
+        primary: colors.blueGrey[900],
+        secondary: colors.blueGrey[600],
+        link: colors.blue[600]
+    },
+    background: {
+        default: '#F4F6F8',
+        paper: white
+    },
+    icon: colors.blueGrey[600],
+    divider: colors.grey[200]
+};

webui/src/theme/typography.js

@@ -1,89 +0,0 @@
-import palette from './palette';
-
-export default {
-  h1: {
-    color: palette.text.primary,
-    fontWeight: 500,
-    fontSize: '35px',
-    letterSpacing: '-0.24px',
-    lineHeight: '40px'
-  },
-  h2: {
-    color: palette.text.primary,
-    fontWeight: 500,
-    fontSize: '29px',
-    letterSpacing: '-0.24px',
-    lineHeight: '32px'
-  },
-  h3: {
-    color: palette.text.primary,
-    fontWeight: 500,
-    fontSize: '24px',
-    letterSpacing: '-0.06px',
-    lineHeight: '28px'
-  },
-  h4: {
-    color: palette.text.primary,
-    fontWeight: 500,
-    fontSize: '20px',
-    letterSpacing: '-0.06px',
-    lineHeight: '24px'
-  },
-  h5: {
-    color: palette.text.primary,
-    fontWeight: 500,
-    fontSize: '16px',
-    letterSpacing: '-0.05px',
-    lineHeight: '20px'
-  },
-  h6: {
-    color: palette.text.primary,
-    fontWeight: 500,
-    fontSize: '14px',
-    letterSpacing: '-0.05px',
-    lineHeight: '20px'
-  },
-  subtitle1: {
-    color: palette.text.primary,
-    fontSize: '16px',
-    letterSpacing: '-0.05px',
-    lineHeight: '25px'
-  },
-  subtitle2: {
-    color: palette.text.secondary,
-    fontWeight: 400,
-    fontSize: '14px',
-    letterSpacing: '-0.05px',
-    lineHeight: '21px'
-  },
-  body1: {
-    color: palette.text.primary,
-    fontSize: '14px',
-    letterSpacing: '-0.05px',
-    lineHeight: '21px'
-  },
-  body2: {
-    color: palette.text.secondary,
-    fontSize: '12px',
-    letterSpacing: '-0.04px',
-    lineHeight: '18px'
-  },
-  button: {
-    color: palette.text.primary,
-    fontSize: '14px'
-  },
-  caption: {
-    color: palette.text.secondary,
-    fontSize: '11px',
-    letterSpacing: '0.33px',
-    lineHeight: '13px'
-  },
-  overline: {
-    color: palette.text.secondary,
-    fontSize: '11px',
-    fontWeight: 500,
-    letterSpacing: '0.33px',
-    lineHeight: '13px',
-    textTransform: 'uppercase'
-  }
-};

webui/src/theme/typography.jsx

@@ -0,0 +1,89 @@
+import palette from './palette';
+
+export default {
+    h1: {
+        color: palette.text.primary,
+        fontWeight: 500,
+        fontSize: '35px',
+        letterSpacing: '-0.24px',
+        lineHeight: '40px'
+    },
+    h2: {
+        color: palette.text.primary,
+        fontWeight: 500,
+        fontSize: '29px',
+        letterSpacing: '-0.24px',
+        lineHeight: '32px'
+    },
+    h3: {
+        color: palette.text.primary,
+        fontWeight: 500,
+        fontSize: '24px',
+        letterSpacing: '-0.06px',
+        lineHeight: '28px'
+    },
+    h4: {
+        color: palette.text.primary,
+        fontWeight: 500,
+        fontSize: '20px',
+        letterSpacing: '-0.06px',
+        lineHeight: '24px'
+    },
+    h5: {
+        color: palette.text.primary,
+        fontWeight: 500,
+        fontSize: '16px',
+        letterSpacing: '-0.05px',
+        lineHeight: '20px'
+    },
+    h6: {
+        color: palette.text.primary,
+        fontWeight: 500,
+        fontSize: '14px',
+        letterSpacing: '-0.05px',
+        lineHeight: '20px'
+    },
+    subtitle1: {
+        color: palette.text.primary,
+        fontSize: '16px',
+        letterSpacing: '-0.05px',
+        lineHeight: '25px'
+    },
+    subtitle2: {
+        color: palette.text.secondary,
+        fontWeight: 400,
+        fontSize: '14px',
+        letterSpacing: '-0.05px',
+        lineHeight: '21px'
+    },
+    body1: {
+        color: palette.text.primary,
+        fontSize: '14px',
+        letterSpacing: '-0.05px',
+        lineHeight: '21px'
+    },
+    body2: {
+        color: palette.text.secondary,
+        fontSize: '12px',
+        letterSpacing: '-0.04px',
+        lineHeight: '18px'
+    },
+    button: {
+        color: palette.text.primary,
+        fontSize: '14px'
+    },
+    caption: {
+        color: palette.text.secondary,
+        fontSize: '11px',
+        letterSpacing: '0.33px',
+        lineHeight: '13px'
+    },
+    overline: {
+        color: palette.text.secondary,
+        fontSize: '11px',
+        fontWeight: 500,
+        letterSpacing: '0.33px',
+        lineHeight: '13px',
+        textTransform: 'uppercase'
+    }
+};

webui/src/views/Account/Account.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/styles';
-import { Grid } from '@material-ui/core';
-
-import { AccountProfile, AccountDetails } from './components';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    padding: theme.spacing(4)
-  }
-}));
-
-const Account = () => {
-  const classes = useStyles();
-
-  return (
-    <div className={classes.root}>
-      <Grid
-        container
-        spacing={4}
-      >
-        <Grid
-          item
-          lg={4}
-          md={6}
-          xl={4}
-          xs={12}
-        >
-          <AccountProfile />
-        </Grid>
-        <Grid
-          item
-          lg={8}
-          md={6}
-          xl={8}
-          xs={12}
-        >
-          <AccountDetails />
-        </Grid>
-      </Grid>
-    </div>
-  );
-};
-
-export default Account;

webui/src/views/Account/components/AccountDetails/AccountDetails.js

@@ -1,204 +0,0 @@
-import React, { useState } from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/styles';
-import {
-  Card,
-  CardHeader,
-  CardContent,
-  CardActions,
-  Divider,
-  Grid,
-  Button,
-  TextField
-} from '@material-ui/core';
-
-const useStyles = makeStyles(() => ({
-  root: {}
-}));
-
-const AccountDetails = props => {
-  const { className, ...rest } = props;
-
-  const classes = useStyles();
-
-  const [values, setValues] = useState({
-    firstName: 'Shen',
-    lastName: 'Zhi',
-    email: 'shen.zhi@devias.io',
-    phone: '',
-    state: 'Alabama',
-    country: 'USA'
-  });
-
-  const handleChange = event => {
-    setValues({
-      ...values,
-      [event.target.name]: event.target.value
-    });
-  };
-
-  const states = [
-    {
-      value: 'alabama',
-      label: 'Alabama'
-    },
-    {
-      value: 'new-york',
-      label: 'New York'
-    },
-    {
-      value: 'san-francisco',
-      label: 'San Francisco'
-    }
-  ];
-
-  return (
-    <Card
-      {...rest}
-      className={clsx(classes.root, className)}
-    >
-      <form
-        autoComplete="off"
-        noValidate
-      >
-        <CardHeader
-          subheader="The information can be edited"
-          title="Profile"
-        />
-        <Divider />
-        <CardContent>
-          <Grid
-            container
-            spacing={3}
-          >
-            <Grid
-              item
-              md={6}
-              xs={12}
-            >
-              <TextField
-                fullWidth
-                helperText="Please specify the first name"
-                label="First name"
-                margin="dense"
-                name="firstName"
-                onChange={handleChange}
-                required
-                value={values.firstName}
-                variant="outlined"
-              />
-            </Grid>
-            <Grid
-              item
-              md={6}
-              xs={12}
-            >
-              <TextField
-                fullWidth
-                label="Last name"
-                margin="dense"
-                name="lastName"
-                onChange={handleChange}
-                required
-                value={values.lastName}
-                variant="outlined"
-              />
-            </Grid>
-            <Grid
-              item
-              md={6}
-              xs={12}
-            >
-              <TextField
-                fullWidth
-                label="Email Address"
-                margin="dense"
-                name="email"
-                onChange={handleChange}
-                required
-                value={values.email}
-                variant="outlined"
-              />
-            </Grid>
-            <Grid
-              item
-              md={6}
-              xs={12}
-            >
-              <TextField
-                fullWidth
-                label="Phone Number"
-                margin="dense"
-                name="phone"
-                onChange={handleChange}
-                type="number"
-                value={values.phone}
-                variant="outlined"
-              />
-            </Grid>
-            <Grid
-              item
-              md={6}
-              xs={12}
-            >
-              <TextField
-                fullWidth
-                label="Select State"
-                margin="dense"
-                name="state"
-                onChange={handleChange}
-                required
-                select
-                // eslint-disable-next-line react/jsx-sort-props
-                SelectProps={{ native: true }}
-                value={values.state}
-                variant="outlined"
-              >
-                {states.map(option => (
-                  <option
-                    key={option.value}
-                    value={option.value}
-                  >
-                    {option.label}
-                  </option>
-                ))}
-              </TextField>
-            </Grid>
-            <Grid
-              item
-              md={6}
-              xs={12}
-            >
-              <TextField
-                fullWidth
-                label="Country"
-                margin="dense"
-                name="country"
-                onChange={handleChange}
-                required
-                value={values.country}
-                variant="outlined"
-              />
-            </Grid>
-          </Grid>
-        </CardContent>
-        <Divider />
-        <CardActions>
-          <Button
-            color="primary"
-            variant="contained"
-          >
-            Save details
-          </Button>
-        </CardActions>
-      </form>
-    </Card>
-  );
-};
-
-AccountDetails.propTypes = {
-  className: PropTypes.string
-};
-
-export default AccountDetails;

webui/src/views/Account/components/AccountDetails/index.js

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

webui/src/views/Account/components/AccountProfile/AccountProfile.js

@@ -1,111 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import moment from 'moment';
-import { makeStyles } from '@material-ui/styles';
-import {
-  Card,
-  CardActions,
-  CardContent,
-  Avatar,
-  Typography,
-  Divider,
-  Button,
-  LinearProgress
-} from '@material-ui/core';
-
-const useStyles = makeStyles(theme => ({
-  root: {},
-  details: {
-    display: 'flex'
-  },
-  avatar: {
-    marginLeft: 'auto',
-    height: 110,
-    width: 100,
-    flexShrink: 0,
-    flexGrow: 0
-  },
-  progress: {
-    marginTop: theme.spacing(2)
-  },
-  uploadButton: {
-    marginRight: theme.spacing(2)
-  }
-}));
-
-const AccountProfile = props => {
-  const { className, ...rest } = props;
-
-  const classes = useStyles();
-
-  const user = {
-    name: 'Shen Zhi',
-    city: 'Los Angeles',
-    country: 'USA',
-    timezone: 'GTM-7',
-    avatar: '/images/avatars/avatar_11.png'
-  };
-
-  return (
-    <Card
-      {...rest}
-      className={clsx(classes.root, className)}
-    >
-      <CardContent>
-        <div className={classes.details}>
-          <div>
-            <Typography
-              gutterBottom
-              variant="h2"
-            >
-              John Doe
-            </Typography>
-            <Typography
-              className={classes.locationText}
-              color="textSecondary"
-              variant="body1"
-            >
-              {user.city}, {user.country}
-            </Typography>
-            <Typography
-              className={classes.dateText}
-              color="textSecondary"
-              variant="body1"
-            >
-              {moment().format('hh:mm A')} ({user.timezone})
-            </Typography>
-          </div>
-          <Avatar
-            className={classes.avatar}
-            src={user.avatar}
-          />
-        </div>
-        <div className={classes.progress}>
-          <Typography variant="body1">Profile Completeness: 70%</Typography>
-          <LinearProgress
-            value={70}
-            variant="determinate"
-          />
-        </div>
-      </CardContent>
-      <Divider />
-      <CardActions>
-        <Button
-          className={classes.uploadButton}
-          color="primary"
-          variant="text"
-        >
-          Upload picture
-        </Button>
-        <Button variant="text">Remove picture</Button>
-      </CardActions>
-    </Card>
-  );
-};
-
-AccountProfile.propTypes = {
-  className: PropTypes.string
-};
-
-export default AccountProfile;

webui/src/views/Account/components/AccountProfile/index.js

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

webui/src/views/Account/components/index.js

@@ -1,2 +0,0 @@
-export { default as AccountDetails } from './AccountDetails';
-export { default as AccountProfile } from './AccountProfile';

webui/src/views/Account/index.js

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

webui/src/views/Dashboard/Dashboard.js

@@ -1,108 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/styles';
-import { Grid } from '@material-ui/core';
-
-import {
-  Budget,
-  TotalUsers,
-  TasksProgress,
-  TotalProfit,
-  LatestSales,
-  UsersByDevice,
-  LatestProducts,
-  LatestOrders
-} from './components';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    padding: theme.spacing(4)
-  }
-}));
-
-const Dashboard = () => {
-  const classes = useStyles();
-
-  return (
-    <div className={classes.root}>
-      <Grid
-        container
-        spacing={4}
-      >
-        <Grid
-          item
-          lg={3}
-          sm={6}
-          xl={3}
-          xs={12}
-        >
-          <Budget />
-        </Grid>
-        <Grid
-          item
-          lg={3}
-          sm={6}
-          xl={3}
-          xs={12}
-        >
-          <TotalUsers />
-        </Grid>
-        <Grid
-          item
-          lg={3}
-          sm={6}
-          xl={3}
-          xs={12}
-        >
-          <TasksProgress />
-        </Grid>
-        <Grid
-          item
-          lg={3}
-          sm={6}
-          xl={3}
-          xs={12}
-        >
-          <TotalProfit />
-        </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
-          item
-          lg={4}
-          md={6}
-          xl={3}
-          xs={12}
-        >
-          <LatestProducts />
-        </Grid>
-        <Grid
-          item
-          lg={8}
-          md={12}
-          xl={9}
-          xs={12}
-        >
-          <LatestOrders />
-        </Grid>
-      </Grid>
-    </div>
-  );
-};
-
-export default Dashboard;

webui/src/views/Dashboard/Dashboard.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {makeStyles} from '@material-ui/styles';
+import {Grid} from '@material-ui/core';
+
+import {
+    Budget,
+    TotalUsers,
+    TasksProgress,
+    TotalProfit,
+    LatestSales,
+    UsersByDevice,
+} from './components';
+
+const useStyles = makeStyles(theme => ({
+    root: {
+        padding: theme.spacing(4)
+    }
+}));
+
+const Dashboard = () => {
+    const classes = useStyles();
+
+    return (
+        <div className={classes.root}>
+            <Grid container spacing={4}>
+                <Grid item lg={3} sm={6} xl={3} xs={12}>
+                    <Budget/>
+                </Grid>
+                <Grid item lg={3} sm={6} xl={3} xs={12}>
+                    <TotalUsers/>
+                </Grid>
+                <Grid item lg={3} sm={6} xl={3} xs={12}>
+                    <TasksProgress/>
+                </Grid>
+                <Grid item lg={3} sm={6} xl={3} xs={12}>
+                    <TotalProfit/>
+                </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>
+    );
+};
+
+export default Dashboard;

webui/src/views/Dashboard/components/LatestOrders/LatestOrders.js

@@ -1,148 +0,0 @@
-import React, { useState } from 'react';
-import clsx from 'clsx';
-import moment from 'moment';
-import PerfectScrollbar from 'react-perfect-scrollbar';
-import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/styles';
-import {
-  Card,
-  CardActions,
-  CardHeader,
-  CardContent,
-  Button,
-  Divider,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  Tooltip,
-  TableSortLabel
-} from '@material-ui/core';
-import ArrowRightIcon from '@material-ui/icons/ArrowRight';
-
-import mockData from './data';
-import {StatusBullet} from '../../../../components';
-
-const useStyles = makeStyles(theme => ({
-  root: {},
-  content: {
-    padding: 0
-  },
-  inner: {
-    minWidth: 800
-  },
-  statusContainer: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  status: {
-    marginRight: theme.spacing(1)
-  },
-  actions: {
-    justifyContent: 'flex-end'
-  }
-}));
-
-const statusColors = {
-  delivered: 'success',
-  pending: 'info',
-  refunded: 'danger'
-};
-
-const LatestOrders = props => {
-  const { className, ...rest } = props;
-
-  const classes = useStyles();
-
-  const [orders] = useState(mockData);
-
-  return (
-    <Card
-      {...rest}
-      className={clsx(classes.root, className)}
-    >
-      <CardHeader
-        action={
-          <Button
-            color="primary"
-            size="small"
-            variant="outlined"
-          >
-            New entry
-          </Button>
-        }
-        title="Latest Orders"
-      />
-      <Divider />
-      <CardContent className={classes.content}>
-        <PerfectScrollbar>
-          <div className={classes.inner}>
-            <Table>
-              <TableHead>
-                <TableRow>
-                  <TableCell>Order Ref</TableCell>
-                  <TableCell>Customer</TableCell>
-                  <TableCell sortDirection="desc">
-                    <Tooltip
-                      enterDelay={300}
-                      title="Sort"
-                    >
-                      <TableSortLabel
-                        active
-                        direction="desc"
-                      >
-                        Date
-                      </TableSortLabel>
-                    </Tooltip>
-                  </TableCell>
-                  <TableCell>Status</TableCell>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {orders.map(order => (
-                  <TableRow
-                    hover
-                    key={order.id}
-                  >
-                    <TableCell>{order.ref}</TableCell>
-                    <TableCell>{order.customer.name}</TableCell>
-                    <TableCell>
-                      {moment(order.createdAt).format('DD/MM/YYYY')}
-                    </TableCell>
-                    <TableCell>
-                      <div className={classes.statusContainer}>
-                        <StatusBullet
-                          className={classes.status}
-                          color={statusColors[order.status]}
-                          size="sm"
-                        />
-                        {order.status}
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        </PerfectScrollbar>
-      </CardContent>
-      <Divider />
-      <CardActions className={classes.actions}>
-        <Button
-          color="primary"
-          size="small"
-          variant="text"
-        >
-          View all <ArrowRightIcon />
-        </Button>
-      </CardActions>
-    </Card>
-  );
-};
-
-LatestOrders.propTypes = {
-  className: PropTypes.string
-};
-
-export default LatestOrders;

webui/src/views/Dashboard/components/LatestOrders/data.js

@@ -1,64 +0,0 @@
-import uuid from 'uuid/v1';
-
-export default [
-  {
-    id: uuid(),
-    ref: 'CDD1049',
-    amount: 30.5,
-    customer: {
-      name: 'Ekaterina Tankova'
-    },
-    createdAt: 1555016400000,
-    status: 'pending'
-  },
-  {
-    id: uuid(),
-    ref: 'CDD1048',
-    amount: 25.1,
-    customer: {
-      name: 'Cao Yu'
-    },
-    createdAt: 1555016400000,
-    status: 'delivered'
-  },
-  {
-    id: uuid(),
-    ref: 'CDD1047',
-    amount: 10.99,
-    customer: {
-      name: 'Alexa Richardson'
-    },
-    createdAt: 1554930000000,
-    status: 'refunded'
-  },
-  {
-    id: uuid(),
-    ref: 'CDD1046',
-    amount: 96.43,
-    customer: {
-      name: 'Anje Keizer'
-    },
-    createdAt: 1554757200000,
-    status: 'pending'
-  },
-  {
-    id: uuid(),
-    ref: 'CDD1045',
-    amount: 32.54,
-    customer: {
-      name: 'Clarke Gillebert'
-    },
-    createdAt: 1554670800000,
-    status: 'delivered'
-  },
-  {
-    id: uuid(),
-    ref: 'CDD1044',
-    amount: 16.76,
-    customer: {
-      name: 'Adam Denisov'
-    },
-    createdAt: 1554670800000,
-    status: 'delivered'
-  }
-];