Frontend refactor and additions

fe/src/components/base/AccordionComp.vue

@@ -57,7 +57,8 @@ function toggleAccordion(open = false) {
   header {
     @apply grid
     grid-cols-[1fr_auto]
-    px-4 py-2;
+    px-4 py-2
+    cursor-pointer;
   }
 
   .accordion__wrapper {

fe/src/components/base/LoadComp.vue

@@ -0,0 +1,38 @@
+<template>
+  <div v-if="loading" class="loading-component">
+    <span v-if="text">
+      {{ text }}
+    </span>
+    <IconLoader3 class="duration-1000 animate-spin" />
+  </div>
+</template>
+
+<script setup>
+import { IconLoader3 } from '@tabler/icons-vue'
+
+defineProps({
+  loading: Boolean,
+  text: String,
+})
+</script>
+
+<style>
+@reference "@/assets/main.css";
+
+&:has(.loading-component) {
+  @apply relative;
+}
+
+.loading-component {
+  @apply absolute
+  inset-0
+  size-full
+  flex gap-2
+  flex-col
+  justify-center
+  items-center
+  text-sm
+  bg-black/50
+  backdrop-blur-md;
+}
+</style>