web: updated structure

Co-authored-by: wollenberg.niklas@gmail.com <wollenberg.niklas@gmail.com>

web/src/components/CategoryContainer.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="root">
+    <h2>{{ props.licenseGroupName }}:</h2>
+    <ListViewElement
+      licenseName="Jetbrains Ultimate 2024.2.1"
+      licenseKey="321z8321789"
+      startDate="12.12.2020"
+      endDate="13.12.2021"
+      amount="1"
+      tags=""
+      notes="No notes"
+    />
+    <!-- <ListViewElement
+      licenseName="Jetbrains Ultimate 2024.2.1"
+      key=""
+      startDate=""
+      endDate=""
+      amount=""
+      tags=""
+      notes=""
+    /> -->
+  </div>
+
+</template>
+
+<script setup lang="ts">
+  import { defineProps } from 'vue'
+  import ListViewElement from './ListViewElement.vue'
+
+  const props = defineProps({
+    licenseGroupName: String
+
+  })
+
+</script>
+
+
+<style scoped>
+  .root {
+    margin-top: 10px;
+  }
+
+</style>

web/src/components/HeaderBar.vue

@@ -0,0 +1,50 @@
+<template >
+  <v-row justify="end" class="header-component">
+    <v-col cols="auto">
+      <v-app-bar :elevation="0" color="cyan-darken-3">
+        <Building2 id="placeholderIcon"/>
+        <v-text-field
+          class="compact-form"
+          label="Search"
+          variant="solo"
+          prepend-icon="mdi-magnify"
+          hide-details
+          single-line
+          clearable
+          rounded="pill"
+        ></v-text-field>
+        <!-- <v-btn icon>
+        <v-icon>mdi-dots-vertical</v-icon>
+        </v-btn> -->
+        <CircleUser id="userIcon"/>
+      </v-app-bar>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+  import { Building2 } from 'lucide-vue-next';
+  import { CircleUser } from 'lucide-vue-next';
+
+</script>
+
+<style scoped>
+
+ .bg-main-color {
+
+ }
+
+.compact-form {
+    transform: scale(0.7);
+    transform-origin: left;
+}
+
+#placeholderIcon {
+  margin-right: 20%;
+  margin-left: 10px;
+}
+
+#userIcon {
+  margin-right: 15px;
+}
+</style>

web/src/components/ListViewElement.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-sheet
+    elevation="4"
+    width="60vw"
+  >
+  <div>
+    licenseName: {{ props.licenseName }}
+    licenseKey: {{ props.licenseKey }}
+  </div>
+  </v-sheet>
+
+</template>
+
+<script setup lang="ts">
+  import { defineProps } from 'vue'
+
+
+  const props = defineProps({
+    licenseName: String,
+    licenseKey: String,
+    startDate: String,
+    endDate: String,
+    amount: Number,
+    tags: Array,
+    notes: String,
+  })
+
+</script>
+
+<style scoped>
+
+
+</style>