From 6aae09cd03854cea0459b560c47b192172799355 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Wed, 16 Jul 2025 12:24:48 +0200
Subject: [PATCH 1/5] enable public report

---
 .../admin/management/setting/AppSetting.vue   |  22 ++-
 .../public/damageReport/CheckEntry.vue        | 126 ++++++++++++++++++
 .../public/damageReport/InputData.vue         |  90 +++++++++++++
 src/components/public/damageReport/Result.vue |  28 ++++
 .../public/damageReport/SelectGear.vue        | 116 ++++++++++++++++
 src/components/public/damageReport/Start.vue  |  19 +++
 src/components/scanner/Scanner.vue            |  16 ++-
 src/main.css                                  |   4 +-
 src/router/index.ts                           |   5 +
 src/stores/configuration.ts                   |   2 +
 src/types/settingTypes.ts                     |   3 +
 .../admin/unit/equipment/equipment.models.ts  |   8 ++
 .../admin/unit/vehicle/vehicle.models.ts      |   8 ++
 .../admin/unit/wearable/wearable.models.ts    |   8 ++
 src/views/Login.vue                           |   5 +-
 src/views/public/damageReport/Report.vue      | 114 ++++++++++++++++
 16 files changed, 567 insertions(+), 7 deletions(-)
 create mode 100644 src/components/public/damageReport/CheckEntry.vue
 create mode 100644 src/components/public/damageReport/InputData.vue
 create mode 100644 src/components/public/damageReport/Result.vue
 create mode 100644 src/components/public/damageReport/SelectGear.vue
 create mode 100644 src/components/public/damageReport/Start.vue
 create mode 100644 src/views/public/damageReport/Report.vue

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/public/damageReport/CheckEntry.vue b/src/components/public/damageReport/CheckEntry.vue
new file mode 100644
index 0000000..280f43c
--- /dev/null
+++ b/src/components/public/damageReport/CheckEntry.vue
@@ -0,0 +1,126 @@
+<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="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;
+        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("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..eb01d9a
--- /dev/null
+++ b/src/components/public/damageReport/InputData.vue
@@ -0,0 +1,90 @@
+<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="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;
+        description: string;
+        location: string;
+        note: string;
+        reportedBy: string;
+        image: undefined | File;
+      }>,
+      required: true,
+    },
+  },
+  emits: {
+    nextStep: (s: string) => true,
+    stepBack: () => true,
+    data: (d: { 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", {
+        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/Scanner.vue b/src/components/scanner/Scanner.vue
index ee1a51f..4ef9cd6 100644
--- a/src/components/scanner/Scanner.vue
+++ b/src/components/scanner/Scanner.vue
@@ -10,13 +10,16 @@
       @detect="onDetect"
       @camera-on="onCameraReady"
     />
-    <br />
     <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">bestätigen</button>
+      <button primary-outline @click="commit" :disabled="detected == ''">bestätigen</button>
     </div>
   </div>
 </template>
@@ -36,7 +39,13 @@ import { QrcodeStream, type DetectedBarcode } from "vue-qrcode-reader";
 
 <script lang="ts">
 export default defineComponent({
-  emits: ["code"],
+  props: {
+    useInput: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["code", "ready"],
   data() {
     return {
       selecteableCameras: defaultConstraintOptions,
@@ -51,6 +60,7 @@ export default defineComponent({
       if (!this.selectedCamera) {
         this.selectedCamera = this.selecteableCameras[0];
       }
+      this.$emit("ready");
     },
     onDetect(result: Array<DetectedBarcode>) {
       this.paused = true;
diff --git a/src/main.css b/src/main.css
index 449fd89..244a55f 100644
--- a/src/main.css
+++ b/src/main.css
@@ -74,12 +74,12 @@ button:not([class*="ql"] *):not([class*="fc"]):not([id*="headlessui-combobox"]),
 
 button[primary]:not([primary="false"]),
 [button][primary]:not([primary="false"]) {
-  @apply border-2 border-transparent text-white bg-primary hover:bg-primary;
+  @apply border-2 border-transparent text-white bg-primary hover:bg-accent;
 }
 
 button[primary-outline]:not([primary-outline="false"]),
 [button][primary-outline]:not([primary-outline="false"]) {
-  @apply border-2 border-primary text-black hover:bg-primary;
+  @apply border-2 border-primary text-black hover:bg-primary hover:text-white;
 }
 
 button:disabled,
diff --git a/src/router/index.ts b/src/router/index.ts
index 28c7d8f..1b8342a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1444,6 +1444,11 @@ const router = createRouter({
             },
           ],
         },
+        {
+          path: "damagereport",
+          name: "public-damage_report",
+          component: () => import("@/views/public/damageReport/Report.vue"),
+        },
       ],
     },
     {
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/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/equipment/equipment.models.ts b/src/viewmodels/admin/unit/equipment/equipment.models.ts
index abbdee7..3c778e2 100644
--- a/src/viewmodels/admin/unit/equipment/equipment.models.ts
+++ b/src/viewmodels/admin/unit/equipment/equipment.models.ts
@@ -11,6 +11,14 @@ export interface EquipmentViewModel {
   equipmentType: EquipmentTypeViewModel;
 }
 
+export interface MinifiedEquipmentViewModel {
+  id: string;
+  code?: string;
+  name: string;
+  type: string;
+  assigned: "equipment";
+}
+
 export interface CreateEquipmentViewModel {
   code?: string;
   name: string;
diff --git a/src/viewmodels/admin/unit/vehicle/vehicle.models.ts b/src/viewmodels/admin/unit/vehicle/vehicle.models.ts
index 4e273f6..8020444 100644
--- a/src/viewmodels/admin/unit/vehicle/vehicle.models.ts
+++ b/src/viewmodels/admin/unit/vehicle/vehicle.models.ts
@@ -11,6 +11,14 @@ export interface VehicleViewModel {
   vehicleType: VehicleTypeViewModel;
 }
 
+export interface MinifiedVehicleViewModel {
+  id: string;
+  code?: string;
+  name: string;
+  type: string;
+  assigned: "vehicle";
+}
+
 export interface CreateVehicleViewModel {
   code?: string;
   name: string;
diff --git a/src/viewmodels/admin/unit/wearable/wearable.models.ts b/src/viewmodels/admin/unit/wearable/wearable.models.ts
index aef67ae..eed19e1 100644
--- a/src/viewmodels/admin/unit/wearable/wearable.models.ts
+++ b/src/viewmodels/admin/unit/wearable/wearable.models.ts
@@ -14,6 +14,14 @@ export interface WearableViewModel {
   wearableType: WearableTypeViewModel;
 }
 
+export interface MinifiedWearableViewModel {
+  id: string;
+  code?: string;
+  name: string;
+  type: string;
+  assigned: "wearable";
+}
+
 export interface CreateWearableViewModel {
   code?: string;
   name: 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/public/damageReport/Report.vue b/src/views/public/damageReport/Report.vue
new file mode 100644
index 0000000..c36a7be
--- /dev/null
+++ b/src/views/public/damageReport/Report.vue
@@ -0,0 +1,114 @@
+<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,
+        description: "",
+        location: "",
+        note: "",
+        reportedBy: "",
+        image: undefined,
+      } as {
+        gear: undefined | MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel;
+        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: { description: string; location: string; note: string; reportedBy: string; image?: File }) {
+      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() {
+      console.log("hi");
+      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,
+        description: "",
+        location: "",
+        note: "",
+        reportedBy: "",
+        image: undefined,
+      };
+    },
+  },
+});
+</script>

From 93a04abee15a3b493309362d189634e295eea874 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Wed, 16 Jul 2025 12:43:03 +0200
Subject: [PATCH 2/5] show reports inside admin ui

---
 .../unit/damageReport/DamageReportListItem.vue   | 16 ++++++++++++++--
 src/global.ts                                    |  3 +++
 src/viewmodels/admin/unit/damageReport.models.ts |  6 ++++--
 3 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 src/global.ts

diff --git a/src/components/admin/unit/damageReport/DamageReportListItem.vue b/src/components/admin/unit/damageReport/DamageReportListItem.vue
index a838973..4c58268 100644
--- a/src/components/admin/unit/damageReport/DamageReportListItem.vue
+++ b/src/components/admin/unit/damageReport/DamageReportListItem.vue
@@ -2,11 +2,22 @@
   <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 }}
+        {{ 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" title="hi">
+          <PhotoIcon class="w-5 h-5" />
+        </div>
+        <div v-if="damageReport.location" class="cursor-pointer" title="hi">
+          <MapPinIcon class="w-5 h-5" />
+        </div>
+        <div v-if="damageReport.reportedBy" class="cursor-pointer" title="hi">
+          <UserIcon class="w-5 h-5" />
+        </div>
+      </div>
     </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>
@@ -17,6 +28,7 @@ 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 } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
diff --git a/src/global.ts b/src/global.ts
new file mode 100644
index 0000000..8ef38cb
--- /dev/null
+++ b/src/global.ts
@@ -0,0 +1,3 @@
+declare global {
+  type Optional<T> = T | { [K in keyof T]?: never };
+}
diff --git a/src/viewmodels/admin/unit/damageReport.models.ts b/src/viewmodels/admin/unit/damageReport.models.ts
index 44bf661..70b8e1d 100644
--- a/src/viewmodels/admin/unit/damageReport.models.ts
+++ b/src/viewmodels/admin/unit/damageReport.models.ts
@@ -26,10 +26,12 @@ export type DamageReportViewModel = {
   status: string;
   done: boolean;
   description: string;
-  imageCount: number;
+  location: string;
+  note: string;
+  images: string[];
   reportedBy: string;
   maintenance?: MaintenanceViewModel;
-} & DamageReportAssigned;
+} & Optional<DamageReportAssigned>;
 
 export interface CreateDamageReportViewModel {
   description: string;

From 5ea5a0160a6f5e704cfc1607ed94b473661c64b4 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Thu, 17 Jul 2025 09:32:18 +0200
Subject: [PATCH 3/5] show details to damage

---
 .../damageReport/DamageReportListItem.vue     | 12 ++-
 src/global.ts                                 |  3 +-
 src/router/index.ts                           | 39 ++++++++--
 src/router/unit/damageReport.ts               | 20 +++++
 .../admin/unit/damageReport/damageReport.ts   | 72 ++++++++++++-----
 .../admin/unit/damageReport/DamageReport.vue  |  8 +-
 .../unit/damageReport/DamageReportClosed.vue  | 46 +++++++++++
 .../unit/damageReport/DamageReportRouting.vue | 42 ++++++++--
 .../DamageReportStatusRouting.vue             | 54 +++++++++++++
 .../admin/unit/damageReport/Overview.vue      | 77 +++++++++++++++++++
 10 files changed, 332 insertions(+), 41 deletions(-)
 create mode 100644 src/router/unit/damageReport.ts
 create mode 100644 src/views/admin/unit/damageReport/DamageReportClosed.vue
 create mode 100644 src/views/admin/unit/damageReport/DamageReportStatusRouting.vue
 create mode 100644 src/views/admin/unit/damageReport/Overview.vue

diff --git a/src/components/admin/unit/damageReport/DamageReportListItem.vue b/src/components/admin/unit/damageReport/DamageReportListItem.vue
index 4c58268..4cf1371 100644
--- a/src/components/admin/unit/damageReport/DamageReportListItem.vue
+++ b/src/components/admin/unit/damageReport/DamageReportListItem.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+  <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?.related?.name ?? "Ohne Zuordnung" }}
@@ -15,12 +18,15 @@
         <div v-if="damageReport.reportedBy" class="cursor-pointer" title="hi">
           <UserIcon class="w-5 h-5" />
         </div>
+        <div v-if="damageReport.maintenance" class="cursor-pointer" title="hi">
+          <WrenchScrewdriverIcon class="w-5 h-5" />
+        </div>
       </div>
     </div>
     <div class="p-2">
       <p v-if="damageReport.description">Beschreibung: {{ damageReport.description }}</p>
     </div>
-  </div>
+  </RouterLink>
 </template>
 
 <script setup lang="ts">
@@ -28,7 +34,7 @@ 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 } from "@heroicons/vue/24/outline";
+import { MapPinIcon, PhotoIcon, UserIcon, WrenchScrewdriverIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
diff --git a/src/global.ts b/src/global.ts
index 8ef38cb..883938e 100644
--- a/src/global.ts
+++ b/src/global.ts
@@ -1,3 +1,4 @@
 declare global {
-  type Optional<T> = T | { [K in keyof T]?: never };
+  //type Optional<T> = T | { [K in keyof T]?: never };
+  type Optional<T> = T | never;
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 1b8342a..7fc2f76 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -20,6 +20,7 @@ import { resetInspectionPlanStores, setInspectionPlanId } from "./unit/inspectio
 import { setVehicleTypeId } from "./unit/vehicleType";
 import { resetInspectionStores, setInspectionId } from "./unit/inspection";
 import { setWearableTypeId } from "./unit/wearableType";
+import { resetDamageReportStores, setDamageReportId } from "./unit/damageReport";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -697,19 +698,47 @@ const router = createRouter({
             {
               path: "damage-report",
               name: "admin-unit-damage_report-route",
-              component: () => import("@/views/admin/unit/damageReport/DamageReportRouting.vue"),
+              component: () => import("@/views/RouterView.vue"),
               meta: { type: "read", section: "unit", module: "damage_report" },
               beforeEnter: [abilityAndNavUpdate],
               children: [
                 {
                   path: "",
                   name: "admin-unit-damage_report",
-                  component: () => import("@/views/admin/unit/damageReport/DamageReport.vue"),
+                  redirect: { name: "admin-unit-damage_report-open" },
                 },
                 {
-                  path: "done",
-                  name: "admin-unit-damage_report-done",
-                  component: () => import("@/views/admin/unit/damageReport/DamageReport.vue"),
+                  path: "status",
+                  name: "admin-unit-damage_report-statusrouting",
+                  component: () => import("@/views/admin/unit/damageReport/DamageReportStatusRouting.vue"),
+                  beforeEnter: [resetDamageReportStores],
+                  children: [
+                    {
+                      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,
+                    },
+                  ],
                 },
               ],
             },
diff --git a/src/router/unit/damageReport.ts b/src/router/unit/damageReport.ts
new file mode 100644
index 0000000..86b7f86
--- /dev/null
+++ b/src/router/unit/damageReport.ts
@@ -0,0 +1,20 @@
+import { useDamageReportStore } from "@/stores/admin/unit/damageReport/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/stores/admin/unit/damageReport/damageReport.ts b/src/stores/admin/unit/damageReport/damageReport.ts
index d9ce5d0..ed5b106 100644
--- a/src/stores/admin/unit/damageReport/damageReport.ts
+++ b/src/stores/admin/unit/damageReport/damageReport.ts
@@ -1,9 +1,5 @@
 import { defineStore } from "pinia";
-import type {
-  DamageReportViewModel,
-  CreateDamageReportViewModel,
-  UpdateDamageReportViewModel,
-} from "@/viewmodels/admin/unit/damageReport.models";
+import type { DamageReportViewModel, UpdateDamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
 
@@ -13,28 +9,46 @@ export const useDamageReportStore = defineStore("damageReport", {
       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: {
-    fetchDamageReports(offset = 0, count = 25, search = "", clear = false) {
+    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";
-      //TODO enable fetch of done reports
       http
-        .get(`/admin/damageReport?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .get(`/admin/damageReport?done=false&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.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) => {
@@ -60,14 +74,30 @@ export const useDamageReportStore = defineStore("damageReport", {
         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}`, {
         // TODO: data
       });
-      this.fetchDamageReports();
       return result;
     },
   },
diff --git a/src/views/admin/unit/damageReport/DamageReport.vue b/src/views/admin/unit/damageReport/DamageReport.vue
index 5d76742..4ba8c6a 100644
--- a/src/views/admin/unit/damageReport/DamageReport.vue
+++ b/src/views/admin/unit/damageReport/DamageReport.vue
@@ -4,8 +4,8 @@
       :items="damageReports"
       :totalCount="totalCount"
       :indicateLoading="loading == 'loading'"
-      @load-data="(offset, count, search) => fetchDamageReports(offset, count, search)"
-      @search="(search) => fetchDamageReports(0, maxEntriesPerPage, search, true)"
+      @load-data="(offset, count, search) => fetchOpenDamageReports(offset, count, search)"
+      @search="(search) => fetchOpenDamageReports(0, maxEntriesPerPage, search, true)"
     >
       <template #pageRow="{ row }: { row: DamageReportViewModel }">
         <DamageReportListItem :damageReport="row" />
@@ -37,10 +37,10 @@ export default defineComponent({
     ...mapState(useAbilityStore, ["can"]),
   },
   mounted() {
-    this.fetchDamageReports(0, this.maxEntriesPerPage, "", true);
+    this.fetchOpenDamageReports(0, this.maxEntriesPerPage, "", true);
   },
   methods: {
-    ...mapActions(useDamageReportStore, ["fetchDamageReports"]),
+    ...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..0766e6d
--- /dev/null
+++ b/src/views/admin/unit/damageReport/DamageReportClosed.vue
@@ -0,0 +1,46 @@
+<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)"
+      @search="(search) => fetchDoneDamageReports(0, maxEntriesPerPage, search, true)"
+    >
+      <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/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
index 48d8b0f..72b2043 100644
--- a/src/views/admin/unit/damageReport/DamageReportRouting.vue
+++ b/src/views/admin/unit/damageReport/DamageReportRouting.vue
@@ -1,9 +1,29 @@
 <template>
-  <MainTemplate title="Schadensmeldungen">
+  <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">
+        Schadensmeldung:
+        {{ activeDamageReportObj?.related?.name ?? "Ohne Zuordnung" }}
+        <small v-if="activeDamageReportObj?.related">({{ activeDamageReportObj.related.code }})</small>
+      </h1>
+
+      <RouterLink
+        v-if="activeDamageReportObj?.related && can('read', 'unit', 'equipment')"
+        :to="{
+          name: `admin-unit-${activeDamageReportObj.assigned}-overview`,
+          params: { [`${activeDamageReportObj.assigned}Id`]: activeDamageReportObj.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">
+          <div hidden class="w-full flex flex-row max-lg:flex-wrap justify-center">
             <RouterLink
               v-for="tab in tabs"
               :key="tab.route"
@@ -34,21 +54,29 @@ 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";
+import { useDamageReportStore } from "@/stores/admin/unit/damageReport/damageReport";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
 export default defineComponent({
+  props: {
+    damageReportId: String,
+  },
   data() {
     return {
-      tabs: [
-        { route: "admin-unit-damage_report", title: "offen" },
-        { route: "admin-unit-damage_report-done", title: "bearbeitet" },
-      ],
+      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..425f450
--- /dev/null
+++ b/src/views/admin/unit/damageReport/DamageReportStatusRouting.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-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..dc0eb4f
--- /dev/null
+++ b/src/views/admin/unit/damageReport/Overview.vue
@@ -0,0 +1,77 @@
+<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" type="text" readonly :value="activeDamageReportObj.status" />
+      </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 :value="activeDamageReportObj.location || '---'"></textarea>
+      </div>
+      <div>
+        <label for="note">Anmerkung für Bearbeiter</label>
+        <textarea id="note" readonly :value="activeDamageReportObj.note || '---'"></textarea>
+      </div>
+      <div>
+        <label for="reportedBy">Gemeldet von</label>
+        <input id="reportedBy" type="text" readonly :value="activeDamageReportObj.reportedBy || '---'" />
+      </div>
+      <div>
+        <label>Bild</label>
+        <div ref="imgs"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useDamageReportStore } from "@/stores/admin/unit/damageReport/damageReport";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    damageReportId: String,
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useDamageReportStore, ["activeDamageReportObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.loadImages();
+  },
+  methods: {
+    ...mapActions(useDamageReportStore, ["loadDamageReportImage"]),
+    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);
+          });
+      }
+    },
+  },
+});
+</script>

From 31b7ec9c3e64d816b6f4d8c9cdad203c6abeaa3f Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Thu, 17 Jul 2025 10:37:40 +0200
Subject: [PATCH 4/5] Enable Edit and View of Reports

---
 .../damageReport/DamageReportListItem.vue     | 10 ++-
 .../admin/unit/damageReport/damageReport.ts   |  4 +-
 .../admin/unit/equipment/damageReport.ts      |  2 +-
 src/stores/admin/unit/vehicle/damageReport.ts |  2 +-
 .../admin/unit/wearable/damageReport.ts       |  2 +-
 .../admin/unit/damageReport.models.ts         |  4 +-
 .../admin/unit/damageReport/Overview.vue      | 84 ++++++++++++++++---
 .../admin/unit/equipment/DamageReport.vue     | 38 ++++++---
 src/views/admin/unit/vehicle/DamageReport.vue | 36 +++++---
 .../admin/unit/wearable/DamageReport.vue      | 36 +++++---
 10 files changed, 162 insertions(+), 56 deletions(-)

diff --git a/src/components/admin/unit/damageReport/DamageReportListItem.vue b/src/components/admin/unit/damageReport/DamageReportListItem.vue
index 4cf1371..6606064 100644
--- a/src/components/admin/unit/damageReport/DamageReportListItem.vue
+++ b/src/components/admin/unit/damageReport/DamageReportListItem.vue
@@ -9,21 +9,23 @@
         <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" title="hi">
+        <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" title="hi">
+        <div v-if="damageReport.location" class="cursor-pointer">
           <MapPinIcon class="w-5 h-5" />
         </div>
-        <div v-if="damageReport.reportedBy" class="cursor-pointer" title="hi">
+        <div v-if="damageReport.reportedBy" class="cursor-pointer">
           <UserIcon class="w-5 h-5" />
         </div>
-        <div v-if="damageReport.maintenance" class="cursor-pointer" title="hi">
+        <div v-if="damageReport.maintenance" class="cursor-pointer">
           <WrenchScrewdriverIcon class="w-5 h-5" />
         </div>
       </div>
     </div>
     <div class="p-2">
+      <p>gemeldet: {{ damageReport.reportedAt }}</p>
+      <p>Status: {{ damageReport.status }}</p>
       <p v-if="damageReport.description">Beschreibung: {{ damageReport.description }}</p>
     </div>
   </RouterLink>
diff --git a/src/stores/admin/unit/damageReport/damageReport.ts b/src/stores/admin/unit/damageReport/damageReport.ts
index ed5b106..827086a 100644
--- a/src/stores/admin/unit/damageReport/damageReport.ts
+++ b/src/stores/admin/unit/damageReport/damageReport.ts
@@ -96,7 +96,9 @@ export const useDamageReportStore = defineStore("damageReport", {
     },
     async updateDamageReport(damageReport: UpdateDamageReportViewModel): Promise<AxiosResponse<any, any>> {
       const result = await http.patch(`/admin/damageReport/${damageReport.id}`, {
-        // TODO: data
+        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
index eabf261..9460582 100644
--- a/src/stores/admin/unit/equipment/damageReport.ts
+++ b/src/stores/admin/unit/equipment/damageReport.ts
@@ -22,7 +22,7 @@ export const useEquipmentDamageReportStore = defineStore("equipmentDamageReport"
         )
         .then((result) => {
           this.totalCount = result.data.total;
-          result.data.reports
+          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 {
diff --git a/src/stores/admin/unit/vehicle/damageReport.ts b/src/stores/admin/unit/vehicle/damageReport.ts
index 29a470d..b4df77f 100644
--- a/src/stores/admin/unit/vehicle/damageReport.ts
+++ b/src/stores/admin/unit/vehicle/damageReport.ts
@@ -22,7 +22,7 @@ export const useVehicleDamageReportStore = defineStore("vehicleDamageReport", {
         )
         .then((result) => {
           this.totalCount = result.data.total;
-          result.data.reports
+          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 {
diff --git a/src/stores/admin/unit/wearable/damageReport.ts b/src/stores/admin/unit/wearable/damageReport.ts
index 4cb2420..e54a912 100644
--- a/src/stores/admin/unit/wearable/damageReport.ts
+++ b/src/stores/admin/unit/wearable/damageReport.ts
@@ -22,7 +22,7 @@ export const useWearableDamageReportStore = defineStore("wearableDamageReport",
         )
         .then((result) => {
           this.totalCount = result.data.total;
-          result.data.reports
+          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 {
diff --git a/src/viewmodels/admin/unit/damageReport.models.ts b/src/viewmodels/admin/unit/damageReport.models.ts
index 70b8e1d..d05debe 100644
--- a/src/viewmodels/admin/unit/damageReport.models.ts
+++ b/src/viewmodels/admin/unit/damageReport.models.ts
@@ -27,7 +27,8 @@ export type DamageReportViewModel = {
   done: boolean;
   description: string;
   location: string;
-  note: string;
+  noteByReporter: string;
+  noteByWorker: string;
   images: string[];
   reportedBy: string;
   maintenance?: MaintenanceViewModel;
@@ -43,5 +44,6 @@ export interface CreateDamageReportViewModel {
 export interface UpdateDamageReportViewModel {
   id: string;
   status: string;
+  noteByWorker: string;
   done: boolean;
 }
diff --git a/src/views/admin/unit/damageReport/Overview.vue b/src/views/admin/unit/damageReport/Overview.vue
index dc0eb4f..85c05eb 100644
--- a/src/views/admin/unit/damageReport/Overview.vue
+++ b/src/views/admin/unit/damageReport/Overview.vue
@@ -3,7 +3,29 @@
     <div v-if="activeDamageReportObj != null" class="flex flex-col gap-2 w-full">
       <div>
         <label for="status">Status</label>
-        <input id="status" type="text" readonly :value="activeDamageReportObj.status" />
+        <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.done"
+        primary
+        class="w-fit! self-end"
+        @click="editStatus = true"
+      >
+        Status ändern
+      </button>
+      <div v-else-if="!activeDamageReportObj.done" 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>
@@ -12,19 +34,26 @@
       </div>
       <div>
         <label for="location">Fundort</label>
-        <textarea id="location" readonly :value="activeDamageReportObj.location || '---'"></textarea>
+        <textarea id="location" readonly placeholder="---" :value="activeDamageReportObj.location"></textarea>
       </div>
       <div>
-        <label for="note">Anmerkung für Bearbeiter</label>
-        <textarea id="note" readonly :value="activeDamageReportObj.note || '---'"></textarea>
+        <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 :value="activeDamageReportObj.reportedBy || '---'" />
+        <input id="reportedBy" type="text" readonly placeholder="---" :value="activeDamageReportObj.reportedBy" />
       </div>
       <div>
         <label>Bild</label>
-        <div ref="imgs"></div>
+        <div ref="imgs">
+          <small v-if="activeDamageReportObj.images.length == 0">Keine Bilder hochgeladen</small>
+        </div>
       </div>
     </div>
   </div>
@@ -32,9 +61,10 @@
 
 <script setup lang="ts">
 import { defineComponent } from "vue";
-import { mapActions, mapState } from "pinia";
+import { mapActions, mapState, mapWritableState } from "pinia";
 import { useAbilityStore } from "@/stores/ability";
 import { useDamageReportStore } from "@/stores/admin/unit/damageReport/damageReport";
+import type { DamageReportViewModel, UpdateDamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
 </script>
 
 <script lang="ts">
@@ -42,18 +72,26 @@ export default defineComponent({
   props: {
     damageReportId: String,
   },
+  watch: {
+    activeDamageReportObj(val: DamageReportViewModel, oldVal: DamageReportViewModel | null) {
+      if (val && oldVal == null) this.loadImages();
+    },
+  },
   data() {
-    return {};
+    return {
+      editStatus: false as boolean,
+      loading: undefined as undefined | "loading" | "success" | "failed",
+    };
   },
   computed: {
-    ...mapState(useDamageReportStore, ["activeDamageReportObj"]),
+    ...mapWritableState(useDamageReportStore, ["activeDamageReportObj"]),
     ...mapState(useAbilityStore, ["can"]),
   },
   mounted() {
     this.loadImages();
   },
   methods: {
-    ...mapActions(useDamageReportStore, ["loadDamageReportImage"]),
+    ...mapActions(useDamageReportStore, ["loadDamageReportImage", "updateDamageReport"]),
     loadImages() {
       for (const i of this.activeDamageReportObj?.images ?? []) {
         this.loadDamageReportImage(i)
@@ -72,6 +110,32 @@ export default defineComponent({
           });
       }
     },
+    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!.done = update.done;
+          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/DamageReport.vue b/src/views/admin/unit/equipment/DamageReport.vue
index aa2df0a..230bab5 100644
--- a/src/views/admin/unit/equipment/DamageReport.vue
+++ b/src/views/admin/unit/equipment/DamageReport.vue
@@ -3,22 +3,37 @@
     <Pagination
       :items="damageReports"
       :totalCount="totalCount"
-      :indicateLoading="false"
-      @load-data="(offset, count, search) => {}"
-      @search="(search) => {}"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchDamageReportForEquipment(offset, count, search)"
+      @search="(search) => fetchDamageReportForEquipment(0, 25, search, true)"
     >
       <template #pageRow="{ row }: { row: DamageReportViewModel }">
-        <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+        <RouterLink
+          :to="{ name: 'admin-unit-damage_report-overview', params: { damageReportId: 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.done" class="w-5 h-5" />
-            <PhotoIcon v-if="row.imageCount != 0" class="w-5 h-5" />
-            <p>{{ row.reportedAt }} - {{ row.status }}</p>
+            <p class="grow">{{ row.reportedAt }} - {{ 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.maintenance" class="cursor-pointer">
+                <WrenchScrewdriverIcon class="w-5 h-5" />
+              </div>
+            </div>
           </div>
           <div class="p-2">
-            <p v-if="row.reportedBy">gemeldet von: {{ row.reportedBy }}</p>
             <p>Beschreibung: {{ row.description }}</p>
           </div>
-        </div>
+        </RouterLink>
       </template>
     </Pagination>
   </div>
@@ -31,7 +46,7 @@ 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 } from "@heroicons/vue/24/outline";
+import { PhotoIcon, PencilSquareIcon, MapPinIcon, WrenchScrewdriverIcon, UserIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -44,13 +59,10 @@ export default defineComponent({
     ...mapState(useEquipmentDamageReportStore, ["damageReports", "loading", "totalCount"]),
   },
   mounted() {
-    this.fetchItem();
+    this.fetchDamageReportForEquipment(0, 25, "", true);
   },
   methods: {
     ...mapActions(useEquipmentDamageReportStore, ["fetchDamageReportForEquipment"]),
-    fetchItem() {
-      this.fetchDamageReportForEquipment();
-    },
   },
 });
 </script>
diff --git a/src/views/admin/unit/vehicle/DamageReport.vue b/src/views/admin/unit/vehicle/DamageReport.vue
index ebac088..9cb01ad 100644
--- a/src/views/admin/unit/vehicle/DamageReport.vue
+++ b/src/views/admin/unit/vehicle/DamageReport.vue
@@ -4,21 +4,36 @@
       :items="damageReports"
       :totalCount="totalCount"
       :indicateLoading="false"
-      @load-data="(offset, count, search) => {}"
-      @search="(search) => {}"
+      @load-data="(offset, count, search) => fetchDamageReportForVehicle(offset, count, search)"
+      @search="(search) => fetchDamageReportForVehicle(0, 25, search, true)"
     >
       <template #pageRow="{ row }: { row: DamageReportViewModel }">
-        <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+        <RouterLink
+          :to="{ name: 'admin-unit-damage_report-overview', params: { damageReportId: 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.done" class="w-5 h-5" />
-            <PhotoIcon v-if="row.imageCount != 0" class="w-5 h-5" />
-            <p>{{ row.reportedAt }} - {{ row.status }}</p>
+            <p class="grow">{{ row.reportedAt }} - {{ 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.maintenance" class="cursor-pointer">
+                <WrenchScrewdriverIcon class="w-5 h-5" />
+              </div>
+            </div>
           </div>
           <div class="p-2">
-            <p v-if="row.reportedBy">gemeldet von: {{ row.reportedBy }}</p>
             <p>Beschreibung: {{ row.description }}</p>
           </div>
-        </div>
+        </RouterLink>
       </template>
     </Pagination>
   </div>
@@ -31,7 +46,7 @@ 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 } from "@heroicons/vue/24/outline";
+import { PhotoIcon, PencilSquareIcon, MapPinIcon, WrenchScrewdriverIcon, UserIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -44,13 +59,10 @@ export default defineComponent({
     ...mapState(useVehicleDamageReportStore, ["damageReports", "loading", "totalCount"]),
   },
   mounted() {
-    this.fetchItem();
+    this.fetchDamageReportForVehicle(0, 25, "", true);
   },
   methods: {
     ...mapActions(useVehicleDamageReportStore, ["fetchDamageReportForVehicle"]),
-    fetchItem() {
-      this.fetchDamageReportForVehicle();
-    },
   },
 });
 </script>
diff --git a/src/views/admin/unit/wearable/DamageReport.vue b/src/views/admin/unit/wearable/DamageReport.vue
index 8f2600d..508ff3b 100644
--- a/src/views/admin/unit/wearable/DamageReport.vue
+++ b/src/views/admin/unit/wearable/DamageReport.vue
@@ -4,21 +4,36 @@
       :items="damageReports"
       :totalCount="totalCount"
       :indicateLoading="false"
-      @load-data="(offset, count, search) => {}"
-      @search="(search) => {}"
+      @load-data="(offset, count, search) => fetchDamageReportForWearable(offset, count, search)"
+      @search="(search) => fetchDamageReportForWearable(0, 25, search, true)"
     >
       <template #pageRow="{ row }: { row: DamageReportViewModel }">
-        <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+        <RouterLink
+          :to="{ name: 'admin-unit-damage_report-overview', params: { damageReportId: 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.done" class="w-5 h-5" />
-            <PhotoIcon v-if="row.imageCount != 0" class="w-5 h-5" />
-            <p>{{ row.reportedAt }} - {{ row.status }}</p>
+            <p class="grow">{{ row.reportedAt }} - {{ 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.maintenance" class="cursor-pointer">
+                <WrenchScrewdriverIcon class="w-5 h-5" />
+              </div>
+            </div>
           </div>
           <div class="p-2">
-            <p v-if="row.reportedBy">gemeldet von: {{ row.reportedBy }}</p>
             <p>Beschreibung: {{ row.description }}</p>
           </div>
-        </div>
+        </RouterLink>
       </template>
     </Pagination>
   </div>
@@ -31,7 +46,7 @@ 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 } from "@heroicons/vue/24/outline";
+import { PhotoIcon, PencilSquareIcon, MapPinIcon, WrenchScrewdriverIcon, UserIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -44,13 +59,10 @@ export default defineComponent({
     ...mapState(useWearableDamageReportStore, ["damageReports", "loading", "totalCount"]),
   },
   mounted() {
-    this.fetchItem();
+    this.fetchDamageReportForWearable(0, 25, "", true);
   },
   methods: {
     ...mapActions(useWearableDamageReportStore, ["fetchDamageReportForWearable"]),
-    fetchItem() {
-      this.fetchDamageReportForWearable();
-    },
   },
 });
 </script>

From c29da7ca1d8592f0b2538b22cabbe450e76a1b40 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Thu, 17 Jul 2025 10:42:48 +0200
Subject: [PATCH 5/5] better readable date format

---
 src/components/admin/unit/damageReport/DamageReportListItem.vue | 2 +-
 src/views/admin/unit/equipment/DamageReport.vue                 | 2 +-
 src/views/admin/unit/vehicle/DamageReport.vue                   | 2 +-
 src/views/admin/unit/wearable/DamageReport.vue                  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/admin/unit/damageReport/DamageReportListItem.vue b/src/components/admin/unit/damageReport/DamageReportListItem.vue
index 6606064..c22e040 100644
--- a/src/components/admin/unit/damageReport/DamageReportListItem.vue
+++ b/src/components/admin/unit/damageReport/DamageReportListItem.vue
@@ -24,7 +24,7 @@
       </div>
     </div>
     <div class="p-2">
-      <p>gemeldet: {{ damageReport.reportedAt }}</p>
+      <p>gemeldet: {{ new Date(damageReport.reportedAt).toLocaleString("de") }}</p>
       <p>Status: {{ damageReport.status }}</p>
       <p v-if="damageReport.description">Beschreibung: {{ damageReport.description }}</p>
     </div>
diff --git a/src/views/admin/unit/equipment/DamageReport.vue b/src/views/admin/unit/equipment/DamageReport.vue
index 230bab5..857c63d 100644
--- a/src/views/admin/unit/equipment/DamageReport.vue
+++ b/src/views/admin/unit/equipment/DamageReport.vue
@@ -14,7 +14,7 @@
         >
           <div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
             <PencilSquareIcon v-if="!row.done" class="w-5 h-5" />
-            <p class="grow">{{ row.reportedAt }} - {{ row.status }}</p>
+            <p class="grow">{{ 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" />
diff --git a/src/views/admin/unit/vehicle/DamageReport.vue b/src/views/admin/unit/vehicle/DamageReport.vue
index 9cb01ad..eb2ac38 100644
--- a/src/views/admin/unit/vehicle/DamageReport.vue
+++ b/src/views/admin/unit/vehicle/DamageReport.vue
@@ -14,7 +14,7 @@
         >
           <div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
             <PencilSquareIcon v-if="!row.done" class="w-5 h-5" />
-            <p class="grow">{{ row.reportedAt }} - {{ row.status }}</p>
+            <p class="grow">{{ 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" />
diff --git a/src/views/admin/unit/wearable/DamageReport.vue b/src/views/admin/unit/wearable/DamageReport.vue
index 508ff3b..847a286 100644
--- a/src/views/admin/unit/wearable/DamageReport.vue
+++ b/src/views/admin/unit/wearable/DamageReport.vue
@@ -14,7 +14,7 @@
         >
           <div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
             <PencilSquareIcon v-if="!row.done" class="w-5 h-5" />
-            <p class="grow">{{ row.reportedAt }} - {{ row.status }}</p>
+            <p class="grow">{{ 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" />