From 57b8be698dbbecb7340396e9e1654f19c0942685 Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Sat, 9 May 2026 01:16:06 -0700
Subject: [PATCH] refactor(ui): refine admin console controls

---
 web/src/index.css         | 117 ++++++++++++++++++++++++++++++++++++++
 web/src/tabs/AdminTab.tsx |  91 +++++++++++++++--------------
 2 files changed, 165 insertions(+), 43 deletions(-)

diff --git a/web/src/index.css b/web/src/index.css
index 8cd26fe..48d6961 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -825,6 +825,123 @@ body {
   }
 }
 
+.admin-console {
+  width: min(100%, 1120px);
+  margin: 0 auto;
+  display: grid;
+  gap: 24px;
+}
+
+.admin-console-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.admin-console-brand {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 14px;
+}
+
+.admin-console-icon {
+  display: grid;
+  width: 44px;
+  height: 44px;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 14px;
+}
+
+.admin-console-brand h2 {
+  margin: 0;
+  color: var(--foreground);
+  font-size: 20px;
+  font-weight: 760;
+  line-height: 1.2;
+}
+
+.admin-console-brand p {
+  margin: 5px 0 0;
+  color: var(--muted-foreground);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.admin-status-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.admin-status-pill {
+  display: inline-flex;
+  min-height: 34px;
+  align-items: center;
+  gap: 8px;
+  border-radius: 999px;
+  padding: 0 12px;
+}
+
+.admin-subnav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  border-radius: 16px;
+  padding: 6px;
+}
+
+.admin-subnav-button {
+  gap: 8px;
+  border-radius: 12px;
+}
+
+.admin-subnav-button[data-active='true'] {
+  background: var(--card);
+  color: var(--foreground);
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
+}
+
+.admin-control-button {
+  width: 100%;
+  gap: 8px;
+}
+
+.admin-control-button--pause:not(:disabled) {
+  border-color: color-mix(in oklab, var(--bl-warning) 28%, var(--border));
+  background: color-mix(in oklab, var(--bl-warning) 10%, transparent);
+  color: var(--bl-warning);
+}
+
+.admin-control-button--resume:not(:disabled) {
+  border-color: color-mix(in oklab, var(--bl-success) 28%, var(--border));
+  background: color-mix(in oklab, var(--bl-success) 10%, transparent);
+  color: var(--bl-success);
+}
+
+@media (max-width: 760px) {
+  .admin-console-header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .admin-status-row {
+    justify-content: flex-start;
+  }
+
+  .admin-subnav {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .admin-subnav-button {
+    justify-content: flex-start;
+  }
+}
+
 .ux-field-label {
   color: var(--muted-foreground);
   font-size: 11px;
diff --git a/web/src/tabs/AdminTab.tsx b/web/src/tabs/AdminTab.tsx
index 4be7fa7..0058421 100644
--- a/web/src/tabs/AdminTab.tsx
+++ b/web/src/tabs/AdminTab.tsx
@@ -17,6 +17,7 @@ import { fetchDynamicConfigItems, upsertDynamicConfigItems } from '../lib/dynami
 import { getPlatformAccessToken } from '../lib/authSession';
 import { createRequestId } from '../../../shared/request-id.js';
 import { tradingRuntime } from '../lib/runtime';
+import { Button } from '../components/ui/Primitives';
 
 interface AdminTabProps {
     botState: BotState;
@@ -373,13 +374,16 @@ export const AdminTab = ({ botState, socket }: AdminTabProps) => {
                                 <div className="flex items-center gap-3">
                                     <ShieldAlert size={14} className="text-orange-400" />
                                     <h3 className="text-xs font-bold text-zinc-300 uppercase tracking-wider">Operational Events</h3>
-                                    <button
+                                    <Button
+                                        type="button"
                                         onClick={handleClearEvents}
                                         disabled={isControlLoading}
-                                        className="ml-4 px-2 py-0.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-400 hover:text-white rounded text-[10px] transition-colors disabled:opacity-50"
+                                        variant="ghost"
+                                        size="sm"
+                                        className="ml-4 min-h-7 px-2 text-[10px]"
                                     >
                                         Clear History
-                                    </button>
+                                    </Button>
                                 </div>
                                 <span className="text-[10px] text-zinc-500 font-mono">
                                     Buffer: {operationalEvents.length || 0} events
@@ -778,30 +782,30 @@ export const AdminTab = ({ botState, socket }: AdminTabProps) => {
 
                                     {/* Control Buttons */}
                                     <div className="grid grid-cols-2 gap-3">
-                                        <button
+                                        <Button
+                                            type="button"
                                             onClick={handlePauseTrading}
                                             disabled={isPaused || isControlLoading}
-                                            className={`flex items-center justify-center gap-2 px-4 py-3 rounded-xl font-bold text-sm transition-all ${isPaused || isControlLoading
-                                                ? 'bg-zinc-800/50 border border-zinc-700/30 text-zinc-600 cursor-not-allowed'
-                                                : 'bg-orange-500/10 border border-orange-500/20 text-orange-400 hover:bg-orange-500/20 hover:border-orange-500/30'
-                                                }`}
+                                            variant="outline"
+                                            size="lg"
+                                            className="admin-control-button admin-control-button--pause"
                                             title={isPaused ? "Trading is already paused" : "Pause all new trade entries"}
                                         >
                                             <Pause size={16} />
                                             {isControlLoading && !isPaused ? 'Pausing...' : 'Pause Auto Trading'}
-                                        </button>
-                                        <button
+                                        </Button>
+                                        <Button
+                                            type="button"
                                             onClick={handleResumeTrading}
                                             disabled={!isPaused || isControlLoading}
-                                            className={`flex items-center justify-center gap-2 px-4 py-3 rounded-xl font-bold text-sm transition-all ${!isPaused || isControlLoading
-                                                ? 'bg-zinc-800/50 border border-zinc-700/30 text-zinc-600 cursor-not-allowed'
-                                                : 'bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 hover:bg-emerald-500/20 hover:border-emerald-500/30'
-                                                }`}
+                                            variant="outline"
+                                            size="lg"
+                                            className="admin-control-button admin-control-button--resume"
                                             title={!isPaused ? "Trading is already running" : "Resume automated trade execution"}
                                         >
                                             <Play size={16} />
                                             {isControlLoading && isPaused ? 'Resuming...' : 'Resume Auto Trading'}
-                                        </button>
+                                        </Button>
                                     </div>
 
                                     {/* Error Display */}
@@ -843,6 +847,10 @@ export const AdminTab = ({ botState, socket }: AdminTabProps) => {
                                                 <p className="text-[10px] text-zinc-500">Persistent sync of bot state to Supabase</p>
                                             </div>
                                             <button
+                                                type="button"
+                                                role="switch"
+                                                aria-checked={dbSyncEnabled}
+                                                aria-label="Toggle state snapshots"
                                                 onClick={() => setDbSyncEnabled(!dbSyncEnabled)}
                                                 className={`relative inline-flex h-5 w-10 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${dbSyncEnabled ? 'bg-cyan-500' : 'bg-zinc-700'
                                                     }`}
@@ -884,16 +892,16 @@ export const AdminTab = ({ botState, socket }: AdminTabProps) => {
                                             </div>
                                         </div>
 
-                                        <button
+                                        <Button
+                                            type="button"
                                             onClick={handleUpdateDbSync}
                                             disabled={isDbSyncLoading}
-                                            className={`w-full py-2.5 rounded-xl font-bold text-[11px] uppercase tracking-widest transition-all ${isDbSyncLoading
-                                                ? 'bg-zinc-800 text-zinc-600 cursor-not-allowed'
-                                                : 'bg-cyan-500/10 border border-cyan-500/20 text-cyan-400 hover:bg-cyan-500/20 shadow-lg shadow-cyan-500/5'
-                                                }`}
+                                            variant="outline"
+                                            size="lg"
+                                            className="w-full"
                                         >
                                             {isDbSyncLoading ? 'Synchronizing...' : 'Apply DB Sync Parameters'}
-                                        </button>
+                                        </Button>
                                     </div>
                                 </section>
                             </>
@@ -905,30 +913,29 @@ export const AdminTab = ({ botState, socket }: AdminTabProps) => {
 
     if (profile?.role !== 'admin') {
         return (
-            <div className={`p-8 text-center ${adminPanelClass} border-red-500/20 rounded-2xl`}>
+            <div className="settings-access-panel text-center">
                 <XCircle className="mx-auto text-red-500 mb-4" size={48} />
-                <h2 className="text-xl font-bold text-white mb-2">Access Denied</h2>
+                <h2>Access Denied</h2>
                 <p className="text-zinc-500">You do not have administrative privileges to access this area.</p>
             </div>
         );
     }
 
     return (
-        <div className="space-y-6 max-w-5xl mx-auto">
-            {/* Header */}
-            <header className="flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                    <div className={`w-10 h-10 rounded-xl ${adminActiveAccentClass} flex items-center justify-center`}>
+        <div className="admin-console">
+            <header className="admin-console-header">
+                <div className="admin-console-brand">
+                    <div className={`admin-console-icon ${adminActiveAccentClass}`}>
                         <ShieldCheck size={18} className="text-[var(--bl-success)]" />
                     </div>
                     <div>
-                        <h2 className="text-lg font-bold text-white tracking-tight">Admin Panel</h2>
-                        <p className="text-[10px] text-zinc-500">System configuration & rule pipeline</p>
+                        <h2>Admin Panel</h2>
+                        <p>System configuration, rule pipeline, and runtime controls.</p>
                     </div>
                 </div>
 
-                <div className="flex items-center gap-3">
-                    <div className={`flex items-center gap-1.5 px-3 py-1.5 ${adminPanelClass} rounded-lg`}>
+                <div className="admin-status-row">
+                    <div className={`admin-status-pill ${adminPanelClass}`}>
                         {botConfig ? (
                             <>
                                 <Wifi size={11} className="text-emerald-500" />
@@ -942,8 +949,7 @@ export const AdminTab = ({ botState, socket }: AdminTabProps) => {
                         )}
                     </div>
 
-                    {/* System Status Badge */}
-                    <div className={`flex items-center gap-1.5 px-3 py-1.5 ${adminPanelClass} rounded-lg`}>
+                    <div className={`admin-status-pill ${adminPanelClass}`}>
                         <div className={`w-1.5 h-1.5 rounded-full ${systemBadgeDotClass}`} />
                         <span className={`text-[10px] font-bold uppercase tracking-widest ${systemBadgeTextClass}`}>
                             System: {systemBadgeLabel}
@@ -952,28 +958,27 @@ export const AdminTab = ({ botState, socket }: AdminTabProps) => {
                 </div>
             </header>
 
-            {/* Sub Navigation */}
-            <nav className={`flex gap-1 ${adminNavigationClass} rounded-xl p-1`}>
+            <nav className={`admin-subnav ${adminNavigationClass}`} aria-label="Admin sections">
                 {subTabs.map((tab) => {
                     const Icon = tab.icon;
                     const isActive = subTab === tab.id;
                     return (
-                        <button
+                        <Button
                             key={tab.id}
+                            type="button"
                             onClick={() => setSubTab(tab.id)}
-                            className={`flex items-center gap-2 px-4 py-2.5 rounded-lg text-[11px] font-bold transition-all duration-200 ${isActive
-                                ? 'bg-white/[0.07] text-white'
-                                : 'text-zinc-500 hover:text-zinc-300 hover:bg-white/[0.02]'
-                                }`}
+                            variant="ghost"
+                            size="sm"
+                            className="admin-subnav-button"
+                            data-active={isActive}
                         >
                             <Icon size={13} className={isActive ? 'text-[var(--bl-success)]' : ''} />
                             <span>{tab.label}</span>
-                        </button>
+                        </Button>
                     );
                 })}
             </nav>
 
-            {/* Content */}
             <main className="min-h-[300px]">
                 {renderSubContent()}
             </main>