From 2ec2d8c464be5ed25f32787108f318895ab4d6d9 Mon Sep 17 00:00:00 2001
From: ThabetDo44 <sabeat44@gmail.com>
Date: Wed, 29 Jan 2020 07:07:26 +0200
Subject: [PATCH] Big One

add vuetify + moment.js
- initial item + add page
- add imporance + description
- add fake about page
---
 package-lock.json             | 112 +++++++-
 package.json                  |  15 +-
 public/index.html             |   2 +
 src/App.vue                   | 125 +++++++--
 src/assets/logo.svg           |   1 +
 src/components/HelloWorld.vue | 190 +++++++++----
 src/components/items.scss     |  59 ++++
 src/components/items.vue      | 512 ++++++++++++++++++++++++++++++++++
 src/main.js                   |   5 +
 src/plugins/vuetify.js        |   8 +
 src/views/About.vue           |  11 +-
 src/views/Home.vue            |  23 +-
 vue.config.js                 |   5 +
 13 files changed, 974 insertions(+), 94 deletions(-)
 create mode 100644 src/assets/logo.svg
 create mode 100644 src/components/items.scss
 create mode 100644 src/components/items.vue
 create mode 100644 src/plugins/vuetify.js
 create mode 100644 vue.config.js

diff --git a/package-lock.json b/package-lock.json
index 563e96d..27cdc07 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -940,6 +940,11 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.12.0.tgz",
+      "integrity": "sha512-vKDJUuE2GAdBERaQWmmtsciAMzjwNrROXA5KTGSZvayAsmuTGjam5z6QNqNPCwDfVljLWuov1nEC3mEQf/n6fQ=="
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -990,6 +995,11 @@
         "postcss": "^7.0.0"
       }
     },
+    "@mdi/font": {
+      "version": "3.9.97",
+      "resolved": "https://registry.npmjs.org/@mdi/font/-/font-3.9.97.tgz",
+      "integrity": "sha512-yADBl2mzqIssrhLaRvJ2gZPyEQK+fN9uYh/1/cwwuq2lKDx+ITWsOrh1vlHMfw1IICMx9cwBjSoiCf3B8Br8nw=="
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -1814,6 +1824,11 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "animate.css": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-3.7.2.tgz",
+      "integrity": "sha512-0bE8zYo7C0KvgOYrSVfrzkbYk6IOTVPNqkiHg2cbyF4Pq/PXzilz4BRWA3hwEUBoMp5VBgrC29lQIZyhRWdBTw=="
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -3699,9 +3714,9 @@
       "dev": true
     },
     "deepmerge": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
-      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
       "dev": true
     },
     "default-gateway": {
@@ -3956,6 +3971,12 @@
       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
       "dev": true
     },
+    "detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
+      "dev": true
+    },
     "detect-node": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz",
@@ -4777,6 +4798,15 @@
         "websocket-driver": ">=0.5.1"
       }
     },
+    "fibers": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/fibers/-/fibers-4.0.2.tgz",
+      "integrity": "sha512-FhICi1K4WZh9D6NC18fh2ODF3EWy1z0gzIdV9P7+s2pRjfRBnCkMDJ6x3bV1DkVymKH8HGrQa/FNOBjYvnJ/tQ==",
+      "dev": true,
+      "requires": {
+        "detect-libc": "^1.0.3"
+      }
+    },
     "figgy-pudding": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
@@ -6392,6 +6422,12 @@
         }
       }
     },
+    "interpret": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.2.0.tgz",
+      "integrity": "sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==",
+      "dev": true
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -7554,6 +7590,11 @@
         }
       }
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -9325,6 +9366,15 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+      "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
+      "dev": true,
+      "requires": {
+        "resolve": "^1.1.6"
+      }
+    },
     "redent": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
@@ -9688,6 +9738,11 @@
         "inherits": "^2.0.1"
       }
     },
+    "roboto-fontface": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.10.0.tgz",
+      "integrity": "sha512-OlwfYEgA2RdboZohpldlvJ1xngOins5d7ejqnIBWr9KaMxsnBqotpptRXTyfNRLnFpqzX6sTDt+X+a+6udnU8g=="
+    },
     "run-async": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",
@@ -9736,6 +9791,15 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass": {
+      "version": "1.25.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.25.0.tgz",
+      "integrity": "sha512-uQMjye0Y70SEDGO56n0j91tauqS9E1BmpKHtiYNQScXDHeaE9uHwNEqQNFf4Bes/3DHMNinB6u79JsG10XWNyw==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
     "sass-graph": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
@@ -10176,6 +10240,17 @@
       "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
       "dev": true
     },
+    "shelljs": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.3.tgz",
+      "integrity": "sha512-fc0BKlAWiLpwZljmOvAOTE/gXawtCoNrP5oaY7KIaQbbyHeQVg01pSEuEGvGh3HEdBU4baCD7wQBwADmM/7f7A==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.0.0",
+        "interpret": "^1.0.0",
+        "rechoir": "^0.6.2"
+      }
+    },
     "signal-exit": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
@@ -11495,6 +11570,15 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
       "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
     },
+    "vue-cli-plugin-vuetify": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.0.3.tgz",
+      "integrity": "sha512-bBQYE5lT5+gbR3Hvyy3/wMLHm+2yxKz+czgz3YK6T5Ykfva4ecK6OQZs0/XebT+YOPoy60qVEk9HYUvG8UFsTQ==",
+      "dev": true,
+      "requires": {
+        "shelljs": "^0.8.3"
+      }
+    },
     "vue-eslint-parser": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",
@@ -11572,6 +11656,20 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuetify": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.2.6.tgz",
+      "integrity": "sha512-HrcdKLs4YYG/3HwcdJa+HMUoNtKt/0ePmdkPYj/ju3EmyeJZyUaxbX0kyW5cyeUTyysrFkBJHCU+24iPYP3+pQ=="
+    },
+    "vuetify-loader": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-1.4.3.tgz",
+      "integrity": "sha512-fS0wRil682Ebsj2as+eruBoMPKaQYDhu/fDAndnTItzSY4RK4LOEIsssVL4vD6QY8dvUgoGL84SUQ6vGr777CA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.2.0"
+      }
+    },
     "vuex": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz",
@@ -11679,6 +11777,14 @@
       "requires": {
         "deepmerge": "^1.5.2",
         "javascript-stringify": "^2.0.1"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "1.5.2",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
+          "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
+          "dev": true
+        }
       }
     },
     "webpack-dev-middleware": {
diff --git a/package.json b/package.json
index 5768aea..cee6fff 100644
--- a/package.json
+++ b/package.json
@@ -8,9 +8,15 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.8.2",
+    "@mdi/font": "^3.6.95",
+    "animate.css": "^3.7.2",
     "core-js": "^3.4.4",
+    "moment": "^2.24.0",
+    "roboto-fontface": "*",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
+    "vuetify": "^2.2.6",
     "vuex": "^3.1.2"
   },
   "devDependencies": {
@@ -20,10 +26,15 @@
     "@vue/cli-plugin-vuex": "^4.1.0",
     "@vue/cli-service": "^4.1.0",
     "babel-eslint": "^10.0.3",
+    "deepmerge": "^4.2.2",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "fibers": "^4.0.2",
     "node-sass": "^4.12.0",
-    "sass-loader": "^8.0.0",
-    "vue-template-compiler": "^2.6.10"
+    "sass": "^1.25.0",
+    "sass-loader": "^8.0.2",
+    "vue-cli-plugin-vuetify": "^2.0.3",
+    "vue-template-compiler": "^2.6.10",
+    "vuetify-loader": "^1.3.0"
   }
 }
diff --git a/public/index.html b/public/index.html
index 45c9ab9..db471dd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>shopping-list</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index d609b76..54f0cbe 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,32 +1,111 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+    <div id="app">
+        <v-app id="inspire">
+            <v-navigation-drawer v-model="drawer" app clipped>
+                <v-list dense>
+                    <v-list-item to="/">
+                        <v-list-item-action>
+                            <v-icon>fa-server</v-icon>
+                        </v-list-item-action>
+                        <v-list-item-content>
+                            <v-list-item-title>Order Lists</v-list-item-title>
+                        </v-list-item-content>
+                    </v-list-item>
+                    <v-list-item to="/speed">
+                        <v-list-item-action>
+                            <v-icon>fa-fire</v-icon>
+                        </v-list-item-action>
+                        <v-list-item-content>
+                            <v-list-item-title>Speed</v-list-item-title>
+                        </v-list-item-content>
+                    </v-list-item>
+                    <v-list-item to="/edit">
+                        <v-list-item-action>
+                            <v-icon>fa-edit</v-icon>
+                        </v-list-item-action>
+                        <v-list-item-content>
+                            <v-list-item-title>Edit Orders</v-list-item-title>
+                        </v-list-item-content>
+                    </v-list-item>
+                    <v-list-item to="/about">
+                        <v-list-item-action>
+                            <v-icon>fa-user-friends</v-icon>
+                        </v-list-item-action>
+                        <v-list-item-content>
+                            <v-list-item-title>About Us</v-list-item-title>
+                        </v-list-item-content>
+                    </v-list-item>
+                </v-list>
+            </v-navigation-drawer>
+
+            <v-app-bar app clipped-left>
+                <v-app-bar-nav-icon class="font-weight-bold" @click.stop="drawer = !drawer"/>
+                <v-toolbar-title class="site-logo">Shopping<span>List</span></v-toolbar-title>
+            </v-app-bar>
+
+            <v-content>
+                <v-container>
+                    <v-layout align-left justify-start>
+                        <router-view/>
+                    </v-layout>
+                </v-container>
+            </v-content>
+
+<!--            <v-footer app>-->
+<!--                <span>&copy; 2019 All Right Receded ShoppingList.com</span>-->
+<!--            </v-footer>-->
+        </v-app>
     </div>
-    <router-view/>
-  </div>
 </template>
 
-<style lang="scss">
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
+<script>
+    export default {
+        name: 'App',
+        data: () => ({
+            drawer: 0
+        }),
+    };
+</script>
+
+<style>
+    .w-25 {
+        width: 25% !important;
+    }
+
+    .w-50 {
+        width: 50% !important;
+    }
 
-#nav {
-  padding: 30px;
+    .w-75 {
+        width: 75% !important;
+    }
 
-  a {
-    font-weight: bold;
-    color: #2c3e50;
+    .w-100 {
+        width: 100% !important;
+    }
 
-    &.router-link-exact-active {
-      color: #42b983;
+    main {
+        background-color: #E1F5FE
     }
-  }
-}
 </style>
+<style scoped>
+    .v-app-bar__nav-icon i:before {
+        font-weight: bold;
+    }
+
+    .site-logo {
+        background-color: transparent;
+        color: #0a6c7a;
+        font-weight: 900 !important;
+        font-size: 1.7rem !important;
+        font-family: "Baloo Bhaijaan", "Roboto", sans-serif;
+    }
+
+    .site-logo span {
+        color: #F44336;
+    }
+
+    .home {
+        width: 100%;
+    }
+</style>
\ No newline at end of file
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
new file mode 100644
index 0000000..145b6d1
--- /dev/null
+++ b/src/assets/logo.svg
@@ -0,0 +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>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 8c5434a..3505791 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,60 +1,144 @@
 <template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
+  <v-container>
+    <v-layout
+      text-center
+      wrap
+    >
+      <v-flex xs12>
+        <v-img
+          :src="require('../assets/logo.svg')"
+          class="my-3"
+          contain
+          height="200"
+        ></v-img>
+      </v-flex>
+
+      <v-flex mb-4>
+        <h1 class="display-2 font-weight-bold mb-3">
+          Welcome to Vuetify
+        </h1>
+        <p class="subheading font-weight-regular">
+          For help and collaboration with other Vuetify developers,
+          <br>please join our online
+          <a href="https://community.vuetifyjs.com" target="_blank">Discord Community</a>
+        </p>
+      </v-flex>
+
+      <v-flex
+        mb-5
+        xs12
+      >
+        <h2 class="headline font-weight-bold mb-3">What's next?</h2>
+
+        <v-layout justify-center>
+          <a
+            v-for="(next, i) in whatsNext"
+            :key="i"
+            :href="next.href"
+            class="subheading mx-3"
+            target="_blank"
+          >
+            {{ next.text }}
+          </a>
+        </v-layout>
+      </v-flex>
+
+      <v-flex
+        xs12
+        mb-5
+      >
+        <h2 class="headline font-weight-bold mb-3">Important Links</h2>
+
+        <v-layout justify-center>
+          <a
+            v-for="(link, i) in importantLinks"
+            :key="i"
+            :href="link.href"
+            class="subheading mx-3"
+            target="_blank"
+          >
+            {{ link.text }}
+          </a>
+        </v-layout>
+      </v-flex>
+
+      <v-flex
+        xs12
+        mb-5
+      >
+        <h2 class="headline font-weight-bold mb-3">Ecosystem</h2>
+
+        <v-layout justify-center>
+          <a
+            v-for="(eco, i) in ecosystem"
+            :key="i"
+            :href="eco.href"
+            class="subheading mx-3"
+            target="_blank"
+          >
+            {{ eco.text }}
+          </a>
+        </v-layout>
+      </v-flex>
+    </v-layout>
+  </v-container>
 </template>
 
 <script>
 export default {
   name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
+  data: () => ({
+    ecosystem: [
+      {
+        text: 'vuetify-loader',
+        href: 'https://github.com/vuetifyjs/vuetify-loader',
+      },
+      {
+        text: 'github',
+        href: 'https://github.com/vuetifyjs/vuetify',
+      },
+      {
+        text: 'awesome-vuetify',
+        href: 'https://github.com/vuetifyjs/awesome-vuetify',
+      },
+    ],
+    importantLinks: [
+      {
+        text: 'Documentation',
+        href: 'https://vuetifyjs.com',
+      },
+      {
+        text: 'Chat',
+        href: 'https://community.vuetifyjs.com',
+      },
+      {
+        text: 'Made with Vuetify',
+        href: 'https://madewithvuejs.com/vuetify',
+      },
+      {
+        text: 'Twitter',
+        href: 'https://twitter.com/vuetifyjs',
+      },
+      {
+        text: 'Articles',
+        href: 'https://medium.com/vuetify',
+      },
+    ],
+    whatsNext: [
+      {
+        text: 'Explore components',
+        href: 'https://vuetifyjs.com/components/api-explorer',
+      },
+      {
+        text: 'Select a layout',
+        href: 'https://vuetifyjs.com/layout/pre-defined',
+      },
+      {
+        text: 'Frequently Asked Questions',
+        href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
+      },
+    ],
+  }),
+};
+</script>
diff --git a/src/components/items.scss b/src/components/items.scss
new file mode 100644
index 0000000..5fdcef7
--- /dev/null
+++ b/src/components/items.scss
@@ -0,0 +1,59 @@
+@import "~animate.css";
+
+.v-application .title {
+  font-size: 0.8rem !important;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+/*.card {*/
+/*    width: 100%;*/
+/*    display: block;*/
+/*    !*align-items: center;*!*/
+/*    !*justify-content: space-between;*!*/
+/*    background: #03A9F4;*/
+/*    color: #FFFFFF;*/
+/*    border-radius: 10px;*/
+
+/*    & > div {*/
+/*        display: inline-block;*/
+/*    }*/
+
+/*    &.complete {*/
+/*        background: #81D4FA;*/
+/*        !*color: #B388FF;*!*/
+/*    }*/
+
+/*    .title {*/
+/*        float: left;*/
+/*        max-width: 50%;*/
+/*        align-items: center;*/
+/*        justify-content: space-between;*/
+
+/*        & > * {*/
+/*            display: inline-block;*/
+/*        }*/
+/*    }*/
+
+/*    .text {*/
+/*        min-width: 100px;*/
+/*        max-width: calc(50% - 50px);*/
+/*        text-align: center;*/
+
+/*        & > * {*/
+/*            display: flex;*/
+/*            !*display: inline-block;*!*/
+/*        }*/
+/*    }*/
+
+/*    .edit {*/
+/*        float: right;*/
+/*        width: 50px;*/
+/*    }*/
+/*}*/
diff --git a/src/components/items.vue b/src/components/items.vue
new file mode 100644
index 0000000..66fe378
--- /dev/null
+++ b/src/components/items.vue
@@ -0,0 +1,512 @@
+<template>
+    <div>
+        <!--Search By Name-->
+        <v-tooltip top>
+            <template v-slot:activator="{ on }">
+                <v-btn
+                        :color="searchShow ? myColor.main : 'dark' "
+                        @click="searchShow = !searchShow"
+                        class="mt-2 mr-2" dark small
+                        v-on="on">
+                    <v-icon :color="myColor.theme" small>fa-search</v-icon>
+                </v-btn>
+            </template>
+            <span>Search</span>
+        </v-tooltip>
+
+        <!--Expand Details-->
+        <v-tooltip top>
+            <template v-slot:activator="{ on }">
+                <v-btn
+                        :color="expand ? myColor.main : 'dark'"
+                        @click="expand = !expand"
+                        class="mt-2 mr-2" dark small
+                        v-on="on">
+                    <v-icon :color="myColor.theme" small>fa-expand-arrows-alt</v-icon>
+                </v-btn>
+            </template>
+            <span>Expand Details</span>
+        </v-tooltip>
+
+        <!--is Complete-->
+        <v-tooltip top>
+            <template v-slot:activator="{ on }">
+                <v-btn
+                        :color="filter.complete ? 'green' : 'dark' "
+                        @click="filter.complete = !filter.complete"
+                        class="mt-2 mr-2" dark small
+                        v-on="on">
+                    <v-icon :color="myColor.theme" small>fa-check</v-icon>
+                </v-btn>
+            </template>
+            <span>Is Complete</span>
+        </v-tooltip>
+
+        <!--Add Item-->
+        <v-tooltip top>
+            <template v-slot:activator="{ on }">
+                <v-btn @click.stop="dialogAddItem.dialog = true" class="mt-2 mr-2" color="orange" dark small
+                       v-on="on">
+                    <v-icon :color="myColor.theme" small>fa-cart-arrow-down</v-icon>
+                </v-btn>
+            </template>
+            <span>Add New Order</span>
+        </v-tooltip>
+
+        <!-- Add Item Dialog -->
+        <v-dialog v-model="dialogAddItem.dialog">
+            <v-card>
+                <v-card-title class="headline">Add New Order:</v-card-title>
+                <v-card-text>
+                    <v-row>
+                        <v-col cols="12">
+                            <v-text-field :rules="rules" dense hide-details="auto" label="Name" outlined/>
+                        </v-col>
+                        <v-col cols="12">
+                            <v-text-field :rules="rules" dense hide-details="auto" label="Quantity" outlined/>
+                        </v-col>
+                        <v-col cols="6" v-show="dialogAddItem.simple">
+                            <v-text-field :rules="rules" dense hide-details="auto" label="Unit" outlined/>
+                        </v-col>
+                        <v-col cols="6" v-show="dialogAddItem.simple">
+                            <v-select :items="['On','Off']" :rules="rules" dense hide-details="auto" label="importance"
+                                      outlined value="Off"/>
+                        </v-col>
+                        <v-col cols="12" v-show="dialogAddItem.simple">
+                            <v-text-field :rules="rules" dense hide-details="auto" label="Price" outlined/>
+                        </v-col>
+                        <v-col cols="12">
+                            <v-textarea :rules="rules" dense hide-details="auto" label="Description" outlined rows="2"/>
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+
+                <v-card-actions>
+                    <v-btn @click="dialogAddItem.simple = !dialogAddItem.simple" class="mx-2" color="green darken-1"
+                           text>
+                        {{dialogAddItem.simple ? 'Simple' : 'Advance'}}
+                    </v-btn>
+                    <v-spacer/>
+                    <v-btn @click="dialogAddItem.dialog = false" color="green darken-1" text>
+                        Close
+                    </v-btn>
+
+                    <v-btn @click="dialogAddItem.dialog = false" color="green darken-1" text>
+                        Save
+                    </v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+
+        <!--Search By Name Input-->
+        <v-text-field :class="searchShow ? 'fadeInRight' : 'fadeOutRight d-none'" class="mt-2 animated fast" dense
+                      hide-details placeholder="Search"
+                      solo v-model="filter.name"/>
+
+        <!--Cards Loop-->
+        <v-card :class="item.complete ? 'complete' : ''"
+                :key="item.date"
+                class="mx-auto my-3" outlined
+                v-for="item in filteredItems">
+
+            <v-row class="px-2 ma-0" justify="space-between">
+                <v-col class="py-2">
+                    <v-card-title class="pa-0">
+                        <v-avatar :color="item.importance ? 'pink' : 'indigo'" class="mx-2" size="17"/>
+
+                        {{item.name}}:
+                        <transition name="fade">
+                            <span style="font-weight: normal; font-size: 1rem" v-show="!expand"> {{item.quantity + item.unit}}</span>
+                        </transition>
+                    </v-card-title>
+                </v-col>
+
+                <div class="my-auto">
+                    <v-btn :color="myColor.main" small value="1">
+                        <v-icon :color="myColor.theme" small>fa-edit</v-icon>
+                    </v-btn>
+                    <v-btn
+                            :color="item.complete ? 'green' : 'dark' "
+                            @click="[item.complete = !item.complete, sendCompleteStatus(item.id, item.complete)]"
+                            class="ml-1" dark
+                            small>
+                        <v-icon :color="myColor.theme" small>fa-check</v-icon>
+                    </v-btn>
+                </div>
+
+                <transition name="fade">
+                    <v-col class=" v-card__subtitle pt-0" cols="12" v-show="expand">
+                        <v-row class="py-0" justify="space-between">
+                            <v-col class="py-0">
+                                Quantity: {{item.quantity}} {{item.unit}}
+                            </v-col>
+                            <v-col class="py-0">
+                                Price: {{item.price}}
+                            </v-col>
+                            <v-col cols="12" v-if="item.description">Description: {{item.description}}</v-col>
+                        </v-row>
+                    </v-col>
+                </transition>
+            </v-row>
+            <transition name="fade">
+                <v-sheet :color="`${myColor.second} lighten-3`" class="text-center" tile v-show="expand">
+                    <v-row dense>
+                        <v-col class="pa-0 title grey--text font-weight-regular text--darken-2"
+                               v-text="`modified: ${item.dateModify}`"/>
+                        <v-col class="pa-0 title grey--text font-weight-regular text--darken-2"
+                               v-text="`Created: ${item.dateCreate}`"/>
+                    </v-row>
+                </v-sheet>
+            </transition>
+        </v-card>
+    </div>
+</template>
+
+<script>
+    import moment from "moment";
+
+    moment.locale('ar-kw');
+    export default {
+        name: "items",
+        data: () => ({
+            dialogAddItem: {
+                dialog: false,
+                simple: false
+            },
+            searchShow: 0,
+            myColor: {
+                main: 'indigo',
+                theme: "white",
+                second: "grey"
+            },
+            expand: false,
+            items: [
+                {
+                    id: 1,
+                    name: "Tomato",
+                    quantity: "12",
+                    unit: "Kg",
+                    price: "1500",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: true,
+                    importance: true,
+                },
+                {
+                    id: 2,
+                    name: "Banana",
+                    quantity: "12",
+                    price: "1500",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: true,
+                },
+                {
+                    id: 3,
+                    name: "joyce",
+                    quantity: "12",
+                    unit: "",
+                    price: "1500",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: false,
+                    importance: true,
+                },
+                {
+                    id: 4,
+                    name: "oil",
+                    quantity: "2",
+                    unit: "lit",
+                    price: "1500",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: true,
+                    importance: true,
+                },
+                {
+                    id: 5,
+                    name: "Sugar",
+                    quantity: "12",
+                    unit: "Kg",
+                    price: "1500",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: false,
+                },
+                {
+                    id: 6,
+                    name: "Table",
+                    quantity: "1",
+                    price: "15000",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: true,
+                },
+                {
+                    id: 1,
+                    name: "Tomato",
+                    quantity: "12",
+                    unit: "Kg",
+                    price: "1500",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: false,
+                },
+                {
+                    id: 2,
+                    name: "Banana",
+                    quantity: "12",
+                    price: "1500",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: true,
+                },
+                {
+                    id: 3,
+                    name: "joyce",
+                    quantity: "12",
+                    unit: "",
+                    price: "1500",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: false,
+                },
+                {
+                    id: 4,
+                    name: "oil",
+                    quantity: "2",
+                    unit: "lit",
+                    price: "1500",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: true,
+                },
+                {
+                    id: 5,
+                    name: "Sugar",
+                    quantity: "12",
+                    unit: "Kg",
+                    price: "1500",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: false,
+                },
+                {
+                    id: 6,
+                    name: "Table",
+                    quantity: "1",
+                    price: "15000",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: false,
+                },
+                {
+                    id: 1,
+                    name: "Tomato",
+                    quantity: "12",
+                    unit: "Kg",
+                    price: "1500",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: false,
+                },
+                {
+                    id: 2,
+                    name: "Banana",
+                    quantity: "12",
+                    price: "1500",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: false,
+                },
+                {
+                    id: 3,
+                    name: "joyce",
+                    quantity: "12",
+                    unit: "",
+                    price: "1500",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: false,
+                },
+                {
+                    id: 4,
+                    name: "oil",
+                    quantity: "2",
+                    unit: "lit",
+                    price: "1500",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: false,
+                },
+                {
+                    id: 5,
+                    name: "Sugar",
+                    quantity: "12",
+                    unit: "Kg",
+                    price: "1500",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: false,
+                },
+                {
+                    id: 6,
+                    name: "Table",
+                    quantity: "1",
+                    price: "15000",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: false,
+                },
+                {
+                    id: 1,
+                    name: "Tomato",
+                    quantity: "12",
+                    unit: "Kg",
+                    price: "1500",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: false,
+                },
+                {
+                    id: 2,
+                    name: "Banana",
+                    quantity: "12",
+                    price: "1500",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: false,
+                },
+                {
+                    id: 3,
+                    name: "joyce",
+                    quantity: "12",
+                    unit: "",
+                    price: "1500",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: true,
+                },
+                {
+                    id: 4,
+                    name: "oil",
+                    quantity: "2",
+                    unit: "lit",
+                    price: "1500",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: true,
+                },
+                {
+                    id: 5,
+                    name: "Sugar",
+                    quantity: "12",
+                    unit: "Kg",
+                    price: "1500",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: true,
+                },
+                {
+                    id: 6,
+                    name: "Table",
+                    quantity: "1",
+                    price: "15000",
+                    dateCreate: "2019/20/1",
+                    dateModify: "2019/20/1",
+                    description: "XXXX",
+                    complete: true,
+                },
+            ],
+            filter: {
+                name: '', /* All case --- false --- contain "name" */
+                date: false, /*All case --- false --- range: "2020/1/20 - 2020/1/23" --- this day --- this month*/
+                complete: {
+                    active: false,
+                    condition: true
+                }, /*All case --- false --- true*/
+                price: false, /*"<55"*/ /* All Case --- false = without filter price --- less than x '<x' --- More than x '>x' --- equal x '=x' */
+                quantity: false, /*"<5000"*/ /* All Case --- false = without filter price --- less than x '<x' --- More than x '>x' --- equal x '=x' */
+            }
+        }),
+        methods: {
+            sendCompleteStatus: function (id, complete) {
+                console.log("Complete State is Changed ID:", id, complete)
+            }
+        },
+        computed: {
+            filteredItems: function () {
+                let items = this.items;
+                let f = this.filter;
+                if (f.complete) {
+                    items = items.filter(item => item.complete);
+                    console.log("Done Filter Complete");
+                }
+                if (f.quantity) {
+                    const
+                        quantityCond = f.quantity[0],
+                        fQuantity = parseFloat(f.quantity.slice(1));
+                    if (quantityCond === "<")
+                        items = items.filter(i => parseFloat(i.quantity) >= fQuantity);
+                    else if (quantityCond === ">")
+                        items = items.filter(i => parseFloat(i.quantity) <= fQuantity);
+                    else if (quantityCond === "=")
+                        items = items.filter(i => parseFloat(i.quantity) === fQuantity);
+                    console.log("Done Filter Quantity");
+                }
+                if (f.price) {
+                    const
+                        priceCond = f.price[0],
+                        fPrice = parseFloat(f.price.slice(1));
+                    if (priceCond === "<")
+                        items = items.filter(i => parseFloat(i.price) >= fPrice);
+                    else if (priceCond === ">")
+                        items = items.filter(i => parseFloat(i.price) <= fPrice);
+                    else if (priceCond === "=")
+                        items = items.filter(i => parseFloat(i.price) === fPrice);
+                    console.log("Done Filter Price");
+                }
+                if (f.name) {
+                    items = items.filter(i => i.name.includes(f.name));
+                    console.log("Done Filter Name");
+                }
+                if (f.date) {
+                    const
+                        date = f.date.split("-"),
+                        startDate = date[0],
+                        endDate = date[1];
+                    console.log(startDate, endDate);
+                    console.log("Done filter Date");
+                }
+                return items
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "items";
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f253456..12a333d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,11 +2,16 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import vuetify from './plugins/vuetify';
+import 'roboto-fontface/css/roboto/roboto-fontface.css'
+import '@fortawesome/fontawesome-free/css/all.css'
+import '@mdi/font/css/materialdesignicons.css'
 
 Vue.config.productionTip = false
 
 new Vue({
   router,
   store,
+  vuetify,
   render: h => h(App)
 }).$mount('#app')
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
new file mode 100644
index 0000000..36d87c8
--- /dev/null
+++ b/src/plugins/vuetify.js
@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib';
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+    iconfont: 'fa', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4'
+});
diff --git a/src/views/About.vue b/src/views/About.vue
index 3fa2807..0e2746b 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,5 +1,14 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <h1>About US:</h1>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, atque commodi consequuntur distinctio ducimus eum, facere, impedit in inventore maxime nemo nobis odit placeat possimus quaerat quam quo tempora tenetur.
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, atque commodi consequuntur distinctio ducimus eum, facere, impedit in inventore maxime nemo nobis odit placeat possimus quaerat quam quo tempora tenetur.
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, atque commodi consequuntur distinctio ducimus eum, facere, impedit in inventore maxime nemo nobis odit placeat possimus quaerat quam quo tempora tenetur.
   </div>
 </template>
+
+<style scoped>
+  .about {
+    color: #0a6c7a;
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index fc2e940..0350664 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,18 +1,17 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+    <div class="home">
+        <Items/>
+    </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+    // @ is an alias to /src
+    import Items from '@/components/items'
 
-export default {
-  name: 'home',
-  components: {
-    HelloWorld
-  }
-}
+    export default {
+        name: 'home',
+        components: {
+          Items
+        }
+    }
 </script>
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..1437692
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  "transpileDependencies": [
+    "vuetify"
+  ],
+};
\ No newline at end of file