damage report and inspections

src/components/admin/unit/inspectionPlan/TypeInspectionPlanListItem.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>{{ inspectionPlan.title }}</p>
+    </div>
+    <div class="p-2">
+      <p>Interval: {{ inspectionPlan.inspectionInterval }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspectionPlan/inspectionPlan.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    inspectionPlan: {
+      type: Object as PropType<InspectionPlanViewModel>,
+      default: {},
+    },
+  },
+});
+</script>

src/components/admin/unit/respiratoryGear/CreateRespiratoryGearModal.vue

@@ -101,8 +101,8 @@ import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } f
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
 import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
-import { useSalutationStore } from "../../../../stores/admin/configuration/salutation";
+import { useSalutationStore } from "@/stores/admin/configuration/salutation";
-import type { SalutationViewModel } from "../../../../viewmodels/admin/configuration/salutation.models";
+import type { SalutationViewModel } from "@/viewmodels/admin/configuration/salutation.models";
 </script>
 
 <script lang="ts">

src/components/admin/unit/respiratoryMission/CreateRespiratoryMissionModal.vue

@@ -101,8 +101,8 @@ import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } f
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
 import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
-import { useSalutationStore } from "../../../../stores/admin/configuration/salutation";
+import { useSalutationStore } from "@/stores/admin/configuration/salutation";
-import type { SalutationViewModel } from "../../../../viewmodels/admin/configuration/salutation.models";
+import type { SalutationViewModel } from "@/viewmodels/admin/configuration/salutation.models";
 </script>
 
 <script lang="ts">

src/components/admin/unit/respiratoryWearer/CreateRespiratoryWearerModal.vue

@@ -101,8 +101,8 @@ import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } f
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
 import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
-import { useSalutationStore } from "../../../../stores/admin/configuration/salutation";
+import { useSalutationStore } from "@/stores/admin/configuration/salutation";
-import type { SalutationViewModel } from "../../../../viewmodels/admin/configuration/salutation.models";
+import type { SalutationViewModel } from "@/viewmodels/admin/configuration/salutation.models";
 </script>
 
 <script lang="ts">

src/demodata/damageReport.ts

@@ -1,15 +1,13 @@
-import type { DamageReportViewModel } from "../viewmodels/admin/unit/damageReport/damageReport.models";
+import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport/damageReport.models";
 import { equipmentDemoData } from "./equipment";
 
 export const damageReportDemoData: Array<DamageReportViewModel> = [
   {
     id: "sdfgh",
     reported: new Date(),
-    status: "",
+    status: "in Arbeit",
     done: false,
     description: "knjgljna g",
     providedImage: undefined,
-    affectedId: equipmentDemoData[0].id,
-    affected: equipmentDemoData[0],
   },
 ];

src/demodata/equipment.ts

@@ -1,4 +1,4 @@
-import type { EquipmentViewModel } from "../viewmodels/admin/unit/equipment/equipment.models";
+import type { EquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
 import { equipmentTypeDemoData } from "./equipmentType";
 import { inspectionDemoData } from "./inspectionPlan";
 

src/demodata/equipmentType.ts

@@ -1,4 +1,4 @@
-import type { EquipmentTypeViewModel } from "../viewmodels/admin/unit/equipmentType/equipmentType.models";
+import type { EquipmentTypeViewModel } from "@/viewmodels/admin/unit/equipmentType/equipmentType.models";
 import { inspectionPlanDemoData } from "./inspectionPlan";
 
 export const equipmentTypeDemoData: Array<EquipmentTypeViewModel> = [

src/demodata/inspectionPlan.ts

@@ -1,9 +1,9 @@
 import type {
   InspectionPlanViewModel,
-  InspectionPointResultViewMoel,
+  InspectionPointResultViewModel,
   InspectionPointViewModel,
-  InspectionViewMoel,
+  InspectionViewModel,
-} from "../viewmodels/admin/unit/inspectionPlan/inspectionPlan.models";
+} from "@/viewmodels/admin/unit/inspectionPlan/inspectionPlan.models";
 import { equipmentTypeDemoData } from "./equipmentType";
 
 export const inspectionPointDemoData: Array<InspectionPointViewModel> = [
@@ -42,8 +42,6 @@ export const inspectionPlanDemoData: Array<InspectionPlanViewModel> = [
     remindTime: "1-m",
     created: new Date(),
     inspectionPoints: [inspectionPointDemoData[0], inspectionPointDemoData[1], inspectionPointDemoData[2]],
-    equipmentTypeId: equipmentTypeDemoData[0].id,
-    equipmentType: equipmentTypeDemoData[0],
   },
   {
     id: "cba",
@@ -53,12 +51,10 @@ export const inspectionPlanDemoData: Array<InspectionPlanViewModel> = [
     remindTime: "22/10",
     created: new Date(),
     inspectionPoints: [inspectionPointDemoData[3]],
-    equipmentTypeId: equipmentTypeDemoData[0].id,
-    equipmentType: equipmentTypeDemoData[0],
   },
 ];
 
-export const inspectionPointResultDemoData: Array<InspectionPointResultViewMoel> = [
+export const inspectionPointResultDemoData: Array<InspectionPointResultViewModel> = [
   {
     inspectionId: "jkvshdfg",
     inspectionVersionedPlanId: inspectionPlanDemoData[0].id,
@@ -85,9 +81,11 @@ export const inspectionPointResultDemoData: Array<InspectionPointResultViewMoel>
   },
 ];
 
-export const inspectionDemoData: Array<InspectionViewMoel> = [
+export const inspectionDemoData: Array<InspectionViewModel> = [
   {
     id: "jkvshdfg",
+    inspectionPlanId: inspectionPlanDemoData[0].id,
+    inspectionPlan: inspectionPlanDemoData[0],
     inspectionVersionedPlanId: inspectionPlanDemoData[0].id,
     inspectionVersionedPlan: inspectionPlanDemoData[0],
     context: "",
@@ -97,4 +95,17 @@ export const inspectionDemoData: Array<InspectionViewMoel> = [
     isOpen: true,
     checks: [inspectionPointResultDemoData[0], inspectionPointResultDemoData[1], inspectionPointResultDemoData[2]],
   },
+  {
+    id: "jkvshdfg",
+    inspectionPlanId: inspectionPlanDemoData[0].id,
+    inspectionPlan: inspectionPlanDemoData[0],
+    inspectionVersionedPlanId: inspectionPlanDemoData[0].id,
+    inspectionVersionedPlan: inspectionPlanDemoData[0],
+    context: "sohgfpb",
+    created: new Date(),
+    finished: new Date(),
+    nextInspection: new Date(),
+    isOpen: false,
+    checks: [inspectionPointResultDemoData[0], inspectionPointResultDemoData[1], inspectionPointResultDemoData[2]],
+  },
 ];

src/demodata/respiratoryGear.ts

@@ -1,4 +1,4 @@
-import type { RespiratoryGearViewModel } from "../viewmodels/admin/unit/respiratoryGear/respiratoryGear.models";
+import type { RespiratoryGearViewModel } from "@/viewmodels/admin/unit/respiratoryGear/respiratoryGear.models";
 import { equipmentDemoData } from "./equipment";
 
 export const respiratoryGearDemoData: Array<RespiratoryGearViewModel> = [

src/demodata/respiratoryMission.ts

@@ -1,4 +1,4 @@
-import type { RespiratoryMissionViewModel } from "../viewmodels/admin/unit/respiratoryMission/respiratoryMission.models";
+import type { RespiratoryMissionViewModel } from "@/viewmodels/admin/unit/respiratoryMission/respiratoryMission.models";
 import { equipmentDemoData } from "./equipment";
 
 export const respiratoryMissionDemoData: Array<RespiratoryMissionViewModel> = [

src/demodata/respiratoryWearer.ts

@@ -1,4 +1,4 @@
-import type { RespiratoryWearerViewModel } from "../viewmodels/admin/unit/respiratoryWearer/respiratoryWearer.models";
+import type { RespiratoryWearerViewModel } from "@/viewmodels/admin/unit/respiratoryWearer/respiratoryWearer.models";
 
 export const respiratoryWearerDemoData: Array<RespiratoryWearerViewModel> = [
   {

src/demodata/vehicle.ts

@@ -1,4 +1,4 @@
-import type { VehicleViewModel } from "../viewmodels/admin/unit/vehicle/vehicle.models";
+import type { VehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
 import { vehicleTypeDemoData } from "./vehicleType";
 
 export const vehicleDemoData: Array<VehicleViewModel> = [

src/demodata/vehicleType.ts

@@ -1,4 +1,4 @@
-import type { VehicleTypeViewModel } from "../viewmodels/admin/unit/vehicleType/vehicleType.models";
+import type { VehicleTypeViewModel } from "@/viewmodels/admin/unit/vehicleType/vehicleType.models";
 
 export const vehicleTypeDemoData: Array<VehicleTypeViewModel> = [
   {

src/demodata/wearable.ts

@@ -1,4 +1,4 @@
-import type { WearableViewModel } from "../viewmodels/admin/unit/wearable/wearable.models";
+import type { WearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
 import { wearableTypeDemoData } from "./wearableType";
 
 export const wearableDemoData: Array<WearableViewModel> = [

src/demodata/wearableType.ts

@@ -1,4 +1,4 @@
-import type { WearableTypeViewModel } from "../viewmodels/admin/unit/wearableType/wearableType.models";
+import type { WearableTypeViewModel } from "@/viewmodels/admin/unit/wearableType/wearableType.models";
 
 export const wearableTypeDemoData: Array<WearableTypeViewModel> = [
   {

src/router/index.ts

@@ -367,13 +367,13 @@ const router = createRouter({
                     {
                       path: "inspection",
                       name: "admin-unit-equipment-inspection",
-                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      component: () => import("@/views/admin/unit/equipment/Inspection.vue"),
                       props: true,
                     },
                     {
                       path: "report",
                       name: "admin-unit-equipment-damage_report",
-                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      component: () => import("@/views/admin/unit/equipment/DamageReport.vue"),
                       props: true,
                     },
                     {
@@ -418,7 +418,7 @@ const router = createRouter({
                     {
                       path: "overview",
                       name: "admin-unit-vehicle-overview",
-                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      component: () => import("@/views/admin/unit/vehicle/Overview.vue"),
                       props: true,
                     },
                     {
@@ -430,13 +430,13 @@ const router = createRouter({
                     {
                       path: "inspection",
                       name: "admin-unit-vehicle-inspection",
-                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      component: () => import("@/views/admin/unit/vehicle/Inspection.vue"),
                       props: true,
                     },
                     {
                       path: "report",
                       name: "admin-unit-vehicle-damage_report",
-                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      component: () => import("@/views/admin/unit/vehicle/DamageReport.vue"),
                       props: true,
                     },
                     {

src/router/unit/equipmentType.ts

@@ -1,10 +1,11 @@
 import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
+import { useEquipmentTypeInspectionPlanStore } from "@/stores/admin/unit/equipmentType/inspectionPlan";
 
 export async function setEquipmentTypeId(to: any, from: any, next: any) {
   const equipmentTypeStore = useEquipmentTypeStore();
   equipmentTypeStore.activeEquipmentType = to.params?.equipmentTypeId ?? null;
 
-  //useXYStore().$reset();
+  useEquipmentTypeInspectionPlanStore().$reset();
 
   next();
 }
@@ -14,7 +15,7 @@ export async function resetEquipmentTypeStores(to: any, from: any, next: any) {
   equipmentTypeStore.activeEquipmentType = null;
   equipmentTypeStore.activeEquipmentTypeObj = null;
 
-  //useXYStore().$reset();
+  useEquipmentTypeInspectionPlanStore().$reset();
 
   next();
 }

src/router/unit/vehicleType.ts

@@ -1,10 +1,11 @@
 import { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
+import { useVehicleTypeInspectionPlanStore } from "@/stores/admin/unit/vehicleType/inspectionPlan";
 
 export async function setVehicleTypeId(to: any, from: any, next: any) {
   const vehicleTypeStore = useVehicleTypeStore();
   vehicleTypeStore.activeVehicleType = to.params?.vehicleTypeId ?? null;
 
-  //useXYStore().$reset();
+  useVehicleTypeInspectionPlanStore().$reset();
 
   next();
 }
@@ -14,7 +15,7 @@ export async function resetVehicleTypeStores(to: any, from: any, next: any) {
   vehicleTypeStore.activeVehicleType = null;
   vehicleTypeStore.activeVehicleTypeObj = null;
 
-  //useXYStore().$reset();
+  useVehicleTypeInspectionPlanStore().$reset();
 
   next();
 }

src/stores/admin/unit/damageReport/damageReport.ts

@@ -6,8 +6,8 @@ import type {
 } from "@/viewmodels/admin/unit/damageReport/damageReport.models";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
-import type { VehicleViewModel } from "../../../../viewmodels/admin/unit/vehicle/vehicle.models";
+import type { VehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
-import { damageReportDemoData } from "../../../../demodata/damageReport";
+import { damageReportDemoData } from "@/demodata/damageReport";
 
 export const useDamageReportStore = defineStore("damageReport", {
   state: () => {

src/stores/admin/unit/equipment/damageReport.ts

@@ -0,0 +1,48 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import { useEquipmentStore } from "./equipment";
+import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport/damageReport.models";
+import { damageReportDemoData } from "@/demodata/damageReport";
+
+export const useEquipmentDamageReportStore = defineStore("equipmentDamageReport", {
+  state: () => {
+    return {
+      damageReports: [] as Array<DamageReportViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchDamageReportForEquipment(offset = 0, count = 25, search = "", clear = false) {
+      const equipmentId = useEquipmentStore().activeEquipment;
+      this.damageReports = damageReportDemoData.map((e, i) => ({ ...e, tab_pos: i }));
+      this.totalCount = this.damageReports.length;
+      this.loading = "fetched";
+      return;
+      if (clear) this.damageReports = [];
+      this.loading = "loading";
+      http
+        .get(
+          `/admin/equipment/${equipmentId}/inspection?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`
+        )
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.inspections
+            .filter((elem: DamageReportViewModel) => this.damageReports.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: DamageReportViewModel, index: number): DamageReportViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: DamageReportViewModel & { tab_pos: number }) => {
+              this.damageReports.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+  },
+});

src/stores/admin/unit/equipment/equipment.ts

@@ -6,7 +6,7 @@ import type {
 } from "@/viewmodels/admin/unit/equipment/equipment.models";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
-import { equipmentDemoData } from "../../../../demodata/equipment";
+import { equipmentDemoData } from "@/demodata/equipment";
 
 export const useEquipmentStore = defineStore("equipment", {
   state: () => {
@@ -69,7 +69,7 @@ export const useEquipmentStore = defineStore("equipment", {
     },
     fetchEquipmentByActiveId() {
       this.activeEquipmentObj = equipmentDemoData.find((e) => e.id == this.activeEquipment) as EquipmentViewModel;
-      this.loading = "fetched";
+      this.loadingActive = "fetched";
       return;
       this.loadingActive = "loading";
       http

src/stores/admin/unit/equipment/inspection.ts

@@ -0,0 +1,48 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import type { InspectionViewModel } from "@/viewmodels/admin/unit/inspectionPlan/inspectionPlan.models";
+import { inspectionDemoData } from "@/demodata/inspectionPlan";
+import { useEquipmentStore } from "./equipment";
+
+export const useEquipmentInspectionStore = defineStore("equipmentInspection", {
+  state: () => {
+    return {
+      inspections: [] as Array<InspectionViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchInspectionForEquipment(offset = 0, count = 25, search = "", clear = false) {
+      const equipmentId = useEquipmentStore().activeEquipment;
+      this.inspections = inspectionDemoData.map((e, i) => ({ ...e, tab_pos: i }));
+      this.totalCount = this.inspections.length;
+      this.loading = "fetched";
+      return;
+      if (clear) this.inspections = [];
+      this.loading = "loading";
+      http
+        .get(
+          `/admin/equipment/${equipmentId}/inspection?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`
+        )
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.inspections
+            .filter((elem: InspectionViewModel) => this.inspections.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: InspectionViewModel, index: number): InspectionViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: InspectionViewModel & { tab_pos: number }) => {
+              this.inspections.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+  },
+});

src/stores/admin/unit/equipmentType/equipmentType.ts

@@ -6,7 +6,7 @@ import type {
 } from "@/viewmodels/admin/unit/equipmentType/equipmentType.models";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
-import { equipmentTypeDemoData } from "../../../../demodata/equipmentType";
+import { equipmentTypeDemoData } from "@/demodata/equipmentType";
 
 export const useEquipmentTypeStore = defineStore("equipmentType", {
   state: () => {

src/stores/admin/unit/equipmentType/inspectionPlan.ts

@@ -0,0 +1,41 @@
+import { defineStore } from "pinia";
+import type {
+  EquipmentTypeViewModel,
+  CreateEquipmentTypeViewModel,
+  UpdateEquipmentTypeViewModel,
+} from "@/viewmodels/admin/unit/equipmentType/equipmentType.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+import { equipmentTypeDemoData } from "@/demodata/equipmentType";
+import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspectionPlan/inspectionPlan.models";
+import { inspectionPlanDemoData } from "@/demodata/inspectionPlan";
+import { useEquipmentTypeStore } from "./equipmentType";
+
+export const useEquipmentTypeInspectionPlanStore = defineStore("equipmentTypeInspectionPlan", {
+  state: () => {
+    return {
+      inspectionPlans: [] as Array<InspectionPlanViewModel>,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchInspectionPlanForEquipmentType() {
+      const equipmentTypeId = useEquipmentTypeStore().activeEquipmentType;
+      this.inspectionPlans = inspectionPlanDemoData.filter(
+        (ipdd) => ipdd.typeId == equipmentTypeId && ipdd.assigned == "equipment"
+      );
+      this.loading = "fetched";
+      return;
+      this.loading = "loading";
+      http
+        .get(`/admin/equipmentType/${equipmentTypeId}/inspectionPlan`)
+        .then((result) => {
+          this.inspectionPlans = result.data;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+  },
+});

src/stores/admin/unit/respiratoryGear/respiratoryGear.ts

@@ -6,7 +6,7 @@ import type {
 } from "@/viewmodels/admin/unit/respiratoryGear/respiratoryGear.models";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
-import { respiratoryGearDemoData } from "../../../../demodata/respiratoryGear";
+import { respiratoryGearDemoData } from "@/demodata/respiratoryGear";
 
 export const useRespiratoryGearStore = defineStore("respiratoryGear", {
   state: () => {

src/stores/admin/unit/respiratoryMission/respiratoryMission.ts

@@ -6,7 +6,7 @@ import type {
 } from "@/viewmodels/admin/unit/respiratoryMission/respiratoryMission.models";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
-import { respiratoryMissionDemoData } from "../../../../demodata/respiratoryMission";
+import { respiratoryMissionDemoData } from "@/demodata/respiratoryMission";
 
 export const useRespiratoryMissionStore = defineStore("respiratoryMission", {
   state: () => {

src/stores/admin/unit/respiratoryWearer/respiratoryWearer.ts

@@ -6,7 +6,7 @@ import type {
 } from "@/viewmodels/admin/unit/respiratoryWearer/respiratoryWearer.models";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
-import { respiratoryWearerDemoData } from "../../../../demodata/respiratoryWearer";
+import { respiratoryWearerDemoData } from "@/demodata/respiratoryWearer";
 
 export const useRespiratoryWearerStore = defineStore("respiratoryWearer", {
   state: () => {

src/stores/admin/unit/vehicle/damageReport.ts

@@ -0,0 +1,48 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import { useVehicleStore } from "./vehicle";
+import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport/damageReport.models";
+import { damageReportDemoData } from "@/demodata/damageReport";
+
+export const useVehicleDamageReportStore = defineStore("vehicleDamageReport", {
+  state: () => {
+    return {
+      damageReports: [] as Array<DamageReportViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchDamageReportForVehicle(offset = 0, count = 25, search = "", clear = false) {
+      const vehicleId = useVehicleStore().activeVehicle;
+      this.damageReports = damageReportDemoData.map((e, i) => ({ ...e, tab_pos: i }));
+      this.totalCount = this.damageReports.length;
+      this.loading = "fetched";
+      return;
+      if (clear) this.damageReports = [];
+      this.loading = "loading";
+      http
+        .get(
+          `/admin/vehicle/${vehicleId}/inspection?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`
+        )
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.inspections
+            .filter((elem: DamageReportViewModel) => this.damageReports.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: DamageReportViewModel, index: number): DamageReportViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: DamageReportViewModel & { tab_pos: number }) => {
+              this.damageReports.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+  },
+});

src/stores/admin/unit/vehicle/inspection.ts

@@ -0,0 +1,48 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import type { InspectionViewModel } from "@/viewmodels/admin/unit/inspectionPlan/inspectionPlan.models";
+import { inspectionDemoData } from "@/demodata/inspectionPlan";
+import { useVehicleStore } from "./vehicle";
+
+export const useVehicleInspectionStore = defineStore("vehicleInspection", {
+  state: () => {
+    return {
+      inspections: [] as Array<InspectionViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchInspectionForVehicle(offset = 0, count = 25, search = "", clear = false) {
+      const vehicleId = useVehicleStore().activeVehicle;
+      this.inspections = inspectionDemoData.map((e, i) => ({ ...e, tab_pos: i }));
+      this.totalCount = this.inspections.length;
+      this.loading = "fetched";
+      return;
+      if (clear) this.inspections = [];
+      this.loading = "loading";
+      http
+        .get(
+          `/admin/vehicle/${vehicleId}/inspection?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`
+        )
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.inspections
+            .filter((elem: InspectionViewModel) => this.inspections.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: InspectionViewModel, index: number): InspectionViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: InspectionViewModel & { tab_pos: number }) => {
+              this.inspections.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+  },
+});

src/stores/admin/unit/vehicle/vehicle.ts

@@ -6,7 +6,7 @@ import type {
 } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
-import { vehicleDemoData } from "../../../../demodata/vehicle";
+import { vehicleDemoData } from "@/demodata/vehicle";
 
 export const useVehicleStore = defineStore("vehicle", {
   state: () => {
@@ -69,7 +69,7 @@ export const useVehicleStore = defineStore("vehicle", {
     },
     fetchVehicleByActiveId() {
       this.activeVehicleObj = vehicleDemoData.find((e) => e.id == this.activeVehicle) as VehicleViewModel;
-      this.loading = "fetched";
+      this.loadingActive = "fetched";
       return;
       this.loadingActive = "loading";
       http

src/stores/admin/unit/vehicleType/inspectionPlan.ts

@@ -0,0 +1,42 @@
+import { defineStore } from "pinia";
+import type {
+  VehicleTypeViewModel,
+  CreateVehicleTypeViewModel,
+  UpdateVehicleTypeViewModel,
+} from "@/viewmodels/admin/unit/vehicleType/vehicleType.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+import { vehicleTypeDemoData } from "@/demodata/vehicleType";
+import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspectionPlan/inspectionPlan.models";
+import { inspectionPlanDemoData } from "@/demodata/inspectionPlan";
+import { useVehicleTypeStore } from "./vehicleType";
+
+export const useVehicleTypeInspectionPlanStore = defineStore("vehicleTypeInspectionPlan", {
+  state: () => {
+    return {
+      inspectionPlans: [] as Array<InspectionPlanViewModel>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchInspectionPlanForVehicleType() {
+      const vehicleTypeId = useVehicleTypeStore().activeVehicleType;
+      this.inspectionPlans = inspectionPlanDemoData.filter(
+        (ipdd) => ipdd.typeId == vehicleTypeId && ipdd.assigned == "vehicle"
+      );
+      this.loading = "fetched";
+      return;
+      this.loading = "loading";
+      http
+        .get(`/admin/vehicleType/${vehicleTypeId}/inspectionPlan`)
+        .then((result) => {
+          this.inspectionPlans = result.data;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+  },
+});

src/stores/admin/unit/vehicleType/vehicleType.ts

@@ -6,7 +6,7 @@ import type {
 } from "@/viewmodels/admin/unit/vehicleType/vehicleType.models";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
-import { vehicleTypeDemoData } from "../../../../demodata/vehicleType";
+import { vehicleTypeDemoData } from "@/demodata/vehicleType";
 
 export const useVehicleTypeStore = defineStore("vehicleType", {
   state: () => {

src/stores/admin/unit/wearable/wearable.ts

@@ -6,7 +6,7 @@ import type {
 } from "@/viewmodels/admin/unit/wearable/wearable.models";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
-import { wearableDemoData } from "../../../../demodata/wearable";
+import { wearableDemoData } from "@/demodata/wearable";
 
 export const useWearableStore = defineStore("wearable", {
   state: () => {
@@ -69,7 +69,7 @@ export const useWearableStore = defineStore("wearable", {
     },
     fetchWearableByActiveId() {
       this.activeWearableObj = wearableDemoData.find((e) => e.id == this.activeWearable) as WearableViewModel;
-      this.loading = "fetched";
+      this.loadingActive = "fetched";
       return;
       this.loadingActive = "loading";
       http

src/stores/admin/unit/wearableType/wearableType.ts

@@ -6,7 +6,7 @@ import type {
 } from "@/viewmodels/admin/unit/wearableType/wearableType.models";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
-import { wearableTypeDemoData } from "../../../../demodata/wearableType";
+import { wearableTypeDemoData } from "@/demodata/wearableType";
 
 export const useWearableTypeStore = defineStore("wearableType", {
   state: () => {

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

@@ -1,5 +1,3 @@
-import type { EquipmentViewModel } from "../equipment/equipment.models";
-
 export interface DamageReportViewModel {
   id: string;
   reported: Date;
@@ -7,13 +5,12 @@ export interface DamageReportViewModel {
   done: boolean;
   description: string;
   providedImage?: string;
-  affectedId: string;
-  affected: EquipmentViewModel;
 }
 
 export interface CreateDamageReportViewModel {
   description: string;
   affectedId: string;
+  affected: "equipment" | "vehicle" | "wearable";
 }
 
 export interface UpdateDamageReportViewModel {

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

@@ -1,5 +1,5 @@
 import type { EquipmentTypeViewModel } from "../equipmentType/equipmentType.models";
-import type { InspectionViewMoel } from "../inspectionPlan/inspectionPlan.models";
+import type { InspectionViewModel } from "../inspectionPlan/inspectionPlan.models";
 
 export interface EquipmentViewModel {
   id: string;
@@ -8,7 +8,7 @@ export interface EquipmentViewModel {
   location: string;
   equipmentTypeId: string;
   equipmentType: EquipmentTypeViewModel;
-  inspections: Array<InspectionViewMoel>;
+  inspections: Array<InspectionViewModel>;
 }
 
 export interface CreateEquipmentViewModel {

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

@@ -1,5 +1,3 @@
-import type { EquipmentTypeViewModel } from "../equipmentType/equipmentType.models";
-
 export type PlanTimeDefinition = `${number}-${"d" | "m" | "y"}` | `${number}/${number | "*"}`;
 
 export interface InspectionPlanViewModel {
@@ -10,8 +8,6 @@ export interface InspectionPlanViewModel {
   version: number;
   created: Date;
   inspectionPoints: InspectionPointViewModel[];
-  equipmentTypeId: string;
-  equipmentType: EquipmentTypeViewModel;
 }
 
 export interface InspectionVersionedPlanViewModel {
@@ -19,15 +15,14 @@ export interface InspectionVersionedPlanViewModel {
   version: number;
   created: Date;
   inspectionPoints: InspectionPointViewModel[];
-  equipmentTypeId: string;
-  equipmentType: EquipmentTypeViewModel;
 }
 
 export interface CreateInspectionPlanViewModel {
   title: string;
   inspectionInterval: PlanTimeDefinition;
   remindTime: PlanTimeDefinition;
-  equipmentTypeId: string;
+  typeId: string;
+  assigned: "vehicle" | "equipment";
 }
 
 export interface UpdateInspectionPlanViewModel {
@@ -44,8 +39,10 @@ export interface InspectionPointViewModel {
   type: "iO-niO" | "text" | "number";
 }
 
-export interface InspectionViewMoel {
+export interface InspectionViewModel {
   id: string;
+  inspectionPlanId: string;
+  inspectionPlan: InspectionPlanViewModel;
   inspectionVersionedPlanId: string;
   inspectionVersionedPlan: InspectionVersionedPlanViewModel;
   context: string;
@@ -53,10 +50,10 @@ export interface InspectionViewMoel {
   finished?: Date;
   isOpen: boolean;
   nextInspection?: Date;
-  checks: Array<InspectionPointResultViewMoel>;
+  checks: Array<InspectionPointResultViewModel>;
 }
 
-export interface InspectionPointResultViewMoel {
+export interface InspectionPointResultViewModel {
   inspectionId: string;
   inspectionVersionedPlanId: string;
   inspectionVersionedPlan: InspectionVersionedPlanViewModel;

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

@@ -1,4 +1,4 @@
-import type { MemberViewModel } from "../../club/member/member.models";
+import type { MemberViewModel } from "@/club/member/member.models";
 
 export interface RespiratoryWearerViewModel {
   id: string;

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

@@ -1,4 +1,4 @@
-import type { InspectionViewMoel } from "../inspectionPlan/inspectionPlan.models";
+import type { InspectionViewModel } from "../inspectionPlan/inspectionPlan.models";
 import type { VehicleTypeViewModel } from "../vehicleType/vehicleType.models";
 
 export interface VehicleViewModel {
@@ -8,7 +8,7 @@ export interface VehicleViewModel {
   location: string;
   vehicleTypeId: string;
   vehicleType: VehicleTypeViewModel;
-  inspections: Array<InspectionViewMoel>;
+  inspections: Array<InspectionViewModel>;
 }
 
 export interface CreateVehicleViewModel {

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

@@ -1,4 +1,4 @@
-import type { MemberViewModel } from "../../club/member/member.models";
+import type { MemberViewModel } from "@/club/member/member.models";
 import type { WearableTypeViewModel } from "../wearableType/wearableType.models";
 
 export interface WearableViewModel {

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

@@ -0,0 +1,55 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full">
+    <Pagination
+      :items="damageReports"
+      :totalCount="totalCount"
+      :indicateLoading="false"
+      @load-data="(offset, count, search) => {}"
+      @search="(search) => {}"
+    >
+      <template #pageRow="{ row }: { row: DamageReportViewModel }">
+        <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.done" class="w-5 h-5" />
+            <PhotoIcon v-if="row.providedImage" />
+            <p>{{ row.reported }} - {{ row.status }}</p>
+          </div>
+          <div class="p-2">
+            <p>Beschreibung: {{ row.description }}</p>
+          </div>
+        </div>
+      </template>
+    </Pagination>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useEquipmentDamageReportStore } from "@/stores/admin/unit/equipment/damageReport";
+import Pagination from "@/components/Pagination.vue";
+import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport/damageReport.models";
+import { PhotoIcon, PencilSquareIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    equipmentId: String,
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useEquipmentDamageReportStore, ["damageReports", "loading", "totalCount"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  methods: {
+    ...mapActions(useEquipmentDamageReportStore, ["fetchDamageReportForEquipment"]),
+    fetchItem() {
+      this.fetchDamageReportForEquipment();
+    },
+  },
+});
+</script>

src/views/admin/unit/equipment/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', 'equipment')" 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 { useEquipmentInspectionStore } from "@/stores/admin/unit/equipment/inspection";
+import { PencilSquareIcon } from "@heroicons/vue/24/outline";
+import Pagination from "@/components/Pagination.vue";
+import type { InspectionViewModel } from "@/viewmodels/admin/unit/inspectionPlan/inspectionPlan.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    equipmentId: String,
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useEquipmentInspectionStore, ["inspections", "loading", "totalCount"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  methods: {
+    ...mapActions(useEquipmentInspectionStore, ["fetchInspectionForEquipment"]),
+    fetchItem() {
+      this.fetchInspectionForEquipment();
+    },
+  },
+});
+</script>

src/views/admin/unit/equipmentType/InspectionPlans.vue

@@ -1,42 +1,42 @@
 <template>
   <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
-    <Pagination
+    <div v-if="inspectionPlans != null" class="flex flex-col gap-2 w-full">
-      :items="[]"
+      <TypeInspectionPlanListItem v-for="plan in inspectionPlans" :inspection-plan="plan" />
-      :totalCount="0"
-      :indicateLoading="false"
-      @load-data="(offset, count, search) => {}"
-      @search="(search) => {}"
-    >
-      <template #pageRow="{ row }: { row: { id: string } }">
-        <p>{{ row }}</p>
-      </template>
-    </Pagination>
-
-    <div class="flex flex-row gap-4">
-      <button v-if="can('create', 'unit', 'equipment_type')" primary class="w-fit!" @click="">
-        Prüfplan erstellen
-      </button>
     </div>
+    <Spinner v-if="loading == 'loading'" class="mx-auto" />
+    <p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">&#8634; laden fehlgeschlagen</p>
+  </div>
+  <div class="flex flex-row gap-4">
+    <button v-if="can('create', 'unit', 'equipment_type')" primary class="w-fit!" @click="">Prüfplan erstellen</button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
-import Pagination from "@/components/Pagination.vue";
 import { useAbilityStore } from "@/stores/ability";
+import { useEquipmentTypeInspectionPlanStore } from "@/stores/admin/unit/equipmentType/inspectionPlan";
+import Spinner from "@/components/Spinner.vue";
+import TypeInspectionPlanListItem from "@/components/admin/unit/inspectionPlan/TypeInspectionPlanListItem.vue";
 </script>
 
 <script lang="ts">
 export default defineComponent({
-  data() {
+  props: {
-    return {
+    equipmentTypeId: String,
-      currentPage: 0,
-      maxEntriesPerPage: 25,
-    };
   },
   computed: {
     ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useEquipmentTypeInspectionPlanStore, ["inspectionPlans", "loading"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  methods: {
+    ...mapActions(useEquipmentTypeInspectionPlanStore, ["fetchInspectionPlanForEquipmentType"]),
+    fetchItem() {
+      this.fetchInspectionPlanForEquipmentType();
+    },
   },
 });
 </script>

src/views/admin/unit/inspectionPlan/CreateInspectionPlan.vue

@@ -101,8 +101,8 @@ import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
 import type { CreateInspectionPlanViewModel } from "@/viewmodels/admin/unit/inspectionPlan/inspectionPlan.models";
 import ScanInput from "@/components/ScanInput.vue";
-import type { EquipmentTypeViewModel } from "../../../../viewmodels/admin/unit/equipmentType/equipmentType.models";
+import type { EquipmentTypeViewModel } from "@/viewmodels/admin/unit/equipmentType/equipmentType.models";
-import { useEquipmentTypeStore } from "../../../../stores/admin/unit/equipmentType/equipmentType";
+import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
 import EquipmentTypeSearchSelect from "@/components/search/EquipmentTypeSearchSelect.vue";
 import VehicleTypeSearchSelect from "@/components/search/VehicleTypeSearchSelect.vue";
 </script>

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

@@ -0,0 +1,55 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full">
+    <Pagination
+      :items="damageReports"
+      :totalCount="totalCount"
+      :indicateLoading="false"
+      @load-data="(offset, count, search) => {}"
+      @search="(search) => {}"
+    >
+      <template #pageRow="{ row }: { row: DamageReportViewModel }">
+        <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.done" class="w-5 h-5" />
+            <PhotoIcon v-if="row.providedImage" />
+            <p>{{ row.reported }} - {{ row.status }}</p>
+          </div>
+          <div class="p-2">
+            <p>Beschreibung: {{ row.description }}</p>
+          </div>
+        </div>
+      </template>
+    </Pagination>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useVehicleDamageReportStore } from "@/stores/admin/unit/vehicle/damageReport";
+import Pagination from "@/components/Pagination.vue";
+import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport/damageReport.models";
+import { PhotoIcon, PencilSquareIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    vehicleId: String,
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useVehicleDamageReportStore, ["damageReports", "loading", "totalCount"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  methods: {
+    ...mapActions(useVehicleDamageReportStore, ["fetchDamageReportForVehicle"]),
+    fetchItem() {
+      this.fetchDamageReportForVehicle();
+    },
+  },
+});
+</script>

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>

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

@@ -0,0 +1,51 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="activeVehicleObj != null" class="flex flex-col gap-2 w-full">
+      <div>
+        <label for="type">Typ</label>
+        <input type="text" id="type" :value="activeVehicleObj.vehicleType.type" readonly />
+      </div>
+      <div>
+        <label for="name">Bezeichnung</label>
+        <input type="text" id="name" :value="activeVehicleObj.name" readonly />
+      </div>
+      <div>
+        <label for="code">Code</label>
+        <input type="text" id="code" :value="activeVehicleObj.code" readonly />
+      </div>
+      <div>
+        <label for="location">Verortung</label>
+        <input type="text" id="location" :value="activeVehicleObj.location" readonly />
+      </div>
+    </div>
+
+    <Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
+    <p v-else-if="loadingActive == 'failed'" @click="fetchVehicleByActiveId" class="cursor-pointer">
+      &#8634; laden fehlgeschlagen
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import Spinner from "@/components/Spinner.vue";
+import { useVehicleStore } from "@/stores/admin/unit/vehicle/vehicle";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    vehicleId: String,
+  },
+  computed: {
+    ...mapState(useVehicleStore, ["activeVehicleObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchVehicleByActiveId();
+  },
+  methods: {
+    ...mapActions(useVehicleStore, ["fetchVehicleByActiveId"]),
+  },
+});
+</script>

src/views/admin/unit/vehicleType/InspectionPlans.vue

@@ -1,42 +1,43 @@
 <template>
   <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
-    <Pagination
+    <div v-if="inspectionPlans != null" class="flex flex-col gap-2 w-full">
-      :items="[]"
+      <TypeInspectionPlanListItem v-for="plan in inspectionPlans" :inspection-plan="plan" />
-      :totalCount="0"
-      :indicateLoading="false"
-      @load-data="(offset, count, search) => {}"
-      @search="(search) => {}"
-    >
-      <template #pageRow="{ row }: { row: { id: string } }">
-        <p>{{ row }}</p>
-      </template>
-    </Pagination>
-
-    <div class="flex flex-row gap-4">
-      <button v-if="can('create', 'unit', 'equipment_type')" primary class="w-fit!" @click="">
-        Prüfplan erstellen
-      </button>
     </div>
+    <Spinner v-if="loading == 'loading'" class="mx-auto" />
+    <p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">&#8634; laden fehlgeschlagen</p>
+  </div>
+
+  <div class="flex flex-row gap-4">
+    <button v-if="can('create', 'unit', 'vehicle_type')" primary class="w-fit!" @click="">Prüfplan erstellen</button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
-import Pagination from "@/components/Pagination.vue";
 import { useAbilityStore } from "@/stores/ability";
+import { useVehicleTypeInspectionPlanStore } from "@/stores/admin/unit/vehicleType/inspectionPlan";
+import TypeInspectionPlanListItem from "@/components/admin/unit/inspectionPlan/TypeInspectionPlanListItem.vue";
+import Spinner from "@/components/Spinner.vue";
 </script>
 
 <script lang="ts">
 export default defineComponent({
-  data() {
+  props: {
-    return {
+    vehicleTypeId: String,
-      currentPage: 0,
-      maxEntriesPerPage: 25,
-    };
   },
   computed: {
     ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useVehicleTypeInspectionPlanStore, ["inspectionPlans", "loading"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  methods: {
+    ...mapActions(useVehicleTypeInspectionPlanStore, ["fetchInspectionPlanForVehicleType"]),
+    fetchItem() {
+      this.fetchInspectionPlanForVehicleType();
+    },
   },
 });
 </script>