kasy-cli 1.37.1 → 1.39.0

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

@@ -7,11 +7,13 @@ import 'package:go_router/go_router.dart';
 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_tabs.dart';
 import 'package:kasy_kit/components/kasy_text_field.dart';
 import 'package:kasy_kit/core/app_update/update_available_sheet.dart';
-import 'package:kasy_kit/core/config/features.dart';
+import 'package:kasy_kit/core/bottom_menu/sidebar_focus.dart';
+import 'package:kasy_kit/core/bottom_menu/web_content_wrapper.dart';
 import 'package:kasy_kit/core/data/models/user.dart';
 import 'package:kasy_kit/core/dev_inspector/dev_inspector.dart';
 import 'package:kasy_kit/core/rating/widgets/review_popup.dart';
@@ -19,46 +21,175 @@ 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';
 import 'package:kasy_kit/features/feedbacks/api/feature_request_api.dart';
+import 'package:kasy_kit/features/home/home_components_page.dart';
 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';
 import 'package:kasy_kit/features/settings/ui/widgets/settings_tile.dart';
+import 'package:kasy_kit/features/subscriptions/ui/component/premium_page_factory.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
 import 'package:kasy_kit/router.dart';
 import 'package:package_info_plus/package_info_plus.dart';
-import 'package:shared_preferences/shared_preferences.dart';
 
-/// Full-screen developer admin console (debug only).
+// ─────────────────────────────────────────────────────────────────────────────
+// Admin sections — single source of truth shared by the router (URL branches)
+// and the sidebar (nav items), so the two can never drift out of sync.
+// ─────────────────────────────────────────────────────────────────────────────
+
+/// A navigable admin section. Each maps to a real URL branch in the router.
+///
+/// The first three are top-level rows under the "ADMIN" label; the rest live
+/// inside the sidebar's expandable "Ferramentas" submenu
+/// ([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,
+  requests,
+  sendPush,
+  paywalls,
+  components,
+  debug,
+}
+
+/// Descriptor for one admin section: its real URL [path], sidebar [icon] and the
+/// [build]er for its (body-only) view. [inToolsGroup] places the row inside the
+/// sidebar's "Ferramentas" submenu instead of the top-level list.
+class AdminSectionDef {
+  final AdminSection id;
+  final String path;
+  final IconData icon;
+  final Widget Function() build;
+  final bool inToolsGroup;
+  const AdminSectionDef({
+    required this.id,
+    required this.path,
+    required this.icon,
+    required this.build,
+    this.inToolsGroup = false,
+  });
+}
+
+/// Base URL of the admin console. Every section is this or a child of it, so the
+/// router's security guard can match the whole area with a single prefix.
+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) 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,
+    path: adminBasePath,
+    icon: KasyIcons.dashboard,
+    build: () => const _OverviewTab(),
+  ),
+  AdminSectionDef(
+    id: AdminSection.users,
+    path: '$adminBasePath/users',
+    icon: KasyIcons.users,
+    build: () => const _UsersTab(),
+  ),
+  AdminSectionDef(
+    id: AdminSection.requests,
+    path: '$adminBasePath/requests',
+    icon: KasyIcons.idea,
+    build: () => const _RequestsTab(),
+  ),
+  // ── "Ferramentas" submenu ───────────────────────────────────────────────
+  AdminSectionDef(
+    id: AdminSection.sendPush,
+    path: adminRouteSendPush,
+    icon: KasyIcons.notificationActive,
+    build: () => const SendPushNotificationPage(),
+    inToolsGroup: true,
+  ),
+  AdminSectionDef(
+    id: AdminSection.paywalls,
+    path: adminRoutePaywalls,
+    icon: KasyIcons.payment,
+    build: () => const _PaywallsTab(),
+    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.
+String adminSectionLabel(AdminSection id) {
+  final tabs = t.admin_console.tabs;
+  return switch (id) {
+    AdminSection.overview => tabs.overview,
+    AdminSection.users => tabs.users,
+    AdminSection.requests => tabs.requests,
+    AdminSection.sendPush => t.home.features_page.send_push_title,
+    AdminSection.paywalls => t.settings.admin.paywalls,
+    AdminSection.components => t.home.dashboard.components_title,
+    AdminSection.debug => tabs.debug,
+  };
+}
+
+/// Persistent chrome for the admin console: the navigation rail (sidebar on
+/// desktop, drawer on mobile) wrapping the routed section content. Each section
+/// is a real, URL-addressable screen ([adminSections]); the rail reflects and
+/// drives [StatefulNavigationShell.currentIndex] so the browser URL, the back
+/// button and web state-restoration all behave like the rest of the app.
 ///
-/// Vercel-style layout: frosted "Admin" app bar + horizontally-scrollable
-/// underline tabs over a content column that is centred and width-capped so the
-/// console reads as a real dashboard on web/desktop instead of a stretched
-/// phone screen. Replaces the old admin bottom sheet — reached via the
-/// double-tap on the settings version label; popping returns to Settings.
+/// Reached by `context.push('/admin')` (double-tap on the settings version
+/// label); popping returns to the app. Built from the same design system as the
+/// real [KasySidebar]/[KasyAppBar] so it reads as native product chrome.
 ///
-/// TOP-LEVEL route (sibling of '/', outside the BottomMenu shell) so it never
-/// renders the web sidebar — the admin is a dev tool, not product chrome.
-class AdminPage extends ConsumerStatefulWidget {
-  const AdminPage({super.key});
+/// Access: the router redirects non-admins away from `/admin*` in production
+/// (see the guard in `router.dart`) — the real lock is at the routing layer, not
+/// just hidden UI. In debug anyone reaches it; server-backed sections still gate
+/// their data by role internally.
+class AdminShell extends ConsumerStatefulWidget {
+  final StatefulNavigationShell navigationShell;
+  const AdminShell({super.key, required this.navigationShell});
 
   @override
-  ConsumerState<AdminPage> createState() => _AdminPageState();
+  ConsumerState<AdminShell> createState() => _AdminShellState();
 }
 
-class _AdminPageState extends ConsumerState<AdminPage> {
-  int _tab = 0;
+class _AdminShellState extends ConsumerState<AdminShell> {
+  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
 
   @override
   Widget build(BuildContext context) {
     final bool isAdmin = ref.watch(userStateNotifierProvider).user.isAdmin;
     final ac = t.admin_console;
 
-    // The console itself opens for admins (even in release) or anyone in debug.
+    // Defense in depth: the router already redirects non-admins away from
+    // /admin* in production, so this only ever renders in the unexpected case
+    // the shell is reached without the role (never in a release build).
     if (!isAdmin && !kDebugMode) {
       return Scaffold(
         backgroundColor: context.colors.background,
@@ -68,7 +199,7 @@ class _AdminPageState extends ConsumerState<AdminPage> {
             const KasyAppBar(title: 'Admin'),
             Expanded(
               child: _EmptyState(
-                icon: Icons.lock_outline_rounded,
+                icon: KasyIcons.security,
                 title: ac.tabs.overview,
                 message: ac.requires_admin,
               ),
@@ -78,43 +209,156 @@ class _AdminPageState extends ConsumerState<AdminPage> {
       );
     }
 
-    // Server-data tabs always present (gated by role inside). Dev tabs (Kit,
-    // Tools) only in debug — they are developer conveniences, not admin data.
-    final List<({String label, Widget view})> entries = [
-      (label: ac.tabs.overview, view: const _OverviewTab()),
-      (label: ac.tabs.users, view: const _UsersTab()),
-      (label: ac.tabs.requests, view: const _RequestsTab()),
-      if (kDebugMode) (label: ac.tabs.kit, view: const _KitTab()),
-      if (kDebugMode) (label: ac.tabs.tools, view: const _ToolsTab()),
-    ];
-    final int tab = _tab.clamp(0, entries.length - 1);
+    final List<AdminSectionDef> sections = adminSections();
+    final int index = widget.navigationShell.currentIndex;
+    final double width = MediaQuery.sizeOf(context).width;
+    // Same breakpoints as the app shell (bottom_menu.dart +
+    // web_content_wrapper.dart): the sidebar shows from tablet up (collapsing to
+    // the icon rail on tablet), and the web header replaces the app bar only on
+    // desktop.
+    final bool hasSidebar = width >= DeviceType.medium.breakpoint;
+
+    void selectEntry(int i) {
+      // Re-tapping the active section resets its branch to the root, the
+      // standard StatefulShellRoute / tab-bar behaviour.
+      widget.navigationShell.goBranch(
+        i,
+        initialLocation: i == widget.navigationShell.currentIndex,
+      );
+      if (!hasSidebar) _scaffoldKey.currentState?.closeDrawer();
+    }
+
+    // Profile block in the rail, populated exactly like the app sidebar
+    // (bottom_menu.dart): the real name/email + the signed-in user's avatar.
+    final User user = ref.watch(userStateNotifierProvider).user;
+    final (String profileName, String profileEmail) = switch (user) {
+      final AuthenticatedUserData u => (
+        (u.name?.isNotEmpty ?? false) ? u.name! : u.email.split('@').first,
+        u.email,
+      ),
+      _ => (t.settings.my_account, ''),
+    };
+
+    // The app's real KasySidebar, driven by the admin sections (same component,
+    // same logo/dividers/collapse/tooltips/profile — no bespoke copy). The
+    // top-level sections are flat rows; the four Tools sub-screens live inside an
+    // expandable "Ferramentas" submenu (the same dropdown recipe as the app's
+    // Income menu), so each keeps the rail and its own URL.
+    KasySidebar buildRail({required bool isDrawer}) {
+      final List<KasySidebarItem> items = [
+        for (int i = 0; i < sections.length; i++)
+          if (!sections[i].inToolsGroup)
+            KasySidebarItem(
+              icon: sections[i].icon,
+              label: adminSectionLabel(sections[i].id),
+              selected: i == index,
+              onTap: () => selectEntry(i),
+            ),
+      ];
+      final List<KasySidebarSubItem> toolsChildren = [
+        for (int i = 0; i < sections.length; i++)
+          if (sections[i].inToolsGroup)
+            KasySidebarSubItem(
+              label: adminSectionLabel(sections[i].id),
+              selected: i == index,
+              onTap: () => selectEntry(i),
+            ),
+      ];
+      if (toolsChildren.isNotEmpty) {
+        items.add(
+          KasySidebarItem(
+            icon: KasyIcons.briefcase,
+            label: t.admin_console.tabs.tools,
+            children: toolsChildren,
+          ),
+        );
+      }
+      return KasySidebar(
+        isDrawer: isDrawer,
+        items: items,
+        sectionLabel: 'ADMIN',
+        footerItems: [
+          KasySidebarItem(
+            icon: KasyIcons.arrowBackIos,
+            label: ac.back_to_app,
+            onTap: () {
+              if (!hasSidebar) _scaffoldKey.currentState?.closeDrawer();
+              _backToApp(context);
+            },
+          ),
+        ],
+        profileName: profileName,
+        profileEmail: profileEmail,
+        profileAvatar: const KasyUserAvatar(),
+      );
+    }
 
+    final Widget content = widget.navigationShell;
+
+    // Tablet + desktop: the real KasySidebar persists and EVERY section gets the
+    // same chrome as the rest of the app (bottom_menu.dart): the web header on
+    // desktop / the rootTab app bar on tablet, both supplied here so the section
+    // bodies stay chrome-free. Keyboard order matches the app shell:
+    // OrderedTraversalPolicy flows Tab sidebar -> header -> content;
+    // KasyFocusableSidebar anchors the initial focus to the rail and hosts the
+    // skip-to-content link; WebContentWrapper carries the desktop web header +
+    // the content focus target (orders 2 and 3) exactly like every app page.
+    if (hasSidebar) {
+      final Widget right = WebContentWrapper(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            KasyAppBar(
+              title: adminSectionLabel(sections[index].id),
+              style: KasyAppBarStyle.rootTab,
+              onThemeToggle: () => ThemeProvider.of(context).toggle(),
+            ),
+            Expanded(child: content),
+          ],
+        ),
+      );
+      return Scaffold(
+        backgroundColor: context.colors.background,
+        body: FocusTraversalGroup(
+          policy: OrderedTraversalPolicy(),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              FocusTraversalOrder(
+                order: const NumericFocusOrder(1),
+                child: KasyFocusableSidebar(child: buildRail(isDrawer: false)),
+              ),
+              Expanded(child: right),
+            ],
+          ),
+        ),
+      );
+    }
+
+    // Phone: the page app bar (with a menu orb) over a drawer holding the same
+    // KasySidebar — the standard mobile pattern.
     return Scaffold(
+      key: _scaffoldKey,
       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)),
       body: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
-          const KasyAppBar(title: 'Admin'),
-          const SizedBox(height: KasySpacing.sm),
-          _MaxWidth(
-            child: Padding(
-              padding: const EdgeInsets.symmetric(
-                horizontal: KasySpacing.pageHorizontalGutter,
-              ),
-              child: KasyTabs(
-                tabs: [for (final e in entries) e.label],
-                selectedIndex: tab,
-                onTabSelected: (i) => setState(() => _tab = i),
-                variant: KasyTabsVariant.secondary,
+          KasyAppBar(
+            title: adminSectionLabel(sections[index].id),
+            leading: Builder(
+              builder: (ctx) => KasyChromeOrbIconButton(
+                icon: KasyIcons.menu,
+                iconSize: KasyIconSize.md,
+                foregroundColor: context.colors.onSurface,
+                onPressed: () => Scaffold.of(ctx).openDrawer(),
+                tooltip: MaterialLocalizations.of(ctx).openAppDrawerTooltip,
               ),
             ),
           ),
-          Expanded(
-            child: IndexedStack(
-              index: tab,
-              children: [for (final e in entries) e.view],
-            ),
-          ),
+          Expanded(child: content),
         ],
       ),
     );
@@ -125,8 +369,18 @@ class _AdminPageState extends ConsumerState<AdminPage> {
 /// 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
@@ -230,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;
@@ -239,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,
   });
@@ -271,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,
@@ -296,118 +560,27 @@ class _StatCard extends StatelessWidget {
   }
 }
 
-/// Tappable action card: icon bubble + title/subtitle + chevron, with ripple.
-class _ActionCard extends StatelessWidget {
-  final IconData icon;
-  final String title;
-  final String? subtitle;
-  final VoidCallback onTap;
-  final Color? tone;
-  const _ActionCard({
-    required this.icon,
-    required this.title,
-    required this.onTap,
-    this.subtitle,
-    this.tone,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    final BorderRadius radius = BorderRadius.circular(_cardRadius);
-    final Color accent = tone ?? context.colors.primary;
-    return DecoratedBox(
-      decoration: BoxDecoration(
-        borderRadius: radius,
-        boxShadow: [KasyShadows.component(context)],
-      ),
-      child: Material(
-        color: context.colors.surface,
-        borderRadius: radius,
-        clipBehavior: Clip.antiAlias,
-        child: InkWell(
-          onTap: onTap,
-          child: Container(
-            decoration: BoxDecoration(
-              borderRadius: radius,
-              border: Border.all(
-                color: context.colors.outline.withValues(
-                  alpha: context.isDark ? 0.45 : 0.6,
-                ),
-              ),
-            ),
-            padding: const EdgeInsets.all(KasySpacing.md),
-            child: Row(
-              children: [
-                _IconBubble(icon: icon, tone: accent),
-                const SizedBox(width: KasySpacing.smd),
-                Expanded(
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    mainAxisSize: MainAxisSize.min,
-                    children: [
-                      Text(
-                        title,
-                        maxLines: 1,
-                        overflow: TextOverflow.ellipsis,
-                        style: context.textTheme.titleSmall?.copyWith(
-                          color: context.colors.onSurface,
-                          fontWeight: FontWeight.w700,
-                        ),
-                      ),
-                      if (subtitle != null) ...[
-                        const SizedBox(height: 2),
-                        Text(
-                          subtitle!,
-                          maxLines: 2,
-                          overflow: TextOverflow.ellipsis,
-                          style: context.textTheme.bodySmall?.copyWith(
-                            color: context.colors.muted,
-                            height: 1.3,
-                          ),
-                        ),
-                      ],
-                    ],
-                  ),
-                ),
-                const SizedBox(width: KasySpacing.sm),
-                Icon(
-                  KasyIcons.chevronRight,
-                  size: 18,
-                  color: context.colors.muted,
-                ),
-              ],
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}
-
 /// Lays children out in as many equal columns as fit [minItemWidth], capped at
-/// [maxCols]. Collapses to a single full-width column on narrow screens.
+/// four. Collapses to a single full-width column on narrow screens.
 class _ResponsiveGrid extends StatelessWidget {
   final List<Widget> children;
   final double minItemWidth;
-  final int maxCols;
-  const _ResponsiveGrid({
-    required this.children,
-    this.minItemWidth = 240,
-    this.maxCols = 4,
-  });
+  const _ResponsiveGrid({required this.children, this.minItemWidth = 240});
 
   @override
   Widget build(BuildContext context) {
     if (children.isEmpty) return const SizedBox.shrink();
     const double gap = KasySpacing.md;
+    const int maxCols = 4;
     return LayoutBuilder(
       builder: (context, constraints) {
         final double maxW = constraints.maxWidth;
         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,
@@ -420,10 +593,18 @@ class _ResponsiveGrid extends StatelessWidget {
   }
 }
 
-/// Pops the admin page back to Settings — used by actions that historically
-/// closed the bottom sheet so their result is visible over the app.
+/// Leaves the admin console entirely, back to the app. Pops the ROOT navigator
+/// so the whole admin shell is removed at once — even when a detail screen is
+/// open in a section's nested navigator (a plain pop would only close the
+/// detail). Falls back to going home when it can't pop (e.g. a web reload / deep
+/// link that landed directly on an /admin URL).
 void _backToApp(BuildContext context) {
-  if (context.canPop()) context.pop();
+  final NavigatorState root = Navigator.of(context, rootNavigator: true);
+  if (root.canPop()) {
+    root.pop();
+  } else {
+    context.go('/');
+  }
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -440,35 +621,20 @@ class _OverviewTab extends ConsumerWidget {
     final bool isAuth = user is AuthenticatedUserData;
     final bool isAdmin = user.isAdmin;
     final ov = t.admin_console.overview;
+    final admin = t.settings.admin;
+    final groups = t.admin_console.groups;
     final String account = isAuth ? user.email : ov.guest;
     final String uid = userState.user.idOrNull ?? '—';
 
     return _TabScroll(
       children: [
-        _GroupLabel(ov.section),
-        _ResponsiveGrid(
-          minItemWidth: 200,
-          children: [
-            _StatCard(
-              icon: Icons.cloud_done_rounded,
-              tone: context.colors.primary,
-              value: 'Firebase',
-              label: ov.backend,
-            ),
-            // Feature-request count reads the server — admins only.
-            if (isAdmin)
-              _StatCard(
-                icon: Icons.how_to_vote_rounded,
-                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(
@@ -477,6 +643,8 @@ class _OverviewTab extends ConsumerWidget {
           ),
           child: Column(
             children: [
+              _InfoRow(label: ov.backend, value: 'Firebase'),
+              const SettingsDivider(),
               _InfoRow(
                 label: ov.account,
                 value: account,
@@ -489,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,
                         );
@@ -509,6 +679,33 @@ class _OverviewTab extends ConsumerWidget {
             ],
           ),
         ),
+        // Dev preview tools are toggled by keyboard shortcut (no buttons). Shown
+        // only in debug — never in production.
+        if (kDebugMode) ...[
+          const SizedBox(height: KasySpacing.lg),
+          _GroupLabel(groups.preview),
+          _CardShell(
+            padding: const EdgeInsets.symmetric(
+              horizontal: KasySpacing.md,
+              vertical: KasySpacing.xs,
+            ),
+            child: Column(
+              children: [
+                _ShortcutRow(
+                  label: admin.inspector_fab_title,
+                  keys: devInspectorShortcutLabel(),
+                ),
+                if (kIsWeb) ...[
+                  const SettingsDivider(),
+                  _ShortcutRow(
+                    label: admin.device_preview_title,
+                    keys: webDevicePreviewShortcutLabel(),
+                  ),
+                ],
+              ],
+            ),
+          ),
+        ],
         const SizedBox(height: KasySpacing.md),
         Text(
           ov.users_hint,
@@ -516,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;
@@ -571,22 +1384,52 @@ class _InfoRow extends StatelessWidget {
   }
 }
 
+/// A dev-tool name with its global keyboard shortcut on the right (read-only).
+class _ShortcutRow extends StatelessWidget {
+  final String label;
+  final String keys;
+  const _ShortcutRow({required this.label, required this.keys});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: KasySpacing.smd),
+      child: Row(
+        children: [
+          Expanded(
+            child: Text(
+              label,
+              style: context.textTheme.bodyMedium?.copyWith(
+                color: context.colors.onSurface,
+              ),
+            ),
+          ),
+          const SizedBox(width: KasySpacing.sm),
+          Text(
+            keys,
+            style: context.kasyTextTheme.rowValue.copyWith(
+              color: context.colors.muted,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
 class _CopyButton extends StatelessWidget {
   final VoidCallback onTap;
   const _CopyButton({required this.onTap});
 
   @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(
-          Icons.content_copy_rounded,
-          size: 16,
-          color: context.colors.primary,
-        ),
+        child: Icon(KasyIcons.copy, size: 16, color: context.colors.primary),
       ),
     );
   }
@@ -655,7 +1498,7 @@ class _UsersTab extends ConsumerWidget {
     final u = t.admin_console.users;
     if (!isAdmin) {
       return _EmptyState(
-        icon: Icons.lock_outline_rounded,
+        icon: KasyIcons.security,
         title: u.title,
         message: t.admin_console.requires_admin,
       );
@@ -673,13 +1516,14 @@ class _RequestsTab extends ConsumerWidget {
     final r = t.admin_console.requests;
     if (!isAdmin) {
       return _EmptyState(
-        icon: Icons.lock_outline_rounded,
+        icon: KasyIcons.security,
         title: r.title,
         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(
@@ -695,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),
             ],
@@ -787,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);
                     }
                   },
                 ),
@@ -795,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),
               ),
             ],
@@ -843,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),
@@ -902,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()},
@@ -968,262 +1824,363 @@ class _RequestEditorSheetState extends ConsumerState<_RequestEditorSheet> {
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Kit — feature demos + the component gallery
+// Tools sub-screens — each is a real console section (body only; the admin
+// shell supplies the chrome), reached from the sidebar's "Ferramentas" submenu.
 // ─────────────────────────────────────────────────────────────────────────────
 
-class _KitTab extends ConsumerWidget {
-  const _KitTab();
+/// Settings-style card: rows separated by hairline dividers — the exact clean
+/// 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: [
+      for (int i = 0; i < rows.length; i++) ...[
+        if (i > 0) const SettingsDivider(),
+        rows[i],
+      ],
+    ],
+  ),
+);
+
+/// 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, WidgetRef ref) {
-    final page = t.home.features_page;
-    final dash = t.home.dashboard;
-    final groups = t.admin_console.groups;
-
-    final List<Widget> features = <Widget>[
-      if (withFeedback)
-        _ActionCard(
-          icon: KasyIcons.message,
-          title: page.feedback_title,
-          subtitle: page.feedback_description,
-          onTap: () => context.push('/feedback'),
-        ),
-      _ActionCard(
-        icon: KasyIcons.notification,
-        title: page.notification_title,
-        subtitle: page.notification_description,
-        onTap: () {
-          final settings = ref.read(notificationsSettingsProvider);
-          final localNotifier = ref.read(localNotifierProvider);
-          kasy_kit.Notification.withData(
-            id: 'fake-id',
-            title: page.notification_demo_title,
-            body: page.notification_demo_body,
-            createdAt: DateTime.now(),
-            notifier: localNotifier,
-            notifierSettings: settings,
-          ).show();
-        },
-      ),
-      _ActionCard(
-        icon: KasyIcons.notificationActive,
-        title: page.send_push_title,
-        subtitle: page.send_push_description,
-        onTap: () => context.push(adminRouteSendPush),
-      ),
-      if (withRevenuecat)
-        _ActionCard(
-          icon: KasyIcons.payment,
-          title: page.paywall_title,
-          subtitle: page.paywall_description,
-          onTap: () => context.push('/premium'),
-        ),
-    ];
-
+  Widget build(BuildContext context) {
+    final admin = t.settings.admin;
+    final pw = t.admin_console.paywalls;
     return _TabScroll(
       children: [
-        _GroupLabel(groups.features),
-        _ResponsiveGrid(minItemWidth: 280, maxCols: 2, children: features),
-        const SizedBox(height: KasySpacing.lg),
-        _GroupLabel(groups.showcase),
-        _ResponsiveGrid(
-          minItemWidth: 280,
-          maxCols: 2,
-          children: [
-            _ActionCard(
-              icon: KasyIcons.widgets,
-              title: dash.components_title,
-              subtitle: dash.components_subtitle,
-              tone: context.colors.success,
-              onTap: () => context.push('/components'),
+        _GroupLabel(admin.paywalls),
+        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),
+        ],
       ],
     );
   }
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Tools — every developer toggle/action migrated from the old admin sheet
-// ─────────────────────────────────────────────────────────────────────────────
+/// 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 _ToolsTab extends ConsumerWidget {
-  const _ToolsTab();
+class _PaywallCard extends ConsumerWidget {
+  final PaywallFactory paywall;
+  const _PaywallCard({required this.paywall});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final userState = ref.watch(userStateNotifierProvider);
-    final admin = t.settings.admin;
-    final groups = t.admin_console.groups;
-
-    final List<Widget> previews = <Widget>[
-      ValueListenableBuilder<bool>(
-        valueListenable: devInspectorEnabledNotifier,
-        builder: (context, enabled, _) {
-          return SettingsSwitchTile(
-            icon: KasyIcons.widgets,
-            title: admin.inspector_fab_title,
-            subtitle:
-                '${admin.inspector_fab_subtitle_prefix} ${devInspectorShortcutLabel()}',
-            value: enabled,
-            onChanged: (v) async {
-              final p = await SharedPreferences.getInstance();
-              await p.setBool(devInspectorEnabledPrefKey, v);
-              devInspectorEnabledNotifier.value = v;
-              if (v && context.mounted) _backToApp(context);
-            },
-          );
-        },
-      ),
-      if (kIsWeb)
-        ValueListenableBuilder<bool>(
-          valueListenable: webDevicePreviewEnabledNotifier,
-          builder: (context, enabled, _) {
-            return SettingsSwitchTile(
-              icon: KasyIcons.phoneAndroid,
-              title: admin.device_preview_title,
-              subtitle:
-                  '${admin.inspector_fab_subtitle_prefix} ${webDevicePreviewShortcutLabel()}',
-              value: enabled,
-              onChanged: (v) async {
-                final p = await SharedPreferences.getInstance();
-                await p.setBool(webDevicePreviewEnabledPrefKey, v);
-                webDevicePreviewEnabledNotifier.value = v;
-                if (v && context.mounted) _backToApp(context);
+    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);
               },
-            );
-          },
-        ),
-    ];
-
-    final List<Widget> tools = <Widget>[
-      _ActionCard(
-        icon: KasyIcons.note,
-        title: admin.update_bottom_sheet,
-        // Preview the sheet over the current screen; dismissing (tap-outside /
-        // Continue) just closes it and returns here, without navigating away.
-        onTap: () => showUpdateBottomSheet(
-          context: navigatorKey.currentContext!,
-          version: '0.0.0',
+            ),
+          ],
         ),
       ),
-      _ActionCard(
-        icon: KasyIcons.download,
-        title: admin.preview_update_available,
-        // Previews the optional (dismissible) sheet so the design can be
-        // reviewed without TestFlight or Remote Config. The forced variant is
-        // the same layout, blocking — test it via app_min_version.
-        onTap: () => showUpdateAvailableSheet(
-          navigatorKey.currentContext!,
-          forced: false,
+    );
+  }
+}
+
+/// 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),
+          ],
         ),
       ),
-      _ActionCard(
-        icon: KasyIcons.payment,
-        title: admin.paywalls,
-        onTap: () => context.push(adminRoutePaywalls),
-      ),
-      _ActionCard(
-        icon: KasyIcons.check,
-        title: admin.test_onboarding,
-        onTap: () => ref.read(goRouterProvider).go('/onboarding'),
-      ),
-      _ActionCard(
-        icon: KasyIcons.notificationActive,
-        title: admin.send_push_title,
-        onTap: () => context.push(adminRouteSendPush),
-      ),
-      _ActionCard(
-        icon: KasyIcons.star,
-        title: admin.ask_review,
-        // Has a design (the review dialog), so it's previewable on web too —
-        // only the store action no-ops there.
-        onTap: () => showReviewDialog(context, ref, force: true),
-      ),
-      _ActionCard(
-        icon: KasyIcons.message,
-        title: admin.home_widgets_panel,
-        onTap: () => context.push(adminRouteHomeWidgets),
-      ),
-    ];
-
-    final List<Widget> identity = <Widget>[
-      _ActionCard(
-        icon: KasyIcons.person,
-        title: admin.copy_user_id,
-        onTap: () {
-          Clipboard.setData(
-            ClipboardData(text: userState.user.idOrNull ?? 'no-id (guest)'),
-          );
-          ref.read(toastProvider).alert(
-                title: t.common.copied,
-                text: admin.user_id_copied,
-              );
-        },
-      ),
-      _ActionCard(
-        icon: KasyIcons.notification,
-        title: admin.copy_fcm_token,
-        onTap: () async {
-          if (kIsWeb) {
-            ref.read(toastProvider).alert(
-                  title: t.common.native_only_title,
-                  text: admin.native_only,
-                );
-            return;
-          }
-          final token = await FirebaseMessaging.instance.getToken();
-          if (token == null) {
-            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,
-              );
-        },
-      ),
-      _ActionCard(
-        icon: KasyIcons.notificationActive,
-        title: admin.ask_notification,
-        onTap: () {
-          if (kIsWeb) {
-            ref.read(toastProvider).alert(
-                  title: t.common.native_only_title,
-                  text: admin.native_only,
-                );
-            return;
-          }
-          ref.read(notificationsSettingsProvider).askPermission();
-        },
-      ),
-    ];
+    );
+  }
+}
+
+/// 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
+/// stretching edge-to-edge on desktop.
+class _ComponentsTab extends StatelessWidget {
+  const _ComponentsTab();
+
+  @override
+  Widget build(BuildContext context) =>
+      const _MaxWidth(child: HomeComponentsCatalog());
+}
+
+/// Developer tooling (debug only): identity helpers, debug actions and a
+/// local-notification test — the leftovers that aren't worth a screen of their
+/// own, grouped as clean Settings-style lists.
+class _DebugTab extends ConsumerWidget {
+  const _DebugTab();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final page = t.home.features_page;
+    final admin = t.settings.admin;
+    final groups = t.admin_console.groups;
+    final userState = ref.watch(userStateNotifierProvider);
 
     return _TabScroll(
       children: [
-        _GroupLabel(groups.preview),
-        _CardShell(
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              for (int i = 0; i < previews.length; i++) ...[
-                if (i > 0) const SettingsDivider(),
-                previews[i],
-              ],
-            ],
+        // ── Identity ────────────────────────────────────────────────────────
+        _GroupLabel(groups.identity),
+        _groupCard([
+          SettingsTile(
+            icon: KasyIcons.person,
+            title: admin.copy_user_id,
+            onTap: () {
+              Clipboard.setData(
+                ClipboardData(text: userState.user.idOrNull ?? 'no-id (guest)'),
+              );
+              ref
+                  .read(toastProvider)
+                  .alert(title: t.common.copied, text: admin.user_id_copied);
+            },
           ),
-        ),
+          SettingsTile(
+            icon: KasyIcons.notification,
+            title: admin.copy_fcm_token,
+            onTap: () async {
+              if (kIsWeb) {
+                ref
+                    .read(toastProvider)
+                    .alert(
+                      title: t.common.native_only_title,
+                      text: admin.native_only,
+                    );
+                return;
+              }
+              final token = await FirebaseMessaging.instance.getToken();
+              if (token == null) {
+                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);
+            },
+          ),
+          SettingsTile(
+            icon: KasyIcons.notification,
+            title: admin.ask_notification,
+            onTap: () {
+              if (kIsWeb) {
+                ref
+                    .read(toastProvider)
+                    .alert(
+                      title: t.common.native_only_title,
+                      text: admin.native_only,
+                    );
+                return;
+              }
+              ref.read(notificationsSettingsProvider).askPermission();
+            },
+          ),
+        ]),
+
         const SizedBox(height: KasySpacing.lg),
+
+        // ── Debug actions ───────────────────────────────────────────────────
         _GroupLabel(groups.debug_actions),
-        _ResponsiveGrid(minItemWidth: 280, maxCols: 2, children: tools),
+        _groupCard([
+          SettingsTile(
+            icon: KasyIcons.note,
+            title: admin.update_bottom_sheet,
+            // Preview the sheet over the current screen; dismissing just closes
+            // it and returns here, without navigating away.
+            onTap: () => showUpdateBottomSheet(
+              context: navigatorKey.currentContext!,
+              version: '0.0.0',
+            ),
+          ),
+          SettingsTile(
+            icon: KasyIcons.download,
+            title: admin.preview_update_available,
+            // Previews the optional (dismissible) sheet. The forced variant is
+            // the same layout, blocking — test it via app_min_version.
+            onTap: () => showUpdateAvailableSheet(
+              navigatorKey.currentContext!,
+              forced: false,
+            ),
+          ),
+          SettingsTile(
+            icon: KasyIcons.check,
+            title: admin.test_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,
+            title: admin.ask_review,
+            // Has a design (the review dialog), previewable on web too — only
+            // the store action no-ops there.
+            onTap: () => showReviewDialog(context, ref, force: true),
+          ),
+          // 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),
-        _GroupLabel(groups.identity),
-        _ResponsiveGrid(minItemWidth: 280, maxCols: 2, children: identity),
+
+        // ── Notification test ───────────────────────────────────────────────
+        _GroupLabel(groups.notification_test),
+        _groupCard([
+          SettingsTile(
+            icon: KasyIcons.notification,
+            title: page.notification_title,
+            onTap: () {
+              // Local notifications don't fire on web — tell the user instead
+              // of doing nothing when tapped.
+              if (kIsWeb) {
+                ref
+                    .read(toastProvider)
+                    .alert(
+                      title: t.common.native_only_title,
+                      text: admin.native_only,
+                    );
+                return;
+              }
+              final settings = ref.read(notificationsSettingsProvider);
+              final localNotifier = ref.read(localNotifierProvider);
+              kasy_kit.Notification.withData(
+                id: 'fake-id',
+                title: page.notification_demo_title,
+                body: page.notification_demo_body,
+                createdAt: DateTime.now(),
+                notifier: localNotifier,
+                notifierSettings: settings,
+              ).show();
+            },
+          ),
+        ]),
       ],
     );
   }