Property Management Pages

src/components/property/commercial/enquireNow/contentSection.vue

@@ -2,83 +2,114 @@
   <div class="container pt-5">
         <div class="row mb-8">
           <div class="col-md-6">
-            <form action="mailto:info@univateproperties.co.za" method="post" enctype="text/plain">
-              <div class="form-group row">
-                <div class="col-md-6">
-                  <div class="input-group-prepend">
-                    <span class="input-group-text">
-                      <eva-icon name="person" fill="#60CBEB"></eva-icon>
-                    </span>
-                    <label for="yourname"></label>
-                    <input
-                      id="yourname"
-                      name="yourname"
-                      placeholder="Your Name"
-                      type="text"
-                      required="required"
-                      class="form-control"
-                    />
-                  </div>
-                </div>
-                <div class="col-md-6">
-                  <div class="input-group-prepend">
-                    <span class="input-group-text">
-                      <eva-icon name="email" fill="#60CBEB"></eva-icon>
-                    </span>
-                    <label for="youremail"></label>
-                    <input
-                      id="youremail"
-                      name="youremail"
-                      placeholder="Your Email"
-                      type="text"
-                      required="required"
-                      class="form-control"
-                    />
-                  </div>
-                </div>
-              </div>
-              <div class="form-group row">
-                <div class="col-md-12">
-                  <div class="input-group-prepend">
-                    <span class="input-group-text">
-                      <eva-icon name="bookmark-outline" fill="#60CBEB"></eva-icon>
-                    </span>
-                    <label for="subject"></label>
-                    <input
-                      id="subject"
-                      name="subject"
-                      placeholder="Subject"
-                      type="text"
-                      class="form-control"
-                      required="required"
-                    />
-                  </div>
-                </div>
-              </div>
-              <div class="form-group row">
-                <div class="col-md-12">
-                  <div class="input-group-prepend">
-                    <span class="input-group-text">
-                      <eva-icon name="message-square-outline" fill="#60CBEB"></eva-icon>
-                    </span>
-                    <label for="message"></label>
-                    <textarea
-                      id="message"
-                      name="message"
-                      placeholder="Message"
-                      cols="40"
-                      rows="8"
-                      class="form-control"
-                      required="required"
-                    ></textarea>
-                  </div>
-                </div>
+            <h3>Mooikloof Office Park</h3>
+            <p>
+              The cream of the crop, no costs were spared on the finishing touches of this beautiful office.  This 160m2 office is ideally situated in Pretoria East in the hub of business expansion for Pretoria.  Two superb, air-conditioned ground floor units divided only by glass and completed with two small recording studios.  The Space is currently used for corporate boardroom and training centre functions and can accommodate up to 25 delegates.  Stunning finishes y interior designer complete the unit with style and class.  The perfect address and office for the established professional for the training centre of your dreams! 
+            </p>
+            <p><strong>View by Appointment only!</strong></p>
+            <br/>
+              <p></p>
+              To arrange a viewing contact Mynie:
+              <div class="col-md-4">
+                <a href="mailto:info@univateproperties.co.za">info@univateproperties.co.za</a
+                  ><br />
+                  <a href="tel:0124921238">+27 (0) 12 492 1238</a>
               </div>
+          </div>
+          <div class="col-md-6">
+            <form >
               <div class="form-group row">
-                <div class="col-md-1">
-                  <button name="submit" type="submit" class="btn btn-b-n">Send Message</button>
-                </div>
+        <div class="form-group col-md-6">
+          <input
+            type="text"
+            name="name"
+            class="form-control"
+            id="Unit"
+            placeholder="Unit"
+            data-rule="minlen:4"
+            v-model="Unit"
+          />
+          <div class="validation"></div>
+        </div>
+                <div class="form-group col-md-6">
+          <input
+            type="text"
+            name="name"
+            class="form-control"
+            id="Price"
+            placeholder="Price"
+            data-rule="minlen:4"
+            v-model="Price"
+          />
+          <div class="validation"></div>
+        </div>
+                <div class="form-group col-md-6">
+          <input
+            type="text"
+            name="name"
+            class="form-control"
+            id="Size"
+            placeholder="Size"
+            data-rule="minlen:4"
+            v-model="Size"
+          />
+          <div class="validation"></div>
+        </div>
+                <div class="form-group col-md-6">
+          <input
+            type="text"
+            name="name"
+            class="form-control"
+            id="Suburb"
+            placeholder="Suburb"
+            data-rule="minlen:4"
+            v-model="Suburb"
+          />
+          <div class="validation"></div>
+        </div>
+                <div class="form-group col-md-12">
+          <input
+            type="text"
+            name="name"
+            class="form-control"
+            id="Name"
+            placeholder="Name"
+            data-rule="minlen:4"
+            v-model="Name"
+          />
+          <div class="validation"></div>
+        </div>
+                <div class="form-group col-md-12">
+          <input
+            type="text"
+            name="name"
+            class="form-control"
+            id="ContactNumber"
+            placeholder="ContactNumber"
+            data-rule="minlen:4"
+            v-model="ContactNumber"
+          />
+          <div class="validation"></div>
+        </div>
+                <div class="form-group col-md-12">
+          <input
+            type="text"
+            name="name"
+            class="form-control"
+            id="Email"
+            placeholder="Email"
+            data-rule="minlen:4"
+            v-model="Email"
+          />
+          <div class="validation"></div>
+        </div>
               </div>
+              <div class="text-center">
+        <button class="btn-solid-blue" @click="sendMail()">ENQUIRE NOW</button>
+      </div>
+      <div v-if="boolSent">
+        <alert :text="alertMsg" :type="'SUCCESS'" />
+      </div>
             </form>
           </div>
         </div>
@@ -86,7 +117,52 @@
 </template>
 
 <script>
-export default {};
+import axios from 'axios';
+import alert from '../../../shared/alert';
+
+export default {
+  components: {
+    alert
+  },
+  data() {
+    return {
+      alertMsg: "Sent! You can expect a reply soon!",
+      name: null,
+      email: null,
+      phone: null,
+      property: null,
+      message: null,
+      boolSent: false
+    };
+  },
+  mounted() {
+    this.boolSent = false;
+  },
+  methods: {
+    async sendMail() {
+      var mailObj = {
+        toAddress: "lenes@provision-sa.com",
+        fromAddress: "jlouw365@gmail.com",
+        name: this.name,
+        email: this.email,
+        phone: this.phone,
+        property: this.property,
+        message: this.message
+      };
+
+      const response = await axios.post("/api/mail/1", mailObj);
+
+      if (response.status === 200) {
+        this.boolSent = true;
+      } else {
+        console.log("Error");
+      }
+    },
+    countDownChanged(dismissCountDown) {
+      this.dismissCountDown = dismissCountDown;
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped></style>

src/components/propertyManagement/ourServicesSection.vue

@@ -1,37 +0,0 @@
-<template>
-  <section id="services">
-    <div class="container" style="margin-top:-15px">
-      <div class="row">
-        <div align="left" class="col-lg-4">
-          <p>Our Services:</p>
-          <a class="btn-white-border" style="min-width:270px; cursor: context-menu;"
-            >Rent / Levy Collection</a
-          >
-          <a class="btn-white-border" style="min-width:270px; cursor: context-menu;"
-            >Occupancy Management</a
-          >
-          <a class="btn-white-border" style="min-width:270px; cursor: context-menu;">Maintenance</a>
-          <a class="btn-white-border" style="min-width:270px; cursor: context-menu;"
-            >Administration</a
-          >
-        </div>
-        <div align="left" class="col-lg-8">
-          <p>Information about what is Property Management and why UVP is the preferred option.</p>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
-            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-          </p>
-          <h4>Contact us for a quote</h4>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script>
-export default {};
-</script>
-
-<style lang="scss" scoped></style>

src/components/propertyManagement/carouselSection.vue → src/components/propertyManagement/sectionalTitle/carouselSection.vue

@@ -6,8 +6,9 @@
           <div class="intro-content box">
             <h2>Let us manage your property</h2>
             <p>
-              Uni-Vate Properties found that there was a desperate need for a reputable source for
-              buyers and sellers to turn to with their timeshare needs in South Africa.
+              At Uni-Vate we appreciate the significant and positive relationship between effective Property Management and property prices.  We understand that effective management not only relies on administrative processes being intact, but also on a clear plan and good communication with our clients based on respect, trust understanding, openness and accountability.  We have access to a comprehensive set of human and other resources to ensure that your property is proactively managed to protect your investment and to ensure the contentedness of occupants.
+              We offer comprehensive property management services, whether it being Sectional Title Management, HOA Management or Rental Property Portfolio Management.  
+
             </p>
             <a href="#" class="btn-solid-blue">LIST YOUR PROPERTY WITH UNI-VATE PROPERTIES</a>
             <router-link v-if="!isLoggedIn" to="/user/login" class="btn-white-border"
@@ -44,7 +45,7 @@
 <script>
 /* eslint-disable */
 import { mapState, mapActions } from "vuex";
-import Log from "../../assets/Log";
+import Log from "../../../assets/Log";
 import carousel from "vue-owl-carousel";
 export default {
   components: {

src/components/propertyManagement/sectionalTitle/ourServicesSection.vue

@@ -0,0 +1,113 @@
+<template>
+  <section id="services">
+    <div class="container" style="margin-top:-15px">
+      <div class="row">
+        <div class="col-lg-12">
+          <p>Whether residential, commercial, hybrid schemes or home owners associations – we offer a complete property management solution tailored for the needs of the individual community scheme.</p>
+          <p>We are proud members of the National Association of Managing Agents and registered Estate Agents and Debt Collectors offering the following valuable functions to the residents and corporate bodies alike: </p>
+        </div>
+        <p></p>
+        <div class="row">
+          <div class="col-md-6">
+            
+          </div>
+          <div class="col-md-6">
+            <h4>Contact us for a quote</h4>
+          </div>
+        </div>
+        <div align="left" class="col-lg-12">
+          <p>Our Services:</p>
+          <ul class="nav nav-tabs" id="myTab" role="tablist">
+            <li class="nav-item">
+              <a class="nav-link-active" id="takeOn-tab" data-toggle="tab" href="#takeOn" role="tab" aria-controls="takeOn" aria-selected="true">Take-on Audit</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link-active" id="levy-tab" data-toggle="tab" href="#levy" role="tab" aria-controls="levy" aria-selected="false">Levy, Billing and Collections</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link-active" id="financial-tab" data-toggle="tab" href="#financial" role="tab" aria-controls="financial" aria-selected="false">Financial Management and Accounting</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link-active" id="advisory-tab" data-toggle="tab" href="#advisory" role="tab" aria-controls="advisory" aria-selected="false">Advisory and Secretarial functions</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link-active" id="admin-tab" data-toggle="tab" href="#admin" role="tab" aria-controls="admin" aria-selected="false">Administrative functions</a>
+            </li>
+          </ul>
+
+          <div class="tab-content">
+            <div class="tab-pane active" id="takeOn" role="tabpanel" aria-labelledby="takeOn-tab">
+              On appointment of company as managing agent, we perform a take-on audit which entails:
+              <p></p>
+              <p>•	Deeds search to confirm that correct owners and their details are loaded for levy billing and communication purposes.</p>
+              <p>•	Validation of sectional tile plans, PQ and levy schedule.</p>
+              <p>•	Levy Budget review, identification of risks and formulation of recommendations.</p>
+              <p>•	Accounting quality assessment from last financial statements to date.</p>
+              <p>•	Confirmation that the adjusting journals and opening balance adjustments agree to the auditor’s report.</p>
+              <p>•	Assessment of 10 MAP Plan and CSOS compliance.</p>
+              <p>•	Assessment of insurance cover.</p>
+              <p>•	Assessment of firefighting equipment.</p>
+              <p>•	Confirmation of conduct rules lodged with CSOS.</p>
+              <p>•	Assessment of owner arrear levies, credit control procedures, and legal report.</p>
+              <p>•	Assessment of compliance to relevant legislation.</p>
+              <p>•	Compilation of a report and action log to address identified gaps</p>
+              <p>•	Compilation of a property management control schedule demonstrating required monthly operational activities to be managed.</p>
+            </div>
+            <hr/>
+            <div class="tab-pane" id="levy" role="tabpanel" aria-labelledby="levy-tab">
+              <p>•	Distribution of monthly levy statements to owners by email</p>
+              <p>•	Collection of monthly levies and charges due to CSOS</p>
+              <p>•	Credit Control of outstanding levies</p>
+              <p>•	Billing of interest on arrears</p>
+              <p>•	Soft Collections</p>
+              <p>•	Attorney Collections liaison</p>
+              <p>•	Liaison with metering companies </p>
+              <p>•	Issuing of levy clearance certificates</p>
+            </div>
+            <div class="tab-pane" id="financial" role="tabpanel" aria-labelledby="financial-tab">
+              <p>•	Payment of approved operational and capital expenditure as per the approved budget and on sign-off in accordance with scheme executive instructions.</p>
+              <p>•	To open and / or operate a bank account in the name of the community scheme or a trust account which include current, savings and investment accounts in the name of the Scheme.</p>
+              <p>•	To keep books of account and records in accordance with standard accounting principles.</p>
+              <p>•	Preparing the annual audit file for the appointed auditors.</p>
+              <p>•	Preparing the annual budget and levy schedule for approval by the members at the AGM.</p>
+              <p>•	To compile and distribute a monthly management report to scheme executives which will include an income and expenditure statement detailing actual expenses versus budgeted expenses, a balance sheet, a debtor and supplier age analysis and any such supplementary information as the scheme executives may require.</p>
+              <p>•	Invest surplus funds after payment of creditors.</p>
+            </div>
+            <div class="tab-pane" id="advisory" role="tabpanel" aria-labelledby="advisory-tab">
+              <p>•	Managing the owners’ register</p>
+              <p>•	Consulting and providing advice on risk, compliance and governance matters where required.</p>
+              <p>•	Preparation and distribution of notices of meetings, agendas and minutes in respect of executives and owners’ meetings</p>
+              <p>•	Attending limited scheme executive meetings and the annual Annual General Meeting.</p>
+              <p>•	Attending Special General Meetings on request.</p>
+              <p>•	Arrange property valuation in terms of PMR 23(3).</p>
+              <p>•	Arrange competitive comprehensive property and fidelity insurance cover.</p>
+              <p>•	Submission and management of all insurance claims.</p>
+              <p>•	Maintenance management for common property to arrange quotes, booking contractors and facilitating approval and payment.  </p>
+              <p>•	Maintenance of statutory records.</p>
+              <p>•	Assisting with queries from management and owners.</p>
+              <p>•	Assisting executives with CSOS disputes.</p>
+            </div>
+            <div class="tab-pane" id="admin" role="tabpanel" aria-labelledby="admin-tab">
+              <p>•	Managing the owners’ register.</p>
+              <p>•	Safekeeping of the governance documents such as the conduct rules.</p>
+              <p>•	Issuing clearance and insurance certificates as and when required.</p>
+              <p>•	Performing general secretarial duties.</p>
+              <p>•	Recording, preparing and circulating the minutes of the trustee meetings and the AGM’s.</p>
+              <p>•	The preparing and circulation of all correspondence to owners and residents</p>
+              <p>•	Safekeeping of the minute books in perpetuity.</p>
+              <p>•	Provision of a legal address domicilium citandi et executandi for the body corporate.</p>
+              <p>•	Archiving and safekeeping of all body corporate records, as required by current legislation.</p>
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/components/propertyManagement/propertyManagement.vue → src/components/propertyManagement/sectionalTitle/propertyManagement.vue

@@ -16,7 +16,7 @@
 /* eslint-disable */
 import CarouselSection from "./carouselSection";
 import ServicesSection from "./ourServicesSection";
-import TestimonialSection from "./testimonialSection";
+import TestimonialSection from "../testimonialSection";
 import AOS from "aos";
 import "aos/dist/aos.css";
 export default {

src/components/shared/navBar.vue

@@ -95,8 +95,22 @@
                       </li>
                     </ul>
                   </li> -->
-                  <li>
-                    <router-link to="/propertyManagement">Property Management</router-link>
+                  <li class="menu-has-children">
+                    <div
+                      @mouseover="propManClass = 'ts-display'"
+                      @mouseleave="propManClass = 'no-display'"
+                    ></div>
+                    <a href="#" class="sf-with-ul">
+                      Property Management
+                    </a>
+                    <ul style="margin-top:-10px; text-align:left" :class="propManClass">
+                      <li>
+                        <router-link to="/propertyManagement">Sectional Title and HOA Management</router-link>
+                      </li>
+                      <li>
+                        <router-link to="/about/timeshare">Rental Property Portfolio Management</router-link>
+                      </li>
+                    </ul>
                   </li>
                   <li class="menu-has-children">
                     <div

src/main.js

@@ -23,8 +23,8 @@ Vue.use(VueGoogleMaps, {
 });
 Vue.config.productionTip = false;
 //axios.defaults.baseURL = "http://localhost:57260";
-axios.defaults.baseURL = "http://training.provision-sa.com:82";
-//axios.defaults.baseURL = "http://localhost:8080/";
+// axios.defaults.baseURL = "http://training.provision-sa.com:82";
+axios.defaults.baseURL = "http://localhost:8080/";
 
 Vue.prototype.$axios = axios;
 

src/router/index.js

@@ -24,7 +24,7 @@ import PropertyTypeList from "../components/admin/property/propertyTypeList.vue"
 import PropertyType from "../components/admin/property/propertyTypeEdit.vue";
 import UserDefinedGroups from "../components/admin/property/userDefinedGroupsPage.vue";
 import UserDefinedGroup from "../components/admin/property/userDefinedGroupPage.vue";
-import PropertyManagement from "../components/propertyManagement/propertyManagement.vue";
+import PropertyManagement from "../components/propertyManagement/sectionalTitle/propertyManagement.vue";
 
 import ResidentialPage from "../components/property/residential/residentialPage.vue";
 import CommercialPage from "../components/property/commercial/commercialPage.vue";
@@ -406,5 +406,5 @@ export default new Router({
       name: "ToBuySearch",
       component: ToBuySearch
     },
-  ]
+  ],
 });

vue.config.js

@@ -2,8 +2,8 @@ module.exports = {
   devServer: {
     proxy: {
       "/api": {
-        //target: "http://localhost:57260/",
-        target: "http://training.provision-sa.com:82",
+        target: "http://localhost:57260/",
+        // target: "http://training.provision-sa.com:82",
         changeOrigin: true
       },
       "/nph-srep": {