| 1 |
<?php |
| 2 |
/** |
| 3 |
* Reports page — interactive preview with sample data (shown when Pro is not active). |
| 4 |
* |
| 5 |
* @package SpringDevs\Subscription\Admin |
| 6 |
*/ |
| 7 |
|
| 8 |
defined( 'ABSPATH' ) || exit; |
| 9 |
|
| 10 |
$upgrade_url = 'https://wpsubscription.co/?utm_source=plugin&utm_medium=admin&utm_campaign=upgrade_pro'; |
| 11 |
$currency = function_exists( 'get_woocommerce_currency_symbol' ) ? get_woocommerce_currency_symbol() : '$'; |
| 12 |
|
| 13 |
// --- Dummy data --- |
| 14 |
$dummy_metrics = array( |
| 15 |
'active_subscriptions' => 142, |
| 16 |
'cancelled_subscriptions' => 28, |
| 17 |
'trial_subscriptions' => 19, |
| 18 |
'total_products' => 8, |
| 19 |
'churn_rate' => 8.4, |
| 20 |
'trial_conversion_rate' => 64.7, |
| 21 |
'average_subscription_value' => 24.99, |
| 22 |
); |
| 23 |
$dummy_revenue = array( |
| 24 |
'total_revenue' => 18420.00, |
| 25 |
'mrr' => 2847.00, |
| 26 |
'arr' => 34164.00, |
| 27 |
'net_revenue' => 17090.00, |
| 28 |
); |
| 29 |
$dummy_revenue_at_risk = 580.00; |
| 30 |
$dummy_trials = array( |
| 31 |
'total_trials' => 47, |
| 32 |
'converted_trials' => 31, |
| 33 |
'active_trials' => 19, |
| 34 |
'trial_revenue' => 2240.00, |
| 35 |
); |
| 36 |
$dummy_popular = array( |
| 37 |
array( |
| 38 |
'product_name' => 'Monthly Wellness Box', |
| 39 |
'subscription_count' => 56, |
| 40 |
'total_revenue' => 6720.00, |
| 41 |
'average_revenue' => 120.00, |
| 42 |
), |
| 43 |
array( |
| 44 |
'product_name' => 'Annual Premium Plan', |
| 45 |
'subscription_count' => 38, |
| 46 |
'total_revenue' => 7220.00, |
| 47 |
'average_revenue' => 190.00, |
| 48 |
), |
| 49 |
array( |
| 50 |
'product_name' => 'Basic Weekly Kit', |
| 51 |
'subscription_count' => 29, |
| 52 |
'total_revenue' => 2320.00, |
| 53 |
'average_revenue' => 80.00, |
| 54 |
), |
| 55 |
array( |
| 56 |
'product_name' => 'Pro Content Access', |
| 57 |
'subscription_count' => 19, |
| 58 |
'total_revenue' => 1140.00, |
| 59 |
'average_revenue' => 60.00, |
| 60 |
), |
| 61 |
array( |
| 62 |
'product_name' => 'Starter Bundle', |
| 63 |
'subscription_count' => 12, |
| 64 |
'total_revenue' => 480.00, |
| 65 |
'average_revenue' => 40.00, |
| 66 |
), |
| 67 |
); |
| 68 |
$dummy_trends = array( |
| 69 |
array( |
| 70 |
'label' => 'Jan', |
| 71 |
'revenue' => 2200, |
| 72 |
'active' => 118, |
| 73 |
'total' => 130, |
| 74 |
'cancelled' => 5, |
| 75 |
'trials' => 12, |
| 76 |
'conversions' => 8, |
| 77 |
), |
| 78 |
array( |
| 79 |
'label' => 'Feb', |
| 80 |
'revenue' => 2380, |
| 81 |
'active' => 122, |
| 82 |
'total' => 135, |
| 83 |
'cancelled' => 4, |
| 84 |
'trials' => 14, |
| 85 |
'conversions' => 9, |
| 86 |
), |
| 87 |
array( |
| 88 |
'label' => 'Mar', |
| 89 |
'revenue' => 2510, |
| 90 |
'active' => 126, |
| 91 |
'total' => 140, |
| 92 |
'cancelled' => 6, |
| 93 |
'trials' => 16, |
| 94 |
'conversions' => 11, |
| 95 |
), |
| 96 |
array( |
| 97 |
'label' => 'Apr', |
| 98 |
'revenue' => 2650, |
| 99 |
'active' => 130, |
| 100 |
'total' => 144, |
| 101 |
'cancelled' => 3, |
| 102 |
'trials' => 18, |
| 103 |
'conversions' => 12, |
| 104 |
), |
| 105 |
array( |
| 106 |
'label' => 'May', |
| 107 |
'revenue' => 2730, |
| 108 |
'active' => 134, |
| 109 |
'total' => 148, |
| 110 |
'cancelled' => 5, |
| 111 |
'trials' => 17, |
| 112 |
'conversions' => 14, |
| 113 |
), |
| 114 |
array( |
| 115 |
'label' => 'Jun', |
| 116 |
'revenue' => 2847, |
| 117 |
'active' => 142, |
| 118 |
'total' => 155, |
| 119 |
'cancelled' => 4, |
| 120 |
'trials' => 19, |
| 121 |
'conversions' => 13, |
| 122 |
), |
| 123 |
); |
| 124 |
|
| 125 |
if ( ! function_exists( 'subscrpt_preview_format_price' ) ) { |
| 126 |
/** |
| 127 |
* Format a dummy price for display in the preview. |
| 128 |
* |
| 129 |
* @param float $amount Amount to format. |
| 130 |
* @return string Formatted price HTML. |
| 131 |
*/ |
| 132 |
function subscrpt_preview_format_price( float $amount ): string { |
| 133 |
return function_exists( 'wc_price' ) ? wc_price( $amount ) : esc_html( '$' . number_format( $amount, 2 ) ); |
| 134 |
} |
| 135 |
} |
| 136 |
?> |
| 137 |
|
| 138 |
<!-- Disclaimer banner --> |
| 139 |
<div style="max-width:1240px;margin:20px auto 0;padding:0;"> |
| 140 |
<div style="background:#fffbeb;border:1px solid #fcd34d;border-radius:8px;padding:12px 16px;display:flex;align-items:flex-start;gap:10px;"> |
| 141 |
<svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="#d97706" style="flex-shrink:0;margin-top:1px;" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> |
| 142 |
<p style="margin:0;font-size:13px;color:#92400e;line-height:1.5;"> |
| 143 |
<strong><?php esc_html_e( 'Preview with sample data.', 'subscription' ); ?></strong> |
| 144 |
<?php esc_html_e( 'This page shows example data to illustrate the feature.', 'subscription' ); ?> |
| 145 |
<a href="<?php echo esc_url( $upgrade_url ); ?>" target="_blank" rel="noreferrer noopener" style="color:#b45309;font-weight:600;text-decoration:underline;"><?php esc_html_e( 'Upgrade to Pro', 'subscription' ); ?></a> |
| 146 |
<?php esc_html_e( 'to unlock real subscription analytics.', 'subscription' ); ?> |
| 147 |
</p> |
| 148 |
</div> |
| 149 |
</div> |
| 150 |
|
| 151 |
<!-- Page header --> |
| 152 |
<div style="max-width:1240px;margin:20px auto 0;padding:0 0 20px;"> |
| 153 |
<div style="display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px;"> |
| 154 |
<div> |
| 155 |
<h1 style="font-size:1.375rem;font-weight:700;color:var(--wpsubs-text);margin:0 0 6px;line-height:1.2;"><?php esc_html_e( 'Subscription Reports', 'subscription' ); ?></h1> |
| 156 |
<p style="font-size:13px;color:var(--wpsubs-text-muted);margin:0;line-height:1.5;"><?php esc_html_e( 'Data-driven insights for your subscription business.', 'subscription' ); ?></p> |
| 157 |
</div> |
| 158 |
<div style="display:flex;align-items:center;gap:8px;flex-shrink:0;padding-top:4px;"> |
| 159 |
<button type="button" class="wpsubs-btn wpsubs-btn--outline" style="height:28px;padding:0 10px;font-size:12px;cursor:not-allowed;opacity:0.6;" disabled> |
| 160 |
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" style="flex-shrink:0;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg> |
| 161 |
<?php esc_html_e( 'Refresh', 'subscription' ); ?> |
| 162 |
</button> |
| 163 |
</div> |
| 164 |
</div> |
| 165 |
<div style="border-top:1px dashed #d0d3d7;"></div> |
| 166 |
</div> |
| 167 |
|
| 168 |
<!-- Page content --> |
| 169 |
<div class="wp-subscription-admin-content list-page subscrpt-subs-list" style="margin-top:0;"> |
| 170 |
|
| 171 |
<!-- KPI stat cards --> |
| 172 |
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:16px;"> |
| 173 |
|
| 174 |
<div style="border:1px solid var(--wpsubs-border);border-radius:12px;padding:20px;background:var(--wpsubs-surface);"> |
| 175 |
<div style="display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px;"> |
| 176 |
<div style="font-size:1.875rem;font-weight:700;color:#111827;line-height:1;"><?php echo esc_html( number_format_i18n( $dummy_metrics['active_subscriptions'] ) ); ?></div> |
| 177 |
<span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:#eef2ff;flex-shrink:0;color:#6366f1;"> |
| 178 |
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /></svg> |
| 179 |
</span> |
| 180 |
</div> |
| 181 |
<div style="font-size:14px;font-weight:500;color:var(--wpsubs-text);"><?php esc_html_e( 'Active Subscriptions', 'subscription' ); ?></div> |
| 182 |
<div style="font-size:12px;color:var(--wpsubs-text-muted);margin-top:2px;"><?php esc_html_e( 'Recurring revenue base', 'subscription' ); ?></div> |
| 183 |
</div> |
| 184 |
|
| 185 |
<div style="border:1px solid var(--wpsubs-border);border-radius:12px;padding:20px;background:var(--wpsubs-surface);"> |
| 186 |
<div style="display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px;"> |
| 187 |
<div style="font-size:1.875rem;font-weight:700;color:#111827;line-height:1;"><?php echo wp_kses_post( subscrpt_preview_format_price( $dummy_revenue['mrr'] ) ); ?></div> |
| 188 |
<span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:#f0fdf4;flex-shrink:0;color:#16a34a;"> |
| 189 |
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> |
| 190 |
</span> |
| 191 |
</div> |
| 192 |
<div style="font-size:14px;font-weight:500;color:var(--wpsubs-text);"><?php esc_html_e( 'Monthly Recurring Revenue', 'subscription' ); ?></div> |
| 193 |
<div style="font-size:12px;color:var(--wpsubs-text-muted);margin-top:2px;"><?php esc_html_e( 'Predictable monthly income', 'subscription' ); ?></div> |
| 194 |
</div> |
| 195 |
|
| 196 |
<div style="border:1px solid var(--wpsubs-border);border-radius:12px;padding:20px;background:var(--wpsubs-surface);"> |
| 197 |
<div style="display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px;"> |
| 198 |
<div style="font-size:1.875rem;font-weight:700;color:#ef4444;line-height:1;"><?php echo wp_kses_post( subscrpt_preview_format_price( $dummy_revenue_at_risk ) ); ?></div> |
| 199 |
<span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:#fef2f2;flex-shrink:0;color:#ef4444;"> |
| 200 |
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" /></svg> |
| 201 |
</span> |
| 202 |
</div> |
| 203 |
<div style="font-size:14px;font-weight:500;color:var(--wpsubs-text);"><?php esc_html_e( 'Revenue at Risk', 'subscription' ); ?></div> |
| 204 |
<div style="font-size:12px;color:var(--wpsubs-text-muted);margin-top:2px;"><?php esc_html_e( 'Needs attention', 'subscription' ); ?></div> |
| 205 |
</div> |
| 206 |
|
| 207 |
<div style="border:1px solid var(--wpsubs-border);border-radius:12px;padding:20px;background:var(--wpsubs-surface);"> |
| 208 |
<div style="display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px;"> |
| 209 |
<div style="font-size:1.875rem;font-weight:700;color:#111827;line-height:1;"><?php echo esc_html( number_format_i18n( $dummy_metrics['churn_rate'], 1 ) ); ?>%</div> |
| 210 |
<span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:#fff7ed;flex-shrink:0;color:#f97316;"> |
| 211 |
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6" /></svg> |
| 212 |
</span> |
| 213 |
</div> |
| 214 |
<div style="font-size:14px;font-weight:500;color:var(--wpsubs-text);"><?php esc_html_e( 'Churn Rate', 'subscription' ); ?></div> |
| 215 |
<div style="font-size:12px;color:var(--wpsubs-text-muted);margin-top:2px;"><?php esc_html_e( 'Customer retention indicator', 'subscription' ); ?></div> |
| 216 |
</div> |
| 217 |
|
| 218 |
<div style="border:1px solid var(--wpsubs-border);border-radius:12px;padding:20px;background:var(--wpsubs-surface);"> |
| 219 |
<div style="display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px;"> |
| 220 |
<div style="font-size:1.875rem;font-weight:700;color:#111827;line-height:1;"><?php echo esc_html( number_format_i18n( $dummy_metrics['trial_conversion_rate'], 1 ) ); ?>%</div> |
| 221 |
<span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:#faf5ff;flex-shrink:0;color:#8b5cf6;"> |
| 222 |
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> |
| 223 |
</span> |
| 224 |
</div> |
| 225 |
<div style="font-size:14px;font-weight:500;color:var(--wpsubs-text);"><?php esc_html_e( 'Trial Conversion', 'subscription' ); ?></div> |
| 226 |
<div style="font-size:12px;color:var(--wpsubs-text-muted);margin-top:2px;"><?php esc_html_e( 'Trial to paid success', 'subscription' ); ?></div> |
| 227 |
</div> |
| 228 |
|
| 229 |
</div> |
| 230 |
|
| 231 |
<!-- Revenue & Trends chart --> |
| 232 |
<div class="wpsubs-table-card" style="margin-bottom:16px;"> |
| 233 |
<div style="padding:16px 20px;border-bottom:1px solid var(--wpsubs-border);"> |
| 234 |
<h2 style="font-size:13px;font-weight:600;color:var(--wpsubs-text-muted);text-transform:uppercase;letter-spacing:0.07em;margin:0;"><?php esc_html_e( 'Revenue & Subscription Trends', 'subscription' ); ?></h2> |
| 235 |
</div> |
| 236 |
<div style="padding:20px;display:grid;grid-template-columns:1fr 260px;gap:24px;align-items:start;"> |
| 237 |
<div> |
| 238 |
<canvas id="subscrpt-preview-trends-chart" style="width:100%;height:280px;"></canvas> |
| 239 |
</div> |
| 240 |
<div> |
| 241 |
<p style="font-size:12px;font-weight:600;color:var(--wpsubs-text-muted);text-transform:uppercase;letter-spacing:0.07em;margin:0 0 10px;"><?php esc_html_e( 'Quick Insights', 'subscription' ); ?></p> |
| 242 |
<div style="display:flex;flex-direction:column;gap:10px;"> |
| 243 |
<div style="padding:12px;border-radius:8px;border:1px solid #86efac;background:#f0fdf4;"> |
| 244 |
<div style="font-size:12px;font-weight:600;color:#166534;margin-bottom:4px;"><?php esc_html_e( 'Revenue Growth', 'subscription' ); ?></div> |
| 245 |
<div style="font-size:12px;color:#15803d;"><?php esc_html_e( 'MRR is growing steadily — great foundation!', 'subscription' ); ?></div> |
| 246 |
</div> |
| 247 |
<div style="padding:12px;border-radius:8px;border:1px solid var(--wpsubs-border);background:var(--wpsubs-surface-muted);"> |
| 248 |
<div style="font-size:12px;font-weight:600;color:var(--wpsubs-text);margin-bottom:4px;"><?php esc_html_e( 'Pro Tip', 'subscription' ); ?></div> |
| 249 |
<div style="font-size:12px;color:var(--wpsubs-text-muted);"><?php esc_html_e( 'Focus on top-performing products and optimise trial conversions.', 'subscription' ); ?></div> |
| 250 |
</div> |
| 251 |
</div> |
| 252 |
</div> |
| 253 |
</div> |
| 254 |
</div> |
| 255 |
|
| 256 |
<!-- Performance metrics: 3 cards --> |
| 257 |
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px;"> |
| 258 |
|
| 259 |
<div class="wpsubs-table-card"> |
| 260 |
<div style="padding:16px 20px;border-bottom:1px solid var(--wpsubs-border);"> |
| 261 |
<h2 style="font-size:13px;font-weight:600;color:var(--wpsubs-text-muted);text-transform:uppercase;letter-spacing:0.07em;margin:0;"><?php esc_html_e( 'Revenue Performance', 'subscription' ); ?></h2> |
| 262 |
</div> |
| 263 |
<div style="padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:16px;"> |
| 264 |
<div> |
| 265 |
<div style="font-size:1.125rem;font-weight:700;color:#111827;"><?php echo wp_kses_post( subscrpt_preview_format_price( $dummy_revenue['total_revenue'] ) ); ?></div> |
| 266 |
<div style="font-size:12px;color:var(--wpsubs-text-muted);margin-top:2px;"><?php esc_html_e( 'Total Revenue', 'subscription' ); ?></div> |
| 267 |
</div> |
| 268 |
<div> |
| 269 |
<div style="font-size:1.125rem;font-weight:700;color:#111827;"><?php echo wp_kses_post( subscrpt_preview_format_price( $dummy_revenue['arr'] ) ); ?></div> |
| 270 |
<div style="font-size:12px;color:var(--wpsubs-text-muted);margin-top:2px;"><?php esc_html_e( 'Annual Recurring', 'subscription' ); ?></div> |
| 271 |
</div> |
| 272 |
<div> |
| 273 |
<div style="font-size:1.125rem;font-weight:700;color:#111827;"><?php echo wp_kses_post( subscrpt_preview_format_price( $dummy_revenue['net_revenue'] ) ); ?></div> |
| 274 |
<div style="font-size:12px;color:var(--wpsubs-text-muted);margin-top:2px;"><?php esc_html_e( 'Net Revenue', 'subscription' ); ?></div> |
| 275 |
</div> |
| 276 |
<div> |
| 277 |
<div style="font-size:1.125rem;font-weight:700;color:#111827;"><?php echo wp_kses_post( subscrpt_preview_format_price( $dummy_metrics['average_subscription_value'] ) ); ?></div> |
| 278 |
<div style="font-size:12px;color:var(--wpsubs-text-muted);margin-top:2px;"><?php esc_html_e( 'Avg. Value', 'subscription' ); ?></div> |
| 279 |
</div> |
| 280 |
</div> |
| 281 |
</div> |
| 282 |
|
| 283 |
<div class="wpsubs-table-card"> |
| 284 |
<div style="padding:16px 20px;border-bottom:1px solid var(--wpsubs-border);"> |
| 285 |
<h2 style="font-size:13px;font-weight:600;color:var(--wpsubs-text-muted);text-transform:uppercase;letter-spacing:0.07em;margin:0;"><?php esc_html_e( 'Trial Performance', 'subscription' ); ?></h2> |
| 286 |
</div> |
| 287 |
<div style="padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:16px;"> |
| 288 |
<div> |
| 289 |
<div style="font-size:1.125rem;font-weight:700;color:#111827;"><?php echo esc_html( number_format_i18n( $dummy_trials['total_trials'] ) ); ?></div> |
| 290 |
<div style="font-size:12px;color:var(--wpsubs-text-muted);margin-top:2px;"><?php esc_html_e( 'Total Trials', 'subscription' ); ?></div> |
| 291 |
</div> |
| 292 |
<div> |
| 293 |
<div style="font-size:1.125rem;font-weight:700;color:#111827;"><?php echo esc_html( number_format_i18n( $dummy_trials['converted_trials'] ) ); ?></div> |
| 294 |
<div style="font-size:12px;color:var(--wpsubs-text-muted);margin-top:2px;"><?php esc_html_e( 'Converted', 'subscription' ); ?></div> |
| 295 |
</div> |
| 296 |
<div> |
| 297 |
<div style="font-size:1.125rem;font-weight:700;color:#111827;"><?php echo esc_html( number_format_i18n( $dummy_trials['active_trials'] ) ); ?></div> |
| 298 |
<div style="font-size:12px;color:var(--wpsubs-text-muted);margin-top:2px;"><?php esc_html_e( 'Active Trials', 'subscription' ); ?></div> |
| 299 |
</div> |
| 300 |
<div> |
| 301 |
<div style="font-size:1.125rem;font-weight:700;color:#111827;"><?php echo wp_kses_post( subscrpt_preview_format_price( $dummy_trials['trial_revenue'] ) ); ?></div> |
| 302 |
<div style="font-size:12px;color:var(--wpsubs-text-muted);margin-top:2px;"><?php esc_html_e( 'Trial Revenue', 'subscription' ); ?></div> |
| 303 |
</div> |
| 304 |
</div> |
| 305 |
</div> |
| 306 |
|
| 307 |
<div class="wpsubs-table-card"> |
| 308 |
<div style="padding:16px 20px;border-bottom:1px solid var(--wpsubs-border);"> |
| 309 |
<h2 style="font-size:13px;font-weight:600;color:var(--wpsubs-text-muted);text-transform:uppercase;letter-spacing:0.07em;margin:0;"><?php esc_html_e( 'Subscription Breakdown', 'subscription' ); ?></h2> |
| 310 |
</div> |
| 311 |
<div style="padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:16px;"> |
| 312 |
<div> |
| 313 |
<div style="font-size:1.125rem;font-weight:700;color:#111827;"><?php echo esc_html( number_format_i18n( $dummy_metrics['active_subscriptions'] ) ); ?></div> |
| 314 |
<div style="font-size:12px;color:var(--wpsubs-text-muted);margin-top:2px;"><?php esc_html_e( 'Active', 'subscription' ); ?></div> |
| 315 |
</div> |
| 316 |
<div> |
| 317 |
<div style="font-size:1.125rem;font-weight:700;color:#111827;"><?php echo esc_html( number_format_i18n( $dummy_metrics['cancelled_subscriptions'] ) ); ?></div> |
| 318 |
<div style="font-size:12px;color:var(--wpsubs-text-muted);margin-top:2px;"><?php esc_html_e( 'Cancelled', 'subscription' ); ?></div> |
| 319 |
</div> |
| 320 |
<div> |
| 321 |
<div style="font-size:1.125rem;font-weight:700;color:#111827;"><?php echo esc_html( number_format_i18n( $dummy_metrics['trial_subscriptions'] ) ); ?></div> |
| 322 |
<div style="font-size:12px;color:var(--wpsubs-text-muted);margin-top:2px;"><?php esc_html_e( 'Trials', 'subscription' ); ?></div> |
| 323 |
</div> |
| 324 |
<div> |
| 325 |
<div style="font-size:1.125rem;font-weight:700;color:#111827;"><?php echo esc_html( number_format_i18n( $dummy_metrics['total_products'] ) ); ?></div> |
| 326 |
<div style="font-size:12px;color:var(--wpsubs-text-muted);margin-top:2px;"><?php esc_html_e( 'Products', 'subscription' ); ?></div> |
| 327 |
</div> |
| 328 |
</div> |
| 329 |
</div> |
| 330 |
|
| 331 |
</div> |
| 332 |
|
| 333 |
<!-- Top Products + Action Items --> |
| 334 |
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;"> |
| 335 |
|
| 336 |
<div class="wpsubs-table-card"> |
| 337 |
<div style="padding:16px 20px;border-bottom:1px solid var(--wpsubs-border);"> |
| 338 |
<h2 style="font-size:13px;font-weight:600;color:var(--wpsubs-text-muted);text-transform:uppercase;letter-spacing:0.07em;margin:0;"><?php esc_html_e( 'Top Performing Products', 'subscription' ); ?></h2> |
| 339 |
</div> |
| 340 |
<?php foreach ( array_slice( $dummy_popular, 0, 5 ) as $index => $sub_product ) : ?> |
| 341 |
<div style="display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-bottom:1px solid var(--wpsubs-border);"> |
| 342 |
<div style="display:flex;align-items:center;gap:12px;min-width:0;"> |
| 343 |
<span style="display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:<?php echo $index < 3 ? '#eef2ff' : 'var(--wpsubs-surface-muted)'; ?>;color:<?php echo $index < 3 ? '#6366f1' : 'var(--wpsubs-text-muted)'; ?>;font-size:11px;font-weight:700;flex-shrink:0;"> |
| 344 |
<?php echo esc_html( $index + 1 ); ?> |
| 345 |
</span> |
| 346 |
<div style="min-width:0;"> |
| 347 |
<div class="wpsubs-cell-title" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"><?php echo esc_html( $sub_product['product_name'] ); ?></div> |
| 348 |
<div class="wpsubs-cell-id"> |
| 349 |
<?php |
| 350 |
printf( |
| 351 |
/* translators: %s: number of subscriptions */ |
| 352 |
esc_html__( '%s subscriptions', 'subscription' ), |
| 353 |
esc_html( number_format_i18n( $sub_product['subscription_count'] ) ) |
| 354 |
); |
| 355 |
?> |
| 356 |
</div> |
| 357 |
</div> |
| 358 |
</div> |
| 359 |
<div style="text-align:right;flex-shrink:0;"> |
| 360 |
<div class="wpsubs-cell-title"><?php echo wp_kses_post( subscrpt_preview_format_price( $sub_product['total_revenue'] ) ); ?></div> |
| 361 |
<div class="wpsubs-cell-id"> |
| 362 |
<?php |
| 363 |
printf( |
| 364 |
/* translators: %s: average revenue */ |
| 365 |
esc_html__( '%s avg', 'subscription' ), |
| 366 |
wp_kses_post( subscrpt_preview_format_price( $sub_product['average_revenue'] ) ) |
| 367 |
); |
| 368 |
?> |
| 369 |
</div> |
| 370 |
</div> |
| 371 |
</div> |
| 372 |
<?php endforeach; ?> |
| 373 |
</div> |
| 374 |
|
| 375 |
<div class="wpsubs-table-card"> |
| 376 |
<div style="padding:16px 20px;border-bottom:1px solid var(--wpsubs-border);"> |
| 377 |
<h2 style="font-size:13px;font-weight:600;color:var(--wpsubs-text-muted);text-transform:uppercase;letter-spacing:0.07em;margin:0;"><?php esc_html_e( 'Action Items', 'subscription' ); ?></h2> |
| 378 |
</div> |
| 379 |
<div style="padding:16px 20px;display:flex;flex-direction:column;gap:12px;"> |
| 380 |
<div style="padding:14px;border-radius:8px;border:1px solid #86efac;background:#f0fdf4;"> |
| 381 |
<div style="font-size:13px;font-weight:600;color:#166534;margin-bottom:6px;"><?php esc_html_e( 'Best Performers', 'subscription' ); ?></div> |
| 382 |
<ul style="margin:0;padding-left:16px;font-size:12px;color:#15803d;line-height:1.8;"> |
| 383 |
<li><?php echo esc_html( $dummy_popular[0]['product_name'] ); ?> — <?php echo wp_kses_post( subscrpt_preview_format_price( $dummy_popular[0]['total_revenue'] ) ); ?></li> |
| 384 |
<li><?php echo esc_html( $dummy_popular[1]['product_name'] ); ?> — <?php echo wp_kses_post( subscrpt_preview_format_price( $dummy_popular[1]['total_revenue'] ) ); ?></li> |
| 385 |
</ul> |
| 386 |
</div> |
| 387 |
<div style="padding:14px;border-radius:8px;border:1px solid var(--wpsubs-border);background:var(--wpsubs-surface-muted);"> |
| 388 |
<div style="font-size:13px;font-weight:600;color:var(--wpsubs-text);margin-bottom:6px;"><?php esc_html_e( 'Recommended Next Steps', 'subscription' ); ?></div> |
| 389 |
<ul style="margin:0;padding-left:16px;font-size:12px;color:var(--wpsubs-text-muted);line-height:1.8;"> |
| 390 |
<li><?php esc_html_e( 'Analyse customer feedback', 'subscription' ); ?></li> |
| 391 |
<li><?php esc_html_e( 'Optimise pricing strategy', 'subscription' ); ?></li> |
| 392 |
<li><?php esc_html_e( 'Expand product offerings', 'subscription' ); ?></li> |
| 393 |
</ul> |
| 394 |
</div> |
| 395 |
</div> |
| 396 |
</div> |
| 397 |
|
| 398 |
</div> |
| 399 |
|
| 400 |
<!-- Detailed Analytics chart --> |
| 401 |
<div class="wpsubs-table-card"> |
| 402 |
<div style="padding:16px 20px;border-bottom:1px solid var(--wpsubs-border);"> |
| 403 |
<h2 style="font-size:13px;font-weight:600;color:var(--wpsubs-text-muted);text-transform:uppercase;letter-spacing:0.07em;margin:0;"><?php esc_html_e( 'Detailed Analytics', 'subscription' ); ?></h2> |
| 404 |
</div> |
| 405 |
<div style="padding:20px;"> |
| 406 |
<canvas id="subscrpt-preview-detailed-chart" style="width:100%;height:360px;"></canvas> |
| 407 |
</div> |
| 408 |
</div> |
| 409 |
|
| 410 |
</div> |
| 411 |
|
| 412 |
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| 413 |
<script> |
| 414 |
document.addEventListener('DOMContentLoaded', function() { |
| 415 |
var months = <?php echo wp_json_encode( array_column( $dummy_trends, 'label' ) ); ?>; |
| 416 |
var revenue = <?php echo wp_json_encode( array_column( $dummy_trends, 'revenue' ) ); ?>; |
| 417 |
var actives = <?php echo wp_json_encode( array_column( $dummy_trends, 'active' ) ); ?>; |
| 418 |
var totals = <?php echo wp_json_encode( array_column( $dummy_trends, 'total' ) ); ?>; |
| 419 |
var cancelled = <?php echo wp_json_encode( array_column( $dummy_trends, 'cancelled' ) ); ?>; |
| 420 |
var trials = <?php echo wp_json_encode( array_column( $dummy_trends, 'trials' ) ); ?>; |
| 421 |
var conversions = <?php echo wp_json_encode( array_column( $dummy_trends, 'conversions' ) ); ?>; |
| 422 |
|
| 423 |
var trendsCtx = document.getElementById('subscrpt-preview-trends-chart'); |
| 424 |
if (trendsCtx) { |
| 425 |
new Chart(trendsCtx.getContext('2d'), { |
| 426 |
type: 'bar', |
| 427 |
data: { |
| 428 |
labels: months, |
| 429 |
datasets: [ |
| 430 |
{ |
| 431 |
label: '<?php echo esc_js( __( 'Revenue', 'subscription' ) ); ?>', |
| 432 |
data: revenue, |
| 433 |
type: 'bar', |
| 434 |
backgroundColor: 'rgba(99,102,241,0.8)', |
| 435 |
borderColor: '#6366f1', |
| 436 |
borderWidth: 2, |
| 437 |
borderRadius: 6, |
| 438 |
borderSkipped: false, |
| 439 |
yAxisID: 'y1' |
| 440 |
}, |
| 441 |
{ |
| 442 |
label: '<?php echo esc_js( __( 'Active Subscriptions', 'subscription' ) ); ?>', |
| 443 |
data: actives, |
| 444 |
type: 'line', |
| 445 |
borderColor: '#22c55e', |
| 446 |
backgroundColor: 'rgba(34,197,94,0.1)', |
| 447 |
borderWidth: 3, |
| 448 |
fill: true, |
| 449 |
tension: 0.4, |
| 450 |
pointRadius: 6, |
| 451 |
pointHoverRadius: 9, |
| 452 |
pointBackgroundColor: '#22c55e', |
| 453 |
pointBorderColor: '#fff', |
| 454 |
pointBorderWidth: 2, |
| 455 |
yAxisID: 'y' |
| 456 |
} |
| 457 |
] |
| 458 |
}, |
| 459 |
options: { |
| 460 |
responsive: true, |
| 461 |
interaction: { mode: 'index', intersect: false }, |
| 462 |
plugins: { |
| 463 |
legend: { position: 'top', labels: { usePointStyle: true, padding: 20, font: { size: 12 } } }, |
| 464 |
title: { display: false } |
| 465 |
}, |
| 466 |
scales: { |
| 467 |
x: { grid: { color: 'rgba(0,0,0,0.04)' }, ticks: { font: { size: 11 }, color: '#94a3b8' } }, |
| 468 |
y: { type: 'linear', display: true, position: 'left', beginAtZero: true, grid: { color: 'rgba(0,0,0,0.04)' }, ticks: { font: { size: 11 }, color: '#94a3b8' } }, |
| 469 |
y1: { type: 'linear', display: true, position: 'right', beginAtZero: true, grid: { drawOnChartArea: false }, ticks: { font: { size: 11 }, color: '#94a3b8', callback: function(v) { return '$' + v.toLocaleString(); } } } |
| 470 |
} |
| 471 |
} |
| 472 |
}); |
| 473 |
} |
| 474 |
|
| 475 |
var detailedCtx = document.getElementById('subscrpt-preview-detailed-chart'); |
| 476 |
if (detailedCtx) { |
| 477 |
var palette = ['#6366f1','#22c55e','#ef4444','#f59e0b','#8b5cf6','#06b6d4']; |
| 478 |
var bubbleData = months.map(function(month, i) { |
| 479 |
return { x: i, y: totals[i], r: Math.max(5, (actives[i] / Math.max.apply(null, actives)) * 20), month: month, active: actives[i], cancelled: cancelled[i], trial: trials[i], conversion: conversions[i] }; |
| 480 |
}); |
| 481 |
new Chart(detailedCtx.getContext('2d'), { |
| 482 |
type: 'bubble', |
| 483 |
data: { |
| 484 |
datasets: [{ |
| 485 |
label: '<?php echo esc_js( __( 'Subscription Performance', 'subscription' ) ); ?>', |
| 486 |
data: bubbleData, |
| 487 |
backgroundColor: bubbleData.map(function(_, i) { return palette[i % palette.length]; }), |
| 488 |
borderColor: bubbleData.map(function(_, i) { return palette[i % palette.length]; }), |
| 489 |
borderWidth: 2 |
| 490 |
}] |
| 491 |
}, |
| 492 |
options: { |
| 493 |
responsive: true, |
| 494 |
plugins: { |
| 495 |
legend: { display: false }, |
| 496 |
tooltip: { |
| 497 |
backgroundColor: 'rgba(15,23,42,0.92)', titleColor: '#fff', bodyColor: '#cbd5e1', cornerRadius: 8, displayColors: false, padding: 12, |
| 498 |
callbacks: { |
| 499 |
title: function(ctx) { return ctx[0].raw.month; }, |
| 500 |
label: function(ctx) { var d = ctx.raw; return ['<?php echo esc_js( __( 'Total', 'subscription' ) ); ?>: ' + d.y, '<?php echo esc_js( __( 'Active', 'subscription' ) ); ?>: ' + d.active, '<?php echo esc_js( __( 'Cancelled', 'subscription' ) ); ?>: ' + d.cancelled]; } |
| 501 |
} |
| 502 |
} |
| 503 |
}, |
| 504 |
scales: { |
| 505 |
x: { type: 'linear', ticks: { stepSize: 1, callback: function(v) { return (v >= 0 && v < months.length) ? months[v] : ''; }, font: { size: 11 }, color: '#94a3b8' }, grid: { color: 'rgba(0,0,0,0.04)' } }, |
| 506 |
y: { ticks: { font: { size: 11 }, color: '#94a3b8' }, grid: { color: 'rgba(0,0,0,0.04)' } } |
| 507 |
} |
| 508 |
} |
| 509 |
}); |
| 510 |
} |
| 511 |
}); |
| 512 |
</script> |
| 513 |
|
