finishing the Basic UI of the project

src/components/inputs/mission_tasks_editor.tsx

@@ -0,0 +1,115 @@
+import { Mission } from "@/types/mission";
+import { Task } from "@/types/task";
+import React, { useState } from "react";
+import { TESelect } from "tw-elements-react";
+
+interface MissionTaskEditorProps {
+  mission: Mission;
+  onMissionChange: (updatedMission: Mission) => void;
+}
+
+const MissionTaskEditor: React.FC<MissionTaskEditorProps> = ({
+  mission,
+  onMissionChange,
+}) => {
+  const [newTaskName, setNewTaskName] = useState("");
+  const [newTaskAgent, setNewTaskAgent] = useState("");
+  const [newTaskDescription, setNewTaskDescription] = useState("");
+
+  const handleAddTask = () => {
+    const newTask: Task = {
+      name: newTaskName,
+      description: newTaskDescription,
+      agent: "",
+    };
+    const updatedTasks = [...mission.tasks, newTask];
+    const updatedMission: Mission = { ...mission, tasks: updatedTasks };
+    onMissionChange(updatedMission);
+    setNewTaskName("");
+    setNewTaskDescription("");
+  };
+
+  const handleRemoveTask = (index: number) => {
+    const updatedTasks = [...mission.tasks];
+    updatedTasks.splice(index, 1);
+    const updatedMission: Mission = { ...mission, tasks: updatedTasks };
+    onMissionChange(updatedMission);
+  };
+
+  return (
+    <div>
+      <h2 className="text-lg font-bold">Mission Tasks</h2>
+      {mission.tasks.map((task, index) => (
+        <div key={index} className="mt-4 border-b border-gray-200 pb-4">
+          <div className="flex justify-between items-center">
+            <h3 className="text-md font-semibold">{task.name}</h3>
+            <button
+              onClick={() => handleRemoveTask(index)}
+              className="text-red-500"
+            >
+              Remove
+            </button>
+          </div>
+          <div className="text-sm text-gray-300 my-2">{task.description}</div>
+          <div className="ml-3">
+            <strong>Agent: </strong>
+            <span className="bg-gray-200 text-gray-700 rounded-full px-3 py-1 text-sm font-semibold m-1 sm:w-1/2">
+              {task.agent}
+            </span>
+          </div>
+        </div>
+      ))}
+      <div role="alert" className="mt-4">
+        <div className="bg-success-600 text-white font-bold rounded-t px-4 py-2">
+          Add New Task:
+        </div>
+        <div className="border border-t-0 border-success-400 rounded-b bg-success-100 px-4 py-3 text-success-700">
+          <div>
+            <label>Task Name: </label>
+            <input
+              type="text"
+              placeholder="Task Name"
+              value={newTaskName}
+              onChange={(e) => setNewTaskName(e.target.value)}
+              className="border border-gray-300 text-black rounded px-3 py-1"
+            />
+          </div>
+          <div>
+            <label>Task Description: </label>
+            <br />
+            <textarea
+              placeholder="Task Description"
+              value={newTaskDescription}
+              onChange={(e) => setNewTaskDescription(e.target.value)}
+              className="w-full border border-gray-300 text-black rounded px-3 py-1 ml-2"
+            />
+          </div>
+          <div className="m-2">
+            <label>Agent</label>
+            <TESelect
+              className="bg-gray-700"
+              data={[
+                { text: "None", value: "None" },
+                ...mission.crew.map((agent) => ({
+                  text: agent,
+                  value: agent,
+                })),
+              ]}
+              onValueChange={(event: any) => {
+                setNewTaskAgent(event.value);
+              }}
+            />
+          </div>
+          <button
+            onClick={handleAddTask}
+            className="bg-success-600 text-white rounded px-4 py-1 ml-2"
+          >
+            Add Task
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MissionTaskEditor;

src/components/modals/mission_modal.tsx

@@ -19,6 +19,7 @@ import Switch from "../inputs/switch";
 import { Mission } from "@/types/mission";
 import { Collapse, initTE } from "tw-elements";
 import AccordionItem from "../ui/accordion_item";
+import MissionTaskEditor from "../inputs/mission_tasks_editor";
 
 export default function MissionModal(props: {
   mission: Mission | null;
@@ -138,6 +139,7 @@ export default function MissionModal(props: {
                           process: event.value,
                         }));
                       }}
+                      className="dark:text-black"
                     />
                   ) : (
                     <span className="bg-blue-300 text-gray-700 rounded-full px-3 py-1 text-sm font-semibold m-1">
@@ -147,7 +149,16 @@ export default function MissionModal(props: {
                 </div>
                 <div className="mb-4">
                   <label className="font-bold text-lg">Tasks:</label>
-                  {isEdit ? null : (
+                  {isEdit ? (
+                    <div>
+                      <MissionTaskEditor
+                        mission={mission!}
+                        onMissionChange={(mission: Mission) => {
+                          setTempMission(mission);
+                        }}
+                      />
+                    </div>
+                  ) : (
                     <div>
                       {mission?.tasks ? (
                         <div>
@@ -176,59 +187,60 @@ export default function MissionModal(props: {
                     </div>
                   )}
                 </div>
-                {mission?.result ? (
-                  <div>
-                    <label className="font-bold text-lg">Result:</label>
-                    <div className="border-2 rounded p-2">
-                      {mission?.result}
+                {!isEdit && (
+                  <>
+                    <div>
+                      <label className="font-bold text-lg">Result:</label>
+                      {mission?.result && (
+                        <div className="border-2 rounded p-2">
+                          {mission?.result}
+                        </div>
+                      )}
                     </div>
-                  </div>
-                ) : (
-                  <div className="my-3">
-                    <button className="mx-auto block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white">
-                      Run
-                    </button>
-                  </div>
+                    <div className="my-3">
+                      <button className="mx-auto block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white">
+                        {mission?.result ? "Re-Run" : "Run"}
+                      </button>
+                    </div>
+                  </>
                 )}
               </div>
             </TEModalBody>
 
-            {!mission?.result && (
-              <TEModalFooter>
-                {!isEdit && (
+            <TEModalFooter>
+              {!isEdit && (
+                <TERipple rippleColor="light">
+                  <button
+                    type="button"
+                    onClick={() => setEdit(true)}
+                    className="ml-1 inline-block rounded bg-success-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
+                  >
+                    Edit
+                  </button>
+                </TERipple>
+              )}
+              {isEdit && (
+                <>
                   <TERipple rippleColor="light">
                     <button
                       type="button"
-                      onClick={() => setEdit(true)}
-                      className="ml-1 inline-block rounded bg-success-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
+                      className="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
+                      onClick={() => setEdit(false)}
                     >
-                      Edit
+                      Close
                     </button>
                   </TERipple>
-                )}
-                {isEdit && (
-                  <>
-                    <TERipple rippleColor="light">
-                      <button
-                        type="button"
-                        className="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
-                        onClick={() => setEdit(false)}
-                      >
-                        Close
-                      </button>
-                    </TERipple>
-                    <TERipple rippleColor="light">
-                      <button
-                        type="button"
-                        className="ml-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
-                      >
-                        Save changes
-                      </button>
-                    </TERipple>
-                  </>
-                )}
-              </TEModalFooter>
-            )}
+                  <TERipple rippleColor="light">
+                    <button
+                      type="button"
+                      className="ml-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
+                    >
+                      Save changes
+                    </button>
+                  </TERipple>
+                </>
+              )}
+            </TEModalFooter>
           </TEModalContent>
         </TEModalDialog>
       </TEModal>

src/data/data.ts

@@ -75,8 +75,7 @@ export const missions = [
     ],
     verbose: true,
     process: "sequential",
-    result:
-      "result result result result result result result result result result result ",
+    result: "",
   },
   {
     name: "Mission2",