Full Mission Control with all features

app/page.tsx

@@ -1,10 +1,10 @@
-use client
+"use client";
+
+import { useState } from 'react';
 
 // 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' };
@@ -23,7 +23,6 @@ export default function MissionControl() {
 
   return (
     <div style={{ fontFamily: 'system-ui, sans-serif', minHeight: '100vh', background: '#0f0f23', color: 'white' }}>
-      {/* Header */}
       <header style={{ padding: '20px 40px', borderBottom: '1px solid #1e1e3f', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
         <h1 style={{ fontSize: '1.8rem', fontWeight: 700 }}>🎯 Mission Control</h1>
         <nav style={{ display: 'flex', gap: '10px' }}>
@@ -46,8 +45,6 @@ export default function MissionControl() {
           ))}
         </nav>
       </header>
-
-      {/* Content */}
       <main style={{ padding: '40px' }}>
         {activeTab === 'tasks' && <TasksBoard />}
         {activeTab === 'content' && <ContentPipeline />}
@@ -60,7 +57,6 @@ export default function MissionControl() {
   );
 }
 
-// ============ TASKS BOARD ============
 function TasksBoard() {
   const [tasks, setTasks] = useState<Task[]>([
     { id: '1', title: 'Fix git backup push', status: 'in-progress', assignee: 'neo' },
@@ -92,7 +88,6 @@ function TasksBoard() {
   );
 }
 
-// ============ CONTENT PIPELINE ============
 function ContentPipeline() {
   const [items, setItems] = useState<ContentItem[]>([
     { id: '1', title: 'ManoonOils Ad Copy', stage: 'script' },
@@ -124,13 +119,11 @@ function ContentPipeline() {
   );
 }
 
-// ============ 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 (
@@ -150,10 +143,7 @@ function Calendar() {
               <td style={{ padding: '15px' }}>{event.title}</td>
               <td style={{ padding: '15px', color: '#9ca3af' }}>{event.date}</td>
               <td style={{ padding: '15px' }}>
-                <span style={{ 
-                  background: event.type === 'cron' ? '#e94560' : '#10b981', 
-                  padding: '4px 12px', borderRadius: '20px', fontSize: '0.8rem' 
-                }}>
+                <span style={{ background: event.type === 'cron' ? '#e94560' : '#10b981', padding: '4px 12px', borderRadius: '20px', fontSize: '0.8rem' }}>
                   {event.type}
                 </span>
               </td>
@@ -165,44 +155,26 @@ function Calendar() {
   );
 }
 
-// ============ 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 (
-    <div>
-      <input
-        type="text"
-        placeholder="Search memories..."
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        style={{ 
-          width: '100%', padding: '15px', borderRadius: '8px', border: 'none', 
-          background: '#1a1a2e', color: 'white', marginBottom: '30px', fontSize: '1rem'
-        }}
-      />
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '20px' }}>
-        {filtered.map(mem => (
-          <div key={mem.id} style={{ background: '#1a1a2e', borderRadius: '12px', padding: '20px' }}>
-            <h3>{mem.title}</h3>
-            <p style={{ color: '#9ca3af', fontSize: '0.9rem', marginTop: '10px' }}>{mem.preview}</p>
-            <span style={{ color: '#6b7280', fontSize: '0.8rem' }}>{mem.date}</span>
-          </div>
-        ))}
-      </div>
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '20px' }}>
+      {memories.map(mem => (
+        <div key={mem.id} style={{ background: '#1a1a2e', borderRadius: '12px', padding: '20px' }}>
+          <h3>{mem.title}</h3>
+          <p style={{ color: '#9ca3af', fontSize: '0.9rem', marginTop: '10px' }}>{mem.preview}</p>
+          <span style={{ color: '#6b7280', fontSize: '0.8rem' }}>{mem.date}</span>
+        </div>
+      ))}
     </div>
   );
 }
 
-// ============ TEAM ============
 function Team() {
   const members: TeamMember[] = [
     { id: '1', name: 'Jelena', role: 'Chief of Staff', status: 'working' },
@@ -215,11 +187,7 @@ function Team() {
     <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: '20px' }}>
       {members.map(member => (
         <div key={member.id} style={{ background: '#1a1a2e', borderRadius: '12px', padding: '25px', display: 'flex', alignItems: 'center', gap: '15px' }}>
-          <div style={{ 
-            width: '50px', height: '50px', borderRadius: '50%', 
-            background: member.status === 'working' ? '#10b981' : '#6b7280',
-            display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.5rem'
-          }}>
+          <div style={{ width: '50px', height: '50px', borderRadius: '50%', background: member.status === 'working' ? '#10b981' : '#6b7280', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.5rem' }}>
             {member.name[0]}
           </div>
           <div>
@@ -235,7 +203,6 @@ function Team() {
   );
 }
 
-// ============ OFFICE ============
 function Office() {
   const agents = [
     { name: 'Jelena', area: 'Executive Suite', working: true, task: 'Managing operations' },
@@ -250,10 +217,7 @@ function Office() {
           <div key={agent.name} style={{ background: '#16213e', borderRadius: '12px', padding: '25px' }}>
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
               <h3>{agent.name}</h3>
-              <span style={{ 
-                width: '12px', height: '12px', borderRadius: '50%', 
-                background: agent.working ? '#10b981' : '#6b7280' 
-              }} />
+              <span style={{ width: '12px', height: '12px', borderRadius: '50%', background: agent.working ? '#10b981' : '#6b7280' }} />
             </div>
             <p style={{ color: '#9ca3af', marginTop: '10px' }}>📍 {agent.area}</p>
             <p style={{ color: '#e94560', marginTop: '5px' }}>💻 {agent.task}</p>