update structure for planpage

Author: Fr4nc3

src/frontend_react/src/components/content/PlanPanelRight.tsx

@@ -5,21 +5,15 @@ import { History20Filled, MoreHorizontalRegular, TaskListSquareLtr20Regular, Tas
 import PanelRight from "@/coral/components/Panels/PanelRight";
 import PanelRightToolbar from "@/coral/components/Panels/PanelRightToolbar";
 import TaskDetails from "./TaskDetails";
+import { TaskDetailsProps } from "@/models";
 
 
-
-interface PlanPanelRightProps {
-    activeTask: any | null;
-    onAddAgent: () => void;
-    onAddHuman: () => void;
-}
-
-const PlanPanelRight: React.FC<PlanPanelRightProps> = ({
-    activeTask,
-    onAddAgent,
-    onAddHuman,
+const PlanPanelRight: React.FC<TaskDetailsProps> = ({
+    planData,
+    OnApproveStep,
+    OnRejectStep,
 }) => {
-    if (!activeTask) return null;
+    if (!planData) return null;
 
     return (
         <PanelRight
@@ -28,16 +22,12 @@ const PlanPanelRight: React.FC<PlanPanelRightProps> = ({
             panelResize={true}
             panelType="first"
         >
-            <PanelRightToolbar panelTitle="Task Details" panelIcon={<TaskListSquareLtr20Regular />}>
-
-            </PanelRightToolbar>
 
             <div >
                 <TaskDetails
-                    taskName={activeTask.name}
-                    subTasks={activeTask.subTasks}
-                    agents={activeTask.agents}
-                    humans={activeTask.humans}
+                    planData={planData}
+                    OnApproveStep={OnApproveStep}
+                    OnRejectStep={OnRejectStep}
                 />
             </div>
         </PanelRight>

src/frontend_react/src/pages/PlanPage.tsx

@@ -34,6 +34,7 @@ import ContentToolbar from '@/coral/components/Content/ContentToolbar';
 import Chat from '@/coral/modules/Chat';
 import TaskDetails from '@/components/content/TaskDetails';
 import PlanChat from '@/components/content/PlanChat';
+import PlanPanelRight from '@/components/content/PlanPanelRight';
 
 /**
  * Page component for displaying a specific plan
@@ -112,14 +113,15 @@ const PlanPage: React.FC = () => {
                                 planData={planData}
                                 OnChatSubmit={handleOnchatSubmit}
                             />
-                            <TaskDetails
-                                planData={planData}
-                                OnApproveStep={handleApproveStep}
-                                OnRejectStep={handleRejectStep}
-                            />
                         </>
                     )}
                 </Content>
+
+                <PlanPanelRight
+                    planData={planData}
+                    OnApproveStep={handleApproveStep}
+                    OnRejectStep={handleRejectStep}
+                />
             </CoralShellRow>
         </CoralShellColumn>
     );