From d2497b458c7eb480fb3d7d3094575711d60fa0e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Micha=C5=82owski?=
 <mateusz.michalowski@monterail.com>
Date: Tue, 23 Jul 2024 18:58:56 +0200
Subject: [PATCH] feat(admin) - update eslint babel

---
 admin/.eslintrc.js                            |   9 +-
 admin/package.json                            |   2 +-
 admin/src/App.vue                             |   2 +-
 .../src/components/ChangeUserRoleFormular.vue |  11 +-
 admin/src/components/ContentFooter.vue        |   9 +-
 .../ContributionLink/ContributionLink.vue     |  15 +-
 .../ContributionLink/ContributionLinkForm.vue |  29 +--
 .../ContributionLink/ContributionLinkList.vue |  10 +-
 .../ContributionMessagesFormular.vue          |  45 ++--
 .../ContributionMessagesList.vue              |  13 +-
 .../ContributionMessages/ParseMessage.vue     |   6 +-
 admin/src/components/CreationFormular.vue     |  24 +-
 .../components/CreationTransactionList.vue    |   2 +-
 admin/src/components/DeletedUserFormular.vue  |   9 +-
 admin/src/components/EditCreationFormular.vue |  47 ++--
 .../Federation/CommunityVisualizeItem.vue     |   4 +-
 admin/src/components/NavBar.vue               |   2 +-
 admin/src/components/NotFoundPage.vue         |   2 +-
 admin/src/components/Overlay.vue              |   3 +-
 admin/src/components/RowDetails.vue           |   7 +-
 .../components/Tables/OpenCreationsTable.vue  |  27 +--
 .../src/components/Tables/SearchUserTable.vue |  20 +-
 admin/src/components/TransactionLinkList.vue  |  48 ++--
 admin/src/components/UserQuery.vue            |   2 +-
 admin/src/components/input/Coordinates.vue    |  13 +-
 admin/src/components/input/EditableGroup.vue  |  11 +-
 .../input/EditableGroupableLabel.vue          |   1 +
 admin/src/components/input/TimePicker.vue     |   5 +-
 admin/src/composables/useCreationMonths.js    |   1 +
 admin/src/config/index.js                     |   3 +-
 admin/src/i18n.js                             |   4 +-
 admin/src/layouts/defaultLayout.vue           |   2 +-
 admin/src/pages/ContributionLinks.vue         |   6 +-
 admin/src/pages/CreationConfirm.vue           | 209 +++++++++---------
 admin/src/pages/FederationVisualize.vue       |   2 +-
 admin/src/pages/UserSearch.vue                |  14 +-
 admin/vite.config.js                          |   1 +
 admin/yarn.lock                               |   2 +-
 38 files changed, 325 insertions(+), 297 deletions(-)

diff --git a/admin/.eslintrc.js b/admin/.eslintrc.js
index 2aee1f13a..f0998df3a 100644
--- a/admin/.eslintrc.js
+++ b/admin/.eslintrc.js
@@ -4,10 +4,11 @@ module.exports = {
     browser: true,
     node: true,
     jest: true,
+    'vue/setup-compiler-macros': true,
+  },
+  parserOptions: {
+    ecmaVersion: 2020,
   },
-  // parserOptions: {
-  //   parser: 'babel-eslint',
-  // },
   extends: [
     'standard',
     'plugin:vue/vue3-recommended',
@@ -34,6 +35,8 @@ module.exports = {
         allowBinding: false,
       },
     ],
+    'vue/multi-word-component-names': 0,
+    'vue/no-v-html': 0,
     '@intlify/vue-i18n/no-dynamic-keys': 'error',
     '@intlify/vue-i18n/no-unused-keys': [
       'error',
diff --git a/admin/package.json b/admin/package.json
index 0170a909a..8b65a9ec7 100644
--- a/admin/package.json
+++ b/admin/package.json
@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.15.8",
+    "@babel/eslint-parser": "^7.24.8",
     "@babel/node": "^7.15.8",
     "@babel/preset-env": "^7.15.8",
     "@iconify/json": "^2.2.228",
@@ -63,7 +64,6 @@
   },
   "devDependencies": {
     "@apollo/client": "^3.10.8",
-    "@babel/eslint-parser": "^7.15.8",
     "@intlify/eslint-plugin-vue-i18n": "^1.4.0",
     "@vue/compiler-sfc": "^3.4.32",
     "babel-plugin-transform-require-context": "^0.1.1",
diff --git a/admin/src/App.vue b/admin/src/App.vue
index 2094e06b1..e5ee5c389 100644
--- a/admin/src/App.vue
+++ b/admin/src/App.vue
@@ -9,7 +9,7 @@
 import defaultLayout from '@/layouts/defaultLayout'
 
 export default {
-  name: 'app',
+  name: 'App',
   components: { defaultLayout },
 }
 </script>
diff --git a/admin/src/components/ChangeUserRoleFormular.vue b/admin/src/components/ChangeUserRoleFormular.vue
index 7f048d0e2..a66ad13a3 100644
--- a/admin/src/components/ChangeUserRoleFormular.vue
+++ b/admin/src/components/ChangeUserRoleFormular.vue
@@ -9,11 +9,11 @@
       </div>
       <div v-else class="m-3">
         <label for="role" class="mr-3">{{ $t('userRole.selectLabel') }}</label>
-        <b-form-select class="role-select" v-model="roleSelected" :options="roles" />
+        <b-form-select v-model="roleSelected" class="role-select" :options="roles" />
         <div class="mt-3 mb-5">
           <b-button
-            variant="danger"
             v-b-modal.user-role-modal
+            variant="danger"
             :disabled="currentRole === roleSelected"
             @click="showModal()"
           >
@@ -41,6 +41,7 @@ export default {
       required: true,
     },
   },
+  emits: ['update-roles'],
   data() {
     return {
       currentRole: this.getCurrentRole(),
@@ -66,8 +67,8 @@ export default {
               this.roleSelected === rolesValues.ADMIN
                 ? this.$t('userRole.selectRoles.admin')
                 : this.roleSelected === rolesValues.MODERATOR
-                ? this.$t('userRole.selectRoles.moderator')
-                : this.$t('userRole.selectRoles.user'),
+                  ? this.$t('userRole.selectRoles.moderator')
+                  : this.$t('userRole.selectRoles.user'),
           }),
           {
             cancelTitle: this.$t('overlay.cancel'),
@@ -102,7 +103,7 @@ export default {
           },
         })
         .then((result) => {
-          this.$emit('updateRoles', {
+          this.$emit('update-roles', {
             userId: this.item.userId,
             roles: roleValue === 'USER' ? [] : [roleValue],
           })
diff --git a/admin/src/components/ContentFooter.vue b/admin/src/components/ContentFooter.vue
index d1591e242..761d68c9c 100644
--- a/admin/src/components/ContentFooter.vue
+++ b/admin/src/components/ContentFooter.vue
@@ -2,7 +2,7 @@
   <hr />
   <div class="content-footer">
     <BTr class="mt-4 mb-4 justify-content-lg-between">
-      <col>
+      <BCol>
         <div class="copyright text-center text-lg-center text-muted">
           {{ $t('footer.copyright.year', { year }) }}
           <a
@@ -24,7 +24,7 @@
             {{ $t('footer.short_hash', { shortHash }) }}
           </a>
         </div>
-      </col>
+      </BCol>
     </BTr>
   </div>
 </template>
@@ -37,11 +37,10 @@ const version = CONFIG.APP_VERSION
 const hash = CONFIG.BUILD_COMMIT
 const shortHash = CONFIG.BUILD_COMMIT_SHORT
 </script>
-<style lang='scss' scoped>
-.content-footer{
+<style lang="scss" scoped>
+.content-footer {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-
 </style>
diff --git a/admin/src/components/ContributionLink/ContributionLink.vue b/admin/src/components/ContributionLink/ContributionLink.vue
index 027eb35d7..3b8f5f74f 100644
--- a/admin/src/components/ContributionLink/ContributionLink.vue
+++ b/admin/src/components/ContributionLink/ContributionLink.vue
@@ -10,21 +10,21 @@
     >
       <b-button
         v-if="!editContributionLink"
-        @click="visible = !visible"
         class="my-3 d-flex justify-content-left"
         data-test="new-contribution-link-button"
+        @click="visible = !visible"
       >
         {{ $t('math.plus') }} {{ $t('contributionLink.newContributionLink') }}
       </b-button>
 
-      <b-collapse v-model="visible" id="newContribution" class="mt-2">
+      <b-collapse id="newContribution" v-model="visible" class="mt-2">
         <b-card>
           <p class="h2 ml-5">{{ $t('contributionLink.contributionLinks') }}</p>
           <contribution-link-form
-            :contributionLinkData="contributionLinkData"
-            :editContributionLink="editContributionLink"
+            :contribution-link-data="contributionLinkData"
+            :edit-contribution-link="editContributionLink"
             @get-contribution-links="$emit('get-contribution-links')"
-            @closeContributionForm="closeContributionForm"
+            @close-contribution-form="closeContributionForm"
           />
         </b-card>
       </b-collapse>
@@ -33,9 +33,9 @@
         <contribution-link-list
           v-if="count > 0"
           :items="items"
-          @editContributionLinkData="editContributionLinkData"
+          @edit-contribution-link-data="editContributionLinkData"
           @get-contribution-links="$emit('get-contribution-links')"
-          @closeContributionForm="closeContributionForm"
+          @close-contribution-form="closeContributionForm"
         />
         <div v-else>{{ $t('contributionLink.noContributionLinks') }}</div>
       </b-card-text>
@@ -62,6 +62,7 @@ export default {
       required: true,
     },
   },
+  emits: ['get-contribution-links'],
   data: function () {
     return {
       visible: false,
diff --git a/admin/src/components/ContributionLink/ContributionLinkForm.vue b/admin/src/components/ContributionLink/ContributionLinkForm.vue
index f8e3d0f1f..239d77c83 100644
--- a/admin/src/components/ContributionLink/ContributionLinkForm.vue
+++ b/admin/src/components/ContributionLink/ContributionLinkForm.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="contribution-link-form">
-    <b-form class="m-5" @submit.prevent="onSubmit" ref="contributionLinkForm">
+    <b-form ref="contributionLinkForm" class="m-5" @submit.prevent="onSubmit">
       <!-- Date -->
       <b-row>
         <b-col>
           <b-form-group :label="$t('contributionLink.validFrom')">
             <b-form-datepicker
-              reset-button
               v-model="form.validFrom"
+              reset-button
               size="lg"
               :min="min"
               class="mb-4 test-validFrom"
@@ -20,8 +20,8 @@
         <b-col>
           <b-form-group :label="$t('contributionLink.validTo')">
             <b-form-datepicker
-              reset-button
               v-model="form.validTo"
+              reset-button
               size="lg"
               :min="form.validFrom ? form.validFrom : min"
               class="mb-4 test-validTo"
@@ -112,7 +112,7 @@
         <b-button type="reset" variant="danger" @click.prevent="onReset">
           {{ $t('contributionLink.clear') }}
         </b-button>
-        <b-button @click.prevent="$emit('closeContributionForm')">
+        <b-button @click.prevent="$emit('close-contribution-form')">
           {{ $t('close') }}
         </b-button>
       </div>
@@ -134,6 +134,7 @@ export default {
     },
     editContributionLink: { type: Boolean, required: true },
   },
+  emits: ['close-contribution-form', 'close-contribution-link', 'get-contribution-links'],
   data() {
     return {
       form: {
@@ -164,6 +165,16 @@ export default {
       ],
     }
   },
+  computed: {
+    disabled() {
+      return true
+    },
+  },
+  watch: {
+    contributionLinkData() {
+      this.form = this.contributionLinkData
+    },
+  },
   methods: {
     onSubmit() {
       if (this.form.validFrom === null)
@@ -202,15 +213,5 @@ export default {
       this.form.validTo = null
     },
   },
-  computed: {
-    disabled() {
-      return true
-    },
-  },
-  watch: {
-    contributionLinkData() {
-      this.form = this.contributionLinkData
-    },
-  },
 }
 </script>
diff --git a/admin/src/components/ContributionLink/ContributionLinkList.vue b/admin/src/components/ContributionLink/ContributionLinkList.vue
index 163b0917b..e87a48059 100644
--- a/admin/src/components/ContributionLink/ContributionLinkList.vue
+++ b/admin/src/components/ContributionLink/ContributionLinkList.vue
@@ -56,6 +56,12 @@ export default {
   props: {
     items: { type: Array, required: true },
   },
+  emits: [
+    'close-contribution-form',
+    'edit-contribution-link-data',
+    'get-contribution-links',
+    'get-contribution-link',
+  ],
   data() {
     return {
       fields: [
@@ -104,7 +110,7 @@ export default {
               })
               .then(() => {
                 this.toastSuccess(this.$t('contributionLink.deleted'))
-                this.$emit('closeContributionForm')
+                this.$emit('close-contribution-form')
                 this.$emit('get-contribution-links')
               })
               .catch((err) => {
@@ -113,7 +119,7 @@ export default {
         })
     },
     editContributionLink(row) {
-      this.$emit('editContributionLinkData', row)
+      this.$emit('edit-contribution-link-data', row)
     },
 
     showContributionLink(row) {
diff --git a/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue b/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
index 232d7c307..3b6cb62c2 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
+++ b/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
@@ -11,7 +11,7 @@
           <b-form-datepicker v-model="resubmissionDate" :min="now"></b-form-datepicker>
           <time-picker v-model="resubmissionTime"></time-picker>
         </b-form-group>
-        <b-tabs content-class="mt-3" v-model="tabindex" data-test="message-type-tabs">
+        <b-tabs v-model="tabindex" content-class="mt-3" data-test="message-type-tabs">
           <b-tab active>
             <template #title>
               <span id="message-tab-title">{{ $t('moderator.message') }}</span>
@@ -64,8 +64,8 @@
               type="submit"
               variant="primary"
               :disabled="disabled"
-              @click.prevent="onSubmit()"
               data-test="submit-dialog"
+              @click.prevent="onSubmit()"
             >
               {{ $t('save') }}
             </b-button>
@@ -81,10 +81,10 @@ import { adminUpdateContribution } from '@/graphql/adminUpdateContribution'
 import TimePicker from '@/components/input/TimePicker'
 
 export default {
+  name: 'ContributionMessagesFormular',
   components: {
     TimePicker,
   },
-  name: 'ContributionMessagesFormular',
   props: {
     contributionId: {
       type: Number,
@@ -103,6 +103,13 @@ export default {
       required: false,
     },
   },
+  emits: [
+    'update-contribution',
+    'update-contributions',
+    'get-contribution',
+    'update-status',
+    'get-list-contribution-messages',
+  ],
   data() {
     const localInputResubmissionDate = this.inputResubmissionDate
       ? new Date(this.inputResubmissionDate)
@@ -129,6 +136,22 @@ export default {
       },
     }
   },
+  computed: {
+    disabled() {
+      return (
+        (this.chatOrMemo === 0 && this.form.text === '') ||
+        this.loading ||
+        (this.chatOrMemo === 1 && this.form.memo.length < 5) ||
+        (this.showResubmissionDate && !this.resubmissionDate)
+      )
+    },
+    moderatorDisabled() {
+      return this.form.text === '' || this.loading || this.chatOrMemo === 1
+    },
+    now() {
+      return new Date()
+    },
+  },
   methods: {
     combineResubmissionDateAndTime() {
       // getTimezoneOffset
@@ -224,21 +247,5 @@ export default {
       this.chatOrMemo = 1
     },
   },
-  computed: {
-    disabled() {
-      return (
-        (this.chatOrMemo === 0 && this.form.text === '') ||
-        this.loading ||
-        (this.chatOrMemo === 1 && this.form.memo.length < 5) ||
-        (this.showResubmissionDate && !this.resubmissionDate)
-      )
-    },
-    moderatorDisabled() {
-      return this.form.text === '' || this.loading || this.chatOrMemo === 1
-    },
-    now() {
-      return new Date()
-    },
-  },
 }
 </script>
diff --git a/admin/src/components/ContributionMessages/ContributionMessagesList.vue b/admin/src/components/ContributionMessages/ContributionMessagesList.vue
index b0e4b3774..0f4ce3e33 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesList.vue
+++ b/admin/src/components/ContributionMessages/ContributionMessagesList.vue
@@ -1,19 +1,19 @@
 <template>
   <div class="contribution-messages-list">
     <b-container>
-      <div v-for="message in messages" v-bind:key="message.id">
+      <div v-for="message in messages" :key="message.id">
         <contribution-messages-list-item
           :message="message"
-          :contributionUserId="contributionUserId"
+          :contribution-user-id="contributionUserId"
         />
       </div>
     </b-container>
     <div v-if="contributionStatus === 'PENDING' || contributionStatus === 'IN_PROGRESS'">
       <contribution-messages-formular
-        :contributionId="contributionId"
-        :contributionMemo="contributionMemo"
-        :hideResubmission="hideResubmission"
-        :inputResubmissionDate="resubmissionAt"
+        :contribution-id="contributionId"
+        :contribution-memo="contributionMemo"
+        :hide-resubmission="hideResubmission"
+        :input-resubmission-date="resubmissionAt"
         @get-list-contribution-messages="$apollo.queries.Messages.refetch()"
         @update-status="updateStatus"
         @reload-contribution="reloadContribution"
@@ -59,6 +59,7 @@ export default {
       required: false,
     },
   },
+  emits: ['update-status', 'reload-contribution', 'update-contributions'],
   data() {
     return {
       messages: [],
diff --git a/admin/src/components/ContributionMessages/ParseMessage.vue b/admin/src/components/ContributionMessages/ParseMessage.vue
index 069373840..5651b68e5 100644
--- a/admin/src/components/ContributionMessages/ParseMessage.vue
+++ b/admin/src/components/ContributionMessages/ParseMessage.vue
@@ -26,9 +26,9 @@ export default {
       type: String,
       required: true,
     },
-    type: {
+    messageType: {
       type: String,
-      reuired: true,
+      required: true,
     },
   },
   computed: {
@@ -36,7 +36,7 @@ export default {
       let string = this.message
       const linkified = []
       let amount
-      if (this.type === 'HISTORY') {
+      if (this.messageType === 'HISTORY') {
         const split = string.split(/\n\s*---\n\s*/)
         string = split[1]
         linkified.push({ type: 'date', text: split[0].trim() })
diff --git a/admin/src/components/CreationFormular.vue b/admin/src/components/CreationFormular.vue
index 69930310b..22d14a21d 100644
--- a/admin/src/components/CreationFormular.vue
+++ b/admin/src/components/CreationFormular.vue
@@ -45,22 +45,22 @@
           </BCol>
           <div class="text-right">
             <BButton
-              v-if="pagetype === 'PageCreationConfirm'"
-              type="button"
-              variant="success"
-              class="test-submit"
-              @click="submitCreation"
-              :disabled="selected === '' || value <= 0 || text.length < 10"
+                v-if="pagetype === 'PageCreationConfirm'"
+                type="button"
+                variant="success"
+                class="test-submit"
+                :disabled="selected === '' || value <= 0 || text.length < 10"
+                @click="submitCreation"
             >
               {{ $t('creation_form.update_creation') }}
             </BButton>
             <BButton
-              v-else
-              type="button"
-              variant="success"
-              class="test-submit"
-              @click="submitCreation"
-              :disabled="selected === '' || value <= 0 || text.length < 10"
+                v-else
+                type="button"
+                variant="success"
+                class="test-submit"
+                :disabled="selected === '' || value <= 0 || text.length < 10"
+                @click="submitCreation"
             >
               {{ $t('creation_form.submit_creation') }}
             </BButton>
diff --git a/admin/src/components/CreationTransactionList.vue b/admin/src/components/CreationTransactionList.vue
index 5ce3f0644..eb954f313 100644
--- a/admin/src/components/CreationTransactionList.vue
+++ b/admin/src/components/CreationTransactionList.vue
@@ -11,9 +11,9 @@
     </b-table>
     <div>
       <b-pagination
+        v-model="currentPage"
         pills
         size="lg"
-        v-model="currentPage"
         :per-page="perPage"
         :total-rows="rows"
         align="center"
diff --git a/admin/src/components/DeletedUserFormular.vue b/admin/src/components/DeletedUserFormular.vue
index 2160f82e1..658d3eee8 100644
--- a/admin/src/components/DeletedUserFormular.vue
+++ b/admin/src/components/DeletedUserFormular.vue
@@ -7,13 +7,13 @@
       <div class="mt-3 mb-5">
         <b-button
           v-if="!item.deletedAt"
-          variant="danger"
           v-b-modal.delete-user-modal
+          variant="danger"
           @click="showDeleteModal()"
         >
           {{ $t('delete_user') }}
         </b-button>
-        <b-button v-else variant="success" v-b-modal.delete-user-modal @click="showUndeleteModal()">
+        <b-button v-else v-b-modal.delete-user-modal variant="success" @click="showUndeleteModal()">
           {{ $t('undelete_user') }}
         </b-button>
       </div>
@@ -32,6 +32,7 @@ export default {
       required: true,
     },
   },
+  emits: ['update-deleted-at'],
   methods: {
     showDeleteModal() {
       this.$bvModal
@@ -91,7 +92,7 @@ export default {
           },
         })
         .then((result) => {
-          this.$emit('updateDeletedAt', {
+          this.$emit('update-deleted-at', {
             userId: this.item.userId,
             deletedAt: result.data.deleteUser,
           })
@@ -109,7 +110,7 @@ export default {
           },
         })
         .then((result) => {
-          this.$emit('updateDeletedAt', {
+          this.$emit('update-deleted-at', {
             userId: this.item.userId,
             deletedAt: result.data.unDeleteUser,
           })
diff --git a/admin/src/components/EditCreationFormular.vue b/admin/src/components/EditCreationFormular.vue
index 6dbe22ebb..73576e422 100644
--- a/admin/src/components/EditCreationFormular.vue
+++ b/admin/src/components/EditCreationFormular.vue
@@ -20,16 +20,16 @@
           <div>
             <b-input-group prepend="GDD" append=".00">
               <b-form-input
-                type="number"
                 v-model="value"
+                type="number"
                 :min="rangeMin"
                 :max="rangeMax"
               ></b-form-input>
             </b-input-group>
             <b-input-group prepend="0" :append="String(rangeMax)" class="mt-3">
               <b-form-input
-                type="range"
                 v-model="value"
+                type="range"
                 :min="rangeMin"
                 :max="rangeMax"
                 step="10"
@@ -61,8 +61,8 @@
                 type="button"
                 variant="success"
                 class="test-submit"
-                @click="submitCreation"
                 :disabled="selected === '' || value <= 0 || text.length < 10"
+                @click="submitCreation"
               >
                 {{ $t('creation_form.update_creation') }}
               </b-button>
@@ -97,15 +97,35 @@ export default {
       required: true,
     },
   },
+  emits: ['update-creation-data'],
   data() {
     return {
       text: !this.creationUserData.memo ? '' : this.creationUserData.memo,
       value: !this.creationUserData.amount ? 0 : Number(this.creationUserData.amount),
       rangeMin: 0,
-      selected: this.selectedComputed,
+      selected: this.selectedComputed, // TODO investigate this one and apply solution based on good practices
       userId: this.item.userId,
     }
   },
+  computed: {
+    creationIndex() {
+      const month = this.$d(new Date(this.item.contributionDate), 'month')
+      return this.radioOptions.findIndex((obj) => {
+        return obj.item.short === month
+      })
+    },
+    selectedComputed() {
+      return this.radioOptions[this.creationIndex].item
+    },
+    rangeMax() {
+      return Number(this.creation[this.creationIndex]) + Number(this.item.amount)
+    },
+  },
+  watch: {
+    selectedComputed() {
+      this.selected = this.selectedComputed
+    },
+  },
   methods: {
     submitCreation() {
       this.$apollo
@@ -143,24 +163,5 @@ export default {
         })
     },
   },
-  computed: {
-    creationIndex() {
-      const month = this.$d(new Date(this.item.contributionDate), 'month')
-      return this.radioOptions.findIndex((obj) => {
-        return obj.item.short === month
-      })
-    },
-    selectedComputed() {
-      return this.radioOptions[this.creationIndex].item
-    },
-    rangeMax() {
-      return Number(this.creation[this.creationIndex]) + Number(this.item.amount)
-    },
-  },
-  watch: {
-    selectedComputed() {
-      this.selected = this.selectedComputed
-    },
-  },
 }
 </script>
diff --git a/admin/src/components/Federation/CommunityVisualizeItem.vue b/admin/src/components/Federation/CommunityVisualizeItem.vue
index 5b3d9bc8b..c19f8862f 100644
--- a/admin/src/components/Federation/CommunityVisualizeItem.vue
+++ b/admin/src/components/Federation/CommunityVisualizeItem.vue
@@ -26,7 +26,7 @@
           </b-list-group-item>
           <b-list-group-item v-if="!item.foreign">
             <editable-group
-              :allowEdit="$store.state.moderator.roles.includes('ADMIN')"
+              :allow-edit="$store.state.moderator.roles.includes('ADMIN')"
               @save="handleUpdateHomeCommunity"
               @reset="resetHomeCommunityEditable"
             >
@@ -48,7 +48,7 @@
                 <editable-groupable-label
                   v-model="gmsApiKey"
                   :label="$t('federation.gmsApiKey')"
-                  idName="home-community-api-key"
+                  id-name="home-community-api-key"
                 />
                 <coordinates v-model="location" />
               </template>
diff --git a/admin/src/components/NavBar.vue b/admin/src/components/NavBar.vue
index dd6f58274..1226e71aa 100644
--- a/admin/src/components/NavBar.vue
+++ b/admin/src/components/NavBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="component-nabvar">
-    <BNavbar toggleable="lg" variant="dark" v-b-color-mode="'light'">
+    <BNavbar v-b-color-mode="'light'" toggleable="lg" variant="dark">
       <BNavbarBrand class="mb-2" to="/">
         <img src="/img/brand/gradido_logo_w.png" class="navbar-brand-img pl-2" alt="..." />
       </BNavbarBrand>
diff --git a/admin/src/components/NotFoundPage.vue b/admin/src/components/NotFoundPage.vue
index f01f76044..d9a3cde7d 100755
--- a/admin/src/components/NotFoundPage.vue
+++ b/admin/src/components/NotFoundPage.vue
@@ -1195,7 +1195,7 @@
 
 <script>
 export default {
-  name: 'not-found',
+  name: 'NotFound',
   data() {
     return {
       anime: {
diff --git a/admin/src/components/Overlay.vue b/admin/src/components/Overlay.vue
index 7eb3cf99f..658d0c05e 100644
--- a/admin/src/components/Overlay.vue
+++ b/admin/src/components/Overlay.vue
@@ -52,9 +52,10 @@
 </template>
 <script>
 export default {
-  name: 'overlay',
+  name: 'Overlay',
   props: {
     item: { type: Object, required: true },
   },
+  emits: ['overlay-cancel'],
 }
 </script>
diff --git a/admin/src/components/RowDetails.vue b/admin/src/components/RowDetails.vue
index 84dfebbb5..de179e691 100644
--- a/admin/src/components/RowDetails.vue
+++ b/admin/src/components/RowDetails.vue
@@ -16,9 +16,10 @@ export default {
   name: 'RowDetails',
   props: {
     row: { required: true, type: Object },
-    slotName: { requried: true, type: String },
-    type: { requried: true, type: String },
-    index: { requried: true, type: Number },
+    slotName: { required: true, type: String },
+    type: { required: true, type: String },
+    index: { required: true, type: Number },
   },
+  emits: ['row-toggle-details'],
 }
 </script>
diff --git a/admin/src/components/Tables/OpenCreationsTable.vue b/admin/src/components/Tables/OpenCreationsTable.vue
index 54157a6ef..8877492e3 100644
--- a/admin/src/components/Tables/OpenCreationsTable.vue
+++ b/admin/src/components/Tables/OpenCreationsTable.vue
@@ -17,8 +17,8 @@
           <b-button
             variant="danger"
             size="md"
-            @click="$emit('show-overlay', row.item, 'delete')"
             class="mr-2"
+            @click="$emit('show-overlay', row.item, 'delete')"
           >
             <b-icon icon="trash" variant="light"></b-icon>
           </b-button>
@@ -38,8 +38,8 @@
             variant="info"
             size="md"
             :index="0"
-            @click="rowToggleDetails(row, 0)"
             class="mr-2"
+            @click="rowToggleDetails(row, 0)"
           >
             <b-icon :icon="row.detailsShowing ? 'x' : 'pencil-square'" aria-label="Help"></b-icon>
           </b-button>
@@ -69,8 +69,8 @@
           <b-button
             variant="warning"
             size="md"
-            @click="$emit('show-overlay', row.item, 'deny')"
             class="mr-2"
+            @click="$emit('show-overlay', row.item, 'deny')"
           >
             <b-icon icon="x" variant="light"></b-icon>
           </b-button>
@@ -81,8 +81,8 @@
           <b-button
             variant="success"
             size="md"
-            @click="$emit('show-overlay', row.item, 'confirm')"
             class="mr-2"
+            @click="$emit('show-overlay', row.item, 'confirm')"
           >
             <b-icon icon="check" scale="2" variant=""></b-icon>
           </b-button>
@@ -92,7 +92,7 @@
         <row-details
           :row="row"
           type="show-creation"
-          slotName="show-creation"
+          slot-name="show-creation"
           :index="0"
           @row-toggle-details="rowToggleDetails(row, 0)"
         >
@@ -102,18 +102,18 @@
                 type="singleCreation"
                 :item="row.item"
                 :row="row"
-                :creationUserData="creationUserData"
+                :creation-user-data="creationUserData"
                 @update-creation-data="$emit('update-contributions')"
               />
             </div>
             <div v-else>
               <contribution-messages-list
-                :contributionId="row.item.id"
-                :contributionStatus="row.item.status"
-                :contributionUserId="row.item.userId"
-                :contributionMemo="row.item.memo"
-                :resubmissionAt="row.item.resubmissionAt"
-                :hideResubmission="hideResubmission"
+                :contribution-id="row.item.id"
+                :contribution-status="row.item.status"
+                :contribution-user-id="row.item.userId"
+                :contribution-memo="row.item.memo"
+                :resubmission-at="row.item.resubmissionAt"
+                :hide-resubmission="hideResubmission"
                 @update-status="updateStatus"
                 @reload-contribution="reloadContribution"
                 @update-contributions="updateContributions"
@@ -142,12 +142,12 @@ const iconMap = {
 
 export default {
   name: 'OpenCreationsTable',
-  mixins: [toggleRowDetails],
   components: {
     EditCreationFormular,
     RowDetails,
     ContributionMessagesList,
   },
+  mixins: [toggleRowDetails],
   props: {
     items: {
       type: Array,
@@ -166,6 +166,7 @@ export default {
       required: false,
     },
   },
+  emits: ['update-contributions', 'reload-contribution', 'update-status', 'show-overlay'],
   methods: {
     myself(item) {
       return item.userId === this.$store.state.moderator.id
diff --git a/admin/src/components/Tables/SearchUserTable.vue b/admin/src/components/Tables/SearchUserTable.vue
index 3ac7b1538..1b2616b47 100644
--- a/admin/src/components/Tables/SearchUserTable.vue
+++ b/admin/src/components/Tables/SearchUserTable.vue
@@ -9,7 +9,7 @@
       hover
       stacked="md"
       select-mode="single"
-      selectableonRowSelected
+      selectable-on-row-selected
       @row-clicked="onRowClicked"
     >
       <template #cell(creation)="data">
@@ -61,7 +61,7 @@
                 pagetype="singleCreation"
                 :creation="row.item.creation"
                 :item="row.item"
-                :creationUserData="creationUserData"
+                :creation-user-data="creationUserData"
                 @update-user-data="updateUserData"
               />
             </BTab>
@@ -70,7 +70,7 @@
                 v-if="!row.item.deletedAt"
                 :checked="row.item.emailChecked"
                 :email="row.item.email"
-                :dateLastSend="
+                :date-last-send="
                   row.item.emailConfirmationSend
                     ? $d(new Date(row.item.emailConfirmationSend), 'long')
                     : ''
@@ -78,16 +78,16 @@
               />
             </BTab>
             <!-- <BTab :title="$t('creationList')" :disabled="row.item.deletedAt !== null">
-              <creation-transaction-list v-if="!row.item.deletedAt" :userId="row.item.userId" />
+              <creation-transaction-list v-if="!row.item.deletedAt" :user-id="row.item.userId" />
             </BTab>
             <BTab :title="$t('transactionlink.name')" :disabled="row.item.deletedAt !== null">
-              <transaction-link-list v-if="!row.item.deletedAt" :userId="row.item.userId" />
+              <transaction-link-list v-if="!row.item.deletedAt" :user-id="row.item.userId" />
             </BTab>
             <BTab :title="$t('userRole.tabTitle')">
-              <change-user-role-formular :item="row.item" @updateRoles="updateRoles" />
+              <change-user-role-formular :item="row.item" @update-roles="updateRoles" />
             </BTab> -->
             <!-- <BTab v-if="store.state.moderator.roles.includes('ADMIN')" :title="$t('delete_user')">
-              <deleted-user-formular :item="row.item" @updateDeletedAt="updateDeletedAt" />
+              <deleted-user-formular :item="row.item" @update-deleted-at="updateDeletedAt" />
             </BTab> -->
           </BTabs>
         </BCard>
@@ -116,7 +116,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['updateRoles', 'updateDeletedAt'])
+const emit = defineEmits(['update-roles', 'update-deleted-at'])
 const myItems = ref()
 const creationUserData = ref({})
 const rowDetails = ref()
@@ -136,11 +136,11 @@ const updateUserData = (rowItem, newCreation) => {
 }
 
 const updateRoles = ({ userId, roles }) => {
-  emit('updateRoles', userId, roles)
+  emit('update-roles', userId, roles)
 }
 
 const updateDeletedAt = ({ userId, deletedAt }) => {
-  emit('updateDeletedAt', userId, deletedAt)
+  emit('update-deleted-at', userId, deletedAt)
 }
 
 const onRowClicked = async (item) => {
diff --git a/admin/src/components/TransactionLinkList.vue b/admin/src/components/TransactionLinkList.vue
index eb58903c6..d829002c3 100644
--- a/admin/src/components/TransactionLinkList.vue
+++ b/admin/src/components/TransactionLinkList.vue
@@ -5,9 +5,9 @@
       <b-table striped hover :fields="fields" :items="items"></b-table>
     </div>
     <b-pagination
+      v-model="currentPage"
       pills
       size="lg"
-      v-model="currentPage"
       :per-page="perPage"
       :total-rows="rows"
       align="center"
@@ -30,26 +30,6 @@ export default {
       perPage: 5,
     }
   },
-  methods: {
-    getListTransactionLinks() {
-      this.$apollo
-        .query({
-          query: listTransactionLinksAdmin,
-          variables: {
-            currentPage: this.currentPage,
-            pageSize: this.perPage,
-            userId: this.userId,
-          },
-        })
-        .then((result) => {
-          this.rows = result.data.listTransactionLinksAdmin.count
-          this.items = result.data.listTransactionLinksAdmin.links
-        })
-        .catch((error) => {
-          this.toastError(error.message)
-        })
-    },
-  },
   computed: {
     fields() {
       return [
@@ -94,13 +74,33 @@ export default {
       ]
     },
   },
-  created() {
-    this.getListTransactionLinks()
-  },
   watch: {
     currentPage() {
       this.getListTransactionLinks()
     },
   },
+  created() {
+    this.getListTransactionLinks()
+  },
+  methods: {
+    getListTransactionLinks() {
+      this.$apollo
+        .query({
+          query: listTransactionLinksAdmin,
+          variables: {
+            currentPage: this.currentPage,
+            pageSize: this.perPage,
+            userId: this.userId,
+          },
+        })
+        .then((result) => {
+          this.rows = result.data.listTransactionLinksAdmin.count
+          this.items = result.data.listTransactionLinksAdmin.links
+        })
+        .catch((error) => {
+          this.toastError(error.message)
+        })
+    },
+  },
 }
 </script>
diff --git a/admin/src/components/UserQuery.vue b/admin/src/components/UserQuery.vue
index 045ad1ff9..3ec02a074 100644
--- a/admin/src/components/UserQuery.vue
+++ b/admin/src/components/UserQuery.vue
@@ -2,9 +2,9 @@
   <div>
     <div class="d-flex">
       <BFormInput
+        v-model="currentValue"
         type="text"
         class="test-input-criteria"
-        v-model="currentValue"
         :placeholder="placeholderText"
       />
       <div append class="test-click-clear-criteria" @click="onClear">
diff --git a/admin/src/components/input/Coordinates.vue b/admin/src/components/input/Coordinates.vue
index b71e5d9d4..6493c19cf 100644
--- a/admin/src/components/input/Coordinates.vue
+++ b/admin/src/components/input/Coordinates.vue
@@ -11,24 +11,24 @@
         :description="$t('geo-coordinates.latitude-longitude-smart.describe')"
       >
         <b-form-input
-          v-model="locationString"
           id="home-community-latitude-longitude-smart"
+          v-model="locationString"
           type="text"
           @input="splitCoordinates"
         />
       </b-form-group>
       <b-form-group :label="$t('latitude')" label-for="home-community-latitude">
         <b-form-input
-          v-model="inputValue.latitude"
           id="home-community-latitude"
+          v-model="inputValue.latitude"
           type="text"
           @input="valueUpdated"
         />
       </b-form-group>
       <b-form-group :label="$t('longitude')" label-for="home-community-longitude">
         <b-form-input
-          v-model="inputValue.longitude"
           id="home-community-longitude"
+          v-model="inputValue.longitude"
           type="text"
           @input="valueUpdated"
         />
@@ -41,9 +41,12 @@
 export default {
   name: 'Coordinates',
   props: {
-    value: Object,
-    default: null,
+    value: {
+      type: Object,
+      default: null,
+    },
   },
+  emits: ['input'],
   data() {
     return {
       inputValue: this.value,
diff --git a/admin/src/components/input/EditableGroup.vue b/admin/src/components/input/EditableGroup.vue
index 6a998f542..9f683fc06 100644
--- a/admin/src/components/input/EditableGroup.vue
+++ b/admin/src/components/input/EditableGroup.vue
@@ -1,17 +1,17 @@
 <template>
   <div>
-    <slot v-if="!isEditing" v-bind:isEditing="isEditing" name="view"></slot>
-    <slot v-else v-bind:isEditing="isEditing" name="edit" @input="valueChanged"></slot>
+    <slot v-if="!isEditing" :is-editing="isEditing" name="view"></slot>
+    <slot v-else :is-editing="isEditing" name="edit" @input="valueChanged"></slot>
     <b-form-group v-if="allowEdit && !isEditing">
-      <b-button @click="enableEdit" :variant="variant">
+      <b-button :variant="variant" @click="enableEdit">
         <b-icon icon="pencil-fill">{{ $t('edit') }}</b-icon>
       </b-button>
     </b-form-group>
     <b-form-group v-else-if="allowEdit && isEditing">
-      <b-button @click="save" :variant="variant" :disabled="!isValueChanged" class="save-button">
+      <b-button :variant="variant" :disabled="!isValueChanged" class="save-button" @click="save">
         {{ $t('save') }}
       </b-button>
-      <b-button @click="close" variant="secondary" class="close-button">
+      <b-button variant="secondary" class="close-button" @click="close">
         {{ $t('close') }}
       </b-button>
     </b-form-group>
@@ -27,6 +27,7 @@ export default {
       default: false,
     },
   },
+  emits: ['save', 'reset'],
   data() {
     return {
       isEditing: false,
diff --git a/admin/src/components/input/EditableGroupableLabel.vue b/admin/src/components/input/EditableGroupableLabel.vue
index 606e46363..21db33607 100644
--- a/admin/src/components/input/EditableGroupableLabel.vue
+++ b/admin/src/components/input/EditableGroupableLabel.vue
@@ -22,6 +22,7 @@ export default {
       required: true,
     },
   },
+  emits: ['input'],
   data() {
     return {
       inputValue: this.value,
diff --git a/admin/src/components/input/TimePicker.vue b/admin/src/components/input/TimePicker.vue
index e8fb416ad..1e18502f9 100644
--- a/admin/src/components/input/TimePicker.vue
+++ b/admin/src/components/input/TimePicker.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
     <input
-      type="text"
       v-model="timeValue"
+      type="text"
+      placeholder="hh:mm"
       @input="updateValues"
       @blur="validateAndCorrect"
-      placeholder="hh:mm"
     />
   </div>
 </template>
@@ -20,6 +20,7 @@ export default {
       default: '00:00',
     },
   },
+  emits: ['input'],
   data() {
     return {
       timeValue: this.value,
diff --git a/admin/src/composables/useCreationMonths.js b/admin/src/composables/useCreationMonths.js
index 7e87a7a07..b2ea5ab81 100644
--- a/admin/src/composables/useCreationMonths.js
+++ b/admin/src/composables/useCreationMonths.js
@@ -2,6 +2,7 @@ import { ref, computed, watch } from 'vue'
 import { adminOpenCreations } from '../graphql/adminOpenCreations'
 import { useQuery } from '@vue/apollo-composable'
 import { useI18n } from 'vue-i18n'
+import toast from 'bootstrap/js/src/toast'
 
 export default () => {
   const { d } = useI18n()
diff --git a/admin/src/config/index.js b/admin/src/config/index.js
index 1be1892d6..59c5c661c 100644
--- a/admin/src/config/index.js
+++ b/admin/src/config/index.js
@@ -45,7 +45,8 @@ const debug = {
 }
 
 // Check config version
-constants.CONFIG_VERSION.CURRENT = import.meta.env.CONFIG_VERSION ?? constants.CONFIG_VERSION.DEFAULT
+constants.CONFIG_VERSION.CURRENT =
+  import.meta.env.CONFIG_VERSION ?? constants.CONFIG_VERSION.DEFAULT
 if (
   ![constants.CONFIG_VERSION.EXPECTED, constants.CONFIG_VERSION.DEFAULT].includes(
     constants.CONFIG_VERSION.CURRENT,
diff --git a/admin/src/i18n.js b/admin/src/i18n.js
index 70560f7a3..050d6dacd 100644
--- a/admin/src/i18n.js
+++ b/admin/src/i18n.js
@@ -1,6 +1,6 @@
 import { createI18n } from 'vue-i18n'
-import de from "./locales/de.json"
-import en from "./locales/en.json"
+import de from './locales/de.json'
+import en from './locales/en.json'
 
 const numberFormats = {
   en: {
diff --git a/admin/src/layouts/defaultLayout.vue b/admin/src/layouts/defaultLayout.vue
index 9fbc7b8ed..ab7c45120 100644
--- a/admin/src/layouts/defaultLayout.vue
+++ b/admin/src/layouts/defaultLayout.vue
@@ -10,7 +10,7 @@
 import NavBar from '@/components/NavBar'
 import ContentFooter from '@/components/ContentFooter'
 export default {
-  name: 'defaultLayout',
+  name: 'DefaultLayout',
   components: {
     NavBar,
     ContentFooter,
diff --git a/admin/src/pages/ContributionLinks.vue b/admin/src/pages/ContributionLinks.vue
index 0a8436d73..02a148065 100644
--- a/admin/src/pages/ContributionLinks.vue
+++ b/admin/src/pages/ContributionLinks.vue
@@ -22,6 +22,9 @@ export default {
       count: 0,
     }
   },
+  created() {
+    this.getContributionLinks()
+  },
   methods: {
     getContributionLinks() {
       this.$apollo
@@ -38,8 +41,5 @@ export default {
         })
     },
   },
-  created() {
-    this.getContributionLinks()
-  },
 }
 </script>
diff --git a/admin/src/pages/CreationConfirm.vue b/admin/src/pages/CreationConfirm.vue
index a0cd9a8a3..ce9b3e06b 100644
--- a/admin/src/pages/CreationConfirm.vue
+++ b/admin/src/pages/CreationConfirm.vue
@@ -1,14 +1,14 @@
 <!-- eslint-disable @intlify/vue-i18n/no-dynamic-keys -->
 <template>
   <div class="creation-confirm">
-    <user-query class="mb-2 mt-2" v-model="query" :placeholder="$t('user_memo_search')" />
+    <user-query v-model="query" class="mb-2 mt-2" :placeholder="$t('user_memo_search')" />
     <p class="mb-2">
-      <input type="checkbox" class="noHashtag" v-model="noHashtag" />
-      <span class="ml-2" v-b-tooltip="$t('no_hashtag_tooltip')">{{ $t('no_hashtag') }}</span>
+      <input v-model="noHashtag" type="checkbox" class="noHashtag" />
+      <span v-b-tooltip="$t('no_hashtag_tooltip')" class="ml-2">{{ $t('no_hashtag') }}</span>
     </p>
-    <p class="mb-4" v-if="showResubmissionCheckbox">
-      <input type="checkbox" class="hideResubmission" v-model="hideResubmissionModel" />
-      <span class="ml-2" v-b-tooltip="$t('hide_resubmission_tooltip')">
+    <p v-if="showResubmissionCheckbox" class="mb-4">
+      <input v-model="hideResubmissionModel" type="checkbox" class="hideResubmission" />
+      <span v-b-tooltip="$t('hide_resubmission_tooltip')" class="ml-2">
         {{ $t('hide_resubmission') }}
       </span>
     </p>
@@ -53,7 +53,7 @@
       class="mt-4"
       :items="items"
       :fields="fields"
-      :hideResubmission="hideResubmission"
+      :hide-resubmission="hideResubmission"
       @show-overlay="showOverlay"
       @update-status="updateStatus"
       @reload-contribution="reloadContribution"
@@ -61,9 +61,9 @@
     />
 
     <b-pagination
+      v-model="currentPage"
       pills
       size="lg"
-      v-model="currentPage"
       :per-page="pageSize"
       :total-rows="rows"
       align="center"
@@ -82,12 +82,7 @@
           <p>{{ $t(overlayQuestion) }}</p>
         </template>
         <template #submit-btn>
-          <b-button
-            size="md"
-            v-bind:variant="overlayIcon"
-            class="m-3 text-right"
-            @click="overlayEvent"
-          >
+          <b-button size="md" :variant="overlayIcon" class="m-3 text-right" @click="overlayEvent">
             {{ $t(overlayBtnText) }}
           </b-button>
         </template>
@@ -135,99 +130,6 @@ export default {
       hideResubmissionModel: true,
     }
   },
-  watch: {
-    tabIndex() {
-      this.currentPage = 1
-    },
-  },
-  methods: {
-    reloadContribution(id) {
-      this.$apollo
-        .query({ query: getContribution, variables: { id } })
-        .then((result) => {
-          const contribution = result.data.contribution
-          this.$set(
-            this.items,
-            this.items.findIndex((obj) => obj.id === contribution.id),
-            contribution,
-          )
-        })
-        .catch((error) => {
-          this.overlay = false
-          this.toastError(error.message)
-        })
-    },
-    deleteCreation() {
-      this.$apollo
-        .mutate({
-          mutation: adminDeleteContribution,
-          variables: {
-            id: this.item.id,
-          },
-        })
-        .then((result) => {
-          this.overlay = false
-          this.updatePendingCreations(this.item.id)
-          this.toastSuccess(this.$t('creation_form.toasted_delete'))
-        })
-        .catch((error) => {
-          this.overlay = false
-          this.toastError(error.message)
-        })
-    },
-    denyCreation() {
-      this.$apollo
-        .mutate({
-          mutation: denyContribution,
-          variables: {
-            id: this.item.id,
-          },
-        })
-        .then((result) => {
-          this.overlay = false
-          this.updatePendingCreations(this.item.id)
-          this.toastSuccess(this.$t('creation_form.toasted_denied'))
-        })
-        .catch((error) => {
-          this.overlay = false
-          this.toastError(error.message)
-        })
-    },
-    confirmCreation() {
-      this.$apollo
-        .mutate({
-          mutation: confirmContribution,
-          variables: {
-            id: this.item.id,
-          },
-        })
-        .then((result) => {
-          this.overlay = false
-          this.updatePendingCreations(this.item.id)
-          this.toastSuccess(this.$t('creation_form.toasted_created'))
-        })
-        .catch((error) => {
-          this.overlay = false
-          this.toastError(error.message)
-        })
-    },
-    updatePendingCreations(id) {
-      this.items = this.items.filter((obj) => obj.id !== id)
-      this.$store.commit('openCreationsMinus', 1)
-    },
-    showOverlay(item, variant) {
-      this.overlay = true
-      this.item = item
-      this.variant = variant
-    },
-    updateStatus(id) {
-      this.items.find((obj) => obj.id === id).messagesCount++
-      this.items.find((obj) => obj.id === id).status = 'IN_PROGRESS'
-    },
-    formatDateOrDash(value) {
-      return value ? this.$d(new Date(value), 'short') : '—'
-    },
-  },
   computed: {
     fields() {
       return [
@@ -440,6 +342,99 @@ export default {
       return this.showResubmissionCheckbox ? this.hideResubmissionModel : false
     },
   },
+  watch: {
+    tabIndex() {
+      this.currentPage = 1
+    },
+  },
+  methods: {
+    reloadContribution(id) {
+      this.$apollo
+        .query({ query: getContribution, variables: { id } })
+        .then((result) => {
+          const contribution = result.data.contribution
+          this.$set(
+            this.items,
+            this.items.findIndex((obj) => obj.id === contribution.id),
+            contribution,
+          )
+        })
+        .catch((error) => {
+          this.overlay = false
+          this.toastError(error.message)
+        })
+    },
+    deleteCreation() {
+      this.$apollo
+        .mutate({
+          mutation: adminDeleteContribution,
+          variables: {
+            id: this.item.id,
+          },
+        })
+        .then((result) => {
+          this.overlay = false
+          this.updatePendingCreations(this.item.id)
+          this.toastSuccess(this.$t('creation_form.toasted_delete'))
+        })
+        .catch((error) => {
+          this.overlay = false
+          this.toastError(error.message)
+        })
+    },
+    denyCreation() {
+      this.$apollo
+        .mutate({
+          mutation: denyContribution,
+          variables: {
+            id: this.item.id,
+          },
+        })
+        .then((result) => {
+          this.overlay = false
+          this.updatePendingCreations(this.item.id)
+          this.toastSuccess(this.$t('creation_form.toasted_denied'))
+        })
+        .catch((error) => {
+          this.overlay = false
+          this.toastError(error.message)
+        })
+    },
+    confirmCreation() {
+      this.$apollo
+        .mutate({
+          mutation: confirmContribution,
+          variables: {
+            id: this.item.id,
+          },
+        })
+        .then((result) => {
+          this.overlay = false
+          this.updatePendingCreations(this.item.id)
+          this.toastSuccess(this.$t('creation_form.toasted_created'))
+        })
+        .catch((error) => {
+          this.overlay = false
+          this.toastError(error.message)
+        })
+    },
+    updatePendingCreations(id) {
+      this.items = this.items.filter((obj) => obj.id !== id)
+      this.$store.commit('openCreationsMinus', 1)
+    },
+    showOverlay(item, variant) {
+      this.overlay = true
+      this.item = item
+      this.variant = variant
+    },
+    updateStatus(id) {
+      this.items.find((obj) => obj.id === id).messagesCount++
+      this.items.find((obj) => obj.id === id).status = 'IN_PROGRESS'
+    },
+    formatDateOrDash(value) {
+      return value ? this.$d(new Date(value), 'short') : '—'
+    },
+  },
   apollo: {
     ListAllContributions: {
       query() {
diff --git a/admin/src/pages/FederationVisualize.vue b/admin/src/pages/FederationVisualize.vue
index 5736b1a0e..cab8f0bae 100644
--- a/admin/src/pages/FederationVisualize.vue
+++ b/admin/src/pages/FederationVisualize.vue
@@ -7,8 +7,8 @@
           icon="arrow-clockwise"
           font-scale="2"
           :animation="animation"
-          @click="$apollo.queries.allCommunities.refresh()"
           data-test="federation-communities-refresh-btn"
+          @click="$apollo.queries.allCommunities.refresh()"
         ></b-icon>
       </b-button>
     </div>
diff --git a/admin/src/pages/UserSearch.vue b/admin/src/pages/UserSearch.vue
index a47fef58e..339672b14 100644
--- a/admin/src/pages/UserSearch.vue
+++ b/admin/src/pages/UserSearch.vue
@@ -7,8 +7,8 @@
           filters.byActivated === null
             ? $t('all_emails')
             : filters.byActivated === false
-            ? $t('unregistered_emails')
-            : ''
+              ? $t('unregistered_emails')
+              : ''
         }}
       </BButton>
       <BButton class="deletedUserSearch" variant="light" @click="deletedUserSearch">
@@ -17,19 +17,19 @@
           filters.byDeleted === null
             ? $t('all_emails')
             : filters.byDeleted === true
-            ? $t('deleted_user')
-            : ''
+              ? $t('deleted_user')
+              : ''
         }}
       </BButton>
     </div>
     <label>{{ $t('user_search') }}</label>
-    <UserQuery class="mb-4 mt-2" v-model="criteria" />
+    <UserQuery v-model="criteria" class="mb-4 mt-2" />
     <SearchUserTable
       type="PageUserSearch"
       :items="searchResult"
       :fields="fields"
-      @updateRoles="updateRoles"
-      @updateDeletedAt="updateDeletedAt"
+      @update-roles="updateRoles"
+      @update-deleted-at="updateDeletedAt"
     />
     <BPagination
       v-model="currentPage"
diff --git a/admin/vite.config.js b/admin/vite.config.js
index 0b95ddc81..47a712f48 100644
--- a/admin/vite.config.js
+++ b/admin/vite.config.js
@@ -10,6 +10,7 @@ const path = require('path')
 export default defineConfig({
   base: '/admin/',
   server: {
+    host: '0.0.0.0',
     port: 8080,
   },
   resolve: {
diff --git a/admin/yarn.lock b/admin/yarn.lock
index 3a28bb53a..d6aa2e3e0 100644
--- a/admin/yarn.lock
+++ b/admin/yarn.lock
@@ -93,7 +93,7 @@
     json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/eslint-parser@^7.15.8":
+"@babel/eslint-parser@^7.24.8":
   version "7.24.8"
   resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.24.8.tgz#bc655255fa4ded3694cc10ef3dbea6d69639c831"
   integrity sha512-nYAikI4XTGokU2QX7Jx+v4rxZKhKivaQaREZjuW3mrJrbdWJ5yUfohnoUULge+zEEaKjPYNxhoRgUKktjXtbwA==