package-lock.json

     "atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-      "dev": true
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
     "autoprefixer": {
       "version": "9.6.0",
         "randomfill": "^1.0.3"
       }
     },
+    "css": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
+      "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
+      "requires": {
+        "inherits": "^2.0.3",
+        "source-map": "^0.6.1",
+        "source-map-resolve": "^0.5.2",
+        "urix": "^0.1.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
         }
       }
     },
+    "css-parse": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-2.0.0.tgz",
+      "integrity": "sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=",
+      "requires": {
+        "css": "^2.0.0"
+      }
+    },
     "css-select": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.0.2.tgz",
         "assert-plus": "^1.0.0"
       }
     },
+    "datatables.net": {
+      "version": "1.10.19",
+      "resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-1.10.19.tgz",
+      "integrity": "sha512-+ljXcI6Pj3PTGy5pesp3E5Dr3x3AV45EZe0o1r0gKENN2gafBKXodVnk2ypKwl2tTmivjxbkiqoWnipTefyBTA==",
+      "requires": {
+        "jquery": ">=1.7"
+      }
+    },
     "date-now": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
-      "dev": true
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
     },
     "deep-equal": {
       "version": "1.0.1",
       }
     },
     "eslint-utils": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.3.1.tgz",
-      "integrity": "sha512-Z7YjnIldX+2XMcjr7ZkgEsOj/bREONV60qYeB/bjMAqqqZ4zxKyWX+BOUkdmRmA9riiIPVvo5x86m5elviOk0Q==",
-      "dev": true
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.2.tgz",
+      "integrity": "sha512-eAZS2sEUMlIeCjBeubdj45dmBHQwPHWyBcT1VSYB7o9x9WRRqKxyUoiXlRjyAwzN7YEzHJlYg0NmzDRWx6GP4Q==",
+      "dev": true,
+      "requires": {
+        "eslint-visitor-keys": "^1.0.0"
+      }
     },
     "eslint-visitor-keys": {
       "version": "1.0.0",
       "integrity": "sha1-FC0RHzpuPa6PSpr9d9RYVbWpzOM=",
       "dev": true
     },
+    "jquery": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
+      "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
+    },
     "js-base64": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
       "dev": true
     },
+    "object-path": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/object-path/-/object-path-0.11.4.tgz",
+      "integrity": "sha1-NwrnUvvzfePqcKhhwju6iRVpGUk="
+    },
     "object-visit": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
-      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
-      "dev": true
+      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo="
     },
     "restore-cursor": {
       "version": "2.0.0",
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-      "dev": true
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
     },
     "schema-utils": {
       "version": "0.4.7",
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz",
       "integrity": "sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==",
-      "dev": true,
       "requires": {
         "atob": "^2.1.1",
         "decode-uri-component": "^0.2.0",
     "source-map-url": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
-      "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
-      "dev": true
+      "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM="
     },
     "spdx-correct": {
       "version": "3.1.0",
         }
       }
     },
+    "stylus": {
+      "version": "0.54.7",
+      "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.7.tgz",
+      "integrity": "sha512-Yw3WMTzVwevT6ZTrLCYNHAFmanMxdylelL3hkWNgPMeTCpMwpV3nXjpOHuBXtFv7aiO2xRuQS6OoAdgkNcSNug==",
+      "requires": {
+        "css-parse": "~2.0.0",
+        "debug": "~3.1.0",
+        "glob": "^7.1.3",
+        "mkdirp": "~0.5.x",
+        "safer-buffer": "^2.1.2",
+        "sax": "~1.2.4",
+        "semver": "^6.0.0",
+        "source-map": "^0.7.3"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        },
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
+        }
+      }
+    },
     "stylus-loader": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/stylus-loader/-/stylus-loader-3.0.2.tgz",
     "urix": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
-      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=",
-      "dev": true
+      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI="
     },
     "url": {
       "version": "0.11.0",

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",

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;

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/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/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/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/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',