Feat: dashboard + subscribers

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/RecentCampaignsCard.vue

@@ -18,35 +18,9 @@ import BaseCard from '../../components/base/BaseCard.vue'
 import CampaignsTable from './CampaignsTable.vue'
 
 const props = defineProps({
-  // todo: take from backend
   rows: {
     type: Array,
-    default: () => [
-      {
-        id: 'campaign-1',
-        name: 'Summer Sale',
-        status: 'Sent',
-        date: '2023-07-01',
-        openRate: '15%',
-        clickRate: '5%',
-      },
-      {
-        id: 'campaign-2',
-        name: 'Winter Sale',
-        status: 'scheduled',
-        date: '2023-07-01',
-        openRate: '23%',
-        clickRate: '0%',
-      },
-      {
-        id: 'campaign-3',
-        name: 'Autumn Sale',
-        status: 'draft',
-        date: '2023-07-01',
-        openRate: '11%',
-        clickRate: '0%',
-      },
-    ],
+    default: () => [],
   },
 })
 </script>

assets/vue/views/DashboardView.vue

@@ -17,7 +17,7 @@
       <!-- Recent items list -->
       <section class="grid grid-cols-1 gap-6">
         <div class="w-full">
-          <RecentCampaignsCard />
+          <RecentCampaignsCard :rows="recentCampaigns" />
         </div>
       </section>
     </div>
@@ -30,11 +30,30 @@ import KpiGrid from '../components/dashboard/KpiGrid.vue'
 import PerformanceChartCard from '../components/dashboard/PerformanceChartCard.vue'
 import RecentCampaignsCard from '../components/dashboard/RecentCampaignsCard.vue'
 
-const chart = {
-  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+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 chart = dashboardStats.chart || {
+  labels: [],
   series: [
-    { name: 'Opens', data: [2500, 2200, 10000, 4000, 4500, 3800] },
-    { name: 'Clicks', data: [4200, 3500, 3200, 3000, 3600, 4100] },
+    { name: 'Opens', data: [] },
+    { name: 'Clicks', data: [] },
   ],
 }
+
+const recentCampaigns = dashboardStats.recent_campaigns || []
 </script>

src/Controller/DashboardController.php

@@ -4,20 +4,72 @@
 
 namespace PhpList\WebFrontend\Controller;
 
+use PhpList\RestApiClient\Endpoint\StatisticsClient;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
 class DashboardController extends AbstractController
 {
+    public function __construct(private readonly StatisticsClient $statisticsClient)
+    {
+    }
+
     #[Route('/', name: 'home', methods: ['GET'])]
     public function index(Request $request): Response
     {
+        $stats = $this->statisticsClient->getDashboardStats();
+        $recentCampaigns = [];
+        foreach ($stats->recentCampaigns as $campaign) {
+            $recentCampaigns[] = [
+                'name' => $campaign->name,
+                'status' => $campaign->status,
+                'date' => $campaign->date?->format('Y-m-d') ?? '',
+                'openRate' => $campaign->openRate,
+                'clickRate' => $campaign->clickRate,
+            ];
+        }
+
+        $chartLabels = [];
+        $chartOpens = [];
+        $chartClicks = [];
+        foreach ($stats->campaignPerformance as $point) {
+            $chartLabels[] = $point->date?->format('M d') ?? '';
+            $chartOpens[] = $point->opens;
+            $chartClicks[] = $point->clicks;
+        }
+
         return $this->render('spa.html.twig', [
             'page' => 'Dashboard',
             'api_token' => $request->getSession()->get('auth_token'),
             'api_base_url' => $this->getParameter('api_base_url'),
+            'dashboard_stats' => [
+                'total_subscribers' => [
+                    'value' => $stats->totalSubscribers->value,
+                    'change_vs_last_month' => $stats->totalSubscribers->changeVsLastMonth,
+                ],
+                'active_campaigns' => [
+                    'value' => $stats->activeCampaigns->value,
+                    'change_vs_last_month' => $stats->activeCampaigns->changeVsLastMonth,
+                ],
+                'open_rate' => [
+                    'value' => $stats->openRate->value,
+                    'change_vs_last_month' => $stats->openRate->changeVsLastMonth,
+                ],
+                'bounce_rate' => [
+                    'value' => $stats->bounceRate->value,
+                    'change_vs_last_month' => $stats->bounceRate->changeVsLastMonth,
+                ],
+                'recent_campaigns' => $recentCampaigns,
+                'chart' => [
+                    'labels' => $chartLabels,
+                    'series' => [
+                        ['name' => 'Opens', 'data' => $chartOpens],
+                        ['name' => 'Clicks', 'data' => $chartClicks],
+                    ],
+                ],
+            ],
         ]);
     }
 }

templates/spa.html.twig

@@ -5,6 +5,7 @@
 {% block body %}
     <div id="vue-app" 
          data-api-token="{{ api_token|default('') }}" 
-         data-api-base-url="{{ api_base_url|default('') }}">
+         data-api-base-url="{{ api_base_url|default('') }}"
+         data-dashboard-stats="{{ dashboard_stats|default({})|json_encode|e('html_attr') }}">
     </div>
 {% endblock %}