web: updated license list

web/src/components/HeaderBar.vue

@@ -1,13 +1,14 @@
 <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-app-bar :elevation="0" color="main">
+        <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
+        <!-- <LogoSVG id="placeholderIcon"/> -->
         <v-text-field
           class="compact-form"
-          label="Search"
+          label="ASearch"
           variant="solo"
-          prepend-icon="mdi-magnify"
+          prepend-inner-icon="mdi-magnify"
           hide-details
           single-line
           clearable
@@ -23,8 +24,7 @@
 </template>
 
 <script setup lang="ts">
-  import { Building2 } from 'lucide-vue-next';
-  import { CircleUser } from 'lucide-vue-next';
+
 
 </script>
 

web/src/components/ListViewElement.vue

@@ -1,17 +1,46 @@
 <template>
   <v-sheet
     elevation="4"
-    width="60vw"
+    width="93vw"
+    rounded="lg"
   >
-  <div>
-    licenseName: {{ props.licenseName }}
-    licenseKey: {{ props.licenseKey }}
+  <div class="values ml-2 py-3">
+    <div class="mr-3">
+      {{ props.licenseName }}
+    </div>
+    <div class="mr-3">
+      <span style="display: flex;">
+         <KeyRound class="transform mr-1"/>
+         {{ props.licenseKey }}
+      </span>
+    </div>
+    <div class="mr-3">
+      <span style="display: flex;">
+        <Check class="mr-1"/>
+         {{ props.startDate }}
+      </span>
+    </div>
+    <div class="mr-3">
+      <span style="display: flex;">
+        <Skull class="mr-1"/>
+         {{ props.endDate }}
+      </span>
+    </div>
+    <div class="mr-3">
+      <span style="display: flex;">
+        <img src="../assets/doublekey.svg" alt="logo" class="logo mr-1" width="24" />
+         {{ props.amount }}
+      </span>
+    </div>
   </div>
   </v-sheet>
 
 </template>
 
 <script setup lang="ts">
+  import { KeyRound } from 'lucide-vue-next';
+  import { Check } from 'lucide-vue-next';
+  import { Skull } from 'lucide-vue-next';
   import { defineProps } from 'vue'
 
 
@@ -28,6 +57,14 @@
 </script>
 
 <style scoped>
+  .values {
+    display: flex;
+    align-items: center;
+  }
 
+  transform {
+    transform: scale(0.85);
+    transform-origin: left;
+  }
 
 </style>