fix: added user avatar, logo, status indicator in list view

frontend/src/components/Icons/IndicatorIcon.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <rect width="16" height="16" rx="4.5" :fill="color" />
+    <circle cx="8" cy="8" r="3" fill="white" />
+  </svg>
+</template>
+<script setup>
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'currentColor',
+  },
+})
+</script>

frontend/src/components/ListView.vue

@@ -63,10 +63,21 @@
           <div
             v-for="column in columns"
             :key="column.key"
-            class="text-base text-gray-900 truncate"
+            class="flex items-center space-x-2.5"
             :class="[column.size, column.align]"
           >
-            {{ row[column.key] }}
+            <div v-if="column.type === 'user'">
+              <Avatar v-if="row[column.key]" :label="row[column.key]" size="md" />
+            </div>
+            <div v-else-if="column.type === 'logo'">
+              <Avatar :label="row[column.key]" size="md" shape="square" />
+            </div>
+            <div v-else-if="column.type === 'status'">
+              <IndicatorIcon />
+            </div>
+            <div class="text-base text-gray-900 truncate">
+              {{ row[column.key] }}
+            </div>
           </div>
         </div>
       </div>
@@ -74,9 +85,10 @@
   </div>
 </template>
 <script setup>
-import { FeatherIcon, Dropdown, Checkbox } from 'frappe-ui'
+import { FeatherIcon, Dropdown, Checkbox, Avatar } from 'frappe-ui'
 import SortIcon from './Icons/SortIcon.vue'
 import FilterIcon from './Icons/FilterIcon.vue'
+import IndicatorIcon from './Icons/IndicatorIcon.vue'
 import { ref } from 'vue'
 
 const props = defineProps({

frontend/src/pages/Contacts.vue

@@ -24,16 +24,19 @@ const columns = [
   {
     label: 'Full Name',
     key: 'full_name',
+    type: 'user',
     size: 'w-44',
   },
   {
     label: 'Email',
     key: 'email',
+    type: 'email',
     size: 'w-44',
   },
   {
     label: 'Phone',
     key: 'phone',
+    type: 'phone',
     size: 'w-44',
   },
 ]

frontend/src/pages/Leads.vue

@@ -34,31 +34,37 @@ const columns = [
   {
     label: 'Full name',
     key: 'full_name',
+    type: 'user',
     size: 'w-44',
   },
   {
     label: 'Organization',
     key: 'organization_name',
+    type: 'logo',
     size: 'w-44',
   },
   {
     label: 'Status',
     key: 'status',
+    type: 'status',
     size: 'w-44',
   },
   {
     label: 'Email',
     key: 'email',
+    type: 'email',
     size: 'w-44',
   },
   {
     label: 'Mobile no',
     key: 'mobile_no',
+    type: 'phone',
     size: 'w-44',
   },
   {
     label: 'Lead owner',
     key: 'lead_owner',
+    type: 'user',
     size: 'w-44',
   },
 ]