web: updated structure

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

web/src/App.vue

@@ -1,17 +1,25 @@
 <template>
   <v-app>
     <v-main>
-      <StartPage />
+      <HeaderBar />
+      <div class="categoryContainer">
+        <CategoryContainer licenseGroupName="Jetbrains Ultimate"/>
+        <CategoryContainer licenseGroupName="Microsoft"/>
+      </div>
+
     </v-main>
   </v-app>
 </template>
 
 <script setup lang="ts">
-import StartPage from './components/StartPage.vue';
+import HeaderBar from './components/HeaderBar.vue';
+import CategoryContainer from './components/CategoryContainer.vue';
 
-  //
 </script>
 
 <style scoped>
-  
-</style>
+  .categoryContainer {
+    margin-left: 5%;
+    margin-top: 5%;
+  }
+</style>

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>

web/src/main.ts

@@ -9,6 +9,7 @@ import { registerPlugins } from '@/plugins'
 
 // Components
 import App from './App.vue'
+import './assets/styles/variables.scss'
 
 // Composables
 import { createApp } from 'vue'
@@ -18,3 +19,5 @@ const app = createApp(App)
 registerPlugins(app)
 
 app.mount('#app')
+
+

web/src/plugins/vuetify.ts

@@ -14,6 +14,6 @@ import { createVuetify } from 'vuetify'
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
   theme: {
-    defaultTheme: 'dark',
+    defaultTheme: 'light',
   },
 })