Added router

src/App.vue

@@ -1,42 +1,6 @@
-<script setup>
-import { ref } from 'vue'
-import ContactTable from './components/ContactTable.vue'
-import ContactsSummary from './components/ContactsSummary.vue';
-
-const threadId = ref('')
-const contactData = ref(null)
-
-function onInput(e) {
-  threadId.value = e.target.value
-}
-
-async function fetchData() {
-  contactData.value = null
-  const res = await fetch(`${import.meta.env.VITE_EO_SERVICES_URL}/thread-tracker?threadId=${ threadId.value }`, {
-      credentials: "include" // fetch won't send cookies unless you set credentials
-    })
-    contactData.value = await res.json()
-    console.log(contactData.value)
-}
-
-</script>
 <template>
-  <div id="app">
-    <header>
-      <h1>Message Tracking Time</h1>
-    </header>
-
-    <div>
-      <label for="threadId">Reference ID: </label>
-      <input id="threadId" :value="threadId" @input="onInput" placeholder="enter Reference ID here" />
-      <button @click="fetchData">Fetch Contacts</button>
-    </div>
-
-    <ContactsSummary v-if="contactData" :summary="contactData.data.summary" />
-    <div v-else>No Contacts Found</div>
-    <ContactTable v-if="contactData" :tableData="contactData.data.findContactsCompletedBetween.edges" />
-    
-  </div>
-</template>
-<style scoped></style>
-
+    <!-- <router-link to="/">Home</router-link>
+    <router-link to="/about">About</router-link>
+    <router-link to="/referenceId">Reference ID Tracker</router-link> -->
+    <router-view></router-view>
+</template>

src/ReferenceID.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { ref } from 'vue'
+import ContactTable from './components/ContactTable.vue'
+import ContactsSummary from './components/ContactsSummary.vue';
+
+const referenceId = ref('')
+const contactData = ref(null)
+
+function onInput(e) {
+  referenceId.value = e.target.value
+}
+
+async function fetchData() {
+  contactData.value = null
+  const res = await fetch(`${import.meta.env.VITE_EO_SERVICES_URL}/unified-data-gateway?referenceId=${ referenceId.value }`, {
+      credentials: "include" // fetch won't send cookies unless you set credentials
+    })
+    contactData.value = await res.json()
+    console.log(contactData.value)
+}
+
+</script>
+<template>
+  <div id="app">
+    <!-- <header>
+      <h1>Message Tracking Time</h1>
+    </header> -->
+
+    <div>
+      <label for="referenceId">Reference ID: </label>
+      <input id="referenceId" :value="referenceId" @input="onInput" placeholder="enter Reference ID here" />
+      <button @click="fetchData">Search Contacts</button>
+    </div>
+
+    <ContactsSummary v-if="contactData" :summary="contactData.data.summary" />
+    <div v-else>No Contacts Found</div>
+    <ContactTable v-if="contactData" :tableData="contactData.data.findContactsCompletedBetween.edges" />
+    
+  </div>
+</template>
+<style scoped></style>
+

src/components/ContactsSummary.vue

@@ -26,7 +26,7 @@ defineProps(["summary"]);
         </div>
 
         <div class="item">
-            <div class="measure">{{ (summary.totalInboundActiveSeconds / 6).toFixed(2) }}</div>
+            <div class="measure">{{ (summary.totalInboundActiveSeconds / 60).toFixed(2) }}</div>
             <div class="label">Total [INBOUND] Active Time (minutes)</div>
         </div>
     </div>

src/main.js

@@ -1,5 +1,22 @@
-import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
+import { createApp } from "vue";
+import { createRouter, createWebHashHistory } from "vue-router";
 
-createApp(App).mount('#app')
+import "./style.css";
+import App from "./App.vue";
+import Home from "./views/Home.vue";
+import About from "./views/About.vue";
+import ReferenceID from "./ReferenceID.vue";
+
+const routes = [
+  { path: "/", component: Home },
+  { path: "/about", component: About },
+  { path: "/referenceId/", component: ReferenceID },
+];
+
+const router = createRouter({
+  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
+  history: createWebHashHistory(),
+  routes, // short for `routes: routes`
+});
+
+createApp(App).use(router).mount("#app");

src/style.css

@@ -74,7 +74,6 @@ button {
     min-width: 0px;
     font-size: 12px;
     padding: 0 6px !important;
-    margin: 0;
     font-family: "OpenSans", Arial, sans-serif;
     text-align: center;
     background-repeat: no-repeat;

src/views/About.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="about">
+        <h1>About</h1>
+    </div>
+</template>

src/views/Home.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="home">
+        <h1>Home</h1>
+    </div>
+</template>