add some validations on get agents

src/app/agents/page.tsx

@@ -6,7 +6,7 @@ import { Agent } from "@/types/agent";
 import { GET_AGENTS } from "@/utils/graphql_queries";
 import { useQuery } from "@apollo/client";
 import { Icon } from "@iconify/react";
-import { Button, IconButton } from "@material-tailwind/react";
+import { Alert, Button, IconButton } from "@material-tailwind/react";
 import { useState } from "react";
 
 const AgentsPage = () => {
@@ -52,7 +52,20 @@ const AgentsPage = () => {
         />
       </div>
       <div className="container m-auto flex flex-wrap flex-col md:flex-row items-center justify-start p-2">
-        {data.agents.map((agent: Agent, i: number) => (
+        {error && (
+          <div className="w-full">
+            <Alert
+              color="yellow"
+              icon={
+                <Icon icon="material-symbols:warning-outline" fontSize={26} />
+              }
+              className="w-fit"
+            >
+              {error?.message ?? "An error occurred."}
+            </Alert>
+          </div>
+        )}
+        {data?.agents.map((agent: Agent, i: number) => (
           <div key={i} className="w-full lg:w-1/2 p-3 relative">
             <div
               className={`flex flex-col ${

src/components/modals/mission_modal.tsx

@@ -17,7 +17,7 @@ import { Mission } from "@/types/mission";
 import MissionTaskEditor from "../inputs/mission_tasks_editor";
 import { TasksAccordion } from "../ui/tasks_accordions";
 import { Process, selectTheme } from "@/data/consts";
-import { Button, Switch } from "@material-tailwind/react";
+import { Alert, Button, Switch } from "@material-tailwind/react";
 import { useMutation, useQuery } from "@apollo/client";
 import {
   DELETE_MISSION,
@@ -58,7 +58,11 @@ export default function MissionModal(props: {
     setMissionResult(mission?.result ?? "");
   }, [mission]);
 
-  const { loading, error, data: agentsData } = useQuery(GET_AGENTS);
+  const {
+    loading,
+    error: agentsError,
+    data: agentsData,
+  } = useQuery(GET_AGENTS);
 
   const [updateMission] = useMutation(UPDATE_MISSION);
   const [updateMissionLoading, setUpdateMissionLoading] = useState(false);
@@ -151,6 +155,24 @@ export default function MissionModal(props: {
                 <div className="mb-4">
                   <span className="font-bold mr-2 text-lg">Crew (Agents):</span>
                   <br />
+                  {agentsError && (
+                    <>
+                      <div className="w-full my-1">
+                        <Alert
+                          color="yellow"
+                          icon={
+                            <Icon
+                              icon="material-symbols:warning-outline"
+                              fontSize={26}
+                            />
+                          }
+                          className="w-fit"
+                        >
+                          {agentsError?.message ?? "An error occurred."}
+                        </Alert>
+                      </div>
+                    </>
+                  )}
                   {isEdit ? (
                     loading ? (
                       <Button
@@ -163,17 +185,20 @@ export default function MissionModal(props: {
                       </Button>
                     ) : (
                       <TESelect
-                        data={agentsData.agents.map((agent: Agent) => ({
+                        data={
-                          text: agent.role,
+                          agentsData?.agents.map((agent: Agent) => ({
-                          value: agent.id,
+                            text: agent.role,
-                        }))}
+                            value: agent.id,
+                          })) ?? []
+                        }
                         multiple
                         value={tempMission.crew.map((agent) => agent.id!)}
                         onValueChange={(event: any) => {
                           const newValue = event.map((item: any) => item.value);
-                          const newCrew = agentsData.agents.filter(
+                          const newCrew =
-                            (agent: Agent) => newValue.includes(agent.id)
+                            agentsData?.agents.filter((agent: Agent) =>
-                          );
+                              newValue.includes(agent.id)
+                            ) ?? [];
                           const newTasks = tempMission.tasks.map((task) => ({
                             ...task,
                             agent:

src/components/modals/new_mission_modal.tsx

@@ -1,7 +1,7 @@
 import { Process, selectTheme } from "@/data/consts";
 import { Mission } from "@/types/mission";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import { Button, Switch } from "@material-tailwind/react";
+import { Alert, Button, Switch } from "@material-tailwind/react";
 import React, { useState } from "react";
 import {
   TEInput,
@@ -37,7 +37,11 @@ function NewMissionModal(props: {
     result: "",
   });
 
-  const { loading, error, data: agentsData } = useQuery(GET_AGENTS);
+  const {
+    loading,
+    error: agentsError,
+    data: agentsData,
+  } = useQuery(GET_AGENTS);
 
   const [createMission] = useMutation(CREATE_MISSION);
   const [createMissionLoading, setCreateMissionLoading] = useState(false);
@@ -98,6 +102,24 @@ function NewMissionModal(props: {
                 <div className="mb-4">
                   <span className="font-bold mr-2 text-lg">Crew (Agents):</span>
                   <br />
+                  {agentsError && (
+                    <>
+                      <div className="w-full my-1">
+                        <Alert
+                          color="yellow"
+                          icon={
+                            <Icon
+                              icon="material-symbols:warning-outline"
+                              fontSize={26}
+                            />
+                          }
+                          className="w-fit"
+                        >
+                          {agentsError?.message ?? "An error occurred."}
+                        </Alert>
+                      </div>
+                    </>
+                  )}
                   {loading ? (
                     <Button
                       variant="text"
@@ -109,16 +131,19 @@ function NewMissionModal(props: {
                     </Button>
                   ) : (
                     <TESelect
-                      data={agentsData.agents.map((agent: Agent) => ({
+                      data={
-                        text: agent.role,
+                        agentsData?.agents.map((agent: Agent) => ({
-                        value: agent.id,
+                          text: agent.role,
-                      }))}
+                          value: agent.id,
+                        })) ?? []
+                      }
                       multiple
                       onValueChange={(event: any) => {
                         const newValue = event.map((item: any) => item.value);
-                        const newCrew = agentsData.agents.filter(
+                        const newCrew =
-                          (agent: Agent) => newValue.includes(agent.id)
+                          agentsData?.agents.filter((agent: Agent) =>
-                        );
+                            newValue.includes(agent.id)
+                          ) ?? [];
                         const newTasks = tempMission.tasks.map((task) => ({
                           ...task,
                           agent: