chore: admin-dashboard team page UI polish (#75)

2023-04-08 16:48:33 +05:30
parent 67f7e6a6d2
commit 0dba28c388
11 changed files with 463 additions and 379 deletions
--- a/packages/hoppscotch-sh-admin/src/components.d.ts
+++ b/packages/hoppscotch-sh-admin/src/components.d.ts
@@ -22,14 +22,18 @@ declare module '@vue/runtime-core' {
    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
+    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
    IconLucideUser: typeof import('~icons/lucide/user')['default']
    ProfilePicture: typeof import('./components/profile/Picture.vue')['default']
+    TeamsAdd: typeof import('./components/teams/Add.vue')['default']
+    TeamsDetails: typeof import('./components/teams/Details.vue')['default']
    TeamsInvite: typeof import('./components/teams/Invite.vue')['default']
    TeamsMembers: typeof import('./components/teams/Members.vue')['default']
    TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default']
+    TeamsTable: typeof import('./components/teams/Table.vue')['default']
    Tippy: typeof import('vue-tippy')['Tippy']
    UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default']
    UsersTable: typeof import('./components/users/Table.vue')['default']
--- a/packages/hoppscotch-sh-admin/src/components/teams/Add.vue
+++ b/packages/hoppscotch-sh-admin/src/components/teams/Add.vue
@@ -0,0 +1,93 @@
+<template>
+  <HoppSmartModal
+    v-if="show"
+    dialog
+    title="Create team"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <div class="flex flex-col space-y-4 relative">
+        <div class="flex flex-col relaive">
+          <label for="teamName" class="py-2"> Team owner email </label>
+          <HoppSmartAutoComplete
+            styles="w-full p-2 bg-transparent border border-divider rounded-md "
+            class="flex-1 !flex"
+            :source="allUsersEmail"
+            :spellcheck="true"
+            placeholder=""
+            @input="(email: string) => getOwnerEmail(email)"
+          />
+        </div>
+        <div class="flex flex-col">
+          <label for="teamName" class="py-2">Team name</label>
+          <input
+            id="teamName"
+            v-model="teamName"
+            v-focus
+            class="input relative"
+            placeholder=""
+            type="email"
+            autocomplete="off"
+          />
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <span class="flex space-x-2">
+        <HoppButtonPrimary
+          label="Create team"
+          :loading="loadingState"
+          @click="createTeam"
+        />
+        <HoppButtonSecondary label="Cancel" outline filled @click="hideModal" />
+      </span>
+    </template>
+  </HoppSmartModal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useToast } from '~/composables/toast';
+
+const toast = useToast();
+
+withDefaults(
+  defineProps<{
+    show: boolean;
+    loadingState: boolean;
+    allUsersEmail: string[];
+  }>(),
+  {
+    show: false,
+    loadingState: false,
+  }
+);
+
+const emit = defineEmits<{
+  (event: 'hide-modal'): void;
+  (event: 'create-team', teamName: string, ownerEmail: string): void;
+}>();
+
+const teamName = ref('');
+const ownerEmail = ref('');
+
+const getOwnerEmail = (email: string) => (ownerEmail.value = email);
+
+const createTeam = () => {
+  if (teamName.value.trim() === '') {
+    toast.error('Please enter a valid team name');
+    return;
+  }
+  if (ownerEmail.value.trim() === '') {
+    toast.error('Please enter a valid owner email');
+    return;
+  }
+  emit('create-team', teamName.value, ownerEmail.value);
+  teamName.value = '';
+  ownerEmail.value = '';
+};
+
+const hideModal = () => {
+  emit('hide-modal');
+};
+</script>
--- a/packages/hoppscotch-sh-admin/src/components/teams/Details.vue
+++ b/packages/hoppscotch-sh-admin/src/components/teams/Details.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="flex flex-col">
+    <div class="flex flex-col space-y-8">
+      <div v-if="team.id" class="flex flex-col space-y-3">
+        <label class="text-accentContrast" for="username">Team ID</label>
+        <div class="w-full p-3 bg-divider rounded-md">
+          {{ team.id }}
+        </div>
+      </div>
+
+      <div v-if="teamName" class="flex flex-col space-y-3">
+        <label class="text-accentContrast" for="teamname">Team Name </label>
+        <div
+          class="flex bg-divider rounded-md items-stretch flex-1 border border-divider"
+          :class="{
+            '!border-accent': showRenameInput,
+          }"
+        >
+          <input
+            class="bg-transparent flex-1 p-3 rounded-md !rounded-r-none disabled:select-none border-r-0 disabled:cursor-default disabled:opacity-50"
+            type="text"
+            v-model="newTeamName"
+            placeholder="Team Name"
+            autofocus
+            :disabled="!showRenameInput"
+            v-focus
+          />
+          <HoppButtonPrimary
+            class="!rounded-l-none"
+            filled
+            :icon="showRenameInput ? IconSave : IconEdit"
+            :label="showRenameInput ? 'Rename' : 'Edit'"
+            @click="handleNameEdit()"
+          />
+        </div>
+      </div>
+
+      <div v-if="team.teamMembers.length" class="flex flex-col space-y-3">
+        <label class="text-accentContrast" for="username"
+          >Number of Members</label
+        >
+        <div class="w-full p-3 bg-divider rounded-md">
+          {{ team.teamMembers.length }}
+        </div>
+      </div>
+    </div>
+
+    <div class="flex justify-start mt-8">
+      <HoppButtonPrimary
+        class="!bg-red-600 !hover:opacity-80"
+        filled
+        label="Delete Team"
+        @click="team && $emit('delete-team', team.id)"
+        :icon="IconTrash"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useToast } from '~/composables/toast';
+import { TeamInfoQuery } from '~/helpers/backend/graphql';
+import IconEdit from '~icons/lucide/edit';
+import IconSave from '~icons/lucide/save';
+import IconTrash from '~icons/lucide/trash-2';
+
+const toast = useToast();
+
+const props = defineProps<{
+  team: TeamInfoQuery['admin']['teamInfo'];
+  teamName: string;
+  showRenameInput: boolean;
+}>();
+
+const emit = defineEmits<{
+  (event: 'delete-team', teamID: string): void;
+  (event: 'rename-team', teamName: string): void;
+  (event: 'update:showRenameInput', showRenameInput: boolean): void;
+}>();
+
+const newTeamName = ref(props.teamName);
+
+const handleNameEdit = () => {
+  if (props.showRenameInput) {
+    renameTeam();
+  } else {
+    emit('update:showRenameInput', true);
+  }
+};
+
+const renameTeam = () => {
+  if (newTeamName.value.trim() === '') {
+    toast.error('Team name cannot be empty');
+    return;
+  }
+  emit('rename-team', newTeamName.value);
+};
+</script>
--- a/packages/hoppscotch-sh-admin/src/components/teams/Members.vue
+++ b/packages/hoppscotch-sh-admin/src/components/teams/Members.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="my-6">
-    <h3 class="text-2xl font-bold text-gray-200">Team Members</h3>
-    <div class="flex flex-col mb-6">
-      <div class="flex items-center justify-end flex-1 pt-4 mb-4">
-        <div class="flex">
-          <HoppButtonPrimary
-            :icon="IconUserPlus"
-            label="Add Members"
-            filled
-            @click="showInvite = !showInvite"
-          />
-        </div>
+  <div class="flex flex-col">
+    <div class="flex flex-col">
+      <div class="flex">
+        <HoppButtonPrimary
+          :icon="IconUserPlus"
+          label="Add Members"
+          filled
+          @click="showInvite = !showInvite"
+        />
      </div>

-      <div class="border rounded border-divider">
+      <div class="border rounded border-divider my-8">
        <div
          v-if="team?.teamMembers?.length === 0"
          class="flex flex-col items-center justify-center p-4 text-secondaryLight"
@@ -38,7 +35,7 @@
            class="flex divide-x divide-dividerLight"
          >
            <input
-              class="flex flex-1 px-4 py-2 bg-transparent"
+              class="flex flex-1 px-4 py-3 bg-transparent"
              placeholder="Email"
              :name="'param' + index"
              :value="member.email"
@@ -51,14 +48,19 @@
                theme="popover"
                :on-shown="() => tippyActions![index].focus()"
              >
-                <span class="select-wrapper">
+                <span class="relative">
                  <input
-                    class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
+                    class="flex flex-1 px-4 py-3 bg-transparent cursor-pointer"
                    placeholder="Permissions"
                    :name="'value' + index"
                    :value="member.role"
                    readonly
                  />
+                  <span
+                    class="absolute right-4 top-1/2 transform !-translate-y-1/2"
+                  >
+                    <IconChevronDown />
+                  </span>
                </span>
                <template #content="{ hide }">
                  <div
@@ -136,18 +138,20 @@
      </div>
    </div>

-    <HoppButtonPrimary label="Save" outline @click="saveUpdatedTeam" />
+    <div class="flex">
+      <HoppButtonPrimary label="Save" outline @click="saveUpdatedTeam" />
+    </div>
+    <TeamsInvite
+      :show="showInvite"
+      :editingTeamID="route.params.id.toString()"
+      @member="updateMembers"
+      @hide-modal="
+        () => {
+          showInvite = false;
+        }
+      "
+    />
  </div>
-  <TeamsInvite
-    :show="showInvite"
-    :editingTeamID="route.params.id.toString()"
-    @member="updateMembers"
-    @hide-modal="
-      () => {
-        showInvite = false;
-      }
-    "
-  />
 </template>

 <script setup lang="ts">
@@ -156,6 +160,7 @@ import IconCircle from '~icons/lucide/circle';
 import IconUserPlus from '~icons/lucide/user-plus';
 import IconUserMinus from '~icons/lucide/user-minus';
 import IconHelpCircle from '~icons/lucide/help-circle';
+import IconChevronDown from '~icons/lucide/chevron-down';
 import { useClientHandle, useMutation } from '@urql/vue';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
@@ -171,6 +176,10 @@ import { HoppButtonPrimary, HoppButtonSecondary } from '@hoppscotch/ui';

 const toast = useToast();

+const emit = defineEmits<{
+  (e: 'update-team'): void;
+}>();
+
 // Used to Invoke the Invite Members Modal
 const showInvite = ref(false);

@@ -195,15 +204,14 @@ const getTeamInfo = async () => {
  fetching.value = false;
 };

-const emit = defineEmits<{
-  (e: 'update-team'): void;
-}>();
-
 onMounted(async () => await getTeamInfo());
 onUnmounted(() => emit('update-team'));

 // Update members tab after a change in the members list or member roles
-const updateMembers = () => getTeamInfo();
+const updateMembers = () => {
+  getTeamInfo();
+  emit('update-team');
+};

 // Template refs
 const tippyActions = ref<any | null>(null);
@@ -295,8 +303,10 @@ const saveUpdatedTeam = async () => {
    );
    if (updateMemberRoleResult.error) {
      toast.error('Role updation has failed!!');
+      roleUpdates.value = [];
    } else {
      toast.success('Roles updated successfully!!');
+      roleUpdates.value = [];
    }
    isLoading.value = false;
  });
@@ -333,5 +343,6 @@ const removeExistingTeamMember = async (userID: string, index: number) => {
    toast.success('Member removed successfully!!');
  }
  isLoadingIndex.value = null;
+  emit('update-team');
 };
 </script>
--- a/packages/hoppscotch-sh-admin/src/components/teams/PendingInvites.vue
+++ b/packages/hoppscotch-sh-admin/src/components/teams/PendingInvites.vue
@@ -1,7 +1,5 @@
 <template>
-  <h3 class="text-2xl font-bold text-gray-200 mb-5">Pending Invites</h3>
-
-  <div class="border rounded divide-y divide-dividerLight border-divider">
+  <div class="border rounded divide-y divide-dividerLight border-divider my-8">
    <div v-if="fetching" class="flex items-center justify-center p-4">
      <HoppSmartSpinner />
    </div>
--- a/packages/hoppscotch-sh-admin/src/components/teams/Table.vue
+++ b/packages/hoppscotch-sh-admin/src/components/teams/Table.vue
@@ -0,0 +1,102 @@
+<template>
+  <table class="w-full">
+    <thead>
+      <tr class="text-secondary border-b border-dividerDark text-sm text-left">
+        <th class="px-3 pb-3">Team ID</th>
+        <th class="px-3 pb-3">Team Name</th>
+        <th class="px-3 pb-3">Number of Members</th>
+        <th class="px-3 pb-3"></th>
+      </tr>
+    </thead>
+
+    <tbody class="divide-y divide-divider">
+      <tr v-if="teamList.length === 0">
+        <div class="py-6 px-3">No teams found ...</div>
+      </tr>
+      <tr
+        v-else
+        v-for="team in teamList"
+        :key="team.id"
+        class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
+      >
+        <td
+          @click="$emit('go-to-team-details', team.id)"
+          class="py-4 px-3 max-w-50"
+        >
+          <div class="flex">
+            <span class="truncate">
+              {{ team.id }}
+            </span>
+          </div>
+        </td>
+
+        <td
+          @click="$emit('go-to-team-details', team.id)"
+          class="py-4 px-3 min-w-80"
+        >
+          <span v-if="team.name" class="flex items-center ml-4 truncate">
+            {{ team.name }}
+          </span>
+          <span v-else class="flex items-center ml-4"> (Unnamed team) </span>
+        </td>
+
+        <td @click="$emit('go-to-team-details', team.id)" class="py-4 px-3">
+          <span class="ml-7">
+            {{ team.members?.length }}
+          </span>
+        </td>
+
+        <td>
+          <div class="relative">
+            <tippy interactive trigger="click" theme="popover">
+              <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="
+                      () => {
+                        $emit('delete-team', team.id);
+                        hide();
+                      }
+                    "
+                  />
+                </div>
+              </template>
+            </tippy>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+import { TippyComponent } from 'vue-tippy';
+import { ref } from 'vue';
+import IconTrash from '~icons/lucide/trash';
+import IconMoreHorizontal from '~icons/lucide/more-horizontal';
+import { TeamListQuery } from '~/helpers/backend/graphql';
+
+// Template refs
+const tippyActions = ref<TippyComponent | null>(null);
+
+defineProps<{
+  teamList: TeamListQuery['admin']['allTeams'];
+}>();
+
+defineEmits<{
+  (event: 'go-to-team-details', teamID: string): void;
+  (event: 'delete-team', teamID: string): void;
+}>();
+</script>
--- a/packages/hoppscotch-sh-admin/src/components/users/Table.vue
+++ b/packages/hoppscotch-sh-admin/src/components/users/Table.vue
@@ -70,12 +70,7 @@
        <td>
          <div class="relative">
            <span>
-              <tippy
-                interactive
-                trigger="click"
-                theme="popover"
-                :on-shown="() => tippyActions!.focus()"
-              >
+              <tippy interactive trigger="click" theme="popover">
                <HoppButtonSecondary
                  v-tippy="{ theme: 'tooltip' }"
                  :icon="IconMoreHorizontal"
--- a/packages/hoppscotch-sh-admin/src/pages/dashboard.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/dashboard.vue
@@ -1,6 +1,8 @@
 <template>
  <div class="flex flex-col">
-    <div v-if="fetching" class="flex justify-center">
+    <h1 class="text-lg font-bold text-secondaryDark">Dashboard</h1>
+
+    <div v-if="fetching" class="flex justify-center py-6">
      <HoppSmartSpinner />
    </div>

@@ -9,7 +11,6 @@
    </div>

    <div v-else>
-      <h1 class="text-lg font-bold text-secondaryDark">Dashboard</h1>
      <div class="py-10 grid lg:grid-cols-2 gap-6">
        <DashboardMetricsCard
          :count="metrics.usersCount"
--- a/packages/hoppscotch-sh-admin/src/pages/teams/_id.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/teams/_id.vue
@@ -1,139 +1,62 @@
 <template>
-  <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 class="flex flex-col">
+    <div v-if="fetching" class="flex justify-center">
+      <HoppSmartSpinner />
    </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 v-if="team" class="flex flex-col">
+      <div class="flex items-center space-x-4">
+        <button
+          class="p-2 rounded-3xl bg-divider hover:bg-dividerDark transition flex justify-center items-center"
+          @click="router.push('/teams')"
+        >
+          <icon-lucide-arrow-left class="text-xl" />
+        </button>
+        <div class="flex justify-center items-center space-x-3">
+          <h1 class="text-lg text-accentContrast">
+            {{ team.name }}
+          </h1>
+          <span>/</span>
+          <h2 class="text-lg text-accentContrast">
+            {{ currentTabName }}
+          </h2>
        </div>
      </div>
-    </div>
-  </div>

-  <div v-if="team" class="sm:px-6 px-4">
-    <TeamsMembers v-if="showMembers" @updateTeam="updateTeam()" />
-    <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 class="py-8">
+        <HoppSmartTabs v-model="selectedOptionTab" render-inactive-tabs>
+          <HoppSmartTab :id="'details'" label="Details">
+            <TeamsDetails
+              :team="team"
+              :teamName="teamName"
+              v-model:showRenameInput="showRenameInput"
+              @rename-team="renameTeamName"
+              @delete-team="deleteTeam"
+              class="py-8 px-4"
+            />
+          </HoppSmartTab>
+          <HoppSmartTab :id="'members'" label="Members">
+            <TeamsMembers @update-team="updateTeam()" class="py-8 px-4" />
+          </HoppSmartTab>
+          <HoppSmartTab :id="'invites'" label="Invites">
+            <TeamsPendingInvites :editingTeamID="team.id" class="py-8 px-4" />
+          </HoppSmartTab>
+        </HoppSmartTabs>
+
+        <HoppSmartConfirmModal
+          :show="confirmDeletion"
+          :title="`Confirm Deletion of ${team.name} team?`"
+          @hide-modal="confirmDeletion = false"
+          @resolve="deleteTeamMutation(deleteTeamUID)"
+        />
+      </div>
+    </div>
  </div>
 </template>

 <script setup lang="ts">
 import { useClientHandle, useMutation } from '@urql/vue';
-import { onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useToast } from '../../composables/toast';
 import {
@@ -143,33 +66,26 @@ import {
  TeamMemberRole,
  TeamInfoQuery,
 } from '../../helpers/backend/graphql';
-import IconEdit from '~icons/lucide/edit';
-import IconSave from '~icons/lucide/save';
+import { HoppSmartTabs } from '@hoppscotch/ui';

 const toast = useToast();

-// Switch between team details, members and invites tab
-const showMembers = ref(false);
-const showPendingInvites = ref(false);
-const showTeamDetails = ref(true);
+type OptionTabs = 'details' | 'members' | 'invites';

-const switchToMembersTab = () => {
-  showMembers.value = true;
-  showTeamDetails.value = false;
-  showPendingInvites.value = false;
-};
+const selectedOptionTab = ref<OptionTabs>('details');

-const switchToPendingInvitesTab = () => {
-  showTeamDetails.value = false;
-  showMembers.value = false;
-  showPendingInvites.value = true;
-};
-
-const switchToTeamDetailsTab = () => {
-  showTeamDetails.value = true;
-  showMembers.value = false;
-  showPendingInvites.value = false;
-};
+const currentTabName = computed(() => {
+  switch (selectedOptionTab.value) {
+    case 'details':
+      return 'Team details';
+    case 'members':
+      return 'Team members';
+    case 'invites':
+      return 'Pending invites';
+    default:
+      return '';
+  }
+});

 // Get the details of the team
 const team = ref<TeamInfoQuery['admin']['teamInfo'] | undefined>();
@@ -194,27 +110,28 @@ const getTeamInfo = async () => {
 };

 onMounted(async () => await getTeamInfo());
+
 const updateTeam = async () => await getTeamInfo();

 // Rename the team name
 const showRenameInput = ref(false);
 const teamRename = useMutation(RenameTeamDocument);

-const renameTeamName = async () => {
+const renameTeamName = async (teamName: string) => {
  if (!team.value) return;

-  if (team.value.name === teamName.value) {
+  if (team.value.name === teamName) {
    showRenameInput.value = false;
    return;
  }
-  const variables = { uid: team.value.id, name: teamName.value };
+  const variables = { uid: team.value.id, name: teamName };
  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;
+        team.value.name = teamName;
        toast.success('Team renamed successfully!!');
      }
    }
--- a/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
@@ -1,182 +1,53 @@
 <template>
-  <div>
-    <h3 class="sm:px-6 p-4 text-3xl font-bold text-gray-200">Teams</h3>
+  <div class="flex flex-col">
+    <h1 class="text-lg font-bold text-secondaryDark">Teams</h1>

    <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">
-              <HoppButtonPrimary
-                class="mr-4"
-                label="Create Team"
-                @click="showCreateTeamModal = true"
-              />
-            </div>
+      <div class="flex py-10">
+        <HoppButtonPrimary
+          :icon="IconAddUsers"
+          label="Create team"
+          @click="showCreateTeamModal = true"
+        />
+      </div>

-            <div>
-              <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>
+      <div class="overflow-x-auto">
+        <div
+          v-if="fetching && !error && teamList.length === 0"
+          class="flex justify-center"
+        >
+          <HoppSmartSpinner />
+        </div>

-              <table v-if="teamList.length >= 1" class="w-full text-left">
-                <thead>
-                  <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>
+        <div v-else-if="error">Unable to Load Teams List..</div>

-                <tbody class="text-gray-300">
-                  <tr
-                    v-for="team in teamList"
-                    :key="team.id"
-                    class="border-b border-divider hover:bg-zinc-800 hover:cursor-pointer rounded-xl p-3"
-                  >
-                    <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>
+        <TeamsTable
+          v-else
+          :teamList="teamList"
+          @goToTeamDetails="goToTeamDetails"
+          @deleteTeam="deleteTeam"
+          class=""
+        />

-                    <td
-                      @click="goToTeamDetails(team.id)"
-                      class="sm:p-3 py-5 px-1 min-w-80"
-                    >
-                      <span
-                        v-if="team.name"
-                        class="flex items-center ml-4 truncate"
-                      >
-                        {{ team.name }}
-                      </span>
-                      <span v-else class="flex items-center ml-4">
-                        (Unnamed team)
-                      </span>
-                    </td>
-
-                    <td
-                      @click="goToTeamDetails(team.id)"
-                      class="sm:p-3 py-5 px-1"
-                    >
-                      <span class="ml-7">
-                        {{ team.members?.length }}
-                      </span>
-                    </td>
-
-                    <td>
-                      <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>
-                </tbody>
-              </table>
-              <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"
-              >
-                <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
+          v-if="hasNextPage && teamList.length >= teamsPerPage"
+          class="flex justify-center my-5 px-3 py-2 cursor-pointer font-semibold rounded-3xl bg-dividerDark hover:bg-divider transition mx-auto w-38 text-secondaryDark"
+          @click="fetchNextTeams"
+        >
+          <span>Show more </span>
+          <icon-lucide-chevron-down class="ml-2 text-lg" />
        </div>
      </div>
    </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>
-
+  <TeamsAdd
+    :show="showCreateTeamModal"
+    :allUsersEmail="allUsersEmail"
+    :loading-state="createTeamLoading"
+    @hide-modal="showCreateTeamModal = false"
+    @create-team="createTeam"
+  />
  <HoppSmartConfirmModal
    :show="confirmDeletion"
    :title="`Confirm Deletion of the team?`"
@@ -198,14 +69,9 @@ import { usePagedQuery } from '../../composables/usePagedQuery';
 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';
+import IconAddUsers from '~icons/lucide/plus';

 const toast = useToast();
-// Template refs
-const tippyActions = ref<TippyComponent | null>(null);
-
 // Get Users List
 const { data } = useQuery({ query: MetricsDocument });
 const usersPerPage = computed(() => data.value?.admin.usersCount || 10000);
@@ -238,24 +104,23 @@ const {
 );

 // Create Team
-const teamName = ref('');
-const ownerEmail = ref('');
 const createTeamMutation = useMutation(CreateTeamDocument);
 const showCreateTeamModal = ref(false);
-const getOwnerEmail = (email: string) => (ownerEmail.value = email);
+const createTeamLoading = ref(false);

-const createTeam = async () => {
-  if (teamName.value.length < 6) {
+const createTeam = async (newTeamName: string, ownerEmail: string) => {
+  if (newTeamName.length < 6) {
    toast.error('Team name should be atleast 6 characters long!!');
    return;
  }
-  if (ownerEmail.value.length == 0) {
+  if (ownerEmail.length == 0) {
    toast.error('Please enter email of team owner!!');
    return;
  }
+  createTeamLoading.value = true;
  const userUid =
-    usersList.value.find((user) => user.email === ownerEmail.value)?.uid || '';
-  const variables = { name: teamName.value.trim(), userUid: userUid };
+    usersList.value.find((user) => user.email === ownerEmail)?.uid || '';
+  const variables = { name: newTeamName.trim(), userUid: userUid };
  await createTeamMutation.executeMutation(variables).then((result) => {
    if (result.error) {
      if (result.error.toString() == '[GraphQL] user/not_found') {
@@ -263,13 +128,11 @@ const createTeam = async () => {
      } else {
        toast.error('Failed to create team!!');
      }
-      teamName.value = '';
-      ownerEmail.value = '';
+      createTeamLoading.value = false;
    } else {
      toast.success('Team created successfully!!');
      showCreateTeamModal.value = false;
-      teamName.value = '';
-      ownerEmail.value = '';
+      createTeamLoading.value = false;
      refetch();
    }
  });
--- a/packages/hoppscotch-sh-admin/src/pages/users/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/users/index.vue
@@ -26,6 +26,7 @@
        >
          <HoppSmartSpinner />
        </div>
+
        <div v-else-if="error">Unable to Load Users List..</div>

        <UsersTable