inspection finish and print

src/components/admin/unit/InspectionTimeFormatExplainModal.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="relative w-full md:max-w-md">
+    <div class="flex flex-row gap-2 items-center justify-center">
+      <InformationCircleIcon class="text-gray-500 h-5 w-5" />
+      <p class="text-xl font-medium">Zeit Format für Erinnerung und Intervall</p>
+    </div>
+    <br />
+    <table class="min-w-full text-sm border border-gray-200 rounded">
+      <tbody>
+        <tr>
+          <td class="px-3 py-2 font-mono text-gray-700 border-b border-gray-100">&lt;zahl&gt;-(d|m|y)</td>
+          <td class="px-3 py-2 text-gray-600 border-b border-gray-100">
+            Ein Intervall, z.B. <span class="font-mono">7-d</span> für alle 7 Tage,
+            <span class="font-mono">1-m</span> für jeden Monat.
+          </td>
+        </tr>
+        <tr>
+          <td class="px-3 py-2 font-mono text-gray-700 border-b border-gray-100">DD/MM</td>
+          <td class="px-3 py-2 text-gray-600 border-b border-gray-100">
+            Ein bestimmtes Datum, z.B. <span class="font-mono">15/06</span> für den 15. Juni.
+          </td>
+        </tr>
+        <tr>
+          <td class="px-3 py-2 font-mono text-gray-700">DD/*</td>
+          <td class="px-3 py-2 text-gray-600">
+            Ein Tag jeden Monats, z.B. <span class="font-mono">01/*</span> für den ersten Tag jedes Monats.
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p>Im Fall von Erinnerungen wird das Format als zeitliche Angabe vor einem Datum verwendet.</p>
+    <br />
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal">schließen</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import { InformationCircleIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+  },
+});
+</script>