Giter VIP home page Giter VIP logo

black-dashboard-react's Introduction

version license GitHub issues open GitHub issues closed Chat

Product Gif

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. If you are looking for a tool to manage and visualize data about your business, this dashboard is the thing for you. It combines colors that are easy on the eye, spacious cards, beautiful typography, and graphics. Black Dashboard React comes packed with all plugins that you might need inside a project and documentation on how to get started. It is light and easy to use, and also very powerful.

Black Dashboard React features over 16 individual components, giving you the freedom of choosing and combining. This means that there are thousands of possible combinations. All components can take variations in color, that you can easily modify using SASS files. You will save a lot of time going from prototyping to full-functional code because all elements are implemented. We thought about everything, so this dashboard comes with 2 versions, Dark Mode and Light Mode.

Special thanks go for the owners of these plugins:

We are very excited to share this dashboard with you and we look forward to hearing your feedback!

Example Pages We wanted to fully display the power of this dashboard, so the kit comes packed with examples showing you how to use the components.

Table of Contents

Versions

HTML React Vue
Black Dashboard HTML Black Dashboard React Vue Black Dashboard

Demo

Dashboard User Profile Tables Maps Notification
Start page User profile page Tables page Maps Page Notification page

View More.

Quick start

Quick start options:

Documentation

The documentation for the Black Dashboard React is hosted at our website.

File Structure

Within the download you'll find the following directories and files:

black-dashboard-react
.
├── package.json
├── CHANGELOG.md
├── ISSUE_TEMPLATE.md
├── LICENSE.md
├── README.md
├── Documentation
│   └── documentation.html
├── github-assets
│   └── react.svg
├── public
│   ├── index.html
│   └── manifest.json
└── src
    ├── index.js
    ├── logo-white.svg
    ├── logo.svg
    ├── routes.js
    ├── assets
    │   ├── css
    │   ├── demo
    │   ├── fonts
    │   ├── img
    │   └── scss
    │       ├── black-dashboard
    │       │   ├── bootstrap
    │       │   │   ├── mixins
    │       │   │   └── utilities
    │       │   ├── custom
    │       │   │   ├── cards
    │       │   │   ├── mixins
    │       │   │   ├── utilities
    │       │   │   └── vendor
    │       └── black-dashboard.scss
    ├── components
    │   ├── FixedPlugin
    │   │   └── FixedPlugin.js
    │   ├── Footer
    │   │   └── Footer.js
    │   ├── Navbars
    │   │   ├── AdminNavbar.js
    │   │   └── RTLNavbar.js
    │   └── Sidebar
    │       └── Sidebar.js
    ├── layouts
    │   ├── Admin
    │   │   └── Admin.js
    │   └── RTL
    │       └── RTL.js
    ├── variables
    │   └── charts.js
    └── views
        ├── Dashboard.js
        ├── Icons.js
        ├── Map.js
        ├── Notifications.js
        ├── Rtl.js
        ├── TableList.js
        ├── Typography.js
        └── UserProfile.js

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

Reporting Issues

We use GitHub Issues as the official bug tracker for the Black Dashboard React. Here are some advices for our users that want to report an issue:

  1. Make sure that you are using the latest version of the Black Dashboard React. Check the CHANGELOG from your dashboard on our website.
  2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
  3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

Useful Links

More products from Creative Tim: https://www.creative-tim.com/products

Tutorials: https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w

Freebies: https://www.creative-tim.com/products

Affiliate Program (earn money): https://www.creative-tim.com/affiliates/new

Social Media:

Twitter: https://twitter.com/CreativeTim

Facebook: https://www.facebook.com/CreativeTim

Dribbble: https://dribbble.com/creativetim

Google+: https://plus.google.com/+CreativetimPage

Instagram: https://instagram.com/creativetimofficial

black-dashboard-react's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

black-dashboard-react's Issues

[Feature Request] Persistence theme and background color.

What is your enhancement?

I think it would be great if we made the theme and the background color persistence using the localStorage.

(now with every page loading they reset to default values).

NOTE: if you would like me to work on that, please assign this issue to me.

SyntaxError exception when importing Notifications.jsx in an electron app.

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • [✔️] I am running the latest version
  • [✔️] I checked the documentation and found no answer
  • [✔️] I checked to make sure that this issue has not already been filed
  • [✔️] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Should not produce a SyntaxError exception in electron apps.

Current Behavior

When using this theme in an electron app that uses the electron-react-boilerplate, the dashboard does not appear due to a syntax error exception being thrown.

Failure Information (for bugs)

.\node_modules\react-notification-alert\dist\animate.css:7
.animated {
^

SyntaxError: Unexpected token .
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:660:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:704:10)
    at Module.load (internal/modules/cjs/loader.js:602:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:541:12)
    at Function.Module._load (internal/modules/cjs/loader.js:533:3)
    at Module.require (internal/modules/cjs/loader.js:640:17)
    at require (internal/modules/cjs/helpers.js:20:18)

See the related issue: creativetimofficial/react-notification-alert#5

Steps to Reproduce

  1. Create an electron app using electron-react-boilerplate.
  2. Modify your project to make use of this theme.
  3. Run yarn install and then yarn dev.
  4. Confirm that the above reported exception is thrown.
  5. Edit the routes.js file and remove the import Notifications from 'views/Notifications.jsx' and the notifications entry in the routes array.
  6. Confirm that the exception no longer appears and that the dashboard appears normally.

Context

  • Device: Desktop
  • Operating System: Windows 10
  • Browser and Version: Chrome Version 71.0.3578.98 (Official Build) (64-bit)

Failure Logs

No log snippet available.

[Bug] Errors on lodash.js, chunk.css and chunk.js requests, on Production.

Version

1.1.0

Reproduction link

https://elegant-tereshkova-e65e39.netlify.app/

Operating System

Windows

Device

Laptop

Browser & Version

Firefox - 80.0

Steps to reproduce

Open the Network tab of the Browser's Dev Tools and see the Network requests that failed.

What is expected?

That the application shows up the Login Screen

What is actually happening?

It's crashing the application.


Solution

I don't have any ideas.

Additional comments

Critical Vulnerability in webpack-dev-server

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed
  • I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Do not have any critical vulnerabilities in public used repositories.

Current Behavior

After a fresh install, NPM detects a critical vulnerability in webpack-dev-server dependency of react-scripts version 2.0.4

Steps to Reproduce

  1. Clone the repo in version 1.0.0
  2. run npm install

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

  • Device: Asus Zenbook 3
  • Operating System: Ubuntu 18.10
  • Browser and Version: Chrome 72.0.3626.81 (Official Build) (64-bit)
  • Node version 11.9.0
  • NPM version 6.5.0

Failure Logs

# Run  npm install [email protected]  to resolve 1 vulnerability
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Missing Origin Validation                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ webpack-dev-server                                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ react-scripts                                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ react-scripts > webpack-dev-server                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/725                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


found 1 high severity vulnerability in 33303 scanned packages

Build errors

I am putting my application into Production on Heroku, and these https requests are crashing the application. They indicate for the Black-Dashboard files, so I don't know how to solve them. I would like any clarification as to what may be causing these errors.

Link for the app: https://elegant-tereshkova-e65e39.netlify.app/

image

How to change sidebar color?

Hi,

Can someone help me to figure out how to change the sidebar color values to "Gray" or any different color other than fixed three colors i.e. "primary", "blue", "green"?

[Bug] The Options in Select (Form Select) are invisible in dark mode if "custom-select" or "form-control" is used.

Version

Black Dashboard React v1.0.0 based on Black Dashboard - v1.0.0

Reproduction link

https://demos.creative-tim.com/black-dashboard-react/#/documentation/forms

Steps to reproduce

Select 1 2

Now open in browser and see the problem.

What is expected?

All options should be visible without hovering over them.

What is actually happening?

Options are not visible without hover over.


Solution

Additional comments

Nucleo Icons - Internet Explorer

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed
  • I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Nucleo-icons should be visible in all borwsers.

Current Behavior

Nucleo-icons not being visible with Internet Explorer. They work on all other browsers but the internet explorer

Failure Information (for bugs)

There are no errors reported. The icons simply do not render.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

Context

Failure Logs

[Feature Request] Encapsulate Changing background and theme colors via top-level React Context components

What is your enhancement?

I would suggest encapsulating the logic and types of available options into their own contexts and components, allowing the easier addition/usage of said options as well as further additions to it.

That way it would be far easier for people to see what the current options are and reuse them in their design, as well as add/remove some or reuse them in more components.

I have already done the work for the change to be incorporated in my own fork, found here: adding-contexts-for-theme/background

If there is no need for the change, just close the issue.

If something needs to be changed in order for the changes to be incorporated, let me know and I'll change it.

Error npm install node-sass

./src/assets/scss/black-dashboard-react.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./src/assets/scss/black-dashboard-react.scss)
To import Sass files, you first need to install node-sass.
Run npm install node-sass or yarn add node-sass inside your workspace.
Require stack:

  • /Volumes/Mystic/React/black-react/node_modules/sass-loader/lib/loader.js
  • /Volumes/Mystic/React/black-react/node_modules/loader-runner/lib/loadLoader.js
  • /Volumes/Mystic/React/black-react/node_modules/loader-runner/lib/LoaderRunner.js
  • /Volumes/Mystic/React/black-react/node_modules/webpack/lib/NormalModule.js
  • /Volumes/Mystic/React/black-react/node_modules/webpack/lib/NormalModuleFactory.js
  • /Volumes/Mystic/React/black-react/node_modules/webpack/lib/Compiler.js
  • /Volumes/Mystic/React/black-react/node_modules/webpack/lib/webpack.js
  • /Volumes/Mystic/React/black-react/node_modules/react-scripts/scripts/start.js

[Bug] Double invocation of onClick

Version

1.1.0

Reproduction link

https://demos.creative-tim.com/black-dashboard-react/#/admin/dashboard

Operating System

windows

Device

pc

Browser & Version

Chrome Version 81.0.4044.113

Steps to reproduce

On the template dashboard click either of Accounts Purchases or Sessions
Debug the onClick handler and observe that on each of these buttons it fires twice

What is expected?

The onClick function should be invoked once

What is actually happening?

The onClick function is invoked twice


Solution

Removing input from inside the button component removes the problem but it also removes ui

Additional comments

[Bug] NavBar onClick Triggers on Page Load For All Items

Version

1.0.0

Reproduction link

N/a

Operating System

MacOS

Device

Macbook Pro 2017

Browser & Version

Chrome 75.0.3770.100

Steps to reproduce

  1. Add an onClick event to a ReactStrap DropdownItem (add in a logging statement for example)
  2. Go to the page or refresh the page

What is expected?

The page loads, and onClick events trigger only when clicked by the user.

What is actually happening?

Every time the user refreshes or enters a view in the dashboard, DropDownItem onClick events execute for every item, irrespective of the user clicking on the item or not.


Solution

Additional comments

This may be an issue with Reactstrap, but I'm uncertain.

index of the file

Index of /
Name Last modified Size Description

directory Documentation 16-Apr-2021 10:00 -
directory github-assets 16-Apr-2021 10:00 -
directory public 16-Apr-2021 10:00 -
directory src 16-Apr-2021 10:00 -
unknown CHANGELOG.md 16-Apr-2021 10:00 8k
unknown ISSUE_TEMPLATE.md 16-Apr-2021 10:00 4k
unknown LICENSE.md 16-Apr-2021 10:00 4k
[HTM] gulpfile.js 16-Apr-2021 10:00 4k
unknown jsconfig.json 16-Apr-2021 10:00 4k
unknown package.json 16-Apr-2021 10:00 4k
Proudly Served by LiteSpeed Web Server at admin.knowmoreaj.com Port 443

Cannot build the lastest code

Version

1.2.2

Reproduction link

https://github.com/creativetimofficial/black-dashboard-react

Operating System

windows

Device

PC

Browser & Version

Chrome

Steps to reproduce

  1. Download the code
  2. npm install
  3. npm start

What is expected?

The project should build and run successfully

What is actually happening?

[email protected] start

react-scripts start
Failed to compile.

Cannot read properties of undefined (reading 'indexOf')
WARNING in ./src/assets/scss/black-dashboard-react.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/assets/scss/black-dashboard-react.scss)
Module Warning (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: webpack misconfiguration
webpack or the upstream loader did not supply a source-map

ERROR in ./src/assets/scss/black-dashboard-react.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/assets/scss/black-dashboard-react.scss)
Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Cannot read properties of undefined (reading 'indexOf')

ERROR in ./src/assets/scss/black-dashboard-react.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/assets/scss/black-dashboard-react.scss)
Module build failed (from ./node_modules/resolve-url-loader/index.js):
TypeError: Cannot read properties of undefined (reading 'replace')
at process (C:\Users\username\Downloads\code_gui\node_modules\resolve-url-loader\lib\engine\postcss.js:28:19)
at Object.resolveUrlLoader (C:\Users\username\Downloads\code_gui\node_modules\resolve-url-loader\index.js:213:14)


Solution

Additional comments

No View on Live Website

I am receiving this certain error on all of my projects which are using this template. Their is now view for the website, just a blank page on live version.

Super expression must either be null or a function

Screen Shot 2019-09-23 at 3 45 50 PM

How to set a focus to an input ?

What is your enhancement?

Using normal approaches as ref={refElement} and refElement.current.focus() not works, and I don't know the reason. How to set a focus to a form element i.e. input?

npm run build produces faulty code

Hey, I downloaded the dashboard and ran npm run build to create an optimized version. Then I attempted to serve it with serve -s build but all I see is a whitescreen after going to localhost. However, when running the unoptimized version with npm start, everything works fine. Any ideas as to what this might be?

I'm seeing these errors on the Chrome console.

image

Adding route for login

!!! IF YOU DO NOT USE THIS ISSUES TEMPLATE, YOUR ISSUE IS LIABLE TO BEING IGNORED BY US

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed
  • I'm reporting the issue to the correct repository (for multi-repository projects)

Unexpected Behavior

Not able to create a route for Login

App does not compile after npm install

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • [ X ] I am running the latest version
  • [ X ] I checked the documentation and found no answer
  • [ X ] I checked to make sure that this issue has not already been filed
  • [ X ] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Per the documentation after downloading I run

  • npm install
  • npm start

Expect the app to start up.

Current Behavior

The app fails to compile

Failure Information (for bugs)

Steps to Reproduce

  1. Download, unzip
  2. cd into unpacked directory
  3. npm install
  4. npm start

Context

I'm running Ubuntu 16.04, node V8.12.0

Failure Logs

Failed to compile.

./src/index.js
Module not found: Can't resolve 'assets/css/nucleo-icons.css' in '/home/nathan/gitRepos/peculator/black-dash-unpack/src'

NOTE: This file is there...

nathan@maximus:~/gitRepos/peculator/black-dash-unpack$ ls /home/nathan/gitRepos/peculator/black-dash-unpack/src/assets/css/nucleo-icons.css
/home/nathan/gitRepos/peculator/black-dash-unpack/src/assets/css/nucleo-icons.css
nathan@maximus:~/gitRepos/peculator/black-dash-unpack$ echo $?
0

[Bug] Infinite scrolldown!

Version

1.2.0

Reproduction link

https://demos.creative-tim.com/black-dashboard-react/#/admin/dashboard

Operating System

Windows 10

Device

Desktop

Browser & Version

Google Chrome 88

Steps to reproduce

  1. open the live preview.
  2. scroll down using your mouse (don't use the scrollbar).
  3. you'll see the page scrolls inappropriately.

What is expected?

The page should stop scrolling when we reach the footer.

What is actually happening?

The page doesn't stop scrolling infinitely!


Solution

Additional comments

[Bug] npm run build produces faulty code

Version

1.2.0

Reproduction link

https://www.creative-tim.com/product/black-dashboard-react

Operating System

MacOS Big Sur

Device

MacBook Pro (2019)

Browser & Version

Chrome: Version 91.0.4472.77 (Official Build) (x86_64)

Steps to reproduce

  1. I downloaded the dashboard and ran npm install, then npm run build to create an optimized version.
  2. Then I attempted to serve it with serve -s build but all I see is a whitescreen after going to localhost.
  3. However, when running the unoptimized version with npm start, everything works fine. Any ideas as to what this might be?

I'm seeing these errors on the Chrome console. See the image below.
image

What is expected?

npm run build should create a working version of the app

What is actually happening?

npm run build produces a whitescreen with errors in the chrome console.


Solution

Additional comments

Minimal reproduction is just the link to your template. Issue happens even with 0 modifications.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.