feat: Contact details screen

app/javascript/dashboard/components-next/Contacts/ContactsLayout.vue

@@ -1,10 +1,14 @@
 <script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
 import Button from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
+import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
 
-defineProps({
+const props = defineProps({
   headerTitle: {
     type: String,
     default: '',
@@ -29,9 +33,48 @@ defineProps({
     type: Number,
     default: 15,
   },
+  isDetailView: {
+    type: Boolean,
+    default: false,
+  },
+  selectedContact: {
+    type: Object,
+    default: () => ({}),
+  },
 });
 
-const emit = defineEmits(['filter', 'more', 'message', 'update:currentPage']);
+const emit = defineEmits([
+  'filter',
+  'more',
+  'message',
+  'update:currentPage',
+  'goToContactsList',
+]);
+
+const { t } = useI18n();
+
+const selectedContactName = computed(() => {
+  return props.selectedContact?.name;
+});
+
+const breadcrumbItems = computed(() => {
+  const items = [
+    {
+      label: t('CONTACTS_LAYOUT.HEADER.BREADCRUMB.CONTACTS'),
+      link: '#',
+    },
+  ];
+  if (props.selectedContact) {
+    items.push({
+      label: selectedContactName.value,
+    });
+  }
+  return items;
+});
+
+const handleBreadcrumbClick = () => {
+  emit('goToContactsList');
+};
 
 const updateCurrentPage = page => {
   emit('update:currentPage', page);
@@ -43,11 +86,19 @@ const updateCurrentPage = page => {
     <header class="sticky top-0 z-10 px-6 lg:px-0">
       <div class="w-full max-w-[900px] mx-auto">
         <div class="flex items-center justify-between w-full h-20 gap-2">
-          <span class="text-xl font-medium text-n-slate-12">
+          <span
+            v-if="!isDetailView"
+            class="text-xl font-medium text-n-slate-12"
+          >
             {{ headerTitle }}
           </span>
+          <Breadcrumb
+            v-else
+            :items="breadcrumbItems"
+            @click="handleBreadcrumbClick"
+          />
           <div class="flex items-center gap-2">
-            <div class="flex items-center gap-2">
+            <div v-if="!isDetailView" class="flex items-center gap-2">
               <Input
                 :placeholder="$t('CONTACTS_LAYOUT.HEADER.SEARCH_PLACEHOLDER')"
                 :custom-input-class="['h-8 ltr:!pl-8 rtl:!pr-8']"
@@ -61,12 +112,14 @@ const updateCurrentPage = page => {
               </Input>
             </div>
             <Button
+              v-if="!isDetailView"
               icon="i-lucide-list-filter"
               size="sm"
               color="slate"
               @click="emit('filter')"
             />
             <Button
+              v-if="!isDetailView"
               icon="i-lucide-ellipsis-vertical"
               size="sm"
               color="slate"