From e720127286239da9567263412618365bde977e1d Mon Sep 17 00:00:00 2001
From: Dharmesh Patel <dspatel44@gmail.com>
Date: Sat, 18 Apr 2026 11:51:09 +0530
Subject: [PATCH 01/11] Add subscriber activity class for the data provider.

---
 .../class-mailchimp-subscriber-activity.php   | 328 ++++++++++++++++++
 mailchimp.php                                 |   5 +
 2 files changed, 333 insertions(+)
 create mode 100644 includes/class-mailchimp-subscriber-activity.php

diff --git a/includes/class-mailchimp-subscriber-activity.php b/includes/class-mailchimp-subscriber-activity.php
new file mode 100644
index 0000000..05f061d
--- /dev/null
+++ b/includes/class-mailchimp-subscriber-activity.php
@@ -0,0 +1,328 @@
+<?php
+/**
+ * Subscriber activity (new subscribers vs unsubscribes) data provider for the
+ * Analytics page.
+ *
+ * Fetches list activity from the Mailchimp Marketing API
+ * (`lists/{list_id}/activity`), caches the raw response in a transient, and
+ * exposes an admin-only AJAX endpoint that returns the data filtered to the
+ * requested date range and aggregated into daily / weekly / monthly /
+ * quarterly / yearly buckets for the "Subscriber change over time" chart.
+ *
+ * @package Mailchimp
+ */
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Class Mailchimp_Subscriber_Activity
+ */
+class Mailchimp_Subscriber_Activity {
+
+	/**
+	 * Transient key prefix for the cached raw API response.
+	 */
+	const CACHE_PREFIX = 'mailchimp_sf_subscriber_activity_';
+
+	/**
+	 * Transient TTL in seconds.
+	 */
+	const CACHE_TTL = 15 * MINUTE_IN_SECONDS;
+
+	/**
+	 * Hard cap enforced by the Mailchimp Activity API.
+	 */
+	const API_WINDOW_DAYS = 180;
+
+	/**
+	 * Register hooks.
+	 *
+	 * @return void
+	 */
+	public function init() {
+		add_action( 'wp_ajax_mailchimp_sf_get_subscriber_activity', array( $this, 'handle_get' ) );
+	}
+
+	/**
+	 * AJAX handler for `mailchimp_sf_get_subscriber_activity`.
+	 *
+	 * @return void
+	 */
+	public function handle_get() {
+		if ( ! current_user_can( MCSF_CAP_THRESHOLD ) ) {
+			wp_send_json_error( array( 'message' => esc_html__( 'Unauthorized.', 'mailchimp' ) ), 403 );
+		}
+
+		check_ajax_referer( 'mailchimp_sf_analytics_admin_nonce', 'nonce' );
+
+		$list_id   = isset( $_POST['list_id'] ) ? sanitize_text_field( wp_unslash( $_POST['list_id'] ) ) : '';
+		$date_from = isset( $_POST['date_from'] ) ? sanitize_text_field( wp_unslash( $_POST['date_from'] ) ) : '';
+		$date_to   = isset( $_POST['date_to'] ) ? sanitize_text_field( wp_unslash( $_POST['date_to'] ) ) : '';
+
+		if ( '' === $list_id || ! preg_match( '/^[a-zA-Z0-9]+$/', $list_id ) ) {
+			wp_send_json_error( array( 'message' => esc_html__( 'Invalid list ID.', 'mailchimp' ) ), 400 );
+		}
+
+		if ( ! $this->is_valid_date( $date_from ) || ! $this->is_valid_date( $date_to ) ) {
+			wp_send_json_error( array( 'message' => esc_html__( 'Invalid date range.', 'mailchimp' ) ), 400 );
+		}
+
+		if ( strtotime( $date_from ) > strtotime( $date_to ) ) {
+			wp_send_json_error( array( 'message' => esc_html__( 'Start date must be before end date.', 'mailchimp' ) ), 400 );
+		}
+
+		$raw = $this->fetch_activity( $list_id );
+
+		if ( is_wp_error( $raw ) ) {
+			wp_send_json_error( array( 'message' => $raw->get_error_message() ), 502 );
+		}
+
+		if ( ! is_array( $raw ) ) {
+			wp_send_json_error( array( 'message' => esc_html__( 'Unable to reach Mailchimp.', 'mailchimp' ) ), 502 );
+		}
+
+		$response = $this->filter_and_aggregate( $raw, $date_from, $date_to );
+
+		wp_send_json_success( $response );
+	}
+
+	/**
+	 * Fetch (and cache) the raw list activity for a list.
+	 *
+	 * The Mailchimp Activity API always returns the most recent 180 days for a
+	 * given list regardless of query params, so a single transient can serve
+	 * multiple date-range requests within its TTL.
+	 *
+	 * @param string $list_id List ID.
+	 * @return array|WP_Error Normalized list of `{ date, new_subscribers, unsubscribes }` or error.
+	 */
+	public function fetch_activity( string $list_id ) {
+		$cache_key = self::CACHE_PREFIX . md5( $list_id );
+		$cached    = get_transient( $cache_key );
+		if ( is_array( $cached ) ) {
+			return $cached;
+		}
+
+		$api = mailchimp_sf_get_api();
+		if ( ! $api ) {
+			return new WP_Error(
+				'mailchimp_sf_not_connected',
+				esc_html__( 'Mailchimp account is not connected.', 'mailchimp' )
+			);
+		}
+
+		$response = $api->get( 'lists/' . rawurlencode( $list_id ) . '/activity', self::API_WINDOW_DAYS );
+
+		if ( is_wp_error( $response ) ) {
+			return $response;
+		}
+
+		if ( ! is_array( $response ) || ! isset( $response['activity'] ) || ! is_array( $response['activity'] ) ) {
+			return new WP_Error(
+				'mailchimp_sf_invalid_response',
+				esc_html__( 'Unexpected response from Mailchimp.', 'mailchimp' )
+			);
+		}
+
+		$normalized = array();
+		foreach ( $response['activity'] as $row ) {
+			if ( empty( $row['day'] ) ) {
+				continue;
+			}
+			$normalized[] = array(
+				'date'            => sanitize_text_field( $row['day'] ),
+				'new_subscribers' => isset( $row['subs'] ) ? (int) $row['subs'] : 0,
+				'unsubscribes'    => isset( $row['unsubs'] ) ? (int) $row['unsubs'] : 0,
+			);
+		}
+
+		set_transient( $cache_key, $normalized, self::CACHE_TTL );
+
+		return $normalized;
+	}
+
+	/**
+	 * Filter the raw (180 day) dataset to the selected range and aggregate it
+	 * into buckets appropriate for that range.
+	 *
+	 * When the requested range exceeds the API's 180-day window we intersect
+	 * with `[today - 179, today]` (inclusive, site timezone) and flag the
+	 * response as `limited`.
+	 *
+	 * @param array  $raw       Normalized rows from `fetch_activity()`.
+	 * @param string $date_from `Y-m-d`.
+	 * @param string $date_to   `Y-m-d`.
+	 * @return array Response payload.
+	 */
+	public function filter_and_aggregate( array $raw, string $date_from, string $date_to ): array {
+		$tz         = wp_timezone();
+		$from_dt    = new DateTimeImmutable( $date_from, $tz );
+		$to_dt      = new DateTimeImmutable( $date_to, $tz );
+		$today      = ( new DateTimeImmutable( 'now', $tz ) )->setTime( 0, 0, 0 );
+		$api_oldest = $today->modify( '-' . ( self::API_WINDOW_DAYS - 1 ) . ' days' );
+
+		$requested_days = (int) $from_dt->diff( $to_dt )->days + 1;
+		$limited        = $requested_days > self::API_WINDOW_DAYS;
+
+		$effective_from = $from_dt < $api_oldest ? $api_oldest : $from_dt;
+		$effective_to   = $to_dt > $today ? $today : $to_dt;
+
+		$interval = $this->get_interval( $requested_days );
+
+		$buckets      = array();
+		$total_new    = 0;
+		$total_unsubs = 0;
+
+		if ( $effective_from <= $effective_to ) {
+			// Index API rows by date so missing days can be back-filled with zeros.
+			// The Mailchimp Activity API omits days with no subscribe/unsubscribe
+			// activity, which would otherwise leave gaps in the chart timeline.
+			$by_date = array();
+			foreach ( $raw as $row ) {
+				$by_date[ $row['date'] ] = $row;
+			}
+
+			$one_day = new DateInterval( 'P1D' );
+			$cursor  = $effective_from;
+
+			while ( $cursor <= $effective_to ) {
+				$date            = $cursor->format( 'Y-m-d' );
+				$new_subscribers = isset( $by_date[ $date ]['new_subscribers'] )
+					? (int) $by_date[ $date ]['new_subscribers']
+					: 0;
+				$unsubscribes    = isset( $by_date[ $date ]['unsubscribes'] )
+					? (int) $by_date[ $date ]['unsubscribes']
+					: 0;
+
+				$key = $this->get_bucket_key( $date, $interval, $tz );
+				if ( ! isset( $buckets[ $key ] ) ) {
+					$buckets[ $key ] = array(
+						'key'             => $key,
+						'label'           => $this->get_bucket_label( $date, $interval, $tz ),
+						'new_subscribers' => 0,
+						'unsubscribes'    => 0,
+					);
+				}
+
+				$buckets[ $key ]['new_subscribers'] += $new_subscribers;
+				$buckets[ $key ]['unsubscribes']    += $unsubscribes;
+
+				$total_new    += $new_subscribers;
+				$total_unsubs += $unsubscribes;
+
+				$cursor = $cursor->add( $one_day );
+			}
+
+			ksort( $buckets );
+		}
+
+		return array(
+			'interval'     => $interval,
+			'data'         => array_values( $buckets ),
+			'total_new'    => $total_new,
+			'total_unsubs' => $total_unsubs,
+			'net_change'   => $total_new - $total_unsubs,
+			'limited'      => $limited,
+		);
+	}
+
+	/**
+	 * Pick an aggregation interval based on the requested range.
+	 *
+	 * @param int $days Inclusive day count of the requested range.
+	 * @return string One of `daily|weekly|monthly|quarterly|yearly`.
+	 */
+	public function get_interval( int $days ): string {
+		if ( $days <= 30 ) {
+			return 'daily';
+		}
+		if ( $days <= 90 ) {
+			return 'weekly';
+		}
+		if ( $days <= 365 ) {
+			return 'monthly';
+		}
+		if ( $days <= 365 * 3 ) {
+			return 'quarterly';
+		}
+		return 'yearly';
+	}
+
+	/**
+	 * Build a stable sort key for the bucket a given date falls into.
+	 *
+	 * @param string            $date     `Y-m-d`.
+	 * @param string            $interval Interval name.
+	 * @param DateTimeZone|null $tz       Timezone.
+	 * @return string
+	 */
+	public function get_bucket_key( string $date, string $interval, $tz = null ): string {
+		$tz = $tz instanceof DateTimeZone ? $tz : wp_timezone();
+		$dt = new DateTimeImmutable( $date, $tz );
+
+		switch ( $interval ) {
+			case 'weekly':
+				// ISO week starts on Monday.
+				return $dt->format( 'o-\WW' );
+			case 'monthly':
+				return $dt->format( 'Y-m' );
+			case 'quarterly':
+				$quarter = (int) ceil( (int) $dt->format( 'n' ) / 3 );
+				return $dt->format( 'Y' ) . '-Q' . $quarter;
+			case 'yearly':
+				return $dt->format( 'Y' );
+			case 'daily':
+			default:
+				return $dt->format( 'Y-m-d' );
+		}
+	}
+
+	/**
+	 * Build a human-readable label for the bucket a given date falls into.
+	 *
+	 * @param string            $date     `Y-m-d`.
+	 * @param string            $interval Interval name.
+	 * @param DateTimeZone|null $tz       Timezone.
+	 * @return string
+	 */
+	public function get_bucket_label( string $date, string $interval, $tz = null ): string {
+		$tz = $tz instanceof DateTimeZone ? $tz : wp_timezone();
+		$dt = new DateTimeImmutable( $date, $tz );
+
+		switch ( $interval ) {
+			case 'weekly':
+				$monday = $dt->modify( 'monday this week' );
+				if ( $monday > $dt ) {
+					$monday = $dt->modify( 'monday last week' );
+				}
+				return wp_date( 'M j', $monday->getTimestamp(), $tz );
+			case 'monthly':
+				return wp_date( 'M Y', $dt->getTimestamp(), $tz );
+			case 'quarterly':
+				$quarter = (int) ceil( (int) $dt->format( 'n' ) / 3 );
+				return 'Q' . $quarter . ' ' . $dt->format( 'Y' );
+			case 'yearly':
+				return $dt->format( 'Y' );
+			case 'daily':
+			default:
+				return wp_date( 'M j', $dt->getTimestamp(), $tz );
+		}
+	}
+
+	/**
+	 * Validate a `Y-m-d` date string.
+	 *
+	 * @param string $date Candidate date string.
+	 * @return bool
+	 */
+	private function is_valid_date( string $date ): bool {
+		if ( '' === $date ) {
+			return false;
+		}
+		$dt = DateTimeImmutable::createFromFormat( 'Y-m-d', $date );
+		return $dt && $dt->format( 'Y-m-d' ) === $date;
+	}
+}
diff --git a/mailchimp.php b/mailchimp.php
index 6e47fa9..40b1a2d 100644
--- a/mailchimp.php
+++ b/mailchimp.php
@@ -120,6 +120,11 @@ function () {
 $analytics_data = new Mailchimp_Analytics_Data();
 $analytics_data->init();
 
+// Subscriber activity (Mailchimp Activity API) data class.
+require_once plugin_dir_path( __FILE__ ) . 'includes/class-mailchimp-subscriber-activity.php';
+$subscriber_activity = new Mailchimp_Subscriber_Activity();
+$subscriber_activity->init();
+
 
 // Deprecated functions.
 require_once plugin_dir_path( __FILE__ ) . 'includes/mailchimp-deprecated-functions.php';

From 1f0bd879aa3a9b6277fecb0d08fbf7fc9bc37213 Mon Sep 17 00:00:00 2001
From: Dharmesh Patel <dspatel44@gmail.com>
Date: Sat, 18 Apr 2026 12:33:06 +0530
Subject: [PATCH 02/11] Add styling, JS and chart template for the loading the
 graph.

---
 assets/css/analytics.css               | 571 ++++++++++++++++++++++---
 assets/js/analytics.js                 | 419 ++++++++++++++++++
 includes/admin/templates/analytics.php | 135 +++++-
 3 files changed, 1062 insertions(+), 63 deletions(-)

diff --git a/assets/css/analytics.css b/assets/css/analytics.css
index 6a02891..4c674df 100644
--- a/assets/css/analytics.css
+++ b/assets/css/analytics.css
@@ -5,9 +5,9 @@
  */
 
 .mailchimp-sf-analytics-filters {
+	align-items: flex-end;
 	display: flex;
 	flex-wrap: wrap;
-	align-items: flex-end;
 	gap: 16px;
 	margin-bottom: 20px;
 }
@@ -19,20 +19,20 @@
 }
 
 .mailchimp-sf-analytics-filter-group > label {
+	color: #1d2327;
 	font-size: 14px;
 	font-weight: 400;
-	color: #1d2327;
 }
 
 .mailchimp-sf-analytics-filter-group select {
-	min-width: 180px;
-	height: 36px;
-	padding: 0 8px;
+	background-color: #fff;
 	border: 1px solid #8c8f94;
 	border-radius: 4px;
-	font-size: 14px;
 	color: #1d2327;
-	background-color: #fff;
+	font-size: 14px;
+	height: 36px;
+	min-width: 180px;
+	padding: 0 8px;
 }
 
 .mailchimp-sf-analytics-filter-group select:focus {
@@ -47,19 +47,19 @@
 }
 
 .mailchimp-sf-date-picker-trigger {
-	display: inline-flex;
 	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	min-width: 220px;
-	height: 40px;
-	padding: 0 10px;
+	background-color: #fff;
 	border: 1px solid #c3ced5;
-	color: var(--mailchimp-color-text);
 	border-radius: 6px;
-	font-size: 14px;
-	background-color: #fff;
+	color: var(--mailchimp-color-text);
 	cursor: pointer;
+	display: inline-flex;
+	font-size: 14px;
+	gap: 8px;
+	height: 40px;
+	justify-content: space-between;
+	min-width: 220px;
+	padding: 0 10px;
 	text-align: left;
 	transition: all 0.2s;
 }
@@ -75,44 +75,44 @@
 }
 
 .mailchimp-sf-date-picker.is-open .mailchimp-sf-date-picker-trigger {
+	background-color: rgba(1, 126, 137, 0.08);
 	border-color: var(--mailchimp-color-link, #017e89);
 	box-shadow: 0 0 0 1px var(--mailchimp-color-link, #017e89);
-	background-color: rgba(1, 126, 137, 0.08);
 }
 
 .mailchimp-sf-date-picker-trigger .dashicons {
+	color: #50575e;
 	font-size: 18px;
-	width: 18px;
 	height: 18px;
 	line-height: 18px;
-	color: #50575e;
+	width: 18px;
 }
 
 .mailchimp-sf-date-picker-trigger .indicator-date-picker {
+	bottom: 0;
 	display: flex;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    pointer-events: none;
-    justify-content: center;
-    padding: 0 8px;
-    width: 24px;
+	justify-content: center;
+	padding: 0 8px;
+	pointer-events: none;
+	position: absolute;
+	right: 0;
+	top: 0;
+	width: 24px;
 }
 
 /* Date picker popover */
 .mailchimp-sf-date-picker-popover {
-	display: none;
-	position: absolute;
-	top: calc(100% + 6px);
-	left: 0;
-	z-index: 100;
-	min-width: 480px;
-	padding: 20px;
 	background: #fff;
 	border: 1px solid #dcdcde;
 	border-radius: 8px;
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+	display: none;
+	left: 0;
+	min-width: 480px;
+	padding: 20px;
+	position: absolute;
+	top: calc(100% + 6px);
+	z-index: 100;
 }
 
 .mailchimp-sf-date-picker-popover.is-open {
@@ -127,15 +127,15 @@
 
 .mailchimp-sf-date-picker-field {
 	display: flex;
+	flex: 1;
 	flex-direction: column;
 	gap: 6px;
-	flex: 1;
 }
 
 .mailchimp-sf-date-picker-field label {
+	color: #4a5565;
 	font-size: 14px;
-    font-weight: 400;
-    color: #4A5565;
+	font-weight: 400;
 }
 
 .mailchimp-sf-date-picker-input-wrap {
@@ -164,10 +164,10 @@
 
 #mailchimp-sf-settings-page .mailchimp-sf-date-picker-field select,
 #mailchimp-sf-settings-page .mailchimp-sf-date-picker-field input[type="text"] {
-	height: 36px;
-	font-size: 14px;
-	color: #1d2327;
 	background-color: #fff;
+	color: #1d2327;
+	font-size: 14px;
+	height: 36px;
 	width: 100%;
 }
 
@@ -185,31 +185,31 @@
 /* Popover actions — .mailchimp-sf-button.btn-primary / .btn-secondary.btn-small; pill shape to match design */
 .mailchimp-sf-date-picker-actions {
 	display: flex;
-	justify-content: flex-end;
 	gap: 8px;
+	justify-content: flex-end;
 }
 
 
 /* Content area */
 .mailchimp-sf-analytics-content {
-	border: 1px solid #D3D0C8;
-    border-radius: 8px;
-    width: 100%;
-    overflow: auto;
-	padding: 24px;
 	background: #fff;
-	min-height: 200px;
+	border: 1px solid #d3d0c8;
+	border-radius: 8px;
+	box-sizing: border-box;
 	margin-bottom: 20px;
-    box-sizing: border-box;
+	min-height: 200px;
+	overflow: auto;
+	padding: 24px;
+	width: 100%;
 }
 
 .mailchimp-sf-analytics-placeholder {
-	display: flex;
 	align-items: center;
-	justify-content: center;
-	min-height: 200px;
 	color: #8c8f94;
+	display: flex;
 	font-size: 15px;
+	justify-content: center;
+	min-height: 200px;
 }
 
 /* Deep link */
@@ -218,8 +218,8 @@
 }
 
 .mailchimp-sf-analytics-deep-link a {
-	display: inline-flex;
 	align-items: center;
+	display: inline-flex;
 	gap: 6px;
 }
 
@@ -229,22 +229,23 @@
 
 .mailchimp-sf-analytics-deep-link .dashicons {
 	font-size: 16px;
-	width: 16px;
 	height: 16px;
 	line-height: 16px;
+	width: 16px;
 }
 
 /* Responsive */
 @media screen and (max-width: 782px) {
+
 	.mailchimp-sf-analytics-filters {
-		flex-direction: column;
 		align-items: stretch;
+		flex-direction: column;
 	}
 
 	.mailchimp-sf-date-picker-popover {
+		left: 0;
 		min-width: auto;
 		width: calc(100vw - 60px);
-		left: 0;
 	}
 
 	.mailchimp-sf-date-picker-popover-row {
@@ -252,8 +253,8 @@
 	}
 
 	.mailchimp-sf-date-picker-trigger {
-		width: 100%;
 		min-width: auto;
+		width: 100%;
 	}
 
 	.mailchimp-sf-analytics-filter-group select {
@@ -263,7 +264,463 @@
 }
 
 /* Datepicker */
-.datepicker-cell.selected, .datepicker-cell.selected:hover {
+.datepicker-cell.selected,
+.datepicker-cell.selected:hover {
 	background-color: var(--mailchimp-color-link, #017e89);
 	color: #fff;
 }
+
+/* -----------------------------------------------------------------------------
+ * Analytics card (shared shell for chart sections)
+ * -------------------------------------------------------------------------- */
+.mailchimp-sf-analytics-card {
+	--mc-sa-text-strong: #241C15;
+	--mc-sa-text-muted: #464E54;
+	--mc-sa-text-body: #374151;
+	--mc-sa-border: #DDDDDD;
+	--mc-sa-skeleton-grid: #f3f4f6;
+	--mc-sa-blue: #2B72FB;
+	--mc-sa-red: #FA4B42;
+	--mc-sa-grey: #9ca3af;
+	--mc-sa-notice-bg: #eff6ff;
+	--mc-sa-notice-border: #bfdbfe;
+	--mc-sa-notice-text: #1e3a8a;
+	--mc-sa-error-bg: #fef2f2;
+	--mc-sa-error-border: #fecaca;
+	--mc-sa-error-text: #b91c1c;
+	--mc-sa-error-title: #991b1b;
+
+	background: #fff;
+	border: 1px solid var(--mc-sa-border);
+	border-radius: 12px;
+	box-sizing: border-box;
+	margin-bottom: 20px;
+	padding: 24px;
+	position: relative;
+}
+
+.mailchimp-sf-analytics-card__header {
+	border-bottom: 1px solid var(--mc-sa-border);
+	margin-bottom: 20px;
+	padding-bottom: 16px;
+}
+
+.mailchimp-sf-analytics-card__title {
+	color: var(--mc-sa-text-strong);
+	font-size: 24px;
+	font-weight: 500;
+	line-height: 1.25;
+	margin: 0 0 4px;
+}
+
+.mailchimp-sf-analytics-card__subtitle {
+	color: var(--mc-sa-text-muted);
+	font-size: 14px;
+	line-height: 1.35;
+	margin: 0;
+}
+
+/* -----------------------------------------------------------------------------
+ * Subscriber activity section
+ * -------------------------------------------------------------------------- */
+.mailchimp-sf-sa__body {
+	align-items: stretch;
+	display: grid;
+	gap: 32px;
+	grid-template-columns: minmax(0, 1fr) 320px;
+	margin-top: 32px;
+}
+
+.mailchimp-sf-sa__body[hidden] {
+	display: none;
+}
+
+.mailchimp-sf-sa__chart {
+	min-width: 0;
+}
+
+.mailchimp-sf-sa__chart-title {
+	color: var(--mc-sa-text-strong);
+	font-size: 16px;
+	font-weight: 500;
+	margin: 0 0 4px;
+}
+
+.mailchimp-sf-sa__chart-subtitle {
+	color: var(--mc-sa-text-muted);
+	font-size: 12px;
+	font-weight: 400;
+	line-height: 1.35;
+	margin: 0 0 16px;
+}
+
+.mailchimp-sf-sa__canvas-wrap {
+	height: 340px;
+	position: relative;
+	width: 100%;
+}
+
+.mailchimp-sf-sa__canvas-wrap canvas {
+	display: block;
+	height: 100% !important;
+	width: 100% !important;
+}
+
+/* Totals panel */
+.mailchimp-sf-sa__totals {
+	border-left: 1px solid var(--mc-sa-border);
+	display: flex;
+	flex-direction: column;
+	padding-left: 32px;
+}
+
+.mailchimp-sf-sa__totals-title {
+	border-bottom: 1px solid var(--mc-sa-border);
+	color: var(--mc-sa-text-strong);
+	font-size: 14px;
+	font-weight: 500;
+	margin: 0 0 20px;
+	padding-bottom: 12px;
+}
+
+.mailchimp-sf-sa__donut-wrap {
+	height: 160px;
+	margin: 8px auto 24px;
+	position: relative;
+	width: 160px;
+}
+
+.mailchimp-sf-sa__donut-wrap canvas {
+	display: block;
+	height: 100% !important;
+	width: 100% !important;
+}
+
+.mailchimp-sf-sa__donut-center {
+	align-items: center;
+	display: flex;
+	inset: 0;
+	justify-content: center;
+	pointer-events: none;
+	position: absolute;
+}
+
+.mailchimp-sf-sa__net {
+	color: var(--mc-sa-text-strong);
+	font-size: 32px;
+	font-weight: 700;
+	letter-spacing: -0.02em;
+	line-height: 1;
+}
+
+/* Legend */
+.mailchimp-sf-sa__legend {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.mailchimp-sf-sa__legend-item {
+	align-items: center;
+	color: var(--mc-sa-text-body);
+	display: grid;
+	font-size: 13px;
+	gap: 10px;
+	grid-template-columns: 14px 1fr auto;
+	margin: 0;
+}
+
+.mailchimp-sf-sa__legend-swatch {
+	background: var(--mc-sa-grey);
+	border-radius: 3px;
+	display: inline-block;
+	height: 14px;
+	width: 14px;
+}
+
+.mailchimp-sf-sa__legend-item.is-new .mailchimp-sf-sa__legend-swatch {
+	background: var(--mc-sa-blue);
+}
+
+.mailchimp-sf-sa__legend-item.is-unsub .mailchimp-sf-sa__legend-swatch {
+	background: var(--mc-sa-red);
+}
+
+.mailchimp-sf-sa__legend-label {
+	color: var(--mc-sa-text-body);
+}
+
+.mailchimp-sf-sa__legend-value {
+	color: var(--mc-sa-text-strong);
+	font-weight: 600;
+	text-align: right;
+}
+
+/* Notice (e.g. 180-day limited) */
+.mailchimp-sf-sa__notice {
+	background: var(--mc-sa-notice-bg);
+	border: 1px solid var(--mc-sa-notice-border);
+	border-left-width: 4px;
+	border-radius: 6px;
+	color: var(--mc-sa-notice-text);
+	font-size: 13px;
+	line-height: 1.4;
+	margin-bottom: 20px;
+	padding: 10px 14px;
+}
+
+/*
+ * Skeleton — bar chart
+ *
+ * Occupies the top ~60% of the canvas-wrap so the overlay text sits below the
+ * bars. Includes a subtle background grid that mirrors (but does not need to
+ * exactly match) the gridlines Chart.js draws when real data loads.
+ */
+.mailchimp-sf-sa__skeleton-bars {
+	align-items: flex-end;
+	background-image:
+		linear-gradient(to right, var(--mc-sa-skeleton-grid) 1px, transparent 1px),
+		linear-gradient(to bottom, var(--mc-sa-skeleton-grid) 1px, transparent 1px);
+	background-position: 0 100%;
+	background-size: calc(100% / 7) calc(100% / 4);
+	bottom: 40%;
+	display: none;
+	gap: 22px;
+	justify-content: center;
+	left: 0;
+	padding: 4px 0 0;
+	pointer-events: none;
+	position: absolute;
+	right: 0;
+	top: 0;
+}
+
+.mailchimp-sf-sa__skeleton-bars span {
+	background: var(--mc-sa-border);
+	border-radius: 3px;
+	display: block;
+	width: 24px;
+}
+
+.mailchimp-sf-sa__skeleton-bars span:nth-child(1) {
+	height: 44%;
+}
+
+.mailchimp-sf-sa__skeleton-bars span:nth-child(2) {
+	height: 68%;
+}
+
+.mailchimp-sf-sa__skeleton-bars span:nth-child(3) {
+	height: 88%;
+}
+
+.mailchimp-sf-sa__skeleton-bars span:nth-child(4) {
+	height: 60%;
+}
+
+.mailchimp-sf-sa__skeleton-bars span:nth-child(5) {
+	height: 34%;
+}
+
+/* Skeleton — donut */
+.mailchimp-sf-sa__skeleton-donut {
+	border: 20px solid var(--mc-sa-border);
+	border-radius: 50%;
+	box-sizing: border-box;
+	display: none;
+	height: 100%;
+	inset: 0;
+	pointer-events: none;
+	position: absolute;
+	width: 100%;
+}
+
+/*
+ * Overlay message sits in the bottom portion of the chart area, so the
+ * copy appears below the skeleton bars (not overlapping them).
+ */
+.mailchimp-sf-sa__overlay {
+	align-items: flex-start;
+	bottom: 0;
+	color: var(--mc-sa-text-strong);
+	display: none;
+	font-size: 14px;
+	font-weight: 500;
+	height: 40%;
+	justify-content: center;
+	left: 0;
+	padding: 12px 16px 0;
+	pointer-events: none;
+	position: absolute;
+	right: 0;
+	text-align: center;
+	z-index: 2;
+}
+
+/* Canvas helpers */
+.mailchimp-sf-sa__canvas {
+	position: relative;
+	transition: opacity 150ms ease;
+	z-index: 1;
+}
+
+/* -----------------------------------------------------------------------------
+ * State modifiers: loading / empty / error
+ * Loading and empty share the same skeleton presentation; error uses the same
+ * structure with a red overlay text.
+ * -------------------------------------------------------------------------- */
+.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__canvas,
+.mailchimp-sf-sa.is-empty .mailchimp-sf-sa__canvas,
+.mailchimp-sf-sa.is-error .mailchimp-sf-sa__canvas {
+	opacity: 0;
+}
+
+.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__skeleton-bars,
+.mailchimp-sf-sa.is-empty .mailchimp-sf-sa__skeleton-bars,
+.mailchimp-sf-sa.is-error .mailchimp-sf-sa__skeleton-bars,
+.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__skeleton-donut,
+.mailchimp-sf-sa.is-empty .mailchimp-sf-sa__skeleton-donut,
+.mailchimp-sf-sa.is-error .mailchimp-sf-sa__skeleton-donut {
+	display: flex;
+}
+
+.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__overlay,
+.mailchimp-sf-sa.is-empty .mailchimp-sf-sa__overlay {
+	display: flex;
+}
+
+/* Muted legend + center value while the chart has no real data to show */
+.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__net,
+.mailchimp-sf-sa.is-empty .mailchimp-sf-sa__net,
+.mailchimp-sf-sa.is-error .mailchimp-sf-sa__net,
+.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__legend-label,
+.mailchimp-sf-sa.is-empty .mailchimp-sf-sa__legend-label,
+.mailchimp-sf-sa.is-error .mailchimp-sf-sa__legend-label,
+.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__legend-value,
+.mailchimp-sf-sa.is-empty .mailchimp-sf-sa__legend-value,
+.mailchimp-sf-sa.is-error .mailchimp-sf-sa__legend-value {
+	color: var(--mc-sa-grey);
+	opacity: 0.85;
+}
+
+.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__legend-swatch,
+.mailchimp-sf-sa.is-empty .mailchimp-sf-sa__legend-swatch,
+.mailchimp-sf-sa.is-error .mailchimp-sf-sa__legend-swatch {
+	background: var(--mc-sa-border) !important;
+}
+
+/* Loading pulse — applied to skeletons so the card "flashes" while fetching. */
+@keyframes mailchimp-sf-sa-pulse {
+
+	0%,
+	100% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.45;
+	}
+}
+
+.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__skeleton-bars span,
+.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__skeleton-donut,
+.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__overlay {
+	animation: mailchimp-sf-sa-pulse 1.4s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+	.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__skeleton-bars span,
+	.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__skeleton-donut,
+	.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__overlay {
+		animation: none;
+	}
+}
+
+/* Error banner (shown instead of the chart overlay in the error state). */
+.mailchimp-sf-sa__error-banner {
+	align-items: center;
+	background: var(--mc-sa-error-bg);
+	border: 1px solid var(--mc-sa-error-border);
+	border-radius: 8px;
+	display: flex;
+	gap: 12px;
+	margin: 4px 0 16px;
+	padding: 12px 14px;
+}
+
+.mailchimp-sf-sa__error-banner[hidden] {
+	display: none;
+}
+
+.mailchimp-sf-sa__error-banner-icon {
+	align-items: center;
+	color: var(--mc-sa-error-text);
+	display: inline-flex;
+	flex-shrink: 0;
+	justify-content: center;
+	line-height: 0;
+}
+
+.mailchimp-sf-sa__error-banner-body {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.mailchimp-sf-sa__error-banner-title {
+	color: var(--mc-sa-error-title);
+	font-size: 13px;
+	font-weight: 600;
+	line-height: 1.3;
+	margin: 0 0 2px;
+}
+
+.mailchimp-sf-sa__error-banner-message {
+	color: var(--mc-sa-error-text);
+	font-size: 13px;
+	line-height: 1.4;
+	margin: 0;
+}
+
+.mailchimp-sf-sa__error-banner-action {
+	flex-shrink: 0;
+}
+
+/* Responsive */
+@media screen and (max-width: 900px) {
+
+	.mailchimp-sf-sa__body {
+		gap: 24px;
+		grid-template-columns: 1fr;
+	}
+
+	.mailchimp-sf-sa__totals {
+		border-left: none;
+		border-top: 1px solid var(--mc-sa-border);
+		padding-left: 0;
+		padding-top: 24px;
+	}
+}
+
+@media screen and (max-width: 600px) {
+
+	.mailchimp-sf-analytics-card {
+		padding: 16px;
+	}
+
+	.mailchimp-sf-sa__canvas-wrap {
+		height: 240px;
+	}
+
+	.mailchimp-sf-sa__donut-wrap {
+		height: 160px;
+		width: 160px;
+	}
+
+	.mailchimp-sf-sa__net {
+		font-size: 28px;
+	}
+}
diff --git a/assets/js/analytics.js b/assets/js/analytics.js
index 7f1440a..1b574ec 100644
--- a/assets/js/analytics.js
+++ b/assets/js/analytics.js
@@ -397,6 +397,425 @@ import '../css/analytics.css';
 		fetchAnalyticsData(e.detail);
 	});
 
+	/**
+	 * Subscriber change over time — diverging bar + totals donut.
+	 * Loads independently from other analytics sections so an API error in
+	 * this section does not affect KPIs or Form Performance.
+	 */
+	(function subscriberActivityModule() {
+		const section = document.querySelector('[data-section="subscriber-activity"]');
+		if (!section) {
+			return;
+		}
+
+		const barCanvas = document.getElementById('mailchimp-sf-sa-bar');
+		const donutCanvas = document.getElementById('mailchimp-sf-sa-donut');
+		const netEl = document.getElementById('mailchimp-sf-sa-net');
+		const totalNewEl = document.getElementById('mailchimp-sf-sa-total-new');
+		const totalUnsubsEl = document.getElementById('mailchimp-sf-sa-total-unsubs');
+		const dateRangeEl = document.getElementById('mailchimp-sf-sa-daterange');
+		const noticeEl = document.getElementById('mailchimp-sf-sa-notice');
+		const overlayEl = document.getElementById('mailchimp-sf-sa-overlay');
+		const errorBannerEl = document.getElementById('mailchimp-sf-sa-error-banner');
+		const errorMessageEl = document.getElementById('mailchimp-sf-sa-error-message');
+		const retryBtnEl = document.getElementById('mailchimp-sf-sa-error-retry');
+
+		const COLORS = {
+			newFill: 'rgba(96, 165, 250, 0.85)',
+			newBorder: '#3B82F6',
+			unsubFill: 'rgba(248, 113, 113, 0.85)',
+			unsubBorder: '#EF4444',
+			gridLine: 'rgba(0, 0, 0, 0.06)',
+			zeroLine: 'rgba(0, 0, 0, 0.25)',
+			text: '#6B7280',
+		};
+
+		const EM_DASH = '\u2014';
+
+		const STRINGS = {
+			loadingSubtitle: 'Loading subscriber activity…',
+			loadingOverlay: 'Loading subscriber activity…',
+			emptySubtitle: 'No data available for the selected date range',
+			emptyOverlay: 'No data available for this date range',
+			errorDefault:
+				'Unable to load data for the selected date range. Please check your connection and try again.',
+			limited:
+				'Mailchimp subscriber activity is only available for the last 180 days. Showing available data.',
+			newSubscribers: 'New Subscribers',
+			unsubscribes: 'Unsubscribes',
+		};
+
+		const STATE_CLASSES = ['is-loading', 'is-ready', 'is-empty', 'is-error'];
+
+		let barChart = null;
+		let donutChart = null;
+		let inFlight = null;
+		let lastDetail = null;
+
+		function setState(state) {
+			STATE_CLASSES.forEach(function (cls) {
+				section.classList.toggle(cls, cls === `is-${state}`);
+			});
+		}
+
+		function setPlaceholderTotals() {
+			if (netEl) {
+				netEl.textContent = EM_DASH;
+				netEl.classList.remove('is-positive', 'is-negative');
+			}
+			if (totalNewEl) {
+				totalNewEl.textContent = EM_DASH;
+			}
+			if (totalUnsubsEl) {
+				totalUnsubsEl.textContent = EM_DASH;
+			}
+		}
+
+		function showNotice(message) {
+			if (!noticeEl) {
+				return;
+			}
+			if (message) {
+				noticeEl.textContent = message;
+				noticeEl.hidden = false;
+			} else {
+				noticeEl.textContent = '';
+				noticeEl.hidden = true;
+			}
+		}
+
+		function setOverlay(text) {
+			if (overlayEl) {
+				overlayEl.textContent = text || '';
+			}
+		}
+
+		function setSubtitle(text) {
+			if (dateRangeEl) {
+				dateRangeEl.textContent = text || '';
+			}
+		}
+
+		function destroyCharts() {
+			if (barChart) {
+				barChart.destroy();
+				barChart = null;
+			}
+			if (donutChart) {
+				donutChart.destroy();
+				donutChart = null;
+			}
+		}
+
+		function formatRangeLabel(from, to) {
+			try {
+				const fromDate = new Date(`${from}T00:00:00`);
+				const toDate = new Date(`${to}T00:00:00`);
+				const fmt = new Intl.DateTimeFormat(undefined, {
+					month: 'short',
+					day: 'numeric',
+					year: 'numeric',
+				});
+				return `${fmt.format(fromDate)} – ${fmt.format(toDate)}`;
+			} catch (err) {
+				return `${from} – ${to}`;
+			}
+		}
+
+		function setErrorBanner(visible, message) {
+			if (!errorBannerEl) {
+				return;
+			}
+			if (visible) {
+				if (errorMessageEl) {
+					errorMessageEl.textContent = message || STRINGS.errorDefault;
+				}
+				errorBannerEl.hidden = false;
+			} else {
+				errorBannerEl.hidden = true;
+			}
+		}
+
+		function showLoading() {
+			destroyCharts();
+			showNotice('');
+			setErrorBanner(false);
+			setOverlay(STRINGS.loadingOverlay);
+			setSubtitle(STRINGS.loadingSubtitle);
+			setPlaceholderTotals();
+			setState('loading');
+		}
+
+		function showEmpty() {
+			destroyCharts();
+			setErrorBanner(false);
+			setOverlay(STRINGS.emptyOverlay);
+			setSubtitle(STRINGS.emptySubtitle);
+			setPlaceholderTotals();
+			setState('empty');
+		}
+
+		function showError(message) {
+			destroyCharts();
+			showNotice('');
+			setOverlay('');
+			// Keep subtitle showing the last attempted date range if we have one.
+			if (lastDetail && lastDetail.from && lastDetail.to) {
+				setSubtitle(formatRangeLabel(lastDetail.from, lastDetail.to));
+			}
+			setPlaceholderTotals();
+			setErrorBanner(true, message);
+			setState('error');
+		}
+
+		function renderBar(data) {
+			if (!barCanvas || typeof window.Chart === 'undefined') {
+				return;
+			}
+
+			const labels = data.map(function (row) {
+				return row.label;
+			});
+			const newSeries = data.map(function (row) {
+				return row.new_subscribers || 0;
+			});
+			const unsubSeries = data.map(function (row) {
+				return -Math.abs(row.unsubscribes || 0);
+			});
+
+			const config = {
+				type: 'bar',
+				data: {
+					labels,
+					datasets: [
+						{
+							label: STRINGS.unsubscribes,
+							data: unsubSeries,
+							backgroundColor: COLORS.unsubFill,
+							borderColor: COLORS.unsubBorder,
+							borderWidth: 0,
+							borderRadius: 0,
+							borderSkipped: false,
+							maxBarThickness: 32,
+						},
+						{
+							label: STRINGS.newSubscribers,
+							data: newSeries,
+							backgroundColor: COLORS.newFill,
+							borderColor: COLORS.newBorder,
+							borderWidth: 0,
+							borderRadius: 0,
+							borderSkipped: false,
+							maxBarThickness: 32,
+						},
+					],
+				},
+				options: {
+					responsive: true,
+					maintainAspectRatio: false,
+					interaction: { mode: 'index', intersect: false },
+					plugins: {
+						legend: {
+							position: 'top',
+							align: 'center',
+							labels: {
+								usePointStyle: true,
+								pointStyle: 'rectRounded',
+								boxWidth: 10,
+								boxHeight: 10,
+								padding: 16,
+								color: COLORS.text,
+							},
+						},
+						tooltip: {
+							callbacks: {
+								label(ctx) {
+									const value = Math.abs(ctx.parsed.y || 0);
+									return `${ctx.dataset.label}: ${value}`;
+								},
+							},
+						},
+					},
+					scales: {
+						x: {
+							grid: {
+								color: COLORS.gridLine,
+								drawBorder: false,
+								drawOnChartArea: true,
+								drawTicks: false,
+							},
+							ticks: { color: COLORS.text },
+						},
+						y: {
+							beginAtZero: true,
+							grid: {
+								color(ctx) {
+									return ctx.tick && ctx.tick.value === 0
+										? COLORS.zeroLine
+										: COLORS.gridLine;
+								},
+								drawBorder: false,
+								drawOnChartArea: true,
+							},
+							ticks: {
+								color: COLORS.text,
+								callback(value) {
+									return value;
+								},
+							},
+						},
+					},
+				},
+			};
+
+			barChart = new window.Chart(barCanvas.getContext('2d'), config);
+		}
+
+		function renderDonut(totalNew, totalUnsubs) {
+			if (!donutCanvas || typeof window.Chart === 'undefined') {
+				return;
+			}
+			const total = (totalNew || 0) + (totalUnsubs || 0);
+			const data = total > 0 ? [totalNew || 0, totalUnsubs || 0] : [1, 0];
+			const colors =
+				total > 0
+					? [COLORS.newBorder, COLORS.unsubBorder]
+					: ['rgba(0, 0, 0, 0.08)', 'rgba(0, 0, 0, 0.08)'];
+
+			donutChart = new window.Chart(donutCanvas.getContext('2d'), {
+				type: 'doughnut',
+				data: {
+					labels: [STRINGS.newSubscribers, STRINGS.unsubscribes],
+					datasets: [
+						{
+							data,
+							backgroundColor: colors,
+							borderWidth: 0,
+							cutout: '78%',
+						},
+					],
+				},
+				options: {
+					responsive: true,
+					maintainAspectRatio: false,
+					plugins: {
+						legend: { display: false },
+						tooltip: { enabled: total > 0 },
+					},
+				},
+			});
+		}
+
+		function renderTotals(payload) {
+			const net = payload.net_change || 0;
+			if (netEl) {
+				const sign = net > 0 ? '+' : '';
+				netEl.textContent = `${sign}${net}`;
+				netEl.classList.toggle('is-positive', net > 0);
+				netEl.classList.toggle('is-negative', net < 0);
+			}
+			if (totalNewEl) {
+				totalNewEl.textContent = String(payload.total_new || 0);
+			}
+			if (totalUnsubsEl) {
+				totalUnsubsEl.textContent = String(payload.total_unsubs || 0);
+			}
+		}
+
+		function render(payload, fromLabel, toLabel) {
+			destroyCharts();
+			setErrorBanner(false);
+
+			if (!Array.isArray(payload.data) || payload.data.length === 0) {
+				showEmpty();
+				return;
+			}
+
+			showNotice(payload.limited ? STRINGS.limited : '');
+			setSubtitle(formatRangeLabel(fromLabel, toLabel));
+			setOverlay('');
+			setState('ready');
+			renderBar(payload.data);
+			renderDonut(payload.total_new, payload.total_unsubs);
+			renderTotals(payload);
+		}
+
+		function fetchActivity(detail) {
+			if (!window.mailchimpSFAnalytics || !window.mailchimpSFAnalytics.ajax_url) {
+				showError();
+				return;
+			}
+			if (!detail || !detail.listId || !detail.from || !detail.to) {
+				showEmpty();
+				return;
+			}
+
+			lastDetail = {
+				listId: detail.listId,
+				from: detail.from,
+				to: detail.to,
+			};
+
+			if (inFlight && typeof inFlight.abort === 'function') {
+				inFlight.abort();
+			}
+
+			const controller =
+				typeof window.AbortController !== 'undefined' ? new AbortController() : null;
+			inFlight = controller;
+
+			const formData = new FormData();
+			formData.append('action', 'mailchimp_sf_get_subscriber_activity');
+			formData.append('nonce', window.mailchimpSFAnalytics.nonce);
+			formData.append('list_id', detail.listId);
+			formData.append('date_from', detail.from);
+			formData.append('date_to', detail.to);
+
+			showLoading();
+
+			fetch(window.mailchimpSFAnalytics.ajax_url, {
+				method: 'POST',
+				body: formData,
+				credentials: 'same-origin',
+				signal: controller ? controller.signal : undefined,
+			})
+				.then(function (response) {
+					return response.json().catch(function () {
+						return null;
+					});
+				})
+				.then(function (body) {
+					inFlight = null;
+					if (!body || body.success !== true || !body.data) {
+						const message =
+							body && body.data && body.data.message ? body.data.message : '';
+						showError(message);
+						return;
+					}
+					render(body.data, detail.from, detail.to);
+				})
+				.catch(function (err) {
+					if (err && err.name === 'AbortError') {
+						return;
+					}
+					inFlight = null;
+					showError();
+				});
+		}
+
+		if (retryBtnEl) {
+			retryBtnEl.addEventListener('click', function () {
+				if (lastDetail) {
+					fetchActivity(lastDetail);
+				}
+			});
+		}
+
+		document.addEventListener('mailchimp-analytics-refresh', function (e) {
+			fetchActivity(e.detail);
+		});
+	})();
+
 	// Initialize.
 	updateTriggerLabel();
 	syncDateInputs();
diff --git a/includes/admin/templates/analytics.php b/includes/admin/templates/analytics.php
index 9e744ee..b29a12f 100644
--- a/includes/admin/templates/analytics.php
+++ b/includes/admin/templates/analytics.php
@@ -100,14 +100,137 @@
 					</div>
 				</div>
 
-			<div class="mailchimp-sf-analytics-content" id="mailchimp-sf-analytics-content">
-			</div>
+				<section
+					class="mailchimp-sf-analytics-card mailchimp-sf-sa is-loading"
+					data-section="subscriber-activity"
+					aria-labelledby="mailchimp-sf-sa-title"
+				>
+					<header class="mailchimp-sf-analytics-card__header">
+						<h2 id="mailchimp-sf-sa-title" class="mailchimp-sf-analytics-card__title">
+							<?php esc_html_e( 'Subscriber change over time', 'mailchimp' ); ?>
+						</h2>
+						<p
+							id="mailchimp-sf-sa-daterange"
+							class="mailchimp-sf-analytics-card__subtitle"
+							aria-live="polite"
+						><?php esc_html_e( 'Loading subscriber activity…', 'mailchimp' ); ?></p>
+					</header>
+
+					<div
+						id="mailchimp-sf-sa-notice"
+						class="mailchimp-sf-sa__notice"
+						role="status"
+						hidden
+					></div>
 
-				<div class="mailchimp-sf-analytics-content" id="mailchimp-sf-analytics-content">
-					<div class="mailchimp-sf-analytics-placeholder">
-						<p><?php esc_html_e( 'Select a date range and list to view analytics.', 'mailchimp' ); ?></p>
+					<div class="mailchimp-sf-sa__chart-heading">
+						<h3 class="mailchimp-sf-sa__chart-title">
+							<?php esc_html_e( 'Subscriber Count', 'mailchimp' ); ?>
+						</h3>
+						<p class="mailchimp-sf-sa__chart-subtitle">
+							<?php esc_html_e( 'Subscribers gained vs lost', 'mailchimp' ); ?>
+						</p>
 					</div>
-				</div>
+
+					<div
+						id="mailchimp-sf-sa-error-banner"
+						class="mailchimp-sf-sa__error-banner"
+						role="alert"
+						hidden
+					>
+						<span class="mailchimp-sf-sa__error-banner-icon" aria-hidden="true">
+							<svg viewBox="0 0 24 24" width="20" height="20" focusable="false" aria-hidden="true">
+								<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
+								<line x1="12" y1="7.5" x2="12" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+								<circle cx="12" cy="16.5" r="1" fill="currentColor"/>
+							</svg>
+						</span>
+						<div class="mailchimp-sf-sa__error-banner-body">
+							<p class="mailchimp-sf-sa__error-banner-title">
+								<?php esc_html_e( 'API Disconnected', 'mailchimp' ); ?>
+							</p>
+							<p
+								id="mailchimp-sf-sa-error-message"
+								class="mailchimp-sf-sa__error-banner-message"
+							>
+								<?php esc_html_e( 'Unable to load data for the selected date range. Please check your connection and try again.', 'mailchimp' ); ?>
+							</p>
+						</div>
+						<button
+							type="button"
+							id="mailchimp-sf-sa-error-retry"
+							class="button mailchimp-sf-sa__error-banner-action"
+						>
+							<?php esc_html_e( 'Resolve error', 'mailchimp' ); ?>
+						</button>
+					</div>
+
+					<div class="mailchimp-sf-sa__body">
+						<div class="mailchimp-sf-sa__chart">
+							<div class="mailchimp-sf-sa__canvas-wrap">
+								<div class="mailchimp-sf-sa__skeleton-bars" aria-hidden="true">
+									<span></span>
+									<span></span>
+									<span></span>
+									<span></span>
+									<span></span>
+								</div>
+								<canvas
+									id="mailchimp-sf-sa-bar"
+									class="mailchimp-sf-sa__canvas"
+									role="img"
+									aria-label="<?php esc_attr_e( 'Subscriber change bar chart', 'mailchimp' ); ?>"
+								></canvas>
+								<div
+									id="mailchimp-sf-sa-overlay"
+									class="mailchimp-sf-sa__overlay"
+									role="status"
+									aria-live="polite"
+								><?php esc_html_e( 'Loading subscriber activity…', 'mailchimp' ); ?></div>
+							</div>
+						</div>
+
+						<aside class="mailchimp-sf-sa__totals" aria-labelledby="mailchimp-sf-sa-totals-title">
+							<h3 id="mailchimp-sf-sa-totals-title" class="mailchimp-sf-sa__totals-title">
+								<?php esc_html_e( 'Totals for the selected date range', 'mailchimp' ); ?>
+							</h3>
+							<div class="mailchimp-sf-sa__donut-wrap">
+								<div class="mailchimp-sf-sa__skeleton-donut" aria-hidden="true"></div>
+								<canvas
+									id="mailchimp-sf-sa-donut"
+									class="mailchimp-sf-sa__canvas"
+									role="img"
+									aria-label="<?php esc_attr_e( 'Subscriber change donut chart', 'mailchimp' ); ?>"
+								></canvas>
+								<div class="mailchimp-sf-sa__donut-center">
+									<span id="mailchimp-sf-sa-net" class="mailchimp-sf-sa__net">&mdash;</span>
+								</div>
+							</div>
+							<ul class="mailchimp-sf-sa__legend">
+								<li class="mailchimp-sf-sa__legend-item is-new">
+									<span class="mailchimp-sf-sa__legend-swatch" aria-hidden="true"></span>
+									<span class="mailchimp-sf-sa__legend-label">
+										<?php esc_html_e( 'New Subscriber', 'mailchimp' ); ?>
+									</span>
+									<span
+										id="mailchimp-sf-sa-total-new"
+										class="mailchimp-sf-sa__legend-value"
+									>&mdash;</span>
+								</li>
+								<li class="mailchimp-sf-sa__legend-item is-unsub">
+									<span class="mailchimp-sf-sa__legend-swatch" aria-hidden="true"></span>
+									<span class="mailchimp-sf-sa__legend-label">
+										<?php esc_html_e( 'Unsubscribe', 'mailchimp' ); ?>
+									</span>
+									<span
+										id="mailchimp-sf-sa-total-unsubs"
+										class="mailchimp-sf-sa__legend-value"
+									>&mdash;</span>
+								</li>
+							</ul>
+						</aside>
+					</div>
+				</section>
 
 				<?php if ( $dc ) : ?>
 					<div class="mailchimp-sf-analytics-deep-link">

From 570445e435a2731198babe422a30c219b59b7406 Mon Sep 17 00:00:00 2001
From: Dharmesh Patel <dspatel44@gmail.com>
Date: Sat, 18 Apr 2026 14:13:14 +0530
Subject: [PATCH 03/11] Convert css to scss and some other improvements.

---
 assets/css/analytics.css                      | 726 -----------------
 assets/css/analytics.scss                     | 770 ++++++++++++++++++
 assets/js/analytics.js                        |   2 +-
 includes/admin/templates/analytics.php        |   2 +-
 .../class-mailchimp-subscriber-activity.php   |   4 +-
 5 files changed, 774 insertions(+), 730 deletions(-)
 delete mode 100644 assets/css/analytics.css
 create mode 100644 assets/css/analytics.scss

diff --git a/assets/css/analytics.css b/assets/css/analytics.css
deleted file mode 100644
index 4c674df..0000000
--- a/assets/css/analytics.css
+++ /dev/null
@@ -1,726 +0,0 @@
-/**
- * Mailchimp Analytics Page Styles
- *
- * @package Mailchimp
- */
-
-.mailchimp-sf-analytics-filters {
-	align-items: flex-end;
-	display: flex;
-	flex-wrap: wrap;
-	gap: 16px;
-	margin-bottom: 20px;
-}
-
-.mailchimp-sf-analytics-filter-group {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.mailchimp-sf-analytics-filter-group > label {
-	color: #1d2327;
-	font-size: 14px;
-	font-weight: 400;
-}
-
-.mailchimp-sf-analytics-filter-group select {
-	background-color: #fff;
-	border: 1px solid #8c8f94;
-	border-radius: 4px;
-	color: #1d2327;
-	font-size: 14px;
-	height: 36px;
-	min-width: 180px;
-	padding: 0 8px;
-}
-
-.mailchimp-sf-analytics-filter-group select:focus {
-	border-color: var(--mailchimp-color-link, #017e89);
-	box-shadow: 0 0 0 1px var(--mailchimp-color-link, #017e89);
-	outline: none;
-}
-
-/* Date picker trigger */
-.mailchimp-sf-date-picker {
-	position: relative;
-}
-
-.mailchimp-sf-date-picker-trigger {
-	align-items: center;
-	background-color: #fff;
-	border: 1px solid #c3ced5;
-	border-radius: 6px;
-	color: var(--mailchimp-color-text);
-	cursor: pointer;
-	display: inline-flex;
-	font-size: 14px;
-	gap: 8px;
-	height: 40px;
-	justify-content: space-between;
-	min-width: 220px;
-	padding: 0 10px;
-	text-align: left;
-	transition: all 0.2s;
-}
-
-.mailchimp-sf-date-picker-trigger:hover {
-	border-color: var(--mailchimp-color-link, #017e89);
-}
-
-.mailchimp-sf-date-picker-trigger:focus {
-	border-color: var(--mailchimp-color-link, #017e89);
-	box-shadow: 0 0 0 1px var(--mailchimp-color-link, #017e89);
-	outline: none;
-}
-
-.mailchimp-sf-date-picker.is-open .mailchimp-sf-date-picker-trigger {
-	background-color: rgba(1, 126, 137, 0.08);
-	border-color: var(--mailchimp-color-link, #017e89);
-	box-shadow: 0 0 0 1px var(--mailchimp-color-link, #017e89);
-}
-
-.mailchimp-sf-date-picker-trigger .dashicons {
-	color: #50575e;
-	font-size: 18px;
-	height: 18px;
-	line-height: 18px;
-	width: 18px;
-}
-
-.mailchimp-sf-date-picker-trigger .indicator-date-picker {
-	bottom: 0;
-	display: flex;
-	justify-content: center;
-	padding: 0 8px;
-	pointer-events: none;
-	position: absolute;
-	right: 0;
-	top: 0;
-	width: 24px;
-}
-
-/* Date picker popover */
-.mailchimp-sf-date-picker-popover {
-	background: #fff;
-	border: 1px solid #dcdcde;
-	border-radius: 8px;
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-	display: none;
-	left: 0;
-	min-width: 480px;
-	padding: 20px;
-	position: absolute;
-	top: calc(100% + 6px);
-	z-index: 100;
-}
-
-.mailchimp-sf-date-picker-popover.is-open {
-	display: block;
-}
-
-.mailchimp-sf-date-picker-popover-row {
-	display: flex;
-	gap: 12px;
-	margin-bottom: 16px;
-}
-
-.mailchimp-sf-date-picker-field {
-	display: flex;
-	flex: 1;
-	flex-direction: column;
-	gap: 6px;
-}
-
-.mailchimp-sf-date-picker-field label {
-	color: #4a5565;
-	font-size: 14px;
-	font-weight: 400;
-}
-
-.mailchimp-sf-date-picker-input-wrap {
-	position: relative;
-	width: 100%;
-}
-
-.mailchimp-sf-date-picker-field-calendar {
-	align-items: center;
-	bottom: 0;
-	display: flex;
-	justify-content: center;
-	padding: 0 6px;
-	pointer-events: none;
-	position: absolute;
-	right: 0;
-	top: 0;
-}
-
-.mailchimp-sf-date-picker-field-calendar svg {
-	display: block;
-	fill: #50575e;
-	height: 18px;
-	width: 18px;
-}
-
-#mailchimp-sf-settings-page .mailchimp-sf-date-picker-field select,
-#mailchimp-sf-settings-page .mailchimp-sf-date-picker-field input[type="text"] {
-	background-color: #fff;
-	color: #1d2327;
-	font-size: 14px;
-	height: 36px;
-	width: 100%;
-}
-
-#mailchimp-sf-settings-page .mailchimp-sf-date-picker-field .mailchimp-sf-date-picker-input-wrap input[type="text"] {
-	padding-right: 30px;
-}
-
-#mailchimp-sf-settings-page .mailchimp-sf-date-picker-field select:focus,
-#mailchimp-sf-settings-page .mailchimp-sf-date-picker-field input[type="text"]:focus {
-	border-color: var(--mailchimp-color-link, #017e89);
-	box-shadow: 0 0 0 1px var(--mailchimp-color-link, #017e89);
-	outline: none;
-}
-
-/* Popover actions — .mailchimp-sf-button.btn-primary / .btn-secondary.btn-small; pill shape to match design */
-.mailchimp-sf-date-picker-actions {
-	display: flex;
-	gap: 8px;
-	justify-content: flex-end;
-}
-
-
-/* Content area */
-.mailchimp-sf-analytics-content {
-	background: #fff;
-	border: 1px solid #d3d0c8;
-	border-radius: 8px;
-	box-sizing: border-box;
-	margin-bottom: 20px;
-	min-height: 200px;
-	overflow: auto;
-	padding: 24px;
-	width: 100%;
-}
-
-.mailchimp-sf-analytics-placeholder {
-	align-items: center;
-	color: #8c8f94;
-	display: flex;
-	font-size: 15px;
-	justify-content: center;
-	min-height: 200px;
-}
-
-/* Deep link */
-.mailchimp-sf-analytics-deep-link {
-	margin-top: 16px;
-}
-
-.mailchimp-sf-analytics-deep-link a {
-	align-items: center;
-	display: inline-flex;
-	gap: 6px;
-}
-
-.mailchimp-sf-analytics-deep-link a:hover {
-	color: var(--mailchimp-color-text, #1d2327);
-}
-
-.mailchimp-sf-analytics-deep-link .dashicons {
-	font-size: 16px;
-	height: 16px;
-	line-height: 16px;
-	width: 16px;
-}
-
-/* Responsive */
-@media screen and (max-width: 782px) {
-
-	.mailchimp-sf-analytics-filters {
-		align-items: stretch;
-		flex-direction: column;
-	}
-
-	.mailchimp-sf-date-picker-popover {
-		left: 0;
-		min-width: auto;
-		width: calc(100vw - 60px);
-	}
-
-	.mailchimp-sf-date-picker-popover-row {
-		flex-direction: column;
-	}
-
-	.mailchimp-sf-date-picker-trigger {
-		min-width: auto;
-		width: 100%;
-	}
-
-	.mailchimp-sf-analytics-filter-group select {
-		min-width: auto;
-		width: 100%;
-	}
-}
-
-/* Datepicker */
-.datepicker-cell.selected,
-.datepicker-cell.selected:hover {
-	background-color: var(--mailchimp-color-link, #017e89);
-	color: #fff;
-}
-
-/* -----------------------------------------------------------------------------
- * Analytics card (shared shell for chart sections)
- * -------------------------------------------------------------------------- */
-.mailchimp-sf-analytics-card {
-	--mc-sa-text-strong: #241C15;
-	--mc-sa-text-muted: #464E54;
-	--mc-sa-text-body: #374151;
-	--mc-sa-border: #DDDDDD;
-	--mc-sa-skeleton-grid: #f3f4f6;
-	--mc-sa-blue: #2B72FB;
-	--mc-sa-red: #FA4B42;
-	--mc-sa-grey: #9ca3af;
-	--mc-sa-notice-bg: #eff6ff;
-	--mc-sa-notice-border: #bfdbfe;
-	--mc-sa-notice-text: #1e3a8a;
-	--mc-sa-error-bg: #fef2f2;
-	--mc-sa-error-border: #fecaca;
-	--mc-sa-error-text: #b91c1c;
-	--mc-sa-error-title: #991b1b;
-
-	background: #fff;
-	border: 1px solid var(--mc-sa-border);
-	border-radius: 12px;
-	box-sizing: border-box;
-	margin-bottom: 20px;
-	padding: 24px;
-	position: relative;
-}
-
-.mailchimp-sf-analytics-card__header {
-	border-bottom: 1px solid var(--mc-sa-border);
-	margin-bottom: 20px;
-	padding-bottom: 16px;
-}
-
-.mailchimp-sf-analytics-card__title {
-	color: var(--mc-sa-text-strong);
-	font-size: 24px;
-	font-weight: 500;
-	line-height: 1.25;
-	margin: 0 0 4px;
-}
-
-.mailchimp-sf-analytics-card__subtitle {
-	color: var(--mc-sa-text-muted);
-	font-size: 14px;
-	line-height: 1.35;
-	margin: 0;
-}
-
-/* -----------------------------------------------------------------------------
- * Subscriber activity section
- * -------------------------------------------------------------------------- */
-.mailchimp-sf-sa__body {
-	align-items: stretch;
-	display: grid;
-	gap: 32px;
-	grid-template-columns: minmax(0, 1fr) 320px;
-	margin-top: 32px;
-}
-
-.mailchimp-sf-sa__body[hidden] {
-	display: none;
-}
-
-.mailchimp-sf-sa__chart {
-	min-width: 0;
-}
-
-.mailchimp-sf-sa__chart-title {
-	color: var(--mc-sa-text-strong);
-	font-size: 16px;
-	font-weight: 500;
-	margin: 0 0 4px;
-}
-
-.mailchimp-sf-sa__chart-subtitle {
-	color: var(--mc-sa-text-muted);
-	font-size: 12px;
-	font-weight: 400;
-	line-height: 1.35;
-	margin: 0 0 16px;
-}
-
-.mailchimp-sf-sa__canvas-wrap {
-	height: 340px;
-	position: relative;
-	width: 100%;
-}
-
-.mailchimp-sf-sa__canvas-wrap canvas {
-	display: block;
-	height: 100% !important;
-	width: 100% !important;
-}
-
-/* Totals panel */
-.mailchimp-sf-sa__totals {
-	border-left: 1px solid var(--mc-sa-border);
-	display: flex;
-	flex-direction: column;
-	padding-left: 32px;
-}
-
-.mailchimp-sf-sa__totals-title {
-	border-bottom: 1px solid var(--mc-sa-border);
-	color: var(--mc-sa-text-strong);
-	font-size: 14px;
-	font-weight: 500;
-	margin: 0 0 20px;
-	padding-bottom: 12px;
-}
-
-.mailchimp-sf-sa__donut-wrap {
-	height: 160px;
-	margin: 8px auto 24px;
-	position: relative;
-	width: 160px;
-}
-
-.mailchimp-sf-sa__donut-wrap canvas {
-	display: block;
-	height: 100% !important;
-	width: 100% !important;
-}
-
-.mailchimp-sf-sa__donut-center {
-	align-items: center;
-	display: flex;
-	inset: 0;
-	justify-content: center;
-	pointer-events: none;
-	position: absolute;
-}
-
-.mailchimp-sf-sa__net {
-	color: var(--mc-sa-text-strong);
-	font-size: 32px;
-	font-weight: 700;
-	letter-spacing: -0.02em;
-	line-height: 1;
-}
-
-/* Legend */
-.mailchimp-sf-sa__legend {
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
-
-.mailchimp-sf-sa__legend-item {
-	align-items: center;
-	color: var(--mc-sa-text-body);
-	display: grid;
-	font-size: 13px;
-	gap: 10px;
-	grid-template-columns: 14px 1fr auto;
-	margin: 0;
-}
-
-.mailchimp-sf-sa__legend-swatch {
-	background: var(--mc-sa-grey);
-	border-radius: 3px;
-	display: inline-block;
-	height: 14px;
-	width: 14px;
-}
-
-.mailchimp-sf-sa__legend-item.is-new .mailchimp-sf-sa__legend-swatch {
-	background: var(--mc-sa-blue);
-}
-
-.mailchimp-sf-sa__legend-item.is-unsub .mailchimp-sf-sa__legend-swatch {
-	background: var(--mc-sa-red);
-}
-
-.mailchimp-sf-sa__legend-label {
-	color: var(--mc-sa-text-body);
-}
-
-.mailchimp-sf-sa__legend-value {
-	color: var(--mc-sa-text-strong);
-	font-weight: 600;
-	text-align: right;
-}
-
-/* Notice (e.g. 180-day limited) */
-.mailchimp-sf-sa__notice {
-	background: var(--mc-sa-notice-bg);
-	border: 1px solid var(--mc-sa-notice-border);
-	border-left-width: 4px;
-	border-radius: 6px;
-	color: var(--mc-sa-notice-text);
-	font-size: 13px;
-	line-height: 1.4;
-	margin-bottom: 20px;
-	padding: 10px 14px;
-}
-
-/*
- * Skeleton — bar chart
- *
- * Occupies the top ~60% of the canvas-wrap so the overlay text sits below the
- * bars. Includes a subtle background grid that mirrors (but does not need to
- * exactly match) the gridlines Chart.js draws when real data loads.
- */
-.mailchimp-sf-sa__skeleton-bars {
-	align-items: flex-end;
-	background-image:
-		linear-gradient(to right, var(--mc-sa-skeleton-grid) 1px, transparent 1px),
-		linear-gradient(to bottom, var(--mc-sa-skeleton-grid) 1px, transparent 1px);
-	background-position: 0 100%;
-	background-size: calc(100% / 7) calc(100% / 4);
-	bottom: 40%;
-	display: none;
-	gap: 22px;
-	justify-content: center;
-	left: 0;
-	padding: 4px 0 0;
-	pointer-events: none;
-	position: absolute;
-	right: 0;
-	top: 0;
-}
-
-.mailchimp-sf-sa__skeleton-bars span {
-	background: var(--mc-sa-border);
-	border-radius: 3px;
-	display: block;
-	width: 24px;
-}
-
-.mailchimp-sf-sa__skeleton-bars span:nth-child(1) {
-	height: 44%;
-}
-
-.mailchimp-sf-sa__skeleton-bars span:nth-child(2) {
-	height: 68%;
-}
-
-.mailchimp-sf-sa__skeleton-bars span:nth-child(3) {
-	height: 88%;
-}
-
-.mailchimp-sf-sa__skeleton-bars span:nth-child(4) {
-	height: 60%;
-}
-
-.mailchimp-sf-sa__skeleton-bars span:nth-child(5) {
-	height: 34%;
-}
-
-/* Skeleton — donut */
-.mailchimp-sf-sa__skeleton-donut {
-	border: 20px solid var(--mc-sa-border);
-	border-radius: 50%;
-	box-sizing: border-box;
-	display: none;
-	height: 100%;
-	inset: 0;
-	pointer-events: none;
-	position: absolute;
-	width: 100%;
-}
-
-/*
- * Overlay message sits in the bottom portion of the chart area, so the
- * copy appears below the skeleton bars (not overlapping them).
- */
-.mailchimp-sf-sa__overlay {
-	align-items: flex-start;
-	bottom: 0;
-	color: var(--mc-sa-text-strong);
-	display: none;
-	font-size: 14px;
-	font-weight: 500;
-	height: 40%;
-	justify-content: center;
-	left: 0;
-	padding: 12px 16px 0;
-	pointer-events: none;
-	position: absolute;
-	right: 0;
-	text-align: center;
-	z-index: 2;
-}
-
-/* Canvas helpers */
-.mailchimp-sf-sa__canvas {
-	position: relative;
-	transition: opacity 150ms ease;
-	z-index: 1;
-}
-
-/* -----------------------------------------------------------------------------
- * State modifiers: loading / empty / error
- * Loading and empty share the same skeleton presentation; error uses the same
- * structure with a red overlay text.
- * -------------------------------------------------------------------------- */
-.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__canvas,
-.mailchimp-sf-sa.is-empty .mailchimp-sf-sa__canvas,
-.mailchimp-sf-sa.is-error .mailchimp-sf-sa__canvas {
-	opacity: 0;
-}
-
-.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__skeleton-bars,
-.mailchimp-sf-sa.is-empty .mailchimp-sf-sa__skeleton-bars,
-.mailchimp-sf-sa.is-error .mailchimp-sf-sa__skeleton-bars,
-.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__skeleton-donut,
-.mailchimp-sf-sa.is-empty .mailchimp-sf-sa__skeleton-donut,
-.mailchimp-sf-sa.is-error .mailchimp-sf-sa__skeleton-donut {
-	display: flex;
-}
-
-.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__overlay,
-.mailchimp-sf-sa.is-empty .mailchimp-sf-sa__overlay {
-	display: flex;
-}
-
-/* Muted legend + center value while the chart has no real data to show */
-.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__net,
-.mailchimp-sf-sa.is-empty .mailchimp-sf-sa__net,
-.mailchimp-sf-sa.is-error .mailchimp-sf-sa__net,
-.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__legend-label,
-.mailchimp-sf-sa.is-empty .mailchimp-sf-sa__legend-label,
-.mailchimp-sf-sa.is-error .mailchimp-sf-sa__legend-label,
-.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__legend-value,
-.mailchimp-sf-sa.is-empty .mailchimp-sf-sa__legend-value,
-.mailchimp-sf-sa.is-error .mailchimp-sf-sa__legend-value {
-	color: var(--mc-sa-grey);
-	opacity: 0.85;
-}
-
-.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__legend-swatch,
-.mailchimp-sf-sa.is-empty .mailchimp-sf-sa__legend-swatch,
-.mailchimp-sf-sa.is-error .mailchimp-sf-sa__legend-swatch {
-	background: var(--mc-sa-border) !important;
-}
-
-/* Loading pulse — applied to skeletons so the card "flashes" while fetching. */
-@keyframes mailchimp-sf-sa-pulse {
-
-	0%,
-	100% {
-		opacity: 1;
-	}
-
-	50% {
-		opacity: 0.45;
-	}
-}
-
-.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__skeleton-bars span,
-.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__skeleton-donut,
-.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__overlay {
-	animation: mailchimp-sf-sa-pulse 1.4s ease-in-out infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-
-	.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__skeleton-bars span,
-	.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__skeleton-donut,
-	.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__overlay {
-		animation: none;
-	}
-}
-
-/* Error banner (shown instead of the chart overlay in the error state). */
-.mailchimp-sf-sa__error-banner {
-	align-items: center;
-	background: var(--mc-sa-error-bg);
-	border: 1px solid var(--mc-sa-error-border);
-	border-radius: 8px;
-	display: flex;
-	gap: 12px;
-	margin: 4px 0 16px;
-	padding: 12px 14px;
-}
-
-.mailchimp-sf-sa__error-banner[hidden] {
-	display: none;
-}
-
-.mailchimp-sf-sa__error-banner-icon {
-	align-items: center;
-	color: var(--mc-sa-error-text);
-	display: inline-flex;
-	flex-shrink: 0;
-	justify-content: center;
-	line-height: 0;
-}
-
-.mailchimp-sf-sa__error-banner-body {
-	flex: 1 1 auto;
-	min-width: 0;
-}
-
-.mailchimp-sf-sa__error-banner-title {
-	color: var(--mc-sa-error-title);
-	font-size: 13px;
-	font-weight: 600;
-	line-height: 1.3;
-	margin: 0 0 2px;
-}
-
-.mailchimp-sf-sa__error-banner-message {
-	color: var(--mc-sa-error-text);
-	font-size: 13px;
-	line-height: 1.4;
-	margin: 0;
-}
-
-.mailchimp-sf-sa__error-banner-action {
-	flex-shrink: 0;
-}
-
-/* Responsive */
-@media screen and (max-width: 900px) {
-
-	.mailchimp-sf-sa__body {
-		gap: 24px;
-		grid-template-columns: 1fr;
-	}
-
-	.mailchimp-sf-sa__totals {
-		border-left: none;
-		border-top: 1px solid var(--mc-sa-border);
-		padding-left: 0;
-		padding-top: 24px;
-	}
-}
-
-@media screen and (max-width: 600px) {
-
-	.mailchimp-sf-analytics-card {
-		padding: 16px;
-	}
-
-	.mailchimp-sf-sa__canvas-wrap {
-		height: 240px;
-	}
-
-	.mailchimp-sf-sa__donut-wrap {
-		height: 160px;
-		width: 160px;
-	}
-
-	.mailchimp-sf-sa__net {
-		font-size: 28px;
-	}
-}
diff --git a/assets/css/analytics.scss b/assets/css/analytics.scss
new file mode 100644
index 0000000..b166aa9
--- /dev/null
+++ b/assets/css/analytics.scss
@@ -0,0 +1,770 @@
+/**
+ * Mailchimp Analytics Page Styles
+ *
+ * @package Mailchimp
+ */
+
+// -----------------------------------------------------------------------------
+// Breakpoints.
+// -----------------------------------------------------------------------------
+$mq-small: 782px;
+$mq-medium: 900px;
+$mq-xs: 600px;
+
+// -----------------------------------------------------------------------------
+// Filters toolbar
+// -----------------------------------------------------------------------------
+.mailchimp-sf-analytics-filters {
+	align-items: flex-end;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 16px;
+	margin-bottom: 20px;
+}
+
+.mailchimp-sf-analytics-filter-group {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+
+	> label {
+		color: #1d2327;
+		font-size: 14px;
+		font-weight: 400;
+	}
+
+	select {
+		background-color: #fff;
+		border: 1px solid #8c8f94;
+		border-radius: 4px;
+		color: #1d2327;
+		font-size: 14px;
+		height: 36px;
+		min-width: 180px;
+		padding: 0 8px;
+
+		&:focus {
+			border-color: var(--mailchimp-color-link, #017e89);
+			box-shadow: 0 0 0 1px var(--mailchimp-color-link, #017e89);
+			outline: none;
+		}
+	}
+}
+
+// -----------------------------------------------------------------------------
+// Date picker trigger + popover
+// -----------------------------------------------------------------------------
+.mailchimp-sf-date-picker {
+	position: relative;
+
+	&.is-open .mailchimp-sf-date-picker-trigger {
+		background-color: rgba(1, 126, 137, 0.08);
+		border-color: var(--mailchimp-color-link, #017e89);
+		box-shadow: 0 0 0 1px var(--mailchimp-color-link, #017e89);
+	}
+}
+
+.mailchimp-sf-date-picker-trigger {
+	align-items: center;
+	background-color: #fff;
+	border: 1px solid #c3ced5;
+	border-radius: 6px;
+	color: var(--mailchimp-color-text);
+	cursor: pointer;
+	display: inline-flex;
+	font-size: 14px;
+	gap: 8px;
+	height: 40px;
+	justify-content: space-between;
+	min-width: 220px;
+	padding: 0 10px;
+	text-align: left;
+	transition: all 0.2s;
+
+	&:hover {
+		border-color: var(--mailchimp-color-link, #017e89);
+	}
+
+	&:focus {
+		border-color: var(--mailchimp-color-link, #017e89);
+		box-shadow: 0 0 0 1px var(--mailchimp-color-link, #017e89);
+		outline: none;
+	}
+
+	.dashicons {
+		color: #50575e;
+		font-size: 18px;
+		height: 18px;
+		line-height: 18px;
+		width: 18px;
+	}
+
+	.indicator-date-picker {
+		bottom: 0;
+		display: flex;
+		justify-content: center;
+		padding: 0 8px;
+		pointer-events: none;
+		position: absolute;
+		right: 0;
+		top: 0;
+		width: 24px;
+	}
+}
+
+.mailchimp-sf-date-picker-popover {
+	background: #fff;
+	border: 1px solid #dcdcde;
+	border-radius: 8px;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+	display: none;
+	left: 0;
+	min-width: 480px;
+	padding: 20px;
+	position: absolute;
+	top: calc(100% + 6px);
+	z-index: 100;
+
+	&.is-open {
+		display: block;
+	}
+}
+
+.mailchimp-sf-date-picker-popover-row {
+	display: flex;
+	gap: 12px;
+	margin-bottom: 16px;
+}
+
+.mailchimp-sf-date-picker-field {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	gap: 6px;
+
+	label {
+		color: #4a5565;
+		font-size: 14px;
+		font-weight: 400;
+	}
+}
+
+.mailchimp-sf-date-picker-input-wrap {
+	position: relative;
+	width: 100%;
+}
+
+.mailchimp-sf-date-picker-field-calendar {
+	align-items: center;
+	bottom: 0;
+	display: flex;
+	justify-content: center;
+	padding: 0 6px;
+	pointer-events: none;
+	position: absolute;
+	right: 0;
+	top: 0;
+
+	svg {
+		display: block;
+		fill: #50575e;
+		height: 18px;
+		width: 18px;
+	}
+}
+
+#mailchimp-sf-settings-page .mailchimp-sf-date-picker-field {
+
+	select,
+	input[type="text"] {
+		background-color: #fff;
+		color: #1d2327;
+		font-size: 14px;
+		height: 36px;
+		width: 100%;
+
+		&:focus {
+			border-color: var(--mailchimp-color-link, #017e89);
+			box-shadow: 0 0 0 1px var(--mailchimp-color-link, #017e89);
+			outline: none;
+		}
+	}
+
+	.mailchimp-sf-date-picker-input-wrap input[type="text"] {
+		padding-right: 30px;
+	}
+}
+
+// Popover actions — pill shape to match design
+.mailchimp-sf-date-picker-actions {
+	display: flex;
+	gap: 8px;
+	justify-content: flex-end;
+}
+
+// -----------------------------------------------------------------------------
+// Content area
+// -----------------------------------------------------------------------------
+.mailchimp-sf-analytics-content {
+	background: #fff;
+	border: 1px solid #d3d0c8;
+	border-radius: 8px;
+	box-sizing: border-box;
+	margin-bottom: 20px;
+	min-height: 200px;
+	overflow: auto;
+	padding: 24px;
+	width: 100%;
+}
+
+.mailchimp-sf-analytics-placeholder {
+	align-items: center;
+	color: #8c8f94;
+	display: flex;
+	font-size: 15px;
+	justify-content: center;
+	min-height: 200px;
+}
+
+// -----------------------------------------------------------------------------
+// Deep link
+// -----------------------------------------------------------------------------
+.mailchimp-sf-analytics-deep-link {
+	margin-top: 16px;
+
+	a {
+		align-items: center;
+		display: inline-flex;
+		gap: 6px;
+
+		&:hover {
+			color: var(--mailchimp-color-text, #1d2327);
+		}
+	}
+
+	.dashicons {
+		font-size: 16px;
+		height: 16px;
+		line-height: 16px;
+		width: 16px;
+	}
+}
+
+// -----------------------------------------------------------------------------
+// Datepicker calendar cell
+// -----------------------------------------------------------------------------
+.datepicker-cell.selected,
+.datepicker-cell.selected:hover {
+	background-color: var(--mailchimp-color-link, #017e89);
+	color: #fff;
+}
+
+// -----------------------------------------------------------------------------
+// Analytics card (shared shell for chart sections)
+// -----------------------------------------------------------------------------
+.mailchimp-sf-analytics-card {
+	// Color tokens are defined on the card so any descendant can reference them
+	// and theming can override at the card level without leaking to the admin.
+	--mc-sa-text-strong: #241c15;
+	--mc-sa-text-muted: #464e54;
+	--mc-sa-text-body: #374151;
+	--mc-sa-border: #dddddd;
+	--mc-sa-skeleton-grid: #F4F4F5;
+	--mc-sa-blue: #2b72fb;
+	--mc-sa-red: #fff7f4;
+	--mc-sa-grey: #9ca3af;
+	--mc-sa-notice-bg: #eff6ff;
+	--mc-sa-notice-border: #bfdbfe;
+	--mc-sa-notice-text: #1e3a8a;
+	--mc-sa-error-bg: #fef2f2;
+	--mc-sa-error-border: #f25f25;
+	--mc-sa-error-text: #d03e04;
+	--mc-sa-error-title: #d03e04;
+
+	background: #fff;
+	border: 1px solid var(--mc-sa-border);
+	border-radius: 12px;
+	box-sizing: border-box;
+	margin-bottom: 20px;
+	padding: 24px;
+	position: relative;
+
+	&__header {
+		border-bottom: 1px solid var(--mc-sa-border);
+		margin-bottom: 20px;
+		padding-bottom: 16px;
+	}
+
+	&__title {
+		color: var(--mc-sa-text-strong);
+		font-size: 24px;
+		font-weight: 500;
+		line-height: 1.25;
+		margin: 0 0 4px;
+	}
+
+	&__subtitle {
+		color: var(--mc-sa-text-muted);
+		font-size: 14px;
+		line-height: 1.35;
+		margin: 0;
+	}
+}
+
+// -----------------------------------------------------------------------------
+// Subscriber activity section
+// -----------------------------------------------------------------------------
+.mailchimp-sf-sa {
+
+	// Body grid — chart column + totals column
+	&__body {
+		align-items: stretch;
+		display: grid;
+		gap: 32px;
+		grid-template-columns: minmax(0, 1fr) 320px;
+		margin-top: 32px;
+
+		&[hidden] {
+			display: none;
+		}
+	}
+
+	// Chart column
+	&__chart {
+		min-width: 0;
+	}
+
+	&__chart-title {
+		color: var(--mc-sa-text-strong);
+		font-size: 16px;
+		font-weight: 500;
+		margin: 0 0 4px;
+	}
+
+	&__chart-subtitle {
+		color: var(--mc-sa-text-muted);
+		font-size: 12px;
+		font-weight: 400;
+		line-height: 1.35;
+		margin: 0 0 16px;
+	}
+
+	// Canvas area (hosts the real canvas + skeleton + overlay + background grid)
+	&__canvas-wrap {
+		height: 340px;
+		position: relative;
+		width: 100%;
+
+		canvas {
+			display: block;
+			height: 100% !important;
+			width: 100% !important;
+		}
+	}
+
+	&__canvas {
+		position: relative;
+		transition: opacity 150ms ease;
+		z-index: 1;
+	}
+
+	// Totals column
+	&__totals {
+		border-left: 1px solid var(--mc-sa-border);
+		display: flex;
+		flex-direction: column;
+		padding-left: 32px;
+	}
+
+	&__totals-title {
+		border-bottom: 1px solid var(--mc-sa-border);
+		color: var(--mc-sa-text-strong);
+		font-size: 14px;
+		font-weight: 500;
+		margin: 0 0 20px;
+		padding-bottom: 12px;
+	}
+
+	&__donut-wrap {
+		height: 160px;
+		margin: 8px auto 24px;
+		position: relative;
+		width: 160px;
+
+		canvas {
+			display: block;
+			height: 100% !important;
+			width: 100% !important;
+		}
+	}
+
+	&__donut-center {
+		align-items: center;
+		display: flex;
+		inset: 0;
+		justify-content: center;
+		pointer-events: none;
+		position: absolute;
+	}
+
+	&__net {
+		color: var(--mc-sa-text-strong);
+		font-size: 32px;
+		font-weight: 700;
+		letter-spacing: -0.02em;
+		line-height: 1;
+	}
+
+	// Legend
+	&__legend {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	&__legend-item {
+		align-items: center;
+		color: var(--mc-sa-text-body);
+		display: grid;
+		font-size: 13px;
+		gap: 10px;
+		grid-template-columns: 14px 1fr auto;
+		margin: 0;
+
+		&.is-new .mailchimp-sf-sa__legend-swatch {
+			background: var(--mc-sa-blue);
+		}
+
+		&.is-unsub .mailchimp-sf-sa__legend-swatch {
+			background: var(--mc-sa-red);
+		}
+	}
+
+	&__legend-swatch {
+		background: var(--mc-sa-grey);
+		border-radius: 3px;
+		display: inline-block;
+		height: 14px;
+		width: 14px;
+	}
+
+	&__legend-label {
+		color: var(--mc-sa-text-body);
+	}
+
+	&__legend-value {
+		color: var(--mc-sa-text-strong);
+		font-weight: 600;
+		text-align: right;
+	}
+
+	// Notice (e.g. 180-day limited)
+	&__notice {
+		background: var(--mc-sa-notice-bg);
+		border: 1px solid var(--mc-sa-notice-border);
+		border-left-width: 4px;
+		border-radius: 6px;
+		color: var(--mc-sa-notice-text);
+		font-size: 13px;
+		line-height: 1.4;
+		margin-bottom: 20px;
+		padding: 10px 14px;
+	}
+
+	/*
+	 * Skeleton bars — live in the top ~60% of the canvas-wrap so the overlay
+	 * copy below isn't covered. No background grid here; the grid lives on
+	 * canvas-wrap itself so it spans the full chart area, not just the bars.
+	 */
+	&__skeleton-bars {
+		align-items: flex-end;
+		bottom: 42%;
+		display: none;
+		gap: 16px;
+		justify-content: center;
+		left: 0;
+		padding: 4px 0 0;
+		pointer-events: none;
+		position: absolute;
+		right: 0;
+		top: 0;
+
+		span {
+			background: var(--mc-sa-border);
+			border-radius: 2px;
+			display: block;
+			width: 18px;
+		}
+
+		span:nth-child(1) {
+			height: 96px;
+		}
+
+		span:nth-child(2) {
+			height: 53px;
+		}
+
+		span:nth-child(3) {
+			height: 122px;
+		}
+
+		span:nth-child(4) {
+			height: 80px;
+		}
+
+		span:nth-child(5) {
+			height: 40px;
+		}
+	}
+
+	// Skeleton donut — outlined grey ring, same size as the real donut
+	&__skeleton-donut {
+		border: 20px solid var(--mc-sa-border);
+		border-radius: 50%;
+		box-sizing: border-box;
+		display: none;
+		height: 100%;
+		inset: 0;
+		pointer-events: none;
+		position: absolute;
+		width: 100%;
+	}
+
+	/*
+	 * Overlay message — sits in the bottom portion of the chart area, below
+	 * the skeleton bars. Top padding gives breathing room between the bars'
+	 * baseline and the copy.
+	 */
+	&__overlay {
+		align-items: flex-start;
+		bottom: 0;
+		color: #666666;
+		display: none;
+		font-size: 14px;
+		font-weight: 500;
+		height: 40%;
+		justify-content: center;
+		left: 0;
+		padding: 28px 16px 0;
+		pointer-events: none;
+		position: absolute;
+		right: 0;
+		text-align: center;
+		z-index: 2;
+	}
+
+	// -------------------------------------------------------------------------
+	// Error banner (shown in place of the chart overlay in the error state).
+	// -------------------------------------------------------------------------
+	&__error-banner {
+		align-items: center;
+		background: var(--mc-sa-error-bg);
+		border: 1px solid var(--mc-sa-error-border);
+		border-radius: 8px;
+		display: flex;
+		gap: 12px;
+		margin: 4px 0 16px;
+		padding: 12px 14px;
+
+		&[hidden] {
+			display: none;
+		}
+	}
+
+	&__error-banner-icon {
+		align-items: center;
+		color: var(--mc-sa-error-text);
+		display: inline-flex;
+		flex-shrink: 0;
+		justify-content: center;
+		line-height: 0;
+	}
+
+	&__error-banner-body {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+
+	&__error-banner-title {
+		color: var(--mc-sa-error-title);
+		font-size: 13px;
+		font-weight: 600;
+		line-height: 1.3;
+		margin: 0 0 2px;
+	}
+
+	&__error-banner-message {
+		color: var(--mc-sa-error-text);
+		font-size: 13px;
+		line-height: 1.4;
+		margin: 0;
+	}
+
+	&__error-banner-action {
+		flex-shrink: 0;
+	}
+
+	// -------------------------------------------------------------------------
+	// State modifiers: loading / empty / error
+	// Loading + empty share the same skeleton presentation; error shows the
+	// banner instead of the chart overlay but keeps the skeleton chrome.
+	// -------------------------------------------------------------------------
+	&.is-loading,
+	&.is-empty,
+	&.is-error {
+
+		// Fade the real canvases so skeletons show through.
+		.mailchimp-sf-sa__canvas {
+			opacity: 0;
+		}
+
+		// Full-width background grid on the canvas-wrap; visible across the
+		// entire chart area (not only where the bars live).
+		.mailchimp-sf-sa__canvas-wrap {
+			background-image:
+				linear-gradient(to right, var(--mc-sa-skeleton-grid) 1px, transparent 1px),
+				linear-gradient(to bottom, var(--mc-sa-skeleton-grid) 1px, transparent 1px);
+			background-position: 0 100%;
+			background-size: calc(100% / 7) calc(100% / 8);
+		}
+
+		.mailchimp-sf-sa__skeleton-bars,
+		.mailchimp-sf-sa__skeleton-donut {
+			display: flex;
+		}
+
+		// Muted legend + center value while no real data is available.
+		.mailchimp-sf-sa__net,
+		.mailchimp-sf-sa__legend-label,
+		.mailchimp-sf-sa__legend-value {
+			color: var(--mc-sa-grey);
+			opacity: 0.85;
+		}
+
+		.mailchimp-sf-sa__legend-swatch {
+			background: var(--mc-sa-border) !important;
+		}
+	}
+
+	// The chart overlay is used for loading + empty messages only. In the
+	// error state the banner above the body communicates the problem.
+	&.is-loading,
+	&.is-empty {
+
+		.mailchimp-sf-sa__overlay {
+			display: flex;
+		}
+	}
+
+	// Pulse animation — skeleton + overlay "flash" while data is fetching.
+	&.is-loading {
+
+		.mailchimp-sf-sa__skeleton-bars span,
+		.mailchimp-sf-sa__skeleton-donut,
+		.mailchimp-sf-sa__overlay {
+			animation: mailchimp-sf-sa-pulse 1.4s ease-in-out infinite;
+		}
+	}
+
+	button#mailchimp-sf-sa-error-retry {
+		background-color: #fff;
+		border: 1px solid #ccd6dc;
+
+		&:hover,
+		&:focus,
+		&:active {
+			// color: var(--mailchimp-color-link);
+			background-color: #f6f7f7;
+		}
+	}
+}
+
+@keyframes mailchimp-sf-sa-pulse {
+
+	0%,
+	100% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.45;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+	.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__skeleton-bars span,
+	.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__skeleton-donut,
+	.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__overlay {
+		animation: none;
+	}
+}
+
+// -----------------------------------------------------------------------------
+// Responsive
+// -----------------------------------------------------------------------------
+@media screen and (max-width: $mq-small) {
+
+	.mailchimp-sf-analytics-filters {
+		align-items: stretch;
+		flex-direction: column;
+	}
+
+	.mailchimp-sf-date-picker-popover {
+		left: 0;
+		min-width: auto;
+		width: calc(100vw - 60px);
+	}
+
+	.mailchimp-sf-date-picker-popover-row {
+		flex-direction: column;
+	}
+
+	.mailchimp-sf-date-picker-trigger {
+		min-width: auto;
+		width: 100%;
+	}
+
+	.mailchimp-sf-analytics-filter-group select {
+		min-width: auto;
+		width: 100%;
+	}
+}
+
+@media screen and (max-width: $mq-medium) {
+
+	.mailchimp-sf-sa__body {
+		gap: 24px;
+		grid-template-columns: 1fr;
+	}
+
+	.mailchimp-sf-sa__totals {
+		border-left: none;
+		border-top: 1px solid var(--mc-sa-border);
+		padding-left: 0;
+		padding-top: 24px;
+	}
+}
+
+@media screen and (max-width: $mq-xs) {
+
+	.mailchimp-sf-analytics-card {
+		padding: 16px;
+	}
+
+	.mailchimp-sf-sa__canvas-wrap {
+		height: 240px;
+	}
+
+	.mailchimp-sf-sa__donut-wrap {
+		height: 160px;
+		width: 160px;
+	}
+
+	.mailchimp-sf-sa__net {
+		font-size: 28px;
+	}
+}
diff --git a/assets/js/analytics.js b/assets/js/analytics.js
index 1b574ec..7997150 100644
--- a/assets/js/analytics.js
+++ b/assets/js/analytics.js
@@ -9,7 +9,7 @@
  */
 import { Datepicker } from 'vanillajs-datepicker';
 import 'vanillajs-datepicker/css/datepicker.css'; // eslint-disable-line import/no-unresolved
-import '../css/analytics.css';
+import '../css/analytics.scss';
 
 (function () {
 	const dateRangeSelect = document.getElementById('mailchimp-sf-date-range');
diff --git a/includes/admin/templates/analytics.php b/includes/admin/templates/analytics.php
index b29a12f..e377095 100644
--- a/includes/admin/templates/analytics.php
+++ b/includes/admin/templates/analytics.php
@@ -159,7 +159,7 @@ class="mailchimp-sf-sa__error-banner-message"
 						<button
 							type="button"
 							id="mailchimp-sf-sa-error-retry"
-							class="button mailchimp-sf-sa__error-banner-action"
+							class="mailchimp-sf-button btn-secondary btn-small mailchimp-sf-sa__error-banner-action"
 						>
 							<?php esc_html_e( 'Resolve error', 'mailchimp' ); ?>
 						</button>
diff --git a/includes/class-mailchimp-subscriber-activity.php b/includes/class-mailchimp-subscriber-activity.php
index 05f061d..593e8e8 100644
--- a/includes/class-mailchimp-subscriber-activity.php
+++ b/includes/class-mailchimp-subscriber-activity.php
@@ -62,8 +62,8 @@ public function handle_get() {
 		$date_from = isset( $_POST['date_from'] ) ? sanitize_text_field( wp_unslash( $_POST['date_from'] ) ) : '';
 		$date_to   = isset( $_POST['date_to'] ) ? sanitize_text_field( wp_unslash( $_POST['date_to'] ) ) : '';
 
-		if ( '' === $list_id || ! preg_match( '/^[a-zA-Z0-9]+$/', $list_id ) ) {
-			wp_send_json_error( array( 'message' => esc_html__( 'Invalid list ID.', 'mailchimp' ) ), 400 );
+		if ( empty( $list_id ) ) {
+			wp_send_json_error( array( 'message' => esc_html__( 'Please select a list.', 'mailchimp' ) ), 400 );
 		}
 
 		if ( ! $this->is_valid_date( $date_from ) || ! $this->is_valid_date( $date_to ) ) {

From 5572a169fd94399341903ba0be0971fd6ec2b27a Mon Sep 17 00:00:00 2001
From: Dharmesh Patel <dspatel44@gmail.com>
Date: Mon, 20 Apr 2026 12:16:53 +0530
Subject: [PATCH 04/11] Fix color.

---
 assets/css/analytics.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/css/analytics.scss b/assets/css/analytics.scss
index b166aa9..f4470f9 100644
--- a/assets/css/analytics.scss
+++ b/assets/css/analytics.scss
@@ -271,7 +271,7 @@ $mq-xs: 600px;
 	--mc-sa-border: #dddddd;
 	--mc-sa-skeleton-grid: #F4F4F5;
 	--mc-sa-blue: #2b72fb;
-	--mc-sa-red: #fff7f4;
+	--mc-sa-red: #fa4b42;
 	--mc-sa-grey: #9ca3af;
 	--mc-sa-notice-bg: #eff6ff;
 	--mc-sa-notice-border: #bfdbfe;

From 6cc7ea81909bc606672ec6bdf1cbe762e443e9fc Mon Sep 17 00:00:00 2001
From: Dharmesh Patel <dspatel44@gmail.com>
Date: Mon, 20 Apr 2026 12:19:20 +0530
Subject: [PATCH 05/11] Class update for the external analytics button.

---
 includes/admin/templates/analytics.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/admin/templates/analytics.php b/includes/admin/templates/analytics.php
index e377095..0298745 100644
--- a/includes/admin/templates/analytics.php
+++ b/includes/admin/templates/analytics.php
@@ -237,7 +237,7 @@ class="mailchimp-sf-sa__legend-value"
 						<a href="<?php echo esc_url( 'https://' . $dc . '.admin.mailchimp.com/analytics/audience-analytics/' ); ?>"
 							target="_blank"
 							rel="noopener noreferrer"
-							class="mailchimp-sf-button btn-secondary">
+							class="mailchimp-sf-button btn-primary btn-small">
 							<?php esc_html_e( 'View detailed analytics in Mailchimp', 'mailchimp' ); ?>
 							<span class="dashicons dashicons-external" aria-hidden="true"></span>
 						</a>

From 60d980275af7be4c6076f45e72181e29a32af217 Mon Sep 17 00:00:00 2001
From: Dharmesh Patel <dspatel44@gmail.com>
Date: Mon, 20 Apr 2026 12:44:16 +0530
Subject: [PATCH 06/11] Allow select date only.

---
 assets/js/analytics.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/assets/js/analytics.js b/assets/js/analytics.js
index 7997150..c995f0b 100644
--- a/assets/js/analytics.js
+++ b/assets/js/analytics.js
@@ -29,12 +29,14 @@ import '../css/analytics.scss';
 
 	if (dateFrom && dateTo) {
 		fromDatepicker = new Datepicker(dateFrom, {
+			maxView: 0,
 			format: 'yyyy-mm-dd',
 			autohide: true,
 			maxDate: new Date(),
 		});
 
 		toDatepicker = new Datepicker(dateTo, {
+			maxView: 0,
 			format: 'yyyy-mm-dd',
 			autohide: true,
 			maxDate: new Date(),

From 5039eb717b2d82bf0e82767342c6e75a4cbf2a7f Mon Sep 17 00:00:00 2001
From: Dharmesh Patel <dspatel44@gmail.com>
Date: Mon, 20 Apr 2026 13:16:41 +0530
Subject: [PATCH 07/11] Made string translatable.

---
 assets/js/analytics.js | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/assets/js/analytics.js b/assets/js/analytics.js
index c995f0b..31c0a7e 100644
--- a/assets/js/analytics.js
+++ b/assets/js/analytics.js
@@ -11,6 +11,11 @@ import { Datepicker } from 'vanillajs-datepicker';
 import 'vanillajs-datepicker/css/datepicker.css'; // eslint-disable-line import/no-unresolved
 import '../css/analytics.scss';
 
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 (function () {
 	const dateRangeSelect = document.getElementById('mailchimp-sf-date-range');
 	const dateFrom = document.getElementById('mailchimp-sf-date-from');
@@ -435,16 +440,20 @@ import '../css/analytics.scss';
 		const EM_DASH = '\u2014';
 
 		const STRINGS = {
-			loadingSubtitle: 'Loading subscriber activity…',
-			loadingOverlay: 'Loading subscriber activity…',
-			emptySubtitle: 'No data available for the selected date range',
-			emptyOverlay: 'No data available for this date range',
-			errorDefault:
+			loadingSubtitle: __('Loading subscriber activity…', 'mailchimp'),
+			loadingOverlay: __('Loading subscriber activity…', 'mailchimp'),
+			emptySubtitle: __('No data available for the selected date range', 'mailchimp'),
+			emptyOverlay: __('No data available for this date range', 'mailchimp'),
+			errorDefault: __(
 				'Unable to load data for the selected date range. Please check your connection and try again.',
-			limited:
+				'mailchimp',
+			),
+			limited: __(
 				'Mailchimp subscriber activity is only available for the last 180 days. Showing available data.',
-			newSubscribers: 'New Subscribers',
-			unsubscribes: 'Unsubscribes',
+				'mailchimp',
+			),
+			newSubscribers: __('New Subscribers', 'mailchimp'),
+			unsubscribes: __('Unsubscribes', 'mailchimp'),
 		};
 
 		const STATE_CLASSES = ['is-loading', 'is-ready', 'is-empty', 'is-error'];

From 5556af74029ebce553645ccfef5973667378e107 Mon Sep 17 00:00:00 2001
From: Dharmesh Patel <dspatel44@gmail.com>
Date: Mon, 20 Apr 2026 13:42:43 +0530
Subject: [PATCH 08/11] Make sure dependency are loaded correctly.

---
 includes/class-mailchimp-analytics.php | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/includes/class-mailchimp-analytics.php b/includes/class-mailchimp-analytics.php
index 3d5eded..20658b8 100644
--- a/includes/class-mailchimp-analytics.php
+++ b/includes/class-mailchimp-analytics.php
@@ -90,11 +90,20 @@ public function enqueue_scripts( $hook_suffix ) {
 			true
 		);
 
+		$dependencies = array( 'mailchimp_sf_chartjs' );
+		$version      = MCSF_VER;
+		if ( file_exists( MCSF_DIR . '/dist/js/analytics.asset.php' ) ) {
+			$asset = require MCSF_DIR . '/dist/js/analytics.asset.php';
+			$dependencies = $asset['dependencies'] ?? array();
+			$dependencies = array_merge( $dependencies, array( 'mailchimp_sf_chartjs' ) );
+			$version      = $asset['version'] ?? MCSF_VER;
+		}
+
 		wp_enqueue_script(
 			'mailchimp_sf_analytics_js',
 			MCSF_URL . 'dist/js/analytics.js',
-			array( 'mailchimp_sf_chartjs' ),
-			MCSF_VER,
+			$dependencies,
+			$version,
 			true
 		);
 

From 548b096966d734c99d2b0ac498bcd37c26ac08a6 Mon Sep 17 00:00:00 2001
From: Dharmesh Patel <dspatel44@gmail.com>
Date: Mon, 20 Apr 2026 13:45:22 +0530
Subject: [PATCH 09/11] Correct the string.

---
 includes/admin/templates/analytics.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/includes/admin/templates/analytics.php b/includes/admin/templates/analytics.php
index 0298745..efd1bd4 100644
--- a/includes/admin/templates/analytics.php
+++ b/includes/admin/templates/analytics.php
@@ -210,7 +210,7 @@ class="mailchimp-sf-sa__canvas"
 								<li class="mailchimp-sf-sa__legend-item is-new">
 									<span class="mailchimp-sf-sa__legend-swatch" aria-hidden="true"></span>
 									<span class="mailchimp-sf-sa__legend-label">
-										<?php esc_html_e( 'New Subscriber', 'mailchimp' ); ?>
+										<?php esc_html_e( 'New Subscribers', 'mailchimp' ); ?>
 									</span>
 									<span
 										id="mailchimp-sf-sa-total-new"
@@ -220,7 +220,7 @@ class="mailchimp-sf-sa__legend-value"
 								<li class="mailchimp-sf-sa__legend-item is-unsub">
 									<span class="mailchimp-sf-sa__legend-swatch" aria-hidden="true"></span>
 									<span class="mailchimp-sf-sa__legend-label">
-										<?php esc_html_e( 'Unsubscribe', 'mailchimp' ); ?>
+										<?php esc_html_e( 'Unsubscribes', 'mailchimp' ); ?>
 									</span>
 									<span
 										id="mailchimp-sf-sa-total-unsubs"

From 92e8f0087a3c62b06c57f92dca29cdc35a7d2174 Mon Sep 17 00:00:00 2001
From: Dharmesh Patel <dspatel44@gmail.com>
Date: Mon, 20 Apr 2026 14:03:40 +0530
Subject: [PATCH 10/11] E2E: Add e2e tests.

---
 tests/cypress/config.js                       |   1 +
 tests/cypress/e2e/settings/analytics.test.js  | 168 +++++++++++++++++-
 .../functions/subscriberActivityAjax.js       |  80 +++++++++
 3 files changed, 247 insertions(+), 2 deletions(-)
 create mode 100644 tests/cypress/support/functions/subscriberActivityAjax.js

diff --git a/tests/cypress/config.js b/tests/cypress/config.js
index bc4b5d0..09f47f5 100644
--- a/tests/cypress/config.js
+++ b/tests/cypress/config.js
@@ -28,6 +28,7 @@ module.exports = defineConfig({
 			'tests/cypress/e2e/connect.test.js',
 			'tests/cypress/e2e/settings/list.test.js',
 			'tests/cypress/e2e/settings/settings.test.js',
+			'tests/cypress/e2e/settings/analytics.test.js',
 			'tests/cypress/e2e/submission/**.test.js',
 			'tests/cypress/e2e/validation/**.test.js',
 			'tests/cypress/e2e/block.test.js',
diff --git a/tests/cypress/e2e/settings/analytics.test.js b/tests/cypress/e2e/settings/analytics.test.js
index eef7a74..2a33d8a 100644
--- a/tests/cypress/e2e/settings/analytics.test.js
+++ b/tests/cypress/e2e/settings/analytics.test.js
@@ -1,4 +1,11 @@
 /* eslint-disable no-undef */
+const {
+	isSubscriberActivityRequest,
+	buildSuccessData,
+	wpJsonSuccess,
+	wpJsonError,
+} = require('../../support/functions/subscriberActivityAjax');
+
 describe('Analytics admin page', () => {
 	before(() => {
 		cy.login();
@@ -122,6 +129,161 @@ describe('Analytics admin page', () => {
 			cy.get('#mailchimp-sf-list-filter').should('exist');
 			cy.get('#mailchimp-sf-list-filter option').should('have.length.greaterThan', 0);
 		});
+
+		describe('Subscriber activity chart (stubbed)', () => {
+			const analyticsUrl = '/wp-admin/admin.php?page=mailchimp_sf_analytics';
+
+			function stubSubscriberActivity(replyFn) {
+				cy.intercept('POST', '**/admin-ajax.php', (req) => {
+					if (!isSubscriberActivityRequest(req)) {
+						req.continue();
+						return;
+					}
+					const payload = typeof replyFn === 'function' ? replyFn(req) : replyFn;
+					req.reply({
+						statusCode: 200,
+						headers: { 'content-type': 'application/json; charset=UTF-8' },
+						body: payload,
+					});
+				}).as('subscriberActivity');
+			}
+
+			it('Subscriber activity section shell (headings, canvases)', () => {
+				stubSubscriberActivity(() => wpJsonSuccess(buildSuccessData()));
+				cy.visit(analyticsUrl);
+				cy.wait('@subscriberActivity');
+				cy.get('[data-section="subscriber-activity"]').should('be.visible');
+				cy.get('#mailchimp-sf-sa-title').contains('Subscriber change over time');
+				cy.get('#mailchimp-sf-sa-totals-title').contains(
+					'Totals for the selected date range',
+				);
+				cy.get('#mailchimp-sf-sa-bar').should('exist');
+				cy.get('#mailchimp-sf-sa-donut').should('exist');
+			});
+
+			it('Success payload shows ready state and numeric totals', () => {
+				stubSubscriberActivity(() =>
+					wpJsonSuccess(
+						buildSuccessData({
+							total_new: 12,
+							total_unsubs: 4,
+							net_change: 8,
+							data: [
+								{
+									key: '2026-04-01',
+									label: 'Apr 1',
+									new_subscribers: 12,
+									unsubscribes: 4,
+								},
+							],
+						}),
+					),
+				);
+				cy.visit(analyticsUrl);
+				cy.wait('@subscriberActivity');
+				cy.get('[data-section="subscriber-activity"]').should('have.class', 'is-ready');
+				cy.get('[data-section="subscriber-activity"]').should(
+					'not.have.class',
+					'is-loading',
+				);
+				cy.get('[data-section="subscriber-activity"]').should('not.have.class', 'is-error');
+				cy.get('#mailchimp-sf-sa-net').should('contain', '+8');
+				cy.get('#mailchimp-sf-sa-total-new').should('have.text', '12');
+				cy.get('#mailchimp-sf-sa-total-unsubs').should('have.text', '4');
+			});
+
+			it('Empty data shows empty state', () => {
+				stubSubscriberActivity(() =>
+					wpJsonSuccess(
+						buildSuccessData({
+							data: [],
+							total_new: 0,
+							total_unsubs: 0,
+							net_change: 0,
+						}),
+					),
+				);
+				cy.visit(analyticsUrl);
+				cy.wait('@subscriberActivity');
+				cy.get('[data-section="subscriber-activity"]').should('have.class', 'is-empty');
+				cy.get('#mailchimp-sf-sa-daterange').contains(
+					'No data available for the selected date range',
+				);
+				cy.get('#mailchimp-sf-sa-overlay').contains(
+					'No data available for this date range',
+				);
+			});
+
+			it('API error shows error banner', () => {
+				stubSubscriberActivity(() => wpJsonError('Stub API failure'));
+				cy.visit(analyticsUrl);
+				cy.wait('@subscriberActivity');
+				cy.get('[data-section="subscriber-activity"]').should('have.class', 'is-error');
+				cy.get('#mailchimp-sf-sa-error-banner').should('be.visible');
+				cy.get('#mailchimp-sf-sa-error-message').contains('Stub API failure');
+			});
+
+			it('Retry after error loads success', () => {
+				let n = 0;
+				stubSubscriberActivity(() => {
+					n += 1;
+					if (n === 1) {
+						return wpJsonError('First request fails');
+					}
+					return wpJsonSuccess(buildSuccessData());
+				});
+				cy.visit(analyticsUrl);
+				cy.wait('@subscriberActivity');
+				cy.get('[data-section="subscriber-activity"]').should('have.class', 'is-error');
+				cy.get('#mailchimp-sf-sa-error-retry').click();
+				cy.wait('@subscriberActivity');
+				cy.get('[data-section="subscriber-activity"]').should('have.class', 'is-ready');
+				cy.get('#mailchimp-sf-sa-error-banner').should('have.attr', 'hidden');
+			});
+
+			it('Limited range shows notice', () => {
+				stubSubscriberActivity(() =>
+					wpJsonSuccess(
+						buildSuccessData({
+							limited: true,
+						}),
+					),
+				);
+				cy.visit(analyticsUrl);
+				cy.wait('@subscriberActivity');
+				cy.get('#mailchimp-sf-sa-notice')
+					.should('be.visible')
+					.and(
+						'contain',
+						'Mailchimp subscriber activity is only available for the last 180 days. Showing available data.',
+					);
+			});
+
+			it('Changing list filter triggers another subscriber activity request', function () {
+				stubSubscriberActivity(() => wpJsonSuccess(buildSuccessData()));
+				cy.visit(analyticsUrl);
+				cy.wait('@subscriberActivity');
+				cy.get('#mailchimp-sf-list-filter option').then(function ($options) {
+					const values = [...$options].map((o) => o.value).filter(Boolean);
+					if (values.length < 2) {
+						this.skip();
+					}
+					cy.get('#mailchimp-sf-list-filter').select(values[1]);
+					cy.wait('@subscriberActivity');
+				});
+			});
+
+			it('Applying a different date preset triggers another subscriber activity request', () => {
+				stubSubscriberActivity(() => wpJsonSuccess(buildSuccessData()));
+				cy.visit(analyticsUrl);
+				cy.wait('@subscriberActivity');
+				cy.get('#mailchimp-sf-date-picker-trigger').click();
+				cy.get('#mailchimp-sf-date-range').select('7');
+				cy.get('#mailchimp-sf-date-picker-apply').click();
+				cy.wait('@subscriberActivity');
+				cy.get('#mailchimp-sf-date-picker-label').should('have.text', 'Last 7 days');
+			});
+		});
 	});
 
 	describe('When not connected', () => {
@@ -134,8 +296,10 @@ describe('Analytics admin page', () => {
 		it('Analytics submenu is not visible', () => {
 			cy.visit('/wp-admin/');
 			cy.get('#adminmenu li#toplevel_page_mailchimp_sf_options').click();
-			cy.get('#adminmenu li#toplevel_page_mailchimp_sf_options .wp-submenu')
-				.should('not.contain', 'Analytics');
+			cy.get('#adminmenu li#toplevel_page_mailchimp_sf_options .wp-submenu').should(
+				'not.contain',
+				'Analytics',
+			);
 		});
 
 		after(() => {
diff --git a/tests/cypress/support/functions/subscriberActivityAjax.js b/tests/cypress/support/functions/subscriberActivityAjax.js
new file mode 100644
index 0000000..f62b288
--- /dev/null
+++ b/tests/cypress/support/functions/subscriberActivityAjax.js
@@ -0,0 +1,80 @@
+/**
+ * Helpers for stubbing `mailchimp_sf_get_subscriber_activity` admin-ajax calls.
+ * fetch() uses FormData (multipart); match by substring or parsed fields.
+ *
+ * @param {object} req Cypress intercepted request
+ * @returns {boolean}
+ */
+function isSubscriberActivityRequest(req) {
+	const action = 'mailchimp_sf_get_subscriber_activity';
+	const { body } = req;
+	if (typeof body === 'string') {
+		return body.includes(action);
+	}
+	if (body && typeof body === 'object') {
+		if (body.action === action) {
+			return true;
+		}
+	}
+	return JSON.stringify(body ?? '').includes(action);
+}
+
+/**
+ * Build a minimal successful subscriber-activity payload for stubs.
+ *
+ * @param {object} overrides Partial payload.data from PHP filter_and_aggregate.
+ * @returns {object} wp_send_json_success-compatible inner `data` object.
+ */
+function buildSuccessData(overrides = {}) {
+	return {
+		interval: 'daily',
+		data: [
+			{
+				key: '2026-04-01',
+				label: 'Apr 1',
+				new_subscribers: 5,
+				unsubscribes: 2,
+			},
+		],
+		total_new: 5,
+		total_unsubs: 2,
+		net_change: 3,
+		limited: false,
+		...overrides,
+	};
+}
+
+/**
+ * Wrap inner data as a WordPress `wp_send_json_success`-shaped response body.
+ *
+ * @param {object} data Inner success payload (from buildSuccessData).
+ * @returns {object} Full JSON body for the browser.
+ */
+function wpJsonSuccess(data) {
+	return {
+		success: true,
+		data,
+	};
+}
+
+/**
+ * Build a WordPress `wp_send_json_error`-shaped response body for stubs.
+ *
+ * @param {string} message Error message exposed to the UI.
+ * @returns {object} Full JSON body for wp_send_json_error shape.
+ */
+function wpJsonError(message) {
+	return {
+		success: false,
+		data: {
+			message,
+		},
+	};
+}
+
+module.exports = {
+	isSubscriberActivityRequest,
+	buildSuccessData,
+	wpJsonSuccess,
+	wpJsonError,
+};

From de114580d13d5fbf40faf7b3b9be3c1cd17c7a06 Mon Sep 17 00:00:00 2001
From: Dharmesh Patel <dspatel44@gmail.com>
Date: Mon, 20 Apr 2026 14:11:38 +0530
Subject: [PATCH 11/11] Add `wp-i18n` in fallback dependencies.

---
 includes/class-mailchimp-analytics.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/class-mailchimp-analytics.php b/includes/class-mailchimp-analytics.php
index 20658b8..7bb841a 100644
--- a/includes/class-mailchimp-analytics.php
+++ b/includes/class-mailchimp-analytics.php
@@ -90,7 +90,7 @@ public function enqueue_scripts( $hook_suffix ) {
 			true
 		);
 
-		$dependencies = array( 'mailchimp_sf_chartjs' );
+		$dependencies = array( 'mailchimp_sf_chartjs', 'wp-i18n' );
 		$version      = MCSF_VER;
 		if ( file_exists( MCSF_DIR . '/dist/js/analytics.asset.php' ) ) {
 			$asset = require MCSF_DIR . '/dist/js/analytics.asset.php';