From b1b362366ee7f6f549d84d7a64e55fb6eb85697c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 2 Dec 2022 14:55:02 +0800
Subject: [PATCH] fix(nc-gui): type issues

---
 packages/nc-gui/components/cell/Json.vue      |  4 +-
 packages/nc-gui/components/cell/TextArea.vue  |  2 +-
 .../components/cell/attachment/Carousel.vue   |  4 +-
 .../nc-gui/components/general/Tooltip.vue     | 11 +++++-
 .../components/smartsheet/ApiSnippet.vue      |  9 +----
 .../nc-gui/components/smartsheet/Grid.vue     | 13 ++++---
 .../components/smartsheet/VirtualCell.vue     |  2 +-
 .../smartsheet/column/EditOrAddProvider.vue   |  2 +-
 .../column/LinkedToAnotherRecordOptions.vue   | 10 +++--
 .../smartsheet/column/LookupOptions.vue       | 39 ++++++++-----------
 .../smartsheet/column/RollupOptions.vue       | 32 +++++++--------
 .../components/smartsheet/column/utils.ts     |  9 +++++
 .../components/smartsheet/header/Cell.vue     |  7 +++-
 .../smartsheet/header/VirtualCell.vue         |  2 +-
 .../toolbar/KanbanStackEditOrAdd.vue          | 12 +++++-
 .../smartsheet/toolbar/MoreActions.vue        |  4 +-
 .../smartsheet/toolbar/SearchData.vue         |  7 ++--
 .../smartsheet/toolbar/SortListMenu.vue       |  9 ++++-
 .../smartsheet/toolbar/ViewActions.vue        | 24 ++++++------
 .../components/tabs/auth/UserManagement.vue   |  2 +-
 .../tabs/auth/user-management/UsersModal.vue  |  2 +-
 .../nc-gui/components/template/Editor.vue     | 11 +-----
 .../components/ListChildItems.vue             | 26 +++++++------
 packages/nc-gui/components/webhook/List.vue   |  2 +-
 .../composables/useColumnCreateStore.ts       | 11 ++++--
 .../useExpandedFormDetached/index.ts          |  2 +-
 packages/nc-gui/composables/useLTARStore.ts   |  2 +-
 packages/nc-gui/composables/useSharedView.ts  |  5 +--
 .../nc-gui/composables/useSmartsheetStore.ts  |  2 +-
 packages/nc-gui/package-lock.json             | 11 ++++++
 packages/nc-gui/package.json                  |  1 +
 .../form/[viewId]/index/index.vue             |  5 ++-
 packages/nc-gui/pages/forgot-password.vue     |  5 ++-
 .../nc-gui/pages/index/index/[projectId].vue  |  3 +-
 packages/nc-gui/pages/index/index/create.vue  |  3 +-
 packages/nc-gui/pages/projects/index.vue      |  3 +-
 .../nc-gui/pages/projects/index/index.vue     |  5 +--
 packages/nc-gui/pages/signup/[[token]].vue    |  9 +++--
 packages/nc-gui/utils/sortUtils.ts            |  2 +-
 packages/nc-gui/utils/viewUtils.ts            |  8 +++-
 packages/nc-gui/web-types.json                |  4 ++
 41 files changed, 190 insertions(+), 136 deletions(-)
 create mode 100644 packages/nc-gui/components/smartsheet/column/utils.ts

diff --git a/packages/nc-gui/components/cell/Json.vue b/packages/nc-gui/components/cell/Json.vue
index f89ddf87aa..8d8d6b9831 100644
--- a/packages/nc-gui/components/cell/Json.vue
+++ b/packages/nc-gui/components/cell/Json.vue
@@ -135,13 +135,13 @@ useSelectedCellKeyupListener(active, (e) => {
           <a-button type="text" size="small" :onclick="clear"><div class="text-xs">Cancel</div></a-button>
 
           <a-button type="primary" size="small" :disabled="!!error || localValue === vModel">
-            <div class="text-xs" :onclick="onSave">Save</div>
+            <div class="text-xs" @click="onSave">Save</div>
           </a-button>
         </div>
       </div>
 
       <LazyMonacoEditor
-        :model-value="localValue"
+        :model-value="localValue || ''"
         class="min-w-full w-80"
         :class="{ 'expanded-editor': isExpanded, 'editor': !isExpanded }"
         :hide-minimap="true"
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index f0280bf12e..e19aee883e 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { EditModeInj, inject, useVModel } from '#imports'
 
 const props = defineProps<{
-  modelValue?: string | null
+  modelValue?: string | number | string[]
 }>()
 
 const emits = defineEmits(['update:modelValue'])
diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 4933e7d396..63a7c1bb0f 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -47,7 +47,7 @@ onClickOutside(carouselRef, () => {
 </script>
 
 <template>
-  <general-overlay v-model="selectedImage" :z-index="1001">
+  <GeneralOverlay v-model="selectedImage" :z-index="1001">
     <template v-if="selectedImage">
       <div class="overflow-hidden p-12 text-center relative">
         <div class="text-white group absolute top-5 right-5">
@@ -101,7 +101,7 @@ onClickOutside(carouselRef, () => {
         </a-carousel>
       </div>
     </template>
-  </general-overlay>
+  </GeneralOverlay>
 </template>
 
 <style scoped>
diff --git a/packages/nc-gui/components/general/Tooltip.vue b/packages/nc-gui/components/general/Tooltip.vue
index ea5b8a963b..ab9800aa03 100644
--- a/packages/nc-gui/components/general/Tooltip.vue
+++ b/packages/nc-gui/components/general/Tooltip.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onKeyStroke } from '@vueuse/core'
 import type { CSSProperties } from '@vue/runtime-dom'
-import { controlledRef, ref, useElementHover, watch } from '#imports'
+import { controlledRef, ref, useAttrs, useElementHover, watch } from '#imports'
 
 interface Props {
   // Key to be pressed on hover to trigger the tooltip
@@ -23,6 +23,8 @@ const showTooltip = controlledRef(false, {
 
 const isHovering = useElementHover(() => el.value)
 
+const attrs = useAttrs()
+
 const isKeyPressed = ref(false)
 
 onKeyStroke(
@@ -73,6 +75,11 @@ watch([isHovering, () => modifierKey, () => disabled], ([hovering, key, isDisabl
     showTooltip.value = true
   }
 })
+
+const divStyles = $computed(() => ({
+  style: attrs.style as CSSProperties,
+  class: attrs.class as string,
+}))
 </script>
 
 <template>
@@ -81,7 +88,7 @@ watch([isHovering, () => modifierKey, () => disabled], ([hovering, key, isDisabl
       <slot name="title" />
     </template>
 
-    <div ref="el" class="w-full" :class="$attrs.class" :style="$attrs.style">
+    <div ref="el" class="w-full" v-bind="divStyles">
       <slot />
     </div>
   </a-tooltip>
diff --git a/packages/nc-gui/components/smartsheet/ApiSnippet.vue b/packages/nc-gui/components/smartsheet/ApiSnippet.vue
index 8699e22300..43fc44653e 100644
--- a/packages/nc-gui/components/smartsheet/ApiSnippet.vue
+++ b/packages/nc-gui/components/smartsheet/ApiSnippet.vue
@@ -172,13 +172,8 @@ watch($$(activeLang), (newLang) => {
             hide-minimap
           />
 
-          <div v-if="activeLang.clients" class="flex flex-row w-full justify-end space-x-3 mt-4 uppercase">
-            <a-select
-              v-if="activeLang"
-              v-model:value="selectedClient"
-              style="width: 6rem"
-              dropdown-class-name="nc-dropdown-snippet-active-lang"
-            >
+          <div v-if="activeLang?.clients" class="flex flex-row w-full justify-end space-x-3 mt-4 uppercase">
+            <a-select v-model:value="selectedClient" style="width: 6rem" dropdown-class-name="nc-dropdown-snippet-active-lang">
               <a-select-option v-for="(client, i) in activeLang?.clients" :key="i" class="!w-full uppercase" :value="client">
                 {{ client }}
               </a-select-option>
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index e83e2ab88d..74a2c8bc5c 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -92,6 +92,7 @@ const contextMenu = computed({
   },
 })
 
+const routeQuery = $computed(() => route.query as Record<string, string>)
 const contextMenuTarget = ref<{ row: number; col: number } | null>(null)
 const expandedFormDlg = ref(false)
 const expandedFormRow = ref<Row>()
@@ -297,7 +298,7 @@ function scrollToCell(row?: number | null, col?: number | null) {
   row = row ?? selectedCell.row
   col = col ?? selectedCell.col
 
-  if (row !== undefined && col !== undefined && row !== null && col !== null) {
+  if (row && col) {
     // get active cell
     const rows = tbodyEl.value?.querySelectorAll('tr')
     const cols = rows?.[row].querySelectorAll('td')
@@ -365,7 +366,7 @@ function expandForm(row: Row, state?: Record<string, any>, fromToolbar = false)
   if (rowId) {
     router.push({
       query: {
-        ...route.query,
+        ...routeQuery,
         rowId,
       },
     })
@@ -569,13 +570,13 @@ onBeforeUnmount(() => {
 
 const expandedFormOnRowIdDlg = computed({
   get() {
-    return !!route.query.rowId
+    return !!routeQuery.rowId
   },
   set(val) {
     if (!val)
       router.push({
         query: {
-          ...route.query,
+          ...routeQuery,
           rowId: undefined,
         },
       })
@@ -903,11 +904,11 @@ const closeAddColumnDropdown = () => {
     <Suspense>
       <LazySmartsheetExpandedForm
         v-if="expandedFormOnRowIdDlg"
-        :key="route.query.rowId"
+        :key="routeQuery.rowId"
         v-model="expandedFormOnRowIdDlg"
         :row="{ row: {}, oldRow: {}, rowMeta: {} }"
         :meta="meta"
-        :row-id="route.query.rowId"
+        :row-id="routeQuery.rowId"
         :view="view"
       />
     </Suspense>
diff --git a/packages/nc-gui/components/smartsheet/VirtualCell.vue b/packages/nc-gui/components/smartsheet/VirtualCell.vue
index dcf44f2c06..dad0b33311 100644
--- a/packages/nc-gui/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet/VirtualCell.vue
@@ -24,7 +24,7 @@ import { NavigateDir } from '~/lib'
 const props = defineProps<{
   column: ColumnType
   modelValue: any
-  row: Row
+  row?: Row
   active?: boolean
 }>()
 
diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue b/packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue
index bc8bb78b1c..188de23c98 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue
@@ -4,7 +4,7 @@ import type { ColumnReqType, ColumnType } from 'nocodb-sdk'
 import { MetaInj, inject, ref, toRef, useProvideColumnCreateStore } from '#imports'
 
 interface Props {
-  column?: ColumnType & { meta: any }
+  column?: ColumnType
   columnPosition?: Pick<ColumnReqType, 'column_order'>
 }
 
diff --git a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
index 9596c76b0f..df1b50bc6e 100644
--- a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
@@ -46,6 +46,8 @@ const refTables = $computed(() => {
 
   return tables.filter((t) => t.type === ModelTypes.TABLE)
 })
+
+const filterOption = (value: string, option: { key: string }) => option.key.toLowerCase().includes(value.toLowerCase())
 </script>
 
 <template>
@@ -66,11 +68,11 @@ const refTables = $computed(() => {
         <a-select
           v-model:value="vModel.childId"
           show-search
-          :filter-option="(value, option) => option.key.toLowerCase().includes(value.toLowerCase())"
+          :filter-option="filterOption"
           dropdown-class-name="nc-dropdown-ltar-child-table"
           @change="onDataTypeChange"
         >
-          <a-select-option v-for="table in refTables" :key="table.title" :value="table.id">
+          <a-select-option v-for="table of refTables" :key="table.title" :value="table.id">
             {{ table.title }}
           </a-select-option>
         </a-select>
@@ -96,7 +98,7 @@ const refTables = $computed(() => {
             dropdown-class-name="nc-dropdown-on-update"
             @change="onDataTypeChange"
           >
-            <a-select-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option">
+            <a-select-option v-for="(option, i) of onUpdateDeleteOptions" :key="i" :value="option">
               {{ option }}
             </a-select-option>
           </a-select>
@@ -110,7 +112,7 @@ const refTables = $computed(() => {
             dropdown-class-name="nc-dropdown-on-delete"
             @change="onDataTypeChange"
           >
-            <a-select-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option">
+            <a-select-option v-for="(option, i) of onUpdateDeleteOptions" :key="i" :value="option">
               {{ option }}
             </a-select-option>
           </a-select>
diff --git a/packages/nc-gui/components/smartsheet/column/LookupOptions.vue b/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
index 1bb039bc7d..77279ae9f1 100644
--- a/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes, isSystemColumn } from 'nocodb-sdk'
+import { getRelationName } from './utils'
 import { MetaInj, inject, ref, useColumnCreateStoreOrThrow, useMetas, useProject, useVModel } from '#imports'
 
 const props = defineProps<{
@@ -27,36 +28,28 @@ setAdditionalValidations({
 if (!vModel.value.fk_relation_column_id) vModel.value.fk_relation_column_id = null
 if (!vModel.value.fk_lookup_column_id) vModel.value.fk_lookup_column_id = null
 
-const relationNames = {
-  mm: 'Many To Many',
-  hm: 'Has Many',
-  bt: 'Belongs To',
-}
-
 const refTables = $computed(() => {
-  if (!tables || !tables.length) {
+  if (!tables || !tables.length || !meta || !meta.columns) {
     return []
   }
 
-  return meta?.columns
-    ?.filter((c: any) => c.uidt === UITypes.LinkToAnotherRecord && !c.system)
-    .map((c: ColumnType) => ({
-      col: c.colOptions,
-      column: c,
-      ...tables.find((t) => t.id === (c.colOptions as LinkToAnotherRecordType).fk_related_model_id),
+  const _refTables = meta.columns
+    .filter((column) => column.uidt === UITypes.LinkToAnotherRecord && !column.system)
+    .map((column) => ({
+      col: column.colOptions,
+      column,
+      ...tables.find((table) => table.id === (column.colOptions as LinkToAnotherRecordType).fk_related_model_id),
     }))
-    .filter((table: any) => table.col.fk_related_model_id === table.id && !table.mm)
+    .filter((table) => (table.col as LinkToAnotherRecordType)?.fk_related_model_id === table.id && !table.mm)
+  return _refTables as Required<TableType & { column: ColumnType; col: Required<LinkToAnotherRecordType> }>[]
 })
 
-const columns = $computed(() => {
-  const selectedTable = refTables?.find((t) => t.column.id === vModel.value.fk_relation_column_id)
+const columns = $computed<ColumnType[]>(() => {
+  const selectedTable = refTables.find((t) => t.column.id === vModel.value.fk_relation_column_id)
   if (!selectedTable?.id) {
     return []
   }
-
-  return metas[selectedTable.id].columns.filter((c: any) => {
-    return !(isSystemColumn(c) || c.uidt === UITypes.QrCode)
-  })
+  return metas[selectedTable.id].columns.filter((c: ColumnType) => !isSystemColumn(c))
 })
 </script>
 
@@ -69,11 +62,11 @@ const columns = $computed(() => {
           dropdown-class-name="!w-64 nc-dropdown-relation-table"
           @change="onDataTypeChange"
         >
-          <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
+          <a-select-option v-for="(table, i) of refTables" :key="i" :value="table.col.fk_column_id">
             <div class="flex flex-row space-x-0.5 h-full pb-0.5 items-center justify-between">
               <div class="font-semibold text-xs">{{ table.column.title }}</div>
               <div class="text-[0.65rem] text-gray-600">
-                {{ relationNames[table.col.type] }} {{ table.title || table.table_name }}
+                {{ getRelationName(table.col.type) }} {{ table.title || table.table_name }}
               </div>
             </div>
           </a-select-option>
diff --git a/packages/nc-gui/components/smartsheet/column/RollupOptions.vue b/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
index 362008f9ff..960cbb7507 100644
--- a/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
+import { getRelationName } from './utils'
 import { MetaInj, inject, ref, useColumnCreateStoreOrThrow, useMetas, useProject, useVModel } from '#imports'
 
 const props = defineProps<{
@@ -24,11 +26,6 @@ setAdditionalValidations({
   rollup_function: [{ required: true, message: 'Required' }],
 })
 
-const relationNames = {
-  mm: 'Many To Many',
-  hm: 'Has Many',
-}
-
 const aggrFunctionsList = [
   { text: 'count', value: 'count' },
   { text: 'min', value: 'min' },
@@ -45,19 +42,18 @@ if (!vModel.value.fk_rollup_column_id) vModel.value.fk_rollup_column_id = null
 if (!vModel.value.rollup_function) vModel.value.rollup_function = null
 
 const refTables = $computed(() => {
-  if (!tables || !tables.length) {
+  if (!tables || !tables.length || !meta || !meta.columns) {
     return []
   }
 
-  return (
-    meta?.columns
-      ?.filter((c: any) => c.uidt === UITypes.LinkToAnotherRecord && c.colOptions.type !== 'bt' && !c.system)
-      .map((c) => ({
-        col: c.colOptions,
-        column: c,
-        ...tables.find((t) => t.id === (c.colOptions as any)?.fk_related_model_id),
-      })) ?? []
-  )
+  const _refTables = meta.columns
+    .filter((c) => c.uidt === UITypes.LinkToAnotherRecord && (c.colOptions as LinkToAnotherRecordType).type !== 'bt' && !c.system)
+    .map((c) => ({
+      col: c.colOptions,
+      column: c,
+      ...tables.find((t) => t.id === (c.colOptions as any)?.fk_related_model_id),
+    }))
+  return _refTables as Required<TableType & { column: ColumnType; col: Required<LinkToAnotherRecordType> }>[]
 })
 
 const columns = $computed(() => {
@@ -67,7 +63,7 @@ const columns = $computed(() => {
     return []
   }
 
-  return metas[selectedTable.id].columns.filter((c: any) => !isVirtualCol(c.uidt) && !isSystemColumn(c))
+  return metas[selectedTable.id].columns.filter((c: ColumnType) => !isVirtualCol(c.uidt as UITypes) && !isSystemColumn(c))
 })
 </script>
 
@@ -80,11 +76,11 @@ const columns = $computed(() => {
           dropdown-class-name="!w-64 nc-dropdown-relation-table"
           @change="onDataTypeChange"
         >
-          <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
+          <a-select-option v-for="(table, i) of refTables" :key="i" :value="table.col.fk_column_id">
             <div class="flex flex-row space-x-0.5 h-full pb-0.5 items-center justify-between">
               <div class="font-semibold text-xs">{{ table.column.title }}</div>
               <div class="text-[0.65rem] text-gray-600">
-                ({{ relationNames[table.col.type] }} {{ table.title || table.table_name }})
+                ({{ getRelationName(table.col.type) }} {{ table.title || table.table_name }})
               </div>
             </div>
           </a-select-option>
diff --git a/packages/nc-gui/components/smartsheet/column/utils.ts b/packages/nc-gui/components/smartsheet/column/utils.ts
new file mode 100644
index 0000000000..6a6a253c8b
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/column/utils.ts
@@ -0,0 +1,9 @@
+const relationNames = {
+  mm: 'Many To Many',
+  hm: 'Has Many',
+  bt: 'Belongs To',
+} as const
+
+export function getRelationName(type: string) {
+  return relationNames[type as keyof typeof relationNames]
+}
diff --git a/packages/nc-gui/components/smartsheet/header/Cell.vue b/packages/nc-gui/components/smartsheet/header/Cell.vue
index 08d4757a48..6cb89e6438 100644
--- a/packages/nc-gui/components/smartsheet/header/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/header/Cell.vue
@@ -2,7 +2,12 @@
 import type { ColumnReqType, ColumnType } from 'nocodb-sdk'
 import { ColumnInj, IsFormInj, IsKanbanInj, inject, provide, ref, toRef, useUIPermission } from '#imports'
 
-const props = defineProps<{ column: ColumnType & { meta: any }; required?: boolean | number; hideMenu?: boolean }>()
+interface Props {
+  column: ColumnType
+  required?: boolean | number
+  hideMenu?: boolean
+}
+const props = defineProps<Props>()
 
 const hideMenu = toRef(props, 'hideMenu')
 
diff --git a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
index da12c52f3b..7283d420ab 100644
--- a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
@@ -124,7 +124,7 @@ const closeAddColumnDropdown = () => {
       <span class="name" style="white-space: nowrap" :title="column.title"> {{ column.title }}</span>
     </a-tooltip>
 
-    <span v-if="isVirtualColRequired(column, meta.columns) || required" class="text-red-500">&nbsp;*</span>
+    <span v-if="isVirtualColRequired(column, meta?.columns || []) || required" class="text-red-500">&nbsp;*</span>
 
     <template v-if="!hideMenu">
       <div class="flex-1" />
diff --git a/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue b/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
index bde75f2511..7a3f3a35a4 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
-import { IsLockedInj, IsPublicInj, useKanbanViewStoreOrThrow, useMenuCloseOnEsc } from '#imports'
+import {
+  IsKanbanInj,
+  IsLockedInj,
+  IsPublicInj,
+  inject,
+  provide,
+  ref,
+  useKanbanViewStoreOrThrow,
+  useMenuCloseOnEsc,
+  useUIPermission,
+} from '#imports'
 
 const { isUIAllowed } = useUIPermission()
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue b/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue
index 7c2826673a..ba0f44136d 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue
@@ -14,6 +14,7 @@ import {
   useI18n,
   useNuxtApp,
   useProject,
+  useSharedView,
   useSmartsheetStoreOrThrow,
   useUIPermission,
 } from '#imports'
@@ -38,6 +39,8 @@ const selectedView = inject(ActiveViewInj, ref())
 
 const { sorts, nestedFilters } = useSmartsheetStoreOrThrow()
 
+const { exportFile: sharedViewExportFile } = useSharedView()
+
 const isLocked = inject(IsLockedInj)
 
 const showWebhookDrawer = ref(false)
@@ -58,7 +61,6 @@ const exportFile = async (exportType: ExportTypes) => {
     while (!isNaN(offset) && offset > -1) {
       let res
       if (isPublicView.value) {
-        const { exportFile: sharedViewExportFile } = useSharedView()
         res = await sharedViewExportFile(fields.value, offset, exportType, responseType)
       } else {
         res = await $api.dbViewRow.export(
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index 7d0440a3e5..6e56d64f81 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { TableType } from 'nocodb-sdk'
 import {
   ActiveViewInj,
   ReloadViewDataHookInj,
@@ -25,9 +26,9 @@ const searchDropdown = ref(null)
 onClickOutside(searchDropdown, () => (isDropdownOpen.value = false))
 
 const columns = computed(() =>
-  meta.value?.columns?.map((c) => ({
-    value: c.id,
-    label: c.title,
+  (meta.value as TableType)?.columns?.map((column) => ({
+    value: column.id,
+    label: column.title,
   })),
 )
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index c49310ea12..6b018c32fd 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -40,6 +40,11 @@ const columnByID = computed(() =>
   }, {} as Record<string, ColumnType>),
 )
 
+const getColumnByID = (key?: string) => {
+  if (!key) return ''
+  return columnByID.value[key]?.uidt || ''
+}
+
 watch(
   () => view.value?.id,
   (viewId) => {
@@ -74,7 +79,7 @@ useMenuCloseOnEsc(open)
         data-testid="nc-sorts-menu"
       >
         <div v-if="sorts?.length" class="sort-grid mb-2" @click.stop>
-          <template v-for="(sort, i) in sorts || []" :key="i">
+          <template v-for="(sort, i) of sorts" :key="i">
             <MdiCloseBox class="nc-sort-item-remove-btn text-grey self-center" small @click.stop="deleteSort(sort, i)" />
 
             <LazySmartsheetToolbarFieldListAutoCompleteDropdown
@@ -95,7 +100,7 @@ useMenuCloseOnEsc(open)
               @select="saveOrUpdate(sort, i)"
             >
               <a-select-option
-                v-for="(option, j) in getSortDirectionOptions(columnByID[sort.fk_column_id]?.uidt)"
+                v-for="(option, j) of getSortDirectionOptions(getColumnByID(sort.fk_column_id))"
                 :key="j"
                 :value="option.value"
               >
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
index 999ab2efc5..004a257873 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
@@ -4,6 +4,7 @@ import {
   IsLockedInj,
   IsPublicInj,
   extractSdkResponseErrorMsg,
+  getViewIcon,
   inject,
   message,
   ref,
@@ -13,7 +14,6 @@ import {
   useProject,
   useSmartsheetStoreOrThrow,
   useUIPermission,
-  viewIcons,
 } from '#imports'
 import { LockType } from '~/lib'
 import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
@@ -30,9 +30,11 @@ const isView = false
 
 const { $api, $e } = useNuxtApp()
 
-const selectedView = inject(ActiveViewInj)
+const { isSqlView } = useSmartsheetStoreOrThrow()
+
+const selectedView = inject(ActiveViewInj, ref())
 
-const isLocked = inject(IsLockedInj)
+const isLocked = inject(IsLockedInj, ref(false))
 
 const showWebhookDrawer = ref(false)
 
@@ -46,8 +48,8 @@ const { isUIAllowed } = useUIPermission()
 
 const { isSharedBase } = useProject()
 
-const Icon = computed(() => {
-  switch (selectedView?.value.lock_type) {
+const Icon = $computed(() => {
+  switch (selectedView.value?.lock_type) {
     case LockType.Personal:
       return MdiAccountIcon
     case LockType.Locked:
@@ -58,10 +60,12 @@ const Icon = computed(() => {
   }
 })
 
+const lockType = $computed(() => (selectedView.value?.lock_type as LockType) || LockType.Collaborative)
+
 async function changeLockType(type: LockType) {
   $e('a:grid:lockmenu', { lockType: type })
 
-  if (!selectedView?.value) return
+  if (!selectedView.value) return
 
   if (type === 'personal') {
     // Coming soon
@@ -79,8 +83,6 @@ async function changeLockType(type: LockType) {
   }
 }
 
-const { isSqlView } = useSmartsheetStoreOrThrow()
-
 const open = ref(false)
 
 useMenuCloseOnEsc(open)
@@ -92,9 +94,9 @@ useMenuCloseOnEsc(open)
       <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
         <div class="flex gap-2 items-center">
           <component
-            :is="viewIcons[selectedView?.type].icon"
+            :is="getViewIcon(selectedView?.type)?.icon"
             class="nc-view-icon group-hover:hidden"
-            :style="{ color: viewIcons[selectedView?.type].color }"
+            :style="{ color: getViewIcon(selectedView?.type)?.color }"
           />
 
           <span class="!text-sm font-weight-normal">
@@ -117,7 +119,7 @@ useMenuCloseOnEsc(open)
             >
               <template #title>
                 <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group px-0 !py-0">
-                  <LazySmartsheetToolbarLockType hide-tick :type="selectedView?.lock_type || LockType.Collaborative" />
+                  <LazySmartsheetToolbarLockType hide-tick :type="lockType" />
 
                   <MaterialSymbolsChevronRightRounded
                     class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
diff --git a/packages/nc-gui/components/tabs/auth/UserManagement.vue b/packages/nc-gui/components/tabs/auth/UserManagement.vue
index de04d7e274..21eae314ae 100644
--- a/packages/nc-gui/components/tabs/auth/UserManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/UserManagement.vue
@@ -174,7 +174,7 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
 
   <div v-else class="flex flex-col w-full px-6">
     <LazyTabsAuthUserManagementUsersModal
-      :key="showUserModal"
+      :key="`${showUserModal}`"
       :show="showUserModal"
       :selected-user="selectedUser"
       @closed="showUserModal = false"
diff --git a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
index 24976c0bd8..0fa1d2fc81 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
@@ -21,7 +21,7 @@ import { ProjectRole } from '~/lib'
 
 interface Props {
   show: boolean
-  selectedUser?: User
+  selectedUser?: User | null
 }
 
 interface Users {
diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index ca5943a4fb..bf421c3d32 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -693,7 +693,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
                   size="large"
                   hide-details
                   :bordered="false"
-                  @click="$event.stopPropagation()"
+                  @click.stop
                   @blur="handleEditableTnChange(tableIdx)"
                   @keydown.enter="handleEditableTnChange(tableIdx)"
                 />
@@ -749,14 +749,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
               <template #bodyCell="{ column, record }">
                 <template v-if="column.key === 'column_name'">
                   <a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
-                    <a-input
-                      :ref="
-                        (el) => {
-                          inputRefs[record.key] = el
-                        }
-                      "
-                      v-model:value="record.column_name"
-                    />
+                    <a-input :ref="(el: HTMLInputElement) => (inputRefs[record.key] = el)" v-model:value="record.column_name" />
                   </a-form-item>
                 </template>
 
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 24e73d3dfc..f451d6b99c 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { ColumnType } from 'nocodb-sdk'
+import type { Row } from '~/lib'
 import {
   ColumnInj,
   Empty,
@@ -27,7 +28,7 @@ const isForm = inject(IsFormInj, ref(false))
 
 const isPublic = inject(IsPublicInj, ref(false))
 
-const column = inject(ColumnInj)
+const column = inject(ColumnInj, ref())
 
 const readonly = inject(ReadonlyInj, ref(false))
 
@@ -81,6 +82,8 @@ const expandedFormDlg = ref(false)
 
 const expandedFormRow = ref()
 
+const colTitle = $computed(() => column.value?.title || '')
+
 /** reload children list whenever cell value changes and list is visible */
 watch(
   () => props.cellValue,
@@ -88,6 +91,12 @@ watch(
     if (!isNew.value && vModel.value) loadChildrenList()
   },
 )
+
+const onClick = (row: Row) => {
+  if (readonly.value) return
+  expandedFormRow.value = row
+  expandedFormDlg.value = true
+}
 </script>
 
 <template>
@@ -119,25 +128,20 @@ watch(
           @click="emit('attachRecord')"
         >
           <div class="flex items-center gap-1">
+            <!-- todo: where is row supposed to come from? this is a bug! -->
             <MdiLinkVariantRemove class="text-xs" type="primary" @click="unlinkRow(row)" />
             Link to '{{ relatedTableMeta.title }}'
           </div>
         </a-button>
       </div>
 
-      <template v-if="(isNew && state?.[column?.title]?.length) || childrenList?.pageInfo?.totalRows">
+      <template v-if="(isNew && state?.[colTitle]?.length) || childrenList?.pageInfo?.totalRows">
         <div class="flex-1 overflow-auto min-h-0 scrollbar-thin-dull px-12 cursor-pointer">
           <a-card
-            v-for="(row, i) of childrenList?.list ?? state?.[column?.title] ?? []"
+            v-for="(row, i) of childrenList?.list ?? state?.[colTitle] ?? []"
             :key="i"
             class="!my-4 hover:(!bg-gray-200/50 shadow-md)"
-            @click="
-              () => {
-                if (readonly) return
-                expandedFormRow = row
-                expandedFormDlg = true
-              }
-            "
+            @click="onClick(row)"
           >
             <div class="flex items-center">
               <div class="flex-1 overflow-hidden min-w-0">
@@ -169,7 +173,7 @@ watch(
             v-model:page-size="childrenListPagination.size"
             class="mt-2 mx-auto"
             size="small"
-            :total="childrenList.pageInfo.totalRows"
+            :total="childrenList?.pageInfo.totalRows"
             show-less-items
           />
         </div>
diff --git a/packages/nc-gui/components/webhook/List.vue b/packages/nc-gui/components/webhook/List.vue
index 8c9900c035..a07507f15c 100644
--- a/packages/nc-gui/components/webhook/List.vue
+++ b/packages/nc-gui/components/webhook/List.vue
@@ -52,7 +52,7 @@ onMounted(() => {
 <template>
   <div class="">
     <div class="mb-2">
-      <div class="float-left font-bold text-xl mt-2 mb-4">{{ meta.title }} : Webhooks</div>
+      <div class="float-left font-bold text-xl mt-2 mb-4">{{ meta?.title }} : Webhooks</div>
 
       <a-button
         v-e="['c:webhook:add']"
diff --git a/packages/nc-gui/composables/useColumnCreateStore.ts b/packages/nc-gui/composables/useColumnCreateStore.ts
index c86fe2aa4f..db7c7aef9a 100644
--- a/packages/nc-gui/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui/composables/useColumnCreateStore.ts
@@ -2,6 +2,7 @@ import clone from 'just-clone'
 import type { ColumnReqType, ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import type { Ref } from 'vue'
+import type { RuleObject } from 'ant-design-vue/es/form'
 import {
   Form,
   computed,
@@ -20,6 +21,10 @@ const useForm = Form.useForm
 
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
+interface ValidationsObj {
+  [key: string]: RuleObject[]
+}
+
 const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState(
   (meta: Ref<TableType | undefined>, column: Ref<ColumnType | undefined>) => {
     const { sqlUi } = useProject()
@@ -36,10 +41,10 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
 
     const idType = null
 
-    const additionalValidations = ref<Record<string, any>>({})
+    const additionalValidations = ref<ValidationsObj>({})
 
-    const setAdditionalValidations = (validations: Record<string, any>) => {
-      additionalValidations.value = validations
+    const setAdditionalValidations = (validations: ValidationsObj) => {
+      additionalValidations.value = { ...additionalValidations.value, ...validations }
     }
 
     const formState = ref<Record<string, any>>({
diff --git a/packages/nc-gui/composables/useExpandedFormDetached/index.ts b/packages/nc-gui/composables/useExpandedFormDetached/index.ts
index 2aef11da08..2e75a723da 100644
--- a/packages/nc-gui/composables/useExpandedFormDetached/index.ts
+++ b/packages/nc-gui/composables/useExpandedFormDetached/index.ts
@@ -4,7 +4,7 @@ import type { Row } from '~/lib'
 
 interface UseExpandedFormDetachedProps {
   'isOpen'?: boolean
-  'row': Row | null
+  'row': Row
   'state'?: Record<string, any> | null
   'meta': TableType
   'loadRow'?: boolean
diff --git a/packages/nc-gui/composables/useLTARStore.ts b/packages/nc-gui/composables/useLTARStore.ts
index 3e7ad5a304..902718719e 100644
--- a/packages/nc-gui/composables/useLTARStore.ts
+++ b/packages/nc-gui/composables/useLTARStore.ts
@@ -94,7 +94,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
     }
 
     const relatedTablePrimaryValueProp = computed(() => {
-      return (relatedTableMeta.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
+      return (relatedTableMeta.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title || ''
     })
 
     const relatedTablePrimaryKeyProps = computed(() => {
diff --git a/packages/nc-gui/composables/useSharedView.ts b/packages/nc-gui/composables/useSharedView.ts
index c28df9ac7e..eba45ac353 100644
--- a/packages/nc-gui/composables/useSharedView.ts
+++ b/packages/nc-gui/composables/useSharedView.ts
@@ -103,7 +103,7 @@ export function useSharedView() {
     const page = paginationData.value.page || 1
     const pageSize = paginationData.value.pageSize || appInfoDefaultLimit
 
-    const data = await $api.public.groupedDataList(
+    return await $api.public.groupedDataList(
       sharedView.value.uuid!,
       columnId,
       {
@@ -118,7 +118,6 @@ export function useSharedView() {
         },
       },
     )
-    return data
   }
 
   const exportFile = async (
@@ -126,7 +125,7 @@ export function useSharedView() {
     offset: number,
     type: ExportTypes.EXCEL | ExportTypes.CSV,
     responseType: 'base64' | 'blob',
-    { sortsArr, filtersArr }: { sortsArr: SortType[]; filtersArr: FilterType[] },
+    { sortsArr, filtersArr }: { sortsArr: SortType[]; filtersArr: FilterType[] } = { sortsArr: [], filtersArr: [] },
   ) => {
     return await $api.public.csvExport(sharedView.value!.uuid!, type, {
       format: responseType,
diff --git a/packages/nc-gui/composables/useSmartsheetStore.ts b/packages/nc-gui/composables/useSmartsheetStore.ts
index b4de1ce736..354f025afc 100644
--- a/packages/nc-gui/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui/composables/useSmartsheetStore.ts
@@ -47,7 +47,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
     })
 
     const isSqlView = computed(() => (meta.value as TableType)?.type === 'view')
-    const sorts = ref<SortType[]>(unref(initialSorts) ?? [])
+    const sorts = ref<Required<SortType>[]>((unref(initialSorts) as Required<SortType>[]) ?? [])
     const nestedFilters = ref<FilterType[]>(unref(initialFilters) ?? [])
 
     return {
diff --git a/packages/nc-gui/package-lock.json b/packages/nc-gui/package-lock.json
index 676878a194..acc6d41b21 100644
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@@ -9,6 +9,7 @@
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@ckpack/vue-color": "^1.2.0",
+        "@types/file-saver": "^2.0.5",
         "@vue-flow/additional-components": "^1.2.0",
         "@vue-flow/core": "^1.3.0",
         "@vuelidate/core": "^2.0.0-alpha.44",
@@ -3021,6 +3022,11 @@
       "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
       "dev": true
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ=="
+    },
     "node_modules/@types/form-data": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/@types/form-data/-/form-data-0.0.33.tgz",
@@ -19714,6 +19720,11 @@
       "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
       "dev": true
     },
+    "@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ=="
+    },
     "@types/form-data": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/@types/form-data/-/form-data-0.0.33.tgz",
diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json
index ab0ed240b7..2f1fe47c37 100644
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@@ -41,6 +41,7 @@
     "ant-design-vue": "^3.2.11",
     "d3-scale": "^4.0.2",
     "dagre": "^0.8.5",
+    "@types/file-saver": "^2.0.5",
     "dayjs": "^1.11.3",
     "file-saver": "^2.0.5",
     "httpsnippet": "^2.0.0",
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index e931dbbc37..3902c279a5 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -84,9 +84,10 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                   <div>
                     <LazySmartsheetVirtualCell
                       v-if="isVirtualCol(field)"
+                      :model-value="null"
                       class="mt-0 nc-input"
                       :data-testid="`nc-form-input-cell-${field.label || field.title}`"
-                      :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                      :class="`nc-form-input-${field.title?.replaceAll(' ', '')}`"
                       :column="field"
                     />
 
@@ -95,7 +96,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                       v-model="formState[field.title]"
                       class="nc-input"
                       :data-testid="`nc-form-input-cell-${field.label || field.title}`"
-                      :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                      :class="`nc-form-input-${field.title?.replaceAll(' ', '')}`"
                       :column="field"
                       :edit-enabled="true"
                     />
diff --git a/packages/nc-gui/pages/forgot-password.vue b/packages/nc-gui/pages/forgot-password.vue
index ac73a718d1..b2a419980b 100644
--- a/packages/nc-gui/pages/forgot-password.vue
+++ b/packages/nc-gui/pages/forgot-password.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { RuleObject } from 'ant-design-vue/es/form'
 import { definePageMeta, reactive, ref, useApi, useI18n, validateEmail } from '#imports'
 
 definePageMeta({
@@ -25,13 +26,13 @@ const formRules = {
     {
       validator: (_: unknown, v: string) => {
         return new Promise((resolve, reject) => {
-          if (validateEmail(v)) return resolve(true)
+          if (validateEmail(v)) return resolve()
           reject(new Error(t('msg.error.signUpRules.emailInvalid')))
         })
       },
       message: t('msg.error.signUpRules.emailInvalid'),
     },
-  ],
+  ] as RuleObject[],
 }
 
 async function resetPassword() {
diff --git a/packages/nc-gui/pages/index/index/[projectId].vue b/packages/nc-gui/pages/index/index/[projectId].vue
index 76ea91250b..a90fb781d7 100644
--- a/packages/nc-gui/pages/index/index/[projectId].vue
+++ b/packages/nc-gui/pages/index/index/[projectId].vue
@@ -2,6 +2,7 @@
 import type { Form } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import type { VNodeRef } from '@vue/runtime-core'
+import type { RuleObject } from 'ant-design-vue/es/form'
 import {
   extractSdkResponseErrorMsg,
   message,
@@ -25,7 +26,7 @@ const nameValidationRules = [
     message: 'Project name is required',
   },
   projectTitleValidator,
-]
+] as RuleObject[]
 
 const form = ref<typeof Form>()
 
diff --git a/packages/nc-gui/pages/index/index/create.vue b/packages/nc-gui/pages/index/index/create.vue
index ace4e213fc..c7af4dc174 100644
--- a/packages/nc-gui/pages/index/index/create.vue
+++ b/packages/nc-gui/pages/index/index/create.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { Form } from 'ant-design-vue'
+import type { RuleObject } from 'ant-design-vue/es/form'
 import type { VNodeRef } from '@vue/runtime-core'
 import {
   extractSdkResponseErrorMsg,
@@ -25,7 +26,7 @@ const nameValidationRules = [
     message: 'Project name is required',
   },
   projectTitleValidator,
-]
+] as RuleObject[]
 
 const form = ref<typeof Form>()
 
diff --git a/packages/nc-gui/pages/projects/index.vue b/packages/nc-gui/pages/projects/index.vue
index c7d2c924b6..d17df47054 100644
--- a/packages/nc-gui/pages/projects/index.vue
+++ b/packages/nc-gui/pages/projects/index.vue
@@ -2,8 +2,7 @@
 import { Modal, message } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import { useI18n } from 'vue-i18n'
-import { navigateTo } from '#app'
-import { extractSdkResponseErrorMsg } from '~/utils'
+import { extractSdkResponseErrorMsg, navigateTo, useNuxtApp, useRoute } from '#imports'
 import MaterialSymbolsFormatListBulletedRounded from '~icons/material-symbols/format-list-bulleted-rounded'
 import MaterialSymbolsGridView from '~icons/material-symbols/grid-view'
 import MdiPlus from '~icons/mdi/plus'
diff --git a/packages/nc-gui/pages/projects/index/index.vue b/packages/nc-gui/pages/projects/index/index.vue
index a8f531c96e..f48927a4d1 100644
--- a/packages/nc-gui/pages/projects/index/index.vue
+++ b/packages/nc-gui/pages/projects/index/index.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { ProjectType } from 'nocodb-sdk'
-import { navigateTo } from '#app'
-import { useColors } from '#imports'
+import { navigateTo, useColors, useNuxtApp } from '#imports'
 import MdiMenuDown from '~icons/mdi/menu-down'
 import MdiDeleteOutline from '~icons/mdi/delete-outline'
 import MdiPlus from '~icons/mdi/plus'
@@ -25,7 +24,7 @@ const openProject = async (project: ProjectType) => {
   $e('a:project:open', { count: projects.length })
 }
 
-const formatTitle = (title: string) =>
+const formatTitle = (title: '') =>
   title
     .split(' ')
     .map((w) => w[0])
diff --git a/packages/nc-gui/pages/signup/[[token]].vue b/packages/nc-gui/pages/signup/[[token]].vue
index 8cb723f895..8a92da1ccd 100644
--- a/packages/nc-gui/pages/signup/[[token]].vue
+++ b/packages/nc-gui/pages/signup/[[token]].vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { validatePassword } from 'nocodb-sdk'
+import type { RuleObject } from 'ant-design-vue/es/form'
 import {
   definePageMeta,
   navigateTo,
@@ -44,24 +45,24 @@ const formRules = {
     {
       validator: (_: unknown, v: string) => {
         return new Promise((resolve, reject) => {
-          if (!v?.length || validateEmail(v)) return resolve(true)
+          if (!v?.length || validateEmail(v)) return resolve()
           reject(new Error(t('msg.error.signUpRules.emailInvalid')))
         })
       },
       message: t('msg.error.signUpRules.emailInvalid'),
     },
-  ],
+  ] as RuleObject[],
   password: [
     {
       validator: (_: unknown, v: string) => {
         return new Promise((resolve, reject) => {
           const { error, valid } = validatePassword(v)
-          if (valid) return resolve(true)
+          if (valid) return resolve()
           reject(new Error(error))
         })
       },
     },
-  ],
+  ] as RuleObject[],
 }
 
 async function signUp() {
diff --git a/packages/nc-gui/utils/sortUtils.ts b/packages/nc-gui/utils/sortUtils.ts
index 234cf98a17..7d2ccca8c6 100644
--- a/packages/nc-gui/utils/sortUtils.ts
+++ b/packages/nc-gui/utils/sortUtils.ts
@@ -1,6 +1,6 @@
 import { UITypes } from 'nocodb-sdk'
 
-export const getSortDirectionOptions = (uidt: UITypes) => {
+export const getSortDirectionOptions = (uidt: UITypes | string) => {
   switch (uidt) {
     case UITypes.Year:
     case UITypes.Number:
diff --git a/packages/nc-gui/utils/viewUtils.ts b/packages/nc-gui/utils/viewUtils.ts
index e197e766ed..d373f8378d 100644
--- a/packages/nc-gui/utils/viewUtils.ts
+++ b/packages/nc-gui/utils/viewUtils.ts
@@ -1,5 +1,5 @@
 import { ViewTypes } from 'nocodb-sdk'
-import { themeV2Colors } from '~/utils'
+import { themeV2Colors } from '#imports'
 
 import MdiGridIcon from '~icons/mdi/grid-large'
 import MdiFormIcon from '~icons/mdi/form-select'
@@ -41,3 +41,9 @@ export function applyLanguageDirection(dir: typeof rtl | typeof ltr) {
 export function applyNonSelectable() {
   document.body.classList.add('non-selectable')
 }
+
+export const getViewIcon = (key?: string | number) => {
+  if (!key) return
+
+  return viewIcons[key]
+}
diff --git a/packages/nc-gui/web-types.json b/packages/nc-gui/web-types.json
index 701777a464..1c688f9ad4 100644
--- a/packages/nc-gui/web-types.json
+++ b/packages/nc-gui/web-types.json
@@ -13,6 +13,10 @@
         {
           "name": "t",
           "description": "I18n directive"
+        },
+        {
+          "name": "xc-ver-resize",
+          "description": "Resize directive"
         }
       ]
     }