fix: added mapping to call log status to display on Ui

frontend/src/pages/CallLog.vue

@@ -35,9 +35,9 @@
         <div>
           <Badge
             :variant="'subtle'"
-            :theme="callLog.data.status === 'Completed' ? 'green' : 'gray'"
+            :theme="statusColorMap[callLog.data.status]"
             size="md"
-            :label="callLog.data.status"
+            :label="statusLabelMap[callLog.data.status]"
           />
         </div>
       </div>
@@ -245,6 +245,22 @@ const breadcrumbs = computed(() => [
     route: { name: 'Call Log', params: { callLogId: props.callLogId } },
   },
 ])
+
+const statusLabelMap = {
+  Completed: 'Completed',
+  Busy: 'Declined',
+  Ringing: 'Ringing',
+  'No Answer': 'Missed Call',
+  'In Progress': 'In Progress',
+}
+
+const statusColorMap = {
+  Completed: 'green',
+  Busy: 'orange',
+  Ringing: 'gray',
+  'No Answer': 'red',
+  'In Progress': 'blue',
+}
 </script>
 
 <style scoped>

frontend/src/pages/CallLogs.vue

@@ -103,8 +103,8 @@ const rows = computed(() => {
         }
       } else if (row === 'status') {
         _rows[row] = {
-          label: callLog.status,
-          color: callLog.status === 'Completed' ? 'green' : 'gray',
+          label: statusLabelMap[callLog.status],
+          color: statusColorMap[callLog.status],
         }
       } else if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
@@ -116,4 +116,20 @@ const rows = computed(() => {
     return _rows
   })
 })
+
+const statusLabelMap = {
+  Completed: 'Completed',
+  Busy: 'Declined',
+  Ringing: 'Ringing',
+  'No Answer': 'Missed Call',
+  'In Progress': 'In Progress',
+}
+
+const statusColorMap = {
+  Completed: 'green',
+  Busy: 'orange',
+  Ringing: 'gray',
+  'No Answer': 'red',
+  'In Progress': 'blue',
+}
 </script>