refactor(ui): refine admin console controls
This commit is contained in:
parent
944ae498d2
commit
57b8be698d
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user