From 55c191305cbd5d93c08788c69684d572938385df Mon Sep 17 00:00:00 2001
From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com>
Date: Fri, 7 Jul 2023 10:30:56 +0530
Subject: [PATCH] refactor: replaced table with hoppsmarttable in invited users
 page and code cleanup

---
 packages/hoppscotch-sh-admin/locales/en.json  |   3 +-
 .../src/components/teams/Table.vue            | 102 -----------
 .../src/components/users/Table.vue            | 173 ------------------
 .../src/components/users/Tables.vue           | 117 ------------
 .../src/pages/teams/index.vue                 |  25 ++-
 .../src/pages/users/index.vue                 |  70 +++----
 .../src/pages/users/invited.vue               | 104 +++++------
 .../src/components/smart/Table.vue            |  50 +++--
 8 files changed, 126 insertions(+), 518 deletions(-)
 delete mode 100644 packages/hoppscotch-sh-admin/src/components/teams/Table.vue
 delete mode 100644 packages/hoppscotch-sh-admin/src/components/users/Table.vue
 delete mode 100644 packages/hoppscotch-sh-admin/src/components/users/Tables.vue

diff --git a/packages/hoppscotch-sh-admin/locales/en.json b/packages/hoppscotch-sh-admin/locales/en.json
index a57b9d648..300c65caa 100644
--- a/packages/hoppscotch-sh-admin/locales/en.json
+++ b/packages/hoppscotch-sh-admin/locales/en.json
@@ -96,9 +96,10 @@
     "load_info_error": "Unable to load team info",
     "load_list_error": "Unable to Load Teams List",
     "members": "Number of members",
-    "name": "Team name",
+    "name": "Team Name",
     "no_members": "No members in this team. Add members to this team to collaborate",
     "no_pending_invites": "No pending invites",
+    "no_teams": "No teams found",
     "pending_invites": "Pending invites",
     "remove": "Remove",
     "rename": "Rename",
diff --git a/packages/hoppscotch-sh-admin/src/components/teams/Table.vue b/packages/hoppscotch-sh-admin/src/components/teams/Table.vue
deleted file mode 100644
index ba86c71eb..000000000
--- a/packages/hoppscotch-sh-admin/src/components/teams/Table.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<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="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>
diff --git a/packages/hoppscotch-sh-admin/src/components/users/Table.vue b/packages/hoppscotch-sh-admin/src/components/users/Table.vue
deleted file mode 100644
index 4f51d6886..000000000
--- a/packages/hoppscotch-sh-admin/src/components/users/Table.vue
+++ /dev/null
@@ -1,173 +0,0 @@
-<template>
-  <div
-    class="overflow-hidden rounded-md border border-dividerDark shadow-md m-5"
-  >
-    <table class="w-full">
-      <thead>
-        <tr
-          class="text-secondary border-b border-dividerDark text-sm text-left bg-primaryLight"
-        >
-          <th class="px-6 py-3">{{ t('users.id') }}</th>
-          <th class="px-6 py-3">{{ t('users.name') }}</th>
-          <th class="px-6 py-3">{{ t('users.email') }}</th>
-          <th class="px-6 py-3">{{ t('users.date') }}</th>
-          <th class="px-6 py-3"></th>
-        </tr>
-      </thead>
-
-      <tbody class="divide-y divide-divider">
-        <tr
-          v-for="user in usersList"
-          :key="user.uid"
-          class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
-        >
-          <td
-            @click="$emit('goToUserDetails', user.uid)"
-            class="py-1 px-3 max-w-40"
-          >
-            <div class="flex">
-              <span class="truncate">
-                {{ user.uid }}
-              </span>
-            </div>
-          </td>
-
-          <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
-            <div v-if="user.displayName" class="flex items-center space-x-3">
-              <span>
-                {{ user.displayName }}
-              </span>
-              <span
-                v-if="user.isAdmin"
-                class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
-              >
-                {{ t('users.admin') }}
-              </span>
-            </div>
-            <div v-else class="flex items-center space-x-3">
-              <span> {{ t('users.unnamed') }} </span>
-              <span
-                v-if="user.isAdmin"
-                class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
-              >
-                {{ t('users.admin') }}
-              </span>
-            </div>
-          </td>
-
-          <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
-            <span>
-              {{ user.email }}
-            </span>
-          </td>
-
-          <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
-            <div class="flex items-center">
-              <div class="flex flex-col">
-                {{ getCreatedDate(user.createdOn) }}
-                <div class="text-gray-400 text-tiny">
-                  {{ getCreatedTime(user.createdOn) }}
-                </div>
-              </div>
-            </div>
-          </td>
-
-          <td>
-            <div class="relative">
-              <span>
-                <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
-                        v-if="!user.isAdmin"
-                        :icon="IconUserCheck"
-                        :label="'Make Admin'"
-                        class="!hover:bg-emerald-600"
-                        @click="
-                          () => {
-                            $emit('makeUserAdmin', user.uid);
-                            hide();
-                          }
-                        "
-                      />
-                      <HoppSmartItem
-                        v-else
-                        :icon="IconUserMinus"
-                        :label="'Remove Admin Status'"
-                        class="!hover:bg-emerald-600"
-                        @click="
-                          () => {
-                            $emit('makeAdminToUser', user.uid);
-                            hide();
-                          }
-                        "
-                      />
-                      <HoppSmartItem
-                        v-if="!user.isAdmin"
-                        :icon="IconTrash"
-                        :label="'Delete User'"
-                        class="!hover:bg-red-600"
-                        @click="
-                          () => {
-                            $emit('deleteUser', user.uid);
-                            hide();
-                          }
-                        "
-                      />
-                    </div>
-                  </template>
-                </tippy>
-              </span>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { format } from 'date-fns';
-import { ref } from 'vue';
-import IconTrash from '~icons/lucide/trash';
-import IconUserMinus from '~icons/lucide/user-minus';
-import IconUserCheck from '~icons/lucide/user-check';
-import IconMoreHorizontal from '~icons/lucide/more-horizontal';
-import { UsersListQuery } from '~/helpers/backend/graphql';
-import { TippyComponent } from 'vue-tippy';
-import { useI18n } from '~/composables/i18n';
-
-const t = useI18n();
-defineProps<{
-  usersList: UsersListQuery['admin']['allUsers'];
-}>();
-
-defineEmits<{
-  (event: 'goToUserDetails', uid: string): void;
-  (event: 'makeUserAdmin', uid: string): void;
-  (event: 'makeAdminToUser', uid: string): void;
-  (event: 'deleteUser', uid: string): void;
-}>();
-
-// Get Proper Date Formats
-const getCreatedDate = (date: string) => format(new Date(date), 'dd-MM-yyyy');
-const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a');
-
-// Template refs
-const tippyActions = ref<TippyComponent | null>(null);
-</script>
-
-<style scoped>
-.tippy-box[data-theme~='popover'] .tippy-content {
-  padding: 0;
-}
-</style>
diff --git a/packages/hoppscotch-sh-admin/src/components/users/Tables.vue b/packages/hoppscotch-sh-admin/src/components/users/Tables.vue
deleted file mode 100644
index b1c823bbd..000000000
--- a/packages/hoppscotch-sh-admin/src/components/users/Tables.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-  <div
-    class="overflow-hidden rounded-md border border-dividerDark shadow-md m-5"
-  >
-    <table class="w-full">
-      <thead>
-        <tr
-          class="text-secondary border-b border-dividerDark text-sm text-left bg-primaryLight"
-        >
-          <th v-for="title in headings" scope="col" class="px-6 py-3">
-            {{ title }}
-          </th>
-        </tr>
-      </thead>
-
-      <tbody class="divide-y divide-divider">
-        <tr
-          v-for="item in list"
-          :key="item.id"
-          class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
-          :class="xBorder ? 'divide-x divide-divider' : ''"
-        >
-          <td
-            v-for="data in item"
-            @click="$emit('goToDetails', item)"
-            class="max-w-40"
-            :class="padding"
-          >
-            <div class="flex">
-              <span class="truncate">
-                {{ data }}
-              </span>
-            </div>
-          </td>
-
-          <!-- <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
-            <div v-if="user.displayName" class="flex items-center space-x-3">
-              <span>
-                {{ user.displayName }}
-              </span>
-              <span
-                v-if="user.isAdmin"
-                class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
-              >
-                Admin
-              </span>
-            </div>
-            <div v-else class="flex items-center space-x-3">
-              <span> (Unnamed user) </span>
-              <span
-                v-if="user.isAdmin"
-                class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
-              >
-                Admin
-              </span>
-            </div>
-          </td> -->
-
-          <slot name="action" :team="item"></slot>
-          <!-- <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"
-                      :class="itemStyle"
-                      @click="$emit('id', item)"
-                    />
-                  </div>
-                </template>
-              </tippy>
-            </div>
-          </td> -->
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import IconTrash from '~icons/lucide/trash';
-import IconMoreHorizontal from '~icons/lucide/more-horizontal';
-
-const props = defineProps<{
-  xBorder: Boolean;
-  list: [];
-  headings: [];
-  padding: string;
-  itemStyle: string;
-}>();
-
-defineEmits<{
-  (event: 'goToDetails', uid: string): void;
-  (event: 'id', uid: string): void;
-  (event: 'makeUserAdmin', uid: string): void;
-  (event: 'makeAdminToUser', uid: string): void;
-  (event: 'deleteUser', uid: string): void;
-}>();
-</script>
-
-<style scoped>
-.tippy-box[data-theme~='popover'] .tippy-content {
-  padding: 0;
-}
-</style>
diff --git a/packages/hoppscotch-sh-admin/src/pages/teams/index.vue b/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
index b5fe82e51..88a8236cd 100644
--- a/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
@@ -13,7 +13,7 @@
 
       <div class="overflow-x-auto">
         <div
-          v-if="fetching && !error && teamList.length === 0"
+          v-if="fetching && !error && teamsList.length === 0"
           class="flex justify-center"
         >
           <HoppSmartSpinner />
@@ -21,13 +21,18 @@
 
         <div v-else-if="error">{{ t('teams.load_list_error') }}</div>
 
+        <div v-else-if="teamsList.length == 0" class="px-2">
+          <p class="text-lg">
+            {{ t('teams.no_teams') }}
+          </p>
+        </div>
+
         <HoppSmartTable
           v-else
-          :list="teamList"
+          :list="newTeamsList"
           :headings="headings"
           @goToDetails="goToTeamDetails"
           padding="px-6 py-3"
-          item-style="!hover:bg-red-600"
         >
           <template #action="{ item }">
             <td>
@@ -59,7 +64,7 @@
         </HoppSmartTable>
 
         <div
-          v-if="hasNextPage && teamList.length >= teamsPerPage"
+          v-if="hasNextPage && teamsList.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"
         >
@@ -127,7 +132,7 @@ const {
   error,
   goToNextPage: fetchNextTeams,
   refetch,
-  list: list,
+  list: teamsList,
   hasNextPage,
 } = usePagedQuery(
   TeamListDocument,
@@ -137,8 +142,9 @@ const {
   { cursor: undefined, take: teamsPerPage }
 );
 
-const teamList = computed(() => {
-  return list.value.map((team) => {
+// The new teams list that is used in the table
+const newTeamsList = computed(() => {
+  return teamsList.value.map((team) => {
     return {
       id: team.id || '',
       name: team.name || '',
@@ -147,7 +153,8 @@ const teamList = computed(() => {
   });
 });
 
-const headings = ['Team ID', 'Team Name', 'Number of Members', ''];
+// Headers that are used in the table
+const headings = [t('teams.id'), t('teams.name'), t('teams.members'), ''];
 
 // Create Team
 const createTeamMutation = useMutation(CreateTeamDocument);
@@ -216,7 +223,7 @@ const deleteTeamMutation = async (id: string | null) => {
     if (result.error) {
       toast.error(`${t('state.delete_team_failure')}`);
     } else {
-      list.value = list.value.filter((team) => team.id !== id);
+      teamsList.value = teamsList.value.filter((team) => team.id !== id);
       toast.success(`${t('state.delete_team_success')}`);
     }
   });
diff --git a/packages/hoppscotch-sh-admin/src/pages/users/index.vue b/packages/hoppscotch-sh-admin/src/pages/users/index.vue
index 832db98ab..3322e82ea 100644
--- a/packages/hoppscotch-sh-admin/src/pages/users/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/users/index.vue
@@ -31,27 +31,16 @@
 
         <div v-else-if="error">{{ t('users.load_list_error') }}</div>
 
-        <!-- <UsersTable
-          v-else-if="usersList.length >= 1"
-          :usersList="usersList"
-          :fetching="fetching"
-          :error="error"
-          @goToUserDetails="goToUserDetails"
-          @makeUserAdmin="makeUserAdmin"
-          @makeAdminToUser="makeAdminToUser"
-          @deleteUser="deleteUser"
-        /> -->
-
         <HoppSmartTable
           v-else-if="usersList.length >= 1"
           padding="px-6 py-3"
           :list="newUsersList"
           :headings="headings"
           @goToDetails="goToUserDetails"
-          badge-name="Admin"
-          :badge-row-index="adminUsers"
+          :badge-name="t('users.admin')"
+          :badge-row-index="adminUsersIndexes"
           badge-col-name="name"
-          :subtitle="subtitle"
+          :subtitles="subtitles"
         >
           <template #action="{ item }">
             <td>
@@ -140,7 +129,7 @@
 
 <script setup lang="ts">
 import { format } from 'date-fns';
-import { computed, onMounted, reactive, ref, watch } from 'vue';
+import { computed, reactive, ref, watch } from 'vue';
 import { useMutation } from '@urql/vue';
 import {
   InviteNewUserDocument,
@@ -148,6 +137,7 @@ import {
   RemoveUserByAdminDocument,
   RemoveUserAsAdminDocument,
   UsersListDocument,
+  UsersListQuery,
 } from '../../helpers/backend/graphql';
 import { usePagedQuery } from '~/composables/usePagedQuery';
 import { useRoute, useRouter } from 'vue-router';
@@ -168,12 +158,6 @@ const t = useI18n();
 
 const toast = useToast();
 
-const isUserAdmin = (selectedUser: any) => {
-  return usersList.value.filter((user) => {
-    return user.uid === selectedUser.uid;
-  })[0].isAdmin;
-};
-
 // Get Paginated Results of all the users in the infra
 const usersPerPage = 20;
 const {
@@ -190,6 +174,7 @@ const {
   { cursor: undefined, take: usersPerPage }
 );
 
+// The new users list that is used in the table
 const newUsersList = computed(() => {
   return usersList.value.map((user) => {
     return {
@@ -201,32 +186,37 @@ const newUsersList = computed(() => {
   });
 });
 
-const headings = ['User UID', 'Name', 'Email', 'Created On', ''];
+const isUserAdmin = (selectedUser: UsersListQuery['admin']['allUsers']) => {
+  return usersList.value.filter((user) => {
+    return user.uid === selectedUser.uid;
+  })[0].isAdmin;
+};
 
-const adminUsers = computed(() => {
-  return usersList.value.map((user, index) => {
+// Returns index of all the admin users
+const adminUsersIndexes = computed(() =>
+  usersList.value.map((user, index) => {
     if (user.isAdmin) {
       return index;
     }
-  });
-});
+  })
+);
 
-const createdTime = computed(() => {
-  return usersList.value.map((user) => {
-    return getCreatedTime(user.createdOn);
-  });
-});
+// Returns created time of all the users
+const createdTime = computed(() =>
+  usersList.value.map((user) => getCreatedTime(user.createdOn))
+);
 
-onMounted(() => {
-  console.log(createdTime);
+// Headers that are used in the table
+const headings = [
+  t('users.id'),
+  t('users.name'),
+  t('users.email'),
+  t('users.date'),
+  '',
+];
 
-  console.log(createdTime.value);
-  for (var item in createdTime.value) {
-    console.log(item);
-  }
-});
-
-const subtitle = reactive([
+// Subtitles that are used in the table
+const subtitles = reactive([
   {
     colName: 'createdOn',
     subtitle: createdTime,
diff --git a/packages/hoppscotch-sh-admin/src/pages/users/invited.vue b/packages/hoppscotch-sh-admin/src/pages/users/invited.vue
index d49725cfb..ec8192721 100644
--- a/packages/hoppscotch-sh-admin/src/pages/users/invited.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/users/invited.vue
@@ -16,64 +16,21 @@
           <div v-if="fetching" class="flex justify-center">
             <HoppSmartSpinner />
           </div>
-          <div v-else-if="error || invitedUsers === undefined">
+          <div
+            v-else-if="
+              error || invitedUsers === undefined || invitedUsers.length === 0
+            "
+          >
             <p class="text-xl">{{ t('users.no_invite') }}</p>
           </div>
 
-          <table v-else class="w-full text-left">
-            <thead>
-              <tr
-                class="text-secondary border-b border-dividerDark text-sm text-left"
-              >
-                <th class="px-3 pb-3">{{ t('users.admin_id') }}</th>
-                <th class="px-3 pb-3">{{ t('users.admin_email') }}</th>
-                <th class="px-3 pb-3">{{ t('users.invitee_email') }}</th>
-                <th class="px-3 pb-3">{{ t('users.invited_on') }}</th>
-              </tr>
-            </thead>
-            <tbody class="divide-y divide-divider">
-              <tr
-                v-if="invitedUsers.length === 0"
-                class="text-secondaryDark py-4"
-              >
-                <div class="py-6 px-3">{{ t('users.no_invite') }}</div>
-              </tr>
-              <tr
-                v-else
-                v-for="(user, index) in invitedUsers"
-                :key="index"
-                class="text-secondaryDark hover:bg-zinc-800 hover:cursor-pointer rounded-xl"
-              >
-                <td class="py-2 px-3 max-w-30">
-                  <div>
-                    <span class="truncate">
-                      {{ user?.adminUid }}
-                    </span>
-                  </div>
-                </td>
-                <td class="py-2 px-3">
-                  <span class="flex items-center">
-                    {{ user?.adminEmail }}
-                  </span>
-                </td>
-                <td class="py-2 px-3">
-                  <span>
-                    {{ user?.inviteeEmail }}
-                  </span>
-                </td>
-                <td class="py-2 px-3">
-                  <div class="flex items-center">
-                    <div class="flex flex-col">
-                      {{ getCreatedDate(user?.invitedOn) }}
-                      <div class="text-gray-400 text-xs">
-                        {{ getCreatedTime(user?.invitedOn) }}
-                      </div>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          <HoppSmartTable
+            v-else
+            padding="px-6 py-3"
+            :list="newInvitedUsersList"
+            :headings="headings"
+            :subtitles="subtitles"
+          />
         </div>
       </div>
     </div>
@@ -81,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, reactive } from 'vue';
 import { useQuery } from '@urql/vue';
 import { InvitedUsersDocument } from '../../helpers/backend/graphql';
 import { format } from 'date-fns';
@@ -100,4 +57,39 @@ const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a');
 // Get Invited Users
 const { fetching, error, data } = useQuery({ query: InvitedUsersDocument });
 const invitedUsers = computed(() => data?.value?.admin.invitedUsers);
+
+// The new invited users list that is used in the table
+const newInvitedUsersList = computed(() => {
+  return invitedUsers.value?.map((user) => {
+    return {
+      adminUid: user.adminUid || '',
+      adminEmail: user.adminEmail || '',
+      inviteeEmail: user.inviteeEmail || '',
+      invitedOn: getCreatedDate(user.invitedOn) || '',
+    };
+  });
+});
+
+// Returns the created time of all the invited user
+const createdTime = computed(() => {
+  return invitedUsers.value?.map((user) => {
+    return getCreatedTime(user.invitedOn);
+  });
+});
+
+// Headings used in the table
+const headings = [
+  t('users.admin_id'),
+  t('users.admin_email'),
+  t('users.invitee_email'),
+  t('users.invited_on'),
+];
+
+// Subtitles used in the table
+const subtitles = reactive([
+  {
+    colName: 'invitedOn',
+    subtitle: createdTime,
+  },
+]);
 </script>
diff --git a/packages/hoppscotch-ui/src/components/smart/Table.vue b/packages/hoppscotch-ui/src/components/smart/Table.vue
index eaf6927ba..041f7f571 100644
--- a/packages/hoppscotch-ui/src/components/smart/Table.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Table.vue
@@ -16,7 +16,7 @@
       <tbody class="divide-y divide-divider">
         <tr
           v-for="(item, rowIndex) in list"
-          :key="item.id"
+          :key="rowIndex"
           class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
           :class="xBorder ? 'divide-x divide-divider' : ''"
         >
@@ -36,21 +36,29 @@
                 "
               >
                 <div class="flex flex-col">
-                  {{ data }}
+                  <span v-if="data">
+                    {{ data }}
+                  </span>
+
                   <span
-                    class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+                    class="text-xs font-medium px-3 py-1 my-1 rounded-full bg-green-900 text-green-300 w-min"
                   >
                     {{ badgeName }}
                   </span>
                 </div>
               </div>
+
               <!-- Column with Subtitles -->
               <div
-                v-else-if="subCol.includes(colIndex.toString())"
+                v-else-if="subtitleColumns.includes(colIndex.toString())"
                 class="flex flex-col"
               >
-                {{ data }}
-                <div v-for="item in subtitle">
+                <span v-if="data">
+                  {{ data }}
+                </span>
+                <span v-else> - </span>
+
+                <div v-for="item in subtitles">
                   <div
                     v-if="item.colName === colIndex.toString()"
                     class="text-gray-400 text-tiny"
@@ -63,7 +71,14 @@
                   </div>
                 </div>
               </div>
-              <div v-else class="flex flex-col">{{ data }}</div>
+
+              <!-- Column with no subtitle or badge -->
+              <div v-else class="flex flex-col">
+                <span v-if="data">
+                  {{ data }}
+                </span>
+                <span v-else> - </span>
+              </div>
             </div>
           </td>
 
@@ -75,39 +90,34 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted } from "vue"
+import { computed } from "vue"
 
 const props = defineProps<{
   xBorder: Boolean
   list: []
-  headings: []
+  headings: string[]
   padding: string
-  itemStyle: string
   badgeName: string
   badgeRowIndex: (number | undefined)[]
   badgeColName: string
-  subtitle: [
+  subtitles: [
     {
       colName: string
-      subtitle: string | []
+      subtitle: string | string[]
     }
   ]
 }>()
 
 defineEmits<{
   (event: "goToDetails", uid: string): void
-  (event: "id", uid: string): void
 }>()
 
-const subCol = computed(() =>
-  props.subtitle ? props.subtitle.map((item) => item.colName) : []
+// Returns all the columns that needs to have a subtitle
+const subtitleColumns = computed(() =>
+  props.subtitles ? props.subtitles.map((item) => item.colName) : []
 )
 
-onMounted(() => {
-  console.log(props.subtitle)
-  console.log(subCol)
-})
-
+// Returns the subtitle for the given column and row
 const itemSubtitle = (subtitle: string | string[], rowIndex: number) =>
   typeof subtitle === "object" ? subtitle[rowIndex] : subtitle
 </script>