feat(mission-control): new sidebar structure v3.0
- 10 categories: Command, Personal, Automation, Council, Projects, Trading, Leads, Memory, Sites, System - Expand All / Collapse All buttons - Open All by default: Command, Personal, Automation - Logout button in footer - All existing pages linked
This commit is contained in:
@@ -3,19 +3,38 @@
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
export default function MissionControlDashboard() {
|
export default function MissionControlDashboard({ onLogout }: { onLogout?: () => void }) {
|
||||||
const [expandedCategory, setExpandedCategory] = useState<string | null>("council");
|
const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set(["command", "personal", "automation"]));
|
||||||
|
|
||||||
|
const toggleCategory = (id: string) => {
|
||||||
|
setExpandedCategories((prev) => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
if (next.has(id)) {
|
||||||
|
next.delete(id);
|
||||||
|
} else {
|
||||||
|
next.add(id);
|
||||||
|
}
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const expandAll = () => {
|
||||||
|
setExpandedCategories(new Set(categories.map((c) => c.id)));
|
||||||
|
};
|
||||||
|
|
||||||
|
const collapseAll = () => {
|
||||||
|
setExpandedCategories(new Set());
|
||||||
|
};
|
||||||
|
|
||||||
const categories = [
|
const categories = [
|
||||||
{
|
{
|
||||||
id: "council",
|
id: "command",
|
||||||
name: "Council",
|
name: "Command",
|
||||||
icon: "👁️",
|
icon: "👁️",
|
||||||
items: [
|
items: [
|
||||||
{ id: "temple", name: "Temple of AI", icon: "🏛️", color: "#fbbf24", href: "/mission-control/temple" },
|
{ id: "dashboard", name: "Dashboard", icon: "🏠", color: "#3b82f6", href: "/mission-control" },
|
||||||
{ id: "office", name: "Claw3D Office", icon: "🏢", color: "#22c55e", href: "/mission-control/office" },
|
{ id: "horus-chat", name: "Horus Chat", icon: "💬", color: "#8b5cf6", href: "/mission-control/claude-chat" },
|
||||||
{ id: "memory", name: "Daily Memory", icon: "📝", color: "#a855f7", href: "/mission-control/memory" },
|
{ id: "voice-chat", name: "Voice Chat", icon: "🎤", color: "#06b6d4", href: "/mission-control/voice" },
|
||||||
{ id: "claude", name: "Claude Chat", icon: "💬", color: "#ff6154", href: "/mission-control/claude-chat" },
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -27,6 +46,77 @@ export default function MissionControlDashboard() {
|
|||||||
{ id: "pdf-viewer", name: "PDF Viewer", icon: "📰", color: "#6366f1", href: "/mission-control/pdf-viewer" },
|
{ id: "pdf-viewer", name: "PDF Viewer", icon: "📰", color: "#6366f1", href: "/mission-control/pdf-viewer" },
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: "automation",
|
||||||
|
name: "Automation",
|
||||||
|
icon: "⚡",
|
||||||
|
items: [
|
||||||
|
{ id: "horus-ai", name: "Horus AI", icon: "🤖", color: "#f59e0b", href: "/mission-control/horus-ai" },
|
||||||
|
{ id: "autorun", name: "Auto-Run", icon: "🔄", color: "#22c55e", href: "/mission-control/autorun" },
|
||||||
|
{ id: "exec-logs", name: "Execution Logs", icon: "📊", color: "#ef4444", href: "/mission-control/execution-logs" },
|
||||||
|
{ id: "change-log", name: "Change Log", icon: "📝", color: "#a855f7", href: "/mission-control/change-log" },
|
||||||
|
{ id: "brainown", name: "Brainown", icon: "🧠", color: "#fbbf24", href: "/mission-control/brainown" },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "council",
|
||||||
|
name: "Council",
|
||||||
|
icon: "🏛️",
|
||||||
|
items: [
|
||||||
|
{ id: "agent-roster", name: "Agent Roster", icon: "👥", color: "#8b5cf6", href: "/mission-control/agents" },
|
||||||
|
{ id: "thoth", name: "Thoth", icon: "🦉", color: "#6366f1", href: "/mission-control/agent/thoth" },
|
||||||
|
{ id: "ptah", name: "Ptah", icon: "🛠️", color: "#f59e0b", href: "/mission-control/agent/ptah" },
|
||||||
|
{ id: "seshat", name: "Seshat", icon: "📜", color: "#22c55e", href: "/mission-control/agent/seshat" },
|
||||||
|
{ id: "anubis", name: "Anubis", icon: "🐕", color: "#ef4444", href: "/mission-control/agent/anubis" },
|
||||||
|
{ id: "thoth-trading", name: "Thoth Trading", icon: "📈", color: "#10b981", href: "/mission-control/agent/thoth-trading" },
|
||||||
|
{ id: "sekhmet", name: "Sekhmet", icon: "🦁", color: "#fbbf24", href: "/mission-control/agent/sekhmet" },
|
||||||
|
{ id: "sessions", name: "Sessions", icon: "💬", color: "#06b6d4", href: "/mission-control/sessions" },
|
||||||
|
{ id: "council-chat", name: "Council Chat", icon: "🏛️", color: "#a855f7", href: "/mission-control/council" },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "projects",
|
||||||
|
name: "Projects & Tasks",
|
||||||
|
icon: "📋",
|
||||||
|
items: [
|
||||||
|
{ id: "task-board", name: "Task Board", icon: "✅", color: "#3b82f6", href: "/mission-control/tasks" },
|
||||||
|
{ id: "task-history", name: "Task History", icon: "📜", color: "#6366f1", href: "/mission-control/task-history" },
|
||||||
|
{ id: "monday", name: "Monday Board", icon: "📅", color: "#f59e0b", href: "/mission-control/monday" },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "trading",
|
||||||
|
name: "Trading",
|
||||||
|
icon: "📊",
|
||||||
|
items: [
|
||||||
|
{ id: "trading-panel", name: "Trading Panel", icon: "📈", color: "#10b981", href: "/mission-control/trading" },
|
||||||
|
{ id: "trading-chart", name: "Trading Chart", icon: "📉", color: "#ef4444", href: "/mission-control/trading-chart" },
|
||||||
|
{ id: "trading-reports", name: "Trading Reports", icon: "📔", color: "#f59e0b", href: "/mission-control/trading-reports" },
|
||||||
|
{ id: "trading-tools", name: "Trading Tools", icon: "🛠️", color: "#8b5cf6", href: "/mission-control/trading-tools" },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "leads",
|
||||||
|
name: "Leads & CRM",
|
||||||
|
icon: "💼",
|
||||||
|
items: [
|
||||||
|
{ id: "leads", name: "Lead Manager", icon: "📋", color: "#f59e0b", href: "/mission-control/leads" },
|
||||||
|
{ id: "hp-leads", name: "HP Leads", icon: "🚀", color: "#22c55e", href: "/mission-control/hp-leads" },
|
||||||
|
{ id: "hp-submissions", name: "HP Submissions", icon: "📨", color: "#ef4444", href: "/mission-control/hp-submissions" },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "memory",
|
||||||
|
name: "Memory & Research",
|
||||||
|
icon: "📝",
|
||||||
|
items: [
|
||||||
|
{ id: "daily-memory", name: "Daily Memory", icon: "📅", color: "#a855f7", href: "/mission-control/memory" },
|
||||||
|
{ id: "briefs", name: "Briefs", icon: "☀️", color: "#fbbf24", href: "/mission-control/briefs" },
|
||||||
|
{ id: "research", name: "Deep Research", icon: "🔬", color: "#3b82f6", href: "/mission-control/research" },
|
||||||
|
{ id: "transcripts", name: "Transcripts", icon: "📹", color: "#6366f1", href: "/mission-control/transcripts" },
|
||||||
|
{ id: "docs", name: "Docs", icon: "📚", color: "#10b981", href: "/mission-control/docs" },
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: "sites",
|
id: "sites",
|
||||||
name: "Sites",
|
name: "Sites",
|
||||||
@@ -38,22 +128,14 @@ export default function MissionControlDashboard() {
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "tools",
|
id: "system",
|
||||||
name: "Tools",
|
name: "System",
|
||||||
icon: "🛠️",
|
icon: "⚙️",
|
||||||
items: [
|
items: [
|
||||||
{ id: "leads", name: "Lead Manager", icon: "📋", color: "#f59e0b", href: "/mission-control/leads" },
|
{ id: "system-status", name: "System Status", icon: "📡", color: "#10b981", href: "/mission-control/system-status" },
|
||||||
{ id: "email", name: "Email Campaign", icon: "📧", color: "#ef4444", href: "/mission-control/email" },
|
{ id: "skills-panel", name: "Skills Panel", icon: "🎯", color: "#f59e0b", href: "/mission-control/skills" },
|
||||||
{ id: "trading", name: "Trading Panel", icon: "📈", color: "#10b981", href: "/mission-control/trading" },
|
{ id: "command-center", name: "Command Center", icon: "⌨️", color: "#ef4444", href: "/mission-control/command" },
|
||||||
]
|
{ id: "projects-panel", name: "Projects Panel", icon: "📁", color: "#6366f1", href: "/mission-control/projects-panel" },
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "agents",
|
|
||||||
name: "Agents",
|
|
||||||
icon: "🤖",
|
|
||||||
items: [
|
|
||||||
{ id: "agents-list", name: "Agent Roster", icon: "👥", color: "#8b5cf6", href: "/mission-control/agents" },
|
|
||||||
{ id: "sessions", name: "Sessions", icon: "💬", color: "#06b6d4", href: "/mission-control/sessions" },
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
@@ -68,7 +150,7 @@ export default function MissionControlDashboard() {
|
|||||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center text-xl">👁️</div>
|
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center text-xl">👁️</div>
|
||||||
<div>
|
<div>
|
||||||
<h1 className="font-bold text-lg">Mission Control</h1>
|
<h1 className="font-bold text-lg">Mission Control</h1>
|
||||||
<p className="text-xs text-slate-500">Horus OS v2.0</p>
|
<p className="text-xs text-slate-500">Horus OS v3.0</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -79,18 +161,18 @@ export default function MissionControlDashboard() {
|
|||||||
<div key={category.id}>
|
<div key={category.id}>
|
||||||
{/* Category Header */}
|
{/* Category Header */}
|
||||||
<button
|
<button
|
||||||
onClick={() => setExpandedCategory(expandedCategory === category.id ? null : category.id)}
|
onClick={() => toggleCategory(category.id)}
|
||||||
className="w-full flex items-center justify-between px-2 py-2 text-xs font-semibold text-slate-400 uppercase tracking-wider hover:text-white transition-colors"
|
className="w-full flex items-center justify-between px-2 py-2 text-xs font-semibold text-slate-400 uppercase tracking-wider hover:text-white transition-colors"
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<span>{category.icon}</span>
|
<span>{category.icon}</span>
|
||||||
<span>{category.name}</span>
|
<span>{category.name}</span>
|
||||||
</div>
|
</div>
|
||||||
<span className={`transition-transform ${expandedCategory === category.id ? "rotate-90" : ""}`}>▶</span>
|
<span className={`transition-transform ${expandedCategories.has(category.id) ? "rotate-90" : ""}`}>▶</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* Category Items */}
|
{/* Category Items */}
|
||||||
{expandedCategory === category.id && (
|
{expandedCategories.has(category.id) && (
|
||||||
<div className="ml-2 space-y-0.5 mt-1">
|
<div className="ml-2 space-y-0.5 mt-1">
|
||||||
{category.items.map((item) => (
|
{category.items.map((item) => (
|
||||||
item.external ? (
|
item.external ? (
|
||||||
@@ -128,8 +210,26 @@ export default function MissionControlDashboard() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Expand/Collapse All Buttons */}
|
||||||
|
<div className="p-3 border-t border-slate-800 space-y-2">
|
||||||
|
<button
|
||||||
|
onClick={expandAll}
|
||||||
|
className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 transition-colors text-sm text-slate-300"
|
||||||
|
>
|
||||||
|
<span>⬇️</span>
|
||||||
|
<span>Expand All</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={collapseAll}
|
||||||
|
className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 transition-colors text-sm text-slate-300"
|
||||||
|
>
|
||||||
|
<span>⬆️</span>
|
||||||
|
<span>Collapse All</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<div className="p-3 border-t border-slate-800">
|
<div className="p-3 border-t border-slate-800 space-y-2">
|
||||||
<div className="bg-slate-800/50 rounded-lg p-3">
|
<div className="bg-slate-800/50 rounded-lg p-3">
|
||||||
<div className="flex items-center gap-2 mb-1">
|
<div className="flex items-center gap-2 mb-1">
|
||||||
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
|
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
|
||||||
@@ -137,6 +237,14 @@ export default function MissionControlDashboard() {
|
|||||||
</div>
|
</div>
|
||||||
<p className="text-xs text-slate-500">Horus is watching 👁️</p>
|
<p className="text-xs text-slate-500">Horus is watching 👁️</p>
|
||||||
</div>
|
</div>
|
||||||
|
{onLogout && (
|
||||||
|
<button
|
||||||
|
onClick={onLogout}
|
||||||
|
className="w-full py-2 rounded-lg bg-red-500/20 hover:bg-red-500/30 text-red-400 text-sm font-medium transition-colors"
|
||||||
|
>
|
||||||
|
Logout
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -149,7 +257,7 @@ export default function MissionControlDashboard() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
<div className="flex items-center gap-2 text-xs text-slate-500">
|
<div className="flex items-center gap-2 text-xs text-slate-500">
|
||||||
<span>Horus v2.0</span>
|
<span>Horus v3.0</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user