fix(chatbot, approvals): fix display of warning labels, add vacation and holiday to graphs, fix chatbot UI issues.

src/modules/chatbot/components/chatbot-drawer.vue

@@ -14,8 +14,9 @@
     const text = ref('');
 
     const handleSend = async () => {
-        await chatbot_api.sendMessage(text.value.trim());
+        const message = text.value.trim();
         text.value = '';
+        await chatbot_api.sendMessage(message);
     };
 
     onMounted(() => {
@@ -27,8 +28,8 @@
     <q-drawer
         v-model="chatbot_store.is_showing_chatbot"
         overlay
+        elevated
         side="right"
-        :width="500"
         class="column justify-end no-wrap"
     >
         <div class="col q-px-md relative-position">
@@ -69,7 +70,9 @@
 </template>
 
 <style scoped>
-:deep(.q-drawer) {
-    background: rgba(0, 0, 0, 0.3);
+:deep(.q-drawer--right) {
+    background: rgba(0, 0, 0, 0.6);
+    width: 50vw !important;
 }
+
 </style>

src/modules/chatbot/components/dialogue-content.vue

@@ -14,7 +14,7 @@
 
     watch(chatbot_store.messages, () => {
         if (scroll_area.value) {
-            scroll_area.value.setScrollPercentage('vertical', 1.0, 500);
+            scroll_area.value.setScrollPosition('vertical', 999999999, 300);
         }
     })
 </script>
@@ -24,24 +24,28 @@
         <div
             v-for="(msg, index) in chatbot_store.messages"
             :key="index"
-            class="q-px-md"
+            class="column q-px-md no-wrap"
         >
             <DialoguePhrase
                 v-if="!msg.isThinking"
                 :message="msg"
+                class="col-auto"
             />
-
             <!-- thinking bubble while awaiting chatbot reply -->
-            <div
+            <q-chat-message
                 v-else
-                class="row flex-center q-px-md q-py-sm"
+                name="TargoBot"
+                bg-color="white"
+                :stamp="$t('chatbot.chat_thinking')"
             >
-                <q-spinner-dots
-                    size="20px"
-                    color="primary"
-                />
-                <span class="q-ml-sm text-grey-7">{{ $t('chatbot.chat_thinking') }}</span>
-            </div>
+                <div class="row flex-center">
+                    <q-spinner-dots
+                        size="20px"
+                        color="primary"
+                        class="col-auto self-center"
+                    />
+                </div>
+            </q-chat-message>
         </div>
     </q-scroll-area>
 </template>

src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue

@@ -12,7 +12,7 @@
 import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';
 
     interface ChartConfigHoursWorked {
-        key: keyof Pick<TotalHours, 'regular' | 'evening' | 'emergency' | 'overtime'>;
+        key: keyof Pick<TotalHours, 'regular' | 'evening' | 'emergency' | 'overtime'| 'vacation' | 'holiday'>;
         label: string;
         color: string;
     }
@@ -50,6 +50,16 @@ import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-uti
             label: t('shared.shift_type.overtime'),
             color: colors.getPaletteColor('negative'),
         },
+        {
+            key: 'holiday',
+            label: t('shared.shift_type.holiday'),
+            color: colors.getPaletteColor('purple-5'),
+        },
+        {
+            key: 'vacation',
+            label: t('shared.shift_type.vacation'),
+            color: colors.getPaletteColor('deep-orange-5'),
+        },
     ];
 
     const hours_worked_labels = ref<string[]>(all_days.map(day => day.date.slice(-5,)));

src/modules/timesheet-approval/components/overview-list.vue

@@ -90,7 +90,7 @@
 
     const getListViewTimeCss = (column_name: OverviewColumns, value: number): { classes: string, style: string } => {
         if (WARNING_COLUMNS.includes(column_name) && value > 0)
-            return { classes: 'bg-warning text-white rounded-5', style: '' };
+            return { classes: 'bg-warning text-white text-bold rounded-5', style: '' };
 
         if (NEGATIVE_COLUMNS.includes(column_name) && value > 0)
             return { classes: 'bg-negative text-white text-bold rounded-5', style: '' };