← All changes | includes/Admin/views/reports-preview.php +105 -15 1.11.2 → 2.2.0 View file →

		@@ -137,12 +137,45 @@
137	137	function subscrpt_preview_format_price( float $amount ): string {
138	138	return function_exists( 'wc_price' ) ? wc_price( $amount ) : esc_html( '$' . number_format( $amount, 2 ) );
139	139	}
140	140	}
	141	+
	142	+// Sample cancellation reasons, shaped exactly like Pro's real query result so
	143	+// the preview and the real report render from the same structure.
	144	+$dummy_cancellation_reasons = array(
	145	+ 'reasons' => array(
	146	+ array(
	147	+ 'reason' => __( 'Too expensive', 'subscription' ),
	148	+ 'count' => 14,
	149	+ 'percent' => 38.9,
	150	+ ),
	151	+ array(
	152	+ 'reason' => __( 'Missing features I need', 'subscription' ),
	153	+ 'count' => 9,
	154	+ 'percent' => 25.0,
	155	+ ),
	156	+ array(
	157	+ 'reason' => __( 'Found a better alternative', 'subscription' ),
	158	+ 'count' => 7,
	159	+ 'percent' => 19.4,
	160	+ ),
	161	+ array(
	162	+ 'reason' => __( 'No longer needed', 'subscription' ),
	163	+ 'count' => 4,
	164	+ 'percent' => 11.1,
	165	+ ),
	166	+ array(
	167	+ 'reason' => __( 'Technical issues', 'subscription' ),
	168	+ 'count' => 2,
	169	+ 'percent' => 5.6,
	170	+ ),
	171	+ ),
	172	+ 'total' => 36,
	173	+);
141	174	?>
142	175
143	176	<!-- Page content -->
144		-<div class="wp-subscription-admin-content list-page subscrpt-subs-list">
	177	+<div class="wp-subscription-admin-content list-page">
145	178
146	179	<!-- Disclaimer banner -->
147	180	<div style="max-width:1240px;margin:20px auto 0;padding:0;">
148	181	<div style="background:#fffbeb;border:1px solid #fcd34d;border-radius:8px;padding:12px 16px;display:flex;align-items:flex-start;gap:10px;">
		@@ -156,24 +189,32 @@
156	189	</div>
157	190	</div>
158	191
159	192	<!-- Page header -->
160		- <div style="max-width:1240px;margin:20px auto 0;padding:0 0 20px;">
161		- <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px;">
162		- <div>
163		- <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>
164		- <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>
165		- </div>
166		- <div style="display:flex;align-items:center;gap:8px;flex-shrink:0;padding-top:4px;">
167		- <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>
168		- <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>
169		- <?php esc_html_e( 'Refresh', 'subscription' ); ?>
170		- </button>
171		- </div>
	193	+ <div style="max-width:1240px;margin:20px auto 0;">
	194	+ <?php
	195	+ wpsubs_render_page_header(
	196	+ array(
	197	+ 'title' => __( 'Subscription Reports', 'subscription' ),
	198	+ 'description' => __( 'Data-driven insights for your subscription business.', 'subscription' ),
	199	+ 'actions' => '<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><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>' . esc_html__( 'Refresh', 'subscription' ) . '</button>',
	200	+ )
	201	+ );
	202	+ ?>
	203	+ </div>
	204	+
	205	+ <div class="wpsubs-tabs" data-tabs-query="report" style="max-width:1240px;margin:0 auto;">
	206	+ <div class="wpsubs-tabs__list" role="tablist">
	207	+ <button class="wpsubs-tabs__tab" role="tab" id="subscrpt-report-tab-overview" data-tab-key="overview" aria-controls="subscrpt-report-panel-overview" aria-selected="true">
	208	+ <?php esc_html_e( 'Overview', 'subscription' ); ?>
	209	+ </button>
	210	+ <button class="wpsubs-tabs__tab" role="tab" id="subscrpt-report-tab-cancellation" data-tab-key="cancellation" aria-controls="subscrpt-report-panel-cancellation" aria-selected="false">
	211	+ <?php esc_html_e( 'Cancellation', 'subscription' ); ?>
	212	+ </button>
172	213	</div>
173		- <div style="border-top:1px dashed #d0d3d7;"></div>
174		- </div>
175	214
	215	+ <div class="wpsubs-tab-panel" role="tabpanel" id="subscrpt-report-panel-overview" aria-labelledby="subscrpt-report-tab-overview">
	216	+
176	217	<!-- KPI stat cards -->
177	218	<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:16px;">
178	219
179	220	<div style="border:1px solid var(--wpsubs-border);border-radius:12px;padding:20px;background:var(--wpsubs-surface);">
		@@ -410,8 +451,57 @@
410	451	<div style="padding:20px;">
411	452	<canvas id="subscrpt-preview-detailed-chart" style="width:100%;height:360px;"></canvas>
412	453	</div>
413	454	</div>
	455	+
	456	+ </div><!-- /overview panel -->
	457	+
	458	+ <div class="wpsubs-tab-panel" role="tabpanel" id="subscrpt-report-panel-cancellation" aria-labelledby="subscrpt-report-tab-cancellation" hidden>
	459	+
	460	+ <div class="wpsubs-table-card">
	461	+ <div style="padding:16px 20px;border-bottom:1px solid var(--wpsubs-border);">
	462	+ <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( 'Cancellation Reasons', 'subscription' ); ?></h2>
	463	+ <p style="font-size:12px;color:var(--wpsubs-text-muted);margin:4px 0 0;"><?php esc_html_e( 'Why customers cancelled, based on submitted feedback.', 'subscription' ); ?></p>
	464	+ </div>
	465	+ <div style="padding:10px 20px 14px;">
	466	+ <?php
	467	+ foreach ( $dummy_cancellation_reasons['reasons'] as $subscrpt_reason_row ) :
	468	+ $subscrpt_reason_fill = max( 2, min( 100, (float) $subscrpt_reason_row['percent'] ) );
	469	+ ?>
	470	+ <div style="display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 14px;margin-bottom:6px;border-radius:8px;border:1px solid var(--wpsubs-border);background:linear-gradient(to left, var(--wpsubs-brand-light) 0, var(--wpsubs-brand-light) calc(<?php echo esc_attr( $subscrpt_reason_fill ); ?>% - 2px), var(--wpsubs-brand) calc(<?php echo esc_attr( $subscrpt_reason_fill ); ?>% - 2px), var(--wpsubs-brand) <?php echo esc_attr( $subscrpt_reason_fill ); ?>%, transparent <?php echo esc_attr( $subscrpt_reason_fill ); ?>%);">
	471	+ <span style="font-size:13px;font-weight:600;color:var(--wpsubs-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;"><?php echo esc_html( $subscrpt_reason_row['reason'] ); ?></span>
	472	+ <span style="flex-shrink:0;">
	473	+ <span style="font-size:14px;font-weight:700;color:var(--wpsubs-text);"><?php echo esc_html( $subscrpt_reason_row['percent'] ); ?>%</span>
	474	+ <span style="font-size:12px;color:var(--wpsubs-text-muted);margin-left:4px;">
	475	+ <?php
	476	+ printf(
	477	+ /* translators: %s: number of subscriptions. */
	478	+ esc_html__( '%s subs', 'subscription' ),
	479	+ esc_html( number_format_i18n( $subscrpt_reason_row['count'] ) )
	480	+ );
	481	+ ?>
	482	+ </span>
	483	+ </span>
	484	+ </div>
	485	+ <?php endforeach; ?>
	486	+ </div>
	487	+ <div style="padding:12px 20px;border-top:1px solid var(--wpsubs-border);font-size:12px;color:var(--wpsubs-text-muted);">
	488	+ <?php
	489	+ printf(
	490	+ /* translators: %s: total number of cancellations with feedback. */
	491	+ esc_html__( 'Total cancellations with feedback: %s', 'subscription' ),
	492	+ esc_html( number_format_i18n( $dummy_cancellation_reasons['total'] ) )
	493	+ );
	494	+ ?>
	495	+ </div>
	496	+ </div>
	497	+
	498	+ <p style="margin:14px 0 0;font-size:13px;color:var(--wpsubs-text-muted);text-align:center;">
	499	+ <?php esc_html_e( 'Sample data. Pro reports the reasons your own customers gave.', 'subscription' ); ?>
	500	+ </p>
	501	+
	502	+ </div><!-- /cancellation panel -->
	503	+ </div><!-- /tabs -->
414	504
415	505	</div>
416	506
417	507	<script>