base components on collections

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

@@ -6,7 +6,38 @@
       </div>
     </template>
     <template #diffMain>
-      <div class="flex flex-col w-full h-full gap-2 justify-center px-7"></div>
+      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+        <div class="w-full flex flex-row max-lg:flex-wrap justify-center">
+          <div
+            v-for="tab in tabs"
+            :key="tab.route"
+            @click="isActive = tab.route"
+            class="w-1/2 md:w-1/3 lg:w-full p-0.5 first:pl-0 last:pr-0 cursor-pointer"
+          >
+            <p
+              :class="[
+                'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
+                isActive == tab.route
+                  ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none'
+                  : ' hover:bg-red-200',
+              ]"
+            >
+              {{ tab.title }}
+            </p>
+          </div>
+        </div>
+        <Pagination
+          :items="damageReports"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          @load-data="(offset, count, search) => fetchDamageReports(offset, count, search)"
+          @search="(search) => fetchDamageReports(0, maxEntriesPerPage, search, true)"
+        >
+          <template #pageRow="{ row }: { row: DamageReportViewModel }">
+            <DamageReportListItem :damageReport="row" />
+          </template>
+        </Pagination>
+      </div>
     </template>
   </MainTemplate>
 </template>
@@ -15,12 +46,35 @@
 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/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 {};
+    return {
+      tabs: [
+        { route: "overview", title: "offen" },
+        { route: "membership", title: "bearbeitet" },
+      ],
+      isActive: "overview",
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useDamageReportStore, ["damageReports", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchDamageReports(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useDamageReportStore, ["fetchDamageReports"]),
   },
 });
 </script>