├── package
├── .env
├── .npmrc
├── public
│ ├── _redirects
│ ├── assets
│ │ └── images
│ │ │ ├── users
│ │ │ ├── 1.jpg
│ │ │ ├── 2.jpg
│ │ │ ├── 3.jpg
│ │ │ ├── 4.jpg
│ │ │ ├── 5.jpg
│ │ │ ├── 6.jpg
│ │ │ ├── 7.jpg
│ │ │ ├── 8.jpg
│ │ │ ├── user.jpg
│ │ │ └── user2.jpg
│ │ │ ├── products
│ │ │ ├── 1.jpg
│ │ │ ├── 2.jpg
│ │ │ ├── 3.jpg
│ │ │ └── 4.jpg
│ │ │ └── icon
│ │ │ ├── success.svg
│ │ │ ├── danger.svg
│ │ │ └── warning.svg
│ └── favicon.svg
├── env.d.ts
├── src
│ ├── scss
│ │ ├── components
│ │ │ ├── _VNavigationDrawer.scss
│ │ │ ├── _VShadow.scss
│ │ │ ├── _VButtons.scss
│ │ │ ├── _VInput.scss
│ │ │ ├── _VField.scss
│ │ │ ├── _VCard.scss
│ │ │ └── _VTable.scss
│ │ ├── style.scss
│ │ ├── layout
│ │ │ ├── _container.scss
│ │ │ ├── _topbar.scss
│ │ │ └── _sidebar.scss
│ │ ├── pages
│ │ │ └── _dashboards.scss
│ │ └── _variables.scss
│ ├── assets
│ │ └── images
│ │ │ ├── blog
│ │ │ ├── blog-img1.jpg
│ │ │ ├── blog-img2.jpg
│ │ │ ├── blog-img3.jpg
│ │ │ └── blog-img4.jpg
│ │ │ ├── profile
│ │ │ ├── user-1.jpg
│ │ │ ├── user-2.jpg
│ │ │ └── user-3.jpg
│ │ │ ├── backgrounds
│ │ │ └── rupee.png
│ │ │ ├── products
│ │ │ ├── dash-prd-1.jpg
│ │ │ ├── dash-prd-2.jpg
│ │ │ ├── dash-prd-3.jpg
│ │ │ └── dash-prd-4.jpg
│ │ │ ├── technology
│ │ │ ├── vue-cat-icon.svg
│ │ │ ├── nuxt-cat-icon.svg
│ │ │ ├── angular-cat-icon.svg
│ │ │ ├── tailwind-icon.svg
│ │ │ ├── bt-cat-icon.svg
│ │ │ ├── next-cat-icon.svg
│ │ │ └── react-cat-icon.svg
│ │ │ └── logos
│ │ │ ├── logo-icon.svg
│ │ │ ├── logo-adminmart.svg
│ │ │ └── logo.svg
│ ├── App.vue
│ ├── components
│ │ ├── shared
│ │ │ ├── UiTextfieldPrimary.vue
│ │ │ ├── UiChildCard.vue
│ │ │ ├── UiTableCard.vue
│ │ │ ├── WidgetCard.vue
│ │ │ ├── UiParentCard.vue
│ │ │ ├── UiParentCardLogo.vue
│ │ │ ├── CardHeaderFooter.vue
│ │ │ └── WidgetCardv2.vue
│ │ ├── ui-components
│ │ │ ├── alert
│ │ │ │ ├── Filled.vue
│ │ │ │ ├── Basic.vue
│ │ │ │ └── Closable.vue
│ │ │ ├── cards
│ │ │ │ ├── CardsProps.vue
│ │ │ │ ├── CardsSlots.vue
│ │ │ │ ├── CardsMedia.vue
│ │ │ │ ├── CardsTwitter.vue
│ │ │ │ ├── CardsContentWrap.vue
│ │ │ │ └── CardsWeather.vue
│ │ │ └── button
│ │ │ │ ├── ColorsButtons.vue
│ │ │ │ ├── OutlinedButtons.vue
│ │ │ │ ├── TextButtons.vue
│ │ │ │ ├── BaseButtons.vue
│ │ │ │ ├── IconColorSizes.vue
│ │ │ │ └── SizeButtons.vue
│ │ ├── style-components
│ │ │ ├── shadow
│ │ │ │ └── Shadow.vue
│ │ │ └── typography
│ │ │ │ ├── DefaultText.vue
│ │ │ │ └── Heading.vue
│ │ ├── dashboard
│ │ │ ├── NewCustomer.vue
│ │ │ ├── DailyActivities.vue
│ │ │ ├── TotalIncome.vue
│ │ │ ├── BlogCards.vue
│ │ │ ├── RevenueProducts.vue
│ │ │ └── RevenueCard.vue
│ │ └── auth
│ │ │ ├── RegisterForm.vue
│ │ │ └── LoginForm.vue
│ ├── layouts
│ │ ├── blank
│ │ │ └── BlankLayout.vue
│ │ └── full
│ │ │ ├── vertical-sidebar
│ │ │ ├── NavGroup
│ │ │ │ └── index.vue
│ │ │ ├── Icon.vue
│ │ │ ├── UpgradeBox
│ │ │ │ └── index.vue
│ │ │ ├── NavItem
│ │ │ │ └── index.vue
│ │ │ └── NavCollapse
│ │ │ │ └── NavCollapse.vue
│ │ │ ├── logo
│ │ │ ├── Logo.vue
│ │ │ └── LogoIcon.vue
│ │ │ ├── vertical-header
│ │ │ ├── NotificationDD.vue
│ │ │ └── ProfileDD.vue
│ │ │ ├── FullLayout.vue
│ │ │ ├── Main.vue
│ │ │ └── Topbar.vue
│ ├── views
│ │ ├── components
│ │ │ ├── Shadow.vue
│ │ │ └── Typography.vue
│ │ ├── pages
│ │ │ ├── SamplePage.vue
│ │ │ └── Icons.vue
│ │ ├── auth
│ │ │ ├── Error.vue
│ │ │ ├── Login.vue
│ │ │ └── Register.vue
│ │ ├── dashboard
│ │ │ └── index.vue
│ │ └── ui-components
│ │ │ ├── Alerts.vue
│ │ │ ├── Cards.vue
│ │ │ ├── Buttons.vue
│ │ │ └── Tables.vue
│ ├── router
│ │ ├── index.ts
│ │ ├── AuthRoutes.ts
│ │ └── MainRoutes.ts
│ ├── main.ts
│ ├── plugins
│ │ └── vuetify.ts
│ ├── types
│ │ ├── dashboard
│ │ │ └── index.ts
│ │ └── themeTypes
│ │ │ └── ThemeType.ts
│ ├── theme
│ │ └── LightTheme.ts
│ └── data
│ │ └── Dashboard.ts
├── .prettierrc
├── tsconfig.vite-config.json
├── tsconfig.json
├── index.html
├── .eslintrc.cjs
├── README.md
├── vite.config.ts
├── .gitignore
└── package.json
├── hire-us.html
├── docs.html
├── LICENSE.txt
├── discount-code.html
├── landingpage
├── style.css
└── index.html
└── README.md
/package/.env:
--------------------------------------------------------------------------------
1 | VITE_API_URL="/"
--------------------------------------------------------------------------------
/package/.npmrc:
--------------------------------------------------------------------------------
1 | legacy-peer-deps=true
--------------------------------------------------------------------------------
/package/public/_redirects:
--------------------------------------------------------------------------------
1 | /* /index.html 200
2 |
--------------------------------------------------------------------------------
/package/env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
4 |
5 |
--------------------------------------------------------------------------------
/package/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "bracketSpacing": true,
3 | "printWidth": 140,
4 | "singleQuote": true,
5 | "trailingComma": "none",
6 | "tabWidth": 4,
7 | "useTabs": false
8 | }
9 |
--------------------------------------------------------------------------------
/package/public/assets/images/icon/success.svg:
--------------------------------------------------------------------------------
1 |
8 |
10 |
--------------------------------------------------------------------------------
/package/public/assets/images/icon/warning.svg:
--------------------------------------------------------------------------------
1 |
3 |
4 |
6 |
7 |
10 |
--------------------------------------------------------------------------------
/package/src/views/components/Shadow.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package/src/layouts/full/vertical-sidebar/NavGroup/index.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | {{ props.item.header}}
7 |
8 |
--------------------------------------------------------------------------------
/package/src/layouts/full/logo/Logo.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
10 |
--------------------------------------------------------------------------------
/package/src/scss/components/_VShadow.scss:
--------------------------------------------------------------------------------
1 | .elevation-9 {
2 | box-shadow: rgb(0 0 0 / 5%) 0px 9px 17.5px !important;
3 | }
4 |
5 | .elevation-10 {
6 | box-shadow: $box-shadow !important;
7 | }
8 |
9 | .primary-shadow {
10 | box-shadow: rgba(var(--v-theme-primary), 0.30) 0px 12px 14px 0px;
11 | &:hover {
12 | box-shadow: none;
13 | }
14 | }
15 |
16 |
--------------------------------------------------------------------------------
/package/src/layouts/full/logo/LogoIcon.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
10 |
--------------------------------------------------------------------------------
/package/src/layouts/full/vertical-header/NotificationDD.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/hire-us.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Matdash - Vue3 Free Admin Dashboard
5 | Matdash - Vue3 Free Admin Dashboard
13 | https://adminmart.com/hire-us/
16 |
17 |
18 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/alert/Filled.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | This is an error alert — check it out!
4 | This is a warning alert — check it out!
5 | This is an info alert — check it out!
6 | This is a success alert — check it out!
7 |
8 |
--------------------------------------------------------------------------------
/package/src/views/pages/SamplePage.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/cards/CardsProps.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 |
--------------------------------------------------------------------------------
/package/src/components/shared/UiChildCard.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 | {{ title }}
11 |
12 |
14 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/alert/Basic.vue:
--------------------------------------------------------------------------------
1 |
2 | This is an error alert — check it out!
3 | This is a warning alert — check it out!
4 | This is an info alert — check it out!
5 | This is a success alert — check it out!
6 |
7 |
--------------------------------------------------------------------------------
/package/src/router/index.ts:
--------------------------------------------------------------------------------
1 | import { createRouter, createWebHistory } from 'vue-router';
2 | import MainRoutes from './MainRoutes';
3 | import AuthRoutes from './AuthRoutes';
4 |
5 | export const router = createRouter({
6 | history: createWebHistory(import.meta.env.BASE_URL),
7 | routes: [
8 | {
9 | path: '/:pathMatch(.*)*',
10 | component: () => import('@/views/auth/Error.vue')
11 | },
12 | MainRoutes,
13 | AuthRoutes
14 | ]
15 | });
16 |
17 |
--------------------------------------------------------------------------------
/package/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@vue/tsconfig/tsconfig.web.json",
3 | "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
4 | "compilerOptions": {
5 | "preserveValueImports": false,
6 | "importsNotUsedAsValues": "remove",
7 | "verbatimModuleSyntax": true,
8 | "baseUrl": ".",
9 | "paths": {
10 | "@/*": ["./src/*"]
11 | },
12 | "allowJs": true
13 | },
14 | "references": [
15 | {
16 | "path": "./tsconfig.vite-config.json"
17 | }
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/package/src/views/auth/Error.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
Opps!!!
6 |
This page you are looking for could not be found.
7 |
Go Back to Home
8 |
9 |
11 |
--------------------------------------------------------------------------------
/package/src/assets/images/technology/vue-cat-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/button/ColorsButtons.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | {{ btn }}
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/button/OutlinedButtons.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | primary
5 | secondary
6 |
7 | Disabled
8 |
9 | link
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/button/TextButtons.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | {{ btn }}
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/package/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import App from './App.vue';
3 | import { router } from './router';
4 | import vuetify from './plugins/vuetify';
5 | import '@/scss/style.scss';
6 | import PerfectScrollbar from 'vue3-perfect-scrollbar';
7 | import VueApexCharts from 'vue3-apexcharts';
8 | import VueTablerIcons from 'vue-tabler-icons';
9 | const app = createApp(App);
10 | app.use(router);
11 | app.use(PerfectScrollbar);
12 | app.use(VueTablerIcons);
13 | app.use(VueApexCharts);
14 | app.use(vuetify).mount('#app');
15 |
--------------------------------------------------------------------------------
/package/src/scss/style.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 | @import 'vuetify/styles.scss';
3 | @import './layout/container';
4 | @import './layout/sidebar';
5 | @import './layout/topbar';
6 | @import './components/VButtons';
7 | @import './components/VCard';
8 | @import './components/VField';
9 | @import './components/VInput';
10 | @import './components/VNavigationDrawer';
11 | @import './components/VShadow';
12 | @import './components/VTable';
13 | @import 'pages/dashboards';
14 | @import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css';
--------------------------------------------------------------------------------
/package/src/scss/components/_VButtons.scss:
--------------------------------------------------------------------------------
1 | //
2 | // global
3 |
4 | .v-btn-group .v-btn {
5 | height: inherit !important;
6 | }
7 |
8 | .v-btn-group {
9 | border-color: rgb(var(--v-theme-borderColor)) !important;
10 | }
11 |
12 | .v-btn--size-large{
13 | font-size: 14px;
14 | }
15 |
16 | .btn-white{
17 | background-color: rgb(var(--v-theme-surface)) !important;
18 | padding:10px 15px;
19 | &:hover{
20 | background-color: rgb(var(--v-theme-primary)) !important;
21 | color: #fff !important;
22 | }
23 | }
--------------------------------------------------------------------------------
/package/src/layouts/full/vertical-sidebar/Icon.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
14 |
15 |
22 |
23 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/cards/CardsSlots.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | This is a title
9 |
10 | This is a subtitle
11 |
12 | This is content
14 |
15 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/button/BaseButtons.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | elevates (default)
4 | flat
5 | tonal
6 | outlined
7 | text
8 | plain
9 |
10 |
11 |
--------------------------------------------------------------------------------
/docs.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Matdash - Vue3 Free Admin Dashboard | Docs
5 | Matdash - Vue3 Free Admin Dashboard
13 | https://adminmart.github.io/premium-documentation/vue/matdash/index.html
17 |
18 |
19 |
--------------------------------------------------------------------------------
/package/src/views/pages/Icons.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/package/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Matdash - Vue3 Typescript based Free Admin Dashboard Template
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/package/src/components/shared/UiTableCard.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | {{ title }}
14 |
15 |
19 |
20 |
--------------------------------------------------------------------------------
/package/src/router/AuthRoutes.ts:
--------------------------------------------------------------------------------
1 | const AuthRoutes = {
2 | path: '/auth',
3 | component: () => import('@/layouts/blank/BlankLayout.vue'),
4 | meta: {
5 | requiresAuth: false
6 | },
7 | children: [
8 | {
9 | name: 'Login',
10 | path: '/auth/login',
11 | component: () => import('@/views/auth/Login.vue')
12 | },
13 | {
14 | name: 'Register',
15 | path: '/auth/register',
16 | component: () => import('@/views/auth/Register.vue')
17 | },
18 | ]
19 | };
20 |
21 | export default AuthRoutes;
22 |
--------------------------------------------------------------------------------
/package/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | require("@rushstack/eslint-patch/modern-module-resolution");
3 |
4 | module.exports = {
5 | root: true,
6 | extends: [
7 | "plugin:vue/vue3-essential",
8 | "eslint:recommended",
9 | "@vue/eslint-config-typescript/recommended",
10 | "@vue/eslint-config-prettier",
11 | ],
12 | env: {
13 | "vue/setup-compiler-macros": true,
14 | },
15 | rules: {
16 | "comma-dangle": "off",
17 | "@typescript-eslint/comma-dangle": "off",
18 | "prettier/prettier": ["error", { endOfLine: "off" }],
19 | "javascript.validate.enable": false,
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/package/src/assets/images/technology/nuxt-cat-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/package/src/components/style-components/shadow/Shadow.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
10 | {{ n }}
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/button/IconColorSizes.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 |
--------------------------------------------------------------------------------
/package/README.md:
--------------------------------------------------------------------------------
1 | # README #
2 |
3 | This README would normally document whatever steps are necessary to get your application up and running.
4 |
5 | ### What is this repository for? ###
6 |
7 | * Quick summary
8 | * Version
9 | * [Learn Markdown](https://bitbucket.org/tutorials/markdowndemo)
10 |
11 | ### How do I get set up? ###
12 |
13 | * Summary of set up
14 | * Configuration
15 | * Dependencies
16 | * Database configuration
17 | * How to run tests
18 | * Deployment instructions
19 |
20 | ### Contribution guidelines ###
21 |
22 | * Writing tests
23 | * Code review
24 | * Other guidelines
25 |
26 | ### Who do I talk to? ###
27 |
28 | * Repo owner or admin
29 | * Other community or team contact
--------------------------------------------------------------------------------
/package/src/views/components/Typography.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
13 |
14 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/button/SizeButtons.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Extra small
5 |
6 |
7 |
8 | Small
9 |
10 |
11 |
12 | Normal
13 |
14 |
15 |
16 | Large
17 |
18 |
19 |
20 | Extra large
21 |
22 |
23 |
--------------------------------------------------------------------------------
/package/src/components/shared/WidgetCard.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | {{ title }}
14 |
15 |
17 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/package/src/components/shared/UiParentCard.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 | // ===============================|| Ui Parent Card||=============================== //
8 |
9 |
10 |
11 |
12 | {{ title }}
13 |
16 |
17 |
18 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/package/src/scss/components/_VInput.scss:
--------------------------------------------------------------------------------
1 | // variant
2 | .v-input--density-default,
3 | .v-field--variant-solo,
4 | .v-field--variant-filled {
5 | --v-input-control-height: 51px;
6 | --v-input-padding-top: 14px;
7 | }
8 |
9 | // comfortable
10 | .v-input--density-comfortable {
11 | --v-input-control-height: 44px;
12 | }
13 |
14 | // compact
15 | .v-input--density-compact {
16 | --v-input-padding-top: 10px;
17 | }
18 | .v-label {
19 | font-size: 0.875rem;
20 | opacity: 1;
21 | }
22 | .v-switch .v-label,
23 | .v-checkbox .v-label {
24 | opacity: 1;
25 | }
26 |
27 | .v-text-field__suffix {
28 | opacity: 1;
29 | padding-left: 20px;
30 | }
31 |
32 | .shadow-none .v-field--variant-solo {
33 | box-shadow: none !important;
34 | }
35 |
--------------------------------------------------------------------------------
/package/src/layouts/full/vertical-sidebar/UpgradeBox/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/package/src/scss/layout/_container.scss:
--------------------------------------------------------------------------------
1 | html {
2 | overflow-y: auto;
3 | }
4 |
5 | @media (max-width: 1279px) {
6 | .v-main {
7 | margin: 0 10px;
8 | }
9 | }
10 |
11 |
12 | .cursor-pointer {
13 | cursor: pointer;
14 | }
15 |
16 | .page-wrapper {
17 | min-height: calc(100vh - 100px);
18 | padding: 24px;
19 |
20 | @media screen and (max-width: 767px) {
21 | padding: 20px 10px;
22 | }
23 | }
24 |
25 | .maxWidth {
26 | max-width: 1200px;
27 | margin: 0 auto;
28 | padding: 0 20px;
29 |
30 | @media screen and (max-width: 1199px) {
31 | padding: 0 8px !important;
32 | }
33 | }
34 |
35 |
36 | .h-100vh {
37 | height: 100vh;
38 | }
39 |
40 | .v-main {
41 | --v-layout-top: 0 !important;
42 | }
--------------------------------------------------------------------------------
/package/src/plugins/vuetify.ts:
--------------------------------------------------------------------------------
1 | import { createVuetify } from 'vuetify';
2 | import '@mdi/font/css/materialdesignicons.css';
3 | import * as components from 'vuetify/components';
4 | import * as directives from 'vuetify/directives';
5 | import { BLUE_THEME} from '@/theme/LightTheme';
6 |
7 |
8 | export default createVuetify({
9 | components,
10 | directives,
11 |
12 | theme: {
13 | defaultTheme: 'BLUE_THEME',
14 | themes: {
15 | BLUE_THEME,
16 | }
17 | },
18 | defaults: {
19 | VBtn: {},
20 | VCard: {
21 | rounded: 'md'
22 | },
23 | VTextField: {
24 | rounded: 'lg'
25 | },
26 | VTooltip: {
27 | location: 'top'
28 | }
29 | }
30 | });
31 |
--------------------------------------------------------------------------------
/package/src/assets/images/technology/angular-cat-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
9 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/package/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { fileURLToPath, URL } from 'url';
2 | import { defineConfig } from 'vite';
3 | import vue from '@vitejs/plugin-vue';
4 | import vuetify from 'vite-plugin-vuetify';
5 |
6 | // https://vitejs.dev/config/
7 | export default defineConfig({
8 | plugins: [
9 | vue(),
10 | vuetify({
11 | autoImport: true,
12 | styles: { configFile: 'src/scss/variables.scss' }
13 | })
14 | ],
15 | resolve: {
16 | alias: {
17 | '@': fileURLToPath(new URL('./src', import.meta.url))
18 | }
19 | },
20 | css: {
21 | preprocessorOptions: {
22 | scss: {}
23 | }
24 | },
25 | optimizeDeps: {
26 | exclude: ['vuetify'],
27 | entries: ['./src/**/*.vue']
28 | }
29 | });
30 |
--------------------------------------------------------------------------------
/package/src/components/shared/UiParentCardLogo.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 | // ===============================|| Ui Parent Card||=============================== //
7 |
8 |
9 |
10 |
11 |
16 |
17 |
19 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/package/src/layouts/full/FullLayout.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
12 |
14 |
15 |
16 |
17 |
19 |
20 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/package/src/components/shared/CardHeaderFooter.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | {{ title }}
14 |
15 |
17 |
19 |
21 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/alert/Closable.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
16 | Aenean imperdiet. Quisque id odio. Cras dapibus. Pellentesque ut neque. Cras dapibus.
17 |
18 | Vivamus consectetuer hendrerit lacus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non
19 |
20 |
23 |
26 | Reset
27 |
28 |
29 |
31 |
--------------------------------------------------------------------------------
/package/.gitignore:
--------------------------------------------------------------------------------
1 | # These are some examples of commonly ignored file patterns.
2 | # You should customize this list as applicable to your project.
3 | # Learn more about .gitignore:
4 | # https://www.atlassian.com/git/tutorials/saving-changes/gitignore
5 |
6 | # Node artifact files
7 | node_modules/
8 | dist/
9 |
10 | # Compiled Java class files
11 | *.class
12 |
13 | # Compiled Python bytecode
14 | *.py[cod]
15 |
16 | # Log files
17 | *.log
18 |
19 | # Package files
20 | *.jar
21 |
22 | # Maven
23 | target/
24 | dist/
25 |
26 | # JetBrains IDE
27 | .idea/
28 |
29 | # Unit test reports
30 | TEST*.xml
31 |
32 | # Generated by MacOS
33 | .DS_Store
34 |
35 | # Generated by Windows
36 | Thumbs.db
37 |
38 | # Applications
39 | *.app
40 | *.exe
41 | *.war
42 |
43 | # Large media files
44 | *.mp4
45 | *.tiff
46 | *.avi
47 | *.flv
48 | *.mov
49 | *.wmv
50 |
51 |
--------------------------------------------------------------------------------
/package/src/types/dashboard/index.ts:
--------------------------------------------------------------------------------
1 | /*Revenue Projects*/
2 | type RevenueProjects={
3 | img: string;
4 | leadname: string;
5 | designation: string;
6 | projectname: string;
7 | statuscolor: string;
8 | statustext: string;
9 | money: string;
10 | };
11 |
12 | // Daily Activities
13 | type DailyActivities = {
14 | title: string;
15 | subtitle: string;
16 | textcolor: string;
17 | boldtext: boolean;
18 | line: boolean;
19 | link: string;
20 | url: string;
21 | };
22 |
23 | /*Card types*/
24 | type BlogCards = {
25 | avatar: string;
26 | coveravatar: string;
27 | read: string;
28 | title: string;
29 | link: string;
30 | category: string;
31 | name: string;
32 | view: string;
33 | comments: string;
34 | time: string;
35 | };
36 |
37 | export type{RevenueProjects,DailyActivities,BlogCards}
--------------------------------------------------------------------------------
/package/src/components/shared/WidgetCardv2.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | {{ title }}
15 |
16 |
20 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/package/src/assets/images/technology/tailwind-icon.svg:
--------------------------------------------------------------------------------
1 |
12 |
13 |
22 |
23 |
--------------------------------------------------------------------------------
/package/src/components/dashboard/NewCustomer.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
11 |
New Customers
12 |
13 |
14 |
15 |
New Goals
16 |
83%
17 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/cards/CardsMedia.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
17 | Top 10 Australian beaches
18 |
19 |
20 | Number 10
21 |
22 |
23 | Whitehaven Beach
24 |
25 | Whitsunday Island, Whitsunday Islands
26 |
27 |
28 |
29 | Share
30 |
31 | Explore
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/package/src/components/auth/RegisterForm.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 | Name
10 |
12 |
13 | Email Address
14 |
16 |
17 | Password
18 |
20 |
21 | Sign up
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2025 AdminMart
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/package/src/theme/LightTheme.ts:
--------------------------------------------------------------------------------
1 | import type { ThemeTypes } from '@/types/themeTypes/ThemeType';
2 |
3 | const BLUE_THEME: ThemeTypes = {
4 | name: 'BLUE_THEME',
5 | dark: false,
6 | variables: {
7 | 'border-color': '#e0e6eb',
8 | 'border-opacity': 1
9 | },
10 | colors: {
11 | primary: '#635BFF',
12 | secondary: '#14E9E2',
13 | info: '#46caeb',
14 | success: '#36c76c',
15 | warning: '#ffd648',
16 | error: '#ff6692',
17 | lightprimary: '#D5D3FC',
18 | lightsecondary: '#D0FBF9',
19 | lightsuccess: '#E1F7E9',
20 | lighterror: '#FFD9E4',
21 | lightinfo: '#DAF4FB',
22 | lightwarning: '#FFF7DA',
23 | textPrimary: '#0a2540',
24 | textSecondary: '#7b8893',
25 | borderColor: '#e0e6eb',
26 | containerBg: '#ffffff',
27 | background: '#F4F7FB',
28 | hoverColor: '#f6f9fc',
29 | surface: '#fff',
30 | grey100: '#EAEFF4',
31 | grey200: '#29343d',
32 | light: '#EFF4FA',
33 | muted:'#526b7a'
34 | }
35 | };
36 |
37 |
38 |
39 | export { BLUE_THEME};
40 |
--------------------------------------------------------------------------------
/package/public/favicon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/package/src/assets/images/logos/logo-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/package/src/scss/components/_VField.scss:
--------------------------------------------------------------------------------
1 | .v-field--variant-outlined .v-field__outline__start.v-locale--is-ltr,
2 | .v-locale--is-ltr .v-field--variant-outlined .v-field__outline__start {
3 | border-radius: $border-radius-root 0 0 $border-radius-root;
4 | }
5 |
6 | .v-field--variant-outlined .v-field__outline__end.v-locale--is-ltr,
7 | .v-locale--is-ltr .v-field--variant-outlined .v-field__outline__end {
8 | border-radius: 0 $border-radius-root $border-radius-root 0;
9 | }
10 |
11 | .v-field {
12 | font-size: 14px !important;
13 | color: rgba(var(--v-theme-textPrimary));
14 | }
15 |
16 | // select outlined
17 | .v-field--variant-outlined .v-field__outline__start,
18 | .v-field--variant-outlined .v-field__outline__notch::before,
19 | .v-field--variant-outlined .v-field__outline__notch::after,
20 | .v-field--variant-outlined .v-field__outline__end {
21 | opacity: 1;
22 | }
23 |
24 |
25 |
26 | .v-text-field input {
27 | font-size: 0.875rem;
28 | }
29 | .v-field__outline {
30 | color: rgb(var(--v-theme-borderColor));
31 | --v-field-border-opacity: 1 !important;
32 | }
33 | .input {
34 | .v-field--variant-outlined {
35 | background-color: rgba(0, 0, 0, 0.025);
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/package/src/scss/components/_VCard.scss:
--------------------------------------------------------------------------------
1 | // Outline Card
2 | .v-card--variant-outlined {
3 | border-color: rgba(var(--v-theme-borderColor)) !important;
4 | background-color:rgb(var(--v-theme-surface)); ;
5 | }
6 |
7 | .v-card--variant-elevated,
8 | .v-card--variant-flat {
9 | color: rgb(var(--v-theme-textPrimary));
10 | }
11 |
12 | .card-hover {
13 | transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
14 |
15 | &:hover {
16 | img {
17 | transform: scale(1.09);
18 | transition: transform .2s;
19 | }
20 | }
21 | }
22 |
23 | .v-card {
24 | width: 100%;
25 | overflow: visible;
26 |
27 | .color-inherits {
28 | color: inherit;
29 | }
30 |
31 | .feature-card {
32 | .v-responsive__content {
33 | height: 100%;
34 | }
35 | }
36 |
37 | .v-card-title {
38 | line-height: normal;
39 | margin-bottom: 8px;
40 | }
41 | .v-card-subtitle{
42 | color: rgb(var(--v-theme-textSecondary));
43 | }
44 | .v-card-text{
45 | font-size: 14px;
46 | }
47 |
48 | }
49 |
50 | // Theme cards
51 | .cardBordered {
52 | .v-card {
53 | box-shadow: none !important;
54 | border: 1px solid rgb(var(--v-theme-borderColor));
55 | }
56 | }
--------------------------------------------------------------------------------
/package/src/layouts/full/vertical-sidebar/NavItem/index.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
15 |
16 |
17 |
19 | {{item.title}}
20 |
21 |
24 |
25 |
26 |
27 | {{ item.chip }}
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/package/src/views/ui-components/Alerts.vue:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
21 |
22 |
23 |
24 |
25 |
27 |
28 |
29 |
30 |
31 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/package/src/components/auth/LoginForm.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 | Username
10 |
12 |
13 | Password
14 |
16 |
17 |
18 |
19 | Remeber this Device
20 |
21 |
22 | Forgot
24 | Password ?
25 |
26 |
28 |
29 | Sign in
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/package/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "matdash-vue-free",
3 | "version": "2.0.0",
4 | "type": "module",
5 | "scripts": {
6 | "dev": "vite",
7 | "build": "vue-tsc --noEmit && vite build",
8 | "preview": "vite preview --port 5050",
9 | "typecheck": "vue-tsc --noEmit",
10 | "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
11 | },
12 | "dependencies": {
13 | "@iconify/vue": "4.3.0",
14 | "apexcharts": "4.5.0",
15 | "vite-plugin-vuetify": "2.1.0",
16 | "vue": "3.5.13",
17 | "vue-router": "4.5.0",
18 | "vue-tabler-icons": "2.21.0",
19 | "vue3-apexcharts": "1.5.2",
20 | "vue3-perfect-scrollbar": "1.6.1",
21 | "vuetify": "3.7.18"
22 | },
23 | "devDependencies": {
24 | "@mdi/font": "7.4.47",
25 | "@rushstack/eslint-patch": "1.11.0",
26 | "@types/chance": "1.1.6",
27 | "@types/node": "22.13.13",
28 | "@vitejs/plugin-vue": "5.2.3",
29 | "@vue/eslint-config-prettier": "10.2.0",
30 | "@vue/eslint-config-typescript": "14.5.0",
31 | "@vue/tsconfig": "^0.1.3",
32 | "eslint": "9.23.0",
33 | "eslint-plugin-vue": "10.0.0",
34 | "prettier": "3.5.3",
35 | "sass": "1.70.0",
36 | "sass-loader": "14.1.0",
37 | "typescript": "^5.8.2",
38 | "vite": "6.2.3",
39 | "vue-cli-plugin-vuetify": "2.5.8",
40 | "vue-tsc": "2.2.8"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/package/src/views/auth/Login.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
16 | Your Social Campaigns
17 |
19 | New to Matdash?
20 |
22 | Create an account
23 |
24 |
25 |
26 |
27 |
28 |
29 |
31 |
--------------------------------------------------------------------------------
/package/src/views/auth/Register.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
15 | Your Social Campaigns
16 |
18 | Already have an Account?
19 |
21 | Sign In
22 |
23 |
24 |
25 |
26 |
27 |
28 |
30 |
--------------------------------------------------------------------------------
/package/src/views/ui-components/Cards.vue:
--------------------------------------------------------------------------------
1 |
13 |
14 |
15 |
16 |
17 |
18 |
20 |
21 |
22 |
23 |
25 |
26 |
27 |
28 |
30 |
31 |
32 |
33 |
34 |
36 |
37 |
38 |
39 |
40 |
42 |
43 |
44 |
45 |
46 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/package/src/assets/images/technology/bt-cat-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/package/src/router/MainRoutes.ts:
--------------------------------------------------------------------------------
1 | const MainRoutes = {
2 | path: '/main',
3 | meta: {
4 | requiresAuth: true
5 | },
6 | redirect: '/main',
7 | component: () => import('@/layouts/full/FullLayout.vue'),
8 | children: [
9 | {
10 | name: 'Dashboard',
11 | path: '/',
12 | component: () => import('@/views/dashboard/index.vue')
13 | },
14 | {
15 | name: 'Typography',
16 | path: '/ui/typography',
17 | component: () => import('@/views/components/Typography.vue')
18 | },
19 | {
20 | name: 'Shadow',
21 | path: '/ui/shadow',
22 | component: () => import('@/views/components/Shadow.vue')
23 | },
24 | {
25 | name: 'Alert',
26 | path: '/ui/alerts',
27 | component: () => import('@/views/ui-components/Alerts.vue')
28 | },
29 | {
30 | name: 'Buttons',
31 | path: '/ui/buttons',
32 | component: () => import('@/views/ui-components/Buttons.vue')
33 | },
34 | {
35 | name: 'Cards',
36 | path: '/ui/cards',
37 | component: () => import('@/views/ui-components/Cards.vue')
38 | },
39 | {
40 | name: 'Tables',
41 | path: '/ui/tables',
42 | component: () => import('@/views/ui-components/Tables.vue')
43 | },
44 | {
45 | name: 'Icons',
46 | path: '/icons',
47 | component: () => import('@/views/pages/Icons.vue')
48 | },
49 | {
50 | name: 'Starter',
51 | path: '/sample-page',
52 | component: () => import('@/views/pages/SamplePage.vue')
53 | },
54 | ]
55 | };
56 |
57 | export default MainRoutes;
58 |
--------------------------------------------------------------------------------
/package/src/components/dashboard/DailyActivities.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 | Daily activities
10 |
11 |
12 |
13 |
14 | {{ list.title }}
15 |
16 |
17 |
19 |
20 |
21 | {{ list.subtitle }}
22 | {{ list.subtitle }}
23 |
24 | {{
25 | list.link
26 | }}
27 |
28 |
29 |
30 |
31 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/cards/CardsTwitter.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
16 |
17 |
19 |
20 |
21 | "Turns out semicolon-less style is easier and safer in TS because most gotcha edge cases are type invalid as well."
22 |
23 |
24 |
25 |
26 |
27 |
32 |
33 | Evan You
34 |
35 | Vue Creator
36 |
37 |
38 |
39 | 256
41 | ·
42 | 45
44 |
45 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/package/src/components/style-components/typography/DefaultText.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | Text Primary
8 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
9 |
10 |
11 | Text Secondary
12 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
13 |
14 |
15 | Text Info
16 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
17 |
18 |
19 | Text Warning
20 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
21 |
22 |
23 | Text Error
24 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
25 |
26 |
27 | Text Success
28 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
29 |
30 |
32 |
--------------------------------------------------------------------------------
/package/src/components/dashboard/TotalIncome.vue:
--------------------------------------------------------------------------------
1 |
48 |
49 |
50 |
51 |
52 |
53 |
55 |
Total Income
56 |
57 |
58 |
59 | $680
60 | +18%
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
--------------------------------------------------------------------------------
/package/src/layouts/full/vertical-sidebar/NavCollapse/NavCollapse.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 |
24 | {{ item.title}}
25 |
26 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/package/src/scss/components/_VTable.scss:
--------------------------------------------------------------------------------
1 | .v-table .v-table__wrapper>table>tbody>tr:not(:last-child)>td,
2 | .v-table .v-table__wrapper>table>tbody>tr:not(:last-child)>th,
3 | .v-table .v-table__wrapper>table>thead>tr:last-child>th {
4 | border-bottom: thin solid rgba(var(--v-theme-borderColor), 0.6) !important;
5 | }
6 |
7 | .v-table {
8 | &.dark-table {
9 | background-color: rgb(var(--v-theme-grey200));
10 | }
11 | }
12 |
13 | .v-table {
14 | .v-table__wrapper {
15 | table {
16 | tbody {
17 | tr {
18 |
19 | td {
20 | padding: 14px 24px !important;
21 |
22 | &:first-child {
23 | padding-left: 0 ;
24 | }
25 | }
26 | }
27 | }
28 |
29 | thead {
30 | tr {
31 | th {
32 | padding: 14px 24px !important;
33 |
34 | &:first-child {
35 | padding-left: 0 ;
36 | }
37 | }
38 | }
39 | }
40 | }
41 |
42 | }
43 | }
44 |
45 | .v-table{
46 | &.revenue-table{
47 | .v-table__wrapper {
48 | table {
49 | tbody {
50 | tr {
51 |
52 | td {
53 | padding: 14px 24px !important;
54 |
55 | &:first-child {
56 | padding-left: 0 !important;
57 | }
58 | }
59 | }
60 | }
61 |
62 | thead {
63 | tr {
64 | th {
65 | padding: 14px 24px !important;
66 |
67 | &:first-child {
68 | padding-left: 0 !important;
69 | }
70 | }
71 | }
72 | }
73 | }
74 |
75 | }
76 | }
77 | }
78 |
79 |
--------------------------------------------------------------------------------
/package/src/layouts/full/vertical-header/ProfileDD.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 | My Profile
24 |
25 |
26 |
27 |
29 | My Account
30 |
31 |
32 |
33 |
35 | My Task
36 |
37 |
38 |
39 | Logout
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/cards/CardsContentWrap.vue:
--------------------------------------------------------------------------------
1 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
40 |
41 |
47 |
48 |
50 |
51 | Messages
52 |
53 |
54 |
56 |
57 |
58 |
59 |
60 |
61 | Today
62 |
63 |
64 |
70 |
71 |
72 | {{ message.from }} @{{ message.time }}
73 |
74 |
{{ message.message }}
75 |
77 |
78 |
79 |
80 |
81 |
83 |
--------------------------------------------------------------------------------
/package/src/components/style-components/typography/Heading.vue:
--------------------------------------------------------------------------------
1 |
23 |
24 |
25 |
26 | {{ name }}
27 |
30 |
31 |
34 |
35 | {{ name1 }} {{ val1 }}
36 |
39 |
40 |
42 |
--------------------------------------------------------------------------------
/package/src/components/dashboard/BlogCards.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
14 |
15 |
17 |
18 |
20 | {{ card.title }}
21 |
22 |
23 |
24 |
25 |
27 |
29 |
31 |
33 |
34 |
35 |
37 |
39 |
41 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/discount-code.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Discount Code
8 |
91 |
92 |
93 |
94 |
30% OFF
95 |
On Premium
96 |
Product
97 |
Use Coupon code : upgrade30
98 |
99 |
100 |
Get Now
101 |
102 |
2 |
5 |
--------------------------------------------------------------------------------
/package/src/views/ui-components/Buttons.vue:
--------------------------------------------------------------------------------
1 |
18 |
19 | // ===============================|| Ui Buttons ||=============================== //
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
30 |
31 |
32 |
33 |
34 |
36 |
37 |
38 |
39 |
40 |
42 |
43 |
44 |
45 |
46 |
48 |
49 |
50 |
51 |
52 |
54 |
55 |
56 |
57 |
58 |
60 |
61 |
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/package/src/components/dashboard/RevenueProducts.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 | Revenue by Product
11 |
12 |
13 |
14 |
15 |
16 |
17 | Assigned
18 | Progress
19 | Priority
20 | Budget
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
{{ item.leadname }}
30 | {{ item.designation }}
31 |
32 |
34 |
35 |
36 | {{ item.projectname }}
37 |
38 |
39 |
40 | {{
41 | item.statustext
42 | }}
43 |
44 |
45 | {{ item.money }}
46 |
47 |
48 |
49 |
50 |
51 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/package/src/scss/layout/_topbar.scss:
--------------------------------------------------------------------------------
1 | .v-app-bar {
2 | .v-toolbar__content {
3 | padding: 0 20px 0 20px;
4 | display: flex;
5 | gap:8px;
6 |
7 | >.v-btn:first-child {
8 | margin-inline-start: 0;
9 | }
10 |
11 | .v-btn {
12 | &.custom-hover-primary{
13 | .iconify{
14 | color: rgba(var(--v-theme-textPrimary), 0.7) !important;
15 | }
16 | &:hover{
17 | background-color: rgb(var(--v-theme-lightprimary)) ;
18 | .iconify{
19 | color: rgb(var(--v-theme-primary)) !important;
20 | }
21 |
22 | }
23 |
24 | }
25 |
26 | }
27 | }
28 | }
29 |
30 | .mobile_popup{
31 | .v-btn {
32 | &.custom-hover-primary{
33 | .iconify{
34 | color: rgba(var(--v-theme-textPrimary), 0.7) !important;
35 | }
36 | }
37 | }
38 | }
39 |
40 | .custom-text-primary {
41 | &:hover {
42 | .custom-title {
43 | color: rgb(var(--v-theme-primary)) !important;
44 | }
45 | }
46 | }
47 |
48 |
49 |
50 | @media screen and (max-width:1279px) {
51 | .mini-sidebar {
52 | .v-navigation-drawer.v-navigation-drawer--left {
53 | width: 260px !important;
54 | }
55 | }
56 | }
57 |
58 | .feature-topbar {
59 | position: sticky;
60 | top: 0;
61 | z-index: 15;
62 | background: linear-gradient(90deg, #001138 0%, #001E66 100%);
63 |
64 |
65 | .text-linear-gradient {
66 | background: linear-gradient(90deg, #FFFFFF 0%, #3772FF 100%);
67 | -webkit-background-clip: text;
68 | -webkit-text-fill-color: transparent;
69 | background-clip: text;
70 |
71 |
72 | }
73 |
74 | .border-blue {
75 | border-radius: 9px;
76 | border: 1px solid rgb(236, 240, 242, 0.5);
77 |
78 | }
79 |
80 | .purple-btn {
81 | background-color: #8D70F8;
82 | border-radius: 9px;
83 |
84 | &:hover {
85 | background-color: #714BFF;
86 | }
87 |
88 | }
89 |
90 | .green-btn {
91 | background-color: #B3F143;
92 | border-radius: 9px;
93 |
94 | &:hover {
95 | background-color: #90DE03;
96 | }
97 |
98 | }
99 | }
100 |
101 | .top-header{
102 | position: relative !important;
103 | z-index: 0 !important;
104 | }
105 |
106 | .topbar-links {
107 | .v-btn {
108 | &:hover {
109 | background-color: rgba(var(--v-theme-primary));
110 | }
111 | }
112 | }
113 |
114 | .topbar-links {
115 | a {
116 | text-decoration: none;
117 | color: rgba(var(--v-theme-surface));
118 |
119 | &:hover {
120 | color: rgba(var(--v-theme-primary)) !important;
121 | }
122 | }
123 | }
124 |
125 | .border,
126 | .v-divider {
127 | border-color: rgba(var(--v-border-color), 1) !important;
128 | }
129 |
130 | .lh-0{
131 | line-height: 0;
132 | }
133 | .lh-normal{
134 | line-height: normal;
135 | }
--------------------------------------------------------------------------------
/package/src/layouts/full/Main.vue:
--------------------------------------------------------------------------------
1 |
25 |
26 |
27 |
28 |
56 |
57 |
76 |
77 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/cards/CardsWeather.vue:
--------------------------------------------------------------------------------
1 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
40 |
41 |
42 |
43 |
44 |
48 | 64°F
49 |
50 |
51 |
52 |
58 |
59 |
60 |
61 |
62 |
66 | 123 km/h
67 |
68 |
69 |
73 | 48%
74 |
75 |
76 |
77 |
78 |
79 |
80 |
93 |
94 |
95 |
102 |
103 |
104 |
106 |
107 |
110 |
111 | {{ !expand ? 'Full Report' : 'Hide Report' }}
112 |
113 |
114 |
115 |
116 |
--------------------------------------------------------------------------------
/package/src/scss/pages/_dashboards.scss:
--------------------------------------------------------------------------------
1 | // Dashboard 1
2 | .welcome-img{
3 | max-height: 200px;
4 | height: 200px;
5 | }
6 |
7 | .labels-chart .label-1 {
8 | position: absolute;
9 | width: 25px;
10 | left: 0;
11 | right: 0;
12 | margin: 0 auto;
13 | top: -3px
14 | }
15 |
16 | .labels-chart .label-2 {
17 | position: absolute;
18 | right: 0;
19 | top: 50%
20 | }
21 |
22 | .labels-chart .label-3 {
23 | position: absolute;
24 | width: 40px;
25 | left: 0;
26 | right: 0;
27 | margin: 0 auto;
28 | bottom: 0;
29 | text-align: center
30 | }
31 |
32 | .labels-chart .label-4 {
33 | position: absolute;
34 | top: 50%
35 | }
36 |
37 | // Revenue Products
38 | .revenue-products {
39 | .v-slide-group__content {
40 | gap: 24px;
41 | }
42 |
43 | .v-btn {
44 | background-color: rgba(var(--v-theme-grey100), 0.8);
45 | padding: 12px 24px;
46 | }
47 |
48 | .v-slide-group-item--active.v-tab--selected {
49 | background-color: rgba(var(--v-theme-primary));
50 |
51 | .v-btn__content {
52 | color: #fff;
53 |
54 | .v-tab__slider {
55 | display: none;
56 | }
57 | }
58 | }
59 | }
60 |
61 | // Dashboard 2
62 | .bg-primary-gt {
63 | background: linear-gradient(261.23deg, rgba(var(--v-theme-primary)) .42%, #5a52ff 100%) !important;
64 |
65 | img {
66 | bottom: 0;
67 | right: 0;
68 | z-index: -1;
69 | }
70 | }
71 |
72 | .profit-card {
73 | .badge-custom-dark {
74 | background-color: rgba(41, 52, 61, .2) !important;
75 | padding: 5px 12px;
76 | width: fit-content;
77 | }
78 | }
79 |
80 | .rounded-bars {
81 | .apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path {
82 | clip-path: inset(0 0 5% 0 round 20px);
83 | }
84 | }
85 |
86 | .rounded-pill-bars .apexcharts-rangebar-area {
87 | clip-path: inset(9% 0% 11% round 24px);
88 | }
89 |
90 | // Annual Profit
91 | .annual-list {
92 | .list {
93 | &:last-child {
94 | border-bottom: 0 !important;
95 | padding-bottom: 0 !important;
96 | }
97 | }
98 | }
99 |
100 | .daily-activities {
101 | .line {
102 | width: 1px;
103 | height: 50px;
104 | margin-top: -6px;
105 | }
106 | }
107 |
108 | //Dashboard 3
109 | .primary-gradient {
110 | background: linear-gradient(180deg,rgba(var(--v-theme-primary),.12) 0,rgba(var(--v-theme-primary),.03) 100%)
111 | }
112 |
113 | .warning-gradient {
114 | background: linear-gradient(180deg,rgba(var(--v-theme-warning),.12) 0,rgba(var(--v-theme-warning),.03) 100%)
115 | }
116 |
117 | .secondary-gradient {
118 | background: linear-gradient(180deg,rgba(var(--v-theme-secondary),.12) 0,rgba(var(--v-theme-secondary),.03) 100%)
119 | }
120 |
121 | .error-gradient {
122 | background: linear-gradient(180deg,rgba(var(--v-theme-error),.12) 0,rgba(var(--v-theme-error),.03) 100%)
123 | }
124 |
125 | .success-gradient {
126 | background: linear-gradient(180deg,rgba(var(--v-theme-success),.12) 0,rgba(var(--v-theme-success),.03) 100%)
127 | }
128 |
129 |
130 | .icon-grid-width{
131 | width: 20% !important;
132 | @media screen and (max-width:1190px) {
133 | width: 33% !important;
134 | }
135 | }
136 |
137 | @media screen and (max-width:1368px){
138 | .welcome-img {
139 | max-height: 150px;
140 | }
141 | }
--------------------------------------------------------------------------------
/package/src/views/ui-components/Tables.vue:
--------------------------------------------------------------------------------
1 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 | Name
56 | Calories
57 |
58 |
59 |
60 |
61 | {{ item.name }}
62 | {{ item.calories }}
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 | Name
76 | Calories
77 |
78 |
79 |
80 |
81 | {{ item.name }}
82 | {{ item.calories }}
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | Name
95 | Calories
96 |
97 |
98 |
99 |
100 | {{ item.name }}
101 | {{ item.calories }}
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
--------------------------------------------------------------------------------
/package/src/components/dashboard/RevenueCard.vue:
--------------------------------------------------------------------------------
1 |
94 |
95 |
96 |
97 |
98 |
Revenue Forecast
99 |
100 |
109 |
114 |
115 |
116 |
--------------------------------------------------------------------------------
/package/src/assets/images/technology/react-cat-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/package/src/data/Dashboard.ts:
--------------------------------------------------------------------------------
1 | import type { RevenueProjects,BlogCards,DailyActivities } from '@/types/dashboard/index';
2 |
3 | import product1 from "@/assets/images/products/dash-prd-1.jpg";
4 | import product2 from "@/assets/images/products/dash-prd-2.jpg";
5 | import product3 from "@/assets/images/products/dash-prd-3.jpg";
6 | import product4 from "@/assets/images/products/dash-prd-4.jpg";
7 |
8 | import user1 from '@/assets/images/profile/user-1.jpg';
9 | import user2 from '@/assets/images/profile/user-2.jpg';
10 | import user3 from '@/assets/images/profile/user-3.jpg';
11 | import img1 from '@/assets/images/blog/blog-img1.jpg';
12 | import img2 from '@/assets/images/blog/blog-img2.jpg';
13 | import img3 from '@/assets/images/blog/blog-img3.jpg';
14 |
15 | /*--Revenue Projects --*/
16 | const RevenueProjectsData: RevenueProjects[] = [
17 | {
18 | img: product1,
19 | leadname: "Minecraf App",
20 | designation: "Jason Roy",
21 | projectname: "73.2%",
22 | statuscolor: "warning",
23 | statustext: "Medium",
24 | money: "$3.5K",
25 | },
26 | {
27 | img: product2,
28 | leadname: "Web App Project",
29 | designation: "Mathew Flintoff",
30 | projectname: "73.2%",
31 | statuscolor: "secondary",
32 | statustext: "Very High",
33 | money: "$24.5K",
34 | },
35 | {
36 | img: product3,
37 | leadname: "Modernize Dashboard",
38 | designation: "Anil Kumar",
39 | projectname: "73.2%",
40 | statuscolor: "success",
41 | statustext: "Low",
42 | money: "$12.8K",
43 | },
44 | {
45 | img: product4,
46 | leadname: "Dashboard Co",
47 | designation: "George Cruize",
48 | projectname: "73.2%",
49 | statuscolor: "error",
50 | statustext: "High",
51 | money: "$2.4K",
52 | },
53 | ];
54 |
55 |
56 | /*--Blog Cards--*/
57 | const BlogCardData: BlogCards[] = [
58 | {
59 | avatar: user1,
60 | coveravatar: img1,
61 | read: '2 min Read',
62 | title: 'As yen tumbles, gadget-loving Japan goes for secondhand iPhones',
63 | link: '/',
64 | category: 'Social',
65 | name: 'Georgeanna Ramero',
66 | view: '9,125',
67 | comments: '3',
68 | time: 'Mon, Dec 19'
69 | },
70 | {
71 | avatar: user2,
72 | coveravatar: img2,
73 | read: '2 min Read',
74 | title: 'Intel loses bid to revive antitrust case against patent foe Fortress',
75 | link: '/',
76 | category: 'Gadget',
77 | name: 'Georgeanna Ramero',
78 | view: '4,150',
79 | comments: '38',
80 | time: 'Sun, Dec 18'
81 | },
82 | {
83 | avatar: user3,
84 | coveravatar: img3,
85 | read: '2 min Read',
86 | title: 'COVID outbreak deepens as more lockdowns loom in China',
87 | link: '/',
88 | category: 'Health',
89 | name: 'Georgeanna Ramero',
90 | view: '9,480',
91 | comments: '12',
92 | time: 'Sat, Dec 17'
93 | }
94 | ];
95 |
96 | /*--Daily Activities--*/
97 | const DailyActivitiesData : DailyActivities[] = [
98 | {
99 | title:'09:30 am',
100 | subtitle:'Payment received from John Doe of $385.90',
101 | textcolor:'primary',
102 | boldtext:false,
103 | line:true,
104 | link:'',
105 | url:''
106 | },
107 | {
108 | title:'10:00 am',
109 | subtitle:'New sale recorded',
110 | textcolor:'secondary',
111 | boldtext:true,
112 | line:true,
113 | link:'#ML-3467',
114 | url:''
115 | },
116 | {
117 | title:'12:00 am',
118 | subtitle:'Payment was made of $64.95 to Michael',
119 | textcolor:'success',
120 | boldtext:false,
121 | line:true,
122 | link:'',
123 | url:''
124 | },
125 | {
126 | title:'09:30 am',
127 | subtitle:'New sale recorded',
128 | textcolor:'warning',
129 | boldtext:true,
130 | line:true,
131 | link:'#ML-3467',
132 | url:''
133 | },
134 | {
135 | title:'09:30 am',
136 | subtitle:'New arrival recorded',
137 | textcolor:'error',
138 | boldtext:true,
139 | line:true,
140 | link:'#ML-3467',
141 | url:''
142 | },
143 | {
144 | title:'12:00 am',
145 | subtitle:'Payment Done',
146 | textcolor:'success',
147 | boldtext:false,
148 | line:false,
149 | link:'',
150 | url:''
151 | },
152 | ]
153 |
154 |
155 |
156 | export {RevenueProjectsData,BlogCardData,DailyActivitiesData}
--------------------------------------------------------------------------------
/package/src/layouts/full/Topbar.vue:
--------------------------------------------------------------------------------
1 |
34 |
35 |
36 |
37 |
55 |
56 |
Checkout Pro Version
57 |
58 |
59 |
60 |
61 | Live Preview
62 |
63 |
64 |
65 |
66 |
67 |
69 |
70 |
71 |
72 |
77 |
78 |
79 |
80 |
81 |
82 |
84 |
--------------------------------------------------------------------------------
/landingpage/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
2 |
3 | :root {
4 | --bs-font-sans-serif: "Manrope",
5 | sans-serif;
6 | --bs-primary: #635BFF;
7 | --bs-secondary: #6c757d;
8 | --bs-danger: #FA896B;
9 | --bs-body-font-size: 0.875rem;
10 | --bs-body-font-weight: 400;
11 | --bs-body-line-height: 1.5;
12 | --bs-body-color: #5A6A85;
13 | --bs-body-bg: #fff;
14 | --bs-border-color: #ebf1f6;
15 | --bs-heading-color: #2A3547;
16 | --bs-border-radius: 7px;
17 | --bs-gutter-x: 24px;
18 | --bs-btn-font-size: 0.875rem;
19 | --bs-card-spacer-y: 30px;
20 | --bs-card-spacer-x: 30px;
21 | --bs-card-border-width: 0px;
22 | --bs-success-rgb: 19,222,185;
23 | --bs-primary-rgb: 99,91,255;
24 | --bs-light-rgb: 246,249,252;
25 | --bs-dark-rgb: 42,53,71;
26 | }
27 |
28 | .btn {
29 | --bs-btn-padding-x: 16px;
30 | --bs-btn-padding-y: 7px;
31 | --bs-btn-font-size: 0.875rem;
32 | }
33 |
34 | .btn-primary {
35 | --bs-btn-bg: var(--bs-primary);
36 | --bs-btn-border-color: var(--bs-primary);
37 | --bs-btn-hover-bg: var(--bs-primary);
38 | --bs-btn-hover-border-color: var(--bs-primary);
39 | --bs-btn-focus-shadow-rgb: 49,132,253;
40 | --bs-btn-active-bg: var(--bs-primary);
41 | --bs-btn-active-border-color: var(--bs-primary);
42 | --bs-btn-disabled-bg: var(--bs-primary);
43 | --bs-btn-disabled-border-color: var(--bs-primary);
44 | }
45 |
46 | .btn-secondary {
47 | --bs-btn-bg: var(--bs-secondary);
48 | --bs-btn-border-color: var(--bs-secondary);
49 | --bs-btn-hover-bg: var(--bs-secondary);
50 | --bs-btn-hover-border-color: var(--bs-secondary);
51 | --bs-btn-focus-shadow-rgb: 49,132,253;
52 | --bs-btn-active-bg: var(--bs-secondary);
53 | --bs-btn-active-border-color: var(--bs-secondary);
54 | --bs-btn-disabled-bg: var(--bs-secondary);
55 | --bs-btn-disabled-border-color: var(--bs-secondary);
56 | }
57 |
58 | .btn-danger {
59 | --bs-btn-bg: var(--bs-danger);
60 | --bs-btn-border-color: var(--bs-danger);
61 | --bs-btn-hover-bg: var(--bs-danger);
62 | --bs-btn-hover-border-color: var(--bs-danger);
63 | --bs-btn-focus-shadow-rgb: 49,132,253;
64 | --bs-btn-active-bg: var(--bs-danger);
65 | --bs-btn-active-border-color: var(--bs-danger);
66 | --bs-btn-disabled-bg: var(--bs-danger);
67 | --bs-btn-disabled-border-color: var(--bs-danger);
68 | }
69 |
70 | .btn-outline-primary {
71 | --bs-btn-color: var(--bs-primary);
72 | --bs-btn-border-color: var(--bs-primary);
73 | --bs-btn-hover-color: #fff;
74 | --bs-btn-hover-bg: var(--bs-primary);
75 | --bs-btn-hover-border-color: var(--bs-primary);
76 | --bs-btn-focus-shadow-rgb: 13,110,253;
77 | --bs-btn-active-color: #fff;
78 | --bs-btn-active-bg: var(--bs-primary);
79 | --bs-btn-active-border-color: var(--bs-primary);
80 | --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
81 | --bs-btn-disabled-color: var(--bs-primary);
82 | --bs-btn-disabled-bg: transparent;
83 | --bs-btn-disabled-border-color: var(--bs-primary);
84 | }
85 |
86 | /* background */
87 | .bg-light {
88 | background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important;
89 | }
90 |
91 | /* text colors */
92 | .text-success {
93 | color: rgba(var(--bs-success-rgb),var(--bs-text-opacity))!important;
94 | }
95 |
96 | .text-primary {
97 | color: rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important;
98 | }
99 |
100 | .text-dark {
101 | color: rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important;
102 | }
103 |
104 | .text-muted {
105 | color: #5a6a85!important;
106 | }
107 |
108 | /* card */
109 | .card {
110 | --bs-card-spacer-y: 30px;
111 | --bs-card-spacer-x: 30px;
112 | --bs-card-title-color: #2A3547;
113 | --bs-card-subtitle-color: #2A3547;
114 | --bs-card-border-width: 0px;
115 | --bs-card-box-shadow: rgba(145, 158, 171, 0.2) 0px 0px 2px 0px,rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
116 | --bs-card-inner-border-radius: 7px;
117 | }
118 |
119 | .container {
120 | max-width: 1150px;
121 | }
122 |
123 | /* custom */
124 | .spacer {
125 | padding: 80px 0;
126 | }
127 |
128 | .pro-demo {
129 | -webkit-box-shadow: 0px 4px 45px rgb(0 0 0 / 9%);
130 | box-shadow: 0px 4px 45px rgb(0 0 0 / 9%);
131 | }
132 |
133 | .line-h33 {
134 | line-height: 33px;
135 | }
136 |
137 | .icon-circle {
138 | background-color: rgb(var( --bs-dark-rgb));
139 | display: inline-block;
140 | width: 15px;
141 | height: 15px;
142 | border-radius: 100%;
143 | position: relative;
144 | }
145 |
146 | .icon-circle.circle-primary {
147 | background-color: rgb(var( --bs-primary-rgb)) !important;
148 | }
149 |
150 | .icon-circle.circle-muted {
151 | background-color: var(--bs-body-color) !important;
152 | opacity: 0.8;
153 | }
154 |
155 | .icon-circle:before {
156 | content: '';
157 | position: absolute;
158 | left: 0;
159 | right: 0;
160 | width: 5px;
161 | height: 5px;
162 | border-radius: 100%;
163 | background-color: #fff;
164 | display: block;
165 | margin: 0 auto;
166 | top: 5px;
167 | }
--------------------------------------------------------------------------------
/package/src/scss/_variables.scss:
--------------------------------------------------------------------------------
1 | @use 'sass:math';
2 | @use 'sass:map';
3 | @use 'sass:meta';
4 | @use 'vuetify/lib/styles/tools/functions' as *;
5 |
6 | // Custom Variables
7 | // colors
8 | $white: #fff !default;
9 |
10 | // cards
11 | $card-title-size: 18px !default;
12 | $body-font-family: "Manrope", sans-serif !default;
13 | $border-radius-root: 8px;
14 | $btn-letter-spacing: 0 !default;
15 | // Global Shadowsss
16 | $box-shadow: 0px 2px 4px -1px #afb6c933;
17 |
18 | // Global Radius as per breakeven point
19 |
20 | @forward 'vuetify/settings' with (
21 | $color-pack: false !default,
22 | // Global font size and border radius
23 | $font-size-root: 1rem,
24 | $border-radius-root: $border-radius-root,
25 | $body-font-family: $body-font-family,
26 | $heading-font-family: $body-font-family !default,
27 | // 👉 Typography
28 | $typography:
29 | (
30 | //36px
31 | 'h1': (
32 | 'size': 2.25rem,
33 | 'weight': 600,
34 | 'line-height': 3.75rem,
35 | 'font-family': inherit
36 | ),
37 | //30px
38 | 'h2': (
39 | 'size': 1.875rem,
40 | 'weight': 600,
41 | 'line-height': 2.25rem,
42 | 'font-family': inherit
43 | ),
44 | //22px
45 | 'h3': (
46 | 'size': 1.375rem,
47 | 'weight': 600,
48 | 'line-height': 2rem,
49 | 'font-family': inherit
50 | ),
51 | //20px
52 | 'h4': (
53 | 'size': 1.25rem,
54 | 'weight': 600,
55 | 'line-height': 1.6rem,
56 | 'font-family': inherit
57 | ),
58 | //18px
59 | 'h5': (
60 | 'size': 1.125rem,
61 | 'weight': 600,
62 | 'line-height': 1.6rem,
63 | 'font-family': inherit
64 | ),
65 | //16px
66 | 'h6': (
67 | 'size': 1rem,
68 | 'weight': 600,
69 | 'line-height': 1.2rem,
70 | 'font-family': inherit
71 | ),
72 | //15px
73 | 'subtitle-1': (
74 | 'size': 0.94rem,
75 | 'weight': 400,
76 | 'line-height': 1.1rem,
77 | 'font-family': inherit
78 | ),
79 | //13px
80 | 'subtitle-2': (
81 | 'size': 0.81rem,
82 | 'weight': 400,
83 | 'line-height': 1rem,
84 | 'font-family': inherit
85 | ),
86 | //14px
87 | 'body-1': (
88 | 'size': 0.875rem,
89 | 'weight': 400,
90 | 'font-family': inherit,
91 | 'letter-spacing':0rem
92 | ),
93 | //12px
94 | 'body-2': (
95 | 'size': 0.75rem,
96 | 'weight': 400,
97 | 'font-family': inherit,
98 | 'letter-spacing':0rem
99 | ),
100 | //13px
101 | 'button': (
102 | 'size': 0.81rem,
103 | 'weight': 600,
104 | 'font-family': inherit,
105 | 'text-transform': capitalize
106 | ),
107 | //14px
108 | 'caption': (
109 | 'size':0.875rem,
110 | 'weight': 400,
111 | 'font-family': inherit,
112 | 'letter-spacing':0rem
113 | ),
114 | //12px
115 | 'overline': (
116 | 'size': 0.75rem,
117 | 'weight': 400,
118 | 'font-family': inherit,
119 | 'letter-spacing':0rem
120 | )
121 | )
122 | !default,
123 | // 👉 Button
124 | $button-border-radius: 8px !default,
125 | $button-text-letter-spacing: 0 !default,
126 | $button-text-transform: capitalize,
127 | $button-elevation: (
128 | 'default': 0,
129 | 'hover': 4,
130 | 'active': 8
131 | )
132 | !default,
133 |
134 | // 👉 Tooltip
135 | $tooltip-background-color: #212121 !default,
136 | $tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
137 | $tooltip-font-size: 0.75rem !default,
138 | $tooltip-border-radius: 4px !default,
139 | $tooltip-padding: 4px 8px !default,
140 |
141 | // 👉 Rounded
142 | $rounded:
143 | (
144 | 0: 0,
145 | 'sm': $border-radius-root - 4,
146 | null: $border-radius-root,
147 | 'md': $border-radius-root + 4,
148 | 'lg': $border-radius-root * 2,
149 | 'xl': $border-radius-root + 8,
150 | 'pill': 9999px,
151 | 'circle': 50%
152 | ),
153 |
154 | // 👉 Card
155 | $card-elevation: 10 !default,
156 | $card-title-line-height: 1.6 !default,
157 | $card-text-padding: 24px !default,
158 | $card-item-padding: 30px 30px !default,
159 | $card-actions-padding: 10px 24px 24px !default,
160 | $card-subtitle-opacity: 1 !default,
161 | );
--------------------------------------------------------------------------------
/package/src/scss/layout/_sidebar.scss:
--------------------------------------------------------------------------------
1 | /*This is for the logo*/
2 | .leftSidebar {
3 | box-shadow: none !important;
4 | top: 75px !important;
5 |
6 | .logo {
7 | padding-left: 7px;
8 | }
9 |
10 | .mini-icon {
11 | display: none;
12 | }
13 |
14 | .mini-text {
15 | display: block;
16 | font-size: 12px !important;
17 | font-weight: 600 !important;
18 | letter-spacing: 1.5px !important;
19 | text-transform: uppercase !important;
20 | color:inherit
21 | }
22 |
23 | .v-list--density-default .v-list-subheader {
24 | padding-inline-start: 0 !important;
25 | }
26 |
27 |
28 | }
29 |
30 | /*This is for the Vertical sidebar*/
31 | .scrollnavbar {
32 | height: calc(100vh - 170px);
33 |
34 | .userbottom {
35 | position: fixed;
36 | bottom: 0px;
37 | width: 100%;
38 | }
39 |
40 | .smallCap {
41 | padding: 20px 0px 10px !important;
42 | font-size: 0.875rem;
43 | font-weight: 500;
44 | margin-top: 24px;
45 | color: rgb(var(--v-theme-textPrimary));
46 |
47 | &:first-child {
48 | margin-top: 0 !important;
49 | }
50 | }
51 |
52 |
53 | /*General Menu css*/
54 |
55 | .v-list-group__items {
56 | .v-list-item {
57 | min-height: 35px !important;
58 | padding-inline-start: calc(12px + var(--indent-padding) / 10) !important;
59 |
60 | .v-list-item__prepend .dot {
61 | height: 6px;
62 | width: 6px;
63 | background-color: rgb(var(--v-theme-textSecondary));
64 | border-radius: 50%;
65 | margin-inline-end: 8px !important;
66 | }
67 |
68 | .v-list-item-title {
69 | font-size: 14px !important;
70 | }
71 |
72 | &:hover {
73 | color: rgb(var(--v-theme-primary));
74 |
75 | .v-list-item__prepend .dot {
76 | background-color: rgb(var(--v-theme-primary));
77 | }
78 | }
79 |
80 | &.v-list-item--active {
81 | .v-list-item__prepend .dot {
82 | background-color: rgb(var(--v-theme-primary));
83 | }
84 | }
85 |
86 | }
87 | }
88 |
89 | .v-list-group__items .v-list-item,
90 | .v-list-item {
91 | border-radius: $border-radius-root + 4;
92 | color: rgba(var(--v-theme-textPrimary),0.8);
93 | margin: 0 0 2px;
94 |
95 | &:hover {
96 | color: rgb(var(--v-theme-primary));
97 | }
98 |
99 | .v-list-item__prepend {
100 | margin-inline-end: 8px;
101 | }
102 |
103 | .v-list-item__append {
104 | font-size: 15px;
105 |
106 | .v-icon {
107 | margin-inline-start: 13px;
108 | }
109 | }
110 |
111 | .v-list-item-title {
112 | font-size: 15px;
113 |
114 | }
115 | }
116 |
117 | /*This is for the dropdown*/
118 | .v-list {
119 | color: rgb(var(--v-theme-textSecondary));
120 |
121 | .v-list-subheader {
122 | &:first-of-type {
123 | border-top: 0;
124 | }
125 |
126 | border-top: 1px solid rgb(var(--v-theme-borderColor));
127 | }
128 |
129 |
130 | >.v-list-item.v-list-item--active,
131 | .v-list-item--active>.v-list-item__overlay {
132 | background: rgb(var(--v-theme-primary));
133 | color: white;
134 | box-shadow: 0 17px 20px -8px rgba(var(--v-theme-primary), 0.2);
135 | }
136 |
137 | >.v-list-group {
138 | position: relative;
139 |
140 | >.v-list-item--active,
141 | >.v-list-item--active:hover {
142 | background: rgb(var(--v-theme-primary));
143 | color: white;
144 | box-shadow: 0 17px 20px -8px rgba(var(--v-theme-primary), 0.2);
145 | }
146 |
147 | .v-list-group__items .v-list-item.v-list-item--active,
148 | .v-list-group__items .v-list-item.v-list-item--active>.v-list-item__overlay {
149 | background: transparent;
150 | color: rgb(var(--v-theme-primary));
151 | }
152 | }
153 | }
154 | }
155 |
156 | .v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line {
157 | padding-inline: 14px;
158 | }
159 |
160 | .v-navigation-drawer--rail {
161 |
162 | .scrollnavbar .v-list .v-list-group__items,
163 | .hide-menu {
164 | opacity: 1;
165 | }
166 |
167 |
168 | .leftPadding {
169 | margin-left: 0px;
170 | }
171 | }
172 |
173 |
174 | // scrollbar
175 | .ps__rail-y {
176 | z-index: 9;
177 | }
178 |
179 | .v-navigation-drawer {
180 | box-shadow: none !important;
181 | border-right: 0 !important;
182 | }
183 |
184 |
185 | @media screen and (max-width:1280px) {
186 | .leftSidebar {
187 | top: 0 !important;
188 | }
189 | }
190 |
191 | @media screen and (max-width:991px){
192 | .scrollnavbar {
193 | height: calc(100vh - 80px);
194 | }
195 | }
--------------------------------------------------------------------------------
/package/src/assets/images/logos/logo-adminmart.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
20 |
21 |
22 |
23 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/package/src/assets/images/logos/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
10 |
12 |
13 |
14 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/landingpage/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Matdash Free Vuejs Admin Template by Adminmart
8 |
9 |
10 |
11 |
21 |
22 |
23 |
24 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
Free Version
66 |
67 |
68 |
71 |
72 |
79 |
80 |
81 |
82 |
83 |
86 |
87 |
89 |
90 |
92 |
93 |
95 |
96 |
98 |
99 |
101 |
102 |
105 |
106 |
107 |
108 |
109 |
110 |
112 |
113 |
115 |
116 |
118 |
119 |
121 |
122 |
124 |
125 |
128 |
129 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 | Pro Version
147 |
148 |
149 |
150 |
153 |
154 |
161 |
162 |
163 |
164 |
165 |
167 |
168 |
170 |
171 |
173 |
174 |
176 |
177 |
179 |
180 |
182 |
183 |
185 |
186 |
187 |
189 |
190 |
192 |
193 |
195 |
196 |
198 |
199 |
201 |
202 |
203 |
204 |
205 |
206 |
208 |
209 |
211 |
212 |
214 |
215 |
217 |
218 |
220 |
221 |
223 |
224 |
226 |
227 |
229 |
230 |
232 |
233 |
235 |
236 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
247 |
248 |
249 | All Rights Reserved by Matdash Vuetify Admin. Designed and Developed
250 | by
251 | adminmart.com
252 |
253 |
254 |
Download most useful and comprehensive 🚀 Free Vue admin template built for developers 🛠
14 |
15 |
16 |
18 |
19 |
20 | ## 👋 Introduction
21 |
22 | **Matdash** is a free and modern **Vue.js admin dashboard template** built with **Vuetify**, **Vite**, **TypeScript**, and **ApexCharts**. Designed for developers who want speed, simplicity, and flexibility, Matdash is the perfect starting point for building **admin panels**, **SaaS dashboards**, **analytics tools**, and **internal web apps**.
23 |
24 | Featuring a clean UI, responsive design, and a modular architecture, Matdash helps you move fast without reinventing the wheel. It comes with pre-built pages, reusable components, and beautiful charts powered by **Vue-ApexCharts**. With **Vue Tabler Icons** and **Sass** support, customization is smooth and straightforward.
25 |
26 | Matdash is fully customizable, production-ready, and optimized for building high-performance Vue.js applications with a modern developer experience.
27 |
28 |
29 |
30 | ### 🔑 Key Features
31 |
32 | - **Modern Tech Stack**
33 | Built with **Vue**, **TypeScript**, **Vite**, and **Vuetify** for fast performance, scalability, and a smooth development experience.
34 |
35 | - **Responsive Design**
36 | Fully mobile-friendly layout powered by Vuetify’s flexible grid system for a seamless user experience on all screen sizes.
37 |
38 | - **Reusable UI Components**
39 | Includes a library of modular and customizable Vuetify components to speed up development and ensure consistency.
40 |
41 | - **Pre-designed Pages**
42 | Comes with essential pages like dashboards, login, user profile, settings, and error pages to help you get started quickly.
43 |
44 | - **Interactive Data Visualizations**
45 | Integrated with **Vue-ApexCharts** for clean, dynamic, and interactive charting with minimal configuration.
46 |
47 | - **Elegant Icons**
48 | Uses **Vue Tabler Icons** for modern, lightweight SVG icons that enhance the visual appeal of your UI.
49 |
50 | - **Developer Friendly**
51 | Clean, modular codebase using **Sass** and **TypeScript**, focused on readability, flexibility, and maintainability.
52 |
53 | ---
54 |
55 |
56 | ## 🛠️ Notable Libraries and Tools
57 |
58 | | **Library / Tool** | **Description** |
59 | |--------------------------|---------------------------------------------------------------------------------|
60 | | **Vue.js** | A progressive JavaScript framework for building fast and flexible user interfaces. |
61 | | **TypeScript** | A typed superset of JavaScript that enhances code quality, maintainability, and tooling support. |
62 | | **Vuetify** | A powerful Vue UI framework based on Material Design, offering a wide range of responsive and accessible components. |
63 | | **Vite** | A lightning-fast frontend build tool and development server that improves performance and DX. |
64 | | **Sass** | A CSS preprocessor that adds powerful features like variables, mixins, and nesting for cleaner, scalable stylesheets. |
65 | | **Vue-ApexCharts** | A Vue wrapper for ApexCharts, enabling rich, interactive data visualizations with minimal setup. |
66 | | **Vue Tabler Icons** | A Vue-based icon library providing sleek, modern SVG icons inspired by Tabler for elegant UI integration. |
67 |
68 | ---
69 |
70 | ## 💾 Installation Guide
71 |
72 | Welcome to the **Matdash Free Vue js Admin Dashboard**! This guide will walk you through the installation and setup process, so you can get started with building your custom admin dashboard in no time.
73 |
74 | ### 📝 Steps to Install
75 |
76 | #### 1. **Clone the Repository**
77 |
78 | The easiest way to get started is by cloning the repository or download the zip file. You can do this with the following command:
79 |
80 | ```bash
81 | git clone https://github.com/adminmart/Matdash-vuetify-free.git
82 | ```
83 |
84 | #### 2. **Install Dependencies**
85 |
86 | Install the relative Dependencies of the template. You can do this with the following command:
87 |
88 | ```bash
89 | npm install
90 | ```
91 |
92 | #### 3. **Start the Development Server**
93 |
94 | Once the dependencies are installed, you can start a local development server to preview the template:
95 |
96 | ```bash
97 | npm run dev
98 | ```
99 |
100 | ---
101 |
102 | ## 📝 Documentation
103 |
104 | Welcome to the **Matdash Free Vue js Admin Dashboard** documentation! Whether you're just getting started or looking to explore advanced features, this guide will help you set up and customize your project with ease.
105 |
106 | 👉 **[Click here to read the full documentation](https://adminmart.github.io/free-documentation/vue/matdash/index.html?ref=56)**
107 |
108 |
109 | ---
110 |
111 |
112 | ## 💎 Pro Version
113 |
114 | The Pro Version of the **Matdash Vue js Admin Dashboard** comes packed with essential features—ideal for personal projects, prototypes, or small-scale applications. When you're ready to level up, the Pro Version unlocks a powerful suite of extras, including multiple theme options, advanced UI widgets, real-time notifications, priority support, and a host of other premium tools designed to supercharge your development workflow.
115 |
116 |
124 |
125 | [](https://adminmart.com/product/matdash-vuejs-admin-dashboard/?ref=56)
126 |
127 | ---
128 |
129 | ## ⚖️ Free vs Pro Version Comparison
130 |
131 | The **Free Version** of the **MatDash Tailwind Next.js Admin Template** provides a solid set of features, perfect for personal projects or small applications. However, for businesses or developers looking to unlock more advanced functionality, the **Pro Version** offers exciting features like **multiple themes**, **advanced widgets**, **real-time notifications**, **priority support**, and much more.
132 |
133 |
134 | #### Check out the comparison below to see the key differences between the two versions:
135 |
136 | | **Feature** | **Free Version** | **Pro Version** |
137 | |-----------------------------------|----------------------------------------|-----------------------------------------------------|
138 | | **Demo** | [](https://matdash-vue3-free.netlify.app/?ref=56) | [](https://matdash-vuetify-main.netlify.app/dashboards/dashboard1?ref=56) |
139 | | **Download** | [](https://adminmart.com/product/matdash-free-vuejs-admin-dashboard/?ref=56) | [](https://adminmart.com/product/matdash-vuejs-admin-dashboard/?ref=56) |
140 | | **Responsive Design** | ✅ Yes | ✅ Yes |
141 | | **Pre-designed Pages** | ✅ Basic Pages | ✅ Advanced Pages (more layouts & options) |
142 | | **Widgets** | ✅ Basic Widgets | ✅ Advanced Widgets (e.g., weather, charts, maps) |
143 | | **Themes** | ✅ Default Theme | ✅ Multiple Themes, Custom Color Skins, and Dark Modes |
144 | | **Support** | ✅ Community Support | ✅ Priority Support with Direct Contact |
145 | | **Additional Components** | ❌ Limited | ✅ Additional Components (Forms, Buttons, More UI Elements) |
146 | | **Advanced Data Visualization** | ❌ Basic Charts | ✅ Advanced Data Visualizations (graphs, complex charts) |
147 | | **Multi-Language Support** | ❌ Not available | ✅ Built-in support for multiple languages |
148 | | **User Permissions & Roles** | ❌ No | ✅ User roles and permissions management |
149 | | **Real-time Notifications** | ❌ Not available | ✅ Real-time notifications for alerts & updates |
150 | | **Advanced Analytics & Reporting**| ❌ Basic reports | ✅ Advanced analytics with custom reports and filters|
151 |
152 |
153 | ---
154 |
155 | ## 🗂️ Other versions
156 |
157 |
158 |
159 |
160 |
161 | Bootstrap
163 |
164 |
165 | Next
167 |
168 |
169 | React
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
180 |
181 |
182 |
183 |
185 |
186 |
187 |
188 |
190 |
191 |
192 |
193 |
194 |
195 |
196 | Angular
198 |
199 |
200 | Nuxt
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
211 |
212 |
213 |
214 |
216 |
217 |
218 |
219 |
220 |
221 | ---
222 |
223 | ## 🤝 Contributing
224 |
225 | We welcome contributions from the community to help improve the **Matdash Free Vue js Admin Dashboard**. Whether it’s fixing bugs, adding new features, improving documentation, or sharing ideas — your input is appreciated!
226 |
227 | ### 🛠️ How to Contribute
228 |
229 | Follow these simple steps to start contributing:
230 |
231 | 1. **Fork the Repository**
232 | Click the **Fork** button on the top-right corner of this repo to create your own copy.
233 |
234 | 2. **Clone Your Fork**
235 | Use the command below to clone your forked repository:
236 | ```bash
237 | git clone https://github.com/adminmart/Matdash-vuetify-free.git
238 |
239 | 3. **Create a New Branch**
240 | Create a new branch to work on your feature or fix. This keeps your changes separate from the main branch:
241 | ```bash
242 | git checkout -b feature/your-feature-name
243 |
244 | 4. **Commit and Push Changes**
245 | After making your changes, commit them with a meaningful message and push your branch to your fork:
246 | ```bash
247 | git commit -am "Add: Description of changes made"
248 | git push origin feature/your-feature-name
249 |
250 | ---
251 |
252 | ## 🧭 Useful Links
253 | - Bootstrap Templates & Themes from AdminMart
254 | - React Templates from AdminMart
255 | - NextJs Templates from AdminMart
256 | - Vue Templates from AdminMart
257 | - Tailwind Templates from AdminMart
258 | - Angular Templates from AdminMart
259 | - Material UI Templates from AdminMart
260 | - Vuetify Themes from AdminMart
261 | - Nuxt Js Templates from AdminMart
262 |
263 | ---
264 |
265 | ## 🌐 We are social
266 |
267 | [](https://github.com/adminmart) [](https://www.facebook.com/official.adminmart) [](https://www.instagram.com/adminmart.official/) [](https://www.youtube.com/@adminmart-official) [](https://www.linkedin.com/in/admin-mart-5ba892249/)
268 |
269 | [](https://opensource.org/licenses/MIT)
270 |
--------------------------------------------------------------------------------
5 | 
11 | 
14 | 
71 | 
153 | 
4 | 
17 | 
119 | 
122 | 
179 | 
184 | 
189 | 
210 | 
215 |