web: add toolbar buttons

web/src/components/HeaderBar.vue

@@ -6,9 +6,21 @@
       prominent
     >
      <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
-      <v-toolbar-title>Vuetify</v-toolbar-title>
+
-      <v-spacer></v-spacer>
+     <v-spacer></v-spacer>
-      <v-text-field
+     <!-- Create, Delete, Edit -->
+     <div>
+      <v-btn icon class="mr-3">
+        <Plus />
+      </v-btn>
+      <v-btn icon class="mr-3">
+        <Trash2 />
+      </v-btn>
+      <v-btn icon class="mr-3">
+        <Pencil />
+      </v-btn>
+     </div>
+     <v-text-field
           class="compact-form mr-2"
           label="Search"
           variant="solo"
@@ -30,7 +42,9 @@
 <script setup lang="ts">
 import { LogOut } from 'lucide-vue-next';
 import { store } from '@/store';
-
+import { Plus } from 'lucide-vue-next';
+import { Trash2 } from 'lucide-vue-next';
+import { Pencil } from 'lucide-vue-next';
 
 function handlelogout() {
   console.log('logout');

web/src/components/ListViewElement.vue

@@ -1,8 +1,8 @@
 <template>
   <v-sheet
-    elevation="4"
+  elevation="4"
-    width="93vw"
+  width="93vw"
-    rounded="lg"
+  rounded="lg"
   >
   <div class="values ml-2 py-3">
     <div class="mr-3">
@@ -10,26 +10,26 @@
     </div>
     <div class="mr-3">
       <span style="display: flex;">
-         <KeyRound class="transform mr-1"/>
+        <KeyRound class="transform mr-1"/>
-         {{ props.licenseKey }}
+        {{ props.licenseKey }}
       </span>
     </div>
     <div class="mr-3">
       <span style="display: flex;">
         <Check class="mr-1"/>
-         {{ props.startDate }}
+        {{ props.startDate }}
       </span>
     </div>
     <div class="mr-3">
       <span style="display: flex;">
         <Skull class="mr-1"/>
-         {{ props.endDate }}
+        {{ 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 }}
+        {{ props.amount }}
       </span>
     </div>
   </div>