Analytics

assets/router/index.js

@@ -8,6 +8,7 @@ import CampaignEditView from '../vue/views/CampaignEditView.vue'
 import TemplatesView from '../vue/views/TemplatesView.vue'
 import TemplateEditView from '../vue/views/TemplateEditView.vue'
 import BouncesView from '../vue/views/BouncesView.vue'
+import AnalyticsView from '../vue/views/AnalyticsView.vue'
 import PublicPagesView from '../vue/views/PublicPagesView.vue'
 import PublicPageEditView from '../vue/views/PublicPageEditView.vue'
 import SettingsView from '../vue/views/SettingsView.vue'
@@ -26,6 +27,7 @@ export const router = createRouter({
         { path: '/campaigns/:campaignId/edit', name: 'campaign-edit', component: CampaignEditView, meta: { title: 'Edit Campaign' } },
         { path: '/lists/:listId/subscribers', name: 'list-subscribers', component: ListSubscribersView, meta: { title: 'List Subscribers' } },
         { path: '/bounces', name: 'bounces', component: BouncesView, meta: { title: 'Bounces' } },
+        { path: '/analytics', name: 'analytics', component: AnalyticsView, meta: { title: 'Analytics' } },
         { path: '/public', name: 'public-pages', component: PublicPagesView, meta: { title: 'Public Pages' } },
         { path: '/public/create', name: 'public-page-create', component: PublicPageEditView, meta: { title: 'Create Public Page' } },
         { path: '/public/:pageId/edit', name: 'public-page-edit', component: PublicPageEditView, meta: { title: 'Edit Public Page' } },

assets/vue/api.js

@@ -11,7 +11,8 @@ import {
     SubscriberAttributesClient,
     TemplatesClient,
     BouncesClient,
-    ConfigClient, AdminAttributeClient,
+    ConfigClient,
+    AdminAttributeClient,
 } from '@tatevikgr/rest-api-client';
 
 const AUTHENTICATION_REDIRECT_PATH = '/login';

assets/vue/views/AnalyticsView.spec.js

@@ -0,0 +1,94 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+
+vi.mock('vue3-apexcharts', () => ({
+  default: {
+    name: 'VueApexCharts',
+    template: '<div class="apexchart-stub" />',
+  },
+}))
+
+const statisticsClient = {
+  getCampaignStatistics: vi.fn(),
+  getStatisticsOfViewOpens: vi.fn(),
+  getTopDomains: vi.fn(),
+  getDomainConfirmationStatistics: vi.fn(),
+  getTopLocalParts: vi.fn(),
+}
+
+vi.mock('../api', () => ({
+  statisticsClient,
+}))
+
+const layoutStub = {
+  name: 'AdminLayout',
+  template: '<div class="admin-layout"><slot /></div>',
+}
+
+describe('AnalyticsView', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    vi.clearAllMocks()
+  })
+
+  it('loads analytics data from the statistics client and renders summary cards', async () => {
+    statisticsClient.getCampaignStatistics.mockResolvedValue({
+      items: [
+        {
+          campaignId: 7,
+          subject: 'Summer launch',
+          dateSent: '2026-06-01',
+          sent: 200,
+          bounces: 4,
+          uniqueViews: 120,
+          totalClicks: 33,
+        },
+      ],
+    })
+    statisticsClient.getStatisticsOfViewOpens.mockResolvedValue({
+      items: [
+        {
+          campaignId: 7,
+          subject: 'Summer launch',
+          sent: 200,
+          uniqueViews: 120,
+          rate: 60,
+        },
+      ],
+    })
+    statisticsClient.getTopDomains.mockResolvedValue({
+      items: [{ domain: 'example.com', subscribers: 42 }],
+    })
+    statisticsClient.getDomainConfirmationStatistics.mockResolvedValue({
+      domain: 'example.com',
+      total: 100,
+      confirmed: 80,
+      unconfirmed: 20,
+      confirmationRate: 80,
+    })
+    statisticsClient.getTopLocalParts.mockResolvedValue({
+      items: [{ localPart: 'alex', count: 12, percentage: 24 }],
+    })
+
+    vi.resetModules()
+
+    const { default: AnalyticsView } = await import('./AnalyticsView.vue')
+
+    const wrapper = mount(AnalyticsView, {
+      global: {
+        stubs: {
+          AdminLayout: layoutStub,
+        },
+      },
+    })
+
+    await flushPromises()
+
+    expect(statisticsClient.getCampaignStatistics).toHaveBeenCalledWith(null, 100)
+    expect(wrapper.text()).toContain('Campaigns tracked')
+    expect(wrapper.text()).toContain('Summer launch')
+    expect(wrapper.text()).toContain('example.com')
+    expect(wrapper.text()).toContain('alex')
+    expect(wrapper.text()).toContain('80.0%')
+  })
+})