- {{ label }}
+ {{ label }}
- {{ value }}
+ {{ value }}
{{ change }} vs last month
@@ -36,5 +36,5 @@ const props = defineProps({
icon: String,
})
-const trendClass = computed(() => (props.trend === 'down' ? 'text-red-600' : 'text-green-600'))
+const trendClass = computed(() => (props.trend === 'down' ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400'))
diff --git a/assets/vue/components/dashboard/KpiGrid.vue b/assets/vue/components/dashboard/KpiGrid.vue
index 4835163..d645e99 100644
--- a/assets/vue/components/dashboard/KpiGrid.vue
+++ b/assets/vue/components/dashboard/KpiGrid.vue
@@ -13,22 +13,12 @@
import { computed } from 'vue'
import KpiCard from './KpiCard.vue'
-const appElement = document.getElementById('vue-app')
-
-const parseDashboardStats = () => {
- const raw = appElement?.dataset.dashboardStats
- if (!raw) {
- return {}
- }
-
- try {
- return JSON.parse(raw)
- } catch {
- return {}
- }
-}
-
-const dashboardStats = parseDashboardStats()
+const props = defineProps({
+ summary: {
+ type: Object,
+ default: null,
+ },
+})
const formatNumber = (value) => new Intl.NumberFormat().format(Number(value) || 0)
@@ -46,33 +36,33 @@ const kpis = computed(() => [
{
id: 'subscribers',
label: 'Total Subscribers',
- value: formatNumber(dashboardStats.total_subscribers?.value),
- change: formatChange(dashboardStats.total_subscribers?.change_vs_last_month),
- trend: toTrend(dashboardStats.total_subscribers?.change_vs_last_month),
+ value: formatNumber(props.summary?.totalSubscribers?.value),
+ change: formatChange(props.summary?.totalSubscribers?.changeVsLastMonth),
+ trend: toTrend(props.summary?.totalSubscribers?.changeVsLastMonth),
icon: 'users',
},
{
id: 'campaigns',
label: 'Active Campaigns',
- value: formatNumber(dashboardStats.active_campaigns?.value),
- change: formatChange(dashboardStats.active_campaigns?.change_vs_last_month),
- trend: toTrend(dashboardStats.active_campaigns?.change_vs_last_month),
+ value: formatNumber(props.summary?.activeCampaigns?.value),
+ change: formatChange(props.summary?.activeCampaigns?.changeVsLastMonth),
+ trend: toTrend(props.summary?.activeCampaigns?.changeVsLastMonth),
icon: 'plane',
},
{
id: 'open-rate',
label: 'Open Rate',
- value: formatPercentage(dashboardStats.open_rate?.value),
- change: formatChange(dashboardStats.open_rate?.change_vs_last_month),
- trend: toTrend(dashboardStats.open_rate?.change_vs_last_month),
+ value: formatPercentage(props.summary?.openRate?.value),
+ change: formatChange(props.summary?.openRate?.changeVsLastMonth),
+ trend: toTrend(props.summary?.openRate?.changeVsLastMonth),
icon: 'rate',
},
{
id: 'bounce-rate',
label: 'Bounce Rate',
- value: formatPercentage(dashboardStats.bounce_rate?.value),
- change: formatChange(dashboardStats.bounce_rate?.change_vs_last_month),
- trend: toTrend(dashboardStats.bounce_rate?.change_vs_last_month),
+ value: formatPercentage(props.summary?.bounceRate?.value),
+ change: formatChange(props.summary?.bounceRate?.changeVsLastMonth),
+ trend: toTrend(props.summary?.bounceRate?.changeVsLastMonth),
icon: 'warning',
},
])
diff --git a/assets/vue/components/dashboard/PerformanceChartCard.vue b/assets/vue/components/dashboard/PerformanceChartCard.vue
index 4dd02a2..010be74 100644
--- a/assets/vue/components/dashboard/PerformanceChartCard.vue
+++ b/assets/vue/components/dashboard/PerformanceChartCard.vue
@@ -2,10 +2,10 @@
@@ -25,6 +25,7 @@
import { computed } from 'vue'
import BaseCard from '../../components/base/BaseCard.vue'
import VueApexCharts from 'vue3-apexcharts'
+import { useDarkMode } from '../../composables/useDarkMode'
defineOptions({
components: {
@@ -43,6 +44,8 @@ const props = defineProps({
},
})
+const { isDark } = useDarkMode()
+
const series = computed(() => props.chart?.series ?? [])
const chartOptions = computed(() => ({
@@ -71,7 +74,7 @@ const chartOptions = computed(() => ({
enabled: false,
},
grid: {
- borderColor: '#e5e7eb',
+ borderColor: isDark.value ? '#334155' : '#e5e7eb',
strokeDashArray: 4,
padding: {
left: 8,
@@ -85,6 +88,9 @@ const chartOptions = computed(() => ({
position: 'top',
horizontalAlign: 'right',
fontSize: '12px',
+ labels: {
+ colors: isDark.value ? '#cbd5e1' : '#374151',
+ },
markers: {
width: 8,
height: 8,
@@ -97,7 +103,7 @@ const chartOptions = computed(() => ({
axisTicks: { show: false },
labels: {
style: {
- colors: '#9ca3af',
+ colors: isDark.value ? '#64748b' : '#9ca3af',
fontSize: '12px',
},
},
@@ -105,7 +111,7 @@ const chartOptions = computed(() => ({
yaxis: {
labels: {
style: {
- colors: '#9ca3af',
+ colors: isDark.value ? '#64748b' : '#9ca3af',
fontSize: '12px',
},
formatter: (value) => Math.round(value).toLocaleString(),
@@ -114,6 +120,7 @@ const chartOptions = computed(() => ({
tooltip: {
shared: true,
intersect: false,
+ theme: isDark.value ? 'dark' : 'light',
y: {
formatter: (value) => value.toLocaleString(),
},
diff --git a/assets/vue/components/dashboard/QuickActionsCard.vue b/assets/vue/components/dashboard/QuickActionsCard.vue
index ba403f4..2d3c442 100644
--- a/assets/vue/components/dashboard/QuickActionsCard.vue
+++ b/assets/vue/components/dashboard/QuickActionsCard.vue
@@ -1,7 +1,7 @@
@@ -11,14 +11,14 @@
v-for="action in quickActions"
:key="action.id"
:href="action.href"
- class="rounded-xl border border-gray-200 bg-gray-100/70 px-4 py-4 text-center transition-colors hover:bg-gray-100"
+ class="rounded-xl border border-gray-200 bg-gray-100/70 px-4 py-4 text-center transition-colors hover:bg-gray-100 dark:border-slate-700 dark:bg-slate-800/70 dark:hover:bg-slate-700"
>
-
+
{{ action.label }}
diff --git a/assets/vue/components/dashboard/RecentCampaignsCard.vue b/assets/vue/components/dashboard/RecentCampaignsCard.vue
index 0f6f010..2a83ce4 100644
--- a/assets/vue/components/dashboard/RecentCampaignsCard.vue
+++ b/assets/vue/components/dashboard/RecentCampaignsCard.vue
@@ -2,7 +2,7 @@
diff --git a/assets/vue/components/lists/AddSubscribersModal.vue b/assets/vue/components/lists/AddSubscribersModal.vue
index 421e261..2cf7d0b 100644
--- a/assets/vue/components/lists/AddSubscribersModal.vue
+++ b/assets/vue/components/lists/AddSubscribersModal.vue
@@ -8,21 +8,21 @@
>
-