Datta Able admin template is react + redux admin template based on create react app, redux, BS4 with variety feature. Datta Able is not an ordinary admin panel template - It has lots of pre-define functionality which completely ready for any complex projects!!

Author :

Codedthemes

Support :

https://codedthemes.support-hub.io/

                                            
                                                datta-able-react/
                                                    ├── node_modules/
                                                    ├── public/
                                                        ├── assets/
                                                            ├── fonts/
                                                        ├── favicon.ico
                                                        ├── index.html
                                                        ├── manifest.json
                                                    ├── src/
                                                        ├── App/..
                                                            ├── components/
                                                            ├── layout/
                                                                ├── AdminLayout/
                                                                    ├── Breadcrumb/
                                                                    ├── NavBar/
                                                                    ├── Navigation/
                                                                    ├── app.scss
                                                                    ├── index.js
                                                                ├── AuthLayout/
                                                                ├── Loader/
                                                                ├── ScrollToTop/
                                                                ├── index.js
                                                        ├── assets/
                                                            ├── images/
                                                            ├── scss/
                                                        ├── Demo/
                                                            ├── AppPages/
                                                                ├── Gallery/
                                                                ├── Task/
                                                                ├── Todo/
                                                            ├── Authentication/
                                                                ├── ResetPassword/
                                                                ├── SignIn/
                                                                ├── SignUp/
                                                                ├── ChangePassword.js
                                                                ├── MapForm.js
                                                                ├── PersonalInfo.js
                                                                ├── ProfileSettings.js
                                                                ├── Subscribe.js
                                                            ├── Chart/
                                                                ├── AmChart/
                                                                ├── ChartJs/
                                                                ├── EChart/
                                                                ├── GoogleChart/
                                                                ├── HighChart/
                                                                ├── Nvd3Chart/
                                                                ├── PeityChart/
                                                                ├── RadialChart/
                                                                ├── ReChart/
                                                            ├── Dashboard/
                                                                ├── Analytics.js
                                                                ├── Crm.js
                                                                ├── Crypto.js
                                                                ├── Default.js
                                                                ├── Ecommerce.js
                                                                ├── Project.js
                                                            ├── Extension/
                                                                ├── Editor/
                                                                ├── Invoice/
                                                                ├── FileUpload.js
                                                                ├── FullEventCalendar.js
                                                            ├── Forms/
                                                                ├── FormsAdvance.js
                                                                ├── FormsElements.js
                                                                ├── FormsMasking.js
                                                                ├── FormsPicker.js
                                                                ├── FormsSelect.js
                                                                ├── FormsValidation.js
                                                                ├── FormsWizard.js
                                                            ├── Landing/
                                                            ├── Maintenance/
                                                                ├── ComingSoon.js
                                                                ├── Error.js
                                                                ├── OfflineUI.js
                                                            ├── Maps/
                                                                ├── GoogleMap/
                                                                ├── VectorMap/
                                                            ├── Other/
                                                                ├── SamplePage.js
                                                            ├── PageLayout/
                                                                ├── PreBuilt/
                                                                ├── Vertical/
                                                                ├── BoxLayout.js
                                                                ├── ColorIcon.js
                                                                ├── DarkLayout.js
                                                                ├── Horizontal.js
                                                                ├── LightLayout.js
                                                                ├── RtlLayout.js
                                                            ├── Tables/
                                                                ├── BootstrapTable/
                                                                ├── DataTable/
                                                            ├── UIElements/
                                                                ├── Advance/
                                                                ├── Basic/
                                                            ├── Widget/
                                                                ├── Chart.js/
                                                                ├── DataUserList.js/
                                                                ├── Data.js/
                                                                ├── Statistics.js/
                                                                ├── Table.js/
                                                                ├── Users.js/
                                                            ├── AppPages/..
                                                        ├── hoc/
                                                            ├── Aux/
                                                        ├── store/
                                                            ├── actions.js
                                                            ├── constant.js
                                                            ├── reducer.js
                                                        ├── config.js
                                                        ├── index.js
                                                        ├── menu-items.js
                                                        ├── route.js
                                                        ├── routes.js
                                                    ├── .gitignore
                                                    ├── package.json
                                                    ├── README.md
                                            
                                        

Datta Able React routing system based on react-router It's also use code splitting for better performance.

                                            
                                                How Can I add new page with menu item?

                                                You can use the below explanation to add/remove menu routs and their menu items.
                                            
                                        

Configure Route

IF you want to add Test Component and set it into menu-item follow below steps.

Step 1: Create Test.js file at directory ../src/Demo/ and add below code.

                                            
                                                import React, {Component} from 'react';

                                                class Test extends Component {
                                                    render() {
                                                        return (
                                                            //Page Content
                                                        );
                                                    }
                                                }

                                                export default SamplePage;
                                            
                                        

Step 2: Open file ../src/route.js(for basic admin layout, nav, side-bar, etc.) OR ../src/routes.js (for blank page like, login, error, etc)

Step 3: Open file ../src/menu-items.js and add below code in opened file.

                                            
                                                export default {
                                                    items: [
                                                        {
                                                            id: 'other',
                                                            title: 'Other',
                                                            type: 'group',
                                                            icon: 'icon-other',
                                                            children: [
                                                                ...
                                                                {
                                                                    id: 'test-page',
                                                                    title: 'Test',
                                                                    type: 'item',
                                                                    icon: 'feather icon-menu',
                                                                    url: '/test'
                                                                },
                                                                ...
                                                            ]
                                                        }
                                                    ]
                                                }
                                            
                                        

Step 4: Add below code like code splitting in opened file route.js or routes.js

                                            
                                                const TestPage = React.lazy(() => import('./Demo/Test'));
                                                const routes = [
                                                    ...
                                                    { path: '/test', exact: true, name: 'Test', component: TestPage }
                                                    ...
                                                ]
                                            
                                        

Step 5: Now Test page is ready to use, open url like, http://localhost:3000/test

                                            
                                                export default {
                                                    'rtlLayout': true
                                                }
                                            
                                        

                                            
                                                export default {
                                                    'layoutType': 'dark'
                                                }
                                            
                                        

How to Compile SCSS?

You need to complile scss when you change scss using koala scss Compiler

List of variables for Datta able design

You can change this _variables.scss at directory [ ../src/assets/scss/partials/_variables.scss ]

                                                
                                                    // Top bar height
                                                    $header-height: 70px;

                                                    // Sidebar menu width
                                                    $Menu-width: 264px;

                                                    // Small menu width
                                                    $Menu-collapsed-width: 80px;

                                                    // Color list for Datta Able Admin Templet
                                                    // theme color variables
                                                    $theme-color: linear-gradient(-135deg, #1de9b6 0%, #1dc4e9 100%);
                                                    $theme-color2: linear-gradient(-135deg, #899FD4 0%, #A389D4 100%);
                                                    $primary-color: #04a9f5;
                                                    $warning-color: #f4c22b;
                                                    $danger-color: #f44236;
                                                    $success-color: #1de9b6;
                                                    $purple-color: #a389d4;
                                                    $info-color: #3ebfea;
                                                    $dark-color: #37474f;
                                                    $theme-border: #eaeaea;

                                                    // header colors
                                                    $brand-background: #3f4d67;
                                                    $header-dark-background: #3f4d67;
                                                    $header-dark-text-color: #fff;
                                                    $header-light-background: #fff;
                                                    $header-light-text-color: #3f4d67;

                                                    // Sidebar colors
                                                    $menu-caption-color: #14171d;
                                                    $menu-dark-background: #3f4d67;
                                                    $menu-dark-text-color: #a9b7d0;
                                                    $menu-light-background: #fff;
                                                    $menu-light-text-color: #3f4d67;
                                                    $menu-active-color: #04a9f5;

                                                    // dark layout colors
                                                    $dark-layout: #212224;
                                                    $dark-layout-font: #adb7be;

                                                    // Menu icon
                                                    $menu-icon-color: $primary-color, #ff5252, #01a9ac ,#9575CD , #23b7e5, $warning-color;

                                                    // Header background
                                                    $color-header-name: blue, red, purple, lightblue, dark;
                                                    $color-header-color: $primary-color, #ff5252, #9575CD ,#23b7e5,lighten($dark-layout,7%);

                                                    // Menu background
                                                    $color-menu-name: blue, red, purple, lightblue, dark;
                                                    $color-menu-color: $primary-color, #ff5252, #9575CD ,#23b7e5,lighten($dark-layout,7%);

                                                    // Active background color
                                                    $color-active-name: blue, red, purple, lightblue, dark;
                                                    $color-active-color: $primary-color, #ff5252, #9575CD ,#23b7e5,lighten($dark-layout,7%);

                                                    // Menu title color
                                                    $color-title-name: blue, red, purple, lightblue, dark;
                                                    $color-title-color: $primary-color, #ff5252, #9575CD ,#23b7e5,lighten($dark-layout,7%);

                                                    // basic variable
                                                    $theme-font-family: 'Open Sans', sans-serif;
                                                    $theme-font-size: 14px;
                                                    $theme-background: #f4f7fa;
                                                    $theme-font-color: #888;
                                                    $theme-heading-color: #111;
                                                
                                            

                                                
                                                    v1.0
                                                    -----------

                                                    09-01-2019 - v1.0 Release