diff --git a/package-lock.json b/package-lock.json
index 0e154ef..1d82798 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ff-admin",
-  "version": "1.7.5",
+  "version": "1.8.0-beta1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ff-admin",
-      "version": "1.7.5",
+      "version": "1.8.0-beta1",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@fullcalendar/core": "^6.1.18",
@@ -43,6 +43,7 @@
         "unplugin-vue-markdown": "^29.1.0",
         "uuid": "^11.1.0",
         "vue": "^3.5.18",
+        "vue-qrcode-reader": "^5.7.1",
         "vue-router": "^4.5.1"
       },
       "devDependencies": {
@@ -3792,6 +3793,18 @@
         "@types/underscore": "*"
       }
     },
+    "node_modules/@types/dom-webcodecs": {
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@types/dom-webcodecs/-/dom-webcodecs-0.1.14.tgz",
+      "integrity": "sha512-ba9aF0qARLLQpLihONIRbj8VvAdUxO+5jIxlscVcDAQTcJmq5qVr781+ino5qbQUJUmO21cLP2eLeXYWzao5Vg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/emscripten": {
+      "version": "1.40.1",
+      "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.40.1.tgz",
+      "integrity": "sha512-sr53lnYkQNhjHNN0oJDdUm5564biioI5DuOpycufDVK7D3y+GR3oUswe2rlwY1nPNyusHbrJ9WoTyIHl4/Bpwg==",
+      "license": "MIT"
+    },
     "node_modules/@types/eslint": {
       "version": "9.6.1",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
@@ -4912,6 +4925,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/barcode-detector": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-2.2.2.tgz",
+      "integrity": "sha512-JcSekql+EV93evfzF9zBr+Y6aRfkR+QFvgyzbwQ0dbymZXoAI9+WgT7H1E429f+3RKNncHz2CW98VQtaaKpmfQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/dom-webcodecs": "^0.1.11",
+        "zxing-wasm": "1.1.3"
+      }
+    },
     "node_modules/birpc": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.3.0.tgz",
@@ -9443,6 +9466,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sdp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.0.tgz",
+      "integrity": "sha512-d7wDPgDV3DDiqulJjKiV2865wKsJ34YI+NDREbm+FySq6WuKOikwyNQcm+doLAZ1O6ltdO0SeKle2xMpN3Brgw==",
+      "license": "MIT"
+    },
     "node_modules/section-matter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
@@ -11009,6 +11038,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/vue-qrcode-reader": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/vue-qrcode-reader/-/vue-qrcode-reader-5.7.2.tgz",
+      "integrity": "sha512-MRwo8IWM+1UzvfRhOQQBqEap06nl0E8QFIb+/HxS1KiH8BqL2qhlzMVvJgMUti4m5x+XH2YlGS0v1Qshpg+Hbw==",
+      "license": "MIT",
+      "dependencies": {
+        "barcode-detector": "2.2.2",
+        "webrtc-adapter": "8.2.3"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.1",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
@@ -11060,6 +11102,19 @@
       "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
       "license": "MIT"
     },
+    "node_modules/webrtc-adapter": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-8.2.3.tgz",
+      "integrity": "sha512-gnmRz++suzmvxtp3ehQts6s2JtAGPuDPjA1F3a9ckNpG1kYdYuHWYpazoAnL9FS5/B21tKlhkorbdCXat0+4xQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "sdp": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/whatwg-url": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
@@ -11752,6 +11807,15 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zxing-wasm": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/zxing-wasm/-/zxing-wasm-1.1.3.tgz",
+      "integrity": "sha512-MYm9k/5YVs4ZOTIFwlRjfFKD0crhefgbnt1+6TEpmKUDFp3E2uwqGSKwQOd2hOIsta/7Usq4hnpNRYTLoljnfA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/emscripten": "^1.39.10"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 4403864..0bd5c3f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ff-admin",
-  "version": "1.7.5",
+  "version": "1.8.0-beta1",
   "description": "Feuerwehr/Verein Mitgliederverwaltung UI",
   "type": "module",
   "scripts": {
@@ -58,6 +58,7 @@
     "unplugin-vue-markdown": "^29.1.0",
     "uuid": "^11.1.0",
     "vue": "^3.5.18",
+    "vue-qrcode-reader": "^5.7.1",
     "vue-router": "^4.5.1"
   },
   "devDependencies": {
diff --git a/src/components/CopyPasteContextMenu.vue b/src/components/CopyPasteContextMenu.vue
index 80dd642..599c0af 100644
--- a/src/components/CopyPasteContextMenu.vue
+++ b/src/components/CopyPasteContextMenu.vue
@@ -36,12 +36,9 @@ export default defineComponent({
       document.getSelection()?.toString() || this.clickedOnEl.value || this.clickedOnEl.innerText || "";
 
     let selection = document.getSelection()?.toString();
-    console.log(selection);
     if (selection == "") {
-      console.log("jo");
       const range = document.createRange();
       range.selectNode(this.clickedOnEl);
-      console.log(range);
       window.getSelection()?.removeAllRanges();
       window.getSelection()?.addRange(range);
     }
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 1a9039e..3fc79d6 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -4,24 +4,27 @@
     class="absolute inset-0 w-full h-full flex justify-center items-center bg-black/50 select-none z-50 p-2"
     v-show="show"
   >
-    <component :is="component_ref" :data="data" class="p-4 bg-white rounded-lg max-h-[95%] overflow-y-auto" />
+    <component
+      :is="component_ref"
+      :data="data"
+      :callback="callback"
+      class="p-4 bg-white rounded-lg max-h-[95%] overflow-y-auto"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { mapState, mapActions } from "pinia";
 import { useModalStore } from "@/stores/modal";
-import { useContextMenuStore } from "@/stores/context-menu";
 </script>
 
 <script lang="ts">
 export default {
   computed: {
-    ...mapState(useModalStore, ["show", "component_ref", "data"]),
+    ...mapState(useModalStore, ["show", "component_ref", "data", "callback"]),
   },
   methods: {
     ...mapActions(useModalStore, ["closeModal"]),
-    ...mapActions(useContextMenuStore, ["closeContextMenu"]),
   },
 };
 </script>
diff --git a/src/components/Notification.vue b/src/components/Notification.vue
index e320e19..d302eef 100644
--- a/src/components/Notification.vue
+++ b/src/components/Notification.vue
@@ -20,6 +20,7 @@
           notification.type == 'error' ? 'border border-red-400' : '',
           notification.type == 'warning' ? 'border border-red-400' : '',
           notification.type == 'info' ? 'border border-gray-400' : '',
+          notification.type == 'success' ? 'border border-green-400' : '',
         ]"
       >
         <!-- @mouseover="hovering(notification.id, true)"
@@ -36,6 +37,10 @@
           v-if="notification.type == 'info'"
           class="flex items-center justify-center min-w-12 w-12 h-12 bg-gray-500 rounded-lg text-white p-1"
         />
+        <HandThumbUpIcon
+          v-if="notification.type == 'success'"
+          class="flex items-center justify-center min-w-12 w-12 h-12 bg-green-500 rounded-lg text-white p-1"
+        />
 
         <div class="flex flex-col">
           <span
@@ -44,6 +49,7 @@
               notification.type == 'error' ? 'text-red-500' : '',
               notification.type == 'warning' ? 'text-red-500' : '',
               notification.type == 'info' ? 'text-gray-700' : '',
+              notification.type == 'success' ? 'text-green-700' : '',
             ]"
             >{{ notification.title }}</span
           >
@@ -71,6 +77,7 @@ import {
   ExclamationCircleIcon,
   InformationCircleIcon,
   XMarkIcon,
+  HandThumbUpIcon,
 } from "@heroicons/vue/24/outline";
 
 export interface Props {
diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue
index d983299..5d36165 100644
--- a/src/components/Pagination.vue
+++ b/src/components/Pagination.vue
@@ -2,6 +2,7 @@
   <div class="grow flex flex-col gap-2 overflow-hidden">
     <div v-if="useSearch" class="relative self-end flex flex-row items-center gap-2">
       <Spinner v-if="deferingSearch" />
+      <QrCodeIcon v-if="useScanner" class="h-7 cursor-pointer" @click="scanCode" />
       <input
         type="text"
         class="max-w-64! w-64! rounded-md shadow-xs relative block px-3 py-2 pr-5 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
@@ -66,10 +67,12 @@
 </template>
 
 <script setup lang="ts" generic="T extends { id: FieldType }">
-import { computed, ref, watch } from "vue";
+import { computed, defineAsyncComponent, markRaw, ref, watch } from "vue";
 import { ChevronRightIcon, ChevronLeftIcon, XMarkIcon } from "@heroicons/vue/20/solid";
 import Spinner from "./Spinner.vue";
 import type { FieldType } from "@/types/dynamicQueries";
+import { QrCodeIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "@/stores/modal";
 
 const props = defineProps({
   items: { type: Array<T>, default: [] },
@@ -79,6 +82,7 @@ const props = defineProps({
   useSearch: { type: Boolean, default: false },
   enablePreSearch: { type: Boolean, default: false },
   indicateLoading: { type: Boolean, default: false },
+  useScanner: { type: Boolean, default: false },
 });
 
 const slots = defineSlots<{
@@ -183,84 +187,14 @@ const filterData = (array: Array<any>, searchString: string, start: number, end:
     )
     .filter((elem, index) => (elem?.tab_pos ?? index) >= start && (elem?.tab_pos ?? index) < end);
 };
+
+function scanCode() {
+  useModalStore().openModal(
+    markRaw(defineAsyncComponent(() => import("@/components/scanner/ManageScanModal.vue"))),
+    "pagination",
+    (result: string) => {
+      searchString.value = result;
+    }
+  );
+}
 </script>
-
-<!-- 
-<script lang="ts">
-export default defineComponent({
-  computed: {
-    entryCount() {
-      return this.totalCount ?? this.items.length;
-    },
-    showingStart() {
-      return this.currentPage * this.maxEntriesPerPage;
-    },
-    showingEnd() {
-      let max = this.currentPage * this.maxEntriesPerPage + this.maxEntriesPerPage;
-      if (max > this.entryCount) max = this.entryCount;
-      return max;
-    },
-    showingText() {
-      return `${this.entryCount != 0 ? this.showingStart + 1 : 0} - ${this.showingEnd}`;
-    },
-    countOfPages() {
-      return Math.ceil(this.entryCount / this.maxEntriesPerPage);
-    },
-    displayedPagesNumbers(): Array<number | "."> {
-      //indicate if "." or page number gets pushed
-      let stateOfPush = false;
-
-      return [...new Array(this.countOfPages)].reduce((acc, curr, index) => {
-        if (
-          // always display first 2 pages
-          index <= 1 ||
-          // always display last 2 pages
-          index >= this.countOfPages - 2 ||
-          // always display 1 pages around current page
-          (this.currentPage - 1 <= index && index <= this.currentPage + 1)
-        ) {
-          acc.push(index);
-          stateOfPush = false;
-          return acc;
-        }
-        // abort if placeholder already added to array
-        if (stateOfPush == true) return acc;
-        // show placeholder if pagenumber is not actively rendered
-        acc.push(".");
-        stateOfPush = true;
-
-        return acc;
-      }, []);
-    },
-    visibleRows() {
-      return this.filterData(this.items, this.searchString, this.showingStart, this.showingEnd);
-    },
-  },
-  methods: {
-    loadPage(newPage: number | ".") {
-      if (newPage == ".") return;
-      if (newPage < 0 || newPage >= this.countOfPages) return;
-
-      let pageStart = newPage * this.maxEntriesPerPage;
-      let pageEnd = newPage * this.maxEntriesPerPage + this.maxEntriesPerPage;
-      if (pageEnd > this.entryCount) pageEnd = this.entryCount;
-
-      let loadedElementCount = this.filterData(this.items, this.searchString, pageStart, pageEnd).length;
-      if (loadedElementCount < this.maxEntriesPerPage)
-        this.$emit("loadData", { offset: pageStart, count: this.maxEntriesPerPage, search: this.searchString });
-
-      this.currentPage = newPage;
-    },
-    filterData(array: Array<any>, searchString: string, start: number, end: number): Array<any> {
-      return array
-        .filter(
-          (elem) =>
-            !this.enablePreSearch ||
-            searchString.trim() == "" ||
-            this.config.some((col) => typeof elem?.[col.key] == "string" && elem[col.key].includes(searchString.trim()))
-        )
-        .filter((elem, index) => (elem?.tab_pos ?? index) >= start && (elem?.tab_pos ?? index) < end);
-    },
-  },
-});
-</script> -->
diff --git a/src/components/TextCopy.vue b/src/components/TextCopy.vue
index 6c13613..7a23ec3 100644
--- a/src/components/TextCopy.vue
+++ b/src/components/TextCopy.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex relative">
+  <div class="flex w-full relative">
     <input type="text" readonly :value="copyText" />
     <ClipboardIcon
       class="w-5 h-5 p-2 box-content absolute right-1 top-1/2 -translate-y-1/2 bg-white cursor-pointer"
diff --git a/src/components/admin/management/setting/AppSetting.vue b/src/components/admin/management/setting/AppSetting.vue
index 4ec3374..2190bb6 100644
--- a/src/components/admin/management/setting/AppSetting.vue
+++ b/src/components/admin/management/setting/AppSetting.vue
@@ -18,7 +18,23 @@
         <CheckIcon v-if="appSettings['app.show_link_to_calendar']" class="h-2.5 w-2.5 stroke-4 text-white" />
       </div>
       <input v-else id="show_link_to_calendar" type="checkbox" :checked="appSettings['app.show_link_to_calendar']" />
-      <label for="show_link_to_calendar">Kalender-Link anzeigen</label>
+      <label for="show_link_to_calendar"><i>Kalender</i> Link anzeigen</label>
+    </div>
+    <div class="w-full flex flex-row items-center gap-2">
+      <div
+        v-if="!enableEdit"
+        class="border-2 border-gray-500 rounded-sm"
+        :class="appSettings['app.show_link_to_damagereport'] ? 'bg-gray-500' : 'h-3.5 w-3.5'"
+      >
+        <CheckIcon v-if="appSettings['app.show_link_to_damagereport']" class="h-2.5 w-2.5 stroke-4 text-white" />
+      </div>
+      <input
+        v-else
+        id="show_link_to_damagereport"
+        type="checkbox"
+        :checked="appSettings['app.show_link_to_damagereport']"
+      />
+      <label for="show_link_to_damagereport"><i>Schaden melden</i> Link anzeigen</label>
     </div>
   </BaseSetting>
 </template>
@@ -60,6 +76,10 @@ export default defineComponent({
           key: "app.show_link_to_calendar",
           value: formData.show_link_to_calendar.checked,
         },
+        {
+          key: "app.show_link_to_damagereport",
+          value: formData.show_link_to_damagereport.checked,
+        },
       ]);
     },
   },
diff --git a/src/components/admin/unit/InspectionTimeFormatExplainIcon.vue b/src/components/admin/unit/InspectionTimeFormatExplainIcon.vue
new file mode 100644
index 0000000..9f27541
--- /dev/null
+++ b/src/components/admin/unit/InspectionTimeFormatExplainIcon.vue
@@ -0,0 +1,25 @@
+<template>
+  <div @click="showInfo" class="cursor-pointer">
+    <InformationCircleIcon class="w-5 h-5" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import { InformationCircleIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    showInfo() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/unit/InspectionTimeFormatExplainModal.vue")))
+      );
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/unit/InspectionTimeFormatExplainModal.vue b/src/components/admin/unit/InspectionTimeFormatExplainModal.vue
new file mode 100644
index 0000000..d0719c2
--- /dev/null
+++ b/src/components/admin/unit/InspectionTimeFormatExplainModal.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="relative w-full md:max-w-md">
+    <div class="flex flex-row gap-2 items-center justify-center">
+      <InformationCircleIcon class="text-gray-500 h-5 w-5" />
+      <p class="text-xl font-medium">Zeit Format für Erinnerung und Intervall</p>
+    </div>
+    <br />
+    <table class="min-w-full text-sm border border-gray-200 rounded">
+      <tbody>
+        <tr>
+          <td class="px-3 py-2 font-mono text-gray-700 border-b border-gray-100">&lt;zahl&gt;-(d|m|y)</td>
+          <td class="px-3 py-2 text-gray-600 border-b border-gray-100">
+            Ein Intervall, z.B. <span class="font-mono">7-d</span> für alle 7 Tage,
+            <span class="font-mono">1-m</span> für jeden Monat.
+          </td>
+        </tr>
+        <tr>
+          <td class="px-3 py-2 font-mono text-gray-700 border-b border-gray-100">DD/MM</td>
+          <td class="px-3 py-2 text-gray-600 border-b border-gray-100">
+            Ein bestimmtes Datum, z.B. <span class="font-mono">15/06</span> für den 15. Juni.
+          </td>
+        </tr>
+        <tr>
+          <td class="px-3 py-2 font-mono text-gray-700">DD/*</td>
+          <td class="px-3 py-2 text-gray-600">
+            Ein Tag jeden Monats, z.B. <span class="font-mono">01/*</span> für den ersten Tag jedes Monats.
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p>Im Fall von Erinnerungen wird das Format als zeitliche Angabe vor einem Datum verwendet.</p>
+    <br />
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal">schließen</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import { InformationCircleIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+  },
+});
+</script>
diff --git a/src/components/admin/unit/damageReport/DamageReportListItem.vue b/src/components/admin/unit/damageReport/DamageReportListItem.vue
new file mode 100644
index 0000000..574c584
--- /dev/null
+++ b/src/components/admin/unit/damageReport/DamageReportListItem.vue
@@ -0,0 +1,52 @@
+<template>
+  <RouterLink
+    :to="{ name: 'admin-unit-damage_report-overview', params: { damageReportId: damageReport.id } }"
+    class="flex flex-col h-fit w-full border border-primary rounded-md"
+  >
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>
+        {{ damageReport.title }} -
+        {{ damageReport?.related?.name ?? "Ohne Zuordnung" }}
+        <small v-if="damageReport?.related">({{ damageReport.related.code }})</small>
+      </p>
+      <div class="flex flex-row gap-2">
+        <div v-if="damageReport.images.length != 0" class="cursor-pointer">
+          <PhotoIcon class="w-5 h-5" />
+        </div>
+        <div v-if="damageReport.location" class="cursor-pointer">
+          <MapPinIcon class="w-5 h-5" />
+        </div>
+        <div v-if="damageReport.reportedBy" class="cursor-pointer">
+          <UserIcon class="w-5 h-5" />
+        </div>
+        <div v-if="damageReport.repair" class="cursor-pointer">
+          <WrenchScrewdriverIcon class="w-5 h-5" />
+        </div>
+      </div>
+    </div>
+    <div class="p-2">
+      <p>gemeldet: {{ new Date(damageReport.reportedAt).toLocaleString("de") }}</p>
+      <p>Status: {{ damageReport.status }}</p>
+      <p v-if="damageReport.description">Beschreibung: {{ damageReport.description }}</p>
+    </div>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
+import { MapPinIcon, PhotoIcon, UserIcon, WrenchScrewdriverIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    damageReport: { type: Object as PropType<DamageReportViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>
diff --git a/src/components/admin/unit/equipment/EquipmentListItem.vue b/src/components/admin/unit/equipment/EquipmentListItem.vue
new file mode 100644
index 0000000..dc9d7f3
--- /dev/null
+++ b/src/components/admin/unit/equipment/EquipmentListItem.vue
@@ -0,0 +1,33 @@
+<template>
+  <RouterLink
+    :to="{ name: 'admin-unit-equipment-overview', params: { equipmentId: equipment.id } }"
+    class="flex flex-col h-fit w-full border border-primary rounded-md"
+  >
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>
+        {{ equipment.name }}
+      </p>
+    </div>
+    <div class="p-2">
+      <p v-if="equipment.code">Code: {{ equipment.code }}</p>
+    </div>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+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";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    equipment: { type: Object as PropType<EquipmentViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>
diff --git a/src/components/admin/unit/equipmentType/CreateEquipmentTypeModal.vue b/src/components/admin/unit/equipmentType/CreateEquipmentTypeModal.vue
new file mode 100644
index 0000000..e0f50b5
--- /dev/null
+++ b/src/components/admin/unit/equipmentType/CreateEquipmentTypeModal.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Typ erstellen</p>
+    </div>
+    <br />
+    <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
+      <div>
+        <label for="type">Typ</label>
+        <input type="text" id="type" required />
+      </div>
+      <div>
+        <label for="description">Beschreibung (optional)</label>
+        <textarea id="description" class="h-18"></textarea>
+      </div>
+
+      <div class="flex flex-row gap-2">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
+import type { CreateEquipmentTypeViewModel } from "@/viewmodels/admin/unit/equipment/equipmentType.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useEquipmentTypeStore, ["createEquipmentType"]),
+    triggerCreate(e: any) {
+      let formData = e.target.elements;
+      let createEquipmentType: CreateEquipmentTypeViewModel = {
+        type: formData.type.value,
+        description: formData.description.value,
+      };
+      this.status = "loading";
+      this.createEquipmentType(createEquipmentType)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/unit/equipmentType/DeleteEquipmentTypeModal.vue b/src/components/admin/unit/equipmentType/DeleteEquipmentTypeModal.vue
new file mode 100644
index 0000000..355117d
--- /dev/null
+++ b/src/components/admin/unit/equipmentType/DeleteEquipmentTypeModal.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Ausrüstung-Type löschen</p>
+    </div>
+    <br />
+    <p class="text-center">Type {{ equipmentType?.type }} löschen?</p>
+    <br />
+
+    <div class="flex flex-row gap-2">
+      <button
+        primary
+        type="submit"
+        :disabled="status == 'loading' || status?.status == 'success'"
+        @click="triggerDelete"
+      >
+        löschen
+      </button>
+      <Spinner v-if="status == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="status?.status == 'success'" />
+      <FailureXMark v-else-if="status?.status == 'failed'" />
+    </div>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
+import type { CreateEquipmentTypeViewModel } from "@/viewmodels/admin/unit/equipment/equipmentType.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+    ...mapState(useEquipmentTypeStore, ["equipmentTypes"]),
+    equipmentType() {
+      return this.equipmentTypes.find((m) => m.id == this.data);
+    },
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useEquipmentTypeStore, ["deleteEquipmentType"]),
+    triggerDelete() {
+      this.status = "loading";
+      this.deleteEquipmentType(this.data)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.$router.push({ name: "admin-unit-equipment_type" });
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/unit/equipmentType/EquipmentTypeListItem.vue b/src/components/admin/unit/equipmentType/EquipmentTypeListItem.vue
new file mode 100644
index 0000000..91e8e9b
--- /dev/null
+++ b/src/components/admin/unit/equipmentType/EquipmentTypeListItem.vue
@@ -0,0 +1,40 @@
+<template>
+  <RouterLink
+    :to="{ name: 'admin-unit-equipment_type-overview', params: { equipmentTypeId: equipmentType.id } }"
+    class="flex flex-col h-fit w-full border border-primary rounded-md"
+  >
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>
+        {{ equipmentType.type }}
+      </p>
+    </div>
+    <div class="flex flex-col p-2">
+      <div class="flex flex-row gap-2">
+        <p class="min-w-16">Anzahl angelegter Geräte:</p>
+        <p class="grow overflow-hidden">{{ equipmentType.equipmentCount }}</p>
+      </div>
+      <div v-if="equipmentType.description" class="flex flex-row gap-2">
+        <p class="min-w-16">Beschreibung:</p>
+        <p class="grow overflow-hidden">{{ equipmentType.description }}</p>
+      </div>
+    </div>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import type { EquipmentTypeViewModel } from "@/viewmodels/admin/unit/equipment/equipmentType.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    equipmentType: { type: Object as PropType<EquipmentTypeViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>
diff --git a/src/components/admin/unit/inspection/DeleteInspectionModal.vue b/src/components/admin/unit/inspection/DeleteInspectionModal.vue
new file mode 100644
index 0000000..334080c
--- /dev/null
+++ b/src/components/admin/unit/inspection/DeleteInspectionModal.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">angefangene Prüfung löschen</p>
+    </div>
+    <br />
+    <p class="text-center">
+      {{ activeInspectionObj?.inspectionPlan.title }} zu {{ activeInspectionObj?.related.name }}
+      <small v-if="activeInspectionObj?.related.code">({{ activeInspectionObj?.related.code }})</small> begonnen am
+      {{ new Date(activeInspectionObj?.created ?? "").toLocaleDateString("de-de") }} löschen?
+    </p>
+    <br />
+
+    <div class="flex flex-row gap-2">
+      <button
+        primary
+        type="submit"
+        :disabled="status == 'loading' || status?.status == 'success'"
+        @click="triggerDelete"
+      >
+        löschen
+      </button>
+      <Spinner v-if="status == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="status?.status == 'success'" />
+      <FailureXMark v-else-if="status?.status == 'failed'" />
+    </div>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useInspectionStore } from "@/stores/admin/unit/inspection/inspection";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  computed: {
+    ...mapState(useInspectionStore, ["activeInspectionObj"]),
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useInspectionStore, ["deleteInspection"]),
+    triggerDelete() {
+      if (!this.activeInspectionObj) return;
+
+      this.status = "loading";
+      this.deleteInspection(this.activeInspectionObj.id)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.$router.push({ name: "admin-unit-inspection" });
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/unit/inspection/FileInput.vue b/src/components/admin/unit/inspection/FileInput.vue
new file mode 100644
index 0000000..de9d27f
--- /dev/null
+++ b/src/components/admin/unit/inspection/FileInput.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>{{ inspectionPoint.title }}</p>
+      <DocumentCheckIcon class="w-5 h-5 cursor-pointer" @click="openDetailView" />
+    </div>
+    <div class="p-2">
+      <p v-if="inspectionPoint.description" class="pb-2">Beschreibung: {{ inspectionPoint.description }}</p>
+      <hr v-if="inspectionPoint.description" />
+      <label :for="inspectionPoint.id">{{ inspectionPoint.others == "pdf" ? "PDF" : "Bild" }}-Datei</label>
+      <button
+        :primary="value != ''"
+        :primary-outline="value == ''"
+        type="button"
+        class="flex flex-row gap-2"
+        @click="($refs.fileInput as HTMLInputElement).click()"
+        :disabled="!editable"
+      >
+        <span v-if="value == ''">Datei wählen</span><span v-else>Datei gewählt</span>
+        <CheckIcon v-if="value != ''" class="h-5 w-5" />
+      </button>
+      <input
+        ref="fileInput"
+        :id="inspectionPoint.id"
+        :name="inspectionPoint.id"
+        type="file"
+        :accept="inspectionPoint.others == 'pdf' ? 'application/pdf' : 'image/*'"
+        hidden
+        @change="selectFile"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw, type PropType } from "vue";
+import type { InspectionPointViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+import { CheckIcon, DocumentCheckIcon } from "@heroicons/vue/24/outline";
+import { mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    inspectionPoint: {
+      type: Object as PropType<InspectionPointViewModel>,
+      required: true,
+    },
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    editable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: {
+    "update:model-value": (p: string) => {
+      return true;
+    },
+    "update:upload": (p: File | null) => {
+      return true;
+    },
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string | number) {
+        this.$emit("update:model-value", val.toString());
+      },
+    },
+  },
+  methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    selectFile(e: Event) {
+      this.$emit("update:upload", (e.target as HTMLInputElement).files?.[0] ?? null);
+      this.value = "set";
+    },
+    openDetailView() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/unit/inspection/UploadedFileViewModal.vue"))),
+        this.inspectionPoint
+      );
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/unit/inspection/InspectionFinishModal.vue b/src/components/admin/unit/inspection/InspectionFinishModal.vue
new file mode 100644
index 0000000..b2628e1
--- /dev/null
+++ b/src/components/admin/unit/inspection/InspectionFinishModal.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="relative w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Prüfung abschließen</p>
+    </div>
+    <br />
+    <div class="flex flex-col gap-2">
+      <p class="flex flex-row text-sm">
+        <InformationCircleIcon class="text-gray-500 h-5 w-5" /> Nach abschluss der Prüfung können keine Änderung mehr an
+        dieser vorgenommen werden. <br />
+        Es wird ein PDF ausgedruckt und ist dann zu dieser Prüfung verfügbar.
+      </p>
+      <br />
+      <div class="flex flex-row gap-2">
+        <button :disabled="status == 'loading' || status?.status == 'success'" primary @click="finishInspection">
+          Prüfung abschließen
+        </button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </div>
+    <br />
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import { InformationCircleIcon } from "@heroicons/vue/24/outline";
+import { useInspectionStore } from "@/stores/admin/unit/inspection/inspection";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: null as any,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useInspectionStore, ["finishActiveInspection"]),
+
+    finishInspection(e: any) {
+      this.status = "loading";
+      this.finishActiveInspection()
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 2100);
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/unit/inspection/InspectionPrintModal.vue b/src/components/admin/unit/inspection/InspectionPrintModal.vue
new file mode 100644
index 0000000..734ed64
--- /dev/null
+++ b/src/components/admin/unit/inspection/InspectionPrintModal.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="w-full h-full flex flex-col gap-2">
+    <Spinner v-if="status == 'loading'" />
+    <div class="grow">
+      <iframe ref="viewer" class="w-full h-full" />
+    </div>
+
+    <div class="flex flex-row gap-2 justify-end">
+      <a ref="download" button primary class="w-fit!">download</a>
+      <button primary-outline class="w-fit!" @click="closeModal">schließen</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import { useInspectionStore } from "@/stores/admin/unit/inspection/inspection";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+    };
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+    ...mapState(useInspectionStore, ["activeInspectionObj"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useInspectionStore, ["fetchInspectionPrintoutById"]),
+    fetchItem() {
+      this.status = "loading";
+      this.fetchInspectionPrintoutById()
+        .then((response) => {
+          this.status = { status: "success" };
+          const blob = new Blob([response.data], { type: "application/pdf" });
+          (this.$refs.viewer as HTMLIFrameElement).src = window.URL.createObjectURL(blob);
+
+          const fileURL = window.URL.createObjectURL(new Blob([response.data]));
+          const fileLink = this.$refs.download as HTMLAnchorElement;
+          fileLink.href = fileURL;
+          fileLink.setAttribute(
+            "download",
+            `Prüf-Ausdruck_${[this.activeInspectionObj?.related.code ?? "", this.activeInspectionObj?.related.name].join("_")}_${this.activeInspectionObj?.inspectionPlan.title}_${new Date(this.activeInspectionObj?.created ?? "").toLocaleDateString("de-de")}.pdf`
+          );
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/unit/inspection/NumberInput.vue b/src/components/admin/unit/inspection/NumberInput.vue
new file mode 100644
index 0000000..b93b720
--- /dev/null
+++ b/src/components/admin/unit/inspection/NumberInput.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>{{ inspectionPoint.title }}</p>
+    </div>
+    <div class="p-2">
+      <p v-if="inspectionPoint.description" class="pb-2">Beschreibung: {{ inspectionPoint.description }}</p>
+      <hr v-if="inspectionPoint.description" />
+      <label :for="inspectionPoint.id">
+        Zahl <small>{{ restrictedRange }}</small>
+      </label>
+      <input
+        :id="inspectionPoint.id"
+        :name="inspectionPoint.id"
+        type="number"
+        v-model="value"
+        :min="inspectionPoint.min"
+        :max="inspectionPoint.max"
+        :class="{ 'ring-red-500! ring-1!': isInRange && editable }"
+        :disabled="!editable"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import type { InspectionPointViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    inspectionPoint: {
+      type: Object as PropType<InspectionPointViewModel>,
+      required: true,
+    },
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    editable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ["update:model-value"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string | number) {
+        this.$emit("update:model-value", val.toString());
+      },
+    },
+    restrictedRange() {
+      let range = "";
+      if (this.inspectionPoint.min != null) range += `min. ${this.inspectionPoint.min}`;
+      if (this.inspectionPoint.max != null) range += ` bis max. ${this.inspectionPoint.max}`;
+      return range;
+    },
+    isInRange() {
+      if (this.inspectionPoint.min != null && this.inspectionPoint.max != null)
+        return Number(this.value) < this.inspectionPoint.min || this.inspectionPoint.max < Number(this.value);
+
+      if (this.inspectionPoint.min != null) return Number(this.value) < this.inspectionPoint.min;
+
+      if (this.inspectionPoint.max != null) return this.inspectionPoint.max < Number(this.value);
+
+      return false;
+    },
+  },
+  mounted() {
+    if (!this.value) {
+      this.value = String(this.inspectionPoint.min ?? 0);
+    }
+  },
+});
+</script>
diff --git a/src/components/admin/unit/inspection/OkNotOk.vue b/src/components/admin/unit/inspection/OkNotOk.vue
new file mode 100644
index 0000000..177ed92
--- /dev/null
+++ b/src/components/admin/unit/inspection/OkNotOk.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>{{ inspectionPoint.title }}</p>
+    </div>
+    <div class="p-2">
+      <p v-if="inspectionPoint.description" class="pb-2">Beschreibung: {{ inspectionPoint.description }}</p>
+      <hr v-if="inspectionPoint.description" />
+      <div class="flex flex-row gap-2">
+        <button
+          v-for="option in options"
+          :key="option.key"
+          :primary="value == option.key"
+          :primary-outline="value != option.key"
+          :disabled="!editable"
+          :value="option.key"
+          @click="value = option.key"
+        >
+          {{ option.title }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { RadioGroup, RadioGroupOption } from "@headlessui/vue";
+import type { InspectionPointViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    inspectionPoint: {
+      type: Object as PropType<InspectionPointViewModel>,
+      required: true,
+    },
+    modelValue: {
+      type: String as PropType<"true" | "false" | "">,
+      default: "",
+    },
+    editable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ["update:model-value"],
+  data() {
+    return {
+      options: [
+        { key: "true", title: "OK" },
+        { key: "false", title: "nicht OK" },
+      ] as Array<{ key: "true" | "false"; title: string }>,
+    };
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  mounted() {
+    if (this.value == "") this.value = "false";
+  },
+});
+</script>
diff --git a/src/components/admin/unit/inspection/TextInput.vue b/src/components/admin/unit/inspection/TextInput.vue
new file mode 100644
index 0000000..664c3d4
--- /dev/null
+++ b/src/components/admin/unit/inspection/TextInput.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>{{ inspectionPoint.title }}</p>
+    </div>
+    <div class="p-2">
+      <p v-if="inspectionPoint.description" class="pb-2">Beschreibung: {{ inspectionPoint.description }}</p>
+      <hr v-if="inspectionPoint.description" />
+      <label :for="inspectionPoint.id">Freitext</label>
+      <textarea
+        :id="inspectionPoint.id"
+        :name="inspectionPoint.id"
+        class="h-18"
+        :class="{ 'ring-red-500! ring-1!': value == '' && editable }"
+        v-model="value"
+        :disabled="!editable"
+      ></textarea>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import type { InspectionPointViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    inspectionPoint: {
+      type: Object as PropType<InspectionPointViewModel>,
+      required: true,
+    },
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    editable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ["update:model-value"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string | number) {
+        this.$emit("update:model-value", val.toString());
+      },
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/unit/inspection/UploadedFileViewModal.vue b/src/components/admin/unit/inspection/UploadedFileViewModal.vue
new file mode 100644
index 0000000..d9f1487
--- /dev/null
+++ b/src/components/admin/unit/inspection/UploadedFileViewModal.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="w-full h-full flex flex-col gap-2">
+    <Spinner v-if="status == 'loading'" />
+    <div class="grow">
+      <iframe v-if="data.others == 'pdf'" ref="viewer" class="w-full h-full" />
+      <img v-else ref="viewer" class="w-full h-full object-contain" />
+    </div>
+
+    <div class="flex flex-row gap-2 justify-end">
+      <a ref="download" button primary class="w-fit!">download</a>
+      <button primary-outline class="w-fit!" @click="closeModal">schließen</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import { useInspectionStore } from "@/stores/admin/unit/inspection/inspection";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+    };
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+    ...mapState(useInspectionStore, ["activeInspectionObj"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useInspectionStore, ["fetchUploadedFileByPointId"]),
+    fetchItem() {
+      this.status = "loading";
+      this.fetchUploadedFileByPointId(this.data.id)
+        .then((response) => {
+          this.status = { status: "success" };
+          const blob = new Blob([response.data], { type: this.data.others == "pdf" ? "application/pdf" : "image/png" });
+          (this.$refs.viewer as HTMLIFrameElement).src = window.URL.createObjectURL(blob);
+
+          const fileURL = window.URL.createObjectURL(new Blob([response.data]));
+          const fileLink = this.$refs.download as HTMLAnchorElement;
+          fileLink.href = fileURL;
+          fileLink.setAttribute(
+            "download",
+            this.data.others == "pdf" ? `${this.data.title}.pdf` : `${this.data.title}.png`
+          );
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/unit/inspectionPlan/InspectionPlanListItem.vue b/src/components/admin/unit/inspectionPlan/InspectionPlanListItem.vue
new file mode 100644
index 0000000..7d99320
--- /dev/null
+++ b/src/components/admin/unit/inspectionPlan/InspectionPlanListItem.vue
@@ -0,0 +1,37 @@
+<template>
+  <RouterLink
+    :to="{ name: 'admin-unit-inspection_plan-overview', params: { inspectionPlanId: inspectionPlan.id } }"
+    class="flex flex-col h-fit w-full border border-primary rounded-md"
+  >
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>{{ inspectionPlan.title }} - {{ inspectionPlan.related.type }}</p>
+    </div>
+    <div class="p-2">
+      <p v-if="inspectionPlan.inspectionInterval">Prüfinterval: {{ inspectionPlan.inspectionInterval }}</p>
+      <p v-if="inspectionPlan.remindTime">Erinnerung: {{ inspectionPlan.remindTime }}</p>
+      <div v-if="inspectionPlan.inspectionPoints.length == 0" class="flex flex-row gap-2 items-center">
+        <ExclamationTriangleIcon class="h-5 w-5 text-error" />
+        <p>Prüfplan noch nicht fertig gestellt. Es fehlen Prüfpunkte!</p>
+      </div>
+    </div>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+import { ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    inspectionPlan: { type: Object as PropType<InspectionPlanViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>
diff --git a/src/components/admin/unit/inspectionPlan/InspectionPointListItem.vue b/src/components/admin/unit/inspectionPlan/InspectionPointListItem.vue
new file mode 100644
index 0000000..46a359d
--- /dev/null
+++ b/src/components/admin/unit/inspectionPlan/InspectionPointListItem.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center gap-2">
+      <ClipboardDocumentCheckIcon v-if="modelValue.type == InspectionPointEnum.oknok" class="w-6 h-6" />
+      <CalculatorIcon v-else-if="modelValue.type == InspectionPointEnum.number" class="w-6 h-6" />
+      <BoldIcon v-else-if="modelValue.type == InspectionPointEnum.text" class="w-6 h-6" />
+      <DocumentIcon v-else-if="modelValue.type == InspectionPointEnum.file" class="w-6 h-6" />
+
+      <input type="text" placeholder="Titel" class="grow !w-fit" v-model="title" required />
+
+      <div class="flex flex-col">
+        <ChevronUpIcon v-if="index != 0" class="text-white w-4 h-4 stroke-2 cursor-pointer" @click="$emit('up')" />
+        <ChevronDownIcon
+          v-if="index != totalCount - 1"
+          class="text-white w-4 h-4 stroke-2 cursor-pointer"
+          @click="$emit('down')"
+        />
+      </div>
+      <TrashIcon class="h-5 w-5 cursor-pointer" @click="$emit('remove')" />
+    </div>
+    <div class="p-2">
+      <textarea name="description" placeholder="Beschreibung" v-model="description"></textarea>
+      <div v-if="modelValue.type == InspectionPointEnum.number">
+        <label for="min">Mindestens</label>
+        <input type="number" v-model="min" min="0" />
+      </div>
+      <div v-if="modelValue.type == InspectionPointEnum.number">
+        <label for="max">Maximal</label>
+        <input type="number" v-model="max" :min="Number(min ?? 0) + 1" />
+      </div>
+      <div v-if="modelValue.type == InspectionPointEnum.file">
+        <p>Dateiart</p>
+        <div class="flex flex-row gap-2">
+          <button :primary="others == 'img'" :primary-outline="others != 'img'" type="button" @click="others = 'img'">
+            Bild
+          </button>
+          <button :primary="others == 'pdf'" :primary-outline="others != 'pdf'" type="button" @click="others = 'pdf'">
+            PDF
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import type { InspectionPointViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+import { InspectionPointEnum } from "@/enums/inspectionEnum";
+import {
+  BoldIcon,
+  CalculatorIcon,
+  ClipboardDocumentCheckIcon,
+  TrashIcon,
+  ChevronUpIcon,
+  ChevronDownIcon,
+  DocumentIcon,
+} from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    index: { type: Number, default: 0 },
+    totalCount: { type: Number, default: 0 },
+    modelValue: {
+      type: Object as PropType<InspectionPointViewModel>,
+      required: true,
+    },
+  },
+  emits: ["up", "down", "remove", "update:model-value"],
+  computed: {
+    title: {
+      get() {
+        return this.modelValue.title;
+      },
+      set(val: string) {
+        this.$emit("update:model-value", { ...this.modelValue, title: val });
+      },
+    },
+    description: {
+      get() {
+        return this.modelValue.description;
+      },
+      set(val: string) {
+        this.$emit("update:model-value", { ...this.modelValue, description: val });
+      },
+    },
+    min: {
+      get() {
+        return this.modelValue.min;
+      },
+      set(val: string) {
+        this.$emit("update:model-value", { ...this.modelValue, min: String(val) == "" ? null : String(val) });
+      },
+    },
+    max: {
+      get() {
+        return this.modelValue.max;
+      },
+      set(val: string) {
+        this.$emit("update:model-value", { ...this.modelValue, max: String(val) == "" ? null : String(val) });
+      },
+    },
+    others: {
+      get() {
+        return this.modelValue.others;
+      },
+      set(val: string) {
+        this.$emit("update:model-value", { ...this.modelValue, others: val == "" ? null : val });
+      },
+    },
+  },
+  mounted() {
+    if (this.modelValue.type == InspectionPointEnum.file && !this.others) {
+      this.others = "img";
+    }
+  },
+});
+</script>
diff --git a/src/components/admin/unit/inspectionPlan/TypeInspectionPlanListItem.vue b/src/components/admin/unit/inspectionPlan/TypeInspectionPlanListItem.vue
new file mode 100644
index 0000000..73394c8
--- /dev/null
+++ b/src/components/admin/unit/inspectionPlan/TypeInspectionPlanListItem.vue
@@ -0,0 +1,35 @@
+<template>
+  <RouterLink
+    :to="{ name: 'admin-unit-inspection_plan-overview', params: { inspectionPlanId: inspectionPlan.id } }"
+    :disabled="!can('create', 'unit', 'inspection_plan')"
+    class="flex flex-col h-fit w-full border border-primary rounded-md"
+  >
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>{{ inspectionPlan.title }}</p>
+    </div>
+    <div class="p-2">
+      <p>Interval: {{ inspectionPlan.inspectionInterval }}</p>
+    </div>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+import { mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    inspectionPlan: {
+      type: Object as PropType<InspectionPlanViewModel>,
+      default: {},
+    },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>
diff --git a/src/components/admin/unit/maintenance/MaintenanceListItem.vue b/src/components/admin/unit/maintenance/MaintenanceListItem.vue
new file mode 100644
index 0000000..a838973
--- /dev/null
+++ b/src/components/admin/unit/maintenance/MaintenanceListItem.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>
+        {{ damageReport.related.name }}
+      </p>
+    </div>
+    <div class="p-2">
+      <p v-if="damageReport.related">Code: {{ damageReport.related.code }}</p>
+      <p v-if="damageReport.description">Beschreibung: {{ damageReport.description }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    damageReport: { type: Object as PropType<DamageReportViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>
diff --git a/src/components/admin/unit/repair/RepairListItem.vue b/src/components/admin/unit/repair/RepairListItem.vue
new file mode 100644
index 0000000..69986ee
--- /dev/null
+++ b/src/components/admin/unit/repair/RepairListItem.vue
@@ -0,0 +1,39 @@
+<template>
+  <RouterLink
+    :to="{ name: 'admin-unit-repair-overview', params: { repairId: repair.id } }"
+    class="flex flex-col h-fit w-full border border-primary rounded-md"
+  >
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>
+        {{ repair.title }} -
+        {{ repair?.related?.name ?? "Ohne Zuordnung" }}
+        <small v-if="repair?.related">({{ repair.related.code }})</small>
+      </p>
+    </div>
+    <div class="p-2">
+      <p>begonnen: {{ new Date(repair.createdAt).toLocaleString("de") }}</p>
+      <p>Status: {{ repair.status }}</p>
+      <p v-if="repair.responsible">Verantwortlich: {{ repair.responsible }}</p>
+      <p v-if="repair.description">Beschreibung: {{ repair.description }}</p>
+    </div>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import type { RepairViewModel } from "@/viewmodels/admin/unit/repair.models";
+import { MapPinIcon, PhotoIcon, UserIcon, WrenchScrewdriverIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    repair: { type: Object as PropType<RepairViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>
diff --git a/src/components/admin/unit/respiratoryGear/CreateRespiratoryGearModal.vue b/src/components/admin/unit/respiratoryGear/CreateRespiratoryGearModal.vue
new file mode 100644
index 0000000..c5ece71
--- /dev/null
+++ b/src/components/admin/unit/respiratoryGear/CreateRespiratoryGearModal.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Mitglied erstellen</p>
+    </div>
+    <br />
+    <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
+      <div>
+        <Listbox v-model="selectedSalutation" name="salutation" by="id">
+          <ListboxLabel>Anrede</ListboxLabel>
+          <div class="relative mt-1">
+            <ListboxButton
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+            >
+              <span class="block truncate w-full text-start"> {{ selectedSalutation?.salutation }}</span>
+              <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+              </span>
+            </ListboxButton>
+
+            <transition
+              leave-active-class="transition duration-100 ease-in"
+              leave-from-class="opacity-100"
+              leave-to-class="opacity-0"
+            >
+              <ListboxOptions
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
+              >
+                <ListboxOption
+                  v-slot="{ active, selected }"
+                  v-for="salutation in salutations"
+                  :key="salutation.id"
+                  :value="salutation"
+                  as="template"
+                >
+                  <li
+                    :class="[
+                      active ? 'bg-red-200 text-amber-900' : 'text-gray-900',
+                      'relative cursor-default select-none py-2 pl-10 pr-4',
+                    ]"
+                  >
+                    <span :class="[selected ? 'font-medium' : 'font-normal', 'block truncate']">{{
+                      salutation.salutation
+                    }}</span>
+                    <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3 text-primary">
+                      <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                    </span>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </transition>
+          </div>
+        </Listbox>
+      </div>
+      <div>
+        <label for="firstname">Vorname</label>
+        <input type="text" id="firstname" required />
+      </div>
+      <div>
+        <label for="lastname">Nachname</label>
+        <input type="text" id="lastname" required />
+      </div>
+      <div>
+        <label for="nameaffix">Nameaffix (optional)</label>
+        <input type="text" id="nameaffix" />
+      </div>
+      <div>
+        <label for="birthdate">Geburtsdatum</label>
+        <input type="date" id="birthdate" required />
+      </div>
+      <div>
+        <label for="internalId">Interne ID (optional)</label>
+        <input type="text" id="internalId" />
+      </div>
+      <div class="flex flex-row gap-2">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import { useSalutationStore } from "@/stores/admin/configuration/salutation";
+import type { SalutationViewModel } from "@/viewmodels/admin/configuration/salutation.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+      selectedSalutation: null as null | SalutationViewModel,
+    };
+  },
+  computed: {
+    ...mapState(useSalutationStore, ["salutations"]),
+  },
+  mounted() {
+    this.fetchSalutations();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useEquipmentStore, ["createEquipment"]),
+    ...mapActions(useSalutationStore, ["fetchSalutations"]),
+    triggerCreate(e: any) {
+      if (!this.selectedSalutation) return;
+      let formData = e.target.elements;
+      let createEquipment: CreateEquipmentViewModel = {
+        code: "",
+        name: "",
+        location: "",
+        equipmentTypeId: "",
+        commissioned: new Date(),
+      };
+      this.status = "loading";
+      this.createEquipment(createEquipment)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/unit/respiratoryGear/RespiratoryGearListItem.vue b/src/components/admin/unit/respiratoryGear/RespiratoryGearListItem.vue
new file mode 100644
index 0000000..7b55acf
--- /dev/null
+++ b/src/components/admin/unit/respiratoryGear/RespiratoryGearListItem.vue
@@ -0,0 +1,33 @@
+<template>
+  <RouterLink
+    :to="{ name: 'admin-unit-respiratory_gear-overview', params: { respiratoryGearId: respiratoryGear.id } }"
+    class="flex flex-col h-fit w-full border border-primary rounded-md"
+  >
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>
+        {{ respiratoryGear.equipment.name }}
+      </p>
+    </div>
+    <div class="p-2">
+      <p v-if="respiratoryGear.equipment">Code: {{ respiratoryGear.equipment.code }}</p>
+    </div>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import type { RespiratoryGearViewModel } from "@/viewmodels/admin/unit/respiratory/respiratoryGear.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    respiratoryGear: { type: Object as PropType<RespiratoryGearViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>
diff --git a/src/components/admin/unit/respiratoryMission/CreateRespiratoryMissionModal.vue b/src/components/admin/unit/respiratoryMission/CreateRespiratoryMissionModal.vue
new file mode 100644
index 0000000..c5ece71
--- /dev/null
+++ b/src/components/admin/unit/respiratoryMission/CreateRespiratoryMissionModal.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Mitglied erstellen</p>
+    </div>
+    <br />
+    <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
+      <div>
+        <Listbox v-model="selectedSalutation" name="salutation" by="id">
+          <ListboxLabel>Anrede</ListboxLabel>
+          <div class="relative mt-1">
+            <ListboxButton
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+            >
+              <span class="block truncate w-full text-start"> {{ selectedSalutation?.salutation }}</span>
+              <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+              </span>
+            </ListboxButton>
+
+            <transition
+              leave-active-class="transition duration-100 ease-in"
+              leave-from-class="opacity-100"
+              leave-to-class="opacity-0"
+            >
+              <ListboxOptions
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
+              >
+                <ListboxOption
+                  v-slot="{ active, selected }"
+                  v-for="salutation in salutations"
+                  :key="salutation.id"
+                  :value="salutation"
+                  as="template"
+                >
+                  <li
+                    :class="[
+                      active ? 'bg-red-200 text-amber-900' : 'text-gray-900',
+                      'relative cursor-default select-none py-2 pl-10 pr-4',
+                    ]"
+                  >
+                    <span :class="[selected ? 'font-medium' : 'font-normal', 'block truncate']">{{
+                      salutation.salutation
+                    }}</span>
+                    <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3 text-primary">
+                      <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                    </span>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </transition>
+          </div>
+        </Listbox>
+      </div>
+      <div>
+        <label for="firstname">Vorname</label>
+        <input type="text" id="firstname" required />
+      </div>
+      <div>
+        <label for="lastname">Nachname</label>
+        <input type="text" id="lastname" required />
+      </div>
+      <div>
+        <label for="nameaffix">Nameaffix (optional)</label>
+        <input type="text" id="nameaffix" />
+      </div>
+      <div>
+        <label for="birthdate">Geburtsdatum</label>
+        <input type="date" id="birthdate" required />
+      </div>
+      <div>
+        <label for="internalId">Interne ID (optional)</label>
+        <input type="text" id="internalId" />
+      </div>
+      <div class="flex flex-row gap-2">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import { useSalutationStore } from "@/stores/admin/configuration/salutation";
+import type { SalutationViewModel } from "@/viewmodels/admin/configuration/salutation.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+      selectedSalutation: null as null | SalutationViewModel,
+    };
+  },
+  computed: {
+    ...mapState(useSalutationStore, ["salutations"]),
+  },
+  mounted() {
+    this.fetchSalutations();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useEquipmentStore, ["createEquipment"]),
+    ...mapActions(useSalutationStore, ["fetchSalutations"]),
+    triggerCreate(e: any) {
+      if (!this.selectedSalutation) return;
+      let formData = e.target.elements;
+      let createEquipment: CreateEquipmentViewModel = {
+        code: "",
+        name: "",
+        location: "",
+        equipmentTypeId: "",
+        commissioned: new Date(),
+      };
+      this.status = "loading";
+      this.createEquipment(createEquipment)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/unit/respiratoryMission/RespiratoryMissionListItem.vue b/src/components/admin/unit/respiratoryMission/RespiratoryMissionListItem.vue
new file mode 100644
index 0000000..913b132
--- /dev/null
+++ b/src/components/admin/unit/respiratoryMission/RespiratoryMissionListItem.vue
@@ -0,0 +1,31 @@
+<template>
+  <RouterLink
+    :to="{ name: 'admin-unit-respiratory_mission-overview', params: { respiratoryMissionId: respiratoryMission.id } }"
+    class="flex flex-col h-fit w-full border border-primary rounded-md"
+  >
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>{{ respiratoryMission.title }} - {{ respiratoryMission.date }}</p>
+    </div>
+    <div class="p-2">
+      <p v-if="respiratoryMission.description">{{ respiratoryMission.description }}</p>
+    </div>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import type { RespiratoryMissionViewModel } from "@/viewmodels/admin/unit/respiratory/respiratoryMission.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    respiratoryMission: { type: Object as PropType<RespiratoryMissionViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>
diff --git a/src/components/admin/unit/respiratoryWearer/CreateRespiratoryWearerModal.vue b/src/components/admin/unit/respiratoryWearer/CreateRespiratoryWearerModal.vue
new file mode 100644
index 0000000..c5ece71
--- /dev/null
+++ b/src/components/admin/unit/respiratoryWearer/CreateRespiratoryWearerModal.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Mitglied erstellen</p>
+    </div>
+    <br />
+    <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
+      <div>
+        <Listbox v-model="selectedSalutation" name="salutation" by="id">
+          <ListboxLabel>Anrede</ListboxLabel>
+          <div class="relative mt-1">
+            <ListboxButton
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+            >
+              <span class="block truncate w-full text-start"> {{ selectedSalutation?.salutation }}</span>
+              <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+              </span>
+            </ListboxButton>
+
+            <transition
+              leave-active-class="transition duration-100 ease-in"
+              leave-from-class="opacity-100"
+              leave-to-class="opacity-0"
+            >
+              <ListboxOptions
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
+              >
+                <ListboxOption
+                  v-slot="{ active, selected }"
+                  v-for="salutation in salutations"
+                  :key="salutation.id"
+                  :value="salutation"
+                  as="template"
+                >
+                  <li
+                    :class="[
+                      active ? 'bg-red-200 text-amber-900' : 'text-gray-900',
+                      'relative cursor-default select-none py-2 pl-10 pr-4',
+                    ]"
+                  >
+                    <span :class="[selected ? 'font-medium' : 'font-normal', 'block truncate']">{{
+                      salutation.salutation
+                    }}</span>
+                    <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3 text-primary">
+                      <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                    </span>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </transition>
+          </div>
+        </Listbox>
+      </div>
+      <div>
+        <label for="firstname">Vorname</label>
+        <input type="text" id="firstname" required />
+      </div>
+      <div>
+        <label for="lastname">Nachname</label>
+        <input type="text" id="lastname" required />
+      </div>
+      <div>
+        <label for="nameaffix">Nameaffix (optional)</label>
+        <input type="text" id="nameaffix" />
+      </div>
+      <div>
+        <label for="birthdate">Geburtsdatum</label>
+        <input type="date" id="birthdate" required />
+      </div>
+      <div>
+        <label for="internalId">Interne ID (optional)</label>
+        <input type="text" id="internalId" />
+      </div>
+      <div class="flex flex-row gap-2">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import { useSalutationStore } from "@/stores/admin/configuration/salutation";
+import type { SalutationViewModel } from "@/viewmodels/admin/configuration/salutation.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+      selectedSalutation: null as null | SalutationViewModel,
+    };
+  },
+  computed: {
+    ...mapState(useSalutationStore, ["salutations"]),
+  },
+  mounted() {
+    this.fetchSalutations();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useEquipmentStore, ["createEquipment"]),
+    ...mapActions(useSalutationStore, ["fetchSalutations"]),
+    triggerCreate(e: any) {
+      if (!this.selectedSalutation) return;
+      let formData = e.target.elements;
+      let createEquipment: CreateEquipmentViewModel = {
+        code: "",
+        name: "",
+        location: "",
+        equipmentTypeId: "",
+        commissioned: new Date(),
+      };
+      this.status = "loading";
+      this.createEquipment(createEquipment)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/unit/respiratoryWearer/RespiratoryWearerListItem.vue b/src/components/admin/unit/respiratoryWearer/RespiratoryWearerListItem.vue
new file mode 100644
index 0000000..291237e
--- /dev/null
+++ b/src/components/admin/unit/respiratoryWearer/RespiratoryWearerListItem.vue
@@ -0,0 +1,34 @@
+<template>
+  <RouterLink
+    :to="{ name: 'admin-unit-respiratory_wearer-overview', params: { respiratoryWearerId: respiratoryWearer.id } }"
+    class="flex flex-col h-fit w-full border border-primary rounded-md"
+  >
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>
+        {{ respiratoryWearer.member.lastname }}, {{ respiratoryWearer.member.firstname }}
+        {{ respiratoryWearer.member.nameaffix ? `- ${respiratoryWearer.member.nameaffix}` : "" }}
+      </p>
+    </div>
+    <div class="p-2">
+      <p v-if="respiratoryWearer.member.internalId">ID: {{ respiratoryWearer.member.internalId }}</p>
+    </div>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import type { RespiratoryWearerViewModel } from "@/viewmodels/admin/unit/respiratory/respiratoryWearer.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    respiratoryWearer: { type: Object as PropType<RespiratoryWearerViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>
diff --git a/src/components/admin/unit/vehicle/VehicleListItem.vue b/src/components/admin/unit/vehicle/VehicleListItem.vue
new file mode 100644
index 0000000..c4a9254
--- /dev/null
+++ b/src/components/admin/unit/vehicle/VehicleListItem.vue
@@ -0,0 +1,31 @@
+<template>
+  <RouterLink
+    :to="{ name: 'admin-unit-vehicle-overview', params: { vehicleId: vehicle.id } }"
+    class="flex flex-col h-fit w-full border border-primary rounded-md"
+  >
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>{{ vehicle.name }}</p>
+    </div>
+    <div class="p-2">
+      <p v-if="vehicle.code">Code: {{ vehicle.code }}</p>
+    </div>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import type { VehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    vehicle: { type: Object as PropType<VehicleViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>
diff --git a/src/components/admin/unit/vehicleType/CreateVehicleTypeModal.vue b/src/components/admin/unit/vehicleType/CreateVehicleTypeModal.vue
new file mode 100644
index 0000000..b7a570e
--- /dev/null
+++ b/src/components/admin/unit/vehicleType/CreateVehicleTypeModal.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Typ erstellen</p>
+    </div>
+    <br />
+    <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
+      <div>
+        <label for="type">Typ</label>
+        <input type="text" id="type" required />
+      </div>
+      <div>
+        <label for="description">Beschreibung (optional)</label>
+        <textarea id="description" class="h-18"></textarea>
+      </div>
+
+      <div class="flex flex-row gap-2">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
+import type { CreateVehicleTypeViewModel } from "@/viewmodels/admin/unit/vehicle/vehicleType.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useVehicleTypeStore, ["createVehicleType"]),
+    triggerCreate(e: any) {
+      let formData = e.target.elements;
+      let createVehicleType: CreateVehicleTypeViewModel = {
+        type: formData.type.value,
+        description: formData.description.value,
+      };
+      this.status = "loading";
+      this.createVehicleType(createVehicleType)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/unit/vehicleType/DeleteVehicleTypeModal.vue b/src/components/admin/unit/vehicleType/DeleteVehicleTypeModal.vue
new file mode 100644
index 0000000..25217eb
--- /dev/null
+++ b/src/components/admin/unit/vehicleType/DeleteVehicleTypeModal.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Ausrüstung-Type löschen</p>
+    </div>
+    <br />
+    <p class="text-center">Type {{ vehicleType?.type }} löschen?</p>
+    <br />
+
+    <div class="flex flex-row gap-2">
+      <button
+        primary
+        type="submit"
+        :disabled="status == 'loading' || status?.status == 'success'"
+        @click="triggerDelete"
+      >
+        löschen
+      </button>
+      <Spinner v-if="status == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="status?.status == 'success'" />
+      <FailureXMark v-else-if="status?.status == 'failed'" />
+    </div>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+    ...mapState(useVehicleTypeStore, ["vehicleTypes"]),
+    vehicleType() {
+      return this.vehicleTypes.find((m) => m.id == this.data);
+    },
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useVehicleTypeStore, ["deleteVehicleType"]),
+    triggerDelete() {
+      this.status = "loading";
+      this.deleteVehicleType(this.data)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.$router.push({ name: "admin-unit-vehicle_type" });
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/unit/vehicleType/VehicleTypeListItem.vue b/src/components/admin/unit/vehicleType/VehicleTypeListItem.vue
new file mode 100644
index 0000000..c3658b8
--- /dev/null
+++ b/src/components/admin/unit/vehicleType/VehicleTypeListItem.vue
@@ -0,0 +1,40 @@
+<template>
+  <RouterLink
+    :to="{ name: 'admin-unit-vehicle_type-overview', params: { vehicleTypeId: vehicleType.id } }"
+    class="flex flex-col h-fit w-full border border-primary rounded-md"
+  >
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>
+        {{ vehicleType.type }}
+      </p>
+    </div>
+    <div class="flex flex-col p-2">
+      <div class="flex flex-row gap-2">
+        <p class="min-w-16">Anzahl angelegter Fahrzeuge:</p>
+        <p class="grow overflow-hidden">{{ vehicleType.vehicleCount }}</p>
+      </div>
+      <div v-if="vehicleType.description" class="flex flex-row gap-2">
+        <p class="min-w-16">Beschreibung:</p>
+        <p class="grow overflow-hidden">{{ vehicleType.description }}</p>
+      </div>
+    </div>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import type { VehicleTypeViewModel } from "@/viewmodels/admin/unit/vehicle/vehicleType.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    vehicleType: { type: Object as PropType<VehicleTypeViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>
diff --git a/src/components/admin/unit/wearable/WearableListItem.vue b/src/components/admin/unit/wearable/WearableListItem.vue
new file mode 100644
index 0000000..6358323
--- /dev/null
+++ b/src/components/admin/unit/wearable/WearableListItem.vue
@@ -0,0 +1,33 @@
+<template>
+  <RouterLink
+    :to="{ name: 'admin-unit-wearable-overview', params: { wearableId: wearable.id } }"
+    class="flex flex-col h-fit w-full border border-primary rounded-md"
+  >
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>
+        {{ wearable.name }}
+      </p>
+    </div>
+    <div class="p-2">
+      <p v-if="wearable.code">Code: {{ wearable.code }}</p>
+    </div>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import type { WearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    wearable: { type: Object as PropType<WearableViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>
diff --git a/src/components/admin/unit/wearableType/CreateWearableTypeModal.vue b/src/components/admin/unit/wearableType/CreateWearableTypeModal.vue
new file mode 100644
index 0000000..b7df9d0
--- /dev/null
+++ b/src/components/admin/unit/wearableType/CreateWearableTypeModal.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Typ erstellen</p>
+    </div>
+    <br />
+    <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
+      <div>
+        <label for="type">Typ</label>
+        <input type="text" id="type" required />
+      </div>
+      <div>
+        <label for="description">Beschreibung (optional)</label>
+        <textarea id="description" class="h-18"></textarea>
+      </div>
+
+      <div class="flex flex-row gap-2">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
+import type { CreateWearableTypeViewModel } from "@/viewmodels/admin/unit/wearable/wearableType.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useWearableTypeStore, ["createWearableType"]),
+    triggerCreate(e: any) {
+      let formData = e.target.elements;
+      let createWearableType: CreateWearableTypeViewModel = {
+        type: formData.type.value,
+        description: formData.description.value,
+      };
+      this.status = "loading";
+      this.createWearableType(createWearableType)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/unit/wearableType/DeleteWearableTypeModal.vue b/src/components/admin/unit/wearableType/DeleteWearableTypeModal.vue
new file mode 100644
index 0000000..d54d099
--- /dev/null
+++ b/src/components/admin/unit/wearableType/DeleteWearableTypeModal.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Ausrüstung-Type löschen</p>
+    </div>
+    <br />
+    <p class="text-center">Type {{ wearableType?.type }} löschen?</p>
+    <br />
+
+    <div class="flex flex-row gap-2">
+      <button
+        primary
+        type="submit"
+        :disabled="status == 'loading' || status?.status == 'success'"
+        @click="triggerDelete"
+      >
+        löschen
+      </button>
+      <Spinner v-if="status == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="status?.status == 'success'" />
+      <FailureXMark v-else-if="status?.status == 'failed'" />
+    </div>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
+import type { CreateWearableTypeViewModel } from "@/viewmodels/admin/unit/wearable/wearableType.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+    ...mapState(useWearableTypeStore, ["wearableTypes"]),
+    wearableType() {
+      return this.wearableTypes.find((m) => m.id == this.data);
+    },
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useWearableTypeStore, ["deleteWearableType"]),
+    triggerDelete() {
+      this.status = "loading";
+      this.deleteWearableType(this.data)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.$router.push({ name: "admin-unit-wearable_type" });
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/unit/wearableType/WearableTypeListItem.vue b/src/components/admin/unit/wearableType/WearableTypeListItem.vue
new file mode 100644
index 0000000..3b9d0ed
--- /dev/null
+++ b/src/components/admin/unit/wearableType/WearableTypeListItem.vue
@@ -0,0 +1,51 @@
+<template>
+  <RouterLink
+    :to="{ name: 'admin-unit-wearable_type-overview', params: { wearableTypeId: wearableType.id } }"
+    class="flex flex-col h-fit w-full border border-primary rounded-md"
+  >
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>
+        {{ wearableType.type }}
+      </p>
+    </div>
+    <div class="flex flex-col p-2">
+      <div class="flex flex-row gap-2">
+        <p class="min-w-16">Anzahl angelegter Kleidung:</p>
+        <p class="grow overflow-hidden">{{ wearableType.wearableCount }}</p>
+      </div>
+      <div v-if="wearableType.description" class="flex flex-row gap-2">
+        <p class="min-w-16">Beschreibung:</p>
+        <p class="grow overflow-hidden">{{ wearableType.description }}</p>
+      </div>
+    </div>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { useAbilityStore } from "@/stores/ability";
+import type { WearableTypeViewModel } from "@/viewmodels/admin/unit/wearable/wearableType.models";
+import { useModalStore } from "@/stores/modal";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    wearableType: { type: Object as PropType<WearableTypeViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    openDeleteModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/unit/wearableType/DeleteWearableTypeModal.vue"))),
+        this.wearableType.id
+      );
+    },
+  },
+});
+</script>
diff --git a/src/components/public/damageReport/CheckEntry.vue b/src/components/public/damageReport/CheckEntry.vue
new file mode 100644
index 0000000..a187a32
--- /dev/null
+++ b/src/components/public/damageReport/CheckEntry.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <p class="text-primary cursor-pointer" @click="$emit('stepBack')">zurück</p>
+    <div class="flex flex-col gap-2">
+      <p class="mx-auto">Eingaben prüfen</p>
+      <div v-if="check.gear" class="rounded-md p-2 box-border border-2 font-medium border-primary text-black">
+        <p>
+          {{ check.gear.name }} <small>({{ check.gear.code }})</small>
+        </p>
+        <p>Typ: {{ check.gear.type }}</p>
+      </div>
+      <div>
+        <label for="title">Kurzbeschreibung (Titel)</label>
+        <input id="title" type="text" readonly :value="check.title" />
+      </div>
+      <div>
+        <label for="description">Beschreibung des Schadens</label>
+        <textarea id="description" readonly :value="check.description"></textarea>
+      </div>
+      <div>
+        <label for="location">Fundort (optional)</label>
+        <textarea id="location" readonly :value="check.location"></textarea>
+      </div>
+      <div>
+        <label for="note">Anmerkung für Bearbeiter (optional)</label>
+        <textarea id="note" readonly :value="check.note"></textarea>
+      </div>
+      <div>
+        <label for="reportedBy">Gemeldet von (optional)</label>
+        <input id="reportedBy" type="text" readonly :value="check.reportedBy" />
+      </div>
+      <div>
+        <label for="image">Bild (optional)</label>
+        <img ref="vis" class="mt-2 max-h-36 mx-auto" />
+      </div>
+    </div>
+
+    <div class="flex flex-row gap-2">
+      <button primary :disabled="status == 'loading' || status == 'success'" @click="submit">
+        Schadensmeldung absenden
+      </button>
+      <Spinner v-if="status == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="status == 'success'" />
+      <FailureXMark v-else-if="status == 'failed'" />
+    </div>
+    <p v-if="message" class="text-center">{{ message }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import type { MinifiedEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import type { MinifiedVehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
+import type { MinifiedWearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    check: {
+      type: Object as PropType<{
+        gear: undefined | MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel;
+        title: string;
+        description: string;
+        location: string;
+        note: string;
+        reportedBy: string;
+        image: undefined | File;
+      }>,
+      required: true,
+    },
+  },
+  emits: {
+    nextStep: (s: string) => true,
+    stepBack: () => true,
+  },
+  data() {
+    return {
+      status: undefined as undefined | "loading" | "success" | "failed",
+      message: "" as string,
+    };
+  },
+  mounted() {
+    if (this.check.image) {
+      this.setImage(this.check.image);
+    }
+  },
+  methods: {
+    setImage(img: File) {
+      let image = this.$refs.vis as HTMLImageElement;
+
+      const reader = new FileReader();
+      reader.onload = function (e) {
+        image.src = e.target?.result as string;
+      };
+      reader.readAsDataURL(img);
+    },
+    submit() {
+      this.status = "loading";
+      this.message = "";
+      const formData = new FormData();
+      if (this.check.gear) formData.append("related", JSON.stringify(this.check.gear));
+      formData.append("title", this.check.title);
+      formData.append("description", this.check.description);
+      formData.append("location", this.check.location);
+      formData.append("note", this.check.note);
+      formData.append("reportedBy", this.check.reportedBy);
+      if (this.check.image) formData.append("images", this.check.image);
+
+      this.$http
+        .post("/public/reportdamage", formData, {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        })
+        .then((res) => {
+          this.status = "success";
+          setTimeout(() => {
+            this.$emit("nextStep", "result");
+          }, 2000);
+        })
+        .catch((err) => {
+          this.status = "failed";
+          this.message = err.message;
+        });
+    },
+  },
+});
+</script>
diff --git a/src/components/public/damageReport/InputData.vue b/src/components/public/damageReport/InputData.vue
new file mode 100644
index 0000000..20a35ee
--- /dev/null
+++ b/src/components/public/damageReport/InputData.vue
@@ -0,0 +1,103 @@
+<template>
+  <form class="flex flex-col gap-2" @submit.prevent="setup">
+    <p class="text-primary cursor-pointer" @click="$emit('stepBack')">zurück</p>
+    <div class="flex flex-col gap-2">
+      <div>
+        <label for="title">Kurzbeschreibung (Titel)</label>
+        <input id="title" type="text" required :value="data.title" />
+      </div>
+      <div>
+        <label for="description">Beschreibung des Schadens</label>
+        <textarea id="description" required :value="data.description"></textarea>
+      </div>
+      <div>
+        <label for="location">Fundort (optional)</label>
+        <textarea id="location" :value="data.location"></textarea>
+      </div>
+      <div>
+        <label for="note">Anmerkung für Bearbeiter (optional)</label>
+        <textarea id="note" :value="data.note"></textarea>
+      </div>
+      <div>
+        <label for="reportedBy">Gemeldet von (optional)</label>
+        <input id="reportedBy" type="text" placeholder="dein Name" :value="data.reportedBy" />
+      </div>
+      <div>
+        <label for="image">Bild (optional)</label>
+        <input id="image" type="file" accept="image/*" @change="(e: any) => setImage(e.target.files[0])" />
+        <img ref="vis" class="mt-2 max-h-36 mx-auto" />
+      </div>
+    </div>
+    <button type="submit" primary>weiter</button>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import ScanInput from "@/components/scanner/ScanInput.vue";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import type { MinifiedEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import type { MinifiedVehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
+import type { MinifiedWearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    data: {
+      type: Object as PropType<{
+        gear: undefined | MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel;
+        title: string;
+        description: string;
+        location: string;
+        note: string;
+        reportedBy: string;
+        image: undefined | File;
+      }>,
+      required: true,
+    },
+  },
+  emits: {
+    nextStep: (s: string) => true,
+    stepBack: () => true,
+    data: (d: {
+      title: string;
+      description: string;
+      location: string;
+      note: string;
+      reportedBy: string;
+      image?: File;
+    }) => true,
+  },
+  mounted() {
+    if (this.data.image) {
+      this.setImage(this.data.image);
+    }
+  },
+  methods: {
+    setup(e: any) {
+      let formData = e.target.elements;
+      this.$emit("data", {
+        title: formData.title.value,
+        description: formData.description.value,
+        location: formData.location.value,
+        note: formData.note.value,
+        reportedBy: formData.reportedBy.value,
+        image: formData.image.files[0],
+      });
+      this.$emit("nextStep", "check");
+    },
+    setImage(img: File) {
+      let image = this.$refs.vis as HTMLImageElement;
+
+      const reader = new FileReader();
+      reader.onload = function (e) {
+        image.src = e.target?.result as string;
+      };
+      reader.readAsDataURL(img);
+    },
+  },
+});
+</script>
diff --git a/src/components/public/damageReport/Result.vue b/src/components/public/damageReport/Result.vue
new file mode 100644
index 0000000..0263d76
--- /dev/null
+++ b/src/components/public/damageReport/Result.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <h1 class="font-medium text-center">Schadensmeldung eingereicht</h1>
+    <br />
+    <p>
+      Deine Schadensmeldung wurde erfolgreich übermittelt.
+      <br />
+      Die Verwantwortlichen werden benachtichtigt.
+      <br />
+      Du kannst diese Seite jetzt schließen.
+    </p>
+    <br />
+
+    <p class="text-primary cursor-pointer self-end" @click="$emit('start')">neue Meldung einreichen</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  emits: {
+    start: () => true,
+  },
+});
+</script>
diff --git a/src/components/public/damageReport/SelectGear.vue b/src/components/public/damageReport/SelectGear.vue
new file mode 100644
index 0000000..129c101
--- /dev/null
+++ b/src/components/public/damageReport/SelectGear.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <p class="text-primary cursor-pointer" @click="$emit('stepBack')">zurück</p>
+
+    <Scanner v-if="!scanned" useInput @code="checkCode" />
+
+    <div v-if="scanned" class="contents">
+      <div class="flex flex-col gap-2 h-80 overflow-y-scroll pr-2">
+        <div v-if="status != undefined" class="flex flex-row gap-2 h-7 w-7 mx-auto">
+          <p>Suche</p>
+          <Spinner v-if="status == 'loading'" class="my-auto" />
+          <SuccessCheckmark v-else-if="status == 'success'" />
+          <FailureXMark v-else-if="status == 'failed'" />
+        </div>
+        <p v-else-if="available.length == 0" class="mx-auto">nichts gefunden</p>
+        <div
+          v-for="item in available"
+          :key="item.id"
+          class="rounded-md p-2 cursor-pointer box-border border-2 font-medium"
+          :class="
+            item.type == selected?.type && item.id == selected.id
+              ? 'bg-primary text-white border-transparent hover:bg-accent'
+              : 'border-primary text-black hover:bg-primary hover:text-white'
+          "
+          @click="selected = item"
+        >
+          <p>
+            {{ item.name }} <small>({{ item.code }})</small>
+          </p>
+          <p>Typ: {{ item.type }}</p>
+        </div>
+      </div>
+      <button
+        v-if="selected != undefined"
+        primary
+        :disabled="status == 'loading'"
+        @click="
+          $emit('data', selected);
+          $emit('nextStep', 'input');
+        "
+      >
+        mit ausgewähltem fortfahren
+      </button>
+      <button
+        primary-outline
+        :disabled="status == 'loading'"
+        @click="
+          scanned = false;
+          code = '';
+        "
+      >
+        neu Scannen
+      </button>
+    </div>
+    <p v-if="message" class="text-center">{{ message }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import ScanInput from "@/components/scanner/ScanInput.vue";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import Scanner from "@/components/scanner/Scanner.vue";
+import type { MinifiedEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import type { MinifiedVehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
+import type { MinifiedWearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  emits: {
+    nextStep: (s: string) => true,
+    stepBack: () => true,
+    data: (gear: MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel) => true,
+  },
+  data() {
+    return {
+      code: "" as string,
+      status: undefined as undefined | "loading" | "success" | "failed",
+      message: "" as string,
+      available: [] as Array<MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel>,
+      selected: undefined as
+        | undefined
+        | MinifiedEquipmentViewModel
+        | MinifiedVehicleViewModel
+        | MinifiedWearableViewModel,
+      scanned: false as boolean,
+    };
+  },
+  methods: {
+    checkCode(c: string) {
+      this.available = [];
+      this.selected = undefined;
+      this.scanned = true;
+      this.status = "loading";
+      this.code = c;
+      this.$http
+        .get(`/public/reportdamage?code=${this.code}`)
+        .then((res) => {
+          this.available = res.data;
+          this.status = "success";
+        })
+        .catch((err) => {
+          this.status = "failed";
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.status = undefined;
+          }, 1500);
+        });
+    },
+  },
+});
+</script>
diff --git a/src/components/public/damageReport/Start.vue b/src/components/public/damageReport/Start.vue
new file mode 100644
index 0000000..cbb4d75
--- /dev/null
+++ b/src/components/public/damageReport/Start.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <br />
+    <button primary @click="$emit('nextStep', 'select')">Barcode verwenden</button>
+    <button primary-outline @click="$emit('nextStep', 'input')">ohne Barcode fortfahren</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  emits: {
+    nextStep: (s: string) => true,
+  },
+});
+</script>
diff --git a/src/components/scanner/ManageScanModal.vue b/src/components/scanner/ManageScanModal.vue
new file mode 100644
index 0000000..8c73f0a
--- /dev/null
+++ b/src/components/scanner/ManageScanModal.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <XMarkIcon class="ml-auto mb-2 w-5 h-5 cursor-pointer" @click="closeModal" />
+    <div class="w-full flex flex-row justify-center items-stretch" :class="{ 'max-md:hidden': activeTab == 'self' }">
+      <div v-for="tab in tabs" :key="tab.type" class="w-1/2 p-0.5 first:pl-0 last:pr-0" @click="activeTab = tab.type">
+        <p
+          :class="[
+            'flex w-full h-full items-center justify-center rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
+            activeTab == tab.type
+              ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none'
+              : ' hover:bg-red-200',
+          ]"
+        >
+          {{ tab.title }}
+        </p>
+      </div>
+    </div>
+    <Scanner v-if="activeTab == 'self'" @code="(c) => commit(c)" />
+    <Phone v-else @code="(c) => commit(c)" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import { XMarkIcon } from "@heroicons/vue/24/outline";
+import Scanner from "./Scanner.vue";
+import Phone from "./Phone.vue";
+import { useScannerStore } from "@/stores/admin/scanner";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    callback: {
+      type: Function,
+      default: (result: string) => {},
+    },
+  },
+  data() {
+    return {
+      activeTab: "self" as "self" | "phone",
+      tabs: [
+        { type: "self", title: "Scanner" },
+        { type: "phone", title: "Smartphone" },
+      ] as Array<{ type: "self" | "phone"; title: string }>,
+    };
+  },
+  computed: {
+    ...mapState(useScannerStore, ["inUse"]),
+  },
+  mounted() {
+    if (this.inUse) this.activeTab = "phone";
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    commit(code: string) {
+      this.callback(code);
+      this.closeModal();
+    },
+  },
+});
+</script>
diff --git a/src/components/scanner/Phone.vue b/src/components/scanner/Phone.vue
new file mode 100644
index 0000000..10a3cb2
--- /dev/null
+++ b/src/components/scanner/Phone.vue
@@ -0,0 +1,91 @@
+<template>
+  <div v-if="!inUse" class="relative flex flex-col w-full h-[455px] overflow-hidden">
+    <br />
+    <button primary @click="startSession">Smartphone als Scanner verwenden</button>
+  </div>
+  <div v-else class="relative flex flex-col w-full h-[455px] overflow-hidden">
+    <br />
+
+    <div class="grow flex flex-col gap-2 overflow-y-scroll pr-2">
+      <div
+        v-for="i in results"
+        :key="i"
+        class="h-10 w-full flex justify-center items-center gap-2 py-2 px-4 text-sm font-medium rounded-md text-white bg-primary"
+      >
+        <p class="grow">{{ i }}</p>
+        <TrashIcon class="w-5 h-5 cursor-pointer" @click="() => removeElementFromResults(i)" />
+        <ArrowRightIcon class="w-5 h-5 cursor-pointer" @click="commit(i)" />
+      </div>
+      <p v-if="results.length == 0">Bisher keine Scan-Ergebnisse vorhanden.</p>
+    </div>
+    <br />
+    <RouterLink :to="{ name: 'public-scanner-select' }" target="_blank" class="text-primary"
+      >Link zur Scanoberfläche:</RouterLink
+    >
+    <div class="flex flex-row gap-4 items-center">
+      <TextCopy :copyText="roomId" />
+      <QrCodeIcon class="h-7 w-7 cursor-pointer" @click="showQRCode = true" />
+    </div>
+
+    <div v-show="showQRCode" class="absolute w-full h-full flex items-center justify-center bg-white/95 p-2">
+      <img ref="qr" />
+      <QrCodeIcon class="absolute bottom-1 right-0 h-7 w-7 cursor-pointer" @click="showQRCode = false" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useScannerStore } from "@/stores/admin/scanner";
+import { ArrowRightIcon, QrCodeIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import TextCopy from "../TextCopy.vue";
+import QRCode from "qrcode";
+import { RouterLink } from "vue-router";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  emits: ["code"],
+  data() {
+    return {
+      showQRCode: false as boolean,
+    };
+  },
+  watch: {
+    linkToScan() {
+      this.renderQRCode();
+    },
+  },
+  computed: {
+    ...mapState(useScannerStore, ["inUse", "roomId", "results"]),
+    linkToScan() {
+      return `${window.location.origin}/public/scanner/${this.roomId}`;
+    },
+  },
+  mounted() {
+    this.renderQRCode();
+  },
+  methods: {
+    ...mapActions(useScannerStore, ["startSession", "endSession", "removeElementFromResults"]),
+    commit(c: string) {
+      this.$emit("code", c);
+    },
+    renderQRCode() {
+      QRCode.toDataURL(this.linkToScan, {
+        width: 300,
+        margin: 2,
+        color: {
+          dark: "#000000",
+          light: "#FFFFFF",
+        },
+        errorCorrectionLevel: "M",
+      })
+        .then((res) => {
+          (this.$refs.qr as HTMLImageElement).src = res;
+        })
+        .catch((err) => {});
+    },
+  },
+});
+</script>
diff --git a/src/components/scanner/ScanInput.vue b/src/components/scanner/ScanInput.vue
new file mode 100644
index 0000000..83637e9
--- /dev/null
+++ b/src/components/scanner/ScanInput.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <label :for="name">{{ label }}{{ required ? "" : " (optional)" }}</label>
+    <div class="relative flex flex-row items-center gap-2">
+      <input ref="resultInput" class="pl-9!" :id="name" type="text" v-model="value" :required="required" />
+      <QrCodeIcon class="absolute h-6 stroke-1 left-2 top-1/2 -translate-y-1/2 cursor-pointer z-10" @click="scanCode" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, markRaw, defineAsyncComponent } from "vue";
+import { QrCodeIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "@/stores/modal";
+import { mapActions } from "pinia";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    label: String,
+    name: String,
+    required: {
+      type: Boolean,
+      default: true,
+    },
+    modelValue: {
+      type: String,
+      default: "",
+      required: false,
+    },
+  },
+  emits: ["update:model-value"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: String) {
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    scanCode() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/scanner/ManageScanModal.vue"))),
+        "codeScanInput",
+        (result: string) => {
+          (this.$refs.resultInput as HTMLInputElement).value = result;
+        }
+      );
+    },
+  },
+});
+</script>
diff --git a/src/components/scanner/ScanQRCodeModal.vue b/src/components/scanner/ScanQRCodeModal.vue
new file mode 100644
index 0000000..864136f
--- /dev/null
+++ b/src/components/scanner/ScanQRCodeModal.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="flex flex-col items-center w-full md:max-w-md">
+    <div class="w-full flex flex-row items-center justify-between">
+      <p>Link zur Scanoberfläche</p>
+      <XMarkIcon class="w-5 h-5 cursor-pointer" @click="closeModal" />
+    </div>
+
+    <br />
+    <img ref="qr" />
+    <TextCopy :copyText="roomId" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useScannerStore } from "@/stores/admin/scanner";
+import { XMarkIcon } from "@heroicons/vue/24/outline";
+import TextCopy from "../TextCopy.vue";
+import QRCode from "qrcode";
+import { useModalStore } from "@/stores/modal";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useScannerStore, ["roomId"]),
+    linkToScan() {
+      return `${window.location.origin}/public/scanner/${this.roomId}`;
+    },
+  },
+  mounted() {
+    QRCode.toDataURL(this.linkToScan, {
+      width: 300,
+      margin: 2,
+      color: {
+        dark: "#000000",
+        light: "#FFFFFF",
+      },
+      errorCorrectionLevel: "M",
+    })
+      .then((res) => {
+        (this.$refs.qr as HTMLImageElement).src = res;
+      })
+      .catch(() => {});
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+  },
+});
+</script>
diff --git a/src/components/scanner/ScanResultsModal.vue b/src/components/scanner/ScanResultsModal.vue
new file mode 100644
index 0000000..3e90b9b
--- /dev/null
+++ b/src/components/scanner/ScanResultsModal.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="flex flex-col items-center w-full md:max-w-md h-[455px] overflow-hidden">
+    <div class="w-full flex flex-row items-center justify-between">
+      <p>Scan-Ergebnisse</p>
+      <XMarkIcon class="w-5 h-5 cursor-pointer" @click="closeModal" />
+    </div>
+
+    <br />
+    <div class="w-full grow flex flex-col gap-2 overflow-y-scroll pr-2">
+      <div
+        v-for="i in results"
+        :key="i"
+        class="h-10 w-full flex justify-center items-center gap-2 py-2 px-4 text-sm font-medium rounded-md text-white bg-primary"
+      >
+        <p class="grow select-text">{{ i }}</p>
+        <TrashIcon class="w-5 h-5 cursor-pointer" @click="() => removeElementFromResults(i)" />
+      </div>
+      <p v-if="results.length == 0">Bisher keine Scan-Ergebnisse vorhanden.</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useScannerStore } from "@/stores/admin/scanner";
+import { TrashIcon, XMarkIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "@/stores/modal";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useScannerStore, ["results"]),
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useScannerStore, ["removeElementFromResults"]),
+  },
+});
+</script>
diff --git a/src/components/scanner/ScanSidebarInfo.vue b/src/components/scanner/ScanSidebarInfo.vue
new file mode 100644
index 0000000..46fd6dd
--- /dev/null
+++ b/src/components/scanner/ScanSidebarInfo.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="w-full h-fit min-h-fit flex flex-row gap-2 bg-white rounded-lg items-center overflow-hidden p-4">
+    <LinkSlashIcon v-if="connectedDevices == 0" class="w-5 h-5" />
+    <LinkIcon v-else class="w-5 h-5" />
+    <p class="grow">Externer Scanner aktiviert</p>
+    <div title="Link zur Scan-Ansicht" @click="showQRCode">
+      <QrCodeIcon class="w-6 h-6 cursor-pointer" />
+    </div>
+    <div title="Scan-Ergebnisse anzeigen" @click="showResults">
+      <RectangleStackIcon class="w-6 h-6 cursor-pointer" />
+    </div>
+    <div title="Scan-Verbindung beenden" @click="endSession">
+      <NoSymbolIcon class="w-6 h-6 cursor-pointer" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useScannerStore } from "@/stores/admin/scanner";
+import { LinkIcon, LinkSlashIcon, NoSymbolIcon, QrCodeIcon, RectangleStackIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "@/stores/modal";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useScannerStore, ["inUse", "results", "roomId", "connectedDevices"]),
+  },
+  methods: {
+    ...mapActions(useScannerStore, ["endSession"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    showQRCode() {
+      this.openModal(markRaw(defineAsyncComponent(() => import("@/components/scanner/ScanQRCodeModal.vue"))));
+    },
+    showResults() {
+      this.openModal(markRaw(defineAsyncComponent(() => import("@/components/scanner/ScanResultsModal.vue"))));
+    },
+  },
+});
+</script>
diff --git a/src/components/scanner/Scanner.vue b/src/components/scanner/Scanner.vue
new file mode 100644
index 0000000..4ef9cd6
--- /dev/null
+++ b/src/components/scanner/Scanner.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="flex flex-col gap-2 w-full min-h-[455px]">
+    <qrcode-stream
+      class="grow"
+      :constraints="selectedCamera?.constraints"
+      :track="trackFunctionOptions[4].value"
+      :formats="barcodeFormats"
+      :paused="paused"
+      @error="onError"
+      @detect="onDetect"
+      @camera-on="onCameraReady"
+    />
+    <select v-model="selectedCamera">
+      <option v-for="c in selecteableCameras" :value="c">{{ c.label }}</option>
+    </select>
+    <div>
+      <label for="manual">Code eingeben</label>
+      <input v-if="useInput" id="manual" type="text" v-model="detected" />
+    </div>
+    <div class="flex flex-row justify-end gap-4 py-2">
+      <button primary-outline @click="paused = false" :disabled="!paused">weiter scannen</button>
+      <button primary-outline @click="commit" :disabled="detected == ''">bestätigen</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import {
+  barcodeFormats,
+  defaultConstraintOptions,
+  getAvailableCameras,
+  handleScannerError,
+  trackFunctionOptions,
+  type Camera,
+} from "@/helpers/scanner";
+import { QrcodeStream, type DetectedBarcode } from "vue-qrcode-reader";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    useInput: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["code", "ready"],
+  data() {
+    return {
+      selecteableCameras: defaultConstraintOptions,
+      selectedCamera: undefined as undefined | Camera,
+      paused: false,
+      detected: "",
+    };
+  },
+  methods: {
+    async onCameraReady() {
+      this.selecteableCameras = await getAvailableCameras();
+      if (!this.selectedCamera) {
+        this.selectedCamera = this.selecteableCameras[0];
+      }
+      this.$emit("ready");
+    },
+    onDetect(result: Array<DetectedBarcode>) {
+      this.paused = true;
+      this.detected = result.map((r) => r.rawValue)[0];
+    },
+    onError(err: Error) {
+      console.log(handleScannerError(err));
+    },
+    commit() {
+      this.$emit("code", this.detected);
+    },
+  },
+});
+</script>
diff --git a/src/components/search/DamageReportSearchSelectMultipleWithRelated.vue b/src/components/search/DamageReportSearchSelectMultipleWithRelated.vue
new file mode 100644
index 0000000..dc7e016
--- /dev/null
+++ b/src/components/search/DamageReportSearchSelectMultipleWithRelated.vue
@@ -0,0 +1,233 @@
+<template>
+  <div class="w-full">
+    <Combobox v-model="selected" :disabled="disabled" multiple>
+      <ComboboxLabel>{{ title }}</ComboboxLabel>
+      <div class="relative mt-1">
+        <ComboboxInput
+          class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+          :displayValue="(e) => chosen.map((c) => c.title).join(', ')"
+          @input="query = $event.target.value"
+        />
+        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+        </ComboboxButton>
+        <TransitionRoot
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          @after-leave="query = ''"
+        >
+          <ComboboxOptions
+            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-hidden sm:text-sm z-20"
+          >
+            <ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
+              <li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <Spinner />
+                <span class="font-normal block truncate">suche</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">tippe, um zu suchen...</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">Keine Auswahl gefunden.</span>
+              </li>
+            </ComboboxOption>
+
+            <ComboboxOption
+              v-if="!(loading || deferingSearch)"
+              v-for="damageReport in available"
+              as="template"
+              :key="damageReport.id"
+              :value="damageReport.id"
+              v-slot="{ selected, active }"
+            >
+              <li
+                class="relative cursor-default select-none py-2 pl-10 pr-4"
+                :class="{
+                  'bg-primary text-white': active,
+                  'text-gray-900': !active,
+                }"
+              >
+                <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                  {{ damageReport.title }} <span v-if="damageReport.reportedBy">von {{ damageReport.reportedBy }}</span>
+                </span>
+                <span
+                  v-if="selected"
+                  class="absolute inset-y-0 left-0 flex items-center pl-3"
+                  :class="{ 'text-white': active, 'text-primary': !active }"
+                >
+                  <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                </span>
+              </li>
+            </ComboboxOption>
+          </ComboboxOptions>
+        </TransitionRoot>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import { useDamageReportStore } from "@/stores/admin/unit/damageReport";
+import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
+import difference from "lodash.difference";
+import Spinner from "@/components/Spinner.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Array as PropType<Array<string>>,
+      default: [],
+    },
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    related: {
+      type: String as PropType<"vehicle" | "equipment" | "wearable">,
+      default: "equipment",
+    },
+    relatedId: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: ["update:model-value", "add:difference", "remove:difference", "add:damageReport"],
+  watch: {
+    modelValue() {
+      // if (this.initialLoaded) return;
+      this.initialLoaded = true;
+      this.loadDamageReportsInitial();
+    },
+    related() {
+      this.reload();
+    },
+    relatedId() {
+      this.reload();
+    },
+    query() {
+      this.deferingSearch = true;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.deferingSearch = false;
+        this.search();
+      }, 600);
+    },
+  },
+  data() {
+    return {
+      initialLoaded: false as boolean,
+      loading: false as boolean,
+      deferingSearch: false as boolean,
+      timer: undefined as any,
+      query: "" as string,
+      all: [] as Array<DamageReportViewModel>,
+      filtered: [] as Array<DamageReportViewModel>,
+      chosen: [] as Array<DamageReportViewModel>,
+    };
+  },
+  computed: {
+    available() {
+      return this.query == "" ? this.all : this.filtered;
+    },
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: Array<string>) {
+        this.$emit("update:model-value", val);
+        if (this.modelValue.length < val.length) {
+          let diff = difference(val, this.modelValue);
+          if (diff.length != 1) return;
+
+          let diffObj = this.getDamageReportFromSearch(diff[0]);
+          if (!diffObj) return;
+
+          this.$emit("add:difference", diff[0]);
+          this.$emit("add:damageReport", diffObj);
+        } else {
+          let diff = difference(this.modelValue, val);
+          if (diff.length != 1) return;
+          this.$emit("remove:difference", diff[0]);
+        }
+      },
+    },
+  },
+  mounted() {
+    this.reload();
+  },
+  methods: {
+    ...mapActions(useDamageReportStore, [
+      "searchDamageReports",
+      "getDamageReportsByIds",
+      "getAllDamageReportsWithRelated",
+      "searchDamageReportsWithRelated",
+    ]),
+    reload() {
+      this.chosen = [];
+      this.filtered = [];
+      this.preloadAll();
+      this.loadDamageReportsInitial();
+    },
+    preloadAll() {
+      this.all = [];
+      if (this.relatedId == "") return;
+      this.loading = true;
+      this.getAllDamageReportsWithRelated(this.related, this.relatedId)
+        .then((res) => {
+          this.all = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    search() {
+      this.filtered = [];
+      if (this.query == "") return;
+      this.loading = true;
+      this.searchDamageReportsWithRelated(this.related, this.relatedId, this.query)
+        .then((res) => {
+          this.filtered = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    getDamageReportFromSearch(id: string) {
+      return this.available.find((f) => f.id == id);
+    },
+    loadDamageReportsInitial() {
+      if (this.modelValue.length == 0) {
+        this.chosen = [];
+      } else {
+        this.getDamageReportsByIds(this.modelValue)
+          .then((res) => {
+            this.chosen = res.data;
+          })
+          .catch(() => {});
+      }
+    },
+  },
+});
+</script>
diff --git a/src/components/search/DamageReportSearchSelectSingleWithRelated.vue b/src/components/search/DamageReportSearchSelectSingleWithRelated.vue
new file mode 100644
index 0000000..ea77b31
--- /dev/null
+++ b/src/components/search/DamageReportSearchSelectSingleWithRelated.vue
@@ -0,0 +1,216 @@
+<template>
+  <div class="w-full">
+    <Combobox v-model="selected" :disabled="disabled">
+      <ComboboxLabel>{{ title }}</ComboboxLabel>
+      <div class="relative mt-1">
+        <ComboboxInput
+          class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+          :display-value="() => chosen?.title ?? ''"
+          @input="query = $event.target.value"
+        />
+        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+        </ComboboxButton>
+        <TransitionRoot
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          @after-leave="query = ''"
+        >
+          <ComboboxOptions
+            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-hidden sm:text-sm z-20"
+          >
+            <ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
+              <li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <Spinner />
+                <span class="font-normal block truncate">suche</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0 && query == ''" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">tippe, um zu suchen...</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">Keine Auswahl gefunden.</span>
+              </li>
+            </ComboboxOption>
+
+            <ComboboxOption
+              v-if="!(loading || deferingSearch)"
+              v-for="damageReport in available"
+              as="template"
+              :key="damageReport.id"
+              :value="damageReport.id"
+              v-slot="{ selected, active }"
+            >
+              <li
+                class="relative cursor-default select-none py-2 pl-10 pr-4"
+                :class="{
+                  'bg-primary text-white': active,
+                  'text-gray-900': !active,
+                }"
+              >
+                <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                  {{ damageReport.title }} <span v-if="damageReport.reportedBy">von {{ damageReport.reportedBy }}</span>
+                </span>
+                <span
+                  v-if="selected"
+                  class="absolute inset-y-0 left-0 flex items-center pl-3"
+                  :class="{ 'text-white': active, 'text-primary': !active }"
+                >
+                  <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                </span>
+              </li>
+            </ComboboxOption>
+          </ComboboxOptions>
+        </TransitionRoot>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import { useDamageReportStore } from "@/stores/admin/unit/damageReport";
+import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
+import Spinner from "../Spinner.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    related: {
+      type: String as PropType<"vehicle" | "equipment" | "wearable">,
+      default: "equipment",
+    },
+    relatedId: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: ["update:model-value"],
+  watch: {
+    modelValue() {
+      //if (this.initialLoaded) return;
+      this.initialLoaded = true;
+      this.loadDamageReportInitial();
+    },
+    related() {
+      this.reload();
+    },
+    relatedId() {
+      this.reload();
+    },
+    query() {
+      this.deferingSearch = true;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.deferingSearch = false;
+        this.search();
+      }, 600);
+    },
+  },
+  data() {
+    return {
+      initialLoaded: false as boolean,
+      loading: false as boolean,
+      deferingSearch: false as boolean,
+      timer: undefined as any,
+      query: "" as string,
+      all: [] as Array<DamageReportViewModel>,
+      filtered: [] as Array<DamageReportViewModel>,
+      chosen: undefined as undefined | DamageReportViewModel,
+    };
+  },
+  computed: {
+    available() {
+      return this.query == "" ? this.all : this.filtered;
+    },
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.chosen = this.getDamageReportFromSearch(val);
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  mounted() {
+    this.reload();
+  },
+  methods: {
+    ...mapActions(useDamageReportStore, [
+      "searchDamageReports",
+      "fetchDamageReportById",
+      "getAllDamageReportsWithRelated",
+      "searchDamageReportsWithRelated",
+    ]),
+    reload() {
+      this.chosen = undefined;
+      this.filtered = [];
+      this.preloadAll();
+      this.loadDamageReportInitial();
+    },
+    preloadAll() {
+      this.all = [];
+      if (this.relatedId == "") return;
+      this.loading = true;
+      this.getAllDamageReportsWithRelated(this.related, this.relatedId)
+        .then((res) => {
+          this.all = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    search() {
+      this.filtered = [];
+      if (this.query == "") return;
+      this.loading = true;
+      this.searchDamageReportsWithRelated(this.related, this.relatedId, this.query)
+        .then((res) => {
+          this.filtered = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    getDamageReportFromSearch(id: string) {
+      return this.available.find((f) => f.id == id);
+    },
+    loadDamageReportInitial() {
+      if (this.modelValue == "" || this.modelValue == null) return;
+      this.fetchDamageReportById(this.modelValue)
+        .then((res) => {
+          this.chosen = res.data;
+        })
+        .catch(() => {});
+    },
+  },
+});
+</script>
diff --git a/src/components/search/EquipmentSearchSelect.vue b/src/components/search/EquipmentSearchSelect.vue
new file mode 100644
index 0000000..877e338
--- /dev/null
+++ b/src/components/search/EquipmentSearchSelect.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="w-full">
+    <Combobox v-model="selected" :disabled="disabled">
+      <ComboboxLabel>{{ title }}</ComboboxLabel>
+      <div class="relative mt-1">
+        <ComboboxInput
+          class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+          :class="useScanner ? 'pl-9!' : ''"
+          :displayValue="() => chosen?.name ?? ''"
+          @input="query = $event.target.value"
+        />
+        <QrCodeIcon
+          v-if="useScanner"
+          class="absolute h-6 stroke-1 left-2 top-1/2 -translate-y-1/2 cursor-pointer z-10"
+          @click="scanCode"
+        />
+        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+        </ComboboxButton>
+        <TransitionRoot
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          @after-leave="query = ''"
+        >
+          <ComboboxOptions
+            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-hidden sm:text-sm z-20"
+          >
+            <ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
+              <li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <Spinner />
+                <span class="font-normal block truncate">suche</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">tippe, um zu suchen...</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0 && query != ''" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">Keine Auswahl gefunden.</span>
+              </li>
+            </ComboboxOption>
+
+            <ComboboxOption
+              v-if="!(loading || deferingSearch)"
+              v-for="equipment in available"
+              as="template"
+              :key="equipment.id"
+              :value="equipment.id"
+              v-slot="{ selected, active }"
+            >
+              <li
+                class="relative cursor-default select-none py-2 pl-10 pr-4"
+                :class="{
+                  'bg-primary text-white': active,
+                  'text-gray-900': !active,
+                }"
+              >
+                <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                  {{ equipment.name }}<span v-if="equipment.code"> - Code: {{ equipment.code }}</span>
+                </span>
+                <span
+                  v-if="selected"
+                  class="absolute inset-y-0 left-0 flex items-center pl-3"
+                  :class="{ 'text-white': active, 'text-primary': !active }"
+                >
+                  <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                </span>
+              </li>
+            </ComboboxOption>
+          </ComboboxOptions>
+        </TransitionRoot>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw, type Prop } from "vue";
+import { mapState, mapActions } from "pinia";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import Spinner from "../Spinner.vue";
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+import type { EquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import { QrCodeIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "@/stores/modal";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    useScanner: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:model-value"],
+  watch: {
+    modelValue() {
+      if (this.initialLoaded) return;
+      this.initialLoaded = true;
+      this.loadEquipmentInitial();
+    },
+    query() {
+      this.deferingSearch = true;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.deferingSearch = false;
+        this.search();
+      }, 600);
+    },
+  },
+  data() {
+    return {
+      initialLoaded: false as boolean,
+      loading: false as boolean,
+      deferingSearch: false as boolean,
+      timer: undefined as any,
+      query: "" as string,
+      all: [] as Array<EquipmentViewModel>,
+      filtered: [] as Array<EquipmentViewModel>,
+      chosen: undefined as undefined | EquipmentViewModel,
+    };
+  },
+  computed: {
+    available() {
+      return this.query == "" ? this.all : this.filtered;
+    },
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.chosen = this.getEquipmentFromSearch(val);
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  mounted() {
+    this.loadEquipmentInitial();
+    this.preloadAll();
+  },
+  methods: {
+    ...mapActions(useEquipmentStore, ["searchEquipments", "fetchEquipmentById", "getAllEquipments"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    preloadAll() {
+      this.loading = true;
+      this.getAllEquipments()
+        .then((res) => {
+          this.all = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    search() {
+      this.filtered = [];
+      if (this.query == "") return;
+      this.loading = true;
+      this.searchEquipments(this.query)
+        .then((res) => {
+          this.filtered = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    getEquipmentFromSearch(id: string) {
+      return this.available.find((f) => f.id == id);
+    },
+    loadEquipmentInitial() {
+      if (this.modelValue == "") return;
+      this.fetchEquipmentById(this.modelValue)
+        .then((res) => {
+          this.chosen = res.data;
+        })
+        .catch(() => {});
+    },
+    scanCode() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/scanner/ManageScanModal.vue"))),
+        "codeScanInput",
+        (result: string) => {
+          this.getEquipmentFromSearch(result);
+        }
+      );
+    },
+  },
+});
+</script>
diff --git a/src/components/search/EquipmentTypeSearchSelect.vue b/src/components/search/EquipmentTypeSearchSelect.vue
new file mode 100644
index 0000000..6dc4f4a
--- /dev/null
+++ b/src/components/search/EquipmentTypeSearchSelect.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="w-full">
+    <Combobox v-model="selected" :disabled="disabled">
+      <ComboboxLabel>{{ title }}</ComboboxLabel>
+      <div class="relative mt-1">
+        <ComboboxInput
+          class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+          :displayValue="() => chosen?.type ?? ''"
+          @input="query = $event.target.value"
+        />
+        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+        </ComboboxButton>
+        <TransitionRoot
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          @after-leave="query = ''"
+        >
+          <ComboboxOptions
+            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-hidden sm:text-sm z-20"
+          >
+            <ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
+              <li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <Spinner />
+                <span class="font-normal block truncate">suche</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">tippe, um zu suchen...</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0 && query != ''" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">Keine Auswahl gefunden.</span>
+              </li>
+            </ComboboxOption>
+
+            <ComboboxOption
+              v-if="!(loading || deferingSearch)"
+              v-for="equipmentType in available"
+              as="template"
+              :key="equipmentType.id"
+              :value="equipmentType.id"
+              v-slot="{ selected, active }"
+            >
+              <li
+                class="relative cursor-default select-none py-2 pl-10 pr-4"
+                :class="{
+                  'bg-primary text-white': active,
+                  'text-gray-900': !active,
+                }"
+              >
+                <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                  {{ equipmentType.type }}
+                </span>
+                <span
+                  v-if="selected"
+                  class="absolute inset-y-0 left-0 flex items-center pl-3"
+                  :class="{ 'text-white': active, 'text-primary': !active }"
+                >
+                  <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                </span>
+              </li>
+            </ComboboxOption>
+          </ComboboxOptions>
+        </TransitionRoot>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import Spinner from "../Spinner.vue";
+import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
+import type { EquipmentTypeViewModel } from "@/viewmodels/admin/unit/equipment/equipmentType.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:model-value"],
+  watch: {
+    modelValue() {
+      if (this.initialLoaded) return;
+      this.initialLoaded = true;
+      this.loadEquipmentTypeInitial();
+    },
+    query() {
+      this.deferingSearch = true;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.deferingSearch = false;
+        this.search();
+      }, 600);
+    },
+  },
+  data() {
+    return {
+      initialLoaded: false as boolean,
+      loading: false as boolean,
+      deferingSearch: false as boolean,
+      timer: undefined as any,
+      query: "" as string,
+      all: [] as Array<EquipmentTypeViewModel>,
+      filtered: [] as Array<EquipmentTypeViewModel>,
+      chosen: undefined as undefined | EquipmentTypeViewModel,
+    };
+  },
+  computed: {
+    available() {
+      return this.query == "" ? this.all : this.filtered;
+    },
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.chosen = this.getEquipmentTypeFromSearch(val);
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  mounted() {
+    this.loadEquipmentTypeInitial();
+    this.preloadAll();
+  },
+  methods: {
+    ...mapActions(useEquipmentTypeStore, ["searchEquipmentTypes", "fetchEquipmentTypeById", "getAllEquipmentTypes"]),
+    preloadAll() {
+      this.loading = true;
+      this.getAllEquipmentTypes()
+        .then((res) => {
+          this.all = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    search() {
+      this.filtered = [];
+      if (this.query == "") return;
+      this.loading = true;
+      this.searchEquipmentTypes(this.query)
+        .then((res) => {
+          this.filtered = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    getEquipmentTypeFromSearch(id: string) {
+      return this.available.find((f) => f.id == id);
+    },
+    loadEquipmentTypeInitial() {
+      if (this.modelValue == "") return;
+      this.fetchEquipmentTypeById(this.modelValue)
+        .then((res) => {
+          this.chosen = res.data;
+        })
+        .catch(() => {});
+    },
+  },
+});
+</script>
diff --git a/src/components/search/InspectionPlanSearchSelect.vue b/src/components/search/InspectionPlanSearchSelect.vue
new file mode 100644
index 0000000..5c86179
--- /dev/null
+++ b/src/components/search/InspectionPlanSearchSelect.vue
@@ -0,0 +1,194 @@
+<template>
+  <div class="w-full">
+    <Combobox v-model="selected" :disabled="disabled">
+      <ComboboxLabel>{{ title }}</ComboboxLabel>
+      <div class="relative mt-1">
+        <ComboboxInput
+          class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+          :displayValue="() => chosen?.title ?? ''"
+          @input="query = $event.target.value"
+        />
+        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+        </ComboboxButton>
+        <TransitionRoot
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          @after-leave="query = ''"
+        >
+          <ComboboxOptions
+            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-hidden sm:text-sm z-20"
+          >
+            <ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
+              <li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <Spinner />
+                <span class="font-normal block truncate">suche</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">tippe, um zu suchen...</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0 && query != ''" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">Keine Auswahl gefunden.</span>
+              </li>
+            </ComboboxOption>
+
+            <ComboboxOption
+              v-if="!(loading || deferingSearch)"
+              v-for="inspectionPlan in available"
+              as="template"
+              :key="inspectionPlan.id"
+              :value="inspectionPlan.id"
+              v-slot="{ selected, active }"
+            >
+              <li
+                class="relative cursor-default select-none py-2 pl-10 pr-4"
+                :class="{
+                  'bg-primary text-white': active,
+                  'text-gray-900': !active,
+                }"
+              >
+                <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                  {{ inspectionPlan.title }}
+                </span>
+                <span
+                  v-if="selected"
+                  class="absolute inset-y-0 left-0 flex items-center pl-3"
+                  :class="{ 'text-white': active, 'text-primary': !active }"
+                >
+                  <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                </span>
+              </li>
+            </ComboboxOption>
+          </ComboboxOptions>
+        </TransitionRoot>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import Spinner from "../Spinner.vue";
+import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
+import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:model-value"],
+  watch: {
+    modelValue() {
+      if (this.initialLoaded) return;
+      this.initialLoaded = true;
+      this.loadInspectionPlanInitial();
+    },
+    query() {
+      this.deferingSearch = true;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.deferingSearch = false;
+        this.search();
+      }, 600);
+    },
+  },
+  data() {
+    return {
+      initialLoaded: false as boolean,
+      loading: false as boolean,
+      deferingSearch: false as boolean,
+      timer: undefined as any,
+      query: "" as string,
+      all: [] as Array<InspectionPlanViewModel>,
+      filtered: [] as Array<InspectionPlanViewModel>,
+      chosen: undefined as undefined | InspectionPlanViewModel,
+    };
+  },
+  computed: {
+    available() {
+      return this.query == "" ? this.all : this.filtered;
+    },
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.chosen = this.getInspectionPlanFromSearch(val);
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  mounted() {
+    this.loadInspectionPlanInitial();
+    this.preloadAll();
+  },
+  methods: {
+    ...mapActions(useInspectionPlanStore, [
+      "searchInspectionPlans",
+      "fetchInspectionPlanById",
+      "getAllInspectionPlans",
+    ]),
+    preloadAll() {
+      this.loading = true;
+      this.getAllInspectionPlans()
+        .then((res) => {
+          this.all = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    search() {
+      this.filtered = [];
+      if (this.query == "") return;
+      this.loading = true;
+      this.searchInspectionPlans(this.query)
+        .then((res) => {
+          this.filtered = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    getInspectionPlanFromSearch(id: string) {
+      return this.available.find((f) => f.id == id);
+    },
+    loadInspectionPlanInitial() {
+      if (this.modelValue == "") return;
+      this.fetchInspectionPlanById(this.modelValue)
+        .then((res) => {
+          this.chosen = res.data;
+        })
+        .catch(() => {});
+    },
+  },
+});
+</script>
diff --git a/src/components/search/InspectionPlanSearchSelectWithRelated.vue b/src/components/search/InspectionPlanSearchSelectWithRelated.vue
new file mode 100644
index 0000000..e6d0c3b
--- /dev/null
+++ b/src/components/search/InspectionPlanSearchSelectWithRelated.vue
@@ -0,0 +1,215 @@
+<template>
+  <div class="w-full">
+    <Combobox v-model="selected" :disabled="disabled">
+      <ComboboxLabel>{{ title }}</ComboboxLabel>
+      <div class="relative mt-1">
+        <ComboboxInput
+          class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+          :displayValue="() => chosen?.title ?? ''"
+          @input="query = $event.target.value"
+        />
+        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+        </ComboboxButton>
+        <TransitionRoot
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          @after-leave="query = ''"
+        >
+          <ComboboxOptions
+            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-hidden sm:text-sm z-20"
+          >
+            <ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
+              <li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <Spinner />
+                <span class="font-normal block truncate">suche</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">tippe, um zu suchen...</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0 && query != ''" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">Keine Auswahl gefunden.</span>
+              </li>
+            </ComboboxOption>
+
+            <ComboboxOption
+              v-if="!(loading || deferingSearch)"
+              v-for="inspectionPlan in available"
+              as="template"
+              :key="inspectionPlan.id"
+              :value="inspectionPlan.id"
+              v-slot="{ selected, active }"
+            >
+              <li
+                class="relative cursor-default select-none py-2 pl-10 pr-4"
+                :class="{
+                  'bg-primary text-white': active,
+                  'text-gray-900': !active,
+                }"
+              >
+                <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                  {{ inspectionPlan.title }}
+                </span>
+                <span
+                  v-if="selected"
+                  class="absolute inset-y-0 left-0 flex items-center pl-3"
+                  :class="{ 'text-white': active, 'text-primary': !active }"
+                >
+                  <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                </span>
+              </li>
+            </ComboboxOption>
+          </ComboboxOptions>
+        </TransitionRoot>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import Spinner from "../Spinner.vue";
+import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
+import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    relatedType: {
+      type: String as PropType<"vehicleType" | "equipmentType" | "wearableType">,
+      default: "equipmentType",
+    },
+    relatedTypeId: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: ["update:model-value"],
+  watch: {
+    modelValue() {
+      if (this.initialLoaded) return;
+      this.initialLoaded = true;
+      this.loadInspectionPlanInitial();
+    },
+    relatedType() {
+      this.reload();
+    },
+    relatedTypeId() {
+      this.reload();
+    },
+    query() {
+      this.deferingSearch = true;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.deferingSearch = false;
+        this.search();
+      }, 600);
+    },
+  },
+  data() {
+    return {
+      initialLoaded: false as boolean,
+      loading: false as boolean,
+      deferingSearch: false as boolean,
+      timer: undefined as any,
+      query: "" as string,
+      all: [] as Array<InspectionPlanViewModel>,
+      filtered: [] as Array<InspectionPlanViewModel>,
+      chosen: undefined as undefined | InspectionPlanViewModel,
+    };
+  },
+  computed: {
+    available() {
+      return this.query == "" ? this.all : this.filtered;
+    },
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.chosen = this.getInspectionPlanFromSearch(val);
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  mounted() {
+    this.reload();
+  },
+  methods: {
+    ...mapActions(useInspectionPlanStore, [
+      "fetchInspectionPlanById",
+      "getAllInspectionPlansWithRelated",
+      "searchInspectionPlansWithRelated",
+    ]),
+    reload() {
+      this.chosen = undefined;
+      this.filtered = [];
+      this.preloadAll();
+      this.loadInspectionPlanInitial();
+    },
+    preloadAll() {
+      this.all = [];
+      if (this.relatedTypeId == "") return;
+      this.loading = true;
+      this.getAllInspectionPlansWithRelated(this.relatedType, this.relatedTypeId)
+        .then((res) => {
+          this.all = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    search() {
+      this.filtered = [];
+      if (this.query == "" || this.relatedTypeId == "") return;
+      this.loading = true;
+      this.searchInspectionPlansWithRelated(this.relatedType, this.relatedTypeId, this.query)
+        .then((res) => {
+          this.filtered = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    getInspectionPlanFromSearch(id: string) {
+      return this.available.find((f) => f.id == id);
+    },
+    loadInspectionPlanInitial() {
+      if (this.modelValue == "") return;
+      this.fetchInspectionPlanById(this.modelValue)
+        .then((res) => {
+          this.chosen = res.data;
+        })
+        .catch(() => {});
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/MemberSearchSelect.vue b/src/components/search/MemberSearchSelectMultiple.vue
similarity index 99%
rename from src/components/admin/MemberSearchSelect.vue
rename to src/components/search/MemberSearchSelectMultiple.vue
index b5e0bd0..5b5c29a 100644
--- a/src/components/admin/MemberSearchSelect.vue
+++ b/src/components/search/MemberSearchSelectMultiple.vue
@@ -18,7 +18,7 @@
           @after-leave="query = ''"
         >
           <ComboboxOptions
-            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-hidden sm:text-sm"
+            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-hidden sm:text-sm z-20"
           >
             <ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
               <li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">
diff --git a/src/components/search/MemberSearchSelectSingle.vue b/src/components/search/MemberSearchSelectSingle.vue
new file mode 100644
index 0000000..d81e2a4
--- /dev/null
+++ b/src/components/search/MemberSearchSelectSingle.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="w-full">
+    <Combobox v-model="selected" :disabled="disabled">
+      <ComboboxLabel>{{ title }}</ComboboxLabel>
+      <div class="relative mt-1">
+        <ComboboxInput
+          class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+          :display-value="() => (chosen?.firstname ?? '') + ' ' + (chosen?.lastname ?? '')"
+          @input="query = $event.target.value"
+        />
+        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+        </ComboboxButton>
+        <TransitionRoot
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          @after-leave="query = ''"
+        >
+          <ComboboxOptions
+            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-hidden sm:text-sm z-20"
+          >
+            <ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
+              <li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <Spinner />
+                <span class="font-normal block truncate">suche</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="filtered.length === 0 && query == ''" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">tippe, um zu suchen...</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="filtered.length === 0" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">Keine Auswahl gefunden.</span>
+              </li>
+            </ComboboxOption>
+
+            <ComboboxOption
+              v-if="!(loading || deferingSearch)"
+              v-for="member in filtered"
+              as="template"
+              :key="member.id"
+              :value="member.id"
+              v-slot="{ selected, active }"
+            >
+              <li
+                class="relative cursor-default select-none py-2 pl-10 pr-4"
+                :class="{
+                  'bg-primary text-white': active,
+                  'text-gray-900': !active,
+                }"
+              >
+                <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                  {{ member.firstname }} {{ member.lastname }} {{ member.nameaffix }}
+                </span>
+                <span
+                  v-if="selected"
+                  class="absolute inset-y-0 left-0 flex items-center pl-3"
+                  :class="{ 'text-white': active, 'text-primary': !active }"
+                >
+                  <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                </span>
+              </li>
+            </ComboboxOption>
+          </ComboboxOptions>
+        </TransitionRoot>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import { useMemberStore } from "@/stores/admin/club/member/member";
+import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
+import Spinner from "../Spinner.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:model-value"],
+  watch: {
+    modelValue() {
+      //if (this.initialLoaded) return;
+      this.initialLoaded = true;
+      this.loadMemberInitial();
+    },
+    query() {
+      this.deferingSearch = true;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.deferingSearch = false;
+        this.search();
+      }, 600);
+    },
+  },
+  data() {
+    return {
+      initialLoaded: false as boolean,
+      loading: false as boolean,
+      deferingSearch: false as boolean,
+      timer: undefined as any,
+      query: "" as string,
+      filtered: [] as Array<MemberViewModel>,
+      chosen: undefined as undefined | MemberViewModel,
+    };
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.chosen = this.getMemberFromSearch(val);
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  mounted() {
+    this.loadMemberInitial();
+  },
+  methods: {
+    ...mapActions(useMemberStore, ["searchMembers", "fetchMemberById"]),
+    search() {
+      this.filtered = [];
+      if (this.query == "") return;
+      this.loading = true;
+      this.searchMembers(this.query)
+        .then((res) => {
+          this.filtered = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    getMemberFromSearch(id: string) {
+      return this.filtered.find((f) => f.id == id);
+    },
+    loadMemberInitial() {
+      if (this.modelValue == "" || this.modelValue == null) return;
+      this.fetchMemberById(this.modelValue)
+        .then((res) => {
+          this.chosen = res.data;
+        })
+        .catch(() => {});
+    },
+  },
+});
+</script>
diff --git a/src/components/search/VehicleSearchSelect.vue b/src/components/search/VehicleSearchSelect.vue
new file mode 100644
index 0000000..ce1ea2e
--- /dev/null
+++ b/src/components/search/VehicleSearchSelect.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="w-full">
+    <Combobox v-model="selected" :disabled="disabled">
+      <ComboboxLabel>{{ title }}</ComboboxLabel>
+      <div class="relative mt-1">
+        <ComboboxInput
+          class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+          :class="useScanner ? 'pl-9!' : ''"
+          :displayValue="() => chosen?.name ?? ''"
+          @input="query = $event.target.value"
+        />
+        <QrCodeIcon
+          v-if="useScanner"
+          class="absolute h-6 stroke-1 left-2 top-1/2 -translate-y-1/2 cursor-pointer z-10"
+          @click="scanCode"
+        />
+        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+        </ComboboxButton>
+        <TransitionRoot
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          @after-leave="query = ''"
+        >
+          <ComboboxOptions
+            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-hidden sm:text-sm z-20"
+          >
+            <ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
+              <li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <Spinner />
+                <span class="font-normal block truncate">suche</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">tippe, um zu suchen...</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0 && query != ''" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">Keine Auswahl gefunden.</span>
+              </li>
+            </ComboboxOption>
+
+            <ComboboxOption
+              v-if="!(loading || deferingSearch)"
+              v-for="vehicle in available"
+              as="template"
+              :key="vehicle.id"
+              :value="vehicle.id"
+              v-slot="{ selected, active }"
+            >
+              <li
+                class="relative cursor-default select-none py-2 pl-10 pr-4"
+                :class="{
+                  'bg-primary text-white': active,
+                  'text-gray-900': !active,
+                }"
+              >
+                <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                  {{ vehicle.name }}<span v-if="vehicle.code"> - Code: {{ vehicle.code }}</span>
+                </span>
+                <span
+                  v-if="selected"
+                  class="absolute inset-y-0 left-0 flex items-center pl-3"
+                  :class="{ 'text-white': active, 'text-primary': !active }"
+                >
+                  <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                </span>
+              </li>
+            </ComboboxOption>
+          </ComboboxOptions>
+        </TransitionRoot>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw, type Prop } from "vue";
+import { mapState, mapActions } from "pinia";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import Spinner from "../Spinner.vue";
+import { useVehicleStore } from "@/stores/admin/unit/vehicle/vehicle";
+import type { VehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
+import { QrCodeIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "@/stores/modal";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    useScanner: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:model-value"],
+  watch: {
+    modelValue() {
+      if (this.initialLoaded) return;
+      this.initialLoaded = true;
+      this.loadVehicleInitial();
+    },
+    query() {
+      this.deferingSearch = true;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.deferingSearch = false;
+        this.search();
+      }, 600);
+    },
+  },
+  data() {
+    return {
+      initialLoaded: false as boolean,
+      loading: false as boolean,
+      deferingSearch: false as boolean,
+      timer: undefined as any,
+      query: "" as string,
+      all: [] as Array<VehicleViewModel>,
+      filtered: [] as Array<VehicleViewModel>,
+      chosen: undefined as undefined | VehicleViewModel,
+    };
+  },
+  computed: {
+    available() {
+      return this.query == "" ? this.all : this.filtered;
+    },
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.chosen = this.getVehicleFromSearch(val);
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  mounted() {
+    this.loadVehicleInitial();
+    this.preloadAll();
+  },
+  methods: {
+    ...mapActions(useVehicleStore, ["searchVehicles", "fetchVehicleById", "getAllVehicles"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    preloadAll() {
+      this.loading = true;
+      this.getAllVehicles()
+        .then((res) => {
+          this.all = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    search() {
+      this.filtered = [];
+      if (this.query == "") return;
+      this.loading = true;
+      this.searchVehicles(this.query)
+        .then((res) => {
+          this.filtered = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    getVehicleFromSearch(id: string) {
+      return this.available.find((f) => f.id == id);
+    },
+    loadVehicleInitial() {
+      if (this.modelValue == "") return;
+      this.fetchVehicleById(this.modelValue)
+        .then((res) => {
+          this.chosen = res.data;
+        })
+        .catch(() => {});
+    },
+    scanCode() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/scanner/ManageScanModal.vue"))),
+        "codeScanInput",
+        (result: string) => {
+          this.getVehicleFromSearch(result);
+        }
+      );
+    },
+  },
+});
+</script>
diff --git a/src/components/search/VehicleTypeSearchSelect.vue b/src/components/search/VehicleTypeSearchSelect.vue
new file mode 100644
index 0000000..1f3901f
--- /dev/null
+++ b/src/components/search/VehicleTypeSearchSelect.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="w-full">
+    <Combobox v-model="selected" :disabled="disabled">
+      <ComboboxLabel>{{ title }}</ComboboxLabel>
+      <div class="relative mt-1">
+        <ComboboxInput
+          class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+          :displayValue="() => chosen?.type ?? ''"
+          @input="query = $event.target.value"
+        />
+        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+        </ComboboxButton>
+        <TransitionRoot
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          @after-leave="query = ''"
+        >
+          <ComboboxOptions
+            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-hidden sm:text-sm z-20"
+          >
+            <ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
+              <li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <Spinner />
+                <span class="font-normal block truncate">suche</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">tippe, um zu suchen...</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0 && query != ''" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">Keine Auswahl gefunden.</span>
+              </li>
+            </ComboboxOption>
+
+            <ComboboxOption
+              v-if="!(loading || deferingSearch)"
+              v-for="vehicleType in available"
+              as="template"
+              :key="vehicleType.id"
+              :value="vehicleType.id"
+              v-slot="{ selected, active }"
+            >
+              <li
+                class="relative cursor-default select-none py-2 pl-10 pr-4"
+                :class="{
+                  'bg-primary text-white': active,
+                  'text-gray-900': !active,
+                }"
+              >
+                <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                  {{ vehicleType.type }}
+                </span>
+                <span
+                  v-if="selected"
+                  class="absolute inset-y-0 left-0 flex items-center pl-3"
+                  :class="{ 'text-white': active, 'text-primary': !active }"
+                >
+                  <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                </span>
+              </li>
+            </ComboboxOption>
+          </ComboboxOptions>
+        </TransitionRoot>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import Spinner from "../Spinner.vue";
+import { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
+import type { VehicleTypeViewModel } from "@/viewmodels/admin/unit/vehicle/vehicleType.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:model-value"],
+  watch: {
+    modelValue() {
+      if (this.initialLoaded) return;
+      this.initialLoaded = true;
+      this.loadVehicleTypeInitial();
+    },
+    query() {
+      this.deferingSearch = true;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.deferingSearch = false;
+        this.search();
+      }, 600);
+    },
+  },
+  data() {
+    return {
+      initialLoaded: false as boolean,
+      loading: false as boolean,
+      deferingSearch: false as boolean,
+      timer: undefined as any,
+      query: "" as string,
+      all: [] as Array<VehicleTypeViewModel>,
+      filtered: [] as Array<VehicleTypeViewModel>,
+      chosen: undefined as undefined | VehicleTypeViewModel,
+    };
+  },
+  computed: {
+    available() {
+      return this.query == "" ? this.all : this.filtered;
+    },
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.chosen = this.getVehicleTypeFromSearch(val);
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  mounted() {
+    this.loadVehicleTypeInitial();
+    this.preloadAll();
+  },
+  methods: {
+    ...mapActions(useVehicleTypeStore, ["searchVehicleTypes", "fetchVehicleTypeById", "getAllVehicleTypes"]),
+    preloadAll() {
+      this.loading = true;
+      this.getAllVehicleTypes()
+        .then((res) => {
+          this.all = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    search() {
+      this.filtered = [];
+      if (this.query == "") return;
+      this.loading = true;
+      this.searchVehicleTypes(this.query)
+        .then((res) => {
+          this.filtered = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    getVehicleTypeFromSearch(id: string) {
+      return this.available.find((f) => f.id == id);
+    },
+    loadVehicleTypeInitial() {
+      if (this.modelValue == "") return;
+      this.fetchVehicleTypeById(this.modelValue)
+        .then((res) => {
+          this.chosen = res.data;
+        })
+        .catch(() => {});
+    },
+  },
+});
+</script>
diff --git a/src/components/search/WearableSearchSelect.vue b/src/components/search/WearableSearchSelect.vue
new file mode 100644
index 0000000..3c614d3
--- /dev/null
+++ b/src/components/search/WearableSearchSelect.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="w-full">
+    <Combobox v-model="selected" :disabled="disabled">
+      <ComboboxLabel>{{ title }}</ComboboxLabel>
+      <div class="relative mt-1">
+        <ComboboxInput
+          class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+          :class="useScanner ? 'pl-9!' : ''"
+          :displayValue="() => chosen?.name ?? ''"
+          @input="query = $event.target.value"
+        />
+        <QrCodeIcon
+          v-if="useScanner"
+          class="absolute h-6 stroke-1 left-2 top-1/2 -translate-y-1/2 cursor-pointer z-10"
+          @click="scanCode"
+        />
+        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+        </ComboboxButton>
+        <TransitionRoot
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          @after-leave="query = ''"
+        >
+          <ComboboxOptions
+            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-hidden sm:text-sm z-20"
+          >
+            <ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
+              <li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <Spinner />
+                <span class="font-normal block truncate">suche</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0 && all.length == 0" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">tippe, um zu suchen...</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0 && query != ''" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">Keine Auswahl gefunden.</span>
+              </li>
+            </ComboboxOption>
+
+            <ComboboxOption
+              v-if="!(loading || deferingSearch)"
+              v-for="wearable in available"
+              as="template"
+              :key="wearable.id"
+              :value="wearable.id"
+              v-slot="{ selected, active }"
+            >
+              <li
+                class="relative cursor-default select-none py-2 pl-10 pr-4"
+                :class="{
+                  'bg-primary text-white': active,
+                  'text-gray-900': !active,
+                }"
+              >
+                <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                  {{ wearable.name }}<span v-if="wearable.code"> - Code: {{ wearable.code }}</span>
+                </span>
+                <span
+                  v-if="selected"
+                  class="absolute inset-y-0 left-0 flex items-center pl-3"
+                  :class="{ 'text-white': active, 'text-primary': !active }"
+                >
+                  <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                </span>
+              </li>
+            </ComboboxOption>
+          </ComboboxOptions>
+        </TransitionRoot>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw, type Prop } from "vue";
+import { mapState, mapActions } from "pinia";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import Spinner from "../Spinner.vue";
+import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
+import type { WearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
+import { QrCodeIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "@/stores/modal";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    useScanner: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:model-value"],
+  watch: {
+    modelValue() {
+      if (this.initialLoaded) return;
+      this.initialLoaded = true;
+      this.loadWearableInitial();
+    },
+    query() {
+      this.deferingSearch = true;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.deferingSearch = false;
+        this.search();
+      }, 600);
+    },
+  },
+  data() {
+    return {
+      initialLoaded: false as boolean,
+      loading: false as boolean,
+      deferingSearch: false as boolean,
+      timer: undefined as any,
+      query: "" as string,
+      all: [] as Array<WearableViewModel>,
+      filtered: [] as Array<WearableViewModel>,
+      chosen: undefined as undefined | WearableViewModel,
+    };
+  },
+  computed: {
+    available() {
+      return this.query == "" ? this.all : this.filtered;
+    },
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.chosen = this.getWearableFromSearch(val);
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  mounted() {
+    this.loadWearableInitial();
+    this.preloadAll();
+  },
+  methods: {
+    ...mapActions(useWearableStore, ["searchWearables", "fetchWearableById", "getAllWearables"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    preloadAll() {
+      this.loading = true;
+      this.getAllWearables()
+        .then((res) => {
+          this.all = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    search() {
+      this.filtered = [];
+      if (this.query == "") return;
+      this.loading = true;
+      this.searchWearables(this.query)
+        .then((res) => {
+          this.filtered = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    getWearableFromSearch(id: string) {
+      return this.all.find((f) => f.id == id);
+    },
+    loadWearableInitial() {
+      if (this.modelValue == "") return;
+      this.fetchWearableById(this.modelValue)
+        .then((res) => {
+          this.chosen = res.data;
+        })
+        .catch(() => {});
+    },
+    scanCode() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/scanner/ManageScanModal.vue"))),
+        "codeScanInput",
+        (result: string) => {
+          this.getWearableFromSearch(result);
+        }
+      );
+    },
+  },
+});
+</script>
diff --git a/src/components/search/WearableTypeSearchSelect.vue b/src/components/search/WearableTypeSearchSelect.vue
new file mode 100644
index 0000000..15deee2
--- /dev/null
+++ b/src/components/search/WearableTypeSearchSelect.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="w-full">
+    <Combobox v-model="selected" :disabled="disabled">
+      <ComboboxLabel>{{ title }}</ComboboxLabel>
+      <div class="relative mt-1">
+        <ComboboxInput
+          class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+          :displayValue="() => chosen?.type ?? ''"
+          @input="query = $event.target.value"
+        />
+        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+        </ComboboxButton>
+        <TransitionRoot
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          @after-leave="query = ''"
+        >
+          <ComboboxOptions
+            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-hidden sm:text-sm z-20"
+          >
+            <ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
+              <li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <Spinner />
+                <span class="font-normal block truncate">suche</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0 && all.length == 0" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">tippe, um zu suchen...</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0 && query != ''" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">Keine Auswahl gefunden.</span>
+              </li>
+            </ComboboxOption>
+
+            <ComboboxOption
+              v-if="!(loading || deferingSearch)"
+              v-for="wearableType in available"
+              as="template"
+              :key="wearableType.id"
+              :value="wearableType.id"
+              v-slot="{ selected, active }"
+            >
+              <li
+                class="relative cursor-default select-none py-2 pl-10 pr-4"
+                :class="{
+                  'bg-primary text-white': active,
+                  'text-gray-900': !active,
+                }"
+              >
+                <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                  {{ wearableType.type }}
+                </span>
+                <span
+                  v-if="selected"
+                  class="absolute inset-y-0 left-0 flex items-center pl-3"
+                  :class="{ 'text-white': active, 'text-primary': !active }"
+                >
+                  <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                </span>
+              </li>
+            </ComboboxOption>
+          </ComboboxOptions>
+        </TransitionRoot>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import Spinner from "../Spinner.vue";
+import { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
+import type { WearableTypeViewModel } from "@/viewmodels/admin/unit/wearable/wearableType.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:model-value"],
+  watch: {
+    modelValue() {
+      if (this.initialLoaded) return;
+      this.initialLoaded = true;
+      this.loadWearableTypeInitial();
+    },
+    query() {
+      this.deferingSearch = true;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.deferingSearch = false;
+        this.search();
+      }, 600);
+    },
+  },
+  data() {
+    return {
+      initialLoaded: false as boolean,
+      loading: false as boolean,
+      deferingSearch: false as boolean,
+      timer: undefined as any,
+      query: "" as string,
+      all: [] as Array<WearableTypeViewModel>,
+      filtered: [] as Array<WearableTypeViewModel>,
+      chosen: undefined as undefined | WearableTypeViewModel,
+    };
+  },
+  computed: {
+    available() {
+      return this.query == "" ? this.all : this.filtered;
+    },
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.chosen = this.getWearableTypeFromSearch(val);
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  mounted() {
+    this.loadWearableTypeInitial();
+    this.preloadAll();
+  },
+  methods: {
+    ...mapActions(useWearableTypeStore, ["searchWearableTypes", "fetchWearableTypeById", "getAllWearableTypes"]),
+    preloadAll() {
+      this.loading = true;
+      this.getAllWearableTypes()
+        .then((res) => {
+          this.all = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    search() {
+      this.filtered = [];
+      if (this.query == "") return;
+      this.loading = true;
+      this.searchWearableTypes(this.query)
+        .then((res) => {
+          this.filtered = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    getWearableTypeFromSearch(id: string) {
+      return this.all.find((f) => f.id == id);
+    },
+    loadWearableTypeInitial() {
+      if (this.modelValue == "") return;
+      this.fetchWearableTypeById(this.modelValue)
+        .then((res) => {
+          this.chosen = res.data;
+        })
+        .catch(() => {});
+    },
+  },
+});
+</script>
diff --git a/src/enums/inspectionEnum.ts b/src/enums/inspectionEnum.ts
new file mode 100644
index 0000000..58143e6
--- /dev/null
+++ b/src/enums/inspectionEnum.ts
@@ -0,0 +1,6 @@
+export enum InspectionPointEnum {
+  oknok = "oknok",
+  text = "text",
+  number = "number",
+  file = "file",
+}
diff --git a/src/enums/socketEnum.ts b/src/enums/socketEnum.ts
new file mode 100644
index 0000000..4aed946
--- /dev/null
+++ b/src/enums/socketEnum.ts
@@ -0,0 +1,4 @@
+export enum SocketConnectionTypes {
+  scanner = "/scanner",
+  pscanner = "/public_scanner",
+}
diff --git a/src/global.ts b/src/global.ts
new file mode 100644
index 0000000..883938e
--- /dev/null
+++ b/src/global.ts
@@ -0,0 +1,4 @@
+declare global {
+  //type Optional<T> = T | { [K in keyof T]?: never };
+  type Optional<T> = T | never;
+}
diff --git a/src/helpers/scanner.ts b/src/helpers/scanner.ts
new file mode 100644
index 0000000..6894088
--- /dev/null
+++ b/src/helpers/scanner.ts
@@ -0,0 +1,143 @@
+import type { BarcodeFormat, DetectedBarcode } from "barcode-detector/pure";
+
+/*** select camera ***/
+export interface Camera {
+  label: string;
+  constraints: {
+    deviceId?: string;
+    facingMode: string;
+  };
+}
+export const defaultConstraintOptions: Array<Camera> = [
+  { label: "rear camera", constraints: { facingMode: "environment" } },
+  { label: "front camera", constraints: { facingMode: "user" } },
+];
+
+export async function getAvailableCameras(useDefault: boolean = false): Promise<Array<Camera>> {
+  // NOTE: on iOS we can't invoke `enumerateDevices` before the user has given
+  // camera access permission. `QrcodeStream` internally takes care of
+  // requesting the permissions. The `camera-on` event should guarantee that this
+  // has happened.
+  const devices = await navigator.mediaDevices.enumerateDevices();
+  const videoDevices = devices.filter(({ kind }) => kind === "videoinput");
+
+  return [
+    ...(useDefault ? defaultConstraintOptions : []),
+    ...videoDevices.map(({ deviceId, label }) => ({
+      label: `${label}`, //(ID: ${deviceId})
+      constraints: { deviceId, facingMode: "custom" },
+    })),
+  ];
+}
+
+/*** track functons ***/
+export function paintOutline(detectedCodes: DetectedBarcode[], ctx: CanvasRenderingContext2D) {
+  for (const detectedCode of detectedCodes) {
+    const [firstPoint, ...otherPoints] = detectedCode.cornerPoints;
+
+    ctx.strokeStyle = "red";
+
+    ctx.beginPath();
+    ctx.moveTo(firstPoint.x, firstPoint.y);
+    for (const { x, y } of otherPoints) {
+      ctx.lineTo(x, y);
+    }
+    ctx.lineTo(firstPoint.x, firstPoint.y);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+export function paintBoundingBox(detectedCodes: DetectedBarcode[], ctx: CanvasRenderingContext2D) {
+  for (const detectedCode of detectedCodes) {
+    const {
+      boundingBox: { x, y, width, height },
+    } = detectedCode;
+
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = "#007bff";
+    ctx.strokeRect(x, y, width, height);
+  }
+}
+export function paintCenterText(detectedCodes: DetectedBarcode[], ctx: CanvasRenderingContext2D) {
+  for (const detectedCode of detectedCodes) {
+    const { boundingBox, rawValue } = detectedCode;
+
+    const centerX = boundingBox.x + boundingBox.width / 2;
+    const centerY = boundingBox.y + boundingBox.height / 2;
+
+    const fontSize = Math.max(12, (50 * boundingBox.width) / ctx.canvas.width);
+
+    ctx.font = `bold ${fontSize}px sans-serif`;
+    ctx.textAlign = "center";
+
+    ctx.lineWidth = 3;
+    ctx.strokeStyle = "#35495e";
+    ctx.strokeText(detectedCode.rawValue, centerX, centerY);
+
+    ctx.fillStyle = "#5cb984";
+    ctx.fillText(rawValue, centerX, centerY);
+  }
+}
+export const trackFunctionOptions = [
+  { text: "nothing (default)", value: undefined },
+  { text: "outline", value: paintOutline },
+  { text: "centered text", value: paintCenterText },
+  { text: "bounding box", value: paintBoundingBox },
+  {
+    text: "mixed",
+    value: (detectedCodes: DetectedBarcode[], ctx: CanvasRenderingContext2D) => {
+      paintOutline(detectedCodes, ctx);
+      paintCenterText(detectedCodes, ctx);
+    },
+  },
+];
+
+/*** barcode formats ***/
+export const barcodeFormats: Array<BarcodeFormat> = [
+  "aztec",
+  "code_128",
+  "code_39",
+  "code_93",
+  "codabar",
+  "databar",
+  "databar_expanded",
+  "data_matrix",
+  "dx_film_edge",
+  "ean_13",
+  "ean_8",
+  "itf",
+  "maxi_code",
+  "micro_qr_code",
+  "pdf417",
+  "qr_code",
+  "rm_qr_code",
+  "upc_a",
+  "upc_e",
+  "linear_codes",
+  "matrix_codes",
+];
+
+/*** error handling ***/
+export function handleScannerError(err: Error) {
+  let error = `[${err.name}]: `;
+
+  if (err.name === "NotAllowedError") {
+    error += "you need to grant camera access permission";
+  } else if (err.name === "NotFoundError") {
+    error += "no camera on this device";
+  } else if (err.name === "NotSupportedError") {
+    error += "secure context required (HTTPS, localhost)";
+  } else if (err.name === "NotReadableError") {
+    error += "is the camera already in use?";
+  } else if (err.name === "OverconstrainedError") {
+    error += "installed cameras are not suitable";
+  } else if (err.name === "StreamApiNotSupportedError") {
+    error += "Stream API is not supported in this browser";
+  } else if (err.name === "InsecureContextError") {
+    error += "Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.";
+  } else {
+    error += err.message;
+  }
+
+  return error;
+}
diff --git a/src/main.css b/src/main.css
index a334a51..9c0b7b3 100644
--- a/src/main.css
+++ b/src/main.css
@@ -68,26 +68,33 @@ body {
 
 /*:not([headlessui]):not([id*="headlessui"]):not([class*="headlessui"])*/
 button:not([class*="ql"] *):not([class*="fc"]):not([id*="headlessui-combobox"]),
-a[button] {
+[button] {
   @apply cursor-pointer relative box-border h-10 w-full flex justify-center py-2 px-4 text-sm font-medium rounded-md focus:outline-hidden focus:ring-0;
 }
 
 button[primary]:not([primary="false"]),
-a[button][primary]:not([primary="false"]) {
-  @apply border-2 border-transparent text-white bg-primary hover:bg-primary;
+[button][primary]:not([primary="false"]) {
+  @apply border-2 border-transparent text-white bg-primary hover:bg-accent;
 }
 
 button[primary-outline]:not([primary-outline="false"]),
-a[button][primary-outline]:not([primary-outline="false"]) {
-  @apply border-2 border-primary text-black hover:bg-primary;
+[button][primary-outline]:not([primary-outline="false"]) {
+  @apply border-2 border-primary text-black hover:bg-primary hover:text-white;
 }
 
 button:disabled,
-a[button]:disabled,
-a[button].disabled {
+[button]:disabled,
+[button].disabled,
+[button][disabled="true"] {
   @apply opacity-75 pointer-events-none;
 }
 
+a:disabled,
+a.disabled,
+a[disabled="true"] {
+  @apply cursor-default pointer-events-none;
+}
+
 input:not([type="checkbox"]),
 textarea,
 select {
@@ -97,12 +104,14 @@ select {
 input[readonly],
 textarea[readonly],
 select[readonly] {
-  @apply select-none;
+  @apply select-none focus:border-gray-300 cursor-default;
   /* pointer-events-none; */
 }
 
 input[disabled],
-textarea[disabled],
+textarea[disabled] {
+  @apply opacity-75;
+}
 select[disabled] {
   @apply opacity-75 pointer-events-none;
 }
diff --git a/src/router/memberGuard.ts b/src/router/club/memberGuard.ts
similarity index 93%
rename from src/router/memberGuard.ts
rename to src/router/club/memberGuard.ts
index de09386..843be39 100644
--- a/src/router/memberGuard.ts
+++ b/src/router/club/memberGuard.ts
@@ -4,7 +4,7 @@ import { useMemberAwardStore } from "@/stores/admin/club/member/memberAward";
 import { useMemberExecutivePositionStore } from "@/stores/admin/club/member/memberExecutivePosition";
 import { useMemberQualificationStore } from "@/stores/admin/club/member/memberQualification";
 import { useMembershipStore } from "@/stores/admin/club/member/membership";
-import { useMemberEducationStore } from "../stores/admin/club/member/memberEducation";
+import { useMemberEducationStore } from "@/stores/admin/club/member/memberEducation";
 
 export async function setMemberId(to: any, from: any, next: any) {
   const member = useMemberStore();
diff --git a/src/router/newsletterGuard.ts b/src/router/club/newsletterGuard.ts
similarity index 100%
rename from src/router/newsletterGuard.ts
rename to src/router/club/newsletterGuard.ts
diff --git a/src/router/protocolGuard.ts b/src/router/club/protocolGuard.ts
similarity index 100%
rename from src/router/protocolGuard.ts
rename to src/router/club/protocolGuard.ts
diff --git a/src/router/index.ts b/src/router/index.ts
index 35b677a..207acd2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,10 +5,23 @@ import { isAuthenticated } from "./authGuard";
 import { isSetup } from "./setupGuard";
 import { abilityAndNavUpdate } from "./adminGuard";
 import type { PermissionType, PermissionSection, PermissionModule } from "@/types/permissionTypes";
-import { resetMemberStores, setMemberId } from "./memberGuard";
-import { resetProtocolStores, setProtocolId } from "./protocolGuard";
-import { resetNewsletterStores, setNewsletterId } from "./newsletterGuard";
-import { setBackupPage } from "./backupGuard";
+import { resetMemberStores, setMemberId } from "./club/memberGuard";
+import { resetProtocolStores, setProtocolId } from "./club/protocolGuard";
+import { resetNewsletterStores, setNewsletterId } from "./club/newsletterGuard";
+import { setBackupPage } from "./management/backupGuard";
+import { resetEquipmentTypeStores, setEquipmentTypeId } from "./unit/equipmentType";
+import { resetEquipmentStores, setEquipmentId } from "./unit/equipment";
+import { resetVehicleStores, setVehicleId } from "./unit/vehicle";
+import { resetRespiratoryGearStores, setRespiratoryGearId } from "./unit/respiratoryGear";
+import { resetRespiratoryWearerStores, setRespiratoryWearerId } from "./unit/respiratoryWearer";
+import { resetRespiratoryMissionStores, setRespiratoryMissionId } from "./unit/respiratoryMission";
+import { resetWearableStores, setWearableId } from "./unit/wearable";
+import { resetInspectionPlanStores, setInspectionPlanId } from "./unit/inspectionPlan";
+import { setVehicleTypeId } from "./unit/vehicleType";
+import { resetInspectionStores, setInspectionId } from "./unit/inspection";
+import { setWearableTypeId } from "./unit/wearableType";
+import { resetDamageReportStores, setDamageReportId } from "./unit/damageReport";
+import { resetRepairStores, setRepairId } from "./unit/repair";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -309,6 +322,761 @@ const router = createRouter({
             },
           ],
         },
+        {
+          path: "unit",
+          name: "admin-unit",
+          component: () => import("@/views/RouterView.vue"),
+          meta: { type: "read", section: "unit" },
+          beforeEnter: [abilityAndNavUpdate],
+          children: [
+            {
+              path: "",
+              name: "admin-unit-default",
+              component: () => import("@/views/admin/ViewSelect.vue"),
+              meta: { type: "read", section: "unit" },
+              beforeEnter: [abilityAndNavUpdate],
+            },
+            {
+              path: "equipment",
+              name: "admin-unit-equipment-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "unit", module: "equipment" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-equipment",
+                  component: () => import("@/views/admin/unit/equipment/Equipment.vue"),
+                  beforeEnter: [resetEquipmentStores],
+                },
+                {
+                  path: "create",
+                  name: "admin-unit-equipment-create",
+                  component: () => import("@/views/admin/unit/equipment/CreateEquipment.vue"),
+                  meta: { type: "create", section: "unit", module: "equipment" },
+                  beforeEnter: [abilityAndNavUpdate],
+                },
+                {
+                  path: ":equipmentId",
+                  name: "admin-unit-equipment-routing",
+                  component: () => import("@/views/admin/unit/equipment/EquipmentRouting.vue"),
+                  beforeEnter: [setEquipmentId],
+                  props: true,
+                  children: [
+                    {
+                      path: "overview",
+                      name: "admin-unit-equipment-overview",
+                      component: () => import("@/views/admin/unit/equipment/Overview.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "maintenance",
+                      name: "admin-unit-equipment-maintenance",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "repair",
+                      name: "admin-unit-equipment-repair",
+                      component: () => import("@/views/admin/unit/equipment/Repair.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "inspection",
+                      name: "admin-unit-equipment-inspection",
+                      component: () => import("@/views/admin/unit/equipment/Inspection.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "report",
+                      name: "admin-unit-equipment-damage_report",
+                      component: () => import("@/views/admin/unit/equipment/DamageReport.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "edit",
+                      name: "admin-unit-equipment-edit",
+                      component: () => import("@/views/admin/unit/equipment/UpdateEquipment.vue"),
+                      meta: { type: "update", section: "unit", module: "equipment" },
+                      beforeEnter: [abilityAndNavUpdate],
+                      props: true,
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              path: "vehicle",
+              name: "admin-unit-vehicle-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "unit", module: "vehicle" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-vehicle",
+                  component: () => import("@/views/admin/unit/vehicle/Vehicle.vue"),
+                  beforeEnter: [resetVehicleStores],
+                },
+                {
+                  path: "create",
+                  name: "admin-unit-vehicle-create",
+                  component: () => import("@/views/admin/unit/vehicle/CreateVehicle.vue"),
+                  meta: { type: "create", section: "unit", module: "vehicle" },
+                  beforeEnter: [abilityAndNavUpdate],
+                },
+                {
+                  path: ":vehicleId",
+                  name: "admin-unit-vehicle-routing",
+                  component: () => import("@/views/admin/unit/vehicle/VehicleRouting.vue"),
+                  beforeEnter: [setVehicleId],
+                  props: true,
+                  children: [
+                    {
+                      path: "overview",
+                      name: "admin-unit-vehicle-overview",
+                      component: () => import("@/views/admin/unit/vehicle/Overview.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "maintenance",
+                      name: "admin-unit-vehicle-maintenance",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "repair",
+                      name: "admin-unit-vehicle-repair",
+                      component: () => import("@/views/admin/unit/vehicle/Repair.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "inspection",
+                      name: "admin-unit-vehicle-inspection",
+                      component: () => import("@/views/admin/unit/vehicle/Inspection.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "report",
+                      name: "admin-unit-vehicle-damage_report",
+                      component: () => import("@/views/admin/unit/vehicle/DamageReport.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "edit",
+                      name: "admin-unit-vehicle-edit",
+                      component: () => import("@/views/admin/unit/vehicle/UpdateVehicle.vue"),
+                      meta: { type: "update", section: "unit", module: "vehicle" },
+                      beforeEnter: [abilityAndNavUpdate],
+                      props: true,
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              path: "wearable",
+              name: "admin-unit-wearable-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "unit", module: "wearable" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-wearable",
+                  component: () => import("@/views/admin/unit/wearable/Wearable.vue"),
+                  beforeEnter: [resetWearableStores],
+                },
+                {
+                  path: "create",
+                  name: "admin-unit-wearable-create",
+                  component: () => import("@/views/admin/unit/wearable/CreateWearable.vue"),
+                  meta: { type: "create", section: "unit", module: "wearable" },
+                  beforeEnter: [abilityAndNavUpdate],
+                },
+                {
+                  path: ":wearableId",
+                  name: "admin-unit-wearable-routing",
+                  component: () => import("@/views/admin/unit/wearable/WearableRouting.vue"),
+                  beforeEnter: [setWearableId],
+                  props: true,
+                  children: [
+                    {
+                      path: "overview",
+                      name: "admin-unit-wearable-overview",
+                      component: () => import("@/views/admin/unit/wearable/Overview.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "maintenance",
+                      name: "admin-unit-wearable-maintenance",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "repair",
+                      name: "admin-unit-wearable-repair",
+                      component: () => import("@/views/admin/unit/wearable/Repair.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "inspection",
+                      name: "admin-unit-wearable-inspection",
+                      component: () => import("@/views/admin/unit/wearable/Inspection.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "report",
+                      name: "admin-unit-wearable-damage_report",
+                      component: () => import("@/views/admin/unit/wearable/DamageReport.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "edit",
+                      name: "admin-unit-wearable-edit",
+                      component: () => import("@/views/admin/unit/wearable/UpdateWearable.vue"),
+                      meta: { type: "update", section: "unit", module: "wearable" },
+                      beforeEnter: [abilityAndNavUpdate],
+                      props: true,
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              path: "respiratory-gear",
+              name: "admin-unit-respiratory_gear-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "unit", module: "respiratory_gear" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-respiratory_gear",
+                  component: () => import("@/views/admin/unit/respiratoryGear/RespiratoryGear.vue"),
+                  beforeEnter: [resetRespiratoryGearStores],
+                },
+                {
+                  path: "create",
+                  name: "admin-unit-respiratory_gear-create",
+                  component: () => import("@/views/admin/unit/respiratoryGear/CreateRespiratoryGear.vue"),
+                  meta: { type: "create", section: "unit", module: "respiratory_gear" },
+                  beforeEnter: [abilityAndNavUpdate],
+                },
+                {
+                  path: ":respiratoryGearId",
+                  name: "admin-unit-respiratory_gear-routing",
+                  component: () => import("@/views/admin/unit/respiratoryGear/RespiratoryGearRouting.vue"),
+                  beforeEnter: [setRespiratoryGearId],
+                  props: true,
+                  children: [
+                    {
+                      path: "overview",
+                      name: "admin-unit-respiratory_gear-overview",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "maintenance",
+                      name: "admin-unit-respiratory_gear-maintenance",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "inspection",
+                      name: "admin-unit-respiratory_gear-inspection",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "mission",
+                      name: "admin-unit-respiratory_gear-mission",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              path: "respiratory-wearer",
+              name: "admin-unit-respiratory_wearer-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "unit", module: "respiratory_wearer" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-respiratory_wearer",
+                  component: () => import("@/views/admin/unit/respiratoryWearer/RespiratoryWearer.vue"),
+                  beforeEnter: [resetRespiratoryWearerStores],
+                },
+                {
+                  path: "create",
+                  name: "admin-unit-respiratory_wearer-create",
+                  component: () => import("@/views/admin/unit/respiratoryWearer/CreateRespiratoryWearer.vue"),
+                  meta: { type: "create", section: "unit", module: "respiratory_wearer" },
+                  beforeEnter: [abilityAndNavUpdate],
+                },
+                {
+                  path: ":respiratoryWearerId",
+                  name: "admin-unit-respiratory_wearer-routing",
+                  component: () => import("@/views/admin/unit/respiratoryWearer/RespiratoryWearerRouting.vue"),
+                  beforeEnter: [setRespiratoryWearerId],
+                  props: true,
+                  children: [
+                    {
+                      path: "overview",
+                      name: "admin-unit-respiratory_wearer-overview",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "mission",
+                      name: "admin-unit-respiratory_wearer-mission",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "education",
+                      name: "admin-unit-respiratory_wearer-education",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "instruction",
+                      name: "admin-unit-respiratory_wearer-instruction",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "screening",
+                      name: "admin-unit-respiratory_wearer-screening",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "strain",
+                      name: "admin-unit-respiratory_wearer-strain",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              path: "respiratory-mission",
+              name: "admin-unit-respiratory_mission-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "unit", module: "respiratory_mission" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-respiratory_mission",
+                  component: () => import("@/views/admin/unit/respiratoryMission/RespiratoryMission.vue"),
+                  beforeEnter: [resetRespiratoryMissionStores],
+                },
+                {
+                  path: "create",
+                  name: "admin-unit-respiratory_mission-create",
+                  component: () => import("@/views/admin/unit/respiratoryMission/CreateRespiratoryMission.vue"),
+                  meta: { type: "create", section: "unit", module: "respiratory_mission" },
+                  beforeEnter: [abilityAndNavUpdate],
+                },
+                {
+                  path: ":respiratoryMissionId",
+                  name: "admin-unit-respiratory_mission-routing",
+                  component: () => import("@/views/admin/unit/respiratoryMission/RespiratoryMissionRouting.vue"),
+                  beforeEnter: [setRespiratoryMissionId],
+                  props: true,
+                  children: [
+                    {
+                      path: "overview",
+                      name: "admin-unit-respiratory_mission-overview",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "wearer",
+                      name: "admin-unit-respiratory_mission-wearer",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "gear",
+                      name: "admin-unit-respiratory_mission-gear",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              path: "damage-report",
+              name: "admin-unit-damage_report-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "unit", module: "damage_report" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-damage_report",
+                  redirect: { name: "admin-unit-damage_report-open" },
+                },
+                {
+                  path: "status",
+                  name: "admin-unit-damage_report-statusrouting",
+                  component: () => import("@/views/admin/unit/damageReport/DamageReportStatusRouting.vue"),
+                  beforeEnter: [resetDamageReportStores],
+                  children: [
+                    {
+                      path: "",
+                      name: "admin-unit-damage_report-status",
+                      redirect: { name: "admin-unit-damage_report-open" },
+                    },
+                    {
+                      path: "open",
+                      name: "admin-unit-damage_report-open",
+                      component: () => import("@/views/admin/unit/damageReport/DamageReport.vue"),
+                    },
+                    {
+                      path: "done",
+                      name: "admin-unit-damage_report-done",
+                      component: () => import("@/views/admin/unit/damageReport/DamageReportClosed.vue"),
+                    },
+                  ],
+                },
+                {
+                  path: ":damageReportId",
+                  name: "admin-unit-damage_report-routing",
+                  component: () => import("@/views/admin/unit/damageReport/DamageReportRouting.vue"),
+                  beforeEnter: [setDamageReportId],
+                  props: true,
+                  children: [
+                    {
+                      path: "",
+                      name: "admin-unit-damage_report-overview",
+                      component: () => import("@/views/admin/unit/damageReport/Overview.vue"),
+                      props: true,
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              path: "repair",
+              name: "admin-unit-repair-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "unit", module: "repair" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-repair",
+                  redirect: { name: "admin-unit-repair-open" },
+                },
+                {
+                  path: "status",
+                  name: "admin-unit-repair-statusrouting",
+                  component: () => import("@/views/admin/unit/repair/RepairStatusRouting.vue"),
+                  beforeEnter: [resetRepairStores],
+                  children: [
+                    {
+                      path: "",
+                      name: "admin-unit-repair-status",
+                      redirect: { name: "admin-unit-repair-open" },
+                    },
+                    {
+                      path: "open",
+                      name: "admin-unit-repair-open",
+                      component: () => import("@/views/admin/unit/repair/RepairOpen.vue"),
+                    },
+                    {
+                      path: "done",
+                      name: "admin-unit-repair-done",
+                      component: () => import("@/views/admin/unit/repair/RepairClosed.vue"),
+                    },
+                  ],
+                },
+                {
+                  path: "create/:type?/:relatedId?",
+                  name: "admin-unit-repair-create",
+                  component: () => import("@/views/admin/unit/repair/RepairCreate.vue"),
+                  meta: { type: "create", section: "unit", module: "repair" },
+                  beforeEnter: [abilityAndNavUpdate],
+                  props: true,
+                },
+                {
+                  path: "execute/:repairId",
+                  name: "admin-unit-repair-routing",
+                  component: () => import("@/views/admin/unit/repair/RepairRouting.vue"),
+                  beforeEnter: [setRepairId],
+                  props: true,
+                  children: [
+                    {
+                      path: "",
+                      name: "admin-unit-repair-overview",
+                      component: () => import("@/views/admin/unit/repair/Overview.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "reports",
+                      name: "admin-unit-repair-reports",
+                      component: () => import("@/views/admin/unit/repair/DamageReports.vue"),
+                      props: true,
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              path: "maintenance",
+              name: "admin-unit-maintenance-route",
+              component: () => import("@/views/admin/unit/maintenance/MaintenanceRouting.vue"),
+              meta: { type: "read", section: "unit", module: "maintenance" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-maintenance",
+                  component: () => import("@/views/admin/unit/maintenance/Maintenance.vue"),
+                },
+                {
+                  path: "done",
+                  name: "admin-unit-maintenance-done",
+                  component: () => import("@/views/admin/unit/maintenance/Maintenance.vue"),
+                },
+              ],
+            },
+            {
+              path: "equipment-type",
+              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"),
+                  beforeEnter: [resetEquipmentTypeStores],
+                },
+                {
+                  path: ":equipmentTypeId",
+                  name: "admin-unit-equipment_type-routing",
+                  component: () => import("@/views/admin/unit/equipmentType/EquipmentTypeRouting.vue"),
+                  beforeEnter: [setEquipmentTypeId],
+                  props: true,
+                  children: [
+                    {
+                      path: "overview",
+                      name: "admin-unit-equipment_type-overview",
+                      component: () => import("@/views/admin/unit/equipmentType/Overview.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "inspection-plan",
+                      name: "admin-unit-equipment_type-inspection_plan",
+                      component: () => import("@/views/admin/unit/equipmentType/InspectionPlans.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "edit",
+                      name: "admin-unit-equipment_type-edit",
+                      component: () => import("@/views/admin/unit/equipmentType/UpdateEquipmentType.vue"),
+                      meta: { type: "update", section: "unit", module: "equipment_type" },
+                      beforeEnter: [abilityAndNavUpdate],
+                      props: true,
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              path: "vehicle-type",
+              name: "admin-unit-vehicle_type-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "unit", module: "vehicle_type" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-vehicle_type",
+                  component: () => import("@/views/admin/unit/vehicleType/VehicleType.vue"),
+                },
+                {
+                  path: ":vehicleTypeId",
+                  name: "admin-unit-vehicle_type-routing",
+                  component: () => import("@/views/admin/unit/vehicleType/VehicleTypeRouting.vue"),
+                  beforeEnter: [setVehicleTypeId],
+                  props: true,
+                  children: [
+                    {
+                      path: "overview",
+                      name: "admin-unit-vehicle_type-overview",
+                      component: () => import("@/views/admin/unit/vehicleType/Overview.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "inspection-plan",
+                      name: "admin-unit-vehicle_type-inspection_plan",
+                      component: () => import("@/views/admin/unit/vehicleType/InspectionPlans.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "edit",
+                      name: "admin-unit-vehicle_type-edit",
+                      component: () => import("@/views/admin/unit/vehicleType/UpdateVehicleType.vue"),
+                      meta: { type: "update", section: "unit", module: "vehicle_type" },
+                      beforeEnter: [abilityAndNavUpdate],
+                      props: true,
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              path: "wearable-type",
+              name: "admin-unit-wearable_type-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "unit", module: "wearable_type" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-wearable_type",
+                  component: () => import("@/views/admin/unit/wearableType/WearableType.vue"),
+                },
+                {
+                  path: ":wearableTypeId",
+                  name: "admin-unit-wearable_type-routing",
+                  component: () => import("@/views/admin/unit/wearableType/WearableTypeRouting.vue"),
+                  beforeEnter: [setWearableTypeId],
+                  props: true,
+                  children: [
+                    {
+                      path: "overview",
+                      name: "admin-unit-wearable_type-overview",
+                      component: () => import("@/views/admin/unit/wearableType/Overview.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "inspection-plan",
+                      name: "admin-unit-wearable_type-inspection_plan",
+                      component: () => import("@/views/admin/unit/wearableType/InspectionPlans.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "edit",
+                      name: "admin-unit-wearable_type-edit",
+                      component: () => import("@/views/admin/unit/wearableType/UpdateWearableType.vue"),
+                      meta: { type: "update", section: "unit", module: "wearable_type" },
+                      beforeEnter: [abilityAndNavUpdate],
+                      props: true,
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              path: "inspection-plan",
+              name: "admin-unit-inspection_plan-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "unit", module: "inspection_plan" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-inspection_plan",
+                  component: () => import("@/views/admin/unit/inspectionPlan/InspectionPlan.vue"),
+                  beforeEnter: [resetInspectionPlanStores],
+                },
+                {
+                  path: "create",
+                  name: "admin-unit-inspection_plan-create",
+                  component: () => import("@/views/admin/unit/inspectionPlan/CreateInspectionPlan.vue"),
+                  meta: { type: "create", section: "unit", module: "inspection_plan" },
+                  beforeEnter: [abilityAndNavUpdate],
+                },
+                {
+                  path: ":inspectionPlanId",
+                  name: "admin-unit-inspection_plan-routing",
+                  component: () => import("@/views/admin/unit/inspectionPlan/InspectionPlanRouting.vue"),
+                  beforeEnter: [setInspectionPlanId],
+                  props: true,
+                  children: [
+                    {
+                      path: "",
+                      name: "admin-unit-inspection_plan-overview",
+                      component: () => import("@/views/admin/unit/inspectionPlan/Overview.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "edit",
+                      name: "admin-unit-inspection_plan-edit",
+                      component: () => import("@/views/admin/unit/inspectionPlan/UpdateInspectionPlan.vue"),
+                      meta: { type: "update", section: "unit", module: "inspection_plan" },
+                      beforeEnter: [abilityAndNavUpdate],
+                      props: true,
+                    },
+                    {
+                      path: "pointedit",
+                      name: "admin-unit-inspection_plan-pointedit",
+                      component: () => import("@/views/admin/unit/inspectionPlan/UpdateInspectionPlanPoints.vue"),
+                      meta: { type: "update", section: "unit", module: "inspection_plan" },
+                      beforeEnter: [abilityAndNavUpdate],
+                      props: true,
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              path: "inspection",
+              name: "admin-unit-inspection-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "create", section: "unit", module: "inspection" },
+              beforeEnter: [abilityAndNavUpdate, resetInspectionStores],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-inspection-routing",
+                  component: () => import("@/views/admin/unit/inspection/InspectionRouting.vue"),
+                  children: [
+                    {
+                      path: "next",
+                      name: "admin-unit-inspection",
+                      component: () => import("@/views/admin/unit/inspection/NextInspections.vue"),
+                    },
+                    {
+                      path: "running",
+                      name: "admin-unit-inspection-running",
+                      component: () => import("@/views/admin/unit/inspection/RunningInspections.vue"),
+                    },
+                  ],
+                },
+                {
+                  path: "start/:type?/:relatedId?/:inspectionPlanId?",
+                  name: "admin-unit-inspection-start",
+                  component: () => import("@/views/admin/unit/inspection/InspectionStart.vue"),
+                  meta: { type: "create", section: "unit", module: "inspection_plan" },
+                  beforeEnter: [abilityAndNavUpdate],
+                  props: true,
+                },
+                {
+                  path: "execute/:inspectionId",
+                  name: "admin-unit-inspection-execute",
+                  component: () => import("@/views/admin/unit/inspection/InspectionExecute.vue"),
+                  beforeEnter: [setInspectionId],
+                  props: true,
+                },
+              ],
+            },
+          ],
+        },
         {
           path: "configuration",
           name: "admin-configuration",
@@ -778,6 +1546,29 @@ const router = createRouter({
           name: "public-calendar-explain",
           component: () => import("@/views/public/calendar/CalendarExplain.vue"),
         },
+        {
+          path: "scanner",
+          name: "public-scanner-routing",
+          component: () => import("@/views/public/scanner/ScannerRouting.vue"),
+          children: [
+            {
+              path: "",
+              name: "public-scanner-select",
+              component: () => import("@/views/public/scanner/RoomSelect.vue"),
+            },
+            {
+              path: ":room",
+              name: "public-scanner-room",
+              component: () => import("@/views/public/scanner/Scanner.vue"),
+              props: true,
+            },
+          ],
+        },
+        {
+          path: "damagereport",
+          name: "public-damage_report",
+          component: () => import("@/views/public/damageReport/Report.vue"),
+        },
       ],
     },
     {
diff --git a/src/router/backupGuard.ts b/src/router/management/backupGuard.ts
similarity index 100%
rename from src/router/backupGuard.ts
rename to src/router/management/backupGuard.ts
diff --git a/src/router/unit/damageReport.ts b/src/router/unit/damageReport.ts
new file mode 100644
index 0000000..4a649bf
--- /dev/null
+++ b/src/router/unit/damageReport.ts
@@ -0,0 +1,20 @@
+import { useDamageReportStore } from "@/stores/admin/unit/damageReport";
+
+export async function setDamageReportId(to: any, from: any, next: any) {
+  const damageReportStore = useDamageReportStore();
+  damageReportStore.activeDamageReport = to.params?.damageReportId ?? null;
+
+  //xystore().$reset();
+
+  next();
+}
+
+export async function resetDamageReportStores(to: any, from: any, next: any) {
+  const damageReportStore = useDamageReportStore();
+  damageReportStore.activeDamageReport = null;
+  damageReportStore.activeDamageReportObj = null;
+
+  //xystore().$reset();
+
+  next();
+}
diff --git a/src/router/unit/equipment.ts b/src/router/unit/equipment.ts
new file mode 100644
index 0000000..99cb01c
--- /dev/null
+++ b/src/router/unit/equipment.ts
@@ -0,0 +1,27 @@
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+import { useEquipmentDamageReportStore } from "@/stores/admin/unit/equipment/damageReport";
+import { useEquipmentInspectionStore } from "@/stores/admin/unit/equipment/inspection";
+import { useEquipmentRepairStore } from "@/stores/admin/unit/equipment/repair";
+
+export async function setEquipmentId(to: any, from: any, next: any) {
+  const equipmentStore = useEquipmentStore();
+  equipmentStore.activeEquipment = to.params?.equipmentId ?? null;
+
+  useEquipmentDamageReportStore().$reset();
+  useEquipmentInspectionStore().$reset();
+  useEquipmentRepairStore().$reset();
+
+  next();
+}
+
+export async function resetEquipmentStores(to: any, from: any, next: any) {
+  const equipmentStore = useEquipmentStore();
+  equipmentStore.activeEquipment = null;
+  equipmentStore.activeEquipmentObj = null;
+
+  useEquipmentDamageReportStore().$reset();
+  useEquipmentInspectionStore().$reset();
+  useEquipmentRepairStore().$reset();
+
+  next();
+}
diff --git a/src/router/unit/equipmentType.ts b/src/router/unit/equipmentType.ts
new file mode 100644
index 0000000..84ed750
--- /dev/null
+++ b/src/router/unit/equipmentType.ts
@@ -0,0 +1,21 @@
+import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
+import { useEquipmentTypeInspectionPlanStore } from "@/stores/admin/unit/equipmentType/inspectionPlan";
+
+export async function setEquipmentTypeId(to: any, from: any, next: any) {
+  const equipmentTypeStore = useEquipmentTypeStore();
+  equipmentTypeStore.activeEquipmentType = to.params?.equipmentTypeId ?? null;
+
+  useEquipmentTypeInspectionPlanStore().$reset();
+
+  next();
+}
+
+export async function resetEquipmentTypeStores(to: any, from: any, next: any) {
+  const equipmentTypeStore = useEquipmentTypeStore();
+  equipmentTypeStore.activeEquipmentType = null;
+  equipmentTypeStore.activeEquipmentTypeObj = null;
+
+  useEquipmentTypeInspectionPlanStore().$reset();
+
+  next();
+}
diff --git a/src/router/unit/inspection.ts b/src/router/unit/inspection.ts
new file mode 100644
index 0000000..3c1a30f
--- /dev/null
+++ b/src/router/unit/inspection.ts
@@ -0,0 +1,20 @@
+import { useInspectionStore } from "@/stores/admin/unit/inspection/inspection";
+
+export async function setInspectionId(to: any, from: any, next: any) {
+  const inspectionStore = useInspectionStore();
+  inspectionStore.activeInspection = to.params?.inspectionId ?? null;
+
+  //useXYStore().$reset();
+
+  next();
+}
+
+export async function resetInspectionStores(to: any, from: any, next: any) {
+  const inspectionStore = useInspectionStore();
+  inspectionStore.activeInspection = null;
+  inspectionStore.activeInspectionObj = null;
+
+  //useXYStore().$reset();
+
+  next();
+}
diff --git a/src/router/unit/inspectionPlan.ts b/src/router/unit/inspectionPlan.ts
new file mode 100644
index 0000000..ad950c1
--- /dev/null
+++ b/src/router/unit/inspectionPlan.ts
@@ -0,0 +1,21 @@
+import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
+import { useInspectionPointStore } from "@/stores/admin/unit/inspectionPlan/inspectionPoint";
+
+export async function setInspectionPlanId(to: any, from: any, next: any) {
+  const inspectionPlanStore = useInspectionPlanStore();
+  inspectionPlanStore.activeInspectionPlan = to.params?.inspectionPlanId ?? null;
+
+  useInspectionPointStore().$reset();
+
+  next();
+}
+
+export async function resetInspectionPlanStores(to: any, from: any, next: any) {
+  const inspectionPlanStore = useInspectionPlanStore();
+  inspectionPlanStore.activeInspectionPlan = null;
+  inspectionPlanStore.activeInspectionPlanObj = null;
+
+  useInspectionPointStore().$reset();
+
+  next();
+}
diff --git a/src/router/unit/repair.ts b/src/router/unit/repair.ts
new file mode 100644
index 0000000..dab9374
--- /dev/null
+++ b/src/router/unit/repair.ts
@@ -0,0 +1,20 @@
+import { useRepairStore } from "@/stores/admin/unit/repair";
+
+export async function setRepairId(to: any, from: any, next: any) {
+  const repairStore = useRepairStore();
+  repairStore.activeRepair = to.params?.repairId ?? null;
+
+  //xystore().$reset();
+
+  next();
+}
+
+export async function resetRepairStores(to: any, from: any, next: any) {
+  const repairStore = useRepairStore();
+  repairStore.activeRepair = null;
+  repairStore.activeRepairObj = null;
+
+  //xystore().$reset();
+
+  next();
+}
diff --git a/src/router/unit/respiratoryGear.ts b/src/router/unit/respiratoryGear.ts
new file mode 100644
index 0000000..e681332
--- /dev/null
+++ b/src/router/unit/respiratoryGear.ts
@@ -0,0 +1,20 @@
+import { useRespiratoryGearStore } from "@/stores/admin/unit/respiratoryGear/respiratoryGear";
+
+export async function setRespiratoryGearId(to: any, from: any, next: any) {
+  const respiratoryGearStore = useRespiratoryGearStore();
+  respiratoryGearStore.activeRespiratoryGear = to.params?.respiratoryGearId ?? null;
+
+  //useXYStore().$reset();
+
+  next();
+}
+
+export async function resetRespiratoryGearStores(to: any, from: any, next: any) {
+  const respiratoryGearStore = useRespiratoryGearStore();
+  respiratoryGearStore.activeRespiratoryGear = null;
+  respiratoryGearStore.activeRespiratoryGearObj = null;
+
+  //useXYStore().$reset();
+
+  next();
+}
diff --git a/src/router/unit/respiratoryMission.ts b/src/router/unit/respiratoryMission.ts
new file mode 100644
index 0000000..25272f5
--- /dev/null
+++ b/src/router/unit/respiratoryMission.ts
@@ -0,0 +1,20 @@
+import { useRespiratoryMissionStore } from "@/stores/admin/unit/respiratoryMission/respiratoryMission";
+
+export async function setRespiratoryMissionId(to: any, from: any, next: any) {
+  const respiratoryMissionStore = useRespiratoryMissionStore();
+  respiratoryMissionStore.activeRespiratoryMission = to.params?.respiratoryMissionId ?? null;
+
+  //useXYStore().$reset();
+
+  next();
+}
+
+export async function resetRespiratoryMissionStores(to: any, from: any, next: any) {
+  const respiratoryMissionStore = useRespiratoryMissionStore();
+  respiratoryMissionStore.activeRespiratoryMission = null;
+  respiratoryMissionStore.activeRespiratoryMissionObj = null;
+
+  //useXYStore().$reset();
+
+  next();
+}
diff --git a/src/router/unit/respiratoryWearer.ts b/src/router/unit/respiratoryWearer.ts
new file mode 100644
index 0000000..6057ee5
--- /dev/null
+++ b/src/router/unit/respiratoryWearer.ts
@@ -0,0 +1,20 @@
+import { useRespiratoryWearerStore } from "@/stores/admin/unit/respiratoryWearer/respiratoryWearer";
+
+export async function setRespiratoryWearerId(to: any, from: any, next: any) {
+  const respiratoryWearerStore = useRespiratoryWearerStore();
+  respiratoryWearerStore.activeRespiratoryWearer = to.params?.respiratoryWearerId ?? null;
+
+  //useXYStore().$reset();
+
+  next();
+}
+
+export async function resetRespiratoryWearerStores(to: any, from: any, next: any) {
+  const respiratoryWearerStore = useRespiratoryWearerStore();
+  respiratoryWearerStore.activeRespiratoryWearer = null;
+  respiratoryWearerStore.activeRespiratoryWearerObj = null;
+
+  //useXYStore().$reset();
+
+  next();
+}
diff --git a/src/router/unit/vehicle.ts b/src/router/unit/vehicle.ts
new file mode 100644
index 0000000..42df6fa
--- /dev/null
+++ b/src/router/unit/vehicle.ts
@@ -0,0 +1,27 @@
+import { useVehicleStore } from "@/stores/admin/unit/vehicle/vehicle";
+import { useVehicleDamageReportStore } from "@/stores/admin/unit/vehicle/damageReport";
+import { useVehicleInspectionStore } from "@/stores/admin/unit/vehicle/inspection";
+import { useVehicleRepairStore } from "@/stores/admin/unit/vehicle/repair";
+
+export async function setVehicleId(to: any, from: any, next: any) {
+  const vehicleStore = useVehicleStore();
+  vehicleStore.activeVehicle = to.params?.vehicleId ?? null;
+
+  useVehicleDamageReportStore().$reset();
+  useVehicleInspectionStore().$reset();
+  useVehicleRepairStore().$reset();
+
+  next();
+}
+
+export async function resetVehicleStores(to: any, from: any, next: any) {
+  const vehicleStore = useVehicleStore();
+  vehicleStore.activeVehicle = null;
+  vehicleStore.activeVehicleObj = null;
+
+  useVehicleDamageReportStore().$reset();
+  useVehicleInspectionStore().$reset();
+  useVehicleRepairStore().$reset();
+
+  next();
+}
diff --git a/src/router/unit/vehicleType.ts b/src/router/unit/vehicleType.ts
new file mode 100644
index 0000000..d7418b9
--- /dev/null
+++ b/src/router/unit/vehicleType.ts
@@ -0,0 +1,21 @@
+import { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
+import { useVehicleTypeInspectionPlanStore } from "@/stores/admin/unit/vehicleType/inspectionPlan";
+
+export async function setVehicleTypeId(to: any, from: any, next: any) {
+  const vehicleTypeStore = useVehicleTypeStore();
+  vehicleTypeStore.activeVehicleType = to.params?.vehicleTypeId ?? null;
+
+  useVehicleTypeInspectionPlanStore().$reset();
+
+  next();
+}
+
+export async function resetVehicleTypeStores(to: any, from: any, next: any) {
+  const vehicleTypeStore = useVehicleTypeStore();
+  vehicleTypeStore.activeVehicleType = null;
+  vehicleTypeStore.activeVehicleTypeObj = null;
+
+  useVehicleTypeInspectionPlanStore().$reset();
+
+  next();
+}
diff --git a/src/router/unit/wearable.ts b/src/router/unit/wearable.ts
new file mode 100644
index 0000000..b676831
--- /dev/null
+++ b/src/router/unit/wearable.ts
@@ -0,0 +1,27 @@
+import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
+import { useWearableDamageReportStore } from "@/stores/admin/unit/wearable/damageReport";
+import { useWearableRepairStore } from "@/stores/admin/unit/wearable/repair";
+import { useWearableInspectionStore } from "@/stores/admin/unit/wearable/inspection";
+
+export async function setWearableId(to: any, from: any, next: any) {
+  const wearableStore = useWearableStore();
+  wearableStore.activeWearable = to.params?.wearableId ?? null;
+
+  useWearableDamageReportStore().$reset();
+  useWearableInspectionStore().$reset();
+  useWearableRepairStore().$reset();
+
+  next();
+}
+
+export async function resetWearableStores(to: any, from: any, next: any) {
+  const wearableStore = useWearableStore();
+  wearableStore.activeWearable = null;
+  wearableStore.activeWearableObj = null;
+
+  useWearableDamageReportStore().$reset();
+  useWearableInspectionStore().$reset();
+  useWearableRepairStore().$reset();
+
+  next();
+}
diff --git a/src/router/unit/wearableType.ts b/src/router/unit/wearableType.ts
new file mode 100644
index 0000000..3b439ff
--- /dev/null
+++ b/src/router/unit/wearableType.ts
@@ -0,0 +1,21 @@
+import { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
+import { useWearableTypeInspectionPlanStore } from "@/stores/admin/unit/wearableType/inspectionPlan";
+
+export async function setWearableTypeId(to: any, from: any, next: any) {
+  const wearableTypeStore = useWearableTypeStore();
+  wearableTypeStore.activeWearableType = to.params?.wearableTypeId ?? null;
+
+  useWearableTypeInspectionPlanStore().$reset();
+
+  next();
+}
+
+export async function resetWearableTypeStores(to: any, from: any, next: any) {
+  const wearableTypeStore = useWearableTypeStore();
+  wearableTypeStore.activeWearableType = null;
+  wearableTypeStore.activeWearableTypeObj = null;
+
+  useWearableTypeInspectionPlanStore().$reset();
+
+  next();
+}
diff --git a/src/serverCom.ts b/src/serverCom.ts
index ad4d39f..5b10d28 100644
--- a/src/serverCom.ts
+++ b/src/serverCom.ts
@@ -78,7 +78,7 @@ http.interceptors.response.use(
   }
 );
 
-export async function refreshToken(): Promise<void> {
+async function refreshToken(): Promise<void> {
   return new Promise<void>(async (resolve, reject) => {
     await http
       .post(`/auth/refresh`, {
@@ -135,4 +135,4 @@ async function* streamingFetch(path: string, abort?: AbortController) {
   }
 }
 
-export { http, newEventSource, streamingFetch, host, url };
+export { http, newEventSource, streamingFetch, host, url, refreshToken };
diff --git a/src/socketManager.ts b/src/socketManager.ts
new file mode 100644
index 0000000..f2fd0a3
--- /dev/null
+++ b/src/socketManager.ts
@@ -0,0 +1,87 @@
+import { Manager, Socket } from "socket.io-client";
+import { refreshToken, url } from "./serverCom";
+import { useNotificationStore } from "./stores/notification";
+import { SocketConnectionTypes } from "./enums/socketEnum";
+
+export abstract class SocketManager {
+  private static readonly manager = new Manager(url, {
+    reconnection: true,
+    reconnectionDelayMax: 10000,
+  });
+  private static readonly connections = new Map<SocketConnectionTypes, Socket>();
+
+  public static establishConnection(
+    connection: SocketConnectionTypes,
+    restoreAfterDisconnect: boolean = false
+  ): Socket {
+    console.log("establish");
+    const existingSocket = this.connections.get(connection);
+    if (existingSocket !== undefined && existingSocket.connected) return existingSocket!;
+    console.log("create");
+    existingSocket?.removeAllListeners();
+
+    const notificationStore = useNotificationStore();
+    let socket = this.manager.socket(connection, {
+      auth: (cb) => {
+        cb({ token: localStorage.getItem("accessToken") });
+      },
+    });
+    socket.on("connect", () => {
+      notificationStore.push("Socket-Erfolg", `Verbindung aufgebaut`, "success");
+    });
+    socket.on("connect_error", (err) => {
+      this.socketHandleError(connection, err, true);
+    });
+    socket.on("disconnect", () => {
+      if (restoreAfterDisconnect) this.establishConnection(connection, restoreAfterDisconnect);
+      else notificationStore.push("Socket", `Verbindung getrennt`, "info");
+    });
+    socket.on("warning", (msg: string) => {
+      notificationStore.push("Socket-Warnung", msg, "warning");
+    });
+    socket.on("error", (msg: string) => {
+      this.socketHandleError(connection, {
+        name: "Error",
+        message: msg,
+      });
+    });
+
+    this.connections.set(connection, socket);
+    return socket;
+  }
+
+  public static getConnection(connection: SocketConnectionTypes) {
+    return this.connections.get(connection);
+  }
+
+  public static closeConnection(connection: SocketConnectionTypes) {
+    let socket = this.connections.get(connection);
+    if (socket) {
+      socket.removeAllListeners();
+      socket.disconnect();
+      this.connections.delete(connection);
+    }
+  }
+
+  private static socketHandleError(connection: SocketConnectionTypes, err: Error, onConnect = false) {
+    const notificationStore = useNotificationStore();
+
+    if (err.message == "xhr poll error") {
+      notificationStore.push("Socket-Netzwerk-Fehler", "Reconnect Versuch in 10s", "error");
+    } else if (err.message == "Token expired") {
+      notificationStore.push("Session", "Session wird verlängert", "info");
+      refreshToken()
+        .then(() => {
+          notificationStore.push("Session", "Session erfolgreich verlängert", "success");
+          this.closeConnection(connection);
+        })
+        .catch(() => {
+          notificationStore.push("Session-Fehler", "Anmeldung wurde nicht verlängert", "error");
+        });
+    } else if (onConnect) {
+      notificationStore.push("Socket-Fehler", `Verbindung fehlgeschlagen`, "error");
+    } else {
+      notificationStore.push("Socket-Fehler", err.message, "error");
+    }
+  }
+}
diff --git a/src/stores/admin/navigation.ts b/src/stores/admin/navigation.ts
index 566fccd..59f5df2 100644
--- a/src/stores/admin/navigation.ts
+++ b/src/stores/admin/navigation.ts
@@ -62,6 +62,15 @@ export const useNavigationStore = defineStore("navigation", {
               } as topLevelNavigationModel,
             ]
           : []),
+        ...(abilityStore.canAccessSection("unit")
+          ? [
+              {
+                key: "unit",
+                title: "Wehr",
+                levelDefault: "equipment",
+              } as topLevelNavigationModel,
+            ]
+          : []),
         ...(abilityStore.canAccessSection("configuration")
           ? [
               {
@@ -100,8 +109,46 @@ export const useNavigationStore = defineStore("navigation", {
             ...(abilityStore.can("read", "club", "listprint") ? [{ key: "listprint", title: "Liste Drucken" }] : []),
           ],
         },
+        unit: {
+          mainTitle: "Wehr",
+          main: [
+            ...(abilityStore.can("read", "unit", "equipment") ? [{ key: "equipment", title: "Gerätschaften" }] : []),
+            ...(abilityStore.can("read", "unit", "vehicle") ? [{ key: "vehicle", title: "Fahrzeuge" }] : []),
+            ...(abilityStore.can("read", "unit", "wearable") ? [{ key: "wearable", title: "Kleidung" }] : []),
+            ...(false && abilityStore.can("read", "unit", "respiratory_gear")
+              ? [{ key: "respiratory_gear", title: "Atemschutz-Geräte" }]
+              : []),
+            ...(false && abilityStore.can("read", "unit", "respiratory_wearer")
+              ? [{ key: "respiratory_wearer", title: "Atemschutz-Träger" }]
+              : []),
+            ...(false && abilityStore.can("read", "unit", "respiratory_mission")
+              ? [{ key: "respiratory_mission", title: "Atemschutz-Einsätze" }]
+              : []),
+            ...(abilityStore.can("create", "unit", "inspection") ? [{ key: "inspection", title: "Prüfungen" }] : []),
+            ...(false && abilityStore.can("read", "unit", "maintenance")
+              ? [{ key: "maintenance", title: "Wartungen" }]
+              : []),
+            ...(abilityStore.can("read", "unit", "damage_report")
+              ? [{ key: "damage_report", title: "Schadensmeldungen" }]
+              : []),
+            ...(abilityStore.can("read", "unit", "repair") ? [{ key: "repair", title: "Reparaturen" }] : []),
+            { key: "divider1", title: "Basisdaten" },
+            ...(abilityStore.can("read", "unit", "equipment_type")
+              ? [{ key: "equipment_type", title: "Geräte-Typen" }]
+              : []),
+            ...(abilityStore.can("read", "unit", "vehicle_type")
+              ? [{ key: "vehicle_type", title: "Fahrzeug-Arten" }]
+              : []),
+            ...(abilityStore.can("read", "unit", "wearable_type")
+              ? [{ key: "wearable_type", title: "Kleidungs-Arten" }]
+              : []),
+            ...(abilityStore.can("read", "unit", "inspection_plan")
+              ? [{ key: "inspection_plan", title: "Prüfpläne" }]
+              : []),
+          ],
+        },
         configuration: {
-          mainTitle: "Einstellungen",
+          mainTitle: "Konfiguration",
           main: [
             { key: "divider1", title: "Mitgliederdaten" },
             ...(abilityStore.can("read", "configuration", "salutation")
diff --git a/src/stores/admin/scanner.ts b/src/stores/admin/scanner.ts
new file mode 100644
index 0000000..b2e3b16
--- /dev/null
+++ b/src/stores/admin/scanner.ts
@@ -0,0 +1,58 @@
+import { defineStore } from "pinia";
+import { v4 as uuid } from "uuid";
+import { SocketManager } from "@/socketManager";
+import { SocketConnectionTypes } from "@/enums/socketEnum";
+import { useNotificationStore } from "../notification";
+
+export const useScannerStore = defineStore("scanner", {
+  state: () => {
+    return {
+      inUse: false as boolean,
+      roomId: undefined as undefined | string,
+      results: [] as Array<string>,
+      connectedDevices: 0 as number,
+    };
+  },
+  actions: {
+    startSession() {
+      if (this.inUse) return;
+
+      const notificationStore = useNotificationStore();
+
+      this.roomId = uuid();
+      this.inUse = true;
+      let connection = SocketManager.establishConnection(SocketConnectionTypes.scanner);
+      connection.on("connect", () => {
+        SocketManager.getConnection(SocketConnectionTypes.scanner)?.emit("session:create", this.roomId);
+      });
+      connection.on("status-session:create", () => {
+        notificationStore.push("Socket-Erfolg", `Scan-Session gestartet`, "success");
+      });
+      connection.on("status-session:close", () => {
+        notificationStore.push("Socket", `Scan-Session beendet`, "info");
+        SocketManager.getConnection(SocketConnectionTypes.scanner)?.disconnect();
+      });
+      connection.on("package-scanner_join", (socketId: string) => {
+        this.connectedDevices++;
+        notificationStore.push("Scan-Verbindung", `Neuer Scanner verbunden`, "info");
+      });
+      connection.on("package-scanner_leave", (socketId: string) => {
+        this.connectedDevices--;
+        notificationStore.push("Scan-Verbindung", `Scanner getrennt`, "info");
+      });
+      connection.on("package-scan_receive", (result: string) => {
+        this.results.push(result);
+        notificationStore.push("Scan", `Neuen Scan erhalten`, "info");
+      });
+    },
+    endSession() {
+      this.inUse = false;
+      this.roomId = undefined;
+      this.results = [];
+      SocketManager.getConnection(SocketConnectionTypes.scanner)?.emit("session:close");
+    },
+    removeElementFromResults(el: string) {
+      this.results = this.results.filter((result) => result !== el);
+    },
+  },
+});
diff --git a/src/stores/admin/unit/damageReport.ts b/src/stores/admin/unit/damageReport.ts
new file mode 100644
index 0000000..d7a458a
--- /dev/null
+++ b/src/stores/admin/unit/damageReport.ts
@@ -0,0 +1,123 @@
+import { defineStore } from "pinia";
+import type { DamageReportViewModel, UpdateDamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+
+export const useDamageReportStore = defineStore("damageReport", {
+  state: () => {
+    return {
+      damageReports: [] as Array<DamageReportViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      activeDamageReport: null as string | null,
+      activeDamageReportObj: null as DamageReportViewModel | null,
+      loadingActive: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    formatQueryReturnToPagination(result: AxiosResponse<any, any>, offset: number) {
+      this.totalCount = result.data.total;
+      result.data.damageReports
+        .filter((elem: DamageReportViewModel) => this.damageReports.findIndex((m) => m.id == elem.id) == -1)
+        .map((elem: DamageReportViewModel, index: number): DamageReportViewModel & { tab_pos: number } => {
+          return {
+            ...elem,
+            tab_pos: index + offset,
+          };
+        })
+        .forEach((elem: DamageReportViewModel & { tab_pos: number }) => {
+          this.damageReports.push(elem);
+        });
+    },
+    fetchOpenDamageReports(offset = 0, count = 25, search = "", clear = false) {
+      if (clear) this.damageReports = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/damageReport?done=false&offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.formatQueryReturnToPagination(result, offset);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    fetchDoneDamageReports(offset = 0, count = 25, search = "", clear = false) {
+      if (clear) this.damageReports = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/damageReport?done=true&offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.formatQueryReturnToPagination(result, offset);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    async getAllDamageReports(): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/damageReport?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.damageReports };
+      });
+    },
+    async getDamageReportsByIds(ids: Array<string>): Promise<AxiosResponse<any, any>> {
+      return await http
+        .post(`/admin/damageReport/ids`, {
+          ids,
+        })
+        .then((res) => {
+          return { ...res, data: res.data.damageReports };
+        });
+    },
+    async searchDamageReports(search: string): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/damageReport?search=${search}&noLimit=true`).then((res) => {
+        return { ...res, data: res.data.damageReports };
+      });
+    },
+    async getAllDamageReportsWithRelated(
+      related: "vehicle" | "equipment" | "wearable",
+      relatedId: string
+    ): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/damageReport/${related}/${relatedId}?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.damageReports };
+      });
+    },
+    async searchDamageReportsWithRelated(
+      related: "vehicle" | "equipment" | "wearable",
+      relatedId: string,
+      search: string
+    ): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/damageReport/${related}/${relatedId}?search=${search}&noLimit=true`).then((res) => {
+        return { ...res, data: res.data.damageReports };
+      });
+    },
+    fetchDamageReportByActiveId() {
+      this.loadingActive = "loading";
+      http
+        .get(`/admin/damageReport/${this.activeDamageReport}`)
+        .then((res) => {
+          this.activeDamageReportObj = res.data;
+          this.loadingActive = "fetched";
+        })
+        .catch((err) => {
+          this.loadingActive = "failed";
+        });
+    },
+    fetchDamageReportById(id: string) {
+      return http.get(`/admin/damageReport/${id}`);
+    },
+    loadDamageReportImage(url: string) {
+      return http.get(`/admin/damageReport/${this.activeDamageReportObj?.id}/${url}`, {
+        responseType: "blob",
+      });
+    },
+    async updateDamageReport(damageReport: UpdateDamageReportViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/damageReport/${damageReport.id}`, {
+        status: damageReport.status,
+        noteByWorker: damageReport.noteByWorker,
+        done: damageReport.done,
+      });
+      return result;
+    },
+  },
+});
diff --git a/src/stores/admin/unit/equipment/damageReport.ts b/src/stores/admin/unit/equipment/damageReport.ts
new file mode 100644
index 0000000..9460582
--- /dev/null
+++ b/src/stores/admin/unit/equipment/damageReport.ts
@@ -0,0 +1,43 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import { useEquipmentStore } from "./equipment";
+import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
+
+export const useEquipmentDamageReportStore = defineStore("equipmentDamageReport", {
+  state: () => {
+    return {
+      damageReports: [] as Array<DamageReportViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchDamageReportForEquipment(offset = 0, count = 25, search = "", clear = false) {
+      const equipmentId = useEquipmentStore().activeEquipment;
+      if (clear) this.damageReports = [];
+      this.loading = "loading";
+      http
+        .get(
+          `/admin/damagereport/equipment/${equipmentId}?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`
+        )
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.damageReports
+            .filter((elem: DamageReportViewModel) => this.damageReports.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: DamageReportViewModel, index: number): DamageReportViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: DamageReportViewModel & { tab_pos: number }) => {
+              this.damageReports.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+  },
+});
diff --git a/src/stores/admin/unit/equipment/equipment.ts b/src/stores/admin/unit/equipment/equipment.ts
new file mode 100644
index 0000000..67e92c0
--- /dev/null
+++ b/src/stores/admin/unit/equipment/equipment.ts
@@ -0,0 +1,108 @@
+import { defineStore } from "pinia";
+import type {
+  EquipmentViewModel,
+  CreateEquipmentViewModel,
+  UpdateEquipmentViewModel,
+} from "@/viewmodels/admin/unit/equipment/equipment.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+
+export const useEquipmentStore = defineStore("equipment", {
+  state: () => {
+    return {
+      equipments: [] as Array<EquipmentViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      activeEquipment: null as string | null,
+      activeEquipmentObj: null as EquipmentViewModel | null,
+      loadingActive: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchEquipments(offset = 0, count = 25, search = "", clear = false) {
+      if (clear) this.equipments = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/equipment?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.equipments
+            .filter((elem: EquipmentViewModel) => this.equipments.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: EquipmentViewModel, index: number): EquipmentViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: EquipmentViewModel & { tab_pos: number }) => {
+              this.equipments.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    async getAllEquipments(): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/equipment?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.equipments };
+      });
+    },
+    async getEquipmentsByIds(ids: Array<string>): Promise<AxiosResponse<any, any>> {
+      return await http
+        .post(`/admin/equipment/ids`, {
+          ids,
+        })
+        .then((res) => {
+          return { ...res, data: res.data.equipments };
+        });
+    },
+    async searchEquipments(search: string): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/equipment?search=${search}&noLimit=true`).then((res) => {
+        return { ...res, data: res.data.equipments };
+      });
+    },
+    fetchEquipmentByActiveId() {
+      this.loadingActive = "loading";
+      http
+        .get(`/admin/equipment/${this.activeEquipment}`)
+        .then((res) => {
+          this.activeEquipmentObj = res.data;
+          this.loadingActive = "fetched";
+        })
+        .catch((err) => {
+          this.loadingActive = "failed";
+        });
+    },
+    fetchEquipmentById(id: string) {
+      return http.get(`/admin/equipment/${id}`);
+    },
+    async createEquipment(equipment: CreateEquipmentViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/equipment`, {
+        equipmentTypeId: equipment.equipmentTypeId,
+        name: equipment.name,
+        code: equipment.code,
+        location: equipment.location,
+        commissioned: equipment.commissioned,
+      });
+      this.fetchEquipments();
+      return result;
+    },
+    async updateActiveEquipment(equipment: UpdateEquipmentViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/equipment/${equipment.id}`, {
+        name: equipment.name,
+        code: equipment.code,
+        location: equipment.location,
+        commissioned: equipment.commissioned,
+        decommissioned: equipment.decommissioned,
+      });
+      this.fetchEquipments();
+      return result;
+    },
+    async deleteEquipment(equipment: number): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/equipment/${equipment}`);
+      this.fetchEquipments();
+      return result;
+    },
+  },
+});
diff --git a/src/stores/admin/unit/equipment/inspection.ts b/src/stores/admin/unit/equipment/inspection.ts
new file mode 100644
index 0000000..adbe911
--- /dev/null
+++ b/src/stores/admin/unit/equipment/inspection.ts
@@ -0,0 +1,41 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import type { InspectionViewModel } from "@/viewmodels/admin/unit/inspection/inspection.models";
+import { useEquipmentStore } from "./equipment";
+
+export const useEquipmentInspectionStore = defineStore("equipmentInspection", {
+  state: () => {
+    return {
+      inspections: [] as Array<InspectionViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchInspectionForEquipment(offset = 0, count = 25, clear = false) {
+      const equipmentId = useEquipmentStore().activeEquipment;
+      if (clear) this.inspections = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/inspection/equipment/${equipmentId}?offset=${offset}&count=${count}`)
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.inspections
+            .filter((elem: InspectionViewModel) => this.inspections.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: InspectionViewModel, index: number): InspectionViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: InspectionViewModel & { tab_pos: number }) => {
+              this.inspections.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+  },
+});
diff --git a/src/stores/admin/unit/equipment/repair.ts b/src/stores/admin/unit/equipment/repair.ts
new file mode 100644
index 0000000..a3db4ba
--- /dev/null
+++ b/src/stores/admin/unit/equipment/repair.ts
@@ -0,0 +1,43 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import { useEquipmentStore } from "./equipment";
+import type { RepairViewModel } from "@/viewmodels/admin/unit/repair.models";
+
+export const useEquipmentRepairStore = defineStore("equipmentRepair", {
+  state: () => {
+    return {
+      repairs: [] as Array<RepairViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchRepairForEquipment(offset = 0, count = 25, search = "", clear = false) {
+      const equipmentId = useEquipmentStore().activeEquipment;
+      if (clear) this.repairs = [];
+      this.loading = "loading";
+      http
+        .get(
+          `/admin/repair/equipment/${equipmentId}?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`
+        )
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.repairs
+            .filter((elem: RepairViewModel) => this.repairs.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: RepairViewModel, index: number): RepairViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: RepairViewModel & { tab_pos: number }) => {
+              this.repairs.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+  },
+});
diff --git a/src/stores/admin/unit/equipmentType/equipmentType.ts b/src/stores/admin/unit/equipmentType/equipmentType.ts
new file mode 100644
index 0000000..694e635
--- /dev/null
+++ b/src/stores/admin/unit/equipmentType/equipmentType.ts
@@ -0,0 +1,93 @@
+import { defineStore } from "pinia";
+import type {
+  EquipmentTypeViewModel,
+  CreateEquipmentTypeViewModel,
+  UpdateEquipmentTypeViewModel,
+} from "@/viewmodels/admin/unit/equipment/equipmentType.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+
+export const useEquipmentTypeStore = defineStore("equipmentType", {
+  state: () => {
+    return {
+      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: {
+    fetchEquipmentTypes(offset = 0, count = 25, search = "", clear = false) {
+      if (clear) this.equipmentTypes = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/equipmentType?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.equipmentTypes
+            .filter((elem: EquipmentTypeViewModel) => this.equipmentTypes.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: EquipmentTypeViewModel, index: number): EquipmentTypeViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: EquipmentTypeViewModel & { tab_pos: number }) => {
+              this.equipmentTypes.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    async getAllEquipmentTypes(): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/equipmentType?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.equipmentTypes };
+      });
+    },
+    async searchEquipmentTypes(search: string): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/equipmentType?search=${search}&noLimit=true`).then((res) => {
+        return { ...res, data: res.data.equipmentTypes };
+      });
+    },
+    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/equipmentType/${id}`);
+    },
+    async createEquipmentType(equipmentType: CreateEquipmentTypeViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/equipmentType`, {
+        type: equipmentType.type,
+        description: equipmentType.description,
+      });
+      this.fetchEquipmentTypes();
+      return result;
+    },
+    async updateActiveEquipmentType(equipmentType: UpdateEquipmentTypeViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/equipmentType/${equipmentType.id}`, {
+        type: equipmentType.type,
+        description: equipmentType.description,
+      });
+      this.fetchEquipmentTypes();
+      return result;
+    },
+    async deleteEquipmentType(equipmentType: number): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/equipmentType/${equipmentType}`);
+      this.fetchEquipmentTypes();
+      return result;
+    },
+  },
+});
diff --git a/src/stores/admin/unit/equipmentType/inspectionPlan.ts b/src/stores/admin/unit/equipmentType/inspectionPlan.ts
new file mode 100644
index 0000000..0496cd3
--- /dev/null
+++ b/src/stores/admin/unit/equipmentType/inspectionPlan.ts
@@ -0,0 +1,28 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+import { useEquipmentTypeStore } from "./equipmentType";
+
+export const useEquipmentTypeInspectionPlanStore = defineStore("equipmentTypeInspectionPlan", {
+  state: () => {
+    return {
+      inspectionPlans: [] as Array<InspectionPlanViewModel>,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchInspectionPlanForEquipmentType() {
+      const equipmentTypeId = useEquipmentTypeStore().activeEquipmentType;
+      this.loading = "loading";
+      http
+        .get(`/admin/inspectionPlan/equipmentType/${equipmentTypeId}?noLimit=true`)
+        .then((result) => {
+          this.inspectionPlans = result.data.inspectionPlans;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+  },
+});
diff --git a/src/stores/admin/unit/inspection/inspection.ts b/src/stores/admin/unit/inspection/inspection.ts
new file mode 100644
index 0000000..7da24c4
--- /dev/null
+++ b/src/stores/admin/unit/inspection/inspection.ts
@@ -0,0 +1,151 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+import type {
+  CreateInspectionViewModel,
+  CreateOrUpdateInspectionPointResultCommand,
+  InspectionNextViewModel,
+  InspectionViewModel,
+  MinifiedInspectionViewModel,
+  UpdateInspectionViewModel,
+} from "@/viewmodels/admin/unit/inspection/inspection.models";
+
+export const useInspectionStore = defineStore("inspection", {
+  state: () => {
+    return {
+      inspections: [] as Array<MinifiedInspectionViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      nextInspections: [] as Array<InspectionNextViewModel & { tab_pos: number }>,
+      nextTotalCount: 0 as number,
+      nextLoading: "loading" as "loading" | "fetched" | "failed",
+      activeInspection: null as string | null,
+      activeInspectionObj: null as InspectionViewModel | null,
+      loadingActive: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchRunningInspections(offset = 0, count = 25, search = "", clear = false) {
+      if (clear) this.inspections = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/inspection/running?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.inspections
+            .filter((elem: MinifiedInspectionViewModel) => this.inspections.findIndex((m) => m.id == elem.id) == -1)
+            .map(
+              (elem: MinifiedInspectionViewModel, index: number): MinifiedInspectionViewModel & { tab_pos: number } => {
+                return {
+                  ...elem,
+                  tab_pos: index + offset,
+                };
+              }
+            )
+            .forEach((elem: MinifiedInspectionViewModel & { tab_pos: number }) => {
+              this.inspections.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    fetchNextInspections(offset = 0, count = 25, search = "", clear = false) {
+      if (clear) this.nextInspections = [];
+      this.nextLoading = "loading";
+      http
+        .get(`/admin/inspection/next?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.nextTotalCount = result.data.total;
+          result.data.inspections
+            .filter((elem: InspectionNextViewModel) => this.nextInspections.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: InspectionNextViewModel, index: number): InspectionNextViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: InspectionNextViewModel & { tab_pos: number }) => {
+              this.nextInspections.push(elem);
+            });
+          this.nextLoading = "fetched";
+        })
+        .catch((err) => {
+          this.nextLoading = "failed";
+        });
+    },
+    fetchInspectionByActiveId() {
+      this.loadingActive = "loading";
+      http
+        .get(`/admin/inspection/${this.activeInspection}`)
+        .then((res) => {
+          this.activeInspectionObj = res.data;
+          this.loadingActive = "fetched";
+        })
+        .catch((err) => {
+          this.loadingActive = "failed";
+        });
+    },
+    fetchInspectionById(id: string) {
+      return http.get(`/admin/inspection/${id}`);
+    },
+    fetchInspectionPrintoutById() {
+      return http.get(`/admin/inspection/${this.activeInspectionObj?.id}/printout`, {
+        responseType: "blob",
+      });
+    },
+    fetchUploadedFileByPointId(id: string) {
+      return http.get(`/admin/inspection/${this.activeInspectionObj?.id}/${id}/upload`, {
+        responseType: "blob",
+      });
+    },
+    async createInspection(inspection: CreateInspectionViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/inspection`, {
+        assigned: inspection.assigned,
+        relatedId: inspection.relatedId,
+        inspectionPlanId: inspection.inspectionPlanId,
+        nextInspection: inspection.nextInspection,
+        context: inspection.context,
+      });
+      return result;
+    },
+    async updateActiveInspection(inspection: UpdateInspectionViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/inspection/${this.activeInspection}`, {
+        nextInspection: inspection.nextInspection,
+        context: inspection.context,
+      });
+      this.fetchInspectionByActiveId();
+      return result;
+    },
+    async updateActiveInspectionResults(
+      results: Array<CreateOrUpdateInspectionPointResultCommand>,
+      files: { [key: string]: File | null }
+    ): Promise<AxiosResponse<any, any>> {
+      const formData = new FormData();
+      formData.append("results", JSON.stringify(results));
+      Object.entries(files).forEach(([key, file]) => {
+        if (file) {
+          const extension = file.name.split(".").pop() || "";
+          formData.append(`files`, new File([file], `${key}.${extension}`, { type: file.type }));
+        }
+      });
+      const result = await http.patch(`/admin/inspection/${this.activeInspection}/results`, formData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      });
+      this.fetchInspectionByActiveId();
+      return result;
+    },
+    async finishActiveInspection(): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/inspection/${this.activeInspection}/finish`);
+      this.fetchInspectionByActiveId();
+      return result;
+    },
+    async deleteInspection(inspection: string): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/inspection/${inspection}`);
+      return result;
+    },
+  },
+});
diff --git a/src/stores/admin/unit/inspectionPlan/inspectionPlan.ts b/src/stores/admin/unit/inspectionPlan/inspectionPlan.ts
new file mode 100644
index 0000000..a30f6e3
--- /dev/null
+++ b/src/stores/admin/unit/inspectionPlan/inspectionPlan.ts
@@ -0,0 +1,116 @@
+import { defineStore } from "pinia";
+import type {
+  InspectionPlanViewModel,
+  CreateInspectionPlanViewModel,
+  UpdateInspectionPlanViewModel,
+} from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+
+export const useInspectionPlanStore = defineStore("inspectionPlan", {
+  state: () => {
+    return {
+      inspectionPlans: [] as Array<InspectionPlanViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      activeInspectionPlan: null as string | null,
+      activeInspectionPlanObj: null as InspectionPlanViewModel | null,
+      loadingActive: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchInspectionPlans(offset = 0, count = 25, search = "", clear = false) {
+      if (clear) this.inspectionPlans = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/inspectionPlan?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.inspectionPlans
+            .filter((elem: InspectionPlanViewModel) => this.inspectionPlans.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: InspectionPlanViewModel, index: number): InspectionPlanViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: InspectionPlanViewModel & { tab_pos: number }) => {
+              this.inspectionPlans.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    async getAllInspectionPlans(): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/inspectionPlan?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.inspectionPlans };
+      });
+    },
+    async searchInspectionPlans(search: string): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/inspectionPlan?search=${search}&noLimit=true`).then((res) => {
+        return { ...res, data: res.data.inspectionPlans };
+      });
+    },
+    async getAllInspectionPlansWithRelated(
+      related: "vehicleType" | "equipmentType" | "wearableType",
+      relatedId: string
+    ): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/inspectionPlan/${related}/${relatedId}?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.inspectionPlans };
+      });
+    },
+    async searchInspectionPlansWithRelated(
+      related: "vehicleType" | "equipmentType" | "wearableType",
+      relatedId: string,
+      search: string
+    ): Promise<AxiosResponse<any, any>> {
+      return await http
+        .get(`/admin/inspectionPlan/${related}/${relatedId}?search=${search}&noLimit=true`)
+        .then((res) => {
+          return { ...res, data: res.data.inspectionPlans };
+        });
+    },
+    fetchInspectionPlanByActiveId() {
+      this.loadingActive = "loading";
+      http
+        .get(`/admin/inspectionPlan/${this.activeInspectionPlan}`)
+        .then((res) => {
+          this.activeInspectionPlanObj = res.data;
+          this.loadingActive = "fetched";
+        })
+        .catch((err) => {
+          this.loadingActive = "failed";
+        });
+    },
+    fetchInspectionPlanById(id: string) {
+      return http.get(`/admin/inspectionPlan/${id}`);
+    },
+    async createInspectionPlan(inspectionPlan: CreateInspectionPlanViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/inspectionPlan`, {
+        title: inspectionPlan.title,
+        inspectionInterval: inspectionPlan.inspectionInterval,
+        remindTime: inspectionPlan.remindTime,
+        relatedId: inspectionPlan.relatedId,
+        assigned: inspectionPlan.assigned,
+      });
+      this.fetchInspectionPlans();
+      return result;
+    },
+    async updateActiveInspectionPlan(inspectionPlan: UpdateInspectionPlanViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/inspectionPlan/${inspectionPlan.id}`, {
+        title: inspectionPlan.title,
+        inspectionInterval: inspectionPlan.inspectionInterval,
+        remindTime: inspectionPlan.remindTime,
+      });
+      this.fetchInspectionPlans();
+      return result;
+    },
+    async deleteInspectionPlan(inspectionPlan: number): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/inspectionPlan/${inspectionPlan}`);
+      this.fetchInspectionPlans();
+      return result;
+    },
+  },
+});
diff --git a/src/stores/admin/unit/inspectionPlan/inspectionPoint.ts b/src/stores/admin/unit/inspectionPlan/inspectionPoint.ts
new file mode 100644
index 0000000..7ce669e
--- /dev/null
+++ b/src/stores/admin/unit/inspectionPlan/inspectionPoint.ts
@@ -0,0 +1,37 @@
+import { defineStore } from "pinia";
+import type { InspectionPointViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+import { useInspectionPlanStore } from "./inspectionPlan";
+
+export const useInspectionPointStore = defineStore("inspectionPoint", {
+  state: () => {
+    return {
+      inspectionPoints: [] as Array<InspectionPointViewModel>,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchInspectionPoints() {
+      const inspectionPlanId = useInspectionPlanStore().activeInspectionPlan;
+      this.loading = "loading";
+      http
+        .get(`/admin/inspectionPlan/${inspectionPlanId}/points`)
+        .then((result) => {
+          this.inspectionPoints = result.data;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    async updateActiveInspectionPoints(
+      inspectionPoints: Array<InspectionPointViewModel>
+    ): Promise<AxiosResponse<any, any>> {
+      const inspectionPlanId = useInspectionPlanStore().activeInspectionPlan;
+      const result = await http.patch(`/admin/inspectionPlan/${inspectionPlanId}/points`, inspectionPoints);
+      this.fetchInspectionPoints();
+      return result;
+    },
+  },
+});
diff --git a/src/stores/admin/unit/maintenance.ts b/src/stores/admin/unit/maintenance.ts
new file mode 100644
index 0000000..fd9fb79
--- /dev/null
+++ b/src/stores/admin/unit/maintenance.ts
@@ -0,0 +1,74 @@
+import { defineStore } from "pinia";
+import type {
+  MaintenanceViewModel,
+  CreateMaintenanceViewModel,
+  UpdateMaintenanceViewModel,
+} from "@/viewmodels/admin/unit/maintenance.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+
+export const useMaintenanceStore = defineStore("maintenance", {
+  state: () => {
+    return {
+      maintenances: [] as Array<MaintenanceViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchMaintenances(offset = 0, count = 25, search = "", clear = false) {
+      if (clear) this.maintenances = [];
+      this.loading = "loading";
+      //TODO enable fetch of done reports
+      http
+        .get(`/admin/maintenance?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.maintenances
+            .filter((elem: MaintenanceViewModel) => this.maintenances.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: MaintenanceViewModel, index: number): MaintenanceViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: MaintenanceViewModel & { tab_pos: number }) => {
+              this.maintenances.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    async getAllMaintenances(): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/maintenance?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.maintenances };
+      });
+    },
+    async getMaintenancesByIds(ids: Array<string>): Promise<AxiosResponse<any, any>> {
+      return await http
+        .post(`/admin/maintenance/ids`, {
+          ids,
+        })
+        .then((res) => {
+          return { ...res, data: res.data.maintenances };
+        });
+    },
+    async searchMaintenances(search: string): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/maintenance?search=${search}&noLimit=true`).then((res) => {
+        return { ...res, data: res.data.maintenances };
+      });
+    },
+    fetchMaintenanceById(id: string) {
+      return http.get(`/admin/maintenance/${id}`);
+    },
+    async updateMaintenance(maintenance: UpdateMaintenanceViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/maintenance/${maintenance.id}`, {
+        // TODO: data
+      });
+      this.fetchMaintenances();
+      return result;
+    },
+  },
+});
diff --git a/src/stores/admin/unit/repair.ts b/src/stores/admin/unit/repair.ts
new file mode 100644
index 0000000..acf30c9
--- /dev/null
+++ b/src/stores/admin/unit/repair.ts
@@ -0,0 +1,135 @@
+import { defineStore } from "pinia";
+import type {
+  CreateRepairViewModel,
+  RepairViewModel,
+  UpdateRepairStatusViewModel,
+  UpdateRepairViewModel,
+} from "@/viewmodels/admin/unit/repair.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+
+export const useRepairStore = defineStore("repair", {
+  state: () => {
+    return {
+      repairs: [] as Array<RepairViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      activeRepair: null as string | null,
+      activeRepairObj: null as RepairViewModel | null,
+      loadingActive: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    formatQueryReturnToPagination(result: AxiosResponse<any, any>, offset: number) {
+      this.totalCount = result.data.total;
+      result.data.repairs
+        .filter((elem: RepairViewModel) => this.repairs.findIndex((m) => m.id == elem.id) == -1)
+        .map((elem: RepairViewModel, index: number): RepairViewModel & { tab_pos: number } => {
+          return {
+            ...elem,
+            tab_pos: index + offset,
+          };
+        })
+        .forEach((elem: RepairViewModel & { tab_pos: number }) => {
+          this.repairs.push(elem);
+        });
+    },
+    fetchOpenRepairs(offset = 0, count = 25, search = "", clear = false) {
+      if (clear) this.repairs = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/repair?done=false&offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.formatQueryReturnToPagination(result, offset);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    fetchDoneRepairs(offset = 0, count = 25, search = "", clear = false) {
+      if (clear) this.repairs = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/repair?done=true&offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.formatQueryReturnToPagination(result, offset);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    async getAllRepairs(): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/repair?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.repairs };
+      });
+    },
+    async getRepairsByIds(ids: Array<string>): Promise<AxiosResponse<any, any>> {
+      return await http
+        .post(`/admin/repair/ids`, {
+          ids,
+        })
+        .then((res) => {
+          return { ...res, data: res.data.repairs };
+        });
+    },
+    async searchRepairs(search: string): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/repair?search=${search}&noLimit=true`).then((res) => {
+        return { ...res, data: res.data.repairs };
+      });
+    },
+    fetchRepairByActiveId() {
+      this.loadingActive = "loading";
+      http
+        .get(`/admin/repair/${this.activeRepair}`)
+        .then((res) => {
+          this.activeRepairObj = res.data;
+          this.loadingActive = "fetched";
+        })
+        .catch((err) => {
+          this.loadingActive = "failed";
+        });
+    },
+    fetchRepairById(id: string) {
+      return http.get(`/admin/repair/${id}`);
+    },
+    loadRepairImage(url: string) {
+      return http.get(`/admin/repair/${this.activeRepairObj?.id}/${url}`, {
+        responseType: "blob",
+      });
+    },
+    async createRepair(repair: CreateRepairViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/repair`, {
+        affected: repair.affected,
+        affectedId: repair.affectedId,
+        title: repair.title,
+        description: repair.description,
+        responsible: repair.responsible,
+        reports: repair.reports,
+      });
+      return result;
+    },
+    async updateRepair(repair: UpdateRepairViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/repair/${this.activeRepairObj?.id}`, {
+        title: repair.title,
+        description: repair.description,
+        responsible: repair.responsible,
+      });
+      return result;
+    },
+    async updateRepairReports(reports: Array<string>): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/repair/${this.activeRepairObj?.id}/reports`, {
+        reports,
+      });
+      return result;
+    },
+    async updateRepairStatus(repair: UpdateRepairStatusViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/repair/${this.activeRepairObj?.id}/status`, {
+        status: repair.status,
+        done: repair.done,
+      });
+      return result;
+    },
+  },
+});
diff --git a/src/stores/admin/unit/respiratoryGear/respiratoryGear.ts b/src/stores/admin/unit/respiratoryGear/respiratoryGear.ts
new file mode 100644
index 0000000..a49110c
--- /dev/null
+++ b/src/stores/admin/unit/respiratoryGear/respiratoryGear.ts
@@ -0,0 +1,93 @@
+import { defineStore } from "pinia";
+import type {
+  RespiratoryGearViewModel,
+  CreateRespiratoryGearViewModel,
+  UpdateRespiratoryGearViewModel,
+} from "@/viewmodels/admin/unit/respiratory/respiratoryGear.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+
+export const useRespiratoryGearStore = defineStore("respiratoryGear", {
+  state: () => {
+    return {
+      respiratoryGears: [] as Array<RespiratoryGearViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      activeRespiratoryGear: null as string | null,
+      activeRespiratoryGearObj: null as RespiratoryGearViewModel | null,
+      loadingActive: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchRespiratoryGears(offset = 0, count = 25, search = "", clear = false) {
+      if (clear) this.respiratoryGears = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/respiratoryGear?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.respiratoryGears
+            .filter((elem: RespiratoryGearViewModel) => this.respiratoryGears.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: RespiratoryGearViewModel, index: number): RespiratoryGearViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: RespiratoryGearViewModel & { tab_pos: number }) => {
+              this.respiratoryGears.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    async getAllRespiratoryGears(): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/respiratoryGear?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.respiratoryGears };
+      });
+    },
+    async searchRespiratoryGears(search: string): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/respiratoryGear?search=${search}&noLimit=true`).then((res) => {
+        return { ...res, data: res.data.respiratoryGears };
+      });
+    },
+    fetchRespiratoryGearByActiveId() {
+      this.loadingActive = "loading";
+      http
+        .get(`/admin/respiratoryGear/${this.activeRespiratoryGear}`)
+        .then((res) => {
+          this.activeRespiratoryGearObj = res.data;
+          this.loadingActive = "fetched";
+        })
+        .catch((err) => {
+          this.loadingActive = "failed";
+        });
+    },
+    fetchRespiratoryGearById(id: string) {
+      return http.get(`/admin/respiratoryGear/${id}`);
+    },
+    async createRespiratoryGear(respiratoryGear: CreateRespiratoryGearViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/respiratoryGear`, {
+        // TODO: data
+      });
+      this.fetchRespiratoryGears();
+      return result;
+    },
+    async updateActiveRespiratoryGear(
+      respiratoryGear: UpdateRespiratoryGearViewModel
+    ): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/respiratoryGear/${respiratoryGear.id}`, {
+        // TODO: data
+      });
+      this.fetchRespiratoryGears();
+      return result;
+    },
+    async deleteRespiratoryGear(respiratoryGear: number): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/respiratoryGear/${respiratoryGear}`);
+      this.fetchRespiratoryGears();
+      return result;
+    },
+  },
+});
diff --git a/src/stores/admin/unit/respiratoryMission/respiratoryMission.ts b/src/stores/admin/unit/respiratoryMission/respiratoryMission.ts
new file mode 100644
index 0000000..3b511fd
--- /dev/null
+++ b/src/stores/admin/unit/respiratoryMission/respiratoryMission.ts
@@ -0,0 +1,99 @@
+import { defineStore } from "pinia";
+import type {
+  RespiratoryMissionViewModel,
+  CreateRespiratoryMissionViewModel,
+  UpdateRespiratoryMissionViewModel,
+} from "@/viewmodels/admin/unit/respiratory/respiratoryMission.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+
+export const useRespiratoryMissionStore = defineStore("respiratoryMission", {
+  state: () => {
+    return {
+      respiratoryMissions: [] as Array<RespiratoryMissionViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      activeRespiratoryMission: null as string | null,
+      activeRespiratoryMissionObj: null as RespiratoryMissionViewModel | null,
+      loadingActive: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchRespiratoryMissions(offset = 0, count = 25, search = "", clear = false) {
+      if (clear) this.respiratoryMissions = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/respiratoryMission?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.respiratoryMissions
+            .filter(
+              (elem: RespiratoryMissionViewModel) => this.respiratoryMissions.findIndex((m) => m.id == elem.id) == -1
+            )
+            .map(
+              (elem: RespiratoryMissionViewModel, index: number): RespiratoryMissionViewModel & { tab_pos: number } => {
+                return {
+                  ...elem,
+                  tab_pos: index + offset,
+                };
+              }
+            )
+            .forEach((elem: RespiratoryMissionViewModel & { tab_pos: number }) => {
+              this.respiratoryMissions.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    async getAllRespiratoryMissions(): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/respiratoryMission?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.respiratoryMissions };
+      });
+    },
+    async searchRespiratoryMissions(search: string): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/respiratoryMission?search=${search}&noLimit=true`).then((res) => {
+        return { ...res, data: res.data.respiratoryMissions };
+      });
+    },
+    fetchRespiratoryMissionByActiveId() {
+      this.loadingActive = "loading";
+      http
+        .get(`/admin/respiratoryMission/${this.activeRespiratoryMission}`)
+        .then((res) => {
+          this.activeRespiratoryMissionObj = res.data;
+          this.loadingActive = "fetched";
+        })
+        .catch((err) => {
+          this.loadingActive = "failed";
+        });
+    },
+    fetchRespiratoryMissionById(id: string) {
+      return http.get(`/admin/respiratoryMission/${id}`);
+    },
+    async createRespiratoryMission(
+      respiratoryMission: CreateRespiratoryMissionViewModel
+    ): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/respiratoryMission`, {
+        // TODO: data
+      });
+      this.fetchRespiratoryMissions();
+      return result;
+    },
+    async updateActiveRespiratoryMission(
+      respiratoryMission: UpdateRespiratoryMissionViewModel
+    ): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/respiratoryMission/${respiratoryMission.id}`, {
+        // TODO: data
+      });
+      this.fetchRespiratoryMissions();
+      return result;
+    },
+    async deleteRespiratoryMission(respiratoryMission: number): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/respiratoryMission/${respiratoryMission}`);
+      this.fetchRespiratoryMissions();
+      return result;
+    },
+  },
+});
diff --git a/src/stores/admin/unit/respiratoryWearer/respiratoryWearer.ts b/src/stores/admin/unit/respiratoryWearer/respiratoryWearer.ts
new file mode 100644
index 0000000..cdf1181
--- /dev/null
+++ b/src/stores/admin/unit/respiratoryWearer/respiratoryWearer.ts
@@ -0,0 +1,99 @@
+import { defineStore } from "pinia";
+import type {
+  RespiratoryWearerViewModel,
+  CreateRespiratoryWearerViewModel,
+  UpdateRespiratoryWearerViewModel,
+} from "@/viewmodels/admin/unit/respiratory/respiratoryWearer.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+
+export const useRespiratoryWearerStore = defineStore("respiratoryWearer", {
+  state: () => {
+    return {
+      respiratoryWearers: [] as Array<RespiratoryWearerViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      activeRespiratoryWearer: null as string | null,
+      activeRespiratoryWearerObj: null as RespiratoryWearerViewModel | null,
+      loadingActive: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchRespiratoryWearers(offset = 0, count = 25, search = "", clear = false) {
+      if (clear) this.respiratoryWearers = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/respiratoryWearer?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.respiratoryWearers
+            .filter(
+              (elem: RespiratoryWearerViewModel) => this.respiratoryWearers.findIndex((m) => m.id == elem.id) == -1
+            )
+            .map(
+              (elem: RespiratoryWearerViewModel, index: number): RespiratoryWearerViewModel & { tab_pos: number } => {
+                return {
+                  ...elem,
+                  tab_pos: index + offset,
+                };
+              }
+            )
+            .forEach((elem: RespiratoryWearerViewModel & { tab_pos: number }) => {
+              this.respiratoryWearers.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    async getAllRespiratoryWearers(): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/respiratoryWearer?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.respiratoryWearers };
+      });
+    },
+    async searchRespiratoryWearers(search: string): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/respiratoryWearer?search=${search}&noLimit=true`).then((res) => {
+        return { ...res, data: res.data.respiratoryWearers };
+      });
+    },
+    fetchRespiratoryWearerByActiveId() {
+      this.loadingActive = "loading";
+      http
+        .get(`/admin/respiratoryWearer/${this.activeRespiratoryWearer}`)
+        .then((res) => {
+          this.activeRespiratoryWearerObj = res.data;
+          this.loadingActive = "fetched";
+        })
+        .catch((err) => {
+          this.loadingActive = "failed";
+        });
+    },
+    fetchRespiratoryWearerById(id: string) {
+      return http.get(`/admin/respiratoryWearer/${id}`);
+    },
+    async createRespiratoryWearer(
+      respiratoryWearer: CreateRespiratoryWearerViewModel
+    ): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/respiratoryWearer`, {
+        // TODO: data
+      });
+      this.fetchRespiratoryWearers();
+      return result;
+    },
+    async updateActiveRespiratoryWearer(
+      respiratoryWearer: UpdateRespiratoryWearerViewModel
+    ): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/respiratoryWearer/${respiratoryWearer.id}`, {
+        // TODO: data
+      });
+      this.fetchRespiratoryWearers();
+      return result;
+    },
+    async deleteRespiratoryWearer(respiratoryWearer: number): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/respiratoryWearer/${respiratoryWearer}`);
+      this.fetchRespiratoryWearers();
+      return result;
+    },
+  },
+});
diff --git a/src/stores/admin/unit/vehicle/damageReport.ts b/src/stores/admin/unit/vehicle/damageReport.ts
new file mode 100644
index 0000000..b4df77f
--- /dev/null
+++ b/src/stores/admin/unit/vehicle/damageReport.ts
@@ -0,0 +1,43 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import { useVehicleStore } from "./vehicle";
+import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
+
+export const useVehicleDamageReportStore = defineStore("vehicleDamageReport", {
+  state: () => {
+    return {
+      damageReports: [] as Array<DamageReportViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchDamageReportForVehicle(offset = 0, count = 25, search = "", clear = false) {
+      const vehicleId = useVehicleStore().activeVehicle;
+      if (clear) this.damageReports = [];
+      this.loading = "loading";
+      http
+        .get(
+          `/admin/damagereport/vehicle/${vehicleId}?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`
+        )
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.damageReports
+            .filter((elem: DamageReportViewModel) => this.damageReports.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: DamageReportViewModel, index: number): DamageReportViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: DamageReportViewModel & { tab_pos: number }) => {
+              this.damageReports.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+  },
+});
diff --git a/src/stores/admin/unit/vehicle/inspection.ts b/src/stores/admin/unit/vehicle/inspection.ts
new file mode 100644
index 0000000..23885b9
--- /dev/null
+++ b/src/stores/admin/unit/vehicle/inspection.ts
@@ -0,0 +1,43 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import type { InspectionViewModel } from "@/viewmodels/admin/unit/inspection/inspection.models";
+import { useVehicleStore } from "./vehicle";
+
+export const useVehicleInspectionStore = defineStore("vehicleInspection", {
+  state: () => {
+    return {
+      inspections: [] as Array<InspectionViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchInspectionForVehicle(offset = 0, count = 25, search = "", clear = false) {
+      const vehicleId = useVehicleStore().activeVehicle;
+      if (clear) this.inspections = [];
+      this.loading = "loading";
+      http
+        .get(
+          `/admin/inspection/vehicle/${vehicleId}?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`
+        )
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.inspections
+            .filter((elem: InspectionViewModel) => this.inspections.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: InspectionViewModel, index: number): InspectionViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: InspectionViewModel & { tab_pos: number }) => {
+              this.inspections.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+  },
+});
diff --git a/src/stores/admin/unit/vehicle/repair.ts b/src/stores/admin/unit/vehicle/repair.ts
new file mode 100644
index 0000000..beb30a1
--- /dev/null
+++ b/src/stores/admin/unit/vehicle/repair.ts
@@ -0,0 +1,43 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import { useVehicleStore } from "./vehicle";
+import type { RepairViewModel } from "@/viewmodels/admin/unit/repair.models";
+
+export const useVehicleRepairStore = defineStore("vehicleRepair", {
+  state: () => {
+    return {
+      repairs: [] as Array<RepairViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchRepairForVehicle(offset = 0, count = 25, search = "", clear = false) {
+      const vehicleId = useVehicleStore().activeVehicle;
+      if (clear) this.repairs = [];
+      this.loading = "loading";
+      http
+        .get(
+          `/admin/repair/vehicle/${vehicleId}?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`
+        )
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.repairs
+            .filter((elem: RepairViewModel) => this.repairs.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: RepairViewModel, index: number): RepairViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: RepairViewModel & { tab_pos: number }) => {
+              this.repairs.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+  },
+});
diff --git a/src/stores/admin/unit/vehicle/vehicle.ts b/src/stores/admin/unit/vehicle/vehicle.ts
new file mode 100644
index 0000000..7138cea
--- /dev/null
+++ b/src/stores/admin/unit/vehicle/vehicle.ts
@@ -0,0 +1,108 @@
+import { defineStore } from "pinia";
+import type {
+  VehicleViewModel,
+  CreateVehicleViewModel,
+  UpdateVehicleViewModel,
+} from "@/viewmodels/admin/unit/vehicle/vehicle.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+
+export const useVehicleStore = defineStore("vehicle", {
+  state: () => {
+    return {
+      vehicles: [] as Array<VehicleViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      activeVehicle: null as string | null,
+      activeVehicleObj: null as VehicleViewModel | null,
+      loadingActive: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchVehicles(offset = 0, count = 25, search = "", clear = false) {
+      if (clear) this.vehicles = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/vehicle?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.vehicles
+            .filter((elem: VehicleViewModel) => this.vehicles.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: VehicleViewModel, index: number): VehicleViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: VehicleViewModel & { tab_pos: number }) => {
+              this.vehicles.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    async getAllVehicles(): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/vehicle?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.vehicles };
+      });
+    },
+    async getVehiclesByIds(ids: Array<string>): Promise<AxiosResponse<any, any>> {
+      return await http
+        .post(`/admin/vehicle/ids`, {
+          ids,
+        })
+        .then((res) => {
+          return { ...res, data: res.data.vehicles };
+        });
+    },
+    async searchVehicles(search: string): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/vehicle?search=${search}&noLimit=true`).then((res) => {
+        return { ...res, data: res.data.vehicles };
+      });
+    },
+    fetchVehicleByActiveId() {
+      this.loadingActive = "loading";
+      http
+        .get(`/admin/vehicle/${this.activeVehicle}`)
+        .then((res) => {
+          this.activeVehicleObj = res.data;
+          this.loadingActive = "fetched";
+        })
+        .catch((err) => {
+          this.loadingActive = "failed";
+        });
+    },
+    fetchVehicleById(id: string) {
+      return http.get(`/admin/vehicle/${id}`);
+    },
+    async createVehicle(vehicle: CreateVehicleViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/vehicle`, {
+        vehicleTypeId: vehicle.vehicleTypeId,
+        name: vehicle.name,
+        code: vehicle.code,
+        location: vehicle.location,
+        commissioned: vehicle.commissioned,
+      });
+      this.fetchVehicles();
+      return result;
+    },
+    async updateActiveVehicle(vehicle: UpdateVehicleViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/vehicle/${vehicle.id}`, {
+        name: vehicle.name,
+        code: vehicle.code,
+        location: vehicle.location,
+        commissioned: vehicle.commissioned,
+        decommissioned: vehicle.decommissioned,
+      });
+      this.fetchVehicles();
+      return result;
+    },
+    async deleteVehicle(vehicle: number): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/vehicle/${vehicle}`);
+      this.fetchVehicles();
+      return result;
+    },
+  },
+});
diff --git a/src/stores/admin/unit/vehicleType/inspectionPlan.ts b/src/stores/admin/unit/vehicleType/inspectionPlan.ts
new file mode 100644
index 0000000..e7184ab
--- /dev/null
+++ b/src/stores/admin/unit/vehicleType/inspectionPlan.ts
@@ -0,0 +1,29 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+import { useVehicleTypeStore } from "./vehicleType";
+
+export const useVehicleTypeInspectionPlanStore = defineStore("vehicleTypeInspectionPlan", {
+  state: () => {
+    return {
+      inspectionPlans: [] as Array<InspectionPlanViewModel>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchInspectionPlanForVehicleType() {
+      const vehicleTypeId = useVehicleTypeStore().activeVehicleType;
+      this.loading = "loading";
+      http
+        .get(`/admin/inspectionPlan/vehicleType/${vehicleTypeId}?noLimit=true`)
+        .then((result) => {
+          this.inspectionPlans = result.data.inspectionPlans;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+  },
+});
diff --git a/src/stores/admin/unit/vehicleType/vehicleType.ts b/src/stores/admin/unit/vehicleType/vehicleType.ts
new file mode 100644
index 0000000..9ec3904
--- /dev/null
+++ b/src/stores/admin/unit/vehicleType/vehicleType.ts
@@ -0,0 +1,93 @@
+import { defineStore } from "pinia";
+import type {
+  VehicleTypeViewModel,
+  CreateVehicleTypeViewModel,
+  UpdateVehicleTypeViewModel,
+} from "@/viewmodels/admin/unit/vehicle/vehicleType.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+
+export const useVehicleTypeStore = defineStore("vehicleType", {
+  state: () => {
+    return {
+      vehicleTypes: [] as Array<VehicleTypeViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      activeVehicleType: null as string | null,
+      activeVehicleTypeObj: null as VehicleTypeViewModel | null,
+      loadingActive: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchVehicleTypes(offset = 0, count = 25, search = "", clear = false) {
+      if (clear) this.vehicleTypes = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/vehicleType?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.vehicleTypes
+            .filter((elem: VehicleTypeViewModel) => this.vehicleTypes.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: VehicleTypeViewModel, index: number): VehicleTypeViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: VehicleTypeViewModel & { tab_pos: number }) => {
+              this.vehicleTypes.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    async getAllVehicleTypes(): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/vehicleType?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.vehicleTypes };
+      });
+    },
+    async searchVehicleTypes(search: string): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/vehicleType?search=${search}&noLimit=true`).then((res) => {
+        return { ...res, data: res.data.vehicleTypes };
+      });
+    },
+    fetchVehicleTypeByActiveId() {
+      this.loadingActive = "loading";
+      http
+        .get(`/admin/vehicleType/${this.activeVehicleType}`)
+        .then((res) => {
+          this.activeVehicleTypeObj = res.data;
+          this.loadingActive = "fetched";
+        })
+        .catch((err) => {
+          this.loadingActive = "failed";
+        });
+    },
+    fetchVehicleTypeById(id: string) {
+      return http.get(`/admin/vehicleType/${id}`);
+    },
+    async createVehicleType(vehicleType: CreateVehicleTypeViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/vehicleType`, {
+        type: vehicleType.type,
+        description: vehicleType.description,
+      });
+      this.fetchVehicleTypes();
+      return result;
+    },
+    async updateActiveVehicleType(vehicleType: UpdateVehicleTypeViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/vehicleType/${vehicleType.id}`, {
+        type: vehicleType.type,
+        description: vehicleType.description,
+      });
+      this.fetchVehicleTypes();
+      return result;
+    },
+    async deleteVehicleType(vehicleType: number): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/vehicleType/${vehicleType}`);
+      this.fetchVehicleTypes();
+      return result;
+    },
+  },
+});
diff --git a/src/stores/admin/unit/wearable/damageReport.ts b/src/stores/admin/unit/wearable/damageReport.ts
new file mode 100644
index 0000000..e54a912
--- /dev/null
+++ b/src/stores/admin/unit/wearable/damageReport.ts
@@ -0,0 +1,43 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import { useWearableStore } from "./wearable";
+import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
+
+export const useWearableDamageReportStore = defineStore("wearableDamageReport", {
+  state: () => {
+    return {
+      damageReports: [] as Array<DamageReportViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchDamageReportForWearable(offset = 0, count = 25, search = "", clear = false) {
+      const wearableId = useWearableStore().activeWearable;
+      if (clear) this.damageReports = [];
+      this.loading = "loading";
+      http
+        .get(
+          `/admin/damagereport/wearable/${wearableId}?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`
+        )
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.damageReports
+            .filter((elem: DamageReportViewModel) => this.damageReports.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: DamageReportViewModel, index: number): DamageReportViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: DamageReportViewModel & { tab_pos: number }) => {
+              this.damageReports.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+  },
+});
diff --git a/src/stores/admin/unit/wearable/inspection.ts b/src/stores/admin/unit/wearable/inspection.ts
new file mode 100644
index 0000000..1596da6
--- /dev/null
+++ b/src/stores/admin/unit/wearable/inspection.ts
@@ -0,0 +1,43 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import type { InspectionViewModel } from "@/viewmodels/admin/unit/inspection/inspection.models";
+import { useWearableStore } from "./wearable";
+
+export const useWearableInspectionStore = defineStore("wearableInspection", {
+  state: () => {
+    return {
+      inspections: [] as Array<InspectionViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchInspectionForWearable(offset = 0, count = 25, search = "", clear = false) {
+      const wearableId = useWearableStore().activeWearable;
+      if (clear) this.inspections = [];
+      this.loading = "loading";
+      http
+        .get(
+          `/admin/inspection/wearable/${wearableId}?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`
+        )
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.inspections
+            .filter((elem: InspectionViewModel) => this.inspections.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: InspectionViewModel, index: number): InspectionViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: InspectionViewModel & { tab_pos: number }) => {
+              this.inspections.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+  },
+});
diff --git a/src/stores/admin/unit/wearable/repair.ts b/src/stores/admin/unit/wearable/repair.ts
new file mode 100644
index 0000000..95f74e2
--- /dev/null
+++ b/src/stores/admin/unit/wearable/repair.ts
@@ -0,0 +1,43 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import { useWearableStore } from "./wearable";
+import type { RepairViewModel } from "@/viewmodels/admin/unit/repair.models";
+
+export const useWearableRepairStore = defineStore("wearableRepair", {
+  state: () => {
+    return {
+      repairs: [] as Array<RepairViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchRepairForWearable(offset = 0, count = 25, search = "", clear = false) {
+      const wearableId = useWearableStore().activeWearable;
+      if (clear) this.repairs = [];
+      this.loading = "loading";
+      http
+        .get(
+          `/admin/repair/wearable/${wearableId}?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`
+        )
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.repairs
+            .filter((elem: RepairViewModel) => this.repairs.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: RepairViewModel, index: number): RepairViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: RepairViewModel & { tab_pos: number }) => {
+              this.repairs.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+  },
+});
diff --git a/src/stores/admin/unit/wearable/wearable.ts b/src/stores/admin/unit/wearable/wearable.ts
new file mode 100644
index 0000000..a25cc49
--- /dev/null
+++ b/src/stores/admin/unit/wearable/wearable.ts
@@ -0,0 +1,110 @@
+import { defineStore } from "pinia";
+import type {
+  WearableViewModel,
+  CreateWearableViewModel,
+  UpdateWearableViewModel,
+} from "@/viewmodels/admin/unit/wearable/wearable.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+
+export const useWearableStore = defineStore("wearable", {
+  state: () => {
+    return {
+      wearables: [] as Array<WearableViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      activeWearable: null as string | null,
+      activeWearableObj: null as WearableViewModel | null,
+      loadingActive: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchWearables(offset = 0, count = 25, search = "", clear = false) {
+      if (clear) this.wearables = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/wearable?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.wearables
+            .filter((elem: WearableViewModel) => this.wearables.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: WearableViewModel, index: number): WearableViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: WearableViewModel & { tab_pos: number }) => {
+              this.wearables.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    async getAllWearables(): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/wearable?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.wearables };
+      });
+    },
+    async getWearablesByIds(ids: Array<string>): Promise<AxiosResponse<any, any>> {
+      return await http
+        .post(`/admin/wearable/ids`, {
+          ids,
+        })
+        .then((res) => {
+          return { ...res, data: res.data.wearables };
+        });
+    },
+    async searchWearables(search: string): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/wearable?search=${search}&noLimit=true`).then((res) => {
+        return { ...res, data: res.data.wearables };
+      });
+    },
+    fetchWearableByActiveId() {
+      this.loadingActive = "loading";
+      http
+        .get(`/admin/wearable/${this.activeWearable}`)
+        .then((res) => {
+          this.activeWearableObj = res.data;
+          this.loadingActive = "fetched";
+        })
+        .catch((err) => {
+          this.loadingActive = "failed";
+        });
+    },
+    fetchWearableById(id: string) {
+      return http.get(`/admin/wearable/${id}`);
+    },
+    async createWearable(wearable: CreateWearableViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/wearable`, {
+        wearableTypeId: wearable.wearableTypeId,
+        name: wearable.name,
+        code: wearable.code,
+        location: wearable.location,
+        commissioned: wearable.commissioned,
+        wearerId: wearable.wearerId,
+      });
+      this.fetchWearables();
+      return result;
+    },
+    async updateActiveWearable(wearable: UpdateWearableViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/wearable/${wearable.id}`, {
+        name: wearable.name,
+        code: wearable.code,
+        location: wearable.location,
+        commissioned: wearable.commissioned,
+        decommissioned: wearable.decommissioned,
+        wearerId: wearable.wearerId,
+      });
+      this.fetchWearables();
+      return result;
+    },
+    async deleteWearable(wearable: number): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/wearable/${wearable}`);
+      this.fetchWearables();
+      return result;
+    },
+  },
+});
diff --git a/src/stores/admin/unit/wearableType/inspectionPlan.ts b/src/stores/admin/unit/wearableType/inspectionPlan.ts
new file mode 100644
index 0000000..3622c37
--- /dev/null
+++ b/src/stores/admin/unit/wearableType/inspectionPlan.ts
@@ -0,0 +1,29 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+import { useWearableTypeStore } from "./wearableType";
+
+export const useWearableTypeInspectionPlanStore = defineStore("wearableTypeInspectionPlan", {
+  state: () => {
+    return {
+      inspectionPlans: [] as Array<InspectionPlanViewModel>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchInspectionPlanForWearableType() {
+      const wearableTypeId = useWearableTypeStore().activeWearableType;
+      this.loading = "loading";
+      http
+        .get(`/admin/inspectionPlan/wearableType/${wearableTypeId}?noLimit=true`)
+        .then((result) => {
+          this.inspectionPlans = result.data.inspectionPlans;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+  },
+});
diff --git a/src/stores/admin/unit/wearableType/wearableType.ts b/src/stores/admin/unit/wearableType/wearableType.ts
new file mode 100644
index 0000000..bba5113
--- /dev/null
+++ b/src/stores/admin/unit/wearableType/wearableType.ts
@@ -0,0 +1,93 @@
+import { defineStore } from "pinia";
+import type {
+  WearableTypeViewModel,
+  CreateWearableTypeViewModel,
+  UpdateWearableTypeViewModel,
+} from "@/viewmodels/admin/unit/wearable/wearableType.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+
+export const useWearableTypeStore = defineStore("wearableType", {
+  state: () => {
+    return {
+      wearableTypes: [] as Array<WearableTypeViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      activeWearableType: null as string | null,
+      activeWearableTypeObj: null as WearableTypeViewModel | null,
+      loadingActive: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchWearableTypes(offset = 0, count = 25, search = "", clear = false) {
+      if (clear) this.wearableTypes = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/wearableType?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.wearableTypes
+            .filter((elem: WearableTypeViewModel) => this.wearableTypes.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: WearableTypeViewModel, index: number): WearableTypeViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: WearableTypeViewModel & { tab_pos: number }) => {
+              this.wearableTypes.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    async getAllWearableTypes(): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/wearableType?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.wearableTypes };
+      });
+    },
+    async searchWearableTypes(search: string): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/wearableType?search=${search}&noLimit=true`).then((res) => {
+        return { ...res, data: res.data.wearableTypes };
+      });
+    },
+    fetchWearableTypeByActiveId() {
+      this.loadingActive = "loading";
+      http
+        .get(`/admin/wearableType/${this.activeWearableType}`)
+        .then((res) => {
+          this.activeWearableTypeObj = res.data;
+          this.loadingActive = "fetched";
+        })
+        .catch((err) => {
+          this.loadingActive = "failed";
+        });
+    },
+    fetchWearableTypeById(id: string) {
+      return http.get(`/admin/wearableType/${id}`);
+    },
+    async createWearableType(wearableType: CreateWearableTypeViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/wearableType`, {
+        type: wearableType.type,
+        description: wearableType.description,
+      });
+      this.fetchWearableTypes();
+      return result;
+    },
+    async updateWearableType(wearableType: UpdateWearableTypeViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/wearableType/${wearableType.id}`, {
+        type: wearableType.type,
+        description: wearableType.description,
+      });
+      this.fetchWearableTypes();
+      return result;
+    },
+    async deleteWearableType(wearableType: number): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/wearableType/${wearableType}`);
+      this.fetchWearableTypes();
+      return result;
+    },
+  },
+});
diff --git a/src/stores/configuration.ts b/src/stores/configuration.ts
index 493b688..c1062c9 100644
--- a/src/stores/configuration.ts
+++ b/src/stores/configuration.ts
@@ -10,6 +10,7 @@ export const useConfigurationStore = defineStore("configuration", {
       clubWebsite: "",
       appCustom_login_message: "",
       appShow_link_to_calendar: false as boolean,
+      appShow_link_to_damagereport: false as boolean,
 
       serverOffline: false as boolean,
     };
@@ -25,6 +26,7 @@ export const useConfigurationStore = defineStore("configuration", {
           this.clubWebsite = res.data["club.website"];
           this.appCustom_login_message = res.data["app.custom_login_message"];
           this.appShow_link_to_calendar = res.data["app.show_link_to_calendar"];
+          this.appShow_link_to_damagereport = res.data["app.show_link_to_damagereport"];
         })
         .catch(() => {
           this.serverOffline = true;
diff --git a/src/stores/modal.ts b/src/stores/modal.ts
index cdc4c49..a537848 100644
--- a/src/stores/modal.ts
+++ b/src/stores/modal.ts
@@ -4,19 +4,22 @@ export const useModalStore = defineStore("modal", {
   state: () => {
     return {
       show: false,
-      component_ref: null as any,
-      data: null as any,
+      component_ref: undefined as any,
+      data: undefined as any,
+      callback: undefined as undefined | Function,
     };
   },
   actions: {
-    openModal(component_ref: any, data?: any) {
+    openModal(component_ref: any, data?: any, callback?: Function) {
       this.component_ref = component_ref;
       this.data = data;
+      this.callback = callback;
       this.show = true;
     },
     closeModal() {
-      this.component_ref = null;
-      this.data = null;
+      this.component_ref = undefined;
+      this.data = undefined;
+      this.callback = undefined;
       this.show = false;
     },
   },
diff --git a/src/stores/notification.ts b/src/stores/notification.ts
index 872b108..0ec8fc0 100644
--- a/src/stores/notification.ts
+++ b/src/stores/notification.ts
@@ -8,7 +8,7 @@ export interface Notification {
   indicator: boolean;
 }
 
-export type NotificationType = "info" | "warning" | "error";
+export type NotificationType = "info" | "warning" | "error" | "success";
 
 export const useNotificationStore = defineStore("notification", {
   state: () => {
diff --git a/src/types/permissionTypes.ts b/src/types/permissionTypes.ts
index 013615c..091c0c3 100644
--- a/src/types/permissionTypes.ts
+++ b/src/types/permissionTypes.ts
@@ -1,28 +1,46 @@
-export type PermissionSection = "club" | "configuration" | "management";
+export type PermissionSection = "club" | "unit" | "configuration" | "management";
 
 export type PermissionModule =
+  // club
   | "member"
   | "calendar"
   | "newsletter"
-  | "newsletter_config"
   | "protocol"
+  | "query"
   | "listprint"
+  // unit
+  | "equipment"
+  | "equipment_type"
+  | "vehicle"
+  | "vehicle_type"
+  | "wearable"
+  | "wearable_type"
+  | "inspection"
+  | "inspection_plan"
+  | "respiratory_gear"
+  | "respiratory_wearer"
+  | "respiratory_mission"
+  | "damage_report"
+  | "maintenance"
+  | "repair"
+  // configuration
   | "qualification"
   | "award"
   | "executive_position"
   | "communication_type"
   | "membership_status"
+  | "newsletter_config"
   | "salutation"
   | "education"
   | "calendar_type"
-  | "user"
-  | "role"
-  | "webapi"
-  | "query"
   | "query_store"
   | "template"
   | "template_usage"
   | "backup"
+  // management
+  | "user"
+  | "role"
+  | "webapi"
   | "setting";
 
 export type PermissionType = "read" | "create" | "update" | "delete";
@@ -57,35 +75,69 @@ export type SectionsAndModulesObject = {
   }>;
 };
 
-export const permissionSections: Array<PermissionSection> = ["club", "configuration", "management"];
+export const permissionSections: Array<PermissionSection> = ["club", "unit", "configuration", "management"];
 export const permissionModules: Array<PermissionModule> = [
+  // club
   "member",
   "calendar",
   "newsletter",
-  "newsletter_config",
   "protocol",
+  "query",
   "listprint",
+  // unit
+  "equipment",
+  "equipment_type",
+  "vehicle",
+  "vehicle_type",
+  "wearable",
+  "wearable_type",
+  "inspection",
+  "inspection_plan",
+  "respiratory_gear",
+  "respiratory_wearer",
+  "respiratory_mission",
+  "damage_report",
+  "maintenance",
+  "repair",
+  // configuration
   "qualification",
   "award",
   "executive_position",
   "communication_type",
   "membership_status",
+  "newsletter_config",
   "salutation",
   "education",
   "calendar_type",
-  "user",
-  "role",
-  "webapi",
-  "query",
   "query_store",
   "template",
   "template_usage",
   "backup",
+  // management
+  "user",
+  "role",
+  "webapi",
   "setting",
 ];
 export const permissionTypes: Array<PermissionType> = ["read", "create", "update", "delete"];
 export const sectionsAndModules: SectionsAndModulesObject = {
   club: ["member", "calendar", "newsletter", "protocol", "query", "listprint"],
+  unit: [
+    "equipment",
+    "equipment_type",
+    "vehicle",
+    "vehicle_type",
+    "wearable",
+    "wearable_type",
+    "inspection",
+    "inspection_plan",
+    "respiratory_gear",
+    "respiratory_wearer",
+    "respiratory_mission",
+    "damage_report",
+    "maintenance",
+    "repair",
+  ],
   configuration: [
     "qualification",
     "award",
diff --git a/src/types/settingTypes.ts b/src/types/settingTypes.ts
index 43d77a3..f865c74 100644
--- a/src/types/settingTypes.ts
+++ b/src/types/settingTypes.ts
@@ -8,6 +8,7 @@ export type SettingString =
   | "club.website"
   | "app.custom_login_message"
   | "app.show_link_to_calendar"
+  | "app.show_link_to_damagereport"
   | "session.jwt_expiration"
   | "session.refresh_expiration"
   | "session.pwa_refresh_expiration"
@@ -32,6 +33,7 @@ export type SettingValueMapping = {
   "club.website": string;
   "app.custom_login_message": string;
   "app.show_link_to_calendar": boolean;
+  "app.show_link_to_damagereport": boolean;
   "session.jwt_expiration": string;
   "session.refresh_expiration": string;
   "session.pwa_refresh_expiration": string;
@@ -66,6 +68,7 @@ export const settingsType: SettingsSchema = {
   "club.website": { type: "url", optional: true },
   "app.custom_login_message": { type: "string", optional: true },
   "app.show_link_to_calendar": { type: "boolean", default: true },
+  "app.show_link_to_damagereport": { type: "boolean", default: false },
   "session.jwt_expiration": { type: "ms", default: "15m" },
   "session.refresh_expiration": { type: "ms", default: "1d" },
   "session.pwa_refresh_expiration": { type: "ms", default: "5d" },
diff --git a/src/viewmodels/admin/unit/damageReport.models.ts b/src/viewmodels/admin/unit/damageReport.models.ts
new file mode 100644
index 0000000..461b316
--- /dev/null
+++ b/src/viewmodels/admin/unit/damageReport.models.ts
@@ -0,0 +1,52 @@
+import type { EquipmentViewModel } from "./equipment/equipment.models";
+import type { RepairViewModel } from "./repair.models";
+import type { VehicleViewModel } from "./vehicle/vehicle.models";
+import type { WearableViewModel } from "./wearable/wearable.models";
+
+export type DamageReportAssigned = {
+  relatedId: string;
+} & (
+  | {
+      assigned: "equipment";
+      related: EquipmentViewModel;
+    }
+  | {
+      assigned: "vehicle";
+      related: VehicleViewModel;
+    }
+  | {
+      assigned: "wearable";
+      related: WearableViewModel;
+    }
+);
+
+export type DamageReportViewModel = {
+  id: string;
+  title: string;
+  reportedAt: Date;
+  closedAt?: Date;
+  closedBy?: string;
+  status: string;
+  description: string;
+  location: string;
+  noteByReporter: string;
+  noteByWorker: string;
+  images: string[];
+  reportedBy: string;
+  repair?: RepairViewModel;
+} & Optional<DamageReportAssigned>;
+
+export interface CreateDamageReportViewModel {
+  title: string;
+  description: string;
+  reportedBy: string;
+  affectedId: string;
+  affected: "equipment" | "vehicle" | "wearable";
+}
+
+export interface UpdateDamageReportViewModel {
+  id: string;
+  status: string;
+  noteByWorker: string;
+  done: boolean;
+}
diff --git a/src/viewmodels/admin/unit/equipment/equipment.models.ts b/src/viewmodels/admin/unit/equipment/equipment.models.ts
new file mode 100644
index 0000000..3c778e2
--- /dev/null
+++ b/src/viewmodels/admin/unit/equipment/equipment.models.ts
@@ -0,0 +1,37 @@
+import type { EquipmentTypeViewModel } from "./equipmentType.models";
+
+export interface EquipmentViewModel {
+  id: string;
+  code?: string;
+  name: string;
+  location: string;
+  commissioned: Date;
+  decommissioned?: Date;
+  equipmentTypeId: string;
+  equipmentType: EquipmentTypeViewModel;
+}
+
+export interface MinifiedEquipmentViewModel {
+  id: string;
+  code?: string;
+  name: string;
+  type: string;
+  assigned: "equipment";
+}
+
+export interface CreateEquipmentViewModel {
+  code?: string;
+  name: string;
+  location: string;
+  commissioned: Date;
+  equipmentTypeId: string;
+}
+
+export interface UpdateEquipmentViewModel {
+  id: string;
+  code?: string;
+  name: string;
+  location: string;
+  commissioned: Date;
+  decommissioned?: Date;
+}
diff --git a/src/viewmodels/admin/unit/equipment/equipmentType.models.ts b/src/viewmodels/admin/unit/equipment/equipmentType.models.ts
new file mode 100644
index 0000000..d7dfad9
--- /dev/null
+++ b/src/viewmodels/admin/unit/equipment/equipmentType.models.ts
@@ -0,0 +1,17 @@
+export interface EquipmentTypeViewModel {
+  id: string;
+  type: string;
+  description: string;
+  equipmentCount: number;
+}
+
+export interface CreateEquipmentTypeViewModel {
+  type: string;
+  description: string;
+}
+
+export interface UpdateEquipmentTypeViewModel {
+  id: string;
+  type: string;
+  description: string;
+}
diff --git a/src/viewmodels/admin/unit/inspection/inspection.models.ts b/src/viewmodels/admin/unit/inspection/inspection.models.ts
new file mode 100644
index 0000000..bf8f770
--- /dev/null
+++ b/src/viewmodels/admin/unit/inspection/inspection.models.ts
@@ -0,0 +1,87 @@
+import type { EquipmentViewModel } from "../equipment/equipment.models";
+import type {
+  InspectionPlanViewModel,
+  InspectionPointViewModel,
+  InspectionVersionedPlanViewModel,
+} from "./inspectionPlan.models";
+import type { VehicleViewModel } from "../vehicle/vehicle.models";
+import type { WearableViewModel } from "../wearable/wearable.models";
+
+export type InspectionRelated = {
+  relatedId: string;
+} & (
+  | {
+      assigned: "equipment";
+      related: EquipmentViewModel;
+    }
+  | {
+      assigned: "vehicle";
+      related: VehicleViewModel;
+    }
+  | {
+      assigned: "wearable";
+      related: WearableViewModel;
+    }
+);
+
+export type InspectionViewModel = {
+  id: string;
+  inspectionPlanId: string;
+  inspectionPlan: InspectionPlanViewModel;
+  inspectionVersionedPlanId: string;
+  inspectionVersionedPlan: InspectionVersionedPlanViewModel;
+  context: string;
+  created: Date;
+  finishedAt?: Date;
+  finishedBy?: string;
+  isOpen: boolean;
+  nextInspection?: Date;
+  checks: Array<InspectionPointResultViewModel>;
+  relatedId: string;
+} & InspectionRelated;
+
+export type MinifiedInspectionViewModel = {
+  id: string;
+  inspectionPlanId: string;
+  inspectionPlan: InspectionPlanViewModel;
+  context: string;
+  created: Date;
+  finished?: Date;
+  isOpen: boolean;
+  nextInspection?: Date;
+  relatedId: string;
+} & InspectionRelated;
+
+export type InspectionNextViewModel = {
+  id: string;
+  inspectionPlanId: string;
+  inspectionPlan: InspectionPlanViewModel;
+  dueDate: Date;
+  relatedId: string;
+} & InspectionRelated;
+
+export interface InspectionPointResultViewModel {
+  inspectionId: string;
+  inspectionPointId: string;
+  inspectionPoint?: InspectionPointViewModel;
+  value: string;
+}
+
+export type CreateInspectionViewModel = {
+  assigned: "equipment" | "vehicle" | "wearable";
+  relatedId: string;
+  inspectionPlanId: string;
+  nextInspection?: Date;
+  context?: string;
+};
+
+export type UpdateInspectionViewModel = {
+  id: string;
+  nextInspection?: Date;
+  context?: string;
+};
+
+export interface CreateOrUpdateInspectionPointResultCommand {
+  inspectionPointId: string;
+  value: string;
+}
diff --git a/src/viewmodels/admin/unit/inspection/inspectionPlan.models.ts b/src/viewmodels/admin/unit/inspection/inspectionPlan.models.ts
new file mode 100644
index 0000000..ad0478c
--- /dev/null
+++ b/src/viewmodels/admin/unit/inspection/inspectionPlan.models.ts
@@ -0,0 +1,65 @@
+import type { InspectionPointEnum } from "@/enums/inspectionEnum";
+import type { EquipmentViewModel } from "../equipment/equipment.models";
+import type { VehicleViewModel } from "../vehicle/vehicle.models";
+import type { EquipmentTypeViewModel } from "../equipment/equipmentType.models";
+import type { VehicleTypeViewModel } from "../vehicle/vehicleType.models";
+import type { WearableTypeViewModel } from "../wearable/wearableType.models";
+
+export type PlanTimeDefinition = `${number}-${"d" | "m" | "y"}` | `${number}/${number | "*"}`;
+
+export type InspectionPlanViewModel = {
+  id: string;
+  title: string;
+  inspectionInterval: PlanTimeDefinition;
+  remindTime: PlanTimeDefinition;
+  version: number;
+  created: Date;
+  inspectionPoints: InspectionPointViewModel[];
+  relatedId: string;
+} & (
+  | {
+      assigned: "equipment";
+      related: EquipmentTypeViewModel;
+    }
+  | {
+      assigned: "vehicle";
+      related: VehicleTypeViewModel;
+    }
+  | {
+      assigned: "wearable";
+      related: WearableTypeViewModel;
+    }
+);
+
+export interface InspectionVersionedPlanViewModel {
+  id: string;
+  version: number;
+  created: Date;
+  inspectionPoints: InspectionPointViewModel[];
+}
+
+export interface InspectionPointViewModel {
+  id: string;
+  title: string;
+  description: string;
+  type: InspectionPointEnum;
+  min?: number;
+  max?: number;
+  others?: string;
+  sort: number;
+}
+
+export interface CreateInspectionPlanViewModel {
+  title: string;
+  inspectionInterval: PlanTimeDefinition;
+  remindTime: PlanTimeDefinition;
+  relatedId: string;
+  assigned: "vehicle" | "equipment" | "wearable";
+}
+
+export interface UpdateInspectionPlanViewModel {
+  id: string;
+  title: string;
+  inspectionInterval: PlanTimeDefinition;
+  remindTime?: PlanTimeDefinition;
+}
diff --git a/src/viewmodels/admin/unit/maintenance.models.ts b/src/viewmodels/admin/unit/maintenance.models.ts
new file mode 100644
index 0000000..bfcf1e2
--- /dev/null
+++ b/src/viewmodels/admin/unit/maintenance.models.ts
@@ -0,0 +1,40 @@
+import type { EquipmentViewModel } from "./equipment/equipment.models";
+import type { VehicleViewModel } from "./vehicle/vehicle.models";
+import type { WearableViewModel } from "./wearable/wearable.models";
+
+export type MaintenanceAssigned = {
+  relatedId: string;
+} & (
+  | {
+      assigned: "equipment";
+      related: EquipmentViewModel;
+    }
+  | {
+      assigned: "vehicle";
+      related: VehicleViewModel;
+    }
+  | {
+      assigned: "wearable";
+      related: WearableViewModel;
+    }
+);
+
+export type MaintenanceViewModel = {
+  id: string;
+  createdAt: Date;
+  status: string;
+  description: string;
+} & MaintenanceAssigned;
+
+export interface CreateMaintenanceViewModel {
+  description: string;
+  reportedBy: string;
+  affectedId: string;
+  affected: "equipment" | "vehicle" | "wearable";
+}
+
+export interface UpdateMaintenanceViewModel {
+  id: string;
+  status: string;
+  done: boolean;
+}
diff --git a/src/viewmodels/admin/unit/repair.models.ts b/src/viewmodels/admin/unit/repair.models.ts
new file mode 100644
index 0000000..7d64743
--- /dev/null
+++ b/src/viewmodels/admin/unit/repair.models.ts
@@ -0,0 +1,58 @@
+import type { DamageReportViewModel } from "./damageReport.models";
+import type { EquipmentViewModel } from "./equipment/equipment.models";
+import type { MaintenanceViewModel } from "./maintenance.models";
+import type { VehicleViewModel } from "./vehicle/vehicle.models";
+import type { WearableViewModel } from "./wearable/wearable.models";
+
+export type RepairAssigned = {
+  relatedId: string;
+} & (
+  | {
+      assigned: "equipment";
+      related: EquipmentViewModel;
+    }
+  | {
+      assigned: "vehicle";
+      related: VehicleViewModel;
+    }
+  | {
+      assigned: "wearable";
+      related: WearableViewModel;
+    }
+);
+
+export type RepairViewModel = {
+  id: string;
+  createdAt: Date;
+  finishedAt?: Date;
+  finishedBy?: string;
+  status: string;
+  responsible: string;
+  title: string;
+  description: string;
+  images: string[];
+  reportDocument: string;
+  reports: DamageReportViewModel[];
+} & RepairAssigned;
+
+export interface CreateRepairViewModel {
+  affected: "equipment" | "vehicle" | "wearable";
+  affectedId: string;
+  title: string;
+  description: string;
+  responsible: string;
+  reports: string[];
+}
+
+export interface UpdateRepairStatusViewModel {
+  id: string;
+  status: string;
+  done: boolean;
+}
+
+export interface UpdateRepairViewModel {
+  id: string;
+  title: string;
+  description: string;
+  responsible: string;
+}
diff --git a/src/viewmodels/admin/unit/respiratory/respiratoryGear.models.ts b/src/viewmodels/admin/unit/respiratory/respiratoryGear.models.ts
new file mode 100644
index 0000000..07f4ec8
--- /dev/null
+++ b/src/viewmodels/admin/unit/respiratory/respiratoryGear.models.ts
@@ -0,0 +1,16 @@
+import type { EquipmentViewModel } from "../equipment/equipment.models";
+
+export interface RespiratoryGearViewModel {
+  id: string;
+  equipmentId: string;
+  equipment: EquipmentViewModel;
+}
+
+export interface CreateRespiratoryGearViewModel {
+  equipmentId: string;
+}
+
+export interface UpdateRespiratoryGearViewModel {
+  id: string;
+  equipmentId: string;
+}
diff --git a/src/viewmodels/admin/unit/respiratory/respiratoryMission.models.ts b/src/viewmodels/admin/unit/respiratory/respiratoryMission.models.ts
new file mode 100644
index 0000000..49c6e7f
--- /dev/null
+++ b/src/viewmodels/admin/unit/respiratory/respiratoryMission.models.ts
@@ -0,0 +1,20 @@
+export interface RespiratoryMissionViewModel {
+  id: string;
+  date: Date;
+  title: string;
+  description: string;
+  // refs to used respiratory gear and wearers
+}
+
+export interface CreateRespiratoryMissionViewModel {
+  date: Date;
+  title: string;
+  description: string;
+}
+
+export interface UpdateRespiratoryMissionViewModel {
+  id: string;
+  date: Date;
+  title: string;
+  description: string;
+}
diff --git a/src/viewmodels/admin/unit/respiratory/respiratoryWearer.models.ts b/src/viewmodels/admin/unit/respiratory/respiratoryWearer.models.ts
new file mode 100644
index 0000000..eca9194
--- /dev/null
+++ b/src/viewmodels/admin/unit/respiratory/respiratoryWearer.models.ts
@@ -0,0 +1,16 @@
+import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
+
+export interface RespiratoryWearerViewModel {
+  id: string;
+  memberId: string;
+  member: MemberViewModel;
+}
+
+export interface CreateRespiratoryWearerViewModel {
+  memberId: string;
+}
+
+export interface UpdateRespiratoryWearerViewModel {
+  id: string;
+  memberId: string;
+}
diff --git a/src/viewmodels/admin/unit/vehicle/vehicle.models.ts b/src/viewmodels/admin/unit/vehicle/vehicle.models.ts
new file mode 100644
index 0000000..8020444
--- /dev/null
+++ b/src/viewmodels/admin/unit/vehicle/vehicle.models.ts
@@ -0,0 +1,37 @@
+import type { VehicleTypeViewModel } from "./vehicleType.models";
+
+export interface VehicleViewModel {
+  id: string;
+  code?: string;
+  name: string;
+  location: string;
+  commissioned: Date;
+  decommissioned?: Date;
+  vehicleTypeId: string;
+  vehicleType: VehicleTypeViewModel;
+}
+
+export interface MinifiedVehicleViewModel {
+  id: string;
+  code?: string;
+  name: string;
+  type: string;
+  assigned: "vehicle";
+}
+
+export interface CreateVehicleViewModel {
+  code?: string;
+  name: string;
+  location: string;
+  commissioned: Date;
+  vehicleTypeId: string;
+}
+
+export interface UpdateVehicleViewModel {
+  id: string;
+  code?: string;
+  name: string;
+  location: string;
+  commissioned: Date;
+  decommissioned?: Date;
+}
diff --git a/src/viewmodels/admin/unit/vehicle/vehicleType.models.ts b/src/viewmodels/admin/unit/vehicle/vehicleType.models.ts
new file mode 100644
index 0000000..72e1203
--- /dev/null
+++ b/src/viewmodels/admin/unit/vehicle/vehicleType.models.ts
@@ -0,0 +1,17 @@
+export interface VehicleTypeViewModel {
+  id: string;
+  type: string;
+  description: string;
+  vehicleCount: number;
+}
+
+export interface CreateVehicleTypeViewModel {
+  type: string;
+  description: string;
+}
+
+export interface UpdateVehicleTypeViewModel {
+  id: string;
+  type: string;
+  description: string;
+}
diff --git a/src/viewmodels/admin/unit/wearable/wearable.models.ts b/src/viewmodels/admin/unit/wearable/wearable.models.ts
new file mode 100644
index 0000000..eed19e1
--- /dev/null
+++ b/src/viewmodels/admin/unit/wearable/wearable.models.ts
@@ -0,0 +1,42 @@
+import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
+import type { WearableTypeViewModel } from "./wearableType.models";
+
+export interface WearableViewModel {
+  id: string;
+  code?: string;
+  name: string;
+  location: string;
+  commissioned: Date;
+  decommissioned?: Date;
+  wearerId?: string;
+  wearer?: MemberViewModel;
+  wearableTypeId: string;
+  wearableType: WearableTypeViewModel;
+}
+
+export interface MinifiedWearableViewModel {
+  id: string;
+  code?: string;
+  name: string;
+  type: string;
+  assigned: "wearable";
+}
+
+export interface CreateWearableViewModel {
+  code?: string;
+  name: string;
+  wearerId?: string;
+  location?: string;
+  commissioned: Date;
+  wearableTypeId: string;
+}
+
+export interface UpdateWearableViewModel {
+  id: string;
+  code?: string;
+  name: string;
+  location?: string;
+  commissioned: Date;
+  decommissioned?: Date;
+  wearerId?: string;
+}
diff --git a/src/viewmodels/admin/unit/wearable/wearableType.models.ts b/src/viewmodels/admin/unit/wearable/wearableType.models.ts
new file mode 100644
index 0000000..d3c9c0e
--- /dev/null
+++ b/src/viewmodels/admin/unit/wearable/wearableType.models.ts
@@ -0,0 +1,17 @@
+export interface WearableTypeViewModel {
+  id: string;
+  type: string;
+  description: string;
+  wearableCount: number;
+}
+
+export interface CreateWearableTypeViewModel {
+  type: string;
+  description: string;
+}
+
+export interface UpdateWearableTypeViewModel {
+  id: string;
+  type: string;
+  description: string;
+}
diff --git a/src/views/Login.vue b/src/views/Login.vue
index bc9e251..33d22f6 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -69,6 +69,9 @@
         <RouterLink v-if="appShow_link_to_calendar" :to="{ name: 'public-calendar' }" button primary-outline>
           zum Kalender
         </RouterLink>
+        <RouterLink v-if="appShow_link_to_damagereport" :to="{ name: 'public-damage_report' }" button primary-outline>
+          Schaden melden
+        </RouterLink>
       </div>
 
       <FormBottomBar />
@@ -100,7 +103,7 @@ export default defineComponent({
     };
   },
   computed: {
-    ...mapState(useConfigurationStore, ["clubName", "appShow_link_to_calendar"]),
+    ...mapState(useConfigurationStore, ["clubName", "appShow_link_to_calendar", "appShow_link_to_damagereport"]),
   },
   mounted() {
     this.username = localStorage.getItem("username") ?? "";
diff --git a/src/views/admin/View.vue b/src/views/admin/View.vue
index 92f6466..685dd82 100644
--- a/src/views/admin/View.vue
+++ b/src/views/admin/View.vue
@@ -26,6 +26,9 @@
             <p v-else class="pt-4 border-b border-gray-300">{{ item.title }}</p>
           </div>
         </template>
+        <template #bottomButtons>
+          <ScanSidebarInfo v-if="inUse" />
+        </template>
       </SidebarTemplate>
     </template>
     <template #main>
@@ -43,6 +46,8 @@ import SidebarTemplate from "@/templates/Sidebar.vue";
 import RoutingLink from "@/components/admin/RoutingLink.vue";
 import { useAbilityStore } from "@/stores/ability";
 import { RouterView } from "vue-router";
+import { useScannerStore } from "@/stores/admin/scanner";
+import ScanSidebarInfo from "@/components/scanner/ScanSidebarInfo.vue";
 </script>
 
 <script lang="ts">
@@ -54,6 +59,7 @@ export default defineComponent({
       "activeLink",
       "activeNavigation",
     ]),
+    ...mapState(useScannerStore, ["inUse"]),
   },
   created() {
     useAbilityStore().$subscribe(() => {
diff --git a/src/views/admin/club/newsletter/NewsletterRecipients.vue b/src/views/admin/club/newsletter/NewsletterRecipients.vue
index e160201..6fcdec5 100644
--- a/src/views/admin/club/newsletter/NewsletterRecipients.vue
+++ b/src/views/admin/club/newsletter/NewsletterRecipients.vue
@@ -15,7 +15,7 @@
       </div>
     </div>
     <div v-else class="flex flex-row gap-2 items-center">
-      <MemberSearchSelect
+      <MemberSearchSelectMultiple
         title="weitere Empfänger suchen"
         showTitleAsPlaceholder
         v-model="recipients"
@@ -74,7 +74,7 @@ import { useNewsletterRecipientsStore } from "@/stores/admin/club/newsletter/new
 import { useAbilityStore } from "@/stores/ability";
 import { useQueryStoreStore } from "@/stores/admin/configuration/queryStore";
 import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
-import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
+import MemberSearchSelectMultiple from "@/components/search/MemberSearchSelectMultiple.vue";
 import type { FieldType } from "@/types/dynamicQueries";
 import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
 </script>
diff --git a/src/views/admin/club/protocol/ProtocolPresence.vue b/src/views/admin/club/protocol/ProtocolPresence.vue
index d3a0862..52772cf 100644
--- a/src/views/admin/club/protocol/ProtocolPresence.vue
+++ b/src/views/admin/club/protocol/ProtocolPresence.vue
@@ -5,7 +5,7 @@
       &#8634; laden fehlgeschlagen
     </p>
 
-    <MemberSearchSelect
+    <MemberSearchSelectMultiple
       title="Anwesende suchen"
       :model-value="presence.map((p) => p.memberId)"
       :disabled="!can('create', 'club', 'protocol')"
@@ -64,7 +64,7 @@ import { TrashIcon } from "@heroicons/vue/24/outline";
 import { TrashIcon as TrashIconSolid } from "@heroicons/vue/24/solid";
 import { useProtocolPresenceStore } from "@/stores/admin/club/protocol/protocolPresence";
 import { useAbilityStore } from "@/stores/ability";
-import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
+import MemberSearchSelectMultiple from "@/components/search/MemberSearchSelectMultiple.vue";
 import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
 import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
 </script>
diff --git a/src/views/admin/unit/damageReport/DamageReport.vue b/src/views/admin/unit/damageReport/DamageReport.vue
new file mode 100644
index 0000000..a42ef70
--- /dev/null
+++ b/src/views/admin/unit/damageReport/DamageReport.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="flex flex-col w-full h-full gap-2 justify-center">
+    <Pagination
+      :items="damageReports"
+      :totalCount="totalCount"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchOpenDamageReports(offset, count, search)"
+    >
+      <template #pageRow="{ row }: { row: DamageReportViewModel }">
+        <DamageReportListItem :damageReport="row" />
+      </template>
+    </Pagination>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useAbilityStore } from "@/stores/ability";
+import { useDamageReportStore } from "@/stores/admin/unit/damageReport";
+import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
+import Pagination from "@/components/Pagination.vue";
+import DamageReportListItem from "@/components/admin/unit/damageReport/DamageReportListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useDamageReportStore, ["damageReports", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchOpenDamageReports(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useDamageReportStore, ["fetchOpenDamageReports"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/damageReport/DamageReportClosed.vue b/src/views/admin/unit/damageReport/DamageReportClosed.vue
new file mode 100644
index 0000000..e6c236b
--- /dev/null
+++ b/src/views/admin/unit/damageReport/DamageReportClosed.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="flex flex-col w-full h-full gap-2 justify-center">
+    <Pagination
+      :items="damageReports"
+      :totalCount="totalCount"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchDoneDamageReports(offset, count, search)"
+    >
+      <template #pageRow="{ row }: { row: DamageReportViewModel }">
+        <DamageReportListItem :damageReport="row" />
+      </template>
+    </Pagination>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useAbilityStore } from "@/stores/ability";
+import { useDamageReportStore } from "@/stores/admin/unit/damageReport";
+import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
+import Pagination from "@/components/Pagination.vue";
+import DamageReportListItem from "@/components/admin/unit/damageReport/DamageReportListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useDamageReportStore, ["damageReports", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchDoneDamageReports(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useDamageReportStore, ["fetchDoneDamageReports"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/damageReport/DamageReportRouting.vue b/src/views/admin/unit/damageReport/DamageReportRouting.vue
new file mode 100644
index 0000000..c876d31
--- /dev/null
+++ b/src/views/admin/unit/damageReport/DamageReportRouting.vue
@@ -0,0 +1,94 @@
+<template>
+  <MainTemplate>
+    <template #headerInsert>
+      <RouterLink :to="{ name: 'admin-unit-damage_report-open' }" class="text-primary">zurück zur Liste</RouterLink>
+    </template>
+    <template #topBar>
+      <h1 class="font-bold text-xl h-8 min-h-fit">
+        {{ activeDamageReportObj?.title }} -
+        {{ activeDamageReportObj?.related?.name ?? "Ohne Zuordnung" }}
+        <small v-if="activeDamageReportObj?.related">({{ activeDamageReportObj.related.code }})</small>
+      </h1>
+
+      <div class="flex flex-row gap-2">
+        <RouterLink
+          v-if="activeDamageReportObj?.repair && can('read', 'unit', 'repair')"
+          :to="{
+            name: `admin-unit-repair-overview`,
+            params: { repairId: activeDamageReportObj.repair.id },
+          }"
+          title="Zur verbundenen Reparatur"
+        >
+          <WrenchScrewdriverIcon class="w-5 h-5" />
+        </RouterLink>
+        <RouterLink
+          v-if="activeDamageReportObj?.related && can('read', 'unit', activeDamageReportObj.assigned)"
+          :to="{
+            name: `admin-unit-${activeDamageReportObj.assigned}-overview`,
+            params: { [`${activeDamageReportObj.assigned}Id`]: activeDamageReportObj.related.id ?? '_' },
+          }"
+        >
+          <ArrowTopRightOnSquareIcon class="w-5 h-5" />
+        </RouterLink>
+      </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 hidden class="w-full flex flex-row max-lg:flex-wrap justify-center">
+            <RouterLink
+              v-for="tab in tabs"
+              :key="tab.route"
+              v-slot="{ isExactActive }"
+              :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-hidden',
+                  isExactActive ? 'bg-red-200 shadow-sm 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 { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { RouterLink, RouterView } from "vue-router";
+import { useAbilityStore } from "@/stores/ability";
+import { useDamageReportStore } from "@/stores/admin/unit/damageReport";
+import { ArrowTopRightOnSquareIcon, WrenchScrewdriverIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    damageReportId: String,
+  },
+  data() {
+    return {
+      tabs: [{ route: "admin-unit-damage_report-overview", title: "Übersicht" }],
+    };
+  },
+  computed: {
+    ...mapState(useDamageReportStore, ["activeDamageReportObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchDamageReportByActiveId();
+  },
+  methods: {
+    ...mapActions(useDamageReportStore, ["fetchDamageReportByActiveId"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/damageReport/DamageReportStatusRouting.vue b/src/views/admin/unit/damageReport/DamageReportStatusRouting.vue
new file mode 100644
index 0000000..2ddb06c
--- /dev/null
+++ b/src/views/admin/unit/damageReport/DamageReportStatusRouting.vue
@@ -0,0 +1,52 @@
+<template>
+  <MainTemplate title="Schadensmeldungen">
+    <template #diffMain>
+      <div class="flex flex-col gap-2 grow px-7 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="{ isExactActive }"
+            :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-hidden',
+                isExactActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+              ]"
+            >
+              {{ tab.title }}
+            </p>
+          </RouterLink>
+        </div>
+        <RouterView />
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { RouterLink, RouterView } from "vue-router";
+import { useAbilityStore } from "@/stores/ability";
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      tabs: [
+        { route: "admin-unit-damage_report-open", title: "offen" },
+        { route: "admin-unit-damage_report-done", title: "bearbeitet" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/damageReport/Overview.vue b/src/views/admin/unit/damageReport/Overview.vue
new file mode 100644
index 0000000..a24aa2e
--- /dev/null
+++ b/src/views/admin/unit/damageReport/Overview.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="activeDamageReportObj != null" class="flex flex-col gap-2 w-full">
+      <div>
+        <label for="status">Status</label>
+        <input id="status" ref="status" type="text" :readonly="!editStatus" :value="activeDamageReportObj.status" />
+      </div>
+      <div>
+        <label for="noteByWorker">Anmerkung durch Bearbeiter</label>
+        <textarea
+          id="noteByWorker"
+          ref="noteByWorker"
+          :readonly="!editStatus"
+          placeholder="---"
+          :value="activeDamageReportObj.noteByWorker"
+        ></textarea>
+      </div>
+      <button
+        v-if="!editStatus && activeDamageReportObj.closedAt == undefined"
+        primary
+        class="w-fit! self-end"
+        :disabled="!can('update', 'unit', 'damage_report')"
+        @click="editStatus = true"
+      >
+        Status ändern
+      </button>
+      <div v-else-if="activeDamageReportObj.closedAt == undefined" class="flex flex-row gap-2 justify-end">
+        <button primary-outline class="w-fit!" @click="saveStatus(true)">speichern und abschließen</button>
+        <button primary class="w-fit!" @click="saveStatus(false)">Status speichern</button>
+      </div>
+      <br />
+      <div>
+        <label for="description">Beschreibung des Schadens</label>
+        <textarea id="description" readonly :value="activeDamageReportObj.description"></textarea>
+      </div>
+      <div>
+        <label for="location">Fundort</label>
+        <textarea id="location" readonly placeholder="---" :value="activeDamageReportObj.location"></textarea>
+      </div>
+      <div>
+        <label for="noteByReporter">Anmerkung für Bearbeiter</label>
+        <textarea
+          id="noteByReporter"
+          readonly
+          placeholder="---"
+          :value="activeDamageReportObj.noteByReporter"
+        ></textarea>
+      </div>
+      <div>
+        <label for="reportedBy">Gemeldet von</label>
+        <input id="reportedBy" type="text" readonly placeholder="---" :value="activeDamageReportObj.reportedBy" />
+      </div>
+      <div>
+        <label>Bild</label>
+        <div ref="imgs">
+          <small v-if="activeDamageReportObj.images.length == 0">Keine Bilder hochgeladen</small>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState, mapWritableState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useDamageReportStore } from "@/stores/admin/unit/damageReport";
+import type { DamageReportViewModel, UpdateDamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    damageReportId: String,
+  },
+  watch: {
+    activeDamageReportObj(val: DamageReportViewModel, oldVal: DamageReportViewModel | null) {
+      if (val && oldVal == null) this.loadImages();
+    },
+  },
+  data() {
+    return {
+      editStatus: false as boolean,
+      loading: undefined as undefined | "loading" | "success" | "failed",
+    };
+  },
+  computed: {
+    ...mapWritableState(useDamageReportStore, ["activeDamageReportObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.loadImages();
+  },
+  methods: {
+    ...mapActions(useDamageReportStore, ["loadDamageReportImage", "updateDamageReport"]),
+    loadImages() {
+      for (const i of this.activeDamageReportObj?.images ?? []) {
+        this.loadDamageReportImage(i)
+          .then((response) => {
+            const contentType =
+              response.headers && response.headers["content-type"] ? response.headers["content-type"] : "image/*";
+            const blob = new Blob([response.data], { type: contentType });
+            const img = document.createElement("img");
+            img.src = window.URL.createObjectURL(blob);
+            img.alt = "Schadensbild";
+            img.classList = "h-35 w-auto";
+            (this.$refs.imgs as HTMLElement).appendChild(img);
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+      }
+    },
+    saveStatus(finish: boolean) {
+      if (this.activeDamageReportObj == null) return;
+      this.loading = "loading";
+      let update: UpdateDamageReportViewModel = {
+        id: this.activeDamageReportObj.id,
+        status: (this.$refs.status as HTMLInputElement).value,
+        noteByWorker: (this.$refs.noteByWorker as HTMLInputElement).value,
+        done: finish,
+      };
+      this.updateDamageReport(update)
+        .then((res) => {
+          this.activeDamageReportObj!.closedAt = update.done ? new Date() : undefined;
+          this.activeDamageReportObj!.status = update.status;
+          this.activeDamageReportObj!.noteByWorker = update.noteByWorker;
+          this.loading = "success";
+          this.editStatus = false;
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.loading = undefined;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/equipment/CreateEquipment.vue b/src/views/admin/unit/equipment/CreateEquipment.vue
new file mode 100644
index 0000000..2699608
--- /dev/null
+++ b/src/views/admin/unit/equipment/CreateEquipment.vue
@@ -0,0 +1,105 @@
+<template>
+  <MainTemplate title="Ausrüstung erfassen">
+    <template #diffMain>
+      <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+        <form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerCreate">
+          <EquipmentTypeSearchSelect title="Typ" v-model="selectedType" />
+          <div>
+            <label for="name">Bezeichnung</label>
+            <input type="text" id="name" required />
+          </div>
+          <ScanInput name="code" label="Code" :required="false" />
+          <div>
+            <label for="commissioned">In-Betrieb-Nahme</label>
+            <input type="date" id="commissioned" required />
+          </div>
+          <div>
+            <label for="location">Verortung (optional)</label>
+            <input type="text" id="location" />
+          </div>
+          <div class="flex flex-row justify-end gap-2">
+            <RouterLink
+              :to="{ name: 'admin-unit-equipment' }"
+              primary-outline
+              button
+              class="w-fit!"
+              :disabled="status == 'loading' || status?.status == 'success'"
+            >
+              abbrechen
+            </RouterLink>
+            <button primary type="submit" class="w-fit!" :disabled="status == 'loading'">speichern</button>
+            <Spinner v-if="status == 'loading'" class="my-auto" />
+            <SuccessCheckmark v-else-if="status?.status == 'success'" />
+            <FailureXMark v-else-if="status?.status == 'failed'" />
+          </div>
+        </form>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
+import ScanInput from "@/components/scanner/ScanInput.vue";
+import EquipmentTypeSearchSelect from "@/components/search/EquipmentTypeSearchSelect.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: null as any,
+      selectedType: "" as string,
+    };
+  },
+  computed: {
+    ...mapState(useEquipmentTypeStore, ["equipmentTypes"]),
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useEquipmentStore, ["createEquipment"]),
+    ...mapActions(useEquipmentTypeStore, ["searchEquipmentTypes"]),
+    triggerCreate(e: any) {
+      if (this.selectedType == null) return;
+      let formData = e.target.elements;
+      let createEquipment: CreateEquipmentViewModel = {
+        code: formData.code.value || null,
+        name: formData.name.value,
+        location: formData.location.value,
+        equipmentTypeId: this.selectedType,
+        commissioned: formData.commissioned.value,
+      };
+      this.status = "loading";
+      this.createEquipment(createEquipment)
+        .then((res) => {
+          this.status = { status: "success" };
+
+          this.timeout = setTimeout(() => {
+            this.$router.push({
+              name: "admin-unit-equipment-overview",
+              params: {
+                equipmentId: res.data,
+              },
+            });
+          }, 1500);
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/equipment/DamageReport.vue b/src/views/admin/unit/equipment/DamageReport.vue
new file mode 100644
index 0000000..790bd11
--- /dev/null
+++ b/src/views/admin/unit/equipment/DamageReport.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full">
+    <Pagination
+      :items="damageReports"
+      :totalCount="totalCount"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchDamageReportForEquipment(offset, count, search)"
+    >
+      <template #pageRow="{ row }: { row: DamageReportViewModel }">
+        <RouterLink
+          :to="{ name: 'admin-unit-damage_report-overview', params: { damageReportId: row.id } }"
+          :disabled="!can('create', 'unit', 'damage_report')"
+          class="flex flex-col h-fit w-full border border-primary rounded-md"
+        >
+          <div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
+            <PencilSquareIcon v-if="row.closedAt == undefined" class="w-5 h-5" />
+            <p class="grow">{{ row.title }} - {{ new Date(row.reportedAt).toLocaleString("de") }} - {{ row.status }}</p>
+            <div class="flex flex-row gap-2">
+              <div v-if="row.images.length != 0" class="cursor-pointer">
+                <PhotoIcon class="w-5 h-5" />
+              </div>
+              <div v-if="row.location" class="cursor-pointer">
+                <MapPinIcon class="w-5 h-5" />
+              </div>
+              <div v-if="row.reportedBy" class="cursor-pointer">
+                <UserIcon class="w-5 h-5" />
+              </div>
+              <div v-if="row.repair" class="cursor-pointer">
+                <WrenchScrewdriverIcon class="w-5 h-5" />
+              </div>
+            </div>
+          </div>
+          <div class="p-2">
+            <p>Beschreibung: {{ row.description }}</p>
+          </div>
+        </RouterLink>
+      </template>
+    </Pagination>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useEquipmentDamageReportStore } from "@/stores/admin/unit/equipment/damageReport";
+import Pagination from "@/components/Pagination.vue";
+import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
+import { PhotoIcon, PencilSquareIcon, MapPinIcon, WrenchScrewdriverIcon, UserIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    equipmentId: String,
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useEquipmentDamageReportStore, ["damageReports", "loading", "totalCount"]),
+  },
+  mounted() {
+    this.fetchDamageReportForEquipment(0, 25, "", true);
+  },
+  methods: {
+    ...mapActions(useEquipmentDamageReportStore, ["fetchDamageReportForEquipment"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/equipment/Equipment.vue b/src/views/admin/unit/equipment/Equipment.vue
new file mode 100644
index 0000000..4576190
--- /dev/null
+++ b/src/views/admin/unit/equipment/Equipment.vue
@@ -0,0 +1,65 @@
+<template>
+  <MainTemplate title="Gerätschaften">
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+        <Pagination
+          :items="equipments"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          useSearch
+          useScanner
+          @load-data="(offset, count, search) => fetchEquipments(offset, count, search)"
+          @search="(search) => fetchEquipments(0, maxEntriesPerPage, search, true)"
+        >
+          <template #pageRow="{ row }: { row: EquipmentViewModel }">
+            <EquipmentListItem :equipment="row" />
+          </template>
+        </Pagination>
+
+        <div class="flex flex-row gap-4">
+          <RouterLink
+            v-if="can('create', 'unit', 'equipment')"
+            :to="{ name: 'admin-unit-equipment-create' }"
+            primary
+            button
+            class="w-fit!"
+          >
+            Gerätschaft erfassen
+          </RouterLink>
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import type { EquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import EquipmentListItem from "@/components/admin/unit/equipment/EquipmentListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useEquipmentStore, ["equipments", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchEquipments(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useEquipmentStore, ["fetchEquipments"]),
+  },
+});
+</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..4b2bb34
--- /dev/null
+++ b/src/views/admin/unit/equipment/EquipmentRouting.vue
@@ -0,0 +1,76 @@
+<template>
+  <MainTemplate :title="activeEquipmentObj?.name">
+    <template #headerInsert>
+      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+    </template>
+    <template #topBar>
+      <RouterLink v-if="can('update', 'unit', 'equipment')" :to="{ name: 'admin-unit-equipment-edit' }">
+        <PencilIcon class="w-5 h-5" />
+      </RouterLink>
+    </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-hidden',
+                  isActive ? 'bg-red-200 shadow-sm 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 { defineComponent } 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 { 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-inspection", title: "Prüfungen" },
+        // { route: "admin-unit-equipment-maintenance", title: "Wartungen" },
+        { route: "admin-unit-equipment-damage_report", title: "Schadensmeldungen" },
+        { route: "admin-unit-equipment-repair", title: "Reparaturen" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useEquipmentStore, ["activeEquipmentObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchEquipmentByActiveId();
+  },
+  methods: {
+    ...mapActions(useEquipmentStore, ["fetchEquipmentByActiveId"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/equipment/Inspection.vue b/src/views/admin/unit/equipment/Inspection.vue
new file mode 100644
index 0000000..e2a2b27
--- /dev/null
+++ b/src/views/admin/unit/equipment/Inspection.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full">
+    <Pagination
+      :items="inspections"
+      :totalCount="totalCount"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchInspectionForEquipment(offset, count, false)"
+    >
+      <template #pageRow="{ row }: { row: InspectionViewModel }">
+        <RouterLink
+          :to="{ name: 'admin-unit-inspection-execute', params: { inspectionId: row.id } }"
+          :disabled="!can('create', 'unit', 'inspection')"
+          class="flex flex-col h-fit w-full border border-primary rounded-md"
+        >
+          <div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
+            <PencilSquareIcon v-if="row.isOpen" class="w-5 h-5" />
+            <p>{{ row.inspectionPlan.title }} - {{ row.finishedAt ?? "in Arbeit" }}</p>
+          </div>
+          <div v-if="row.context || row.nextInspection" class="p-2">
+            <p v-if="row.context">Kontext: {{ row.context }}</p>
+            <p v-if="row.nextInspection">nächste Inspektion: {{ row.nextInspection }}</p>
+          </div>
+        </RouterLink>
+      </template>
+    </Pagination>
+    <div class="flex flex-row gap-4">
+      <RouterLink
+        :to="{ name: 'admin-unit-inspection-start', params: { type: 'equipment', relatedId: equipmentId } }"
+        :disable="!can('create', 'unit', 'inspection')"
+        button
+        primary
+        class="w-fit!"
+      >
+        Prüfung durchführen
+      </RouterLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useEquipmentInspectionStore } from "@/stores/admin/unit/equipment/inspection";
+import { PencilSquareIcon } from "@heroicons/vue/24/outline";
+import Pagination from "@/components/Pagination.vue";
+import type { InspectionViewModel } from "@/viewmodels/admin/unit/inspection/inspection.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    equipmentId: String,
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useEquipmentInspectionStore, ["inspections", "loading", "totalCount"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  methods: {
+    ...mapActions(useEquipmentInspectionStore, ["fetchInspectionForEquipment"]),
+    fetchItem() {
+      this.fetchInspectionForEquipment();
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/equipment/Overview.vue b/src/views/admin/unit/equipment/Overview.vue
new file mode 100644
index 0000000..99304e6
--- /dev/null
+++ b/src/views/admin/unit/equipment/Overview.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="activeEquipmentObj != null" class="flex flex-col gap-2 w-full">
+      <div>
+        <label for="type">Typ</label>
+        <input type="text" id="type" :value="activeEquipmentObj.equipmentType.type" readonly />
+      </div>
+      <div>
+        <label for="name">Bezeichnung</label>
+        <input type="text" id="name" :value="activeEquipmentObj.name" readonly />
+      </div>
+      <div>
+        <label for="code">Code</label>
+        <input type="text" id="code" :value="activeEquipmentObj.code" readonly />
+      </div>
+      <div>
+        <label for="location">Verortung</label>
+        <input type="text" id="location" :value="activeEquipmentObj.location" readonly />
+      </div>
+      <div>
+        <label for="commissioned">In-Betrieb-Nahme</label>
+        <input type="date" id="commissioned" :value="activeEquipmentObj.commissioned" readonly />
+      </div>
+      <div>
+        <label for="decommissioned">Außer-Betrieb-Nahme</label>
+        <input type="date" id="decommissioned" :value="activeEquipmentObj.decommissioned" readonly />
+      </div>
+    </div>
+
+    <Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
+    <p v-else-if="loadingActive == 'failed'" @click="fetchEquipmentByActiveId" class="cursor-pointer">
+      &#8634; laden fehlgeschlagen
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import Spinner from "@/components/Spinner.vue";
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    equipmentId: String,
+  },
+  computed: {
+    ...mapState(useEquipmentStore, ["activeEquipmentObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchEquipmentByActiveId();
+  },
+  methods: {
+    ...mapActions(useEquipmentStore, ["fetchEquipmentByActiveId"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/equipment/Repair.vue b/src/views/admin/unit/equipment/Repair.vue
new file mode 100644
index 0000000..2cb4485
--- /dev/null
+++ b/src/views/admin/unit/equipment/Repair.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full">
+    <Pagination
+      :items="repairs"
+      :totalCount="totalCount"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchRepairForEquipment(offset, count, search)"
+    >
+      <template #pageRow="{ row }: { row: RepairViewModel }">
+        <RouterLink
+          :to="{ name: 'admin-unit-repair-overview', params: { repairId: row.id } }"
+          :disabled="!can('create', 'unit', 'repair')"
+          class="flex flex-col h-fit w-full border border-primary rounded-md"
+        >
+          <div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
+            <PencilSquareIcon v-if="row.finishedAt == null" class="w-5 h-5" />
+            <p class="grow">{{ new Date(row.createdAt).toLocaleString("de") }} - {{ row.status }}</p>
+          </div>
+          <div class="p-2">
+            <p>Beschreibung: {{ row.description }}</p>
+          </div>
+        </RouterLink>
+      </template>
+    </Pagination>
+    <RouterLink
+      :to="{ name: 'admin-unit-repair-create', params: { type: 'equipment', relatedId: equipmentId } }"
+      :disabled="!can('create', 'unit', 'repair')"
+      button
+      primary
+      class="w-fit!"
+    >
+      Reparatur erstellen
+    </RouterLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useEquipmentRepairStore } from "@/stores/admin/unit/equipment/repair";
+import Pagination from "@/components/Pagination.vue";
+import type { RepairViewModel } from "@/viewmodels/admin/unit/repair.models";
+import { PhotoIcon, PencilSquareIcon, MapPinIcon, WrenchScrewdriverIcon, UserIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    equipmentId: String,
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useEquipmentRepairStore, ["repairs", "loading", "totalCount"]),
+  },
+  mounted() {
+    this.fetchRepairForEquipment(0, 25, "", true);
+  },
+  methods: {
+    ...mapActions(useEquipmentRepairStore, ["fetchRepairForEquipment"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/equipment/UpdateEquipment.vue b/src/views/admin/unit/equipment/UpdateEquipment.vue
new file mode 100644
index 0000000..17eff62
--- /dev/null
+++ b/src/views/admin/unit/equipment/UpdateEquipment.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <Spinner v-if="loading == 'loading'" class="mx-auto" />
+    <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
+    <form
+      v-else-if="equipment != null"
+      class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
+      @submit.prevent="triggerUpdate"
+    >
+      <p class="mx-auto">Ausrüstung bearbeiten</p>
+      <div>
+        <label for="name">Bezeichnung</label>
+        <input type="text" id="name" required v-model="equipment.name" />
+      </div>
+      <ScanInput name="code" label="Code" :required="false" v-model="equipment.code" />
+      <div>
+        <label for="location">Verortung (optional)</label>
+        <input type="text" id="location" v-model="equipment.location" />
+      </div>
+      <div>
+        <label for="commissioned">In-Betrieb-Nahme</label>
+        <input type="date" id="commissioned" required v-model="equipment.commissioned" />
+      </div>
+      <div>
+        <label for="decommissioned">Außer-Betrieb-Nahme (optional)</label>
+        <input type="date" id="decommissioned" v-model="equipment.decommissioned" />
+      </div>
+      <div class="flex flex-row justify-end gap-2">
+        <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
+          abbrechen
+        </button>
+        <button primary type="submit" class="w-fit!" :disabled="status == 'loading'">speichern</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+import type {
+  CreateEquipmentViewModel,
+  EquipmentViewModel,
+  UpdateEquipmentViewModel,
+} from "@/viewmodels/admin/unit/equipment/equipment.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import ScanInput from "@/components/scanner/ScanInput.vue";
+import isEqual from "lodash.isequal";
+import cloneDeep from "lodash.clonedeep";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    equipmentId: String,
+  },
+  watch: {
+    loadingActive() {
+      if (this.loading == "loading") {
+        this.loading = this.loadingActive;
+      }
+      if (this.loadingActive == "fetched") this.equipment = cloneDeep(this.activeEquipmentObj);
+    },
+  },
+  data() {
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      equipment: null as null | EquipmentViewModel,
+      timeout: null as any,
+    };
+  },
+  computed: {
+    canSaveOrReset(): boolean {
+      return isEqual(this.activeEquipmentObj, this.equipment);
+    },
+    ...mapState(useEquipmentStore, ["activeEquipmentObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useEquipmentStore, ["updateActiveEquipment", "fetchEquipmentByActiveId"]),
+    resetForm() {
+      this.equipment = cloneDeep(this.activeEquipmentObj);
+    },
+    fetchItem() {
+      this.fetchEquipmentByActiveId();
+    },
+    triggerUpdate(e: any) {
+      if (this.equipment == null) return;
+      let formData = e.target.elements;
+      let updateEquipment: UpdateEquipmentViewModel = {
+        id: this.equipment.id,
+        code: formData.code.value || null,
+        name: formData.name.value,
+        location: formData.location.value,
+        commissioned: formData.commissioned.value,
+        decommissioned: formData.decommissioned.value ?? null,
+      };
+      this.status = "loading";
+      this.updateActiveEquipment(updateEquipment)
+        .then((res) => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/equipmentType/EquipmentType.vue b/src/views/admin/unit/equipmentType/EquipmentType.vue
new file mode 100644
index 0000000..f7f3d6b
--- /dev/null
+++ b/src/views/admin/unit/equipmentType/EquipmentType.vue
@@ -0,0 +1,67 @@
+<template>
+  <MainTemplate title="Geräte-Typen">
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+        <Pagination
+          :items="equipmentTypes"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          useSearch
+          @load-data="(offset, count, search) => fetchEquipmentTypes(offset, count, search)"
+          @search="(search) => fetchEquipmentTypes(0, maxEntriesPerPage, search, true)"
+        >
+          <template #pageRow="{ row }: { row: EquipmentTypeViewModel }">
+            <EquipmentTypeListItem :equipmentType="row" />
+          </template>
+        </Pagination>
+
+        <div class="flex flex-row gap-4">
+          <button v-if="can('create', 'unit', 'equipment_type')" primary class="w-fit!" @click="openCreateModal">
+            Geräte-Typ erstellen
+          </button>
+        </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 { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
+import { useModalStore } from "@/stores/modal";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import type { EquipmentTypeViewModel } from "@/viewmodels/admin/unit/equipment/equipmentType.models";
+import EquipmentTypeListItem from "@/components/admin/unit/equipmentType/EquipmentTypeListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useEquipmentTypeStore, ["equipmentTypes", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchEquipmentTypes(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useEquipmentTypeStore, ["fetchEquipmentTypes"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openCreateModal() {
+      this.openModal(
+        markRaw(
+          defineAsyncComponent(() => import("@/components/admin/unit/equipmentType/CreateEquipmentTypeModal.vue"))
+        )
+      );
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/equipmentType/EquipmentTypeRouting.vue b/src/views/admin/unit/equipmentType/EquipmentTypeRouting.vue
new file mode 100644
index 0000000..6a6aed1
--- /dev/null
+++ b/src/views/admin/unit/equipmentType/EquipmentTypeRouting.vue
@@ -0,0 +1,90 @@
+<template>
+  <MainTemplate :title="activeEquipmentTypeObj?.type">
+    <template #headerInsert>
+      <RouterLink :to="{ name: 'admin-unit-equipment_type' }" class="text-primary">zurück zur Liste</RouterLink>
+    </template>
+    <template #topBar>
+      <div class="flex flex-row gap-2">
+        <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') && activeEquipmentTypeObj?.equipmentCount == 0"
+          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-hidden',
+                  isActive ? 'bg-red-200 shadow-sm 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-inspection_plan", title: "Prüfpläne" },
+      ],
+    };
+  },
+  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/unit/equipmentType/DeleteEquipmentTypeModal.vue"))
+        ),
+        this.equipmentTypeId ?? ""
+      );
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/equipmentType/InspectionPlans.vue b/src/views/admin/unit/equipmentType/InspectionPlans.vue
new file mode 100644
index 0000000..5acfba9
--- /dev/null
+++ b/src/views/admin/unit/equipmentType/InspectionPlans.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="inspectionPlans != null" class="flex flex-col gap-2 w-full">
+      <TypeInspectionPlanListItem v-for="plan in inspectionPlans" :inspection-plan="plan" />
+    </div>
+    <Spinner v-if="loading == 'loading'" class="mx-auto" />
+    <p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">&#8634; laden fehlgeschlagen</p>
+  </div>
+  <div class="flex flex-row gap-4">
+    <RouterLink
+      :to="{ name: 'admin-unit-inspection_plan-create', query: { type: 'equipment', id: equipmentTypeId } }"
+      :disabled="!can('create', 'unit', 'inspection_plan')"
+      button
+      primary
+      class="w-fit!"
+    >
+      Prüfplan erstellen
+    </RouterLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useEquipmentTypeInspectionPlanStore } from "@/stores/admin/unit/equipmentType/inspectionPlan";
+import Spinner from "@/components/Spinner.vue";
+import TypeInspectionPlanListItem from "@/components/admin/unit/inspectionPlan/TypeInspectionPlanListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    equipmentTypeId: String,
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useEquipmentTypeInspectionPlanStore, ["inspectionPlans", "loading"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  methods: {
+    ...mapActions(useEquipmentTypeInspectionPlanStore, ["fetchInspectionPlanForEquipmentType"]),
+    fetchItem() {
+      this.fetchInspectionPlanForEquipmentType();
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/equipmentType/Overview.vue b/src/views/admin/unit/equipmentType/Overview.vue
new file mode 100644
index 0000000..76418a1
--- /dev/null
+++ b/src/views/admin/unit/equipmentType/Overview.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="activeEquipmentTypeObj != null" class="flex flex-col gap-2 w-full">
+      <div>
+        <label for="type">Typ</label>
+        <input type="text" id="type" :value="activeEquipmentTypeObj.type" readonly />
+      </div>
+      <div>
+        <label for="description">Beschreibung</label>
+        <textarea id="description" :value="activeEquipmentTypeObj.description" class="h-18" readonly></textarea>
+      </div>
+    </div>
+
+    <Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
+    <p v-else-if="loadingActive == 'failed'" @click="fetchEquipmentTypeByActiveId" class="cursor-pointer">
+      &#8634; laden fehlgeschlagen
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import Spinner from "@/components/Spinner.vue";
+import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    equipmentTypeId: String,
+  },
+  computed: {
+    ...mapState(useEquipmentTypeStore, ["activeEquipmentTypeObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchEquipmentTypeByActiveId();
+  },
+  methods: {
+    ...mapActions(useEquipmentTypeStore, ["fetchEquipmentTypeByActiveId"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/equipmentType/UpdateEquipmentType.vue b/src/views/admin/unit/equipmentType/UpdateEquipmentType.vue
new file mode 100644
index 0000000..997e0be
--- /dev/null
+++ b/src/views/admin/unit/equipmentType/UpdateEquipmentType.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <Spinner v-if="loading == 'loading'" class="mx-auto" />
+    <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
+    <form
+      v-else-if="equipmentType != null"
+      class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
+      @submit.prevent="triggerUpdate"
+    >
+      <p class="mx-auto">Geräte-Typ bearbeiten</p>
+      <div>
+        <label for="type">Typ</label>
+        <input type="text" id="type" required v-model="equipmentType.type" />
+      </div>
+      <div>
+        <label for="description">Beschreibung</label>
+        <input type="text" id="description" v-model="equipmentType.description" />
+      </div>
+      <div class="flex flex-row justify-end gap-2">
+        <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
+          abbrechen
+        </button>
+        <button primary type="submit" class="w-fit!" :disabled="status == 'loading'">speichern</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
+import type {
+  CreateEquipmentTypeViewModel,
+  EquipmentTypeViewModel,
+  UpdateEquipmentTypeViewModel,
+} from "@/viewmodels/admin/unit/equipment/equipmentType.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import isEqual from "lodash.isequal";
+import cloneDeep from "lodash.clonedeep";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    equipmentTypeId: String,
+  },
+  watch: {
+    loadingActive() {
+      if (this.loading == "loading") {
+        this.loading = this.loadingActive;
+      }
+      if (this.loadingActive == "fetched") this.equipmentType = cloneDeep(this.activeEquipmentTypeObj);
+    },
+  },
+  data() {
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      equipmentType: null as null | EquipmentTypeViewModel,
+      timeout: null as any,
+    };
+  },
+  computed: {
+    canSaveOrReset(): boolean {
+      return isEqual(this.activeEquipmentTypeObj, this.equipmentType);
+    },
+    ...mapState(useEquipmentTypeStore, ["activeEquipmentTypeObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useEquipmentTypeStore, ["updateActiveEquipmentType", "fetchEquipmentTypeByActiveId"]),
+    resetForm() {
+      this.equipmentType = cloneDeep(this.activeEquipmentTypeObj);
+    },
+    fetchItem() {
+      this.fetchEquipmentTypeByActiveId();
+    },
+    triggerUpdate(e: any) {
+      if (this.equipmentType == null) return;
+      let formData = e.target.elements;
+      let updateEquipmentType: UpdateEquipmentTypeViewModel = {
+        id: this.equipmentType.id,
+        type: formData.type.value,
+        description: formData.description.value,
+      };
+      this.status = "loading";
+      this.updateActiveEquipmentType(updateEquipmentType)
+        .then((res) => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/inspection/InspectionExecute.vue b/src/views/admin/unit/inspection/InspectionExecute.vue
new file mode 100644
index 0000000..0a1e886
--- /dev/null
+++ b/src/views/admin/unit/inspection/InspectionExecute.vue
@@ -0,0 +1,243 @@
+<template>
+  <MainTemplate>
+    <template #topBar>
+      <h1 class="font-bold text-xl min-h-8">
+        Prüfung durchführen: {{ activeInspectionObj?.related.name }}
+        <small v-if="activeInspectionObj?.related.code">({{ activeInspectionObj?.related.code }})</small> -
+        {{ activeInspectionObj?.inspectionPlan.title }}
+      </h1>
+      <div class="flex flex-row gap-2">
+        <TrashIcon
+          v-if="activeInspectionObj?.isOpen && can('delete', 'unit', 'inspection')"
+          class="w-5 h-5 cursor-pointer"
+          @click="openDeleteModal"
+        />
+      </div>
+    </template>
+    <template #main>
+      <Spinner v-if="loading == 'loading'" class="mx-auto" />
+      <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
+      <div
+        v-else-if="activeInspectionObj != null"
+        class="flex flex-col gap-4 py-2 grow w-full max-w-xl mx-auto overflow-hidden"
+      >
+        <div>
+          <p>Kontext:</p>
+          <textarea readonly :value="activeInspectionObj.context || '---'" class="h-18"></textarea>
+        </div>
+
+        <div class="flex flex-col gap-2 grow overflow-y-scroll">
+          <div v-for="point in points" :key="point.title" class="contents">
+            <OkNotOk
+              v-if="point.type == InspectionPointEnum.oknok"
+              :inspectionPoint="point"
+              :editable="activeInspectionObj.isOpen && can('update', 'unit', 'inspection')"
+              :modelValue="boolPointResult(point.id)"
+              @update:model-value="(val) => updateCheckResult(point.id, val)"
+            />
+            <NumberInput
+              v-else-if="point.type == InspectionPointEnum.number"
+              :inspectionPoint="point"
+              :editable="activeInspectionObj.isOpen && can('update', 'unit', 'inspection')"
+              :modelValue="pointResult(point.id)"
+              @update:model-value="(val) => updateCheckResult(point.id, val)"
+            />
+            <TextInput
+              v-else-if="point.type == InspectionPointEnum.text"
+              :inspectionPoint="point"
+              :editable="activeInspectionObj.isOpen && can('update', 'unit', 'inspection')"
+              :modelValue="pointResult(point.id)"
+              @update:model-value="(val) => updateCheckResult(point.id, val)"
+            />
+            <FileInput
+              v-else-if="point.type == InspectionPointEnum.file"
+              :inspectionPoint="point"
+              :editable="activeInspectionObj.isOpen && can('update', 'unit', 'inspection')"
+              :modelValue="pointResult(point.id)"
+              @update:model-value="(val) => updateCheckResult(point.id, val)"
+              @update:upload="(val) => (fileStore[point.id] = val)"
+            />
+          </div>
+        </div>
+        <div
+          v-if="activeInspectionObj.isOpen && can('update', 'unit', 'inspection')"
+          class="flex flex-row justify-end flex-wrap min-h-fit gap-2"
+        >
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
+            verwerfen
+          </button>
+          <button
+            primary
+            type="submit"
+            class="w-fit!"
+            :disabled="status == 'loading' || canSaveOrReset"
+            @click="triggerUpdate"
+          >
+            zwischenspeichern
+          </button>
+          <button
+            primary
+            type="button"
+            class="w-fit!"
+            :disabled="status == 'loading' || !canSaveOrReset || !isEverythingFilled"
+            @click.prevent="finishInspection"
+          >
+            abschließen
+          </button>
+          <Spinner v-if="status == 'loading'" class="my-auto" />
+          <SuccessCheckmark v-else-if="status?.status == 'success'" />
+          <FailureXMark v-else-if="status?.status == 'failed'" />
+        </div>
+        <div v-else-if="!activeInspectionObj.isOpen">
+          <button primary type="button" @click="openPrintModal">Bericht anzeigen</button>
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useInspectionStore } from "@/stores/admin/unit/inspection/inspection";
+import OkNotOk from "@/components/admin/unit/inspection/OkNotOk.vue";
+import type { InspectionPointResultViewModel } from "@/viewmodels/admin/unit/inspection/inspection.models";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isequal";
+import { InspectionPointEnum } from "@/enums/inspectionEnum";
+import { useModalStore } from "@/stores/modal";
+import NumberInput from "@/components/admin/unit/inspection/NumberInput.vue";
+import TextInput from "@/components/admin/unit/inspection/TextInput.vue";
+import FileInput from "@/components/admin/unit/inspection/FileInput.vue";
+import { useAbilityStore } from "@/stores/ability";
+import { DocumentTextIcon, TrashIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    inspectionId: String,
+  },
+  watch: {
+    loadingActive() {
+      if (this.loading == "loading") {
+        this.loading = this.loadingActive;
+      }
+      if (this.loadingActive == "fetched") {
+        this.checks = cloneDeep(this.activeInspectionObj?.checks ?? []);
+      }
+    },
+  },
+  data() {
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: null as any,
+      checks: [] as Array<InspectionPointResultViewModel>,
+      fileStore: {} as { [key: string]: File | null },
+    };
+  },
+  computed: {
+    canSaveOrReset(): boolean {
+      return isEqual(
+        (this.activeInspectionObj?.checks || []).sort((a, b) => a.inspectionPointId.localeCompare(b.inspectionPointId)),
+        this.checks.sort((a, b) => a.inspectionPointId.localeCompare(b.inspectionPointId))
+      );
+    },
+    ...mapState(useInspectionStore, ["activeInspectionObj", "loadingActive"]),
+    ...mapState(useAbilityStore, ["can"]),
+    points() {
+      return (this.activeInspectionObj?.inspectionVersionedPlan.inspectionPoints ?? [])
+        .slice()
+        .sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0));
+    },
+    pointResult() {
+      return (pointId: string) => {
+        return this.checks.find((c) => c.inspectionPointId == pointId)?.value ?? "";
+      };
+    },
+    boolPointResult() {
+      return (pointId: string): "true" | "false" | "" => {
+        let value = this.pointResult(pointId);
+        return ["true", "false"].includes(value) ? (value as "true" | "false") : "";
+      };
+    },
+    isEverythingFilled() {
+      return this.points.every((p) => {
+        if (p.type == InspectionPointEnum.file) {
+          return this.pointResult(p.id) == "set" ? !!this.fileStore[p.id] : !!this.pointResult(p.id);
+        } else if (p.type == InspectionPointEnum.oknok) {
+          return this.boolPointResult(p.id) != "";
+        } else {
+          return !!this.pointResult(p.id);
+        }
+      });
+    },
+  },
+  mounted() {
+    this.fetchInspectionByActiveId();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useInspectionStore, ["fetchInspectionByActiveId", "updateActiveInspectionResults"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openDeleteModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/unit/inspection/DeleteInspectionModal.vue"))),
+        parseInt(this.inspectionId ?? "")
+      );
+    },
+    openPrintModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/unit/inspection/InspectionPrintModal.vue")))
+      );
+    },
+    finishInspection() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/unit/inspection/InspectionFinishModal.vue")))
+      );
+    },
+    resetForm() {
+      this.checks = cloneDeep(this.activeInspectionObj?.checks ?? []);
+    },
+    updateCheckResult(id: string, value: string) {
+      if (this.activeInspectionObj == null) return;
+
+      let index = this.checks.findIndex((c) => c.inspectionPointId == id);
+      if (index == -1) {
+        this.checks.push({
+          inspectionId: this.activeInspectionObj.id,
+          inspectionPointId: id,
+          value: value,
+        });
+      } else {
+        this.checks[index].value = value;
+      }
+    },
+    triggerUpdate(e: any) {
+      if (this.activeInspectionObj == null) return;
+      this.status = "loading";
+      this.updateActiveInspectionResults(this.checks, this.fileStore)
+        .then(() => {
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/inspection/InspectionRouting.vue b/src/views/admin/unit/inspection/InspectionRouting.vue
new file mode 100644
index 0000000..6307df1
--- /dev/null
+++ b/src/views/admin/unit/inspection/InspectionRouting.vue
@@ -0,0 +1,54 @@
+<template>
+  <MainTemplate title="Prüfungen">
+    <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="{ isExactActive }"
+              :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-hidden',
+                  isExactActive ? 'bg-red-200 shadow-sm 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 { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { RouterLink, RouterView } from "vue-router";
+import { useAbilityStore } from "@/stores/ability";
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      tabs: [
+        { route: "admin-unit-inspection", title: "anstehend" },
+        { route: "admin-unit-inspection-running", title: "in Arbeit" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/inspection/InspectionStart.vue b/src/views/admin/unit/inspection/InspectionStart.vue
new file mode 100644
index 0000000..88e49c9
--- /dev/null
+++ b/src/views/admin/unit/inspection/InspectionStart.vue
@@ -0,0 +1,228 @@
+<template>
+  <MainTemplate title="Prüfung starten">
+    <template #main>
+      <form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="createNewInspection">
+        <div class="flex flex-row">
+          <div
+            v-for="tab in tabs"
+            :key="tab.key"
+            class="w-1/2 p-0.5 first:pl-0 last:pr-0 cursor-pointer"
+            @click="
+              active = tab.key;
+              related = '';
+              inspectionPlan = '';
+            "
+          >
+            <p
+              :class="[
+                'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
+                tab.key == active
+                  ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none'
+                  : ' hover:bg-red-200',
+              ]"
+            >
+              {{ tab.title }}
+            </p>
+          </div>
+        </div>
+
+        <EquipmentSearchSelect v-if="active == 'equipment'" title="Gerät" useScanner v-model="related" />
+        <VehicleSearchSelect v-else-if="active == 'vehicle'" title="Fahrzeug" useScanner v-model="related" />
+        <WearableSearchSelect v-else title="Kleidung" useScanner v-model="related" />
+
+        <InspectionPlanSearchSelectWithRelated
+          title="Prüfplan"
+          :relatedType="`${active}Type`"
+          :relatedTypeId="relatedType"
+          v-model="inspectionPlan"
+        />
+
+        <div v-if="selectedInspectionPlan?.inspectionPoints.length == 0">
+          Dieser Prüfplan ist noch nicht fertig gestellt!
+        </div>
+
+        <div>
+          <label for="nextInspection" class="flex flex-row gap-2 justify-between">
+            Nächste Prüfung
+            <span v-if="selectedInspectionPlan?.inspectionInterval">
+              - Intervall: {{ selectedInspectionPlan.inspectionInterval }}
+            </span>
+            <span v-else> (optional) </span>
+            <div class="grow"></div>
+            <InspectionTimeFormatExplainIcon />
+          </label>
+          <input id="nextInspection" type="date" :required="selectedInspectionPlan?.inspectionInterval != undefined" />
+        </div>
+
+        <div>
+          <label for="context"> Kontext </label>
+          <textarea id="context" class="h-24"></textarea>
+        </div>
+
+        <div class="flex flex-row justify-end gap-2">
+          <RouterLink
+            :to="{ name: 'admin-unit-inspection' }"
+            primary-outline
+            button
+            class="w-fit!"
+            :disabled="status == 'loading' || status?.status == 'success'"
+          >
+            abbrechen
+          </RouterLink>
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading'">starten</button>
+          <Spinner v-if="status == 'loading'" class="my-auto" />
+          <SuccessCheckmark v-else-if="status?.status == 'success'" />
+          <FailureXMark v-else-if="status?.status == 'failed'" />
+        </div>
+      </form>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import EquipmentSearchSelect from "@/components/search/EquipmentSearchSelect.vue";
+import VehicleSearchSelect from "@/components/search/VehicleSearchSelect.vue";
+import WearableSearchSelect from "@/components/search/WearableSearchSelect.vue";
+import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
+import InspectionPlanSearchSelectWithRelated from "@/components/search/InspectionPlanSearchSelectWithRelated.vue";
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+import { useVehicleStore } from "@/stores/admin/unit/vehicle/vehicle";
+import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
+import type { CreateInspectionViewModel } from "@/viewmodels/admin/unit/inspection/inspection.models";
+import { useInspectionStore } from "@/stores/admin/unit/inspection/inspection";
+import InspectionTimeFormatExplainIcon from "@/components/admin/unit/InspectionTimeFormatExplainIcon.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    type: {
+      type: String as PropType<"vehicle" | "equipment" | "wearable">,
+      default: "equipment",
+    },
+    relatedId: String,
+    inspectionPlanId: String,
+  },
+  watch: {
+    inspectionPlan() {
+      this.selectedInspectionPlan = undefined;
+      if (this.inspectionPlan != "") this.getInspectionPlanData();
+    },
+    related() {
+      this.getTypeIdToRelated();
+    },
+  },
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: null as any,
+      related: "",
+      relatedType: "",
+      inspectionPlan: "",
+      active: "equipment" as "equipment" | "vehicle" | "wearable",
+      tabs: [
+        {
+          key: "equipment",
+          title: "Gerät",
+        },
+        {
+          key: "vehicle",
+          title: "Fahrzeug",
+        },
+        {
+          key: "wearable",
+          title: "Kleidung",
+        },
+      ] as Array<{ key: "equipment" | "vehicle" | "wearable"; title: string }>,
+      selectedInspectionPlan: undefined as undefined | InspectionPlanViewModel,
+    };
+  },
+  mounted() {
+    if (["vehicle", "equipment", "wearable"].includes(this.type)) {
+      this.active = this.type;
+      this.inspectionPlan = this.inspectionPlanId ?? "";
+      this.related = this.relatedId ?? "";
+    }
+  },
+  methods: {
+    ...mapActions(useInspectionStore, ["createInspection"]),
+    ...mapActions(useInspectionPlanStore, ["fetchInspectionPlanById"]),
+    ...mapActions(useEquipmentStore, ["fetchEquipmentById"]),
+    ...mapActions(useVehicleStore, ["fetchVehicleById"]),
+    ...mapActions(useWearableStore, ["fetchWearableById"]),
+    getInspectionPlanData() {
+      this.fetchInspectionPlanById(this.inspectionPlan)
+        .then((res) => {
+          this.selectedInspectionPlan = res.data;
+        })
+        .catch((err) => {});
+    },
+    getTypeIdToRelated() {
+      if (this.related == "") {
+        this.relatedType = "";
+        return;
+      }
+      if (this.active == "equipment") {
+        this.fetchEquipmentById(this.related)
+          .then((res) => {
+            this.relatedType = res.data.equipmentTypeId;
+          })
+          .catch(() => {
+            this.relatedType = "";
+          });
+      } else if (this.active == "vehicle") {
+        this.fetchVehicleById(this.related)
+          .then((res) => {
+            this.relatedType = res.data.vehicleTypeId;
+          })
+          .catch(() => {
+            this.relatedType = "";
+          });
+      } else if (this.active == "wearable") {
+        this.fetchWearableById(this.related)
+          .then((res) => {
+            this.relatedType = res.data.wearableTypeId;
+          })
+          .catch(() => {
+            this.relatedType = "";
+          });
+      }
+    },
+    createNewInspection(e: any) {
+      if (this.related == "" || this.inspectionPlan == "") return;
+      let formData = e.target.elements;
+      let createInspection: CreateInspectionViewModel = {
+        assigned: this.active,
+        relatedId: this.related,
+        inspectionPlanId: this.inspectionPlan,
+        nextInspection: formData.nextInspection.value,
+        context: formData.context.value,
+      };
+      this.status = "loading";
+      this.createInspection(createInspection)
+        .then((res) => {
+          this.status = { status: "success" };
+
+          this.timeout = setTimeout(() => {
+            this.$router.push({
+              name: "admin-unit-inspection-execute",
+              params: {
+                inspectionId: res.data,
+              },
+            });
+          }, 1500);
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/inspection/NextInspections.vue b/src/views/admin/unit/inspection/NextInspections.vue
new file mode 100644
index 0000000..76ee7ec
--- /dev/null
+++ b/src/views/admin/unit/inspection/NextInspections.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="flex flex-col w-full h-full gap-2 justify-center">
+    <Pagination
+      :items="nextInspections"
+      :totalCount="nextTotalCount"
+      :indicateLoading="nextLoading == 'loading'"
+      @load-data="(offset, count, search) => fetchNextInspections(offset, count, search)"
+    >
+      <template #pageRow="{ row }: { row: InspectionNextViewModel }">
+        <RouterLink
+          :to="{
+            name: 'admin-unit-inspection-start',
+            params: { type: row.assigned, relatedId: row.relatedId, inspectionPlanId: row.inspectionPlanId },
+          }"
+          class="flex flex-col h-fit w-full border border-primary rounded-md"
+        >
+          <div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
+            <p>
+              {{ row.related.name }} <small v-if="row.related.code">({{ row.related.code }})</small> -
+              {{ row.inspectionPlan.title }} - {{ row.dueDate ?? "ohne Fälligkeit" }}
+            </p>
+          </div>
+        </RouterLink>
+      </template>
+    </Pagination>
+
+    <div class="flex flex-row gap-4">
+      <RouterLink
+        v-if="can('create', 'unit', 'inspection')"
+        :to="{ name: 'admin-unit-inspection-start' }"
+        primary
+        button
+        class="w-fit!"
+      >
+        Prüfung starten
+      </RouterLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import { useInspectionStore } from "@/stores/admin/unit/inspection/inspection";
+import type { InspectionNextViewModel } from "@/viewmodels/admin/unit/inspection/inspection.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useInspectionStore, ["nextInspections", "nextTotalCount", "nextLoading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchNextInspections(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useInspectionStore, ["fetchNextInspections"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/inspection/RunningInspections.vue b/src/views/admin/unit/inspection/RunningInspections.vue
new file mode 100644
index 0000000..225a30e
--- /dev/null
+++ b/src/views/admin/unit/inspection/RunningInspections.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="flex flex-col w-full h-full gap-2 justify-center">
+    <Pagination
+      :items="inspections"
+      :totalCount="totalCount"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchRunningInspections(offset, count, search)"
+    >
+      <template #pageRow="{ row }: { row: MinifiedInspectionViewModel }">
+        <RouterLink
+          :to="{ name: 'admin-unit-inspection-execute', params: { inspectionId: row.id } }"
+          class="flex flex-col h-fit w-full border border-primary rounded-md"
+        >
+          <div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
+            <PencilSquareIcon v-if="row.isOpen" class="w-5 h-5" />
+            <p>{{ row.inspectionPlan.title }} - in Arbeit seit {{ row.created }}</p>
+          </div>
+          <div v-if="row.context" class="p-2">
+            <p v-if="row.context">Kontext: {{ row.context }}</p>
+          </div>
+        </RouterLink>
+      </template>
+    </Pagination>
+
+    <div class="flex flex-row gap-4">
+      <RouterLink
+        v-if="can('create', 'unit', 'inspection')"
+        :to="{ name: 'admin-unit-inspection-start' }"
+        primary
+        button
+        class="w-fit!"
+      >
+        Prüfung starten
+      </RouterLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import type { MinifiedInspectionViewModel } from "@/viewmodels/admin/unit/inspection/inspection.models";
+import { useInspectionStore } from "@/stores/admin/unit/inspection/inspection";
+import { PencilSquareIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useInspectionStore, ["inspections", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchRunningInspections(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useInspectionStore, ["fetchRunningInspections"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/inspectionPlan/CreateInspectionPlan.vue b/src/views/admin/unit/inspectionPlan/CreateInspectionPlan.vue
new file mode 100644
index 0000000..5170235
--- /dev/null
+++ b/src/views/admin/unit/inspectionPlan/CreateInspectionPlan.vue
@@ -0,0 +1,174 @@
+<template>
+  <MainTemplate title="Prüfplan erstellen">
+    <template #diffMain>
+      <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+        <form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerCreate">
+          <div class="flex flex-row">
+            <div
+              v-for="tab in tabs"
+              :key="tab.key"
+              class="w-1/2 p-0.5 first:pl-0 last:pr-0"
+              @click="
+                active = tab.key;
+                selectedType = '';
+              "
+            >
+              <p
+                :class="[
+                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
+                  tab.key == active
+                    ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none'
+                    : ' hover:bg-red-200',
+                ]"
+              >
+                {{ tab.title }}
+              </p>
+            </div>
+          </div>
+
+          <EquipmentTypeSearchSelect v-if="active == 'equipment'" title="Typ" v-model="selectedType" />
+          <VehicleTypeSearchSelect v-else-if="active == 'vehicle'" title="Typ" v-model="selectedType" />
+          <WearableTypeSearchSelect v-else title="Typ" v-model="selectedType" />
+
+          <div>
+            <label for="name">Bezeichnung</label>
+            <input type="text" id="name" required />
+          </div>
+          <div>
+            <label for="interval" class="flex flex-row justify-between">
+              Prüfintervall (optional)
+              <InspectionTimeFormatExplainIcon />
+            </label>
+            <input
+              type="text"
+              id="interval"
+              placeholder="<zahl>-(d|m|y) oder DD/MM oder DD/*"
+              pattern="^\d+-(d|m|y)$|^\d{2}/\d{2}$|^\d{2}/\*$"
+              title="Eingabe muss im Format <zahl>-(d|m|y), DD/MM oder DD/* sein"
+            />
+          </div>
+          <div>
+            <label for="remind" class="flex flex-row justify-between">
+              Erinnerung vor Fälligkeit (optional)
+              <InspectionTimeFormatExplainIcon />
+            </label>
+            <input
+              type="text"
+              id="remind"
+              placeholder="<zahl>-(d|m|y) oder DD/MM oder DD/*"
+              pattern="^\d+-(d|m|y)$|^\d{2}/\d{2}$|^\d{2}/\*$"
+              title="Eingabe muss im Format <zahl>-(d|m|y), DD/MM oder DD/* sein"
+            />
+          </div>
+          <div class="flex flex-row justify-end gap-2">
+            <RouterLink
+              :to="{ name: 'admin-unit-inspection_plan' }"
+              primary-outline
+              button
+              class="w-fit!"
+              :disabled="status == 'loading' || status?.status == 'success'"
+            >
+              abbrechen
+            </RouterLink>
+            <button primary type="submit" class="w-fit!" :disabled="status == 'loading'">speichern</button>
+            <Spinner v-if="status == 'loading'" class="my-auto" />
+            <SuccessCheckmark v-else-if="status?.status == 'success'" />
+            <FailureXMark v-else-if="status?.status == 'failed'" />
+          </div>
+        </form>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
+import type { CreateInspectionPlanViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
+import EquipmentTypeSearchSelect from "@/components/search/EquipmentTypeSearchSelect.vue";
+import VehicleTypeSearchSelect from "@/components/search/VehicleTypeSearchSelect.vue";
+import InspectionTimeFormatExplainIcon from "@/components/admin/unit/InspectionTimeFormatExplainIcon.vue";
+import WearableTypeSearchSelect from "@/components/search/WearableTypeSearchSelect.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: null as any,
+      selectedType: "" as string,
+      active: "equipment" as "equipment" | "vehicle" | "wearable",
+      tabs: [
+        {
+          key: "equipment",
+          title: "Gerät",
+        },
+        {
+          key: "vehicle",
+          title: "Fahrzeug",
+        },
+        {
+          key: "wearable",
+          title: "Kleidung",
+        },
+      ] as Array<{ key: "equipment" | "vehicle" | "wearable"; title: string }>,
+    };
+  },
+  computed: {
+    ...mapState(useInspectionPlanStore, ["inspectionPlans"]),
+  },
+  mounted() {
+    let query = this.$route.query;
+    const queryType = Array.isArray(query.type) ? query.type[0] : query.type;
+    const queryId = Array.isArray(query.id) ? query.id[0] : query.id;
+    if (["vehicle", "equipment", "wearable"].includes(queryType ?? "")) {
+      this.active = queryType as "equipment" | "vehicle" | "wearable";
+      this.selectedType = queryId as string;
+    }
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useInspectionPlanStore, ["createInspectionPlan"]),
+    ...mapActions(useEquipmentTypeStore, ["searchEquipmentTypes"]),
+    triggerCreate(e: any) {
+      if (this.selectedType == null) return;
+      let formData = e.target.elements;
+      let createInspectionPlan: CreateInspectionPlanViewModel = {
+        title: formData.name.value,
+        inspectionInterval: formData.interval.value,
+        remindTime: formData.remind.value,
+        relatedId: this.selectedType,
+        assigned: this.active,
+      };
+      this.status = "loading";
+      this.createInspectionPlan(createInspectionPlan)
+        .then((res) => {
+          this.status = { status: "success" };
+
+          this.timeout = setTimeout(() => {
+            this.$router.push({
+              name: "admin-unit-inspection_plan-overview",
+              params: {
+                inspectionPlanId: res.data,
+              },
+            });
+          }, 1500);
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/inspectionPlan/InspectionPlan.vue b/src/views/admin/unit/inspectionPlan/InspectionPlan.vue
new file mode 100644
index 0000000..fe91823
--- /dev/null
+++ b/src/views/admin/unit/inspectionPlan/InspectionPlan.vue
@@ -0,0 +1,65 @@
+<template>
+  <MainTemplate title="Prüfpläne">
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+        <Pagination
+          :items="inspectionPlans"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          useSearch
+          :useScanner="false"
+          @load-data="(offset, count, search) => fetchInspectionPlans(offset, count, search)"
+          @search="(search) => fetchInspectionPlans(0, maxEntriesPerPage, search, true)"
+        >
+          <template #pageRow="{ row }: { row: InspectionPlanViewModel }">
+            <InspectionPlanListItem :inspectionPlan="row" />
+          </template>
+        </Pagination>
+
+        <div class="flex flex-row gap-4">
+          <RouterLink
+            :to="{ name: 'admin-unit-inspection_plan-create' }"
+            :disabled="!can('create', 'unit', 'inspection_plan')"
+            primary
+            button
+            class="w-fit!"
+          >
+            Prüfplan erstellen
+          </RouterLink>
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+import InspectionPlanListItem from "@/components/admin/unit/inspectionPlan/InspectionPlanListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useInspectionPlanStore, ["inspectionPlans", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchInspectionPlans(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useInspectionPlanStore, ["fetchInspectionPlans"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/inspectionPlan/InspectionPlanRouting.vue b/src/views/admin/unit/inspectionPlan/InspectionPlanRouting.vue
new file mode 100644
index 0000000..a0299ab
--- /dev/null
+++ b/src/views/admin/unit/inspectionPlan/InspectionPlanRouting.vue
@@ -0,0 +1,58 @@
+<template>
+  <MainTemplate :title="activeInspectionPlanObj?.title">
+    <template #headerInsert>
+      <RouterLink to="./" class="text-primary">zurück zur Liste</RouterLink>
+    </template>
+    <template #topBar>
+      <div class="flex flex-row gap-2">
+        <RouterLink v-if="can('update', 'unit', 'inspection_plan')" :to="{ name: 'admin-unit-inspection_plan-edit' }">
+          <PencilIcon class="w-5 h-5" />
+        </RouterLink>
+        <RouterLink
+          v-if="can('update', 'unit', 'inspection_plan')"
+          :to="{ name: 'admin-unit-inspection_plan-pointedit' }"
+        >
+          <RectangleStackIcon class="w-5 h-5" />
+        </RouterLink>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
+        <RouterView />
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { RouterLink, RouterView } from "vue-router";
+import { PencilIcon, RectangleStackIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { useAbilityStore } from "@/stores/ability";
+import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    inspectionPlanId: String,
+  },
+  data() {
+    return {
+      tabs: [{ route: "admin-unit-inspection_plan-overview", title: "Übersicht" }],
+    };
+  },
+  computed: {
+    ...mapState(useInspectionPlanStore, ["activeInspectionPlanObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchInspectionPlanByActiveId();
+  },
+  methods: {
+    ...mapActions(useInspectionPlanStore, ["fetchInspectionPlanByActiveId"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/inspectionPlan/Overview.vue b/src/views/admin/unit/inspectionPlan/Overview.vue
new file mode 100644
index 0000000..a1cb874
--- /dev/null
+++ b/src/views/admin/unit/inspectionPlan/Overview.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-hidden">
+    <div v-if="activeInspectionPlanObj != null" class="flex flex-col gap-2 w-full">
+      <div>
+        <label for="type">Typ</label>
+        <input type="text" id="type" :value="activeInspectionPlanObj.related.type" readonly />
+      </div>
+      <div>
+        <label for="interval" class="flex flex-row justify-between">
+          Intervall
+          <InspectionTimeFormatExplainIcon />
+        </label>
+        <input
+          type="text"
+          id="interval"
+          :value="activeInspectionPlanObj.inspectionInterval"
+          readonly
+          placeholder="---"
+        />
+      </div>
+      <div>
+        <label for="remind" class="flex flex-row justify-between">
+          Erinnerung vor Fälligkeit
+          <InspectionTimeFormatExplainIcon />
+        </label>
+        <input type="text" id="remind" :value="activeInspectionPlanObj.remindTime" readonly placeholder="---" />
+      </div>
+    </div>
+    <p>Prüfungspunkte:</p>
+    <div v-if="activeInspectionPlanObj?.inspectionPoints" class="flex flex-col gap-2 grow overflow-y-scroll">
+      <div v-if="activeInspectionPlanObj?.inspectionPoints.length == 0" class="flex flex-row gap-2 items-center">
+        <ExclamationTriangleIcon class="h-5 w-5 text-error" />
+        <p>keine Prüfpunkte enthalten</p>
+      </div>
+      <div
+        v-for="point in activeInspectionPlanObj?.inspectionPoints"
+        class="flex flex-col h-fit w-full border border-primary rounded-md"
+      >
+        <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+          <p>{{ point.title }}</p>
+        </div>
+        <div class="p-2">
+          <p>Eingabetyp: {{ point.type }}</p>
+          <p>Beschreibung: {{ point.description }}</p>
+        </div>
+      </div>
+    </div>
+
+    <Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
+    <p v-else-if="loadingActive == 'failed'" @click="fetchInspectionPlanByActiveId" class="cursor-pointer">
+      &#8634; laden fehlgeschlagen
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import Spinner from "@/components/Spinner.vue";
+import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
+import InspectionTimeFormatExplainIcon from "@/components/admin/unit/InspectionTimeFormatExplainIcon.vue";
+import { ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    inspectionPlanId: String,
+  },
+  computed: {
+    ...mapState(useInspectionPlanStore, ["activeInspectionPlanObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchInspectionPlanByActiveId();
+  },
+  methods: {
+    ...mapActions(useInspectionPlanStore, ["fetchInspectionPlanByActiveId"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/inspectionPlan/UpdateInspectionPlan.vue b/src/views/admin/unit/inspectionPlan/UpdateInspectionPlan.vue
new file mode 100644
index 0000000..7756130
--- /dev/null
+++ b/src/views/admin/unit/inspectionPlan/UpdateInspectionPlan.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <RouterLink to="./" class="text-primary">zurück zur Übersicht</RouterLink>
+    <Spinner v-if="loading == 'loading'" class="mx-auto" />
+    <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
+    <form
+      v-else-if="inspectionPlan != null"
+      class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
+      @submit.prevent="triggerUpdate"
+    >
+      <p class="mx-auto">Prüfplan bearbeiten</p>
+      <div>
+        <label for="name">Bezeichnung</label>
+        <input type="text" id="name" required v-model="inspectionPlan.title" />
+      </div>
+      <div>
+        <label for="interval" class="flex flex-row justify-between">
+          Intervall
+          <InspectionTimeFormatExplainIcon />
+        </label>
+        <input
+          type="text"
+          id="interval"
+          placeholder="<zahl>-(d|m|y) oder DD/MM oder DD/*"
+          required
+          pattern="^\d+-(d|m|y)$|^\d{2}/\d{2}$|^\d{2}/\*$"
+          title="Eingabe muss im Format <zahl>-(d|m|y), DD/MM oder DD/* sein"
+        />
+      </div>
+      <div>
+        <label for="remind" class="flex flex-row justify-between">
+          Erinnerung vor Fälligkeit
+          <InspectionTimeFormatExplainIcon />
+        </label>
+        <input
+          type="text"
+          id="remind"
+          placeholder="<zahl>-(d|m|y) oder DD/MM oder DD/*"
+          required
+          pattern="^\d+-(d|m|y)$|^\d{2}/\d{2}$|^\d{2}/\*$"
+          title="Eingabe muss im Format <zahl>-(d|m|y), DD/MM oder DD/* sein"
+        />
+      </div>
+      <div class="flex flex-row justify-end gap-2">
+        <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
+          abbrechen
+        </button>
+        <button primary type="submit" class="w-fit!" :disabled="status == 'loading'">speichern</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
+import type {
+  CreateInspectionPlanViewModel,
+  InspectionPlanViewModel,
+  UpdateInspectionPlanViewModel,
+} from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import ScanInput from "@/components/scanner/ScanInput.vue";
+import isEqual from "lodash.isequal";
+import cloneDeep from "lodash.clonedeep";
+import InspectionTimeFormatExplainIcon from "@/components/admin/unit/InspectionTimeFormatExplainIcon.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    inspectionPlanId: String,
+  },
+  watch: {
+    loadingActive() {
+      if (this.loading == "loading") {
+        this.loading = this.loadingActive;
+      }
+      if (this.loadingActive == "fetched") this.inspectionPlan = cloneDeep(this.activeInspectionPlanObj);
+    },
+  },
+  data() {
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      inspectionPlan: null as null | InspectionPlanViewModel,
+      timeout: null as any,
+    };
+  },
+  computed: {
+    canSaveOrReset(): boolean {
+      return isEqual(this.activeInspectionPlanObj, this.inspectionPlan);
+    },
+    ...mapState(useInspectionPlanStore, ["activeInspectionPlanObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useInspectionPlanStore, ["updateActiveInspectionPlan", "fetchInspectionPlanByActiveId"]),
+    resetForm() {
+      this.inspectionPlan = cloneDeep(this.activeInspectionPlanObj);
+    },
+    fetchItem() {
+      this.fetchInspectionPlanByActiveId();
+    },
+    triggerUpdate(e: any) {
+      if (this.inspectionPlan == null) return;
+      let formData = e.target.elements;
+      let updateInspectionPlan: UpdateInspectionPlanViewModel = {
+        id: this.inspectionPlan.id,
+        title: formData.name.value,
+        inspectionInterval: formData.interval.value,
+        remindTime: formData.remind.value,
+      };
+      this.status = "loading";
+      this.updateActiveInspectionPlan(updateInspectionPlan)
+        .then((res) => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/inspectionPlan/UpdateInspectionPlanPoints.vue b/src/views/admin/unit/inspectionPlan/UpdateInspectionPlanPoints.vue
new file mode 100644
index 0000000..1cf03c2
--- /dev/null
+++ b/src/views/admin/unit/inspectionPlan/UpdateInspectionPlanPoints.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <RouterLink to="./" class="text-primary">zurück zur Übersicht</RouterLink>
+    <Spinner v-if="loading == 'loading' && showLoading" class="mx-auto" />
+    <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
+    <form
+      v-else-if="localPoints != null"
+      class="flex flex-col grow gap-4 py-2 w-full max-w-xl mx-auto overflow-hidden"
+      @submit.prevent="triggerUpdate"
+    >
+      <p class="mx-auto">Prüfplan-Punkte bearbeiten</p>
+
+      <div class="flex flex-row justify-center gap-4">
+        <div
+          class="p-3 border border-gray-300 rounded-md shadow cursor-pointer"
+          @click="addItemToArray(InspectionPointEnum.oknok)"
+          title="OK Nicht OK"
+        >
+          <ClipboardDocumentCheckIcon class="w-7 h-7" />
+        </div>
+        <div
+          class="p-3 border border-gray-300 rounded-md shadow cursor-pointer"
+          @click="addItemToArray(InspectionPointEnum.file)"
+          title="Datei-Upload"
+        >
+          <DocumentIcon class="w-7 h-7" />
+        </div>
+        <div
+          class="p-3 border border-gray-300 rounded-md shadow cursor-pointer"
+          @click="addItemToArray(InspectionPointEnum.number)"
+          title="Zahl-Eingabe"
+        >
+          <CalculatorIcon class="w-7 h-7" />
+        </div>
+        <div
+          class="p-3 border border-gray-300 rounded-md shadow cursor-pointer"
+          @click="addItemToArray(InspectionPointEnum.text)"
+          title="Text-Eingabe"
+        >
+          <BoldIcon class="w-7 h-7" />
+        </div>
+      </div>
+
+      <div class="grow flex flex-col gap-2 overflow-y-scroll">
+        <p v-if="sortedPoints.length == 0" class="m-auto">Wähle mindestens 1 Eingabefeld</p>
+        <InspectionPointListItem
+          v-for="(point, index) in sortedPoints"
+          :key="index"
+          :model-value="point"
+          :index="index"
+          :total-count="localPoints.length"
+          @update:model-value="updateItemFromArray"
+          @up="changeSort('up', point.id, index)"
+          @down="changeSort('down', point.id, index)"
+          @remove="removeItemFromArray(point.id)"
+        />
+      </div>
+
+      <div class="flex flex-row justify-end gap-2">
+        <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
+          abbrechen
+        </button>
+        <button
+          primary
+          type="submit"
+          class="w-fit!"
+          :disabled="status == 'loading' || canSaveOrReset || sortedPoints.length == 0"
+        >
+          speichern
+        </button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import type { InspectionPointViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import isEqual from "lodash.isequal";
+import cloneDeep from "lodash.clonedeep";
+import { BoldIcon, CalculatorIcon, ClipboardDocumentCheckIcon, DocumentIcon } from "@heroicons/vue/24/outline";
+import { InspectionPointEnum } from "@/enums/inspectionEnum";
+import { v4 as uuid } from "uuid";
+import InspectionPointListItem from "@/components/admin/unit/inspectionPlan/InspectionPointListItem.vue";
+import { useInspectionPointStore } from "@/stores/admin/unit/inspectionPlan/inspectionPoint";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    inspectionPlanId: String,
+  },
+  watch: {
+    loading() {
+      if (this.loading == "fetched") {
+        this.localPoints = cloneDeep(this.inspectionPoints);
+        this.showLoading = false;
+      }
+    },
+  },
+  data() {
+    return {
+      showLoading: true as boolean,
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: null as any,
+      localPoints: [] as Array<InspectionPointViewModel>,
+    };
+  },
+  computed: {
+    canSaveOrReset(): boolean {
+      return isEqual(this.inspectionPoints, this.localPoints);
+    },
+    ...mapState(useInspectionPointStore, ["inspectionPoints", "loading"]),
+    sortedPoints() {
+      return this.localPoints.slice().sort((a, b) => a.sort - b.sort);
+    },
+  },
+  mounted() {
+    this.fetchInspectionPoints();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useInspectionPointStore, ["fetchInspectionPoints", "updateActiveInspectionPoints"]),
+    resetForm() {
+      this.localPoints = cloneDeep(this.inspectionPoints);
+    },
+    addItemToArray(type: InspectionPointEnum) {
+      this.localPoints.push({
+        id: uuid(),
+        title: "",
+        description: "",
+        type,
+        sort: this.localPoints.length,
+      });
+    },
+    updateItemFromArray(pkg: InspectionPointViewModel) {
+      let index = this.localPoints.findIndex((ip) => ip.id == pkg.id);
+      this.localPoints[index] = pkg;
+    },
+    removeItemFromArray(id: string) {
+      let index = this.localPoints.findIndex((ip) => ip.id == id);
+      if (index !== -1) {
+        this.localPoints.splice(index, 1);
+        this.normalizeSort();
+      }
+    },
+    changeSort(dir: "up" | "down", thisId: string, index: number) {
+      let affected = this.sortedPoints[dir == "up" ? index - 1 : index + 1];
+      if (affected) {
+        this.localPoints.find((a) => a.id == thisId)!.sort = dir == "up" ? index - 1 : index + 1;
+        this.localPoints.find((a) => a.id == affected.id)!.sort = dir == "up" ? affected.sort + 1 : affected.sort - 1;
+      }
+      this.normalizeSort();
+    },
+    normalizeSort() {
+      let rightSort = this.sortedPoints.every((val, index) => val.sort == index);
+      if (!rightSort) {
+        this.localPoints.forEach((e, index) => {
+          e.sort = this.sortedPoints.findIndex((sp) => sp.id == e.id);
+        });
+      }
+    },
+    triggerUpdate(e: any) {
+      if (this.localPoints.length == 0) return;
+      this.status = "loading";
+      this.updateActiveInspectionPoints(this.localPoints)
+        .then((res) => {
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/maintenance/Maintenance.vue b/src/views/admin/unit/maintenance/Maintenance.vue
new file mode 100644
index 0000000..5afc9f4
--- /dev/null
+++ b/src/views/admin/unit/maintenance/Maintenance.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="flex flex-col w-full h-full gap-2 justify-center">
+    <Pagination
+      :items="maintenances"
+      :totalCount="totalCount"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchMaintenances(offset, count, search)"
+    >
+      <template #pageRow="{ row }: { row: MaintenanceViewModel }">
+        <MaintenanceListItem :maintenance="row" />
+      </template>
+    </Pagination>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useAbilityStore } from "@/stores/ability";
+import { useMaintenanceStore } from "@/stores/admin/unit/maintenance";
+import type { MaintenanceViewModel } from "@/viewmodels/admin/unit/maintenance.models";
+import Pagination from "@/components/Pagination.vue";
+import MaintenanceListItem from "@/components/admin/unit/maintenance/MaintenanceListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useMaintenanceStore, ["maintenances", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchMaintenances(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useMaintenanceStore, ["fetchMaintenances"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/maintenance/MaintenanceRouting.vue b/src/views/admin/unit/maintenance/MaintenanceRouting.vue
new file mode 100644
index 0000000..0da37c4
--- /dev/null
+++ b/src/views/admin/unit/maintenance/MaintenanceRouting.vue
@@ -0,0 +1,54 @@
+<template>
+  <MainTemplate title="Wartungen">
+    <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="{ isExactActive }"
+              :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-hidden',
+                  isExactActive ? 'bg-red-200 shadow-sm 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 { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { RouterLink, RouterView } from "vue-router";
+import { useAbilityStore } from "@/stores/ability";
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      tabs: [
+        { route: "admin-unit-maintenance", title: "offen" },
+        { route: "admin-unit-maintenance-done", title: "bearbeitet" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/repair/DamageReports.vue b/src/views/admin/unit/repair/DamageReports.vue
new file mode 100644
index 0000000..86250d3
--- /dev/null
+++ b/src/views/admin/unit/repair/DamageReports.vue
@@ -0,0 +1,96 @@
+<template>
+  <div v-if="activeRepairObj != null" class="flex flex-col gap-2 h-full w-full">
+    <DamageReportSearchSelectMultipleWithRelated
+      title="verbundene Schadensmeldungen"
+      :related="activeRepairObj.assigned"
+      :relatedId="activeRepairObj.relatedId"
+      :model-value="activeRepairObj.reports.map((r) => r.id)"
+      :disabled="!!activeRepairObj.finishedAt || !can('update', 'unit', 'repair')"
+      @add:damage-report="handleReportAdd"
+      @remove:difference="handleReportRemove"
+    />
+    <div class="flex flex-col gap-2 overflow-y-scroll h-full">
+      <div
+        v-for="damageReport in activeRepairObj.reports"
+        :key="damageReport.id"
+        class="flex flex-col h-fit w-full border border-primary rounded-md"
+      >
+        <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+          <p>{{ damageReport.title }}</p>
+          <TrashIcon
+            v-if="!activeRepairObj.finishedAt"
+            class="w-5 h-5 cursor-pointer"
+            @click="handleReportRemove(damageReport.id)"
+          />
+        </div>
+        <div class="p-2">
+          <p v-if="damageReport.description">Beschreibung: {{ damageReport.description }}</p>
+        </div>
+      </div>
+    </div>
+    <button
+      primary
+      class="w-fit! self-end"
+      :disabled="!!activeRepairObj.finishedAt || !can('update', 'unit', 'repair')"
+      @click="saveReports"
+    >
+      Änderungen speichern
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState, mapWritableState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useRepairStore } from "@/stores/admin/unit/repair";
+import type { RepairViewModel, UpdateRepairViewModel } from "@/viewmodels/admin/unit/repair.models";
+import DamageReportSearchSelectMultipleWithRelated from "@/components/search/DamageReportSearchSelectMultipleWithRelated.vue";
+import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
+import { TrashIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    repairId: String,
+  },
+  watch: {},
+  data() {
+    return {
+      loading: undefined as undefined | "loading" | "success" | "failed",
+    };
+  },
+  computed: {
+    ...mapWritableState(useRepairStore, ["activeRepairObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  methods: {
+    ...mapActions(useRepairStore, ["loadRepairImage", "updateRepairReports"]),
+    handleReportAdd(report: DamageReportViewModel) {
+      if (!this.activeRepairObj) return;
+      this.activeRepairObj.reports.push(report);
+    },
+    handleReportRemove(reportId: string) {
+      if (!this.activeRepairObj) return;
+      this.activeRepairObj.reports = this.activeRepairObj.reports.filter((r) => r.id != reportId);
+    },
+    saveReports() {
+      if (this.activeRepairObj == null) return;
+      this.loading = "loading";
+      this.updateRepairReports(this.activeRepairObj.reports.map((r) => r.id))
+        .then((res) => {
+          this.loading = "success";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.loading = undefined;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/repair/Overview.vue b/src/views/admin/unit/repair/Overview.vue
new file mode 100644
index 0000000..ba1f362
--- /dev/null
+++ b/src/views/admin/unit/repair/Overview.vue
@@ -0,0 +1,141 @@
+<template>
+  <div v-if="activeRepairObj != null" class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div>
+      <label for="status">Status</label>
+      <input id="status" ref="status" type="text" :readonly="!editStatus" :value="activeRepairObj.status" />
+    </div>
+    <button
+      v-if="!editStatus && !activeRepairObj.finishedAt"
+      :disabled="!can('update', 'unit', 'repair')"
+      primary
+      class="w-fit! self-end"
+      @click="editStatus = true"
+    >
+      Status ändern
+    </button>
+    <div v-else-if="!activeRepairObj.finishedAt" class="flex flex-row gap-2 justify-end">
+      <button primary-outline class="w-fit!" @click="saveStatus(true)">speichern und abschließen</button>
+      <button primary class="w-fit!" @click="saveStatus(false)">Status speichern</button>
+    </div>
+    <br />
+    <form class="flex flex-col gap-2" @submit.prevent="saveData">
+      <div>
+        <label for="title">Kurzbeschreibung</label>
+        <input
+          id="title"
+          type="text"
+          placeholder="---"
+          :value="activeRepairObj.title"
+          :disabled="!!activeRepairObj.finishedAt || !can('update', 'unit', 'repair')"
+        />
+      </div>
+      <div>
+        <label for="description">Beschreibung der Reparatur</label>
+        <textarea
+          id="description"
+          placeholder="---"
+          :value="activeRepairObj.description"
+          :disabled="!!activeRepairObj.finishedAt || !can('update', 'unit', 'repair')"
+        ></textarea>
+      </div>
+      <div>
+        <label for="responsible">Verantwortlich</label>
+        <input
+          id="responsible"
+          type="text"
+          placeholder="---"
+          :value="activeRepairObj.responsible"
+          :disabled="!!activeRepairObj.finishedAt || !can('update', 'unit', 'repair')"
+        />
+      </div>
+      <button
+        primary
+        type="submit"
+        class="w-fit! self-end"
+        :disabled="!!activeRepairObj.finishedAt || !can('update', 'unit', 'repair')"
+      >
+        Änderungen speichern
+      </button>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState, mapWritableState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useRepairStore } from "@/stores/admin/unit/repair";
+import type { UpdateRepairStatusViewModel, UpdateRepairViewModel } from "@/viewmodels/admin/unit/repair.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    repairId: String,
+  },
+  data() {
+    return {
+      editStatus: false as boolean,
+      loading: undefined as undefined | "loading" | "success" | "failed",
+    };
+  },
+  computed: {
+    ...mapWritableState(useRepairStore, ["activeRepairObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  methods: {
+    ...mapActions(useRepairStore, ["loadRepairImage", "updateRepairStatus", "updateRepair"]),
+    saveStatus(finish: boolean) {
+      if (this.activeRepairObj == null) return;
+      this.loading = "loading";
+      let update: UpdateRepairStatusViewModel = {
+        id: this.activeRepairObj.id,
+        status: (this.$refs.status as HTMLInputElement).value,
+        done: finish,
+      };
+      this.updateRepairStatus(update)
+        .then((res) => {
+          this.activeRepairObj!.status = update.status;
+          this.activeRepairObj!.finishedAt = update.done ? new Date() : undefined;
+          this.loading = "success";
+          this.editStatus = false;
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.loading = undefined;
+          }, 2000);
+        });
+    },
+    saveData(e: any) {
+      if (this.activeRepairObj == null) return;
+      this.loading = "loading";
+      const formData = e.target.elements;
+      let update: UpdateRepairViewModel = {
+        id: this.activeRepairObj.id,
+        title: formData.title.value,
+        description: formData.description.value,
+        responsible: formData.responsible.value,
+      };
+      this.updateRepair(update)
+        .then((res) => {
+          this.activeRepairObj!.title = update.title;
+          this.activeRepairObj!.description = update.description;
+          this.activeRepairObj!.responsible = update.responsible;
+          this.loading = "success";
+          this.editStatus = false;
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.loading = undefined;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/repair/RepairClosed.vue b/src/views/admin/unit/repair/RepairClosed.vue
new file mode 100644
index 0000000..2b96684
--- /dev/null
+++ b/src/views/admin/unit/repair/RepairClosed.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="flex flex-col w-full h-full gap-2 justify-center">
+    <Pagination
+      :items="repairs"
+      :totalCount="totalCount"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchDoneRepairs(offset, count, search)"
+    >
+      <template #pageRow="{ row }: { row: RepairViewModel }">
+        <RepairListItem :repair="row" />
+      </template>
+    </Pagination>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useAbilityStore } from "@/stores/ability";
+import { useRepairStore } from "@/stores/admin/unit/repair";
+import type { RepairViewModel } from "@/viewmodels/admin/unit/repair.models";
+import Pagination from "@/components/Pagination.vue";
+import RepairListItem from "@/components/admin/unit/repair/RepairListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useRepairStore, ["repairs", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchDoneRepairs(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useRepairStore, ["fetchDoneRepairs"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/repair/RepairCreate.vue b/src/views/admin/unit/repair/RepairCreate.vue
new file mode 100644
index 0000000..6355228
--- /dev/null
+++ b/src/views/admin/unit/repair/RepairCreate.vue
@@ -0,0 +1,171 @@
+<template>
+  <MainTemplate title="Reparatur erstellen">
+    <template #main>
+      <form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="createNewRepair">
+        <div class="flex flex-row">
+          <div
+            v-for="tab in tabs"
+            :key="tab.key"
+            class="w-1/2 p-0.5 first:pl-0 last:pr-0 cursor-pointer"
+            @click="
+              active = tab.key;
+              related = '';
+              reports = [];
+            "
+          >
+            <p
+              :class="[
+                'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
+                tab.key == active
+                  ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none'
+                  : ' hover:bg-red-200',
+              ]"
+            >
+              {{ tab.title }}
+            </p>
+          </div>
+        </div>
+
+        <EquipmentSearchSelect v-if="active == 'equipment'" title="Gerät" useScanner v-model="related" />
+        <VehicleSearchSelect v-else-if="active == 'vehicle'" title="Fahrzeug" useScanner v-model="related" />
+        <WearableSearchSelect v-else title="Kleidung" useScanner v-model="related" />
+
+        <div>
+          <label for="title"> Kurzbeschreibung </label>
+          <input id="title" type="text" required />
+        </div>
+
+        <div>
+          <label for="description"> Beschreibung (optional) </label>
+          <textarea id="description" class="h-24"></textarea>
+        </div>
+
+        <div>
+          <label for="responsible"> Verantwortlich (optional) </label>
+          <input id="responsible" type="text" />
+        </div>
+
+        <DamageReportSearchSelectMultipleWithRelated
+          title="verbundene Schadensmeldungen zu dieser Reparatur (optional)"
+          :related="active"
+          :relatedId="related"
+          v-model="reports"
+        />
+
+        <div class="flex flex-row justify-end gap-2">
+          <RouterLink
+            :to="{ name: 'admin-unit-repair' }"
+            primary-outline
+            button
+            class="w-fit!"
+            :disabled="status == 'loading' || status?.status == 'success'"
+          >
+            abbrechen
+          </RouterLink>
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading'">starten</button>
+          <Spinner v-if="status == 'loading'" class="my-auto" />
+          <SuccessCheckmark v-else-if="status?.status == 'success'" />
+          <FailureXMark v-else-if="status?.status == 'failed'" />
+        </div>
+      </form>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import EquipmentSearchSelect from "@/components/search/EquipmentSearchSelect.vue";
+import VehicleSearchSelect from "@/components/search/VehicleSearchSelect.vue";
+import WearableSearchSelect from "@/components/search/WearableSearchSelect.vue";
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+import { useVehicleStore } from "@/stores/admin/unit/vehicle/vehicle";
+import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
+import type { CreateRepairViewModel } from "@/viewmodels/admin/unit/repair.models";
+import { useRepairStore } from "@/stores/admin/unit/repair";
+import DamageReportSearchSelectMultipleWithRelated from "@/components/search/DamageReportSearchSelectMultipleWithRelated.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    type: {
+      type: String as PropType<"vehicle" | "equipment" | "wearable">,
+      default: "equipment",
+    },
+    relatedId: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: null as any,
+      related: "",
+      active: "equipment" as "equipment" | "vehicle" | "wearable",
+      tabs: [
+        {
+          key: "equipment",
+          title: "Gerät",
+        },
+        {
+          key: "vehicle",
+          title: "Fahrzeug",
+        },
+        {
+          key: "wearable",
+          title: "Kleidung",
+        },
+      ] as Array<{ key: "equipment" | "vehicle" | "wearable"; title: string }>,
+      reports: [] as Array<string>,
+    };
+  },
+  mounted() {
+    if (["vehicle", "equipment", "wearable"].includes(this.type)) {
+      this.active = this.type;
+      this.related = this.relatedId ?? "";
+    }
+  },
+  methods: {
+    ...mapActions(useRepairStore, ["createRepair"]),
+    ...mapActions(useEquipmentStore, ["fetchEquipmentById"]),
+    ...mapActions(useVehicleStore, ["fetchVehicleById"]),
+    ...mapActions(useWearableStore, ["fetchWearableById"]),
+
+    createNewRepair(e: any) {
+      if (this.related == "") return;
+      let formData = e.target.elements;
+      let createRepair: CreateRepairViewModel = {
+        affected: this.active,
+        affectedId: this.related,
+        title: formData.responsible.value,
+        description: formData.description.value,
+        responsible: formData.responsible.value,
+        reports: this.reports,
+      };
+      this.status = "loading";
+      this.createRepair(createRepair)
+        .then((res) => {
+          this.status = { status: "success" };
+
+          this.timeout = setTimeout(() => {
+            this.$router.push({
+              name: "admin-unit-repair-overview",
+              params: {
+                repairId: res.data,
+              },
+            });
+          }, 1500);
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/repair/RepairOpen.vue b/src/views/admin/unit/repair/RepairOpen.vue
new file mode 100644
index 0000000..671c3e9
--- /dev/null
+++ b/src/views/admin/unit/repair/RepairOpen.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="flex flex-col w-full h-full gap-2 justify-center">
+    <Pagination
+      :items="repairs"
+      :totalCount="totalCount"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchOpenRepairs(offset, count, search)"
+    >
+      <template #pageRow="{ row }: { row: RepairViewModel }">
+        <RepairListItem :repair="row" />
+      </template>
+    </Pagination>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useAbilityStore } from "@/stores/ability";
+import { useRepairStore } from "@/stores/admin/unit/repair";
+import type { RepairViewModel } from "@/viewmodels/admin/unit/repair.models";
+import Pagination from "@/components/Pagination.vue";
+import RepairListItem from "@/components/admin/unit/repair/RepairListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useRepairStore, ["repairs", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchOpenRepairs(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useRepairStore, ["fetchOpenRepairs"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/repair/RepairRouting.vue b/src/views/admin/unit/repair/RepairRouting.vue
new file mode 100644
index 0000000..06b45ca
--- /dev/null
+++ b/src/views/admin/unit/repair/RepairRouting.vue
@@ -0,0 +1,86 @@
+<template>
+  <MainTemplate>
+    <template #headerInsert>
+      <RouterLink :to="{ name: 'admin-unit-repair-open' }" class="text-primary">zurück zur Liste</RouterLink>
+    </template>
+    <template #topBar>
+      <h1 class="font-bold text-xl h-8 min-h-fit">
+        {{ activeRepairObj?.title }} -
+        {{ activeRepairObj?.related?.name ?? "Ohne Zuordnung" }}
+        <small v-if="activeRepairObj?.related">({{ activeRepairObj.related.code }})</small>
+      </h1>
+
+      <RouterLink
+        v-if="activeRepairObj?.related && can('read', 'unit', activeRepairObj.assigned)"
+        :to="{
+          name: `admin-unit-${activeRepairObj.assigned}-overview`,
+          params: { [`${activeRepairObj.assigned}Id`]: activeRepairObj.related.id ?? '_' },
+        }"
+      >
+        <ArrowTopRightOnSquareIcon class="w-5 h-5" />
+      </RouterLink>
+    </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="{ isExactActive }"
+              :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-hidden',
+                  isExactActive ? 'bg-red-200 shadow-sm 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 { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { RouterLink, RouterView } from "vue-router";
+import { useAbilityStore } from "@/stores/ability";
+import { useRepairStore } from "@/stores/admin/unit/repair";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    repairId: String,
+  },
+  data() {
+    return {
+      tabs: [
+        { route: "admin-unit-repair-overview", title: "Übersicht" },
+        // { route: "admin-unit-repair-overview", title: "Bilder & Bericht" },
+        { route: "admin-unit-repair-reports", title: "Schadensmeldungen" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useRepairStore, ["activeRepairObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchRepairByActiveId();
+  },
+  methods: {
+    ...mapActions(useRepairStore, ["fetchRepairByActiveId"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/repair/RepairStatusRouting.vue b/src/views/admin/unit/repair/RepairStatusRouting.vue
new file mode 100644
index 0000000..9c9deed
--- /dev/null
+++ b/src/views/admin/unit/repair/RepairStatusRouting.vue
@@ -0,0 +1,61 @@
+<template>
+  <MainTemplate title="Reparaturen">
+    <template #diffMain>
+      <div class="flex flex-col gap-2 grow px-7 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="{ isExactActive }"
+            :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-hidden',
+                isExactActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+              ]"
+            >
+              {{ tab.title }}
+            </p>
+          </RouterLink>
+        </div>
+        <RouterView />
+        <RouterLink
+          :to="{ name: 'admin-unit-repair-create' }"
+          button
+          primary
+          class="w-fit!"
+          :disabled="!can('create', 'unit', 'repair')"
+        >
+          Reparatur erstellen
+        </RouterLink>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { RouterLink, RouterView } from "vue-router";
+import { useAbilityStore } from "@/stores/ability";
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      tabs: [
+        { route: "admin-unit-repair-open", title: "offen" },
+        { route: "admin-unit-repair-done", title: "bearbeitet" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/respiratoryGear/CreateRespiratoryGear.vue b/src/views/admin/unit/respiratoryGear/CreateRespiratoryGear.vue
new file mode 100644
index 0000000..71f98f0
--- /dev/null
+++ b/src/views/admin/unit/respiratoryGear/CreateRespiratoryGear.vue
@@ -0,0 +1,82 @@
+<template>
+  <MainTemplate title="Ausrüstung erfassen">
+    <template #diffMain>
+      <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+        <form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerCreate">
+          <EquipmentSearchSelect title="Gerät" useScanner v-model="selectedRespiratoryGear" />
+          <div class="flex flex-row justify-end gap-2">
+            <RouterLink
+              :to="{ name: 'admin-unit-respiratory_gear' }"
+              primary-outline
+              button
+              class="w-fit!"
+              :disabled="status == 'loading' || status?.status == 'success'"
+            >
+              abbrechen
+            </RouterLink>
+            <button primary type="submit" class="w-fit!" :disabled="status == 'loading'">speichern</button>
+            <Spinner v-if="status == 'loading'" class="my-auto" />
+            <SuccessCheckmark v-else-if="status?.status == 'success'" />
+            <FailureXMark v-else-if="status?.status == 'failed'" />
+          </div>
+        </form>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useRespiratoryGearStore } from "@/stores/admin/unit/respiratoryGear/respiratoryGear";
+import type { CreateRespiratoryGearViewModel } from "@/viewmodels/admin/unit/respiratory/respiratoryGear.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import EquipmentSearchSelect from "@/components/search/EquipmentSearchSelect.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: null as any,
+      selectedRespiratoryGear: "" as string,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useRespiratoryGearStore, ["createRespiratoryGear"]),
+    triggerCreate(e: any) {
+      if (this.selectedRespiratoryGear == null) return;
+      let formData = e.target.elements;
+      let createRespiratoryGear: CreateRespiratoryGearViewModel = {
+        equipmentId: this.selectedRespiratoryGear,
+      };
+      this.status = "loading";
+      this.createRespiratoryGear(createRespiratoryGear)
+        .then((res) => {
+          this.status = { status: "success" };
+
+          this.timeout = setTimeout(() => {
+            this.$router.push({
+              name: "admin-unit-respiratory_gear-overview",
+              params: {
+                respiratoryGearId: res.data,
+              },
+            });
+          }, 1500);
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/respiratoryGear/RespiratoryGear.vue b/src/views/admin/unit/respiratoryGear/RespiratoryGear.vue
new file mode 100644
index 0000000..211bd36
--- /dev/null
+++ b/src/views/admin/unit/respiratoryGear/RespiratoryGear.vue
@@ -0,0 +1,73 @@
+<template>
+  <MainTemplate title="Atemschutz-Geräte">
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+        <Pagination
+          :items="respiratoryGears"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          useSearch
+          @load-data="(offset, count, search) => fetchRespiratoryGears(offset, count, search)"
+          @search="(search) => fetchRespiratoryGears(0, maxEntriesPerPage, search, true)"
+        >
+          <template #pageRow="{ row }: { row: RespiratoryGearViewModel }">
+            <RespiratoryGearListItem :respiratoryGear="row" />
+          </template>
+        </Pagination>
+
+        <div class="flex flex-row gap-4">
+          <RouterLink
+            v-if="can('create', 'unit', 'respiratory_gear')"
+            :to="{ name: 'admin-unit-respiratory_gear-create' }"
+            primary
+            button
+            class="w-fit!"
+          >
+            Gerät erfassen
+          </RouterLink>
+        </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 { useRespiratoryGearStore } from "@/stores/admin/unit/respiratoryGear/respiratoryGear";
+import { useModalStore } from "@/stores/modal";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import type { RespiratoryGearViewModel } from "@/viewmodels/admin/unit/respiratory/respiratoryGear.models";
+import RespiratoryGearListItem from "@/components/admin/unit/respiratoryGear/RespiratoryGearListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useRespiratoryGearStore, ["respiratoryGears", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchRespiratoryGears(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useRespiratoryGearStore, ["fetchRespiratoryGears"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openCreateModal() {
+      this.openModal(
+        markRaw(
+          defineAsyncComponent(() => import("@/components/admin/unit/respiratoryGear/CreateRespiratoryGearModal.vue"))
+        )
+      );
+    },
+  },
+});
+</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..c000096
--- /dev/null
+++ b/src/views/admin/unit/respiratoryGear/RespiratoryGearRouting.vue
@@ -0,0 +1,83 @@
+<template>
+  <MainTemplate>
+    <template #headerInsert>
+      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+    </template>
+    <template #topBar>
+      <h1 class="font-bold text-xl h-8 min-h-fit">AGT-Gerät: {{ activeRespiratoryGearObj?.equipment.name }}</h1>
+
+      <RouterLink
+        v-if="can('read', 'unit', 'equipment')"
+        :to="{
+          name: 'admin-unit-equipment-overview',
+          params: { equipmentId: activeRespiratoryGearObj?.equipment.id ?? '_' },
+        }"
+      >
+        <ArrowTopRightOnSquareIcon class="w-5 h-5" />
+      </RouterLink>
+    </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-hidden',
+                  isActive ? 'bg-red-200 shadow-sm 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 { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { RouterLink, RouterView } from "vue-router";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
+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-maintenance", title: "Wartungen" },
+        { route: "admin-unit-respiratory_gear-inspection", title: "Prüfungen" },
+        { route: "admin-unit-respiratory_gear-mission", title: "Einsätze" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useRespiratoryGearStore, ["activeRespiratoryGearObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchRespiratoryGearByActiveId();
+  },
+  methods: {
+    ...mapActions(useRespiratoryGearStore, ["fetchRespiratoryGearByActiveId"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/respiratoryMission/CreateRespiratoryMission.vue b/src/views/admin/unit/respiratoryMission/CreateRespiratoryMission.vue
new file mode 100644
index 0000000..3687b54
--- /dev/null
+++ b/src/views/admin/unit/respiratoryMission/CreateRespiratoryMission.vue
@@ -0,0 +1,94 @@
+<template>
+  <MainTemplate title="Ausrüstung erfassen">
+    <template #diffMain>
+      <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+        <form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerCreate">
+          <div>
+            <label for="title">Titel</label>
+            <input type="text" id="title" required />
+          </div>
+          <div>
+            <label for="description">Bezeichnung</label>
+            <textarea type="text" id="description" required />
+          </div>
+          <div>
+            <label for="date">Datum & Uhrzeit</label>
+            <input type="datetime-local" id="date" required />
+          </div>
+          <div class="flex flex-row justify-end gap-2">
+            <RouterLink
+              :to="{ name: 'admin-unit-respiratory_mission' }"
+              primary-outline
+              button
+              class="w-fit!"
+              :disabled="status == 'loading' || status?.status == 'success'"
+            >
+              abbrechen
+            </RouterLink>
+            <button primary type="submit" class="w-fit!" :disabled="status == 'loading'">speichern</button>
+            <Spinner v-if="status == 'loading'" class="my-auto" />
+            <SuccessCheckmark v-else-if="status?.status == 'success'" />
+            <FailureXMark v-else-if="status?.status == 'failed'" />
+          </div>
+        </form>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useRespiratoryMissionStore } from "@/stores/admin/unit/respiratoryMission/respiratoryMission";
+import type { CreateRespiratoryMissionViewModel } from "@/viewmodels/admin/unit/respiratory/respiratoryMission.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: null as any,
+      selectedRespiratoryMission: "" as string,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useRespiratoryMissionStore, ["createRespiratoryMission"]),
+    triggerCreate(e: any) {
+      if (this.selectedRespiratoryMission == null) return;
+      let formData = e.target.elements;
+      let createRespiratoryMission: CreateRespiratoryMissionViewModel = {
+        date: formData.date.value,
+        title: formData.title.value,
+        description: formData.description.value,
+      };
+      this.status = "loading";
+      this.createRespiratoryMission(createRespiratoryMission)
+        .then((res) => {
+          this.status = { status: "success" };
+
+          this.timeout = setTimeout(() => {
+            this.$router.push({
+              name: "admin-unit-respiratory_mission-overview",
+              params: {
+                respiratoryMissionId: res.data,
+              },
+            });
+          }, 1500);
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/respiratoryMission/RespiratoryMission.vue b/src/views/admin/unit/respiratoryMission/RespiratoryMission.vue
new file mode 100644
index 0000000..c3f4834
--- /dev/null
+++ b/src/views/admin/unit/respiratoryMission/RespiratoryMission.vue
@@ -0,0 +1,65 @@
+<template>
+  <MainTemplate title="Atemschutz-Einsätze">
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+        <Pagination
+          :items="respiratoryMissions"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          useSearch
+          @load-data="(offset, count, search) => fetchRespiratoryMissions(offset, count, search)"
+          @search="(search) => fetchRespiratoryMissions(0, maxEntriesPerPage, search, true)"
+        >
+          <template #pageRow="{ row }: { row: RespiratoryMissionViewModel }">
+            <RespiratoryMissionListItem :respiratoryMission="row" />
+          </template>
+        </Pagination>
+
+        <div class="flex flex-row gap-4">
+          <RouterLink
+            v-if="can('create', 'unit', 'respiratory_mission')"
+            :to="{ name: 'admin-unit-respiratory_mission-create' }"
+            primary
+            button
+            class="w-fit!"
+          >
+            Einsatz erfassen
+          </RouterLink>
+        </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 { useRespiratoryMissionStore } from "@/stores/admin/unit/respiratoryMission/respiratoryMission";
+import { useModalStore } from "@/stores/modal";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import type { RespiratoryMissionViewModel } from "@/viewmodels/admin/unit/respiratory/respiratoryMission.models";
+import RespiratoryMissionListItem from "@/components/admin/unit/respiratoryMission/RespiratoryMissionListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useRespiratoryMissionStore, ["respiratoryMissions", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchRespiratoryMissions(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useRespiratoryMissionStore, ["fetchRespiratoryMissions"]),
+  },
+});
+</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..8aee76d
--- /dev/null
+++ b/src/views/admin/unit/respiratoryMission/RespiratoryMissionRouting.vue
@@ -0,0 +1,71 @@
+<template>
+  <MainTemplate>
+    <template #headerInsert>
+      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+    </template>
+    <template #topBar>
+      <h1 class="font-bold text-xl h-8 min-h-fit">AGT-Einsatz: {{ activeRespiratoryMissionObj?.title }}</h1>
+    </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-hidden',
+                  isActive ? 'bg-red-200 shadow-sm 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 { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { RouterLink, RouterView } from "vue-router";
+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-wearer", title: "Träger" },
+        { route: "admin-unit-respiratory_mission-gear", title: "Geräte" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useRespiratoryMissionStore, ["activeRespiratoryMissionObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchRespiratoryMissionByActiveId();
+  },
+  methods: {
+    ...mapActions(useRespiratoryMissionStore, ["fetchRespiratoryMissionByActiveId"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/respiratoryWearer/CreateRespiratoryWearer.vue b/src/views/admin/unit/respiratoryWearer/CreateRespiratoryWearer.vue
new file mode 100644
index 0000000..7334432
--- /dev/null
+++ b/src/views/admin/unit/respiratoryWearer/CreateRespiratoryWearer.vue
@@ -0,0 +1,82 @@
+<template>
+  <MainTemplate title="Ausrüstung erfassen">
+    <template #diffMain>
+      <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+        <form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerCreate">
+          <MemberSearchSelectSingle title="Träger" useScanner v-model="selectedRespiratoryWearer" />
+          <div class="flex flex-row justify-end gap-2">
+            <RouterLink
+              :to="{ name: 'admin-unit-respiratory_wearer' }"
+              primary-outline
+              button
+              class="w-fit!"
+              :disabled="status == 'loading' || status?.status == 'success'"
+            >
+              abbrechen
+            </RouterLink>
+            <button primary type="submit" class="w-fit!" :disabled="status == 'loading'">speichern</button>
+            <Spinner v-if="status == 'loading'" class="my-auto" />
+            <SuccessCheckmark v-else-if="status?.status == 'success'" />
+            <FailureXMark v-else-if="status?.status == 'failed'" />
+          </div>
+        </form>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useRespiratoryWearerStore } from "@/stores/admin/unit/respiratoryWearer/respiratoryWearer";
+import type { CreateRespiratoryWearerViewModel } from "@/viewmodels/admin/unit/respiratory/respiratoryWearer.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import MemberSearchSelectSingle from "@/components/search/MemberSearchSelectSingle.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: null as any,
+      selectedRespiratoryWearer: "" as string,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useRespiratoryWearerStore, ["createRespiratoryWearer"]),
+    triggerCreate(e: any) {
+      if (this.selectedRespiratoryWearer == null) return;
+      let formData = e.target.elements;
+      let createRespiratoryWearer: CreateRespiratoryWearerViewModel = {
+        memberId: this.selectedRespiratoryWearer,
+      };
+      this.status = "loading";
+      this.createRespiratoryWearer(createRespiratoryWearer)
+        .then((res) => {
+          this.status = { status: "success" };
+
+          this.timeout = setTimeout(() => {
+            this.$router.push({
+              name: "admin-unit-respiratory_wearer-overview",
+              params: {
+                respiratoryWearerId: res.data,
+              },
+            });
+          }, 1500);
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/respiratoryWearer/RespiratoryWearer.vue b/src/views/admin/unit/respiratoryWearer/RespiratoryWearer.vue
new file mode 100644
index 0000000..58f664a
--- /dev/null
+++ b/src/views/admin/unit/respiratoryWearer/RespiratoryWearer.vue
@@ -0,0 +1,75 @@
+<template>
+  <MainTemplate title="Atemschutz-Träger">
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+        <Pagination
+          :items="respiratoryWearers"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          useSearch
+          @load-data="(offset, count, search) => fetchRespiratoryWearers(offset, count, search)"
+          @search="(search) => fetchRespiratoryWearers(0, maxEntriesPerPage, search, true)"
+        >
+          <template #pageRow="{ row }: { row: RespiratoryWearerViewModel }">
+            <RespiratoryWearerListItem :respiratoryWearer="row" />
+          </template>
+        </Pagination>
+
+        <div class="flex flex-row gap-4">
+          <RouterLink
+            v-if="can('create', 'unit', 'respiratory_wearer')"
+            :to="{ name: 'admin-unit-respiratory_wearer-create' }"
+            primary
+            button
+            class="w-fit!"
+          >
+            Träger erfassen
+          </RouterLink>
+        </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 { useRespiratoryWearerStore } from "@/stores/admin/unit/respiratoryWearer/respiratoryWearer";
+import { useModalStore } from "@/stores/modal";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import type { RespiratoryWearerViewModel } from "@/viewmodels/admin/unit/respiratory/respiratoryWearer.models";
+import RespiratoryWearerListItem from "@/components/admin/unit/respiratoryWearer/RespiratoryWearerListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useRespiratoryWearerStore, ["respiratoryWearers", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchRespiratoryWearers(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useRespiratoryWearerStore, ["fetchRespiratoryWearers"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openCreateModal() {
+      this.openModal(
+        markRaw(
+          defineAsyncComponent(
+            () => import("@/components/admin/unit/respiratoryWearer/CreateRespiratoryWearerModal.vue")
+          )
+        )
+      );
+    },
+  },
+});
+</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..a72cbc8
--- /dev/null
+++ b/src/views/admin/unit/respiratoryWearer/RespiratoryWearerRouting.vue
@@ -0,0 +1,77 @@
+<template>
+  <MainTemplate>
+    <template #headerInsert>
+      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+    </template>
+    <template #topBar>
+      <h1 class="font-bold text-xl h-8 min-h-fit grow">
+        AGT-Träger: {{ activeRespiratoryWearerObj?.member.lastname }},
+        {{ activeRespiratoryWearerObj?.member.firstname }}
+      </h1>
+    </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-hidden',
+                  isActive ? 'bg-red-200 shadow-sm 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 { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { RouterLink, RouterView } from "vue-router";
+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-mission", title: "Einsätze" },
+        { route: "admin-unit-respiratory_wearer-education", title: "Bildungen" },
+        { route: "admin-unit-respiratory_wearer-instruction", title: "Unterweisungen" },
+        { route: "admin-unit-respiratory_wearer-screening", title: "Untersuchungen" },
+        { route: "admin-unit-respiratory_wearer-strain", title: "Belastungen" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useRespiratoryWearerStore, ["activeRespiratoryWearerObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchRespiratoryWearerByActiveId();
+  },
+  methods: {
+    ...mapActions(useRespiratoryWearerStore, ["fetchRespiratoryWearerByActiveId"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/vehicle/CreateVehicle.vue b/src/views/admin/unit/vehicle/CreateVehicle.vue
new file mode 100644
index 0000000..b3e9581
--- /dev/null
+++ b/src/views/admin/unit/vehicle/CreateVehicle.vue
@@ -0,0 +1,104 @@
+<template>
+  <MainTemplate title="Fahrzeug erfassen">
+    <template #diffMain>
+      <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+        <form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerCreate">
+          <VehicleTypeSearchSelect title="Typ" v-model="selectedType" />
+          <div>
+            <label for="name">Bezeichnung</label>
+            <input type="text" id="name" required />
+          </div>
+          <ScanInput name="code" label="Code" :required="false" />
+          <div>
+            <label for="commissioned">In-Betrieb-Nahme</label>
+            <input type="date" id="commissioned" required />
+          </div>
+          <div>
+            <label for="location">Verortung (optional)</label>
+            <input type="text" id="location" />
+          </div>
+          <div class="flex flex-row justify-end gap-2">
+            <RouterLink
+              :to="{ name: 'admin-unit-vehicle' }"
+              primary-outline
+              button
+              class="w-fit!"
+              :disabled="status == 'loading' || status?.status == 'success'"
+            >
+              abbrechen
+            </RouterLink>
+            <button primary type="submit" class="w-fit!" :disabled="status == 'loading'">speichern</button>
+            <Spinner v-if="status == 'loading'" class="my-auto" />
+            <SuccessCheckmark v-else-if="status?.status == 'success'" />
+            <FailureXMark v-else-if="status?.status == 'failed'" />
+          </div>
+        </form>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useVehicleStore } from "@/stores/admin/unit/vehicle/vehicle";
+import type { CreateVehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
+import VehicleTypeSearchSelect from "@/components/search/VehicleTypeSearchSelect.vue";
+import ScanInput from "@/components/scanner/ScanInput.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: null as any,
+      selectedType: "" as string,
+    };
+  },
+  computed: {
+    ...mapState(useVehicleTypeStore, ["vehicleTypes"]),
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useVehicleStore, ["createVehicle"]),
+    triggerCreate(e: any) {
+      if (this.selectedType == null) return;
+      let formData = e.target.elements;
+      let createVehicle: CreateVehicleViewModel = {
+        name: formData.name.value,
+        code: formData.code.value || null,
+        location: formData.location.value,
+        vehicleTypeId: this.selectedType,
+        commissioned: formData.commissioned.value,
+      };
+      this.status = "loading";
+      this.createVehicle(createVehicle)
+        .then((res) => {
+          this.status = { status: "success" };
+
+          this.timeout = setTimeout(() => {
+            this.$router.push({
+              name: "admin-unit-vehicle-overview",
+              params: {
+                vehicleId: res.data,
+              },
+            });
+          }, 1500);
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/vehicle/DamageReport.vue b/src/views/admin/unit/vehicle/DamageReport.vue
new file mode 100644
index 0000000..9a8b18a
--- /dev/null
+++ b/src/views/admin/unit/vehicle/DamageReport.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full">
+    <Pagination
+      :items="damageReports"
+      :totalCount="totalCount"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchDamageReportForVehicle(offset, count, search)"
+    >
+      <template #pageRow="{ row }: { row: DamageReportViewModel }">
+        <RouterLink
+          :to="{ name: 'admin-unit-damage_report-overview', params: { damageReportId: row.id } }"
+          :disabled="!can('read', 'unit', 'damage_report')"
+          class="flex flex-col h-fit w-full border border-primary rounded-md"
+        >
+          <div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
+            <PencilSquareIcon v-if="row.closedAt == undefined" class="w-5 h-5" />
+            <p class="grow">{{ row.title }} - {{ new Date(row.reportedAt).toLocaleString("de") }} - {{ row.status }}</p>
+            <div class="flex flex-row gap-2">
+              <div v-if="row.images.length != 0" class="cursor-pointer">
+                <PhotoIcon class="w-5 h-5" />
+              </div>
+              <div v-if="row.location" class="cursor-pointer">
+                <MapPinIcon class="w-5 h-5" />
+              </div>
+              <div v-if="row.reportedBy" class="cursor-pointer">
+                <UserIcon class="w-5 h-5" />
+              </div>
+              <div v-if="row.repair" class="cursor-pointer">
+                <WrenchScrewdriverIcon class="w-5 h-5" />
+              </div>
+            </div>
+          </div>
+          <div class="p-2">
+            <p>Beschreibung: {{ row.description }}</p>
+          </div>
+        </RouterLink>
+      </template>
+    </Pagination>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useVehicleDamageReportStore } from "@/stores/admin/unit/vehicle/damageReport";
+import Pagination from "@/components/Pagination.vue";
+import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
+import { PhotoIcon, PencilSquareIcon, MapPinIcon, WrenchScrewdriverIcon, UserIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    vehicleId: String,
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useVehicleDamageReportStore, ["damageReports", "loading", "totalCount"]),
+  },
+  mounted() {
+    this.fetchDamageReportForVehicle(0, 25, "", true);
+  },
+  methods: {
+    ...mapActions(useVehicleDamageReportStore, ["fetchDamageReportForVehicle"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/vehicle/Inspection.vue b/src/views/admin/unit/vehicle/Inspection.vue
new file mode 100644
index 0000000..1f94f37
--- /dev/null
+++ b/src/views/admin/unit/vehicle/Inspection.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full">
+    <Pagination
+      :items="inspections"
+      :totalCount="totalCount"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchInspectionForVehicle(offset, count, search)"
+    >
+      <template #pageRow="{ row }: { row: InspectionViewModel }">
+        <RouterLink
+          :to="{ name: 'admin-unit-inspection-execute', params: { inspectionId: row.id } }"
+          :disabled="!can('read', 'unit', 'inspection')"
+          class="flex flex-col h-fit w-full border border-primary rounded-md"
+        >
+          <div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
+            <PencilSquareIcon v-if="row.isOpen" class="w-5 h-5" />
+            <p>{{ row.inspectionPlan.title }} - {{ row.finishedAt ?? "in Arbeit" }}</p>
+          </div>
+          <div v-if="row.context || row.nextInspection" class="p-2">
+            <p v-if="row.context">Kontext: {{ row.context }}</p>
+            <p v-if="row.nextInspection">nächste Inspektion: {{ row.nextInspection }}</p>
+          </div>
+        </RouterLink>
+      </template>
+    </Pagination>
+    <div class="flex flex-row gap-4">
+      <RouterLink
+        :to="{ name: 'admin-unit-inspection-start', params: { type: 'vehicle', relatedId: vehicleId } }"
+        :disabled="!can('read', 'unit', 'damage_report')"
+        button
+        primary
+        class="w-fit!"
+      >
+        Prüfung durchführen
+      </RouterLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useVehicleInspectionStore } from "@/stores/admin/unit/vehicle/inspection";
+import { PencilSquareIcon } from "@heroicons/vue/24/outline";
+import Pagination from "@/components/Pagination.vue";
+import type { InspectionViewModel } from "@/viewmodels/admin/unit/inspection/inspection.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    vehicleId: String,
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useVehicleInspectionStore, ["inspections", "loading", "totalCount"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  methods: {
+    ...mapActions(useVehicleInspectionStore, ["fetchInspectionForVehicle"]),
+    fetchItem() {
+      this.fetchInspectionForVehicle(0, 25, "", true);
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/vehicle/Overview.vue b/src/views/admin/unit/vehicle/Overview.vue
new file mode 100644
index 0000000..3dbc194
--- /dev/null
+++ b/src/views/admin/unit/vehicle/Overview.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="activeVehicleObj != null" class="flex flex-col gap-2 w-full">
+      <div>
+        <label for="type">Typ</label>
+        <input type="text" id="type" :value="activeVehicleObj.vehicleType.type" readonly />
+      </div>
+      <div>
+        <label for="name">Bezeichnung</label>
+        <input type="text" id="name" :value="activeVehicleObj.name" readonly />
+      </div>
+      <div>
+        <label for="code">Code</label>
+        <input type="text" id="code" :value="activeVehicleObj.code" readonly />
+      </div>
+      <div>
+        <label for="location">Verortung</label>
+        <input type="text" id="location" :value="activeVehicleObj.location" readonly />
+      </div>
+      <div>
+        <label for="commissioned">In-Betrieb-Nahme</label>
+        <input type="date" id="commissioned" :value="activeVehicleObj.commissioned" readonly />
+      </div>
+      <div>
+        <label for="decommissioned">Außer-Betrieb-Nahme</label>
+        <input type="date" id="decommissioned" :value="activeVehicleObj.decommissioned" readonly />
+      </div>
+    </div>
+
+    <Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
+    <p v-else-if="loadingActive == 'failed'" @click="fetchVehicleByActiveId" class="cursor-pointer">
+      &#8634; laden fehlgeschlagen
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import Spinner from "@/components/Spinner.vue";
+import { useVehicleStore } from "@/stores/admin/unit/vehicle/vehicle";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    vehicleId: String,
+  },
+  computed: {
+    ...mapState(useVehicleStore, ["activeVehicleObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchVehicleByActiveId();
+  },
+  methods: {
+    ...mapActions(useVehicleStore, ["fetchVehicleByActiveId"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/vehicle/Repair.vue b/src/views/admin/unit/vehicle/Repair.vue
new file mode 100644
index 0000000..330ae96
--- /dev/null
+++ b/src/views/admin/unit/vehicle/Repair.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full">
+    <Pagination
+      :items="repairs"
+      :totalCount="totalCount"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchRepairForVehicle(offset, count, search)"
+    >
+      <template #pageRow="{ row }: { row: RepairViewModel }">
+        <RouterLink
+          :to="{ name: 'admin-unit-repair-overview', params: { repairId: row.id } }"
+          :disabled="!can('read', 'unit', 'repair')"
+          class="flex flex-col h-fit w-full border border-primary rounded-md"
+        >
+          <div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
+            <PencilSquareIcon v-if="row.finishedAt == null" class="w-5 h-5" />
+            <p class="grow">{{ new Date(row.createdAt).toLocaleString("de") }} - {{ row.status }}</p>
+          </div>
+          <div class="p-2">
+            <p>Beschreibung: {{ row.description }}</p>
+          </div>
+        </RouterLink>
+      </template>
+    </Pagination>
+    <RouterLink
+      :to="{ name: 'admin-unit-repair-create', params: { type: 'vehicle', relatedId: vehicleId } }"
+      :disabled="!can('read', 'unit', 'repair')"
+      button
+      primary
+      class="w-fit!"
+    >
+      Reparatur erstellen
+    </RouterLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useVehicleRepairStore } from "@/stores/admin/unit/vehicle/repair";
+import Pagination from "@/components/Pagination.vue";
+import type { RepairViewModel } from "@/viewmodels/admin/unit/repair.models";
+import { PhotoIcon, PencilSquareIcon, MapPinIcon, WrenchScrewdriverIcon, UserIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    vehicleId: String,
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useVehicleRepairStore, ["repairs", "loading", "totalCount"]),
+  },
+  mounted() {
+    this.fetchRepairForVehicle(0, 25, "", true);
+  },
+  methods: {
+    ...mapActions(useVehicleRepairStore, ["fetchRepairForVehicle"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/vehicle/UpdateVehicle.vue b/src/views/admin/unit/vehicle/UpdateVehicle.vue
new file mode 100644
index 0000000..bd0aeba
--- /dev/null
+++ b/src/views/admin/unit/vehicle/UpdateVehicle.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <Spinner v-if="loading == 'loading'" class="mx-auto" />
+    <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
+    <form
+      v-else-if="vehicle != null"
+      class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
+      @submit.prevent="triggerUpdate"
+    >
+      <p class="mx-auto">Fahrzeug bearbeiten</p>
+      <div>
+        <label for="name">Bezeichnung</label>
+        <input type="text" id="name" required v-model="vehicle.name" />
+      </div>
+      <ScanInput name="code" label="Code" :required="false" />
+      <div>
+        <label for="location">Verortung (optional)</label>
+        <input type="text" id="location" />
+      </div>
+      <div>
+        <label for="commissioned">In-Betrieb-Nahme</label>
+        <input type="date" id="commissioned" required v-model="vehicle.commissioned" />
+      </div>
+      <div>
+        <label for="decommissioned">Außer-Betrieb-Nahme (optional)</label>
+        <input type="date" id="decommissioned" v-model="vehicle.decommissioned" />
+      </div>
+      <div class="flex flex-row justify-end gap-2">
+        <RouterLink
+          :to="{ name: 'admin-unit-vehicle' }"
+          primary-outline
+          button
+          class="w-fit!"
+          :disabled="status == 'loading' || status?.status == 'success'"
+        >
+          abbrechen
+        </RouterLink>
+        <button primary type="submit" class="w-fit!" :disabled="status == 'loading'">speichern</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useVehicleStore } from "@/stores/admin/unit/vehicle/vehicle";
+import type { UpdateVehicleViewModel, VehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import ScanInput from "@/components/scanner/ScanInput.vue";
+import isEqual from "lodash.isequal";
+import cloneDeep from "lodash.clonedeep";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    vehicleId: String,
+  },
+  watch: {
+    loadingActive() {
+      if (this.loading == "loading") {
+        this.loading = this.loadingActive;
+      }
+      if (this.loadingActive == "fetched") this.vehicle = cloneDeep(this.activeVehicleObj);
+    },
+  },
+  data() {
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      vehicle: null as null | VehicleViewModel,
+      timeout: null as any,
+    };
+  },
+  computed: {
+    canSaveOrReset(): boolean {
+      return isEqual(this.activeVehicleObj, this.vehicle);
+    },
+    ...mapState(useVehicleStore, ["activeVehicleObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useVehicleStore, ["updateActiveVehicle", "fetchVehicleByActiveId"]),
+    resetForm() {
+      this.vehicle = cloneDeep(this.activeVehicleObj);
+    },
+    fetchItem() {
+      this.fetchVehicleByActiveId();
+    },
+    triggerUpdate(e: any) {
+      if (this.vehicle == null) return;
+      let formData = e.target.elements;
+      let updateVehicle: UpdateVehicleViewModel = {
+        id: this.vehicle.id,
+        name: formData.name.value,
+        code: formData.code.value || null,
+        location: formData.location.value,
+        commissioned: formData.commissioned.value,
+        decommissioned: formData.decommissioned.value ?? null,
+      };
+      this.status = "loading";
+      this.updateActiveVehicle(updateVehicle)
+        .then((res) => {
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/vehicle/Vehicle.vue b/src/views/admin/unit/vehicle/Vehicle.vue
new file mode 100644
index 0000000..4861759
--- /dev/null
+++ b/src/views/admin/unit/vehicle/Vehicle.vue
@@ -0,0 +1,65 @@
+<template>
+  <MainTemplate title="Fahrzeuge">
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+        <Pagination
+          :items="vehicles"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          useSearch
+          useScanner
+          @load-data="(offset, count, search) => fetchVehicles(offset, count, search)"
+          @search="(search) => fetchVehicles(0, maxEntriesPerPage, search, true)"
+        >
+          <template #pageRow="{ row }: { row: VehicleViewModel }">
+            <VehicleListItem :vehicle="row" />
+          </template>
+        </Pagination>
+
+        <div class="flex flex-row gap-4">
+          <RouterLink
+            v-if="can('create', 'unit', 'vehicle')"
+            :to="{ name: 'admin-unit-vehicle-create' }"
+            primary
+            button
+            class="w-fit!"
+          >
+            Fahrzeug erfassen
+          </RouterLink>
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useVehicleStore } from "@/stores/admin/unit/vehicle/vehicle";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import type { VehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
+import VehicleListItem from "@/components/admin/unit/vehicle/VehicleListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useVehicleStore, ["vehicles", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchVehicles(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useVehicleStore, ["fetchVehicles"]),
+  },
+});
+</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..5a99b35
--- /dev/null
+++ b/src/views/admin/unit/vehicle/VehicleRouting.vue
@@ -0,0 +1,76 @@
+<template>
+  <MainTemplate :title="activeVehicleObj?.name">
+    <template #headerInsert>
+      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+    </template>
+    <template #topBar>
+      <RouterLink v-if="can('update', 'unit', 'vehicle')" :to="{ name: 'admin-unit-vehicle-edit' }">
+        <PencilIcon class="w-5 h-5" />
+      </RouterLink>
+    </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-hidden',
+                  isActive ? 'bg-red-200 shadow-sm 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 { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { RouterLink, RouterView } from "vue-router";
+import { PencilIcon } from "@heroicons/vue/24/outline";
+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-inspection", title: "Prüfungen" },
+        // { route: "admin-unit-vehicle-maintenance", title: "Wartungen" },
+        { route: "admin-unit-vehicle-damage_report", title: "Schadensmeldungen" },
+        { route: "admin-unit-vehicle-repair", title: "Reparaturen" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useVehicleStore, ["activeVehicleObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchVehicleByActiveId();
+  },
+  methods: {
+    ...mapActions(useVehicleStore, ["fetchVehicleByActiveId"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/vehicleType/InspectionPlans.vue b/src/views/admin/unit/vehicleType/InspectionPlans.vue
new file mode 100644
index 0000000..c0e3de1
--- /dev/null
+++ b/src/views/admin/unit/vehicleType/InspectionPlans.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="inspectionPlans != null" class="flex flex-col gap-2 w-full">
+      <TypeInspectionPlanListItem v-for="plan in inspectionPlans" :inspection-plan="plan" />
+    </div>
+    <Spinner v-if="loading == 'loading'" class="mx-auto" />
+    <p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">&#8634; laden fehlgeschlagen</p>
+  </div>
+
+  <div class="flex flex-row gap-4">
+    <RouterLink
+      :to="{ name: 'admin-unit-inspection_plan-create', query: { type: 'vehicle', id: vehicleTypeId } }"
+      :disabled="!can('read', 'unit', 'inspection_plan')"
+      button
+      primary
+      class="w-fit!"
+    >
+      Prüfplan erstellen
+    </RouterLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useVehicleTypeInspectionPlanStore } from "@/stores/admin/unit/vehicleType/inspectionPlan";
+import TypeInspectionPlanListItem from "@/components/admin/unit/inspectionPlan/TypeInspectionPlanListItem.vue";
+import Spinner from "@/components/Spinner.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    vehicleTypeId: String,
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useVehicleTypeInspectionPlanStore, ["inspectionPlans", "loading"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  methods: {
+    ...mapActions(useVehicleTypeInspectionPlanStore, ["fetchInspectionPlanForVehicleType"]),
+    fetchItem() {
+      this.fetchInspectionPlanForVehicleType();
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/vehicleType/Overview.vue b/src/views/admin/unit/vehicleType/Overview.vue
new file mode 100644
index 0000000..d975f89
--- /dev/null
+++ b/src/views/admin/unit/vehicleType/Overview.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="activeVehicleTypeObj != null" class="flex flex-col gap-2 w-full">
+      <div>
+        <label for="type">Typ</label>
+        <input type="text" id="type" :value="activeVehicleTypeObj.type" readonly />
+      </div>
+      <div>
+        <label for="description">Beschreibung</label>
+        <textarea id="description" :value="activeVehicleTypeObj.description" class="h-18" readonly></textarea>
+      </div>
+    </div>
+
+    <Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
+    <p v-else-if="loadingActive == 'failed'" @click="fetchVehicleTypeByActiveId" class="cursor-pointer">
+      &#8634; laden fehlgeschlagen
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import Spinner from "@/components/Spinner.vue";
+import { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    vehicleTypeId: String,
+  },
+  computed: {
+    ...mapState(useVehicleTypeStore, ["activeVehicleTypeObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchVehicleTypeByActiveId();
+  },
+  methods: {
+    ...mapActions(useVehicleTypeStore, ["fetchVehicleTypeByActiveId"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/vehicleType/UpdateVehicleType.vue b/src/views/admin/unit/vehicleType/UpdateVehicleType.vue
new file mode 100644
index 0000000..0878435
--- /dev/null
+++ b/src/views/admin/unit/vehicleType/UpdateVehicleType.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <Spinner v-if="loading == 'loading'" class="mx-auto" />
+    <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
+    <form
+      v-else-if="vehicleType != null"
+      class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
+      @submit.prevent="triggerUpdate"
+    >
+      <p class="mx-auto">Fahrzeug-Typ bearbeiten</p>
+      <div>
+        <label for="type">Typ</label>
+        <input type="text" id="type" required v-model="vehicleType.type" />
+      </div>
+      <div>
+        <label for="description">Beschreibung</label>
+        <input type="text" id="description" v-model="vehicleType.description" />
+      </div>
+      <div class="flex flex-row justify-end gap-2">
+        <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
+          abbrechen
+        </button>
+        <button primary type="submit" class="w-fit!" :disabled="status == 'loading'">speichern</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
+import type {
+  CreateVehicleTypeViewModel,
+  VehicleTypeViewModel,
+  UpdateVehicleTypeViewModel,
+} from "@/viewmodels/admin/unit/vehicle/vehicleType.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import isEqual from "lodash.isequal";
+import cloneDeep from "lodash.clonedeep";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    vehicleTypeId: String,
+  },
+  watch: {
+    loadingActive() {
+      if (this.loading == "loading") {
+        this.loading = this.loadingActive;
+      }
+      if (this.loadingActive == "fetched") this.vehicleType = cloneDeep(this.activeVehicleTypeObj);
+    },
+  },
+  data() {
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      vehicleType: null as null | VehicleTypeViewModel,
+      timeout: null as any,
+    };
+  },
+  computed: {
+    canSaveOrReset(): boolean {
+      return isEqual(this.activeVehicleTypeObj, this.vehicleType);
+    },
+    ...mapState(useVehicleTypeStore, ["activeVehicleTypeObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useVehicleTypeStore, ["updateActiveVehicleType", "fetchVehicleTypeByActiveId"]),
+    resetForm() {
+      this.vehicleType = cloneDeep(this.activeVehicleTypeObj);
+    },
+    fetchItem() {
+      this.fetchVehicleTypeByActiveId();
+    },
+    triggerUpdate(e: any) {
+      if (this.vehicleType == null) return;
+      let formData = e.target.elements;
+      let updateVehicleType: UpdateVehicleTypeViewModel = {
+        id: this.vehicleType.id,
+        type: formData.type.value,
+        description: formData.description.value,
+      };
+      this.status = "loading";
+      this.updateActiveVehicleType(updateVehicleType)
+        .then((res) => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/vehicleType/VehicleType.vue b/src/views/admin/unit/vehicleType/VehicleType.vue
new file mode 100644
index 0000000..48aca02
--- /dev/null
+++ b/src/views/admin/unit/vehicleType/VehicleType.vue
@@ -0,0 +1,65 @@
+<template>
+  <MainTemplate title="Geräte-Typen">
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+        <Pagination
+          :items="vehicleTypes"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          useSearch
+          @load-data="(offset, count, search) => fetchVehicleTypes(offset, count, search)"
+          @search="(search) => fetchVehicleTypes(0, maxEntriesPerPage, search, true)"
+        >
+          <template #pageRow="{ row }: { row: VehicleTypeViewModel }">
+            <VehicleTypeListItem :vehicleType="row" />
+          </template>
+        </Pagination>
+
+        <div class="flex flex-row gap-4">
+          <button v-if="can('create', 'unit', 'vehicle_type')" primary class="w-fit!" @click="openCreateModal">
+            Fahrzeug-Typ erstellen
+          </button>
+        </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 { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
+import { useModalStore } from "@/stores/modal";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import type { VehicleTypeViewModel } from "@/viewmodels/admin/unit/vehicle/vehicleType.models";
+import VehicleTypeListItem from "@/components/admin/unit/vehicleType/VehicleTypeListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useVehicleTypeStore, ["vehicleTypes", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchVehicleTypes(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useVehicleTypeStore, ["fetchVehicleTypes"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openCreateModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/unit/vehicleType/CreateVehicleTypeModal.vue")))
+      );
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/vehicleType/VehicleTypeRouting.vue b/src/views/admin/unit/vehicleType/VehicleTypeRouting.vue
new file mode 100644
index 0000000..c4e0321
--- /dev/null
+++ b/src/views/admin/unit/vehicleType/VehicleTypeRouting.vue
@@ -0,0 +1,88 @@
+<template>
+  <MainTemplate :title="activeVehicleTypeObj?.type">
+    <template #headerInsert>
+      <RouterLink :to="{ name: 'admin-unit-vehicle_type' }" class="text-primary">zurück zur Liste</RouterLink>
+    </template>
+    <template #topBar>
+      <div class="flex flex-row gap-2">
+        <RouterLink v-if="can('update', 'unit', 'vehicle_type')" :to="{ name: 'admin-unit-vehicle_type-edit' }">
+          <PencilIcon class="w-5 h-5" />
+        </RouterLink>
+        <TrashIcon
+          v-if="can('delete', 'unit', 'vehicle_type') && activeVehicleTypeObj?.vehicleCount == 0"
+          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-hidden',
+                  isActive ? 'bg-red-200 shadow-sm 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 { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    vehicleTypeId: String,
+  },
+  data() {
+    return {
+      tabs: [
+        { route: "admin-unit-vehicle_type-overview", title: "Übersicht" },
+        { route: "admin-unit-vehicle_type-inspection_plan", title: "Prüfpläne" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useVehicleTypeStore, ["activeVehicleTypeObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchVehicleTypeByActiveId();
+  },
+  methods: {
+    ...mapActions(useVehicleTypeStore, ["fetchVehicleTypeByActiveId"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openDeleteModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/unit/vehicleType/DeleteVehicleTypeModal.vue"))),
+        this.vehicleTypeId ?? ""
+      );
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/wearable/CreateWearable.vue b/src/views/admin/unit/wearable/CreateWearable.vue
new file mode 100644
index 0000000..c04c8d2
--- /dev/null
+++ b/src/views/admin/unit/wearable/CreateWearable.vue
@@ -0,0 +1,109 @@
+<template>
+  <MainTemplate title="Kleidung erfassen">
+    <template #diffMain>
+      <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+        <form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerCreate">
+          <WearableTypeSearchSelect title="Typ" v-model="selectedType" />
+          <div>
+            <label for="name">Bezeichnung</label>
+            <input type="text" id="name" required />
+          </div>
+          <ScanInput name="code" label="Code" :required="false" />
+          <div>
+            <label for="commissioned">In-Betrieb-Nahme</label>
+            <input type="date" id="commissioned" required />
+          </div>
+          <div>
+            <label for="location">Verortung (optional)</label>
+            <input type="text" id="location" />
+          </div>
+          <MemberSearchSelectSingle title="Träger (optional)" v-model="wearer" />
+          <div class="flex flex-row justify-end gap-2">
+            <RouterLink
+              :to="{ name: 'admin-unit-wearable' }"
+              primary-outline
+              button
+              class="w-fit!"
+              :disabled="status == 'loading' || status?.status == 'success'"
+            >
+              abbrechen
+            </RouterLink>
+            <button primary type="submit" class="w-fit!" :disabled="status == 'loading'">speichern</button>
+            <Spinner v-if="status == 'loading'" class="my-auto" />
+            <SuccessCheckmark v-else-if="status?.status == 'success'" />
+            <FailureXMark v-else-if="status?.status == 'failed'" />
+          </div>
+        </form>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
+import type { CreateWearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
+import ScanInput from "@/components/scanner/ScanInput.vue";
+import MemberSearchSelectSingle from "@/components/search/MemberSearchSelectSingle.vue";
+import WearableTypeSearchSelect from "@/components/search/WearableTypeSearchSelect.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: null as any,
+      selectedType: "" as string,
+      wearer: "" as string,
+    };
+  },
+  computed: {
+    ...mapState(useWearableTypeStore, ["wearableTypes"]),
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useWearableStore, ["createWearable"]),
+    ...mapActions(useWearableTypeStore, ["searchWearableTypes"]),
+    triggerCreate(e: any) {
+      if (this.selectedType == null) return;
+      let formData = e.target.elements;
+      let createWearable: CreateWearableViewModel = {
+        code: formData.code.value || null,
+        name: formData.name.value,
+        location: formData.location.value,
+        wearerId: this.wearer,
+        wearableTypeId: this.selectedType,
+        commissioned: formData.commissioned.value,
+      };
+      this.status = "loading";
+      this.createWearable(createWearable)
+        .then((res) => {
+          this.status = { status: "success" };
+
+          this.timeout = setTimeout(() => {
+            this.$router.push({
+              name: "admin-unit-wearable-overview",
+              params: {
+                wearableId: res.data,
+              },
+            });
+          }, 1500);
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/wearable/DamageReport.vue b/src/views/admin/unit/wearable/DamageReport.vue
new file mode 100644
index 0000000..7ee53af
--- /dev/null
+++ b/src/views/admin/unit/wearable/DamageReport.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full">
+    <Pagination
+      :items="damageReports"
+      :totalCount="totalCount"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchDamageReportForWearable(offset, count, search)"
+    >
+      <template #pageRow="{ row }: { row: DamageReportViewModel }">
+        <RouterLink
+          :to="{ name: 'admin-unit-damage_report-overview', params: { damageReportId: row.id } }"
+          :disabled="!can('read', 'unit', 'damage_report')"
+          class="flex flex-col h-fit w-full border border-primary rounded-md"
+        >
+          <div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
+            <PencilSquareIcon v-if="row.closedAt == undefined" class="w-5 h-5" />
+            <p class="grow">{{ row.title }} - {{ new Date(row.reportedAt).toLocaleString("de") }} - {{ row.status }}</p>
+            <div class="flex flex-row gap-2">
+              <div v-if="row.images.length != 0" class="cursor-pointer">
+                <PhotoIcon class="w-5 h-5" />
+              </div>
+              <div v-if="row.location" class="cursor-pointer">
+                <MapPinIcon class="w-5 h-5" />
+              </div>
+              <div v-if="row.reportedBy" class="cursor-pointer">
+                <UserIcon class="w-5 h-5" />
+              </div>
+              <div v-if="row.repair" class="cursor-pointer">
+                <WrenchScrewdriverIcon class="w-5 h-5" />
+              </div>
+            </div>
+          </div>
+          <div class="p-2">
+            <p>Beschreibung: {{ row.description }}</p>
+          </div>
+        </RouterLink>
+      </template>
+    </Pagination>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useWearableDamageReportStore } from "@/stores/admin/unit/wearable/damageReport";
+import Pagination from "@/components/Pagination.vue";
+import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
+import { PhotoIcon, PencilSquareIcon, MapPinIcon, WrenchScrewdriverIcon, UserIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    wearableId: String,
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useWearableDamageReportStore, ["damageReports", "loading", "totalCount"]),
+  },
+  mounted() {
+    this.fetchDamageReportForWearable(0, 25, "", true);
+  },
+  methods: {
+    ...mapActions(useWearableDamageReportStore, ["fetchDamageReportForWearable"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/wearable/Inspection.vue b/src/views/admin/unit/wearable/Inspection.vue
new file mode 100644
index 0000000..3b4277a
--- /dev/null
+++ b/src/views/admin/unit/wearable/Inspection.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full">
+    <Pagination
+      :items="inspections"
+      :totalCount="totalCount"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchInspectionForWearable(offset, count, search)"
+    >
+      <template #pageRow="{ row }: { row: InspectionViewModel }">
+        <RouterLink
+          :to="{ name: 'admin-unit-inspection-execute', params: { inspectionId: row.id } }"
+          :disabled="!can('read', 'unit', 'inspection')"
+          class="flex flex-col h-fit w-full border border-primary rounded-md"
+        >
+          <div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
+            <PencilSquareIcon v-if="row.isOpen" class="w-5 h-5" />
+            <p>{{ row.inspectionPlan.title }} - {{ row.finishedAt ?? "in Arbeit" }}</p>
+          </div>
+          <div v-if="row.context || row.nextInspection" class="p-2">
+            <p v-if="row.context">Kontext: {{ row.context }}</p>
+            <p v-if="row.nextInspection">nächste Inspektion: {{ row.nextInspection }}</p>
+          </div>
+        </RouterLink>
+      </template>
+    </Pagination>
+    <div class="flex flex-row gap-4">
+      <RouterLink
+        :to="{ name: 'admin-unit-inspection-start', params: { type: 'wearable', relatedId: wearableId } }"
+        :disabled="!can('create', 'unit', 'inspection')"
+        button
+        primary
+        class="w-fit!"
+      >
+        Prüfung durchführen
+      </RouterLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useWearableInspectionStore } from "@/stores/admin/unit/wearable/inspection";
+import { PencilSquareIcon } from "@heroicons/vue/24/outline";
+import Pagination from "@/components/Pagination.vue";
+import type { InspectionViewModel } from "@/viewmodels/admin/unit/inspection/inspection.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    wearableId: String,
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useWearableInspectionStore, ["inspections", "loading", "totalCount"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  methods: {
+    ...mapActions(useWearableInspectionStore, ["fetchInspectionForWearable"]),
+    fetchItem() {
+      this.fetchInspectionForWearable(0, 25, "", true);
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/wearable/Overview.vue b/src/views/admin/unit/wearable/Overview.vue
new file mode 100644
index 0000000..656f456
--- /dev/null
+++ b/src/views/admin/unit/wearable/Overview.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="activeWearableObj != null" class="flex flex-col gap-2 w-full">
+      <div>
+        <label for="type">Typ</label>
+        <input type="text" id="type" :value="activeWearableObj.wearableType.type" readonly />
+      </div>
+      <div>
+        <label for="name">Bezeichnung</label>
+        <input type="text" id="name" :value="activeWearableObj.name" readonly />
+      </div>
+      <div>
+        <label for="code">Code</label>
+        <input type="text" id="code" :value="activeWearableObj.code" readonly />
+      </div>
+      <div>
+        <label for="location">Verortung</label>
+        <input type="text" id="location" :value="activeWearableObj.location" readonly />
+      </div>
+      <div>
+        <label for="commissioned">In-Betrieb-Nahme</label>
+        <input type="date" id="commissioned" :value="activeWearableObj.commissioned" readonly />
+      </div>
+      <div>
+        <label for="decommissioned">Außer-Betrieb-Nahme</label>
+        <input type="date" id="decommissioned" :value="activeWearableObj.decommissioned" readonly />
+      </div>
+      <div>
+        <label for="wearer">Träger</label>
+        <input
+          type="text"
+          id="wearer"
+          :value="(activeWearableObj.wearer?.firstname ?? '') + ' ' + (activeWearableObj.wearer?.lastname ?? '')"
+          readonly
+        />
+      </div>
+    </div>
+
+    <Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
+    <p v-else-if="loadingActive == 'failed'" @click="fetchWearableByActiveId" class="cursor-pointer">
+      &#8634; laden fehlgeschlagen
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import Spinner from "@/components/Spinner.vue";
+import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    wearableId: String,
+  },
+  computed: {
+    ...mapState(useWearableStore, ["activeWearableObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchWearableByActiveId();
+  },
+  methods: {
+    ...mapActions(useWearableStore, ["fetchWearableByActiveId"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/wearable/Repair.vue b/src/views/admin/unit/wearable/Repair.vue
new file mode 100644
index 0000000..7bc1f3c
--- /dev/null
+++ b/src/views/admin/unit/wearable/Repair.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full">
+    <Pagination
+      :items="repairs"
+      :totalCount="totalCount"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchRepairForWearable(offset, count, search)"
+    >
+      <template #pageRow="{ row }: { row: RepairViewModel }">
+        <RouterLink
+          :to="{ name: 'admin-unit-repair-overview', params: { repairId: row.id } }"
+          :disabled="!can('read', 'unit', 'repair')"
+          class="flex flex-col h-fit w-full border border-primary rounded-md"
+        >
+          <div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
+            <PencilSquareIcon v-if="row.finishedAt == null" class="w-5 h-5" />
+            <p class="grow">{{ new Date(row.createdAt).toLocaleString("de") }} - {{ row.status }}</p>
+          </div>
+          <div class="p-2">
+            <p>Beschreibung: {{ row.description }}</p>
+          </div>
+        </RouterLink>
+      </template>
+    </Pagination>
+    <RouterLink
+      :to="{ name: 'admin-unit-repair-create', params: { type: 'wearable', relatedId: wearableId } }"
+      :disabled="!can('read', 'unit', 'repair')"
+      button
+      primary
+      class="w-fit!"
+    >
+      Reparatur erstellen
+    </RouterLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useWearableRepairStore } from "@/stores/admin/unit/wearable/repair";
+import Pagination from "@/components/Pagination.vue";
+import type { RepairViewModel } from "@/viewmodels/admin/unit/repair.models";
+import { PhotoIcon, PencilSquareIcon, MapPinIcon, WrenchScrewdriverIcon, UserIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    wearableId: String,
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useWearableRepairStore, ["repairs", "loading", "totalCount"]),
+  },
+  mounted() {
+    this.fetchRepairForWearable(0, 25, "", true);
+  },
+  methods: {
+    ...mapActions(useWearableRepairStore, ["fetchRepairForWearable"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/wearable/UpdateWearable.vue b/src/views/admin/unit/wearable/UpdateWearable.vue
new file mode 100644
index 0000000..541c69f
--- /dev/null
+++ b/src/views/admin/unit/wearable/UpdateWearable.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <Spinner v-if="loading == 'loading'" class="mx-auto" />
+    <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
+    <form
+      v-else-if="wearable != null"
+      class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
+      @submit.prevent="triggerUpdate"
+    >
+      <p class="mx-auto">Kleidung bearbeiten</p>
+      <div>
+        <label for="name">Bezeichnung</label>
+        <input type="text" id="name" required v-model="wearable.name" />
+      </div>
+      <ScanInput name="code" label="Code" :required="false" v-model="wearable.code" />
+      <div>
+        <label for="location">Verortung (optional)</label>
+        <input type="text" id="location" v-model="wearable.location" />
+      </div>
+      <MemberSearchSelectSingle title="Träger (optional)" v-model="wearable.wearerId" />
+      <div>
+        <label for="commissioned">In-Betrieb-Nahme</label>
+        <input type="date" id="commissioned" required v-model="wearable.commissioned" />
+      </div>
+      <div>
+        <label for="decommissioned">Außer-Betrieb-Nahme (optional)</label>
+        <input type="date" id="decommissioned" v-model="wearable.decommissioned" />
+      </div>
+      <div class="flex flex-row justify-end gap-2">
+        <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
+          abbrechen
+        </button>
+        <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
+          speichern
+        </button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
+import type {
+  CreateWearableViewModel,
+  WearableViewModel,
+  UpdateWearableViewModel,
+} from "@/viewmodels/admin/unit/wearable/wearable.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import ScanInput from "@/components/scanner/ScanInput.vue";
+import isEqual from "lodash.isequal";
+import cloneDeep from "lodash.clonedeep";
+import MemberSearchSelectSingle from "@/components/search/MemberSearchSelectSingle.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    wearableId: String,
+  },
+  watch: {
+    loadingActive() {
+      if (this.loading == "loading") {
+        this.loading = this.loadingActive;
+      }
+      if (this.loadingActive == "fetched") this.wearable = cloneDeep(this.activeWearableObj);
+    },
+  },
+  data() {
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      wearable: null as null | WearableViewModel,
+      timeout: null as any,
+    };
+  },
+  computed: {
+    canSaveOrReset(): boolean {
+      return isEqual(this.activeWearableObj, this.wearable);
+    },
+    ...mapState(useWearableStore, ["activeWearableObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useWearableStore, ["updateActiveWearable", "fetchWearableByActiveId"]),
+    resetForm() {
+      this.wearable = cloneDeep(this.activeWearableObj);
+    },
+    fetchItem() {
+      this.fetchWearableByActiveId();
+    },
+    triggerUpdate(e: any) {
+      if (this.wearable == null) return;
+      let formData = e.target.elements;
+      let updateWearable: UpdateWearableViewModel = {
+        id: this.wearable.id,
+        code: formData.code.value || null,
+        name: formData.name.value,
+        location: formData.location.value,
+        commissioned: formData.commissioned.value,
+        decommissioned: formData.decommissioned.value || null,
+        wearerId: this.wearable.wearerId,
+      };
+      this.status = "loading";
+      this.updateActiveWearable(updateWearable)
+        .then((res) => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/wearable/Wearable.vue b/src/views/admin/unit/wearable/Wearable.vue
new file mode 100644
index 0000000..46dea73
--- /dev/null
+++ b/src/views/admin/unit/wearable/Wearable.vue
@@ -0,0 +1,65 @@
+<template>
+  <MainTemplate title="Kleidungen">
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+        <Pagination
+          :items="wearables"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          useSearch
+          useScanner
+          @load-data="(offset, count, search) => fetchWearables(offset, count, search)"
+          @search="(search) => fetchWearables(0, maxEntriesPerPage, search, true)"
+        >
+          <template #pageRow="{ row }: { row: WearableViewModel }">
+            <WearableListItem :wearable="row" />
+          </template>
+        </Pagination>
+
+        <div class="flex flex-row gap-4">
+          <RouterLink
+            v-if="can('create', 'unit', 'wearable')"
+            :to="{ name: 'admin-unit-wearable-create' }"
+            primary
+            button
+            class="w-fit!"
+          >
+            Kleidung erfassen
+          </RouterLink>
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import type { WearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
+import WearableListItem from "@/components/admin/unit/wearable/WearableListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useWearableStore, ["wearables", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchWearables(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useWearableStore, ["fetchWearables"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/wearable/WearableRouting.vue b/src/views/admin/unit/wearable/WearableRouting.vue
new file mode 100644
index 0000000..caa5fd9
--- /dev/null
+++ b/src/views/admin/unit/wearable/WearableRouting.vue
@@ -0,0 +1,76 @@
+<template>
+  <MainTemplate :title="activeWearableObj?.name">
+    <template #headerInsert>
+      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+    </template>
+    <template #topBar>
+      <RouterLink v-if="can('update', 'unit', 'wearable')" :to="{ name: 'admin-unit-wearable-edit' }">
+        <PencilIcon class="w-5 h-5" />
+      </RouterLink>
+    </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-hidden',
+                  isActive ? 'bg-red-200 shadow-sm 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 { defineComponent } 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 { useAbilityStore } from "@/stores/ability";
+import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    wearableId: String,
+  },
+  data() {
+    return {
+      tabs: [
+        { route: "admin-unit-wearable-overview", title: "Übersicht" },
+        { route: "admin-unit-wearable-inspection", title: "Prüfungen" },
+        // { route: "admin-unit-wearable-maintenance", title: "Wartungen" },
+        { route: "admin-unit-wearable-damage_report", title: "Schadensmeldungen" },
+        { route: "admin-unit-wearable-repair", title: "Reparaturen" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useWearableStore, ["activeWearableObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchWearableByActiveId();
+  },
+  methods: {
+    ...mapActions(useWearableStore, ["fetchWearableByActiveId"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/wearableType/InspectionPlans.vue b/src/views/admin/unit/wearableType/InspectionPlans.vue
new file mode 100644
index 0000000..86a2bbe
--- /dev/null
+++ b/src/views/admin/unit/wearableType/InspectionPlans.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="inspectionPlans != null" class="flex flex-col gap-2 w-full">
+      <TypeInspectionPlanListItem v-for="plan in inspectionPlans" :inspection-plan="plan" />
+    </div>
+    <Spinner v-if="loading == 'loading'" class="mx-auto" />
+    <p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">&#8634; laden fehlgeschlagen</p>
+  </div>
+
+  <div class="flex flex-row gap-4">
+    <RouterLink
+      :to="{ name: 'admin-unit-inspection_plan-create', query: { type: 'wearable', id: wearableTypeId } }"
+      :disabled="!can('read', 'unit', 'inspection_plan')"
+      button
+      primary
+      class="w-fit!"
+    >
+      Prüfplan erstellen
+    </RouterLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useWearableTypeInspectionPlanStore } from "@/stores/admin/unit/wearableType/inspectionPlan";
+import TypeInspectionPlanListItem from "@/components/admin/unit/inspectionPlan/TypeInspectionPlanListItem.vue";
+import Spinner from "@/components/Spinner.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    wearableTypeId: String,
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useWearableTypeInspectionPlanStore, ["inspectionPlans", "loading"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  methods: {
+    ...mapActions(useWearableTypeInspectionPlanStore, ["fetchInspectionPlanForWearableType"]),
+    fetchItem() {
+      this.fetchInspectionPlanForWearableType();
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/wearableType/Overview.vue b/src/views/admin/unit/wearableType/Overview.vue
new file mode 100644
index 0000000..5e0444e
--- /dev/null
+++ b/src/views/admin/unit/wearableType/Overview.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="activeWearableTypeObj != null" class="flex flex-col gap-2 w-full">
+      <div>
+        <label for="type">Typ</label>
+        <input type="text" id="type" :value="activeWearableTypeObj.type" readonly />
+      </div>
+      <div>
+        <label for="description">Beschreibung</label>
+        <textarea id="description" :value="activeWearableTypeObj.description" class="h-18" readonly></textarea>
+      </div>
+    </div>
+
+    <Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
+    <p v-else-if="loadingActive == 'failed'" @click="fetchWearableTypeByActiveId" class="cursor-pointer">
+      &#8634; laden fehlgeschlagen
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import Spinner from "@/components/Spinner.vue";
+import { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    wearableTypeId: String,
+  },
+  computed: {
+    ...mapState(useWearableTypeStore, ["activeWearableTypeObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchWearableTypeByActiveId();
+  },
+  methods: {
+    ...mapActions(useWearableTypeStore, ["fetchWearableTypeByActiveId"]),
+  },
+});
+</script>
diff --git a/src/views/admin/unit/wearableType/UpdateWearableType.vue b/src/views/admin/unit/wearableType/UpdateWearableType.vue
new file mode 100644
index 0000000..cf85991
--- /dev/null
+++ b/src/views/admin/unit/wearableType/UpdateWearableType.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <Spinner v-if="loading == 'loading'" class="mx-auto" />
+    <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
+    <form
+      v-else-if="wearableType != null"
+      class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
+      @submit.prevent="triggerUpdate"
+    >
+      <p class="mx-auto">Kleidungstyp bearbeiten</p>
+      <div>
+        <label for="type">Bezeichnung</label>
+        <input type="text" id="type" required v-model="wearableType.type" />
+      </div>
+      <div>
+        <label for="description">Beschreibung (optional)</label>
+        <input type="text" id="description" v-model="wearableType.description" />
+      </div>
+      <div class="flex flex-row justify-end gap-2">
+        <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
+          abbrechen
+        </button>
+        <button primary type="submit" class="w-fit!" :disabled="status == 'loading'">speichern</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
+import type {
+  CreateWearableTypeViewModel,
+  WearableTypeViewModel,
+  UpdateWearableTypeViewModel,
+} from "@/viewmodels/admin/unit/wearable/wearableType.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import isEqual from "lodash.isequal";
+import cloneDeep from "lodash.clonedeep";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    wearableTypeId: String,
+  },
+  data() {
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      origin: null as null | WearableTypeViewModel,
+      wearableType: null as null | WearableTypeViewModel,
+      timeout: null as any,
+    };
+  },
+  computed: {
+    canSaveOrReset(): boolean {
+      return isEqual(this.origin, this.wearableType);
+    },
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useWearableTypeStore, ["updateWearableType", "fetchWearableTypeById"]),
+    resetForm() {
+      this.wearableType = cloneDeep(this.origin);
+    },
+    fetchItem() {
+      this.fetchWearableTypeById(this.wearableTypeId ?? "")
+        .then((result) => {
+          this.wearableType = result.data;
+          this.origin = cloneDeep(result.data);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    triggerUpdate(e: any) {
+      if (this.wearableType == null) return;
+      let formData = e.target.elements;
+      let updateWearableType: UpdateWearableTypeViewModel = {
+        id: this.wearableType.id,
+        type: formData.type.value,
+        description: formData.description.value,
+      };
+      this.status = "loading";
+      this.updateWearableType(updateWearableType)
+        .then((res) => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/wearableType/WearableType.vue b/src/views/admin/unit/wearableType/WearableType.vue
new file mode 100644
index 0000000..fcf5958
--- /dev/null
+++ b/src/views/admin/unit/wearableType/WearableType.vue
@@ -0,0 +1,65 @@
+<template>
+  <MainTemplate title="Kleidungs-Typen">
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+        <Pagination
+          :items="wearableTypes"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          useSearch
+          @load-data="(offset, count, search) => fetchWearableTypes(offset, count, search)"
+          @search="(search) => fetchWearableTypes(0, maxEntriesPerPage, search, true)"
+        >
+          <template #pageRow="{ row }: { row: WearableTypeViewModel }">
+            <WearableTypeListItem :wearableType="row" />
+          </template>
+        </Pagination>
+
+        <div class="flex flex-row gap-4">
+          <button v-if="can('create', 'unit', 'wearable_type')" primary class="w-fit!" @click="openCreateModal">
+            Kleidungs-Typ erstellen
+          </button>
+        </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 { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
+import { useModalStore } from "@/stores/modal";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import type { WearableTypeViewModel } from "@/viewmodels/admin/unit/wearable/wearableType.models";
+import WearableTypeListItem from "@/components/admin/unit/wearableType/WearableTypeListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useWearableTypeStore, ["wearableTypes", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchWearableTypes(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useWearableTypeStore, ["fetchWearableTypes"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openCreateModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/unit/wearableType/CreateWearableTypeModal.vue")))
+      );
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/unit/wearableType/WearableTypeRouting.vue b/src/views/admin/unit/wearableType/WearableTypeRouting.vue
new file mode 100644
index 0000000..f2750d3
--- /dev/null
+++ b/src/views/admin/unit/wearableType/WearableTypeRouting.vue
@@ -0,0 +1,88 @@
+<template>
+  <MainTemplate :title="activeWearableTypeObj?.type">
+    <template #headerInsert>
+      <RouterLink :to="{ name: 'admin-unit-wearable_type' }" class="text-primary">zurück zur Liste</RouterLink>
+    </template>
+    <template #topBar>
+      <div class="flex flex-row gap-2">
+        <RouterLink v-if="can('update', 'unit', 'wearable_type')" :to="{ name: 'admin-unit-wearable_type-edit' }">
+          <PencilIcon class="w-5 h-5" />
+        </RouterLink>
+        <TrashIcon
+          v-if="can('delete', 'unit', 'wearable_type') && activeWearableTypeObj?.wearableCount == 0"
+          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-hidden',
+                  isActive ? 'bg-red-200 shadow-sm 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 { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    wearableTypeId: String,
+  },
+  data() {
+    return {
+      tabs: [
+        { route: "admin-unit-wearable_type-overview", title: "Übersicht" },
+        { route: "admin-unit-wearable_type-inspection_plan", title: "Prüfpläne" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useWearableTypeStore, ["activeWearableTypeObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchWearableTypeByActiveId();
+  },
+  methods: {
+    ...mapActions(useWearableTypeStore, ["fetchWearableTypeByActiveId"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openDeleteModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/unit/wearableType/DeleteWearableTypeModal.vue"))),
+        this.wearableTypeId ?? ""
+      );
+    },
+  },
+});
+</script>
diff --git a/src/views/public/damageReport/Report.vue b/src/views/public/damageReport/Report.vue
new file mode 100644
index 0000000..50380f4
--- /dev/null
+++ b/src/views/public/damageReport/Report.vue
@@ -0,0 +1,124 @@
+<template>
+  <MainTemplate title="Schaden melden" :showBack="false">
+    <template #main>
+      <RouterLink :to="{ name: 'login' }" class="w-fit! text-primary">
+        {{ dictionary[step] == "result" ? "zurück zu Startseite" : "abbrechen" }}
+      </RouterLink>
+      <div class="max-w-md w-full flex flex-col gap-4 mx-auto">
+        <CheckProgressBar :total="dictionary.length" :step="step" :successfull="successfull" />
+        <Start v-if="dictionary[step] == 'start'" @nextStep="selectNextStep" @stepBack="stepBack" />
+        <SelectGear
+          v-else-if="dictionary[step] == 'select'"
+          @nextStep="selectNextStep"
+          @stepBack="stepBack"
+          @data="(gear) => (content.gear = gear)"
+        />
+        <InputData
+          v-else-if="dictionary[step] == 'input'"
+          :data="content"
+          @nextStep="selectNextStep"
+          @stepBack="stepBack"
+          @data="updateContent"
+        />
+        <CheckEntry
+          v-else-if="dictionary[step] == 'check'"
+          :check="content"
+          @nextStep="selectNextStep"
+          @stepBack="stepBack"
+        />
+        <Result v-else-if="dictionary[step] == 'result'" @start="reset" />
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import MainTemplate from "@/templates/Main.vue";
+import CheckProgressBar from "@/components/CheckProgressBar.vue";
+import Start from "@/components/public/damageReport/Start.vue";
+import SelectGear from "@/components/public/damageReport/SelectGear.vue";
+import InputData from "@/components/public/damageReport/InputData.vue";
+import CheckEntry from "@/components/public/damageReport/CheckEntry.vue";
+import Result from "@/components/public/damageReport/Result.vue";
+import type { MinifiedEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import type { MinifiedVehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
+import type { MinifiedWearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      dictionary: ["start", "select", "input", "check", "result"],
+      step: 0 as number,
+      successfull: 0 as number,
+      usingBarcode: false,
+      content: {
+        gear: undefined,
+        title: "",
+        description: "",
+        location: "",
+        note: "",
+        reportedBy: "",
+        image: undefined,
+      } as {
+        gear: undefined | MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel;
+        title: string;
+        description: string;
+        location: string;
+        note: string;
+        reportedBy: string;
+        image: undefined | File;
+      },
+    };
+  },
+  computed: {
+    stepIndex() {
+      return (dict: string) => this.dictionary.findIndex((d) => d == dict);
+    },
+  },
+  methods: {
+    selectNextStep(s: string) {
+      let index = this.dictionary.findIndex((d) => d == s);
+      if (this.step == 0 && index == 2) this.usingBarcode = true;
+      this.step = index;
+      this.successfull = index - 1;
+    },
+    updateContent(d: {
+      title: string;
+      description: string;
+      location: string;
+      note: string;
+      reportedBy: string;
+      image?: File;
+    }) {
+      this.content.title = d.title;
+      this.content.description = d.description;
+      this.content.location = d.location;
+      this.content.note = d.note;
+      this.content.reportedBy = d.reportedBy;
+      if (d.image) this.content.image = d.image;
+    },
+    stepBack() {
+      if (this.step == 2 && this.usingBarcode) this.step = 0;
+      else this.step--;
+      this.successfull = Math.max(0, this.step - 1);
+    },
+    reset() {
+      this.step = 0;
+      this.successfull = 0;
+      this.usingBarcode = false;
+      this.content = {
+        gear: undefined,
+        title: "",
+        description: "",
+        location: "",
+        note: "",
+        reportedBy: "",
+        image: undefined,
+      };
+    },
+  },
+});
+</script>
diff --git a/src/views/public/scanner/RoomSelect.vue b/src/views/public/scanner/RoomSelect.vue
new file mode 100644
index 0000000..6913c9c
--- /dev/null
+++ b/src/views/public/scanner/RoomSelect.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="checkRoom">
+      <div>
+        <label for="roomId">Scan-Id</label>
+        <input type="text" id="roomId" required />
+      </div>
+      <div class="flex flex-row justify-end gap-2">
+        <button primary type="submit" class="w-fit!" :disabled="status == 'loading'">Zugang prüfen</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { SocketConnectionTypes } from "@/enums/socketEnum";
+import { SocketManager } from "@/socketManager";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: null as any,
+    };
+  },
+  mounted() {
+    SocketManager.closeConnection(SocketConnectionTypes.pscanner);
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    checkRoom(e: any) {
+      let formData = e.target.elements;
+      this.$http
+        .post("/public/checkscannerroom", {
+          roomId: formData.roomId.value,
+        })
+        .then((result) => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.$router.push({
+              name: "public-scanner-room",
+              params: {
+                room: formData.roomId.value,
+              },
+            });
+          }, 1500);
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/public/scanner/Scanner.vue b/src/views/public/scanner/Scanner.vue
new file mode 100644
index 0000000..b9b0174
--- /dev/null
+++ b/src/views/public/scanner/Scanner.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden">
+    <RouterLink :to="{ name: 'public-scanner-select' }" class="text-primary" @click="leave">
+      Zurück zur Sessionauswahl
+    </RouterLink>
+    <div class="relative flex flex-col gap-2 w-full grow overflow-hidden max-w-md mx-auto">
+      <Spinner v-if="selectedCamera == undefined" class="absolute top-3 left-1/2 -translate-y-1/2" />
+      <qrcode-stream
+        class="grow"
+        :constraints="selectedCamera?.constraints"
+        :track="trackFunctionOptions[4].value"
+        :formats="barcodeFormats"
+        :paused="paused"
+        @error="onError"
+        @detect="onDetect"
+        @camera-on="onCameraReady"
+      />
+      <br />
+      <select v-model="selectedCamera">
+        <option v-for="c in selecteableCameras" :value="c">{{ c.label }}</option>
+      </select>
+      <div class="flex flex-row justify-end gap-4 py-2">
+        <button primary-outline :disabled="!paused" @click="paused = false">weiter scannen</button>
+        <button primary :disabled="detected == ''" @click="commit">bestätigen</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SocketConnectionTypes } from "@/enums/socketEnum";
+import { SocketManager } from "@/socketManager";
+import { useNotificationStore } from "@/stores/notification";
+import { mapActions } from "pinia";
+import { defineComponent } from "vue";
+import {
+  barcodeFormats,
+  defaultConstraintOptions,
+  getAvailableCameras,
+  handleScannerError,
+  trackFunctionOptions,
+  type Camera,
+} from "@/helpers/scanner";
+import { QrcodeStream, type DetectedBarcode } from "vue-qrcode-reader";
+import Spinner from "@/components/Spinner.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    room: String,
+  },
+  data() {
+    return {
+      selecteableCameras: defaultConstraintOptions,
+      selectedCamera: undefined as undefined | Camera,
+      paused: false,
+      detected: "",
+    };
+  },
+  mounted() {
+    let connection = SocketManager.establishConnection(SocketConnectionTypes.pscanner);
+    connection.on("connect", () => {
+      SocketManager.getConnection(SocketConnectionTypes.pscanner)?.emit("session:join", this.room);
+    });
+    connection.on("disconnect", () => {
+      this.$router.push({ name: "public-scanner-select" });
+    });
+    connection.on("status-session:join", (res) => {
+      if (res.status == "success") {
+        this.push("Socket", `Scan-Session beigetreten`, "success");
+      } else {
+        this.push("Socket", `Scan-Session nicht gefunden`, "error");
+        this.$router.push({ name: "public-scanner-select" });
+      }
+    });
+    connection.on("status-session:leave", () => {
+      this.push("Socket", `Scan-Session verlassen`, "info");
+      SocketManager.getConnection(SocketConnectionTypes.pscanner)?.disconnect();
+    });
+    connection.on("status-scan:send", (socketId: string) => {
+      this.push("Scan-Verbindung", `Scan erfolgreich versendet`, "info");
+    });
+    connection.on("package-host_leave", (socketId: string) => {
+      this.push("Scan-Verbindung", `Session durch Host beendet`, "info");
+      SocketManager.getConnection(SocketConnectionTypes.pscanner)?.disconnect();
+    });
+  },
+  methods: {
+    ...mapActions(useNotificationStore, ["push"]),
+    async onCameraReady() {
+      this.selecteableCameras = await getAvailableCameras();
+      if (!this.selectedCamera) {
+        this.selectedCamera = this.selecteableCameras[0];
+      }
+    },
+    leave() {
+      SocketManager.getConnection(SocketConnectionTypes.pscanner)?.emit("session:leave");
+      SocketManager.closeConnection(SocketConnectionTypes.pscanner);
+    },
+    onDetect(result: Array<DetectedBarcode>) {
+      this.paused = true;
+      this.detected = result.map((r) => r.rawValue)[0];
+    },
+    onError(err: Error) {
+      console.log(handleScannerError(err));
+    },
+    commit() {
+      SocketManager.getConnection(SocketConnectionTypes.pscanner)?.emit("scan:send", this.detected);
+      this.detected = "";
+    },
+  },
+});
+</script>
diff --git a/src/views/public/scanner/ScannerRouting.vue b/src/views/public/scanner/ScannerRouting.vue
new file mode 100644
index 0000000..bc8c738
--- /dev/null
+++ b/src/views/public/scanner/ScannerRouting.vue
@@ -0,0 +1,11 @@
+<template>
+  <MainTemplate title="Scanner" :showBack="false">
+    <template #diffMain>
+      <RouterView />
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import MainTemplate from "@/templates/Main.vue";
+</script>