src/views/admin/club/members/MemberOverview.vue

@@ -25,6 +25,20 @@
         <label for="birthdate">Geburtsdatum</label>
         <input type="date" id="birthdate" :value="activeMemberObj.birthdate" readonly />
       </div>
+      <div v-if="membershipStatistics.length != 0">
+        <p>Statistiken zur Mitgliedschaft</p>
+        <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+          <div
+            v-for="stat in membershipStatistics"
+            class="bg-primary p-2 text-white flex flex-row justify-between items-center"
+          >
+            <p>
+              {{ stat.status }} für gesamt {{ stat.durationInDays }} Tage
+              <span class="whitespace-nowrap"> ~> {{ stat.durationInYears.replace("_", "") }} Jahre</span>
+            </p>
+          </div>
+        </div>
+      </div>
       <div v-if="activeMemberObj.firstMembershipEntry">
         <p>Erster Eintrag Mitgliedschaft</p>
         <div class="flex flex-col h-fit w-full border border-primary rounded-md">
@@ -125,6 +139,7 @@ import { defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
 import { useMemberStore } from "@/stores/admin/club/member/member";
+import { useMembershipStore } from "@/stores/admin/club/member/membership";
 </script>
 
 <script lang="ts">
@@ -133,13 +148,17 @@ export default defineComponent({
     memberId: String,
   },
   computed: {
-    ...mapState(useMemberStore, ["activeMemberObj", "loadingActive"]),
+    ...mapState(useMemberStore, ["activeMemberObj", "activeMemberStatistics", "loadingActive"]),
+    ...mapState(useMembershipStore, ["membershipStatistics"]),
   },
   mounted() {
     this.fetchMemberByActiveId();
+    this.fetchMemberStatisticsByActiveId();
+    this.fetchMembershipStatisticsForMember();
   },
   methods: {
-    ...mapActions(useMemberStore, ["fetchMemberByActiveId"]),
+    ...mapActions(useMemberStore, ["fetchMemberByActiveId", "fetchMemberStatisticsByActiveId"]),
+    ...mapActions(useMembershipStore, ["fetchMembershipStatisticsForMember"]),
   },
 });
 </script>