remade from create-react-app for completely deleting unnecessary codes from template code

-module.exports = {
-  "presets": [
-    "react-app"
-  ],
-  "plugins": [
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-proposal-optional-chaining"
-  ]
-};
\ No newline at end of file

-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
-
-// Make sure that including paths.js after env.js will read .env variables.
-delete require.cache[require.resolve('./paths')];
-
-const NODE_ENV = process.env.NODE_ENV;
-if (!NODE_ENV) {
-  throw new Error(
-    'The NODE_ENV environment variable is required but was not specified.'
-  );
-}
-
-// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
-var dotenvFiles = [
-  `${paths.dotenv}.${NODE_ENV}.local`,
-  `${paths.dotenv}.${NODE_ENV}`,
-  // Don't include `.env.local` for `test` environment
-  // since normally you expect tests to produce the same
-  // results for everyone
-  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
-  paths.dotenv,
-].filter(Boolean);
-
-// Load environment variables from .env* files. Suppress warnings using silent
-// if this file is missing. dotenv will never modify any environment variables
-// that have already been set.  Variable expansion is supported in .env files.
-// https://github.com/motdotla/dotenv
-// https://github.com/motdotla/dotenv-expand
-dotenvFiles.forEach(dotenvFile => {
-  if (fs.existsSync(dotenvFile)) {
-    require('dotenv-expand')(
-      require('dotenv').config({
-        path: dotenvFile,
-      })
-    );
-  }
-});
-
-// We support resolving modules according to `NODE_PATH`.
-// This lets you use absolute paths in imports inside large monorepos:
-// https://github.com/facebook/create-react-app/issues/253.
-// It works similar to `NODE_PATH` in Node itself:
-// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
-// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
-// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
-// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
-// We also resolve them to make sure all tools using them work consistently.
-const appDirectory = fs.realpathSync(process.cwd());
-process.env.NODE_PATH = (process.env.NODE_PATH || '')
-  .split(path.delimiter)
-  .filter(folder => folder && !path.isAbsolute(folder))
-  .map(folder => path.resolve(appDirectory, folder))
-  .join(path.delimiter);
-
-// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
-// injected into the application via DefinePlugin in Webpack configuration.
-const REACT_APP = /^REACT_APP_/i;
-
-function getClientEnvironment(publicUrl) {
-  const raw = Object.keys(process.env)
-    .filter(key => REACT_APP.test(key))
-    .reduce(
-      (env, key) => {
-        env[key] = process.env[key];
-        return env;
-      },
-      {
-        // Useful for determining whether we’re running in production mode.
-        // Most importantly, it switches React into the correct mode.
-        NODE_ENV: process.env.NODE_ENV || 'development',
-        // Useful for resolving the correct path to static assets in `public`.
-        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
-        // This should only be used as an escape hatch. Normally you would put
-        // images into the `src` and `import` them in code to get their paths.
-        PUBLIC_URL: publicUrl,
-      }
-    );
-  // Stringify all values so we can feed into Webpack DefinePlugin
-  const stringified = {
-    'process.env': Object.keys(raw).reduce((env, key) => {
-      env[key] = JSON.stringify(raw[key]);
-      return env;
-    }, {}),
-  };
-
-  return { raw, stringified };
-}
-
-module.exports = getClientEnvironment;

-'use strict';
-
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process() {
-    return 'module.exports = {};';
-  },
-  getCacheKey() {
-    // The output is always the same.
-    return 'cssTransform';
-  },
-};

-'use strict';
-
-const path = require('path');
-
-// This is a custom Jest transformer turning file imports into filenames.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process(src, filename) {
-    const assetFilename = JSON.stringify(path.basename(filename));
-
-    if (filename.match(/\.svg$/)) {
-      return `module.exports = {
-        __esModule: true,
-        default: ${assetFilename},
-        ReactComponent: (props) => ({
-          $$typeof: Symbol.for('react.element'),
-          type: 'svg',
-          ref: null,
-          key: null,
-          props: Object.assign({}, props, {
-            children: ${assetFilename}
-          })
-        }),
-      };`;
-    }
-
-    return `module.exports = ${assetFilename};`;
-  },
-};

-'use strict';
-
-const path = require('path');
-const fs = require('fs');
-const url = require('url');
-
-// Make sure any symlinks in the project folder are resolved:
-// https://github.com/facebook/create-react-app/issues/637
-const appDirectory = fs.realpathSync(process.cwd());
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
-
-const envPublicUrl = process.env.PUBLIC_URL;
-
-function ensureSlash(inputPath, needsSlash) {
-  const hasSlash = inputPath.endsWith('/');
-  if (hasSlash && !needsSlash) {
-    return inputPath.substr(0, inputPath.length - 1);
-  } else if (!hasSlash && needsSlash) {
-    return `${inputPath}/`;
-  } else {
-    return inputPath;
-  }
-}
-
-const getPublicUrl = appPackageJson =>
-  envPublicUrl || require(appPackageJson).homepage;
-
-// We use `PUBLIC_URL` environment variable or "homepage" field to infer
-// "public path" at which the app is served.
-// Webpack needs to know it to put the right <script> hrefs into HTML even in
-// single-page apps that may serve index.html for nested URLs like /todos/42.
-// We can't use a relative path in HTML because we don't want to load something
-// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
-function getServedPath(appPackageJson) {
-  const publicUrl = getPublicUrl(appPackageJson);
-  const servedUrl =
-    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
-  return ensureSlash(servedUrl, true);
-}
-
-// config after eject: we're in ./config/
-module.exports = {
-  dotenv: resolveApp('.env'),
-  appPath: resolveApp('.'),
-  appBuild: resolveApp('build'),
-  appPublic: resolveApp('public'),
-  appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveApp('src/index.js'),
-  appPackageJson: resolveApp('package.json'),
-  appSrc: resolveApp('src'),
-  yarnLockFile: resolveApp('yarn.lock'),
-  testsSetup: resolveApp('src/setupTests.js'),
-  proxySetup: resolveApp('src/setupProxy.js'),
-  appNodeModules: resolveApp('node_modules'),
-  publicUrl: getPublicUrl(resolveApp('package.json')),
-  servedPath: getServedPath(resolveApp('package.json')),
-};

-'use strict';
-
-const path = require('path');
-const webpack = require('webpack');
-const PnpWebpackPlugin = require('pnp-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
-const getClientEnvironment = require('./env');
-const paths = require('./paths');
-const ManifestPlugin = require('webpack-manifest-plugin');
-const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
-
-
-// Webpack uses `publicPath` to determine where the app is being served from.
-// In development, we always serve from the root. This makes config easier.
-const publicPath = '/';
-// `publicUrl` is just like `publicPath`, but we will provide it to our app
-// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
-// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
-const publicUrl = '';
-// Get environment variables to inject into our app.
-const env = getClientEnvironment(publicUrl);
-
-// style files regexes
-const cssRegex = /\.css$/;
-const cssModuleRegex = /\.module\.css$/;
-const sassRegex = /\.(scss|sass)$/;
-const sassModuleRegex = /\.module\.(scss|sass)$/;
-
-// common function to get style loaders
-const getStyleLoaders = (cssOptions, preProcessor) => {
-  const loaders = [
-    require.resolve('style-loader'),
-    {
-      loader: require.resolve('css-loader'),
-      options: cssOptions,
-    },
-    {
-      // Options for PostCSS as we reference these options twice
-      // Adds vendor prefixing based on your specified browser support in
-      // package.json
-      loader: require.resolve('postcss-loader'),
-      options: {
-        // Necessary for external CSS imports to work
-        // https://github.com/facebook/create-react-app/issues/2677
-        ident: 'postcss',
-        plugins: () => [
-          require('postcss-flexbugs-fixes'),
-          require('postcss-preset-env')({
-            autoprefixer: {
-              flexbox: 'no-2009',
-            },
-            stage: 3,
-          }),
-        ],
-      },
-    },
-  ];
-  if (preProcessor) {
-    loaders.push(require.resolve(preProcessor));
-  }
-  return loaders;
-};
-
-// This is the development configuration.
-// It is focused on developer experience and fast rebuilds.
-// The production configuration is different and lives in a separate file.
-module.exports = {
-  mode: 'development',
-  // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
-  // See the discussion in https://github.com/facebook/create-react-app/issues/343
-  devtool: 'cheap-module-source-map',
-  // These are the "entry points" to our application.
-  // This means they will be the "root" imports that are included in JS bundle.
-  entry: [
-    // Include an alternative client for WebpackDevServer. A client's job is to
-    // connect to WebpackDevServer by a socket and get notified about changes.
-    // When you save a file, the client will either apply hot updates (in case
-    // of CSS changes), or refresh the page (in case of JS changes). When you
-    // make a syntax error, this client will display a syntax error overlay.
-    // Note: instead of the default WebpackDevServer client, we use a custom one
-    // to bring better experience for Create React App users. You can replace
-    // the line below with these two lines if you prefer the stock client:
-    // require.resolve('webpack-dev-server/client') + '?/',
-    // require.resolve('webpack/hot/dev-server'),
-    require.resolve('react-dev-utils/webpackHotDevClient'),
-    // Finally, this is your app's code:
-    paths.appIndexJs,
-    // We include the app code last so that if there is a runtime error during
-    // initialization, it doesn't blow up the WebpackDevServer client, and
-    // changing JS code would still trigger a refresh.
-  ],
-  output: {
-    // Add /* filename */ comments to generated require()s in the output.
-    pathinfo: true,
-    // This does not produce a real file. It's just the virtual path that is
-    // served by WebpackDevServer in development. This is the JS bundle
-    // containing code from all our entry points, and the Webpack runtime.
-    filename: 'static/js/bundle.js',
-    // There are also additional JS chunk files if you use code splitting.
-    chunkFilename: 'static/js/[name].chunk.js',
-    // This is the URL that app is served from. We use "/" in development.
-    publicPath: publicPath,
-    // Point sourcemap entries to original disk location (format as URL on Windows)
-    devtoolModuleFilenameTemplate: info =>
-      path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
-  },
-  optimization: {
-    // Automatically split vendor and commons
-    // https://twitter.com/wSokra/status/969633336732905474
-    // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
-    splitChunks: {
-      chunks: 'all',
-      name: false,
-    },
-    // Keep the runtime chunk seperated to enable long term caching
-    // https://twitter.com/wSokra/status/969679223278505985
-    runtimeChunk: true,
-  },
-  resolve: {
-    // This allows you to set a fallback for where Webpack should look for modules.
-    // We placed these paths second because we want `node_modules` to "win"
-    // if there are any conflicts. This matches Node resolution mechanism.
-    // https://github.com/facebook/create-react-app/issues/253
-    modules: ['node_modules'].concat(
-      // It is guaranteed to exist because we tweak it in `env.js`
-      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
-    ),
-    // These are the reasonable defaults supported by the Node ecosystem.
-    // We also include JSX as a common component filename extension to support
-    // some tools, although we do not recommend using it, see:
-    // https://github.com/facebook/create-react-app/issues/290
-    // `web` extension prefixes have been added for better support
-    // for React Native Web.
-    extensions: ['.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx'],
-    alias: {
-      // Support React Native Web
-      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-      'react-native': 'react-native-web',
-    },
-    plugins: [
-      // Adds support for installing with Plug'n'Play, leading to faster installs and adding
-      // guards against forgotten dependencies and such.
-      PnpWebpackPlugin,
-      // Prevents users from importing files from outside of src/ (or node_modules/).
-      // This often causes confusion because we only process files within src/ with babel.
-      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
-      // please link the files into your node_modules/ and let module-resolution kick in.
-      // Make sure your source files are compiled, as they will not be processed in any way.
-      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
-    ],
-  },
-  resolveLoader: {
-    plugins: [
-      // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
-      // from the current package.
-      PnpWebpackPlugin.moduleLoader(module),
-    ],
-  },
-  module: {
-    strictExportPresence: true,
-    rules: [
-      // Disable require.ensure as it's not a standard language feature.
-      { parser: { requireEnsure: false } },
-
-      // First, run the linter.
-      // It's important to do this before Babel processes the JS.
-      {
-        test: /\.(js|mjs|jsx)$/,
-        enforce: 'pre',
-        use: [
-          {
-            options: {
-              formatter: require.resolve('react-dev-utils/eslintFormatter'),
-              eslintPath: require.resolve('eslint'),
-              
-            },
-            loader: require.resolve('eslint-loader'),
-          },
-        ],
-        include: paths.appSrc,
-      },
-      {
-        // "oneOf" will traverse all following loaders until one will
-        // match the requirements. When no loader matches it will fall
-        // back to the "file" loader at the end of the loader list.
-        oneOf: [
-          // "url" loader works like "file" loader except that it embeds assets
-          // smaller than specified limit in bytes as data URLs to avoid requests.
-          // A missing `test` is equivalent to a match.
-          {
-            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-            loader: require.resolve('url-loader'),
-            options: {
-              limit: 10000,
-              name: 'static/media/[name].[ext]',
-            },
-          },
-          // Process application JS with Babel.
-          // The preset includes JSX, Flow, and some ESnext features.
-          {
-            test: /\.(js|mjs|jsx)$/,
-            include: paths.appSrc,
-            loader: require.resolve('babel-loader'),
-            options: {
-              customize: require.resolve(
-                'babel-preset-react-app/webpack-overrides'
-              ),
-              
-              plugins: [
-                [
-                  require.resolve('babel-plugin-named-asset-import'),
-                  {
-                    loaderMap: {
-                      svg: {
-                        ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
-                      },
-                    },
-                  },
-                ],
-              ],
-              // This is a feature of `babel-loader` for webpack (not Babel itself).
-              // It enables caching results in ./node_modules/.cache/babel-loader/
-              // directory for faster rebuilds.
-              cacheDirectory: true,
-              // Don't waste time on Gzipping the cache
-              cacheCompression: false,
-            },
-          },
-          // Process any JS outside of the app with Babel.
-          // Unlike the application JS, we only compile the standard ES features.
-          {
-            test: /\.(js|mjs)$/,
-            exclude: /@babel(?:\/|\\{1,2})runtime/,
-            loader: require.resolve('babel-loader'),
-            options: {
-              babelrc: false,
-              configFile: false,
-              compact: false,
-              presets: [
-                [
-                  require.resolve('babel-preset-react-app/dependencies'),
-                  { helpers: true },
-                ],
-              ],
-              cacheDirectory: true,
-              // Don't waste time on Gzipping the cache
-              cacheCompression: false,
-              
-              // If an error happens in a package, it's possible to be
-              // because it was compiled. Thus, we don't want the browser
-              // debugger to show the original code. Instead, the code
-              // being evaluated would be much more helpful.
-              sourceMaps: false,
-            },
-          },
-          // "postcss" loader applies autoprefixer to our CSS.
-          // "css" loader resolves paths in CSS and adds assets as dependencies.
-          // "style" loader turns CSS into JS modules that inject <style> tags.
-          // In production, we use a plugin to extract that CSS to a file, but
-          // in development "style" loader enables hot editing of CSS.
-          // By default we support CSS Modules with the extension .module.css
-          {
-            test: cssRegex,
-            exclude: cssModuleRegex,
-            use: getStyleLoaders({
-              importLoaders: 1,
-            }),
-          },
-          // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
-          // using the extension .module.css
-          {
-            test: cssModuleRegex,
-            use: getStyleLoaders({
-              importLoaders: 1,
-              modules: true,
-              getLocalIdent: getCSSModuleLocalIdent,
-            }),
-          },
-          // Opt-in support for SASS (using .scss or .sass extensions).
-          // Chains the sass-loader with the css-loader and the style-loader
-          // to immediately apply all styles to the DOM.
-          // By default we support SASS Modules with the
-          // extensions .module.scss or .module.sass
-          {
-            test: sassRegex,
-            exclude: sassModuleRegex,
-            use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
-          },
-          // Adds support for CSS Modules, but using SASS
-          // using the extension .module.scss or .module.sass
-          {
-            test: sassModuleRegex,
-            use: getStyleLoaders(
-              {
-                importLoaders: 2,
-                modules: true,
-                getLocalIdent: getCSSModuleLocalIdent,
-              },
-              'sass-loader'
-            ),
-          },
-          // "file" loader makes sure those assets get served by WebpackDevServer.
-          // When you `import` an asset, you get its (virtual) filename.
-          // In production, they would get copied to the `build` folder.
-          // This loader doesn't use a "test" so it will catch all modules
-          // that fall through the other loaders.
-          {
-            // Exclude `js` files to keep "css" loader working as it injects
-            // its runtime that would otherwise be processed through "file" loader.
-            // Also exclude `html` and `json` extensions so they get processed
-            // by webpacks internal loaders.
-            exclude: [/\.(js|mjs|jsx)$/, /\.html$/, /\.json$/],
-            loader: require.resolve('file-loader'),
-            options: {
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-        ],
-      },
-      // ** STOP ** Are you adding a new loader?
-      // Make sure to add the new loader(s) before the "file" loader.
-    ],
-  },
-  plugins: [
-    // Generates an `index.html` file with the <script> injected.
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: paths.appHtml,
-    }),
-    // Makes some environment variables available in index.html.
-    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    // In development, this will be an empty string.
-    new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
-    // This gives some necessary context to module not found errors, such as
-    // the requesting resource.
-    new ModuleNotFoundPlugin(paths.appPath),
-    // Makes some environment variables available to the JS code, for example:
-    // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
-    new webpack.DefinePlugin(env.stringified),
-    // This is necessary to emit hot updates (currently CSS only):
-    new webpack.HotModuleReplacementPlugin(),
-    // Watcher doesn't work well if you mistype casing in a path so we use
-    // a plugin that prints an error when you attempt to do this.
-    // See https://github.com/facebook/create-react-app/issues/240
-    new CaseSensitivePathsPlugin(),
-    // If you require a missing module and then `npm install` it, you still have
-    // to restart the development server for Webpack to discover it. This plugin
-    // makes the discovery automatic so you don't have to restart.
-    // See https://github.com/facebook/create-react-app/issues/186
-    new WatchMissingNodeModulesPlugin(paths.appNodeModules),
-    // Moment.js is an extremely popular library that bundles large locale files
-    // by default due to how Webpack interprets its code. This is a practical
-    // solution that requires the user to opt into importing specific locales.
-    // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-    // You can remove this if you don't use Moment.js:
-    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-    // Generate a manifest file which contains a mapping of all asset filenames
-    // to their corresponding output file so that tools can pick it up without
-    // having to parse `index.html`.
-    new ManifestPlugin({
-      fileName: 'asset-manifest.json',
-      publicPath: publicPath,
-    }),
-  ],
-
-  // Some libraries import Node modules but don't use them in the browser.
-  // Tell Webpack to provide empty mocks for them so importing them works.
-  node: {
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty',
-  },
-  // Turn off performance processing because we utilize
-  // our own hints via the FileSizeReporter
-  performance: false,
-};

-'use strict';
-
-const path = require('path');
-const webpack = require('webpack');
-const PnpWebpackPlugin = require('pnp-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const safePostCssParser = require('postcss-safe-parser');
-const ManifestPlugin = require('webpack-manifest-plugin');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
-const paths = require('./paths');
-const getClientEnvironment = require('./env');
-const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
-
-
-// Webpack uses `publicPath` to determine where the app is being served from.
-// It requires a trailing slash, or the file assets will get an incorrect path.
-const publicPath = paths.servedPath;
-// Some apps do not use client-side routing with pushState.
-// For these, "homepage" can be set to "." to enable relative asset paths.
-const shouldUseRelativeAssetPaths = publicPath === './';
-// Source maps are resource heavy and can cause out of memory issue for large source files.
-const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
-// Some apps do not need the benefits of saving a web request, so not inlining the chunk
-// makes for a smoother build process.
-const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
-// `publicUrl` is just like `publicPath`, but we will provide it to our app
-// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
-// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
-const publicUrl = publicPath.slice(0, -1);
-// Get environment variables to inject into our app.
-const env = getClientEnvironment(publicUrl);
-
-// Assert this just to be safe.
-// Development builds of React are slow and not intended for production.
-if (env.stringified['process.env'].NODE_ENV !== '"production"') {
-  throw new Error('Production builds must have NODE_ENV=production.');
-}
-
-// style files regexes
-const cssRegex = /\.css$/;
-const cssModuleRegex = /\.module\.css$/;
-const sassRegex = /\.(scss|sass)$/;
-const sassModuleRegex = /\.module\.(scss|sass)$/;
-
-// common function to get style loaders
-const getStyleLoaders = (cssOptions, preProcessor) => {
-  const loaders = [
-    {
-      loader: MiniCssExtractPlugin.loader,
-      options: Object.assign(
-        {},
-        shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
-      ),
-    },
-    {
-      loader: require.resolve('css-loader'),
-      options: cssOptions,
-    },
-    {
-      // Options for PostCSS as we reference these options twice
-      // Adds vendor prefixing based on your specified browser support in
-      // package.json
-      loader: require.resolve('postcss-loader'),
-      options: {
-        // Necessary for external CSS imports to work
-        // https://github.com/facebook/create-react-app/issues/2677
-        ident: 'postcss',
-        plugins: () => [
-          require('postcss-flexbugs-fixes'),
-          require('postcss-preset-env')({
-            autoprefixer: {
-              flexbox: 'no-2009',
-            },
-            stage: 3,
-          }),
-        ],
-        sourceMap: shouldUseSourceMap,
-      },
-    },
-  ];
-  if (preProcessor) {
-    loaders.push({
-      loader: require.resolve(preProcessor),
-      options: {
-        sourceMap: shouldUseSourceMap,
-      },
-    });
-  }
-  return loaders;
-};
-
-// This is the production configuration.
-// It compiles slowly and is focused on producing a fast and minimal bundle.
-// The development configuration is different and lives in a separate file.
-module.exports = {
-  mode: 'production',
-  // Don't attempt to continue if there are any errors.
-  bail: true,
-  // We generate sourcemaps in production. This is slow but gives good results.
-  // You can exclude the *.map files from the build during deployment.
-  devtool: false,
-  // In production, we only want to load the app code.
-  entry: [paths.appIndexJs],
-  output: {
-    // The build folder.
-    path: paths.appBuild,
-    // Generated JS file names (with nested folders).
-    // There will be one main bundle, and one file per asynchronous chunk.
-    // We don't currently advertise code splitting but Webpack supports it.
-    filename: 'static/js/[name].[chunkhash:8].js',
-    chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
-    // We inferred the "public path" (such as / or /my-project) from homepage.
-    publicPath: publicPath,
-    // Point sourcemap entries to original disk location (format as URL on Windows)
-    devtoolModuleFilenameTemplate: info =>
-      path
-        .relative(paths.appSrc, info.absoluteResourcePath)
-        .replace(/\\/g, '/'),
-  },
-  optimization: {
-    minimizer: [
-      new TerserPlugin({
-        terserOptions: {
-          parse: {
-            // we want terser to parse ecma 8 code. However, we don't want it
-            // to apply any minfication steps that turns valid ecma 5 code
-            // into invalid ecma 5 code. This is why the 'compress' and 'output'
-            // sections only apply transformations that are ecma 5 safe
-            // https://github.com/facebook/create-react-app/pull/4234
-            ecma: 8,
-          },
-          compress: {
-            ecma: 5,
-            warnings: false,
-            // Disabled because of an issue with Uglify breaking seemingly valid code:
-            // https://github.com/facebook/create-react-app/issues/2376
-            // Pending further investigation:
-            // https://github.com/mishoo/UglifyJS2/issues/2011
-            comparisons: false,
-            // Disabled because of an issue with Terser breaking valid code:
-            // https://github.com/facebook/create-react-app/issues/5250
-            // Pending futher investigation:
-            // https://github.com/terser-js/terser/issues/120
-            inline: 2,
-          },
-          mangle: {
-            safari10: true,
-            reserved: ['$super'],
-          },
-          output: {
-            ecma: 5,
-            comments: false,
-            // Turned on because emoji and regex is not minified properly using default
-            // https://github.com/facebook/create-react-app/issues/2488
-            ascii_only: true,
-          },
-        },
-        // Use multi-process parallel running to improve the build speed
-        // Default number of concurrent runs: os.cpus().length - 1
-        parallel: true,
-        // Enable file caching
-        cache: true,
-        sourceMap: shouldUseSourceMap,
-      }),
-      new OptimizeCSSAssetsPlugin({
-        cssProcessorOptions: {
-          parser: safePostCssParser,
-          map: shouldUseSourceMap
-            ? {
-                // `inline: false` forces the sourcemap to be output into a
-                // separate file
-                inline: false,
-                // `annotation: true` appends the sourceMappingURL to the end of
-                // the css file, helping the browser find the sourcemap
-                annotation: true,
-              }
-            : false,
-        },
-      }),
-    ],
-    // Automatically split vendor and commons
-    // https://twitter.com/wSokra/status/969633336732905474
-    // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
-    splitChunks: {
-      chunks: 'all',
-      name: false,
-    },
-    // Keep the runtime chunk seperated to enable long term caching
-    // https://twitter.com/wSokra/status/969679223278505985
-    runtimeChunk: true,
-  },
-  resolve: {
-    // This allows you to set a fallback for where Webpack should look for modules.
-    // We placed these paths second because we want `node_modules` to "win"
-    // if there are any conflicts. This matches Node resolution mechanism.
-    // https://github.com/facebook/create-react-app/issues/253
-    modules: ['node_modules'].concat(
-      // It is guaranteed to exist because we tweak it in `env.js`
-      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
-    ),
-    // These are the reasonable defaults supported by the Node ecosystem.
-    // We also include JSX as a common component filename extension to support
-    // some tools, although we do not recommend using it, see:
-    // https://github.com/facebook/create-react-app/issues/290
-    // `web` extension prefixes have been added for better support
-    // for React Native Web.
-    extensions: ['.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx'],
-    alias: {
-      // Support React Native Web
-      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-      'react-native': 'react-native-web',
-    },
-    plugins: [
-      // Adds support for installing with Plug'n'Play, leading to faster installs and adding
-      // guards against forgotten dependencies and such.
-      PnpWebpackPlugin,
-      // Prevents users from importing files from outside of src/ (or node_modules/).
-      // This often causes confusion because we only process files within src/ with babel.
-      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
-      // please link the files into your node_modules/ and let module-resolution kick in.
-      // Make sure your source files are compiled, as they will not be processed in any way.
-      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
-    ],
-  },
-  resolveLoader: {
-    plugins: [
-      // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
-      // from the current package.
-      PnpWebpackPlugin.moduleLoader(module),
-    ],
-  },
-  module: {
-    strictExportPresence: true,
-    rules: [
-      // Disable require.ensure as it's not a standard language feature.
-      { parser: { requireEnsure: false } },
-
-      // First, run the linter.
-      // It's important to do this before Babel processes the JS.
-      {
-        test: /\.(js|mjs|jsx)$/,
-        enforce: 'pre',
-        use: [
-          {
-            options: {
-              formatter: require.resolve('react-dev-utils/eslintFormatter'),
-              eslintPath: require.resolve('eslint'),
-              
-            },
-            loader: require.resolve('eslint-loader'),
-          },
-        ],
-        include: paths.appSrc,
-      },
-      {
-        // "oneOf" will traverse all following loaders until one will
-        // match the requirements. When no loader matches it will fall
-        // back to the "file" loader at the end of the loader list.
-        oneOf: [
-          // "url" loader works just like "file" loader but it also embeds
-          // assets smaller than specified size as data URLs to avoid requests.
-          {
-            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-            loader: require.resolve('url-loader'),
-            options: {
-              limit: 10000,
-              name: 'static/media/[name].[ext]',
-            },
-          },
-          // Process application JS with Babel.
-          // The preset includes JSX, Flow, and some ESnext features.
-          {
-            test: /\.(js|mjs|jsx)$/,
-            include: paths.appSrc,
-
-            loader: require.resolve('babel-loader'),
-            options: {
-              customize: require.resolve(
-                'babel-preset-react-app/webpack-overrides'
-              ),
-              
-              plugins: [
-                [
-                  require.resolve('babel-plugin-named-asset-import'),
-                  {
-                    loaderMap: {
-                      svg: {
-                        ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
-                      },
-                    },
-                  },
-                ],
-              ],
-              cacheDirectory: true,
-              // Save disk space when time isn't as important
-              cacheCompression: true,
-              compact: true,
-            },
-          },
-          // Process any JS outside of the app with Babel.
-          // Unlike the application JS, we only compile the standard ES features.
-          {
-            test: /\.(js|mjs)$/,
-            exclude: /@babel(?:\/|\\{1,2})runtime/,
-            loader: require.resolve('babel-loader'),
-            options: {
-              babelrc: false,
-              configFile: false,
-              compact: false,
-              presets: [
-                [
-                  require.resolve('babel-preset-react-app/dependencies'),
-                  { helpers: true },
-                ],
-              ],
-              cacheDirectory: true,
-              // Save disk space when time isn't as important
-              cacheCompression: true,
-              
-              // If an error happens in a package, it's possible to be
-              // because it was compiled. Thus, we don't want the browser
-              // debugger to show the original code. Instead, the code
-              // being evaluated would be much more helpful.
-              sourceMaps: false,
-            },
-          },
-          // "postcss" loader applies autoprefixer to our CSS.
-          // "css" loader resolves paths in CSS and adds assets as dependencies.
-          // `MiniCSSExtractPlugin` extracts styles into CSS
-          // files. If you use code splitting, async bundles will have their own separate CSS chunk file.
-          // By default we support CSS Modules with the extension .module.css
-          {
-            test: cssRegex,
-            exclude: cssModuleRegex,
-            loader: getStyleLoaders({
-              importLoaders: 1,
-              sourceMap: shouldUseSourceMap,
-            }),
-            // Don't consider CSS imports dead code even if the
-            // containing package claims to have no side effects.
-            // Remove this when webpack adds a warning or an error for this.
-            // See https://github.com/webpack/webpack/issues/6571
-            sideEffects: true,
-          },
-          // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
-          // using the extension .module.css
-          {
-            test: cssModuleRegex,
-            loader: getStyleLoaders({
-              importLoaders: 1,
-              sourceMap: shouldUseSourceMap,
-              modules: true,
-              getLocalIdent: getCSSModuleLocalIdent,
-            }),
-          },
-          // Opt-in support for SASS. The logic here is somewhat similar
-          // as in the CSS routine, except that "sass-loader" runs first
-          // to compile SASS files into CSS.
-          // By default we support SASS Modules with the
-          // extensions .module.scss or .module.sass
-          {
-            test: sassRegex,
-            exclude: sassModuleRegex,
-            loader: getStyleLoaders(
-              {
-                importLoaders: 2,
-                sourceMap: shouldUseSourceMap,
-              },
-              'sass-loader'
-            ),
-            // Don't consider CSS imports dead code even if the
-            // containing package claims to have no side effects.
-            // Remove this when webpack adds a warning or an error for this.
-            // See https://github.com/webpack/webpack/issues/6571
-            sideEffects: true,
-          },
-          // Adds support for CSS Modules, but using SASS
-          // using the extension .module.scss or .module.sass
-          {
-            test: sassModuleRegex,
-            loader: getStyleLoaders(
-              {
-                importLoaders: 2,
-                sourceMap: shouldUseSourceMap,
-                modules: true,
-                getLocalIdent: getCSSModuleLocalIdent,
-              },
-              'sass-loader'
-            ),
-          },
-          // "file" loader makes sure assets end up in the `build` folder.
-          // When you `import` an asset, you get its filename.
-          // This loader doesn't use a "test" so it will catch all modules
-          // that fall through the other loaders.
-          {
-            loader: require.resolve('file-loader'),
-            // Exclude `js` files to keep "css" loader working as it injects
-            // it's runtime that would otherwise be processed through "file" loader.
-            // Also exclude `html` and `json` extensions so they get processed
-            // by webpacks internal loaders.
-            exclude: [/\.(js|mjs|jsx)$/, /\.html$/, /\.json$/],
-            options: {
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-          // ** STOP ** Are you adding a new loader?
-          // Make sure to add the new loader(s) before the "file" loader.
-        ],
-      },
-    ],
-  },
-  plugins: [
-    // Generates an `index.html` file with the <script> injected.
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: paths.appHtml,
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-        removeRedundantAttributes: true,
-        useShortDoctype: true,
-        removeEmptyAttributes: true,
-        removeStyleLinkTypeAttributes: true,
-        keepClosingSlash: true,
-        minifyJS: true,
-        minifyCSS: true,
-        minifyURLs: true,
-      },
-    }),
-    // Inlines the webpack runtime script. This script is too small to warrant
-    // a network request.
-    shouldInlineRuntimeChunk && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
-    // Makes some environment variables available in index.html.
-    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    // In production, it will be an empty string unless you specify "homepage"
-    // in `package.json`, in which case it will be the pathname of that URL.
-    new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
-    // This gives some necessary context to module not found errors, such as
-    // the requesting resource.
-    new ModuleNotFoundPlugin(paths.appPath),
-    // Makes some environment variables available to the JS code, for example:
-    // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
-    // It is absolutely essential that NODE_ENV was set to production here.
-    // Otherwise React will be compiled in the very slow development mode.
-    new webpack.DefinePlugin(env.stringified),
-    new MiniCssExtractPlugin({
-      // Options similar to the same options in webpackOptions.output
-      // both options are optional
-      filename: 'static/css/[name].[contenthash:8].css',
-      chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
-    }),
-    // Generate a manifest file which contains a mapping of all asset filenames
-    // to their corresponding output file so that tools can pick it up without
-    // having to parse `index.html`.
-    new ManifestPlugin({
-      fileName: 'asset-manifest.json',
-      publicPath: publicPath,
-    }),
-    // Moment.js is an extremely popular library that bundles large locale files
-    // by default due to how Webpack interprets its code. This is a practical
-    // solution that requires the user to opt into importing specific locales.
-    // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-    // You can remove this if you don't use Moment.js:
-    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-    // Generate a service worker script that will precache, and keep up to date,
-    // the HTML & assets that are part of the Webpack build.
-    new WorkboxWebpackPlugin.GenerateSW({
-      clientsClaim: true,
-      exclude: [/\.map$/, /asset-manifest\.json$/],
-      importWorkboxFrom: 'cdn',
-      navigateFallback: publicUrl + '/index.html',
-      navigateFallbackBlacklist: [
-        // Exclude URLs starting with /_, as they're likely an API call
-        new RegExp('^/_'),
-        // Exclude URLs containing a dot, as they're likely a resource in
-        // public/ and not a SPA route
-        new RegExp('/[^/]+\\.[^/]+$'),
-      ],
-    }),
-  ].filter(Boolean),
-  // Some libraries import Node modules but don't use them in the browser.
-  // Tell Webpack to provide empty mocks for them so importing them works.
-  node: {
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty',
-  },
-  // Turn off performance processing because we utilize
-  // our own hints via the FileSizeReporter
-  performance: false,
-};

-'use strict';
-
-const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
-const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
-const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
-const ignoredFiles = require('react-dev-utils/ignoredFiles');
-const config = require('./webpack.config.dev');
-const paths = require('./paths');
-const fs = require('fs');
-
-const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-const host = process.env.HOST || '0.0.0.0';
-
-module.exports = function(proxy, allowedHost) {
-  return {
-    // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
-    // websites from potentially accessing local content through DNS rebinding:
-    // https://github.com/webpack/webpack-dev-server/issues/887
-    // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
-    // However, it made several existing use cases such as development in cloud
-    // environment or subdomains in development significantly more complicated:
-    // https://github.com/facebook/create-react-app/issues/2271
-    // https://github.com/facebook/create-react-app/issues/2233
-    // While we're investigating better solutions, for now we will take a
-    // compromise. Since our WDS configuration only serves files in the `public`
-    // folder we won't consider accessing them a vulnerability. However, if you
-    // use the `proxy` feature, it gets more dangerous because it can expose
-    // remote code execution vulnerabilities in backends like Django and Rails.
-    // So we will disable the host check normally, but enable it if you have
-    // specified the `proxy` setting. Finally, we let you override it if you
-    // really know what you're doing with a special environment variable.
-    disableHostCheck:
-      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
-    // Enable gzip compression of generated files.
-    compress: true,
-    // Silence WebpackDevServer's own logs since they're generally not useful.
-    // It will still show compile warnings and errors with this setting.
-    clientLogLevel: 'none',
-    // By default WebpackDevServer serves physical files from current directory
-    // in addition to all the virtual build products that it serves from memory.
-    // This is confusing because those files won’t automatically be available in
-    // production build folder unless we copy them. However, copying the whole
-    // project directory is dangerous because we may expose sensitive files.
-    // Instead, we establish a convention that only files in `public` directory
-    // get served. Our build script will copy `public` into the `build` folder.
-    // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
-    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
-    // Note that we only recommend to use `public` folder as an escape hatch
-    // for files like `favicon.ico`, `manifest.json`, and libraries that are
-    // for some reason broken when imported through Webpack. If you just want to
-    // use an image, put it in `src` and `import` it from JavaScript instead.
-    contentBase: paths.appPublic,
-    // By default files from `contentBase` will not trigger a page reload.
-    watchContentBase: true,
-    // Enable hot reloading server. It will provide /sockjs-node/ endpoint
-    // for the WebpackDevServer client so it can learn when the files were
-    // updated. The WebpackDevServer client is included as an entry point
-    // in the Webpack development configuration. Note that only changes
-    // to CSS are currently hot reloaded. JS changes will refresh the browser.
-    hot: true,
-    // It is important to tell WebpackDevServer to use the same "root" path
-    // as we specified in the config. In development, we always serve from /.
-    publicPath: config.output.publicPath,
-    // WebpackDevServer is noisy by default so we emit custom message instead
-    // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
-    quiet: true,
-    // Reportedly, this avoids CPU overload on some systems.
-    // https://github.com/facebook/create-react-app/issues/293
-    // src/node_modules is not ignored to support absolute imports
-    // https://github.com/facebook/create-react-app/issues/1065
-    watchOptions: {
-      ignored: ignoredFiles(paths.appSrc),
-    },
-    // Enable HTTPS if the HTTPS environment variable is set to 'true'
-    https: protocol === 'https',
-    host,
-    overlay: false,
-    historyApiFallback: {
-      // Paths with dots should still use the history fallback.
-      // See https://github.com/facebook/create-react-app/issues/387.
-      disableDotRule: true,
-    },
-    public: allowedHost,
-    proxy,
-    before(app, server) {
-      if (fs.existsSync(paths.proxySetup)) {
-        // This registers user provided middleware for proxy reasons
-        require(paths.proxySetup)(app);
-      }
-
-      // This lets us fetch source contents from webpack for the error overlay
-      app.use(evalSourceMapMiddleware(server));
-      // This lets us open files from the runtime error overlay.
-      app.use(errorOverlayMiddleware());
-
-      // This service worker file is effectively a 'no-op' that will reset any
-      // previous service worker registered for the same host:port combination.
-      // We do this in development to avoid hitting the production cache if
-      // it used the same host and port.
-      // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-      app.use(noopServiceWorkerMiddleware());
-    },
-  };
-};

 {
 {
-  "name": "sing-app-react",
-  "version": "5.0.0",
+  "name": "oss-front-end",
+  "version": "0.1.0",
+  "moduleNameMapper": {
+    "^react-native$": "react-native-web",
+    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
+  },
   "private": true,
   "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.5.0",
+    "@testing-library/user-event": "^7.2.1",
+    "animate.css": "^4.1.0",
+    "awesome-bootstrap-checkbox": "^1.0.1",
+    "bootstrap": "^4.5.0",
+    "classnames": "^2.2.6",
+    "debug": "^4.1.1",
+    "font-awesome": "^4.7.0",
+    "glyphicons-halflings": "^1.9.1",
+    "jquery": "^3.5.1",
+    "line-awesome": "^1.3.0",
+    "mixins": "0.0.1",
+    "node-sass": "^4.14.1",
+    "prop-types": "^15.7.2",
+    "rc-hammerjs": "^0.6.10",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-redux": "^7.2.0",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.1",
+    "react-table": "^7.2.0",
+    "react-transition-group": "^4.4.1",
+    "reactstrap": "^8.4.1",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0",
+    "scss": "^0.2.4"
+  },
   "scripts": {
   "scripts": {
-    "build": "node scripts/build.js",
-    "start": "node scripts/start.js",
-    "test": "node scripts/test.js"
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
   },
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ],
   "eslintConfig": {
   "eslintConfig": {
     "extends": "react-app"
     "extends": "react-app"
   },
   },
-  "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx}"
-    ],
-    "moduleFileExtensions": [
-      "web.js",
-      "js",
-      "json",
-      "web.jsx",
-      "jsx",
-      "node"
-    ],
-    "moduleNameMapper": {
-      "^react-native$": "react-native-web",
-      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
-    },
-    "resolver": "jest-pnp-resolver",
-    "setupFiles": [
-      "react-app-polyfill/jsdom"
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
     ],
     ],
-    "testEnvironment": "jsdom",
-    "testMatch": [
-      "<rootDir>/src/**/__tests__/**/*.{js,jsx}",
-      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx}"
-    ],
-    "testURL": "http://localhost",
-    "transform": {
-      "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
-      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
-      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
-    },
-    "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$",
-      "^.+\\.module\\.(css|sass|scss)$"
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
     ]
     ]
-  },
-  "dependencies": {
-    "animate.css": "3.7.0",
-    "awesome-bootstrap-checkbox": "1.0.1",
-    "axios": "^0.18.0",
-    "bootstrap": "4.0.0",
-    "bootstrap-slider": "^10.2.1",
-    "bootstrap_calendar": "https://github.com/xero/bootstrap_calendar.git#1.0.1",
-    "classnames": "^2.2.6",
-    "draft-js": "^0.10.5",
-    "flot": "^0.8.0-alpha",
-    "flot.dashes": "https://github.com/cquartier/flot.dashes.git",
-    "font-awesome": "4.7.0",
-    "formsy-react": "0.19.5",
-    "fullcalendar": "^3.9.0",
-    "glyphicons-halflings": "^1.9.1",
-    "jasny-bootstrap": "^3.1.3",
-    "jquery": "^3.3.1",
-    "jquery-mapael": "^2.2.0",
-    "jquery-sparkline": "^2.4.0",
-    "jquery-ui": "1.12.1",
-    "jquery.animate-number": "0.0.14",
-    "jquery.flot-orderBars": "https://github.com/emmerich/flot-orderBars.git",
-    "jquery.flot.animator": "https://github.com/Codicode/flotanimator.git#3c256c0183d713fd3bf41d04417873928eb1a751",
-    "jsonwebtoken": "^8.5.1",
-    "jvectormap": "2.0.4",
-    "line-awesome": "github:icons8/line-awesome",
-    "messenger": "git+https://github.com/HubSpot/messenger.git#v1.4.2",
-    "metrojs": "0.9.77",
-    "moment": "^2.22.2",
-    "moment-timezone": "^0.5.26",
-    "nvd3": "1.8.6",
-    "pretty": "^2.0.0",
-    "prettysize": "^2.0.0",
-    "rc-color-picker": "^1.2.6",
-    "rc-hammerjs": "0.6.9",
-    "react": "^16.5.2",
-    "react-animated-number": "^0.4.4",
-    "react-app-polyfill": "^0.1.3",
-    "react-autosize-textarea": "^5.0.0",
-    "react-bootstrap-slider": "^2.1.5",
-    "react-bootstrap-table": "4.1.5",
-    "react-datetime": "^2.16.1",
-    "react-dev-utils": "^6.0.5",
-    "react-dom": "^16.5.2",
-    "react-draft-wysiwyg": "1.10.12",
-    "react-dropzone": "^6.2.4",
-    "react-flot": "^1.3.0",
-    "react-google-maps": "^9.4.5",
-    "react-images": "^0.5.19",
-    "react-maskedinput": "^4.0.1",
-    "react-mde": "2.3.4",
-    "react-redux": "^5.0.7",
-    "react-router": "^4.3.1",
-    "react-router-dom": "^4.3.1",
-    "react-router-hash-link": "^1.2.1",
-    "react-scrollspy": "^3.3.5",
-    "react-select": "^3.0.4",
-    "react-select2-wrapper": "^1.0.4-beta6",
-    "react-shuffle": "2.1.0",
-    "react-slick": "^0.23.1",
-    "react-sortable-hoc": "^0.8.3",
-    "react-sortable-tree": "^2.2.0",
-    "react-sparklines": "^1.7.0",
-    "react-syntax-highlighter": "^10.1.2",
-    "react-table": "6.7.6",
-    "react-tagsinput": "^3.19.0",
-    "react-toastify": "^5.1.1",
-    "react-transition-group": "^2.5.2",
-    "reactstrap": "7.1.0",
-    "redux": "^4.0.1",
-    "redux-thunk": "^2.3.0",
-    "rickshaw": "1.6.6",
-    "semantic-ui-react": "^0.87.3",
-    "showdown": "1.8.6",
-    "skycons": "^1.0.0",
-    "widgster": "^1.0.0",
-    "xlsx": "^0.14.4"
-  },
-  "devDependencies": {
-    "@babel/core": "7.4.4",
-    "@babel/plugin-proposal-class-properties": "7.4.4",
-    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
-    "@svgr/webpack": "4.2.0",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "10.0.1",
-    "babel-jest": "24.8.0",
-    "babel-loader": "8.0.5",
-    "babel-plugin-named-asset-import": "1.0.0-next.103",
-    "babel-preset-react-app": "9.0.0",
-    "bfj": "6.1.1",
-    "bundle-loader": "0.5.6",
-    "case-sensitive-paths-webpack-plugin": "2.2.0",
-    "chalk": "^2.4.2",
-    "css-loader": "2.1.1",
-    "dotenv": "^8.2.0",
-    "dotenv-expand": "^5.1.0",
-    "eslint": "5.16.0",
-    "eslint-config-react-app": "4.0.1",
-    "eslint-loader": "2.1.1",
-    "eslint-plugin-flowtype": "3.8.1",
-    "eslint-plugin-import": "2.17.2",
-    "eslint-plugin-jsx-a11y": "6.2.1",
-    "eslint-plugin-react": "7.13.0",
-    "eslint-plugin-react-hooks": "1.6.0",
-    "expose-loader": "0.7.5",
-    "file-loader": "3.0.1",
-    "fs-extra": "7.0.1",
-    "html-webpack-plugin": "4.0.0-alpha.2",
-    "identity-obj-proxy": "3.0.0",
-    "imports-loader": "0.8.0",
-    "jest": "24.8.0",
-    "jest-pnp-resolver": "1.2.1",
-    "jest-resolve": "24.8.0",
-    "lodash": "4.17.11",
-    "mini-css-extract-plugin": "0.6.0",
-    "node-sass": "4.12.0",
-    "optimize-css-assets-webpack-plugin": "5.0.1",
-    "pnp-webpack-plugin": "1.4.3",
-    "postcss-flexbugs-fixes": "4.1.0",
-    "postcss-loader": "3.0.0",
-    "postcss-preset-env": "6.6.0",
-    "postcss-safe-parser": "4.0.1",
-    "resolve": "1.10.1",
-    "sass-loader": "7.1.0",
-    "style-loader": "0.23.0",
-    "terser-webpack-plugin": "1.2.3",
-    "url-loader": "1.1.2",
-    "webpack": "^4.31.0",
-    "webpack-dev-server": "3.3.1",
-    "webpack-manifest-plugin": "2.0.4",
-    "webpack-raphael": "2.1.4",
-    "workbox-webpack-plugin": "4.3.1"
-  },
-  "resolutions": {
-    "jquery": "3.3.1"
   }
   }
 }
 }

 <!DOCTYPE html>
 <!DOCTYPE html>
 <html lang="en">
 <html lang="en">
   <head>
   <head>
-    <meta charset="utf-8">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
     <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       It will be replaced with the URL of the `public` folder during the build.
@@ -19,27 +25,10 @@
       work correctly both with client-side routing and a non-root public URL.
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     -->
-    <title>Video Emergency Detection</title>
-    <meta name="description" content="React Admin Dashboard Template built with Bootstrap, Redux and React Router by Flatlogic. Over 40 unique pages, hundreds of components and theme support.">
-    <meta name="keywords" content="react admin, react dashboard, react admin template, react theme, react dashboard template, react dashboard template">
-    <meta name="author" content="Flatlogic LLC.">
-
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-36759672-9"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'UA-36759672-9');
-    </script>
-
-    <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js", "ym"); ym(48020168, "init", { id:48020168, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, trackHash:true, ecommerce:"dataLayer" }); </script> <!-- /Yandex.Metrika counter -->
+    <title>React App</title>
   </head>
   </head>
   <body>
   <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <div id="root"></div>
     <!--
     <!--
       This HTML file is a template.
       This HTML file is a template.

 {
 {
-  "short_name": "Sing App 5.0.0 - Isomorphic React Dashboard",
+  "short_name": "React App",
   "name": "Create React App Sample",
   "name": "Create React App Sample",
   "icons": [
   "icons": [
     {
     {
-      "src": "/favicon.png",
+      "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
       "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
     }
     }
   ],
   ],
   "start_url": ".",
   "start_url": ".",

+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

-'use strict';
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'production';
-process.env.NODE_ENV = 'production';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err;
-});
-
-// Ensure environment variables are read.
-require('../config/env');
-
-
-const path = require('path');
-const chalk = require('chalk');
-const fs = require('fs-extra');
-const webpack = require('webpack');
-const bfj = require('bfj');
-const config = require('../config/webpack.config.prod');
-const paths = require('../config/paths');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
-const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
-const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
-const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
-const printBuildError = require('react-dev-utils/printBuildError');
-
-const measureFileSizesBeforeBuild =
-  FileSizeReporter.measureFileSizesBeforeBuild;
-const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
-const useYarn = fs.existsSync(paths.yarnLockFile);
-
-// These sizes are pretty large. We'll warn for bundles exceeding them.
-const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
-const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
-
-const isInteractive = process.stdout.isTTY;
-
-// Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
-  process.exit(1);
-}
-
-// Process CLI arguments
-const argv = process.argv.slice(2);
-const writeStatsJson = argv.indexOf('--stats') !== -1;
-
-// We require that you explictly set browsers and do not fall back to
-// browserslist defaults.
-const { checkBrowsers } = require('react-dev-utils/browsersHelper');
-checkBrowsers(paths.appPath, isInteractive)
-  .then(() => {
-    // First, read the current file sizes in build directory.
-    // This lets us display how much they changed later.
-    return measureFileSizesBeforeBuild(paths.appBuild);
-  })
-  .then(previousFileSizes => {
-    // Remove all content but keep the directory so that
-    // if you're in it, you don't end up in Trash
-    fs.emptyDirSync(paths.appBuild);
-    // Merge with the public folder
-    copyPublicFolder();
-    // Start the webpack build
-    return build(previousFileSizes);
-  })
-  .then(
-    ({ stats, previousFileSizes, warnings }) => {
-      if (warnings.length) {
-        console.log(chalk.yellow('Compiled with warnings.\n'));
-        console.log(warnings.join('\n\n'));
-        console.log(
-          '\nSearch for the ' +
-            chalk.underline(chalk.yellow('keywords')) +
-            ' to learn more about each warning.'
-        );
-        console.log(
-          'To ignore, add ' +
-            chalk.cyan('// eslint-disable-next-line') +
-            ' to the line before.\n'
-        );
-      } else {
-        console.log(chalk.green('Compiled successfully.\n'));
-      }
-
-      console.log('File sizes after gzip:\n');
-      printFileSizesAfterBuild(
-        stats,
-        previousFileSizes,
-        paths.appBuild,
-        WARN_AFTER_BUNDLE_GZIP_SIZE,
-        WARN_AFTER_CHUNK_GZIP_SIZE
-      );
-      console.log();
-
-      const appPackage = require(paths.appPackageJson);
-      const publicUrl = paths.publicUrl;
-      const publicPath = config.output.publicPath;
-      const buildFolder = path.relative(process.cwd(), paths.appBuild);
-      printHostingInstructions(
-        appPackage,
-        publicUrl,
-        publicPath,
-        buildFolder,
-        useYarn
-      );
-    },
-    err => {
-      console.log(chalk.red('Failed to compile.\n'));
-      printBuildError(err);
-      process.exit(1);
-    }
-  )
-  .catch(err => {
-    if (err && err.message) {
-      console.log(err.message);
-    }
-    process.exit(1);
-  });
-
-// Create the production build and print the deployment instructions.
-function build(previousFileSizes) {
-  console.log('Creating an optimized production build...');
-
-  let compiler = webpack(config);
-  return new Promise((resolve, reject) => {
-    compiler.run((err, stats) => {
-      let messages;
-      if (err) {
-        if (!err.message) {
-          return reject(err);
-        }
-        messages = formatWebpackMessages({
-          errors: [err.message],
-          warnings: [],
-        });
-      } else {
-        messages = formatWebpackMessages(
-          stats.toJson({ all: false, warnings: true, errors: true })
-        );
-      }
-      if (messages.errors.length) {
-        // Only keep the first error. Others are often indicative
-        // of the same problem, but confuse the reader with noise.
-        if (messages.errors.length > 1) {
-          messages.errors.length = 1;
-        }
-        return reject(new Error(messages.errors.join('\n\n')));
-      }
-      if (
-        process.env.CI &&
-        (typeof process.env.CI !== 'string' ||
-          process.env.CI.toLowerCase() !== 'false') &&
-        messages.warnings.length
-      ) {
-        console.log(
-          chalk.yellow(
-            '\nTreating warnings as errors because process.env.CI = true.\n' +
-              'Most CI servers set it automatically.\n'
-          )
-        );
-        return reject(new Error(messages.warnings.join('\n\n')));
-      }
-
-      const resolveArgs = {
-        stats,
-        previousFileSizes,
-        warnings: messages.warnings,
-      };
-      if (writeStatsJson) {
-        return bfj
-          .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
-          .then(() => resolve(resolveArgs))
-          .catch(error => reject(new Error(error)));
-      }
-
-      return resolve(resolveArgs);
-    });
-  });
-}
-
-function copyPublicFolder() {
-  fs.copySync(paths.appPublic, paths.appBuild, {
-    dereference: true,
-    filter: file => file !== paths.appHtml,
-  });
-}

-'use strict';
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'development';
-process.env.NODE_ENV = 'development';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err;
-});
-
-// Ensure environment variables are read.
-require('../config/env');
-
-
-const fs = require('fs');
-const chalk = require('chalk');
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const clearConsole = require('react-dev-utils/clearConsole');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
-const {
-  choosePort,
-  createCompiler,
-  prepareProxy,
-  prepareUrls,
-} = require('react-dev-utils/WebpackDevServerUtils');
-const openBrowser = require('react-dev-utils/openBrowser');
-const paths = require('../config/paths');
-const config = require('../config/webpack.config.dev');
-const createDevServerConfig = require('../config/webpackDevServer.config');
-
-const useYarn = fs.existsSync(paths.yarnLockFile);
-const isInteractive = process.stdout.isTTY;
-
-// Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
-  process.exit(1);
-}
-
-// Tools like Cloud9 rely on this.
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
-const HOST = process.env.HOST || '0.0.0.0';
-
-if (process.env.HOST) {
-  console.log(
-    chalk.cyan(
-      `Attempting to bind to HOST environment variable: ${chalk.yellow(
-        chalk.bold(process.env.HOST)
-      )}`
-    )
-  );
-  console.log(
-    `If this was unintentional, check that you haven't mistakenly set it in your shell.`
-  );
-  console.log(
-    `Learn more here: ${chalk.yellow('http://bit.ly/CRA-advanced-config')}`
-  );
-  console.log();
-}
-
-// We require that you explictly set browsers and do not fall back to
-// browserslist defaults.
-const { checkBrowsers } = require('react-dev-utils/browsersHelper');
-checkBrowsers(paths.appPath, isInteractive)
-  .then(() => {
-    // We attempt to use the default port but if it is busy, we offer the user to
-    // run on a different port. `choosePort()` Promise resolves to the next free port.
-    return choosePort(HOST, DEFAULT_PORT);
-  })
-  .then(port => {
-    if (port == null) {
-      // We have not found a port.
-      return;
-    }
-    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-    const appName = require(paths.appPackageJson).name;
-    const urls = prepareUrls(protocol, HOST, port);
-    // Create a webpack compiler that is configured with custom messages.
-    const compiler = createCompiler(webpack, config, appName, urls, useYarn);
-    // Load proxy config
-    const proxySetting = require(paths.appPackageJson).proxy;
-    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
-    // Serve webpack assets generated by the compiler over a web server.
-    const serverConfig = createDevServerConfig(
-      proxyConfig,
-      urls.lanUrlForConfig
-    );
-    const devServer = new WebpackDevServer(compiler, serverConfig);
-    // Launch WebpackDevServer.
-    devServer.listen(port, HOST, err => {
-      if (err) {
-        return console.log(err);
-      }
-      if (isInteractive) {
-        clearConsole();
-      }
-      console.log(chalk.cyan('Starting the development server...\n'));
-      openBrowser(urls.localUrlForBrowser);
-    });
-
-    ['SIGINT', 'SIGTERM'].forEach(function(sig) {
-      process.on(sig, function() {
-        devServer.close();
-        process.exit();
-      });
-    });
-  })
-  .catch(err => {
-    if (err && err.message) {
-      console.log(err.message);
-    }
-    process.exit(1);
-  });

-'use strict';
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'test';
-process.env.NODE_ENV = 'test';
-process.env.PUBLIC_URL = '';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err;
-});
-
-// Ensure environment variables are read.
-require('../config/env');
-
-
-const jest = require('jest');
-const execSync = require('child_process').execSync;
-let argv = process.argv.slice(2);
-
-function isInGitRepository() {
-  try {
-    execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function isInMercurialRepository() {
-  try {
-    execSync('hg --cwd . root', { stdio: 'ignore' });
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-// Watch unless on CI, in coverage mode, or explicitly running all tests
-if (
-  !process.env.CI &&
-  argv.indexOf('--coverage') === -1 &&
-  argv.indexOf('--watchAll') === -1
-) {
-  // https://github.com/facebook/create-react-app/issues/5210
-  const hasSourceControl = isInGitRepository() || isInMercurialRepository();
-  argv.push(hasSourceControl ? '--watch' : '--watchAll');
-}
-
-
-jest.run(argv);

 import React from 'react';
 import React from 'react';
-import { connect } from 'react-redux';
 import { Switch, Route, Redirect } from 'react-router';
 import { Switch, Route, Redirect } from 'react-router';
 import { HashRouter } from 'react-router-dom';
 import { HashRouter } from 'react-router-dom';
-import { ToastContainer } from 'react-toastify';
-
-/* eslint-disable */
-import ErrorPage from '../pages/error';
-/* eslint-enable */
 
 
 import '../styles/theme.scss';
 import '../styles/theme.scss';
-import LayoutComponent from '../components/Layout';
-
-const CloseButton = ({closeToast}) => <i onClick={closeToast} className="la la-close notifications-close"/>
+import LayoutComponent from '../components/Layout/Layout';
 
 
 class App extends React.PureComponent {
 class App extends React.PureComponent {
   render() {
   render() {
     return (
     return (
         <div>
         <div>
-            <ToastContainer
-                autoClose={5000}
-                hideProgressBar
-                closeButton={<CloseButton/>}
-            />
             <HashRouter>
             <HashRouter>
                 <Switch>
                 <Switch>
                     <Route path="/" exact render={() => <Redirect to="/app/main"/>}/>
                     <Route path="/" exact render={() => <Redirect to="/app/main"/>}/>
                     <Route path="/app" exact render={() => <Redirect to="/app/main"/>}/>
                     <Route path="/app" exact render={() => <Redirect to="/app/main"/>}/>
                     <Route path="/app" component={LayoutComponent}/>
                     <Route path="/app" component={LayoutComponent}/>
-                    <Route path="/error" exact component={ErrorPage}/>
                     <Redirect from="*" to="/app/main/"/>
                     <Redirect from="*" to="/app/main/"/>
                 </Switch>
                 </Switch>
             </HashRouter>
             </HashRouter>
         </div>
         </div>
-
     );
     );
   }
   }
 }
 }
 
 
-const mapStateToProps = state => ({
-});
-
-export default connect(mapStateToProps)(App);
+export default App;

@@ -13,103 +13,103 @@ import s from './Layout.module.scss';
 import { DashboardThemes } from '../../reducers/layout';
 import { DashboardThemes } from '../../reducers/layout';
 
 
 class Layout extends React.Component {
 class Layout extends React.Component {
-  static propTypes = {
-    sidebarStatic: PropTypes.bool,
-    sidebarOpened: PropTypes.bool,
-    dashboardTheme: PropTypes.string,
-    dispatch: PropTypes.func.isRequired,
-  };
-
-  static defaultProps = {
-    sidebarStatic: false,
-    sidebarOpened: false,
-    dashboardTheme: DashboardThemes.DARK
-  };
-  constructor(props) {
-    super(props);
-    this.handleSwipe = this.handleSwipe.bind(this);
-  }
-
-  async componentDidMount() {
-    const staticSidebar = JSON.parse(localStorage.getItem('staticSidebar'));
-    if (staticSidebar && window.innerWidth > 768) {
-      this.props.dispatch(toggleSidebar());
-    } else if (this.props.sidebarOpened) {
-      setTimeout(() => {
-        this.props.dispatch(closeSidebar());
-        this.props.dispatch(changeActiveSidebarItem(null));
-      }, 2500);
-    }
-    this.handleResize();
-    window.addEventListener('resize', this.handleResize.bind(this));
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.handleResize.bind(this));
-  }
-
-  handleResize() {
-    if (window.innerWidth <= 768 && this.props.sidebarStatic) {
-      this.props.dispatch(toggleSidebar());
+    static propTypes = {
+      sidebarStatic: PropTypes.bool,
+      sidebarOpened: PropTypes.bool,
+      dashboardTheme: PropTypes.string,
+      dispatch: PropTypes.func.isRequired,
+    };
+  
+    static defaultProps = {
+      sidebarStatic: false,
+      sidebarOpened: false,
+      dashboardTheme: DashboardThemes.DARK
+    };
+    constructor(props) {
+      super(props);
+      this.handleSwipe = this.handleSwipe.bind(this);
     }
     }
-  }
-
-  handleSwipe(e) {
-    if ('ontouchstart' in window) {
-        this.props.dispatch(openSidebar());
-        return;
+  
+    async componentDidMount() {
+      const staticSidebar = JSON.parse(localStorage.getItem('staticSidebar'));
+      if (staticSidebar && window.innerWidth > 768) {
+        this.props.dispatch(toggleSidebar());
+      } else if (this.props.sidebarOpened) {
+        setTimeout(() => {
+          this.props.dispatch(closeSidebar());
+          this.props.dispatch(changeActiveSidebarItem(null));
+        }, 2500);
       }
       }
-      if (e.direction === 2 && this.props.sidebarOpened) {
-        this.props.dispatch(closeSidebar());
-        return;
+      this.handleResize();
+      window.addEventListener('resize', this.handleResize.bind(this));
+    }
+  
+    componentWillUnmount() {
+      window.removeEventListener('resize', this.handleResize.bind(this));
+    }
+  
+    handleResize() {
+      if (window.innerWidth <= 768 && this.props.sidebarStatic) {
+        this.props.dispatch(toggleSidebar());
       }
       }
-  }
-
-  render() {
-    return (
-      <div
-        className={[
-          s.root,
-          this.props.sidebarStatic ? s.sidebarStatic : '',
-          !this.props.sidebarOpened ? s.sidebarClose : '',
-          'sing-dashboard',
-          'dashboard-' + this.props.dashboardTheme,
-        ].join(' ')}
-      >
-        <Sidebar />
-        <div className={s.wrap}>
-          <Hammer onSwipe={this.handleSwipe}>
-            <main className={s.content}>
-              <TransitionGroup>
-                <CSSTransition
-                  key={this.props.location.pathname}
-                  classNames="fade"
-                  timeout={200}
-                >
-                  <Switch>
-                    <Route path="/app/main/" exact component={Main} />
-                    <Route path="/app/subject" exact component={Subject} />
-                  </Switch>
-                </CSSTransition>
-              </TransitionGroup>
-              <footer className={s.contentFooter}>
-                OSS project
-              </footer>
-            </main>
-          </Hammer>
+    }
+  
+    handleSwipe(e) {
+      if ('ontouchstart' in window) {
+          this.props.dispatch(openSidebar());
+          return;
+        }
+        if (e.direction === 2 && this.props.sidebarOpened) {
+          this.props.dispatch(closeSidebar());
+          return;
+        }
+    }
+  
+    render() {
+      return (
+        <div
+          className={[
+            s.root,
+            this.props.sidebarStatic ? s.sidebarStatic : '',
+            !this.props.sidebarOpened ? s.sidebarClose : '',
+            'video emergency analysis',
+            'video emergency-' + this.props.dashboardTheme,
+          ].join(' ')}
+        >
+          <Sidebar />
+          <div className={s.wrap}>
+            <Hammer onSwipe={this.handleSwipe}>
+              <main className={s.content}>
+                <TransitionGroup>
+                  <CSSTransition
+                    key={this.props.location.pathname}
+                    classNames="fade"
+                    timeout={200}
+                  >
+                    <Switch>
+                      <Route path="/app/main/" exact component={Main} />
+                      <Route path="/app/subject" exact component={Subject} />
+                    </Switch>
+                  </CSSTransition>
+                </TransitionGroup>
+                <footer className={s.contentFooter}>
+                  OSS project
+                </footer>
+              </main>
+            </Hammer>
+          </div>
         </div>
         </div>
-      </div>
-    );
+      );
+    }
   }
   }
-}
-
-function mapStateToProps(store) {
-  return {
-    sidebarOpened: store.navigation.sidebarOpened,
-    sidebarStatic: store.navigation.sidebarStatic,
-    dashboardTheme: store.layout.dashboardTheme,
-    labelDataGroup: store.labelDataGroup,
-  };
-}
-
-export default withRouter(connect(mapStateToProps)(Layout));
+  
+  function mapStateToProps(store) {
+    return {
+      sidebarOpened: store.navigation.sidebarOpened,
+      sidebarStatic: store.navigation.sidebarStatic,
+      dashboardTheme: store.layout.dashboardTheme,
+      labelDataGroup: store.labelDataGroup,
+    };
+  }
+  
+  export default withRouter(connect(mapStateToProps)(Layout));
\ No newline at end of file

-{
-  "name": "Layout",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Layout.js"
-}

-{
-  "name": "Loader",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Loader.js"
-}

@@ -73,7 +73,7 @@ class LinksGroup extends Component {
               target={this.props.target}
               target={this.props.target}
             >
             >
               <span className={classnames('icon', s.icon)}>
               <span className={classnames('icon', s.icon)}>
-                <i className={`fi ${this.props.iconName}`} />
+                <i className={this.props.iconName} />
               </span>
               </span>
               {this.props.header} {this.props.label && <sup className={`${s.headerLabel} text-${this.props.labelColor || 'warning'}`}>{this.props.label}</sup>}
               {this.props.header} {this.props.label && <sup className={`${s.headerLabel} text-${this.props.labelColor || 'warning'}`}>{this.props.label}</sup>}
               {this.props.badge && <Badge className={s.badge} color="warning" pill>9</Badge>}
               {this.props.badge && <Badge className={s.badge} color="warning" pill>9</Badge>}
@@ -99,7 +99,7 @@ class LinksGroup extends Component {
           </NavLink>
           </NavLink>
         </li>
         </li>
       );
       );
-    }
+          }
     /* eslint-disable */
     /* eslint-disable */
     return (
     return (
       <Route
       <Route
@@ -114,7 +114,7 @@ class LinksGroup extends Component {
               >
               >
                 {this.props.isHeader ?
                 {this.props.isHeader ?
                   <span className={classnames('icon', s.icon)}>
                   <span className={classnames('icon', s.icon)}>
-                    <i className={`fi ${this.props.iconName}`} />
+                    <i className={this.props.iconName} />
                   </span> : null
                   </span> : null
                 }
                 }
                 {this.props.header} {this.props.label && <sup className={`${s.headerLabel} text-${this.props.labelColor || 'warning'} ml-1`}>{this.props.label}</sup>}
                 {this.props.header} {this.props.label && <sup className={`${s.headerLabel} text-${this.props.labelColor || 'warning'} ml-1`}>{this.props.label}</sup>}

@@ -78,14 +78,14 @@
     &:hover {
     &:hover {
       color: $sidebar-item-active-color;
       color: $sidebar-item-active-color;
     }
     }
-
+    
     .icon {
     .icon {
       border-radius: 50%;
       border-radius: 50%;
-      background-color: $sidebar-item-active-color;
+      background-color: #ffc247;
       opacity: 1;
       opacity: 1;
 
 
       i {
       i {
-        color: var(--sidebar-bg-color);
+        color: #313947;
       }
       }
     }
     }
   }
   }
@@ -124,6 +124,7 @@
     }
     }
   }
   }
 
 
+  
   ul {
   ul {
     background: var(--sidebar-action-bg);
     background: var(--sidebar-action-bg);
     padding: $spacer;
     padding: $spacer;

@@ -54,7 +54,7 @@ class Sidebar extends React.Component {
         className={[s.root, this.props.sidebarStatic ? s.staticSidebar : '', !this.props.sidebarOpened ? s.sidebarClose : ''].join(' ')}
         className={[s.root, this.props.sidebarStatic ? s.staticSidebar : '', !this.props.sidebarOpened ? s.sidebarClose : ''].join(' ')}
       >
       >
         <header className={s.logo}>
         <header className={s.logo}>
-          <img src="/images/emergency.png" style={{width: '112px', padding: '7px'}} alt="Emergency Inc. logo"/>
+          <img src="/images/emergency.png" style={{width: '130px', padding: '7px'}} alt="Emergency Inc. logo"/>
         </header>
         </header>
         <ul className={s.nav}>
         <ul className={s.nav}>
           <LinksGroup
           <LinksGroup
@@ -62,24 +62,24 @@ class Sidebar extends React.Component {
             activeItem={this.props.activeItem}
             activeItem={this.props.activeItem}
             header="영상 분석"
             header="영상 분석"
             isHeader
             isHeader
-            iconName="flaticon-record"
+            iconName="fas fa-camera"
             link="/app/main"
             link="/app/main"
             index="main"
             index="main"
-            childrenLinks={[
-              {
-                header: 'Phone', link: '/app/file/phone',
-              },
-              {
-                header: 'RaspberryPi', link: '/app/file/raspberrypi',
-              },
-            ]}
+            // childrenLinks={[
+            //   {
+            //     header: 'Phone', link: '/app/file/phone',
+            //   },
+            //   {
+            //     header: 'RaspberryPi', link: '/app/file/raspberrypi',
+            //   },
+            // ]}
           />
           />
           <LinksGroup
           <LinksGroup
             onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
             onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
             activeItem={this.props.activeItem}
             activeItem={this.props.activeItem}
             header="사진 등록"
             header="사진 등록"
             isHeader
             isHeader
-            iconName="flaticon-user"
+            iconName="fas fa-user"
             link="/app/subject"
             link="/app/subject"
             index="subject"
             index="subject"
           />
           />

@@ -7,8 +7,8 @@
   top: 0;
   top: 0;
   bottom: 0;
   bottom: 0;
   border-right: $sidebar-border;
   border-right: $sidebar-border;
-  background-color: var(--sidebar-bg-color);
-  color: var(--sidebar-color);
+  background-color: #313947;
+  color: #a6b2c1;
   overflow-y: auto;
   overflow-y: auto;
 
 
   @include scroll-bar($sidebar-scrollbar-bg);
   @include scroll-bar($sidebar-scrollbar-bg);

 import React from 'react';
 import React from 'react';
 import PropTypes from 'prop-types';
 import PropTypes from 'prop-types';
-import jQuery from 'jquery';
-import { UncontrolledTooltip } from 'reactstrap';
-import 'imports-loader?window.jQuery=jquery,this=>window!widgster'; // eslint-disable-line
 import s from './Widget.module.scss';
 import s from './Widget.module.scss';
-import Loader from '../Loader'; // eslint-disable-line css-modules/no-unused-class
+import Loader from '../Loader/Loader'; 
 
 
 class Widget extends React.Component {
 class Widget extends React.Component {
   static propTypes = {
   static propTypes = {
@@ -14,17 +11,7 @@ class Widget extends React.Component {
       PropTypes.arrayOf(PropTypes.node),
       PropTypes.arrayOf(PropTypes.node),
       PropTypes.node,
       PropTypes.node,
     ]),
     ]),
-    close: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-    fullscreen: PropTypes.bool,
-    collapse: PropTypes.bool,
-    refresh: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-    settings: PropTypes.bool,
-    settingsInverse: PropTypes.bool,
-    tooltipPlacement: PropTypes.string,
-    showTooltip: PropTypes.bool,
     bodyClass: PropTypes.string,
     bodyClass: PropTypes.string,
-    customControls: PropTypes.node,
-    options: PropTypes.object, //eslint-disable-line,
     fetchingData: PropTypes.bool
     fetchingData: PropTypes.bool
   };
   };
 
 
@@ -32,17 +19,7 @@ class Widget extends React.Component {
     title: null,
     title: null,
     className: '',
     className: '',
     children: [],
     children: [],
-    close: false,
-    fullscreen: false,
-    collapse: false,
-    refresh: false,
-    settings: false,
-    settingsInverse: false,
-    tooltipPlacement: 'bottom',
-    showTooltip: false,
     bodyClass: '',
     bodyClass: '',
-    customControls: null,
-    options: {},
     fetchingData: false
     fetchingData: false
   };
   };
 
 
@@ -53,33 +30,15 @@ class Widget extends React.Component {
     };
     };
   }
   }
 
 
-  componentDidMount() {
-    const options = this.props.options;
-    options.bodySelector = '.widget-body';
-    jQuery(this.el).widgster(options);
-  }
-
   render() {
   render() {
     const {
     const {
       title,
       title,
       className,
       className,
       children,
       children,
-      close,
-      fullscreen,
-      collapse,
-      refresh,
-      settings,
-      settingsInverse,
-      tooltipPlacement,
-      showTooltip,
       bodyClass,
       bodyClass,
-      customControls,
       fetchingData,
       fetchingData,
-      options, //eslint-disable-line
       ...attributes
       ...attributes
     } = this.props;
     } = this.props;
-    const randomId = this.state.randomId;
-    const mainControls = !!(close || fullscreen || collapse || refresh || settings || settingsInverse);
     return (
     return (
       <section
       <section
         className={['widget', s.widget, className].join(' ')}
         className={['widget', s.widget, className].join(' ')}
@@ -92,101 +51,6 @@ class Widget extends React.Component {
               : <header className={s.title}>{title}</header>
               : <header className={s.title}>{title}</header>
           )
           )
         }
         }
-        {
-          !customControls && mainControls && (
-            <div className={`${s.widgetControls} widget-controls`}>
-              {settings && (
-                <button><i className="la la-cog" /></button>
-              )}
-              {settingsInverse && (
-                <button className={`bg-gray-transparent ${s.inverse}`}><i
-                  className="la la-cog text-white"
-                /></button>
-              )}
-              {refresh && (
-                <button data-widgster="load" id={`reloadId-${randomId}`}>
-                  {typeof refresh === 'string' ?
-                    <strong className="text-gray-light">{refresh}</strong> :
-                    <i className="la la-refresh" />}
-                  {showTooltip && (
-                    <UncontrolledTooltip
-                      placement={tooltipPlacement}
-                      target={`reloadId-${randomId}`}
-                    >Reload</UncontrolledTooltip>
-                  )}
-                </button>
-              )}
-              {fullscreen && (
-                <button data-widgster="fullscreen" id={`fullscreenId-${randomId}`}>
-                  <i className="glyphicon glyphicon-resize-full" />
-                  {showTooltip && (
-                    <UncontrolledTooltip
-                      placement={tooltipPlacement}
-                      target={`fullscreenId-${randomId}`}
-                    >Fullscreen</UncontrolledTooltip>
-                  )}
-                </button>
-              )}
-              {fullscreen && (
-                <button data-widgster="restore" id={`restoreId-${randomId}`}>
-                  <i className="glyphicon glyphicon-resize-small" />
-                  {showTooltip && (
-                    <UncontrolledTooltip
-                      placement={tooltipPlacement}
-                      target={`restoreId-${randomId}`}
-                    >Restore</UncontrolledTooltip>
-                  )}
-                </button>
-              )}
-              {collapse && (
-                <span>
-                  <button data-widgster="collapse" id={`collapseId-${randomId}`}>
-                    <i className="la la-angle-down" />
-                    {showTooltip && (
-                      <UncontrolledTooltip
-                        placement={tooltipPlacement}
-                        target={`collapseId-${randomId}`}
-                      >Collapse</UncontrolledTooltip>
-                    )}
-                  </button>
-                </span>
-              )}
-              {collapse && (
-                <span>
-                  <button data-widgster="expand" id={`expandId-${randomId}`}>
-                    <i className="la la-angle-up" />
-                    {showTooltip && (
-                      <UncontrolledTooltip
-                        placement={tooltipPlacement}
-                        target={`expandId-${randomId}`}
-                      >Expand</UncontrolledTooltip>
-                    )}
-                  </button>
-                </span>
-              )}
-
-              {close && (
-                <button data-widgster="close" id={`closeId-${randomId}`}>
-                  {typeof close === 'string' ?
-                    <strong className="text-gray-light">{close}</strong> :
-                    <i className="la la-remove" />}
-                  {showTooltip && (
-                    <UncontrolledTooltip
-                      placement={tooltipPlacement}
-                      target={`closeId-${randomId}`}
-                    >Close</UncontrolledTooltip>
-                  )}
-                </button>
-              )}
-            </div>
-          )}
-        {
-          customControls && (
-            <div className={`${s.widgetControls} widget-controls`}>
-              {customControls}
-            </div>
-          )
-        }
         <div className={`${s.widgetBody} widget-body ${bodyClass}`}>
         <div className={`${s.widgetBody} widget-body ${bodyClass}`}>
           {fetchingData ?  <Loader className={s.widgetLoader} size={40}/> : children}
           {fetchingData ?  <Loader className={s.widgetLoader} size={40}/> : children}
         </div>
         </div>
@@ -195,4 +59,4 @@ class Widget extends React.Component {
   }
   }
 }
 }
 
 
-export default Widget;
+export default Widget;
\ No newline at end of file

@@ -7,10 +7,6 @@
   @include clearfix();
   @include clearfix();
 }
 }
 
 
-:global .widget.collapsed {
-  min-height: unset;
-}
-
 .widget {
 .widget {
   display: block;
   display: block;
   position: relative;
   position: relative;
@@ -76,51 +72,6 @@
   }
   }
 }
 }
 
 
-.widgetControls + .widgetBody {
-  margin-top: $widget-padding-vertical;
-}
-
-.widgetControls,
-:global(.widget-controls) {
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  right: 0;
-  padding: 14px;
-  font-size: $font-size-sm;
-
-  button {
-    padding: 1px 4px;
-    border-radius: 4px;
-    color: rgba($black, 0.4);
-    background: transparent;
-    border: none;
-
-    @include transition(color 0.15s ease-in-out);
-
-    &:hover {
-      color: rgba($black, 0.1);
-      text-decoration: none;
-    }
-
-    &:active,
-    &:focus {
-      outline: none;
-    }
-
-    :global {
-      .la {
-        position: relative;
-        top: 2px;
-      }
-
-      .glyphicon {
-        font-size: 0.7rem;
-      }
-    }
-  }
-}
-
 .inverse {
 .inverse {
   top: 2px;
   top: 2px;
   position: relative;
   position: relative;

-{
-  "name": "Widget",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Widget.js"
-}

-const hostApi = process.env.NODE_ENV === "development" ? "http://localhost" : "http://localhost";
-const portApi = process.env.NODE_ENV === "development" ? 8080 : 4000;
-const baseURLApi = `${hostApi}${portApi ? `:${portApi}` : ``}`;
-
-export default {
-  hostApi,
-  portApi,
-  baseURLApi
-};
\ No newline at end of file

-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
-<g id="Слой_1">
-	<rect x="0" y="0" width="13.9" height="30"/>
-</g>
-<g id="Слой_1__x28_копия_x29_">
-	<rect x="16.1" y="0" width="13.9" height="30"/>
-</g>
-</svg>

-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
-<g id="Слой_1">
-	<rect x="0" y="0" width="8.3" height="30"/>
-</g>
-<g id="Слой_1__x28_копия_x29_">
-	<rect x="21.7" y="0" width="8.3" height="30"/>
-</g>
-<g id="Слой_1__x28_копия2_x29_">
-	<rect x="10.8" y="0" width="8.3" height="30"/>
-</g>
-</svg>

-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
-<g id="Слой_1">
-	<rect x="0" y="0" width="6.2" height="30"/>
-</g>
-<g id="Слой_1__x28_копия_x29_">
-	<rect x="23.8" y="0" width="6.2" height="30"/>
-</g>
-<g id="Слой_1__x28_копия2_x29_">
-	<rect x="15.9" y="0" width="6.2" height="30"/>
-</g>
-<g id="Слой_1__x28_копия3_x29_">
-	<rect x="8" y="0" width="6.2" height="30"/>
-</g>
-</svg>

-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 49.94 49.94" style="enable-background:new 0 0 49.94 49.94;" xml:space="preserve" width="512px" height="512px">
-<path d="M48.856,22.73c0.983-0.958,1.33-2.364,0.906-3.671c-0.425-1.307-1.532-2.24-2.892-2.438l-12.092-1.757  c-0.515-0.075-0.96-0.398-1.19-0.865L28.182,3.043c-0.607-1.231-1.839-1.996-3.212-1.996c-1.372,0-2.604,0.765-3.211,1.996  L16.352,14c-0.23,0.467-0.676,0.79-1.191,0.865L3.069,16.622c-1.359,0.197-2.467,1.131-2.892,2.438  c-0.424,1.307-0.077,2.713,0.906,3.671l8.749,8.528c0.373,0.364,0.544,0.888,0.456,1.4L8.224,44.701  c-0.183,1.06,0.095,2.091,0.781,2.904c1.066,1.267,2.927,1.653,4.415,0.871l10.814-5.686c0.452-0.237,1.021-0.235,1.472,0  l10.815,5.686c0.526,0.277,1.087,0.417,1.666,0.417c1.057,0,2.059-0.47,2.748-1.288c0.687-0.813,0.964-1.846,0.781-2.904  l-2.065-12.042c-0.088-0.513,0.083-1.036,0.456-1.4L48.856,22.73z" fill="#363f4e"/>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>

-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 49.94 49.94" style="enable-background:new 0 0 49.94 49.94;" xml:space="preserve" width="512px" height="512px">
-<path d="M48.856,22.731c0.983-0.958,1.33-2.364,0.906-3.671c-0.425-1.307-1.532-2.24-2.892-2.438l-12.092-1.757  c-0.515-0.075-0.96-0.398-1.19-0.865L28.182,3.043c-0.607-1.231-1.839-1.996-3.212-1.996c-1.372,0-2.604,0.765-3.211,1.996  L16.352,14c-0.23,0.467-0.676,0.79-1.191,0.865L3.069,16.623C1.71,16.82,0.603,17.753,0.178,19.06  c-0.424,1.307-0.077,2.713,0.906,3.671l8.749,8.528c0.373,0.364,0.544,0.888,0.456,1.4L8.224,44.702  c-0.232,1.353,0.313,2.694,1.424,3.502c1.11,0.809,2.555,0.914,3.772,0.273l10.814-5.686c0.461-0.242,1.011-0.242,1.472,0  l10.815,5.686c0.528,0.278,1.1,0.415,1.669,0.415c0.739,0,1.475-0.231,2.103-0.688c1.111-0.808,1.656-2.149,1.424-3.502  L39.651,32.66c-0.088-0.513,0.083-1.036,0.456-1.4L48.856,22.731z M37.681,32.998l2.065,12.042c0.104,0.606-0.131,1.185-0.629,1.547  c-0.499,0.361-1.12,0.405-1.665,0.121l-10.815-5.687c-0.521-0.273-1.095-0.411-1.667-0.411s-1.145,0.138-1.667,0.412l-10.813,5.686  c-0.547,0.284-1.168,0.24-1.666-0.121c-0.498-0.362-0.732-0.94-0.629-1.547l2.065-12.042c0.199-1.162-0.186-2.348-1.03-3.17  L2.48,21.299c-0.441-0.43-0.591-1.036-0.4-1.621c0.19-0.586,0.667-0.988,1.276-1.077l12.091-1.757  c1.167-0.169,2.176-0.901,2.697-1.959l5.407-10.957c0.272-0.552,0.803-0.881,1.418-0.881c0.616,0,1.146,0.329,1.419,0.881  l5.407,10.957c0.521,1.058,1.529,1.79,2.696,1.959l12.092,1.757c0.609,0.089,1.086,0.491,1.276,1.077  c0.19,0.585,0.041,1.191-0.4,1.621l-8.749,8.528C37.866,30.65,37.481,31.835,37.681,32.998z" fill="#363f4e"/>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>

@@ -3,14 +3,11 @@ import ReactDOM from 'react-dom';
 import { createStore, applyMiddleware } from 'redux';
 import { createStore, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux'
 import { Provider } from 'react-redux'
 import ReduxThunk from 'redux-thunk'
 import ReduxThunk from 'redux-thunk'
-import axios from 'axios';
-
 import App from './components/App';
 import App from './components/App';
-import config from './config';
+
 import reducers from './reducers';
 import reducers from './reducers';
 
 
-axios.defaults.baseURL = config.baseURLApi;
-axios.defaults.headers.common['Content-Type'] = "application/json";
+import * as serviceWorker from './serviceWorker';
 
 
 const store = createStore(
 const store = createStore(
   reducers,
   reducers,
@@ -18,8 +15,13 @@ const store = createStore(
 );
 );
 
 
 ReactDOM.render(
 ReactDOM.render(
-    <Provider store={store}>
-        <App />
-    </Provider>,
-    document.getElementById('root')
+  <Provider store={store}>
+      <App />
+  </Provider>,
+  document.getElementById('root')
 );
 );
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();

-import React from 'react';
-import {
-  Container,
-  Form,
-  FormGroup,
-  Input,
-  Button,
-} from 'reactstrap';
-import { Link } from 'react-router-dom';
-
-import s from './ErrorPage.module.scss';
-
-class ErrorPage extends React.Component {
-  render() {
-    return (
-      <div className={s.errorPage}>
-        <Container>
-          <div className={`${s.errorContainer} mx-auto`}>
-            <h1 className={s.errorCode}>404</h1>
-            <p className={s.errorInfo}>
-              Opps, it seems that this page does not exist.
-            </p>
-            <p className={[s.errorHelp, 'mb-3'].join(' ')}>
-              If you are sure it should, search for it.
-            </p>
-            <Form method="get">
-              <FormGroup>
-                <Input className="input-no-border" type="text" placeholder="Search Pages" />
-              </FormGroup>
-              <Link to="app/extra/search">
-                <Button className={s.errorBtn} type="submit" color="inverse">
-                  Search <i className="fa fa-search text-warning ml-xs" />
-                </Button>
-              </Link>
-            </Form>
-          </div>
-          <footer className={s.pageFooter}>
-            2019 &copy; Sing App - React Admin Dashboard Template.
-          </footer>
-        </Container>
-      </div>
-    );
-  }
-}
-
-export default ErrorPage;

-@import '../../styles/app';
-
-.errorPage {
-  padding-top: 5%;
-  height: 100vh;
-}
-
-.errorContainer {
-  width: 365px;
-  text-align: center;
-}
-
-.errorBtn {
-  padding-left: 35px;
-  padding-right: 35px;
-}
-
-.errorCode {
-  margin: 20px;
-  font-size: 80px;
-  font-weight: $font-weight-normal;
-  color: $gray-800;
-
-  @include media-breakpoint-up(md) {
-    font-size: 180px;
-  }
-}
-
-.errorInfo {
-  font-size: 20px;
-  color: $gray-800;
-}
-
-.errorHelp {
-  font-size: 14px;
-}
-
-.pageFooter {
-  position: absolute;
-  bottom: 30px;
-  left: 0;
-  right: 0;
-  width: 100%;
-  font-size: $font-size-mini;
-  color: $text-muted;
-  text-align: center;
-}

-{
-  "name": "error",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./ErrorPage.js"
-}

-import React from 'react';
-import $ from 'jquery';
-/* eslint-disable */
-import 'imports-loader?jQuery=jquery,this=>window!webpack-raphael/raphael';
-import 'imports-loader?jQuery=jquery,this=>window!flot';
-import 'imports-loader?jQuery=jquery,this=>window!flot/jquery.flot.resize';
-import 'imports-loader?jQuery=jquery,this=>window!flot/jquery.flot.time';
-import 'imports-loader?jQuery=jquery,this=>window!jquery.flot.animator/jquery.flot.animator';
-import 'imports-loader?jQuery=jquery,this=>window!easy-pie-chart/dist/jquery.easypiechart.js';
-import 'imports-loader?jQuery=jquery,this=>window!jquery.flot-orderBars/js/jquery.flot.orderBars';
-import 'imports-loader?jQuery=jquery,this=>window!jquery-sparkline';
-/* eslint-enable */
-import d3 from 'd3';
-import nv from 'nvd3';
-import Rickshaw from 'rickshaw';
-
-import {
-  Row, Col, Progress,
-} from 'reactstrap';
-
-import FlotBars from './flot/charts/BarsChart';
-import Widget from '../../../components/Widget';
-
-import s from './Charts.module.scss';
-
-const FlotChartData = [
-  {
-    label: 'Traffic',
-    data: [[1, 23],
-      [2, 13],
-      [3, 33],
-      [4, 16],
-      [5, 32],
-      [6, 28],
-      [7, 31]],
-    lines: {
-      fill: 0.3,
-      lineWidth: 0,
-    },
-    color: ['#fff8e3'],
-  }, {
-    label: 'Traffic',
-    data: [[1, 13],
-      [2, 8],
-      [3, 17],
-      [4, 10],
-      [5, 17],
-      [6, 15],
-      [7, 16]],
-    lines: {
-      fill: 0.6,
-      lineWidth: 0,
-    },
-    color: ['#ffebb2'],
-  }, {
-    label: 'Traffic',
-    data: [[1, 20],
-      [2, 20],
-      [3, 40],
-      [4, 30],
-      [5, 40],
-      [6, 35],
-      [7, 47]],
-    animator: { steps: 60, duration: 1000, start: 0 },
-    lines: { lineWidth: 2 },
-    shadowSize: 0,
-    color: '#ffc247',
-  },
-];
-const Morris = window.Morris;
-
-class Charts extends React.Component {
-  constructor(prop) {
-    super(prop);
-    this.onResize = this.onResize.bind(this);
-    this.state = {
-      graph: null,
-    };
-  }
-
-  componentDidMount() {
-    this.initFlotChart();
-    this.initEasyPie();
-    this.initSparklineLine();
-    this.initSparklinePie();
-    this.initD3Charts();
-    this.initMorrisLineChart();
-    this.initMorrisAreaChart();
-    this.initRickshaw();
-    this.initEasyPieChart();
-    this.initInteractiveSparklines();
-    this.initSparklineAreaChart();
-    this.initMorrisDonutCharts();
-    window.addEventListener('resize', this.onResize);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.onResize);
-  }
-
-  onResize() {
-    this.initFlotChart();
-    this.initSparklineLine();
-    this.initD3Charts();
-    this.initMorrisLineChart();
-    this.initMorrisAreaChart();
-    this.initEasyPieChart();
-    this.initInteractiveSparklines();
-    this.initSparklineAreaChart();
-    this.initMorrisDonutCharts();
-    this.onResizeRickshaw();
-    this.onResizeFlotChat();
-  }
-
-  onResizeFlotChat() {
-    const option = {
-      xaxis: {
-        tickLength: 0,
-        tickDecimals: 0,
-        min: 2,
-        font: {
-          lineHeight: 13,
-          weight: 'bold',
-          color: '#777',
-        },
-      },
-      yaxis: {
-        tickDecimals: 0,
-        tickColor: '#f3f3f3',
-        font: {
-          lineHeight: 13,
-          weight: 'bold',
-          color: '#eee',
-        },
-      },
-      grid: {
-        backgroundColor: { colors: ['#fff', '#fff'] },
-        borderWidth: 1,
-        borderColor: '#f0f0f0',
-        margin: 0,
-        minBorderMargin: 0,
-        labelMargin: 20,
-        hoverable: true,
-        clickable: true,
-        mouseActiveRadius: 6,
-      },
-      legend: false,
-    };
-    $.plotAnimator($(this.flotChart), FlotChartData, option);
-  }
-
-  onResizeRickshaw() {
-    this.state.graph.configure({ height: 130 });
-    this.state.graph.render();
-  }
-
-  initEasyPie() {
-    this.$easyPieChart.easyPieChart({
-      barColor: '#8fe5d4',
-      trackColor: '#f8f9fa',
-      scaleColor: false,
-      lineWidth: 10,
-      size: 120,
-    });
-  }
-
-  initSparklineAreaChart() { // eslint-disable-line
-    this.$sparklineAreaChart.sparkline([2, 4, 6, 2, 7, 5, 3, 7, 8, 3, 6], {
-      width: '100%',
-      fillColor: '#e2e1ff',
-      height: '100px',
-      lineColor: 'transparent',
-      spotColor: '#b7b3ff',
-      minSpotColor: null,
-      maxSpotColor: null,
-      highlightSpotColor: '#ffebb2',
-      highlightLineColor: '#ffebb2',
-    }).sparkline([5, 3, 7, 8, 3, 6, 2, 4, 6, 2, 7], {
-      composite: true,
-      lineColor: 'transparent',
-      spotColor: '#b7b3ff',
-      fillColor: '#b7b3ff',
-      minSpotColor: null,
-      maxSpotColor: null,
-      highlightSpotColor: '#b7b3ff',
-      highlightLineColor: '#b7b3ff',
-    });
-  }
-
-  initSparklineLine() {
-    this.$sparklineLineChart.sparkline([1, 2, 4, 2, 3, 7], {
-      width: '100%',
-      height: '100px',
-      lineColor: '#ffc247',
-      fillColor: false,
-      highlightLineColor: '#8fe5d4',
-      spotColor: '#8fe5d4',
-      minSpotColor: '#ffc247',
-      maxSpotColor: '#ffc247',
-      spotRadius: 2,
-      lineWidth: 2,
-    });
-  }
-
-  initD3Charts() {
-    const streamLayers = (n, m, o) => {
-      if (arguments.length < 3) {
-        o = 0; //eslint-disable-line
-      }
-
-      const bump = (a) => {
-        const x = 1 / (0.1 + Math.random());
-        const y = (2 * Math.random()) - 0.5;
-        const z = 10 / (0.1 + Math.random());
-        for (let i = 0; i < m; i += 1) {
-          const w = ((i / m) - y) * z;
-          a[i] += x * Math.exp(-w * w);
-        }
-      };
-
-      return d3.range(n).map(() => {
-        const a = [];
-        let i;
-        for (i = 0; i < m; i += 1) {
-          a[i] = o + (o * Math.random());
-        }
-        for (i = 0; i < 5; i += 1) {
-          bump(a);
-        }
-        return a.map((d, iItem) => ({ x: iItem, y: Math.max(0, d) }));
-      });
-    };
-
-    const testData = (streamNames, pointCount) => {
-      const now = new Date().getTime();
-      const day = 1000 * 60 * 60 * 24; // milliseconds
-      const daysAgoCount = 60;
-      const daysAgo = daysAgoCount * day;
-      const daysAgoDate = now - daysAgo;
-      const pointsCount = pointCount || 45; // less for better performance
-      const daysPerPoint = daysAgoCount / pointsCount;
-      return streamLayers(streamNames.length, pointsCount, 0.1).map((data, i) => ({
-        key: streamNames[i],
-        values: data.map(d => ({
-          x: daysAgoDate + (d.x * day * daysPerPoint),
-          y: Math.floor(d.y * 100), // just a coefficient,
-        })),
-        yAxis: i + 1,
-        type: 'line',
-      }));
-    };
-
-    nv.addGraph(() => {
-      const chart = nv.models.lineChart()
-        .useInteractiveGuideline(true)
-        .margin({ left: 28, bottom: 30, right: 0 })
-        .color(['#ffd7de', '#e2e1ff'])
-        .showLegend(true);
-      chart.xAxis
-        .showMaxMin(false)
-        .tickFormat(d => d3.time.format('%b %d')(new Date(d)));
-      chart.yAxis
-        .showMaxMin(false)
-        .tickFormat(d3.format(',f'));
-
-      const chartData = testData(['Search', 'Referral'], 50);
-      d3.select(this.nvd3ChartLineSvg)
-        .style('height', '300px')
-        .datum(chartData.map((el) => {
-          el.area = true;
-          return el;
-        }))
-        .call(chart);
-
-      return chart;
-    });
-
-    nv.addGraph(() => {
-      const bar = nv.models.multiBarChart()
-        .margin({ left: 28, bottom: 30, right: 0 })
-        .color(['#8fe5d4', '#ffd7de']);
-      bar.xAxis
-        .showMaxMin(false)
-        .tickFormat(d => d3.time.format('%b %d')(new Date(d)));
-      bar.yAxis
-        .showMaxMin(false)
-        .tickFormat(d3.format(',f'));
-      const barData = testData(['Uploads', 'Downloads'], 10).map((el) => {
-        el.area = true;
-        return el;
-      });
-
-      d3.select(this.nvd3ChartBarSvg)
-        .style('height', '300px')
-        .datum(barData.map((el) => {
-          el.area = true;
-          return el;
-        }))
-        .call(bar);
-
-      return bar;
-    });
-  }
-
-  initMorrisDonutCharts() {
-    $(this.morrisDonutChart).html('');
-    Morris.Donut({
-      element: this.morrisDonutChart,
-      colors: ['#ffd7de', '#ffebb2'],
-      data: [
-        { label: 'Download Sales', value: 12 },
-        { label: 'In-Store Sales', value: 30 },
-      ],
-    });
-  }
-
-  initMorrisLineChart() {
-    $(this.morrisLineChart).html('');
-    Morris.Line({
-      element: this.morrisLineChart,
-      resize: true,
-      data: [
-        { y: '2006', a: 100, b: 90 },
-        { y: '2007', a: 75, b: 65 },
-        { y: '2008', a: 50, b: 40 },
-        { y: '2009', a: 75, b: 65 },
-        { y: '2010', a: 50, b: 40 },
-        { y: '2011', a: 75, b: 65 },
-        { y: '2012', a: 100, b: 90 },
-      ],
-      xkey: 'y',
-      ykeys: ['a', 'b'],
-      labels: ['Series A', 'Series B'],
-      lineColors: ['#8fe5d4', '#ffebb2'],
-    });
-  }
-
-  initMorrisAreaChart() {
-    $(this.morrisAreaChart).html('');
-    Morris.Area({
-      element: this.morrisAreaChart,
-      resize: true,
-      data: [
-        { y: '2006', a: 100, b: 90 },
-        { y: '2007', a: 75, b: 65 },
-        { y: '2008', a: 50, b: 40 },
-        { y: '2009', a: 75, b: 65 },
-        { y: '2010', a: 50, b: 40 },
-        { y: '2011', a: 75, b: 65 },
-        { y: '2012', a: 100, b: 90 },
-      ],
-      xkey: 'y',
-      ykeys: ['a', 'b'],
-      labels: ['Series A', 'Series B'],
-      lineColors: ['#f59f9f', '#f55d5d'],
-      lineWidth: 0,
-    });
-  }
-
-  initFlotChart() {
-    const option = {
-      series: {
-        lines: {
-          show: true,
-          lineWidth: 1,
-          fill: false,
-          fillColor: { colors: [{ opacity: 0.001 }, { opacity: 0.5 }] },
-        },
-        points: {
-          show: false,
-          fill: true,
-        },
-        shadowSize: 0,
-      },
-      legend: false,
-      grid: {
-        show: false,
-        margin: 0,
-        labelMargin: 0,
-        axisMargin: 0,
-        hoverable: true,
-        clickable: true,
-        tickColor: 'rgba(255,255,255,1)',
-        borderWidth: 0,
-      },
-    };
-    $(this.flotChart).plot(FlotChartData, option);
-    this.onResizeFlotChat();
-  }
-
-  initFlotBarChart() {
-    const barCustomised1 = [
-      [1388534400000, 120],
-      [1391212800000, 70],
-      [1393632000000, 100],
-      [1396310400000, 60],
-      [1398902400000, 35],
-    ];
-    const barCustomised2 = [
-      [1388534400000, 90],
-      [1391212800000, 60],
-      [1393632000000, 30],
-      [1396310400000, 73],
-      [1398902400000, 30],
-    ];
-    const barCustomised3 = [
-      [1388534400000, 80],
-      [1391212800000, 40],
-      [1393632000000, 47],
-      [1396310400000, 22],
-      [1398902400000, 24],
-    ];
-    const flotBarsData = [
-      {
-        label: 'Apple',
-        data: barCustomised1,
-        bars: {
-          show: true,
-          barWidth: 12 * 24 * 60 * 60 * 300,
-          fill: true,
-          lineWidth: 0,
-          order: 1,
-        },
-      },
-      {
-        label: 'Google',
-        data: barCustomised2,
-        bars: {
-          show: true,
-          barWidth: 12 * 24 * 60 * 60 * 300,
-          fill: true,
-          lineWidth: 0,
-          order: 2,
-        },
-      },
-      {
-        label: 'Facebook',
-        data: barCustomised3,
-        bars: {
-          show: true,
-          barWidth: 12 * 24 * 60 * 60 * 300,
-          fill: true,
-          lineWidth: 0,
-          order: 3,
-        },
-      },
-
-    ];
-    const flotBarsOptions = {
-      series: {
-        bars: {
-          show: true,
-          barWidth: 12 * 24 * 60 * 60 * 350,
-          lineWidth: 0,
-          order: 1,
-          fillColor: {
-            colors: [{
-              opacity: 1,
-            }, {
-              opacity: 0.7,
-            }],
-          },
-        },
-      },
-      xaxis: {
-        mode: 'time',
-        min: 1387497600000,
-        max: 1400112000000,
-        tickLength: 0,
-        tickSize: [1, 'month'],
-        axisLabel: 'Month',
-        axisLabelUseCanvas: true,
-        axisLabelFontSizePixels: 13,
-        axisLabelPadding: 15,
-      },
-      yaxis: {
-        axisLabel: 'Value',
-        axisLabelUseCanvas: true,
-        axisLabelFontSizePixels: 13,
-        axisLabelPadding: 5,
-      },
-      grid: {
-        hoverable: true,
-        borderWidth: 0,
-      },
-      legend: {
-        backgroundColor: 'transparent',
-        labelBoxBorderColor: 'none',
-      },
-      colors: ['#64bd63', '#f0b518', '#F7653F'],
-    };
-    $(this.flotBarChart).plot(flotBarsData, flotBarsOptions);
-  }
-
-  initEasyPieChart() {
-    $(this.easyPieChart).easyPieChart({
-      barColor: '#5dc4bf',
-      trackColor: '#ddd',
-      scaleColor: false,
-      lineWidth: 10,
-      size: 120,
-    });
-  }
-
-  initSparklinePie() {
-    const data = [2, 4, 6];
-    const option = {
-      type: 'pie',
-      width: '100px',
-      height: '100px',
-      sliceColors: ['#b7b3ff', '#ffebb2', '#f8f9fa'],
-    };
-    $(this.sparklinePie).sparkline(data, option);
-  }
-
-  initSparklineComposite() {
-    const data = [
-      [2, 4, 6, 2, 7, 5, 3, 7, 8, 3, 6],
-      [5, 3, 7, 8, 3, 6, 2, 4, 6, 2, 7],
-    ];
-    const option = [{
-      width: '99%',
-      fillColor: '#ddd',
-      height: '100px',
-      lineColor: 'transparent',
-      spotColor: '#c0d0f0',
-      minSpotColor: null,
-      maxSpotColor: null,
-      highlightSpotColor: '#ddd',
-      highlightLineColor: '#ddd',
-    }, {
-      lineColor: 'transparent',
-      spotColor: '#c0d0f0',
-      fillColor: 'rgba(192, 208, 240, 0.76)',
-      minSpotColor: null,
-      maxSpotColor: null,
-      highlightSpotColor: '#ddd',
-      highlightLineColor: '#ddd',
-    }];
-    $(this.sparklineComposite).sparkline(data[0], option[0]);
-    $(this.sparklineComposite).sparkline(data[1], $.extend({ composite: true }, option[1]));
-  }
-
-  initInteractiveSparklines() {
-    const data = [9, 12, 14, 15, 10, 14, 20];
-    const option = { type: 'bar', barColor: '#FFC247', height: '30px', barWidth: 6, barSpacing: 2 };
-    const option2 = { type: 'bar', barColor: '#FFF8E3', height: '30px', barWidth: 6, barSpacing: 2 };
-    $(this.InteractiveSparkline1).sparkline(data, option);
-    $(this.InteractiveSparkline2).sparkline(data, option2);
-  }
-
-  initRickshaw() {
-    const seriesData = [[], []];
-    const random = new Rickshaw.Fixtures.RandomData(30);
-    for (let i = 0; i < 30; i += 1) {
-      random.addData(seriesData);
-    }
-
-    // eslint-disable-next-line
-    this.state.graph = new Rickshaw.Graph({
-      element: this.rickshawChart,
-      height: 130,
-      series: [
-        {
-          color: '#ffebb2',
-          data: seriesData[0],
-          name: 'Uploads',
-        }, {
-          color: '#fff8e3',
-          data: seriesData[1],
-          name: 'Downloads',
-        },
-      ],
-    });
-
-    const hoverDetail = new Rickshaw.Graph.HoverDetail({
-      graph: this.state.graph,
-      xFormatter: x => new Date(x * 1000).toString(),
-    });
-
-    hoverDetail.show();
-
-    setInterval(() => {
-      random.removeData(seriesData);
-      random.addData(seriesData);
-      this.state.graph.update();
-    }, 1000);
-
-    this.state.graph.render();
-  }
-
-  render() {
-    return (
-      <div className={s.root}>
-        <ol className="breadcrumb">
-          <li className="breadcrumb-item">YOU ARE HERE</li>
-          <li className="breadcrumb-item active">Charts</li>
-        </ol>
-        <h1 className="page-title">Visual - <span className="fw-semi-bold">Charts</span></h1>
-        <div>
-          <Row>
-            <Col lg={6} xl={5} xs={12}>
-              <Widget
-                title={<h5>Flot <span className="fw-semi-bold">Charts</span></h5>}
-                close collapse
-              >
-                <div>
-                  <div className="mt mb" id="flotChart" ref={(r) => { this.flotChart = r; }} style={{ width: '100%', height: '260px' }} />
-                  <div className="chart-tooltip" id="flot-main-tooltip" style={{ opacity: 0 }} />
-                  <p className="fs-mini text-muted">
-                    Flot is a <span className="fw-semi-bold">pure</span> JavaScript plotting library for jQuery, with a
-                    focus on simple usage, attractive looks and interactive features.
-                  </p>
-                  <h5 className="mt">Interactive <span className="fw-semi-bold">Sparklines</span></h5>
-                  <Row className="mt">
-                    <Col md={6} xs={12}>
-                      <div className="stats-row">
-                        <div className="stat-item">
-                          <p className="value5 fw-thin">34 567</p>
-                          <h6 className="name text-muted m-0 fs-mini">Overall Values</h6>
-                        </div>
-                        <div className="stat-item stat-item-mini-chart">
-                          <div className="sparkline" ref={(r) => { this.InteractiveSparkline1 = r; }} />
-                        </div>
-                      </div>
-                    </Col>
-                    <Col md={6} xs={12}>
-                      <div className="stats-row">
-                        <div className="stat-item">
-                          <p className="value5 fw-thin">34 567</p>
-                          <h6 className="name text-muted m-0 fs-mini">Overall Values</h6>
-                        </div>
-                        <div className="stat-item stat-item-mini-chart">
-                          <div className="sparkline" ref={(r) => { this.InteractiveSparkline2 = r; }} />
-                        </div>
-                      </div>
-                    </Col>
-                  </Row>
-                  <p className="fs-mini text-muted">
-                    This jQuery plugin generates sparklines (small inline charts) directly in the browser using
-                    data supplied either inline in the HTML, or via javascript.
-                  </p>
-                </div>
-              </Widget>
-            </Col>
-            <Col lg={6} xl={7} xs={12}>
-              <Row>
-                <Col xs={12} lg={7}>
-                  <Widget
-                    title={<h5> Easy <span className="fw-semi-bold">Pie Charts</span></h5>}
-                    collapse close
-                  >
-                    <div>
-                      <div ref={(r) => { this.$easyPieChart = $(r); }} className="mb text-center" data-percent="47" />
-                      <p className="fs-mini text-muted">
-                        Easy pie chart is a jQuery plugin that uses the canvas element to render
-                        simple pie charts for single values. These charts are highly customizable,
-                        very easy to implement, scale to the resolution of the display of the client
-                        to provide sharp charts even on retina displays.
-                      </p>
-                    </div>
-                  </Widget>
-                </Col>
-                <Col xs={12} lg={5}>
-                  <Widget
-                    title={<h5> Sparkline <span className="fw-semi-bold">Pie Charts</span></h5>}
-                    collapse close
-                  >
-                    <div>
-                      <p className="fs-mini text-muted">
-                        Each example displayed below takes just 1 line of HTML or javascript to generate.
-                      </p>
-                      <div ref={(r) => { this.sparklinePie = r; }} className="chart-overflow-bottom mb-0 text-center" />
-                      <p className="fs-mini text-muted">
-                        Nevertheless Sparkline charts can be configured quite accurate.
-                      </p>
-                    </div>
-                  </Widget>
-                </Col>
-                <Col xs={12}>
-                  <Widget
-                    title={<h5> Sparkline <span className="fw-semi-bold">Line Charts</span></h5>}
-                    collapse close
-                  >
-                    <div>
-                      <div ref={(r) => { this.$sparklineLineChart = $(r); }} className="chart-overflow-bottom mb-0 text-center" />
-                    </div>
-                  </Widget>
-                </Col>
-              </Row>
-            </Col>
-            <Col xs={12}>
-              <Widget
-                title={<h5><span className="fw-semi-bold">D3</span> Charts</h5>}
-                close
-              >
-                <div>
-                  <p className="fs-mini text-muted">
-                    This project is an attempt to build re-usable charts and chart components for <span
-                      className="fw-semi-bold"
-                    >d3.js</span> without
-                    taking away the power that d3.js gives you.
-                  </p>
-                  <div>
-                    <svg ref={(r) => { this.nvd3ChartLineSvg = r; }} />
-                  </div>
-                </div>
-              </Widget>
-            </Col>
-            <Col lg={7} xs={12}>
-              <Widget
-                title={<h5><span className="fw-semi-bold">D3</span> Charts</h5>}
-                close
-              >
-                <div>
-                  <p className="fs-mini text-muted">
-                    This is a very young collection of components, with the goal of keeping these components
-                    very customizeable.
-                  </p>
-                  <div>
-                    <svg ref={(r) => { this.nvd3ChartBarSvg = r; }} />
-                  </div>
-                </div>
-              </Widget>
-            </Col>
-            <Col lg={5} xs={12}>
-              <Widget
-                title={<h5> Realtime <span className="fw-semi-bold">Rickshaw</span></h5>}
-                collapse close
-              >
-                <div>
-                  <p className="fs-mini text-muted mb-lg">
-                    Rickshaw provides the elements you need to create interactive graphs: renderers, legends,
-                    hovers, range selectors, etc. You put the pieces together.
-                    It&apos;s all based on <span className="fw-semi-bold">d3</span> underneath, so graphs are drawn with
-                    standard
-                    SVG and styled with CSS.
-                    Customize all you like with techniques you already know.
-                  </p>
-                  <h5>720 Users</h5>
-                  <Progress value="60" color="gray" size="xs" className="mb-sm progress-xs" />
-                  <p className="fs-mini text-muted mb-lg">
-                    <span className="circle bg-warning-light text-white">
-                      <i className="fa fa-circle" />
-                    </span>
-                    &nbsp;
-                    Target <span className="fw-semi-bold">820</span> users
-                    is <span className="fw-semi-bold">96%</span> reached.
-                  </p>
-                  <div ref={(r) => { this.rickshawChart = r; }} className="chart-overflow-bottom" style={{ height: '130px' }} />
-                </div>
-              </Widget>
-            </Col>
-          </Row>
-          <Row>
-            <Col lg={6} xs={12}>
-              <Widget
-                title={<h5> Morris <span className="fw-semi-bold">Area Charts</span></h5>}
-                close collapse
-              >
-                <div>
-                  <p className="fs-mini text-muted">
-                    Good-looking charts shouldn&apos;t be difficult.
-                    The public API is terribly simple. It&apos;s just one function: <code>Morris.Line(options)</code>,
-                    where options is an object containing some of the following configuration options.
-                  </p>
-                  <div className="text-center" ref={(r) => { this.morrisAreaChart = r; }} style={{ height: '343px' }} />
-                </div>
-              </Widget>
-            </Col>
-            <Col lg={6} xs={12}>
-              <Widget
-                title={<h5> Morris <span className="fw-semi-bold">Line Charts</span></h5>}
-                close collapse
-              >
-                <div>
-                  <p className="fs-mini text-muted">
-                    Good-looking charts shouldn&apos;t be difficult.
-                    The public API is terribly simple. It&apos;s just one function: <code>Morris.Line(options)</code>,
-                    where options is an object containing some of the following configuration options.
-                  </p>
-                  <div className="text-center" ref={(r) => { this.morrisLineChart = r; }} style={{ height: '343px' }} />
-                </div>
-              </Widget>
-            </Col>
-          </Row>
-          <Row>
-            <Col xs={12} lg={6} xl={3}>
-              <Widget
-                title={<h5>Area <span className="fw-semi-bold">Sparkline</span></h5>}
-                close collapse
-              >
-                <p className="fs-mini text-muted">Each example displayed below takes just 1 line of HTML or javascript to generate.</p>
-                <div className="stats-row text-muted mt">
-                  <div className="stat-item">
-                    <h6 className="name">Overall Growth</h6>
-                    <p className="value">43.75%</p>
-                  </div>
-                  <div className="stat-item">
-                    <h6 className="name">Montly</h6>
-                    <p className="value">86.34%</p>
-                  </div>
-                </div>
-                <p className="text-muted fs-mini">
-                  <span className="fw-semi-bold">17% higher</span> than last month
-                </p>
-                <div className="chart-overflow-bottom" ref={(r) => { this.$sparklineAreaChart = $(r); }} />
-              </Widget>
-            </Col>
-            <Col lg={6} xl={6} xs={12}>
-              <Widget
-                title={<h5> Flot <span className="fw-semi-bold">Bars</span></h5>}
-                close collapse
-              >
-                <div>
-                  <FlotBars />
-                  <p className="fs-mini text-muted">
-                    Flot is a <span className="fw-semi-bold">pure</span> JavaScript plotting library for jQuery, with a
-                    focus on simple usage, attractive looks and interactive features.
-                  </p>
-                </div>
-              </Widget>
-            </Col>
-            <Col lg={6} xl={3} xs={12}>
-              <Widget
-                title={<h5> Morris <span className="fw-semi-bold">Donut Charts</span></h5>}
-                close collapse
-              >
-                <div>
-                  <div className="text-center" ref={(r) => { this.morrisDonutChart = r; }} style={{ height: '180px' }} />
-                  <p className="fs-mini text-muted">
-                    Donuts a great for representing some parted information like traffice sources,
-                    disk partitions, etc.
-                    This really couldn&apos;t be easier. Create a Donut chart using <code>Morris.Donut(options)</code>,
-                    with only few options.
-                  </p>
-                </div>
-              </Widget>
-            </Col>
-          </Row>
-        </div>
-      </div>
-    );
-  }
-
-}
-
-export default Charts;

-import React from 'react';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  Row,
-  Col,
-  Table,
-  Button,
-} from 'reactstrap';
-
-import Widget from '../../../../components/Widget';
-
-const tableData = [
-  {
-    id: 0,
-    state: 'Success',
-    usage: ['text-success', 'btn-success'],
-  },
-  {
-    id: 1,
-    state: 'Warning',
-    usage: ['badge-warning', 'bg-warning'],
-  },
-  {
-    id: 2,
-    state: 'Danger',
-    usage: ['btn-danger', 'text-danger'],
-  },
-  {
-    id: 3,
-    state: 'Info',
-    usage: ['alert-info', 'badge-info'],
-  },
-  {
-    id: 4,
-    state: 'Primary',
-    usage: ['bg-primary', 'text-primary'],
-  },
-  {
-    id: 5,
-    state: 'Secondary',
-    usage: ['bg-secondary'],
-  },
-];
-
-const Colors = () => (
-  <div>
-    <Breadcrumb>
-      <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
-      <BreadcrumbItem active>Colors</BreadcrumbItem>
-    </Breadcrumb>
-    <h1 className="page-title">Colors</h1>
-    <Row>
-      <Col>
-        <Widget
-          title={<h5>States <span className="fw-semi-bold">Colors</span></h5>}
-          close collapse
-        >
-          <p>Sing comes with a number of state colors that can be applied to
-          the most of elements and components. It reuses Bootstrap&apos;s original 6 states:</p>
-          <Table>
-            <thead>
-              <tr>
-                <th>STATE</th>
-                <th>PREVIEW</th>
-                <th>CLASS POSTFIX</th>
-                <th>USAGE EXAMPLE</th>
-              </tr>
-            </thead>
-            <tbody>
-              {tableData.map(({ state, usage, id }) =>
-                <tr key={id}>
-                  <th scope="row" className="fw-thin">{state}</th>
-                  <td><span className={`circle bg-${state.toLowerCase()}`}>&nbsp;</span></td>
-                  <td><code>*-{state.toLowerCase()}</code></td>
-                  <td>{usage.map(item => <code key={item} className="mr-xs">{item}</code>)}</td>
-                </tr>,
-              )}
-            </tbody>
-          </Table>
-        </Widget>
-      </Col>
-    </Row>
-    <Row>
-      <Col xs={12} md={6}>
-        <Widget
-          title={<h5>Text <span className="fw-semi-bold">Colors</span></h5>}
-          close collapse
-        >
-          <p>Convey meaning through color with a handful of color utility classes.
-            Includes support for styling links with hover states, too. Use <code>text-*</code> class to fill text.</p>
-          <div className="widget-padding-md border rounded w-100 h-100 text-left">
-            <h1 className="text-danger">h1. Heading</h1>
-            <h2 className="text-warning">h2. Heading</h2>
-            <h3 className="text-success">h3. Heading</h3>
-            <h4 className="text-primary">h4. Heading</h4>
-            <h5 className="text-info">h5. Heading</h5>
-            <h6 className="text-inverse">h6. Heading</h6>
-          </div>
-        </Widget>
-      </Col>
-      <Col xs={12} md={6}>
-        <Widget
-          title={<h5>Example <span className="fw-semi-bold">Buttons</span></h5>}
-          close collapse
-        >
-          <p>Use any of the available button classes to quickly create a styled button.
-            Semantically distinguishable beauty.</p>
-          <Button className="width-100 mb-xs mr-xs" color="default">Default</Button>
-          <Button className="width-100 mb-xs mr-xs" color="primary">Primary</Button>
-          <Button className="width-100 mb-xs mr-xs" color="info">Info</Button>
-          <Button className="width-100 mb-xs mr-xs" color="success">Success</Button>
-          <Button className="width-100 mb-xs mr-xs" color="warning">Warning</Button>
-          <Button className="width-100 mb-xs mr-xs" color="danger">Danger</Button>
-          <Button className="width-100 mb-xs mr-xs" color="gray">Gray</Button>
-          <Button className="width-100 mb-xs mr-xs" color="inverse">Inverse</Button>
-        </Widget>
-      </Col>
-    </Row>
-  </div>
-);
-
-export default Colors;

-{
-  "name": "Colors",
-  "version": "0.0.0",
-  "main": "./Colors.js",
-  "private": true
-}

-import React from 'react';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  Row,
-  Col,
-  Table,
-} from 'reactstrap';
-
-import Widget from '../../../../components/Widget';
-
-const Typography = () => (
-  <div>
-    <Breadcrumb>
-      <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
-      <BreadcrumbItem active>Grid</BreadcrumbItem>
-    </Breadcrumb>
-    <h1 className="page-title">Grid <span className="fw-semi-bold">System</span></h1>
-    <Row>
-      <Col xs={12} md={6}>
-        <Widget
-          title={<h5><span className="fw-semi-bold">How</span> it works</h5>}
-          close collapse
-        >
-          <p>
-            Bootstrap’s grid system uses a series of containers, rows, and columns to layout
-            and align content. It’s built with flexbox and is fully responsive. Below is an
-            example and an in-depth look at how the grid comes together.
-          </p>
-          <div className="bg-light p-3">
-            <Row className="mb-lg">
-              <Col xs={4}>
-                <div className="py-4 bg-primary text-center text-white">
-                  One of three columns
-                </div>
-              </Col>
-              <Col xs={4}>
-                <div className="py-4 bg-primary text-center text-white">
-                  One of three columns
-                </div>
-              </Col>
-              <Col xs={4}>
-                <div className="py-4 bg-primary text-center text-white">
-                  One of three columns
-                </div>
-              </Col>
-            </Row>
-            <pre className="bg-light border-0 w-100 h-100">
-              <code className="text-danger">{'<Container>\n'}</code>
-              <code className="text-success">{'  <Row>\n'}</code>
-              <code className="text-info">{'    <Col xs={4}>\n'}</code>
-              <code>{'      One of three columns\n'}</code>
-              <code className="text-info">{'    </Col>\n'}</code>
-              <code className="text-info">{'    <Col xs={4}>\n'}</code>
-              <code>{'      One of three columns\n'}</code>
-              <code className="text-info">{'    </Col>\n'}</code>
-              <code className="text-info">{'    <Col xs={4}>\n'}</code>
-              <code>{'      One of three columns\n'}</code>
-              <code className="text-info">{'    </Col>\n'}</code>
-              <code className="text-success">{'  </Row>\n'}</code>
-              <code className="text-danger">{'</Container>'}</code>
-            </pre>
-          </div>
-        </Widget>
-      </Col>
-      <Col xs={12} md={6}>
-        <Widget
-          title={<h5><span className="fw-semi-bold">Equal</span> width</h5>}
-          close collapse
-        >
-          <p>
-            For example, here are two grid layouts that apply to every device and viewport,
-            from xs to xl. Add any number of unit-less classes for each breakpoint you
-            need and every column will be the same width.
-          </p>
-          <div className="bg-light p-3">
-            <Row className="mb-lg">
-              <Col>
-                <div className="py-4 bg-primary text-center text-white">
-                  1 of 2
-                </div>
-              </Col>
-              <Col>
-                <div className="py-4 bg-primary text-center text-white">
-                  2 of 2
-                </div>
-              </Col>
-            </Row>
-            <pre className="bg-light border-0 w-100 h-100">
-              <code className="text-danger">{'<Container>\n'}</code>
-              <code className="text-success">{'  <Row>\n'}</code>
-              <code className="text-info">{'    <Col>\n'}</code>
-              <code>{'      1 of 2\n'}</code>
-              <code className="text-info">{'    </Col>\n'}</code>
-              <code className="text-info">{'    <Col>\n'}</code>
-              <code>{'      1 of 2\n'}</code>
-              <code className="text-info">{'    </Col>\n'}</code>
-              <code className="text-success">{'  </Row>\n'}</code>
-              <code className="text-danger">{'</Container>'}</code>
-            </pre>
-          </div>
-        </Widget>
-      </Col>
-    </Row>
-    <Row>
-      <Col>
-        <Widget
-          title={<h5><span className="fw-semi-bold">Grid</span> options</h5>}
-          close collapse
-        >
-          <p>
-          While Bootstrap uses <code>em</code>s or <code>rem</code>s for defining
-          most sizes, <code>px</code>s are used for
-          grid breakpoints and container widths. This is because the viewport width is in
-          pixels and does not change with the font size. See how aspects of the Bootstrap grid
-          system work across multiple devices with a handy table.
-          </p>
-          <Table striped responsive>
-            <thead>
-              <tr>
-                <th />
-                <th className="text-center">
-                  Extra small<br />
-                  <small>&lt;576px</small>
-                </th>
-                <th className="text-center">
-                  Small<br />
-                  <small>≥576px</small>
-                </th>
-                <th className="text-center">
-                  Medium<br />
-                  <small>≥768px</small>
-                </th>
-                <th className="text-center">
-                  Large<br />
-                  <small>≥992px</small>
-                </th>
-                <th className="text-center">
-                  Extra large<br />
-                  <small>≥1200px</small>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th className="text-nowrap" scope="row">Max container width</th>
-                <td>None (auto)</td>
-                <td>540px</td>
-                <td>720px</td>
-                <td>960px</td>
-                <td>1140px</td>
-              </tr>
-              <tr>
-                <th className="text-nowrap" scope="row">Component property</th>
-                <td><code>{'<Col xs={}>'}</code></td>
-                <td><code>{'<Col sm={}>'}</code></td>
-                <td><code>{'<Col md={}>'}</code></td>
-                <td><code>{'<Col lg={}>'}</code></td>
-                <td><code>{'<Col xl={}>'}</code></td>
-              </tr>
-              <tr>
-                <th className="text-nowrap" scope="row"># of columns</th>
-                <td colSpan="5">12</td>
-              </tr>
-              <tr>
-                <th className="text-nowrap" scope="row">Gutter width</th>
-                <td colSpan="5">30px (15px on each side of a column)</td>
-              </tr>
-              <tr>
-                <th className="text-nowrap" scope="row">Nestable</th>
-                <td colSpan="5">Yes</td>
-              </tr>
-              <tr>
-                <th className="text-nowrap" scope="row">Column ordering</th>
-                <td colSpan="5">Yes</td>
-              </tr>
-            </tbody>
-          </Table>
-        </Widget>
-      </Col>
-    </Row>
-    <Row>
-      <Col xs={12} md={6}>
-        <Widget
-          title={<h5>Vertical <span className="fw-semi-bold">Alignment</span></h5>}
-          close collapse
-        >
-          <p>Use flexbox alignment utilities to vertically and horizontally align columns.</p>
-          <div className="bg-light p-3">
-            <Row className="mb-lg" style={{ height: '150px' }}>
-              <Col className="align-self-start">
-                <div className="py-4 bg-primary text-center text-white">
-                  Start
-                </div>
-              </Col>
-              <Col className="align-self-center">
-                <div className="py-4 bg-primary text-center text-white">
-                  Center
-                </div>
-              </Col>
-              <Col className="align-self-end">
-                <div className="py-4 bg-primary text-center text-white">
-                  End
-                </div>
-              </Col>
-            </Row>
-            <pre className="bg-light border-0 w-100 h-100">
-              <code className="text-danger">{'<Container>\n'}</code>
-              <code className="text-success">{'  <Row>\n'}</code>
-              <code className="text-info">{'    <Col className="align-self-start">\n'}</code>
-              <code>{'      Start\n'}</code>
-              <code className="text-info">{'    </Col>\n'}</code>
-              <code className="text-info">{'    <Col className="align-self-center">\n'}</code>
-              <code>{'      Center\n'}</code>
-              <code className="text-info">{'    </Col>\n'}</code>
-              <code className="text-info">{'    <Col className="align-self-end">\n'}</code>
-              <code>{'      End\n'}</code>
-              <code className="text-info">{'    </Col>\n'}</code>
-              <code className="text-success">{'  </Row>\n'}</code>
-              <code className="text-danger">{'</Container>'}</code>
-            </pre>
-          </div>
-        </Widget>
-      </Col>
-      <Col xs={12} md={6}>
-        <Widget
-          title={<h5>Vertical <span className="fw-semi-bold">Alignment</span></h5>}
-          close collapse
-        >
-          <p>Use flexbox alignment utilities to vertically and horizontally align columns.</p>
-          <div className="bg-light p-3">
-            <Row className="mb-lg justify-content-end">
-              <Col xs={3}>
-                <div className="py-4 bg-primary text-center text-white">
-                  1
-                </div>
-              </Col>
-              <Col xs={3}>
-                <div className="py-4 bg-primary text-center text-white">
-                  2
-                </div>
-              </Col>
-            </Row>
-            <Row className="mb-lg justify-content-around">
-              <Col xs={3}>
-                <div className="py-4 bg-primary text-center text-white">
-                  1
-                </div>
-              </Col>
-              <Col xs={3}>
-                <div className="py-4 bg-primary text-center text-white">
-                  2
-                </div>
-              </Col>
-            </Row>
-            <Row className="mb-lg justify-content-between">
-              <Col xs={3}>
-                <div className="py-4 bg-primary text-center text-white">
-                  1
-                </div>
-              </Col>
-              <Col xs={3}>
-                <div className="py-4 bg-primary text-center text-white">
-                  2
-                </div>
-              </Col>
-              <Col xs={3}>
-                <div className="py-4 bg-primary text-center text-white">
-                  3
-                </div>
-              </Col>
-            </Row>
-            <pre className="bg-light border-0 w-100 h-100">
-              <code className="text-danger">{'<Container>\n'}</code>
-              <code className="text-success">{'  <Row className="justify-content-end">\n'}</code>
-              <code className="text-info">{'    <Col>\n'}</code>
-              <code>{'      1\n'}</code>
-              <code className="text-info">{'    </Col>\n'}</code>
-              <code className="text-info">{'    <Col>\n'}</code>
-              <code>{'      2\n'}</code>
-              <code className="text-info">{'    </Col>\n'}</code>
-              <code className="text-success">{'  </Row>\n'}</code>
-              <code className="text-success">{'  <Row className="justify-content-around">\n'}</code>
-              <code className="text-info">{'    <Col>\n'}</code>
-              <code>{'      1\n'}</code>
-              <code className="text-info">{'    </Col>\n'}</code>
-              <code className="text-info">{'    <Col>\n'}</code>
-              <code>{'      2\n'}</code>
-              <code className="text-info">{'    </Col>\n'}</code>
-              <code className="text-success">{'  </Row>\n'}</code>
-              <code className="text-success">{'  <Row className="justify-content-between">\n'}</code>
-              <code className="text-info">{'    <Col>\n'}</code>
-              <code>{'      1\n'}</code>
-              <code className="text-info">{'    </Col>\n'}</code>
-              <code className="text-info">{'    <Col>\n'}</code>
-              <code>{'      2\n'}</code>
-              <code className="text-info">{'    </Col>\n'}</code>
-              <code className="text-info">{'    <Col>\n'}</code>
-              <code>{'      3\n'}</code>
-              <code className="text-info">{'    </Col>\n'}</code>
-              <code className="text-success">{'  </Row>\n'}</code>
-              <code className="text-danger">{'</Container>'}</code>
-            </pre>
-          </div>
-        </Widget>
-      </Col>
-    </Row>
-  </div>
-);
-
-export default Typography;

-{
-  "name": "Grid",
-  "version": "0.0.0",
-  "main": "./Grid.js",
-  "private": true
-}

-import React from 'react';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  Row,
-  Col,
-} from 'reactstrap';
-
-import Widget from '../../../../components/Widget';
-
-const Typography = () => (
-  <div>
-    <Breadcrumb>
-      <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
-      <BreadcrumbItem active>Typography</BreadcrumbItem>
-    </Breadcrumb>
-    <h1 className="page-title">Typography - <span className="fw-semi-bold">Texts & Display</span></h1>
-    <Row>
-      <Col xs={12} md={6}>
-        <Widget
-          title={<h5>Headings <small className="text-muted">Default and customized</small></h5>}
-          close collapse
-        >
-          <h4>Default headings</h4>
-          <p>Basic headings for everyday use</p>
-          <div className="widget-padding-md w-100 h-100 text-left border rounded">
-            <Row>
-              <Col sm={6}>
-                <h1>h1. Heading</h1>
-                <h2>h2. Heading</h2>
-                <h3>h3. Heading</h3>
-                <h4>h4. Heading</h4>
-                <h5>h5. Heading</h5>
-                <h6>h6. Heading</h6>
-              </Col>
-              <Col sm={6}>
-                <h1 className="text-danger">h1. Heading</h1>
-                <h2 className="text-warning">h2. Heading</h2>
-                <h3 className="text-success">h3. Heading</h3>
-                <h4 className="text-primary">h4. Heading</h4>
-                <h5 className="text-info">h5. Heading</h5>
-                <h6 className="text-inverse">h6. Heading</h6>
-              </Col>
-            </Row>
-          </div>
-          <h4 className="mt-5">Customized headings</h4>
-          <p>Enhanced with additional text</p>
-          <div className="widget-padding-md w-100 h-100 text-left border rounded">
-            <h3>
-              Headings <small>And some clarification text</small>
-            </h3>
-          </div>
-          <h4 className="mt-5">Display</h4>
-          <p>Headings to stand out</p>
-          <div className="widget-padding-md w-100 h-100 text-left border rounded">
-            <h1 className="display-1">Display 1</h1>
-            <h1 className="display-2">Display 2</h1>
-            <h1 className="display-3">Display 3</h1>
-            <h1 className="display-4">Display 4</h1>
-          </div>
-          <h4 className="mt-5">Lead</h4>
-          <p>Make a paragraph stand out by adding <code className="highlighter-rouge">.lead</code>.</p>
-          <div className="widget-padding-md w-100 h-100 text-left border rounded">
-            <p className="lead">Sing App is admin dashboard template built with Bootstrap</p>
-          </div>
-        </Widget>
-      </Col>
-      <Col xs={12} md={6}>
-        <Widget
-          title={<h5>Body texts <small className="text-muted">Variations</small></h5>}
-          close collapse
-        >
-          <h4>Basic texts</h4>
-          <p>Styling for common texts</p>
-          <div className="widget-padding-md w-100 h-100 text-left border rounded">
-            <p>You can use the mark tag to <mark>highlight</mark> text.</p>
-            <p><del>This line of text is meant to be treated as deleted text.</del></p>
-            <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
-            <p><small>This line of text is meant to be treated as fine print.</small></p>
-            <p><em>This line rendered as italicized text.</em></p>
-            <p><strong>This line rendered as bold text.</strong></p>
-          </div>
-          <h4 className="mt-5">Font weights</h4>
-          <p>Various font weights supported</p>
-          <div className="widget-padding-md w-100 h-100 text-left border rounded">
-            <p>Thin (default) font weight</p>
-            <p className="fw-normal">Normal font weight</p>
-            <p className="fw-semi-bold">Semi bold to empasize important thing</p>
-            <p className="fw-bold">Bold font as a high priority</p>
-          </div>
-          <h4 className="mt-5">Colors</h4>
-          <p>Bootstrap state colors can be applied to texts too</p>
-          <div className="widget-padding-md w-100 h-100 text-left border rounded">
-            <p className="text-danger">Some danger text</p>
-            <p className="text-warning">Some warning text</p>
-            <p className="text-success">Some succes text</p>
-            <p className="text-primary">Some primary text</p>
-            <p className="text-info">Some info text</p>
-          </div>
-          <h4 className="mt-5">Blockquotes</h4>
-          <p>Citing someone is really easy</p>
-          <div className="widget-padding-md w-100 h-100 text-left border rounded">
-            <blockquote className="blockquote">
-              <p>Don&apos;t get set into one form, adapt it and build your own, and let
-                  it grow, be like water. Empty your mind, be formless, shapeless — like water.
-                  Now you put water in a cup, it becomes the cup; You put water into a bottle it
-                  becomes the bottle; You put it in a teapot it becomes the teapot. Now water can
-                  flow or it can crash. Be water, my friend.</p>
-              <footer className="blockquote-footer">Bruce Lee in <cite title="A Warrior's Journey">A Warrior&apos;s Journey</cite></footer>
-            </blockquote>
-          </div>
-        </Widget>
-      </Col>
-    </Row>
-  </div>
-);
-
-export default Typography;

-{
-  "name": "Typography",
-  "version": "0.0.0",
-  "main": "./Typography.js",
-  "private": true
-}

-import React, { Component } from 'react';
-import cx from 'classnames';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  Alert,
-} from 'reactstrap';
-
-import Filters from './components/Filters/Filters';
-import MessageTable from './components/MessageTable/MessageTable';
-
-import s from './Email.module.scss';
-
-class Email extends Component {
-  state = {
-    isNotificationOpen: true,
-    filter: null,
-    openedMessage: null,
-    compose: false,
-    composeData: null,
-    alertAfter: false,
-  }
-
-  componentDidMount() {
-    setTimeout(() => { this.fixAlert(); }, 0);
-  }
-
-  fixAlert() {
-    this.setState({ alertAfter: true });
-  }
-
-  filter = (filter) => {
-    this.setState({ filter, compose: false, composeData: null });
-  }
-
-  closeNotification() {
-    this.setState({ isNotificationOpen: false });
-  }
-
-  openMessage = (id) => {
-    this.setState(pvState => ({
-      openedMessage: id,
-      compose: id === null ? false : pvState.compose,
-      composeData: id === null ? null : pvState.composeData,
-    }));
-  }
-
-  changeCompose = (compose, data) => {
-    this.setState({ compose });
-
-    if (data) {
-      this.setState({ composeData: data });
-    }
-  }
-
-  render() {
-    const {
-      isNotificationOpen,
-      filter,
-      openedMessage,
-      alertAfter,
-      compose,
-      composeData,
-    } = this.state;
-    return (
-      <div>
-        <Breadcrumb>
-          <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
-          <BreadcrumbItem active>Email</BreadcrumbItem>
-        </Breadcrumb>
-        <div className="page-top-line">
-          <h1 className="page-title">Email - <span className="fw-semi-bold">Inbox</span></h1>
-          <Alert
-            isOpen={isNotificationOpen}
-            color="success"
-            toggle={() => this.closeNotification()}
-            className={cx(s.alert, { [s.alertAfter]: alertAfter })}
-          >
-            Hey! This is a <span className="fw-semi-bold">real app</span> with CRUD and Search functions. Have fun!
-          </Alert>
-        </div>
-        <div className={s.view}>
-          <Filters
-            filter={this.filter}
-            openMessage={this.openMessage}
-            compose={this.changeCompose}
-          />
-          <MessageTable
-            filter={filter}
-            openedMessage={openedMessage}
-            openMessage={this.openMessage}
-            compose={compose}
-            changeCompose={this.changeCompose}
-            composeData={composeData}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Email;

-.view {
-  display: flex;
-
-  @media screen and (max-width: 1125px) {
-    flex-direction: column;
-  }
-}
-
-.alert {
-  transition: 0.6s;
-  transition-timing-function: ease;
-  transform: translateX(-130vw);
-}
-
-.alertAfter {
-  transform: translateX(0);
-}

-import React from 'react';
-import PropTypes from 'prop-types';
-import { Editor } from 'react-draft-wysiwyg';
-import { Input, Button } from 'reactstrap';
-
-import Widget from '../../../../../components/Widget';
-
-import s from './Compose.module.scss';
-
-const Compose = ({ data }) => (
-  <Widget>
-    <div className={s.compose}>
-      <h4>Compose <span className="fw-semi-bold">New</span></h4>
-      <Input type="text" placeholder="To" defaultValue={data && data.from} />
-      <Input type="text" placeholder="Subject" defaultValue={data && data.theme} />
-      <Editor
-        wrapperClassName={s.wysiwygWrapper}
-        editorClassName={s.wysiwygEditor}
-        toolbarClassName={s.wysiwygToolbar}
-      />
-      <div className="text-md-right mt-xs">
-        <Button color="gray">Discard</Button>
-        <Button color="gray">Save</Button>
-        <Button color="danger">Send</Button>
-      </div>
-    </div>
-  </Widget>
-);
-
-Compose.propTypes = {
-  data: PropTypes.shape({
-    from: PropTypes.string,
-    to: PropTypes.string,
-  }),
-};
-
-Compose.defaultProps = {
-  data: {
-    from: null,
-    to: null,
-  },
-};
-
-export default Compose;

-@import '../../../../../styles/app';
-
-:global {
-  @import '../../../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg';
-}
-
-.compose {
-  h4 {
-    margin-bottom: 20px;
-  }
-
-  input {
-    margin-bottom: 15px;
-  }
-
-  button {
-    margin-left: 7.5px;
-  }
-}
-
-.wysiwygWrapper {
-  border: 1px solid #ccc !important;
-  overflow: visible;
-  height: 270px;
-  margin-bottom: 15px;
-}
-
-.wysiwygToolbar {
-  color: $gray-800 !important;
-  background-color: #ddd !important;
-  border-color: transparent !important;
-
-  :global {
-    .rdw-option-wrapper {
-      font-family: 'Open Sans', sans-serif;
-      font-size: 14px;
-      height: 30px;
-      min-width: 30px;
-      margin: 0;
-      background: #f8f8f8;
-    }
-
-    .rdw-dropdown-wrapper {
-      background: #f8f8f8;
-    }
-  }
-}
-
-.wysiwygEditor {
-  position: relative !important;
-  overflow: hidden !important;
-  height: 150px;
-  line-height: 0.1;
-}

-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { Badge } from 'reactstrap';
-
-import s from './Filters.module.scss';
-
-class Filters extends Component {
-  state = { activeButtonId: 0 }
-
-  handleButtonClick(id, filterCond) {
-    const { filter, openMessage } = this.props;
-    this.setState({ activeButtonId: id });
-
-    openMessage(null);
-    filter(filterCond);
-  }
-
-  render() {
-    const mainButtons = [
-      { id: 0, title: 'Inbox', notifications: 2, filter: null },
-      { id: 1, title: 'Starred', filter: 'starred' },
-      { id: 2, title: 'Sent Mail', filter: 'sent' },
-      { id: 3, title: 'Draft', notifications: 3, lable: 'danger', filter: 'draft' },
-      { id: 4, title: 'Trash', filter: 'trash' },
-    ];
-    const quickViewButton = [
-      { id: 0, title: 'Work', colour: 'danger' },
-      { id: 1, title: 'Private', colour: 'white' },
-      { id: 2, title: 'Saved', colour: '' },
-    ];
-    const { activeButtonId } = this.state;
-    const { compose } = this.props;
-    return (
-      <div className={s.filters}>
-        <button
-          className="btn btn-danger btn-block"
-          onClick={() => compose(true)}
-        >
-          Compose
-        </button>
-        <div className={s.mainFilterButtons}>
-          {mainButtons.map(button =>
-            <button
-              className={cx('btn', s.button, { [s.buttonActive]: button.id === activeButtonId })}
-              key={button.id}
-              onClick={() => this.handleButtonClick(button.id, button.filter)}
-            >
-              {button.title}
-              {button.notifications &&
-                <Badge color={button.lable || 'default'} pill>{button.notifications}</Badge>}
-            </button>,
-          )}
-        </div>
-        <div>
-          <h6>QUICK VIEW</h6>
-          {quickViewButton.map(button =>
-            <button className={cx('btn', s.button)} key={button.id}>
-              {button.title}
-              <i className={cx('fa fa-circle', { [`text-${button.colour}`]: true })} />
-            </button>,
-          )}
-        </div>
-      </div>
-    );
-  }
-}
-
-Filters.propTypes = {
-  filter: PropTypes.func.isRequired,
-  openMessage: PropTypes.func.isRequired,
-  compose: PropTypes.func.isRequired,
-};
-
-export default Filters;

-@import '../../../../../styles/app';
-
-.filters {
-  width: 16%;
-  padding-right: 15px;
-
-  @media screen and (max-width: 1125px) {
-    width: 100%;
-    padding-right: 0;
-  }
-}
-
-.mainFilterButtons {
-  margin: 15px 0;
-}
-
-.button {
-  width: 100%;
-  padding: 10px 14px !important;
-  display: flex !important;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: $font-weight-normal;
-  border-radius: 0.2rem;
-  color: #868e96;
-  background: transparent;
-
-  &:hover {
-    background-color: #e5e5e5;
-    color: $gray-700;
-  }
-
-  & :global .badge {
-    width: 20px;
-    height: 20px;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 10px;
-  }
-}
-
-.buttonActive {
-  background-color: $white;
-  color: #555;
-  font-weight: 600;
-}

-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Widget from '../../../../../components/Widget';
-import MessageHeader from '../MessageHeader/MessageHeader';
-import MessageAttachments from '../MessageAttachments/MessageAttachments';
-
-const Message = ({ message, compose }) => (
-  <Widget>
-    <MessageHeader
-      title={message.theme}
-      name={message.from}
-      email={message.fromEmail}
-      to={message.to}
-      date={message.date}
-      compose={compose}
-    />
-    {/* eslint-disable */}
-    <div
-      dangerouslySetInnerHTML={{ __html: message.content }}
-    />
-    {/* eslint-enable */}
-    {message.attachments && <MessageAttachments attachments={message.attachments} />}
-  </Widget>
-);
-
-Message.propTypes = {
-  message: PropTypes.shape({
-    theme: PropTypes.string,
-    from: PropTypes.string,
-    fromEmail: PropTypes.string,
-    to: PropTypes.string,
-    date: PropTypes.string,
-  }).isRequired,
-  compose: PropTypes.func.isRequired,
-};
-
-export default Message;

-import React from 'react';
-import PropTypes from 'prop-types';
-
-import s from './MessageAttachments.module.scss';
-
-const MessageAttachments = ({ attachments }) => (
-  <div className={s.messageAttachments}>
-    <hr />
-    <div className={s.attachmentsInfo}>
-      <strong>{attachments.length} attachments</strong> -
-      <button className="btn-link">Download all attachments</button>
-      <button className="btn-link">View all attachments</button>
-    </div>
-    {attachments.map(att =>
-      <div className={s.attachment} key={att.id}>
-        <img src={att.photo} alt="attachment" />
-        <h5>{att.photoName}</h5>
-        <div className={s.attachmentButtons}>
-          {att.weight}
-          <button className="btn-link">View</button>
-          <button className="btn-link">Download</button>
-        </div>
-      </div>,
-    )}
-  </div>
-);
-
-MessageAttachments.propTypes = {
-  attachments: PropTypes.arrayOf(PropTypes.shape({
-    photo: PropTypes.string,
-    photoName: PropTypes.string,
-    weight: PropTypes.string,
-  })).isRequired,
-};
-
-export default MessageAttachments;

-@import '../../../../../styles/app';
-
-.messageAttachments {
-  width: 50%;
-
-  @media screen and (max-width: 576px) {
-    width: 100%;
-  }
-}
-
-.attachmentsInfo {
-  margin: -5px 0 10px;
-
-  a {
-    margin-left: 5px;
-  }
-}
-
-.attachment {
-  max-width: 100%;
-
-  img {
-    width: 100%;
-  }
-
-  h5 {
-    font-weight: $font-weight-semi-bold;
-  }
-}
-
-.attachmentButtons {
-  margin: -5px 0 15px;
-
-  a {
-    margin-left: 10px;
-  }
-}

-import React from 'react';
-import PropTypes from 'prop-types';
-
-import ReplyDropdown from '../ReplyDropdown/ReplyDropdown';
-
-import userPhoto from '../../../../../images/people/a5.jpg';
-import s from './MessageHeader.module.scss';
-
-const MessageHeader = ({ title, name, email, to, date, compose }) => (
-  <div className={s.messageHeader}>
-    <h3>{title}</h3>
-    <div className={s.messageHeaderLine}>
-      <div className={s.messageFrom}>
-        <img src={userPhoto} alt="user" className="rounded-circle" />
-        <div className={s.messageFromInfo}>
-          <span>
-            <strong>{name}</strong>
-            <span className={s.email}>
-              {`<${email}>`}
-            </span>
-          </span>
-          <span className={s.to}>to {to}</span>
-        </div>
-      </div>
-      <div className={s.messageHeaderDate}>
-        {date}
-        <ReplyDropdown compose={() => compose(true, { from: name, theme: title })} />
-      </div>
-    </div>
-  </div>
-);
-
-MessageHeader.propTypes = {
-  title: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  email: PropTypes.string.isRequired,
-  to: PropTypes.string.isRequired,
-  date: PropTypes.string.isRequired,
-  compose: PropTypes.func.isRequired,
-};
-
-export default MessageHeader;

-@import '../../../../../styles/app';
-
-.messageHeader {
-  width: 100%;
-}
-
-.messageHeaderLine {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: 15px 0;
-  flex-wrap: wrap;
-}
-
-.messageFrom {
-  display: flex;
-  align-items: center;
-
-  img {
-    height: 30px;
-    width: 30px;
-    margin-right: 5px;
-  }
-}
-
-.messageFromInfo {
-  display: flex;
-  flex-direction: column;
-  line-height: 1.1;
-}
-
-.email {
-  color: #868e96;
-  font-size: $font-size-mini;
-  margin-left: 5px;
-}
-
-.to {
-  color: #868e96;
-}
-
-.messageHeaderDate {
-  padding: 15px 0;
-
-  & :global .btn-group {
-    margin-left: 10px;
-
-    button {
-      font-size: 12px;
-
-      i {
-        margin-right: 3px;
-      }
-    }
-  }
-}

-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { Table, Input, FormGroup, Label } from 'reactstrap';
-
-import Widget from '../../../../../components/Widget';
-import MessageTableHeader from '../MessageTableHeader/MessageTableHeader';
-import Pagination from '../Pagination/Pagination';
-import Compose from '../Compose/Compose';
-import Message from '../Message/Message';
-
-import mock from '../../mock';
-import s from './MessageTable.module.scss';
-
-class MessageTable extends Component {
-  state = {
-    messages: mock,
-    checkedIds: [],
-    searchString: '',
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const { filter } = this.props;
-
-    if (filter !== nextProps.filter) {
-      this.chooseNone();
-      this.setState({ openedMessage: null });
-    }
-  }
-
-  chooseAll = () => {
-    const { messages } = this.state;
-    const { filter } = this.props;
-    const newCheckedIds = [];
-
-    if (filter) {
-      messages
-        .filter(message => message[filter])
-        .forEach(message => newCheckedIds.push(message.id));
-    } else {
-      messages.forEach(message => newCheckedIds.push(message.id));
-    }
-
-    this.setState({ checkedIds: newCheckedIds });
-  }
-
-  chooseNone = () => {
-    this.setState({ checkedIds: [] });
-  }
-
-  chooseRead = () => {
-    const { messages } = this.state;
-    const newCheckedIds = [];
-
-    messages.forEach((message) => {
-      if (!message.unreaded) {
-        newCheckedIds.push(message.id);
-      }
-    });
-
-    this.setState({
-      checkedIds: newCheckedIds,
-    });
-  }
-
-  chooseUnread = () => {
-    const { messages } = this.state;
-    const newCheckedIds = [];
-
-    messages.forEach((message) => {
-      if (message.unreaded) {
-        newCheckedIds.push(message.id);
-      }
-    });
-
-    this.setState({
-      checkedIds: newCheckedIds,
-    });
-  }
-
-  choose(id) {
-    const { checkedIds } = this.state;
-    const indexOfId = checkedIds.indexOf(id);
-
-    if (indexOfId === -1) {
-      this.setState({ checkedIds: [...checkedIds, id] });
-    } else {
-      const newCheckedIds = [...checkedIds];
-      newCheckedIds.splice(indexOfId, 1);
-      this.setState({ checkedIds: newCheckedIds });
-    }
-  }
-
-  markUnread = () => {
-    const { messages, checkedIds } = this.state;
-    const newMessages = [...messages];
-
-    newMessages.map((message) => {
-      if (checkedIds.indexOf(message.id) !== -1) {
-        message.unreaded = true;
-      }
-      return message;
-    });
-
-    this.setState({ messages: newMessages });
-  }
-
-  markRead = () => {
-    const { messages, checkedIds } = this.state;
-    const newMessages = [...messages];
-
-    newMessages.map((message) => {
-      if (checkedIds.indexOf(message.id) !== -1) {
-        message.unreaded = false;
-      }
-      return message;
-    });
-
-    this.setState({ messages: newMessages });
-  }
-
-  delete = () => {
-    const { messages, checkedIds } = this.state;
-    const newMessages = [...messages];
-
-    newMessages.map((message) => {
-      if (checkedIds.indexOf(message.id) !== -1) {
-        message.deleted = true;
-      }
-      return message;
-    });
-
-    this.setState({
-      messages: newMessages.filter(message => !message.deleted),
-      checkedIds: [],
-    });
-  }
-
-  starItem(id) {
-    const { messages } = this.state;
-    const isAlreadyStarred = messages.find(m => m.id === id).starred;
-    const newMessages = [...messages];
-
-    newMessages.map((message) => {
-      if (message.id === id) {
-        message.starred = !isAlreadyStarred;
-      }
-      return message;
-    });
-
-    this.setState({ messages: newMessages });
-  }
-
-  handleOpenMessage(id) {
-    const newMessages = [...this.state.messages];
-
-    newMessages.map((message) => {
-      if (message.id === id) {
-        message.unreaded = false;
-      }
-
-      return message;
-    });
-
-    this.setState({ messages: newMessages });
-
-    this.props.openMessage(id);
-  }
-
-  search = (value) => {
-    this.setState({ searchString: value.toLowerCase() });
-  }
-
-  _searchable(m) {
-    const { searchString } = this.state;
-
-    if (searchString) {
-      return (m.content.toLowerCase().indexOf(searchString) !== -1 ||
-        m.from.toLowerCase().indexOf(searchString) !== -1 ||
-        m.theme.toLowerCase().indexOf(searchString) !== -1);
-    }
-
-    return true;
-  }
-
-  render() {
-    const { messages, checkedIds } = this.state;
-    const { filter, openedMessage, openMessage, compose, composeData, changeCompose } = this.props;
-    const filteredMessages = messages.filter(message => message[filter]);
-    const dataToDisplay = filter ? filteredMessages : messages;
-    return (
-      <div className={s.messages}>
-        {openedMessage === null && !compose
-          ? <Pagination />
-          : <button className={cx('btn btn-default', s.backButton)} onClick={() => openMessage(null)}>
-            <i className="fa fa-angle-left fa-lg" />
-          </button>
-        }
-        {/* eslint-disable */}
-        {openedMessage === null && !compose
-          ? <Widget>
-            <MessageTableHeader
-              all={this.chooseAll}
-              none={this.chooseNone}
-              read={this.chooseRead}
-              unread={this.chooseUnread}
-              markRead={this.markRead}
-              markUnread={this.markUnread}
-              deleteItems={this.delete}
-              search={this.search}
-            />
-            <Table striped hover>
-              <thead>
-                <tr>
-                  <th>
-                    <FormGroup className="checkbox abc-checkbox" check>
-                      <Input
-                        id="checkbox-main"
-                        type="checkbox"
-                        onChange={dataToDisplay.length !== checkedIds.length ? this.chooseAll : this.chooseNone}
-                        checked={dataToDisplay.length !== 0 && checkedIds.length === dataToDisplay.length}
-                      />{' '}
-                      <Label for="checkbox-main" check />
-                    </FormGroup>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {dataToDisplay
-                  .filter((m) => this._searchable(m))
-                  .map(message =>
-                    (<tr
-                      key={message.id}
-                      className={cx({ [s.unreadedMessage]: message.unreaded })}
-                    >
-                      <td className={s.messageCheckbox} >
-                        <FormGroup className="checkbox abc-checkbox" check>
-                          <Input
-                            id={`checkbox${message.id}`}
-                            type="checkbox"
-                            checked={checkedIds.indexOf(message.id) !== -1}
-                            onChange={() => this.choose(message.id)}
-                          />{' '}
-                          <Label for={`checkbox${message.id}`} check />
-                        </FormGroup>
-                      </td>
-                      <td
-                        className={s.messageStar}
-                        onClick={() => this.starItem(message.id)}>{message.starred
-                          ? <span className={s.messageStarred}><i className="fa fa-star" /></span>
-                          : <span><i className="fa fa-star-o" /></span>}
-                      </td>
-                      <td
-                        className={s.messageFrom}
-                        onClick={() => this.handleOpenMessage(message.id)}
-                      >{message.from}</td>
-                      <td onClick={() => this.handleOpenMessage(message.id)}>{message.theme}</td>
-                      <td className={s.messageClip}>{message.attachments && <i className="fa fa-paperclip" />}</td>
-                      <td className={s.messageDate}>{message.date}</td>
-                    </tr>),
-                )}
-              </tbody>
-            </Table>
-          </Widget>
-          : compose
-            ? <Compose data={composeData} />
-            : <Message message={messages[openedMessage]} compose={changeCompose} />
-        }
-        {/* eslint-enable */}
-      </div>
-    );
-  }
-}
-
-MessageTable.propTypes = {
-  filter: PropTypes.string,
-  openedMessage: PropTypes.number,
-  openMessage: PropTypes.func.isRequired,
-  compose: PropTypes.bool.isRequired,
-  composeData: PropTypes.shape({
-    from: PropTypes.string,
-    theme: PropTypes.string,
-  }),
-  changeCompose: PropTypes.func.isRequired,
-};
-
-MessageTable.defaultProps = {
-  filter: null,
-  openedMessage: null,
-  composeData: null,
-};
-
-export default MessageTable;

-@import '../../../../../styles/app';
-
-.messages {
-  width: 84%;
-  border-radius: 0.2rem;
-
-  @media screen and (max-width: 1125px) {
-    width: 100%;
-  }
-
-  & :global .form-check-input {
-    margin: 0;
-    position: relative;
-  }
-
-  & :global .table {
-    margin-bottom: 0;
-  }
-}
-
-.unreadedMessage {
-  td {
-    font-weight: $font-weight-semi-bold;
-  }
-}
-
-.messageCheckbox {
-  width: 50px;
-  padding-right: 0;
-
-  :global .form-check {
-    margin-bottom: 0;
-  }
-}
-
-.messageStar {
-  left: 25px;
-  margin-left: -10px;
-}
-
-.messageStarred {
-  color: theme-color('warning');
-}
-
-.messageFrom,
-.messageClip {
-  @media screen and (max-width: 768px) {
-    display: none;
-  }
-}
-
-.messageDate {
-  display: flex;
-  justify-content: flex-end;
-
-  @media screen and (max-width: 768px) {
-    width: 65px;
-  }
-}
-
-.backButton {
-  margin-bottom: 15px;
-}

-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  UncontrolledButtonDropdown,
-  DropdownToggle,
-  DropdownMenu,
-  DropdownItem,
-  Input,
-} from 'reactstrap';
-
-import s from './MessageTableHeader.module.scss';
-
-const MessageTableHeader = (props) => {
-  const { all, none, read, unread, markRead, markUnread, deleteItems, search } = props;
-  const select = [
-    { id: 0, title: 'All', onClick: all },
-    { id: 1, title: 'None', onClick: none },
-    { id: 2 },
-    { id: 3, title: 'Read', onClick: read },
-    { id: 4, title: 'Unread', onClick: unread },
-  ];
-  const action = [
-    { id: 1, title: 'Reply' },
-    { id: 2, title: 'Forward' },
-    { id: 3, title: 'Archive' },
-    { id: 4 },
-    { id: 5, title: 'Mark As Read', onClick: markRead },
-    { id: 6, title: 'Mark As Unread', onClick: markUnread },
-    { id: 7 },
-    { id: 8, title: 'Delete', onClick: deleteItems },
-  ];
-  return (
-    <div className={s.messageTableHeader}>
-      <div>
-        <UncontrolledButtonDropdown size="sm">
-          <DropdownToggle
-            caret color="default"
-            className="dropdown-toggle-split mr-xs"
-          >
-            Select
-        </DropdownToggle>
-          <DropdownMenu>
-            {select.map(item =>
-              (Object.keys(item).length > 1
-                ? <DropdownItem key={item.id} onClick={item.onClick}>{item.title}</DropdownItem>
-                : <DropdownItem key={item.id} divider />),
-            )}
-          </DropdownMenu>
-        </UncontrolledButtonDropdown >
-        <UncontrolledButtonDropdown size="sm">
-          <DropdownToggle
-            caret color="default"
-            className="dropdown-toggle-split mr-xs"
-          >
-            Actions
-        </DropdownToggle>
-          <DropdownMenu>
-            {action.map(item =>
-              (Object.keys(item).length > 1
-                ? <DropdownItem key={item.id} onClick={item.onClick}>{item.title}</DropdownItem>
-                : <DropdownItem key={item.id} divider />),
-            )}
-          </DropdownMenu>
-        </UncontrolledButtonDropdown>
-      </div>
-      <Input placeholder="Search Messages" size="sm" onChange={e => search(e.target.value)} />
-    </div>
-  );
-};
-
-MessageTableHeader.propTypes = {
-  all: PropTypes.func.isRequired,
-  none: PropTypes.func.isRequired,
-  read: PropTypes.func.isRequired,
-  unread: PropTypes.func.isRequired,
-  markRead: PropTypes.func.isRequired,
-  markUnread: PropTypes.func.isRequired,
-  deleteItems: PropTypes.func.isRequired,
-  search: PropTypes.func.isRequired,
-};
-
-export default MessageTableHeader;

-.messageTableHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  & :global .form-control {
-    width: auto;
-  }
-}

-import React from 'react';
-import cx from 'classnames';
-
-import s from './Pagination.module.scss';
-
-const Pagination = () => (
-  <div className={s.pagination}>
-    <span className={s.paginationText}>Showing 1 - 10 of 96 messages</span>
-    <div className={s.paginationPages}>
-      <button className={cx(s.button, s.buttonDisabled)}><i className="fa fa-chevron-left" /></button>
-      <button className={cx(s.button, s.buttonActive)}>1</button>
-      <button className={s.button}>2</button>
-      <button className={s.button}><i className="fa fa-chevron-right" /></button>
-    </div>
-  </div>
-);
-
-export default Pagination;

-@import '../../../../../styles/app';
-
-.pagination {
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  margin-bottom: 15px;
-}
-
-.paginationText {
-  color: #868e96;
-  font-size: $font-size-mini;
-}
-
-.paginationPages {
-  border-left: 1px solid #868e96;
-  padding-left: 11px;
-  margin-left: 10px;
-  display: flex;
-
-  button {
-    margin-left: 4px;
-  }
-}
-
-.button {
-  transition: 0.3s;
-  padding: 0.45rem 0.75rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: $font-weight-normal;
-  border-radius: 0.2rem;
-  color: #888;
-  background: #fff;
-  border: none;
-
-  &:hover {
-    background-color: transparent;
-  }
-}
-
-.buttonActive {
-  background: $gray-300;
-}
-
-.buttonDisabled {
-  &:hover {
-    background-color: #fff;
-  }
-}

-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  ButtonDropdown,
-  Button,
-  DropdownToggle,
-  DropdownMenu,
-  DropdownItem,
-} from 'reactstrap';
-
-class ReplyDropdown extends Component {
-  state = { open: false };
-
-  toggle() {
-    this.setState(pvState => ({ open: !pvState.open }));
-  }
-
-  render() {
-    const { open } = this.state;
-    const { compose } = this.props;
-    return (
-      <ButtonDropdown isOpen={open} toggle={() => this.toggle()}>
-        <Button size="sm" id="dropdownFour" color="default" onClick={() => compose()}>
-          <i className="fa fa-reply" /> Reply
-        </Button>
-        <DropdownToggle size="sm" color="default" className="dropdown-toggle-split">
-          <i className="fa fa-angle-down" />
-        </DropdownToggle>
-        <DropdownMenu>
-          <DropdownItem><i className="fa fa-reply" /> Reply</DropdownItem>
-          <DropdownItem><i className="fa fa-arrow-right" /> Forward</DropdownItem>
-          <DropdownItem><i className="fa fa-print" /> Print</DropdownItem>
-          <DropdownItem divider />
-          <DropdownItem><i className="fa fa-ban" /> Spam</DropdownItem>
-          <DropdownItem><i className="fa fa-trash" /> Delete</DropdownItem>
-        </DropdownMenu>
-      </ButtonDropdown>
-    );
-  }
-}
-
-ReplyDropdown.propTypes = {
-  compose: PropTypes.func.isRequired,
-};
-
-export default ReplyDropdown;

-import photo1 from '../../../images/tables/1.png';
-import photo2 from '../../../images/tables/2.png';
-import photo3 from '../../../images/tables/3.png';
-
-export default [
-  {
-    id: 0,
-    starred: true,
-    from: 'Philip Horbachuski',
-    fromEmail: 'philip.horbachuski@example.com',
-    to: 'Wrapbootstrap',
-    theme: 'Hi, Welcom to Google Mail',
-    date: '18:31',
-    unreaded: true,
-    content: `<p>Projecting surrounded literature yet delightful alteration but bed men. Open are from long why cold.
-    If must snug by upon sang loud left. As me do preference entreaties compliment motionless ye literature.
-    Day behaviour explained law remainder.</p>
-    <p><strong>On then sake home</strong> is am leaf. Of suspicion do departure at extremely he believing.
-    Do know said mind do rent they oh hope of. General enquire picture letters
-    garrets on offices of no on.</p>
-    <p>All the best,</p>
-    <p>Vitaut the Great, CEO, <br />
-    Fooby Inc. </p>`,
-    attachments: [
-      {
-        photo: photo1,
-        photoName: 'some-cool-photo1.jpg',
-        weight: '568K',
-        id: 0,
-      },
-      {
-        photo: photo2,
-        photoName: 'some-cool-photo2.jpg',
-        weight: '568K',
-        id: 1,
-      },
-    ],
-  },
-  {
-    id: 1,
-    starred: true,
-    from: 'StackExchange',
-    theme: 'New Python questions for this week',
-    fromEmail: 'stackexchange@example.com',
-    to: 'Wrapbootstrap',
-    date: 'Aug 14',
-    unreaded: false,
-    draft: true,
-    content: '<h1>THIS IS HTML!!!!</h1>',
-    attachments: [
-      {
-        photo: photo3,
-        photoName: 'some-cool-photo1.jpg',
-        weight: '568K',
-        id: 0,
-      },
-    ],
-  },
-  {
-    id: 2,
-    starred: false,
-    from: 'Facebook',
-    theme: 'Someone just commented on your photo!',
-    fromEmail: 'notification@facebook.com',
-    to: 'Wrapbootstrap',
-    date: 'Aug 7',
-    unreaded: true,
-    sent: true,
-    content: 'Someone just commented on your photo!',
-  },
-  {
-    id: 3,
-    starred: false,
-    from: 'Twitter',
-    theme: '@hackernews is now following you on Twitter',
-    fromEmail: 'notification@twitter.com',
-    to: 'Wrapbootstrap',
-    date: 'Jul 31',
-    unreaded: false,
-    sent: true,
-    content: '@hackernews is now following you on Twitter',
-  },
-];

-{
-  "name": "email",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Email.js"
-}
\ No newline at end of file

-import React from 'react';
-import {
-  Row,
-  Col,
-  ButtonGroup,
-  Button,
-} from 'reactstrap';
-
-import 'fullcalendar/dist/fullcalendar';
-import 'jquery-ui/ui/widgets/draggable';
-import moment from 'moment/moment';
-import $ from 'jquery';
-
-import s from './Calendar.module.scss';
-import Widget from '../../../../components/Widget';
-
-class Calendar extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      calendarView: 'month',
-      currentMonth: moment().format('MMM YYYY'),
-      currentDay: moment().format('dddd'),
-    };
-
-    const date = new Date();
-    const d = date.getDate();
-    const m = date.getMonth();
-    const y = date.getFullYear();
-
-    this.calendarOptions = {
-      header: {
-        left: '',
-        center: '',
-        right: '',
-      },
-      events: [
-        {
-          title: 'All Day Event',
-          start: new Date(y, m, 1),
-          backgroundColor: '#79A5F0',
-          textColor: '#fff',
-          description: 'Will be busy throughout the whole day',
-        },
-        {
-          title: 'Long Event',
-          start: new Date(y, m, d + 5),
-          end: new Date(y, m, d + 7),
-          description: 'This conference should be worse visiting',
-        },
-        {
-          id: 999,
-          title: 'Blah Blah Car',
-          start: new Date(y, m, d - 3, 16, 0),
-          allDay: false,
-          description: 'Agree with this guy on arrival time',
-        },
-        {
-          id: 1000,
-          title: 'Buy this template',
-          start: new Date(y, m, d + 3, 12, 0),
-          allDay: false,
-          backgroundColor: '#555',
-          textColor: '#fff',
-          description: 'Make sure everything is consistent first',
-        },
-        {
-          title: 'Got to school',
-          start: new Date(y, m, d + 16, 12, 0),
-          end: new Date(y, m, d + 16, 13, 0),
-          backgroundColor: '#64bd63',
-          textColor: '#fff',
-          description: 'Time to go back',
-        },
-        {
-          title: 'Study some Node',
-          start: new Date(y, m, d + 18, 12, 0),
-          end: new Date(y, m, d + 18, 13, 0),
-          backgroundColor: '#79A5F0',
-          textColor: '#fff',
-          description: 'Node.js is a platform built ' +
-          'on Chrome\'s JavaScript runtime for easily' +
-          ' building fast, scalable network applications.' +
-          ' Node.js uses an event-driven, non-blocking' +
-          ' I/O model that makes it lightweight and' +
-          ' efficient, perfect for data-intensive real-time' +
-          ' applications that run across distributed devices.',
-        },
-        {
-          title: 'Click for Flatlogic',
-          start: new Date(y, m, 28),
-          end: new Date(y, m, 29),
-          url: 'http://flatlogic.com/',
-          backgroundColor: '#e5603b',
-          textColor: '#fff',
-          description: 'Creative solutions',
-        },
-      ],
-      selectable: true,
-      selectHelper: true,
-      select: (start, end, allDay) => {
-        this.createEvent = () => {
-          const title = this.event.title;
-          if (title) {
-            this.$calendar.fullCalendar('renderEvent',
-              {
-                title,
-                start,
-                end,
-                allDay,
-                backgroundColor: '#64bd63',
-                textColor: '#fff',
-              },
-              true, // make the event "stick"
-            );
-          }
-          this.$calendar.fullCalendar('unselect');
-          $('#create-event-modal').modal('hide');
-        };
-
-        $('#create-event-modal').modal('show');
-      },
-      eventClick: (event) => {
-        this.event = event;
-        $('#show-event-modal').modal('show');
-      },
-      editable: true,
-      droppable: true,
-
-      drop: (dateItem, event) => { // this function is called when something is dropped
-        // retrieve the dropped element's stored Event Object
-        const originalEventObject = {
-          // use the element's text as the event title
-          title: $.trim($(event.target).text()),
-        };
-
-        // we need to copy it, so that multiple events don't have a reference to the same object
-        const copiedEventObject = $.extend({}, originalEventObject);
-
-        // assign it the date that was reported
-        copiedEventObject.start = dateItem;
-        copiedEventObject.allDay = !dateItem.hasTime();
-
-        const $categoryClass = $(event.target).data('event-class');
-        if ($categoryClass) {
-          copiedEventObject.className = [$categoryClass];
-        }
-
-        // render the event on the calendar
-        // the last `true` argument determines if
-        // the event 'sticks'
-        // http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
-        this.$calendar.fullCalendar('renderEvent', copiedEventObject, true);
-
-        $(event.target).remove();
-      },
-    };
-
-    this.dragOptions = { zIndex: 999, revert: true, revertDuration: 0 };
-
-    this.prev = this.prev.bind(this);
-    this.next = this.next.bind(this);
-    this.today = this.today.bind(this);
-    this.changeView = this.changeView.bind(this);
-    this.getCurrentMonth = this.getCurrentMonth.bind(this);
-    this.getCurrentDay = this.getCurrentDay.bind(this);
-  }
-
-  componentDidMount() {
-    this.$calendar = $('#calendar');
-    this.$calendar.fullCalendar(this.calendarOptions);
-    $('.draggable').draggable(this.dragOptions);
-  }
-
-  getCurrentMonth() {
-    return moment(this.$calendar.fullCalendar('getDate')).format('MMM YYYY');
-  }
-
-  getCurrentDay() {
-    return moment(this.$calendar.fullCalendar('getDate')).format('dddd');
-  }
-
-  prev() {
-    this.$calendar.fullCalendar('prev');
-  }
-
-  next() {
-    this.$calendar.fullCalendar('next');
-  }
-
-  today() {
-    this.$calendar.fullCalendar('today');
-  }
-
-  changeView(view) {
-    this.$calendar.fullCalendar('changeView', view);
-    this.setState({ calendarView: view });
-  }
-
-  render() {
-    return (
-      <div className={s.root}>
-        <Row>
-          <Col lg={4} xs={12} md={6}>
-            <ol className="breadcrumb">
-              <li className="breadcrumb-item">YOU ARE HERE</li>
-              <li className="breadcrumb-item active">Calendar</li>
-            </ol>
-            <h1 className="page-title">
-              {this.state.currentMonth} - <span className="fw-semi-bold">{this.state.currentDay}</span>
-            </h1>
-            <h3>Draggable <span className="fw-semi-bold">Events</span></h3>
-            <p>Just drap and drop events from there directly into the calendar.</p>
-            <div className="calendar-external-events mb-lg">
-              <div className="external-event draggable" data-event-class="bg-success text-white">
-                <i className="fa fa-circle fa-fw text-success ml-xs mr-xs" />
-                Make a tea
-              </div>
-              <div className="external-event draggable" data-event-class="bg-warning text-white">
-                <i className="fa fa-circle fa-fw text-warning ml-xs mr-xs" />
-                Open windows
-              </div>
-              <div className="external-event draggable" data-event-class="bg-gray text-white">
-                <i className="fa fa-circle-o fa-fw text-gray-light ml-xs mr-xs" />
-                Some stuff
-              </div>
-              <div className="external-event draggable" data-event-class="bg-danger text-white">
-                <i className="fa fa-square fa-fw text-danger ml-xs mr-xs" />
-                Study UX engineering
-              </div>
-              <div className="external-event draggable" data-event-class="bg-gray text-white">
-                <i className="fa fa-circle-o fa-fw text-gray-light ml-xs mr-xs" />
-                Another stuff
-              </div>
-            </div>
-          </Col>
-          <Col md={6} lg={8} xs={12}>
-            <Widget>
-              <Row className="calendar-controls">
-                <Col md={3}>
-                  <ButtonGroup className="mr-sm">
-                    <Button color="default" onClick={this.prev}>
-                      <i className="fa fa-angle-left" />
-                    </Button>
-                    <Button color="default" onClick={this.next}>
-                      <i className="fa fa-angle-right" />
-                    </Button>
-                  </ButtonGroup>
-                </Col>
-                <Col md={9} className="calendar-controls text-right">
-                  <ButtonGroup>
-                    <Button
-                      color="default" onClick={() => this.changeView('month')}
-                      active={this.state.calendarView === 'month'}
-                    >Month</Button>
-                    <Button
-                      color="default" onClick={() => this.changeView('agendaWeek')}
-                      active={this.state.calendarView === 'agendaWeek'}
-                    >Week</Button>
-                    <Button
-                      color="default" onClick={() => this.changeView('agendaDay')}
-                      active={this.state.calendarView === 'agendaDay'}
-                    >Day</Button>
-                  </ButtonGroup>
-                </Col>
-              </Row>
-              <div id="calendar" className="calendar" />
-            </Widget>
-          </Col>
-        </Row>
-      </div>
-    );
-  }
-
-}
-
-export default Calendar;

-@import '../../../../styles/app';
-
-:global {
-  @import '../../../../../node_modules/fullcalendar/dist/fullcalendar';
-}
-
-.root {
-  h4 {
-    font-size: 14px;
-  }
-
-  :global {
-    .fc-grid th {
-      text-transform: uppercase;
-    }
-
-    .fc-day-grid-event {
-      margin: 0;
-      padding: 0;
-    }
-
-    .fc-event {
-      border: none;
-      font-weight: $font-weight-normal;
-      background-color: $gray-200;
-      color: $text-color;
-    }
-
-    .fc-today {
-      background-color: #fff1b8;
-    }
-
-    a.fc-event {
-      height: auto;
-      line-height: $line-height-base;
-      width: 100%;
-    }
-
-    /* ****  Full Calendar Custom   **** */
-    .full-calendar {
-      margin-top: 10px;
-    }
-
-    .calendar-controls {
-      .btn {
-        font-size: $font-size-mini;
-      }
-    }
-
-    .calendar-external-events {
-      margin-top: 20px;
-
-      .external-event {
-        margin: 10px 0;
-        padding: 6px;
-        font-size: $font-size-mini;
-        cursor: pointer;
-        border-radius: $border-radius;
-        background-color: $white;
-        border: 1px solid #ccc;
-        box-shadow: var(--widget-shadow);
-      }
-    }
-
-    .widget-calendar {
-      @include media-breakpoint-up(xl) {
-        margin-top: -100px;
-      }
-    }
-  }
-}
-

-{
-  "name": "calendar",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Calendar.js"
-}

-import React from 'react';
-import {
-  Button,
-  ButtonGroup,
-  Breadcrumb,
-  BreadcrumbItem,
-} from 'reactstrap';
-
-import Lightbox from 'react-images';
-import s from './Gallery.module.scss';
-
-import pic1 from '../../../../images/pictures/1.jpg';
-import pic2 from '../../../../images/pictures/2.jpg';
-import pic3 from '../../../../images/pictures/3.jpg';
-import pic4 from '../../../../images/pictures/4.jpg';
-import pic5 from '../../../../images/pictures/5.jpg';
-import pic6 from '../../../../images/pictures/6.jpg';
-import pic8 from '../../../../images/pictures/8.jpg';
-import pic9 from '../../../../images/pictures/9.jpg';
-import pic10 from '../../../../images/pictures/10.jpg';
-import pic11 from '../../../../images/pictures/11.jpg';
-import pic13 from '../../../../images/pictures/13.jpg';
-import pic14 from '../../../../images/pictures/14.jpg';
-
-const items = [
-  {
-    name: 'Mountains',
-    groups: [
-      'nature',
-    ],
-    src: pic1,
-    date: '10 mins',
-  },
-  {
-    name: 'Empire State Pigeon',
-    groups: [
-      'people',
-    ],
-    src: pic2,
-    date: '1 hour',
-    like: true,
-  },
-  {
-    name: 'Big Lake',
-    groups: [
-      'nature',
-    ],
-    src: pic3,
-    date: '2 mins',
-    like: true,
-  },
-  {
-    name: 'Forest',
-    groups: [
-      'nature',
-    ],
-    src: pic4,
-    date: '2 mins',
-    like: true,
-  },
-  {
-    name: 'Smile',
-    groups: [
-      'people',
-    ],
-    src: pic5,
-    date: '2 mins',
-  },
-  {
-    name: 'Smile',
-    groups: [
-      'people',
-    ],
-    src: pic6,
-    date: '1 hour',
-    like: true,
-  },
-  {
-    name: 'Fog',
-    groups: [
-      'nature',
-    ],
-    src: pic8,
-    date: '2 mins',
-    like: true,
-  },
-  {
-    name: 'Beach',
-    groups: [
-      'people',
-    ],
-    src: pic9,
-    date: '2 mins',
-  },
-  {
-    name: 'Pause',
-    groups: [
-      'people',
-    ],
-    src: pic10,
-    date: '3 hour',
-    like: true,
-  },
-  {
-    name: 'Space',
-    groups: [
-      'space',
-    ],
-    src: pic11,
-    date: '3 hour',
-    like: true,
-  },
-  {
-    name: 'Shuttle',
-    groups: [
-      'space',
-    ],
-    src: pic13,
-    date: '35 mins',
-    like: true,
-  },
-  {
-    name: 'Sky',
-    groups: [
-      'space',
-    ],
-    src: pic14,
-    date: '2 mins',
-  },
-];
-
-class Gallery extends React.Component {
-  constructor() {
-    super();
-
-    this.state = {
-      currentImage: 0,
-      lightboxIsOpen: false,
-      children: items,
-      activeGroup: 'all',
-      order: 'asc',
-      theme: {
-        arrow: {
-          ':focus': {
-            outline: 0,
-          },
-        },
-        close: {
-          ':focus': {
-            outline: 0,
-          },
-        },
-      },
-    };
-
-    this.closeLightbox = this.closeLightbox.bind(this);
-    this.gotoNext = this.gotoNext.bind(this);
-    this.gotoPrevious = this.gotoPrevious.bind(this);
-    this.gotoImage = this.gotoImage.bind(this);
-    this.handleClickImage = this.handleClickImage.bind(this);
-    this.openLightbox = this.openLightbox.bind(this);
-  }
-
-  openLightbox(index, event) {
-    event.preventDefault();
-    this.setState({
-      currentImage: index,
-      lightboxIsOpen: true,
-    });
-  }
-
-  gotoPrevious() {
-    this.setState({
-      currentImage: this.state.currentImage - 1,
-    });
-  }
-
-  gotoImage(index) {
-    this.setState({
-      currentImage: index,
-    });
-  }
-
-  gotoNext() {
-    this.setState({
-      currentImage: this.state.currentImage + 1,
-    });
-  }
-
-  closeLightbox() {
-    this.setState({
-      currentImage: 0,
-      lightboxIsOpen: false,
-    });
-  }
-
-  handleClickImage() {
-    if (this.state.currentImage === this.state.children.length - 1) return;
-
-    this.gotoNext();
-  }
-
-  filterChildren(type) {
-    this.setState({
-      children: type === 'all' ? items : items.filter((child) => {
-        const group = child.groups.find(item => item === type);
-        return !!group;
-      }),
-      activeGroup: type,
-    });
-  }
-
-  orderChildren(order) {
-    const children = this.state.children.sort((a, b) => {
-      const nameA = a.name.toLowerCase();
-      const nameB = b.name.toLowerCase();
-
-      if (nameA < nameB) {
-        return order === 'asc' ? -1 : 1;
-      }
-
-      if (nameA > nameB) {
-        return order === 'asc' ? 1 : -1;
-      }
-      return 0;
-    });
-
-    this.setState({ children, order });
-  }
-
-  render() {
-    return (
-      <div className={s.root}>
-        <Breadcrumb>
-          <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
-          <BreadcrumbItem active>Gallery</BreadcrumbItem>
-        </Breadcrumb>
-        <h1 className="page-title">Media - <span className="fw-semi-bold">Images</span>
-        </h1>
-
-        <div className={s.galleryControls}>
-          <ButtonGroup id="shuffle-buttons">
-            <Button color="default" onClick={() => this.filterChildren('all')} active={this.state.activeGroup === 'all'}>All</Button>
-            <Button color="default" onClick={() => this.filterChildren('nature')} active={this.state.activeGroup === 'nature'}>Nature</Button>
-            <Button color="default" onClick={() => this.filterChildren('people')} active={this.state.activeGroup === 'people'}>People</Button>
-            <Button color="default" onClick={() => this.filterChildren('space')} active={this.state.activeGroup === 'space'}>Space</Button>
-          </ButtonGroup>
-          <ButtonGroup id="order-buttons">
-            <Button color="default" onClick={() => this.orderChildren('asc')} active={this.state.order === 'asc'}><i className="fa fa-sort-numeric-asc" /></Button>
-            <Button color="default" onClick={() => this.orderChildren('desc')} active={this.state.order === 'desc'}><i className="fa fa-sort-numeric-desc" /></Button>
-          </ButtonGroup>
-        </div>
-        <div className={s.gallery}>
-          {this.state.children.map((item, index) => {
-            const key = item.name + index;
-            return (
-              <div key={key} className={`${s.picture} card`}>
-                <a href={item.src} onClick={e => this.openLightbox(index, e)}><img className="figure-img" src={item.src} alt="..." /></a>
-                <div className={s.description}>
-                  <h6 className="mt-0 mb-xs">{item.name}</h6>
-                  <ul className="post-links">
-                    <li><button className="btn-link">{item.date}</button></li>
-                    <li><button className="btn-link"><span className="text-danger"><i className={`fa ${item.like ? 'fa-heart' : 'fa-heart-o'}`} /> Like</span></button></li>
-                    <li><button className="btn-link">Details</button></li>
-                  </ul>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-        <Lightbox
-          currentImage={this.state.currentImage}
-          images={this.state.children}
-          isOpen={this.state.lightboxIsOpen}
-          onClickPrev={this.gotoPrevious}
-          onClickNext={this.gotoNext}
-          onClose={this.closeLightbox}
-          onClickImage={this.handleClickImage}
-          onClickThumbnail={this.gotoImage}
-          backdropClosesModal
-          enableKeyboardInput
-          theme={this.state.theme}
-        />
-      </div>);
-  }
-
-}
-
-export default Gallery;

-@import '../../../../styles/app';
-
-.root {
-  :global .tile {
-    display: inline-block;
-  }
-}
-
-.galleryControls {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: $spacer;
-}
-
-.gallery {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  grid-gap: 15px;
-}
-
-.picture {
-  padding: 3px;
-  border-radius: $border-radius;
-  background-color: $white;
-
-  > a {
-    overflow: hidden;
-  }
-
-  :global .figure-img {
-    width: 100%;
-    transition: $transition-base;
-  }
-
-  &:hover {
-    :global .figure-img {
-      transform: scale(1.1, 1.1);
-    }
-  }
-}
-
-.description {
-  padding: ($spacer * 0.85) ($spacer * 0.5);
-}

-{
-  "name": "invoice",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Gallery.js"
-}

-/* eslint class-methods-use-this: ["error", { "exceptMethods": ["printInvoice"] }] */
-import React from 'react';
-import {
-  Row,
-  Col,
-  Table,
-  ButtonToolbar,
-  Button,
-} from 'reactstrap';
-
-import s from './Invoice.module.scss';
-import Widget from '../../../../components/Widget';
-import iLogo from '../../../../images/invoice-logo.png';
-
-class Stats extends React.Component {
-
-  printInvoice() {
-    window.print();
-  }
-
-  render() {
-    return (
-      <Row>
-        <Col lg={11}>
-          <Row className={s.root}>
-            <Col xs={12}>
-              <Widget>
-                <div className="widget">
-                  <header>
-                    <Row>
-                      <Col md="6" xs="12" className="col-print-6">
-                        <img src={iLogo} alt="Logo" className={s.invoiceLogo} />
-                      </Col>
-                      <Col md="6" xs="12" className="col-print-6">
-                        <h4 className="text-right">
-                          #<span className="fw-semi-bold">9.45613</span> /
-                          <small>17 May 2014</small>
-                        </h4>
-                        <div className="text-muted fs-larger text-right">
-                          Some Invoice number description or whatever
-                        </div>
-                      </Col>
-                    </Row>
-                  </header>
-                  <section className={s.invoiceBody}>
-                    <Row className="mb-lg">
-                      <Col sm={6} className="col-print-6">
-                        <h5 className="text-muted no-margin">Company Information</h5>
-                        <h3 className="company-name m-t-1">
-                          Wrapbootstrap LLC
-                        </h3>
-                        <address>
-                          <strong>2 Infinite Loop</strong><br />
-                          Minsk, Belarus 220004<br />
-                          088.253.5345<br />
-                          <abbr title="Work email">e-mail:</abbr> <a href="mailto:#">email@example.com</a><br />
-                          <abbr title="Work Phone">phone:</abbr> (012) 345-678-901<br />
-                          <abbr title="Work Fax">fax:</abbr> (012) 678-132-901
-                        </address>
-                      </Col>
-
-                      <Col sm={6} className="col-print-6 text-right">
-                        <h5 className="text-muted no-margin">Client Information</h5>
-                        <h3 className="client-name m-t-1">
-                          Veronica Niasvizhskaja
-                        </h3>
-                        <address>
-                          <strong>Consultant</strong> at
-                          {/* eslint-disable */}
-                          <a href="#">Allspana</a><br />
-                          {/* eslint-enable */}
-                          <abbr title="Work email">e-mail:</abbr> <a href="mailto:#">maryna@allspana.by</a><br />
-                          <abbr title="Work Phone">phone:</abbr> (012) 345-678-901<br />
-                          <abbr title="Work Fax">fax:</abbr> (012) 678-132-901
-                          <p className="no-margin"><strong>Note:</strong></p>
-                          <p className="text-muted">Some nights I stay up cashing in my bad luck.
-                            Some nights I call it a draw</p>
-                        </address>
-                      </Col>
-                    </Row>
-
-                    <Table className="table-striped">
-                      <thead>
-                        <tr>
-                          <th>#</th>
-                          <th>Item</th>
-                          <th className="hidden-sm-down d-print-none">Description</th>
-                          <th>Quantity</th>
-                          <th className="hidden-sm-down d-print-none">Price per Unit</th>
-                          <th>Total</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr>
-                          <td>1</td>
-                          <td>Brand-new 27 monitor</td>
-                          <td className="hidden-sm-down d-print-none">2,560x1,440-pixel (WQHD) resolution supported!</td>
-                          <td>2</td>
-                          <td className="hidden-sm-down d-print-none">700</td>
-                          <td>1,400.00</td>
-                        </tr>
-                        <tr>
-                          <td>2</td>
-                          <td>Domain: okendoken.com</td>
-                          <td className="hidden-sm-down d-print-none">6-month registration</td>
-                          <td>1</td>
-                          <td className="hidden-sm-down d-print-none">10.99</td>
-                          <td>21.88</td>
-                        </tr>
-                        <tr>
-                          <td>3</td>
-                          <td>Atlas Shrugged</td>
-                          <td className="hidden-sm-down d-print-none">Novel by Ayn Rand, first published in 1957 in the
-                          United
-                          States
-                        </td>
-                          <td>5</td>
-                          <td className="hidden-sm-down d-print-none">35</td>
-                          <td>175.00</td>
-                        </tr>
-                        <tr>
-                          <td>4</td>
-                          <td>New Song by Dr. Pre</td>
-                          <td className="hidden-sm-down d-print-none">Lyrics: praesent blandit augue non sapien ornare
-                          imperdiet
-                        </td>
-                          <td>1</td>
-                          <td className="hidden-sm-down d-print-none">2</td>
-                          <td>2.00</td>
-                        </tr>
-                      </tbody>
-                    </Table>
-
-                    <Row>
-                      <Col xs={12} md={8} className="col-print-6">
-                        <p>
-                          <strong>Note:</strong>
-                          Thank you for your business. Keep in mind, sometimes bad things happen. But it&#39;s just
-                          sometimes.
-                        </p>
-                      </Col>
-                      <Col md={4} xs={12} className="col-print-6">
-                        <Row className="text-right justify-content-end">
-                          <Col xs={6} />
-                          <Col sm={3}>
-                            <p>Subtotal</p>
-                            <p>Tax(10%)</p>
-                            <p className="no-margin"><strong>Total</strong></p>
-                          </Col>
-                          <Col sm={3}>
-                            <p>1,598.88</p>
-                            <p>159.89</p>
-                            <p className="no-margin"><strong>1,758.77</strong></p>
-                          </Col>
-                        </Row>
-                      </Col>
-                    </Row>
-                    <p className="text-right mt-lg mb-xs">
-                      Marketing Consultant
-                    </p>
-                    <p className="text-right">
-                      <span className="fw-semi-bold">Bob Smith</span>
-                    </p>
-                    <ButtonToolbar className="mt-lg justify-content-end d-print-none">
-                      <Button onClick={this.printInvoice} color="inverse" className="mr-2">
-                        <i className="fa fa-print" />
-                        &nbsp;&nbsp;
-                        Print
-                      </Button>
-                      <Button color="danger">
-                        Proceed with Payment
-                        &nbsp;
-                        <span className="circle bg-white">
-                          <i className="fa fa-arrow-right text-danger" />
-                        </span>
-                      </Button>
-                    </ButtonToolbar>
-                  </section>
-                </div>
-              </Widget>
-            </Col>
-          </Row>
-        </Col>
-      </Row>);
-  }
-
-}
-
-export default Stats;

-@import '../../../../styles/app';
-
-.root {
-  .invoiceLogo {
-    max-height: 50px;
-  }
-
-  .invoiceBody {
-    margin-top: 70px;
-  }
-
-  :global {
-    .widget {
-      padding: 10px 20px;
-    }
-  }
-}

-{
-  "name": "invoice",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Invoice.js"
-}

-/* eslint-disable jsx-a11y/href-no-hash */
-
-import React from 'react';
-import {
-  Row,
-  Col,
-  ButtonGroup,
-  Button,
-  Nav,
-  NavItem,
-  NavLink,
-  Pagination,
-  PaginationLink,
-  PaginationItem,
-  Badge,
-  UncontrolledButtonDropdown,
-  DropdownMenu,
-  DropdownToggle,
-  DropdownItem,
-} from 'reactstrap';
-
-import s from './Search.module.scss';
-import i1 from '../../../../images/search/1.jpg';
-import i2 from '../../../../images/search/5.jpg';
-import i3 from '../../../../images/search/3.jpg';
-import i4 from '../../../../images/search/13.jpg';
-
-class Search extends React.Component {
-
-  render() {
-    return (
-      <div className={s.root}>
-        <ol className="breadcrumb">
-          <li className="breadcrumb-item">YOU ARE HERE</li>
-          <li className="breadcrumb-item active">Search Results</li>
-        </ol>
-        <h1 className="page-title">Matching - <span className="fw-semi-bold">Results</span></h1>
-        <div className="btn-toolbar justify-content-between">
-          <div className="d-inline-flex">
-            <UncontrolledButtonDropdown>
-              <DropdownToggle color="default" caret>
-                Popular
-              </DropdownToggle>
-              <DropdownMenu>
-                <DropdownItem>All</DropdownItem>
-                <DropdownItem>Popular</DropdownItem>
-                <DropdownItem>Interesting</DropdownItem>
-                <DropdownItem>Latest</DropdownItem>
-              </DropdownMenu>
-            </UncontrolledButtonDropdown>
-            <UncontrolledButtonDropdown>
-              <DropdownToggle color="default" caret>
-                All Time
-              </DropdownToggle>
-              <DropdownMenu>
-                <DropdownItem>Last 24h</DropdownItem>
-                <DropdownItem>Last Month</DropdownItem>
-                <DropdownItem>Last Year</DropdownItem>
-              </DropdownMenu>
-            </UncontrolledButtonDropdown>
-          </div>
-
-          <ButtonGroup>
-            <Button color="gray" className="active"><i className="fa fa-th-list" /></Button>
-            <Button color="gray"><i className="fa fa-th-large" /></Button>
-          </ButtonGroup>
-        </div>
-        <Row className="mt-3 d-block">
-          <Col xl={3} sm={12} className="float-xl-right">
-            <h5>Results <span className="fw-semi-bold">Filtering</span></h5>
-            <p className="text-muted fs-mini">Listed content is categorized by the following groups:</p>
-            <Nav className={`nav-pills flex-column nav-stacked ${s.searchResultCategories} mt`}>
-              <NavItem>
-                <NavLink href="#">
-                  Hot Ideas
-                  <Badge color="default" pill className="float-right">34</Badge>
-                </NavLink>
-              </NavItem>
-              <NavItem>
-                <NavLink href="#">
-                  Latest Pictures
-                  <Badge color="default" pill className="float-right">9</Badge>
-                </NavLink>
-              </NavItem>
-              <NavItem>
-                <NavLink href="#">Labels of Day</NavLink>
-              </NavItem>
-              <NavItem>
-                <NavLink href="#">Recent Movies</NavLink>
-              </NavItem>
-              <NavItem>
-                <NavLink href="#">
-                  Globals
-                  <Badge color="default" pill className="float-right">18</Badge>
-                </NavLink>
-              </NavItem>
-            </Nav>
-          </Col>
-
-          <Col xl={9} sm={12}>
-            <p className={s.searchResultsCount}>About 94 700 000 (0.39 sec.) results</p>
-            <section className={`${s.searchResultItem}`}>
-              <button className={`btn-link ${s.imageLink}`}>
-                <img className={s.image} src={i1} alt="" />
-              </button>
-              <div className={s.searchResultItemBody}>
-                <Row>
-                  <Col md={9}>
-                    <h4 className={s.searchResultItemHeading}>
-                      <button className="btn-link">Next generation admin template</button>
-                    </h4>
-                    <p className={s.info}>
-                      New York, NY 20188
-                    </p>
-                    <p className={s.description}>
-                      Not just usual Metro. But something bigger. Not just usual widgets, but real
-                      widgets. Not just yet another admin template,
-                      but next generation admin template.
-                    </p>
-                  </Col>
-                  <Col md={3} xs={12} className="text-center">
-                    <p className="value3 mt-sm">
-                      $9, 700
-                    </p>
-                    <p className="fs-mini text-muted">
-                      PER WEEK
-                    </p>
-                    <Button color="info" size="sm">Learn More</Button>
-                  </Col>
-                </Row>
-              </div>
-            </section>
-            <section className={s.searchResultItem}>
-              <button className={`btn-link ${s.imageLink}`}>
-                <img className={s.image} src={i2} alt="" />
-              </button>
-              <div className={s.searchResultItemBody}>
-                <Row>
-                  <Col md={9}>
-                    <h4 className={s.searchResultItemHeading}>
-                      <button className="btn-link">Try. Posted by Okendoken</button>
-                      <small>
-                        <span className="badge badge-pill badge-danger float-right">
-                          <span className="fw-normal"> Best Deal!</span>
-                        </span>
-                      </small>
-                    </h4>
-                    <p className={s.info}>
-                      Los Angeles, NY 20188
-                    </p>
-                    <p className={s.description}>
-                      You will never know exactly how something will go until you try it. You can
-                      think three hundred times and still have no precise result.
-                    </p>
-                  </Col>
-                  <Col md={3} xs={12} className="text-center">
-                    <p className="value3 mt-sm">
-                      $10, 300
-                    </p>
-                    <p className="fs-mini text-muted">
-                      PER WEEK
-                    </p>
-                    <Button color="info" size="sm">Learn More</Button>
-                  </Col>
-                </Row>
-              </div>
-            </section>
-            <section className={s.searchResultItem}>
-              <button className={`btn-link ${s.imageLink}`}>
-                <img className={s.image} src={i3} alt="" />
-              </button>
-              <div className={s.searchResultItemBody}>
-                <Row>
-                  <Col md={9}>
-                    <h4 className={s.searchResultItemHeading}>
-                      <button className="btn-link">Vitaut the Great</button>
-                    </h4>
-                    <p className={s.info}>
-                      New York, NY 20188
-                    </p>
-                    <p className={s.description}>
-                      The Great Prince of the Grand Duchy of Lithuania he had stopped the invasion
-                      to Europe of Timur (Tamerlan) from Asia heading a big Army
-                      of Belarusians, Lithuanians.
-                    </p>
-                  </Col>
-                  <Col md={3} xs={12} className="text-center">
-                    <p className="value3 mt-sm">
-                      $3, 200
-                    </p>
-                    <p className="fs-mini text-muted">
-                      PER WEEK
-                    </p>
-                    <Button color="info" size="sm">Learn More</Button>
-                  </Col>
-                </Row>
-              </div>
-            </section>
-            <section className={s.searchResultItem}>
-              <button className={`btn-link ${s.imageLink}`}>
-                <img className={s.image} src={i4} alt="" />
-              </button>
-              <div className={s.searchResultItemBody}>
-                <Row>
-                  <Col md={9}>
-                    <h4 className={s.searchResultItemHeading}>
-                      <button className="btn-link">Can I use CSS3 Radial-Gradient?</button>
-                    </h4>
-                    <p className={s.info}>
-                      Minsk, NY 20188
-                    </p>
-                    <p className={s.description}>
-                      Yes you can! Further more, you should!
-                      It let&#39;s you create really beautiful images
-                      either for elements or for the entire background.
-                    </p>
-                  </Col>
-                  <Col md={3} xs={12} className="text-center">
-                    <p className="value3 mt-sm">
-                      $2, 400
-                    </p>
-                    <p className="fs-mini text-muted">
-                      PER MONTH
-                    </p>
-                    <Button color="info" size="sm">Learn More</Button>
-                  </Col>
-                </Row>
-              </div>
-            </section>
-            <div className="d-flex justify-content-center mt-3">
-              <Pagination>
-                <PaginationItem disabled>
-                  <PaginationLink previous href="#">Prev</PaginationLink>
-                </PaginationItem>
-                <PaginationItem active>
-                  <PaginationLink href="#">1</PaginationLink>
-                </PaginationItem>
-                <PaginationItem>
-                  <PaginationLink href="#">2</PaginationLink>
-                </PaginationItem>
-                <PaginationItem>
-                  <PaginationLink href="#">3</PaginationLink>
-                </PaginationItem>
-                <PaginationItem>
-                  <PaginationLink href="#">4</PaginationLink>
-                </PaginationItem>
-                <PaginationItem>
-                  <PaginationLink href="#">5</PaginationLink>
-                </PaginationItem>
-                <PaginationItem>
-                  <PaginationLink next href="#">Next</PaginationLink>
-                </PaginationItem>
-              </Pagination>
-            </div>
-          </Col>
-        </Row>
-      </div>);
-  }
-
-}
-
-export default Search;

-@import '../../../../styles/app';
-
-.root {
-  .searchResultCategories {
-    > li > a {
-      color: $gray-600;
-      font-weight: $font-weight-normal;
-
-      &:hover {
-        color: $gray-700;
-        background-color: $gray-400;
-      }
-    }
-  }
-
-  .searchResultsCount {
-    margin-top: 10px;
-  }
-
-  .searchResultItem {
-    padding: 20px;
-    background-color: $white;
-    border-radius: $border-radius;
-    box-shadow: var(--widget-shadow);
-
-    &:first-of-type {
-      overflow: hidden;
-    }
-
-    @include clearfix();
-
-    .imageLink {
-      display: block;
-      overflow: hidden;
-      border-top-left-radius: $border-radius;
-      border-bottom-left-radius: $border-radius;
-
-      @include media-breakpoint-up(md) {
-        display: inline-block;
-        margin: -20px 0 -20px -20px;
-        float: left;
-        width: 200px;
-      }
-
-      @include media-breakpoint-down(sm) {
-        max-height: 200px;
-      }
-    }
-
-    .image {
-      max-width: 100%;
-    }
-
-    .info {
-      margin-top: 2px;
-      font-size: $font-size-sm;
-      color: $text-muted;
-    }
-
-    .description {
-      font-size: $font-size-mini;
-      margin-bottom: -5px;
-    }
-
-    + .searchResultItem {
-      margin-top: 20px;
-    }
-
-    .searchResultItemBody {
-      height: auto;
-
-      @include media-breakpoint-down(sm) {
-        margin-top: 10px;
-      }
-
-      @include media-breakpoint-up(md) {
-        margin-left: 200px;
-      }
-    }
-
-    .searchResultItemHeading {
-      font-weight: $font-weight-normal;
-
-      > a {
-        color: $text-color;
-      }
-
-      @include media-breakpoint-up(md) {
-        margin: 0;
-      }
-    }
-  }
-}

-{
-  "name": "search",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Search.js"
-}

-import React from 'react';
-import {
-  Input,
-} from 'reactstrap';
-import {
-  withGoogleMap,
-  withScriptjs,
-  GoogleMap,
-  Marker,
-} from 'react-google-maps';
-
-import s from './Timeline.module.scss'; // eslint-disable-line css-modules/no-unused-class
-
-import a1 from '../../../../images/people/a1.jpg';
-import a2 from '../../../../images/people/a2.jpg';
-import a3 from '../../../../images/people/a3.jpg';
-import a4 from '../../../../images/people/a4.jpg';
-import a5 from '../../../../images/people/a5.jpg';
-import a6 from '../../../../images/people/a6.jpg';
-import avatar from '../../../../images/avatar.png';
-import img8 from '../../../../images/search/8.jpg';
-
-const BasicMap = withScriptjs(withGoogleMap(() =>
-  <GoogleMap
-    defaultZoom={8}
-    defaultCenter={{ lat: 51, lng: 7 }}
-    defaultOptions={{ mapTypeControl: false, fullscreenControl: false, gestureHandling: 'greedy' }}
-  >
-    <Marker position={{ lat: 51, lng: 7 }} draggable />
-  </GoogleMap>,
-));
-
-class Timeline extends React.Component {
-
-  render() {
-    return (
-      <div>
-        <ol className="breadcrumb">
-          <li className="breadcrumb-item">YOU ARE HERE</li>
-          <li className="breadcrumb-item active">Time Line</li>
-        </ol>
-        <h1 className="page-title">Events - <span className="fw-semi-bold">Feed</span></h1>
-
-        <ul className={s.timeline}>
-          <li className={s.onLeft}>
-            <time className={s.eventTime} dateTime="2014-05-19 03:04">
-              <span className={s.date}>yesterday</span>
-              <span className={s.time}>8:03 <span className="fw-semi-bold">pm</span></span>
-            </time>
-            <span className={`${s.eventIcon} ${s.eventIconSuccess}`}>
-              <i className="glyphicon glyphicon-map-marker" />
-            </span>
-            <section className={s.event}>
-              <span className={`thumb-sm ${s.avatar} pull-left mr-sm`}>
-                <img className="rounded-circle" src={a2} alt="..." />
-              </span>
-              <h4 className={s.eventHeading}><button className="btn-link">Jessica Nilson</button>
-                <small> @jess</small>
-              </h4>
-              <p className="fs-sm text-muted">10:12 am - Publicly near Minsk</p>
-              <div className={s.eventMap}>
-                <BasicMap
-                  googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyB7OXmzfQYua_1LEhRdqsoYzyJOPh9hGLg"
-                  loadingElement={<div style={{ height: '200px', width: '100%' }} />}
-                  containerElement={<div style={{ height: '200px' }} />}
-                  mapElement={<div style={{ height: '200px' }} />}
-                />
-              </div>
-              <footer>
-                <ul className={s.postLinks}>
-                  <li><button className="btn-link">1 hour</button>
-                  </li>
-                  <li><button className="btn-link"><span className="text-danger"><i className="fa fa-heart" /> Like</span></button></li>
-                  <li><button className="btn-link">Comment</button></li>
-                </ul>
-                <ul className={s.postComments}>
-                  <li>
-                    <span className={`thumb-xs ${s.avatar} pull-left mr-sm`}>
-                      <img className="rounded-circle" src={a2} alt="..." />
-                    </span>
-                    <div className={s.commentBody}>
-                      <h6 className={`${s.author} fs-sm fw-semi-bold`}>Radrigo Gonzales
-                        <small>7 mins ago</small>
-                      </h6>
-                      <p>{`Someone said they were the best people out there just few years ago. Don't know
-                        better options.`}</p>
-                    </div>
-                  </li>
-                  <li>
-                    <span className={`thumb-xs ${s.avatar} pull-left mr-sm`}>
-                      <img className="rounded-circle" src={a4} alt="..." />
-                    </span>
-                    <div className={s.commentBody}>
-                      <h6 className={`${s.author} fs-sm fw-semi-bold`}>Ignacio Abad
-                        <small>6 mins ago</small>
-                      </h6>
-                      <p>True. Heard absolutely the same.</p>
-                    </div>
-                  </li>
-                  <li>
-                    <span className={`thumb-xs ${s.avatar} pull-left mr-sm`}>
-                      <img className="rounded-circle" src={avatar} alt="..." />
-                    </span>
-                    <div className={s.commentBody}>
-                      <Input size="sm" placeholder="Write your comment..." />
-                    </div>
-                  </li>
-                </ul>
-              </footer>
-            </section>
-          </li>
-
-          <li>
-            <time className={s.eventTime} dateTime="2014-05-19 03:04">
-              <span className={s.date}>today</span>
-              <span className={s.time}>9:41 <span className="fw-semi-bold">am</span></span>
-            </time>
-            <span className={`${s.eventIcon} ${s.eventIconPrimary}`}>
-              <i className="glyphicon glyphicon-comments" />
-            </span>
-            <section className={s.event}>
-              <span className={`thumb-xs ${s.avatar} pull-left mr-sm`}>
-                <img className="rounded-circle" src={a5} alt="..." />
-              </span>
-              <h5 className={s.eventHeading}><button className="btn-link">Bob Nilson</button>
-                <small><button className="btn-link"> @nils</button></small>
-              </h5>
-              <p className="fs-sm text-muted">February 22, 2014 at 01:59 PM</p>
-              <p className="fs-mini">
-                There is no such thing as maturity. There is instead an ever-evolving process of maturing.
-                Because when there is a maturity, there is ...
-              </p>
-              <footer>
-                <ul className={s.postLinks}>
-                  <li><button className="btn-link">1 hour</button></li>
-                  <li><button className="btn-link"><span className="text-danger"><i className="fa fa-heart" /> Like</span></button></li>
-                  <li><button className="btn-link">Comment</button></li>
-                </ul>
-              </footer>
-            </section>
-          </li>
-          <li className={s.onLeft}>
-            <time className={s.eventTime} dateTime="2014-05-19 03:04">
-              <span className={s.date}>yesterday</span>
-              <span className={s.time}>9:03 <span className="fw-semi-bold">am</span></span>
-            </time>
-            <span className={`${s.eventIcon} ${s.eventIconDanger}`}>
-              <i className="glyphicon glyphicon-cutlery" />
-            </span>
-            <section className={s.event}>
-              <h5 className={s.eventHeading}><button className="btn-link">Jessica Smith</button>
-                <small> @jess</small>
-              </h5>
-              <p className="fs-sm text-muted">February 22, 2014 at 01:59 PM</p>
-              <p className="fs-mini">
-                Check out this awesome photo I made in Italy last summer. Seems it was lost somewhere deep inside
-                my brand new HDD 40TB. Thanks god I found it!
-              </p>
-              <div className={s.eventImage}>
-                <a href={img8} data-ui-jq="magnificPopup" data-ui-options="{type: 'image'}">
-                  <img src={img8} alt="..." />
-                </a>
-              </div>
-              <footer>
-                <div className="clearfix">
-                  <ul className={`${s.postLinks} mt-sm pull-left`}>
-                    <li><button className="btn-link">1 hour</button></li>
-                    <li><button className="btn-link"><span className="text-danger"><i className="fa fa-heart-o" /> Like</span></button></li>
-                    <li><button className="btn-link">Comment</button></li>
-                  </ul>
-
-                  <span className="thumb thumb-sm pull-right">
-                    <button className="btn-link">
-                      <img className="rounded-circle" src={a1} alt="..." />
-                    </button>
-                  </span>
-                  <span className="thumb thumb-sm pull-right">
-                    <button className="btn-link"><img className="rounded-circle" src={a5} alt="..." /></button>
-                  </span>
-                  <span className="thumb thumb-sm pull-right">
-                    <button className="btn-link"><img className="rounded-circle" src={a3} alt="..." /></button>
-                  </span>
-                </div>
-                <ul className={`${s.postComments} mt-sm`}>
-                  <li>
-                    <span className="thumb-xs avatar pull-left mr-sm">
-                      <img className="rounded-circle" src={a1} alt="..." />
-                    </span>
-                    <div className={s.commentBody}>
-                      <h6 className={`${s.author} fs-sm fw-semi-bold`}>Ignacio Abad
-                        <small>6 mins ago</small>
-                      </h6>
-                      <p>Hey, have you heard anything about that?</p>
-                    </div>
-                  </li>
-                  <li>
-                    <span className="thumb-xs avatar pull-left mr-sm">
-                      <img className="rounded-circle" src={avatar} alt="..." />
-                    </span>
-                    <div className={s.commentBody}>
-                      <Input size="sm" placeholder="Write your comment..." />
-                    </div>
-                  </li>
-                </ul>
-              </footer>
-            </section>
-          </li>
-          <li>
-            <time className={s.eventTime} dateTime="2014-05-19 03:04">
-              <span className={s.date}>yesterday</span>
-              <span className={s.time}>9:03 <span className="fw-semi-bold">am</span></span>
-            </time>
-            <span className={s.eventIcon}>
-              <img className="rounded-circle" src={avatar} alt="..." />
-            </span>
-            <section className={s.event}>
-              <span className={`thumb-xs ${s.avatar} pull-left mr-sm`}>
-                <img className="rounded-circle" src={a6} alt="..." />
-              </span>
-              <h5 className={s.eventHeading}><button className="btn-link">Jessica Smith</button>
-                <small> @jess</small>
-              </h5>
-              <p className="fs-sm text-muted">9:03 am - Publicly near Minsk</p>
-              <h5>New <span className="fw-semi-bold">Project</span> Launch</h5>
-              <p className="fs-mini">
-                {`Let's try something different this time. Hey, do you wanna join us tonight?
-                We're planning to a launch a new project soon. Want to discuss with all of you...`}
-              </p>
-              <button className="btn-link mt-n-xs fs-mini text-muted">Read more...</button>
-              <footer>
-                <ul className={s.postLinks}>
-                  <li><button className="btn-link">1 hour</button></li>
-                  <li><button className="btn-link"><span className="text-danger"><i className="fa fa-heart-o" /> Like</span></button></li>
-                  <li><button className="btn-link">Comment</button></li>
-                </ul>
-              </footer>
-            </section>
-          </li>
-        </ul>
-      </div>
-    );
-  }
-
-}
-
-export default Timeline;

-@import '../../../../styles/app';
-
-/*           Post Comments         */
-.postComments {
-  font-size: $font-size-sm;
-  padding-left: 0;
-
-  @include clearfix();
-
-  .postLinks + & {
-    margin-top: $spacer / 2;
-  }
-
-  > li {
-    padding: 10px;
-    border-top: 1px solid #e7e7e7;
-    list-style: none;
-
-    @include clearfix();
-
-    &:last-child {
-      padding-bottom: 0;
-    }
-  }
-
-  p:last-child {
-    margin-bottom: 0;
-  }
-
-  .avatar {
-    margin-top: 1px;
-  }
-
-  .author {
-    margin-top: 0;
-    margin-bottom: 2px;
-    color: #7ca9dd;
-  }
-
-  .commentBody {
-    overflow: auto;
-  }
-
-  h6.author > small {
-    font-size: 11px;
-  }
-
-  :global {
-    .widget > footer & {
-      margin-left: -$widget-padding-horizontal;
-      margin-right: -$widget-padding-horizontal;
-    }
-  }
-}
-
-/*           Post Links            */
-.postLinks {
-  margin-bottom: 0;
-  font-size: $font-size-sm;
-  padding-left: 0;
-
-  @include clearfix();
-
-  > li {
-    float: left;
-    list-style: none;
-
-    + li {
-      &::before {
-        color: #999;
-        content: '\25cf';
-        padding: 0 8px;
-      }
-    }
-
-    > a {
-      text-decoration: none;
-      color: $text-muted;
-
-      :hover {
-        color: $text-muted;
-      }
-    }
-  }
-
-  :global {
-    .no-separator > li + li {
-      margin-left: 12px;
-
-      &::before {
-        content: normal;
-      }
-    }
-  }
-}
-
-/*            Time Line            */
-.timeline {
-  position: relative;
-  min-height: 100%;
-  list-style: none;
-  padding-left: 0;
-  margin-bottom: -40px; /* content padding bottom */
-  padding-bottom: 80px;
-
-  > li {
-    @include clearfix();
-
-    + li {
-      margin-top: 30px;
-    }
-  }
-
-  /* the time line :) */
-  &::before {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 24%;
-    width: 8px;
-    content: ' ';
-    margin-left: -4px;
-    background-color: $white;
-
-    @include media-breakpoint-up(lg) {
-      left: 50%;
-      margin-left: -4px;
-    }
-  }
-}
-
-.event {
-  background: $white;
-  border-radius: $border-radius;
-  padding: 20px 20px 0;
-  position: relative;
-  box-shadow: var(--widget-shadow);
-
-  .timeline & {
-    float: right;
-    width: 68%;
-
-    &::before {
-      right: 100%;
-      content: ' ';
-      height: 0;
-      width: 0;
-      position: absolute;
-      border: 10px solid rgba(0, 0, 0, 0);
-      border-right-color: $white;
-      top: 15px;
-    }
-  }
-
-  .postComments {
-    margin-left: -20px;
-    margin-right: -20px;
-  }
-
-  > footer {
-    margin: 20px -20px 0;
-    padding: 10px 20px;
-    border-bottom-left-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
-    background-color: #fafafa;
-
-    @include clearfix();
-
-    :global {
-      .thumb {
-        margin-left: 10px;
-      }
-    }
-  }
-
-  @include media-breakpoint-up(lg) {
-    .timeline & {
-      width: 45%;
-    }
-
-    .timeline > li.onLeft & {
-      float: left;
-
-      &::before {
-        right: auto;
-        left: 100%;
-        border-right-color: rgba(0, 0, 0, 0);
-        border-left-color: $white;
-      }
-    }
-  }
-}
-
-.eventTime {
-  .timeline & {
-    float: left;
-    width: 18%;
-    margin-top: 5px;
-    text-align: right;
-
-    > .date {
-      display: block;
-      font-size: $font-size-larger;
-    }
-
-    > .time {
-      display: block;
-      font-size: $font-size-lg;
-      font-weight: $font-weight-normal;
-    }
-  }
-
-  @include media-breakpoint-up(lg) {
-    .timeline & {
-      width: 46%;
-    }
-
-    .timeline > li.onLeft & {
-      float: right;
-      text-align: left;
-    }
-  }
-}
-
-.eventIcon {
-  :global {
-    .glyphicon {
-      top: -2px;
-    }
-  }
-
-  .timeline & {
-    position: absolute;
-    left: 24%;
-    width: 50px;
-    height: 50px;
-    line-height: 37px;
-    margin-left: -25px;
-    background-color: $white;
-    border: 7px solid $white;
-    border-radius: 50%;
-    text-align: center;
-    box-shadow: var(--widget-shadow);
-
-    &.eventIconDanger {
-      background-color: theme-color('danger');
-      border-color: lighten(theme-color('danger'), 7%);
-    }
-
-    &.eventIconWarning {
-      background-color: theme-color('warning');
-      border-color: lighten(theme-color('warning'), 7%);
-    }
-
-    &.eventIconSuccess {
-      background-color: theme-color('success');
-      border-color: lighten(theme-color('success'), 7%);
-    }
-
-    &.eventIconInfo {
-      background-color: theme-color('info');
-      border-color: lighten(theme-color('info'), 7%);
-    }
-
-    &.eventIconPrimary {
-      background-color: theme-color('primary');
-      border-color: lighten(theme-color('primary'), 7%);
-    }
-
-    &.eventIconDanger,
-    &.eventIconWarning,
-    &.eventIconSuccess,
-    &.eventIconInfo,
-    &.eventIconPrimary {
-      color: $white;
-    }
-
-    @include media-breakpoint-up(lg) {
-      left: 50%;
-    }
-
-    > img {
-      width: 36px;
-      height: 36px;
-      margin-top: -4px;
-    }
-  }
-}
-
-.eventHeading {
-  margin: 0 0 2px;
-  font-weight: $font-weight-semi-bold;
-
-  > a {
-    text-decoration: none;
-    color: #7ca9dd;
-  }
-
-  > small {
-    font-weight: $font-weight-semi-bold;
-
-    > a {
-      text-decoration: none;
-      color: $text-muted;
-    }
-  }
-}
-
-.eventMap {
-  display: block;
-  height: 200px;
-  margin: 0 -20px -20px;
-  overflow: visible !important;
-}
-
-.eventImage {
-  margin: 0 -20px -20px;
-  max-height: 260px;
-  overflow: hidden;
-
-  > img {
-    max-width: 100%;
-  }
-}
-

-{
-  "name": "timeline",
-  "version": "0.0.0",
-  "main": "./Timeline.js",
-  "private": true
-}

-import React from 'react';
-import {
-  Row,
-  Col,
-  Button,
-  Form,
-  FormGroup,
-  Label,
-  Input,
-  UncontrolledTooltip,
-  UncontrolledButtonDropdown,
-  InputGroup,
-  InputGroupAddon,
-  ButtonGroup,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-} from 'reactstrap';
-import { Editor } from 'react-draft-wysiwyg';
-import { EditorState } from 'draft-js';
-import Select2 from 'react-select2-wrapper';
-import Datetime from 'react-datetime';
-import ColorPicker from 'rc-color-picker';
-import MaskedInput from 'react-maskedinput';
-import ReactBootstrapSlider from 'react-bootstrap-slider';
-import Dropzone from 'react-dropzone';
-import TextareaAutosize from 'react-autosize-textarea';
-import ReactMde, { ReactMdeCommands } from 'react-mde';
-
-
-import Widget from '../../../../components/Widget';
-
-import s from './Elements.module.scss';
-
-class Elements extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.changeValueDropdown = this.changeValueDropdown.bind(this);
-    this.onEditorStateChange = this.onEditorStateChange.bind(this);
-    this.defaultSelectChange = this.defaultSelectChange.bind(this);
-    this.changeSelectDropdownSimple = this.changeSelectDropdownSimple.bind(this);
-    this.changeSelectDropdownGreen = this.changeSelectDropdownGreen.bind(this);
-    this.changeSelectDropdownOrange = this.changeSelectDropdownOrange.bind(this);
-    this.changeSelectDropdownRed = this.changeSelectDropdownRed.bind(this);
-    this.changeSelectDropdownBig = this.changeSelectDropdownBig.bind(this);
-    this.changeColorValue = this.changeColorValue.bind(this);
-    this.changeColorInput = this.changeColorInput.bind(this);
-    this.onChangeInputFiles = this.onChangeInputFiles.bind(this);
-    this.removeInputFiles = this.removeInputFiles.bind(this);
-    this.onChangeInputImage = this.onChangeInputImage.bind(this);
-    this.onDrop = this.onDrop.bind(this);
-
-    this.state = {
-      dropDownValue: 'Another type',
-      simpleSelectDropdownValue: 'Option one',
-      greenSelectDropdownValue: 'Hichi',
-      orangeSelectDropdownValue: 'Shi',
-      redSelectDropdownValue: 'Ichi',
-      bigSelectDropdownValue: 'Fourth Item',
-      editorState: EditorState.createEmpty(),
-      selectGroupData: [{
-        id: '1',
-        text: 'NFC EAST',
-        children: [{
-          id: '11', text: 'Dallas Cowboys',
-        }, {
-          id: '12', text: 'New York Giants',
-        }, {
-          id: '13', text: 'Philadelphia Eagles',
-        }, {
-          id: '14', text: 'Washington Redskins',
-        }],
-      }, {
-        id: '2',
-        text: 'NFC NORTH',
-        children: [{
-          id: '21', text: 'Chicago Bears',
-        }, {
-          id: '22', text: 'Detroit Lions',
-        }, {
-          id: '23', text: 'Green Bay Packers',
-        }, {
-          id: '24', text: 'Minnesota Vikings',
-        }],
-      }, {
-        id: '3',
-        text: 'NFC SOUTH',
-        children: [{
-          id: '31', text: 'Atlanta Falcons',
-        }, {
-          id: '32', text: 'Carolina Panthers',
-        }, {
-          id: '33', text: 'New Orleans Saints',
-        }, {
-          id: '34', text: 'Tampa Bay Buccaneers',
-        }],
-      }],
-      selectDefaultData: [{
-        id: 'Magellanic', text: 'Large Magellanic Cloud',
-      }, {
-        id: 'Andromeda', text: 'Andromeda Galaxy',
-      }, {
-        id: 'Sextans', text: 'Sextans A',
-      }],
-      defaultSelectVal: 'Andromeda',
-      groupSelectVal: '',
-      colorpickerValue: '#ff0000',
-      colorpickerInputValue: '#ff0000',
-      isDatePickerOpen: false,
-      isTimePickerOpen: false,
-      dropFiles: [],
-      inputFiles: [],
-      imageFiles: [],
-      reactMdeValue: {
-        text: '',
-        selection: null },
-    };
-  }
-
-  onEditorStateChange(editorState) {
-    this.setState({
-      editorState,
-    });
-  }
-
-  onDrop(files) {
-    this.setState({
-      dropFiles: files,
-    });
-  }
-
-  onChangeInputFiles(e) {
-    const files = [];
-    let i = 0;
-    for (i; i < e.target.files.length; i += 1) {
-      files.push(e.target.files[i]);
-    }
-    this.setState({
-      inputFiles: files,
-    });
-  }
-
-  onChangeInputImage(e) {
-    const files = [];
-    const reader = new FileReader();
-    files.push(e.target.files[0]);
-    reader.onloadend = () => {
-      files[0].preview = reader.result;
-      files[0].toUpload = true;
-      this.setState({
-        imageFiles: files,
-      });
-    };
-    reader.readAsDataURL(e.target.files[0]);
-  }
-
-  handleValueChange = (value) => {
-    this.setState({ reactMdeValue: value });
-  }
-
-  changeValueDropdown(e) {
-    this.setState({ dropDownValue: e.currentTarget.textContent });
-  }
-
-  changeSelectDropdownGreen(e) {
-    this.setState({ greenSelectDropdownValue: e.currentTarget.textContent });
-  }
-
-  changeSelectDropdownOrange(e) {
-    this.setState({ orangeSelectDropdownValue: e.currentTarget.textContent });
-  }
-
-  changeSelectDropdownRed(e) {
-    this.setState({ redSelectDropdownValue: e.currentTarget.textContent });
-  }
-
-  changeSelectDropdownBig(e) {
-    this.setState({ bigSelectDropdownValue: e.currentTarget.textContent });
-  }
-
-  changeSelectDropdownSimple(e) {
-    this.setState({ simpleSelectDropdownValue: e.currentTarget.textContent });
-  }
-
-  defaultSelectChange(e) {
-    this.setState({
-      defaultSelectVal: e,
-    });
-  }
-
-  changeColorValue(colors) {
-    this.setState({
-      colorpickerValue: colors.color,
-      colorpickerInputValue: colors.color,
-    });
-  }
-
-  changeColorInput(e) {
-    if (e.target.value.length > 3 && e.target.value.length < 8) {
-      this.setState({
-        colorpickerInputValue: e.target.value,
-        colorpickerValue: e.target.value,
-      });
-    }
-    if (e.target.value.length <= 3) {
-      this.setState({
-        colorpickerInputValue: e.target.value,
-      });
-    }
-  }
-
-  removeInputFiles() {
-    this.setState({
-      inputFiles: [],
-    });
-  }
-
-  render() {
-    return (
-      <div className={s.root}>
-        <ol className="breadcrumb">
-          <li className="breadcrumb-item">YOU ARE HERE</li>
-          <li className="active breadcrumb-item">Form Elements</li>
-        </ol>
-        <h1 className="page-title">Form - <span className="fw-semi-bold">Inputs & Controls</span>
-        </h1>
-
-        <Row>
-          {/* Horizontal form */}
-          <Col lg={6} md={12}>
-            <Widget title={<h6> Inputs </h6>} settings refresh close>
-              <FormGroup>
-                <Form>
-                  <legend><strong>Horizontal</strong> form</legend>
-                  <FormGroup row>
-                    <Label for="normal-field" md={4} className="text-md-right">
-                      Normal field
-                    </Label>
-                    <Col md={7}>
-                      <Input type="text" id="normal-field" placeholder="May have placeholder" />
-                    </Col>
-                  </FormGroup>
-                  <FormGroup row>
-                    <Label for="hint-field" md={4} className="text-md-right">
-                      Label hint
-                      <span className="help-block">Some help text</span>
-                    </Label>
-                    <Col md={7}>
-                      <Input type="text" name="password" id="hint-field" />
-                    </Col>
-                  </FormGroup>
-                  <FormGroup row>
-                    <Label md={4} for="tooltip-enabled" className="text-md-right">Tooltip
-                      enabled</Label>
-                    <Col md={7}>
-                      <Input
-                        type="text" id="tooltip-enabled"
-                        placeholder="Hover over me.."
-                      />
-                      <UncontrolledTooltip placement="top" target="tooltip-enabled">
-                        Some explanation text here
-                      </UncontrolledTooltip>
-                    </Col>
-                  </FormGroup>
-                  <FormGroup row>
-                    <Label md={4} className="text-md-right" for="disabled-input">Disabled
-                      input</Label>
-                    <Col md={7}>
-                      <Input
-                        type="text" id="disabled-input"
-                        disabled="disabled" value="Default value"
-                      />
-                    </Col>
-                  </FormGroup>
-                  <FormGroup row>
-                    <Label md={4} className="text-md-right" for="max-length">
-                      Max length</Label>
-                    <Col md={7}>
-                      <Input
-                        type="text" id="max-length" maxLength="3"
-                        placeholder="Max length 3 characters"
-                      />
-                      <UncontrolledTooltip placement="top" target="max-length">
-                        You cannot write more than 3
-                      </UncontrolledTooltip>
-                    </Col>
-                  </FormGroup>
-                  <FormGroup row>
-                    <Label md={4} className="text-md-right" for="prepended-input">
-                      Prepended input</Label>
-                    <Col md={7}>
-                      <InputGroup>
-                        <InputGroupAddon addonType="prepend"><span className="input-group-text"><i className="fa fa-user" /></span></InputGroupAddon>
-                        <Input id="prepended-input" type="test" bsSize="16" placeholder="Username" />
-                      </InputGroup>
-                    </Col>
-                  </FormGroup>
-                  <FormGroup row>
-                    <Label md={4} className="text-md-right" for="password-field">
-                      Password
-                    </Label>
-                    <Col md={7}>
-                      <InputGroup>
-                        <InputGroupAddon addonType="prepend"><span className="input-group-text"><i className="fa fa-lock" /></span></InputGroupAddon>
-                        <Input
-                          id="password-field" type="password"
-                          placeholder="Password"
-                        />
-                      </InputGroup>
-                    </Col>
-                  </FormGroup>
-                  <FormGroup row>
-                    <Label md={4} className="text-md-right" for="appended-input">
-                      Appended input
-                    </Label>
-                    <Col md={7}>
-                      <InputGroup>
-                        <Input id="appended-input" bsSize="16" type="text" />
-                        <InputGroupAddon addonType="append">.00</InputGroupAddon>
-                      </InputGroup>
-                    </Col>
-                  </FormGroup>
-                  <FormGroup row>
-                    <Label md={4} className="text-md-right" for="combined-input">
-                      Combined
-                    </Label>
-                    <Col md={7}>
-                      <InputGroup>
-                        <InputGroupAddon addonType="prepend">$</InputGroupAddon>
-                        <Input id="combined-input" bsSize="16" type="text" />
-                        <InputGroupAddon addonType="append">.00</InputGroupAddon>
-                      </InputGroup>
-                    </Col>
-                  </FormGroup>
-                  <FormGroup row>
-                    <Label md={4} className="text-md-right" for="transparent-input">
-                      Append Transparent
-                    </Label>
-                    <Col md={7}>
-                      <InputGroup className="input-group-transparent">
-                        <Input id="transparent-input" type="text" />
-                        <InputGroupAddon addonType="append"><span className="input-group-text"><i className="fa fa-camera" /></span></InputGroupAddon>
-                      </InputGroup>
-                    </Col>
-                  </FormGroup>
-
-                  <FormGroup row className="form-action">
-                    <Label md={4} />
-                    <Col md={7}>
-                      <Button color="primary" type="submit" className="mr-xs">Save Changes</Button>
-                      <Button color="inverse">Cancel</Button>
-                    </Col>
-                  </FormGroup>
-                </Form>
-              </FormGroup>
-            </Widget>
-          </Col>
-
-          {/* Default form */}
-          <Col lg={6} md={12}>
-            <Widget title={<h6> Prepended and appended inputs </h6>} settings refresh close>
-              <FormGroup>
-                <Form>
-                  <legend><strong>Default</strong> Form</legend>
-                  <Row>
-                    <Col md={8}>
-                      <FormGroup>
-                        <Label for="search-input1">
-                          Search type input
-                        </Label>
-                        <InputGroup>
-                          <Input type="text" id="search-input1" />
-                          <InputGroupAddon addonType="append">
-                            <Button color="default">Search</Button>
-                          </InputGroupAddon>
-                        </InputGroup>
-                      </FormGroup>
-
-                      <FormGroup>
-                        <Label for="bar">
-                          Whole bar appended
-                        </Label>
-                        <InputGroup>
-                          <Input type="text" id="bar" />
-                          <InputGroupAddon addonType="append">
-                            <ButtonGroup>
-                              <Button color="danger"><i className="fa fa-pencil" /></Button>
-                              <Button color="warning"><i className="fa fa-plus" /></Button>
-                              <Button color="success"><i className="fa fa-refresh" /></Button>
-                            </ButtonGroup>
-                          </InputGroupAddon>
-                        </InputGroup>
-                      </FormGroup>
-
-                      <FormGroup>
-                        <Label for="dropdown-appended">
-                          Actions dropdown
-                        </Label>
-                        <InputGroup>
-                          <Input type="text" id="dropdown-appended" />
-                          <InputGroupAddon addonType="append">
-                            <UncontrolledButtonDropdown>
-                              <DropdownToggle caret color="success">
-                                Action
-                              </DropdownToggle>
-                              <DropdownMenu>
-                                <DropdownItem>Action</DropdownItem>
-                                <DropdownItem>Another action</DropdownItem>
-                                <DropdownItem>Something else here</DropdownItem>
-                                <DropdownItem divider />
-                                <DropdownItem>Separated link</DropdownItem>
-                              </DropdownMenu>
-                            </UncontrolledButtonDropdown>
-                          </InputGroupAddon>
-                        </InputGroup>
-                      </FormGroup>
-
-                      <FormGroup>
-                        <Label for="segmented-dropdown">
-                          Segmented dropdown
-                        </Label>
-                        <InputGroup>
-                          <Input type="text" id="segmented-dropdown" />
-                          <InputGroupAddon addonType="append">
-                            <UncontrolledButtonDropdown>
-                              <Button color="warning">Action</Button>
-                              <DropdownToggle
-                                caret color="warning"
-                                className="dropdown-toggle-split"
-                              />
-                              <DropdownMenu>
-                                <DropdownItem>Action</DropdownItem>
-                                <DropdownItem>Another action</DropdownItem>
-                                <DropdownItem>Something else here</DropdownItem>
-                                <DropdownItem divider />
-                                <DropdownItem>Separated link</DropdownItem>
-                              </DropdownMenu>
-                            </UncontrolledButtonDropdown>
-                          </InputGroupAddon>
-                        </InputGroup>
-                        <span className="help-block">Anything can be appended to the right</span>
-                      </FormGroup>
-
-                      <FormGroup>
-                        <Label for="type-dropdown-appended">
-                          Types dropdown
-                        </Label>
-                        <InputGroup>
-                          <Input type="text" id="type-dropdown-appended" />
-                          <InputGroupAddon addonType="append">
-                            <UncontrolledButtonDropdown>
-                              <DropdownToggle
-                                caret color="primary"
-                                className="dropdown-toggle-split"
-                              >
-                                {this.state.dropDownValue}
-                              </DropdownToggle>
-                              <DropdownMenu>
-                                <DropdownItem onClick={this.changeValueDropdown}>
-                                  Another type
-                                </DropdownItem>
-                                <DropdownItem onClick={this.changeValueDropdown}>
-                                  Type one
-                                </DropdownItem>
-                                <DropdownItem onClick={this.changeValueDropdown}>
-                                  Next type
-                                </DropdownItem>
-                              </DropdownMenu>
-                            </UncontrolledButtonDropdown>
-                          </InputGroupAddon>
-                        </InputGroup>
-                        <p className="help-block">
-                          You can select some type of a field just right in the place.
-                        </p>
-                      </FormGroup>
-
-                      <FormGroup>
-                        <Label for="no-borders-input">
-                          Transparent input
-                        </Label>
-                        <Input
-                          type="text" placeholder="Search Dashboard" id="no-borders-input"
-                          className="input-no-border bg-gray-lighter"
-                        />
-                        <p className="help-block">
-                          With <code>.bg-gray-lighter</code>. White by default.
-                        </p>
-                      </FormGroup>
-                    </Col>
-                  </Row>
-
-                  <FormGroup className="form-action">
-                    <Button color="inverse" type="submit" className="mr-xs">
-                      Save Changes
-                    </Button>
-                    <Button color="default">Cancel</Button>
-                  </FormGroup>
-                </Form>
-              </FormGroup>
-            </Widget>
-          </Col>
-        </Row>
-
-        <Row>
-
-          <Col lg={8} md={12}>
-            <Widget
-              title={<h6> Form <span className="fw-semi-bold">Options</span></h6>}
-              settingsInverse refresh close
-            >
-              <Form>
-                <legend>Control sizing</legend>
-                <p>
-                  Set input heights using parameters like <code>size=&apos;lg&apos;</code> and
-                  <code>size=&apos;sm&apos;</code>.
-                  Also works with <code>type=&apos;search&apos;</code> inputs, input groups and
-                  selects.
-                </p>
-                <br />
-                <FormGroup>
-                  <Input type="text" placeholder='bsSize="lg"' bsSize="lg" />
-                </FormGroup>
-                <FormGroup>
-                  <Input type="text" placeholder="default input" />
-                </FormGroup>
-                <FormGroup>
-                  <Input type="text" placeholder='bsSize="sm"' bsSize="sm" />
-                </FormGroup>
-              </Form>
-            </Widget>
-          </Col>
-
-
-          <Col lg={4} md={12}>
-            <Widget
-              title={<h6> Form <span className="fw-semi-bold">Options</span></h6>}
-              settingsInverse refresh close
-            >
-              <Form>
-                <legend> Input Groups</legend>
-                <p>
-                  Different colors & sizes for any elements including input groups. Elements may be
-                  easily styled with classes like <code>.bg-primary</code> or
-                  <code>.bg-transparent</code>
-                </p>
-                <br />
-                <FormGroup>
-                  <InputGroup>
-                    <InputGroupAddon addonType="prepend" className="bg-transparent">
-                      <span className="input-group-text"><i className="fa fa-github-alt" /></span>
-                    </InputGroupAddon>
-                    <Input type="text" placeholder="First Name" bsSize="16" />
-                  </InputGroup>
-                </FormGroup>
-                <FormGroup>
-                  <InputGroup size="lg">
-                    <InputGroupAddon addonType="prepend">
-                      <span className="input-group-text"><i className="fa fa-bars" /></span>
-                    </InputGroupAddon>
-                    <Input type="text" placeholder="Username" bsSize="16" />
-                  </InputGroup>
-                </FormGroup>
-                <FormGroup>
-                  <InputGroup size="sm">
-                    <Input type="text" placeholder="City" bsSize="16" />
-                    <InputGroupAddon addonType="prepend">
-                      <span className="bg-danger text-white input-group-text"><i className="fa fa-code-fork" /></span>
-                    </InputGroupAddon>
-                  </InputGroup>
-                </FormGroup>
-              </Form>
-            </Widget>
-          </Col>
-        </Row>
-
-        <Row>
-
-          <Col lg="6" md={12}>
-            <Widget title={<h6><i className="fa fa-font" />Textareas</h6>} settings refresh close>
-              <Form>
-                <legend>Small form</legend>
-                <FormGroup row>
-                  <Label md={3} className="text-md-right" for="default-textarea">Default
-                    textarea</Label>
-                  <Col md={9}>
-                    <Input rows="4" type="textarea" name="text" id="default-textarea" />
-                  </Col>
-                </FormGroup>
-                <FormGroup row>
-                  <Label md={3} className="text-md-right" for="elastic-textarea">Auto-growing
-                    textarea</Label>
-                  <Col md={9}>
-                    <TextareaAutosize
-                      rows={3} id="elastic-textarea"
-                      placeholder="Try to add few new lines.."
-                      className={`form-control ${s.autogrow} transition-height`}
-                    />
-                  </Col>
-                </FormGroup>
-                <FormGroup row>
-                  <Label md={3} className="text-md-right">
-                    Wysiwyg
-                    <span className="help-block">
-                      With bottom toolbar appended
-                    </span>
-                  </Label>
-                  <Col md={9}>
-                    <Editor
-                      wrapperClassName={s.wysiwygWrapper}
-                      editorClassName={s.wysiwygEditor}
-                      toolbarClassName={s.wysiwygToolbar}
-                    />
-                    <div className="text-md-right mt-xs">
-                      <Button color="danger" className="mr-xs">Save</Button>
-                      <Button color="default">Clear</Button>
-                    </div>
-                  </Col>
-                </FormGroup>
-
-                <FormGroup row>
-                  <Label md={3} className="text-md-right" for="markdown-editor">
-                    Markdown Editor
-                  </Label>
-                  <Col md={9}>
-
-                    <ReactMde
-                      textAreaProps={{
-                        id: 'ta1',
-                        name: 'ta1',
-                      }}
-                      value={this.state.reactMdeValue}
-                      onChange={this.handleValueChange}
-                      commands={ReactMdeCommands.getDefaultCommands()}
-                    />
-                  </Col>
-                </FormGroup>
-              </Form>
-            </Widget>
-          </Col>
-
-
-          <Col lg="6" md={12}>
-            <Widget
-              title={<h6><i className="fa fa-list-alt" /> Selects </h6>} refresh close
-              settings
-            >
-              <Form className="form-label-left">
-                <legend>Default form with labels on left</legend>
-                <FormGroup row>
-                  <Label md="4" for="default-select">Default select</Label>
-                  <Col md="6" className={s.select2}>
-                    <Select2
-                      value={this.state.defaultSelectVal}
-                      data={this.state.selectDefaultData}
-                    />
-                  </Col>
-                </FormGroup>
-                <FormGroup row>
-                  <Label md="4" for="grouped-select">Select with search & groups</Label>
-                  <Col md="6" className={s.select2}>
-                    <Select2
-                      data={this.state.selectGroupData}
-                    />
-                  </Col>
-                </FormGroup>
-              </Form>
-
-              <Form>
-                <legend>Dropdown based colored selects</legend>
-                <FormGroup row>
-                  <Label md="4" for="simple-select">Simple select</Label>
-                  <Col md="8">
-                    <UncontrolledButtonDropdown>
-                      <DropdownToggle
-                        caret color="default"
-                        className="dropdown-toggle-split mr-xs"
-                      >
-                        {this.state.simpleSelectDropdownValue}
-                      </DropdownToggle>
-                      <DropdownMenu>
-                        <DropdownItem onClick={this.changeSelectDropdownSimple}>
-                          Option One
-                        </DropdownItem>
-                        <DropdownItem onClick={this.changeSelectDropdownSimple}>
-                          Option Two
-                        </DropdownItem>
-                        <DropdownItem onClick={this.changeSelectDropdownSimple}>
-                          Option Three
-                        </DropdownItem>
-                      </DropdownMenu>
-                    </UncontrolledButtonDropdown>
-                    <span className="help-block">Auto size</span>
-                  </Col>
-                </FormGroup>
-
-                <FormGroup row>
-                  <Label md="4" for="simple-red-select">
-                    Colored ones
-                    <span className="help-block">A bit of Japanese</span>
-                  </Label>
-                  <Col md="8">
-                    <UncontrolledButtonDropdown>
-                      <DropdownToggle
-                        caret color="danger"
-                        className="dropdown-toggle-split mr-xs"
-                      >
-                        {this.state.redSelectDropdownValue}
-                      </DropdownToggle>
-                      <DropdownMenu>
-                        <DropdownItem onClick={this.changeSelectDropdownRed}>
-                          Ichi
-                        </DropdownItem>
-                        <DropdownItem onClick={this.changeSelectDropdownRed}>
-                          Ni
-                        </DropdownItem>
-                        <DropdownItem onClick={this.changeSelectDropdownRed}>
-                          San
-                        </DropdownItem>
-                      </DropdownMenu>
-                    </UncontrolledButtonDropdown>
-                    <UncontrolledButtonDropdown>
-                      <DropdownToggle
-                        caret color="warning"
-                        className="dropdown-toggle-split mr-xs"
-                      >
-                        {this.state.orangeSelectDropdownValue}
-                      </DropdownToggle>
-                      <DropdownMenu>
-                        <DropdownItem onClick={this.changeSelectDropdownOrange}>
-                          Shi
-                        </DropdownItem>
-                        <DropdownItem onClick={this.changeSelectDropdownOrange}>
-                          Go
-                        </DropdownItem>
-                        <DropdownItem onClick={this.changeSelectDropdownOrange}>
-                          Roku
-                        </DropdownItem>
-                      </DropdownMenu>
-                    </UncontrolledButtonDropdown>
-                    <UncontrolledButtonDropdown>
-                      <DropdownToggle
-                        caret color="success"
-                        className="dropdown-toggle-split"
-                      >
-                        {this.state.greenSelectDropdownValue}
-                      </DropdownToggle>
-                      <DropdownMenu>
-                        <DropdownItem onClick={this.changeSelectDropdownGreen}>
-                          Hichi
-                        </DropdownItem>
-                        <DropdownItem onClick={this.changeSelectDropdownGreen}>
-                          Hachi
-                        </DropdownItem>
-                        <DropdownItem onClick={this.changeSelectDropdownGreen}>
-                          Ku
-                        </DropdownItem>
-                        <DropdownItem onClick={this.changeSelectDropdownGreen}>
-                          Ju
-                        </DropdownItem>
-                      </DropdownMenu>
-                    </UncontrolledButtonDropdown>
-                  </Col>
-                </FormGroup>
-
-                <FormGroup row>
-                  <Label md="4" for="simple-big-select">
-                    Big One
-                    <span className="help-block">
-                    Size can be controlled with <code>size=&apos;lg&apos;</code> & <code>size=&apos;
-                      sm&apos;</code>
-                    </span>
-                  </Label>
-                  <Col md="8">
-                    <UncontrolledButtonDropdown id="simple-big-select">
-                      <DropdownToggle
-                        caret color="default" size="lg"
-                        className="dropdown-toggle-split"
-                      >
-                        <span className="mr-5"> {this.state.bigSelectDropdownValue}</span>
-                      </DropdownToggle>
-                      <DropdownMenu>
-                        <DropdownItem onClick={this.changeSelectDropdownBig}>
-                          Fourth Item
-                        </DropdownItem>
-                        <DropdownItem onClick={this.changeSelectDropdownBig}>
-                          Fifth Item
-                        </DropdownItem>
-                        <DropdownItem onClick={this.changeSelectDropdownBig}>
-                          Sixth Item
-                        </DropdownItem>
-                      </DropdownMenu>
-                    </UncontrolledButtonDropdown>
-                  </Col>
-                </FormGroup>
-              </Form>
-            </Widget>
-          </Col>
-        </Row>
-
-
-        <Row>
-          <Col md="12">
-            <Widget
-              title={<h6> Checkbox <strong>Controls</strong></h6>} settingsInverse refresh
-              close
-            >
-              <Row>
-                <Col lg="4">
-                  <Form>
-
-                    <legend>Basic</legend>
-                    <p>
-                      Supports bootstrap brand colors: <code>.abc-checkbox-primary</code>,
-                      <code>.abc-checkbox-info</code>
-                      etc.
-                      Pure <abbr title="Cascading Style Sheet">css</abbr> solution with no
-                      javascript.
-                      Let your checkboxes shine!
-                    </p>
-
-                    <FormGroup className="checkbox abc-checkbox" check>
-                      <Input id="checkbox1" type="checkbox" />{' '}
-                      <Label for="checkbox1" check>
-                        Default
-                      </Label>
-                    </FormGroup>
-                    <FormGroup className="checkbox abc-checkbox abc-checkbox-primary" check>
-                      <Input id="checkbox2" type="checkbox" defaultChecked />{' '}
-                      <Label for="checkbox2" check>
-                        Primary
-                      </Label>
-                    </FormGroup>
-                    <FormGroup className="checkbox abc-checkbox abc-checkbox-success" check>
-                      <Input id="checkbox3" type="checkbox" />{' '}
-                      <Label for="checkbox3" check>
-                        Success
-                      </Label>
-                    </FormGroup>
-                    <FormGroup className="checkbox abc-checkbox abc-checkbox-info" check>
-                      <Input id="checkbox4" type="checkbox" defaultChecked />{' '}
-                      <Label for="checkbox4" check>
-                        Info
-                      </Label>
-                    </FormGroup>
-                    <FormGroup className="checkbox abc-checkbox abc-checkbox-warning" check>
-                      <Input id="checkbox5" type="checkbox" defaultChecked />{' '}
-                      <Label for="checkbox5" check>
-                        Warning
-                      </Label>
-                    </FormGroup>
-                    <FormGroup className="checkbox abc-checkbox abc-checkbox-danger" check>
-                      <Input id="checkbox6" type="checkbox" defaultChecked />{' '}
-                      <Label for="checkbox6" check>
-                        Check me out
-                      </Label>
-                    </FormGroup>
-
-                  </Form>
-
-                </Col>
-
-                <Col lg="4">
-                  <Form>
-                    <legend>Circled</legend>
-                    <p>
-                      <code>.abc-checkbox-circle</code> for roundness. No more sad controls
-                      controls.
-                      Check out this brand-new rounded checkboxes!
-                    </p>
-                    <FormGroup className="checkbox abc-checkbox abc-checkbox-circle" check>
-                      <Input id="checkbox7" type="checkbox" />{' '}
-                      <Label for="checkbox7" check>
-                        Simple Rounded
-                      </Label>
-                    </FormGroup>
-                    <FormGroup
-                      className="checkbox abc-checkbox abc-checkbox-info abc-checkbox-circle" check
-                    >
-                      <Input id="checkbox8" type="checkbox" defaultChecked />{' '}
-                      <Label for="checkbox8" check>
-                        Me too
-                      </Label>
-                    </FormGroup>
-                  </Form>
-                </Col>
-
-                <Col lg="4">
-                  <Form>
-                    <legend>Disabled</legend>
-                    <p>
-                      Disabled state also supported. Full stack checkbox functionality.
-                    </p>
-                    <FormGroup className="checkbox abc-checkbox" check>
-                      <Input id="checkbox9" type="checkbox" disabled />{' '}
-                      <Label for="checkbox9" check>
-                        Can&apos;t check this
-                      </Label>
-                    </FormGroup>
-                    <FormGroup className="checkbox abc-checkbox abc-checkbox-success" check>
-                      <Input id="checkbox10" type="checkbox" disabled defaultChecked />{' '}
-                      <Label for="checkbox10" check>
-                        This too
-                      </Label>
-                    </FormGroup>
-                    <FormGroup
-                      className="checkbox abc-checkbox abc-checkbox-warning abc-checkbox-circle"
-                      check
-                    >
-                      <Input id="checkbox11" type="checkbox" disabled defaultChecked />{' '}
-                      <Label for="checkbox11" check>
-                        And this
-                      </Label>
-                    </FormGroup>
-                  </Form>
-                </Col>
-              </Row>
-              <p className="fs-mini">Built with <a
-                href="https://github.com/flatlogic/awesome-bootstrap-checkbox"
-                rel="noopener noreferrer" target="_blank"
-              >awesome-bootstrap-checkbox</a>.
-              </p>
-            </Widget>
-          </Col>
-        </Row>
-
-
-        <Row>
-          <Col md="12">
-            <Widget title={<h6> Radio <strong>Controls</strong></h6>} close refresh settingsInverse>
-              <Form>
-                <Row>
-                  <Col lg="4">
-                    <legend>Basic</legend>
-                    <p>
-                      Supports bootstrap brand colors: <code>.abc-radio-primary</code>, <code>.abc-radio-danger</code>
-                      etc.
-                      Pure css solution with no javascript. Let your radios shine!
-                    </p>
-                    <Row>
-                      <Col md="6">
-                        <FormGroup className="radio abc-radio">
-                          <Input
-                            type="radio" name="radio1" id="radio1" value="option1"
-                            defaultChecked
-                          />
-                          <Label for="radio1">Small</Label>
-                        </FormGroup>
-                        <FormGroup className="radio abc-radio">
-                          <Input type="radio" id="radio2" name="radio1" value="option2" />
-                          <Label for="radio2">Big</Label>
-                        </FormGroup>
-                      </Col>
-                      <Col md="6">
-                        <FormGroup className="radio abc-radio abc-radio-danger">
-                          <Input type="radio" id="radio3" value="option1" name="radio2" />
-                          <Label for="radio3">Next</Label>
-                        </FormGroup>
-                        <FormGroup className="radio abc-radio abc-radio-danger">
-                          <Input
-                            type="radio" id="radio4" value="option2" name="radio2"
-                            defaultChecked
-                          />
-                          <Label for="radio4">One</Label>
-                        </FormGroup>
-                      </Col>
-                    </Row>
-                  </Col>
-                  <Col lg="4">
-                    <legend>
-                      Disabled
-                    </legend>
-                    <p>
-                      Disabled state also supported. Full stack radios functionality.
-                    </p>
-                    <FormGroup className="radio abc-radio">
-                      <Input type="radio" name="radio3" id="radio5" value="option1" disabled />
-                      <Label for="radio5">Next</Label>
-                    </FormGroup>
-                    <FormGroup className="radio abc-radio abc-radio-warning">
-                      <Input
-                        type="radio" name="radio3" id="radio6" value="option2" disabled
-                        defaultChecked
-                      />
-                      <Label for="radio6">One</Label>
-                    </FormGroup>
-                  </Col>
-                  <Col lg="4">
-                    <legend>
-                      Cool iOS-like switches
-                    </legend>
-                    <p>
-                      Simple component that helps you turn your default HTML checkbox inputs into
-                      beautiful iOS 7 style switches in just few simple steps.
-                    </p>
-                    <FormGroup className="display-inline-block checkbox-ios">
-                      <Label for="checkbox-ios1" className="switch">
-                        <Input
-                          type="checkbox" className="ios" defaultChecked
-                          id="checkbox-ios1"
-                        /><i />
-                      </Label>
-                    </FormGroup>
-                    <FormGroup className="display-inline-block checkbox-ios ml">
-                      <Label for="checkbox-ios2" className="switch">
-                        <Input type="checkbox" className="ios" id="checkbox-ios2" /><i />
-                      </Label>
-                    </FormGroup>
-                  </Col>
-                </Row>
-              </Form>
-            </Widget>
-          </Col>
-        </Row>
-
-        <Row>
-
-          <Col lg="6" md="12">
-            <Widget title={<h6>Pickers</h6>} close refresh settingsInverse>
-              <Form>
-                <legend>Date & Time</legend>
-                <FormGroup>
-                  <Label for="datetimepicker">Time-enabled</Label>
-                  <Row>
-                    <Col xs="6">
-                      <div className="datepicker" style={{display: 'flex'}}>
-                        <Datetime
-                          id="datepicker"
-                          open={this.state.isDatePickerOpen}
-                          viewMode="days" timeFormat={false}
-                          inputProps={{ ref: (input) => { this.refDatePicker = input; } }}
-                        />
-                        <InputGroupAddon addonType="append" onClick={() => { this.refDatePicker.focus(); }}>
-                          <span className="input-group-text"><i className="glyphicon glyphicon-th" /></span>
-                        </InputGroupAddon>
-                      </div>
-                    </Col>
-                    <Col xs="6">
-                      <div className="datepicker" style={{display: 'flex'}}>
-                        <Datetime
-                          open={this.state.isTimePickerOpen} id="timepicker"
-                          inputProps={{ ref: (input) => { this.refTimePicker = input; } }}
-                          viewMode="time" dateFormat={false}
-                        />
-                        <InputGroupAddon addonType="append" onClick={() => { this.refTimePicker.focus(); }}>
-                          <span className="input-group-text"><i className="glyphicon glyphicon-time" /></span>
-                        </InputGroupAddon>
-                      </div>
-                    </Col>
-                  </Row>
-                </FormGroup>
-              </Form>
-
-              <Form>
-                <legend>Colors</legend>
-                <FormGroup>
-                  <Label for="colorpickeri">
-                    Simple select
-                    <span className="help-block">
-                      Colorpicker plugin for Twitter Bootstrap, originally written by Stefan Petre
-                    </span>
-                    <InputGroup id="colorpicker">
-                      <Input
-                        type="text" onChange={this.changeColorInput} id="colorpickeri"
-                        value={this.state.colorpickerInputValue}
-                      />
-                      <InputGroupAddon addonType="append">
-                        <span className="input-group-text"><ColorPicker
-                          animation="slide-up"
-                          color={this.state.colorpickerValue}
-                          onChange={this.changeColorValue}
-                        /></span>
-                      </InputGroupAddon>
-                    </InputGroup>
-                  </Label>
-                </FormGroup>
-              </Form>
-            </Widget>
-          </Col>
-
-
-          <Col lg="6" md="12">
-            <Widget title={<h6> Input <strong>Masks</strong></h6>} close settingsInverse refresh>
-              <Form className="form-label-left">
-                <legend>Masked inputs</legend>
-                <FormGroup row>
-                  <Label md="4" xs="12" for="mask-phone">
-                    Phone
-                    <span className="help-block">(123) 456-7890</span>
-                  </Label>
-                  <Col md="6" xs="12">
-                    <MaskedInput
-                      className="form-control" id="mask-phone" mask="(111) 111-1111"
-                      size="10"
-                    />
-                  </Col>
-                </FormGroup>
-                <FormGroup row>
-                  <Label md="4" xs="12" for="mask-int-phone">
-                    International Phone
-                    <span className="help-block">+375 123 456 789</span>
-                  </Label>
-                  <Col md="6" xs="12">
-                    <MaskedInput
-                      className="form-control" id="mask-int-phone"
-                      mask="+111 111 111 111"
-                    />
-                  </Col>
-                </FormGroup>
-                <FormGroup row>
-                  <Label md="4" xs="12" for="mask-date">
-                    Date Format
-                    <span className="help-block">07-03-2013</span>
-                  </Label>
-                  <Col md="6" xs="12">
-                    <MaskedInput className="form-control" id="mask-date" mask="11-11-1111" />
-                  </Col>
-                </FormGroup>
-                <FormGroup row>
-                  <Label md="4" xs="12" for="mask-time">
-                    Time
-                    <span className="help-block">13:43</span>
-                  </Label>
-                  <Col md="6" xs="12">
-                    <MaskedInput className="form-control" id="mask-date1" mask="11:11" />
-                  </Col>
-                </FormGroup>
-              </Form>
-
-            </Widget>
-          </Col>
-        </Row>
-
-
-        <Row>
-          <Col xs="12">
-            <Widget title={<h6>Sliders</h6>} settingsInverse close refresh>
-              <Row>
-                <Col lg="4">
-                  <h4>Color Options</h4>
-                  <p>Sing extends Bootstrap Slider and provides different color options:</p>
-                  <Form>
-                    <div className="mb-sm">
-                      <ReactBootstrapSlider
-                        value={14}
-                        step={1}
-                        min={0}
-                        max={20}
-                      />
-                    </div>
-                    <div className="slider-danger mb-sm">
-                      <ReactBootstrapSlider
-                        value={18}
-                        step={1}
-                        min={0}
-                        max={20}
-                      />
-                    </div>
-                    <div className="slider-warning mb-sm">
-                      <ReactBootstrapSlider
-                        value={7}
-                        step={1}
-                        min={0}
-                        max={20}
-                      />
-                    </div>
-                    <div className="slider-success mb-sm">
-                      <ReactBootstrapSlider
-                        value={11}
-                        step={1}
-                        min={0}
-                        max={20}
-                      />
-                    </div>
-                    <div className="slider-inverse mb-sm">
-                      <ReactBootstrapSlider
-                        value={4}
-                        step={1}
-                        min={0}
-                        max={20}
-                      />
-                    </div>
-                  </Form>
-                </Col>
-
-                <Col lg="4">
-                  <h4>Slider Orientation</h4>
-                  <p>
-                    Vertical orientation is also possible. Simply changing <strong>
-                    data-slider-orientation </strong>
-                    attribute does the thing.
-                  </p>
-                  <Row>
-                    <Col md="8">
-                      <span className="">
-                        <ReactBootstrapSlider
-                          value={14}
-                          step={1}
-                          min={0}
-                          max={20}
-                          orientation="vertical"
-                        />
-                      </span>
-                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                      <span className="slider-inverse">
-                        <ReactBootstrapSlider
-                          value={18}
-                          step={1}
-                          min={0}
-                          max={20}
-                          orientation="vertical"
-                        />
-                      </span>
-                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                      <span className="">
-                        <ReactBootstrapSlider
-                          value={7}
-                          step={1}
-                          min={0}
-                          max={20}
-                          orientation="vertical"
-                        />
-                      </span>
-                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                      <span className="slider-inverse">
-                        <ReactBootstrapSlider
-                          value={11}
-                          step={1}
-                          min={0}
-                          max={20}
-                          orientation="vertical"
-                        />
-                      </span>
-                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                      <span className="">
-                        <ReactBootstrapSlider
-                          value={4}
-                          step={1}
-                          min={0}
-                          max={20}
-                          orientation="vertical"
-                        />
-                      </span>
-                    </Col>
-                  </Row>
-                </Col>
-
-                <Col lg="4">
-                  <h4>Range Selector</h4>
-                  <p>Range selector, options specified via <strong>data-slider-value</strong>
-                    attribute as
-                    an array. Price range selector:</p>
-                  <span className="slider-warning">
-                    <ReactBootstrapSlider
-                      step={1}
-                      min={0}
-                      max={2000}
-                      value={[200, 1547]} range
-                    />
-                    &nbsp;
-                  </span>
-                </Col>
-
-              </Row>
-            </Widget>
-          </Col>
-        </Row>
-
-
-        <Row>
-
-          <Col lg="6" md={12}>
-            <Widget
-              title={<h6>Simple <strong>file uploads</strong></h6>} settingsInverse close
-              refresh
-            >
-              <Form>
-                <blockquote className="blockquote blockquote-reverse">
-                  <p>The man who is really serious, with the urge to find out what truth is, has no
-                    style at all. He lives only in what is.</p>
-                  <footer>Bruce Lee</footer>
-                </blockquote>
-
-                <FormGroup row>
-                  <Label md="4" className="text-md-right">
-                    File input widget
-                  </Label>
-                  <Col md="8">
-                    <InputGroup className="fileinput fileinput-new">
-                      <input
-                        onChange={this.onChangeInputFiles}
-                        id="fileupload1"
-                        type="file" name="file" className="display-none"
-                      />
-                      <Label for="fileupload1" className="form-control">
-                        {this.state.inputFiles.length > 0 ? <div>
-                          {this.state.inputFiles.map((file, idx) => (
-                            <span key={`select-id-${idx.toString()}`} >{file.name}</span>
-                          ))}
-                        </div> : <span />}
-                      </Label>
-                      {this.state.inputFiles.length === 0 ? <InputGroupAddon addonType="append">
-                        <Button type="button" color="default" className="btn-file">
-                          <Label for="fileupload1">Select file</Label>
-                        </Button>
-                      </InputGroupAddon> : <InputGroupAddon addonType="append">
-                        <Button type="button" color="default">
-                          <Label for="fileupload1">Change file</Label>
-                        </Button>
-                        <Button
-                          type="reset" color="default"
-                          onClick={this.removeInputFiles}
-                        >
-                          <Label>Remove file</Label>
-                        </Button>
-                      </InputGroupAddon>}
-
-                    </InputGroup>
-                    <span className="help-block">Awesome file input plugin allows you to create a visually appealing
-                      file or image inputs.</span>
-                  </Col>
-                </FormGroup>
-
-                <FormGroup row>
-                  <Label md="4" className="text-md-right">
-                    Image upload widget
-                  </Label>
-                  <Col md="8">
-                    <input
-                      accept="image/*" onChange={this.onChangeInputImage}
-                      id="fileupload2"
-                      type="file" name="file" className="display-none"
-                    />
-                    <div className="fileinput fileinput-new fileinput-fix">
-                      <div className="fileinput-new thumbnail">
-                        {this.state.imageFiles.length > 0 ? <div>
-                          {this.state.imageFiles.map((file, idx) => (
-                            <img alt="..." src={file.preview} key={`img-id-${idx.toString()}`} />))}
-                        </div> : <img
-                          alt="..."
-                          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOTEiIGhlaWdodD0iMTQxIj48cmVjdCB3aWR0aD0iMTkxIiBoZWlnaHQ9IjE0MSIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijk1LjUiIHk9IjcwLjUiIHN0eWxlPSJmaWxsOiNhYWE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LXNpemU6MTJweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xOTF4MTQxPC90ZXh0Pjwvc3ZnPg=="
-                        />}
-                      </div>
-                    </div>
-                    <div>
-                      <Button type="button" color="default"><Label for="fileupload2">Select
-                        image</Label></Button>
-                    </div>
-                    <span className="help-block">Showing a thumbnail instead of the filename when uploading an image.</span>
-                  </Col>
-                </FormGroup>
-              </Form>
-            </Widget>
-          </Col>
-
-
-          <Col lg="6" md={12}>
-            <Widget title={<h6><strong>Drop</strong> Zone</h6>} settingsInverse refresh close>
-              <div>
-                <Dropzone
-                  onDrop={this.onDrop} accept="image/*"
-                  className={`${s.dropzone} dropzone`}
-                >
-                  {this.state.dropFiles.length > 0 ? <div>
-                    {this.state.dropFiles.map((file, idx) => (
-                      <div className="display-inline-block mr-xs mb-xs" key={`drop-id-${idx.toString()}`}>
-                        <img alt="..." src={file.preview} width={100} />
-                        <div>{file.name}</div>
-                      </div>
-                    ))}
-                  </div> : <p>This dropzone accepts only images.
-                    Try dropping some here, or click to select files to upload.</p>}
-                </Dropzone>
-
-              </div>
-            </Widget>
-          </Col>
-
-        </Row>
-
-      </div>
-    );
-  }
-}
-
-export default Elements;

-@import '../../../../styles/app';
-
-:global {
-  @import '../../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg';
-  @import '../../../../../node_modules/react-select2-wrapper/css/select2';
-  @import '../../../../../node_modules/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox';
-  @import '../../../../../node_modules/react-datetime/css/react-datetime';
-  @import '../../../../../node_modules/rc-color-picker/dist/rc-color-picker';
-  @import '../../../../../node_modules/bootstrap-slider/dist/css/bootstrap-slider';
-  @import '../../../../../node_modules/jasny-bootstrap/dist/css/jasny-bootstrap';
-  @import '../../../../../node_modules/react-mde/lib/styles/scss/react-mde-all';
-}
-
-.autogrow {
-  overflow: hidden;
-  resize: none;
-}
-
-.wysiwygWrapper {
-  border: 1px solid #ccc !important;
-  overflow: visible;
-  height: 270px;
-}
-
-.wysiwygToolbar {
-  color: $gray-800 !important;
-  background-color: #ddd !important;
-  border-color: transparent !important;
-
-  :global {
-    .rdw-option-wrapper {
-      font-family: 'Open Sans', sans-serif;
-      font-size: 14px;
-      height: 30px;
-      min-width: 30px;
-      margin: 0;
-      background: #f8f8f8;
-    }
-
-    .rdw-dropdown-wrapper {
-      background: #f8f8f8;
-    }
-  }
-}
-
-.wysiwygEditor {
-  position: relative !important;
-  overflow: hidden !important;
-  height: 150px;
-  line-height: 0.1;
-}
-
-.select2 {
-  :global {
-    .select2-container {
-      width: 100% !important;
-    }
-
-    .select2-selection--single {
-      border-color: $input-border-color;
-
-      &,
-      & :global .select2-selection__arrow {
-        height: $input-height;
-      }
-
-      & :global .select2-selection__rendered {
-        line-height: $input-height;
-      }
-    }
-  }
-}
-
-.root {
-  :global {
-    /*
-     * Switchery.
-     */
-
-    .abc-checkbox,
-    .abc-radio {
-      .form-check-input {
-        position: relative;
-        margin: 0;
-      }
-    }
-
-    .display-inline-block {
-      display: inline-block;
-    }
-
-    .display-none {
-      display: none;
-    }
-
-    .switch {
-      box-sizing: content-box;
-    }
-
-    .switch input {
-      display: none;
-    }
-
-    .switch i {
-      display: inline-block;
-      cursor: pointer;
-      padding-right: 20px;
-      transition: all ease 0.2s;
-      -webkit-transition: all ease 0.2s;
-      border-radius: 20px;
-      box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
-    }
-
-    .switch i::before {
-      display: block;
-      content: '';
-      width: 30px;
-      height: 30px;
-      padding: 1px;
-      border-radius: 20px;
-      background: white;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-    }
-
-    .switch :checked + i {
-      padding-right: 0;
-      padding-left: 20px;
-      background: rgb(100, 189, 99);
-    }
-
-    /* Datepicker */
-
-    .datepicker {
-      .input-group-addon {
-        display: inline-block;
-        position: relative;
-        top: -2px;
-        left: -2px;
-      }
-
-      i.glyphicon {
-        vertical-align: top;
-      }
-
-      .rdt {
-        display: inline-block;
-      }
-    }
-
-    /* slider */
-
-    $slider-line-height: 8px;
-    $slider-handle-size: 26px;
-
-    .slider {
-      display: inline-block;
-      vertical-align: middle;
-      position: relative;
-
-      .slider-handle {
-        position: absolute;
-        width: $slider-handle-size;
-        height: $slider-handle-size;
-        background: $white;
-        border: 0 solid transparent;
-
-        @include box-shadow(inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 5));
-
-        &:focus {
-          outline: 0;
-        }
-
-        &.round {
-          border-radius: 50%;
-        }
-
-        &.triangle {
-          background: transparent none;
-        }
-      }
-
-      &.slider-horizontal {
-        width: 210px;
-        height: $slider-line-height;
-
-        .slider-track {
-          height: $slider-line-height/2;
-          width: 100%;
-          margin-top: -$slider-line-height/4;
-          top: 50%;
-          left: 0;
-        }
-
-        .slider-selection {
-          height: 100%;
-          top: 0;
-          bottom: 0;
-        }
-
-        .slider-handle {
-          margin-left: -$slider-handle-size/2;
-          margin-top: -$slider-handle-size*3/8;
-
-          &.triangle {
-            border-width: 0 $slider-line-height/2 $slider-line-height/2 $slider-line-height/2;
-            width: 0;
-            height: 0;
-            border-bottom-color: #0480be;
-            margin-top: 0;
-          }
-        }
-      }
-
-      &.slider-vertical {
-        height: 210px;
-        width: $slider-line-height;
-
-        .slider-track {
-          width: $slider-line-height/2;
-          height: 100%;
-          margin-left: -$slider-line-height/4;
-          left: 50%;
-          top: 0;
-        }
-
-        .slider-selection {
-          width: 100%;
-          left: 0;
-          top: 0;
-          bottom: 0;
-        }
-
-        .slider-handle {
-          margin-left: -$slider-handle-size*3/8;
-          margin-top: -$slider-handle-size/2;
-
-          &.triangle {
-            border-width: $slider-line-height/2 0 $slider-line-height/2 $slider-line-height/2;
-            width: 1px;
-            height: 1px;
-            border-left-color: #0480be;
-            margin-left: 0;
-          }
-        }
-      }
-
-      &.slider-disabled {
-        .slider-handle {
-          //     @include gradient-y(#dfdfdf, #bebebe);
-        }
-
-        .slider-track {
-          @include gradient-y(#e5e5e5, #e9e9e9);
-
-          cursor: not-allowed;
-        }
-      }
-
-      input {
-        display: none;
-      }
-
-      .tooltip-inner {
-        white-space: nowrap;
-      }
-    }
-
-    .slider-selection {
-      position: absolute;
-      background: theme-color('primary');
-
-      @include box-shadow(inset 0 -1px 0 rgba(0, 0, 0, 0.15));
-
-      box-sizing: border-box;
-      border-radius: $border-radius;
-    }
-
-    .slider-danger .slider .slider-selection {
-      background: theme-color('danger'); // $brand-danger;
-    }
-
-    .slider-success .slider .slider-selection {
-      background: theme-color('success'); // $brand-success;
-    }
-
-    .slider-warning .slider .slider-selection {
-      background: theme-color('warning'); // $brand-warning;
-    }
-
-    .slider-info .slider .slider-selection {
-      background: theme-color('info'); // $brand-info;
-    }
-
-    .slider-inverse .slider .slider-selection {
-      background: $gray-700; // $gray;
-    }
-
-    .slider-track {
-      position: absolute;
-      cursor: pointer;
-      border-radius: $border-radius;
-
-      @include gradient-y(#eee, #f8f8f8);
-      @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.1));
-    }
-
-    /*  file input */
-
-    .fileinput.fileinput-new {
-      .thumbnail {
-        padding: $thumbnail-padding;
-        line-height: $line-height-base;
-        background-color: $thumbnail-bg;
-        border: $thumbnail-border-width solid $thumbnail-border-color;
-        border-radius: $thumbnail-border-radius;
-        transition: all 0.2s ease-in-out;
-
-        @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.075));
-      }
-
-      &.fileinput-fix {
-        width: 200px;
-        height: 150px;
-      }
-    }
-
-    .btn {
-      label {
-        margin-bottom: 0;
-      }
-    }
-
-    .fileinput-preview.fileinput-exists {
-      border: 1px solid $input-border-color;
-      border-radius: $border-radius;
-      padding: 5px;
-    }
-
-    .fileinput.input-group {
-      display: flex;
-    }
-
-    .fileinput-new.input-group .btn-file,
-    .fileinput-new .input-group .btn-file {
-      border-radius: 0 $border-radius $border-radius 0;
-
-      &.btn-xs,
-      &.btn-sm {
-        border-radius: 0 $border-radius-sm $border-radius-sm 0;
-      }
-
-      &.btn-lg {
-        border-radius: 0 $border-radius-lg $border-radius-lg 0;
-      }
-    }
-
-    .form-group.has-warning .fileinput {
-      .fileinput-preview {
-        color: #fff;
-      }
-
-      .thumbnail {
-        border-color: theme-color('warning');
-      }
-    }
-
-    .form-group.has-error .fileinput {
-      .fileinput-preview {
-        color: #fff;
-      }
-
-      .thumbnail {
-        border-color: theme-color('danger');
-      }
-    }
-
-    .form-group.has-success .fileinput {
-      .fileinput-preview {
-        color: #fff;
-      }
-
-      .thumbnail {
-        border-color: theme-color('success');
-      }
-    }
-
-    .btn-label {
-      background: transparent;
-      left: 2px;
-      padding: 1px 6px;
-    }
-
-    // Opposite alignment of blockquote
-    .blockquote {
-      padding: ($spacer / 2) $spacer;
-      margin-bottom: $spacer;
-      font-size: $blockquote-font-size;
-      border-left: 0.25rem solid $gray-300;
-    }
-
-    .blockquote footer {
-      display: block;
-      font-size: 80%; // back to default font-size
-      color: $blockquote-small-color;
-
-      &::before {
-        content: '\2014 \00A0'; // em dash, nbsp
-      }
-    }
-
-    .blockquote-reverse {
-      padding-right: $spacer;
-      padding-left: 0;
-      text-align: right;
-      border-right: 0.25rem solid $gray-300;
-      border-left: 0;
-    }
-
-    .blockquote-reverse footer {
-      &::before {
-        content: '';
-      }
-
-      &::after {
-        content: '\00A0 \2014'; // nbsp, em dash
-      }
-    }
-  }
-}
-
-.dropzone {
-  width: 100%;
-  text-align: center;
-  padding: 40px 10px;
-  height: 200px;
-  border: 2px dashed #ccc;
-
-  @include border-radius($border-radius);
-
-  img {
-    max-height: 100px;
-    max-width: 150px;
-    border-radius: 5px;
-  }
-}

-{
-  "name": "FormsElements",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Elements.js"
-}

-import React from 'react';
-import {
-  Row,
-  Col,
-  Button,
-  FormGroup,
-  Label,
-} from 'reactstrap';
-import Formsy from 'formsy-react';
-
-import InputValidation from '../../../../components/InputValidation';
-import Widget from '../../../../components/Widget';
-
-
-class Validation extends React.Component {
-
-  render() {
-    return (
-      <div>
-        <ol className="breadcrumb">
-          <li className="breadcrumb-item">YOU ARE HERE</li>
-          <li className="breadcrumb-item active">Form Validation</li>
-        </ol>
-        <h1 className="page-title">Form - <span className="fw-semi-bold">Validation</span>
-        </h1>
-
-        <Row>
-          <Col xs={0} lg={1} />
-          <Col lg={8} xs={12}>
-            <Widget
-              title={<h5> Dead simple validation
-              <small> No JS needed to tune-up</small>
-              </h5>} close collapse
-            >
-              <Formsy.Form>
-                <fieldset>
-                  <legend>
-                    By default validation is started only after at least 3 characters have been input.
-                  </legend>
-                  <FormGroup row>
-                    <Label md={3} xs={12} for="basic">Simple required</Label>
-                    <Col md={9} xs={12}>
-                      <InputValidation
-                        type="text"
-                        id="basic"
-                        name="basic"
-                        required
-                      />
-                    </Col>
-                  </FormGroup>
-                  <FormGroup row>
-                    <Label md={3} xs={12} for="basic-change">Min-length On Change
-                      <span className="help-block"> At least 10 </span>
-                    </Label>
-                    <Col md={9} xs={12}>
-                      <InputValidation
-                        type="text" id="basic-change"
-                        name="basic-change"
-                        trigger="change"
-                        validations={{ minLength: 10 }}
-                        validationError={{
-                          minLength: 'This value is too short. It should have 10 characters or more.',
-                        }}
-                        required
-                      />
-                    </Col>
-                  </FormGroup>
-                </fieldset>
-                <fieldset>
-                  <legend>
-                    <span className="badge badge-warning text-gray-dark mr-xs">
-                      HTML5 </span> input types supported
-                  </legend>
-                  <FormGroup row>
-                    <Label md={3} xs={12} for="email">E-mail</Label>
-                    <Col md={9} xs={12}>
-                      <InputValidation
-                        type="text"
-                        id="email"
-                        name="email"
-                        trigger="change"
-                        required
-                        validations={{ isEmail: true }}
-                        validationError={{ isEmail: 'This value should be a valid email.' }}
-                      />
-                      <span className="help-block">
-                        This one is triggered even when 1 character has been input
-                      </span>
-                      {/* todo: change triggered */}
-                    </Col>
-                  </FormGroup>
-                  <FormGroup row>
-                    <Label md={3} xs={12} for="number">Number</Label>
-                    <Col md={9} xs={12}>
-                      <InputValidation
-                        type="text"
-                        id="number"
-                        name="number"
-                        required
-                        validations="isNumeric"
-                        validationError={{ isNumeric: 'This value should be a valid number.' }}
-                      />
-                    </Col>
-                  </FormGroup>
-                  <FormGroup row>
-                    <Label md={3} xs={12} for="range">Range</Label>
-                    <Col md={9} xs={12}>
-                      <InputValidation
-                        type="text"
-                        id="range"
-                        name="range"
-                        trigger="change"
-                        required
-                        validations="isRange:[10,100]"
-                        validationError={{ isRange: 'This value should be between 10 and 100.' }}
-                      />
-                    </Col>
-                  </FormGroup>
-                </fieldset>
-
-                <fieldset>
-                  <legend>
-                    More validation
-                  </legend>
-                  <FormGroup row>
-                    <Label md={3} xs={12} for="password"> Password helpers</Label>
-                    <Col md={9} xs={12}>
-                      <InputValidation
-                        type="password"
-                        id="password"
-                        name="password"
-                        trigger="change"
-                        className="mb-xs"
-                        validations={{ minLength: 6 }}
-                        validationError={{
-                          minLength: 'This value is too short. It should have 6 characters or more.',
-                        }}
-                        required
-                      />
-                      <InputValidation
-                        type="password"
-                        id="password-r"
-                        name="password-r"
-                        trigger="change"
-                        className="mb-sm"
-                        validations={{ equalsField: 'password', minLength: 6 }}
-                        validationError={{
-                          equalsField: 'This value should be the same.',
-                          minLength: 'This value is too short. It should have 6 characters or more.',
-
-                        }}
-                        required
-                      />
-                    </Col>
-                  </FormGroup>
-
-                  <FormGroup row>
-                    <Label md={3} xs={12} for="website">Website</Label>
-                    <Col md={9} xs={12}>
-                      <InputValidation
-                        type="text"
-                        id="website"
-                        name="website"
-                        trigger="change"
-                        validations="isUrl"
-                        validationError={{
-                          isUrl: 'This value should be a valid url.',
-                        }}
-                        required
-                      />
-                    </Col>
-                  </FormGroup>
-                </fieldset>
-
-                <div className="form-action">
-                  <Button type="submit" color="danger" className="btn-rounded float-right">Validate & Submit</Button>
-                  <Button type="button" color="default" className="btn-rounded">Cancel</Button>
-                </div>
-              </Formsy.Form>
-            </Widget>
-          </Col>
-        </Row>
-      </div>
-    );
-  }
-}
-
-export default Validation;

-{
-  "name": "FormValidation",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Validation.js"
-}

-import React from 'react';
-import {
-  Row,
-  Col,
-  Button,
-  FormGroup,
-  Label,
-  Nav,
-  NavLink,
-  NavItem,
-  Progress,
-} from 'reactstrap';
-import Formsy from 'formsy-react';
-import Select2 from 'react-select2-wrapper';
-import MaskedInput from 'react-maskedinput';
-import Datetime from 'react-datetime';
-import { select2CountriesData, select2ShipmentData, cardTypesData } from './data';
-
-
-import InputValidation from '../../../../components/InputValidation/InputValidation';
-import Widget from '../../../../components/Widget';
-import s from './Wizard.module.scss';
-
-const count = 4;
-const StepsComponents = {
-  Step1: function Step1() {
-    return (<fieldset>
-      <FormGroup>
-        <Label for="username">Username</Label>
-        <InputValidation
-          type="text"
-          id="username"
-          name="username"
-          validations={{ isAlphanumeric: true }}
-          trigger="change"
-          required
-          validationError={{ isAlphanumeric: 'Username can contain any letters or numbers, without spaces' }}
-        />
-        <p className="help-block">Username can contain any letters or numbers, without spaces</p>
-      </FormGroup>
-      <FormGroup>
-        <Label for="email">Email</Label>
-        <InputValidation
-          type="text"
-          id="email"
-          name="email"
-          validations={{ isEmail: true }}
-          required
-          validationError={{ isEmail: 'Please provide your E-mail' }}
-        />
-        <p className="help-block">Please provide your E-mail</p>
-      </FormGroup>
-      <FormGroup>
-        <Label for="address">Address</Label>
-        <InputValidation
-          type="text"
-          id="address"
-          name="address"
-          validations={{ isAlpha: true }}
-          required
-          validationError={{ isAlpha: 'Please provide your address' }}
-        />
-        <p className="help-block">Please provide your address</p>
-      </FormGroup>
-    </fieldset>);
-  },
-  Step2: function Step2() {
-    return (
-      <fieldset>
-        <FormGroup>
-          <Label for="country-select">Destination Country</Label>
-          <Select2
-            style={{ width: '100%' }}
-            id="country-selec"
-            data={select2CountriesData}
-          />
-          <p className="help-block">Please choose your country destination</p>
-        </FormGroup>
-        <FormGroup>
-          <Label for="courier">Choose shipping option</Label>
-          <Select2
-            style={{ width: '100%' }}
-            id="courier"
-            data={select2ShipmentData}
-          />
-          <p className="help-block">Please choose your shipping option</p>
-        </FormGroup>
-        <FormGroup>
-          <Label for="destination">Destination Zip Code</Label>
-          <MaskedInput
-            className="form-control" id="destination" mask="111111"
-            size="6"
-          />
-          <p className="help-block">Please provide your Destination Zip Code</p>
-        </FormGroup>
-        <FormGroup>
-          <Label for="dest-address">Destination Address</Label>
-          <InputValidation type="text" id="dest-address" name="dest-address" />
-          <p className="help-block">Please provide the destination address</p>
-        </FormGroup>
-      </fieldset>
-    );
-  },
-  Step3: function Step3(props) {
-    return (
-      <fieldset>
-        <FormGroup>
-          <Label for="name">Name on the Card</Label>
-          <InputValidation type="text" id="name" name="name" />
-        </FormGroup>
-        <FormGroup>
-          <Label for="credit-card-type">Choose shipping option</Label>
-          <Select2
-            style={{ width: '100%' }}
-            id="credit-card-type"
-            data={cardTypesData}
-          />
-        </FormGroup>
-        <FormGroup>
-          <Label for="credit">Credit Card Number</Label>
-          <InputValidation type="text" id="credit" name="credit" />
-        </FormGroup>
-        <FormGroup>
-          <Label for="expiration-data">Expiration Date</Label>
-          <div className="datepicker">
-            <Datetime
-              id="datepicker"
-              open={props.isDatePickerOpen} //eslint-disable-line
-              viewMode="days"
-            />
-          </div>
-        </FormGroup>
-      </fieldset>
-    );
-  },
-  Step4: function Step4() {
-    return (
-      <fieldset>
-        <h2>Thank you!</h2>
-        <p>Your submission has been received.</p>
-      </fieldset>
-    );
-  },
-
-};
-
-class Wizard extends React.Component {
-  constructor(prop) {
-    super(prop);
-    this.state = {
-      currentStep: 1,
-      progress: 25,
-      isDatePickerOpen: false,
-    };
-    this.nextStep = this.nextStep.bind(this);
-    this.previousStep = this.previousStep.bind(this);
-  }
-
-  nextStep() {
-    let currentStep = this.state.currentStep;
-    if (currentStep >= count) {
-      currentStep = count;
-    } else {
-      currentStep += 1;
-    }
-
-    this.setState({
-      currentStep,
-      progress: (100 / count) * currentStep,
-    });
-  }
-
-  previousStep() {
-    let currentStep = this.state.currentStep;
-    if (currentStep <= 1) {
-      currentStep = 1;
-    } else {
-      currentStep -= 1;
-    }
-
-    this.setState({
-      currentStep,
-      progress: (100 / count) * currentStep,
-    });
-  }
-
-  render() {
-    const currentStep = this.state.currentStep;
-    return (
-      <div className={s.root}>
-        <ol className="breadcrumb">
-          <li className="breadcrumb-item">YOU ARE HERE</li>
-          <li className="breadcrumb-item active">Form Wizard</li>
-        </ol>
-        <h1 className="page-title">Form - <span className="fw-semi-bold">Wizard</span>
-        </h1>
-        <Row>
-          <Col xl={8} lg={12}>
-            <Widget
-              close collapse
-              className={s.formWizard}
-              title={<div>
-                <h4>
-                  Wizard&nbsp;
-                  <small>Tunable widget</small>
-                </h4>
-                <p className="text-muted">An example of complete wizard form in widget.</p></div>}
-            >
-
-              <Nav pills justified className={s.wizardNavigation}>
-                <NavItem>
-                  <NavLink active={currentStep === 1}>
-                    <small>1.</small>
-                    &nbsp;
-                    Your Details
-                  </NavLink>
-                </NavItem>
-                <NavItem>
-                  <NavLink active={currentStep === 2}>
-                    <small>2.</small>
-                    &nbsp;
-                    Shipping
-                  </NavLink>
-                </NavItem>
-                <NavItem>
-                  <NavLink active={currentStep === 3}>
-                    <small>3.</small>
-                    &nbsp;
-                    Pay
-                  </NavLink>
-                </NavItem>
-                <NavItem>
-                  <NavLink active={currentStep === 4}>
-                    <small>4.</small>
-                    &nbsp;
-                    Thank you!
-                  </NavLink>
-                </NavItem>
-              </Nav>
-              <Progress value={this.state.progress} color="gray-light" className="progress-xs" />
-              <div className="tab-content">
-                <div className={s.stepBody}>
-                  <Formsy.Form>
-                    {currentStep === 1 && <StepsComponents.Step1 />}
-                    {currentStep === 2 && <StepsComponents.Step2 />}
-                    {currentStep === 3 && <StepsComponents.Step3 />}
-                    {currentStep === 4 &&
-                    <StepsComponents.Step4 isDatePickerOpen={this.state.isDatePickerOpen} />}
-                  </Formsy.Form>
-                </div>
-
-                <div className="description">
-                  <ul className="pager wizard">
-                    <li className="previous">
-                      <Button disabled={currentStep === 1} color="primary" onClick={this.previousStep}><i
-                        className="fa fa-caret-left"
-                      />
-                        &nbsp;Previous</Button>
-                    </li>
-                    {currentStep < count &&
-                    <li className="next">
-                      <Button color="primary" onClick={this.nextStep}>Next <i className="fa fa-caret-right" /></Button>
-                    </li>
-                    }
-                    {currentStep === count &&
-                    <li className="finish">
-                      <Button color="success">Finish <i className="fa fa-check" /></Button>
-                    </li>
-                    }
-                  </ul>
-                </div>
-              </div>
-            </Widget>
-          </Col>
-        </Row>
-      </div>
-    );
-  }
-}
-
-export default Wizard;

-@import '../../../../styles/app';
-
-:global {
-  @import '../../../../../node_modules/react-select2-wrapper/css/select2';
-  @import '../../../../../node_modules/react-datetime/css/react-datetime';
-}
-
-.root {
-  :global {
-    .tab-content {
-      overflow: visible;
-    }
-  }
-
-  .formWizard {
-    :global {
-      .progress {
-        margin-top: 6px;
-        margin-bottom: 10px;
-      }
-
-      .form-group:last-child {
-        margin-bottom: 0;
-      }
-
-      .pager {
-        display: flex;
-        margin: 18px 0;
-        flex-direction: row;
-        justify-content: space-between;
-
-        .disabled button {
-          cursor: not-allowed;
-          opacity: 0.65;
-        }
-      }
-
-      #datepicker .input-group {
-        width: 100%;
-        display: flex !important;
-
-        .form-control {
-          border-bottom-right-radius: 0.25rem;
-          border-top-right-radius: 0.25rem;
-        }
-
-        .input-group-addon {
-          display: none;
-        }
-      }
-    }
-  }
-
-  .wizardNavigation {
-    margin: 0 (-0.5 * $spacer) 5px;
-
-    :global {
-      .active {
-        background: theme-color('primary');
-
-        &:hover {
-          color: $white;
-        }
-      }
-    }
-
-    li {
-      padding: 0 (0.5 * $spacer);
-    }
-
-    a {
-      padding: $spacer;
-      color: $text-color;
-      background: $gray-300;
-
-      strong {
-        font-weight: $font-weight-semi-bold;
-      }
-
-      small {
-        font-weight: $font-weight-thin;
-      }
-    }
-  }
-
-  .stepBody {
-    padding: $spacer;
-    background: $gray-300;
-    border-radius: $border-radius;
-  }
-}

-export const select2CountriesData = [
-  { text: 'Afghanistan', id: 'AF' },
-  { text: 'land Islands', id: 'AX' },
-  { text: 'Albania', id: 'AL' },
-  { text: 'Algeria', id: 'DZ' },
-  { text: 'American Samoa', id: 'AS' },
-  { text: 'AndorrA', id: 'AD' },
-  { text: 'Angola', id: 'AO' },
-  { text: 'Anguilla', id: 'AI' },
-  { text: 'Antarctica', id: 'AQ' },
-  { text: 'Antigua and Barbuda', id: 'AG' },
-  { text: 'Argentina', id: 'AR' },
-  { text: 'Armenia', id: 'AM' },
-  { text: 'Aruba', id: 'AW' },
-  { text: 'Australia', id: 'AU' },
-  { text: 'Austria', id: 'AT' },
-  { text: 'Azerbaijan', id: 'AZ' },
-  { text: 'Bahamas', id: 'BS' },
-  { text: 'Bahrain', id: 'BH' },
-  { text: 'Bangladesh', id: 'BD' },
-  { text: 'Barbados', id: 'BB' },
-  { text: 'Belarus', id: 'BY' },
-  { text: 'Belgium', id: 'BE' },
-  { text: 'Belize', id: 'BZ' },
-  { text: 'Benin', id: 'BJ' },
-  { text: 'Bermuda', id: 'BM' },
-  { text: 'Bhutan', id: 'BT' },
-  { text: 'Bolivia', id: 'BO' },
-  { text: 'Bosnia and Herzegovina', id: 'BA' },
-  { text: 'Botswana', id: 'BW' },
-  { text: 'Bouvet Island', id: 'BV' },
-  { text: 'Brazil', id: 'BR' },
-  { text: 'British Indian Ocean Territory', id: 'IO' },
-  { text: 'Brunei Darussalam', id: 'BN' },
-  { text: 'Bulgaria', id: 'BG' },
-  { text: 'Burkina Faso', id: 'BF' },
-  { text: 'Burundi', id: 'BI' },
-  { text: 'Cambodia', id: 'KH' },
-  { text: 'Cameroon', id: 'CM' },
-  { text: 'Canada', id: 'CA' },
-  { text: 'Cape Verde', id: 'CV' },
-  { text: 'Cayman Islands', id: 'KY' },
-  { text: 'Central African Republic', id: 'CF' },
-  { text: 'Chad', id: 'TD' },
-  { text: 'Chile', id: 'CL' },
-  { text: 'China', id: 'CN' },
-  { text: 'Christmas Island', id: 'CX' },
-  { text: 'Cocos (Keeling) Islands', id: 'CC' },
-  { text: 'Colombia', id: 'CO' },
-  { text: 'Comoros', id: 'KM' },
-  { text: 'Congo', id: 'CG' },
-  { text: 'Congo, The Democratic Republic of the', id: 'CD' },
-  { text: 'Cook Islands', id: 'CK' },
-  { text: 'Costa Rica', id: 'CR' },
-  { text: "Cote D'Ivoire", id: 'CI' },
-  { text: 'Croatia', id: 'HR' },
-  { text: 'Cuba', id: 'CU' },
-  { text: 'Cyprus', id: 'CY' },
-  { text: 'Czech Republic', id: 'CZ' },
-  { text: 'Denmark', id: 'DK' },
-  { text: 'Djibouti', id: 'DJ' },
-  { text: 'Dominica', id: 'DM' },
-  { text: 'Dominican Republic', id: 'DO' },
-  { text: 'Ecuador', id: 'EC' },
-  { text: 'Egypt', id: 'EG' },
-  { text: 'El Salvador', id: 'SV' },
-  { text: 'Equatorial Guinea', id: 'GQ' },
-  { text: 'Eritrea', id: 'ER' },
-  { text: 'Estonia', id: 'EE' },
-  { text: 'Ethiopia', id: 'ET' },
-  { text: 'Falkland Islands (Malvinas)', id: 'FK' },
-  { text: 'Faroe Islands', id: 'FO' },
-  { text: 'Fiji', id: 'FJ' },
-  { text: 'Finland', id: 'FI' },
-  { text: 'France', id: 'FR' },
-  { text: 'French Guiana', id: 'GF' },
-  { text: 'French Polynesia', id: 'PF' },
-  { text: 'French Southern Territories', id: 'TF' },
-  { text: 'Gabon', id: 'GA' },
-  { text: 'Gambia', id: 'GM' },
-  { text: 'Georgia', id: 'GE' },
-  { text: 'Germany', id: 'DE' },
-  { text: 'Ghana', id: 'GH' },
-  { text: 'Gibraltar', id: 'GI' },
-  { text: 'Greece', id: 'GR' },
-  { text: 'Greenland', id: 'GL' },
-  { text: 'Grenada', id: 'GD' },
-  { text: 'Guadeloupe', id: 'GP' },
-  { text: 'Guam', id: 'GU' },
-  { text: 'Guatemala', id: 'GT' },
-  { text: 'Guernsey', id: 'GG' },
-  { text: 'Guinea', id: 'GN' },
-  { text: 'Guinea-Bissau', id: 'GW' },
-  { text: 'Guyana', id: 'GY' },
-  { text: 'Haiti', id: 'HT' },
-  { text: 'Heard Island and Mcdonald Islands', id: 'HM' },
-  { text: 'Holy See (Vatican City State)', id: 'VA' },
-  { text: 'Honduras', id: 'HN' },
-  { text: 'Hong Kong', id: 'HK' },
-  { text: 'Hungary', id: 'HU' },
-  { text: 'Iceland', id: 'IS' },
-  { text: 'India', id: 'IN' },
-  { text: 'Indonesia', id: 'ID' },
-  { text: 'Iran, Islamic Republic Of', id: 'IR' },
-  { text: 'Iraq', id: 'IQ' },
-  { text: 'Ireland', id: 'IE' },
-  { text: 'Isle of Man', id: 'IM' },
-  { text: 'Israel', id: 'IL' },
-  { text: 'Italy', id: 'IT' },
-  { text: 'Jamaica', id: 'JM' },
-  { text: 'Japan', id: 'JP' },
-  { text: 'Jersey', id: 'JE' },
-  { text: 'Jordan', id: 'JO' },
-  { text: 'Kazakhstan', id: 'KZ' },
-  { text: 'Kenya', id: 'KE' },
-  { text: 'Kiribati', id: 'KI' },
-  { text: 'Korea, Democratic Republic', id: 'KP' },
-  { text: 'Korea, Republic of', id: 'KR' },
-  { text: 'Kuwait', id: 'KW' },
-  { text: 'Kyrgyzstan', id: 'KG' },
-  { text: 'Lao Democratic Republic', id: 'LA' },
-  { text: 'Latvia', id: 'LV' },
-  { text: 'Lebanon', id: 'LB' },
-  { text: 'Lesotho', id: 'LS' },
-  { text: 'Liberia', id: 'LR' },
-  { text: 'Libyan Arab Jamahiriya', id: 'LY' },
-  { text: 'Liechtenstein', id: 'LI' },
-  { text: 'Lithuania', id: 'LT' },
-  { text: 'Luxembourg', id: 'LU' },
-  { text: 'Macao', id: 'MO' },
-  { text: 'Macedonia, The Former Yugoslav Republic of', id: 'MK' },
-  { text: 'Madagascar', id: 'MG' },
-  { text: 'Malawi', id: 'MW' },
-  { text: 'Malaysia', id: 'MY' },
-  { text: 'Maldives', id: 'MV' },
-  { text: 'Mali', id: 'ML' },
-  { text: 'Malta', id: 'MT' },
-  { text: 'Marshall Islands', id: 'MH' },
-  { text: 'Martinique', id: 'MQ' },
-  { text: 'Mauritania', id: 'MR' },
-  { text: 'Mauritius', id: 'MU' },
-  { text: 'Mayotte', id: 'YT' },
-  { text: 'Mexico', id: 'MX' },
-  { text: 'Micronesia, Federated States of', id: 'FM' },
-  { text: 'Moldova, Republic of', id: 'MD' },
-  { text: 'Monaco', id: 'MC' },
-  { text: 'Mongolia', id: 'MN' },
-  { text: 'Montenegro', id: 'ME' },
-  { text: 'Montserrat', id: 'MS' },
-  { text: 'Morocco', id: 'MA' },
-  { text: 'Mozambique', id: 'MZ' },
-  { text: 'Myanmar', id: 'MM' },
-  { text: 'Namibia', id: 'NA' },
-  { text: 'Nauru', id: 'NR' },
-  { text: 'Nepal', id: 'NP' },
-  { text: 'Netherlands', id: 'NL' },
-  { text: 'Netherlands Antilles', id: 'AN' },
-  { text: 'New Caledonia', id: 'NC' },
-  { text: 'New Zealand', id: 'NZ' },
-  { text: 'Nicaragua', id: 'NI' },
-  { text: 'Niger', id: 'NE' },
-  { text: 'Nigeria', id: 'NG' },
-  { text: 'Niue', id: 'NU' },
-  { text: 'Norfolk Island', id: 'NF' },
-  { text: 'Northern Mariana Islands', id: 'MP' },
-  { text: 'Norway', id: 'NO' },
-  { text: 'Oman', id: 'OM' },
-  { text: 'Pakistan', id: 'PK' },
-  { text: 'Palau', id: 'PW' },
-  { text: 'Palestinian Territory, Occupied', id: 'PS' },
-  { text: 'Panama', id: 'PA' },
-  { text: 'Papua New Guinea', id: 'PG' },
-  { text: 'Paraguay', id: 'PY' },
-  { text: 'Peru', id: 'PE' },
-  { text: 'Philippines', id: 'PH' },
-  { text: 'Pitcairn', id: 'PN' },
-  { text: 'Poland', id: 'PL' },
-  { text: 'Portugal', id: 'PT' },
-  { text: 'Puerto Rico', id: 'PR' },
-  { text: 'Qatar', id: 'QA' },
-  { text: 'Reunion', id: 'RE' },
-  { text: 'Romania', id: 'RO' },
-  { text: 'Russian Federation', id: 'RU' },
-  { text: 'RWANDA', id: 'RW' },
-  { text: 'Saint Helena', id: 'SH' },
-  { text: 'Saint Kitts and Nevis', id: 'KN' },
-  { text: 'Saint Lucia', id: 'LC' },
-  { text: 'Saint Pierre and Miquelon', id: 'PM' },
-  { text: 'Saint Vincent and the Grenadines', id: 'VC' },
-  { text: 'Samoa', id: 'WS' },
-  { text: 'San Marino', id: 'SM' },
-  { text: 'Sao Tome and Principe', id: 'ST' },
-  { text: 'Saudi Arabia', id: 'SA' },
-  { text: 'Senegal', id: 'SN' },
-  { text: 'Serbia', id: 'RS' },
-  { text: 'Seychelles', id: 'SC' },
-  { text: 'Sierra Leone', id: 'SL' },
-  { text: 'Singapore', id: 'SG' },
-  { text: 'Slovakia', id: 'SK' },
-  { text: 'Slovenia', id: 'SI' },
-  { text: 'Solomon Islands', id: 'SB' },
-  { text: 'Somalia', id: 'SO' },
-  { text: 'South Africa', id: 'ZA' },
-  { text: 'South Georgia and the South Sandwich Islands', id: 'GS' },
-  { text: 'Spain', id: 'ES' },
-  { text: 'Sri Lanka', id: 'LK' },
-  { text: 'Sudan', id: 'SD' },
-  { text: 'Suriname', id: 'SR' },
-  { text: 'Svalbard and Jan Mayen', id: 'SJ' },
-  { text: 'Swaziland', id: 'SZ' },
-  { text: 'Sweden', id: 'SE' },
-  { text: 'Switzerland', id: 'CH' },
-  { text: 'Syrian Arab Republic', id: 'SY' },
-  { text: 'Taiwan, Province of China', id: 'TW' },
-  { text: 'Tajikistan', id: 'TJ' },
-  { text: 'Tanzania, United Republic of', id: 'TZ' },
-  { text: 'Thailand', id: 'TH' },
-  { text: 'Timor-Leste', id: 'TL' },
-  { text: 'Togo', id: 'TG' },
-  { text: 'Tokelau', id: 'TK' },
-  { text: 'Tonga', id: 'TO' },
-  { text: 'Trinidad and Tobago', id: 'TT' },
-  { text: 'Tunisia', id: 'TN' },
-  { text: 'Turkey', id: 'TR' },
-  { text: 'Turkmenistan', id: 'TM' },
-  { text: 'Turks and Caicos Islands', id: 'TC' },
-  { text: 'Tuvalu', id: 'TV' },
-  { text: 'Uganda', id: 'UG' },
-  { text: 'Ukraine', id: 'UA' },
-  { text: 'United Arab Emirates', id: 'AE' },
-  { text: 'United Kingdom', id: 'GB' },
-  { text: 'United States', id: 'US' },
-  { text: 'United States Minor Outlying Islands', id: 'UM' },
-  { text: 'Uruguay', id: 'UY' },
-  { text: 'Uzbekistan', id: 'UZ' },
-  { text: 'Vanuatu', id: 'VU' },
-  { text: 'Venezuela', id: 'VE' },
-  { text: 'Viet Nam', id: 'VN' },
-  { text: 'Virgin Islands, British', id: 'VG' },
-  { text: 'Virgin Islands, U.S.', id: 'VI' },
-  { text: 'Wallis and Futuna', id: 'WF' },
-  { text: 'Western Sahara', id: 'EH' },
-  { text: 'Yemen', id: 'YE' },
-  { text: 'Zambia', id: 'ZM' },
-  { text: 'Zimbabwe', id: 'ZW' },
-];
-
-
-export const select2ShipmentData = [
-  { id: 'Australia Post', text: 'Australia Post' },
-  { id: 'DHL US', text: 'DHL US' },
-  { id: 'Other', text: 'Other' },
-];
-
-export const cardTypesData = [
-  { id: 'Visa', text: 'Visa' },
-  { id: 'Mastercard', text: 'Mastercard' },
-  { id: 'Other', text: 'Other' },
-];

-{
-  "name": "FormWizard",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Wizard.js"
-}

-import React from 'react';
-import {
-  Row,
-  Col,
-  Label,
-  Input,
-  Form,
-  FormGroup,
-  DropdownToggle,
-  DropdownMenu,
-  DropdownItem,
-  UncontrolledDropdown,
-  Button,
-  Modal,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-} from 'reactstrap';
-import $ from 'jquery';
-import 'imports-loader?window.jQuery=jquery,this=>window!jquery-ui/ui/widgets/sortable'; //eslint-disable-line
-
-import Widget from '../../../components/Widget';
-import './Grid.scss';
-
-
-import peopleA1 from '../../../images/people/a1.jpg';
-import peopleA2 from '../../../images/people/a2.jpg';
-import peopleA3 from '../../../images/people/a3.jpg';
-import peopleA4 from '../../../images/people/a4.jpg';
-
-const sortOptions = {
-  connectWith: '.widget-container',
-  handle: 'header, .handle',
-  cursor: 'move',
-  iframeFix: false,
-  items: '.widget:not(.locked)',
-  opacity: 0.8,
-  helper: 'original',
-  revert: true,
-  forceHelperSize: true,
-  placeholder: 'widget widget-placeholder',
-  forcePlaceholderSize: true,
-  tolerance: 'pointer',
-};
-
-const tooltipPlacement = 'bottom';
-
-class Grid extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false,
-      modal: false,
-    };
-    this.toggleModal = this.toggleModal.bind(this);
-    this.closePrompt = this.closePrompt.bind(this);
-  }
-
-  componentDidMount() {
-    $('.widget-container').sortable(sortOptions);
-    this.initSharesWidget();
-    this.initNewsWidget();
-  }
-
-  initSharesWidget() {
-    $(this.sharesWidget).widgster({
-      loaderTemplate: `<div class="loader animated fadeIn">
-         <span class="spinner"><i class="fa fa-spinner fa-spin"></i></span>
-      </div>`,
-    });
-  }
-
-  initNewsWidget() {
-    /**
-     * Make refresh button spin when loading
-     */
-    $('#news-widget').bind('load.widgster', () => {
-      $(this).find('[data-widgster="load"] > i').addClass('fa-spin');
-    }).bind('loaded.widgster', () => {
-      $(this).find('[data-widgster="load"] > i').removeClass('fa-spin');
-    });
-  }
-
-  closePrompt(callback) {
-    this.setState({ modal: true });
-    $('#news-widget-remove').bind('click', () => {
-      this.setState({ modal: false });
-      callback();
-    });
-  }
-
-  toggleModal() {
-    this.setState({ modal: !this.state.modal });
-  }
-
-  render() {
-    return (
-      <div>
-       <ol className="breadcrumb">
-          <li className="breadcrumb-item">YOU ARE HERE</li>
-          <li className="breadcrumb-item active">Grid</li>
-        </ol>
-        <h1 className="page-title">Grid - <span className="fw-semi-bold">Options</span></h1>
-
-        <Row>
-          <Col xl={7}>
-            <Widget
-              title={<h5>Draggable Grid &nbsp;<span className="badge badge-danger fw-normal">since 2.1</span></h5>}
-            >
-              <div>
-                <p>
-                  <strong>Widgster</strong> is a plugin that allows to easily implement basic widget functions that
-                  lots of our customers have requested. For now it has the following essential
-                  widget features:
-                </p>
-                <ul className="text-list">
-                  <li><strong>Collapse/Expand</strong> - all widgets can be collapsed to fill only header&apos;s
-                    vertical
-                    space;
-                  </li>
-                  <li><strong>Close</strong> - closable. Any widget may be removed by clicking the close btn;</li>
-                  <li><strong>Full Screen</strong> - an option to make widget fill the whole window (just like OS);</li>
-                  <li><strong>Ajax Load</strong> - the hottest option allowing to load/reload widget content
-                    asynchronously. You just
-                    need to provide an url to fetch the data from. With loader delivered.
-                  </li>
-                </ul>
-                <p>It&apos;s available under MIT license, check out
-                  <a href="https://github.com/flatlogic/widgster" target="_blank" rel="noopener noreferrer"> github </a>
-                  to find it.</p>
-                <p>
-                  Test it out!
-                </p>
-              </div>
-            </Widget>
-          </Col>
-        </Row>
-
-        <Row className="grid-demo">
-          <Col className="widget-container" xl={6} xs={12}>
-            <Widget
-              title={<h6>Default <span className="fw-semi-bold">Widget</span></h6>}
-              refresh collapse fullscreen close
-              showTooltip tooltipPlacement={tooltipPlacement}
-            >
-              <div>
-                <p>A timestamp this widget was created: Apr 24, 19:07:07</p>
-                <p>A timestamp this widget was updated: Apr 24, 19:07:07</p>
-              </div>
-            </Widget>
-
-            <Widget
-              className="shares-widget"
-              ref={(r) => {
-                this.sharesWidget = r;
-              }}
-              data-post-processing
-              showTooltip tooltipPlacement={tooltipPlacement}
-              title={<h6>
-                <span className="badge badge-primary"><i className="fa fa-facebook" /></span> &nbsp;
-                Latest <span className="fw-semi-bold">Shares</span>
-              </h6>}
-              close="Close" refresh="Reload"
-              bodyClass={'p-0'}
-            >
-              <div className="list-group list-group-lg">
-                <button className="list-group-item text-left">
-                  <span className="thumb-sm mr">
-                    <img className="rounded-circle" src={peopleA1} alt="..." />
-                  </span>
-                  <div>
-                    <h6 className="m-0">Maikel Basso</h6>
-                    <small className="text-muted">about 2 mins ago</small>
-                  </div>
-                  <i className="fa fa-circle ml-auto text-danger" />
-                </button>
-                <button className="list-group-item text-left">
-                  <span className="thumb-sm mr">
-                    <img className="rounded-circle" src={peopleA2} alt="..." />
-                  </span>
-                  <div>
-                    <h6 className="m-0">Ianus Arendse</h6>
-                    <small className="text-muted">about 42 mins ago</small>
-                  </div>
-                  <i className="fa fa-circle ml-auto text-info" />
-                </button>
-                <button className="list-group-item text-left">
-                  <span className="thumb-sm mr">
-                    <img className="rounded-circle" src={peopleA3} alt="..." />
-                  </span>
-                  <div>
-                    <h6 className="m-0">Valdemar Landau</h6>
-                    <small className="text-muted">one hour ago</small>
-                  </div>
-                  <i className="fa fa-circle ml-auto text-success" />
-                </button>
-                <button className="list-group-item text-left mb-n-md">
-                  <span className="thumb-sm mr">
-                    <img className="rounded-circle" src={peopleA4} alt="..." />
-                  </span>
-                  <div>
-                    <h6 className="m-0">Rick Teagan</h6>
-                    <small className="text-muted">3 hours ago</small>
-                  </div>
-                  <i className="fa fa-circle ml-auto text-warning" />
-                </button>
-              </div>
-           </Widget>
-            <Widget
-              id="autoload-widget"
-              data-post-processing="true"
-              data-widgster-autoload="true"
-              data-widgster-show-loader="false"
-              title={<h6>Autoload <span className="fw-semi-bold">Widget</span></h6>}
-              customControls={
-                <UncontrolledDropdown>
-                  <DropdownToggle
-                    tag="span"
-                    data-toggle="dropdown"
-                  >
-                    <i className="glyphicon glyphicon-cog" />
-                  </DropdownToggle>
-                  <DropdownMenu right>
-                    <DropdownItem data-widgster="load" title="Reload">
-                      Reload &nbsp;&nbsp;
-                      <span className="badge badge-pill badge-success animated bounceIn">
-                        <strong>9</strong>
-                      </span>
-                    </DropdownItem>
-                    <DropdownItem data-widgster="fullscreen" title="Full Screen">Fullscreen</DropdownItem>
-                    <DropdownItem data-widgster="restore" title="Restore">Restore</DropdownItem>
-                    <DropdownItem divider />
-                    <DropdownItem data-widgster="close" title="Close">Close</DropdownItem>
-                  </DropdownMenu>
-                </UncontrolledDropdown>
-              }
-            >
-              <div>
-                <h3 className="text-center m-0">Sign up, it&apos;s <strong>free</strong></h3>
-                <p className="lead text-muted text-center">
-                  Faith makes it possible to achieve that which man&apos;s mind can conceive and believe.
-                </p>
-                <Form>
-                  <FormGroup>
-                    <Label for="exampleInputEmail1"><i className="fa fa-circle text-warning" /> &nbsp; Email
-                      address</Label>
-                    <Input
-                      type="email" id="exampleInputEmail1"
-                      placeholder="Enter email"
-                    />
-                  </FormGroup>
-                  <FormGroup>
-                    <Label for="pswd"><i className="fa fa-circle text-danger" /> &nbsp; Password</Label>
-                    <Input id="pswd" type="text" placeholder="Min 8 characters" />
-                  </FormGroup>
-                  <p>
-                    To make a widget automatically load it&apos;s content you just need to set
-                    <strong>data-widgster-autoload</strong> attribute and provide an url.
-                  </p>
-                  <pre><code>data-widgster-load=&quot;server/ajax_widget.html&quot;
-                    data-widgster-autoload=&quot;true&quot;</code></pre>
-                  <p>
-                    <strong>data-widgster-autoload</strong> may be set to an integer value. If set, for example, to
-                    2000 will refresh widget every 2 seconds.
-                  </p>
-                  <div className="clearfix">
-                    <div className="btn-toolbar float-right">
-                      <button type="button" className="btn btn-transparent">Cancel</button>
-                      <button type="button" className="btn btn-success">&nbsp;Submit&nbsp;</button>
-                    </div>
-                  </div>
-                </Form>
-              </div>
-            </Widget>
-
-           <Widget>
-              <header>
-                <h6>Custom <span className="fw-semi-bold">Loader</span></h6>
-              </header>
-              <div className="widget-body" style={{ minHeight: '140px' }}>
-                <div className="loader animated fadeIn handle">
-                  <span className="spinner">
-                    <i className="fa fa-spinner fa-spin" />
-                  </span>
-                </div>
-              </div>
-            </Widget>
-          </Col>
-
-
-          <Col xl={6} className="widget-container">
-            <Widget
-              id="news-widget"
-              data-post-processing="true"
-              title={<div><h6> News <span className="badge badge-pill badge-success">17</span></h6>
-                <span className="text-muted">spinning refresh button & close prompt</span>
-              </div>}
-              customControls={
-                <div>
-                  <button data-widgster="expand" title="Expand"><i className="glyphicon glyphicon-chevron-up" /></button>
-                  <button data-widgster="collapse" title="Collapse"><i
-                    className="glyphicon glyphicon-chevron-down"
-                  /></button>
-                  <button data-widgster="load" title="I am spinning!"><i className="fa fa-refresh" /></button>
-                  <button data-widgster="close" title="Close"><i className="glyphicon glyphicon-remove" /></button>
-                </div>
-              }
-              bodyClass={'p-0'}
-              options={{
-                showLoader: false,
-                closePrompt: this.closePrompt,
-              }}
-            >
-              <ul className={'news-list stretchable'}>
-                <li>
-                  <span className="icon bg-danger text-white">
-                    <i className="fa fa-star" />
-                  </span>
-                  <div className="news-item-info">
-                    <h5 className="name m-0 mb-xs"><button className="btn-link">First Human Colony on Mars</button></h5>
-                    <p className="fs-mini">
-                      First 700 people will take part in building first human settlement outside of Earth.
-                      That&apos;s awesome, right?
-                    </p>
-                    <time className="help-block">Mar 20, 18:46</time>
-                  </div>
-                </li>
-                <li>
-                  <span className="icon bg-info text-white">
-                    <i className="fa fa-microphone" />
-                  </span>
-                  <div className="news-item-info">
-                    <h5 className="name m-0 mb-xs"><button className="btn-link">Light Blue reached $300</button></h5>
-                    <p className="fs-mini">
-                      Light Blue Inc. shares just hit $300 price. &quot;This was inevitable. It should
-                      have happen sooner or later&quot; - says NYSE expert.
-                    </p>
-                    <time className="help-block">Sep 25, 11:59</time>
-                  </div>
-                </li>
-                <li>
-                  <span className="icon bg-success text-white">
-                    <i className="fa fa-eye" />
-                  </span>
-                  <div className="news-item-info">
-                    <h5 className="name m-0 mb-xs"><button className="btn-link">No more spying</button></h5>
-                    <p className="fs-mini">
-                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-                      incididunt ut labore et dolore magna aliqua.
-                    </p>
-                    <time className="help-block">Mar 20, 18:46</time>
-                  </div>
-                </li>
-              </ul>
-
-              <Modal isOpen={this.state.modal} toggle={this.toggleModal} id="news-close-modal">
-                <ModalHeader toggle={this.toggleModal} id="news-close-modal-label">Sure?</ModalHeader>
-                <ModalBody className="bg-white">
-                  Do you really want to unrevertably remove this super news widget?
-                </ModalBody>
-                <ModalFooter>
-                  <Button color="default" onClick={this.toggleModal} data-dismiss="modal">No</Button>{' '}
-                  <Button color="danger" data-widgster="close" id="news-widget-remove">Yes,
-                    remove widget</Button>
-                </ModalFooter>
-              </Modal>
-
-            </Widget>
-
-            <Widget
-              className="locked" data-widgster-collapsed="true"
-              title={<h6>Collapsed by default & locked</h6>}
-              collapse close
-            >
-              <div className="widget-body">
-                <blockquote>
-                  There are no limits. There are plateaus, but you must not stay there, you must go beyond
-                  them. If it kills you, it kills you. A man must constantly exceed his level.
-                  <footer>
-                    Bruce Lee
-                  </footer>
-                </blockquote>
-                <p>To make a widget initially collapsed just add
-                  <code>data-widgster-collapsed=&quot;true&quot;</code> attribute
-                  to <code>.widget</code>.</p>
-                <p>To make it locked (prevent dragging) add <code>.locked</code> class.</p>
-              </div>
-            </Widget>
-
-            <Widget
-              className="bg-gray"
-              bodyClass={'p-0'}
-            >
-              <div className="jumbotron handle bg-gray text-white mb-0">
-                <div className="container">
-                  <h1>Draggable story!</h1>
-                  <p className="lead">
-                    <em>Build</em> your own
-                    interfaces! Sit back and relax.
-                  </p>
-                  <p className="text-center">
-                    <button className="btn btn-danger btn-lg" data-widgster="fullscreen">
-                      Fullscreen me! &nbsp;
-                      <i className="fa fa-check" />
-                    </button>
-                  </p>
-                  <button className="btn btn-danger btn-lg" data-widgster="restore">
-                    Want to go back?
-                  </button>
-                </div>
-              </div>
-
-            </Widget>
-          </Col>  
-        </Row>
-
-      </div> 
-    );
-  }
-}
-
-export default Grid;

-@import '../../../styles/app';
-
-/*          NEWS LIST          */
-:global {
-  .news-list {
-    margin-bottom: 0;
-    padding-left: 0;
-
-    li {
-      list-style: none;
-      box-sizing: content-box;
-      border-top: 1px solid $gray-200;
-      padding: 12px;
-      cursor: pointer;
-
-      @include transition(background-color 0.2s ease-out);
-
-      &:hover {
-        background: $body-bg-light;
-      }
-
-      &:last-child {
-        margin-bottom: -10px;
-      }
-    }
-
-    img,
-    .icon {
-      float: left;
-      height: 50px;
-      width: 50px;
-    }
-
-    .icon {
-      line-height: 50px;
-      border-radius: 50%;
-      text-align: center;
-      font-size: 28px;
-
-      .fa {
-        vertical-align: baseline;
-      }
-    }
-
-    .news-item-info {
-      margin-left: 62px; /* 50 + 12px padding */
-    }
-
-    .name {
-      text-transform: uppercase;
-
-      a {
-        text-decoration: none;
-
-        &:hover {
-          color: $link-color;
-        }
-      }
-    }
-  }
-}
-
-/*          SHARES LIST          */
-:global {
-  .shares-widget {
-    :global {
-      .list-group {
-        .list-group-item {
-          display: flex;
-          align-items: center;
-        }
-      }
-    }
-  }
-}

-{
-  "name": "grid",
-  "version": "0.0.0",
-  "main": "./Grid.js",
-  "private": true
-}

-import React from 'react';
-import PropTypes from 'prop-types';
-import { withRouter } from 'react-router';
-import {
-    BootstrapTable,
-    TableHeaderColumn,
-} from 'react-bootstrap-table';
-import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
-import { Popover, PopoverBody, PopoverHeader, Breadcrumb, BreadcrumbItem, Alert } from 'reactstrap';
-
-import {
-    Button,
-    ButtonToolbar,
-    Dropdown,
-    DropdownItem,
-    DropdownMenu,
-    DropdownToggle
-} from "reactstrap";
-
-import Widget from '../../../components/Widget';
-import s from './Management.module.scss';
-
-import { getProductsRequest, deleteProductRequest } from '../../../actions/products'
-import Loader from '../../../components/Loader';
-import cx from 'classnames';
-
-class Management extends React.Component {
-    static propTypes = {
-        products: PropTypes.array,
-        dispatch: PropTypes.func.isRequired,
-    };
-
-    static defaultProps = {
-        products: []
-    };
-
-    state = {
-        popovers: {},
-        promoAlert: false,
-    };
-
-    constructor() {
-        super();
-        this.apiFormatter = this.apiFormatter.bind(this);
-    }
-
-    componentDidMount() {
-        this.props.dispatch(getProductsRequest());
-        setTimeout(() => {
-            this.showPromoAlert();
-        }, 100);
-    }
-
-    showPromoAlert() {
-        this.setState({promoAlert: true});
-    }
-
-    imageFormatter(cell) {
-        return (
-            <img src={cell} alt="..." className={s.image} title="image"/>
-        )
-    }
-
-    titleFormatter(cell, row) {
-        return cell ? (
-            <Link to={'/app/ecommerce/product/' + row.id}>
-               {cell[0].toUpperCase() + cell.slice(1)}
-            </Link>
-        ) : ""
-    }
-
-    deleteProduct(id) {
-        this.props.dispatch(deleteProductRequest({
-            id,
-            history: this.props.history
-        }))
-    }
-
-    togglePopover(id) {
-        let newState = {...this.state};
-        if (!this.state.popovers[id]) {
-            newState.popovers[id] = true;
-        } else {
-            newState.popovers[id] = !newState.popovers[id];
-        }
-        this.setState(newState);
-    }
-
-    apiFormatter(cell, row) {
-        return (
-            <ButtonToolbar>
-                <Button color="info" size="xs" onClick={()=> this.props.history.push('/app/ecommerce/management/' + row.id)}>
-                    <span className="d-none d-md-inline-block">Edit</span>
-                    <span className="d-md-none"><i className='la la-edit'/></span>
-                </Button>
-                <Button id={'popoverDelete_' + row.id} color="danger" size="xs">
-                    {this.props.isDeleting && this.props.idToDelete === row.id ? <Loader size={14}/> :
-                        <span>
-                            <span className="d-none d-md-inline-block">Delete</span>
-                            <span className="d-md-none"><i className='la la-remove'/></span>
-                        </span>
-                    }
-                </Button>
-                <Popover className="popover-danger" target={'popoverDelete_' + row.id} placement="top" isOpen={this.state.popovers[row.id]}
-                         toggle={()=>{this.togglePopover(row.id)}}
-                >
-                    <PopoverHeader className="px-5">Are you sure?</PopoverHeader>
-                    <PopoverBody className="px-5 d-flex justify-content-center">
-                        <ButtonToolbar>
-                            <Button color="success" size="xs" onClick={() => {this.deleteProduct(row.id)}}>
-                                Yes
-                            </Button>
-                            <Button color="danger" size="xs" onClick={() => {this.togglePopover(row.id)}}>
-                                No
-                            </Button>
-                        </ButtonToolbar>
-                    </PopoverBody>
-                </Popover>
-            </ButtonToolbar>
-        )
-    }
-
-    renderSizePerPageDropDown = (props) => {
-        const limits = [];
-        props.sizePerPageList.forEach((limit) => {
-            limits.push(<DropdownItem key={limit}
-                                      onClick={() => props.changeSizePerPage(limit)}>{limit}</DropdownItem>);
-        });
-
-        return (
-            <Dropdown isOpen={props.open} toggle={props.toggleDropDown}>
-                <DropdownToggle color="default" caret>
-                    {props.currSizePerPage}
-                </DropdownToggle>
-                <DropdownMenu>
-                    {limits}
-                </DropdownMenu>
-            </Dropdown>
-        );
-    };
-
-    createNewProduct() {
-        this.props.history.push('/app/ecommerce/management/create');
-    }
-
-    render() {
-        const options = {
-            sizePerPage: 10,
-            paginationSize: 3,
-            sizePerPageDropDown: this.renderSizePerPageDropDown,
-        };
-
-        return (
-            <div>
-                <Breadcrumb>
-                    <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
-                    <BreadcrumbItem active>E-commerce</BreadcrumbItem>
-                </Breadcrumb>
-                <div className="page-top-line">
-                    <h2 className="page-title">Product - <span className="fw-semi-bold">Management</span></h2>
-                    <Alert
-                        color="success"
-                        className={cx(s.promoAlert, {[s.showAlert]: this.state.promoAlert})}
-                    >
-                        This page is only available in <a className="text-white font-weight-bold" rel="noreferrer noopener" href="https://flatlogic.com/admin-dashboards/sing-app-react-node-js" target="_blank">Sing App React with Node.js</a> integration!
-                    </Alert>
-                </div>
-                <Widget title="List of Products" collapse close
-                        fetchingData={this.props.isReceiving}
-                >
-                    <Button color="success" onClick={() => this.createNewProduct()}>Create Product</Button>
-                    <BootstrapTable data={this.props.products} version="4" pagination options={options} search
-                                    tableContainerClass={`table-striped ${s.bootstrapTable}`}>
-                        <TableHeaderColumn dataField="id" isKey={true} className="width-50"
-                                           columnClassName="width-50">
-                            <span className="fs-sm">ID</span>
-                        </TableHeaderColumn>
-                        <TableHeaderColumn dataField="img" dataFormat={this.imageFormatter}>
-                            <span className="fs-sm">Image</span>
-                        </TableHeaderColumn>
-                        <TableHeaderColumn dataField="title" dataFormat={this.titleFormatter}>
-                            <span className="fs-sm">Title</span>
-                        </TableHeaderColumn>
-                        {window.innerWidth >= 768 && (
-                            <TableHeaderColumn dataField="subtitle">
-                                <span className="fs-sm">Subtitle</span>
-                            </TableHeaderColumn>
-                        )}
-                        {window.innerWidth >= 768 && (
-                            <TableHeaderColumn dataField="price">
-                                <span className="fs-sm">Price($)</span>
-                            </TableHeaderColumn>
-                        )}
-                        <TableHeaderColumn dataFormat={this.apiFormatter}>
-                            <span className="fs-sm">Api</span>
-                        </TableHeaderColumn>
-                    </BootstrapTable>
-                </Widget>
-            </div>
-
-        );
-    }
-}
-
-function mapStateToProps(state) {
-    return {
-        products: state.products.data,
-        isReceiving: state.products.isReceiving,
-        isDeleting: state.products.isDeleting,
-        idToDelete: state.products.idToDelete,
-    };
-}
-
-export default withRouter(connect(mapStateToProps)(Management));

-.bootstrapTable {
-  border: none;
-
-  :global .table {
-    thead,
-    tbody {
-      th,
-      td {
-        border-right: none;
-        border-left: none;
-      }
-    }
-
-    thead th {
-      background: transparent;
-    }
-
-    tbody td {
-      vertical-align: middle;
-    }
-  }
-}
-
-.image {
-  width: 100px;
-}
-
-.promoAlert {
-  transition: 0.6s;
-  transition-timing-function: ease;
-  transform: translateX(-130vw);
-}
-
-.showAlert {
-  transform: translateX(0);
-}

-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import TagsInput from 'react-tagsinput'
-import { withRouter } from 'react-router';
-import {
-    Input,
-    Label,
-    Form,
-    FormGroup,
-    Col,
-    Button,
-    ButtonToolbar,
-    Dropdown,
-    DropdownItem,
-    DropdownMenu,
-    DropdownToggle,
-    Popover,
-    PopoverHeader,
-    PopoverBody
-} from "reactstrap";
-
-import {
-  loadProductRequest,
-  receiveProduct,
-  updateProduct,
-  updateProductRequest,
-  createProductRequest,
-  deleteProductRequest,
-  getProductsImagesRequest
-} from '../../../../../actions/products';
-import Widget from '../../../../../components/Widget';
-import Loader from '../../../../../components/Loader';
-import s from './ProductEdit.module.scss';
-
-class ProductEdit extends React.Component {
-    static propTypes = {
-        products: PropTypes.array,
-        images: PropTypes.array,
-        dispatch: PropTypes.func.isRequired,
-    };
-
-    static defaultProps = {
-        products: [],
-        images: []
-    };
-
-    constructor(props) {
-        super(props);
-        this.updateProductRequest = this.updateProductRequest.bind(this);
-        this.createProductRequest = this.createProductRequest.bind(this);
-        this.deleteProductRequest = this.deleteProductRequest.bind(this);
-        this.toggleDropdown = this.toggleDropdown.bind(this);
-
-        this.state = {
-            dropdownOpen: false,
-            popover: false
-        };
-
-        this.description_1 = React.createRef();
-        this.description_2 = React.createRef();
-
-        let newProduct = {
-          id: -1,
-          price: 0.01,
-          rating: 5,
-          technology: []
-        };
-        let product = this.findProduct(this.getId());
-        if (this.getId() > -1) {
-            if (!product) {
-                this.props.dispatch(loadProductRequest(this.getId()));
-            }
-        } else {
-            if (!product) {
-                this.props.dispatch(receiveProduct(newProduct));
-            }
-
-        }
-
-        this.props.dispatch(getProductsImagesRequest(newProduct));
-    }
-
-    findProduct(id) {
-        const {products} = this.props;
-        return products.find(p => p.id === id);
-    }
-
-    getId() {
-        const {match} = this.props;
-        return parseInt(match.params.id) || -1;
-    }
-
-    updateProductRequest() {
-        this.props.dispatch(updateProductRequest(this.findProduct(this.getId())));
-    }
-
-    createProductRequest() {
-        this.props.dispatch(createProductRequest({
-            product: this.findProduct(this.getId()),
-            history: this.props.history
-        }));
-    }
-
-    deleteProductRequest() {
-        debugger;
-        this.props.dispatch(deleteProductRequest({
-            id: this.getId(),
-            history: this.props.history
-        }));
-    }
-
-    getImage() {
-        let product = this.findProduct(this.getId());
-        return product ? product.img : null;
-    }
-
-    updateProduct(value, key) {
-        let product = this.findProduct(this.getId());
-        product[key] = value;
-        this.props.dispatch(updateProduct(product));
-    }
-
-    goBack() {
-        this.props.history.push('/app/ecommerce/management');
-    }
-
-    toggleDropdown() {
-        this.setState({
-            dropdownOpen: !this.state.dropdownOpen
-        })
-    }
-
-    togglePopover() {
-        this.setState({
-            popover: !this.state.popover
-        });
-    }
-
-    componentDidUpdate() {
-        let product = this.findProduct(this.getId()) || {
-            technology: []
-        };
-        if (this.description_1.current) {
-            this.description_1.current.value = product.description_1 || "";
-        }
-
-        if (this.description_2.current) {
-            this.description_2.current.value = product.description_2 || "";
-        }
-    }
-
-    render() {
-        const isNew = this.getId() === -1;
-        let image = this.getImage();
-        let product = this.findProduct(this.getId()) || {
-            technology: []
-        };
-
-        return (
-            <div>
-                <h2 className="page-title">Product - <span className="fw-semi-bold">Detail</span></h2>
-                <Widget title={(isNew ? "New" : "Edit") + " product"} collapse close>
-                    {!isNew && this.props.isReceiving ? <Loader size={40}/> :
-                        <Form>
-                            <FormGroup row>
-                                <Label md={2} for="productImage">Image</Label>
-                                <Col md={5}>
-                                    <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggleDropdown}
-                                              id="productImage">
-                                        <DropdownToggle caret color="info">
-                                          {image && <img className={s.productImage} alt="img" src={image}/>}
-                                        </DropdownToggle>
-                                        <DropdownMenu>
-                                            {this.props.images.map(img => (
-                                                <DropdownItem key={img} onClick={() => this.updateProduct(img, 'img')}>
-                                                    <img className={s.productImage} alt={img} src={img}/>
-                                                </DropdownItem>
-                                            ))}
-                                        </DropdownMenu>
-                                    </Dropdown>
-                                </Col>
-                            </FormGroup>
-                            <FormGroup row>
-                                <Label md={2} for="productTitle">Title</Label>
-                                <Col md={5}>
-                                    <Input id="productTitle" type="text" defaultValue={product.title}
-                                           onChange={(event) => this.updateProduct(event.target.value, 'title')}/>
-                                </Col>
-                            </FormGroup>
-                            <FormGroup row>
-                                <Label md={2} for="productSubtitle">Subtitle</Label>
-                                <Col md={5}>
-                                    <Input id="productSubtitle" type="text" defaultValue={product.subtitle}
-                                           onChange={(event) => this.updateProduct(event.target.value, 'subtitle')}/>
-                                </Col>
-                            </FormGroup>
-                            <FormGroup row>
-                                <Label md={2} for="productPrice">Price</Label>
-                                <Col md={2}>
-                                    <Input id="productPrice" type="number" step={0.01} min={0.01}
-                                           defaultValue={product.price}
-                                           onChange={(event) => this.updateProduct(event.target.value, 'price')}/>
-                                </Col>
-                            </FormGroup>
-                            <FormGroup row>
-                                <Label md={2} for="productDiscount">Discount</Label>
-                                <Col md={2}>
-                                    <Input id="productDiscount" type="number" step={1} min={0} max={100}
-                                           defaultValue={product.discount || 0}
-                                           onChange={(event) => this.updateProduct(event.target.value, 'discount')}/>
-                                </Col>
-                            </FormGroup>
-                            <FormGroup row>
-                                <Label md={2} for="productDescription_1">Description 1</Label>
-                                <Col md={5}>
-                                <textarea rows={3} className="form-control" id="productDescription_1"
-                                          ref={this.description_1}
-                                          onChange={(event) => this.updateProduct(event.target.value, 'description_1')}/>
-                                </Col>
-                            </FormGroup>
-                            <FormGroup row>
-                                <Label md={2} for="productDescription_2">Description 2</Label>
-                                <Col md={5}>
-                                <textarea rows={3} className="form-control" id="productDescription_2"
-                                          ref={this.description_2}
-                                          onChange={(event) => this.updateProduct(event.target.value, 'description_2')}/>
-                                </Col>
-                            </FormGroup>
-                            <FormGroup row>
-                                <Label md={2} for="productCode">Code</Label>
-                                <Col md={2}>
-                                    <Input id="productCode" type="text"
-                                           defaultValue={product.code}
-                                           onChange={(event) => this.updateProduct(event.target.value, 'code')}/>
-                                </Col>
-                            </FormGroup>
-                            <FormGroup row>
-                                <Label md={2} for="productHashtag">Hashtag</Label>
-                                <Col md={5}>
-                                    <Input id="productHashtag" type="text"
-                                           defaultValue={product.hashtag}
-                                           onChange={(event) => this.updateProduct(event.target.value, 'hashtag')}/>
-                                </Col>
-                            </FormGroup>
-                            <FormGroup row>
-                                <Label md={2} for="productTechnology">Technology</Label>
-                                <Col md={5}>
-                                    <TagsInput className="react-tagsinput form-control" id="productTechnology"
-                                               value={product.technology}
-                                               onChange={(tags) => this.updateProduct(tags, 'technology')}/>
-                                </Col>
-                            </FormGroup>
-                            <FormGroup row>
-                                <Label md={2} for="productRating">Rating</Label>
-                                <Col md={2}>
-                                    <Input id="productRating" step={0.1} min={0} max={5} type="number"
-                                           defaultValue={product.rating}
-                                           onChange={(event) => this.updateProduct(event.target.value, 'rating')}/>
-                                </Col>
-                            </FormGroup>
-                            <ButtonToolbar>
-                                <Button color="success"
-                                        onClick={!isNew ? this.updateProductRequest : this.createProductRequest}>
-                                    {this.props.isUpdating ? <Loader/> : 'Save'}
-                                </Button>
-                                <Button color="default" onClick={() => {
-                                    this.goBack()
-                                }}>Back</Button>
-                                {!isNew && (
-                                    <span>
-                                        <Button id="deleteProductPopover" color="danger">
-                                            {this.props.isDeleting ? <Loader/> : 'Delete'}
-                                        </Button>
-                                        <Popover className="popover-danger" target="deleteProductPopover"
-                                                 placement="top"
-                                                 isOpen={this.state.popover}
-                                                 toggle={() => {
-                                                     this.togglePopover()
-                                                 }}
-                                        >
-                                            <PopoverHeader className="px-5">Are you sure?</PopoverHeader>
-                                            <PopoverBody className="px-5 d-flex justify-content-center">
-                                                <ButtonToolbar>
-                                                    <Button color="success" size="xs" onClick={this.deleteProductRequest}>
-                                                        Yes
-                                                    </Button>
-                                                    <Button color="danger" size="xs" onClick={() => {
-                                                        this.togglePopover()
-                                                    }}>
-                                                        No
-                                                    </Button>
-                                                </ButtonToolbar>
-                                            </PopoverBody>
-                                        </Popover>
-                                    </span>
-                                )}
-                            </ButtonToolbar>
-                        </Form>
-                    }
-                </Widget>
-            </div>
-
-        );
-    }
-}
-
-function mapStateToProps(state) {
-    return {
-        products: state.products.data,
-        images: state.products.images,
-        isReceiving: state.products.isReceiving,
-        isUpdating: state.products.isUpdating,
-        isDeleting: state.products.isDeleting,
-    };
-}
-
-export default withRouter(connect(mapStateToProps)(ProductEdit));

-.productImage {
-  width: 100px;
-}

-{
-  "name": "ProductEdit",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./ProductEdit.js"
-}
\ No newline at end of file

-{
-  "name": "Management",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Management.js"
-}
\ No newline at end of file

-import React from 'react';
-import {
-  withGoogleMap,
-  withScriptjs,
-  GoogleMap,
-  Marker,
-} from 'react-google-maps';
-
-import s from './Google.module.scss';
-
-const BasicMap = withScriptjs(withGoogleMap(() =>
-  <GoogleMap
-    defaultZoom={12}
-    defaultCenter={{ lat: parseFloat(-37.813179), lng: parseFloat(144.950259) }}
-  >
-    <Marker position={{ lat: -37.813179, lng: 144.950259 }} />
-  </GoogleMap>,
-));
-
-class Maps extends React.Component {
-
-  render() {
-    return (
-      <div>
-        <h1 className={`${s.MapTitle} page-title`}>
-          Google <span className="fw-semi-bold">Maps</span>
-        </h1>
-        <div className={s.MapContainer}>
-          <BasicMap
-            googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyB7OXmzfQYua_1LEhRdqsoYzyJOPh9hGLg"
-            loadingElement={<div style={{ height: 'inherit', width: 'inherit' }} />}
-            containerElement={<div style={{ height: 'inherit' }} />}
-            mapElement={<div style={{ height: 'inherit' }} />}
-          />
-        </div>
-
-      </div>);
-  }
-
-}
-
-export default Maps;

-@import '../../../../styles/app';
-
-.MapContainer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  height: 100%;
-}
-
-.MapTitle {
-  position: relative;
-  z-index: 2;
-}

-{
-  "name": "GoogleMap",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Google.js"
-}

-import React from 'react';
-import $ from 'jquery';
-/* eslint-disable */
-import 'imports-loader?jQuery=jquery,this=>window!jvectormap/jquery-jvectormap.min.js';
-import 'imports-loader?jQuery=jquery,this=>window!./jvector-world.js';
-/* eslint-enable */
-
-import s from './Vector.module.scss';
-
-const mapData = {
-  map: 'world_mill_en',
-  scaleColors: ['#C8EEFF', '#0071A4'],
-  normalizeFunction: 'polynomial',
-  focusOn: {
-    x: 0.5359,
-    y: 0.4,
-    scale: 2.5,
-  },
-  zoomMin: 0.85,
-  hoverColor: false,
-  regionStyle: {
-    initial: {
-      fill: '#bdbdbd',
-      'fill-opacity': 1,
-      stroke: '#bdbdbd',
-      'stroke-width': 0,
-      'stroke-opacity': 0,
-    },
-    hover: {
-      'fill-opacity': 0.8,
-    },
-  },
-  markerStyle: {
-    initial: {
-      fill: '#dd5826',
-      stroke: '#c54e22',
-      'fill-opacity': 1,
-      'stroke-width': 4,
-      'stroke-opacity': 0.2,
-      r: 5,
-    },
-    hover: {
-      stroke: 'black',
-      'stroke-width': 5,
-    },
-  },
-  backgroundColor: '#eee',
-  markers: [
-    { latLng: [41.90, 12.45], name: 'Vatican City' },
-    { latLng: [43.73, 7.41], name: 'Monaco' },
-    { latLng: [-0.52, 166.93], name: 'Nauru' },
-    { latLng: [-8.51, 179.21], name: 'Tuvalu' },
-    { latLng: [43.93, 12.46], name: 'San Marino' },
-    { latLng: [47.14, 9.52], name: 'Liechtenstein' },
-    { latLng: [7.11, 171.06], name: 'Marshall Islands' },
-    { latLng: [17.3, -62.73], name: 'Saint Kitts and Nevis' },
-    { latLng: [3.2, 73.22], name: 'Maldives' },
-    { latLng: [35.88, 14.5], name: 'Malta' },
-    { latLng: [12.05, -61.75], name: 'Grenada' },
-    { latLng: [13.16, -61.23], name: 'Saint Vincent and the Grenadines' },
-    { latLng: [13.16, -59.55], name: 'Barbados' },
-    { latLng: [17.11, -61.85], name: 'Antigua and Barbuda' },
-    { latLng: [-4.61, 55.45], name: 'Seychelles' },
-    { latLng: [7.35, 134.46], name: 'Palau' },
-    { latLng: [42.5, 1.51], name: 'Andorra' },
-    { latLng: [14.01, -60.98], name: 'Saint Lucia' },
-    { latLng: [6.91, 158.18], name: 'Federated States of Micronesia' },
-    { latLng: [1.3, 103.8], name: 'Singapore' },
-    { latLng: [1.46, 173.03], name: 'Kiribati' },
-    { latLng: [-21.13, -175.2], name: 'Tonga' },
-    { latLng: [15.3, -61.38], name: 'Dominica' },
-    { latLng: [-20.2, 57.5], name: 'Mauritius' },
-    { latLng: [26.02, 50.55], name: 'Bahrain' },
-    { latLng: [0.33, 6.73], name: 'S?o Tom? and Pr?ncipe' },
-  ],
-};
-
-class VectorMap extends React.Component {
-
-  componentDidMount() {
-    $(this.vectorMap).vectorMap(mapData);
-  }
-
-  render() {
-    return (
-      <div>
-        <div
-          className={`${s.contentMap} vector-map`} ref={(r) => {
-            this.vectorMap = r;
-          }}
-        />
-        <header className="page-title">
-          <h1 className="m-0 mb-sm">Vector <span className="fw-semi-bold">Maps</span></h1>
-          <p className="page-title fs-sm m-0">
-            <span className="fw-semi-bold">1 656 843</span>
-            <span className="ml-xs circle bg-gray"><i className="text-gray-lighter fa fa-circle" /></span>
-          </p>
-        </header>
-      </div>);
-  }
-
-}
-
-export default VectorMap;

-@import '../../../../styles/app';
-
-.contentMap {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-
-  + :global(.page-title) {
-    position: relative;
-    z-index: 2;
-  }
-}

-{
-  "name": "Vector",
-  "version": "0.0.0",
-  "main": "./Vector.js",
-  "private": true
-}

-import React from 'react';
-import cx from 'classnames';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  Row,
-  Col,
-  Input,
-  Label,
-  Form,
-  FormGroup,
-} from 'reactstrap';
-import Widget from '../../../components/Widget';
-
-import p19 from '../../../images/pictures/19.jpg';
-import a5 from '../../../images/people/a5.jpg';
-import a1 from '../../../images/people/a1.jpg';
-import a3 from '../../../images/people/a3.jpg';
-import avatar from '../../../images/avatar.png';
-
-import s from './Profile.module.scss';
-
-const Profile = () => (
-  <div className={s.root}>
-    <Breadcrumb>
-      <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
-      <BreadcrumbItem active>Profile</BreadcrumbItem>
-    </Breadcrumb>
-    <h1 className="page-title">User - <span className="fw-semi-bold">Profile</span>
-    </h1>
-
-    <Row>
-      <Col lg={6} xs={12}>
-        <Widget>
-          <div className="widget-top-overflow text-white">
-            <div className="height-250 overflow-hidden">
-              <img className="img-fluid" src={p19} alt="..." />
-            </div>
-            <button className="btn btn-outline btn-sm mb-2">
-              <i className="fa fa-twitter mr-2" />
-              Follow
-            </button>
-          </div>
-          <Row>
-            <Col md={5} xs={12} className="text-center">
-              <div className={s.profileContactContainer}>
-                <span className="thumb-xl mb-3">
-                  <img className={[s.profileAvatar, 'rounded-circle'].join(' ')} src={a5} alt="..." />
-                </span>
-                <h5 className="fw-normal">Adam <span className="fw-semi-bold">Johns</span></h5>
-                <p>UI/UX designer</p>
-                <button className="btn btn-danger btn-sm mb-3">
-                  &nbsp;Send
-                  <i className="fa fa-envelope ml-2" />&nbsp;
-                </button>
-                <div>
-                  <ul className={cx(s.profileContacts, 'mt-sm')}>
-                    <li><i className="fa fa-lg fa-phone fa-fw mr-2" /><button className="btn-link"> +375 29 555-55-55</button></li>
-                    <li><i className="fa fa-lg fa-envelope fa-fw mr-2" /><button className="btn-link"> psmith@example.com</button></li>
-                    <li><i className="fa fa-lg fa-map-marker fa-fw mr-2" /><button className="btn-link"> Minsk, Belarus</button></li>
-                  </ul>
-                </div>
-              </div>
-            </Col>
-            <Col md={7} xs={12}>
-              <div className="stats-row mt-3">
-                <div className={[s.profileStat, 'stat-item'].join(' ')}>
-                  <p className={[s.profileStatValue, 'value text-right'].join(' ')}>251</p>
-                  <h6 className="name">Posts</h6>
-                </div>
-                <div className={[s.profileStat, 'stat-item'].join(' ')}>
-                  <p className={[s.profileStatValue, 'value text-right'].join(' ')}>9.38%</p>
-                  <h6 className="name">Conversion</h6>
-                </div>
-                <div className={[s.profileStat, 'stat-item'].join(' ')}>
-                  <p className={[s.profileStatValue, 'value text-right'].join(' ')}>842</p>
-                  <h6 className="name">Followers</h6>
-                </div>
-              </div>
-              <p>
-                <span className="badge badge-warning rounded-0"> UI/UX </span>
-                <span className="badge badge-danger rounded-0 ml-2"> Web Design </span>
-                <span className="badge badge-default rounded-0 ml-2"> Mobile Apps </span>
-              </p>
-              <p className="lead mt-xlg">
-                My name is Adam Johns and here is my new Sing user profile page.
-              </p>
-              <p className="text-muted">
-                I love reading people&apos;s summaries page especially those who are in the same industry as me.
-                Sometimes it&apos;s much easier to find your concentration during the night.
-              </p>
-            </Col>
-          </Row>
-        </Widget>
-      </Col>
-      <Col lg={6} xs={12}>
-        <section className="activities">
-          <h2 className="ml-3">Activities</h2>
-          <section className={s.event}>
-            <header>
-              <span className={s.eventAvatar}>
-                <img className="rounded-circle" src={a5} alt="..." />
-              </span>
-              <h5 className={s.eventTitle}><button className="btn-link">Bob Nilson</button> <small><button className="btn-link">@nils</button></small></h5>
-              <p className={s.eventTimestamp}>February 22, 2014 at 01:59 PM</p>
-            </header>
-
-            <div className={s.eventBody}>
-              There is no such thing as maturity. There is instead an ever-evolving process of maturing.
-              Because when there is a maturity, there is ...
-            </div>
-            <footer className={s.eventFooter}>
-              <ul className="post-links">
-                <li><button className="btn-link">1 hour</button></li>
-                <li><button className="btn-link"><span className="text-danger"><i className="fa fa-heart" /> Like</span></button></li>
-                <li><button className="btn-link">Comment</button></li>
-              </ul>
-            </footer>
-          </section>
-          <section className={s.event}>
-            <header>
-              <h5 className={s.eventTitle}><button className="btn-link">Jessica Smith</button> <small>@jess</small></h5>
-              <p className={s.eventTimestamp}>February 22, 2014 at 01:59 PM</p>
-            </header>
-            <div className={s.eventBody}>
-              Check out this awesome photo I made in Italy last summer. Seems it was lost somewhere deep inside
-              my brand new HDD 40TB. Thanks god I found it!
-            </div>
-            <footer className={s.eventFooter}>
-              <div className="clearfix">
-                <ul className="post-links mt-sm pull-left">
-                  <li><button className="btn-link">1 hour</button></li>
-                  <li><button className="btn-link"><span className="text-danger"><i className="fa fa-heart-o" /> Like</span></button></li>
-                  <li><button className="btn-link">Comment</button></li>
-                </ul>
-
-                <span className="thumb thumb-sm pull-right">
-                  <button className="btn-link">
-                    <img className="rounded-circle" alt="..." src={a1} />
-                  </button>
-                </span>
-                <span className="thumb thumb-sm pull-right">
-                  <button className="btn-link"><img className="rounded-circle" alt="..." src={a5} /></button>
-                </span>
-                <span className="thumb thumb-sm pull-right">
-                  <button className="btn-link"><img className="rounded-circle" alt="..." src={a3} /></button>
-                </span>
-              </div>
-              <ul className="post-comments mt-sm">
-                <li>
-                  <span className="thumb-xs avatar pull-left mr-sm">
-                    <img className="rounded-circle" src={a1} alt="..." />
-                  </span>
-                  <div className="comment-body">
-                    <h6 className="author fs-sm fw-semi-bold">Ignacio Abad <small>6 mins ago</small></h6>
-                    <p>Hey, have you heard anything about that?</p>
-                  </div>
-                </li>
-                <li>
-                  <span className="thumb-xs avatar pull-left mr-sm">
-                    <img className="rounded-circle" src={avatar} alt="..." />
-                  </span>
-                  <div className="comment-body">
-                    <input className="form-control form-control-sm" type="text" placeholder="Write your comment..." />
-                  </div>
-                </li>
-              </ul>
-            </footer>
-          </section>
-          <Form className="mt" action="#">
-            <FormGroup className="mb-2">
-              <Label className="sr-only" for="new-event">New event</Label>
-              <Input type="textarea" id="new-event" placeholder="Post something..." rows="3" />
-            </FormGroup>
-            <div className="btn-toolbar">
-              <div className="btn-group">
-                <button className="btn btn-sm btn-default">
-                  <i className="fa fa-camera fa-lg" />
-                </button>
-                <button className="btn btn-sm btn-default">
-                  <i className="fa fa-map-marker fa-lg" />
-                </button>
-              </div>
-              <button type="submit" className="btn btn-danger btn-sm ml-auto">Post</button>
-            </div>
-          </Form>
-        </section>
-      </Col>
-    </Row>
-  </div>
-);
-
-export default Profile;

-@import '../../../styles/app';
-
-.root {
-  // some styles
-}
-
-.profileContactContainer {
-  margin-top: -75px;
-}
-
-.profileContacts {
-  @include list-unstyled();
-
-  display: inline-block;
-  text-align: left;
-
-  > li {
-    margin-bottom: $spacer / 2;
-  }
-
-  > li > a {
-    color: lighten($text-color, 30%);
-    text-decoration: none;
-
-    @include hover-focus {
-      color: $text-color;
-    }
-  }
-}
-
-.profileAvatar {
-  border: 3px solid $white;
-}
-
-.profileStat {
-  border-left: none !important;
-  padding-right: 0 !important;
-}
-
-.profileStatValue {
-  font-size: 28px;
-  font-weight: $font-weight-base !important;
-  margin-bottom: 0;
-}
-
-.event {
-  background: $white;
-  border-radius: $border-radius;
-  padding: 20px 20px 0;
-  position: relative;
-  margin-bottom: $spacer;
-  box-shadow: var(--widget-shadow);
-}
-
-.eventTitle {
-  margin-bottom: 2px;
-  font-weight: $font-weight-semi-bold;
-
-  a {
-    text-decoration: none;
-    color: #7ca9dd;
-  }
-
-  small > a {
-    color: $text-muted;
-  }
-}
-
-.eventAvatar {
-  float: left;
-  margin-right: $spacer;
-}
-
-.eventAvatar > img {
-  width: 34px;
-}
-
-.eventBody {
-  font-size: 0.9rem;
-  margin-bottom: $spacer;
-}
-
-.eventFooter {
-  background-color: $gray-100;
-  margin: 20px -20px 0;
-  padding: 10px 20px;
-}
-
-.eventTimestamp {
-  color: $text-muted;
-}

-{
-  "name": "profile",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Profile.js"
-}

-import React from 'react';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  Progress,
-  Dropdown,
-  DropdownMenu,
-  DropdownToggle,
-  DropdownItem,
-} from 'reactstrap';
-
-import {
-  BootstrapTable,
-  TableHeaderColumn,
-} from 'react-bootstrap-table';
-
-import ReactTable from 'react-table';
-
-import { reactTableData, reactBootstrapTableData } from './data';
-import Widget from '../../../../components/Widget';
-import s from './Dynamic.modules.scss';
-
-class Dynamic extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      reactTable: reactTableData(),
-      reactBootstrapTable: reactBootstrapTableData(),
-    };
-  }
-
-  renderSizePerPageDropDown = (props) => {
-    const limits = [];
-    props.sizePerPageList.forEach((limit) => {
-      limits.push(<DropdownItem key={limit} onClick={() => props.changeSizePerPage(limit)}>{ limit }</DropdownItem>);
-    });
-
-    return (
-      <Dropdown isOpen={props.open} toggle={props.toggleDropDown}>
-        <DropdownToggle color="default" caret>
-          { props.currSizePerPage }
-        </DropdownToggle>
-        <DropdownMenu>
-          { limits }
-        </DropdownMenu>
-      </Dropdown>
-    );
-  };
-
-  render() {
-    const options = {
-      sizePerPage: 10,
-      paginationSize: 3,
-      sizePerPageDropDown: this.renderSizePerPageDropDown,
-    };
-
-    function infoFormatter(cell) {
-      return (
-        <div>
-          <small>
-            Type:&nbsp;<span className="fw-semi-bold">{cell.type}</span>
-          </small>
-          <br />
-          <small>
-            Dimensions:&nbsp;<span className="fw-semi-bold">{cell.dimensions}</span>
-          </small>
-        </div>
-      );
-    }
-
-    function descriptionFormatter(cell) {
-      return (
-        <button className="btn-link">
-          {cell}
-        </button>
-      );
-    }
-
-    function progressFormatter(cell) {
-      return (
-        <Progress style={{ height: '15px' }} color={cell.type} value={cell.progress} />
-      );
-    }
-
-    function progressSortFunc(a, b, order) {
-      if (order === 'asc') {
-        return a.status.progress - b.status.progress;
-      }
-      return b.status.progress - a.status.progress;
-    }
-
-    function dateSortFunc(a, b, order) {
-      if (order === 'asc') {
-        return new Date(a.date).getTime() - new Date(b.date).getTime();
-      }
-      return new Date(b.date).getTime() - new Date(a.date).getTime();
-    }
-
-    return (
-      <div>
-        <Breadcrumb>
-          <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
-          <BreadcrumbItem active>Tables Dynamic</BreadcrumbItem>
-        </Breadcrumb>
-        <h2 className="page-title">Tables - <span className="fw-semi-bold">Dynamic</span></h2>
-        <Widget title={<h4>The <span className="fw-semi-bold">React</span> Way</h4>} collapse close>
-          <p>
-            Fully customizable Table. Built with <a href="https://allenfang.github.io/react-bootstrap-table/" target="_blank" rel="noopener noreferrer">react-bootstrap-table</a>
-          </p>
-          <BootstrapTable data={this.state.reactBootstrapTable} version="4" pagination options={options} search tableContainerClass={`table-striped table-hover ${s.bootstrapTable}`}>
-            <TableHeaderColumn className="width-50" columnClassName="width-50" dataField="id" isKey>
-              <span className="fs-sm">ID</span>
-            </TableHeaderColumn>
-            <TableHeaderColumn dataField="name" dataSort>
-              <span className="fs-sm">Name</span>
-            </TableHeaderColumn>
-            <TableHeaderColumn className="d-none d-md-table-cell" columnClassName="d-none d-md-table-cell" dataField="info" dataFormat={infoFormatter}>
-              <span className="fs-sm">Info</span>
-            </TableHeaderColumn>
-            <TableHeaderColumn className="d-none d-md-table-cell" columnClassName="d-none d-md-table-cell" dataField="description" dataFormat={descriptionFormatter}>
-              <span className="fs-sm">Description</span>
-            </TableHeaderColumn>
-            <TableHeaderColumn className="d-none d-md-table-cell" columnClassName="d-none d-md-table-cell" dataField="date" dataSort sortFunc={dateSortFunc}>
-              <span className="fs-sm">Date</span>
-            </TableHeaderColumn>
-            <TableHeaderColumn className="width-150" columnClassName="width-150" dataField="status" dataSort dataFormat={progressFormatter} sortFunc={progressSortFunc}>
-              <span className="fs-sm">Status</span>
-            </TableHeaderColumn>
-          </BootstrapTable>
-        </Widget>
-        <Widget title={<h4>React <span className="fw-semi-bold">Table</span></h4>} collapse close>
-          <p>
-            Simple table extension with sorting, filtering and pagination for React apps. Built with <a href="https://react-table.js.org/" target="_blank" rel="noopener noreferrer">react-table</a>
-          </p>
-          <ReactTable
-            data={this.state.reactTable}
-            filterable
-            columns={[
-              {
-                Header: 'NAME',
-                accessor: 'name',
-              },
-              {
-                Header: 'POSITION',
-                accessor: 'position',
-              },
-              {
-                Header: 'OFFICE',
-                accessor: 'office',
-              },
-              {
-                Header: 'EXT',
-                accessor: 'ext',
-              },
-              {
-                Header: 'START DATE',
-                accessor: 'startDate',
-              },
-              {
-                Header: 'SALARY',
-                accessor: 'salary',
-              },
-            ]}
-            defaultPageSize={10}
-            className="-striped -highlight"
-          />
-        </Widget>
-      </div>
-    );
-  }
-
-}
-
-export default Dynamic;

-@import '../../../../styles/app';
-
-.bootstrapTable {
-  border: none;
-
-  :global .table {
-    thead,
-    tbody {
-      th,
-      td {
-        border-right: none;
-        border-left: none;
-      }
-    }
-
-    thead th {
-      background: transparent;
-    }
-  }
-}

-export function reactTableData() {
-  return [
-    {
-      name: 'Victoria Cantrell',
-      position: 'Integer Corporation',
-      office: 'Croatia',
-      ext: '0839',
-      startDate: '2015/08/19',
-      salary: 208.178,
-    }, {
-      name: 'Pearl Crosby',
-      position: 'In PC',
-      office: 'Cambodia',
-      ext: '8262',
-      startDate: '2014/10/08',
-      salary: 114.367,
-    }, {
-      name: 'Colette Foley',
-      position: 'Lorem Inc.',
-      office: 'Korea, North',
-      ext: '8968',
-      startDate: '2015/07/19',
-      salary: 721.473,
-    }, {
-      name: 'Anastasia Shaffer',
-      position: 'Dolor Nulla Semper LLC',
-      office: 'Suriname',
-      ext: '7980',
-      startDate: '2015/04/20',
-      salary: 264.620,
-    }, {
-      name: 'Gabriel Castro',
-      position: 'Sed Limited',
-      office: 'Bahrain',
-      ext: '0757',
-      startDate: '2015/03/04',
-      salary: 651.350,
-    }, {
-      name: 'Cherokee Ware',
-      position: 'Tincidunt LLC',
-      office: 'United Kingdom (Great Britain)',
-      ext: '3995',
-      startDate: '2015/06/17',
-      salary: 666.259,
-    }, {
-      name: 'Barry Moss',
-      position: 'Sociis Industries',
-      office: 'Western Sahara',
-      ext: '6697',
-      startDate: '2015/08/13',
-      salary: 541.631,
-    }, {
-      name: 'Maryam Tucker',
-      position: 'Elit Pede Malesuada Inc.',
-      office: 'Brazil',
-      ext: '5203',
-      startDate: '2014/10/02',
-      salary: 182.294,
-    }, {
-      name: 'Constance Clayton',
-      position: 'Auctor Velit Aliquam LLP',
-      office: 'United Arab Emirates',
-      ext: '4204',
-      startDate: '2015/08/01',
-      salary: 218.597,
-    }, {
-      name: 'Rogan Tucker',
-      position: 'Arcu Vestibulum Ante Associates',
-      office: 'Jersey',
-      ext: '0885',
-      startDate: '2015/01/04',
-      salary: 861.632,
-    }, {
-      name: 'Emery Mcdowell',
-      position: 'Gravida Company',
-      office: 'New Zealand',
-      ext: '3951',
-      startDate: '2015/06/02',
-      salary: 413.568,
-    }, {
-      name: 'Yael Greer',
-      position: 'Orci Limited',
-      office: 'Madagascar',
-      ext: '1416',
-      startDate: '2014/12/04',
-      salary: 121.831,
-    }, {
-      name: 'Jared Burgess',
-      position: 'Auctor Incorporated',
-      office: 'Burundi',
-      ext: '4673',
-      startDate: '2015/01/12',
-      salary: 62.243,
-    }, {
-      name: 'Sharon Campbell',
-      position: 'Elit Curabitur Sed Consulting',
-      office: 'Comoros',
-      ext: '6274',
-      startDate: '2014/09/14',
-      salary: 200.854,
-    }, {
-      name: 'Yeo Church',
-      position: 'Donec Vitae Erat PC',
-      office: 'Saudi Arabia',
-      ext: '0269',
-      startDate: '2015/06/07',
-      salary: 581.193,
-    }, {
-      name: 'Kylie Barlow',
-      position: 'Fermentum Risus Corporation',
-      office: 'Papua New Guinea',
-      ext: '2010',
-      startDate: '2014/12/03',
-      salary: 418.115,
-    }, {
-      name: 'Nell Leonard',
-      position: 'Vestibulum Consulting',
-      office: 'Saudi Arabia',
-      ext: '4839',
-      startDate: '2015/05/29',
-      salary: 466.201,
-    }, {
-      name: 'Brandon Fleming',
-      position: 'Donec Egestas Associates',
-      office: 'Poland',
-      ext: '0622',
-      startDate: '2015/01/22',
-      salary: 800.011,
-    }, {
-      name: 'Inga Pena',
-      position: 'Et Magnis Dis Limited',
-      office: 'Belgium',
-      ext: '8140',
-      startDate: '2015/05/18',
-      salary: 564.245,
-    }, {
-      name: 'Arden Russo',
-      position: 'Est Tempor Bibendum Corp.',
-      office: 'Dominican Republic',
-      ext: '6774',
-      startDate: '2015/07/23',
-      salary: 357.222,
-    }, {
-      name: 'Liberty Gallegos',
-      position: 'Nec Diam LLC',
-      office: 'Ghana',
-      ext: '9266',
-      startDate: '2015/06/18',
-      salary: 554.375,
-    }, {
-      name: 'Dennis York',
-      position: 'Nullam Suscipit Foundation',
-      office: 'Namibia',
-      ext: '3133',
-      startDate: '2015/03/20',
-      salary: 90.417,
-    }, {
-      name: 'Petra Chandler',
-      position: 'Pede Nonummy Inc.',
-      office: 'Namibia',
-      ext: '3367',
-      startDate: '2015/03/26',
-      salary: 598.915,
-    }, {
-      name: 'Aurelia Marshall',
-      position: 'Donec Consulting',
-      office: 'Nicaragua',
-      ext: '2690',
-      startDate: '2015/08/18',
-      salary: 201.680,
-    }, {
-      name: 'Rose Carter',
-      position: 'Enim Consequat Purus Industries',
-      office: 'Morocco',
-      ext: '0619',
-      startDate: '2015/03/06',
-      salary: 220.187,
-    }, {
-      name: 'Denton Atkins',
-      position: 'Non Vestibulum PC',
-      office: 'Mali',
-      ext: '5806',
-      startDate: '2015/04/19',
-      salary: 324.588,
-    }, {
-      name: 'Germaine Osborn',
-      position: 'Tristique Aliquet PC',
-      office: 'Lesotho',
-      ext: '4469',
-      startDate: '2015/01/19',
-      salary: 351.108,
-    }, {
-      name: 'Nell Butler',
-      position: 'Sit Amet Dapibus Industries',
-      office: 'Cuba',
-      ext: '7860',
-      startDate: '2015/01/06',
-      salary: 230.072,
-    }, {
-      name: 'Brent Stein',
-      position: 'Eu Augue Porttitor LLP',
-      office: 'Cyprus',
-      ext: '4697',
-      startDate: '2014/11/02',
-      salary: 853.413,
-    }, {
-      name: 'Alexandra Shaw',
-      position: 'Aenean Gravida Limited',
-      office: 'Uruguay',
-      ext: '1140',
-      startDate: '2015/05/16',
-      salary: 401.970,
-    }, {
-      name: 'Veronica Allison',
-      position: 'Aliquet Diam Sed Institute',
-      office: 'Samoa',
-      ext: '9966',
-      startDate: '2015/05/17',
-      salary: 79.193,
-    }, {
-      name: 'Katelyn Gamble',
-      position: 'Sed Associates',
-      office: 'Mauritius',
-      ext: '4767',
-      startDate: '2015/03/20',
-      salary: 484.299,
-    }, {
-      name: 'James Greer',
-      position: 'A Dui Incorporated',
-      office: 'Norway',
-      ext: '5517',
-      startDate: '2015/02/21',
-      salary: 333.518,
-    }, {
-      name: 'Cain Vasquez',
-      position: 'Nulla Facilisis Suspendisse Institute',
-      office: 'China',
-      ext: '3179',
-      startDate: '2015/05/27',
-      salary: 651.761,
-    }, {
-      name: 'Shaeleigh Barr',
-      position: 'Eleifend Cras Institute',
-      office: 'Ghana',
-      ext: '5904',
-      startDate: '2015/04/01',
-      salary: 627.095,
-    }, {
-      name: 'Baker Mckay',
-      position: 'Ut Sagittis Associates',
-      office: 'Isle of Man',
-      ext: '9840',
-      startDate: '2015/01/12',
-      salary: 742.247,
-    }, {
-      name: 'Jayme Pace',
-      position: 'Cras Eu Tellus Associates',
-      office: 'Bouvet Island',
-      ext: '4580',
-      startDate: '2015/08/12',
-      salary: 591.588,
-    }, {
-      name: 'Reuben Albert',
-      position: 'Lobortis Institute',
-      office: 'Zambia',
-      ext: '8725',
-      startDate: '2015/04/04',
-      salary: 791.408,
-    }, {
-      name: 'Idola Burns',
-      position: 'Non Industries',
-      office: 'Myanmar',
-      ext: '3201',
-      startDate: '2015/06/24',
-      salary: 142.906,
-    }, {
-      name: 'Laura Macias',
-      position: 'Phasellus Inc.',
-      office: 'Mauritania',
-      ext: '2033',
-      startDate: '2014/11/21',
-      salary: 226.591,
-    }, {
-      name: 'Nichole Salas',
-      position: 'Duis PC',
-      office: 'Madagascar',
-      ext: '4397',
-      startDate: '2015/01/18',
-      salary: 234.196,
-    }, {
-      name: 'Hunter Walter',
-      position: 'Ullamcorper Duis Cursus Foundation',
-      office: 'Brazil',
-      ext: '2227',
-      startDate: '2015/02/28',
-      salary: 655.052,
-    }, {
-      name: 'Asher Rich',
-      position: 'Mauris Ipsum LLP',
-      office: 'Paraguay',
-      ext: '7288',
-      startDate: '2015/08/08',
-      salary: 222.946,
-    }, {
-      name: 'Angela Carlson',
-      position: 'Donec Tempor Institute',
-      office: 'Papua New Guinea',
-      ext: '5416',
-      startDate: '2015/02/12',
-      salary: 562.194,
-    }, {
-      name: 'James Dorsey',
-      position: 'Ipsum Leo Associates',
-      office: 'Congo (Brazzaville)',
-      ext: '6019',
-      startDate: '2015/01/10',
-      salary: 629.925,
-    }, {
-      name: 'Wesley Cobb',
-      position: 'Nunc Est Incorporated',
-      office: 'Australia',
-      ext: '6466',
-      startDate: '2015/01/30',
-      salary: 343.476,
-    }, {
-      name: 'Meghan Stephens',
-      position: 'Interdum PC',
-      office: 'Turkey',
-      ext: '8001',
-      startDate: '2014/10/11',
-      salary: 469.305,
-    }, {
-      name: 'Bertha Herrera',
-      position: 'Amet Limited',
-      office: 'Kenya',
-      ext: '4799',
-      startDate: '2014/11/22',
-      salary: 56.606,
-    }, {
-      name: 'Karina Key',
-      position: 'Quisque Varius Nam Company',
-      office: 'France',
-      ext: '3907',
-      startDate: '2015/03/26',
-      salary: 314.260,
-    }, {
-      name: 'Uriel Carson',
-      position: 'Penatibus PC',
-      office: 'Venezuela',
-      ext: '5902',
-      startDate: '2015/01/07',
-      salary: 106.335,
-    }, {
-      name: 'Mira Baird',
-      position: 'Felis Orci PC',
-      office: 'Niue',
-      ext: '4189',
-      startDate: '2015/08/25',
-      salary: 515.671,
-    }, {
-      name: 'Ursula Parrish',
-      position: 'Ac Corporation',
-      office: 'Macao',
-      ext: '4771',
-      startDate: '2015/06/30',
-      salary: 72.295,
-    }, {
-      name: 'Josephine Sykes',
-      position: 'Blandit Congue Limited',
-      office: 'Holy See (Vatican City State)',
-      ext: '4684',
-      startDate: '2014/12/22',
-      salary: 694.656,
-    }, {
-      name: 'Maggie Sims',
-      position: 'Vulputate Posuere Industries',
-      office: 'Sudan',
-      ext: '6482',
-      startDate: '2014/11/22',
-      salary: 363.743,
-    }, {
-      name: 'Rogan Fuentes',
-      position: 'Vestibulum Accumsan Neque Company',
-      office: 'Jersey',
-      ext: '4837',
-      startDate: '2015/07/29',
-      salary: 606.004,
-    }, {
-      name: 'Maya Haney',
-      position: 'Ac Foundation',
-      office: 'Falkland Islands',
-      ext: '5752',
-      startDate: '2015/09/03',
-      salary: 745.500,
-    }, {
-      name: 'Aquila Battle',
-      position: 'Sociis Natoque Penatibus Foundation',
-      office: 'Azerbaijan',
-      ext: '8470',
-      startDate: '2015/03/06',
-      salary: 582.265,
-    }, {
-      name: 'Connor Coleman',
-      position: 'Orci Lacus Vestibulum Foundation',
-      office: 'Croatia',
-      ext: '6217',
-      startDate: '2014/10/21',
-      salary: 416.958,
-    }, {
-      name: 'Charity Thomas',
-      position: 'Convallis Ligula Donec Inc.',
-      office: 'Benin',
-      ext: '6240',
-      startDate: '2015/07/12',
-      salary: 540.999,
-    }, {
-      name: 'Blythe Powers',
-      position: 'Amet Orci Limited',
-      office: 'Falkland Islands',
-      ext: '5608',
-      startDate: '2015/01/23',
-      salary: 480.067,
-    }, {
-      name: 'Adria Battle',
-      position: 'Ornare Lectus Incorporated',
-      office: 'British Indian Ocean Territory',
-      ext: '7419',
-      startDate: '2015/05/28',
-      salary: 257.937,
-    }, {
-      name: 'Melanie Mcintyre',
-      position: 'Nunc Corp.',
-      office: 'Mongolia',
-      ext: '4326',
-      startDate: '2015/01/06',
-      salary: 359.737,
-    }, {
-      name: 'Keely Bauer',
-      position: 'Nec Tempus Institute',
-      office: 'Somalia',
-      ext: '8372',
-      startDate: '2015/03/09',
-      salary: 99.718,
-    }, {
-      name: 'Noelani Strong',
-      position: 'Nec LLP',
-      office: 'Iran',
-      ext: '0049',
-      startDate: '2015/08/24',
-      salary: 480.718,
-    }, {
-      name: 'Jeanette Henderson',
-      position: 'Eu Elit Nulla Corporation',
-      office: 'Italy',
-      ext: '7586',
-      startDate: '2015/06/19',
-      salary: 253.772,
-    }, {
-      name: 'Candace Huber',
-      position: 'Sed Institute',
-      office: 'Uganda',
-      ext: '7183',
-      startDate: '2015/06/16',
-      salary: 388.879,
-    }, {
-      name: 'Bethany Potter',
-      position: 'Vivamus Nibh Dolor Incorporated',
-      office: 'Puerto Rico',
-      ext: '3354',
-      startDate: '2014/11/12',
-      salary: 747.310,
-    }, {
-      name: 'Whoopi Burks',
-      position: 'Justo Inc.',
-      office: 'Fiji',
-      ext: '2185',
-      startDate: '2014/09/24',
-      salary: 803.037,
-    }, {
-      name: 'Sheila Long',
-      position: 'Diam Associates',
-      office: 'Sao Tome and Principe',
-      ext: '7760',
-      startDate: '2014/12/21',
-      salary: 674.379,
-    }, {
-      name: 'Sonya Church',
-      position: 'Laoreet Institute',
-      office: 'Grenada',
-      ext: '8920',
-      startDate: '2015/06/03',
-      salary: 625.147,
-    }, {
-      name: 'Shaine Forbes',
-      position: 'Eu Arcu LLP',
-      office: 'Cyprus',
-      ext: '2369',
-      startDate: '2015/01/18',
-      salary: 208.100,
-    }, {
-      name: 'Alexandra Patrick',
-      position: 'Ligula Donec Inc.',
-      office: 'Viet Nam',
-      ext: '8531',
-      startDate: '2015/04/09',
-      salary: 104.063,
-    }, {
-      name: 'Patience Vincent',
-      position: 'Sem Molestie Associates',
-      office: 'Philippines',
-      ext: '8888',
-      startDate: '2015/07/04',
-      salary: 673.556,
-    }, {
-      name: 'Evelyn Smith',
-      position: 'Fusce Industries',
-      office: 'Togo',
-      ext: '5051',
-      startDate: '2015/08/15',
-      salary: 737.284,
-    }, {
-      name: 'Kieran Gonzalez',
-      position: 'Non Corp.',
-      office: 'Equatorial Guinea',
-      ext: '4834',
-      startDate: '2015/08/24',
-      salary: 90.195,
-    }, {
-      name: 'Molly Oneil',
-      position: 'Non Dui Consulting',
-      office: 'Belize',
-      ext: '7501',
-      startDate: '2014/10/28',
-      salary: 140.767,
-    }, {
-      name: 'Nigel Davenport',
-      position: 'Ullamcorper Velit In Industries',
-      office: 'Vanuatu',
-      ext: '0976',
-      startDate: '2015/03/16',
-      salary: 70.536,
-    }, {
-      name: 'Thor Young',
-      position: 'Malesuada Consulting',
-      office: 'French Southern Territories',
-      ext: '0211',
-      startDate: '2015/01/28',
-      salary: 75.501,
-    }, {
-      name: 'Finn Delacruz',
-      position: 'Lorem Industries',
-      office: 'Cocos (Keeling) Islands',
-      ext: '2980',
-      startDate: '2014/12/11',
-      salary: 754.967,
-    }, {
-      name: 'Lane Henderson',
-      position: 'Pede Foundation',
-      office: 'Kazakhstan',
-      ext: '1446',
-      startDate: '2015/07/02',
-      salary: 842.050,
-    }, {
-      name: 'Shea Potter',
-      position: 'Curabitur Limited',
-      office: 'Timor-Leste',
-      ext: '4654',
-      startDate: '2015/05/07',
-      salary: 263.629,
-    }, {
-      name: 'Brynn Yang',
-      position: 'Ut Limited',
-      office: 'Mayotte',
-      ext: '4668',
-      startDate: '2015/01/17',
-      salary: 74.292,
-    }, {
-      name: 'Kylan Fuentes',
-      position: 'Sapien Aenean Associates',
-      office: 'Brazil',
-      ext: '6623',
-      startDate: '2014/12/28',
-      salary: 108.632,
-    }, {
-      name: 'Lionel Mcbride',
-      position: 'Ipsum PC',
-      office: 'Portugal',
-      ext: '3978',
-      startDate: '2015/07/11',
-      salary: 34.244,
-    }, {
-      name: 'Paul Lucas',
-      position: 'Eget LLP',
-      office: 'Nicaragua',
-      ext: '8890',
-      startDate: '2014/09/30',
-      salary: 690.834,
-    }, {
-      name: 'Lareina Williamson',
-      position: 'Imperdiet Ullamcorper Ltd',
-      office: 'Cocos (Keeling) Islands',
-      ext: '9489',
-      startDate: '2014/12/01',
-      salary: 603.498,
-    }, {
-      name: 'Amy Acevedo',
-      position: 'Id Institute',
-      office: 'Cook Islands',
-      ext: '5592',
-      startDate: '2015/02/04',
-      salary: 125.165,
-    }, {
-      name: 'Nomlanga Silva',
-      position: 'Eget LLC',
-      office: 'Belize',
-      ext: '3110',
-      startDate: '2015/01/31',
-      salary: 268.509,
-    }, {
-      name: 'Amena Stone',
-      position: 'Enim Incorporated',
-      office: 'Guinea',
-      ext: '1211',
-      startDate: '2014/09/23',
-      salary: 214.381,
-    }, {
-      name: 'Danielle Coffey',
-      position: 'Feugiat Placerat Corp.',
-      office: 'Sao Tome and Principe',
-      ext: '8176',
-      startDate: '2015/06/17',
-      salary: 137.423,
-    }, {
-      name: 'Buffy Russell',
-      position: 'Lacus Quisque Ltd',
-      office: 'Ecuador',
-      ext: '6741',
-      startDate: '2014/10/17',
-      salary: 612.184,
-    }, {
-      name: 'Kaitlin Lamb',
-      position: 'Malesuada Fringilla Est Associates',
-      office: 'Algeria',
-      ext: '5054',
-      startDate: '2014/10/18',
-      salary: 327.367,
-    }, {
-      name: 'Leilani Yates',
-      position: 'Mus Proin LLC',
-      office: 'South Sudan',
-      ext: '1550',
-      startDate: '2015/05/27',
-      salary: 743.493,
-    }, {
-      name: 'Jemima Moon',
-      position: 'Phasellus Corp.',
-      office: 'South Georgia and The South Sandwich Islands',
-      ext: '7582',
-      startDate: '2015/05/21',
-      salary: 496.067,
-    }, {
-      name: 'Hiroko Schwartz',
-      position: 'Neque Institute',
-      office: 'Saint Vincent and The Grenadines',
-      ext: '9368',
-      startDate: '2015/03/13',
-      salary: 178.782,
-    }, {
-      name: 'Nathaniel Jensen',
-      position: 'Mi Tempor Limited',
-      office: 'Dominica',
-      ext: '8331',
-      startDate: '2014/12/05',
-      salary: 37.441,
-    }, {
-      name: 'Silas Sweeney',
-      position: 'Ultrices Institute',
-      office: 'Turkmenistan',
-      ext: '0746',
-      startDate: '2014/11/13',
-      salary: 152.980,
-    }, {
-      name: 'Jermaine Barry',
-      position: 'Dapibus Corporation',
-      office: 'Uzbekistan',
-      ext: '1545',
-      startDate: '2015/03/06',
-      salary: 409.463,
-    }, {
-      name: 'Tatiana Nichols',
-      position: 'Nec Diam Industries',
-      office: 'Cook Islands',
-      ext: '4395',
-      startDate: '2015/05/22',
-      salary: 51.155,
-    }, {
-      name: 'Rama Waller',
-      position: 'Sem Pellentesque LLC',
-      office: 'Andorra',
-      ext: '2973',
-      startDate: '2014/12/01',
-      salary: 223.227,
-    },
-  ];
-}
-
-export function reactBootstrapTableData() {
-  return [
-    {
-      id: '1',
-      name: 'Algerd',
-      info: {
-        type: 'JPEG',
-        dimensions: '200x150',
-      },
-      description: 'Palo Alto',
-      date: 'June 27, 2013',
-      status: {
-        progress: '29',
-        type: 'success',
-      },
-    },
-    {
-      id: '2',
-      name: 'Vitaut',
-      info: {
-        type: 'PNG',
-        dimensions: '6433x4522',
-      },
-      description: 'Vilnia',
-      date: 'January 1, 1442',
-      status: {
-        progress: '19',
-        type: 'danger',
-      },
-    },
-    {
-      id: '3',
-      name: 'Honar',
-      info: {
-        type: 'AVI',
-        dimensions: '1440x980',
-      },
-      description: 'Berlin',
-      date: 'August 6, 2013',
-      status: {
-        progress: '49',
-        type: 'bar-gray-light',
-      },
-    },
-    {
-      id: '4',
-      name: 'Jack',
-      info: {
-        type: 'PNG',
-        dimensions: '12x43',
-      },
-      description: 'San Francisco',
-      date: 'August 19, 2013',
-      status: {
-        progress: '69',
-      },
-    },
-    {
-      id: '5',
-      name: 'Leon',
-      info: {
-        type: 'MP4',
-        dimensions: '800x480',
-      },
-      description: 'Brasilia',
-      date: 'October 1, 2013',
-      status: {
-        progress: '9',
-        type: 'bar-gray-light',
-      },
-    },
-    {
-      id: '6',
-      name: 'Max',
-      info: {
-        type: 'TXT',
-        dimensions: '-',
-      },
-      description: 'Helsinki',
-      date: 'October 29, 2013',
-      status: {
-        progress: '38',
-        type: 'warning',
-      },
-    },
-    {
-      id: '7',
-      name: 'Pol',
-      info: {
-        type: 'MOV',
-        dimensions: '640x480',
-      },
-      description: 'Radashkovichi',
-      date: 'November 11, 2013',
-      status: {
-        progress: '83',
-        type: 'danger',
-      },
-    },
-    {
-      id: '8',
-      name: 'Chrishna',
-      info: {
-        type: 'DOC',
-        dimensions: '-',
-      },
-      description: 'Mumbai',
-      date: 'December 2, 2013',
-      status: {
-        progress: '40',
-        type: 'info',
-      },
-    },
-    {
-      id: '9',
-      name: 'Leslie',
-      info: {
-        type: 'AVI',
-        dimensions: '4820x2140',
-      },
-      description: 'Singapore',
-      date: 'December 6, 2013',
-      status: {
-        progress: '18',
-        type: 'warning',
-      },
-    },
-    {
-      id: '10',
-      name: 'David',
-      info: {
-        type: 'XML',
-        dimensions: '-',
-      },
-      description: 'Portland',
-      date: 'December 13, 2013',
-      status: {
-        progress: '54',
-        type: 'bar-gray-light',
-      },
-    },
-    {
-      id: '11',
-      name: 'Andrej',
-      info: {
-        type: 'VOB',
-        dimensions: '6433x4522',
-      },
-      description: 'Minsk',
-      date: 'December 14, 2013',
-      status: {
-        progress: '25',
-      },
-    },
-    {
-      id: '12',
-      name: 'Julia',
-      info: {
-        type: 'JPEG',
-        dimensions: '40x40',
-      },
-      description: 'Hrodna',
-      date: 'July 9, 2012',
-      status: {
-        progress: '50',
-        type: 'warning',
-      },
-    },
-    {
-      id: '13',
-      name: 'Ihnat',
-      info: {
-        type: 'JAVA',
-        dimensions: '-',
-      },
-      description: 'Los Angeles',
-      date: 'August 2, 2012',
-      status: {
-        progress: '8',
-        type: 'success',
-      },
-    },
-    {
-      id: '14',
-      name: 'Abraham',
-      info: {
-        type: 'DOCX',
-        dimensions: '-',
-      },
-      description: 'Panama',
-      date: 'September 3, 2012',
-      status: {
-        progress: '80',
-        type: 'bar-gray-light',
-      },
-    },
-    {
-      id: '15',
-      name: 'Tomas',
-      info: {
-        type: 'JPEG',
-        dimensions: '1800x1420',
-      },
-      description: 'Amsterdam',
-      date: 'November 13, 2012',
-      status: {
-        progress: '10',
-        type: 'bar-gray-light',
-      },
-    },
-    {
-      id: '16',
-      name: 'Scott',
-      info: {
-        type: 'PNG',
-        dimensions: '240x460',
-      },
-      description: 'Sluck',
-      date: 'December 5, 2012',
-      status: {
-        progress: '93',
-      },
-    },
-    {
-      id: '17',
-      name: 'Pham',
-      info: {
-        type: 'MAIL',
-        dimensions: '-',
-      },
-      description: 'Tokyo',
-      date: 'December 8, 2012',
-      status: {
-        progress: '44',
-        type: 'danger',
-      },
-    },
-    {
-      id: '18',
-      name: 'Peter',
-      info: {
-        type: 'PNG',
-        dimensions: '8320x6400',
-      },
-      description: 'Cape Town',
-      date: 'December 29, 2012',
-      status: {
-        progress: '5',
-        type: 'bar-gray-light',
-      },
-    },
-    {
-      id: '19',
-      name: 'Uladz',
-      info: {
-        type: 'JPEG',
-        dimensions: '2200x1600',
-      },
-      description: 'Mahileu',
-      date: 'December 7, 2013',
-      status: {
-        progress: '0',
-        type: 'gray-light',
-      },
-    },
-  ];
-}

-{
-  "name": "dynamic",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Dynamic.js"
-}

-import React from 'react';
-import {
-  Row,
-  Col,
-  Table,
-  Progress,
-  Button,
-  UncontrolledButtonDropdown,
-  DropdownMenu,
-  DropdownToggle,
-  DropdownItem,
-  Input,
-  Label,
-  Badge,
-} from 'reactstrap';
-import { Sparklines, SparklinesBars } from 'react-sparklines';
-
-import Widget from '../../../../components/Widget';
-import s from './Static.modules.scss';
-
-class Static extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      tableStyles: [
-        {
-          id: 1,
-          picture: require('../../../../images/tables/1.png'), // eslint-disable-line global-require
-          description: 'Palo Alto',
-          info: {
-            type: 'JPEG',
-            dimensions: '200x150',
-          },
-          date: new Date('September 14, 2012'),
-          size: '45.6 KB',
-          progress: {
-            percent: 29,
-            colorClass: 'success',
-          },
-        },
-        {
-          id: 2,
-          picture: require('../../../../images/tables/2.png'), // eslint-disable-line global-require
-          description: 'The Sky',
-          info: {
-            type: 'PSD',
-            dimensions: '2400x1455',
-          },
-          date: new Date('November 14, 2012'),
-          size: '15.3 MB',
-          progress: {
-            percent: 33,
-            colorClass: 'warning',
-          },
-        },
-        {
-          id: 3,
-          picture: require('../../../../images/tables/3.png'), // eslint-disable-line global-require
-          description: 'Down the road',
-          label: {
-            colorClass: 'danger',
-            text: 'INFO!',
-          },
-          info: {
-            type: 'JPEG',
-            dimensions: '200x150',
-          },
-          date: new Date('September 14, 2012'),
-          size: '49.0 KB',
-          progress: {
-            percent: 38,
-            colorClass: 'inverse',
-          },
-        },
-        {
-          id: 4,
-          picture: require('../../../../images/tables/4.png'), // eslint-disable-line global-require
-          description: 'The Edge',
-          info: {
-            type: 'PNG',
-            dimensions: '210x160',
-          },
-          date: new Date('September 15, 2012'),
-          size: '69.1 KB',
-          progress: {
-            percent: 17,
-            colorClass: 'danger',
-          },
-        },
-        {
-          id: 5,
-          picture: require('../../../../images/tables/5.png'), // eslint-disable-line global-require
-          description: 'Fortress',
-          info: {
-            type: 'JPEG',
-            dimensions: '1452x1320',
-          },
-          date: new Date('October 1, 2012'),
-          size: '2.3 MB',
-          progress: {
-            percent: 41,
-            colorClass: 'primary',
-          },
-        },
-      ],
-      checkboxes1: [false, true, false, false],
-      checkboxes2: [false, false, false, false, false, false],
-      checkboxes3: [false, false, false, false, false, false],
-    };
-
-    this.checkAll = this.checkAll.bind(this);
-  }
-
-  parseDate(date) {
-    this.dateSet = date.toDateString().split(' ');
-
-    return `${date.toLocaleString('en-us', { month: 'long' })} ${this.dateSet[2]}, ${this.dateSet[3]}`;
-  }
-
-  checkAll(ev, checkbox) {
-    const checkboxArr = (new Array(this.state[checkbox].length)).fill(ev.target.checked);
-    this.setState({
-      [checkbox]: checkboxArr,
-    });
-  }
-
-  changeCheck(ev, checkbox, id) {
-    //eslint-disable-next-line
-    this.state[checkbox][id] = ev.target.checked;
-    if (!ev.target.checked) {
-      //eslint-disable-next-line
-      this.state[checkbox][0] = false;
-    }
-    this.setState({
-      [checkbox]: this.state[checkbox],
-    });
-  }
-
-  render() {
-    return (
-      <div className={s.root}>
-        <ol className="breadcrumb">
-          <li className="breadcrumb-item">YOU ARE HERE</li>
-          <li className="breadcrumb-item active">Tables Basic</li>
-        </ol>
-        <h2 className="page-title">Tables - <span className="fw-semi-bold">Static</span></h2>
-        <Row>
-          <Col>
-            <Widget
-              title={<h5>
-                Table <span className="fw-semi-bold">Styles</span>
-              </h5>} settings close
-            >
-              <Table>
-                <thead>
-                  <tr className="fs-sm">
-                    <th className="hidden-sm-down">#</th>
-                    <th>Picture</th>
-                    <th>Description</th>
-                    <th className="hidden-sm-down">Info</th>
-                    <th className="hidden-sm-down">Date</th>
-                    <th className="hidden-sm-down">Size</th>
-                    <th className="hidden-sm-down">Status</th>
-                    <th />
-                  </tr>
-                </thead>
-                <tbody>
-                  {
-                  this.state.tableStyles.map(row =>
-                    <tr key={row.id}>
-                      <td>{row.id}</td>
-                      <td>
-                        <img className="img-rounded" src={row.picture} alt="" height="50" />
-                      </td>
-                      <td>
-                        {row.description}
-                        {row.label &&
-                        <div>
-                          <Badge color={row.label.colorClass}>{row.label.text}</Badge>
-                        </div>
-                        }
-                      </td>
-                      <td>
-                        <p className="mb-0">
-                          <small>
-                            Type:
-                            <span className="text-muted fw-semi-bold">&nbsp; {row.info.type}</span>
-                          </small>
-                        </p>
-                        <p>
-                          <small>
-                            Dimensions:
-                            <span className="text-muted fw-semi-bold">&nbsp; {row.info.dimensions}</span>
-                          </small>
-                        </p>
-                      </td>
-                      <td className="text-semi-muted">
-                        {this.parseDate(row.date)}
-                      </td>
-                      <td className="text-semi-muted">
-                        {row.size}
-                      </td>
-                      <td className="width-150">
-                        <Progress
-                          color={row.progress.colorClass} value={row.progress.percent}
-                          className="progress-sm mb-xs"
-                        />
-                      </td>
-                    </tr>,
-                  )
-                }
-                </tbody>
-              </Table>
-              <div className="clearfix">
-                <div className="float-right">
-                  <Button color="default" className="mr-xs" size="sm">Send to...</Button>
-                  <UncontrolledButtonDropdown>
-                    <DropdownToggle color="inverse" className="mr-xs" size="sm" caret>Clear</DropdownToggle>
-                    <DropdownMenu>
-                      <DropdownItem>Clear</DropdownItem>
-                      <DropdownItem>Move ...</DropdownItem>
-                      <DropdownItem>Something else here</DropdownItem>
-                      <DropdownItem divider />
-                      <DropdownItem>Separated link</DropdownItem>
-                    </DropdownMenu>
-                  </UncontrolledButtonDropdown>
-                </div>
-                <p>Basic table with styled content</p>
-              </div>
-            </Widget>
-          </Col>
-        </Row>
-        <Row>
-          <Col lg={6}>
-            <Widget
-              title={<h5>Table <span className="fw-semi-bold">Styles</span></h5>} settings close
-            >
-              <h3>Stripped <span className="fw-semi-bold">Table</span></h3>
-
-              <p>Each row is highlighted. You will never lost there. Just <code>.table-striped</code> it.</p>
-              <Table className="table-striped">
-                <thead>
-                  <tr>
-                    <th>
-                      <div className="abc-checkbox">
-                        <Input
-                          id="checkbox1" type="checkbox" checked={this.state.checkboxes1[0]}
-                          onChange={event => this.checkAll(event, 'checkboxes1')}
-                        />
-                        <Label for="checkbox1" />
-                      </div>
-                    </th>
-                    <th>First Name</th>
-                    <th>Last Name</th>
-                    <th>Info</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td>
-                      <div className="abc-checkbox">
-                        <Input
-                          id="checkbox2" type="checkbox" checked={this.state.checkboxes1[1]}
-                          onChange={event => this.changeCheck(event, 'checkboxes1', 1)}
-                        />
-                        <Label for="checkbox2" />
-                      </div>
-                    </td>
-                    <td>Mark</td>
-                    <td>Otto</td>
-                    <td><Badge color="danger">Online</Badge></td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <div className="abc-checkbox">
-                        <Input
-                          id="checkbox3" type="checkbox" checked={this.state.checkboxes1[2]}
-                          onChange={event => this.changeCheck(event, 'checkboxes1', 2)}
-                        />
-                        <Label for="checkbox3" />
-                      </div>
-                    </td>
-                    <td>Jacob <Badge color="warning" className="text-gray-dark">ALERT!</Badge></td>
-                    <td>Thornton</td>
-                    <td><span className="badge bg-gray">Away</span></td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <div className="abc-checkbox">
-                        <Input
-                          id="checkbox4" type="checkbox" checked={this.state.checkboxes1[3]}
-                          onChange={event => this.changeCheck(event, 'checkboxes1', 3)}
-                        />
-                        <Label for="checkbox4" />
-                      </div>
-                    </td>
-                    <td>Larry</td>
-                    <td>the Bird</td>
-                    <td><Badge color="danger">Construct</Badge></td>
-                  </tr>
-                </tbody>
-              </Table>
-              <br /><br />
-              <h3>Hover <span className="fw-semi-bold">Table</span></h3>
-              <p>{'Trace only what\'s really important. '}<code>.table-hover</code> is made for it.</p>
-              <div className="table-responsive">
-                <Table className="table-hover">
-                  <thead>
-                    <tr>
-                      <th>#</th>
-                      <th>First Name</th>
-                      <th>Last Name</th>
-                      <th>Email</th>
-                      <th>Status</th>
-                    </tr>
-                  </thead>
-                  {/* eslint-disable */}
-                  <tbody>
-                    <tr>
-                      <td>1</td>
-                      <td>Mark</td>
-                      <td>Otto</td>
-                      <td><a href="#">ottoto@example.com</a></td>
-                      <td><Badge color="gray" className="text-gray" pill>Pending</Badge></td>
-                    </tr>
-                    <tr>
-                      <td>2</td>
-                      <td>Jacob</td>
-                      <td>Thornton</td>
-                      <td><a href="#">fat.thor@example.com</a></td>
-                      <td><Badge color="gray" className="text-gray-light" pill>Unconfirmed</Badge></td>
-                    </tr>
-                    <tr>
-                      <td>3</td>
-                      <td>Larry</td>
-                      <td>the Bird</td>
-                      <td><a href="#">larry@example.com</a></td>
-                      <td><Badge color="gray" className="text-gray" pill>New</Badge></td>
-                    </tr>
-                    <tr>
-                      <td>4</td>
-                      <td>Peter</td>
-                      <td>Horadnia</td>
-                      <td><a href="#">peter@example.com</a></td>
-                      <td><Badge color="gray" className="text-gray-light" pill>Active</Badge></td>
-                    </tr>
-                  </tbody>
-                  {/* eslint-enable */}
-                </Table>
-              </div>
-            </Widget>
-          </Col>
-          <Col lg={6}>
-            <Widget
-              title={<h5>Table <span className="fw-semi-bold">Styles</span></h5>} settings close
-            >
-              <h3>Bordered <span className="fw-semi-bold">Table</span></h3>
-              <p>Each row is highlighted. You will never lost there. That&apos;s how
-                all of us learned in school the table should look like. Just add
-                <code>.table-bordered</code> to it.</p>
-              <Table className="table-bordered table-lg mt-lg mb-0">
-                <thead className="text-uppercase">
-                  <tr>
-                    <th>
-                      <div className="abc-checkbox">
-                        <Input
-                          id="checkbox10" type="checkbox" checked={this.state.checkboxes2[0]}
-                          onChange={event => this.checkAll(event, 'checkboxes2')}
-                        />
-                        <Label for="checkbox10" />
-                      </div>
-                    </th>
-                    <th>Product</th>
-                    <th className="text-right">Price</th>
-                    <th className="text-center">Sales</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td>
-                      <div className="abc-checkbox">
-                        <Input
-                          id="checkbox11" type="checkbox" checked={this.state.checkboxes2[1]}
-                          onChange={event => this.changeCheck(event, 'checkboxes2', 1)}
-                        />
-                        <Label for="checkbox11" />
-                      </div>
-                    </td>
-                    <td>On the Road</td>
-                    <td className="text-right">$25 224.2</td>
-                    <td className="text-center">
-                      <Sparklines data={[13, 14, 16, 15, 4, 14, 20]} style={{ width: '35px', height: '20px' }}>
-                        <SparklinesBars style={{ stroke: 'white', fill: '#618fb0' }} />
-                      </Sparklines>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <div className="abc-checkbox">
-                        <Input
-                          id="checkbox12" type="checkbox" checked={this.state.checkboxes2[2]}
-                          onChange={event => this.changeCheck(event, 'checkboxes2', 2)}
-                        />
-                        <Label for="checkbox12" />
-                      </div>
-                    </td>
-                    <td>HP Core i7</td>
-                    <td className="text-right">$87 346.1</td>
-                    <td className="text-center">
-                      <Sparklines data={[14, 12, 16, 11, 17, 19, 16]} style={{ width: '35px', height: '20px' }}>
-                        <SparklinesBars style={{ stroke: 'white', fill: '#999' }} />
-                      </Sparklines>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <div className="abc-checkbox">
-                        <Input
-                          id="checkbox13" type="checkbox" checked={this.state.checkboxes2[3]}
-                          onChange={event => this.changeCheck(event, 'checkboxes2', 3)}
-                        />
-                        <Label for="checkbox13" />
-                      </div>
-                    </td>
-                    <td>Let&apos;s Dance</td>
-                    <td className="text-right">$57 944.6</td>
-                    <td className="text-center">
-                      <Sparklines data={[11, 17, 19, 16, 14, 12, 16]} style={{ width: '35px', height: '20px' }}>
-                        <SparklinesBars style={{ stroke: 'white', fill: '#f0b518' }} />
-                      </Sparklines>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <div className="abc-checkbox">
-                        <Input
-                          id="checkbox14" type="checkbox" checked={this.state.checkboxes2[4]}
-                          onChange={event => this.changeCheck(event, 'checkboxes2', 4)}
-                        />
-                        <Label for="checkbox14" />
-                      </div>
-                    </td>
-                    <td>Air Pro</td>
-                    <td className="text-right">$118 533.1</td>
-                    <td className="text-center">
-                      <Sparklines data={[13, 14, 20, 16, 15, 4, 14]} style={{ width: '35px', height: '20px' }}>
-                        <SparklinesBars style={{ stroke: 'white', fill: '#e5603b' }} />
-                      </Sparklines>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <div className="abc-checkbox">
-                        <Input
-                          id="checkbox15" type="checkbox" checked={this.state.checkboxes2[5]}
-                          onChange={event => this.changeCheck(event, 'checkboxes2', 5)}
-                        />
-                        <Label for="checkbox15" />
-                      </div>
-                    </td>
-                    <td>Version Control</td>
-                    <td className="text-right">$72 854.5</td>
-                    <td className="text-center">
-                      <Sparklines data={[16, 15, 4, 14, 13, 14, 20]} style={{ width: '35px', height: '20px' }}>
-                        <SparklinesBars style={{ stroke: 'white', fill: '#618fb0' }} />
-                      </Sparklines>
-                    </td>
-                  </tr>
-                </tbody>
-              </Table>
-            </Widget>
-            <Widget
-              title={<h5>Table <span className="fw-semi-bold">Styles</span></h5>} settings close
-            >
-              <h3>Overflow <span className="fw-semi-bold">Table</span></h3>
-              <p>
-                Add any non-bordered .table within a widget for a seamless design.
-                Awesome look for no cost.
-                Just wrap the table with simple css class <code>.widget-table-overflow</code> inside
-                of widget
-              </p>
-              <div className="widget-table-overflow">
-                <Table className="table-striped table-lg mt-lg mb-0">
-                  <thead>
-                    <tr>
-                      <th>
-                        <div className="abc-checkbox">
-                          <Input
-                            id="checkbox20" type="checkbox" checked={this.state.checkboxes3[0]}
-                            onChange={event => this.checkAll(event, 'checkboxes3')}
-                          />
-                          <Label for="checkbox20" />
-                        </div>
-                      </th>
-                      <th>Product</th>
-                      <th className="text-right">Price</th>
-                      <th className="text-center">Sales</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>
-                        <div className="abc-checkbox">
-                          <Input
-                            id="checkbox21" type="checkbox" checked={this.state.checkboxes3[1]}
-                            onChange={event => this.changeCheck(event, 'checkboxes3', 1)}
-                          />
-                          <Label for="checkbox21" />
-                        </div>
-                      </td>
-                      <td>On the Road</td>
-                      <td className="text-right">$25 224.2</td>
-                      <td className="text-center">
-                        <Sparklines data={[13, 14, 16, 15, 4, 14, 20]} style={{ width: '35px', height: '20px' }}>
-                          <SparklinesBars style={{ stroke: 'white', fill: '#618fb0' }} />
-                        </Sparklines>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div className="abc-checkbox">
-                          <Input
-                            id="checkbox22" type="checkbox" checked={this.state.checkboxes3[2]}
-                            onChange={event => this.changeCheck(event, 'checkboxes3', 2)}
-                          />
-                          <Label for="checkbox22" />
-                        </div>
-                      </td>
-                      <td>HP Core i7</td>
-                      <td className="text-right">$87 346.1</td>
-                      <td className="text-center">
-                        <Sparklines data={[14, 12, 16, 11, 17, 19, 16]} style={{ width: '35px', height: '20px' }}>
-                          <SparklinesBars style={{ stroke: 'white', fill: '#999' }} />
-                        </Sparklines>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div className="abc-checkbox">
-                          <Input
-                            id="checkbox23" type="checkbox" checked={this.state.checkboxes3[3]}
-                            onChange={event => this.changeCheck(event, 'checkboxes3', 3)}
-                          />
-                          <Label for="checkbox23" />
-                        </div>
-                      </td>
-                      <td>Let&apos;s Dance</td>
-                      <td className="text-right">$57 944.6</td>
-                      <td className="text-center">
-                        <Sparklines data={[11, 17, 19, 16, 14, 12, 16]} style={{ width: '35px', height: '20px' }}>
-                          <SparklinesBars style={{ stroke: 'white', fill: '#f0b518' }} />
-                        </Sparklines>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div className="abc-checkbox">
-                          <Input
-                            id="checkbox24" type="checkbox" checked={this.state.checkboxes3[4]}
-                            onChange={event => this.changeCheck(event, 'checkboxes3', 4)}
-                          />
-                          <Label for="checkbox24" />
-                        </div>
-                      </td>
-                      <td>Air Pro</td>
-                      <td className="text-right">$118 533.1</td>
-                      <td className="text-center">
-                        <Sparklines data={[13, 14, 20, 16, 15, 4, 14]} style={{ width: '35px', height: '20px' }}>
-                          <SparklinesBars style={{ stroke: 'white', fill: '#e5603b' }} />
-                        </Sparklines>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div className="abc-checkbox">
-                          <Input
-                            id="checkbox25" type="checkbox" checked={this.state.checkboxes3[5]}
-                            onChange={event => this.changeCheck(event, 'checkboxes3', 5)}
-                          />
-                          <Label for="checkbox25" />
-                        </div>
-                      </td>
-                      <td>Version Control</td>
-                      <td className="text-right">$72 854.5</td>
-                      <td className="text-center">
-                        <Sparklines data={[16, 15, 4, 14, 13, 14, 20]} style={{ width: '35px', height: '20px' }}>
-                          <SparklinesBars style={{ stroke: 'white', fill: '#618fb0' }} />
-                        </Sparklines>
-                      </td>
-                    </tr>
-                  </tbody>
-                </Table>
-              </div>
-            </Widget>
-          </Col>
-        </Row>
-      </div>
-    );
-  }
-
-}
-
-export default Static;

-@import '../../../../styles/app';
-
-.root {
-  // some styles
-}

-{
-  "name": "static",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Static.js"
-}

-import React, { Component } from 'react';
-import cx from 'classnames';
-import {
-  Row,
-  Col,
-  Breadcrumb,
-  BreadcrumbItem,
-  Alert,
-} from 'reactstrap';
-
-import Widget from '../../../../components/Widget';
-
-class Alerts extends Component {
-  state = {
-    alerts: [{
-      id: 'al-1',
-      type: 'success',
-      msg: '<span class="fw-semi-bold">Success:</span> You successfully read this important alert message.',
-      visible: [true, true, true],
-    }, {
-      id: 'al-2',
-      type: 'info',
-      msg: '<span class="fw-semi-bold">Info:</span> This alert needs your attention, but it\'s not super important.',
-      visible: [true, true, true],
-    }, {
-      id: 'al-3',
-      type: 'warning',
-      msg: '<span class="fw-semi-bold"><strong>Warning:</strong></span> Best check yo self, you\'re not looking too good.',
-      visible: [true, true, true],
-    }, {
-      id: 'al-4',
-      type: 'danger',
-      msg: '<span class="fw-semi-bold">Danger:</span> Change this and that and try again. <a class="btn btn-default btn-xs float-right mr" href="#">Ignore</a> <a class="btn btn-danger btn-xs float-right mr-xs" href="#">Take this action</a>',
-      visible: [true, true, true],
-    }],
-  }
-
-  closeAlert(index, alertGroup) {
-    const newAlerts = [...this.state.alerts];
-    newAlerts[index].visible[alertGroup] = false;
-
-    this.setState({ alerts: newAlerts });
-  }
-
-  render() {
-    const { alerts } = this.state;
-
-    return (
-      <div>
-        <Breadcrumb>
-          <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
-          <BreadcrumbItem active>UI Alerts</BreadcrumbItem>
-        </Breadcrumb>
-        <h1 className="page-title">Alerts</h1>
-        <Row>
-          <Col xs={12} md={8}>
-            <Widget
-              title={<h5>Alert <span className="fw-semi-bold">Messages</span></h5>}
-              close collapse
-            >
-              <p>Alerts are available for any length of text, as well as an optional dismiss button.</p>
-              {alerts.map((alert, index) => <Alert
-                key={alert.id} isOpen={alert.visible[0]} toggle={() => this.closeAlert(index, 0)}
-                color={alert.type}
-              >
-                <span dangerouslySetInnerHTML={{ __html: alert.msg }} />
-              </Alert>)}
-            </Widget>
-          </Col>
-          <Col xs={12} md={8}>
-            <Widget
-              title={<h5>Transparent <span className="fw-semi-bold">Alerts</span></h5>}
-              close collapse
-            >
-              <p>Transparent  alerts are available by adding <code>.alert-transparent</code> class.</p>
-              {alerts.map((alert, index) => <Alert
-                className="alert-transparent"
-                key={alert.id} isOpen={alert.visible[1]} toggle={() => this.closeAlert(index, 1)}
-                color={alert.type}
-              >
-                <span dangerouslySetInnerHTML={{ __html: alert.msg }} />
-              </Alert>)}
-            </Widget>
-          </Col>
-          <Col xs={12} md={8}>
-            <Widget
-              title={<h5>Rounded <span className="fw-semi-bold">Alerts</span></h5>}
-              close collapse
-            >
-              <p>Rounded alerts are available by adding <code>.alert-rounded</code> class.</p>
-              {alerts.map((alert, index) => <Alert
-                className={cx('alert-rounded', { 'alert-transparent': index % 2 !== 1 })}
-                key={alert.id} isOpen={alert.visible[2]} toggle={() => this.closeAlert(index, 2)}
-                color={alert.type}
-              >
-                <span dangerouslySetInnerHTML={{ __html: alert.msg }} />
-              </Alert>)}
-            </Widget>
-          </Col>
-          <Col xs={12} md={8}>
-            <Widget
-              title={<h5>Additional <span className="fw-semi-bold">Content</span></h5>}
-              close collapse
-            >
-              <p>Alerts can also contain additional HTML elements like headings, paragraphs and dividers.</p>
-              <Alert color="success">
-                <h4 className="alert-heading">Well done!</h4>
-                <p>
-                  Aww yeah, you successfully read this important alert message. This example text is going
-                  to run a bit longer so that you can see how spacing within an alert works with this kind
-                  of content.
-                </p>
-                <hr />
-                <p className="mb-0">
-                  Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
-                </p>
-              </Alert>
-              <Alert color="danger">
-                <h4 className="alert-heading">Well done!</h4>
-                <p>
-                  Aww yeah, you successfully read this important alert message. This example text is going
-                  to run a bit longer so that you can see how spacing within an alert works with this kind
-                  of content.
-                </p>
-              </Alert>
-            </Widget>
-          </Col>
-        </Row>
-      </div>
-    );
-  }
-}
-
-export default Alerts;

-{
-  "name": "Alerts",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Alerts.js"
-}

-import React from 'react';
-import {
-  Row,
-  Col,
-  Breadcrumb,
-  BreadcrumbItem,
-  Button,
-  Badge,
-} from 'reactstrap';
-
-import Widget from '../../../../components/Widget';
-
-const Badges = () => (
-  <div>
-    <Breadcrumb>
-      <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
-      <BreadcrumbItem active>UI Badge</BreadcrumbItem>
-    </Breadcrumb>
-    <h1 className="page-title">Badge</h1>
-    <Row>
-      <Col xs={12} md={8}>
-        <Widget
-          title={<h5>Badge <span className="fw-semi-bold">Example</span></h5>}
-          close collapse
-        >
-          <p>
-            Badges scale to match the size of the immediate parent element by
-            using relative font sizing and em units.
-          </p>
-          <h1>Example heading <Badge color="primary">Primary</Badge></h1>
-          <h2>Example heading <Badge color="info">Info</Badge></h2>
-          <h3>Example heading <Badge color="warning">Warning</Badge></h3>
-          <h4>Example heading <Badge color="success">Success</Badge></h4>
-          <h5>Example heading <Badge color="danger">Danger</Badge></h5>
-          <h6>Example heading <Badge color="secondary">Secondary</Badge></h6>
-          <p>Badges can be used as part of links or buttons to provide a counter.</p>
-          <Button color="primary">Notifications <Badge color="danger">4</Badge></Button>
-        </Widget>
-      </Col>
-      <Col xs={12} md={8}>
-        <Widget
-          title={<h5>Pill <span className="fw-semi-bold">Badges</span></h5>}
-          close collapse
-        >
-          <p>
-            Use the <code>pill</code> property to make badges more rounded
-            (with a larger border-radius and additional horizontal padding).
-          </p>
-          <Badge className="mr-xs" color="primary" pill>Primary</Badge>
-          <Badge className="mr-xs" color="info" pill>Info</Badge>
-          <Badge className="mr-xs" color="warning" pill>Warning</Badge>
-          <Badge className="mr-xs" color="success" pill>Success</Badge>
-          <Badge className="mr-xs" color="danger" pill>Danger</Badge>
-          <Badge className="mr-xs" color="secondary" pill>Secondary</Badge>
-          <Badge className="mr-xs" color="light" pill>Light</Badge>
-          <Badge className="mr-xs" color="dark" pill>Dark</Badge>
-        </Widget>
-      </Col>
-      <Col xs={12} md={8}>
-        <Widget
-          title={<h5>Pill <span className="fw-semi-bold">Badges</span></h5>}
-          close collapse
-        >
-          <p>
-            Using the contextual <code>href=&quot;&#35;&quot;</code> classes on
-            an <code>&lt;Badge&gt;</code> element quickly provide actionable badges with hover and focus states.
-          </p>
-          <Badge className="mr-xs" href="#" color="primary">Primary</Badge>
-          <Badge className="mr-xs" href="#" color="info">Info</Badge>
-          <Badge className="mr-xs" href="#" color="warning">Warning</Badge>
-          <Badge className="mr-xs" href="#" color="success">Success</Badge>
-          <Badge className="mr-xs" href="#" color="danger">Danger</Badge>
-          <Badge className="mr-xs" href="#" color="secondary">Secondary</Badge>
-          <Badge className="mr-xs" href="#" color="light">Light</Badge>
-          <Badge className="mr-xs" href="#" color="dark">Dark</Badge>
-        </Widget>
-      </Col>
-    </Row>
-  </div>
-);
-
-export default Badges;

-{
-  "name": "Badge",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Badge.js"
-}

-import React from 'react';
-import {
-  Row,
-  Col,
-  Button,
-  ButtonGroup,
-  ButtonToolbar,
-  ButtonDropdown,
-  DropdownToggle,
-  DropdownMenu,
-  DropdownItem,
-} from 'reactstrap';
-
-import Widget from '../../../../components/Widget';
-
-class Buttons extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.toggleOne = this.toggleOne.bind(this);
-    this.toggleTwo = this.toggleTwo.bind(this);
-    this.toggleThree = this.toggleThree.bind(this);
-    this.toggleFour = this.toggleFour.bind(this);
-
-    this.onRadioBtnClickOne = this.onRadioBtnClickOne.bind(this);
-    this.onRadioBtnClickTwo = this.onRadioBtnClickTwo.bind(this);
-    this.onCheckboxBtnClickOne = this.onCheckboxBtnClickOne.bind(this);
-    this.onCheckboxBtnClickTwo = this.onCheckboxBtnClickTwo.bind(this);
-
-    this.state = {
-      dropdownOpenOne: false,
-      dropdownOpenTwo: false,
-      dropdownOpenThree: false,
-      dropdownOpenFour: false,
-      cSelectedOne: [2],
-      cSelectedTwo: [1, 3],
-      rSelectedTwo: 2,
-      rSelectedOne: null,
-    };
-  }
-
-  onRadioBtnClickOne(rSelectedOne) {
-    this.setState({ rSelectedOne });
-  }
-
-  onRadioBtnClickTwo(rSelectedTwo) {
-    this.setState({ rSelectedTwo });
-  }
-
-  onCheckboxBtnClickOne(selected) {
-    const index = this.state.cSelectedOne.indexOf(selected);
-    if (index < 0) {
-      this.state.cSelectedOne.push(selected);
-    } else {
-      this.state.cSelectedOne.splice(index, 1);
-    }
-    this.setState({ cSelectedOne: [...this.state.cSelectedOne] });
-  }
-
-  onCheckboxBtnClickTwo(selected) {
-    const index = this.state.cSelectedTwo.indexOf(selected);
-    if (index < 0) {
-      this.state.cSelectedTwo.push(selected);
-    } else {
-      this.state.cSelectedTwo.splice(index, 1);
-    }
-    this.setState({ cSelectedTwo: [...this.state.cSelectedTwo] });
-  }
-
-  toggleOne() {
-    this.setState({
-      dropdownOpenOne: !this.state.dropdownOpenOne,
-    });
-  }
-
-  toggleTwo() {
-    this.setState({
-      dropdownOpenTwo: !this.state.dropdownOpenTwo,
-    });
-  }
-
-  toggleThree() {
-    this.setState({
-      dropdownOpenThree: !this.state.dropdownOpenThree,
-    });
-  }
-
-  toggleFour() {
-    this.setState({
-      dropdownOpenFour: !this.state.dropdownOpenFour,
-    });
-  }
-
-  render() {
-    return (
-      <div>
-        <ol className="breadcrumb">
-          <li className="breadcrumb-item">YOU ARE HERE</li>
-          <li className="active breadcrumb-item">UI Buttons</li>
-        </ol>
-
-        <h1 className="page-title">Buttons - <span className="fw-semi-bold">Styles </span></h1>
-
-        <Row>
-          {/* Color options */}
-          <Col md={6} sm={12} xs={12}>
-            <Widget
-              title={<h5> Color <span className="fw-semi-bold">Options</span>
-              </h5>} close collapse
-            >
-              <div>
-                <p className="fs-mini text-muted">
-                  Use any of the available button classes to quickly create a styled button.
-                  Semantically distinguishable beauty.
-                </p>
-                <p className="text-left">
-                  <Button color="default" className="width-100 mb-xs mr-xs">Default</Button>
-                  <Button color="primary" className="width-100 mb-xs mr-xs">Primary</Button>
-                  <Button color="info" className="width-100 mb-xs mr-xs">Info</Button>
-                  <Button color="success" className="width-100 mb-xs mr-xs">Success</Button>
-                  <Button color="warning" className="width-100 mb-xs mr-xs">Warning</Button>
-                  <Button color="danger" className="width-100 mb-xs mr-xs">Danger</Button>
-                  <Button color="gray" className="width-100 mb-xs mr-xs">Gray</Button>
-                  <Button color="inverse" className="width-100 mb-xs mr-xs">Inverse</Button>
-                </p>
-              </div>
-            </Widget>
-          </Col>
-
-          {/* Size variants */}
-          <Col md={6} sm={12} xs={12}>
-            <Widget
-              title={<h5> Size <span className="fw-semi-bold">Variants</span>
-              </h5>} close collapse
-            >
-              <div>
-                <p className="fs-mini text-muted">
-                  Fancy larger or smaller buttons?
-                  Four separate sizes available for all use cases:
-                  from tiny 10px button to large one.
-                </p>
-                <p>
-                  <Button color="default" size="lg" className="mb-xs mr-xs">Large button</Button>
-                  <Button color="primary" className="mb-xs mr-xs">Default button</Button>
-                  <Button color="info" size="sm" className="mb-xs mr-xs">Small button</Button>
-                  <Button color="success" size="xs" className="mb-xs mr-xs">Tiny button</Button>
-                </p>
-              </div>
-            </Widget>
-          </Col>
-
-          <Col md={6} sm={12} xs={12}>
-            <Widget
-              title={<h5>Outline <span className="fw-semi-bold">Buttons</span>
-              </h5>} close collapse
-            >
-              <div>
-                <p className="fs-mini">
-                  In need of a button, but not the hefty background colors they bring?
-                  Use <code>outline</code> property to remove all
-                  background images and colors on any button.
-                </p>
-                <p>
-                  <Button outline color="default" className="width-100 mb-xs mr-xs">Default</Button>
-                  <Button outline color="primary" className="width-100 mb-xs mr-xs">Primary</Button>
-                  <Button outline color="info" className="width-100 mb-xs mr-xs">Info</Button>
-                  <Button outline color="success" className="width-100 mb-xs mr-xs">Success</Button>
-                  <Button outline color="warning" className="width-100 mb-xs mr-xs">Warning</Button>
-                  <Button outline color="danger" className="width-100 mb-xs mr-xs">Danger</Button>
-                  <Button outline color="gray" className="width-100 mb-xs mr-xs">Gray</Button>
-                  <Button outline color="inverse" className="width-100 mb-xs mr-xs">Inverse</Button>
-                </p>
-              </div>
-            </Widget>
-          </Col>
-
-          <Col md={6} sm={12} xs={12}>
-            <Widget
-              title={<h5>Rounded <span className="fw-semi-bold">Buttons</span>
-              </h5>} close collapse
-            >
-              <div>
-                <p className="fs-mini">
-                  Use any of the available button properties to quickly create a styled button.
-                  Semantically distinguishable beauty. Use <code>.btn-rounded</code> or <code>.btn-rounded-f</code>.
-                </p>
-                <p>
-                  <Button color="default" className="btn-rounded-f width-100 mb-xs mr-xs">Default</Button>
-                  <Button color="primary" className="btn-rounded-f width-100 mb-xs mr-xs">Primary</Button>
-                  <Button color="info" className="btn-rounded-f width-100 mb-xs mr-xs">Info</Button>
-                  <Button color="success" className="btn-rounded-f width-100 mb-xs mr-xs">Success</Button>
-                  <Button outline color="warning" className="btn-rounded width-100 mb-xs mr-xs">Warning</Button>
-                  <Button outline color="danger" className="btn-rounded width-100 mb-xs mr-xs">Danger</Button>
-                  <Button outline color="gray" className="btn-rounded width-100 mb-xs mr-xs">Gray</Button>
-                  <Button outline color="inverse" className="btn-rounded width-100 mb-xs mr-xs">Inverse</Button>
-                </p>
-              </div>
-            </Widget>
-          </Col>
-
-          {/* Block Buttons */}
-          <Col md={6} sm={12} xs={12}>
-            <Widget
-              title={<h5> Block <span className="fw-semi-bold">Buttons</span>
-              </h5>} close collapse
-            >
-              <div>
-                <p className="fs-mini text-muted">
-                  Create block level buttons - those that span the full width
-                  of a parent— by adding <code>block</code>
-                  to <code>&lt;Button&gt;</code> component.
-                  Great for menu & social buttons.
-                </p>
-                <Button color="info" block>Block Button</Button>
-                <Button color="default" block>Show Menu &nbsp;&nbsp;&nbsp;<i
-                  className="fa fa-bars"
-                /></Button>
-                <Button color="primary" block><i className="fa fa-facebook" />&nbsp;&nbsp;Login mit
-                  Facebook</Button>
-                <Button color="warning" block>Are you sure?</Button>
-              </div>
-            </Widget>
-          </Col>
-
-          {/* Disabled Buttons */}
-          <Col md={6} sm={12} xs={12}>
-            <Widget
-              title={<h5> Disabled <span className="fw-semi-bold">Buttons</span>
-              </h5>} close collapse
-            >
-              <div>
-                <p className="fs-mini text-muted">
-                  Make buttons look unclickable by fading them back 50%.
-                  Add the <code>disabled</code> to <code>&lt;Button&gt;</code> component.
-                </p>
-                <p>
-                  <Button color="primary" disabled className="mr-xs">Primary button</Button>
-                  <Button color="default" disabled className="mr-xs">Button</Button>
-                </p>
-                <p>
-                  <Button color="success" size="sm" disabled className="mr-xs">Primary Link</Button>
-                  <Button color="default" size="sm" disabled className="mr-xs">Link</Button>
-                </p>
-              </div>
-            </Widget>
-          </Col>
-
-          {/* Buttons Groups */}
-          <Col md={6} sm={12} xs={12}>
-            <Widget
-              title={<h5> Button <span className="fw-semi-bold">Groups</span>
-              </h5>} close collapse
-            >
-              <div>
-                <p className="fs-mini text-muted">
-                  Group a series of buttons together on a single
-                  line with the button group.
-                  Add on optional JavaScript radio and checkbox
-                  style behavior with Bootstrap buttons plugin.
-                </p>
-                <ButtonGroup className="mb-xs">
-                  <Button color="default">Left</Button>
-                  <Button color="default">Middle</Button>
-                  <Button color="default">Right</Button>
-                </ButtonGroup>
-
-                <ButtonToolbar className="mb-xs">
-                  <ButtonGroup className="mr-2">
-                    <Button color="default">1</Button>
-                    <Button color="default">2</Button>
-                    <Button color="default">3</Button>
-                    <Button color="default">4</Button>
-                  </ButtonGroup>
-                  <ButtonGroup className="mr-2">
-                    <Button color="default">5</Button>
-                    <Button color="default">6</Button>
-                    <Button color="default">7</Button>
-                  </ButtonGroup>
-                  <ButtonGroup className="mr-2">
-                    <Button color="default">8</Button>
-                  </ButtonGroup>
-                </ButtonToolbar>
-
-              </div>
-            </Widget>
-          </Col>
-
-          {/* Button Dropdowns */}
-          {/* todo: check after reactstrap update */}
-          <Col md={6} sm={12} xs={12}>
-            <Widget
-              title={<h5> Button <span className="fw-semi-bold">Dropdowns</span>
-              </h5>} close collapse
-            >
-              <div>
-                <p className="fs-mini text-muted">
-                  Add dropdown menus to nearly anything with
-                  this simple plugin, including the buttons,
-                  navbar, tabs, and pills.
-                  Both solid & segmented dropdown options available.
-                </p>
-
-                <div className="mb-xs">
-                  <ButtonDropdown
-                    isOpen={this.state.dropdownOpenOne} toggle={this.toggleOne}
-                    className="mr-xs"
-                  >
-                    <DropdownToggle caret color="danger">
-                      &nbsp; One &nbsp;
-                    </DropdownToggle>
-                    <DropdownMenu>
-                      <DropdownItem>Action</DropdownItem>
-                      <DropdownItem>Another action</DropdownItem>
-                      <DropdownItem>Something else here</DropdownItem>
-                      <DropdownItem divider />
-                      <DropdownItem>Separated link</DropdownItem>
-                    </DropdownMenu>
-                  </ButtonDropdown>
-
-                  <ButtonDropdown isOpen={this.state.dropdownOpenTwo} toggle={this.toggleTwo}>
-                    <DropdownToggle size="sm" caret color="gray">
-                      &nbsp; One &nbsp;
-                    </DropdownToggle>
-                    <DropdownMenu>
-                      <DropdownItem>Action</DropdownItem>
-                      <DropdownItem>Another action</DropdownItem>
-                      <DropdownItem>Something else here</DropdownItem>
-                      <DropdownItem divider />
-                      <DropdownItem>Separated link</DropdownItem>
-                    </DropdownMenu>
-                  </ButtonDropdown>
-                </div>
-                <div className="mb-xs">
-                  <ButtonDropdown
-                    isOpen={this.state.dropdownOpenThree} toggle={this.toggleThree}
-                    className="mr-xs"
-                  >
-                    <Button id="dropdownThree" color="primary">Primary</Button>
-                    <DropdownToggle color="primary" caret className="dropdown-toggle-split" />
-                    <DropdownMenu>
-                      <DropdownItem>Action</DropdownItem>
-                      <DropdownItem>Another action</DropdownItem>
-                      <DropdownItem>Something else here</DropdownItem>
-                      <DropdownItem divider />
-                      <DropdownItem>Separated link</DropdownItem>
-                    </DropdownMenu>
-                  </ButtonDropdown>
-                  <ButtonDropdown isOpen={this.state.dropdownOpenFour} toggle={this.toggleFour}>
-                    <Button size="sm" id="dropdownFour" color="gray">Gray</Button>
-                    <DropdownToggle size="sm" caret color="gray" className="dropdown-toggle-split" />
-                    <DropdownMenu>
-                      <DropdownItem>Action</DropdownItem>
-                      <DropdownItem>Another action</DropdownItem>
-                      <DropdownItem>Something else here</DropdownItem>
-                      <DropdownItem divider />
-                      <DropdownItem>Separated link</DropdownItem>
-                    </DropdownMenu>
-                  </ButtonDropdown>
-                </div>
-              </div>
-            </Widget>
-          </Col>
-        </Row>
-
-        <Row>
-          <Col md={12} sm={12} xs={12}>
-            <Widget
-              title={<h6> Button <span className="fw-semi-bold">Options</span>
-              </h6>} close collapse
-            >
-              <Row>
-                {/* Checkboxes */}
-                <Col md={4} sm={6} xs={12}>
-                  <h4> Button <span className="fw-semi-bold">Checkboxes</span></h4>
-                  <p className="fs-mini text-muted">
-                    Do more with buttons. Control button states
-                    or create groups of buttons for more components like
-                    toolbars.
-                    Use <code>ButtonGroup</code> to a group
-                    of checkboxes for checkbox style toggling on
-                    btn-group.
-                  </p>
-                  <div className="mb-xs">
-                    <ButtonGroup>
-                      <Button
-                        color="default" onClick={() => this.onCheckboxBtnClickOne(1)}
-                        active={this.state.cSelectedOne.includes(1)}
-                      >Left way</Button>
-                      <Button
-                        color="default" onClick={() => this.onCheckboxBtnClickOne(2)}
-                        active={this.state.cSelectedOne.includes(2)}
-                      >Middle way</Button>
-                      <Button
-                        color="default" onClick={() => this.onCheckboxBtnClickOne(3)}
-                        active={this.state.cSelectedOne.includes(3)}
-                      >Right way</Button>
-                    </ButtonGroup>
-                  </div>
-                  <div className="mb-xs">
-                    <ButtonGroup>
-                      <Button
-                        size="sm" color="default" onClick={() => this.onCheckboxBtnClickTwo(1)}
-                        active={this.state.cSelectedTwo.includes(1)}
-                      >Left way</Button>
-                      <Button
-                        size="sm" color="default" onClick={() => this.onCheckboxBtnClickTwo(2)}
-                        active={this.state.cSelectedTwo.includes(2)}
-                      >Middle way</Button>
-                      <Button
-                        size="sm" color="default" onClick={() => this.onCheckboxBtnClickTwo(3)}
-                        active={this.state.cSelectedTwo.includes(3)}
-                      >Right way</Button>
-                    </ButtonGroup>
-                  </div>
-
-                </Col>
-
-                {/* Radios */}
-                <Col md={4} sm={12} xs={12}>
-                  <h4> Button <span className="fw-semi-bold">Radios</span></h4>
-                  <p className="fs-mini text-muted">
-                    Do more with buttons. Control button states
-                    or create groups of buttons for more components like toolbars.
-                    Use <code>ButtonGroup</code> to a group of radio
-                    inputs for radio style toggling on btn-group.
-                  </p>
-                  <div className="mb-xs">
-                    <ButtonGroup>
-                      <Button
-                        color="default" onClick={() => this.onRadioBtnClickOne(1)}
-                        active={this.state.rSelectedOne === 1}
-                      >Left way</Button>
-                      <Button
-                        color="default" onClick={() => this.onRadioBtnClickOne(2)}
-                        active={this.state.rSelectedOne === 2}
-                      >Middle way</Button>
-                      <Button
-                        color="default" onClick={() => this.onRadioBtnClickOne(3)}
-                        active={this.state.rSelectedOne === 3}
-                      >Right way</Button>
-                    </ButtonGroup>
-                  </div>
-                  <div className="mb-xs">
-                    <ButtonGroup>
-                      <Button
-                        size="sm" color="default" onClick={() => this.onRadioBtnClickTwo(1)}
-                        active={this.state.rSelectedTwo === 1}
-                      >Left way</Button>
-                      <Button
-                        size="sm" color="default" onClick={() => this.onRadioBtnClickTwo(2)}
-                        active={this.state.rSelectedTwo === 2}
-                      >Middle way</Button>
-                      <Button
-                        size="sm" color="default" onClick={() => this.onRadioBtnClickTwo(3)}
-                        active={this.state.rSelectedTwo === 3}
-                      >Right way</Button>
-                    </ButtonGroup>
-                  </div>
-                </Col>
-
-                {/* Buttons with Icons */}
-                <Col md={4} sm={12} xs={12}>
-                  <h4> Use with <span className="fw-semi-bold">Icons</span></h4>
-                  <p className="fs-mini text-muted">
-                    Fontawesome and Glyph- icons may be used in buttons,
-                    button groups for a toolbar, navigation, or prepended form inputs.
-                    Let your buttons shine!
-                  </p>
-                  <div className="text-center mb-sm">
-                    <Button color="default" className="width-100 mr-xs">
-                      <i className="glyphicon glyphicon-tree-conifer text-success mr-xs mb-xs" />
-                      Forest
-                    </Button>
-                    <Button color="default" className="width-100 mr-xs">
-                      <i className="fa fa-check text-danger mr-xs mb-xs" />
-                      Submit
-                    </Button>
-                    <Button color="default" className="width-100 mr-xs">
-                      <i className="fa fa-facebook text-primary mr-xs mb-xs" />
-                      Login
-                    </Button>
-                  </div>
-                  <div className="text-center">
-                    <Button color="inverse" className="width-100 mr-xs">
-                      <i className="fa fa-exclamation text-warning mr-xs mb-xs" />
-                      Error
-                    </Button>
-                    <Button color="inverse" className="width-100 mr-xs">
-                      <i className="glyphicon glyphicon-globe text-info mr-xs mb-xs" />
-                      <span className="text-info">Globe</span>
-                    </Button>
-                    <Button color="inverse" className="width-100 mr-xs">
-                      <span className="circle bg-white mr-xs">
-                        <i className="fa fa-map-marker text-gray" />
-                      </span>
-                      Map
-                    </Button>
-                  </div>
-                </Col>
-              </Row>
-            </Widget>
-          </Col>
-        </Row>
-
-      </div>
-    );
-  }
-
-}
-
-export default Buttons;

-{
-  "name": "UIButtons",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Buttons.js"
-}

-import React from 'react';
-import {
-  Row,
-  Col,
-  Breadcrumb,
-  BreadcrumbItem,
-  Button,
-  Badge,
-  Card,
-  CardBody,
-  CardTitle,
-  CardText,
-  CardImg,
-} from 'reactstrap';
-
-import lifestyleImg from '../../../../images/cards/lifestyle.jpg';
-import isometricImg from '../../../../images/cards/isometric.jpg';
-import mountainsImg from '../../../../images/cards/mountains.jpeg';
-import reactnativeImg from '../../../../images/cards/rns.png';
-
-
-const Cards = () => (
-  <div>
-    <Breadcrumb>
-      <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
-      <BreadcrumbItem active>UI Card</BreadcrumbItem>
-    </Breadcrumb>
-    <h1 className="page-title">Cards - <span className="fw-semi-bold">Examples</span></h1>
-    <p>
-      A card is a flexible and extensible content container. It includes options for headers and footers,
-      a wide variety of content, contextual background colors, and powerful display options. If you’re
-      familiar with Bootstrap 3, cards replace its old panels, wells, and thumbnails. Similar functionality
-      to those components is available as modifier classes for cards.
-    </p>
-    <Row>
-      <Col>
-        <Card
-          className="background-cover border-0 mb-xlg"
-          style={{ backgroundImage: `url(${lifestyleImg})` }}
-        >
-          <CardBody className="text-white">
-            <span>13 Mar</span>
-            <h3 className="mt-lg">Lifestyle brand</h3>
-            <p className="w-75">A lifestyle brand is a company that markets its products or services to embody the
-                interests, attitudes, and opinions of a group or a culture. Lifestyle brands
-                seek to inspire, guide, and motivate people, with the goal of their products
-                contributing to the definition of the consumer&apos;s way of life.</p>
-            <Button className="btn-rounded-f mt-lg" color="danger">Full Article</Button>
-          </CardBody>
-        </Card>
-      </Col>
-    </Row>
-    <Row>
-      <Col xs={12} sm={6} md={4}>
-        <Card className="border-0 mb-xlg">
-          <CardImg top width="100%" src={isometricImg} alt="Card image cap" />
-          <CardBody>
-            <CardTitle>Isometric design</CardTitle>
-            <CardText>
-              Isometric projection is a method for visually representing three-dimensional in two
-              dimensions in technical and engineering drawings.
-            </CardText>
-            <div className="w-100 text-center">
-              <Button className="btn-rounded-f" color="primary">Full Article</Button>
-            </div>
-          </CardBody>
-        </Card>
-      </Col>
-      <Col xs={12} sm={6} md={4}>
-        <Card className="mb-xlg border-0">
-          <CardBody>
-            <button className="btn-link fw-semi-bold text-success">Avg Rating</button>
-            <button className="btn-link fw-semi-bold text-muted ml-sm">All Time</button>
-            <hr />
-            <div className="d-flex justify-content-between mb-lg">
-              <div className="text-warning">
-                <i className="fa fa-star mr-xs" />
-                <i className="fa fa-star mr-xs" />
-                <i className="fa fa-star mr-xs" />
-                <i className="fa fa-star mr-xs" />
-                <i className="fa fa-star" />
-              </div>
-              <span className="text-muted"><small>342 REVIEWS</small></span>
-            </div>
-            <div className="mb-lg">
-              <h3 className="text-success mb-0">69%</h3>
-              of customers recomend this product
-            </div>
-            <Button className="btn-rounded-f" color="success">Write a Review</Button>
-          </CardBody>
-        </Card>
-        <Card className="mb-xlg border-0" style={{ position: 'relative' }}>
-          <CardImg top width="100%" src={mountainsImg} alt="Card image cap" />
-          <Badge className="mt-lg fw-thin rounded-0" color="success" style={{ position: 'absolute' }}>New</Badge>
-          <CardBody>
-            <CardTitle>Weekly Inspiration</CardTitle>
-            <hr />
-            <CardText>
-              There are at least 109 mountains on Earts with elevations greeter than 7,200 meters
-            </CardText>
-            <Button className="border-0" color="default">Read More</Button>
-          </CardBody>
-        </Card>
-      </Col>
-      <Col xs={12} sm={6} md={4}>
-        <Card className="border-0">
-          <CardImg top width="100%" src={reactnativeImg} alt="Card image cap" />
-          <CardBody>
-            <small>Technology</small><br />
-            <CardTitle className="mb mt-xs">
-              React Native Starter
-            </CardTitle>
-            <hr />
-            <div className="w-100 d-flex justify-content-between align-items-center">
-              <span className="text-muted fw-semi-bold">from $49.95</span>
-              <Button color="info">Read more</Button>
-            </div>
-          </CardBody>
-        </Card>
-      </Col>
-    </Row>
-  </div>
-);
-
-export default Cards;

-{
-  "name": "Card",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Card.js"
-}

-import React from 'react';
-import {
-  Row,
-  Col,
-  Breadcrumb,
-  BreadcrumbItem,
-  UncontrolledCarousel,
-} from 'reactstrap';
-
-import firstSlide from '../../../../images/slides/1.jpg';
-import secondSlide from '../../../../images/slides/2.jpg';
-import thirdSlide from '../../../../images/slides/3.jpg';
-
-const carouselItems = [
-  { src: firstSlide, caption: '' },
-  { src: secondSlide, caption: '' },
-  { src: thirdSlide, caption: '' },
-];
-
-const Carousel = () => (
-  <div>
-    <Breadcrumb>
-      <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
-      <BreadcrumbItem active>UI Carousel</BreadcrumbItem>
-    </Breadcrumb>
-    <p>
-      The carousel is a slideshow for cycling through a series of content, built with
-      CSS 3D transforms and a bit of JavaScript. It works with a series of images, text,
-      or custom markup. It also includes support for previous/next controls and indicators.
-    </p>
-    <Row>
-      <Col>
-        <UncontrolledCarousel captionTex={null} items={carouselItems} />
-      </Col>
-    </Row>
-  </div>
-);
-
-export default Carousel;

-{
-  "name": "Carousel",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Carousel.js"
-}

-@import '../../../../styles/app';
-
-.root {
-  :global {
-    .icon-list {
-      margin-top: $spacer;
-    }
-
-    .icon-list-item {
-      height: 32px;
-      font-size: 14px;
-      line-height: 32px;
-
-      > a {
-        color: $text-color;
-        text-decoration: none;
-      }
-
-      .glyphicon,
-      .fa,
-      .fi {
-        width: 32px;
-        margin-right: 10px;
-      }
-
-      &:hover {
-        .glyphicon,
-        .fa,
-        .fi {
-          font-size: 28px;
-          top: 2px;
-        }
-
-        .fa,
-        .fi {
-          vertical-align: -5px;
-        }
-
-        .glyphicon {
-          vertical-align: -6px;
-        }
-      }
-    }
-  }
-}

-{
-  "name": "UIIcons",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Icons.js"
-}

-import React from 'react';
-import {
-  Row,
-  Col,
-  Breadcrumb,
-  BreadcrumbItem,
-  Button,
-  Jumbotron,
-  Container,
-} from 'reactstrap';
-
-const Jumb = () => (
-  <div>
-    <Breadcrumb>
-      <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
-      <BreadcrumbItem active>UI Jumbotron</BreadcrumbItem>
-    </Breadcrumb>
-    <Jumbotron fluid>
-      <Container fluid>
-        <h1 className="display-3">Fluid jumbotron</h1>
-        <p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
-      </Container>
-    </Jumbotron>
-    <Row>
-      <Col xs={12} md={8}>
-        <Jumbotron>
-          <h1 className="display-3">Hello, world!</h1>
-          <p className="lead">This is a simple hero unit, a simple Jumbotron-style component for calling extra attention to featured content or information.</p>
-          <hr className="my-2" />
-          <p>It uses utility classes for typgraphy and spacing to space content out within the larger container.</p>
-          <p className="lead">
-            <Button color="primary">Learn More</Button>
-          </p>
-        </Jumbotron>
-      </Col>
-    </Row>
-  </div>
-);
-
-export default Jumb;

-{
-  "name": "Jumbotron",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Jumbotron.js"
-}

-import React from 'react';
-import {
-  Row, Col,
-} from 'reactstrap';
-import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc';
-import SortableTree from 'react-sortable-tree';
-
-import Widget from '../../../../components/Widget';
-
-import './ListGroups.scss';
-
-const SortableItem = SortableElement(({ value }) => <li className="list-group-item">
-  <i className="fa fa-sort" />
-  <button className="close flex-last ml-auto" data-dismiss="alert">&times;</button>
-  &nbsp;&nbsp;&nbsp; {value.id} &nbsp;&nbsp;&nbsp;
-  {value.text}
-</li>);
-
-
-const SortableList = SortableContainer(({ items }) => (
-  <ul className="list-group list-group-sortable mt-xs">
-    {items.map((value, index) => (
-      <SortableItem key={`item-${index.toString()}`} index={index} value={value} />
-      ))}
-  </ul>
-  ));
-
-const NestableItem = SortableElement(({ value }) => {
-  if (value.children) {
-    return (
-      <li className="dd-item">
-        <div className="dd-handle" data-id={value.id}> {value.text} </div>
-        <ol className="dd-list">
-          {value.children.map((child, index) => (
-            <NestableItem key={`nest-${index.toString()}`} index={index} value={child} />
-          ))}
-        </ol>
-      </li>);
-  }
-  return (
-    <li className="dd-item">
-      <div className="dd-handle" data-id={value.id}> {value.text} </div>
-    </li>
-  );
-});
-
-class ListGroups extends React.Component {
-
-  constructor() {
-    super();
-    this.state = {
-      nestableFirstItems: [{ id: 1, title: 'Item 1' }, {
-        id: 2,
-        expanded: true,
-        title: 'Item 2',
-        children: [{ id: 3, title: 'Item 3' }, { id: 4, title: 'Item 4' }, {
-          id: 5,
-          title: 'Item 5',
-          expanded: true,
-          children: [{ id: 6, title: 'Item 6' }, {
-            id: 7, title: 'Item 7',
-          }, {
-            id: 8, title: 'Item 8',
-          }],
-        }, { id: 9, title: 'Item 9' }],
-      }],
-      nestableSecondItems: [{ id: 13, title: 'Item 13' }, { id: 14, title: 'Item 14' }, {
-        id: 15,
-        expanded: true,
-        title: 'Item 15',
-        children: [{ id: 16, title: 'Item 16' }, { id: 17, title: 'Item 17' }, {
-          id: 18, title: 'Item 18',
-        }],
-
-      }],
-      sortableList: [{
-        id: '03', text: ' Barnard\'s Star',
-      }, {
-        id: '01', text: 'The Sun',
-      }, {
-        id: '04', text: 'Wolf 359',
-      }, {
-        id: '02', text: 'Proxima Centauri',
-      }, {
-        id: '05', text: 'Lalande 21185',
-      }],
-    };
-  }
-
-  onSortEnd = ({ oldIndex, newIndex }) => {
-    this.setState({
-      sortableList: arrayMove(this.state.sortableList, oldIndex, newIndex),
-    });
-  };
-
-  render() {
-    return (
-      <div>
-        <ol className="breadcrumb">
-          <li className="breadcrumb-item">YOU ARE HERE</li>
-          <li className="breadcrumb-item active">UI List Groups</li>
-        </ol>
-        <h1 className="page-title">Lists - <span className="fw-semi-bold">Sortable Groups</span>
-        </h1>
-        <Widget
-          title={<h4> Grouped <span className="fw-semi-bold">Lists</span></h4>}
-          close refresh settings
-        >
-          <h3>Closest <span className="fw-semi-bold">Stars</span></h3>
-          <p>
-            Try to play around with this list. Are you ready to pass an exam on astronomy?
-          </p>
-
-          <SortableList items={this.state.sortableList} onSortEnd={this.onSortEnd} />
-        </Widget>
-
-        <Widget
-          title={<h3>Nestable <span className="fw-semi-bold">List</span></h3>}
-          close refresh settings
-        >
-          <p className="fs-mini">
-            There is a scientific theory that you can arrange this list in such way that there will
-            be no more saddness
-            in the whole world. Can you? Touch devices supported
-          </p>
-          <Row className="nestable">
-            <Col md="6" xs="12" className="mb-xs">
-              <SortableTree
-                treeData={this.state.nestableFirstItems}
-                onChange={nestableFirstItems => this.setState({ nestableFirstItems })}
-              />
-            </Col>
-            <Col md="6">
-              <SortableTree
-                treeData={this.state.nestableSecondItems}
-                onChange={nestableSecondItems => this.setState({ nestableSecondItems })}
-              />
-            </Col>
-          </Row>
-        </Widget>
-
-      </div>
-    );
-  }
-
-}
-
-export default ListGroups;

-@import '../../../../styles/app';
-
-.list-group-sortable {
-  > .list-group-item {
-    margin-bottom: 0;
-    border-radius: $border-radius;
-
-    + .list-group-item {
-      margin-top: $spacer;
-    }
-  }
-
-  > .list-group-item-placeholder {
-    border: 1px dashed $gray-300;
-    background-color: $gray-600;
-  }
-
-  &:last-of-type > .list-group-item:last-child {
-    border-bottom: 1px solid $list-group-border-color;
-  }
-}
-
-.nestable {
-  min-height: 600px;
-}

-{
-  "name": "UIListGroups",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./ListGroups.js"
-}

-import React from 'react';
-import {
-  Row,
-  Col,
-  Breadcrumb,
-  BreadcrumbItem,
-  Button,
-  Modal,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  Container,
-} from 'reactstrap';
-
-import Widget from '../../../../components/Widget';
-
-class ModalExample extends React.Component {
-  state = {
-    demo: false,
-    verticallyCentered: false,
-    large: false,
-    small: false,
-    launch: false,
-  }
-
-  toggle(id) {
-    this.setState(prevState => ({
-      [id]: !prevState[id],
-    }));
-  }
-
-  render() {
-    const { demo, scrollingLong, large, small, launch } = this.state;
-    return (
-      <div>
-        <Breadcrumb>
-          <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
-          <BreadcrumbItem active>UI Modal</BreadcrumbItem>
-        </Breadcrumb>
-        <h1 className="page-title">Modal - <span className="fw-semi-bold">Examples</span></h1>
-        <Row>
-          <Col xs={12} md={6}>
-            <Widget
-              className="mb-xlg"
-              title={<h5>Live <span className="fw-semi-bold">Demo</span>
-              </h5>} close collapse
-            >
-              <p>
-                Toggle a working modal demo by clicking the button below. It
-                will slide down and fade in from the top of the page.
-              </p>
-              <Button className="mr-sm" color="primary" onClick={() => this.toggle('demo')}>Demo</Button>
-              <Button color="primary" onClick={() => this.toggle('scrollingLong')}>Scrolling long content</Button>
-            </Widget>
-            <Widget
-              title={<h5>Optional <span className="fw-semi-bold">Sizes</span></h5>}
-              close collapse
-            >
-              <p>
-              Modals have two optional sizes, available via modifier .modal-sm and .modal-lg
-              classes to be placed on a .modal-dialog. These sizes kick in at certain
-              breakpoints to avoid horizontal scrollbars on narrower viewports.
-              </p>
-              <Button className="mr-sm" color="primary" onClick={() => this.toggle('large')}>Large modal</Button>
-              <Button color="primary" onClick={() => this.toggle('small')}>Small modal</Button>
-            </Widget>
-          </Col>
-          <Col xs={12} md={6}>
-            <Widget
-              className="mb-xlg"
-              title={<h5>Using <span className="fw-semi-bold">Grid</span> </h5>}
-              close collapse
-            >
-              <p>
-                Utilize the Bootstrap grid system within a modal by nesting <code>&lt;Container fluid&gt;</code> within
-                the <code>&lt;ModalBody&gt;</code>. Then, use the normal grid system classes as you would anywhere else.
-              </p>
-              <div className="bg-light p-3">
-                <Button color="primary" onClick={() => this.toggle('launch')}>Launch</Button>
-                <pre className="bg-light border-0 w-100 h-100">
-                  <code className="text-danger">{'<Container fluid>\n'}</code>
-                  <code className="text-success">{'  <Row>\n'}</code>
-                  <code className="text-info">{'    <Col md={4}>\n'}</code>
-                  <code>{'      .col-md-4\n'}</code>
-                  <code className="text-info">{'    </Col>\n'}</code>
-                  <code className="text-info">{'    <Col md={4} className="ml-auto">\n'}</code>
-                  <code>{'      .col-md-4 .ml-auto\n'}</code>
-                  <code className="text-info">{'    </Col>\n'}</code>
-                  <code className="text-success">{'  </Row>\n'}</code>
-                  <code className="text-success">{'  <Row>\n'}</code>
-                  <code className="text-info">{'    <Col md={3} className="ml-auto">\n'}</code>
-                  <code>{'      .col-md-3 .ml-auto\n'}</code>
-                  <code className="text-info">{'    </Col>\n'}</code>
-                  <code className="text-info">{'    <Col md={4} className="ml-auto">\n'}</code>
-                  <code>{'      .col-md-4 .ml-auto\n'}</code>
-                  <code className="text-info">{'    </Col>\n'}</code>
-                  <code className="text-success">{'  </Row>\n'}</code>
-                  <code className="text-success">{'  <Row>\n'}</code>
-                  <code className="text-info">{'    <Col md={6} className="ml-auto">\n'}</code>
-                  <code>{'      .col-md-6 .ml-auto\n'}</code>
-                  <code className="text-info">{'    </Col>\n'}</code>
-                  <code className="text-success">{'  </Row>\n'}</code>
-                  <code className="text-danger">{'</Container>'}</code>
-                </pre>
-              </div>
-            </Widget>
-          </Col>
-        </Row>
-
-        {/* Modals */}
-        <Modal isOpen={demo} toggle={() => this.toggle('demo')}>
-          <ModalHeader toggle={() => this.toggle('demo')}>Modal title</ModalHeader>
-          <ModalBody className="bg-white">
-            ...
-          </ModalBody>
-          <ModalFooter>
-            <Button color="secondary" onClick={() => this.toggle('demo')}>Close</Button>
-            <Button color="primary">Save changes</Button>
-          </ModalFooter>
-        </Modal>
-
-        <Modal isOpen={scrollingLong} toggle={() => this.toggle('scrollingLong')}>
-          <ModalHeader toggle={() => this.toggle('scrollingLong')}>Long content</ModalHeader>
-          <ModalBody className="bg-white">
-            <p>
-              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-              Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s,
-              when an unknown printer took a galley of type and scrambled it to make a type
-              specimen book. It has survived not only five centuries, but also the leap
-              into electronic typesetting, remaining essentially unchanged. It was popularised
-              in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
-              and more recently with desktop publishing software like Aldus PageMaker including
-              versions of Lorem Ipsum.
-            </p>
-            <p>
-              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-              Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s,
-              when an unknown printer took a galley of type and scrambled it to make a type
-              specimen book. It has survived not only five centuries, but also the leap
-              into electronic typesetting, remaining essentially unchanged. It was popularised
-              in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
-              and more recently with desktop publishing software like Aldus PageMaker including
-              versions of Lorem Ipsum.
-            </p>
-            <p>
-              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-              Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s,
-              when an unknown printer took a galley of type and scrambled it to make a type
-              specimen book. It has survived not only five centuries, but also the leap
-              into electronic typesetting, remaining essentially unchanged. It was popularised
-              in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
-              and more recently with desktop publishing software like Aldus PageMaker including
-              versions of Lorem Ipsum.
-            </p>
-            <p>
-              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-              Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s,
-              when an unknown printer took a galley of type and scrambled it to make a type
-              specimen book. It has survived not only five centuries, but also the leap
-              into electronic typesetting, remaining essentially unchanged. It was popularised
-              in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
-              and more recently with desktop publishing software like Aldus PageMaker including
-              versions of Lorem Ipsum.
-            </p>
-            <p>
-              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-              Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s,
-              when an unknown printer took a galley of type and scrambled it to make a type
-              specimen book. It has survived not only five centuries, but also the leap
-              into electronic typesetting, remaining essentially unchanged. It was popularised
-              in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
-              and more recently with desktop publishing software like Aldus PageMaker including
-              versions of Lorem Ipsum.
-            </p>
-          </ModalBody>
-          <ModalFooter>
-            <Button color="secondary" onClick={() => this.toggle('scrollingLong')}>Close</Button>
-            <Button color="primary">Save changes</Button>
-          </ModalFooter>
-        </Modal>
-
-        <Modal size="lg" isOpen={large} toggle={() => this.toggle('large')}>
-          <ModalHeader toggle={() => this.toggle('large')}>Large modal</ModalHeader>
-          <ModalBody className="bg-white">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. In, illum harum?
-            Quidem, quisquam, natus repellat debitis veniam quia facilis magni tempora
-            cupiditate odio vitae? Eligendi nisi consequuntur vero tenetur nemo!
-          </ModalBody>
-          <ModalFooter>
-            <Button color="secondary" onClick={() => this.toggle('large')}>Close</Button>
-            <Button color="primary">Save changes</Button>
-          </ModalFooter>
-        </Modal>
-
-        <Modal size="sm" isOpen={small} toggle={() => this.toggle('small')}>
-          <ModalHeader toggle={() => this.toggle('small')}>Small modal</ModalHeader>
-          <ModalBody className="bg-white">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. In, illum harum?
-            Quidem, quisquam, natus repellat debitis veniam quia facilis magni tempora
-            cupiditate odio vitae? Eligendi nisi consequuntur vero tenetur nemo!
-          </ModalBody>
-          <ModalFooter>
-            <Button color="secondary" onClick={() => this.toggle('small')}>Close</Button>
-            <Button color="primary">Save changes</Button>
-          </ModalFooter>
-        </Modal>
-
-        <Modal isOpen={launch} toggle={() => this.toggle('launch')}>
-          <ModalHeader toggle={() => this.toggle('launch')}>Small modal</ModalHeader>
-          <ModalBody className="bg-white text-white">
-            <Container fluid>
-              <Row>
-                <Col md={4}><div className="h-100 w-100 bg-primary p-2">.col-md-4</div></Col>
-                <Col md={4} className="ml-auto"><div className="h-100 w-100 bg-primary p-2">.col-md-4 .ml-auto</div></Col>
-              </Row>
-              <Row className="mt-sm">
-                <Col md={3} className="ml-auto"><div className="h-100 w-100 bg-primary p-2">.col-md-3 .ml-auto</div></Col>
-                <Col md={4} className="ml-auto"><div className="h-100 w-100 bg-primary p-2">.col-md-4 .ml-auto</div></Col>
-              </Row>
-              <Row className="mt-sm">
-                <Col md={6} className="ml-auto"><div className="h-100 w-100 bg-primary p-2">.col-md-6 .ml-auto</div></Col>
-              </Row>
-            </Container>
-          </ModalBody>
-          <ModalFooter>
-            <Button color="secondary" onClick={() => this.toggle('launch')}>Close</Button>
-            <Button color="primary">Save changes</Button>
-          </ModalFooter>
-        </Modal>
-      </div>
-    );
-  }
-}
-
-
-export default ModalExample;

-{
-  "name": "Modal",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Modal.js"
-}

-import React, { Component } from 'react';
-import {
-  Row,
-  Col,
-  Breadcrumb,
-  BreadcrumbItem,
-  Nav,
-  NavItem,
-  NavLink,
-  Dropdown,
-  DropdownToggle,
-  DropdownMenu,
-  DropdownItem,
-} from 'reactstrap';
-
-import Widget from '../../../../components/Widget';
-
-class NavExamples extends Component {
-  state = {
-    isDropdownOpened: false,
-  };
-
-  toggleDropdown = () => {
-    this.setState(prevState => ({
-      isDropdownOpened: !prevState.isDropdownOpened,
-    }));
-  }
-
-  render() {
-    return (
-      <div>
-        <Breadcrumb>
-          <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
-          <BreadcrumbItem active>UI Nav</BreadcrumbItem>
-        </Breadcrumb>
-        <Row>
-          <Col xs={12} md={6}>
-            <Widget
-              title={<h5>Base <span className="fw-semi-bold">Nav</span></h5>}
-              close collapse
-            >
-              <p>
-                Navigation available in Bootstrap share general markup and styles,
-                from the base .nav class to the active and disabled states. Swap
-                modifier classes to switch between each style.
-              </p>
-              <div className="bg-light p-3">
-                <Nav>
-                  <NavItem>
-                    <NavLink href="#">Link</NavLink>
-                  </NavItem>
-                  <NavItem>
-                    <NavLink href="#">Link</NavLink>
-                  </NavItem>
-                  <NavItem>
-                    <NavLink href="#">Another Link</NavLink>
-                  </NavItem>
-                  <NavItem>
-                    <NavLink disabled href="#">Disabled Link</NavLink>
-                  </NavItem>
-                </Nav>
-                <pre className="bg-light border-0 w-100 h-100">
-                  <code className="text-danger">{'<Nav>\n'}</code>
-                  <code className="text-info">{'  <NavItem>\n'}</code>
-                  <code className="text-warning">{'    <NavLink href="#">\n'}</code>
-                  <code>{'      Link\n'}</code>
-                  <code className="text-warning">{'    </NavLink>\n'}</code>
-                  <code className="text-info">{'  </NavItem>\n'}</code>
-
-                  <code className="text-info">{'  <NavItem>\n'}</code>
-                  <code className="text-warning">{'    <NavLink href="#">\n'}</code>
-                  <code>{'      Link\n'}</code>
-                  <code className="text-warning">{'    </NavLink>\n'}</code>
-                  <code className="text-info">{'  </NavItem>\n'}</code>
-
-                  <code className="text-info">{'  <NavItem>\n'}</code>
-                  <code className="text-warning">{'    <NavLink href="#">\n'}</code>
-                  <code>{'      Another Link\n'}</code>
-                  <code className="text-warning">{'    </NavLink>\n'}</code>
-                  <code className="text-info">{'  </NavItem>\n'}</code>
-
-                  <code className="text-info">{'  <NavItem>\n'}</code>
-                  <code className="text-warning">{'    <NavLink disabled href="#">\n'}</code>
-                  <code>{'      Disabled Link\n'}</code>
-                  <code className="text-warning">{'    </NavLink>\n'}</code>
-                  <code className="text-info">{'  </NavItem>\n'}</code>
-                  <code className="text-danger">{'</Nav>'}</code>
-                </pre>
-              </div>
-              <h5 className="mt">With dropdown</h5>
-              <Nav className="bg-light p-2">
-                <NavItem>
-                  <NavLink href="#">Link</NavLink>
-                </NavItem>
-                <Dropdown isOpen={this.state.isDropdownOpened} toggle={this.toggleDropdown}>
-                  <DropdownToggle nav caret>
-                    Dropdown
-                  </DropdownToggle>
-                  <DropdownMenu>
-                    <DropdownItem header>Header</DropdownItem>
-                    <DropdownItem disabled>Action</DropdownItem>
-                    <DropdownItem>Another Action</DropdownItem>
-                    <DropdownItem divider />
-                    <DropdownItem>Another Action</DropdownItem>
-                  </DropdownMenu>
-                </Dropdown>
-                <NavItem>
-                  <NavLink href="#">Another Link</NavLink>
-                </NavItem>
-                <NavItem>
-                  <NavLink disabled href="#">Disabled Link</NavLink>
-                </NavItem>
-              </Nav>
-            </Widget>
-          </Col>
-          <Col xs={12} md={6}>
-            <Widget
-              title={<h5>Tabs & Pills</h5>}
-              close collapse
-            >
-              <p>
-                Takes the basic <code>&lt;Nav&gt;</code> from above and adds the <code>tabs</code> property to generate a
-                tabbed interface. Use them to create tabbable regions with our tab
-                JavaScript plugin.
-              </p>
-              <div className="bg-light p-3">
-                <Nav tabs>
-                  <NavItem>
-                    <NavLink href="#" active>Link</NavLink>
-                  </NavItem>
-                  <NavItem>
-                    <NavLink href="#">Link</NavLink>
-                  </NavItem>
-                  <NavItem>
-                    <NavLink href="#">Another Link</NavLink>
-                  </NavItem>
-                  <NavItem>
-                    <NavLink disabled href="#">Disabled Link</NavLink>
-                  </NavItem>
-                </Nav>
-                <pre className="bg-light border-0 w-100 h-100">
-                  <code className="text-danger">{'<Nav tabs>\n'}</code>
-                  <code className="text-info">{'  <NavItem>\n'}</code>
-                  <code className="text-warning">{'    <NavLink href="#">\n'}</code>
-                  <code>{'      Link\n'}</code>
-                  <code className="text-warning">{'    </NavLink>\n'}</code>
-                  <code className="text-info">{'  </NavItem>\n'}</code>
-
-                  <code className="text-info">{'  <NavItem>\n'}</code>
-                  <code className="text-warning">{'    <NavLink href="#">\n'}</code>
-                  <code>{'      Link\n'}</code>
-                  <code className="text-warning">{'    </NavLink>\n'}</code>
-                  <code className="text-info">{'  </NavItem>\n'}</code>
-
-                  <code className="text-info">{'  <NavItem>\n'}</code>
-                  <code className="text-warning">{'    <NavLink href="#">\n'}</code>
-                  <code>{'      Another Link\n'}</code>
-                  <code className="text-warning">{'    </NavLink>\n'}</code>
-                  <code className="text-info">{'  </NavItem>\n'}</code>
-
-                  <code className="text-info">{'  <NavItem>\n'}</code>
-                  <code className="text-warning">{'    <NavLink disabled href="#">\n'}</code>
-                  <code>{'      Disabled Link\n'}</code>
-                  <code className="text-warning">{'    </NavLink>\n'}</code>
-                  <code className="text-info">{'  </NavItem>\n'}</code>
-                  <code className="text-danger">{'</Nav>'}</code>
-                </pre>
-              </div>
-              <p className="mt">Do the same thing with the <code>pills</code> property.</p>
-              <div className="bg-light p-3">
-                <Nav pills>
-                  <NavItem>
-                    <NavLink href="#" active>Link</NavLink>
-                  </NavItem>
-                  <NavItem>
-                    <NavLink href="#">Link</NavLink>
-                  </NavItem>
-                  <NavItem>
-                    <NavLink href="#">Another Link</NavLink>
-                  </NavItem>
-                  <NavItem>
-                    <NavLink disabled href="#">Disabled Link</NavLink>
-                  </NavItem>
-                </Nav>
-              </div>
-            </Widget>
-          </Col>
-        </Row>
-      </div>
-    );
-  }
-}
-
-export default NavExamples;

-{
-  "name": "Nav",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Nav.js"
-}

-import React, { Component } from 'react';
-import {
-  Row,
-  Col,
-  Breadcrumb,
-  BreadcrumbItem,
-  Navbar,
-  NavbarBrand,
-  NavbarToggler,
-  Collapse,
-  Nav,
-  NavItem,
-  NavLink,
-} from 'reactstrap';
-
-import Widget from '../../../../components/Widget';
-
-class NavbarExamples extends Component {
-  state = {
-    navs: [false, false, false, false],
-  }
-
-  toggle(id) {
-    const newState = Array(4).fill(false);
-
-    if (!this.state.navs[id]) {
-      newState[id] = true;
-    }
-
-    this.setState({ navs: newState });
-  }
-  render() {
-    return (
-      <div>
-        <Breadcrumb>
-          <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
-          <BreadcrumbItem active>UI Navbar</BreadcrumbItem>
-        </Breadcrumb>
-        <Row>
-          <Col xs={12} md={9}>
-            <Widget
-              title={<h5>Navbar <span className="fw-semi-bold">Example</span></h5>}
-              close collapse
-            >
-              <p>Here’s what you need to know before getting started with the navbar:</p>
-              <ui>
-                <li>Navbars require a wrapping <code>&lt;Navbar&gt;</code> with <code>expand=&quot;*&quot;</code> for
-                    responsive collapsing and color scheme classes.</li>
-                <li>Navbars and their contents are fluid by default. Use optional containers
-                  to limit their horizontal width.</li>
-                <li>Use our spacing and flex utility classes for controlling spacing and alignment within navbars.</li>
-                <li>Navbars are responsive by default, but you can easily modify them to change that. Responsive
-                  behavior depends on our Collapse JavaScript plugin.</li>
-                <li>Navbars are hidden by default when printing. Force them to be printed by adding <code>.d-print</code>
-                to the <code>.navbar</code>. See the display utility class.</li>
-              </ui>
-              <Navbar className="px-2 mt-lg" color="light" light expand="md">
-                <NavbarBrand href="/">Navbar</NavbarBrand>
-                <NavbarToggler className="ml-auto" onClick={() => this.toggle(0)} />
-                <Collapse isOpen={this.state.navs[0]} navbar>
-                  <Nav className="ml-auto" navbar>
-                    <NavItem>
-                      <NavLink>Home</NavLink>
-                    </NavItem>
-                    <NavItem>
-                      <NavLink>Features</NavLink>
-                    </NavItem>
-                    <NavItem>
-                      <NavLink>Pricing</NavLink>
-                    </NavItem>
-                    <NavItem>
-                      <NavLink disabled>Disabled</NavLink>
-                    </NavItem>
-                  </Nav>
-                </Collapse>
-              </Navbar>
-            </Widget>
-          </Col>
-          <Col xs={12} md={9}>
-            <Widget
-              title={<h5>Navbar <span className="fw-semi-bold">Example</span></h5>}
-              close collapse
-            >
-              <p>Theming the navbar has never been easier thanks to the combination of
-                theming classes and background-color utilities. Choose from <code>color=&quot;light&quot;</code>
-                for use with light background colors, or <code>color=&quot;dark&quot;</code> for dark background
-                colors. Then, customize with <code>.bg-*</code> utilities.</p>
-              <Navbar className="px-2 mt-lg" color="dark" dark expand="md">
-                <NavbarBrand href="/">Navbar</NavbarBrand>
-                <NavbarToggler className="ml-auto" onClick={() => this.toggle(1)} />
-                <Collapse isOpen={this.state.navs[1]} navbar>
-                  <Nav className="ml-auto" navbar>
-                    <NavItem>
-                      <NavLink>Home</NavLink>
-                    </NavItem>
-                    <NavItem>
-                      <NavLink>Features</NavLink>
-                    </NavItem>
-                    <NavItem>
-                      <NavLink>Pricing</NavLink>
-                    </NavItem>
-                    <NavItem>
-                      <NavLink disabled>Disabled</NavLink>
-                    </NavItem>
-                  </Nav>
-                </Collapse>
-              </Navbar>
-              <Navbar className="px-2 mt-lg" color="primary" dark expand="md">
-                <NavbarBrand href="/">Navbar</NavbarBrand>
-                <NavbarToggler className="ml-auto" onClick={() => this.toggle(2)} />
-                <Collapse isOpen={this.state.navs[2]} navbar>
-                  <Nav className="ml-auto" navbar>
-                    <NavItem>
-                      <NavLink>Home</NavLink>
-                    </NavItem>
-                    <NavItem>
-                      <NavLink>Features</NavLink>
-                    </NavItem>
-                    <NavItem>
-                      <NavLink>Pricing</NavLink>
-                    </NavItem>
-                    <NavItem>
-                      <NavLink disabled>Disabled</NavLink>
-                    </NavItem>
-                  </Nav>
-                </Collapse>
-              </Navbar>
-              <Navbar className="px-2 mt-lg" color="light" light expand="md">
-                <NavbarBrand href="/">Navbar</NavbarBrand>
-                <NavbarToggler className="ml-auto" onClick={() => this.toggle(3)} />
-                <Collapse isOpen={this.state.navs[3]} navbar>
-                  <Nav className="ml-auto" navbar>
-                    <NavItem>
-                      <NavLink>Home</NavLink>
-                    </NavItem>
-                    <NavItem>
-                      <NavLink>Features</NavLink>
-                    </NavItem>
-                    <NavItem>
-                      <NavLink>Pricing</NavLink>
-                    </NavItem>
-                    <NavItem>
-                      <NavLink disabled>Disabled</NavLink>
-                    </NavItem>
-                  </Nav>
-                </Collapse>
-              </Navbar>
-            </Widget>
-          </Col>
-        </Row>
-      </div>
-    );
-  }
-}
-
-export default NavbarExamples;

-{
-  "name": "Navbar",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Navbar.js"
-}

-import React from 'react';
-import {
-  Row, Col, Button,
-} from 'reactstrap';
-/* eslint-disable */
-import 'imports-loader?$=jquery,this=>window!messenger/build/js/messenger';
-/* eslint-enable */
-
-import Widget from '../../../../components/Widget';
-import s from './Notifications.module.scss';
-
-// todo @franckeeva what about server side rendering? this will fail unless launched as lazy route
-const Messenger = window.Messenger;
-
-/* eslint-disable */
-function initializationMessengerCode() {
-  (function () {
-    let $,
-      FlatMessage,
-      spinner_template,
-      __hasProp = {}.hasOwnProperty,
-      __extends = function (child, parent) {
-        for (const key in parent) {
-          if (__hasProp.call(parent, key)) child[key] = parent[key];
-        }
-
-        function ctor() {
-          this.constructor = child;
-        }
-
-        ctor.prototype = parent.prototype;
-        child.prototype = new ctor();
-        child.__super__ = parent.prototype;
-        return child;
-      };
-
-    $ = jQuery;
-
-    spinner_template = '<div class="messenger-spinner">\n    <span class="messenger-spinner-side messenger-spinner-side-left">\n        <span class="messenger-spinner-fill"></span>\n    </span>\n    <span class="messenger-spinner-side messenger-spinner-side-right">\n        <span class="messenger-spinner-fill"></span>\n    </span>\n</div>';
-
-    FlatMessage = (function (_super) {
-      __extends(FlatMessage, _super);
-
-      function FlatMessage() {
-        return FlatMessage.__super__.constructor.apply(this, arguments);
-      }
-
-      FlatMessage.prototype.template = function (opts) {
-        let $message;
-        $message = FlatMessage.__super__.template.apply(this, arguments);
-        $message.append($(spinner_template));
-        return $message;
-      };
-
-      return FlatMessage;
-    }(Messenger.Message));
-
-    Messenger.themes.air = {
-      Message: FlatMessage,
-    };
-  }).call(window);
-}
-/* eslint-enable */
-
-class Notifications extends React.Component {
-  constructor() {
-    super();
-    this.addSuccessNotification = this.addSuccessNotification.bind(this);
-    this.addInfoNotification = this.addInfoNotification.bind(this);
-    this.addErrorNotification = this.addErrorNotification.bind(this);
-    this.toggleLocation = this.toggleLocation.bind(this);
-    this.state = {
-      locationClasses: 'messenger-fixed messenger-on-bottom messenger-on-right',
-    };
-  }
-
-
-  componentDidMount() {
-    initializationMessengerCode();
-    Messenger.options = {
-      extraClasses: this.state.locationClasses,
-      theme: 'air',
-    };
-    Messenger().post('Thanks for checking out Messenger!');
-  }
-
-  addSuccessNotification() {
-    Messenger().post({
-      extraClasses: this.state.locationClasses,
-      message: 'Showing success message was successful!',
-      type: 'success',
-      showCloseButton: true,
-    });
-    return false;
-  }
-
-  addInfoNotification() {
-    const msg = Messenger().post({
-      extraClasses: this.state.locationClasses,
-      message: 'Launching thermonuclear war...',
-      actions: {
-        cancel: {
-          label: 'cancel launch',
-          action: () => msg.update({
-            message: 'Thermonuclear war averted', type: 'success', actions: false,
-          }),
-        },
-      },
-    });
-
-    return false;
-  }
-
-  addErrorNotification() {
-    let i = 0;
-    Messenger().run({
-      errorMessage: 'Error destroying alien planet',
-      successMessage: 'Alien planet destroyed!',
-      extraClasses: this.state.locationClasses,
-      action(opts) {
-        /* eslint-disable */
-        if (++i < 3) {
-          return opts.error({
-            status: 500,
-            readyState: 0,
-            responseText: 0,
-          });
-        }
-        /* eslint-enable */
-        return opts.success();
-      },
-    });
-  }
-
-  toggleLocation(vertical = 'top', horizontal = '') {
-    let className = `messenger-fixed messenger-on-${vertical}`;
-    className += (horizontal === '') ? '' : ` messenger-on-${horizontal}`;
-    this.setState({
-      locationClasses: className,
-    });
-    Messenger.options = {
-      extraClasses: className,
-      theme: 'air',
-    };
-    Messenger();
-  }
-
-  render() {
-    return (
-      <div className={s.root}>
-        <ol className="breadcrumb">
-          <li className="breadcrumb-item">YOU ARE HERE</li>
-          <li className="breadcrumb-item active">UI Notifications</li>
-        </ol>
-        <h1 className="page-title">Messages - <span className="fw-semi-bold">Notifications</span>
-        </h1>
-
-        <Widget title={<h6> Messenger </h6>} close collapse settings>
-          <Row>
-            <Col lg="4" xs="12">
-              <h5 className="m-t-1">Layout options</h5>
-              <p>There are few position options available for notifications. You can click any of
-                them
-                to change notifications position:</p>
-              <div className="location-selector">
-                { /* eslint-disable */}
-                <div
-                  className="bit top left" onClick={() => {
-                    this.toggleLocation('top', 'left');
-                  }}
-                />
-                <div
-                  className="bit top right" onClick={() => {
-                    this.toggleLocation('top', 'right');
-                  }}
-                />
-                <div
-                  className="bit top" onClick={() => {
-                    this.toggleLocation('top', '');
-                  }}
-                />
-                <div
-                  className="bit bottom left" onClick={() => {
-                    this.toggleLocation('bottom', 'left');
-                  }}
-                />
-                <div
-                  className="bit bottom right" onClick={() => {
-                    this.toggleLocation('bottom', 'right');
-                  }}
-                />
-                <div
-                  className="bit bottom" onClick={() => {
-                    this.toggleLocation('bottom', '');
-                  }}
-                />
-                { /* eslint-enable */}
-              </div>
-            </Col>
-
-            <Col lg="4" xs="12">
-              <h5 className="m-t-1">Notification Types</h5>
-              <p>Different types of notifications for lost of use cases. Custom classes are also
-                supported.</p>
-              <p><Button color="info" id="show-info-message" onClick={this.addInfoNotification}>Info
-                Message</Button></p>
-              <p><Button color="danger" id="show-error-message" onClick={this.addErrorNotification}>Error
-                + Retry Message</Button></p>
-              <p><Button
-                color="success" id="show-success-message" onClick={this.addSuccessNotification}
-              >Success
-                Message</Button></p>
-            </Col>
-
-            <Col lg="4" xs="12">
-              <h5 className="m-t-1">Dead Simple Usage</h5>
-              <p>Just few lines of code to instantiate a notifications object. Does not require
-                passing any options:</p>
-              <pre><code>{'Messenger().post("Thanks for checking out Messenger!");'}</code></pre>
-              <p>More complex example:</p>
-              <pre>
-                <code>{'\nMessenger().post({\n  message: \'There was an explosion while processing your request.\',\n  type: \'error\',\n  showCloseButton: true\n});\n\n'}
-                </code>
-              </pre>
-            </Col>
-          </Row>
-        </Widget>
-      </div>
-    );
-  }
-}
-
-export default Notifications;

-@import '../../../../styles/app';
-
-.root {
-  :global {
-    .location-selector {
-      width: 100%;
-      height: 220px;
-      border: 1px dashed #bbb;
-      background-color: $white;
-      position: relative;
-    }
-
-    .location-selector .bit {
-      @include transition(background-color 0.15s ease-in-out);
-
-      background-color: $gray-300;
-      cursor: pointer;
-      position: absolute;
-    }
-
-    .location-selector .bit:hover {
-      background-color: $gray-400;
-    }
-
-    .location-selector .bit.top,
-    .location-selector .bit.bottom {
-      height: 25%;
-      width: 40%;
-      margin: 0 30%;
-    }
-
-    .location-selector .bit.top {
-      top: 0;
-    }
-
-    .location-selector .bit.bottom {
-      bottom: 0;
-    }
-
-    .location-selector .bit.right,
-    .location-selector .bit.left {
-      height: 20%;
-      width: 20%;
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    .location-selector .bit.right {
-      right: 0;
-    }
-
-    .location-selector .bit.left {
-      left: 0;
-    }
-  }
-}

-{
-  "name": "UINotifications",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Notifications.js"
-}

-import React, { Component } from 'react';
-import {
-  Row,
-  Col,
-  Breadcrumb,
-  BreadcrumbItem,
-  Button,
-  Popover,
-  PopoverHeader,
-  PopoverBody,
-  Tooltip,
-} from 'reactstrap';
-
-import Widget from '../../../../components/Widget';
-
-class PopoverExamples extends Component {
-  state = {
-    tooltips: [false, false, false, false, false, false],
-    popovers: [false, false, false, false, false, false],
-    tooltipOpen: false,
-  }
-
-  toggle(id, field) {
-    const newState = [...this.state[field]];
-    newState.fill(false);
-
-    if (!this.state[field][id]) {
-      newState[id] = true;
-    }
-
-    this.setState({
-      [field]: newState,
-    });
-  }
-
-  render() {
-    return (
-      <div>
-        <Breadcrumb>
-          <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
-          <BreadcrumbItem active>UI Badge</BreadcrumbItem>
-        </Breadcrumb>
-        <h1 className="page-title">Badge</h1>
-        <Row>
-          <Col xs={12} md={6}>
-            <Widget
-              className="mb-xlg"
-              title={<h5>Popover <span className="fw-semi-bold">Example</span></h5>}
-              close collapse
-            >
-              <Button
-                id="p-1" className="mr-xs" size="lg" color="danger"
-                onClick={() => this.toggle(0, 'popovers')}
-              >Click to toggle popover</Button>
-              <Button
-                id="p-2" color="danger" disabled
-                onClick={() => this.toggle(1, 'popovers')}
-              >Disabled button</Button>
-            </Widget>
-            <Widget
-              title={<h5>Popover <span className="fw-semi-bold">Directions</span></h5>}
-              close collapse
-            >
-              <Button
-                id="p-3" className="mr-xs mb-xs" color="info"
-                onClick={() => this.toggle(2, 'popovers')}
-              >Popover on top</Button>
-              <Button
-                id="p-4" className="mr-xs mb-xs" color="warning"
-                onClick={() => this.toggle(3, 'popovers')}
-              >Popover on right</Button>
-              <Button
-                id="p-5" className="mr-xs mb-xs" color="inverse"
-                onClick={() => this.toggle(4, 'popovers')}
-              >Popover on bottom</Button>
-              <Button
-                id="p-6" className="mr-xs mb-xs" color="default"
-                onClick={() => this.toggle(5, 'popovers')}
-              >Popover on left</Button>
-            </Widget>
-          </Col>
-          <Col xs={12} md={6}>
-            <Widget
-              className="mb-xlg"
-              title={<h5>Tooltip <span className="fw-semi-bold">Example</span></h5>}
-              close collapse
-            >
-              <Button id="t-1" className="mr-sm" size="lg" color="success">Tooltip</Button>
-              <Button id="t-2" color="success" disabled>Disabled button</Button>
-            </Widget>
-            <Widget
-              title={<h5>Tooltip <span className="fw-semi-bold">Directions</span></h5>}
-              close collapse
-            >
-              <Button id="t-3" className="mr-xs mb-xs" color="info">Tooltip on top</Button>
-              <Button id="t-4" className="mr-xs mb-xs" color="warning">Tooltip on right</Button>
-              <Button id="t-5" className="mr-xs mb-xs" color="inverse">Tooltip on bottom</Button>
-              <Button id="t-6" className="mr-xs mb-xs" color="default">Tooltip on left</Button>
-            </Widget>
-          </Col>
-        </Row>
-
-        {/* Popovers & Tooltips */}
-
-        <Popover placement="top" isOpen={this.state.popovers[0]} target="p-1" toggle={() => this.toggle(0, 'popovers')}>
-          <PopoverHeader>Popover Title</PopoverHeader>
-          <PopoverBody>
-            Sed posuere consectetur est at lobortis. Aenean eu leo quam.
-            Pellentesque ornare sem lacinia quam venenatis vestibulum.
-          </PopoverBody>
-        </Popover>
-        <Popover placement="top" isOpen={this.state.popovers[1]} target="p-2" toggle={() => this.toggle(1, 'popovers')}>
-          <PopoverHeader>Popover Title</PopoverHeader>
-          <PopoverBody>
-            Sed posuere consectetur est at lobortis. Aenean eu leo quam.
-            Pellentesque ornare sem lacinia quam venenatis vestibulum.
-          </PopoverBody>
-        </Popover>
-        <Popover placement="top" isOpen={this.state.popovers[2]} target="p-3" toggle={() => this.toggle(2, 'popovers')}>
-          <PopoverHeader>Popover Title</PopoverHeader>
-          <PopoverBody>
-            Sed posuere consectetur est at lobortis. Aenean eu leo quam.
-            Pellentesque ornare sem lacinia quam venenatis vestibulum.
-          </PopoverBody>
-        </Popover>
-        <Popover placement="right" isOpen={this.state.popovers[3]} target="p-4" toggle={() => this.toggle(3, 'popovers')}>
-          <PopoverHeader>Popover Title</PopoverHeader>
-          <PopoverBody>
-            Sed posuere consectetur est at lobortis. Aenean eu leo quam.
-            Pellentesque ornare sem lacinia quam venenatis vestibulum.
-          </PopoverBody>
-        </Popover>
-        <Popover placement="bottom" isOpen={this.state.popovers[4]} target="p-5" toggle={() => this.toggle(4, 'popovers')}>
-          <PopoverHeader>Popover Title</PopoverHeader>
-          <PopoverBody>
-            Sed posuere consectetur est at lobortis. Aenean eu leo quam.
-            Pellentesque ornare sem lacinia quam venenatis vestibulum.
-          </PopoverBody>
-        </Popover>
-        <Popover placement="left" isOpen={this.state.popovers[5]} target="p-6" toggle={() => this.toggle(5, 'popovers')}>
-          <PopoverHeader>Popover Title</PopoverHeader>
-          <PopoverBody>
-            Sed posuere consectetur est at lobortis. Aenean eu leo quam.
-            Pellentesque ornare sem lacinia quam venenatis vestibulum.
-          </PopoverBody>
-        </Popover>
-
-        <Tooltip placement="top" isOpen={this.state.tooltips[0]} toggle={() => this.toggle(0, 'tooltips')} target="t-1">
-          Hello world!
-        </Tooltip>
-        <Tooltip placement="top" isOpen={this.state.tooltips[1]} toggle={() => this.toggle(1, 'tooltips')} target="t-2">
-          Hello world!
-        </Tooltip>
-        <Tooltip placement="top" isOpen={this.state.tooltips[2]} toggle={() => this.toggle(2, 'tooltips')} target="t-3">
-          Top
-        </Tooltip>
-        <Tooltip placement="right" isOpen={this.state.tooltips[3]} toggle={() => this.toggle(3, 'tooltips')} target="t-4">
-          Right
-        </Tooltip>
-        <Tooltip placement="bottom" isOpen={this.state.tooltips[4]} toggle={() => this.toggle(4, 'tooltips')} target="t-5">
-          Bottom
-        </Tooltip>
-        <Tooltip placement="left" isOpen={this.state.tooltips[5]} toggle={() => this.toggle(5, 'tooltips')} target="t-6">
-          Left
-        </Tooltip>
-      </div>
-    );
-  }
-}
-
-export default PopoverExamples;

-{
-  "name": "Popovers",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Popovers.js"
-}

-import React from 'react';
-import {
-  Row,
-  Col,
-  Breadcrumb,
-  BreadcrumbItem,
-  Progress,
-} from 'reactstrap';
-
-import Widget from '../../../../components/Widget';
-
-const ProgressExamples = () => (
-  <div>
-    <Breadcrumb>
-      <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
-      <BreadcrumbItem active>UI Progress</BreadcrumbItem>
-    </Breadcrumb>
-    <h1 className="page-title">Progress</h1>
-    <Row>
-      <Col xs={12} md={6}>
-        <Widget
-          title={<h5>Progress <span className="fw-semi-bold">Example</span></h5>}
-          close collapse
-        >
-          <p>
-            Badges scale to match the size of the immediate parent element by
-            using relative font sizing and em units.
-          </p>
-          <Progress className="mb-sm" value="25" />
-          <Progress className="mb-sm" value="50" />
-          <Progress className="mb-sm" value="75" />
-          <Progress value="100" />
-        </Widget>
-      </Col>
-      <Col xs={12} md={6}>
-        <Widget
-          title={<h5>Backgrounds</h5>}
-          close collaple
-        >
-          <p>
-            Use background utility classes to change the appearance of
-            individual progress bars.
-          </p>
-          <Progress className="mb-sm" value="25" color="info" />
-          <Progress className="mb-sm" value="50" color="warning" />
-          <Progress className="mb-sm" value="75" color="danger" />
-          <Progress value="100" color="success" />
-        </Widget>
-      </Col>
-      <Col xs={12} md={6}>
-        <Widget
-          title={<h5>Labels</h5>}
-          close collapse
-        >
-          <p>
-            Add labels to your progress bars by placing text within the <code>&lt;Progress&gt;</code>
-          </p>
-          <Progress className="mb-sm" value="25">25%</Progress>
-          <Progress className="mb-sm" value="100" color="danger">Something was wrong!</Progress>
-          <Progress value="100" color="success">Completed!</Progress>
-        </Widget>
-      </Col>
-      <Col xs={12} md={6}>
-        <Widget
-          title={<h5>Size</h5>}
-          close collapse
-        >
-          <p>
-          We only set a height value on the <code>&lt;Progress&gt;</code>, so if you change that value the inner
-          bar will automatically resize accordingly. Also <code>.progress-sm</code> is available.
-          </p>
-          <Progress className="progress-sm mb-sm" value="25" color="dark">25%</Progress>
-          <Progress className="mb-sm" value="50" color="gray">50%</Progress>
-          <Progress value="75" color="secondary" style={{ height: '30px' }}>75%</Progress>
-        </Widget>
-      </Col>
-      <Col xs={12}>
-        <Widget
-          title={<h5><span className="fw-semi-bold">Striped</span> Progress</h5>}
-          close collapse
-        >
-          <Row>
-            <Col xs={12} md={6}>
-              <p>
-                Add <code>striped</code> property to any <code>&lt;Progress&gt;</code> to
-                apply a stripe via CSS gradient over the progress bar’s background color.
-              </p>
-              <Progress striped className="mb-sm" value="10" />
-              <Progress striped className="mb-sm" value="25" color="success" />
-              <Progress striped className="mb-sm" value="50" color="info" />
-              <Progress striped className="mb-sm" value="75" color="warning" />
-              <Progress striped value="100" color="danger" />
-            </Col>
-            <Col xs={12} md={6}>
-              <p>
-                The striped gradient can also be animated. Add <code>animated</code> property
-                to <code>&lt;Progress&gt;</code> to animate the stripes right to left via CSS3 animations.
-              </p>
-              <Progress animated striped className="mb-sm" value="10" color="danger" />
-              <Progress animated striped className="mb-sm" value="25" color="warning" />
-              <Progress animated striped className="mb-sm" value="50" color="info" />
-              <Progress animated striped className="mb-sm" value="75" color="success" />
-              <Progress animated striped value="100" />
-            </Col>
-          </Row>
-        </Widget>
-      </Col>
-    </Row>
-  </div>
-);
-
-export default ProgressExamples;

-{
-  "name": "Progress",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Progress.js"
-}

-/* eslint-disable */
-import React from 'react';
-import {
-  Row,
-  Col,
-  Button,
-  DropdownMenu,
-  TabContent,
-  TabPane,
-  Nav,
-  NavItem,
-  NavLink,
-  Collapse,
-  DropdownItem,
-  DropdownToggle,
-  UncontrolledDropdown
-} from 'reactstrap';
-import classnames from 'classnames';
-
-class TabsAccordion extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.toggleFirstTabs = this.toggleFirstTabs.bind(this);
-    this.toggleSecondTabs = this.toggleSecondTabs.bind(this);
-    this.toggleThirdTabs = this.toggleThirdTabs.bind(this);
-    this.toggleAccordionFirst = this.toggleAccordionFirst.bind(this);
-    this.state = {
-      activeFirstTab: 'tab11',
-      activeSecondTab: 'tab22',
-      activeThirdTab: 'tab31',
-      dropdownOpen: false,
-      accordionFirst: [false, false, false],
-      accordionSecond: [false, true, false],
-      accordionSecondContent: [{
-        title: 'Collapsible Group Item', body: ` Get base styles and flexible support for collapsible components like accordions and navigation.
-          Using the collapse plugin, we built a simple accordion by extending the panel component.`,
-      }, {
-        title: 'Normal Text Insertion', body: `
-        Why don't use Lore Ipsum? I think if some one says don't use lore ipsum it's very
-              controversial point. I think the opposite actually. Everyone knows what is lore ipsum
-              - it is easy to understand if text is lore ipsum. You'll automatically skip -
-              because you know - it's just non-informative stub. But what if there some text like
-              this one? You start to read it! But the goal of this text is different. The goal is
-              the example. So a bit of Lore Ipsum is always very good practice. Keep it in mind!`,
-      }, {
-        title: 'Check It',
-        body: ' Why don\'t use Lore Ipsum? I think if some one says don\'t use lore ipsum it\'s very controversial point. I think the opposite actually.',
-      }],
-
-      accordionFirstContent: [{
-        title: 'Collapsible Group Item', body: ` Get base styles and flexible support for collapsible components like accordions and navigation.
-          Using the collapse plugin, we built a simple accordion by extending the panel component.`,
-      }, {
-        title: 'Random from the Web', body: `
-        <p><span class="fw-semi-bold">Light Blue</span> - is a next generation admin template based
-        on the latest Metro design. There are few reasons we want to tell you, why we have created it:
-        We didn't like the darkness of most of admin templates, so we created this light one.
-        We didn't like the high contrast of most of admin templates, so we created this unobtrusive one.
-        We searched for a solution of how to make widgets look like real widgets, so we decided that
-        deep background - is what makes widgets look real.
-        </p>
-        <p class="no-margin text-muted"><em>- Some One</em></p>
-`,
-      }, {
-        title: 'Check It',
-        body: ' Why don\'t use Lore Ipsum? I think if some one says don\'t use lore ipsum it\'s very controversial point. I think the opposite actually.',
-      }],
-    };
-  }
-
-  toggleFirstTabs(tab) {
-    if (this.state.activeFirstTab !== tab) {
-      this.setState({
-        activeFirstTab: tab,
-      });
-    }
-  }
-
-  toggleSecondTabs(tab) {
-    if (this.state.activeSecondTab !== tab) {
-      this.setState({
-        activeSecondTab: tab,
-      });
-    }
-  }
-
-  toggleThirdTabs(tab) {
-    if (this.state.activeThirdTab !== tab) {
-      this.setState({
-        activeThirdTab: tab,
-      });
-    }
-  }
-
-  toggleAccordionFirst(id) {
-    const arr = [];
-    arr.length = this.state.accordionFirst.length;
-    arr.fill(false);
-    arr[id] = !this.state.accordionFirst[id];
-    this.setState({
-      accordionFirst: arr,
-    });
-  }
-
-  toggleAccordionSecond(id) {
-    const arr = [];
-    arr.length = this.state.accordionSecond.length;
-    arr.fill(false);
-    arr[id] = !this.state.accordionSecond[id];
-    this.setState({
-      accordionSecond: arr,
-    });
-  }
-
-  render() {
-    return (
-      <div>
-        <ol className="breadcrumb">
-          <li className="breadcrumb-item">YOU ARE HERE</li>
-          <li className="breadcrumb-item active">UI Tabs & Accordion</li>
-        </ol>
-        <h1 className="page-title">Tabs & Accordion - <span
-          className="fw-semi-bold"
-        >Components</span></h1>
-
-        {/* Tabs */}
-        <Row>
-          <Col md="6" xs="12">
-            <div className="clearfix">
-
-              <Nav tabs className="float-left bg-light">
-                <NavItem>
-                  <NavLink
-                    className={classnames({ active: this.state.activeFirstTab === 'tab11' })}
-                    onClick={() => { this.toggleFirstTabs('tab11'); }}
-                  >
-                    <span>Basic</span>
-                  </NavLink>
-                </NavItem>
-                <NavItem>
-                  <NavLink
-                    className={classnames({ active: this.state.activeFirstTab === 'tab12' })}
-                    onClick={() => { this.toggleFirstTabs('tab12'); }}
-                  >
-                    <span>Assumtion</span>
-                  </NavLink>
-                </NavItem>
-                <UncontrolledDropdown nav>
-                  <DropdownToggle nav caret
-                                  className={classnames({
-                                    active: this.state.activeFirstTab === 'tab13' ||
-                                    this.state.activeFirstTab === 'tab14'
-                                  })}>
-                    Dropdown
-                  </DropdownToggle>
-                  <DropdownMenu>
-                    <DropdownItem onClick={() => {
-                      this.toggleFirstTabs('tab13');
-                    }}>@fat
-                    </DropdownItem>
-                    <DropdownItem onClick={() => {
-                      this.toggleFirstTabs('tab14');
-                    }}>@mdo
-                    </DropdownItem>
-                  </DropdownMenu>
-                </UncontrolledDropdown>
-              </Nav>
-            </div>
-            {/* tab content */}
-
-            <TabContent className='mb-lg' activeTab={this.state.activeFirstTab}>
-              <TabPane tabId="tab11">
-                <h3>Tabs-enabled widget</h3>
-                <p>You will never know exactly how something will go until you try it.</p>
-                <p>{`You can think three hundred times and still have no precise result. If you see
-                  attractive girl all you need to do is to go and ask her to give you her phone.
-                  You don’t
-                  need to think about HOW it can turn out. All you have to do is to GO and DO IT.
-                  It
-                  should be super-fast and easy. No hesitation. You ask me: “What to do with these
-                  fearful thoughts preventing me from doing that?” The answer is to ignore them,
-                  because
-                  they can’t disappear immediately.`}</p>
-                <p>The same thing is for startups and ideas. If you have an idea right away after
-                  it appears in your mind you should go and make a first step to implement
-                  it. </p>
-                <div className="float-right">
-                  <Button color="inverse" className="mr-xs">Cancel</Button>
-                  <Button color="primary">Some button</Button>
-                </div>
-                <div className="clearfix"/>
-              </TabPane>
-
-              <TabPane tabId="tab12">
-                <p>{`Why don't use Lore Ipsum? I think if some one says don't use lore ipsum it's
-                  very controversial
-                  point. I think the opposite actually. Everyone knows what is lore ipsum - it is
-                  easy to understand if text is lore ipsum.`}</p>
-                <div className="clearfix">
-                  <div className="btn-toolbar">
-                    <a className="btn btn-default">&nbsp;&nbsp;Check&nbsp;&nbsp;</a>
-                    <a className="btn btn-primary">&nbsp;&nbsp;Dance?&nbsp;&nbsp;</a>
-                  </div>
-                </div>
-              </TabPane>
-
-              <TabPane tabId="tab13">
-                <p> If you will think too much it will sink in the swamp of never implemented
-                  plans and
-                  ideas or will just go away or will be implemented by someone else.</p>
-                <p><strong>5 months of doing everything to achieve nothing.</strong></p>
-                <p>{`You'll automatically skip - because you know - it's just non-informative stub.
-                  But what if there some text like this one?`}</p>
-              </TabPane>
-
-              <TabPane tabId="tab14">
-                <blockquote className="blockquote-sm blockquote mb-xs">
-                  Plan it? Make it!
-                </blockquote>
-                <p>The same thing is for startups and ideas. If you have an idea right away after
-                  it appears
-                  in your mind you should go and make a first step to implement it.</p>
-              </TabPane>
-            </TabContent>
-
-          </Col>
-
-          <Col md="6" xs="12">
-            <Row>
-              <Col xs="12" className="mb-5">
-                <Nav className="bg-light" tabs>
-                  <NavItem>
-                    <NavLink
-                      className={classnames({ active: this.state.activeSecondTab === 'tab21' })}
-                      onClick={() => { this.toggleSecondTabs('tab21'); }}
-                    >
-                      <span>Basic</span>
-                    </NavLink>
-                  </NavItem>
-                  <NavItem>
-                    <NavLink
-                      className={classnames({ active: this.state.activeSecondTab === 'tab22' })}
-                      onClick={() => { this.toggleSecondTabs('tab22'); }}
-                    >
-                      <span>Assumtion</span>
-                    </NavLink>
-                  </NavItem>
-                  <NavItem>
-                    <NavLink
-                      className={classnames({ active: this.state.activeSecondTab === 'tab23' })}
-                      onClick={() => { this.toggleSecondTabs('tab23'); }}
-                    >
-                      <span>Works</span>
-                    </NavLink>
-                  </NavItem>
-                </Nav>
-
-                <TabContent className='mb-lg' activeTab={this.state.activeSecondTab}>
-                  <TabPane tabId="tab21">
-                    <p>
-                      I had an idea named Great Work. It was a service aimed to help people find
-                      their
-                      passion.
-                      Yes I know it sound crazy and super naïve but I worked on that. I started to
-                      work
-                      on
-                      planning, graphics, presentations, pictures, descriptions, articles,
-                      investments
-                      and so on.
-                      I worked on everything but not the project itself.
-                    </p>
-                  </TabPane>
-                  <TabPane tabId="tab22">
-                    <p>{`Why don't use Lore Ipsum? I think if some one says don't use lore ipsum it's
-                      very
-                      controversial
-                      point. I think the opposite actually. Everyone knows what is lore ipsum - it
-                      is
-                      easy to understand if text is lore ipsum.`}</p>
-                    <div className="clearfix">
-                      <div className="btn-toolbar">
-                        <Button color="danger">&nbsp;&nbsp;Check&nbsp;&nbsp;</Button>
-                        <Button color="default">&nbsp;&nbsp;Dance?&nbsp;&nbsp;</Button>
-                      </div>
-                    </div>
-                  </TabPane>
-                  <TabPane tabId="tab23">
-                    <p> If you will think too much it will sink in the swamp of never implemented
-                      plans
-                      and
-                      ideas or will just go away or will be implemented by someone else.</p>
-                    <p><strong>5 months of doing everything to achieve nothing.</strong></p>
-                    <p>{`You'll automatically skip - because you know - it's just non-informative
-                      stub.
-                      But what if there some text like this one?`}</p>
-                  </TabPane>
-                </TabContent>
-              </Col>
-            </Row>
-
-            <Row>
-              <Col xs="12">
-                <Nav className="bg-light" tabs>
-                  <NavItem>
-                    <NavLink
-                      className={classnames({ active: this.state.activeThirdTab === 'tab31' })}
-                      onClick={() => { this.toggleThirdTabs('tab31'); }}
-                    >
-                      <span>Basic</span>
-                    </NavLink>
-                  </NavItem>
-                  <NavItem>
-                    <NavLink
-                      className={classnames({ active: this.state.activeThirdTab === 'tab32' })}
-                      onClick={() => { this.toggleThirdTabs('tab32'); }}
-                    >
-                      <span>Assumtion</span>
-                    </NavLink>
-                  </NavItem>
-                  <NavItem>
-                    <NavLink
-                      className={classnames({ active: this.state.activeThirdTab === 'tab33' })}
-                      onClick={() => { this.toggleThirdTabs('tab33'); }}
-                    >
-                      <span>Works</span>
-                    </NavLink>
-                  </NavItem>
-                </Nav>
-
-                <TabContent className='mb-lg' activeTab={this.state.activeThirdTab}>
-                  <TabPane tabId="tab31">
-                    <p>
-                      I had an idea named Great Work. It was a service aimed to help people find
-                      their
-                      passion.
-                      Yes I know it sound crazy and super naïve but I worked on that. I started to
-                      work
-                      on
-                      planning, graphics, presentations, pictures, descriptions, articles,
-                      investments
-                      and so on.
-                      I worked on everything but not the project itself.
-                    </p>
-                  </TabPane>
-                  <TabPane tabId="tab32">
-                    <p>{`Why don't use Lore Ipsum? I think if some one says don't use lore ipsum it's
-                      very
-                      controversial
-                      point. I think the opposite actually. Everyone knows what is lore ipsum - it
-                      is
-                      easy to understand if text is lore ipsum.`}</p>
-                    <div className="clearfix">
-                      <div className="btn-toolbar">
-                        <Button color="danger">&nbsp;&nbsp;Check&nbsp;&nbsp;</Button>
-                        <Button color="default">&nbsp;&nbsp;Dance?&nbsp;&nbsp;</Button>
-                      </div>
-                    </div>
-                  </TabPane>
-                  <TabPane tabId="tab33">
-                    <p> If you will think too much it will sink in the swamp of never implemented
-                      plans
-                      and
-                      ideas or will just go away or will be implemented by someone else.</p>
-                    <p><strong>5 months of doing everything to achieve nothing.</strong></p>
-                    <p>{`You'll automatically skip - because you know - it's just non-informative
-                      stub.
-                      But what if there some text like this one?`}</p>
-                  </TabPane>
-                </TabContent>
-              </Col>
-            </Row>
-          </Col>
-        </Row>
-
-        {/* Accordion */}
-        <Row className="mt-xs">
-          <Col md="6" xs="12" className='mb-lg'>
-
-            {this.state.accordionFirstContent.map((element, index) => (
-              <div className="card panel mb-xs" key={`accord-one-${index.toString()}`}>
-                { /* eslint-disable */ }
-                <div
-                  className="card-header panel-header bg-light" role="button"
-                  onClick={() => { this.toggleAccordionFirst(index); }}
-                >
-                  { /* eslint-enable */ }
-                  <div className="mb-0">
-                   {/* eslint-disable-next-line */}
-                    <a className="accordion-toggle" role="button">
-                      {element.title}
-                      <i className={`fa fa-angle-down ${this.state.accordionFirst[index] ? 'expanded' : ''}`} />
-                    </a>
-                  </div>
-                </div>
-                <Collapse className="panel-body" isOpen={this.state.accordionFirst[index]}>
-                  <div className="card-body" dangerouslySetInnerHTML={{ __html: element.body }} />
-                </Collapse>
-              </div>))}
-          </Col>
-
-          <Col md="6" xs="12" className='mb-lg'>
-            {this.state.accordionSecondContent.map((element, index) => (<div className="card panel mb-xs" key={`accord-one-${index.toString()}`}>
-              { /* eslint-disable */ }
-              <div
-                className="card-header panel-header bg-light" role="button"
-                onClick={() => { this.toggleAccordionSecond(index); }}
-              >
-                { /* eslint-enable */ }
-                <div className="mb-0">
-                {/* eslint-disable-next-line */}
-                  <a className="accordion-toggle" role="button">
-                    {element.title}
-                    <i className="fa fa-angle-down float-right" />
-                  </a>
-                </div>
-              </div>
-              <Collapse className="panel-body" isOpen={this.state.accordionSecond[index]}>
-                <div className="card-body" dangerouslySetInnerHTML={{ __html: element.body }} />
-              </Collapse>
-            </div>))}
-          </Col>
-        </Row>
-
-      </div>);
-  }
-
-}
-
-export default TabsAccordion;

-{
-  "name": "UITabsAccordion",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./TabsAccordion.js"
-}

-import React from 'react';
-import {
-  Row,
-  Col,
-  Progress,
-} from 'reactstrap';
-
-import Widget from '../../../components/Widget';
-import LiveTile from './components/live-tile/LiveTile';
-import ChangesChart from './components/changes-chart/ChangesChart';
-import RealtimeTraffic from './components/realtime-traffic/RealtimeTraffic';
-import YearsMap from './components/years-map/YearsMap';
-import FlotCharts from './components/flot-charts/FlotCharts';
-import NasdaqSparkline from './components/nasdaq-sparkline-widget/nasdaqSparkline';
-import Skycon from '../../../components/Skycon/Skycon';
-import { Input, InputGroup, InputGroupAddon, Button } from 'reactstrap';
-import './Widgets.scss';
-
-import peopleA1 from '../../../images/people/a1.jpg';
-import peopleA2 from '../../../images/people/a2.jpg';
-import peopleA4 from '../../../images/people/a4.jpg';
-import peopleA6 from '../../../images/people/a6.jpg';
-import peopleA3 from '../../../images/people/a3.jpg';
-import avatar from '../../../images/avatar.png';
-import img18 from '../../../images/pictures/18.jpg';
-import img17 from '../../../images/pictures/17.jpg';
-
-class Widgets extends React.Component {
-  componentDidMount() {
-
-  }
-
-  render() {
-    return (
-      <div className="root">
-        <Row>
-          <Col lg={3} md={6} xs={12}>
-            <Widget className="">
-              <div className="clearfix">
-                <Row className="flex-nowrap">
-                  <Col xs={3}>
-                    <span className="widget-icon">
-                      <i className="fi flaticon-like text-primary" />
-                    </span>
-                  </Col>
-                  <Col xs="9">
-                    <h6 className="m-0">USERS GROWTH</h6>
-                    <p className="h2 m-0 fw-normal">4,332</p>
-                  </Col>
-                </Row>
-                <Row className="flex-nowrap">
-                  <Col xs={6}>
-                    <h6 className="m-0 text-muted">Registrations</h6>
-                    <p className="value5">+830</p>
-                  </Col>
-                  <Col xs="6">
-                    <h6 className="m-0 text-muted">Bounce Rate</h6>
-                    <p className="value5">4.5%</p>
-                  </Col>
-                </Row>
-              </div>
-            </Widget>
-          </Col>
-          <Col lg={3} md={6} xs={12}>
-            <Widget className="">
-              <div className="clearfix">
-                <Row className="flex-nowrap">
-                  <Col xs="3">
-                    <span className="widget-icon">
-                      <i className="fi flaticon-magic-wand text-info" />
-                    </span>
-                  </Col>
-                  <Col xs="9">
-                    <LiveTile
-                      data-mode="carousel" data-speed="750" data-delay="3000"
-                      data-height="57"
-                    >
-                      <div>
-                        <h6 className="m-0">VISITS TODAY</h6>
-                        <p className="h2 m-0 fw-normal">12,324</p>
-                      </div>
-                      <div>
-                        <h6 className="m-0">VISITS YESTERDAY</h6>
-                        <p className="h2 m-0 fw-normal">11,885</p>
-                      </div>
-                    </LiveTile>
-                  </Col>
-                </Row>
-                <Row className="flex-nowrap">
-                  <Col xs="6">
-                    <h6 className="m-0 text-muted">New Visitors</h6>
-                    <LiveTile
-                      data-mode="carousel" data-speed="750" data-delay="3000"
-                      data-height="25"
-                    >
-                      <div>
-                        <p className="value5">1,332</p>
-                      </div>
-                      <div>
-                        <p className="value5">20.1%</p>
-                      </div>
-                    </LiveTile>
-                  </Col>
-                  <Col xs="6">
-                    <h6 className="m-0 text-muted">Bounce Rate</h6>
-                    <LiveTile
-                      data-mode="carousel" data-speed="750" data-delay="3000"
-                      data-height="26"
-                    >
-                      <div>
-                        <p className="value5">217</p>
-                      </div>
-                      <div>
-                        <p className="value5">2.3%</p>
-                      </div>
-                    </LiveTile>
-                  </Col>
-                </Row>
-              </div>
-            </Widget>
-          </Col>
-          <Col lg={3} md={6} xs={12}>
-            <Widget className="">
-              <div className="clearfix">
-                <LiveTile
-                  data-mode="fade" data-speed="750" data-delay="4000"
-                  data-height="104"
-                >
-                  <div className="bg-white text-gray">
-                    <Row className="flex-nowrap">
-                      <Col xs={3}>
-                        <span className="widget-icon">
-                          <i className="fi flaticon-notebook-4" />
-                        </span>
-                      </Col>
-                      <Col xs="9">
-                        <h6 className="m-0">ORDERS</h6>
-                        <p className="h2 m-0 fw-normal">82,765</p>
-                      </Col>
-                    </Row>
-                    <Row className="flex-nowrap">
-                      <Col xs={6}>
-                        <h6 className="m-0">Avg. Time</h6>
-                        <p className="value5">2:56</p>
-                      </Col>
-                      <Col xs={6}>
-                        <h6 className="m-0">Last Week</h6>
-                        <p className="value5">374</p>
-                      </Col>
-                    </Row>
-                  </div>
-                  <div className="text-gray">
-                    <Row className="flex-nowrap">
-                      <Col xs={3}>
-                        <span className="widget-icon">
-                          <i className="fi flaticon-shuffle" />
-                        </span>
-                      </Col>
-                      <Col xs={9}>
-                        <h6 className="m-0">PICKED ORDERS</h6>
-                        <p className="h2 m-0 fw-normal">13.8%</p>
-                      </Col>
-                    </Row>
-                    <Row className="flex-nowrap">
-                      <Col xs={6}>
-                        <h6 className="m-0 text-muted">Basic</h6>
-                        <p className="value5">3,692</p>
-                      </Col>
-                      <Col xs="6">
-                        <h6 className="m-0 text-muted">Advanced</h6>
-                        <p className="value5">1,441</p>
-                      </Col>
-                    </Row>
-                  </div>
-                </LiveTile>
-              </div>
-            </Widget>
-          </Col>
-          <Col lg={3} md={6} xs={12}>
-            <Widget className="">
-              <div className="clearfix">
-                <Row className="flex-nowrap">
-                  <Col xs={3}>
-                    <span className="widget-icon">
-                      <i className="fi flaticon-diamond text-success" />
-                    </span>
-                  </Col>
-                  <Col xs={9}>
-                    <h6 className="m-0">TOTAL PROFIT</h6>
-                    <p className="h2 m-0 fw-normal">$7,448</p>
-                  </Col>
-                </Row>
-                <Row className="flex-nowrap">
-                  <Col xs="6">
-                    <h6 className="m-0 text-muted">Last Month</h6>
-                    <p className="value5">$83,541</p>
-                  </Col>
-                  <Col xs={6}>
-                    <h6 className="m-0 text-muted">Last Week</h6>
-                    <p className="value5">$17,926</p>
-                  </Col>
-                </Row>
-              </div>
-            </Widget>
-          </Col>
-        </Row>
-        <FlotCharts />
-        <Row>
-          <Col lg={4} xs={12}>
-            <Widget refresh close bodyClass="mt-0">
-              <div className="widget-top-overflow widget-padding-md clearfix bg-warning text-white">
-                <h3 className="mt-lg mb-lg">Sing - <span className="fw-semi-bold">Next Generation</span> Admin
-                  Dashboard
-                  Template</h3>
-                <ul className="tags text-white pull-right">
-                  {/* eslint-disable-next-line */}
-                  <li><a href="#">features</a></li>
-                </ul>
-              </div>
-              <div className="post-user mt-negative-lg">
-                <span className="thumb-lg pull-left mr mt-n-sm">
-                  <img className="rounded-circle" src={peopleA4} alt="..." />
-                </span>
-                <h6 className="m-b-1 fw-normal text-white">Jeremy &nbsp;
-                  <small className="text-white text-light">@sing</small>
-                </h6>
-                <p className="fs-mini text-muted">
-                  <time>25 mins</time>
-                  &nbsp; <i className="fa fa-map-marker" /> &nbsp; near Amsterdam
-                </p>
-              </div>
-              <p className="text-light fs-mini mt-lg">Lots of cool stuff is happening around you. Just calm down for a
-                sec
-                and listen. Colors, sounds,
-                thoughts, ideas.
-              </p>
-              <footer className="bg-body-light">
-                <ul className="post-links">
-                  <li><button className="btn-link">1 hour</button></li>
-                  <li><button className="btn-link"><span className="text-danger"><i className="fa fa-heart" /> Like</span></button></li>
-                  <li><button className="btn-link">Comment</button></li>
-                </ul>
-                <ul className="post-comments mb-0 mt-2">
-                  <li>
-                    <span className="thumb-xs avatar pull-left mr-sm">
-                      <img className="rounded-circle" src={peopleA1} alt="..." />
-                    </span>
-                    <div className="comment-body">
-                      <h6 className="author fs-sm fw-semi-bold">Ignacio Abad&nbsp;
-                        <small>6 mins ago</small>
-                      </h6>
-                      <p className="fs-mini">Hey, have you heard anything about that?</p>
-                    </div>
-                  </li>
-                  <li>
-                    <span className="thumb-xs avatar pull-left mr-sm">
-                      <img className="rounded-circle" src={avatar} alt="..." />
-                    </span>
-                    <div className="comment-body">
-                      <input
-                        className="form-control form-control-sm" type="text"
-                        placeholder="Write your comment..."
-                      />
-                    </div>
-                  </li>
-                </ul>
-              </footer>
-            </Widget>
-          </Col>
-          <Col lg={4} xs={12}>
-            <Widget refresh close bodyClass="mt-0">
-              <div>
-                <div className="widget-top-overflow text-white">
-                  <img src={img17} alt="..." />
-                  <ul className="tags text-white pull-right">
-                    {/* eslint-disable-next-line */}
-                    <li><a href="#">design</a></li>
-                    {/* eslint-disable-next-line */}
-                    <li><a href="#">white</a></li>
-                  </ul>
-                </div>
-                <div className="post-user mt-sm">
-                  <span className="thumb pull-left mr mt-n-sm">
-                    <img className="rounded-circle" src={peopleA6} alt="..." />
-                  </span>
-                  <h6 className="mb-xs mt"><span className="fw-semi-bold">Maryna</span> Nilson</h6>
-                  <p className="fs-mini text-muted">
-                    <time>25 mins</time>
-                    &nbsp; <i className="fa fa-map-marker" /> &nbsp; near Amsterdam
-                  </p>
-                </div>
-                <p className="text-light fs-mini m">Lots of cool stuff is happening around you. Just calm down for a
-                  sec
-                  and listen. Colors, sounds,
-                  thoughts, ideas. </p>
-              </div>
-              <footer className="bg-body-light">
-                <ul className="post-links no-separator">
-                  <li><button className="btn-link"><span className="text-danger"><i className="fa fa-heart" /> 427</span></button></li>
-                  <li><button className="btn-link"><i className="glyphicon glyphicon-comment" /> 98</button></li>
-                </ul>
-              </footer>
-            </Widget>
-          </Col>
-          <Col lg={4} xs={12}>
-            <Widget refresh close>
-              <div>
-                <div className="post-user mt-n-xs">
-                  <span className="thumb pull-left mr mt-n-sm">
-                    <img className="rounded-circle" src={peopleA2} alt="..." />
-                  </span>
-                  <h6 className="mb-xs mt-xs">Jess <span className="fw-semi-bold">@jessica</span></h6>
-                  <p className="fs-mini text-muted">
-                    <time>25 mins</time>
-                    &nbsp; <i className="fa fa-map-marker" /> &nbsp; near Amsterdam
-                  </p>
-                </div>
-                <div className="widget-middle-overflow widget-padding-md clearfix bg-danger text-white">
-                  <h3 className="mt-lg mb-lg">Sing - <span className="fw-semi-bold">Next Generation</span> Admin
-                    Dashboard
-                    Template</h3>
-                  <ul className="tags text-white pull-right">
-                    {/* eslint-disable-next-line */}
-                    <li><a href="#">design</a></li>
-                  </ul>
-                </div>
-                <p className="text-light fs-mini mt-sm">Lots of cool stuff is happening around you. Just calm down for
-                  a
-                  sec and listen. Colors, sounds,
-                  thoughts, ideas. </p>
-              </div>
-              <footer className="bg-body-light">
-                <ul className="post-links">
-                  <li><button className="btn-link">1 hour</button></li>
-                  <li><button className="btn-link"><span className="text-danger"><i className="fa fa-heart" /> Like</span></button></li>
-                  <li><button className="btn-link">Comment</button></li>
-                </ul>
-              </footer>
-            </Widget>
-          </Col>
-        </Row>
-        <Row>
-          <Col lg={6} xs={12}>
-            <Widget bodyClass="mt-0">
-              <div className="widget-image text-white">
-                <img src={img18} alt="..." />
-                <h4 className="title">
-                  <span className="fw-normal">Sunnyvale</span>, CA
-                </h4>
-                <div className="info text-right">
-                  <i className="fa fa-map-marker h1 m-0 mr-xs" />
-                  <h6 className="m-0 mt-xs">FLORIDA, USA</h6>
-                  <p className="fs-sm">9:41 am</p>
-                </div>
-                <div className="forecast">
-                  <div className="row">
-                    <div className="col-6 col-md-4">
-                      <div className="row mt-xs">
-                        <div className="col-6 p-0">
-                          <Skycon icon="CLEAR_DAY" color="white" width="40" height="40" />
-                          <p className="m-0 fw-normal mt-n-xs">sunny</p>
-                        </div>
-                        <div className="col-6 p-0">
-                          <h6 className="fw-semi-bold m-0">SUNDAY</h6>
-                          <p className="value1 ">29&deg;</p>
-                        </div>
-                      </div>
-                    </div>
-                    <div className="col-3 col-md-2 p-0">
-                      <h6 className="m-0">TOMMOROW</h6>
-                      <Skycon className="mt-1" icon="PARTLY_CLOUDY_DAY" color="white" width="28" height="28" />
-                      <p className="m-0 fw-semi-bold">32&deg;</p>
-                    </div>
-                    <div className="col-3 col-md-2 p-0">
-                      <h6 className="m-0">TUE</h6>
-                      <Skycon className="mt-1" icon="RAIN" color="white" width="28" height="28" />
-                      <p className="m-0 fw-semi-bold">25&deg;</p>
-                    </div>
-                    <div className="col-3 col-md-2 p-0">
-                      <h6 className="m-0">WED</h6>
-                      <Skycon className="mt-1" icon="CLEAR_DAY" color="#f0b518" width="28" height="28" />
-                      <p className="m-0 fw-semi-bold">28&deg;</p>
-                    </div>
-                    <div className="col-3 col-md-2 p-0">
-                      <h6 className="m-0">THU</h6>
-                      <Skycon className="mt-1" icon="PARTLY_CLOUDY_DAY" color="white" width="28" height="28" />
-                      <p className="m-0 fw-semi-bold">17&deg;</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </Widget>
-            <Row>
-              <Col md={6} xs={12}>
-                <Widget className="p-0 text-center">
-                  <Row className="m-0">
-                    <div className="col-5 bg-danger btlr bblr">
-                      <Skycon className="mt-3" icon="CLEAR_DAY" color="white" width="62" height="62" />
-                      <h6 className="text-white fw-normal m-t-1">FRIDAY</h6>
-                    </div>
-                    <div className="col-7">
-                      <p className="value0 text-danger mt-n-xs mr-n-xs">
-                        33&deg;
-                      </p>
-                      <p className="mt-n-sm m-b-0 fw-normal fs-sm text-muted">WINDY</p>
-                      <div className="row mt-n-xs mb-xs">
-                        <div className="col-6 p-0">
-                          <Skycon icon="WIND" color="#999" width="20" height="20" />
-                          <div className="d-inline-block ml-1">
-                            <p className="value6">4</p>
-                            <p className="fs-sm m-0 mt-n-xs text-muted fw-normal">MPS</p>
-                          </div>
-                        </div>
-                        <div className="col-6 p-0">
-                          <Skycon icon="RAIN" color="#999" width="20" height="20" />
-                          <div className="d-inline-block ml-1">
-                            <p className="value6">52</p>
-                            <p className="fs-sm m-0 mt-n-xs text-muted fw-normal">MM</p>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </Row>
-                </Widget>
-              </Col>
-              <Col md={6} xs={12}>
-                <Widget className="p-0 text-center">
-                  <div className="row m-0">
-                    <div className="col-7 bg-success btlr bblr">
-                      <p className="value0 text-white mt-sm mr-n-xs">
-                        20&deg;
-                      </p>
-                      <p className="text-white fw-normal d-inline-block mb">SUNDAY</p>
-                    </div>
-                    <div className="col-5">
-                      <Skycon className="mt-3" icon="PARTLY_CLOUDY_DAY" color="#64bd63" width="60" height="60" />
-                      <p className="fw-normal fs-sm text-muted">WINDY</p>
-                    </div>
-                  </div>
-                </Widget>
-              </Col>
-            </Row>
-          </Col>
-          <Col lg={6} xs={12}>
-            <Row>
-              <Col md={6} xs={12}>
-                <Widget className="widget-sm">
-                  <h6 className="mt-3 fw-normal">
-                    Nasdaq
-                  </h6>
-                  <h3>
-                    355 <span className="fw-semi-bold">USD</span>
-                  </h3>
-                  <p>Last Sale 354.94 USD</p>
-                  <NasdaqSparkline />
-                </Widget>
-              </Col>
-              <Col md={6} xs={12}>
-                <Widget className="widget-sm bg-success text-white">
-                  <p className="mb-xs"><i className="fa fa-comments fa-2x" /></p>
-                  <h5>
-                    Lots of <span className="fw-semi-bold">possibilities</span> to customize your
-                    new <span className="fw-semi-bold">admin template</span>
-                  </h5>
-                  <p className="fs-mini mt-sm">
-                    <span className="fw-semi-bold">83</span> likes
-                    &nbsp;
-                    <span className="fw-semi-bold">96</span> comments
-                    &nbsp;
-                    <span className="fw-semi-bold">7</span> shares
-                  </p>
-                  <p className="fs-sm mt-lg text-light">
-                    <time>10 June</time>
-                  </p>
-                </Widget>
-              </Col>
-            </Row>
-            <Row>
-              <Col md={6} xs={12}>
-                <Widget className="widget-sm bg-primary text-white">
-                  <p className="mb-xs"><i className="fa fa-arrow-circle-up fa-3x opacity-50" /></p>
-                  <p className="mb text-light">
-                    <time>10 June</time>
-                  </p>
-                  <h3>
-                    Lots of <span className="fw-semi-bold">new</span> amazing possibilities
-                  </h3>
-                  <p className="fs-mini mt">
-                    <span className="fw-semi-bold">214</span> likes
-                    &nbsp;
-                    <span className="fw-semi-bold">96</span> comments
-                  </p>
-                </Widget>
-              </Col>
-              <Col md={6} xs={12}>
-                <Widget
-                  className="widget-sm"
-                  title={<h6>Server <span className="fw-semi-bold">Overview</span></h6>}
-                >
-                  <div className="clearfix fs-mini">
-                    <span className="pull-right m-0 fw-semi-bold">CPU</span>
-                    <span className="fs-mini">60% / 37°C / 3.3 Ghz</span>
-                  </div>
-                  <Progress color="bg-gray-lighter" className="progress-xs" value={60} />
-                  <div className="clearfix fs-mini mt">
-                    <span className="pull-right m-0 fw-semi-bold">Mem</span>
-                    <span className="fs-mini">29% / 4GB (16 GB)</span>
-                  </div>
-                  <Progress color="warning" className="bg-gray-lighter progress-xs" value={29} />
-                  <div className="clearfix fs-mini mt">
-                    <span className="pull-right m-0 fw-semi-bold">LAN</span>
-                    <span className="fs-mini">6 Mb/s <i className="fa fa-caret-down" /> &nbsp; 3 Mb/s <i
-                      className="fa fa-caret-up"
-                    /></span>
-                  </div>
-                  <Progress color="danger" className="bg-gray-lighter progress-xs" value={48} />
-                  <div className="clearfix fs-mini mt">
-                    <span className="pull-right m-0 fw-semi-bold">Access</span>
-                    <span className="fs-mini">17 Mb/s <i className="fa fa-caret-up" /> &nbsp; (+18%)</span>
-                  </div>
-                  <Progress color="success" className="bg-gray-lighter progress-xs" value={64} />
-                </Widget>
-              </Col>
-            </Row>
-          </Col>
-        </Row>
-
-        <Row>
-          <Col lg={4} xs={12}>
-            <Widget>
-              <YearsMap />
-            </Widget>
-          </Col>
-          <Col lg={4} xs={12}>
-            <Widget
-              title={
-                <header className="bb">
-                  <h6>Recent <span className="fw-semi-bold">Chats</span></h6>
-                </header>
-              }
-            >
-              <div className="widget-body">
-                <div className="widget-middle-overflow">
-                  {/* todo: slimscroll ??? */}
-                  <ul
-                    className="list-group widget-chat-list-group" data-ui-jq="slimscroll"
-                    data-ui-options="{ height: '287px', size: '4px', borderRadius: '1px', opacity: .3 }"
-                  >
-                    <li className="list-group-item">
-                      <span className="thumb">
-                        <img className="rounded-circle" src={peopleA6} alt="..." />
-                      </span>
-                      <div className="message">
-                        <h6 className="sender">Chris Gray</h6>
-                        <p className="body">Hey! What&apos;s up? So much time since we saw each other there</p>
-                        <time className="time">10 sec ago</time>
-                      </div>
-                    </li>
-                    <li className="list-group-item on-right">
-                      <span className="thumb">
-                        <img className="rounded-circle" src={avatar} alt="..." />
-                      </span>
-                      <div>
-                        <h6 className="sender">John Doe</h6>
-                        <p className="body">True! Totally makes sense. But how do we find that?</p>
-                        <time className="time">10 sec ago</time>
-                      </div>
-                    </li>
-                    <li className="list-group-item">
-                      <span className="thumb">
-                        <img className="rounded-circle" src={peopleA6} alt="..." />
-                      </span>
-                      <div>
-                        <h6 className="sender">Chris Gray</h6>
-                        <p className="body">OK, but so now what? What should we do now? Not sure actually.</p>
-                        <time className="time">10 sec ago</time>
-                      </div>
-                    </li>
-                    <li className="list-group-item on-right">
-                      <span className="thumb">
-                        <img className="rounded-circle" src={avatar} alt="..." />
-                      </span>
-                      <div>
-                        <h6 className="sender">John Doe</h6>
-                        <p className="body">Hey guys, didn&apos;t you notice this conversation is sort of jubberish?</p>
-                        <time className="time">10 sec ago</time>
-                      </div>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-              <footer className="bg-body-light bt">
-                <InputGroup size="sm">
-                    <Input placeholder="Your message" />
-                    <InputGroupAddon addonType="append"><Button color="default">Send</Button></InputGroupAddon>
-                </InputGroup>
-              </footer>
-            </Widget>
-          </Col>
-          <Col lg={4} xs={12}>
-            <Widget className="bg-gray-dark text-white">
-              <RealtimeTraffic />
-            </Widget>
-          </Col>
-        </Row>
-
-        <Row>
-          <Col lg={3} xs={12}>
-            <Widget className="widget-padding-lg">
-              <div className="clearfix">
-                <LiveTile
-                  data-mode="carousel" data-speed="750" data-delay="3000"
-                  data-height="313"
-                >
-                  <div>
-                    <h3>Basic & <span className="fw-semi-bold">Advanced</span> Features</h3>
-                    <p className="value4 mt-lg">All you need in one app</p>
-                    <div className="h5 mt-lg mb-lg">
-                      <i className="fa fa-quote-left opacity-50" />
-                      &nbsp;That&apos;s awesome!  &nbsp;
-                      <i className="fa fa-quote-right opacity-50" />
-                    </div>
-                    <div className="widget-footer-bottom">
-                      <p>Attention to what&apos;s really important</p>
-                      <button className="btn btn-info btn-block mt">Order Now!</button>
-                    </div>
-                  </div>
-                  <div>
-                    <h3>Beautiful <span className="fw-semi-bold">Thing</span></h3>
-                    <p className="value4 mt-lg">Life-time package support</p>
-                    <div className="h5 mt-lg mb-lg">
-                      <i className="fa fa-quote-left opacity-50" />
-                      &nbsp;That&apos;s awesome!  &nbsp;
-                      <i className="fa fa-quote-right opacity-50" />
-                    </div>
-                    <div className="widget-footer-bottom">
-                      <p>Attention to what&apos;s really important</p>
-                      <button className="btn btn-inverse btn-block mt"><span
-                        className="fw-semi-bold text-warning"
-                      >Ready?</span>
-                      </button>
-                    </div>
-                  </div>
-                </LiveTile>
-              </div>
-            </Widget>
-          </Col>
-
-          <Col lg={3} xs={12}>
-            <Widget className="widget-chart-changes" close refresh bodyClass="mt-0">
-              <ChangesChart />
-            </Widget>
-          </Col>
-
-          <Col lg={3} xs={12}>
-            <Widget className="widget-padding-lg bg-primary text-white">
-              <div className="clearfix">
-                <LiveTile data-mode="carousel" data-speed="300" data-delay="3000" data-height="313">
-                  <div>
-                    <p className="h4 mt-xs">
-                      <i className="fa fa-quote-left opacity-50" />
-                      &nbsp;Thanks for the awesome support. That&apos;s awesome!&nbsp;
-                      <i className="fa fa-quote-right opacity-50" />
-                    </p>
-                    <div className="widget-footer-bottom">
-                      <span className="thumb pull-left mr">
-                        <img className="rounded-circle" src={peopleA4} alt="..." />
-                      </span>
-                      <h4 className="m-0 mb-xs"><span className="fw-semi-bold">Miha</span> Koshir</h4>
-                      <p className="text-light">@miha</p>
-                    </div>
-                  </div>
-                  <div>
-                    <div className="clearfix mt-xs">
-                      <span className="thumb pull-left mr">
-                        <img className="rounded-circle" src={peopleA3} alt="..." />
-                      </span>
-                      <h4 className="m-0 mb-xs"><span className="fw-semi-bold">Maryna</span> Ess</h4>
-                      <p className="text-light">@ess</p>
-                    </div>
-                    <div className="widget-footer-bottom">
-                      <p className="h4">
-                        <i className="fa fa-quote-left opacity-50" />
-                        &nbsp;Could have never imagined it would be so great!&nbsp;
-                        <i className="fa fa-quote-right opacity-50" />
-                      </p>
-                    </div>
-                  </div>
-                </LiveTile>
-              </div>
-            </Widget>
-          </Col>
-
-          <Col lg={3} xs={12} className="col-lg-3 col-12">
-            <LiveTile
-              data-mode="flip" data-direction="horizontal"
-              data-speed="600" data-delay="3000" data-height="373" data-play-onhover="true"
-            >
-              <div>
-                <Widget
-                  className="widget-padding-lg widget-md bg-gray-dark text-white"
-                  bodyClass="widget-body-container"
-                >
-                  <div className="text-center">
-                    <i className="fa fa-child text-warning fa-5x" />
-                  </div>
-                  <h3 className="fw-normal">Sing Web App</h3>
-                  <div className="widget-footer-bottom">
-                    <div className="mb-sm">Cutting-edge tech and design delivered</div>
-                    <p>
-                      <button className="btn btn-default btn-block">Hover over me!</button>
-                    </p>
-                  </div>
-                </Widget>
-              </div>
-              <div>
-                <Widget className="widget-padding-lg widget-md" bodyClass="widget-body-container">
-                  <div className="text-center">
-                    <i className="fa fa-globe text-primary fa-5x" />
-                  </div>
-                  <h3 className="fw-normal">Join The Web Now!</h3>
-                  <div className="widget-footer-bottom">
-                    <div className="mb-sm">Cutting-edge tech and design delivered</div>
-                    <p>
-                      <button className="btn btn-gray btn-block">Join now!</button>
-                    </p>
-                  </div>
-                </Widget>
-              </div>
-            </LiveTile>
-          </Col>
-        </Row>
-
-      </div>
-    );
-  }
-}
-
-
-export default Widgets;

-@import '../../../styles/app';
-
-
-  /*          Post User           */
-.post-user {
-  position: relative;
-
-  @include clearfix();
-
-  img {
-    border: 3px solid white;
-  }
-}
-
-/*            Tags              */
-.tags {
-  padding-left: 0;
-  list-style: none;
-
-  @include clearfix();
-
-  > li {
-    float: left;
-
-    > a {
-      padding: 2px 8px;
-      font-size: $font-size-mini;
-      border-radius: 6px;
-      border: 1px solid white;
-      color: inherit;
-      text-decoration: none;
-
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.1);
-      }
-
-      .fa {
-        font-size: 8px;
-        margin-right: 3px;
-        opacity: 0.8;
-      }
-    }
-  }
-
-  > li + li > a {
-    margin-left: 6px;
-  }
-}
-
-.widget-top-overflow > img + .tags {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  margin: 20px;
-}
-
-/*           Weather             */
-.widget-image .forecast {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin-bottom: 5px;
-  padding-left: 15px;
-  padding-right: 15px;
-  text-align: center;
-}
-
-/*       Chat List Group         */
-.widget-chat-list-group {
-  padding-top: $spacer/2;
-
-  .list-group-item {
-    margin-left: $widget-padding-horizontal;
-    margin-right: $widget-padding-horizontal;
-    padding: 0;
-    border: 0;
-    display: flex;
-
-    div {
-      width: 100%;
-    }
-
-    &:nth-child(even) {
-      margin-left: 75px;
-    }
-
-    &:hover {
-      background: none;
-    }
-
-    & + .list-group-item {
-      margin-top: 20px;
-    }
-
-    .thumb,
-    .thumb-sm {
-      float: left;
-      margin-right: 15px;
-    }
-
-    .time {
-      font-size: $font-size-sm;
-      color: $text-muted;
-    }
-
-    .sender {
-      margin-top: 5px;
-      margin-bottom: 5px;
-      font-size: $font-size-mini;
-      font-weight: $font-weight-normal;
-      color: theme-color('primary');
-    }
-
-    .body {
-      font-size: $font-size-mini;
-      margin-bottom: 0;
-    }
-
-    &.on-right {
-      div {
-        padding-right: 1rem;
-      }
-
-      .thumb,
-      .thumb-sm {
-        order: 1;
-        margin-left: auto;
-        margin-right: 0;
-      }
-
-      .time {
-        float: left;
-      }
-
-      .sender {
-        text-align: right;
-      }
-    }
-  }
-}
-

-import React from 'react';
-import Rickshaw from 'rickshaw';
-
-import $ from 'jquery';
-
-import {
-  Row, Col,
-} from 'reactstrap';
-
-import Sparklines from '../../../../../components/Sparklines';
-import s from './ChangesChart.module.scss';
-
-class ChangesChart extends React.Component {
-
-  constructor(prop) {
-    super(prop);
-    this.state = {
-      rickshawGraph: null,
-      sparklineData: [],
-      sparklineOptions: {},
-    };
-    this.onResizeRickshaw = this.onResizeRickshaw.bind(this);
-    this.initRickshaw = this.initRickshaw.bind(this);
-    this.initSparkline();
-  }
-
-  componentDidMount() {
-    this.initRickshaw();
-    window.addEventListener('resize', this.onResizeRickshaw);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.onResizeRickshaw);
-  }
-
-  onResizeRickshaw() {
-    this.state.graph.configure({ height: 100 });
-    this.state.graph.render();
-  }
-
-  initRickshaw() {
-    const seriesData = [[], []];
-    const random = new Rickshaw.Fixtures.RandomData(32);
-    for (let i = 0; i < 32; i += 1) {
-      random.addData(seriesData);
-    }
-
-    // eslint-disable-next-line
-    this.state.graph = new Rickshaw.Graph({
-      element: this.rickshawChart,
-      height: '100',
-      renderer: 'multi',
-      series: [{
-        name: 'pop',
-        data: seriesData.shift().map(d => ({ x: d.x, y: d.y })),
-        color: '#7bd47a', // (#64bd63, 0.9)
-        renderer: 'bar',
-        gapSize: 2,
-        min: 'auto',
-        strokeWidth: 3,
-      }, {
-        name: 'humidity',
-        data: seriesData.shift()
-          .map(d => ({ x: d.x, y: ((d.y * (Math.random() * 0.5)) + 30.1) })),
-        renderer: 'line',
-        color: '#fff',
-        gapSize: 2,
-        min: 'auto',
-        strokeWidth: 3,
-      }],
-    });
-
-    const hoverDetail = new Rickshaw.Graph.HoverDetail({
-      graph: this.state.graph,
-      xFormatter: x => new Date(x * 1000).toString(),
-    });
-
-    hoverDetail.show();
-    this.state.graph.render();
-  }
-
-  initSparkline() {
-    const data = [3, 6, 2, 4, 5, 8, 6, 8];
-    const dataMax = Math.max.apply(null, data);
-    const backgroundData = data.map(() => dataMax);
-
-    // eslint-disable-next-line
-    this.state.sparklineData = [backgroundData, data];
-    // eslint-disable-next-line
-    this.state.sparklineOptions = [
-      {
-        type: 'bar',
-        height: 26,
-        barColor: '#eee',
-        barWidth: 7,
-        barSpacing: 5,
-        chartRangeMin: Math.min.apply(null, data),
-        tooltipFormat: new $.SPFormatClass(''),
-      },
-      {
-        composite: true,
-        type: 'bar',
-        barColor: '#64bd63',
-        barWidth: 7,
-        barSpacing: 5,
-      },
-    ];
-  }
-
-  render() {
-    return (
-      <div className={s.changesChart}>
-        <div className={`${s.chart} bg-success btlr btrr`}>
-          <p className={s.chartValue}><i className="fa fa-caret-up" /> 352.79</p>
-          <p className={s.chartValueChange}>+2.04 (1.69%)</p>
-          <div
-            style={{ overflow: 'hidden' }}
-            ref={(r) => {
-              this.rickshawChart = r;
-            }}
-          />
-          {/*    <div rickshaw-chart [series]="series" [height]="100" [renderer]="'multi'"
-          [configureProps]="{gapSize: 0.5, min: 'auto', strokeWidth: 3}"></div> */}
-        </div>
-        <h4 className={s.chartTitle}><span className="fw-normal">Salt Lake City</span>, Utah</h4>
-        <p className="deemphasize">Today 13:34</p>
-        <div className="mt">
-          <Row>
-            <Col xs={6}>
-              <p className="h4 m-0">18.7M</p>
-              <p className="deemphasize">Shares Traded</p>
-            </Col>
-            <Col xs={6} className="text-right">
-              <p className="h4 m-0">19.9B</p>
-              <p className="deemphasize">Market Cap</p>
-            </Col>
-          </Row>
-        </div>
-        <div className="mt">
-          <Row>
-            <Col xs={6}>
-              <p className="h3 m-0 text-success fw-semi-bold">+120.93</p>
-              <p className="deemphasize">Yearly Change</p>
-            </Col>
-            <Col xs={6} className="text-right">
-              <div
-                className="sparkline" ref={(r) => {
-                  this.sparklineRef = r;
-                }}
-              />
-              <Sparklines data={this.state.sparklineData} options={this.state.sparklineOptions} />
-              <p className="deemphasize">GOOG</p>
-            </Col>
-          </Row>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default ChangesChart;

-@import '../../../../../styles/app';
-
-.changesChart {
-  .chart {
-    margin: -$widget-padding-vertical (-$widget-padding-horizontal) 0;
-    padding: $widget-padding-vertical 0 0;
-  }
-
-  .chartTitle {
-    margin: 20px 0 0;
-  }
-
-  .chartValue,
-  .chartValueChange {
-    padding: 0 $widget-padding-horizontal;
-  }
-
-  .chartValue {
-    margin-bottom: 0;
-    font-weight: $font-weight-bold;
-    font-size: 21px;
-    line-height: 1;
-    color: $white;
-  }
-
-  .chartValueChange {
-    color: rgba($white, 0.7);
-    font-size: $small-font-size;
-    margin-bottom: $spacer;
-  }
-}

-import React from 'react';
-import {
-  Row,
-  Col,
-  Button,
-  Badge,
-} from 'reactstrap';
-import ReactFlot from 'react-flot';
-
-import Widget from '../../../../../components/Widget';
-import s from './FlotCharts.module.scss';
-
-class FlotCharts extends React.Component {
-  static generateRandomData(labels) {
-    function random() {
-      return (Math.floor(Math.random() * 30)) + 10;
-    }
-
-    const data = [];
-    let maxValueIndex = 5;
-
-    for (let i = 0; i < labels.length; i += 1) {
-      const randomSeries = [];
-      for (let j = 0; j < 25; j += 1) {
-        randomSeries.push([j, Math.floor(maxValueIndex * j) + random()]);
-      }
-      maxValueIndex -= 1;
-      data.push({
-        data: randomSeries,
-        showLabels: true,
-        label: labels[i].label,
-        labelPlacement: 'below',
-        canvasRender: true,
-        cColor: 'red',
-        color: labels[i].color,
-      });
-    }
-    return data;
-  }
-
-  render() {
-    const flotOptions = {
-      series: {
-        lines: {
-          show: true,
-          lineWidth: 1,
-          fill: false,
-          fillColor: { colors: [{ opacity: 0.001 }, { opacity: 0.5 }] },
-        },
-        points: {
-          show: false,
-          fill: true,
-        },
-        shadowSize: 0,
-      },
-      legend: false,
-      grid: {
-        show: false,
-        margin: 0,
-        labelMargin: 0,
-        axisMargin: 0,
-        hoverable: true,
-        clickable: true,
-        tickColor: 'rgba(255,255,255,1)',
-        borderWidth: 0,
-      },
-    };
-
-    const generateData = this.constructor.generateRandomData;
-
-    return (<Row>
-      <Col lg={6} xs={12}>
-        <Widget
-          title={<Row>
-            <Col xs={4}>
-              <h6>
-                Total Sales
-              </h6>
-              <p className="value5">
-                January, 2018
-              </p>
-            </Col>
-            <Col xs={4}>
-              <h5>
-                <small>Best</small>
-              </h5>
-              <p className="value6 fs-sm">
-                March, 2018 + 1
-              </p>
-            </Col>
-          </Row>}
-          settings close
-        >
-          <div className="chart-stats">
-            <p className="text-muted fs-mini mt-xs">
-              <i className="fi flaticon-placeholder fa-5x pull-left mr-3" />
-              <span className="fw-semi-bold text-gray-dark">Jess:</span> Seems like statically it&apos;s getting impossible
-                to achieve any sort of
-                results in nearest future. The only thing we can hope for is pressing one of these two buttons:
-              </p>
-            <div className="btn-toolbar">
-              <Button color="success" size="xs">Accept</Button>
-              <Button color="default" size="xs">Reject</Button>
-            </div>
-          </div>
-          <div className={`${s.chart} bg-body-light`}>
-            <ReactFlot
-              id="product-chart-1"
-              data={
-                generateData([{
-                  label: 'Visitors', color: '#777',
-                }, {
-                  label: 'Charts', color: '#dd5826',
-                }])}
-              options={flotOptions}
-              height={'100%'}
-            />
-          </div>
-        </Widget>
-      </Col>
-      <Col lg={6} xs={12}>
-        <Widget
-          className=" widget-chart-stats-simple" title={<Row>
-            <Col xs={12}>
-              <h6 className="mb-0">
-                <span className="fw-semi-bold">Budget</span>&nbsp;<Badge pill color="danger">2019</Badge>
-              </h6>
-              <span className="text-muted fs-mini">monthly report will be available in <button className="btn-link">6 hours</button></span>
-            </Col>
-          </Row>}
-          settings close
-        >
-          <div className="chart-stats">
-            <div className="row">
-              <div className="col-md-5">
-                <div className="clearfix m-t-1">
-                  <h6 className="pull-left text-muted mb-xs">
-                      Income
-                    </h6>
-                  <p className="pull-right h6 mb-xs">
-                    <span className="fw-semi-bold">$14,595</span>
-                  </p>
-                </div>
-                <div className="clearfix">
-                  <h6 className="pull-left no-margin text-muted">
-                      Recent
-                    </h6>
-                  <p className="pull-right">
-                    <span className="fw-semi-bold">$7,647</span>
-                  </p>
-                </div>
-              </div>
-              <div className="col-md-3 text-right m-t-1">
-                <h6 className="text-muted mb-xs">Inqueries</h6>
-                <p className="fw-semi-bold">73 at 14am</p>
-              </div>
-              <div className="col-md-4 text-right m-t-1">
-                <h6 className="text-muted mb-xs">Last Updated</h6>
-                <p className="fw-semi-bold">23.06.2013</p>
-              </div>
-            </div>
-          </div>
-          <div className={`${s.chart} bg-body-light`}>
-            <ReactFlot
-              id="product-chart-2"
-              data={
-                generateData([{
-                  label: 'Controllers', color: '#777',
-                }, {
-                  label: 'Scopes', color: '#f0b518',
-                }])}
-              options={flotOptions}
-              height={'100%'}
-            />
-          </div>
-        </Widget>
-      </Col>
-    </Row>
-    );
-  }
-}
-
-export default FlotCharts;

-@import '../../../../../styles/app';
-
-.chart {
-  height: 200px;
-  margin: $spacer/2 (-$widget-padding-horizontal) (-$widget-padding-vertical);
-}

-import React from 'react';
-import $ from 'jquery'
-import PropTypes from 'prop-types';
-/* eslint-disable */
-import 'metrojs/release/MetroJs.Full/MetroJs';
-/* eslint-enable */
-
-import './LiveTile.scss';
-
-class LiveTile extends React.Component {
-  static propTypes = {
-    children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node,
-    ]),
-  };
-
-  static defaultProps = {
-    children: null,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      id: `live-tile-${Math.floor(Math.random() * 255)}`,
-    };
-  }
-
-  componentDidMount() {
-    const el = $(`#${this.state.id}`);
-    el.css('height', el.data('height'))
-      .liveTile();
-  }
-
-  render() {
-    const {
-      children,
-      ...attr
-    } = this.props;
-    return (
-      <div {...attr} id={this.state.id} className="live-tile">
-        {children}
-      </div>
-    );
-  }
-}
-
-export default LiveTile;

-@import '../../../../../styles/app';
-
-/*      Live Tiles     */
-.live-tile,
-.list-tile,
-.copy-tile,
-.tile-strip .flip-list > li {
-  height: auto;
-  min-width: 100%;
-  margin: 0 !important;
-  color: inherit !important;
-
-  &.fade {
-    opacity: 1;
-  }
-}
-
-.live-tile p,
-.list-tile p,
-.copy-tile p {
-  padding: 0 !important;
-}
-
-.live-tile p,
-.list-tile p,
-.copy-tile p,
-.live-tile .face,
-.list-tile .face,
-.copy-tile .face {
-  &.h1 {
-    font-size: $h1-font-size;
-  }
-
-  &.h2 {
-    font-size: $h2-font-size;
-  }
-
-  &.h3 {
-    font-size: $h3-font-size;
-  }
-
-  &.h4 {
-    font-size: $h4-font-size;
-  }
-
-  &.h5 {
-    font-size: $h5-font-size;
-  }
-
-  &.h6 {
-    font-size: $h6-font-size;
-  }
-
-  $font-sizes: $h1-font-size, $h2-font-size, $h3-font-size, $h4-font-size, $h5-font-size, $h6-font-size;
-  $i: 1;
-
-  @each $font-size in $font-sizes {
-    &.value#{$i} {
-      font-size: $font-size;
-    }
-    $i: $i + 1;
-  }
-}

-import React from 'react';
-
-import $ from 'jquery';
-import Sparklines from '../../../../../components/Sparklines';
-
-class NasdaqSparkline extends React.Component {
-
-  render() {
-    const data = [[4, 6, 5, 7, 5]];
-    const options = {
-      type: 'line',
-      width: '99%',
-      height: '60',
-      lineColor: '#666',
-      fillColor: 'transparent',
-      spotRadius: 5,
-      spotColor: '#666',
-      valueSpots: { '0:': '#666' },
-      highlightSpotColor: '#fff',
-      highlightLineColor: '#666',
-      minSpotColor: '#666',
-      maxSpotColor: '#dd5826',
-      tooltipFormat: new $
-        .SPFormatClass('<span style="color: white">&#9679;</span> {{prefix}}{{y}}{{suffix}}'),
-      chartRangeMin: Math.min.apply(null, data) - 1,
-    };
-
-
-    return (
-      <Sparklines data={data} options={options} />
-    );
-  }
-}
-
-export default NasdaqSparkline;

-import React from 'react';
-import {
-  Progress,
-} from 'reactstrap';
-import Rickshaw from 'rickshaw';
-
-
-class RealtimeTraffic extends React.Component {
-  state = { graph: null }
-  constructor(prop) {
-    super(prop);
-    this.onResizeRickshaw = this.onResizeRickshaw.bind(this);
-  }
-
-  componentDidMount() {
-    this.initChart();
-    window.addEventListener('resize', this.onResizeRickshaw);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.onResizeRickshaw);
-  }
-
-  onResizeRickshaw() {
-    this.graph.configure({ height: 130 });
-    this.graph.render();
-  }
-
-  initChart() {
-    const seriesData = [[], []];
-    const random = new Rickshaw.Fixtures.RandomData(30);
-
-    for (let i = 0; i < 30; i += 1) {
-      random.addData(seriesData);
-    }
-    this.graph = new Rickshaw.Graph({
-      element: this.rickshawChart,
-      height: 130,
-      realtime: true,
-      series: [
-        {
-          color: '#343434', // 'gray-dark'
-          data: seriesData[0],
-          name: 'Uploads',
-        }, {
-          color: '#666', // gray,
-          data: seriesData[1],
-          name: 'Downloads',
-        },
-      ],
-    });
-
-    const hoverDetail = new Rickshaw.Graph.HoverDetail({
-      graph: this.graph,
-      xFormatter: x => new Date(x * 1000).toString(),
-    });
-
-    hoverDetail.show();
-
-    setInterval(() => {
-      random.removeData(seriesData);
-      random.addData(seriesData);
-      this.graph.update();
-    }, 1000);
-
-    this.graph.render();
-  }
-
-  render() {
-    return (
-      <div>
-        <h4 className="mb-lg">Recent <span className="fw-semi-bold">Update</span></h4>
-        <h6>Node.js <span className="fw-semi-bold">4.0.1 distribution</span></h6>
-        <Progress className="bg-gray-lighter progress-xs" color="danger" value="77" />
-        <p className="mt-sm mb fs-mini ">
-          <small><span className="circle bg-warning text-gray-dark"><i
-            className="glyphicon glyphicon-chevron-up"
-          /></span></small>
-          <strong className="px-1">17% higher</strong>
-          than last month
-        </p>
-        <p className="fs-sm text-gray-lighter mb-0">Remaining hours</p>
-        <button className="btn btn-xs btn-gray pull-right ml-xs">
-          <i className="fa fa-compress" /> track
-        </button>
-        <button className="btn btn-xs btn-gray pull-right">
-          <i className="fa fa-pause" /> pause
-        </button>
-        <p className="value4">2h 56m</p>
-        <br />
-        <div
-          ref={(r) => {
-            this.rickshawChart = r;
-          }} className="text-gray-dark chart-overflow-bottom" style={{ height: '130px' }}
-        />
-      </div>
-    );
-  }
-}
-
-export default RealtimeTraffic;

-import React from 'react';
-import { Nav, NavItem, NavLink } from 'reactstrap';
-/* eslint-disable */
-import $ from 'jquery';
-import 'imports-loader?$=jquery,this=>window!jquery-mapael/js/maps/world_countries';
-import 'imports-loader?$=jquery,this=>window!jquery-mapael/js/jquery.mapael';
-/* eslint-enable */
-import './YearsMap.scss';
-import fakeWorldData from './MapData';
-
-class YearsMap extends React.Component {
-  constructor(prop) {
-    super(prop);
-    this.state = {
-      activeYear: 2019,
-    };
-    this.triggerYear = this.triggerYear.bind(this);
-  }
-
-  componentDidMount() {
-    this.init();
-  }
-
-  init() {
-    const $map = $('#mapael');
-    const data = {
-      map: {
-        name: 'world_countries',
-        defaultArea: {
-          attrs: {
-            fill: '#eee', // gray-lighter
-            stroke: '#666', // 'gray'
-            'stroke-width': 0.1,
-          },
-          attrsHover: {
-            fill: '#999', // gray-light,
-            animDuration: 100,
-          },
-        },
-        defaultPlot: {
-          size: 17,
-          attrs: {
-            fill: '#f0b518', // brand-warning,
-            stroke: '#fff',
-            'stroke-width': 0,
-            'stroke-linejoin': 'round',
-          },
-          attrsHover: {
-            'stroke-width': 1,
-            animDuration: 100,
-          },
-        },
-        zoom: {
-          enabled: true,
-          step: 1,
-          maxLevel: 10,
-          mousewheel: false,
-        },
-      },
-      legend: {
-        area: {
-          display: false,
-          slices: [
-            {
-              max: 5000000,
-              attrs: {
-                fill: 'rgb(245, 249, 251)', // lightenColor('#ebeff1', .04)
-              },
-              label: 'Less than 5M',
-            },
-            {
-              min: 5000000,
-              max: 10000000,
-              attrs: {
-                fill: '#ebeff1',
-              },
-              label: 'Between 5M and 10M',
-            },
-            {
-              min: 10000000,
-              max: 50000000,
-              attrs: {
-                fill: '#eee', // gray-lighter
-              },
-              label: 'Between 10M and 50M',
-            },
-            {
-              min: 50000000,
-              attrs: {
-                fill: 'rgb(209, 213, 215)', // darkenColor('#ebeff1', .1)
-              },
-              label: 'More than 50M',
-            },
-          ],
-        },
-      },
-      areas: fakeWorldData[this.state.activeYear].areas,
-    };
-    const height = 394;
-    $map.css('height', height);
-    if ($map.parents('.widget')[0]) {
-      $map.find('.map').css('height', parseInt($map.parents('.widget').css('height'), 10) - 35);
-    }
-    $map.mapael(data);
-    $map.trigger('zoom', { level: 6, latitude: 59.599254, longitude: 8.863224 });
-  }
-
-  triggerYear(year) {
-    this.setState({
-      activeYear: year,
-    });
-    const $map = $('#mapael');
-    $map.trigger('update', [{
-      mapOptions: fakeWorldData[year],
-      animDuration: 300,
-    }]);
-  }
-
-  render() {
-    return (<div>
-      <div className="mapael" id="mapael">
-        <div className="stats">
-          <h6 className="text-gray-dark">YEARLY <span className="fw-semi-bold">DISTRIBUTIONS</span></h6>
-          <span className="pull-left mr-xs">
-            <small><span className="circle bg-warning text-gray-dark">
-              <i className="fa fa-plus" /></span></small>
-          </span>
-          <p className="h4 m-0">
-            <strong>17% last year</strong>
-          </p>
-        </div>
-        <div className="map">
-          <span>Alternative content for the map</span>
-        </div>
-        <div className="areaLegend">
-          <span>Alternative content for the legend</span>
-        </div>
-      </div>
-      <Nav className="map-controls" pills fill>
-        <NavItem>
-          <NavLink active={this.state.activeYear === 2014} onClick={() => this.triggerYear(2014)}>2014</NavLink>
-        </NavItem>
-        <NavItem>
-          <NavLink active={this.state.activeYear === 2015} onClick={() => this.triggerYear(2015)}>2015</NavLink>
-        </NavItem>
-        <NavItem>
-          <NavLink active={this.state.activeYear === 2016} onClick={() => this.triggerYear(2016)}>2016</NavLink>
-        </NavItem>
-        <NavItem>
-          <NavLink active={this.state.activeYear === 2017} onClick={() => this.triggerYear(2017)}>2017</NavLink>
-        </NavItem>
-        <NavItem>
-          <NavLink active={this.state.activeYear === 2018} onClick={() => this.triggerYear(2018)}>2018</NavLink>
-        </NavItem>
-        <NavItem>
-          <NavLink active={this.state.activeYear === 2019} onClick={() => this.triggerYear(2019)}>2019</NavLink>
-        </NavItem>
-      </Nav>
-    </div>);
-  }
-}
-
-export default YearsMap;

-@import '../../../../../styles/app';
-
-/* Mapael  */
-.mapTooltip {
-  position: fixed;
-  padding: 2px;
-  z-index: 1000;
-  max-width: 200px;
-  display: none;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: $border-radius;
-  font-size: $font-size-sm;
-  color: $text-color;
-}
-
-.zoomIn,
-.zoomOut {
-  position: absolute;
-  bottom: 10px;
-  left: 10px;
-  width: 20px;
-  height: 20px;
-  box-sizing: content-box;
-  border: 1px solid #ccc;
-  background-color: #fff;
-  color: $text-color;
-  line-height: 20px;
-  text-align: center;
-  border-radius: $border-radius;
-  cursor: pointer;
-  font-weight: $font-weight-bold;
-  user-select: none;
-}
-
-.zoomOut {
-  left: 36px;
-}
-
-.mapael {
-  position: relative;
-  margin: (-$widget-padding-vertical) (-$widget-padding-horizontal) 0;
-
-  .map {
-    position: relative;
-    height: calc(100% - 20px);
-  }
-
-  .stats {
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    left: 0;
-    margin: 5% 10%;
-  }
-}
-
-/*  Part:Map Controls  */
-.map-controls {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border-top: 1px solid #bbb;
-  background-color: $addition-bg;
-  border-bottom-left-radius: $border-radius;
-  border-bottom-right-radius: $border-radius;
-
-  > .nav-item > .nav-link {
-    border-radius: 0;
-    padding: 0.7143rem 0;
-    color: $text-color;
-
-    &:hover {
-      background-color: $gray-200;
-      color: $text-color;
-    }
-  }
-
-  > .nav-item > .nav-link.active {
-    &,
-    &:hover {
-      background-color: $white;
-      color: $text-color;
-      font-weight: $font-weight-bold;
-    }
-  }
-
-  > .nav-item:first-child > a {
-    border-bottom-left-radius: $border-radius;
-  }
-
-  > .nav-item:last-child > a {
-    border-bottom-right-radius: $border-radius;
-  }
-}
-
-.map svg {
-  height: 100%;
-  width: 100%;
-}
-

-{
-  "name": "widgets",
-  "version": "0.0.0",
-  "main": "./Widgets.js",
-  "private": true
-}

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { connect } from 'react-redux';
-import Widget from '../../components/Widget';
+import Widget from '../../components/Widget/Widget';
 
 
 class Subject extends PureComponent {
 class Subject extends PureComponent {
   async componentDidUpdate() {
   async componentDidUpdate() {

@@ -6,7 +6,7 @@ import {
   Col,
   Col,
 } from 'reactstrap';
 } from 'reactstrap';
 
 
-import Widget from '../../components/Widget';
+import Widget from '../../components/Widget/Widget';
 
 
 import s from './VideoAnalysis.module.scss';
 import s from './VideoAnalysis.module.scss';
 
 

+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl, {
+    headers: { 'Service-Worker': 'script' },
+  })
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready
+      .then(registration => {
+        registration.unregister();
+      })
+      .catch(error => {
+        console.error(error.message);
+      });
+  }
+}

-.auth-page {
-  padding-top: 10vh;
-  height: 100vh;
-}
-
-.widget-auth {
-  max-width: 360px;
-  padding: 30px !important;
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-weight: $font-weight-normal;
-    text-align: center;
-  }
-
-  .widget-auth-info {
-    font-size: 13px;
-    color: #888;
-    margin-bottom: 0;
-    text-align: center;
-  }
-
-  .auth-btn {
-    width: 100%;
-  }
-
-  .social-buttons {
-    display: flex;
-    align-items: stretch;
-    justify-content: center;
-    flex-direction: column;
-    margin: ($spacer) 0;
-
-    .social-button {
-      display: flex;
-      align-items: center;
-      padding: 0;
-      position: relative;
-      height: 30px;
-    }
-
-    .social-icon {
-      position: absolute;
-      left: 1px;
-      width: 26px;
-      height: 26px;
-      padding: 0;
-      transition: all .2s ease-in-out;
-      border-radius: 3px;
-      background-color: $white;
-    }
-
-    .social-text {
-      margin: 0 auto;
-      font-size: $font-size-sm;
-    }
-
-    .social-google {
-      background-size: 100%;
-      background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIzOHB4IiBoZWlnaHQ9IjM4cHgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5BcnRib2FyZDwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZyBpZD0iQXJ0Ym9hcmQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9ImJ0bl9nb29nbGVfZGFya19ub3JtYWxfaW9zIj4gICAgICAgICAgICA8ZyBpZD0iYnV0dG9uLWJnLWNvcHkiPiAgICAgICAgICAgICAgICA8cmVjdCBpZD0icGF0aC0zIiB4PSIwIiB5PSIwIiB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHJ4PSIxIj48L3JlY3Q+ICAgICAgICAgICAgPC9nPiAgICAgICAgICAgIDxnIGlkPSJsb2dvX2dvb2dsZWdfNDhkcCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCAxMC4wMDAwMDApIj4gICAgICAgICAgICAgICAgPHBhdGggZD0iTTE3LjY0LDkuMjA0NTQ1NDUgQzE3LjY0LDguNTY2MzYzNjQgMTcuNTgyNzI3Myw3Ljk1MjcyNzI3IDE3LjQ3NjM2MzYsNy4zNjM2MzYzNiBMOSw3LjM2MzYzNjM2IEw5LDEwLjg0NSBMMTMuODQzNjM2NCwxMC44NDUgQzEzLjYzNSwxMS45NyAxMy4wMDA5MDkxLDEyLjkyMzE4MTggMTIuMDQ3NzI3MywxMy41NjEzNjM2IEwxMi4wNDc3MjczLDE1LjgxOTU0NTUgTDE0Ljk1NjM2MzYsMTUuODE5NTQ1NSBDMTYuNjU4MTgxOCwxNC4yNTI3MjczIDE3LjY0LDExLjk0NTQ1NDUgMTcuNjQsOS4yMDQ1NDU0NSBaIiBpZD0iU2hhcGUiIGZpbGw9IiM0Mjg1RjQiPjwvcGF0aD4gICAgICAgICAgICAgICAgPHBhdGggZD0iTTksMTggQzExLjQzLDE4IDEzLjQ2NzI3MjcsMTcuMTk0MDkwOSAxNC45NTYzNjM2LDE1LjgxOTU0NTUgTDEyLjA0NzcyNzMsMTMuNTYxMzYzNiBDMTEuMjQxODE4MiwxNC4xMDEzNjM2IDEwLjIxMDkwOTEsMTQuNDIwNDU0NSA5LDE0LjQyMDQ1NDUgQzYuNjU1OTA5MDksMTQuNDIwNDU0NSA0LjY3MTgxODE4LDEyLjgzNzI3MjcgMy45NjQwOTA5MSwxMC43MSBMMC45NTcyNzI3MjcsMTAuNzEgTDAuOTU3MjcyNzI3LDEzLjA0MTgxODIgQzIuNDM4MTgxODIsMTUuOTgzMTgxOCA1LjQ4MTgxODE4LDE4IDksMTggWiIgaWQ9IlNoYXBlIiBmaWxsPSIjMzRBODUzIj48L3BhdGg+ICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zLjk2NDA5MDkxLDEwLjcxIEMzLjc4NDA5MDkxLDEwLjE3IDMuNjgxODE4MTgsOS41OTMxODE4MiAzLjY4MTgxODE4LDkgQzMuNjgxODE4MTgsOC40MDY4MTgxOCAzLjc4NDA5MDkxLDcuODMgMy45NjQwOTA5MSw3LjI5IEwzLjk2NDA5MDkxLDQuOTU4MTgxODIgTDAuOTU3MjcyNzI3LDQuOTU4MTgxODIgQzAuMzQ3NzI3MjczLDYuMTczMTgxODIgMCw3LjU0NzcyNzI3IDAsOSBDMCwxMC40NTIyNzI3IDAuMzQ3NzI3MjczLDExLjgyNjgxODIgMC45NTcyNzI3MjcsMTMuMDQxODE4MiBMMy45NjQwOTA5MSwxMC43MSBaIiBpZD0iU2hhcGUiIGZpbGw9IiNGQkJDMDUiPjwvcGF0aD4gICAgICAgICAgICAgICAgPHBhdGggZD0iTTksMy41Nzk1NDU0NSBDMTAuMzIxMzYzNiwzLjU3OTU0NTQ1IDExLjUwNzcyNzMsNC4wMzM2MzYzNiAxMi40NDA0NTQ1LDQuOTI1NDU0NTUgTDE1LjAyMTgxODIsMi4zNDQwOTA5MSBDMTMuNDYzMTgxOCwwLjg5MTgxODE4MiAxMS40MjU5MDkxLDAgOSwwIEM1LjQ4MTgxODE4LDAgMi40MzgxODE4MiwyLjAxNjgxODE4IDAuOTU3MjcyNzI3LDQuOTU4MTgxODIgTDMuOTY0MDkwOTEsNy4yOSBDNC42NzE4MTgxOCw1LjE2MjcyNzI3IDYuNjU1OTA5MDksMy41Nzk1NDU0NSA5LDMuNTc5NTQ1NDUgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRUE0MzM1Ij48L3BhdGg+ICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgcG9pbnRzPSIwIDAgMTggMCAxOCAxOCAwIDE4Ij48L3BvbHlnb24+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+");
-    }
-
-    .social-microsoft {
-      background-repeat: no-repeat;
-      background-size: 50%;
-      background-position-x: 50%;
-      background-position-y: 50%;
-    }
-
-  }
-}
-
-.auth-footer {
-  margin-bottom: 25px;
-  font-size: 13px;
-  color: #636c72;
-  text-align: center;
-
-  @media (min-height: 600px) {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-}
-
-.auth-logo {
-  margin-top: 15px;
-  margin-bottom: 40px;
-  text-align: center;
-  font-weight: $font-weight-normal;
-
-  i {
-    font-size: 13px;
-    margin: 0 20px;
-  }
-}
-
-

@@ -7,27 +7,10 @@
 @import 'variables';
 @import 'variables';
 @import 'theme-variables';
 @import 'theme-variables';
 @import '../../node_modules/bootstrap/scss/bootstrap';
 @import '../../node_modules/bootstrap/scss/bootstrap';
-@import '../../node_modules/glyphicons-halflings/scss/glyphicons-halflings';
-@import '../../node_modules/font-awesome/scss/font-awesome';
-@import '../../node_modules/line-awesome/dist/css/line-awesome.css';
-@import '../fonts/flaticon/flaticon';
 @import '../../node_modules/animate.css/animate';
 @import '../../node_modules/animate.css/animate';
-@import '../../node_modules/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox';
-@import '../../node_modules/messenger/build/css/messenger.css';
-@import '../../node_modules/messenger/build/css/messenger-theme-air.css';
-@import '../../node_modules/nvd3/build/nv.d3.css';
-@import '../../node_modules/rickshaw/rickshaw.css';
-@import '../../node_modules/react-table/react-table.css';
-@import '../../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css';
-@import '../../node_modules/jvectormap/jquery-jvectormap.css';
-@import '../../node_modules/metrojs/release/MetroJs.Full/MetroJs.css';
-@import '../../node_modules/react-sortable-tree/style.css';
-@import '../../node_modules/react-toastify/dist/ReactToastify.css';
-@import '../../node_modules/react-tagsinput/react-tagsinput.css';
 
 
 @import 'mixins';
 @import 'mixins';
 @import 'base';
 @import 'base';
-@import 'auth';
 @import 'overrides';
 @import 'overrides';
 @import 'general';
 @import 'general';
 @import 'utils';
 @import 'utils';

-{
-  "root": "build/",
-  "routes": {
-    "/**": "index.html"
-  }
-}
\ No newline at end of file