mayank091193/quasar-admin-crm

Quasar CRM Admin | VueJS Admin | Featuring 3 different dashboards | Give it a star if you find it useful.

Vue 3 Demo: https://next-quasar-admin-crm.netlify.com/

Looking for beautiful premium Quasar CRM admin template for Vue 3? Please drop me an email. Buy only at $49!

Quasar Admin CRM Template

A free and beautiful Quasar template for CRM needs. This template also includes a variety of features that are required for admin template needs.

CRM Admin is a functional Quasar template designed for CRM, Customer Relationship Management. It is a fully responsive template built using the Quasar framework that makes it available for all screen sizes from big screens to smartphones.

Few Features:

• Modern and responsive design
• Building design based on CRM
• Simple CRM Dashboard
• Export feature

Site: https://quasar-admin-crm-template.netlify.com/

Support

If this helped you, you can contribute to this project by supporting me:

💜 Support my open-source work on GitHub

Please check out my sponsor page.

(GitHub currently doubles your support! So if you support me with $5/mo, I will get $10 instead! 😉)

Thank you very much!!

Resources used

• Quasar Framework
• Vue.js

Installation

• Clone the repository

git clone https://github.com/mayank091193/quasar-admin-crm.git

Install the dependencies

cd quasar-admin-crm
npm install

To run the app in development mode (hot-code reloading, error reporting, etc.)

quasar dev

Build the application

quasar build

Do reach out to me at "[email protected]" for queries.

Screens UI

Dashboard - Dark mode

Login

Dashboard

Customer Management

Change Request

Profile

Customize the configuration

See Configuring quasar.conf.js.

License

MIT

quasar-admin-crm's Issues

Inegration with an existing quasar v 2 vue 3 typescript projects

This appears to be amazing project. Kudos to the developer. I really want to know how this can be integrated to an existing vue 3 quasar 2 typescript project.

Node Sass version 7.0.0 is incompatible with ^4.0.0.

umar@Umars-Macbook-Pro ~ % npm -v
6.14.8
umar@Umars-Macbook-Pro ~ % nvm -v
0.39.0
umar@Umars-Macbook-Pro ~ % node -v
v12.20.0

While running quasar dev or quasar build.Its showing below error.

umar@Umars-Macbook-Pro golocal-admin % quasar dev

Dev mode.......... spa
Pkg quasar........ v1.8.5
Pkg @quasar/app... v1.5.3
Debugging......... enabled

app:extension Running "@quasar/qcalendar" Quasar App Extension... +0ms
app:quasar-conf Reading quasar.conf.js +18ms
app:dev Checking listening address availability (0.0.0.0:8080)... +4ms
app:quasar-conf Extension(@quasar/qcalendar): Extending quasar.conf... +7ms
app:webpack Extending SPA Webpack config +595ms
app:generator Generating Webpack entry point +6ms
app:dev-server Booting up... +3ms

SPA ██████████ building [40%] 13/17 modules 4 active

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

SPA █████████████████████████ [100%] in ~30s

ERROR Failed to compile with 3 errors 9:26:13 AM

error in ./node_modules/@quasar/quasar-ui-qcalendar/src/index.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass version 7.0.0 is incompatible with ^4.0.0.

• getSassImplementation.js:46 getSassImplementation
  [golocal-admin]/[sass-loader]/dist/getSassImplementation.js:46:13

• index.js:40 Object.loader
  [golocal-admin]/[sass-loader]/dist/index.js:40:61

@ ./node_modules/@quasar/quasar-ui-qcalendar/src/index.sass 4:14-249 14:3-18:5 15:22-257
@ ./.quasar/client-entry.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js

error in ./node_modules/quasar/dist/quasar.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass version 7.0.0 is incompatible with ^4.0.0.

• getSassImplementation.js:46 getSassImplementation
  [golocal-admin]/[sass-loader]/dist/getSassImplementation.js:46:13

• index.js:40 Object.loader
  [golocal-admin]/[sass-loader]/dist/index.js:40:61

@ ./node_modules/quasar/dist/quasar.sass 4:14-249 14:3-18:5 15:22-257
@ ./.quasar/client-entry.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js

error in ./src/css/app.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass version 7.0.0 is incompatible with ^4.0.0.

• getSassImplementation.js:46 getSassImplementation
  [golocal-admin]/[sass-loader]/dist/getSassImplementation.js:46:13

• index.js:40 Object.loader
  [golocal-admin]/[sass-loader]/dist/index.js:40:61

@ ./src/css/app.sass 4:14-298 14:3-18:5 15:22-306
@ ./.quasar/client-entry.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js

`

sidebar with options with multi level from json object

Hi Mayank i just saw your admin panel is incredible let me say its good work you are doing for the community. I have a feature request for you. As in real life we have options to show or hide depending upon user permission. So can we create the side bar based on Json file with multi level sub options. I try to build but its very ugly.

If I visited to Pune will definitely call you. Are connected with Pune Vue.js Community ?

file menu.json
{ "label": "Navigation", "level": 0, "children": [ { "label": "Dashboard", "icon": "home", "to": "/dashboard", "level": 1 }, { "label": "Product Management", "icon": "menu_book", "level": 0.5, "children": [ { "label": "Category", "icon": "category", "to": "/category", "level": 5 }, { "label": "Product", "icon": "redeem", "to": "/product", "level": 1 }, { "label": "Unit", "icon": "straighten", "to": "/unit", "level": 1 },

Error when run quasar dev spa

Can you help me with this sir ?
i tried to find this error, but until now i cant found that

D:\Logic Javascript\quasar_crm_admin_1\quasar-admin-crm>quasar dev

Dev mode.......... spa
Pkg quasar........ v1.22.5
Pkg @quasar/app... v2.4.3
Debugging......... enabled

Configured browser support (at least 47.93% of global marketshare):
· Chrome for Android >= 109
· Firefox for Android >= 107
· QQ for Android >= 13.1
· UC for Android >= 13.4
· Android >= 109
· Chrome >= 109
· Edge >= 109
· Firefox >= 109
· IE >= 11
· iOS >= 16.3
· Kaios >= 2.5
· Opera Mini >= all
· Opera Mobile >= 72
· Opera >= 92
· Safari >= 16.3
· Samsung >= 19.0

App · Running "@quasar/qcalendar" Quasar App Extension...
App · Reading quasar.conf.js
App · Checking listening address availability (0.0.0.0:8080)...
App · Extension(@quasar/qcalendar): Extending quasar.conf...
App · Transpiling JS (Babel active) - includes IE11 support
App · Extending SPA Webpack config
App · Generating Webpack entry point
App · Booting up...

• Compiling:
└── SPA ████████████████████ 100% done in 12900 ms

ERROR Failed to compile with 2 errors 12:01:26

error

Template execution failed: TypeError: Cannot read property 'mode' of undefined

error

Dark mode doesn't change main page background colour

Describe the bug
When switching to Dark mode, the background of the page stays white.

To Reproduce
Steps to reproduce the behavior:

1. Click on the Dark/Light mode icon to switch to Dark mode

Expected behavior
Dark mode should change the page background too

Screenshots
(see red arrows)

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Version Chrome 94.0.4606.81 (Official Build) (64-bit)

Additional context
None.