Add server, backup, agent, whatsapp status tabs
This commit is contained in:
Neo
605
app/page.tsx
605
app/page.tsx
@@ -2,18 +2,24 @@
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
// Types
|
||||
type TaskStatus = 'todo' | 'in-progress' | 'done';
|
||||
type Task = { id: string; title: string; status: TaskStatus; assignee: string; priority?: string; created?: string };
|
||||
|
||||
type Task = { id: string; title: string; status: TaskStatus; assignee: string; priority?: string };
|
||||
type CronJob = { name: string; enabled: boolean; status: string };
|
||||
type Memory = { id: string; title: string; date: string; preview: string };
|
||||
type ServerStatus = { cpu: string; ram: string; disk: string; uptime: string; containers: string };
|
||||
type Backup = { name: string; status: string; lastRun: string };
|
||||
type Agent = { name: string; role: string; status: string };
|
||||
type WhatsAppStatus = { status: string; chats: number; lastUpdate: string };
|
||||
|
||||
export default function MissionControl() {
|
||||
const [activeTab, setActiveTab] = useState('tasks');
|
||||
const [tasks, setTasks] = useState<Task[]>([]);
|
||||
const [crons, setCrons] = useState<CronJob[]>([]);
|
||||
const [memories, setMemories] = useState<Memory[]>([]);
|
||||
const [server, setServer] = useState<ServerStatus | null>(null);
|
||||
const [backups, setBackups] = useState<Backup[]>([]);
|
||||
const [agents, setAgents] = useState<Agent[]>([]);
|
||||
const [whatsapp, setWhatsapp] = useState<WhatsAppStatus | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
@@ -21,14 +27,22 @@ export default function MissionControl() {
|
||||
setMounted(true);
|
||||
async function fetchData() {
|
||||
try {
|
||||
const [tasksRes, cronsRes, memoryRes] = await Promise.all([
|
||||
const [tasksRes, cronsRes, memoryRes, serverRes, backupsRes, agentsRes, waRes] = await Promise.all([
|
||||
fetch('/api/data?type=tasks'),
|
||||
fetch('/api/data?type=crons'),
|
||||
fetch('/api/data?type=memory')
|
||||
fetch('/api/data?type=memory'),
|
||||
fetch('/api/data?type=server'),
|
||||
fetch('/api/data?type=backups'),
|
||||
fetch('/api/data?type=agents'),
|
||||
fetch('/api/data?type=whatsapp')
|
||||
]);
|
||||
setTasks(await tasksRes.json());
|
||||
setCrons(await cronsRes.json());
|
||||
setMemories(await memoryRes.json());
|
||||
setServer(await serverRes.json());
|
||||
setBackups(await backupsRes.json());
|
||||
setAgents(await agentsRes.json());
|
||||
setWhatsapp(await waRes.json());
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
@@ -38,149 +52,45 @@ export default function MissionControl() {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const tabs = ['tasks', 'crons', 'server', 'backups', 'agents', 'whatsapp', 'memory'];
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
background: '#0a0a0f',
|
||||
color: '#e4e4e7',
|
||||
fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
|
||||
position: 'relative',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
{/* Animated background */}
|
||||
<div style={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
background: `
|
||||
radial-gradient(ellipse at 20% 20%, rgba(120, 0, 255, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 80% 80%, rgba(255, 0, 80, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 50% 50%, rgba(0, 200, 255, 0.05) 0%, transparent 70%)
|
||||
`,
|
||||
pointerEvents: 'none',
|
||||
zIndex: 0
|
||||
}} />
|
||||
|
||||
{/* Grid overlay */}
|
||||
<div style={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: '50px 50px',
|
||||
pointerEvents: 'none',
|
||||
zIndex: 0
|
||||
}} />
|
||||
<div style={{ minHeight: '100vh', background: '#0a0a0f', color: '#e4e4e7', fontFamily: "'JetBrains Mono', monospace" }}>
|
||||
{/* Background */}
|
||||
<div style={{ position: 'fixed', inset: 0, background: 'radial-gradient(ellipse at 20% 20%, rgba(120,0,255,0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(255,0,80,0.1) 0%, transparent 50%)', pointerEvents: 'none', zIndex: 0 }} />
|
||||
|
||||
{/* Header */}
|
||||
<header style={{
|
||||
position: 'relative',
|
||||
zIndex: 10,
|
||||
padding: '15px',
|
||||
borderBottom: '1px solid rgba(255,255,255,0.08)',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backdropFilter: 'blur(10px)',
|
||||
background: 'rgba(10,10,15,0.8)'
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
|
||||
<div style={{
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '10px',
|
||||
background: 'linear-gradient(135deg, #ff0050 0%, #7800ff 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '20px',
|
||||
boxShadow: '0 0 30px rgba(255,0,80,0.4)'
|
||||
}}>
|
||||
⬡
|
||||
</div>
|
||||
<div>
|
||||
<h1 style={{
|
||||
fontSize: '1rem',
|
||||
fontWeight: 700,
|
||||
background: 'linear-gradient(90deg, #fff 0%, #a0a0a0 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
letterSpacing: '-0.5px'
|
||||
}}>
|
||||
MISSION CONTROL
|
||||
</h1>
|
||||
<p style={{ fontSize: '0.7rem', color: '#666', letterSpacing: '2px', textTransform: 'uppercase' }}>
|
||||
NodeCrew Operations Center
|
||||
</p>
|
||||
<header style={{ position: 'relative', zIndex: 10, padding: '15px', borderBottom: '1px solid rgba(255,255,255,0.08)', background: 'rgba(10,10,15,0.8)', backdropFilter: 'blur(10px)' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<div style={{ width: '32px', height: '32px', borderRadius: '8px', background: 'linear-gradient(135deg, #ff0050 0%, #7800ff 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '16px' }}>⬡</div>
|
||||
<h1 style={{ fontSize: '1rem', fontWeight: 700, background: 'linear-gradient(90deg, #fff 0%, #a0a0a0 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>MISSION CONTROL</h1>
|
||||
</div>
|
||||
<nav style={{ display: 'flex', gap: '3px', flexWrap: 'wrap' }}>
|
||||
{tabs.map(tab => (
|
||||
<button key={tab} onClick={() => setActiveTab(tab)} style={{ padding: '8px 12px', background: activeTab === tab ? 'rgba(255,0,80,0.2)' : 'transparent', border: activeTab === tab ? '1px solid rgba(255,0,80,0.3)' : '1px solid transparent', borderRadius: '6px', color: activeTab === tab ? '#ff0050' : '#666', cursor: 'pointer', fontSize: '0.65rem', textTransform: 'uppercase', letterSpacing: '0.5px' }}>{tab}</button>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<nav style={{ display: 'flex', gap: '5px' }}>
|
||||
{['tasks', 'crons', 'memory', 'team'].map((tab, i) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
style={{
|
||||
padding: '12px 24px',
|
||||
background: activeTab === tab
|
||||
? 'linear-gradient(135deg, rgba(255,0,80,0.2) 0%, rgba(120,0,255,0.2) 100%)'
|
||||
: 'transparent',
|
||||
border: activeTab === tab ? '1px solid rgba(255,0,80,0.3)' : '1px solid transparent',
|
||||
borderRadius: '8px',
|
||||
color: activeTab === tab ? '#ff0050' : '#666',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.75rem',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '1px',
|
||||
transition: 'all 0.3s ease',
|
||||
backdropFilter: 'blur(10px)'
|
||||
}}
|
||||
>
|
||||
{tab}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{/* Content */}
|
||||
<main style={{
|
||||
position: 'relative',
|
||||
zIndex: 10,
|
||||
padding: '15px',
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto'
|
||||
}}>
|
||||
{!mounted ? (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '50vh',
|
||||
flexDirection: 'column',
|
||||
gap: '10px'
|
||||
}}>
|
||||
<div style={{
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
border: '3px solid rgba(255,0,80,0.2)',
|
||||
borderTopColor: '#ff0050',
|
||||
borderRadius: '50%',
|
||||
animation: 'spin 1s linear infinite'
|
||||
}} />
|
||||
<main style={{ position: 'relative', zIndex: 10, padding: '15px', maxWidth: '1200px', margin: '0 auto' }}>
|
||||
{!mounted || loading ? (
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '50vh', flexDirection: 'column', gap: '15px' }}>
|
||||
<div style={{ width: '40px', height: '40px', border: '3px solid rgba(255,0,80,0.2)', borderTopColor: '#ff0050', borderRadius: '50%', animation: 'spin 1s linear infinite' }} />
|
||||
<style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
|
||||
<p style={{ color: '#666', fontSize: '0.8rem', letterSpacing: '2px' }}>INITIALIZING...</p>
|
||||
</div>
|
||||
) : loading ? (
|
||||
<div style={{ color: '#666', textAlign: 'center', padding: '100px 0' }}>
|
||||
Loading live data...
|
||||
<p style={{ color: '#666', fontSize: '0.7rem' }}>INITIALIZING...</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{activeTab === 'tasks' && <TasksBoard tasks={tasks} />}
|
||||
{activeTab === 'crons' && <CronMonitor crons={crons} />}
|
||||
{activeTab === 'server' && <ServerStatus server={server} />}
|
||||
{activeTab === 'backups' && <BackupStatus backups={backups} />}
|
||||
{activeTab === 'agents' && <AgentStatus agents={agents} />}
|
||||
{activeTab === 'whatsapp' && <WhatsAppStatus whatsapp={whatsapp} />}
|
||||
{activeTab === 'memory' && <MemoryVault memories={memories} />}
|
||||
{activeTab === 'team' && <Team />}
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
@@ -188,364 +98,141 @@ export default function MissionControl() {
|
||||
);
|
||||
}
|
||||
|
||||
// ============ TASKS BOARD ============
|
||||
function TasksBoard({ tasks }: { tasks: Task[] }) {
|
||||
const columns: { status: TaskStatus; label: string; color: string; bg: string }[] = [
|
||||
{ status: 'todo', label: 'Queued', color: '#fbbf24', bg: 'rgba(251, 191, 36, 0.1)' },
|
||||
{ status: 'in-progress', label: 'Active', color: '#ff0050', bg: 'rgba(255, 0, 80, 0.1)' },
|
||||
{ status: 'done', label: 'Complete', color: '#00ff88', bg: 'rgba(0, 255, 136, 0.1)' },
|
||||
const cols: { status: TaskStatus; label: string; color: string }[] = [
|
||||
{ status: 'todo', label: 'Queued', color: '#fbbf24' },
|
||||
{ status: 'in-progress', label: 'Active', color: '#ff0050' },
|
||||
{ status: 'done', label: 'Complete', color: '#00ff88' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '10px' }}>
|
||||
{columns.map((col, i) => (
|
||||
<div
|
||||
key={col.status}
|
||||
style={{
|
||||
background: 'rgba(20, 20, 30, 0.6)',
|
||||
borderRadius: '16px',
|
||||
padding: '25px',
|
||||
border: '1px solid rgba(255,255,255,0.05)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
animation: `fadeSlideIn 0.5s ease ${i * 0.1}s both`
|
||||
}}
|
||||
>
|
||||
<style>{`@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }`}</style>
|
||||
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
marginBottom: '25px',
|
||||
paddingBottom: '15px',
|
||||
borderBottom: '1px solid rgba(255,255,255,0.05)'
|
||||
}}>
|
||||
<div style={{
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
borderRadius: '50%',
|
||||
background: col.color,
|
||||
boxShadow: `0 0 20px ${col.color}`
|
||||
}} />
|
||||
<h3 style={{ color: col.color, fontSize: '0.8rem', letterSpacing: '2px', textTransform: 'uppercase' }}>
|
||||
{col.label}
|
||||
</h3>
|
||||
<span style={{
|
||||
marginLeft: 'auto',
|
||||
background: col.bg,
|
||||
color: col.color,
|
||||
padding: '4px 10px',
|
||||
borderRadius: '20px',
|
||||
fontSize: '0.7rem'
|
||||
}}>
|
||||
{tasks.filter(t => t.status === col.status).length}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
||||
{tasks.filter(t => t.status === col.status).map((task, j) => (
|
||||
<div
|
||||
key={task.id}
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.03)',
|
||||
borderRadius: '10px',
|
||||
padding: '15px',
|
||||
border: '1px solid rgba(255,255,255,0.05)',
|
||||
transition: 'all 0.2s ease',
|
||||
cursor: 'pointer',
|
||||
animation: `fadeIn 0.3s ease ${j * 0.05}s both`
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(255,255,255,0.06)';
|
||||
e.currentTarget.style.transform = 'translateX(5px)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(255,255,255,0.03)';
|
||||
e.currentTarget.style.transform = 'translateX(0)';
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: '0.9rem', color: '#e4e4e7', marginBottom: '8px' }}>
|
||||
{task.title}
|
||||
</p>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<span style={{
|
||||
fontSize: '0.65rem',
|
||||
color: '#666',
|
||||
background: 'rgba(255,255,255,0.05)',
|
||||
padding: '3px 8px',
|
||||
borderRadius: '4px'
|
||||
}}>
|
||||
@{task.assignee}
|
||||
</span>
|
||||
{task.priority && task.priority === 'high' && (
|
||||
<span style={{
|
||||
fontSize: '0.6rem',
|
||||
color: '#ff0050',
|
||||
border: '1px solid rgba(255,0,80,0.3)',
|
||||
padding: '2px 6px',
|
||||
borderRadius: '4px'
|
||||
}}>
|
||||
HIGH
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{tasks.filter(t => t.status === col.status).length === 0 && (
|
||||
<p style={{ color: '#444', fontSize: '0.8rem', textAlign: 'center', padding: '20px 0' }}>
|
||||
No tasks
|
||||
</p>
|
||||
)}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '15px' }}>
|
||||
{cols.map(col => (
|
||||
<div key={col.status} style={{ background: 'rgba(20,20,30,0.6)', borderRadius: '12px', padding: '15px', border: '1px solid rgba(255,255,255,0.05)' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '15px', paddingBottom: '10px', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
|
||||
<div style={{ width: '8px', height: '8px', borderRadius: '50%', background: col.color, boxShadow: `0 0 10px ${col.color}` }} />
|
||||
<span style={{ color: col.color, fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '1px' }}>{col.label}</span>
|
||||
<span style={{ marginLeft: 'auto', background: 'rgba(255,255,255,0.05)', padding: '2px 8px', borderRadius: '10px', fontSize: '0.65rem' }}>{tasks.filter(t => t.status === col.status).length}</span>
|
||||
</div>
|
||||
{tasks.filter(t => t.status === col.status).map(task => (
|
||||
<div key={task.id} style={{ background: 'rgba(255,255,255,0.03)', borderRadius: '8px', padding: '10px', marginBottom: '8px' }}>
|
||||
<p style={{ fontSize: '0.8rem', marginBottom: '5px' }}>{task.title}</p>
|
||||
<span style={{ fontSize: '0.6rem', color: '#666' }}>@{task.assignee}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
<style>{`@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ============ CRON MONITOR ============
|
||||
function CronMonitor({ crons }: { crons: CronJob[] }) {
|
||||
return (
|
||||
<div style={{
|
||||
background: 'rgba(20, 20, 30, 0.6)',
|
||||
borderRadius: '16px',
|
||||
padding: '30px',
|
||||
border: '1px solid rgba(255,255,255,0.05)',
|
||||
backdropFilter: 'blur(20px)'
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '15px',
|
||||
marginBottom: '30px'
|
||||
}}>
|
||||
<div style={{
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '10px',
|
||||
background: 'linear-gradient(135deg, #00c8ff 0%, #7800ff 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '18px'
|
||||
}}>
|
||||
⏱
|
||||
</div>
|
||||
<div>
|
||||
<h2 style={{ color: '#fff', fontSize: '1rem' }}>System Cron Jobs</h2>
|
||||
<p style={{ color: '#666', fontSize: '0.75rem' }}>{crons.length} active jobs</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '15px' }}>
|
||||
<div style={{ background: 'rgba(20,20,30,0.6)', borderRadius: '12px', padding: '15px', border: '1px solid rgba(255,255,255,0.05)' }}>
|
||||
<h2 style={{ fontSize: '0.9rem', marginBottom: '15px' }}>⏱ Cron Jobs ({crons.length})</h2>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '10px' }}>
|
||||
{crons.map((cron, i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.03)',
|
||||
borderRadius: '10px',
|
||||
padding: '15px 20px',
|
||||
border: '1px solid rgba(255,255,255,0.05)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: '0.85rem', color: '#e4e4e7' }}>{cron.name}</span>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<span style={{
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
background: cron.status === 'ok' ? '#00ff88' : '#ff0050',
|
||||
boxShadow: cron.status === 'ok' ? '0 0 10px #00ff88' : '0 0 10px #ff0050'
|
||||
}} />
|
||||
<span style={{
|
||||
fontSize: '0.7rem',
|
||||
color: cron.status === 'ok' ? '#00ff88' : '#ff0050',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '1px'
|
||||
}}>
|
||||
{cron.status}
|
||||
</span>
|
||||
</div>
|
||||
<div key={i} style={{ background: 'rgba(255,255,255,0.03)', borderRadius: '8px', padding: '12px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<span style={{ fontSize: '0.75rem' }}>{cron.name}</span>
|
||||
<span style={{ width: '6px', height: '6px', borderRadius: '50%', background: cron.status === 'ok' ? '#00ff88' : '#ff0050' }} />
|
||||
</div>
|
||||
))}
|
||||
{crons.length === 0 && (
|
||||
<p style={{ color: '#444', gridColumn: '1/-1', textAlign: 'center', padding: '40px' }}>
|
||||
No cron data available
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ============ MEMORY VAULT ============
|
||||
function MemoryVault({ memories }: { memories: Memory[] }) {
|
||||
const [search, setSearch] = useState('');
|
||||
const filtered = memories.filter(m =>
|
||||
m.title.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
|
||||
function ServerStatus({ server }: { server: ServerStatus | null }) {
|
||||
if (!server) return <p style={{ color: '#666' }}>Loading...</p>;
|
||||
return (
|
||||
<div>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '15px',
|
||||
marginBottom: '30px'
|
||||
}}>
|
||||
<div style={{
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '10px',
|
||||
background: 'linear-gradient(135deg, #ff0050 0%, #ff8800 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '18px'
|
||||
}}>
|
||||
💾
|
||||
</div>
|
||||
<div>
|
||||
<h2 style={{ color: '#fff', fontSize: '1rem' }}>Memory Vault</h2>
|
||||
<p style={{ color: '#666', fontSize: '0.75rem' }}>{memories.length} memories stored</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search memories..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '15px 20px',
|
||||
borderRadius: '10px',
|
||||
border: '1px solid rgba(255,255,255,0.1)',
|
||||
background: 'rgba(20, 20, 30, 0.6)',
|
||||
color: '#e4e4e7',
|
||||
fontSize: '0.9rem',
|
||||
marginBottom: '30px',
|
||||
outline: 'none',
|
||||
backdropFilter: 'blur(10px)'
|
||||
}}
|
||||
/>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '10px' }}>
|
||||
{filtered.map((mem, i) => (
|
||||
<div
|
||||
key={mem.id}
|
||||
style={{
|
||||
background: 'rgba(20, 20, 30, 0.6)',
|
||||
borderRadius: '12px',
|
||||
padding: '15px',
|
||||
border: '1px solid rgba(255,255,255,0.05)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
transition: 'all 0.3s ease',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(-5px)';
|
||||
e.currentTarget.style.boxShadow = '0 20px 40px rgba(0,0,0,0.3)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '10px',
|
||||
background: 'linear-gradient(135deg, rgba(120,0,255,0.3) 0%, rgba(255,0,80,0.3) 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '15px',
|
||||
fontSize: '16px'
|
||||
}}>
|
||||
📄
|
||||
</div>
|
||||
<h3 style={{ color: '#fff', fontSize: '0.95rem', marginBottom: '10px' }}>{mem.title}</h3>
|
||||
<p style={{ color: '#666', fontSize: '0.75rem', lineHeight: 1.6, marginBottom: '15px' }}>
|
||||
{mem.preview}...
|
||||
</p>
|
||||
<span style={{ color: '#444', fontSize: '0.65rem', letterSpacing: '1px' }}>
|
||||
{mem.date}
|
||||
</span>
|
||||
<div style={{ background: 'rgba(20,20,30,0.6)', borderRadius: '12px', padding: '15px', border: '1px solid rgba(255,255,255,0.05)' }}>
|
||||
<h2 style={{ fontSize: '0.9rem', marginBottom: '15px' }}>🖥 Server Status</h2>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '10px' }}>
|
||||
{Object.entries(server).map(([key, value]) => (
|
||||
<div key={key} style={{ background: 'rgba(255,255,255,0.03)', borderRadius: '8px', padding: '12px' }}>
|
||||
<p style={{ color: '#666', fontSize: '0.65rem', textTransform: 'uppercase', marginBottom: '5px' }}>{key}</p>
|
||||
<p style={{ fontSize: '0.85rem' }}>{value}</p>
|
||||
</div>
|
||||
))}
|
||||
{filtered.length === 0 && (
|
||||
<p style={{ color: '#444', gridColumn: '1/-1', textAlign: 'center', padding: '40px' }}>
|
||||
No memories found
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ============ TEAM ============
|
||||
function Team() {
|
||||
const members = [
|
||||
{ name: 'Jelena', role: 'Chief of Staff', status: 'online', avatar: '👩💼' },
|
||||
{ name: 'Neo', role: 'CTO / DevOps', status: 'online', avatar: '🖥️' },
|
||||
];
|
||||
|
||||
function BackupStatus({ backups }: { backups: Backup[] }) {
|
||||
return (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '10px' }}>
|
||||
{members.map((member, i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
background: 'rgba(20, 20, 30, 0.6)',
|
||||
borderRadius: '16px',
|
||||
padding: '30px',
|
||||
border: '1px solid rgba(255,255,255,0.05)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
width: '80px',
|
||||
height: '80px',
|
||||
borderRadius: '50%',
|
||||
background: 'linear-gradient(135deg, #7800ff 0%, #ff0050 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto 20px',
|
||||
fontSize: '32px',
|
||||
boxShadow: '0 0 40px rgba(120,0,255,0.3)'
|
||||
}}>
|
||||
{member.avatar}
|
||||
<div style={{ background: 'rgba(20,20,30,0.6)', borderRadius: '12px', padding: '15px', border: '1px solid rgba(255,255,255,0.05)' }}>
|
||||
<h2 style={{ fontSize: '0.9rem', marginBottom: '15px' }}>💾 Backup Status</h2>
|
||||
{backups.map((backup, i) => (
|
||||
<div key={i} style={{ background: 'rgba(255,255,255,0.03)', borderRadius: '8px', padding: '12px', marginBottom: '10px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div>
|
||||
<p style={{ fontSize: '0.85rem' }}>{backup.name}</p>
|
||||
<p style={{ fontSize: '0.65rem', color: '#666' }}>{backup.lastRun}</p>
|
||||
</div>
|
||||
<h3 style={{ color: '#fff', fontSize: '1.1rem', marginBottom: '5px' }}>{member.name}</h3>
|
||||
<p style={{ color: '#666', fontSize: '0.8rem', marginBottom: '15px' }}>{member.role}</p>
|
||||
<span style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
background: 'rgba(0,255,136,0.1)',
|
||||
color: '#00ff88',
|
||||
padding: '6px 12px',
|
||||
borderRadius: '20px',
|
||||
fontSize: '0.7rem'
|
||||
}}>
|
||||
<span style={{
|
||||
width: '6px',
|
||||
height: '6px',
|
||||
borderRadius: '50%',
|
||||
background: '#00ff88'
|
||||
}} />
|
||||
{member.status}
|
||||
</span>
|
||||
<span style={{ width: '8px', height: '8px', borderRadius: '50%', background: backup.status === 'ok' ? '#00ff88' : '#ff0050' }} />
|
||||
</div>
|
||||
))}
|
||||
{backups.length === 0 && <p style={{ color: '#666', fontSize: '0.8rem' }}>No backups found</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AgentStatus({ agents }: { agents: Agent[] }) {
|
||||
return (
|
||||
<div style={{ background: 'rgba(20,20,30,0.6)', borderRadius: '12px', padding: '15px', border: '1px solid rgba(255,255,255,0.05)' }}>
|
||||
<h2 style={{ fontSize: '0.9rem', marginBottom: '15px' }}>🤖 Agents</h2>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '10px' }}>
|
||||
{agents.map((agent, i) => (
|
||||
<div key={i} style={{ background: 'rgba(255,255,255,0.03)', borderRadius: '8px', padding: '15px', display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||||
<div style={{ width: '40px', height: '40px', borderRadius: '50%', background: 'linear-gradient(135deg, #7800ff 0%, #ff0050 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '16px' }}>{agent.name[0]}</div>
|
||||
<div>
|
||||
<p style={{ fontSize: '0.85rem' }}>{agent.name}</p>
|
||||
<p style={{ fontSize: '0.65rem', color: '#666' }}>{agent.role}</p>
|
||||
<span style={{ fontSize: '0.6rem', color: agent.status === 'online' ? '#00ff88' : '#666' }}>● {agent.status}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function WhatsAppStatus({ whatsapp }: { whatsapp: WhatsAppStatus | null }) {
|
||||
if (!whatsapp) return <p style={{ color: '#666' }}>Loading...</p>;
|
||||
return (
|
||||
<div style={{ background: 'rgba(20,20,30,0.6)', borderRadius: '12px', padding: '15px', border: '1px solid rgba(255,255,255,0.05)' }}>
|
||||
<h2 style={{ fontSize: '0.9rem', marginBottom: '15px' }}>💬 WhatsApp Chats</h2>
|
||||
<div style={{ background: 'rgba(255,255,255,0.03)', borderRadius: '8px', padding: '15px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' }}>
|
||||
<span style={{ color: '#666', fontSize: '0.75rem' }}>Status</span>
|
||||
<span style={{ color: whatsapp.status === 'ok' ? '#00ff88' : '#ff0050', fontSize: '0.75rem' }}>{whatsapp.status}</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' }}>
|
||||
<span style={{ color: '#666', fontSize: '0.75rem' }}>Chats</span>
|
||||
<span style={{ fontSize: '0.75rem' }}>{whatsapp.chats}</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<span style={{ color: '#666', fontSize: '0.75rem' }}>Last Update</span>
|
||||
<span style={{ fontSize: '0.75rem' }}>{whatsapp.lastUpdate}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MemoryVault({ memories }: { memories: Memory[] }) {
|
||||
const [search, setSearch] = useState('');
|
||||
const filtered = memories.filter(m => m.title.toLowerCase().includes(search.toLowerCase()));
|
||||
return (
|
||||
<div>
|
||||
<input type="text" placeholder="Search memories..." value={search} onChange={e => setSearch(e.target.value)} style={{ width: '100%', padding: '10px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(20,20,30,0.6)', color: '#e4e4e7', fontSize: '0.8rem', marginBottom: '15px', outline: 'none' }} />
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '10px' }}>
|
||||
{filtered.map((mem, i) => (
|
||||
<div key={i} style={{ background: 'rgba(20,20,30,0.6)', borderRadius: '8px', padding: '12px' }}>
|
||||
<p style={{ fontSize: '0.8rem', marginBottom: '5px' }}>{mem.title}</p>
|
||||
<span style={{ fontSize: '0.6rem', color: '#444' }}>{mem.date}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user