1.7.0

Merge pull request 'minor v1.7.0' (#108 ) from develop into main
Reviewed-on: #108
2025-06-07 15:56:43 +02:00 · 2025-06-07 13:55:06 +00:00 · 2025-06-07 13:52:57 +00:00 · 2025-06-07 15:44:41 +02:00 · 2025-06-06 09:37:01 +02:00 · 2025-06-06 07:36:01 +00:00
53 changed files with 1757 additions and 951 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "ff-admin",
-  "version": "1.5.3",
+  "version": "1.7.0",
  "description": "Feuerwehr/Verein Mitgliederverwaltung UI",
  "type": "module",
  "scripts": {
@ -32,7 +32,7 @@
    "@fullcalendar/vue3": "^6.1.17",
    "@headlessui/vue": "^1.7.23",
    "@heroicons/vue": "^2.2.0",
-    "@tailwindcss/vite": "^4.1.5",
+    "@tailwindcss/vite": "^4.1.8",
    "@vueup/vue-quill": "^1.2.0",
    "axios": "^1.9.0",
    "event-source-polyfill": "^1.0.31",
@ -49,19 +49,19 @@
    "markdown-it-prism": "^3.0.0",
    "nprogress": "^0.2.0",
    "pdf-dist": "^1.0.0",
-    "pinia": "^3.0.2",
+    "pinia": "^3.0.3",
    "pwacompat": "^2.0.17",
    "qrcode": "^1.5.4",
    "qs": "^6.14.0",
    "socket.io-client": "^4.8.1",
    "unplugin-vue-markdown": "^28.3.1",
    "uuid": "^11.1.0",
-    "vue": "^3.5.13",
+    "vue": "^3.5.16",
    "vue-router": "^4.5.1"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.11.0",
-    "@tailwindcss/postcss": "^4.1.5",
+    "@tailwindcss/postcss": "^4.1.8",
    "@tsconfig/node20": "^20.1.5",
    "@types/eslint": "~9.6.1",
    "@types/event-source-polyfill": "^1.0.5",
@ -70,21 +70,21 @@
    "@types/lodash.differencewith": "^4.5.9",
    "@types/lodash.isequal": "^4.5.8",
    "@types/markdown-it": "^14.1.2",
-    "@types/node": "^22.15.12",
+    "@types/node": "^22.15.30",
    "@types/nprogress": "^0.2.3",
    "@types/qrcode": "^1.5.5",
-    "@types/qs": "^6.9.18",
+    "@types/qs": "^6.14.0",
    "@types/uuid": "^10.0.0",
    "@vite-pwa/assets-generator": "^1.0.0",
-    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue": "^5.2.4",
    "@vue/eslint-config-prettier": "^10.2.0",
    "@vue/eslint-config-typescript": "^14.5.0",
    "@vue/tsconfig": "^0.7.0",
-    "eslint": "^9.26.0",
-    "eslint-plugin-vue": "^10.1.0",
-    "npm-run-all2": "^8.0.1",
+    "eslint": "^9.28.0",
+    "eslint-plugin-vue": "^10.2.0",
+    "npm-run-all2": "^8.0.4",
    "prettier": "^3.5.3",
-    "tailwindcss": "^4.1.5",
+    "tailwindcss": "^4.1.8",
    "typescript": "^5.8.3",
    "vite": "^6.3.5",
    "vite-plugin-pwa": "^1.0.0",
--- a/public/admin-logo.png
+++ b/public/admin-logo.png
--- a/public/icon.png
+++ b/public/icon.png
--- a/src/App.vue
+++ b/src/App.vue
@ -12,6 +12,7 @@
  <Teleport to="head">
    <title>{{ clubName }}</title>
    <link rel="icon" type="image/ico" :href="config.server_address + '/api/public/favicon.ico'" />
+    <link rel="icon" type="image/png" href="/icon.png" />
    <link rel="manifest" :href="config.server_address + '/api/public/manifest.webmanifest'" />
  </Teleport>
 </template>
--- a/src/components/AppIcon.vue
+++ b/src/components/AppIcon.vue
@ -1,5 +1,13 @@
 <template>
-  <img ref="icon" :src="url + '/api/public/icon.png'" alt="LOGO" class="h-full w-auto" />
+  <img v-if="useFallback" ref="fallback" src="/icon.png" alt="LOGO" class="h-full w-auto" />
+  <img
+    v-else
+    ref="icon"
+    :src="url + '/api/public/icon.png'"
+    alt="LOGO"
+    class="h-full w-auto"
+    @error="useFallback = true"
+  />
 </template>

 <script setup lang="ts">
@ -16,6 +24,11 @@ export default defineComponent({
      (this.$refs.icon as HTMLImageElement).src = url + "/api/public/icon.png?" + new Date().getTime();
    },
  },
+  data() {
+    return {
+      useFallback: false,
+    };
+  },
  computed: {
    ...mapState(useSettingStore, ["readSetting"]),
    icon() {
--- a/src/components/AppLogo.vue
+++ b/src/components/AppLogo.vue
@ -1,5 +1,13 @@
 <template>
-  <img ref="logo" :src="url + '/api/public/applogo.png'" alt="LOGO" class="h-full w-auto" />
+  <img v-if="useFallback" ref="fallback" src="/admin-logo.png" alt="LOGO" class="h-full w-auto" />
+  <img
+    v-else
+    ref="logo"
+    :src="url + '/api/public/applogo.png'"
+    alt="LOGO"
+    class="h-full w-auto"
+    @error="useFallback = true"
+  />
 </template>

 <script setup lang="ts">
@ -16,6 +24,11 @@ export default defineComponent({
      (this.$refs.logo as HTMLImageElement).src = url + "/api/public/applogo.png?t=" + new Date().getTime();
    },
  },
+  data() {
+    return {
+      useFallback: false,
+    };
+  },
  computed: {
    ...mapState(useSettingStore, ["readSetting"]),
    logo() {
--- a/src/components/DoubleConfirmClick.vue
+++ b/src/components/DoubleConfirmClick.vue
@ -0,0 +1,64 @@
+<template>
+  <div
+    class="cursor-pointer"
+    :class="{ 'text-white': light, 'animate-pulse': isSensitive }"
+    :title="`2 mal klicken für ${action}`"
+    @click.prevent="handleClick"
+  >
+    <slot :isSensitive="isSensitive">
+      <CursorArrowRaysIcon v-if="!isSensitive" class="h-5 w-5" />
+      <CursorArrowRippleIcon v-else class="h-5 w-5" />
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CursorArrowRaysIcon, CursorArrowRippleIcon } from "@heroicons/vue/24/outline";
+import { defineComponent } from "vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    light: {
+      type: Boolean,
+      default: false,
+    },
+    action: {
+      type: String,
+      default: "Bestätigung",
+    },
+  },
+  emits: ["click:first", "click:submit", "click:reset"],
+  data() {
+    return {
+      isSensitive: false as boolean,
+      timeout: undefined as any,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    handleClick() {
+      if (this.isSensitive) {
+        clearTimeout(this.timeout);
+        this.isSensitive = false;
+        this.$emit("click:submit");
+      } else {
+        this.timeout = setTimeout(() => {
+          this.isSensitive = true;
+          this.$emit("click:first");
+
+          this.timeout = setTimeout(() => {
+            this.isSensitive = false;
+            this.$emit("click:reset");
+          }, 2000);
+        }, 500);
+      }
+    },
+  },
+});
+</script>
--- a/src/components/admin/club/member/CreateMemberModal.vue
+++ b/src/components/admin/club/member/CreateMemberModal.vue
@ -80,6 +80,10 @@

        <input type="text" id="internalId" />
      </div>
+      <div>
+        <label for="note">Notiz (optional)</label>
+        <textarea type="text" id="note" />
+      </div>
      <div class="flex flex-row gap-2">
        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
        <Spinner v-if="status == 'loading'" class="my-auto" />
@ -154,6 +158,7 @@ export default defineComponent({
        nameaffix: formData.nameaffix.value,
        birthdate: formData.birthdate.value,
        internalId: formData.internalId.value,
+        note: formData.note.value,
      };
      this.status = "loading";
      this.createMember(createMember)
--- a/src/components/admin/club/member/MemberEducationCreateModal.vue
+++ b/src/components/admin/club/member/MemberEducationCreateModal.vue
@ -0,0 +1,164 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Mitglied-Aus-/Fortbildung hinzufügen</p>
+    </div>
+    <br />
+    <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
+      <div>
+        <Listbox v-model="selectedEducation" name="education">
+          <ListboxLabel>Aus-/Fortbildung</ListboxLabel>
+          <div class="relative mt-1">
+            <ListboxButton
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+            >
+              <span class="block truncate w-full text-start">
+                {{
+                  educations.length != 0
+                    ? (selectedEducation?.education ?? "bitte auswählen")
+                    : "keine Auswahl vorhanden"
+                }}</span
+              >
+              <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+              </span>
+            </ListboxButton>
+
+            <transition
+              leave-active-class="transition duration-100 ease-in"
+              leave-from-class="opacity-100"
+              leave-to-class="opacity-0"
+            >
+              <ListboxOptions
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
+              >
+                <ListboxOption v-if="educations.length == 0" disabled as="template">
+                  <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">
+                    <span :class="['font-normal', 'block truncate']">keine Auswahl vorhanden</span>
+                  </li>
+                </ListboxOption>
+                <ListboxOption
+                  v-slot="{ active, selected }"
+                  v-for="education in educations"
+                  :key="education.id"
+                  :value="education"
+                  as="template"
+                >
+                  <li
+                    :class="[
+                      active ? 'bg-red-200 text-amber-900' : 'text-gray-900',
+                      'relative cursor-default select-none py-2 pl-10 pr-4',
+                    ]"
+                  >
+                    <span :class="[selected ? 'font-medium' : 'font-normal', 'block truncate']">{{
+                      education.education
+                    }}</span>
+                    <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3 text-primary">
+                      <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                    </span>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </transition>
+          </div>
+        </Listbox>
+      </div>
+      <div>
+        <label for="start">Start</label>
+        <input type="date" id="start" required />
+      </div>
+      <div>
+        <label for="end">Ende (optional)</label>
+        <input type="date" id="end" />
+      </div>
+      <div>
+        <label for="place">Ort (optional)</label>
+        <input type="text" id="place" />
+      </div>
+      <div>
+        <label for="note">Notiz (optional)</label>
+        <input type="text" id="note" />
+      </div>
+
+      <div class="flex flex-row gap-2">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import { useEducationStore } from "@/stores/admin/configuration/education";
+import type { EducationViewModel } from "@/viewmodels/admin/configuration/education.models";
+import type { CreateMemberEducationViewModel } from "@/viewmodels/admin/club/member/memberEducation.models";
+import { useMemberEducationStore } from "@/stores/admin/club/member/memberEducation";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+      selectedEducation: undefined as undefined | EducationViewModel,
+    };
+  },
+  computed: {
+    ...mapState(useEducationStore, ["educations"]),
+  },
+  mounted() {
+    this.fetchEducations();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useMemberEducationStore, ["createMemberEducation"]),
+    ...mapActions(useEducationStore, ["fetchEducations"]),
+    triggerCreate(e: any) {
+      if (this.selectedEducation == undefined) return;
+      let formData = e.target.elements;
+      let createMemberEducation: CreateMemberEducationViewModel = {
+        start: formData.start.value,
+        end: formData.end.value,
+        note: formData.note.value,
+        place: formData.place.value,
+        educationId: this.selectedEducation.id,
+      };
+      this.status = "loading";
+      this.createMemberEducation(createMemberEducation)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
--- a/src/components/admin/club/member/MemberEducationDeleteModal.vue
+++ b/src/components/admin/club/member/MemberEducationDeleteModal.vue
@ -0,0 +1,82 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Mitglied-Aus-/Fortbildung löschen</p>
+    </div>
+    <br />
+    <p class="text-center">Aus-/Fortbildung {{ memberEducation?.education }} löschen?</p>
+    <br />
+
+    <div class="flex flex-row gap-2">
+      <button
+        primary
+        type="submit"
+        :disabled="status == 'loading' || status?.status == 'success'"
+        @click="triggerDelete"
+      >
+        löschen
+      </button>
+      <Spinner v-if="status == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="status?.status == 'success'" />
+      <FailureXMark v-else-if="status?.status == 'failed'" />
+    </div>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useMemberEducationStore } from "@/stores/admin/club/member/memberEducation";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+    ...mapState(useMemberEducationStore, ["memberEducations"]),
+    memberEducation() {
+      return this.memberEducations.find((m) => m.id == this.data);
+    },
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useMemberEducationStore, ["deleteMemberEducation"]),
+    triggerDelete() {
+      this.status = "loading";
+      this.deleteMemberEducation(this.data)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
--- a/src/components/admin/club/member/MemberEducationEditModal.vue
+++ b/src/components/admin/club/member/MemberEducationEditModal.vue
@ -0,0 +1,198 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Mitglied-Aus-/Fortbildung bearbeiten</p>
+    </div>
+    <br />
+    <Spinner v-if="loading == 'loading'" class="mx-auto" />
+    <p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">&#8634; laden fehlgeschlagen</p>
+    <form v-else-if="memberEducation != null" class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
+      <div>
+        <Listbox v-model="memberEducation.educationId" name="education">
+          <ListboxLabel>Aus-/Fortbildung</ListboxLabel>
+          <div class="relative mt-1">
+            <ListboxButton
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+            >
+              <span class="block truncate w-full text-start">
+                {{
+                  educations.length != 0 ? (selectedEducation ?? "bitte auswählen") : "keine Auswahl vorhanden"
+                }}</span
+              >
+              <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+              </span>
+            </ListboxButton>
+
+            <transition
+              leave-active-class="transition duration-100 ease-in"
+              leave-from-class="opacity-100"
+              leave-to-class="opacity-0"
+            >
+              <ListboxOptions
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
+              >
+                <ListboxOption v-if="educations.length == 0" disabled as="template">
+                  <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">
+                    <span :class="['font-normal', 'block truncate']">keine Auswahl vorhanden</span>
+                  </li>
+                </ListboxOption>
+                <ListboxOption
+                  v-slot="{ active, selected }"
+                  v-for="education in educations"
+                  :key="education.id"
+                  :value="education.id"
+                  as="template"
+                >
+                  <li
+                    :class="[
+                      active ? 'bg-red-200 text-amber-900' : 'text-gray-900',
+                      'relative cursor-default select-none py-2 pl-10 pr-4',
+                    ]"
+                  >
+                    <span :class="[selected ? 'font-medium' : 'font-normal', 'block truncate']">{{
+                      education.education
+                    }}</span>
+                    <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3 text-primary">
+                      <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                    </span>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </transition>
+          </div>
+        </Listbox>
+      </div>
+      <div>
+        <label for="start">Start</label>
+        <input type="date" id="start" required v-model="memberEducation.start" />
+      </div>
+      <div>
+        <label for="end">Ende (optional)</label>
+        <input type="date" id="end" v-model="memberEducation.end" />
+      </div>
+      <div>
+        <label for="place">Ort (optional)</label>
+        <input type="text" id="place" v-model="memberEducation.place" />
+      </div>
+      <div>
+        <label for="note">Notiz (optional)</label>
+        <input type="text" id="note" v-model="memberEducation.note" />
+      </div>
+
+      <div class="flex flex-row gap-2">
+        <button primary-outline type="reset" :disabled="canSaveOrReset" @click="resetForm">verwerfen</button>
+        <button primary type="submit" :disabled="status == 'loading' || canSaveOrReset">speichern</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          schließen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import { useEducationStore } from "@/stores/admin/configuration/education";
+import type {
+  CreateMemberEducationViewModel,
+  MemberEducationViewModel,
+  UpdateMemberEducationViewModel,
+} from "@/viewmodels/admin/club/member/memberEducation.models";
+import { useMemberEducationStore } from "@/stores/admin/club/member/memberEducation";
+import isEqual from "lodash.isequal";
+import cloneDeep from "lodash.clonedeep";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      origin: null as null | MemberEducationViewModel,
+      memberEducation: null as null | MemberEducationViewModel,
+      timeout: undefined as any,
+    };
+  },
+  computed: {
+    ...mapState(useEducationStore, ["educations"]),
+    ...mapState(useModalStore, ["data"]),
+    canSaveOrReset(): boolean {
+      return isEqual(this.origin, this.memberEducation);
+    },
+    selectedEducation() {
+      return this.educations.find((ms) => ms.id == this.memberEducation?.educationId)?.education;
+    },
+  },
+  mounted() {
+    this.fetchEducations();
+    this.fetchItem();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useMemberEducationStore, ["updateMemberEducation", "fetchMemberEducationById"]),
+    ...mapActions(useEducationStore, ["fetchEducations"]),
+    resetForm() {
+      this.memberEducation = cloneDeep(this.origin);
+    },
+    fetchItem() {
+      this.fetchMemberEducationById(this.data)
+        .then((result) => {
+          this.memberEducation = result.data;
+          this.origin = cloneDeep(result.data);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    triggerCreate(e: any) {
+      if (this.memberEducation == null) return;
+      let formData = e.target.elements;
+      let updateMemberEducation: UpdateMemberEducationViewModel = {
+        id: this.memberEducation.id,
+        start: formData.start.value,
+        end: formData.end.value,
+        note: formData.note.value,
+        place: formData.place.value,
+        educationId: this.memberEducation.educationId,
+      };
+      this.status = "loading";
+      this.updateMemberEducation(updateMemberEducation)
+        .then(() => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>
--- a/src/components/admin/club/member/MemberEducationListItem.vue
+++ b/src/components/admin/club/member/MemberEducationListItem.vue
@ -0,0 +1,54 @@
+<template>
+  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+    <div class="bg-primary p-2 text-white flex flex-row gap-2 justify-between items-center">
+      <p class="grow">{{ education.education }}</p>
+      <PencilIcon v-if="can('update', 'club', 'member')" class="w-5 h-5 cursor-pointer" @click="openEditModal" />
+      <TrashIcon v-if="can('delete', 'club', 'member')" class="w-5 h-5 cursor-pointer" @click="openDeleteModal" />
+    </div>
+    <div class="p-2">
+      <p>
+        besucht: {{ education.start }} <span v-if="education.end">bis {{ education.end }}</span>
+      </p>
+      <p v-if="education.place">Ort: {{ education.place }}</p>
+      <p v-if="education.note">Notiz: {{ education.note }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import type { MemberEducationViewModel } from "@/viewmodels/admin/club/member/memberEducation.models";
+import { PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "@/stores/modal";
+import { useAbilityStore } from "@/stores/ability";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    education: {
+      type: Object as PropType<MemberEducationViewModel>,
+      default: {},
+    },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    openEditModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/MemberEducationEditModal.vue"))),
+        this.education.id
+      );
+    },
+    openDeleteModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/MemberEducationDeleteModal.vue"))),
+        this.education.id
+      );
+    },
+  },
+});
+</script>
--- a/src/components/admin/club/member/MemberListItem.vue
+++ b/src/components/admin/club/member/MemberListItem.vue
@ -1,17 +1,19 @@
 <template>
-  <RouterLink 
+  <RouterLink
    :to="{ name: 'admin-club-member-overview', params: { memberId: member.id } }"
    class="flex flex-col h-fit w-full border border-primary rounded-md"
  >
-    <div
-      class="bg-primary p-2 text-white flex flex-row justify-between items-center"
-    >
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
      <p>{{ member.lastname }}, {{ member.firstname }} {{ member.nameaffix ? `- ${member.nameaffix}` : "" }}</p>
    </div>
    <div class="p-2">
      <p v-if="member.internalId">Interne ID: {{ member.internalId }}</p>
+      <p v-if="member.note">Notiz: {{ member.note }}</p>
      <p>beigetreten: {{ member.firstMembershipEntry?.start }}</p>
-      <p v-if="member.lastMembershipEntry?.end">ausgetreten: {{ member.lastMembershipEntry?.end }}, da {{member.lastMembershipEntry?.terminationReason ?? '- kein Grund angegeben'}}</p>
+      <p v-if="member.lastMembershipEntry?.end">
+        ausgetreten: {{ member.lastMembershipEntry?.end }}, da
+        {{ member.lastMembershipEntry?.terminationReason ?? "- kein Grund angegeben" }}
+      </p>
    </div>
  </RouterLink>
 </template>
--- a/src/components/admin/club/newsletter/CreateNewsletterModal.vue
+++ b/src/components/admin/club/newsletter/CreateNewsletterModal.vue
@ -63,11 +63,12 @@ export default defineComponent({
      };
      this.status = "loading";
      this.createNewsletter(createNewsletter)
-        .then(() => {
+        .then((res) => {
          this.status = { status: "success" };
          this.timeout = setTimeout(() => {
            (this.$refs.form as HTMLFormElement).reset();
            this.closeModal();
+            this.$router.push({ name: "admin-club-newsletter-overview", params: { newsletterId: res.data } });
          }, 1500);
        })
        .catch(() => {
--- a/src/components/admin/club/newsletter/NewsletterListItem.vue
+++ b/src/components/admin/club/newsletter/NewsletterListItem.vue
@ -4,7 +4,15 @@
      :to="{ name: 'admin-club-newsletter-overview', params: { newsletterId: newsletter.id } }"
      class="bg-primary p-2 text-white flex flex-row justify-between items-center"
    >
-      <p>{{ newsletter.title }}</p>
+      <p>
+        {{ newsletter.title }} ({{
+          new Date(newsletter.createdAt).toLocaleDateString("de-DE", {
+            day: "2-digit",
+            month: "2-digit",
+            year: "numeric",
+          })
+        }})
+      </p>
      <PaperAirplaneIcon v-if="newsletter.isSent" class="w-5 h-5" />
    </RouterLink>
    <div class="p-2 max-h-48 overflow-y-auto">
--- a/src/components/admin/club/protocol/CreateProtocolModal.vue
+++ b/src/components/admin/club/protocol/CreateProtocolModal.vue
@ -66,11 +66,12 @@ export default defineComponent({
      };
      this.status = "loading";
      this.createProtocol(createProtocol)
-        .then(() => {
+        .then((res) => {
          this.status = { status: "success" };
          this.timeout = setTimeout(() => {
            (this.$refs.form as HTMLFormElement).reset();
            this.closeModal();
+            this.$router.push({ name: "admin-club-protocol-overview", params: { protocolId: res.data } });
          }, 1500);
        })
        .catch(() => {
--- a/src/components/admin/configuration/education/CreateEducationModal.vue
+++ b/src/components/admin/configuration/education/CreateEducationModal.vue
@ -0,0 +1,81 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Aus-/Fortbildung erstellen</p>
+    </div>
+    <br />
+    <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
+      <div>
+        <label for="education">Bezeichnung</label>
+        <input type="text" id="education" required />
+      </div>
+      <div>
+        <label for="description">Beschreibung (optional)</label>
+        <input type="text" id="description" />
+      </div>
+      <div class="flex flex-row gap-2">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useEducationStore } from "@/stores/admin/configuration/education";
+import type { CreateEducationViewModel } from "@/viewmodels/admin/configuration/education.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useEducationStore, ["createEducation"]),
+    triggerCreate(e: any) {
+      let formData = e.target.elements;
+      let createEducation: CreateEducationViewModel = {
+        education: formData.education.value,
+        description: formData.description.value,
+      };
+      this.status = "loading";
+      this.createEducation(createEducation)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
--- a/src/components/admin/configuration/education/DeleteEducationModal.vue
+++ b/src/components/admin/configuration/education/DeleteEducationModal.vue
@ -0,0 +1,75 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Aus-/Fortbildung {{ education?.education }} löschen?</p>
+    </div>
+    <br />
+
+    <div class="flex flex-row gap-2">
+      <button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDelete">
+        unwiederuflich löschen
+      </button>
+      <Spinner v-if="status == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="status?.status == 'success'" />
+      <FailureXMark v-else-if="status?.status == 'failed'" />
+    </div>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useEducationStore } from "@/stores/admin/configuration/education";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+    ...mapState(useEducationStore, ["educations"]),
+    education() {
+      return this.educations.find((r) => r.id == this.data);
+    },
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useEducationStore, ["deleteEducation"]),
+    triggerDelete() {
+      this.status = "loading";
+      this.deleteEducation(this.data)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
--- a/src/components/admin/configuration/education/EducationListItem.vue
+++ b/src/components/admin/configuration/education/EducationListItem.vue
@ -0,0 +1,55 @@
+<template>
+  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>{{ education.education }}</p>
+      <div class="flex flex-row">
+        <RouterLink
+          v-if="can('update', 'configuration', 'education')"
+          :to="{ name: 'admin-configuration-education-edit', params: { id: education.id } }"
+        >
+          <PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </RouterLink>
+        <div v-if="can('delete', 'configuration', 'education')" @click="openDeleteModal">
+          <TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col p-2">
+      <div class="flex flex-row gap-2">
+        <p class="min-w-16">Beschreibung:</p>
+        <p class="grow overflow-hidden">{{ education.description }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, defineAsyncComponent, markRaw, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { useAbilityStore } from "@/stores/ability";
+import { useModalStore } from "@/stores/modal";
+import type { EducationViewModel } from "@/viewmodels/admin/configuration/education.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    education: { type: Object as PropType<EducationViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    openDeleteModal() {
+      this.openModal(
+        markRaw(
+          defineAsyncComponent(() => import("@/components/admin/configuration/education/DeleteEducationModal.vue"))
+        ),
+        this.education.id
+      );
+    },
+  },
+});
+</script>
--- a/src/components/admin/management/setting/AppSetting.vue
+++ b/src/components/admin/management/setting/AppSetting.vue
@ -58,7 +58,7 @@ export default defineComponent({
        },
        {
          key: "app.show_link_to_calendar",
-          value: formData.show_link_to_calendar.checked || null,
+          value: formData.show_link_to_calendar.checked,
        },
      ]);
    },
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -142,6 +142,12 @@ const router = createRouter({
                      component: () => import("@/views/admin/club/members/MemberAwards.vue"),
                      props: true,
                    },
+                    {
+                      path: "educations",
+                      name: "admin-club-member-educations",
+                      component: () => import("@/views/admin/club/members/MemberEducations.vue"),
+                      props: true,
+                    },
                    {
                      path: "qualifications",
                      name: "admin-club-member-qualifications",
@ -361,6 +367,30 @@ const router = createRouter({
                },
              ],
            },
+            {
+              path: "education",
+              name: "admin-configuration-education-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "configuration", module: "education" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-configuration-education",
+                  component: () => import("@/views/admin/configuration/education/Education.vue"),
+                  meta: { type: "read", section: "configuration", module: "education" },
+                  beforeEnter: [abilityAndNavUpdate],
+                },
+                {
+                  path: ":id/edit",
+                  name: "admin-configuration-education-edit",
+                  component: () => import("@/views/admin/configuration/education/EducationEdit.vue"),
+                  meta: { type: "update", section: "configuration", module: "education" },
+                  beforeEnter: [abilityAndNavUpdate],
+                  props: true,
+                },
+              ],
+            },
            {
              path: "executive-position",
              name: "admin-configuration-executive_position-route",
--- a/src/router/memberGuard.ts
+++ b/src/router/memberGuard.ts
@ -4,6 +4,7 @@ import { useMemberAwardStore } from "@/stores/admin/club/member/memberAward";
 import { useMemberExecutivePositionStore } from "@/stores/admin/club/member/memberExecutivePosition";
 import { useMemberQualificationStore } from "@/stores/admin/club/member/memberQualification";
 import { useMembershipStore } from "@/stores/admin/club/member/membership";
+import { useMemberEducationStore } from "../stores/admin/club/member/memberEducation";

 export async function setMemberId(to: any, from: any, next: any) {
  const member = useMemberStore();
@ -14,6 +15,7 @@ export async function setMemberId(to: any, from: any, next: any) {
  useMemberAwardStore().$reset();
  useMemberExecutivePositionStore().$reset();
  useMemberQualificationStore().$reset();
+  useMemberEducationStore().$reset();

  next();
 }
@ -28,6 +30,7 @@ export async function resetMemberStores(to: any, from: any, next: any) {
  useMemberAwardStore().$reset();
  useMemberExecutivePositionStore().$reset();
  useMemberQualificationStore().$reset();
+  useMemberEducationStore().$reset();

  next();
 }
--- a/src/stores/admin/club/member/member.ts
+++ b/src/stores/admin/club/member/member.ts
@ -106,6 +106,7 @@ export const useMemberStore = defineStore("member", {
        nameaffix: member.nameaffix,
        birthdate: member.birthdate,
        internalId: member.internalId,
+        note: member.note,
      });
      this.fetchMembers();
      return result;
@ -118,6 +119,7 @@ export const useMemberStore = defineStore("member", {
        nameaffix: member.nameaffix,
        birthdate: member.birthdate,
        internalId: member.internalId,
+        note: member.note,
      });
      this.fetchMembers();
      return result;
--- a/src/stores/admin/club/member/memberEducation.ts
+++ b/src/stores/admin/club/member/memberEducation.ts
@ -0,0 +1,67 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+import { useMemberStore } from "./member";
+import type {
+  CreateMemberEducationViewModel,
+  MemberEducationViewModel,
+  UpdateMemberEducationViewModel,
+} from "@/viewmodels/admin/club/member/memberEducation.models";
+
+export const useMemberEducationStore = defineStore("memberEducation", {
+  state: () => {
+    return {
+      memberEducations: [] as Array<MemberEducationViewModel>,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchMemberEducationsForMember() {
+      const memberId = useMemberStore().activeMember;
+      this.loading = "loading";
+      http
+        .get(`/admin/member/${memberId}/educations`)
+        .then((result) => {
+          this.memberEducations = result.data;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    fetchMemberEducationById(id: number) {
+      const memberId = useMemberStore().activeMember;
+      return http.get(`/admin/member/${memberId}/education/${id}`);
+    },
+    async createMemberEducation(memberEducation: CreateMemberEducationViewModel): Promise<AxiosResponse<any, any>> {
+      const memberId = useMemberStore().activeMember;
+      const result = await http.post(`/admin/member/${memberId}/education`, {
+        start: memberEducation.start,
+        end: memberEducation.end,
+        place: memberEducation.place,
+        note: memberEducation.note,
+        educationId: memberEducation.educationId,
+      });
+      this.fetchMemberEducationsForMember();
+      return result;
+    },
+    async updateMemberEducation(memberEducation: UpdateMemberEducationViewModel): Promise<AxiosResponse<any, any>> {
+      const memberId = useMemberStore().activeMember;
+      const result = await http.patch(`/admin/member/${memberId}/education/${memberEducation.id}`, {
+        start: memberEducation.start,
+        end: memberEducation.end,
+        place: memberEducation.place,
+        note: memberEducation.note,
+        educationId: memberEducation.educationId,
+      });
+      this.fetchMemberEducationsForMember();
+      return result;
+    },
+    async deleteMemberEducation(memberEducation: number): Promise<AxiosResponse<any, any>> {
+      const memberId = useMemberStore().activeMember;
+      const result = await http.delete(`/admin/member/${memberId}/education/${memberEducation}`);
+      this.fetchMemberEducationsForMember();
+      return result;
+    },
+  },
+});
--- a/src/stores/admin/club/member/membership.ts
+++ b/src/stores/admin/club/member/membership.ts
@ -7,6 +7,7 @@ import { useMemberStore } from "./member";
 import type {
  CreateMembershipViewModel,
  MembershipStatisticsViewModel,
+  MembershipTotalStatisticsViewModel,
  MembershipViewModel,
  UpdateMembershipViewModel,
 } from "@/viewmodels/admin/club/member/membership.models";
@ -16,6 +17,7 @@ export const useMembershipStore = defineStore("membership", {
    return {
      memberships: [] as Array<MembershipViewModel>,
      membershipStatistics: [] as Array<MembershipStatisticsViewModel>,
+      totalMembershipStatistics: undefined as undefined | MembershipTotalStatisticsViewModel,
      loading: "loading" as "loading" | "fetched" | "failed",
    };
  },
@ -42,6 +44,15 @@ export const useMembershipStore = defineStore("membership", {
        })
        .catch((err) => {});
    },
+    fetchMembershipTotalStatisticsForMember() {
+      const memberId = useMemberStore().activeMember;
+      http
+        .get(`/admin/member/${memberId}/memberships/totalstatistics`)
+        .then((result) => {
+          this.totalMembershipStatistics = result.data;
+        })
+        .catch((err) => {});
+    },
    fetchMembershipById(id: number) {
      const memberId = useMemberStore().activeMember;
      return http.get(`/admin/member/${memberId}/membership/${id}`);
--- a/src/stores/admin/club/newsletter/newsletter.ts
+++ b/src/stores/admin/club/newsletter/newsletter.ts
@ -1,11 +1,10 @@
 import { defineStore } from "pinia";
-import type { CreateNewsletterViewModel, SyncNewsletterViewModel } from "@/viewmodels/admin/club/newsletter/newsletter.models";
+import type { CreateNewsletterViewModel } from "@/viewmodels/admin/club/newsletter/newsletter.models";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
 import type { NewsletterViewModel } from "@/viewmodels/admin/club/newsletter/newsletter.models";
 import cloneDeep from "lodash.clonedeep";
 import isEqual from "lodash.isequal";
-import difference from "lodash.difference";

 export const useNewsletterStore = defineStore("newsletter", {
  state: () => {
@ -72,7 +71,6 @@ export const useNewsletterStore = defineStore("newsletter", {
      const result = await http.post(`/admin/newsletter`, {
        title: newsletter.title,
      });
-      this.fetchNewsletters();
      return result;
    },
    async synchronizeActiveNewsletter(): Promise<void> {
--- a/src/stores/admin/club/protocol/protocol.ts
+++ b/src/stores/admin/club/protocol/protocol.ts
@ -1,11 +1,10 @@
 import { defineStore } from "pinia";
-import type { CreateProtocolViewModel, SyncProtocolViewModel } from "@/viewmodels/admin/club/protocol/protocol.models";
+import type { CreateProtocolViewModel } from "@/viewmodels/admin/club/protocol/protocol.models";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
 import type { ProtocolViewModel } from "@/viewmodels/admin/club/protocol/protocol.models";
 import cloneDeep from "lodash.clonedeep";
 import isEqual from "lodash.isequal";
-import difference from "lodash.difference";

 export const useProtocolStore = defineStore("protocol", {
  state: () => {
@ -73,7 +72,6 @@ export const useProtocolStore = defineStore("protocol", {
        title: protocol.title,
        date: protocol.date,
      });
-      this.fetchProtocols();
      return result;
    },
    async synchronizeActiveProtocol(): Promise<void> {
--- a/src/stores/admin/club/protocol/protocolAgenda.ts
+++ b/src/stores/admin/club/protocol/protocolAgenda.ts
@ -71,7 +71,7 @@ export const useProtocolAgendaStore = defineStore("protocolAgenda", {

      await http
        .patch(`/admin/protocol/${protocolId}/synchronize/agenda`, {
-          agenda: differenceWith(this.agenda, this.origin, isEqual),
+          agenda: this.agenda,
        })
        .then((res) => {
          this.syncingProtocolAgenda = "synced";
--- a/src/stores/admin/club/protocol/protocolDecision.ts
+++ b/src/stores/admin/club/protocol/protocolDecision.ts
@ -72,7 +72,7 @@ export const useProtocolDecisionStore = defineStore("protocolDecision", {

      await http
        .patch(`/admin/protocol/${protocolId}/synchronize/decisions`, {
-          decisions: differenceWith(this.decision, this.origin, isEqual),
+          decisions: this.decision,
        })
        .then((res) => {
          this.syncingProtocolDecision = "synced";
--- a/src/stores/admin/club/protocol/protocolVoting.ts
+++ b/src/stores/admin/club/protocol/protocolVoting.ts
@ -75,7 +75,7 @@ export const useProtocolVotingStore = defineStore("protocolVoting", {

      await http
        .patch(`/admin/protocol/${protocolId}/synchronize/votings`, {
-          votings: differenceWith(this.voting, this.origin, isEqual),
+          votings: this.voting,
        })
        .then((res) => {
          this.syncingProtocolVoting = "synced";
--- a/src/stores/admin/configuration/education.ts
+++ b/src/stores/admin/configuration/education.ts
@ -0,0 +1,55 @@
+import { defineStore } from "pinia";
+import type {
+  CreateEducationViewModel,
+  UpdateEducationViewModel,
+  EducationViewModel,
+} from "@/viewmodels/admin/configuration/education.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+
+export const useEducationStore = defineStore("education", {
+  state: () => {
+    return {
+      educations: [] as Array<EducationViewModel>,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchEducations() {
+      this.loading = "loading";
+      http
+        .get("/admin/education")
+        .then((result) => {
+          this.educations = result.data;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    fetchEducationById(id: number): Promise<AxiosResponse<any, any>> {
+      return http.get(`/admin/education/${id}`);
+    },
+    async createEducation(education: CreateEducationViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/education`, {
+        education: education.education,
+        description: education.description,
+      });
+      this.fetchEducations();
+      return result;
+    },
+    async updateActiveEducation(education: UpdateEducationViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/education/${education.id}`, {
+        education: education.education,
+        description: education.description,
+      });
+      this.fetchEducations();
+      return result;
+    },
+    async deleteEducation(education: number): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/education/${education}`);
+      this.fetchEducations();
+      return result;
+    },
+  },
+});
--- a/src/stores/admin/navigation.ts
+++ b/src/stores/admin/navigation.ts
@ -112,6 +112,9 @@ export const useNavigationStore = defineStore("navigation", {
            ...(abilityStore.can("read", "configuration", "qualification")
              ? [{ key: "qualification", title: "Qualifikationen" }]
              : []),
+            ...(abilityStore.can("read", "configuration", "education")
+              ? [{ key: "education", title: "Aus-/Fortbildungen" }]
+              : []),
            ...(abilityStore.can("read", "configuration", "executive_position")
              ? [{ key: "executive_position", title: "Vereinsämter" }]
              : []),
--- a/src/types/permissionTypes.ts
+++ b/src/types/permissionTypes.ts
@ -13,6 +13,7 @@ export type PermissionModule =
  | "communication_type"
  | "membership_status"
  | "salutation"
+  | "education"
  | "calendar_type"
  | "user"
  | "role"
@ -70,6 +71,7 @@ export const permissionModules: Array<PermissionModule> = [
  "communication_type",
  "membership_status",
  "salutation",
+  "education",
  "calendar_type",
  "user",
  "role",
@ -91,6 +93,7 @@ export const sectionsAndModules: SectionsAndModulesObject = {
    "communication_type",
    "membership_status",
    "salutation",
+    "education",
    "calendar_type",
    "query_store",
    "template",
--- a/src/viewmodels/admin/club/member/member.models.ts
+++ b/src/viewmodels/admin/club/member/member.models.ts
@ -15,6 +15,7 @@ export interface MemberViewModel {
  sendNewsletter?: CommunicationViewModel;
  smsAlarming?: Array<CommunicationViewModel>;
  preferredCommunication?: Array<CommunicationViewModel>;
+  note?: string;
 }

 export interface MemberStatisticsViewModel {
@ -36,6 +37,7 @@ export interface CreateMemberViewModel {
  nameaffix: string;
  birthdate: Date;
  internalId?: string;
+  note?: string;
 }

 export interface UpdateMemberViewModel {
@ -46,4 +48,5 @@ export interface UpdateMemberViewModel {
  nameaffix: string;
  birthdate: Date;
  internalId?: string;
+  note?: string;
 }
--- a/src/viewmodels/admin/club/member/memberEducation.models.ts
+++ b/src/viewmodels/admin/club/member/memberEducation.models.ts
@ -0,0 +1,26 @@
+export interface MemberEducationViewModel {
+  id: number;
+  start: Date;
+  end?: Date;
+  place?: string;
+  note?: string;
+  education: string;
+  educationId: number;
+}
+
+export interface CreateMemberEducationViewModel {
+  start: Date;
+  end?: Date;
+  place?: string;
+  note?: string;
+  educationId: number;
+}
+
+export interface UpdateMemberEducationViewModel {
+  id: number;
+  start: Date;
+  end?: Date;
+  place?: string;
+  note?: string;
+  educationId: number;
+}
--- a/src/viewmodels/admin/club/member/membership.models.ts
+++ b/src/viewmodels/admin/club/member/membership.models.ts
@ -21,6 +21,18 @@ export interface MembershipStatisticsViewModel {
  memberBirthdate: Date;
 }

+export interface MembershipTotalStatisticsViewModel {
+  durationInDays: number;
+  durationInYears: number;
+  exactDuration: string;
+  memberId: string;
+  memberSalutation: string;
+  memberFirstname: string;
+  memberLastname: string;
+  memberNameaffix: string;
+  memberBirthdate: Date;
+}
+
 export interface CreateMembershipViewModel {
  start: Date;
  statusId: number;
--- a/src/viewmodels/admin/club/newsletter/newsletter.models.ts
+++ b/src/viewmodels/admin/club/newsletter/newsletter.models.ts
@ -7,6 +7,7 @@ export interface NewsletterViewModel {
  newsletterSignatur: string;
  isSent: boolean;
  recipientsByQueryId?: string | null;
+  createdAt: Date;
 }

 export interface CreateNewsletterViewModel {
--- a/src/viewmodels/admin/configuration/education.models.ts
+++ b/src/viewmodels/admin/configuration/education.models.ts
@ -0,0 +1,16 @@
+export interface EducationViewModel {
+  id: number;
+  education: string;
+  description: string | null;
+}
+
+export interface CreateEducationViewModel {
+  education: string;
+  description: string | null;
+}
+
+export interface UpdateEducationViewModel {
+  id: number;
+  education: string;
+  description: string | null;
+}
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@ -65,6 +65,11 @@
        </div>
        <p v-if="loginError" class="text-center">{{ loginError }}</p>
      </form>
+      <div class="flex flex-col gap-2 empty:hidden">
+        <RouterLink v-if="appShow_link_to_calendar" :to="{ name: 'public-calendar' }" button primary-outline>
+          zum Kalender
+        </RouterLink>
+      </div>

      <FormBottomBar />
    </div>
@ -95,7 +100,7 @@ export default defineComponent({
    };
  },
  computed: {
-    ...mapState(useConfigurationStore, ["clubName"]),
+    ...mapState(useConfigurationStore, ["clubName", "appShow_link_to_calendar"]),
  },
  mounted() {
    this.username = localStorage.getItem("username") ?? "";
--- a/src/views/admin/club/members/MemberEdit.vue
+++ b/src/views/admin/club/members/MemberEdit.vue
@ -75,6 +75,10 @@
        <label for="internalId">Interne ID (optional)</label>
        <input type="text" id="internalId" v-model="member.internalId" />
      </div>
+      <div>
+        <label for="note">Notiz (optional)</label>
+        <textarea type="text" id="note" v-model="member.note" />
+      </div>
      <div class="flex flex-row justify-end gap-2">
        <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
          verwerfen
@ -93,7 +97,6 @@
 <script setup lang="ts">
 import { defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
-import MainTemplate from "@/templates/Main.vue";
 import { useMemberStore } from "@/stores/admin/club/member/member";
 import type { MemberViewModel, UpdateMemberViewModel } from "@/viewmodels/admin/club/member/member.models";
 import Spinner from "@/components/Spinner.vue";
@ -163,6 +166,7 @@ export default defineComponent({
        nameaffix: formData.nameaffix.value,
        birthdate: formData.birthdate.value,
        internalId: formData.internalId.value,
+        note: formData.note.value,
      };
      this.status = "loading";
      this.updateActiveMember(updateMember)
--- a/src/views/admin/club/members/MemberEducations.vue
+++ b/src/views/admin/club/members/MemberEducations.vue
@ -0,0 +1,51 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="memberEducations != null" class="flex flex-col gap-2 w-full">
+      <MemberEducationListItem v-for="education in memberEducations" :key="education.id" :education="education" />
+    </div>
+    <Spinner v-if="loading == 'loading'" class="mx-auto" />
+    <p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">&#8634; laden fehlgeschlagen</p>
+  </div>
+  <div class="flex flex-row gap-4">
+    <button v-if="can('create', 'club', 'member')" primary class="w-fit!" @click="openCreateModal">
+      Aus-/Fortbildung hinzufügen
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw } from "vue";
+import { mapActions, mapState } from "pinia";
+import Spinner from "@/components/Spinner.vue";
+import { useMemberEducationStore } from "@/stores/admin/club/member/memberEducation";
+import MemberEducationListItem from "@/components/admin/club/member/MemberEducationListItem.vue";
+import { useModalStore } from "@/stores/modal";
+import { useAbilityStore } from "@/stores/ability";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    memberId: String,
+  },
+  computed: {
+    ...mapState(useMemberEducationStore, ["memberEducations", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  methods: {
+    ...mapActions(useMemberEducationStore, ["fetchMemberEducationsForMember"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    fetchItem() {
+      this.fetchMemberEducationsForMember();
+    },
+    openCreateModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/MemberEducationCreateModal.vue")))
+      );
+    },
+  },
+});
+</script>
--- a/src/views/admin/club/members/MemberOverview.vue
+++ b/src/views/admin/club/members/MemberOverview.vue
@ -25,9 +25,19 @@
        <label for="birthdate">Geburtsdatum</label>
        <input type="date" id="birthdate" :value="activeMemberObj.birthdate" readonly />
      </div>
-      <div v-if="membershipStatistics.length != 0">
+      <div>
+        <label for="note">Notiz</label>
+        <textarea type="text" id="note" v-model="activeMemberObj.note" readonly />
+      </div>
+      <div v-if="membershipStatistics.length != 0 || totalMembershipStatistics != undefined">
        <p>Statistiken zur Mitgliedschaft</p>
-        <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+        <div class="flex flex-col h-fit w-full rounded-md overflow-hidden divide-y divide-white">
+          <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+            <p>
+              gesamt {{ totalMembershipStatistics?.durationInDays }} Tage
+              <span class="whitespace-nowrap"> ~> {{ totalMembershipStatistics?.exactDuration }}</span>
+            </p>
+          </div>
          <div
            v-for="stat in membershipStatistics"
            class="bg-primary p-2 text-white flex flex-row justify-between items-center"
@ -149,16 +159,20 @@ export default defineComponent({
  },
  computed: {
    ...mapState(useMemberStore, ["activeMemberObj", "activeMemberStatistics", "loadingActive"]),
-    ...mapState(useMembershipStore, ["membershipStatistics"]),
+    ...mapState(useMembershipStore, ["membershipStatistics", "totalMembershipStatistics"]),
  },
  mounted() {
    this.fetchMemberByActiveId();
    this.fetchMemberStatisticsByActiveId();
    this.fetchMembershipStatisticsForMember();
+    this.fetchMembershipTotalStatisticsForMember();
  },
  methods: {
    ...mapActions(useMemberStore, ["fetchMemberByActiveId", "fetchMemberStatisticsByActiveId"]),
-    ...mapActions(useMembershipStore, ["fetchMembershipStatisticsForMember"]),
+    ...mapActions(useMembershipStore, [
+      "fetchMembershipStatisticsForMember",
+      "fetchMembershipTotalStatisticsForMember",
+    ]),
  },
 });
 </script>
--- a/src/views/admin/club/members/MemberRouting.vue
+++ b/src/views/admin/club/members/MemberRouting.vue
@ -21,7 +21,7 @@
    <template #diffMain>
      <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
        <div class="flex flex-col grow gap-2 overflow-hidden">
-          <div class="w-full flex flex-row max-lg:flex-wrap justify-center">
+          <div class="w-full flex flex-row max-lg:flex-wrap justify-center items-stretch">
            <RouterLink
              v-for="tab in tabs"
              :key="tab.route"
@ -31,7 +31,7 @@
            >
              <p
                :class="[
-                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
+                  'flex w-full h-full items-center justify-center rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
                  isActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
                ]"
              >
@ -68,8 +68,9 @@ export default defineComponent({
        { route: "admin-club-member-overview", title: "Übersicht" },
        { route: "admin-club-member-membership", title: "Mitgliedschaft" },
        { route: "admin-club-member-communication", title: "Kommunikation" },
-        { route: "admin-club-member-awards", title: "Auszeichnungen" },
-        { route: "admin-club-member-qualifications", title: "Qualifikationen" },
+        { route: "admin-club-member-awards", title: "Auszeichnungen / Ehrungen" },
+        { route: "admin-club-member-educations", title: "Aus- / Fortbildungen" },
+        { route: "admin-club-member-qualifications", title: "Qualifikationen / Funktionen" },
        { route: "admin-club-member-positions", title: "Vereinsämter" },
      ],
    };
--- a/src/views/admin/club/newsletter/NewsletterDates.vue
+++ b/src/views/admin/club/newsletter/NewsletterDates.vue
@ -37,11 +37,15 @@
                  })
            }}
          </p>
-          <TrashIcon
+          <DoubleConfirmClick
            v-if="can('create', 'club', 'newsletter')"
-            class="w-5 h-5 p-1 box-content cursor-pointer text-white"
-            @click.prevent="removeSelected(item.calendarId)"
-          />
+            light
+            v-slot="{ isSensitive }"
+            @click:submit="removeSelected(item.calendarId)"
+          >
+            <TrashIcon v-if="!isSensitive" class="h-5 w-5" />
+            <TrashIconSolid v-else class="h-5 w-5" />
+          </DoubleConfirmClick>
        </summary>
        <div class="flex flex-col gap-2 px-1">
          <input
@ -111,8 +115,10 @@ import { useAbilityStore } from "@/stores/ability";
 import { useCalendarStore } from "@/stores/admin/club/calendar";
 import type { CalendarViewModel } from "@/viewmodels/admin/club/calendar.models";
 import { TrashIcon } from "@heroicons/vue/24/outline";
+import { TrashIcon as TrashIconSolid } from "@heroicons/vue/24/solid";
 import cloneDeep from "lodash.clonedeep";
 import type { NewsletterDatesViewModel } from "@/viewmodels/admin/club/newsletter/newsletterDates.models";
+import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
 </script>

 <script lang="ts">
--- a/src/views/admin/club/newsletter/NewsletterRecipients.vue
+++ b/src/views/admin/club/newsletter/NewsletterRecipients.vue
@ -42,11 +42,15 @@
          <p>Newsletter senden an Typ: {{ member.sendNewsletter?.type.type ?? "---" }}</p>
        </div>

-        <TrashIcon
+        <DoubleConfirmClick
          v-if="can('create', 'club', 'newsletter') && showMemberSelect"
-          class="w-5 h-5 p-1 box-content cursor-pointer"
-          @click="removeSelected(member.id)"
-        />
+          light
+          v-slot="{ isSensitive }"
+          @click:submit="removeSelected(member.id)"
+        >
+          <TrashIcon v-if="!isSensitive" class="h-5 w-5" />
+          <TrashIconSolid v-else class="h-5 w-5" />
+        </DoubleConfirmClick>
      </div>
    </div>

@ -61,17 +65,8 @@
 import { defineComponent } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
-import {
-  Combobox,
-  ComboboxLabel,
-  ComboboxInput,
-  ComboboxButton,
-  ComboboxOptions,
-  ComboboxOption,
-  TransitionRoot,
-} from "@headlessui/vue";
-import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import { ArchiveBoxIcon, ExclamationTriangleIcon, TrashIcon, UserPlusIcon } from "@heroicons/vue/24/outline";
+import { TrashIcon as TrashIconSolid } from "@heroicons/vue/24/solid";
 import { useMemberStore } from "@/stores/admin/club/member/member";
 import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
 import { useNewsletterStore } from "@/stores/admin/club/newsletter/newsletter";
@ -79,9 +74,9 @@ import { useNewsletterRecipientsStore } from "@/stores/admin/club/newsletter/new
 import { useAbilityStore } from "@/stores/ability";
 import { useQueryStoreStore } from "@/stores/admin/configuration/queryStore";
 import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
-import cloneDeep from "lodash.clonedeep";
 import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
 import type { FieldType } from "@/types/dynamicQueries";
+import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
 </script>

 <script lang="ts">
--- a/src/views/admin/club/protocol/ProtocolAgenda.vue
+++ b/src/views/admin/club/protocol/ProtocolAgenda.vue
@ -31,6 +31,16 @@
            :disabled="!can('create', 'club', 'protocol')"
          />

+          <DoubleConfirmClick
+            v-if="can('create', 'club', 'protocol')"
+            light
+            v-slot="{ isSensitive }"
+            @click:submit="removeFromArray(item.id)"
+          >
+            <TrashIcon v-if="!isSensitive" class="h-5 w-5" />
+            <TrashIconSolid v-else class="h-5 w-5" />
+          </DoubleConfirmClick>
+
          <div class="flex flex-col">
            <ChevronUpIcon
              v-if="index != 0"
@ -73,7 +83,9 @@ import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import { toolbarOptions } from "@/helpers/quillConfig";
 import { useProtocolAgendaStore } from "@/stores/admin/club/protocol/protocolAgenda";
 import { useAbilityStore } from "@/stores/ability";
-import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/outline";
+import { ChevronDownIcon, ChevronUpIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { TrashIcon as TrashIconSolid } from "@heroicons/vue/24/solid";
+import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
 </script>

 <script lang="ts">
@ -109,6 +121,9 @@ export default defineComponent({
        });
      }
    },
+    removeFromArray(thisId: number) {
+      this.agenda = this.agenda.filter((item) => item.id !== thisId);
+    },
  },
 });
 </script>
--- a/src/views/admin/club/protocol/ProtocolDecisions.vue
+++ b/src/views/admin/club/protocol/ProtocolDecisions.vue
@ -31,6 +31,16 @@
            :disabled="!can('create', 'club', 'protocol')"
          />

+          <DoubleConfirmClick
+            v-if="can('create', 'club', 'protocol')"
+            light
+            v-slot="{ isSensitive }"
+            @click:submit="removeFromArray(item.id)"
+          >
+            <TrashIcon v-if="!isSensitive" class="h-5 w-5" />
+            <TrashIconSolid v-else class="h-5 w-5" />
+          </DoubleConfirmClick>
+
          <div class="flex flex-col">
            <ChevronUpIcon
              v-if="index != 0"
@ -73,7 +83,9 @@ import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import { toolbarOptions } from "@/helpers/quillConfig";
 import { useProtocolDecisionStore } from "@/stores/admin/club/protocol/protocolDecision";
 import { useAbilityStore } from "@/stores/ability";
-import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/outline";
+import { ChevronDownIcon, ChevronUpIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { TrashIcon as TrashIconSolid } from "@heroicons/vue/24/solid";
+import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
 </script>

 <script lang="ts">
@ -109,6 +121,9 @@ export default defineComponent({
        });
      }
    },
+    removeFromArray(thisId: number) {
+      this.decision = this.decision.filter((item) => item.id !== thisId);
+    },
  },
 });
 </script>
--- a/src/views/admin/club/protocol/ProtocolPresence.vue
+++ b/src/views/admin/club/protocol/ProtocolPresence.vue
@ -42,11 +42,15 @@
            </label>
          </div>
        </div>
-        <TrashIcon
+        <DoubleConfirmClick
          v-if="can('create', 'club', 'protocol')"
-          class="w-5 h-5 p-1 box-content cursor-pointer"
-          @click="removeSelected(member.memberId)"
-        />
+          light
+          v-slot="{ isSensitive }"
+          @click:submit="removeSelected(member.memberId)"
+        >
+          <TrashIcon v-if="!isSensitive" class="h-5 w-5" />
+          <TrashIconSolid v-else class="h-5 w-5" />
+        </DoubleConfirmClick>
      </div>
    </div>
  </div>
@ -57,10 +61,12 @@ import { defineComponent } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
 import { TrashIcon } from "@heroicons/vue/24/outline";
+import { TrashIcon as TrashIconSolid } from "@heroicons/vue/24/solid";
 import { useProtocolPresenceStore } from "@/stores/admin/club/protocol/protocolPresence";
 import { useAbilityStore } from "@/stores/ability";
 import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
 import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
+import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
 </script>

 <script lang="ts">
--- a/src/views/admin/club/protocol/ProtocolVoting.vue
+++ b/src/views/admin/club/protocol/ProtocolVoting.vue
@ -31,6 +31,16 @@
            :disabled="!can('create', 'club', 'protocol')"
          />

+          <DoubleConfirmClick
+            v-if="can('create', 'club', 'protocol')"
+            light
+            v-slot="{ isSensitive }"
+            @click:submit="removeFromArray(item.id)"
+          >
+            <TrashIcon v-if="!isSensitive" class="h-5 w-5" />
+            <TrashIconSolid v-else class="h-5 w-5" />
+          </DoubleConfirmClick>
+
          <div class="flex flex-col">
            <ChevronUpIcon
              v-if="index != 0"
@ -83,14 +93,16 @@

 <script setup lang="ts">
 import { defineComponent } from "vue";
-import { mapActions, mapState } from "pinia";
+import { mapActions, mapState, mapWritableState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
 import { QuillEditor } from "@vueup/vue-quill";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import { toolbarOptions } from "@/helpers/quillConfig";
 import { useProtocolVotingStore } from "@/stores/admin/club/protocol/protocolVoting";
 import { useAbilityStore } from "@/stores/ability";
-import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/outline";
+import { ChevronDownIcon, ChevronUpIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { TrashIcon as TrashIconSolid } from "@heroicons/vue/24/solid";
+import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
 </script>

 <script lang="ts">
@ -99,7 +111,7 @@ export default defineComponent({
    protocolId: String,
  },
  computed: {
-    ...mapState(useProtocolVotingStore, ["voting", "loading"]),
+    ...mapWritableState(useProtocolVotingStore, ["voting", "loading"]),
    ...mapState(useAbilityStore, ["can"]),
    sortedVoting() {
      return this.voting.slice().sort((a, b) => a.sort - b.sort);
@ -126,6 +138,9 @@ export default defineComponent({
        });
      }
    },
+    removeFromArray(thisId: number) {
+      this.voting = this.voting.filter((item) => item.id !== thisId);
+    },
  },
 });
 </script>
--- a/src/views/admin/configuration/education/Education.vue
+++ b/src/views/admin/configuration/education/Education.vue
@ -0,0 +1,49 @@
+<template>
+  <MainTemplate title="Aus-/Fortbildungen">
+    <template #diffMain>
+      <div class="flex flex-col gap-4 h-full pl-7">
+        <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
+          <EducationListItem v-for="education in educations" :key="education.id" :education="education" />
+        </div>
+        <div class="flex flex-row gap-4">
+          <button v-if="can('create', 'configuration', 'education')" primary class="w-fit!" @click="openCreateModal">
+            Aus-/Fortbildung erstellen
+          </button>
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, defineAsyncComponent, markRaw } from "vue";
+import { mapState, mapActions } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useEducationStore } from "@/stores/admin/configuration/education";
+import EducationListItem from "@/components/admin/configuration/education/EducationListItem.vue";
+import { useModalStore } from "@/stores/modal";
+import { useAbilityStore } from "@/stores/ability";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useEducationStore, ["educations"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchEducations();
+  },
+  methods: {
+    ...mapActions(useEducationStore, ["fetchEducations"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openCreateModal() {
+      this.openModal(
+        markRaw(
+          defineAsyncComponent(() => import("@/components/admin/configuration/education/CreateEducationModal.vue"))
+        )
+      );
+    },
+  },
+});
+</script>
--- a/src/views/admin/configuration/education/EducationEdit.vue
+++ b/src/views/admin/configuration/education/EducationEdit.vue
@ -0,0 +1,120 @@
+<template>
+  <MainTemplate :title="`Aus-/Fortbildung ${origin?.education} - Daten bearbeiten`">
+    <template #headerInsert>
+      <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
+    </template>
+    <template #main>
+      <Spinner v-if="loading == 'loading'" class="mx-auto" />
+      <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
+      <form
+        v-else-if="education != null"
+        class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
+        @submit.prevent="triggerUpdate"
+      >
+        <div>
+          <label for="education">Bezeichnung</label>
+          <input type="text" id="education" required v-model="education.education" />
+        </div>
+        <div>
+          <label for="description">Beschreibung (optional)</label>
+          <input type="text" id="description" v-model="education.description" />
+        </div>
+        <div class="flex flex-row justify-end gap-2">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
+            verwerfen
+          </button>
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
+            speichern
+          </button>
+          <Spinner v-if="status == 'loading'" class="my-auto" />
+          <SuccessCheckmark v-else-if="status?.status == 'success'" />
+          <FailureXMark v-else-if="status?.status == 'failed'" />
+        </div>
+      </form>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useEducationStore } from "@/stores/admin/configuration/education";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { RouterLink } from "vue-router";
+import type { UpdateEducationViewModel, EducationViewModel } from "@/viewmodels/admin/configuration/education.models";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isequal";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    id: String,
+  },
+  data() {
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      origin: null as null | EducationViewModel,
+      education: null as null | EducationViewModel,
+      timeout: null as any,
+    };
+  },
+  computed: {
+    canSaveOrReset(): boolean {
+      return isEqual(this.origin, this.education);
+    },
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useEducationStore, ["fetchEducationById", "updateActiveEducation"]),
+    resetForm() {
+      this.education = cloneDeep(this.origin);
+    },
+    fetchItem() {
+      this.fetchEducationById(parseInt(this.id ?? ""))
+        .then((result) => {
+          this.education = result.data;
+          this.origin = cloneDeep(result.data);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    triggerUpdate(e: any) {
+      if (this.education == null) return;
+      let formData = e.target.elements;
+      let updateEducation: UpdateEducationViewModel = {
+        id: this.education.id,
+        education: formData.education.value,
+        description: formData.description.value,
+      };
+      this.status = "loading";
+      this.updateActiveEducation(updateEducation)
+        .then(() => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>
--- a/src/views/admin/management/version/VersionDisplay.vue
+++ b/src/views/admin/management/version/VersionDisplay.vue
@ -4,7 +4,12 @@
      <div class="h-full flex flex-col px-7 overflow-hidden">
        <div class="h-1/2 flex flex-col gap-2 p-2 border border-gray-300 rounded-t-md">
          <div class="flex flex-row justify-between border-b-2 border-gray-300">
-            <h1 class="text-xl font-semibold">Client</h1>
+            <h1 class="text-xl font-semibold">
+              Client
+              <small v-if="newerClientVersions.length != 0">
+                ({{ newerClientVersions.length }} neue Version{{ newerClientVersions.length != 1 ? "en" : "" }})
+              </small>
+            </h1>
            <p>
              V{{ clientVersion }} ({{
                new Date(clientVersionRelease).toLocaleDateString("de", {
@ -38,7 +43,12 @@
        </div>
        <div class="h-1/2 flex flex-col gap-2 p-2 border border-gray-300 rounded-b-md">
          <div class="flex flex-row justify-between border-b-2 border-gray-300">
-            <h1 class="text-xl font-semibold">Server</h1>
+            <h1 class="text-xl font-semibold">
+              Server
+              <small v-if="newerServerVersions.length != 0">
+                ({{ newerServerVersions.length }} neue Version{{ newerServerVersions.length != 1 ? "en" : "" }})
+              </small>
+            </h1>
            <p>
              V{{ serverVersion }} ({{
                new Date(serverVersionRelease).toLocaleDateString("de", {
Author	SHA1	Message	Date
Julian Krauser	291d04182c	1.7.0	2025-06-07 15:56:43 +02:00
Julian Krauser	37d73d7c74	Merge pull request 'minor v1.7.0' (#108 ) from develop into main Reviewed-on: #108	2025-06-07 13:55:06 +00:00
Julian Krauser	31c0b2a4c1	Merge branch 'main' into develop	2025-06-07 13:52:57 +00:00
Julian Krauser	defa732212	update packages	2025-06-07 15:44:41 +02:00
Julian Krauser	1452456138	1.6.0	2025-06-06 09:37:01 +02:00
Julian Krauser	0e0f86adce	Merge pull request 'minor v1.6.0' (#106 ) from develop into main Reviewed-on: #106	2025-06-06 07:36:01 +00:00
Julian Krauser	d9a24eb723	fix: spelling	2025-06-06 09:00:27 +02:00
Julian Krauser	d1ff313754	fix: protocol sync	2025-06-06 08:59:15 +02:00
Julian Krauser	87cb4252ec	Merge branch 'main' into develop	2025-06-05 14:34:59 +00:00
Julian Krauser	90f5ef3b1a	add: show count of newer versions	2025-06-05 07:53:03 +02:00
Julian Krauser	0db141cd13	add: logo and icon fallback on server error	2025-06-05 07:48:01 +02:00
Julian Krauser	583d4913d9	Merge pull request 'feature/#97-member-extend-data' (#105 ) from feature/#97-member-extend-data into develop Reviewed-on: #105	2025-06-03 13:33:18 +00:00
Julian Krauser	f6252901cd	spelling	2025-06-03 15:27:39 +02:00
Julian Krauser	ff53d2d4d9	fix view errors	2025-06-03 15:20:59 +02:00
Julian Krauser	05ec4afadb	Education views in member and config	2025-06-02 13:57:06 +02:00
Julian Krauser	3b89262ce9	add note field to member	2025-06-02 13:30:16 +02:00
Julian Krauser	516c6a9e92	enhance: add calendar link to login screen	2025-05-31 07:34:19 +02:00
Julian Krauser	ec0222ff2f	enhance: add membership total view in member	2025-05-30 15:13:50 +02:00
Julian Krauser	0defc9b0ba	change: redirect to edit page after create of newsletter and protocol	2025-05-29 11:20:54 +02:00
Julian Krauser	caf8e71a51	enhance: double confirm deletion for manual added newsletter recipients	2025-05-21 10:36:01 +02:00
Julian Krauser	d11f0d50c6	enhance: double confirm deletion for newsletter dates	2025-05-21 10:33:24 +02:00
Julian Krauser	2ce66da1d1	enhance: enable deletion of protocol content	2025-05-21 10:32:56 +02:00