Thank you for Purchasing



Enlite Prime - React Admin Dashboard Template For Full-Stack Developer

Version 2.0.4


  • Created : 13 May 2019
  • Latest Update : 11 Mar 2024

What is Enlite Prime?


banner

Enlite Prime is a fullstack website template based on React Boilerplate. It provides you clean modern design and integrated backend. Enlite prime has translation ready with RTL support, and also comes with multiple color along dark mode which gives you the design flexibility.

What's Inside?
This template contains more than 30 components based on material-ui designs. And also various sample pages like Landing page, 2 Dashboards variant, and Profile. Not stop until that, the backend integration is one of our focus in this template. Firebase authentication with email and social login, pre-build CRUD apps with Firebase realtime DB and Redux Saga. That all for you to boost your web app development process. Enlite Prime is the template you will love to work on.

Template Feature


  • Modern Technologies. Built with one of most popular javascript library React.JS and Redux
  • Premium designs. Simple and elegant theme color along with dark and lightmode
  • Multiple layout and RTL Support. Sidebar and Topbar navigation layout. Auto RTL adjustment styling with jss-rtl
  • Authentication. Use Firebase social and email login
  • Pre-build apps. Sample CRUD app with Redux-Saga and Realtime DB integration.
  • Support multilanguage. Including 6 translation English, Deutsch, Arabic, Chinese, Bahasa Indonesia, Español.
  • 30+ react components and modules which reusable and easy to modify.
  • Various sample pages Landing page, 2 Dashboards variant, and many more
  • Next Generation JavaScript written in ES6
  • Responsive design Based on standard 12 Grid System
  • Starter Project. Build app from scratch without without being distracted from innate feature.
  • Test Unit. Material UI Components functional test with Mocha and Chai
  • High Performance. Styling with JSS (CSS in JS) and Async Code Splitting.
  • Clean code maintained by eslint.
  • Fully vector icons and font icons.
  • Direct code preview. Get source code easier without open files.
  • And many more...

Files and Folder Structure


├── app           # main application source code
│   ├── api       # api sample dummy data collection and ui initial value
│   │   ├── apps
│   │   ├── chart
│   │   ├── dummy
│   │   ├── icons
│   │   ├── images
│   │   ├── palette
│   │   └── ui
│   ├── app.js
│   ├── components # UI Components
│   │   ├── Badges
│   │   ├── BreadCrumb
│   │   ├── CardPaper
│   │   ├── Contact
│   │   ├── Counter
│   │   ├── Email
│   │   ├── Error
│   │   ├── Forms
│   │   ├── Gallery
│   │   ├── GuideSlider
│   │   ├── Header
│   │   ├── ImageLightbox
│   │   ├── LandingPage
│   │   ├── Loading
│   │   ├── Notification
│   │   ├── Panel
│   │   ├── PapperBlock
│   │   ├── Profile
│   │   ├── Quote
│   │   ├── Search
│   │   ├── SelectLanguage
│   │   ├── Sidebar
│   │   ├── SidebarBig
│   │   ├── SourceReader
│   │   ├── Tables
│   │   ├── TemplateSettings
│   │   ├── TextEditor
│   │   ├── TodoList
│   │   ├── Widget
│   │   ├── helpers
│   │   └── index.js
│   ├── config         # enviroment and other global configuration
│   ├── containers     # application wrapper and root template
│   │   ├── App
│   │   ├── Charts
│   │   ├── Dashboard
│   │   ├── Forms
│   │   ├── LandingPage
│   │   ├── LanguageProvider
│   │   ├── Layouts
│   │   ├── LocaleToggle
│   │   ├── Maps
│   │   ├── NotFound
│   │   ├── Pages
│   │   ├── Parent
│   │   ├── SampleApps
│   │   ├── SampleFullstackApps
│   │   ├── Session
│   │   ├── Tables
│   │   ├── Templates
│   │   ├── UiElements
│   │   └── pageListAsync.js
│   ├── firebase      # Firebase configuration
│   │   ├── config.js
│   │   ├── firebase.js
│   │   └── index.js
│   ├── i18n.js       # Multilanguage setup
│   ├── index.html    # main HTML
│   ├── redux         # redux settings
│   ├── styles        # style declaration witc scss and css
│   ├── translations
│   │   ├── ar.json
│   │   ├── de.json
│   │   ├── en.json
│   │   ├── es.json
│   │   ├── id.json
│   │   └── zh.json
│   └── utils         # redux saga configuration
├── dump_data         # Sample data dump
│   └── enlite-3a841-export.json
├── firebase.json
├── firebase.rules.json
├── internals         # webpack and app configuration
│   ├── config.js
│   ├── generators
│   ├── mocks
│   ├── scripts
│   ├── testing
│   └── webpack
├── node_modules      # packages, modules and plugins
├── package-lock.json
├── package.json      # npm package manager file 
├── postcss.config.js # css config
├── public            # all public assets directory
│   ├── favicons
│   └── images  
├── server            # backend configuration
│   ├── argv.js
│   ├── index.js
│   ├── logger.js
│   ├── middlewares
│   ├── port.js
│   ├── rawdocs.js
│   └── rawicons.js
└── yarn.lock
                        

Firebase Setup


Follow this guide bellow to use the Firebase JavaScript SDK in your web app or as a client for end-user access. In this template, we made 4 steps to setup whole this app firebase services.

Installation and Running App


Enlite Prime is built on top of Material UI
  • Connect to the internet
  • Install NodeJs from NodeJs Official Page
  • Unzip the Enlite Prime file to a folder in your computer
  • Open Terminal
  • Go to your file project (where you've unzipped the product)
  • Install Modules
    Install module dependencies by run this script in terminal
    npm install
    It will download some necessary dependencies, it could take some minutes, just wait until finish.
  • Build Webpack DLL dependencies(If necessary)
    Install module dependencies by run this script in terminal. This process ussualy done by 'npm install', but if system require it just run this command:
    npm run build:dll
  • Run App
    After build static library, then run the app.
    npm start
    The process should be take about 1-2 minutes.
    process
    INFO:
    - Just run this script whenever you want start the project.
    - Run npm install again if you have new module dependencies,
  • Navigate to http://localhost:3000

Deployment


Production

  • First you have to clone/copy the all project code in your hosting/cloud server.
  • Open your console to access the hosting/cloud server.
  • If you haven't install the dependencies before, please run npm install
  • After that you need to build the production assets first
    npm run build
    It usually take longer time than development to generate and compress production code. The generated files will be placed in build/ process process
  • Then start the app
    npm run start:prod
  • -------- OR -------
  • If you want run it in background you may try PM2 https://www.npmjs.com/package/pm2. Then run this command:
    node node_modules/.bin/cross-env NODE_ENV=production pm2 start server
  • Then navigate to http://localhost:3000
  • Note: After build finish then when you access it on local, all of the assets will be stored in local storage. So when You make a change the result will not update, because browser will take the code from cache.
    This is a default feature from React Boilerplate which has focus of 'offline first'. So will make easier to build Progressive Web Aplication. But you can clear it by clear in local storage by following this step.

    Google Chrome and Opera
    1. Open "Developer Tools" or Right click > Inspect element
    2. Then go to tab "Application"
    3. Choose "Clear Storage" in left sidebar
    4. Scroll down then You will see button "Clear site data"
    5. Just click it to clear all stored assets
      img


    Safari and Firefox
    1. Open "Developer Tools" or Right click > Inspect element
    2. Then go to tab "Storage"
    3. Choose "Local Storage" in left sidebar
    4. Just right click > Delete All
      img

Offline Access


Enable offline access

This is a feature from React Boilerplate which has focus of 'offline first'. So will make easier to build Progressive Web Aplication. The next frontier in performant web apps: availability without a network connection from the instant your users load the app.

  • Open app/app.js At very bottom just enable(uncomment) this code
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js').then(registration => {
          console.log('SW registered: ', registration);
        }).catch(registrationError => {
          console.log('SW registration failed: ', registrationError);
        });
      });
    }
    }
  • Next, open /internals/webpack/webpack.prod.babel.js Then enable(uncomment) the webpack plugin import
    const WorkboxPlugin = require('workbox-webpack-plugin');
    and enable(uncomment) WorkboxPlugin webpack config around line:87
    new WorkboxPlugin.GenerateSW({
      // these options encourage the ServiceWorkers to get in there fast
      // and not allow any straggling "old" SWs to hang around
      clientsClaim: true,
      navigateFallback: '/index.html',
      skipWaiting: true,
      maximumFileSizeToCacheInBytes: 5242880
    }),
  • Go to console, then do the same as deployment method above. Build the site
    npm run build
  • After finish run the site in production mode
    npm run start:prod
  • Then navigate to http://localhost:3000
  • WARNING: Do not cache build/.htaccess and build/service-worker.js in your server, required for offline-first updates.
  • Note 1: With this feature all scripts will be stored in Local Storage, so can be accessed even offline. And if any updates, The service-worker.js will handle it when browser reload or re-open the site. Once update received, the site won't changes immediately, because the status is pending/waiting, Please run the second reload to set the update as active.
    sw
  • Note 2: After build finish then when you access it on local, all of the assets will be stored in local storage. So when You make a change the result will not update, because browser will take the code from cache.
    But you can clear it by clear in local storage by following this step.

    Google Chrome and Opera
    1. Open "Developer Tools" or Right click > Inspect element
    2. Then go to tab "Application"
    3. Choose "Clear Storage" in left sidebar
    4. Scroll down then You will see button "Clear site data"
    5. Just click it to clear all stored assets
      img


    Safari and Firefox
    1. Open "Developer Tools" or Right click > Inspect element
    2. Then go to tab "Storage"
    3. Choose "Local Storage" in left sidebar
    4. Just right click > Delete All
      img

Troublehooting


Here's most common error problem when installation and first setup project

  • When installation and you got error like this :
    
    Could not resolve dependency:
    peer example-peer-package@"^3.2.0" from example-package@3.0.0
    example-package@3.0.0 from the root project
            
  • Try to remove the error package (i.e example-package@3.0.0) from package.json Then install again.
    npm install
    After installation done, try to install the problematic package manually with --legacy-peer-deps options.
    npm install example-package@3.0.0 --legacy-peer-deps
    Example for multiple packages
    npm install example-package@3.0.0 other-package@1.0.0 --legacy-peer-deps
  • if got warning like this :
    npm WARN redux-immutablejs@0.0.8 requires a peer of immutable@^3.7.5 but none is installed. You must install peer dependencies yourself.
            npm WARN react-draft-wysiwyg@1.12.13 requires a peer of immutable@3.x.x || 4.x.x but none is installed. You must install peer dependencies yourself.
            npm WARN slick-carousel@1.8.1 requires a peer of jquery@>=1.8.0 but none is installed. You must install peer dependencies yourself.
            npm WARN draftjs-utils@0.9.4 requires a peer of immutable@3.x.x || 4.x.x but none is installed. You must install peer dependencies yourself.
            npm WARN html-to-draftjs@1.4.0 requires a peer of immutable@3.x.x || 4.x.x but none is installed. You must install peer dependencies yourself.
            
    Don't worry the app will run as well

    For warning some of dependencies need another dependencies too, maybe once you install them, there’s some changes from the 3rd party vendor so probably it will make a warning to another dependencies.

  • if got an error with a dependencies installation. Try to remove the all module node_modules/. Then install again with npm install. If error still happen, please try to remove the problematic package node_modules/ foler. After that try to install the problematic package manually. npm install ‹package_name› --save-dev
  • if still got an error. Try to update the problematic package instead.
  • When you run npm run dev, build, etc, then you got error like this:
    
    Error: error:0308010C:digital envelope routines::unsupported
        at new Hash (node:internal/crypto/hash:67:19)
        at Object.createHash (node:crypto:130:10)
            
  • Open terminal and paste these as described:
    1. Linux and macOS (Windows Git Bash)
      export NODE_OPTIONS=--openssl-legacy-provider
    2. Windows command prompt
      set NODE_OPTIONS=--openssl-legacy-provider
    3. Windows PowerShell
      $env:NODE_OPTIONS = "--openssl-legacy-provider"
  • Then try npm run dev or npm run build again
  • Here's a case error when installation being stuck on node-pre-gyp
    node-pre-gyp WARN Using request for node-pre-gyp https download 
            
  • Please stop the installation process by press CTRL+C
  • Then run npm install again.
  • If you get error messages when start project npm start like this
    ERROR in ./app/styles/layout/base.scss (./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/lib/loader.js??ref--8-3!./app/styles/layout/base.scss)
    Module build failed (from ./node_modules/sass-loader/lib/loader.js):
    Error: ENOENT: no such file or directory, scandir '/Users/retina/Documents/Enlite/enlite-prime_v1/starter-project/node_modules/node-sass/vendor'
            
  • It mean the node-sass not installed succesfully. May because connection problem, changed node environment during installation, or blocked node-sass repository
  • Please install node-sass manually by npm install node-sass --save
  • Build dll libraries npm run build:dll
  • Try to start project again npm start
  • If you get error messages when login/register or in Pre-build Apps
    {"error":{"code":400,"message":"API key not valid. Please pass a valid API key.","errors":[{"message":"API key not valid. Please pass a valid API key.","domain":"global","reason":"badRequest"}],"status":"INVALID_ARGUMENT"}}
            
  • {"error":{"code":400,"message":"API key not valid. Please pass a valid API key.","errors":[{"message":"API key not valid. Please pass a valid API key.","domain":"global","reason":"badRequest"}],"status":"INVALID_ARGUMENT"}}
                                          @firebase/database: FIREBASE WARNING: Firebase error. Please ensure that you spelled the name of your Firebase correctly
            
  • Please check the firebase configuration in app/firebase/config.js. By default we use fake configuration script.
  • If you haven't make you're configuration please follow the firebase setup instruction
  • Then replace you're config script to app/firebase/config.js


Basic Code Structure


Main HTML

The HTML root in /app/index.html

code

You can put google analytics, font icon, embeded fonts, etc here.



Main JS

The JS root in /app/app.js. This is the entry file for the application, only setup and boilerplate code.

code2


Directory Alias

You can find directory alias settings in /internals/webpack/webpack.base.babel.js

Name Alias Directory Sample Use
UI Components enl-components app/components/ import { CrudTable, Notification } from 'enl-components';
Reducer enl-redux app/redux/ import { loginWithEmail } from 'enl-redux/actions/authActions';
Component Style Overider enl-styles app/styles/components/ import css from 'enl-styles/Table.scss';
API enl-api app/api/ import brand from 'enl-api/dummy/brand';
Images enl-images public/images/ import decorationDark from 'enl-images/logo.png';
3rd Party Vendors enl-vendor node_modules/ import css from 'enl-vendor/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';



Template Architecture

This is template architecture in diagram visuailzation. Click diagram or full screen button full screen to show in new tab with full screen

Starter Project


This source code made for you who want build app from scratch without without being distracted from innate feature. In other word it's an initial(empty) project with built in configuration setup.

  • You can go through to starter-project/ folder
  • Connect to the internet
  • Open Terminal
  • The next installation process are same like was described above
  • Install module dependencies by run this script in terminal
    npm install
    It will download some necessary dependencies, it could take some minutes, just wait until finish.
  • Build Webpack DLL dependencies(If necessary)
    Install module dependencies by run this script in terminal. This process ussualy done by 'npm install', but if system require it just run this command:
    npm run build:dll
  • Run App
    After build static library, then run the app.
    npm start

    process
    INFO:
    - Just run this script whenever you want start the project.
    - Run npm install again if you have new module dependencies,
  • Navigate to http://localhost:3001
  • After this you can can start develop your app with this initial project. And will bo more suitable when use enlite-prime as a reference

UI and Languages


Follow this guide bellow to modify user interface, branding identity and default language.

Create New Page


  • Go to app/containers/
  • Create new folder ex: MyPage. The name must in capitalize
  • Create new js file inside that folder MyPage, ex SamplePage.js. The name must in capitalize
  • Inside the file create a simple page HTML ex:
    // file: app/containers/MyPage/SamplePage.js
    
    import React from 'react';
    import { Helmet } from 'react-helmet';
    import { PapperBlock } from 'enl-components';
    
    class SamplePage extends React.Component {
      render() {
        const title = 'Enlite Prime. Blank Page';
        const description = 'Enlite Prime';
        return (
          <div>
            <Helmet>
              <title>{title}</title>
              <meta name="description" content={description} />
              <meta property="og:title" content={title} />
              <meta property="og:description" content={description} />
              <meta property="twitter:title" content={title} />
              <meta property="twitter:description" content={description} />
            </Helmet>
            <PapperBlock title="Blank Page" desc="Some text description">
              Content
            </PapperBlock>
          </div>
        );
      }
    }
    
    export default SamplePage;
    
    
  • Import it asynchronously to the routing. Open file app/containers/pageListAsync.js
    // app/containers/pageListAsync.js
    
    export const SamplePage = Loadable({
      loader: () => import('./MyPage/SamplePage'),
      loading: Loading,
    });
  • Load it inside the template. In this example we'll use in dashboard template. Open file app/containers/App/Application.js
    // file: app/containers/App/Application.js
    
    import { SamplePage } from '../pageListAsync';
    class Application extends React.Component {
      render() {
        const { changeMode } = this.props;
        return (
          <Dashboard history={this.props.history} changeMode={changeMode}>
            <Switch>
              <Route exact path="/app/sample-page" component={SamplePage} />
            </Switch>
          </Dashboard>
        )
      }
    }
  • Then you can access it at http://localhost:3000/app/sample-page
  • Also you can put the a usual link inside <a /> or material button. See this documentation




Routing Architecture

This is Routing architecture in diagram visuailzation. Click diagram or full screen button full screen to show in new tab with full screen

Create New Component


  • Go to app/components/
  • Create new folder ex: MyComponent. The name must in capitalize
  • Create new js file inside that folder MyComponent, ex SampleComponent.js. The name must in capitalize
  • Inside the file create a simple ES6 Class ex:
    // file: app/components/MyComponent/SampleComponent.js
    
    import React from 'react';
    
    class SampleComponent extends React.Component {
      render() {
        return (
          <H1>Hello World</H1>
        );
      }
    }
    
    export default SampleComponent;
    
    
  • Register it to index. Open file app/components/index.js
  • Import that component
    
    // file: app/components/index.js
    
    import SampleComponent from './MyComponent/SampleComponent';
                                  
  • Open a target page where you want use it. Ex: Open src/app/MyPage/SamplePage. (Example page that we've made in previous section)
  • Import component form component library
    import { SampleComponent } from 'enl-components;
  • Then use it inside render function
    render() {
      return (
        <SampleComponent />
      );
    }
                                
  • Here's complete code
    // file: app/containers/MyPage/SamplePage.js
    
    import React from 'react';
    import { Helmet } from 'react-helmet';
    import { PapperBlock, SampleComponent } from 'enl-components';
    
    class SamplePage extends React.Component {
      render() {
        const title = 'Enlite Prime. Blank Page';
        const description = 'Enlite Prime';
        return (
          <div>
            <Helmet>
              <title>{title}</title>
              <meta name="description" content={description} />
              <meta property="og:title" content={title} />
              <meta property="og:description" content={description} />
              <meta property="twitter:title" content={title} />
              <meta property="twitter:description" content={description} />
            </Helmet>
            <PapperBlock title="Blank Page" desc="Some text description">
              <SampleComponent />
            </PapperBlock>
          </div>
        );
      }
    }
    
    export default SamplePage;
    
    
  • Then you can check the result at http://localhost:3000/mypage/sample-page

CRUD App and Authentication


This is the CRUD flow to explain how the sample Pre-build apps works.

Before we go through to the apps, first important thing to combine all reducer and sagas

  • Combine saga's
    file: app\utils\sagas.js
  • Combine reducers
    file: app\redux\reducers.js

Enable Direct Code Preview


To make documenation easy and effective to access and implement, we attached source code in every component demos. We call it Direct Code Preview. This feature can be used in purchased product only (not available in demo).

  • Open config file app/config/codePreview.js
  • By default it set by false
    // file: app/config/codePreview.js
    
    export default {
      enable: false
    };
    
  • Change to enable: true, to enabled direct code preview
  • Test with any component demo, example in http://localhost:3000/app/tables/advanced-table.
  • Then at the bottom of every components you will see <> Show Code Button. Just click it.
  • The source code of that components will show as well.

    theme

    np: Basically this feature read source file directly, so for every changes you make in component will also changes that preview.
  • You can see through, copy and paste directly any component in front of your eyes.
  • This feature use Source Reader component. You can find it in src/app/components/SourceReader/SourceReader.js. It was implemented in mostly component demos.

Clean Code with Eslint


Eslint is disabled by default. You can enable it to keep your code consistent and avoiding bug.
NOTE: By enable eslint the running app process at beginning will slower.

Just follow this step to enable eslint
  • Go to internals/webpack/webpack.base.babel.js
  • Just uncomment this code bellow
    //  const ESLintPlugin = require('eslint-webpack-plugin');
    plugins: options.plugins.concat([: {
        /*
          Disabled eslint by default.
          You can enable it to maintain and keep clean your code.
          NOTE: By enable eslint running app process at beginning will slower
        */
        //      new ESLintPlugin({
        //        extensions: 'js',
        //        exclude: 'node_modules',
        //        failOnWarning: true,
        //        failOnError: true,
        //        emitError: true,
        //        emitWarning: true,
        //      }),
    });
        
  • Then should become like this
    const ESLintPlugin = require('eslint-webpack-plugin');
    plugins: options.plugins.concat([: {
        /*
          Disabled eslint by default.
          You can enable it to maintain and keep clean your code.
          NOTE: By enable eslint running app process at beginning will slower
        */
            new ESLintPlugin({
              extensions: 'js',
              exclude: 'node_modules',
              failOnWarning: true,
              failOnError: true,
              emitError: true,
              emitWarning: true,
            }),
    });
        
  • Run the project npm start.
    You will be notified with an error message if your code not clean or consistent. ESLint itself is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
    More about elint https://eslint.org/docs/user-guide/getting-started

Google Maps API Config


Google Maps Platform products are secured from unauthorized use by restricting API calls to those that provide proper authentication credentials. These credentials are in the form of an API key - a unique alphanumeric string that associates your Google billing account with your project, and with the specific API or SDK. For more details please check https://developers.google.com/maps/documentation/javascript/get-api-key

Before you begin

Before you start using the Maps JavaScript API, you need a project with a billing account and the Maps JavaScript API enabled. To learn more, see Set up in Cloud Console.

Creating API keys

The API key is a unique identifier that authenticates requests associated with your project for usage and billing purposes. You must have at least one API key associated with your project.

To create an API key:

  1. Go to the Google Maps Platform > Credentials page. https://console.cloud.google.com/project/_/google/maps-apis/credentials
  2. On the Credentials page, click Create credentials > API key. The API key created dialog displays your newly created API key.
  3. Click Close.The new API key is listed on the Credentials page under API keys.(Remember to restrict the API key before using it in production.)

Adding the API key to your request

You must include an API key with every Maps JavaScript API request. In the following example, replace YOUR_API_KEY with your API key.

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

External Reference

Here's some external reference of library that we used


Fonts Used

roboto font



roboto font

Usage:   Checkout example usage in Ui Elements › Typography

Icons Used


To use icon, it has two method

Material Font Icons

  • Please make sure Google Material Icons already embeded in app/index.html.
    If not just embed this inside head tag
    <head>
          <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    </head>
  • Connect to internet
  • Import Material UI Icon to your component
    import Icon from '@material-ui/core/Icon';
  • Then add it inside render method. Example for use access_time icon
    <Icon>access_time<Icon />



Material SVG Icons

It's interesting to have the building blocks needed to implement custom icons. This template use NPM package, @material-ui/icons, that includes the 900+ official Material icons converted to SvgIcon components.

  • Import all necessary icons form Material UI Icons library
    import AccessTime from '@material-ui/icons/AccessTime';
    import Adjust from '@material-ui/icons/Adjust';
    import BatteryStd from '@material-ui/icons/BatteryStd';
                                
  • Use them as component in render method
     render() {
      return (
        <div>
          <AccessTime />
          <Adjust />
          <BatteryStd />
        <div />
      );
    }
                                



Icons Source

  • You can explore more than 800 material icons at UI Element › Icons

    icon list
  • And click one of icon, then the guide detail of using the icon will show

    icon list


Or from original source Google Material Icons


Sources and Credit


Fonts :
Lato

Preview Images Used
Unsplash
Pixabay
randomuser.me

Note: All images are just used for Preview Purpose Only. They are not part of the template and NOT included in the final purchase files.


Credits
Name Repository License
@babel.js https://github.com/babel/babel MIT
@material-ui https://github.com/mui-org/material-ui MIT
axios https://github.com/axios/axios MIT
classnames https://github.com/JedWatson/classnames MIT
draft-js https://github.com/facebook/draft-js BSD Licensed.
express https://github.com/expressjs/express MIT
firebase https://github.com/firebase/firebase-js-sdk Apache-2.0
history https://github.com/ReactTraining/history MIT
immutable https://github.com/facebook/immutable-js MIT
jss-rtl https://github.com/alitaheri/jss-rtl MIT
lodash https://github.com/lodash/lodash MIT
material-ui-pickers https://github.com/dmtrKovalenko/material-ui-pickers MIT
moment https://github.com/moment/moment MIT
mocha https://github.com/mochajs/mocha MIT
mui-datatables https://github.com/gregnb/mui-datatables MIT
prop-types https://github.com/facebook/prop-types MIT
react https://github.com/facebook/react MIT
react-autosuggest https://github.com/moroshko/react-autosuggest MIT
react-countup https://github.com/glennreyes/react-countup MIT
react-dropzone https://github.com/react-dropzone/react-dropzone MIT
react-google-maps https://github.com/tomchentw/react-google-maps MIT
react-helmet https://github.com/nfl/react-helmet MIT
react-hot-loader https://github.com/gaearon/react-hot-loader MIT
react-loading-bar https://github.com/mironov/react-redux-loading-bar MIT
react-markdown https://github.com/rexxars/react-markdown MIT
react-redux https://github.com/reduxjs/react-redux MIT
react-slick https://github.com/akiran/react-slick MIT
react-syntax-highlighter https://github.com/conorhastings/react-syntax-highlighter MIT
recharts https://github.com/recharts/recharts MIT
redux https://github.com/reduxjs/redux MIT
redux-form https://github.com/erikras/redux-form-material-ui MIT
redux-saga https://github.com/redux-saga/redux-saga/tree/master/packages/core MIT
redux-saga-firebase https://github.com/n6g7/redux-saga-firebase MIT
webpack https://github.com/webpack/webpack MIT

Online Suport


If you have any questions about customization of this template wich are not covered in the documentation feel free to ask a question in the comment section or contact me directly via e-mail form on my profile page.

A product by Ilham Meidi Brata



Enjoy and don’t forget to rate my template.

Thank you very much!

Change Log


Version 2.0.4 – 11 Mar, 2024
Feature: Create unlimited menu level for sidebar
File changes:
- app/api/ui/menu.js
- app/components/Sidebar/MainMenu.js
- app/components/Sidebar/sidebar-jss.js
- aapp/redux/modules/ui.js
Version 2.0.3 – 17 Sep, 2023
Chore: Remove Hidden deprecated MUI component
File changes:
- app/components
Version 2.0.2 – 17 Apr, 2023
Fixed: Responsive Issue
File changes:
- app/components/Email/EmailSidebar.js
- app/components/Header/Header.js
- app/components/Header/HeaderMenu.js
- app/components/Header/header-jss.js
- app/components/LandingPage/Banner.js
- app/components/LandingPage/Header.js
- app/components/LandingPage/Technology.js
- app/components/LandingPage/landingStyle-jss.js
- app/components/Sidebar/index.js
- app/components/SidebarBig/index.js
- app/components/Widget/ContactWidget.js
- app/containers/Pages/UserProfile/index.js
Version 2.0.1 – 12 Feb, 2023
Fixed: Sidebar Mini UI Issue
File changes:
- app/components/Sidebar/sidebar-jss.js
Version 2.0.0 – 6 Feb, 2023
Feature: Add Service Worker
File changes:
- package.json
- app/app.js
- internals/webpack/webpack.prod.babel.js
Chore: Upgrade to Material UI 5
File changes:
- package.json
- app/components/*.js
- app/containers/*.js
- app/styles/theme/applicationTheme.js
Version 1.9.3 – 7 Nov, 2022
Fixed: Node v18 error start and build
File changes:
- package.json
Docs: Installation deprecation error
Version 1.9.2 – 16 Oct, 2022
Chore: Remove unused dependencies
File changes:
- package.json
- internals/config.js
Docs: Redux Persist configuration
Version 1.9.1 – 2 Jul, 2022
Chore: Update webpack loader dependencies
File changes:
- package.json
- package-lock.json
Version 1.9 – 25 Mar, 2022
Chore: Upgrade to webpack 5
File changes:
- .npmrc
- app/app.js
- app/containers/App/index.js
- app/containers/Forms/demos/DateTimeInput.js
- app/redux/reducers.js
- app/styles/theme/applicationTheme.js
- internals/webpack/webpack.base.babel.js
- internals/webpack/webpack.dev.babel.js
- internals/webpack/webpack.prod.babel.js
- package.json
Fixed: Bug views
File changes:
- app/containers/Widgets/demos/ChartInfographic.js
- app/styles/theme/applicationTheme.js
Chore: Fixed some deprecated dependecies
File changes:
- package.json
Version 1.8 – 14 Feb, 2022
Feature: Redux-persist to connect state with local storage
File changes:
- app/app.js
- app/redux/configureStore.js
Chore: Migrate from immutable.js to immer.js
File changes:
- app/app.js
- app/components/**/*
- app/containers/**/*
- app/redux/**/*
Chore: update to react v17 and update another packages
File changes:
- package.json
- app/components/**/*
- app/containers/**/*
- app/firebase/**/*
- app/i18n.js
- internals/webpack/webpack.base.babel.js
Docs: Add Google Maps setup
Version 1.7 – 30 Aug, 2021
Change autocomplete using material-ui/lab
File changes:
- app/containers/Forms/demos/AutoSuggest.js
- app/containers/Forms/demos/HighlightSuggest.js
- app/containers/Forms/demos/SelectSuggestionTags.js
- app/containers/Forms/demos/SelectSuggestions.js
- app/containers/Forms/demos/TagSuggestions.js
- app/styles/theme/applicationTheme.js
Update UI Components demo to react-hooks
File changes:
- app/containers/UiElements/demos/**/*.js
- app/containers/UiElements/*.js
Remove source map warning in devtool
File changes:
- internals/webpack/webpack.base.babel.js
Update depedencies
File changes:
package.json
- app/firebase/firebase.js
- app/components/SourceReader/SourceReader.js
- app/containers/UiElements/IconGallery/DetailIcon.js
- app/containers/UiElements/demos/PopoverTooltip/PopoverPlayground.js
- server/middlewares/addDevMiddlewares.js
Version 1.6 – 7 Jun, 2021
Fixed: AuthWrapper login redirection
File changes:
- app/redux/modules/authSagas.js
Fixed: Chart dimension warning
File changes:
- app/containers/Charts/demos/*.js
- app/components/Widget/*.js
Chore: Update react version and update some dependencies.
File changes:
- package.json
- app/index.html
- app/styles/components/vendors/react-loading-bar/index.css
- app/containers/App/ThemeWrapper.js
- app/containers/Forms/demos/InlineWysiwyg.js
- app/components/Tables/AdvTable.js
- internals/scripts/dependencies.js
- internals/webpack/webpack.base.babel.js
- internals/webpack/webpack.prod.babel.js
Feature: change react-google-map to @react-google-maps/api
File changes:
- app/containers/Maps/
Disable offline access by default
File changes:
- app/app.js
- internals/webpack/webpack.prod.babel.js
Docs: Add guide how to enable offline access
Version 1.5 – 23 Mar, 2021
Fixed: Big Menu navigation active issue in mobile screen
File changes:
- app/components/SidebarBig/MainMenuBig.js
- app/components/SidebarBig/index.js
Fixed: Skeleton preloader animation
File changes:
- app/components/TodoList/todo-jss.js
- app/components/Email/email-jss.js
- app/components/Contact/contact-jss.js
Chore: Implement hooks lifecycle for Forms Demo
File changes:
- app/containers/Forms/*.js
- app/containers/Forms/demo/*.js
Chore: Implement hooks lifecycle for Widgets Demo
File changes:
- app/containers/Widgets/*.js
- app/containers/Widgets/demo/*.js
Version 1.4.3 – 13 Dec, 2020
Fixed: Big Sidebar transition issue
File changes
- app/components/SidebarBig/MainMenuBig.js
Fixed: node-sass installation issue for node version 14
File changes
- package.json
Chore: Implement hooks lifecycle for Tables
File changes
- app/components/Tables/*.js
- app/containers/Tables/*.js
- app/containers/Tables/demos/*.js
Chore: Implement hooks lifecycle for Pages
File changes
- app/components/SocialMedia/*.js
- app/containers/Pages/Timeline/index.js
- app/containers/Pages/Timeline/reducers/timelineReducer.js
- app/components/Chat/*.js
- app/containers/Pages/Chat/index.js
- app/components/Profile/*.js
- app/containers/Pages/UserProfile/index.js
- app/components/Product/*.js
- app/components/Invoice/index.js
- app/components/Comments/index.js
- app/components/Rating/Rating.js
- app/components/Forms/SideReview.js
- app/containers/Pages/Ecommerce/*.js
- app/containers/Pages/Maintenance/index.js
- app/containers/Pages/Photos/index.js
- app/containers/Pages/ComingSoon/index.js
- app/containers/Pages/AuthenticatedPage/index.js
Version 1.4.2 – 15 Nov, 2020
Chore: Implement hooks lifecycle for Landing Page
File changes
- app/components/LandingPage/*js
- app/containers/LandingPage/HomePage.js
Chore: Implement hooks lifecycle for Dashboard
File changes
- app/components/CardPaper/*.js
- app/components/Counter/*.js
- app/components/Widget/*.js
- app/containers/Dashboard/AnalyticDashboard.js
- app/containers/Dashboard/CryptoDashboard.js
- app/containers/Dashboard/MarketingDashboard.js
Chore: Implement hooks lifecycle for Sample Apps
File changes
- app/components/Contact/*.js
- app/containers/SampleApps/Contact/index.js
- app/containers/SampleFullstackApps/Contact/index.js
- app/components/Email/*.js
- app/containers/SampleApps/Email/index.js
- app/containers/SampleFullstackApps/Email/index.js
- app/components/TodoList/PlaceLoader.js
- app/containers/SampleApps/Todo/index.js
- app/containers/SampleFullstackApps/Todo/index.js
Chore: Implement hooks lifecycle for Auth Pages
File changes
- app/components/Forms/LockForm.js
- app/components/Forms/LoginForm.js
- app/components/Forms/LoginFormFirebase.js
- app/components/Forms/RegisterForm.js
- app/components/Forms/RegisterFormFirebase.js
- app/components/Forms/ResetForm.js
- app/containers/Pages/Users/LockScreen.js
- app/containers/Pages/Users/Login.js
- app/containers/Pages/Users/Register.js
- app/containers/Pages/Users/ResetPassword.js
- app/containers/Pages/UsersFullstack/Login.js
- app/containers/Pages/UsersFullstack/Register.js
- app/containers/Pages/UsersFullstack/ResetPassword.js
Chore: Implement hooks lifecycle for Chart
File changes
- app/containers/Charts/*.js
- app/containers/Charts/demos/PieCustomLabel.js
- app/containers/Charts/demos/PieCustomShape.js
Chore: Implement hooks lifecycle for Maps
File changes
- app/containers/Maps/*.js
- app/containers/Maps/demo/*.js
Version 1.4.1 – 18 Oct, 2020
Chore: Implement hooks lifecycle fo Container Routes and Template
File changes
- app/containers/App/*js
- app/containers/Templates/*.js
Chore: Implement hooks lifecycle for Main Components (Header, Sidebar, Big Sidebar, Search and Guide)
File changes
- app/components/Header/*.js
- app/components/Sidebar/*.js
- app/components/BigSidebar/*.js
- app/components/Search/*.js
- app/components/GuideSlider/*.js
Fixed: Error decoration alignment in mobile
File changes
- app/components/Error/ErrorWrap.js
Fixed: Selected item state on Sidebar Menu
File changes
- app/components/Sidebar/MainMenu.js
- app/components/Sidebar/index.js
- app/components/Sidebar/sidebar-jss.js
Fixed: Floating form background issue in dark mode
File changes
- app/styles/components/Form.scss
Version 1.4.0 – 23 Jul, 2020
Feture: Add one level menu
File changes
- app/api/ui/menu.js
- app/components/Header/
- app/components/Sidebar/
- app/components/SidebarBig/
- app/redux/actions/uiActions.js
- app/redux/constants/uiConstants.js
- app/redux/modules/uiReducer.js
Changed: react-ionicons to ionicon font-icon
File changes
- app/index.html
Fixed: MUI-Table filter in mobile screen
File changes: app/redux/modules/uiReducer.js
Fixed: Twice render in main container
File changes: app/containers/Templates/layouts/
Fixed: Todo add text box alignment
File changes: app/components/TodoList/todo-jss.js
Fixed: Redux form editing text
File changes: app/components/Contact/AddContact.js
Version 1.3.2 – 9 Apr, 2020
Fixed: Collapsible sidebar in Safari
File changes:
- app/components/Sidebar/index.js
- app/components/Sidebar/sidebar-jss.js
Fixed: Cannot clear redux form textfiled
File changes:
- app/components/Forms/ReduxFormMUI.js
Fixed: Missing image in gallery page
File changes:
- app/components/Gallery/photo-jss.js
Fixed: Not aligned CRUD Table icons
File changes:
- app/components/Tables/tableParts/DatePickerCell.js
- app/components/Tables/tableParts/TimePickerCell.js
Fixed: Top navigation menu issue
File changes:
- app/containers/Templates/Dashboard.js
- app/components/Header/DropListMenu.js
- app/components/Header/MegaMenu.js
Version 1.3.1 – 29 Dec, 2019
Fixed: Material UI Table responsive
File changes:
- app/styles/theme/applicationTheme.js
- app/containers/Tables/demos/AdvFilter.js
Fixed: Textfield adornment layout
File changes:
- app/styles/theme/applicationTheme.js
- app/containers/Forms/demos/InputAdornments.js
Version 1.3 – 29 Nov, 2019
Chore: Update Material UI and more packages
Fixed: Upload Preview
Fixed: Add new data if data table is empty
Fixed: Open header menu issue
Fixed: Redux form typing experience
Fixed: Datepicker localizations
Version 1.2.5 – 28 Aug, 2019
Feature: Add tree view and tree table redux
Feature: Add pure Front-End page for Auth pages (Login, Register, Reset Password)
UI Changed: Use Maven Pro as primary font-family replace Lato
Fixed: Avatar space margin in List
Version 1.2 – 20 Jul, 2019
Chore: Upgrade to Material UI v4.2
Chore: Upgrade Dropzone to v10.1.5
Feature: Add new 3 variant theme (Light Blue, Light Green, and Brown)
UI Changes: Redesign counter widget.
Version 1.1 – 25 May, 2019
New Feature: Cryptocurrency Dashboard
New Feature: Widget Collections
New Feature Social Media Page: Timeline and Chat
New Feature Ecommerce Page: Product, Checkout and Invoice
Version 1.0 – 13 May, 2019
Enlite Prime released