fix: MC interactivity - tabs, filters, voice chat

components/mission-control/MissionControlDashboard.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import { motion } from "framer-motion";
 import { useMissionControl } from "@/lib/mission-control/store";
 import { TaskStatus } from "@/lib/mission-control/types";
 import VoiceChat from "./VoiceChat";
@@ -46,20 +45,15 @@ const statusConfig: Record<TaskStatus, { label: string; color: string; bg: strin
   paused: { label: "Paused", color: "text-gray-400", bg: "bg-gray-500/20" },
 };
 
-const fadeUp = {
-  hidden: { opacity: 0, y: 20 },
-  visible: { opacity: 1, y: 0 },
-};
-
 export default function MissionControlDashboard() {
   const { tasks, toggleTask, updateTaskStatus, getProjectProgress, getTasksByProject } =
     useMissionControl();
-  const [selectedProject, setSelectedProject] = useState<"sitemente" | "holacompi" | "infrastructure">("sitemente");
+  const [selectedProject, setSelectedProject] = useState<string>("sitemente");
   const [filter, setFilter] = useState<TaskStatus | "all">("all");
 
-  const projectTasks = getTasksByProject(selectedProject);
+  const projectTasks = getTasksByProject(selectedProject as any);
   const filteredTasks = filter === "all" ? projectTasks : projectTasks.filter((t) => t.status === filter);
-  const progress = getProjectProgress(selectedProject);
+  const progress = getProjectProgress(selectedProject as any);
 
   const selectedProjectData = projects.find((p) => p.id === selectedProject)!;
 
@@ -128,11 +122,11 @@ export default function MissionControlDashboard() {
         {/* Project Tabs */}
         <div className="mb-8 flex gap-4">
           {projects.map((project) => {
-            const p = getProjectProgress(project.id);
+            const p = getProjectProgress(project.id as any);
             return (
               <button
                 key={project.id}
-                onClick={() => setSelectedProject(project.id as "sitemente" | "holacompi")}
+                onClick={() => setSelectedProject(project.id)}
                 className={`relative flex-1 rounded-xl border p-4 text-left transition ${
                   selectedProject === project.id
                     ? "border-white/30 bg-white/10"
@@ -196,7 +190,7 @@ export default function MissionControlDashboard() {
           <div className="border-b border-white/10 px-6 py-4">
             <div className="flex items-center justify-between">
               <h2 className="text-lg font-semibold">
-                {selectedProjectData.name} Tasks
+                {selectedProjectData?.name} Tasks
               </h2>
               <p className="text-sm text-white/60">
                 {filteredTasks.filter((t) => t.status === "done").length} /{" "}
@@ -206,15 +200,11 @@ export default function MissionControlDashboard() {
           </div>
 
           <div className="divide-y divide-white/5">
-            {filteredTasks.map((task, index) => {
+            {filteredTasks.map((task) => {
               const config = statusConfig[task.status];
               return (
-                <motion.div
+                <div
                   key={task.id}
-                  variants={fadeUp}
-                  initial="hidden"
-                  animate="visible"
-                  transition={{ duration: 0.3, delay: index * 0.03 }}
                   className={`flex items-center gap-4 px-6 py-4 transition hover:bg-white/5 ${
                     task.status === "done" ? "opacity-50" : ""
                   }`}
@@ -262,7 +252,7 @@ export default function MissionControlDashboard() {
                     <option value="done">Done</option>
                     <option value="blocked">Blocked</option>
                   </select>
-                </motion.div>
+                </div>
               );
             })}
           </div>