fix: show sla details on lead list view

crm/fcrm/doctype/crm_lead/crm_lead.py

@@ -215,6 +215,9 @@ class CRMLead(Document):
 			"mobile_no",
 			"lead_owner",
 			"first_name",
+			"sla_status",
+			"first_response_time",
+			"first_responded_on",
 			"modified",
 			"image",
 		]

frontend/src/components/ListViews/LeadsListView.vue

@@ -53,9 +53,31 @@
               <PhoneIcon class="h-4 w-4" />
             </div>
           </template>
-          <div v-if="['modified', 'creation'].includes(column.key)" class="truncate text-base">
+          <div
+            v-if="
+              [
+                'modified',
+                'creation',
+                'first_response_time',
+                'first_responded_on',
+              ].includes(column.key)
+            "
+            class="truncate text-base"
+          >
             {{ item.timeAgo }}
           </div>
+          <div
+            v-else-if="column.key === 'sla_status'"
+            class="truncate text-base"
+          >
+            <Badge
+              v-if="item.label"
+              :variant="'subtle'"
+              :theme="item.color"
+              size="md"
+              :label="item.label"
+            />
+          </div>
           <div v-else-if="column.type === 'Check'">
             <FormControl
               type="checkbox"
@@ -83,6 +105,7 @@ import {
   ListSelectBanner,
   ListRowItem,
   FormControl,
+  Badge,
 } from 'frappe-ui'
 
 const props = defineProps({

frontend/src/pages/Leads.vue

@@ -65,7 +65,7 @@ import { statusesStore } from '@/stores/statuses'
 import { useOrderBy } from '@/composables/orderby'
 import { useFilter } from '@/composables/filter'
 import { useDebounceFn } from '@vueuse/core'
-import { dateFormat, dateTooltipFormat, timeAgo } from '@/utils'
+import { dateFormat, dateTooltipFormat, timeAgo, formatTime } from '@/utils'
 import {
   FeatherIcon,
   Dialog,
@@ -154,6 +154,16 @@ const rows = computed(() => {
           label: lead.status,
           color: getLeadStatus(lead.status)?.iconColorClass,
         }
+      } else if (row == 'sla_status') {
+        _rows[row] = {
+          label: lead.sla_status,
+          color:
+            lead.sla_status === 'Failed'
+              ? 'red'
+              : lead.sla_status === 'Fulfilled'
+              ? 'green'
+              : 'gray',
+        }
       } else if (row == 'lead_owner') {
         _rows[row] = {
           label: lead.lead_owner && getUser(lead.lead_owner).full_name,
@@ -164,6 +174,17 @@ const rows = computed(() => {
           label: dateFormat(lead[row], dateTooltipFormat),
           timeAgo: timeAgo(lead[row]),
         }
+      } else if (['first_response_time', 'first_responded_on'].includes(row)) {
+        _rows[row] = {
+          label: lead.first_responded_on
+            ? dateFormat(lead.first_responded_on, dateTooltipFormat)
+            : '',
+          timeAgo: lead[row]
+            ? row == 'first_responded_on'
+              ? timeAgo(lead[row])
+              : formatTime(lead[row])
+            : '',
+        }
       }
     })
     return _rows