Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16

Overview

Airframe React

High Quality Dashboard / Admin / Analytics template that works great on any smartphone, tablet or desktop. Available as Open Source as MIT license.

aiframe-2019-light-primary-ExchangeTrading2x-bfc026c1-0477-45c8-ba55-f6dd43141e4c

Introduction

Airframe Dashboard with a minimalist design and innovative Light UI will let you build an amazing and powerful application with great UI. Perfectly designed for large scale applications, with detailed step by step documentation.

This Airframe project is a typical Webpack based React app, React Router also included together with customised Reacstrap. This project has all of it's few dependencies up to date and it will be updated on a regular basis. This project doesn't support SSR. If you need it - use the NextJs based version.

Features

Airframe Dashboard has a huge collection of components that can be used in a great number of combinations and variations. It can be used in all types of custom web applications such as CRMs, CMSs, Admin Panels, Admin Dashboards, Analytics, etc.

  • 10+ Layout Variations - a multitude of possibilities to rearrange the layout, allows to customize the look of your application just as you imagined.
  • Applications - applications ready, allows you to save time and focus on project development.
  • UI Components - we offer you a large number of UI components; fully ready for changes that will customize them for your needs.
  • Responsive Design - fully adapted to your application, exactly well presented on the desktop, a tablet or smartphone.
  • 120+ Unique Pages designed to make use of them directly in your application.
  • 2 Starters so that you can immediately work with the components that are necessary for your application.

Author

Tomasz Owczarczyk:

Installation

Initial Configuration:

You need to have NodeJs (>= 10.0.0) installed on your local machine, before attempting to run a dev environment.

  1. Extract contents of the package to your local machine.
  2. Using the Terminal navigate to the extracted contents.
  3. Run npm install.

Make sure you have a file called .npmrc in the extracted directory. Those files are typically hidden in Unix based systems.

Development

To start the development environment type npm start in the console. This will start a development server with hot reloading enabled.

Production

To create a production build type npm run build:prod. After the process is complete you can copy the output from the /dist/ directory. The output files are minified and ready to be used in a production environment.

Build Customization

You can customize the build to suit your specific needs by adjusting the Webpack configuration files. Those files can be found in the /build directory. For more details checkout the documentation of WebPack.

Project Details

Some points of interest about the project project structure:

  • app/components - custom React components should go here
  • app/styles - styles added here won't be treated as CSS Modules, so any global classes or library styles should go here
  • app/layout - the AppLayout component can be found here which hosts page contents within itself; additional sidebars and navbars should be placed in ./components/ subdir.
  • app/colors.js - exports an object with all of the defined colors by the Dashboard. Useful for styling JS based components - for example charts.
  • app/routes - PageComponents should be defined here, and imported via index.js. More details on that later.

Defining Routes

Route components should be placed in separate directories inside the /routes/ directory. Next you should open /routes/index.js file and attach the component. You can do this in two diffrent ways:

Static Imports

Pages imported statically will be loaded eagerly on PageLoad with all of the other content. There will be no additional loads when navigating to such pages BUT the initial app load time will also be longer. To add a statically imported page it should be done like this:

{ /* ... */ } ); } ">
// Import the default component
import SomePage from './SomePage';
// ...
export const RoutedContent = () => {
    return (
        <Switch>
            { /* ... */ }
            { /* Define the route for a specific path */ }
            <Route path="/some-page" exact component={SomePage} />
            { /* ... */ }
        </Switch>
    );
}

Dynamic Imports

Dynamically imported pages will only be loaded when they are needed. This will decrease the size of the initial page load and make the App load faster. You can use React.Suspense to achieve this. Example:

}> ); } ">
// Create a Lazy Loaded Page Component Import
const SomeAsyncPage = React.lazy(() => import('./SomeAsyncPage'));
// ...
export const RoutedContent = () => {
    return (
        <Switch>
            { /* ... */ }
            { /*
                Define the route and wrap the component in a React.Suspense loader.
                The fallback prop might contain a component which will be displayed
                when the page is loading.
            */ }
            <Route path="/some-async-page">
                <React.Suspense fallback={ <PageLoader /> }>
                    <SomeAsyncPage />
                </React.Suspense>
            </Route>
        </Switch>
    );
}

Route specific Navbars and Sidebars

Sometimes you might want to display additional content in the Navbar or the Sidebar. To do this you should define a customized Navbar/Sidebar component and attach it to a particular route. Example:

{ /* Default Navbar: */} ); export const RoutedSidebars = () => ( { /* Other Sidebars: */} { /* Default Sidebar: */} ); ">
import { SidebarAlternative } from './../layout/SidebarAlternative';
import { NavbarAlternative } from './../layout/NavbarAlternative';
// ...
export const RoutedNavbars  = () => (
    <Switch>
        { /* Other Navbars: */}
        <Route
            component={ NavbarAlternative }
            path="/some-custom-navbar-route"
        />
        { /* Default Navbar: */}
        <Route
            component={ DefaultNavbar }
        />
    </Switch>  
);

export const RoutedSidebars = () => (
    <Switch>
        { /* Other Sidebars: */}
        <Route
            component={ SidebarAlternative }
            path="/some-custom-sidebar-route"
        />
        { /* Default Sidebar: */}
        <Route
            component={ DefaultSidebar }
        />
    </Switch>
);

Theming

You can set the color scheme for the sidebar and navbar by providing initialStyle and initialColor to the component which should be wrapping the component.

Possible initialStyle values:

  • light
  • dark
  • color

Possible initialColor values:

  • primary
  • success
  • info
  • warning
  • danger
  • indigo
  • purple
  • pink
  • yellow

Programatic Theme Changing

You can change the color scheme on runtime by using the ThemeConsumer from the components. Example:

// ...
import { ThemeContext } from './../components';
// ...
const ThemeSwitcher = () => (
    <ThemeConsumer>
        ({ onChangeTheme }) => (
            <React.Fragment>
                <Button onClick={() => onThemeChange({ style: 'light' })}>
                    Switch to Light
                </Button>
                <Button onClick={() => onThemeChange({ style: 'dark' })}>
                    Switch to Dark
                </Button>
            </React.Fragment>
        )
    </ThemeConsumer>
);

Options provided by the ThemeConsumer:

  • style - current theme style
  • color - current theme color
  • onChangeTheme({ style?, color? }) - allows to change the theme

Credits

Used plugins in this dashboard:

Issues
  • Standalone NPM package

    Standalone NPM package

    Hey, first of all - great work! I really love the look and feel of this admin dashboard. I would like to try it out in an existing project and the best way to do it would be to just install it with NPM and import your components into my app. Any plans for this? Waiting for the Next.js version :)

    opened by Emnalyeriar 6
  • Demo as Development Build?

    Demo as Development Build?

    If the demo, which is beautiful, were published as a development build and therefore explorable using the React dev-tools... that would be an excellent way to help users understand the available components and relationships between those components.

    opened by zebulonj 4
  • Scss Overrides

    Scss Overrides

    How do you override style variables? For example, I would like to change some of the basic Bootstrap colors. Values added to styles/variables.scss or colors.scss don't seem to get picked up in the build.

    opened by scottshane 4
  • Missing dependency

    Missing dependency

    It seems that a missing dependency is required from npm.

    1965 ~/Projects/github_repos/airframe-react[master ?] $ npm install
    npm WARN deprecated @babel/[email protected]: 🚨 As of Babel 7.4.0, this
    npm WARN deprecated package has been deprecated in favor of directly
    npm WARN deprecated including core-js/stable (to polyfill ECMAScript
    npm WARN deprecated features) and regenerator-runtime/runtime
    npm WARN deprecated (needed to use transpiled generator functions):
    npm WARN deprecated
    npm WARN deprecated   > import "core-js/stable";
    npm WARN deprecated   > import "regenerator-runtime/runtime";
    npm WARN deprecated [email protected]: [email protected]<2.6.8 is no longer maintained. Please, upgrade to [email protected] or at least to actual version of [email protected]
    npm ERR! code E404
    npm ERR! 404 Not Found - GET https://registry.npmjs.org/@owczar%2fdashboard-style--airframe - Not found
    npm ERR! 404
    npm ERR! 404  '@owczar/[email protected]^0.1.13' is not in the npm registry.
    npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
    npm ERR! 404 It was specified as a dependency of 'airframe-react'
    npm ERR! 404
    npm ERR! 404 Note that you can also install from a
    npm ERR! 404 tarball, folder, http url, or git url.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /Users/nicolafiorillo/.npm/_logs/2019-08-17T12_05_05_523Z-debug.log`
    
    1964 ~/Projects/github_repos/airframe-react[master ?] $ node --version
    v12.8.1
    

    Same problem with Nodejs 10.X.X.

    opened by nicolafiorillo 3
  • Add Redux and typescript?

    Add Redux and typescript?

    Is there any hope we will see this in the future?

    opened by jaksatomovic 3
  • Initial setup issue

    Initial setup issue

    I checked out a fresh copy, cd to the folder

    $yarn $yarn start .....

    ERROR in ./app/routes/Tables/ExtendedTable/components/CustomSizePerPageButton.js
    Module build failed (from ./node_modules/babel-loader/lib/index.js):
    SyntaxError: /home/thawkins/IdeaProjects/airframe-react/app/routes/Tables/ExtendedTable/components/CustomSizePerPageButton.js: Rest element must be last element (15:14)
    

    .....

    opened by thawkins 2
  • Adjust alignment on card header when input is present

    Adjust alignment on card header when input is present

    image

    Probably would be better aligned along the bottom edge. Seen in Chrome.

    opened by stevecastaneda 1
  • Set card minheight

    Set card minheight

    What is the easiest way to set the minheight on a card, without having to setup a stylesheet for it?

    opened by thawkins 1
  • Moving the project inside Electron

    Moving the project inside Electron

    opened by Unforgiven-wanda 1
  • Project fails to build

    Project fails to build

    Hello, I'm trying to build the project but npm -i throws dependency issues:

     airframe-react (master) npm i
    npm ERR! code ERESOLVE
    npm ERR! ERESOLVE unable to resolve dependency tree
    npm ERR!
    npm ERR! While resolving: [email protected]
    npm ERR! Found: [email protected]
    npm ERR! node_modules/eslint
    npm ERR!   dev [email protected]"^6.1.0" from the root project
    npm ERR!
    npm ERR! Could not resolve dependency:
    npm ERR! peer [email protected]"^4.19.1 || ^5.3.0" from [email protected]
    npm ERR! node_modules/eslint-config-airbnb
    npm ERR!   dev [email protected]"^17.1.0" from the root project
    npm ERR!
    npm ERR! Fix the upstream dependency conflict, or retry
    npm ERR! this command with --force, or --legacy-peer-deps
    npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
    

    tried if with --force as well:

    airframe-react (master) npm i --force
    npm WARN using --force Recommended protections disabled.
    npm WARN ERESOLVE overriding peer dependency
    npm WARN Found: [email protected]
    npm WARN node_modules/eslint
    npm WARN   dev [email protected]"^6.1.0" from the root project
    npm WARN   1 more (babel-eslint)
    npm WARN
    npm WARN Could not resolve dependency:
    npm WARN peer [email protected]"^4.19.1 || ^5.3.0" from [email protected]
    npm WARN node_modules/eslint-config-airbnb
    npm WARN   dev [email protected]"^17.1.0" from the root project
    npm ERR! code ERESOLVE
    npm ERR! ERESOLVE unable to resolve dependency tree
    npm ERR!
    npm ERR! Found: [email protected]
    npm ERR! node_modules/eslint
    npm ERR!   dev [email protected]"^6.1.0" from the root project
    npm ERR!   peer [email protected]">= 4.12.1" from [email protected]
    npm ERR!   node_modules/babel-eslint
    npm ERR!     dev [email protected]"^10.0.1" from the root project
    npm ERR!
    npm ERR! Could not resolve dependency:
    npm ERR! peer [email protected]"^4.19.1 || ^5.3.0" from [email protected]
    npm ERR! node_modules/eslint-config-airbnb/node_modules/eslint-config-airbnb-base
    npm ERR!   [email protected]"^13.2.0" from [email protected]
    npm ERR!   node_modules/eslint-config-airbnb
    npm ERR!     dev [email protected]"^17.1.0" from the root project
    npm ERR!
    npm ERR! Fix the upstream dependency conflict, or retry
    npm ERR! this command with --force, or --legacy-peer-deps
    npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
    npm ERR!
    

    node: v15.2.0 npm: v7.0.10 airframe-react: latest from master branch macos: 11

    opened by alechko 1
  • To fix missing dependencies and compilation error

    To fix missing dependencies and compilation error

    1. Missing dependency isomorphic-fetch:
    ERROR in ./app/routes/Forms/Typeahead/components/utils.js
    Module not found: Error: Can't resolve 'isomorphic-fetch' in
    
    1. Compilation Error:
    ERROR in ./app/styles/plugins/plugins.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/plugins/plugins.scss)
        Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    
        $half-drag-handle-height: math.div($drag-handle-height, 2);
                                     ^
              Invalid CSS after "...le-height: math": expected expression (e.g. 1px, bold), was ".div($drag-handle-h"
    
    opened by leguim-repo 0
  • Not able to run repo locally

    Not able to run repo locally

    Am not able to run the repo locally , can someone tell how to do this ?

    Getting this : image

    image

    opened by Jassi10000 2
  • File to import not found or unreadable: ~bootstrap/scss/code.

    File to import not found or unreadable: ~bootstrap/scss/code.

    I face issue with "@owczar/dashboard-style--airframe": "^0.1.23"

    SassError: File to import not found or unreadable: ~bootstrap/scss/code. on line 13 of node_modules/@owczar/dashboard-style--airframe/scss/bootstrap/bootstrap.scss from line 3 of src/styles/styles.scss

    @import "~bootstrap/scss/code";

    opened by LuuLinhSon 0
  • Vue Version is not available

    Vue Version is not available

    opened by MrVitaly 0
  • I want to ask about Firebase and Service Worker: Error: A bad HTTP response code (404) was received when fetching the script

    I want to ask about Firebase and Service Worker: Error: A bad HTTP response code (404) was received when fetching the script

    I use Air Frame, so my structure is like this:

    image

    Because there is no public folder, so I try adding one.

    My firebase-messaging-sw.js:

    import * as firebase from "firebase"; import "firebase/database"; import 'firebase/messaging';

    var firebaseConfig = { apiKey: "xxxx", authDomain: "xxxx", projectId: "myhealthqlpkv1", storageBucket: "xxxx", messagingSenderId: "xxxxx", appId: "xxxx", measurementId: "xxxx" }; // Initialize Firebase firebase.default.initializeApp(firebaseConfig); // var db = firebase.default.database().ref();

    const messaging = firebase.default.messaging(); export default messaging;

    In my Login.js, I try to register and getToken:

    import messaging from "../../../public/firebase-messaging-sw" if ("serviceWorker" in navigator) { navigator.serviceWorker .register("/firebase-messaging-sw.js") .then(function(registration) { console.log("Registration successful, scope is:", registration.scope); messaging.getToken({vapidKey: 'xxxx', serviceWorkerRegistration : registration }) .then((currentToken) => { if (currentToken) { console.log('current token for client: ', currentToken); localStorage.setItem('registrationToken', currentToken);

            // Track the token -> client mapping, by sending to backend server
            // show on the UI that permission is secured
          } else {
            console.log('No registration token available. Request permission to generate one.');
    
            // shows on the UI that permission is required 
          }
        }).catch((err) => {
          console.log('An error occurred while retrieving token. ', err);
          // catch error while creating client token
        });  
      })
      .catch(function(err) {
        console.log("Service worker registration failed, error:"  , err );
    }); 
    

    }

    I run into that error, can you help me? When I used the create-react-app originally, I was successful to get the token. But now I can't @@ Pls, I want to use this airframe.

    opened by dinhan1192 0
  • getting error when adding ag-grid enterprise

    getting error when adding ag-grid enterprise

    Here is my package.json

    { "name": "airframe-dashboard", "version": "0.1.0", "description": "Seed project for flexible light React/Bootstrap 4 dashboards.", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "npm run start:dev", "build:dev": "node ./build/cli-tools.js --clear dist --create dist && webpack --config ./build/webpack.config.client.dev.js", "build:prod": "node ./build/cli-tools.js --clear dist --create dist && webpack --config ./build/webpack.config.client.prod.js", "start:dev": "node ./build/cli-tools.js --clear dist --create dist && webpack-dev-server --config ./build/webpack.config.client.dev.js", "start:prod": "node ./build/cli-tools.js --clear dist --create dist && webpack-dev-server --config ./build/webpack.config.client.prod.js" }, "author": "Webkom", "license": "ISC", "devDependencies": { "@babel/cli": "^7.4.4", "@babel/core": "^7.4.5", "@babel/plugin-proposal-class-properties": "^7.4.4", "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/preset-env": "^7.4.5", "@babel/preset-react": "^7.0.0", "autoprefixer": "^9.6.0", "babel-eslint": "^10.0.1", "babel-loader": "^8.0.6", "babel-plugin-universal-import": "^4.0.0", "circular-dependency-plugin": "^5.0.2", "commander": "^2.20.0", "css-loader": "^3.1.0", "eslint": "^6.1.0", "eslint-config-airbnb": "^17.1.0", "eslint-import-resolver-alias": "^1.1.2", "eslint-plugin-import": "^2.17.3", "eslint-plugin-jsx-a11y": "^6.2.1", "eslint-plugin-react": "^7.13.0", "extract-css-chunks-webpack-plugin": "^4.5.2", "file-loader": "^4.0.0", "html-webpack-plugin": "^3.2.0", "mkdirp": "^0.5.1", "node-sass": "^4.12.0", "optimize-css-assets-webpack-plugin": "^5.0.1", "postcss-loader": "^3.0.0", "raw-loader": "^3.0.0", "rimraf": "^2.6.3", "sass-loader": "^7.1.0", "style-loader": "^0.23.1", "terser-webpack-plugin": "^1.3.0", "webpack": "^4.33.0", "webpack-cli": "^3.3.4", "webpack-dev-server": "^3.7.1" }, "dependencies": { "@babel/polyfill": "^7.4.4", "@owczar/dashboard-style--airframe": "^0.1.13", "ag-grid-community": "^25.2.1", "ag-grid-enterprise": "^25.2.1", "ag-grid-react": "^25.2.0", "bootstrap": "^4.3.1", "faker": "^4.1.0", "font-awesome": "^4.7.0", "holderjs": "^2.9.6", "isomorphic-fetch": "^3.0.0", "lodash": "^4.17.11", "moment": "^2.24.0", "node-fetch": "^2.6.0", "numeral": "^2.0.6", "prop-types": "^15.7.2", "query-string": "^6.7.0", "rc-slider": "^8.6.13", "react": "^16.8.6", "react-beautiful-dnd": "^11.0.4", "react-big-calendar": "^0.22.0", "react-bootstrap-table-next": "^3.1.4", "react-bootstrap-table2-editor": "^1.2.4", "react-bootstrap-table2-filter": "^1.1.9", "react-bootstrap-table2-paginator": "^2.0.6", "react-bootstrap-table2-toolkit": "^2.0.1", "react-bootstrap-typeahead": "^4.0.0-alpha.9", "react-datepicker": "^2.7.0", "react-dom": "^16.8.6", "react-dom-factories": "^1.0.2", "react-dropzone": "^10.1.5", "react-grid-layout": "^0.16.6", "react-helmet": "^5.2.1", "react-hot-loader": "^4.11.0", "react-image-crop": "^8.0.2", "react-quill": "^1.3.3", "react-responsive": "^7.0.0", "react-router": "^5.0.1", "react-router-dom": "^5.0.1", "react-text-mask": "^5.4.3", "react-toastify": "^5.2.1", "react-toggle": "^4.0.2", "react-universal-component": "^4.0.0", "reactstrap": "^8.0.0", "recharts": "^1.6.2", "text-mask-addons": "^3.8.0", "uuid": "^3.3.2", "webpack-cli": "^3.1.0", "webpack-flush-chunks": "^2.0.3" } }

    here is the modified AgGrid.js in 'app\routes\Tables\AgGrid'

    import React from 'react'; import { render } from 'react-dom'; import {AgGridColumn, AgGridReact} from 'ag-grid-react'; import 'ag-grid-enterprise'; import 'ag-grid-community/dist/styles/ag-grid.css'; import 'ag-grid-community/dist/styles/ag-theme-balham.css';

    export default class AgGridExample extends React.Component {

    render() {
        const rowData = [
           {make: "Toyota", model: "Celica", price: 35000},
           {make: "Ford", model: "Mondeo", price: 32000},
           {make: "Porsche", model: "Boxter", price: 72000}
        ];
    
        return (
           <div className="ag-theme-balham" style={{height: 400, width: 600}}>
               <AgGridReact
                   rowData={rowData}>
                   <AgGridColumn field="make"></AgGridColumn>
                   <AgGridColumn field="model"></AgGridColumn>
                   <AgGridColumn field="price"></AgGridColumn>
               </AgGridReact>
           </div>
        );
    }
    

    }

    here is the error in console:

    C:\Users\Ananya\Desktop\Perycap\riskmgmtUI>npm start

    [email protected] start C:\Users\Ananya\Desktop\Perycap\riskmgmtUI npm run start:dev

    [email protected] start:dev C:\Users\Ananya\Desktop\Perycap\riskmgmtUI node ./build/cli-tools.js --clear dist --create dist && webpack-dev-server --config ./build/webpack.config.client.dev.js

    Cleared target directory: C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\dist Created target directory: C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\dist i 「wds」: Project is running at http://0.0.0.0:4100/ i 「wds」: webpack output is served from / i 「wds」: Content not from webpack is served from C:\Users\Ananya\Desktop\Perycap\riskmgmtUI.serve i 「wds」: 404s will fallback to / × 「wdm」: Hash: 81f252a4738825a8d482 Version: webpack 4.46.0 Time: 66577ms Built at: 05/13/2021 12:44:06 PM Asset Size Chunks Chunk Names app.bundle.js 53.2 MiB app [emitted] app app.css 785 KiB app [emitted] app index.html 7.24 KiB [emitted] static/1.jpg 55.7 KiB [emitted] static/10.jpg 59.5 KiB [emitted] static/11.jpg 82 KiB [emitted] static/12.jpg 71.1 KiB [emitted] static/13.jpg 81.8 KiB [emitted] static/14.jpg 76.4 KiB [emitted] static/15.jpg 70.4 KiB [emitted] static/16.jpg 72.4 KiB [emitted] static/17.jpg 77.2 KiB [emitted] static/18.jpg 79.4 KiB [emitted] static/19.jpg 78.1 KiB [emitted] static/2.jpg 63 KiB [emitted] static/20.jpg 74.2 KiB [emitted] static/21.jpg 53.7 KiB [emitted] static/22.jpg 45.4 KiB [emitted] static/23.jpg 86.2 KiB [emitted] static/24.jpg 64.8 KiB [emitted] static/25.jpg 72.1 KiB [emitted] static/26.jpg 51.2 KiB [emitted] static/27.jpg 66.8 KiB [emitted] static/28.jpg 52.2 KiB [emitted] static/29.jpg 84 KiB [emitted] static/3.jpg 43 KiB [emitted] static/30.jpg 54.1 KiB [emitted] static/31.jpg 84.6 KiB [emitted] static/32.jpg 88.9 KiB [emitted] static/33.jpg 64.9 KiB [emitted] static/34.jpg 43.4 KiB [emitted] static/35.jpg 55.1 KiB [emitted] static/36.jpg 75.5 KiB [emitted] static/37.jpg 86.8 KiB [emitted] static/38.jpg 78.9 KiB [emitted] static/39.jpg 67.8 KiB [emitted] static/4.jpg 88.1 KiB [emitted] static/40.jpg 54.8 KiB [emitted] static/41.jpg 75.1 KiB [emitted] static/42.jpg 48.1 KiB [emitted] static/43.jpg 42.1 KiB [emitted] static/44.jpg 57.2 KiB [emitted] static/45.jpg 58.1 KiB [emitted] static/46.jpg 57.9 KiB [emitted] static/47.jpg 54.6 KiB [emitted] static/48.jpg 59.3 KiB [emitted] static/49.jpg 64.1 KiB [emitted] static/5.jpg 73.8 KiB [emitted] static/50.jpg 66.9 KiB [emitted] static/6.jpg 61.5 KiB [emitted] static/7.jpg 64.8 KiB [emitted] static/8.jpg 87.9 KiB [emitted] static/9.jpg 93 KiB [emitted] static/apple-touch-icon.png 5.68 KiB [emitted] static/avatar-1.jpg 63 KiB [emitted] static/favicon-16x16.png 835 bytes [emitted] static/favicon-32x32.png 1.15 KiB [emitted] static/favicon.ico 14.7 KiB [emitted] static/image-1.jpg 184 KiB [emitted] static/image-2.jpg 393 KiB [emitted] static/logo-danger.svg 3.2 KiB [emitted] static/logo-indigo.svg 3.2 KiB [emitted] static/logo-info.svg 3.2 KiB [emitted] static/logo-pink.svg 3.2 KiB [emitted] static/logo-primary.svg 3.2 KiB [emitted] static/logo-purple.svg 3.2 KiB [emitted] static/logo-success.svg 3.2 KiB [emitted] static/logo-warning.svg 3.2 KiB [emitted] static/logo-white.svg 3.2 KiB [emitted] static/logo-yellow.svg 3.2 KiB [emitted] Entrypoint app = app.css app.bundle.js [1] multi (webpack)-dev-server/client?http://0.0.0.0:4100 (webpack)/hot/dev-server.js ./app/index.js 52 bytes {app} [built] [./app/components/App/index.js] 884 bytes {app} [built] [./app/index.js] 352 bytes {app} [built] [./node_modules/@babel/polyfill/lib/index.js] 686 bytes {app} [built] [./node_modules/react-dom/index.js] 1.33 KiB {app} [built] [./node_modules/react/index.js] 190 bytes {app} [built] [./node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:4100] (webpack)-dev-server/client?http://0.0.0.0:4100 4.29 KiB {app} [built] [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {app} [built] [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {app} [built] [./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {app} [built] [./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {app} [built] [./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {app} [built] [./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {app} [built] [./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {app} [built] [./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {app} [built] + 4151 hidden modules

    ERROR in ./app/styles/plugins/plugins.scss Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

    @import "~ag-grid-community/src/styles/ag-theme-classic/vars/ag-theme-classic-vars"; ^ File to import not found or unreadable: ~ag-grid-community/src/styles/ag-theme-classic/vars/ag-theme-classic-vars. in C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\[email protected]\dashboard-style--airframe\scss\plugins\ag-grid_ag-theme-bootstrap-vars.scss (line 70, column 1) at C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\webpack\lib\NormalModule.js:316:20 at C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\loader-runner\lib\LoaderRunner.js:367:11 at C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\loader-runner\lib\LoaderRunner.js:233:18 at context.callback (C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\loader-runner\lib\LoaderRunner.js:111:13) at Object.callback (C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\sass-loader\dist\index.js:89:7) at Object.done [as callback] (C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\neo-async\async.js:8069:18) at options.error (C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\node-sass\lib\index.js:294:32) @ ./app/layout/default.js 39:0-42 @ ./app/components/App/AppClient.js @ ./app/components/App/index.js @ ./app/index.js @ multi ./app/index.js

    ERROR in ./node_modules/ag-grid-community/dist/styles/ag-theme-balham.css 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

    .ag-theme-balham { | -webkit-font-smoothing: antialiased; | color: #000; @ ./app/routes/Tables/AgGrid/AgGrid.js 37:0-59 @ ./app/routes/Tables/AgGrid/index.js @ ./app/routes/index.js @ ./app/components/App/AppClient.js @ ./app/components/App/index.js @ ./app/index.js @ multi ./app/index.js

    ERROR in ./node_modules/ag-grid-community/dist/styles/ag-grid.css 6:72 Module parse failed: Unexpected token (6:72) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | **************************** | */

    ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia { | display: block; } | @ ./app/routes/Tables/AgGrid/AgGrid.js 36:0-51 @ ./app/routes/Tables/AgGrid/index.js @ ./app/routes/index.js @ ./app/components/App/AppClient.js @ ./app/components/App/index.js @ ./app/index.js @ multi ./app/index.js Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!app/styles/plugins/plugins.css: Entrypoint extract-css-chunks-webpack-plugin = * [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./app/styles/plugins/plugins.css] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./app/styles/plugins/plugins.css 1.66 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/cjs.js!./node_modules/rc-slider/assets/index.css] 5.8 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/cjs.js!./node_modules/react-big-calendar/lib/css/react-big-calendar.css] 12.7 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/cjs.js!./node_modules/react-bootstrap-typeahead/css/Typeahead-bs4.css] 1.04 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/cjs.js!./node_modules/react-bootstrap-typeahead/css/Typeahead.css] 4.16 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/cjs.js!./node_modules/react-datepicker/dist/react-datepicker.css] 23.4 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/cjs.js!./node_modules/react-grid-layout/css/styles.css] 1.3 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/cjs.js!./node_modules/react-quill/dist/quill.snow.css] 25.3 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/cjs.js!./node_modules/react-toggle/style.css] 3.3 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built] Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/bootstrap.scss: Entrypoint extract-css-chunks-webpack-plugin = * [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/bootstrap.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/bootstrap.scss 433 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built] Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/components/float-grid.scss: Entrypoint extract-css-chunks-webpack-plugin = * [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/components/float-grid.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/components/float-grid.scss 862 bytes {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built] Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/components/theme-selector.scss: Entrypoint extract-css-chunks-webpack-plugin = * [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/components/theme-selector.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/components/theme-selector.scss 320 bytes {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built] Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/components/wizard.scss: Entrypoint extract-css-chunks-webpack-plugin = * [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/components/wizard.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/components/wizard.scss 1.4 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built] Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/main.scss: Entrypoint extract-css-chunks-webpack-plugin = * [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/main.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/main.scss 302 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built] Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/plugins/plugins.scss: Entrypoint extract-css-chunks-webpack-plugin = * [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/plugins/plugins.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/plugins/plugins.scss 492 bytes {extract-css-chunks-webpack-plugin} [built] [failed] [1 error]

    ERROR in ./app/styles/plugins/plugins.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/plugins/plugins.scss)
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    
    @import "~ag-grid-community/src/styles/ag-theme-classic/vars/ag-theme-classic-vars";
    ^
          File to import not found or unreadable: ~ag-grid-community/src/styles/ag-theme-classic/vars/ag-theme-classic-vars.
          in C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\@owczar\dashboard-style--airframe\scss\plugins\ag-grid\_ag-theme-bootstrap-vars.scss (line 70, column 1)
    

    Child html-webpack-plugin for "index.html": 1 asset Entrypoint undefined = index.html [./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html] 9.4 KiB {0} [built] [./node_modules/lodash/lodash.js] 531 KiB {0} [built] [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built] [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built] i 「wdm」: Failed to compile.

    I am new to React. Need Help

    opened by Ovi1ByCos 0
  • Any example of adding Side Menu using recursion.

    Any example of adding Side Menu using recursion.

    I have parent-child menus for example:

    {
                icon: 'fa-gears', label: 'Services', children: [
                    { label: 'Acrs', component: AcrsPage, path: '/config/acrs' },
                    { label: 'Cache', component: CachePage, path: '/config/cache' },
                    { label: 'Jwks', component: JwksPage, path: '/config/jwks' },
                    {
                        icon: 'fa-database', label: 'Persistence', children: [
                            { label: 'Ldap Edit', component: LdapEditPage, path: '/config/ldap/edit:configId' },
                            { label: 'Ldap Add', component: LdapAddPage, path: '/config/ldap/new' },
                            { label: 'Ldap', component: LdapListPage, path: '/config/ldap' },
                            { label: 'Couchbase', component: CouchbasePage, path: '/config/couchbase' }
                        ]
                    }
                ]
            }
    

    Is there any example where we can arrange the menus using recursion? I tried with the below component, although it arranges menu but shows every item as parent menu (even if there is no child item to it.)

    import React from 'react'
    import { SidebarMenu, Divider } from '../'
    
    export const SidebarMenusRecursiveWrapper = ({ item }) => {
    
        const { label, path, children = [], icon = '' } = item;
    
        function getIcon(name) {
            let fullName = ''
            if (name) {
                fullName = 'fa fa-fw ' + name
                return <i className={fullName}></i>
            }
            return ''
        }
        return (
            !!label &&
            <SidebarMenu>
                {children.length > 0 ? (
                    <SidebarMenu.Item
                        icon={getIcon(icon)}
                        title={label}>
                        {children.map((child, i) => {
                            return (
                                <SidebarMenusRecursiveWrapper key={i} item={child} />
                            );
                        })}
                    </SidebarMenu.Item>
                ) : (
                        <SidebarMenu.Item
                            icon={getIcon(icon)}
                            title={label}
                            to={path}
                        />
                    )
                }
            </SidebarMenu>
        );
    };
    
    
    opened by duttarnab 0
  • dockerfile

    dockerfile

    It would be super useful for someone to provide a dockerfile so they can launch and recrate the app in a "known" environmnet.

    I'm completely new to react and struggling to start the project. if anyone knows how to solve it any help would be greatly appreciated

    ERROR in ./app/index.js
    Module build failed (from ./node_modules/babel-loader/lib/index.js):
    SyntaxError: /Users/rhysevans/git/airframe-react/app/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (9:5):
    
    opened by rhysjtevans 0
  • Update package.json

    Update package.json

    "isomorphic-fetch" added

    opened by rashidvp 1
Owner
UI/UX
null
React version of Argon Dashboard

Argon Dashboard React Start your development with a Dashboard for Bootstrap 4, React and Reactstrap, made with create-react-app. It is open source, fr

Creative Tim 325 Oct 9, 2021
Paper Dashboard React

Paper Dashboard React If you are a react developer or a react website owner that needs to work within a dashboard and want to have a pretty sight whil

Creative Tim 152 Oct 9, 2021
Black Dashboard React is a beautiful Bootstrap 4, Reacstrap and React (create-react-app) Admin Dashboard with a huge number of components built to fit together and look amazing.

Black Dashboard React Black Dashboard React is a beautiful Bootstrap 4, Reacstrap and React (create-react-app) Admin Dashboard with a huge number of c

Creative Tim 336 Oct 14, 2021
Soft UI Dashboard React - Free Dashboard using React and Material UI

Soft UI Dashboard React - Free Dashboard using React and Material UI

Creative Tim 67 Oct 16, 2021
Soft UI Dashboard React - Free Dashboard using React and Material UI

Soft UI Dashboard React - Free Dashboard using React and Material UI

Creative Tim 64 Oct 11, 2021
Datta Able Free Bootstrap 4 Admin Template

Datta Able Free Dashboard Template made using Bootstrap 4 framework, It is a free lite version of Datta Able Pro Dashboard Template that makes you fulfill your Dashboard needs.

CodedThemes 73 Oct 7, 2021
CoreUI is free bootstrap admin template for react

CoreUI Free Bootstrap Admin Template For React

CoreUI 11k Oct 20, 2021
Now UI Kit React - Free Bootstrap 4, React, React Hooks and Reactstrap UI Kit

Now UI Kit React is a free Bootstrap 4, React, React Hooks and Reactstrap UI Kit provided for free by Invision and Creative Tim. It is a beautiful cross-platform UI kit featuring over 50 elements and 3 templates.

Creative Tim 109 Sep 30, 2021
Devias 36 Oct 21, 2021
React Dashboard - Soft UI Dashboard | AppSeed

React Dashboard - Soft UI Dashboard | AppSeed

App Generator 17 Oct 13, 2021
Free React Typescript Admin Dashboard Template built with Material-UI

Tokyo Free White Typescript React Admin Dashboard Free React Typescript Admin Dashboard Template built with Material-UI This free and open source admi

Horia S 27 Oct 8, 2021
Create-React-App + TypeScript + Ant-Design (without Eject)

This project was bootstrapped with Create React App. Below you will find some information on how to perform common tasks. You can find the most recent

#кодеротбога 111 Sep 13, 2021
Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16

Airframe React High Quality Dashboard / Admin / Analytics template that works great on any smartphone, tablet or desktop. Available as Open Source as

null 3.6k Oct 13, 2021
🔮 Sofia React Template - Admin Dashboard Template built with React

?? Sofia React Template - Admin Dashboard Template built with React

Flatlogic 66 Oct 4, 2021
React Dashboard made with Material UI’s components. Our pro template contains features like TypeScript version, authentication system with Firebase and Auth0 plus many other

Material Kit - React Free React Admin Dashboard made with Material UI's components, React and of course create-react-app to boost your app development

Devias 3.3k Oct 12, 2021
⚛️A free and beautiful React admin dashboard template pack.

Shards Dashboard React A free React admin dashboard template pack featuring a modern design system and lots of custom templates and components. ✨ Note

DesignRevision 1.4k Oct 14, 2021
A react-bootstrap starter template with react-router

React Bootstrap Starter is a starter template for react and bootstrap created by Chris Achinga. This theme uses Create React App, react-bootstrap and gh-pages.

_chris 18 Oct 11, 2021
Berry is a creative free react admin template build using the Material-UI

Berry is a creative free react admin template build using the Material-UI. It is meant to be the best User Experience with highly customizable feature-riched pages. It is a complete game-changer React Dashboard Template with easy and intuitive responsive design as on retina screens or laptops.

CodedThemes 284 Oct 16, 2021
Berry free react material-ui admin template for easing and faster web development.

Berry is a creative free react admin template build using the Material-UI. It is meant to be the best User Experience with highly customizable feature-riched pages. It is a complete game-changer React Dashboard Template with easy and intuitive responsive design as on retina screens or laptops.

CodedThemes 282 Oct 14, 2021