kasy-cli 1.21.8 → 1.22.0

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

@@ -0,0 +1,1215 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:kasy_kit/components/kasy_avatar.dart';
+import 'package:kasy_kit/components/kasy_status_tag.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/features/settings/ui/components/admin/admin_users_api.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Data: the whole (bounded) set is loaded once; the tab searches / sorts /
+// paginates it locally so every interaction is instant and free of extra reads.
+// ─────────────────────────────────────────────────────────────────────────────
+
+final _usersResultProvider = FutureProvider.autoDispose<AdminUsersResult>(
+  (ref) => ref.read(adminUsersApiProvider).fetch(),
+);
+
+const double _maxWidth = 1080;
+const double _filterWidth = 208;
+const int _pageSize = 10;
+
+/// Which column the table is sorted by. `null` means the smart default order:
+/// active first → subscribers first → newest first (what the admin asked for).
+enum _SortCol { user, status, plan, joined }
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Tab root
+// ─────────────────────────────────────────────────────────────────────────────
+
+class AdminUsersTab extends ConsumerStatefulWidget {
+  const AdminUsersTab({super.key});
+
+  @override
+  ConsumerState<AdminUsersTab> createState() => _AdminUsersTabState();
+}
+
+class _AdminUsersTabState extends ConsumerState<AdminUsersTab> {
+  final _searchCtrl = TextEditingController();
+  String _search = '';
+  bool _subscribersOnly = false;
+  _SortCol? _sortCol; // null = smart default
+  bool _asc = true;
+  int _page = 0;
+
+  @override
+  void dispose() {
+    _searchCtrl.dispose();
+    super.dispose();
+  }
+
+  void _onSearch(String v) => setState(() {
+        _search = v;
+        _page = 0;
+      });
+
+  void _setSubscribersOnly(bool v) => setState(() {
+        _subscribersOnly = v;
+        _page = 0;
+      });
+
+  void _onSort(_SortCol col) => setState(() {
+        if (_sortCol == col) {
+          _asc = !_asc;
+        } else {
+          _sortCol = col;
+          _asc = col != _SortCol.joined; // joined defaults to newest-first
+        }
+        _page = 0;
+      });
+
+  // ── Sort helpers ────────────────────────────────────────────────────────
+  int _rankActive(AdminUser u) => (u.email?.isNotEmpty == true) ? 0 : 1;
+  int _rankSub(AdminUser u) => u.subscriber ? 0 : 1;
+  int _byJoined(AdminUser a, AdminUser b) =>
+      (a.createdAt?.millisecondsSinceEpoch ?? 0)
+          .compareTo(b.createdAt?.millisecondsSinceEpoch ?? 0);
+  String _displayKey(AdminUser u) =>
+      (u.name?.isNotEmpty == true ? u.name! : (u.email ?? '~')).toLowerCase();
+
+  int _compare(AdminUser a, AdminUser b) {
+    if (_sortCol == null) {
+      final byActive = _rankActive(a).compareTo(_rankActive(b));
+      if (byActive != 0) return byActive; // active first
+      final bySub = _rankSub(a).compareTo(_rankSub(b));
+      if (bySub != 0) return bySub; // subscribers first
+      return -_byJoined(a, b); // newest first
+    }
+    int r;
+    switch (_sortCol!) {
+      case _SortCol.user:
+        r = _displayKey(a).compareTo(_displayKey(b));
+      case _SortCol.status:
+        r = _rankActive(a).compareTo(_rankActive(b));
+      case _SortCol.plan:
+        r = _rankSub(a).compareTo(_rankSub(b));
+      case _SortCol.joined:
+        r = _byJoined(a, b);
+    }
+    if (r == 0) r = -_byJoined(a, b);
+    return _asc ? r : -r;
+  }
+
+  List<AdminUser> _process(List<AdminUser> all) {
+    final q = _search.trim().toLowerCase();
+    final list = all.where((u) {
+      if (_subscribersOnly && !u.subscriber) return false;
+      if (q.isEmpty) return true;
+      final email = (u.email ?? '').toLowerCase();
+      final name = (u.name ?? '').toLowerCase();
+      return email.contains(q) || name.contains(q);
+    }).toList()
+      ..sort(_compare);
+    return list;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final async = ref.watch(_usersResultProvider);
+
+    return _HCenter(
+      child: async.when(
+        loading: () => const _LoadingState(),
+        error: (e, _) => _ErrorState(onRetry: _refresh),
+        data: (result) {
+          final processed = _process(result.users);
+          final total = processed.length;
+          final pageCount = max(1, (total / _pageSize).ceil());
+          final page = _page.clamp(0, pageCount - 1);
+          final start = page * _pageSize;
+          final end = min(start + _pageSize, total);
+          final visible = processed.sublist(start, end);
+
+          return Column(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              _Toolbar(
+                controller: _searchCtrl,
+                resultCount: total,
+                subscribersOnly: _subscribersOnly,
+                onSearch: _onSearch,
+                onSubscribersOnly: _setSubscribersOnly,
+                onRefresh: _refresh,
+              ),
+              if (result.truncated)
+                _TruncatedNote(count: result.users.length),
+              _TableHeader(
+                sortCol: _sortCol,
+                asc: _asc,
+                onSort: _onSort,
+              ),
+              Expanded(
+                child: visible.isEmpty
+                    ? _EmptyState(searching: _search.trim().isNotEmpty)
+                    : _TableBody(
+                        users: visible,
+                        rangeFrom: start + 1,
+                        rangeTo: end,
+                        total: total,
+                        page: page,
+                        pageCount: pageCount,
+                        onPage: (p) => setState(() => _page = p),
+                      ),
+              ),
+            ],
+          );
+        },
+      ),
+    );
+  }
+
+  void _refresh() {
+    setState(() => _page = 0);
+    ref.invalidate(_usersResultProvider);
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Toolbar: count · search · subscribers filter · refresh
+// ─────────────────────────────────────────────────────────────────────────────
+
+class _Toolbar extends StatelessWidget {
+  final TextEditingController controller;
+  final int resultCount;
+  final bool subscribersOnly;
+  final ValueChanged<String> onSearch;
+  final ValueChanged<bool> onSubscribersOnly;
+  final VoidCallback onRefresh;
+
+  const _Toolbar({
+    required this.controller,
+    required this.resultCount,
+    required this.subscribersOnly,
+    required this.onSearch,
+    required this.onSubscribersOnly,
+    required this.onRefresh,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final u = t.admin_console.users;
+    final count = _ResultCount(value: resultCount, label: u.title);
+    final filter = _FilterButton(
+      subscribersOnly: subscribersOnly,
+      onChanged: onSubscribersOnly,
+    );
+    final refresh = _IconAction(
+      icon: Icons.refresh_rounded,
+      tooltip: u.refresh,
+      onTap: onRefresh,
+    );
+
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(
+        KasySpacing.pageHorizontalGutter,
+        KasySpacing.md,
+        KasySpacing.pageHorizontalGutter,
+        0,
+      ),
+      child: LayoutBuilder(
+        builder: (context, c) {
+          final compact = c.maxWidth < 560;
+          if (compact) {
+            return Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                Row(
+                  children: [
+                    count,
+                    const Spacer(),
+                    filter,
+                    const SizedBox(width: KasySpacing.xs),
+                    refresh,
+                  ],
+                ),
+                const SizedBox(height: KasySpacing.sm),
+                _SearchField(controller: controller, onChanged: onSearch),
+              ],
+            );
+          }
+          return Row(
+            children: [
+              count,
+              const Spacer(),
+              SizedBox(
+                width: 240,
+                child: _SearchField(controller: controller, onChanged: onSearch),
+              ),
+              const SizedBox(width: KasySpacing.sm),
+              filter,
+              const SizedBox(width: KasySpacing.xs),
+              refresh,
+            ],
+          );
+        },
+      ),
+    );
+  }
+}
+
+class _ResultCount extends StatelessWidget {
+  final int value;
+  final String label;
+  const _ResultCount({required this.value, required this.label});
+
+  @override
+  Widget build(BuildContext context) {
+    return Text.rich(
+      TextSpan(
+        children: [
+          TextSpan(
+            text: '$value ',
+            style: context.textTheme.titleMedium?.copyWith(
+              color: context.colors.onSurface,
+              fontWeight: FontWeight.w800,
+            ),
+          ),
+          TextSpan(
+            text: label.toLowerCase(),
+            style: context.textTheme.titleSmall?.copyWith(
+              color: context.colors.muted,
+              fontWeight: FontWeight.w500,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _SearchField extends StatelessWidget {
+  final TextEditingController controller;
+  final ValueChanged<String> onChanged;
+  const _SearchField({required this.controller, required this.onChanged});
+
+  @override
+  Widget build(BuildContext context) {
+    final u = t.admin_console.users;
+    return SizedBox(
+      height: 38,
+      child: TextField(
+        controller: controller,
+        onChanged: onChanged,
+        style: context.textTheme.bodyMedium,
+        decoration: InputDecoration(
+          hintText: u.search_hint,
+          hintStyle: context.textTheme.bodyMedium?.copyWith(
+            color: context.colors.muted,
+          ),
+          prefixIcon: Icon(
+            Icons.search_rounded,
+            size: 18,
+            color: context.colors.muted,
+          ),
+          prefixIconConstraints: const BoxConstraints(
+            minWidth: 38,
+            minHeight: 38,
+          ),
+          isDense: true,
+          contentPadding: const EdgeInsets.symmetric(
+            horizontal: 12,
+            vertical: 9,
+          ),
+          filled: true,
+          fillColor: context.colors.surface,
+          enabledBorder: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(KasyRadius.sm),
+            borderSide: BorderSide(
+              color: context.colors.outline.withValues(alpha: 0.5),
+            ),
+          ),
+          focusedBorder: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(KasyRadius.sm),
+            borderSide: BorderSide(color: context.colors.primary, width: 1.4),
+          ),
+          border: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(KasyRadius.sm),
+            borderSide: BorderSide(
+              color: context.colors.outline.withValues(alpha: 0.5),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _FilterButton extends StatelessWidget {
+  final bool subscribersOnly;
+  final ValueChanged<bool> onChanged;
+  const _FilterButton({required this.subscribersOnly, required this.onChanged});
+
+  @override
+  Widget build(BuildContext context) {
+    final u = t.admin_console.users;
+    final active = subscribersOnly;
+    final accent = active ? context.colors.primary : context.colors.onSurface;
+
+    return PopupMenuButton<bool>(
+      initialValue: subscribersOnly,
+      onSelected: onChanged,
+      tooltip: '', // never a "show menu" tooltip — the label already explains it
+      position: PopupMenuPosition.under,
+      constraints: const BoxConstraints(
+        minWidth: _filterWidth,
+        maxWidth: _filterWidth,
+      ),
+      color: context.colors.surface,
+      elevation: 6,
+      shadowColor: Colors.black.withValues(alpha: 0.12),
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(KasyRadius.md),
+        side: BorderSide(color: context.colors.outline.withValues(alpha: 0.5)),
+      ),
+      itemBuilder: (_) => [
+        _filterItem(context, value: false, label: u.filter_all, selected: !active),
+        _filterItem(context, value: true, label: u.filter_subscribers, selected: active),
+      ],
+      child: Container(
+        width: _filterWidth,
+        height: 38,
+        padding: const EdgeInsets.symmetric(horizontal: 12),
+        decoration: BoxDecoration(
+          color: active
+              ? context.colors.primary.withValues(alpha: 0.10)
+              : context.colors.surface,
+          borderRadius: BorderRadius.circular(KasyRadius.sm),
+          border: Border.all(
+            color: active
+                ? context.colors.primary.withValues(alpha: 0.45)
+                : context.colors.outline.withValues(alpha: 0.5),
+          ),
+        ),
+        child: Row(
+          children: [
+            Icon(Icons.tune_rounded, size: 16, color: accent),
+            const SizedBox(width: 8),
+            Expanded(
+              child: Text(
+                active ? u.filter_subscribers : u.filter_all,
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                style: context.textTheme.bodySmall?.copyWith(
+                  color: accent,
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+            ),
+            Icon(Icons.keyboard_arrow_down_rounded, size: 18, color: accent),
+          ],
+        ),
+      ),
+    );
+  }
+
+  PopupMenuItem<bool> _filterItem(
+    BuildContext context, {
+    required bool value,
+    required String label,
+    required bool selected,
+  }) {
+    return PopupMenuItem<bool>(
+      value: value,
+      height: 42,
+      child: Row(
+        children: [
+          Expanded(
+            child: Text(
+              label,
+              style: context.textTheme.bodyMedium?.copyWith(
+                color: context.colors.onSurface,
+                fontWeight: selected ? FontWeight.w600 : FontWeight.w400,
+              ),
+            ),
+          ),
+          if (selected)
+            Icon(Icons.check_rounded, size: 16, color: context.colors.primary),
+        ],
+      ),
+    );
+  }
+}
+
+class _IconAction extends StatelessWidget {
+  final IconData icon;
+  final String tooltip;
+  final VoidCallback onTap;
+  const _IconAction({
+    required this.icon,
+    required this.tooltip,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    // Icon-only control: a tooltip is the right call here (no visible label).
+    return Tooltip(
+      message: tooltip,
+      child: InkWell(
+        onTap: onTap,
+        borderRadius: BorderRadius.circular(KasyRadius.sm),
+        child: Container(
+          width: 38,
+          height: 38,
+          decoration: BoxDecoration(
+            color: context.colors.surface,
+            borderRadius: BorderRadius.circular(KasyRadius.sm),
+            border: Border.all(
+              color: context.colors.outline.withValues(alpha: 0.5),
+            ),
+          ),
+          child: Icon(icon, size: 18, color: context.colors.onSurface),
+        ),
+      ),
+    );
+  }
+}
+
+class _TruncatedNote extends StatelessWidget {
+  final int count;
+  const _TruncatedNote({required this.count});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(
+        KasySpacing.pageHorizontalGutter,
+        KasySpacing.sm,
+        KasySpacing.pageHorizontalGutter,
+        0,
+      ),
+      child: Row(
+        children: [
+          Icon(Icons.info_outline_rounded, size: 14, color: context.colors.muted),
+          const SizedBox(width: 6),
+          Expanded(
+            child: Text(
+              t.admin_console.users.truncated(count: count),
+              style: context.textTheme.bodySmall?.copyWith(
+                color: context.colors.muted,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Sortable header
+// ─────────────────────────────────────────────────────────────────────────────
+
+class _TableHeader extends StatelessWidget {
+  final _SortCol? sortCol;
+  final bool asc;
+  final ValueChanged<_SortCol> onSort;
+  const _TableHeader({
+    required this.sortCol,
+    required this.asc,
+    required this.onSort,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final u = t.admin_console.users;
+    return Container(
+      margin: const EdgeInsets.only(top: KasySpacing.md),
+      decoration: BoxDecoration(
+        border: Border(
+          top: BorderSide(color: context.colors.outline.withValues(alpha: 0.3)),
+          bottom:
+              BorderSide(color: context.colors.outline.withValues(alpha: 0.3)),
+        ),
+        color: context.isDark
+            ? context.colors.surface.withValues(alpha: 0.5)
+            : context.colors.surfaceNeutralSoft.withValues(alpha: 0.4),
+      ),
+      padding: const EdgeInsets.symmetric(
+        horizontal: KasySpacing.pageHorizontalGutter,
+        vertical: 6,
+      ),
+      child: Row(
+        children: [
+          Expanded(
+            flex: 5,
+            child: _HeaderCell(
+              label: u.col_user,
+              active: sortCol == _SortCol.user,
+              asc: asc,
+              onTap: () => onSort(_SortCol.user),
+            ),
+          ),
+          Expanded(
+            flex: 2,
+            child: _HeaderCell(
+              label: u.col_status,
+              active: sortCol == _SortCol.status,
+              asc: asc,
+              onTap: () => onSort(_SortCol.status),
+            ),
+          ),
+          Expanded(
+            flex: 2,
+            child: _HeaderCell(
+              label: u.col_plan,
+              active: sortCol == _SortCol.plan,
+              asc: asc,
+              onTap: () => onSort(_SortCol.plan),
+            ),
+          ),
+          SizedBox(
+            width: 88,
+            child: _HeaderCell(
+              label: u.col_joined,
+              active: sortCol == _SortCol.joined,
+              asc: asc,
+              onTap: () => onSort(_SortCol.joined),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _HeaderCell extends StatelessWidget {
+  final String label;
+  final bool active;
+  final bool asc;
+  final VoidCallback onTap;
+  const _HeaderCell({
+    required this.label,
+    required this.active,
+    required this.asc,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final color = active ? context.colors.onSurface : context.colors.muted;
+    return InkWell(
+      onTap: onTap,
+      borderRadius: BorderRadius.circular(KasyRadius.xs),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 6),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Flexible(
+              child: Text(
+                label.toUpperCase(),
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                style: context.textTheme.labelSmall?.copyWith(
+                  color: color,
+                  letterSpacing: 0.8,
+                  fontWeight: FontWeight.w700,
+                  fontSize: 10.5,
+                ),
+              ),
+            ),
+            if (active) ...[
+              const SizedBox(width: 3),
+              Icon(
+                asc ? Icons.arrow_upward_rounded : Icons.arrow_downward_rounded,
+                size: 12,
+                color: context.colors.primary,
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Table body + pagination
+// ─────────────────────────────────────────────────────────────────────────────
+
+class _TableBody extends StatelessWidget {
+  final List<AdminUser> users;
+  final int rangeFrom;
+  final int rangeTo;
+  final int total;
+  final int page;
+  final int pageCount;
+  final ValueChanged<int> onPage;
+
+  const _TableBody({
+    required this.users,
+    required this.rangeFrom,
+    required this.rangeTo,
+    required this.total,
+    required this.page,
+    required this.pageCount,
+    required this.onPage,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final u = t.admin_console.users;
+    return Column(
+      children: [
+        Expanded(
+          child: ListView.separated(
+            padding: const EdgeInsets.only(bottom: KasySpacing.xs),
+            itemCount: users.length,
+            separatorBuilder: (_, _) => Divider(
+              height: 1,
+              thickness: 1,
+              indent: KasySpacing.pageHorizontalGutter,
+              endIndent: KasySpacing.pageHorizontalGutter,
+              color: context.colors.outline.withValues(alpha: 0.18),
+            ),
+            itemBuilder: (_, i) => _UserRow(user: users[i]),
+          ),
+        ),
+        Container(
+          decoration: BoxDecoration(
+            border: Border(
+              top: BorderSide(
+                color: context.colors.outline.withValues(alpha: 0.3),
+              ),
+            ),
+          ),
+          padding: EdgeInsets.fromLTRB(
+            KasySpacing.pageHorizontalGutter,
+            KasySpacing.smd,
+            KasySpacing.pageHorizontalGutter,
+            MediaQuery.paddingOf(context).bottom + KasySpacing.xl,
+          ),
+          child: LayoutBuilder(
+            builder: (context, c) {
+              final pager = _Pagination(
+                page: page,
+                pageCount: pageCount,
+                onPage: onPage,
+              );
+              final label = Text(
+                u.results(from: rangeFrom, to: rangeTo, total: total),
+                style: context.textTheme.bodySmall?.copyWith(
+                  color: context.colors.muted,
+                ),
+              );
+              if (c.maxWidth < 460) {
+                return Column(
+                  children: [
+                    pager,
+                    const SizedBox(height: KasySpacing.sm),
+                    label,
+                  ],
+                );
+              }
+              return Row(
+                children: [label, const Spacer(), pager],
+              );
+            },
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _Pagination extends StatelessWidget {
+  final int page;
+  final int pageCount;
+  final ValueChanged<int> onPage;
+  const _Pagination({
+    required this.page,
+    required this.pageCount,
+    required this.onPage,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final u = t.admin_console.users;
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        _NavBtn(
+          label: u.prev,
+          icon: Icons.chevron_left_rounded,
+          leading: true,
+          enabled: page > 0,
+          onTap: () => onPage(page - 1),
+        ),
+        const SizedBox(width: 6),
+        for (final item in _pageWindow(pageCount, page))
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 2),
+            child: item == null
+                ? const _Ellipsis()
+                : _PageNum(
+                    number: item + 1,
+                    selected: item == page,
+                    onTap: () => onPage(item),
+                  ),
+          ),
+        const SizedBox(width: 6),
+        _NavBtn(
+          label: u.next,
+          icon: Icons.chevron_right_rounded,
+          leading: false,
+          enabled: page < pageCount - 1,
+          onTap: () => onPage(page + 1),
+        ),
+      ],
+    );
+  }
+}
+
+/// Page-number window: first, last, current ±1, with ellipses between gaps.
+List<int?> _pageWindow(int count, int current) {
+  if (count <= 7) return [for (var i = 0; i < count; i++) i];
+  final out = <int?>[];
+  out.add(0);
+  if (current > 2) out.add(null);
+  final start = max(1, current - 1);
+  final end = min(count - 2, current + 1);
+  for (var i = start; i <= end; i++) {
+    out.add(i);
+  }
+  if (current < count - 3) out.add(null);
+  out.add(count - 1);
+  return out;
+}
+
+class _PageNum extends StatelessWidget {
+  final int number;
+  final bool selected;
+  final VoidCallback onTap;
+  const _PageNum({
+    required this.number,
+    required this.selected,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: selected ? null : onTap,
+      borderRadius: BorderRadius.circular(KasyRadius.sm),
+      child: Container(
+        constraints: const BoxConstraints(minWidth: 32),
+        height: 32,
+        alignment: Alignment.center,
+        padding: const EdgeInsets.symmetric(horizontal: 6),
+        decoration: BoxDecoration(
+          color: selected ? context.colors.primary : context.colors.surface,
+          borderRadius: BorderRadius.circular(KasyRadius.sm),
+          border: Border.all(
+            color: selected
+                ? context.colors.primary
+                : context.colors.outline.withValues(alpha: 0.5),
+          ),
+        ),
+        child: Text(
+          '$number',
+          style: context.textTheme.labelMedium?.copyWith(
+            color: selected ? context.colors.onPrimary : context.colors.onSurface,
+            fontWeight: FontWeight.w700,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _Ellipsis extends StatelessWidget {
+  const _Ellipsis();
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 24,
+      height: 32,
+      child: Center(
+        child: Text(
+          '…',
+          style: context.textTheme.labelMedium?.copyWith(
+            color: context.colors.muted,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _NavBtn extends StatelessWidget {
+  final String label;
+  final IconData icon;
+  final bool leading;
+  final bool enabled;
+  final VoidCallback onTap;
+  const _NavBtn({
+    required this.label,
+    required this.icon,
+    required this.leading,
+    required this.enabled,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final color =
+        enabled ? context.colors.onSurface : context.colors.muted.withValues(alpha: 0.5);
+    final text = Text(
+      label,
+      style: context.textTheme.labelMedium?.copyWith(
+        color: color,
+        fontWeight: FontWeight.w600,
+      ),
+    );
+    final ic = Icon(icon, size: 18, color: color);
+    return InkWell(
+      onTap: enabled ? onTap : null,
+      borderRadius: BorderRadius.circular(KasyRadius.sm),
+      child: Container(
+        height: 32,
+        padding: const EdgeInsets.symmetric(horizontal: 8),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(KasyRadius.sm),
+          border: Border.all(
+            color: context.colors.outline.withValues(alpha: enabled ? 0.5 : 0.25),
+          ),
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: leading ? [ic, const SizedBox(width: 2), text] : [text, const SizedBox(width: 2), ic],
+        ),
+      ),
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// User row
+// ─────────────────────────────────────────────────────────────────────────────
+
+class _UserRow extends StatelessWidget {
+  final AdminUser user;
+  const _UserRow({required this.user});
+
+  @override
+  Widget build(BuildContext context) {
+    final u = t.admin_console.users;
+    final hasName = user.name?.isNotEmpty == true;
+    final hasEmail = user.email?.isNotEmpty == true;
+
+    final String primaryText;
+    final String? subText;
+    final bool isAnonymous;
+    if (hasName) {
+      primaryText = user.name!;
+      subText = hasEmail ? user.email : null;
+      isAnonymous = false;
+    } else if (hasEmail) {
+      primaryText = user.email!;
+      subText = null;
+      isAnonymous = false;
+    } else {
+      primaryText = u.anonymous;
+      subText = null;
+      isAnonymous = true;
+    }
+
+    return Padding(
+      padding: const EdgeInsets.symmetric(
+        horizontal: KasySpacing.pageHorizontalGutter,
+        vertical: 10,
+      ),
+      child: Row(
+        children: [
+          // ── User cell
+          Expanded(
+            flex: 5,
+            child: Row(
+              children: [
+                KasyAvatar(
+                  diameter: 34,
+                  initials: hasName ? user.name : (hasEmail ? user.email : null),
+                  tone: _avatarTone(
+                    hasName ? user.name : (hasEmail ? user.email : null),
+                  ),
+                ),
+                const SizedBox(width: 10),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      Text(
+                        primaryText,
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                        style: context.textTheme.bodyMedium?.copyWith(
+                          color: isAnonymous
+                              ? context.colors.muted
+                              : context.colors.onSurface,
+                          fontWeight:
+                              isAnonymous ? FontWeight.w400 : FontWeight.w600,
+                          fontStyle:
+                              isAnonymous ? FontStyle.italic : FontStyle.normal,
+                        ),
+                      ),
+                      if (subText != null) ...[
+                        const SizedBox(height: 1),
+                        Text(
+                          subText,
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis,
+                          style: context.textTheme.bodySmall?.copyWith(
+                            color: context.colors.muted,
+                          ),
+                        ),
+                      ],
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          ),
+          // ── Status cell
+          Expanded(
+            flex: 2,
+            child: Align(
+              alignment: Alignment.centerLeft,
+              child: KasyStatusTag(
+                label: hasEmail ? u.status_active : u.status_inactive,
+                tone: hasEmail
+                    ? KasyStatusTagTone.success
+                    : KasyStatusTagTone.neutral,
+              ),
+            ),
+          ),
+          // ── Plan cell
+          Expanded(
+            flex: 2,
+            child: Align(
+              alignment: Alignment.centerLeft,
+              child: KasyStatusTag(
+                label: user.subscriber ? u.plan_subscriber : u.plan_free,
+                tone: user.subscriber
+                    ? KasyStatusTagTone.primary
+                    : KasyStatusTagTone.neutral,
+              ),
+            ),
+          ),
+          // ── Joined cell
+          SizedBox(
+            width: 88,
+            child: Text(
+              user.createdAt != null ? _formatDate(user.createdAt!) : '—',
+              style: context.textTheme.bodySmall?.copyWith(
+                color: context.colors.muted,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  String _formatDate(DateTime dt) {
+    final d = dt.toLocal();
+    return '${d.day.toString().padLeft(2, '0')}/'
+        '${d.month.toString().padLeft(2, '0')}/'
+        '${d.year.toString().substring(2)}';
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Avatar tone — a stable design-system tone per user (variety, not random).
+// ─────────────────────────────────────────────────────────────────────────────
+
+KasyAvatarTone _avatarTone(String? seed) {
+  if (seed == null || seed.trim().isEmpty) return KasyAvatarTone.neutral;
+  const tones = [
+    KasyAvatarTone.blue,
+    KasyAvatarTone.green,
+    KasyAvatarTone.orange,
+    KasyAvatarTone.red,
+    KasyAvatarTone.neutral,
+  ];
+  return tones[seed.trimLeft().codeUnitAt(0) % tones.length];
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Loading / empty / error states (big icon over text)
+// ─────────────────────────────────────────────────────────────────────────────
+
+class _CenteredState extends StatelessWidget {
+  final Widget icon;
+  final String title;
+  final String? subtitle;
+  final Widget? action;
+  const _CenteredState({
+    required this.icon,
+    required this.title,
+    this.subtitle,
+    this.action,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(KasySpacing.lg),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            icon,
+            const SizedBox(height: KasySpacing.md),
+            Text(
+              title,
+              textAlign: TextAlign.center,
+              style: context.textTheme.titleSmall?.copyWith(
+                color: context.colors.onSurface,
+                fontWeight: FontWeight.w700,
+              ),
+            ),
+            if (subtitle != null) ...[
+              const SizedBox(height: KasySpacing.xs),
+              Text(
+                subtitle!,
+                textAlign: TextAlign.center,
+                style: context.textTheme.bodySmall?.copyWith(
+                  color: context.colors.muted,
+                  height: 1.4,
+                ),
+              ),
+            ],
+            if (action != null) ...[
+              const SizedBox(height: KasySpacing.md),
+              action!,
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _IconBubble extends StatelessWidget {
+  final IconData icon;
+  const _IconBubble(this.icon);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 64,
+      height: 64,
+      decoration: BoxDecoration(
+        color: context.colors.surfaceNeutralSoft,
+        shape: BoxShape.circle,
+      ),
+      child: Icon(icon, size: 30, color: context.colors.muted),
+    );
+  }
+}
+
+class _LoadingState extends StatelessWidget {
+  const _LoadingState();
+
+  @override
+  Widget build(BuildContext context) {
+    return _CenteredState(
+      icon: const SizedBox(
+        width: 40,
+        height: 40,
+        child: CircularProgressIndicator.adaptive(strokeWidth: 2.5),
+      ),
+      title: t.admin_console.users.loading,
+    );
+  }
+}
+
+class _EmptyState extends StatelessWidget {
+  final bool searching;
+  const _EmptyState({required this.searching});
+
+  @override
+  Widget build(BuildContext context) {
+    final u = t.admin_console.users;
+    return _CenteredState(
+      icon: _IconBubble(
+        searching ? Icons.search_off_rounded : Icons.people_outline_rounded,
+      ),
+      title: searching ? u.empty_search : u.empty,
+      subtitle: searching ? u.empty_search_hint : null,
+    );
+  }
+}
+
+class _ErrorState extends StatelessWidget {
+  final VoidCallback onRetry;
+  const _ErrorState({required this.onRetry});
+
+  @override
+  Widget build(BuildContext context) {
+    final u = t.admin_console.users;
+    return _CenteredState(
+      icon: const _IconBubble(Icons.error_outline_rounded),
+      title: u.title,
+      subtitle: u.error,
+      action: InkWell(
+        onTap: onRetry,
+        borderRadius: BorderRadius.circular(KasyRadius.sm),
+        child: Container(
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+          decoration: BoxDecoration(
+            color: context.colors.surface,
+            borderRadius: BorderRadius.circular(KasyRadius.sm),
+            border: Border.all(
+              color: context.colors.outline.withValues(alpha: 0.5),
+            ),
+          ),
+          child: Text(
+            u.retry,
+            style: context.textTheme.labelMedium?.copyWith(
+              color: context.colors.onSurface,
+              fontWeight: FontWeight.w600,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Horizontal centering with max-width (keeps Expanded children working)
+// ─────────────────────────────────────────────────────────────────────────────
+
+class _HCenter extends StatelessWidget {
+  final Widget child;
+  const _HCenter({required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (_, constraints) {
+        final double hPad = max(0, (constraints.maxWidth - _maxWidth) / 2);
+        return Padding(
+          padding: EdgeInsets.symmetric(horizontal: hPad),
+          child: child,
+        );
+      },
+    );
+  }
+}