From 91c19f29b4b61f50c730f61371b32e0c38ba3c90 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 6 Dec 2022 07:49:03 +0100
Subject: [PATCH] Refactor CompetenceDetail component

---
 .../competences/CompetenceDetail.vue          |   30 +-
 client/src/components/ui/ItToggleArrow.vue    |    7 +-
 client/src/pages/ProfilePage.vue              | 1450 ++++++++++++++++-
 client/tailwind.config.js                     |    2 +-
 4 files changed, 1453 insertions(+), 36 deletions(-)

diff --git a/client/src/components/competences/CompetenceDetail.vue b/client/src/components/competences/CompetenceDetail.vue
index d5a04e8e..efc29fc4 100644
--- a/client/src/components/competences/CompetenceDetail.vue
+++ b/client/src/components/competences/CompetenceDetail.vue
@@ -8,32 +8,48 @@ import { ref } from "vue";
 
 const competenceStore = useCompetenceStore();
 
-const props = defineProps<{
+interface Props {
   competence: CompetencePage;
-}>();
+  isInline?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isInline: false,
+});
 
 const isOpen = ref(false);
 
-const togglePerformanceCriteria = () => {
+function togglePerformanceCriteria() {
   isOpen.value = !isOpen.value;
-};
+}
 </script>
 
 <template>
   <div>
     <div :class="{ 'pb-8 border-b mb-4': isOpen }" class="-mx-8 px-8">
       <div
-        class="mb-4 flex flex-row justify-between items-center"
+        class="flex flex-row justify-between items-center"
+        :class="props.isInline ? '' : 'mb-4'"
         role="button"
         aria-pressed="false"
         @click="togglePerformanceCriteria()"
       >
-        <h2 class="text-large">
+        <h2 :class="props.isInline ? ['text-bold', 'w-2/5'] : 'text-large'">
           {{ competence.competence_id }} {{ competence.title }}
         </h2>
-        <ItToggleArrow :is-open="isOpen"></ItToggleArrow>
+        <CompetenceProgress
+          v-if="isInline"
+          class="w-[330px]"
+          :status-count="
+            competenceStore.calcStatusCount(
+              competenceStore.criteriaByCompetence(competence)
+            )
+          "
+        ></CompetenceProgress>
+        <ItToggleArrow :is-open="isOpen" :small="isInline"></ItToggleArrow>
       </div>
       <CompetenceProgress
+        v-if="!isInline"
         :status-count="
           competenceStore.calcStatusCount(
             competenceStore.criteriaByCompetence(competence)
diff --git a/client/src/components/ui/ItToggleArrow.vue b/client/src/components/ui/ItToggleArrow.vue
index b677eec7..c2e57a79 100644
--- a/client/src/components/ui/ItToggleArrow.vue
+++ b/client/src/components/ui/ItToggleArrow.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 interface Props {
   isOpen: boolean;
   small?: boolean;
@@ -10,14 +9,14 @@ const props = withDefaults(defineProps<Props>(), {
   small: false,
 });
 
-function sizeClasses(isSmall: boolean) {
-  return isSmall ? ["h-8", "w-8"] : ["h-10", "w-10"];
+function sizeClasses() {
+  return props.small ? ["h-8", "w-8"] : ["h-10", "w-10"];
 }
 </script>
 
 <template>
   <div class="transition-transform" :class="{ 'rotate-180': isOpen }">
-    <it-icon-arrow-down :class="sizeClasses(small)" aria-hidden="true" />
+    <it-icon-arrow-down :class="sizeClasses()" aria-hidden="true" />
   </div>
 </template>
 <style lang="scss" scoped></style>
diff --git a/client/src/pages/ProfilePage.vue b/client/src/pages/ProfilePage.vue
index 43d5138a..dd99506c 100644
--- a/client/src/pages/ProfilePage.vue
+++ b/client/src/pages/ProfilePage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import CompetenceDetail from "@/components/competences/CompetenceDetail.vue";
+import type { CompetencePage } from "@/types";
 import * as log from "loglevel";
-import ItProgress from "@/components/ui/ItProgress.vue";
 
 log.debug("ProfileView created");
 
@@ -8,15 +9,1417 @@ const fakeData = {
   statusCount: {
     fail: 2,
     success: 9,
-    unknown: 2
-  }
-}
+    unknown: 2,
+  },
+  competences: [
+    {
+      id: 289,
+      title: "Weiterempfehlung für Neukunden generieren",
+      slug: "versicherungsvermittlerin-competence-competence-a1",
+      type: "competence.CompetencePage",
+      translation_key: "5b158942-bd9c-4d72-bd5e-0f5ac80970f9",
+      frontend_url: "",
+      competence_id: "A1",
+      children: [
+        {
+          id: 310,
+          title:
+            "Ich bin fähig im täglichen Kontakt potenzielle Kundinnen und Kunden zu erkennen.",
+          slug: "versicherungsvermittlerin-competence-crit-a16-fahrzeug",
+          type: "competence.PerformanceCriteria",
+          translation_key: "9fbae02d-f773-4144-b7cb-82f4814ee53d",
+          frontend_url: "",
+          competence_id: "A1.6",
+          learning_unit: {
+            id: 60,
+            title: "Fahrzeug",
+            slug: "versicherungsvermittlerin-lp-circle-einstieg-lu-fahrzeug",
+            type: "learnpath.LearningUnit",
+            translation_key: "c66f4f33-5d32-438e-a8b7-6910ae6dfa26",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/einstieg#lu-fahrzeug",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg/evaluate/fahrzeug",
+            course_category: { id: 2, title: "Fahrzeug", general: false },
+          },
+          circle: {
+            id: 50,
+            title: "Einstieg",
+            translation_key: "7ac64a0f-27ca-474a-badb-506449ae8f26",
+          },
+          course_category: { id: 2, title: "Fahrzeug", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 319,
+          title:
+            "Innerhalb des Handlungsfelds «Einkommenssicherung» bin ich fähig, das Thema Risiko und Sicherheit in einem Gespräch gezielt und auf die Situation des jeweiligen Gesprächspartners bezogen, einfliessen zu lassen.",
+          slug: "versicherungsvermittlerin-competence-crit-a15-einkommenssicherung",
+          type: "competence.PerformanceCriteria",
+          translation_key: "8c35b692-d763-4248-8857-9dcef8d18d01",
+          frontend_url: "",
+          competence_id: "A1.5",
+          learning_unit: {
+            id: 96,
+            title: "Einkommenssicherung",
+            slug: "versicherungsvermittlerin-lp-circle-analyse-lu-einkommenssicherung",
+            type: "learnpath.LearningUnit",
+            translation_key: "67c5cc4f-9a57-496d-8233-29b59aa20238",
+            frontend_url:
+              "/learn/versicherungsvermittlerin-lp/analyse#lu-einkommenssicherung",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/analyse/evaluate/einkommenssicherung",
+            course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          },
+          circle: {
+            id: 91,
+            title: "Analyse",
+            translation_key: "006362ae-0128-47fc-a6c6-f69a21f8acc2",
+          },
+          course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 341,
+          title:
+            "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, geeignete Personen wie z.B. Garagisten, Architekten, Treuhänder auf die Vermittlung/Zusammenarbeit anzusprechen.",
+          slug: "versicherungsvermittlerin-competence-crit-a12-fahrzeug",
+          type: "competence.PerformanceCriteria",
+          translation_key: "6d5db5d0-0840-470c-81da-1b60efdf3598",
+          frontend_url: "",
+          competence_id: "A1.2",
+          learning_unit: {
+            id: 184,
+            title: "Fahrzeug",
+            slug: "versicherungsvermittlerin-lp-circle-abschluss-lu-fahrzeug",
+            type: "learnpath.LearningUnit",
+            translation_key: "81a9d011-dd0f-4ac3-af39-ae87582a3d30",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/abschluss#lu-fahrzeug",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/abschluss/evaluate/fahrzeug",
+            course_category: { id: 2, title: "Fahrzeug", general: false },
+          },
+          circle: {
+            id: 174,
+            title: "Abschluss",
+            translation_key: "e771f936-191a-4559-bccb-c551410b48ad",
+          },
+          course_category: { id: 2, title: "Fahrzeug", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+      ],
+    },
+    {
+      id: 290,
+      title: "Kundengespräche vereinbaren",
+      slug: "versicherungsvermittlerin-competence-competence-a2",
+      type: "competence.CompetencePage",
+      translation_key: "d859c3be-aebc-46d9-8615-f79efb464c79",
+      frontend_url: "",
+      competence_id: "A2",
+      children: [
+        {
+          id: 302,
+          title:
+            "Ich bin fähig je nach (Neu-) Kunde Form und Ort für das Gespräch festzulegen.",
+          slug: "versicherungsvermittlerin-competence-crit-a21-einkommenssicherung",
+          type: "competence.PerformanceCriteria",
+          translation_key: "7ee68e03-040e-4a7b-9f47-961b653afc4c",
+          frontend_url: "",
+          competence_id: "A2.1",
+          learning_unit: {
+            id: 55,
+            title: "Einkommenssicherung",
+            slug: "versicherungsvermittlerin-lp-circle-einstieg-lu-einkommenssicherung",
+            type: "learnpath.LearningUnit",
+            translation_key: "4b58b41b-697b-4b7d-bdef-a74d5e92af10",
+            frontend_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg#lu-einkommenssicherung",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg/evaluate/einkommenssicherung",
+            course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          },
+          circle: {
+            id: 50,
+            title: "Einstieg",
+            translation_key: "7ac64a0f-27ca-474a-badb-506449ae8f26",
+          },
+          course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 303,
+          title:
+            "Ich bin fähig mir intern und extern die nötigen Informationen über den (Neu-) Kunden zu beschaffen.",
+          slug: "versicherungsvermittlerin-competence-crit-a22-einkommenssicherung",
+          type: "competence.PerformanceCriteria",
+          translation_key: "c018004b-3ffc-459c-b3ea-7dd0728868dd",
+          frontend_url: "",
+          competence_id: "A2.2",
+          learning_unit: {
+            id: 55,
+            title: "Einkommenssicherung",
+            slug: "versicherungsvermittlerin-lp-circle-einstieg-lu-einkommenssicherung",
+            type: "learnpath.LearningUnit",
+            translation_key: "4b58b41b-697b-4b7d-bdef-a74d5e92af10",
+            frontend_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg#lu-einkommenssicherung",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg/evaluate/einkommenssicherung",
+            course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          },
+          circle: {
+            id: 50,
+            title: "Einstieg",
+            translation_key: "7ac64a0f-27ca-474a-badb-506449ae8f26",
+          },
+          course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 304,
+          title:
+            "Ich bin fähig die Terminierung auf das Thema Einkommenssicherung auszurichten.",
+          slug: "versicherungsvermittlerin-competence-crit-a23-einkommenssicherung",
+          type: "competence.PerformanceCriteria",
+          translation_key: "aa9865e0-dce8-43de-9e05-31192216ce81",
+          frontend_url: "",
+          competence_id: "A2.3",
+          learning_unit: {
+            id: 55,
+            title: "Einkommenssicherung",
+            slug: "versicherungsvermittlerin-lp-circle-einstieg-lu-einkommenssicherung",
+            type: "learnpath.LearningUnit",
+            translation_key: "4b58b41b-697b-4b7d-bdef-a74d5e92af10",
+            frontend_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg#lu-einkommenssicherung",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg/evaluate/einkommenssicherung",
+            course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          },
+          circle: {
+            id: 50,
+            title: "Einstieg",
+            translation_key: "7ac64a0f-27ca-474a-badb-506449ae8f26",
+          },
+          course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 305,
+          title: "Ich bin fähig für das zu führende Gespräch eine Agenda zu erstellen.",
+          slug: "versicherungsvermittlerin-competence-crit-a24-einkommenssicherung",
+          type: "competence.PerformanceCriteria",
+          translation_key: "5d3cd57d-3de3-4a49-8e47-e116aae07a97",
+          frontend_url: "",
+          competence_id: "A2.4",
+          learning_unit: {
+            id: 55,
+            title: "Einkommenssicherung",
+            slug: "versicherungsvermittlerin-lp-circle-einstieg-lu-einkommenssicherung",
+            type: "learnpath.LearningUnit",
+            translation_key: "4b58b41b-697b-4b7d-bdef-a74d5e92af10",
+            frontend_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg#lu-einkommenssicherung",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg/evaluate/einkommenssicherung",
+            course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          },
+          circle: {
+            id: 50,
+            title: "Einstieg",
+            translation_key: "7ac64a0f-27ca-474a-badb-506449ae8f26",
+          },
+          course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 306,
+          title:
+            "Ich bin fähig für das Handlungsfeld «Einkommenssicherung» geeignete Hilfsmittel und Unterlagen zusammenzustellen.",
+          slug: "versicherungsvermittlerin-competence-crit-a25-einkommenssicherung",
+          type: "competence.PerformanceCriteria",
+          translation_key: "be44ca18-53e3-45c9-bad9-42592edd915a",
+          frontend_url: "",
+          competence_id: "A2.5",
+          learning_unit: {
+            id: 55,
+            title: "Einkommenssicherung",
+            slug: "versicherungsvermittlerin-lp-circle-einstieg-lu-einkommenssicherung",
+            type: "learnpath.LearningUnit",
+            translation_key: "4b58b41b-697b-4b7d-bdef-a74d5e92af10",
+            frontend_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg#lu-einkommenssicherung",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg/evaluate/einkommenssicherung",
+            course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          },
+          circle: {
+            id: 50,
+            title: "Einstieg",
+            translation_key: "7ac64a0f-27ca-474a-badb-506449ae8f26",
+          },
+          course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 311,
+          title:
+            "Ich bin fähig je nach (Neu-) Kunde Form und Ort für das Gespräch festzulegen.",
+          slug: "versicherungsvermittlerin-competence-crit-a21-fahrzeug",
+          type: "competence.PerformanceCriteria",
+          translation_key: "b4dcb5c6-e1fc-4219-bbf1-0119293978a3",
+          frontend_url: "",
+          competence_id: "A2.1",
+          learning_unit: {
+            id: 60,
+            title: "Fahrzeug",
+            slug: "versicherungsvermittlerin-lp-circle-einstieg-lu-fahrzeug",
+            type: "learnpath.LearningUnit",
+            translation_key: "c66f4f33-5d32-438e-a8b7-6910ae6dfa26",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/einstieg#lu-fahrzeug",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg/evaluate/fahrzeug",
+            course_category: { id: 2, title: "Fahrzeug", general: false },
+          },
+          circle: {
+            id: 50,
+            title: "Einstieg",
+            translation_key: "7ac64a0f-27ca-474a-badb-506449ae8f26",
+          },
+          course_category: { id: 2, title: "Fahrzeug", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 312,
+          title:
+            "Ich bin fähig mir intern und extern die nötigen Informationen über den (Neu-) Kunden zu beschaffen.",
+          slug: "versicherungsvermittlerin-competence-crit-a22-fahrzeug",
+          type: "competence.PerformanceCriteria",
+          translation_key: "1334c7a5-1386-48b6-b25f-268f629ce459",
+          frontend_url: "",
+          competence_id: "A2.2",
+          learning_unit: {
+            id: 60,
+            title: "Fahrzeug",
+            slug: "versicherungsvermittlerin-lp-circle-einstieg-lu-fahrzeug",
+            type: "learnpath.LearningUnit",
+            translation_key: "c66f4f33-5d32-438e-a8b7-6910ae6dfa26",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/einstieg#lu-fahrzeug",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg/evaluate/fahrzeug",
+            course_category: { id: 2, title: "Fahrzeug", general: false },
+          },
+          circle: {
+            id: 50,
+            title: "Einstieg",
+            translation_key: "7ac64a0f-27ca-474a-badb-506449ae8f26",
+          },
+          course_category: { id: 2, title: "Fahrzeug", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 313,
+          title: "Ich bin fähig die Terminierung auf das Thema Fahrzeug auszurichten.",
+          slug: "versicherungsvermittlerin-competence-crit-a23-fahrzeug",
+          type: "competence.PerformanceCriteria",
+          translation_key: "0dc2cdbc-e1c5-491f-bbec-9fc9858545da",
+          frontend_url: "",
+          competence_id: "A2.3",
+          learning_unit: {
+            id: 60,
+            title: "Fahrzeug",
+            slug: "versicherungsvermittlerin-lp-circle-einstieg-lu-fahrzeug",
+            type: "learnpath.LearningUnit",
+            translation_key: "c66f4f33-5d32-438e-a8b7-6910ae6dfa26",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/einstieg#lu-fahrzeug",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg/evaluate/fahrzeug",
+            course_category: { id: 2, title: "Fahrzeug", general: false },
+          },
+          circle: {
+            id: 50,
+            title: "Einstieg",
+            translation_key: "7ac64a0f-27ca-474a-badb-506449ae8f26",
+          },
+          course_category: { id: 2, title: "Fahrzeug", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 314,
+          title: "Ich bin fähig für das zu führende Gespräch eine Agenda zu erstellen.",
+          slug: "versicherungsvermittlerin-competence-crit-a24-fahrzeug",
+          type: "competence.PerformanceCriteria",
+          translation_key: "c0d85c8d-baac-46f6-a809-fa2567e25d16",
+          frontend_url: "",
+          competence_id: "A2.4",
+          learning_unit: {
+            id: 60,
+            title: "Fahrzeug",
+            slug: "versicherungsvermittlerin-lp-circle-einstieg-lu-fahrzeug",
+            type: "learnpath.LearningUnit",
+            translation_key: "c66f4f33-5d32-438e-a8b7-6910ae6dfa26",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/einstieg#lu-fahrzeug",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg/evaluate/fahrzeug",
+            course_category: { id: 2, title: "Fahrzeug", general: false },
+          },
+          circle: {
+            id: 50,
+            title: "Einstieg",
+            translation_key: "7ac64a0f-27ca-474a-badb-506449ae8f26",
+          },
+          course_category: { id: 2, title: "Fahrzeug", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 315,
+          title:
+            "Ich bin fähig für das zu führende Gespräch geeignete Hilfsmittel und Unterlagen zusammenzustellen.",
+          slug: "versicherungsvermittlerin-competence-crit-a25-fahrzeug",
+          type: "competence.PerformanceCriteria",
+          translation_key: "0055fc67-ec0b-4c45-8b51-4558e626958d",
+          frontend_url: "",
+          competence_id: "A2.5",
+          learning_unit: {
+            id: 60,
+            title: "Fahrzeug",
+            slug: "versicherungsvermittlerin-lp-circle-einstieg-lu-fahrzeug",
+            type: "learnpath.LearningUnit",
+            translation_key: "c66f4f33-5d32-438e-a8b7-6910ae6dfa26",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/einstieg#lu-fahrzeug",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg/evaluate/fahrzeug",
+            course_category: { id: 2, title: "Fahrzeug", general: false },
+          },
+          circle: {
+            id: 50,
+            title: "Einstieg",
+            translation_key: "7ac64a0f-27ca-474a-badb-506449ae8f26",
+          },
+          course_category: { id: 2, title: "Fahrzeug", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 316,
+          title: "Ich bin fähig die Terminierung auf das Thema Reisen auszurichten.",
+          slug: "versicherungsvermittlerin-competence-crit-a23-reisen",
+          type: "competence.PerformanceCriteria",
+          translation_key: "b41713ed-f45e-4bdb-8d02-678edb53de4d",
+          frontend_url: "",
+          competence_id: "A2.3",
+          learning_unit: {
+            id: 68,
+            title: "Reisen",
+            slug: "versicherungsvermittlerin-lp-circle-einstieg-lu-reisen",
+            type: "learnpath.LearningUnit",
+            translation_key: "4bacf632-cdc3-4941-850f-ae4e8ec6578e",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/einstieg#lu-reisen",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg/evaluate/reisen",
+            course_category: { id: 3, title: "Reisen", general: false },
+          },
+          circle: {
+            id: 50,
+            title: "Einstieg",
+            translation_key: "7ac64a0f-27ca-474a-badb-506449ae8f26",
+          },
+          course_category: { id: 3, title: "Reisen", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 317,
+          title: "Ich bin fähig für das zu führende Gespräch eine Agenda zu erstellen.",
+          slug: "versicherungsvermittlerin-competence-crit-a24-reisen",
+          type: "competence.PerformanceCriteria",
+          translation_key: "75eacc8f-a3d5-4bb9-a288-b390e53f10e1",
+          frontend_url: "",
+          competence_id: "A2.4",
+          learning_unit: {
+            id: 68,
+            title: "Reisen",
+            slug: "versicherungsvermittlerin-lp-circle-einstieg-lu-reisen",
+            type: "learnpath.LearningUnit",
+            translation_key: "4bacf632-cdc3-4941-850f-ae4e8ec6578e",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/einstieg#lu-reisen",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg/evaluate/reisen",
+            course_category: { id: 3, title: "Reisen", general: false },
+          },
+          circle: {
+            id: 50,
+            title: "Einstieg",
+            translation_key: "7ac64a0f-27ca-474a-badb-506449ae8f26",
+          },
+          course_category: { id: 3, title: "Reisen", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 318,
+          title:
+            "Ich bin fähig für das zu führende Gespräch geeignete Hilfsmittel und Unterlagen zusammenzustellen.",
+          slug: "versicherungsvermittlerin-competence-crit-a25-reisen",
+          type: "competence.PerformanceCriteria",
+          translation_key: "00745b34-5a65-4cc2-b3fc-ccd063630d5a",
+          frontend_url: "",
+          competence_id: "A2.5",
+          learning_unit: {
+            id: 68,
+            title: "Reisen",
+            slug: "versicherungsvermittlerin-lp-circle-einstieg-lu-reisen",
+            type: "learnpath.LearningUnit",
+            translation_key: "4bacf632-cdc3-4941-850f-ae4e8ec6578e",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/einstieg#lu-reisen",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg/evaluate/reisen",
+            course_category: { id: 3, title: "Reisen", general: false },
+          },
+          circle: {
+            id: 50,
+            title: "Einstieg",
+            translation_key: "7ac64a0f-27ca-474a-badb-506449ae8f26",
+          },
+          course_category: { id: 3, title: "Reisen", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+      ],
+    },
+    {
+      id: 292,
+      title: "Kundendaten erfassen",
+      slug: "versicherungsvermittlerin-competence-competence-a4",
+      type: "competence.CompetencePage",
+      translation_key: "791df2d8-afd5-40e2-9d8e-bedffd233d30",
+      frontend_url: "",
+      competence_id: "A4",
+      children: [
+        {
+          id: 342,
+          title:
+            "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, Kundendaten in Datenbanken (CRM) korrekt zu erfassen.",
+          slug: "versicherungsvermittlerin-competence-crit-a41-fahrzeug",
+          type: "competence.PerformanceCriteria",
+          translation_key: "c767ac7c-ae1d-4e97-b73b-f57ac38ff4b8",
+          frontend_url: "",
+          competence_id: "A4.1",
+          learning_unit: {
+            id: 184,
+            title: "Fahrzeug",
+            slug: "versicherungsvermittlerin-lp-circle-abschluss-lu-fahrzeug",
+            type: "learnpath.LearningUnit",
+            translation_key: "81a9d011-dd0f-4ac3-af39-ae87582a3d30",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/abschluss#lu-fahrzeug",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/abschluss/evaluate/fahrzeug",
+            course_category: { id: 2, title: "Fahrzeug", general: false },
+          },
+          circle: {
+            id: 174,
+            title: "Abschluss",
+            translation_key: "e771f936-191a-4559-bccb-c551410b48ad",
+          },
+          course_category: { id: 2, title: "Fahrzeug", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+      ],
+    },
+    {
+      id: 293,
+      title: "Wünsche, Ziele  und Bedürfnisse der Kunden im Gespräch ermitteln",
+      slug: "versicherungsvermittlerin-competence-competence-b1",
+      type: "competence.CompetencePage",
+      translation_key: "1e571b48-16d0-4265-b7c6-62116a44c8da",
+      frontend_url: "",
+      competence_id: "B1",
+      children: [
+        {
+          id: 307,
+          title:
+            "Ich bin fähig dem Kunden den Gesprächsablauf und den Zeitrahmen (mittels Agenda) aufzuzeigen.",
+          slug: "versicherungsvermittlerin-competence-crit-b11-einkommenssicherung",
+          type: "competence.PerformanceCriteria",
+          translation_key: "7344d0ca-7d6a-4fae-afa2-83e87e5f8901",
+          frontend_url: "",
+          competence_id: "B1.1",
+          learning_unit: {
+            id: 55,
+            title: "Einkommenssicherung",
+            slug: "versicherungsvermittlerin-lp-circle-einstieg-lu-einkommenssicherung",
+            type: "learnpath.LearningUnit",
+            translation_key: "4b58b41b-697b-4b7d-bdef-a74d5e92af10",
+            frontend_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg#lu-einkommenssicherung",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg/evaluate/einkommenssicherung",
+            course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          },
+          circle: {
+            id: 50,
+            title: "Einstieg",
+            translation_key: "7ac64a0f-27ca-474a-badb-506449ae8f26",
+          },
+          course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 308,
+          title: "Ich bin fähig mich beim Kunden korrekt zu identifizieren (VAG 45).",
+          slug: "versicherungsvermittlerin-competence-crit-b12-einkommenssicherung",
+          type: "competence.PerformanceCriteria",
+          translation_key: "e35ab82e-0cd8-414b-bf94-0fe55772a757",
+          frontend_url: "",
+          competence_id: "B1.2",
+          learning_unit: {
+            id: 55,
+            title: "Einkommenssicherung",
+            slug: "versicherungsvermittlerin-lp-circle-einstieg-lu-einkommenssicherung",
+            type: "learnpath.LearningUnit",
+            translation_key: "4b58b41b-697b-4b7d-bdef-a74d5e92af10",
+            frontend_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg#lu-einkommenssicherung",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg/evaluate/einkommenssicherung",
+            course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          },
+          circle: {
+            id: 50,
+            title: "Einstieg",
+            translation_key: "7ac64a0f-27ca-474a-badb-506449ae8f26",
+          },
+          course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 320,
+          title:
+            "Innerhalb des Handlungsfelds «Einkommenssicherung» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
+          slug: "versicherungsvermittlerin-competence-crit-b13-einkommenssicherung",
+          type: "competence.PerformanceCriteria",
+          translation_key: "c6567e38-d65e-4528-95bc-9204c875f6d4",
+          frontend_url: "",
+          competence_id: "B1.3",
+          learning_unit: {
+            id: 96,
+            title: "Einkommenssicherung",
+            slug: "versicherungsvermittlerin-lp-circle-analyse-lu-einkommenssicherung",
+            type: "learnpath.LearningUnit",
+            translation_key: "67c5cc4f-9a57-496d-8233-29b59aa20238",
+            frontend_url:
+              "/learn/versicherungsvermittlerin-lp/analyse#lu-einkommenssicherung",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/analyse/evaluate/einkommenssicherung",
+            course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          },
+          circle: {
+            id: 91,
+            title: "Analyse",
+            translation_key: "006362ae-0128-47fc-a6c6-f69a21f8acc2",
+          },
+          course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 323,
+          title:
+            "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
+          slug: "versicherungsvermittlerin-competence-crit-b13-fahrzeug",
+          type: "competence.PerformanceCriteria",
+          translation_key: "9386c9f3-7df9-4177-9817-3c5159809672",
+          frontend_url: "",
+          competence_id: "B1.3",
+          learning_unit: {
+            id: 101,
+            title: "Fahrzeug",
+            slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
+            type: "learnpath.LearningUnit",
+            translation_key: "87b70172-0f6a-48aa-aada-2998050db76d",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/analyse#lu-fahrzeug",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/analyse/evaluate/fahrzeug",
+            course_category: { id: 2, title: "Fahrzeug", general: false },
+          },
+          circle: {
+            id: 91,
+            title: "Analyse",
+            translation_key: "006362ae-0128-47fc-a6c6-f69a21f8acc2",
+          },
+          course_category: { id: 2, title: "Fahrzeug", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 326,
+          title:
+            "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
+          slug: "versicherungsvermittlerin-competence-crit-b13-reisen",
+          type: "competence.PerformanceCriteria",
+          translation_key: "097fa2f4-441c-4c03-8bb7-65f7afa2c235",
+          frontend_url: "",
+          competence_id: "B1.3",
+          learning_unit: {
+            id: 109,
+            title: "Reisen",
+            slug: "versicherungsvermittlerin-lp-circle-analyse-lu-reisen",
+            type: "learnpath.LearningUnit",
+            translation_key: "d6bf6f01-10d4-487c-83f2-01f7f2e9ead4",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/analyse#lu-reisen",
+            evaluate_url: "/learn/versicherungsvermittlerin-lp/analyse/evaluate/reisen",
+            course_category: { id: 3, title: "Reisen", general: false },
+          },
+          circle: {
+            id: 91,
+            title: "Analyse",
+            translation_key: "006362ae-0128-47fc-a6c6-f69a21f8acc2",
+          },
+          course_category: { id: 3, title: "Reisen", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+      ],
+    },
+    {
+      id: 294,
+      title: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
+      slug: "versicherungsvermittlerin-competence-competence-b2",
+      type: "competence.CompetencePage",
+      translation_key: "a4529c75-b3e6-4529-bf06-40bcf22d4be9",
+      frontend_url: "",
+      competence_id: "B2",
+      children: [
+        {
+          id: 309,
+          title: "Ich bin fähig alle erforderlichen Unterlagen einzufordern.",
+          slug: "versicherungsvermittlerin-competence-crit-b23-einkommenssicherung",
+          type: "competence.PerformanceCriteria",
+          translation_key: "8be5f45a-9f5f-45d7-a564-bcf3f397cad5",
+          frontend_url: "",
+          competence_id: "B2.3",
+          learning_unit: {
+            id: 55,
+            title: "Einkommenssicherung",
+            slug: "versicherungsvermittlerin-lp-circle-einstieg-lu-einkommenssicherung",
+            type: "learnpath.LearningUnit",
+            translation_key: "4b58b41b-697b-4b7d-bdef-a74d5e92af10",
+            frontend_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg#lu-einkommenssicherung",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/einstieg/evaluate/einkommenssicherung",
+            course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          },
+          circle: {
+            id: 50,
+            title: "Einstieg",
+            translation_key: "7ac64a0f-27ca-474a-badb-506449ae8f26",
+          },
+          course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 321,
+          title:
+            "Innerhalb des Handlungsfelds «Einkommenssicherung» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+          slug: "versicherungsvermittlerin-competence-crit-b21-einkommenssicherung",
+          type: "competence.PerformanceCriteria",
+          translation_key: "e1afecdf-34d0-40e3-8542-3a7924e94b8f",
+          frontend_url: "",
+          competence_id: "B2.1",
+          learning_unit: {
+            id: 96,
+            title: "Einkommenssicherung",
+            slug: "versicherungsvermittlerin-lp-circle-analyse-lu-einkommenssicherung",
+            type: "learnpath.LearningUnit",
+            translation_key: "67c5cc4f-9a57-496d-8233-29b59aa20238",
+            frontend_url:
+              "/learn/versicherungsvermittlerin-lp/analyse#lu-einkommenssicherung",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/analyse/evaluate/einkommenssicherung",
+            course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          },
+          circle: {
+            id: 91,
+            title: "Analyse",
+            translation_key: "006362ae-0128-47fc-a6c6-f69a21f8acc2",
+          },
+          course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 322,
+          title:
+            "Innerhalb des Handlungsfelds «Einkommenssicherung» bin ich fähig, die Risiken aufzuzeigen.",
+          slug: "versicherungsvermittlerin-competence-crit-b22-einkommenssicherung",
+          type: "competence.PerformanceCriteria",
+          translation_key: "6f581f5b-d3b4-4e7b-be40-853e9e20819c",
+          frontend_url: "",
+          competence_id: "B2.2",
+          learning_unit: {
+            id: 96,
+            title: "Einkommenssicherung",
+            slug: "versicherungsvermittlerin-lp-circle-analyse-lu-einkommenssicherung",
+            type: "learnpath.LearningUnit",
+            translation_key: "67c5cc4f-9a57-496d-8233-29b59aa20238",
+            frontend_url:
+              "/learn/versicherungsvermittlerin-lp/analyse#lu-einkommenssicherung",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/analyse/evaluate/einkommenssicherung",
+            course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          },
+          circle: {
+            id: 91,
+            title: "Analyse",
+            translation_key: "006362ae-0128-47fc-a6c6-f69a21f8acc2",
+          },
+          course_category: { id: 4, title: "Einkommenssicherung", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 324,
+          title:
+            "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+          slug: "versicherungsvermittlerin-competence-crit-b21-fahrzeug",
+          type: "competence.PerformanceCriteria",
+          translation_key: "6def5369-6499-43a0-ad79-96c0ff150963",
+          frontend_url: "",
+          competence_id: "B2.1",
+          learning_unit: {
+            id: 101,
+            title: "Fahrzeug",
+            slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
+            type: "learnpath.LearningUnit",
+            translation_key: "87b70172-0f6a-48aa-aada-2998050db76d",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/analyse#lu-fahrzeug",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/analyse/evaluate/fahrzeug",
+            course_category: { id: 2, title: "Fahrzeug", general: false },
+          },
+          circle: {
+            id: 91,
+            title: "Analyse",
+            translation_key: "006362ae-0128-47fc-a6c6-f69a21f8acc2",
+          },
+          course_category: { id: 2, title: "Fahrzeug", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 325,
+          title:
+            "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Risiken aufzuzeigen.",
+          slug: "versicherungsvermittlerin-competence-crit-b22-fahrzeug",
+          type: "competence.PerformanceCriteria",
+          translation_key: "86d269c3-4eb6-40a2-b28a-41176fb46d68",
+          frontend_url: "",
+          competence_id: "B2.2",
+          learning_unit: {
+            id: 101,
+            title: "Fahrzeug",
+            slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
+            type: "learnpath.LearningUnit",
+            translation_key: "87b70172-0f6a-48aa-aada-2998050db76d",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/analyse#lu-fahrzeug",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/analyse/evaluate/fahrzeug",
+            course_category: { id: 2, title: "Fahrzeug", general: false },
+          },
+          circle: {
+            id: 91,
+            title: "Analyse",
+            translation_key: "006362ae-0128-47fc-a6c6-f69a21f8acc2",
+          },
+          course_category: { id: 2, title: "Fahrzeug", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 327,
+          title:
+            "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+          slug: "versicherungsvermittlerin-competence-crit-b21-reisen",
+          type: "competence.PerformanceCriteria",
+          translation_key: "405b36ad-9843-437a-af37-ebb57d26ef92",
+          frontend_url: "",
+          competence_id: "B2.1",
+          learning_unit: {
+            id: 109,
+            title: "Reisen",
+            slug: "versicherungsvermittlerin-lp-circle-analyse-lu-reisen",
+            type: "learnpath.LearningUnit",
+            translation_key: "d6bf6f01-10d4-487c-83f2-01f7f2e9ead4",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/analyse#lu-reisen",
+            evaluate_url: "/learn/versicherungsvermittlerin-lp/analyse/evaluate/reisen",
+            course_category: { id: 3, title: "Reisen", general: false },
+          },
+          circle: {
+            id: 91,
+            title: "Analyse",
+            translation_key: "006362ae-0128-47fc-a6c6-f69a21f8acc2",
+          },
+          course_category: { id: 3, title: "Reisen", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 328,
+          title:
+            "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, die Risiken aufzuzeigen.",
+          slug: "versicherungsvermittlerin-competence-crit-b22-reisen",
+          type: "competence.PerformanceCriteria",
+          translation_key: "84fac58e-cbb8-4b2d-95f6-fd32d8097c4d",
+          frontend_url: "",
+          competence_id: "B2.2",
+          learning_unit: {
+            id: 109,
+            title: "Reisen",
+            slug: "versicherungsvermittlerin-lp-circle-analyse-lu-reisen",
+            type: "learnpath.LearningUnit",
+            translation_key: "d6bf6f01-10d4-487c-83f2-01f7f2e9ead4",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/analyse#lu-reisen",
+            evaluate_url: "/learn/versicherungsvermittlerin-lp/analyse/evaluate/reisen",
+            course_category: { id: 3, title: "Reisen", general: false },
+          },
+          circle: {
+            id: 91,
+            title: "Analyse",
+            translation_key: "006362ae-0128-47fc-a6c6-f69a21f8acc2",
+          },
+          course_category: { id: 3, title: "Reisen", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+      ],
+    },
+    {
+      id: 295,
+      title: "Individuelle Lösungsvorschläge erarbeiten",
+      slug: "versicherungsvermittlerin-competence-competence-b3",
+      type: "competence.CompetencePage",
+      translation_key: "ed095c60-2aaa-472b-87b3-29aa6ae1c10f",
+      frontend_url: "",
+      competence_id: "B3",
+      children: [
+        {
+          id: 335,
+          title:
+            "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, eine Unterversicherung, eine Doppel- oder Überversicherung, einen fehlenden Versicherungsschutz und mögliches Optimierungspotential festzustellen.",
+          slug: "versicherungsvermittlerin-competence-crit-b32-reisen",
+          type: "competence.PerformanceCriteria",
+          translation_key: "750f7e90-27e1-4d51-83cb-f71be9b00ad7",
+          frontend_url: "",
+          competence_id: "B3.2",
+          learning_unit: {
+            id: 150,
+            title: "Reisen",
+            slug: "versicherungsvermittlerin-lp-circle-lösung-lu-reisen",
+            type: "learnpath.LearningUnit",
+            translation_key: "eae9b06a-20f9-4027-bccd-4bc4780ef7eb",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/lösung#lu-reisen",
+            evaluate_url: "/learn/versicherungsvermittlerin-lp/lösung/evaluate/reisen",
+            course_category: { id: 3, title: "Reisen", general: false },
+          },
+          circle: {
+            id: 132,
+            title: "Lösung",
+            translation_key: "abb6b9d5-93b8-4f84-a9b1-56037a2db605",
+          },
+          course_category: { id: 3, title: "Reisen", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+      ],
+    },
+    {
+      id: 296,
+      title: "Lösungsvorschläge präsentieren und umsetzen",
+      slug: "versicherungsvermittlerin-competence-competence-b4",
+      type: "competence.CompetencePage",
+      translation_key: "11fdeb6c-928b-476f-93d9-8e63f650c05b",
+      frontend_url: "",
+      competence_id: "B4",
+      children: [
+        {
+          id: 330,
+          title:
+            "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen",
+          slug: "versicherungsvermittlerin-competence-crit-b42-fahrzeug",
+          type: "competence.PerformanceCriteria",
+          translation_key: "44067c73-1166-4850-bbc7-81d8ef02ffc1",
+          frontend_url: "",
+          competence_id: "B4.2",
+          learning_unit: {
+            id: 142,
+            title: "Fahrzeug",
+            slug: "versicherungsvermittlerin-lp-circle-lösung-lu-fahrzeug",
+            type: "learnpath.LearningUnit",
+            translation_key: "7a2e743d-34e3-4c84-aaf8-a726919d15c8",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/lösung#lu-fahrzeug",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/lösung/evaluate/fahrzeug",
+            course_category: { id: 2, title: "Fahrzeug", general: false },
+          },
+          circle: {
+            id: 132,
+            title: "Lösung",
+            translation_key: "abb6b9d5-93b8-4f84-a9b1-56037a2db605",
+          },
+          course_category: { id: 2, title: "Fahrzeug", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 331,
+          title:
+            "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, auf Vorbehalte und/oder Fragen sachlich korrekt und (verhandlungs-)sicher einzugehen.",
+          slug: "versicherungsvermittlerin-competence-crit-b43-fahrzeug",
+          type: "competence.PerformanceCriteria",
+          translation_key: "dfc428df-0bfd-44f5-a844-09167dd65427",
+          frontend_url: "",
+          competence_id: "B4.3",
+          learning_unit: {
+            id: 142,
+            title: "Fahrzeug",
+            slug: "versicherungsvermittlerin-lp-circle-lösung-lu-fahrzeug",
+            type: "learnpath.LearningUnit",
+            translation_key: "7a2e743d-34e3-4c84-aaf8-a726919d15c8",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/lösung#lu-fahrzeug",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/lösung/evaluate/fahrzeug",
+            course_category: { id: 2, title: "Fahrzeug", general: false },
+          },
+          circle: {
+            id: 132,
+            title: "Lösung",
+            translation_key: "abb6b9d5-93b8-4f84-a9b1-56037a2db605",
+          },
+          course_category: { id: 2, title: "Fahrzeug", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 332,
+          title:
+            "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, nötige Anpassungen flexibel vorzunehmen.",
+          slug: "versicherungsvermittlerin-competence-crit-b44-fahrzeug",
+          type: "competence.PerformanceCriteria",
+          translation_key: "41a0f830-c45e-4270-9c5e-2475d34fd354",
+          frontend_url: "",
+          competence_id: "B4.4",
+          learning_unit: {
+            id: 142,
+            title: "Fahrzeug",
+            slug: "versicherungsvermittlerin-lp-circle-lösung-lu-fahrzeug",
+            type: "learnpath.LearningUnit",
+            translation_key: "7a2e743d-34e3-4c84-aaf8-a726919d15c8",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/lösung#lu-fahrzeug",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/lösung/evaluate/fahrzeug",
+            course_category: { id: 2, title: "Fahrzeug", general: false },
+          },
+          circle: {
+            id: 132,
+            title: "Lösung",
+            translation_key: "abb6b9d5-93b8-4f84-a9b1-56037a2db605",
+          },
+          course_category: { id: 2, title: "Fahrzeug", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 336,
+          title:
+            "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+          slug: "versicherungsvermittlerin-competence-crit-b42-reisen",
+          type: "competence.PerformanceCriteria",
+          translation_key: "a6f8ef13-0ca2-43ab-bbab-431399eb45e5",
+          frontend_url: "",
+          competence_id: "B4.2",
+          learning_unit: {
+            id: 150,
+            title: "Reisen",
+            slug: "versicherungsvermittlerin-lp-circle-lösung-lu-reisen",
+            type: "learnpath.LearningUnit",
+            translation_key: "eae9b06a-20f9-4027-bccd-4bc4780ef7eb",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/lösung#lu-reisen",
+            evaluate_url: "/learn/versicherungsvermittlerin-lp/lösung/evaluate/reisen",
+            course_category: { id: 3, title: "Reisen", general: false },
+          },
+          circle: {
+            id: 132,
+            title: "Lösung",
+            translation_key: "abb6b9d5-93b8-4f84-a9b1-56037a2db605",
+          },
+          course_category: { id: 3, title: "Reisen", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 337,
+          title:
+            "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, auf Vorbehalte und/oder Fragen sachlich korrekt und (verhandlungs-)sicher einzugehen.",
+          slug: "versicherungsvermittlerin-competence-crit-b43-reisen",
+          type: "competence.PerformanceCriteria",
+          translation_key: "9c490b39-b071-4ccd-98f3-15ecddb33085",
+          frontend_url: "",
+          competence_id: "B4.3",
+          learning_unit: {
+            id: 150,
+            title: "Reisen",
+            slug: "versicherungsvermittlerin-lp-circle-lösung-lu-reisen",
+            type: "learnpath.LearningUnit",
+            translation_key: "eae9b06a-20f9-4027-bccd-4bc4780ef7eb",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/lösung#lu-reisen",
+            evaluate_url: "/learn/versicherungsvermittlerin-lp/lösung/evaluate/reisen",
+            course_category: { id: 3, title: "Reisen", general: false },
+          },
+          circle: {
+            id: 132,
+            title: "Lösung",
+            translation_key: "abb6b9d5-93b8-4f84-a9b1-56037a2db605",
+          },
+          course_category: { id: 3, title: "Reisen", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 338,
+          title:
+            "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, nötige Anpassungen flexibel vorzunehmen.",
+          slug: "versicherungsvermittlerin-competence-crit-b44-reisen",
+          type: "competence.PerformanceCriteria",
+          translation_key: "0df67bdd-5186-45ef-8c34-7b980bfbb6b5",
+          frontend_url: "",
+          competence_id: "B4.4",
+          learning_unit: {
+            id: 150,
+            title: "Reisen",
+            slug: "versicherungsvermittlerin-lp-circle-lösung-lu-reisen",
+            type: "learnpath.LearningUnit",
+            translation_key: "eae9b06a-20f9-4027-bccd-4bc4780ef7eb",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/lösung#lu-reisen",
+            evaluate_url: "/learn/versicherungsvermittlerin-lp/lösung/evaluate/reisen",
+            course_category: { id: 3, title: "Reisen", general: false },
+          },
+          circle: {
+            id: 132,
+            title: "Lösung",
+            translation_key: "abb6b9d5-93b8-4f84-a9b1-56037a2db605",
+          },
+          course_category: { id: 3, title: "Reisen", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 343,
+          title:
+            "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, Anträge korrekt auszufüllen.",
+          slug: "versicherungsvermittlerin-competence-crit-b46-fahrzeug",
+          type: "competence.PerformanceCriteria",
+          translation_key: "31eacad9-cc44-46a1-8596-1195c449057c",
+          frontend_url: "",
+          competence_id: "B4.6",
+          learning_unit: {
+            id: 184,
+            title: "Fahrzeug",
+            slug: "versicherungsvermittlerin-lp-circle-abschluss-lu-fahrzeug",
+            type: "learnpath.LearningUnit",
+            translation_key: "81a9d011-dd0f-4ac3-af39-ae87582a3d30",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/abschluss#lu-fahrzeug",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/abschluss/evaluate/fahrzeug",
+            course_category: { id: 2, title: "Fahrzeug", general: false },
+          },
+          circle: {
+            id: 174,
+            title: "Abschluss",
+            translation_key: "e771f936-191a-4559-bccb-c551410b48ad",
+          },
+          course_category: { id: 2, title: "Fahrzeug", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 345,
+          title:
+            "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, Anträge korrekt auszufüllen.",
+          slug: "versicherungsvermittlerin-competence-crit-b46-reisen",
+          type: "competence.PerformanceCriteria",
+          translation_key: "368a7b11-afdc-414a-87cd-045de3c09843",
+          frontend_url: "",
+          competence_id: "B4.6",
+          learning_unit: {
+            id: 192,
+            title: "Reisen",
+            slug: "versicherungsvermittlerin-lp-circle-abschluss-lu-reisen",
+            type: "learnpath.LearningUnit",
+            translation_key: "200deb0d-73f6-4303-81be-bd0a15ddf543",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/abschluss#lu-reisen",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/abschluss/evaluate/reisen",
+            course_category: { id: 3, title: "Reisen", general: false },
+          },
+          circle: {
+            id: 174,
+            title: "Abschluss",
+            translation_key: "e771f936-191a-4559-bccb-c551410b48ad",
+          },
+          course_category: { id: 3, title: "Reisen", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+      ],
+    },
+    {
+      id: 297,
+      title:
+        "Cross- und Upselling; bestehende fremdverwaltete Versicherungspolicen prüfen und in das Portfolio aufnehmen",
+      slug: "versicherungsvermittlerin-competence-competence-c1",
+      type: "competence.CompetencePage",
+      translation_key: "d999e531-fc48-4ede-a2a9-4ce2c10a6563",
+      frontend_url: "",
+      competence_id: "C1",
+      children: [
+        {
+          id: 329,
+          title:
+            "Innerhalb des Handlungsfelds «Reisen» durch eine Bestandesaufnahme der aktuellen Policen zu prüfen, ob die Leistungen dem Bedarf des Kunden entsprechen.",
+          slug: "versicherungsvermittlerin-competence-crit-c11-reisen",
+          type: "competence.PerformanceCriteria",
+          translation_key: "13d4010b-7c01-41e5-a83c-6f1c44c41170",
+          frontend_url: "",
+          competence_id: "C1.1",
+          learning_unit: {
+            id: 109,
+            title: "Reisen",
+            slug: "versicherungsvermittlerin-lp-circle-analyse-lu-reisen",
+            type: "learnpath.LearningUnit",
+            translation_key: "d6bf6f01-10d4-487c-83f2-01f7f2e9ead4",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/analyse#lu-reisen",
+            evaluate_url: "/learn/versicherungsvermittlerin-lp/analyse/evaluate/reisen",
+            course_category: { id: 3, title: "Reisen", general: false },
+          },
+          circle: {
+            id: 91,
+            title: "Analyse",
+            translation_key: "006362ae-0128-47fc-a6c6-f69a21f8acc2",
+          },
+          course_category: { id: 3, title: "Reisen", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 333,
+          title:
+            "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig durch eine Bestandesaufnahme der aktuellen Policen zu prüfen, ob die Leistungen dem Bedarf des Kunden entsprechen",
+          slug: "versicherungsvermittlerin-competence-crit-c11-fahrzeug",
+          type: "competence.PerformanceCriteria",
+          translation_key: "b7741498-859c-4020-8cfa-e144df26e9a3",
+          frontend_url: "",
+          competence_id: "C1.1",
+          learning_unit: {
+            id: 142,
+            title: "Fahrzeug",
+            slug: "versicherungsvermittlerin-lp-circle-lösung-lu-fahrzeug",
+            type: "learnpath.LearningUnit",
+            translation_key: "7a2e743d-34e3-4c84-aaf8-a726919d15c8",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/lösung#lu-fahrzeug",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/lösung/evaluate/fahrzeug",
+            course_category: { id: 2, title: "Fahrzeug", general: false },
+          },
+          circle: {
+            id: 132,
+            title: "Lösung",
+            translation_key: "abb6b9d5-93b8-4f84-a9b1-56037a2db605",
+          },
+          course_category: { id: 2, title: "Fahrzeug", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 334,
+          title:
+            "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, den Kunden bedarfsgerechte Vorschläge für Anpassungen der Versicherungslösung zu unterbreiten (Up-Selling).",
+          slug: "versicherungsvermittlerin-competence-crit-c12-fahrzeug",
+          type: "competence.PerformanceCriteria",
+          translation_key: "14bcd7ff-5905-463a-b50e-0cc89171feef",
+          frontend_url: "",
+          competence_id: "C1.2",
+          learning_unit: {
+            id: 142,
+            title: "Fahrzeug",
+            slug: "versicherungsvermittlerin-lp-circle-lösung-lu-fahrzeug",
+            type: "learnpath.LearningUnit",
+            translation_key: "7a2e743d-34e3-4c84-aaf8-a726919d15c8",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/lösung#lu-fahrzeug",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/lösung/evaluate/fahrzeug",
+            course_category: { id: 2, title: "Fahrzeug", general: false },
+          },
+          circle: {
+            id: 132,
+            title: "Lösung",
+            translation_key: "abb6b9d5-93b8-4f84-a9b1-56037a2db605",
+          },
+          course_category: { id: 2, title: "Fahrzeug", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 339,
+          title:
+            "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, den Kunden bedarfsgerechte Vorschläge für Anpassungen der Versicherungslösung zu unterbreiten (Up-Selling).",
+          slug: "versicherungsvermittlerin-competence-crit-c12-reisen",
+          type: "competence.PerformanceCriteria",
+          translation_key: "ab472490-29ad-4575-b8b1-374f25f08819",
+          frontend_url: "",
+          competence_id: "C1.2",
+          learning_unit: {
+            id: 150,
+            title: "Reisen",
+            slug: "versicherungsvermittlerin-lp-circle-lösung-lu-reisen",
+            type: "learnpath.LearningUnit",
+            translation_key: "eae9b06a-20f9-4027-bccd-4bc4780ef7eb",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/lösung#lu-reisen",
+            evaluate_url: "/learn/versicherungsvermittlerin-lp/lösung/evaluate/reisen",
+            course_category: { id: 3, title: "Reisen", general: false },
+          },
+          circle: {
+            id: 132,
+            title: "Lösung",
+            translation_key: "abb6b9d5-93b8-4f84-a9b1-56037a2db605",
+          },
+          course_category: { id: 3, title: "Reisen", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 340,
+          title:
+            "Innerhalb des Handlungsfelds «Reisen» bin ich fähig aufgrund des Portfolios passende Zusatzprodukte anzubieten (Cross-Selling).",
+          slug: "versicherungsvermittlerin-competence-crit-c13-reisen",
+          type: "competence.PerformanceCriteria",
+          translation_key: "40ce70be-90d5-43ef-8f91-94d023ac249e",
+          frontend_url: "",
+          competence_id: "C1.3",
+          learning_unit: {
+            id: 150,
+            title: "Reisen",
+            slug: "versicherungsvermittlerin-lp-circle-lösung-lu-reisen",
+            type: "learnpath.LearningUnit",
+            translation_key: "eae9b06a-20f9-4027-bccd-4bc4780ef7eb",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/lösung#lu-reisen",
+            evaluate_url: "/learn/versicherungsvermittlerin-lp/lösung/evaluate/reisen",
+            course_category: { id: 3, title: "Reisen", general: false },
+          },
+          circle: {
+            id: 132,
+            title: "Lösung",
+            translation_key: "abb6b9d5-93b8-4f84-a9b1-56037a2db605",
+          },
+          course_category: { id: 3, title: "Reisen", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+        {
+          id: 344,
+          title:
+            "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, aufgrund des Portfolios passende Zusatzprodukte anzubieten (Cross-Selling).",
+          slug: "versicherungsvermittlerin-competence-crit-c13-fahrzeug",
+          type: "competence.PerformanceCriteria",
+          translation_key: "274b625f-87b6-45c9-9323-866b9ce7e992",
+          frontend_url: "",
+          competence_id: "C1.3",
+          learning_unit: {
+            id: 184,
+            title: "Fahrzeug",
+            slug: "versicherungsvermittlerin-lp-circle-abschluss-lu-fahrzeug",
+            type: "learnpath.LearningUnit",
+            translation_key: "81a9d011-dd0f-4ac3-af39-ae87582a3d30",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/abschluss#lu-fahrzeug",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/abschluss/evaluate/fahrzeug",
+            course_category: { id: 2, title: "Fahrzeug", general: false },
+          },
+          circle: {
+            id: 174,
+            title: "Abschluss",
+            translation_key: "e771f936-191a-4559-bccb-c551410b48ad",
+          },
+          course_category: { id: 2, title: "Fahrzeug", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+      ],
+    },
+    {
+      id: 299,
+      title: "Kunden im Schadenfall unterstützen",
+      slug: "versicherungsvermittlerin-competence-competence-c3",
+      type: "competence.CompetencePage",
+      translation_key: "864d8fd2-7f6e-4453-b441-51588db3a7e7",
+      frontend_url: "",
+      competence_id: "C3",
+      children: [
+        {
+          id: 346,
+          title:
+            "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, Kunden die Vorgehensweise für die Meldung des Schadens nachvollziehbar zu erläutern und sie bei Bedarf zu unterstützen.",
+          slug: "versicherungsvermittlerin-competence-crit-c31-reisen",
+          type: "competence.PerformanceCriteria",
+          translation_key: "daf21628-c9da-45a1-911d-4e0d96ec4d49",
+          frontend_url: "",
+          competence_id: "C3.1",
+          learning_unit: {
+            id: 192,
+            title: "Reisen",
+            slug: "versicherungsvermittlerin-lp-circle-abschluss-lu-reisen",
+            type: "learnpath.LearningUnit",
+            translation_key: "200deb0d-73f6-4303-81be-bd0a15ddf543",
+            frontend_url: "/learn/versicherungsvermittlerin-lp/abschluss#lu-reisen",
+            evaluate_url:
+              "/learn/versicherungsvermittlerin-lp/abschluss/evaluate/reisen",
+            course_category: { id: 3, title: "Reisen", general: false },
+          },
+          circle: {
+            id: 174,
+            title: "Abschluss",
+            translation_key: "e771f936-191a-4559-bccb-c551410b48ad",
+          },
+          course_category: { id: 3, title: "Reisen", general: false },
+          completion_status: "unknown",
+          completion_status_updated_at: "",
+        },
+      ],
+    },
+  ],
+};
 
+// remove
+const asCompetencePage = (foo: any) => foo as CompetencePage;
 
 function setActiveClasses(isActive: boolean) {
-  return isActive
-    ? ["border-blue-900", "border-b-2"]
-    : ["text-bg-900"];
+  return isActive ? ["border-blue-900", "border-b-2"] : ["text-bg-900"];
 }
 </script>
 
@@ -24,26 +1427,23 @@ function setActiveClasses(isActive: boolean) {
   <div class="bg-gray-200">
     <div class="container-large">
       <nav class="py-4 pb-4">
-        <router-link
-          class="btn-text inline-flex items-center pl-0"
-          :to="'/'"
-        >
-          <it-icon-arrow-left/>
+        <router-link class="btn-text inline-flex items-center pl-0" :to="'/'">
+          <it-icon-arrow-left />
           <span>{{ $t("general.back") }}</span>
         </router-link>
       </nav>
       <header class="flex flex-row items-center mb-12">
-        <img class="w-44 h-44 rounded-full mr-8" src="https://picsum.photos/200"/>
+        <img class="w-44 h-44 rounded-full mr-8" src="https://picsum.photos/200" />
         <div>
           <h1 class="mb-2">Daniel Baumgartner</h1>
           <p class="mb-2">d.baumgartner@gmail.com</p>
-          <p class="bg-message bg-no-repeat pl-6 bg-[center_left_-4px]">{{ $t("messages.sendMessage") }}</p>
+          <p class="bg-message bg-no-repeat pl-6 bg-[center_left_-4px]">
+            {{ $t("messages.sendMessage") }}
+          </p>
         </div>
       </header>
       <main>
-        <div class="bg-white w-full mb-8">
-          ich bin ein Lernpfad
-        </div>
+        <div class="bg-white w-full mb-8">ich bin ein Lernpfad</div>
         <ul class="flex flex-row border-b-2 mb-5">
           <li class="mr-12 pb-3 relative top-px" :class="setActiveClasses(true)">
             <button>{{ $t("competences.competences") }}</button>
@@ -60,13 +1460,15 @@ function setActiveClasses(isActive: boolean) {
         </ul>
         <div>
           <ul class="bg-white px-8 py-2">
-            <li class="border-b border-grey-200 last:border-01 flex flex-row py-4">
-              <h2 class="text-bold w-1/2">Weiterempfehlung für Neukunden generieren</h2>
-              <div class="w-1/2">
-                <ItProgress
-                  :status-count="fakeData.statusCount">
-                </ItProgress>
-              </div>
+            <li
+              v-for="competence in fakeData.competences"
+              :key="competence.id"
+              class="border-b border-grey-200 last:border-0 py-4"
+            >
+              <CompetenceDetail
+                :competence="asCompetencePage(competence)"
+                :is-inline="true"
+              ></CompetenceDetail>
             </li>
           </ul>
         </div>
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index dcf25e77..cf1966da 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -23,7 +23,7 @@ module.exports = {
         "handlungsfelder-overview":
           "url('/static/icons/icon-handlungsfelder-overview.svg')",
         "lernmedien-overview": "url('/static/icons/icon-lernmedien-overview.svg')",
-        "message": "url('/static/icons/icon-message.svg')",
+        message: "url('/static/icons/icon-message.svg')",
       },
       borderColor: (theme) => ({
         DEFAULT: theme("colors.gray.500"),