bytelyst/learning_ai_invt_trdg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): refine admin console controls

Browse Source
This commit is contained in:
Saravana Achu Mac 2026-05-09 01:16:06 -07:00
parent 944ae498d2
commit 57b8be698d
2 changed files with 165 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
web/src/index.css
View File

@ -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 { .ux-field-label {
color: var(--muted-foreground); color: var(--muted-foreground);
font-size: 11px; font-size: 11px;

91
web/src/tabs/AdminTab.tsx
View File

@ -17,6 +17,7 @@ import { fetchDynamicConfigItems, upsertDynamicConfigItems } from '../lib/dynami
import { getPlatformAccessToken } from '../lib/authSession'; import { getPlatformAccessToken } from '../lib/authSession';
import { createRequestId } from '../../../shared/request-id.js'; import { createRequestId } from '../../../shared/request-id.js';
import { tradingRuntime } from '../lib/runtime'; import { tradingRuntime } from '../lib/runtime';
import { Button } from '../components/ui/Primitives';
interface AdminTabProps { interface AdminTabProps {
botState: BotState; botState: BotState;
@ -373,13 +374,16 @@ export const AdminTab = ({ botState, socket }: AdminTabProps) => {
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<ShieldAlert size={14} className="text-orange-400" /> <ShieldAlert size={14} className="text-orange-400" />
<h3 className="text-xs font-bold text-zinc-300 uppercase tracking-wider">Operational Events</h3> <h3 className="text-xs font-bold text-zinc-300 uppercase tracking-wider">Operational Events</h3>
<button <Button
type="button"
onClick={handleClearEvents} onClick={handleClearEvents}
disabled={isControlLoading} 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 Clear History
</button> </Button>
</div> </div>
<span className="text-[10px] text-zinc-500 font-mono"> <span className="text-[10px] text-zinc-500 font-mono">
Buffer: {operationalEvents.length || 0} events Buffer: {operationalEvents.length || 0} events
@ -778,30 +782,30 @@ export const AdminTab = ({ botState, socket }: AdminTabProps) => {
{/* Control Buttons */} {/* Control Buttons */}
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<button <Button
type="button"
onClick={handlePauseTrading} onClick={handlePauseTrading}
disabled={isPaused || isControlLoading} 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 variant="outline"
? 'bg-zinc-800/50 border border-zinc-700/30 text-zinc-600 cursor-not-allowed' size="lg"
: 'bg-orange-500/10 border border-orange-500/20 text-orange-400 hover:bg-orange-500/20 hover:border-orange-500/30' className="admin-control-button admin-control-button--pause"
}`}
title={isPaused ? "Trading is already paused" : "Pause all new trade entries"} title={isPaused ? "Trading is already paused" : "Pause all new trade entries"}
> >
<Pause size={16} /> <Pause size={16} />
{isControlLoading && !isPaused ? 'Pausing...' : 'Pause Auto Trading'} {isControlLoading && !isPaused ? 'Pausing...' : 'Pause Auto Trading'}
</button> </Button>
<button <Button
type="button"
onClick={handleResumeTrading} onClick={handleResumeTrading}
disabled={!isPaused || isControlLoading} 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 variant="outline"
? 'bg-zinc-800/50 border border-zinc-700/30 text-zinc-600 cursor-not-allowed' size="lg"
: 'bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 hover:bg-emerald-500/20 hover:border-emerald-500/30' className="admin-control-button admin-control-button--resume"
}`}
title={!isPaused ? "Trading is already running" : "Resume automated trade execution"} title={!isPaused ? "Trading is already running" : "Resume automated trade execution"}
> >
<Play size={16} /> <Play size={16} />
{isControlLoading && isPaused ? 'Resuming...' : 'Resume Auto Trading'} {isControlLoading && isPaused ? 'Resuming...' : 'Resume Auto Trading'}
</button> </Button>
</div> </div>
{/* Error Display */} {/* 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> <p className="text-[10px] text-zinc-500">Persistent sync of bot state to Supabase</p>
</div> </div>
<button <button
type="button"
role="switch"
aria-checked={dbSyncEnabled}
aria-label="Toggle state snapshots"
onClick={() => setDbSyncEnabled(!dbSyncEnabled)} 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' 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>
</div> </div>
<button <Button
type="button"
onClick={handleUpdateDbSync} onClick={handleUpdateDbSync}
disabled={isDbSyncLoading} disabled={isDbSyncLoading}
className={`w-full py-2.5 rounded-xl font-bold text-[11px] uppercase tracking-widest transition-all ${isDbSyncLoading variant="outline"
? 'bg-zinc-800 text-zinc-600 cursor-not-allowed' size="lg"
: 'bg-cyan-500/10 border border-cyan-500/20 text-cyan-400 hover:bg-cyan-500/20 shadow-lg shadow-cyan-500/5' className="w-full"
}`}
> >
{isDbSyncLoading ? 'Synchronizing...' : 'Apply DB Sync Parameters'} {isDbSyncLoading ? 'Synchronizing...' : 'Apply DB Sync Parameters'}
</button> </Button>
</div> </div>
</section> </section>
</> </>
@ -905,30 +913,29 @@ export const AdminTab = ({ botState, socket }: AdminTabProps) => {
if (profile?.role !== 'admin') { if (profile?.role !== 'admin') {
return ( 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} /> <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> <p className="text-zinc-500">You do not have administrative privileges to access this area.</p>
</div> </div>
); );
} }
return ( return (
<div className="space-y-6 max-w-5xl mx-auto"> <div className="admin-console">
{/* Header */} <header className="admin-console-header">
<header className="flex items-center justify-between"> <div className="admin-console-brand">
<div className="flex items-center gap-3"> <div className={`admin-console-icon ${adminActiveAccentClass}`}>
<div className={`w-10 h-10 rounded-xl ${adminActiveAccentClass} flex items-center justify-center`}>
<ShieldCheck size={18} className="text-[var(--bl-success)]" /> <ShieldCheck size={18} className="text-[var(--bl-success)]" />
</div> </div>
<div> <div>
<h2 className="text-lg font-bold text-white tracking-tight">Admin Panel</h2> <h2>Admin Panel</h2>
<p className="text-[10px] text-zinc-500">System configuration & rule pipeline</p> <p>System configuration, rule pipeline, and runtime controls.</p>
</div> </div>
</div> </div>
<div className="flex items-center gap-3"> <div className="admin-status-row">
<div className={`flex items-center gap-1.5 px-3 py-1.5 ${adminPanelClass} rounded-lg`}> <div className={`admin-status-pill ${adminPanelClass}`}>
{botConfig ? ( {botConfig ? (
<> <>
<Wifi size={11} className="text-emerald-500" /> <Wifi size={11} className="text-emerald-500" />
@ -942,8 +949,7 @@ export const AdminTab = ({ botState, socket }: AdminTabProps) => {
)} )}
</div> </div>
{/* System Status Badge */} <div className={`admin-status-pill ${adminPanelClass}`}>
<div className={`flex items-center gap-1.5 px-3 py-1.5 ${adminPanelClass} rounded-lg`}>
<div className={`w-1.5 h-1.5 rounded-full ${systemBadgeDotClass}`} /> <div className={`w-1.5 h-1.5 rounded-full ${systemBadgeDotClass}`} />
<span className={`text-[10px] font-bold uppercase tracking-widest ${systemBadgeTextClass}`}> <span className={`text-[10px] font-bold uppercase tracking-widest ${systemBadgeTextClass}`}>
System: {systemBadgeLabel} System: {systemBadgeLabel}
@ -952,28 +958,27 @@ export const AdminTab = ({ botState, socket }: AdminTabProps) => {
</div> </div>
</header> </header>
{/* Sub Navigation */} <nav className={`admin-subnav ${adminNavigationClass}`} aria-label="Admin sections">
<nav className={`flex gap-1 ${adminNavigationClass} rounded-xl p-1`}>
{subTabs.map((tab) => { {subTabs.map((tab) => {
const Icon = tab.icon; const Icon = tab.icon;
const isActive = subTab === tab.id; const isActive = subTab === tab.id;
return ( return (
<button <Button
key={tab.id} key={tab.id}
type="button"
onClick={() => setSubTab(tab.id)} 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 variant="ghost"
? 'bg-white/[0.07] text-white' size="sm"
: 'text-zinc-500 hover:text-zinc-300 hover:bg-white/[0.02]' className="admin-subnav-button"
}`} data-active={isActive}
> >
<Icon size={13} className={isActive ? 'text-[var(--bl-success)]' : ''} /> <Icon size={13} className={isActive ? 'text-[var(--bl-success)]' : ''} />
<span>{tab.label}</span> <span>{tab.label}</span>
</button> </Button>
); );
})} })}
</nav> </nav>
{/* Content */}
<main className="min-h-[300px]"> <main className="min-h-[300px]">
{renderSubContent()} {renderSubContent()}
</main> </main>