From c79d5bb1cd0f917e4f437b768f2d79943d1ef636 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Mon, 21 Jul 2025 12:58:32 +0200
Subject: [PATCH] repair create and view

---
 .../admin/unit/repair/RepairListItem.vue      |   4 +-
 ...eReportSearchSelectMultipleWithRelated.vue | 230 ++++++++++++++++++
 ...ageReportSearchSelectSingleWithRelated.vue | 216 ++++++++++++++++
 src/router/index.ts                           |  15 +-
 src/stores/admin/unit/damageReport.ts         |  17 ++
 src/stores/admin/unit/equipment/repair.ts     |  43 ++++
 src/stores/admin/unit/repair.ts               |  17 +-
 src/stores/admin/unit/vehicle/repair.ts       |  43 ++++
 src/stores/admin/unit/wearable/repair.ts      |  43 ++++
 src/viewmodels/admin/unit/repair.models.ts    |   9 +-
 .../unit/damageReport/DamageReportRouting.vue |  34 ++-
 .../DamageReportStatusRouting.vue             |  36 ++-
 src/views/admin/unit/equipment/Repair.vue     |  62 +++++
 src/views/admin/unit/repair/RepairCreate.vue  | 171 +++++++++++++
 src/views/admin/unit/repair/RepairRouting.vue |   2 +-
 .../admin/unit/repair/RepairStatusRouting.vue |  39 +--
 src/views/admin/unit/vehicle/Repair.vue       |  62 +++++
 src/views/admin/unit/wearable/Repair.vue      |  62 +++++
 18 files changed, 1046 insertions(+), 59 deletions(-)
 create mode 100644 src/components/search/DamageReportSearchSelectMultipleWithRelated.vue
 create mode 100644 src/components/search/DamageReportSearchSelectSingleWithRelated.vue
 create mode 100644 src/stores/admin/unit/equipment/repair.ts
 create mode 100644 src/stores/admin/unit/vehicle/repair.ts
 create mode 100644 src/stores/admin/unit/wearable/repair.ts
 create mode 100644 src/views/admin/unit/equipment/Repair.vue
 create mode 100644 src/views/admin/unit/repair/RepairCreate.vue
 create mode 100644 src/views/admin/unit/vehicle/Repair.vue
 create mode 100644 src/views/admin/unit/wearable/Repair.vue

diff --git a/src/components/admin/unit/repair/RepairListItem.vue b/src/components/admin/unit/repair/RepairListItem.vue
index 5b36a28..69986ee 100644
--- a/src/components/admin/unit/repair/RepairListItem.vue
+++ b/src/components/admin/unit/repair/RepairListItem.vue
@@ -5,13 +5,15 @@
   >
     <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>vera: {{ new Date(repair.createdAt).toLocaleString("de") }}</p>
+      <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>
diff --git a/src/components/search/DamageReportSearchSelectMultipleWithRelated.vue b/src/components/search/DamageReportSearchSelectMultipleWithRelated.vue
new file mode 100644
index 0000000..bfb45b7
--- /dev/null
+++ b/src/components/search/DamageReportSearchSelectMultipleWithRelated.vue
@@ -0,0 +1,230 @@
+<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", "add:damageReportByArray"],
+  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.filtered.find((f) => f.id == id);
+    },
+    loadDamageReportsInitial() {
+      if (this.modelValue.length == 0) return;
+      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..101fe78
--- /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.filtered.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/router/index.ts b/src/router/index.ts
index 68908e5..30b6402 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -378,7 +378,7 @@ const router = createRouter({
                     {
                       path: "repair",
                       name: "admin-unit-equipment-repair",
-                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      component: () => import("@/views/admin/unit/equipment/Repair.vue"),
                       props: true,
                     },
                     {
@@ -447,7 +447,7 @@ const router = createRouter({
                     {
                       path: "repair",
                       name: "admin-unit-vehicle-repair",
-                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      component: () => import("@/views/admin/unit/vehicle/Repair.vue"),
                       props: true,
                     },
                     {
@@ -516,7 +516,7 @@ const router = createRouter({
                     {
                       path: "repair",
                       name: "admin-unit-wearable-repair",
-                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      component: () => import("@/views/admin/unit/wearable/Repair.vue"),
                       props: true,
                     },
                     {
@@ -802,7 +802,14 @@ const router = createRouter({
                   ],
                 },
                 {
-                  path: "hi/:repairId",
+                  path: "create/:type?/:relatedId?",
+                  name: "admin-unit-repair-create",
+                  component: () => import("@/views/admin/unit/repair/RepairCreate.vue"),
+                  beforeEnter: [],
+                  props: true,
+                },
+                {
+                  path: "execute/:repairId",
                   name: "admin-unit-repair-routing",
                   component: () => import("@/views/admin/unit/repair/RepairRouting.vue"),
                   beforeEnter: [setRepairId],
diff --git a/src/stores/admin/unit/damageReport.ts b/src/stores/admin/unit/damageReport.ts
index 827086a..d7a458a 100644
--- a/src/stores/admin/unit/damageReport.ts
+++ b/src/stores/admin/unit/damageReport.ts
@@ -74,6 +74,23 @@ export const useDamageReportStore = defineStore("damageReport", {
         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
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/repair.ts b/src/stores/admin/unit/repair.ts
index 3104db8..91e444e 100644
--- a/src/stores/admin/unit/repair.ts
+++ b/src/stores/admin/unit/repair.ts
@@ -1,5 +1,9 @@
 import { defineStore } from "pinia";
-import type { RepairViewModel, UpdateRepairViewModel } from "@/viewmodels/admin/unit/repair.models";
+import type {
+  CreateRepairViewModel,
+  RepairViewModel,
+  UpdateRepairViewModel,
+} from "@/viewmodels/admin/unit/repair.models";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
 
@@ -94,6 +98,17 @@ export const useRepairStore = defineStore("repair", {
         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/${repair.id}`, {
         status: repair.status,
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/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/viewmodels/admin/unit/repair.models.ts b/src/viewmodels/admin/unit/repair.models.ts
index b40f157..cef3a72 100644
--- a/src/viewmodels/admin/unit/repair.models.ts
+++ b/src/viewmodels/admin/unit/repair.models.ts
@@ -27,6 +27,7 @@ export type RepairViewModel = {
   finishedAt?: Date;
   status: string;
   responsible: string;
+  title: string;
   description: string;
   images: string[];
   reportDocument: string;
@@ -34,10 +35,12 @@ export type RepairViewModel = {
 } & RepairAssigned;
 
 export interface CreateRepairViewModel {
-  description: string;
-  reportedBy: string;
-  affectedId: string;
   affected: "equipment" | "vehicle" | "wearable";
+  affectedId: string;
+  title: string;
+  description: string;
+  responsible: string;
+  reports: string[];
 }
 
 export interface UpdateRepairViewModel {
diff --git a/src/views/admin/unit/damageReport/DamageReportRouting.vue b/src/views/admin/unit/damageReport/DamageReportRouting.vue
index a25335c..c876d31 100644
--- a/src/views/admin/unit/damageReport/DamageReportRouting.vue
+++ b/src/views/admin/unit/damageReport/DamageReportRouting.vue
@@ -5,20 +5,32 @@
     </template>
     <template #topBar>
       <h1 class="font-bold text-xl h-8 min-h-fit">
-        Schadensmeldung:
+        {{ activeDamageReportObj?.title }} -
         {{ activeDamageReportObj?.related?.name ?? "Ohne Zuordnung" }}
         <small v-if="activeDamageReportObj?.related">({{ activeDamageReportObj.related.code }})</small>
       </h1>
 
-      <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 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">
@@ -55,7 +67,7 @@ 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 } from "@heroicons/vue/24/outline";
+import { ArrowTopRightOnSquareIcon, WrenchScrewdriverIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
diff --git a/src/views/admin/unit/damageReport/DamageReportStatusRouting.vue b/src/views/admin/unit/damageReport/DamageReportStatusRouting.vue
index 425f450..2ddb06c 100644
--- a/src/views/admin/unit/damageReport/DamageReportStatusRouting.vue
+++ b/src/views/admin/unit/damageReport/DamageReportStatusRouting.vue
@@ -2,27 +2,25 @@
   <MainTemplate title="Schadensmeldungen">
     <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"
+        <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',
+              ]"
             >
-              <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 />
+              {{ tab.title }}
+            </p>
+          </RouterLink>
         </div>
+        <RouterView />
       </div>
     </template>
   </MainTemplate>
diff --git a/src/views/admin/unit/equipment/Repair.vue b/src/views/admin/unit/equipment/Repair.vue
new file mode 100644
index 0000000..603db4e
--- /dev/null
+++ b/src/views/admin/unit/equipment/Repair.vue
@@ -0,0 +1,62 @@
+<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)"
+      @search="(search) => fetchRepairForEquipment(0, 25, search, true)"
+    >
+      <template #pageRow="{ row }: { row: RepairViewModel }">
+        <RouterLink
+          :to="{ name: 'admin-unit-repair-overview', params: { repairId: 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.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 } }"
+      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/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/RepairRouting.vue b/src/views/admin/unit/repair/RepairRouting.vue
index 8d0b8ed..93fde77 100644
--- a/src/views/admin/unit/repair/RepairRouting.vue
+++ b/src/views/admin/unit/repair/RepairRouting.vue
@@ -5,7 +5,7 @@
     </template>
     <template #topBar>
       <h1 class="font-bold text-xl h-8 min-h-fit">
-        Schadensmeldung:
+        {{ activeRepairObj?.title }} -
         {{ activeRepairObj?.related?.name ?? "Ohne Zuordnung" }}
         <small v-if="activeRepairObj?.related">({{ activeRepairObj.related.code }})</small>
       </h1>
diff --git a/src/views/admin/unit/repair/RepairStatusRouting.vue b/src/views/admin/unit/repair/RepairStatusRouting.vue
index 8d34a29..f757c4f 100644
--- a/src/views/admin/unit/repair/RepairStatusRouting.vue
+++ b/src/views/admin/unit/repair/RepairStatusRouting.vue
@@ -2,27 +2,28 @@
   <MainTemplate title="Schadensmeldungen">
     <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"
+        <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',
+              ]"
             >
-              <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 />
+              {{ tab.title }}
+            </p>
+          </RouterLink>
         </div>
+        <RouterView />
+        <RouterLink :to="{ name: 'admin-unit-repair-create' }" button primary class="w-fit!">
+          Reparatur erstellen
+        </RouterLink>
       </div>
     </template>
   </MainTemplate>
diff --git a/src/views/admin/unit/vehicle/Repair.vue b/src/views/admin/unit/vehicle/Repair.vue
new file mode 100644
index 0000000..b4a74fc
--- /dev/null
+++ b/src/views/admin/unit/vehicle/Repair.vue
@@ -0,0 +1,62 @@
+<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)"
+      @search="(search) => fetchRepairForVehicle(0, 25, search, true)"
+    >
+      <template #pageRow="{ row }: { row: RepairViewModel }">
+        <RouterLink
+          :to="{ name: 'admin-unit-repair-overview', params: { repairId: 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.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 } }"
+      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/wearable/Repair.vue b/src/views/admin/unit/wearable/Repair.vue
new file mode 100644
index 0000000..a3c0e26
--- /dev/null
+++ b/src/views/admin/unit/wearable/Repair.vue
@@ -0,0 +1,62 @@
+<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)"
+      @search="(search) => fetchRepairForWearable(0, 25, search, true)"
+    >
+      <template #pageRow="{ row }: { row: RepairViewModel }">
+        <RouterLink
+          :to="{ name: 'admin-unit-repair-overview', params: { repairId: 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.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 } }"
+      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>