Giter Site home page Giter Site logo

paper-dashboard-react's Introduction

version license GitHub issues open GitHub issues closed Chat

Product Gif

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 while doing so, Paper Dashboard React is for you. Paper Dashboard React is a Bootstrap Admin Panel which combines soft colours with beautiful typography and spacious cards and graphics. It is a powerful tool, but it is light and easy to use. It has enough features to allow you to get the job done, but it is not crowded to the point where you can't find the files for a specific plugin.

We like consistency and design that blends into its purpose. Paper Dashboard React is a perfect example of our most thoughtful work. It combines over a dozen components and plugins, while looking like everything fits together. For an easy start or inspiration for you project, we have also create a set of example pages, like the user settings or usage graphics.

Paper Dashboard React is built using the same design language as Paper Dashboard 2.

Bootstrap 4 Support Paper Dashboard React is built on top of the much awaited Bootstrap 4 and uses the most used react framework that implements the Bootstrap 4 components on react, reactstrap. This makes starting a new project very simple. It also provides benefits if you are already working on a Bootstrap 4 and/or reactstrap project; you can just import the Paper Dashboard React style over it. Most of the elements have been redesigned; but if you are using an element we have not touched, it will fall back to the Bootstrap default.

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
Paper Dashboard 2 HTML Paper Dashboard React

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 Paper Dashboard React is hosted at our website.

File Structure

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

├── CHANGELOG.md
├── ISSUE_TEMPLATE.md
├── LICENSE.md
├── README.md
├── docs
│   └── documentation.html
├── jsconfig.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── index.js
    ├── logo-white.svg
    ├── logo.svg
    ├── routes.js
    ├── components
    │   ├── FixedPlugin
    │   │   └── FixedPlugin.jsx
    │   ├── Footer
    │   │   └── Footer.jsx
    │   ├── Navbars
    │   │   └── DemoNavbar.jsx
    │   └── Sidebar
    │       └── Sidebar.jsx
    ├── layouts
    │   └── Admin.jsx
    ├── variables
    │   ├── charts.jsx
    │   ├── general.jsx
    │   └── icons.jsx
    ├── views
    │   ├── Dashboard.jsx
    │   ├── Icons.jsx
    │   ├── Map.jsx
    │   ├── Notifications.jsx
    │   ├── Tables.jsx
    │   ├── Typography.jsx
    │   ├── Upgrade.jsx
    │   └── User.jsx
    └── assets
        ├── css
        │   ├── paper-dashboard.css
        │   ├── paper-dashboard.css.map
        │   └── paper-dashboard.min.css
        ├── demo
        ├── fonts
        ├── github
        ├── img
        │   └── faces
        └── scss
            ├── paper-dashboard
            │   ├── cards
            │   ├── mixins
            │   ├── plugins
            │   └── react
            │       ├── custom
            │       └── react-differences.scss
            └── paper-dashboard.scss

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 Paper 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 Paper 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

paper-dashboard-react's People

Contributors

einazare avatar maisamaf avatar marqbeniamin avatar sajadevo avatar

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

paper-dashboard-react's Issues

[Bug] Build File Issue

Version

Yes

Reproduction link

https://github.com/Sudhakar555/Dashboard-Covid-SpineBiz

Operating System

Windows 10

Device

Lenovo Desktop

Browser & Version

Chrome 85.0.4183.121

Steps to reproduce

  1. Build the file using npm run build
  2. Try to deploy anywhere. (Git, NEtlify, Heroku, Express)

What is expected?

Build File Deployment

What is actually happening?

Build file not building correctly.


Solution

Additional comments

Error 1 : index.js:4 DOMException: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///D:/admin/dashboard' cannot be created in a document with origin 'null' and URL 'file:///D:/Sudhakar/New%20folder/Covid-Dashboard/public/index.html'.

Error 2 : Access to internal resource at 'file:///D:/Sudhakar/New%20folder/Covid-Dashboard/public/manifest.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

Error 3 : Cannot GET /admin/dashboard (Running in Express Server)

I tried all the possible solutions but nothing worked.

paper-dashboard-react is not working with [email protected]

Tried upgrading react-script to v3.1.1 but getting this error:

Failed to compile.

./src/assets/scss/paper-dashboard.scss?v=1.1.0 (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-4!./src/assets/scss/paper-dashboard.scss?v=1.1.0)
Module not found: Can't resolve './fonts/nucleo-icons.eot' in '/home/rudolfs/workspace/Grafomap/dashboard.grafomap.com/src/assets/scss'

When I try to fix this error with "start": "NODE_PATH=./src react-scripts start", as mentioned in the docs here https://demos.creative-tim.com/paper-dashboard-react/#/documentation/quick-start, I get this warning

Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.

Starting the development server...

followed by the same Module not found error

Also, I have configured jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "*": ["src/*"]
    }
  }
}

And still no luck. Please help. :)

Deployment Issue

Hi,

I am using paper dashboard free edition. i have created a sample dashboard using it and tried to deploy on netlify and github.
when i try to build its correctly happening and after deployment images are not loading and when i try to refresh its showing as 404 not found for both the deployments. So kindly help me fix this .

[Bug] Inside page navigation problem

Version

v1.1.0

Reproduction link

https://codepen.io/

Operating System

Windows 10

Device

PC

Browser & Version

Google Chrome

Steps to reproduce

If I open the page without a mouse , I will be blocked because the inside navigator (up and down) in the page is not showing

What is expected?

the navigator (to move from start to bottom of the page) is showing on loading.

Link to image

What is actually happening?

I must use mouse or change zoom to show. I can be blocked in the head of the page


Solution

Additional comments

Error: You should not use <Link> outside a <Router>

!!! IF YOU DO NOT USE THIS ISSUES TEAMPLATE, 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)

Expected Behavior

Browse without error.

Current Behavior

When running npm start after npm install, in the browser it says:

You should not use <Link> outside a <Router>
▶ 25 stack frames were collapsed.
Module../src/index.js
src/index.js:14

  11 | 
  12 | const hist = createBrowserHistory();
  13 | 
> 14 | ReactDOM.render(
  15 |   <Router history={hist}>
  16 |     <Switch>
  17 |       {indexRoutes.map((prop, key) => {

It seems to be something related to react router.

Failure Information (for bugs)

You should not use <Link> outside a <Router>

Steps to Reproduce

  1. Download, unzip, cd
  2. npm install
  3. npm start

Context

  • Device: Macbook Pro
  • Operating System: MacOS Mojave 10.14.3
  • Browser and Version: Chrome 72.0.3626.121

Failure Logs

image

[Bug] React development server live-reload breaks navigation

Version

1.3.0

Reproduction link

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

Operating System

Windows 10

Device

PC

Browser & Version

Firefox 96.0.1 (64-bit)

Steps to reproduce

  1. Clone the template - git clone https://github.com/creativetimofficial/paper-dashboard-react.git
  2. Run npm install
  3. Run npm start
  4. Wait until the template opens in the browser
  5. Make a change to one of the React components in the template and save the file to trigger a live reload
  6. Wait for live-reload to occur
  7. Try to scroll on the page or click one of the items in the sidebar

What is expected?

The website should continue to function after a live-reload.

What is actually happening?

Scrolling the website and any react-router links stops working, requiring a full refresh of the browser window - breaking workflow.


Solution

Additional comments

Help needed - Change Sidebar

What is your enhancement?

is there is a way that i can make the sidebar hidden even in the large screens, and the icon to appear
that's will make the dashboard view even better and better
and it's requested also by clients

Missing CustomButton

At line 25:
import Button from "components/CustomButton/CustomButton.jsx";
the whole CustomButton folder does not exist in this branch

Paper dashboard build for production

Good day

I am deploying the paper-dashboard-react but I could not build for production with the command (npm run build),
executing the command "npm run build" uncaught syntax error unexepected token

what could I do ?

so many thanks

Change menu background color other than White / Black

Version

1.1.0

Reproduction link

https://jsbin.com/?html,output

Operating System

Windows 10

Device

PC

Browser & Version

Google Chrome

Steps to reproduce

Open dahboard

What is expected?

In Admin.jsx :

this.state = {
  backgroundColor: "#C0C0C0",
  activeColor: "info"
};

Change backgroundColor other than 'black' or 'white'

What is actually happening?

Any other color is not working other thank white and black.

I want to manipulate the backgroundColor and colors in general.


Solution

Additional comments

Thank you

[Bug] Background color of AdminLayout different in screens

Version

1.1.0

Reproduction link

https://jsfiddle.net/

Operating System

Windows 10

Device

PC

Browser & Version

Google Chrome

Steps to reproduce

1 - open a page in large screen : background color is White .
2- open a page in a small screen : background color in Brown or grey (background of the content ) from header to footer. not the menu.

What is expected?

I want the same color in both screens, I want to fix it to White

What is actually happening?

Color changing


Solution

Additional comments

Thanks

[Bug] problem with file upload inputs

Version

1.1.0

Reproduction link

https://jsfiddle.net/

Operating System

Windows 10

Device

PC

Browser & Version

Google Chrome

Steps to reproduce

1 . add a code to a simple file upload

Upload files

                      <Input id="exampleFile" type="file">aaaaaaa</Input>

What is expected?

an upload input is created with upload possibility.

What is actually happening?

The input is not showing , even with a simple , But when I hover the mouse I see the text "upload" and I can click. But no visual result.


Solution

Additional comments

Thanks

Extra white space on demo site and cloned project

!!! IF YOU DO NOT USE THIS ISSUES TEAMPLATE, 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)

Expected Behavior

each page should be scroll-able only if needed.
no extra white space

Current Behavior

there is an extra white space (after footer) which we can scroll to causing color differences
(tried on edge,chrome)

[Feature Request] Netlify/Github deploy Failure

What is your enhancement?

I am currently using free version of paper dashboard for my dashboard. i did some changes from the template and tried to deploy it on netlify/github pages. Its successfully building but after deploy images are not loading and when i try to refresh it becomes 404 not found.
i have tried other applications for deploying and its correctly working. only paper dashboard is facing this issue. its not a bug report. it will be very useful if you help me to get the solution.

side Menu

Hi there,
is there a way i can make the sidebar hidden by default and the burger icon appear beside the page name
i am trying to do this but in vain

Thanks a lot for your help

Remove y-axis visible scrollbar on sidebar

Version
1.1.0

Reproduction link
https://demos.creative-tim.com/paper-dashboard-react/#/admin/dashboard

Operating System
OSX

Device
Macbook Pro

Browser & Version
Chrome 81

Steps to reproduce
Run paper dashboard react

What is expected?
I would like the sidebar to not have scrollbar visible for the y-axis. But I would still like to be able to scroll.

What is actually happening?
Scrollbar is visible on y-axis when browser window is less than a certain height.

Screen Shot 2020-05-03 at 13 49 07
Screen Shot 2020-05-03 at 13 49 16

[Bug] Module not found: Can't resolve './fonts/nucleo-icons.eot'

Version

1.1.0

Reproduction link

https://demos.creative-tim.com/paper-dashboard-react/#/documentation/quick-start

Operating System

Windows 10

Device

Desktop

Browser & Version

Doesn't build

Steps to reproduce

I just follow the instruction described here: https://demos.creative-tim.com/paper-dashboard-react/#/documentation/quick-start

However, after executing npm start the following error appeared:

./src/assets/scss/paper-dashboard.scss?v=1.1.0 (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/assets/scss/paper-dashboard.scss?v=1.1.0)
Module not found: Can't resolve './fonts/nucleo-icons.eot' in 'C:\Users\mcarrau\Documents\CloudPosAdminFrontend\src\assets\scss'

So I did this...
npm install --g cross-env

And then...
change "start": "react-scripts start" to "start": "NODE_PATH=./src react-scripts start" in package.json... same error.

But the error following error was shown:

[email protected] start C:\Users\mcarrau\Documents\CloudPosAdminFrontend
NODE_PATH=./src react-scripts start

"NODE_PATH" no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: NODE_PATH=./src react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

So I revert the changes and tried in the console:
set NODE_PATH="./src"
npm start

Several seconds later this warning appeared:
Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.

To finally get the samne first message.

What is expected?

I was hopping to get this working

What is actually happening?

Can't compile.


Solution

Additional comments

[Bug] Deployment Issue

Version

Yes

Reproduction link

https://github.com/Sudhakar555/Covid-Dashboard

Operating System

Windows 10

Device

Lenovo Desktop

Browser & Version

Chrome 85.0.4183.121

Steps to reproduce

  1. Build File for deployment.
  2. Try to deploy in Netlify and Github.
    3.Only one time its loading.after refreshing it went.

What is expected?

Deployment in netlify and github pages should be working fine.

What is actually happening?

The page is loading without images and 404 after a refresh.


Solution

Additional comments

Kindly help me fix this ASAP.

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.