Improved summary

.env.development

@@ -1 +1 @@
-VITE_EO_SERVICES_URL=https://localhost:9000
+VITE_EO_SERVICES_URL=http://localhost:9000

src/App.vue

@@ -11,7 +11,6 @@ function onInput(e) {
 }
 
 async function fetchData() {
-  console.log('fetchingData');
   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
@@ -30,11 +29,10 @@ async function fetchData() {
     <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>
-    
-    <div><button @click="fetchData">Fetch Contacts</button></div>
 
-    <ContactsSummary v-if="contactData" :results="contactData.data.findContactsCompletedBetween" />
+    <ContactsSummary v-if="contactData" :summary="contactData.data.summary" />
     <div v-else>No Contacts Found</div>
     <ContactTable v-if="contactData" :tableData="contactData.data.findContactsCompletedBetween.edges" />
     

src/components/ContactsSummary.vue

@@ -1,28 +1,33 @@
 <script setup>
 // eslint-disable-next-line
-defineProps(["results"]);
+defineProps(["summary"]);
 </script>
 
 <template>
-    <div class="stats">
+    <div v-if="summary" class="stats">
         <div class="item">
-            <div class="measure">{{ results.totalCount }}</div>
+            <div class="measure">{{ summary.totalCount }}</div>
             <div class="label">Contacts Found</div>
         </div>
 
         <div class="item">
-            <div class="measure">{{ results.totalHTDays }}</div>
+            <div class="measure">{{ summary.totalInboundCount }}</div>
+            <div class="label">INBOUND Contacts Found</div>
+        </div>
+
+        <div class="item">
+            <div class="measure">{{ summary.totalHTDays.toFixed(2) }}</div>
             <div class="label">Total Handle Time (days)</div>
         </div>
 
         <div class="item">
-            <div class="measure">{{ results.activeHTDays }}</div>
-            <div class="label">Active Handle Time (days)</div>
+            <div class="measure">{{ summary.activeHTMinutes.toFixed(2) }}</div>
+            <div class="label">Active Handle Time (minutes)</div>
         </div>
 
         <div class="item">
-            <div class="measure">{{ results.totalATHours }}</div>
-            <div class="label">Total Active Time (days)</div>
+            <div class="measure">{{ (summary.totalInboundActiveSeconds / 6).toFixed(2) }}</div>
+            <div class="label">Total [INBOUND] Active Time (minutes)</div>
         </div>
     </div>
 </template>

src/components/HandledBy.vue

@@ -3,5 +3,6 @@
 defineProps(["handledBy"]);
 </script>
 <template>
-    <p>{{ handledBy.username }}</p>
+    <p v-if="handledBy">{{ handledBy.username }}</p>
+    <p v-else>unknown</p>
 </template>

src/components/OutcomeList.vue

@@ -4,5 +4,7 @@ defineProps(["outcomes"]);
 
 </script>
 <template>
-    <div v-for="outcome in outcomes.edges" :key="outcome">{{ outcome.node.text }} </div>
+    <div v-if="outcomes">
+        <div v-for="outcome in outcomes.edges" :key="outcome">{{ outcome.node.text }} </div>
+    </div>
 </template>