From 0d67c5cd702b8c588c369bf1cf623031148cd139 Mon Sep 17 00:00:00 2001
From: Azmi TOUIL <42934070+AzmiTouil@users.noreply.github.com>
Date: Fri, 6 Sep 2024 10:27:25 +0200
Subject: [PATCH] feat: Manage Wallet from rewards management page - MEED-7380
 - Meeds-io#154 (#553)

This PR will allow admin to Manage Wallet from rewards management page.
---
 .../locale/addon/Wallet_en.properties         |   7 +
 .../wallet-reward/components/RewardApp.vue    | 402 ++----------------
 .../components/reward/BudgetConfiguration.vue |  43 ++
 .../components/reward/CurrentBalance.vue      | 135 ++++++
 .../components/reward/RewardManagement.vue    |  37 ++
 .../vue-app/wallet-reward/initComponents.js   |   6 +
 6 files changed, 256 insertions(+), 374 deletions(-)
 create mode 100644 wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/BudgetConfiguration.vue
 create mode 100644 wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/CurrentBalance.vue
 create mode 100644 wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/RewardManagement.vue

diff --git a/wallet-services/src/main/resources/locale/addon/Wallet_en.properties b/wallet-services/src/main/resources/locale/addon/Wallet_en.properties
index acf37301e..45081f000 100644
--- a/wallet-services/src/main/resources/locale/addon/Wallet_en.properties
+++ b/wallet-services/src/main/resources/locale/addon/Wallet_en.properties
@@ -494,6 +494,13 @@ wallet.administration.initialFundsMessagePlaceholder=Enter a default message to
 wallet.administration.apply=Apply
 wallet.administration.cancel=Cancel
 wallet.administration.reset=Reset
+wallet.administration.fundWallet=Fund Wallet
+wallet.administration.manageWallet=Manage wallet
+wallet.administration.budgetConfiguration=Budget Configuration
+wallet.administration.budgetConfiguration.setUp=Setup the Rewarding Budget
+wallet.administration.budgetConfiguration.setBudget=Set Budget
+wallet.administration.rewardManagement=Reward Management
+wallet.administration.rewardManagement.noContributionsYet=No contributions to reward yet
 
 wallet.overview.rewards.title=Wallet History
 wallet.overview.points=Points
diff --git a/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/RewardApp.vue b/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/RewardApp.vue
index 1809918ea..bda65a548 100644
--- a/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/RewardApp.vue
+++ b/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/RewardApp.vue
@@ -1,382 +1,36 @@
 <!--
-This file is part of the Meeds project (https://meeds.io/).
-Copyright (C) 2022 Meeds Association
-contact@meeds.io
-This program is free software; you can redistribute it and/or
-modify it under the terms of the GNU Lesser General Public
-License as published by the Free Software Foundation; either
-version 3 of the License, or (at your option) any later version.
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-Lesser General Public License for more details.
-You should have received a copy of the GNU Lesser General Public License
-along with this program; if not, write to the Free Software Foundation,
-Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+  This file is part of the Meeds project (https://meeds.io/).
+
+  Copyright (C) 2020 - 2024 Meeds Association contact@meeds.io
+
+  This program is free software; you can redistribute it and/or
+  modify it under the terms of the GNU Lesser General Public
+  License as published by the Free Software Foundation; either
+  version 3 of the License, or (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+  Lesser General Public License for more details.
+
+  You should have received a copy of the GNU Lesser General Public License
+  along with this program; if not, write to the Free Software Foundation,
+  Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+
 -->
 <template>
   <v-app
     id="RewardApp"
-    color="transaprent"
-    class="VuetifyApp"
     flat>
-    <main class="application-body">
-      <v-layout column>
-        <v-layout column class="application-toolbar">
-          <v-flex v-if="error && !loading" class="text-center">
-            <div class="alert alert-error text-start">
-              <i class="uiIconError"></i>{{ error }}
-            </div>
-          </v-flex>
-          <v-flex v-if="settingWarnings && settingWarnings.length && !loading" class=" text-center">
-            <div class="alert alert-warning text-start">
-              <i class="uiIconWarning"></i>
-              <span><a href="javascript:void(0);" @click="selectedTab = 2">{{ $t('exoplatform.wallet.label.pleaseCheckRewardConfiguration') }}</a></span>
-              <ul>
-                <li
-                  v-for="warning in settingWarnings"
-                  :key="warning"
-                  class="ps-2">
-                  - {{ warning }}
-                </li>
-              </ul>
-            </div>
-          </v-flex>
-
-          <v-flex v-if="duplicatedWallets && duplicatedWallets.length" class="text-center">
-            <div class="alert alert-warning">
-              <i class="uiIconWarning"></i> {{ $t('exoplatform.wallet.warning.poolMemberDuplicated') }}:
-              <ul>
-                <li v-for="duplicatedWallet in duplicatedWallets" :key="duplicatedWallet.id">
-                  <code>{{ duplicatedWallet.wallet.name }}</code>
-                </li>
-              </ul>
-            </div>
-          </v-flex>
-
-          <v-dialog
-            v-model="loading"
-            persistent
-            hide-overlay
-            width="300">
-            <v-card color="primary" dark>
-              <v-card-text>
-                {{ $t('exoplatform.wallet.label.loading') }} ...
-                <v-progress-linear
-                  indeterminate
-                  color="white"
-                  class="mb-0" />
-              </v-card-text>
-            </v-card>
-          </v-dialog>
-
-          <v-tabs
-            v-model="selectedTab"
-            slider-size="4">
-            <v-tab key="SendRewards" href="#SendRewards">
-              {{ $t('exoplatform.wallet.title.sendRewardsTab') }}
-            </v-tab>
-            <v-tab key="RewardPools" href="#RewardPools">
-              {{ $t('exoplatform.wallet.title.rewardPoolsTab') }}
-            </v-tab>
-            <v-tab key="Configuration" href="#Configuration">
-              {{ $t('exoplatform.wallet.title.rewardConfigurationTab') }}
-            </v-tab>
-          </v-tabs>
-      
-          <v-tabs-items v-model="selectedTab" class="tabs-content">
-            <v-tab-item
-              id="SendRewards"
-              value="SendRewards"
-              eager>
-              <wallet-reward-send-rewards-tab
-                ref="sendRewards"
-                :reward-report="rewardReport"
-                :admin-wallet="adminWallet"
-                :total-rewards="totalRewards"
-                :contract-details="contractDetails"
-                :period-dates-display="periodDatesDisplay"
-                :transaction-etherscan-link="transactionEtherscanLink"
-                :time-zone="timeZone"
-                @dates-changed="refreshRewards($event)"
-                @refresh="refreshRewards"
-                @error="error = $event" />
-            </v-tab-item>
-            <v-tab-item
-              id="RewardPools"
-              value="RewardPools"
-              eager>
-              <wallet-reward-teams-list-tab
-                ref="rewardTeams"
-                :teams="teams"
-                :wallet-rewards="walletRewards"
-                :period="period"
-                :period-dates-display="periodDatesDisplay"
-                :contract-details="contractDetails"
-                @refresh-teams="refreshRewardSettings"
-                @refresh="refreshRewardSettings"
-                @error="error = $event" />
-            </v-tab-item>
-            <v-tab-item
-              id="Configuration"
-              value="Configuration"
-              eager>
-              <wallet-reward-configuration-tab
-                ref="configurationTab"
-                @saved="refreshRewardSettings"
-                @error="error = $event" />
-            </v-tab-item>
-          </v-tabs-items>
-        </v-layout>
-      </v-layout>
-      <div id="walletDialogsParent">
-      </div>
-    </main>
+    <div class="d-flex flex-row">
+      <v-card
+        class="d-flex flex-column justify-space-between"
+        width="40%"
+        flat>
+        <wallet-current-balance />
+      </v-card>
+      <wallet-budget-configuration />
+    </div>
+    <wallet-reward-management />
   </v-app>
 </template>
-
-<script>
-export default {
-  data() {
-    return {
-      loading: false,
-      error: null,
-      rewardReport: null,
-      adminWallet: null,
-      settingWarnings: [],
-      selectedTab: 'SendRewards',
-      transactionEtherscanLink: null,
-      addressEtherscanLink: null,
-      contractDetails: null,
-      rewardSettings: {},
-      totalRewards: [],
-      teams: [],
-      period: null,
-    };
-  },
-  computed: {
-    duplicatedWallets() {
-      return (this.walletRewards && this.walletRewards.filter(walletReward => walletReward.teams && walletReward.teams.length > 1)) || [];
-    },
-    walletRewards() {
-      return (this.rewardReport && this.rewardReport.rewards) || [];
-    },
-    periodType() {
-      return this.rewardSettings && this.rewardSettings.periodType;
-    },
-    timeZone() {
-      return this.period?.timeZone || this.rewardSettings?.timeZone;
-    },
-    selectedDate() {
-      return this.period?.startDate.substring(0, 10) || new Date().toISOString().substring(0, 10);
-    },
-    dateformat() {
-      return this.timeZone && {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-        timeZoneName: 'short',
-        timeZone: this.timeZone,
-      } || {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-      };
-    },
-    periodDatesDisplay() {
-      if (!this.period) {
-        return '';
-      }
-      const startDateFormatted = this.$dateUtil.formatDateObjectToDisplay(new Date(this.period.startDateInSeconds * 1000), this.dateformat, eXo.env.portal.language);
-      const endDateFormatted = this.$dateUtil.formatDateObjectToDisplay(new Date(this.period.endDateInSeconds * 1000 - 1), this.dateformat, eXo.env.portal.language);
-      return `${startDateFormatted} ${this.$t('exoplatform.wallet.label.to')} ${endDateFormatted}`;
-    },
-  },
-  watch: {
-    rewardReport() {
-      this.period = this.rewardReport?.period;
-    },
-  },
-  created() {
-    this.init()
-      .then(() => {
-        this.transactionEtherscanLink = this.walletUtils.getTransactionEtherscanlink();
-        this.addressEtherscanLink = this.walletUtils.getAddressEtherscanlink();
-      });
-  },
-  methods: {
-    init() {
-      this.loading = true;
-
-      this.error = null;
-      return this.walletUtils.initSettings(false, true)
-        .then(() => {
-          if (!window.walletSettings) {
-            throw new Error(this.$t('exoplatform.wallet.error.emptySettings'));
-          }
-          this.contractDetails = window.walletSettings.contractDetail;
-
-          return this.addressRegistry.searchWalletByTypeAndId('admin', 'admin');
-        })
-        .then((adminWallet) => this.adminWallet = adminWallet)
-        .then(() => this.refreshRewardSettings())
-        .catch((e) => {
-          console.error  ('init method - error', e);
-          this.error = e ? String(e) : this.$t('exoplatform.wallet.error.unknownError');
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    refreshRewardSettings() {
-      this.loading = true;
-      return this.$rewardService.getRewardSettings()
-        .then(settings => this.rewardSettings = settings || {})
-        .then(() => this.$nextTick())
-        .then(() => this.$refs.configurationTab.init())
-        .then(() => this.refreshTeams())
-        .then(() => this.$nextTick())
-        .then(() => this.refreshRewards())
-        .finally(() => this.loading = false);
-    },
-    refreshRewards(period) {
-      if (!this.checkConfigurationConsistency()) {
-        return;
-      }
-
-      if (period) {
-        this.period = period;
-      }
-
-      this.loading = true;
-      return this.$rewardService.computeRewards(this.selectedDate)
-        .then(rewardReport => {
-          if (rewardReport.error) {
-            this.error = (typeof rewardReport.error === 'object' ? rewardReport.error[0] : rewardReport.error);
-            return;
-          }
-          this.rewardReport = rewardReport;
-          return this.$nextTick();
-        })
-        .then(() => {
-          this.computeTotalRewardsByPlugin();
-
-          // Watch pending transactions
-          this.walletRewards.forEach(walletReward => {
-            if (walletReward.status === 'pending') {
-              this.walletUtils.watchTransactionStatus(walletReward.transaction.hash, (transactionDetail) => {
-                walletReward.status = transactionDetail.succeeded ? 'success' : 'error';
-              });
-            }
-          });
-
-          // compute valid members per team
-          this.teams.forEach((team) => {
-            team.validMembersWallets = [];
-            team.computedBudget = 0;
-
-            if (team.id && team.members) {
-              team.members.forEach((memberObject) => {
-                const walletReward = this.walletRewards.find((walletReward) => walletReward.wallet && walletReward.wallet.id && walletReward.wallet.technicalId === memberObject.identityId);
-                if (walletReward && walletReward.enabled && walletReward.poolTokensToSend) {
-                  team.validMembersWallets.push(walletReward);
-                }
-              });
-            }
-          });
-
-          // Build 'No Team Members' team
-          const membersWithEmptyTeam = this.walletRewards.filter((walletReward) => !walletReward.team);
-          if (membersWithEmptyTeam && membersWithEmptyTeam.length) {
-            // Members with no Team
-            let noTeamMembers = this.teams.find(team => !team.id);
-            if (!noTeamMembers) {
-              noTeamMembers = {
-                id: 0,
-                name: this.$t('exoplatform.wallet.label.noPoolUsers'),
-                description: this.$t('exoplatform.wallet.label.noPoolUsersDescription'),
-                rewardType: 'COMPUTED',
-                computedBudget: 0,
-                noTeam: true,
-              };
-              this.teams.push(noTeamMembers);
-            }
-            noTeamMembers.members = membersWithEmptyTeam.map(walletReward => walletReward.wallet);
-            noTeamMembers.validMembersWallets = membersWithEmptyTeam.filter(walletReward => walletReward.enabled && walletReward.poolTokensToSend);
-          }
-
-          // Sort teams by order of creation
-          if (this.teams && this.teams.length) {
-            this.teams.sort((team1, team2) => Number(team1.id) - Number(team2.id));
-          }
-
-          // Compute Team total budgets
-          this.teams
-            .filter(team => team.validMembersWallets && team.validMembersWallets.length)
-            .forEach(team => {
-              team.computedBudget = team.validMembersWallets.reduce((total, walletReward) => total += walletReward.poolTokensToSend || 0, 0);
-            });
-        })
-        .finally(() => this.loading = false);
-    },
-    refreshTeams() {
-      return this.$rewardService.getRewardTeams()
-        .then(teams => this.teams = teams || [])
-        .catch((e) => {
-          console.error  ('Error getting teams list', e);
-          this.error = this.$t('exoplatform.wallet.error.errorRetrievingPool');
-        });
-    },
-    computeTotalRewardsByPlugin() {
-      const totalRewards = {};
-      if (this.rewardSettings && this.rewardSettings.pluginSettings && this.rewardSettings.pluginSettings.length) {
-        this.rewardSettings.pluginSettings.forEach(pluginSetting => totalRewards[pluginSetting.pluginId] = {pluginId: pluginSetting.pluginId, total: 0});
-      }
-
-      this.walletRewards.forEach(walletReward => {
-        if (walletReward && walletReward.rewards) {
-          walletReward.rewards.forEach(rewardDetail => totalRewards[rewardDetail.pluginId] && (totalRewards[rewardDetail.pluginId].total += rewardDetail.points));
-        }
-      });
-
-      this.totalRewards = Object.values(totalRewards);
-    },
-    checkConfigurationConsistency() {
-      this.settingWarnings = [];
-
-      if (!this.contractDetails) {
-        this.settingWarnings.push(this.$t('exoplatform.wallet.warning.noConfiguredToken'));
-      } else if (!this.periodType) {
-        this.settingWarnings.push(this.$t('exoplatform.wallet.warning.noConfiguredToken'));
-        this.settingWarnings.push(this.$t('exoplatform.wallet.warning.missingRewardPeriodicity'));
-      }
-
-      if (!this.rewardSettings) {
-        this.settingWarnings.push(this.$t('exoplatform.wallet.error.emptySettings'));
-      } else {
-        if (!this.rewardSettings.pluginSettings || !this.rewardSettings.pluginSettings.length) {
-          this.settingWarnings.push(this.$t('exoplatform.wallet.warning.noPluginConfiguration'));
-        } else {
-          this.rewardSettings.pluginSettings.forEach(pluginSetting => {
-            if (pluginSetting && !pluginSetting.budgetType) {
-              this.settingWarnings.push(this.$t('exoplatform.wallet.warning.noRewardBudgetConfiguredForPlugin', {0: pluginSetting.pluginId}));
-            }
-          });
-        }
-      }
-
-      return !this.settingWarnings.length;
-    },
-    formatDate(date) {
-      if (!date) {
-        return null;
-      }
-      return date.toLocaleDateString(eXo.env.portal.language);
-    },
-  },
-};
-</script>
diff --git a/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/BudgetConfiguration.vue b/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/BudgetConfiguration.vue
new file mode 100644
index 000000000..dd54d856e
--- /dev/null
+++ b/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/BudgetConfiguration.vue
@@ -0,0 +1,43 @@
+<!--
+  This file is part of the Meeds project (https://meeds.io/).
+
+  Copyright (C) 2020 - 2024 Meeds Association contact@meeds.io
+
+  This program is free software; you can redistribute it and/or
+  modify it under the terms of the GNU Lesser General Public
+  License as published by the Free Software Foundation; either
+  version 3 of the License, or (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+  Lesser General Public License for more details.
+
+  You should have received a copy of the GNU Lesser General Public License
+  along with this program; if not, write to the Free Software Foundation,
+  Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+
+-->
+<template>
+  <v-card
+    class="border-radius border-color my-5 me-5"
+    width="60%"
+    flat>
+    <div class="d-flex flex-column flex-grow-1">
+      <div class="text-header text-wrap px-4 pb-0 pt-3 mt-auto mb-2">
+        {{ $t('wallet.administration.budgetConfiguration') }}
+      </div>
+      <v-spacer />
+      <div class="d-flex flex-column align-center justify-center full-width full-height pt-5">
+        <v-icon color="orange darken-2" size="50">fas fa-coins</v-icon>
+        <span class="mt-5">{{ $t('wallet.administration.budgetConfiguration.setUp') }}</span>
+      </div>
+      <v-btn
+        class="btn btn-primary align-self-center my-4 px-2">
+        <span class="mx-2">
+          {{ $t('wallet.administration.budgetConfiguration.setBudget') }}
+        </span>
+      </v-btn>
+    </div>
+  </v-card>
+</template>
\ No newline at end of file
diff --git a/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/CurrentBalance.vue b/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/CurrentBalance.vue
new file mode 100644
index 000000000..90acb3f2b
--- /dev/null
+++ b/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/CurrentBalance.vue
@@ -0,0 +1,135 @@
+<!--
+  This file is part of the Meeds project (https://meeds.io/).
+
+  Copyright (C) 2020 - 2024 Meeds Association contact@meeds.io
+
+  This program is free software; you can redistribute it and/or
+  modify it under the terms of the GNU Lesser General Public
+  License as published by the Free Software Foundation; either
+  version 3 of the License, or (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+  Lesser General Public License for more details.
+
+  You should have received a copy of the GNU Lesser General Public License
+  along with this program; if not, write to the Free Software Foundation,
+  Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+
+-->
+<template>
+  <v-card
+    :loading="loading"
+    class="border-radius border-color ma-5"
+    flat>
+    <div class="d-flex flex-column flex-grow-1">
+      <v-list-item dense>
+        <v-list-item-content>
+          <v-list-item-title class="text-header text-wrap">
+            {{ $t('exoplatform.wallet.label.currentBalance') }}
+          </v-list-item-title>
+        </v-list-item-content>
+        <v-list-item-action v-if="useWalletAdmin" class="ma-auto">
+          <v-tooltip
+            :disabled="$root.isMobile"
+            bottom>
+            <template #activator="{ on }">
+              <div v-on="on">
+                <v-btn
+                  :href="walletAdminUri"
+                  :aria-label="$t('wallet.administration.manageWallet')"
+                  target="_blank"
+                  small
+                  icon>
+                  <v-icon size="18">fas fa-credit-card</v-icon>
+                </v-btn>
+              </div>
+            </template>
+            <span> {{ $t('wallet.administration.manageWallet') }}</span>
+          </v-tooltip>
+        </v-list-item-action>
+      </v-list-item>
+      <v-btn
+        v-if="!loading && !useWalletAdmin"
+        :href="walletAdminUri"
+        class="btn btn-primary align-self-center my-4 px-2">
+        <span class="mx-2">
+          {{ $t('wallet.administration.fundWallet') }}
+        </span>
+      </v-btn>
+      <template v-else>
+        <v-list-item dense>
+          <v-list-item-content>
+            <v-list-item-title class="text-wrap">
+              {{ tokenName }}
+            </v-list-item-title>
+          </v-list-item-content>
+          <v-list-item-action class="d-inline-block ma-auto pe-1">
+            <span class="symbol fundsLabels"> {{ tokenSymbol }} </span> <span class="fundsLabels"> {{ tokenBalance }} </span>
+          </v-list-item-action>
+        </v-list-item>
+        <v-list-item dense>
+          <v-list-item-content>
+            <v-list-item-title class="text-wrap">
+              {{ $t('wallet.administration.gas') }}
+            </v-list-item-title>
+          </v-list-item-content>
+          <v-list-item-action class="ma-auto pe-1">
+            {{ etherBalanceLabel }}
+          </v-list-item-action>
+        </v-list-item>
+      </template>
+    </div>
+  </v-card>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      loading: false,
+      adminWallet: null,
+      contractDetails: null,
+      walletAdminUri: '/portal/administration/home/rewards/wallet',
+    };
+  },
+  computed: {
+    tokenName() {
+      return this.contractDetails?.name;
+    },
+    tokenSymbol() {
+      return this.contractDetails?.symbol;
+    },
+    tokenBalance() {
+      return this.adminWallet?.tokenBalance || 0;
+    },
+    etherBalance() {
+      return this.adminWallet?.etherBalance || 0;
+    },
+    etherBalanceLabel() {
+      return `${this.contractDetails?.cryptocurrency} ${this.walletUtils?.toFixed(this.etherBalance)}`;
+    },
+    useWalletAdmin() {
+      return this.etherBalance && Number(this.etherBalance) >= 0.002 && this.tokenBalance && Number(this.tokenBalance) >= 0.02;
+    },
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.loading = true;
+      this.error = null;
+      return this.walletUtils.initSettings(false, true)
+        .then(() => {
+          this.contractDetails = window.walletSettings.contractDetail;
+          return this.addressRegistry.searchWalletByTypeAndId('admin', 'admin');
+        })
+        .then((adminWallet) => this.adminWallet = adminWallet)
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+  }
+};
+</script>
\ No newline at end of file
diff --git a/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/RewardManagement.vue b/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/RewardManagement.vue
new file mode 100644
index 000000000..3861414e5
--- /dev/null
+++ b/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/RewardManagement.vue
@@ -0,0 +1,37 @@
+<!--
+  This file is part of the Meeds project (https://meeds.io/).
+
+  Copyright (C) 2020 - 2024 Meeds Association contact@meeds.io
+
+  This program is free software; you can redistribute it and/or
+  modify it under the terms of the GNU Lesser General Public
+  License as published by the Free Software Foundation; either
+  version 3 of the License, or (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+  Lesser General Public License for more details.
+
+  You should have received a copy of the GNU Lesser General Public License
+  along with this program; if not, write to the Free Software Foundation,
+  Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+
+-->
+<template>
+  <div class="mx-5">
+    <div class="pt-6 text-title">{{ $t('wallet.administration.rewardManagement') }}</div>
+    <div class="pt-8 d-flex align-center justify-center">
+      <v-icon
+        color="orange darken-2"
+        size="50">
+        fa-money-bill
+      </v-icon>
+    </div>
+    <div class="d-flex flex-column justify-center align-center pb-8 pt-3 col-sm-8 mx-auto">
+      <p class="text-header mb-8">
+        {{ $t('wallet.administration.rewardManagement.noContributionsYet') }}
+      </p>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/wallet-webapps/src/main/webapp/vue-app/wallet-reward/initComponents.js b/wallet-webapps/src/main/webapp/vue-app/wallet-reward/initComponents.js
index d203667e5..50b9e23d4 100644
--- a/wallet-webapps/src/main/webapp/vue-app/wallet-reward/initComponents.js
+++ b/wallet-webapps/src/main/webapp/vue-app/wallet-reward/initComponents.js
@@ -1,4 +1,7 @@
 import RewardApp from './components/RewardApp.vue';
+import RewardManagement from './components/reward/RewardManagement.vue';
+import CurrentBalance from './components/reward/CurrentBalance.vue';
+import BudgetConfiguration from './components/reward/BudgetConfiguration.vue';
 import RewardDetailModal from './components/reward/modal/RewardDetailModal.vue';
 import TimeZoneSelectBox from './components/reward/TimeZoneSelectBox.vue';
 import ConfigurationTab from './components/reward/ConfigurationTab.vue';
@@ -8,6 +11,9 @@ import TeamsListTab from './components/reward/TeamsListTab.vue';
 
 const components = {
   'wallet-reward-app': RewardApp,
+  'wallet-reward-management': RewardManagement,
+  'wallet-current-balance': CurrentBalance,
+  'wallet-budget-configuration': BudgetConfiguration,
   'wallet-reward-reward-detail-modal': RewardDetailModal,
   'wallet-reward-timezone-selectbox': TimeZoneSelectBox,
   'wallet-reward-configuration-tab': ConfigurationTab,