"use client"; 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 CronJob = { name: string; enabled: boolean; status: string }; type Memory = { id: string; title: string; date: string; preview: string }; export default function MissionControl() { const [activeTab, setActiveTab] = useState('tasks'); const [tasks, setTasks] = useState([]); const [crons, setCrons] = useState([]); const [memories, setMemories] = useState([]); const [loading, setLoading] = useState(true); const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); async function fetchData() { try { const [tasksRes, cronsRes, memoryRes] = await Promise.all([ fetch('/api/data?type=tasks'), fetch('/api/data?type=crons'), fetch('/api/data?type=memory') ]); setTasks(await tasksRes.json()); setCrons(await cronsRes.json()); setMemories(await memoryRes.json()); } catch (e) { console.error(e); } finally { setLoading(false); } } fetchData(); }, []); return (
{/* Animated background */}
{/* Grid overlay */}
{/* Header */}
⬡

MISSION CONTROL

NodeCrew Operations Center

{/* Content */}
{!mounted ? (

INITIALIZING...

) : loading ? (
Loading live data...
) : ( <> {activeTab === 'tasks' && } {activeTab === 'crons' && } {activeTab === 'memory' && } {activeTab === 'team' && } )}
); } // ============ 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)' }, ]; return (
{columns.map((col, i) => (

{col.label}

{tasks.filter(t => t.status === col.status).length}
{tasks.filter(t => t.status === col.status).map((task, j) => (
{ 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)'; }} >

{task.title}

@{task.assignee} {task.priority && task.priority === 'high' && ( HIGH )}
))} {tasks.filter(t => t.status === col.status).length === 0 && (

No tasks

)}
))}
); } // ============ CRON MONITOR ============ function CronMonitor({ crons }: { crons: CronJob[] }) { return (
⏱

System Cron Jobs

{crons.length} active jobs

{crons.map((cron, i) => (
{cron.name}
{cron.status}
))} {crons.length === 0 && (

No cron data available

)}
); } // ============ MEMORY VAULT ============ function MemoryVault({ memories }: { memories: Memory[] }) { const [search, setSearch] = useState(''); const filtered = memories.filter(m => m.title.toLowerCase().includes(search.toLowerCase()) ); return (
💾

Memory Vault

{memories.length} memories stored

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)' }} />
{filtered.map((mem, i) => (
{ 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'; }} >
📄

{mem.title}

{mem.preview}...

{mem.date}
))} {filtered.length === 0 && (

No memories found

)}
); } // ============ TEAM ============ function Team() { const members = [ { name: 'Jelena', role: 'Chief of Staff', status: 'online', avatar: '👩‍💼' }, { name: 'Neo', role: 'CTO / DevOps', status: 'online', avatar: '🖥️' }, ]; return (
{members.map((member, i) => (
{member.avatar}

{member.name}

{member.role}

{member.status}
))}
); }