Screens - phase 1

package-lock.json

         "object-visit": "^1.0.0"
       }
     },
+    "material-design-icons-iconfont": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/material-design-icons-iconfont/-/material-design-icons-iconfont-5.0.1.tgz",
+      "integrity": "sha512-Xg6rIdGrfySTqiTZ6d+nQbcFepS6R4uKbJP0oAqyeZXJY/bX6mZDnOmmUJusqLXfhIwirs0c++a6JpqVa8RFvA=="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npm.taobao.org/md5.js/download/md5.js-1.3.5.tgz",

package.json

   },
   "dependencies": {
     "core-js": "^3.4.4",
+    "material-design-icons-iconfont": "^5.0.1",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
     "vuetify": "^2.1.0",

src/App.vue

 <template>
   <v-app id="inspire">
-    <v-navigation-drawer v-model="drawerRight" app right>
+    <v-navigation-drawer
+      v-if="isloggedIn && showTelemarketer"
+      v-model="drawerRight"
+      app
+      right
+      width="285px"
+    >
       <v-list dense>
         <v-list-item @click.stop="drawerRight = !drawerRight">
           <v-list-item-action>
             <v-icon>exit_to_app</v-icon>
           </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title>Open Temporary</v-list-item-title>
-          </v-list-item-content>
         </v-list-item>
       </v-list>
+      <tmBar />
     </v-navigation-drawer>
     <v-navigation-drawer v-model="drawerLeft" app>
       <v-list dense>
-        <v-list-item @click.stop="drawerLeft = !rigdrawerLeftht">
+        <v-list-item @click.stop="drawerLeft = !drawerLeft">
           <v-list-item-action>
             <v-icon>exit_to_app</v-icon>
           </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title>Open Temporary</v-list-item-title>
-          </v-list-item-content>
         </v-list-item>
       </v-list>
+      <navBar @routerGoTo="routerGoTo" v-if="isloggedIn" />
     </v-navigation-drawer>
 
     <v-app-bar app>
-      <v-app-bar-nav-icon @click.stop="drawerLeft = !drawerLeft" />
+      <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-toolbar-title>
       <v-spacer />
-      <v-app-bar-nav-icon @click.stop="drawerRight = !drawerRight" />
+      <v-app-bar-nav-icon v-if="showTelemarketer" @click.stop="drawerRight = !drawerRight" />
     </v-app-bar>
 
     <v-content>
       <v-container class="fill-height" fluid>
         <v-row align="center" justify="center">
-          <router-view></router-view>
+          <router-view v-if="isloggedIn"></router-view>
+          <!-- Need to only hide once the user is logged in. then show the router-view -->
+          <login v-if="!isloggedIn" />
         </v-row>
       </v-container>
     </v-content>
 </template>
 
 <script>
+import navBar from "./components/home/navBar.vue";
+import login from "./components/user/login.vue";
+import tmBar from "./components/telemarketer/telemarketerBar.vue";
+
 export default {
+  components: {
+    navBar,
+    login,
+    tmBar
+  },
   props: {
     source: String
   },
   data: () => ({
     drawerRight: false,
-    drawerLeft: false
+    drawerLeft: false,
+    isloggedIn: true,
+    showTelemarketer: false
   }),
   created() {
     this.$vuetify.theme.dark = false;
+  },
+  methods: {
+    routerGoTo(goTo) {
+      console.log(goTo);
+      if (goTo === "/telemaketer") {
+        this.showTelemarketer = true;
+      } else {
+        this.showTelemarketer = false;
+      }
+      this.$router.push(goTo);
+    }
   }
 };
 </script>

src/assets/staticData/itemsPerPage.js

+const items = [
+    10,
+    20,
+    50,
+    100,
+  ];
+  export default items;
+  

src/components/booking/booking.vue

+<template>
+  <v-container>
+    <h1 style="text-align:center">Past Bookings</h1>
+    <v-row>
+      <YMFilter />
+    </v-row>
+    <v-data-table :headers="headers" :items="bookings" :items-per-page="10" class="elevation-1"></v-data-table>
+  </v-container>
+</template>
+
+<script>
+import YMFilter from "../shared/yearMonthFilter";
+
+export default {
+  name: "PastBookings",
+  components: {
+    YMFilter
+  },
+  data() {
+    return {
+      bookings: [],
+      headers: [
+        { text: "Booking Ref", value: "bookingRef" },
+        { text: "Booking Date", value: "bookingDate" },
+        { text: "Lead", value: "lead" },
+        { text: "Session", value: "session" },
+        { text: "Venue", value: "venue" },
+        { text: "Telemarketer", value: "telemarketer" },
+        { text: "Arrival", value: "arrival" },
+        { text: "Qual", value: "qual" },
+        { text: "Contact", value: "contact" }
+      ]
+    };
+  }
+};
+</script>

src/components/booking/bookingCreate.vue

+<template>
+  <v-container>
+    <h1>Create New Booking</h1>
+    <v-row>
+      <v-col cols="12">
+        <v-combobox label="Venue" />
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12">
+        <datePicker />
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12">
+        <v-combobox label="Session" />
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12">
+        <v-label>Time of session: {{ sessionTime }}</v-label>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12">
+        <v-combobox label="Number of People" />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12">
+        <v-btn color="primary">Create Booking</v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import datePicker from "../shared/datePicker";
+
+export default {
+  components: {
+    datePicker
+  }
+};
+</script>

src/components/calls/calls.vue

+<template>
+  <v-container>
+    <h1 style="text-align:center">Call History</h1>
+    <v-row>
+      <YMFilter />
+    </v-row>
+    <v-data-table :headers="headers" :items="calls" :items-per-page="10" class="elevation-1"></v-data-table>
+  </v-container>
+</template>
+
+<script>
+import YMFilter from "../shared/yearMonthFilter";
+
+export default {
+  name: "PastBookings",
+  components: {
+    YMFilter
+  },
+  data() {
+    return {
+      calls: [],
+      headers: [
+        { text: "Date", value: "date" },
+        { text: "Call Duration", value: "callDuration" },
+        { text: "Bill Seconds", value: "billSeconds" },
+        { text: "Disposition", value: "disposition" },
+        { text: "Telemarketer", value: "telemarketer" }
+      ]
+    };
+  }
+};
+</script>

src/components/home/navBar.vue

+<template>
+	<div>
+		<v-btn block color="primary" @click="router('/telemaketer')"
+			>Telemarketer</v-btn
+		>
+		<v-btn block color="primary" @click="router('/booking')">Booking</v-btn>
+		<v-btn block color="primary" @click="router('/calls')">Calls</v-btn>
+		<v-btn block color="primary" @click="router('/importer')"
+			>Importer</v-btn
+		>
+		<v-btn block color="primary" @click="router('/reporting')"
+			>Reporting</v-btn
+		>
+		<v-btn block color="primary" @click="router('/settings')"
+			>Settings</v-btn
+		>
+	</div>
+</template>
+
+<script>
+export default {
+	methods: {
+		router(goTo) {
+			this.$emit('routerGoTo', goTo)
+		},
+	},
+}
+</script>

src/components/importer/leadImporter.vue

+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="2" offset="4">
+        <h3 v-if="telemarketer">Telemarketer</h3>
+        <h3 v-else>Import Source</h3>
+      </v-col>
+      <v-col cols="2">
+        <v-btn color="primary" @click="SwitchMode">Switch Mode</v-btn>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="2">
+        <v-btn color="primary">Open File</v-btn>
+      </v-col>
+      <v-col cols="4">
+        <v-text-field />
+      </v-col>
+      <v-col cols="1">
+        <v-btn color="primary">Get Data</v-btn>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="2">
+        <v-btn color="primary">Get Template</v-btn>
+      </v-col>
+      <v-col cols="4">
+        <v-combobox v-if="telemarketer" label="Import Source" />
+        <v-combobox v-else label="Allocate To" />
+      </v-col>
+      <v-col cols="1" offset="5">
+        <v-combobox :items="importFilter" label="Importer" v-model="importer" />
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="10" offset="1">
+        <v-data-table :headers="headers" />
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="1" offset="10">
+        <v-text-field disabled label="Success" v-model="success" />
+      </v-col>
+      <v-col>
+        <v-text-field disabled label="Failed" v-model="failed" />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: "LeadImporter",
+  data() {
+    return {
+      telemarketer: true,
+      importer: "All",
+      success: 0,
+      failed: 0,
+      importFilter: ["All", "Success", "Failed"],
+      headers: [
+        { text: "Title", value: "title" },
+        { text: "Initials", value: "initials" },
+        { text: "First Name", value: "firstname" },
+        { text: "Surname", value: "surname" },
+        { text: "ID Number", value: "idNumber" },
+        { text: "Cellphone", value: "cellPhone" },
+        { text: "Workphone", value: "workPhone" },
+        { text: "Homephone", value: "homePhone" },
+        { text: "Email", value: "email" },
+        { text: "Street", value: "street" },
+        { text: "Suburb", value: "suburb" },
+        { text: "City", value: "city" },
+        { text: "Province", value: "province" },
+        { text: "Postal Code", value: "postalCode" },
+        { text: "Ethnicity", value: "ethnicity" },
+        { text: "Occupation", value: "occupation" },
+        { text: "Result", value: "result" }
+      ]
+    };
+  },
+  methods: {
+    SwitchMode() {
+      this.telemarketer = this.telemarketer !== true;
+    }
+  }
+};
+</script>

src/components/shared/datePicker.vue

+<template>
+  <v-menu
+    ref="menu"
+    v-model="menu"
+    :close-on-content-click="false"
+    transition="scale-transition"
+    offset-y
+    max-width="290px"
+    min-width="290px"
+  >
+    <template v-slot:activator="{ on }">
+      <v-text-field v-model="date" readonly v-on="on" label="Date"></v-text-field>
+      <!--prepend-icon="event" -->
+    </template>
+    <v-date-picker ref="picker" v-model="date" @change="save"></v-date-picker>
+  </v-menu>
+</template>
+
+<script>
+export default {
+  name: "DateTimePicker",
+  porps: {
+    label: { type: String, default: "Date" }
+  },
+  data: () => ({
+    date: null,
+    menu: false
+  }),
+  computed: {
+    computedDateFormatted() {
+      return this.formatDate(this.date);
+    }
+  },
+  methods: {
+    save(date) {
+      this.$refs.menu.save(date);
+    }
+  }
+};
+</script>
+

src/components/shared/timePicker.vue

+<template>
+  <v-menu
+    ref="menu"
+    v-model="menu2"
+    :close-on-content-click="false"
+    :nudge-right="40"
+    :return-value.sync="time"
+    transition="scale-transition"
+    offset-y
+    max-width="290px"
+    min-width="290px"
+  >
+    <template v-slot:activator="{ on }">
+      <v-text-field v-model="time" readonly v-on="on" label="Time"></v-text-field>
+      <!-- prepend-icon="access_time" -->
+    </template>
+    <v-time-picker v-if="menu2" v-model="time" full-width @click:minute="$refs.menu.save(time)"></v-time-picker>
+  </v-menu>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      time: null,
+      menu2: false,
+      modal2: false
+    };
+  }
+};
+</script>

src/components/shared/yearMonthFilter.vue

+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="1" offset="5">
+        <v-combobox label="Year" v-model="year" :items="YearList" />
+      </v-col>
+      <v-col cols="1">
+        <v-combobox label="Month" v-model="Month" :items="Months" />
+      </v-col>
+      <v-col cols="1">
+        <v-btn color="primary">Go</v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: "YearMonthFilter",
+  data() {
+    return {
+      Months: [
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December"
+      ],
+      year: new Date().getFullYear(),
+      years: []
+    };
+  },
+  computed: {
+    YearList: function() {
+      let years = this.years;
+      var tempyear = new Date().getFullYear() - 5;
+      for (var i = 0; i < 11; i++) {
+        years.push(tempyear + i);
+      }
+      return years;
+    },
+    Month: function() {
+      return this.Months[new Date().getMonth()];
+    }
+  }
+};
+</script>

src/components/telemarketer/calls.vue

+<template>
+  <v-container class="fill-height" fluid>
+    <div class="form-group row">
+      <div class="col-md-12">
+        <h2>Call Status</h2>
+      </div>
+    </div>
+    <div class="form-group row">
+      <div class="col-md-12">
+        <v-alert color="light-green" dark style="text-align:center">Idle</v-alert>
+      </div>
+    </div>
+    <div class="form-group row">
+      <div class="col-md-12">
+        <v-btn color="primary" class="col-md-1">Lead</v-btn>
+        <v-btn color="primary" class="col-md-6">Custom</v-btn>
+        <br />
+        <v-text-field clearable />
+      </div>
+    </div>
+    <div class="form-group row">
+      <div class="col-md-12">
+        <v-btn color="primary" class="col-md-1">1</v-btn>
+        <v-btn color="primary" class="col-md-1">2</v-btn>
+        <v-btn color="primary" class="col-md-1">3</v-btn>
+        <br />
+        <v-btn color="primary" class="col-md-1">4</v-btn>
+        <v-btn color="primary" class="col-md-1">5</v-btn>
+        <v-btn color="primary" class="col-md-1">6</v-btn>
+        <br />
+        <v-btn color="primary" class="col-md-1">7</v-btn>
+        <v-btn color="primary" class="col-md-1">8</v-btn>
+        <v-btn color="primary" class="col-md-1">9</v-btn>
+        <br />
+        <v-btn color="primary" class="col-md-1">*</v-btn>
+        <v-btn color="primary" class="col-md-1">0</v-btn>
+        <v-btn color="primary" class="col-md-1">#</v-btn>
+      </div>
+    </div>
+    <div class="form-group row">
+      <div class="col-md-12">
+        <v-alert color="light-green" dark style="text-align:center">0:00</v-alert>
+        <v-alert color="light-green" dark style="text-align:center"></v-alert>
+      </div>
+    </div>
+    <div class="form-group row">
+      <div class="col-md-12">
+        <v-btn color="green" class="col-md-1">
+          <!-- <v-icon>phone</v-icon> -->
+          <span class="mdi mdi-phone"></span>
+        </v-btn>
+        <v-btn color="primary" class="col-md-1">
+          <!-- <v-icon>mic</v-icon> -->
+          <span class="mdi mdi-microphone-off"></span>
+        </v-btn>
+        <v-btn color="red" class="col-md-1">
+          <span class="mdi mdi-phone-hangup large"></span>
+        </v-btn>
+      </div>
+    </div>
+  </v-container>
+</template>
+
+<script>
+export default {};
+</script>

src/components/telemarketer/feedback.vue

+<template>
+  <v-container>
+    <v-row>
+      <v-select />
+    </v-row>
+    <v-row>
+      <v-textarea filled />
+    </v-row>
+    <v-row>
+      <v-btn color="primary">Add</v-btn>
+    </v-row>
+  </v-container>
+</template>

src/components/telemarketer/lead.vue

+<template>
+  <v-container class="fill-height" fluid>
+    <v-col cols="10">
+      <v-row>
+        <v-col>
+          <v-chip class="ma-2 col-md-12" label>lead name</v-chip>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-btn color="primary">Cellphone</v-btn>
+        <v-btn color="primary">Workphone</v-btn>
+        <v-btn color="primary">Homephone</v-btn>
+      </v-row>
+      <v-row>
+        <v-text-field label="Lead Number" class="col-md-4" />
+        <v-text-field label="Language" class="col-md-4" />
+        <v-text-field label="Ethnicity" class="col-md-4" />
+      </v-row>
+      <v-row>
+        <v-text-field label="Age" class="col-md-4" />
+        <v-text-field label="Marital Status" class="col-md-4" />
+        <v-text-field label="Email" class="col-md-4" />
+      </v-row>
+      <v-row>
+        <v-text-field label="Address" class="col-md-6" />
+        <v-text-field label="Occupation" class="col-md-6" />
+      </v-row>
+      <v-row>
+        <v-text-field class="col-md-6" />
+      </v-row>
+      <v-row>
+        <v-text-field class="col-md-6" />
+        <v-text-field label="Spouse Occupation" class="col-md-6" />
+      </v-row>
+      <v-row>
+        <v-text-field class="col-md-6" />
+      </v-row>
+    </v-col>
+    <v-col cols="2">
+      <v-card class="d-inline-block mx-auto">
+        <v-container>
+          <v-row justify="space-between">
+            <v-chip class="ma-2 col-md-11" label>Comment</v-chip>
+          </v-row>
+          <v-row justify="space-between">
+            <v-textarea filled class="col-md-11" />
+          </v-row>
+          <v-row>
+            <v-col cols="1">
+              <v-btn color="primary">UPDATE</v-btn>
+            </v-col>
+          </v-row>
+          <br />
+          <v-row>
+            <v-chip class="ma-2 col-md-11" label>Reschedule Call</v-chip>
+          </v-row>
+          <v-row>
+            <v-col cols="6">
+              <datepicker />
+            </v-col>
+            <v-col cols="6">
+              <timepicker />
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col cols="1">
+              <v-btn color="primary">UPDATE</v-btn>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card>
+    </v-col>
+    <v-row>
+      <hr />
+    </v-row>
+    <v-row>
+      <v-col cols="11">
+        <v-container>
+          <v-layout align-left md-12 xs-6>
+            <v-flex align-left md-3 xs-1>
+              <v-btn color="secondery">release lead</v-btn>
+              <v-btn color="secondery">do not contact</v-btn>
+              <v-dialog v-model="dialog" persistent max-width="400">
+                <template v-slot:activator="{ on }">
+                  <v-btn color="secondery" v-on="on">Make Booking</v-btn>
+                </template>
+                <v-card>
+                  <booking />
+                  <!-- <v-card-title class="headline">Use Google's location service?</v-card-title>
+                  <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
+                  -->
+                  <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="primary" text @click="dialog = false">Close</v-btn>
+                  </v-card-actions>
+                </v-card>
+              </v-dialog>
+            </v-flex>
+            <v-flex align-left md-1 xs-1>
+              <v-text-field disabled label="Bookings" />
+            </v-flex>
+            <v-flex align-left md-1 xs-1>
+              <v-text-field disabled label="Calls" />
+            </v-flex>
+          </v-layout>
+        </v-container>
+      </v-col>
+      <v-col cols="1">
+        <v-btn color="green">
+          <span class="mdi mdi-phone"></span>
+        </v-btn>
+      </v-col>
+    </v-row>
+    <v-row>
+      <hr />
+    </v-row>
+    <v-row>
+      <v-tabs background-color="primary" class="elevation-2" dark :vertical="true">
+        <v-tab>feedback</v-tab>
+        <v-tab>bookings</v-tab>
+        <v-tab>Call History</v-tab>
+        <v-tab-item>
+          <v-container>
+            <v-layout align-left md-12 xs-6>
+              <v-flex align-left md-2 xs-1>
+                <feedback />
+              </v-flex>
+              <v-flex align-left md-10 xs-1>
+                <v-data-table :headers="feedbackHeaders" />
+              </v-flex>
+            </v-layout>
+          </v-container>
+        </v-tab-item>
+        <v-tab-item>
+          <v-data-table :headers="bookingsHeaders" />
+        </v-tab-item>
+        <v-tab-item>
+          <v-data-table :headers="callHeaders" />
+        </v-tab-item>
+      </v-tabs>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import datepicker from "../shared/datePicker";
+import timepicker from "../shared/timePicker";
+import feedback from "./feedback";
+import booking from "../booking/bookingCreate";
+
+export default {
+  components: {
+    datepicker,
+    timepicker,
+    feedback,
+    booking
+  },
+  data() {
+    return {
+      dialog: false,
+      feedbackHeaders: [
+        { text: "Feedback Type", value: "feedbackType" },
+        { text: "Notes", value: "notes" },
+        { text: "Date", value: "date" },
+        { text: "Telemarketer", value: "telemarketer" }
+      ],
+      bookingsHeaders: [
+        { text: "Booking Ref", value: "bookingRef" },
+        { text: "Booking Date", value: "BookingDate" },
+        { text: "Lead", value: "lead" },
+        { text: "Session", value: "session" },
+        { text: "Venue", value: "venue" },
+        { text: "Telemarketer", value: "telemarketer" },
+        { text: "Arrived", value: "arrived" }
+      ],
+      callHeaders: [
+        { text: "Date", value: "date" },
+        { text: "Call Duration", value: "callDuration" },
+        { text: "Bill Seconds", value: "billSeconds" },
+        { text: "Disposition", value: "disposition" },
+        { text: "Telemarketer", value: "telemarketer" }
+      ]
+    };
+  }
+};
+</script>

src/components/telemarketer/leadFindByTel.vue

+<template>
+  <v-container class="fill-height" fluid>
+    <h3>Find Lead By Tel</h3>
+    <v-row>
+      <v-col cols="10">
+        <v-text-field placeholder="Phone Number" />
+      </v-col>
+      <v-col cols="1">
+        <v-btn color="primary">Find</v-btn>
+      </v-col>
+      <v-col cols="1">
+        <v-btn color="primary">Clear</v-btn>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-card v-if="false" class="mx-auto" max-width="344">
+        <v-card-text>
+          <div style="text-align:center">Lead was found in system, lead can be allocated.</div>
+          <br />
+          <v-btn color="primary" class="col-md-12">ALLOCATE LEAD</v-btn>
+        </v-card-text>
+      </v-card>
+      <v-card v-else class="mx-auto" max-width="344">
+        <v-card-text>
+          <div style="text-align:center">Lead was not found in system, lead can be added.</div>
+        </v-card-text>
+      </v-card>
+    </v-row>
+    <v-row>
+      <v-col cols="12">
+        <div style="text-align:center">
+          <v-chip class="ma-2 col-md-12" label>Invalid Number</v-chip>
+        </div>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12">
+        <v-btn color="primary" @click="Close">Close</v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  methods: {
+    Close() {
+      this.$router.push("telemarketer");
+    }
+  }
+};
+</script>

src/components/telemarketer/leads.vue

+<template>
+  <v-container class="fill-height" fluid>
+    <v-row>
+      <v-container>
+        <v-btn color="primary" @click="FindClick">FIND BY TEL</v-btn>
+      </v-container>
+      <v-container>
+        <v-btn color="primary">RELEASE</v-btn>
+      </v-container>
+      <v-container>
+        <v-btn color="primary" @click="ReplenishClick">REPLENISH</v-btn>
+      </v-container>
+    </v-row>
+    <v-row>
+      <v-select v-model="select" :items="items" single-line />
+    </v-row>
+    <v-row>
+      <v-text-field clearable />
+    </v-row>
+    <v-row>
+      <v-col cols="12">
+        <v-data-table
+          v-if="leads.length > 0"
+          :headers="headers"
+          :items="leads"
+          :items-per-page="10"
+          class="elevation-1"
+          show-select
+        ></v-data-table>
+        <v-card v-else class="mx-auto" max-width="344">
+          <v-card-text>
+            <div style="text-align:center">No leads currently allocated</div>
+            <br />
+            <v-btn color="primary" class="col-md-12" @click="ReplenishClick">REPLENISH</v-btn>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      select: "Pool",
+      items: ["Pool", "Own", "Call Back"],
+      leads: [],
+      headers: [
+        { text: "Initals", value: "initals" },
+        { text: "Surname", value: "surname" },
+        { text: "Import Source", value: "importSource" },
+        { text: "Last Called", value: "lastCalled" },
+        { text: "Callback Date", value: "callbackDate" }
+      ]
+    };
+  },
+  methods: {
+    FindClick() {
+      this.$router.push("leadFind");
+    },
+    ReplenishClick() {
+      this.$router.push("leadReplenish");
+    }
+  }
+};
+</script>

src/components/telemarketer/replenishLeads.vue

+<template>
+  <v-card class="mx-auto" max-width="344" outlined>
+    <v-list-item style="text-align:center">
+      <v-list-item-content>
+        <v-list-item-title class="headline mb-1">Replenish Leads</v-list-item-title>
+        <v-list-item-subtitle>Select an Import Source</v-list-item-subtitle>
+        <v-select />
+        <div>OR</div>
+        <v-container class="justify-center">
+          <v-switch label="Random Sources" />
+        </v-container>
+      </v-list-item-content>
+    </v-list-item>
+
+    <v-card-actions class="justify-center">
+      <v-btn color="primary">Replenish</v-btn>
+      <v-btn color="primary" @click="Close">Close</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {
+  methods: {
+    Close() {
+      this.$router.push("/telemaketer");
+    }
+  }
+};
+</script>

src/components/telemarketer/telemarketer.vue

+<template>
+  <div></div>
+</template>

src/components/telemarketer/telemarketerBar.vue

+<template>
+  <v-container class="fill-height" fluid>
+    <v-tabs>
+      <v-tab>Leads</v-tab>
+      <v-tab>Call</v-tab>
+      <v-tab-item>
+        <leads />
+      </v-tab-item>
+      <v-tab-item>
+        <calls />
+      </v-tab-item>
+    </v-tabs>
+  </v-container>
+</template>
+
+<script>
+import calls from "./calls.vue";
+import leads from "./leads.vue";
+
+export default {
+  components: {
+    calls,
+    leads
+  }
+};
+</script>

src/components/user/login.vue

+<template>
+  <v-container class="fill-height" fluid>
+    <v-row align="center" justify="center">
+      <v-col cols="12" sm="6">
+        <v-card class="elevation-24">
+          <v-toolbar color="primary" dark flat>
+            <v-toolbar-title>Login</v-toolbar-title>
+            <v-spacer />
+          </v-toolbar>
+          <v-card-text>
+            <v-form>
+              <v-text-field label="Username" name="login" type="text" />
+              <!--prepend-icon="person"-->
+              <v-text-field
+                id="password"
+                label="Password"
+                name="password"
+                :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
+                :rules="rules.required"
+                :type="show1 ? 'text' : 'password'"
+                @click:append="show1 = !show1"
+              />
+              <!--prepend-icon="lock"-->
+            </v-form>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer />
+            <v-btn color="primary">Login</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  props: {
+    source: String
+  },
+  data() {
+    return {
+      show1: false,
+      rules: {
+        required: value => !!value || "Required."
+      }
+    };
+  }
+};
+</script>

src/main.js

-import Vue from "vue";
-import App from "./App.vue";
-import router from "./router";
-import store from "./store";
-import vuetify from "./plugins/vuetify";
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import vuetify from './plugins/vuetify'
+import 'vuetify/dist/vuetify.min.css'
+import 'material-design-icons-iconfont/dist/material-design-icons.css'
 
-Vue.config.productionTip = false;
+Vue.config.productionTip = false
 
 new Vue({
-  router,
-  store,
-  vuetify,
-  render: h => h(App)
-}).$mount("#app");
+	router,
+	store,
+	vuetify,
+	render: h => h(App),
+}).$mount('#app')

src/router/index.js

-import Vue from "vue";
-import VueRouter from "vue-router";
-import Home from "../views/Home.vue";
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../views/Home.vue'
+import Telemarketer from '../components/telemarketer/telemarketer.vue'
+import lead from '../components/telemarketer/lead.vue'
+import replenishLead from '../components/telemarketer/replenishLeads.vue'
+import leadFind from '../components/telemarketer/leadFindByTel.vue'
+import Booking from '../components/booking/booking.vue'
+import Calls from '../components/calls/calls.vue'
+import Importer from '../components/importer/leadImporter.vue'
 
-Vue.use(VueRouter);
+Vue.use(VueRouter)
 
 const routes = [
-  {
-    path: "/",
-    name: "home",
-    component: Home
-  },
-  {
-    path: "/about",
-    name: "about",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue")
-  }
-];
+	{
+		path: '/',
+		name: 'home',
+		component: Home,
+	},
+	{
+		path: '/about',
+		name: 'about',
+		// route level code-splitting
+		// this generates a separate chunk (about.[hash].js) for this route
+		// which is lazy-loaded when the route is visited.
+		component: () =>
+			import(/* webpackChunkName: "about" */ '../views/About.vue'),
+	},
+	{
+		path: '/telemaketer',
+		name: 'Telemarketing',
+		component: Telemarketer,
+	},
+	{
+		path: '/lead/:id',
+		name: 'Lead',
+		component: lead,
+	},
+	{
+		path: '/leadReplenish',
+		name: 'LeadReplenish',
+		component: replenishLead,
+	},
+	{
+		path: '/leadFind',
+		name: 'LeadFind',
+		component: leadFind,
+	},
+	{
+		path: '/booking',
+		name: 'Booking',
+		component: Booking,
+	},
+	{
+		path: '/calls',
+		name: 'Calls',
+		component: Calls,
+	},
+	{
+		path: '/importer',
+		name: 'Importer',
+		component: Importer,
+	},
+]
 
 const router = new VueRouter({
-  mode: "history",
-  base: process.env.BASE_URL,
-  routes
-});
+	mode: 'history',
+	base: process.env.BASE_URL,
+	routes,
+})
 
-export default router;
+export default router