Update public/favicon.ico, public/index.html, src/App.vue, src/background.js,...

Update public/favicon.ico, public/index.html, src/App.vue, src/background.js, src/main.js, src/assets/css/tailwind.css, src/components/Dashboard.vue, src/components/Footer.vue, src/components/Navbar.vue, src/components/Sidebar.vue, src/pages/Account.vue, src/pages/all.vue, src/pages/Anomalies.vue, src/pages/BackedupFiles.vue, src/pages/DIDcreation.vue, src/pages/FileSharing.vue, src/pages/Home.vue, src/pages/Logs.vue, src/pages/NewFileUpload.vue, src/pages/NMS.vue, src/pages/UserLog.vue, src/pages/Verifier.vue, src/pages/VerifyDID.vue, src/store/index.js, vue.config.js, tailwind.js, postcss.config.js, package.json, pnpm-lock.yaml, babel.config.js

Update public/favicon.ico, public/index.html, src/App.vue, src/background.js,...
feb7b76e · Ramaguru Radhakrishnan · 19c8a04f · feb7b76e · feb7b76e · feb7b76e
Commit feb7b76e authored Feb 14, 2022 by Ramaguru Radhakrishnan
--- a/babel.config.js
+++ b/babel.config.js
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/package.json
+++ b/package.json
+{
+  "name": "WAMPAC",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve --port 9000",
+    "build": "vue-cli-service build --port 9000",
+    "lint": "vue-cli-service lint",
+    "electron:build": "vue-cli-service electron:build",
+    "electron:serve": "vue-cli-service electron:serve",
+    "postinstall": "electron-builder install-app-deps",
+    "postuninstall": "electron-builder install-app-deps"
+  },
+  "main": "background.js",
+  "dependencies": {
+    "axios": "^0.21.0",
+    "chart.js": "^2.9.3",
+    "core-js": "^3.6.4",
+    "easy-circular-progress": "^1.0.4",
+    "v-file-upload": "^3.1.7",
+    "vue": "^2.6.11",
+    "vue-axios-cors": "^1.0.1",
+    "vue-chartjs": "^3.5.0",
+    "vue-clipboard2": "^0.3.1",
+    "vue-good-table": "^2.21.3",
+    "vue-js-modal": "^2.0.0-rc.6",
+    "vue-notification": "^1.3.20",
+    "vue-over-body": "^0.0.5",
+    "vue-picture-input": "^2.1.6",
+    "vue-progress-circle": "^1.1.2",
+    "vue-progress-path": "^0.0.2",
+    "vue-promise-dialogs": "^1.0.2",
+    "vue-router": "^3.1.5",
+    "vue-suggestion": "^1.1.0",
+    "vue2-circle-progress": "^1.2.3",
+    "vuejs-smart-table": "^0.0.7",
+    "vuex": "^3.1.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.2.0",
+    "@vue/cli-plugin-eslint": "^4.2.0",
+    "@vue/cli-service": "^4.2.0",
+    "babel-eslint": "^10.0.3",
+    "electron": "^9.0.0",
+    "electron-devtools-installer": "^3.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.1.2",
+    "tailwindcss": "^1.2.0",
+    "vue-cli-plugin-electron-builder": "~2.0.0-rc.5",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {
+      "no-unused-vars": "off"
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.js
+++ b/postcss.config.js
+module.exports = {
+  "plugins": [
+    require('tailwindcss')('tailwind.js'),
+    require('autoprefixer')(),
+  ]
+}
\ No newline at end of file
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'app'
+}
+</script>
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
+@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+    font-family: Poppins, sans-serif;
+}
+
+body::-webkit-scrollbar {
+    display: none;
+}
+
+.overlay {
+    position: relative; 
+}
+
+/* 1024 -1 so it doesnt show when it hits 1024px */
+@media only screen and (max-width: 1023px) {
+    .overlay:after {
+        content: " ";
+        z-index: 29;
+        display: block;
+        height: 100%;
+        top: 80px;
+        left: 0;
+        right: 0;
+        background: rgba(0, 0, 0, 0.5);
+        pointer-events: none;
+        position: fixed;
+    }
+}
\ No newline at end of file
--- a/src/background.js
+++ b/src/background.js
+'use strict'
+
+import { app, protocol, BrowserWindow } from 'electron'
+import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
+import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
+const isDevelopment = process.env.NODE_ENV !== 'production'
+
+// Scheme must be registered before the app is ready
+protocol.registerSchemesAsPrivileged([
+  { scheme: 'app', privileges: { secure: true, standard: true } }
+])
+
+async function createWindow() {
+  // Create the browser window.
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      // Use pluginOptions.nodeIntegration, leave this alone
+      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
+      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
+    }
+  })
+
+  if (process.env.WEBPACK_DEV_SERVER_URL) {
+    // Load the url of the dev server if in development mode
+    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
+    if (!process.env.IS_TEST) win.webContents.openDevTools()
+  } else {
+    createProtocol('app')
+    // Load the index.html when not in development
+    win.loadURL('app://./index.html')
+  }
+}
+
+// Quit when all windows are closed.
+app.on('window-all-closed', () => {
+  // On macOS it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  // On macOS it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (BrowserWindow.getAllWindows().length === 0) createWindow()
+})
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', async () => {
+  if (isDevelopment && !process.env.IS_TEST) {
+    // Install Vue Devtools
+    try {
+      await installExtension(VUEJS_DEVTOOLS)
+    } catch (e) {
+      console.error('Vue Devtools failed to install:', e.toString())
+    }
+  }
+  createWindow()
+})
+
+// Exit cleanly on request from parent process in development mode.
+if (isDevelopment) {
+  if (process.platform === 'win32') {
+    process.on('message', (data) => {
+      if (data === 'graceful-exit') {
+        app.quit()
+      }
+    })
+  } else {
+    process.on('SIGTERM', () => {
+      app.quit()
+    })
+  }
+}
--- a/src/components/Dashboard.vue
+++ b/src/components/Dashboard.vue
+<template>
+  <div class="leading-normal tracking-normal" id="main-body">
+    <div class="flex flex-wrap">
+
+      <Sidebar />
+
+      <div class="w-full bg-gray-100 pl-0 lg:pl-64 min-h-screen" :class="sideBarOpen ? 'overlay' : ''" id="main-content">
+
+        <Navbar />
+
+        <div class="p-6 bg-gray-100 mb-20">
+          <router-view />
+        </div>
+
+        <Footer />
+
+      </div>
+    </div>
+  </div>
+</template>
+
+// TODO: HIDE SIDEBAR
+
+<script>
+import { mapState } from 'vuex'
+
+import Sidebar from './Sidebar'
+import Navbar from './Navbar'
+import Footer from './Footer'
+
+export default {
+  name: 'Dashboard',
+  computed: {
+    ...mapState(['sideBarOpen'])
+  },
+  components: {
+    Sidebar,
+    Navbar,
+    Footer
+  }
+}
+</script>
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
+<template>
+    <div class="w-full border-t-2 px-8 py-6 lg:flex justify-between items-center">
+        <!-- <p class="mb-2 lg:mb-0">© Copyright 2020 Ensurity</p> -->
+
+        <div class="flex">
+            <!-- <a href="#" class="mr-6 hover:text-gray-900">Terms of Use</a>
+            <a href="#" class="mr-6 hover:text-gray-900">Privacy Policy</a> -->
+            <!-- <a href="#" class="hover:text-gray-900">About WAMPAC</a> -->
+        </div>
+    </div>
+</template>
+
+// <script>
+// export default {
+//     name: 'Footer'
+// }
+// </script>
\ No newline at end of file
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
+<template>
+    <div class="sticky top-0 z-40">
+            <div class="w-full h-20 px-6 bg-gray-100 border-b flex items-center justify-between">
+
+              <!-- left navbar -->
+              <div class="flex">
+
+                <!-- mobile hamburger -->
+                <div class="inline-block lg:hidden flex items-center mr-4">
+                  <button class="hover:text-blue-500 hover:border-white focus:outline-none navbar-burger" @click="toggleSidebar()">
+                    <svg class="h-5 w-5" v-bind:style="{ fill: 'black' }" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
+                  </button>
+                </div>
+
+                <!-- search bar -->
+                <div class="relative text-gray-600">
+                  <input type="search" name="serch" placeholder="Search logs" class="bg-white h-10 w-full xl:w-64 px-5 rounded-lg border text-sm focus:outline-none">
+                  <button type="submit" class="absolute right-0 top-0 mt-3 mr-4">
+                    <svg class="h-4 w-4 fill-current" 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 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve" width="512px" height="512px">
+                      <path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"/>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+
+              <!-- right navbar -->
+              <div class="flex items-center relative">
+                <li class="border-yellow-200 bg-yellow-200 inline-block -ml-3">
+                <router-link to="/dashboard/logs" class="text-xs h-4 w-45 flex items-center justify-center overflow-hidden text-grey">
+                   Last Logged on {{lastUpdateTime}} 
+                </router-link>
+            </li>
+            <div class="px-4">
+                <button v-on:click="syncButton(), fetchingStats = true" class="center bg-blue-400 hover:bg-blue-600 focus:outline-none rounded-lg px-2 text-white font-semibold shadow">{{syncMessage}}</button>
+            </div>    
+                <!--svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="fill-current mr-3 hover:text-blue-500"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"/></svg-->
+                <!-- <img src="https://a7sas.net/wp-content/uploads/2019/07/4060.jpeg" class="w-12 h-12 rounded-full shadow-lg" @click="dropDownOpen = !dropDownOpen"> -->
+                <a @click="dropDownOpen = !dropDownOpen" class="hover:text-gray-900">Profile</a>
+              </div>
+
+            </div>
+
+            <!-- dropdown menu -->
+            <div class="absolute bg-gray-100 border border-t-0 shadow-xl text-gray-700 rounded-b-lg w-48 bottom-10 right-0 mr-6" :class="dropDownOpen ? '' : 'hidden'">
+                <router-link to="/dashboard/account"><a href="#" class="block px-4 py-2 hover:bg-gray-200">Account</a></router-link>
+                <a v-on:click="shutdownWAMPAC()" class="block px-4 py-2 hover:bg-gray-200">Shutdown</a>
+            </div>
+            <!-- dropdown menu end -->
+
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import axios from 'axios'
+export default {
+    name: 'Navbar',
+    computed: {
+        ...mapState(['sideBarOpen'])
+    },
+    data() {
+        return {
+            dropDownOpen: false,
+            syncMessage: 'sync',
+            lastUpdateTime: "",
+        }
+    },
+    methods: {
+      syncButton: function () {
+
+        console.log("SYNC STARTED..")
+    
+        axios.get('http://localhost:1898/sync')
+      .then((response) => {
+        console.log(response);
+        this.syncMessage = response.data.data.payload
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+    },
+
+    lastUpdate: function () {
+    
+        axios.get('http://localhost:1898/getLastLogTime')
+      .then((response) => {
+        console.log(response);
+        this.lastUpdateTime = response.data.data
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+    },
+
+        toggleSidebar() {
+            this.$store.dispatch('toggleSidebar')
+        },
+        shutdownWAMPAC: function () {
+    
+          console.log("Shutting Down WAMPAC")
+
+          axios.get('http://localhost:1898/shutdown')
+        .then((response) => {
+
+          console.log(response);
+          this.$router.push({path: '/shutdown'})
+
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+      }
+    },
+    beforeMount() {
+      this.lastUpdate()
+    },
+}
+</script>
\ No newline at end of file
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
+<template>
+    <!-- give the sidebar z-50 class so its higher than the navbar if you want to see the logo -->
+    <!-- you will need to add a little "X" button next to the logo in order to close it though -->
+    <div class="w-1/2 md:w-1/3 lg:w-64 fixed md:top-0 md:left-0 h-screen lg:block bg-gray-100 border-r z-30" :class="sideBarOpen ? '' : 'hidden'" id="main-nav">
+
+          <div class="w-full h-20 border-b flex px-4 items-center mb-8">
+            <p class="font-semibold text-3xl text-blue-400 pl-4">WAMPAC</p>
+          </div>
+
+          <div class="mb-4 px-4">
+            <p class="pl-4 text-sm font-semibold mb-1">MAIN</p>
+            <div class="w-full flex items-center text-blue-400 h-10 pl-4 bg-gray-200 hover:bg-gray-200 rounded-lg cursor-pointer">
+              <svg class="h-6 w-6 fill-current mr-2" viewBox="0 0 20 20">
+                <path d="M18.121,9.88l-7.832-7.836c-0.155-0.158-0.428-0.155-0.584,0L1.842,9.913c-0.262,0.263-0.073,0.705,0.292,0.705h2.069v7.042c0,0.227,0.187,0.414,0.414,0.414h3.725c0.228,0,0.414-0.188,0.414-0.414v-3.313h2.483v3.313c0,0.227,0.187,0.414,0.413,0.414h3.726c0.229,0,0.414-0.188,0.414-0.414v-7.042h2.068h0.004C18.331,10.617,18.389,10.146,18.121,9.88 M14.963,17.245h-2.896v-3.313c0-0.229-0.186-0.415-0.414-0.415H8.342c-0.228,0-0.414,0.187-0.414,0.415v3.313H5.032v-6.628h9.931V17.245z M3.133,9.79l6.864-6.868l6.867,6.868H3.133z"></path>
+              </svg>
+              <router-link to="/dashboard/home"><span class="text-gray-700">Home</span></router-link>
+            </div>
+            <!--div class="w-full flex items-center text-blue-400 h-10 pl-4 hover:bg-gray-200 rounded-lg cursor-pointer">
+              <svg class="h-6 w-6 fill-current mr-2" viewBox="0 0 20 20">
+                <path d="M17.283,5.549h-5.26V4.335c0-0.222-0.183-0.404-0.404-0.404H8.381c-0.222,0-0.404,0.182-0.404,0.404v1.214h-5.26c-0.223,0-0.405,0.182-0.405,0.405v9.71c0,0.223,0.182,0.405,0.405,0.405h14.566c0.223,0,0.404-0.183,0.404-0.405v-9.71C17.688,5.731,17.506,5.549,17.283,5.549 M8.786,4.74h2.428v0.809H8.786V4.74z M16.879,15.26H3.122v-4.046h5.665v1.201c0,0.223,0.182,0.404,0.405,0.404h1.618c0.222,0,0.405-0.182,0.405-0.404v-1.201h5.665V15.26z M9.595,9.583h0.81v2.428h-0.81V9.583zM16.879,10.405h-5.665V9.19c0-0.222-0.183-0.405-0.405-0.405H9.191c-0.223,0-0.405,0.183-0.405,0.405v1.215H3.122V6.358h13.757V10.405z"></path>
+              </svg>
+              <router-link to="/dashboard/files"><span class="text-gray-700">WAMPAC Drive</span></router-link>
+            </div-->
+            <div v-if="!isVerifier" class="w-full flex items-center text-blue-400 h-10 pl-4 hover:bg-gray-200 rounded-lg cursor-pointer">
+              <svg class="h-6 w-6 fill-current mr-2" viewBox="0 0 20 20">
+                <path d="M17.498,11.697c-0.453-0.453-0.704-1.055-0.704-1.697c0-0.642,0.251-1.244,0.704-1.697c0.069-0.071,0.15-0.141,0.257-0.22c0.127-0.097,0.181-0.262,0.137-0.417c-0.164-0.558-0.388-1.093-0.662-1.597c-0.075-0.141-0.231-0.22-0.391-0.199c-0.13,0.02-0.238,0.027-0.336,0.027c-1.325,0-2.401-1.076-2.401-2.4c0-0.099,0.008-0.207,0.027-0.336c0.021-0.158-0.059-0.316-0.199-0.391c-0.503-0.274-1.039-0.498-1.597-0.662c-0.154-0.044-0.32,0.01-0.416,0.137c-0.079,0.106-0.148,0.188-0.22,0.257C11.244,2.956,10.643,3.207,10,3.207c-0.642,0-1.244-0.25-1.697-0.704c-0.071-0.069-0.141-0.15-0.22-0.257C7.987,2.119,7.821,2.065,7.667,2.109C7.109,2.275,6.571,2.497,6.07,2.771C5.929,2.846,5.85,3.004,5.871,3.162c0.02,0.129,0.027,0.237,0.027,0.336c0,1.325-1.076,2.4-2.401,2.4c-0.098,0-0.206-0.007-0.335-0.027C3.001,5.851,2.845,5.929,2.77,6.07C2.496,6.572,2.274,7.109,2.108,7.667c-0.044,0.154,0.01,0.32,0.137,0.417c0.106,0.079,0.187,0.148,0.256,0.22c0.938,0.936,0.938,2.458,0,3.394c-0.069,0.072-0.15,0.141-0.256,0.221c-0.127,0.096-0.181,0.262-0.137,0.416c0.166,0.557,0.388,1.096,0.662,1.596c0.075,0.143,0.231,0.221,0.392,0.199c0.129-0.02,0.237-0.027,0.335-0.027c1.325,0,2.401,1.076,2.401,2.402c0,0.098-0.007,0.205-0.027,0.334C5.85,16.996,5.929,17.154,6.07,17.23c0.501,0.273,1.04,0.496,1.597,0.66c0.154,0.047,0.32-0.008,0.417-0.137c0.079-0.105,0.148-0.186,0.22-0.256c0.454-0.453,1.055-0.703,1.697-0.703c0.643,0,1.244,0.25,1.697,0.703c0.071,0.07,0.141,0.15,0.22,0.256c0.073,0.098,0.188,0.152,0.307,0.152c0.036,0,0.073-0.004,0.109-0.016c0.558-0.164,1.096-0.387,1.597-0.66c0.141-0.076,0.22-0.234,0.199-0.393c-0.02-0.129-0.027-0.236-0.027-0.334c0-1.326,1.076-2.402,2.401-2.402c0.098,0,0.206,0.008,0.336,0.027c0.159,0.021,0.315-0.057,0.391-0.199c0.274-0.5,0.496-1.039,0.662-1.596c0.044-0.154-0.01-0.32-0.137-0.416C17.648,11.838,17.567,11.77,17.498,11.697 M16.671,13.334c-0.059-0.002-0.114-0.002-0.168-0.002c-1.749,0-3.173,1.422-3.173,3.172c0,0.053,0.002,0.109,0.004,0.166c-0.312,0.158-0.64,0.295-0.976,0.406c-0.039-0.045-0.077-0.086-0.115-0.123c-0.601-0.6-1.396-0.93-2.243-0.93s-1.643,0.33-2.243,0.93c-0.039,0.037-0.077,0.078-0.116,0.123c-0.336-0.111-0.664-0.248-0.976-0.406c0.002-0.057,0.004-0.113,0.004-0.166c0-1.75-1.423-3.172-3.172-3.172c-0.054,0-0.11,0-0.168,0.002c-0.158-0.312-0.293-0.639-0.405-0.975c0.044-0.039,0.085-0.078,0.124-0.115c1.236-1.236,1.236-3.25,0-4.486C3.009,7.719,2.969,7.68,2.924,7.642c0.112-0.336,0.247-0.664,0.405-0.976C3.387,6.668,3.443,6.67,3.497,6.67c1.75,0,3.172-1.423,3.172-3.172c0-0.054-0.002-0.11-0.004-0.168c0.312-0.158,0.64-0.293,0.976-0.405C7.68,2.969,7.719,3.01,7.757,3.048c0.6,0.6,1.396,0.93,2.243,0.93s1.643-0.33,2.243-0.93c0.038-0.039,0.076-0.079,0.115-0.123c0.336,0.112,0.663,0.247,0.976,0.405c-0.002,0.058-0.004,0.114-0.004,0.168c0,1.749,1.424,3.172,3.173,3.172c0.054,0,0.109-0.002,0.168-0.004c0.158,0.312,0.293,0.64,0.405,0.976c-0.045,0.038-0.086,0.077-0.124,0.116c-0.6,0.6-0.93,1.396-0.93,2.242c0,0.847,0.33,1.645,0.93,2.244c0.038,0.037,0.079,0.076,0.124,0.115C16.964,12.695,16.829,13.021,16.671,13.334 M10,5.417c-2.528,0-4.584,2.056-4.584,4.583c0,2.529,2.056,4.584,4.584,4.584s4.584-2.055,4.584-4.584C14.584,7.472,12.528,5.417,10,5.417 M10,13.812c-2.102,0-3.812-1.709-3.812-3.812c0-2.102,1.71-3.812,3.812-3.812c2.102,0,3.812,1.71,3.812,3.812C13.812,12.104,12.102,13.812,10,13.812"></path>
+              </svg>
+              <router-link to="/dashboard/backup"><span class="text-gray-700">Backed Up Files</span></router-link>
+            </div>
+            <!-- <div class="w-full flex items-center text-blue-400 h-10 pl-4 hover:bg-gray-200 rounded-lg cursor-pointer">
+              <svg class="h-6 w-6 fill-current mr-2" viewBox="0 0 20 20">
+                <path d="M16.557,4.467h-1.64v-0.82c0-0.225-0.183-0.41-0.409-0.41c-0.226,0-0.41,0.185-0.41,0.41v0.82H5.901v-0.82c0-0.225-0.185-0.41-0.41-0.41c-0.226,0-0.41,0.185-0.41,0.41v0.82H3.442c-0.904,0-1.64,0.735-1.64,1.639v9.017c0,0.904,0.736,1.64,1.64,1.64h13.114c0.904,0,1.64-0.735,1.64-1.64V6.106C18.196,5.203,17.461,4.467,16.557,4.467 M17.377,15.123c0,0.453-0.366,0.819-0.82,0.819H3.442c-0.453,0-0.82-0.366-0.82-0.819V8.976h14.754V15.123z M17.377,8.156H2.623V6.106c0-0.453,0.367-0.82,0.82-0.82h1.639v1.23c0,0.225,0.184,0.41,0.41,0.41c0.225,0,0.41-0.185,0.41-0.41v-1.23h8.196v1.23c0,0.225,0.185,0.41,0.41,0.41c0.227,0,0.409-0.185,0.409-0.41v-1.23h1.64c0.454,0,0.82,0.367,0.82,0.82V8.156z"></path>
+              </svg>
+              <span class="text-gray-700">Calender</span>
+            </div> -->
+          </div>
+
+          <div class="mb-4 px-4">
+            <p class="pl-4 text-sm font-semibold mb-1">SYSTEM</p>
+            <div class="w-full flex items-center text-blue-400 h-10 pl-4 hover:bg-gray-200 rounded-lg cursor-pointer">
+              <svg class="h-6 w-6 fill-current mr-2" viewBox="0 0 20 20">
+              <path d="M14.613,10c0,0.23-0.188,0.419-0.419,0.419H10.42v3.774c0,0.23-0.189,0.42-0.42,0.42s-0.419-0.189-0.419-0.42v-3.774H5.806c-0.23,0-0.419-0.189-0.419-0.419s0.189-0.419,0.419-0.419h3.775V5.806c0-0.23,0.189-0.419,0.419-0.419s0.42,0.189,0.42,0.419v3.775h3.774C14.425,9.581,14.613,9.77,14.613,10 M17.969,10c0,4.401-3.567,7.969-7.969,7.969c-4.402,0-7.969-3.567-7.969-7.969c0-4.402,3.567-7.969,7.969-7.969C14.401,2.031,17.969,5.598,17.969,10 M17.13,10c0-3.932-3.198-7.13-7.13-7.13S2.87,6.068,2.87,10c0,3.933,3.198,7.13,7.13,7.13S17.13,13.933,17.13,10"></path>
+              </svg>
+             <router-link to="/dashboard/NMS"><span class="text-gray-700">Monitoring</span></router-link>
+            </div>
+            <div v-if="!isVerifier" class="w-full flex items-center text-blue-400 h-10 pl-4 hover:bg-gray-200 rounded-lg cursor-pointer">
+              <svg class="h-6 w-6 fill-current mr-2" viewBox="0 0 20 20">
+                <path d="M15.396,2.292H4.604c-0.212,0-0.385,0.174-0.385,0.386v14.646c0,0.212,0.173,0.385,0.385,0.385h10.792c0.211,0,0.385-0.173,0.385-0.385V2.677C15.781,2.465,15.607,2.292,15.396,2.292 M15.01,16.938H4.99v-2.698h1.609c0.156,0.449,0.586,0.771,1.089,0.771c0.638,0,1.156-0.519,1.156-1.156s-0.519-1.156-1.156-1.156c-0.503,0-0.933,0.321-1.089,0.771H4.99v-3.083h1.609c0.156,0.449,0.586,0.771,1.089,0.771c0.638,0,1.156-0.518,1.156-1.156c0-0.638-0.519-1.156-1.156-1.156c-0.503,0-0.933,0.322-1.089,0.771H4.99V6.531h1.609C6.755,6.98,7.185,7.302,7.688,7.302c0.638,0,1.156-0.519,1.156-1.156c0-0.638-0.519-1.156-1.156-1.156c-0.503,0-0.933,0.322-1.089,0.771H4.99V3.062h10.02V16.938z M7.302,13.854c0-0.212,0.173-0.386,0.385-0.386s0.385,0.174,0.385,0.386s-0.173,0.385-0.385,0.385S7.302,14.066,7.302,13.854 M7.302,10c0-0.212,0.173-0.385,0.385-0.385S8.073,9.788,8.073,10s-0.173,0.385-0.385,0.385S7.302,10.212,7.302,10 M7.302,6.146c0-0.212,0.173-0.386,0.385-0.386s0.385,0.174,0.385,0.386S7.899,6.531,7.688,6.531S7.302,6.358,7.302,6.146"></path>
+              </svg>
+              <router-link to="/dashboard/logs"><span class="text-gray-700">Logs</span></router-link>
+            </div>
+            <div class="w-full flex items-center text-blue-400 h-10 pl-4 hover:bg-gray-200 rounded-lg cursor-pointer">
+              <svg class="h-6 w-6 fill-current mr-2" viewBox="0 0 20 20">
+                <path d="M15.396,2.292H4.604c-0.212,0-0.385,0.174-0.385,0.386v14.646c0,0.212,0.173,0.385,0.385,0.385h10.792c0.211,0,0.385-0.173,0.385-0.385V2.677C15.781,2.465,15.607,2.292,15.396,2.292 M15.01,16.938H4.99v-2.698h1.609c0.156,0.449,0.586,0.771,1.089,0.771c0.638,0,1.156-0.519,1.156-1.156s-0.519-1.156-1.156-1.156c-0.503,0-0.933,0.321-1.089,0.771H4.99v-3.083h1.609c0.156,0.449,0.586,0.771,1.089,0.771c0.638,0,1.156-0.518,1.156-1.156c0-0.638-0.519-1.156-1.156-1.156c-0.503,0-0.933,0.322-1.089,0.771H4.99V6.531h1.609C6.755,6.98,7.185,7.302,7.688,7.302c0.638,0,1.156-0.519,1.156-1.156c0-0.638-0.519-1.156-1.156-1.156c-0.503,0-0.933,0.322-1.089,0.771H4.99V3.062h10.02V16.938z M7.302,13.854c0-0.212,0.173-0.386,0.385-0.386s0.385,0.174,0.385,0.386s-0.173,0.385-0.385,0.385S7.302,14.066,7.302,13.854 M7.302,10c0-0.212,0.173-0.385,0.385-0.385S8.073,9.788,8.073,10s-0.173,0.385-0.385,0.385S7.302,10.212,7.302,10 M7.302,6.146c0-0.212,0.173-0.386,0.385-0.386s0.385,0.174,0.385,0.386S7.899,6.531,7.688,6.531S7.302,6.358,7.302,6.146"></path>
+              </svg>
+              <router-link to="/dashboard/anomalies"><span class="text-gray-700">Anomalies</span></router-link>
+            </div>
+          </div>
+
+          <!-- <div class="mb-4 px-4">
+            <p class="pl-4 text-sm font-semibold mb-1">ADMIN</p> -->
+            <!-- <div class="w-full flex items-center text-blue-400 h-10 pl-4 hover:bg-gray-200 rounded-lg cursor-pointer">
+              <svg class="h-6 w-6 fill-current mr-2" viewBox="0 0 20 20">
+                <path d="M17.592,8.936l-6.531-6.534c-0.593-0.631-0.751-0.245-0.751,0.056l0.002,2.999L5.427,9.075H2.491c-0.839,0-0.162,0.901-0.311,0.752l3.683,3.678l-3.081,3.108c-0.17,0.171-0.17,0.449,0,0.62c0.169,0.17,0.448,0.17,0.618,0l3.098-3.093l3.675,3.685c-0.099-0.099,0.773,0.474,0.773-0.296v-2.965l3.601-4.872l2.734-0.005C17.73,9.688,18.326,9.669,17.592,8.936 M3.534,9.904h1.906l4.659,4.66v1.906L3.534,9.904z M10.522,13.717L6.287,9.48l4.325-3.124l3.088,3.124L10.522,13.717z M14.335,8.845l-3.177-3.177V3.762l5.083,5.083H14.335z"></path>
+              </svg>
+              <span class="text-gray-700">Notices</span>
+            </div>
+            <div class="w-full flex items-center text-blue-400 h-10 pl-4 hover:bg-gray-200 rounded-lg cursor-pointer">
+              <svg class="h-6 w-6 fill-current mr-2" viewBox="0 0 20 20">
+                <path d="M6.176,7.241V6.78c0-0.221-0.181-0.402-0.402-0.402c-0.221,0-0.403,0.181-0.403,0.402v0.461C4.79,7.416,4.365,7.955,4.365,8.591c0,0.636,0.424,1.175,1.006,1.35v3.278c0,0.222,0.182,0.402,0.403,0.402c0.222,0,0.402-0.181,0.402-0.402V9.941c0.582-0.175,1.006-0.714,1.006-1.35C7.183,7.955,6.758,7.416,6.176,7.241 M5.774,9.195c-0.332,0-0.604-0.272-0.604-0.604c0-0.332,0.272-0.604,0.604-0.604c0.332,0,0.604,0.272,0.604,0.604C6.377,8.923,6.105,9.195,5.774,9.195 M10.402,10.058V6.78c0-0.221-0.181-0.402-0.402-0.402c-0.222,0-0.402,0.181-0.402,0.402v3.278c-0.582,0.175-1.006,0.714-1.006,1.35c0,0.637,0.424,1.175,1.006,1.351v0.461c0,0.222,0.181,0.402,0.402,0.402c0.221,0,0.402-0.181,0.402-0.402v-0.461c0.582-0.176,1.006-0.714,1.006-1.351C11.408,10.772,10.984,10.233,10.402,10.058M10,12.013c-0.333,0-0.604-0.272-0.604-0.604S9.667,10.805,10,10.805c0.332,0,0.604,0.271,0.604,0.604S10.332,12.013,10,12.013M14.629,8.448V6.78c0-0.221-0.182-0.402-0.403-0.402c-0.221,0-0.402,0.181-0.402,0.402v1.668c-0.581,0.175-1.006,0.714-1.006,1.35c0,0.636,0.425,1.176,1.006,1.351v2.07c0,0.222,0.182,0.402,0.402,0.402c0.222,0,0.403-0.181,0.403-0.402v-2.07c0.581-0.175,1.006-0.715,1.006-1.351C15.635,9.163,15.21,8.624,14.629,8.448 M14.226,10.402c-0.331,0-0.604-0.272-0.604-0.604c0-0.332,0.272-0.604,0.604-0.604c0.332,0,0.604,0.272,0.604,0.604C14.83,10.13,14.558,10.402,14.226,10.402 M17.647,3.962H2.353c-0.221,0-0.402,0.181-0.402,0.402v11.27c0,0.222,0.181,0.402,0.402,0.402h15.295c0.222,0,0.402-0.181,0.402-0.402V4.365C18.05,4.144,17.869,3.962,17.647,3.962 M17.245,15.232H2.755V4.768h14.49V15.232z"></path>
+              </svg>
+              <span class="text-gray-700">Controls</span>
+            </div> -->
+            <!-- <div class="w-full flex items-center text-blue-400 h-10 pl-4 hover:bg-gray-200 rounded-lg cursor-pointer">
+              <svg class="h-6 w-6 fill-current mr-2" viewBox="0 0 20 20">
+                <path d="M18.303,4.742l-1.454-1.455c-0.171-0.171-0.475-0.171-0.646,0l-3.061,3.064H2.019c-0.251,0-0.457,0.205-0.457,0.456v9.578c0,0.251,0.206,0.456,0.457,0.456h13.683c0.252,0,0.457-0.205,0.457-0.456V7.533l2.144-2.146C18.481,5.208,18.483,4.917,18.303,4.742 M15.258,15.929H2.476V7.263h9.754L9.695,9.792c-0.057,0.057-0.101,0.13-0.119,0.212L9.18,11.36h-3.98c-0.251,0-0.457,0.205-0.457,0.456c0,0.253,0.205,0.456,0.457,0.456h4.336c0.023,0,0.899,0.02,1.498-0.127c0.312-0.077,0.55-0.137,0.55-0.137c0.08-0.018,0.155-0.059,0.212-0.118l3.463-3.443V15.929z M11.241,11.156l-1.078,0.267l0.267-1.076l6.097-6.091l0.808,0.808L11.241,11.156z"></path>
+              </svg>
+              <router-link to="/dashboard/verification"><span class="text-gray-700">Identity Verification</span></router-link>
+            </div> -->
+
+          <!-- </div> -->
+
+        </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import axios from 'axios'
+
+
+export default {
+    name: 'Sidebar',
+    data() {
+    return {
+
+      isVerifier:false,
+    }
+  },
+  methods:{
+    checkRole: function() {
+      axios.get('http://localhost:1898/checkRole')
+    .then((response) => {
+      
+      if(response.data.data.payload == 'Verifier') {
+        this.isVerifier = true
+      }
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+  },
+    computed: {
+        ...mapState(['sideBarOpen'])
+    },
+    beforeMount() {
+      this.checkRole()
+    }
+}
+</script>
\ No newline at end of file
--- a/src/main.js
+++ b/src/main.js
+import Vue from 'vue'
+import App from './App.vue'
+import Router from 'vue-router'
+
+import Dashboard from '@/components/Dashboard'
+import DashboardHome from '@/pages/Home'
+import DashboardVerifier from '@/pages/Verifier'
+import DIDcreation from '@/pages/DIDcreation'
+import FileSharing from '@/pages/FileSharing'
+import BackedupFiles from '@/pages/BackedupFiles'
+import VerifyDID from '@/pages/VerifyDID'
+import NMS from '@/pages/NMS'
+import Logs from '@/pages/Logs'
+import UserLog from '@/pages/UserLog'
+import Account from '@/pages/Account'
+import NewFileUpload from '@/pages/NewFileUpload'
+import Anomalies from '@/pages/Anomalies'
+
+import store from './store'
+
+import '@/assets/css/tailwind.css'
+
+
+Vue.config.productionTip = false
+
+Vue.use(Router)
+
+const routes = [
+  { path: '/', redirect: { name: 'DashboardHome' } },
+  { path: '/create-new-DID', name: 'DIDcreation', component: DIDcreation },
+  { path: '/verification', name: 'VerifyDID', component: VerifyDID },
+  { path: '/dashboard', component: Dashboard, children: [
+      { path: '/', redirect: { name: 'DashboardHome' } },
+      { path: 'home', name: 'DashboardHome', component: DashboardHome },
+      { path: 'verifier', name: 'DashboardVerifier', component: DashboardVerifier },
+      { path: 'NMS', name: 'NMS', component: NMS },
+      { path: 'logs', name: 'logs', component: Logs },
+      { path: 'user-log', name: 'UserLog', component: UserLog, props: true },
+      { path: 'anomalies', name: 'anomalies', component: Anomalies },
+      { path: 'files', name: 'FileSharing', component: FileSharing },
+      { path: 'backup', name: 'BackedupFiles', component: BackedupFiles },
+      { path: 'upload-file', name: 'NewFileUpload', component: NewFileUpload },
+      { path: 'account', name: 'Account', component: Account },
+    ]
+  },
+  { path: '/about', redirect: { name: 'DashboardHome' } }
+]
+
+const router = new Router({
+  mode: 'history',
+  routes
+})
+
+new Vue({
+  render: h => h(App),
+  router,
+  store
+}).$mount('#app')
+
--- a/src/pages/Account.vue
+++ b/src/pages/Account.vue
+<template>
+  <div id="Account">
+      <!-- breadcrumb -->
+            <nav class="text-sm font-semibold mb-6" aria-label="Breadcrumb">
+              <ol class="list-none p-0 inline-flex">
+                <li class="flex items-center text-blue-500">
+                  <a href="#" class="text-gray-700">Account</a>
+                  <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
+                </li>
+                <!-- <li class="flex items-center">
+                  <a href="#" class="text-gray-600"></a>
+                </li> -->
+              </ol>
+            </nav>
+            <!-- breadcrumb end -->
+
+            <div class="lg:flex justify-between items-center mb-6">
+              <p class="text-xl mb-2 lg:mb-0">Welcome, {{did}}</p>
+            </div>
+
+            <div class="flex flex-wrap -mx-3 mb-20">
+            </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+    name: 'DashboardHome',
+    data() {
+        return {
+
+          did: 0,
+        }
+    },
+    methods:{
+
+      checkStatus: function () {
+    
+      console.log("loading DID exists")
+
+      axios.get('http://localhost:1898/checkDidExists')
+    .then((response) => {
+
+      console.log(response);
+      if(response.data.data.payload == 'Failure'){
+        console.log("moving to create DID")
+        this.$router.push({path: '/create-new-DID'})
+        return;
+      } else {
+        console.log("loading DID verified")
+          axios.get('http://localhost:1898/checkDidVerified')
+          .then((response) => {
+            this.isVerified = response.data.data.payload
+            console.log(response);
+            if(response.data.data.payload == 'Failure'){
+              console.log("moving to create DID [check]")
+              this.$router.push({path: '/verification'})
+              return;
+            }
+          })
+          .catch(function (error) {
+            console.log(error);
+            this.$router.push({path: '/verification'})
+            return;
+          });
+      }
+    })
+    .catch(function (error) {
+      console.log(error);
+      this.$router.push({path: '/create-new-DID'})
+      return;
+    });
+
+    
+
+
+    axios.get('http://localhost:1898/checkRole')
+    .then((response) => {
+
+      console.log(response);
+      // this.myRole = response.data.data.payload
+    })
+    .catch(function (error) {
+      console.log(error);
+      // this.$router.push({path: '/create-new-DID'})
+    });
+    },
+
+      getAccountInfo: function () {
+    
+      console.log("loading getAccountInfo")
+
+      axios.get('http://localhost:1898/getAccountInfo')
+    .then((response) => {
+
+      console.log(response);
+      this.did = response.data.did
+
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+    },
+    
+    beforeMount() {
+      this.getAccountInfo()
+      this.checkStatus()
+    }
+}
+</script>
\ No newline at end of file
--- a/src/pages/Anomalies.vue
+++ b/src/pages/Anomalies.vue
+<template>
+  <div id="Anomalies">
+      <!-- breadcrumb -->
+            <nav class="text-sm font-semibold mb-6" aria-label="Breadcrumb">
+              <ol class="list-none p-0 inline-flex">
+                <li class="flex items-center text-blue-500">
+                  <a href="#" class="text-gray-700">System</a>
+                  <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
+                </li>
+                <li class="flex items-center">
+                  <a href="#" class="text-gray-600">Anomalies</a>
+                </li>
+                
+              </ol>
+            </nav>
+            <!-- breadcrumb end -->
+
+            <div class="lg:flex justify-between items-center mb-6">
+              <p class="text-2xl font-semibold mb-2 lg:mb-0">Anomalies</p>
+            </div>
+                <div v-for="sysAnomaly in sysAnomaly" :key="sysAnomaly">
+                <ul class="space_list w-full rounded-lg mt-2 mb-3 text-blue-800">
+                <li class="w-fill flex p-3 pl-3 bg-gray-200 hover:bg-gray-400 rounded-lg">
+                <div class="did font-semibold text-sm">{{ sysAnomaly.anomaly }} <p class="text-grey-700 font-semibold text-sm">  {{ sysAnomaly.did }}</p> <p class="text-red-500 font-semibold text-sm">  {{ sysAnomaly.timestamp }}</p> </div>
+                </li>
+                </ul>
+            </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import Vue from 'vue'
+import VModal from 'vue-js-modal'
+
+Vue.use(VModal, {
+  dynamicDefaults: {
+    draggable: true,
+    resizable: true,
+    height: 'auto'
+  }
+})
+
+export default {
+  name: 'Anomalies',
+  data() {
+    return {
+
+      sysAnomaly:[],
+    }
+  },
+  methods:{
+
+    userAnomaly: function () {
+
+      axios.get('http://localhost:1898/getAnomalyListUser')
+    .then((response) => {
+
+      console.log(response);
+      this.sysAnomaly = response.data.data
+
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+
+    verifierAnomaly: function () {
+
+      axios.get('http://localhost:1898/getAnomalyListVerifier')
+    .then((response) => {
+
+      console.log(response);
+      this.sysAnomaly = response.data.data
+
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+
+
+    checkStatus: function () {
+    
+      console.log("loading DID exists")
+
+      axios.get('http://localhost:1898/checkDidExists')
+    .then((response) => {
+
+      console.log(response);
+      if(response.data.data.payload == 'Failure'){
+        console.log("moving to create DID")
+        this.$router.push({path: '/create-new-DID'})
+        return;
+      } else {
+        console.log("loading DID verified")
+          axios.get('http://localhost:1898/checkDidVerified')
+          .then((response) => {
+            this.isVerified = response.data.data.payload
+            console.log(response);
+            if(response.data.data.payload == 'Failure'){
+              console.log("moving to create DID [check]")
+              this.$router.push({path: '/verification'})
+              return;
+            }
+            else {
+              this.checkRole()
+            }
+          })
+          .catch(function (error) {
+            console.log(error);
+            this.$router.push({path: '/verification'})
+            return;
+          });
+      }
+    })
+    .catch(function (error) {
+      console.log(error);
+      this.$router.push({path: '/create-new-DID'})
+      return;
+    });
+    },
+
+    checkRole: function() {
+      axios.get('http://localhost:1898/checkRole')
+    .then((response) => {
+      
+      if(response.data.data.payload != 'Verifier') {
+        console.log("USER DATA")
+        this.userAnomaly()
+      }
+      else {
+         console.log("VERIFIER DATA")
+         this.verifierAnomaly()
+      }
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+
+  },
+  beforeMount() {
+      this.checkStatus()
+    }
+}
+</script>
+
+<style>
+
+.center{
+  text-align: center;
+}
+ul {
+    list-style-type: none;
+}
+.element1 {
+  display:inline-block;margin-right:10px;
+}
+ul.space_list li { margin-bottom: 0.5em; }
+
+.pre-formatted {
+  white-space: pre;
+}
+
+</style>
\ No newline at end of file
--- a/src/pages/BackedupFiles.vue
+++ b/src/pages/BackedupFiles.vue
+<template>
+  <div id="BackedupFiles">
+      <!-- breadcrumb -->
+            <nav class="text-sm font-semibold mb-6" aria-label="Breadcrumb">
+              <ol class="list-none p-0 inline-flex">
+                <li class="flex items-center text-blue-500">
+                  <a href="#" class="text-gray-700">Files</a>
+                  <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
+                </li>
+                <li class="flex items-center">
+                  <a href="#" class="text-gray-600">Backup</a>
+                </li>
+              </ol>
+            </nav>
+            <!-- breadcrumb end -->
+
+            <div class="flex flex-wrap -mx-3">
+                <div class="w-full xl:w-1/2 px-3">
+                <p class="text-xl font-semibold mb-4">Already Backed Up Files</p>
+                <div class="px-10">
+                    <ul>
+                    <li v-for="filesBackedUp in filesBackedUp" :key="filesBackedUp">
+                    <div class="did text-lg">{{ filesBackedUp }}
+                    </div>
+                    <hr>
+                    </li>
+                    </ul>
+                    </div>
+                </div>
+                <div class="w-full xl:w-1/2 px-3">
+                <p class="text-xl font-semibold mb-4">Pending Files For Back Up</p>
+                <p class="text-sm mb-4">Maximum allowed file size is 1 MB</p>
+                <div class="w-full xl:w-1/2 px-3">
+                  <input type="file" id="file" ref="file" v-on:change="handleFileUpload()"/>
+                  <span class="p-40" v-if="showUpdating">
+                  <Progress strokeColor="#516091" value="87">
+                    <template v-slot:footer>
+                      <b>Backing up Selected File, Please wait..</b>
+                    </template>
+                  </Progress>
+                  </span>
+                <p class="text-gray-700 font-semibold text-xl center">{{updateResponse}}</p>
+                <div v-if="!showUpdating" class="w-full xl:w-1/2 px-3 py-10">
+                <button v-on:click="launchFileContract(), fetchingStats = true" class="center bg-green-500 hover:bg-green-600 focus:outline-none rounded-lg px-6 py-2 text-white font-semibold shadow">Backup File</button>
+                </div>
+                </div>
+            </div>
+            </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import Progress from 'easy-circular-progress'
+
+export default {
+    name: 'BackedupFiles',
+    data() {
+        return {
+          showUpdating: false,
+          updateResponse: '',
+          filesBackedUp: [],
+          newFile: {},
+        }
+    },
+    components: {
+    Progress
+  },
+    methods:{
+
+      handleFileUpload(){
+    this.newFile = this.$refs.file.files[0];
+  },
+
+      launchFileContract: function () {
+        this.showUpdating = true
+        this.updateResponse = ''
+        const formData = new FormData()
+        formData.append('file', this.newFile)
+
+        console.log("loading add backup")
+
+        axios.post('http://localhost:1898/addBackup', formData,{
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        }
+      })
+      .then((response) => {
+        console.log("completed add backup")
+        this.showUpdating = false
+        this.updateResponse = response.data.data
+        this.newFile = {}
+        this.backedUp()
+        
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+    },
+
+      backedUp: function () {
+    
+        console.log("loading getDashboardData")
+
+        axios.get('http://localhost:1898/getBackupFiles')
+        .then((response) => {
+
+        console.log("GETTING BACKED UP FILES")
+
+        this.filesBackedUp = response.data.data
+        console.log(this.filesBackedUp)
+
+        })
+        .catch(function (error) {
+
+        console.log(error);
+        });
+      },
+
+      checkStatus: function () {
+    
+            console.log("loading DID exists")
+
+            axios.get('http://localhost:1898/checkDidExists')
+            .then((response) => {
+
+            console.log(response);
+            if(response.data.data.payload == 'Failure'){
+                console.log("moving to create DID")
+                this.$router.push({path: '/create-new-DID'})
+                return;
+            } else {
+                console.log("loading DID verified")
+                axios.get('http://localhost:1898/checkDidVerified')
+                .then((response) => {
+                    this.isVerified = response.data.data.payload
+                    console.log(response);
+                    if(response.data.data.payload == 'Failure'){
+                    console.log("moving to create DID [check]")
+                    this.$router.push({path: '/verification'})
+                    return;
+                    }
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    this.$router.push({path: '/verification'})
+                    return;
+                });
+            }
+            })
+            .catch(function (error) {
+            console.log(error);
+            this.$router.push({path: '/create-new-DID'})
+            return;
+            });
+
+            axios.get('http://localhost:1898/checkRole')
+            .then((response) => {
+
+            console.log(response);
+            // this.myRole = response.data.data.payload
+            })
+            .catch(function (error) {
+            console.log(error);
+            // this.$router.push({path: '/create-new-DID'})
+            });
+        },
+
+    },
+    
+    beforeMount() {
+        this.backedUp()
+      this.checkStatus()
+    }
+}
+</script>
\ No newline at end of file
--- a/src/pages/DIDcreation.vue
+++ b/src/pages/DIDcreation.vue
+<template>
+  <div id="DIDcreation" class="p-6 bg-gray-100 mb-20">
+    <!-- <div class="text-center" v-if="loading">
+      <Progress strokeColor="#FF00AA" value="100.00">
+      <template v-slot:footer>
+        <b>Creating Identity</b>
+      </template>
+    </Progress>
+    </div>
+    <div v-else> -->
+      <!-- breadcrumb -->
+      <div class="w-full h-20 border-b flex px-4 items-center mb-8">
+            <p class="font-semibold text-3xl text-blue-400 pl-4">WAMPAC</p>
+          </div>
+            <nav class="text-sm font-semibold mb-6" aria-label="Breadcrumb">
+              <ol class="list-none p-0 inline-flex">
+                <li class="flex items-center text-blue-500">
+                  <a href="#" class="text-gray-700">Decentralised Identity</a>
+                  <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
+                </li>
+                <li class="flex items-center">
+                  <a href="#" class="text-gray-600">new DID form</a>
+                </li>
+              </ol>
+            </nav>
+            <!-- breadcrumb end -->
+
+            <div class="lg:flex justify-between items-center mb-6">
+              <p class="text-2xl font-semibold mb-2 lg:mb-0">Create new Decentralized Identity</p>
+            </div>
+            <div class="flex flex-wrap -mx-3">
+            <p>{{ responseDID }}</p>
+            <div class="w-full xl:w-1/2 px-3">
+           <p class="text-2l font-semibold mb-2 lg:mb-0 center">IP Address <input :disabled="true" v-model="ipFill" name="Keyphrase" placeholder="" class="bg-white h-10 w-full xl:w-64 px-5 rounded-lg border text-sm focus:outline-none"></p>
+           <br>
+           <p class="text-2l font-semibold mb-2 lg:mb-0 center">MAC Address <input :disabled="true" v-model="macFill" name="Keyphrase" placeholder="" class="bg-white h-10 w-full xl:w-64 px-5 rounded-lg border text-sm focus:outline-none"></p>
+           <br>
+           <p class="text-2l font-semibold mb-2 lg:mb-0 center">Keyphrase <input type="search" v-model="keyphrase" name="Keyphrase" placeholder="required for identity creation" class="bg-white h-10 w-full xl:w-64 px-5 rounded-lg border text-sm focus:outline-none"></p>
+            </div>
+            <div class="w-full xl:w-1/2 px-3">
+            <div class="DIDimage">
+              <picture-input 
+              ref="pictureInput" 
+              @change="onChange" 
+              width="300" 
+              height="300" 
+              margin="16" 
+              accept="image/jpeg,image/png"
+              size="10" 
+              buttonClass="btn"
+              :customStrings="{
+                upload: '<h1>Error!</h1>',
+                drag: 'Drag Seed Image (256x256 PNG)'
+                }">
+              </picture-input>
+            </div>
+            </div>
+            </div>
+            <div class="center vld-parent">
+              <br>
+            <button v-on:click="postCreateDID(ipFill.concat(macFill, keyphrase)), fetchingStats = true" :disabled=loading class="bg-blue-500 hover:bg-blue-600 focus:outline-none rounded-lg px-6 py-2 text-white font-semibold shadow">Get Identity</button>
+            </div>
+            <div class="text-center" v-if="loading">
+      <Progress strokeColor="#516091" value="94">
+      <template v-slot:footer>
+        <b>Creating Identity, Please wait..</b>
+      </template>
+    </Progress>
+    </div>
+    </div>
+        <!-- </div> -->
+</template>
+
+<script>
+import PictureInput from 'vue-picture-input'
+import axios from 'axios'
+import Progress from 'easy-circular-progress'
+
+export default {
+  name: 'DIDcreation',
+  data() {
+    return {
+      ipFill:'',
+      macFill:'',
+      responseDID: '',
+      data: '',
+      keyphrase: '',
+      loading: false,
+    }
+  },
+  components: {
+    PictureInput,
+    Progress
+  },
+  methods: {
+    onChange (image) {
+      console.log('New picture selected!')
+      if (image) {
+        console.log('Picture loaded.')
+        this.image = this.$refs.pictureInput.file 
+      } else {
+        console.log('FileReader API not supported: use the <form>, bro!')
+      }
+    },
+
+    // TODO: USE progress-path loader animation
+
+    reconnect: function() {
+      axios.get('http://localhost:1898/checkDidVerified')
+          .then((response) => {
+            this.isVerified = response.data.data.payload
+            if(response.data.data.payload == 'Success'){
+              this.$router.push({path: '/dashboard/home'})
+              return;
+            }
+          })
+          .catch(function (error) {
+            console.log(error);
+          });
+    },
+
+    postCreateDID: function (key) {
+      this.loading = true
+      const formData = new FormData()
+      console.log(key)
+
+      formData.append('data', key)
+      formData.append('image', this.image)
+
+      console.log("loading postCreateDID")
+
+      axios.post('http://localhost:1898/create', formData,{
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    })
+    .then((response) => {
+
+      console.log(response);
+
+      console.log(this.responseDID)
+       if(response.data.data.payload.Status=='Success') {
+         this.$router.push({path: '/verification'})
+       } else {
+         this.keyphrase = ''
+         this.data = ''
+         this.loading = false
+       }
+
+     // TODO: GOTO HOME AND SHOW LOADER
+
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+
+    getMAC: function () {
+    
+      console.log("loading mac address")
+
+      axios.get('http://localhost:1898/getMac')
+    .then((response) => {
+
+      console.log(response);
+      this.macFill = response.data.data.payload
+
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+
+    getIP: function () {
+    
+      console.log("loading startWAMPAC")
+
+      axios.get('http://localhost:1898/getIp')
+    .then((response) => {
+
+      console.log(response);
+      this.ipFill = response.data.data.payload
+
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+
+    // startWAMPAC: function () {
+    
+    //   console.log("loading startWAMPAC")
+
+    //   axios.get('http://localhost:1898/start')
+    // .then((response) => {
+
+    //   console.log(response);
+    //   this.$router.push({path: '/verification'})
+
+    // })
+    // .catch(function (error) {
+    //   console.log(error);
+    // });
+    // }
+  },
+  beforeMount() {
+    this.reconnect()
+      this.getMAC()
+      this.getIP()
+    },
+}
+
+</script>
+
+<style>
+
+option:disabled {
+   color: #abcdef;
+}
+
+.center{
+  text-align: center;
+}
+
+</style>
\ No newline at end of file
--- a/src/pages/FileSharing.vue
+++ b/src/pages/FileSharing.vue
+<template>
+  <div id="FileSharing">
+    
+      <!-- breadcrumb -->
+      <nav class="text-sm font-semibold mb-6" aria-label="Breadcrumb">
+        <ol class="list-none p-0 inline-flex">
+          <li class="flex items-center text-blue-500">
+            <a href="#" class="text-gray-700">Main</a>
+            <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
+          </li>
+          <li class="flex items-center">
+            <a href="#" class="text-gray-600">WAMPAC Drive</a>
+          </li>
+        </ol>
+      </nav>
+      <!-- breadcrumb end -->
+        <div class="flex flex-wrap -mx-3 mb-5">
+        <div class="w-1/4 l:w-1/4 px-3">
+                <div class="w-full bg-white border text-blue-400 rounded-lg flex items-center p-6 mb-6 xl:mb-0">
+                  <svg class="w-16 h-16 fill-current mr-4 hidden lg:block" viewBox="0 0 20 20">
+                    <path d="M14.999,8.543c0,0.229-0.188,0.417-0.416,0.417H5.417C5.187,8.959,5,8.772,5,8.543s0.188-0.417,0.417-0.417h9.167C14.812,8.126,14.999,8.314,14.999,8.543 M12.037,10.213H5.417C5.187,10.213,5,10.4,5,10.63c0,0.229,0.188,0.416,0.417,0.416h6.621c0.229,0,0.416-0.188,0.416-0.416C12.453,10.4,12.266,10.213,12.037,10.213 M14.583,6.046H5.417C5.187,6.046,5,6.233,5,6.463c0,0.229,0.188,0.417,0.417,0.417h9.167c0.229,0,0.416-0.188,0.416-0.417C14.999,6.233,14.812,6.046,14.583,6.046 M17.916,3.542v10c0,0.229-0.188,0.417-0.417,0.417H9.373l-2.829,2.796c-0.117,0.116-0.71,0.297-0.71-0.296v-2.5H2.5c-0.229,0-0.417-0.188-0.417-0.417v-10c0-0.229,0.188-0.417,0.417-0.417h15C17.729,3.126,17.916,3.313,17.916,3.542 M17.083,3.959H2.917v9.167H6.25c0.229,0,0.417,0.187,0.417,0.416v1.919l2.242-2.215c0.079-0.077,0.184-0.12,0.294-0.12h7.881V3.959z"></path>
+                  </svg>
+                  <div class="text-gray-700">
+                    <p class="font-semibold text-3xl">{{TokenCount}}</p>
+                    <p>Token Balance <span class="px-2"></span></p>
+                  </div>
+                  </div>
+                </div>
+              </div> 
+
+        
+      <div class="lg:flex justify-between items-center mb-6">
+        <p class="text-2xl font-semibold mb-2 lg:mb-0">WAMPAC Drive &nbsp;-<span>
+          <li class="border-blue-400 bg-blue-400 rounded-full inline-block -ml-3">
+          <router-link to="" class="text-m rounded-full h-8 w-8 flex items-center justify-center overflow-hidden text-white">
+              {{filesShared}}
+          </router-link>
+      </li>
+      </span>
+      </p> 
+            <router-link to="/dashboard/upload-file"><button class="bg-blue-500 hover:bg-blue-600 focus:outline-none rounded-lg px-6 py-2 text-white font-semibold shadow">Create New Contract</button></router-link>
+      </div>
+      <p>Update any files shared with other nodes in the network. </p>
+      
+      <br>
+      <p v-if="filesShared==0">No Shared Files</p>
+      <div v-if="filesShared!=0" class="lg:flex justify-between items-center mb-6">
+        <table class="tables table-fixed">
+        <thead>
+          <tr>
+            <th class="w-1/4 ...">File Name</th>
+            <th class="w-1/4 ..."></th>
+            <th class="w-1/4 ..."></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="bg-blue-100" v-for="fileList in fileList" :key="fileList">
+            <td>{{ fileList }} </td>
+            <td>  <button v-on:click="detailsPopup(fileList)" class="bg-blue-100 hover:bg-blue-500 focus:outline-none rounded-sm px-6 py-2 text-black font-semibold shadow">Details</button> </td>
+            <td> <button v-on:click="toggleUpdate(fileList)" class="bg-blue-100 hover:bg-blue-500 focus:outline-none rounded-sm px-6 py-2 text-black font-semibold shadow">Update</button> </td>
+          </tr>
+        </tbody>
+      </table>
+      </div>
+      <modal name="file-update-modal">
+      <div v-if=showPopup class="w-full bg-white border rounded-lg p-4">
+
+      <p class="text-l font-semibold mb-4">File Token:
+      <span class="text-sm font-normal mb-4">{{fileUpdate.fileHash}}</span></p>
+      <p class="text-l font-semibold mb-4">Current Hash:
+      <span class="text-sm font-normal mb-4">{{fileUpdate.token}}</span> </p>
+      <div class="w-full xl:w-1/2 px-3">
+        <input type="file" id="file" ref="file" v-on:change="handleFileUpload()"/>
+        <span class="p-40" v-if="showUpdating">
+        <Progress strokeColor="#516091" value="87">
+          <template v-slot:footer>
+            <b>Updating Selected File, Please wait..</b>
+          </template>
+        </Progress>
+        </span>
+        </div>
+      </div>
+      <div v-if="!showUpdating && showPopup" class="w-full xl:w-1/2 px-3 py-10">
+      <button v-on:click="launchFileContract(fileUpdate.token), fetchingStats = true" class="center bg-blue-500 hover:bg-blue-600 focus:outline-none rounded-sm px-2 py-2 text-white font-semibold shadow">Update</button>
+      </div>
+      <div class="py-20">
+      <p class="text-gray-700 font-semibold text-xl center">{{updateResponse}}</p>
+      </div>
+      
+      </modal>
+      <modal name="file-info-modal">
+        <div class="w-full bg-white border rounded-lg p-4">
+        <p class="text-gray-700 font-semibold text-3xl">{{fileDetail.fileName}}</p>
+        <p class="text-gray-700 font-semibold text-sm">Token: {{fileDetail.token }}</p>
+        <p class="text-gray-700 font-semibold text-sm">File Hash: {{fileDetail.fileHash }}</p>
+        <p class="text-gray-700 font-semibold text-sm">Status: {{fileDetail.status }}</p>
+        <p class="text-black-700 font-semibold text-l">Contract Data</p>
+        <div class="w-full bg-white border rounded-lg p-4">
+          <div class="w-full bg-gray-100 border rounded-lg flex justify-between items-center px-1 py-2">
+              <div>
+                <ul>
+                <li v-for="data in fileDetail.contractData" :key="data">
+                <div class="did font-semibold text-xs"><span class="text-black-500 font-normal text-xs"> {{data.did}}</span> {{ data.ip }} <span class="text-red-500 font-semibold text-sm"> {{ data.writeCount }}</span></div>
+                <hr>
+              </li>
+              </ul>
+              </div>
+          </div>
+        </div>
+        <p class="text-blue-700 font-semibold text-xl">You accessed this file {{fileDetail.accessCount }} times</p>
+      </div>
+    </modal>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import axios from 'axios'
+import VModal from 'vue-js-modal'
+import Progress from 'easy-circular-progress'
+
+Vue.use(VModal, {
+  dynamicDefaults: {
+    draggable: true,
+    resizable: true,
+    height: 'auto'
+  }
+})
+
+export default {
+  name: 'FileSharing',
+  data() {
+    return {
+      filesShared: 0,
+      TokenCount: 0,
+      open: false,
+      fileToken: "",
+      fileDetail: {},
+      fileUpdate: {},
+      showPopup: false,
+      showUpdating: false,
+      fileList: [],
+      updateResponse: '',
+      newFile: {}
+    }
+  },
+  components: {
+    Progress
+  },
+
+  methods: {
+
+    getTokenCount: function () {
+    
+      console.log("loading contactsOnline")
+
+      axios.get('http://localhost:1898/getTokenCount')
+    .then((response) => {
+      this.TokenCount = response.data.data
+
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+
+    thumbUrlOld (file) {
+      return file.myThumbUrlProperty
+    },
+    thumbUrlNew (file) {
+      return file.myThumbUrlProperty
+    },
+    // onChangeNew (file) {
+    //   console.log('New File selected!')
+    //   if (file) {
+    //     this.newFile = file
+    //     console.log("uploading file")
+    //   } else {
+    //     console.log('FileReader API not supported: use the <form>, please!')
+    //   }
+    // },
+
+    handleFileUpload(){
+    this.newFile = this.$refs.file.files[0];
+  },
+
+    detailsPopup: function (token) {
+      this.$modal.show('file-info-modal');
+      this.open = true
+      console.log(token)
+      const formData = new FormData()
+      formData.append('fileName', token)
+
+
+      console.log("loading file details")
+
+      axios.post('http://localhost:1898/getSharedFileDetails', formData,{
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    })
+    .then((response) => {
+
+      console.log(response);
+      this.fileDetail = response.data.data.response
+      console.log("printing result")
+      console.log(this.fileDetail.Status)
+
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+
+    toggleUpdate: function (token) {
+      this.updateResponse = ''
+      this.showUpdating = false
+      this.$modal.show('file-update-modal');
+      this.showPopup = true
+      this.fileToken = token
+      // if(token == 'close'){
+      //   this.showPopup = !this.showPopup
+      // }
+      console.log(token)
+
+      const formData = new FormData()
+      formData.append('fileName', token)
+
+      axios.post('http://localhost:1898/getSharedFileMetaData', formData,{
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+      })
+      .then((response) => {
+
+        console.log(response);
+        this.fileUpdate = response.data.data.response
+        // this.$modal.hide('file-update-modal');
+
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+    },
+    
+
+    launchFileContract: function (token) {
+      // this.open = false
+      this.showUpdating = true
+      this.updateResponse = ''
+      const formData = new FormData()
+      formData.append('newfile', this.newFile)
+      formData.append('token', token)
+
+      console.log("loading launchFileContract")
+
+      axios.post('http://localhost:1898/update', formData,{
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    })
+    .then((response) => {
+      this.showUpdating = false
+      this.updateResponse = response.data.data.response
+      this.newFile = ''
+      this.showPopup = false
+      // this.open = false
+      console.log(this.responseDID)
+     // TODO: GOTO HOME AND SHOW LOADER
+
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+
+    checkStatus: function () {
+    
+      console.log("loading DID exists")
+
+      axios.get('http://localhost:1898/checkDidExists')
+    .then((response) => {
+
+      console.log(response);
+      if(response.data.data.payload == 'Failure'){
+        console.log("moving to create DID")
+        this.$router.push({path: '/create-new-DID'})
+        return;
+      } else {
+        console.log("loading DID verified")
+          axios.get('http://localhost:1898/checkDidVerified')
+          .then((response) => {
+            this.isVerified = response.data.data.payload
+            console.log(response);
+            if(response.data.data.payload == 'Failure'){
+              console.log("moving to create DID [check]")
+              this.$router.push({path: '/verification'})
+              return;
+            }
+          })
+          .catch(function (error) {
+            console.log(error);
+            this.$router.push({path: '/verification'})
+            return;
+          });
+      }
+    })
+    .catch(function (error) {
+      console.log(error);
+      this.$router.push({path: '/create-new-DID'})
+      return;
+    });
+
+    
+
+
+    axios.get('http://localhost:1898/checkRole')
+    .then((response) => {
+
+      console.log(response);
+      // this.myRole = response.data.data.payload
+    })
+    .catch(function (error) {
+      console.log(error);
+      // this.$router.push({path: '/create-new-DID'})
+    });
+    },
+
+    getFiles: function () {
+    
+      console.log("loading list of Files")
+
+      axios.get('http://localhost:1898/getSharedFiles')
+    .then((response) => {
+      this.fileList = response.data.data.response
+      this.filesShared = response.data.data.response.length
+      
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+
+    getToken: function () {
+
+      axios.get('http://localhost:1898/requestTokens')
+    .then((response) => {
+      if(response.data.data.payload == 'Failure') {
+        this.$router.push({path: '/dashboard/home'})
+      }
+      
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+    
+  },
+  beforeMount() {
+      this.getToken()
+      this.checkStatus()
+      this.getFiles()
+      this.getTokenCount()
+  }
+
+}
+</script>
+  
+<style>
+
+.center{
+  text-align: center;
+}
+.modalBefore {
+  top:-300px;
+  margin:auto;
+}
+
+.modalAfter {
+  top:200px;
+}
+
+</style>
\ No newline at end of file
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
+<template>
+    <div id="home">
+            <nav class="text-sm font-semibold mb-6" aria-label="Breadcrumb">
+              <ol class="list-none p-0 inline-flex">
+                <li class="flex items-center text-blue-500">
+                  <a href="#" class="text-gray-700">My DID</a>
+                  <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
+                </li>
+                <li class="flex items-center">
+                  <a href="#" class="text-gray-600">{{did}} <span v-if="isVerified=='Success'" class="text-green-500 text-l">Verified </span> <span v-if="isVerified=='Failure'" class="text-red-500 text-l">Not Verified</span></a>
+                </li>
+              </ol>
+            </nav>
+
+            <div class="lg:flex justify-between items-center mb-6">
+              <p class="text-2xl font-semibold mb-2 lg:mb-0">WAMPAC Blockchain Activities</p>
+            </div>
+
+            <div class="flex flex-wrap -mx-3 mb-20">
+
+              <div class="w-1/2 xl:w-1/4 px-3">
+                <div class="w-full bg-white border text-blue-400 rounded-lg flex items-center p-6 mb-6 xl:mb-0">
+                  <svg class="w-16 h-16 fill-current mr-4 hidden lg:block" viewBox="0 0 20 20">
+                    <path d="M17.35,2.219h-5.934c-0.115,0-0.225,0.045-0.307,0.128l-8.762,8.762c-0.171,0.168-0.171,0.443,0,0.611l5.933,5.934c0.167,0.171,0.443,0.169,0.612,0l8.762-8.763c0.083-0.083,0.128-0.192,0.128-0.307V2.651C17.781,2.414,17.587,2.219,17.35,2.219M16.916,8.405l-8.332,8.332l-5.321-5.321l8.333-8.332h5.32V8.405z M13.891,4.367c-0.957,0-1.729,0.772-1.729,1.729c0,0.957,0.771,1.729,1.729,1.729s1.729-0.772,1.729-1.729C15.619,5.14,14.848,4.367,13.891,4.367 M14.502,6.708c-0.326,0.326-0.896,0.326-1.223,0c-0.338-0.342-0.338-0.882,0-1.224c0.342-0.337,0.881-0.337,1.223,0C14.84,5.826,14.84,6.366,14.502,6.708"></path>
+                  </svg>
+
+                  <div class="text-gray-700">
+                    <p class="font-semibold text-3xl">{{fileSharedCount}}</p>
+                    <p>Files Shared</p>
+                  </div>
+
+                </div>
+              </div> 
+
+              <div class="w-1/2 xl:w-1/4 px-3">
+                <div class="w-full bg-white border text-blue-400 rounded-lg flex items-center p-6 mb-6 xl:mb-0">
+                  <svg class="w-16 h-16 fill-current mr-4 hidden lg:block" viewBox="0 0 20 20">
+                    <path d="M17.684,7.925l-5.131-0.67L10.329,2.57c-0.131-0.275-0.527-0.275-0.658,0L7.447,7.255l-5.131,0.67C2.014,7.964,1.892,8.333,2.113,8.54l3.76,3.568L4.924,17.21c-0.056,0.297,0.261,0.525,0.533,0.379L10,15.109l4.543,2.479c0.273,0.153,0.587-0.089,0.533-0.379l-0.949-5.103l3.76-3.568C18.108,8.333,17.986,7.964,17.684,7.925 M13.481,11.723c-0.089,0.083-0.129,0.205-0.105,0.324l0.848,4.547l-4.047-2.208c-0.055-0.03-0.116-0.045-0.176-0.045s-0.122,0.015-0.176,0.045l-4.047,2.208l0.847-4.547c0.023-0.119-0.016-0.241-0.105-0.324L3.162,8.54L7.74,7.941c0.124-0.016,0.229-0.093,0.282-0.203L10,3.568l1.978,4.17c0.053,0.11,0.158,0.187,0.282,0.203l4.578,0.598L13.481,11.723z"></path>
+                  </svg>
+
+                  <div class="text-gray-700">
+                    <p class="font-semibold text-3xl">{{contactsCount}}</p>
+                    <p>Contacts</p>
+                  </div>
+                </div>
+              </div>
+
+              <div class="w-1/2 xl:w-1/4 px-3">
+                <div class="w-full bg-white border text-blue-400 rounded-lg flex items-center p-6">
+                  <svg class="w-16 h-16 fill-current mr-4 hidden lg:block" viewBox="0 0 20 20">
+                    <path d="M14.999,8.543c0,0.229-0.188,0.417-0.416,0.417H5.417C5.187,8.959,5,8.772,5,8.543s0.188-0.417,0.417-0.417h9.167C14.812,8.126,14.999,8.314,14.999,8.543 M12.037,10.213H5.417C5.187,10.213,5,10.4,5,10.63c0,0.229,0.188,0.416,0.417,0.416h6.621c0.229,0,0.416-0.188,0.416-0.416C12.453,10.4,12.266,10.213,12.037,10.213 M14.583,6.046H5.417C5.187,6.046,5,6.233,5,6.463c0,0.229,0.188,0.417,0.417,0.417h9.167c0.229,0,0.416-0.188,0.416-0.417C14.999,6.233,14.812,6.046,14.583,6.046 M17.916,3.542v10c0,0.229-0.188,0.417-0.417,0.417H9.373l-2.829,2.796c-0.117,0.116-0.71,0.297-0.71-0.296v-2.5H2.5c-0.229,0-0.417-0.188-0.417-0.417v-10c0-0.229,0.188-0.417,0.417-0.417h15C17.729,3.126,17.916,3.313,17.916,3.542 M17.083,3.959H2.917v9.167H6.25c0.229,0,0.417,0.187,0.417,0.416v1.919l2.242-2.215c0.079-0.077,0.184-0.12,0.294-0.12h7.881V3.959z"></path>
+                  </svg>
+
+                  <div class="text-gray-700">
+                    <p class="font-semibold text-3xl"> {{logsCount}}</p>
+                    <p>Logs Sent</p>
+                  </div>
+                </div>
+              </div>
+
+              <div class="w-1/3 xl:w-1/4 px-3">
+                <div class="w-full bg-white border text-blue-400 rounded-lg flex items-center p-6">
+                  <svg class="w-16 h-16 fill-current mr-4 hidden lg:block" viewBox="0 0 20 20">
+                    <path d="M17.431,2.156h-3.715c-0.228,0-0.413,0.186-0.413,0.413v6.973h-2.89V6.687c0-0.229-0.186-0.413-0.413-0.413H6.285c-0.228,0-0.413,0.184-0.413,0.413v6.388H2.569c-0.227,0-0.413,0.187-0.413,0.413v3.942c0,0.228,0.186,0.413,0.413,0.413h14.862c0.228,0,0.413-0.186,0.413-0.413V2.569C17.844,2.342,17.658,2.156,17.431,2.156 M5.872,17.019h-2.89v-3.117h2.89V17.019zM9.587,17.019h-2.89V7.1h2.89V17.019z M13.303,17.019h-2.89v-6.651h2.89V17.019z M17.019,17.019h-2.891V2.982h2.891V17.019z"></path>
+                  </svg>
+
+                  <div class="text-gray-700">
+                    <p class="font-semibold text-3xl">{{systemStatus}}</p>
+                    <p>Latest Log Status</p>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+          
+            <div class="flex flex-wrap -mx-3">
+
+              <div class="w-full xl:w-1/2 px-3">
+
+              <p class="text-xl font-semibold mb-4">Anomaly</p>
+
+                <div class="w-full bg-white border rounded-lg p-4">
+                  <div class="w-full bg-gray-100 border rounded-lg flex justify-between items-center px-1 py-2">
+                      <canvas id="chart" width="600" height="400"></canvas>
+                </div>
+              </div>
+              </div>
+              <div class="w-full xl:w-1/2 px-3">
+                <p class="text-xl font-semibold mb-4">Anomaly History</p>
+                <div class="w-full bg-white border rounded-lg p-4">
+                  <div class="w-full bg-gray-100 border rounded-lg flex justify-between items-center px-1 py-2">
+                      <div>
+                       <ul>
+                        <li v-for="anomaly in anomaly" :key="anomaly">
+                        <div class="did font-semibold text-lg">{{ anomaly.anomaly }}  > <span class="text-black-500 font-normal text-sm">{{anomaly.timestamp}}</span></div>
+                        <hr>
+                      </li>
+                      </ul>
+                      </div>
+                  </div>
+                </div>
+                <br>
+                <p class="text-xl font-semibold mb-4">Contacts online ({{onlinePeersCount}} / {{contactsCount}})</p>
+
+                <div class="w-full bg-white border rounded-lg p-4">
+                  <div class="w-full bg-gray-100 border rounded-lg flex justify-between items-center px-1 py-2">
+                      <div>
+                       <ul>
+                         <li v-for="user in onlinePeers" :key="user">
+                          <div class="did text-sm"> {{ user.did }} <span v-if=" user.onlineStatus == 'online' " class="text-green-500">●</span></div>
+                          <hr>
+                       </li>
+                       </ul>
+                      </div>
+                  </div>
+                </div>
+
+                
+              </div>
+
+            
+            </div>
+
+    </div>
+</template>
+
+<script>
+import Chart from 'chart.js'
+import Vue from 'vue'
+import axios from 'axios'
+import VModal from 'vue-js-modal'
+Vue.use(VModal, {
+  dynamicDefaults: {
+    draggable: true,
+    resizable: true,
+    height: 'auto'
+  }
+})
+
+function formatBytes(bytes, decimals = 0) {
+    if (bytes === 0) return '0 Bytes';
+
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
+export default {
+    name: 'DashboardHome',
+    data() {
+        return {
+          chart: null,
+
+          isVerified:"",
+          myRole:"",
+          balanceToken: 0,
+          did: "Loading .. ",
+          systemStatus: '',
+          fileSharedCount:0,
+          contactsCount:'Loading..',
+          onlinePeersCount:0,
+          onlinePeers:[],
+          anomaly:[],
+          anomalyChart:[],
+          logsCount: 0,
+        }
+    },
+    methods:{
+
+      checkStatus: function () {
+    
+      console.log("loading DID exists")
+
+      axios.get('http://localhost:1898/checkDidExists')
+    .then((response) => {
+
+      console.log(response);
+      if(response.data.data.payload == 'Failure'){
+        console.log("moving to create DID")
+        this.$router.push({path: '/create-new-DID'})
+        return;
+      } else {
+        console.log("loading DID verified")
+          axios.get('http://localhost:1898/checkDidVerified')
+          .then((response) => {
+            this.isVerified = response.data.data.payload
+            console.log(response);
+            if(response.data.data.payload == 'Failure'){
+              console.log("moving to create DID [check]")
+              this.$router.push({path: '/verification'})
+              return;
+            }
+            else {
+              this.getAnomalies()
+              this.logCount()
+              this.anomalyChartData()
+              this.systemLogStatus()
+              this.checkRole()
+              this.contactsOnline()
+              this.getDashboardData()
+              this.filesShared()
+              this.changeGraph(4)
+            }
+          })
+          .catch(function (error) {
+            console.log(error);
+            this.$router.push({path: '/verification'})
+            return;
+          });
+      }
+    })
+    .catch(function (error) {
+      console.log(error);
+      this.$router.push({path: '/create-new-DID'})
+      return;
+    });
+    },
+
+    logCount: function () {
+      console.log("loading logCount")
+
+      axios.get('http://localhost:1898/getLogsCount')
+    .then((response) => {
+
+      console.log(response);
+      console.log("logsCount");
+      this.logsCount = response.data.data
+
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+
+    anomalyChartData: function () {
+      console.log("loading anomalyChartData")
+
+      axios.get('http://localhost:1898/anomalyBarChart')
+    .then((response) => {
+      console.log("ANOMALY CHART")
+      this.anomalyChart = response.data.data.payload
+
+      this.chart = new Chart(document.getElementById("chart").getContext("2d"),{
+          type: 'bar',
+          data:{
+            labels : this.anomalyChart.map(i=>i.time),
+            datasets: [{
+              label: 'Anomalies Recorded Per Day',
+              backgroundColor : "rgba(99,179,237,0.4)",
+              barPercentage: 1,
+              barThickness: 30,
+              maxBarThickness: 60,
+              minBarLength: 5,
+              data : this.anomalyChart.map(i=>i.count),
+            }],
+          }
+        }
+        )
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+
+    getAnomalies: function () {
+      console.log("loading logCount")
+
+      axios.get('http://localhost:1898/getLatestAnomalies')
+    .then((response) => {
+
+      console.log(response);
+      console.log("logsCount");
+      this.anomaly = response.data.data
+
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+
+    systemLogStatus: function () {
+      console.log("loading logCount")
+
+      axios.get('http://localhost:1898/latestSystemStatus')
+    .then((response) => {
+
+      console.log(response);
+      console.log("logsCount");
+      this.systemStatus = response.data.data
+
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+
+
+    checkRole: function() {
+      axios.get('http://localhost:1898/checkRole')
+    .then((response) => {
+      if(response.data.data.payload == 'Verifier') {
+        this.$router.push({path: '/dashboard/verifier'})
+      }
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+
+      getDashboardData: function () {
+    
+      console.log("loading getDashboardData")
+
+      axios.get('http://localhost:1898/getDashboard')
+    .then((response) => {
+
+      console.log(response)
+      // if(response.data.data.payload.balance == null) {
+      //   console.log("moving to create DID [getDashboard]")
+      //   this.$router.push({path: '//create-new-DID'})
+      // }
+
+      this.contactsCount = response.data.data.payload.contactsCount
+      this.did = response.data.data.payload.did
+    })
+    .catch(function (error) {
+
+      console.log("RESPONSE ERROR CODE")
+      this.$router.push({path: '/create-new-DID'})
+
+      console.log(error);
+    });
+    },
+
+    contactsOnline: function () {
+    
+      console.log("loading contactsOnline")
+
+      axios.get('http://localhost:1898/getOnlinePeers')
+    .then((response) => {
+
+      console.log(response);
+      this.onlinePeers = response.data.data.payload
+      console.log(this.onlinePeers)
+
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+
+    filesShared: function () {
+    
+      console.log("loading filesShared")
+
+      axios.get('http://localhost:1898/getSharedFilesCount')
+    .then((response) => {
+
+      console.log(response);
+      this.fileSharedCount = response.data.data.response
+      console.log(this.fileSharedCount)
+
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+
+    fileList: function () {
+    
+      console.log("loading filesShared")
+
+      axios.get('http://localhost:1898/getSharedFiles')
+    .then((response) => {
+
+      console.log(response);
+      this.sharedFiles = response.data.data.response
+      console.log(this.sharedFiles)
+
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    },
+
+    // scanNowFn: function () {
+    //   this.$modal.show('system-scan-modal');
+    //   this.open = true
+    //   console.log("loading scanNow")
+
+    //   axios.get('http://localhost:1898/scanNow')
+    // .then((response) => {
+
+    //   this.scanNow = response.data.data.payload
+
+    // })
+    // .catch(function (error) {
+    //   console.log(error);
+    // });
+    // },
+
+    },
+    beforeMount() {
+      this.checkStatus()
+    },
+    // mounted() {
+    //     this.createChart();
+    //     console.log("mounted");
+    // }
+}
+</script>
+
+<style>
+.did{
+font-size: 10px;
+}
+ul {
+    list-style-type: none;
+}
+</style>
\ No newline at end of file