feat: Route view

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -168,6 +168,12 @@ const menuItems = computed(() => {
       label: t('SIDEBAR.CAPTAIN'),
       to: accountScopedRoute('captain'),
     },
+    {
+      name: 'Contacts',
+      label: t('SIDEBAR.CONTACTS'),
+      icon: 'i-lucide-contact',
+      to: accountScopedRoute('contacts_dashboard_index'),
+    },
     {
       name: 'Contacts',
       label: t('SIDEBAR.CONTACTS'),

app/javascript/dashboard/routes/dashboard/contact/contact.routes.js

@@ -0,0 +1,23 @@
+import { frontendURL } from 'dashboard/helper/URLHelper.js';
+
+import ContactsPageRouteView from './pages/ContactsPageRouteView.vue';
+
+const contactsRoutes = {
+  routes: [
+    {
+      path: frontendURL('accounts/:accountId/contacts-new'),
+      component: ContactsPageRouteView,
+      children: [
+        {
+          path: 'ongoing',
+          name: 'contacts_dashboard_index',
+          meta: {
+            permissions: ['administrator', 'agent', 'contact_manage'],
+          },
+        },
+      ],
+    },
+  ],
+};
+
+export default contactsRoutes;

app/javascript/dashboard/routes/dashboard/contact/pages/ContactsPageRouteView.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { onMounted, computed } from 'vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+
+import ContactsLayout from 'dashboard/components-next/Contacts/ContactsLayout.vue';
+import ContactsList from 'dashboard/components-next/Contacts/Pages/ContactsList.vue';
+
+const store = useStore();
+
+const contacts = useMapGetter('contacts/getContacts');
+const uiFlags = useMapGetter('contacts/getUIFlags');
+const meta = useMapGetter('contacts/getMeta');
+
+const currentPage = computed(() => Number(meta.value?.currentPage));
+const totalItems = computed(() => meta.value?.count);
+
+const fetchContacts = page => {
+  store.dispatch('contacts/get', { page });
+};
+
+onMounted(() => {
+  fetchContacts(1);
+});
+
+const updateCurrentPage = page => {
+  fetchContacts(page);
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
+  >
+    <ContactsLayout
+      :header-title="$t('CONTACTS_LAYOUT.HEADER.TITLE')"
+      :button-label="$t('CONTACTS_LAYOUT.HEADER.MESSAGE_BUTTON')"
+      :current-page="currentPage"
+      :total-items="totalItems"
+      @update:current-page="updateCurrentPage"
+    >
+      <ContactsList :contacts="contacts" />
+    </ContactsLayout>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/dashboard.routes.js

@@ -7,6 +7,7 @@ import { routes as inboxRoutes } from './inbox/routes';
 import { frontendURL } from '../../helper/URLHelper';
 import helpcenterRoutes from './helpcenter/helpcenter.routes';
 import campaignsRoutes from './campaigns/campaigns.routes';
+import contactsRoutes from './contact/contact.routes';
 
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
@@ -37,6 +38,7 @@ export default {
         ...notificationRoutes,
         ...helpcenterRoutes.routes,
         ...campaignsRoutes.routes,
+        ...contactsRoutes.routes,
       ],
     },
     {