329 lines
10 KiB
Vue
329 lines
10 KiB
Vue
<template>
|
|
<div>
|
|
<LayoutsBreadcrumb />
|
|
|
|
<!-- Page Info Card -->
|
|
<rs-card class="mb-6">
|
|
<template #header>
|
|
<div class="flex items-center">
|
|
<Icon class="mr-2 text-primary" name="ic:outline-bar-chart"></Icon>
|
|
<h1 class="text-xl font-bold text-primary">Analytics Dashboard</h1>
|
|
</div>
|
|
</template>
|
|
<template #body>
|
|
<p class="text-gray-600">
|
|
View metrics for notification performance, delivery rates, and user engagement.
|
|
</p>
|
|
</template>
|
|
</rs-card>
|
|
|
|
<!-- Key Metrics Summary -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-6 mb-6">
|
|
<rs-card
|
|
v-for="(metric, index) in keyMetrics"
|
|
:key="index"
|
|
>
|
|
<div class="pt-5 pb-3 px-5 flex items-center gap-4">
|
|
<div
|
|
class="p-5 flex justify-center items-center bg-primary/20 rounded-2xl"
|
|
>
|
|
<Icon class="text-primary text-3xl" :name="metric.icon"></Icon>
|
|
</div>
|
|
<div class="flex-1 truncate">
|
|
<span class="block font-bold text-2xl leading-tight text-primary">
|
|
{{ metric.value }}
|
|
</span>
|
|
<span class="text-sm font-medium text-gray-600">
|
|
{{ metric.title }}
|
|
</span>
|
|
<div class="flex items-center mt-1" v-if="metric.change">
|
|
<Icon
|
|
:name="metric.trend === 'up' ? 'ic:outline-trending-up' : 'ic:outline-trending-down'"
|
|
:class="metric.trend === 'up' ? 'text-green-500' : 'text-red-500'"
|
|
class="text-sm mr-1"
|
|
/>
|
|
<span
|
|
:class="metric.trend === 'up' ? 'text-green-600' : 'text-red-600'"
|
|
class="text-xs font-medium"
|
|
>
|
|
{{ metric.change }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</rs-card>
|
|
</div>
|
|
|
|
<!-- Time Range Filter -->
|
|
<rs-card class="mb-6">
|
|
<template #body>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<h3 class="text-lg font-semibold text-primary">Analytics Period</h3>
|
|
<FormKit
|
|
type="select"
|
|
v-model="selectedPeriod"
|
|
:options="periodOptions"
|
|
outer-class="mb-0"
|
|
@input="updateAnalytics"
|
|
/>
|
|
</div>
|
|
<rs-button variant="primary-outline" size="sm" @click="refreshAnalytics">
|
|
<Icon name="ic:outline-refresh" class="mr-1"/> Refresh
|
|
</rs-button>
|
|
</div>
|
|
</template>
|
|
</rs-card>
|
|
|
|
<div v-if="analyticsLoading" class="flex justify-center py-16">
|
|
<Loading />
|
|
</div>
|
|
|
|
<template v-else>
|
|
<!-- Main Analytics Charts -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
|
<rs-card>
|
|
<template #header>
|
|
<div class="flex items-center">
|
|
<Icon name="ic:outline-bar-chart" class="mr-2 text-primary"/>
|
|
<h3 class="text-lg font-semibold text-primary">Delivery Rate Analysis</h3>
|
|
</div>
|
|
</template>
|
|
<template #body>
|
|
<div class="h-64 bg-gray-100 dark:bg-gray-800 flex items-center justify-center rounded">
|
|
<div class="text-center">
|
|
<p class="text-gray-500">Delivery success over time</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 grid grid-cols-3 gap-4 text-center">
|
|
<div>
|
|
<div class="text-2xl font-bold text-green-600">{{ channelPerformance[0]?.successRate || '0' }}%</div>
|
|
<div class="text-sm text-gray-600">Success Rate</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-2xl font-bold text-red-600">{{ channelPerformance[0]?.failureRate || '0' }}%</div>
|
|
<div class="text-sm text-gray-600">Failed Rate</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-2xl font-bold text-yellow-600">{{ channelPerformance[0]?.bounceRate || '0' }}%</div>
|
|
<div class="text-sm text-gray-600">Bounce Rate</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</rs-card>
|
|
|
|
<rs-card>
|
|
<template #header>
|
|
<div class="flex items-center">
|
|
<Icon name="ic:outline-device-hub" class="mr-2 text-primary"/>
|
|
<h3 class="text-lg font-semibold text-primary">Channel Performance</h3>
|
|
</div>
|
|
</template>
|
|
<template #body>
|
|
<div class="space-y-4">
|
|
<div
|
|
v-for="channel in channelPerformance"
|
|
:key="channel.name"
|
|
class="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"
|
|
>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center">
|
|
<Icon :name="channel.icon" class="mr-2 text-primary"/>
|
|
<span class="font-medium">{{ channel.name }}</span>
|
|
</div>
|
|
<span class="text-sm font-bold text-primary">{{ channel.successRate }}%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div
|
|
class="bg-primary h-2 rounded-full"
|
|
:style="{ width: channel.successRate + '%' }"
|
|
></div>
|
|
</div>
|
|
<div class="flex justify-between text-xs text-gray-500 mt-1">
|
|
<span>{{ channel.sent }} sent</span>
|
|
<span>{{ channel.failed }} failed</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</rs-card>
|
|
</div>
|
|
|
|
<!-- Recent Analytics Events -->
|
|
<rs-card>
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<Icon name="ic:outline-insights" class="mr-2 text-primary"/>
|
|
<h3 class="text-lg font-semibold text-primary">Recent Events</h3>
|
|
</div>
|
|
<rs-button variant="outline" size="sm" @click="navigateTo('/notification/log-audit/logs')">
|
|
View All Logs
|
|
</rs-button>
|
|
</div>
|
|
</template>
|
|
<template #body>
|
|
<div v-if="recentEvents.length > 0" class="space-y-3">
|
|
<div
|
|
v-for="(event, index) in recentEvents"
|
|
:key="index"
|
|
class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"
|
|
>
|
|
<div class="flex items-center">
|
|
<div
|
|
class="w-3 h-3 rounded-full mr-3"
|
|
:class="{
|
|
'bg-green-500': event.type === 'success',
|
|
'bg-yellow-500': event.type === 'warning',
|
|
'bg-red-500': event.type === 'error',
|
|
'bg-blue-500': event.type === 'info',
|
|
}"
|
|
></div>
|
|
<div>
|
|
<p class="font-medium">{{ event.title }}</p>
|
|
<p class="text-sm text-gray-600">{{ event.description }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-sm font-medium">{{ event.value }}</p>
|
|
<p class="text-xs text-gray-500">{{ event.time }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="text-center py-8 text-gray-500">
|
|
<Icon name="ic:outline-search-off" class="text-4xl mb-2 mx-auto" />
|
|
<p>No recent events found.</p>
|
|
</div>
|
|
</template>
|
|
</rs-card>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
definePageMeta({
|
|
title: "Analytics Dashboard",
|
|
middleware: ["auth"],
|
|
requiresAuth: true,
|
|
breadcrumb: [
|
|
{
|
|
name: "Dashboard",
|
|
path: "/dashboard",
|
|
},
|
|
{
|
|
name: "Notification",
|
|
path: "/notification",
|
|
},
|
|
{
|
|
name: "Logs & Audit Trail",
|
|
path: "/notification/log-audit",
|
|
},
|
|
{
|
|
name: "Analytics",
|
|
path: "/notification/log-audit/analytics",
|
|
type: "current"
|
|
},
|
|
],
|
|
});
|
|
|
|
import { ref, computed, onMounted } from 'vue'
|
|
|
|
// Use the notification logs composable
|
|
const {
|
|
analyticsData,
|
|
analyticsLoading,
|
|
analyticsError,
|
|
fetchAnalytics,
|
|
formatDate
|
|
} = useNotificationLogs()
|
|
|
|
// Time period selection
|
|
const selectedPeriod = ref('7d')
|
|
const periodOptions = [
|
|
{ label: 'Last 24 Hours', value: '1d' },
|
|
{ label: 'Last 7 Days', value: '7d' },
|
|
{ label: 'Last 30 Days', value: '30d' },
|
|
{ label: 'Last 90 Days', value: '90d' },
|
|
{ label: 'Last 12 Months', value: '12m' },
|
|
]
|
|
|
|
// Key metrics data - will be updated from API
|
|
const keyMetrics = computed(() => analyticsData.value?.keyMetrics || [
|
|
{
|
|
title: "Total Sent",
|
|
value: "0",
|
|
icon: "ic:outline-send",
|
|
trend: "up",
|
|
change: "+0.0%"
|
|
},
|
|
{
|
|
title: "Success Rate",
|
|
value: "0.0%",
|
|
icon: "ic:outline-check-circle",
|
|
trend: "up",
|
|
change: "+0.0%"
|
|
},
|
|
{
|
|
title: "Open Rate",
|
|
value: "0.0%",
|
|
icon: "ic:outline-open-in-new",
|
|
trend: "up",
|
|
change: "+0.0%"
|
|
},
|
|
{
|
|
title: "Click Rate",
|
|
value: "0.0%",
|
|
icon: "ic:outline-touch-app",
|
|
trend: "up",
|
|
change: "+0.0%"
|
|
},
|
|
])
|
|
|
|
// Channel performance data - will be updated from API
|
|
const channelPerformance = computed(() => analyticsData.value?.channelPerformance || [
|
|
{
|
|
name: "Email",
|
|
icon: "ic:outline-email",
|
|
successRate: "0",
|
|
sent: "0",
|
|
failed: "0",
|
|
bounceRate: "0",
|
|
failureRate: "0"
|
|
},
|
|
])
|
|
|
|
// Recent analytics events from API
|
|
const recentEvents = computed(() => analyticsData.value?.recentEvents || [])
|
|
|
|
// Methods
|
|
const updateAnalytics = async () => {
|
|
await fetchAnalytics(selectedPeriod.value)
|
|
}
|
|
|
|
const refreshAnalytics = async () => {
|
|
await fetchAnalytics(selectedPeriod.value)
|
|
}
|
|
|
|
// Load initial data
|
|
onMounted(async () => {
|
|
await fetchAnalytics(selectedPeriod.value)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.formkit-outer) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
:deep(.formkit-label) {
|
|
font-weight: 500;
|
|
color: rgb(107 114 128);
|
|
font-size: 0.875rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
:deep(.formkit-input) {
|
|
border-radius: 0.5rem;
|
|
}
|
|
</style> |