
![version](https://img.shields.io/badge/version-2.0-blue.svg)


[![MadeWithVueJs.com shield](https://madewithvuejs.com/storage/repo-shields/1512-shield.svg)](https://madewithvuejs.com/p/functional-vuetify-admin-dashboard/shield-link)


##### Formerly known by Vuetify Admin Dashboard


### [2.0 Demo Site](https://materialfy-demo.netlify.app) 
- logout button is in user menu in app bar


![Preview](https://github.com/ClintOxx/M-Dashboard-Materialfy/blob/master/public/img/mwQYxL1mES.gif)

M-Dashboard is a simple (Hopefully not ugly) productivity Dashboard to monitor tasks/work, it can also be used as an crud admin panel.
Using the Dashboard is pretty simple but requires basic knowledge of Javascript, and basic knowledge on libraries listed in the [docs](https://docs.materialfy.com/guide/)

## Table of Contents

- [Whats New in 2.0](https://docs.materialfy.com/guide/features.html#whats-new-in-2-0)
- [Quick Start](#getting-started)
- [Documentation](https://docs.materialfy.com/)
- [Reporting Issues](#reporting-issues)


# Dashboard Features
[Link to Features](https://docs.materialfy.com/guide/features.html)

![Crud Table](https://github.com/ClintOxx/M-Dashboard-Materialfy/blob/master/public/img/Screenshot%202021-07-15%20at%2021-28-53%20M-Dashboard%20by%20Materialfy%20.png)


### Few things on the roadmap
- user roles
- user page api's
- more prepackaged components
- pro version(if I get to it)
- this will always be free
- more features and support
- dynamic inline edit 
- Cool new login screen


##### [Old version 1.0 Demo](https://clintoxx.github.io/M-Dashboard-Materialfy/)


## Getting Started
1. Install Nodejs from [Nodejs Official Page](https://nodejs.org/en/)
2. Install @Vue/cli 4 [globally](https://cli.vuejs.org/guide/installation.html)
3. clone repo
4.  & navigate to the folder you cloned the repo to
5. Open your terminal(CMD/Power Shell etc) to project root( or use Shift + right-click in the folder on windows)
6. at project root (/M-Dashboard) run one of the following commands in the terminal depending on which you use:
  - `npm install`, or `yarn install`if you use [Yarn](https://yarnpkg.com/en/) 
7. Run `npm run dev --open` or `yarn serve --open` to start a local development server or use [Vue UI](https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui)
8. A new tab will be opened in your browser or click the url in the terminal
9. You can use [Reqres](https://reqres.in/) to test logging in/out, or for data tables api(its already hooked up)
  - otherwise use your own backend or a package like [Json Server](https://github.com/typicode/json-server) or [JSONPlaceholder](https://jsonplaceholder.typicode.com/)

After installing the dependencies you can also run additional tasks such as these fun ones:
- `npm/yarn run build` to build your app for production
- `npm/yarn run lint` to run linting.


### Current Bugs
Checkout the Issues tab to see if any have been reported or closed.

### Reporting Issues
1. Make sure that you are using the latest version of the M-Dashboard and installed corerct versions of the dependcies with NPM/YARN.
2. Provide reproducible steps on how to recreate the issue, this can speed things up & will help a lot.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
4. Provide screenshots if you are trying to point out an visual bug

You can [send us a tweet](https://twitter.com/Materialfy) if you need faster minorish assistance, otherwise create an issue on here.



