feat: updated the contact details page layout

app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed, ref } from 'vue';
+import { onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
@@ -8,12 +8,6 @@ import { useRoute, useRouter } from 'vue-router';
 import ContactsDetailsLayout from 'dashboard/components-next/Contacts/ContactsDetailsLayout.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import ContactDetails from 'dashboard/components-next/Contacts/Pages/ContactDetails.vue';
-import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
-import ContactNotes from 'dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue';
-import ContactHistory from 'dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue';
-import ContactMedia from 'dashboard/components-next/Contacts/ContactsSidebar/ContactMedia.vue';
-import ContactMerge from 'dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue';
-import ContactCustomAttributes from 'dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue';
 
 const store = useStore();
 const route = useRoute();
@@ -22,9 +16,6 @@ const router = useRouter();
 const contact = useMapGetter('contacts/getContactById');
 const uiFlags = useMapGetter('contacts/getUIFlags');
 
-const activeTab = ref('attributes');
-const contactMergeRef = ref(null);
-
 const isFetchingItem = computed(() => uiFlags.value.isFetchingItem);
 const isMergingContact = computed(() => uiFlags.value.isMerging);
 const isUpdatingContact = computed(() => uiFlags.value.isUpdating);
@@ -37,25 +28,6 @@ const showSpinner = computed(
 
 const { t } = useI18n();
 
-const CONTACT_TABS_OPTIONS = [
-  { key: 'ATTRIBUTES', value: 'attributes' },
-  { key: 'HISTORY', value: 'history' },
-  { key: 'NOTES', value: 'notes' },
-  { key: 'MEDIA', value: 'media' },
-  { key: 'MERGE', value: 'merge' },
-];
-
-const tabs = computed(() => {
-  return CONTACT_TABS_OPTIONS.map(tab => ({
-    label: t(`CONTACTS_LAYOUT.SIDEBAR.TABS.${tab.key}`),
-    value: tab.value,
-  }));
-});
-
-const activeTabIndex = computed(() => {
-  return CONTACT_TABS_OPTIONS.findIndex(v => v.value === activeTab.value);
-});
-
 const goToContactsList = () => {
   if (window.history.state?.back || window.history.length > 1) {
     router.back();
@@ -74,10 +46,6 @@ const fetchActiveContact = async () => {
   }
 };
 
-const handleTabChange = tab => {
-  activeTab.value = tab.value;
-};
-
 const fetchContactNotes = () => {
   const { contactId } = route.params;
   if (contactId) store.dispatch('contactNotes/get', { contactId });
@@ -151,40 +119,6 @@ onMounted(() => {
         :selected-contact="selectedContact"
         @go-to-contacts-list="goToContactsList"
       />
-      <template #sidebarHeader>
-        <div class="px-6 pt-6 pb-3">
-          <TabBar
-            :tabs="tabs"
-            :initial-active-tab="activeTabIndex"
-            class="w-full [&>button]:w-full bg-n-alpha-black2"
-            @tab-changed="handleTabChange"
-          />
-        </div>
-      </template>
-      <template #sidebar>
-        <div
-          v-if="isFetchingItem"
-          class="flex items-center justify-center py-10 text-n-slate-11"
-        >
-          <Spinner />
-        </div>
-        <template v-else>
-          <ContactCustomAttributes
-            v-if="activeTab === 'attributes'"
-            :selected-contact="selectedContact"
-          />
-          <ContactNotes v-if="activeTab === 'notes'" />
-          <ContactHistory v-if="activeTab === 'history'" />
-          <ContactMedia v-if="activeTab === 'media'" />
-          <ContactMerge
-            v-if="activeTab === 'merge'"
-            ref="contactMergeRef"
-            :selected-contact="selectedContact"
-            @go-to-contacts-list="goToContactsList"
-            @reset-tab="handleTabChange(CONTACT_TABS_OPTIONS[0])"
-          />
-        </template>
-      </template>
     </ContactsDetailsLayout>
   </div>
 </template>