From c47b364c07b091d413b80287fd5e3fc4a70a2fe3 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Fri, 13 Sep 2024 21:48:06 +0200
Subject: [PATCH 1/5] Improve searching + added reation date to User

---
 server/mergin/auth/api.yaml      | 9 +++++++--
 server/mergin/auth/controller.py | 9 +++++----
 server/mergin/auth/schemas.py    | 1 +
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/server/mergin/auth/api.yaml b/server/mergin/auth/api.yaml
index 337dc862..f89e110d 100644
--- a/server/mergin/auth/api.yaml
+++ b/server/mergin/auth/api.yaml
@@ -171,7 +171,7 @@ paths:
                   count:
                     type: integer
                     example: 10
-                  users:
+                  items:
                     type: array
                     items:
                       $ref: "#/components/schemas/User"
@@ -670,6 +670,11 @@ components:
           type: string
           format: date-time
           example: 2023-07-30T08:47:58Z
+        registration_date:
+          nullable: true
+          type: string
+          format: date-time
+          example: 2023-07-30T08:47:58Z
         profile:
           $ref: "#/components/schemas/UserProfile"
     PaginatedUsers:
@@ -839,4 +844,4 @@ components:
         - editor
         - reader
         - guest
-      example: reader
\ No newline at end of file
+      example: reader
diff --git a/server/mergin/auth/controller.py b/server/mergin/auth/controller.py
index 36932def..42d84714 100644
--- a/server/mergin/auth/controller.py
+++ b/server/mergin/auth/controller.py
@@ -6,7 +6,7 @@
 import pytz
 from datetime import datetime, timedelta
 from connexion import NoContent
-from sqlalchemy import func, desc, asc
+from sqlalchemy import func, desc, asc, or_
 from sqlalchemy.sql.operators import is_
 from flask import request, current_app, jsonify, abort, render_template
 from flask_login import login_user, logout_user, current_user
@@ -454,8 +454,9 @@ def get_paginated_users(
     )
 
     if like:
-        attr = User.email if "@" in like else User.username
-        users = users.filter(attr.ilike(f"%{like}%"))
+        users = users.filter(
+            User.username.ilike(f"%{like}%") | User.email.ilike(f"%{like}%")
+        )
 
     if descending and order_by:
         users = users.order_by(desc(User.__table__.c[order_by]))
@@ -467,7 +468,7 @@ def get_paginated_users(
 
     result_users = UserSchema(many=True).dump(result)
 
-    data = {"users": result_users, "total": total}
+    data = {"items": result_users, "count": total}
     return data, 200
 
 
diff --git a/server/mergin/auth/schemas.py b/server/mergin/auth/schemas.py
index bcebca5c..10475b2c 100644
--- a/server/mergin/auth/schemas.py
+++ b/server/mergin/auth/schemas.py
@@ -71,6 +71,7 @@ class Meta:
             "verified_email",
             "profile",
             "scheduled_removal",
+            "registration_date",
         )
         load_instance = True
 

From 658f113bb0b148e036069acca373bbdf61e7bfd2 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Fri, 13 Sep 2024 21:48:56 +0200
Subject: [PATCH 2/5] Added: - AccountsTable / AccountDetail / banners /
 dialogs

Refactored:
- dl -> dd
- label class removing
---
 web-app/packages/admin-app/src/router.ts      |  38 +--
 web-app/packages/admin-app/vite.config.ts     |   1 +
 web-app/packages/admin-lib/components.d.ts    |   6 +
 .../admin-lib/src/modules/admin/adminApi.ts   |  31 +-
 .../admin/components/CreateUserForm.vue       | 166 +++++-----
 .../admin-lib/src/modules/admin/store.ts      |  27 +-
 .../admin-lib/src/modules/admin/types.ts      |   5 +-
 .../modules/admin/views/AccountDetailView.vue | 286 +++++++++++++++++
 .../src/modules/admin/views/AccountsView.vue  | 261 ++++++++--------
 .../src/modules/admin/views/ProfileView.vue   | 290 ------------------
 .../src/modules/admin/views/index.ts          |   4 +-
 .../packages/admin-lib/src/shims-pinia.d.ts   |   7 +
 web-app/packages/admin-lib/src/shims-tsx.d.ts |  15 -
 web-app/packages/admin-lib/src/shims-vue.d.ts |  15 +-
 web-app/packages/admin-lib/vite.config.ts     |   1 +
 .../themes/mm-theme-light/_extensions.scss    |  11 +-
 .../common/components/AppPasswordTooltip.vue  |   2 +-
 .../lib/src/common/components/types.ts        |   7 +
 web-app/packages/lib/src/mm-theme.ts          |  26 +-
 .../project/components/FileDetailSidebar.vue  |  12 +-
 .../project/components/ProjectShareDialog.vue |   2 +-
 .../components/ProjectShareDialogTemplate.vue |   2 +-
 .../project/components/ProjectsTable.vue      |  47 +--
 .../components/VersionDetailSidebar.vue       |  20 +-
 .../packages/lib/src/modules/project/types.ts |   7 -
 .../user/components/ChangePasswordForm.vue    |   2 +-
 .../user/components/EditProfileForm.vue       |   6 +-
 .../packages/lib/src/modules/user/types.ts    |   2 +
 .../modules/user/views/ChangePasswordView.vue |  10 -
 .../modules/user/views/LoginViewTemplate.vue  |   6 +-
 .../user/views/ProfileViewTemplate.vue        |   8 +-
 31 files changed, 644 insertions(+), 679 deletions(-)
 create mode 100644 web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue
 delete mode 100644 web-app/packages/admin-lib/src/modules/admin/views/ProfileView.vue
 create mode 100644 web-app/packages/admin-lib/src/shims-pinia.d.ts
 delete mode 100644 web-app/packages/admin-lib/src/shims-tsx.d.ts

diff --git a/web-app/packages/admin-app/src/router.ts b/web-app/packages/admin-app/src/router.ts
index f8996e7a..d10c55d3 100644
--- a/web-app/packages/admin-app/src/router.ts
+++ b/web-app/packages/admin-app/src/router.ts
@@ -3,8 +3,8 @@
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 import {
-  AccountView
-  //   ProfileView,
+  AccountsView,
+  AccountDetailView
   //   SettingsView,
   //   ProjectSettingsView,
   //   ProjectsView,
@@ -67,7 +67,7 @@ export const createRouter = (pinia: Pinia) => {
         path: '/accounts',
         name: 'accounts',
         components: {
-          default: AccountView,
+          default: AccountsView,
           sidebar: Sidebar,
           header: AppHeader
         },
@@ -77,30 +77,18 @@ export const createRouter = (pinia: Pinia) => {
           routeUtils.isAuthenticatedGuard(to, from, next, userStore)
           routeUtils.isSuperUser(to, from, next, userStore)
         }
+      },
+      {
+        path: '/user/:username',
+        name: 'account',
+        components: {
+          default: AccountDetailView,
+          sidebar: Sidebar,
+          header: AppHeader
+        },
+        props: true
       }
       // {
-      //   path: '/user/:username',
-      //   name: 'profile',
-      //   component: ProfileView,
-      //   props: true,
-      //   beforeEnter: async (to, from, next) => {
-      //     const adminStore = useAdminStore(pinia)
-      //     adminStore.setUserAdminProfile(null)
-      //     try {
-      //       await adminStore.fetchUserProfileByName({
-      //         username: to.params.username
-      //       })
-      //       next()
-      //     } catch (e) {
-      //       next(
-      //         Error(
-      //           errorUtils.getErrorMessage(e, 'Failed to fetch user profile')
-      //         )
-      //       )
-      //     }
-      //   }
-      // },
-      // {
       //   path: '/projects',
       //   name: 'projects',
       //   component: ProjectsView,
diff --git a/web-app/packages/admin-app/vite.config.ts b/web-app/packages/admin-app/vite.config.ts
index 15f916ec..d5a8efb3 100644
--- a/web-app/packages/admin-app/vite.config.ts
+++ b/web-app/packages/admin-app/vite.config.ts
@@ -53,6 +53,7 @@ export default defineConfig(({ mode }) => ({
     sourcemap: mode !== 'production'
   },
   optimizeDeps: {
+    include: ['vue-router'],
     exclude: ['vue', '@mergin', 'vue-demi'],
     esbuildOptions: {
       define: {
diff --git a/web-app/packages/admin-lib/components.d.ts b/web-app/packages/admin-lib/components.d.ts
index fe456069..50387356 100644
--- a/web-app/packages/admin-lib/components.d.ts
+++ b/web-app/packages/admin-lib/components.d.ts
@@ -7,7 +7,13 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    PAvatar: typeof import('primevue/avatar')['default']
     PButton: typeof import('primevue/button')['default']
+    PColumn: typeof import('primevue/column')['default']
+    PDataTable: typeof import('primevue/datatable')['default']
+    PInputSwitch: typeof import('primevue/inputswitch')['default']
+    PInputText: typeof import('primevue/inputtext')['default']
+    PPassword: typeof import('primevue/password')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/web-app/packages/admin-lib/src/modules/admin/adminApi.ts b/web-app/packages/admin-lib/src/modules/admin/adminApi.ts
index 7d429b79..3d53e80f 100644
--- a/web-app/packages/admin-lib/src/modules/admin/adminApi.ts
+++ b/web-app/packages/admin-lib/src/modules/admin/adminApi.ts
@@ -31,16 +31,13 @@ export const AdminApi = {
     return AdminModule.httpService.get(`/app/admin/users`, { params })
   },
 
-  async fetchUserProfileByName(
+  async fetchUserByName(
     username: string
   ): Promise<AxiosResponse<UserResponse>> {
-    return AdminModule.httpService?.get(`/app/admin/user/${username}?random=${Math.random()}`)
+    return AdminModule.httpService?.get(`/app/admin/user/${username}`)
   },
 
-  async deleteUser(
-    username: number,
-    withRetry?: boolean
-  ): Promise<AxiosResponse<void>> {
+  async deleteUser(username: number): Promise<AxiosResponse<void>> {
     return AdminModule.httpService.delete(
       `/app/admin/user/${username}` /*, {
       ...(withRetry ? getDefaultRetryOptions() : {})
@@ -50,8 +47,7 @@ export const AdminApi = {
 
   async updateUser(
     username: string,
-    data: UpdateUserData,
-    withRetry?: boolean
+    data: UpdateUserData
   ): Promise<AxiosResponse<UserResponse>> {
     return AdminModule.httpService.patch(
       `/app/admin/user/${username}`,
@@ -118,9 +114,12 @@ export const AdminApi = {
    * @return Result promise
    */
   async removeProject(id: number): Promise<AxiosResponse<void>> {
-    return await AdminModule.httpService.delete(`/app/project/removed-project/${id}`, {
-      'axios-retry': { retries: 5 }
-    })
+    return await AdminModule.httpService.delete(
+      `/app/project/removed-project/${id}`,
+      {
+        'axios-retry': { retries: 5 }
+      }
+    )
   },
 
   /**
@@ -129,8 +128,12 @@ export const AdminApi = {
    * @return Result promise
    */
   async restoreProject(id: number): Promise<AxiosResponse<void>> {
-    return await AdminModule.httpService.post(`/app/project/removed-project/restore/${id}`, null, {
-      'axios-retry': { retries: 5 }
-    })
+    return await AdminModule.httpService.post(
+      `/app/project/removed-project/restore/${id}`,
+      null,
+      {
+        'axios-retry': { retries: 5 }
+      }
+    )
   }
 }
diff --git a/web-app/packages/admin-lib/src/modules/admin/components/CreateUserForm.vue b/web-app/packages/admin-lib/src/modules/admin/components/CreateUserForm.vue
index 08835a40..a97323a5 100644
--- a/web-app/packages/admin-lib/src/modules/admin/components/CreateUserForm.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/components/CreateUserForm.vue
@@ -5,79 +5,79 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <v-form @submit.prevent ref="form">
-    <v-card v-on:keyup.enter="submit" v-on:keyup.esc="close">
-      <v-card-title>
-        <span class="text-h5">
-          <span>Create user</span>
-        </span>
-      </v-card-title>
-      <v-card-text>
-        <v-text-field
-          placeholder="Username"
-          name="username"
-          color="inputColor"
-          v-model="username"
-          :error-messages="errors.username"
-        />
-        <v-text-field
-          placeholder="Email"
-          name="email"
-          color="inputColor"
-          v-model="email"
-          :error-messages="errors.email"
-        />
-        <v-layout align-center>
-          <v-text-field
-            placeholder="Password"
-            name="password"
-            color="inputColor"
-            v-model="password"
-            :append-icon="passwordVisible ? 'visibility_off' : 'visibility'"
-            @click:append="passwordVisible = !passwordVisible"
-            :type="passwordVisible ? 'text' : 'password'"
-            :error-messages="errors.password"
-          />
-          <v-tooltip
-            top
-            color="orange"
-            max-width="350"
-            content-class="form-tooltip"
-          >
-            <template v-slot:activator="{ on }">
-              <v-icon v-on="on" class="ml-1 mb-1">info</v-icon>
-            </template>
-            <ul>
-              <li>Password must be at least 8 characters long.</li>
-              <li>
-                Password must contain at least 3 character categories among the
-                following:
-                <ul>
-                  <li>Lowercase characters (a-z)</li>
-                  <li>Uppercase characters (A-Z)</li>
-                  <li>Digits (0-9)</li>
-                  <li>Special characters</li>
-                </ul>
-              </li>
-            </ul>
-          </v-tooltip>
-        </v-layout>
-        <slot />
+  <form @submit.prevent="submit" class="flex flex-column pb-4">
+    <span class="p-input-filled">
+      <label for="username">First name</label>
+      <PInputText
+        id="username"
+        v-model="username"
+        data-cy="create-user-username"
+        :class="['w-full', errors.username ? 'p-invalid' : '']"
+        toggleMask
+        :feedback="false"
+        aria-describedby="username-error"
+      />
+      <span class="p-error paragraph-p6" id="username-error">{{
+        errors.username?.[0] || '&nbsp;'
+      }}</span>
+    </span>
 
-        <v-card-actions>
-          <v-spacer />
-          <v-btn class="black--text" @click="close"> Close</v-btn>
-          <v-btn
-            class="orange white--text"
-            :disabled="invalidInput"
-            @click="submit"
-          >
-            Submit
-          </v-btn>
-        </v-card-actions>
-      </v-card-text>
-    </v-card>
-  </v-form>
+    <span class="p-input-filled">
+      <label for="email">Email</label>
+      <PInputText
+        id="email"
+        v-model="email"
+        data-cy="create-user-email"
+        :class="['w-full', errors.email ? 'p-invalid' : '']"
+        toggleMask
+        :feedback="false"
+        aria-describedby="email-error"
+      />
+      <span class="p-error paragraph-p6" id="email-error">{{
+        errors.email?.[0] || '&nbsp;'
+      }}</span>
+    </span>
+
+    <span class="p-input-filled">
+      <app-password-tooltip for="newPassword"
+        ><template #label>Password</template>
+      </app-password-tooltip>
+      <PPassword
+        id="newPassword"
+        v-model="password"
+        data-cy="change-password"
+        :class="['w-full', errors.password ? 'p-invalid' : '']"
+        toggleMask
+        :feedback="false"
+        aria-describedby="password-error"
+        placeholder="Enter password"
+      />
+      <span class="p-error paragraph-p6" id="password-error">{{
+        errors.password?.[0] || '&nbsp;'
+      }}</span>
+    </span>
+
+    <!-- Footer -->
+    <div
+      class="w-full flex flex-column lg:flex-row justify-content-between align-items-center mt-4"
+    >
+      <PButton
+        severity="secondary"
+        @click="close"
+        class="flex w-12 mb-2 lg:mb-0 lg:mr-2 lg:w-6 justify-content-center"
+        data-cy="profile-edit-close-btn"
+        >Cancel</PButton
+      >
+
+      <PButton
+        type="submit"
+        class="flex w-12 lg:w-6 justify-content-center"
+        data-cy="profile-edit-save-btn"
+      >
+        Create
+      </PButton>
+    </div>
+  </form>
 </template>
 
 <script lang="ts">
@@ -86,7 +86,8 @@ import {
   htmlUtils,
   useDialogStore,
   useNotificationStore,
-  useFormStore
+  useFormStore,
+  AppPasswordTooltip
 } from '@mergin/lib'
 import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
@@ -94,6 +95,9 @@ import { defineComponent } from 'vue'
 import { AdminApi, CreateUserData } from '..'
 
 export default defineComponent({
+  components: {
+    AppPasswordTooltip
+  },
   data() {
     return {
       isValid: null,
@@ -163,18 +167,4 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss" scoped>
-.v-tooltip {
-  cursor: default;
-}
-</style>
-
-<style lang="scss">
-.form-tooltip {
-  opacity: 0.95 !important;
-
-  ul {
-    padding-left: 1em;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/web-app/packages/admin-lib/src/modules/admin/store.ts b/web-app/packages/admin-lib/src/modules/admin/store.ts
index d85a6873..244e5dd4 100644
--- a/web-app/packages/admin-lib/src/modules/admin/store.ts
+++ b/web-app/packages/admin-lib/src/modules/admin/store.ts
@@ -14,7 +14,7 @@ import {
 import { defineStore, getActivePinia } from 'pinia'
 import Cookies from 'universal-cookie'
 import { AdminApi } from '@/modules/admin/adminApi'
-import { UpdateUserPayload } from '@/modules/admin/types'
+import { UpdateUserPayload, UsersResponse } from '@/modules/admin/types'
 
 export interface AdminState {
   loading: boolean
@@ -22,7 +22,7 @@ export interface AdminState {
     items: UserResponse[]
     count: number
   }
-  userAdminProfile?: UserResponse
+  user?: UserResponse
   checkForUpdates?: boolean
   info_url?: string
   isServerConfigHidden: boolean
@@ -38,7 +38,7 @@ export const useAdminStore = defineStore('adminModule', {
       items: [],
       count: 0
     },
-    userAdminProfile: null,
+    user: null,
     checkForUpdates: undefined,
     info_url: undefined,
     isServerConfigHidden: false
@@ -54,12 +54,8 @@ export const useAdminStore = defineStore('adminModule', {
     setLoading(value) {
       this.loading = value
     },
-    setUsers(data) {
-      this.users.count = data.total
-      this.users.items = data.users
-    },
-    setUserAdminProfile(userAdminProfile) {
-      this.userAdminProfile = userAdminProfile
+    setUsers(data: UsersResponse) {
+      this.users = data
     },
     setCheckForUpdates(value) {
       this.checkForUpdates = value
@@ -84,14 +80,14 @@ export const useAdminStore = defineStore('adminModule', {
         this.setLoading(false)
       }
     },
-    async fetchUserProfileByName(payload) {
+    async fetchUserByName(payload) {
       const notificationStore = useNotificationStore()
 
       htmlUtils.waitCursor(true)
       try {
-        const response = await AdminApi.fetchUserProfileByName(payload.username)
-        this.setUserAdminProfile(response.data)
-      } catch(e) {
+        const response = await AdminApi.fetchUserByName(payload.username)
+        this.user = response.data
+      } catch (e) {
         await notificationStore.error({ text: 'Failed to fetch user profile' })
       } finally {
         htmlUtils.waitCursor(false)
@@ -123,11 +119,10 @@ export const useAdminStore = defineStore('adminModule', {
           payload.username,
           payload.data
         )
-        if (this.userAdminProfile?.id === response.data?.id) {
+        if (this.user?.id === response.data?.id) {
           // update stored user detail data
-          this.setUserAdminProfile(response.data)
+          this.user = response.data
         }
-        await getActivePinia().router.push({ name: 'accounts' })
       } catch (err) {
         await notificationStore.error({
           text: errorUtils.getErrorMessage(
diff --git a/web-app/packages/admin-lib/src/modules/admin/types.ts b/web-app/packages/admin-lib/src/modules/admin/types.ts
index 823af2ad..b5ab01a5 100644
--- a/web-app/packages/admin-lib/src/modules/admin/types.ts
+++ b/web-app/packages/admin-lib/src/modules/admin/types.ts
@@ -5,6 +5,7 @@
 /* eslint-disable camelcase */
 import {
   PaginatedRequestParams,
+  PaginatedResponse,
   PaginatedResponseDefaults,
   Project,
   ProjectListItem,
@@ -15,9 +16,7 @@ export interface UsersParams extends PaginatedRequestParams {
   username?: string
 }
 
-export interface UsersResponse extends PaginatedResponseDefaults {
-  users: UserResponse[]
-}
+export type UsersResponse = PaginatedResponse<UserResponse>
 
 export interface UpdateUserData {
   is_admin: boolean
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue b/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue
new file mode 100644
index 00000000..f13bc773
--- /dev/null
+++ b/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue
@@ -0,0 +1,286 @@
+<template>
+  <article>
+    <admin-layout>
+      <app-container>
+        <app-section ground>
+          <template #header>
+            <h1 class="headline-h3">Account details</h1>
+          </template>
+        </app-section>
+      </app-container>
+
+      <app-container>
+        <app-section class="p-4">
+          <div
+            class="flex flex-column align-items-center row-gap-3 text-center"
+          >
+            <PAvatar
+              v-if="user"
+              :label="$filters.getAvatar(user?.email, user?.username)"
+              shape="circle"
+              :pt="{
+                root: {
+                  class: 'text-5xl font-semibold text-color-forest',
+                  style: {
+                    width: '120px',
+                    height: '120px'
+                  }
+                }
+              }"
+            />
+            <h3 class="headline-h2" data-cy="profile-username">
+              {{ user?.username }}
+            </h3>
+            <p
+              class="m-0 paragraph-p6 overflow-wrap-anywhere"
+              data-cy="profile-email"
+            >
+              <i
+                v-if="!user?.verified_email"
+                v-tooltip.top="{
+                  value: 'Email verification status'
+                }"
+                class="ti ti-alert-circle-filled"
+                style="color: var(--grape-color)"
+              ></i>
+              {{ user?.email }}
+            </p>
+            <dl
+              class="profile-view-detail-list grid grid-nogutter paragraph-p5"
+            >
+              <div
+                class="col-6 flex flex-column align-items-start text-left flex-wrap"
+              >
+                <dt class="paragraph-p6 opacity-80 mb-2">Full name</dt>
+                <dd class="font-semibold" data-cy="profile-name">
+                  {{ profile.name || '-' }}
+                </dd>
+              </div>
+              <div class="col-6 flex flex-column align-items-end">
+                <dt class="paragraph-p6 opacity-80 mb-2">Registered</dt>
+                <dd class="font-semibold" data-cy="profile-registered">
+                  {{ $filters.date(user?.registration_date) }}
+                </dd>
+              </div>
+            </dl>
+          </div>
+        </app-section>
+      </app-container>
+      <app-container>
+        <app-section>
+          <template #title>Advanced</template>
+          <div class="flex flex-column row-gap-3 paragraph-p5 px-4 pb-4">
+            <div
+              :class="[
+                'flex flex-column align-items-start',
+                'row-gap-2',
+                'md:align-items-center md:flex-row'
+              ]"
+            >
+              <div class="flex-grow-1">
+                <p class="title-t3">Receive notifications</p>
+                <span class="paragraph-p6 opacity-80">
+                  <template v-if="profile?.receive_notifications"
+                    >User has enabled receiving notifications</template
+                  >
+                  <template v-else>User has disabled notifications.</template>
+                </span>
+              </div>
+              <div class="flex-shrink-0 paragraph-p1">
+                <i v-if="profile.receive_notifications" class="ti ti-check" />
+                <i v-else class="ti ti-x" />
+              </div>
+            </div>
+
+            <div
+              :class="[
+                'flex flex-column align-items-start',
+                'row-gap-2',
+                'md:align-items-center md:flex-row'
+              ]"
+            >
+              <div class="flex-grow-1">
+                <p class="title-t3">Access to admin panel</p>
+                <span class="paragraph-p6 opacity-80">
+                  Enabling this option will provide access to the admin panel.
+                </span>
+              </div>
+              <div
+                class="flex align-items-center flex-shrink-0"
+                data-cy="profile-notification"
+              >
+                <PInputSwitch
+                  :modelValue="user?.is_admin"
+                  @change="switchAdminAccess"
+                />
+              </div>
+            </div>
+
+            <div
+              :class="[
+                'flex flex-column align-items-start',
+                'row-gap-2',
+                'md:align-items-center md:flex-row'
+              ]"
+            >
+              <div class="flex-grow-1">
+                <p class="title-t3">Account activation</p>
+                <span class="paragraph-p6 opacity-80">
+                  <template v-if="user?.active">
+                    The user's account is currently active. Deactivation will
+                    lead to a temporary ban from Mergin Maps usage.
+                  </template>
+                  <template v-else>
+                    The user's account is currently inactive. Activating it will
+                    allow access to Mergin Maps.
+                  </template>
+                </span>
+              </div>
+              <div class="flex-shrink-0">
+                <PButton
+                  @click="changeStatusDialog"
+                  :severity="user?.active ? 'danger' : 'secondary'"
+                  :label="
+                    user?.active ? 'Deactivate account' : 'Activate account'
+                  "
+                  class="w-auto mr-1"
+                />
+              </div>
+            </div>
+            <div
+              :class="[
+                'flex flex-column align-items-start',
+                'row-gap-2',
+                'md:align-items-center md:flex-row'
+              ]"
+            >
+              <div class="flex-grow-1">
+                <p class="title-t3">Delete account</p>
+                <span class="paragraph-p6 opacity-80"
+                  >Deleting this user will remove them and all their data. This
+                  action cannot be undone.</span
+                >
+              </div>
+              <div class="flex-shrink-0">
+                <PButton
+                  @click="confirmDeleteUser"
+                  severity="danger"
+                  data-cy="profile-close-account-btn"
+                  label="Delete account"
+                />
+              </div>
+            </div>
+          </div>
+        </app-section>
+      </app-container>
+    </admin-layout>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import {
+  ConfirmDialog,
+  useDialogStore,
+  AppSection,
+  AppContainer,
+  UserResponse,
+  ConfirmDialogProps
+} from '@mergin/lib'
+
+import AdminLayout from '@/modules/admin/components/AdminLayout.vue'
+import { useAdminStore } from '@/modules/admin/store'
+
+const route = useRoute()
+const adminStore = useAdminStore()
+const dialogStore = useDialogStore()
+
+const user = computed<UserResponse>(() => adminStore.user)
+const profile = computed(() => adminStore.user?.profile || {})
+const routeUsername = computed(() => route?.params?.username)
+
+const fetchProfile = (username: string) => {
+  adminStore.user = null
+  adminStore.fetchUserByName({ username })
+}
+
+watch(
+  routeUsername,
+  (username) => {
+    if (username) {
+      fetchProfile(username as string)
+    }
+  },
+  { immediate: true }
+)
+
+const changeStatusDialog = () => {
+  const props: ConfirmDialogProps = {
+    confirmText: 'Yes',
+    text: user.value.active
+      ? 'Do you really want deactivate this account?'
+      : 'Do you really want activate this account?'
+  }
+  const dialog = { header: 'User activation' }
+  const listeners = {
+    confirm: async () => {
+      await adminStore.updateUser({
+        username: user.value.username,
+        data: {
+          active: !user.value.active,
+          is_admin: user.value.is_admin
+        }
+      })
+    }
+  }
+  dialogStore.show({
+    component: ConfirmDialog,
+    params: {
+      props,
+      listeners,
+      dialog
+    }
+  })
+}
+
+const confirmDeleteUser = () => {
+  const props: ConfirmDialogProps = {
+    text: `Are you sure you want to permanently delete this account?`,
+    description: `Deleting this user will remove them
+      and all their data. This action cannot be undone. Type in username to confirm:`,
+    hint: user.value.username,
+    confirmText: 'Delete permanently',
+    confirmField: {
+      label: 'Username',
+      expected: user.value.username
+    },
+    severity: 'danger'
+  }
+  const listeners = {
+    confirm: async () =>
+      await adminStore.deleteUser({ username: user.value.username })
+  }
+  dialogStore.show({
+    component: ConfirmDialog,
+    params: { props, listeners, dialog: { header: 'Delete user' } }
+  })
+}
+
+const switchAdminAccess = async () => {
+  await adminStore.updateUser({
+    username: user.value.username,
+    data: {
+      active: user.value.active,
+      is_admin: !user.value.is_admin
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.profile-view-detail-list {
+  max-width: 640px;
+  width: 100%;
+}
+</style>
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/AccountsView.vue b/web-app/packages/admin-lib/src/modules/admin/views/AccountsView.vue
index 644493c8..feeff69c 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/AccountsView.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/views/AccountsView.vue
@@ -1,9 +1,3 @@
-<!--
-Copyright (C) Lutra Consulting Limited
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
--->
-
 <template>
   <admin-layout>
     <app-container>
@@ -23,97 +17,83 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         </template>
       </app-section>
     </app-container>
-    <!-- <v-card color="transparent" outlined style="margin: 10px">
-      <v-card-text>
-        <v-layout row style="padding: 5px">
-          <v-btn
-            class="ma-1"
-            color="primary"
-            outlined
-            rounded
-            @click="createUserDialog"
-          >
-            <v-icon>mdi-account-plus</v-icon>
-          </v-btn>
-          <v-spacer></v-spacer>
-          <v-text-field
-            :label="$t('search')"
-            color="secondary"
-            hide-details
-            style="max-width: 250px; padding-right: 10px"
+    <app-container>
+      <app-section ground>
+        <span class="p-input-icon-left w-full">
+          <i class="ti ti-search paragraph-p3"></i>
+          <PInputText
+            placeholder="Search members"
+            data-cy="search-members-field"
             v-model="searchByName"
-            @input="resetPaging"
-          >
-            <template v-if="$vuetify.breakpoint.mdAndUp" v-slot:prepend-inner>
-              <v-icon elevation="1">mdi-magnify</v-icon>
-            </template>
-            <template v-slot:append>
-              <v-icon elevation="1" @click="resetSearch">cancel</v-icon>
-            </template>
-          </v-text-field>
-        </v-layout>
-      </v-card-text>
-    </v-card>
-    <v-data-table
-      height="70vh"
-      :headers="headers"
-      :items="users.items"
-      :loading="loading"
-      no-data-text="No users"
-      color="primary"
-      :hide-default-footer="true"
-      :options="options"
-      :server-items-length="users.count"
-      v-on:update:options="paginate"
-    >
-      <template v-slot:top="{ pagination, options, updateOptions }">
-        <v-data-footer
-          :pagination="pagination"
-          :options="options"
-          show-current-page
-          show-first-last-page
-          :items-per-page-options="[5, 10, 50]"
-          @update:options="updateOptions"
-        />
-      </template>
-      <template v-slot:item.username="{ item }">
-        <span>
-          <router-link
-            :to="{ name: 'profile', params: { username: item.username } }"
-          >
-            {{ item.username }}
-          </router-link>
-        </span>
-      </template>
-      <template v-slot:item.received="{ item }">
-        <span>
-          <v-tooltip bottom>
-            <template v-slot:activator="{ on }">
-              <span v-on="on">{{ item.received | timediff }}</span>
-            </template>
-            <span>{{ item.received | datetime }}</span>
-          </v-tooltip>
-        </span>
-      </template>
-      <template v-slot:item.msg="{ item }">
-        <span>
-          <v-tooltip bottom>
-            <template v-slot:activator="{ on }">
-              <span v-on="on">{{ item.msg.substring(0, 9) }}</span>
-            </template>
-            <span>{{ item.msg }}</span>
-          </v-tooltip>
-        </span>
-      </template>
-      <template v-slot:item.active="{ item }">
-        <span>
-          <span style="display: inline-block; width: 120px">
-            <v-icon v-if="item.active" color="green">check</v-icon>
-            <v-icon v-else color="red">clear</v-icon>
-          </span>
+            class="w-full"
+            @input="onSearch"
+          />
         </span>
-      </template>
-    </v-data-table> -->
+      </app-section>
+    </app-container>
+    <app-container>
+      <app-section>
+        <PDataTable
+          :value="users.items"
+          :lazy="true"
+          :paginator="true"
+          :rows="options.itemsPerPage"
+          :rowsPerPageOptions="options.perPageOptions"
+          :totalRecords="users.count"
+          :loading="loading"
+          :first="(options.page - 1) * options.itemsPerPage"
+          :sort-field="options.sortBy[0]"
+          :sort-order="options.sortDesc[0] ? -1 : 1"
+          removableSort
+          reorderable-columns
+          @page="onPage"
+          @row-click="rowClick"
+          @sort="onSort"
+          data-cy="accounts-table"
+        >
+          <template v-for="header in headers" :key="header.field">
+            <PColumn
+              v-if="header.field === 'username'"
+              :field="header.field"
+              :header="header.header"
+              :sortable="header.sortable"
+            >
+              <template #body="slotProps">
+                <router-link
+                  class="title-t4"
+                  :to="{
+                    name: 'account',
+                    params: { username: slotProps.data.username }
+                  }"
+                >
+                  {{ slotProps.data.username }}
+                </router-link>
+              </template>
+            </PColumn>
+            <PColumn
+              v-else-if="header.field === 'active'"
+              :header="header.header"
+              :field="header.field"
+            >
+              <template #body="slotProps">
+                <i v-if="slotProps.data.active" class="ti ti-check" />
+                <i v-else class="ti ti-x" />
+              </template>
+            </PColumn>
+            <PColumn
+              v-else
+              :field="header.field"
+              :header="header.header"
+              :sortable="header.sortable"
+            ></PColumn>
+          </template>
+          <template #paginatorstart>
+            <PButton icon="ti ti-refresh" plain text rounded @click="refresh" />
+          </template>
+          <template #paginatorend />
+        </PDataTable>
+      </app-section>
+    </app-container>
   </admin-layout>
 </template>
 
@@ -121,11 +101,17 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 import {
   PaginatedUsersParams,
   useDialogStore,
+  AppSection,
   AppContainer,
-  AppSection
+  TableDataHeader
 } from '@mergin/lib'
 import debounce from 'lodash/debounce'
 import { mapActions, mapState } from 'pinia'
+import {
+  DataTablePageEvent,
+  DataTableRowClickEvent,
+  DataTableSortEvent
+} from 'primevue/datatable'
 import { defineComponent } from 'vue'
 
 import AdminLayout from '@/modules/admin/components/AdminLayout.vue'
@@ -144,20 +130,17 @@ export default defineComponent({
       options: {
         sortBy: ['username'],
         sortDesc: [false],
-        itemsPerPage: 10,
-        page: 1
+        itemsPerPage: 20,
+        page: 1,
+        perPageOptions: [20, 50, 100]
       },
+      searchByName: '',
       headers: [
-        { text: 'Name', value: 'username', filterable: true, sortable: true },
-        {
-          text: 'Active',
-          value: 'active',
-          filterable: false,
-          sortable: false,
-          width: 15
-        }
-      ],
-      searchByName: ''
+        { field: 'username', header: 'Name', sortable: true },
+        { field: 'email', header: 'Email', sortable: true },
+        { field: 'profile.name', header: 'Username' },
+        { field: 'active', header: 'Active' }
+      ] as TableDataHeader[]
     }
   },
   computed: {
@@ -165,41 +148,66 @@ export default defineComponent({
   },
   created() {
     this.resetPaging = debounce(this.resetPaging, 1000)
+    this.fetchUsers({ params: this.getParams() })
   },
   methods: {
     ...mapActions(useAdminStore, ['fetchUsers']),
     ...mapActions(useDialogStore, ['show']),
 
-    async resetPaging() {
+    onSearch() {
       this.options.page = 1
-      await this.paginate(this.options)
+      this.fetchUsers({ params: this.getParams() })
     },
 
-    async resetSearch() {
-      this.searchByName = ''
-      await this.resetPaging()
+    async resetPaging() {
+      this.options.page = 1
     },
 
-    async paginate(options) {
-      this.options = options
+    getParams(): PaginatedUsersParams {
       const params = {
-        page: options.page,
-        per_page: options.itemsPerPage
+        page: this.options.page,
+        per_page: this.options.itemsPerPage
       } as PaginatedUsersParams
-      if (options.sortBy[0]) {
-        params.descending = options.sortDesc[0]
-        params.order_by = options.sortBy[0]
+      if (this.options.sortBy[0]) {
+        params.descending = this.options.sortDesc[0]
+        params.order_by = this.options.sortBy[0]
       }
       if (this.searchByName) {
         params.like = this.searchByName.trim()
       }
-      await this.fetchUsers({ params })
+      return params
+    },
+
+    refresh() {
+      this.fetchUsers({ params: this.getParams() })
+    },
+
+    onPage(event: DataTablePageEvent) {
+      this.options.page = event.page + 1
+      this.options.itemsPerPage = event.rows
+      this.fetchUsers({ params: this.getParams() })
+    },
+
+    onSort(event: DataTableSortEvent) {
+      this.options.sortBy[0] = event.sortField?.toString()
+      this.options.sortDesc[0] = event.sortOrder < 1
+      this.fetchUsers({ params: this.getParams() })
+    },
+
+    rowClick(event: DataTableRowClickEvent) {
+      this.$router.push({
+        name: 'account',
+        params: { username: event.data.username }
+      })
     },
 
     createUserDialog() {
-      const dialog = { maxWidth: 500, persistent: true }
+      const dialog = { maxWidth: 500, header: 'Create user' }
       const listeners = {
-        success: async () => this.resetPaging()
+        success: () => {
+          this.resetPaging()
+          this.fetchUsers({ params: this.getParams() })
+        }
       }
       this.show({
         component: CreateUserForm,
@@ -212,10 +220,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style scoped>
-.theme--light.v-data-table,
-.theme--light.v-data-table .v-data-footer {
-  border: none;
-}
-</style>
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/ProfileView.vue b/web-app/packages/admin-lib/src/modules/admin/views/ProfileView.vue
deleted file mode 100644
index ba34a195..00000000
--- a/web-app/packages/admin-lib/src/modules/admin/views/ProfileView.vue
+++ /dev/null
@@ -1,290 +0,0 @@
-<!--
-Copyright (C) Lutra Consulting Limited
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
--->
-
-<template>
-  <admin-layout>
-    <v-layout class="column main-content fill-height">
-      <v-container>
-        <v-row>
-          <v-col cols="12" class="pa-0">
-            <v-card flat>
-              <v-card-text>
-                <div class="profile">
-                  <h1 class="primary--text">Profile</h1>
-                  <br />
-                  <v-divider />
-                  <v-layout>
-                    <!-- Render profile -->
-                    <div class="section">
-                      <ul v-if="profile">
-                        <li>
-                          <b> Username: </b>{{ userAdminProfile.username }}
-                        </li>
-                        <li><b> Name: </b>{{ profile.first_name }}</li>
-                        <li><b> Last name: </b>{{ profile.last_name }}</li>
-                        <li>
-                          <b> Account active: </b>
-                          <v-icon v-if="userAdminProfile.active" color="green"
-                            >check
-                          </v-icon>
-                          <v-icon v-else color="red">clear</v-icon>
-                        </li>
-                        <li>
-                          <b> Email: </b>{{ userAdminProfile.email }}
-                          <v-tooltip top>
-                            <template v-slot:activator="{ on }">
-                              <span v-on="on">
-                                <v-icon
-                                  v-if="userAdminProfile.verified_email"
-                                  color="green"
-                                  >check</v-icon
-                                >
-                                <v-icon v-else color="red">clear</v-icon>
-                              </span>
-                            </template>
-                            <span>Email verification status</span>
-                          </v-tooltip>
-                        </li>
-                        <li>
-                          <b> Receive notifications: </b>
-                          <v-icon
-                            v-if="profile.receive_notifications"
-                            color="green"
-                            >check
-                          </v-icon>
-                          <v-icon v-else color="red">clear</v-icon>
-                        </li>
-                        <li>
-                          <b> Registered: </b
-                          >{{ profile.registration_date | date }}
-                        </li>
-                        <li v-if="userAdminProfile.scheduled_removal">
-                          <b> Scheduled removal: </b
-                          >{{ userAdminProfile.scheduled_removal | date }}
-                        </li>
-                      </ul>
-                    </div>
-                    <v-spacer />
-                    <!-- actions -->
-                    <div v-if="profile">
-                      <div>
-                        <v-tooltip top>
-                          <template v-slot:activator="{ on }">
-                            <span v-on="on">
-                              <v-btn
-                                @click="changeStatusDialog"
-                                class="primary--text"
-                              >
-                                <template v-if="userAdminProfile.active">
-                                  <v-icon small class="mr-2">block</v-icon>
-                                  deactivate account
-                                </template>
-                                <template v-else>
-                                  <v-icon small class="mr-2">check</v-icon>
-                                  activate account
-                                </template>
-                              </v-btn>
-                            </span>
-                          </template>
-                          <span v-if="userAdminProfile.active"
-                            >Deactivate account</span
-                          >
-                          <span v-else>Activate account</span>
-                        </v-tooltip>
-                      </div>
-                      <div>
-                        <v-tooltip top>
-                          <template v-slot:activator="{ on }">
-                            <span v-on="on">
-                              <v-btn
-                                @click="confirmDeleteUser"
-                                class="white--text"
-                                depressed
-                                color="red"
-                              >
-                                <v-icon small class="mr-2"
-                                  >delete_forever</v-icon
-                                >
-                                Delete account
-                              </v-btn>
-                            </span>
-                          </template>
-                          <span
-                            >Deleting this user will permanently remove them and
-                            all their data. This action cannot be undone.</span
-                          >
-                        </v-tooltip>
-                      </div>
-                    </div>
-                  </v-layout>
-                </div>
-              </v-card-text>
-            </v-card>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-layout>
-  </admin-layout>
-</template>
-
-<script lang="ts">
-import { ConfirmDialog, useDialogStore } from '@mergin/lib'
-import { mapActions, mapState } from 'pinia'
-import { defineComponent } from 'vue'
-
-import AdminLayout from '@/modules/admin/components/AdminLayout.vue'
-import { useAdminStore } from '@/modules/admin/store'
-
-export default defineComponent({
-  name: 'ProfileView',
-  components: { AdminLayout },
-  props: {
-    username: String
-  },
-  data() {
-    return {
-      dialog: false
-    }
-  },
-  mounted() {
-    this.setUserAdminProfile(null)
-
-    this.fetchUserProfileByName({
-      username: this.username
-    })
-  },
-  watch: {
-    username: {
-      handler(username) {
-        this.setUserAdminProfile(null)
-
-        this.fetchUserProfileByName({
-          username
-        })
-      }
-    }
-  },
-  computed: {
-    ...mapState(useAdminStore, ['userAdminProfile']),
-    usage() {
-      return this.profile.disk_usage / this.profile.storage
-    },
-    profile() {
-      if (this.userAdminProfile == null) {
-        return null
-      } else {
-        return this.userAdminProfile.profile
-      }
-    }
-  },
-  methods: {
-    ...mapActions(useAdminStore, [
-      'deleteUser',
-      'updateUser',
-      'setUserAdminProfile',
-      'fetchUserProfileByName'
-    ]),
-    ...mapActions(useDialogStore, ['show']),
-
-    changeStatusDialog() {
-      const props = {
-        text: this.userAdminProfile.active
-          ? 'Do you really want deactivate this account?'
-          : 'Do you really want activate this account?'
-      }
-      const dialog = { maxWidth: 500, persistent: true }
-      const listeners = {
-        confirm: async () => {
-          await this.updateUser({
-            username: this.userAdminProfile.username,
-            data: {
-              active: !this.userAdminProfile.active
-            }
-          })
-        }
-      }
-      this.show({
-        component: ConfirmDialog,
-        params: {
-          props,
-          listeners,
-          dialog
-        }
-      })
-    },
-    confirmDeleteUser() {
-      const props = {
-        text: `<b>Are you sure you want to permanently delete this account?</b> Deleting this user will remove them
-          and all their data. This action cannot be
-          undone. <br>  <br> Type in username (${this.userAdminProfile.username}) to confirm:`,
-        confirmText: 'Delete permanently',
-        confirmField: {
-          label: 'Username',
-          expected: this.userAdminProfile.username
-        }
-      }
-      const listeners = {
-        confirm: async () =>
-          await this.deleteUser({ username: this.userAdminProfile.username })
-      }
-      this.show({
-        component: ConfirmDialog,
-        params: { props, listeners, dialog: { maxWidth: 500 } }
-      })
-    }
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-.main-content {
-  overflow: auto;
-}
-
-.profile {
-  margin-bottom: 20px;
-
-  h2 {
-    color: #2d4470;
-    margin-bottom: 10px;
-  }
-
-  button {
-    padding-left: 10px;
-    height: 35px;
-    padding-right: 10px;
-    width: 100%;
-  }
-
-  .align-center {
-    padding-top: 10px;
-    padding-bottom: 10px;
-    align-items: flex-start;
-    padding-right: 10px;
-  }
-
-  .section {
-    margin-right: 10px;
-
-    ul {
-      padding-left: 0;
-    }
-
-    li {
-      list-style: none;
-
-      b {
-        width: 150px;
-        display: inline-block;
-      }
-    }
-
-    .v-icon {
-      font-size: 18px;
-    }
-  }
-}
-</style>
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/index.ts b/web-app/packages/admin-lib/src/modules/admin/views/index.ts
index 47a6fcd0..6d414de0 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/index.ts
+++ b/web-app/packages/admin-lib/src/modules/admin/views/index.ts
@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
-export { default as AccountView } from './AccountsView.vue'
-export { default as ProfileView } from './ProfileView.vue'
+export { default as AccountsView } from './AccountsView.vue'
+export { default as AccountDetailView } from './AccountDetailView.vue'
 export { default as SettingsView } from './SettingsView.vue'
 export { default as SettingsViewTemplate } from './SettingsViewTemplate.vue'
diff --git a/web-app/packages/admin-lib/src/shims-pinia.d.ts b/web-app/packages/admin-lib/src/shims-pinia.d.ts
new file mode 100644
index 00000000..4a4f5ef4
--- /dev/null
+++ b/web-app/packages/admin-lib/src/shims-pinia.d.ts
@@ -0,0 +1,7 @@
+import { Router } from 'vue-router'
+
+declare module 'pinia' {
+  export interface Pinia {
+    router: Router
+  }
+}
diff --git a/web-app/packages/admin-lib/src/shims-tsx.d.ts b/web-app/packages/admin-lib/src/shims-tsx.d.ts
deleted file mode 100644
index e73203a2..00000000
--- a/web-app/packages/admin-lib/src/shims-tsx.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright (C) Lutra Consulting Limited
-//
-// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
-
-import Vue, { VNode } from 'vue'
-
-declare global {
-  namespace JSX {
-    interface Element extends VNode {}
-    interface ElementClass extends Vue {}
-    interface IntrinsicElements {
-      [elem: string]: any
-    }
-  }
-}
diff --git a/web-app/packages/admin-lib/src/shims-vue.d.ts b/web-app/packages/admin-lib/src/shims-vue.d.ts
index 42ada501..0e8a3633 100644
--- a/web-app/packages/admin-lib/src/shims-vue.d.ts
+++ b/web-app/packages/admin-lib/src/shims-vue.d.ts
@@ -2,15 +2,20 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
-import Router from 'vue-router'
+import { MerginComponentUuid } from './modules/form/types'
+
+import { ComponentCustomPropertyFilters } from '@/common'
 
 declare module '*.vue' {
-  import Vue from 'vue'
+  import * as Vue from 'vue'
   export default Vue
 }
 
-declare module 'pinia' {
-  export interface Pinia {
-    router: Router
+// It seems that IntelliJ IDEs are using the @vue/runtime-core module for type checking in .vue <template> tags, instead of the augmented vue module.
+// See: https://youtrack.jetbrains.com/issue/WEB-59818/Vue-custom-global-properties-added-by-augmenting-vue-are-not-resolved
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $filters: ComponentCustomPropertyFilters
+    merginComponentUuid: MerginComponentUuid
   }
 }
diff --git a/web-app/packages/admin-lib/vite.config.ts b/web-app/packages/admin-lib/vite.config.ts
index 0bdf7819..ae43ac7e 100644
--- a/web-app/packages/admin-lib/vite.config.ts
+++ b/web-app/packages/admin-lib/vite.config.ts
@@ -52,6 +52,7 @@ export default defineConfig(({ mode }) => ({
       external: [
         'vue',
         'pinia',
+        'vue-router',
         ...Object.keys(packageJson.dependencies),
         '@mergin/lib'
       ],
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
index b8079112..fe13acfc 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
@@ -11,12 +11,14 @@ h6 {
   margin: 0;
   overflow-wrap: break-word;
   min-width: 0;
+  text-wrap: balance;
 }
-body, p {
+body, p, dd {
   margin: 0
 }
-p, span, dl {
+p, span, dl, li {
   overflow-wrap: break-word;
+  text-wrap: pretty;
 }
 a {
   text-decoration: inherit;
@@ -27,6 +29,11 @@ input, textarea {
   min-width: 0;
 }
 
+label {
+  font-size: 0.75rem !important;
+  line-height: 2;
+}
+
 /** Primevue overrides */
 
 // Customization of infinite border of tabs using classes instead pt because, we want to have access to variables
diff --git a/web-app/packages/lib/src/common/components/AppPasswordTooltip.vue b/web-app/packages/lib/src/common/components/AppPasswordTooltip.vue
index 6d33d2e0..eac0d184 100644
--- a/web-app/packages/lib/src/common/components/AppPasswordTooltip.vue
+++ b/web-app/packages/lib/src/common/components/AppPasswordTooltip.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <label class="flex align-items-center paragraph-p6" :for="'for'"
+  <label class="flex align-items-center" :for="'for'"
     ><slot name="label"></slot>&nbsp;
     <i
       class="ti ti-info-circle-filled cursor-pointer text-color-medium-green hover:text-color paragraph-p4"
diff --git a/web-app/packages/lib/src/common/components/types.ts b/web-app/packages/lib/src/common/components/types.ts
index 4908f619..e8556642 100644
--- a/web-app/packages/lib/src/common/components/types.ts
+++ b/web-app/packages/lib/src/common/components/types.ts
@@ -8,3 +8,10 @@ export interface DropdownOption<T = string> {
   description?: string
   disabled?: boolean
 }
+
+export interface TableDataHeader {
+  header: string
+  field: string
+  sortable?: boolean
+  width?: number
+}
diff --git a/web-app/packages/lib/src/mm-theme.ts b/web-app/packages/lib/src/mm-theme.ts
index 3e219106..6e49bc9f 100644
--- a/web-app/packages/lib/src/mm-theme.ts
+++ b/web-app/packages/lib/src/mm-theme.ts
@@ -1,5 +1,7 @@
 import { AutoCompletePassThroughOptions } from 'primevue/autocomplete'
 import { ButtonPassThroughOptions } from 'primevue/button'
+import { ColumnPassThroughOptions } from 'primevue/column'
+import { DataTablePassThroughOptions } from 'primevue/datatable'
 import { DataViewPassThroughOptions } from 'primevue/dataview'
 import { DialogPassThroughOptions } from 'primevue/dialog'
 import { InlineMessagePassThroughOptions } from 'primevue/inlinemessage'
@@ -139,7 +141,29 @@ export default usePassThrough(
     tag: {
       root: 'title-t5',
       value: 'title-t5'
-    } as TagPassThroughOptions
+    } as TagPassThroughOptions,
+    column: {
+      bodyCell: {
+        class: 'pl-4 py-2'
+      },
+      headerCell: {
+        class: 'pl-4 py-1',
+        style: {
+          backgroundColor: '#F8F9FA'
+        }
+      },
+      headerTitle: {
+        class: 'paragraph-p6'
+      }
+    } as ColumnPassThroughOptions,
+    dataTable: {
+      loadingOverlay: {
+        class: 'bg-primary-reverse opacity-50'
+      },
+      bodyRow: {
+        class: 'paragraph-p6 hover:bg-gray-50 cursor-pointer'
+      }
+    } as DataTablePassThroughOptions
   },
   {}
 )
diff --git a/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue b/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
index bb0f2d6e..eab4fc5e 100644
--- a/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
+++ b/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
@@ -29,30 +29,30 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         <dl class="grid grid-nogutter row-gap-4">
           <div class="col-12">
             <dt class="paragraph-p6 opacity-80 mb-2">File</dt>
-            <dl class="font-semibold">
+            <dd class="font-semibold">
               <h3 class="headline-h3 mt-0">
                 <FileIcon :file="{ ...file, name: fileName }" />{{ fileName }}
               </h3>
-            </dl>
+            </dd>
           </div>
           <PDivider class="m-0" />
           <div class="col-6">
             <dt class="paragraph-p6 opacity-80 mb-2">Modified</dt>
-            <dl class="font-semibold paragraph-p5">
+            <dd class="font-semibold paragraph-p5">
               <span v-tooltip="$filters.datetime(file.mtime)">{{
                 $filters.timediff(file.mtime)
               }}</span>
-            </dl>
+            </dd>
           </div>
           <div class="col-6 flex flex-column align-items-end">
             <dt class="paragraph-p6 opacity-80 mb-2">Size</dt>
-            <dl class="font-semibold paragraph-p5">
+            <dd class="font-semibold paragraph-p5">
               {{ $filters.filesize(file.size) }}
               <span v-if="state === 'updated'"
                 >(new:
                 {{ $filters.filesize(upload.files[file.path].size) }})</span
               >
-            </dl>
+            </dd>
           </div>
         </dl>
 
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectShareDialog.vue b/web-app/packages/lib/src/modules/project/components/ProjectShareDialog.vue
index c2ac2eb1..4912777c 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectShareDialog.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectShareDialog.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     @submit="share"
   >
     <template #accountsInput
-      ><label class="paragraph-p6" for="accounts">Share with</label
+      ><label for="accounts">Share with</label
       ><PAutoComplete
         @complete="search"
         v-model="data.selectedUsers"
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectShareDialogTemplate.vue b/web-app/packages/lib/src/modules/project/components/ProjectShareDialogTemplate.vue
index 25117790..c25bc181 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectShareDialogTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectShareDialogTemplate.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       </div>
 
       <div class="flex flex-column p-input-filled">
-        <label class="paragraph-p6">Project permission</label>
+        <label>Project permission</label>
         <app-dropdown :options="permissions" v-model="permission" />
       </div>
     </div>
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue b/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue
index 1fffa5ba..3df6c56c 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue
@@ -20,14 +20,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       data-cy="project-table"
       @row-click="rowClick"
       @page="onPage"
-      :pt="{
-        loadingOverlay: {
-          class: 'bg-primary-reverse opacity-50'
-        },
-        bodyRow: {
-          class: 'paragraph-p6 hover:bg-gray-50 cursor-pointer'
-        }
-      }"
     >
       <template v-for="col in columns" :key="col.field">
         <PColumn
@@ -36,7 +28,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           :header="col.header"
           style="width: 40%"
           class="pl-4"
-          :pt="ptColumn"
         >
           <template #body="slotProps">
             <p class="title-t4">
@@ -92,7 +83,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           v-else-if="col.field === 'version'"
           :field="col.field"
           :header="col.header"
-          :pt="ptColumn"
         >
           <template #body="slotProps"
             ><span class="opacity-80" data-cy="project-form-history">{{
@@ -104,7 +94,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           v-else-if="col.field === 'meta.size'"
           :field="col.field"
           :header="col.header"
-          :pt="ptColumn"
         >
           <template #body="slotProps"
             ><span class="opacity-80" data-cy="project-form-project-size">{{
@@ -117,7 +106,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           :field="col.field"
           :header="col.header"
           style="width: 15%"
-          :pt="ptColumn"
         >
           <template #body="slotProps"
             ><span class="opacity-80" data-cy="project-form-project-size">{{
@@ -126,12 +114,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           ></PColumn
         >
 
-        <PColumn
-          v-else
-          :field="col.field"
-          :header="col.header"
-          :pt="ptColumn"
-        ></PColumn>
+        <PColumn v-else :field="col.field" :header="col.header"></PColumn>
       </template>
     </PDataTable>
     <!-- Empty state -->
@@ -147,8 +130,8 @@ import { defineComponent, PropType } from 'vue'
 
 import { useProjectStore } from '../store'
 
-import { PaginatedGridOptions } from '@/common'
-import { ProjectListItem, TableDataHeader } from '@/modules/project/types'
+import { PaginatedGridOptions, TableDataHeader } from '@/common'
+import { ProjectListItem } from '@/modules/project/types'
 
 export default defineComponent({
   name: 'projects-table',
@@ -183,33 +166,15 @@ export default defineComponent({
   computed: {
     ...mapState(useProjectStore, ['projectsSearch', 'projectsSorting']),
     columns(): TableDataHeader[] {
-      let columns = []
-      columns = columns.concat(
+      return [
         { header: 'Project name', field: 'name' },
         { header: 'Versions', field: 'version' },
-        { header: 'Size', field: 'meta.size' },
+        { header: 'Size', field: 'meta.size' }
         // {
         //   header: 'Collaborators',
         //   field: 'access.readers'
         // }
-      )
-      return columns
-    },
-    ptColumn() {
-      return {
-        bodyCell: {
-          class: 'pl-4 py-2'
-        },
-        headerCell: {
-          class: 'pl-4 py-1',
-          style: {
-            backgroundColor: '#F8F9FA'
-          }
-        },
-        headerTitle: {
-          class: 'paragraph-p6'
-        }
-      }
+      ]
     }
   },
   watch: {
diff --git a/web-app/packages/lib/src/modules/project/components/VersionDetailSidebar.vue b/web-app/packages/lib/src/modules/project/components/VersionDetailSidebar.vue
index 6b9d781c..f3a20f2b 100644
--- a/web-app/packages/lib/src/modules/project/components/VersionDetailSidebar.vue
+++ b/web-app/packages/lib/src/modules/project/components/VersionDetailSidebar.vue
@@ -23,36 +23,36 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       <dl class="grid grid-nogutter row-gap-4">
         <div class="col-12">
           <dt class="paragraph-p6 opacity-80 mb-2">Version</dt>
-          <dl>
+          <dd>
             <h3 class="headline-h3 mt-0">
               {{ version.name }}
             </h3>
-          </dl>
+          </dd>
         </div>
         <PDivider class="m-0" />
         <div class="col-6">
           <dt class="paragraph-p6 opacity-80 mb-2">Author</dt>
-          <dl class="font-semibold paragraph-p5">
+          <dd class="font-semibold paragraph-p5">
             {{ version.author }}
-          </dl>
+          </dd>
         </div>
         <div class="col-6 flex flex-column align-items-end">
           <dt class="paragraph-p6 opacity-80 mb-2">Project size</dt>
-          <dl class="font-semibold paragraph-p5">
+          <dd class="font-semibold paragraph-p5">
             {{ $filters.filesize(version.project_size) }}
-          </dl>
+          </dd>
         </div>
         <div class="col-12">
           <dt class="paragraph-p6 opacity-80 mb-2">Created</dt>
-          <dl class="font-semibold paragraph-p5">
+          <dd class="font-semibold paragraph-p5">
             {{ $filters.datetime(version.created) }}
-          </dl>
+          </dd>
         </div>
         <div class="col-12">
           <dt class="paragraph-p6 opacity-80 mb-2">User agent</dt>
-          <dl class="font-semibold paragraph-p5">
+          <dd class="font-semibold paragraph-p5">
             {{ version.user_agent }}
-          </dl>
+          </dd>
         </div>
       </dl>
       <PAccordion
diff --git a/web-app/packages/lib/src/modules/project/types.ts b/web-app/packages/lib/src/modules/project/types.ts
index 3cec0d77..8260991f 100644
--- a/web-app/packages/lib/src/modules/project/types.ts
+++ b/web-app/packages/lib/src/modules/project/types.ts
@@ -312,13 +312,6 @@ export interface ProjectVersionsTableItem extends ProjectVersionListItem {
   disabled: boolean
 }
 
-export interface TableDataHeader {
-  header: string
-  field: string
-  sortable?: boolean
-  width?: number
-}
-
 export interface DeleteProjectPayload {
   projectId: string
 }
diff --git a/web-app/packages/lib/src/modules/user/components/ChangePasswordForm.vue b/web-app/packages/lib/src/modules/user/components/ChangePasswordForm.vue
index 6cce0b9e..9f88245f 100644
--- a/web-app/packages/lib/src/modules/user/components/ChangePasswordForm.vue
+++ b/web-app/packages/lib/src/modules/user/components/ChangePasswordForm.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <template>
   <div class="flex flex-column pb-4">
     <span class="p-input-filled">
-      <label class="paragraph-p6" for="oldPassowrd">Old password</label>
+      <label for="oldPassowrd">Old password</label>
       <PPassword
         id="oldPassowrd"
         v-model="oldPassword"
diff --git a/web-app/packages/lib/src/modules/user/components/EditProfileForm.vue b/web-app/packages/lib/src/modules/user/components/EditProfileForm.vue
index 713121fa..30c04b0c 100644
--- a/web-app/packages/lib/src/modules/user/components/EditProfileForm.vue
+++ b/web-app/packages/lib/src/modules/user/components/EditProfileForm.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <template>
   <form @submit.prevent="submit" class="flex flex-column pb-4">
     <span class="p-input-filled">
-      <label class="paragraph-p6" for="first-name">First name</label>
+      <label for="first-name">First name</label>
       <PInputText
         id="first-name"
         v-model="editedProfile.first_name"
@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     </span>
 
     <span class="p-input-filled">
-      <label class="paragraph-p6" for="last-name">Last name</label>
+      <label for="last-name">Last name</label>
       <PInputText
         id="last-name"
         v-model="editedProfile.last_name"
@@ -39,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     </span>
 
     <span class="p-input-filled">
-      <label class="paragraph-p6" for="email">Email</label>
+      <label for="email">Email</label>
       <PInputText
         id="email"
         v-model="editedProfile.email"
diff --git a/web-app/packages/lib/src/modules/user/types.ts b/web-app/packages/lib/src/modules/user/types.ts
index 6e0652f5..2305c053 100644
--- a/web-app/packages/lib/src/modules/user/types.ts
+++ b/web-app/packages/lib/src/modules/user/types.ts
@@ -44,6 +44,8 @@ export interface UserResponse {
   profile: UserProfileResponse
   username: string
   verified_email: boolean
+  scheduled_removal?: null | string
+  registration_date: string
 }
 
 export interface UserWorkspace {
diff --git a/web-app/packages/lib/src/modules/user/views/ChangePasswordView.vue b/web-app/packages/lib/src/modules/user/views/ChangePasswordView.vue
index 1a7e5a50..59e55f56 100644
--- a/web-app/packages/lib/src/modules/user/views/ChangePasswordView.vue
+++ b/web-app/packages/lib/src/modules/user/views/ChangePasswordView.vue
@@ -26,11 +26,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           :feedback="false"
           aria-describedby="password-error"
           placeholder="Please enter your password"
-          :pt="{
-            input: {
-              root: { class: 'w-full border-round-xl' }
-            }
-          }"
         />
         <span class="p-error paragraph-p6" id="password-error">{{
           errors.password?.[0] || '&nbsp;'
@@ -51,11 +46,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           toggleMask
           :feedback="false"
           placeholder="Please enter your new password"
-          :pt="{
-            input: {
-              root: { class: 'w-full border-round-xl' }
-            }
-          }"
         />
 
         <span class="p-error paragraph-p6" id="confirm-password-error">{{
diff --git a/web-app/packages/lib/src/modules/user/views/LoginViewTemplate.vue b/web-app/packages/lib/src/modules/user/views/LoginViewTemplate.vue
index b069f095..6d8c61ae 100644
--- a/web-app/packages/lib/src/modules/user/views/LoginViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/user/views/LoginViewTemplate.vue
@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       class="flex flex-column"
     >
       <div>
-        <label class="paragraph-p6" for="login">Email</label>
+        <label for="login">Email</label>
         <PInputText
           placeholder="Type your email"
           name="email"
@@ -53,7 +53,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     </form>
     <form v-else @submit.prevent="loginUser" class="flex flex-column">
       <div>
-        <label class="paragraph-p6" for="login">Username or email</label>
+        <label for="login">Username or email</label>
         <PInputText
           id="login"
           name="login"
@@ -71,7 +71,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       </div>
 
       <div>
-        <label class="paragraph-p6" for="password">Password</label>
+        <label for="password">Password</label>
         <PPassword
           id="password"
           name="password"
diff --git a/web-app/packages/lib/src/modules/user/views/ProfileViewTemplate.vue b/web-app/packages/lib/src/modules/user/views/ProfileViewTemplate.vue
index 057346c8..c4092454 100644
--- a/web-app/packages/lib/src/modules/user/views/ProfileViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/user/views/ProfileViewTemplate.vue
@@ -91,15 +91,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               class="col-6 flex flex-column align-items-start text-left flex-wrap"
             >
               <dt class="paragraph-p6 opacity-80 mb-2">Full name</dt>
-              <dl class="font-semibold" data-cy="profile-name">
+              <dd class="font-semibold" data-cy="profile-name">
                 {{ loggedUser?.name || '-' }}
-              </dl>
+              </dd>
             </div>
             <div class="col-6 flex flex-column align-items-end">
               <dt class="paragraph-p6 opacity-80 mb-2">Registered</dt>
-              <dl class="font-semibold" data-cy="profile-registered">
+              <dd class="font-semibold" data-cy="profile-registered">
                 {{ $filters.date(loggedUser?.registration_date) }}
-              </dl>
+              </dd>
             </div>
           </dl>
         </div>

From 63e954862b524b52ee8abbd824ae8cbb3d15645d Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Fri, 13 Sep 2024 21:54:54 +0200
Subject: [PATCH 3/5] Fix lint

---
 .../src/modules/project/views/FileVersionDetailView.vue    | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/web-app/packages/lib/src/modules/project/views/FileVersionDetailView.vue b/web-app/packages/lib/src/modules/project/views/FileVersionDetailView.vue
index 584e81de..7365e14a 100644
--- a/web-app/packages/lib/src/modules/project/views/FileVersionDetailView.vue
+++ b/web-app/packages/lib/src/modules/project/views/FileVersionDetailView.vue
@@ -97,7 +97,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 </template>
 
 <script lang="ts">
-import { AxiosResponse } from 'axios'
 import groupBy from 'lodash/groupBy'
 import isArray from 'lodash/isArray'
 import { mapActions, mapState } from 'pinia'
@@ -106,11 +105,7 @@ import { defineComponent } from 'vue'
 import AppCircle from '@/common/components/AppCircle.vue'
 import AppContainer from '@/common/components/AppContainer.vue'
 import AppSection from '@/common/components/AppSection.vue'
-import {
-  ProjectVersionFileChange,
-  useNotificationStore,
-  useProjectStore
-} from '@/modules'
+import { useNotificationStore, useProjectStore } from '@/modules'
 import { useInstanceStore } from '@/modules/instance/store'
 
 interface ColumnItem {

From a9e547b5a0fb99b052ee9d69e41f88369124c2b9 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Tue, 17 Sep 2024 16:20:43 +0200
Subject: [PATCH 4/5] Fix tests for unify tests

---
 server/mergin/tests/test_auth.py | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/server/mergin/tests/test_auth.py b/server/mergin/tests/test_auth.py
index c4a12103..17314d56 100644
--- a/server/mergin/tests/test_auth.py
+++ b/server/mergin/tests/test_auth.py
@@ -695,26 +695,26 @@ def test_paginate_users(client):
     # get 5 users (default + 5 new added - 1 deleted & inactive)
     resp = client.get(url)
     list_of_usernames = [user["username"] for user in resp.json["users"]]
-    assert resp.json["total"] == 5
-    assert resp.json["users"][0]["username"] == "mergin"
+    assert resp.json["count"] == 5
+    assert resp.json["items"][0]["username"] == "mergin"
     assert user_inactive.username in list_of_usernames
     assert deleted_active.username in list_of_usernames
     assert deleted_inactive.username not in list_of_usernames
     # order by username
     resp = client.get(url + "&order_by=username")
-    assert resp.json["total"] == 5
-    assert resp.json["users"][0]["username"] == "alice"
+    assert resp.json["count"] == 5
+    assert resp.json["items"][0]["username"] == "alice"
     # exact match with username
     resp = client.get(url + "&like=bob")
-    assert resp.json["total"] == 1
-    assert resp.json["users"][0]["username"] == "bob"
+    assert resp.json["count"] == 1
+    assert resp.json["items"][0]["username"] == "bob"
     # ilike search with email
     resp = client.get(url + "&like=@mergin.com")
-    assert resp.json["total"] == 5
+    assert resp.json["count"] == 5
     # exact search by email
     resp = client.get(url + "&like=alice@mergin.com")
-    assert resp.json["total"] == 1
-    assert resp.json["users"][0]["username"] == "alice"
+    assert resp.json["count"] == 1
+    assert resp.json["items"][0]["username"] == "alice"
     # invalid paging
     assert client.get("/app/admin/users?page=2&per_page=10").status_code == 404
 

From 7bb6539956ab7f225ef7e2f18854c47713bdb6aa Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Tue, 17 Sep 2024 16:30:19 +0200
Subject: [PATCH 5/5] Fix items instead users

---
 server/mergin/tests/test_auth.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/mergin/tests/test_auth.py b/server/mergin/tests/test_auth.py
index 17314d56..79317cf3 100644
--- a/server/mergin/tests/test_auth.py
+++ b/server/mergin/tests/test_auth.py
@@ -694,7 +694,7 @@ def test_paginate_users(client):
     url = "/app/admin/users?page=1&per_page=10"
     # get 5 users (default + 5 new added - 1 deleted & inactive)
     resp = client.get(url)
-    list_of_usernames = [user["username"] for user in resp.json["users"]]
+    list_of_usernames = [user["username"] for user in resp.json["items"]]
     assert resp.json["count"] == 5
     assert resp.json["items"][0]["username"] == "mergin"
     assert user_inactive.username in list_of_usernames