From 45fe7b34c3929d7a7b24a941cdf8253b0feef89e Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Wed, 26 Mar 2025 12:20:06 +0100
Subject: [PATCH] collection details

---
 .../unit/equipment/CreateEquipmentModal.vue   |   2 +-
 .../unit/equipment/EquipmentListItem.vue      |   2 +-
 .../CreateEquipmentTypeModal.vue              |   2 +-
 .../equipmentType/EquipmentTypeListItem.vue   |   2 +-
 .../CreateRespiratoryGearModal.vue            |   2 +-
 .../CreateRespiratoryMissionModal.vue         |   2 +-
 .../CreateRespiratoryWearerModal.vue          |   2 +-
 src/router/index.ts                           | 187 +++++++++++++++++-
 src/stores/admin/unit/equipment/equipment.ts  |   2 +-
 .../unit/{ => equipmentType}/equipmentType.ts |  62 +++---
 .../equipment.models.ts                       |   0
 src/views/admin/unit/equipment/Equipment.vue  |   4 +-
 .../admin/unit/equipment/EquipmentRouting.vue |  88 +++++++++
 .../unit/equipmentType/EquipmentType.vue      |   2 +-
 .../equipmentType/EquipmentTypeRouting.vue    |  92 +++++++++
 .../RespiratoryGearRouting.vue                |  92 +++++++++
 .../RespiratoryMissionRouting.vue             |  95 +++++++++
 .../RespiratoryWearerRouting.vue              |  95 +++++++++
 .../admin/unit/vehicle/VehicleRouting.vue     |  88 +++++++++
 19 files changed, 782 insertions(+), 39 deletions(-)
 rename src/stores/admin/unit/{ => equipmentType}/equipmentType.ts (55%)
 rename src/viewmodels/admin/unit/{equipment => equipmentType}/equipment.models.ts (100%)
 create mode 100644 src/views/admin/unit/equipment/EquipmentRouting.vue
 create mode 100644 src/views/admin/unit/equipmentType/EquipmentTypeRouting.vue
 create mode 100644 src/views/admin/unit/respiratoryGear/RespiratoryGearRouting.vue
 create mode 100644 src/views/admin/unit/respiratoryMission/RespiratoryMissionRouting.vue
 create mode 100644 src/views/admin/unit/respiratoryWearer/RespiratoryWearerRouting.vue
 create mode 100644 src/views/admin/unit/vehicle/VehicleRouting.vue

diff --git a/src/components/admin/unit/equipment/CreateEquipmentModal.vue b/src/components/admin/unit/equipment/CreateEquipmentModal.vue
index 4f934d7..9b4227f 100644
--- a/src/components/admin/unit/equipment/CreateEquipmentModal.vue
+++ b/src/components/admin/unit/equipment/CreateEquipmentModal.vue
@@ -100,7 +100,7 @@ import FailureXMark from "@/components/FailureXMark.vue";
 import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
-import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipmentType/equipment.models";
 import { useSalutationStore } from "../../../../stores/admin/configuration/salutation";
 import type { SalutationViewModel } from "../../../../viewmodels/admin/configuration/salutation.models";
 </script>
diff --git a/src/components/admin/unit/equipment/EquipmentListItem.vue b/src/components/admin/unit/equipment/EquipmentListItem.vue
index 8eed147..3d45cf8 100644
--- a/src/components/admin/unit/equipment/EquipmentListItem.vue
+++ b/src/components/admin/unit/equipment/EquipmentListItem.vue
@@ -18,7 +18,7 @@
 import { defineComponent, type PropType } from "vue";
 import { mapState, mapActions } from "pinia";
 import { useAbilityStore } from "@/stores/ability";
-import type { EquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import type { EquipmentViewModel } from "@/viewmodels/admin/unit/equipmentType/equipment.models";
 </script>
 
 <script lang="ts">
diff --git a/src/components/admin/unit/equipmentType/CreateEquipmentTypeModal.vue b/src/components/admin/unit/equipmentType/CreateEquipmentTypeModal.vue
index 4f934d7..9b4227f 100644
--- a/src/components/admin/unit/equipmentType/CreateEquipmentTypeModal.vue
+++ b/src/components/admin/unit/equipmentType/CreateEquipmentTypeModal.vue
@@ -100,7 +100,7 @@ import FailureXMark from "@/components/FailureXMark.vue";
 import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
-import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipmentType/equipment.models";
 import { useSalutationStore } from "../../../../stores/admin/configuration/salutation";
 import type { SalutationViewModel } from "../../../../viewmodels/admin/configuration/salutation.models";
 </script>
diff --git a/src/components/admin/unit/equipmentType/EquipmentTypeListItem.vue b/src/components/admin/unit/equipmentType/EquipmentTypeListItem.vue
index 8eed147..3d45cf8 100644
--- a/src/components/admin/unit/equipmentType/EquipmentTypeListItem.vue
+++ b/src/components/admin/unit/equipmentType/EquipmentTypeListItem.vue
@@ -18,7 +18,7 @@
 import { defineComponent, type PropType } from "vue";
 import { mapState, mapActions } from "pinia";
 import { useAbilityStore } from "@/stores/ability";
-import type { EquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import type { EquipmentViewModel } from "@/viewmodels/admin/unit/equipmentType/equipment.models";
 </script>
 
 <script lang="ts">
diff --git a/src/components/admin/unit/respiratoryGear/CreateRespiratoryGearModal.vue b/src/components/admin/unit/respiratoryGear/CreateRespiratoryGearModal.vue
index 4f934d7..9b4227f 100644
--- a/src/components/admin/unit/respiratoryGear/CreateRespiratoryGearModal.vue
+++ b/src/components/admin/unit/respiratoryGear/CreateRespiratoryGearModal.vue
@@ -100,7 +100,7 @@ import FailureXMark from "@/components/FailureXMark.vue";
 import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
-import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipmentType/equipment.models";
 import { useSalutationStore } from "../../../../stores/admin/configuration/salutation";
 import type { SalutationViewModel } from "../../../../viewmodels/admin/configuration/salutation.models";
 </script>
diff --git a/src/components/admin/unit/respiratoryMission/CreateRespiratoryMissionModal.vue b/src/components/admin/unit/respiratoryMission/CreateRespiratoryMissionModal.vue
index 4f934d7..9b4227f 100644
--- a/src/components/admin/unit/respiratoryMission/CreateRespiratoryMissionModal.vue
+++ b/src/components/admin/unit/respiratoryMission/CreateRespiratoryMissionModal.vue
@@ -100,7 +100,7 @@ import FailureXMark from "@/components/FailureXMark.vue";
 import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
-import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipmentType/equipment.models";
 import { useSalutationStore } from "../../../../stores/admin/configuration/salutation";
 import type { SalutationViewModel } from "../../../../viewmodels/admin/configuration/salutation.models";
 </script>
diff --git a/src/components/admin/unit/respiratoryWearer/CreateRespiratoryWearerModal.vue b/src/components/admin/unit/respiratoryWearer/CreateRespiratoryWearerModal.vue
index 4f934d7..9b4227f 100644
--- a/src/components/admin/unit/respiratoryWearer/CreateRespiratoryWearerModal.vue
+++ b/src/components/admin/unit/respiratoryWearer/CreateRespiratoryWearerModal.vue
@@ -100,7 +100,7 @@ import FailureXMark from "@/components/FailureXMark.vue";
 import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
-import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipmentType/equipment.models";
 import { useSalutationStore } from "../../../../stores/admin/configuration/salutation";
 import type { SalutationViewModel } from "../../../../viewmodels/admin/configuration/salutation.models";
 </script>
diff --git a/src/router/index.ts b/src/router/index.ts
index e72d6a3..304f241 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -330,6 +330,35 @@ const router = createRouter({
                   name: "admin-unit-equipment",
                   component: () => import("@/views/admin/unit/equipment/Equipment.vue"),
                 },
+                {
+                  path: ":equipmentId",
+                  name: "admin-unit-equipment-routing",
+                  component: () => import("@/views/admin/unit/equipment/EquipmentRouting.vue"),
+                  beforeEnter: [] /** set equipment ID */,
+                  props: true,
+                  children: [
+                    {
+                      path: "overview",
+                      name: "admin-unit-equipment-overview",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "xy",
+                      name: "admin-unit-equipment-xy",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "edit",
+                      name: "admin-unit-equipment-edit",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      meta: { type: "update", section: "unit", module: "equipment" },
+                      beforeEnter: [abilityAndNavUpdate],
+                      props: true,
+                    },
+                  ],
+                },
               ],
             },
             {
@@ -344,6 +373,35 @@ const router = createRouter({
                   name: "admin-unit-vehicle",
                   component: () => import("@/views/admin/unit/vehicle/Vehicle.vue"),
                 },
+                {
+                  path: ":vehicleId",
+                  name: "admin-unit-vehicle-routing",
+                  component: () => import("@/views/admin/unit/vehicle/VehicleRouting.vue"),
+                  beforeEnter: [] /** set vehicle ID */,
+                  props: true,
+                  children: [
+                    {
+                      path: "overview",
+                      name: "admin-unit-vehicle-overview",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "xy",
+                      name: "admin-unit-vehicle-xy",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "edit",
+                      name: "admin-unit-vehicle-edit",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      meta: { type: "update", section: "unit", module: "vehicle" },
+                      beforeEnter: [abilityAndNavUpdate],
+                      props: true,
+                    },
+                  ],
+                },
               ],
             },
             {
@@ -358,6 +416,35 @@ const router = createRouter({
                   name: "admin-unit-respiratory_gear",
                   component: () => import("@/views/admin/unit/respiratoryGear/RespiratoryGear.vue"),
                 },
+                {
+                  path: ":respiratoryGearId",
+                  name: "admin-unit-respiratory_gear-routing",
+                  component: () => import("@/views/admin/unit/respiratoryGear/RespiratoryGearRouting.vue"),
+                  beforeEnter: [] /** set respiratory_gear ID */,
+                  props: true,
+                  children: [
+                    {
+                      path: "overview",
+                      name: "admin-unit-respiratory_gear-overview",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "xy",
+                      name: "admin-unit-respiratory_gear-xy",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "edit",
+                      name: "admin-unit-respiratory_gear-edit",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      meta: { type: "update", section: "unit", module: "respiratory_gear" },
+                      beforeEnter: [abilityAndNavUpdate],
+                      props: true,
+                    },
+                  ],
+                },
               ],
             },
             {
@@ -372,13 +459,42 @@ const router = createRouter({
                   name: "admin-unit-respiratory_wearer",
                   component: () => import("@/views/admin/unit/respiratoryWearer/RespiratoryWearer.vue"),
                 },
+                {
+                  path: ":respiratoryWearerId",
+                  name: "admin-unit-respiratory_wearer-routing",
+                  component: () => import("@/views/admin/unit/respiratoryWearer/RespiratoryWearerRouting.vue"),
+                  beforeEnter: [] /** set respiratory_wearer ID */,
+                  props: true,
+                  children: [
+                    {
+                      path: "overview",
+                      name: "admin-unit-respiratory_wearer-overview",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "xy",
+                      name: "admin-unit-respiratory_wearer-xy",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "edit",
+                      name: "admin-unit-respiratory_wearer-edit",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      meta: { type: "update", section: "unit", module: "respiratory_wearer" },
+                      beforeEnter: [abilityAndNavUpdate],
+                      props: true,
+                    },
+                  ],
+                },
               ],
             },
             {
               path: "respiratory-mission",
               name: "admin-unit-respiratory_mission-route",
               component: () => import("@/views/RouterView.vue"),
-              meta: { type: "read", section: "unit", module: "respiratory_gear" },
+              meta: { type: "read", section: "unit", module: "respiratory_mission" },
               beforeEnter: [abilityAndNavUpdate],
               children: [
                 {
@@ -386,6 +502,35 @@ const router = createRouter({
                   name: "admin-unit-respiratory_mission",
                   component: () => import("@/views/admin/unit/respiratoryMission/RespiratoryMission.vue"),
                 },
+                {
+                  path: ":respiratoryMissionId",
+                  name: "admin-unit-respiratory_mission-routing",
+                  component: () => import("@/views/admin/unit/respiratoryMission/RespiratoryMissionRouting.vue"),
+                  beforeEnter: [] /** set respiratory_mission ID */,
+                  props: true,
+                  children: [
+                    {
+                      path: "overview",
+                      name: "admin-unit-respiratory_mission-overview",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "xy",
+                      name: "admin-unit-respiratory_mission-xy",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "edit",
+                      name: "admin-unit-respiratory_mission-edit",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      meta: { type: "update", section: "unit", module: "respiratory_mission" },
+                      beforeEnter: [abilityAndNavUpdate],
+                      props: true,
+                    },
+                  ],
+                },
               ],
             },
             {
@@ -404,10 +549,46 @@ const router = createRouter({
             },
             {
               path: "equipment-type",
-              name: "admin-unit-equipment_type",
-              component: () => import("@/views/admin/unit/equipmentType/EquipmentType.vue"),
+              name: "admin-unit-equipment_type-route",
+              component: () => import("@/views/RouterView.vue"),
               meta: { type: "read", section: "unit", module: "equipment_type" },
               beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-equipment_type",
+                  component: () => import("@/views/admin/unit/equipmentType/EquipmentType.vue"),
+                },
+                {
+                  path: ":equipmentTypeId",
+                  name: "admin-unit-equipment_type-routing",
+                  component: () => import("@/views/admin/unit/equipmentType/EquipmentTypeRouting.vue"),
+                  beforeEnter: [] /** set equipment_type ID */,
+                  props: true,
+                  children: [
+                    {
+                      path: "overview",
+                      name: "admin-unit-equipment_type-overview",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "xy",
+                      name: "admin-unit-equipment_type-xy",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "edit",
+                      name: "admin-unit-equipment_type-edit",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      meta: { type: "update", section: "unit", module: "equipment_type" },
+                      beforeEnter: [abilityAndNavUpdate],
+                      props: true,
+                    },
+                  ],
+                },
+              ],
             },
           ],
         },
diff --git a/src/stores/admin/unit/equipment/equipment.ts b/src/stores/admin/unit/equipment/equipment.ts
index b0611ae..42b368b 100644
--- a/src/stores/admin/unit/equipment/equipment.ts
+++ b/src/stores/admin/unit/equipment/equipment.ts
@@ -4,7 +4,7 @@ import type {
   CreateEquipmentViewModel,
   EquipmentStatisticsViewModel,
   UpdateEquipmentViewModel,
-} from "@/viewmodels/admin/unit/equipment/equipment.models";
+} from "@/viewmodels/admin/unit/equipmentType/equipment.models";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
 
diff --git a/src/stores/admin/unit/equipmentType.ts b/src/stores/admin/unit/equipmentType/equipmentType.ts
similarity index 55%
rename from src/stores/admin/unit/equipmentType.ts
rename to src/stores/admin/unit/equipmentType/equipmentType.ts
index 974588c..40b377e 100644
--- a/src/stores/admin/unit/equipmentType.ts
+++ b/src/stores/admin/unit/equipmentType/equipmentType.ts
@@ -13,6 +13,9 @@ export const useEquipmentTypeStore = defineStore("equipmentType", {
       equipmentTypes: [] as Array<EquipmentTypeViewModel & { tab_pos: number }>,
       totalCount: 0 as number,
       loading: "loading" as "loading" | "fetched" | "failed",
+      activeEquipmentType: null as string | null,
+      activeEquipmentTypeObj: null as EquipmentTypeViewModel | null,
+      loadingActive: "loading" as "loading" | "fetched" | "failed",
     };
   },
   actions: {
@@ -41,13 +44,13 @@ export const useEquipmentTypeStore = defineStore("equipmentType", {
         });
     },
     async getAllEquipmentTypes(): Promise<AxiosResponse<any, any>> {
-      return await http.get(`/admin/equipment?noLimit=true`).then((res) => {
+      return await http.get(`/admin/equipmentType?noLimit=true`).then((res) => {
         return { ...res, data: res.data.equipments };
       });
     },
     async getEquipmentTypesByIds(ids: Array<string>): Promise<AxiosResponse<any, any>> {
       return await http
-        .post(`/admin/equipment/ids`, {
+        .post(`/admin/equipmentType/ids`, {
           ids,
         })
         .then((res) => {
@@ -55,42 +58,51 @@ export const useEquipmentTypeStore = defineStore("equipmentType", {
         });
     },
     async searchEquipmentTypes(search: string): Promise<AxiosResponse<any, any>> {
-      return await http.get(`/admin/equipment?search=${search}&noLimit=true`).then((res) => {
+      return await http.get(`/admin/equipmentType?search=${search}&noLimit=true`).then((res) => {
         return { ...res, data: res.data.equipments };
       });
     },
+    fetchEquipmentTypeByActiveId() {
+      this.loadingActive = "loading";
+      http
+        .get(`/admin/equipmentType/${this.activeEquipmentType}`)
+        .then((res) => {
+          this.activeEquipmentTypeObj = res.data;
+          this.loadingActive = "fetched";
+        })
+        .catch((err) => {
+          this.loadingActive = "failed";
+        });
+    },
     fetchEquipmentTypeById(id: string) {
-      return http.get(`/admin/equipment/${id}`);
+      return http.get(`/admin/equipmentType/${id}`);
     },
-    fetchEquipmentTypeStatisticsById(id: string) {
-      return http.get(`/admin/equipment/${id}/statistics`);
-    },
-    async createEquipmentType(equipment: CreateEquipmentTypeViewModel): Promise<AxiosResponse<any, any>> {
-      const result = await http.post(`/admin/equipment`, {
-        salutationId: equipment.salutationId,
-        firstname: equipment.firstname,
-        lastname: equipment.lastname,
-        nameaffix: equipment.nameaffix,
-        birthdate: equipment.birthdate,
-        internalId: equipment.internalId,
+    async createEquipmentType(equipmentType: CreateEquipmentTypeViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/equipmentType`, {
+        salutationId: equipmentType.salutationId,
+        firstname: equipmentType.firstname,
+        lastname: equipmentType.lastname,
+        nameaffix: equipmentType.nameaffix,
+        birthdate: equipmentType.birthdate,
+        internalId: equipmentType.internalId,
       });
       this.fetchEquipmentTypes();
       return result;
     },
-    async updateEquipmentType(equipment: UpdateEquipmentTypeViewModel): Promise<AxiosResponse<any, any>> {
-      const result = await http.patch(`/admin/equipment/${equipment.id}`, {
-        salutationId: equipment.salutationId,
-        firstname: equipment.firstname,
-        lastname: equipment.lastname,
-        nameaffix: equipment.nameaffix,
-        birthdate: equipment.birthdate,
-        internalId: equipment.internalId,
+    async updateActiveEquipmentType(equipmentType: UpdateEquipmentTypeViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/equipmentType/${equipmentType.id}`, {
+        salutationId: equipmentType.salutationId,
+        firstname: equipmentType.firstname,
+        lastname: equipmentType.lastname,
+        nameaffix: equipmentType.nameaffix,
+        birthdate: equipmentType.birthdate,
+        internalId: equipmentType.internalId,
       });
       this.fetchEquipmentTypes();
       return result;
     },
-    async deleteEquipmentType(equipment: number): Promise<AxiosResponse<any, any>> {
-      const result = await http.delete(`/admin/equipment/${equipment}`);
+    async deleteEquipmentType(equipmentType: number): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/equipmentType/${equipmentType}`);
       this.fetchEquipmentTypes();
       return result;
     },
diff --git a/src/viewmodels/admin/unit/equipment/equipment.models.ts b/src/viewmodels/admin/unit/equipmentType/equipment.models.ts
similarity index 100%
rename from src/viewmodels/admin/unit/equipment/equipment.models.ts
rename to src/viewmodels/admin/unit/equipmentType/equipment.models.ts
diff --git a/src/views/admin/unit/equipment/Equipment.vue b/src/views/admin/unit/equipment/Equipment.vue
index a3e6cc8..648bc60 100644
--- a/src/views/admin/unit/equipment/Equipment.vue
+++ b/src/views/admin/unit/equipment/Equipment.vue
@@ -23,7 +23,7 @@
 
         <div class="flex flex-row gap-4">
           <button v-if="can('create', 'club', 'equipment')" primary class="!w-fit" @click="openCreateModal">
-            Gerätschaft erstellen
+            Gerätschaft erfassen
           </button>
         </div>
       </div>
@@ -39,7 +39,7 @@ import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
 import { useModalStore } from "@/stores/modal";
 import Pagination from "@/components/Pagination.vue";
 import { useAbilityStore } from "@/stores/ability";
-import type { EquipmentViewModel } from "../../../../viewmodels/admin/unit/equipment/equipment.models";
+import type { EquipmentViewModel } from "../../../../viewmodels/admin/unit/equipmentType/equipment.models";
 import EquipmentListItem from "../../../../components/admin/unit/equipment/EquipmentListItem.vue";
 </script>
 
diff --git a/src/views/admin/unit/equipment/EquipmentRouting.vue b/src/views/admin/unit/equipment/EquipmentRouting.vue
new file mode 100644
index 0000000..2c8a607
--- /dev/null
+++ b/src/views/admin/unit/equipment/EquipmentRouting.vue
@@ -0,0 +1,88 @@
+<template>
+  <MainTemplate>
+    <template #headerInsert>
+      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+    </template>
+    <template #topBar>
+      <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8 min-h-fit grow">
+          {{ activeEquipmentObj?.lastname }}, {{ activeEquipmentObj?.firstname }}
+        </h1>
+
+        <RouterLink v-if="can('update', 'unit', 'equipment')" :to="{ name: 'admin-unit-equipment-edit' }">
+          <PencilIcon class="w-5 h-5" />
+        </RouterLink>
+        <TrashIcon v-if="can('delete', 'unit', 'equipment')" class="w-5 h-5 cursor-pointer" @click="openDeleteModal" />
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
+        <div class="flex flex-col grow gap-2 overflow-hidden">
+          <div class="w-full flex flex-row max-lg:flex-wrap justify-center">
+            <RouterLink
+              v-for="tab in tabs"
+              :key="tab.route"
+              v-slot="{ isActive }"
+              :to="{ name: tab.route }"
+              class="w-1/2 md:w-1/3 lg:w-full p-0.5 first:pl-0 last:pr-0"
+            >
+              <p
+                :class="[
+                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
+                  isActive ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                ]"
+              >
+                {{ tab.title }}
+              </p>
+            </RouterLink>
+          </div>
+          <RouterView />
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { RouterLink, RouterView } from "vue-router";
+import { PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "@/stores/modal";
+import { useAbilityStore } from "@/stores/ability";
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    equipmentId: String,
+  },
+  data() {
+    return {
+      tabs: [
+        { route: "admin-unit-equipment-overview", title: "Übersicht" },
+        { route: "admin-unit-equipment-xy", title: "xy" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useEquipmentStore, ["activeEquipmentObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchEquipmentByActiveId();
+  },
+  methods: {
+    ...mapActions(useEquipmentStore, ["fetchEquipmentByActiveId"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openDeleteModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/DeleteMemberModal.vue"))),
+        this.equipmentId ?? ""
+      );
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/equipmentType/EquipmentType.vue b/src/views/admin/unit/equipmentType/EquipmentType.vue
index 921ee77..306ab59 100644
--- a/src/views/admin/unit/equipmentType/EquipmentType.vue
+++ b/src/views/admin/unit/equipmentType/EquipmentType.vue
@@ -34,7 +34,7 @@
 import { defineAsyncComponent, defineComponent, markRaw } from "vue";
 import { mapActions, mapState } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
-import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType";
+import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
 import { useModalStore } from "@/stores/modal";
 import Pagination from "@/components/Pagination.vue";
 import { useAbilityStore } from "@/stores/ability";
diff --git a/src/views/admin/unit/equipmentType/EquipmentTypeRouting.vue b/src/views/admin/unit/equipmentType/EquipmentTypeRouting.vue
new file mode 100644
index 0000000..e267d79
--- /dev/null
+++ b/src/views/admin/unit/equipmentType/EquipmentTypeRouting.vue
@@ -0,0 +1,92 @@
+<template>
+  <MainTemplate>
+    <template #headerInsert>
+      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+    </template>
+    <template #topBar>
+      <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8 min-h-fit grow">
+          {{ activeEquipmentTypeObj?.lastname }}, {{ activeEquipmentTypeObj?.firstname }}
+        </h1>
+
+        <RouterLink v-if="can('update', 'unit', 'equipment_type')" :to="{ name: 'admin-unit-equipment_type-edit' }">
+          <PencilIcon class="w-5 h-5" />
+        </RouterLink>
+        <TrashIcon
+          v-if="can('delete', 'unit', 'equipment_type')"
+          class="w-5 h-5 cursor-pointer"
+          @click="openDeleteModal"
+        />
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
+        <div class="flex flex-col grow gap-2 overflow-hidden">
+          <div class="w-full flex flex-row max-lg:flex-wrap justify-center">
+            <RouterLink
+              v-for="tab in tabs"
+              :key="tab.route"
+              v-slot="{ isActive }"
+              :to="{ name: tab.route }"
+              class="w-1/2 md:w-1/3 lg:w-full p-0.5 first:pl-0 last:pr-0"
+            >
+              <p
+                :class="[
+                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
+                  isActive ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                ]"
+              >
+                {{ tab.title }}
+              </p>
+            </RouterLink>
+          </div>
+          <RouterView />
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { RouterLink, RouterView } from "vue-router";
+import { PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "@/stores/modal";
+import { useAbilityStore } from "@/stores/ability";
+import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    equipmentTypeId: String,
+  },
+  data() {
+    return {
+      tabs: [
+        { route: "admin-unit-equipment_type-overview", title: "Übersicht" },
+        { route: "admin-unit-equipment_type-xy", title: "xy" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useEquipmentTypeStore, ["activeEquipmentTypeObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchEquipmentTypeByActiveId();
+  },
+  methods: {
+    ...mapActions(useEquipmentTypeStore, ["fetchEquipmentTypeByActiveId"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openDeleteModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/DeleteMemberModal.vue"))),
+        this.equipmentTypeId ?? ""
+      );
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/respiratoryGear/RespiratoryGearRouting.vue b/src/views/admin/unit/respiratoryGear/RespiratoryGearRouting.vue
new file mode 100644
index 0000000..1664809
--- /dev/null
+++ b/src/views/admin/unit/respiratoryGear/RespiratoryGearRouting.vue
@@ -0,0 +1,92 @@
+<template>
+  <MainTemplate>
+    <template #headerInsert>
+      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+    </template>
+    <template #topBar>
+      <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8 min-h-fit grow">
+          {{ activeRespiratoryGearObj?.lastname }}, {{ activeRespiratoryGearObj?.firstname }}
+        </h1>
+
+        <RouterLink v-if="can('update', 'unit', 'respiratory_gear')" :to="{ name: 'admin-unit-respiratory_gear-edit' }">
+          <PencilIcon class="w-5 h-5" />
+        </RouterLink>
+        <TrashIcon
+          v-if="can('delete', 'unit', 'respiratory_gear')"
+          class="w-5 h-5 cursor-pointer"
+          @click="openDeleteModal"
+        />
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
+        <div class="flex flex-col grow gap-2 overflow-hidden">
+          <div class="w-full flex flex-row max-lg:flex-wrap justify-center">
+            <RouterLink
+              v-for="tab in tabs"
+              :key="tab.route"
+              v-slot="{ isActive }"
+              :to="{ name: tab.route }"
+              class="w-1/2 md:w-1/3 lg:w-full p-0.5 first:pl-0 last:pr-0"
+            >
+              <p
+                :class="[
+                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
+                  isActive ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                ]"
+              >
+                {{ tab.title }}
+              </p>
+            </RouterLink>
+          </div>
+          <RouterView />
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { RouterLink, RouterView } from "vue-router";
+import { PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "@/stores/modal";
+import { useAbilityStore } from "@/stores/ability";
+import { useRespiratoryGearStore } from "@/stores/admin/unit/respiratoryGear/respiratoryGear";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    respiratoryGearId: String,
+  },
+  data() {
+    return {
+      tabs: [
+        { route: "admin-unit-respiratory_gear-overview", title: "Übersicht" },
+        { route: "admin-unit-respiratory_gear-xy", title: "xy" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useRespiratoryGearStore, ["activeRespiratoryGearObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchRespiratoryGearByActiveId();
+  },
+  methods: {
+    ...mapActions(useRespiratoryGearStore, ["fetchRespiratoryGearByActiveId"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openDeleteModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/DeleteMemberModal.vue"))),
+        this.respiratoryGearId ?? ""
+      );
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/respiratoryMission/RespiratoryMissionRouting.vue b/src/views/admin/unit/respiratoryMission/RespiratoryMissionRouting.vue
new file mode 100644
index 0000000..9e820e2
--- /dev/null
+++ b/src/views/admin/unit/respiratoryMission/RespiratoryMissionRouting.vue
@@ -0,0 +1,95 @@
+<template>
+  <MainTemplate>
+    <template #headerInsert>
+      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+    </template>
+    <template #topBar>
+      <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8 min-h-fit grow">
+          {{ activeRespiratoryMissionObj?.lastname }}, {{ activeRespiratoryMissionObj?.firstname }}
+        </h1>
+
+        <RouterLink
+          v-if="can('update', 'unit', 'respiratory_mission')"
+          :to="{ name: 'admin-unit-respiratory_mission-edit' }"
+        >
+          <PencilIcon class="w-5 h-5" />
+        </RouterLink>
+        <TrashIcon
+          v-if="can('delete', 'unit', 'respiratory_mission')"
+          class="w-5 h-5 cursor-pointer"
+          @click="openDeleteModal"
+        />
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
+        <div class="flex flex-col grow gap-2 overflow-hidden">
+          <div class="w-full flex flex-row max-lg:flex-wrap justify-center">
+            <RouterLink
+              v-for="tab in tabs"
+              :key="tab.route"
+              v-slot="{ isActive }"
+              :to="{ name: tab.route }"
+              class="w-1/2 md:w-1/3 lg:w-full p-0.5 first:pl-0 last:pr-0"
+            >
+              <p
+                :class="[
+                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
+                  isActive ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                ]"
+              >
+                {{ tab.title }}
+              </p>
+            </RouterLink>
+          </div>
+          <RouterView />
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { RouterLink, RouterView } from "vue-router";
+import { PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "@/stores/modal";
+import { useAbilityStore } from "@/stores/ability";
+import { useRespiratoryMissionStore } from "@/stores/admin/unit/respiratoryMission/respiratoryMission";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    respiratoryMissionId: String,
+  },
+  data() {
+    return {
+      tabs: [
+        { route: "admin-unit-respiratory_mission-overview", title: "Übersicht" },
+        { route: "admin-unit-respiratory_mission-xy", title: "xy" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useRespiratoryMissionStore, ["activeRespiratoryMissionObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchRespiratoryMissionByActiveId();
+  },
+  methods: {
+    ...mapActions(useRespiratoryMissionStore, ["fetchRespiratoryMissionByActiveId"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openDeleteModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/DeleteMemberModal.vue"))),
+        this.respiratoryMissionId ?? ""
+      );
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/respiratoryWearer/RespiratoryWearerRouting.vue b/src/views/admin/unit/respiratoryWearer/RespiratoryWearerRouting.vue
new file mode 100644
index 0000000..c5fecf0
--- /dev/null
+++ b/src/views/admin/unit/respiratoryWearer/RespiratoryWearerRouting.vue
@@ -0,0 +1,95 @@
+<template>
+  <MainTemplate>
+    <template #headerInsert>
+      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+    </template>
+    <template #topBar>
+      <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8 min-h-fit grow">
+          {{ activeRespiratoryWearerObj?.lastname }}, {{ activeRespiratoryWearerObj?.firstname }}
+        </h1>
+
+        <RouterLink
+          v-if="can('update', 'unit', 'respiratory_wearer')"
+          :to="{ name: 'admin-unit-respiratory_wearer-edit' }"
+        >
+          <PencilIcon class="w-5 h-5" />
+        </RouterLink>
+        <TrashIcon
+          v-if="can('delete', 'unit', 'respiratory_wearer')"
+          class="w-5 h-5 cursor-pointer"
+          @click="openDeleteModal"
+        />
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
+        <div class="flex flex-col grow gap-2 overflow-hidden">
+          <div class="w-full flex flex-row max-lg:flex-wrap justify-center">
+            <RouterLink
+              v-for="tab in tabs"
+              :key="tab.route"
+              v-slot="{ isActive }"
+              :to="{ name: tab.route }"
+              class="w-1/2 md:w-1/3 lg:w-full p-0.5 first:pl-0 last:pr-0"
+            >
+              <p
+                :class="[
+                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
+                  isActive ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                ]"
+              >
+                {{ tab.title }}
+              </p>
+            </RouterLink>
+          </div>
+          <RouterView />
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { RouterLink, RouterView } from "vue-router";
+import { PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "@/stores/modal";
+import { useAbilityStore } from "@/stores/ability";
+import { useRespiratoryWearerStore } from "@/stores/admin/unit/respiratoryWearer/respiratoryWearer";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    respiratoryWearerId: String,
+  },
+  data() {
+    return {
+      tabs: [
+        { route: "admin-unit-respiratory_wearer-overview", title: "Übersicht" },
+        { route: "admin-unit-respiratory_wearer-xy", title: "xy" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useRespiratoryWearerStore, ["activeRespiratoryWearerObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchRespiratoryWearerByActiveId();
+  },
+  methods: {
+    ...mapActions(useRespiratoryWearerStore, ["fetchRespiratoryWearerByActiveId"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openDeleteModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/DeleteMemberModal.vue"))),
+        this.respiratoryWearerId ?? ""
+      );
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/vehicle/VehicleRouting.vue b/src/views/admin/unit/vehicle/VehicleRouting.vue
new file mode 100644
index 0000000..4d3c3f7
--- /dev/null
+++ b/src/views/admin/unit/vehicle/VehicleRouting.vue
@@ -0,0 +1,88 @@
+<template>
+  <MainTemplate>
+    <template #headerInsert>
+      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+    </template>
+    <template #topBar>
+      <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8 min-h-fit grow">
+          {{ activeVehicleObj?.lastname }}, {{ activeVehicleObj?.firstname }}
+        </h1>
+
+        <RouterLink v-if="can('update', 'unit', 'vehicle')" :to="{ name: 'admin-unit-vehicle-edit' }">
+          <PencilIcon class="w-5 h-5" />
+        </RouterLink>
+        <TrashIcon v-if="can('delete', 'unit', 'vehicle')" class="w-5 h-5 cursor-pointer" @click="openDeleteModal" />
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
+        <div class="flex flex-col grow gap-2 overflow-hidden">
+          <div class="w-full flex flex-row max-lg:flex-wrap justify-center">
+            <RouterLink
+              v-for="tab in tabs"
+              :key="tab.route"
+              v-slot="{ isActive }"
+              :to="{ name: tab.route }"
+              class="w-1/2 md:w-1/3 lg:w-full p-0.5 first:pl-0 last:pr-0"
+            >
+              <p
+                :class="[
+                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
+                  isActive ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                ]"
+              >
+                {{ tab.title }}
+              </p>
+            </RouterLink>
+          </div>
+          <RouterView />
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { RouterLink, RouterView } from "vue-router";
+import { PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "@/stores/modal";
+import { useAbilityStore } from "@/stores/ability";
+import { useVehicleStore } from "@/stores/admin/unit/vehicle/vehicle";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    vehicleId: String,
+  },
+  data() {
+    return {
+      tabs: [
+        { route: "admin-unit-vehicle-overview", title: "Übersicht" },
+        { route: "admin-unit-vehicle-xy", title: "xy" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useVehicleStore, ["activeVehicleObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchVehicleByActiveId();
+  },
+  methods: {
+    ...mapActions(useVehicleStore, ["fetchVehicleByActiveId"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openDeleteModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/DeleteMemberModal.vue"))),
+        this.vehicleId ?? ""
+      );
+    },
+  },
+});
+</script>