diff --git a/app/page.tsx b/app/page.tsx index 69a2911..af0488d 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,14 +1,265 @@ -'use client'; +use client + +// Mission Control - Next.js App +// Track tasks, content, calendar, memory, team, and office import { useState } from 'react'; -export default function Home() { - const [count, setCount] = useState(0); +// 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 ( -
-

Mission Control

-

Count: {count}

- +
+ {/* 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} +
+ ))} +
+ ))} +
+ ); +} + +// ============ CONTENT PIPELINE ============ +function ContentPipeline() { + const [items, setItems] = useState([ + { id: '1', title: 'ManoonOils Ad Copy', stage: 'script' }, + { id: '2', title: 'AI Agency Promo', stage: 'idea' }, + { id: '3', title: 'Product Launch Video', stage: 'thumbnail' }, + ]); + + const stages: { stage: ContentStage; label: string }[] = [ + { stage: 'idea', label: '💡 Ideas' }, + { stage: 'script', label: '📝 Script' }, + { stage: 'thumbnail', label: '🖼️ Thumbnail' }, + { stage: 'filming', label: '🎬 Filming' }, + { stage: 'done', label: '✅ Done' }, + ]; + + return ( +
+ {stages.map(s => ( +
+

{s.label}

+ {items.filter(i => i.stage === s.stage).map(item => ( +
+ {item.title} +
+ ))} +
+ ))} +
+ ); +} + +// ============ CALENDAR ============ +function Calendar() { + const events: CalendarEvent[] = [ + { id: '1', title: 'Twitter Briefing', date: '2026-02-19 06:00', type: 'cron' }, + { id: '2', title: 'Infra Status Report', date: '2026-02-19 07:00', type: 'cron' }, + { id: '3', title: 'ManoonOils Analytics', date: '2026-02-19 08:00', type: 'cron' }, + { id: '4', title: 'YouTube Backup', date: '2026-02-18 21:00', type: 'cron' }, + ]; + + return ( +
+

📅 Scheduled Tasks & Cron Jobs

+ + + + + + + + + + {events.map(event => ( + + + + + + ))} + +
TaskDate/TimeType
{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'} + +
+
+ ))} +
+ ); +} + +// ============ OFFICE ============ +function Office() { + const agents = [ + { name: 'Jelena', area: 'Executive Suite', working: true, task: 'Managing operations' }, + { name: 'Neo', area: 'Server Room', working: true, task: 'Infrastructure monitoring' }, + ]; + + return ( +
+

🏢 Digital Office

+
+ {agents.map(agent => ( +
+
+

{agent.name}

+ +
+

📍 {agent.area}

+

💻 {agent.task}

+
+ ))} +
); }