Restaurant Details Screen + Functions

public/css/style.css

 }
 
 a:hover {
-    color: #60CBEB;
+    color: #24aae1;
     text-decoration: none;
 }
 
 }
 
 .color-b {
-    color: #60CBEB;
+    color: #24aae1;
 }
 
 .color-d {
     bottom: -1px;
     width: 100%;
     height: 2px;
-    background-color: #60CBEB;
+    background-color: #24aae1;
     z-index: 2;
 }
 
 .pagination-a .pagination .page-link:hover,
 .pagination-a .pagination .page-link:active,
 .pagination-a .pagination .page-link:focus {
-    background-color: #60CBEB;
+    background-color: #24aae1;
 }
 
 .pagination-a .pagination .page-link span {
 }
 
 .pagination-a .pagination .page-item.active .page-link {
-    background-color: #60CBEB;
+    background-color: #24aae1;
 }
 
 .a {
-    color: #60CBEB;
+    color: #24aae1;
     font-size: 1.3rem;
 }
 
     position: absolute;
     width: 70px;
     height: 4px;
-    background-color: #60CBEB;
+    background-color: #24aae1;
     bottom: 20px;
     left: 0;
 }
 }
 
 .owl-theme .owl-dots .owl-dot:hover span {
-    background-color: #60CBEB;
+    background-color: #24aae1;
 }
 
 .owl-theme .owl-dots .owl-dot.active span {
-    background-color: #60CBEB;
+    background-color: #24aae1;
     width: 35px;
 }
 
     display: inline-block;
     transition: all 0.6s ease-in-out;
     color: #ffffff;
-    background-color: #60CBEB;
+    background-color: #24aae1;
     opacity: .9;
 }
 
 
 .nav-arrow-b .owl-arrow .owl-nav .owl-prev:hover,
 .nav-arrow-b .owl-arrow .owl-nav .owl-next:hover {
-    background-color: #089bf0;
+    background-color: #25335d;
 }
 
 .nav-arrow-b .owl-arrow .owl-nav .owl-next {
 .back-to-top {
     position: fixed;
     display: none;
-    background: #60CBEB;
+    background: #24aae1;
     color: #fff;
     width: 44px;
     height: 44px;
     top: calc(50% - 30px);
     left: calc(50% - 30px);
     border: 6px solid #f2f2f2;
-    border-top: 6px solid #60CBEB;
+    border-top: 6px solid #24aae1;
     border-radius: 50%;
     width: 60px;
     height: 60px;
     width: 100%;
     height: 2px;
     z-index: 0;
-    background-color: #60CBEB;
+    background-color: #24aae1;
     -webkit-transform: scaleX(0);
     transform: scaleX(0);
     -webkit-transform-origin: right;
 }
 
 .navbar-default.navbar-trans .nav-link:before {
-    background-color: #60CBEB;
+    background-color: #24aae1;
 }
 
 .navbar-default.navbar-trans .nav-link:hover {
 }
 
 .navbar-default.navbar-reduce .nav-link:before {
-    background-color: #60CBEB;
+    background-color: #24aae1;
 }
 
 .navbar-default.navbar-reduce .nav-link:hover {
 
 .navbar-default .dropdown .dropdown-menu {
     border-top: 0;
-    border-left: 4px solid #60CBEB;
+    border-left: 4px solid #24aae1;
     border-right: 0;
     border-bottom: 0;
     -webkit-transform: translate3d(0px, -40px, 0px);
 
 .navbar-default .dropdown .dropdown-menu .dropdown-item:hover {
     background-color: #ffffff;
-    color: #60CBEB;
+    color: #24aae1;
     transition: all 500ms ease;
 }
 
 .navbar-default .dropdown .dropdown-menu .dropdown-item.active {
     background-color: #ffffff;
-    color: #60CBEB;
+    color: #24aae1;
 }
 
 .navbar-default .dropdown:hover .dropdown-menu {
 }
 
 .intro .owl-theme .owl-dots .owl-dot:hover span {
-    background-color: #60CBEB;
+    background-color: #24aae1;
 }
 
 .intro .owl-theme .owl-dots .owl-dot.active span {
-    background-color: #60CBEB;
+    background-color: #24aae1;
 }
 
 .intro .intro-item {
 .intro .intro-body .price-a {
     color: #ffffff;
     padding: 1rem 1.5rem;
-    border: 2px solid #60CBEB;
+    border: 2px solid #24aae1;
     border-radius: 50px;
     text-transform: uppercase;
     letter-spacing: 0.030em;
 }
 
 .intro-single .title-single-box {
-    border-left: 3px solid #60CBEB;
+    border-left: 3px solid #24aae1;
 }
 
 .intro-single .title-single-box .title-single {
 .price-a {
     color: #ffffff;
     padding: .6rem .8rem;
-    border: 2px solid #60CBEB;
+    border: 2px solid #24aae1;
     border-radius: 50px;
     text-transform: uppercase;
     letter-spacing: 0.030em;
     width: 100%;
     position: absolute;
     z-index: 2;
-    background-color: #60CBEB;
+    background-color: #24aae1;
 }
 
 .card-info {
 
 .card-header-b .category-b {
     font-size: .9rem;
-    background-color: #60CBEB;
+    background-color: #24aae1;
     padding: .3rem .7rem;
     color: #313131;
     letter-spacing: 0.030em;
 
 .post-content .blockquote {
     padding: 1rem 3rem 1.7rem 3rem;
-    border-left: 3px solid #60CBEB;
+    border-left: 3px solid #24aae1;
     color: #000000;
 }
 
 
 .card-box-ico {
     padding: 1rem 3rem 1rem 2.5rem;
-    border: 5px solid #60CBEB;
+    border: 5px solid #24aae1;
 }
 
 .card-box-ico span {
 }
 
 .card-box-d:hover .card-overlay-hover {
-    background-color: #60CBEB;
+    background-color: #24aae1;
     opacity: .9;
 }
 
 }
 
 .sinse-box {
-    background-color: #60CBEB;
+    background-color: #24aae1;
     padding: 1rem 2rem;
     position: absolute;
     left: 15px;
 
 .testimonial-ico span {
     font-size: 1.8rem;
-    background-color: #60CBEB;
+    background-color: #24aae1;
     color: #ffffff;
     padding: .4rem 1rem;
     border-radius: 50px;
 .section-footer .item-list-a i {
     font-size: 18px;
     padding-right: 4px;
-    color: #60CBEB;
+    color: #24aae1;
 }
 
 .section-footer .widget-a .w-title-a {
 
 
 .form-a #sendmessage {
-    color: #60CBEB;
-    border: 1px solid #089bf0;
+    color: #24aae1;
+    border: 1px solid #25335d;
     display: none;
     text-align: center;
     padding: 15px;
 
 .form-a .form-control:focus {
     box-shadow: none;
-    border-color: #60CBEB;
+    border-color: #24aae1;
 }
 
 
 }
 
 .btn.btn-a:hover {
-    background-color: #60CBEB;
+    background-color: #24aae1;
     color: #000000;
 }
 
 .btn.btn-b {
-    background-color: #60CBEB;
+    background-color: #24aae1;
     color: #000000;
 }
 
 }
 
 .btn.btn-b-n {
-    background-color: #60CBEB;
+    background-color: #24aae1;
     color: #ffffff;
     border-radius: 0;
 }
 
 .btn.btn-b-n:hover {
-    background-color: #089bf0;
+    background-color: #25335d;
     color: #ffffff;
 }
 
     }
 
     .navbar-default .dropdown .dropdown-menu {
-        border-top: 4px solid #60CBEB;
+        border-top: 4px solid #24aae1;
         border-left: 0;
         display: block;
         position: absolute;

src/App.vue

   cursor: pointer;
 }
 hr {
-  background-color: #60cbeb;
+  background-color: #24aae1;
 }
 .my-btn {
   margin: 2px;
-  color: #60cbeb;
+  color: #24aae1;
 }
 .title-img {
   width: 800px;
   border-radius: 15px;
 }
 .myBackground {
-  border-color: #60cbeb;
-  background-color: #60cbeb;
+  border-color: #24aae1;
+  background-color: #24aae1;
 }
 .myFill {
-  fill: #60cbeb;
-  color: #60cbeb;
+  fill: #24aae1;
+  color: #24aae1;
 }
 .mySuccess {
   border-color: rgba(2, 184, 117, 0.5);
   cursor: pointer;
 }
 a:hover {
-  color: #60cbeb;
+  color: #24aae1;
 }
 #app {
   font-family: "Avenir", Helvetica, Arial, sans-serif;
   margin: 0;
 }
 .isSelected {
-  border-color: white white #60cbeb white;
+  border-color: white white #24aae1 white;
 }
 .isUnSelected {
   border-color: white white white white;
   color: white;
 }
 .normalText {
-  background-color: #60cbeb;
+  background-color: #24aae1;
 }
 .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="#60CBEB"></eva-icon>
+                <eva-icon name="person-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                <eva-icon name="lock-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
-                  <eva-icon v-else name="eye-outline" fill="#60CBEB"></eva-icon>
+                  <eva-icon v-if="showPassword" name="eye-off-outline" fill="#24aae1"></eva-icon>
+                  <eva-icon v-else name="eye-outline" fill="#24aae1"></eva-icon>
                 </span>
               </div>
             </div>

src/components/accounts/register.vue

             <label>Name</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
+                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
               </span>
               <input class="form-control" type="text" name="name" v-model="userContainer.firstName" />
             </div>
             <label>Surname</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="book-outline" fill="#60CBEB"></eva-icon>
+                <eva-icon name="book-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                <eva-icon name="email-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                <eva-icon name="phone-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                <eva-icon name="lock-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                <eva-icon name="lock-outline" fill="#24aae1"></eva-icon>
               </span>
               <input
                 class="form-control"
                     <eva-icon
                       v-if="showPassword"
                       name="eye-off-outline"
-                      fill="#60CBEB"
+                      fill="#24aae1"
                       @click="togglePassword()"
                     ></eva-icon>
-                    <eva-icon v-else name="eye-outline" fill="#60CBEB" @click="togglePassword()"></eva-icon>
+                    <eva-icon v-else name="eye-outline" fill="#24aae1" @click="togglePassword()"></eva-icon>
                   </span>
                 </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="#60CBEB"></eva-icon>
+                <eva-icon name="edit-2-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                <eva-icon name="credit-card-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                <eva-icon name="pin-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                <eva-icon name="clock-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                <eva-icon name="shopping-cart-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                <eva-icon name="hash-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                <eva-icon name="person-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                <eva-icon name="book-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                <eva-icon name="email-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                <eva-icon name="lock-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                <eva-icon name="lock-outline" fill="#24aae1"></eva-icon>
               </span>
               <input
                 class="form-control"
                     <eva-icon
                       v-if="showPassword"
                       name="eye-off-outline"
-                      fill="#60CBEB"
+                      fill="#24aae1"
                       @click="togglePassword()"
                     ></eva-icon>
-                    <eva-icon v-else name="eye-outline" fill="#60CBEB" @click="togglePassword()"></eva-icon>
+                    <eva-icon v-else name="eye-outline" fill="#24aae1" @click="togglePassword()"></eva-icon>
                   </span>
                 </div>
               </div>
     return {
       selectedMops: [],
       chain: false,
-      mops: [
-        { name: "Credit Card" },
-        { name: "EFT" },
-        { name: "Account" },
-        { name: "Cash On Delivery" },
-        { name: "Instant EFT" }
-      ],
       tradingHours: [],
       categories: [],
       hasError: false,
   },
   computed: {
     ...mapState("registration", ["restaurantContainer"]),
+    ...mapState("mop", ["mops"]),
     resultString() {
       return this.restaurantContainer.result;
     }

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: #60CBEB">
+          <span class="input-group-text" style="color: #24aae1">
             <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: #60CBEB">
+          <span class="input-group-text" style="color: #24aae1">
             <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: #60CBEB">
+          <span class="input-group-text" style="color: #24aae1">
             <b>T</b>
           </span>
           <VueTimepicker v-model="tradingData.to" :disabled="EnableTime"></VueTimepicker>

src/components/customer/customerDetails.vue

             <label>Name</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
+                <eva-icon name="person-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                <eva-icon name="person-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                <eva-icon name="person-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
               </span>
               <input class="form-control" type="text" name="cellphone" v-model="user.cellphone" />
             </div>
             <label>Complex Name</label>
             <div class="input-group-prepend">
               <span class="input-group-text">
-                <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
+                <eva-icon name="person-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                <eva-icon name="person-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                    <eva-icon name="person-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                    <eva-icon name="person-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                    <eva-icon name="person-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                    <eva-icon name="person-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                    <eva-icon name="person-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>
+                    <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
                   </span>
                   <input
                     class="form-control"
       this.user.addresses = [];
       this.user.addresses.push(this.userAddress);
       this.updateUser(this.user);
+    },
+    Close() {
+      this.$router.push("/");
     }
   },
   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="#60CBEB"></eva-icon>
+            <eva-icon name="credit-card-outline" fill="#24aae1"></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="#60CBEB"></eva-icon>Delete
+          <eva-icon name="trash-2-outline" fill="#24aae1"></eva-icon>Delete
         </span>
       </div>
     </div>

src/components/restaurants/restaurantCategorySelect.vue

           :hideSearch="false"
           :deleteable="false"
           :displayColumn="columns"
-          :sortKey="Description"
           :showNew="false"
           @onRowClick="onRowClick"
         />
   },
   data() {
     return {
-      columns: ["Description"]
+      columns: ["id", "description"]
     };
   },
   methods: {
-    ...mapActions("restaurantCategories", ["getCategories"]),
+    ...mapActions("restaurantCategories", ["getSelectCategories"]),
     onRowClick(item) {
       this.$emit("selected", item);
     }
     ...mapState("restaurantCategories", ["restaurantsCategories"])
   },
   mounted() {
-    this.getCategories();
+    this.getSelectCategories();
   }
 };
 </script>

src/components/restaurants/restaurantDetails.vue

+<template>
+  <!-- eslint-disable max-len -->
+  <div class="container">
+    <br />
+    <div class="container col-md-12">
+      <div class="col-sm-12">
+        <div class="about-img-box">
+          <img
+            :src="restaurant.logo"
+            alt="Restaurant Details"
+            class="img-fluid"
+            style="width:800px;height:400px; border-radius:10px"
+          />
+        </div>
+        <div class="sinse-box" style="border-radius:10px">
+          <h3 class="sinse-title">Restaurant Details</h3>
+        </div>
+      </div>
+      <br />
+      <div class="row" style="text-align:left">
+        <div class="col-md-6" style="margin-bottomL 1em">
+          <div class="row" style="text-align:left">
+            <div class="col-md-12" style="margin-bottom: 1em">
+              <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>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row" style="text-align:left">
+        <!--Column 1 -->
+        <div class="col-md-6" style="margin-bottomL 1em">
+          <div class="row" style="text-align:left">
+            <div class="col-md-12" style="margin-bottom: 1em">
+              <label>Name</label>
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="edit-2-outline" fill="#24aae1"></eva-icon>
+                </span>
+                <input class="form-control" type="text" name="rname" v-model="restaurant.name" />
+              </div>
+            </div>
+          </div>
+          <div class="row" style="text-align:left">
+            <div class="col-md-12" style="margin-bottom: 1em">
+              <div class="input-group-prepend">
+                <label>Methods Of Payment</label>
+                <ul>
+                  <li v-for="(mop, i) in mops" :key="i">
+                    <input type="checkbox" :id="mop.name" :value="mop.name" v-model="selectedMops" />
+                    <label :for="mop.name">{{ mop.name }}</label>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="row" style="text-align:left">
+            <div class="col-md-12" style="margin-bottom: 1em">
+              <label>Delivery Fee</label>
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="number"
+                  name="deliveryFee"
+                  v-model="restaurant.deliveryFee"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="row" style="text-align:left">
+            <div class="col-md-12" style="margin-bottom: 1em">
+              <label>Delivery Radius (KM)</label>
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="pin-outline" fill="#24aae1"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="number"
+                  name="deliveryRadius"
+                  v-model="restaurant.deliveryRadius"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="row" style="text-align:left">
+            <div class="col-md-12" style="margin-bottom: 1em">
+              <label>Delivery Time (Minutes)</label>
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="clock-outline" fill="#24aae1"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="number"
+                  name="deliveryRadius"
+                  placeholder="From"
+                  v-model="restaurant.deliveryFrom"
+                />
+                <input
+                  class="form-control"
+                  type="number"
+                  name="deliveryRadius"
+                  placeholder="To"
+                  v-model="restaurant.deliveryTo"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <!--Column 2 -->
+        <div class="col-md-6" style="margin-bottomL 1em">
+          <div class="row" style="text-align:left">
+            <div class="col-md-12" style="margin-bottom: 1em">
+              <label>Trading Hours</label>
+              <ListView
+                :items="tradingHours"
+                :showColumnChooser="false"
+                :hideSearch="true"
+                :deleteable="true"
+                :displayColumn="thColumns"
+                @onDelete="Delete"
+                @onNew="New"
+              />
+            </div>
+          </div>
+          <div class="row" style="text-align:left">
+            <div class="col-md-12" style="margin-bottom: 1em">
+              <label>Categories</label>
+              <ListView
+                :items="categories"
+                :showColumnChooser="false"
+                :hideSearch="true"
+                :deleteable="true"
+                :displayColumn="columns"
+                :sortKey="Description"
+                @onDelete="DeleteCat"
+                @onNew="NewCat"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <div class="title-box-d">
+            <br />
+            <h3 class="title-d" style="text-align:left;">Address</h3>
+          </div>
+        </div>
+      </div>
+      <div class="row" style="text-align:left">
+        <!--Column 1 -->
+        <div class="col-md-6" style="margin-bottomL 1em">
+          <div class="row" style="text-align:left">
+            <div class="col-md-12" style="margin-bottom: 1em">
+              <label>Shopping Centre</label>
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="shopping-cart-outline" fill="#24aae1"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="shopName"
+                  v-model="restaurant.shoppingCentre"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="row" style="text-align:left">
+            <div class="col-md-12" style="margin-bottom: 1em">
+              <label>Shop Number</label>
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="hash-outline" fill="#24aae1"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="shopNo"
+                  v-model="restaurant.shopNumber"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="row" style="text-align:left">
+            <div class="col-md-12" style="margin-bottom: 1em">
+              <label>Street Number</label>
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="navigation-2-outline" fill="#24aae1"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="FirstName"
+                  v-model="restaurant.streetNumber"
+                  disabled
+                />
+              </div>
+            </div>
+          </div>
+          <div class="row" style="text-align:left">
+            <div class="col-md-12" style="margin-bottom: 1em">
+              <label>Street Name</label>
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="navigation-2-outline" fill="#24aae1"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="FirstName"
+                  v-model="restaurant.streetName"
+                  disabled
+                />
+              </div>
+            </div>
+          </div>
+          <div class="row" style="text-align:left">
+            <div class="col-md-12" style="margin-bottom: 1em">
+              <label>Suburb</label>
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="navigation-2-outline" fill="#24aae1"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="FirstName"
+                  v-model="restaurant.suburb"
+                  disabled
+                />
+              </div>
+            </div>
+          </div>
+          <div class="row" style="text-align:left">
+            <div class="col-md-12" style="margin-bottom: 1em">
+              <label>City</label>
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="navigation-2-outline" fill="#24aae1"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="FirstName"
+                  v-model="restaurant.city"
+                  disabled
+                />
+              </div>
+            </div>
+          </div>
+          <div class="row" style="text-align:left">
+            <div class="col-md-12" style="margin-bottom: 1em">
+              <label>Province</label>
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="navigation-2-outline" fill="#24aae1"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="FirstName"
+                  v-model="restaurant.province"
+                  disabled
+                />
+              </div>
+            </div>
+          </div>
+          <div class="row" style="text-align:left">
+            <div class="col-md-12" style="margin-bottom: 1em">
+              <label>Postal Code</label>
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="navigation-2-outline" fill="#24aae1"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="FirstName"
+                  v-model="restaurant.postalCode"
+                  disabled
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <!--Column 2 -->
+        <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>
+            </div>
+          </div>
+          <Map :showAutoComplete="false" :showLocationLabel="false" :setLocation="mapCoords" />
+        </div>
+      </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>
+        </div>
+        <div class="col-md-2">
+          <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+    <!-- need to still gey this working -->
+    <modal name="loadImage" :width="600" :height="100">
+      <div class="container">
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Select Image</label>
+            <div class="input-group-prepend">
+              <image-uploader
+                :preview="true"
+                :className="['fileinput', { 'fileinput--loaded': hasImage }]"
+                capture="environment"
+                :debug="1"
+                doNotResize="gif"
+                :autoRotate="true"
+                outputFormat="verbose"
+                @input="setImage"
+              >
+                <label for="fileInput" slot="upload-label">
+                  <figure>
+                    <path
+                      class="path1"
+                      d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875s3.973-8.875 8.875-8.875c4.902 0 8.875 3.973 8.875 8.875s-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z"
+                    ></path>
+                  </figure>
+                </label>
+              </image-uploader>
+            </div>
+          </div>
+        </div>
+      </div>
+    </modal>
+    <modal name="map" :width="600" :height="620">
+      <div class="container">
+        <h2>Update Location</h2>
+        <br />
+        <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>
+          </div>
+        </div>
+      </div>
+    </modal>
+    <modal name="tradingHours" :width="600" :height="380">
+      <TradingHours @tradingUpdate="TradingUpdate" />
+    </modal>
+    <modal name="Categories" :width="600" :height="500">
+      <Categories @selected="selectedCategory" />
+    </modal>
+    <div v-if="wait" id="preloader"></div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+import Map from "../shared/mapSetLocation";
+import ListView from "../shared/listView";
+import Categories from "../restaurants/restaurantCategorySelect";
+import TradingHours from "../accounts/tradingHours";
+import ImageUploader from "vue-image-upload-resize";
+
+export default {
+  name: "RestaurantDetails",
+  components: {
+    Map,
+    ListView,
+    Categories,
+    TradingHours,
+    ImageUploader
+  },
+  data() {
+    return {
+      thColumns: [
+        "description",
+        "openingTime",
+        "closingTime",
+        "closed",
+        "opened24H"
+      ],
+      wait: false,
+      selectedMops: [],
+      hasImage: false
+    };
+  },
+  methods: {
+    ...mapActions("restaurant", [
+      "getRestaurant",
+      "updateRestaurant",
+      "removeTradingHours"
+    ]),
+    Save() {
+      this.wait = true;
+
+      var mops = "";
+      for (let i = 0; i < this.selectedMops.length; i++) {
+        mops = mops + this.selectedMops[i] + "|";
+      }
+
+      var cats = "";
+      for (let i = 0; i < this.categories.length; i++) {
+        cats = cats + this.categories[i].description + "|";
+      }
+
+      this.restaurant.savedTradingHours = this.tradingHours;
+      this.restaurant.categories = cats;
+      this.restaurant.methodsOfPayment = mops;
+
+      this.updateRestaurant(this.restaurant)
+        .then(fulfilled => {
+          this.$router.push("/");
+        })
+        .catch(error => {
+          console.log(error.message);
+        });
+    },
+
+    Close() {
+      this.$router.push("/");
+    },
+    ShowMap() {
+      this.$modal.show("map");
+    },
+    HideMap() {
+      this.$modal.hide("map");
+    },
+    New() {
+      this.$modal.show("tradingHours");
+    },
+    NewCat() {
+      this.$modal.show("Categories");
+    },
+    UpdateAddress(address) {
+      this.restaurant.streetNumber = address.streetNumber;
+      this.restaurant.streetName = address.streetName;
+      this.restaurant.suburb = address.suburb;
+      this.restaurant.city = address.city;
+      this.restaurant.province = address.province;
+      this.restaurant.country = address.country;
+      this.restaurant.postalCode = address.postalCode;
+      this.restaurant.googleMapUrl = address.url;
+      this.restaurant.latitude = address.coordinates.lat;
+      this.restaurant.longitude = address.coordinates.lng;
+    },
+    TradingUpdate(item) {
+      this.tradingHours.push(item);
+      this.$modal.hide("tradingHours");
+    },
+    selectedCategory(item) {
+      this.categories.push(item[0]);
+      this.$modal.hide("Categories");
+    },
+    DeleteCat(item) {
+      this.categories.pop(item);
+    },
+    Delete(item) {
+      this.removeTradingHours(item.id);
+      this.tradingHours.pop(item);
+    },
+    UpdateLogo() {
+      this.$modal.show("loadImage");
+    },
+    setImage: function(output) {
+      this.$modal.hide("loadImage");
+      this.restaurant.logo = output.dataUrl;
+    }
+  },
+  computed: {
+    ...mapState("restaurant", ["restaurant"]),
+    ...mapState("mop", ["mops"]),
+    mapCoords() {
+      var coords = {
+        lat: this.restaurant.latitude,
+        lng: this.restaurant.longitude
+      };
+      return coords;
+    },
+    tradingHours() {
+      return this.restaurant.savedTradingHours;
+    },
+    categories() {
+      return this.restaurant.savedCategories;
+    },
+    SavedMops() {
+      this.selectedMops = this.restaurant.selectedMethodsOfPayments;
+    }
+  },
+  mounted() {
+    this.wait = false;
+    this.getRestaurant(5);
+  },
+  watch: {
+    SavedMops() {
+      alert("bla");
+    }
+  }
+};
+</script>

src/components/shared/autoComplete.vue

         :key="i"
         class="autocomplete-result"
         @click="setResult(result)"
-      >
-        {{ result }}
-      </li>
+      >{{ result }}</li>
     </ul>
   </div>
 </template>
     items: {
       type: Array,
       required: false,
-      default: () => [],
-    },
+      default: () => []
+    }
   },
   data() {
     return {
-      search: '',
+      search: "",
       results: [],
-      isOpen: false,
+      isOpen: false
     };
   },
   methods: {
     },
     filterResults() {
       this.results = this.items.filter(
-        item => item.toLowerCase().indexOf(this.search.toLowerCase()) > -1,
+        item => item.toLowerCase().indexOf(this.search.toLowerCase()) > -1
       );
     },
     setResult(result) {
       this.search = result;
       this.isOpen = false;
-      this.$emit('selection', this.search);
-    },
-  },
+      this.$emit("selection", this.search);
+    }
+  }
 };
 </script>
 
 }
 
 .autocomplete-result:hover {
-  background-color: #60cbeb;
+  background-color: #24aae1;
   color: white;
 }
 </style>

src/components/shared/fieldEditor.vue

         v-if="mayEdit"
         @click="EditClick()"
         class="input-group-text spanCursor"
-        style="color: #60CBEB"
+        style="color: #24aae1"
       >
-        <eva-icon name="edit-outline" fill="#60CBEB"></eva-icon>
+        <eva-icon name="edit-outline" fill="#24aae1"></eva-icon>
       </span>
     </div>
     <div v-if="edit" class="input-group-prepend">
         v-if="edit"
         @click="UpdateValue()"
         class="input-group-text spanCursor"
-        style="color: #60CBEB"
+        style="color: #24aae1"
       >
-        <eva-icon name="checkmark-outline" fill="#60CBEB"></eva-icon>
+        <eva-icon name="checkmark-outline" fill="#24aae1"></eva-icon>
       </span>
-      <span v-if="edit" @click="Close()" class="input-group-text spanCursor" style="color: #60CBEB">
-        <eva-icon name="close-outline" fill="#60CBEB"></eva-icon>
+      <span v-if="edit" @click="Close()" class="input-group-text spanCursor" style="color: #24aae1">
+        <eva-icon name="close-outline" fill="#24aae1"></eva-icon>
       </span>
     </div>
   </div>
 <script>
 export default {
   props: [
-    'value',
-    'type',
-    'mayEdit',
-    'selectOptions',
-    'selectValue',
-    'selectText',
-    'display',
+    "value",
+    "type",
+    "mayEdit",
+    "selectOptions",
+    "selectValue",
+    "selectText",
+    "display"
   ],
   data() {
     return {
       edit: false,
-      myDisplay: '',
+      myDisplay: ""
     };
   },
   methods: {
     UpdateValue() {
       this.edit = false;
-      if (this.type !== 'select' && this.value) {
-        this.$emit('input', this.value);
-        this.$emit('change', this.value);
+      if (this.type !== "select" && this.value) {
+        this.$emit("input", this.value);
+        this.$emit("change", this.value);
       }
     },
     EditClick() {
         }
         if (this.selectOptions[item.target.options.selectedIndex - 1]) {
           this.$emit(
-            'input',
-            this.selectOptions[item.target.options.selectedIndex - 1],
+            "input",
+            this.selectOptions[item.target.options.selectedIndex - 1]
           );
           this.$emit(
-            'change',
-            this.selectOptions[item.target.options.selectedIndex - 1],
+            "change",
+            this.selectOptions[item.target.options.selectedIndex - 1]
           );
         }
       }
-    },
+    }
   },
   mounted() {
     if (this.value) {
     if (this.display) {
       this.myDisplay = this.display;
     }
-    if (this.type === 'date') {
+    if (this.type === "date") {
       this.myDisplay = this.$options.filters.toDate(this.value);
     }
   },
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
         this.myDisplay = this.display;
       }
-    },
+    }
   },
   watch: {
     checkValue() {
       return null;
-    },
-  },
+    }
+  }
 };
 </script>

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="#60CBEB"></eva-icon>Delete
+          <eva-icon name="trash-2-outline" fill="#24aae1"></eva-icon>Delete
         </span>
       </div>
       <br />

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="#60CBEB"></eva-icon>
+        <eva-icon name="map" fill="#24aae1"></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:#60CBEB"></i>
+            <i class="fa fa-search" style="color:#24aae1"></i>
           </span>
         </div>
       </div>
                 class="dropdown-menu"
                 aria-labelledby="navbarDropdown"
               >
+                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Restaurant')">Details</a>
                 <a
                   class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/status/list')"
-                >Restaurant Details</a>
+                  @click="routerGoTo('/status/timeshareAdmin')"
+                >Menu</a>
                 <a
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/status/timeshareAdmin')"
-                >Menu</a>
+                >Orders</a>
                 <hr />
                 <a
                   class="dropdown-item cursor-pointer"
     },
     SystemRole() {
       //return "Customer";
-      return "SuperAdmin";
-      //return "RestaurantAdmin";
+      //return "SuperAdmin";
+      return "RestaurantAdmin";
     },
     // eslint-disable-next-line vue/return-in-computed-property
     Logout() {

src/main.js

 Vue.use(EvaIcons);
 
 Vue.config.productionTip = false;
-// axios.defaults.baseURL = 'http://localhost:57260/';
 Vue.prototype.$axios = axios;
 
 Vue.prototype.$http = axios;

src/router/index.js

 import RestaurantCategory from "../components/restaurants/restaurantCategories.vue";
 import RestaurantSearch from "../components/home/restaurantSearch.vue";
 import RestuarantList from "../components/restaurants/restaurantList.vue";
+import Restaurant from "../components/restaurants/restaurantDetails.vue";
 import CustomerDetails from "../components/customer/customerDetails.vue";
 import CustomerOrders from "../components/customer/customerOrders.vue";
 import CustomerList from "../components/customer/customerList.vue";
       path: "/CustomerList",
       name: "CustomerList",
       component: CustomerList
+    },
+    {
+      path: "/Restaurant",
+      name: "Restaurant",
+      component: Restaurant
     }
   ]
 });

src/store/index.js

 import RestaurantSearch from './modules/restaurants/restaurantSearch';
 import RestaurantCategories from './modules/restaurants/restaurantCategories';
 import Restaurant from './modules/restaurants/restaurant';
+import MOPs from './modules/shared/restaurantMOP'
 import User from './modules/users/user';
 
 Vue.use(Vuex);
     restaurantSearch: RestaurantSearch,
     restaurantCategories: RestaurantCategories,
     restaurant: Restaurant,
-    user: User
+    user: User,
+    mop: MOPs
   },
 });

src/store/modules/restaurants/restaurant.js

 import axios from 'axios'
+import {
+  result
+} from 'lodash';
 
 export default {
   namespaced: true,
   state: {
     restaurants: [],
-    restaurant: {}
+    restaurant: {},
+    tradingHour: {},
+    tradingHours: []
   },
   mutations: {
     setRestaurants(state, restaurants) {
-      state.restaurants = restaurants
+      state.restaurants = restaurants;
+    },
+    setRestaurant(state, restaurant) {
+      state.restaurant = restaurant;
+    },
+    setTradingHours(state, thours) {
+      state.tradingHours = thours;
     }
   },
   getters: {},
     }) {
       axios
         .get('/api/restaurant/getrestaurants')
-        .then(result => commit("setRestaurants", result.data))
+        .then(result => commit("setRestaurants", result.data));
+    },
+    getRestaurant({
+      commit
+    }, id) {
+      axios
+        .get(`/api/restaurant/${id}`)
+        .then(result => commit("setRestaurant", result.data));
+    },
+    getTradingHours({
+      commit
+    }, id) {
+      axios
+        .get(`/api/restaurant/GetTradingHours/${id}`)
+        .then(result => commit("setTradingHours", result.data));
+    },
+    updateRestaurant({
+      commit
+    }, restaurant) {
+      axios
+        .put('/api/Restaurant', restaurant)
+        .then(result => commit("setRestaurant", restaurant))
+    },
+    removeTradingHours({
+      commit
+    }, id) {
+      axios
+        .delete(`/api/Restaurant/RemoveTradingHours/${id}`)
     }
   }
 }

src/store/modules/restaurants/restaurantCategories.js

 import axios from 'axios';
+import {
+  result
+} from 'lodash';
 
 export default {
   namespaced: true,
       axios
         .delete(`/api/RestaurantCategory/${id}`)
         .then(result => commit('removeCategories', id));
+    },
+    getSelectCategories({
+      commit
+    }) {
+      axios
+        .get('/api/RestaurantCategory/GetSelectCategories')
+        .then(result => commit("setRestaurantsCategories", result.data));
     }
   }
 }

src/store/modules/shared/restaurantMOP.js

+export default {
+  namespaced: true,
+  state: {
+    mops: [{
+        name: "Credit Card"
+      },
+      {
+        name: "EFT"
+      },
+      {
+        name: "Account"
+      },
+      {
+        name: "Cash On Delivery"
+      },
+      {
+        name: "Instant EFT"
+      }
+    ],
+  },
+  mutations: {},
+  getters: {},
+  actions: {}
+}