refactor: polishing of admin dashboard teams module (#64)

Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>

packages/hoppscotch-sh-admin/src/pages/teams/AddTeam.vue

@@ -1,80 +0,0 @@
-<template>
-  <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Create Team</h3>
-
-  <div>
-    <div>
-      <div class="px-6 rounded-md">
-        <div>
-          <div class="flex mt-4">
-            <div>
-              <label class="text-gray-200 mr-5 text-lg" for="username"
-                >Name:
-              </label>
-              <input
-                class="w-96 p-2 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-                type="text"
-                v-model="name"
-                placeholder="Enter Name"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="mt-6"></div>
-
-        <div>
-          <HoppButtonPrimary :loading="loading" label="Save" @click="addTeam" />
-        </div>
-
-        <div class="mt-8"></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useMutation } from '@urql/vue';
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { useReadonlyStream } from '~/composables/stream';
-import { auth } from '~/helpers/auth';
-import { CreateTeamDocument } from '../../helpers/backend/graphql';
-
-const router = useRouter();
-const name = ref('');
-const loading = ref(false);
-
-const addTeamMutation = useMutation(CreateTeamDocument);
-
-const currentUser = useReadonlyStream(
-  auth.getProbableUserStream(),
-  auth.getProbableUser()
-);
-
-const addTeam = async () => {
-  loading.value = true;
-  let payload = {
-    name: name.value.trim(),
-    userUid: '',
-  };
-
-  if (currentUser.value) {
-    payload['userUid'] = currentUser.value.uid;
-  }
-
-  const { data, error } = await addTeamMutation.executeMutation(payload);
-  loading.value = false;
-
-  if (data) {
-    name.value = '';
-    goToTeamDetailsPage(data.createTeamByAdmin.id);
-  }
-
-  if (error) {
-    console.log(error);
-  }
-};
-
-const goToTeamDetailsPage = (teamId: string) => {
-  router.push('/teams/' + teamId);
-};
-</script>

packages/hoppscotch-sh-admin/src/pages/teams/_id.vue

@@ -1,3 +1,277 @@
 <template>
-  <TeamsDetails />
+  <div v-if="fetching" class="flex justify-center"><HoppSmartSpinner /></div>
+  <div v-if="team">
+    <div class="flex">
+      <button
+        class="p-2 mb-2 mr-5 rounded-3xl bg-zinc-800"
+        @click="router.push('/teams')"
+      >
+        <icon-lucide-arrow-left class="text-xl" />
+      </button>
+      <div class="">
+        <h3 class="mx-auto text-3xl font-bold text-gray-200 mt-1">
+          {{ team.name }}
+        </h3>
+      </div>
+    </div>
+    <div v-if="team" class="flex !rounded-none justify-center mb-5 sm:px-6 p-4">
+      <HoppButtonSecondary
+        class="!rounded-none"
+        :class="{ '!bg-primaryDark': showTeamDetails }"
+        filled
+        outline
+        label="Details"
+        @click="switchToTeamDetailsTab"
+      />
+
+      <HoppButtonSecondary
+        class="!rounded-none"
+        :class="{ '!bg-primaryDark': showMembers }"
+        filled
+        outline
+        label="Members"
+        @click="switchToMembersTab"
+      />
+
+      <HoppButtonSecondary
+        class="!rounded-none"
+        :class="{ '!bg-primaryDark': showPendingInvites }"
+        filled
+        outline
+        label="Invites"
+        @click="switchToPendingInvitesTab"
+      />
+    </div>
+
+    <div v-if="team && showTeamDetails">
+      <h3 class="sm:px-6 px-4 text-2xl font-bold text-gray-200">
+        Team Details
+      </h3>
+
+      <div class="px-6 rounded-md mt-5">
+        <div class="grid gap-6">
+          <div v-if="team.id">
+            <label class="text-gray-200" for="username">Team ID</label>
+            <div
+              class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+            >
+              {{ team.id }}
+            </div>
+          </div>
+          <div>
+            <label class="text-gray-200" for="username">Team Name</label>
+
+            <div v-if="!showRenameInput" class="flex">
+              <div
+                class="flex-1 w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+              >
+                {{ teamName }}
+              </div>
+
+              <HoppButtonPrimary
+                class="cursor-pointer mt-2 ml-2"
+                filled
+                :icon="IconEdit"
+                label="Edit"
+                @click="showRenameInput = true"
+              />
+            </div>
+            <div v-else class="flex">
+              <input
+                class="flex-1 w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+                type="text"
+                v-model="teamName"
+                placeholder="Team Name"
+                autofocus
+                v-focus
+              />
+              <div>
+                <HoppButtonPrimary
+                  class="cursor-pointer mt-2 ml-2 min-h-11"
+                  :icon="IconSave"
+                  filled
+                  label="Rename"
+                  @click="renameTeamName()"
+                />
+              </div>
+            </div>
+          </div>
+          <div v-if="team.teamMembers.length">
+            <label class="text-gray-200" for="username"
+              >Number of Members</label
+            >
+            <div
+              class="w-full p-3 mt-2 bg-zinc-800 border-gray-200 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+            >
+              {{ team.teamMembers.length }}
+            </div>
+          </div>
+        </div>
+        <div class="flex justify-start mt-8">
+          <HoppButtonSecondary
+            class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
+            filled
+            label="Delete Team"
+            @click="team && deleteTeam(team.id)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div v-if="team" class="sm:px-6 px-4">
+    <TeamsMembers v-if="showMembers" />
+    <TeamsPendingInvites v-if="showPendingInvites" :editingTeamID="team.id" />
+    <HoppSmartConfirmModal
+      :show="confirmDeletion"
+      :title="`Confirm Deletion of ${team.name} team?`"
+      @hide-modal="confirmDeletion = false"
+      @resolve="deleteTeamMutation(deleteTeamUID)"
+    />
+  </div>
 </template>
+
+<script setup lang="ts">
+import { useClientHandle, useMutation } from '@urql/vue';
+import { onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useToast } from '../../composables/toast';
+import {
+  RemoveTeamDocument,
+  RenameTeamDocument,
+  TeamInfoDocument,
+  TeamMemberRole,
+  TeamInfoQuery,
+} from '../../helpers/backend/graphql';
+import IconEdit from '~icons/lucide/edit';
+import IconSave from '~icons/lucide/save';
+
+const toast = useToast();
+
+// Switch between team details, members and invites tab
+const showMembers = ref(false);
+const showPendingInvites = ref(false);
+const showTeamDetails = ref(true);
+
+const switchToMembersTab = () => {
+  showMembers.value = true;
+  showTeamDetails.value = false;
+  showPendingInvites.value = false;
+};
+
+const switchToPendingInvitesTab = () => {
+  showTeamDetails.value = false;
+  showMembers.value = false;
+  showPendingInvites.value = true;
+};
+
+const switchToTeamDetailsTab = () => {
+  showTeamDetails.value = true;
+  showMembers.value = false;
+  showPendingInvites.value = false;
+};
+
+// Get the details of the team
+const team = ref<TeamInfoQuery['admin']['teamInfo'] | undefined>();
+const teamName = ref('');
+const route = useRoute();
+const fetching = ref(true);
+const { client } = useClientHandle();
+
+const getTeamInfo = async () => {
+  fetching.value = true;
+  const result = await client
+    .query(TeamInfoDocument, { teamID: route.params.id.toString() })
+    .toPromise();
+  if (result.error) {
+    return toast.error('Unable to load team info..');
+  }
+  if (result.data?.admin.teamInfo) {
+    team.value = result.data.admin.teamInfo;
+    teamName.value = team.value.name;
+  }
+  fetching.value = false;
+};
+
+onMounted(async () => {
+  await getTeamInfo();
+});
+
+// Rename the team name
+const showRenameInput = ref(false);
+const teamRename = useMutation(RenameTeamDocument);
+
+const renameTeamName = async () => {
+  if (!team.value) return;
+
+  if (team.value.name === teamName.value) {
+    showRenameInput.value = false;
+    return;
+  }
+  const variables = { uid: team.value.id, name: teamName.value };
+  await teamRename.executeMutation(variables).then((result) => {
+    if (result.error) {
+      toast.error('Failed to rename team!!');
+    } else {
+      showRenameInput.value = false;
+      if (team.value) {
+        team.value.name = teamName.value;
+        toast.success('Team renamed successfully!!');
+      }
+    }
+  });
+};
+
+// Delete team from the infra
+const router = useRouter();
+const confirmDeletion = ref(false);
+const teamDeletion = useMutation(RemoveTeamDocument);
+const deleteTeamUID = ref<string | null>(null);
+
+const deleteTeam = (id: string) => {
+  confirmDeletion.value = true;
+  deleteTeamUID.value = id;
+};
+
+const deleteTeamMutation = async (id: string | null) => {
+  if (!id) {
+    confirmDeletion.value = false;
+    toast.error('Team deletion failed!!');
+    return;
+  }
+  const variables = { uid: id };
+  await teamDeletion.executeMutation(variables).then((result) => {
+    if (result.error) {
+      toast.error('Team deletion failed!!');
+    } else {
+      toast.success('Team deleted successfully!!');
+    }
+  });
+  confirmDeletion.value = false;
+  deleteTeamUID.value = null;
+  router.push('/teams');
+};
+
+// Update Roles of Members
+const roleUpdates = ref<
+  {
+    userID: string;
+    role: TeamMemberRole;
+  }[]
+>([]);
+
+watch(
+  () => team.value,
+  (teamDetails) => {
+    const members = teamDetails?.teamMembers ?? [];
+
+    // Remove deleted members
+    roleUpdates.value = roleUpdates.value.filter(
+      (update) =>
+        members.findIndex(
+          (y: { user: { uid: string } }) => y.user.uid === update.userID
+        ) !== -1
+    );
+  }
+);
+</script>

packages/hoppscotch-sh-admin/src/pages/teams/index.vue

@@ -1,139 +1,123 @@
 <template>
   <div>
-    <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Teams</h3>
+    <h3 class="sm:px-6 p-4 text-3xl font-bold text-gray-200">Teams</h3>
 
-    <div class="flex flex-col" v-if="!fetching">
+    <div class="flex flex-col">
       <div class="py-2 overflow-x-auto">
         <div class="inline-block min-w-full overflow-hidden align-middle">
           <div class="sm:px-7 p-4">
             <div class="flex w-full items-center mb-7">
-              <button
-                class="inline-flex mr-3 items-center h-8 pl-2.5 pr-2 rounded-md shadow text-gray-400 border-gray-800 border-2 leading-none py-0"
-              >
-                Last 30 days
-                <icon-lucide-chevron-down class="w-4 ml-1.5 text-gray-600" />
-              </button>
-              <button
-                class="inline-flex items-center h-8 pl-2.5 pr-2 rounded-md shadow text-gray-400 border-gray-800 border-2 leading-none py-0"
-              >
-                Filter by
-                <icon-lucide-chevron-down class="w-4 ml-1.5 text-gray-600" />
-              </button>
-              <router-link to="/teams/addteam">
-                <button
-                  class="inline-flex items-center bg-emerald-700 h-8 ml-3 pl-2.5 pr-2 rounded-md shadow border-gray-800 border leading-none py-0 hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
-                >
-                  Create Team
-                </button>
-              </router-link>
-              <div
-                class="ml-auto text-gray-400 text-xs sm:inline-flex hidden items-center"
-              >
-                <span class="mr-3">Page 2 of 4</span>
-                <button
-                  class="inline-flex mr-2 items-center h-8 w-8 justify-center text-gray-400 rounded-md shadow border border-gray-800 leading-none py-0"
-                >
-                  <icon-lucide-chevron-left class="text-xl" />
-                </button>
-                <button
-                  class="inline-flex items-center h-8 w-8 justify-center text-gray-400 rounded-md shadow border border-gray-800 leading-none py-0"
-                >
-                  <icon-lucide-chevron-right class="text-xl" />
-                </button>
-              </div>
+              <HoppButtonPrimary
+                class="mr-4"
+                label="Create Team"
+                @click="showCreateTeamModal = true"
+              />
             </div>
 
             <div>
-              <table class="w-full text-left">
+              <div
+                v-if="fetching && !error && !(teamList.length >= 1)"
+                class="flex justify-center"
+              >
+                <HoppSmartSpinner />
+              </div>
+              <div v-else-if="error">Unable to Load Teams List..</div>
+
+              <table v-if="teamList.length >= 1" class="w-full text-left">
                 <thead>
-                  <tr class="text-gray-200 border-b border-gray-600 text-sm">
-                    <th class="font-normal px-3 pt-0 pb-3"></th>
-                    <th class="font-normal px-3 pt-0 pb-3">Team Name</th>
-                    <th class="font-normal px-3 pt-0 pb-3">Team ID</th>
-                    <th class="font-normal px-3 pt-0 pb-3 md:table-cell">
-                      Number of Members
-                    </th>
-                    <th class="font-normal px-3 pt-0 pb-3">Action</th>
+                  <tr
+                    class="text-gray-200 border-b border-dividerDark text-sm font-bold"
+                  >
+                    <th class="px-3 pt-0 pb-3">Team ID</th>
+                    <th class="px-3 pt-0 pb-3">Team Name</th>
+                    <th class="px-3 pt-0 pb-3">Number of Members</th>
+                    <th class="px-3 pt-0 pb-3"></th>
                   </tr>
                 </thead>
+
                 <tbody class="text-gray-300">
-                  <!-- <router-link :custom="true" class="" :to="'/team/detail'"> -->
                   <tr
-                    v-for="(team, index) in teamList"
+                    v-for="team in teamList"
                     :key="team.id"
-                    class="border-b border-gray-300 dark:border-gray-600 hover:bg-zinc-800 rounded-xl"
+                    class="border-b border-divider hover:bg-zinc-800 hover:cursor-pointer rounded-xl p-3"
                   >
-                    <td>
-                      <label>
-                        <input
-                          type="checkbox"
-                          class="appearance-none bg-gray-600 checked:bg-emerald-600 rounded-md ml-3 w-5 h-5"
-                          name="radio"
-                        />
-                      </label>
+                    <td
+                      @click="goToTeamDetails(team.id)"
+                      class="sm:p-3 py-5 px-1 min-w-30 max-w-50"
+                    >
+                      <div class="flex">
+                        <span class="ml-3 truncate">
+                          {{ team.id }}
+                        </span>
+                      </div>
                     </td>
 
                     <td
-                      class="sm:p-3 py-2 px-1 md:table-cell text-sky-300"
-                      @click="goToTeam(team.id)"
+                      @click="goToTeamDetails(team.id)"
+                      class="sm:p-3 py-5 px-1 min-w-80"
                     >
-                      <span class="hover:underline cursor-pointer">
+                      <span
+                        v-if="team.name"
+                        class="flex items-center ml-4 truncate"
+                      >
                         {{ team.name }}
                       </span>
-                    </td>
-
-                    <td @click="goToTeam(team.id)" class="sm:p-3 py-2 px-1">
-                      <span class="hover:underline cursor-pointer">
-                        {{ team.id }}
+                      <span v-else class="flex items-center ml-4">
+                        (Unnamed team)
                       </span>
                     </td>
 
-                    <td class="sm:p-3 py-2 px-1 justify-center">
-                      {{ team.members?.length }}
+                    <td
+                      @click="goToTeamDetails(team.id)"
+                      class="sm:p-3 py-5 px-1"
+                    >
+                      <span class="ml-7">
+                        {{ team.members?.length }}
+                      </span>
                     </td>
+
                     <td>
-                      <tippy
-                        interactive
-                        trigger="click"
-                        theme="popover"
-                        :on-shown="() => tippyActions![index].focus()"
-                      >
-                        <span class="cursor-pointer">
-                          <icon-lucide-more-horizontal />
-                        </span>
-                        <template #content="{ hide }">
-                          <div
-                            ref="tippyActions"
-                            class="flex flex-col focus:outline-none"
-                            tabindex="0"
-                            @keyup.escape="hide()"
-                          >
-                            <HoppSmartItem
-                              label="Delete"
-                              @click="
-                                () => {
-                                  deleteTeam(team.id);
-                                  hide();
-                                }
-                              "
-                            />
-                          </div>
-                        </template>
-                      </tippy>
+                      <div class="relative">
+                        <tippy
+                          interactive
+                          trigger="click"
+                          theme="popover"
+                          :on-shown="() => tippyActions!.focus()"
+                        >
+                          <HoppButtonSecondary
+                            v-tippy="{ theme: 'tooltip' }"
+                            :icon="IconMoreHorizontal"
+                          />
+                          <template #content="{ hide }">
+                            <div
+                              ref="tippyActions"
+                              class="flex flex-col focus:outline-none"
+                              tabindex="0"
+                              @keyup.escape="hide()"
+                            >
+                              <HoppSmartItem
+                                :icon="IconTrash"
+                                :label="'Delete Team'"
+                                class="!hover:bg-red-600 w-full"
+                                @click="deleteTeam(team.id)"
+                              />
+                            </div>
+                          </template>
+                        </tippy>
+                      </div>
                     </td>
                   </tr>
-                  <!-- </router-link> -->
                 </tbody>
               </table>
-            </div>
-
-            <div v-if="teamList.length >= 20" class="text-center">
-              <button
+              <div
+                v-if="hasNextPage"
+                class="flex justify-center mt-5 p-2 font-semibold rounded-3xl bg-zinc-800 hover:bg-zinc-700 mx-auto w-32 text-light-500"
                 @click="fetchNextTeams"
-                class="mt-5 p-2 rounded-3xl bg-gray-700"
               >
-                <icon-lucide-chevron-down class="text-xl" />
-              </button>
+                <span>Show more </span>
+                <icon-lucide-chevron-down class="ml-2 text-lg" />
+              </div>
+              <div v-else class="mb-12 p-2"></div>
             </div>
           </div>
         </div>
@@ -141,6 +125,58 @@
     </div>
   </div>
 
+  <HoppSmartModal
+    v-if="showCreateTeamModal"
+    dialog
+    title="Create Team"
+    @close="showCreateTeamModal = false"
+  >
+    <template #body>
+      <div>
+        <div>
+          <div class="px-6 rounded-md">
+            <div>
+              <div class="my-4">
+                <div>
+                  <label class="text-gray-200" for="emailAddress">
+                    Enter Team Name
+                  </label>
+                  <input
+                    class="w-full p-3 mt-3 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+                    v-model="teamName"
+                    placeholder="Team Name"
+                  />
+                </div>
+              </div>
+              <div class="my-6">
+                <div>
+                  <label class="text-gray-200" for="emailAddress">
+                    Enter Email Address of Team Owner
+                  </label>
+
+                  <HoppSmartAutoComplete
+                    placeholder="Enter Email"
+                    :source="allUsersEmail"
+                    :spellcheck="true"
+                    styles="
+                w-full p-3 mt-3 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500
+              "
+                    class="flex-1 !flex"
+                    @input="(email: string) => getOwnerEmail(email)"
+                  />
+                </div>
+              </div>
+
+              <div class="flex justify-end my-2 pt-3">
+                <HoppButtonPrimary label="Create Team" @click="createTeam" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </HoppSmartModal>
+
   <HoppSmartConfirmModal
     :show="confirmDeletion"
     :title="`Confirm Deletion of the team?`"
@@ -150,56 +186,100 @@
 </template>
 
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
-
+import { useRoute, useRouter } from 'vue-router';
 import {
+  CreateTeamDocument,
+  MetricsDocument,
   RemoveTeamDocument,
   TeamListDocument,
+  UsersListDocument,
 } from '../../helpers/backend/graphql';
 import { usePagedQuery } from '../../composables/usePagedQuery';
-
-import { onMounted, onBeforeUnmount, ref } from 'vue';
-import { useMutation } from '@urql/vue';
+import { ref, watch, computed } from 'vue';
+import { useMutation, useQuery } from '@urql/vue';
 import { useToast } from '../../composables/toast';
+import { TippyComponent } from 'vue-tippy';
+import IconTrash from '~icons/lucide/trash';
+import IconMoreHorizontal from '~icons/lucide/more-horizontal';
 
 const toast = useToast();
+// Template refs
+const tippyActions = ref<TippyComponent | null>(null);
 
-const router = useRouter();
+// Get Users List
+const { data } = useQuery({ query: MetricsDocument });
+const usersPerPage = computed(() => data.value?.admin.usersCount || 10000);
 
+const { list: usersList } = usePagedQuery(
+  UsersListDocument,
+  (x) => x.admin.allUsers,
+  (x) => x.uid,
+  usersPerPage.value,
+  { cursor: undefined, take: usersPerPage.value }
+);
+
+const allUsersEmail = computed(() => usersList.value.map((user) => user.email));
+
+// Get Paginated Results of all the teams in the infra
+const teamsPerPage = 20;
 const {
   fetching,
+  error,
   goToNextPage: fetchNextTeams,
   refetch,
   list: teamList,
+  hasNextPage,
 } = usePagedQuery(
   TeamListDocument,
   (x) => x.admin.allTeams,
   (x) => x.id,
-  10,
-  { cursor: undefined, take: 10 }
+  teamsPerPage,
+  { cursor: undefined, take: teamsPerPage }
 );
 
-const goToTeam = (teamId: string) => {
+// Create Team
+const teamName = ref('');
+const ownerEmail = ref('');
+const createTeamMutation = useMutation(CreateTeamDocument);
+const showCreateTeamModal = ref(false);
+const getOwnerEmail = (email: string) => (ownerEmail.value = email);
+
+const createTeam = async () => {
+  const userUid =
+    usersList.value.find((user) => user.email === ownerEmail.value)?.uid || '';
+  const variables = { name: teamName.value.trim(), userUid: userUid };
+  await createTeamMutation.executeMutation(variables).then((result) => {
+    if (result.error) {
+      if (teamName.value.length < 6) {
+        toast.error('Team name should be atleast 6 characters long!!');
+      }
+      if (result.error.toString() == '[GraphQL] user/not_found') {
+        toast.error('User not found!!');
+      } else {
+        toast.error('Failed to create team!!');
+      }
+    } else {
+      toast.success('Team created successfully!!');
+      showCreateTeamModal.value = false;
+      refetch();
+    }
+  });
+};
+
+// Go To Individual Team Details Page
+const router = useRouter();
+const goToTeamDetails = (teamId: string) => {
   router.push('/teams/' + teamId);
 };
 
-// Open the side menu dropdown of only the selected user
-const activeTeamId = ref<null | String>(null);
+// Reload Teams Page when routed back to the teams page
+const route = useRoute();
+watch(
+  () => route.params.id,
+  () => window.location.reload()
+);
 
-// Template refs
-const tippyActions = ref<any | null>(null);
-
-// Hide dropdown when user clicks elsewhere
-const close = (e: any) => {
-  if (!e.target.closest('.dropdown')) {
-    activeTeamId.value = null;
-  }
-};
-
-onMounted(() => document.addEventListener('click', close));
-onBeforeUnmount(() => document.removeEventListener('click', close));
-
-// User Deletion
+// Team Deletion
 const teamDeletion = useMutation(RemoveTeamDocument);
 const confirmDeletion = ref(false);
 const deleteTeamID = ref<string | null>(null);
@@ -212,16 +292,16 @@ const deleteTeam = (id: string) => {
 const deleteTeamMutation = async (id: string | null) => {
   if (!id) {
     confirmDeletion.value = false;
-    toast.error('Team Deletion Failed');
+    toast.error('Team deletion failed!!');
     return;
   }
   const variables = { uid: id };
   await teamDeletion.executeMutation(variables).then((result) => {
     if (result.error) {
-      toast.error('Team Deletion Failed');
+      toast.error('Team deletion failed!!');
     } else {
-      refetch();
-      toast.success('Team Deleted Successfully');
+      teamList.value = teamList.value.filter((team) => team.id !== id);
+      toast.success('Team deleted successfully!!');
     }
   });
   confirmDeletion.value = false;