Merge branch 'master' of http://192.168.6.188:3000/Provision/UnivateProperties

package.json

     "animate.css": "^3.7.2",
     "axios": "^0.19.0",
     "core-js": "^2.6.5",
+    "datatables.net": "^1.10.19",
     "lodash": "^4.17.15",
     "material-design-icons-iconfont": "^3.0.3",
+    "node-sass": "^4.12.0",
     "roboto-fontface": "*",
+    "sass-loader": "^7.3.1",
     "stylus-loader": "^3.0.2",
     "vue": "^2.6.10",
     "vue-eva-icons": "^1.1.1",
     "vue-router": "^3.0.7",
+    "vue-trix": "^1.0.0",
     "vuetify": "^1.5.5",
     "vuex": "^3.1.1"
   },

public/css/style.css

     font-size: 14px;
 }
 
+.pt-3-half {
+    padding-top: 1.4rem;
+}
 
 /*======================================
 //--//-->   FORM INPUT
 .form {
     position: relative;
     z-index: 1;
-    background: rgb(236, 233, 233);
+    background: #F8F9F9;
     max-width: 360px;
     margin: 0 auto 100px;
     padding: 45px;
 .regform {
     position: relative;
     z-index: 1;
-    background: rgb(236, 233, 233);
+    background: #F8F9F9;
     max-width: 600px;
     margin: 0 auto 100px;
     padding: 45px;

public/img/ligthbox/close.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 47.971 47.971" style="enable-background:new 0 0 47.971 47.971;" xml:space="preserve">
+<g>
+	<path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88   c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242   C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879   s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z" fill="#FFFFFF"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/img/ligthbox/next.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 240.823 240.823" style="enable-background:new 0 0 240.823 240.823;" xml:space="preserve">
+<g>
+	<path id="Chevron_Right_1_" d="M183.189,111.816L74.892,3.555c-4.752-4.74-12.451-4.74-17.215,0c-4.752,4.74-4.752,12.439,0,17.179   l99.707,99.671l-99.695,99.671c-4.752,4.74-4.752,12.439,0,17.191c4.752,4.74,12.463,4.74,17.215,0l108.297-108.261   C187.881,124.315,187.881,116.495,183.189,111.816z" fill="#FFFFFF"/>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/img/ligthbox/prev.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 240.823 240.823" style="enable-background:new 0 0 240.823 240.823;" xml:space="preserve">
+<g>
+	<path id="Chevron_Right" d="M57.633,129.007L165.93,237.268c4.752,4.74,12.451,4.74,17.215,0c4.752-4.74,4.752-12.439,0-17.179   l-99.707-99.671l99.695-99.671c4.752-4.74,4.752-12.439,0-17.191c-4.752-4.74-12.463-4.74-17.215,0L57.621,111.816   C52.942,116.507,52.942,124.327,57.633,129.007z" fill="#FFFFFF"/>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/components/admin/status/changeLogPage.vue

+<template>
+  <section class="intro-single">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <div class="title-single-box">
+            <h1 class="title-single" style="text-align:left;">Change Log</h1>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="table" class="col-xs-12 table-responsive">
+      <datatable :columns="columns" :data="rows"></datatable>
+    </div>
+  </section>
+</template>
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  name: 'changeLogPage',
+  created() {
+    this.getchangeLogPage();
+  },
+  computed: {
+    ...mapState('status', ['changeLogPage']),
+  },
+  methods: {
+    ...mapActions('status', ['getchangeLogPage']),
+  },
+};
+</script>
+
+
+<style>
+</style>

src/components/admin/status/tenderWeekAdminPage.vue

+<template>
+  <section class="intro-single">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <div class="title-single-box">
+            <h1 class="title-single" style="text-align:left;">Tender Week Admin</h1>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="table" class="col-xs-12 table-responsive">
+      <datatable :columns="columns" :data="rows"></datatable>
+    </div>
+  </section>
+</template>
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  name: 'TenderWeekAdmin',
+  created() {
+    this.gettenderWeekdmin();
+  },
+  computed: {
+    ...mapState('status', ['tenderWeekAdmin']),
+  },
+  methods: {
+    ...mapActions('status', ['gettenderWeekAdmin']),
+  },
+};
+</script>
+
+
+<style>
+</style>

src/components/admin/status/timeshareAdminPage.vue

+<template>
+  <section class="intro-single">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <div class="title-single-box">
+            <h1 class="title-single" style="text-align:left;">Timeshare Admin</h1>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="table" class="col-xs-12 table-responsive">
+      <datatable :columns="columns" :data="rows"></datatable>
+    </div>
+  </section>
+</template>
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  name: 'TimeshareAdmin',
+  created() {
+    this.gettimeshareAdmin();
+  },
+  computed: {
+    ...mapState('status', ['timeshareAdmin']),
+  },
+  methods: {
+    ...mapActions('status', ['gettimeshareAdmin']),
+  },
+};
+</script>
+
+
+<style>
+</style>

src/components/admin/status/userManagementPage.vue

+<template>
+  <section class="intro-single">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <div class="title-single-box">
+            <h1 class="title-single" style="text-align:left;">User Management</h1>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="table" class="col-xs-12 table-responsive">
+      <datatable :columns="columns" :data="rows"></datatable>
+    </div>
+  </section>
+</template>
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  name: 'userManagementPage',
+  created() {
+    this.getuserManagementPage();
+  },
+  computed: {
+    ...mapState('status', ['userManagementPage']),
+  },
+  methods: {
+    ...mapActions('status', ['getuserManagementPage']),
+  },
+};
+</script>
+
+
+<style>
+</style>

src/components/home/agentSection.vue

-<template>
-  <div>
-    <section class="section-agents section-t8">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12">
-            <div class="title-wrap d-flex justify-content-between">
-              <div class="title-box">
-                <h2 class="title-a">Best Agents</h2>
-              </div>
-              <div class="title-link">
-                <a href="agents-grid.html">
-                  All Agents
-                  <span class="ion-ios-arrow-forward"></span>
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-md-4">
-            <div class="card-box-d">
-              <div class="card-img-d">
-                <img src="img/agent-4.jpg" alt class="img-d img-fluid" />
-              </div>
-              <div class="card-overlay card-overlay-hover">
-                <div class="card-header-d">
-                  <div class="card-title-d align-self-center">
-                    <h3 class="title-d">
-                      <a href="agent-single.html" class="link-two">
-                        Margaret Sotillo
-                        <br />Escala
-                      </a>
-                    </h3>
-                  </div>
-                </div>
-                <div class="card-body-d">
-                  <p
-                    class="content-d color-text-a"
-                  >Sed porttitor lectus nibh, Cras ultricies ligula sed magna dictum porta two.</p>
-                  <div class="info-agents color-a">
-                    <p>
-                      <strong>Phone:</strong> +54 356 945234
-                    </p>
-                    <p>
-                      <strong>Email:</strong> agents@example.com
-                    </p>
-                  </div>
-                </div>
-                <div class="card-footer-d">
-                  <div class="socials-footer d-flex justify-content-center">
-                    <ul class="list-inline">
-                      <li class="list-inline-item">
-                        <a href="#" class="link-one">
-                          <i class="fa fa-facebook" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                      <li class="list-inline-item">
-                        <a href="#" class="link-one">
-                          <i class="fa fa-twitter" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                      <li class="list-inline-item">
-                        <a href="#" class="link-one">
-                          <i class="fa fa-instagram" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                      <li class="list-inline-item">
-                        <a href="#" class="link-one">
-                          <i class="fa fa-pinterest-p" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                      <li class="list-inline-item">
-                        <a href="#" class="link-one">
-                          <i class="fa fa-dribbble" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-md-4">
-            <div class="card-box-d">
-              <div class="card-img-d">
-                <img src="img/agent-1.jpg" alt class="img-d img-fluid" />
-              </div>
-              <div class="card-overlay card-overlay-hover">
-                <div class="card-header-d">
-                  <div class="card-title-d align-self-center">
-                    <h3 class="title-d">
-                      <a href="agent-single.html" class="link-two">
-                        Stiven Spilver
-                        <br />Darw
-                      </a>
-                    </h3>
-                  </div>
-                </div>
-                <div class="card-body-d">
-                  <p
-                    class="content-d color-text-a"
-                  >Sed porttitor lectus nibh, Cras ultricies ligula sed magna dictum porta two.</p>
-                  <div class="info-agents color-a">
-                    <p>
-                      <strong>Phone:</strong> +54 356 945234
-                    </p>
-                    <p>
-                      <strong>Email:</strong> agents@example.com
-                    </p>
-                  </div>
-                </div>
-                <div class="card-footer-d">
-                  <div class="socials-footer d-flex justify-content-center">
-                    <ul class="list-inline">
-                      <li class="list-inline-item">
-                        <a href="#" class="link-one">
-                          <i class="fa fa-facebook" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                      <li class="list-inline-item">
-                        <a href="#" class="link-one">
-                          <i class="fa fa-twitter" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                      <li class="list-inline-item">
-                        <a href="#" class="link-one">
-                          <i class="fa fa-instagram" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                      <li class="list-inline-item">
-                        <a href="#" class="link-one">
-                          <i class="fa fa-pinterest-p" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                      <li class="list-inline-item">
-                        <a href="#" class="link-one">
-                          <i class="fa fa-dribbble" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-md-4">
-            <div class="card-box-d">
-              <div class="card-img-d">
-                <img src="img/agent-5.jpg" alt class="img-d img-fluid" />
-              </div>
-              <div class="card-overlay card-overlay-hover">
-                <div class="card-header-d">
-                  <div class="card-title-d align-self-center">
-                    <h3 class="title-d">
-                      <a href="agent-single.html" class="link-two">
-                        Emma Toledo
-                        <br />Cascada
-                      </a>
-                    </h3>
-                  </div>
-                </div>
-                <div class="card-body-d">
-                  <p
-                    class="content-d color-text-a"
-                  >Sed porttitor lectus nibh, Cras ultricies ligula sed magna dictum porta two.</p>
-                  <div class="info-agents color-a">
-                    <p>
-                      <strong>Phone:</strong> +54 356 945234
-                    </p>
-                    <p>
-                      <strong>Email:</strong> agents@example.com
-                    </p>
-                  </div>
-                </div>
-                <div class="card-footer-d">
-                  <div class="socials-footer d-flex justify-content-center">
-                    <ul class="list-inline">
-                      <li class="list-inline-item">
-                        <a href="#" class="link-one">
-                          <i class="fa fa-facebook" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                      <li class="list-inline-item">
-                        <a href="#" class="link-one">
-                          <i class="fa fa-twitter" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                      <li class="list-inline-item">
-                        <a href="#" class="link-one">
-                          <i class="fa fa-instagram" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                      <li class="list-inline-item">
-                        <a href="#" class="link-one">
-                          <i class="fa fa-pinterest-p" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                      <li class="list-inline-item">
-                        <a href="#" class="link-one">
-                          <i class="fa fa-dribbble" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-<script>
-export default {};
-</script>

src/components/home/homePage.vue

 import CarouselSection from './carouselSection.vue';
 import ServiceSection from './serviceSection.vue';
 import PropertySection from './propertySection.vue';
-import AgentSection from './agentSection.vue';
 import NewsSection from './newsSection.vue';
 import TestimonialSection from './testimonialSection.vue';
 
     CarouselSection,
     ServiceSection,
     PropertySection,
-    AgentSection,
     NewsSection,
     TestimonialSection,
   },

src/components/home/propertySection.vue

                 <h2 class="title-a">Latest Properties</h2>
               </div>
               <div class="title-link">
-                <a href="property-grid.html">
-                  All Property
-                  <span class="ion-ios-arrow-forward"></span>
-                </a>
+                <router-link to="/timeshare/buy">All Properties</router-link>
+                <span class="ion-ios-arrow-forward"></span>
               </div>
             </div>
           </div>

src/components/home/serviceSection.vue

             <div class="card-box-c foo">
               <div class="card-header-c d-flex">
                 <div class="card-box-ico">
-                  <span class="fa fa-gamepad"></span>
+                  <span class="fa fa-umbrella"></span>
                 </div>
                 <div class="card-title-c align-self-center">
-                  <h2 class="title-c">Lifestyle</h2>
+                  <h2 class="title-c">Timeshare</h2>
                 </div>
               </div>
               <div class="card-body-c">
                 <p class="content-c">
-                  Sed porttitor lectus nibh. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa,
-                  convallis a pellentesque
-                  nec, egestas non nisi.
+                  Need to sell your timeshare, or thinking of buying a holiday week?
+                  <br />Get in touch to meet the professionals that has made timeshare resales a pleasure...
                 </p>
               </div>
               <div class="card-footer-c">
-                <a href="#" class="link-c link-icon">
-                  Read more
-                  <span class="ion-ios-arrow-forward"></span>
-                </a>
+                <router-link to="/timeshare/buy">Read more</router-link>
+                <span class="ion-ios-arrow-forward"></span>
               </div>
             </div>
           </div>
             <div class="card-box-c foo">
               <div class="card-header-c d-flex">
                 <div class="card-box-ico">
-                  <span class="fa fa-usd"></span>
+                  <span class="fa fa-home"></span>
                 </div>
                 <div class="card-title-c align-self-center">
-                  <h2 class="title-c">Loans</h2>
+                  <h2 class="title-c">Residential</h2>
                 </div>
               </div>
               <div class="card-body-c">
                 <p class="content-c">
-                  Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Mauris blandit
-                  aliquet elit, eget tincidunt
-                  nibh pulvinar a.
+                  Find your dream home or looking to sell your residential property, instead?
+                  <br />We pride ourself on professionalism and the right expertise...
                 </p>
               </div>
               <div class="card-footer-c">
-                <a href="#" class="link-c link-icon">
-                  Read more
-                  <span class="ion-ios-arrow-forward"></span>
-                </a>
+                <router-link to="/property/Residential/Search">Read more</router-link>
+                <span class="ion-ios-arrow-forward"></span>
               </div>
             </div>
           </div>
             <div class="card-box-c foo">
               <div class="card-header-c d-flex">
                 <div class="card-box-ico">
-                  <span class="fa fa-home"></span>
+                  <span class="fa fa-building-o"></span>
                 </div>
                 <div class="card-title-c align-self-center">
-                  <h2 class="title-c">Sell</h2>
+                  <h2 class="title-c">Commercial</h2>
                 </div>
               </div>
               <div class="card-body-c">
                 <p class="content-c">
-                  Sed porttitor lectus nibh. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa,
-                  convallis a pellentesque
-                  nec, egestas non nisi.
+                  Want to generate profit through leasing or rental?
+                  <br />Allow us to act as the mediator between landlord and tenants...
                 </p>
               </div>
               <div class="card-footer-c">
-                <a href="#" class="link-c link-icon">
-                  Read more
-                  <span class="ion-ios-arrow-forward"></span>
-                </a>
+                <router-link to="/property/Commercial/Search">Read more</router-link>
+                <span class="ion-ios-arrow-forward"></span>
               </div>
             </div>
           </div>

src/components/home/testimonialSection.vue

 <template>
+  <!-- eslint-disable max-len -->
   <div>
     <section class="section-testimonials section-t8 nav-arrow-a">
       <div class="container">
               <div class="row">
                 <div class="col-sm-12 col-md-6">
                   <div class="testimonial-img">
-                    <img src="img/testimonial-1.jpg" alt class="img-fluid" />
+                    <router-link to="/resort/csp">
+                      <img src="img/testimonial-1.png" alt class="CrystalSprings" />
+                    </router-link>
                   </div>
                 </div>
                 <div class="col-sm-12 col-md-6">
                   </div>
                   <div class="testimonials-content">
                     <p class="testimonial-text">
-                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, cupiditate ea nam praesentium
-                      debitis hic ber quibusdam
-                      voluptatibus officia expedita corpori.
+                      Loved my stay at Crystal Springs. Appreciated the proffesionalism and friendliness of the staff.
+                      Thoroughly enjoyed the hike, game drive, jaccuzzi, heated pool, steam room and even the trampolines. Our chalet was in stellar condition.
+                      The heaters, extra blankets and fire place ensured we kept warm and toasty during the cold evenings.
+                      The food at the restaurant was delicious, and the experience was made even better by the friendly waitress who served us. Arriving to find Ferreiro Roche and Champagne in our chalet was the cherry on top.
+                      I would wholeheartedly recommend this resort any day. Well done Crystal Springs!
                     </p>
                   </div>
                   <div class="testimonial-author-box">
-                    <img src="img/mini-testimonial-1.jpg" alt class="testimonial-avatar" />
-                    <h5 class="testimonial-author">Albert & Erika</h5>
+                    <eva-icon name="people-outline" fill="#60CBEB"></eva-icon>
+                    <h5 class="testimonial-author">Anati Bacela</h5>
+                    <p>- on visiting Crystal Springs</p>
                   </div>
                 </div>
               </div>
               <div class="row">
                 <div class="col-sm-12 col-md-6">
                   <div class="testimonial-img">
-                    <img src="img/testimonial-2.jpg" alt class="img-fluid" />
+                    <router-link to="/resort/nl">
+                      <img src="img/testimonial-2.png" alt class="Ngwenya Lodge" />
+                    </router-link>
                   </div>
                 </div>
                 <div class="col-sm-12 col-md-6">
                   </div>
                   <div class="testimonials-content">
                     <p class="testimonial-text">
-                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, cupiditate ea nam praesentium
-                      debitis hic ber quibusdam
-                      voluptatibus officia expedita corpori.
+                      We have been going to Ngwenya for 25 years or more. every year we have had wonderful sightings from our verandah. To me it is paradise on earth and we never grow tired of it.
+                      Wonderful play area for people of all ages, the gardens are well kept, the restaurant is good and the chalets are well maintained.
+                      Most of all what I love about Ngwenya is it's peaceful and tranquil atmosphere and the close proximity to our amazing wild life We will continue going for many more years
                     </p>
                   </div>
                   <div class="testimonial-author-box">
-                    <img src="img/mini-testimonial-2.jpg" alt class="testimonial-avatar" />
-                    <h5 class="testimonial-author">Pablo & Emma</h5>
+                    <eva-icon name="people-outline" fill="#60CBEB"></eva-icon>
+                    <h5 class="testimonial-author">Linda Lewis</h5>
+                    <p>- on visiting Ngwenya Lodge</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="carousel-item-a">
+            <div class="testimonials-box">
+              <div class="row">
+                <div class="col-sm-12 col-md-6">
+                  <div class="testimonial-img">
+                    <router-link to="/resort/mnr">
+                      <img src="img/testimonial-3.2.jpg" alt class="Mabalingwe Nature Reserve" />
+                    </router-link>
+                  </div>
+                </div>
+                <div class="col-sm-12 col-md-6">
+                  <div class="testimonial-ico">
+                    <span class="ion-ios-quote"></span>
+                  </div>
+                  <div class="testimonials-content">
+                    <p class="testimonial-text">
+                      Great experience, I loved the place, so amazing and we saw many more animals. Had different kinds of visitors everyday (Impala, wild pig, monkeys, birds and more).
+                      The nature was great with all mountains and valleys and lakes. Every corner had a new moment. The staff was very friendly and helpful at all times.
+                      Thanks to the restaurant staff for helping me organizing my Husband's birthday surprise dinner. Best memories ever. Looking forward to my next visit with friends and more family members.
+                    </p>
+                  </div>
+                  <div class="testimonial-author-box">
+                    <eva-icon name="people-outline" fill="#60CBEB"></eva-icon>
+                    <h5 class="testimonial-author">Sophie Adewale</h5>
+                    <p>- on visiting Mabalingwe Nature Reserve</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="carousel-item-a">
+            <div class="testimonials-box">
+              <div class="row">
+                <div class="col-sm-12 col-md-6">
+                  <div class="testimonial-img">
+                    <router-link to="/resort/le">
+                      <img src="img/testimonial-4.png" alt class="Little Eden" />
+                    </router-link>
+                  </div>
+                </div>
+                <div class="col-sm-12 col-md-6">
+                  <div class="testimonial-ico">
+                    <span class="ion-ios-quote"></span>
+                  </div>
+                  <div class="testimonials-content">
+                    <p class="testimonial-text">
+                      Everything!! Little Eden is like a secret jewel no one but yourself and your very best
+                      friends should now about but at the same time its like discovering something so
+                      awesome you can never keep it to yourslef. You have to tell the world!!!
+                    </p>
+                  </div>
+                  <div class="testimonial-author-box">
+                    <eva-icon name="people-outline" fill="#60CBEB"></eva-icon>
+                    <h5 class="testimonial-author">Sisna & Andries Venter</h5>
+                    <p>- on visiting Little Eden</p>
                   </div>
                 </div>
               </div>

src/components/misc/contactUs.vue

 <template>
   <div class="container">
-    <div class="row">
-      <div class="col-md-12">
-        <h1 class="my-4">Contact Us</h1>
+    <section class="intro-single">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <div class="title-single-box">
+              <h1 class="title-single" style="text-align:left;">Contact Us</h1>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
+    </section>
     <div class="map-wrapper">
       <div class="map-canvas" id="map-canvas"></div>
       <a

src/components/property/propertyCard.vue

                   class="link-a"
                 >{{ currentProperty.shortDescription }}</router-link>
               </h4>
+              <h4 class="card-title-c">
+                <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
+                  {{ currentProperty.province }}
+                  <br />
+                  {{ currentProperty.city }}
+                  <br />
+                  {{ currentProperty.suburb }}
+                </router-link>
+              </h4>
             </div>
             <div class="card-body-a">
               <div class="price-box d-flex">
 <script>
 export default {
   props: {
-    properties: Object
-  }
+    properties: Object,
+  },
 };
-</script>
+</script>

src/components/property/propertyImage.vue

     </div>
     <br />
     <div class="form-group row">
-      <div v-for="img in image" class="col-md-2">
+      <div v-for="(img, i) in image" class="col-md-2" :key="i">
         <img :src="img" style="height:200px; width:150px; object-fit: cover;" />
         <br />
         <a class="fa fa-times del" @click="removeImage(key)" />
 
 <script>
 export default {
+  props: {
+    loadedImages: Function,
+  },
   data() {
     return {
       images: {},
-      image: []
+      image: [],
     };
   },
 
       if (!this.images.length) return;
 
       this.createImage(this.images);
+      this.loadedImages(this.image);
     },
 
     createImage(file) {
         const reader = new FileReader();
         var vm = this;
 
-        reader.onload = e => {
+        reader.onload = (e) => {
           vm.image.push(e.target.result);
           console.log(vm.image);
         };
       this.images.splice(key, 1);
 
       if (!this.image.length) {
-        this.$refs.im.value = "";
+        this.$refs.im.value = '';
       }
-    }
-  }
+    },
+  },
 };
-</script>
+</script>

src/components/property/propertyPage.vue

 <template>
-  <div>
+  <!-- eslint-disable max-len -->
+  <div v-if="property">
     <section class="intro-single">
       <div class="container">
         <div class="row">
           <div class="col-md-12 col-lg-8">
             <div class="title-single-box">
-              <h1 class="title-single">{{ Property.shortDescription }}</h1>
-              <span class="color-text-a">{{ Property.suburb }}</span>
+              <h1 class="title-single">{{ property.shortDescription }}</h1>
             </div>
           </div>
-          <!-- <div class="col-md-12 col-lg-4">
-            <nav aria-label="breadcrumb" class="breadcrumb-box d-flex justify-content-lg-end">
-              <ol class="breadcrumb">
-                <li class="breadcrumb-item">
-                  <a href="index.html">Home</a>
-                </li>
-                <li class="breadcrumb-item">
-                  <a href="property-grid.html">Properties</a>
-                </li>
-                <li class="breadcrumb-item active" aria-current="page">304 Blaster Up</li>
-              </ol>
-            </nav>
-          </div>-->
         </div>
       </div>
     </section>
     <!--/ Intro Single End /-->
 
-    <!--/ Property Single Star /-->
+    <!--/ property Single Star /-->
     <section class="property-single nav-arrow-b">
       <div class="container">
+        <div class="row">
+          <lightBox
+            :thumbnails="propertyImages"
+            :largeImages="propertyImages"
+            :caption="false"
+            class="lightBox"
+          />
+        </div>
         <div class="row">
           <div class="col-sm-12">
-            <div id="property-single-carousel" class="owl-carousel owl-arrow gallery-property">
-              <div class="carousel-item-b">
-                <img
-                  :src="propertyImages[0]"
-                  style="height:800px; width:1200px; object-fit: cover;"
-                />
-              </div>
-              <div class="carousel-item-b">
-                <img
-                  :src="propertyImages[1]"
-                  style="height:800px; width:1200px; object-fit: cover;"
-                />
-              </div>
-              <div class="carousel-item-b">
-                <img
-                  :src="propertyImages[2]"
-                  style="height:800px; width:1200px; object-fit: cover;"
-                />
-              </div>
-              <div class="carousel-item-b">
-                <img
-                  :src="propertyImages[3]"
-                  style="height:800px; width:1200px; object-fit: cover;"
-                />
-              </div>
-            </div>
             <div class="row justify-content-between">
               <div class="col-md-7 col-lg-7 section-md-t3">
                 <div class="row">
                     </div>
                   </div>
                 </div>
-                <div class="property-description" v-html="Property.description" />
-                <div v-for="display in Property.displayData">
+                <div class="property-description" v-html="property.description" />
+                <div v-for="display in property.displayData" :key="display.id">
                   <div class="row section-t3">
                     <div class="col-sm-12">
                       <div class="title-box-d">
                     </div>
                   </div>
                   <div class="summary-list">
-                    <ul class="list" v-for="item in display.values">
+                    <ul class="list" v-for="item in display.values" :key="item.id">
                       <li class="d-flex justify-content-between">
                         <strong>{{ item.name }}:</strong>
                         <span v-html="item.value"></span>
                       <span class="ion-money">R</span>
                     </div>
                     <div class="card-title-c align-self-center">
-                      <h5 class="title-c">{{ Property.price }}</h5>
+                      <h5 class="title-c">{{ formatPrice(property.price) }}</h5>
                     </div>
                   </div>
                 </div>
                 <div class="property-summary">
-                  <!-- <div class="row">
+                  <div class="row">
                     <div class="col-sm-12">
                       <div class="title-box-d section-t4">
-                        <h3 class="title-d">Quick Summary</h3>
+                        <h3 class="title-d">Summary</h3>
                       </div>
                     </div>
                   </div>
                     <ul class="list">
                       <li class="d-flex justify-content-between">
                         <strong>Property ID:</strong>
-                        <span>1134</span>
-                      </li>
-                      <li class="d-flex justify-content-between">
-                        <strong>Location:</strong>
-                        <span>Chicago, IL 606543</span>
-                      </li>
-                      <li class="d-flex justify-content-between">
-                        <strong>Property Type:</strong>
-                        <span>House</span>
+                        <span>{{ property.id }}</span>
                       </li>
                       <li class="d-flex justify-content-between">
                         <strong>Status:</strong>
-                        <span>Sale</span>
-                      </li>
-                      <li class="d-flex justify-content-between">
-                        <strong>Area:</strong>
-                        <span>
-                          340m
-                          <sup>2</sup>
-                        </span>
-                      </li>
-                      <li class="d-flex justify-content-between">
-                        <strong>Beds:</strong>
-                        <span>4</span>
+                        <span v-if="property.isSale">Sale</span>
+                        <span v-else>Rental</span>
                       </li>
                       <li class="d-flex justify-content-between">
-                        <strong>Baths:</strong>
-                        <span>2</span>
-                      </li>
-                      <li class="d-flex justify-content-between">
-                        <strong>Garage:</strong>
-                        <span>1</span>
-                      </li>
-                    </ul>
-                  </div>-->
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-md-10 offset-md-1">
-            <ul class="nav nav-pills-a nav-pills mb-3 section-t3" id="pills-tab" role="tablist">
-              <li class="nav-item">
-                <a
-                  class="nav-link active"
-                  id="pills-video-tab"
-                  data-toggle="pill"
-                  href="#pills-video"
-                  role="tab"
-                  aria-controls="pills-video"
-                  aria-selected="true"
-                >Video</a>
-              </li>
-              <li class="nav-item">
-                <a
-                  class="nav-link"
-                  id="pills-plans-tab"
-                  data-toggle="pill"
-                  href="#pills-plans"
-                  role="tab"
-                  aria-controls="pills-plans"
-                  aria-selected="false"
-                >Floor Plans</a>
-              </li>
-              <li class="nav-item">
-                <a
-                  class="nav-link"
-                  id="pills-map-tab"
-                  data-toggle="pill"
-                  href="#pills-map"
-                  role="tab"
-                  aria-controls="pills-map"
-                  aria-selected="false"
-                >Ubication</a>
-              </li>
-            </ul>
-            <div class="tab-content" id="pills-tabContent">
-              <div
-                class="tab-pane fade show active"
-                id="pills-video"
-                role="tabpanel"
-                aria-labelledby="pills-video-tab"
-              >
-                <iframe
-                  src="https://player.vimeo.com/video/73221098"
-                  width="100%"
-                  height="460"
-                  frameborder="0"
-                  webkitallowfullscreen
-                  mozallowfullscreen
-                  allowfullscreen
-                ></iframe>
-              </div>
-              <div
-                class="tab-pane fade"
-                id="pills-plans"
-                role="tabpanel"
-                aria-labelledby="pills-plans-tab"
-              >
-                <img src="img/plan2.jpg" alt class="img-fluid" />
-              </div>
-              <div
-                class="tab-pane fade"
-                id="pills-map"
-                role="tabpanel"
-                aria-labelledby="pills-map-tab"
-              >
-                <iframe
-                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.1422937950147!2d-73.98731968482413!3d40.75889497932681!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25855c6480299%3A0x55194ec5a1ae072e!2sTimes+Square!5e0!3m2!1ses-419!2sve!4v1510329142834"
-                  width="100%"
-                  height="460"
-                  frameborder="0"
-                  style="border:0"
-                  allowfullscreen
-                ></iframe>
-              </div>
-            </div>
-          </div>
-          <div class="col-md-12">
-            <div class="row section-t3">
-              <div class="col-sm-12">
-                <div class="title-box-d">
-                  <h3 class="title-d">Contact Agent</h3>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-md-6 col-lg-4">
-                <img src="img/agent-4.jpg" alt class="img-fluid" />
-              </div>
-              <div class="col-md-6 col-lg-4">
-                <div class="property-agent">
-                  <h4 class="title-agent">Anabella Geller</h4>
-                  <p class="color-text-a">
-                    Nulla porttitor accumsan tincidunt. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet
-                    dui. Quisque velit nisi,
-                    pretium ut lacinia in, elementum id enim.
-                  </p>
-                  <ul class="list-unstyled">
-                    <li class="d-flex justify-content-between">
-                      <strong>Phone:</strong>
-                      <span class="color-text-a">(222) 4568932</span>
-                    </li>
-                    <li class="d-flex justify-content-between">
-                      <strong>Mobile:</strong>
-                      <span class="color-text-a">777 287 378 737</span>
-                    </li>
-                    <li class="d-flex justify-content-between">
-                      <strong>Email:</strong>
-                      <span class="color-text-a">annabella@example.com</span>
-                    </li>
-                    <li class="d-flex justify-content-between">
-                      <strong>Skype:</strong>
-                      <span class="color-text-a">Annabela.ge</span>
-                    </li>
-                  </ul>
-                  <div class="socials-a">
-                    <ul class="list-inline">
-                      <li class="list-inline-item">
-                        <a href="#">
-                          <i class="fa fa-facebook" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                      <li class="list-inline-item">
-                        <a href="#">
-                          <i class="fa fa-twitter" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                      <li class="list-inline-item">
-                        <a href="#">
-                          <i class="fa fa-instagram" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                      <li class="list-inline-item">
-                        <a href="#">
-                          <i class="fa fa-pinterest-p" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                      <li class="list-inline-item">
-                        <a href="#">
-                          <i class="fa fa-dribbble" aria-hidden="true"></i>
-                        </a>
+                        <strong>Address:</strong>
+                        <span
+                          v-html="formatAddress(property.addressLine1) + formatAddress(property.addressLine2) + formatAddress(property.addressLine3) + formatAddress(property.suburb.description) + formatAddress(property.city.description) + formatAddress(property.province.description) "
+                        ></span>
                       </li>
                     </ul>
                   </div>
                 </div>
-              </div>
-              <div class="col-md-12 col-lg-4">
-                <div class="property-contact">
-                  <form class="form-a">
-                    <div class="row">
-                      <div class="col-md-12 mb-1">
-                        <div class="form-group">
-                          <input
-                            type="text"
-                            class="form-control form-control-lg form-control-a"
-                            id="inputName"
-                            placeholder="Name *"
-                            required
-                          />
-                        </div>
-                      </div>
-                      <div class="col-md-12 mb-1">
-                        <div class="form-group">
-                          <input
-                            type="email"
-                            class="form-control form-control-lg form-control-a"
-                            id="inputEmail1"
-                            placeholder="Email *"
-                            required
-                          />
-                        </div>
+                <div class="col-md-12">
+                  <div class="row section-t3">
+                    <div class="col-sm-12">
+                      <div class="title-box-d">
+                        <h3 class="title-d">Contact Agent</h3>
                       </div>
-                      <div class="col-md-12 mb-1">
-                        <div class="form-group">
-                          <textarea
-                            id="textMessage"
-                            class="form-control"
-                            placeholder="Comment *"
-                            name="message"
-                            cols="45"
-                            rows="8"
-                            required
-                          ></textarea>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-md-12">
+                      <img src="img/agent-4.jpg" alt class="img-fluid" />
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-md-12">
+                      <div class="property-agent">
+                        <h4 class="title-agent">Anabella Geller</h4>
+                        <p class="color-text-a">
+                          Nulla porttitor accumsan tincidunt. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet
+                          dui. Quisque velit nisi,
+                          pretium ut lacinia in, elementum id enim.
+                        </p>
+                        <ul class="list-unstyled">
+                          <li class="d-flex justify-content-between">
+                            <strong>Phone:</strong>
+                            <span class="color-text-a">(222) 4568932</span>
+                          </li>
+                          <li class="d-flex justify-content-between">
+                            <strong>Mobile:</strong>
+                            <span class="color-text-a">777 287 378 737</span>
+                          </li>
+                          <li class="d-flex justify-content-between">
+                            <strong>Email:</strong>
+                            <span class="color-text-a">annabella@example.com</span>
+                          </li>
+                          <li class="d-flex justify-content-between">
+                            <strong>Skype:</strong>
+                            <span class="color-text-a">Annabela.ge</span>
+                          </li>
+                        </ul>
+                        <div class="socials-a">
+                          <ul class="list-inline">
+                            <li class="list-inline-item">
+                              <a href="#">
+                                <i class="fa fa-facebook" aria-hidden="true"></i>
+                              </a>
+                            </li>
+                            <li class="list-inline-item">
+                              <a href="#">
+                                <i class="fa fa-twitter" aria-hidden="true"></i>
+                              </a>
+                            </li>
+                            <li class="list-inline-item">
+                              <a href="#">
+                                <i class="fa fa-instagram" aria-hidden="true"></i>
+                              </a>
+                            </li>
+                            <li class="list-inline-item">
+                              <a href="#">
+                                <i class="fa fa-pinterest-p" aria-hidden="true"></i>
+                              </a>
+                            </li>
+                            <li class="list-inline-item">
+                              <a href="#">
+                                <i class="fa fa-dribbble" aria-hidden="true"></i>
+                              </a>
+                            </li>
+                          </ul>
                         </div>
                       </div>
-                      <div class="col-md-12">
-                        <button type="submit" class="btn btn-a">Send Message</button>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-md-12">
+                      <div class="property-contact">
+                        <form class="form-a">
+                          <div class="row">
+                            <div class="col-md-12 mb-1">
+                              <div class="form-group">
+                                <input
+                                  type="text"
+                                  class="form-control form-control-lg form-control-a"
+                                  id="inputName"
+                                  placeholder="Name *"
+                                  required
+                                />
+                              </div>
+                            </div>
+                            <div class="col-md-12 mb-1">
+                              <div class="form-group">
+                                <input
+                                  type="email"
+                                  class="form-control form-control-lg form-control-a"
+                                  id="inputEmail1"
+                                  placeholder="Email *"
+                                  required
+                                />
+                              </div>
+                            </div>
+                            <div class="col-md-12 mb-1">
+                              <div class="form-group">
+                                <textarea
+                                  id="textMessage"
+                                  class="form-control"
+                                  placeholder="Comment *"
+                                  name="message"
+                                  cols="45"
+                                  rows="8"
+                                  required
+                                ></textarea>
+                              </div>
+                            </div>
+                            <div class="col-md-12">
+                              <button type="submit" class="btn btn-a">Send Message</button>
+                            </div>
+                          </div>
+                        </form>
                       </div>
                     </div>
-                  </form>
+                  </div>
                 </div>
               </div>
             </div>
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex';
+import lightBox from '../shared/lightBoxGallery.vue';
+
 export default {
-  name: "Property",
+  name: 'property',
+  components: {
+    lightBox,
+  },
   data() {
-    return {
-      Property: {},
-      propertyImages: []
-    };
+    return {};
+  },
+  mounted() {
+    this.getProperty(Object.assign({}, { id: this.$route.params.id }));
+    this.getPropertyImages(Object.assign({}, { id: this.$route.params.id }));
+  },
+  computed: {
+    ...mapState('property', ['property', 'propertyImages']),
+  },
+  methods: {
+    ...mapActions('property', ['getProperty', 'getPropertyImages']),
+    formatPrice(value) {
+      const val = (value / 1).toFixed(2);
+      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+    },
+    formatAddress(value) {
+      if (value !== '') {
+        return `${value}<br/>`;
+      }
+      return '';
+    },
   },
-  created() {
-    const axios = require("axios");
-    axios
-      .get(`http://localhost:57260/Property/Property/${this.$route.params.id}`)
-      .then(response => (this.Property = response.data));
-
-    axios
-      .get(
-        `http://localhost:57260/property/PropertyImage/getpropertyimages/${this.$route.params.id}`
-      )
-      .then(response => (this.propertyImages = response.data));
-  }
 };
 </script>
+
+<style lang ="scss">
+.light-box {
+  &__thumbnail {
+    margin: 20px;
+    width: 200px;
+  }
+}
+img {
+  max-width: 100%;
+}
+</style>

src/components/property/propertySearchFields.vue

+<template>
+  <div>
+    <div class="col-md-6 mb-2">
+      <div class="form-group">
+        <label for="city">For:</label>
+        <select
+          class="form-control form-control-lg form-control-a"
+          id="forSelector"
+          v-model="selectedType"
+          @change="TypeSelected"
+        >
+          <option value="Sale">Sale</option>
+          <option value="Rent">Rent</option>
+        </select>
+      </div>
+      <div class="form-group" v-if="propertyType === 'Residential'">
+        <label for="city">Property Type</label>
+        <select
+          class="form-control form-control-lg form-control-a"
+          id="forSelector"
+          v-model="selectedPropertyTypeRes"
+          @change="PropertyTypeSelected"
+        >
+          <option>All</option>
+          <option
+            v-for="(propertyType, i) in propertyTypesRes"
+            :key="i"
+          >{{ propertyType.description }}</option>
+        </select>
+      </div>
+      <div v-else class="form-group">
+        <label for="city">Property Type</label>
+        <select
+          class="form-control form-control-lg form-control-a"
+          id="forSelector"
+          v-model="selectedPropertyTypeCom"
+          @change="PropertyTypeSelected"
+        >
+          <option>All</option>
+          <option
+            v-for="(propertyType, i) in propertyTypesCom"
+            :key="i"
+          >{{ propertyType.description }}</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label for="city">Provice</label>
+        <select
+          class="form-control form-control-lg form-control-a"
+          id="provinceselector"
+          @change="ProvinceSelected"
+          v-model="selectedProvince"
+        >
+          <option>All</option>
+          <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
+        </select>
+      </div>
+    </div>
+    <div class="col-md-6 mb-2">
+      <div class="form-group">
+        <label for="city">City</label>
+        <select
+          class="form-control form-control-lg form-control-a"
+          id="cityselector"
+          @change="CitySelected"
+          v-model="selectedCity"
+        >
+          <option>All</option>
+          <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
+        </select>
+      </div>
+    </div>
+    <div class="col-md-6 mb-2">
+      <div class="form-group">
+        <label for="city">Suburb</label>
+        <select
+          class="form-control form-control-lg form-control-a"
+          id="suburbselector"
+          v-model="selectedSuburb"
+          @change="SuburbSelected"
+        >
+          <option>All</option>
+          <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
+        </select>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  props: {
+    propertyType: String,
+  },
+  data() {
+    return {
+      selectedType: 'Sale',
+      selectedProvince: 'All',
+      selectedCity: 'All',
+      selectedSuburb: 'All',
+      selectedPropertyTypeRes: 'All',
+      selectedPropertyTypeCom: 'All',
+    };
+  },
+  mounted() {
+    this.getProvince();
+    this.$emit('TypeSelectedUpdated', this.selectedType);
+    this.getPropertyTypesRes();
+    this.getPropertyTypesCom();
+  },
+  computed: {
+    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
+    ...mapState('property', ['propertyTypesRes', 'propertyTypesCom']),
+  },
+  methods: {
+    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
+    ...mapActions('property', ['getPropertyTypesRes', 'getPropertyTypesCom']),
+    TypeSelected(item) {
+      this.$emit('TypeSelectedUpdated', item.target.value);
+    },
+    PropertyTypeSelected(item) {
+      this.$emit('PropertyTypeSelectedUpdated', item.target.value);
+    },
+    ProvinceSelected(item) {
+      if (item.target.value !== 'All') {
+        this.getCities(Object.assign({}, { province: this.selectedProvince }));
+      }
+      this.$emit('ProvinceSelectedUpdated', item.target.value);
+    },
+    CitySelected(item) {
+      if (item.target.value !== 'All') {
+        this.getSuburbs(
+          Object.assign(
+            {},
+            { province: this.selectedProvince, city: this.selectedCity },
+          ),
+        );
+      }
+      this.$emit('CitySelectedUpdated', item.target.value);
+    },
+    SuburbSelected(item) {
+      this.$emit('SuburbSelectedUpdated', item.target.value);
+    },
+  },
+};
+</script>

src/components/property/propertySearchPage.vue

     <br />
     <div>
       <propertyCard
-        v-if="Properties.length > 0"
+        v-if="properties.length > 0"
         name="propertyholder"
-        :properties="Properties"
+        :properties="properties"
         :key="propertysearch"
       />
-      <div v-if="Properties.length === 0">
+      <div v-if="properties.length === 0">
         <img src="../../../public/img/no-homes.gif" />
         <br />
         <br />
   </div>
 </template>
 <script>
-import propertyCard from "../property/propertyCard.vue";
-import { isNull } from "util";
+import { mkdir } from 'fs';
+import { mapState, mapActions } from 'vuex';
+import propertyCard from './propertyCard.vue';
 
 export default {
-  name: "propertysearch",
+  name: 'propertysearch',
   components: {
-    propertyCard
+    propertyCard,
   },
   data() {
     return {
-      Properties: [],
-      type: "",
-      propertyType: "",
-      propertyTypeparam: "",
-      province: "",
-      city: "",
-      suburb: ""
+      type: '',
+      propertyType: '',
+      propertyTypeparam: '',
+      province: '',
+      city: '',
+      suburb: '',
+      proptype: '',
+      keyword: '',
     };
   },
+  methods: {
+    ...mapActions('property', [
+      'searchPropertiesParams',
+      'searchPropertiesKeyword',
+    ]),
+  },
   computed: {
+    ...mapState('property', ['properties']),
     ParamsChanged() {
       this.propertyTypeparam = this.$route.params.propertyType;
       this.type = this.$route.query.type;
       this.province = this.$route.query.province;
       this.city = this.$route.query.city;
       this.suburb = this.$route.query.suburb;
+      this.proptype = this.$route.query.propType;
+      this.keyword = this.$route.query.keyword;
 
-      if (typeof this.propertyType === "undefined") {
+      if (typeof this.propertyType === 'undefined') {
         this.propertyType = this.propertyTypeparam;
       }
 
-      let search = "";
-      if (this.type !== "") {
-        search = search + "type:" + this.type;
+      if (this.type === '') {
+        this.type = 'undefined';
       }
-      if (this.propertyType !== "") {
-        search = search + "|propertyType:" + this.propertyType;
+      if (this.propertyType === '') {
+        this.propertyType = 'undefined';
       }
-      if (this.province !== "") {
-        search = search + "|province:" + this.province;
+      if (this.province === '') {
+        this.province = 'undefined';
       }
-      if (this.city !== "") {
-        search = search + "|city:" + this.city;
+      if (this.city === '') {
+        this.city = 'undefined';
       }
-      if (this.suburb !== "") {
-        search = search + "|suburb:" + this.suburb;
+      if (this.suburb === '') {
+        this.suburb = 'undefined';
+      }
+      if (this.proptype === '') {
+        this.propType = 'undefined';
+      }
+      if (typeof this.keyword === 'undefined' || this.keyword === '') {
+        this.searchPropertiesParams(
+          Object.assign(
+            {},
+            {
+              type: this.type,
+              propertyType: this.propertyType,
+              province: this.province,
+              city: this.city,
+              suburb: this.suburb,
+              propType: this.proptype,
+            },
+          ),
+        );
+      } else {
+        this.searchPropertiesKeyword(
+          Object.assign({}, { keyword: this.keyword }),
+        );
       }
 
-      console.log(search);
-
-      const axios = require("axios");
-      axios
-        .get(
-          `http://localhost:57260/Property/Property/Search/${this.type}/${this.propertyType}/${this.province}/${this.city}/${this.suburb}`
-        )
-        .then(response => (this.Properties = response.data));
-    }
+      return null;
+    },
   },
   watch: {
     ParamsChanged() {
       console.log(JSON.stringify(this.$route.query));
-    }
-  }
+    },
+  },
 };
 </script>

src/components/property/propertyUserField.vue

 <template>
   <div class="form-group row">
-    <div class="col-md-4 mb-2" v-for="currentField in fields">
+    <div class="col-md-4 mb-2" v-for="(currentField, i) in fields" :key="i">
       <label>{{ currentField.name }}</label>
       <input
         v-if="currentField.type === 'number'"
         type="number"
         name="currentField.name"
         id="currentField.id"
+        v-model="setFields[i]"
+        @change="UpdateSetFields(currentField, i)"
       />
       <input
         v-if="currentField.type === 'text'"
         type="text"
         name="currentField.name"
         id="currentField.id"
+        v-model="setFields[i]"
+        @change="UpdateSetFields(currentField, i)"
       />
       <div v-if="currentField.type === 'yesno'">
-        <select class="form-control form-control-lg form-control-a" id="currentField.id">
-          <option>Please Select</option>
+        <select
+          class="form-control form-control-lg form-control-a"
+          id="currentField.id"
+          v-model="setFields[i]"
+          @change="UpdateSetFields(currentField, i)"
+        >
           <option value="yes">Yes</option>
           <option value="no">No</option>
         </select>
 
 <script>
 export default {
+  name: 'UserDefinedField',
   props: {
     fields: [],
+    SetFieldValue: Function,
+  },
+  data() {
+    return {
+      setFields: [],
+    };
+  },
+  methods: {
+    UpdateSetFields(field, index) {
+      const item = {
+        userDefinedFieldId: field.id,
+        value: this.setFields[index],
+      };
+      this.$emit('UpdateUserDefinedFields', item);
+    },
   },
 };
 </script>

src/components/property/propertyeditPage.vue

                 </select>
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
-                <label>Property Name</label>
+                <label for="Property Name"></label>
                 <input
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   type="text"
+                  placeholder="Property Name"
                   name="propertyName"
                   id="propertyName"
                   v-model="property.propertyName"
                 />
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
-                <label>Unit</label>
+                <label for="Unit"></label>
                 <input
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
+                  placeholder="Unit"
                   type="text"
                   name="unit"
                   id="unit"
             <div class="form-group row">
               <div class="col-md-12">
                 <label for="Property Description"></label>
-                <textarea
-                  class="form-control editor"
-                  placeholder="Property Description"
-                  name="description"
-                  v-model="property.description"
-                  id="description"
-                ></textarea>
+                <TextEditor name="description" v-model="property.description" id="description" />
                 <br />
                 <p>* A listing fee of R380 including VAT is payable to list your Property on the Uni-Vate website</p>
               </div>
             </div>
             <div class="form-group row" />
             <UserField
-              v-if="ApiRunning & propertyType === 'Residential'"
-              :fields="propValuesProp[0].fields"
+              v-if="propertyType === 'Residential' & propertyOverviewFields.length > 0"
+              :fields="propertyOverviewFields[0].fields"
               :id="overviewProps"
               @UpdateUserDefinedFields="UpdateUserDefinedFields"
             ></UserField>
             <div class="form-group row" />
-            <div v-for="item in propertyValues" :key="item.id">
+            <div v-for="item in propertyFields" :key="item.id">
               <div class="row">
                 <div class="col-sm-12">
                   <div class="title-box-d">
               </div>
             </div>
             <ImageLoad :loadedImages="loadedImages" />
-            <button type="button" @click="SubmitData()" class="btn btn-a">Save</button>
-            <!-- <router-link
-              to="/property/search"
-              @click.stop.prevent="SubmitData()"
-              class="btn btn-b"
-              tag="button"
-            >Save</router-link>-->
+            <button
+              type="button"
+              @click="SubmitData()"
+              class="btn btn-b-n"
+              style="width: 85px; height:40px;"
+            >Save</button>
           </form>
         </div>
       </div>
 </template>
 
 <script>
-import UserField from "./propertyUserField.vue";
-import ImageLoad from "./propertyImage.vue";
-// https://vuejsexamples.com/a-vue-wrapper-around-the-trix-rich-text-editor/
+import { mapState, mapActions } from 'vuex';
+import TextEditor from 'vue-trix';
+import UserField from './propertyUserField.vue';
+import ImageLoad from './propertyImage.vue';
+
 export default {
-  name: "PropertyEdit",
+  name: 'PropertyEdit',
   components: {
     UserField,
-    ImageLoad
+    ImageLoad,
+    TextEditor,
   },
   data() {
     return {
-      ApiRunning: true,
-      propertyType: "Residential",
-      salesType: "Rental",
-      imageFile: "",
-      provinces: [],
-      cities: [],
-      suburbs: [],
-      propertyValues: [],
-      propValuesProp: [],
-      propertyTypes: [],
-      selectedProvince: "",
-      selectedCity: "",
+      propertyType: 'Residential',
+      salesType: 'Rental',
+      selectedProvince: '',
+      selectedCity: '',
       property: {
         propertyTypeId: 0,
-        propertyName: "",
-        unit: "",
-        addressLine1: "",
-        addressLine2: "",
-        addressLine3: "",
+        propertyName: '',
+        unit: '',
+        addressLine1: '',
+        addressLine2: '',
+        addressLine3: '',
         suburbId: 0,
         cityId: 0,
         provinceId: 0,
-        price: "",
-        per: "",
-        description: "",
+        price: '',
+        per: '',
+        description: '',
         isSale: false,
         propertyUserFields: [],
-        propertyImages: []
+        propertyImages: [],
       },
       images: [],
-      propertyFieldValues: []
+      propertyFieldValues: [],
     };
   },
   methods: {
+    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
+    ...mapActions('property', [
+      'getPropertyTypes',
+      'getPropertyOverviewFields',
+      'getPropertyFields',
+      'saveProperty',
+    ]),
     SubmitData() {
-      // let isDefault = true;
-      // this.images.forEach((imagedata) => {
-      //   this.property.propertyImages.push({
-      //     image: imagedata,
-      //     isDefault,
-      //   });
-      //   isDefault = false;
-      // });
-
-      // this.property.propertyUserFields = this.propertyFieldValues;
+      let isDefault = true;
+      this.images.forEach((imagedata) => {
+        this.property.propertyImages.push({
+          image: imagedata,
+          isDefault,
+        });
+        isDefault = false;
+      });
+      this.property.propertyUserFields = this.propertyFieldValues;
 
-      // const axios = require('axios');
-      // axios
-      //   .post('http://localhost:57260/Property/Property', this.property)
-      //   .then((response) => {})
-      //   .catch((e) => {
-      //     alert(e);
-      //   });
+      this.saveProperty(Object.assign({}, { newProperty: this.property }));
 
-      // this.$router.push("/property/search");
       this.$router.push({
-        path: "/property/search",
-        query: { type: this.salesType, propertyType: this.propertyType }
+        path: '/property/search',
+        query: { type: this.salesType, propertyType: this.propertyType },
       });
     },
     ProvinceSelected(item) {
         this.selectedProvince = this.provinces[
           item.target.options.selectedIndex - 1
         ].description;
-        const axios = require("axios");
-        axios
-          .get(
-            `http://localhost:57260/region/city/getby/${this.selectedProvince}`
-          )
-          .then(response => (this.cities = response.data));
+        this.getCities(Object.assign({}, { province: this.selectedProvince }));
       }
     },
     CitySelected(item) {
         this.selectedCity = this.cities[
           item.target.options.selectedIndex - 1
         ].description;
-        const axios = require("axios");
-        axios
-          .get(
-            `http://localhost:57260/region/Suburb/${this.selectedProvince}/${this.selectedCity}`
-          )
-          .then(response => (this.suburbs = response.data));
+        this.getSuburbs(
+          Object.assign(
+            {},
+            { province: this.selectedProvince, city: this.selectedCity },
+          ),
+        );
       }
     },
     loadedImages(values) {
     },
     UpdateUserDefinedFields(item) {
       let update = false;
-      this.propertyFieldValues.forEach(element => {
+      this.propertyFieldValues.forEach((element) => {
         if (element.userDefinedFieldId === item.userDefinedFieldId) {
           element.value = item.value;
           update = true;
       if (!update) {
         this.propertyFieldValues.push(item);
       }
-    }
+    },
   },
   mounted() {
     this.propertyType = this.$route.params.propType;
     this.salesType = this.$route.params.saleType;
 
-    const axios = require("axios");
-    axios
-      .get("http://localhost:57260/Property/PropertyFields/Property Overview")
-      .then(response => (this.propValuesProp = response.data));
-
-    axios
-      .get(
-        `http://localhost:57260/property/propertyfields/Propertytype/${this.propertyType}`
-      )
-      .then(response => (this.propertyValues = response.data));
-
-    axios
-      .get(
-        `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`
-      )
-      .then(response => (this.propertyTypes = response.data));
-
-    axios
-      .get("http://localhost:57260/region/province")
-      .then(response => (this.provinces = response.data));
+    this.getProvince();
+    this.getPropertyTypes(
+      Object.assign({}, { propertyType: this.$route.params.propType }),
+    );
+    this.getPropertyOverviewFields();
+    this.getPropertyFields(
+      Object.assign({}, { propertyType: this.$route.params.propType }),
+    );
   },
   computed: {
+    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
+    ...mapState('property', [
+      'propertyTypes',
+      'propertyOverviewFields',
+      'propertyFields',
+    ]),
     SalesTypeChanged() {
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       this.propertyType = this.$route.params.propType;
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       this.salesType = this.$route.params.saleType;
 
-      const axios = require("axios");
-      axios
-        .get(
-          `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`
-        )
-        .then(response => (this.propertyTypes = response.data));
+      this.getPropertyTypes(
+        Object.assign({}, { propertyType: this.$route.params.propType }),
+      );
+
+      this.getPropertyFields(
+        Object.assign({}, { propertyType: this.$route.params.propType }),
+      );
 
-      axios
-        .get(
-          `http://localhost:57260/property/propertyfields/Propertytype/${this.propertyType}`
-        )
-        .then(response => (this.propertyValues = response.data));
-    }
+      return this.propertyType;
+    },
   },
   watch: {
     SalesTypeChanged() {
       console.log(this.salesType);
-    }
-  }
+    },
+  },
 };
-</script>
+</script>

src/components/shared/footerSection.vue

               </div>
               <div class="w-body-a">
                 <ul class="list-unstyled">
-                  <li class="item-list-a">
+                  <li class="item-list-a" style="margin-bottom: 1em">
                     <a href="https:\\www.daelive.com">
                       <img
                         class="img-fluid"
                       />
                     </a>
                   </li>
-                  <br />
-                  <li class="item-list-a">
+
+                  <li class="item-list-a" style="margin-bottom: 1em">
                     <a href="https:\\www.gomelo.co.za">
                       <img
                         class="img-fluid"
                       />
                     </a>
                   </li>
-                  <br />
-                  <li class="item-list-a">
+
+                  <li class="item-list-a" style="margin-bottom: 1em">
                     <a href="https:\\www.rci.co.za">
                       <img
                         class="img-fluid"
                       />
                     </a>
                   </li>
-                  <br />
-                  <li class="item-list-a">
+
+                  <li class="item-list-a" style="margin-bottom: 1em">
                     <a href="https:\\www.voasa.co.za">
                       <img
                         class="img-fluid"

src/components/shared/lightBoxGallery.vue

+<template>
+  <div class="scrolling-wrapper">
+    <img
+      @click="lightboxEffect(index)"
+      v-for="(thumbnail, index) in thumbnails"
+      :key="thumbnail"
+      :src="thumbnail"
+      style="height:150px; width:150px; object-fit: cover;"
+      class="light-box__thumbnail"
+    />
+    <transition name="fade" mode="out-in">
+      <div @click.stop="bg = !bg" class="light-box__bg" v-if="bg"></div>
+    </transition>
+
+    <div v-if="bg">
+      <div class="light-box__close" @click.stop="bg = !bg"></div>
+      <p class="light-box__count" v-if="count">
+        {{currentImage + 1 }}/
+        <span>{{ thumbnails.length}}</span>
+      </p>
+      <div @click="prev" class="light-box__prev light-box__btn"></div>
+
+      <div v-if="bg" class="light-box__container">
+        <transition name="fade" mode="out-in">
+          <img
+            :key="currentImage"
+            :src="largeImages[currentImage]"
+            class="light-box__container__img"
+          />
+        </transition>
+      </div>
+
+      <div class="light-box__caption" v-if="caption">
+        <p v-if="captions[currentImage]">{{ captions[currentImage]}}</p>
+      </div>
+
+      <div @click="next" class="light-box__next light-box__btn"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      bg: false,
+      currentImage: 0,
+      count: true
+    };
+  },
+  props: {
+    thumbnails: {
+      type: Array,
+      required: true
+    },
+    largeImages: {
+      type: Array,
+      required: true
+    },
+    captions: {
+      type: Array,
+      required: true
+    },
+    thumbnailsPath: {
+      type: String,
+      required: true
+    },
+    largePath: {
+      type: String,
+      required: true
+    },
+    caption: true
+  },
+  methods: {
+    lightboxEffect(curr) {
+      this.currentImage = curr;
+      this.bg = !this.bg;
+    },
+    next() {
+      if (this.currentImage < this.largeImages.length - 1) {
+        // eslint-disable-next-line no-plusplus
+        this.currentImage++;
+      } else {
+        this.currentImage = 0;
+      }
+    },
+    prev() {
+      if (this.currentImage > 0) {
+        // eslint-disable-next-line no-plusplus
+        this.currentImage--;
+      } else {
+        this.currentImage = this.largeImages.length - 1;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.light-box {
+  &__bg {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.89);
+    z-index: 1000;
+  }
+
+  &__thumbnail {
+    cursor: pointer;
+  }
+
+  &__close {
+    padding: 10px;
+    position: absolute;
+    right: 5px;
+    top: 10px;
+    background-image: url(../../../public/img/ligthbox/close.svg);
+    background-size: contain;
+    background-position: center;
+  }
+  &__container {
+    position: absolute;
+    z-index: 2000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 700px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    min-height: 800px;
+    img {
+      align-self: center;
+    }
+  }
+  &__btn {
+    background-size: contain;
+    background-position: center;
+    align-self: center;
+    padding: 15px;
+  }
+
+  &__close,
+  &__btn {
+    cursor: pointer;
+  }
+
+  &__close,
+  &__btn,
+  &__caption,
+  &__count {
+    position: absolute;
+    z-index: 3000;
+  }
+
+  &__next {
+    background-image: url(../../../public/img/ligthbox/next.svg);
+    right: 20px;
+  }
+  &__prev {
+    background-image: url(../../../public/img/ligthbox/prev.svg);
+    left: 20px;
+  }
+  &__next,
+  &__prev {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &__caption {
+    bottom: 0;
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    color: #fff;
+    font-size: 20px;
+    justify-content: center;
+  }
+
+  &__count {
+    left: 20px;
+    font-size: 16px;
+    color: #fff;
+    top: 14px;
+    padding: 0;
+    margin: 0;
+  }
+}
+</style>

src/components/shared/navBar.vue

               <a class="dropdown-item cursor-pointer" @click="routerGoTo('/status/list')">Status</a>
               <a
                 class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/status/list')"
+                @click="routerGoTo('/status/timeshareAdmin')"
               >Timeshare Week Admin</a>
               <a
                 class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/status/list')"
-              >Changes Logs</a>
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/status/list')"
-              >User Management & Access</a>
+                @click="routerGoTo('/status/tenderWeekAdmin')"
+              >Tender Week Management</a>
               <a
                 class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/status/list')"
-              >Tender Week Management</a>
+                @click="routerGoTo('/unitConfiguration/list')"
+              >Unit Configuration</a>
               <a
                 class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/status/list')"
-              >Timeshare Week Approval</a>
+                @click="routerGoTo('/status/userManagementPage')"
+              >User Management & Access</a>
               <a
                 class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/unitConfiguration/list')"
-              >Unit Configuration</a>
+                @click="routerGoTo('/status/changeLogPage')"
+              >Changes Logs</a>
             </div>
           </li>
           <li class="nav-item">

src/components/shared/searchTab.vue

       <h3 class="title-d">Search</h3>
     </div>
     <span class="close-box-collapse right-boxed ion-ios-close"></span>
-    <div class="box-collapse-wrap form">
+    <div class="box-collapse-wrap">
       <form class="form-a">
         <div class="row">
           <div class="col-md-12 mb-2">
                 type="text"
                 class="form-control form-control-lg form-control-a"
                 placeholder="Keyword"
+                v-model="keyword"
               />
             </div>
           </div>
-          <div class="col-md-4 mb-2">
-            <div class="form-group">
-              <input class="form-check-input" type="radio" name="paid" value="Yes" />
-              <label class="form-check-label" for="paid">Timeshare</label>
-            </div>
-          </div>
-          <div class="col-md-4 mb-2">
-            <div class="form-group">
-              <input class="form-check-input" type="radio" name="paid" value="Yes" />
-              <label class="form-check-label" for="paid">Residential</label>
-            </div>
-          </div>
-          <div class="col-md-4 mb-2">
-            <div class="form-group">
-              <input class="form-check-input" type="radio" name="paid" value="Yes" />
-              <label class="form-check-label" for="paid">Commercial</label>
-            </div>
-          </div>
-          <div class="col-md-6 mb-2">
-            <div class="form-group">
-              <input class="form-check-input" type="radio" name="paid" value="Yes" />
-              <label class="form-check-label" for="paid">Sale</label>
-            </div>
-          </div>
-          <div class="col-md-6 mb-2">
-            <div class="form-group">
-              <input class="form-check-input" type="radio" name="paid" value="Yes" />
-              <label class="form-check-label" for="paid">Rent</label>
-            </div>
-          </div>
-          <div class="col-md-6 mb-2">
-            <div class="form-group">
-              <label for="city">Provice</label>
-              <select
-                class="form-control form-control-lg form-control-a"
-                id="provinceselector"
-                @change="ProvinceSelected"
-                v-model="selectedProvince"
-              >
-                <option>All</option>
-                <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
-              </select>
-            </div>
-          </div>
-          <div class="col-md-6 mb-2">
-            <div class="form-group">
-              <label for="city">City</label>
-              <select
-                class="form-control form-control-lg form-control-a"
-                id="cityselector"
-                @change="CitySelected"
-                v-model="selectedCity"
+          <div class="col-md-12">
+            <ul class="nav nav-pills-a nav-pills mb-3 section-t3" id="pills-tab" role="tablist">
+              <li class="nav-item">
+                <a
+                  class="nav-link active"
+                  id="pills-video-tab"
+                  data-toggle="pill"
+                  href="#pills-video"
+                  role="tab"
+                  aria-controls="pills-video"
+                  aria-selected="true"
+                  v-on:click="updateType('Timeshare')"
+                >Timeshare</a>
+              </li>
+              <li class="nav-item">
+                <a
+                  class="nav-link"
+                  id="pills-plans-tab"
+                  data-toggle="pill"
+                  href="#pills-plans"
+                  role="tab"
+                  aria-controls="pills-plans"
+                  aria-selected="false"
+                  v-on:click="updateType('Residential')"
+                >Residential</a>
+              </li>
+              <li class="nav-item">
+                <a
+                  class="nav-link"
+                  id="pills-map-tab"
+                  data-toggle="pill"
+                  href="#pills-map"
+                  role="tab"
+                  aria-controls="pills-map"
+                  aria-selected="false"
+                  v-on:click="updateType('Commercial')"
+                >Commercial</a>
+              </li>
+            </ul>
+            <div class="tab-content" id="pills-tabContent">
+              <div
+                class="tab-pane fade show active"
+                id="pills-video"
+                role="tabpanel"
+                aria-labelledby="pills-video-tab"
+              >timeshare search</div>
+              <div
+                class="tab-pane fade"
+                id="pills-plans"
+                role="tabpanel"
+                aria-labelledby="pills-plans-tab"
               >
-                <option>All</option>
-                <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
-              </select>
-            </div>
-          </div>
-          <div class="col-md-6 mb-2">
-            <div class="form-group">
-              <label for="city">Suburb</label>
-              <select
-                class="form-control form-control-lg form-control-a"
-                id="suburbselector"
-                v-model="selectedSuburb"
+                <propertySearch
+                  propertyType="Residential"
+                  @TypeSelectedUpdated="TypeSelectedUpdated"
+                  @ProvinceSelectedUpdated="ProvinceSelectedUpdated"
+                  @CitySelectedUpdated="CitySelectedUpdated"
+                  @SuburbSelectedUpdated="SuburbSelectedUpdated"
+                  @PropertyTypeSelectedUpdated="PropertyTypeSelectedUpdated"
+                />
+              </div>
+              <div
+                class="tab-pane fade"
+                id="pills-map"
+                role="tabpanel"
+                aria-labelledby="pills-map-tab"
               >
-                <option>All</option>
-                <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
-              </select>
+                <propertySearch
+                  propertyType="Commercial"
+                  @TypeSelectedUpdated="TypeSelectedUpdated"
+                  @ProvinceSelectedUpdated="ProvinceSelectedUpdated"
+                  @CitySelectedUpdated="CitySelectedUpdated"
+                  @SuburbSelectedUpdated="SuburbSelectedUpdated"
+                  @PropertyTypeSelectedUpdated="PropertyTypeSelectedUpdated"
+                />
+              </div>
             </div>
           </div>
-
           <div class="col-md-12">
-            <!-- <button type="submit" class="btn btn-b">Search</button> -->
-            <router-link to="/property/search" class="btn btn-b" tag="button">Search</router-link>
+            <button type="submit" class="btn btn-b" @click="Search">Search</button>
           </div>
         </div>
       </form>
     </div>
   </div>
 </template>
+
 <script>
-import { mapState, mapActions } from 'vuex';
+import propertySearch from '../property/propertySearchFields.vue';
 
 export default {
+  components: {
+    propertySearch,
+  },
   data() {
     return {
+      selectedPropertyType: 'timeshare',
+      selectedType: '',
       selectedProvince: '',
       selectedCity: '',
       selectedSuburb: '',
+      selectedPropType: '',
+      keyword: '',
     };
   },
-  mounted() {
-    this.getProvince();
-  },
-  computed: {
-    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
-  },
   methods: {
-    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
-    ProvinceSelected(item) {
-      if (item.target.value !== 'All') {
-        this.getCities(Object.assign({}, this.selectedProvince));
-      }
+    updateType(item) {
+      this.selectedPropertyType = item;
+    },
+    TypeSelectedUpdated(item) {
+      this.selectedType = item;
+    },
+    PropertyTypeSelectedUpdated(item) {
+      this.selectedPropType = item;
+    },
+    ProvinceSelectedUpdated(item) {
+      this.selectedProvince = item;
+    },
+    CitySelectedUpdated(item) {
+      this.selectedCity = item;
+    },
+    SuburbSelectedUpdated(item) {
+      this.selectedSuburb = item;
     },
-    CitySelected(item) {
-      if (item.target.value !== 'All') {
-        this.getSuburbs(
-          Object.assign(
-            {},
-            { province: this.selectedProvince, city: this.city },
-          ),
-        );
-      }
+    Search() {
+      // need to see how to differenciate between properties and timeshare.
+      this.$router.push({
+        path: '/property/search',
+        query: {
+          type: this.selectedType,
+          propertyType: this.selectedPropertyType,
+          province: this.selectedProvince,
+          city: this.selectedCity,
+          suburb: this.selectedSuburb,
+          propType: this.propertyType,
+          keyword: this.keyword,
+        },
+      });
     },
   },
 };

src/components/timeshare/resort/unitPage.vue

 <template>
-  <div class="container">
-    <div class="row mb-4">
-      <div class="col-md-12">
-        <h1 class="my-4">{{resort.prName}}</h1>
-      </div>
-      <div class="col-md-6">
-        <p>{{description}}</p>
-      </div>
-      <div class="col-md-6">
-        <form
-          id="mainForm"
-          method="POST"
-          action="/interested-timeshare/"
-          accept-charset="UTF-8"
-          enctype="multipart/form-data"
-        >
-          <div class="form-row">
-            <div class="col-md-6">
-              <label for="resortName">Unit</label>
-              <input
-                class="form-control"
-                type="text"
-                id="resort"
-                name="resortName"
-                :value="week.unit"
-                disabled
-              />
-            </div>
-            <div class="col-md-6">
-              <label for="resortWeek">Week</label>
-              <input
-                class="form-control"
-                type="text"
-                id="week"
-                name="resortWeek"
-                :value="week.week"
-                disabled
-              />
+  <section>
+    <section class="intro-single">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <div class="title-single-box">
+              <h1 class="title-single" style="text-align:left;">{{resort.prName}}</h1>
             </div>
           </div>
-          <div class="form-row">
-            <div class="col-md-6">
-              <label for="resortModule">Module</label>
-              <input
-                class="form-control"
-                type="text"
-                id="module"
-                name="resortModule"
-                :value="week.module"
-                disabled
-              />
+        </div>
+      </div>
+    </section>
+    <div class="container">
+      <div class="row mb-4">
+        <div class="col-md-6">
+          <p>{{description}}</p>
+        </div>
+        <div class="col-md-6">
+          <form
+            id="mainForm"
+            method="POST"
+            action="/interested-timeshare/"
+            accept-charset="UTF-8"
+            enctype="multipart/form-data"
+          >
+            <div class="form-row">
+              <div class="col-md-6">
+                <label for="resortunit">Unit</label>
+                <input
+                  class="form-control"
+                  type="text"
+                  id="resort"
+                  name="resortunit"
+                  :value="week.unit"
+                  disabled
+                />
+              </div>
+              <div class="col-md-6">
+                <label for="resortWeek">Week</label>
+                <input
+                  class="form-control"
+                  type="text"
+                  id="week"
+                  name="resortWeek"
+                  :value="week.week"
+                  disabled
+                />
+              </div>
             </div>
-            <div class="col-md-6">
-              <label for="price">Price</label>
-              <input
-                class="form-control"
-                type="text"
-                name="price"
-                id="price"
-                :value="'R ' + week.price"
-                disabled
-              />
+            <br />
+            <div class="form-row">
+              <div class="col-md-6">
+                <label for="resortModule">Module</label>
+                <input
+                  class="form-control"
+                  type="text"
+                  id="module"
+                  name="resortModule"
+                  :value="week.module"
+                  disabled
+                />
+              </div>
+              <div class="col-md-6">
+                <label for="price">Price</label>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="price"
+                  id="price"
+                  :value="'R ' + week.price"
+                  disabled
+                />
+              </div>
             </div>
-          </div>
-          <div class="form-row">
-            <div class="col-md-6">
-              <label for="resortModule">Current Year Levy</label>
-              <input
-                class="form-control"
-                type="text"
-                id="levy"
-                name="levy"
-                :value="'R ' + week.currentLevy"
-                disabled
-              />
+            <br />
+            <div class="form-row">
+              <div class="col-md-6">
+                <label for="resortModule">Current Year Levy</label>
+                <input
+                  class="form-control"
+                  type="text"
+                  id="levy"
+                  name="levy"
+                  :value="'R ' + week.currentLevy"
+                  disabled
+                />
+              </div>
             </div>
-          </div>
-          <div class="form-row">
-            <div class="col-md-12">
-              <input class="form-control" type="text" name="name" placeholder="Name" />
+            <br />
+            <div class="form-row">
+              <div class="col-md-12">
+                <input class="form-control" type="text" name="name" placeholder="Name" />
+              </div>
             </div>
-          </div>
-          <div class="form-row">
-            <div class="col-md-12">
-              <input class="form-control" type="text" name="mobile" placeholder="Contact Number" />
+            <br />
+            <div class="form-row">
+              <div class="col-md-12">
+                <input
+                  class="form-control"
+                  type="number"
+                  name="mobile"
+                  placeholder="Contact Number"
+                />
+              </div>
             </div>
-          </div>
-          <div class="form-row">
-            <div class="col-md-12">
-              <input class="form-control" type="email" name="email" placeholder="Email" />
+            <br />
+            <div class="form-row">
+              <div class="col-md-12">
+                <input class="form-control" type="email" name="email" placeholder="Email" />
+              </div>
             </div>
-          </div>
+            <br />
 
-          <button class="btn btn-blue even-width mr-auto" type="submit">ENQUIRE NOW</button>
+            <button class="btn btn-b-c even-width mr-auto" type="submit">Enquire Now</button>
 
-          <a
-            class="btn btn-blue even-width mr-auto"
-            href="/share-transfer-initiation-for-purchaser/"
-          >MAKE AN OFFER</a>
-          <a
-            class="btn btn-blue even-width mr-auto"
-            href="#"
-            data-toggle="modal"
-            data-target="#loginOrRegister"
-          >MAKE AN OFFER</a>
+            <a
+              class="btn btn-b-n even-width mr-auto"
+              href="/share-transfer-initiation-for-purchaser/"
+            >Make an Offer</a>
 
-          <a class="btn btn-blue even-width mr-auto" href="javascript:history.back()">BACK</a>
-        </form>
-      </div>
-    </div>
-    <div class="row mb-4">
-      <div class="col-md-4">
-        <img class="img-fluid" :src="image1" alt="Resort Image" />
-      </div>
-      <div class="col-md-4">
-        <img class="img-fluid" :src="image2" alt="Resort Image" />
+            <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
+          </form>
+        </div>
       </div>
-      <div class="col-md-4">
-        <img class="img-fluid" :src="image3" alt="Resort Image" />
+      <div class="row mb-4">
+        <div class="col-md-4">
+          <img class="img-fluid" :src="image1" alt="Resort Image" />
+        </div>
+        <div class="col-md-4">
+          <img class="img-fluid" :src="image2" alt="Resort Image" />
+        </div>
+        <div class="col-md-4">
+          <img class="img-fluid" :src="image3" alt="Resort Image" />
+        </div>
       </div>
     </div>
-  </div>
+  </section>
 </template>
 
 <script>
   },
 };
 </script>
+<style scoped>
+.btn.btn-b-c {
+  background-color: #ffffff;
+  color: #60cbeb;
+  border-radius: 0;
+}
+
+.btn.btn-b-c:hover {
+  background-color: #089bf0;
+  color: #ffffff;
+}
+</style>

src/components/user/loginPage.vue

 <template>
-  <!-- eslint-disable max-len -->
-  <div class="login-page">
-    <form id="signIn">
-      <div class="form">
-        <div>
-          <h4>Login</h4>
-        </div>
-        <div class="row">
-          <div>
-            <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
-          </div>
-          <div class="col-md-11">
-            <input
-              class="form-control"
-              v-model="username"
-              placeholder="Username"
-              type="text"
-              name="username"
-              value
-            />
-          </div>
+  <div class="container">
+    <!-- eslint-disable max-len -->
+    <div class="login-page">
+      <form id="signIn">
+        <div class="form">
           <div>
-            <eva-icon v-if="!showPassword" name="eye-off" fill="#60CBEB" @click="togglePassword()"></eva-icon>
-            <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
+            <h4>Login</h4>
           </div>
-          <div class="col-md-11">
-            <input
-              class="form-control"
-              :type="isPasswordShown"
-              v-model="password"
-              id="password"
-              placeholder="Password"
-              name="password"
-              value
-            />
+          <div class="row">
+            <div>
+              <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
+            </div>
+            <div class="col-md-11">
+              <input
+                class="form-control"
+                v-model="username"
+                placeholder="Username"
+                type="text"
+                name="username"
+                value
+              />
+            </div>
+            <div>
+              <eva-icon
+                v-if="!showPassword"
+                name="eye-off"
+                fill="#60CBEB"
+                @click="togglePassword()"
+              ></eva-icon>
+              <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
+            </div>
+            <div class="col-md-11">
+              <input
+                class="form-control"
+                :type="isPasswordShown"
+                v-model="password"
+                id="password"
+                placeholder="Password"
+                name="password"
+                value
+              />
+            </div>
           </div>
+          <div class="form-group row"></div>
+          <button @click="Login" class="btn btn-b-n" type="submit">Sign In</button>
+          <p v-if="user !== null">{{ user }}</p>
         </div>
-        <div class="form-group row"></div>
-        <button @click="Login" class="btn btn-b-n" type="submit">Sign In</button>
-        <p v-if="user !== null">{{ user }}</p>
-      </div>
-    </form>
+      </form>
 
-    <form id="forgot">
-      <div class="form">
-        <h5>Trouble signing in?</h5>
-        <div>
-          <div class="row">
-            <eva-icon name="email" fill="#60CBEB"></eva-icon>
+      <form id="forgot">
+        <div class="form">
+          <h5>Trouble signing in?</h5>
+          <div>
+            <div class="row">
+              <eva-icon name="email" fill="#60CBEB"></eva-icon>
 
-            <div class="col-md-11">
-              <input class="form-control" placeholder="Your Email" type="text" name="email" value />
+              <div class="col-md-11">
+                <input class="form-control" placeholder="Your Email" type="text" name="email" value />
+              </div>
             </div>
           </div>
+          <div class="form-group row"></div>
+          <div class="offset-md-3 col-md-5">
+            <button class="btn btn-b-n" type="submit">Get Help</button>
+          </div>
         </div>
-        <div class="form-group row"></div>
-        <div class="offset-md-3 col-md-5">
-          <button class="btn btn-b-n" type="submit">Get Help</button>
-        </div>
-      </div>
-    </form>
+      </form>
+    </div>
   </div>
 </template>
 

src/router/index.js

 import AboutTimeshare from '../components/about/aboutTimeshare.vue';
 
 import Status from '../components/admin/status/statusPage.vue';
+import timeshareAdminPage from '../components/admin/status/timeshareAdminPage.vue';
+import tenderWeekAdminPage from '../components/admin/status/tenderWeekAdminPage.vue';
+import userManagementPage from '../components/admin/status/userManagementPage.vue';
+import changeLogPage from '../components/admin/status/changeLogPage.vue';
 import UnitConfiguration from '../components/admin/unitConfiguration/unitConfigurationPage.vue';
 
 import ResortPage from '../components/timeshare/resort/resortPage.vue';
 
 import ContactUs from '../components/misc/contactUs.vue';
 
+
 Vue.use(Router);
 
 export default new Router({
     name: 'StatusList',
     component: Status,
   },
+  {
+    path: '/status/timeshareAdmin',
+    name: 'TimeshareAdmin',
+    component: timeshareAdminPage,
+  },
+  {
+    path: '/status/tenderWeekAdmin',
+    name: 'TenderWeekAdmin',
+    component: tenderWeekAdminPage,
+  },
+  {
+    path: '/status/userManagementPage',
+    name: 'userManagementPage',
+    component: userManagementPage,
+  },
+  {
+    path: '/status/changeLogPage',
+    name: 'changeLogPage',
+    component: changeLogPage,
+  },
   {
     path: '/unitConfiguration/list',
     name: 'UnitConfiguration',

src/store/index.js

 import TimeshareBuyModule from './modules/timeshare/buyPage';
 import SearchTabModule from './modules/searchTab';
 import ResortModule from './modules/timeshare/resort';
+import PropertyModule from './modules/property/property';
 import WeekModule from './modules/timeshare/week';
 
 Vue.use(Vuex);
     timeshareBuy: TimeshareBuyModule,
     searchTab: SearchTabModule,
     resort: ResortModule,
+    property: PropertyModule,
     week: WeekModule,
   },
 });

src/store/modules/property/property.js

+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    property: null,
+    propertyImages: [],
+    propertyTypes: [],
+    propertyTypesRes: [],
+    propertyTypesCom: [],
+    propertyOverviewFields: [],
+    propertyFields: [],
+    properties: [],
+  },
+  mutations: {
+    setProperty(state, property) {
+      state.property = property;
+    },
+    setPropertyImages(state, images) {
+      state.propertyImages = images;
+    },
+    setPropertyTypes(state, types) {
+      state.propertyTypes = types;
+    },
+    setPropertyTypesRes(state, types) {
+      state.propertyTypesRes = types;
+    },
+    setPropertyTypesCom(state, types) {
+      state.propertyTypesCom = types;
+    },
+    setPropertyOverviewFields(state, fields) {
+      state.propertyOverviewFields = fields;
+    },
+    setPropertyFields(state, fields) {
+      state.propertyFields = fields;
+    },
+    updateCurrentProperty(state, property) {
+      state.property = property;
+    },
+    updateSearch(state, propertySearch) {
+      state.properties = propertySearch;
+    },
+  },
+  getters: {},
+  actions: {
+    getProperty({ commit }, item) {
+      axios
+        .get(`http://localhost:57260/Property/Property/${item.id}`)
+        .then(result => commit('setProperty', result.data))
+        .catch(console.error);
+    },
+    getPropertyImages({ commit }, item) {
+      axios
+        .get(`http://localhost:57260/property/PropertyImage/getpropertyimages/${item.id}`)
+        .then(result => commit('setPropertyImages', result.data))
+        .catch(console.error);
+    },
+    getPropertyTypes({ commit }, item) {
+      axios
+        .get(`http://localhost:57260/Property/PropertyType/type/${item.propertyType}`)
+        .then(result => commit('setPropertyTypes', result.data))
+        .catch(console.error);
+    },
+    getPropertyTypesRes({ commit }) {
+      axios
+        .get('http://localhost:57260/Property/PropertyType/type/Residential')
+        .then(result => commit('setPropertyTypesRes', result.data))
+        .catch(console.error);
+    },
+    getPropertyTypesCom({ commit }) {
+      axios
+        .get('http://localhost:57260/Property/PropertyType/type/Commercial')
+        .then(result => commit('setPropertyTypesCom', result.data))
+        .catch(console.error);
+    },
+    getPropertyOverviewFields({ commit }) {
+      axios
+        .get('http://localhost:57260/Property/PropertyFields/Property Overview')
+        .then(response => commit('setPropertyOverviewFields', response.data));
+    },
+    getPropertyFields({ commit }, item) {
+      axios
+        .get(`http://localhost:57260/property/propertyfields/Propertytype/${item.propertyType}`)
+        .then(response => commit('setPropertyFields', response.data));
+    },
+    saveProperty({ commit }, item) {
+      axios
+        .post('http://localhost:57260/Property/Property', item.newProperty)
+        .then(result => commit('updateCurrentProperty', result.data))
+        .catch(console.error);
+    },
+    searchPropertiesParams({ commit }, item) {
+      axios
+        .get(
+          `http://localhost:57260/Property/Property/Search/${item.type}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.propType}`,
+        )
+        .then(response => commit('updateSearch', response.data))
+        .catch(console.error);
+    },
+    searchPropertiesKeyword({ commit }, item) {
+      axios
+        .get(`http://localhost:57260/Property/Property/Search/Keyword/${item.keyword}`)
+        .then(response => commit('updateSearch', response.data))
+        .catch(console.error);
+    },
+  },
+};

src/store/modules/searchTab.js

   },
   getters: {},
   actions: {
-    getProvince({
-      commit,
-    }) {
-      axios.get('http://localhost:57260/region/province')
+    getProvince({ commit }) {
+      axios
+        .get('http://localhost:57260/region/province')
         .then(result => commit('setProvince', result.data))
         .catch(console.error);
     },
-    getCities({
-      commit,
-    }, province) {
+    getCities({ commit }, item) {
       axios
-        .get(`http://localhost:57260/region/city/getby/${province}`)
+        .get(`http://localhost:57260/region/city/getby/${item.province}`)
         .then(result => commit('setCities', result.data));
     },
-    getSuburbs({
-      commit,
-    }, item) {
+    getSuburbs({ commit }, item) {
       axios
-        .get(
-          `http://localhost:57260/region/Suburb/${item.province}/${item.city}`,
-        )
+        .get(`http://localhost:57260/region/Suburb/${item.province}/${item.city}`)
         .then(result => commit('setSuburbs', result.data));
     },
   },