base views and store

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

@@ -0,0 +1,54 @@
+<template>
+  <MainTemplate title="Schadensmeldungen">
+    <template #diffMain>
+      <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
+        <div class="flex flex-col grow gap-2 overflow-hidden">
+          <div class="w-full flex flex-row max-lg:flex-wrap justify-center">
+            <RouterLink
+              v-for="tab in tabs"
+              :key="tab.route"
+              v-slot="{ isExactActive }"
+              :to="{ name: tab.route }"
+              class="w-1/2 md:w-1/3 lg:w-full p-0.5 first:pl-0 last:pr-0"
+            >
+              <p
+                :class="[
+                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
+                  isExactActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                ]"
+              >
+                {{ tab.title }}
+              </p>
+            </RouterLink>
+          </div>
+          <RouterView />
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { RouterLink, RouterView } from "vue-router";
+import { useAbilityStore } from "@/stores/ability";
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      tabs: [
+        { route: "admin-unit-repair-open", title: "offen" },
+        { route: "admin-unit-repair-done", title: "bearbeitet" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>