Screens for admin

src/App.vue

     <v-app-bar app>
       <v-app-bar-nav-icon v-if="isloggedIn" @click.stop="drawerLeft = !drawerLeft" />
       <v-toolbar-title>
-        <v-img src="./assets/images/logo.png" height="50" width="450"></v-img>
+        <v-img v-if="!isloggedIn" src="./assets/images/logo.png" height="50" width="450"></v-img>
+        <counter v-if="isloggedIn" />
       </v-toolbar-title>
       <v-spacer />
       <v-app-bar-nav-icon v-if="showTelemarketer" @click.stop="drawerRight = !drawerRight" />
 import navBar from "./components/home/navBar.vue";
 import login from "./components/user/login.vue";
 import tmBar from "./components/telemarketer/telemarketerBar.vue";
+import counter from "./components/home/counter.vue";
 
 export default {
   components: {
     navBar,
     login,
-    tmBar
+    tmBar,
+    counter
   },
   props: {
     source: String

src/components/HelloWorld.vue

 <template>
   <v-container>
-    <v-layout text-center wrap>
+    <!-- <v-layout text-center wrap>
       <v-flex xs12></v-flex>
 
       <v-flex mb-4>
           >{{ eco.text }}</a>
         </v-layout>
       </v-flex>
-    </v-layout>
+    </v-layout>-->
   </v-container>
 </template>
 

src/components/home/counter.vue

+<template>
+  <v-container>
+    <v-layout>
+      <v-flex>
+        <v-img src="../../assets/images/logo.png" height="50" width="450"></v-img>
+      </v-flex>
+      <v-flex>
+        <v-label>Calls:</v-label>
+        <v-chip class="ma-2" label color="black" text-color="blue">
+          <b style="font-size:30px;">{{calls}}</b>
+        </v-chip>
+        <v-label>Session 1:</v-label>
+        <v-chip class="ma-2" label color="black" text-color="blue">
+          <b style="font-size:30px;">{{calls}}</b>
+        </v-chip>
+        <v-label>Session 2:</v-label>
+        <v-chip class="ma-2" label color="black" text-color="blue">
+          <b style="font-size:30px;">{{calls}}</b>
+        </v-chip>
+        <v-label>Session 3:</v-label>
+        <v-chip class="ma-2" label color="black" text-color="blue">
+          <b style="font-size:30px;">{{calls}}</b>
+        </v-chip>
+        <v-label>Session 4:</v-label>
+        <v-chip class="ma-2" label color="black" text-color="blue">
+          <b style="font-size:30px;">{{calls}}</b>
+        </v-chip>
+        <v-label>Target:</v-label>
+        <v-chip class="ma-2" label color="black" text-color="blue">
+          <b style="font-size:30px;">{{calls}}</b>
+        </v-chip>
+      </v-flex>
+      <v-flex>
+        <v-chip class="ma-2" label>Kobus Botha</v-chip>
+        <v-chip class="ma-2" label>Beatus 1</v-chip>
+      </v-flex>
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      calls: 0
+    };
+  }
+};
+</script>

src/components/home/navBar.vue

         <v-btn block color="secondary" @click="router('/settings/sipaccount')">SIP Account</v-btn>
         <v-btn block color="secondary" @click="router('/settings/mediadevices')">Media Devices</v-btn>
         <v-btn block color="secondary" @click="router('/settings/defaults')">Defaults</v-btn>
-        <v-btn block color="secondary" @click="router('/settings/network')">Network</v-btn>
-        <v-btn block color="secondary" @click="router('/settings/colours')">Colors</v-btn>
+        <!-- <v-btn block color="secondary" @click="router('/settings/network')">Network</v-btn> -->
+        <v-btn block color="secondary" @click="router('/settings/colours')">Colours</v-btn>
         <v-btn block color="secondary" @click="router('/settings/admin')">Admin</v-btn>
         <v-btn block color="secondary" @click="router('/settings/about')">About</v-btn>
       </v-container>

src/components/settings/about.vue

+<template>
+  <v-container>
+    <h1 style="text-align:center">About</h1>
+    <br />
+    <v-card class="col-md-10 offset-1">
+      <v-container>
+        <v-textarea disabled />
+      </v-container>
+    </v-card>
+  </v-container>
+</template>

src/components/settings/admin.vue

+<template>
+  <v-container>
+    <h1 style="text-align:center">Admin</h1>
+    <br />
+    <v-card class="col-md-6 offset-3">
+      <v-container>
+        <v-row>
+          <v-col>
+            <v-switch label="Testing Mode" />
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <v-text-field label="Number" />
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <v-combobox label="Set as POD Manager" clearable />
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-card>
+    <v-card class="col-md-6 offset-3">
+      <v-container>
+        <v-row>
+          <v-col>
+            <v-switch label="Allow Manual Calls" />
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <v-combobox label="Sales Venue" clearable />
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-card>
+    <v-row>
+      <v-col cols="1" offset="8">
+        <v-btn color="primary" block>save</v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

src/components/settings/colour.vue

+<template>
+  <v-container>
+    <h1 style="text-align:center">Colour Settings</h1>
+    <v-row>
+      <v-col cols="2" offset="3">
+        <h3>Primary Colour</h3>
+      </v-col>
+      <v-col cols="1">
+        <v-dialog v-model="dialog" persistent max-width="300">
+          <template v-slot:activator="{ on }">
+            <v-btn block v-on="on">
+              <v-icon>palette</v-icon>
+            </v-btn>
+          </template>
+          <v-card>
+            <v-color-picker class="ma-2" hide-mode-switch :value="'#1976d2'"></v-color-picker>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn color="primary" text @click="dialog = false">select</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-col>
+      <v-col>
+        <v-chip class="ma-2" label color="primary" style="width:500px;"></v-chip>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="2" offset="3">
+        <h3>Seconday Colour</h3>
+      </v-col>
+      <v-col cols="1">
+        <v-dialog v-model="dialog" persistent max-width="300">
+          <template v-slot:activator="{ on }">
+            <v-btn block v-on="on">
+              <v-icon>palette</v-icon>
+            </v-btn>
+          </template>
+          <v-card>
+            <v-color-picker class="ma-2" hide-mode-switch :value="'#424242'"></v-color-picker>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn color="primary" text @click="dialog = false">select</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-col>
+      <v-col>
+        <v-chip class="ma-2" label color="secondary" style="width:500px;"></v-chip>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="2" offset="3">
+        <h3>Tertiary Colour</h3>
+      </v-col>
+      <v-col cols="1">
+        <v-dialog v-model="dialog" persistent max-width="300">
+          <template v-slot:activator="{ on }">
+            <v-btn block v-on="on">
+              <v-icon>palette</v-icon>
+            </v-btn>
+          </template>
+          <v-card>
+            <v-color-picker class="ma-2" hide-mode-switch :value="'#e0e0e0'"></v-color-picker>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn color="primary" text @click="dialog = false">select</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-col>
+      <v-col>
+        <v-chip class="ma-2" label color="tertiary" style="width:500px;"></v-chip>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="1" offset="5">
+        <v-btn color="primary" block>save</v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: "ColourSetting",
+  data() {
+    return {
+      dialog: false
+    };
+  }
+};
+</script>

src/router/index.js

 import SipAccount from '../components/settings/sipAccount.vue'
 import MediaDevices from '../components/settings/mediaDevices.vue'
 import Defaults from '../components/settings/defaults.vue'
+import Colour from '../components/settings/colour.vue'
+import Admin from '../components/settings/admin.vue'
+import About from '../components/settings/about.vue'
 
 Vue.use(VueRouter)
 
 		name: 'Defaults',
 		component: Defaults,
 	},
+	{
+		path: '/settings/colours',
+		name: 'Colours',
+		component: Colour,
+	},
+	{
+		path: '/settings/admin',
+		name: 'Admin',
+		component: Admin,
+	},
+	{
+		path: '/settings/about',
+		name: 'About',
+		component: About,
+	},
 ]
 
 const router = new VueRouter({