kasy-cli 1.38.0 → 1.39.0

package/templates/firebase/lib/features/settings/ui/components/admin/admin_page.dart

@@ -8,6 +8,7 @@ import 'package:kasy_kit/components/kasy_app_bar.dart';
 import 'package:kasy_kit/components/kasy_bottom_sheet.dart';
 import 'package:kasy_kit/components/kasy_button.dart';
 import 'package:kasy_kit/components/kasy_sidebar.dart';
+import 'package:kasy_kit/components/kasy_skeleton.dart';
 import 'package:kasy_kit/components/kasy_status_tag.dart';
 import 'package:kasy_kit/components/kasy_text_field.dart';
 import 'package:kasy_kit/core/app_update/update_available_sheet.dart';
@@ -20,6 +21,7 @@ import 'package:kasy_kit/core/states/user_state_notifier.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/toast/toast_service.dart';
 import 'package:kasy_kit/core/web_device_preview/web_device_preview.dart';
+import 'package:kasy_kit/core/widgets/kasy_hover.dart';
 import 'package:kasy_kit/core/widgets/responsive_layout.dart';
 import 'package:kasy_kit/core/widgets/update_bottom_sheet.dart';
 import 'package:kasy_kit/features/feedbacks/api/entities/feature_request_entity.dart';
@@ -29,6 +31,7 @@ import 'package:kasy_kit/features/notifications/api/local_notifier.dart';
 import 'package:kasy_kit/features/notifications/providers/models/notification.dart'
     as kasy_kit;
 import 'package:kasy_kit/features/settings/ui/components/admin/admin_routes.dart';
+import 'package:kasy_kit/features/settings/ui/components/admin/admin_users_api.dart';
 import 'package:kasy_kit/features/settings/ui/components/admin/admin_users_tab.dart';
 import 'package:kasy_kit/features/settings/ui/components/admin/send_push_notification_page.dart';
 import 'package:kasy_kit/features/settings/ui/widgets/kasy_user_avatar.dart';
@@ -47,8 +50,9 @@ import 'package:package_info_plus/package_info_plus.dart';
 ///
 /// The first three are top-level rows under the "ADMIN" label; the rest live
 /// inside the sidebar's expandable "Ferramentas" submenu
-/// ([AdminSectionDef.inToolsGroup]). [components] and [debug] are developer-only
-/// (their branches register only in [kDebugMode]).
+/// ([AdminSectionDef.inToolsGroup]). All sections ship in production (admins
+/// reach them in release); only [debug]'s home-widgets-panel tile is hidden
+/// outside [kDebugMode].
 enum AdminSection {
   overview,
   users,
@@ -82,10 +86,10 @@ class AdminSectionDef {
 const String adminBasePath = '/admin';
 
 /// The admin sections, in sidebar/URL order. The four "Ferramentas" sub-screens
-/// are real sections too (own branch, own URL, persistent rail) — Send push and
-/// Paywalls ship in production; Components and Debug are developer-only and only
-/// appear in debug builds. The router (branches) and the sidebar (nav rows) both
-/// read this single list, so they can never drift.
+/// are real sections too (own branch, own URL, persistent rail) and all ship in
+/// production — only Debug's home-widgets-panel tile is hidden outside debug
+/// builds. The router (branches) and the sidebar (nav rows) both read this
+/// single list, so they can never drift.
 List<AdminSectionDef> adminSections() => [
   AdminSectionDef(
     id: AdminSection.overview,
@@ -120,22 +124,23 @@ List<AdminSectionDef> adminSections() => [
     build: () => const _PaywallsTab(),
     inToolsGroup: true,
   ),
-  if (kDebugMode) ...[
-    AdminSectionDef(
-      id: AdminSection.components,
-      path: adminRouteComponents,
-      icon: KasyIcons.widgets,
-      build: () => const _ComponentsTab(),
-      inToolsGroup: true,
-    ),
-    AdminSectionDef(
-      id: AdminSection.debug,
-      path: adminRouteDebug,
-      icon: KasyIcons.note,
-      build: () => const _DebugTab(),
-      inToolsGroup: true,
-    ),
-  ],
+  // Components and Debug ship in production too (admins reach them in release).
+  // Debug's body hides its one developer-only tile (the home-widgets panel,
+  // whose drill-down route registers only in kDebugMode).
+  AdminSectionDef(
+    id: AdminSection.components,
+    path: adminRouteComponents,
+    icon: KasyIcons.widgets,
+    build: () => const _ComponentsTab(),
+    inToolsGroup: true,
+  ),
+  AdminSectionDef(
+    id: AdminSection.debug,
+    path: adminRouteDebug,
+    icon: KasyIcons.note,
+    build: () => const _DebugTab(),
+    inToolsGroup: true,
+  ),
 ];
 
 /// Localized sidebar / app-bar label for a section.
@@ -337,10 +342,7 @@ class _AdminShellState extends ConsumerState<AdminShell> {
       backgroundColor: context.colors.background,
       // Square edge / flat / surface fill all come from the global DrawerThemeData
       // (core/theme/universal_theme.dart); here we only size it to the rail.
-      drawer: Drawer(
-        width: kasySidebarWidth,
-        child: buildRail(isDrawer: true),
-      ),
+      drawer: Drawer(width: kasySidebarWidth, child: buildRail(isDrawer: true)),
       body: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
@@ -367,8 +369,18 @@ class _AdminShellState extends ConsumerState<AdminShell> {
 /// the Requests tab and the Overview count. Invalidate to refresh after a change.
 final _adminRequestsProvider =
     FutureProvider.autoDispose<List<FeatureRequestEntity>>((ref) {
-  return ref.read(featureRequestApiProvider).getAll();
-});
+      return ref.read(featureRequestApiProvider).getAll();
+    });
+
+/// Bounded user set powering the Overview metrics + sign-up chart (admins only).
+/// Same source as the Users tab. [ref.keepAlive] caches the (slow) server fetch
+/// for the session, so the first open waits on the listUsers function but
+/// switching back to the Overview afterwards is instant.
+final _adminUsersOverviewProvider =
+    FutureProvider.autoDispose<AdminUsersResult>((ref) {
+      ref.keepAlive();
+      return ref.read(adminUsersApiProvider).fetch();
+    });
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Layout primitives
@@ -472,7 +484,8 @@ class _CardShell extends StatelessWidget {
   }
 }
 
-/// Soft-tinted rounded-square icon container.
+/// Soft-tinted rounded-square icon container with a subtle diagonal gradient
+/// and a hairline tint — reads a touch more polished than a flat fill.
 class _IconBubble extends StatelessWidget {
   final IconData icon;
   final Color tone;
@@ -481,27 +494,36 @@ class _IconBubble extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final double a = context.isDark ? 0.26 : 0.15;
     return Container(
       width: size,
       height: size,
       decoration: BoxDecoration(
-        color: tone.withValues(alpha: context.isDark ? 0.22 : 0.12),
+        gradient: LinearGradient(
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+          colors: [
+            tone.withValues(alpha: a + 0.06),
+            tone.withValues(alpha: (a - 0.06).clamp(0.0, 1.0)),
+          ],
+        ),
         borderRadius: BorderRadius.circular(size * 0.3),
+        border: Border.all(color: tone.withValues(alpha: 0.18)),
       ),
       child: Icon(icon, size: size * 0.5, color: tone),
     );
   }
 }
 
-/// Metric card: an icon bubble, a big value, and a muted label.
+/// Metric card: a discreet icon, a big value and a muted label on a neutral
+/// surface. Monochrome on purpose — the number is the focus, not the colour, so
+/// the four sit quietly side by side instead of turning into a carnival.
 class _StatCard extends StatelessWidget {
   final IconData icon;
-  final Color tone;
   final String value;
   final String label;
   const _StatCard({
     required this.icon,
-    required this.tone,
     required this.value,
     required this.label,
   });
@@ -513,7 +535,7 @@ class _StatCard extends StatelessWidget {
         crossAxisAlignment: CrossAxisAlignment.start,
         mainAxisSize: MainAxisSize.min,
         children: [
-          _IconBubble(icon: icon, tone: tone),
+          Icon(icon, size: 22, color: context.colors.muted),
           const SizedBox(height: KasySpacing.smd),
           Text(
             value,
@@ -543,10 +565,7 @@ class _StatCard extends StatelessWidget {
 class _ResponsiveGrid extends StatelessWidget {
   final List<Widget> children;
   final double minItemWidth;
-  const _ResponsiveGrid({
-    required this.children,
-    this.minItemWidth = 240,
-  });
+  const _ResponsiveGrid({required this.children, this.minItemWidth = 240});
 
   @override
   Widget build(BuildContext context) {
@@ -559,8 +578,9 @@ class _ResponsiveGrid extends StatelessWidget {
         int cols = ((maxW + gap) / (minItemWidth + gap)).floor();
         cols = cols.clamp(1, maxCols);
         if (cols > children.length) cols = children.length;
-        final double itemW =
-            cols <= 1 ? maxW : (maxW - gap * (cols - 1)) / cols;
+        final double itemW = cols <= 1
+            ? maxW
+            : (maxW - gap * (cols - 1)) / cols;
         return Wrap(
           spacing: gap,
           runSpacing: gap,
@@ -608,30 +628,13 @@ class _OverviewTab extends ConsumerWidget {
 
     return _TabScroll(
       children: [
-        _GroupLabel(ov.section),
-        _ResponsiveGrid(
-          minItemWidth: 200,
-          children: [
-            _StatCard(
-              icon: KasyIcons.monitor,
-              tone: context.colors.primary,
-              value: 'Firebase',
-              label: ov.backend,
-            ),
-            // Feature-request count reads the server — admins only.
-            if (isAdmin)
-              _StatCard(
-                icon: KasyIcons.voteUp,
-                tone: context.colors.primary,
-                value: ref.watch(_adminRequestsProvider).maybeWhen(
-                      data: (l) => '${l.length}',
-                      orElse: () => '…',
-                    ),
-                label: ov.requests_metric,
-              ),
-          ],
-        ),
-        const SizedBox(height: KasySpacing.lg),
+        // Admin-only data panel: live KPIs, the sign-up chart and the plan
+        // split. Non-admins (debug builds only) skip straight to the session
+        // card — the metrics need the server function, which gates by role.
+        if (isAdmin) ...[
+          const _OverviewMetricsPanel(),
+          const SizedBox(height: KasySpacing.lg),
+        ],
         _GroupLabel(ov.session_title),
         _CardShell(
           padding: const EdgeInsets.symmetric(
@@ -640,6 +643,8 @@ class _OverviewTab extends ConsumerWidget {
           ),
           child: Column(
             children: [
+              _InfoRow(label: ov.backend, value: 'Firebase'),
+              const SettingsDivider(),
               _InfoRow(
                 label: ov.account,
                 value: account,
@@ -652,7 +657,9 @@ class _OverviewTab extends ConsumerWidget {
                 trailing: _CopyButton(
                   onTap: () {
                     Clipboard.setData(ClipboardData(text: uid));
-                    ref.read(toastProvider).alert(
+                    ref
+                        .read(toastProvider)
+                        .alert(
                           title: t.common.copied,
                           text: t.settings.admin.user_id_copied,
                         );
@@ -706,18 +713,634 @@ class _OverviewTab extends ConsumerWidget {
             color: context.colors.muted,
           ),
         ),
+      ],
+    );
+  }
+}
+
+/// Live data panel for the Overview (admins): KPI cards, the 14-day sign-up
+/// chart and the free/subscriber split. Reads the same bounded user set as the
+/// Users tab; shows a skeleton while it loads and degrades to the requests KPI
+/// alone if the user function fails.
+class _OverviewMetricsPanel extends ConsumerWidget {
+  const _OverviewMetricsPanel();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final ov = t.admin_console.overview;
+    final AsyncValue<AdminUsersResult> usersAsync = ref.watch(
+      _adminUsersOverviewProvider,
+    );
+    final String requests = ref
+        .watch(_adminRequestsProvider)
+        .maybeWhen(data: (l) => '${l.length}', orElse: () => '…');
+
+    return usersAsync.when(
+      loading: () => const _OverviewSkeleton(),
+      error: (_, _) => Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          _GroupLabel(ov.summary),
+          _ResponsiveGrid(
+            minItemWidth: 168,
+            children: [
+              _StatCard(
+                icon: KasyIcons.voteUp,
+                value: requests,
+                label: ov.requests_metric,
+              ),
+            ],
+          ),
+        ],
+      ),
+      data: (result) {
+        final m = _OverviewMetrics.from(result);
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            _GroupLabel(ov.summary),
+            _ResponsiveGrid(
+              minItemWidth: 168,
+              children: [
+                _StatCard(
+                  icon: KasyIcons.users,
+                  value: _compactCount(m.total),
+                  label: ov.total_users,
+                ),
+                _StatCard(
+                  icon: KasyIcons.payment,
+                  value: _compactCount(m.subscribers),
+                  label: ov.subscribers,
+                ),
+                _StatCard(
+                  icon: KasyIcons.northEast,
+                  value: _compactCount(m.new7d),
+                  label: ov.new_7d,
+                ),
+                _StatCard(
+                  icon: KasyIcons.voteUp,
+                  value: requests,
+                  label: ov.requests_metric,
+                ),
+              ],
+            ),
+            const SizedBox(height: KasySpacing.lg),
+            _GroupLabel(ov.signups_title),
+            _SignupsCard(metrics: m),
+            const SizedBox(height: KasySpacing.lg),
+            _GroupLabel(ov.plan_split_title),
+            _PlanSplitCard(metrics: m),
+            if (result.truncated) ...[
+              const SizedBox(height: KasySpacing.sm),
+              Text(
+                ov.loaded_note(count: m.loaded),
+                style: context.textTheme.bodySmall?.copyWith(
+                  color: context.colors.muted,
+                ),
+              ),
+            ],
+          ],
+        );
+      },
+    );
+  }
+}
+
+/// Abbreviates large counts (1240 → 1.2k) so KPI values never overflow.
+String _compactCount(int n) {
+  if (n < 1000) return '$n';
+  if (n < 1000000) {
+    final double v = n / 1000;
+    return '${v.toStringAsFixed(v >= 100 ? 0 : 1).replaceAll('.0', '')}k';
+  }
+  final double v = n / 1000000;
+  return '${v.toStringAsFixed(1).replaceAll('.0', '')}M';
+}
+
+/// Derives the Overview's numbers from the loaded user set. Counts that can't be
+/// known beyond the loaded window (subscribers, new sign-ups) are computed over
+/// what we have; [AdminUsersResult.truncated] surfaces that to the user.
+class _OverviewMetrics {
+  final int total; // true total (server count)
+  final int loaded; // size of the loaded set
+  final int subscribers; // within the loaded set
+  final int new7d; // within the loaded set
+  final List<int> daily; // 14 buckets, oldest → newest (today last)
+  final DateTime firstDay;
+  final DateTime lastDay;
+
+  const _OverviewMetrics({
+    required this.total,
+    required this.loaded,
+    required this.subscribers,
+    required this.new7d,
+    required this.daily,
+    required this.firstDay,
+    required this.lastDay,
+  });
+
+  int get free => (loaded - subscribers).clamp(0, loaded);
+  int get signups14 => daily.fold(0, (a, b) => a + b);
+  int get conversionPercent =>
+      loaded == 0 ? 0 : (subscribers / loaded * 100).round();
+
+  factory _OverviewMetrics.from(AdminUsersResult result) {
+    final users = result.users;
+    final now = DateTime.now();
+    final today = DateTime(now.year, now.month, now.day);
+    final start = today.subtract(const Duration(days: 13));
+    final sevenAgo = today.subtract(const Duration(days: 6));
+    final daily = List<int>.filled(14, 0);
+    int subscribers = 0;
+    int new7d = 0;
+    for (final u in users) {
+      if (u.subscriber) subscribers++;
+      final created = u.createdAt;
+      if (created == null) continue;
+      final d = DateTime(created.year, created.month, created.day);
+      final idx = d.difference(start).inDays;
+      if (idx >= 0 && idx < 14) daily[idx]++;
+      if (!d.isBefore(sevenAgo)) new7d++;
+    }
+    return _OverviewMetrics(
+      total: result.totalUsers,
+      loaded: users.length,
+      subscribers: subscribers,
+      new7d: new7d,
+      daily: daily,
+      firstDay: start,
+      lastDay: today,
+    );
+  }
+}
+
+/// Sign-up chart card: a heading with the 14-day total and the bar chart.
+class _SignupsCard extends StatelessWidget {
+  final _OverviewMetrics metrics;
+  const _SignupsCard({required this.metrics});
+
+  @override
+  Widget build(BuildContext context) {
+    final ov = t.admin_console.overview;
+    final bool empty = metrics.signups14 == 0;
+    return _CardShell(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      ov.signups_subtitle,
+                      style: context.textTheme.bodySmall?.copyWith(
+                        color: context.colors.muted,
+                      ),
+                    ),
+                    const SizedBox(height: 2),
+                    Text(
+                      ov.signups_total(count: metrics.signups14),
+                      style: context.textTheme.titleMedium?.copyWith(
+                        color: context.colors.onSurface,
+                        fontWeight: FontWeight.w800,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: KasySpacing.md),
+          if (empty)
+            Padding(
+              padding: const EdgeInsets.symmetric(vertical: KasySpacing.lg),
+              child: Center(
+                child: Text(
+                  ov.signups_empty,
+                  style: context.textTheme.bodySmall?.copyWith(
+                    color: context.colors.muted,
+                  ),
+                ),
+              ),
+            )
+          else
+            _SignupsChart(metrics: metrics),
+        ],
+      ),
+    );
+  }
+}
+
+/// Interactive bar chart (no dependency): one bar per day. Hover (web) or
+/// tap/scrub (touch) over a bar to highlight it and read that day's date and
+/// count in a floating label — the professional dashboard behaviour.
+class _SignupsChart extends StatefulWidget {
+  final _OverviewMetrics metrics;
+  const _SignupsChart({required this.metrics});
+
+  @override
+  State<_SignupsChart> createState() => _SignupsChartState();
+}
+
+class _SignupsChartState extends State<_SignupsChart> {
+  static const double _height = 124;
+  int? _active;
+
+  String _dm(DateTime d) =>
+      '${d.day.toString().padLeft(2, '0')}/${d.month.toString().padLeft(2, '0')}';
+
+  @override
+  Widget build(BuildContext context) {
+    final daily = widget.metrics.daily;
+    final int count = daily.length;
+    final int maxV = daily.fold(0, (a, b) => b > a ? b : a);
+    final double safeMax = maxV <= 0 ? 1 : maxV.toDouble();
+    final Color tone = context.colors.primary;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        SizedBox(
+          height: _height,
+          child: LayoutBuilder(
+            builder: (context, c) {
+              final double w = c.maxWidth;
+              void hit(double dx) {
+                final int i = (dx / w * count).floor().clamp(0, count - 1);
+                if (i != _active) setState(() => _active = i);
+              }
+
+              final int? active = _active;
+              final double activeFactor = active == null
+                  ? 0
+                  : (daily[active] / safeMax).clamp(0.0, 1.0);
+
+              return TapRegion(
+                onTapOutside: (_) {
+                  if (_active != null) setState(() => _active = null);
+                },
+                child: MouseRegion(
+                  onHover: (e) => hit(e.localPosition.dx),
+                  onExit: (_) => setState(() => _active = null),
+                  child: GestureDetector(
+                    behavior: HitTestBehavior.opaque,
+                    onTapDown: (d) => hit(d.localPosition.dx),
+                    onHorizontalDragStart: (d) => hit(d.localPosition.dx),
+                    onHorizontalDragUpdate: (d) => hit(d.localPosition.dx),
+                    child: Stack(
+                      clipBehavior: Clip.none,
+                      children: [
+                        // Baseline behind the bars grounds the timeline.
+                        Positioned(
+                          left: 0,
+                          right: 0,
+                          bottom: 0,
+                          child: Container(
+                            height: 1,
+                            color: context.colors.outline.withValues(
+                              alpha: 0.35,
+                            ),
+                          ),
+                        ),
+                        Row(
+                          crossAxisAlignment: CrossAxisAlignment.stretch,
+                          children: [
+                            for (int i = 0; i < count; i++)
+                              Expanded(
+                                child: Padding(
+                                  padding: const EdgeInsets.symmetric(
+                                    horizontal: 3,
+                                  ),
+                                  child: _Bar(
+                                    factor: daily[i] / safeMax,
+                                    tone: tone,
+                                    active: active == i,
+                                    dimmed: active != null && active != i,
+                                  ),
+                                ),
+                              ),
+                          ],
+                        ),
+                        if (active != null)
+                          _tooltip(
+                            context,
+                            active,
+                            daily[active],
+                            activeFactor,
+                            w,
+                            count,
+                          ),
+                      ],
+                    ),
+                  ),
+                ),
+              );
+            },
+          ),
+        ),
         const SizedBox(height: KasySpacing.xs),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text(_dm(widget.metrics.firstDay), style: _axis(context)),
+            Text(_dm(widget.metrics.lastDay), style: _axis(context)),
+          ],
+        ),
+      ],
+    );
+  }
+
+  Widget _tooltip(
+    BuildContext context,
+    int index,
+    int value,
+    double factor,
+    double w,
+    int count,
+  ) {
+    const double tipW = 78;
+    final double cell = w / count;
+    final double centerX = cell * (index + 0.5);
+    final double left = (centerX - tipW / 2).clamp(0.0, w - tipW);
+    final double bottom = (factor * _height + 10).clamp(0.0, _height - 44);
+    final DateTime date = widget.metrics.firstDay.add(Duration(days: index));
+    return Positioned(
+      left: left,
+      bottom: bottom,
+      child: IgnorePointer(
+        child: Container(
+          width: tipW,
+          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
+          decoration: BoxDecoration(
+            color: context.colors.onSurface,
+            borderRadius: BorderRadius.circular(KasyRadius.sm),
+            boxShadow: [
+              BoxShadow(
+                color: Colors.black.withValues(alpha: 0.18),
+                blurRadius: 10,
+                offset: const Offset(0, 4),
+              ),
+            ],
+          ),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Text(
+                '$value',
+                style: context.textTheme.titleSmall?.copyWith(
+                  color: context.colors.surface,
+                  fontWeight: FontWeight.w800,
+                  height: 1,
+                ),
+              ),
+              const SizedBox(height: 2),
+              Text(
+                _dm(date),
+                style: context.textTheme.labelSmall?.copyWith(
+                  color: context.colors.surface.withValues(alpha: 0.7),
+                  height: 1,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  TextStyle? _axis(BuildContext context) =>
+      context.textTheme.labelSmall?.copyWith(color: context.colors.muted);
+}
+
+class _Bar extends StatelessWidget {
+  final double factor; // 0..1 of the tallest bar
+  final Color tone;
+  final bool active;
+  final bool dimmed;
+  const _Bar({
+    required this.factor,
+    required this.tone,
+    required this.active,
+    required this.dimmed,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final double f = factor.clamp(0.0, 1.0);
+    final double a = active ? 1.0 : (dimmed ? 0.32 : 0.82);
+    return Align(
+      alignment: Alignment.bottomCenter,
+      child: FractionallySizedBox(
+        heightFactor: f <= 0 ? null : f,
+        widthFactor: 1,
+        child: AnimatedContainer(
+          duration: const Duration(milliseconds: 120),
+          curve: Curves.easeOut,
+          // Zero days keep a faint nub so the axis still reads as a timeline.
+          height: f <= 0 ? 3 : null,
+          decoration: BoxDecoration(
+            gradient: f <= 0
+                ? null
+                : LinearGradient(
+                    begin: Alignment.topCenter,
+                    end: Alignment.bottomCenter,
+                    colors: [
+                      tone.withValues(alpha: a),
+                      tone.withValues(alpha: a * 0.6),
+                    ],
+                  ),
+            color: f <= 0
+                ? context.colors.outline.withValues(alpha: 0.5)
+                : null,
+            borderRadius: const BorderRadius.vertical(top: Radius.circular(5)),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// Free vs subscriber split: a conversion headline, a proportion bar and a
+/// legend with the exact counts.
+class _PlanSplitCard extends StatelessWidget {
+  final _OverviewMetrics metrics;
+  const _PlanSplitCard({required this.metrics});
+
+  @override
+  Widget build(BuildContext context) {
+    final ov = t.admin_console.overview;
+    final int subs = metrics.subscribers;
+    final int free = metrics.free;
+    final Color subColor = context.colors.success;
+    final Color track = context.colors.surfaceNeutralSoft;
+
+    return _CardShell(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            ov.conversion(percent: '${metrics.conversionPercent}%'),
+            style: context.textTheme.titleMedium?.copyWith(
+              color: context.colors.onSurface,
+              fontWeight: FontWeight.w800,
+            ),
+          ),
+          const SizedBox(height: KasySpacing.smd),
+          ClipRRect(
+            borderRadius: BorderRadius.circular(KasyRadius.sm),
+            child: SizedBox(
+              height: 12,
+              child: Row(
+                children: [
+                  if (subs > 0)
+                    Expanded(
+                      flex: subs,
+                      child: ColoredBox(color: subColor),
+                    ),
+                  if (free > 0)
+                    Expanded(
+                      flex: free,
+                      child: ColoredBox(color: track),
+                    ),
+                  if (subs == 0 && free == 0)
+                    Expanded(child: ColoredBox(color: track)),
+                ],
+              ),
+            ),
+          ),
+          const SizedBox(height: KasySpacing.smd),
+          Row(
+            children: [
+              _LegendDot(color: subColor, label: ov.subscriber, value: subs),
+              const SizedBox(width: KasySpacing.lg),
+              _LegendDot(
+                color: track,
+                borderColor: context.colors.outline,
+                label: ov.free,
+                value: free,
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _LegendDot extends StatelessWidget {
+  final Color color;
+  final Color? borderColor;
+  final String label;
+  final int value;
+  const _LegendDot({
+    required this.color,
+    required this.label,
+    required this.value,
+    this.borderColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Container(
+          width: 10,
+          height: 10,
+          decoration: BoxDecoration(
+            color: color,
+            shape: BoxShape.circle,
+            border: borderColor != null
+                ? Border.all(color: borderColor!)
+                : null,
+          ),
+        ),
+        const SizedBox(width: 6),
         Text(
-          ov.debug_note,
+          label,
           style: context.textTheme.bodySmall?.copyWith(
             color: context.colors.muted,
           ),
         ),
+        const SizedBox(width: 4),
+        Text(
+          '$value',
+          style: context.textTheme.bodySmall?.copyWith(
+            color: context.colors.onSurface,
+            fontWeight: FontWeight.w700,
+          ),
+        ),
       ],
     );
   }
 }
 
+/// Loading placeholder for the metrics panel — skeleton KPI cards plus a chart
+/// block, matching the real layout so nothing jumps when data arrives.
+class _OverviewSkeleton extends StatelessWidget {
+  const _OverviewSkeleton();
+
+  @override
+  Widget build(BuildContext context) {
+    final ov = t.admin_console.overview;
+    return KasySkeletonGroup(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          _GroupLabel(ov.summary),
+          const _ResponsiveGrid(
+            minItemWidth: 168,
+            children: [
+              _StatCardSkeleton(),
+              _StatCardSkeleton(),
+              _StatCardSkeleton(),
+              _StatCardSkeleton(),
+            ],
+          ),
+          const SizedBox(height: KasySpacing.lg),
+          _GroupLabel(ov.signups_title),
+          const _CardShell(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                KasySkeleton(width: 120, height: 12),
+                SizedBox(height: 8),
+                KasySkeleton(width: 70, height: 18),
+                SizedBox(height: KasySpacing.md),
+                KasySkeleton(width: double.infinity, height: 116),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _StatCardSkeleton extends StatelessWidget {
+  const _StatCardSkeleton();
+
+  @override
+  Widget build(BuildContext context) {
+    return const _CardShell(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          KasySkeleton.circle(size: 40),
+          SizedBox(height: KasySpacing.smd),
+          KasySkeleton(width: 56, height: 18),
+          SizedBox(height: 6),
+          KasySkeleton(width: 84, height: 11),
+        ],
+      ),
+    );
+  }
+}
+
 class _InfoRow extends StatelessWidget {
   final String label;
   final String value;
@@ -800,16 +1423,13 @@ class _CopyButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return InkWell(
+    return KasyHover(
       onTap: onTap,
+      focusable: true,
       borderRadius: BorderRadius.circular(KasyRadius.sm),
       child: Padding(
         padding: const EdgeInsets.all(6),
-        child: Icon(
-          KasyIcons.copy,
-          size: 16,
-          color: context.colors.primary,
-        ),
+        child: Icon(KasyIcons.copy, size: 16, color: context.colors.primary),
       ),
     );
   }
@@ -901,8 +1521,9 @@ class _RequestsTab extends ConsumerWidget {
         message: t.admin_console.requires_admin,
       );
     }
-    final AsyncValue<List<FeatureRequestEntity>> async =
-        ref.watch(_adminRequestsProvider);
+    final AsyncValue<List<FeatureRequestEntity>> async = ref.watch(
+      _adminRequestsProvider,
+    );
     return async.when(
       loading: () => const Center(child: CircularProgressIndicator.adaptive()),
       error: (_, _) => _EmptyState(
@@ -918,9 +1539,12 @@ class _RequestsTab extends ConsumerWidget {
             message: r.empty,
           );
         }
+        // Newest first — the most recently submitted request leads the list.
+        final sorted = [...list]
+          ..sort((a, b) => b.creationDate.compareTo(a.creationDate));
         return _TabScroll(
           children: [
-            for (final req in list) ...[
+            for (final req in sorted) ...[
               _RequestCard(req),
               const SizedBox(height: KasySpacing.md),
             ],
@@ -1010,7 +1634,9 @@ class _RequestCard extends ConsumerWidget {
                         .setActive(req.id!, v);
                     ref.invalidate(_adminRequestsProvider);
                     if (context.mounted) {
-                      ref.read(toastProvider).alert(title: t.common.saved, text: r.saved);
+                      ref
+                          .read(toastProvider)
+                          .alert(title: t.common.saved, text: r.saved);
                     }
                   },
                 ),
@@ -1018,7 +1644,9 @@ class _RequestCard extends ConsumerWidget {
               const Spacer(),
               KasyButton(
                 label: r.edit,
-                variant: KasyButtonVariant.soft,
+                variant: KasyButtonVariant.outline,
+                size: KasyButtonSize.small,
+                icon: KasyIcons.language,
                 onPressed: () => _openRequestEditor(context, req),
               ),
             ],
@@ -1066,7 +1694,10 @@ class _VotesChip extends StatelessWidget {
   }
 }
 
-Future<void> _openRequestEditor(BuildContext context, FeatureRequestEntity req) {
+Future<void> _openRequestEditor(
+  BuildContext context,
+  FeatureRequestEntity req,
+) {
   return showKasyBlurBottomSheet<void>(
     context: context,
     builder: (_) => _RequestEditorSheet(req: req),
@@ -1125,7 +1756,9 @@ class _RequestEditorSheetState extends ConsumerState<_RequestEditorSheet> {
     final r = t.admin_console.requests;
     setState(() => _saving = true);
     try {
-      await ref.read(featureRequestApiProvider).updateTexts(
+      await ref
+          .read(featureRequestApiProvider)
+          .updateTexts(
             id: widget.req.id!,
             title: {for (final l in _langs) l: _title[l]!.text.trim()},
             description: {for (final l in _langs) l: _desc[l]!.text.trim()},
@@ -1199,6 +1832,13 @@ class _RequestEditorSheetState extends ConsumerState<_RequestEditorSheet> {
 /// list pattern of the Settings screen (no busy card grid). Shared by the Tools
 /// sections.
 Widget _groupCard(List<Widget> rows) => _CardShell(
+  // Tiles carry their own vertical padding, so the card frame stays tight
+  // (vertical xs, not md) — a single-row card then reads as one clean line
+  // instead of an oversized box. Matches the Overview's session card.
+  padding: const EdgeInsets.symmetric(
+    horizontal: KasySpacing.md,
+    vertical: KasySpacing.xs,
+  ),
   child: Column(
     mainAxisSize: MainAxisSize.min,
     children: [
@@ -1210,30 +1850,162 @@ Widget _groupCard(List<Widget> rows) => _CardShell(
   ),
 );
 
-/// Paywalls panel — lists every paywall variant. Production section; the live
-/// preview route is debug-only, so a row previews only in debug builds.
+/// Paywalls panel — every variant as a rich card: a friendly name, a short
+/// description and its code (the id you hand the assistant to pick one), with a
+/// copy button. Tapping a card opens the live preview. Production section; the
+/// preview route is debug-only, so it only opens a screen in debug builds.
 class _PaywallsTab extends StatelessWidget {
   const _PaywallsTab();
 
+  // Ordered simplest → richest so the gallery reads as a deliberate sequence.
+  static const List<String> _order = [
+    'minimal',
+    'basic',
+    'basicRow',
+    'withSwitch',
+  ];
+
   @override
   Widget build(BuildContext context) {
     final admin = t.settings.admin;
+    final pw = t.admin_console.paywalls;
     return _TabScroll(
       children: [
         _GroupLabel(admin.paywalls),
-        _groupCard([
-          for (final paywall in PaywallFactory.values)
-            SettingsTile(
-              icon: KasyIcons.payment,
-              title: paywall.name,
-              onTap: () => context.push(adminRoutePremiumPreview(paywall.name)),
+        Padding(
+          padding: const EdgeInsets.only(
+            left: KasySpacing.xs,
+            bottom: KasySpacing.md,
+          ),
+          child: Text(
+            pw.subtitle,
+            style: context.textTheme.bodySmall?.copyWith(
+              color: context.colors.muted,
+              height: 1.35,
             ),
-        ]),
+          ),
+        ),
+        for (final id in _order) ...[
+          _PaywallCard(
+            paywall: PaywallFactory.values.firstWhere((p) => p.name == id),
+          ),
+          const SizedBox(height: KasySpacing.md),
+        ],
       ],
     );
   }
 }
 
+/// Localized friendly title + description for a paywall id.
+({String title, String desc}) _paywallMeta(String id) {
+  final pw = t.admin_console.paywalls;
+  return switch (id) {
+    'withSwitch' => (title: pw.with_switch_title, desc: pw.with_switch_desc),
+    'basic' => (title: pw.basic_title, desc: pw.basic_desc),
+    'basicRow' => (title: pw.basic_row_title, desc: pw.basic_row_desc),
+    _ => (title: pw.minimal_title, desc: pw.minimal_desc),
+  };
+}
+
+class _PaywallCard extends ConsumerWidget {
+  final PaywallFactory paywall;
+  const _PaywallCard({required this.paywall});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final pw = t.admin_console.paywalls;
+    final meta = _paywallMeta(paywall.name);
+    return KasyHover(
+      onTap: () => context.push(adminRoutePremiumPreview(paywall.name)),
+      borderRadius: BorderRadius.circular(_cardRadius),
+      semanticLabel: meta.title,
+      child: _CardShell(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                Expanded(
+                  child: Text(
+                    meta.title,
+                    style: context.textTheme.titleSmall?.copyWith(
+                      color: context.colors.onSurface,
+                      fontWeight: FontWeight.w700,
+                    ),
+                  ),
+                ),
+                const SizedBox(width: KasySpacing.sm),
+                Icon(
+                  KasyIcons.chevronRight,
+                  size: 18,
+                  color: context.colors.muted,
+                ),
+              ],
+            ),
+            const SizedBox(height: 3),
+            Text(
+              meta.desc,
+              style: context.textTheme.bodySmall?.copyWith(
+                color: context.colors.muted,
+                height: 1.35,
+              ),
+            ),
+            const SizedBox(height: KasySpacing.smd),
+            _CodeChip(
+              code: paywall.name,
+              onCopy: () {
+                Clipboard.setData(ClipboardData(text: paywall.name));
+                ref
+                    .read(toastProvider)
+                    .alert(title: t.common.copied, text: pw.code_copied);
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// Monospace code pill (the paywall id) with a copy icon — tap to copy and hand
+/// it to the assistant. Its own tap target, so it never triggers the card.
+class _CodeChip extends StatelessWidget {
+  final String code;
+  final VoidCallback onCopy;
+  const _CodeChip({required this.code, required this.onCopy});
+
+  @override
+  Widget build(BuildContext context) {
+    return KasyHover(
+      onTap: onCopy,
+      borderRadius: BorderRadius.circular(KasyRadius.sm),
+      semanticLabel: t.admin_console.paywalls.copy_code,
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 5),
+        decoration: BoxDecoration(
+          color: context.colors.surfaceNeutralSoft,
+          borderRadius: BorderRadius.circular(KasyRadius.sm),
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text(
+              code,
+              style: context.textTheme.labelSmall?.copyWith(
+                color: context.colors.muted,
+                fontFamily: 'monospace',
+                fontWeight: FontWeight.w500,
+              ),
+            ),
+            const SizedBox(width: 6),
+            Icon(KasyIcons.copy, size: 13, color: context.colors.primary),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
 /// The UI-kit catalog as a console section (debug only). Width-capped + centered
 /// to the same [_contentMaxWidth] as every other section (Paywalls, Overview…),
 /// so the console reads as one consistent column instead of the catalog
@@ -1269,14 +2041,11 @@ class _DebugTab extends ConsumerWidget {
             title: admin.copy_user_id,
             onTap: () {
               Clipboard.setData(
-                ClipboardData(
-                  text: userState.user.idOrNull ?? 'no-id (guest)',
-                ),
+                ClipboardData(text: userState.user.idOrNull ?? 'no-id (guest)'),
               );
-              ref.read(toastProvider).alert(
-                    title: t.common.copied,
-                    text: admin.user_id_copied,
-                  );
+              ref
+                  .read(toastProvider)
+                  .alert(title: t.common.copied, text: admin.user_id_copied);
             },
           ),
           SettingsTile(
@@ -1284,7 +2053,9 @@ class _DebugTab extends ConsumerWidget {
             title: admin.copy_fcm_token,
             onTap: () async {
               if (kIsWeb) {
-                ref.read(toastProvider).alert(
+                ref
+                    .read(toastProvider)
+                    .alert(
                       title: t.common.native_only_title,
                       text: admin.native_only,
                     );
@@ -1292,25 +2063,28 @@ class _DebugTab extends ConsumerWidget {
               }
               final token = await FirebaseMessaging.instance.getToken();
               if (token == null) {
-                ref.read(toastProvider).alert(
+                ref
+                    .read(toastProvider)
+                    .alert(
                       title: t.common.unavailable,
                       text: admin.fcm_token_unavailable,
                     );
                 return;
               }
               await Clipboard.setData(ClipboardData(text: token));
-              ref.read(toastProvider).alert(
-                    title: t.common.copied,
-                    text: admin.fcm_token_copied,
-                  );
+              ref
+                  .read(toastProvider)
+                  .alert(title: t.common.copied, text: admin.fcm_token_copied);
             },
           ),
           SettingsTile(
-            icon: KasyIcons.notificationActive,
+            icon: KasyIcons.notification,
             title: admin.ask_notification,
             onTap: () {
               if (kIsWeb) {
-                ref.read(toastProvider).alert(
+                ref
+                    .read(toastProvider)
+                    .alert(
                       title: t.common.native_only_title,
                       text: admin.native_only,
                     );
@@ -1349,7 +2123,11 @@ class _DebugTab extends ConsumerWidget {
           SettingsTile(
             icon: KasyIcons.check,
             title: admin.test_onboarding,
-            onTap: () => ref.read(goRouterProvider).go('/onboarding'),
+            // Preview mode: walks the onboarding screens with every real side
+            // effect suppressed (no guest account, no profile writes, no
+            // permission prompts) and returns here when done.
+            onTap: () =>
+                ref.read(goRouterProvider).go('/onboarding?preview=true'),
           ),
           SettingsTile(
             icon: KasyIcons.star,
@@ -1358,12 +2136,16 @@ class _DebugTab extends ConsumerWidget {
             // the store action no-ops there.
             onTap: () => showReviewDialog(context, ref, force: true),
           ),
-          SettingsTile(
-            icon: KasyIcons.message,
-            title: admin.home_widgets_panel,
-            // Pushed full-screen (its own back button), a drill-down from here.
-            onTap: () => context.push(adminRouteHomeWidgets),
-          ),
+          // Developer-only: its drill-down route (adminRouteHomeWidgets) is
+          // registered only in kDebugMode, so hide the tile in release rather
+          // than push a route that doesn't exist there.
+          if (kDebugMode)
+            SettingsTile(
+              icon: KasyIcons.message,
+              title: admin.home_widgets_panel,
+              // Pushed full-screen (its own back button), a drill-down from here.
+              onTap: () => context.push(adminRouteHomeWidgets),
+            ),
         ]),
 
         const SizedBox(height: KasySpacing.lg),
@@ -1378,7 +2160,9 @@ class _DebugTab extends ConsumerWidget {
               // Local notifications don't fire on web — tell the user instead
               // of doing nothing when tapped.
               if (kIsWeb) {
-                ref.read(toastProvider).alert(
+                ref
+                    .read(toastProvider)
+                    .alert(
                       title: t.common.native_only_title,
                       text: admin.native_only,
                     );