Feat: dashboard

assets/vue/components/dashboard/CampaignsTable.vue

@@ -1,6 +1,6 @@
 <template>
   <table class="w-full text-left border-collapse">
-    <thead class="border-b">
+    <thead class="border-b border-gray-200">
     <tr class="uppercase text-xs text-gray-500 font-semibold">
       <th class="py-3 pr-4">Campaign Name</th>
       <th class="py-3 px-4">Status</th>
@@ -14,7 +14,7 @@
     <tr
         v-for="row in rows"
         :key="row.id"
-        class="border-b last:border-0 hover:bg-gray-50"
+        class="border-b border-gray-200 last:border-0 hover:bg-gray-50"
     >
       <td class="py-3 pr-4 font-medium text-gray-900">
         {{ row.name }}

assets/vue/components/dashboard/KpiGrid.vue

@@ -10,40 +10,70 @@
 </template>
 
 <script setup>
+import { computed } from 'vue'
 import KpiCard from './KpiCard.vue'
-// todo: take the data from backend
-const kpis = [
+
+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 formatNumber = (value) => new Intl.NumberFormat().format(Number(value) || 0)
+
+const formatPercentage = (value) => `${Number(value) || 0}%`
+
+const formatChange = (value) => {
+  const numericValue = Number(value) || 0
+  const sign = numericValue > 0 ? '+' : ''
+  return `${sign}${numericValue.toFixed(1)}%`
+}
+
+const toTrend = (value) => ((Number(value) || 0) < 0 ? 'down' : 'up')
+
+const kpis = computed(() => [
   {
     id: 'subscribers',
     label: 'Total Subscribers',
-    value: '48,294',
-    change: '+12.5%',
-    trend: 'up',
+    value: formatNumber(dashboardStats.total_subscribers?.value),
+    change: formatChange(dashboardStats.total_subscribers?.change_vs_last_month),
+    trend: toTrend(dashboardStats.total_subscribers?.change_vs_last_month),
     icon: 'users',
   },
   {
     id: 'campaigns',
     label: 'Active Campaigns',
-    value: '12',
-    change: '0.0%',
-    trend: 'neutral',
+    value: formatNumber(dashboardStats.active_campaigns?.value),
+    change: formatChange(dashboardStats.active_campaigns?.change_vs_last_month),
+    trend: toTrend(dashboardStats.active_campaigns?.change_vs_last_month),
     icon: 'plane',
   },
   {
     id: 'open-rate',
     label: 'Open Rate',
-    value: '12',
-    change: '0.0%',
-    trend: 'neutral',
+    value: formatPercentage(dashboardStats.open_rate?.value),
+    change: formatChange(dashboardStats.open_rate?.change_vs_last_month),
+    trend: toTrend(dashboardStats.open_rate?.change_vs_last_month),
     icon: 'rate',
   },
   {
     id: 'bounce-rate',
     label: 'Bounce Rate',
-    value: '12',
-    change: '0.0%',
-    trend: 'neutral',
+    value: formatPercentage(dashboardStats.bounce_rate?.value),
+    change: formatChange(dashboardStats.bounce_rate?.change_vs_last_month),
+    trend: toTrend(dashboardStats.bounce_rate?.change_vs_last_month),
     icon: 'warning',
   },
-]
+])
 </script>

assets/vue/components/dashboard/PerformanceChartCard.vue

@@ -1,24 +1,128 @@
 <!-- assets/vue/components/dashboard/PerformanceChartCard.vue -->
 <template>
   <BaseCard>
-    <header class="mb-3">
-      <h2 class="text-sm font-bold text-gray-900 mb-1">
+    <header class="mb-3 flex items-center justify-between">
+      <h2 class="text-sm font-bold text-gray-900">
         Campaign Performance
       </h2>
       <p class="text-gray-500 text-xs mb-0">
         Daily opens and clicks for the last 30 days
       </p>
     </header>
 
-    <div
-        class="flex items-center justify-center mt-3 rounded-lg bg-gray-100 text-gray-500 text-sm"
-        style="height: 220px;"
-    >
-      <span>Chart Placeholder</span>
+    <div class="mt-3" style="height: 220px;">
+      <apexchart
+          type="area"
+          height="220"
+          :options="chartOptions"
+          :series="series"
+      />
     </div>
   </BaseCard>
 </template>
 
 <script setup>
+import { computed } from 'vue'
 import BaseCard from '../../components/base/BaseCard.vue'
+import VueApexCharts from 'vue3-apexcharts'
+
+defineOptions({
+  components: {
+    apexchart: VueApexCharts,
+  },
+})
+
+const props = defineProps({
+  chart: {
+    type: Object,
+    required: true,
+    default: () => ({
+      labels: [],
+      series: [],
+    }),
+  },
+})
+
+const series = computed(() => props.chart?.series ?? [])
+
+const chartOptions = computed(() => ({
+  chart: {
+    type: 'area',
+    toolbar: { show: false },
+    zoom: { enabled: false },
+    sparkline: { enabled: false },
+    fontFamily: 'inherit',
+  },
+  stroke: {
+    curve: 'smooth',
+    width: 2,
+  },
+  fill: {
+    type: 'gradient',
+    gradient: {
+      shadeIntensity: 1,
+      opacityFrom: 0.18,
+      opacityTo: 0.03,
+      stops: [0, 100],
+    },
+  },
+  colors: ['#10b981', '#3b82f6'],
+  dataLabels: {
+    enabled: false,
+  },
+  grid: {
+    borderColor: '#e5e7eb',
+    strokeDashArray: 4,
+    padding: {
+      left: 8,
+      right: 8,
+      top: 0,
+      bottom: 0,
+    },
+  },
+  legend: {
+    show: true,
+    position: 'top',
+    horizontalAlign: 'right',
+    fontSize: '12px',
+    markers: {
+      width: 8,
+      height: 8,
+      radius: 99,
+    },
+  },
+  xaxis: {
+    categories: props.chart?.labels ?? [],
+    axisBorder: { show: false },
+    axisTicks: { show: false },
+    labels: {
+      style: {
+        colors: '#9ca3af',
+        fontSize: '12px',
+      },
+    },
+  },
+  yaxis: {
+    labels: {
+      style: {
+        colors: '#9ca3af',
+        fontSize: '12px',
+      },
+      formatter: (value) => Math.round(value).toLocaleString(),
+    },
+  },
+  tooltip: {
+    shared: true,
+    intersect: false,
+    y: {
+      formatter: (value) => value.toLocaleString(),
+    },
+  },
+  markers: {
+    size: 0,
+    hover: {
+      size: 4,
+    },
+  },
+}))
 </script>