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] 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'),
   },
   {