From b48a10250c61109501d941072372c7f16603d9d9 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Sat, 29 Apr 2023 23:41:26 +0200
Subject: [PATCH] Add page layout to all views

---
 resources/js/components/Page/Layout.vue       |  10 +-
 resources/js/views/Initialize/VIndex.vue      |  34 ++-
 resources/js/views/activity/VForm.vue         |  53 +++--
 resources/js/views/activity/VIndex.vue        |  25 +--
 resources/js/views/allpayment/VForm.vue       |  12 +-
 resources/js/views/contribution/VIndex.vue    |  82 ++++----
 resources/js/views/dashboard/VIndex.vue       |   2 +-
 resources/js/views/member/ShowView.vue        |  93 +++++----
 resources/js/views/member/VForm.vue           | 194 +++++++++---------
 resources/js/views/member/VIndex.vue          |   4 +-
 resources/js/views/sendpayment/VForm.vue      |  23 ++-
 resources/js/views/setting/Layout.vue         |  10 +-
 .../views/subscription/SubscriptionForm.vue   |  82 +++-----
 .../views/subscription/SubscriptionIndex.vue  |   8 +-
 14 files changed, 307 insertions(+), 325 deletions(-)

diff --git a/resources/js/components/Page/Layout.vue b/resources/js/components/Page/Layout.vue
index 1fdbb9a8..3f5796e5 100644
--- a/resources/js/components/Page/Layout.vue
+++ b/resources/js/components/Page/Layout.vue
@@ -17,7 +17,7 @@
             </div>
         </div>
 
-        <div class="grow flex flex-col">
+        <div :class="pageClass" class="grow flex flex-col">
             <slot></slot>
         </div>
     </div>
@@ -27,6 +27,14 @@
 import {menuStore} from '../../stores/menuStore.js';
 
 export default {
+    inheritAttrs: false,
+    props: {
+        pageClass: {
+            default: () => '',
+            required: false,
+            type: String,
+        },
+    },
     data: function () {
         return {
             menuStore: menuStore(),
diff --git a/resources/js/views/Initialize/VIndex.vue b/resources/js/views/Initialize/VIndex.vue
index d833e90e..3e03beca 100644
--- a/resources/js/views/Initialize/VIndex.vue
+++ b/resources/js/views/Initialize/VIndex.vue
@@ -1,25 +1,21 @@
 <template>
-    <div class="p-6 grid h-full items-center justify-center">
-        <div class="rounded border-primary-700 border border-solid p-6">
-            <div class="text-lg text-gray-200 text-sm">
-                Willkommen bei ScoutRobot.<br />
-                Bitte gib deine Zugangsdaten ein,<br />
-                um eine erste Synchronisation durchzuführen.
+    <page-layout>
+        <div class="p-6 grid h-full items-center justify-center">
+            <div class="rounded border-primary-700 border border-solid p-6">
+                <div class="text-lg text-gray-200 text-sm">
+                    Willkommen bei ScoutRobot.<br />
+                    Bitte gib deine Zugangsdaten ein,<br />
+                    um eine erste Synchronisation durchzuführen.
+                </div>
+                <form @submit.prevent="submit" class="grid gap-3 mt-5">
+                    <f-text v-model="values.mglnr" label="Mitgliedsnummer" name="mglnr" id="mglnr"></f-text>
+                    <f-text v-model="values.password" type="password" label="Passwort" name="password" id="password"></f-text>
+                    <f-text v-model="values.group_id" label="Gruppierungsnummer" name="group_id" id="group_id"></f-text>
+                    <button type="submit" class="btn w-full btn-primary mt-6 inline-block">Jetzt initialisieren</button>
+                </form>
             </div>
-            <form @submit.prevent="submit" class="grid gap-3 mt-5">
-                <f-text v-model="values.mglnr" label="Mitgliedsnummer" name="mglnr" id="mglnr"></f-text>
-                <f-text
-                    v-model="values.password"
-                    type="password"
-                    label="Passwort"
-                    name="password"
-                    id="password"
-                ></f-text>
-                <f-text v-model="values.group_id" label="Gruppierungsnummer" name="group_id" id="group_id"></f-text>
-                <button type="submit" class="btn w-full btn-primary mt-6 inline-block">Jetzt initialisieren</button>
-            </form>
         </div>
-    </div>
+    </page-layout>
 </template>
 
 <script>
diff --git a/resources/js/views/activity/VForm.vue b/resources/js/views/activity/VForm.vue
index f8be59d2..18980369 100644
--- a/resources/js/views/activity/VForm.vue
+++ b/resources/js/views/activity/VForm.vue
@@ -1,26 +1,37 @@
 <template>
-    <form id="actionform" class="grow p-3" @submit.prevent="submit">
-        <popup heading="Neue Untertätigkeit" v-if="mode === 'edit' && currentSubactivity !== null" @close="currentSubactivity = null">
-            <subactivity-form class="mt-4" v-if="currentSubactivity" :value="currentSubactivity" @stored="reloadSubactivities" @updated="mergeSubactivity"></subactivity-form>
-        </popup>
-        <div class="flex space-x-3">
-            <f-text id="name" v-model="inner.name" label="Name" required></f-text>
-            <f-switch v-model="inner.is_filterable" name="is_filterable" id="is_filterable" label="Filterbar"></f-switch>
-        </div>
-        <div class="flex space-x-3 items-center mt-6 mb-2">
-            <checkboxes-label>Untertätigkeiten</checkboxes-label>
-            <icon-button icon="plus" v-if="mode === 'edit'" @click.prevent="currentSubactivity = inner.subactivity_model">Neu</icon-button>
-        </div>
-        <div class="grid gap-2 sm:grid-cols-2 md:grid-cols-4">
-            <div v-for="option in subactivities" class="flex items-center space-x-2">
-                <a href="#" @click.prevent="currentSubactivity = option" class="transition hover:bg-yellow-600 group w-5 h-5 rounded-full flex items-center justify-center flex-none">
-                    <svg-sprite src="pencil" class="text-yellow-800 w-3 h-3 group-hover:text-yellow-200 transition"></svg-sprite>
-                </a>
-                <f-switch inline size="sm" :key="option.id" v-model="inner.subactivities" name="subactivities[]" :id="`subactivities-${option.id}`" :value="option.id" :label="option.name"></f-switch>
+    <page-layout>
+        <form id="actionform" class="grow p-3" @submit.prevent="submit">
+            <popup heading="Neue Untertätigkeit" v-if="mode === 'edit' && currentSubactivity !== null" @close="currentSubactivity = null">
+                <subactivity-form class="mt-4" v-if="currentSubactivity" :value="currentSubactivity" @stored="reloadSubactivities" @updated="mergeSubactivity"></subactivity-form>
+            </popup>
+            <div class="flex space-x-3">
+                <f-text id="name" v-model="inner.name" label="Name" required></f-text>
+                <f-switch v-model="inner.is_filterable" name="is_filterable" id="is_filterable" label="Filterbar"></f-switch>
             </div>
-        </div>
-        <save-button form="actionform"></save-button>
-    </form>
+            <div class="flex space-x-3 items-center mt-6 mb-2">
+                <checkboxes-label>Untertätigkeiten</checkboxes-label>
+                <icon-button icon="plus" v-if="mode === 'edit'" @click.prevent="currentSubactivity = inner.subactivity_model">Neu</icon-button>
+            </div>
+            <div class="grid gap-2 sm:grid-cols-2 md:grid-cols-4">
+                <div v-for="option in subactivities" class="flex items-center space-x-2">
+                    <a href="#" @click.prevent="currentSubactivity = option" class="transition hover:bg-yellow-600 group w-5 h-5 rounded-full flex items-center justify-center flex-none">
+                        <svg-sprite src="pencil" class="text-yellow-800 w-3 h-3 group-hover:text-yellow-200 transition"></svg-sprite>
+                    </a>
+                    <f-switch
+                        inline
+                        size="sm"
+                        :key="option.id"
+                        v-model="inner.subactivities"
+                        name="subactivities[]"
+                        :id="`subactivities-${option.id}`"
+                        :value="option.id"
+                        :label="option.name"
+                    ></f-switch>
+                </div>
+            </div>
+            <save-button form="actionform"></save-button>
+        </form>
+    </page-layout>
 </template>
 
 <script>
diff --git a/resources/js/views/activity/VIndex.vue b/resources/js/views/activity/VIndex.vue
index f36b51a0..9f4139bc 100644
--- a/resources/js/views/activity/VIndex.vue
+++ b/resources/js/views/activity/VIndex.vue
@@ -1,10 +1,8 @@
 <template>
-    <div class="pb-6">
+    <page-layout page-class="pb-6">
         <popup heading="Bitte bestätigen" v-if="deleting !== null">
             <div>
-                <p class="mt-4">
-                    Diese Aktivität löschen?
-                </p>
+                <p class="mt-4">Diese Aktivität löschen?</p>
                 <div class="grid grid-cols-2 gap-3 mt-6">
                     <a href="#" @click.prevent="remove" class="text-center btn btn-danger">Löschen</a>
                     <a href="#" @click.prevent="deleting = null" class="text-center btn btn-primary">Abbrechen</a>
@@ -22,13 +20,7 @@
                 <td>
                     <div class="flex space-x-1">
                         <i-link :href="activity.links.edit" class="inline-flex btn btn-warning btn-sm" v-tooltip="`bearbeiten`"><svg-sprite src="pencil"></svg-sprite></i-link>
-                        <i-link
-                            href="#"
-                            @click.prevent="deleting = activity"
-                            class="inline-flex btn btn-danger btn-sm"
-                            v-tooltip="`Entfernen`"
-                            ><svg-sprite src="trash"></svg-sprite
-                        ></i-link>
+                        <i-link href="#" @click.prevent="deleting = activity" class="inline-flex btn btn-danger btn-sm" v-tooltip="`Entfernen`"><svg-sprite src="trash"></svg-sprite></i-link>
                     </div>
                 </td>
             </tr>
@@ -37,16 +29,14 @@
         <div class="px-6">
             <v-pages class="mt-4" :value="data.meta" :only="['data']"></v-pages>
         </div>
-
-    </div>
+    </page-layout>
 </template>
 
 <script>
 import indexHelpers from '../../mixins/indexHelpers';
 
 export default {
-
-    data: function() {
+    data: function () {
         return {
             deleting: null,
         };
@@ -60,9 +50,9 @@ export default {
                 onSuccess(page) {
                     _self.inner = page.props.data;
                     _self.deleting = null;
-                }
+                },
             });
-        }
+        },
     },
 
     components: {
@@ -70,6 +60,5 @@ export default {
     },
 
     mixins: [indexHelpers],
-
 };
 </script>
diff --git a/resources/js/views/allpayment/VForm.vue b/resources/js/views/allpayment/VForm.vue
index eab372da..bcd3f807 100644
--- a/resources/js/views/allpayment/VForm.vue
+++ b/resources/js/views/allpayment/VForm.vue
@@ -1,11 +1,13 @@
 <template>
-    <form class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
-        <f-text id="year" v-model="inner.year" label="Jahr" required></f-text>
+    <page-layout>
+        <form class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
+            <f-text id="year" v-model="inner.year" label="Jahr" required></f-text>
 
-        <f-switch id="for_promise" label="Versprechen einbeziehen" v-model="inner.for_promise" size="sm"></f-switch>
+            <f-switch id="for_promise" label="Versprechen einbeziehen" v-model="inner.for_promise" size="sm"></f-switch>
 
-        <button type="submit" class="btn btn-primary">Absenden</button>
-    </form>
+            <button type="submit" class="btn btn-primary">Absenden</button>
+        </form>
+    </page-layout>
 </template>
 
 <script>
diff --git a/resources/js/views/contribution/VIndex.vue b/resources/js/views/contribution/VIndex.vue
index cc0decc0..3da4c61f 100644
--- a/resources/js/views/contribution/VIndex.vue
+++ b/resources/js/views/contribution/VIndex.vue
@@ -1,49 +1,51 @@
 <template>
-    <form target="_BLANK" class="max-w-4xl w-full mx-auto gap-6 grid-cols-2 grid p-6">
-        <f-text id="eventName" name="eventName" class="col-span-2" v-model="values.eventName" label="Veranstaltungs-Name" required></f-text>
-        <f-text id="dateFrom" name="dateFrom" type="date" v-model="values.dateFrom" label="Datum von" required></f-text>
-        <f-text id="dateUntil" name="dateUntil" type="date" v-model="values.dateUntil" label="Datum bis" required></f-text>
+    <page-layout>
+        <form target="_BLANK" class="max-w-4xl w-full mx-auto gap-6 grid-cols-2 grid p-6">
+            <f-text id="eventName" name="eventName" class="col-span-2" v-model="values.eventName" label="Veranstaltungs-Name" required></f-text>
+            <f-text id="dateFrom" name="dateFrom" type="date" v-model="values.dateFrom" label="Datum von" required></f-text>
+            <f-text id="dateUntil" name="dateUntil" type="date" v-model="values.dateUntil" label="Datum bis" required></f-text>
 
-        <f-text id="zipLocation" name="zipLocation" v-model="values.zipLocation" label="PLZ / Ort" required></f-text>
-        <f-select id="country" :options="countries" name="country" v-model="values.country" label="Land" required></f-select>
+            <f-text id="zipLocation" name="zipLocation" v-model="values.zipLocation" label="PLZ / Ort" required></f-text>
+            <f-select id="country" :options="countries" name="country" v-model="values.country" label="Land" required></f-select>
 
-        <div class="border-gray-200 shadow shadow-primary-700 p-3 shadow-[0_0_4px_gray] col-span-2">
-            <f-text
-                class="col-span-2"
-                id="search_text"
-                name="search_text"
-                v-model="searchText"
-                label="Suchen …"
-                size="sm"
-                ref="search_text_field"
-                @keypress.enter.prevent="onSubmitFirstMemberResult"
-            ></f-text>
-            <div class="mt-2 grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-2 col-span-2">
-                <f-switch
-                    :id="`members-${member.id}`"
-                    :key="member.id"
-                    :label="`${member.firstname} ${member.lastname}`"
-                    v-for="member in search.results"
-                    name="members[]"
-                    :value="member.id"
-                    v-model="values.members"
+            <div class="border-gray-200 shadow shadow-primary-700 p-3 shadow-[0_0_4px_gray] col-span-2">
+                <f-text
+                    class="col-span-2"
+                    id="search_text"
+                    name="search_text"
+                    v-model="searchText"
+                    label="Suchen …"
                     size="sm"
-                    @keypress.enter.prevent="onSubmitMemberResult(member)"
-                    inline
-                ></f-switch>
+                    ref="search_text_field"
+                    @keypress.enter.prevent="onSubmitFirstMemberResult"
+                ></f-text>
+                <div class="mt-2 grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-2 col-span-2">
+                    <f-switch
+                        :id="`members-${member.id}`"
+                        :key="member.id"
+                        :label="`${member.firstname} ${member.lastname}`"
+                        v-for="member in search.results"
+                        name="members[]"
+                        :value="member.id"
+                        v-model="values.members"
+                        size="sm"
+                        @keypress.enter.prevent="onSubmitMemberResult(member)"
+                        inline
+                    ></f-switch>
+                </div>
             </div>
-        </div>
 
-        <button
-            v-for="(compiler, index) in compilers"
-            @click.prevent="
-                values.type = compiler.class;
-                submit();
-            "
-            class="btn btn-primary mt-3 inline-block"
-            v-text="compiler.title"
-        ></button>
-    </form>
+            <button
+                v-for="(compiler, index) in compilers"
+                @click.prevent="
+                    values.type = compiler.class;
+                    submit();
+                "
+                class="btn btn-primary mt-3 inline-block"
+                v-text="compiler.title"
+            ></button>
+        </form>
+    </page-layout>
 </template>
 
 <script>
diff --git a/resources/js/views/dashboard/VIndex.vue b/resources/js/views/dashboard/VIndex.vue
index e70a61fb..9795210f 100644
--- a/resources/js/views/dashboard/VIndex.vue
+++ b/resources/js/views/dashboard/VIndex.vue
@@ -1,5 +1,5 @@
 <template>
-    <page-layout title="Dashboard">
+    <page-layout>
         <div class="gap-6 md:grid-cols-2 xl:grid-cols-4 grid p-6">
             <v-block v-for="(block, index) in blocks" :key="index" :title="block.title">
                 <v-component :data="block.data" :is="block.component"></v-component>
diff --git a/resources/js/views/member/ShowView.vue b/resources/js/views/member/ShowView.vue
index c35817db..31e11181 100644
--- a/resources/js/views/member/ShowView.vue
+++ b/resources/js/views/member/ShowView.vue
@@ -1,55 +1,54 @@
 <template>
-    <div class="p-3 grid gap-3 this-grid grow">
-        <box heading="Stammdaten" class="area-stamm hidden xl:block">
-            <stamm :inner="inner"></stamm>
-        </box>
-        <box heading="Kontakt" class="area-kontakt hidden xl:block">
-            <kontakt :inner="inner"></kontakt>
-        </box>
-        <box class="area-stammkontakt block xl:hidden">
-            <tabs v-model="tabs.stammkontakt">
-                <stamm v-show="tabs.stammkontakt.active === 'stamm'" :inner="inner"></stamm>
-                <kontakt v-show="tabs.stammkontakt.active === 'kontakt'" :inner="inner"></kontakt>
-            </tabs>
-        </box>
+    <page-layout>
+        <div class="p-3 grid gap-3 this-grid grow">
+            <box heading="Stammdaten" class="area-stamm hidden xl:block">
+                <stamm :inner="inner"></stamm>
+            </box>
+            <box heading="Kontakt" class="area-kontakt hidden xl:block">
+                <kontakt :inner="inner"></kontakt>
+            </box>
+            <box class="area-stammkontakt block xl:hidden">
+                <tabs v-model="tabs.stammkontakt">
+                    <stamm v-show="tabs.stammkontakt.active === 'stamm'" :inner="inner"></stamm>
+                    <kontakt v-show="tabs.stammkontakt.active === 'kontakt'" :inner="inner"></kontakt>
+                </tabs>
+            </box>
 
-        <box container-class="" heading="Prävention" class="area-praev hidden xl:block">
-            <prae :inner="inner"></prae>
-        </box>
-        <box heading="System" class="area-system hidden xl:block">
-            <system :inner="inner"></system>
-        </box>
-        <box class="area-praesystem block xl:hidden">
-            <tabs v-model="tabs.praesystem">
-                <prae v-show="tabs.praesystem.active === 'prae'" :inner="inner"></prae>
-                <system v-show="tabs.praesystem.active === 'system'" :inner="inner"></system>
-            </tabs>
-        </box>
+            <box container-class="" heading="Prävention" class="area-praev hidden xl:block">
+                <prae :inner="inner"></prae>
+            </box>
+            <box heading="System" class="area-system hidden xl:block">
+                <system :inner="inner"></system>
+            </box>
+            <box class="area-praesystem block xl:hidden">
+                <tabs v-model="tabs.praesystem">
+                    <prae v-show="tabs.praesystem.active === 'prae'" :inner="inner"></prae>
+                    <system v-show="tabs.praesystem.active === 'system'" :inner="inner"></system>
+                </tabs>
+            </box>
 
-        <box class="area-membershipcourse hidden xl:block">
-            <tabs v-model="tabs.membershipcourse">
-                <courses v-show="tabs.membershipcourse.active === 'course'" :value="inner.courses"></courses>
-                <memberships
-                    v-show="tabs.membershipcourse.active === 'membership'"
-                    :value="inner.memberships"
-                ></memberships>
-            </tabs>
-        </box>
-        <box heading="Ausbildungen" class="area-courses xl:hidden">
-            <courses :value="inner.courses"></courses>
-        </box>
-        <box heading="Mitgliedschaften" class="area-memberships xl:hidden">
-            <memberships :value="inner.memberships"></memberships>
-        </box>
+            <box class="area-membershipcourse hidden xl:block">
+                <tabs v-model="tabs.membershipcourse">
+                    <courses v-show="tabs.membershipcourse.active === 'course'" :value="inner.courses"></courses>
+                    <memberships v-show="tabs.membershipcourse.active === 'membership'" :value="inner.memberships"></memberships>
+                </tabs>
+            </box>
+            <box heading="Ausbildungen" class="area-courses xl:hidden">
+                <courses :value="inner.courses"></courses>
+            </box>
+            <box heading="Mitgliedschaften" class="area-memberships xl:hidden">
+                <memberships :value="inner.memberships"></memberships>
+            </box>
 
-        <box heading="Zahlungen" class="area-payments">
-            <payments :value="inner.payments"></payments>
-        </box>
+            <box heading="Zahlungen" class="area-payments">
+                <payments :value="inner.payments"></payments>
+            </box>
 
-        <box heading="Karte" container-class="grow" class="area-map hidden xl:block">
-            <vmap :inner="inner"></vmap>
-        </box>
-    </div>
+            <box heading="Karte" container-class="grow" class="area-map hidden xl:block">
+                <vmap :inner="inner"></vmap>
+            </box>
+        </div>
+    </page-layout>
 </template>
 
 <script>
diff --git a/resources/js/views/member/VForm.vue b/resources/js/views/member/VForm.vue
index cf6ca48d..fe177671 100644
--- a/resources/js/views/member/VForm.vue
+++ b/resources/js/views/member/VForm.vue
@@ -1,107 +1,109 @@
 <template>
-    <form class="flex grow relative" id="memberedit" @submit.prevent="submit">
-        <save-button form="memberedit"></save-button>
-        <popup heading="Ein Konflikt ist aufgetreten" v-if="conflict === true">
-            <div>
-                <p class="mt-4">Dieses Mitglied wurde vorher bereits aktualisiert. Daher könnte ein Update zu Datenverlust führen.</p>
-                <p class="mt-2">Wir empfehlen, die Daten aus NaMi zunächst neu zu synchronisieren und dann die Änderungen hier in der Adrema erneut vorzunehmen.</p>
-                <div class="grid grid-cols-2 gap-3 mt-6">
-                    <a href="#" @click.prevent="resync" class="text-center btn btn-primary">Neu synchronisieren</a>
-                    <a href="#" @click.prevent="forceWrite" class="text-center btn btn-danger">Änderungen schreiben</a>
+    <page-layout>
+        <form class="flex grow relative" id="memberedit" @submit.prevent="submit">
+            <save-button form="memberedit"></save-button>
+            <popup heading="Ein Konflikt ist aufgetreten" v-if="conflict === true">
+                <div>
+                    <p class="mt-4">Dieses Mitglied wurde vorher bereits aktualisiert. Daher könnte ein Update zu Datenverlust führen.</p>
+                    <p class="mt-2">Wir empfehlen, die Daten aus NaMi zunächst neu zu synchronisieren und dann die Änderungen hier in der Adrema erneut vorzunehmen.</p>
+                    <div class="grid grid-cols-2 gap-3 mt-6">
+                        <a href="#" @click.prevent="resync" class="text-center btn btn-primary">Neu synchronisieren</a>
+                        <a href="#" @click.prevent="forceWrite" class="text-center btn btn-danger">Änderungen schreiben</a>
+                    </div>
                 </div>
-            </div>
-        </popup>
+            </popup>
 
-        <!-- ***************************** Hauptbereich ****************************** -->
-        <div class="grow grid md:grid-cols-2 gap-3 p-3">
-            <box heading="Stammdaten">
-                <div class="grid sm:grid-cols-2 gap-3">
-                    <div class="grid grid-cols-2 gap-3">
-                        <f-select id="gender_id" name="gender_id" :options="genders" v-model="inner.gender_id" label="Geschlecht" size="sm"></f-select>
-                        <f-text id="salutation" v-model="inner.salutation" size="sm" label="Anrede"></f-text>
+            <!-- ***************************** Hauptbereich ****************************** -->
+            <div class="grow grid md:grid-cols-2 gap-3 p-3">
+                <box heading="Stammdaten">
+                    <div class="grid sm:grid-cols-2 gap-3">
+                        <div class="grid grid-cols-2 gap-3">
+                            <f-select id="gender_id" name="gender_id" :options="genders" v-model="inner.gender_id" label="Geschlecht" size="sm"></f-select>
+                            <f-text id="salutation" v-model="inner.salutation" size="sm" label="Anrede"></f-text>
+                        </div>
+                        <f-select :options="nationalities" id="nationality_id" v-model="inner.nationality_id" label="Staatsangehörigkeit" name="nationality_id" size="sm" required></f-select>
+                        <f-text id="firstname" v-model="inner.firstname" size="sm" label="Vorname" required></f-text>
+                        <f-text id="lastname" v-model="inner.lastname" size="sm" label="Nachname" required></f-text>
+                        <f-text id="address" v-model="inner.address" size="sm" label="Adresse" required></f-text>
+                        <f-text id="further_address" v-model="inner.further_address" size="sm" label="Adresszusatz"></f-text>
+                        <f-text id="zip" v-model="inner.zip" size="sm" label="PLZ" required></f-text>
+                        <f-text id="location" v-model="inner.location" size="sm" label="Ort" required></f-text>
+                        <f-text type="date" id="birthday" v-model="inner.birthday" size="sm" label="Geburtsdatum" required></f-text>
+                        <f-select :options="regions" name="region_id" id="region_id" v-model="inner.region_id" label="Bundesland" size="sm"></f-select>
+                        <f-select :options="countries" id="country_id" v-model="inner.country_id" label="Land" name="country_id" size="sm" required></f-select>
+                        <f-text id="other_country" v-model="inner.other_country" label="Andere Staatsangehörigkeit" size="sm"></f-text>
                     </div>
-                    <f-select :options="nationalities" id="nationality_id" v-model="inner.nationality_id" label="Staatsangehörigkeit" name="nationality_id" size="sm" required></f-select>
-                    <f-text id="firstname" v-model="inner.firstname" size="sm" label="Vorname" required></f-text>
-                    <f-text id="lastname" v-model="inner.lastname" size="sm" label="Nachname" required></f-text>
-                    <f-text id="address" v-model="inner.address" size="sm" label="Adresse" required></f-text>
-                    <f-text id="further_address" v-model="inner.further_address" size="sm" label="Adresszusatz"></f-text>
-                    <f-text id="zip" v-model="inner.zip" size="sm" label="PLZ" required></f-text>
-                    <f-text id="location" v-model="inner.location" size="sm" label="Ort" required></f-text>
-                    <f-text type="date" id="birthday" v-model="inner.birthday" size="sm" label="Geburtsdatum" required></f-text>
-                    <f-select :options="regions" name="region_id" id="region_id" v-model="inner.region_id" label="Bundesland" size="sm"></f-select>
-                    <f-select :options="countries" id="country_id" v-model="inner.country_id" label="Land" name="country_id" size="sm" required></f-select>
-                    <f-text id="other_country" v-model="inner.other_country" label="Andere Staatsangehörigkeit" size="sm"></f-text>
-                </div>
-            </box>
-            <box heading="Kontakt">
-                <div class="grid gap-3 sm:grid-cols-2">
-                    <f-text id="main_phone" v-model="inner.main_phone" size="sm" label="Telefon (Eltern)"></f-text>
-                    <f-text id="mobile_phone" v-model="inner.mobile_phone" size="sm" label="Handy (Eltern)"></f-text>
-                    <f-text id="work_phone" v-model="inner.work_phone" size="sm" label="Tel geschäftlich (Eltern)"></f-text>
-                    <f-text id="children_phone" v-model="inner.children_phone" size="sm" label="Telefon (Kind)"></f-text>
-                    <f-text id="email" v-model="inner.email" size="sm" label="E-Mail"></f-text>
-                    <f-text id="email_parents" v-model="inner.email_parents" size="sm" label="E-Mail eltern"></f-text>
-                    <f-text id="fax" v-model="inner.fax" size="sm" label="Fax"></f-text>
-                    <f-textarea class="sm:col-span-2" rows="3" id="letter_address" v-model="inner.letter_address" label="Brief-Adresse" size="sm"></f-textarea>
-                </div>
-            </box>
-            <box heading="System">
-                <div class="grid gap-3">
-                    <f-select :options="billKinds" id="bill_kind" v-model="inner.bill_kind" label="Rechnung versenden über" name="bill_kind" size="sm"></f-select>
-                    <f-select :options="subscriptions" id="subscription_id" v-model="inner.subscription_id" label="Beitrag" name="subscription_id" size="sm"></f-select>
-                    <f-switch id="has_nami" size="sm" v-model="inner.has_nami" label="In Nami eintragen"></f-switch>
-                    <f-switch id="send_newspaper" v-model="inner.send_newspaper" label="Mittendrin versenden" size="sm"></f-switch>
-                    <f-text class="sm:col-span-2" type="date" id="joined_at" v-model="inner.joined_at" label="Eintrittsdatum" size="sm"></f-text>
-                    <f-textarea rows="3" id="comment" class="col-span-2" v-model="inner.comment" label="Kommentar" size="sm"></f-textarea>
-                    <div class="contents" v-if="mode === 'create'">
-                        <f-select :options="activities" id="first_activity_id" v-model="inner.first_activity_id" label="Erste Tätigkeit" name="first_activity_id" size="sm" required></f-select>
-                        <f-select
-                            v-if="inner.first_activity_id"
-                            :options="subactivities[inner.first_activity_id]"
-                            id="first_subactivity_id"
-                            v-model="inner.first_subactivity_id"
-                            label="Erste Untertätigkeit"
-                            name="first_subactivity_id"
-                            size="sm"
-                            required
-                        ></f-select>
+                </box>
+                <box heading="Kontakt">
+                    <div class="grid gap-3 sm:grid-cols-2">
+                        <f-text id="main_phone" v-model="inner.main_phone" size="sm" label="Telefon (Eltern)"></f-text>
+                        <f-text id="mobile_phone" v-model="inner.mobile_phone" size="sm" label="Handy (Eltern)"></f-text>
+                        <f-text id="work_phone" v-model="inner.work_phone" size="sm" label="Tel geschäftlich (Eltern)"></f-text>
+                        <f-text id="children_phone" v-model="inner.children_phone" size="sm" label="Telefon (Kind)"></f-text>
+                        <f-text id="email" v-model="inner.email" size="sm" label="E-Mail"></f-text>
+                        <f-text id="email_parents" v-model="inner.email_parents" size="sm" label="E-Mail eltern"></f-text>
+                        <f-text id="fax" v-model="inner.fax" size="sm" label="Fax"></f-text>
+                        <f-textarea class="sm:col-span-2" rows="3" id="letter_address" v-model="inner.letter_address" label="Brief-Adresse" size="sm"></f-textarea>
                     </div>
-                </div>
-            </box>
-            <box heading="Prävention">
-                <div class="grid sm:grid-cols-[max-content_1fr] gap-2">
-                    <div class="grid grid-cols-[max-content_5rem] gap-1">
-                        <f-switch id="has_efz" v-model="hasEfz" size="sm" label="Führungszeugnis eingesehen"></f-switch>
-                        <div>
-                            <f-text v-if="inner.efz !== null" type="date" id="efz" v-model="inner.efz" label="am" size="sm"></f-text>
-                        </div>
-                        <f-switch id="has_ps" v-model="hasPs" size="sm" label="Hat Präventionsschulung"></f-switch>
-                        <div>
-                            <f-text v-if="inner.ps_at !== null" type="date" id="ps_at" v-model="inner.ps_at" label="am" size="sm"></f-text>
-                        </div>
-                        <f-switch id="has_more_ps" v-model="hasMorePs" size="sm" label="Hat Vertierungsschulung"></f-switch>
-                        <div>
-                            <f-text v-if="inner.more_ps_at !== null" type="date" id="more_ps_at" v-model="inner.more_ps_at" label="am" size="sm"></f-text>
-                        </div>
-                        <f-switch id="has_without_education" v-model="hasWithoutEducation" label="Einsatz ohne Schulung" size="sm"></f-switch>
-                        <div>
-                            <f-text v-if="inner.without_education_at !== null" type="date" id="without_education_at" v-model="inner.without_education_at" label="am" size="sm"></f-text>
-                        </div>
-                        <f-switch id="has_without_efz" size="sm" v-model="hasWithoutEfz" label="Einsatz ohne EFZ"></f-switch>
-                        <div>
-                            <f-text v-if="inner.without_efz_at !== null" type="date" id="without_efz_at" v-model="inner.without_efz_at" label="am" size="sm"></f-text>
+                </box>
+                <box heading="System">
+                    <div class="grid gap-3">
+                        <f-select :options="billKinds" id="bill_kind" v-model="inner.bill_kind" label="Rechnung versenden über" name="bill_kind" size="sm"></f-select>
+                        <f-select :options="subscriptions" id="subscription_id" v-model="inner.subscription_id" label="Beitrag" name="subscription_id" size="sm"></f-select>
+                        <f-switch id="has_nami" size="sm" v-model="inner.has_nami" label="In Nami eintragen"></f-switch>
+                        <f-switch id="send_newspaper" v-model="inner.send_newspaper" label="Mittendrin versenden" size="sm"></f-switch>
+                        <f-text class="sm:col-span-2" type="date" id="joined_at" v-model="inner.joined_at" label="Eintrittsdatum" size="sm"></f-text>
+                        <f-textarea rows="3" id="comment" class="col-span-2" v-model="inner.comment" label="Kommentar" size="sm"></f-textarea>
+                        <div class="contents" v-if="mode === 'create'">
+                            <f-select :options="activities" id="first_activity_id" v-model="inner.first_activity_id" label="Erste Tätigkeit" name="first_activity_id" size="sm" required></f-select>
+                            <f-select
+                                v-if="inner.first_activity_id"
+                                :options="subactivities[inner.first_activity_id]"
+                                id="first_subactivity_id"
+                                v-model="inner.first_subactivity_id"
+                                label="Erste Untertätigkeit"
+                                name="first_subactivity_id"
+                                size="sm"
+                                required
+                            ></f-select>
                         </div>
                     </div>
-                    <div class="grid gap-1">
-                        <f-switch id="has_svk" size="sm" v-model="inner.has_svk" label="SVK unterschrieben"></f-switch>
-                        <f-switch id="has_vk" size="sm" v-model="inner.has_vk" label="Verhaltenskodex unterschrieben"></f-switch>
-                        <f-switch id="multiply_pv" v-model="inner.multiply_pv" label="Multiplikator*in Präventionsschulung" size="sm"></f-switch>
-                        <f-switch id="multiply_more_pv" v-model="inner.multiply_more_pv" label="Multiplikator*in Vertierungsschulung" size="sm"></f-switch>
+                </box>
+                <box heading="Prävention">
+                    <div class="grid sm:grid-cols-[max-content_1fr] gap-2">
+                        <div class="grid grid-cols-[max-content_5rem] gap-1">
+                            <f-switch id="has_efz" v-model="hasEfz" size="sm" label="Führungszeugnis eingesehen"></f-switch>
+                            <div>
+                                <f-text v-if="inner.efz !== null" type="date" id="efz" v-model="inner.efz" label="am" size="sm"></f-text>
+                            </div>
+                            <f-switch id="has_ps" v-model="hasPs" size="sm" label="Hat Präventionsschulung"></f-switch>
+                            <div>
+                                <f-text v-if="inner.ps_at !== null" type="date" id="ps_at" v-model="inner.ps_at" label="am" size="sm"></f-text>
+                            </div>
+                            <f-switch id="has_more_ps" v-model="hasMorePs" size="sm" label="Hat Vertierungsschulung"></f-switch>
+                            <div>
+                                <f-text v-if="inner.more_ps_at !== null" type="date" id="more_ps_at" v-model="inner.more_ps_at" label="am" size="sm"></f-text>
+                            </div>
+                            <f-switch id="has_without_education" v-model="hasWithoutEducation" label="Einsatz ohne Schulung" size="sm"></f-switch>
+                            <div>
+                                <f-text v-if="inner.without_education_at !== null" type="date" id="without_education_at" v-model="inner.without_education_at" label="am" size="sm"></f-text>
+                            </div>
+                            <f-switch id="has_without_efz" size="sm" v-model="hasWithoutEfz" label="Einsatz ohne EFZ"></f-switch>
+                            <div>
+                                <f-text v-if="inner.without_efz_at !== null" type="date" id="without_efz_at" v-model="inner.without_efz_at" label="am" size="sm"></f-text>
+                            </div>
+                        </div>
+                        <div class="grid gap-1">
+                            <f-switch id="has_svk" size="sm" v-model="inner.has_svk" label="SVK unterschrieben"></f-switch>
+                            <f-switch id="has_vk" size="sm" v-model="inner.has_vk" label="Verhaltenskodex unterschrieben"></f-switch>
+                            <f-switch id="multiply_pv" v-model="inner.multiply_pv" label="Multiplikator*in Präventionsschulung" size="sm"></f-switch>
+                            <f-switch id="multiply_more_pv" v-model="inner.multiply_more_pv" label="Multiplikator*in Vertierungsschulung" size="sm"></f-switch>
+                        </div>
                     </div>
-                </div>
-            </box>
-        </div>
-    </form>
+                </box>
+            </div>
+        </form>
+    </page-layout>
 </template>
 
 <script>
diff --git a/resources/js/views/member/VIndex.vue b/resources/js/views/member/VIndex.vue
index bbc321a2..4de105d4 100644
--- a/resources/js/views/member/VIndex.vue
+++ b/resources/js/views/member/VIndex.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="pb-6">
+    <page-layout page-class="pb-6">
         <div class="px-6 py-2 flex border-b border-gray-600 items-center space-x-3">
             <f-text :value="getFilter('search')" @input="setFilter('search', $event)" id="search" name="search" label="Suchen …" size="sm"></f-text>
             <f-switch v-show="hasModule('bill')" id="ausstand" @input="setFilter('ausstand', $event)" :items="getFilter('ausstand')" label="Nur Ausstände" size="sm"></f-switch>
@@ -109,7 +109,7 @@
             ></member-memberships>
             <member-courses v-if="single !== null && sidebar === 'courses.index'" @close="closeSidebar" :courses="courses" :value="data.data[single]"></member-courses>
         </transition>
-    </div>
+    </page-layout>
 </template>
 
 <script>
diff --git a/resources/js/views/sendpayment/VForm.vue b/resources/js/views/sendpayment/VForm.vue
index 2ffc04c3..222c3fa1 100644
--- a/resources/js/views/sendpayment/VForm.vue
+++ b/resources/js/views/sendpayment/VForm.vue
@@ -1,29 +1,30 @@
 <template>
-    <div class="grid grid-cols-2">
-        <div class="p-6" v-for="type, index in types" :key="index">
-            <p class="text-white" v-for="paragraph, index in type.text" :key="index" v-text="paragraph"></p>
-            <a :href="type.link.href" target="_BLANK" class="btn btn-primary mt-3 inline-block" v-text="type.link.label"></a>
+    <page-layout>
+        <div class="grid grid-cols-2">
+            <div class="p-6" v-for="(type, index) in types" :key="index">
+                <p class="text-white" v-for="(paragraph, index) in type.text" :key="index" v-text="paragraph"></p>
+                <a :href="type.link.href" target="_BLANK" class="btn btn-primary mt-3 inline-block" v-text="type.link.label"></a>
+            </div>
         </div>
-    </div>
+    </page-layout>
 </template>
 
 <script>
 export default {
-    data: function() {
+    data: function () {
         return {
             inner: {},
         };
     },
 
     props: {
-        types: {}
+        types: {},
     },
 
     methods: {
         submit() {
-            this.$inertia.post(`/allpayment`, this.inner)
-        }
-    }
-
+            this.$inertia.post(`/allpayment`, this.inner);
+        },
+    },
 };
 </script>
diff --git a/resources/js/views/setting/Layout.vue b/resources/js/views/setting/Layout.vue
index 34e85308..95203d6a 100644
--- a/resources/js/views/setting/Layout.vue
+++ b/resources/js/views/setting/Layout.vue
@@ -1,8 +1,10 @@
 <template>
-    <div class="flex grow relative">
-        <v-tabs v-model="active" :entries="$page.props.setting_menu"></v-tabs>
-        <slot></slot>
-    </div>
+    <page-layout>
+        <div class="flex grow relative">
+            <v-tabs v-model="active" :entries="$page.props.setting_menu"></v-tabs>
+            <slot></slot>
+        </div>
+    </page-layout>
 </template>
 
 <script>
diff --git a/resources/js/views/subscription/SubscriptionForm.vue b/resources/js/views/subscription/SubscriptionForm.vue
index b05c9a8d..b15a36fc 100644
--- a/resources/js/views/subscription/SubscriptionForm.vue
+++ b/resources/js/views/subscription/SubscriptionForm.vue
@@ -1,58 +1,32 @@
 <template>
-    <form id="subedit" class="p-3 grid gap-3" @submit.prevent="submit">
-        <save-button form="subedit"></save-button>
-        <box heading="Beitrag">
-            <div class="grid gap-4 sm:grid-cols-2">
-                <f-text id="name" v-model="inner.name" label="Name" size="sm" required></f-text>
-                <f-select
-                    id="fee_id"
-                    name="fee_id"
-                    :options="fees"
-                    v-model="inner.fee_id"
-                    label="Nami-Beitrag"
-                    size="sm"
-                    required
-                ></f-select>
-                <f-switch id="split" label="Rechnung aufsplitten" v-model="inner.split" size="sm"></f-switch>
-                <f-switch
-                    id="for_promise"
-                    label="Für Versprechen benutzen"
-                    v-model="inner.for_promise"
-                    size="sm"
-                ></f-switch>
-            </div>
-        </box>
-        <box heading="Positionen">
-            <div class="flex flex-col space-y-4">
-                <div v-for="(pos, index) in inner.children" :key="index" class="flex space-x-2 items-end">
-                    <f-text :id="`name-${index}`" v-model="pos.name" label="Name" size="sm" required></f-text>
-                    <f-text
-                        :id="`amount-${index}`"
-                        v-model="pos.amount"
-                        label="Beitrag"
-                        size="sm"
-                        mode="area"
-                        required
-                    ></f-text>
-                    <a
-                        href="#"
-                        @click.prevent="inner.children.splice(index, 1)"
-                        class="btn btn-sm btn-danger icon flex-none"
-                    >
-                        <svg-sprite src="trash" class="w-5 h-5"></svg-sprite>
+    <page-layout>
+        <form id="subedit" class="p-3 grid gap-3" @submit.prevent="submit">
+            <save-button form="subedit"></save-button>
+            <box heading="Beitrag">
+                <div class="grid gap-4 sm:grid-cols-2">
+                    <f-text id="name" v-model="inner.name" label="Name" size="sm" required></f-text>
+                    <f-select id="fee_id" name="fee_id" :options="fees" v-model="inner.fee_id" label="Nami-Beitrag" size="sm" required></f-select>
+                    <f-switch id="split" label="Rechnung aufsplitten" v-model="inner.split" size="sm"></f-switch>
+                    <f-switch id="for_promise" label="Für Versprechen benutzen" v-model="inner.for_promise" size="sm"></f-switch>
+                </div>
+            </box>
+            <box heading="Positionen">
+                <div class="flex flex-col space-y-4">
+                    <div v-for="(pos, index) in inner.children" :key="index" class="flex space-x-2 items-end">
+                        <f-text :id="`name-${index}`" v-model="pos.name" label="Name" size="sm" required></f-text>
+                        <f-text :id="`amount-${index}`" v-model="pos.amount" label="Beitrag" size="sm" mode="area" required></f-text>
+                        <a href="#" @click.prevent="inner.children.splice(index, 1)" class="btn btn-sm btn-danger icon flex-none">
+                            <svg-sprite src="trash" class="w-5 h-5"></svg-sprite>
+                        </a>
+                    </div>
+                    <a href="#" @click.prevent="inner.children.push({name: '', amount: 0})" class="btn btn-sm flex btn-primary flex self-start mt-4">
+                        <svg-sprite src="plus" class="w-5 h-5"></svg-sprite>
+                        Position hinzufügen
                     </a>
                 </div>
-                <a
-                    href="#"
-                    @click.prevent="inner.children.push({name: '', amount: 0})"
-                    class="btn btn-sm flex btn-primary flex self-start mt-4"
-                >
-                    <svg-sprite src="plus" class="w-5 h-5"></svg-sprite>
-                    Position hinzufügen
-                </a>
-            </div>
-        </box>
-    </form>
+            </box>
+        </form>
+    </page-layout>
 </template>
 
 <script>
@@ -71,9 +45,7 @@ export default {
 
     methods: {
         submit() {
-            this.mode === 'create'
-                ? this.$inertia.post(`/subscription`, this.inner)
-                : this.$inertia.patch(`/subscription/${this.inner.id}`, this.inner);
+            this.mode === 'create' ? this.$inertia.post(`/subscription`, this.inner) : this.$inertia.patch(`/subscription/${this.inner.id}`, this.inner);
         },
     },
 
diff --git a/resources/js/views/subscription/SubscriptionIndex.vue b/resources/js/views/subscription/SubscriptionIndex.vue
index ac4e10f7..4cc755af 100644
--- a/resources/js/views/subscription/SubscriptionIndex.vue
+++ b/resources/js/views/subscription/SubscriptionIndex.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <page-layout>
         <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm">
             <thead>
                 <th>Name</th>
@@ -19,13 +19,11 @@
                     <div v-text="subscription.fee_name"></div>
                 </td>
                 <td>
-                    <i-link :href="`/subscription/${subscription.id}/edit`" class="inline-flex btn btn-warning btn-sm"
-                        ><svg-sprite src="pencil"></svg-sprite
-                    ></i-link>
+                    <i-link :href="`/subscription/${subscription.id}/edit`" class="inline-flex btn btn-warning btn-sm"><svg-sprite src="pencil"></svg-sprite></i-link>
                 </td>
             </tr>
         </table>
-    </div>
+    </page-layout>
 </template>
 
 <script>