fix: create call logs list page and added in sidebar

frontend/src/components/AppSidebar.vue

@@ -37,6 +37,7 @@ import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import DashboardIcon from '@/components/Icons/DashboardIcon.vue'
+import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import NavLinks from '@/components/NavLinks.vue'
 
 const navigations = [
@@ -60,6 +61,11 @@ const navigations = [
     icon: NoteIcon,
     route: { name: 'Notes' },
   },
+  {
+    name: 'Call Logs',
+    icon: PhoneIcon,
+    route: { name: 'Call Logs' },
+  },
   {
     name: 'Dashboard',
     icon: DashboardIcon,

frontend/src/components/CallUI.vue

@@ -250,18 +250,18 @@ function addDeviceListeners() {
 
   device.on('disconnect', (conn) => {
     log.value = 'Call ended disconnect.'
-    update_call_log(conn)
+    // update_call_log(conn)
   })
 }
 
-function update_call_log(conn, status = 'Completed') {
-  console.log('connection', conn)
-  if (!conn.parameters.CallSid) return
-  call('crm.twilio.api.update_call_log', {
-    call_sid: conn.parameters.CallSid,
-    status: status,
-  })
-}
+// function update_call_log(conn, status = 'Completed') {
+//   console.log('connection', conn)
+//   if (!conn.parameters.CallSid) return
+//   call('crm.twilio.api.update_call_log', {
+//     call_sid: conn.parameters.CallSid,
+//     status: status,
+//   })
+// }
 
 function toggleMute() {
   if (_call.value.isMuted()) {
@@ -370,7 +370,7 @@ async function makeOutgoingCall(number) {
         callStatus.value = ''
         muted.value = false
         counterUp.value.stop()
-        update_call_log(conn)
+        // update_call_log(conn)
       })
       _call.value.on('cancel', () => {
         log.value = `Call ended from makeOutgoing call cancel.`

frontend/src/pages/CallLogs.vue

@@ -0,0 +1,124 @@
+<template>
+  <LayoutHeader>
+    <template #left-header>
+      <Breadcrumbs :items="[{ label: list.title }]" />
+    </template>
+  </LayoutHeader>
+  <div class="flex justify-between items-center px-5 pb-2.5 border-b">
+    <div class="flex items-center gap-2">
+      <Button label="Sort">
+        <template #prefix><SortIcon class="h-4" /></template>
+      </Button>
+      <Button label="Filter">
+        <template #prefix><FilterIcon class="h-4" /></template>
+      </Button>
+    </div>
+    <div class="flex items-center gap-2">
+      <Button icon="more-horizontal" />
+    </div>
+  </div>
+  <ListView :list="list" :columns="columns" :rows="rows" row-key="name" />
+</template>
+
+<script setup>
+import ListView from '@/components/ListView.vue'
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
+import SortIcon from '@/components/Icons/SortIcon.vue'
+import FilterIcon from '@/components/Icons/FilterIcon.vue'
+import { Button, createListResource } from 'frappe-ui'
+import { computed } from 'vue'
+
+const list = {
+  title: 'Call Logs',
+  plural_label: 'Call Logs',
+  singular_label: 'Call Log',
+}
+
+const callLogs = createListResource({
+  type: 'list',
+  doctype: 'CRM Call Log',
+  fields: [
+    'from',
+    'to',
+    'duration',
+    'start_time',
+    'end_time',
+    'status',
+    'type',
+    'recording_url',
+    'modified',
+  ],
+  orderBy: 'modified desc',
+  cache: 'Call Logs',
+  pageLength: 999,
+  auto: true,
+})
+
+const columns = [
+  {
+    label: 'From',
+    key: 'from',
+    type: 'data',
+    size: 'w-32',
+  },
+  {
+    label: 'To',
+    key: 'to',
+    type: 'data',
+    size: 'w-32',
+  },
+  {
+    label: 'Duration',
+    key: 'duration',
+    type: 'data',
+    size: 'w-20',
+  },
+  {
+    label: 'Type',
+    key: 'type',
+    type: 'data',
+    size: 'w-32',
+  },
+  {
+    label: 'Status',
+    key: 'status',
+    type: 'data',
+    size: 'w-32',
+  },
+  {
+    label: 'Start Time',
+    key: 'start_time',
+    type: 'data',
+    size: 'w-32',
+  },
+  {
+    label: 'End Time',
+    key: 'end_time',
+    type: 'data',
+    size: 'w-32',
+  },
+  {
+    label: 'Last modified',
+    key: 'modified',
+    type: 'pretty_date',
+    size: 'w-28',
+  },
+]
+
+const rows = computed(() => {
+  return callLogs.data?.map((callLog) => {
+    return {
+      name: callLog.name,
+      from: callLog.from,
+      to: callLog.to,
+      duration: callLog.duration,
+      type: callLog.type,
+      status: callLog.status,
+      start_time: callLog.start_time,
+      end_time: callLog.end_time,
+      modified: callLog.modified,
+    }
+  })
+})
+</script>

frontend/src/router.js

@@ -39,6 +39,11 @@ const routes = [
     name: 'Contacts',
     component: () => import('@/pages/Contacts.vue'),
   },
+  {
+    path: '/call-logs',
+    name: 'Call Logs',
+    component: () => import('@/pages/CallLogs.vue'),
+  },
   {
     path: '/dashboard',
     name: 'Dashboard',