From b3f44f15f8db797ae719d41552f387f4f0d9f0b7 Mon Sep 17 00:00:00 2001
From: RaduCristianPopescu
 <119046336+RaduCristianPopescu@users.noreply.github.com>
Date: Fri, 26 Sep 2025 13:34:35 +0300
Subject: [PATCH 01/10] feat: add offload metric

---
 .../dashboard/parts/connected/dashboard/index.js  | 15 ++++++++++++++-
 inc/admin.php                                     |  4 ++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/assets/src/dashboard/parts/connected/dashboard/index.js b/assets/src/dashboard/parts/connected/dashboard/index.js
index b0aa594f..74ed6544 100644
--- a/assets/src/dashboard/parts/connected/dashboard/index.js
+++ b/assets/src/dashboard/parts/connected/dashboard/index.js
@@ -52,6 +52,11 @@ const metrics = [
 		label: optimoleDashboardApp.strings.metrics.metricsTitle4,
 		description: optimoleDashboardApp.strings.metrics.metricsSubtitle4,
 		value: 'traffic'
+	},
+	{
+		label: optimoleDashboardApp.strings.metrics.metricsTitle5,
+		description: optimoleDashboardApp.strings.metrics.metricsSubtitle5,
+		value: 'offloaded_images'
 	}
 ];
 
@@ -140,6 +145,8 @@ const Dashboard = () => {
 		};
 	});
 
+	window.console.log( 'userData', userData );
+
 	const visitorsLimitPercent = ( ( userData.visitors / userData.visitors_limit ) * 100 ).toFixed( 0 );
 
 	const renewalDate = useMemo( () => {
@@ -163,7 +170,9 @@ const Dashboard = () => {
 				Math.floor( Math.random() * 2500000 ) + 500000 : // Mock KB
 				'traffic' === type ?
 					Math.floor( Math.random() * 2500 ) + 500 : // Mock MB
-					Math.floor( Math.random() * 40 ) + 10; // Mock Percentage
+					'offloaded_images' === type ?
+						Math.floor( Math.random() * 500 ) + 50 : // Mock images count
+						Math.floor( Math.random() * 40 ) + 10; // Mock Percentage
 		}
 
 		switch ( type ) {
@@ -196,6 +205,10 @@ const Dashboard = () => {
 				unit = 'TB';
 			}
 			break;
+		case 'offloaded_images':
+			formattedValue = parseInt( value );
+			unit = 1 === formattedValue ? optimoleDashboardApp.strings.metrics.image : optimoleDashboardApp.strings.metrics.images;
+			break;
 		default:
 			formattedValue = parseFloat( value ).toFixed( 2 );
 			unit = '';
diff --git a/inc/admin.php b/inc/admin.php
index 0ad50566..c17010c2 100755
--- a/inc/admin.php
+++ b/inc/admin.php
@@ -1748,6 +1748,10 @@ private function get_dashboard_strings() {
 				'metricsSubtitle3' => __( 'Average Reduction', 'optimole-wp' ),
 				'metricsTitle4'    => __( 'CDN Traffic', 'optimole-wp' ),
 				'metricsSubtitle4' => __( 'This month', 'optimole-wp' ),
+				'metricsTitle5'    => __( 'Offloaded images', 'optimole-wp' ),
+				'metricsSubtitle5' => __( 'Offloaded to cloud', 'optimole-wp'),
+				'image'			   => __( 'image', 'optimole-wp' ),
+				'images'		   => __( 'images', 'optimole-wp' ),
 			],
 			'quick_actions'                  => [
 				'speed_test_title'      => __( 'Test Your Site Speed', 'optimole-wp' ),

From 46508455bff46e678bc754e74db282f00236a5d0 Mon Sep 17 00:00:00 2001
From: RaduCristianPopescu
 <119046336+RaduCristianPopescu@users.noreply.github.com>
Date: Fri, 26 Sep 2025 17:29:05 +0300
Subject: [PATCH 02/10] feat: add offload metric and pro redirect feature

---
 .../parts/connected/dashboard/index.js        | 59 ++++++++++++++++---
 inc/admin.php                                 |  9 ++-
 2 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/assets/src/dashboard/parts/connected/dashboard/index.js b/assets/src/dashboard/parts/connected/dashboard/index.js
index 74ed6544..8b5f543e 100644
--- a/assets/src/dashboard/parts/connected/dashboard/index.js
+++ b/assets/src/dashboard/parts/connected/dashboard/index.js
@@ -14,8 +14,8 @@ import {
 
 import { sprintf } from '@wordpress/i18n';
 
-import { useSelect } from '@wordpress/data';
-import { warning, help } from '@wordpress/icons';
+import { useSelect, select } from '@wordpress/data';
+import { warning, external, help } from '@wordpress/icons';
 
 import { clearCache } from '../../../utils/api';
 
@@ -41,22 +41,30 @@ const metrics = [
 	{
 		label: optimoleDashboardApp.strings.metrics.metricsTitle2,
 		description: optimoleDashboardApp.strings.metrics.metricsSubtitle2,
-		value: 'saved_size'
+		value: 'saved_size',
+		hasButton: true,
+		buttonText: optimoleDashboardApp.strings.metrics.adjust_compression
 	},
 	{
 		label: optimoleDashboardApp.strings.metrics.metricsTitle3,
 		description: optimoleDashboardApp.strings.metrics.metricsSubtitle3,
-		value: 'compression_percentage'
+		value: 'compression_percentage',
+		hasButton: true,
+		buttonText: optimoleDashboardApp.strings.metrics.adjust_compression
 	},
 	{
 		label: optimoleDashboardApp.strings.metrics.metricsTitle4,
 		description: optimoleDashboardApp.strings.metrics.metricsSubtitle4,
-		value: 'traffic'
+		value: 'traffic',
+		hasButton: true,
+		buttonText: optimoleDashboardApp.strings.metrics.view_analytics
 	},
 	{
 		label: optimoleDashboardApp.strings.metrics.metricsTitle5,
 		description: optimoleDashboardApp.strings.metrics.metricsSubtitle5,
-		value: 'offloaded_images'
+		value: 'offloaded_images',
+		hasButton: true,
+		buttonText: optimoleDashboardApp.strings.metrics.manage_offloading
 	}
 ];
 
@@ -65,6 +73,9 @@ const settingsTab = {
 	advance: 2
 };
 
+const { getUserData } = select( 'optimole' );
+const user = getUserData();
+
 const navigate = ( tabId ) => {
 	const links = window.optimoleDashboardApp.submenu_links;
 	const settingsLink = links.find( link => '#settings' === link.hash );
@@ -217,6 +228,24 @@ const Dashboard = () => {
 		return { formattedValue, unit };
 	};
 
+	const getMetricButtonAction = ( metricValue ) => {
+		switch ( metricValue ) {
+		case 'saved_size':
+			return () => navigate( settingsTab.advance );
+		case 'compression_percentage':
+			return () => navigate( settingsTab.advance );
+		case 'traffic':
+			return () => {
+				const newWindow = window.open( 'https://dashboard.optimole.com/metrics', '_blank' );
+				if ( newWindow ) {
+					newWindow.focus();
+				}
+			};
+		case 'offloaded_images':
+			return () => navigate( settingsTab.offload_image );
+		}
+	};
+
 	return (
 		<div className="grid gap-5">
 			<div className="bg-white p-8 border-0 rounded-lg shadow-md">
@@ -319,9 +348,25 @@ const Dashboard = () => {
 										<span className='text-sm text-gray-500'>{unit}</span>
 									</div>
 
-									<div className="font-normal text-gray-600">
+									<div className="font-normal text-gray-600 mb-3">
 										{ metric.description }
 									</div>
+
+
+									{ 'free' !== user.plan && metric.hasButton && (
+										<Button
+											variant="secondary"
+											size="small"
+											className="mt-auto font-semibold rounded-md w-fit px-3 flex items-center gap-1"
+											onClick={ getMetricButtonAction( metric.value ) }
+										>
+											{ metric.buttonText }
+											{ ( 'traffic' === metric.value ) && (
+												<Icon icon={ external } size={ 16 } />
+											) }
+										</Button>
+									) }
+
 								</div>
 							</div>
 						);
diff --git a/inc/admin.php b/inc/admin.php
index c17010c2..af9e2a2d 100755
--- a/inc/admin.php
+++ b/inc/admin.php
@@ -1749,9 +1749,12 @@ private function get_dashboard_strings() {
 				'metricsTitle4'    => __( 'CDN Traffic', 'optimole-wp' ),
 				'metricsSubtitle4' => __( 'This month', 'optimole-wp' ),
 				'metricsTitle5'    => __( 'Offloaded images', 'optimole-wp' ),
-				'metricsSubtitle5' => __( 'Offloaded to cloud', 'optimole-wp'),
-				'image'			   => __( 'image', 'optimole-wp' ),
-				'images'		   => __( 'images', 'optimole-wp' ),
+				'metricsSubtitle5' => __( 'Offloaded to cloud', 'optimole-wp' ),
+				'image'            => __( 'image', 'optimole-wp' ),
+				'images'           => __( 'images', 'optimole-wp' ),
+				'view_analytics'   => __( 'View Analytics', 'optimole-wp' ),
+				'adjust_compression' => __( 'Adjust Compression', 'optimole-wp' ),
+				'manage_offloading' => __( 'Manage image offloading', 'optimole-wp' ),
 			],
 			'quick_actions'                  => [
 				'speed_test_title'      => __( 'Test Your Site Speed', 'optimole-wp' ),

From 75a6e7247445b079900866fd9b7b70a675891923 Mon Sep 17 00:00:00 2001
From: RaduCristianPopescu
 <119046336+RaduCristianPopescu@users.noreply.github.com>
Date: Fri, 26 Sep 2025 17:38:26 +0300
Subject: [PATCH 03/10] chore: copilot suggestions

---
 assets/src/dashboard/parts/connected/dashboard/index.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/assets/src/dashboard/parts/connected/dashboard/index.js b/assets/src/dashboard/parts/connected/dashboard/index.js
index 8b5f543e..b24e3a5e 100644
--- a/assets/src/dashboard/parts/connected/dashboard/index.js
+++ b/assets/src/dashboard/parts/connected/dashboard/index.js
@@ -73,8 +73,6 @@ const settingsTab = {
 	advance: 2
 };
 
-const { getUserData } = select( 'optimole' );
-const user = getUserData();
 
 const navigate = ( tabId ) => {
 	const links = window.optimoleDashboardApp.submenu_links;
@@ -352,8 +350,7 @@ const Dashboard = () => {
 										{ metric.description }
 									</div>
 
-
-									{ 'free' !== user.plan && metric.hasButton && (
+									{ 'free' !== userData.plan && metric.hasButton && (
 										<Button
 											variant="secondary"
 											size="small"
@@ -366,7 +363,6 @@ const Dashboard = () => {
 											) }
 										</Button>
 									) }
-
 								</div>
 							</div>
 						);

From ac25f1945c62d9006063679a8216d6f739a9f4bb Mon Sep 17 00:00:00 2001
From: RaduCristianPopescu
 <119046336+RaduCristianPopescu@users.noreply.github.com>
Date: Mon, 29 Sep 2025 10:22:40 +0300
Subject: [PATCH 04/10] chore: remove log

---
 assets/src/dashboard/parts/connected/dashboard/index.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/assets/src/dashboard/parts/connected/dashboard/index.js b/assets/src/dashboard/parts/connected/dashboard/index.js
index b24e3a5e..4d9db25f 100644
--- a/assets/src/dashboard/parts/connected/dashboard/index.js
+++ b/assets/src/dashboard/parts/connected/dashboard/index.js
@@ -154,8 +154,6 @@ const Dashboard = () => {
 		};
 	});
 
-	window.console.log( 'userData', userData );
-
 	const visitorsLimitPercent = ( ( userData.visitors / userData.visitors_limit ) * 100 ).toFixed( 0 );
 
 	const renewalDate = useMemo( () => {

From 2ff7cca5632b3cb8b5f14376c35d70d6a07b8c04 Mon Sep 17 00:00:00 2001
From: Soare Robert-Daniel <soare.robert.daniel@protonmail.com>
Date: Wed, 1 Oct 2025 18:20:49 +0300
Subject: [PATCH 05/10] refactor: use href props for Button and remove unused
 component

---
 .../parts/components/DashboardMetricBox.js    | 33 -------------------
 .../parts/connected/dashboard/index.js        | 24 ++++++--------
 inc/admin.php                                 |  1 +
 3 files changed, 11 insertions(+), 47 deletions(-)
 delete mode 100644 assets/src/dashboard/parts/components/DashboardMetricBox.js

diff --git a/assets/src/dashboard/parts/components/DashboardMetricBox.js b/assets/src/dashboard/parts/components/DashboardMetricBox.js
deleted file mode 100644
index 2903805f..00000000
--- a/assets/src/dashboard/parts/components/DashboardMetricBox.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Icon } from '@wordpress/components';
-
-import classnames from 'classnames';
-
-export default function DashboardMetricBox({ value, label, description, icon, compact = false }) {
-	const wrapClasses = classnames(
-		'flex bg-light-blue border border-blue-300 rounded-md basis-1/4 flex-col items-start',
-		{
-			'p-4': compact,
-			'p-6': ! compact
-		}
-	);
-
-	return (
-		<div className={wrapClasses}>
-			<Icon icon={ icon } />
-
-			<div className="flex w-full flex-col">
-				<div className="not-italic font-bold text-xl py-2 text-gray-800">
-					{ value }
-				</div>
-
-				<div className="not-italic font-normal text-sm text-gray-800">
-					{ label }
-				</div>
-
-				<div className="font-normal text-xs text-gray-600">
-					{ description }
-				</div>
-			</div>
-		</div>
-	);
-}
diff --git a/assets/src/dashboard/parts/connected/dashboard/index.js b/assets/src/dashboard/parts/connected/dashboard/index.js
index 4d9db25f..c0cc0569 100644
--- a/assets/src/dashboard/parts/connected/dashboard/index.js
+++ b/assets/src/dashboard/parts/connected/dashboard/index.js
@@ -14,7 +14,7 @@ import {
 
 import { sprintf } from '@wordpress/i18n';
 
-import { useSelect, select } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { warning, external, help } from '@wordpress/icons';
 
 import { clearCache } from '../../../utils/api';
@@ -30,7 +30,6 @@ import {
 } from '../../../utils/icons';
 
 import ProgressBar from '../../components/ProgressBar';
-import DashboardMetricBox from '../../components/DashboardMetricBox';
 
 import LastImages from './LastImages';
 import { useMemo } from 'react';
@@ -227,18 +226,13 @@ const Dashboard = () => {
 	const getMetricButtonAction = ( metricValue ) => {
 		switch ( metricValue ) {
 		case 'saved_size':
-			return () => navigate( settingsTab.advance );
+			return { onClick: () => navigate( settingsTab.advance ) };
 		case 'compression_percentage':
-			return () => navigate( settingsTab.advance );
+			return { onClick: () => navigate( settingsTab.advance ) };
 		case 'traffic':
-			return () => {
-				const newWindow = window.open( 'https://dashboard.optimole.com/metrics', '_blank' );
-				if ( newWindow ) {
-					newWindow.focus();
-				}
-			};
+			return { href: window.optimoleDashboardApp.optimoleDashMetrics, target: '_blank' };
 		case 'offloaded_images':
-			return () => navigate( settingsTab.offload_image );
+			return { onClick: () => navigate( settingsTab.offload_image ) };
 		}
 	};
 
@@ -326,6 +320,8 @@ const Dashboard = () => {
 					{ metrics.map( metric => {
 						const rawValue = userData[ metric.value ];
 						const { formattedValue, unit } = formatMetric( metric.value, rawValue );
+						const buttonAction = getMetricButtonAction( metric.value );
+						const showButton = 'free' !== userData.plan && metric.hasButton;
 
 						return (
 							<div
@@ -344,16 +340,16 @@ const Dashboard = () => {
 										<span className='text-sm text-gray-500'>{unit}</span>
 									</div>
 
-									<div className="font-normal text-gray-600 mb-3">
+									<div className={ `font-normal text-gray-600 ${ showButton ? 'mb-3' : '' }` }>
 										{ metric.description }
 									</div>
 
-									{ 'free' !== userData.plan && metric.hasButton && (
+									{ showButton && (
 										<Button
 											variant="secondary"
 											size="small"
 											className="mt-auto font-semibold rounded-md w-fit px-3 flex items-center gap-1"
-											onClick={ getMetricButtonAction( metric.value ) }
+											{ ...buttonAction }
 										>
 											{ metric.buttonText }
 											{ ( 'traffic' === metric.value ) && (
diff --git a/inc/admin.php b/inc/admin.php
index af9e2a2d..397d3842 100755
--- a/inc/admin.php
+++ b/inc/admin.php
@@ -1382,6 +1382,7 @@ private function localize_dashboard_app() {
 			'optimoleHome'               => tsdk_translate_link( 'https://optimole.com/' ),
 			'optimoleDashHome'           => tsdk_translate_link( 'https://dashboard.optimole.com/', 'query' ),
 			'optimoleDashBilling'        => tsdk_translate_link( 'https://dashboard.optimole.com/settings/billing', 'query' ),
+			'optimoleDashMetrics'        => tsdk_translate_link( tsdk_utmify( 'https://dashboard.optimole.com/metrics', 'wp-plugin', 'shortcut' ) ),
 			'offload_upgrade_url'        => tsdk_translate_link( tsdk_utmify( 'https://optimole.com/pricing/', 'offload' ) ),
 			'days_since_install'         => round( ( time() - get_option( 'optimole_wp_install', 0 ) ) / DAY_IN_SECONDS ),
 			'is_offload_media_available' => $is_offload_media_available,

From 51f298936e7baa8f0b3cbc30d7a11b3c3d0745b5 Mon Sep 17 00:00:00 2001
From: Soare Robert-Daniel <soare.robert.daniel@protonmail.com>
Date: Wed, 1 Oct 2025 18:33:29 +0300
Subject: [PATCH 06/10] refactor: reduce nesting

---
 .../dashboard/parts/connected/dashboard/index.js | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/assets/src/dashboard/parts/connected/dashboard/index.js b/assets/src/dashboard/parts/connected/dashboard/index.js
index c0cc0569..811b1bb4 100644
--- a/assets/src/dashboard/parts/connected/dashboard/index.js
+++ b/assets/src/dashboard/parts/connected/dashboard/index.js
@@ -172,13 +172,15 @@ const Dashboard = () => {
 
 		// Fallback for missing data
 		if ( undefined === value ) {
-			value = 'saved_size' === type ?
-				Math.floor( Math.random() * 2500000 ) + 500000 : // Mock KB
-				'traffic' === type ?
-					Math.floor( Math.random() * 2500 ) + 500 : // Mock MB
-					'offloaded_images' === type ?
-						Math.floor( Math.random() * 500 ) + 50 : // Mock images count
-						Math.floor( Math.random() * 40 ) + 10; // Mock Percentage
+			if ( 'saved_size' === type ) {
+				value = Math.floor( Math.random() * 2500000 ) + 500000; // Mock KB
+			} else if ( 'traffic' === type ) {
+				value = Math.floor( Math.random() * 2500 ) + 500; // Mock MB
+			} else if ( 'offloaded_images' === type ) {
+				value = Math.floor( Math.random() * 500 ) + 50; // Mock images count
+			} else {
+				value = Math.floor( Math.random() * 40 ) + 10; // Mock Percentage
+			}
 		}
 
 		switch ( type ) {

From 9f3b51dd73957b3f5cffc7e4c05a65f1c4405a66 Mon Sep 17 00:00:00 2001
From: Soare Robert-Daniel <soare.robert.daniel@protonmail.com>
Date: Wed, 1 Oct 2025 18:39:23 +0300
Subject: [PATCH 07/10] chore: add translator comments

---
 inc/admin.php | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/inc/admin.php b/inc/admin.php
index 397d3842..18d6d420 100755
--- a/inc/admin.php
+++ b/inc/admin.php
@@ -1751,7 +1751,9 @@ private function get_dashboard_strings() {
 				'metricsSubtitle4' => __( 'This month', 'optimole-wp' ),
 				'metricsTitle5'    => __( 'Offloaded images', 'optimole-wp' ),
 				'metricsSubtitle5' => __( 'Offloaded to cloud', 'optimole-wp' ),
+				// translators: is used as singular when the number of images is 1 for a unit label.
 				'image'            => __( 'image', 'optimole-wp' ),
+				// translators: is used as plural when the number of images is more than 1 for a unit label.
 				'images'           => __( 'images', 'optimole-wp' ),
 				'view_analytics'   => __( 'View Analytics', 'optimole-wp' ),
 				'adjust_compression' => __( 'Adjust Compression', 'optimole-wp' ),

From 4e2ea2e0f00021e66c5bdec723c5c8dea31c2f5c Mon Sep 17 00:00:00 2001
From: Soare Robert-Daniel <soare.robert.daniel@protonmail.com>
Date: Thu, 2 Oct 2025 18:06:44 +0300
Subject: [PATCH 08/10] chore: tweak

---
 .../parts/components/DashboardMetricBox.js    | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 assets/src/dashboard/parts/components/DashboardMetricBox.js

diff --git a/assets/src/dashboard/parts/components/DashboardMetricBox.js b/assets/src/dashboard/parts/components/DashboardMetricBox.js
new file mode 100644
index 00000000..2903805f
--- /dev/null
+++ b/assets/src/dashboard/parts/components/DashboardMetricBox.js
@@ -0,0 +1,33 @@
+import { Icon } from '@wordpress/components';
+
+import classnames from 'classnames';
+
+export default function DashboardMetricBox({ value, label, description, icon, compact = false }) {
+	const wrapClasses = classnames(
+		'flex bg-light-blue border border-blue-300 rounded-md basis-1/4 flex-col items-start',
+		{
+			'p-4': compact,
+			'p-6': ! compact
+		}
+	);
+
+	return (
+		<div className={wrapClasses}>
+			<Icon icon={ icon } />
+
+			<div className="flex w-full flex-col">
+				<div className="not-italic font-bold text-xl py-2 text-gray-800">
+					{ value }
+				</div>
+
+				<div className="not-italic font-normal text-sm text-gray-800">
+					{ label }
+				</div>
+
+				<div className="font-normal text-xs text-gray-600">
+					{ description }
+				</div>
+			</div>
+		</div>
+	);
+}

From b2e2ed206b420b132c071606708250d4e34d3647 Mon Sep 17 00:00:00 2001
From: Soare Robert-Daniel <soare.robert.daniel@protonmail.com>
Date: Mon, 6 Oct 2025 16:40:54 +0300
Subject: [PATCH 09/10] fix: add icons and offload metric condition display
 based on plan

---
 .../parts/connected/dashboard/index.js        | 36 +++++++++++++------
 assets/src/dashboard/utils/icons.js           | 11 ++++++
 assets/src/global.d.ts                        |  1 +
 3 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/assets/src/dashboard/parts/connected/dashboard/index.js b/assets/src/dashboard/parts/connected/dashboard/index.js
index 811b1bb4..78a5df60 100644
--- a/assets/src/dashboard/parts/connected/dashboard/index.js
+++ b/assets/src/dashboard/parts/connected/dashboard/index.js
@@ -26,7 +26,11 @@ import {
 	bolt,
 	update,
 	offloadImage,
-	settings
+	settings,
+	globe,
+	arrowDownToLine,
+	cloudDownload,
+	chartBarDecreasing
 } from '../../../utils/icons';
 
 import ProgressBar from '../../components/ProgressBar';
@@ -38,6 +42,7 @@ const cardClasses = 'flex p-6 bg-light-blue border border-blue-300 rounded-md';
 
 const metrics = [
 	{
+		icon: arrowDownToLine,
 		label: optimoleDashboardApp.strings.metrics.metricsTitle2,
 		description: optimoleDashboardApp.strings.metrics.metricsSubtitle2,
 		value: 'saved_size',
@@ -45,6 +50,7 @@ const metrics = [
 		buttonText: optimoleDashboardApp.strings.metrics.adjust_compression
 	},
 	{
+		icon: chartBarDecreasing,
 		label: optimoleDashboardApp.strings.metrics.metricsTitle3,
 		description: optimoleDashboardApp.strings.metrics.metricsSubtitle3,
 		value: 'compression_percentage',
@@ -52,21 +58,28 @@ const metrics = [
 		buttonText: optimoleDashboardApp.strings.metrics.adjust_compression
 	},
 	{
+		icon: globe,
 		label: optimoleDashboardApp.strings.metrics.metricsTitle4,
 		description: optimoleDashboardApp.strings.metrics.metricsSubtitle4,
 		value: 'traffic',
 		hasButton: true,
 		buttonText: optimoleDashboardApp.strings.metrics.view_analytics
-	},
-	{
-		label: optimoleDashboardApp.strings.metrics.metricsTitle5,
-		description: optimoleDashboardApp.strings.metrics.metricsSubtitle5,
-		value: 'offloaded_images',
-		hasButton: true,
-		buttonText: optimoleDashboardApp.strings.metrics.manage_offloading
 	}
 ];
 
+if ( optimoleDashboardApp.user_data?.can_use_offloading ) {
+	metrics.push(
+		{
+			icon: cloudDownload,
+			label: optimoleDashboardApp.strings.metrics.metricsTitle5,
+			description: optimoleDashboardApp.strings.metrics.metricsSubtitle5,
+			value: 'offloaded_images',
+			hasButton: true,
+			buttonText: optimoleDashboardApp.strings.metrics.manage_offloading
+		}
+	);
+}
+
 const settingsTab = {
 	offload_image: 1,
 	advance: 2
@@ -333,8 +346,11 @@ const Dashboard = () => {
 								) }
 							>
 								<div className="flex w-full flex-col">
-									<div className="text-sm text-gray-500">
-										{ metric.label }
+									<div className='flex flex-row items-center gap-2 mb-2'>
+										<Icon icon={ metric.icon } size={ 16 } className="text-info" />
+										<div className="text-sm text-gray-500">
+											{ metric.label }
+										</div>
 									</div>
 
 									<div className='flex items-end gap-1'>
diff --git a/assets/src/dashboard/utils/icons.js b/assets/src/dashboard/utils/icons.js
index 4520a328..82d1f3ad 100644
--- a/assets/src/dashboard/utils/icons.js
+++ b/assets/src/dashboard/utils/icons.js
@@ -174,3 +174,14 @@ export const user = (
 	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
 );
 
+export const arrowDownToLine = (
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 17V3"/><path d="m6 11 6 6 6-6"/><path d="M19 21H5"/></svg>
+);
+
+export const cloudDownload = (
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 13v8l-4-4"/><path d="m12 21 4-4"/><path d="M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284"/></svg>
+);
+
+export const chartBarDecreasing = (
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M7 11h8"/><path d="M7 16h3"/><path d="M7 6h12"/></svg>
+);
diff --git a/assets/src/global.d.ts b/assets/src/global.d.ts
index 5bdf096e..9dcacfbd 100644
--- a/assets/src/global.d.ts
+++ b/assets/src/global.d.ts
@@ -577,6 +577,7 @@ export interface UserData {
   is_cname_assigned: string
   extra_visits: boolean
   renews_on: number
+  can_use_offloading: boolean
 }
 
 export interface AvailableApp2 {

From 9e1d87bccee245461f5f5b0cd25f78c2b15589ad Mon Sep 17 00:00:00 2001
From: Soare Robert-Daniel <soare.robert.daniel@protonmail.com>
Date: Mon, 6 Oct 2025 17:59:40 +0300
Subject: [PATCH 10/10] chore: use store for userData check

---
 .../parts/connected/dashboard/index.js        | 89 ++++++++++---------
 inc/v2/Offload/Loader.php                     |  2 +-
 2 files changed, 47 insertions(+), 44 deletions(-)

diff --git a/assets/src/dashboard/parts/connected/dashboard/index.js b/assets/src/dashboard/parts/connected/dashboard/index.js
index 78a5df60..968d6c88 100644
--- a/assets/src/dashboard/parts/connected/dashboard/index.js
+++ b/assets/src/dashboard/parts/connected/dashboard/index.js
@@ -13,7 +13,7 @@ import {
 } from '@wordpress/components';
 
 import { sprintf } from '@wordpress/i18n';
-
+import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { warning, external, help } from '@wordpress/icons';
 
@@ -36,50 +36,9 @@ import {
 import ProgressBar from '../../components/ProgressBar';
 
 import LastImages from './LastImages';
-import { useMemo } from 'react';
 
 const cardClasses = 'flex p-6 bg-light-blue border border-blue-300 rounded-md';
 
-const metrics = [
-	{
-		icon: arrowDownToLine,
-		label: optimoleDashboardApp.strings.metrics.metricsTitle2,
-		description: optimoleDashboardApp.strings.metrics.metricsSubtitle2,
-		value: 'saved_size',
-		hasButton: true,
-		buttonText: optimoleDashboardApp.strings.metrics.adjust_compression
-	},
-	{
-		icon: chartBarDecreasing,
-		label: optimoleDashboardApp.strings.metrics.metricsTitle3,
-		description: optimoleDashboardApp.strings.metrics.metricsSubtitle3,
-		value: 'compression_percentage',
-		hasButton: true,
-		buttonText: optimoleDashboardApp.strings.metrics.adjust_compression
-	},
-	{
-		icon: globe,
-		label: optimoleDashboardApp.strings.metrics.metricsTitle4,
-		description: optimoleDashboardApp.strings.metrics.metricsSubtitle4,
-		value: 'traffic',
-		hasButton: true,
-		buttonText: optimoleDashboardApp.strings.metrics.view_analytics
-	}
-];
-
-if ( optimoleDashboardApp.user_data?.can_use_offloading ) {
-	metrics.push(
-		{
-			icon: cloudDownload,
-			label: optimoleDashboardApp.strings.metrics.metricsTitle5,
-			description: optimoleDashboardApp.strings.metrics.metricsSubtitle5,
-			value: 'offloaded_images',
-			hasButton: true,
-			buttonText: optimoleDashboardApp.strings.metrics.manage_offloading
-		}
-	);
-}
-
 const settingsTab = {
 	offload_image: 1,
 	advance: 2
@@ -166,6 +125,50 @@ const Dashboard = () => {
 		};
 	});
 
+	const availableMetrics = useMemo( () => {
+		const metrics = [
+			{
+				icon: arrowDownToLine,
+				label: optimoleDashboardApp.strings.metrics.metricsTitle2,
+				description: optimoleDashboardApp.strings.metrics.metricsSubtitle2,
+				value: 'saved_size',
+				hasButton: true,
+				buttonText: optimoleDashboardApp.strings.metrics.adjust_compression
+			},
+			{
+				icon: chartBarDecreasing,
+				label: optimoleDashboardApp.strings.metrics.metricsTitle3,
+				description: optimoleDashboardApp.strings.metrics.metricsSubtitle3,
+				value: 'compression_percentage',
+				hasButton: true,
+				buttonText: optimoleDashboardApp.strings.metrics.adjust_compression
+			},
+			{
+				icon: globe,
+				label: optimoleDashboardApp.strings.metrics.metricsTitle4,
+				description: optimoleDashboardApp.strings.metrics.metricsSubtitle4,
+				value: 'traffic',
+				hasButton: true,
+				buttonText: optimoleDashboardApp.strings.metrics.view_analytics
+			}
+		];
+
+		if ( userData?.can_use_offloading ) {
+			metrics.push(
+				{
+					icon: cloudDownload,
+					label: optimoleDashboardApp.strings.metrics.metricsTitle5,
+					description: optimoleDashboardApp.strings.metrics.metricsSubtitle5,
+					value: 'offloaded_images',
+					hasButton: true,
+					buttonText: optimoleDashboardApp.strings.metrics.manage_offloading
+				}
+			);
+		}
+
+		return metrics;
+	}, [ userData ]);
+
 	const visitorsLimitPercent = ( ( userData.visitors / userData.visitors_limit ) * 100 ).toFixed( 0 );
 
 	const renewalDate = useMemo( () => {
@@ -332,7 +335,7 @@ const Dashboard = () => {
 				</div>
 
 				<div className="flex pt-5 gap-5 flex-col md:flex-row">
-					{ metrics.map( metric => {
+					{ availableMetrics.map( metric => {
 						const rawValue = userData[ metric.value ];
 						const { formattedValue, unit } = formatMetric( metric.value, rawValue );
 						const buttonAction = getMetricButtonAction( metric.value );
diff --git a/inc/v2/Offload/Loader.php b/inc/v2/Offload/Loader.php
index e3f9e8b4..ac75e722 100644
--- a/inc/v2/Offload/Loader.php
+++ b/inc/v2/Offload/Loader.php
@@ -25,7 +25,7 @@ public function __construct() {
 	 * Adds filters to integrate the custom image editor into WordPress.
 	 */
 	public function register_hooks() {
-		if( has_filter( 'wp_image_editors', 'photon_subsizes_override_image_editors' )){
+		if ( has_filter( 'wp_image_editors', 'photon_subsizes_override_image_editors' ) ) {
 			return;
 		}
 		add_filter( 'wp_image_editors', [ $this, 'register_image_editor' ] );