Roles Part 2

src/components/admin/fees/feesPage.vue

 <template>
-  <main id="main" style="padding-top:50px; padding-bottom:100px">
+  <main id="main" style=" padding-bottom:100px">
     <div class="container">
-      <div class="section-header">
-        <h2>Fees</h2>
+      <div class="row">
+        <div class="col">
+          <div class="section-header">
+            <h2>Fees</h2>
+          </div>
+        </div>
+      </div>
+      <div v-if="checkAccess" class="row">
+        <div class="col">
+          <listingFee />
+        </div>
+      </div>
+      <div v-else class="row">
+        <div class="col">
+          <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
+        </div>
       </div>
-      <listingFee />
     </div>
   </main>
 </template>
 
 <script>
 /* eslint-disable */
+import Log from "../../../assets/Log";
+import alert from "../../shared/alert";
 import listingFee from "./listingFee";
+
 export default {
   components: {
-    listingFee
+    listingFee,
+    alert
+  },
+  computed: {
+    checkAccess() {
+      if (Log.getUser().role === "Super Admin") {
+        return true;
+      } else {
+        return false;
+      }
+    }
   }
 };
 </script>

src/components/admin/misc/termsConditions.vue

           </div>
         </div>
       </div>
-
-      <div class="row">
-        <div class="col-md-6">
-          <label for="version" class="uniSelectLabel">Version:</label>
-          <input name="version" type="text" v-model="version" class="mt-5 mb-3 ml-2" />
+      <div v-if="checkAccess">
+        <div class="row">
+          <div class="col-md-6">
+            <label for="version" class="uniSelectLabel">Version:</label>
+            <input name="version" type="text" v-model="version" class="mt-5 mb-3 ml-2" />
+          </div>
+          <div class="col-md-6 mt-5">
+            <p style="float:right">Last Modified: {{ getModiefiedDate }}</p>
+          </div>
         </div>
-        <div class="col-md-6 mt-5">
-          <p style="float:right">Last Modified: {{ getModiefiedDate }}</p>
+        <div class="row">
+          <div class="col">
+            <vue-editor v-model="termsInput" :editor-toolbar="customToolbar" />
+          </div>
         </div>
-      </div>
-      <div class="row">
-        <div class="col">
-          <vue-editor v-model="termsInput" :editor-toolbar="customToolbar" />
+        <div class="row">
+          <div class="col-md-2 mt-3">
+            <button @click="saveTerms()" class="btn-solid-blue">Save</button>
+          </div>
+          <div v-if="updated" class="col mt-3">
+            <alert :text="'Terms and Contidtions Updated!!'" :type="'SUCCESS'" />
+          </div>
         </div>
       </div>
-      <div class="row">
-        <div class="col-md-2 mt-3">
-          <button @click="saveTerms()" class="btn-solid-blue">Save</button>
-        </div>
-        <div v-if="updated" class="col mt-3">
-          <alert :text="'Terms and Contidtions Updated!!'" :type="'SUCCESS'" />
-        </div>
+      <div v-else>
+        <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
       </div>
     </div>
     <div v-if="wait" id="preloader"></div>
 /* eslint-disable */
 import { VueEditor } from "vue2-editor";
 import { mapActions, mapGetters, mapState } from "vuex";
+
+import Log from "../../../assets/Log";
 import alert from "../../shared/alert";
 
 export default {
     getModiefiedDate() {
       var date = new Date(this.terms.modified);
       return date.getDate() + " / " + (date.getMonth() + 1) + " / " + date.getFullYear();
+    },
+    checkAccess() {
+      if (Log.getUser().role === "Super Admin") {
+        return true;
+      } else {
+        return false;
+      }
     }
   }
 };

src/components/admin/property/propertyTypeEdit.vue

 <template>
-  <div>
+  <main id="main" style="margin-top:200px; padding-bottom:50px">
     <div class="container">
-      <br />
       <div class="row">
-        <div class="col-md-12 col-lg-8">
-          <div class="title-box-d">
-            <h1 class="title-d" style="text-align:left; font-size: 250%">
-              Property Type
-            </h1>
+        <div class="col">
+          <div class="section-header">
+            <h2>Property Type</h2>
           </div>
         </div>
       </div>
-    </div>
-    <div class="container">
-      <div class="row mb-3">
+      <div v-if="checkAccess" class="row mb-3">
         <div class="col-md-12">
           <form id="mainForm">
             <div class="form-group row">
             </div>
           </form>
         </div>
+        <div class="col-md-12">
+          <button type="button" @click="SubmitData()" class="btn-solid-blue">
+            Save
+          </button>
+          <button type="button" @click="Close()" class="btn-solid-blue">
+            Close
+          </button>
+        </div>
+      </div>
+      <div v-else class="row">
+        <div class="col">
+          <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
+        </div>
       </div>
     </div>
-    <button
-      type="button"
-      @click="SubmitData()"
-      class="btn btn-b-n"
-      style="width: 85px; height:40px;"
-    >
-      Save
-    </button>
-    |
-    <button type="button" @click="Close()" class="btn btn-b-n" style="width: 85px; height:40px;">
-      Close
-    </button>
-  </div>
+  </main>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+
+import Log from "../../../assets/Log";
+import alert from "../../shared/alert";
 
 export default {
-  name: 'PropertyType',
-  data() {
-    return {};
+  name: "PropertyType",
+  components: {
+    alert
   },
   mounted() {
     this.clearPropertyType();
     }
   },
   computed: {
-    ...mapState('propertyTypes', ['propertyType']),
+    ...mapState("propertyTypes", ["propertyType"]),
+    checkAccess() {
+      if (Log.getUser().role === "Super Admin") {
+        return true;
+      } else {
+        return false;
+      }
+    }
   },
   methods: {
-    ...mapActions('propertyTypes', [
-      'getPropertyType',
-      'savePropertyType',
-      'updatePropertyType',
-      'clearPropertyType',
+    ...mapActions("propertyTypes", [
+      "getPropertyType",
+      "savePropertyType",
+      "updatePropertyType",
+      "clearPropertyType"
     ]),
     SubmitData() {
       if (this.propertyType.id > 0) {
       } else {
         this.savePropertyType(this.propertyType);
       }
-      this.$router.push('/propertyTypes/list');
+      this.$router.push("/propertyTypes/list");
     },
     Close() {
-      this.$router.push('/propertyTypes/list');
-    },
-  },
+      this.$router.push("/propertyTypes/list");
+    }
+  }
 };
 </script>

src/components/admin/property/propertyTypeList.vue

           </div>
         </div>
       </div>
+      <div v-if="checkAccess" class="row">
+        <div class="col">
+          <listView
+            :items="propertyTypes"
+            :showNew="true"
+            :editable="true"
+            :deleteable="true"
+            :displayColumns="columns"
+            :sortKey="'description'"
+            @onEdit="Edit"
+            @onDelete="Delete"
+            @onNew="New"
+          />
+        </div>
+      </div>
+      <div v-else class="row">
+        <div class="col">
+          <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
+        </div>
+      </div>
     </div>
-    <div class="container">
-      <listView
-        :items="propertyTypes"
-        :showNew="true"
-        :editable="true"
-        :deleteable="true"
-        :displayColumns="columns"
-        :sortKey="'description'"
-        @onEdit="Edit"
-        @onDelete="Delete"
-        @onNew="New"
-      />
-    </div>
-    <br />
   </main>
 </template>
 
 <script>
+/* eslint-disable */
 import { mapState, mapActions } from "vuex";
+
+import Log from "../../../assets/Log";
+import alert from "../../shared/alert";
 import listView from "../../shared/listView.vue";
 
 export default {
   name: "PropertyTypeList",
   components: {
-    listView
+    listView,
+    alert
   },
   data() {
     return {
     this.getPropertyTypes();
   },
   computed: {
-    ...mapState("propertyTypes", ["propertyTypes"])
+    ...mapState("propertyTypes", ["propertyTypes"]),
+    checkAccess() {
+      if (Log.getUser().role === "Super Admin") {
+        return true;
+      } else {
+        return false;
+      }
+    }
   }
 };
 </script>

src/components/admin/property/userDefinedField.vue

 <template>
   <main id="main">
     <div class="container">
-      <br />
       <div class="row">
-        <div class="col-md-12 col-lg-8">
-          <div class="title-box-d">
-            <h1 class="title-d" style="text-align:left; font-size: 250%">
-              User Defined Field
-            </h1>
+        <div class="col">
+          <div class="section-header">
+            <h2>User Defined Field</h2>
           </div>
         </div>
       </div>

src/components/admin/property/userDefinedGroupPage.vue

 <template>
-  <!-- eslint-disable max-len -->
-  <div>
-    <div v-if="showField === false">
-      <div class="container">
-        <br />
-        <div class="row">
-          <div class="col-md-12 col-lg-8">
-            <div class="title-box-d">
-              <h1 class="title-d" style="text-align:left; font-size: 250%">
-                Property User Defined Group
-              </h1>
-            </div>
+  <main id="main" style="margin-top:200px; padding-bottom:50px">
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          <div class="section-header">
+            <h2>Property User Defined Group</h2>
           </div>
         </div>
       </div>
-      <div class="container">
-        <div class="row mb-3">
-          <div class="col-md-12">
-            <form id="mainForm">
-              <div v-if="userDefinedGroup" class="form-group row">
-                <div class="col-md-4">
-                  <label>Description</label>
-                  <input
-                    class="form-control"
-                    type="text"
-                    name="description"
-                    id="description"
-                    v-model="userDefinedGroup.description"
-                  />
-                </div>
-                <div class="col-md-4">
-                  <label>Property Usage Type</label>
-                  <select
-                    class="form-control"
-                    name="UsageType"
-                    id="UsageType"
-                    v-model="userDefinedGroup.usageType"
-                  >
-                    <option value="0">Residential</option>
-                    <option value="1">Commercial</option>
-                    <option value="2">Both</option>
-                  </select>
-                </div>
-                <div class="col-md-4">
-                  <label>Order</label>
-                  <input
-                    class="form-control"
-                    type="number"
-                    name="rank"
-                    id="rank"
-                    v-model="userDefinedGroup.rank"
-                  />
-                </div>
-              </div>
-              <div v-if="!userDefinedGroup" class="form-group row">
-                <div class="col-md-4">
-                  <label>Description</label>
-                  <input
-                    class="form-control"
-                    type="text"
-                    name="description"
-                    id="description"
-                    v-model="group.description"
-                  />
-                </div>
-                <div class="col-md-4">
-                  <label>Property Usage Type</label>
-                  <select
-                    class="form-control"
-                    name="UsageType"
-                    id="UsageType"
-                    v-model="group.usageType"
-                  >
-                    <option value="0">Residential</option>
-                    <option value="1">Commercial</option>
-                    <option value="2">Both</option>
-                  </select>
+    </div>
+    <div v-if="checkAccess">
+      <div v-if="showField === false">
+        <div class="container">
+          <div class="row mb-3">
+            <div class="col-md-12">
+              <form id="mainForm">
+                <div v-if="userDefinedGroup" class="form-group row">
+                  <div class="col-md-4">
+                    <label>Description</label>
+                    <input
+                      class="form-control"
+                      type="text"
+                      name="description"
+                      id="description"
+                      v-model="userDefinedGroup.description"
+                    />
+                  </div>
+                  <div class="col-md-4">
+                    <label>Property Usage Type</label>
+                    <select
+                      class="form-control"
+                      name="UsageType"
+                      id="UsageType"
+                      v-model="userDefinedGroup.usageType"
+                    >
+                      <option value="0">Residential</option>
+                      <option value="1">Commercial</option>
+                      <option value="2">Both</option>
+                    </select>
+                  </div>
+                  <div class="col-md-4">
+                    <label>Order</label>
+                    <input
+                      class="form-control"
+                      type="number"
+                      name="rank"
+                      id="rank"
+                      v-model="userDefinedGroup.rank"
+                    />
+                  </div>
                 </div>
-                <div class="col-md-4">
-                  <label>Order</label>
-                  <input
-                    class="form-control"
-                    type="number"
-                    name="rank"
-                    id="rank"
-                    v-model="group.rank"
-                  />
+                <div v-if="!userDefinedGroup" class="form-group row">
+                  <div class="col-md-4">
+                    <label>Description</label>
+                    <input
+                      class="form-control"
+                      type="text"
+                      name="description"
+                      id="description"
+                      v-model="group.description"
+                    />
+                  </div>
+                  <div class="col-md-4">
+                    <label>Property Usage Type</label>
+                    <select
+                      class="form-control"
+                      name="UsageType"
+                      id="UsageType"
+                      v-model="group.usageType"
+                    >
+                      <option value="0">Residential</option>
+                      <option value="1">Commercial</option>
+                      <option value="2">Both</option>
+                    </select>
+                  </div>
+                  <div class="col-md-4">
+                    <label>Order</label>
+                    <input
+                      class="form-control"
+                      type="number"
+                      name="rank"
+                      id="rank"
+                      v-model="group.rank"
+                    />
+                  </div>
                 </div>
-              </div>
-            </form>
+              </form>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col">
+              <listView
+                :items="userFields"
+                :showNew="true"
+                :editable="true"
+                :deleteable="true"
+                :displayColumns="columns"
+                :sortKey="'rank'"
+                @onEdit="Edit"
+                @onDelete="Delete"
+                @onNew="newItem"
+              />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col">
+              <button type="button" @click="SubmitData()" class="btn-solid-blue mb-5">
+                Save
+              </button>
+              <button type="button" @click="Close()" class="btn-solid-blue">
+                Close
+              </button>
+            </div>
           </div>
         </div>
       </div>
-      <div class="container">
-        <listView
-          :items="userFields"
-          :showNew="true"
-          :editable="true"
-          :deleteable="true"
-          :displayColumns="columns"
-          :sortKey="'rank'"
-          @onEdit="Edit"
-          @onDelete="Delete"
-          @onNew="newItem"
-        />
+      <div v-else>
+        <userFields @UpdateUserField="UpdateUserField" :field="item" />
       </div>
-      <button type="button" @click="SubmitData()" class="btn-solid-blue mb-5">
-        Save
-      </button>
-      <button type="button" @click="Close()" class="btn-solid-blue">
-        Close
-      </button>
     </div>
     <div v-else>
-      <userFields @UpdateUserField="UpdateUserField" :field="item" />
+      <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
     </div>
-  </div>
+  </main>
 </template>
 
 <script>
+/* eslint-disable */
 import { mapState, mapActions } from "vuex";
+
+import Log from "../../../assets/Log";
+import alert from "../../shared/alert";
 import userFields from "./userDefinedField.vue";
 import listView from "../../shared/listView.vue";
 
   name: "UserDefinedGroup",
   components: {
     userFields,
-    listView
+    listView,
+    alert
   },
   data() {
     return {
     }
   },
   computed: {
-    ...mapState("propertyAdmin", ["userDefinedGroup", "userFields", "userField"])
+    ...mapState("propertyAdmin", ["userDefinedGroup", "userFields", "userField"]),
+    checkAccess() {
+      if (Log.getUser().role === "Super Admin") {
+        return true;
+      } else {
+        return false;
+      }
+    }
   },
   methods: {
     ...mapActions("propertyAdmin", [

src/components/admin/property/userDefinedGroupsPage.vue

 <template>
-  <!-- eslint-disable max-len -->
   <main id="main" style="margin-top:-80px; padding-bottom:50px">
     <div class="container">
       <div class="row">
-        <div class="col-md-12 col-lg-8">
+        <div class="col">
           <div class="section-header">
             <h2>Property User Defined Groups</h2>
           </div>
         </div>
       </div>
-    </div>
-    <div class="container">
-      <div class="container">
-        <listView
-          :items="userDefinedGroups"
-          :showNew="true"
-          :editable="true"
-          :deleteable="true"
-          :displayColumns="columns"
-          :sortKey="'rank'"
-          @onEdit="Edit"
-          @onDelete="Delete"
-          @onNew="New"
-        />
+      <div v-if="checkAccess" class="row">
+        <div class="col">
+          <listView
+            :items="userDefinedGroups"
+            :showNew="true"
+            :editable="true"
+            :deleteable="true"
+            :displayColumns="columns"
+            :sortKey="'rank'"
+            @onEdit="Edit"
+            @onDelete="Delete"
+            @onNew="New"
+          />
+        </div>
+      </div>
+      <div v-else class="row">
+        <div class="col">
+          <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
+        </div>
       </div>
     </div>
-    <br />
   </main>
 </template>
+
 <script>
+/* eslint-disable */
 import { mapState, mapActions } from "vuex";
+
+import Log from "../../../assets/Log";
+import alert from "../../shared/alert";
 import listView from "../../shared/listView.vue";
 
 export default {
   name: "UserDefinedGroup",
   components: {
-    listView
+    listView,
+    alert
   },
   data() {
     return {
     this.getUserDefinedGroups();
   },
   computed: {
-    ...mapState("propertyAdmin", ["userDefinedGroups"])
+    ...mapState("propertyAdmin", ["userDefinedGroups"]),
+    checkAccess() {
+      if (Log.getUser().role === "Super Admin") {
+        return true;
+      } else {
+        return false;
+      }
+    }
   },
   methods: {
     ...mapActions("propertyAdmin", ["getUserDefinedGroups", "deleteUserDefinedGroup"]),

src/components/admin/status/statusPage.vue

 <template>
   <main id="main" style="margin-top:-20px; padding-bottom:50px">
-    <!-- <section class="intro-single"> -->
     <div class="container">
-      <br />
-      <br />
-      <br />
-      <br />
       <div class="row">
         <div class="col-md-12 col-lg-8">
-          <!-- <div class="title-single-box"> -->
-          <!-- <h2 class="title-single">Status List</h2> -->
-          <!-- </div> -->
           <div class="section-header">
             <h2>Status List</h2>
           </div>
         </div>
       </div>
     </div>
-    <!-- </section> -->
-    <div class="container">
+    <div v-if="checkAccess" class="container">
       <ListView :items="statusList" :columnCount="4" :compact="false" :showNew="false" />
     </div>
+    <div v-else>
+      <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
+    </div>
   </main>
 </template>
+
 <script>
+/* eslint-disable */
 import { mapState, mapActions } from "vuex";
+
+import Log from "../../../assets/Log";
+import alert from "../../shared/alert";
 import ListView from "../../shared/listView.vue";
 
 export default {
   name: "StatusList",
   components: {
-    ListView
+    ListView,
+    alert
   },
   created() {
     this.getStatusList();
   },
   computed: {
-    ...mapState("status", ["statusList"])
+    ...mapState("status", ["statusList"]),
+    checkAccess() {
+      if (Log.getUser().role === "Super Admin") {
+        return true;
+      } else {
+        return false;
+      }
+    }
   },
   methods: {
     ...mapActions("status", ["getStatusList"])

src/components/admin/status/tenderWeekAdminPage.vue

 <template>
   <main id="main" style="margin-top:-20px; padding-bottom:50px">
-    <!-- <section class="intro-single"> -->
     <div class="container">
       <div class="row">
         <div class="col">
           </div>
         </div>
       </div>
-      <div id="table" class="col-xs-12 table-responsive">
+      <div v-if="checkAccess" id="table" class="col-xs-12 table-responsive">
         <ListView :items="items" :showNew="false"></ListView>
       </div>
-      <br />
+      <div v-else>
+        <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
+      </div>
     </div>
-
-    <!-- </section> -->
   </main>
 </template>
+
 <script>
+/* eslint-disable */
 import { mapState, mapActions } from "vuex";
+
+import Log from "../../../assets/Log";
+import alert from "../../shared/alert";
 import ListView from "../../shared/listView.vue";
 
 export default {
     this.getItems();
   },
   components: {
-    ListView
+    ListView,
+    alert
   },
   computed: {
-    ...mapState("tenderWeek", ["items"])
+    ...mapState("tenderWeek", ["items"]),
+    checkAccess() {
+      if (Log.getUser().role === "Super Admin") {
+        return true;
+      } else {
+        return false;
+      }
+    }
   },
   methods: {
     ...mapActions("tenderWeek", ["getItems"])

src/components/admin/status/timeshareAdminPage.vue

-/* eslint-disable no-restricted-syntax */ /* eslint-disable guard-for-in */
-<!-- eslint-disable max-len -->
 <template>
   <main id="main" style="margin-top:200px; padding-bottom:50px">
     <div class="container">
           </div>
         </div>
       </div>
-      <!-- <div class="row">
-        <div class="col-md-3">
-          <float-label label="REGION">
-            <select
-              id="weekInfoRegionSelect"
-              class="form-control uniSelect"
-              @change="regionChange()"
-              style="font-size: 15px"
-              v-model="region"
-            >
-              <option v-for="(region, r) in regions" :key="r" :value="region">{{
-                region.regionName
-              }}</option>
-            </select>
-          </float-label>
-        </div>
-        <div class="col-md-3">
-          <float-label label="RESORT NAME">
-            <select
-              id="weekInfoResortSelect"
-              class="form-control uniSelect"
-              @change="resortChange()"
-            >
-              <option value="Other">Other</option>
-              <option v-for="(resort, r) in filteredResort" :key="r" :value="resort">{{
-                resort.resortName
-              }}</option>
-            </select>
-          </float-label>
-        </div>
-        <div class="col-md-3">
-          <float-label label="SEASON">
-            <select class="form-control uniSelect" name="region" id="region">
-              <option v-for="(season, r) in seasons" :key="r">{{ season.name }}</option>
-            </select>
-          </float-label>
-        </div>
-        <div class="col-md-3">
-          <float-label label="STATUS">
-            <select class="form-control uniSelect" name="status"> </select>
-          </float-label>
+      <div v-if="checkAccess" class="row">
+        <div class="col-md-12">
+          <timeshareList />
         </div>
       </div>
-      <div class="row">
+      <div v-else class="row">
         <div class="col">
-          <button style="float:right" class="btn-solid-blue" type="button">Filter</button>
-        </div>
-      </div>-->
-      <div class="row">
-        <div class="col-md-12">
-          <timeshareList />
-          <!-- <ListView
-            :items="getNeedsVerify"
-            :editable="true"
-            :deleteable="true"
-            :showCustomAction="true"
-            :CustomActionHeading="'Publish'"
-            :showColumnChooser="false"
-            :displayColumns="columns"
-            :displayFormats="displayFormats"
-            @onRowClick="onRowClick"
-            @onClearSelected="onClearSelected"
-            @onEdit="onEdit"
-            :showNew="false"
-          /> -->
+          <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
         </div>
       </div>
-      <!-- <div class="offset-1 col-md-6">
-        <button
-          type="button"
-          :class="{
-            'form-control btn btn-primary ': 1 === 1,
-            'my-disable': !selectedItems || selectedItems.length === 0
-          }"
-          value="Verify Week(s)"
-          :disabled="!(selectedItems.length > 0)"
-          @click="onVerify()"
-        >
-          {{ ButtonMessage }}
-        </button> 
-        <div>{{ Message }}</div>
-      </div>-->
     </div>
   </main>
 </template>
+
 <script>
+/* eslint-disable */
 import { mapState, mapActions, mapGetters } from "vuex";
+
 import Log from "../../../assets/Log";
-import ListView from "../../shared/listView.vue";
+import alert from "../../shared/alert";
 import timeshareList from "./timeshareAdminList";
 
 export default {
   name: "TimeshareAdmin",
   components: {
-    timeshareList
-  },
-  data() {
-    return {
-      user: Log.getUser(),
-      columns: [
-        "owner",
-        "agent",
-        "resort",
-        "weekNumber",
-        "unitNumber",
-        "bedrooms",
-        "season",
-        "region",
-        "sellPrice"
-      ],
-      displayFormats: ["", "", "", "", "", "", "", "", "money"],
-      // selectedItems: [],
-      showMessage: false,
-      region: ""
-    };
+    timeshareList,
+    alert
   },
   computed: {
     ...mapState("timeshare", ["resorts", "regions", "seasons", "detailedRegion"]),
     ...mapState("individual", ["indiv"]),
-    filteredResort() {
-      let list = [];
-      if (this.region) {
-        const item = this.detailedRegion.find(
-          region => region.region.regionCode === this.region.regionCode
-        );
-        if (item) {
-          list = item.children;
-        }
-      } else {
-        list = this.resorts;
-      }
-      return _.sortBy(list, x => x.resortName);
-    },
-    SelectedItems() {
-      const selectedArray = [];
-      this.selectedItems.forEach(x => selectedArray.push(this.items[x]));
-      return selectedArray;
-    },
-    ButtonMessage() {
-      let msg = "";
-      if (!(this.selectedItems.length > 0)) {
-        msg = "No Items selected";
+    checkAccess() {
+      if (Log.getUser().role === "Super Admin") {
+        return true;
       } else {
-        msg = "Verify item";
-        if (this.selectedItems.length > 1) {
-          msg += "s";
-        }
-      }
-      return msg;
-    },
-    Message() {
-      let msg = "";
-      if (!(this.selectedItems.length > 0)) {
-        msg = "Please select the item(s) to verify.";
-      } else {
-        msg = `${this.selectedItems.length}`;
-        if (this.selectedItems.length === 1) {
-          msg += " item ";
-        } else msg += " items ";
-        msg += "selected. Click to verify or select more...";
-      }
-      return msg;
-    },
-    ...mapState("myWeeks", ["items"]),
-    ...mapGetters({ getNeedsVerify: "myWeeks/getNeedsVerify" })
-  },
-  methods: {
-    ...mapActions("myWeeks", ["getItems", "verifyWeek"]),
-    ...mapActions("alert", ["success"]),
-    ...mapActions("timeshare", ["initTimeshare", "onResortChange", "saveWeek", "getBlankWeek"]),
-    onVerify() {
-      if (this.selectedItems.length > 0) {
-        for (const i in this.selectedItems) {
-          const selectedIndex = this.selectedItems[i];
-          const item = this.items[selectedIndex];
-          if (item) {
-            this.verifyWeek(item.id);
-          }
-        }
-        this.success("Week verified!");
-        this.$router.push("/shared/alert");
+        return false;
       }
-    },
-    onRowClick(items) {
-      this.selectedItems = items;
-    },
-    onEdit(item) {
-      this.$router.push({ name: "EditTimeshare", params: { weekParam: item } });
-      // this.$router.push(`/editTimeShare/${item.id}`);
-    },
-    onClearSelected() {
-      this.selectedItems = [];
     }
-    //   onDelete(item) {
-    //   this.deleteListing(item.id);
-    // },
   }
 };
 </script>

src/components/admin/status/userManagementPage.vue

 <template>
   <main id="main" style="margin-top:-20px; padding-bottom:50px">
-    <!-- eslint-disable max-len -->
     <div class="container">
-      <br />
-      <br />
       <div class="row">
-        <div class="col-md-12 col-lg-8">
+        <div class="col">
           <div class="section-header">
             <h2>User Management</h2>
           </div>
         </div>
       </div>
-      <div class="row">
-        <div class="col-md-2 offset-1">
-          <button type="button" class="btn-solid-blue">USERS</button>
+      <div v-if="checkAccess">
+        <div class="row">
+          <div class="col-md-2 offset-1">
+            <button type="button" class="btn-solid-blue">USERS</button>
+          </div>
+          <div class="col-md-2 offset-2">
+            <button
+              @click="routerGoTo('/status/agentUserManagementPage')"
+              type="button"
+              class="btn-solid-blue"
+            >
+              AGENTS
+            </button>
+          </div>
         </div>
-        <div class="col-md-2 offset-2">
-          <button
-            @click="routerGoTo('/status/agentUserManagementPage')"
-            type="button"
-            class="btn-solid-blue"
-          >
-            AGENTS
-          </button>
+        <div class="row">
+          <ListView
+            :items="individuals"
+            :showNew="false"
+            :editable="true"
+            :deleteable="true"
+            :showCustomAction="true"
+            :showColumnChooser="false"
+            :CustomActionHeading="'Reset Password'"
+            :displayColumns="columns"
+            :displayHeaders="headers"
+            @onEdit="Edit"
+            @onDelete="Delete"
+            @onResetPassword="PasswordReset"
+          />
         </div>
       </div>
-      <div class="container">
-        <ListView
-          :items="individuals"
-          :showNew="false"
-          :editable="true"
-          :deleteable="true"
-          :showCustomAction="true"
-          :showColumnChooser="false"
-          :CustomActionHeading="'Reset Password'"
-          :displayColumns="columns"
-          :displayHeaders="headers"
-          @onEdit="Edit"
-          @onDelete="Delete"
-          @onResetPassword="PasswordReset"
-        />
-        <br />
+      <div v-else>
+        <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
       </div>
     </div>
   </main>
 </template>
 
 <script>
+/* eslint-disable */
 import { mapState, mapActions, mapGetters } from "vuex";
-// import alert from '../../shared/alert.vue';
+
+import Log from "../../../assets/Log";
+import alert from "../../shared/alert.vue";
 import ListView from "../../shared/listView.vue";
 
 export default {
   name: "userManagementPage",
   components: {
-    ListView
-    // alert,
+    ListView,
+    alert
   },
   data() {
     return {
   },
   computed: {
     ...mapState("register", ["individuals", "removeIndividual"]),
-    ...mapGetters("role", ["getRoles"])
+    ...mapGetters("role", ["getRoles"]),
+    checkAccess() {
+      if (Log.getUser().role === "Super Admin") {
+        return true;
+      } else {
+        return false;
+      }
+    }
   }
 };
 </script>

src/components/admin/unitConfiguration/unitConfigurationPage.vue

 <template>
   <main id="main" style="margin-top:-20px; padding-bottom:50px">
-    <!-- eslint-disable max-len -->
-    <!-- <section class="intro-single"> -->
     <div class="container">
       <div class="row">
         <div class="col">
         </div>
       </div>
     </div>
-    <!-- </section> -->
-    <div class="container">
+    <div v-if="checkAccess" class="container">
       <ListView :items="unitConfigurationList" />
     </div>
+    <div v-else>
+      <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
+    </div>
   </main>
 </template>
+
 <script>
+/* eslint-disable */
 import { mapState, mapActions } from "vuex";
+
+import Log from "../../../assets/Log";
+import alert from "../../shared/alert";
 import ListView from "../../shared/listView.vue";
 
 export default {
   name: "UnitConfiguration",
   components: {
-    ListView
+    ListView,
+    alert
   },
   created() {
     this.getUnitConfigurationList();
   },
   computed: {
-    ...mapState("unitConfiguration", ["unitConfigurationList"])
+    ...mapState("unitConfiguration", ["unitConfigurationList"]),
+    checkAccess() {
+      if (Log.getUser().role === "Super Admin") {
+        return true;
+      } else {
+        return false;
+      }
+    }
   },
   methods: {
     ...mapActions("unitConfiguration", ["getUnitConfigurationList"])

src/components/communication/templatePage.vue

 <template>
   <main id="main" style="margin-top:-20px; padding-bottom:50px">
     <!-- eslint-disable max-len -->
-    <div class="container-fluid" style="margin-top:25px;">
+    <div class="container" style="margin-top:25px;">
       <div class="row">
-        <div class="col-md-1"></div>
-        <div class="col-md-10">
+        <div class="col-md-12">
           <div class="section-header">
-            <h2 class="sinse-title">Email Templates</h2>
+            <h2>Email Templates</h2>
           </div>
         </div>
-        <div class="col-md-12">
-          <hr />
-        </div>
       </div>
-      <div class="row">
+      <div v-if="checkAccess" class="row">
         <div :class="listClass">
           <ListView :items="list" @onRowClick="onRowClick" @onNew="onNew" :showNew="true" />
         </div>
           />
         </div>
       </div>
-
-      <hr />
+      <div v-else class="row">
+        <div class="col">
+          <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
+        </div>
+      </div>
     </div>
   </main>
 </template>
 
 <script>
+/* eslint-disable */
 import { mapState, mapActions } from "vuex";
+
+import Log from "../../assets/Log";
+import alert from "../shared/alert";
 import ListView from "../shared/listView.vue";
 import DetailView from "./templateDetailNew.vue";
 
   },
   components: {
     ListView,
-    DetailView
+    DetailView,
+    alert
   },
   mounted() {
     this.getList();
     },
     listClass() {
       return this.detailItem !== undefined && this.detailItem != null ? "col-md-6" : "col-md-12";
+    },
+    checkAccess() {
+      if (Log.getUser().role === "Super Admin") {
+        return true;
+      } else {
+        return false;
+      }
     }
   },
   methods: {

src/components/shared/navBar.vue

                       <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/status/list">Status</router-link>
                       </li>-->
-                      <li v-if="ROLE === 'Super Admin'"></li>
-                      <li>
-                        <router-link to="/property/list">List My Property</router-link>
-                      </li>
-
-                      <li v-if="ROLE === 'Super Admin'">
-                        <router-link to="/status/timeshareAdmin">Timeshare Week Admin</router-link>
-                      </li>
-                      <li v-if="ROLE === 'Super Admin'">
-                        <router-link to="/status/tenderWeekAdmin"
-                          >Tender Week Management</router-link
+                      <li v-if="ROLE === 'Super Admin'" class="menu-has-children">
+                        <div
+                          @mouseover="submenu1Class = 'ts-display'"
+                          @mouseleave="submenu1Class = 'no-display'"
+                        ></div>
+                        <a href="#" class="sf-with-ul">Property</a>
+                        <ul
+                          style="margin-top:-10px;text-align:left;width:250px"
+                          :class="submenu1Class"
                         >
+                          <li>
+                            <router-link to="/property/list">List My Property</router-link>
+                          </li>
+                          <li>
+                            <router-link to="/PropertyAdmin">Property Admin</router-link>
+                          </li>
+                        </ul>
                       </li>
-                      <li>
-                        <router-link to="/PropertyAdmin">Property Admin</router-link>
+                      <li v-if="ROLE === 'Super Admin'" class="menu-has-children">
+                        <div
+                          @mouseover="submenu1Class = 'ts-display'"
+                          @mouseleave="submenu1Class = 'no-display'"
+                        ></div>
+                        <a href="#" class="sf-with-ul">TimeShare</a>
+                        <ul
+                          style="margin-top:-10px;text-align:left;width:250px"
+                          :class="submenu1Class"
+                        >
+                          <li v-if="ROLE === 'Super Admin'">
+                            <router-link to="/status/tenderWeekAdmin"
+                              >Tender Week Management</router-link
+                            >
+                          </li>
+                          <li v-if="ROLE === 'Super Admin'">
+                            <router-link to="/status/timeshareAdmin"
+                              >Timeshare Week Admin</router-link
+                            >
+                          </li>
+                        </ul>
                       </li>
+
                       <hr v-if="ROLE === 'Super Admin'" />
                       <li v-if="ROLE === 'Super Admin'" class="menu-has-children">
                         <div
                           :class="submenu1Class"
                         >
                           <li>
-                            <router-link to="/status/list">Status</router-link>
+                            <router-link to="/communication/template">Email Templates</router-link>
                           </li>
                           <li>
-                            <router-link to="/unitConfiguration/list"
-                              >Unit Configuration</router-link
-                            >
+                            <router-link to="/termsConditions">Edit Terms & Conditions</router-link>
                           </li>
                           <li>
-                            <router-link to="/communication/template">Templates</router-link>
+                            <router-link to="/fees">Fees</router-link>
                           </li>
                           <li>
-                            <router-link to="/status/userManagementPage"
-                              >User Management & Access</router-link
-                            >
+                            <router-link to="/propertyTypes/list">Property Types</router-link>
                           </li>
                           <li>
                             <router-link to="/userDefinedGroups/list"
                             >
                           </li>
                           <li>
-                            <router-link to="/propertyTypes/list">Property Types</router-link>
+                            <router-link to="/status/list">Status</router-link>
                           </li>
                           <li>
-                            <router-link to="/fees">Fees</router-link>
+                            <router-link to="/unitConfiguration/list"
+                              >Unit Configuration</router-link
+                            >
                           </li>
+
                           <li>
-                            <router-link to="/termsConditions"
-                              >Edit Terms and Conditions</router-link
+                            <router-link to="/status/userManagementPage"
+                              >User Management & Access</router-link
                             >
                           </li>
                         </ul>
                       </li>
-                      <li v-if="ROLE === 'Super Admin'" class="menu-has-children">
+                      <!-- <li v-if="ROLE === 'Super Admin'" class="menu-has-children">
                         <div
                           @mouseover="submenu1Class = 'ts-display'"
                           @mouseleave="submenu1Class = 'no-display'"
                             <router-link to="/searchLog">Search Logs</router-link>
                           </li>
                         </ul>
-                      </li>
+                      </li> -->
                       <hr />
                       <li>
                         <router-link to="/Offers">Offers</router-link>