src/components/admin/unit/damageReport/DamageReportListItem.vue

@@ -18,7 +18,7 @@
         <div v-if="damageReport.reportedBy" class="cursor-pointer">
           <UserIcon class="w-5 h-5" />
         </div>
-        <div v-if="damageReport.maintenance" class="cursor-pointer">
+        <div v-if="damageReport.repair" class="cursor-pointer">
           <WrenchScrewdriverIcon class="w-5 h-5" />
         </div>
       </div>

src/components/admin/unit/repair/RepairListItem.vue

@@ -0,0 +1,37 @@
+<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?.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>Status: {{ repair.status }}</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>

src/router/index.ts

@@ -21,6 +21,7 @@ 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),
@@ -374,6 +375,12 @@ const router = createRouter({
                       component: () => import("@/views/admin/ViewSelect.vue"),
                       props: true,
                     },
+                    {
+                      path: "repair",
+                      name: "admin-unit-equipment-repair",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
                     {
                       path: "inspection",
                       name: "admin-unit-equipment-inspection",
@@ -437,6 +444,12 @@ const router = createRouter({
                       component: () => import("@/views/admin/ViewSelect.vue"),
                       props: true,
                     },
+                    {
+                      path: "repair",
+                      name: "admin-unit-vehicle-repair",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
                     {
                       path: "inspection",
                       name: "admin-unit-vehicle-inspection",
@@ -500,6 +513,12 @@ const router = createRouter({
                       component: () => import("@/views/admin/ViewSelect.vue"),
                       props: true,
                     },
+                    {
+                      path: "repair",
+                      name: "admin-unit-wearable-repair",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
                     {
                       path: "inspection",
                       name: "admin-unit-wearable-inspection",
@@ -713,6 +732,11 @@ const router = createRouter({
                   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",
@@ -742,6 +766,58 @@ const router = createRouter({
                 },
               ],
             },
+            {
+              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: "hi/: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: "maintenance",
               name: "admin-unit-maintenance-route",

src/router/unit/damageReport.ts

@@ -1,4 +1,4 @@
-import { useDamageReportStore } from "@/stores/admin/unit/damageReport/damageReport";
+import { useDamageReportStore } from "@/stores/admin/unit/damageReport";
 
 export async function setDamageReportId(to: any, from: any, next: any) {
   const damageReportStore = useDamageReportStore();

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();
+}

src/stores/admin/navigation.ts

@@ -120,12 +120,11 @@ export const useNavigationStore = defineStore("navigation", {
               ? [{ key: "respiratory_mission", title: "Atemschutz-Einsätze" }]
               : []),
             ...(abilityStore.can("create", "unit", "inspection") ? [{ key: "inspection", title: "Prüfungen" }] : []),
+            ...(abilityStore.can("read", "unit", "maintenance") ? [{ key: "maintenance", title: "Wartungen" }] : []),
             ...(abilityStore.can("read", "unit", "damage_report")
               ? [{ key: "damage_report", title: "Schadensmeldungen" }]
               : []),
-            ...(abilityStore.can("read", "unit", "maintenance")
+            ...(abilityStore.can("read", "unit", "repair") ? [{ key: "repair", title: "Reparaturen" }] : []),
-              ? [{ key: "maintenance", title: "Wartungen / Reparaturen" }]
-              : []),
             { key: "divider1", title: "Basisdaten" },
             ...(abilityStore.can("read", "unit", "equipment_type")
               ? [{ key: "equipment_type", title: "Geräte-Typen" }]

src/stores/admin/unit/repair.ts

@@ -0,0 +1,106 @@
+import { defineStore } from "pinia";
+import type { RepairViewModel, 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 updateRepair(repair: UpdateRepairViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/repair/${repair.id}`, {
+        status: repair.status,
+        noteByWorker: repair.noteByWorker,
+        done: repair.done,
+      });
+      return result;
+    },
+  },
+});

src/types/permissionTypes.ts

@@ -22,6 +22,7 @@ export type PermissionModule =
   | "respiratory_mission"
   | "damage_report"
   | "maintenance"
+  | "repair"
   // configuration
   | "qualification"
   | "award"
@@ -97,6 +98,7 @@ export const permissionModules: Array<PermissionModule> = [
   "respiratory_mission",
   "damage_report",
   "maintenance",
+  "repair",
   // configuration
   "qualification",
   "award",
@@ -134,6 +136,7 @@ export const sectionsAndModules: SectionsAndModulesObject = {
     "respiratory_mission",
     "damage_report",
     "maintenance",
+    "repair",
   ],
   configuration: [
     "qualification",

src/viewmodels/admin/unit/damageReport.models.ts

@@ -1,5 +1,5 @@
 import type { EquipmentViewModel } from "./equipment/equipment.models";
-import type { MaintenanceViewModel } from "./maintenance.models";
+import type { RepairViewModel } from "./repair.models";
 import type { VehicleViewModel } from "./vehicle/vehicle.models";
 import type { WearableViewModel } from "./wearable/wearable.models";
 
@@ -31,7 +31,7 @@ export type DamageReportViewModel = {
   noteByWorker: string;
   images: string[];
   reportedBy: string;
-  maintenance?: MaintenanceViewModel;
+  repair?: RepairViewModel;
 } & Optional<DamageReportAssigned>;
 
 export interface CreateDamageReportViewModel {

src/viewmodels/admin/unit/maintenance.models.ts

@@ -1,4 +1,3 @@
-import type { DamageReportViewModel } from "./damageReport.models";
 import type { EquipmentViewModel } from "./equipment/equipment.models";
 import type { VehicleViewModel } from "./vehicle/vehicle.models";
 import type { WearableViewModel } from "./wearable/wearable.models";
@@ -24,9 +23,7 @@ export type MaintenanceViewModel = {
   id: string;
   createdAt: Date;
   status: string;
-  done: boolean;
   description: string;
-  reports: DamageReportViewModel[];
 } & MaintenanceAssigned;
 
 export interface CreateMaintenanceViewModel {

src/viewmodels/admin/unit/repair.models.ts

@@ -0,0 +1,48 @@
+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;
+  status: string;
+  responsible: string;
+  description: string;
+  images: string[];
+  reportDocument: string;
+  reports: DamageReportViewModel[];
+} & RepairAssigned;
+
+export interface CreateRepairViewModel {
+  description: string;
+  reportedBy: string;
+  affectedId: string;
+  affected: "equipment" | "vehicle" | "wearable";
+}
+
+export interface UpdateRepairViewModel {
+  id: string;
+  status: string;
+  noteByWorker: string;
+  done: boolean;
+}

src/views/admin/unit/damageReport/DamageReport.vue

@@ -19,7 +19,7 @@ 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/damageReport";
+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";

src/views/admin/unit/damageReport/DamageReportClosed.vue

@@ -19,7 +19,7 @@ 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/damageReport";
+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";

src/views/admin/unit/damageReport/DamageReportRouting.vue

@@ -11,7 +11,7 @@
       </h1>
 
       <RouterLink
-        v-if="activeDamageReportObj?.related && can('read', 'unit', 'equipment')"
+        v-if="activeDamageReportObj?.related && can('read', 'unit', activeDamageReportObj.assigned)"
         :to="{
           name: `admin-unit-${activeDamageReportObj.assigned}-overview`,
           params: { [`${activeDamageReportObj.assigned}Id`]: activeDamageReportObj.related.id ?? '_' },
@@ -54,7 +54,7 @@ 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/damageReport";
+import { useDamageReportStore } from "@/stores/admin/unit/damageReport";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
 </script>
 

src/views/admin/unit/damageReport/Overview.vue

@@ -63,7 +63,7 @@
 import { defineComponent } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
 import { useAbilityStore } from "@/stores/ability";
-import { useDamageReportStore } from "@/stores/admin/unit/damageReport/damageReport";
+import { useDamageReportStore } from "@/stores/admin/unit/damageReport";
 import type { DamageReportViewModel, UpdateDamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
 </script>
 

src/views/admin/unit/equipment/DamageReport.vue

@@ -25,7 +25,7 @@
               <div v-if="row.reportedBy" class="cursor-pointer">
                 <UserIcon class="w-5 h-5" />
               </div>
-              <div v-if="row.maintenance" class="cursor-pointer">
+              <div v-if="row.repair" class="cursor-pointer">
                 <WrenchScrewdriverIcon class="w-5 h-5" />
               </div>
             </div>

src/views/admin/unit/equipment/EquipmentRouting.vue

@@ -55,9 +55,10 @@ export default defineComponent({
     return {
       tabs: [
         { route: "admin-unit-equipment-overview", title: "Übersicht" },
-        { route: "admin-unit-equipment-maintenance", title: "Wartungen/Reparaturen" },
         { 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" },
       ],
     };
   },

src/views/admin/unit/maintenance/Maintenance.vue

@@ -19,7 +19,7 @@ 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/maintenance";
+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";

src/views/admin/unit/repair/Overview.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="activeRepairObj != 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="activeRepairObj.status" />
+      </div>
+      <button
+        v-if="!editStatus && !activeRepairObj.finishedAt"
+        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 />
+      <div>
+        <label for="description">Beschreibung des Schadens</label>
+        <textarea id="description" readonly :value="activeRepairObj.description"></textarea>
+      </div>
+      <div>
+        <label for="responsible">Verantwortlich</label>
+        <input id="responsible" type="text" readonly placeholder="---" :value="activeRepairObj.responsible" />
+      </div>
+      <div>
+        <label>Bild</label>
+        <div ref="imgs">
+          <small v-if="activeRepairObj.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 { useRepairStore } from "@/stores/admin/unit/repair";
+import type { RepairViewModel, UpdateRepairViewModel } from "@/viewmodels/admin/unit/repair.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    repairId: String,
+  },
+  watch: {
+    activeRepairObj(val: RepairViewModel, oldVal: RepairViewModel | null) {
+      if (val && oldVal == null) this.loadImages();
+    },
+  },
+  data() {
+    return {
+      editStatus: false as boolean,
+      loading: undefined as undefined | "loading" | "success" | "failed",
+    };
+  },
+  computed: {
+    ...mapWritableState(useRepairStore, ["activeRepairObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.loadImages();
+  },
+  methods: {
+    ...mapActions(useRepairStore, ["loadRepairImage", "updateRepair"]),
+    loadImages() {
+      for (const i of this.activeRepairObj?.images ?? []) {
+        this.loadRepairImage(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.activeRepairObj == null) return;
+      this.loading = "loading";
+      let update: UpdateRepairViewModel = {
+        id: this.activeRepairObj.id,
+        status: (this.$refs.status as HTMLInputElement).value,
+        noteByWorker: (this.$refs.noteByWorker as HTMLInputElement).value,
+        done: finish,
+      };
+      this.updateRepair(update)
+        .then((res) => {
+          this.activeRepairObj!.status = update.status;
+          this.loading = "success";
+          this.editStatus = false;
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.loading = undefined;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>

src/views/admin/unit/repair/RepairClosed.vue

@@ -0,0 +1,46 @@
+<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)"
+      @search="(search) => fetchDoneRepairs(0, maxEntriesPerPage, search, true)"
+    >
+      <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>

src/views/admin/unit/repair/RepairOpen.vue

@@ -0,0 +1,46 @@
+<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)"
+      @search="(search) => fetchOpenRepairs(0, maxEntriesPerPage, search, true)"
+    >
+      <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>

src/views/admin/unit/repair/RepairRouting.vue

@@ -0,0 +1,82 @@
+<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">
+        Schadensmeldung:
+        {{ 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 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 { 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" }],
+    };
+  },
+  computed: {
+    ...mapState(useRepairStore, ["activeRepairObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchRepairByActiveId();
+  },
+  methods: {
+    ...mapActions(useRepairStore, ["fetchRepairByActiveId"]),
+  },
+});
+</script>

src/views/admin/unit/repair/RepairStatusRouting.vue

@@ -0,0 +1,54 @@
+<template>
+  <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"
+            >
+              <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-repair-open", title: "offen" },
+        { route: "admin-unit-repair-done", title: "bearbeitet" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>

src/views/admin/unit/vehicle/DamageReport.vue

@@ -25,7 +25,7 @@
               <div v-if="row.reportedBy" class="cursor-pointer">
                 <UserIcon class="w-5 h-5" />
               </div>
-              <div v-if="row.maintenance" class="cursor-pointer">
+              <div v-if="row.repair" class="cursor-pointer">
                 <WrenchScrewdriverIcon class="w-5 h-5" />
               </div>
             </div>

src/views/admin/unit/vehicle/VehicleRouting.vue

@@ -55,9 +55,10 @@ export default defineComponent({
     return {
       tabs: [
         { route: "admin-unit-vehicle-overview", title: "Übersicht" },
-        { route: "admin-unit-vehicle-maintenance", title: "Wartungen/Reparaturen" },
         { 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" },
       ],
     };
   },

src/views/admin/unit/wearable/DamageReport.vue

@@ -25,7 +25,7 @@
               <div v-if="row.reportedBy" class="cursor-pointer">
                 <UserIcon class="w-5 h-5" />
               </div>
-              <div v-if="row.maintenance" class="cursor-pointer">
+              <div v-if="row.repair" class="cursor-pointer">
                 <WrenchScrewdriverIcon class="w-5 h-5" />
               </div>
             </div>

src/views/admin/unit/wearable/WearableRouting.vue

@@ -55,9 +55,10 @@ export default defineComponent({
     return {
       tabs: [
         { route: "admin-unit-wearable-overview", title: "Übersicht" },
-        { route: "admin-unit-wearable-maintenance", title: "Wartungen/Reparaturen" },
         { 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" },
       ],
     };
   },