From 4e11dd258cce3199ac216766a190734efc23fc83 Mon Sep 17 00:00:00 2001
From: MateuszMichalowski
 <79852198+MateuszMichalowski@users.noreply.github.com>
Date: Thu, 25 Jul 2024 16:15:04 +0200
Subject: [PATCH 1/2] feat(admin): automatic contributions updates (#3332)

* feat(admin): Automatic Contributions update

* feat(admin): Automatic Contributions fixed

* feat(admin): Automatic Contributions remove unused code

* feat(admin): Fix lint

* feat(admin): fix lock
---
 admin/components.d.ts                         |  46 +++
 admin/src/App.vue                             |   1 +
 .../ContributionLink/ContributionLink.vue     |  25 +-
 .../ContributionLink/ContributionLinkForm.vue | 278 +++++++++---------
 .../ContributionLink/ContributionLinkList.vue | 203 +++++++------
 .../Federation/CommunityVisualizeItem.vue     |  76 ++---
 admin/src/components/FigureQrCode.vue         |  28 +-
 admin/src/components/NavBar.vue               |   2 +-
 .../src/components/Tables/StatisticTable.vue  |  31 +-
 admin/src/components/input/EditableGroup.vue  |  23 +-
 .../input/EditableGroupableLabel.vue          |   6 +-
 admin/src/composables/useToast.js             |  41 +++
 admin/src/pages/CommunityStatistic.vue        |  73 +++--
 admin/src/pages/ContributionLinks.vue         |  60 ++--
 admin/src/pages/CreationConfirm.vue           |  47 +--
 admin/src/pages/FederationVisualize.vue       |  96 +++---
 admin/src/pages/UserSearch.vue                |   4 +-
 admin/vite.config.js                          |   5 +-
 18 files changed, 563 insertions(+), 482 deletions(-)
 create mode 100644 admin/src/composables/useToast.js

diff --git a/admin/components.d.ts b/admin/components.d.ts
index 16c738904..3e26eac67 100644
--- a/admin/components.d.ts
+++ b/admin/components.d.ts
@@ -7,6 +7,40 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    BAvatar: typeof import('bootstrap-vue-next')['BAvatar']
+    BBadge: typeof import('bootstrap-vue-next')['BBadge']
+    BButton: typeof import('bootstrap-vue-next')['BButton']
+    BCard: typeof import('bootstrap-vue-next')['BCard']
+    BCardText: typeof import('bootstrap-vue-next')['BCardText']
+    BCol: typeof import('bootstrap-vue-next')['BCol']
+    BCollapse: typeof import('bootstrap-vue-next')['BCollapse']
+    BContainer: typeof import('bootstrap-vue-next')['BContainer']
+    BForm: typeof import('bootstrap-vue-next')['BForm']
+    BFormCheckbox: typeof import('bootstrap-vue-next')['BFormCheckbox']
+    BFormGroup: typeof import('bootstrap-vue-next')['BFormGroup']
+    BFormInput: typeof import('bootstrap-vue-next')['BFormInput']
+    BFormRadioGroup: typeof import('bootstrap-vue-next')['BFormRadioGroup']
+    BFormSelect: typeof import('bootstrap-vue-next')['BFormSelect']
+    BFormTextarea: typeof import('bootstrap-vue-next')['BFormTextarea']
+    BInputGroup: typeof import('bootstrap-vue-next')['BInputGroup']
+    BLink: typeof import('bootstrap-vue-next')['BLink']
+    BListGroup: typeof import('bootstrap-vue-next')['BListGroup']
+    BListGroupItem: typeof import('bootstrap-vue-next')['BListGroupItem']
+    BModal: typeof import('bootstrap-vue-next')['BModal']
+    BPagination: typeof import('bootstrap-vue-next')['BPagination']
+    BRow: typeof import('bootstrap-vue-next')['BRow']
+    BTab: typeof import('bootstrap-vue-next')['BTab']
+    BTable: typeof import('bootstrap-vue-next')['BTable']
+    BTableLite: typeof import('bootstrap-vue-next')['BTableLite']
+    BTableSimple: typeof import('bootstrap-vue-next')['BTableSimple']
+    BTabs: typeof import('bootstrap-vue-next')['BTabs']
+    BTbody: typeof import('bootstrap-vue-next')['BTbody']
+    BTd: typeof import('bootstrap-vue-next')['BTd']
+    BTh: typeof import('bootstrap-vue-next')['BTh']
+    BThead: typeof import('bootstrap-vue-next')['BThead']
+    BToastOrchestrator: typeof import('bootstrap-vue-next')['BToastOrchestrator']
+    BTooltip: typeof import('bootstrap-vue-next')['BTooltip']
+    BTr: typeof import('bootstrap-vue-next')['BTr']
     ChangeUserRoleFormular: typeof import('./src/components/ChangeUserRoleFormular.vue')['default']
     CommunityVisualizeItem: typeof import('./src/components/Federation/CommunityVisualizeItem.vue')['default']
     ConfirmRegisterMailFormular: typeof import('./src/components/ConfirmRegisterMailFormular.vue')['default']
@@ -26,7 +60,15 @@ declare module 'vue' {
     EditCreationFormular: typeof import('./src/components/EditCreationFormular.vue')['default']
     FederationVisualizeItem: typeof import('./src/components/Federation/FederationVisualizeItem.vue')['default']
     FigureQrCode: typeof import('./src/components/FigureQrCode.vue')['default']
+    IBiArrowClockwise: typeof import('~icons/bi/arrow-clockwise')['default']
+    IBiBellFill: typeof import('~icons/bi/bell-fill')['default']
+    IBiCheck: typeof import('~icons/bi/check')['default']
     IBiEnvelope: typeof import('~icons/bi/envelope')['default']
+    IBiEye: typeof import('~icons/bi/eye')['default']
+    IBiList: typeof import('~icons/bi/list')['default']
+    IBiPencil: typeof import('~icons/bi/pencil')['default']
+    IBiPencilFill: typeof import('~icons/bi/pencil-fill')['default']
+    IBiTrash: typeof import('~icons/bi/trash')['default']
     IBiXCircle: typeof import('~icons/bi/x-circle')['default']
     IIcBaselineClose: typeof import('~icons/ic/baseline-close')['default']
     IOcticonCircleSlash24: typeof import('~icons/octicon/circle-slash24')['default']
@@ -48,4 +90,8 @@ declare module 'vue' {
     TransactionLinkList: typeof import('./src/components/TransactionLinkList.vue')['default']
     UserQuery: typeof import('./src/components/UserQuery.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vBToggle: typeof import('bootstrap-vue-next')['vBToggle']
+    vBTooltip: typeof import('bootstrap-vue-next')['vBTooltip']
+  }
 }
diff --git a/admin/src/App.vue b/admin/src/App.vue
index f7c6c9a9d..c272136a9 100644
--- a/admin/src/App.vue
+++ b/admin/src/App.vue
@@ -1,5 +1,6 @@
 <template>
   <div id="app">
+    <BToastOrchestrator />
     <default-layout v-if="$store.state.token" />
     <router-view v-else></router-view>
   </div>
diff --git a/admin/src/components/ContributionLink/ContributionLink.vue b/admin/src/components/ContributionLink/ContributionLink.vue
index 3b8f5f74f..ee18bbee2 100644
--- a/admin/src/components/ContributionLink/ContributionLink.vue
+++ b/admin/src/components/ContributionLink/ContributionLink.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="contribution-link">
-    <b-card
+    <BCard
       border-variant="success"
       :header="$t('contributionLink.contributionLinks')"
       header-bg-variant="success"
@@ -8,17 +8,17 @@
       header-class="text-center"
       class="mt-5"
     >
-      <b-button
+      <BButton
         v-if="!editContributionLink"
         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>
+      </BButton>
 
-      <b-collapse id="newContribution" v-model="visible" class="mt-2">
-        <b-card>
+      <BCollapse id="newContribution" v-model="visible" class="mt-2">
+        <BCard>
           <p class="h2 ml-5">{{ $t('contributionLink.contributionLinks') }}</p>
           <contribution-link-form
             :contribution-link-data="contributionLinkData"
@@ -26,10 +26,10 @@
             @get-contribution-links="$emit('get-contribution-links')"
             @close-contribution-form="closeContributionForm"
           />
-        </b-card>
-      </b-collapse>
+        </BCard>
+      </BCollapse>
 
-      <b-card-text>
+      <BCardText>
         <contribution-link-list
           v-if="count > 0"
           :items="items"
@@ -38,10 +38,11 @@
           @close-contribution-form="closeContributionForm"
         />
         <div v-else>{{ $t('contributionLink.noContributionLinks') }}</div>
-      </b-card-text>
-    </b-card>
+      </BCardText>
+    </BCard>
   </div>
 </template>
+
 <script>
 import ContributionLinkForm from '../ContributionLink/ContributionLinkForm'
 import ContributionLinkList from '../ContributionLink/ContributionLinkList'
@@ -73,14 +74,14 @@ export default {
   methods: {
     closeContributionForm() {
       if (this.visible) {
-        this.$root.$emit('bv::toggle::collapse', 'newContribution')
+        this.visible = false
         this.editContributionLink = false
         this.contributionLinkData = {}
       }
     },
     editContributionLinkData(data) {
       if (!this.visible) {
-        this.$root.$emit('bv::toggle::collapse', 'newContribution')
+        this.visible = true
       }
       this.contributionLinkData = data
       this.editContributionLink = true
diff --git a/admin/src/components/ContributionLink/ContributionLinkForm.vue b/admin/src/components/ContributionLink/ContributionLinkForm.vue
index 239d77c83..332b9be0e 100644
--- a/admin/src/components/ContributionLink/ContributionLinkForm.vue
+++ b/admin/src/components/ContributionLink/ContributionLinkForm.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="contribution-link-form">
-    <b-form ref="contributionLinkForm" class="m-5" @submit.prevent="onSubmit">
+    <BForm ref="contributionLinkForm" class="m-5" @submit.prevent="onSubmit" @reset="onReset">
       <!-- Date -->
-      <b-row>
-        <b-col>
-          <b-form-group :label="$t('contributionLink.validFrom')">
-            <b-form-datepicker
+      <BRow>
+        <BCol>
+          <BFormGroup :label="$t('contributionLink.validFrom')">
+            <BFormInput
               v-model="form.validFrom"
               reset-button
               size="lg"
@@ -14,12 +14,13 @@
               reset-value=""
               :label-no-date-selected="$t('contributionLink.noDateSelected')"
               required
-            ></b-form-datepicker>
-          </b-form-group>
-        </b-col>
-        <b-col>
-          <b-form-group :label="$t('contributionLink.validTo')">
-            <b-form-datepicker
+              type="date"
+            />
+          </BFormGroup>
+        </BCol>
+        <BCol>
+          <BFormGroup :label="$t('contributionLink.validTo')">
+            <BFormInput
               v-model="form.validTo"
               reset-button
               size="lg"
@@ -28,14 +29,15 @@
               reset-value=""
               :label-no-date-selected="$t('contributionLink.noDateSelected')"
               required
-            ></b-form-datepicker>
-          </b-form-group>
-        </b-col>
-      </b-row>
+              type="date"
+            />
+          </BFormGroup>
+        </BCol>
+      </BRow>
 
       <!-- Name -->
-      <b-form-group :label="$t('contributionLink.name')">
-        <b-form-input
+      <BFormGroup :label="$t('contributionLink.name')">
+        <BFormInput
           v-model="form.name"
           size="lg"
           type="text"
@@ -43,175 +45,173 @@
           required
           maxlength="100"
           class="test-name"
-        ></b-form-input>
-      </b-form-group>
+        ></BFormInput>
+      </BFormGroup>
       <!-- Desc -->
-      <b-form-group :label="$t('contributionLink.memo')">
-        <b-form-textarea
+      <BFormGroup :label="$t('contributionLink.memo')">
+        <BFormTextarea
           v-model="form.memo"
           size="lg"
           :placeholder="$t('contributionLink.memo')"
           required
           maxlength="255"
           class="test-memo"
-        ></b-form-textarea>
-      </b-form-group>
+        ></BFormTextarea>
+      </BFormGroup>
       <!-- Amount -->
-      <b-form-group :label="$t('contributionLink.amount')">
-        <b-form-input
+      <BFormGroup :label="$t('contributionLink.amount')">
+        <BFormInput
           v-model="form.amount"
           size="lg"
           type="number"
           placeholder="0"
           required
           class="test-amount"
-        ></b-form-input>
-      </b-form-group>
-      <b-row class="mb-4">
-        <b-col>
+        ></BFormInput>
+      </BFormGroup>
+      <BRow class="mb-4">
+        <BCol>
           <!-- Cycle -->
           <label for="cycle">{{ $t('contributionLink.cycle') }}</label>
-          <b-form-select
-            v-model="form.cycle"
-            :options="cycle"
-            class="mb-3"
-            size="lg"
-          ></b-form-select>
-        </b-col>
-        <b-col>
+          <BFormSelect v-model="form.cycle" :options="cycle" class="mb-3" size="lg"></BFormSelect>
+        </BCol>
+        <BCol>
           <!-- maxPerCycle -->
           <label for="maxPerCycle">{{ $t('contributionLink.maxPerCycle') }}</label>
-          <b-form-select
+          <BFormSelect
             v-model="form.maxPerCycle"
             :options="maxPerCycle"
             :disabled="disabled"
             class="mb-3"
             size="lg"
-          ></b-form-select>
-        </b-col>
-      </b-row>
+          ></BFormSelect>
+        </BCol>
+      </BRow>
 
       <!-- Max amount -->
       <!-- 
-          <b-form-group :label="$t('contributionLink.maximumAmount')">
-            <b-form-input
+          <BFormGroup :label="$t('contributionLink.maximumAmount')">
+            <BFormInput
               v-model="form.maxAmountPerMonth"
               size="lg"
               :disabled="disabled"
               type="number"
               placeholder="0"
-            ></b-form-input>
-          </b-form-group>
+            ></BFormInput>
+          </BFormGroup>
           -->
       <div class="mt-6">
-        <b-button type="submit" variant="primary">
+        <BButton type="submit" variant="primary">
           {{
             editContributionLink ? $t('contributionLink.saveChange') : $t('contributionLink.create')
           }}
-        </b-button>
-        <b-button type="reset" variant="danger" @click.prevent="onReset">
+        </BButton>
+        <BButton type="reset" variant="danger">
           {{ $t('contributionLink.clear') }}
-        </b-button>
-        <b-button @click.prevent="$emit('close-contribution-form')">
+        </BButton>
+        <BButton @click.prevent="emit('close-contribution-form')">
           {{ $t('close') }}
-        </b-button>
+        </BButton>
       </div>
-    </b-form>
+    </BForm>
   </div>
 </template>
-<script>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { useMutation } from '@vue/apollo-composable'
 import { createContributionLink } from '@/graphql/createContributionLink.js'
 import { updateContributionLink } from '@/graphql/updateContributionLink.js'
+import { useAppToast } from '@/composables/useToast'
+import { useI18n } from 'vue-i18n'
 
-export default {
-  name: 'ContributionLinkForm',
-  props: {
-    contributionLinkData: {
-      type: Object,
-      default() {
-        return {}
-      },
-    },
-    editContributionLink: { type: Boolean, required: true },
+const props = defineProps({
+  contributionLinkData: {
+    type: Object,
+    default: () => ({}),
   },
-  emits: ['close-contribution-form', 'close-contribution-link', 'get-contribution-links'],
-  data() {
-    return {
-      form: {
-        name: null,
-        memo: null,
-        amount: null,
-        validFrom: null,
-        validTo: null,
-        cycle: 'ONCE',
-        maxPerCycle: 1,
-        maxAmountPerMonth: '0',
-      },
-      min: new Date(),
-      cycle: [
-        { value: 'ONCE', text: this.$t('contributionLink.options.cycle.once') },
-        //        { value: 'hourly', text: this.$t('contributionLink.options.cycle.hourly') },
-        { value: 'DAILY', text: this.$t('contributionLink.options.cycle.daily') },
-        //        { value: 'weekly', text: this.$t('contributionLink.options.cycle.weekly') },
-        //        { value: 'monthly', text: this.$t('contributionLink.options.cycle.monthly') },
-        //        { value: 'yearly', text: this.$t('contributionLink.options.cycle.yearly') },
-      ],
-      maxPerCycle: [
-        { value: '1', text: '1 x' },
-        //        { value: '2', text: '2 x' },
-        //        { value: '3', text: '3 x' },
-        //        { value: '4', text: '4 x' },
-        //        { value: '5', text: '5 x' },
-      ],
-    }
-  },
-  computed: {
-    disabled() {
-      return true
-    },
-  },
-  watch: {
-    contributionLinkData() {
-      this.form = this.contributionLinkData
-    },
-  },
-  methods: {
-    onSubmit() {
-      if (this.form.validFrom === null)
-        return this.toastError(this.$t('contributionLink.noStartDate'))
-      if (this.form.validTo === null) return this.toastError(this.$t('contributionLink.noEndDate'))
+  editContributionLink: { type: Boolean, required: true },
+})
 
-      const variables = {
-        ...this.form,
-        id: this.contributionLinkData.id ? this.contributionLinkData.id : null,
-      }
+const emit = defineEmits(['get-contribution-links', 'close-contribution-form'])
 
-      this.$apollo
-        .mutate({
-          mutation: this.editContributionLink ? updateContributionLink : createContributionLink,
-          variables: variables,
-        })
-        .then((result) => {
-          const link = this.editContributionLink
-            ? result.data.updateContributionLink.link
-            : result.data.createContributionLink.link
-          this.toastSuccess(
-            this.editContributionLink ? this.$t('contributionLink.changeSaved') : link,
-          )
-          this.onReset()
-          this.$root.$emit('bv::toggle::collapse', 'newContribution')
-          this.$emit('get-contribution-links')
-        })
-        .catch((error) => {
-          this.toastError(error.message)
-        })
-    },
-    onReset() {
-      this.$refs.contributionLinkForm.reset()
-      this.form = {}
-      this.form.validFrom = null
-      this.form.validTo = null
-    },
+const { t } = useI18n()
+
+const contributionLinkForm = ref(null)
+
+const form = ref({
+  name: null,
+  memo: null,
+  amount: null,
+  validFrom: null,
+  validTo: null,
+  cycle: 'ONCE',
+  maxPerCycle: 1,
+  maxAmountPerMonth: '0',
+})
+
+const min = new Date().toLocaleDateString()
+const { toastError, toastSuccess } = useAppToast()
+
+const cycle = ref([
+  { value: 'ONCE', text: t('contributionLink.options.cycle.once') },
+  { value: 'DAILY', text: t('contributionLink.options.cycle.daily') },
+])
+
+const maxPerCycle = ref([{ value: '1', text: '1 x' }])
+
+const { mutate: contributionLinkMutation } = useMutation(
+  props.editContributionLink ? updateContributionLink : createContributionLink,
+)
+
+watch(
+  () => props.contributionLinkData,
+  (newVal) => {
+    form.value = newVal
+    form.value.validFrom = formatDateFromDateTime(newVal.validFrom)
+    form.value.validTo = formatDateFromDateTime(newVal.validTo)
   },
+)
+
+const onSubmit = async () => {
+  if (form.value.validFrom === null) return toastError(t('contributionLink.noStartDate'))
+
+  if (form.value.validTo === null) return toastError(t('contributionLink.noEndDate'))
+
+  const variables = {
+    ...form.value,
+    maxAmountPerMonth: 1, // TODO this is added only for test puropuse during migration since max amount input is commented out but without it being a number bigger then 0 it doesn't work
+    id: props.contributionLinkData.id ? props.contributionLinkData.id : null,
+  }
+
+  try {
+    const result = await contributionLinkMutation({ ...variables })
+    const link = props.editContributionLink
+      ? result.data.updateContributionLink.link
+      : result.data.createContributionLink.link
+    toastSuccess(props.editContributionLink ? t('contributionLink.changeSaved') : link)
+    onReset()
+    emit('close-contribution-form')
+    emit('get-contribution-links')
+  } catch (error) {
+    toastError(error.message)
+  }
 }
+
+const formatDateFromDateTime = (datetimeString) => {
+  if (!datetimeString || !datetimeString?.includes('T')) return datetimeString
+  return datetimeString.split('T')[0]
+}
+
+const onReset = () => {
+  form.value = { validFrom: null, validTo: null }
+}
+
+defineExpose({
+  form,
+  min,
+  cycle,
+  maxPerCycle,
+  onSubmit,
+})
 </script>
diff --git a/admin/src/components/ContributionLink/ContributionLinkList.vue b/admin/src/components/ContributionLink/ContributionLinkList.vue
index e87a48059..2cdba783c 100644
--- a/admin/src/components/ContributionLink/ContributionLinkList.vue
+++ b/admin/src/components/ContributionLink/ContributionLinkList.vue
@@ -1,131 +1,144 @@
 <template>
   <div class="contribution-link-list">
-    <b-table :items="items" :fields="fields" striped hover stacked="lg">
+    <BTable :items="props.items" :fields="fields" striped hover stacked="lg">
       <template #cell(delete)="data">
-        <b-button
+        <BButton
           variant="danger"
           size="md"
           class="mr-2 test-delete-link"
-          @click="deleteContributionLink(data.item.id, data.item.name)"
+          @click="handleDelete(data)"
         >
-          <b-icon icon="trash" variant="light"></b-icon>
-        </b-button>
+          <IBiTrash />
+        </BButton>
       </template>
       <template #cell(edit)="data">
-        <b-button variant="success" size="md" class="mr-2" @click="editContributionLink(data.item)">
-          <b-icon icon="pencil" variant="light"></b-icon>
-        </b-button>
+        <BButton variant="success" size="md" class="mr-2" @click="editContributionLink(data.item)">
+          <IBiPencil />
+        </BButton>
       </template>
       <template #cell(show)="data">
-        <b-button
+        <BButton
           variant="info"
           size="md"
           class="mr-2 test-show"
           @click="showContributionLink(data.item)"
         >
-          <b-icon icon="eye" variant="light"></b-icon>
-        </b-button>
+          <IBiEye />
+        </BButton>
       </template>
-    </b-table>
+    </BTable>
 
-    <b-modal ref="my-modal" ok-only hide-header-close>
-      <b-card header-tag="header" footer-tag="footer">
+    <BModal id="qr-link-modal" ref="my-modal" v-model="qrLinkModal" ok-only hide-header-close>
+      <BCard header-tag="header" footer-tag="footer">
         <template #header>
           <h6 class="mb-0">{{ modalData ? modalData.name : '' }}</h6>
         </template>
-        <b-card-text>
+        <BCardText>
           {{ modalData.memo ? modalData.memo : '' }}
           <figure-qr-code :link="modalData ? modalData.link : ''" />
-        </b-card-text>
+        </BCardText>
         <template #footer>
           <em>{{ modalData ? modalData.link : '' }}</em>
         </template>
-      </b-card>
-    </b-modal>
+      </BCard>
+    </BModal>
+    <BModal id="delete-link-modal" v-model="deleteLinkModal" @ok="executeDelete">
+      <template #default>
+        {{ t('contributionLink.deleteNow', { name: itemToBeDeleted.name }) }}
+      </template>
+    </BModal>
   </div>
 </template>
-<script>
+
+<script setup>
+import { ref } from 'vue'
+import { useMutation } from '@vue/apollo-composable'
 import { deleteContributionLink } from '@/graphql/deleteContributionLink.js'
 import FigureQrCode from '../FigureQrCode'
+import { useModal } from 'bootstrap-vue-next'
+import { useI18n } from 'vue-i18n'
+import { useAppToast } from '@/composables/useToast'
 
-export default {
-  name: 'ContributionLinkList',
-  components: {
-    FigureQrCode,
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true,
   },
-  props: {
-    items: { type: Array, required: true },
-  },
-  emits: [
-    'close-contribution-form',
-    'edit-contribution-link-data',
-    'get-contribution-links',
-    'get-contribution-link',
-  ],
-  data() {
-    return {
-      fields: [
-        'name',
-        'memo',
-        'amount',
-        { key: 'cycle', label: this.$t('contributionLink.cycle') },
-        { key: 'maxPerCycle', label: this.$t('contributionLink.maxPerCycle') },
-        {
-          key: 'validFrom',
-          label: this.$t('contributionLink.validFrom'),
-          formatter: (value, key, item) => {
-            if (value) {
-              return this.$d(new Date(value))
-            }
-          },
-        },
-        {
-          key: 'validTo',
-          label: this.$t('contributionLink.validTo'),
-          formatter: (value, key, item) => {
-            if (value) {
-              return this.$d(new Date(value))
-            }
-          },
-        },
-        'delete',
-        'edit',
-        'show',
-      ],
-      modalData: {},
-    }
-  },
-  methods: {
-    deleteContributionLink(id, name) {
-      this.$bvModal
-        .msgBoxConfirm(this.$t('contributionLink.deleteNow', { name: name }))
-        .then(async (value) => {
-          if (value)
-            await this.$apollo
-              .mutate({
-                mutation: deleteContributionLink,
-                variables: {
-                  id: id,
-                },
-              })
-              .then(() => {
-                this.toastSuccess(this.$t('contributionLink.deleted'))
-                this.$emit('close-contribution-form')
-                this.$emit('get-contribution-links')
-              })
-              .catch((err) => {
-                this.toastError(err.message)
-              })
-        })
-    },
-    editContributionLink(row) {
-      this.$emit('edit-contribution-link-data', row)
-    },
+})
 
-    showContributionLink(row) {
-      this.modalData = row
-      this.$refs['my-modal'].show()
-    },
+const qrLinkModal = ref(false)
+const { show: showQrCodeModal } = useModal('qr-link-modal')
+
+const deleteLinkModal = ref(false)
+const { show: showDeleteLinkModal } = useModal('delete-link-modal')
+
+const emit = defineEmits([
+  'close-contribution-form',
+  'get-contribution-links',
+  'edit-contribution-link-data',
+])
+
+const { t, d } = useI18n()
+const { toastError, toastSuccess } = useAppToast()
+
+const modalData = ref({})
+
+const fields = ref([
+  'name',
+  'memo',
+  'amount',
+  { key: 'cycle', label: t('contributionLink.cycle') },
+  { key: 'maxPerCycle', label: t('contributionLink.maxPerCycle') },
+  {
+    key: 'validFrom',
+    label: t('contributionLink.validFrom'),
+    formatter: (value) => (value ? d(new Date(value)) : ''),
   },
+  {
+    key: 'validTo',
+    label: t('contributionLink.validTo'),
+    formatter: (value) => (value ? d(new Date(value)) : ''),
+  },
+  'delete',
+  'edit',
+  'show',
+])
+
+const { mutate: deleteContributionLinkMutation } = useMutation(deleteContributionLink)
+
+const itemToBeDeleted = ref({})
+
+const handleDelete = async (dataPayload) => {
+  itemToBeDeleted.value = { ...dataPayload.item }
+  showDeleteLinkModal()
 }
+
+const executeDelete = async () => {
+  try {
+    await deleteContributionLinkMutation({ id: parseInt(itemToBeDeleted.value.id) })
+    toastSuccess(t('contributionLink.deleted'))
+    emit('close-contribution-form')
+    emit('get-contribution-links')
+    itemToBeDeleted.value = {}
+  } catch (err) {
+    toastError(err.message)
+  }
+}
+
+const editContributionLink = (row) => {
+  emit('edit-contribution-link-data', row)
+}
+
+const showContributionLink = (row) => {
+  modalData.value = row
+  showQrCodeModal()
+}
+
+defineExpose({
+  fields,
+  modalData,
+  deleteContributionLink,
+  editContributionLink,
+  showContributionLink,
+})
 </script>
diff --git a/admin/src/components/Federation/CommunityVisualizeItem.vue b/admin/src/components/Federation/CommunityVisualizeItem.vue
index c19f8862f..853fb7324 100644
--- a/admin/src/components/Federation/CommunityVisualizeItem.vue
+++ b/admin/src/components/Federation/CommunityVisualizeItem.vue
@@ -1,30 +1,30 @@
 <template>
   <div class="community-visualize-item">
-    <b-row @click="toggleDetails">
-      <b-col cols="1"><b-icon :icon="icon" :variant="variant" class="mr-4"></b-icon></b-col>
-      <b-col>
+    <BRow @click="toggleDetails">
+      <BCol cols="1"><b-icon :icon="icon" :variant="variant" class="mr-4"></b-icon></BCol>
+      <BCol>
         <div>
           <a :href="item.url" target="_blank">{{ item.url }}</a>
         </div>
         <small>{{ `${item.publicKey.substring(0, 26)}…` }}</small>
-      </b-col>
-      <b-col v-b-tooltip="item.description">{{ item.name }}</b-col>
-      <b-col cols="2">{{ lastAnnouncedAt }}</b-col>
-      <b-col cols="2">{{ createdAt }}</b-col>
-    </b-row>
-    <b-row v-if="details" class="details">
-      <b-col colspan="5">
-        <b-list-group>
-          <b-list-group-item v-if="item.uuid">
+      </BCol>
+      <BCol v-b-tooltip="item.description">{{ item.name }}</BCol>
+      <BCol cols="2">{{ lastAnnouncedAt }}</BCol>
+      <BCol cols="2">{{ createdAt }}</BCol>
+    </BRow>
+    <BRow v-if="details" class="details">
+      <BCol colspan="5">
+        <BListGroup>
+          <BListGroupItem v-if="item.uuid">
             {{ $t('federation.communityUuid') }}&nbsp;{{ item.uuid }}
-          </b-list-group-item>
-          <b-list-group-item v-if="item.authenticatedAt">
+          </BListGroupItem>
+          <BListGroupItem v-if="item.authenticatedAt">
             {{ $t('federation.authenticatedAt') }}&nbsp;{{ item.authenticatedAt }}
-          </b-list-group-item>
-          <b-list-group-item>
+          </BListGroupItem>
+          <BListGroupItem>
             {{ $t('federation.publicKey') }}&nbsp;{{ item.publicKey }}
-          </b-list-group-item>
-          <b-list-group-item v-if="!item.foreign">
+          </BListGroupItem>
+          <BListGroupItem v-if="!item.foreign">
             <editable-group
               :allow-edit="$store.state.moderator.roles.includes('ADMIN')"
               @save="handleUpdateHomeCommunity"
@@ -32,7 +32,7 @@
             >
               <template #view>
                 <label>{{ $t('federation.gmsApiKey') }}&nbsp;{{ gmsApiKey }}</label>
-                <b-form-group>
+                <BFormGroup>
                   {{ $t('federation.coordinates') }}
                   <span v-if="isValidLocation">
                     {{
@@ -42,7 +42,7 @@
                       })
                     }}
                   </span>
-                </b-form-group>
+                </BFormGroup>
               </template>
               <template #edit>
                 <editable-groupable-label
@@ -53,29 +53,29 @@
                 <coordinates v-model="location" />
               </template>
             </editable-group>
-          </b-list-group-item>
-          <b-list-group-item>
-            <b-list-group>
-              <b-row>
-                <b-col class="ml-1">{{ $t('federation.verified') }}</b-col>
-                <b-col>{{ $t('federation.apiVersion') }}</b-col>
-                <b-col>{{ $t('federation.createdAt') }}</b-col>
-                <b-col>{{ $t('federation.lastAnnouncedAt') }}</b-col>
-                <b-col>{{ $t('federation.verifiedAt') }}</b-col>
-                <b-col>{{ $t('federation.lastErrorAt') }}</b-col>
-              </b-row>
-              <b-list-group-item
+          </BListGroupItem>
+          <BListGroup-item>
+            <BListGroup>
+              <BRow>
+                <BCol class="ml-1">{{ $t('federation.verified') }}</BCol>
+                <BCol>{{ $t('federation.apiVersion') }}</BCol>
+                <BCol>{{ $t('federation.createdAt') }}</BCol>
+                <BCol>{{ $t('federation.lastAnnouncedAt') }}</BCol>
+                <BCol>{{ $t('federation.verifiedAt') }}</BCol>
+                <BCol>{{ $t('federation.lastErrorAt') }}</BCol>
+              </BRow>
+              <BListGroup-item
                 v-for="federation in item.federatedCommunities"
                 :key="federation.id"
                 :variant="!item.foreign ? 'primary' : 'warning'"
               >
                 <federation-visualize-item :item="federation" />
-              </b-list-group-item>
-            </b-list-group>
-          </b-list-group-item>
-        </b-list-group>
-      </b-col>
-    </b-row>
+              </BListGroup-item>
+            </BListGroup>
+          </BListGroup-item>
+        </BListGroup>
+      </BCol>
+    </BRow>
   </div>
 </template>
 <script>
diff --git a/admin/src/components/FigureQrCode.vue b/admin/src/components/FigureQrCode.vue
index 353c0d87d..edea28ad8 100644
--- a/admin/src/components/FigureQrCode.vue
+++ b/admin/src/components/FigureQrCode.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="figure-qr-code">
     <div class="qrbox">
-      <q-r-canvas :options="options" class="canvas" />
+      <q-r-canvas v-if="showQr" :options="qrOptions" class="canvas" />
     </div>
   </div>
 </template>
@@ -18,26 +18,26 @@ export default {
   },
   data() {
     return {
-      options: {
+      image: null,
+      showQr: false,
+    }
+  },
+  computed: {
+    qrOptions() {
+      return {
         cellSize: 8,
         correctLevel: 'H',
         data: this.link,
-        logo: {
-          image: null,
-        },
-      },
-    }
+        logo: { image: this.image },
+      }
+    },
   },
   created() {
     const image = new Image()
-    image.src = 'img/gdd-coin.png'
+    image.src = '/img/gdd-coin.png'
     image.onload = () => {
-      this.options = {
-        ...this.options,
-        logo: {
-          image,
-        },
-      }
+      this.image = image
+      this.showQr = true
     }
   },
 }
diff --git a/admin/src/components/NavBar.vue b/admin/src/components/NavBar.vue
index eec7f5e1f..a6a1a9988 100644
--- a/admin/src/components/NavBar.vue
+++ b/admin/src/components/NavBar.vue
@@ -9,7 +9,7 @@
         />
       </BNavbarBrand>
 
-      <BNavbarToggle target="navbar-toggle-collapse" />
+      <BNavbarToggle v-b-toggle.nav-collapse target="navbar-toggle-collapse" />
 
       <BCollapse id="nav-collapse" is-nav>
         <BNavbarNav>
diff --git a/admin/src/components/Tables/StatisticTable.vue b/admin/src/components/Tables/StatisticTable.vue
index e9611fac9..70ec861f5 100644
--- a/admin/src/components/Tables/StatisticTable.vue
+++ b/admin/src/components/Tables/StatisticTable.vue
@@ -15,7 +15,7 @@
             <b>{{ $t('statistic.totalUsers') }}</b>
           </BTd>
           <BTd class="text-right">
-            {{ props.modelValue.totalUsers }}
+            {{ props.statistics.totalUsers }}
           </BTd>
           <BTd></BTd>
         </BTr>
@@ -24,7 +24,7 @@
             <b>{{ $t('statistic.activeUsers') }}</b>
           </BTd>
           <BTd class="text-right">
-            {{ props.modelValue.activeUsers }}
+            {{ props.statistics.activeUsers }}
           </BTd>
           <BTd></BTd>
         </BTr>
@@ -33,7 +33,7 @@
             <b>{{ $t('statistic.deletedUsers') }}</b>
           </BTd>
           <BTd class="text-right">
-            {{ props.modelValue.deletedUsers }}
+            {{ props.statistics.deletedUsers }}
           </BTd>
           <BTd></BTd>
         </BTr>
@@ -42,11 +42,11 @@
             <b>{{ $t('statistic.totalGradidoCreated') }}</b>
           </BTd>
           <BTd class="text-right">
-            <!--            {{ $n(props.modelValue.totalGradidoCreated, 'decimal') }} {{ $t('GDD') }}-->
+            <!--            {{ $n(props.statistics.totalGradidoCreated, 'decimal') }} {{ $t('GDD') }}-->
             4500
           </BTd>
           <BTd class="text-right">
-            {{ props.modelValue.totalGradidoCreated }}
+            {{ props.statistics.totalGradidoCreated }}
           </BTd>
         </BTr>
         <BTr>
@@ -54,21 +54,19 @@
             <b>{{ $t('statistic.totalGradidoDecayed') }}</b>
           </BTd>
           <BTd class="text-right">
-            <!--            {{ $n(props.modelValue.totalGradidoDecayed, 'decimal') }} {{ $t('GDD') }}-->
-            100
+            {{ $n(parseFloat(props.statistics.totalGradidoDecayed), 'decimal') }} {{ $t('GDD') }}
           </BTd>
-          <BTd class="text-right">{{ props.modelValue.totalGradidoDecayed }}</BTd>
+          <BTd class="text-right">{{ props.statistics.totalGradidoDecayed }}</BTd>
         </BTr>
         <BTr>
           <BTd>
             <b>{{ $t('statistic.totalGradidoAvailable') }}</b>
           </BTd>
           <BTd class="text-right">
-            <!--            {{ $n(props.modelValue.totalGradidoAvailable, 'decimal') }} {{ $t('GDD') }}-->
-            500
+            {{ $n(parseFloat(props.statistics.totalGradidoAvailable), 'decimal') }} {{ $t('GDD') }}
           </BTd>
           <BTd class="text-right">
-            {{ props.modelValue.totalGradidoAvailable }}
+            {{ props.statistics.totalGradidoAvailable }}
           </BTd>
         </BTr>
         <BTr>
@@ -76,12 +74,10 @@
             <b>{{ $t('statistic.totalGradidoUnbookedDecayed') }}</b>
           </BTd>
           <BTd class="text-right">
-            <!--            {{ $n(props.modelValue.totalGradidoUnbookedDecayed, 'decimal') }} {{ $t('GDD') }}-->
-            600
-          </BTd>
-          <BTd class="text-right">
-            {{ props.modelValue.totalGradidoUnbookedDecayed }}
+            {{ $n(parseFloat(props.statistics.totalGradidoUnbookedDecayed), 'decimal') }}
+            {{ $t('GDD') }}
           </BTd>
+          <BTd class="text-right">{{ props.statistics.totalGradidoUnbookedDecayed }}</BTd>
         </BTr>
       </BTbody>
     </BTableSimple>
@@ -89,10 +85,9 @@
 </template>
 <script setup>
 import { defineProps } from 'vue'
-import { BTableSimple, BThead, BTr, BTh, BTbody, BTd } from 'bootstrap-vue-next'
 
 const props = defineProps({
-  modelValue: {
+  statistics: {
     type: Object,
     required: true,
   },
diff --git a/admin/src/components/input/EditableGroup.vue b/admin/src/components/input/EditableGroup.vue
index 9f683fc06..37632721d 100644
--- a/admin/src/components/input/EditableGroup.vue
+++ b/admin/src/components/input/EditableGroup.vue
@@ -2,19 +2,20 @@
   <div>
     <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 :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 :variant="variant" :disabled="!isValueChanged" class="save-button" @click="save">
+    <BFormGroup v-if="allowEdit && !isEditing">
+      <BButton :variant="variant" @click="enableEdit">
+        <IBiPencilFill />
+        {{ $t('edit') }}
+      </BButton>
+    </BFormGroup>
+    <BFormGroup v-else-if="allowEdit && isEditing">
+      <BButton :variant="variant" :disabled="!isValueChanged" class="save-button" @click="save">
         {{ $t('save') }}
-      </b-button>
-      <b-button variant="secondary" class="close-button" @click="close">
+      </BButton>
+      <BButton variant="secondary" class="close-button" @click="close">
         {{ $t('close') }}
-      </b-button>
-    </b-form-group>
+      </BButton>
+    </BFormGroup>
   </div>
 </template>
 
diff --git a/admin/src/components/input/EditableGroupableLabel.vue b/admin/src/components/input/EditableGroupableLabel.vue
index 21db33607..ca1208180 100644
--- a/admin/src/components/input/EditableGroupableLabel.vue
+++ b/admin/src/components/input/EditableGroupableLabel.vue
@@ -1,7 +1,7 @@
 <template>
-  <b-form-group :label="label" :label-for="idName">
-    <b-form-input :id="idName" v-model="inputValue" @input="updateValue" />
-  </b-form-group>
+  <BFormGroup :label="label" :label-for="idName">
+    <BFormInput :id="idName" v-model="inputValue" @input="updateValue" />
+  </BFormGroup>
 </template>
 
 <script>
diff --git a/admin/src/composables/useToast.js b/admin/src/composables/useToast.js
new file mode 100644
index 000000000..6bc4fb574
--- /dev/null
+++ b/admin/src/composables/useToast.js
@@ -0,0 +1,41 @@
+import { useI18n } from 'vue-i18n'
+import { useToast } from 'bootstrap-vue-next'
+
+export function useAppToast() {
+  const { t } = useI18n()
+  const { show } = useToast()
+  const toastSuccess = (message) => {
+    toast(message, {
+      title: t('success'),
+      variant: 'success',
+    })
+  }
+
+  const toastError = (message) => {
+    toast(message, {
+      title: t('error'),
+      variant: 'danger',
+    })
+  }
+
+  const toast = (message, options = {}) => {
+    if (message.replace) message = message.replace(/^GraphQL error: /, '')
+    options = {
+      solid: true,
+      toaster: 'b-toaster-top-right',
+      headerClass: 'gdd-toaster-title',
+      bodyClass: 'gdd-toaster-body',
+      toastClass: 'gdd-toaster',
+      ...options,
+      body: message,
+    }
+
+    show({ props: { ...options } })
+  }
+
+  return {
+    toastSuccess,
+    toastError,
+    toast,
+  }
+}
diff --git a/admin/src/pages/CommunityStatistic.vue b/admin/src/pages/CommunityStatistic.vue
index 81e087b45..b72bdb5b0 100644
--- a/admin/src/pages/CommunityStatistic.vue
+++ b/admin/src/pages/CommunityStatistic.vue
@@ -1,44 +1,43 @@
 <template>
   <div class="community-statistic">
-    <statistic-table v-model="statistics" />
+    <statistic-table v-if="!loading" :statistics="statistics" />
   </div>
 </template>
-<script>
-import { communityStatistics } from '@/graphql/communityStatistics.js'
-import StatisticTable from '../components/Tables/StatisticTable'
 
-export default {
-  name: 'CommunityStatistic',
-  components: {
-    StatisticTable,
+<script setup>
+import { ref, watch } from 'vue'
+import { useQuery } from '@vue/apollo-composable'
+import { communityStatistics } from '@/graphql/communityStatistics'
+import StatisticTable from '../components/Tables/StatisticTable'
+import { useAppToast } from '@/composables/useToast'
+
+const statistics = ref({
+  totalUsers: null,
+  activeUsers: null,
+  deletedUsers: null,
+  totalGradidoCreated: null,
+  totalGradidoDecayed: null,
+  totalGradidoAvailable: null,
+  totalGradidoUnbookedDecayed: null,
+})
+
+const { result, loading, error } = useQuery(communityStatistics, () => ({}))
+const { toastError } = useAppToast()
+
+watch(
+  result,
+  () => {
+    if (!result.value) return
+    const totals = { ...result.value.communityStatistics.dynamicStatisticsFields }
+    statistics.value = { ...result.value.communityStatistics, ...totals }
+    delete statistics.value.dynamicStatisticsFields
   },
-  data() {
-    return {
-      statistics: {
-        totalUsers: null,
-        activeUsers: null,
-        deletedUsers: null,
-        totalGradidoCreated: null,
-        totalGradidoDecayed: null,
-        totalGradidoAvailable: null,
-        totalGradidoUnbookedDecayed: null,
-      },
-    }
-  },
-  apollo: {
-    CommunityStatistics: {
-      query() {
-        return communityStatistics
-      },
-      update({ communityStatistics }) {
-        const totals = { ...communityStatistics.dynamicStatisticsFields }
-        this.statistics = { ...communityStatistics, ...totals }
-        delete this.statistics.dynamicStatisticsFields
-      },
-      error({ message }) {
-        this.toastError(message)
-      },
-    },
-  },
-}
+  { immediate: true },
+)
+
+watch(error, () => {
+  if (error.value) {
+    toastError(error.value.message)
+  }
+})
 </script>
diff --git a/admin/src/pages/ContributionLinks.vue b/admin/src/pages/ContributionLinks.vue
index 02a148065..91eb06dcc 100644
--- a/admin/src/pages/ContributionLinks.vue
+++ b/admin/src/pages/ContributionLinks.vue
@@ -1,45 +1,31 @@
 <template>
   <div class="contribution-link">
-    <contribution-link
-      :items="items"
-      :count="count"
-      @get-contribution-links="getContributionLinks"
-    />
+    <contribution-link :items="items" :count="count" @get-contribution-links="refetch" />
   </div>
 </template>
-<script>
+
+<script setup>
+import { computed, watch } from 'vue'
+import { useQuery } from '@vue/apollo-composable'
 import { listContributionLinks } from '@/graphql/listContributionLinks.js'
 import ContributionLink from '../components/ContributionLink/ContributionLink'
+import { useAppToast } from '@/composables/useToast'
 
-export default {
-  name: 'ContributionLinks',
-  components: {
-    ContributionLink,
-  },
-  data() {
-    return {
-      items: [],
-      count: 0,
-    }
-  },
-  created() {
-    this.getContributionLinks()
-  },
-  methods: {
-    getContributionLinks() {
-      this.$apollo
-        .query({
-          query: listContributionLinks,
-          fetchPolicy: 'network-only',
-        })
-        .then((result) => {
-          this.count = result.data.listContributionLinks.count
-          this.items = result.data.listContributionLinks.links
-        })
-        .catch(() => {
-          this.toastError('listContributionLinks has no result, use default data')
-        })
-    },
-  },
-}
+const { toastError } = useAppToast()
+
+const { result, error, refetch } = useQuery(listContributionLinks, null, {
+  fetchPolicy: 'network-only',
+})
+
+const items = computed(() => {
+  return result.value?.listContributionLinks?.links
+})
+
+const count = computed(() => {
+  return result.value?.listContributionLinks?.count
+})
+
+watch(error, () => {
+  toastError('listContributionLinks has no result, use default data')
+})
 </script>
diff --git a/admin/src/pages/CreationConfirm.vue b/admin/src/pages/CreationConfirm.vue
index 2b0f13ca0..f88afe016 100644
--- a/admin/src/pages/CreationConfirm.vue
+++ b/admin/src/pages/CreationConfirm.vue
@@ -13,41 +13,46 @@
       </span>
     </p>
     <div>
-      <b-tabs v-model="tabIndex" content-class="mt-3" fill>
-        <b-tab active :title-link-attributes="{ 'data-test': 'open' }">
+      <BTabs v-model="tabIndex" content-class="mt-3" fill>
+        <BTab active :title-link-attributes="{ 'data-test': 'open' }">
           <template #title>
-            <b-icon icon="bell-fill" variant="primary"></b-icon>
+            <IBiBellFill />
+            <!--            <b-icon icon="bell-fill" variant="primary"></b-icon>-->
             {{ $t('contributions.open') }}
-            <b-badge v-if="$store.state.openCreations > 0" variant="danger">
+            <BBadge v-if="$store.state.openCreations > 0" variant="danger">
               {{ $store.state.openCreations }}
-            </b-badge>
+            </BBadge>
           </template>
-        </b-tab>
-        <b-tab :title-link-attributes="{ 'data-test': 'confirmed' }">
+        </BTab>
+        <BTab :title-link-attributes="{ 'data-test': 'confirmed' }">
           <template #title>
-            <b-icon icon="check" variant="success"></b-icon>
+            <IBiCheck />
+            <!--            <b-icon icon="check" variant="success"></b-icon>-->
             {{ $t('contributions.confirms') }}
           </template>
-        </b-tab>
-        <b-tab :title-link-attributes="{ 'data-test': 'denied' }">
+        </BTab>
+        <BTab :title-link-attributes="{ 'data-test': 'denied' }">
           <template #title>
-            <b-icon icon="x-circle" variant="warning"></b-icon>
+            <IBiXCircle />
+            <!--            <b-icon icon="x-circle" variant="warning"></b-icon>-->
             {{ $t('contributions.denied') }}
           </template>
-        </b-tab>
-        <b-tab :title-link-attributes="{ 'data-test': 'deleted' }">
+        </BTab>
+        <BTab :title-link-attributes="{ 'data-test': 'deleted' }">
           <template #title>
-            <b-icon icon="trash" variant="danger"></b-icon>
+            <IBiTrash />
+            <!--            <b-icon icon="trash" variant="danger"></b-icon>-->
             {{ $t('contributions.deleted') }}
           </template>
-        </b-tab>
-        <b-tab :title-link-attributes="{ 'data-test': 'all' }">
+        </BTab>
+        <BTab :title-link-attributes="{ 'data-test': 'all' }">
           <template #title>
-            <b-icon icon="list"></b-icon>
+            <IBiList />
+            <!--            <b-icon icon="list"></b-icon>-->
             {{ $t('contributions.all') }}
           </template>
-        </b-tab>
-      </b-tabs>
+        </BTab>
+      </BTabs>
     </div>
     <open-creations-table
       class="mt-4"
@@ -60,7 +65,7 @@
       @update-contributions="$apollo.queries.ListAllContributions.refetch()"
     />
 
-    <b-pagination
+    <BPagination
       v-model="currentPage"
       pills
       size="lg"
@@ -68,7 +73,7 @@
       :total-rows="rows"
       align="center"
       :hide-ellipsis="true"
-    ></b-pagination>
+    />
 
     <div v-if="overlay" id="overlay" @dblclick="overlay = false">
       <overlay :item="item" @overlay-cancel="overlay = false">
diff --git a/admin/src/pages/FederationVisualize.vue b/admin/src/pages/FederationVisualize.vue
index cab8f0bae..e669df899 100644
--- a/admin/src/pages/FederationVisualize.vue
+++ b/admin/src/pages/FederationVisualize.vue
@@ -2,69 +2,57 @@
   <div class="federation-visualize">
     <div class="d-flex justify-content-between align-items-center mb-3">
       <span class="h2">{{ $t('federation.gradidoInstances') }}</span>
-      <b-button>
-        <b-icon
-          icon="arrow-clockwise"
-          font-scale="2"
-          :animation="animation"
-          data-test="federation-communities-refresh-btn"
-          @click="$apollo.queries.allCommunities.refresh()"
-        ></b-icon>
-      </b-button>
+      <BButton
+        :animation="animation"
+        data-test="federation-communities-refresh-btn"
+        font-scale="2"
+        @click="refetch"
+      >
+        <IBiArrowClockwise />
+        <!--        <b-icon-->
+        <!--          icon="arrow-clockwise"-->
+        <!--          font-scale="2"-->
+        <!--          :animation="animation"-->
+        <!--          data-test="federation-communities-refresh-btn"-->
+        <!--          @click="$apollo.queries.allCommunities.refresh()"-->
+        <!--        ></b-icon>-->
+      </BButton>
     </div>
-    <b-list-group>
-      <b-row>
-        <b-col cols="1" class="ml-1">{{ $t('federation.verified') }}</b-col>
-        <b-col class="ml-3">{{ $t('federation.url') }}</b-col>
-        <b-col class="ml-3">{{ $t('federation.name') }}</b-col>
-        <b-col cols="2">{{ $t('federation.lastAnnouncedAt') }}</b-col>
-        <b-col cols="2">{{ $t('federation.createdAt') }}</b-col>
-      </b-row>
-      <b-list-group-item
+    <BListGroup>
+      <BRow>
+        <BCol cols="1" class="ml-1">{{ $t('federation.verified') }}</BCol>
+        <BCol class="ml-3">{{ $t('federation.url') }}</BCol>
+        <BCol class="ml-3">{{ $t('federation.name') }}</BCol>
+        <BCol cols="2">{{ $t('federation.lastAnnouncedAt') }}</BCol>
+        <BCol cols="2">{{ $t('federation.createdAt') }}</BCol>
+      </BRow>
+      <BListGroupItem
         v-for="item in communities"
         :key="item.publicKey"
         :variant="!item.foreign ? 'primary' : 'warning'"
       >
         <community-visualize-item :item="item" />
-      </b-list-group-item>
-    </b-list-group>
+      </BListGroupItem>
+    </BListGroup>
   </div>
 </template>
-<script>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useQuery } from '@vue/apollo-composable'
 import { allCommunities } from '@/graphql/allCommunities'
+import { useAppToast } from '@/composables/useToast'
 
-import CommunityVisualizeItem from '../components/Federation/CommunityVisualizeItem.vue'
+const communities = ref([])
 
-export default {
-  name: 'FederationVisualize',
-  components: {
-    CommunityVisualizeItem,
-  },
-  data() {
-    return {
-      oldPublicKey: '',
-      communities: [],
-      icon: '',
-    }
-  },
-  computed: {
-    animation() {
-      return this.$apollo.queries.allCommunities.loading ? 'spin' : ''
-    },
-  },
-  apollo: {
-    allCommunities: {
-      fetchPolicy: 'network-only',
-      query() {
-        return allCommunities
-      },
-      update({ allCommunities }) {
-        this.communities = allCommunities
-      },
-      error({ message }) {
-        this.toastError(message)
-      },
-    },
-  },
-}
+const { toastError } = useAppToast()
+
+const { result, loading, refetch, error } = useQuery(allCommunities, () => ({}), {
+  fetchPolicy: 'network-only',
+})
+
+result.value = allCommunities
+if (error) toastError(error.value.message)
+
+const animation = computed(() => (loading.value ? 'spin' : ''))
 </script>
diff --git a/admin/src/pages/UserSearch.vue b/admin/src/pages/UserSearch.vue
index 96a4da363..72fa15934 100644
--- a/admin/src/pages/UserSearch.vue
+++ b/admin/src/pages/UserSearch.vue
@@ -51,6 +51,7 @@ import SearchUserTable from '../components/Tables/SearchUserTable'
 import UserQuery from '../components/UserQuery'
 import { BPagination, BButton } from 'bootstrap-vue-next'
 import { useI18n } from 'vue-i18n'
+import { useAppToast } from '@/composables/useToast'
 
 const { t } = useI18n()
 
@@ -66,6 +67,7 @@ const perPage = ref(25)
 const response = ref()
 
 const { creationLabel } = useCreationMonths()
+const { toastSuccess } = useAppToast()
 
 const { result, refetch } = useQuery(searchUsers, {
   query: criteria.value,
@@ -90,7 +92,7 @@ const updateRoles = (userId, roles) => {
 
 const updateDeletedAt = (userId, deletedAt) => {
   searchResult.value.find((obj) => obj.userId === userId).deletedAt = deletedAt
-  // toastSuccess(deletedAt ? $t('user_deleted') : $t('user_recovered'))
+  toastSuccess(deletedAt ? t('user_deleted') : t('user_recovered'))
 }
 
 const unconfirmedRegisterMails = () => {
diff --git a/admin/vite.config.js b/admin/vite.config.js
index 44e988040..3075c110c 100644
--- a/admin/vite.config.js
+++ b/admin/vite.config.js
@@ -4,11 +4,14 @@ import commonjs from 'vite-plugin-commonjs'
 import Icons from 'unplugin-icons/vite'
 import Components from 'unplugin-vue-components/vite'
 import IconsResolve from 'unplugin-icons/resolver'
+import { BootstrapVueNextResolver } from 'bootstrap-vue-next'
+
 const path = require('path')
 
 export default defineConfig({
   base: '/admin/',
   server: {
+    host: '0.0.0.0',
     port: 8080,
   },
   resolve: {
@@ -30,7 +33,7 @@ export default defineConfig({
       },
     }),
     Components({
-      resolvers: [IconsResolve()],
+      resolvers: [IconsResolve(), BootstrapVueNextResolver()],
       dts: true,
     }),
     Icons({

From e5b5294849b313bf1969e87651ef14abc91848e0 Mon Sep 17 00:00:00 2001
From: MateuszMichalowski
 <79852198+MateuszMichalowski@users.noreply.github.com>
Date: Thu, 25 Jul 2024 23:30:33 +0200
Subject: [PATCH 2/2] feat(admin):  migration of admin creation components
 (#3333)

* feat(admin): Automatic Contributions update

* feat(admin): Automatic Contributions fixed

* feat(admin): Automatic Contributions remove unused code

* feat(admin): Fix lint

* feat(admin): Federation change error handling

* feat(admin): fix lock

* feat(admin): remove unused import

* feat(admin): creation page updates

* feat(admin): remove unused code

* feat(admin): Code clenup, fixed navbar info badge
---
 admin/components.d.ts                         |   6 +
 .../ContributionLink/ContributionLinkForm.vue |   2 +-
 .../ContributionLink/ContributionLinkList.vue |   9 +-
 .../ContributionMessagesFormular.vue          |  72 +-
 .../ContributionMessagesList.vue              |   4 +-
 .../slots/ContributionMessagesListItem.vue    |   4 +-
 admin/src/components/EditCreationFormular.vue |  44 +-
 admin/src/components/NavBar.vue               |  28 +-
 admin/src/components/Overlay.vue              |  84 +-
 .../components/Tables/OpenCreationsTable.vue  |  60 +-
 admin/src/pages/ContributionLinks.vue         |   4 +-
 admin/src/pages/CreationConfirm.vue           | 721 +++++++++---------
 admin/src/pages/FederationVisualize.vue       |  13 +-
 admin/src/router/routes.js                    |   5 +
 14 files changed, 542 insertions(+), 514 deletions(-)

diff --git a/admin/components.d.ts b/admin/components.d.ts
index 3e26eac67..47636873f 100644
--- a/admin/components.d.ts
+++ b/admin/components.d.ts
@@ -62,13 +62,19 @@ declare module 'vue' {
     FigureQrCode: typeof import('./src/components/FigureQrCode.vue')['default']
     IBiArrowClockwise: typeof import('~icons/bi/arrow-clockwise')['default']
     IBiBellFill: typeof import('~icons/bi/bell-fill')['default']
+    IBiChatDots: typeof import('~icons/bi/chat-dots')['default']
     IBiCheck: typeof import('~icons/bi/check')['default']
     IBiEnvelope: typeof import('~icons/bi/envelope')['default']
+    IBiExclamationCircleFill: typeof import('~icons/bi/exclamation-circle-fill')['default']
     IBiEye: typeof import('~icons/bi/eye')['default']
     IBiList: typeof import('~icons/bi/list')['default']
     IBiPencil: typeof import('~icons/bi/pencil')['default']
     IBiPencilFill: typeof import('~icons/bi/pencil-fill')['default']
+    IBiPencilSquare: typeof import('~icons/bi/pencil-square')['default']
+    IBiQuestionDiamond: typeof import('~icons/bi/question-diamond')['default']
+    IBiQuestionSquare: typeof import('~icons/bi/question-square')['default']
     IBiTrash: typeof import('~icons/bi/trash')['default']
+    IBiX: typeof import('~icons/bi/x')['default']
     IBiXCircle: typeof import('~icons/bi/x-circle')['default']
     IIcBaselineClose: typeof import('~icons/ic/baseline-close')['default']
     IOcticonCircleSlash24: typeof import('~icons/octicon/circle-slash24')['default']
diff --git a/admin/src/components/ContributionLink/ContributionLinkForm.vue b/admin/src/components/ContributionLink/ContributionLinkForm.vue
index 332b9be0e..ebcfcf5e3 100644
--- a/admin/src/components/ContributionLink/ContributionLinkForm.vue
+++ b/admin/src/components/ContributionLink/ContributionLinkForm.vue
@@ -81,7 +81,7 @@
           <BFormSelect
             v-model="form.maxPerCycle"
             :options="maxPerCycle"
-            :disabled="disabled"
+            disabled
             class="mb-3"
             size="lg"
           ></BFormSelect>
diff --git a/admin/src/components/ContributionLink/ContributionLinkList.vue b/admin/src/components/ContributionLink/ContributionLinkList.vue
index 2cdba783c..beaa0c9ff 100644
--- a/admin/src/components/ContributionLink/ContributionLinkList.vue
+++ b/admin/src/components/ContributionLink/ContributionLinkList.vue
@@ -28,7 +28,14 @@
       </template>
     </BTable>
 
-    <BModal id="qr-link-modal" ref="my-modal" v-model="qrLinkModal" ok-only hide-header-close>
+    <BModal
+      v-if="modalData"
+      id="qr-link-modal"
+      ref="my-modal"
+      v-model="qrLinkModal"
+      ok-only
+      hide-header-close
+    >
       <BCard header-tag="header" footer-tag="footer">
         <template #header>
           <h6 class="mb-0">{{ modalData ? modalData.name : '' }}</h6>
diff --git a/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue b/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
index 3b6cb62c2..eb6bfc25f 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
+++ b/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
@@ -1,66 +1,66 @@
 <template>
   <div class="contribution-messages-formular">
     <div class="mt-5">
-      <b-form @reset.prevent="onReset" @submit="onSubmit()">
-        <b-form-group>
-          <b-form-checkbox v-model="showResubmissionDate">
+      <BForm @reset.prevent="onReset" @submit="onSubmit()">
+        <BFormGroup>
+          <BFormCheckbox v-model="showResubmissionDate">
             {{ $t('moderator.show-submission-form') }}
-          </b-form-checkbox>
-        </b-form-group>
-        <b-form-group v-if="showResubmissionDate">
-          <b-form-datepicker v-model="resubmissionDate" :min="now"></b-form-datepicker>
+          </BFormCheckbox>
+        </BFormGroup>
+        <BFormGroup v-if="showResubmissionDate">
+          <BFormInput v-model="resubmissionDate" type="date" :min="now"></BFormInput>
           <time-picker v-model="resubmissionTime"></time-picker>
-        </b-form-group>
-        <b-tabs v-model="tabindex" content-class="mt-3" data-test="message-type-tabs">
-          <b-tab active>
+        </BFormGroup>
+        <BTabs v-model="tabindex" content-class="mt-3" data-test="message-type-tabs">
+          <BTab active>
             <template #title>
               <span id="message-tab-title">{{ $t('moderator.message') }}</span>
               <b-tooltip target="message-tab-title" triggers="hover">
                 {{ $t('moderator.message-tooltip') }}
               </b-tooltip>
             </template>
-            <b-form-textarea
+            <BFormTextarea
               id="textarea"
               v-model="form.text"
               :placeholder="$t('contributionLink.memo')"
               rows="3"
-            ></b-form-textarea>
-          </b-tab>
-          <b-tab>
+            ></BFormTextarea>
+          </BTab>
+          <BTab>
             <template #title>
               <span id="notice-tab-title">{{ $t('moderator.notice') }}</span>
-              <b-tooltip target="notice-tab-title" triggers="hover">
+              <BTooltip target="notice-tab-title" triggers="hover">
                 {{ $t('moderator.notice-tooltip') }}
-              </b-tooltip>
+              </BTooltip>
             </template>
-            <b-form-textarea
+            <BFormTextarea
               id="textarea"
               v-model="form.text"
               :placeholder="$t('moderator.notice')"
               rows="3"
-            ></b-form-textarea>
-          </b-tab>
-          <b-tab>
+            ></BFormTextarea>
+          </BTab>
+          <BTab>
             <template #title>
               <span id="memo-tab-title">{{ $t('moderator.memo') }}</span>
-              <b-tooltip target="memo-tab-title" triggers="hover">
+              <BTooltip target="memo-tab-title" triggers="hover">
                 {{ $t('moderator.memo-tooltip') }}
-              </b-tooltip>
+              </BTooltip>
             </template>
-            <b-form-textarea
+            <BFormTextarea
               id="textarea"
               v-model="form.memo"
               :placeholder="$t('contributionLink.memo')"
               rows="3"
-            ></b-form-textarea>
-          </b-tab>
-        </b-tabs>
-        <b-row class="mt-4 mb-6">
-          <b-col>
-            <b-button type="reset" variant="danger">{{ $t('form.cancel') }}</b-button>
-          </b-col>
-          <b-col class="text-right">
-            <b-button
+            ></BFormTextarea>
+          </BTab>
+        </BTabs>
+        <BRow class="mt-4 mb-6">
+          <BCol>
+            <BButton type="reset" variant="danger">{{ $t('form.cancel') }}</BButton>
+          </BCol>
+          <BCol class="text-right">
+            <BButton
               type="submit"
               variant="primary"
               :disabled="disabled"
@@ -68,10 +68,10 @@
               @click.prevent="onSubmit()"
             >
               {{ $t('save') }}
-            </b-button>
-          </b-col>
-        </b-row>
-      </b-form>
+            </BButton>
+          </BCol>
+        </BRow>
+      </BForm>
     </div>
   </div>
 </template>
diff --git a/admin/src/components/ContributionMessages/ContributionMessagesList.vue b/admin/src/components/ContributionMessages/ContributionMessagesList.vue
index 0f4ce3e33..ad396ed15 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesList.vue
+++ b/admin/src/components/ContributionMessages/ContributionMessagesList.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="contribution-messages-list">
-    <b-container>
+    <BContainer>
       <div v-for="message in messages" :key="message.id">
         <contribution-messages-list-item
           :message="message"
           :contribution-user-id="contributionUserId"
         />
       </div>
-    </b-container>
+    </BContainer>
     <div v-if="contributionStatus === 'PENDING' || contributionStatus === 'IN_PROGRESS'">
       <contribution-messages-formular
         :contribution-id="contributionId"
diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
index 21411d3b5..f2261c074 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
@@ -10,7 +10,7 @@
       <span class="ml-2 mr-2" data-test="moderator-name">
         {{ message.userFirstName }} {{ message.userLastName }}
       </span>
-      <b-avatar square variant="warning"></b-avatar>
+      <BAvatar square variant="warning"></BAvatar>
       <small v-if="isHistory">
         <hr />
         {{ $t('moderator.history') }}
@@ -23,7 +23,7 @@
       </small>
     </div>
     <div v-else class="text-left p-2 rounded-sm mb-3" :class="boxClass">
-      <b-avatar variant="info"></b-avatar>
+      <BAvatar variant="info"></BAvatar>
       <span class="ml-2 mr-2" data-test="user-name">
         {{ message.userFirstName }} {{ message.userLastName }}
       </span>
diff --git a/admin/src/components/EditCreationFormular.vue b/admin/src/components/EditCreationFormular.vue
index 73576e422..fb4a650d7 100644
--- a/admin/src/components/EditCreationFormular.vue
+++ b/admin/src/components/EditCreationFormular.vue
@@ -1,32 +1,32 @@
 <template>
   <div class="component-edit-creation-formular">
     <div class="shadow p-3 mb-5 bg-white rounded">
-      <b-form ref="updateCreationForm">
+      <BForm ref="updateCreationForm">
         <div class="ml-4">
           <label>{{ $t('creation_form.select_month') }}</label>
         </div>
-        <b-row class="m-4">
-          <b-form-radio-group
+        <BRow class="m-4">
+          <BFormRadioGroup
             v-model="selected"
             :options="radioOptions"
             value-field="item"
             text-field="name"
             name="month-selection"
             :disabled="true"
-          ></b-form-radio-group>
-        </b-row>
+          ></BFormRadioGroup>
+        </BRow>
         <div class="m-4">
           <label>{{ $t('creation_form.select_value') }}</label>
           <div>
-            <b-input-group prepend="GDD" append=".00">
+            <BInputGroup prepend="GDD" append=".00">
               <b-form-input
                 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">
+            </BInputGroup>
+            <BInputGroup prepend="0" :append="String(rangeMax)" class="mt-3">
               <b-form-input
                 v-model="value"
                 type="range"
@@ -34,30 +34,30 @@
                 :max="rangeMax"
                 step="10"
               ></b-form-input>
-            </b-input-group>
+            </BInputGroup>
           </div>
         </div>
         <div class="m-4">
           <label>{{ $t('creation_form.enter_text') }}</label>
           <div>
-            <b-form-textarea
+            <BFormTextarea
               id="textarea-state"
               v-model="text"
               :state="text.length >= 10"
               placeholder="Mindestens 10 Zeichen eingeben"
               rows="3"
-            ></b-form-textarea>
+            ></BFormTextarea>
           </div>
         </div>
-        <b-row class="m-4">
-          <b-col class="text-left">
-            <b-button type="reset" variant="danger" @click="$refs.updateCreationForm.reset()">
+        <BRow class="m-4">
+          <BCol class="text-left">
+            <BButton type="reset" variant="danger" @click="$refs.updateCreationForm.reset()">
               {{ $t('creation_form.reset') }}
-            </b-button>
-          </b-col>
-          <b-col class="text-center">
+            </BButton>
+          </BCol>
+          <BCol class="text-center">
             <div class="text-right">
-              <b-button
+              <BButton
                 type="button"
                 variant="success"
                 class="test-submit"
@@ -65,11 +65,11 @@
                 @click="submitCreation"
               >
                 {{ $t('creation_form.update_creation') }}
-              </b-button>
+              </BButton>
             </div>
-          </b-col>
-        </b-row>
-      </b-form>
+          </BCol>
+        </BRow>
+      </BForm>
     </div>
   </div>
 </template>
diff --git a/admin/src/components/NavBar.vue b/admin/src/components/NavBar.vue
index a6a1a9988..747b43a21 100644
--- a/admin/src/components/NavBar.vue
+++ b/admin/src/components/NavBar.vue
@@ -13,20 +13,28 @@
 
       <BCollapse id="nav-collapse" is-nav>
         <BNavbarNav>
-          <BNavItem to="/user">{{ $t('navbar.user_search') }}</BNavItem>
-          <BNavItem class="bg-color-creation" to="/creation-confirm">
+          <BNavItem :active="isActive('user')" to="/user">
+            {{ $t('navbar.user_search') }}
+          </BNavItem>
+          <BNavItem
+            :active="isActive('creation-confirm')"
+            class="bg-color-creation"
+            to="/creation-confirm"
+          >
             {{ $t('creation') }}
             <BBadge v-show="openCreations > 0" variant="danger">
-              {{ openCreations.value }}
+              {{ openCreations }}
             </BBadge>
           </BNavItem>
-          <BNavItem to="/contribution-links">
+          <BNavItem to="/contribution-links" :active="isActive('contribution-links')">
             {{ $t('navbar.automaticContributions') }}
           </BNavItem>
-          <BNavItem to="/federation">
+          <BNavItem to="/federation" :active="isActive('federation')">
             {{ $t('navbar.instances') }}
           </BNavItem>
-          <BNavItem to="/statistic">{{ $t('navbar.statistic') }}</BNavItem>
+          <BNavItem to="/statistic" :active="isActive('statistic')">
+            {{ $t('navbar.statistic') }}
+          </BNavItem>
           <BNavItem @click="handleWallet">{{ $t('navbar.my-account') }}</BNavItem>
           <BNavItem @click="handleLogout">{{ $t('navbar.logout') }}</BNavItem>
         </BNavbarNav>
@@ -50,8 +58,10 @@ import {
   BNavbarToggle,
   vBColorMode,
 } from 'bootstrap-vue-next'
+import { useRoute } from 'vue-router'
 
 const store = useStore()
+const route = useRoute()
 
 const openCreations = computed(() => store.state.openCreations)
 
@@ -60,7 +70,7 @@ const { mutate: executeLogout } = useMutation(logout)
 const handleLogout = async () => {
   window.location.assign(CONFIG.WALLET_LOGIN_URL)
   // window.location = CONFIG.WALLET_LOGIN_URL
-  store.dispatch('logout')
+  await store.dispatch('logout')
   await executeLogout()
 }
 
@@ -68,6 +78,10 @@ const handleWallet = () => {
   window.location = CONFIG.WALLET_AUTH_URL.replace('{token}', store.state.token)
   store.dispatch('logout') // logout without redirect
 }
+
+const isActive = (tabRoute) => {
+  return tabRoute === route.name
+}
 </script>
 <style lang="scss" scoped>
 .navbar-brand-img {
diff --git a/admin/src/components/Overlay.vue b/admin/src/components/Overlay.vue
index 658d0c05e..35cb61420 100644
--- a/admin/src/components/Overlay.vue
+++ b/admin/src/components/Overlay.vue
@@ -1,53 +1,57 @@
 <template>
   <div class="component-overlay">
-    <b-jumbotron class="bg-light p-4">
-      <template #header><slot name="title" /></template>
+    <BCard class="bg-light p-4">
+      <h1 class="display-3"><slot name="title" /></h1>
 
-      <template #lead>
-        <b-row class="mt-4">
-          <b-col class="col-3">{{ $t('transactionlist.amount') }}</b-col>
-          <b-col class="h3">
-            <b>{{ item.amount }} {{ $t('GDD') }}</b>
-          </b-col>
-        </b-row>
-        <b-row>
-          <b-col class="col-3">{{ $t('creation_for_month') }}</b-col>
-          <b-col class="h3">
-            {{ $d(new Date(item.contributionDate), 'month') }}
-            {{ $d(new Date(item.contributionDate), 'year') }}
-          </b-col>
-        </b-row>
-        <b-row>
-          <b-col class="col-3">{{ $t('transactionlist.memo') }}</b-col>
-          <b-col>{{ item.memo }}</b-col>
-        </b-row>
-        <b-row class="mt-3">
-          <b-col class="col-3">{{ $t('name') }}</b-col>
-          <b-col>{{ item.firstName }} {{ item.lastName }}</b-col>
-        </b-row>
-        <b-row>
-          <b-col class="col-3">{{ $t('e_mail') }}</b-col>
-          <b-col>{{ item.email }}</b-col>
-        </b-row>
-      </template>
+      <!--      <template #lead>-->
+      <BRow class="mt-4">
+        <BCol class="col-3">{{ $t('transactionlist.amount') }}</BCol>
+        <BCol class="h3">
+          <b>{{ item.amount }} {{ $t('GDD') }}</b>
+        </BCol>
+      </BRow>
+      <BRow>
+        <BCol class="col-3">{{ $t('creation_for_month') }}</BCol>
+        <BCol class="h3">
+          {{ $d(new Date(item.contributionDate), 'month') }}
+          {{ $d(new Date(item.contributionDate), 'year') }}
+        </BCol>
+      </BRow>
+      <BRow>
+        <BCol class="col-3">{{ $t('transactionlist.memo') }}</BCol>
+        <BCol>{{ item.memo }}</BCol>
+      </BRow>
+      <BRow class="mt-3">
+        <BCol class="col-3">{{ $t('name') }}</BCol>
+        <BCol>{{ item.firstName }} {{ item.lastName }}</BCol>
+      </BRow>
+      <BRow>
+        <BCol class="col-3">{{ $t('e_mail') }}</BCol>
+        <BCol>{{ item.email }}</BCol>
+      </BRow>
 
       <hr class="my-4" />
       <slot name="text" />
       <slot name="question" />
 
-      <b-container>
-        <b-row>
-          <b-col>
-            <b-button size="md" variant="info" class="m-3" @click="$emit('overlay-cancel')">
+      <BContainer>
+        <BRow>
+          <BCol>
+            <BButton
+              size="md"
+              variant="info"
+              class="m-3 text-light"
+              @click="$emit('overlay-cancel')"
+            >
               {{ $t('overlay.cancel') }}
-            </b-button>
-          </b-col>
-          <b-col class="text-right">
+            </BButton>
+          </BCol>
+          <BCol class="text-right">
             <slot name="submit-btn" />
-          </b-col>
-        </b-row>
-      </b-container>
-    </b-jumbotron>
+          </BCol>
+        </BRow>
+      </BContainer>
+    </BCard>
   </div>
 </template>
 <script>
diff --git a/admin/src/components/Tables/OpenCreationsTable.vue b/admin/src/components/Tables/OpenCreationsTable.vue
index 8877492e3..36f937ca4 100644
--- a/admin/src/components/Tables/OpenCreationsTable.vue
+++ b/admin/src/components/Tables/OpenCreationsTable.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="open-creations-table">
-    <b-table-lite
+    <BTableLite
       :items="items"
       :fields="fields"
       caption-top
@@ -10,18 +10,22 @@
       :tbody-tr-class="rowClass"
     >
       <template #cell(status)="row">
-        <b-icon :icon="getStatusIcon(row.item.status)"></b-icon>
+        <IBiQuestionSquare v-if="row.item.status === 'IN_PROGRESS'" />
+        <IBiBellFill v-else-if="row.item.status === 'PENDING'" />
+        <IBiCheck v-else-if="row.item.status === 'CONFIRMED'" />
+        <IBiXCircle v-else-if="row.item.status === 'DENIED'" />
+        <IBiTrash v-else-if="row.item.status === 'DELETED'" />
       </template>
       <template #cell(bookmark)="row">
         <div v-if="!myself(row.item)">
-          <b-button
+          <BButton
             variant="danger"
             size="md"
             class="mr-2"
             @click="$emit('show-overlay', row.item, 'delete')"
           >
-            <b-icon icon="trash" variant="light"></b-icon>
-          </b-button>
+            <IBiTrash />
+          </BButton>
         </div>
       </template>
       <template #cell(memo)="row">
@@ -33,7 +37,7 @@
       </template>
       <template #cell(editCreation)="row">
         <div v-if="!myself(row.item)">
-          <b-button
+          <BButton
             v-if="row.item.moderatorId"
             variant="info"
             size="md"
@@ -41,51 +45,51 @@
             class="mr-2"
             @click="rowToggleDetails(row, 0)"
           >
-            <b-icon :icon="row.detailsShowing ? 'x' : 'pencil-square'" aria-label="Help"></b-icon>
-          </b-button>
-          <b-button v-else @click="rowToggleDetails(row, 0)">
-            <b-icon icon="chat-dots"></b-icon>
-            <b-icon
+            <IBiX v-if="row.detailsShowing" />
+            <IBiPencilSquare v-else />
+          </BButton>
+          <BButton v-else @click="rowToggleDetails(row, 0)">
+            <IBiChatDots />
+            <IBiExclamationCircleFill
               v-if="row.item.status === 'PENDING' && row.item.messagesCount > 0"
-              icon="exclamation-circle-fill"
-              variant="warning"
-            ></b-icon>
-            <b-icon
+              style="color: #ffc107"
+            />
+            <IBiQuestionDiamond
               v-if="row.item.status === 'IN_PROGRESS' && row.item.messagesCount > 0"
-              icon="question-diamond"
               variant="warning"
+              style="color: #ffc107"
               class="pl-1"
-            ></b-icon>
-          </b-button>
+            />
+          </BButton>
         </div>
       </template>
       <template #cell(chatCreation)="row">
-        <b-button v-if="row.item.messagesCount > 0" @click="rowToggleDetails(row, 0)">
-          <b-icon icon="chat-dots"></b-icon>
-        </b-button>
+        <BButton v-if="row.item.messagesCount > 0" @click="rowToggleDetails(row, 0)">
+          <IBiChatDots />
+        </BButton>
       </template>
       <template #cell(deny)="row">
         <div v-if="!myself(row.item)">
-          <b-button
+          <BButton
             variant="warning"
             size="md"
             class="mr-2"
             @click="$emit('show-overlay', row.item, 'deny')"
           >
-            <b-icon icon="x" variant="light"></b-icon>
-          </b-button>
+            <IBiX />
+          </BButton>
         </div>
       </template>
       <template #cell(confirm)="row">
         <div v-if="!myself(row.item)">
-          <b-button
+          <BButton
             variant="success"
             size="md"
             class="mr-2"
             @click="$emit('show-overlay', row.item, 'confirm')"
           >
-            <b-icon icon="check" scale="2" variant=""></b-icon>
-          </b-button>
+            <IBiCheck />
+          </BButton>
         </div>
       </template>
       <template #row-details="row">
@@ -122,7 +126,7 @@
           </template>
         </row-details>
       </template>
-    </b-table-lite>
+    </BTableLite>
   </div>
 </template>
 
diff --git a/admin/src/pages/ContributionLinks.vue b/admin/src/pages/ContributionLinks.vue
index 91eb06dcc..80f4e5a1c 100644
--- a/admin/src/pages/ContributionLinks.vue
+++ b/admin/src/pages/ContributionLinks.vue
@@ -18,11 +18,11 @@ const { result, error, refetch } = useQuery(listContributionLinks, null, {
 })
 
 const items = computed(() => {
-  return result.value?.listContributionLinks?.links
+  return result.value?.listContributionLinks?.links || []
 })
 
 const count = computed(() => {
-  return result.value?.listContributionLinks?.count
+  return result.value?.listContributionLinks?.count || 0
 })
 
 watch(error, () => {
diff --git a/admin/src/pages/CreationConfirm.vue b/admin/src/pages/CreationConfirm.vue
index f88afe016..3b6d9049b 100644
--- a/admin/src/pages/CreationConfirm.vue
+++ b/admin/src/pages/CreationConfirm.vue
@@ -16,8 +16,7 @@
       <BTabs v-model="tabIndex" content-class="mt-3" fill>
         <BTab active :title-link-attributes="{ 'data-test': 'open' }">
           <template #title>
-            <IBiBellFill />
-            <!--            <b-icon icon="bell-fill" variant="primary"></b-icon>-->
+            <IBiBellFill style="color: #0d6efd" />
             {{ $t('contributions.open') }}
             <BBadge v-if="$store.state.openCreations > 0" variant="danger">
               {{ $store.state.openCreations }}
@@ -26,29 +25,25 @@
         </BTab>
         <BTab :title-link-attributes="{ 'data-test': 'confirmed' }">
           <template #title>
-            <IBiCheck />
-            <!--            <b-icon icon="check" variant="success"></b-icon>-->
+            <IBiCheck style="color: #198754" />
             {{ $t('contributions.confirms') }}
           </template>
         </BTab>
         <BTab :title-link-attributes="{ 'data-test': 'denied' }">
           <template #title>
-            <IBiXCircle />
-            <!--            <b-icon icon="x-circle" variant="warning"></b-icon>-->
+            <IBiXCircle style="color: #ffc107" />
             {{ $t('contributions.denied') }}
           </template>
         </BTab>
         <BTab :title-link-attributes="{ 'data-test': 'deleted' }">
           <template #title>
-            <IBiTrash />
-            <!--            <b-icon icon="trash" variant="danger"></b-icon>-->
+            <IBiTrash style="color: #dc3545" />
             {{ $t('contributions.deleted') }}
           </template>
         </BTab>
         <BTab :title-link-attributes="{ 'data-test': 'all' }">
           <template #title>
             <IBiList />
-            <!--            <b-icon icon="list"></b-icon>-->
             {{ $t('contributions.all') }}
           </template>
         </BTab>
@@ -62,7 +57,7 @@
       @show-overlay="showOverlay"
       @update-status="updateStatus"
       @reload-contribution="reloadContribution"
-      @update-contributions="$apollo.queries.ListAllContributions.refetch()"
+      @update-contributions="refetch"
     />
 
     <BPagination
@@ -76,7 +71,7 @@
     />
 
     <div v-if="overlay" id="overlay" @dblclick="overlay = false">
-      <overlay :item="item" @overlay-cancel="overlay = false">
+      <Overlay :item="item" @overlay-cancel="overlay = false">
         <template #title>
           {{ $t(overlayTitle) }}
         </template>
@@ -87,15 +82,21 @@
           <p>{{ $t(overlayQuestion) }}</p>
         </template>
         <template #submit-btn>
-          <b-button size="md" :variant="overlayIcon" class="m-3 text-right" @click="overlayEvent">
+          <BButton size="md" :variant="overlayIcon" class="m-3 text-right" @click="overlayEvent">
             {{ $t(overlayBtnText) }}
-          </b-button>
+          </BButton>
         </template>
-      </overlay>
+      </Overlay>
     </div>
   </div>
 </template>
-<script>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useQuery, useMutation } from '@vue/apollo-composable'
+import { useStore } from 'vuex'
+import { useI18n } from 'vue-i18n'
+
 import Overlay from '../components/Overlay'
 import OpenCreationsTable from '../components/Tables/OpenCreationsTable'
 import UserQuery from '../components/UserQuery'
@@ -104,6 +105,7 @@ import { adminDeleteContribution } from '../graphql/adminDeleteContribution'
 import { confirmContribution } from '../graphql/confirmContribution'
 import { denyContribution } from '../graphql/denyContribution'
 import { getContribution } from '../graphql/getContribution'
+import { useAppToast } from '@/composables/useToast'
 
 const FILTER_TAB_MAP = [
   ['IN_PROGRESS', 'PENDING'],
@@ -113,363 +115,346 @@ const FILTER_TAB_MAP = [
   ['IN_PROGRESS', 'PENDING', 'CONFIRMED', 'DENIED', 'DELETED'],
 ]
 
-export default {
-  name: 'CreationConfirm',
-  components: {
-    OpenCreationsTable,
-    Overlay,
-    UserQuery,
+const store = useStore()
+const { t, d } = useI18n()
+const { toastError, toastSuccess } = useAppToast()
+
+const tabIndex = ref(0)
+const items = ref([])
+const overlay = ref(false)
+const item = ref({})
+const variant = ref('confirm')
+const rows = ref(0)
+const currentPage = ref(1)
+const pageSize = ref(25)
+const query = ref('')
+const noHashtag = ref(null)
+const hideResubmissionModel = ref(true)
+
+const fields = computed(
+  () =>
+    [
+      // open contributions
+      [
+        { key: 'bookmark', label: t('delete') },
+        { key: 'deny', label: t('deny') },
+        { key: 'firstName', label: t('firstname') },
+        { key: 'lastName', label: t('lastname') },
+        {
+          key: 'amount',
+          label: t('creation'),
+          formatter: (value) => value + ' GDD',
+        },
+        { key: 'memo', label: t('text'), class: 'text-break' },
+        {
+          key: 'contributionDate',
+          label: t('created'),
+          formatter: (value) => formatDateOrDash(value),
+        },
+        { key: 'moderatorId', label: t('moderator.moderator') },
+        { key: 'editCreation', label: t('chat') },
+        { key: 'confirm', label: t('save') },
+      ],
+      // confirmed contributions
+      [
+        { key: 'firstName', label: t('firstname') },
+        { key: 'lastName', label: t('lastname') },
+        {
+          key: 'amount',
+          label: t('creation'),
+          formatter: (value) => value + ' GDD',
+        },
+        { key: 'memo', label: t('text'), class: 'text-break' },
+        {
+          key: 'contributionDate',
+          label: t('created'),
+          formatter: (value) => formatDateOrDash(value),
+        },
+        {
+          key: 'createdAt',
+          label: t('createdAt'),
+          formatter: (value) => formatDateOrDash(value),
+        },
+        {
+          key: 'confirmedAt',
+          label: t('contributions.confirms'),
+          formatter: (value) => formatDateOrDash(value),
+        },
+        { key: 'confirmedBy', label: t('moderator.moderator') },
+        { key: 'chatCreation', label: t('chat') },
+      ],
+      // denied contributions
+      [
+        { key: 'firstName', label: t('firstname') },
+        { key: 'lastName', label: t('lastname') },
+        {
+          key: 'amount',
+          label: t('creation'),
+          formatter: (value) => value + ' GDD',
+        },
+        { key: 'memo', label: t('text'), class: 'text-break' },
+        {
+          key: 'contributionDate',
+          label: t('created'),
+          formatter: (value) => formatDateOrDash(value),
+        },
+        {
+          key: 'createdAt',
+          label: t('createdAt'),
+          formatter: (value) => formatDateOrDash(value),
+        },
+        {
+          key: 'deniedAt',
+          label: t('contributions.denied'),
+          formatter: (value) => formatDateOrDash(value),
+        },
+        { key: 'deniedBy', label: t('moderator.moderator') },
+        { key: 'chatCreation', label: t('chat') },
+      ],
+      // deleted contributions
+      [
+        { key: 'firstName', label: t('firstname') },
+        { key: 'lastName', label: t('lastname') },
+        {
+          key: 'amount',
+          label: t('creation'),
+          formatter: (value) => value + ' GDD',
+        },
+        { key: 'memo', label: t('text'), class: 'text-break' },
+        {
+          key: 'contributionDate',
+          label: t('created'),
+          formatter: (value) => formatDateOrDash(value),
+        },
+        {
+          key: 'createdAt',
+          label: t('createdAt'),
+          formatter: (value) => formatDateOrDash(value),
+        },
+        {
+          key: 'deletedAt',
+          label: t('contributions.deleted'),
+          formatter: (value) => formatDateOrDash(value),
+        },
+        { key: 'deletedBy', label: t('moderator.moderator') },
+        { key: 'chatCreation', label: t('chat') },
+      ],
+      // all contributions
+      [
+        { key: 'status', label: t('status') },
+        { key: 'firstName', label: t('firstname') },
+        { key: 'lastName', label: t('lastname') },
+        {
+          key: 'amount',
+          label: t('creation'),
+          formatter: (value) => value + ' GDD',
+        },
+        { key: 'memo', label: t('text'), class: 'text-break' },
+        {
+          key: 'contributionDate',
+          label: t('created'),
+          formatter: (value) => formatDateOrDash(value),
+        },
+        {
+          key: 'createdAt',
+          label: t('createdAt'),
+          formatter: (value) => formatDateOrDash(value),
+        },
+        {
+          key: 'confirmedAt',
+          label: t('contributions.confirms'),
+          formatter: (value) => formatDateOrDash(value),
+        },
+        { key: 'confirmedBy', label: t('moderator.moderator') },
+        { key: 'chatCreation', label: t('chat') },
+      ],
+    ][tabIndex.value],
+)
+
+const statusFilter = computed(() => [...FILTER_TAB_MAP[tabIndex.value]])
+
+const overlayTitle = computed(() => `overlay.${variant.value}.title`)
+const overlayText = computed(() => `overlay.${variant.value}.text`)
+const overlayQuestion = computed(() => `overlay.${variant.value}.question`)
+const overlayBtnText = computed(() => `overlay.${variant.value}.yes`)
+const overlayEvent = computed(() => {
+  switch (variant.value) {
+    case 'confirm':
+      return confirmCreation
+    case 'deny':
+      return denyCreation
+    case 'delete':
+      return deleteCreation
+    default:
+      return null
+  }
+})
+const overlayIcon = computed(() => {
+  switch (variant.value) {
+    case 'confirm':
+      return 'success'
+    case 'deny':
+      return 'warning'
+    case 'delete':
+      return 'danger'
+    default:
+      return 'info'
+  }
+})
+const showResubmissionCheckbox = computed(() => tabIndex.value === 0)
+const hideResubmission = computed(() =>
+  showResubmissionCheckbox.value ? hideResubmissionModel.value : false,
+)
+
+watch(tabIndex, () => {
+  currentPage.value = 1
+  items.value = []
+})
+
+const { onResult, onError, result, refetch } = useQuery(
+  adminListContributions,
+  {
+    currentPage: currentPage.value,
+    pageSize: pageSize.value,
+    statusFilter: statusFilter.value,
+    query: query.value,
+    noHashtag: noHashtag.value,
+    hideResubmission: hideResubmission.value,
   },
-  data() {
-    return {
-      tabIndex: 0,
-      items: [],
-      overlay: false,
-      item: {},
-      variant: 'confirm',
-      rows: 0,
-      currentPage: 1,
-      pageSize: 25,
-      query: '',
-      noHashtag: null,
-      hideResubmissionModel: true,
-    }
-  },
-  computed: {
-    fields() {
-      return [
-        [
-          // open contributions
-          { key: 'bookmark', label: this.$t('delete') },
-          { key: 'deny', label: this.$t('deny') },
-          { key: 'firstName', label: this.$t('firstname') },
-          { key: 'lastName', label: this.$t('lastname') },
-          {
-            key: 'amount',
-            label: this.$t('creation'),
-            formatter: (value) => {
-              return value + ' GDD'
-            },
-          },
-          { key: 'memo', label: this.$t('text'), class: 'text-break' },
-          {
-            key: 'contributionDate',
-            label: this.$t('created'),
-            formatter: (value) => {
-              return this.formatDateOrDash(value)
-            },
-          },
-          { key: 'moderatorId', label: this.$t('moderator.moderator') },
-          { key: 'editCreation', label: this.$t('chat') },
-          { key: 'confirm', label: this.$t('save') },
-        ],
-        [
-          // confirmed contributions
-          { key: 'firstName', label: this.$t('firstname') },
-          { key: 'lastName', label: this.$t('lastname') },
-          {
-            key: 'amount',
-            label: this.$t('creation'),
-            formatter: (value) => {
-              return value + ' GDD'
-            },
-          },
-          { key: 'memo', label: this.$t('text'), class: 'text-break' },
-          {
-            key: 'contributionDate',
-            label: this.$t('created'),
-            formatter: (value) => {
-              return this.formatDateOrDash(value)
-            },
-          },
-          {
-            key: 'createdAt',
-            label: this.$t('createdAt'),
-            formatter: (value) => {
-              return this.formatDateOrDash(value)
-            },
-          },
-          {
-            key: 'confirmedAt',
-            label: this.$t('contributions.confirms'),
-            formatter: (value) => {
-              return this.formatDateOrDash(value)
-            },
-          },
-          { key: 'confirmedBy', label: this.$t('moderator.moderator') },
-          { key: 'chatCreation', label: this.$t('chat') },
-        ],
-        [
-          // denied contributions
-          { key: 'firstName', label: this.$t('firstname') },
-          { key: 'lastName', label: this.$t('lastname') },
-          {
-            key: 'amount',
-            label: this.$t('creation'),
-            formatter: (value) => {
-              return value + ' GDD'
-            },
-          },
-          { key: 'memo', label: this.$t('text'), class: 'text-break' },
-          {
-            key: 'contributionDate',
-            label: this.$t('created'),
-            formatter: (value) => {
-              return this.formatDateOrDash(value)
-            },
-          },
-          {
-            key: 'createdAt',
-            label: this.$t('createdAt'),
-            formatter: (value) => {
-              return this.formatDateOrDash(value)
-            },
-          },
-          {
-            key: 'deniedAt',
-            label: this.$t('contributions.denied'),
-            formatter: (value) => {
-              return this.formatDateOrDash(value)
-            },
-          },
-          { key: 'deniedBy', label: this.$t('moderator.moderator') },
-          { key: 'chatCreation', label: this.$t('chat') },
-        ],
-        [
-          // deleted contributions
-          { key: 'firstName', label: this.$t('firstname') },
-          { key: 'lastName', label: this.$t('lastname') },
-          {
-            key: 'amount',
-            label: this.$t('creation'),
-            formatter: (value) => {
-              return value + ' GDD'
-            },
-          },
-          { key: 'memo', label: this.$t('text'), class: 'text-break' },
-          {
-            key: 'contributionDate',
-            label: this.$t('created'),
-            formatter: (value) => {
-              return this.formatDateOrDash(value)
-            },
-          },
-          {
-            key: 'createdAt',
-            label: this.$t('createdAt'),
-            formatter: (value) => {
-              return this.formatDateOrDash(value)
-            },
-          },
-          {
-            key: 'deletedAt',
-            label: this.$t('contributions.deleted'),
-            formatter: (value) => {
-              return this.formatDateOrDash(value)
-            },
-          },
-          { key: 'deletedBy', label: this.$t('moderator.moderator') },
-          { key: 'chatCreation', label: this.$t('chat') },
-        ],
-        [
-          // all contributions
-          { key: 'status', label: this.$t('status') },
-          { key: 'firstName', label: this.$t('firstname') },
-          { key: 'lastName', label: this.$t('lastname') },
-          {
-            key: 'amount',
-            label: this.$t('creation'),
-            formatter: (value) => {
-              return value + ' GDD'
-            },
-          },
-          { key: 'memo', label: this.$t('text'), class: 'text-break' },
-          {
-            key: 'contributionDate',
-            label: this.$t('created'),
-            formatter: (value) => {
-              return this.formatDateOrDash(value)
-            },
-          },
-          {
-            key: 'createdAt',
-            label: this.$t('createdAt'),
-            formatter: (value) => {
-              return this.formatDateOrDash(value)
-            },
-          },
-          {
-            key: 'confirmedAt',
-            label: this.$t('contributions.confirms'),
-            formatter: (value) => {
-              return this.formatDateOrDash(value)
-            },
-          },
-          { key: 'confirmedBy', label: this.$t('moderator.moderator') },
-          { key: 'chatCreation', label: this.$t('chat') },
-        ],
-      ][this.tabIndex]
-    },
-    statusFilter() {
-      return FILTER_TAB_MAP[this.tabIndex]
-    },
-    overlayTitle() {
-      return `overlay.${this.variant}.title`
-    },
-    overlayText() {
-      return `overlay.${this.variant}.text`
-    },
-    overlayQuestion() {
-      return `overlay.${this.variant}.question`
-    },
-    overlayBtnText() {
-      return `overlay.${this.variant}.yes`
-    },
-    overlayEvent() {
-      return this[`${this.variant}Creation`]
-    },
-    overlayIcon() {
-      switch (this.variant) {
-        case 'confirm':
-          return 'success'
-        case 'deny':
-          return 'warning'
-        case 'delete':
-          return 'danger'
-        default:
-          return 'info'
-      }
-    },
-    showResubmissionCheckbox() {
-      return this.tabIndex === 0
-    },
-    hideResubmission() {
-      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() {
-        return adminListContributions
-      },
-      variables() {
-        return {
-          currentPage: this.currentPage,
-          pageSize: this.pageSize,
-          statusFilter: this.statusFilter,
-          query: this.query,
-          noHashtag: this.noHashtag,
-          hideResubmission: this.hideResubmission,
-        }
-      },
-      fetchPolicy: 'no-cache',
-      update({ adminListContributions }) {
-        this.rows = adminListContributions.contributionCount
-        this.items = adminListContributions.contributionList
-        if (this.statusFilter === FILTER_TAB_MAP[0]) {
-          this.$store.commit('setOpenCreations', adminListContributions.contributionCount)
-        }
-      },
-      error({ message }) {
-        this.toastError(message)
-      },
-    },
+  {
+    fetchPolicy: 'no-cache',
   },
+)
+
+watch([statusFilter, query, noHashtag, hideResubmission], () => {
+  refetch({
+    currentPage: currentPage.value,
+    pageSize: pageSize.value,
+    statusFilter: statusFilter.value,
+    query: query.value,
+    noHashtag: noHashtag.value,
+    hideResubmission: hideResubmission.value,
+  })
+})
+
+onError((error) => {
+  toastError(error.message)
+})
+
+onResult(() => {
+  rows.value = result.value.adminListContributions.contributionCount
+  items.value = result.value.adminListContributions.contributionList
+  if (statusFilter.value === FILTER_TAB_MAP[0]) {
+    store.commit('setOpenCreations', result.adminListContributions.contributionCount)
+  }
+})
+
+const {
+  mutate: deleteMutation,
+  onDone: onDeleteDone,
+  onError: onDeleteError,
+} = useMutation(adminDeleteContribution)
+
+onDeleteDone(() => {
+  overlay.value = false
+  updatePendingCreations(item.value.id)
+  toastSuccess(t('creation_form.toasted_delete'))
+})
+
+onDeleteError((error) => {
+  overlay.value = false
+  toastError(error.message)
+})
+
+const {
+  mutate: denyMutation,
+  onDone: onDenayDone,
+  onError: onDenayError,
+} = useMutation(denyContribution)
+
+onDenayDone(() => {
+  overlay.value = false
+  updatePendingCreations(item.value.id)
+  toastSuccess(t('creation_form.toasted_denied'))
+})
+
+onDenayError((error) => {
+  overlay.value = false
+  toastError(error.message)
+})
+
+const {
+  mutate: confirmMutation,
+  onDone: onConfirmationDone,
+  onError: onConfirmationError,
+} = useMutation(confirmContribution)
+
+onConfirmationDone(() => {
+  overlay.value = false
+  updatePendingCreations(item.value.id)
+  toastSuccess(t('creation_form.toasted_created'))
+})
+
+onConfirmationError((error) => {
+  overlay.value = false
+  toastError(error.message)
+})
+
+const reloadContribution = (id) => {
+  useQuery(getContribution, { id })
+    .onResult((result) => {
+      const contribution = result.data.contribution
+      const index = items.value.findIndex((obj) => obj.id === contribution.id)
+      items.value[index] = contribution
+    })
+    .onError((error) => {
+      overlay.value = false
+      toastError(error.message)
+    })
+}
+
+const deleteCreation = () => {
+  deleteMutation({
+    id: item.value.id,
+  })
+}
+
+const denyCreation = () => {
+  denyMutation({
+    id: item.value.id,
+  })
+}
+
+const confirmCreation = () => {
+  confirmMutation({
+    id: item.value.id,
+  })
+}
+
+const updatePendingCreations = (id) => {
+  items.value = items.value.filter((obj) => obj.id !== id)
+  store.commit('openCreationsMinus', 1)
+}
+
+const showOverlay = (selectedItem, selectedVariant) => {
+  overlay.value = true
+  item.value = selectedItem
+  variant.value = selectedVariant
+}
+
+const updateStatus = (id) => {
+  const target = items.value.find((obj) => obj.id === id)
+  if (target) {
+    target.messagesCount++
+    target.status = 'IN_PROGRESS'
+  }
+}
+
+const formatDateOrDash = (value) => {
+  return value ? d(new Date(value), 'short') : '—'
 }
 </script>
+
 <style>
 #overlay {
   position: fixed;
diff --git a/admin/src/pages/FederationVisualize.vue b/admin/src/pages/FederationVisualize.vue
index e669df899..792f7834d 100644
--- a/admin/src/pages/FederationVisualize.vue
+++ b/admin/src/pages/FederationVisualize.vue
@@ -38,21 +38,24 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { computed, watch } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
 import { allCommunities } from '@/graphql/allCommunities'
 import { useAppToast } from '@/composables/useToast'
 
-const communities = ref([])
-
 const { toastError } = useAppToast()
 
 const { result, loading, refetch, error } = useQuery(allCommunities, () => ({}), {
   fetchPolicy: 'network-only',
 })
 
-result.value = allCommunities
-if (error) toastError(error.value.message)
+const communities = computed(() => {
+  return result.value?.allCommunities || []
+})
+
+watch(error, () => {
+  if (error.value) toastError(error.value.message)
+})
 
 const animation = computed(() => (loading.value ? 'spin' : ''))
 </script>
diff --git a/admin/src/router/routes.js b/admin/src/router/routes.js
index c343db253..7342a0b6b 100644
--- a/admin/src/router/routes.js
+++ b/admin/src/router/routes.js
@@ -8,6 +8,7 @@ const routes = [
   },
   {
     path: '/statistic',
+    name: 'statistic',
     component: () => import('@/pages/CommunityStatistic.vue'),
   },
   {
@@ -17,18 +18,22 @@ const routes = [
   },
   {
     path: '/user',
+    name: 'user',
     component: () => import('@/pages/UserSearch.vue'),
   },
   {
     path: '/creation-confirm',
+    name: 'creation-confirm',
     component: () => import('@/pages/CreationConfirm.vue'),
   },
   {
     path: '/contribution-links',
+    name: 'contribution-links',
     component: () => import('@/pages/ContributionLinks.vue'),
   },
   {
     path: '/federation',
+    name: 'federation',
     component: () => import('@/pages/FederationVisualize.vue'),
   },
   {