Add attendance widget and status component

client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { ATTENDANCE_ROUTE } from "@/router/names";
+import AttendanceStatus from "./AttendanceStatus.vue";
+
+const attendanceRoute = {
+  name: ATTENDANCE_ROUTE,
+};
+</script>
+
+<template>
+  <div class="my-4 flex flex-row items-center justify-between bg-white p-6 lg:my-0">
+    <div>
+      <h2 class="text-base font-bold">Präsenzkurs</h2>
+      <p class="text-sm text-gray-800">4. März 2024</p>
+    </div>
+    <AttendanceStatus status="now" />
+    <router-link :to="attendanceRoute" class="underline">
+      {{ $t("a.Anwesenheit anschauen") }}
+    </router-link>
+  </div>
+</template>

client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+export type Status = "done" | "soon" | "now"; // todo: define this
+
+export interface Props {
+  status: Status;
+}
+
+const props = defineProps<Props>();
+
+const style = computed(() => {
+  switch (props.status) {
+    case "done":
+      return "bg-green-200";
+    case "soon":
+      return "bg-gray-200";
+    case "now":
+    default:
+      return "bg-sky-200";
+  }
+});
+
+const icon = computed(() => {
+  switch (props.status) {
+    case "done":
+      return "it-icon-check";
+    case "soon":
+    case "now":
+    default:
+      return "it-icon-info";
+  }
+});
+</script>
+<template>
+  <div
+    class="space-between flex flex-row items-center gap-1 rounded py-1 pl-2 pr-4"
+    :class="style"
+  >
+    <component :is="icon" class="h-7 w-7" />
+    <p>Du hast die Anwesenheit bestätigt.</p>
+  </div>
+</template>