changed file extensions to .tsx, removed eslint

src/App.tsx

@@ -0,0 +1,21 @@
+import 'react-perfect-scrollbar/dist/css/styles.css';
+import React from 'react';
+import { useRoutes } from 'react-router-dom';
+import { ThemeProvider } from '@material-ui/core';
+import GlobalStyles from 'src/components/GlobalStyles';
+import 'src/mixins/chartjs';
+import theme from 'src/theme';
+import routes from 'src/routes';
+
+const App = () => {
+  const routing = useRoutes(routes);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyles />
+      {routing}
+    </ThemeProvider>
+  );
+};
+
+export default App;

src/components/GlobalStyles.ts

@@ -0,0 +1,37 @@
+import { createStyles, makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles(() => createStyles({
+  '@global': {
+    '*': {
+      boxSizing: 'border-box',
+      margin: 0,
+      padding: 0,
+    },
+    html: {
+      '-webkit-font-smoothing': 'antialiased',
+      '-moz-osx-font-smoothing': 'grayscale',
+      height: '100%',
+      width: '100%'
+    },
+    body: {
+      backgroundColor: '#f4f6f8',
+      height: '100%',
+      width: '100%'
+    },
+    a: {
+      textDecoration: 'none'
+    },
+    '#root': {
+      height: '100%',
+      width: '100%'
+    }
+  }
+}));
+
+const GlobalStyles = () => {
+  useStyles();
+
+  return null;
+};
+
+export default GlobalStyles;

src/components/Logo.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Logo = (props: any) => {
+  return <img alt="Logo" src="/static/logo.svg" {...props} />;
+};
+
+export default Logo;

src/components/Page.tsx

@@ -0,0 +1,25 @@
+import React, { forwardRef } from 'react';
+import { Helmet } from 'react-helmet';
+import PropTypes from 'prop-types';
+// @ts-ignore
+const Page: React.FC<any> = forwardRef<any>(
+  // @ts-ignore
+  ({ children, title = '', ...rest }, ref) => {
+    return (
+      <div ref={ref} {...rest}>
+        <Helmet>
+          <title>{title}</title>
+        </Helmet>
+        {children}
+      </div>
+    );
+  }
+);
+
+Page.propTypes = {
+  // @ts-ignore
+  children: PropTypes.node.isRequired,
+  title: PropTypes.string
+};
+
+export default Page;

src/icons/Facebook.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SvgIcon } from '@material-ui/core';
+
+const 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>
+  );
+};
+
+export default Facebook;

src/icons/Google.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SvgIcon } from '@material-ui/core';
+
+const 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>
+  );
+};
+
+export default Google;

src/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
+import * as serviceWorker from './serviceWorker';
+import App from './App';
+
+// @ts-ignore
+if (!window.__skip_render) {
+  ReactDOM.render(
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>,
+    document.getElementById('root')
+  );
+}
+
+serviceWorker.unregister();

src/layouts/DashboardLayout/NavBar/NavItem.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { NavLink as RouterLink } from 'react-router-dom';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import {
+  Button,
+  ListItem,
+  makeStyles
+} from '@material-ui/core';
+
+const useStyles = makeStyles((theme) => ({
+  item: {
+    display: 'flex',
+    paddingTop: 0,
+    paddingBottom: 0
+  },
+  button: {
+    color: theme.palette.text.secondary,
+    fontWeight: theme.typography.fontWeightMedium,
+    justifyContent: 'flex-start',
+    letterSpacing: 0,
+    padding: '10px 8px',
+    textTransform: 'none',
+    width: '100%'
+  },
+  icon: {
+    marginRight: theme.spacing(1)
+  },
+  title: {
+    marginRight: 'auto'
+  },
+  active: {
+    color: theme.palette.primary.main,
+    '& $title': {
+      fontWeight: theme.typography.fontWeightMedium
+    },
+    '& $icon': {
+      color: theme.palette.primary.main
+    }
+  }
+}));
+
+const NavItem = ({
+  className,
+  href,
+  icon: Icon,
+  title,
+  ...rest
+}) => {
+  const classes = useStyles();
+
+  return (
+    <ListItem
+      className={clsx(classes.item, className)}
+      disableGutters
+      {...rest}
+    >
+      <Button
+        activeClassName={classes.active}
+        className={classes.button}
+        component={RouterLink}
+        to={href}
+      >
+        {Icon && (
+          <Icon
+            className={classes.icon}
+            size="20"
+          />
+        )}
+        <span className={classes.title}>
+          {title}
+        </span>
+      </Button>
+    </ListItem>
+  );
+};
+
+NavItem.propTypes = {
+  className: PropTypes.string,
+  href: PropTypes.string,
+  icon: PropTypes.elementType,
+  title: PropTypes.string
+};
+
+export default NavItem;