Orders - WIP

package-lock.json

         "@fortawesome/fontawesome-common-types": "^0.2.28"
       }
     },
+    "@fortawesome/vue-fontawesome": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.10.tgz",
+      "integrity": "sha512-b2+SLF31h32LSepVcXe+BQ63yvbq5qmTCy4KfFogCYm2bn68H5sDWUnX+U7MBqnM2aeEk9M7xSoqGnu+wSdY6w=="
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
+    "@nuxt/opencollective": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/opencollective/-/opencollective-0.3.0.tgz",
+      "integrity": "sha512-Vf09BxCdj1iT2IRqVwX5snaY2WCTkvM0O4cWWSO1ThCFuc4if0Q/nNwAgCxRU0FeYHJ7DdyMUNSdswCLKlVqeg==",
+      "requires": {
+        "chalk": "^2.4.2",
+        "consola": "^2.10.1",
+        "node-fetch": "^2.6.0"
+      }
+    },
     "@nuxtjs/axios": {
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.9.3.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.2.tgz",
+      "integrity": "sha512-vlGn0bcySYl/iV+BGA544JkkZP5LB3jsmkeKLFQakCOwCM3AOk7VkldBz4jrzSe+Z0Ezn99NVXa1o45cQY4R6A=="
+    },
+    "bootstrap-vue": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.16.0.tgz",
+      "integrity": "sha512-gLETwPmeRHCe5WHmhGxzb5PtTEuKqQPGl0TFvZ2Odbkg/7UuIHdqIexrJRerpnomP4ZzDQ+qYGL91Ls9lcQsJQ==",
+      "requires": {
+        "@nuxt/opencollective": "^0.3.0",
+        "bootstrap": ">=4.5.0 <5.0.0",
+        "popper.js": "^1.16.1",
+        "portal-vue": "^2.1.7",
+        "vue-functional-data-merge": "^3.1.0"
+      }
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
     },
     "dot-prop": {
       "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz",
-      "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==",
-      "dev": true,
-      "requires": {
-        "is-obj": "^1.0.0"
-      }
+      "resolved": "",
+      "dev": true
     },
     "dotenv": {
       "version": "7.0.0",
       "dev": true
     },
     "elliptic": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
-      "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==",
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
+      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
       "dev": true,
       "requires": {
         "bn.js": "^4.4.0",
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
     },
     "has-symbols": {
       "version": "1.0.1",
         }
       }
     },
-    "is-obj": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
-      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
-      "dev": true
-    },
     "is-path-cwd": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
       }
     },
     "lodash": {
-      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
     },
     "lodash.clonedeep": {
       "version": "4.5.0",
         "lower-case": "^1.1.1"
       }
     },
+    "node-fetch": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
+      "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
+    },
     "node-forge": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
       "dev": true,
       "optional": true
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
+    "portal-vue": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
+      "integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g=="
+    },
     "portfinder": {
       "version": "1.0.26",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz",
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "requires": {
         "has-flag": "^3.0.0"
       }
         "vue": "^2.6.10"
       }
     },
+    "vue-functional-data-merge": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
+      "integrity": "sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA=="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

package.json

   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/vue-fontawesome": "^0.1.10",
     "@nuxtjs/axios": "^5.9.3",
     "animate.css": "^3.7.2",
     "axios": "^0.19.2",
+    "bootstrap": "^4.5.2",
+    "bootstrap-vue": "^2.16.0",
     "core-js": "^2.6.11",
     "datatables.net": "^1.10.20",
     "font-awesome": "^4.7.0",
     "jquery": "^3.5.1",
     "js-sha256": "^0.9.0",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.20",
     "material-design-icons-iconfont": "^3.0.3",
     "moment": "^2.24.0",
     "node-sass": "^4.14.1",

src/App.vue

   name: "app",
   components: {
     NavBar,
-    FooterSection,
+    FooterSection
   },
   methods: {
     routerGoTo(goTo) {
       this.$router.push(goTo);
-    },
-  },
+    }
+  }
 };
 </script>
 
   cursor: pointer;
 }
 hr {
-  background-color: #24aae1;
+  background-color: #6c757d;
 }
 .my-btn {
   margin: 2px;
-  color: #24aae1;
+  color: #6c757d;
 }
 .title-img {
   width: 800px;
   border-radius: 15px;
 }
 .myBackground {
-  border-color: #24aae1;
-  background-color: #24aae1;
+  border-color: #6c757d;
+  background-color: #6c757d;
 }
 .myFill {
-  fill: #24aae1;
-  color: #24aae1;
+  fill: #6c757d;
+  color: #6c757d;
 }
 .mySuccess {
   border-color: rgba(2, 184, 117, 0.5);
   cursor: pointer;
 }
 a:hover {
-  color: #24aae1;
+  color: #6c757d;
 }
 #app {
   font-family: "Avenir", Helvetica, Arial, sans-serif;
   margin: 0;
 }
 .isSelected {
-  border-color: white white #24aae1 white;
+  border-color: white white #6c757d white;
 }
 .isUnSelected {
   border-color: white white white white;
   color: white;
 }
 .normalText {
-  background-color: #24aae1;
+  background-color: #6c757d;
 }
 .pendingOffer {
   background-color: #ff8344;

src/components/accounts/login.vue

           <div class="input-group mb-3">
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="person-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
           <div class="input-group mb-3">
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="lock-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="lock-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
               />
               <div class="input-group-append">
                 <span class="input-group-text" @click="togglePassword()">
-                  <eva-icon v-if="showPassword" name="eye-off-outline" fill="#24aae1"></eva-icon>
-                  <eva-icon v-else name="eye-outline" fill="#24aae1"></eva-icon>
+                  <eva-icon v-if="showPassword" name="eye-off-outline" fill="#6c757d"></eva-icon>
+                  <eva-icon v-else name="eye-outline" fill="#6c757d"></eva-icon>
                 </span>
               </div>
             </div>
     };
   },
   methods: {
-    ...mapActions("authentiaction", [
-      "getAuthentication",
-      "checkAuthentication"
-    ]),
+    ...mapActions("authentiaction", ["getAuthentication", "checkAuthentication"]),
     Login() {
       this.checkAuthentication(this.auth).then(() => {
         //console.log(JSON.stringify(this.$store.state.authentiaction.result));

src/components/accounts/register.vue

             <label>Name</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="person-outline" fill="#6c757d"></eva-icon>
               </span>
-              <input class="form-control" type="text" name="name" v-model="userContainer.firstName" />
+              <input
+                class="form-control"
+                type="text"
+                name="name"
+                v-model="userContainer.firstName"
+              />
             </div>
           </div>
         </div>
             <label>Surname</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="book-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="book-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>Email Address</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="email-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="email-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>Cellphone</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="phone-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="phone-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>Password</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="lock-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="lock-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>Confirm Password</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="lock-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="lock-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
                     <eva-icon
                       v-if="showPassword"
                       name="eye-off-outline"
-                      fill="#24aae1"
+                      fill="#6c757d"
+                      @click="togglePassword()"
+                    ></eva-icon>
+                    <eva-icon
+                      v-else
+                      name="eye-outline"
+                      fill="#6c757d"
                       @click="togglePassword()"
                     ></eva-icon>
-                    <eva-icon v-else name="eye-outline" fill="#24aae1" @click="togglePassword()"></eva-icon>
                   </span>
                 </div>
               </div>
         <div class="form-group row"></div>
         <div class="row offset-md-4">
           <div class="col-md-2">
-            <button
-              @click="RegisterData()"
-              class="btn btn-b-n"
-              type="submit"
-              data-dismiss="modal"
-            >Submit</button>
+            <button @click="RegisterData()" class="btn btn-b-n" type="submit" data-dismiss="modal">
+              Submit
+            </button>
           </div>
           <div class="col-md-2 offset-md-1">
-            <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">Cancel</button>
+            <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">
+              Cancel
+            </button>
           </div>
         </div>
       </div>

src/components/accounts/restaurantRegistration.vue

             <label>Name</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="edit-2-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="edit-2-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>Delivery Fee</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="credit-card-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>Delivery Radius (KM)</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="pin-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="pin-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>Delivery Time (Minutes)</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="clock-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="clock-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>Shopping Centre</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="shopping-cart-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="shopping-cart-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>Shop Number</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="hash-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="hash-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>First Name</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="person-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>Surname</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="book-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="book-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>Email Address</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="email-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="email-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>Password</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="lock-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="lock-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>Confirm Password</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="lock-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="lock-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
                     <eva-icon
                       v-if="showPassword"
                       name="eye-off-outline"
-                      fill="#24aae1"
+                      fill="#6c757d"
+                      @click="togglePassword()"
+                    ></eva-icon>
+                    <eva-icon
+                      v-else
+                      name="eye-outline"
+                      fill="#6c757d"
                       @click="togglePassword()"
                     ></eva-icon>
-                    <eva-icon v-else name="eye-outline" fill="#24aae1" @click="togglePassword()"></eva-icon>
                   </span>
                 </div>
               </div>
         <div class="form-group row"></div>
         <div class="row offset-md-4">
           <div class="col-md-2">
-            <button
-              @click="SubmitData()"
-              class="btn btn-b-n"
-              type="button"
-              data-dismiss="modal"
-            >Submit</button>
+            <button @click="SubmitData()" class="btn btn-b-n" type="button" data-dismiss="modal">
+              Submit
+            </button>
           </div>
           <div class="col-md-2 offset-md-1">
-            <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">Cancel</button>
+            <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">
+              Cancel
+            </button>
           </div>
         </div>
         <div class="row" style="text-align:left">
 
       this.restaurantContainer.categories = cats;
       this.restaurantContainer.methodsOfPayment = mops;
-      this.restaurantContainer.deliveryTime =
-        this.deliverfrom + " - " + this.deliverTo + " Min";
+      this.restaurantContainer.deliveryTime = this.deliverfrom + " - " + this.deliverTo + " Min";
 
       if (this.restaurantContainer.userPassword !== this.confirmpassword) {
         this.hasError = true;

src/components/accounts/tradingHours.vue

       <div class="col-md-12" style="margin-bottom: 1em">
         <label>Description</label>
         <div class="input-group-prepend">
-          <span class="input-group-text" style="color: #24aae1">
+          <span class="input-group-text" style="color: #6c757d">
             <b>D</b>
           </span>
           <input class="form-control" type="text" v-model="tradingData.description" />
       <div class="col-md-6" style="margin-bottom: 1em">
         <label>From</label>
         <div class="input-group-prepend">
-          <span class="input-group-text" style="color: #24aae1">
+          <span class="input-group-text" style="color: #6c757d">
             <b>F</b>
           </span>
           <VueTimepicker v-model="tradingData.from" :disabled="EnableTime"></VueTimepicker>
       <div class="col-md-6" style="margin-bottom: 1em">
         <label>To</label>
         <div class="input-group-prepend">
-          <span class="input-group-text" style="color: #24aae1">
+          <span class="input-group-text" style="color: #6c757d">
             <b>T</b>
           </span>
           <VueTimepicker v-model="tradingData.to" :disabled="EnableTime"></VueTimepicker>
             @change="selectionChangedHours"
             :disabled="tradingData.closed"
           />
-          <label
-            class="custom-control-label"
-            for="th24HSwitch"
-            style="margin-left: 40px"
-          >{{tradingData.open24 ? 'Yes' : 'No'}}</label>
+          <label class="custom-control-label" for="th24HSwitch" style="margin-left: 40px">{{
+            tradingData.open24 ? "Yes" : "No"
+          }}</label>
         </div>
       </div>
     </div>
             @change="selectionChanged"
             :disabled="tradingData.open24"
           />
-          <label
-            class="custom-control-label"
-            for="thCloseSwitch"
-            style="margin-left: 40px"
-          >{{tradingData.closed ? 'Yes' : 'No'}}</label>
+          <label class="custom-control-label" for="thCloseSwitch" style="margin-left: 40px">{{
+            tradingData.closed ? "Yes" : "No"
+          }}</label>
         </div>
       </div>
     </div>

src/components/customer/customerDetails.vue

             <label>Name</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="person-outline" fill="#6c757d"></eva-icon>
               </span>
               <input class="form-control" type="text" name="FirstName" v-model="user.firstName" />
             </div>
             <label>Surname</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="person-outline" fill="#6c757d"></eva-icon>
               </span>
               <input class="form-control" type="text" name="Surname" v-model="user.surname" />
             </div>
             <label>Eamil Addres</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="person-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>Cellphone</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="person-outline" fill="#6c757d"></eva-icon>
               </span>
               <input class="form-control" type="text" name="cellphone" v-model="user.cellphone" />
             </div>
                 :checked="userAddress.isComplex"
                 @change="selectionChanged"
               />
-              <label
-                class="custom-control-label"
-                for="thCloseSwitch"
-                style="margin-left: 40px"
-              >{{userAddress.isComplex ? 'Yes' : 'No'}}</label>
+              <label class="custom-control-label" for="thCloseSwitch" style="margin-left: 40px">
+                {{
+                userAddress.isComplex ? "Yes" : "No"
+                }}
+              </label>
             </div>
           </div>
         </div>
         <div class="row" style="text-align:left">
           <div class="col-md-4" style="margin-bottom: 1em">
-            <button
-              @click="ShowMap()"
-              class="btn btn-b-n"
-              type="button"
-              data-dismiss="modal"
-            >Update Address</button>
+            <b-button class="mt-2" @click="ShowMap()">Update Address</b-button>
           </div>
         </div>
         <div v-if="userAddress.isComplex" class="row" style="text-align:left">
             <label>Complex Name</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="person-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>Unit Number</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="person-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
                 <label>Street Number</label>
                 <div class="input-group-prepend">
                   <span class="input-group-text">
-                    <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                    <eva-icon name="person-outline" fill="#6c757d"></eva-icon>
                   </span>
                   <input
                     class="form-control"
                 <label>Street Name</label>
                 <div class="input-group-prepend">
                   <span class="input-group-text">
-                    <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                    <eva-icon name="person-outline" fill="#6c757d"></eva-icon>
                   </span>
                   <input
                     class="form-control"
                 <label>Suburb</label>
                 <div class="input-group-prepend">
                   <span class="input-group-text">
-                    <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                    <eva-icon name="person-outline" fill="#6c757d"></eva-icon>
                   </span>
                   <input
                     class="form-control"
                 <label>City</label>
                 <div class="input-group-prepend">
                   <span class="input-group-text">
-                    <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                    <eva-icon name="person-outline" fill="#6c757d"></eva-icon>
                   </span>
                   <input
                     class="form-control"
                 <label>Province</label>
                 <div class="input-group-prepend">
                   <span class="input-group-text">
-                    <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                    <eva-icon name="person-outline" fill="#6c757d"></eva-icon>
                   </span>
                   <input
                     class="form-control"
                 <label>Postal Code</label>
                 <div class="input-group-prepend">
                   <span class="input-group-text">
-                    <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                    <eva-icon name="person-outline" fill="#6c757d"></eva-icon>
                   </span>
                   <input
                     class="form-control"
         </div>
         <div class="row offset-md-5">
           <div class="col-md-2">
-            <button @click="Save()" class="btn btn-b-n" type="button" data-dismiss="modal">Save</button>
+            <b-button class="mt-2" @click="Save()">Save</b-button>
           </div>
           <div class="col-md-2">
-            <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">Close</button>
+            <b-button class="mt-2" @click="Close()">Close</b-button>
           </div>
         </div>
       </div>
         <Map :showLocationLabel="false" @GoogleAddress="UpdateAddress" />
         <div class="row" style="text-align:left">
           <div class="col-md-4" style="margin-bottom: 1em">
-            <button @click="HideMap()" class="btn btn-b-n" type="button" data-dismiss="modal">Close</button>
+            <b-button class="mt-2" @click="HideMap()">Close</b-button>
           </div>
         </div>
       </div>
     this.getUserAddress(Log.userId());
   },
 };
-</script>
+</script>

src/components/customer/customerOrder.vue

+<template>
+  <b-container fluid class="mt-5 ml-5 mr-5 md">
+    <div class="row">
+      <div class="col-md-12 col-lg-8">
+        <div class="title-box-d">
+          <br />
+          <h1 class="title-d" style="text-align:left; font-size: 250%">Order Details</h1>
+        </div>
+      </div>
+    </div>
+    <b-row>
+      <b-card class="col-md-11 itemCard" style="text-align:left; cursor: pointer;">
+        <b-card-title>
+          <b>Order #{{ order.id }}</b>
+          | {{ order.restaurantName }}
+          | {{ order.date | toDate }}
+        </b-card-title>
+        <b-card-title>
+          <b-row>
+            <b-col cols="6">{{order.status}}</b-col>
+            <b-col></b-col>
+            <b-col></b-col>
+            <b-col></b-col>
+            <b-col></b-col>
+            <b-col>
+              <b-button v-if="order.status === 'Awaiting Payment'" class="mt-5">Make Payment</b-button>
+            </b-col>
+          </b-row>
+        </b-card-title>
+        <hr />
+        <b-card-body>
+          <b-row>
+            <b-col cols="6">
+              <b>Address</b>
+            </b-col>
+            <b-col>
+              <b>Method Of Payment</b>
+            </b-col>
+            <b-col></b-col>
+            <b-col></b-col>
+            <b-col>
+              <b>Order Summary</b>
+            </b-col>
+            <b-col></b-col>
+          </b-row>
+          <b-row>
+            <b-col cols="6">{{ order.customerName }}</b-col>
+            <b-col>{{ order.methodOfPayment }}</b-col>
+            <b-col></b-col>
+            <b-col></b-col>
+            <b-col>Items: {{ order.totalItems }}</b-col>
+            <b-col style="text-align:right;">{{ order.subTotal | toCurrency }}</b-col>
+          </b-row>
+          <b-row>
+            <b-col cols="6">{{ order.complexLine }}</b-col>
+            <b-col></b-col>
+            <b-col></b-col>
+            <b-col></b-col>
+            <b-col>Delivery Fee:</b-col>
+            <b-col style="text-align:right;">{{ order.deliveryFee | toCurrency }}</b-col>
+          </b-row>
+          <b-row>
+            <b-col cols="6">{{ order.streetLine }}</b-col>
+            <b-col>
+              <b>Delivery Method</b>
+            </b-col>
+            <b-col></b-col>
+            <b-col></b-col>
+            <b-col></b-col>
+            <b-col></b-col>
+          </b-row>
+          <b-row>
+            <b-col cols="6">{{ order.suburb }}</b-col>
+            <b-col>{{ order.deliveryMethod }}</b-col>
+            <b-col></b-col>
+            <b-col></b-col>
+            <b-col>Order Total:</b-col>
+            <b-col style="text-align:right;">
+              <b>{{ order.subTotal + order.deliveryFee | toCurrency }}</b>
+            </b-col>
+          </b-row>
+          <b-row>
+            <b-col cols="6">{{ order.city }}</b-col>
+            <b-col></b-col>
+            <b-col></b-col>
+            <b-col></b-col>
+            <b-col></b-col>
+            <b-col></b-col>
+          </b-row>
+          <b-row>
+            <b-col cols="6">{{ order.postalCode }}</b-col>
+            <b-col></b-col>
+            <b-col></b-col>
+            <b-col></b-col>
+            <b-col></b-col>
+          </b-row>
+        </b-card-body>
+        <h4>Items</h4>
+        <b-card-body>
+          <div v-for="item in order.lines" :key="item.id">
+            <b-card no-body class="overflow-hidden" style="cursor: pointer;">
+              <b-row no-gutters>
+                <b-col cols="1">
+                  <b-card-img
+                    :src="item.image"
+                    alt="Image"
+                    style="max-height: 100px; max-width:100px"
+                    class="rounded-0 mt-2 ml-2"
+                  ></b-card-img>
+                </b-col>
+                <b-col>
+                  <b-card-body>
+                    <b-row>
+                      <b-col cols="6">
+                        <h5>{{ item.name }}</h5>
+                      </b-col>
+                      <b-col>
+                        <strong>Price:</strong>
+                      </b-col>
+                      <b-col>
+                        <strong>Quantity:</strong>
+                      </b-col>
+                      <b-col>
+                        <strong>Line Total:</strong>
+                      </b-col>
+                      <b-col></b-col>
+                      <b-col></b-col>
+                    </b-row>
+                    <b-row class="mt-2">
+                      <b-col cols="6">{{ item.description }}</b-col>
+                      <b-col>{{ item.price }}</b-col>
+                      <b-col>{{ item.qty }}</b-col>
+                      <b-col>{{ item.subTotal }}</b-col>
+                      <b-col></b-col>
+                      <b-col></b-col>
+                    </b-row>
+                  </b-card-body>
+                </b-col>
+              </b-row>
+            </b-card>
+          </div>
+        </b-card-body>
+      </b-card>
+    </b-row>
+    <b-row>
+      <b-button fluid class="mt-5 ml-5 mr-5 md" @click="Back">Back</b-button>
+    </b-row>
+  </b-container>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+import Log from "../../assets/Log";
+
+export default {
+  name: "OrderDetail",
+  methods: {
+    ...mapActions("order", ["getUserOrder"]),
+    Back() {
+      this.$router.push("/MyOrders");
+    },
+  },
+  computed: {
+    ...mapState("order", ["order"]),
+  },
+  mounted() {
+    this.getUserOrder(this.$route.params.id);
+  },
+};
+</script>

src/components/customer/customerOrders.vue

 <template>
-  <div>
-    <div class="conainer">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12 col-lg-8">
-            <div class="title-box-d">
-              <br />
-              <h1 class="title-d" style="text-align:left; font-size: 250%">My Orders</h1>
-            </div>
-          </div>
-        </div>
-        <div class="row"></div>
-        <div class="row">
-          <div class="col-md-12">
-            <listView />
-          </div>
+  <b-container fluid class="mt-5 ml-5 mr-5 md">
+    <div class="row">
+      <div class="col-md-12 col-lg-8">
+        <div class="title-box-d">
+          <br />
+          <h1 class="title-d" style="text-align:left; font-size: 250%">My Orders</h1>
         </div>
       </div>
     </div>
-  </div>
+    <b-row v-for="order in orders" :key="order.id">
+      <b-card
+        class="col-md-11 itemCard"
+        style="text-align:left; cursor: pointer;"
+        @click="ShowDetails(order.id)"
+      >
+        <b-card-title>
+          <b>Date:</b>
+          {{ order.date | toDate }}
+          <!-- <b-button style="text-align:right">Details</b-button> -->
+        </b-card-title>
+        <b-card-sub-title>
+          <b>Time:</b>
+          {{ order.date | toTime }}
+          <br />
+          <b>Status:</b>
+          {{ order.status }}
+        </b-card-sub-title>
+        <hr />
+
+        <b-card-img
+          v-for="(image, i) in order.images"
+          :key="i"
+          :src="image"
+          img-alt="Card image"
+          img-left
+          class="mb-3"
+          style="max-height: 96px; max-width:96px; margin-left: 10px;"
+        />
+
+        <b-card-footer>
+          <b>Total:</b>
+          {{ order.total | toCurrency }}
+        </b-card-footer>
+      </b-card>
+    </b-row>
+  </b-container>
 </template>
 
 <script>
-import listView from "../shared/listView";
+import { mapState, mapActions } from "vuex";
+import Log from "../../assets/Log";
 
 export default {
   name: "CustomerOrders",
-  components: {
-    listView
-  }
+  methods: {
+    ...mapActions("order", ["getUserOrders"]),
+    ShowDetails(id) {
+      this.$router.push(`/OrderDetails/${id}`);
+    },
+  },
+  computed: {
+    ...mapState("order", ["orders"]),
+  },
+  mounted() {
+    this.getUserOrders(Log.userId());
+  },
 };
 </script>

src/components/orders/cart.vue

 <template>
-  <div class="container">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-12 col-lg-8">
-          <div class="title-box-d">
-            <br />
-            <h1 class="title-d" style="text-align:left; font-size: 250%">My Cart</h1>
-          </div>
-        </div>
-      </div>
-      <!-- ListView -->
-      <ListView
-        :items="cartItems"
-        :displayColumns="columns"
-        :displayFormats="formats"
-        :editable="true"
-        :deleteable="true"
-        @onEdit="Edit"
-        @onDelete="Delete"
-      />
-      <div class="row">
-        <div class="col-md-12" style="margin-bottomL 1em">
-          <!-- RestaurantFeeDel -->
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-md-2 offset-md-8" style="margin-bottomL 1em">
-          <label style="margin-top: 0.5em">
-            <b>Delivery Fee:</b>
-          </label>
-        </div>
-        <div class="col-md-2" style="margin-bottomL 1em">
-          <label style="margin-top: 0.5em">
-            <b>{{deliveryFee | toCurrency}}</b>
-          </label>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-md-2 offset-md-8" style="margin-bottomL 1em">
-          <label style="margin-top: 0.5em">
-            <b>Order Total:</b>
-          </label>
-        </div>
-        <div class="col-md-2" style="margin-bottomL 1em">
-          <label style="margin-top: 0.5em">
-            <b>{{OrderTotal | toCurrency}}</b>
-          </label>
-        </div>
-      </div>
-      <modal name="menu" :width="800" :height="600">
-        <Cart :showItem="CurrentItem" @Close="CloseItem" />
-      </modal>
-      <br />
-      <div class="row">
-        <div class="col-md-12" style="margin-bottomL 1em">
-          <div class="row offset-md-4">
-            <div class="col-md-3">
-              <button
-                @click="CheckOut()"
-                class="btn btn-b-n"
-                type="button"
-                data-dismiss="modal"
-                :disabled="cartItems.length == 0"
-              >Check Out</button>
-            </div>
-            <div class="col-md-3">
-              <button
-                @click="ClearCart()"
-                class="btn btn-b-n"
-                type="button"
-                data-dismiss="modal"
-                :disabled="cartItems.length == 0"
-              >Clear Cart</button>
-            </div>
-          </div>
+  <!-- <div class="container"> -->
+  <b-container fluid class="mt-5 ml-5 mr-5 md">
+    <div class="row">
+      <div class="col-md-12 col-lg-8">
+        <div class="title-box-d">
+          <br />
+          <h1 class="title-d" style="text-align:left; font-size: 250%">My Cart</h1>
         </div>
       </div>
     </div>
-  </div>
+    <b-row v-if="cartItems.length > 0">
+      <b-col cols="8">
+        <div v-for="item in cartItems" :key="item.id">
+          <b-card
+            no-body
+            class="overflow-hidden itemCard mt-2"
+            @click="Edit(item)"
+            style="cursor: pointer;"
+          >
+            <b-row no-gutters>
+              <b-col cols="1">
+                <b-card-img
+                  :src="item.image"
+                  alt="Image"
+                  style="max-height: 150px; max-width:150px"
+                  class="rounded-0 mt-2 ml-2"
+                ></b-card-img>
+              </b-col>
+              <b-col>
+                <b-card-body>
+                  <b-row>
+                    <b-col cols="6">
+                      <h5>{{ item.name }}</h5>
+                    </b-col>
+                    <b-col>
+                      <strong>Price:</strong>
+                    </b-col>
+                    <b-col>
+                      <strong>Quantity:</strong>
+                    </b-col>
+                    <b-col>
+                      <strong>Line Total:</strong>
+                    </b-col>
+                    <b-col></b-col>
+                  </b-row>
+                  <b-row class="mt-2">
+                    <b-col cols="6">{{ item.description }}</b-col>
+                    <b-col>{{ item.price | toCurrency }}</b-col>
+                    <b-col class="mr-5">{{ item.qty }}</b-col>
+                    <b-col>{{ item.subTotal | toCurrency }}</b-col>
+                    <b-col>
+                      <b-button @click="Delete(item)" variant="danger">
+                        <strong>
+                          <font-awesome-icon icon="trash"></font-awesome-icon>
+                        </strong>
+                      </b-button>
+                    </b-col>
+                  </b-row>
+                </b-card-body>
+              </b-col>
+            </b-row>
+          </b-card>
+        </div>
+      </b-col>
+      <b-col style="margin-right: 200px;">
+        <!-- <b-container class="shoppingDetail mb-2">
+          <b-row>
+            <b-col>
+              <ProfileShipCart class="mb-3" />
+            </b-col>
+          </b-row>
+        </b-container>-->
+        <b-container class="shoppingDetail">
+          <b-row class="mt-3">
+            <b-col align="right">
+              <b-row>
+                <b-col>
+                  <h6>Total Cart Items</h6>
+                </b-col>
+                <b-col cols="3">
+                  <h6>{{ OrderQty }}</h6>
+                </b-col>
+              </b-row>
+              <hr />
+              <b-row>
+                <b-col>
+                  <h5>Subtotal</h5>
+                </b-col>
+                <b-col cols="3">
+                  <h5>{{ OrderSubTotal | toCurrency }}</h5>
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col>
+                  <h5>Delivery Fee</h5>
+                </b-col>
+                <b-col cols="3">
+                  <h5>{{ deliveryFee | toCurrency }}</h5>
+                </b-col>
+              </b-row>
+              <hr />
+              <b-row>
+                <b-col>
+                  <h4>Grand Total</h4>
+                </b-col>
+                <b-col cols="3">
+                  <h4>{{ OrderTotal | toCurrency }}</h4>
+                </b-col>
+              </b-row>
+              <hr />
+
+              <b-row class="mt-2 mb-2">
+                <b-col>
+                  <b-button @click="CheckOut">Checkout</b-button>
+                </b-col>
+              </b-row>
+            </b-col>
+          </b-row>
+        </b-container>
+      </b-col>
+    </b-row>
+    <b-container v-if="cartItems.length > 0">
+      <b-row>
+        <b-col></b-col>
+        <b-col>
+          <b-row class="mt-3">
+            <b-col class="ml-5" align="right">
+              <b-button class="mt-2" variant="danger" v-on:click="ClearCart">Clear Cart</b-button>
+            </b-col>
+            <b-col></b-col>
+          </b-row>
+        </b-col>
+      </b-row>
+    </b-container>
+    <b-container v-else>
+      <p>Your cart is empty</p>
+      <b-button class="mt-2" v-on:click="GoHome">Continue Shopping</b-button>
+    </b-container>
+    <modal name="menu" :width="800" :height="600">
+      <Cart :showItem="CurrentItem" @Close="CloseItem" />
+    </modal>
+  </b-container>
+  <!-- </div> -->
 </template>
 
 <script>
 import { mapState, mapActions } from "vuex";
 import ListView from "../shared/listView";
 import Cart from "./cartItem";
+import Log from "../../assets/Log";
+import orderOptionSelectionVue from "./orderOptionSelection.vue";
 
 export default {
   name: "MyCart",
   },
   methods: {
     ...mapActions("cart", ["getDeliveryFee"]),
+    ...mapActions("order", ["saveOrder"]),
     New() {},
     Edit(item) {
       this.item = item;
       }
     },
     CheckOut() {
-      this.$router.push("/ConfirmOrder");
+      let orderObject = {};
+      orderObject.deliveryAddress = { userid: Log.userId() };
+      orderObject.items = [];
+
+      for (let i = 0; i < this.cartItems.length; i++) {
+        let item = {
+          id: this.cartItems[i].id,
+          description: this.cartItems[i].description,
+          name: this.cartItems[i].name,
+          subTotal: this.cartItems[i].subTotal,
+          qty: this.cartItems[i].qty,
+          selection: this.cartItems[i].selection,
+          price: this.cartItems[i].price,
+          restaurantId: this.cartItems[i].restaurantId,
+        };
+
+        orderObject.items.push(item);
+      }
+
+      this.saveOrder(orderObject)
+        .then((fulfilled) => {
+          this.cartItems.splice(0, this.cartItems.length);
+          this.$router.push(`/ConfirmOrder/${this.order.orderId}`);
+        })
+        .catch((error) => {
+          alert(error.message);
+        });
+
+      //this.$router.push("/ConfirmOrder");
     },
     ClearCart() {
       this.deliveryFee = 0;
       this.cartItems.splice(0, this.cartItems.length);
     },
+    GoHome() {
+      this.$router.push("/");
+    },
   },
   computed: {
     ...mapState("cart", ["cartItems", "deliveryFee"]),
+    ...mapState("order", ["order"]),
     CurrentItem() {
       return this.item;
     },
       }
       return tot + this.deliveryFee;
     },
+    OrderSubTotal() {
+      var tot = 0;
+      for (let i = 0; i < this.cartItems.length; i++) {
+        tot = tot + this.cartItems[i].subTotal;
+      }
+      return tot;
+    },
+    OrderQty() {
+      var tot = 0;
+      for (let i = 0; i < this.cartItems.length; i++) {
+        tot = tot + this.cartItems[i].qty;
+      }
+      return tot;
+    },
   },
   mounted() {
     if (this.cartItems.length > 0) {

src/components/orders/cartCard.vue

+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12 col-lg-8">
+        <div class="title-box-d">
+          <br />
+          <h1 class="title-d" style="text-align:left; font-size: 250%">My Cart</h1>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+
+<style lang="scss" scoped>
+.shipHeader {
+  color: black;
+}
+.itemCard {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.12);
+}
+.shoppingDetail {
+  background-color: #f5f5f5;
+  border-style: solid;
+  border-color: rgb(185, 185, 185);
+  border-width: thin;
+}
+</style>

src/components/orders/confirmOrder.vue

 import StepTwo from "./orderConf/makePayment";
 import StepThree from "./orderConf/orderPlaced";
 
+import { mapState, mapActions } from "vuex";
+import Log from "../../assets/Log";
+
 export default {
   components: {
     HorizontalStepper,
     };
   },
   methods: {
+    ...mapActions("order", ["updateOrder", "getCartOrder"]),
     // Executed when @completed-step event is triggered
     completeStep(payload) {
       this.demoSteps.forEach((step) => {
       alert("end");
     },
   },
+  computed: {
+    ...mapState("order", ["order"]),
+  },
 };
 </script>

src/components/orders/orderConf/confAddress.vue

             :checked="userAddress.isComplex"
             @change="selectionChanged"
           />
-          <label class="custom-control-label" for="thCloseSwitch" style="margin-left: 40px">
-            {{
-            isComplex ? "Yes" : "No"
-            }}
-          </label>
+          <label
+            class="custom-control-label"
+            for="thCloseSwitch"
+            style="margin-left: 40px"
+          >{{ isComplex ? "Yes" : "No" }}</label>
         </div>
       </div>
     </div>
         <label>Complex Name</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="navigation-2-outline" fill="#6c757d"></eva-icon>
           </span>
           <input
             class="form-control"
         <label>Unit Number</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="navigation-2-outline" fill="#6c757d"></eva-icon>
           </span>
           <input class="form-control" type="text" name="Surname" v-model="userAddress.unitNumber" />
         </div>
             <label>Street Number</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="navigation-2-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>Street Name</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="navigation-2-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>Suburb</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="navigation-2-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>City</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="navigation-2-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>Province</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="navigation-2-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
             <label>Postal Code</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+                <eva-icon name="navigation-2-outline" fill="#6c757d"></eva-icon>
               </span>
               <input
                 class="form-control"
   },
   methods: {
     ...mapActions("user", ["getUserAddress"]),
+    ...mapActions("order", ["updateAddress"]),
     selectionChanged() {
       this.userAddress.isComplex = !this.userAddress.isComplex;
     },
       });
     },
     Continue() {
-      this.order.deliveryAddress = this.userAddress;
-      this.order.items = this.cartItems;
-      this.$emit("can-continue", { value: true });
+      this.UpdateAddressContinue();
     },
     UpdateAddress(address) {
       this.userAddress.streetNumber = address.streetNumber;
       this.userAddress.googleMapUrl = address.url;
       this.userAddress.latitude = address.coordinates.lat;
       this.userAddress.longitude = address.coordinates.lng;
-      this.$emit("can-continue", { value: true });
+      this.order.deliveryAddress = this.userAddress;
+      this.UpdateAddressContinue();
+    },
+    UpdateAddressContinue() {
+      let obj = this.userAddress;
+      obj.orderId = this.order.orderId;
+      this.updateAddress(obj).then(this.$emit("can-continue", { value: true }));
     },
   },
   computed: {

src/components/restaurants/restaurantCategory.vue

         <label>Description</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="credit-card-outline" fill="#6c757d"></eva-icon>
           </span>
           <input class="form-control" type="text" name="description" v-model="category.description" />
         </div>
         <img :src="category.image" style="height:200px; width:200px; object-fit: cover;" />
         <br />
         <span class="input-group-text" align="center" style="width:150px" @click="removeImage()">
-          <eva-icon name="trash-2-outline" fill="#24aae1"></eva-icon>Delete
+          <eva-icon name="trash-2-outline" fill="#6c757d"></eva-icon>Delete
         </span>
       </div>
     </div>
     <div class="row">
       <div class="col-md-12" style="margin-bottom: 1em">
         <div class="input-group-prepend">
-          <b-button class="btn btn-b-n" @click="Ok">Ok</b-button>
+          <!-- <b-button class="btn btn-b-n" @click="Ok">Ok</b-button> -->
+          <b-button class="mt-2" @click="Ok">Ok</b-button>
         </div>
       </div>
     </div>
 export default {
   name: "Category",
   props: {
-    editCategory: { default: {} }
+    editCategory: { default: {} },
   },
   components: {
-    ImageUploader
+    ImageUploader,
   },
   data() {
     return {
       category: {
         id: 0,
         image: null,
-        description: ""
-      }
+        description: "",
+      },
     };
   },
   methods: {
-    setImage: function(output) {
+    setImage: function (output) {
       this.hasImage = true;
       this.category.image = output.dataUrl;
     },
     },
     removeImage() {
       this.category.image = null;
-    }
+    },
   },
   watch: {
     editCategory: {
         if (val) {
           this.category = val;
         }
-      }
-    }
-  }
+      },
+    },
+  },
 };
-</script>
+</script>

src/components/restaurants/restaurantDetails.vue

               <label>Update Logo</label>
               <div class="input-group-prepend">
                 <span class="input-group-text" style="cursor: pointer;" @click="UpdateLogo">
-                  <eva-icon @click="UpdateLogo" name="image-outline" fill="#24aae1"></eva-icon>
+                  <eva-icon @click="UpdateLogo" name="image-outline" fill="#6c757d"></eva-icon>
                 </span>
               </div>
             </div>
               <label>Name</label>
               <div class="input-group-prepend">
                 <span class="input-group-text">
-                  <eva-icon name="edit-2-outline" fill="#24aae1"></eva-icon>
+                  <eva-icon name="edit-2-outline" fill="#6c757d"></eva-icon>
                 </span>
                 <input class="form-control" type="text" name="rname" v-model="restaurant.name" />
               </div>
               <label>Delivery Fee</label>
               <div class="input-group-prepend">
                 <span class="input-group-text">
-                  <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+                  <eva-icon name="credit-card-outline" fill="#6c757d"></eva-icon>
                 </span>
                 <input
                   class="form-control"
               <label>Delivery Radius (KM)</label>
               <div class="input-group-prepend">
                 <span class="input-group-text">
-                  <eva-icon name="pin-outline" fill="#24aae1"></eva-icon>
+                  <eva-icon name="pin-outline" fill="#6c757d"></eva-icon>
                 </span>
                 <input
                   class="form-control"
               <label>Delivery Time (Minutes)</label>
               <div class="input-group-prepend">
                 <span class="input-group-text">
-                  <eva-icon name="clock-outline" fill="#24aae1"></eva-icon>
+                  <eva-icon name="clock-outline" fill="#6c757d"></eva-icon>
                 </span>
                 <input
                   class="form-control"
               <label>Shopping Centre</label>
               <div class="input-group-prepend">
                 <span class="input-group-text">
-                  <eva-icon name="shopping-cart-outline" fill="#24aae1"></eva-icon>
+                  <eva-icon name="shopping-cart-outline" fill="#6c757d"></eva-icon>
                 </span>
                 <input
                   class="form-control"
               <label>Shop Number</label>
               <div class="input-group-prepend">
                 <span class="input-group-text">
-                  <eva-icon name="hash-outline" fill="#24aae1"></eva-icon>
+                  <eva-icon name="hash-outline" fill="#6c757d"></eva-icon>
                 </span>
                 <input
                   class="form-control"
               <label>Street Number</label>
               <div class="input-group-prepend">
                 <span class="input-group-text">
-                  <eva-icon name="navigation-2-outline" fill="#24aae1"></eva-icon>
+                  <eva-icon name="navigation-2-outline" fill="#6c757d"></eva-icon>
                 </span>
                 <input
                   class="form-control"
               <label>Street Name</label>
               <div class="input-group-prepend">
                 <span class="input-group-text">
-                  <eva-icon name="navigation-2-outline" fill="#24aae1"></eva-icon>
+                  <eva-icon name="navigation-2-outline" fill="#6c757d"></eva-icon>
                 </span>
                 <input
                   class="form-control"
               <label>Suburb</label>
               <div class="input-group-prepend">
                 <span class="input-group-text">
-                  <eva-icon name="navigation-2-outline" fill="#24aae1"></eva-icon>
+                  <eva-icon name="navigation-2-outline" fill="#6c757d"></eva-icon>
                 </span>
                 <input
                   class="form-control"
               <label>City</label>
               <div class="input-group-prepend">
                 <span class="input-group-text">
-                  <eva-icon name="navigation-2-outline" fill="#24aae1"></eva-icon>
+                  <eva-icon name="navigation-2-outline" fill="#6c757d"></eva-icon>
                 </span>
                 <input
                   class="form-control"
               <label>Province</label>
               <div class="input-group-prepend">
                 <span class="input-group-text">
-                  <eva-icon name="navigation-2-outline" fill="#24aae1"></eva-icon>
+                  <eva-icon name="navigation-2-outline" fill="#6c757d"></eva-icon>
                 </span>
                 <input
                   class="form-control"
               <label>Postal Code</label>
               <div class="input-group-prepend">
                 <span class="input-group-text">
-                  <eva-icon name="navigation-2-outline" fill="#24aae1"></eva-icon>
+                  <eva-icon name="navigation-2-outline" fill="#6c757d"></eva-icon>
                 </span>
                 <input
                   class="form-control"
         <div class="col-md-6" style="margin-bottomL 1em">
           <div class="row" style="text-align:left">
             <div class="col-md-4" style="margin-bottom: 1em">
-              <button
-                @click="ShowMap()"
-                class="btn btn-b-n"
-                type="button"
-                data-dismiss="modal"
-              >Update Address</button>
+              <b-button class="mt-2" @click="ShowMap()">Update Address</b-button>
             </div>
           </div>
           <Map :showAutoComplete="false" :showLocationLabel="false" :setLocation="mapCoords" />
       </div>
       <div class="row offset-md-5">
         <div class="col-md-2">
-          <button @click="Save()" class="btn btn-b-n" type="button" data-dismiss="modal">Save</button>
+          <b-button class="mt-2" @click="Save()">Save</b-button>
         </div>
         <div class="col-md-2">
-          <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">Close</button>
+          <b-button class="mt-2" @click="Close()">Close</b-button>
         </div>
       </div>
     </div>
     ListView,
     Categories,
     TradingHours,
-    ImageUploader
+    ImageUploader,
   },
   data() {
     return {
         "openingTime",
         "closingTime",
         "closed",
-        "opened24H"
+        "opened24H",
       ],
       wait: false,
       selectedMops: [],
       hasImage: false,
-      restaurantId: Log.restaurantId()
+      restaurantId: Log.restaurantId(),
     };
   },
   methods: {
     ...mapActions("restaurant", [
       "getRestaurant",
       "updateRestaurant",
-      "removeTradingHours"
+      "removeTradingHours",
     ]),
     Save() {
       this.wait = true;
       this.restaurant.methodsOfPayment = mops;
 
       this.updateRestaurant(this.restaurant)
-        .then(fulfilled => {
+        .then((fulfilled) => {
           this.$router.push("/");
         })
-        .catch(error => {
+        .catch((error) => {
           console.log(error.message);
         });
     },
     UpdateLogo() {
       this.$modal.show("loadImage");
     },
-    setImage: function(output) {
+    setImage: function (output) {
       this.$modal.hide("loadImage");
       this.restaurant.logo = output.dataUrl;
-    }
+    },
   },
   computed: {
     ...mapState("restaurant", ["restaurant"]),
     mapCoords() {
       var coords = {
         lat: this.restaurant.latitude,
-        lng: this.restaurant.longitude
+        lng: this.restaurant.longitude,
       };
       return coords;
     },
     },
     SavedMops() {
       this.selectedMops = this.restaurant.selectedMethodsOfPayments;
-    }
+    },
   },
   mounted() {
     this.wait = false;
   watch: {
     SavedMops() {
       alert("bla");
-    }
-  }
+    },
+  },
 };
-</script>
+</script>

src/components/restaurants/restaurantMenuCateory.vue

         <label>Description</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="edit-2-outline" fill="#6c757d"></eva-icon>
           </span>
           <input class="form-control" type="text" name="description" v-model="category.description" />
         </div>
     <div class="row">
       <div class="col-md-12" style="margin-bottom: 1em">
         <div class="input-group-prepend">
-          <b-button class="btn btn-b-n" @click="Ok">Ok</b-button>
+          <b-button class="mt-2" @click="Ok">Ok</b-button>
         </div>
       </div>
     </div>
 export default {
   name: "Category",
   props: {
-    editCategory: { default: {} }
+    editCategory: { default: {} },
   },
   data() {
     return {
       category: {
         id: 0,
-        description: ""
-      }
+        description: "",
+      },
     };
   },
   methods: {
     Ok() {
       this.$emit("CategoryUpdate", this.category);
-    }
+    },
   },
   watch: {
     editCategory: {
         if (val) {
           this.category = val;
         }
-      }
-    }
-  }
+      },
+    },
+  },
 };
-</script>
+</script>

src/components/restaurants/restaurantMenuItem.vue

           <label>Category</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
-              <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+              <eva-icon name="edit-2-outline" fill="#6c757d"></eva-icon>
             </span>
             <select class="form-control" v-model="menuItem.category">
-              <option v-for="(cat, i) in categories" :key="i">
-                {{
-                cat.description
-                }}
-              </option>
+              <option v-for="(cat, i) in categories" :key="i">{{ cat.description }}</option>
             </select>
           </div>
         </div>
           <label>Name</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
-              <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+              <eva-icon name="edit-2-outline" fill="#6c757d"></eva-icon>
             </span>
             <input class="form-control" type="text" v-model="menuItem.name" />
           </div>
           <label>Description</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
-              <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+              <eva-icon name="edit-2-outline" fill="#6c757d"></eva-icon>
             </span>
             <input class="form-control" type="text" v-model="menuItem.description" />
           </div>
         <div class="col-md-6" style="margin-bottom: 1em">
           <label>Price</label>
           <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <span class="input-group-text" style="color:#6c757d">
+              <b>R</b>
             </span>
             <input class="form-control" type="number" v-model="menuItem.price" />
           </div>
           <img :src="menuItem.image" style="height:100px; width:100px; object-fit: cover;" />
           <br />
           <span class="input-group-text" align="center" style="width:100px" @click="removeImage()">
-            <eva-icon name="trash-2-outline" fill="#24aae1"></eva-icon>Delete
+            <eva-icon name="trash-2-outline" fill="#6c757d"></eva-icon>Delete
           </span>
         </div>
       </div>
               :checked="menuItem.overrideOptions"
               @change="selectionChanged"
             />
-            <label
-              class="custom-control-label"
-              for="thCloseSwitch"
-              style="margin-left: 40px"
-            >{{menuItem.overrideOptions ? 'Yes - This will override any menu options set on the category' : 'No - This will append category options to the below options'}}</label>
+            <label class="custom-control-label" for="thCloseSwitch" style="margin-left: 40px">
+              {{
+              menuItem.overrideOptions
+              ? "Yes - This will override any menu options set on the category"
+              : "No - This will append category options to the below options"
+              }}
+            </label>
           </div>
         </div>
       </div>
         <div class="col-md-12" style="margin-bottomL 1em">
           <div class="row offset-md-5">
             <div class="col-md-2">
-              <button @click="Save()" class="btn btn-b-n" type="button" data-dismiss="modal">Save</button>
+              <b-button class="mt-2" @click="Save()">Save</b-button>
             </div>
             <div class="col-md-2">
-              <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">Close</button>
+              <b-button class="mt-2" @click="Close()">Close</b-button>
             </div>
           </div>
         </div>
   components: {
     ImageUploader,
     ListView,
-    ItemOption
+    ItemOption,
   },
   data() {
     return {
       hasImage: false,
       restaurantId: Log.restaurantId(),
       showOption: false,
-      menuOption: {}
+      menuOption: {},
     };
   },
   methods: {
       this.menuItem.restaurantId = this.restaurantId;
       if (this.menuItem.category !== "") {
         var category = this.categories.find(
-          c => c.description === this.menuItem.category
+          (c) => c.description === this.menuItem.category
         );
         this.menuItem.categoryId = category.id;
       }
       console.log(JSON.stringify(this.menuItem));
 
-      this.insertMenuItem(this.menuItem).then(fulfilled => {
+      this.insertMenuItem(this.menuItem).then((fulfilled) => {
         this.$router.push("/RestaurantMenu");
       });
     },
     Close() {
       this.$router.push("/RestaurantMenu");
     },
-    setImage: function(output) {
+    setImage: function (output) {
       this.hasImage = true;
       this.menuItem.image = output.dataUrl;
     },
       if (item) {
         this.showOption = false;
       }
-    }
+    },
   },
   computed: {
     ...mapState("menuCategories", ["categories"]),
     ...mapState("menu", ["menuItem"]),
     CurrentOption() {
       return this.menuOption;
-    }
+    },
   },
   mounted() {
     this.wait = true;
     this.getCategories(this.restaurantId);
     this.getMenuItem(this.$route.params.itemid);
     this.wait = false;
-  }
+  },
 };
-</script>
+</script>

src/components/restaurants/restaurantMenuItemOptions.vue

         <label>Description</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="credit-card-outline" fill="#6c757d"></eva-icon>
           </span>
           <input class="form-control" type="text" v-model="menuOption.description" />
         </div>
         <label>Option Type</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="credit-card-outline" fill="#6c757d"></eva-icon>
           </span>
           <select class="form-control" v-model="menuOption.optionType">
-            <option v-for="item in optionTypes" :value="item.id" :key="item.id">{{item.description}}</option>
+            <option v-for="item in optionTypes" :value="item.id" :key="item.id">
+              {{
+              item.description
+              }}
+            </option>
           </select>
         </div>
       </div>
         <label>Option Limit</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="credit-card-outline" fill="#6c757d"></eva-icon>
           </span>
           <input class="form-control" type="number" v-model="menuOption.optionLimit" />
         </div>
             :checked="menuOption.isBasePrice"
             @change="selectionChanged"
           />
-          <label
-            class="custom-control-label"
-            for="thCloseSwitch"
-            style="margin-left: 40px"
-          >{{menuOption.isBasePrice ? 'Yes' : 'No'}}</label>
+          <label class="custom-control-label" for="thCloseSwitch" style="margin-left: 40px">
+            {{
+            menuOption.isBasePrice ? "Yes" : "No"
+            }}
+          </label>
         </div>
       </div>
     </div>
         <label>Rank</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="credit-card-outline" fill="#6c757d"></eva-icon>
           </span>
           <input class="form-control" type="number" v-model="menuOption.rank" />
         </div>
       <div class="col-md-12" style="margin-bottomL 1em">
         <div class="row offset-md-5">
           <div class="col-md-2">
-            <button @click="Save()" class="btn btn-b-n" type="button" data-dismiss="modal">Save</button>
+            <b-button class="mt-2" @click="Save()">Save</b-button>
           </div>
           <div class="col-md-2">
-            <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">Close</button>
+            <b-button class="mt-2" @click="Close()">Close</b-button>
           </div>
         </div>
       </div>
   name: "MenuOption",
   components: {
     ListView,
-    OptionItem
+    OptionItem,
   },
   props: {
-    menuOption: { default: {} }
+    menuOption: { default: {} },
   },
   data() {
     return {
       columns: ["description", "price", "rank"],
       wait: false,
       restaurantId: Log.restaurantId(),
-      menuItemId: 0
+      menuItemId: 0,
     };
   },
   methods: {
 
       this.$modal.hide("OptionItem");
       this.isEdit = false;
-    }
+    },
   },
   computed: {
-    ...mapState("menuOptions", ["optionTypes"])
+    ...mapState("menuOptions", ["optionTypes"]),
   },
   mounted() {
     this.wait = false;
         if (val) {
           this.menuOption = val;
         }
-      }
-    }
-  }
+      },
+    },
+  },
 };
-</script>
+</script>

src/components/restaurants/restaurantMenuOption.vue

         <label>Menu Category</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="edit-2-outline" fill="#6c757d"></eva-icon>
           </span>
           <select class="form-control" v-model="menuOption.categoryDescription">
             <option>All</option>
-            <option v-for="(cat, i) in categories" :key="i">
-              {{
-              cat.description
-              }}
-            </option>
+            <option v-for="(cat, i) in categories" :key="i">{{ cat.description }}</option>
           </select>
         </div>
       </div>
         <label>Description</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="edit-2-outline" fill="#6c757d"></eva-icon>
           </span>
           <input class="form-control" type="text" v-model="menuOption.description" />
         </div>
         <label>Option Type</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="edit-2-outline" fill="#6c757d"></eva-icon>
           </span>
           <select class="form-control" v-model="menuOption.optionType">
-            <option v-for="item in optionTypes" :value="item.id" :key="item.id">{{item.description}}</option>
+            <option v-for="item in optionTypes" :value="item.id" :key="item.id">
+              {{
+              item.description
+              }}
+            </option>
           </select>
         </div>
       </div>
         <label>Option Limit</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="edit-2-outline" fill="#6c757d"></eva-icon>
           </span>
           <input class="form-control" type="number" v-model="menuOption.optionLimit" />
         </div>
             :checked="menuOption.isBasePrice"
             @change="selectionChanged"
           />
-          <label
-            class="custom-control-label"
-            for="thCloseSwitch"
-            style="margin-left: 40px"
-          >{{menuOption.isBasePrice ? 'Yes' : 'No'}}</label>
+          <label class="custom-control-label" for="thCloseSwitch" style="margin-left: 40px">
+            {{
+            menuOption.isBasePrice ? "Yes" : "No"
+            }}
+          </label>
         </div>
       </div>
     </div>
         <label>Rank</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="edit-2-outline" fill="#6c757d"></eva-icon>
           </span>
           <input class="form-control" type="number" v-model="menuOption.rank" />
         </div>
       <div class="col-md-12" style="margin-bottomL 1em">
         <div class="row offset-md-5">
           <div class="col-md-2">
-            <button
-              @click="Save()"
-              class="btn btn-b-n"
-              type="button"
-              data-dismiss="modal"
-              name="SaveButton"
-            >Save</button>
+            <b-button class="mt-2" @click="Save()">Save</b-button>
           </div>
           <div class="col-md-2">
-            <button
-              @click="Close()"
-              class="btn btn-b-n"
-              type="button"
-              data-dismiss="modal"
-              name="CloseButton"
-            >Close</button>
+            <b-button class="mt-2" @click="Close()">Close</b-button>
           </div>
         </div>
       </div>
   name: "MenuOption",
   components: {
     ListView,
-    OptionItem
+    OptionItem,
   },
   data() {
     return {
       columns: ["description", "price", "rank"],
       wait: false,
       restaurantId: Log.restaurantId(),
-      menuItemId: 0
+      menuItemId: 0,
     };
   },
   methods: {
       "deleteMenuOptionItem",
       "addMenuOption",
       "updateMenuOption",
-      "getOptionTypes"
+      "getOptionTypes",
     ]),
     ...mapActions("menuCategories", ["getCategories"]),
     selectionChanged() {
       this.menuOption.restaurantId = this.restaurantId;
       if (this.menuOption.categoryDescription !== "All") {
         var category = this.categories.find(
-          c => c.description === this.menuOption.categoryDescription
+          (c) => c.description === this.menuOption.categoryDescription
         );
         this.menuOption.categoryId = category.id;
       } else {
       }
       alert(JSON.stringify(this.menuOption));
       if (this.menuOption.id === 0) {
-        this.addMenuOption(this.menuOption).then(result => {
+        this.addMenuOption(this.menuOption).then((result) => {
           this.$router.push("/MenuOptions");
         });
       } else {
 
       this.$modal.hide("OptionItem");
       this.isEdit = false;
-    }
+    },
   },
   computed: {
     ...mapState("menuOptions", ["menuOption", "optionTypes"]),
-    ...mapState("menuCategories", ["categories"])
+    ...mapState("menuCategories", ["categories"]),
   },
   mounted() {
     this.wait = false;
     this.getMenuOption(this.$route.params.optionid);
     this.menuItemId = this.$route.params.menuItemId;
     this.getOptionTypes();
-  }
+  },
 };
-</script>
+</script>

src/components/restaurants/restaurantMenuOptionItem.vue

         <label>Description</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="edit-2-outline" fill="#6c757d"></eva-icon>
           </span>
           <input
             class="form-control"
         <label>Price</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="edit-2-outline" fill="#6c757d"></eva-icon>
           </span>
           <input
             class="form-control"
         <label>Rank</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="edit-2-outline" fill="#6c757d"></eva-icon>
           </span>
           <input
             class="form-control"
     <div class="row">
       <div class="col-md-12" style="margin-bottom: 1em">
         <div class="input-group-prepend">
-          <b-button class="btn btn-b-n" @click="Ok">Ok</b-button>
+          <b-button class="mt-2" @click="Ok">Ok</b-button>
         </div>
       </div>
     </div>
 export default {
   name: "MenuOptionItem",
   props: {
-    editMenuOptionItem: { default: {} }
+    editMenuOptionItem: { default: {} },
   },
   components: {
-    ImageUploader
+    ImageUploader,
   },
   data() {
     return {
         description: "",
         price: 0,
         rank: 0,
-        menuOptionId: 0
-      }
+        menuOptionId: 0,
+      },
     };
   },
   methods: {
     Ok() {
       this.$emit("MenuItemUpdated", this.menuOptionItem);
-    }
+    },
   },
   watch: {
     editMenuOptionItem: {
         if (val) {
           this.menuOptionItem = val;
         }
-      }
-    }
-  }
+      },
+    },
+  },
 };
-</script>
+</script>

src/components/restaurants/restaurantRole.vue

         <label>Role Name</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="edit-2-outline" fill="#6c757d"></eva-icon>
           </span>
           <input class="form-control" type="text" name="description" v-model="role.roleName" />
         </div>
       <div class="col-md-12" style="margin-bottomL 1em">
         <div class="row offset-md-5">
           <div class="col-md-2">
-            <button @click="Save()" class="btn btn-b-n" type="button" data-dismiss="modal">Save</button>
+            <b-button class="mt-2" @click="Save()">Save</b-button>
           </div>
           <div class="col-md-2">
-            <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">Close</button>
+            <b-button class="mt-2" @click="Close()">Close</b-button>
           </div>
         </div>
       </div>
     this.getRole(this.$route.params.id);
   },
 };
-</script>
+</script>

src/components/restaurants/restaurantUser.vue

         <label>Email</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="email-outline" fill="#6c757d"></eva-icon>
           </span>
           <input class="form-control" type="text" name="description" v-model="user.emailAddress" />
         </div>
         <label>First Name</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="edit-2-outline" fill="#6c757d"></eva-icon>
           </span>
           <input class="form-control" type="text" name="description" v-model="user.firstName" />
         </div>
         <label>Surname</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="edit-2-outline" fill="#6c757d"></eva-icon>
           </span>
           <input class="form-control" type="text" name="description" v-model="user.surname" />
         </div>
         <label>Cellphone</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="phone-call-outline" fill="#6c757d"></eva-icon>
           </span>
           <input class="form-control" type="text" name="description" v-model="user.cellphone" />
         </div>
     <div class="row">
       <div class="col-md-12" style="margin-bottom: 1em">
         <div class="input-group-prepend">
-          <b-button class="btn btn-b-n" @click="Ok">Ok</b-button>
+          <b-button class="mt-2" @click="Ok()">Ok</b-button>
         </div>
       </div>
     </div>
 export default {
   name: "RestaurantUser",
   props: {
-    editUser: { default: {} }
+    editUser: { default: {} },
   },
   data() {
     return {
       hasImage: false,
-      user: {}
+      user: {},
     };
   },
   methods: {
     Ok() {
       this.$emit("UpdateUser", this.user);
-    }
+    },
   },
   watch: {
     editUser: {
         if (val) {
           this.user = val;
         }
-      }
-    }
-  }
+      },
+    },
+  },
 };
-</script>
+</script>

src/components/restaurants/rolePremission.vue

         <label>Target</label>
         <div class="input-group-prepend">
           <span class="input-group-text">
-            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+            <eva-icon name="edit-2-outline" fill="#6c757d"></eva-icon>
           </span>
           <select class="form-control" v-model="role.target">
             <option value="Select"></option>
       <div class="col-md-2" style="margin-bottom: 1em">
         <label>Navigation</label>
         <div class="input-group-prepend">
-          <input style="margin-left: 1px" type="checkbox" v-model="role.navigate" />
+          <input style="margin-left: 1px;" type="checkbox" v-model="role.navigate" />
         </div>
       </div>
       <div class="col-md-2" style="margin-bottom: 1em">
     <div class="row">
       <div class="col-md-12" style="margin-bottom: 1em">
         <div class="input-group-prepend">
-          <b-button class="btn btn-b-n" @click="Ok">Ok</b-button>
+          <b-button class="mt-2" @click="Ok">Ok</b-button>
         </div>
       </div>
     </div>
 export default {
   name: "Role",
   props: {
-    role: { default: {} }
+    role: { default: {} },
   },
   components: {
-    ListView
+    ListView,
   },
   data() {
     return {
-      wait: false
+      wait: false,
     };
   },
   methods: {
     Ok() {
       this.$emit("UpdatePrems", this.role);
-    }
+    },
   },
   watch: {
     role: {
         if (val) {
           this.role = val;
         }
-      }
-    }
-  }
+      },
+    },
+  },
 };
-</script>
+</script>

src/components/shared/autoComplete.vue

         :key="i"
         class="autocomplete-result"
         @click="setResult(result)"
-      >{{ result }}</li>
+      >
+        {{ result }}
+      </li>
     </ul>
   </div>
 </template>
 }
 
 .autocomplete-result:hover {
-  background-color: #24aae1;
+  background-color: #6c757d;
   color: white;
 }
 </style>

src/components/shared/basePaginationItem.vue

   props: {
     pageNumber: {
       type: Number,
-      required: true
+      required: true,
     },
-    isCurrentPage: undefined
+    isCurrentPage: undefined,
   },
   methods: {
     onClick() {
       this.$emit("loadPage", this.pageNumber);
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>

src/components/shared/checkItem.vue

   },
   methods: {
     checkItem() {
-      this.$emit('checkItem', this.title, !this.show);
+      this.$emit("checkItem", this.title, !this.show);
     },
   },
   computed: {

src/components/shared/fieldEditor.vue

         v-if="mayEdit"
         @click="EditClick()"
         class="input-group-text spanCursor"
-        style="color: #24aae1"
+        style="color: #6c757d"
       >
-        <eva-icon name="edit-outline" fill="#24aae1"></eva-icon>
+        <eva-icon name="edit-outline" fill="#6c757d"></eva-icon>
       </span>
     </div>
     <div v-if="edit" class="input-group-prepend">
           v-for="option in selectOptions"
           :value="option[selectValue]"
           :key="option[selectValue]"
-        >{{ option[selectText] }}</option>
+          >{{ option[selectText] }}</option
+        >
       </select>
       <select v-if="type === 'selectlist'" class="form-control" v-model="value">
         <option v-for="item in selectOptions" :value="item" :key="item">{{ item }}</option>
         v-if="edit"
         @click="UpdateValue()"
         class="input-group-text spanCursor"
-        style="color: #24aae1"
+        style="color: #6c757d"
       >
-        <eva-icon name="checkmark-outline" fill="#24aae1"></eva-icon>
+        <eva-icon name="checkmark-outline" fill="#6c757d"></eva-icon>
       </span>
-      <span v-if="edit" @click="Close()" class="input-group-text spanCursor" style="color: #24aae1">
-        <eva-icon name="close-outline" fill="#24aae1"></eva-icon>
+      <span v-if="edit" @click="Close()" class="input-group-text spanCursor" style="color: #6c757d">
+        <eva-icon name="close-outline" fill="#6c757d"></eva-icon>
       </span>
     </div>
   </div>
 
 <script>
 export default {
-  props: [
-    "value",
-    "type",
-    "mayEdit",
-    "selectOptions",
-    "selectValue",
-    "selectText",
-    "display"
-  ],
+  props: ["value", "type", "mayEdit", "selectOptions", "selectValue", "selectText", "display"],
   data() {
     return {
       edit: false,
     selectionClick(item) {
       if (item.target.options.selectedIndex > 0) {
         if (!this.value) {
-          this.myDisplay = this.selectOptions[
-            item.target.options.selectedIndex - 1
-          ][this.selectText];
+          this.myDisplay = this.selectOptions[item.target.options.selectedIndex - 1][
+            this.selectText
+          ];
         }
         if (this.selectOptions[item.target.options.selectedIndex - 1]) {
-          this.$emit(
-            "input",
-            this.selectOptions[item.target.options.selectedIndex - 1]
-          );
-          this.$emit(
-            "change",
-            this.selectOptions[item.target.options.selectedIndex - 1]
-          );
+          this.$emit("input", this.selectOptions[item.target.options.selectedIndex - 1]);
+          this.$emit("change", this.selectOptions[item.target.options.selectedIndex - 1]);
         }
       }
     }

src/components/shared/home.vue

   <div class="container">
     <div class="form-group row">
       <div class="col-md-10 offset-md-1">
+        <!-- <b-tabs class="nav nav-pills-a nav-pills mb-3 section-t3">
+          <b-tab title="Restaurants" active
+            ><b-card-text><Cards /></b-card-text
+          ></b-tab>
+          <b-tab title="Categories" lazy
+            ><b-card-text><Categories /></b-card-text
+          ></b-tab>
+        </b-tabs> -->
         <ul class="nav nav-pills-a nav-pills mb-3 section-t3" id="pills-tab" role="tablist">
           <li class="nav-item">
             <a
               role="tab"
               aria-controls="pills-video"
               aria-selected="true"
-            >Restaurants</a>
+              >Restaurants</a
+            >
           </li>
           <li class="nav-item">
             <a
               role="tab"
               aria-controls="pills-plans"
               aria-selected="false"
-            >Categories</a>
+              >Categories</a
+            >
           </li>
         </ul>
         <div class="tab-content" id="pills-tabContent">

src/components/shared/imageLoader.vue

         <img :src="img" style="height:200px; width:150px; object-fit: cover;" />
         <br />
         <span class="input-group-text" align="center" style="width:150px" @click="removeImage(key)">
-          <eva-icon name="trash-2-outline" fill="#24aae1"></eva-icon>Delete
+          <eva-icon name="trash-2-outline" fill="#6c757d"></eva-icon>Delete
         </span>
       </div>
       <br />

src/components/shared/listView.vue

       <div class="p-2">
         <div class="d-flex flex-row">
           <div class="p2" v-if="showColumnChooser">
-            <div
-              class="btn btn-primary myBackground btn-width cursor-pointer"
-              data-toggle="modal"
-              data-target="#myModal"
-            >Column Chooser</div>
+            <!-- <div class="mt-2" data-toggle="modal" data-target="#myModal">Column Chooser</div> -->
+            <b-button class="mt-2" data-toggle="modal" data-target="#myModal">Column Chooser</b-button>
             <div class="col-md-12">
               <div id="myModal" class="modal fade" role="dialog">
                 <div class="modal-dialog modal-lg">
                   <div class="modal-content">
                     <div class="modal-header">
                       <h5>Column Chooser</h5>
-                      <button type="button" class="close" data-dismiss="modal">&times;</button>
+                      <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
+                      <b-button class="mt-2" data-dismiss="modal">&times;</b-button>
                     </div>
                     <div style="margin-left:50px; margin-right:50px;margin-bottom:50px;">
                       <ListViewControl :items="allColumn" @checkItem="checkItem" />
             </div>
           </div>
           <div class="p2" v-if="selectedItems.length > 0">
-            <div
-              class="btn btn-primary myBackground btn-width cursor-pointer"
-              @click="onClearSelected()"
-            >Clear Selected</div>
+            <b-button class="mt-2" @click="onClearSelected()">Clear Selected</b-button>
           </div>
           <div class="p2" v-if="showNew">
-            <div class="btn btn-primary myBackground btn-width cursor-pointer" @click="onNew()">New</div>
+            <b-button class="mt-2" @click="onNew()">New</b-button>
           </div>
         </div>
       </div>
   components: {
     BasePagination,
     Alert,
-    ListViewControl
+    ListViewControl,
   },
   mounted() {
     if (this.itemsPerPageList && this.itemsPerPageList.length > 0) {
   },
   props: {
     compact: {
-      default: true
+      default: true,
     },
     allowSelect: {
-      default: true
+      default: true,
     },
     allowMultipleSelect: {
-      default: false
+      default: false,
     },
     hideSearch: {
-      default: false
+      default: false,
     },
     showNew: {
-      default: true
+      default: true,
     },
     items: undefined,
     editable: {
-      default: false
+      default: false,
     },
     deleteable: {
-      default: false
+      default: false,
     },
     columnCount: {
-      default: 6
+      default: 6,
     },
     showPager: {
-      default: true
+      default: true,
     },
     title: {
-      default: undefined
+      default: undefined,
     },
     sortKey: {
-      default: "id"
+      default: "id",
     },
     hideItemCount: {
-      default: false
+      default: false,
     },
     currentPage: {
-      default: 1
+      default: 1,
     },
     bordered: {
-      default: true
+      default: true,
     },
     striped: {
-      default: true
+      default: true,
     },
     showColumnChooser: {
-      default: true
+      default: true,
     },
     displayColumns: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     displayFormats: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     displayHeaders: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     showCustomAction: {
-      default: false
+      default: false,
     },
     CustomActionHeading: {
-      default: ""
+      default: "",
     },
     CustomActionCondition: {
-      default: ""
-    }
+      default: "",
+    },
   },
   data() {
     return {
       visibleItemsPerPageCount: 20,
       itemsPerPageList: ItemsPerPageList,
       visibleColumn: [],
-      allColumn: []
+      allColumn: [],
     };
   },
   methods: {
               !Array.isArray(Object.values(item)[o])
             ) {
               const columnName = Object.keys(item)[o];
-              if (!listAll.some(x => x.column === columnName)) {
+              if (!listAll.some((x) => x.column === columnName)) {
                 listAll.push({
                   column: columnName,
-                  show: _.filter(listAll, x => x.show).length < this.columnCount
+                  show:
+                    _.filter(listAll, (x) => x.show).length < this.columnCount,
                 });
               }
             }
     },
     isSelected(i) {
       const ind = this.getActualIndex(i);
-      return _.some(this.selectedItems, x => x === ind);
+      return _.some(this.selectedItems, (x) => x === ind);
     },
     onNew() {
       this.$emit("onNew");
     },
     onRowClick(item, i) {
       const ind = this.getActualIndex(i);
-      if (_.some(this.selectedItems, x => x === ind)) {
-        this.selectedItems = this.selectedItems.filter(x => x !== ind);
+      if (_.some(this.selectedItems, (x) => x === ind)) {
+        this.selectedItems = this.selectedItems.filter((x) => x !== ind);
       } else {
         if (!this.allowMultipleSelect) {
           this.selectedItems = [];
         if (array[i] === value) return true;
       }
       return false;
-    }
+    },
   },
   computed: {
     ListWidth() {
           listColumns.push(this.displayColumns[i]);
         }
       } else {
-        const list = _.filter(this.allColumn, x => x.show);
+        const list = _.filter(this.allColumn, (x) => x.show);
         for (const i in list) {
           const item = list[i];
           if (item) {
       return list;
     },
     FilteredItems() {
-      const list = _.filter(this.items, item =>
+      const list = _.filter(this.items, (item) =>
         Object.values(item).some(
-          i =>
+          (i) =>
             JSON.stringify(i)
               .toLowerCase()
               .indexOf(this.searchItem.toLowerCase()) > -1
         endSlice = list.length;
       }
       return list.slice(startSlice, endSlice);
-    }
+    },
     //GetAllColumn() {}
-  }
+  },
 };
 </script>
 <style scoped>
   opacity: 0.25;
 }
 .over {
-  background-color: rgba(0, 0, 255, 0.35);
+  background-color: rgba(87, 87, 92, 0.35);
 }
 .my-border {
   border: solid 3px silver;
 }
 .selected {
-  background-color: rgba(96, 203, 235, 0.5);
+  background-color: rgba(174, 180, 182, 0.5);
   border: white 2px double;
 }
 .selected:hover {
-  background-color: rgba(96, 203, 235, 0.85);
+  background-color: rgba(166, 181, 185, 0.85);
 }
 .btn-width {
   width: 125px;
 }
 .table-title {
   padding: 5px;
-  border: rgba(200, 200, 200, 0.66) double 2px;
+  border: rgba(56, 58, 59, 0.66) double 2px;
   border-radius: 5px;
-  background-color: rgba(96, 203, 235, 0.25);
+  background-color: rgba(176, 188, 192, 0.25);
 }
 .table-title:hover {
-  background-color: rgba(96, 203, 235, 0.4);
+  background-color: rgba(64, 64, 65, 0.4);
 }
 .table-header {
   background-color: rgba(200, 200, 200, 0.66);

src/components/shared/mapSetLocation.vue

     <label v-if="showLocationLabel">Location</label>
     <div v-if="showAutoComplete" class="input-group-prepend">
       <span class="input-group-text">
-        <eva-icon name="map" fill="#24aae1"></eva-icon>
+        <eva-icon name="map" fill="#6c757d"></eva-icon>
       </span>
       <gmap-autocomplete class="form-control" @place_changed="setPlace"></gmap-autocomplete>
       <button class="btn btn-primary btn-l" @click="addMarker">Add</button>

src/components/shared/navBar.vue

         <div class="input-group-prepend">
           <input type="text" placeholder="search" />
           <span class="input-group-text" @click="Search">
-            <i class="fa fa-search" style="color:#24aae1"></i>
+            <i class="fa fa-search" style="color:#6c757d"></i>
           </span>
         </div>
       </div>
     isLoggedIn() {
       // console.log(Log.isLoggedIn());
       // return Log.isLoggedIn();
-      return false;
+      return true;
     },
     NAME() {
       //return Log.getPerson().name;
     SystemRole() {
       return "Customer";
       //return "SuperAdmin";
-
       //return "RestaurantAdmin";
     },
     // eslint-disable-next-line vue/return-in-computed-property

src/main.js

 import "font-awesome/css/font-awesome.min.css";
 import VueGeolocation from "vue-browser-geolocation";
 import * as VueGoogleMaps from "vue2-google-maps";
+import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
+import "bootstrap/dist/css/bootstrap.css";
+import "bootstrap-vue/dist/bootstrap-vue.css";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
+library.add(fas);
+Vue.component("font-awesome-icon", FontAwesomeIcon);
+Vue.use(BootstrapVue);
+Vue.use(IconsPlugin);
 Vue.use(VueGeolocation);
 Vue.use(VueGoogleMaps, {
   load: {

src/router/index.js

 import RestaurantRoles from "../components/restaurants/restaurantRoles.vue";
 import RestaurantRole from "../components/restaurants/restaurantRole.vue";
 import OrderConfirmation from "../components/orders/confirmOrder.vue";
+import CustomerOrder from "../components/customer/customerOrder.vue";
 
 Vue.use(Router);
 
       component: RestaurantRole
     },
     {
-      path: "/ConfirmOrder",
+      path: "/ConfirmOrder/:id",
       name: "OrderConfirmation",
       component: OrderConfirmation
+    },
+    {
+      path: "/OrderDetails/:id",
+      name: "CustomerOrder",
+      component: CustomerOrder
     }
   ]
 });

src/store/modules/orders/order.js

 import axios from "axios";
+import { result } from "lodash";
+import { resolve, reject } from "core-js/fn/promise";
 
 export default {
   namespaced: true,
     },
     setOrderItems(state, items) {
       state.orderItems = items;
+    },
+    updateAddress(state, address) {
+      state.order.deliveryAddress = address;
     }
   },
   getters: {},
         .get(`/api/order/GetUserOrders/${userId}`)
         .then(result => commit("setOrders", result.data));
     },
+    getUserOrder({ commit }, userId) {
+      axios
+        .get(`/api/order/GetUserOrder/${userId}`)
+        .then(result => commit("setOrder", result.data));
+    },
     getRestaurantOrders({ commit }, restaurantId) {
       axios
         .get(`/api/order/GetRestaurantOrders/${restaurantId}`)
         .get(`/api/order/GetOrderItems/${orderId}`)
         .then(result => commit("setOrderItems", result.data));
     },
+    getCartOrder({ commit }, id) {
+      axios.get(`/api/order/GetCartOrder/${id}`).then(result => commit("setOrder", result.data));
+    },
     saveOrder({ commit }, order) {
-      axios.post("/api/order", order).then(result => commit("setOrders", result.data));
+      return new Promise((resolve, reject) => {
+        axios
+          .post("/api/order", order)
+          .then(result => {
+            commit("setOrder", result.data);
+            resolve();
+          })
+          .catch(error => reject(new Error(error.message)));
+      });
+    },
+    updateOrder({ commit }, order) {
+      axios.put("/api/order", order).then(result => commit("setOrder", result.data));
+    },
+    updateAddress({ commit }, address) {
+      return new Promise((resolve, reject) => {
+        axios
+          .put("/api/order/UpdateAddress", address)
+          .then(result => {
+            commit("updateAddress", result.data);
+            resolve();
+          })
+          .catch(error => reject(new Error(error.message)));
+      });
     }
   }
 };