From 263aedae23f2e9dc8457ef91626e618096e7f97c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Micha=C5=82owski?=
 <mateusz.michalowski@monterail.com>
Date: Fri, 2 Aug 2024 16:21:19 +0200
Subject: [PATCH] fix(frontend): WiP migration

---
 frontend/src/components/CommunitySwitch.vue   |  14 +-
 .../Contributions/ContributionForm.vue        |  29 +-
 .../GddSend/TransactionConfirmationLink.vue   |  70 +-
 .../components/GddSend/TransactionForm.vue    | 130 ++--
 frontend/src/components/Inputs/InputHour.vue  | 186 +++--
 .../src/components/Inputs/InputTextarea.vue   | 173 +++--
 frontend/src/components/Transaction.vue       |  28 +-
 .../src/components/TransactionCollapse.vue    |  20 +-
 frontend/src/layouts/DashboardLayout.vue      |   5 +-
 frontend/src/pages/Circles.vue                |  20 +-
 frontend/src/pages/Community.vue              | 728 ++++++++++++------
 frontend/src/pages/InfoStatistic.vue          | 182 ++---
 12 files changed, 950 insertions(+), 635 deletions(-)

diff --git a/frontend/src/components/CommunitySwitch.vue b/frontend/src/components/CommunitySwitch.vue
index 4ff3d9781..e46c94aaa 100644
--- a/frontend/src/components/CommunitySwitch.vue
+++ b/frontend/src/components/CommunitySwitch.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="community-switch">
     <div v-if="!validCommunityIdentifier">
-      <b-dropdown no-flip :text="value.name">
-        <b-dropdown-item
+      <BDropdown no-flip :text="value.name">
+        <BDropdownItem
           v-for="community in communities"
           @click.prevent="updateCommunity(community)"
           :key="community.id"
@@ -10,13 +10,13 @@
           :active="value.uuid === community.uuid"
         >
           {{ community.name }}
-        </b-dropdown-item>
-      </b-dropdown>
+        </BDropdownItem>
+      </BDropdown>
     </div>
     <div v-else class="mb-4 mt-2">
-      <b-row>
-        <b-col class="font-weight-bold" :title="value.description">{{ value.name }}</b-col>
-      </b-row>
+      <BRow>
+        <BCol class="font-weight-bold" :title="value.description">{{ value.name }}</BCol>
+      </BRow>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue
index 8b2113e5d..cc7a4f669 100644
--- a/frontend/src/components/Contributions/ContributionForm.vue
+++ b/frontend/src/components/Contributions/ContributionForm.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="contribution-form">
-    <b-form
+    <BForm
       ref="form"
       @submit.prevent="submit"
       class="form-style p-3 bg-white appBoxShadow gradido-border-radius"
     >
       <label>{{ $t('contribution.selectDate') }}</label>
-      <b-form-datepicker
+      <BFormInput
         id="contribution-date"
         v-model="form.date"
         :locale="$i18n.locale"
@@ -17,10 +17,11 @@
         :label-no-date-selected="$t('contribution.noDateSelected')"
         required
         :no-flip="true"
+        type="date"
       >
         <template #nav-prev-year><span></span></template>
         <template #nav-next-year><span></span></template>
-      </b-form-datepicker>
+      </BFormInput>
 
       <div v-if="showMessage" class="p-3" data-test="contribtion-message">
         {{ noOpenCreation }}
@@ -58,9 +59,9 @@
           typ="ContributionForm"
         ></input-amount>
 
-        <b-row class="mt-5">
-          <b-col cols="12" lg="6">
-            <b-button
+        <BRow class="mt-5">
+          <BCol cols="12" lg="6">
+            <BButton
               block
               type="reset"
               variant="secondary"
@@ -68,10 +69,10 @@
               data-test="button-cancel"
             >
               {{ $t('form.cancel') }}
-            </b-button>
-          </b-col>
-          <b-col cols="12" lg="6" class="text-right mt-4 mt-lg-0">
-            <b-button
+            </BButton>
+          </BCol>
+          <BCol cols="12" lg="6" class="text-right mt-4 mt-lg-0">
+            <BButton
               block
               type="submit"
               variant="gradido"
@@ -79,11 +80,11 @@
               data-test="button-submit"
             >
               {{ form.id ? $t('form.change') : $t('contribution.submit') }}
-            </b-button>
-          </b-col>
-        </b-row>
+            </BButton>
+          </BCol>
+        </BRow>
       </div>
-    </b-form>
+    </BForm>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/GddSend/TransactionConfirmationLink.vue b/frontend/src/components/GddSend/TransactionConfirmationLink.vue
index 1600a4966..984d27e2d 100644
--- a/frontend/src/components/GddSend/TransactionConfirmationLink.vue
+++ b/frontend/src/components/GddSend/TransactionConfirmationLink.vue
@@ -2,47 +2,47 @@
   <div class="transaction-confirm-link">
     <div class="bg-white appBoxShadow gradido-border-radius p-3">
       <div class="h3 mb-4">{{ $t('gdd_per_link.header') }}</div>
-      <b-row class="mt-5">
-        <b-col offset="2">
+      <BRow class="mt-5">
+        <BCol offset="2">
           <div class="mt-3 h5">{{ $t('form.memo') }}</div>
           <div>{{ memo }}</div>
-        </b-col>
-        <b-col cols="3">
+        </BCol>
+        <BCol cols="3">
           <div class="small">{{ $t('send_gdd') }}</div>
           <div>{{ amount | GDD }}</div>
-        </b-col>
-      </b-row>
+        </BCol>
+      </BRow>
 
-      <b-row class="mt-5 pr-3 text-color-gdd-yellow h3">
-        <b-col cols="2" class="text-right">
+      <BRow class="mt-5 pr-3 text-color-gdd-yellow h3">
+        <BCol cols="2" class="text-right">
           <b-icon class="text-color-gdd-yellow" icon="droplet-half"></b-icon>
-        </b-col>
-        <b-col>{{ $t('advanced-calculation') }}</b-col>
-      </b-row>
-      <b-row class="pr-3" offset="2">
-        <b-col offset="2">{{ $t('form.current_balance') }}</b-col>
-        <b-col>{{ balance | GDD }}</b-col>
-      </b-row>
-      <b-row class="pr-3">
-        <b-col offset="2">
+        </BCol>
+        <BCol>{{ $t('advanced-calculation') }}</BCol>
+      </BRow>
+      <BRow class="pr-3" offset="2">
+        <BCol offset="2">{{ $t('form.current_balance') }}</BCol>
+        <BCol>{{ balance | GDD }}</BCol>
+      </BRow>
+      <BRow class="pr-3">
+        <BCol offset="2">
           <strong>{{ $t('form.your_amount') }}</strong>
-        </b-col>
-        <b-col class="borderbottom">
+        </BCol>
+        <BCol class="borderbottom">
           <strong>{{ (amount * -1) | GDD }}</strong>
-        </b-col>
-      </b-row>
-      <b-row class="pr-3">
-        <b-col offset="2">{{ $t('form.new_balance') }}</b-col>
-        <b-col>{{ (balance - amount) | GDD }}</b-col>
-      </b-row>
-      <b-row class="mt-5">
-        <b-col cols="12" md="6" lg="6">
-          <b-button block @click="$emit('on-back')" class="mb-3 mb-md-0 mb-lg-0">
+        </BCol>
+      </BRow>
+      <BRow class="pr-3">
+        <BCol offset="2">{{ $t('form.new_balance') }}</BCol>
+        <BCol>{{ (balance - amount) | GDD }}</BCol>
+      </BRow>
+      <BRow class="mt-5">
+        <BCol cols="12" md="6" lg="6">
+          <BButton block @click="$emit('on-back')" class="mb-3 mb-md-0 mb-lg-0">
             {{ $t('back') }}
-          </b-button>
-        </b-col>
-        <b-col cols="12" md="6" lg="6" class="text-lg-right">
-          <b-button
+          </BButton>
+        </BCol>
+        <BCol cols="12" md="6" lg="6" class="text-lg-right">
+          <BButton
             block
             class="send-button"
             variant="gradido"
@@ -50,9 +50,9 @@
             @click="$emit('send-transaction')"
           >
             {{ $t('form.generate_now') }}
-          </b-button>
-        </b-col>
-      </b-row>
+          </BButton>
+        </BCol>
+      </BRow>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/GddSend/TransactionForm.vue b/frontend/src/components/GddSend/TransactionForm.vue
index 4f53c1de3..ec240d714 100644
--- a/frontend/src/components/GddSend/TransactionForm.vue
+++ b/frontend/src/components/GddSend/TransactionForm.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="transaction-form">
-    <b-row>
-      <b-col cols="12">
-        <b-card class="appBoxShadow gradido-border-radius" body-class="p-4">
+    <BRow>
+      <BCol cols="12">
+        <BCard class="appBoxShadow gradido-border-radius" body-class="p-4">
           <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
-            <b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset">
-              <b-form-radio-group v-model="radioSelected">
-                <b-row class="mb-4">
-                  <b-col cols="12" lg="6">
-                    <b-row class="bg-248 gradido-border-radius pt-lg-2 mr-lg-2">
-                      <b-col cols="10" @click="radioSelected = sendTypes.send" class="pointer">
+            <BForm role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset">
+              <BFormRadioGroup v-model="radioSelected">
+                <BRow class="mb-4">
+                  <BCol cols="12" lg="6">
+                    <BRow class="bg-248 gradido-border-radius pt-lg-2 mr-lg-2">
+                      <BCol cols="10" @click="radioSelected = sendTypes.send" class="pointer">
                         {{ $t('send_gdd') }}
-                      </b-col>
-                      <b-col cols="2">
+                      </BCol>
+                      <BCol cols="2">
                         <b-form-radio
                           name="shipping"
                           size="lg"
@@ -20,49 +20,49 @@
                           stacked
                           class="custom-radio-button pointer"
                         ></b-form-radio>
-                      </b-col>
-                    </b-row>
-                  </b-col>
-                  <b-col>
-                    <b-row class="bg-248 gradido-border-radius pt-lg-2 ml-lg-2 mt-2 mt-lg-0">
-                      <b-col cols="10" @click="radioSelected = sendTypes.link" class="pointer">
+                      </BCol>
+                    </BRow>
+                  </BCol>
+                  <BCol>
+                    <BRow class="bg-248 gradido-border-radius pt-lg-2 ml-lg-2 mt-2 mt-lg-0">
+                      <BCol cols="10" @click="radioSelected = sendTypes.link" class="pointer">
                         {{ $t('send_per_link') }}
-                      </b-col>
-                      <b-col cols="2" class="pointer">
-                        <b-form-radio
+                      </BCol>
+                      <BCol cols="2" class="pointer">
+                        <BFormRadio
                           name="shipping"
                           :value="sendTypes.link"
                           size="lg"
                           class="custom-radio-button"
-                        ></b-form-radio>
-                      </b-col>
-                    </b-row>
-                  </b-col>
-                </b-row>
-              </b-form-radio-group>
+                        />
+                      </BCol>
+                    </BRow>
+                  </BCol>
+                </BRow>
+              </BFormRadioGroup>
               <div class="mt-4 mb-4" v-if="radioSelected === sendTypes.link">
                 <h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
                 <div>
                   {{ $t('gdd_per_link.choose-amount') }}
                 </div>
               </div>
-              <b-row>
-                <b-col>
-                  <b-row>
-                    <b-col class="mb-4" cols="12" v-if="radioSelected === sendTypes.send">
-                      <b-row>
-                        <b-col>{{ $t('form.recipientCommunity') }}</b-col>
-                      </b-row>
-                      <b-row>
-                        <b-col class="font-weight-bold">
+              <BRow>
+                <BCol>
+                  <BRow>
+                    <BCol class="mb-4" cols="12" v-if="radioSelected === sendTypes.send">
+                      <BRow>
+                        <BCol>{{ $t('form.recipientCommunity') }}</BCol>
+                      </BRow>
+                      <BRow>
+                        <BCol class="font-weight-bold">
                           <community-switch
                             v-model="form.targetCommunity"
                             :disabled="isBalanceDisabled"
                           />
-                        </b-col>
-                      </b-row>
-                    </b-col>
-                    <b-col cols="12" v-if="radioSelected === sendTypes.send">
+                        </BCol>
+                      </BRow>
+                    </BCol>
+                    <BCol cols="12" v-if="radioSelected === sendTypes.send">
                       <div v-if="!userIdentifier">
                         <input-identifier
                           :name="$t('form.recipient')"
@@ -74,15 +74,15 @@
                         />
                       </div>
                       <div v-else class="mb-4">
-                        <b-row>
-                          <b-col>{{ $t('form.recipient') }}</b-col>
-                        </b-row>
-                        <b-row>
-                          <b-col class="font-weight-bold">{{ userName }}</b-col>
-                        </b-row>
+                        <BRow>
+                          <BCol>{{ $t('form.recipient') }}</BCol>
+                        </BRow>
+                        <BRow>
+                          <BCol class="font-weight-bold">{{ userName }}</BCol>
+                        </BRow>
                       </div>
-                    </b-col>
-                    <b-col cols="12" lg="6">
+                    </BCol>
+                    <BCol cols="12" lg="6">
                       <input-amount
                         v-model="form.amount"
                         :name="$t('form.amount')"
@@ -92,13 +92,13 @@
                         typ="TransactionForm"
                         :disabled="isBalanceDisabled"
                       ></input-amount>
-                    </b-col>
-                  </b-row>
-                </b-col>
-              </b-row>
+                    </BCol>
+                  </BRow>
+                </BCol>
+              </BRow>
 
-              <b-row>
-                <b-col>
+              <BRow>
+                <BCol>
                   <input-textarea
                     v-model="form.memo"
                     :name="$t('form.message')"
@@ -107,13 +107,13 @@
                     :rules="{ required: true, min: 5, max: 255 }"
                     :disabled="isBalanceDisabled"
                   />
-                </b-col>
-              </b-row>
+                </BCol>
+              </BRow>
               <div v-if="!!isBalanceDisabled" class="text-danger mt-5">
                 {{ $t('form.no_gdd_available') }}
               </div>
-              <b-row v-else class="test-buttons mt-3">
-                <b-col cols="12" md="6" lg="6">
+              <BRow v-else class="test-buttons mt-3">
+                <BCol cols="12" md="6" lg="6">
                   <b-button
                     block
                     type="reset"
@@ -123,18 +123,18 @@
                   >
                     {{ $t('form.reset') }}
                   </b-button>
-                </b-col>
-                <b-col cols="12" md="6" lg="6" class="text-lg-right">
+                </BCol>
+                <BCol cols="12" md="6" lg="6" class="text-lg-right">
                   <b-button block type="submit" variant="gradido">
                     {{ $t('form.check_now') }}
                   </b-button>
-                </b-col>
-              </b-row>
-            </b-form>
+                </BCol>
+              </BRow>
+            </BForm>
           </validation-observer>
-        </b-card>
-      </b-col>
-    </b-row>
+        </BCard>
+      </BCol>
+    </BRow>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/Inputs/InputHour.vue b/frontend/src/components/Inputs/InputHour.vue
index b6e685865..2e632d6a3 100644
--- a/frontend/src/components/Inputs/InputHour.vue
+++ b/frontend/src/components/Inputs/InputHour.vue
@@ -1,61 +1,141 @@
 <template>
+  <!--  <div class="input-hour">-->
+  <!--    <validation-provider-->
+  <!--      tag="div"-->
+  <!--      :rules="rules"-->
+  <!--      :name="name"-->
+  <!--      v-slot="{ valid, validated, ariaInput }"-->
+  <!--    >-->
+  <!--      <b-form-group :label="label" :label-for="labelFor">-->
+  <!--        <b-form-input-->
+  <!--          v-model="currentValue"-->
+  <!--          v-bind="ariaInput"-->
+  <!--          :id="labelFor"-->
+  <!--          :name="name"-->
+  <!--          :placeholder="placeholder"-->
+  <!--          type="number"-->
+  <!--          :state="validated ? valid : false"-->
+  <!--          step="0.25"-->
+  <!--          min="0"-->
+  <!--          :max="validMaxTime"-->
+  <!--          class="bg-248"-->
+  <!--        ></b-form-input>-->
+  <!--      </b-form-group>-->
+  <!--    </validation-provider>-->
+  <!--  </div>-->
   <div class="input-hour">
-    <validation-provider
-      tag="div"
-      :rules="rules"
-      :name="name"
-      v-slot="{ valid, validated, ariaInput }"
-    >
-      <b-form-group :label="label" :label-for="labelFor">
-        <b-form-input
-          v-model="currentValue"
-          v-bind="ariaInput"
-          :id="labelFor"
-          :name="name"
-          :placeholder="placeholder"
-          type="number"
-          :state="validated ? valid : false"
-          step="0.25"
-          min="0"
-          :max="validMaxTime"
-          class="bg-248"
-        ></b-form-input>
-      </b-form-group>
-    </validation-provider>
+    <BFormGroup :label="label" :label-for="labelFor">
+      <BFormInput
+        :model-value="currentValue"
+        @update:modelValue="currentValue"
+        v-bind="ariaInput"
+        :id="labelFor"
+        :name="name"
+        :placeholder="placeholder"
+        type="number"
+        :state="meta.valid"
+        step="0.25"
+        min="0"
+        :max="validMaxTime"
+        class="bg-248"
+      />
+    </BFormGroup>
   </div>
 </template>
-<script>
-export default {
-  name: 'InputHour',
-  props: {
-    rules: {
-      type: Object,
-      default: () => {},
-    },
-    name: { type: String, required: true },
-    label: { type: String, required: true },
-    placeholder: { type: String, required: true },
-    value: { type: Number, required: true, default: 0 },
-    validMaxTime: { type: Number, required: true },
+<!--<script>-->
+<!--export default {-->
+<!--  name: 'InputHour',-->
+<!--  props: {-->
+<!--    rules: {-->
+<!--      type: Object,-->
+<!--      default: () => {},-->
+<!--    },-->
+<!--    name: { type: String, required: true },-->
+<!--    label: { type: String, required: true },-->
+<!--    placeholder: { type: String, required: true },-->
+<!--    value: { type: Number, required: true, default: 0 },-->
+<!--    validMaxTime: { type: Number, required: true },-->
+<!--  },-->
+<!--  data() {-->
+<!--    return {-->
+<!--      currentValue: 0,-->
+<!--    }-->
+<!--  },-->
+<!--  computed: {-->
+<!--    labelFor() {-->
+<!--      return this.name + '-input-field'-->
+<!--    },-->
+<!--  },-->
+<!--  watch: {-->
+<!--    currentValue() {-->
+<!--      this.$emit('input', Number(this.currentValue))-->
+<!--    },-->
+<!--    value() {-->
+<!--      if (this.value !== this.currentValue) this.currentValue = this.value-->
+<!--      this.$emit('updateAmount', this.currentValue)-->
+<!--    },-->
+<!--  },-->
+<!--}-->
+<!--</script>-->
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useField } from 'vee-validate'
+
+// Props
+const props = defineProps({
+  rules: {
+    type: Object,
+    default: () => ({}),
   },
-  data() {
-    return {
-      currentValue: 0,
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+  validMaxTime: {
+    type: Number,
+    required: true,
+  },
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue', 'updateAmount'])
+
+// Use vee-validate's useField
+const { value: currentValue, meta } = useField(props.name, props.rules, {
+  initialValue: props.modelValue,
+})
+
+// Computed
+const labelFor = computed(() => `${props.name}-input-field`)
+
+// Watch for external value changes
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue !== currentValue.value) {
+      currentValue.value = newValue
+      emit('updateAmount', newValue)
     }
   },
-  computed: {
-    labelFor() {
-      return this.name + '-input-field'
-    },
-  },
-  watch: {
-    currentValue() {
-      this.$emit('input', Number(this.currentValue))
-    },
-    value() {
-      if (this.value !== this.currentValue) this.currentValue = this.value
-      this.$emit('updateAmount', this.currentValue)
-    },
-  },
-}
+)
+
+// Watch for internal value changes
+watch(currentValue, (newValue) => {
+  emit('update:modelValue', Number(newValue))
+  emit('updateAmount', Number(newValue))
+})
 </script>
diff --git a/frontend/src/components/Inputs/InputTextarea.vue b/frontend/src/components/Inputs/InputTextarea.vue
index 3881c4b16..d6d8281cd 100644
--- a/frontend/src/components/Inputs/InputTextarea.vue
+++ b/frontend/src/components/Inputs/InputTextarea.vue
@@ -1,62 +1,143 @@
 <template>
-  <validation-provider
-    tag="div"
-    :rules="rules"
-    :name="name"
-    v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
-  >
-    <b-form-group :label="label" :label-for="labelFor" data-test="input-textarea">
-      <b-form-textarea
-        v-model="currentValue"
+  <!--  <validation-provider-->
+  <!--    tag="div"-->
+  <!--    :rules="rules"-->
+  <!--    :name="name"-->
+  <!--    v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"-->
+  <!--  >-->
+  <!--    <b-form-group :label="label" :label-for="labelFor" data-test="input-textarea">-->
+  <!--      <b-form-textarea-->
+  <!--        v-model="currentValue"-->
+  <!--        v-bind="ariaInput"-->
+  <!--        :id="labelFor"-->
+  <!--        class="bg-248"-->
+  <!--        :name="name"-->
+  <!--        :placeholder="placeholder"-->
+  <!--        :state="validated ? valid : false"-->
+  <!--        trim-->
+  <!--        rows="4"-->
+  <!--        max-rows="4"-->
+  <!--        :disabled="disabled"-->
+  <!--        no-resize-->
+  <!--      ></b-form-textarea>-->
+  <!--      <b-form-invalid-feedback v-bind="ariaMsg">-->
+  <!--        {{ errors[0] }}-->
+  <!--      </b-form-invalid-feedback>-->
+  <!--    </b-form-group>-->
+  <!--  </validation-provider>-->
+  <div>
+    <BFormGroup :label="label" :label-for="labelFor" data-test="input-textarea">
+      <BFormTextarea
+        :model-value="currentValue"
+        @update:modelValue="currentValue = $event"
         v-bind="ariaInput"
         :id="labelFor"
         class="bg-248"
         :name="name"
         :placeholder="placeholder"
-        :state="validated ? valid : false"
+        :state="meta.valid"
         trim
         rows="4"
         max-rows="4"
         :disabled="disabled"
         no-resize
-      ></b-form-textarea>
-      <b-form-invalid-feedback v-bind="ariaMsg">
-        {{ errors[0] }}
-      </b-form-invalid-feedback>
-    </b-form-group>
-  </validation-provider>
+      ></BFormTextarea>
+      <BFormInvalidFeedback v-bind="ariaMsg">
+        {{ errorMessage }}
+      </BFormInvalidFeedback>
+    </BFormGroup>
+  </div>
 </template>
-<script>
-export default {
-  name: 'InputTextarea',
-  props: {
-    rules: {
-      type: Object,
-      default: () => {},
-    },
-    name: { type: String, required: true },
-    label: { type: String, required: true },
-    placeholder: { type: String, required: true },
-    value: { type: String, required: true },
-    disabled: { required: false, type: Boolean, default: false },
+<!--<script>-->
+<!--export default {-->
+<!--  name: 'InputTextarea',-->
+<!--  props: {-->
+<!--    rules: {-->
+<!--      type: Object,-->
+<!--      default: () => {},-->
+<!--    },-->
+<!--    name: { type: String, required: true },-->
+<!--    label: { type: String, required: true },-->
+<!--    placeholder: { type: String, required: true },-->
+<!--    value: { type: String, required: true },-->
+<!--    disabled: { required: false, type: Boolean, default: false },-->
+<!--  },-->
+<!--  data() {-->
+<!--    return {-->
+<!--      currentValue: this.value,-->
+<!--    }-->
+<!--  },-->
+<!--  computed: {-->
+<!--    labelFor() {-->
+<!--      return this.name + '-input-field'-->
+<!--    },-->
+<!--  },-->
+<!--  watch: {-->
+<!--    currentValue() {-->
+<!--      this.$emit('input', this.currentValue)-->
+<!--    },-->
+<!--    value() {-->
+<!--      if (this.value !== this.currentValue) this.currentValue = this.value-->
+<!--    },-->
+<!--  },-->
+<!--}-->
+<!--</script>-->
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useField } from 'vee-validate'
+
+// Props
+const props = defineProps({
+  rules: {
+    type: Object,
+    default: () => ({}),
   },
-  data() {
-    return {
-      currentValue: this.value,
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue'])
+
+// Use vee-validate's useField
+const { value: currentValue, errorMessage, meta } = useField(props.name, props.rules, {
+  initialValue: props.modelValue,
+})
+
+// Computed
+const labelFor = computed(() => `${props.name}-input-field`)
+
+// Watch for external value changes
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue !== currentValue.value) {
+      currentValue.value = newValue
     }
   },
-  computed: {
-    labelFor() {
-      return this.name + '-input-field'
-    },
-  },
-  watch: {
-    currentValue() {
-      this.$emit('input', this.currentValue)
-    },
-    value() {
-      if (this.value !== this.currentValue) this.currentValue = this.value
-    },
-  },
-}
+)
+
+// Watch for internal value changes
+watch(currentValue, (newValue) => {
+  emit('update:modelValue', newValue)
+})
 </script>
diff --git a/frontend/src/components/Transaction.vue b/frontend/src/components/Transaction.vue
index d13954362..ba3e7796b 100644
--- a/frontend/src/components/Transaction.vue
+++ b/frontend/src/components/Transaction.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="gdt-transaction-list">
     <div class="list-group bg-white appBoxShadow gradido-border-radius p-3 mb-3">
-      <b-row @click="visible = !visible" class="align-items-center">
-        <b-col cols="3" lg="2" md="2">
-          <b-avatar
+      <BRow @click="visible = !visible" class="align-items-center">
+        <BCol cols="3" lg="2" md="2">
+          <BAvatar
             :icon="getLinesByType.icon"
             variant="light"
             size="3em"
             :class="getLinesByType.iconclasses"
-          ></b-avatar>
-        </b-col>
-        <b-col>
+          ></BAvatar>
+        </BCol>
+        <BCol>
           <!-- <div>
             {{ getLinesByType }}
           </div> -->
@@ -24,24 +24,24 @@
           <div class="small">
             {{ getLinesByType.descriptiontext }}
           </div>
-        </b-col>
-        <b-col cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
+        </BCol>
+        <BCol cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
           <div class="small mb-2">{{ $t('gdt.credit') }}</div>
           <div class="font-weight-bold">{{ getLinesByType.credittext }}</div>
-        </b-col>
-        <b-col cols="12" md="1" lg="1" class="text-right">
+        </BCol>
+        <BCol cols="12" md="1" lg="1" class="text-right">
           <collapse-icon class="text-right" :visible="visible" />
-        </b-col>
-      </b-row>
+        </BCol>
+      </BRow>
 
-      <b-collapse :id="collapseId" class="mt-2" v-model="visible">
+      <BCollapse :id="collapseId" class="mt-2" v-model="visible">
         <transaction-collapse
           :amount="amount"
           :gdtEntryType="gdtEntryType"
           :factor="factor"
           :gdt="gdt"
         ></transaction-collapse>
-      </b-collapse>
+      </BCollapse>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/TransactionCollapse.vue b/frontend/src/components/TransactionCollapse.vue
index 2bba3d164..254fa8c89 100644
--- a/frontend/src/components/TransactionCollapse.vue
+++ b/frontend/src/components/TransactionCollapse.vue
@@ -1,22 +1,22 @@
 <template>
   <div class="gdt-transaction-collapse py-4 mb-4 gradido-no-border">
-    <b-row class="gdt-list-collapse-header-text mb-3">
-      <b-col class="collapse-headline">
+    <BRow class="gdt-list-collapse-header-text mb-3">
+      <BCol class="collapse-headline">
         <b>{{ getLinesByType.headline }}</b>
-      </b-col>
-    </b-row>
-    <b-row class="gdt-list-collapse-box--all">
-      <b-col cols="12" lg="4" md="4">
+      </BCol>
+    </BRow>
+    <BRow class="gdt-list-collapse-box--all">
+      <BCol cols="12" lg="4" md="4">
         <div class="collapse-first">{{ getLinesByType.first }}</div>
         <div class="collapse-second">{{ getLinesByType.second }}</div>
-      </b-col>
-      <b-col offset="1" offset-md="0" offset-lg="0">
+      </BCol>
+      <BCol offset="1" offset-md="0" offset-lg="0">
         <div class="collapse-firstMath">{{ getLinesByType.firstMath }}</div>
         <div class="collapse-secondMath">
           {{ getLinesByType.secondMath }}
         </div>
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
   </div>
 </template>
 <script>
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index 4286107bb..60a438383 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -317,7 +317,7 @@
 <!--</script>-->
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { useStore } from 'vuex'
 import { useRouter } from 'vue-router'
 import { useLazyQuery, useMutation, useQuery } from '@vue/apollo-composable'
@@ -385,9 +385,8 @@ const logoutUser = async () => {
 const updateTransactions = async ({ currentPage, pageSize }) => {
   pending.value = true
   try {
-    // const { result } = useQuery(transactionsQuery, undefined, { fetchPolicy: 'network-only' })
-    // console.log(result)
     const result = await useTransactionsQuery()
+    if (!result) return //TODO this return mitigate an error when this method is called second time but without actual request
     const { transactionList } = result
     GdtBalance.value =
       transactionList.balance.balanceGDT === null ? 0 : Number(transactionList.balance.balanceGDT)
diff --git a/frontend/src/pages/Circles.vue b/frontend/src/pages/Circles.vue
index 77e556bd7..570a2fce8 100644
--- a/frontend/src/pages/Circles.vue
+++ b/frontend/src/pages/Circles.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="circles">
-    <b-container class="bg-white appBoxShadow gradido-border-radius p-4 mt--3">
+    <BContainer class="bg-white appBoxShadow gradido-border-radius p-4 mt--3">
       <div class="h3">{{ $t('circles.headline') }}</div>
       <div class="my-4 text-small">
         <span v-for="(line, lineNumber) of $t('circles.text').split('\n')" v-bind:key="lineNumber">
@@ -8,10 +8,10 @@
           <br />
         </span>
       </div>
-      <b-row class="my-5">
-        <b-col cols="12">
+      <BRow class="my-5">
+        <BCol cols="12">
           <div class="text-lg-right">
-            <b-button
+            <BButton
               :href="this.humhubUri"
               v-if="this.humhubAllowed"
               variant="gradido"
@@ -19,16 +19,16 @@
               target="_blank"
             >
               {{ $t('circles.button') }}
-            </b-button>
+            </BButton>
             <RouterLink v-else to="/settings/extern">
-              <b-button variant="gradido">
+              <BButton variant="gradido">
                 {{ $t('circles.button') }}
-              </b-button>
+              </BButton>
             </RouterLink>
           </div>
-        </b-col>
-      </b-row>
-    </b-container>
+        </BCol>
+      </BRow>
+    </BContainer>
   </div>
 </template>
 <script>
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index 8a1107766..01dcffdee 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="community-page">
     <div>
-      <b-tabs no-nav-style borderless v-model="tabIndex" align="center">
-        <b-tab no-body>
+      <BTabs no-nav-style borderless v-model="tabIndex" align="center">
+        <BTab no-body>
           <open-creations-amount
             :minimalDate="minimalDate"
             :maxGddLastMonth="maxForMonths[0]"
@@ -10,16 +10,16 @@
           />
           <div class="mb-3"></div>
           <contribution-form
-            @set-contribution="saveContribution"
-            @update-contribution="updateContribution"
+            @set-contribution="handleSaveContribution"
+            @update-contribution="handleUpdateContribution"
             v-model="form"
             :isThisMonth="isThisMonth"
             :minimalDate="minimalDate"
             :maxGddLastMonth="maxForMonths[0]"
             :maxGddThisMonth="maxForMonths[1]"
           />
-        </b-tab>
-        <b-tab no-body>
+        </BTab>
+        <BTab no-body>
           <div v-if="items.length === 0">
             {{ $t('contribution.noContributions.myContributions') }}
           </div>
@@ -27,17 +27,17 @@
             <contribution-list
               @closeAllOpenCollapse="closeAllOpenCollapse"
               :items="items"
-              @update-list-contributions="updateListContributions"
-              @update-contribution-form="updateContributionForm"
-              @delete-contribution="deleteContribution"
+              @update-list-contributions="handleUpdateListContributions"
+              @update-contribution-form="handleUpdateContributionForm"
+              @delete-contribution="handleDeleteContribution"
               @update-status="updateStatus"
               :contributionCount="contributionCount"
               :showPagination="true"
               :pageSize="pageSize"
             />
           </div>
-        </b-tab>
-        <b-tab no-body>
+        </BTab>
+        <BTab no-body>
           <div v-if="itemsAll.length === 0">
             {{ $t('contribution.noContributions.allContributions') }}
           </div>
@@ -52,254 +52,490 @@
               :allContribution="true"
             />
           </div>
-        </b-tab>
-      </b-tabs>
+        </BTab>
+      </BTabs>
     </div>
   </div>
 </template>
-<script>
+<!--<script>-->
+<!--import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount'-->
+<!--import ContributionForm from '@/components/Contributions/ContributionForm'-->
+<!--import ContributionList from '@/components/Contributions/ContributionList'-->
+<!--import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'-->
+<!--import { listContributions, listAllContributions, openCreations } from '@/graphql/queries'-->
+
+<!--const COMMUNITY_TABS = ['contribute', 'contributions', 'community']-->
+
+<!--export default {-->
+<!--  name: 'Community',-->
+<!--  components: {-->
+<!--    ContributionForm,-->
+<!--    ContributionList,-->
+<!--    OpenCreationsAmount,-->
+<!--  },-->
+<!--  data() {-->
+<!--    return {-->
+<!--      tabIndex: 0,-->
+<!--      items: [],-->
+<!--      itemsAll: [],-->
+<!--      currentPage: 1,-->
+<!--      pageSize: 25,-->
+<!--      currentPageAll: 1,-->
+<!--      pageSizeAll: 25,-->
+<!--      contributionCount: 0,-->
+<!--      contributionCountAll: 0,-->
+<!--      form: {-->
+<!--        id: null,-->
+<!--        date: '',-->
+<!--        memo: '',-->
+<!--        hours: 0,-->
+<!--        amount: '',-->
+<!--      },-->
+<!--      originalContributionDate: '',-->
+<!--      updateAmount: '',-->
+<!--      maximalDate: new Date(),-->
+<!--      openCreations: [],-->
+<!--    }-->
+<!--  },-->
+<!--  mounted() {-->
+<!--    this.updateTabIndex()-->
+<!--  },-->
+<!--  apollo: {-->
+<!--    OpenCreations: {-->
+<!--      query() {-->
+<!--        return openCreations-->
+<!--      },-->
+<!--      fetchPolicy: 'network-only',-->
+<!--      variables() {-->
+<!--        return {}-->
+<!--      },-->
+<!--      update({ openCreations }) {-->
+<!--        this.openCreations = openCreations-->
+<!--      },-->
+<!--      error({ message }) {-->
+<!--        this.toastError(message)-->
+<!--      },-->
+<!--    },-->
+<!--    ListAllContributions: {-->
+<!--      query() {-->
+<!--        return listAllContributions-->
+<!--      },-->
+<!--      variables() {-->
+<!--        return {-->
+<!--          currentPage: this.currentPageAll,-->
+<!--          pageSize: this.pageSizeAll,-->
+<!--        }-->
+<!--      },-->
+<!--      fetchPolicy: 'no-cache',-->
+<!--      update({ listAllContributions }) {-->
+<!--        this.contributionCountAll = listAllContributions.contributionCount-->
+<!--        this.itemsAll = listAllContributions.contributionList-->
+<!--      },-->
+<!--      error({ message }) {-->
+<!--        this.toastError(message)-->
+<!--      },-->
+<!--    },-->
+<!--    ListContributions: {-->
+<!--      query() {-->
+<!--        return listContributions-->
+<!--      },-->
+<!--      fetchPolicy: 'network-only',-->
+<!--      variables() {-->
+<!--        return {-->
+<!--          currentPage: this.currentPage,-->
+<!--          pageSize: this.pageSize,-->
+<!--        }-->
+<!--      },-->
+<!--      update({ listContributions }) {-->
+<!--        this.contributionCount = listContributions.contributionCount-->
+<!--        this.items = listContributions.contributionList-->
+<!--        if (this.items.find((item) => item.status === 'IN_PROGRESS')) {-->
+<!--          this.tabIndex = 1-->
+<!--          if (this.$route.params.tab !== 'contributions')-->
+<!--            this.$router.push({ params: { tab: 'contributions' } })-->
+<!--          this.toastInfo(this.$t('contribution.alert.answerQuestionToast'))-->
+<!--        }-->
+<!--      },-->
+<!--      error({ message }) {-->
+<!--        this.toastError(message)-->
+<!--      },-->
+<!--    },-->
+<!--  },-->
+<!--  watch: {-->
+<!--    '$route.params.tab'() {-->
+<!--      this.updateTabIndex()-->
+<!--    },-->
+<!--  },-->
+<!--  computed: {-->
+<!--    minimalDate() {-->
+<!--      const date = new Date(this.maximalDate)-->
+<!--      return new Date(date.setMonth(date.getMonth() - 1, 1))-->
+<!--    },-->
+<!--    isThisMonth() {-->
+<!--      const formDate = new Date(this.form.date)-->
+<!--      return (-->
+<!--        formDate.getFullYear() === this.maximalDate.getFullYear() &&-->
+<!--        formDate.getMonth() === this.maximalDate.getMonth()-->
+<!--      )-->
+<!--    },-->
+<!--    amountToAdd() {-->
+<!--      // when existing contribution is edited, the amount is added back on top of the amount-->
+<!--      if (this.form.id) return parseInt(this.updateAmount)-->
+<!--      return 0-->
+<!--    },-->
+<!--    maxForMonths() {-->
+<!--      const originalContributionDate = new Date(this.originalContributionDate)-->
+<!--      if (this.openCreations && this.openCreations.length)-->
+<!--        return this.openCreations.slice(1).map((creation) => {-->
+<!--          if (-->
+<!--            creation.year === originalContributionDate.getFullYear() &&-->
+<!--            creation.month === originalContributionDate.getMonth()-->
+<!--          )-->
+<!--            return parseInt(creation.amount) + this.amountToAdd-->
+<!--          return parseInt(creation.amount)-->
+<!--        })-->
+<!--      return [0, 0]-->
+<!--    },-->
+<!--  },-->
+<!--  methods: {-->
+<!--    updateTabIndex() {-->
+<!--      const index = COMMUNITY_TABS.indexOf(this.$route.params.tab)-->
+<!--      this.$nextTick(() => {-->
+<!--        this.tabIndex = index > -1 ? index : 0-->
+<!--      })-->
+<!--      this.closeAllOpenCollapse()-->
+<!--    },-->
+<!--    closeAllOpenCollapse() {-->
+<!--      this.$el.querySelectorAll('.collapse.show').forEach((value) => {-->
+<!--        this.$root.$emit('bv::toggle::collapse', value.id)-->
+<!--      })-->
+<!--    },-->
+<!--    refetchData() {-->
+<!--      this.$apollo.queries.ListAllContributions.refetch()-->
+<!--      this.$apollo.queries.ListContributions.refetch()-->
+<!--      this.$apollo.queries.OpenCreations.refetch()-->
+<!--    },-->
+<!--    saveContribution(data) {-->
+<!--      this.$apollo-->
+<!--        .mutate({-->
+<!--          fetchPolicy: 'no-cache',-->
+<!--          mutation: createContribution,-->
+<!--          variables: {-->
+<!--            creationDate: data.date,-->
+<!--            memo: data.memo,-->
+<!--            amount: data.amount,-->
+<!--          },-->
+<!--        })-->
+<!--        .then((result) => {-->
+<!--          this.toastSuccess(this.$t('contribution.submitted'))-->
+<!--          this.refetchData()-->
+<!--        })-->
+<!--        .catch((err) => {-->
+<!--          this.toastError(err.message)-->
+<!--        })-->
+<!--    },-->
+<!--    updateContribution(data) {-->
+<!--      this.$apollo-->
+<!--        .mutate({-->
+<!--          fetchPolicy: 'no-cache',-->
+<!--          mutation: updateContribution,-->
+<!--          variables: {-->
+<!--            contributionId: data.id,-->
+<!--            creationDate: data.date,-->
+<!--            memo: data.memo,-->
+<!--            amount: data.amount,-->
+<!--          },-->
+<!--        })-->
+<!--        .then((result) => {-->
+<!--          this.toastSuccess(this.$t('contribution.updated'))-->
+<!--          this.refetchData()-->
+<!--        })-->
+<!--        .catch((err) => {-->
+<!--          this.toastError(err.message)-->
+<!--        })-->
+<!--    },-->
+<!--    deleteContribution(data) {-->
+<!--      this.$apollo-->
+<!--        .mutate({-->
+<!--          fetchPolicy: 'no-cache',-->
+<!--          mutation: deleteContribution,-->
+<!--          variables: {-->
+<!--            id: data.id,-->
+<!--          },-->
+<!--        })-->
+<!--        .then((result) => {-->
+<!--          this.toastSuccess(this.$t('contribution.deleted'))-->
+<!--          this.refetchData()-->
+<!--        })-->
+<!--        .catch((err) => {-->
+<!--          this.toastError(err.message)-->
+<!--        })-->
+<!--    },-->
+<!--    updateListAllContributions(pagination) {-->
+<!--      this.currentPageAll = pagination.currentPage-->
+<!--      this.pageSizeAll = pagination.pageSize-->
+<!--      this.$apollo.queries.ListAllContributions.refetch()-->
+<!--    },-->
+<!--    updateListContributions(pagination) {-->
+<!--      this.currentPage = pagination.currentPage-->
+<!--      this.pageSize = pagination.pageSize-->
+<!--      this.$apollo.queries.ListContributions.refetch()-->
+<!--    },-->
+<!--    updateContributionForm(item) {-->
+<!--      this.form.id = item.id-->
+<!--      this.form.date = item.contributionDate-->
+<!--      this.originalContributionDate = item.contributionDate-->
+<!--      this.form.memo = item.memo-->
+<!--      this.form.amount = item.amount-->
+<!--      this.form.hours = item.amount / 20-->
+<!--      this.updateAmount = item.amount-->
+<!--      this.tabIndex = 0-->
+<!--      this.$router.push({ params: { tab: 'contribute' } })-->
+<!--    },-->
+<!--    updateTransactions(pagination) {-->
+<!--      this.$emit('update-transactions', pagination)-->
+<!--    },-->
+<!--    updateStatus(id) {-->
+<!--      this.items.find((item) => item.id === id).status = 'PENDING'-->
+<!--    },-->
+<!--  },-->
+<!--}-->
+<!--</script>-->
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useQuery, useMutation } from '@vue/apollo-composable'
 import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount'
 import ContributionForm from '@/components/Contributions/ContributionForm'
 import ContributionList from '@/components/Contributions/ContributionList'
 import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
 import { listContributions, listAllContributions, openCreations } from '@/graphql/queries'
+import { useAppToast } from '../composables/useToast'
 
 const COMMUNITY_TABS = ['contribute', 'contributions', 'community']
 
-export default {
-  name: 'Community',
-  components: {
-    ContributionForm,
-    ContributionList,
-    OpenCreationsAmount,
-  },
-  data() {
-    return {
-      tabIndex: 0,
-      items: [],
-      itemsAll: [],
-      currentPage: 1,
-      pageSize: 25,
-      currentPageAll: 1,
-      pageSizeAll: 25,
-      contributionCount: 0,
-      contributionCountAll: 0,
-      form: {
-        id: null,
-        date: '',
-        memo: '',
-        hours: 0,
-        amount: '',
-      },
-      originalContributionDate: '',
-      updateAmount: '',
-      maximalDate: new Date(),
-      openCreations: [],
+// Props and emits
+const emit = defineEmits(['update-transactions'])
+
+// Router
+const route = useRoute()
+const router = useRouter()
+
+const { toastError, toastSuccess, toastInfo } = useAppToast()
+
+// Reactive state
+const tabIndex = ref(0)
+const items = ref([])
+const itemsAll = ref([])
+const currentPage = ref(1)
+const pageSize = ref(25)
+const currentPageAll = ref(1)
+const pageSizeAll = ref(25)
+const contributionCount = ref(0)
+const contributionCountAll = ref(0)
+const form = ref({
+  id: null,
+  date: '',
+  memo: '',
+  hours: 0,
+  amount: '',
+})
+const originalContributionDate = ref('')
+const updateAmount = ref('')
+const maximalDate = ref(new Date())
+const openCreationsData = ref([])
+
+// Computed properties
+const minimalDate = computed(() => {
+  const date = new Date(maximalDate.value)
+  return new Date(date.setMonth(date.getMonth() - 1, 1))
+})
+
+const isThisMonth = computed(() => {
+  const formDate = new Date(form.value.date)
+  return (
+    formDate.getFullYear() === maximalDate.value.getFullYear() &&
+    formDate.getMonth() === maximalDate.value.getMonth()
+  )
+})
+
+const amountToAdd = computed(() => (form.value.id ? parseInt(updateAmount.value) : 0))
+
+const maxForMonths = computed(() => {
+  const originalDate = new Date(originalContributionDate.value)
+  if (openCreationsData.value && openCreationsData.value.length) {
+    return openCreationsData.value.slice(1).map((creation) => {
+      if (
+        creation.year === originalDate.getFullYear() &&
+        creation.month === originalDate.getMonth()
+      ) {
+        return parseInt(creation.amount) + amountToAdd.value
+      }
+      return parseInt(creation.amount)
+    })
+  }
+  return [0, 0]
+})
+
+// Queries
+const { onResult: onOpenCreationsResult, refetch: refetchOpenCreations } = useQuery(openCreations)
+const { onResult: onListAllContributionsResult, refetch: refetchAllContributions } = useQuery(
+  listAllContributions,
+  () => ({
+    currentPage: currentPageAll.value,
+    pageSize: pageSizeAll.value,
+  }),
+  { fetchPolicy: 'no-cache' },
+)
+const { onResult: onListContributionsResult, refetch: refetchContributions } = useQuery(
+  listContributions,
+  () => ({
+    currentPage: currentPage.value,
+    pageSize: pageSize.value,
+  }),
+  { fetchPolicy: 'network-only' },
+)
+
+// Mutations
+const { mutate: createContributionMutation } = useMutation(createContribution)
+const { mutate: updateContributionMutation } = useMutation(updateContribution)
+const { mutate: deleteContributionMutation } = useMutation(deleteContribution)
+
+// Query results
+onOpenCreationsResult(({ data }) => {
+  if (data) {
+    openCreationsData.value = data.openCreations
+  }
+})
+
+onListAllContributionsResult(({ data }) => {
+  if (data) {
+    contributionCountAll.value = data.listAllContributions.contributionCount
+    itemsAll.value = data.listAllContributions.contributionList
+  }
+})
+
+onListContributionsResult(({ data }) => {
+  if (data) {
+    contributionCount.value = data.listContributions.contributionCount
+    items.value = data.listContributions.contributionList
+    if (items.value.find((item) => item.status === 'IN_PROGRESS')) {
+      tabIndex.value = 1
+      if (route.params.tab !== 'contributions') {
+        router.push({ params: { tab: 'contributions' } })
+      }
+      // Assuming toastInfo is available globally or imported
+      toastInfo(t('contribution.alert.answerQuestionToast'))
     }
-  },
-  mounted() {
-    this.updateTabIndex()
-  },
-  apollo: {
-    OpenCreations: {
-      query() {
-        return openCreations
-      },
-      fetchPolicy: 'network-only',
-      variables() {
-        return {}
-      },
-      update({ openCreations }) {
-        this.openCreations = openCreations
-      },
-      error({ message }) {
-        this.toastError(message)
-      },
-    },
-    ListAllContributions: {
-      query() {
-        return listAllContributions
-      },
-      variables() {
-        return {
-          currentPage: this.currentPageAll,
-          pageSize: this.pageSizeAll,
-        }
-      },
-      fetchPolicy: 'no-cache',
-      update({ listAllContributions }) {
-        this.contributionCountAll = listAllContributions.contributionCount
-        this.itemsAll = listAllContributions.contributionList
-      },
-      error({ message }) {
-        this.toastError(message)
-      },
-    },
-    ListContributions: {
-      query() {
-        return listContributions
-      },
-      fetchPolicy: 'network-only',
-      variables() {
-        return {
-          currentPage: this.currentPage,
-          pageSize: this.pageSize,
-        }
-      },
-      update({ listContributions }) {
-        this.contributionCount = listContributions.contributionCount
-        this.items = listContributions.contributionList
-        if (this.items.find((item) => item.status === 'IN_PROGRESS')) {
-          this.tabIndex = 1
-          if (this.$route.params.tab !== 'contributions')
-            this.$router.push({ params: { tab: 'contributions' } })
-          this.toastInfo(this.$t('contribution.alert.answerQuestionToast'))
-        }
-      },
-      error({ message }) {
-        this.toastError(message)
-      },
-    },
-  },
-  watch: {
-    '$route.params.tab'() {
-      this.updateTabIndex()
-    },
-  },
-  computed: {
-    minimalDate() {
-      const date = new Date(this.maximalDate)
-      return new Date(date.setMonth(date.getMonth() - 1, 1))
-    },
-    isThisMonth() {
-      const formDate = new Date(this.form.date)
-      return (
-        formDate.getFullYear() === this.maximalDate.getFullYear() &&
-        formDate.getMonth() === this.maximalDate.getMonth()
-      )
-    },
-    amountToAdd() {
-      // when existing contribution is edited, the amount is added back on top of the amount
-      if (this.form.id) return parseInt(this.updateAmount)
-      return 0
-    },
-    maxForMonths() {
-      const originalContributionDate = new Date(this.originalContributionDate)
-      if (this.openCreations && this.openCreations.length)
-        return this.openCreations.slice(1).map((creation) => {
-          if (
-            creation.year === originalContributionDate.getFullYear() &&
-            creation.month === originalContributionDate.getMonth()
-          )
-            return parseInt(creation.amount) + this.amountToAdd
-          return parseInt(creation.amount)
-        })
-      return [0, 0]
-    },
-  },
-  methods: {
-    updateTabIndex() {
-      const index = COMMUNITY_TABS.indexOf(this.$route.params.tab)
-      this.$nextTick(() => {
-        this.tabIndex = index > -1 ? index : 0
-      })
-      this.closeAllOpenCollapse()
-    },
-    closeAllOpenCollapse() {
-      this.$el.querySelectorAll('.collapse.show').forEach((value) => {
-        this.$root.$emit('bv::toggle::collapse', value.id)
-      })
-    },
-    refetchData() {
-      this.$apollo.queries.ListAllContributions.refetch()
-      this.$apollo.queries.ListContributions.refetch()
-      this.$apollo.queries.OpenCreations.refetch()
-    },
-    saveContribution(data) {
-      this.$apollo
-        .mutate({
-          fetchPolicy: 'no-cache',
-          mutation: createContribution,
-          variables: {
-            creationDate: data.date,
-            memo: data.memo,
-            amount: data.amount,
-          },
-        })
-        .then((result) => {
-          this.toastSuccess(this.$t('contribution.submitted'))
-          this.refetchData()
-        })
-        .catch((err) => {
-          this.toastError(err.message)
-        })
-    },
-    updateContribution(data) {
-      this.$apollo
-        .mutate({
-          fetchPolicy: 'no-cache',
-          mutation: updateContribution,
-          variables: {
-            contributionId: data.id,
-            creationDate: data.date,
-            memo: data.memo,
-            amount: data.amount,
-          },
-        })
-        .then((result) => {
-          this.toastSuccess(this.$t('contribution.updated'))
-          this.refetchData()
-        })
-        .catch((err) => {
-          this.toastError(err.message)
-        })
-    },
-    deleteContribution(data) {
-      this.$apollo
-        .mutate({
-          fetchPolicy: 'no-cache',
-          mutation: deleteContribution,
-          variables: {
-            id: data.id,
-          },
-        })
-        .then((result) => {
-          this.toastSuccess(this.$t('contribution.deleted'))
-          this.refetchData()
-        })
-        .catch((err) => {
-          this.toastError(err.message)
-        })
-    },
-    updateListAllContributions(pagination) {
-      this.currentPageAll = pagination.currentPage
-      this.pageSizeAll = pagination.pageSize
-      this.$apollo.queries.ListAllContributions.refetch()
-    },
-    updateListContributions(pagination) {
-      this.currentPage = pagination.currentPage
-      this.pageSize = pagination.pageSize
-      this.$apollo.queries.ListContributions.refetch()
-    },
-    updateContributionForm(item) {
-      this.form.id = item.id
-      this.form.date = item.contributionDate
-      this.originalContributionDate = item.contributionDate
-      this.form.memo = item.memo
-      this.form.amount = item.amount
-      this.form.hours = item.amount / 20
-      this.updateAmount = item.amount
-      this.tabIndex = 0
-      this.$router.push({ params: { tab: 'contribute' } })
-    },
-    updateTransactions(pagination) {
-      this.$emit('update-transactions', pagination)
-    },
-    updateStatus(id) {
-      this.items.find((item) => item.id === id).status = 'PENDING'
-    },
-  },
+  }
+})
+
+// Methods
+const updateTabIndex = () => {
+  const index = COMMUNITY_TABS.indexOf(route.params.tab)
+  tabIndex.value = index > -1 ? index : 0
+  closeAllOpenCollapse()
 }
+
+const closeAllOpenCollapse = () => {
+  document.querySelectorAll('.collapse.show').forEach((el) => {
+    // Assuming you're using bootstrap-vue, adjust if using a different library
+    el.classList.remove('show')
+  })
+}
+
+const refetchData = () => {
+  refetchAllContributions()
+  refetchContributions()
+  refetchOpenCreations()
+}
+
+const handleSaveContribution = async (data) => {
+  try {
+    await createContributionMutation({
+      variables: {
+        creationDate: data.date,
+        memo: data.memo,
+        amount: data.amount,
+      },
+    })
+    toastSuccess(t('contribution.submitted'))
+    refetchData()
+  } catch (err) {
+    toastError(err.message)
+  }
+}
+
+const handleUpdateContribution = async (data) => {
+  try {
+    await updateContributionMutation({
+      variables: {
+        contributionId: data.id,
+        creationDate: data.date,
+        memo: data.memo,
+        amount: data.amount,
+      },
+    })
+    toastSuccess(t('contribution.updated'))
+    refetchData()
+  } catch (err) {
+    toastError(err.message)
+  }
+}
+
+const handleDeleteContribution = async (data) => {
+  try {
+    await deleteContributionMutation({
+      variables: { id: data.id },
+    })
+    toastSuccess(t('contribution.deleted'))
+    refetchData()
+  } catch (err) {
+    toastError(err.message)
+  }
+}
+
+const handleUpdateListAllContributions = (pagination) => {
+  currentPageAll.value = pagination.currentPage
+  pageSizeAll.value = pagination.pageSize
+  refetchAllContributions()
+}
+
+const handleUpdateListContributions = (pagination) => {
+  currentPage.value = pagination.currentPage
+  pageSize.value = pagination.pageSize
+  refetchContributions()
+}
+
+const handleUpdateContributionForm = (item) => {
+  form.value = {
+    id: item.id,
+    date: item.contributionDate,
+    memo: item.memo,
+    amount: item.amount,
+    hours: item.amount / 20,
+  }
+  originalContributionDate.value = item.contributionDate
+  updateAmount.value = item.amount
+  tabIndex.value = 0
+  router.push({ params: { tab: 'contribute' } })
+}
+
+const updateTransactions = (pagination) => {
+  emit('update-transactions', pagination)
+}
+
+const updateStatus = (id) => {
+  const item = items.value.find((item) => item.id === id)
+  if (item) item.status = 'PENDING'
+}
+
+// Watchers
+watch(() => route.params.tab, updateTabIndex)
+
+// Lifecycle hooks
+onMounted(updateTabIndex)
 </script>
 <style scoped>
 .tab-content {
diff --git a/frontend/src/pages/InfoStatistic.vue b/frontend/src/pages/InfoStatistic.vue
index 92dda680c..5c4c2ae2c 100644
--- a/frontend/src/pages/InfoStatistic.vue
+++ b/frontend/src/pages/InfoStatistic.vue
@@ -11,31 +11,6 @@
         </BLink>
       </div>
       <hr />
-      <!--<div class="h3">{{ $t('community.openContributionLinks') }}</div>
-      <div v-if="count > 0">
-        {{
-          $t('community.openContributionLinkText', {
-            name: CONFIG.COMMUNITY_NAME,
-            count,
-          })
-        }}
-      </div>
-      <div v-else>
-        {{ $t('community.noOpenContributionLinkText') }}
-      </div>
-      <ul>
-        <li v-for="item in itemsContributionLinks" v-bind:key="item.id">
-          <div>{{ item.name }}</div>
-          <div>{{ item.memo }}</div>
-          <div>
-            {{ item.amount | GDD }}
-            <span v-if="item.cycle === 'ONCE'">{{ $t('contribution-link.unique') }}</span>
-          </div>
-        </li>
-      </ul>
-
-      <hr />-->
-
       <div class="h3">{{ $t('community.admins') }}</div>
       <ul>
         <li v-for="item in admins" :key="item.id">{{ item.firstName }} {{ item.lastName }}</li>
@@ -50,117 +25,60 @@
       <div class="h3">{{ $t('contact') }}</div>
       <BLink :href="`mailto:${supportMail}`">{{ supportMail }}</BLink>
     </BContainer>
-    <!--
-    <hr />
-    <b-container>
-      <div class="h3">{{ $t('community.statistic') }}</div>
-      <div>
-        <div>
-          {{ $t('community.members') }}
-          <span class="h4">{{ totalUsers }}</span>
-        </div>
-        <div>
-          {{ $t('statistic.totalGradidoCreated') }}
-          <span class="h4">{{ totalGradidoCreated | GDD }}</span>
-        </div>
-        <div>
-          {{ $t('statistic.totalGradidoDecayed') }}
-          <span class="h4">{{ totalGradidoDecayed | GDD }}</span>
-        </div>
-        <div>
-          {{ $t('statistic.totalGradidoAvailable') }}
-          <span class="h4">{{ totalGradidoAvailable | GDD }}</span>
-        </div>
-      </div>
-    </b-container>
-    -->
   </div>
 </template>
-<script>
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useQuery } from '@vue/apollo-composable'
 import CONFIG from '@/config'
 import { listContributionLinks, searchAdminUsers } from '@/graphql/queries'
-// , communityStatistics
+import { useAppToast } from '../composables/useToast'
 
-export default {
-  name: 'InfoStatistic',
-  data() {
-    return {
-      CONFIG,
-      count: null,
-      countAdminUser: null,
-      itemsContributionLinks: [],
-      itemsAdminUser: [],
-      supportMail: CONFIG.COMMUNITY_SUPPORT_MAIL,
-      membersCount: '1203',
-      totalUsers: null,
-      totalGradidoCreated: null,
-      totalGradidoDecayed: null,
-      totalGradidoAvailable: null,
-    }
-  },
-  computed: {
-    admins() {
-      return this.itemsAdminUser.filter((item) => item.role === 'ADMIN')
-    },
-    moderators() {
-      return this.itemsAdminUser.filter((item) => item.role === 'MODERATOR')
-    },
-  },
-  methods: {
-    getContributionLinks() {
-      this.$apollo
-        .query({
-          query: listContributionLinks,
-        })
-        .then((result) => {
-          this.count = result.data.listContributionLinks.count
-          this.itemsContributionLinks = result.data.listContributionLinks.links
-        })
-        .catch(() => {
-          this.toastError('listContributionLinks has no result, use default data')
-        })
-    },
-    getAdminUsers() {
-      this.$apollo
-        .query({
-          query: searchAdminUsers,
-        })
-        .then((result) => {
-          this.countAdminUser = result.data.searchAdminUsers.userCount
-          this.itemsAdminUser = result.data.searchAdminUsers.userList
-        })
-        .catch(() => {
-          this.toastError('searchAdminUsers has no result, use default data')
-        })
-    },
-    /*
-        getCommunityStatistics() {
-        this.$apollo
-        .query({
-        query: communityStatistics,
-        })
-        .then((result) => {
-        this.totalUsers = result.data.communityStatistics.totalUsers
-        this.totalGradidoCreated = result.data.communityStatistics.totalGradidoCreated
-        this.totalGradidoDecayed =
-        Number(result.data.communityStatistics.totalGradidoDecayed) +
-        Number(result.data.communityStatistics.totalGradidoUnbookedDecayed)
-        this.totalGradidoAvailable = result.data.communityStatistics.totalGradidoAvailable
-        })
-        .catch(() => {
-        this.toastError('communityStatistics has no result, use default data')
-        })
-        },
-      */
-    updateTransactions(pagination) {
-      this.$emit('update-transactions', pagination)
-    },
-  },
-  created() {
-    this.getContributionLinks()
-    this.getAdminUsers()
-    // this.getCommunityStatistics()
-    this.updateTransactions(0)
-  },
+const emit = defineEmits(['update-transactions'])
+
+const { toastError } = useAppToast()
+
+const count = ref(null)
+const countAdminUser = ref(null)
+const itemsContributionLinks = ref([])
+const itemsAdminUser = ref([])
+const supportMail = CONFIG.COMMUNITY_SUPPORT_MAIL
+
+const admins = computed(() => itemsAdminUser.value.filter((item) => item.role === 'ADMIN'))
+const moderators = computed(() => itemsAdminUser.value.filter((item) => item.role === 'MODERATOR'))
+
+const { onResult: onContributionLinksResult, onError: onContributionLinksError } = useQuery(
+  listContributionLinks,
+)
+const { onResult: onAdminUsersResult, onError: onAdminUsersError } = useQuery(searchAdminUsers)
+
+onContributionLinksResult(({ data }) => {
+  if (data) {
+    count.value = data.listContributionLinks.count
+    itemsContributionLinks.value = data.listContributionLinks.links
+  }
+})
+
+onAdminUsersResult(({ data }) => {
+  if (data) {
+    countAdminUser.value = data.searchAdminUsers.userCount
+    itemsAdminUser.value = data.searchAdminUsers.userList
+  }
+})
+
+onContributionLinksError(() => {
+  toastError('listContributionLinks has no result, use default data')
+})
+
+onAdminUsersError(() => {
+  toastError('searchAdminUsers has no result, use default data')
+})
+
+const updateTransactions = (pagination) => {
+  emit('update-transactions', pagination)
 }
+
+onMounted(() => {
+  updateTransactions(0)
+})
 </script>