use client
// Mission Control - Next.js App
// Track tasks, content, calendar, memory, team, and office
import { useState } from 'react';
// Types
type TaskStatus = 'todo' | 'in-progress' | 'done';
type Task = { id: string; title: string; status: TaskStatus; assignee: 'me' | 'jelena' | 'neo' };
type ContentStage = 'idea' | 'script' | 'thumbnail' | 'filming' | 'done';
type ContentItem = { id: string; title: string; stage: ContentStage; script?: string };
type CalendarEvent = { id: string; title: string; date: string; type: 'cron' | 'scheduled' };
type Memory = { id: string; title: string; date: string; preview: string };
type TeamMember = { id: string; name: string; role: string; status: 'working' | 'idle' };
export default function MissionControl() {
const [activeTab, setActiveTab] = useState('tasks');
return (
{/* Header */}
🎯 Mission Control
{/* Content */}
{activeTab === 'tasks' && }
{activeTab === 'content' && }
{activeTab === 'calendar' && }
{activeTab === 'memory' && }
{activeTab === 'team' && }
{activeTab === 'office' && }
);
}
// ============ TASKS BOARD ============
function TasksBoard() {
const [tasks, setTasks] = useState([
{ id: '1', title: 'Fix git backup push', status: 'in-progress', assignee: 'neo' },
{ id: '2', title: 'Deploy nodecrew landing page', status: 'done', assignee: 'neo' },
{ id: '3', title: 'Fix YouTube backup', status: 'todo', assignee: 'neo' },
{ id: '4', title: 'Setup Mission Control', status: 'in-progress', assignee: 'jelena' },
]);
const columns: { status: TaskStatus; label: string; color: string }[] = [
{ status: 'todo', label: 'To Do', color: '#6b7280' },
{ status: 'in-progress', label: 'In Progress', color: '#e94560' },
{ status: 'done', label: 'Done', color: '#10b981' },
];
return (
{columns.map(col => (
{col.label}
{tasks.filter(t => t.status === col.status).map(task => (
{task.title}
@{task.assignee}
))}
))}
{stages.map(s => (
{s.label}
{items.filter(i => i.stage === s.stage).map(item => (
{item.title}
))}
))}
📅 Scheduled Tasks & Cron Jobs
| Task |
Date/Time |
Type |
{events.map(event => (
| {event.title} |
{event.date} |
{event.type}
|
))}
);
}
// ============ MEMORY ============
function Memory() {
const [search, setSearch] = useState('');
const memories: Memory[] = [
{ id: '1', title: 'ManoonOils Product Formula', date: '2026-02-07', preview: 'Professional formulation for anti-aging serum...' },
{ id: '2', title: 'Backup System Setup', date: '2026-02-05', preview: 'Storage Box mounted at /mnt/storagebox...' },
{ id: '3', title: 'Neo Agent Created', date: '2026-02-03', preview: 'Neo as CTO - infrastructure agent...' },
];
const filtered = memories.filter(m => m.title.toLowerCase().includes(search.toLowerCase()));
return (
setSearch(e.target.value)}
style={{
width: '100%', padding: '15px', borderRadius: '8px', border: 'none',
background: '#1a1a2e', color: 'white', marginBottom: '30px', fontSize: '1rem'
}}
/>
{filtered.map(mem => (
{mem.title}
{mem.preview}
{mem.date}
))}
);
}
// ============ TEAM ============
function Team() {
const members: TeamMember[] = [
{ id: '1', name: 'Jelena', role: 'Chief of Staff', status: 'working' },
{ id: '2', name: 'Neo', role: 'CTO / DevOps', status: 'working' },
{ id: '3', name: 'Agent 3', role: 'Sales Agent', status: 'idle' },
{ id: '4', name: 'Agent 4', role: 'Ad Manager', status: 'idle' },
];
return (
{members.map(member => (
{member.name[0]}
{member.name}
{member.role}
{member.status === 'working' ? '● Working' : '○ Idle'}
))}
🏢 Digital Office
{agents.map(agent => (
{agent.name}
📍 {agent.area}
💻 {agent.task}
))}
);
}