From 41e27e95b4add8b9d71a17b7af52d9624de91f23 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 29 May 2024 22:04:30 +0530
Subject: [PATCH] fix: TypeError cannot read properties of undefined (reading
 'name') (#9562)

---
 .../components/overview/AgentTable.vue        | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
index 387e329b1..4fc7fdbf6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
@@ -64,17 +64,19 @@ export default {
   },
   computed: {
     tableData() {
-      return this.agentMetrics.map(agent => {
-        const agentInformation = this.getAgentInformation(agent.id);
-        return {
-          agent: agentInformation.name,
-          email: agentInformation.email,
-          thumbnail: agentInformation.thumbnail,
-          open: agent.metric.open || 0,
-          unattended: agent.metric.unattended || 0,
-          status: agentInformation.availability_status,
-        };
-      });
+      return this.agentMetrics
+        .filter(agentMetric => this.getAgentInformation(agentMetric.id))
+        .map(agent => {
+          const agentInformation = this.getAgentInformation(agent.id);
+          return {
+            agent: agentInformation.name || agentInformation.available_name,
+            email: agentInformation.email,
+            thumbnail: agentInformation.thumbnail,
+            open: agent.metric.open || 0,
+            unattended: agent.metric.unattended || 0,
+            status: agentInformation.availability_status,
+          };
+        });
     },
     columns() {
       return [
@@ -130,7 +132,7 @@ export default {
       this.$emit('page-change', pageIndex);
     },
     getAgentInformation(id) {
-      return this.agents.find(agent => agent.id === Number(id));
+      return this.agents?.find(agent => agent.id === Number(id));
     },
   },
 };