damage report and inspections

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

@@ -0,0 +1,58 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full">
+    <Pagination
+      :items="inspections"
+      :totalCount="totalCount"
+      :indicateLoading="false"
+      @load-data="(offset, count, search) => {}"
+      @search="(search) => {}"
+    >
+      <template #pageRow="{ row }: { row: InspectionViewModel }">
+        <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 gap-2 items-center">
+            <PencilSquareIcon v-if="row.isOpen" class="w-5 h-5" />
+            <p>{{ row.inspectionPlan.title }} - {{ row.finished }}</p>
+          </div>
+          <div class="p-2">
+            <p v-if="row.context">Kontext: {{ row.context }}</p>
+            <p v-if="row.nextInspection">nächste Inspektion: {{ row.nextInspection }}</p>
+          </div>
+        </div>
+      </template>
+    </Pagination>
+    <div class="flex flex-row gap-4">
+      <button v-if="can('create', 'unit', 'vehicle')" primary class="w-fit!" @click="">Prüfung durchführen</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useVehicleInspectionStore } from "@/stores/admin/unit/vehicle/inspection";
+import { PencilSquareIcon } from "@heroicons/vue/24/outline";
+import Pagination from "@/components/Pagination.vue";
+import type { InspectionViewModel } from "@/viewmodels/admin/unit/inspectionPlan/inspectionPlan.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    vehicleId: String,
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useVehicleInspectionStore, ["inspections", "loading", "totalCount"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  methods: {
+    ...mapActions(useVehicleInspectionStore, ["fetchInspectionForVehicle"]),
+    fetchItem() {
+      this.fetchInspectionForVehicle();
+    },
+  },
+});
+</script>