From 9dcf899453ba5c61ed4573bdb9d3bca52c0dc090 Mon Sep 17 00:00:00 2001
From: dysTOS <rolandsams@gmail.com>
Date: Thu, 11 Jan 2024 16:54:47 +0100
Subject: [PATCH] refactoring

---
 package-lock.json                             |  14 +-
 package.json                                  |   2 +-
 src/app/app-routing.module.ts                 |  44 ++-
 src/app/app.module.ts                         |  36 +--
 .../ausrueckung-single.component.ts           |   2 +-
 .../ausrueckungen-aktuell.component.html      | 271 ------------------
 .../ausrueckungen-wrapper.component.ts        |   8 -
 .../einstellungen-wrapper.component.ts        |   8 -
 .../mitglied-personal-edit.component.html     |  18 +-
 .../mitglied-personal-edit.component.ts       |  19 +-
 .../finanzen/finanzen-wrapper.component.ts    |   6 -
 .../mitglieder-list.component.html            | 107 -------
 .../mitglieder-list.component.scss            | 155 ----------
 .../mitglieder-list.component.ts              | 120 --------
 .../mitglieder-overview.component.html        |  31 ++
 .../mitglieder-overview.component.scss}       |   0
 .../mitglieder-overview.component.ts          |  47 +++
 .../mitglied-roles-picker.component.html      |   0
 .../mitglied-roles-picker.component.sass      |   0
 .../mitglied-roles-picker.component.ts        |   0
 .../mitglieder-edit.component.html            | 117 ++++++++
 .../mitglieder-edit.component.scss}           |   0
 .../mitglieder-edit.component.ts              | 101 +++++++
 .../mitglieder-details.component.html         |  39 ---
 .../mitglieder-details.component.ts           | 155 ----------
 .../mitglieder-wrapper.component.ts           |   8 -
 ....ts => router-outlet-wrapper.component.ts} |   2 +-
 .../kalenderabo/kalenderabo.component.html    |   0
 .../kalenderabo/kalenderabo.component.scss}   |   0
 .../kalenderabo/kalenderabo.component.ts      |   0
 .../termin-edit/termin-edit.component.html}   |   0
 .../termin-edit/termin-edit.component.scss}   |   0
 .../termin-edit/termin-edit.component.ts}     |  13 +-
 .../termine-overview.component.html           |  79 +++++
 .../termine-overview.component.scss}          |   0
 .../termine-overview.component.ts}            | 171 ++---------
 src/app/models/Mitglied.ts                    |   6 +-
 src/app/providers/mkj-app-initializer.ts      |   1 -
 .../services/api/mitglieder-api.service.ts    |  66 +----
 src/app/services/api/termine-api.service.ts   |  58 +---
 .../mitglieder-list-config.class.ts           |  61 ++++
 .../termine-list-config.class.ts              |  69 +++++
 .../_abstract-list-datasource.class.ts        |   8 +-
 .../mitglieder-list-datasource.class.ts       |  24 ++
 .../termine-list-datasource.class.ts          |  33 +++
 .../_abstract-form-component.class.ts         |   2 +-
 .../mitglied-form/mitglied-form-helper.ts     |  30 --
 .../mitglied-form.component.html              | 190 ------------
 .../mitglied-form/mitglied-form.component.ts  |  27 --
 .../mkj-date-input.component.html             |   4 +-
 .../mkj-date-input.component.ts               |   7 +-
 .../mkj-list/mkj-list.component.html          |   2 +
 .../utilities/mkj-list/mkj-list.component.ts  |  10 +-
 53 files changed, 693 insertions(+), 1478 deletions(-)
 delete mode 100644 src/app/components/ausrueckungen/ausrueckungen-aktuell/ausrueckungen-aktuell.component.html
 delete mode 100644 src/app/components/ausrueckungen/ausrueckungen-wrapper.component.ts
 delete mode 100644 src/app/components/einstellungen/einstellungen-wrapper.component.ts
 delete mode 100644 src/app/components/finanzen/finanzen-wrapper.component.ts
 delete mode 100644 src/app/components/mitglieder/mitglied-list/mitglieder-list.component.html
 delete mode 100644 src/app/components/mitglieder/mitglied-list/mitglieder-list.component.scss
 delete mode 100644 src/app/components/mitglieder/mitglied-list/mitglieder-list.component.ts
 create mode 100644 src/app/components/mitglieder/mitglied-overview/mitglieder-overview.component.html
 rename src/app/components/{ausrueckungen/ausrueckung-editor/ausrueckung-editor.component.scss => mitglieder/mitglied-overview/mitglieder-overview.component.scss} (100%)
 create mode 100644 src/app/components/mitglieder/mitglied-overview/mitglieder-overview.component.ts
 rename src/app/components/mitglieder/{mitglieder-single => }/mitglied-roles-picker/mitglied-roles-picker.component.html (100%)
 rename src/app/components/mitglieder/{mitglieder-single => }/mitglied-roles-picker/mitglied-roles-picker.component.sass (100%)
 rename src/app/components/mitglieder/{mitglieder-single => }/mitglied-roles-picker/mitglied-roles-picker.component.ts (100%)
 create mode 100644 src/app/components/mitglieder/mitglieder-edit/mitglieder-edit.component.html
 rename src/app/components/{ausrueckungen/kalenderabo/kalenderabo.component.scss => mitglieder/mitglieder-edit/mitglieder-edit.component.scss} (100%)
 create mode 100644 src/app/components/mitglieder/mitglieder-edit/mitglieder-edit.component.ts
 delete mode 100644 src/app/components/mitglieder/mitglieder-single/mitglieder-details.component.html
 delete mode 100644 src/app/components/mitglieder/mitglieder-single/mitglieder-details.component.ts
 delete mode 100644 src/app/components/mitglieder/mitglieder-wrapper.component.ts
 rename src/app/components/{archiv/archiv-wrapper.component.ts => router-outlet-wrapper.component.ts} (70%)
 rename src/app/components/{ausrueckungen => termine}/kalenderabo/kalenderabo.component.html (100%)
 rename src/app/components/{mitglieder/mitglieder-single/mitglieder-details.component.scss => termine/kalenderabo/kalenderabo.component.scss} (100%)
 rename src/app/components/{ausrueckungen => termine}/kalenderabo/kalenderabo.component.ts (100%)
 rename src/app/components/{ausrueckungen/ausrueckung-editor/ausrueckung-editor.component.html => termine/termin-edit/termin-edit.component.html} (100%)
 rename src/app/{utilities/form-components/mitglied-form/mitglied-form.component.scss => components/termine/termin-edit/termin-edit.component.scss} (100%)
 rename src/app/components/{ausrueckungen/ausrueckung-editor/ausrueckung-editor.component.ts => termine/termin-edit/termin-edit.component.ts} (89%)
 create mode 100644 src/app/components/termine/termine-overview/termine-overview.component.html
 rename src/app/components/{ausrueckungen/ausrueckungen-aktuell/ausrueckungen-aktuell.component.scss => termine/termine-overview/termine-overview.component.scss} (100%)
 rename src/app/components/{ausrueckungen/ausrueckungen-aktuell/ausrueckungen-aktuell.component.ts => termine/termine-overview/termine-overview.component.ts} (51%)
 create mode 100644 src/app/utilities/_list-configurations/mitglieder-list-config.class.ts
 create mode 100644 src/app/utilities/_list-configurations/termine-list-config.class.ts
 create mode 100644 src/app/utilities/_list-datasources/mitglieder-list-datasource.class.ts
 create mode 100644 src/app/utilities/_list-datasources/termine-list-datasource.class.ts
 delete mode 100644 src/app/utilities/form-components/mitglied-form/mitglied-form-helper.ts
 delete mode 100644 src/app/utilities/form-components/mitglied-form/mitglied-form.component.html
 delete mode 100644 src/app/utilities/form-components/mitglied-form/mitglied-form.component.ts

diff --git a/package-lock.json b/package-lock.json
index 2073e1a..4396c3f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,7 +30,7 @@
         "normalize.css": "^8.0.1",
         "primeflex": "3.3",
         "primeicons": "^6.0.1",
-        "primeng": "^17.0.0",
+        "primeng": "^17.3.0",
         "prismjs": "^1.27.0",
         "rxjs": "^7.4.0",
         "subsink": "^1.0.2",
@@ -13017,9 +13017,9 @@
       "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
     },
     "node_modules/primeng": {
-      "version": "17.0.0",
-      "resolved": "https://registry.npmjs.org/primeng/-/primeng-17.0.0.tgz",
-      "integrity": "sha512-6ja5koKWaENKr2C1o8N5xqRII/yA0Byy9AHeb25f4vQ9gEivkRit8O9tqoiaG9fncZUL8gLVjbImUtZj2kw4gQ==",
+      "version": "17.3.0",
+      "resolved": "https://registry.npmjs.org/primeng/-/primeng-17.3.0.tgz",
+      "integrity": "sha512-iSn4tl59aj72LXYvUmFlGJ+DEBFCzDuIY97esKJcrO8eszvYtAWzbxi8b7UfY0XFSbYyrZCZuCW4iaJqTmUHMA==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -26108,9 +26108,9 @@
       "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
     },
     "primeng": {
-      "version": "17.0.0",
-      "resolved": "https://registry.npmjs.org/primeng/-/primeng-17.0.0.tgz",
-      "integrity": "sha512-6ja5koKWaENKr2C1o8N5xqRII/yA0Byy9AHeb25f4vQ9gEivkRit8O9tqoiaG9fncZUL8gLVjbImUtZj2kw4gQ==",
+      "version": "17.3.0",
+      "resolved": "https://registry.npmjs.org/primeng/-/primeng-17.3.0.tgz",
+      "integrity": "sha512-iSn4tl59aj72LXYvUmFlGJ+DEBFCzDuIY97esKJcrO8eszvYtAWzbxi8b7UfY0XFSbYyrZCZuCW4iaJqTmUHMA==",
       "requires": {
         "tslib": "^2.3.0"
       }
diff --git a/package.json b/package.json
index 4966893..b209181 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "normalize.css": "^8.0.1",
     "primeflex": "3.3",
     "primeicons": "^6.0.1",
-    "primeng": "^17.0.0",
+    "primeng": "^17.3.0",
     "prismjs": "^1.27.0",
     "rxjs": "^7.4.0",
     "subsink": "^1.0.2",
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index f6bf80f..b82327c 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -12,24 +12,20 @@ import { AppInvoiceComponent } from "./pages/app.invoice.component";
 import { AppHelpComponent } from "./pages/app.help.component";
 import { AusrueckungSingleComponent } from "./components/ausrueckungen/ausrueckung-single/ausrueckung-single.component";
 import { RouteGuard } from "./guards/route.guard";
-import { MitgliederDetailsComponent } from "./components/mitglieder/mitglieder-single/mitglieder-details.component";
+import { MitgliederEditComponent } from "./components/mitglieder/mitglieder-edit/mitglieder-edit.component";
 import { NotenOverviewComponent } from "./components/archiv/noten/noten-overview/noten-overview.component";
 import { NotenmappenOverviewComponent } from "./components/archiv/notenmappen/notenmappen-overview/notenmappen-overview.component";
 import { NotenmappeEditComponent } from "./components/archiv/notenmappen/notenmappe-edit/notenmappe-edit.component";
 import { KassabuecherComponent } from "./components/finanzen/kassabuecher-overview/kassabuecher-overview.component";
-import { ArchivWrapperComponent } from "./components/archiv/archiv-wrapper.component";
-import { AusrueckungenWrapperComponent } from "./components/ausrueckungen/ausrueckungen-wrapper.component";
 import { environment } from "src/environments/environment";
-import { KalenderaboComponent } from "./components/ausrueckungen/kalenderabo/kalenderabo.component";
-import { AusrueckungenAktuellComponent } from "./components/ausrueckungen/ausrueckungen-aktuell/ausrueckungen-aktuell.component";
+import { KalenderaboComponent } from "./components/termine/kalenderabo/kalenderabo.component";
+import { TermineOverviewComponent } from "./components/termine/termine-overview/termine-overview.component";
 import { GlobalRouteGuard } from "./guards/global-route.guard";
-import { AusrueckungEditorComponent } from "./components/ausrueckungen/ausrueckung-editor/ausrueckung-editor.component";
+import { TerminEditComponent } from "./components/termine/termin-edit/termin-edit.component";
 import { EditDeactivateGuard } from "./guards/edit-deactivate.guard";
-import { MitgliederWrapperComponent } from "./components/mitglieder/mitglieder-wrapper.component";
 import { GruppenOverviewComponent } from "./components/gruppen/gruppen-overview/gruppen-overview.component";
-import { MitgliederListComponent } from "./components/mitglieder/mitglied-list/mitglieder-list.component";
+import { MitgliederOverviewComponent } from "./components/mitglieder/mitglied-overview/mitglieder-overview.component";
 import { GruppeEditComponent } from "./components/gruppen/gruppe-edit/gruppe-edit.component";
-import { EinstellungenWrapperComponent } from "./components/einstellungen/einstellungen-wrapper.component";
 import { MitgliedPersonalEditComponent } from "./components/einstellungen/mitglied-personal-edit/mitglied-personal-edit.component";
 import { RollenEditComponent } from "./components/einstellungen/rollen-edit/rollen-edit.component";
 import { LokaleEinstellungenComponent } from "./components/einstellungen/lokale-einstellungen/lokale-einstellungen.component";
@@ -39,12 +35,12 @@ import { InstrumenteOverviewComponent } from "./components/archiv/instrumente/in
 import { InstrumenteEditorComponent } from "./components/archiv/instrumente/instrumente-editor/instrumente-editor.component";
 import { MkjChangeLogsComponent } from "./pages/change-logs/change-logs.component";
 import { GlobaleEinstellungenComponent } from "./components/einstellungen/globale-einstellungen/globale-einstellungen.component";
-import { FinanzenWrapperComponent } from "./components/finanzen/finanzen-wrapper.component";
 import { KassabuchDetailsComponent } from "./components/finanzen/kassabuch-details/kassabuch-details.component";
 import { KassabuchEditComponent } from "./components/finanzen/kassabuch-edit/kassabuch-edit.component";
 import { KassabuchungEditComponent } from "./components/finanzen/kassabuchung-edit/kassabuchung-edit.component";
 import { AnschriftenOverviewComponent as AnschriftOverviewComponent } from "./components/anschriften/anschriften-overview/anschriften-overview.component";
 import { AnschriftEditComponent as AnschriftEditComponent } from "./components/anschriften/anschriften-edit/anschriften-edit.component";
+import { RouterOutletWrapperComponent } from "./components/router-outlet-wrapper.component";
 
 @NgModule({
     imports: [
@@ -74,13 +70,13 @@ import { AnschriftEditComponent as AnschriftEditComponent } from "./components/a
                         },
                         {
                             path: "ausrueckungen",
-                            component: AusrueckungenWrapperComponent,
+                            component: RouterOutletWrapperComponent,
                             canActivate: [RouteGuard],
                             title: environment.appTitle + " - TERMINE",
                             children: [
                                 {
                                     path: "aktuell",
-                                    component: AusrueckungenAktuellComponent,
+                                    component: TermineOverviewComponent,
                                     canActivate: [RouteGuard],
                                 },
                                 {
@@ -90,13 +86,13 @@ import { AnschriftEditComponent as AnschriftEditComponent } from "./components/a
                                 },
                                 {
                                     path: "neu",
-                                    component: AusrueckungEditorComponent,
+                                    component: TerminEditComponent,
                                     canActivate: [RouteGuard],
                                     canDeactivate: [EditDeactivateGuard],
                                 },
                                 {
                                     path: ":id",
-                                    component: AusrueckungEditorComponent,
+                                    component: TerminEditComponent,
                                     canActivate: [RouteGuard],
                                     canDeactivate: [EditDeactivateGuard],
                                 },
@@ -114,15 +110,10 @@ import { AnschriftEditComponent as AnschriftEditComponent } from "./components/a
                         },
                         {
                             path: "mitglieder",
-                            component: MitgliederWrapperComponent,
+                            component: RouterOutletWrapperComponent,
                             canActivate: [RouteGuard],
                             title: environment.appTitle + " -  MITGLIEDER",
                             children: [
-                                {
-                                    path: "liste",
-                                    component: MitgliederListComponent,
-                                    canActivate: [RouteGuard],
-                                },
                                 {
                                     path: "gruppen",
                                     component: GruppenOverviewComponent,
@@ -134,9 +125,14 @@ import { AnschriftEditComponent as AnschriftEditComponent } from "./components/a
                                     canActivate: [RouteGuard],
                                     canDeactivate: [EditDeactivateGuard],
                                 },
+                                {
+                                    path: "liste",
+                                    component: MitgliederOverviewComponent,
+                                    canActivate: [RouteGuard],
+                                },
                                 {
                                     path: ":id",
-                                    component: MitgliederDetailsComponent,
+                                    component: MitgliederEditComponent,
                                     canActivate: [RouteGuard],
                                     canDeactivate: [EditDeactivateGuard],
                                 },
@@ -149,7 +145,7 @@ import { AnschriftEditComponent as AnschriftEditComponent } from "./components/a
                         },
                         {
                             path: "archiv",
-                            component: ArchivWrapperComponent,
+                            component: RouterOutletWrapperComponent,
                             canActivate: [RouteGuard],
                             title: environment.appTitle + " -  ARCHIV",
                             children: [
@@ -197,7 +193,7 @@ import { AnschriftEditComponent as AnschriftEditComponent } from "./components/a
                         },
                         {
                             path: "finanzen",
-                            component: FinanzenWrapperComponent,
+                            component: RouterOutletWrapperComponent,
                             canActivate: [RouteGuard],
                             title: environment.appTitle + " -  FINANZEN",
                             children: [
@@ -238,7 +234,7 @@ import { AnschriftEditComponent as AnschriftEditComponent } from "./components/a
                         },
                         {
                             path: "einstellungen",
-                            component: EinstellungenWrapperComponent,
+                            component: RouterOutletWrapperComponent,
                             canActivate: [RouteGuard],
                             title: environment.appTitle + " -  EINSTELLUNGEN",
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 84d5baf..bbbd2ed 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -110,7 +110,6 @@ import { TriStateCheckboxModule } from "primeng/tristatecheckbox";
 import { environment } from "src/environments/environment";
 import { AatestComponent } from "./components/aatest/aatest.component";
 import { TestApiComponent } from "./components/aatest/test-api/test-api.component";
-import { ArchivWrapperComponent } from "./components/archiv/archiv-wrapper.component";
 import { InstrumenteEditorComponent } from "./components/archiv/instrumente/instrumente-editor/instrumente-editor.component";
 import { InstrumenteOverviewComponent } from "./components/archiv/instrumente/instrumente-overview/instrumente-overview.component";
 import { NotenCardComponent } from "./components/archiv/noten/noten-card/noten-card.component";
@@ -118,24 +117,21 @@ import { NotenEditorComponent } from "./components/archiv/noten/noten-editor/not
 import { NotenOverviewComponent } from "./components/archiv/noten/noten-overview/noten-overview.component";
 import { NotenmappeEditComponent } from "./components/archiv/notenmappen/notenmappe-edit/notenmappe-edit.component";
 import { NotenmappenOverviewComponent } from "./components/archiv/notenmappen/notenmappen-overview/notenmappen-overview.component";
-import { AusrueckungEditorComponent } from "./components/ausrueckungen/ausrueckung-editor/ausrueckung-editor.component";
+import { TerminEditComponent } from "./components/termine/termin-edit/termin-edit.component";
 import { AnwesenheitsListeComponent } from "./components/ausrueckungen/ausrueckung-single/anwesenheits-liste/anwesenheits-liste.component";
 import { AusrueckungSingleComponent } from "./components/ausrueckungen/ausrueckung-single/ausrueckung-single.component";
 import { TeilnahmenOverviewComponent } from "./components/ausrueckungen/ausrueckung-single/teilnahmen-overview/teilnahmen-overview.component";
-import { AusrueckungenAktuellComponent } from "./components/ausrueckungen/ausrueckungen-aktuell/ausrueckungen-aktuell.component";
-import { AusrueckungenWrapperComponent } from "./components/ausrueckungen/ausrueckungen-wrapper.component";
-import { KalenderaboComponent } from "./components/ausrueckungen/kalenderabo/kalenderabo.component";
+import { TermineOverviewComponent } from "./components/termine/termine-overview/termine-overview.component";
+import { KalenderaboComponent } from "./components/termine/kalenderabo/kalenderabo.component";
 import { TerminCardComponent } from "./components/ausrueckungen/termin-card/termin-card.component";
-import { EinstellungenWrapperComponent } from "./components/einstellungen/einstellungen-wrapper.component";
 import { LokaleEinstellungenComponent } from "./components/einstellungen/lokale-einstellungen/lokale-einstellungen.component";
 import { MitgliedPersonalEditComponent } from "./components/einstellungen/mitglied-personal-edit/mitglied-personal-edit.component";
 import { RollenEditComponent } from "./components/einstellungen/rollen-edit/rollen-edit.component";
 import { GruppeEditComponent } from "./components/gruppen/gruppe-edit/gruppe-edit.component";
 import { GruppenOverviewComponent } from "./components/gruppen/gruppen-overview/gruppen-overview.component";
-import { MitgliederListComponent } from "./components/mitglieder/mitglied-list/mitglieder-list.component";
-import { MitgliedRolesPickerComponent } from "./components/mitglieder/mitglieder-single/mitglied-roles-picker/mitglied-roles-picker.component";
-import { MitgliederDetailsComponent } from "./components/mitglieder/mitglieder-single/mitglieder-details.component";
-import { MitgliederWrapperComponent } from "./components/mitglieder/mitglieder-wrapper.component";
+import { MitgliederOverviewComponent } from "./components/mitglieder/mitglied-overview/mitglieder-overview.component";
+import { MitgliedRolesPickerComponent } from "./components/mitglieder/mitglied-roles-picker/mitglied-roles-picker.component";
+import { MitgliederEditComponent } from "./components/mitglieder/mitglieder-edit/mitglieder-edit.component";
 import { MkjDashboardComponent } from "./components/mkj-dashboard/mkj-dashboard.component";
 import { NextGeburtstagComponent } from "./components/mkj-dashboard/next-geburtstag/next-geburtstag.component";
 import { NextTerminComponent } from "./components/mkj-dashboard/next-termin/next-termin.component";
@@ -159,7 +155,6 @@ import { MkjTextTransformPipe } from "./pipes/mkj-text-transform.pipe";
 import { mkjAppInitializer } from "./providers/mkj-app-initializer";
 import { MenuService } from "./services/menu.service";
 import { AusrueckungFormComponent } from "./utilities/form-components/ausrueckung-form/ausrueckung-form.component";
-import { MitgliedFormComponent } from "./utilities/form-components/mitglied-form/mitglied-form.component";
 import { MkjBooleanInputComponent } from "./utilities/form-input-components/mkj-boolean-input/mkj-boolean-input.component";
 import { MkjColorPickerComponent } from "./utilities/form-input-components/mkj-color-picker/mkj-color-picker.component";
 import { MkjDateInputComponent } from "./utilities/form-input-components/mkj-date-input/mkj-date-input.component";
@@ -175,7 +170,6 @@ import { MkjToolbarComponent } from "./utilities/mkj-toolbar/mkj-toolbar.compone
 import { GlobaleEinstellungenComponent } from "./components/einstellungen/globale-einstellungen/globale-einstellungen.component";
 import { MkjTextInputComponent } from "./utilities/form-input-components/mkj-text-input/mkj-text-input.component";
 import { UiNamingConfigComponent } from "./components/einstellungen/globale-einstellungen/ui-naming-config/ui-naming-config.component";
-import { FinanzenWrapperComponent } from "./components/finanzen/finanzen-wrapper.component";
 import { MkjListComponent } from "./utilities/mkj-list/mkj-list.component";
 import { MkjTileViewComponent } from "./utilities/mkj-tile-view/mkj-tile-view.component";
 import { KassabuchDetailsComponent } from "./components/finanzen/kassabuch-details/kassabuch-details.component";
@@ -195,7 +189,8 @@ import { MkjListCellComponent } from "./utilities/mkj-list/mkj-list-cell/mkj-lis
 import { ListCellValuePipe } from "./utilities/mkj-list/mkj-list-cell/list-cell-value.pipe";
 import { GruppeMitgliederListComponent } from "./components/gruppen/gruppe-mitglieder-list/gruppe-mitglieder-list.component";
 import { NotenmappeNotenListComponent } from "./components/archiv/notenmappen/notenmappe-noten-list/notenmappe-noten-list.component";
-import { KassabuchungenListComponent } from './components/finanzen/kassabuchungen-list/kassabuchungen-list.component';
+import { KassabuchungenListComponent } from "./components/finanzen/kassabuchungen-list/kassabuchungen-list.component";
+import { RouterOutletWrapperComponent } from "./components/router-outlet-wrapper.component";
 
 // FullCalendarModule.registerPlugins([
 //     dayGridPlugin,
@@ -299,6 +294,7 @@ registerLocaleData(localeDe);
         AppComponent,
         PermissionSelectedPipe,
         AnschriftOverviewComponent,
+        RouterOutletWrapperComponent,
         AnschriftEditComponent,
         AppMainComponent,
         AppTopbarComponent,
@@ -307,9 +303,6 @@ registerLocaleData(localeDe);
         AppNotfoundComponent,
         AppErrorComponent,
         AppAccessdeniedComponent,
-        AusrueckungenWrapperComponent,
-        ArchivWrapperComponent,
-        MitgliederWrapperComponent,
         StatistikMitgliederComponent,
         TestApiComponent,
         MkjDateInputComponent,
@@ -320,18 +313,17 @@ registerLocaleData(localeDe);
         AppAccessdeniedComponent,
         MkjListCellComponent,
         AusrueckungSingleComponent,
-        EinstellungenWrapperComponent,
         MkjDatePipe,
         MkjDashboardComponent,
         SignupComponent,
         LoginComponent,
-        MitgliederListComponent,
-        MitgliederDetailsComponent,
+        MitgliederOverviewComponent,
+        MitgliederEditComponent,
         NotenOverviewComponent,
         VisibleForPermissionDirective,
         NotenEditorComponent,
         MkjToolbarComponent,
-        AusrueckungEditorComponent,
+        TerminEditComponent,
         RollenEditComponent,
         ListCellValuePipe,
         MkjTextTransformPipe,
@@ -344,13 +336,12 @@ registerLocaleData(localeDe);
         MkjNotensucheComponent,
         LokaleEinstellungenComponent,
         KalenderaboComponent,
-        AusrueckungenAktuellComponent,
+        TermineOverviewComponent,
         MkjContentLoaderComponent,
         MkjTemplateDirective,
         AusrueckungFormComponent,
         MkjBooleanInputComponent,
         GruppenOverviewComponent,
-        MitgliedFormComponent,
         MkjTileComponent,
         GruppeEditComponent,
         FullNamePipe,
@@ -377,7 +368,6 @@ registerLocaleData(localeDe);
         GlobaleEinstellungenComponent,
         MkjTextInputComponent,
         UiNamingConfigComponent,
-        FinanzenWrapperComponent,
         MkjListComponent,
         MkjTileViewComponent,
         KassabuchDetailsComponent,
diff --git a/src/app/components/ausrueckungen/ausrueckung-single/ausrueckung-single.component.ts b/src/app/components/ausrueckungen/ausrueckung-single/ausrueckung-single.component.ts
index d35ea85..8709d58 100644
--- a/src/app/components/ausrueckungen/ausrueckung-single/ausrueckung-single.component.ts
+++ b/src/app/components/ausrueckungen/ausrueckung-single/ausrueckung-single.component.ts
@@ -54,7 +54,7 @@ export class AusrueckungSingleComponent implements OnInit {
 
     ngOnInit(): void {
         this.route.params.subscribe((e) => {
-            this.ausrueckungenService.getSingleTermin(e.id).subscribe(
+            this.ausrueckungenService.getById(e.id).subscribe(
                 (ausrueckung) => {
                     this.termin = ausrueckung;
                     this.updateToolbarButtons();
diff --git a/src/app/components/ausrueckungen/ausrueckungen-aktuell/ausrueckungen-aktuell.component.html b/src/app/components/ausrueckungen/ausrueckungen-aktuell/ausrueckungen-aktuell.component.html
deleted file mode 100644
index 7134c4f..0000000
--- a/src/app/components/ausrueckungen/ausrueckungen-aktuell/ausrueckungen-aktuell.component.html
+++ /dev/null
@@ -1,271 +0,0 @@
-<ng-template #toolbarContentSection>
-    <div class="flex justify-content-end mb-3">
-        <button
-            pButton
-            icon="pi pi-times"
-            class="p-button-text"
-            (click)="
-                toolbarService.contentSectionExpanded = false;
-                toolbarService.buttons[0].highlighted = false
-            "
-        ></button>
-    </div>
-    <div class="flex gap-2 align-items-center">
-        <mkj-date-input
-            type="date"
-            [value]="ausrueckungFilterInput.filterAnd[0]?.value"
-            (valueChanged)="setFilterInputDates(0, $event)"
-            label="Filter Von"
-            placeholder="Alle"
-        ></mkj-date-input>
-        <mkj-date-input
-            type="date"
-            [value]="ausrueckungFilterInput.filterAnd[1]?.value"
-            (valueChanged)="setFilterInputDates(1, $event)"
-            label="Filter Bis"
-            placeholder="Alle"
-        ></mkj-date-input>
-    </div>
-    <p-divider></p-divider>
-    <div class="flex flex-wrap justify-content-between align-items-center">
-        <div>
-            Anzahl:
-            {{ filteredRows ? filteredRows.length : 0 }}
-        </div>
-
-        <span class="p-input-icon-left">
-            <i class="pi pi-search"></i>
-            <input
-                pInputText
-                type="text"
-                [value]="dt.filters?.global?.value"
-                (input)="dt.filterGlobal($event.target.value, 'contains')"
-                placeholder="Suchen..."
-            />
-        </span>
-    </div>
-</ng-template>
-
-<div class="grid">
-    <div class="col-12">
-        <div>
-            <!-- Tabelle -->
-            <p-table
-                #dt
-                [columns]="cols"
-                [value]="ausrueckungenArray"
-                [globalFilterFields]="['name', 'vonDatum', 'kategorie']"
-                [rowHover]="true"
-                dataKey="id"
-                styleClass="p-datatable-ausrueckungen p-datatable-striped"
-                responsiveLayout="scroll"
-                [loading]="loading"
-                sortField="vonDatum"
-                (onFilter)="setFilteredRows($event)"
-                selectionMode="single"
-                (onRowSelect)="onRowSelect($event)"
-                (onRowUnselect)="onRowUnselect($event)"
-                rowExpandMode="single"
-                [(selection)]="selectedRow"
-                stateStorage="session"
-                stateKey="termine-liste"
-            >
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th pSortableColumn="name">
-                            Name <p-sortIcon field="name"></p-sortIcon>
-                        </th>
-                        <th pSortableColumn="vonDatum">
-                            Datum <p-sortIcon field="vonDatum"></p-sortIcon>
-                        </th>
-                        <th>
-                            <span>Kategorie</span>
-                            <p-columnFilter
-                                field="kategorie"
-                                matchMode="equals"
-                                display="menu"
-                                [showOperator]="false"
-                                [showClearButton]="true"
-                                [showApplyButton]="true"
-                                [showMatchModes]="true"
-                                [showAddButton]="false"
-                                [hideOnClear]="true"
-                            >
-                                <ng-template
-                                    pTemplate="filter"
-                                    let-value
-                                    let-filter="filterCallback"
-                                >
-                                    <p-dropdown
-                                        [ngModel]="value"
-                                        [options]="kategorien"
-                                        (onChange)="filter($event.value)"
-                                        placeholder="Filter"
-                                    >
-                                        <ng-template
-                                            let-option
-                                            pTemplate="item"
-                                        >
-                                            <span>{{ option.label }}</span>
-                                        </ng-template>
-                                    </p-dropdown>
-                                </ng-template>
-                            </p-columnFilter>
-                        </th>
-                        <th>
-                            <span>Status </span>
-                            <p-columnFilter
-                                field="status"
-                                matchMode="equals"
-                                display="menu"
-                                [showOperator]="false"
-                                [showClearButton]="true"
-                                [showApplyButton]="true"
-                                [showMatchModes]="false"
-                                [showAddButton]="false"
-                                [hideOnClear]="true"
-                            >
-                                <ng-template
-                                    pTemplate="filter"
-                                    let-value
-                                    let-filter="filterCallback"
-                                >
-                                    <p-dropdown
-                                        [ngModel]="value"
-                                        [options]="status"
-                                        (onChange)="filter($event.value)"
-                                        placeholder="Filter"
-                                    >
-                                        <ng-template
-                                            let-option
-                                            pTemplate="item"
-                                        >
-                                            <span
-                                                [class]="
-                                                    'ausrueckungen-badge status-' +
-                                                    option.value
-                                                "
-                                                >{{ option.label }}</span
-                                            >
-                                        </ng-template>
-                                    </p-dropdown>
-                                </ng-template>
-                            </p-columnFilter>
-                        </th>
-                    </tr>
-                </ng-template>
-
-                <ng-template
-                    pTemplate="body"
-                    let-ausrueckung
-                    let-expanded="expanded"
-                    let-rowIndex="rowIndex"
-                >
-                    <tr
-                        class="p-selectable-row"
-                        [pSelectableRow]="ausrueckung"
-                        [pSelectableRowIndex]="rowIndex"
-                        [class.ausrueckung-expired]="
-                            ausrueckung.vonDatum < actualDate
-                        "
-                        [class]="
-                            'termin-color status-' +
-                            (ausrueckung.status
-                                ? ausrueckung.status.toLowerCase()
-                                : '')
-                        "
-                    >
-                        <td>
-                            <span class="font-bold">{{
-                                ausrueckung.name
-                            }}</span>
-                            <span
-                                *ngIf="ausrueckung.gruppe"
-                                class="gruppentermin ml-2"
-                                [style.--gruppe-color]="
-                                    ausrueckung.gruppe?.color
-                                "
-                            >
-                                <i
-                                    class="pi pi-users"
-                                    [pTooltip]="ausrueckung.gruppe?.name"
-                                ></i
-                            ></span>
-                        </td>
-                        <td>
-                            {{
-                                ausrueckung.vonDatum
-                                    | mkjDate : "E d. MMMM YYYY"
-                            }}
-                            {{ ausrueckung.treffzeit }}
-                        </td>
-                        <td class="not-on-small">
-                            {{ ausrueckung.kategorie | uppercase }}
-                        </td>
-                        <td class="not-on-small">
-                            <span
-                                [class]="
-                                    'ausrueckungen-badge status-' +
-                                    (ausrueckung.status
-                                        ? ausrueckung.status.toLowerCase()
-                                        : '')
-                                "
-                            >
-                                {{ ausrueckung.status }}
-                            </span>
-                        </td>
-                    </tr>
-                </ng-template>
-
-                <ng-template pTemplate="rowexpansion" let-ausrueckung>
-                    <tr>
-                        <td colspan="4">
-                            <div
-                                *ngIf="actualDate < ausrueckung.vonDatum"
-                                class="flex justify-content-center mb-5"
-                            >
-                                <mkj-termin-teilnahme-selector
-                                    [termin]="ausrueckung"
-                                ></mkj-termin-teilnahme-selector>
-                            </div>
-                            <termin-card [termin]="ausrueckung"></termin-card>
-                            <div class="flex justify-content-around">
-                                <button
-                                    pButton
-                                    pRipple
-                                    icon="pi pi-list"
-                                    label="Details"
-                                    class="p-button-raised p-button-rounded p-button-secondary"
-                                    [routerLink]="
-                                        '../details/' + ausrueckung.id
-                                    "
-                                ></button>
-
-                                <button
-                                    *ngIf="hasAktionenPermissions"
-                                    pButton
-                                    pRipple
-                                    icon="pi pi-pencil"
-                                    label="Aktionen"
-                                    class="p-button-outlined p-button-rounded p-button-info"
-                                    (click)="rowMenu.toggle($event)"
-                                ></button>
-                            </div>
-                        </td>
-                    </tr>
-                </ng-template>
-
-                <ng-template pTemplate="emptymessage">
-                    <tr>
-                        <td colspan="6">
-                            In diesem Zeitraum sind keine Termine vorhanden!
-                        </td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
-    </div>
-</div>
-
-<p-menu #rowMenu [popup]="true" [model]="rowMenuItems"></p-menu>
-<p-menu #exportMenu [popup]="true" [model]="exportMenuItems"></p-menu>
diff --git a/src/app/components/ausrueckungen/ausrueckungen-wrapper.component.ts b/src/app/components/ausrueckungen/ausrueckungen-wrapper.component.ts
deleted file mode 100644
index 7355a5c..0000000
--- a/src/app/components/ausrueckungen/ausrueckungen-wrapper.component.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Component } from "@angular/core";
-
-@Component({
-    template: `<router-outlet></router-outlet>`,
-})
-export class AusrueckungenWrapperComponent {
-    constructor() {}
-}
diff --git a/src/app/components/einstellungen/einstellungen-wrapper.component.ts b/src/app/components/einstellungen/einstellungen-wrapper.component.ts
deleted file mode 100644
index f2b36ee..0000000
--- a/src/app/components/einstellungen/einstellungen-wrapper.component.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Component } from "@angular/core";
-
-@Component({
-    template: `<router-outlet></router-outlet>`,
-})
-export class EinstellungenWrapperComponent {
-    constructor() {}
-}
diff --git a/src/app/components/einstellungen/mitglied-personal-edit/mitglied-personal-edit.component.html b/src/app/components/einstellungen/mitglied-personal-edit/mitglied-personal-edit.component.html
index c5974d4..89e9f3c 100644
--- a/src/app/components/einstellungen/mitglied-personal-edit/mitglied-personal-edit.component.html
+++ b/src/app/components/einstellungen/mitglied-personal-edit/mitglied-personal-edit.component.html
@@ -1,17 +1 @@
-<div class="card">
-    <mkj-mitglied-form
-        *ngIf="formGroup"
-        [formGroup]="formGroup"
-        [personalMode]="true"
-    ></mkj-mitglied-form>
-    <div class="col-12 flex justify-content-end mb-3">
-        <button
-            pButton
-            pRipple
-            [icon]="isSaving ? 'pi pi-spin pi-spinner' : 'pi pi-save'"
-            [disabled]="isSaving || formGroup?.invalid || formGroup?.pristine"
-            label="Speichern"
-            (click)="updateOwnMitgliedData()"
-        ></button>
-    </div>
-</div>
+TODO: Implement
diff --git a/src/app/components/einstellungen/mitglied-personal-edit/mitglied-personal-edit.component.ts b/src/app/components/einstellungen/mitglied-personal-edit/mitglied-personal-edit.component.ts
index c21ee3a..a639543 100644
--- a/src/app/components/einstellungen/mitglied-personal-edit/mitglied-personal-edit.component.ts
+++ b/src/app/components/einstellungen/mitglied-personal-edit/mitglied-personal-edit.component.ts
@@ -4,7 +4,6 @@ import { EditComponentDeactivate } from "src/app/guards/edit-deactivate.guard";
 import { MitgliederApiService } from "src/app/services/api/mitglieder-api.service";
 import { UserService } from "src/app/services/authentication/user.service";
 import { InfoService } from "src/app/services/info.service";
-import { MitgliedFormHelper } from "src/app/utilities/form-components/mitglied-form/mitglied-form-helper";
 import { MkjToolbarService } from "src/app/utilities/mkj-toolbar/mkj-toolbar.service";
 
 @Component({
@@ -30,15 +29,15 @@ export class MitgliedPersonalEditComponent
     }
 
     public ngOnInit(): void {
-        this.userservice.getCurrentMitglied().subscribe({
-            next: (res) => {
-                this.formGroup = MitgliedFormHelper.getMitgliedFormGroup(
-                    this.fb,
-                    res
-                );
-                this.formGroup.updateValueAndValidity();
-            },
-        });
+        // this.userservice.getCurrentMitglied().subscribe({
+        //     next: (res) => {
+        //         this.formGroup = MitgliedFormHelper.getMitgliedFormGroup(
+        //             this.fb,
+        //             res
+        //         );
+        //         this.formGroup.updateValueAndValidity();
+        //     },
+        // });
     }
 
     public updateOwnMitgliedData() {
diff --git a/src/app/components/finanzen/finanzen-wrapper.component.ts b/src/app/components/finanzen/finanzen-wrapper.component.ts
deleted file mode 100644
index 556c967..0000000
--- a/src/app/components/finanzen/finanzen-wrapper.component.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Component } from "@angular/core";
-
-@Component({
-    template: `<router-outlet></router-outlet>`,
-})
-export class FinanzenWrapperComponent {}
diff --git a/src/app/components/mitglieder/mitglied-list/mitglieder-list.component.html b/src/app/components/mitglieder/mitglied-list/mitglieder-list.component.html
deleted file mode 100644
index 1034893..0000000
--- a/src/app/components/mitglieder/mitglied-list/mitglieder-list.component.html
+++ /dev/null
@@ -1,107 +0,0 @@
-<ng-template #toolbarContentSection>
-    <div class="flex justify-content-end mb-3">
-        <button
-            pButton
-            icon="pi pi-times"
-            class="p-button-text"
-            (click)="
-                toolbarService.contentSectionExpanded = false;
-                toolbarService.buttons[0].highlighted = false
-            "
-        ></button>
-    </div>
-    <div class="flex gap-2 justify-content-center align-items-center">
-        <p-selectButton
-            [options]="mitgliederFilter"
-            [(ngModel)]="selectedFilter"
-            (ngModelChange)="
-                $event.value === 'alle'
-                    ? loadAllMitglieder()
-                    : loadAktiveMitglieder()
-            "
-            optionLabel="name"
-        ></p-selectButton>
-    </div>
-    <p-divider></p-divider>
-    <div class="flex flex-wrap justify-content-between align-items-center">
-        <div>
-            Anzahl:
-            {{ mitglieder?.length ?? 0 }}
-        </div>
-
-        <span class="p-input-icon-left">
-            <i class="pi pi-search"></i>
-            <input
-                pInputText
-                type="text"
-                [value]="mitgliederTable.filters?.global?.value"
-                (input)="
-                    mitgliederTable.filterGlobal(
-                        $event.target.value,
-                        'contains'
-                    )
-                "
-                placeholder="Suchen..."
-            />
-        </span>
-    </div>
-</ng-template>
-
-<div class="grid">
-    <div class="col-12">
-        <p-table
-            #mitgliederTable
-            [value]="mitglieder"
-            [loading]="loading"
-            [globalFilterFields]="['vorname', 'zuname', 'email']"
-            responsiveLayout="stack"
-            styleClass="p-datatable-sm p-datatable-mitglieder p-datatable-striped"
-        >
-            <ng-template pTemplate="header" let-columns>
-                <tr>
-                    <th pSortableColumn="zuname">
-                        Name <p-sortIcon field="zuname"></p-sortIcon>
-                    </th>
-                    <th class="not-on-small">Adresse</th>
-                    <th>E-Mail</th>
-                    <th class="not-on-small">Mobil-Nr.</th>
-                    <th></th>
-                </tr>
-            </ng-template>
-            <ng-template pTemplate="body" let-mitglied let-columns="columns">
-                <tr [pSelectableRow]="mitglied">
-                    <td>
-                        <b>{{ mitglied?.vorname }} {{ mitglied?.zuname }}</b>
-
-                        <button
-                            *ngIf="canEdit"
-                            pButton
-                            (click)="navigateSingleMitglied(mitglied)"
-                            pTooltip="Details"
-                            tooltipPosition="left"
-                            icon="pi pi-ellipsis-h"
-                            class="just-on-small p-button-sm p-button-outlined p-button-rounded buttons-hide p-button-info"
-                        ></button>
-                    </td>
-                    <td>
-                        {{ mitglied?.strasse }} {{ mitglied?.hausnummer }}
-                        {{ mitglied?.plz }} {{ mitglied?.ort }}
-                    </td>
-                    <td>{{ mitglied?.email }}</td>
-                    <td>{{ mitglied.telefonMobil }}</td>
-                    <td class="not-on-small">
-                        <button
-                            *ngIf="canEdit"
-                            pButton
-                            (click)="navigateSingleMitglied(mitglied)"
-                            pTooltip="Details"
-                            tooltipPosition="left"
-                            icon="pi pi-ellipsis-h"
-                            class="p-button-sm p-button-outlined p-button-rounded buttons-hide p-button-info p-2"
-                        ></button>
-                    </td>
-                </tr>
-            </ng-template>
-        </p-table>
-    </div>
-</div>
diff --git a/src/app/components/mitglieder/mitglied-list/mitglieder-list.component.scss b/src/app/components/mitglieder/mitglied-list/mitglieder-list.component.scss
deleted file mode 100644
index 2f419dc..0000000
--- a/src/app/components/mitglieder/mitglied-list/mitglieder-list.component.scss
+++ /dev/null
@@ -1,155 +0,0 @@
-.small-text {
-    font-size: 0.8em;
-}
-
-:host ::ng-deep {
-    .p-paginator {
-        .p-paginator-current {
-            margin-left: auto;
-        }
-    }
-
-    .p-progressbar {
-        height: 0.5rem;
-        background-color: #d8dadc;
-
-        .p-progressbar-value {
-            background-color: #607d8b;
-        }
-    }
-
-    .table-header {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .p-calendar .p-datepicker {
-        min-width: 25rem;
-
-        td {
-            font-weight: 400;
-        }
-    }
-
-    .p-datatable.p-datatable-mitglieder {
-        .p-datatable-header {
-            padding: 1rem;
-            text-align: left;
-            // font-size: 1.5rem;
-        }
-
-        .p-paginator {
-            padding: 1rem;
-        }
-
-        .p-datatable-thead > tr > th {
-            text-align: left;
-        }
-
-        .p-dropdown-label:not(.p-placeholder) {
-            text-transform: uppercase;
-        }
-    }
-
-    .p-datatable.p-datatable-mitglieder:not(.p-datatable-gridlines) {
-        .p-datatable-tbody > tr > td {
-            // cursor: pointer;
-        }
-    }
-
-    /* Responsive */
-    .p-datatable-mitglieder .p-datatable-tbody > tr > td .p-column-title {
-        display: block;
-    }
-}
-
-.buttons-hide {
-    opacity: 0.5;
-    transition: opacity 0.2s;
-}
-
-.p-selectable-row:hover .buttons-hide {
-    opacity: 1;
-}
-
-.mitglieder-badge {
-    border-radius: 2px;
-    padding: 0.25em 0.5rem;
-    text-transform: uppercase;
-    font-weight: 700;
-    font-size: 12px;
-    letter-spacing: 0.3px;
-
-    &.status-fixiert {
-        background: #c8e6c9;
-        color: #256029;
-    }
-
-    &.status-abgesagt {
-        background: #ffcdd2;
-        color: #c63737;
-    }
-
-    &.status-geplant {
-        background: #feedaf;
-        color: #8a5340;
-    }
-
-    &.status-ersatztermin {
-        background: #b2ebfd;
-        color: #016a8a;
-    }
-}
-
-@media (min-width: 961px) {
-    .just-on-small {
-        display: none;
-    }
-}
-
-@media screen and (max-width: 960px) {
-    :host ::ng-deep {
-        .p-datatable {
-            &.p-datatable-mitglieder {
-                .p-datatable-thead > tr > th {
-                    display: none !important;
-                }
-
-                .not-on-small {
-                    display: none !important;
-                }
-                .just-on-small {
-                    display: block;
-                }
-
-                .p-datatable-tbody > tr {
-                    border-bottom: 1px solid var(--surface-d);
-                    // display: block;
-                    // align-items: center;
-
-                    > td {
-                        text-align: left;
-                        display: block;
-                        border: 0 none !important;
-                        width: 100% !important;
-                        float: left;
-                        clear: left;
-                        border: 0 none;
-
-                        .p-column-title {
-                            padding: 0.4rem;
-                            min-width: 30%;
-                            display: inline-block;
-                            margin: -0.4rem 1rem -0.4rem -0.4rem;
-                            font-weight: bold;
-                        }
-
-                        .p-progressbar {
-                            margin-top: 0.5rem;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/src/app/components/mitglieder/mitglied-list/mitglieder-list.component.ts b/src/app/components/mitglieder/mitglied-list/mitglieder-list.component.ts
deleted file mode 100644
index 0c3ddc9..0000000
--- a/src/app/components/mitglieder/mitglied-list/mitglieder-list.component.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import { Router, ActivatedRoute } from "@angular/router";
-import { Component, OnInit, TemplateRef, ViewChild } from "@angular/core";
-import { InfoService } from "src/app/services/info.service";
-import { PermissionMap } from "src/app/models/User";
-import { Mitglied } from "src/app/models/Mitglied";
-import { MitgliederApiService } from "src/app/services/api/mitglieder-api.service";
-import { MkjToolbarService } from "src/app/utilities/mkj-toolbar/mkj-toolbar.service";
-import { Table } from "primeng/table";
-import { UserService } from "src/app/services/authentication/user.service";
-import { AppConfigService } from "src/app/services/app-config.service";
-
-@Component({
-    selector: "app-mitglieder",
-    templateUrl: "./mitglieder-list.component.html",
-    styleUrls: ["./mitglieder-list.component.scss"],
-})
-export class MitgliederListComponent implements OnInit {
-    public mitglieder: Array<Mitglied>;
-
-    public loading: boolean = false;
-    public canEdit: boolean = false;
-
-    public mitgliederFilter = [
-        {
-            name: "Alle ",
-            value: "alle",
-        },
-        { name: "Nur Aktive ", value: "aktive" },
-    ];
-    public selectedFilter = this.mitgliederFilter[1];
-
-    @ViewChild("mitgliederTable") mitgliederTable: Table;
-    @ViewChild("toolbarContentSection") toolbarContentSection: TemplateRef<any>;
-
-    public readonly PermissionMap = PermissionMap;
-
-    constructor(
-        private mitgliederService: MitgliederApiService,
-        private userService: UserService,
-        private router: Router,
-        private route: ActivatedRoute,
-        private infoService: InfoService,
-        private toolbarService: MkjToolbarService,
-        appconfig: AppConfigService
-    ) {
-        this.toolbarService.header = appconfig.appNaming.Mitglieder;
-        this.toolbarService.buttons = [
-            {
-                icon: "pi pi-filter",
-                click: () => {
-                    this.toolbarService.contentSectionExpanded =
-                        !this.toolbarService.contentSectionExpanded;
-                    this.toolbarService.buttons[0].highlighted =
-                        this.toolbarService.contentSectionExpanded;
-                },
-                highlighted:
-                    this.toolbarService.contentSectionExpanded === true,
-                label: "Filtern/Suchen",
-            },
-            {
-                icon: "pi pi-plus",
-                click: () =>
-                    this.router.navigate(["../", "neu"], {
-                        relativeTo: this.route,
-                    }),
-                label: "Neu",
-                permissions: [PermissionMap.MITGLIEDER_SAVE],
-            },
-        ];
-
-        this.canEdit = this.userService.hasPermission(
-            PermissionMap.MITGLIEDER_SAVE
-        );
-    }
-
-    public ngOnInit(): void {
-        this.loadAktiveMitglieder();
-    }
-
-    public ngAfterViewInit(): void {
-        this.toolbarService.contentSectionTemplate = this.toolbarContentSection;
-        if (this.mitgliederTable?.filters?.global) {
-            this.toolbarService.contentSectionExpanded = true;
-        }
-    }
-
-    public loadAktiveMitglieder() {
-        this.mitglieder = null;
-        this.loading = true;
-        this.mitgliederService.getAktiveMitglieder().subscribe({
-            next: (res) => {
-                (this.mitglieder = res), (this.loading = false);
-            },
-            error: (error) => {
-                this.loading = false;
-                this.infoService.error(error);
-            },
-        });
-    }
-
-    public loadAllMitglieder() {
-        this.mitglieder = null;
-        this.loading = true;
-        this.mitgliederService.getAllMitglieder().subscribe(
-            (res) => {
-                (this.mitglieder = res), (this.loading = false);
-            },
-            (error) => {
-                this.loading = false;
-            }
-        );
-    }
-
-    public navigateSingleMitglied(mitglied: Mitglied) {
-        this.mitgliederService.setSelectedMitglied(mitglied);
-        this.router.navigate(["../" + mitglied.id], {
-            relativeTo: this.route,
-        });
-    }
-}
diff --git a/src/app/components/mitglieder/mitglied-overview/mitglieder-overview.component.html b/src/app/components/mitglieder/mitglied-overview/mitglieder-overview.component.html
new file mode 100644
index 0000000..6ac2e54
--- /dev/null
+++ b/src/app/components/mitglieder/mitglied-overview/mitglieder-overview.component.html
@@ -0,0 +1,31 @@
+<mkj-list
+    [datasource]="datasource"
+    [configuration]="listConfig"
+    [templateMap]="{
+        rowexpansion: rowexpansion,
+        aktivTemplate: aktivTemplate
+    }"
+    (onDoubleClick)="navigateSingleMitglied($event)"
+>
+</mkj-list>
+
+<ng-template #aktivTemplate let-mitglied>
+    <mkj-tag
+        [label]="mitglied.aktiv ? 'Aktiv' : 'Inaktiv'"
+        [severity]="mitglied.aktiv ? 'success' : 'warning'"
+    ></mkj-tag>
+</ng-template>
+
+<ng-template #rowexpansion let-mitglied>
+    <div class="col-12 flex justify-content-center">
+        <button
+            *visibleFor="[PermissionMap.MITGLIEDER_SAVE]"
+            pButton
+            pRipple
+            label="Bearbeiten"
+            icon="pi pi-pencil"
+            class="p-button-outlined p-button-sm p-button-info mr-1"
+            (click)="navigateSingleMitglied(mitglied)"
+        ></button>
+    </div>
+</ng-template>
diff --git a/src/app/components/ausrueckungen/ausrueckung-editor/ausrueckung-editor.component.scss b/src/app/components/mitglieder/mitglied-overview/mitglieder-overview.component.scss
similarity index 100%
rename from src/app/components/ausrueckungen/ausrueckung-editor/ausrueckung-editor.component.scss
rename to src/app/components/mitglieder/mitglied-overview/mitglieder-overview.component.scss
diff --git a/src/app/components/mitglieder/mitglied-overview/mitglieder-overview.component.ts b/src/app/components/mitglieder/mitglied-overview/mitglieder-overview.component.ts
new file mode 100644
index 0000000..c71a33b
--- /dev/null
+++ b/src/app/components/mitglieder/mitglied-overview/mitglieder-overview.component.ts
@@ -0,0 +1,47 @@
+import { Component } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { Mitglied } from "src/app/models/Mitglied";
+import { PermissionMap } from "src/app/models/User";
+import { AppConfigService } from "src/app/services/app-config.service";
+import { UserService } from "src/app/services/authentication/user.service";
+import { MitgliederListConfig } from "src/app/utilities/_list-configurations/mitglieder-list-config.class";
+import { MitgliederListDatasource } from "src/app/utilities/_list-datasources/mitglieder-list-datasource.class";
+import { MkjToolbarService } from "src/app/utilities/mkj-toolbar/mkj-toolbar.service";
+
+@Component({
+    selector: "app-mitglieder-overview",
+    templateUrl: "./mitglieder-overview.component.html",
+    styleUrls: ["./mitglieder-overview.component.scss"],
+    providers: [MitgliederListDatasource, MitgliederListConfig],
+})
+export class MitgliederOverviewComponent {
+    public readonly PermissionMap = PermissionMap;
+
+    constructor(
+        public datasource: MitgliederListDatasource,
+        public listConfig: MitgliederListConfig,
+        private router: Router,
+        private route: ActivatedRoute,
+        private toolbarService: MkjToolbarService,
+        private userService: UserService,
+        appconfig: AppConfigService
+    ) {
+        this.toolbarService.header = appconfig.appNaming.Mitglieder;
+        this.toolbarService.buttons = [
+            {
+                icon: "pi pi-plus",
+                click: () => this.navigateSingleMitglied(),
+                label: "Neu",
+                permissions: [PermissionMap.MITGLIEDER_SAVE],
+            },
+        ];
+    }
+
+    public navigateSingleMitglied(mitglied?: Mitglied) {
+        if (this.userService.hasPermissionNot(PermissionMap.MITGLIEDER_SAVE))
+            return;
+        this.router.navigate(["../" + (mitglied?.id ?? "new")], {
+            relativeTo: this.route,
+        });
+    }
+}
diff --git a/src/app/components/mitglieder/mitglieder-single/mitglied-roles-picker/mitglied-roles-picker.component.html b/src/app/components/mitglieder/mitglied-roles-picker/mitglied-roles-picker.component.html
similarity index 100%
rename from src/app/components/mitglieder/mitglieder-single/mitglied-roles-picker/mitglied-roles-picker.component.html
rename to src/app/components/mitglieder/mitglied-roles-picker/mitglied-roles-picker.component.html
diff --git a/src/app/components/mitglieder/mitglieder-single/mitglied-roles-picker/mitglied-roles-picker.component.sass b/src/app/components/mitglieder/mitglied-roles-picker/mitglied-roles-picker.component.sass
similarity index 100%
rename from src/app/components/mitglieder/mitglieder-single/mitglied-roles-picker/mitglied-roles-picker.component.sass
rename to src/app/components/mitglieder/mitglied-roles-picker/mitglied-roles-picker.component.sass
diff --git a/src/app/components/mitglieder/mitglieder-single/mitglied-roles-picker/mitglied-roles-picker.component.ts b/src/app/components/mitglieder/mitglied-roles-picker/mitglied-roles-picker.component.ts
similarity index 100%
rename from src/app/components/mitglieder/mitglieder-single/mitglied-roles-picker/mitglied-roles-picker.component.ts
rename to src/app/components/mitglieder/mitglied-roles-picker/mitglied-roles-picker.component.ts
diff --git a/src/app/components/mitglieder/mitglieder-edit/mitglieder-edit.component.html b/src/app/components/mitglieder/mitglieder-edit/mitglieder-edit.component.html
new file mode 100644
index 0000000..ae1b693
--- /dev/null
+++ b/src/app/components/mitglieder/mitglieder-edit/mitglieder-edit.component.html
@@ -0,0 +1,117 @@
+<mkj-form-wrapper [formGroup]="formGroup" [component]="this">
+    <div class="p-fluid grid">
+        <div class="p-field col-12 lg:col-3 md:col-6">
+            <mkj-text-input
+                label="Vorname"
+                formControlName="vorname"
+            ></mkj-text-input>
+        </div>
+        <div class="p-field col-12 lg:col-3 md:col-6">
+            <mkj-text-input
+                label="Nachname"
+                formControlName="zuname"
+            ></mkj-text-input>
+        </div>
+        <div class="p-field col-12 lg:col-3 md:col-6">
+            <mkj-text-input
+                label="Titel Vor"
+                formControlName="titelVor"
+            ></mkj-text-input>
+        </div>
+        <div class="p-field col-12 lg:col-3 md:col-6">
+            <mkj-text-input
+                label="Titel Nach"
+                formControlName="titelNach"
+            ></mkj-text-input>
+        </div>
+        <div class="p-field col-12 lg:col-3 md:col-6">
+            <mkj-date-input
+                type="date"
+                formControlName="geburtsdatum"
+                label="Geburtsdatum"
+            ></mkj-date-input>
+        </div>
+        <div class="p-field col-12 lg:col-3 md:col-6">
+            <mkj-dropdown
+                label="Geschlecht"
+                [options]="MitgliedGeschlechtMap"
+                formControlName="geschlecht"
+            ></mkj-dropdown>
+        </div>
+        <div class="p-field col-12 lg:col-3 md:col-6">
+            <mkj-text-input
+                label="E-Mail"
+                formControlName="email"
+            ></mkj-text-input>
+        </div>
+        <div class="p-field col-12 lg:col-3 md:col-6">
+            <mkj-text-input
+                label="Beruf"
+                formControlName="beruf"
+            ></mkj-text-input>
+        </div>
+
+        <div class="p-field col-12 lg:col-3 md:col-6">
+            <mkj-text-input
+                label="Straße"
+                formControlName="strasse"
+            ></mkj-text-input>
+        </div>
+        <div class="p-field col-12 lg:col-3 md:col-6">
+            <mkj-text-input
+                label="Hausnummer"
+                formControlName="hausnummer"
+            ></mkj-text-input>
+        </div>
+        <div class="p-field col-12 lg:col-3 md:col-6">
+            <mkj-text-input label="Ort" formControlName="ort"></mkj-text-input>
+        </div>
+        <div class="p-field col-12 lg:col-3 md:col-6">
+            <mkj-text-input label="PLZ" formControlName="plz"></mkj-text-input>
+        </div>
+
+        <div class="p-field col-12 lg:col-3 md:col-6">
+            <mkj-text-input
+                label="Telefon Festnetz"
+                formControlName="telefonHaupt"
+            ></mkj-text-input>
+        </div>
+        <div class="p-field col-12 lg:col-3 md:col-6">
+            <mkj-text-input
+                label="Telefon Mobil"
+                formControlName="telefonMobil"
+            ></mkj-text-input>
+        </div>
+        <ng-container *ngIf="!personalMode">
+            <p-divider class="col-12"></p-divider>
+            <div class="p-field col-12 lg:col-3 md:col-6">
+                <mkj-date-input
+                    type="date"
+                    formControlName="eintrittDatum"
+                    label="Datum Eintritt"
+                ></mkj-date-input>
+            </div>
+            <div class="p-field col-12 lg:col-3 md:col-6">
+                <mkj-date-input
+                    type="date"
+                    formControlName="austrittDatum"
+                    label="Datum Austritt"
+                ></mkj-date-input>
+            </div>
+            <div
+                class="p-field col-12 lg:col-3 md:col-6 flex align-items-center"
+            >
+                <mkj-boolean-input
+                    label="Aktives Mitglied"
+                    formControlName="aktiv"
+                ></mkj-boolean-input>
+            </div>
+        </ng-container></div
+></mkj-form-wrapper>
+
+<div *ngIf="canAssignRoles && formGroup.controls.user_id.value">
+    <mitglied-roles-picker
+        [userId]="formGroup.controls.user_id.value"
+        (touched)="rolesTouched = $event"
+    ></mitglied-roles-picker>
+</div>
diff --git a/src/app/components/ausrueckungen/kalenderabo/kalenderabo.component.scss b/src/app/components/mitglieder/mitglieder-edit/mitglieder-edit.component.scss
similarity index 100%
rename from src/app/components/ausrueckungen/kalenderabo/kalenderabo.component.scss
rename to src/app/components/mitglieder/mitglieder-edit/mitglieder-edit.component.scss
diff --git a/src/app/components/mitglieder/mitglieder-edit/mitglieder-edit.component.ts b/src/app/components/mitglieder/mitglieder-edit/mitglieder-edit.component.ts
new file mode 100644
index 0000000..516a66f
--- /dev/null
+++ b/src/app/components/mitglieder/mitglieder-edit/mitglieder-edit.component.ts
@@ -0,0 +1,101 @@
+import { Component, Input } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
+import { ActivatedRoute, Router } from "@angular/router";
+import { ConfirmationService } from "primeng/api";
+import { Mitglied, MitgliedGeschlechtMap } from "src/app/models/Mitglied";
+import { PermissionMap } from "src/app/models/User";
+import { UserService } from "src/app/services/authentication/user.service";
+import { InfoService } from "src/app/services/info.service";
+import { AbstractFormComponent } from "src/app/utilities/form-components/_abstract-form-component.class";
+import { MkjToolbarService } from "src/app/utilities/mkj-toolbar/mkj-toolbar.service";
+import { MitgliederApiService } from "../../../services/api/mitglieder-api.service";
+
+@Component({
+    selector: "app-mitglieder-edit",
+    templateUrl: "./mitglieder-edit.component.html",
+    styleUrls: ["./mitglieder-edit.component.scss"],
+})
+export class MitgliederEditComponent extends AbstractFormComponent<Mitglied> {
+    @Input()
+    public personalMode: boolean = false;
+
+    public canAssignRoles: boolean = false;
+    public rolesTouched: boolean = false;
+
+    public readonly MitgliedGeschlechtMap = MitgliedGeschlechtMap;
+
+    constructor(
+        apiService: MitgliederApiService,
+        private confirmationService: ConfirmationService,
+        private userService: UserService,
+        router: Router,
+        route: ActivatedRoute,
+        infoService: InfoService,
+        toolbarService: MkjToolbarService
+    ) {
+        super(toolbarService, apiService, infoService, route, router);
+
+        this.canAssignRoles = this.userService.hasPermission(
+            PermissionMap.ROLE_ASSIGN
+        );
+    }
+
+    protected initToolbar(): void {
+        if (this.personalMode) return;
+
+        this.toolbarService.backButton = true;
+        const id = this.getId();
+        if (id && id !== "new") {
+            this.toolbarService.header = "Mitglied bearbeiten";
+            this.toolbarService.buttons = [
+                {
+                    icon: "pi pi-trash",
+                    click: () => this.deleteMitglied(),
+                    permissions: [PermissionMap.MITGLIEDER_DELETE],
+                    label: "Löschen",
+                },
+            ];
+        } else {
+            this.toolbarService.header = "Neues Mitglied";
+        }
+    }
+    protected initFormGroup(): FormGroup<any> {
+        return new FormGroup({
+            user_id: new FormControl(""),
+            vorname: new FormControl("", Validators.required),
+            zuname: new FormControl("", Validators.required),
+            email: new FormControl("", Validators.email),
+            titelVor: new FormControl(""),
+            titelNach: new FormControl(""),
+            geburtsdatum: new FormControl(""),
+            geschlecht: new FormControl(""),
+            strasse: new FormControl(""),
+            hausnummer: new FormControl(""),
+            ort: new FormControl(""),
+            plz: new FormControl(""),
+            telefonHaupt: new FormControl(""),
+            telefonMobil: new FormControl(""),
+            beruf: new FormControl(""),
+            aktiv: new FormControl(false),
+            eintrittDatum: new FormControl(""),
+            austrittDatum: new FormControl(""),
+        });
+    }
+    protected getId(): string {
+        return this.route.snapshot.params.id;
+    }
+
+    private deleteMitglied() {
+        let name =
+            this.formGroup.controls.vorname.value +
+            " " +
+            this.formGroup.controls.zuname.value;
+        this.confirmationService.confirm({
+            header: "Mitglied " + name + " wirklich löschen?",
+            message:
+                'Inaktive Musiker sollten nicht gelöscht werden, stattdessen sollte das Datum des Austritts erfasst werden und das Mitglied auf "Inaktiv" gestellt werden...',
+            icon: "pi pi-exclamation-triangle",
+            accept: () => this.delete(),
+        });
+    }
+}
diff --git a/src/app/components/mitglieder/mitglieder-single/mitglieder-details.component.html b/src/app/components/mitglieder/mitglieder-single/mitglieder-details.component.html
deleted file mode 100644
index d6498d9..0000000
--- a/src/app/components/mitglieder/mitglieder-single/mitglieder-details.component.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<p-tabView>
-    <p-tabPanel header="Daten">
-        <div class="card">
-            <div class="grid col-12 flex justify-content-center">
-                <mkj-content-loader [loading]="loading">
-                    <mkj-mitglied-form
-                        [formGroup]="formGroup"
-                    ></mkj-mitglied-form>
-                    <div class="col-12 flex justify-content-end">
-                        <button
-                            pButton
-                            [icon]="
-                                mitgliedSaving
-                                    ? 'pi pi-spin pi-spinner'
-                                    : 'pi pi-save'
-                            "
-                            label="Daten speichern"
-                            [disabled]="
-                                formGroup.pristine ||
-                                formGroup.invalid ||
-                                mitgliedSaving
-                            "
-                            (click)="saveMitglied()"
-                        ></button>
-                    </div>
-                </mkj-content-loader>
-            </div>
-        </div>
-    </p-tabPanel>
-    <p-tabPanel
-        *ngIf="canAssignRoles && formGroup.controls.user_id.value"
-        header="Rollen"
-    >
-        <mitglied-roles-picker
-            [userId]="formGroup.controls.user_id.value"
-            (touched)="rolesTouched = $event"
-        ></mitglied-roles-picker
-    ></p-tabPanel>
-</p-tabView>
diff --git a/src/app/components/mitglieder/mitglieder-single/mitglieder-details.component.ts b/src/app/components/mitglieder/mitglieder-single/mitglieder-details.component.ts
deleted file mode 100644
index 2103696..0000000
--- a/src/app/components/mitglieder/mitglieder-single/mitglieder-details.component.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup } from "@angular/forms";
-import { ActivatedRoute, Router } from "@angular/router";
-import { ConfirmationService } from "primeng/api";
-import { EditComponentDeactivate } from "src/app/guards/edit-deactivate.guard";
-import { Mitglied } from "src/app/models/Mitglied";
-import { PermissionMap } from "src/app/models/User";
-import { UserService } from "src/app/services/authentication/user.service";
-import { InfoService } from "src/app/services/info.service";
-import { MitgliedFormHelper } from "src/app/utilities/form-components/mitglied-form/mitglied-form-helper";
-import { MkjToolbarService } from "src/app/utilities/mkj-toolbar/mkj-toolbar.service";
-import { MitgliederApiService } from "../../../services/api/mitglieder-api.service";
-
-@Component({
-    selector: "app-mitglieder-details",
-    templateUrl: "./mitglieder-details.component.html",
-    styleUrls: ["./mitglieder-details.component.scss"],
-})
-export class MitgliederDetailsComponent
-    implements EditComponentDeactivate, OnInit
-{
-    public loading: boolean = false;
-    public mitgliedSaving: boolean = false;
-
-    public canAssignRoles: boolean = false;
-    public rolesTouched: boolean = false;
-
-    public formGroup: FormGroup;
-
-    constructor(
-        private mitgliederService: MitgliederApiService,
-        private confirmationService: ConfirmationService,
-        private userService: UserService,
-        private router: Router,
-        private route: ActivatedRoute,
-        private infoService: InfoService,
-        private toolbarService: MkjToolbarService,
-        fb: FormBuilder
-    ) {
-        this.formGroup = MitgliedFormHelper.getMitgliedFormGroup(fb);
-        this.canAssignRoles = this.userService.hasPermission(
-            PermissionMap.ROLE_ASSIGN
-        );
-        this.toolbarService.backButton = true;
-        const id = this.route.snapshot.params.id;
-        if (id && id !== "neu") {
-            this.loadMitglied(id);
-            this.toolbarService.header = "Mitglied bearbeiten";
-            this.toolbarService.buttons = [
-                {
-                    icon: "pi pi-trash",
-                    click: () => this.deleteMitglied(),
-                    permissions: [PermissionMap.MITGLIEDER_DELETE],
-                    label: "Löschen",
-                },
-            ];
-        } else {
-            this.toolbarService.header = "Neues Mitglied";
-        }
-    }
-
-    public ngOnInit(): void {}
-
-    public canDeactivate(): boolean {
-        return this.formGroup.pristine && !this.rolesTouched;
-    }
-
-    public loadMitglied(id: string) {
-        const mitglied = this.mitgliederService.getSelectedMitglied();
-        if (mitglied && id === mitglied.id) {
-            this.formGroup.patchValue(mitglied);
-        } else {
-            this.loading = true;
-            this.route.params.subscribe((e) => {
-                this.mitgliederService.getSingleMitglied(e.id).subscribe({
-                    next: (m) => {
-                        this.formGroup.patchValue(m);
-                        this.formGroup.markAsPristine();
-                        this.loading = false;
-                    },
-                    error: (error) => {
-                        this.infoService.error(error);
-                        this.loading = false;
-                    },
-                });
-            });
-        }
-    }
-
-    public saveMitglied() {
-        this.mitgliedSaving = true;
-        const mitglied = this.formGroup.getRawValue() as Mitglied;
-        if (!mitglied.id) {
-            this.mitgliederService.createMitglied(mitglied).subscribe({
-                next: (res) => {
-                    this.infoService.success("Mitglied erstellt!");
-                    this.mitgliedSaving = false;
-                    this.formGroup.markAsPristine();
-                    this.router.navigate(["../", "liste"], {
-                        relativeTo: this.route,
-                    });
-                },
-                error: (error) => {
-                    this.mitgliedSaving = false;
-                    this.infoService.error(error);
-                },
-            });
-        } else {
-            this.mitgliederService.updateMitglied(mitglied).subscribe({
-                next: (res) => {
-                    this.infoService.success("Daten gespeichert!");
-                    this.formGroup.markAsPristine();
-                    this.mitgliedSaving = false;
-                },
-                error: (error) => {
-                    this.mitgliedSaving = false;
-                    this.infoService.error(error);
-                },
-            });
-        }
-    }
-
-    public deleteMitglied() {
-        let name =
-            this.formGroup.controls.vorname.value +
-            " " +
-            this.formGroup.controls.zuname.value;
-        this.confirmationService.confirm({
-            header: "Mitglied " + name + " wirklich löschen?",
-            message:
-                'Inaktive Musiker sollten nicht gelöscht werden, stattdessen sollte das Datum des Austritts erfasst werden und das Mitglied auf "Inaktiv" gestellt werden...',
-            icon: "pi pi-exclamation-triangle",
-            acceptLabel: "Löschen",
-            accept: () => {
-                this.mitgliederService
-                    .deleteMitglied(this.formGroup.controls.id.value)
-                    .subscribe({
-                        next: (res) => {
-                            this.infoService.info(
-                                "Mitglied " + name + " gelöscht!"
-                            );
-                            this.navigateBack();
-                        },
-                        error: (error) => this.infoService.error(error),
-                    });
-            },
-        });
-    }
-
-    public navigateBack() {
-        this.mitgliederService.setSelectedMitglied(null);
-        this.formGroup.disable();
-        this.router.navigate(["../liste"], { relativeTo: this.route });
-    }
-}
diff --git a/src/app/components/mitglieder/mitglieder-wrapper.component.ts b/src/app/components/mitglieder/mitglieder-wrapper.component.ts
deleted file mode 100644
index 11d0947..0000000
--- a/src/app/components/mitglieder/mitglieder-wrapper.component.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Component } from "@angular/core";
-
-@Component({
-    template: `<router-outlet></router-outlet>`,
-})
-export class MitgliederWrapperComponent {
-    constructor() {}
-}
diff --git a/src/app/components/archiv/archiv-wrapper.component.ts b/src/app/components/router-outlet-wrapper.component.ts
similarity index 70%
rename from src/app/components/archiv/archiv-wrapper.component.ts
rename to src/app/components/router-outlet-wrapper.component.ts
index 43f4e6a..fe7d4f8 100644
--- a/src/app/components/archiv/archiv-wrapper.component.ts
+++ b/src/app/components/router-outlet-wrapper.component.ts
@@ -3,4 +3,4 @@ import { Component } from "@angular/core";
 @Component({
     template: `<router-outlet></router-outlet>`,
 })
-export class ArchivWrapperComponent {}
+export class RouterOutletWrapperComponent {}
diff --git a/src/app/components/ausrueckungen/kalenderabo/kalenderabo.component.html b/src/app/components/termine/kalenderabo/kalenderabo.component.html
similarity index 100%
rename from src/app/components/ausrueckungen/kalenderabo/kalenderabo.component.html
rename to src/app/components/termine/kalenderabo/kalenderabo.component.html
diff --git a/src/app/components/mitglieder/mitglieder-single/mitglieder-details.component.scss b/src/app/components/termine/kalenderabo/kalenderabo.component.scss
similarity index 100%
rename from src/app/components/mitglieder/mitglieder-single/mitglieder-details.component.scss
rename to src/app/components/termine/kalenderabo/kalenderabo.component.scss
diff --git a/src/app/components/ausrueckungen/kalenderabo/kalenderabo.component.ts b/src/app/components/termine/kalenderabo/kalenderabo.component.ts
similarity index 100%
rename from src/app/components/ausrueckungen/kalenderabo/kalenderabo.component.ts
rename to src/app/components/termine/kalenderabo/kalenderabo.component.ts
diff --git a/src/app/components/ausrueckungen/ausrueckung-editor/ausrueckung-editor.component.html b/src/app/components/termine/termin-edit/termin-edit.component.html
similarity index 100%
rename from src/app/components/ausrueckungen/ausrueckung-editor/ausrueckung-editor.component.html
rename to src/app/components/termine/termin-edit/termin-edit.component.html
diff --git a/src/app/utilities/form-components/mitglied-form/mitglied-form.component.scss b/src/app/components/termine/termin-edit/termin-edit.component.scss
similarity index 100%
rename from src/app/utilities/form-components/mitglied-form/mitglied-form.component.scss
rename to src/app/components/termine/termin-edit/termin-edit.component.scss
diff --git a/src/app/components/ausrueckungen/ausrueckung-editor/ausrueckung-editor.component.ts b/src/app/components/termine/termin-edit/termin-edit.component.ts
similarity index 89%
rename from src/app/components/ausrueckungen/ausrueckung-editor/ausrueckung-editor.component.ts
rename to src/app/components/termine/termin-edit/termin-edit.component.ts
index 31164f9..f76bf9e 100644
--- a/src/app/components/ausrueckungen/ausrueckung-editor/ausrueckung-editor.component.ts
+++ b/src/app/components/termine/termin-edit/termin-edit.component.ts
@@ -11,11 +11,10 @@ import { InfoService } from "src/app/services/info.service";
 import { MkjToolbarService } from "src/app/utilities/mkj-toolbar/mkj-toolbar.service";
 
 @Component({
-    selector: "app-ausrueckung-editor",
-    templateUrl: "./ausrueckung-editor.component.html",
-    styleUrls: ["./ausrueckung-editor.component.scss"],
+    templateUrl: "./termin-edit.component.html",
+    styleUrls: ["./termin-edit.component.scss"],
 })
-export class AusrueckungEditorComponent implements EditComponentDeactivate {
+export class TerminEditComponent implements EditComponentDeactivate {
     public formGroup: FormGroup;
 
     public loading: boolean = false;
@@ -48,7 +47,7 @@ export class AusrueckungEditorComponent implements EditComponentDeactivate {
 
     private loadAusrueckung(id: string) {
         this.loading = true;
-        this.ausrueckungService.getSingleTermin(id).subscribe({
+        this.ausrueckungService.getById(id).subscribe({
             next: (res) => {
                 this.formGroup = UtilFunctions.getAusrueckungFormGroup(
                     this.fb,
@@ -93,7 +92,7 @@ export class AusrueckungEditorComponent implements EditComponentDeactivate {
         }
 
         if (saveAusrueckung.id) {
-            this.ausrueckungService.updateTermin(saveAusrueckung).subscribe({
+            this.ausrueckungService.update(saveAusrueckung).subscribe({
                 next: (res) => {
                     this.infoService.success("Ausrückung aktualisiert!");
                     this.formGroup.markAsPristine();
@@ -105,7 +104,7 @@ export class AusrueckungEditorComponent implements EditComponentDeactivate {
                 },
             });
         } else {
-            this.ausrueckungService.createTermin(saveAusrueckung).subscribe({
+            this.ausrueckungService.create(saveAusrueckung).subscribe({
                 next: (res) => {
                     this.infoService.success("Ausrückung erstellt!");
                     this.formGroup.markAsPristine();
diff --git a/src/app/components/termine/termine-overview/termine-overview.component.html b/src/app/components/termine/termine-overview/termine-overview.component.html
new file mode 100644
index 0000000..6227128
--- /dev/null
+++ b/src/app/components/termine/termine-overview/termine-overview.component.html
@@ -0,0 +1,79 @@
+<mkj-list
+    [datasource]="datasource"
+    [configuration]="listConfig"
+    [templateMap]="{
+        rowexpansion: rowExpansionTemplate,
+        nameTemplate: nameTemplate,
+        datumTemplate: datumTemplate,
+        kategorieTemplate: kategorieTemplate,
+        statusTemplate: statusTemplate,
+    }"
+    (onDoubleClick)="navigateSingleAusrueckung($event)"
+>
+</mkj-list>
+
+<ng-template #nameTemplate let-termin>
+    <span class="font-bold">{{ termin.name }}</span>
+    <span
+        *ngIf="termin.gruppe"
+        class="gruppentermin ml-2"
+        [style.--gruppe-color]="termin.gruppe?.color"
+    >
+        <i class="pi pi-users" [pTooltip]="termin.gruppe?.name"></i
+    ></span>
+</ng-template>
+
+<ng-template #datumTemplate let-termin>
+    {{ termin.vonDatum | mkjDate : "E d. MMMM YYYY" }}
+    {{ termin.treffzeit }}
+</ng-template>
+
+<ng-template #kategorieTemplate let-termin>
+    {{ termin.kategorie | uppercase }}
+</ng-template>
+
+<ng-template #statusTemplate let-termin>
+    <span
+        [class]="
+            'ausrueckungen-badge status-' +
+            (termin.status ? termin.status.toLowerCase() : '')
+        "
+    >
+        {{ termin.status }}
+    </span>
+</ng-template>
+
+<ng-template #rowExpansionTemplate let-termin>
+    <div
+        *ngIf="actualDate < termin.vonDatum"
+        class="flex justify-content-center mb-5"
+    >
+        <mkj-termin-teilnahme-selector
+            [termin]="termin"
+        ></mkj-termin-teilnahme-selector>
+    </div>
+    <termin-card [termin]="termin"></termin-card>
+    <div class="flex justify-content-around">
+        <button
+            pButton
+            pRipple
+            icon="pi pi-list"
+            label="Details"
+            class="p-button-raised p-button-rounded p-button-secondary"
+            (click)="navigateSingleAusrueckung(termin)"
+        ></button>
+
+        <button
+            *ngIf="hasAktionenPermissions"
+            pButton
+            pRipple
+            icon="pi pi-pencil"
+            label="Aktionen"
+            class="p-button-outlined p-button-rounded p-button-info"
+            (click)="rowMenu.toggle($event)"
+        ></button>
+    </div>
+</ng-template>
+
+<p-menu #rowMenu [popup]="true" [model]="rowMenuItems"></p-menu>
+<p-menu #exportMenu [popup]="true" [model]="exportMenuItems"></p-menu>
diff --git a/src/app/components/ausrueckungen/ausrueckungen-aktuell/ausrueckungen-aktuell.component.scss b/src/app/components/termine/termine-overview/termine-overview.component.scss
similarity index 100%
rename from src/app/components/ausrueckungen/ausrueckungen-aktuell/ausrueckungen-aktuell.component.scss
rename to src/app/components/termine/termine-overview/termine-overview.component.scss
diff --git a/src/app/components/ausrueckungen/ausrueckungen-aktuell/ausrueckungen-aktuell.component.ts b/src/app/components/termine/termine-overview/termine-overview.component.ts
similarity index 51%
rename from src/app/components/ausrueckungen/ausrueckungen-aktuell/ausrueckungen-aktuell.component.ts
rename to src/app/components/termine/termine-overview/termine-overview.component.ts
index de1a5b5..892bcc1 100644
--- a/src/app/components/ausrueckungen/ausrueckungen-aktuell/ausrueckungen-aktuell.component.ts
+++ b/src/app/components/termine/termine-overview/termine-overview.component.ts
@@ -1,16 +1,9 @@
-import {
-    AfterViewInit,
-    Component,
-    OnInit,
-    TemplateRef,
-    ViewChild,
-} from "@angular/core";
+import { Component, ViewChild } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import * as _ from "lodash";
 import * as moment from "moment";
-import { ConfirmationService, MenuItem } from "primeng/api";
+import { MenuItem } from "primeng/api";
 import { Menu } from "primeng/menu";
-import { Table } from "primeng/table";
 import { GetListInput } from "src/app/interfaces/api-middleware";
 import {
     Termin,
@@ -21,17 +14,20 @@ import {
 import { PermissionMap } from "src/app/models/User";
 import { MkjDatePipe } from "src/app/pipes/mkj-date.pipe";
 import { TermineApiService } from "src/app/services/api/termine-api.service";
-import { UserService } from "src/app/services/authentication/user.service";
 import { AppConfigService } from "src/app/services/app-config.service";
+import { UserService } from "src/app/services/authentication/user.service";
 import { ExportService } from "src/app/services/export.service";
 import { InfoService } from "src/app/services/info.service";
+import { TermineListConfig } from "src/app/utilities/_list-configurations/termine-list-config.class";
+import { TermineListDatasource } from "src/app/utilities/_list-datasources/termine-list-datasource.class";
 import { MkjToolbarService } from "src/app/utilities/mkj-toolbar/mkj-toolbar.service";
 
 @Component({
-    templateUrl: "./ausrueckungen-aktuell.component.html",
-    styleUrls: ["./ausrueckungen-aktuell.component.scss"],
+    templateUrl: "./termine-overview.component.html",
+    styleUrls: ["./termine-overview.component.scss"],
+    providers: [TermineListDatasource, TermineListConfig],
 })
-export class AusrueckungenAktuellComponent implements OnInit, AfterViewInit {
+export class TermineOverviewComponent {
     ausrueckungenArray: Termin[];
     ausrueckungFilterInput: GetListInput<Termin>;
     filteredRows: Termin[];
@@ -41,14 +37,6 @@ export class AusrueckungenAktuellComponent implements OnInit, AfterViewInit {
         .subtract(1, "week")
         .format("YYYY-MM-DD");
 
-    loading: boolean;
-
-    cols = TerminCsvColumnMap; //columns for csv export
-    kategorien = TerminKategorieMap;
-    status = TerminStatusMap;
-
-    @ViewChild("dt") ausrueckungenTable: Table;
-    @ViewChild("toolbarContentSection") toolbarContentSection: TemplateRef<any>;
     @ViewChild("exportMenu") exportMenu: Menu;
 
     selectedRow: any;
@@ -72,14 +60,6 @@ export class AusrueckungenAktuellComponent implements OnInit, AfterViewInit {
             ]),
             command: () => this.navigateEditor(this.selectedRow),
         },
-        {
-            label: "Löschen",
-            icon: "pi pi-trash",
-            visible: this.userService.hasPermission(
-                PermissionMap.TERMIN_DELETE
-            ),
-            command: () => this.deleteAusrueckung(this.selectedRow),
-        },
     ];
 
     public exportMenuItems: MenuItem[] = [
@@ -96,15 +76,16 @@ export class AusrueckungenAktuellComponent implements OnInit, AfterViewInit {
         {
             label: "CSV",
             icon: "pi pi-file",
-            command: () => this.exportCsv(),
+            // command: () => this.exportCsv(),
         },
     ];
 
     constructor(
+        public datasource: TermineListDatasource,
+        public listConfig: TermineListConfig,
         private termineApiService: TermineApiService,
         private userService: UserService,
         private infoService: InfoService,
-        private confirmationService: ConfirmationService,
         private router: Router,
         private route: ActivatedRoute,
         private exportService: ExportService,
@@ -119,18 +100,6 @@ export class AusrueckungenAktuellComponent implements OnInit, AfterViewInit {
         ]);
         this.toolbarService.header = this.namingService.appNaming.Termine;
         this.toolbarService.buttons = [
-            {
-                icon: "pi pi-filter",
-                click: () => {
-                    this.toolbarService.contentSectionExpanded =
-                        !this.toolbarService.contentSectionExpanded;
-                    this.toolbarService.buttons[0].highlighted =
-                        this.toolbarService.contentSectionExpanded;
-                },
-                highlighted:
-                    this.toolbarService.contentSectionExpanded === true,
-                label: "Filtern/Suchen",
-            },
             {
                 icon: "pi pi-plus",
                 click: () => this.navigateEditor(),
@@ -140,104 +109,35 @@ export class AusrueckungenAktuellComponent implements OnInit, AfterViewInit {
                     PermissionMap.TERMIN_GRUPPENLEITER_SAVE,
                 ],
             },
-            {
-                icon: "pi pi-download",
-                click: ($event) => this.exportMenu.show($event),
-                label: "Export",
-            },
+            // {
+            //     icon: "pi pi-download",
+            //     click: ($event) => this.exportMenu.show($event),
+            //     label: "Export",
+            // },
         ];
     }
 
-    public ngOnInit() {
-        this.ausrueckungFilterInput = {
-            filterAnd: [
-                {
-                    field: "vonDatum",
-                    value: this.filterFromDate,
-                    operator: ">=",
-                },
-                {
-                    field: "bisDatum",
-                    value: new Date().getFullYear() + "-12-31",
-                    operator: "<=",
-                },
-            ],
-        };
-        this.loadTermine();
-    }
-
-    public loadTermine(): void {
-        this.loading = true;
-        this.termineApiService
-            .getTermineFiltered(this.ausrueckungFilterInput)
-            .subscribe({
-                next: (res) => {
-                    this.ausrueckungenArray = res.values;
-                    this.filteredRows = res.values;
-                    this.loading = false;
-                },
-                error: (error) => {
-                    this.infoService.error(error);
-                    this.loading = false;
-                },
-            });
-    }
-
-    public ngAfterViewInit(): void {
-        this.toolbarService.contentSectionTemplate = this.toolbarContentSection;
-        if (this.ausrueckungenTable?.filters?.global) {
-            this.toolbarService.contentSectionExpanded = true;
-        }
-    }
-
-    public deleteAusrueckung(ausrueckung: Termin) {
-        this.loading = true;
-        this.infoService
-            .confirmDelete(
-                `Soll der Termin "${ausrueckung.name}" wirklich gelöscht werden?`,
-                () => this.termineApiService.deleteTermin(ausrueckung)
-            )
-            .subscribe({
-                next: () => {
-                    this.ausrueckungenArray = this.ausrueckungenArray.filter(
-                        (val) => val.id !== ausrueckung.id
-                    );
-                    this.loading = false;
-                    this.infoService.success("Ausrückung gelöscht!");
-                },
-                error: (error) => {
-                    if (error) {
-                        this.infoService.error(error);
-                    }
-                    this.loading = false;
-                },
-            });
-    }
-
     public duplicateAusrueckung(ausrueckung: Termin) {
-        this.loading = true;
         const duplicateAusrueckung = _.cloneDeep(ausrueckung);
         duplicateAusrueckung.id = null;
         duplicateAusrueckung.created_at = null;
         duplicateAusrueckung.updated_at = null;
         duplicateAusrueckung.name = duplicateAusrueckung.name + " - KOPIE";
 
-        this.termineApiService.createTermin(duplicateAusrueckung).subscribe({
+        this.termineApiService.create(duplicateAusrueckung).subscribe({
             next: (res) => {
                 this.ausrueckungenArray = [res, ...this.ausrueckungenArray];
                 this.navigateEditor(res);
-                this.infoService.success("Ausrückung dupliziert!");
-                this.loading = false;
+                this.infoService.success("Termin dupliziert!");
             },
             error: (err) => {
                 this.infoService.error(err);
-                this.loading = false;
             },
         });
     }
 
     public navigateSingleAusrueckung(ausrueckung: Termin) {
-        this.router.navigate(["../", ausrueckung.id], {
+        this.router.navigate(["../details", ausrueckung.id], {
             relativeTo: this.route,
         });
     }
@@ -248,28 +148,12 @@ export class AusrueckungenAktuellComponent implements OnInit, AfterViewInit {
                 relativeTo: this.route,
             });
         } else {
-            this.router.navigate(["../neu"], {
+            this.router.navigate(["../new"], {
                 relativeTo: this.route,
             });
         }
     }
 
-    setFilteredRows(e) {
-        this.filteredRows = e.filteredValue;
-    }
-
-    onRowSelect(event) {
-        this.ausrueckungenTable.toggleRow(event.data);
-    }
-
-    onRowUnselect(event) {
-        this.ausrueckungenTable.toggleRow(event.data);
-    }
-
-    exportCsv() {
-        this.ausrueckungenTable.exportCSV();
-    }
-
     public exportPdf() {
         const columns = [
             { title: "Name", dataKey: "name" },
@@ -298,17 +182,4 @@ export class AusrueckungenAktuellComponent implements OnInit, AfterViewInit {
     public exportExcel() {
         this.exportService.exportExcel(this.filteredRows, "Ausrückungen");
     }
-
-    public setFilterInputDates(filterIndex: number, value: string) {
-        if (!value) {
-            this.ausrueckungFilterInput.filterAnd[filterIndex] = null;
-        } else {
-            this.ausrueckungFilterInput.filterAnd[filterIndex] = {
-                value: value,
-                operator: filterIndex === 0 ? ">=" : "<=",
-                field: filterIndex === 0 ? "vonDatum" : "bisDatum",
-            };
-        }
-        this.loadTermine();
-    }
 }
diff --git a/src/app/models/Mitglied.ts b/src/app/models/Mitglied.ts
index 63955e7..c0744fc 100644
--- a/src/app/models/Mitglied.ts
+++ b/src/app/models/Mitglied.ts
@@ -24,7 +24,7 @@ export interface Mitglied {
 }
 
 export const MitgliedGeschlechtMap = [
-    { name: "Männlich", value: "M" },
-    { name: "Weiblich", value: "W" },
-    { name: "Divers", value: "D" },
+    { label: "Männlich", value: "M" },
+    { label: "Weiblich", value: "W" },
+    { label: "Divers", value: "D" },
 ];
diff --git a/src/app/providers/mkj-app-initializer.ts b/src/app/providers/mkj-app-initializer.ts
index 9548839..0e10d1a 100644
--- a/src/app/providers/mkj-app-initializer.ts
+++ b/src/app/providers/mkj-app-initializer.ts
@@ -14,7 +14,6 @@ export const mkjAppInitializer = () => {
             appNamingService: AppConfigService,
             serviceWorkerService: ServiceWorkerService
         ) => {
-            console.log("App Initializer called");
             return () =>
                 appNamingService
                     .initAppNamingConfig()
diff --git a/src/app/services/api/mitglieder-api.service.ts b/src/app/services/api/mitglieder-api.service.ts
index ffc900a..6a2f600 100644
--- a/src/app/services/api/mitglieder-api.service.ts
+++ b/src/app/services/api/mitglieder-api.service.ts
@@ -4,65 +4,38 @@ import { Observable } from "rxjs";
 import { StandardHttpOptions } from "src/app/interfaces/api-middleware";
 import { Mitglied } from "src/app/models/Mitglied";
 import { environment } from "src/environments/environment";
+import { AbstractCrudApiService } from "./_abstract-crud-api-service";
 
 @Injectable({
     providedIn: "root",
 })
-export class MitgliederApiService {
-    private selectedMitglied: Mitglied;
+export class MitgliederApiService extends AbstractCrudApiService<Mitglied> {
+    protected controllerApiUrlKey: string = "mitglieder";
     private apiURL = environment.apiUrl;
 
-    constructor(private http: HttpClient) {}
-
-    getAllMitglieder(): Observable<Mitglied[]> {
-        const url = this.apiURL + "mitglieder";
-        return this.http.get<Mitglied[]>(url, StandardHttpOptions);
-    }
-
-    getAktiveMitglieder(): Observable<Mitglied[]> {
-        const url = this.apiURL + "mitgliederaktiv";
-        return this.http.get<Mitglied[]>(url, StandardHttpOptions);
+    constructor(private httpClient: HttpClient) {
+        super(httpClient);
     }
 
     getMitgliederForAusrueckung(ausrueckungId: string): Observable<Mitglied[]> {
         const url =
             this.apiURL + "mitgliederausrueckung/" + ausrueckungId.toString();
-        return this.http.get<Mitglied[]>(url, StandardHttpOptions);
-    }
-
-    getSingleMitglied(id: string): Observable<Mitglied> {
-        const url = this.apiURL + "mitglieder/" + id;
-        return this.http.get<Mitglied>(url, StandardHttpOptions);
+        return this.httpClient.get<Mitglied[]>(url, StandardHttpOptions);
     }
 
     searchMitglieder(searchkey: string): Observable<Mitglied[]> {
         const url = this.apiURL + "mitglieder/search/" + searchkey;
-        return this.http.get<Mitglied[]>(url, StandardHttpOptions);
+        return this.httpClient.get<Mitglied[]>(url, StandardHttpOptions);
     }
 
     public getNextGeburtstag(): Observable<Mitglied[]> {
         const url = this.apiURL + "mitgliedernextgeb";
-        return this.http.get<Mitglied[]>(url, StandardHttpOptions);
+        return this.httpClient.get<Mitglied[]>(url, StandardHttpOptions);
     }
 
     updateOwnMitgliedData(mitglied: Mitglied): Observable<Mitglied> {
         const url = this.apiURL + "mitgliedselbst";
-        return this.http.post<any>(url, mitglied, StandardHttpOptions);
-    }
-
-    createMitglied(mitglied: Mitglied): Observable<Mitglied> {
-        const url = this.apiURL + "mitglieder";
-        return this.http.post<Mitglied>(url, mitglied, StandardHttpOptions);
-    }
-
-    updateMitglied(mitglied: Mitglied): Observable<Mitglied> {
-        const url = this.apiURL + "mitglieder/" + mitglied.id.toString();
-        return this.http.put<Mitglied>(url, mitglied, StandardHttpOptions);
-    }
-
-    deleteMitglied(id: string): Observable<any> {
-        const url = this.apiURL + "mitglieder/" + id;
-        return this.http.delete<any>(url, StandardHttpOptions);
+        return this.httpClient.post<any>(url, mitglied, StandardHttpOptions);
     }
 
     attachMitgliedToAusrueckung(
@@ -70,7 +43,7 @@ export class MitgliederApiService {
         mitgliedId: string
     ): Observable<any> {
         const url = this.apiURL + "addmitglied";
-        return this.http.post<any>(
+        return this.httpClient.post<any>(
             url,
             { mitglied_id: mitgliedId, ausrueckung_id: ausrueckungId },
             StandardHttpOptions
@@ -82,7 +55,7 @@ export class MitgliederApiService {
         mitgliedId: string
     ): Observable<any> {
         const url = this.apiURL + "removemitglied";
-        return this.http.post<any>(
+        return this.httpClient.post<any>(
             url,
             { mitglied_id: mitgliedId, ausrueckung_id: ausrueckungId },
             StandardHttpOptions
@@ -94,7 +67,7 @@ export class MitgliederApiService {
         mitgliedId: string
     ): Observable<any> {
         const url = this.apiURL + "addmitgliedgruppe";
-        return this.http.post<any>(
+        return this.httpClient.post<any>(
             url,
             { mitglied_id: mitgliedId, gruppe_id: gruppenId },
             StandardHttpOptions
@@ -106,23 +79,10 @@ export class MitgliederApiService {
         mitgliedId: string
     ): Observable<any> {
         const url = this.apiURL + "removemitgliedgruppe";
-        return this.http.post<any>(
+        return this.httpClient.post<any>(
             url,
             { mitglied_id: mitgliedId, gruppe_id: gruppenId },
             StandardHttpOptions
         );
     }
-
-    hasSelectedMitglied(): boolean {
-        if (this.selectedMitglied) return true;
-        else return false;
-    }
-
-    getSelectedMitglied(): Mitglied {
-        return this.selectedMitglied;
-    }
-
-    setSelectedMitglied(mitglied: Mitglied) {
-        this.selectedMitglied = mitglied;
-    }
 }
diff --git a/src/app/services/api/termine-api.service.ts b/src/app/services/api/termine-api.service.ts
index 3504cf3..352e402 100644
--- a/src/app/services/api/termine-api.service.ts
+++ b/src/app/services/api/termine-api.service.ts
@@ -1,67 +1,33 @@
-import { HttpClient, HttpHeaders } from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 import { Observable } from "rxjs";
-import { Termin } from "../../models/Termin";
+import { StandardHttpOptions } from "src/app/interfaces/api-middleware";
 import { environment } from "../../../environments/environment";
-import { GetListInput, GetListOutput } from "src/app/interfaces/api-middleware";
-
-const httpOptions = {
-    headers: new HttpHeaders({
-        "Content-Type": "application/json",
-    }),
-};
+import { Termin } from "../../models/Termin";
+import { AbstractCrudApiService } from "./_abstract-crud-api-service";
 
 @Injectable({
     providedIn: "root",
 })
-export class TermineApiService {
+export class TermineApiService extends AbstractCrudApiService<Termin> {
+    protected controllerApiUrlKey: string = "termine";
     private apiURL = environment.apiUrl;
 
-    constructor(private http: HttpClient) {}
-
-    public getTermine(): Observable<Termin[]> {
-        const url = this.apiURL + "ausrueckungen";
-        return this.http.get<Termin[]>(url, httpOptions);
-    }
-
-    public getSingleTermin(id: string): Observable<Termin> {
-        const url = this.apiURL + "ausrueckungen/" + id;
-        return this.http.get<Termin>(url, httpOptions);
+    constructor(private httpClient: HttpClient) {
+        super(httpClient);
     }
 
     public getNextTermin(skip?: number): Observable<Termin> {
         const url = this.apiURL + "nextausrueckung";
-        return this.http.post<Termin>(url, { skip: skip }, httpOptions);
-    }
-
-    public getTermineFiltered(
-        filterInput: GetListInput
-    ): Observable<GetListOutput<Termin>> {
-        const url = this.apiURL + "ausrueckungenfiltered";
-        return this.http.post<GetListOutput<Termin>>(
+        return this.httpClient.post<Termin>(
             url,
-            filterInput,
-            httpOptions
+            { skip: skip },
+            StandardHttpOptions
         );
     }
 
-    public createTermin(termin: Termin): Observable<Termin> {
-        const url = this.apiURL + "ausrueckungen";
-        return this.http.post<Termin>(url, termin, httpOptions);
-    }
-
-    public updateTermin(termin: Termin): Observable<Termin> {
-        const url = this.apiURL + "ausrueckungen/" + termin.id.toString();
-        return this.http.put<Termin>(url, termin, httpOptions);
-    }
-
     public saveTerminbyLeiter(termin: Termin): Observable<Termin> {
         const url = this.apiURL + "saveterminbyleiter";
-        return this.http.post<Termin>(url, termin, httpOptions);
-    }
-
-    public deleteTermin(termin: Termin): Observable<Termin> {
-        const url = this.apiURL + "ausrueckungen/" + termin.id.toString();
-        return this.http.delete<Termin>(url, httpOptions);
+        return this.httpClient.post<Termin>(url, termin, StandardHttpOptions);
     }
 }
diff --git a/src/app/utilities/_list-configurations/mitglieder-list-config.class.ts b/src/app/utilities/_list-configurations/mitglieder-list-config.class.ts
new file mode 100644
index 0000000..cbeb716
--- /dev/null
+++ b/src/app/utilities/_list-configurations/mitglieder-list-config.class.ts
@@ -0,0 +1,61 @@
+import { Injectable } from "@angular/core";
+import { Mitglied } from "src/app/models/Mitglied";
+import {
+    ListConfiguration,
+    MkjListColumn,
+    MkjListGlobalFilter,
+    MkjListSelectionMode,
+    MkjListSort,
+} from "./_list-configuration.class";
+
+@Injectable()
+export class MitgliederListConfig implements ListConfiguration<Mitglied> {
+    listName: string = "Mitglieder";
+    selectionMode: MkjListSelectionMode = "single";
+    showTotalCount = true;
+    lazyLoad: boolean = true;
+    sort: MkjListSort<Mitglied> = {
+        field: "zuname",
+        order: 1,
+    };
+    globalFilter: MkjListGlobalFilter<Mitglied> = {
+        fields: ["vorname", "zuname", "email"],
+    };
+    columns: MkjListColumn<Mitglied>[] = [
+        {
+            header: "Status",
+            field: "aktiv",
+            type: "template",
+            templateName: "aktivTemplate",
+            styleClass: "w-7rem",
+            filter: {
+                filterOptions: [
+                    {
+                        label: "Alle",
+                        value: null,
+                    },
+                    {
+                        label: "Aktiv",
+                        value: 1,
+                    },
+                    {
+                        label: "Inaktiv",
+                        value: 0,
+                    },
+                ],
+            },
+        },
+        {
+            header: "Vorname",
+            field: "vorname",
+            type: "string",
+            sortable: true,
+        },
+        {
+            header: "Nachname",
+            field: "zuname",
+            type: "string",
+            sortable: true,
+        },
+    ];
+}
diff --git a/src/app/utilities/_list-configurations/termine-list-config.class.ts b/src/app/utilities/_list-configurations/termine-list-config.class.ts
new file mode 100644
index 0000000..ebaa65a
--- /dev/null
+++ b/src/app/utilities/_list-configurations/termine-list-config.class.ts
@@ -0,0 +1,69 @@
+import { Injectable } from "@angular/core";
+import { Termin } from "src/app/models/Termin";
+import {
+    ListConfiguration,
+    MkjListColumn,
+    MkjListGlobalFilter,
+    MkjListSelectionMode,
+    MkjListSort,
+} from "./_list-configuration.class";
+
+@Injectable()
+export class TermineListConfig implements ListConfiguration<Termin> {
+    listName: string = "Termine";
+    selectionMode: MkjListSelectionMode = "single";
+    showTotalCount = true;
+    lazyLoad: boolean = true;
+    sort: MkjListSort<Termin> = {
+        field: "vonDatum",
+        order: 1,
+    };
+    globalFilter: MkjListGlobalFilter<Termin> = {
+        fields: ["name", "vonDatum", "kategorie"],
+    };
+    columns: MkjListColumn<Termin>[] = [
+        {
+            header: "Name",
+            field: "name",
+            type: "template",
+            templateName: "nameTemplate",
+        },
+        {
+            header: "Datum",
+            field: "vonDatum",
+            type: "template",
+            templateName: "datumTemplate",
+            sortable: true,
+        },
+        {
+            header: "Kategorie",
+            field: "kategorie",
+            type: "template",
+            templateName: "kategorieTemplate",
+            styleClass: "not-on-small",
+            // filter: {
+            //     filterOptions: [
+            //         {
+            //             label: "Alle",
+            //             value: null,
+            //         },
+            //         {
+            //             label: "Aktiv",
+            //             value: 1,
+            //         },
+            //         {
+            //             label: "Inaktiv",
+            //             value: 0,
+            //         },
+            //     ],
+            // },
+        },
+        {
+            header: "Status",
+            field: "status",
+            type: "template",
+            templateName: "statusTemplate",
+            styleClass: "not-on-small",
+        },
+    ];
+}
diff --git a/src/app/utilities/_list-datasources/_abstract-list-datasource.class.ts b/src/app/utilities/_list-datasources/_abstract-list-datasource.class.ts
index 16f76a7..c2b4593 100644
--- a/src/app/utilities/_list-datasources/_abstract-list-datasource.class.ts
+++ b/src/app/utilities/_list-datasources/_abstract-list-datasource.class.ts
@@ -1,8 +1,14 @@
 import { Observable } from "rxjs";
-import { GetListInput, GetListOutput } from "src/app/interfaces/api-middleware";
+import {
+    GetListInput,
+    GetListOutput,
+    MkjListInputFilter,
+} from "src/app/interfaces/api-middleware";
 import { TileValue } from "../mkj-tile-view/mkj-tile-view.component";
 
 export abstract class AbstractListDatasource<T> {
+    protected preFilter: MkjListInputFilter<T>;
+
     public abstract getList(
         input?: GetListInput<T>
     ): Observable<GetListOutput<T>>;
diff --git a/src/app/utilities/_list-datasources/mitglieder-list-datasource.class.ts b/src/app/utilities/_list-datasources/mitglieder-list-datasource.class.ts
new file mode 100644
index 0000000..7b358e2
--- /dev/null
+++ b/src/app/utilities/_list-datasources/mitglieder-list-datasource.class.ts
@@ -0,0 +1,24 @@
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { GetListInput, GetListOutput } from "src/app/interfaces/api-middleware";
+import { Mitglied } from "src/app/models/Mitglied";
+import { MitgliederApiService } from "src/app/services/api/mitglieder-api.service";
+import { TileValue } from "../mkj-tile-view/mkj-tile-view.component";
+import { AbstractListDatasource } from "./_abstract-list-datasource.class";
+
+@Injectable()
+export class MitgliederListDatasource extends AbstractListDatasource<Mitglied> {
+    constructor(private apiService: MitgliederApiService) {
+        super();
+    }
+
+    public getList(
+        input?: GetListInput<Mitglied>
+    ): Observable<GetListOutput<Mitglied>> {
+        return this.apiService.getList(input);
+    }
+
+    public mapToTileValue(item: Mitglied): TileValue<Mitglied> {
+        throw new Error("Method not implemented.");
+    }
+}
diff --git a/src/app/utilities/_list-datasources/termine-list-datasource.class.ts b/src/app/utilities/_list-datasources/termine-list-datasource.class.ts
new file mode 100644
index 0000000..f34ea55
--- /dev/null
+++ b/src/app/utilities/_list-datasources/termine-list-datasource.class.ts
@@ -0,0 +1,33 @@
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { GetListInput, GetListOutput } from "src/app/interfaces/api-middleware";
+import { Termin } from "src/app/models/Termin";
+import { TermineApiService } from "src/app/services/api/termine-api.service";
+import { TileValue } from "../mkj-tile-view/mkj-tile-view.component";
+import { AbstractListDatasource } from "./_abstract-list-datasource.class";
+
+@Injectable()
+export class TermineListDatasource extends AbstractListDatasource<Termin> {
+    constructor(private apiService: TermineApiService) {
+        super();
+        this.preFilter = {
+            field: "vonDatum",
+            operator: ">=",
+            value: "2023-01-11",
+        };
+    }
+
+    public getList(
+        input?: GetListInput<Termin>
+    ): Observable<GetListOutput<Termin>> {
+        if (input && this.preFilter) {
+            input.filterAnd = [this.preFilter, ...input?.filterAnd];
+        }
+
+        return this.apiService.getList(input);
+    }
+
+    public mapToTileValue(item: Termin): TileValue<Termin> {
+        throw new Error("Method not implemented.");
+    }
+}
diff --git a/src/app/utilities/form-components/_abstract-form-component.class.ts b/src/app/utilities/form-components/_abstract-form-component.class.ts
index 5a9076c..4ecaebc 100644
--- a/src/app/utilities/form-components/_abstract-form-component.class.ts
+++ b/src/app/utilities/form-components/_abstract-form-component.class.ts
@@ -9,7 +9,7 @@ import { SubSink } from "subsink";
 
 @Directive()
 export abstract class AbstractFormComponent<T> implements OnDestroy {
-    protected navigateBackOnSave = false;
+    protected navigateBackOnSave = true;
     protected navigateBackRouteString = "../";
 
     public formGroup: FormGroup;
diff --git a/src/app/utilities/form-components/mitglied-form/mitglied-form-helper.ts b/src/app/utilities/form-components/mitglied-form/mitglied-form-helper.ts
deleted file mode 100644
index a0c1362..0000000
--- a/src/app/utilities/form-components/mitglied-form/mitglied-form-helper.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { FormBuilder, Validators } from "@angular/forms";
-import { Mitglied } from "src/app/models/Mitglied";
-
-export abstract class MitgliedFormHelper {
-    public static getMitgliedFormGroup(fb: FormBuilder, mitglied?: Mitglied) {
-        return fb.group({
-            id: [mitglied?.id ?? null],
-            user_id: [mitglied?.user_id ?? null],
-            vorname: [mitglied?.vorname ?? null, Validators.required],
-            zuname: [mitglied?.zuname ?? null, Validators.required],
-            email: [mitglied?.email ?? null, Validators.email],
-            titelVor: [mitglied?.titelVor ?? null],
-            titelNach: [mitglied?.titelNach ?? null],
-            geburtsdatum: [mitglied?.geburtsdatum ?? null],
-            geschlecht: [mitglied?.geschlecht ?? null],
-            strasse: [mitglied?.strasse ?? null],
-            hausnummer: [mitglied?.hausnummer ?? null],
-            ort: [mitglied?.ort ?? null],
-            plz: [mitglied?.plz ?? null],
-            telefonHaupt: [mitglied?.telefonHaupt ?? null],
-            telefonMobil: [mitglied?.telefonMobil ?? null],
-            beruf: [mitglied?.beruf ?? null],
-            aktiv: [mitglied?.aktiv ?? false],
-            eintrittDatum: [mitglied?.eintrittDatum ?? null],
-            austrittDatum: [mitglied?.austrittDatum ?? null],
-            created_at: [mitglied?.created_at ?? null],
-            updated_at: [mitglied?.updated_at ?? null],
-        });
-    }
-}
diff --git a/src/app/utilities/form-components/mitglied-form/mitglied-form.component.html b/src/app/utilities/form-components/mitglied-form/mitglied-form.component.html
deleted file mode 100644
index 5659f52..0000000
--- a/src/app/utilities/form-components/mitglied-form/mitglied-form.component.html
+++ /dev/null
@@ -1,190 +0,0 @@
-<div [formGroup]="formGroup" class="p-fluid grid">
-    <div class="p-field col-12 lg:col-3 md:col-6">
-        <span class="p-float-label">
-            <input
-                type="text"
-                pInputText
-                inputId="name"
-                formControlName="vorname"
-            />
-
-            <label for="name">Vorname</label>
-        </span>
-    </div>
-    <div class="p-field col-12 lg:col-3 md:col-6">
-        <span class="p-float-label">
-            <input
-                type="text"
-                pInputText
-                inputId="name"
-                formControlName="zuname"
-            />
-
-            <label for="name">Familienname</label>
-        </span>
-    </div>
-    <div class="p-field col-12 lg:col-3 md:col-6">
-        <span class="p-float-label">
-            <input
-                type="text"
-                pInputText
-                inputId="name"
-                formControlName="titelVor"
-            />
-
-            <label for="name">Titel Vor</label>
-        </span>
-    </div>
-    <div class="p-field col-12 lg:col-3 md:col-6">
-        <span class="p-float-label">
-            <input
-                type="text"
-                pInputText
-                inputId="name"
-                formControlName="titelNach"
-            />
-
-            <label for="name">Titel Nach</label>
-        </span>
-    </div>
-    <div class="p-field col-12 lg:col-3 md:col-6">
-        <mkj-date-input
-            type="date"
-            formControlName="geburtsdatum"
-            label="Geburtsdatum"
-        ></mkj-date-input>
-    </div>
-    <div class="p-field col-12 lg:col-3 md:col-6">
-        <span class="p-float-label">
-            <p-dropdown
-                [options]="MitgliedGeschlechtMap"
-                inputId="geschlecht"
-                formControlName="geschlecht"
-                optionLabel="name"
-                optionValue="value"
-            ></p-dropdown>
-            <label for="geschlecht">Geschlecht</label>
-        </span>
-    </div>
-    <div class="p-field col-12 lg:col-3 md:col-6">
-        <span class="p-float-label">
-            <input
-                type="email"
-                pInputText
-                inputId="name"
-                formControlName="email"
-            />
-
-            <label for="name">E-Mail</label>
-        </span>
-    </div>
-    <div class="p-field col-12 lg:col-3 md:col-6">
-        <span class="p-float-label">
-            <input
-                type="text"
-                pInputText
-                inputId="name"
-                formControlName="beruf"
-            />
-
-            <label for="name">Beruf</label>
-        </span>
-    </div>
-
-    <div class="p-field col-12 lg:col-3 md:col-6">
-        <span class="p-float-label">
-            <input
-                type="text"
-                pInputText
-                inputId="strasse"
-                formControlName="strasse"
-            />
-
-            <label for="strasse">Straße</label>
-        </span>
-    </div>
-    <div class="p-field col-12 lg:col-3 md:col-6">
-        <span class="p-float-label">
-            <input
-                type="text"
-                pInputText
-                inputId="name"
-                formControlName="hausnummer"
-            />
-
-            <label for="name">Hausnummer</label>
-        </span>
-    </div>
-    <div class="p-field col-12 lg:col-3 md:col-6">
-        <span class="p-float-label">
-            <input
-                type="text"
-                pInputText
-                inputId="name"
-                formControlName="ort"
-            />
-
-            <label for="name">Ort</label>
-        </span>
-    </div>
-    <div class="p-field col-12 lg:col-3 md:col-6">
-        <span class="p-float-label">
-            <input
-                type="text"
-                pInputText
-                inputId="name"
-                formControlName="plz"
-            />
-
-            <label for="name">Postleitzahl</label>
-        </span>
-    </div>
-
-    <div class="p-field col-12 lg:col-3 md:col-6">
-        <span class="p-float-label">
-            <input
-                type="text"
-                pInputText
-                inputId="name"
-                formControlName="telefonHaupt"
-            />
-
-            <label for="name">Telefon Festnetz</label>
-        </span>
-    </div>
-    <div class="p-field col-12 lg:col-3 md:col-6">
-        <span class="p-float-label">
-            <input
-                type="text"
-                pInputText
-                inputId="name"
-                formControlName="telefonMobil"
-            />
-
-            <label for="name">Telefon Mobil</label>
-        </span>
-    </div>
-    <ng-container *ngIf="!personalMode">
-        <p-divider class="col-12"></p-divider>
-        <div class="p-field col-12 lg:col-3 md:col-6">
-            <mkj-date-input
-                type="date"
-                formControlName="eintrittDatum"
-                label="Datum Eintritt"
-            ></mkj-date-input>
-        </div>
-        <div class="p-field col-12 lg:col-3 md:col-6">
-            <mkj-date-input
-                type="date"
-                formControlName="austrittDatum"
-                label="Datum Austritt"
-            ></mkj-date-input>
-        </div>
-        <div class="p-field col-12 lg:col-3 md:col-6 flex align-items-center">
-            <mkj-boolean-input
-                label="Aktives Mitglied"
-                formControlName="aktiv"
-            ></mkj-boolean-input>
-        </div>
-    </ng-container>
-</div>
diff --git a/src/app/utilities/form-components/mitglied-form/mitglied-form.component.ts b/src/app/utilities/form-components/mitglied-form/mitglied-form.component.ts
deleted file mode 100644
index d32f8cf..0000000
--- a/src/app/utilities/form-components/mitglied-form/mitglied-form.component.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Component, Input, OnInit } from "@angular/core";
-import { FormGroup } from "@angular/forms";
-import { MitgliedGeschlechtMap } from "src/app/models/Mitglied";
-
-@Component({
-    selector: "mkj-mitglied-form",
-    templateUrl: "./mitglied-form.component.html",
-    styleUrls: ["./mitglied-form.component.scss"],
-    providers: [],
-})
-export class MitgliedFormComponent implements OnInit {
-    @Input()
-    public personalMode: boolean = false;
-
-    @Input()
-    public formGroup: FormGroup;
-
-    public readonly MitgliedGeschlechtMap = MitgliedGeschlechtMap;
-
-    constructor() {}
-
-    public ngOnInit(): void {
-        if (this.personalMode) {
-            this.formGroup?.get("email").disable();
-        }
-    }
-}
diff --git a/src/app/utilities/form-input-components/mkj-date-input/mkj-date-input.component.html b/src/app/utilities/form-input-components/mkj-date-input/mkj-date-input.component.html
index c421e0e..fbb9557 100644
--- a/src/app/utilities/form-input-components/mkj-date-input/mkj-date-input.component.html
+++ b/src/app/utilities/form-input-components/mkj-date-input/mkj-date-input.component.html
@@ -14,8 +14,8 @@
         [appendTo]="'body'"
         [disabled]="isDisabled"
         (onBlur)="_registerOnTouched?.()"
-        [class.ng-dirty]="ngControl?.control.invalid"
-        [class.ng-invalid]="ngControl?.control.invalid"
+        [class.ng-dirty]="formControl?.invalid"
+        [class.ng-invalid]="formControl?.invalid"
     ></p-calendar>
     <label [for]="label">{{ label }}</label>
 </span>
diff --git a/src/app/utilities/form-input-components/mkj-date-input/mkj-date-input.component.ts b/src/app/utilities/form-input-components/mkj-date-input/mkj-date-input.component.ts
index 63dc63c..4e31050 100644
--- a/src/app/utilities/form-input-components/mkj-date-input/mkj-date-input.component.ts
+++ b/src/app/utilities/form-input-components/mkj-date-input/mkj-date-input.component.ts
@@ -8,7 +8,7 @@ import {
 } from "@angular/core";
 import { controlValueAccessor } from "src/app/providers/control-value-accessor";
 import * as moment from "moment";
-import { ControlValueAccessor, NgControl } from "@angular/forms";
+import { ControlValueAccessor, FormControl, NgControl } from "@angular/forms";
 
 export enum MkjDateType {
     DATE = "date",
@@ -59,12 +59,13 @@ export class MkjDateInputComponent
         }
     }
 
-    ngControl: NgControl;
+    formControl: FormControl;
 
     constructor(private inj: Injector) {}
 
     ngAfterViewInit() {
-        this.ngControl = this.inj.get(NgControl);
+        this.formControl = this.inj.get(NgControl, null)
+            ?.control as FormControl;
     }
 
     writeValue(obj: any): void {
diff --git a/src/app/utilities/mkj-list/mkj-list.component.html b/src/app/utilities/mkj-list/mkj-list.component.html
index 0b37fd5..76dd01b 100644
--- a/src/app/utilities/mkj-list/mkj-list.component.html
+++ b/src/app/utilities/mkj-list/mkj-list.component.html
@@ -17,12 +17,14 @@
     [rowHover]="configuration.selectionMode != null"
     [(selection)]="selectedRow"
     (onRowSelect)="table.toggleRow($event.data)"
+    (onRowUnselect)="table.toggleRow($event.data)"
     [sortField]="configuration.sort?.field"
     [sortOrder]="configuration.sort?.order"
     [globalFilterFields]="configuration.globalFilter?.fields"
     (onRowReorder)="onRowReordered($event)"
     styleClass="p-datatable-striped"
     responsiveLayout="scroll"
+    (onStateRestore)="onStateRestore($event)"
 >
     <ng-template pTemplate="caption">
         <div
diff --git a/src/app/utilities/mkj-list/mkj-list.component.ts b/src/app/utilities/mkj-list/mkj-list.component.ts
index 717a873..9ce5938 100644
--- a/src/app/utilities/mkj-list/mkj-list.component.ts
+++ b/src/app/utilities/mkj-list/mkj-list.component.ts
@@ -9,7 +9,7 @@ import {
     ViewChild,
     signal,
 } from "@angular/core";
-import { FilterMetadata, LazyLoadEvent } from "primeng/api";
+import { FilterMetadata, LazyLoadEvent, TableState } from "primeng/api";
 import { Table, TableRowReorderEvent } from "primeng/table";
 import {
     GetListInput,
@@ -63,6 +63,10 @@ export class MkjListComponent<T> implements OnChanges {
         }
     }
 
+    public onStateRestore(event: TableState): void {
+        event.selection = null;
+    }
+
     public onRowReordered(event: TableRowReorderEvent): void {
         const fromIndex = event.dragIndex;
         const toIndex = event.dropIndex;
@@ -149,11 +153,11 @@ export class MkjListComponent<T> implements OnChanges {
             if (Array.isArray(value)) {
                 (value as Array<any>).forEach((v) => {
                     const filter = getFilter(v);
-                    if (filter.value) {
+                    if (filter.value != null) {
                         result.push(filter);
                     }
                 });
-            } else if (value.value) {
+            } else if (value.value != null) {
                 result.push(getFilter(value));
             }
         });