fix: table ui base design and refactor type errros

packages/nc-gui/components/account/UserList.vue

@@ -1,11 +1,14 @@
 <script lang="ts" setup>
 import { OrgUserRoles } from 'nocodb-sdk'
-import type { OrgUserReqType, RequestParams, Roles, UserType } from 'nocodb-sdk'
+import type { OrgUserReqType, RequestParams, UserType } from 'nocodb-sdk'
 import type { User } from '#imports'
-import { extractSdkResponseErrorMsg, iconMap, useApi, useCopy, useDashboard, useNuxtApp } from '#imports'
+import { extractSdkResponseErrorMsg, iconMap, useApi, useCopy, useDashboard, useDebounceFn, useNuxtApp } from '#imports'
 
 const { api, isLoading } = useApi()
 
+// for loading screen
+isLoading.value = true
+
 const { $e } = useNuxtApp()
 
 const { t } = useI18n()
@@ -34,7 +37,7 @@ const pagination = reactive({
   position: ['bottomCenter'],
 })
 
-const loadUsers = async (page = currentPage.value, limit = currentLimit.value) => {
+const loadUsers = useDebounceFn(async (page = currentPage.value, limit = currentLimit.value) => {
   currentPage.value = page
   try {
     const response: any = await api.orgUsers.list({
@@ -55,11 +58,13 @@ const loadUsers = async (page = currentPage.value, limit = currentLimit.value) =
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
-}
+}, 500)
 
-loadUsers()
+onMounted(() => {
+  loadUsers()
+})
 
-const updateRole = async (userId: string, roles: Roles) => {
+const updateRole = async (userId: string, roles: string) => {
   try {
     await api.orgUsers.update(userId, {
       roles,
@@ -72,20 +77,30 @@ const updateRole = async (userId: string, roles: Roles) => {
   }
 }
 
-const deleteUser = async (userId: string) => {
+const deleteModalInfo = ref<UserType | null>(null)
+
+const deleteUser = async () => {
   try {
-    await api.orgUsers.delete(userId)
+    await api.orgUsers.delete(deleteModalInfo.value?.id as string)
     message.success(t('msg.success.userDeleted'))
+
     await loadUsers()
+
+    if (!users.value.length && currentPage.value !== 1) {
+      currentPage.value--
+      loadUsers(currentPage.value)
+    }
     $e('a:org-user:user-deleted')
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    // closing the modal
+    isOpen.value = false
+    deleteModalInfo.value = null
   }
-  // closing the modal
-  isOpen.value = false
 }
 
-const resendInvite = async (user: User) => {
+const resendInvite = async (user: UserType) => {
   try {
     await api.orgUsers.resendInvite(user.id)
 
@@ -112,7 +127,7 @@ const copyInviteUrl = async (user: User) => {
   $e('c:user:copy-url')
 }
 
-const copyPasswordResetUrl = async (user: User) => {
+const copyPasswordResetUrl = async (user: UserType) => {
   try {
     const { reset_password_url } = await api.orgUsers.generatePasswordResetToken(user.id)
 
@@ -125,74 +140,72 @@ const copyPasswordResetUrl = async (user: User) => {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
+
+const openInviteModal = () => {
+  showUserModal.value = true
+  userMadalKey.value++
+}
+
+const openDeleteModal = (user: UserType) => {
+  deleteModalInfo.value = user
+  isOpen.value = true
+}
 </script>
 
 <template>
   <div data-testid="nc-super-user-list">
-    <div class="max-w-[900px] mx-auto">
-      <div class="text-xl my-4 text-left font-weight-bold">{{ $t('title.userManagement') }}</div>
-      <div class="py-2 flex gap-4 items-center">
-        <a-input-search
-          v-model:value="searchText"
-          size="middle"
-          class="max-w-[300px]"
-          :placeholder="$t('labels.searchUsers')"
-          @blur="loadUsers"
-          @keydown.enter="loadUsers"
-        >
-        </a-input-search>
-        <div class="flex-grow"></div>
-        <component :is="iconMap.reload" class="cursor-pointer" @click="loadUsers" />
-        <a-button
-          data-testid="nc-super-user-invite"
-          size="middle"
-          class="!rounded-md"
-          type="primary"
-          @click="
-            () => {
-              showUserModal = true
-              userMadalKey++
-            }
-          "
-        >
-          <div class="flex items-center gap-1">
-            <component :is="iconMap.plus" />
-            {{ $t('activity.inviteUser') }}
-          </div>
-        </a-button>
+    <div class="max-w-195 mx-auto">
+      <div class="text-2xl my-4 text-left font-weight-bold">User Management</div>
+      <div class="py-2 flex gap-4 items-center justify-between">
+        <a-input v-model:value="searchText" class="!max-w-90 !rounded-md" placeholder="Search members" @change="loadUsers()">
+          <template #prefix>
+            <PhMagnifyingGlassBold class="!h-3.5 text-gray-500" />
+          </template>
+        </a-input>
+        <div class="flex gap-3 items-center justify-center">
+          <component :is="iconMap.reload" class="cursor-pointer" @click="loadUsers(currentPage, currentLimit)" />
+          <NcButton data-testid="nc-super-user-invite" size="small" type="primary" @click="openInviteModal">
+            <div class="flex items-center gap-1">
+              <component :is="iconMap.plus" />
+              Invite new user
+            </div>
+          </NcButton>
+        </div>
       </div>
-      <a-table
-        :row-key="(record) => record.id"
-        :data-source="users"
-        :pagination="pagination"
-        :loading="isLoading"
-        size="small"
-        @change="loadUsers($event.current)"
-      >
-        <template #emptyText>
+      <div class="w-[780px] mt-5 border-1 rounded-md h-[613px]">
+        <div class="flex w-full bg-gray-50 border-b-1">
+          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start pl-10">{{ $t('labels.email') }}</span>
+          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start pl-20">{{ $t('objects.role') }}</span>
+          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-end pl-42">Actions</span>
+        </div>
+        <div v-if="isLoading" class="flex items-center justify-center text-center h-[513px]">
+          <GeneralLoader size="xlarge" />
+        </div>
+        <!-- if users are empty -->
+        <div v-else-if="!users.length" class="flex items-center justify-center text-center h-128.25">
           <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
-        </template>
-
-        <!-- Email -->
-        <a-table-column key="email" :title="$t('labels.email')" data-index="email">
-          <template #default="{ text }">
-            <div>
-              {{ text }}
-            </div>
-          </template>
-        </a-table-column>
-
-        <!-- Role -->
-        <a-table-column key="roles" :title="$t('objects.role')" data-index="roles">
-          <template #default="{ record }">
-            <div>
-              <div v-if="record.roles.includes('super')" class="font-weight-bold">{{ $t('labels.superAdmin') }}</div>
+        </div>
+        <section v-else class="tbody">
+          <div
+            v-for="el of users"
+            :key="el.id"
+            data-testid="nc-token-list"
+            class="flex py-3 justify-around px-5 border-b-1"
+            :class="{
+              'py-4': el.roles?.includes('super'),
+            }"
+          >
+            <span class="text-3.5 text-start w-1/3 pl-5">
+              {{ el.email }}
+            </span>
+            <span class="text-3.5 text-start w-1/3 pl-18">
+              <div v-if="el?.roles?.includes('super')" class="font-weight-bold">Super Admin</div>
               <a-select
                 v-else
-                v-model:value="record.roles"
-                class="w-[220px] nc-user-roles"
+                v-model:value="el.roles"
+                class="w-55 nc-user-roles"
                 :dropdown-match-select-width="false"
-                @change="updateRole(record.id, record.roles)"
+                @change="updateRole(el.id, el.roles as string)"
               >
                 <a-select-option
                   class="nc-users-list-role-option"
@@ -216,88 +229,79 @@ const copyPasswordResetUrl = async (user: User) => {
                   </span>
                 </a-select-option>
               </a-select>
-            </div>
-          </template>
-        </a-table-column>
-
-        <!--        &lt;!&ndash; Projects &ndash;&gt;
-        <a-table-column key="projectsCount" :title="$t('objects.projects')" data-index="projectsCount">
-          <template #default="{ text }">
-            <div>
-              {{ text }}
-            </div>
-          </template>
-        </a-table-column> -->
-
-        <!-- Actions -->
-
-        <a-table-column key="id" :title="$t('labels.actions')" data-index="id">
-          <template #default="{ text, record }">
-            <div v-if="!record.roles.includes('super')" class="flex items-center gap-2">
-              <a-dropdown :trigger="['click']" class="flex" placement="bottomRight" overlay-class-name="nc-dropdown-user-mgmt">
-                <div class="flex flex-row items-center">
-                  <a-button type="text" class="!px-0">
-                    <div class="flex flex-row items-center h-[1.2rem]">
-                      <component :is="iconMap.threeDotHorizontal" class="nc-user-row-action" />
-                    </div>
-                  </a-button>
-                </div>
-
-                <template #overlay>
-                  <a-menu>
-                    <template v-if="record.invite_token">
-                      <a-menu-item>
+            </span>
+            <span class="w-1/3 pl-43">
+              <div
+                class="flex items-center gap-2"
+                :class="{
+                  'opacity-0': el.roles?.includes('super'),
+                }"
+              >
+                <NcDropdown :trigger="['click']">
+                  <MdiDotsVertical
+                    class="border-1 !text-gray-600 h-5.5 w-5.5 rounded outline-0 p-0.5 nc-workspace-menu transform transition-transform !text-gray-400 cursor-pointer hover:(!text-gray-500 bg-gray-100)"
+                  />
+                  <template #overlay>
+                    <NcMenu>
+                      <template v-if="!el.roles?.includes('super')">
                         <!-- Resend invite Email -->
-                        <div class="flex flex-row items-center py-3" @click="resendInvite(record)">
-                          <component :is="iconMap.email" class="flex h-[1rem] text-gray-500" />
-                          <div class="text-xs pl-2">{{ $t('activity.resendInvite') }}</div>
-                        </div>
-                      </a-menu-item>
-                      <a-menu-item>
-                        <div class="flex flex-row items-center py-3" @click="copyInviteUrl(record)">
-                          <component :is="iconMap.copy" class="flex h-[1rem] text-gray-500" />
-                          <div class="text-xs pl-2">{{ $t('activity.copyInviteURL') }}</div>
-                        </div>
-                      </a-menu-item>
-                    </template>
-                    <a-menu-item>
-                      <div class="flex flex-row items-center py-3" @click="copyPasswordResetUrl(record)">
-                        <component :is="iconMap.copy" class="flex h-[1rem] text-gray-500" />
-                        <div class="text-xs pl-2">{{ $t('activity.copyPasswordResetURL') }}</div>
-                      </div>
-                    </a-menu-item>
-                    <a-menu-item>
-                      <div class="flex flex-row items-center py-3" @click="isOpen = true">
-                        <!-- Delete user modal -->
-                        <GeneralDeleteModal v-model:visible="isOpen" entity-name="User" :on-delete="() => deleteUser(text)">
-                          <template #entity-preview>
-                            <span>
-                              <div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4">
-                                <GeneralIcon icon="account" class="nc-view-icon"></GeneralIcon>
-                                <div
-                                  class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75"
-                                  :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
-                                >
-                                  {{ record.email }}
-                                </div>
-                              </div>
-                            </span>
-                          </template>
-                        </GeneralDeleteModal>
-                        <component :is="iconMap.delete" data-testid="nc-super-user-delete" class="flex h-[1rem] text-gray-500" />
-                        <div class="text-xs pl-2">{{ $t('general.delete') }}</div>
-                      </div>
-                    </a-menu-item>
-                  </a-menu>
-                </template>
-              </a-dropdown>
+                        <NcMenuItem @click="resendInvite(el)">
+                          <component :is="iconMap.email" class="flex text-gray-500" />
+                          <div>{{ $t('activity.resendInvite') }}</div>
+                        </NcMenuItem>
+                        <NcMenuItem @click="copyInviteUrl(el)">
+                          <component :is="iconMap.copy" class="flex text-gray-500" />
+                          <div>{{ $t('activity.copyInviteURL') }}</div>
+                        </NcMenuItem>
+                        <NcMenuItem @click="copyPasswordResetUrl(el)">
+                          <component :is="iconMap.copy" class="flex text-gray-500" />
+                          <div>{{ $t('activity.copyPasswordResetURL') }}</div>
+                        </NcMenuItem>
+                      </template>
+                      <NcDivider v-if="!el.roles?.includes('super')" />
+                      <NcMenuItem class="!text-red-500 !hover:bg-red-50" @click="openDeleteModal(el)">
+                        <MaterialSymbolsDeleteOutlineRounded />
+                        Remove user
+                      </NcMenuItem>
+                    </NcMenu>
+                  </template>
+                </NcDropdown>
+              </div>
+            </span>
+          </div>
+        </section>
+      </div>
+      <div v-if="pagination.total > 10" class="flex items-center justify-center mt-7">
+        <a-pagination
+          v-model:current="currentPage"
+          :total="pagination.total"
+          show-less-items
+          @change="loadUsers(currentPage, currentLimit)"
+        />
+      </div>
+      <GeneralDeleteModal v-model:visible="isOpen" entity-name="User" :on-delete="() => deleteUser()">
+        <template #entity-preview>
+          <span>
+            <div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4">
+              <GeneralIcon icon="account" class="nc-view-icon"></GeneralIcon>
+              <div
+                class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75"
+                :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
+              >
+                {{ deleteModalInfo?.email }}
+              </div>
             </div>
-            <span v-else></span>
-          </template>
-        </a-table-column>
-      </a-table>
+          </span>
+        </template>
+      </GeneralDeleteModal>
 
       <LazyAccountUsersModal :key="userMadalKey" :show="showUserModal" @closed="showUserModal = false" @reload="loadUsers" />
     </div>
   </div>
 </template>
+
+<style scoped>
+.tbody div:nth-child(10) {
+  border-bottom: none;
+}
+</style>

packages/nc-gui/components/dashboard/settings/AppStore.vue

@@ -108,12 +108,12 @@ onMounted(async () => {
       </div>
     </a-modal>
 
-    <div class="grid grid-cols-2 gap-x-2 gap-y-4 mt-4">
+    <div class="flex sm:flex-col lg:flex-row flex-wrap mt-4 gap-4">
       <a-card
         v-for="(app, i) in apps"
         :key="i"
+        class="sm:w-100 md:w-full lg:w-135"
         :class="`relative flex overflow-x-hidden app-item-card !shadow-sm rounded-md w-full nc-app-store-card-${app.title}`"
-        :body-style="{ width: '100%' }"
       >
         <div class="install-btn flex flex-row justify-end space-x-1">
           <a-button v-if="app.parsedInput" size="small" type="primary" @click="showInstallPluginModal(app)">

packages/nc-gui/pages/account/index.vue

@@ -33,7 +33,7 @@ const logout = async () => {
       <div class="h-full overflow-y-auto flex">
         <!-- Side tabs -->
 
-        <div class="h-full bg-white nc-user-sidebar">
+        <div class="h-full bg-white nc-user-sidebar fixed">
           <NcMenu
             v-model:openKeys="openKeys"
             v-model:selectedKeys="selectedKeys"
@@ -50,11 +50,15 @@ const logout = async () => {
             >
               <div class="flex flex-row gap-x-2 items-center h-8.5">
                 <GeneralIcon icon="arrowLeft" class="-mt-0.1" />
+<<<<<<< HEAD
                 <div class="flex text-xs text-gray-800">{{ $t('labels.backToWorkspace') }}</div>
+=======
+                <div class="flex text-sm font-medium text-gray-800">Back to Projects</div>
+>>>>>>> a2f9e6a54 (fix: table ui base design and refactor type errros)
               </div>
             </div>
 
-            <div class="text-xs text-gray-600 ml-4 py-1.5 mt-3">{{ $t('labels.account') }}</div>
+            <div class="text-sm text-gray-600 ml-4 p-2 mt-3 gray-600 font-medium">{{ $t('labels.account') }}</div>
 
             <NcMenuItem
               key="profile"
@@ -80,9 +84,9 @@ const logout = async () => {
               @click="navigateTo('/account/tokens')"
             >
               <div class="flex items-center space-x-2">
-                <MdiShieldKeyOutline />
+                <component :is="iconMap.code" />
 
-                <div class="select-none">{{ $t('title.tokens') }}</div>
+                <div class="select-none">API {{ $t('title.tokens') }}</div>
               </div>
             </NcMenuItem>
             <NcMenuItem
@@ -144,7 +148,7 @@ const logout = async () => {
 
         <!-- Sub Tabs -->
 
-        <div class="flex flex-col w-full">
+        <div class="flex flex-col w-full ml-65">
           <div class="flex flex-row p-3 items-center">
             <div class="flex-1" />