feat: added breadcrumbs on listview and lead

frontend/src/components/Breadcrumbs.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="flex min-w-0 items-center text-ellipsis whitespace-nowrap">
+    <template v-for="(item, i) in items" :key="item.label">
+      <router-link
+        class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-600 hover:text-gray-700 last:text-gray-900 last:hover:text-gray-900"
+        :to="item.route || ''"
+      >
+        <slot name="prefix" :item="item" />
+        <span>{{ item.label }}</span>
+      </router-link>
+      <span
+        v-if="i != items.length - 1"
+        class="mx-0.5 text-base text-gray-500"
+      >
+        /
+      </span>
+    </template>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true,
+  },
+})
+</script>

frontend/src/components/ListView.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutHeader>
     <template #left-header>
-      <h1 class="font-semibold text-xl">{{ list.title }}</h1>
+      <Breadcrumbs :items="[{ label: list.title }]" />
     </template>
     <template #right-header>
       <Button variant="solid" label="Create">
@@ -155,6 +155,7 @@ import FilterIcon from './Icons/FilterIcon.vue'
 import IndicatorIcon from './Icons/IndicatorIcon.vue'
 import { reactive, ref, computed } from 'vue'
 import LayoutHeader from './LayoutHeader.vue'
+import Breadcrumbs from './Breadcrumbs.vue'
 
 const props = defineProps({
   list: {

frontend/src/pages/Lead.vue

@@ -1,27 +1,7 @@
 <template>
   <LayoutHeader v-if="lead.doc">
     <template #left-header>
-      <FeatherIcon
-        name="chevron-left"
-        class="h-5 cursor-pointer"
-        @click="$router.back()"
-      />
-      <h1 class="font-semibold text-xl">{{ lead.doc.lead_name }}</h1>
-      <div
-        v-if="lead.doc.organization_name"
-        class="flex items-center space-x-2 bg-gray-100 hover:bg-gray-200 p-1 pr-2 rounded ml-2 cursor-pointer"
-      >
-        <Avatar
-          class="flex items-center"
-          :image="lead.doc.organization_logo"
-          :label="lead.doc.organization_name"
-          size="sm"
-          shape="square"
-        />
-        <div class="text-base text-gray-700 truncate">
-          {{ lead.doc.organization_name }}
-        </div>
-      </div>
+      <Breadcrumbs :items="breadcrumbs" />
     </template>
     <template #right-header>
       <div
@@ -64,7 +44,7 @@
         v-slot="{ selected }"
       >
         <button
-          class="flex items-center gap-2 py-[7px] -mb-[1px] text-base text-gray-600 border-b border-transparent hover:text-gray-900 hover:border-gray-400 transition-all duration-300 ease-in-out"
+          class="flex items-center gap-2 py-[9px] -mb-[1px] text-base text-gray-600 border-b border-transparent hover:text-gray-900 hover:border-gray-400 transition-all duration-300 ease-in-out"
           :class="{ 'text-gray-900': selected }"
         >
           <component v-if="tab.icon" :is="tab.icon" class="h-5" />
@@ -143,6 +123,7 @@ import {
 import { TransitionPresets, useTransition } from '@vueuse/core'
 import { usersStore } from '../stores/users'
 import { ref, computed } from 'vue'
+import Breadcrumbs from '../components/Breadcrumbs.vue'
 
 const { getUser } = usersStore()
 
@@ -158,6 +139,15 @@ const lead = createDocumentResource({
   auto: true,
 })
 
+const breadcrumbs = computed(() => {
+  let items = [{ label: 'Leads', route: { name: 'Leads' } }]
+  items.push({
+    label: lead.doc.lead_name,
+    route: { name: 'Lead', params: { leadId: lead.doc.name } },
+  })
+  return items
+})
+
 const activities = [
   {
     type: 'change',