fix: created ListRowItem component to render different type of row item using single component

frontend/src/components/ListRowItem.vue

@@ -0,0 +1,15 @@
+<template>
+  <slot name="prefix"></slot>
+  <slot v-if="$slots.default" />
+  <div v-else class="text-base text-gray-900 truncate">
+    {{ value }}
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  value: {
+    type: String,
+    default: null,
+  },
+})
+</script>

frontend/src/components/ListView.vue

@@ -77,7 +77,12 @@
             class="flex items-center space-x-2.5"
             :class="[column.size, column.align]"
           >
-            <div v-if="column.type === 'avatar'">
+            <ListRowItem :value="getValue(row[column.key]).label">
+              <template #prefix>
+                <div v-if="column.type === 'indicator'">
+                  <IndicatorIcon :class="getValue(row[column.key]).color" />
+                </div>
+                <div v-else-if="column.type === 'avatar'">
                   <Avatar
                     v-if="getValue(row[column.key]).label"
                     class="flex items-center"
@@ -96,12 +101,8 @@
                     shape="square"
                   />
                 </div>
-            <div v-else-if="column.type === 'indicator'">
+              </template>
-              <IndicatorIcon :class="getValue(row[column.key]).color" />
+            </ListRowItem>
-            </div>
-            <div class="text-base text-gray-900 truncate">
-              {{ getValue(row[column.key]).label }}
-            </div>
           </div>
         </router-link>
       </div>
@@ -156,6 +157,7 @@ import IndicatorIcon from './Icons/IndicatorIcon.vue'
 import { reactive, ref, computed } from 'vue'
 import LayoutHeader from './LayoutHeader.vue'
 import Breadcrumbs from './Breadcrumbs.vue'
+import ListRowItem from './ListRowItem.vue'
 
 const props = defineProps({
   list: {