From 235c3985e6d8c2e8bc7cf048e693f0e0d844b704 Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Mon, 30 Oct 2023 09:56:04 +0100
Subject: [PATCH] feat: wraps up dashboard boxes ui

---
 client/src/components/dashboard/BaseBox.vue   |  9 +++--
 .../dashboard/CompetenceSummaryBox.vue        |  2 +
 .../dashboard/FeedbackSummaryBox.vue          | 37 ++++++++++++-------
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/client/src/components/dashboard/BaseBox.vue b/client/src/components/dashboard/BaseBox.vue
index 57a31cec..f98d6fb9 100644
--- a/client/src/components/dashboard/BaseBox.vue
+++ b/client/src/components/dashboard/BaseBox.vue
@@ -10,9 +10,12 @@ defineProps<{
       <slot name="title"></slot>
     </h4>
     <slot name="content"></slot>
-    <router-link class="pt-8 underline" :to="detailsLink">
-      {{ $t("a.Details anschauen") }}
-    </router-link>
+    <div class="flex-grow"></div>
+    <div class="pt-8">
+      <router-link class="underline" :to="detailsLink">
+        {{ $t("a.Details anschauen") }}
+      </router-link>
+    </div>
   </div>
 </template>
 
diff --git a/client/src/components/dashboard/CompetenceSummaryBox.vue b/client/src/components/dashboard/CompetenceSummaryBox.vue
index c78be57e..18625e54 100644
--- a/client/src/components/dashboard/CompetenceSummaryBox.vue
+++ b/client/src/components/dashboard/CompetenceSummaryBox.vue
@@ -12,6 +12,7 @@ defineProps<{
     <template #title>{{ $t("a.Selbsteinschätzungen") }}</template>
     <template #content>
       <div class="flex items-center">
+        <it-icon-smiley-happy class="mr-4 h-12 w-12"></it-icon-smiley-happy>
         <i18next :translation="$t('a.{NUMBER} Das kann ich')">
           <template #NUMBER>
             <span class="mr-3 text-4xl font-bold">{{ successCount }}</span>
@@ -19,6 +20,7 @@ defineProps<{
         </i18next>
       </div>
       <div class="flex items-center">
+        <it-icon-smiley-thinking class="mr-4 h-12 w-12"></it-icon-smiley-thinking>
         <i18next :translation="$t('a.{NUMBER} Das will ich nochmals anschauen')">
           <template #NUMBER>
             <span class="mr-3 text-4xl font-bold">{{ failCount }}%</span>
diff --git a/client/src/components/dashboard/FeedbackSummaryBox.vue b/client/src/components/dashboard/FeedbackSummaryBox.vue
index 9b981608..a3f00ef9 100644
--- a/client/src/components/dashboard/FeedbackSummaryBox.vue
+++ b/client/src/components/dashboard/FeedbackSummaryBox.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import BaseBox from "@/components/dashboard/BaseBox.vue";
 
-defineProps<{
+const props = defineProps<{
   feedbackCount: number;
   statisfactionMax: number;
   statisfactionAvg: number;
@@ -12,18 +12,29 @@ defineProps<{
   <BaseBox :details-link="'/statistic/feedback'">
     <template #title>{{ $t("a.Feedback Teilnehmer") }}</template>
     <template #content>
-      <div class="flex items-center">
-        <i18next :translation="$t('a.{AVG} von {MAX}')">
-          <template #AVG>
-            <span class="mr-3 text-4xl font-bold">{{ statisfactionAvg }}</span>
-          </template>
-          <template #MAX>{{ statisfactionMax }}</template>
-        </i18next>
-      </div>
-      <div class="flex items-center">
-        <i18next :translation="$t('a.Total {NUMBER} Antworten')">
-          <template #NUMBER>{{ feedbackCount }}</template>
-        </i18next>
+      <div class="flex">
+        <!-- Left Pane -->
+        <div class="flex h-16 w-32 items-center justify-center rounded bg-green-500">
+          <i18next :translation="$t('a.{AVG} von {MAX}')">
+            <template #AVG>
+              <span class="pr-2 text-4xl font-bold">{{ props.statisfactionAvg }}</span>
+            </template>
+            <template #MAX>
+              <span class="pl-1 text-sm">{{ props.statisfactionMax }}</span>
+            </template>
+          </i18next>
+        </div>
+        <!-- Right Pane -->
+        <div class="flex flex-col items-center space-y-1 p-2">
+          <span class="font-bold">{{ $t("a.Allgemeine Zufriedenheit") }}</span>
+          <div class="self-start">
+            <i18next :translation="$t('a.Total {NUMBER} Antworten')">
+              <template #NUMBER>
+                <span class="font-bold">{{ props.feedbackCount }}</span>
+              </template>
+            </i18next>
+          </div>
+        </div>
       </div>
     </template>
   </BaseBox>