From 04c01b67801021f7ec12f8b0d4529ce6318fecb1 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Fri, 16 May 2025 13:32:40 +0200
Subject: [PATCH] change: standardisation of UI

---
 src/templates/Main.vue                        |   8 +-
 src/views/account/Administration.vue          |   7 +-
 src/views/account/LoginData.vue               |   7 +-
 src/views/account/Me.vue                      |   7 +-
 src/views/account/Permission.vue              |  11 +-
 src/views/admin/club/calendar/Calendar.vue    |  14 +-
 src/views/admin/club/listprint/ListPrint.vue  | 133 +++++++++---------
 src/views/admin/club/members/Member.vue       |   7 +-
 .../admin/club/members/MemberRouting.vue      |  11 +-
 src/views/admin/club/members/Overview.vue     |  24 ----
 .../admin/club/newsletter/Newsletter.vue      |   7 +-
 .../club/newsletter/NewsletterRouting.vue     |  21 ++-
 src/views/admin/club/protocol/Protocol.vue    |   7 +-
 .../admin/club/protocol/ProtocolRouting.vue   |  33 ++---
 src/views/admin/club/query/Builder.vue        |  93 ++++++------
 src/views/admin/configuration/award/Award.vue |   7 +-
 .../admin/configuration/award/AwardEdit.vue   |   7 +-
 .../calendarType/CalendarType.vue             |   7 +-
 .../calendarType/CalendarTypeEdit.vue         |   7 +-
 .../communicationType/CommunicationType.vue   |   7 +-
 .../CommunicationTypeEdit.vue                 |   7 +-
 .../executivePosition/ExecutivePosition.vue   |   7 +-
 .../ExecutivePositionEdit.vue                 |   7 +-
 .../membershipStatus/MembershipStatus.vue     |   7 +-
 .../membershipStatus/MembershipStatusEdit.vue |   7 +-
 .../newsletterConfig/NewsletterConfig.vue     |   7 +-
 .../qualification/Qualification.vue           |   7 +-
 .../qualification/QualificationEdit.vue       |   7 +-
 .../configuration/queryStore/QueryStore.vue   |   7 +-
 .../configuration/salutation/Salutation.vue   |   7 +-
 .../salutation/SalutationEdit.vue             |   7 +-
 .../admin/configuration/template/Template.vue |  11 +-
 .../configuration/template/TemplateEdit.vue   |   7 +-
 .../configuration/template/UsageInfo.vue      |   7 +-
 .../templateUsage/TemplateUsage.vue           |   7 +-
 .../admin/management/backup/BackupRouting.vue |   7 +-
 .../management/backup/GeneratedBackup.vue     |   4 +-
 .../management/backup/UploadedBackup.vue      |   4 +-
 src/views/admin/management/role/Role.vue      |   7 +-
 src/views/admin/management/role/RoleEdit.vue  |   7 +-
 .../management/role/RoleEditPermission.vue    |   7 +-
 .../admin/management/setting/Setting.vue      |   7 +-
 src/views/admin/management/user/Invite.vue    |  13 +-
 src/views/admin/management/user/User.vue      |   7 +-
 src/views/admin/management/user/UserEdit.vue  |   7 +-
 .../management/user/UserEditPermission.vue    |   7 +-
 .../admin/management/user/UserEditRoles.vue   |   7 +-
 .../management/version/VersionDisplay.vue     |   7 +-
 src/views/admin/management/webapi/Webapi.vue  |   7 +-
 .../admin/management/webapi/WebapiEdit.vue    |   7 +-
 .../webapi/WebapiEditPermission.vue           |   7 +-
 src/views/docs/DocPage.vue                    |   2 +-
 src/views/public/calendar/Calendar.vue        |   6 +-
 src/views/public/calendar/CalendarExplain.vue |   7 +-
 54 files changed, 199 insertions(+), 462 deletions(-)
 delete mode 100644 src/views/admin/club/members/Overview.vue

diff --git a/src/templates/Main.vue b/src/templates/Main.vue
index 5a534da..ee95a6c 100644
--- a/src/templates/Main.vue
+++ b/src/templates/Main.vue
@@ -16,9 +16,9 @@
   <div
     class="max-w-full w-full grow flex flex-col divide-y-2 divide-gray-300 bg-white rounded-lg justify-center overflow-hidden"
   >
-    <slot name="topBar"></slot>
-    <div v-if="!topBar" class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-      <h1 class="font-bold text-xl min-h-8">{{ title }}</h1>
+    <div v-if="topBar || title" class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+      <h1 v-if="title" class="font-bold text-xl h-8 min-h-fit">{{ title }}</h1>
+      <slot name="topBar"></slot>
     </div>
     <div class="flex flex-col gap-2 grow py-5 overflow-hidden">
       <slot name="diffMain"></slot>
@@ -56,7 +56,7 @@ export default defineComponent({
     },
     title: {
       type: String,
-      default: "Titel",
+      default: "",
     },
   },
   computed: {
diff --git a/src/views/account/Administration.vue b/src/views/account/Administration.vue
index d2d0a3b..f95b89a 100644
--- a/src/views/account/Administration.vue
+++ b/src/views/account/Administration.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate :useStagedOverviewLink="false">
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Administration übertragen</h1>
-      </div>
-    </template>
+  <MainTemplate title="Administration übertragen" :useStagedOverviewLink="false">
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
diff --git a/src/views/account/LoginData.vue b/src/views/account/LoginData.vue
index 7378799..8384374 100644
--- a/src/views/account/LoginData.vue
+++ b/src/views/account/LoginData.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate :useStagedOverviewLink="false">
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Meine Anmeldedaten</h1>
-      </div>
-    </template>
+  <MainTemplate title="Meine Anmeldedaten" :useStagedOverviewLink="false">
     <template #diffMain>
       <Spinner v-if="loading" class="mx-auto" />
       <div v-else class="flex flex-col w-full h-full gap-2 px-7 overflow-hidden">
diff --git a/src/views/account/Me.vue b/src/views/account/Me.vue
index 4fb7bd1..c6db4e2 100644
--- a/src/views/account/Me.vue
+++ b/src/views/account/Me.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate :useStagedOverviewLink="false">
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Mein Account</h1>
-      </div>
-    </template>
+  <MainTemplate title="Mein Account" :useStagedOverviewLink="false">
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
diff --git a/src/views/account/Permission.vue b/src/views/account/Permission.vue
index 57374f9..56d3311 100644
--- a/src/views/account/Permission.vue
+++ b/src/views/account/Permission.vue
@@ -1,18 +1,13 @@
 <template>
-  <MainTemplate :useStagedOverviewLink="false">
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Meine Berechtigungen</h1>
-      </div>
-    </template>
+  <MainTemplate title="Meine Berechtigungen" :useStagedOverviewLink="false">
     <template #main>
-      <Permission :permissions="permissions" :disableEdit="true" />
+      <Permission :permissions="permissions" disableEdit />
     </template>
   </MainTemplate>
 </template>
 
 <script setup lang="ts">
-import { defineComponent, markRaw, defineAsyncComponent } from "vue";
+import { defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import Permission from "@/components/admin/Permission.vue";
diff --git a/src/views/admin/club/calendar/Calendar.vue b/src/views/admin/club/calendar/Calendar.vue
index 4535be8..79aa62b 100644
--- a/src/views/admin/club/calendar/Calendar.vue
+++ b/src/views/admin/club/calendar/Calendar.vue
@@ -1,15 +1,9 @@
 <template>
-  <MainTemplate>
+  <MainTemplate title="Kalender">
     <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Kalender</h1>
-        <div class="flex flex-row gap-2">
-          <PlusIcon
-            class="text-gray-500 h-5 w-5 cursor-pointer"
-            @click="select({ start: '', end: '', allDay: false })"
-          />
-          <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
-        </div>
+      <div class="flex flex-row gap-2">
+        <PlusIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="select({ start: '', end: '', allDay: false })" />
+        <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
       </div>
     </template>
     <template #diffMain>
diff --git a/src/views/admin/club/listprint/ListPrint.vue b/src/views/admin/club/listprint/ListPrint.vue
index 51c0872..0b6dabd 100644
--- a/src/views/admin/club/listprint/ListPrint.vue
+++ b/src/views/admin/club/listprint/ListPrint.vue
@@ -1,84 +1,77 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Liste Drucken</h1>
-      </div>
-    </template>
-    <template #diffMain>
-      <div class="flex flex-col w-full h-full gap-2 px-7 overflow-y-auto">
-        <form
-          class="flex flex-col h-fit w-full border border-primary rounded-md p-2 gap-2"
-          @submit.prevent="sendPrintJob"
-        >
-          <div class="flex flex-row gap-2 items-center">
-            <p class="min-w-16">Titel:</p>
-            <input id="title" type="text" required />
-          </div>
-          <div class="flex flex-row gap-2 items-center">
-            <p class="min-w-16">Query:</p>
-            <select id="query" value="member">
-              <option value="member">(system) alle Mitglieder</option>
-              <option value="memberByRunningMembership">(system) alle Mitglieder mit laufender Mitgliedschaft</option>
-              <option v-for="query in queries" :key="query.id" :value="query.id">
-                {{ query.title }}
-              </option>
-            </select>
-          </div>
-          <div class="flex flex-col md:flex-row gap-2 md:items-center">
-            <div class="flex flex-row w-full gap-2 items-center">
-              <p class="min-w-16">Kopfzeile:</p>
-              <select id="header" value="def">
-                <option value="def">Standard-Vorlage verwenden</option>
-                <option v-for="template in templates" :key="template.id" :value="template.id">
-                  {{ template.template }}
-                </option>
-              </select>
-            </div>
-            <div class="flex flex-row gap-2 items-center">
-              <p class="whitespace-nowrap">Höhe [mm]:</p>
-              <input id="headerHeight" type="number" :min="15" class="w-24!" placeholder="15" />
-            </div>
-          </div>
-          <div class="flex flex-row gap-2 items-center">
-            <p class="min-w-16">Hauptteil:</p>
-            <select id="body" value="def">
+  <MainTemplate title="Liste Drucken">
+    <template #main>
+      <form
+        class="flex flex-col h-fit w-full border border-primary rounded-md p-2 gap-2"
+        @submit.prevent="sendPrintJob"
+      >
+        <div class="flex flex-row gap-2 items-center">
+          <p class="min-w-16">Titel:</p>
+          <input id="title" type="text" required />
+        </div>
+        <div class="flex flex-row gap-2 items-center">
+          <p class="min-w-16">Query:</p>
+          <select id="query" value="member">
+            <option value="member">(system) alle Mitglieder</option>
+            <option value="memberByRunningMembership">(system) alle Mitglieder mit laufender Mitgliedschaft</option>
+            <option v-for="query in queries" :key="query.id" :value="query.id">
+              {{ query.title }}
+            </option>
+          </select>
+        </div>
+        <div class="flex flex-col md:flex-row gap-2 md:items-center">
+          <div class="flex flex-row w-full gap-2 items-center">
+            <p class="min-w-16">Kopfzeile:</p>
+            <select id="header" value="def">
               <option value="def">Standard-Vorlage verwenden</option>
-              <option value="listprint.member">(system) Mitgliederliste</option>
               <option v-for="template in templates" :key="template.id" :value="template.id">
                 {{ template.template }}
               </option>
             </select>
           </div>
-          <div class="flex flex-col md:flex-row gap-2 md:items-center">
-            <div class="flex flex-row w-full gap-2 items-center">
-              <p class="min-w-16">Fußzeile:</p>
-              <select id="footer" value="def">
-                <option value="def">Standard-Vorlage verwenden</option>
-                <option v-for="template in templates" :key="template.id" :value="template.id">
-                  {{ template.template }}
-                </option>
-              </select>
-            </div>
-            <div class="flex flex-row gap-2 items-center">
-              <p class="whitespace-nowrap">Höhe [mm]:</p>
-              <input id="footerHeight" type="number" :min="15" class="w-24!" placeholder="15" />
-            </div>
+          <div class="flex flex-row gap-2 items-center">
+            <p class="whitespace-nowrap">Höhe [mm]:</p>
+            <input id="headerHeight" type="number" :min="15" class="w-24!" placeholder="15" />
           </div>
-          <div class="flex flex-row gap-2">
-            <button type="submit" primary class="w-fit!">Liste drucken</button>
-            <button type="reset" primary-outline class="w-fit!">zurücksetzen</button>
+        </div>
+        <div class="flex flex-row gap-2 items-center">
+          <p class="min-w-16">Hauptteil:</p>
+          <select id="body" value="def">
+            <option value="def">Standard-Vorlage verwenden</option>
+            <option value="listprint.member">(system) Mitgliederliste</option>
+            <option v-for="template in templates" :key="template.id" :value="template.id">
+              {{ template.template }}
+            </option>
+          </select>
+        </div>
+        <div class="flex flex-col md:flex-row gap-2 md:items-center">
+          <div class="flex flex-row w-full gap-2 items-center">
+            <p class="min-w-16">Fußzeile:</p>
+            <select id="footer" value="def">
+              <option value="def">Standard-Vorlage verwenden</option>
+              <option v-for="template in templates" :key="template.id" :value="template.id">
+                {{ template.template }}
+              </option>
+            </select>
           </div>
-        </form>
-        <div class="w-full grow min-h-[50%] flex flex-col gap-2">
-          <Spinner v-if="status == 'loading'" />
-          <div class="grow">
-            <iframe v-show="status == 'success'" ref="viewer" class="w-full h-full" />
+          <div class="flex flex-row gap-2 items-center">
+            <p class="whitespace-nowrap">Höhe [mm]:</p>
+            <input id="footerHeight" type="number" :min="15" class="w-24!" placeholder="15" />
           </div>
+        </div>
+        <div class="flex flex-row gap-2">
+          <button type="submit" primary class="w-fit!">Liste drucken</button>
+          <button type="reset" primary-outline class="w-fit!">zurücksetzen</button>
+        </div>
+      </form>
+      <div class="w-full grow min-h-[50%] flex flex-col gap-2">
+        <Spinner v-if="status == 'loading'" />
+        <div class="grow">
+          <iframe v-show="status == 'success'" ref="viewer" class="w-full h-full" />
+        </div>
 
-          <div v-show="status == 'success'" class="flex flex-row gap-2 justify-end">
-            <a ref="download" button primary class="w-fit!">download</a>
-          </div>
+        <div v-show="status == 'success'" class="flex flex-row gap-2 justify-end">
+          <a ref="download" button primary class="w-fit!">download</a>
         </div>
       </div>
     </template>
diff --git a/src/views/admin/club/members/Member.vue b/src/views/admin/club/members/Member.vue
index 686ed81..458bc81 100644
--- a/src/views/admin/club/members/Member.vue
+++ b/src/views/admin/club/members/Member.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Mitglieder</h1>
-      </div>
-    </template>
+  <MainTemplate title="Mitglieder">
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
         <Pagination
diff --git a/src/views/admin/club/members/MemberRouting.vue b/src/views/admin/club/members/MemberRouting.vue
index eea8b24..866d063 100644
--- a/src/views/admin/club/members/MemberRouting.vue
+++ b/src/views/admin/club/members/MemberRouting.vue
@@ -4,12 +4,11 @@
       <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
     </template>
     <template #topBar>
-      <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8 min-h-fit grow">
-          {{ activeMemberObj?.lastname }}, {{ activeMemberObj?.firstname }}
-          {{ activeMemberObj?.nameaffix ? `- ${activeMemberObj?.nameaffix}` : "" }}
-        </h1>
-
+      <h1 class="font-bold text-xl h-8 min-h-fit">
+        {{ activeMemberObj?.lastname }}, {{ activeMemberObj?.firstname }}
+        {{ activeMemberObj?.nameaffix ? `- ${activeMemberObj?.nameaffix}` : "" }}
+      </h1>
+      <div class="flex flex-row gap-2">
         <div title="Mitgliederliste drucken" @click="openPrintModal">
           <DocumentTextIcon class="w-5 h-5 cursor-pointer" />
         </div>
diff --git a/src/views/admin/club/members/Overview.vue b/src/views/admin/club/members/Overview.vue
deleted file mode 100644
index 041631c..0000000
--- a/src/views/admin/club/members/Overview.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Übersicht</h1>
-      </div>
-    </template>
-    <template #diffMain>
-      <div class="flex flex-col gap-2 justify-center items-center h-full"></div>
-    </template>
-  </MainTemplate>
-</template>
-
-<script setup lang="ts">
-import { defineComponent } from "vue";
-import { mapState } from "pinia";
-import MainTemplate from "@/templates/Main.vue";
-</script>
-
-<script lang="ts">
-export default defineComponent({
-  computed: {},
-});
-</script>
diff --git a/src/views/admin/club/newsletter/Newsletter.vue b/src/views/admin/club/newsletter/Newsletter.vue
index 01c158f..ccb89b9 100644
--- a/src/views/admin/club/newsletter/Newsletter.vue
+++ b/src/views/admin/club/newsletter/Newsletter.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Newsletter</h1>
-      </div>
-    </template>
+  <MainTemplate title="Newsletter">
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
         <Pagination
diff --git a/src/views/admin/club/newsletter/NewsletterRouting.vue b/src/views/admin/club/newsletter/NewsletterRouting.vue
index 6089853..ad85dbc 100644
--- a/src/views/admin/club/newsletter/NewsletterRouting.vue
+++ b/src/views/admin/club/newsletter/NewsletterRouting.vue
@@ -1,20 +1,17 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="origin?.title">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary w-fit">zurück zur Liste</RouterLink>
     </template>
     <template #topBar>
-      <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8 min-h-fit grow">{{ origin?.title }}</h1>
-        <NewsletterSyncing
-          :executeSyncAll="executeSyncAll"
-          @syncState="
-            (state) => {
-              syncState = state;
-            }
-          "
-        />
-      </div>
+      <NewsletterSyncing
+        :executeSyncAll="executeSyncAll"
+        @syncState="
+          (state) => {
+            syncState = state;
+          }
+        "
+      />
     </template>
     <template #diffMain>
       <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
diff --git a/src/views/admin/club/protocol/Protocol.vue b/src/views/admin/club/protocol/Protocol.vue
index 162eac4..6d11b50 100644
--- a/src/views/admin/club/protocol/Protocol.vue
+++ b/src/views/admin/club/protocol/Protocol.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Protokolle</h1>
-      </div>
-    </template>
+  <MainTemplate title="Protokolle">
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
         <Pagination
diff --git a/src/views/admin/club/protocol/ProtocolRouting.vue b/src/views/admin/club/protocol/ProtocolRouting.vue
index cf89a8c..1a884ea 100644
--- a/src/views/admin/club/protocol/ProtocolRouting.vue
+++ b/src/views/admin/club/protocol/ProtocolRouting.vue
@@ -1,20 +1,17 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`${origin?.title}, ${origin?.date}`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary w-fit">zurück zur Liste</RouterLink>
     </template>
     <template #topBar>
-      <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8 min-h-fit grow">{{ origin?.title }}, {{ origin?.date }}</h1>
-        <ProtocolSyncing
-          :executeSyncAll="executeSyncAll"
-          @syncState="
-            (state) => {
-              syncState = state;
-            }
-          "
-        />
-      </div>
+      <ProtocolSyncing
+        :executeSyncAll="executeSyncAll"
+        @syncState="
+          (state) => {
+            syncState = state;
+          }
+        "
+      />
     </template>
     <template #diffMain>
       <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
@@ -92,10 +89,10 @@ export default defineComponent({
   },
   mounted() {
     this.fetchProtocolByActiveId();
-    this.fetchProtocolAgenda()
-    this.fetchProtocolDecision()
-    this.fetchProtocolPresence()
-    this.fetchProtocolVoting()
+    this.fetchProtocolAgenda();
+    this.fetchProtocolDecision();
+    this.fetchProtocolPresence();
+    this.fetchProtocolVoting();
   },
   // this.syncState is undefined, so it will never work
   // beforeRouteLeave(to, from, next) {
@@ -118,8 +115,8 @@ export default defineComponent({
     ...mapActions(useProtocolStore, ["fetchProtocolByActiveId"]),
     ...mapActions(useProtocolAgendaStore, ["fetchProtocolAgenda"]),
     ...mapActions(useProtocolDecisionStore, ["fetchProtocolDecision"]),
-    ...mapActions(useProtocolPresenceStore,["fetchProtocolPresence"]),
-    ...mapActions(useProtocolVotingStore,["fetchProtocolVoting"]),
+    ...mapActions(useProtocolPresenceStore, ["fetchProtocolPresence"]),
+    ...mapActions(useProtocolVotingStore, ["fetchProtocolVoting"]),
     ...mapActions(useModalStore, ["openModal"]),
     openInfoModal() {
       this.openModal(
diff --git a/src/views/admin/club/query/Builder.vue b/src/views/admin/club/query/Builder.vue
index 08b0b0d..6255705 100644
--- a/src/views/admin/club/query/Builder.vue
+++ b/src/views/admin/club/query/Builder.vue
@@ -1,57 +1,50 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Query Builder</h1>
-      </div>
-    </template>
-    <template #diffMain>
-      <div class="flex flex-col w-full h-full gap-2 px-7 overflow-y-auto">
-        <BuilderHost
-          v-model="query"
-          allow-predefined-select
-          @query:run="sendQuery"
-          @query:save="triggerSave"
-          @results:clear="clearResults"
-          @results:export="exportData"
-        />
-        <p>Ergebnisse:</p>
-        <div
-          v-if="loadingData == 'failed'"
-          class="flex flex-col p-2 border border-red-600 bg-red-200 rounded-md select-none"
-        >
-          <p v-if="typeof queryError == 'string'">
-            {{ queryError }}
+  <MainTemplate title="Query Builder">
+    <template #main>
+      <BuilderHost
+        v-model="query"
+        allow-predefined-select
+        @query:run="sendQuery"
+        @query:save="triggerSave"
+        @results:clear="clearResults"
+        @results:export="exportData"
+      />
+      <p>Ergebnisse:</p>
+      <div
+        v-if="loadingData == 'failed'"
+        class="flex flex-col p-2 border border-red-600 bg-red-200 rounded-md select-none"
+      >
+        <p v-if="typeof queryError == 'string'">
+          {{ queryError }}
+        </p>
+        <div v-else>
+          <p>
+            CODE: <br />
+            {{ queryError.code }}
+          </p>
+          <br />
+          <p>
+            MSG: <br />
+            {{ queryError.msg }}
+          </p>
+          <br />
+          <p>
+            RESULTING SQL: <br />
+            {{ queryError.sql }}
           </p>
-          <div v-else>
-            <p>
-              CODE: <br />
-              {{ queryError.code }}
-            </p>
-            <br />
-            <p>
-              MSG: <br />
-              {{ queryError.msg }}
-            </p>
-            <br />
-            <p>
-              RESULTING SQL: <br />
-              {{ queryError.sql }}
-            </p>
-          </div>
         </div>
-        <Pagination
-          v-else
-          :items="data"
-          :totalCount="totalLength"
-          :indicateLoading="loadingData == 'loading'"
-          @load-data="(offset, count) => sendQuery(offset, count)"
-        >
-          <template #pageRow="{ row }: { row: { id: FieldType; [key: string]: FieldType } }">
-            <p>{{ row }}</p>
-          </template>
-        </Pagination>
       </div>
+      <Pagination
+        v-else
+        :items="data"
+        :totalCount="totalLength"
+        :indicateLoading="loadingData == 'loading'"
+        @load-data="(offset, count) => sendQuery(offset, count)"
+      >
+        <template #pageRow="{ row }: { row: { id: FieldType; [key: string]: FieldType } }">
+          <p>{{ row }}</p>
+        </template>
+      </Pagination>
     </template>
   </MainTemplate>
 </template>
diff --git a/src/views/admin/configuration/award/Award.vue b/src/views/admin/configuration/award/Award.vue
index 5b51a26..084fa87 100644
--- a/src/views/admin/configuration/award/Award.vue
+++ b/src/views/admin/configuration/award/Award.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Auszeichnungen</h1>
-      </div>
-    </template>
+  <MainTemplate title="Auszeichnungen">
     <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">
diff --git a/src/views/admin/configuration/award/AwardEdit.vue b/src/views/admin/configuration/award/AwardEdit.vue
index 4e6a4a1..6b361c9 100644
--- a/src/views/admin/configuration/award/AwardEdit.vue
+++ b/src/views/admin/configuration/award/AwardEdit.vue
@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Auszeichnung ${origin?.award} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Auszeichnung {{ origin?.award }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
diff --git a/src/views/admin/configuration/calendarType/CalendarType.vue b/src/views/admin/configuration/calendarType/CalendarType.vue
index 5ec6a1b..ee703c7 100644
--- a/src/views/admin/configuration/calendarType/CalendarType.vue
+++ b/src/views/admin/configuration/calendarType/CalendarType.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Termintyp</h1>
-      </div>
-    </template>
+  <MainTemplate title="Termintyp">
     <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">
diff --git a/src/views/admin/configuration/calendarType/CalendarTypeEdit.vue b/src/views/admin/configuration/calendarType/CalendarTypeEdit.vue
index f1aebb7..c27a77f 100644
--- a/src/views/admin/configuration/calendarType/CalendarTypeEdit.vue
+++ b/src/views/admin/configuration/calendarType/CalendarTypeEdit.vue
@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Termintyp ${origin?.type} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Termintyp {{ origin?.type }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
diff --git a/src/views/admin/configuration/communicationType/CommunicationType.vue b/src/views/admin/configuration/communicationType/CommunicationType.vue
index 2d0fb4c..59214e7 100644
--- a/src/views/admin/configuration/communicationType/CommunicationType.vue
+++ b/src/views/admin/configuration/communicationType/CommunicationType.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Kommunikationsarten</h1>
-      </div>
-    </template>
+  <MainTemplate title="Kommunikationsarten">
     <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">
diff --git a/src/views/admin/configuration/communicationType/CommunicationTypeEdit.vue b/src/views/admin/configuration/communicationType/CommunicationTypeEdit.vue
index ed42874..e2e0afc 100644
--- a/src/views/admin/configuration/communicationType/CommunicationTypeEdit.vue
+++ b/src/views/admin/configuration/communicationType/CommunicationTypeEdit.vue
@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Kommunikationsart ${origin?.type} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Kommunikationsart {{ origin?.type }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
diff --git a/src/views/admin/configuration/executivePosition/ExecutivePosition.vue b/src/views/admin/configuration/executivePosition/ExecutivePosition.vue
index 4a44749..170a2b7 100644
--- a/src/views/admin/configuration/executivePosition/ExecutivePosition.vue
+++ b/src/views/admin/configuration/executivePosition/ExecutivePosition.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Vereinsämter</h1>
-      </div>
-    </template>
+  <MainTemplate title="Vereinsämter">
     <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">
diff --git a/src/views/admin/configuration/executivePosition/ExecutivePositionEdit.vue b/src/views/admin/configuration/executivePosition/ExecutivePositionEdit.vue
index 6fa253b..e07c025 100644
--- a/src/views/admin/configuration/executivePosition/ExecutivePositionEdit.vue
+++ b/src/views/admin/configuration/executivePosition/ExecutivePositionEdit.vue
@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Vereinsamt ${origin?.position} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Vereinsamt {{ origin?.position }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
diff --git a/src/views/admin/configuration/membershipStatus/MembershipStatus.vue b/src/views/admin/configuration/membershipStatus/MembershipStatus.vue
index 014bae0..9dc154f 100644
--- a/src/views/admin/configuration/membershipStatus/MembershipStatus.vue
+++ b/src/views/admin/configuration/membershipStatus/MembershipStatus.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Mitgliedsstatus</h1>
-      </div>
-    </template>
+  <MainTemplate title="Mitgliedsstatus">
     <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">
diff --git a/src/views/admin/configuration/membershipStatus/MembershipStatusEdit.vue b/src/views/admin/configuration/membershipStatus/MembershipStatusEdit.vue
index e91f115..bc8e8cb 100644
--- a/src/views/admin/configuration/membershipStatus/MembershipStatusEdit.vue
+++ b/src/views/admin/configuration/membershipStatus/MembershipStatusEdit.vue
@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Mitgliedsstatus ${origin?.status} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Mitgliedsstatus {{ origin?.status }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
diff --git a/src/views/admin/configuration/newsletterConfig/NewsletterConfig.vue b/src/views/admin/configuration/newsletterConfig/NewsletterConfig.vue
index d87cc74..1555573 100644
--- a/src/views/admin/configuration/newsletterConfig/NewsletterConfig.vue
+++ b/src/views/admin/configuration/newsletterConfig/NewsletterConfig.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Newsletter Konfiguration</h1>
-      </div>
-    </template>
+  <MainTemplate title="Newsletter Konfiguration">
     <template #main>
       <p>
         Ein Newsletter kann als pdf exportiert oder per Mail versandt werden. <br />
diff --git a/src/views/admin/configuration/qualification/Qualification.vue b/src/views/admin/configuration/qualification/Qualification.vue
index cca2026..f6de938 100644
--- a/src/views/admin/configuration/qualification/Qualification.vue
+++ b/src/views/admin/configuration/qualification/Qualification.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Qualifikationen</h1>
-      </div>
-    </template>
+  <MainTemplate title="Qualifikationen">
     <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">
diff --git a/src/views/admin/configuration/qualification/QualificationEdit.vue b/src/views/admin/configuration/qualification/QualificationEdit.vue
index 9fcdb93..053ce0b 100644
--- a/src/views/admin/configuration/qualification/QualificationEdit.vue
+++ b/src/views/admin/configuration/qualification/QualificationEdit.vue
@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Qualifikation ${origin?.qualification} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Qualifikation {{ origin?.qualification }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
diff --git a/src/views/admin/configuration/queryStore/QueryStore.vue b/src/views/admin/configuration/queryStore/QueryStore.vue
index a9b47a8..38da2f6 100644
--- a/src/views/admin/configuration/queryStore/QueryStore.vue
+++ b/src/views/admin/configuration/queryStore/QueryStore.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">gespeicherte Abfragen</h1>
-      </div>
-    </template>
+  <MainTemplate title="gespeicherte Abfragen">
     <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">
diff --git a/src/views/admin/configuration/salutation/Salutation.vue b/src/views/admin/configuration/salutation/Salutation.vue
index a1ad0aa..7cf359e 100644
--- a/src/views/admin/configuration/salutation/Salutation.vue
+++ b/src/views/admin/configuration/salutation/Salutation.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Anrede</h1>
-      </div>
-    </template>
+  <MainTemplate title="Anrede">
     <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">
diff --git a/src/views/admin/configuration/salutation/SalutationEdit.vue b/src/views/admin/configuration/salutation/SalutationEdit.vue
index e1fd5f1..3d8064e 100644
--- a/src/views/admin/configuration/salutation/SalutationEdit.vue
+++ b/src/views/admin/configuration/salutation/SalutationEdit.vue
@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Anrede ${origin?.salutation} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Anrede {{ origin?.salutation }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
diff --git a/src/views/admin/configuration/template/Template.vue b/src/views/admin/configuration/template/Template.vue
index 478467a..a16fc49 100644
--- a/src/views/admin/configuration/template/Template.vue
+++ b/src/views/admin/configuration/template/Template.vue
@@ -1,12 +1,9 @@
 <template>
-  <MainTemplate>
+  <MainTemplate title="Templates">
     <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Templates</h1>
-        <RouterLink :to="{ name: 'admin-configuration-template-info' }">
-          <InformationCircleIcon class="text-gray-500 h-5 w-5" />
-        </RouterLink>
-      </div>
+      <RouterLink :to="{ name: 'admin-configuration-template-info' }">
+        <InformationCircleIcon class="text-gray-500 h-5 w-5" />
+      </RouterLink>
     </template>
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
diff --git a/src/views/admin/configuration/template/TemplateEdit.vue b/src/views/admin/configuration/template/TemplateEdit.vue
index 3525a87..adf95c8 100644
--- a/src/views/admin/configuration/template/TemplateEdit.vue
+++ b/src/views/admin/configuration/template/TemplateEdit.vue
@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Template ${origin?.template} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Template {{ origin?.template }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
diff --git a/src/views/admin/configuration/template/UsageInfo.vue b/src/views/admin/configuration/template/UsageInfo.vue
index 7dc02b4..8bc7d38 100644
--- a/src/views/admin/configuration/template/UsageInfo.vue
+++ b/src/views/admin/configuration/template/UsageInfo.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Templates - Verwendungsinformation</h1>
-      </div>
-    </template>
+  <MainTemplate title="Templates - Verwendungsinformation">
     <template #main>
       <p>
         Mit diesem Editor können Vorlagen erstellt werden, welche später dafür genutzt werden können, um pdfs zu drucken
diff --git a/src/views/admin/configuration/templateUsage/TemplateUsage.vue b/src/views/admin/configuration/templateUsage/TemplateUsage.vue
index 5dcfd37..8050121 100644
--- a/src/views/admin/configuration/templateUsage/TemplateUsage.vue
+++ b/src/views/admin/configuration/templateUsage/TemplateUsage.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Template-Verwendung</h1>
-      </div>
-    </template>
+  <MainTemplate title="Template-Verwendung">
     <template #main>
       <TemplateUsageListItem v-for="usage in templateUsages" :key="usage.scope" :templateUsage="usage" />
     </template>
diff --git a/src/views/admin/management/backup/BackupRouting.vue b/src/views/admin/management/backup/BackupRouting.vue
index ba9d64d..bfa84bf 100644
--- a/src/views/admin/management/backup/BackupRouting.vue
+++ b/src/views/admin/management/backup/BackupRouting.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Backups</h1>
-      </div>
-    </template>
+  <MainTemplate title="Backups">
     <template #diffMain>
       <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
         <div class="flex flex-col grow gap-2 overflow-hidden">
diff --git a/src/views/admin/management/backup/GeneratedBackup.vue b/src/views/admin/management/backup/GeneratedBackup.vue
index 1e7920a..14f73c2 100644
--- a/src/views/admin/management/backup/GeneratedBackup.vue
+++ b/src/views/admin/management/backup/GeneratedBackup.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-col gap-4 h-full pl-7">
-    <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
+  <div class="flex flex-col gap-4 h-full">
+    <div class="flex flex-col gap-2 grow overflow-y-scroll">
       <BackupListItem v-for="backup in backups" :key="backup" :backup="backup" />
     </div>
     <div class="flex flex-row gap-4">
diff --git a/src/views/admin/management/backup/UploadedBackup.vue b/src/views/admin/management/backup/UploadedBackup.vue
index c977c81..642b305 100644
--- a/src/views/admin/management/backup/UploadedBackup.vue
+++ b/src/views/admin/management/backup/UploadedBackup.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-col gap-4 h-full pl-7">
-    <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
+  <div class="flex flex-col gap-4 h-full">
+    <div class="flex flex-col gap-2 grow overflow-y-scroll">
       <BackupListItem v-for="backup in backups" :key="backup" :backup="backup" />
     </div>
     <div class="flex flex-row gap-4">
diff --git a/src/views/admin/management/role/Role.vue b/src/views/admin/management/role/Role.vue
index 3aa8205..82529a6 100644
--- a/src/views/admin/management/role/Role.vue
+++ b/src/views/admin/management/role/Role.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Rollen</h1>
-      </div>
-    </template>
+  <MainTemplate title="Rollen">
     <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">
diff --git a/src/views/admin/management/role/RoleEdit.vue b/src/views/admin/management/role/RoleEdit.vue
index 139e1af..7ca545e 100644
--- a/src/views/admin/management/role/RoleEdit.vue
+++ b/src/views/admin/management/role/RoleEdit.vue
@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Rolle ${origin?.role} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Rolle {{ origin?.role }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
diff --git a/src/views/admin/management/role/RoleEditPermission.vue b/src/views/admin/management/role/RoleEditPermission.vue
index 1937922..8dfc50f 100644
--- a/src/views/admin/management/role/RoleEditPermission.vue
+++ b/src/views/admin/management/role/RoleEditPermission.vue
@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Rolle ${role?.role} - Berechtigungen bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Rolle {{ role?.role }} - Berechtigungen bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
diff --git a/src/views/admin/management/setting/Setting.vue b/src/views/admin/management/setting/Setting.vue
index 25e602a..b88de39 100644
--- a/src/views/admin/management/setting/Setting.vue
+++ b/src/views/admin/management/setting/Setting.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Einstellungen</h1>
-      </div>
-    </template>
+  <MainTemplate title="Einstellungen">
     <template #main>
       <p>Hinweis: Optionale Felder können leer gelassen werden und nutzen dann einen Fallback-Werte.</p>
       <ClubImageSetting />
diff --git a/src/views/admin/management/user/Invite.vue b/src/views/admin/management/user/Invite.vue
index ace0038..c047a68 100644
--- a/src/views/admin/management/user/Invite.vue
+++ b/src/views/admin/management/user/Invite.vue
@@ -1,17 +1,10 @@
 <template>
-  <MainTemplate>
+  <MainTemplate title="offene Einladungen">
     <template #headerInsert>
       <RouterLink :to="{ name: 'admin-management-user' }" class="text-primary">zurück zur Nutzerliste</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">offene Einladungen</h1>
-      </div>
-    </template>
-    <template #diffMain>
-      <div class="flex flex-col gap-2 grow overflow-y-scroll px-7">
-        <InviteListItem v-for="invite in invites" :key="invite.username" :invite="invite" />
-      </div>
+    <template #main>
+      <InviteListItem v-for="invite in invites" :key="invite.username" :invite="invite" />
     </template>
   </MainTemplate>
 </template>
diff --git a/src/views/admin/management/user/User.vue b/src/views/admin/management/user/User.vue
index 0749841..4de0225 100644
--- a/src/views/admin/management/user/User.vue
+++ b/src/views/admin/management/user/User.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Benutzer</h1>
-      </div>
-    </template>
+  <MainTemplate title="Benutzer">
     <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">
diff --git a/src/views/admin/management/user/UserEdit.vue b/src/views/admin/management/user/UserEdit.vue
index 7a8299c..ef97998 100644
--- a/src/views/admin/management/user/UserEdit.vue
+++ b/src/views/admin/management/user/UserEdit.vue
@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Nutzer ${origin?.username} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Nutzer {{ origin?.username }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
diff --git a/src/views/admin/management/user/UserEditPermission.vue b/src/views/admin/management/user/UserEditPermission.vue
index ea374bc..d5c08b3 100644
--- a/src/views/admin/management/user/UserEditPermission.vue
+++ b/src/views/admin/management/user/UserEditPermission.vue
@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Nutzer ${user?.username} - Berechtigungen bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Nutzer {{ user?.username }} - Berechtigungen bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <p>Hinweis: Berechtigungen von Nutzer und Rolle sind ergänzend.</p>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
diff --git a/src/views/admin/management/user/UserEditRoles.vue b/src/views/admin/management/user/UserEditRoles.vue
index 87ca35c..e385e7d 100644
--- a/src/views/admin/management/user/UserEditRoles.vue
+++ b/src/views/admin/management/user/UserEditRoles.vue
@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Nutzer ${origin?.username} - Rollen bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Nutzer {{ origin?.username }} - Rollen bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
diff --git a/src/views/admin/management/version/VersionDisplay.vue b/src/views/admin/management/version/VersionDisplay.vue
index 06cbcda..6fa2e06 100644
--- a/src/views/admin/management/version/VersionDisplay.vue
+++ b/src/views/admin/management/version/VersionDisplay.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate :useStagedOverviewLink="false">
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Versions-Kontrolle</h1>
-      </div>
-    </template>
+  <MainTemplate title="Versions-Kontrolle" :useStagedOverviewLink="false">
     <template #diffMain>
       <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">
diff --git a/src/views/admin/management/webapi/Webapi.vue b/src/views/admin/management/webapi/Webapi.vue
index 111c0f9..0848453 100644
--- a/src/views/admin/management/webapi/Webapi.vue
+++ b/src/views/admin/management/webapi/Webapi.vue
@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Webapi-Token</h1>
-      </div>
-    </template>
+  <MainTemplate title="Webapi-Token">
     <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">
diff --git a/src/views/admin/management/webapi/WebapiEdit.vue b/src/views/admin/management/webapi/WebapiEdit.vue
index 65ea18f..8bd44a8 100644
--- a/src/views/admin/management/webapi/WebapiEdit.vue
+++ b/src/views/admin/management/webapi/WebapiEdit.vue
@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Webapi-Token ${origin?.title} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Webapi-Token {{ origin?.title }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
diff --git a/src/views/admin/management/webapi/WebapiEditPermission.vue b/src/views/admin/management/webapi/WebapiEditPermission.vue
index 823ab58..35d3854 100644
--- a/src/views/admin/management/webapi/WebapiEditPermission.vue
+++ b/src/views/admin/management/webapi/WebapiEditPermission.vue
@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Webapi-Token ${webapi?.title} - Berechtigungen bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Webapi-Token {{ webapi?.title }} - Berechtigungen bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
diff --git a/src/views/docs/DocPage.vue b/src/views/docs/DocPage.vue
index 483a7fe..ecd8c86 100644
--- a/src/views/docs/DocPage.vue
+++ b/src/views/docs/DocPage.vue
@@ -2,7 +2,7 @@
   <MainTemplate :useStagedOverviewLink="false">
     <!-- <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">{{page}}</h1>
+        <h1 class="font-bold text-xl h-8 min-h-fit">{{page}}</h1>
       </div>
     </template> -->
     <template #diffMain>
diff --git a/src/views/public/calendar/Calendar.vue b/src/views/public/calendar/Calendar.vue
index 8c68586..453b434 100644
--- a/src/views/public/calendar/Calendar.vue
+++ b/src/views/public/calendar/Calendar.vue
@@ -1,9 +1,7 @@
 <template>
-  <MainTemplate :showBack="false">
+  <MainTemplate title="Kalender" :showBack="false">
     <template #topBar>
-      <div class="flex flex-row items-center gap-4 pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Kalender</h1>
-        <div class="grow"></div>
+      <div class="flex flex-row gap-2">
         <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
         <RouterLink :to="{ name: 'public-calendar-explain' }">
           <InformationCircleIcon class="text-gray-500 h-5 w-5 cursor-pointer" />
diff --git a/src/views/public/calendar/CalendarExplain.vue b/src/views/public/calendar/CalendarExplain.vue
index 306d3c2..151debf 100644
--- a/src/views/public/calendar/CalendarExplain.vue
+++ b/src/views/public/calendar/CalendarExplain.vue
@@ -1,5 +1,5 @@
 <template>
-  <MainTemplate :showBack="false">
+  <MainTemplate title="Kalender-Erklärung - WebCal Kalendar einbinden" :showBack="false">
     <template #headerInsert>
       <RouterLink
         :to="{
@@ -10,11 +10,6 @@
         zum Kalender
       </RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center gap-2 pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-fit">Kalender-Erklärung - WebCal Kalendar einbinden</h1>
-      </div>
-    </template>
     <template #main>
       <div class="instruction">
         <h2>iOS: Webcal-Link einbinden</h2>