Bid, prop publish & Pay

package.json

     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@nuxtjs/axios": "^5.6.0",
+    "@nuxtjs/axios": "^5.9.3",
     "animate.css": "^3.7.2",
-    "axios": "^0.19.0",
-    "core-js": "^2.6.5",
-    "datatables.net": "^1.10.19",
+    "axios": "^0.19.2",
+    "core-js": "^2.6.11",
+    "datatables.net": "^1.10.20",
     "jquery": "^3.4.1",
     "lodash": "^4.17.15",
     "material-design-icons-iconfont": "^3.0.3",
     "moment": "^2.24.0",
-    "node-sass": "^4.12.0",
+    "node-sass": "^4.13.1",
     "roboto-fontface": "*",
     "sass-loader": "^7.3.1",
     "stylus-loader": "^3.0.2",
     "v-file-upload": "^3.1.7",
-    "vue": "^2.6.10",
+    "vue": "^2.6.11",
     "vue-carousel": "^0.18.0",
     "vue-eva-icons": "^1.1.1",
     "vue-json-excel": "^0.2.98",
-    "vue-router": "^3.0.7",
-    "vue-trix": "^1.0.0",
+    "vue-router": "^3.1.5",
+    "vue-trix": "^1.1.7",
     "vue2-editor": "^2.10.2",
-    "vuetify": "^1.5.5",
-    "vuex": "^3.1.1"
+    "vuetify": "^1.5.22",
+    "vuex": "^3.1.2"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "^5.11.2",
-    "@vue/cli-plugin-babel": "^3.8.0",
-    "@vue/cli-plugin-eslint": "^3.8.0",
-    "@vue/cli-service": "^3.8.0",
-    "@vue/eslint-config-airbnb": "^4.0.0",
-    "babel-eslint": "^10.0.1",
+    "@fortawesome/fontawesome-free": "^5.12.0",
+    "@vue/cli-plugin-babel": "^3.12.1",
+    "@vue/cli-plugin-eslint": "^3.12.1",
+    "@vue/cli-service": "^3.12.1",
+    "@vue/eslint-config-airbnb": "^4.0.1",
+    "babel-eslint": "^10.0.3",
     "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
+    "eslint-plugin-vue": "^5.2.3",
     "vue-cli-plugin-vuetify": "^0.5.0",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.11"
   }
 }

src/components/admin/misc/carouselSearch.vue

               :showNew="false"
               @onRowClick="onRowClick"
             />
-            <ListView2 v-else :items="properties" :showNew="false" @onRowClick="onRowClick" />
+            <ListView2 v-else :items="propertiesLive" :showNew="false" @onRowClick="onRowClick" />
           </div>
         </div>
       </div>
     if (this.name === "Timeshare") {
       this.getItems(this.user.id);
     } else {
-      this.getProperties(
-        Object.assign(
-          {},
-          {
-            propertyType: "Admin",
-            user: this.user.id
-          }
-        )
-      );
+      this.getLiveProperties();
     }
   },
   computed: {
     ...mapState("myWeeks", ["items"]),
-    ...mapState("propertyList", ["properties"]),
+    ...mapState("propertyList", ["propertiesLive"]),
     // eslint-disable-next-line vue/return-in-computed-property
     nameChanged() {
       if (this.name === "Timeshare") {
         this.getItems(this.user.id);
       } else {
-        this.getProperties(
-          Object.assign(
-            {},
-            {
-              propertyType: "Admin",
-              user: this.user.id
-            }
-          )
-        );
+        this.getLiveProperties();
       }
     }
   },
   methods: {
     ...mapActions("myWeeks", ["getItems"]),
-    ...mapActions("propertyList", ["getProperties"]),
+    ...mapActions("propertyList", ["getLiveProperties"]),
     onRowClick(item) {
       if (this.name === "Timeshare") {
         const week = this.items[item];
         this.$emit("onSelected", week);
       } else {
-        const prop = this.properties[item];
+        const prop = this.propertiesLive[item];
         this.$emit("onSelected", prop);
       }
     }

src/components/financial/makePayment.vue

+<template>
+  <h1>Payment Page</h1>
+</template>

src/components/financial/payments.vue

+<template>
+  <!-- eslint-disable max-len -->
+  <div>
+    <div class="container">
+      <div class="container">
+        <br />
+        <br />
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <div class="title-box-d">
+              <h1 class="title-d" style="text-align:left; font-size: 250%">Payments</h1>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <listView
+        :items="payments"
+        :showNew="false"
+        :editable="true"
+        :deleteable="true"
+        @onEdit="Edit"
+        @onDelete="Delete"
+      />
+    </div>
+    <br />
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+import listView from "../shared/listView.vue";
+import Log from "../../assets/Log";
+
+export default {
+  name: "PaymentList",
+  components: {
+    listView
+  },
+  data() {
+    return {
+      userId: Log.getUser().Id
+    };
+  },
+  methods: {
+    ...mapActions("Payment", ["getPayments"])
+  },
+  mounted() {
+    this.getProperties(Object.assign(this.user.id));
+  },
+  computed: {
+    ...mapState("Payment", ["payments"]),
+    UserChanged() {
+      this.getProperties(Object.assign(this.user.id));
+      return this.user;
+    }
+  }
+};
+</script>

src/components/processFlow/makeOffer.vue

 <template>
   <!-- eslint-disable max-len -->
   <div style="padding-left:50px; padding-right:50px; padding-bottom:50px;">
-    <div v-if="!isSaved">
-      <br />
-      <div v-if="isProperty">
-        <div class="form-group row">
-          <div style="text-align:left">
-            <div class="title-box-d">
-              <h3 class="title-d">{{ item.shortDescription }}</h3>
+    <div v-if="!isLoggedIn">
+      <div class="container col-md-10">
+        <p class="alert myError">Please Login to add a property</p>
+      </div>
+      <button
+        type="button"
+        class="btn btn-b-n"
+        style="width: 150px; height:40px;"
+        data-dismiss="modal"
+      >
+        OK
+      </button>
+    </div>
+    <div v-else>
+      <div v-if="!isSaved">
+        <br />
+        <div v-if="isProperty">
+          <div class="form-group row">
+            <div style="text-align:left">
+              <div class="title-box-d">
+                <h3 class="title-d">{{ item.shortDescription }}</h3>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="form-group row">
-          <div class="col-md-12" style="text-align:left">
-            <div v-html="item.description"></div>
+          <div class="form-group row">
+            <div class="col-md-12" style="text-align:left">
+              <div v-html="item.description"></div>
+            </div>
           </div>
         </div>
-      </div>
-      <div v-if="!isProperty">
-        <div class="form-group row">
-          <div style="text-align:left">
-            <div class="title-box-d">
-              <h3 class="title-d">
-                {{ item.resort.resortName ? item.resort.resortName : item.resort }}
-              </h3>
+        <div v-if="!isProperty">
+          <div class="form-group row">
+            <div style="text-align:left">
+              <div class="title-box-d">
+                <h3 class="title-d">
+                  {{ item.resort.resortName ? item.resort.resortName : item.resort }}
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div class="form-group row">
+            <div class="col-md-6">
+              <label for="resortunit">Unit</label>
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>U#</b>
+                  </span>
+                </div>
+                <input
+                  class="form-control"
+                  type="text"
+                  id="resort"
+                  name="resortunit"
+                  disabled
+                  v-model="item.unitNumber"
+                />
+              </div>
+            </div>
+            <div class="col-md-6">
+              <label for="resortWeek">Module / Week Number</label>
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>M</b>
+                  </span>
+                </div>
+                <input
+                  class="form-control"
+                  type="text"
+                  id="week"
+                  name="resortWeek"
+                  disabled
+                  v-model="item.weekNumber"
+                />
+              </div>
             </div>
           </div>
         </div>
         <div class="form-group row">
           <div class="col-md-6">
-            <label for="resortunit">Unit</label>
+            <label>Current Price</label>
             <div class="input-group mb-3">
               <div class="input-group-prepend">
                 <span class="input-group-text" style="color: #60CBEB">
-                  <b>U#</b>
+                  <b>R</b>
                 </span>
               </div>
               <input
+                v-if="isProperty"
                 class="form-control"
-                type="text"
-                id="resort"
-                name="resortunit"
+                type="number"
+                v-model="item.price"
                 disabled
-                v-model="item.unitNumber"
               />
+              <input v-else class="form-control" type="number" v-model="item.sellPrice" disabled />
             </div>
           </div>
           <div class="col-md-6">
-            <label for="resortWeek">Module / Week Number</label>
+            <label>Offer</label>
             <div class="input-group mb-3">
               <div class="input-group-prepend">
                 <span class="input-group-text" style="color: #60CBEB">
-                  <b>M</b>
+                  <b>R</b>
                 </span>
               </div>
               <input
                 class="form-control"
-                type="text"
-                id="week"
-                name="resortWeek"
-                disabled
-                v-model="item.weekNumber"
+                type="number"
+                step="any"
+                id="minPrice"
+                name="minPrice"
+                v-model="item.offer"
+                :disabled="!isMakeOffer"
               />
             </div>
           </div>
         </div>
-      </div>
-      <div class="form-group row">
-        <div class="col-md-6">
-          <label>Current Price</label>
-          <div class="input-group mb-3">
-            <div class="input-group-prepend">
-              <span class="input-group-text" style="color: #60CBEB">
-                <b>R</b>
-              </span>
-            </div>
-            <input
-              v-if="isProperty"
-              class="form-control"
-              type="number"
-              v-model="item.price"
-              disabled
-            />
-            <input v-else class="form-control" type="number" v-model="item.sellPrice" disabled />
-          </div>
-        </div>
-        <div class="col-md-6">
-          <label>Offer</label>
-          <div class="input-group mb-3">
-            <div class="input-group-prepend">
-              <span class="input-group-text" style="color: #60CBEB">
-                <b>R</b>
-              </span>
-            </div>
-            <input
-              class="form-control"
-              type="number"
-              step="any"
-              id="minPrice"
-              name="minPrice"
-              v-model="item.offer"
+        <div class="form-group row">
+          <div class="col-md-12">
+            <label>Comments</label>
+            <textarea
+              class="form-control editor form-control-lg form-control-a"
+              name="description"
+              v-model="item.comment"
               :disabled="!isMakeOffer"
-            />
+            ></textarea>
           </div>
         </div>
       </div>
-      <div class="form-group row">
+      <div v-if="!isSaved" class="container">
+        <button
+          v-if="isMakeOffer"
+          type="button"
+          @click="SendOffer()"
+          class="btn btn-b-n"
+          style="width: 150px; height:40px;"
+        >
+          Send Offer
+        </button>
+        <button
+          v-if="!isMakeOffer && !isDecline && canEdit"
+          type="submit"
+          @click="Accept()"
+          class="btn btn-b-n"
+          style="width: 150px; height:40px;"
+        >
+          Accept
+        </button>
+        <button
+          v-if="!isMakeOffer && !isDecline && canEdit"
+          type="button"
+          @click="Decline()"
+          class="btn btn-b-n"
+          style="width: 150px; height:40px;"
+        >
+          Decline
+        </button>
+      </div>
+      <div v-if="isDecline || item.statusCode === 'E3'" class="form-group row">
         <div class="col-md-12">
-          <label>Comments</label>
+          <br />
+          <label>Decline Reason</label>
           <textarea
             class="form-control editor form-control-lg form-control-a"
             name="description"
-            v-model="item.comment"
-            :disabled="!isMakeOffer"
+            v-model="item.declineReason"
+            :disabled="item.statusCode === 'E3'"
           ></textarea>
         </div>
       </div>
-    </div>
-    <div v-if="!isSaved" class="container">
       <button
-        v-if="isMakeOffer"
+        v-if="isDecline"
         type="button"
-        @click="SendOffer()"
-        class="btn btn-b-n"
-        style="width: 150px; height:40px;"
-      >
-        Send Offer
-      </button>
-      <button
-        v-if="!isMakeOffer && !isDecline && canEdit"
-        type="submit"
-        @click="Accept()"
+        @click="Complete()"
         class="btn btn-b-n"
         style="width: 150px; height:40px;"
       >
-        Accept
+        Complete
       </button>
-      <button
-        v-if="!isMakeOffer && !isDecline && canEdit"
-        type="button"
-        @click="Decline()"
-        class="btn btn-b-n"
-        style="width: 150px; height:40px;"
-      >
-        Decline
-      </button>
-    </div>
-    <div v-if="isDecline || item.statusCode === 'E3'" class="form-group row">
-      <div class="col-md-12">
-        <br />
-        <label>Decline Reason</label>
-        <textarea
-          class="form-control editor form-control-lg form-control-a"
-          name="description"
-          v-model="item.declineReason"
-          :disabled="item.statusCode === 'E3'"
-        ></textarea>
-      </div>
-    </div>
-    <button
-      v-if="isDecline"
-      type="button"
-      @click="Complete()"
-      class="btn btn-b-n"
-      style="width: 150px; height:40px;"
-    >
-      Complete
-    </button>
-    <div v-if="isSaved">
-      <div class="form-group row">
-        <br />
-        <div class="container col-md-10">
-          <p :class="[isInfo ? 'alert myInfo' : 'alert myWarning']">{{ message }}</p>
+      <div v-if="isSaved">
+        <div class="form-group row">
+          <br />
+          <div class="container col-md-10">
+            <p :class="[isInfo ? 'alert myInfo' : 'alert myWarning']">{{ message }}</p>
+          </div>
         </div>
+        <button
+          v-if="isSaved"
+          type="button"
+          class="btn btn-b-n"
+          style="width: 150px; height:40px;"
+          data-dismiss="modal"
+        >
+          OK
+        </button>
       </div>
-      <button
-        v-if="isSaved"
-        type="button"
-        class="btn btn-b-n"
-        style="width: 150px; height:40px;"
-        data-dismiss="modal"
-      >
-        OK
-      </button>
     </div>
   </div>
 </template>
 
 <script>
 import { mapState, mapActions } from "vuex";
+import Log from "../../assets/Log";
 
 export default {
   name: "MakeOffer",
     canEdit: Boolean,
     item: Object,
     bidId: Number,
-    updateItem: Function
+    updateItem: Function,
+    isLoggedIn: Log.isLoggedIn()
   },
   data() {
     return {

src/components/property/propertyCreate.vue

         <div class="container col-md-10">
           <p class="alert myError">Please Login to add a property</p>
         </div>
+        <div class="container col-md-10">
+          <button
+            type="button"
+            class="btn btn-b-n"
+            style="width: 150px; height:40px;"
+            @click="Login"
+          >
+            Login
+          </button>
+        </div>
       </div>
       <div class="row" v-if="mayEdit">
         <div class="container col-md-10">
                   >
                     <option value="0">Please select type</option>
                     <option v-for="item in propertyTypes" :value="item.id" :key="item.id">
-                      {{
-                      item.description
-                      }}
+                      {{ item.description }}
                     </option>
                   </select>
                 </div>
                   >
                     <option value="0">Please select province</option>
                     <option v-for="province in provinces" :value="province.id" :key="province.id">
-                      {{
-                      province.description
-                      }}
+                      {{ province.description }}
                     </option>
                   </select>
                 </div>
                   >
                     <option value="0">Please select city</option>
                     <option v-for="city in cities" :value="city.id" :key="city.id">
-                      {{
-                      city.description
-                      }}
+                      {{ city.description }}
                     </option>
                   </select>
                 </div>
                   >
                     <option value="0">Please select suburb</option>
                     <option v-for="suburb in suburbs" :value="suburb.id" :key="suburb.id">
-                      {{
-                      suburb.description
-                      }}
+                      {{ suburb.description }}
                     </option>
                   </select>
                 </div>
               @click="SubmitData()"
               class="btn btn-b-n"
               style="width: 85px; height:40px;"
-            >Save</button>
+            >
+              Save
+            </button>
             <div
               v-if="showPropertyTypeError || showProvinceError || showCityError || showSuburbError"
             >
-              <p
-                class="alert myError"
-              >Missing fields. Please fill in all required fields. Marked with *</p>
+              <p class="alert myError">
+                Missing fields. Please fill in all required fields. Marked with *
+              </p>
             </div>
             <div v-if="wait" id="preloader"></div>
           </form>
       customToolbar: [
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
         ["bold", "italic", "underline", "strike"],
-        [
-          { align: "" },
-          { align: "center" },
-          { align: "right" },
-          { align: "justify" }
-        ],
+        [{ align: "" }, { align: "center" }, { align: "right" }, { align: "justify" }],
         [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
         [{ script: "sub" }, { script: "super" }],
         [{ indent: "-1" }, { indent: "+1" }]
         this.showSuburbError = true;
       }
 
-      if (
-        this.salesType === "Rental" &&
-        this.property.dateAvailable === "undef"
-      ) {
+      if (this.salesType === "Rental" && this.property.dateAvailable === "undef") {
         this.showDateError = true;
       }
 
     Close() {
       this.$router.push("/property/admin/list/my");
     },
+    Login() {
+      this.$router.push("/user/login");
+    },
     PropertyTypeSelected(item) {
       if (item.target.options.selectedIndex > 0) {
         this.showPropertyTypeError = false;
     },
     ProvinceSelected(item) {
       if (item.target.options.selectedIndex > 0) {
-        this.selectedProvince = this.provinces[
-          item.target.options.selectedIndex - 1
-        ].description;
+        this.selectedProvince = this.provinces[item.target.options.selectedIndex - 1].description;
         this.getCities(Object.assign({}, { province: this.selectedProvince }));
         this.showProvinceError = false;
       } else {
     },
     CitySelected(item) {
       if (item.target.options.selectedIndex > 0) {
-        this.selectedCity = this.cities[
-          item.target.options.selectedIndex - 1
-        ].description;
+        this.selectedCity = this.cities[item.target.options.selectedIndex - 1].description;
         this.getSuburbs(
-          Object.assign(
-            {},
-            { province: this.selectedProvince, city: this.selectedCity }
-          )
+          Object.assign({}, { province: this.selectedProvince, city: this.selectedCity })
         );
         this.showCityError = false;
       } else {
       }
     },
     getPostalCode(item) {
-      this.property.addressLine3 = this.suburbs[
-        item.target.options.selectedIndex - 1
-      ].postalCode;
+      this.property.addressLine3 = this.suburbs[item.target.options.selectedIndex - 1].postalCode;
       if (item.target.options.selectedIndex > 0) {
         this.showSuburbError = false;
       } else {

src/components/property/propertyList.vue

         :showNew="false"
         :editable="true"
         :deleteable="true"
+        :showCustomAction="true"
+        :CustomActionHeading="'Publish'"
+        :displayColumns="columns"
+        :displayFormats="formats"
+        :displayHeaders="headers"
         @onEdit="Edit"
         @onDelete="Delete"
+        @onCustomClick="Publish"
       />
     </div>
     <br />
     return {
       propertyType: "",
       role: "MY",
-      user: Log.getUser()
+      user: Log.getUser(),
+      columns: [
+        "name",
+        "id",
+        "dateAvailable",
+        "size",
+        "price",
+        "usageType",
+        "type",
+        "saleType",
+        "publish",
+        "status"
+      ],
+      formats: ["text", "text", "date", "text", "money", "text", "text", "text", "text", "text"],
+      headers: ["", "", "Available From", "", "", "", "Property Type", "", "", ""]
     };
   },
   methods: {
-    ...mapActions("propertyList", ["getProperties", "deleteProperty"]),
+    ...mapActions("propertyList", ["getProperties", "deleteProperty", "publishProperty"]),
     Edit(item) {
       const salesType = item.isSale ? "Sale" : "Rental";
       this.$router.push({
     },
     Delete(item) {
       this.deleteProperty(item.id);
+    },
+    Publish(item) {
+      this.publishProperty(item);
     }
   },
   mounted() {
-    if (this.user.role === "Super Admin") {
-      this.role = "SUPERADMIN";
-    }
-    if (this.user.role === "Agency") {
-      this.role = "ADMIN";
-    }
-
-    this.getProperties(
-      Object.assign({
-        propertyType: this.role,
-        user: this.user.id
-      })
-    );
+    this.getProperties(Object.assign(this.user.id));
   },
   computed: {
     ...mapState("propertyList", ["properties"]),
     UserChanged() {
-      if (this.user.role === "Super Admin") {
-        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-        this.role = "SUPERADMIN";
-      }
-      if (this.user.role === "Agency") {
-        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-        this.role = "ADMIN";
-      }
-
-      this.getProperties(
-        Object.assign({
-          propertyType: this.role,
-          user: this.user.id
-        })
-      );
+      this.getProperties(Object.assign(this.user.id));
       return this.user;
     }
   },

src/components/shared/listView.vue

                 </div>
               </div>
             </th>
+            <th v-if="showCustomAction"></th>
             <th v-if="editable"></th>
             <th v-if="deleteable"></th>
           </tr>
                 {{ isObject(item[column]) ? item[column].display : item[column] }}
               </div>
               <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'date'">
-                {{ isObject(item[column]) ? item[column].display : item[column] | toDate }}
+                <div v-if="item[column] !== '0001-01-01T00:00:00'">
+                  {{ isObject(item[column]) ? item[column].display : item[column] | toDate }}
+                </div>
               </div>
               <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'money'">
                 {{ isObject(item[column]) ? item[column].display : item[column] | toCurrency }}
                 {{ isObject(item[column]) ? item[column].display : item[column] }}
               </div>
             </td>
+            <td v-if="showCustomAction" class="my-width">
+              <button type="button" class="btn my-btn" @click="onCustomClick(item)">
+                {{ CustomActionHeading }}
+              </button>
+            </td>
             <td v-if="editable" class="my-width">
               <button type="button" class="btn my-btn" @click="onEdit(item)">Edit</button>
             </td>
     hideItemCount: {
       default: false
     },
-
     currentPage: {
       default: 1
     },
     },
     displayHeaders: {
       default: []
+    },
+    showCustomAction: {
+      default: false
+    },
+    CustomActionHeading: {
+      default: ""
+    },
+    CustomActionCondition: {
+      default: ""
     }
   },
   data() {
     onDelete(item) {
       this.$emit("onDelete", item);
     },
+    onCustomClick(item) {
+      this.$emit("onCustomClick", item);
+    },
     onRowClick(item, i) {
       const ind = this.getActualIndex(i);
       if (_.some(this.selectedItems, x => x === ind)) {

src/components/shared/navBar.vue

                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/user/updateProfileInfo')"
                 >Update Info</a>
+                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/payments')">Payments</a>
               </div>
             </li>
             <li class="nav-item dropdown" v-if="!isLoggedIn">
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import Log from '../../assets/Log';
+import { mapState, mapActions } from "vuex";
+import Log from "../../assets/Log";
 
 export default {
   computed: {
-    ...mapState('authentication', [
-      'user',
-      'flag',
-      'status',
-      'person',
-      'token',
+    ...mapState("authentication", [
+      "user",
+      "flag",
+      "status",
+      "person",
+      "token"
     ]),
     isLoggedIn() {
       console.log(Log.isLoggedIn());
     // eslint-disable-next-line vue/return-in-computed-property
     Logout() {
       return this.logout();
-    },
+    }
   },
   methods: {
-    ...mapActions('authentication', ['logout']),
+    ...mapActions("authentication", ["logout"]),
 
     routerGoTo(goTo) {
-      this.$emit('routerGoTo', goTo);
-    },
-  },
+      this.$emit("routerGoTo", goTo);
+    }
+  }
 };
 </script>
 <style scoped>

src/router/index.js

 import CarouselDetail from "../components/admin/misc/carousel.vue";
 import AlertPage from "../components/shared/alertPage.vue";
 import PropertySearchResults from "../components/property/propertySearchResults.vue";
+import Payments from "../components/financial/payments.vue";
 
 Vue.use(Router);
 
       path: "/property/propertySearch/results",
       name: "PropertySearchResults",
       component: PropertySearchResults
+    },
+    {
+      path: "/payments",
+      name: "Payments",
+      component: Payments
     }
   ]
 });

src/store/index.js

-import Vue from 'vue';
-import Vuex from 'vuex';
+import Vue from "vue";
+import Vuex from "vuex";
 
-import TimeshareModule from './modules/timeshare/timeshare';
-import UsersModule from './modules/users';
-import StatusModule from './modules/timeshare/status';
-import UnitConfigurationModule from './modules/timeshare/unitConfiguration';
-import RegionModule from './modules/timeshare/region';
-import SearchTabModule from './modules/searchTab';
-import ResortModule from './modules/timeshare/resort';
-import PropertyModule from './modules/property/property';
-import WeekModule from './modules/timeshare/week';
-import PropertyAdminModule from './modules/property/propertyAdmin';
-import PropertyList from './modules/property/propertyLists';
-import PropertyTypes from './modules/property/propertyTypes';
-import Register from './modules/user/register';
-import WeekList from './modules/timeshare/weekList';
-import MyWeeks from './modules/timeshare/myWeeks';
-import Bid from './modules/processFlow/bid';
-import Authentication from './modules/user/authentication';
-import PropertySearch from './modules/property/propertySearch';
-import SearchLog from './modules/logs/searchLog';
-import Template from './modules/communication/template';
-import Info from './modules/communication/info';
-import PropertyEdit from './modules/property/propertyEdit';
-import Carousel from './modules/misc/carousel';
-import Individual from './modules/user/individual';
-import Alert from './modules/misc/alert';
-import TenderWeek from './modules/timeshare/tenderWeeks';
+import TimeshareModule from "./modules/timeshare/timeshare";
+import UsersModule from "./modules/users";
+import StatusModule from "./modules/timeshare/status";
+import UnitConfigurationModule from "./modules/timeshare/unitConfiguration";
+import RegionModule from "./modules/timeshare/region";
+import SearchTabModule from "./modules/searchTab";
+import ResortModule from "./modules/timeshare/resort";
+import PropertyModule from "./modules/property/property";
+import WeekModule from "./modules/timeshare/week";
+import PropertyAdminModule from "./modules/property/propertyAdmin";
+import PropertyList from "./modules/property/propertyLists";
+import PropertyTypes from "./modules/property/propertyTypes";
+import Register from "./modules/user/register";
+import WeekList from "./modules/timeshare/weekList";
+import MyWeeks from "./modules/timeshare/myWeeks";
+import Bid from "./modules/processFlow/bid";
+import Authentication from "./modules/user/authentication";
+import PropertySearch from "./modules/property/propertySearch";
+import SearchLog from "./modules/logs/searchLog";
+import Template from "./modules/communication/template";
+import Info from "./modules/communication/info";
+import PropertyEdit from "./modules/property/propertyEdit";
+import Carousel from "./modules/misc/carousel";
+import Individual from "./modules/user/individual";
+import Alert from "./modules/misc/alert";
+import TenderWeek from "./modules/timeshare/tenderWeeks";
+import PaymentModule from "./modules/financial/payment";
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
     carousel: Carousel,
     individual: Individual,
     alert: Alert,
-    tenderWeek: TenderWeek
-  },
+    tenderWeek: TenderWeek,
+    payment: PaymentModule
+  }
 });

src/store/modules/financial/payment.js

+import axios from "axios";
+
+export default {
+  amespaced: true,
+  state: {
+    payments: [],
+    payment: {}
+  },
+  mutations: {
+    setPayment(state, item) {
+      state.payment = item;
+    },
+    setPayments(state, items) {
+      state.payments = items;
+    }
+  },
+  getters: {},
+  actions: {
+    getPayment({ commit }, id) {
+      axios
+        .get(`/api/payment/${id}`)
+        .then(result => commit("setPayment", result.data))
+        .catch(console.error);
+    },
+    getPayments({ commit }) {
+      axios
+        .get("/api/payment")
+        .then(result => commit("setPayments", result.data))
+        .catch(console.error);
+    }
+  }
+};

src/store/modules/property/propertyLists.js

-import axios from 'axios';
+import axios from "axios";
 
 export default {
   namespaced: true,
   state: {
     properties: [],
+    propertiesLive: []
   },
   mutations: {
     setProperties(state, properties) {
     removeProperties(state, id) {
       state.properties.pop(state.properties.find(item => item.id === id));
     },
+    updatePropertyPublish(state, curItem) {
+      state.properties.find(item => item.id === curItem.id).publish = "Yes";
+    },
+    updatePropertyUnpublish(state, curItem) {
+      state.properties.find(item => item.id === curItem.id).publish = "No";
+    },
+    setLiveProperties(state, items) {
+      state.propertiesLive = items;
+    }
   },
   getters: {},
   actions: {
     getProperties({ commit }, item) {
-      console.log(`/api/property/${item.propertyType}/${item.user}`);
+      console.log(`/api/property/GetPropertyList/${item}`);
+      axios
+        .get(`/api/property/GetPropertyList/${item}`) // .get(`/api/property/${item.propertyType}/${item.user}`)
+        .then(result => commit("setProperties", result.data))
+        .catch(console.error);
+    },
+    getLiveProperties({ commit }) {
       axios
-        .get(`/api/property/${item.propertyType}/${item.user}`) // .get(`/api/property/${item.propertyType}/${item.user}`)
-        .then(result => commit('setProperties', result.data))
+        .get("/api/property/GetLivePropertyList") // .get(`/api/property/${item.propertyType}/${item.user}`)
+        .then(result => commit("setLiveProperties", result.data))
         .catch(console.error);
     },
     deleteProperty({ commit }, id) {
       axios
         .delete(`/api/property/${id}`)
-        .then(commit('removeProperties', id))
+        .then(commit("removeProperties", id))
         .catch(console.error);
     },
-  },
+    publishProperty({ commit }, item) {
+      axios
+        .put("/api/property/publishproperty", item)
+        .then(result => commit("updatePropertyPublish", item))
+        .catch(console.error);
+    },
+    unpublishProperty({ commit }, item) {
+      axios
+        .put("/api/property/unpublishproperty", item)
+        .then(result => commit("updatePropertyUnpublish", item))
+        .catch(console.error);
+    }
+  }
 };