├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── logo.png
    │   └── logo.svg
    ├── components
    │   ├── HelloWorld.vue
    │   ├── SideBar.vue
    │   └── SideBarRight.vue
    ├── main.js
    ├── plugins
    │   └── vuetify.js
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    └── views
    │   ├── About.vue
    │   └── Home.vue
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # sprint
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sprint",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "echarts": "^5.2.2",
13 |     "vue": "^2.6.11",
14 |     "vue-echarts": "^6.0.0",
15 |     "vue-router": "^3.2.0",
16 |     "vuetify": "^2.4.0",
17 |     "vuex": "^3.4.0"
18 |   },
19 |   "devDependencies": {
20 |     "@fortawesome/fontawesome-free": "^5.15.4",
21 |     "@vue/cli-plugin-babel": "~4.5.0",
22 |     "@vue/cli-plugin-eslint": "~4.5.0",
23 |     "@vue/cli-plugin-router": "~4.5.0",
24 |     "@vue/cli-plugin-vuex": "~4.5.0",
25 |     "@vue/cli-service": "~4.5.0",
26 |     "@vue/composition-api": "^1.4.3",
27 |     "babel-eslint": "^10.1.0",
28 |     "eslint": "^6.7.2",
29 |     "eslint-plugin-vue": "^6.2.2",
30 |     "material-design-icons-iconfont": "^6.1.1",
31 |     "sass": "~1.32.0",
32 |     "sass-loader": "^10.0.0",
33 |     "vue-cli-plugin-vuetify": "~2.4.5",
34 |     "vue-template-compiler": "^2.6.11",
35 |     "vuetify-loader": "^1.7.0"
36 |   },
37 |   "eslintConfig": {
38 |     "root": true,
39 |     "env": {
40 |       "node": true
41 |     },
42 |     "extends": [
43 |       "plugin:vue/essential",
44 |       "eslint:recommended"
45 |     ],
46 |     "parserOptions": {
47 |       "parser": "babel-eslint"
48 |     },
49 |     "rules": {}
50 |   },
51 |   "browserslist": [
52 |     "> 1%",
53 |     "last 2 versions",
54 |     "not dead"
55 |   ]
56 | }
57 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/Vuejs-Vuetify-UI-Design-Sprint-Report-System/9ddcea812e8e87f71e4ac530f91cba33e699b553/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <v-main>
 4 |       <router-view/>
 5 |     </v-main>
 6 |   </v-app>
 7 | </template>
 8 | 
 9 | <script>
10 | 
11 | export default {
12 |   name: 'App',
13 | 
14 |   data: () => ({
15 |     //
16 |   }),
17 | };
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/Vuejs-Vuetify-UI-Design-Sprint-Report-System/9ddcea812e8e87f71e4ac530f91cba33e699b553/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container>
  3 |     <v-row class="text-center">
  4 |       <v-col cols="12">
  5 |         <v-img
  6 |           :src="require('../assets/logo.svg')"
  7 |           class="my-3"
  8 |           contain
  9 |           height="200"
 10 |         />
 11 |       </v-col>
 12 | 
 13 |       <v-col class="mb-4">
 14 |         <h1 class="display-2 font-weight-bold mb-3">
 15 |           Welcome to Vuetify
 16 |         </h1>
 17 | 
 18 |         <p class="subheading font-weight-regular">
 19 |           For help and collaboration with other Vuetify developers,
 20 |           <br>please join our online
 21 |           <a
 22 |             href="https://community.vuetifyjs.com"
 23 |             target="_blank"
 24 |           >Discord Community</a>
 25 |         </p>
 26 |       </v-col>
 27 | 
 28 |       <v-col
 29 |         class="mb-5"
 30 |         cols="12"
 31 |       >
 32 |         <h2 class="headline font-weight-bold mb-3">
 33 |           What's next?
 34 |         </h2>
 35 | 
 36 |         <v-row justify="center">
 37 |           <a
 38 |             v-for="(next, i) in whatsNext"
 39 |             :key="i"
 40 |             :href="next.href"
 41 |             class="subheading mx-3"
 42 |             target="_blank"
 43 |           >
 44 |             {{ next.text }}
 45 |           </a>
 46 |         </v-row>
 47 |       </v-col>
 48 | 
 49 |       <v-col
 50 |         class="mb-5"
 51 |         cols="12"
 52 |       >
 53 |         <h2 class="headline font-weight-bold mb-3">
 54 |           Important Links
 55 |         </h2>
 56 | 
 57 |         <v-row justify="center">
 58 |           <a
 59 |             v-for="(link, i) in importantLinks"
 60 |             :key="i"
 61 |             :href="link.href"
 62 |             class="subheading mx-3"
 63 |             target="_blank"
 64 |           >
 65 |             {{ link.text }}
 66 |           </a>
 67 |         </v-row>
 68 |       </v-col>
 69 | 
 70 |       <v-col
 71 |         class="mb-5"
 72 |         cols="12"
 73 |       >
 74 |         <h2 class="headline font-weight-bold mb-3">
 75 |           Ecosystem
 76 |         </h2>
 77 | 
 78 |         <v-row justify="center">
 79 |           <a
 80 |             v-for="(eco, i) in ecosystem"
 81 |             :key="i"
 82 |             :href="eco.href"
 83 |             class="subheading mx-3"
 84 |             target="_blank"
 85 |           >
 86 |             {{ eco.text }}
 87 |           </a>
 88 |         </v-row>
 89 |       </v-col>
 90 |     </v-row>
 91 |   </v-container>
 92 | </template>
 93 | 
 94 | <script>
 95 |   export default {
 96 |     name: 'HelloWorld',
 97 | 
 98 |     data: () => ({
 99 |       ecosystem: [
100 |         {
101 |           text: 'vuetify-loader',
102 |           href: 'https://github.com/vuetifyjs/vuetify-loader',
103 |         },
104 |         {
105 |           text: 'github',
106 |           href: 'https://github.com/vuetifyjs/vuetify',
107 |         },
108 |         {
109 |           text: 'awesome-vuetify',
110 |           href: 'https://github.com/vuetifyjs/awesome-vuetify',
111 |         },
112 |       ],
113 |       importantLinks: [
114 |         {
115 |           text: 'Documentation',
116 |           href: 'https://vuetifyjs.com',
117 |         },
118 |         {
119 |           text: 'Chat',
120 |           href: 'https://community.vuetifyjs.com',
121 |         },
122 |         {
123 |           text: 'Made with Vuetify',
124 |           href: 'https://madewithvuejs.com/vuetify',
125 |         },
126 |         {
127 |           text: 'Twitter',
128 |           href: 'https://twitter.com/vuetifyjs',
129 |         },
130 |         {
131 |           text: 'Articles',
132 |           href: 'https://medium.com/vuetify',
133 |         },
134 |       ],
135 |       whatsNext: [
136 |         {
137 |           text: 'Explore components',
138 |           href: 'https://vuetifyjs.com/components/api-explorer',
139 |         },
140 |         {
141 |           text: 'Select a layout',
142 |           href: 'https://vuetifyjs.com/getting-started/pre-made-layouts',
143 |         },
144 |         {
145 |           text: 'Frequently Asked Questions',
146 |           href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
147 |         },
148 |       ],
149 |     }),
150 |   }
151 | </script>
152 | 


--------------------------------------------------------------------------------
/src/components/SideBar.vue:
--------------------------------------------------------------------------------
 1 | <template> 
 2 | 
 3 |       <v-navigation-drawer
 4 |         v-model="drawer"
 5 |         app
 6 |         color="white"
 7 |        
 8 |         mini-variant
 9 |         mini-variant-width="80"
10 |       >
11 |         <v-avatar
12 |           class="d-block text-center mx-auto mt-4"
13 |           color=""
14 |           size="40"
15 |         >
16 |         <v-icon color="#49D9A0" large>fab fa-atlassian</v-icon>
17 |         </v-avatar>
18 | 
19 |         <v-divider class="mx-3 my-5"></v-divider>
20 |          
21 |        <v-list flat  class="mt-5" >
22 |             <v-list-item-group v-model="selectedItem"  >
23 |               
24 |                 <v-list-item v-for="(item, i) in items" :key="i" active-class="border" class=""
25 |                 :ripple="false"
26 |                 >
27 |                     <v-list-item-icon >    
28 |                         <v-icon v-text="item.icon"></v-icon>
29 |                     </v-list-item-icon>
30 |                     </v-list-item> 
31 |             </v-list-item-group>
32 |         </v-list>
33 |         <div style="position: absolute; bottom: 20px;
34 |         margin-left: auto; margin-right: auto; left:0; right: 0; text-align: center;">
35 |                 <v-btn icon :ripple="false">
36 |          <v-badge bordered overlap color="red" dot>
37 |         
38 |         <v-icon>far fa-bell</v-icon>
39 |      
40 |          </v-badge>
41 |           </v-btn><br>
42 |            <v-avatar size="30"  >
43 |           <v-img src="https://cdn.vuetifyjs.com/images/lists/2.jpg"></v-img>
44 |         </v-avatar>
45 | 
46 |         </div>
47 |       </v-navigation-drawer>
48 | 
49 |     
50 | </template>
51 | 
52 | <script>
53 |   export default {
54 |     data: () => ({ 
55 |          selectedItem: 0,
56 |         drawer: null,
57 |         items: [
58 |             {icon: 'fas fa-plus'},
59 |             {icon: 'fas fa-th-large'},
60 |             {icon: 'fas fa-align-center'},
61 |             {icon: 'fab fa-gitter'},
62 |             {icon: 'fas fa-chart-line'},
63 |         ],
64 |      }),
65 |   }
66 | </script>
67 | <style>
68 | .border  {
69 |    margin-left: 12px;
70 |    margin-right: 12px;
71 |     background: #49D9A0 ;
72 |     border-radius: 50%;
73 |     text-decoration: none;
74 |     
75 | }
76 | .v-list-item-group .v-list-item--active {
77 |     color: white !important;
78 | }
79 | </style>


--------------------------------------------------------------------------------
/src/components/SideBarRight.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-navigation-drawer app color="white" right width="290">
  3 |       <v-toolbar color="rgba(0,0,0,0)" flat>
  4 |           <v-toolbar-title>Epics</v-toolbar-title>
  5 |           <v-spacer></v-spacer>
  6 |           <v-btn rounded small>
  7 |               See All
  8 |           </v-btn>
  9 |       </v-toolbar>
 10 |       <v-list subheader two-line class="mt-n4">
 11 |           <v-list-item v-for="file in files" :key="file.title">
 12 |               <v-list-item-avatar>
 13 |                   <v-icon :class="file.color" dark v-text="file.icon" small></v-icon>
 14 |               </v-list-item-avatar>
 15 |               <v-list-item-content>
 16 |                   <v-list-item-title v-text="file.title"></v-list-item-title>
 17 |                   <v-list-item-subtitle v-text="file.subtitle"></v-list-item-subtitle>
 18 |               </v-list-item-content>
 19 |               <v-list-item-action>
 20 |                   <v-btn icon>
 21 |                       <v-icon color="grey lighten-1" small>fas fa-ellipsis-h</v-icon>
 22 |                   </v-btn>
 23 |               </v-list-item-action>
 24 |           </v-list-item>
 25 |       </v-list>
 26 |       <v-toolbar color="rgba(0,0,0,0)" flat class="mt-n6">
 27 |           <v-toolbar-title>Project statistic</v-toolbar-title>
 28 |       </v-toolbar>
 29 |      <v-card class=" mx-2 rounded-l-xl pb-1" flat color="#EEEEEE">
 30 |               <v-row>
 31 |                 <v-col cols="12" sm="5">
 32 |                   <v-list-item two-line class="mt-n4">
 33 |                     <v-list-item-content>
 34 |                       <v-list-item-title class="  ">
 35 |                         Project
 36 |                       </v-list-item-title>
 37 |                       <v-list-item-subtitle class="">progress</v-list-item-subtitle>
 38 |                     </v-list-item-content>
 39 |                   </v-list-item>
 40 |                 </v-col>
 41 |                  <v-col cols="12" sm="4">
 42 |                   <v-progress-circular
 43 |                     
 44 |                     :size="50"
 45 |                     :width="3"
 46 |                     :value="75"
 47 |                     color="teal"
 48 |                     class="ml-n5 mt-n1 "
 49 |                   >
 50 |                     75
 51 |                   </v-progress-circular>
 52 |                 </v-col>
 53 |                 <v-col cols="12" sm="3" class="mt-2">
 54 |                   <span class=" ml-n8">percent</span>
 55 |                 </v-col>
 56 |               </v-row>
 57 |             </v-card>
 58 |             <v-card class=" mx-2 rounded-l-xl pb-1 mt-5" flat color="#EEEEEE">
 59 |               <v-row>
 60 |                 <v-col cols="12" sm="5">
 61 |                   <v-list-item two-line class="mt-n4">
 62 |                     <v-list-item-content>
 63 |                       <v-list-item-title class="  ">
 64 |                         Business
 65 |                       </v-list-item-title>
 66 |                       <v-list-item-subtitle class="">goals</v-list-item-subtitle>
 67 |                     </v-list-item-content>
 68 |                   </v-list-item>
 69 |                 </v-col>
 70 |                  <v-col cols="12" sm="4">
 71 |                   <v-progress-circular
 72 |                     
 73 |                     :size="50"
 74 |                     :width="3"
 75 |                     :value="42"
 76 |                     color="teal"
 77 |                     class="ml-n5 mt-n1 "
 78 |                   >
 79 |                     42
 80 |                   </v-progress-circular>
 81 |                 </v-col>
 82 |                 <v-col cols="12" sm="3" class="mt-2">
 83 |                   <span class=" ml-n8">percent</span>
 84 |                 </v-col>
 85 |               </v-row>
 86 |             </v-card>
 87 |             <v-card class=" mx-2 rounded-l-xl pb-1 mt-5" flat color="#EEEEEE">
 88 |               <v-row>
 89 |                 <v-col cols="12" sm="5">
 90 |                   <v-list-item two-line class="mt-n4">
 91 |                     <v-list-item-content>
 92 |                       <v-list-item-title class="  ">
 93 |                         Budget
 94 |                       </v-list-item-title>
 95 |                       <v-list-item-subtitle class="">used</v-list-item-subtitle>
 96 |                     </v-list-item-content>
 97 |                   </v-list-item>
 98 |                 </v-col>
 99 |                  <v-col cols="12" sm="4">
100 |                   <v-progress-circular
101 |                     
102 |                     :size="50"
103 |                     :width="3"
104 |                     :value="42"
105 |                     color="teal"
106 |                     class="ml-n5 mt-n1 "
107 |                   >
108 |                     42
109 |                   </v-progress-circular>
110 |                 </v-col>
111 |                 <v-col cols="12" sm="3" class="mt-2">
112 |                   <span class=" ml-n8">percent</span>
113 |                 </v-col>
114 |               </v-row>
115 |             </v-card>
116 |             <div class="mt-2 mx-2">
117 |                 <v-btn rounded small block>
118 |                     Project Details
119 |                 </v-btn>
120 |             </div>
121 |   </v-navigation-drawer>
122 | </template>
123 | 
124 | <script>
125 | export default {
126 | data: ()=> ({
127 |     files: [
128 |          {
129 |           color: 'green',
130 |           icon: 'fas fa-mobile',
131 |           subtitle: 'Design',
132 |           title: 'Mobile Onboarding',
133 |         },
134 |         {
135 |           color: 'red',
136 |           icon: 'fas fa-address-card',
137 |           subtitle: 'Developpment',
138 |           title: 'Adding Item',
139 |         },
140 |         {
141 |           color: 'orange',
142 |           icon: 'fas fa-user-shield',
143 |           subtitle: 'Developpment',
144 |           title: 'Admin Panel',
145 |         },
146 |          {
147 |           color: 'purple',
148 |           icon: 'fas fa-drafting-compass',
149 |           subtitle: 'Design & Developpment',
150 |           title: 'Mobile MVP',
151 |         },
152 |          {
153 |           color: 'blue',
154 |           icon: 'fas fa-file-code',
155 |           subtitle: 'Research',
156 |           title: 'QR Scann',
157 |         },
158 |     ]
159 | })
160 | }
161 | </script>
162 | 
163 | <style>
164 | 
165 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | import vuetify from './plugins/vuetify'
 6 | 
 7 | Vue.config.productionTip = false
 8 | 
 9 | new Vue({
10 |   router,
11 |   store,
12 |   vuetify,
13 |   render: h => h(App)
14 | }).$mount('#app')
15 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
 1 | import '@fortawesome/fontawesome-free/css/all.css'
 2 | import 'material-design-icons-iconfont/dist/material-design-icons.css'
 3 | import Vue from 'vue';
 4 | import Vuetify from 'vuetify/lib/framework';
 5 | import "echarts"
 6 | 
 7 | Vue.use(Vuetify);
 8 | 
 9 | export default new Vuetify({
10 |     icons: {
11 |         iconfont: 'fa' || 'md'
12 |     },
13 |     theme: {
14 |         themes:{
15 |             dark: {
16 |                 background: '#EEEEEE'
17 |             }
18 |         }
19 |     }
20 | 
21 | });
22 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import Home from '../views/Home.vue'
 4 | 
 5 | Vue.use(VueRouter)
 6 | 
 7 | const routes = [
 8 |   {
 9 |     path: '/',
10 |     name: 'Home',
11 |     component: Home
12 |   },
13 |   {
14 |     path: '/about',
15 |     name: 'About',
16 |     // route level code-splitting
17 |     // this generates a separate chunk (about.[hash].js) for this route
18 |     // which is lazy-loaded when the route is visited.
19 |     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
20 |   }
21 | ]
22 | 
23 | const router = new VueRouter({
24 |   mode: 'history',
25 |   base: process.env.BASE_URL,
26 |   routes
27 | })
28 | 
29 | export default router
30 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 |   },
 9 |   mutations: {
10 |   },
11 |   actions: {
12 |   },
13 |   modules: {
14 |   }
15 | })
16 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <v-app id="inspire" :style="{background: $vuetify.theme.themes.dark.background}" >
  3 |   <SideBar />
  4 |   <SideBarRight />
  5 |   <v-container>
  6 |    <v-toolbar color="rgba(0,0,0,0)" flat class="mt-n4">
  7 |       <v-btn-toggle v-model="toggle_exclusive" tile group color="#49D9A0" >
  8 |         <v-btn text>
  9 |           <v-icon>fas fa-arrow-left</v-icon>
 10 |         </v-btn>
 11 |         <v-btn text>
 12 |           <v-icon>fas fa-arrow-right</v-icon>
 13 |         </v-btn>
 14 |       </v-btn-toggle>
 15 |       <v-spacer></v-spacer>
 16 |       <v-btn color="#49D9A0" rounded dark>
 17 |           finish sprint
 18 |       </v-btn>
 19 |    </v-toolbar>
 20 |    <v-toolbar color="rgba(0,0,0,0)" flat class="mt-n5">
 21 |       <v-toolbar-title>Sprint overview</v-toolbar-title>
 22 |       <v-btn color="#49D9A0" text  class="ml-5">
 23 |           last sprint
 24 |       </v-btn>
 25 |    </v-toolbar>
 26 |    <v-item-group mandatory class="mt-n4">
 27 |     <v-container>
 28 |       <v-row justify="center" class="space">
 29 |         <v-col
 30 |           cols="12"
 31 |           md="2"
 32 |         >
 33 |           <v-item v-slot="{ active, toggle }" > 
 34 |            <v-card
 35 |               :color="active ? '#49D9A0' : 'white'"
 36 |               class="d-flex align-center rounded-xl"
 37 |               dark
 38 |               height="200"
 39 |               @click="toggle"
 40 |               
 41 |             >
 42 |               <v-row>
 43 |                 <v-col cols="12" sm="12">
 44 |                   <v-list-item three-line  class="mt-10">
 45 |                     <v-list-item-content>
 46 |                       <div class="mb-4">
 47 |                        
 48 |                           <v-icon  x-large :color="active ? 'white' : '#49D9A0'">fas fa-chart-bar</v-icon>
 49 |                        
 50 |                       </div>
 51 |                       <v-list-item-subtitle :class="active ? 'white--text' : 'black--text'">Team velocity</v-list-item-subtitle>
 52 |                       <v-list-item-title class="headline mb-1" :class="active ? 'white--text' : 'black--text'">
 53 |                         <strong>52</strong>
 54 |                       </v-list-item-title>
 55 |                       
 56 |                     </v-list-item-content>
 57 |                   </v-list-item>
 58 |                 </v-col>
 59 |               </v-row>
 60 |               
 61 |             </v-card>
 62 |           </v-item>
 63 |         </v-col>
 64 |          <v-col
 65 |           cols="12"
 66 |           md="2"
 67 |         >
 68 |           <v-item v-slot="{ active, toggle }">
 69 |             <v-card
 70 |               :color="active ? '#49D9A0' : 'white'"
 71 |               class="d-flex align-center rounded-xl"
 72 |               dark
 73 |               height="200"
 74 |               @click="toggle"
 75 |             >
 76 |               <v-row>
 77 |                 <v-col cols="12" sm="12">
 78 |                   <v-list-item three-line  class="mt-10">
 79 |                     <v-list-item-content>
 80 |                       <div class="mb-4">
 81 |                        
 82 |                           <v-icon  x-large :color="active ? 'white' : '#49D9A0'">far fa-user</v-icon>
 83 |                        
 84 |                       </div>
 85 |                       <v-list-item-subtitle :class="active ? 'white--text' : 'black--text'">Team members</v-list-item-subtitle>
 86 |                       <v-list-item-title class="headline mb-1" :class="active ? 'white--text' : 'black--text'">
 87 |                         <strong>12</strong>
 88 |                       </v-list-item-title>
 89 |                       
 90 |                     </v-list-item-content>
 91 |                   </v-list-item>
 92 |                 </v-col>
 93 |               </v-row>
 94 |               
 95 |             </v-card>
 96 |           </v-item>
 97 |         </v-col>
 98 |          <v-col
 99 |           cols="12"
100 |           md="2"
101 |         >
102 |           <v-item v-slot="{ active, toggle }">
103 |            <v-card
104 |               :color="active ? '#49D9A0' : 'white'"
105 |               class="d-flex align-center rounded-xl"
106 |               dark
107 |               height="200"
108 |               @click="toggle"
109 |             >
110 |               <v-row>
111 |                 <v-col cols="12" sm="12">
112 |                   <v-list-item three-line  class="mt-10">
113 |                     <v-list-item-content>
114 |                       <div class="mb-4">
115 |                        
116 |                           <v-icon  x-large :color="active ? 'white' : '#49D9A0'">fas fa-suitcase</v-icon>
117 |                        
118 |                       </div>
119 |                       <v-list-item-subtitle :class="active ? 'white--text' : 'black--text'">Tasks delivered</v-list-item-subtitle>
120 |                       <v-list-item-title class="headline mb-1" :class="active ? 'white--text' : 'black--text'">
121 |                         <strong>23</strong>
122 |                       </v-list-item-title>
123 |                       
124 |                     </v-list-item-content>
125 |                   </v-list-item>
126 |                 </v-col>
127 |               </v-row>
128 |               
129 |             </v-card>
130 |           </v-item>
131 |         </v-col>
132 |          <v-col
133 |           cols="12"
134 |           md="2"
135 |         >
136 |           <v-item v-slot="{ active, toggle }">
137 |             <v-card
138 |               :color="active ? '#49D9A0' : 'white'"
139 |               class="d-flex align-center rounded-xl"
140 |               dark
141 |               height="200"
142 |               @click="toggle"
143 |             >
144 |               <v-row>
145 |                 <v-col cols="12" sm="12">
146 |                   <v-list-item three-line  class="mt-10">
147 |                     <v-list-item-content>
148 |                       <div class="mb-4">
149 |                        
150 |                           <v-icon  x-large :color="active ? 'white' : '#49D9A0'">fas fa-search</v-icon>
151 |                        
152 |                       </div>
153 |                       <v-list-item-subtitle :class="active ? 'white--text' : 'black--text'">Spikes delivered</v-list-item-subtitle>
154 |                       <v-list-item-title class="headline mb-1" :class="active ? 'white--text' : 'black--text'">
155 |                         <strong>23</strong>
156 |                       </v-list-item-title>
157 |                       
158 |                     </v-list-item-content>
159 |                   </v-list-item>
160 |                 </v-col>
161 |               </v-row>
162 |               
163 |             </v-card>
164 |           </v-item>
165 |         </v-col>
166 |          <v-col
167 |           cols="12"
168 |           md="2"
169 |         >
170 |           <v-item v-slot="{ active, toggle }">
171 |             <v-card
172 |               :color="active ? '#49D9A0' : 'white'"
173 |               class="d-flex align-center rounded-xl"
174 |               dark
175 |               height="200"
176 |               @click="toggle"
177 |             >
178 |               <v-row>
179 |                 <v-col cols="12" sm="12">
180 |                   <v-list-item three-line  class="mt-10">
181 |                     <v-list-item-content>
182 |                       <div class="mb-4">
183 |                        
184 |                           <v-icon  x-large :color="active ? 'white' : '#49D9A0'">fas fa-globe-africa  </v-icon>
185 |                        
186 |                       </div>
187 |                       <v-list-item-subtitle :class="active ? 'white--text' : 'black--text'">News events</v-list-item-subtitle>
188 |                       <v-list-item-title class="headline mb-1" :class="active ? 'white--text' : 'black--text'">
189 |                         <strong>15</strong>
190 |                       </v-list-item-title>
191 |                       
192 |                     </v-list-item-content>
193 |                   </v-list-item>
194 |                 </v-col>
195 |               </v-row>
196 |               
197 |             </v-card>
198 |           </v-item>
199 |         </v-col>
200 |       </v-row>
201 |      
202 |     </v-container>
203 |   </v-item-group>
204 |  <v-row class="mt-n6">
205 |         <v-col cols="12" sm="7">
206 | 
207 | 
208 | 
209 |        <v-chart class="chart mt-2" :option="option" />
210 |   
211 | 
212 |         </v-col>
213 |         <v-col cols="12" md="5" sm="12">
214 |            <v-toolbar color="rgba(0,0,0,0)" flat class="mt-n2">
215 |        <v-toolbar-title>Sprint stories</v-toolbar-title>
216 |          <v-spacer></v-spacer>
217 |           <v-btn rounded small >
218 |         See All
219 |           </v-btn>
220 |      </v-toolbar>
221 |        <v-simple-table class="grey lighten-3">
222 |     <template v-slot:default>
223 |       <tbody>
224 |         <tr
225 |           v-for="item in orders"
226 |           :key="item.name"
227 |         >
228 |           <td>{{ item.id }}</td>
229 |           <td>{{ item.title }}</td>
230 |           <td>{{ item.state }}</td>
231 |           <td>{{ item.count }}</td>
232 |           <td><v-icon small>{{ item.icon }}</v-icon></td>
233 |         </tr>
234 |       </tbody>
235 |     </template>
236 |   </v-simple-table>
237 |         </v-col>
238 |       </v-row>
239 |        <v-toolbar color="rgba(0,0,0,0)" flat class="mt-n8">
240 |        <v-toolbar-title>Team members</v-toolbar-title>
241 |          <v-spacer></v-spacer>
242 |           <v-btn rounded small >
243 |         Add member
244 |           </v-btn>
245 |      </v-toolbar>
246 |      <v-card class=" rounded-lg">
247 |        <v-row>
248 |          <v-col cols="12" sm="3">
249 |            <v-list
250 |       subheader
251 |       two-line
252 |       
253 |     > 
254 |       <v-list-item
255 |         
256 |       >
257 |         <v-badge
258 |         bordered
259 |         bottom
260 |         color="#49D9A0"
261 |         dot
262 |         offset-x="28"
263 |         offset-y="22"
264 |       >
265 |         <v-list-item-avatar >
266 |           
267 |        
268 |         <v-avatar size="40">
269 |           <v-img src="https://cdn.vuetifyjs.com/images/lists/2.jpg"></v-img>
270 |         </v-avatar>
271 |       
272 |         </v-list-item-avatar>
273 | </v-badge>
274 |         <v-list-item-content>
275 |           <v-list-item-title >AAE Ideapro</v-list-item-title>
276 | 
277 |           <v-list-item-subtitle>32 Story point</v-list-item-subtitle>
278 |         </v-list-item-content>
279 | 
280 |       </v-list-item>
281 |     </v-list>
282 |   
283 |          </v-col>
284 |          <v-col cols="12" sm="3">
285 |            <v-list
286 |       subheader
287 |       two-line
288 |       
289 |     > 
290 |       <v-list-item
291 |         
292 |       >
293 |         <v-badge
294 |         bordered
295 |         bottom
296 |         color="#49D9A0"
297 |         dot
298 |         offset-x="28"
299 |         offset-y="22"
300 |       >
301 |         <v-list-item-avatar >
302 |           
303 |        
304 |         <v-avatar size="40">
305 |           <v-img src="https://cdn.vuetifyjs.com/images/lists/1.jpg"></v-img>
306 |         </v-avatar>
307 |       
308 |         </v-list-item-avatar>
309 | </v-badge>
310 |         <v-list-item-content>
311 |           <v-list-item-title >Jhony</v-list-item-title>
312 | 
313 |           <v-list-item-subtitle>8 Story point</v-list-item-subtitle>
314 |         </v-list-item-content>
315 | 
316 |       </v-list-item>
317 |     </v-list>
318 |   
319 |          </v-col>
320 |          <v-col cols="12" sm="3">
321 |            <v-list
322 |       subheader
323 |       two-line
324 |       
325 |     > 
326 |       <v-list-item
327 |         
328 |       >
329 |         <v-badge
330 |         bordered
331 |         bottom
332 |         color="#49D9A0"
333 |         dot
334 |         offset-x="28"
335 |         offset-y="22"
336 |       >
337 |         <v-list-item-avatar >
338 |           
339 |        
340 |         <v-avatar size="40">
341 |           <v-img src="https://cdn.vuetifyjs.com/images/lists/3.jpg"></v-img>
342 |         </v-avatar>
343 |       
344 |         </v-list-item-avatar>
345 | </v-badge>
346 |         <v-list-item-content>
347 |           <v-list-item-title >Mimi</v-list-item-title>
348 | 
349 |           <v-list-item-subtitle>32 Story point</v-list-item-subtitle>
350 |         </v-list-item-content>
351 | 
352 |       </v-list-item>
353 |     </v-list>
354 |   
355 |          </v-col>
356 |          <v-col cols="12" sm="3">
357 |            <v-list
358 |       subheader
359 |       two-line
360 |       
361 |     > 
362 |       <v-list-item
363 |         
364 |       >
365 |         <v-badge
366 |         bordered
367 |         bottom
368 |         color="#49D9A0"
369 |         dot
370 |         offset-x="28"
371 |         offset-y="22"
372 |       >
373 |         <v-list-item-avatar >
374 |           
375 |        
376 |         <v-avatar size="40">
377 |           <v-img src="https://cdn.vuetifyjs.com/images/lists/4.jpg"></v-img>
378 |         </v-avatar>
379 |       
380 |         </v-list-item-avatar>
381 | </v-badge>
382 |         <v-list-item-content>
383 |           <v-list-item-title >Selia</v-list-item-title>
384 | 
385 |           <v-list-item-subtitle>10 Story point</v-list-item-subtitle>
386 |         </v-list-item-content>
387 | 
388 |       </v-list-item>
389 |     </v-list>
390 |   
391 |          </v-col>
392 |        </v-row>
393 |      </v-card>
394 |     
395 |      
396 |       
397 |     
398 |   </v-container>
399 | </v-app>
400 |   
401 | </template>
402 | 
403 | <script>
404 |   import SideBar from '../components/SideBar'
405 |   import SideBarRight from '../components/SideBarRight'
406 |  
407 |   import { use } from "echarts/core";
408 | import { CanvasRenderer } from "echarts/renderers";
409 | import { PieChart } from "echarts/charts";
410 | import {
411 |   TitleComponent,
412 |   TooltipComponent,
413 |   LegendComponent
414 | } from "echarts/components";
415 | import VChart, { THEME_KEY } from "vue-echarts";
416 | 
417 | use([
418 |   CanvasRenderer,
419 |   PieChart,
420 |   TitleComponent,
421 |   TooltipComponent,
422 |   LegendComponent
423 | ]);
424 | 
425 |   export default {
426 |     name: 'Home',
427 |   data: () => ({
428 |     toggle_exclusive: 1,
429 |      orders: [
430 |           {
431 |             id: 'P42',
432 |             title: 'Onboarding',
433 |             state: 'Delivered',
434 |             count: 3,
435 |             icon: 'fas fa-ellipsis-h'
436 |           },
437 |            {
438 |             id: 'P32',
439 |             title: 'User profile',
440 |             state: 'Delivered',
441 |             count: 8,
442 |             icon: 'fas fa-ellipsis-h'
443 |           },
444 |           {
445 |             id: 'P56',
446 |             title: 'Landing page',
447 |             state: 'Approved',
448 |             count: 12,
449 |             icon: 'fas fa-ellipsis-h'
450 |           },
451 |           {
452 |             id: 'P36',
453 |             title: 'Settings',
454 |             state: 'Approved',
455 |             count: 9,
456 |             icon: 'fas fa-ellipsis-h'
457 |           },
458 |          
459 |         ],
460 |        
461 | option: {
462 |         title: {
463 |           text: "Burnsown chart",
464 |           left: "left"
465 |         },
466 |         tooltip: {
467 |           trigger: "item",
468 |           formatter: "{a} <br/>{b} : {c} ({d}%)"
469 |         },
470 |       
471 |         series: [
472 |           {
473 |             name: "Traffic Sources",
474 |             type: "pie",
475 |             radius: "55%",
476 |             center: ["45%", "50%"],
477 |             data: [
478 |               { value: 335, name: "Direct" },
479 |               { value: 310, name: "Email" },
480 |               { value: 234, name: "Ad Networks" },
481 |               { value: 135, name: "Video Ads" },
482 |               { value: 1548, name: "Search Engines" }
483 |             ],
484 |             emphasis: {
485 |               itemStyle: {
486 |                 shadowBlur: 10,
487 |                 shadowOffsetX: 0,
488 |                 shadowColor: "rgba(0, 0, 0, 0)"
489 |               }
490 |             }
491 |           }
492 |         ]
493 | }
494 | 
495 |   }),
496 |     components: {
497 |       SideBar,
498 |       SideBarRight,
499 |    VChart
500 |       
501 |     },
502 |     provide: {
503 |     [THEME_KEY]: "green"
504 |   },  
505 |   }
506 | </script>
507 | <style>
508 | 
509 | .space{
510 |   margin-left: -100px;
511 |   margin-right: -100px;
512 | }
513 |  
514 | 
515 | </style>
516 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   transpileDependencies: [
3 |     'vuetify'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------