refactor: polish UI of admin dashboard users module (#48)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
2023-03-20 19:18:03 +05:30
parent e978541bf1
commit 73a0255ae8
12 changed files with 372 additions and 193 deletions
--- a/packages/hoppscotch-sh-admin/src/components.d.ts
+++ b/packages/hoppscotch-sh-admin/src/components.d.ts
@@ -1,38 +1,38 @@
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core';
+import '@vue/runtime-core'

-export {};
+export {}

 declare module '@vue/runtime-core' {
  export interface GlobalComponents {
-    AppHeader: typeof import('./components/app/Header.vue')['default'];
-    AppLogin: typeof import('./components/app/Login.vue')['default'];
-    AppLogout: typeof import('./components/app/Logout.vue')['default'];
-    AppModal: typeof import('./components/app/Modal.vue')['default'];
-    AppSidebar: typeof import('./components/app/Sidebar.vue')['default'];
-    AppToast: typeof import('./components/app/Toast.vue')['default'];
-    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary'];
-    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary'];
-    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor'];
-    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal'];
-    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem'];
-    IconLucideBell: typeof import('~icons/lucide/bell')['default'];
-    IconLucideInbox: typeof import('~icons/lucide/inbox')['default'];
-    IconLucideLayoutDashboard: typeof import('~icons/lucide/layout-dashboard')['default'];
-    IconLucideLineChart: typeof import('~icons/lucide/line-chart')['default'];
-    IconLucideLock: typeof import('~icons/lucide/lock')['default'];
-    IconLucideMenu: typeof import('~icons/lucide/menu')['default'];
-    IconLucideSettings: typeof import('~icons/lucide/settings')['default'];
-    IconLucideSidebarClose: typeof import('~icons/lucide/sidebar-close')['default'];
-    IconLucideSidebarOpen: typeof import('~icons/lucide/sidebar-open')['default'];
-    IconLucideUser: typeof import('~icons/lucide/user')['default'];
-    IconLucideUserCog: typeof import('~icons/lucide/user-cog')['default'];
-    IconLucideUsers: typeof import('~icons/lucide/users')['default'];
-    ProfilePicture: typeof import('./components/profile/Picture.vue')['default'];
-    RouterLink: typeof import('vue-router')['RouterLink'];
-    RouterView: typeof import('vue-router')['RouterView'];
-    TeamsAddMembers: typeof import('./components/teams/AddMembers.vue')['default'];
+    AppHeader: typeof import('./components/app/Header.vue')['default']
+    AppLogin: typeof import('./components/app/Login.vue')['default']
+    AppLogout: typeof import('./components/app/Logout.vue')['default']
+    AppModal: typeof import('./components/app/Modal.vue')['default']
+    AppSidebar: typeof import('./components/app/Sidebar.vue')['default']
+    AppToast: typeof import('./components/app/Toast.vue')['default']
+    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
+    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
+    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
+    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
+    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
+    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
+    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
+    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
+    IconLucideLayoutDashboard: typeof import('~icons/lucide/layout-dashboard')['default']
+    IconLucideMenu: typeof import('~icons/lucide/menu')['default']
+    IconLucideMoreHorizontal: typeof import('~icons/lucide/more-horizontal')['default']
+    IconLucideSidebarClose: typeof import('~icons/lucide/sidebar-close')['default']
+    IconLucideSidebarOpen: typeof import('~icons/lucide/sidebar-open')['default']
+    IconLucideUser: typeof import('~icons/lucide/user')['default']
+    IconLucideUsers: typeof import('~icons/lucide/users')['default']
+    ProfilePicture: typeof import('./components/profile/Picture.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    TeamsAddMembers: typeof import('./components/teams/AddMembers.vue')['default']
  }
+
 }
--- a/packages/hoppscotch-sh-admin/src/components/app/Header.vue
+++ b/packages/hoppscotch-sh-admin/src/components/app/Header.vue
@@ -22,10 +22,6 @@
    </div>

    <div class="flex items-center">
-      <button class="flex mx-4 text-gray-400 focus:outline-none toggle-dark">
-        <icon-lucide-bell class="text-gray-300 w-6" />
-      </button>
-
      <div v-if="currentUser" class="relative">
        <button
          @click="dropdownOpen = !dropdownOpen"
@@ -66,12 +62,6 @@
            v-show="dropdownOpen"
            class="absolute right-0 z-20 w-48 py-2 mt-2 bg-zinc-800 rounded-md shadow-xl"
          >
-            <HoppSmartItem to="/profile" :icon="IconUser" :label="'Profile'" />
-            <HoppSmartItem
-              to="/settings"
-              :icon="IconSettings"
-              :label="'Settings'"
-            />
            <AppLogout ref="logout" />
          </div>
        </transition>
@@ -81,8 +71,6 @@
 </template>

 <script setup lang="ts">
-import IconSettings from '~icons/lucide/settings';
-import IconUser from '~icons/lucide/user';
 import { ref } from 'vue';
 import { useReadonlyStream } from '~/composables/stream';
 import { useSidebar } from '~/composables/useSidebar';
--- a/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue
+++ b/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue
@@ -38,7 +38,7 @@
              :class="route.name === '/dashboard' ? 'white' : 'gray'"
            />

-            <span v-if="isExpanded" class="mx-4">Dashboard</span>
+            <span v-if="isExpanded" class="mx-4 font-semibold">Dashboard</span>
          </router-link>

          <router-link
@@ -51,7 +51,7 @@
              :class="route.path === '/users' ? 'white' : 'gray'"
            />

-            <span v-if="isExpanded" class="mx-4">Users</span>
+            <span v-if="isExpanded" class="mx-4 font-semibold">Users</span>
          </router-link>

          <router-link
@@ -64,20 +64,7 @@
              :class="route.name === '/teams' ? 'white' : 'gray'"
            />

-            <span v-if="isExpanded" class="mx-4">Teams</span>
-          </router-link>
-
-          <router-link
-            class="flex items-center px-6 py-4 duration-200 border-l-4 rounded-sm"
-            :class="[route.name === '/settings' ? activeClass : inactiveClass]"
-            to="/settings"
-          >
-            <icon-lucide-settings
-              class="text-xl"
-              :class="route.name === '/settings' ? 'white' : 'gray'"
-            />
-
-            <span v-if="isExpanded" class="mx-4">Settings</span>
+            <span v-if="isExpanded" class="mx-4 font-semibold">Teams</span>
          </router-link>
        </nav>
      </div>
--- a/packages/hoppscotch-sh-admin/src/composables/usePagedQuery.ts
+++ b/packages/hoppscotch-sh-admin/src/composables/usePagedQuery.ts
@@ -17,40 +17,40 @@ export function usePagedQuery<
  const fetching = ref(true);
  const error = ref(false);
  const list = ref<any[]>([]);
-  const currentPage = ref(1);
+  const currentPage = ref(0);
+  const hasNextPage = ref(true);

-  onMounted(async () => {
+  const fetchNextPage = async () => {
    fetching.value = true;
    try {
-      const result = await client.query(query, variables).toPromise();
+      const result = await client.query(query, {
+        ...variables,
+        cursor: list.value.length > 0
+          ? getCursor(list.value.at(-1))
+          : undefined
+      }).toPromise();

      const resultList = getList(result.data!);

+      if (resultList.length < 20) {
+        hasNextPage.value = false
+      }
+
      list.value.push(...resultList);
+      currentPage.value++;
    } catch (e) {
      error.value = true;
    }
    fetching.value = false;
+  }
+
+  onMounted(async () => {
+    await fetchNextPage()
  });

  const goToNextPage = async () => {
-    if (list.value.length % 20 === 0) {
-      fetching.value = true;
-      try {
-        const result = await client
-          .query(query, {
-            ...variables,
-            cursor: getCursor(list.value.at(-1)),
-          })
-          .toPromise();
-        const resultList = getList(result.data!);
-
-        list.value.push(...resultList);
-        currentPage.value++;
-      } catch (e) {
-        error.value = true;
-      }
-      fetching.value = false;
+    if (hasNextPage.value) {
+      await fetchNextPage()
    }
  };

@@ -59,5 +59,6 @@ export function usePagedQuery<
    error,
    goToNextPage,
    list,
+    hasNextPage,
  };
 }
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveUserAccountByAdmin.graphql
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveUserAccountByAdmin.graphql
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveUserAsAdmin.graphql
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveUserAsAdmin.graphql
@@ -0,0 +1,3 @@
+mutation RemoveUserAsAdmin($uid: String!) {
+  removeUserAsAdmin(userUID: $uid)
+}
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/UserInfo.graphql
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/UserInfo.graphql
@@ -4,6 +4,7 @@ query UserInfo($uid: ID!) {
      uid
      displayName
      email
+      isAdmin
      photoURL
      createdOn
    }
--- a/packages/hoppscotch-sh-admin/src/pages/dashboard.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/dashboard.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="sm:px-6 p-4">
-    <h3 class="text-3xl font-medium text-gray-200 mb-6">Dashboard</h3>
+    <h3 class="text-3xl font-bold text-gray-200 mb-6">Dashboard</h3>

    <div class="mt-4">
      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
@@ -34,11 +34,11 @@
          <div
            class="flex items-center px-5 py-6 bg-zinc-800 rounded-md shadow-sm"
          >
-            <icon-lucide-lock class="text-2xl text-cyan-400" />
+            <icon-lucide-line-chart class="text-2xl text-cyan-400" />

            <div class="mx-5">
              <h4 class="text-2xl font-semibold text-gray-200">20</h4>
-              <div class="text-gray-400">Total Roles</div>
+              <div class="text-gray-400">Total Requests</div>
            </div>
          </div>
        </div>
@@ -47,7 +47,7 @@
          <div
            class="flex items-center px-5 py-6 bg-zinc-800 rounded-md shadow-sm"
          >
-            <icon-lucide-line-chart class="text-2xl text-orange-400" />
+            <icon-lucide-folder-tree class="text-2xl text-orange-400" />

            <div class="mx-5">
              <h4 class="text-2xl font-semibold text-gray-200">215</h4>
--- a/packages/hoppscotch-sh-admin/src/pages/users/_id.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/users/_id.vue
@@ -1,21 +1,43 @@
 <template>
  <div v-if="fetching" class="flex justify-center"><HoppSmartSpinner /></div>
  <div v-else>
-    <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">User Details</h3>
+    <div class="ml-3">
+      <button
+        class="p-2 mb-2 rounded-3xl bg-zinc-800"
+        @click="router.push('/users')"
+      >
+        <icon-lucide-arrow-left class="text-xl" />
+      </button>
+    </div>
+    <h3 class="sm:px-6 p-4 text-3xl font-bold text-gray-200">User Details</h3>

    <div>
      <div>
        <div class="px-6 rounded-md">
          <div class="grid gap-6 mt-4">
-            <div v-if="user.photoURL">
-              <img
-                class="object-cover h-20 w-20 rounded-3xl mb-3"
-                :src="user.photoURL"
-              />
+            <div v-if="user.photoURL" class="relative h-20 w-20">
+              <img class="object-cover rounded-3xl mb-3" :src="user.photoURL" />
+              <span
+                v-if="user.isAdmin"
+                class="absolute bottom-0 ml-17 rounded-xl p-1 bg-emerald-800 border-1 border-emerald-400 text-xs text-emerald-400 px-2"
+              >
+                Admin
+              </span>
            </div>
-            <div v-else class="bg-primaryDark w-17 p-3 rounded-2xl mb-3">
+
+            <div
+              v-else
+              class="bg-primaryDark w-17 p-3 rounded-2xl mb-3 relative"
+            >
              <icon-lucide-user class="text-4xl" />
+              <span
+                v-if="user.isAdmin"
+                class="absolute bottom-0 ml-11 rounded-xl p-1 bg-emerald-800 border-1 border-emerald-400 text-xs text-emerald-400 px-2"
+              >
+                Admin
+              </span>
            </div>
+
            <div v-if="user.uid">
              <label class="text-gray-200" for="username">UID</label>
              <div
@@ -24,12 +46,15 @@
                {{ user.uid }}
              </div>
            </div>
-            <div v-if="user.displayName">
+            <div>
              <label class="text-gray-200" for="username">Name</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"
              >
-                {{ user.displayName }}
+                <span v-if="user.displayName">
+                  {{ user.displayName }}
+                </span>
+                <span v-else> (Unnamed user) </span>
              </div>
            </div>
            <div v-if="user.email">
@@ -51,50 +76,93 @@
          </div>

          <div class="flex justify-start mt-8">
+            <span v-if="!user.isAdmin">
+              <HoppButtonPrimary
+                class="mr-4"
+                filled
+                outline
+                label="Make Admin"
+                @click="makeUserAdmin(user.uid)"
+              />
+            </span>
+            <span v-else>
+              <HoppButtonPrimary
+                class="mr-4"
+                filled
+                outline
+                label="Remove Admin Privilege"
+                @click="makeAdminToUser(user.uid)"
+              />
+            </span>
            <HoppButtonSecondary
-              class="mr-4"
+              v-if="!user.isAdmin"
+              class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
              filled
              outline
              label="Delete"
              @click="deleteUser(user.uid)"
            />
+
+            <HoppButtonSecondary
+              v-if="user.isAdmin"
+              class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
+              filled
+              outline
+              label="Delete"
+              @click="
+                toast.error('Remove admin privilege to delete the user!!')
+              "
+            />
          </div>
        </div>
      </div>
    </div>
    <HoppSmartConfirmModal
      :show="confirmDeletion"
-      :title="`Confirm Deletion of User?`"
+      :title="`Confirm deletion of user?`"
      @hide-modal="confirmDeletion = false"
      @resolve="deleteUserMutation(deleteUserUID)"
    />
+    <HoppSmartConfirmModal
+      :show="confirmUserToAdmin"
+      :title="`Do you want to make this user into an admin?`"
+      @hide-modal="confirmUserToAdmin = false"
+      @resolve="makeUserAdminMutation(userToAdminUID)"
+    />
+    <HoppSmartConfirmModal
+      :show="confirmAdminToUser"
+      :title="`Do you want to remove admin status from this user?`"
+      @hide-modal="confirmAdminToUser = false"
+      @resolve="makeAdminToUserMutation(adminToUserUID)"
+    />
  </div>
 </template>

 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useMutation } from '@urql/vue';
 import {
+  MakeUserAdminDocument,
  UserInfoDocument,
  RemoveUserAccountByAdminDocument,
+  RemoveUserAsAdminDocument,
 } from '../../helpers/backend/graphql';
 import { useClientHandle } from '@urql/vue';
 import { format } from 'date-fns';
 import { useRoute, useRouter } from 'vue-router';
 import { useToast } from '../../composables/toast';
-import { HoppButtonSecondary, HoppSmartSpinner } from '@hoppscotch/ui';
+
+const toast = useToast();

 // Get Proper Date Formats
 const getCreatedDateAndTime = (date: string) =>
  format(new Date(date), 'd-MM-yyyy  hh:mm a');

-const route = useRoute();
-const toast = useToast();
-
 // Get User Info
 const user = ref();
 const { client } = useClientHandle();
 const fetching = ref(true);
+const route = useRoute();

 onMounted(async () => {
  fetching.value = true;
@@ -103,7 +171,7 @@ onMounted(async () => {
    .toPromise();

  if (result.error) {
-    toast.error('Unable to Load User Info..');
+    toast.error('Unable to load user info..');
  }
  user.value = result.data?.admin.userInfo ?? {};
  fetching.value = false;
@@ -123,19 +191,77 @@ const deleteUser = (id: string) => {
 const deleteUserMutation = async (id: string | null) => {
  if (!id) {
    confirmDeletion.value = false;
-    toast.error('User Deletion Failed');
+    toast.error('User deletion failed!!');
    return;
  }
  const variables = { uid: id };
  await userDeletion.executeMutation(variables).then((result) => {
    if (result.error) {
-      toast.error('User Deletion Failed');
+      toast.error('User deletion failed!!');
    } else {
-      toast.success('User Deleted Successfully');
+      toast.success('User deleted successfully!!');
    }
  });
  confirmDeletion.value = false;
  deleteUserUID.value = null;
  router.push('/users');
 };
+
+// Make User Admin
+const userToAdmin = useMutation(MakeUserAdminDocument);
+const confirmUserToAdmin = ref(false);
+const userToAdminUID = ref<string | null>(null);
+
+const makeUserAdmin = (id: string) => {
+  confirmUserToAdmin.value = true;
+  userToAdminUID.value = id;
+};
+
+const makeUserAdminMutation = async (id: string | null) => {
+  if (!id) {
+    confirmUserToAdmin.value = false;
+    toast.error('User deletion failed!!');
+    return;
+  }
+  const variables = { uid: id };
+  await userToAdmin.executeMutation(variables).then((result) => {
+    if (result.error) {
+      toast.error('Failed to make user an admin!!');
+    } else {
+      user.value.isAdmin = true;
+      toast.success('User is now an admin!!');
+    }
+  });
+  confirmUserToAdmin.value = false;
+  userToAdminUID.value = null;
+};
+
+// Remove Admin Status from a current admin user
+const adminToUser = useMutation(RemoveUserAsAdminDocument);
+const confirmAdminToUser = ref(false);
+const adminToUserUID = ref<string | null>(null);
+
+const makeAdminToUser = (id: string) => {
+  confirmAdminToUser.value = true;
+  adminToUserUID.value = id;
+};
+
+const makeAdminToUserMutation = async (id: string | null) => {
+  if (!id) {
+    confirmAdminToUser.value = false;
+    toast.error('Failed to remove admin status!!');
+    return;
+  }
+  const variables = { uid: id };
+  await adminToUser.executeMutation(variables).then((result) => {
+    if (result.error) {
+      toast.error('Failed to remove admin status!!');
+    } else {
+      user.value.isAdmin = false;
+      toast.success('Admin status removed!!');
+    }
+  });
+  confirmAdminToUser.value = false;
+  adminToUserUID.value = null;
+};
 </script>
--- a/packages/hoppscotch-sh-admin/src/pages/users/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/users/index.vue
@@ -1,23 +1,23 @@
 <template>
  <div>
-    <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Users</h3>
+    <h3 class="sm:px-6 p-4 text-3xl font-bold text-gray-200">Users</h3>

-    <!-- Table List View for All Users -->
+    <!-- Table View for All Users -->
    <div class="flex flex-col">
-      <div class="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-4 lg:-mx-8 lg:px-8">
+      <div class="pt-2 my-2 overflow-x-auto sm:-mx-6 sm:px-4 lg:-mx-8 lg:px-8">
        <div class="inline-block min-w-full overflow-hidden align-middle">
-          <div class="sm:px-7 p-4">
+          <div class="sm:px-7 px-4 pt-4 pb-1">
            <div class="flex w-full items-center mb-7">
              <HoppButtonPrimary
                class="mr-4"
-                label="Invite User"
+                label="Invite a User"
                @click="showInviteUserModal = true"
              />

              <HoppButtonSecondary
                filled
                outline
-                label="Invite Users"
+                label="Invited Users"
                :to="'/users/invited'"
              />
            </div>
@@ -36,13 +36,13 @@
              >
                <thead>
                  <tr
-                    class="text-gray-200 border-b border-gray-600 text-sm text-center"
+                    class="text-gray-200 border-b border-gray-600 text-sm font-bold"
                  >
-                    <th class="font-normal px-3 pt-0 pb-3">User ID</th>
-                    <th class="font-normal px-3 pt-0 pb-3">Name</th>
-                    <th class="font-normal px-3 pt-0 pb-3">Email</th>
-                    <th class="font-normal px-3 pt-0 pb-3">Date</th>
-                    <th class="font-normal px-3 pt-0 pb-3"></th>
+                    <th class="px-3 pt-0 pb-3">User ID</th>
+                    <th class="px-3 pt-0 pb-3">Name</th>
+                    <th class="px-3 pt-0 pb-3">Email</th>
+                    <th class="px-3 pt-0 pb-3">Date</th>
+                    <th class="px-3 pt-0 pb-3"></th>
                  </tr>
                </thead>

@@ -50,7 +50,7 @@
                  <tr
                    v-for="user in usersList"
                    :key="user.uid"
-                    class="border-b border-gray-600 hover:bg-zinc-800 rounded-xl"
+                    class="border-b border-gray-600 hover:bg-zinc-800 hover:cursor-pointer rounded-xl"
                  >
                    <td
                      @click="goToUserDetails(user)"
@@ -62,57 +62,56 @@
                        </span>
                      </div>
                    </td>
+
                    <td
                      @click="goToUserDetails(user)"
                      class="sm:p-3 py-2 px-1 0"
                    >
                      <div
                        v-if="user.displayName"
-                        class="flex items-center justify-center"
+                        class="flex items-center ml-2"
                      >
                        {{ user.displayName }}
                        <span
                          v-if="user.isAdmin"
-                          class="rounded-xl p-1 border-1 border-emerald-600 text-xs text-emerald-600 ml-2"
+                          class="rounded-xl p-1 bg-emerald-300 bg-opacity-15 border-1 border-emerald-400 text-xs text-emerald-400 px-2 ml-2"
                        >
                          Admin
                        </span>
                      </div>
-                      <div
-                        v-else
-                        class="flex items-center justify-center text-center"
-                      >
-                        <span v-if="!user.isAdmin"> - </span>
+                      <div v-else class="flex items-center">
+                        <span class="ml-2"> (Unnamed user) </span>
                        <span
                          v-if="user.isAdmin"
-                          class="rounded-xl p-1 border-1 border-emerald-600 text-xs text-emerald-600 ml-2"
+                          class="rounded-xl p-1 bg-emerald-300 bg-opacity-15 border-1 border-emerald-400 text-xs text-emerald-400 px-2 ml-2"
                        >
                          Admin
                        </span>
                      </div>
                    </td>
-                    <td
-                      @click="goToUserDetails(user)"
-                      class="sm:p-3 py-2 px-1 text-sky-300 text-center"
-                    >
-                      {{ user.email }}
-                    </td>

                    <td @click="goToUserDetails(user)" class="sm:p-3 py-2 px-1">
-                      <div class="flex items-center justify-center">
+                      <span class="ml-2">
+                        {{ user.email }}
+                      </span>
+                    </td>
+
+                    <td @click="goToUserDetails(user)" class="sm:p-3 py-2 px-1">
+                      <div class="flex items-center ml-2">
                        <div class="flex flex-col">
                          {{ getCreatedDate(user.createdOn) }}
-                          <div class="text-gray-400 text-xs text-center">
+                          <div class="text-gray-400 text-xs">
                            {{ getCreatedTime(user.createdOn) }}
                          </div>
                        </div>
                      </div>
                    </td>
+
                    <td>
                      <div class="relative">
                        <button
                          @click.stop="toggleDropdown(user.uid)"
-                          class="w-8 h-8 dropdown inline-flex items-center justify-right text-gray-400"
+                          class="w-8 h-8 dropdown inline-flex items-center justify-end text-gray-400"
                        >
                          <icon-lucide-more-horizontal />
                        </button>
@@ -127,21 +126,29 @@
                        >
                          <div
                            v-show="activeUserId && activeUserId == user.uid"
-                            class="absolute right-0 z-20 w-28 mt-5 bg-zinc-800 rounded-md shadow-xl"
+                            class="absolute right-0 z-20 bg-zinc-800 rounded-md shadow-xl"
                          >
-                            <button
+                            <HoppSmartItem
                              v-if="!user.isAdmin"
+                              :icon="IconUserCheck"
+                              :label="'Make Admin'"
+                              class="!hover:bg-emerald-600 w-full"
                              @click="makeUserAdmin(user.uid)"
-                              class="block w-full h-10 px-4 py-2 text-sm text-gray-200 hover:bg-emerald-700 hover:text-white rounded-md"
-                            >
-                              Make admin
-                            </button>
-                            <button
-                              class="block w-full h-10 px-4 py-2 text-sm text-gray-200 hover:bg-red-700 hover:text-white rounded-md"
+                            />
+                            <HoppSmartItem
+                              v-else
+                              :icon="IconUserMinus"
+                              :label="'Remove Admin Status'"
+                              class="!hover:bg-emerald-600 w-full"
+                              @click="makeAdminToUser(user.uid)"
+                            />
+                            <HoppSmartItem
+                              v-if="!user.isAdmin"
+                              :icon="IconTrash"
+                              :label="'Delete User'"
+                              class="!hover:bg-red-600 w-full"
                              @click="deleteUser(user.uid)"
-                            >
-                              Delete
-                            </button>
+                            />
                          </div>
                        </transition>
                      </div>
@@ -150,14 +157,15 @@
                </tbody>
              </table>

-              <div v-if="usersList.length >= 20" class="text-center">
-                <button
-                  @click="fetchNextUsers"
-                  class="mt-5 p-2 rounded-3xl bg-gray-700"
-                >
-                  <icon-lucide-chevron-down class="text-xl" />
-                </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="fetchNextUsers"
+              >
+                <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>
@@ -204,33 +212,42 @@

    <HoppSmartConfirmModal
      :show="confirmDeletion"
-      :title="`Confirm User Deletion?`"
+      :title="`Confirm user deletion?`"
      @hide-modal="confirmDeletion = false"
      @resolve="deleteUserMutation(deleteUserUID)"
    />
    <HoppSmartConfirmModal
      :show="confirmUserToAdmin"
-      :title="`Do you want to make this User into an Admin?`"
+      :title="`Do you want to make this user into an admin?`"
      @hide-modal="confirmUserToAdmin = false"
-      @resolve="makeUserAdminMutation(adminUserUID)"
+      @resolve="makeUserAdminMutation(userToAdminUID)"
+    />
+    <HoppSmartConfirmModal
+      :show="confirmAdminToUser"
+      :title="`Do you want to remove admin status from this user?`"
+      @hide-modal="confirmAdminToUser = false"
+      @resolve="makeAdminToUserMutation(adminToUserUID)"
    />
  </div>
 </template>

 <script setup lang="ts">
-import { onMounted, onBeforeUnmount, ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useMutation } from '@urql/vue';
 import {
-  UsersListDocument,
  InviteUserToSignInDocument,
-  RemoveUserAccountByAdminDocument,
  MakeUserAdminDocument,
+  RemoveUserAccountByAdminDocument,
+  RemoveUserAsAdminDocument,
+  UsersListDocument,
 } from '../../helpers/backend/graphql';
 import { usePagedQuery } from '../../composables/usePagedQuery';
 import { format } from 'date-fns';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useToast } from '../../composables/toast';
-import { HoppButtonSecondary, HoppSmartSpinner } from '@hoppscotch/ui';
+import IconTrash from '~icons/lucide/trash';
+import IconUserMinus from '~icons/lucide/user-minus';
+import IconUserCheck from '~icons/lucide/user-check';

 const toast = useToast();

@@ -244,6 +261,7 @@ const {
  error,
  goToNextPage: fetchNextUsers,
  list: usersList,
+  hasNextPage,
 } = usePagedQuery(
  UsersListDocument,
  (x) => x.admin.allUsers,
@@ -260,14 +278,16 @@ const sendInvite = async () => {
  const variables = { inviteeEmail: email.value.trim() };
  await sendInvitation.executeMutation(variables).then((result) => {
    if (result.error) {
-      toast.error('Failed to Send Invitation');
+      toast.error('Failed to send invitation!!');
    } else {
-      toast.success('Email Invitation Sent Successfully');
+      toast.success('Email invitation sent successfully!!');
+      showInviteUserModal.value = false;
    }
  });
 };

 // Go to Individual User Details Page
+const route = useRoute();
 const router = useRouter();
 const goToUserDetails = (user: any) => {
  router.push('/users/' + user.uid);
@@ -294,6 +314,12 @@ const close = (e: any) => {
 onMounted(() => document.addEventListener('click', close));
 onBeforeUnmount(() => document.removeEventListener('click', close));

+// Reload Users Page when routed back to the users page
+watch(
+  () => route.params.id,
+  () => window.location.reload()
+);
+
 // User Deletion
 const userDeletion = useMutation(RemoveUserAccountByAdminDocument);
 const confirmDeletion = ref(false);
@@ -307,15 +333,15 @@ const deleteUser = (id: string) => {
 const deleteUserMutation = async (id: string | null) => {
  if (!id) {
    confirmDeletion.value = false;
-    toast.error('User Deletion Failed');
+    toast.error('User deletion failed!!');
    return;
  }
  const variables = { uid: id };
  await userDeletion.executeMutation(variables).then((result) => {
    if (result.error) {
-      toast.error('User Deletion Failed');
+      toast.error('User deletion failed!!');
    } else {
-      toast.success('User Deleted Successfully');
+      toast.success('User deleted successfully!!');
      usersList.value = usersList.value.filter((user) => user.uid !== id);
      toggleDropdown(id);
    }
@@ -327,25 +353,25 @@ const deleteUserMutation = async (id: string | null) => {
 // Make User Admin
 const userToAdmin = useMutation(MakeUserAdminDocument);
 const confirmUserToAdmin = ref(false);
-const adminUserUID = ref<string | null>(null);
+const userToAdminUID = ref<string | null>(null);

 const makeUserAdmin = (id: string) => {
  confirmUserToAdmin.value = true;
-  adminUserUID.value = id;
+  userToAdminUID.value = id;
 };

 const makeUserAdminMutation = async (id: string | null) => {
  if (!id) {
    confirmUserToAdmin.value = false;
-    toast.error('User Deletion Failed');
+    toast.error('Failed to make user an admin!!');
    return;
  }
  const variables = { uid: id };
  await userToAdmin.executeMutation(variables).then((result) => {
    if (result.error) {
-      toast.error('Failed to make user an admin');
+      toast.error('Failed to make user an admin!!');
    } else {
-      toast.success('User is now an Admin');
+      toast.success('User is now an admin!!');
      usersList.value = usersList.value.map((user) => {
        if (user.uid === id) {
          user.isAdmin = true;
@@ -355,6 +381,40 @@ const makeUserAdminMutation = async (id: string | null) => {
    }
  });
  confirmUserToAdmin.value = false;
-  adminUserUID.value = null;
+  userToAdminUID.value = null;
+};
+
+// Remove Admin Status from a current Admin
+const adminToUser = useMutation(RemoveUserAsAdminDocument);
+const confirmAdminToUser = ref(false);
+const adminToUserUID = ref<string | null>(null);
+
+const makeAdminToUser = (id: string) => {
+  confirmAdminToUser.value = true;
+  adminToUserUID.value = id;
+};
+
+const makeAdminToUserMutation = async (id: string | null) => {
+  if (!id) {
+    confirmAdminToUser.value = false;
+    toast.error('Failed to remove admin status!!');
+    return;
+  }
+  const variables = { uid: id };
+  await adminToUser.executeMutation(variables).then((result) => {
+    if (result.error) {
+      toast.error('Failed to remove admin status!!');
+    } else {
+      toast.success('Admin status removed!!');
+      usersList.value = usersList.value.map((user) => {
+        if (user.uid === id) {
+          user.isAdmin = false;
+        }
+        return user;
+      });
+    }
+  });
+  confirmAdminToUser.value = false;
+  adminToUserUID.value = null;
 };
 </script>
--- a/packages/hoppscotch-sh-admin/src/pages/users/invited.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/users/invited.vue
@@ -1,6 +1,14 @@
 <template>
  <div>
-    <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">
+    <div class="ml-3">
+      <button
+        class="p-2 mb-2 rounded-3xl bg-zinc-800"
+        @click="router.push('/users')"
+      >
+        <icon-lucide-arrow-left class="text-xl" />
+      </button>
+    </div>
+    <h3 class="sm:px-6 p-4 text-3xl font-bold text-gray-200 mb-2">
      Invited Users
    </h3>

@@ -13,18 +21,18 @@
                <HoppSmartSpinner />
              </div>
              <div v-else-if="error">
-                <p class="text-xl">No Invited Users Found</p>
+                <p class="text-xl">No Invited Users Found..</p>
              </div>

              <table v-else class="w-full text-left">
                <thead>
                  <tr
-                    class="text-gray-200 border-b border-gray-600 text-sm text-center"
+                    class="text-gray-200 border-b border-gray-600 text-sm font-bold"
                  >
-                    <th class="font-normal px-3 pt-0 pb-3">Admin ID</th>
-                    <th class="font-normal px-3 pt-0 pb-3">Admin Email</th>
-                    <th class="font-normal px-3 pt-0 pb-3">Invitee Email</th>
-                    <th class="font-normal px-3 pt-0 pb-3">Invited On</th>
+                    <th class="px-3 pt-0 pb-3">Admin ID</th>
+                    <th class="px-3 pt-0 pb-3">Admin Email</th>
+                    <th class="px-3 pt-0 pb-3">Invitee Email</th>
+                    <th class="px-3 pt-0 pb-3">Invited On</th>
                  </tr>
                </thead>
                <tbody
@@ -35,27 +43,29 @@
                  <tr
                    class="border-b border-gray-600 hover:bg-zinc-800 rounded-xl"
                  >
-                    <td class="sm:p-3 py-2 px-3 max-w-30">
-                      <div class="flex justify-center">
-                        <span class="ml-3 truncate">
+                    <td class="sm:p-3 py-2 px-3 max-w-30 ml-2">
+                      <div>
+                        <span class="truncate">
                          {{ user?.adminUid }}
                        </span>
                      </div>
                    </td>
-                    <td class="sm:p-3 py-2 px-1 text-sky-300">
-                      <div class="flex items-center justify-center">
+                    <td class="sm:p-3 py-2 px-1">
+                      <span class="flex items-center ml-2">
                        {{ user?.adminEmail }}
-                      </div>
+                      </span>
                    </td>
-                    <td class="sm:p-3 py-2 px-1 text-sky-300 text-center">
-                      {{ user?.inviteeEmail }}
+                    <td class="sm:p-3 py-2 px-1 ml-4">
+                      <span class="ml-2">
+                        {{ user?.inviteeEmail }}
+                      </span>
                    </td>

                    <td class="sm:p-3 py-2 px-1">
-                      <div class="flex items-center justify-center">
+                      <div class="flex items-center ml-2">
                        <div class="flex flex-col">
                          {{ getCreatedDate(user?.invitedOn) }}
-                          <div class="text-gray-400 text-xs text-center">
+                          <div class="text-gray-400 text-xs">
                            {{ getCreatedTime(user?.invitedOn) }}
                          </div>
                        </div>
@@ -78,6 +88,9 @@ import { useQuery } from '@urql/vue';
 import { InvitedUsersDocument } from '../../helpers/backend/graphql';
 import { format } from 'date-fns';
 import { HoppSmartSpinner } from '@hoppscotch/ui';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();

 // Get Proper Date Formats
 const getCreatedDate = (date: string) => format(new Date(date), 'dd-MM-yyyy');
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8853,7 +8853,7 @@ packages:
    hasBin: true

  /after/0.8.2:
-    resolution: {integrity: sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=}
+    resolution: {integrity: sha512-QbJ0NTQ/I9DI3uSJA4cbexiwQeRAfjPScqIbSjUDd9TOrcg6pTkdgziesOqxBMBzit8vFCTwrP27t13vFOORRA==}
    dev: false

  /agent-base/6.0.2:
@@ -9462,7 +9462,7 @@ packages:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}

  /base64-arraybuffer/0.1.4:
-    resolution: {integrity: sha1-mBjHngWbE1X5fgQooBfIOOkLqBI=}
+    resolution: {integrity: sha512-a1eIFi4R9ySrbiMuyTGx5e92uRH5tQY6kArNcFaKBUleIoLjdjBg7Zxm3Mqm3Kmkf27HLR/1fnxX9q8GQ7Iavg==}
    engines: {node: '>= 0.6.0'}
    dev: false

@@ -10086,14 +10086,14 @@ packages:
    dev: true

  /component-bind/1.0.0:
-    resolution: {integrity: sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=}
+    resolution: {integrity: sha512-WZveuKPeKAG9qY+FkYDeADzdHyTYdIboXS59ixDeRJL5ZhxpqUnxSOwop4FQjMsiYm3/Or8cegVbpAHNA7pHxw==}
    dev: false

  /component-emitter/1.3.0:
    resolution: {integrity: sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==}

  /component-inherit/0.0.3:
-    resolution: {integrity: sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=}
+    resolution: {integrity: sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA==}
    dev: false

  /concat-map/0.0.1:
@@ -13382,7 +13382,7 @@ packages:
    dev: false

  /has-cors/1.1.0:
-    resolution: {integrity: sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=}
+    resolution: {integrity: sha512-g5VNKdkFuUuVCP9gYfDJHjK2nqdQJ7aDLTnycnc2+RvsOQbuLdF5pm7vuE5J76SEBIQjs4kQY/BWq74JUmjbXA==}
    dev: false

  /has-flag/3.0.0:
@@ -13775,7 +13775,7 @@ packages:
    engines: {node: '>=8'}

  /indexof/0.0.1:
-    resolution: {integrity: sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=}
+    resolution: {integrity: sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg==}
    dev: false

  /inflight/1.0.6:
@@ -19407,7 +19407,7 @@ packages:
    dev: true

  /to-array/0.1.4:
-    resolution: {integrity: sha1-F+bBH3PdTz10zaek/zI46a2b+JA=}
+    resolution: {integrity: sha512-LhVdShQD/4Mk4zXNroIQZJC+Ap3zgLcDuwEdcmLv9CCO73NWockQDwyUnW/m8VX/EElfL6FcYx7EeutN4HJA6A==}
    dev: false

  /to-fast-properties/2.0.0:
@@ -22226,7 +22226,7 @@ packages:
    dev: false

  /yeast/0.1.2:
-    resolution: {integrity: sha1-AI4G2AlDIMNy28L47XagymyKxBk=}
+    resolution: {integrity: sha512-8HFIh676uyGYP6wP13R/j6OJ/1HwJ46snpvzE7aHAN3Ryqh2yX6Xox2B4CUmTwwOIzlG3Bs7ocsP5dZH/R1Qbg==}
    dev: false

  /yn/3.1.1: