changed all files to composition API

components/ClientSearch.vue

@@ -5,14 +5,15 @@
   </section>
 </template>
 
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
 <script>
 export default {
   name: "ClientSearch",
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
 };
 </script>
 

components/Dashboard.vue

@@ -14,21 +14,17 @@
 </template>
 
 
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-  name: "Dashboard",
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
-}
-
 </script>
 
-  
+<script>
+export default {
+  name: "Dashboard",
+};
+</script> 
   
   
 <style scoped>
@@ -99,4 +95,5 @@ input {
 .input-lightmode {
   color: #000;
   background-color: #E4E4E4;
-}</style>
+}
+</style>

components/LoginForm.vue

@@ -27,7 +27,8 @@
         </label>
         <div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
           <input type="text" id="password-input" placeholder="*******">
-          <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle" value="Show">
+          <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle"
+            value="Show">
         </div>
       </div>
     </div>
@@ -36,20 +37,17 @@
 </template>
 
 
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-  name: "LoginForm",
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
-}
-
 </script>
 
+<script>
+export default {
+  name: "LoginForm",
+};
+</script> 
   
 
 <style scoped>

components/QuickAccess.vue

@@ -12,20 +12,17 @@
 </template>
 
 
-<script>
+<script setup>
-
+import { ref } from 'vue';
-export default {
-  name: "QuickAccess",
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
-}
 
+const darkMode = ref(true)
 </script>
 
-
+<script>
+export default {
+  name: "QuickAccess",
+};
+</script> 
 
 
 <style scoped>

components/TemplateSearch.vue

@@ -5,17 +5,20 @@
   </section>
 </template>
   
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
 <script>
 export default {
   name: "TemplateSearch",
-    data() {
-      return {
-        darkMode: true,
-      };
-    },
 };
 </script> 
 
+  
 <style scoped>
 .template-search {
   display: flex;

components/server/Accounting.vue

@@ -4,53 +4,93 @@
             <div class="asset-data">
                 <table class="data-table" id="asset-table-no-client">
                     <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                        <th :class="['Action', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Action</th>
+                        <th
-                        <th :class="['Date', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">Date</th>
+                            :class="['Action', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                            Action</th>
+                        <th
+                            :class="['Date', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                            Date</th>
                         <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'first-tr-darkmode' : 'first-tr-lightmode']" id="row-1">
-                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Supplier request</td>
+                        <td
-                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                            Supplier request</td>
+                        <td
+                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                            ...</td>
                         <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Supplier offer</td>
+                        <td
-                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                            Supplier offer</td>
+                        <td
+                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                            ...</td>
                         <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Client offer</td>
+                        <td
-                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                            Client offer</td>
+                        <td
+                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                            ...</td>
                         <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Client order</td>
+                        <td
-                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                            Client order</td>
+                        <td
+                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                            ...</td>
                         <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Supplier order</td>
+                        <td
-                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                            Supplier order</td>
+                        <td
+                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                            ...</td>
                         <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Ingress</td>
+                        <td
-                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                            Ingress</td>
+                        <td
+                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                            ...</td>
                         <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Egress</td>
+                        <td
-                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                            Egress</td>
+                        <td
+                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                            ...</td>
                         <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-2">
-                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Ingress bill</td>
+                        <td
-                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                            Ingress bill</td>
+                        <td
+                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                            ...</td>
                         <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-1">
-                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Egress bill</td>
+                        <td
-                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                            Egress bill</td>
+                        <td
+                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                            ...</td>
                         <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                 </table>
@@ -59,22 +99,17 @@
     </section>
 </template>
     
+<script setup>
+import { ref } from 'vue';
 
-    
+const darkMode = ref(true)
-<script>
-
-export default {
-    name: "Accounting",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
-      
+<script>
+export default {
+    name: "Accounting",
+};
+</script>      
       
       
 <style scoped>
@@ -222,5 +257,4 @@ tr#row-2 {
 
 .Comments {
     width: 40%;
-}
+}</style>
-</style>

components/server/Asset.vue

@@ -50,22 +50,17 @@
     </section>
 </template>
     
+<script setup>
+import { ref } from 'vue';
 
-    
+const darkMode = ref(true)
-<script>
-
-export default {
-    name: "Asset",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
-      
+<script>
+export default {
+    name: "Asset",
+};
+</script>
       
       
 <style scoped>
@@ -207,6 +202,7 @@ export default {
 .h3-lightmode {
     color: #000;
 }
+
 .id-type {
     display: flex;
     flex-direction: row;

components/server/AssetTable.vue

@@ -3,39 +3,50 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
         <table class="data-table" id="asset-table">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">Client</th>
+                <th
-                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
+                    :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
-                <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
+                    Client</th>
-                <th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th>
+                <th
+                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    Name</th>
+                <th
+                    :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                    Type</th>
+                <th
+                    :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                    State</th>
                 <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
             </tr>
             <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">...</td>
+                <td
-                <td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
+                    :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
-                <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td>
+                    ...</td>
-                <td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</td>
+                <td
+                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                    ...</td>
+                <td
+                    :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                    ...</td>
                 <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
             </tr>
         </table>
     </div>
 </template>
   
+<script setup>
+import { ref } from 'vue';
 
-  
+const darkMode = ref(true)
-<script>
-
-export default {
-    name: "AssetTable",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
-    
+<script>
+export default {
+    name: "AssetTable",
+};
+</script>    
     
     
 <style scoped>
@@ -186,5 +197,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
+}</style>
-</style>

components/server/AssetTableNoClient.vue

@@ -3,38 +3,44 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets:</div>
         <table class="data-table" id="asset-table-no-client">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
+                <th
-                <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
+                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                <th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th>
+                    Name</th>
+                <th
+                    :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                    Type</th>
+                <th
+                    :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                    State</th>
                 <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
             </tr>
             <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
+                <td
-                <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td>
+                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                <td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</td>
+                    ...</td>
+                <td
+                    :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                    ...</td>
+                <td
+                    :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                    ...</td>
                 <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
             </tr>
         </table>
     </div>
 </template>
   
+<script setup>
+import { ref } from 'vue';
 
-  
+const darkMode = ref(true)
-<script>
-
-export default {
-    name: "AssetTableNoClient",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
-    
+<script>
-    
+export default {
+    name: "AssetTableNoClient",
+};
+</script>    
     
 <style scoped>
 .data {

components/server/Client.vue

@@ -51,21 +51,18 @@
 </template>
   
   
+<script setup>
+import { ref } from 'vue';
+</script>
 
 <script>
-  
 export default {
   name: "Client",
-    
+};
-  }
-  
 </script>   
     
     
-    
-    
 <style scoped>
-  
 .information {
   display: flex;
   flex-direction: column;
@@ -99,12 +96,15 @@
   gap: 1.25rem;
   border-radius: 0.625rem;
 }
+
 .data-field#client-id {
   padding: 0.625rem 1.875rem;
 }
+
 .data-field#street-name {
   width: 70%;
 }
+
 .data-field#street-no {
   width: 30%;
 }
@@ -114,6 +114,7 @@
   letter-spacing: 5%;
   font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
+
 .data {
   display: flex;
   flex-direction: row;
@@ -126,6 +127,7 @@
   letter-spacing: 5%;
   font: 400 0.75rem/250% Overpass, sans-serif;
 }
+
 .data#notes {
   align-self: stretch;
 }
@@ -139,7 +141,8 @@
   padding: 0 0.625rem;
 }
 
-  .contact, .address {
+.contact,
+.address {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -173,7 +176,4 @@
   justify-content: center;
   align-self: stretch;
   padding: 0.625rem 1.875rem 0.625rem 1.25rem;
-  }
+}</style>
-  
-  
-</style>

components/server/ClientQuickAccess.vue

@@ -12,21 +12,18 @@
 </template>
   
   
+<script setup>
+import { ref } from 'vue';
+</script>
 
 <script>
-  
 export default {
-    name: "ClientQuickAccess",
+  name: "Asset",
-    
+};
-  }
-  
 </script>    
     
     
-    
-    
 <style scoped>
-    
 .quick-access {
   display: flex;
   flex-direction: column;
@@ -73,7 +70,4 @@
   font: 400 0.875rem/2rem Overpass, sans-serif;
   background-color: #343434;
 }
-    
-    
-    
 </style>

components/server/ClientTable.vue

@@ -18,21 +18,20 @@
 </template>
   
   
+<script setup>
+import { ref } from 'vue';
+</script>
 
 <script>
-  
 export default {
     name: "ClientTable",
-    
+};
-  }
-  
 </script>
   
     
     
     
 <style scoped>
-    
 .data {
     display: flex;
     flex-direction: column;
@@ -62,29 +61,31 @@
     gap: 0.625rem;
     border-top: 0.0625rem solid #000000;
 }
+
 #table-head {
     border-top: none;
     border-bottom: 0.0625rem solid #000000;
 }
 
-    th, td {
+th,
+td {
     height: 1.875rem;
     padding: 0;
     color: #ffffff;
     letter-spacing: 5%;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
+
 th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
+
 .ID {
     width: 40%;
     border-right: 0.0625rem solid #000000;
 }
+
 .Name {
     width: 60%;
 }
-    
-    
-    
 </style>

components/server/HardwareSpecifications.vue

@@ -27,7 +27,8 @@
             <div class="additional">
                 <div class="storage-configuration">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Storage configuration:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="storage-configuration">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="storage-configuration">...</pre>
                 </div>
             </div>
             <div class="additional">
@@ -41,21 +42,17 @@
 </template>
     
 
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "HardwareSpecifications",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
-      
+<script>
+export default {
+    name: "HardwareSpecifications",
+};
+</script>   
 
       
 <style scoped>
@@ -182,5 +179,4 @@ export default {
     align-self: stretch;
     padding: 0.625rem 1.875rem 0.625rem 1.25rem;
 }
-
 </style>

components/server/InstanceChecklist.vue

@@ -30,27 +30,24 @@
                 <td
                     :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
                     ...</td>
-                <td :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']"/></td>
+                <td :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
+                        :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
             </tr>
         </table>
     </div>
 </template>
   
+<script setup>
+import { ref } from 'vue';
 
-  
+const darkMode = ref(true)
-<script>
-
-export default {
-    name: "InstanceChecklist",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
+<script>
+export default {
+    name: "InstanceChecklist",
+};
+</script>  
     
     
     
@@ -211,4 +208,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
+}
+</style>

components/server/Issue.vue

@@ -33,20 +33,17 @@
 </template>
     
     
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "Issue",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
+<script>
+export default {
+    name: "Issue",
+};
+</script>   
       
       
       
@@ -209,5 +206,4 @@ export default {
     padding: 0.625rem 1.875rem 0.625rem 1.25rem;
     padding-top: 0rem;
 }
-
 </style>

components/server/IssueSlip.vue

@@ -33,20 +33,17 @@
 </template>
     
     
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "IssueSlip",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
+<script>
+export default {
+    name: "IssueSlip",
+};
+</script>   
       
       
       
@@ -209,5 +206,4 @@ export default {
     padding: 0.625rem 1.875rem 0.625rem 1.25rem;
     padding-top: 0rem;
 }
-
 </style>

components/server/IssueSlipTable.vue

@@ -3,17 +3,31 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
         <table class="data-table" id="asset-table">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">Client</th>
+                <th
-                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
+                    :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
-                <th :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">Ticket No.</th>
+                    Client</th>
-                <th :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">Creation Date</th>
+                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
+                </th>
+                <th
+                    :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
+                    Ticket No.</th>
+                <th
+                    :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                    Creation Date</th>
                 <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
             </tr>
             <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">...</td>
+                <td
-                <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
+                    :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
-                <td :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">...</td>
+                    ...</td>
-                <td :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">...</td>
+                <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                    ...</td>
+                <td
+                    :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
+                    ...</td>
+                <td
+                    :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                    ...</td>
                 <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
             </tr>
         </table>
@@ -21,20 +35,17 @@
 </template>
   
   
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "IssueSlipTable",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
+<script>
+export default {
+    name: "IssueSlipTable",
+};
+</script>
     
     
     
@@ -186,5 +197,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
+}</style>
-</style>

components/server/IssueSlipTableNoClient.vue

@@ -3,15 +3,25 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issue slip:</div>
         <table class="data-table" id="asset-table">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
+                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
-                <th :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">Ticket No.</th>
+                </th>
-                <th :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">Creation Date</th>
+                <th
+                    :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
+                    Ticket No.</th>
+                <th
+                    :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                    Creation Date</th>
                 <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
             </tr>
             <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
+                <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                <td :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">...</td>
+                    ...</td>
-                <td :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">...</td>
+                <td
+                    :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
+                    ...</td>
+                <td
+                    :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                    ...</td>
                 <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
             </tr>
         </table>
@@ -19,20 +29,17 @@
 </template>
   
   
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "IssueSlipTableNoClient",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
+<script>
+export default {
+    name: "IssueSlipTableNoClient",
+};
+</script>  
     
     
     
@@ -114,6 +121,7 @@ td {
 th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
+
 .ID {
     width: 47.5%;
 }
@@ -171,5 +179,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
+}</style>
-</style>

components/server/IssueTable.vue

@@ -3,15 +3,27 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issues:</div>
         <table class="data-table" id="asset-table">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
+                <th
-                <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
+                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                <th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th>
+                    Name</th>
+                <th
+                    :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                    Type</th>
+                <th
+                    :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                    State</th>
                 <th :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode']">Amount</th>
             </tr>
             <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
+                <td
-                <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td>
+                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                <td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</td>
+                    ...</td>
+                <td
+                    :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                    ...</td>
+                <td
+                    :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                    ...</td>
                 <td :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
             </tr>
         </table>
@@ -19,20 +31,17 @@
 </template>
   
   
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "IssueTable",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
+<script>
+export default {
+    name: "IssueTable",
+};
+</script>  
     
     
     
@@ -114,6 +123,7 @@ td {
 th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
+
 .Name {
     width: 33.3%;
 }
@@ -171,5 +181,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
+}</style>
-</style>

components/server/IssueVariant.vue

@@ -37,20 +37,17 @@
 </template>
     
     
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "IssueVariant",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
+<script>
+export default {
+    name: "IssueVariant",
+};
+</script>   
       
       
       
@@ -213,5 +210,4 @@ export default {
     padding: 0.625rem 1.875rem 0.625rem 1.25rem;
     padding-top: 0rem;
 }
-
 </style>

components/server/IssueVariants.vue

@@ -3,38 +3,50 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Variants:</div>
         <table class="data-table" id="issue-variants-table">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
+                <th
-                <th :class="['Properties', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">Properties</th>
+                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                <th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th>
+                    Name</th>
-                <th :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">Amount</th>
+                <th
+                    :class="['Properties', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
+                    Properties</th>
+                <th
+                    :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                    State</th>
+                <th
+                    :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                    Amount</th>
                 <th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode']">Price</th>
             </tr>
             <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
+                <td
-                <td :class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">...</td>
+                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                <td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</td>
+                    ...</td>
-                <td :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">...</td>
+                <td
+                    :class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
+                    ...</td>
+                <td
+                    :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                    ...</td>
                 <td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
             </tr>
         </table>
     </div>
 </template>
   
+<script setup>
+import { ref } from 'vue';
 
-  
+const darkMode = ref(true)
-<script>
-
-export default {
-    name: "IssueVariants",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
+<script>
+export default {
+    name: "IssueVariants",
+};
+</script>   
     
     
     
@@ -186,5 +198,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
+}</style>
-</style>

components/server/MaintenanceVisitsInstance.vue

@@ -71,21 +71,17 @@
 </template>
     
 
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "MaintenanceVisitsInstance",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
-      
+<script>
+export default {
+    name: "MaintenanceVisitsInstance",
+};
+</script>
       
       
 <style scoped>

components/server/MaintenanceVisitsInstanceTable.vue

@@ -41,20 +41,17 @@
 </template>
   
   
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "MaintenanceVisitsInstanceTable",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
+<script>
+export default {
+    name: "MaintenanceVisitsInstanceTable",
+};
+</script>  
     
     
     

components/server/MaintenanceVisitsTemplate.vue

@@ -35,20 +35,17 @@
 </template>
     
     
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "MaintenanceVisitsTemplate",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
+<script>
+export default {
+    name: "MaintenanceVisitsTemplate",
+};
+</script>   
       
       
       

components/server/MaintenanceVisitsTemplateTable.vue

@@ -35,20 +35,17 @@
 </template>
   
   
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "MaintenanceVisitsTemplateTable",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
+<script>
+export default {
+    name: "MaintenanceVisitsTemplateTable",
+};
+</script>  
     
     
     
@@ -200,4 +197,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
+}
+</style>

components/server/MaintenanceVisitsTemplateTableNoClient.vue

@@ -29,20 +29,17 @@
 </template>
   
   
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "MaintenanceVisitsTemplateTableNoClient",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
+<script>
+export default {
+    name: "MaintenanceVisitsTemplateTableNoClient",
+};
+</script>
     
     
     
@@ -182,4 +179,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
+}
+</style>

components/server/NetworkSpecifications.vue

@@ -27,21 +27,17 @@
 </template>
     
 
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "NetworkSpecifications",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
-      
+<script>
+export default {
+    name: "NetworkSpecifications",
+};
+</script>          
       
       
 <style scoped>

components/server/OrderingInformation.vue

@@ -4,15 +4,27 @@
             <div class="asset-data">
                 <table class="data-table" id="asset-table-no-client">
                     <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                        <th :class="['Article', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">Article</th>
+                        <th
-                        <th :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">Amount</th>
+                            :class="['Article', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
-                        <th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">Price</th>
+                            Article</th>
+                        <th
+                            :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                            Amount</th>
+                        <th
+                            :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
+                            Price</th>
                         <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                        <td :class="['Article', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">...</td>
+                        <td
-                        <td :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Amount-darkmode' : 'Amount-lightmode']">...</td>
+                            :class="['Article', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
-                        <td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Price-darkmode' : 'Price-lightmode']">...</td>
+                            ...</td>
+                        <td
+                            :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                            ...</td>
+                        <td
+                            :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
+                            ...</td>
                         <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                 </table>
@@ -22,20 +34,17 @@
 </template>
     
     
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "OrderingInformation",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
+<script>
+export default {
+    name: "OrderingInformation",
+};
+</script>
       
       
       

components/server/ProductionOrdersInstance.vue

@@ -77,21 +77,17 @@
 </template>
     
 
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "ProductionOrdersInstance",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
-      
+<script>
+export default {
+    name: "ProductionOrdersInstance",
+};
+</script> 
       
       
 <style scoped>

components/server/ProductionOrdersInstanceTable.vue

@@ -47,21 +47,17 @@
 </template>
   
   
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "ProductionOrdersInstanceTable",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
-    
+<script>
+export default {
+    name: "ProductionOrdersInstanceTable",
+};
+</script>   
     
     
 <style scoped>

components/server/ProductionOrdersTemplate.vue

@@ -40,21 +40,17 @@
 </template>
     
     
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "MaintenanceVisitsTemplate",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
-      
+<script>
+export default {
+    name: "ProductionOrdersTemplate",
+};
+</script>       
       
       
 <style scoped>

components/server/ProductionOrdersTemplateTable.vue

@@ -29,21 +29,17 @@
 </template>
   
   
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "ProductionOrdersTemplateTable",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
-    
+<script>
+export default {
+    name: "ProductionOrdersTemplateTable",
+};
+</script> 
     
     
 <style scoped>
@@ -182,4 +178,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
+}
+</style>

components/server/ProductionOrdersTemplateTableNoClient.vue

@@ -23,21 +23,17 @@
 </template>
   
   
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "ProductionOrdersTemplateTableNoClient",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
-    
+<script>
+export default {
+    name: "ProductionOrdersTemplateTableNoClient",
+};
+</script>     
     
     
 <style scoped>
@@ -164,4 +160,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
+}
+</style>

components/server/SoftwareSpecifications.vue

@@ -4,13 +4,21 @@
             <div class="asset-data">
                 <table class="data-table" id="asset-table-no-client">
                     <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                        <th :class="['Software', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">Software</th>
+                        <th
-                        <th :class="['Version', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">Version</th>
+                            :class="['Software', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
+                            Software</th>
+                        <th
+                            :class="['Version', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
+                            Version</th>
                         <th :class="['License', darkMode ? 'th-darkmode' : 'th-lightmode']">License</th>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                        <td :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">...</td>
+                        <td
-                        <td :class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Version-darkmode' : 'Version-lightmode']">...</td>
+                            :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
+                            ...</td>
+                        <td
+                            :class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
+                            ...</td>
                         <td :class="['License', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                 </table>
@@ -19,22 +27,17 @@
     </section>
 </template>
     
+<script setup>
+import { ref } from 'vue';
 
-    
+const darkMode = ref(true)
-<script>
-
-export default {
-    name: "SoftwareSpecifications",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
-      
+<script>
+export default {
+    name: "SoftwareSpecifications",
+};
+</script>      
       
       
 <style scoped>
@@ -169,5 +172,4 @@ th {
 
 .License {
     width: 25%;
-}
+}</style>
-</style>

components/server/Solution.vue

@@ -32,7 +32,8 @@
         <div class="solution-data">
             <div class="additional">
                 <div class="description">
-                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description of the problem/intended use:</h3>
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description of the
+                        problem/intended use:</h3>
                     <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
                 </div>
             </div>
@@ -49,21 +50,17 @@
 </template>
     
     
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "Solution",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
-      
+<script>
+export default {
+    name: "Solution",
+};
+</script> 
       
       
 <style scoped>
@@ -235,5 +232,4 @@ export default {
     padding: 0.625rem 1.875rem 0.625rem 1.25rem;
     padding-top: 0rem;
 }
-
 </style>

components/server/SolutionChecklist.vue

@@ -3,15 +3,27 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
         <table class="data-table" id="solution-checkklist">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">Step</th>
+                <th
-                <th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th>
+                    :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
-                <th :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">Task</th>
+                    Step</th>
+                <th
+                    :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                    Asset</th>
+                <th
+                    :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                    Task</th>
                 <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
             </tr>
             <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">...</td>
+                <td
-                <td :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">...</td>
+                    :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
-                <td :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">...</td>
+                    ...</td>
+                <td
+                    :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                    ...</td>
                 <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
             </tr>
         </table>
@@ -19,21 +31,17 @@
 </template>
   
   
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "SolutionChecklist",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
-    
+<script>
+export default {
+    name: "SolutionChecklist",
+};
+</script> 
     
     
 <style scoped>
@@ -172,5 +180,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
+}</style>
-</style>

components/server/SolutionTable.vue

@@ -3,17 +3,33 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
         <table class="data-table" id="solution-table">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">Client</th>
+                <th
-                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
+                    :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
-                <th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th>
+                    Client</th>
-                <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
+                <th
+                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    Name</th>
+                <th
+                    :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                    Asset</th>
+                <th
+                    :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                    Type</th>
                 <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
             </tr>
             <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">...</td>
+                <td
-                <td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
+                    :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
-                <td :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">...</td>
+                    ...</td>
-                <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td>
+                <td
+                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                    ...</td>
                 <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
             </tr>
         </table>
@@ -21,21 +37,17 @@
 </template>
   
   
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "SolutionTable",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
-    
+<script>
+export default {
+    name: "SolutionTable",
+};
+</script> 
     
     
 <style scoped>

components/server/SolutionTableNoClient.vue

@@ -3,15 +3,27 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div>
         <table class="data-table" id="solution-table">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
+                <th
-                <th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th>
+                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
+                    Name</th>
+                <th
+                    :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                    Asset</th>
+                <th
+                    :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                    Type</th>
                 <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
             </tr>
             <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
+                <td
-                <td :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">...</td>
+                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td>
+                    ...</td>
+                <td
+                    :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                    ...</td>
                 <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
             </tr>
         </table>
@@ -19,21 +31,17 @@
 </template>
   
   
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "SolutionTableNoClient",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
-    
+<script>
+export default {
+    name: "SolutionTableNoClient",
+};
+</script>     
     
     
 <style scoped>
@@ -172,5 +180,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
+}</style>
-</style>

components/server/TemplateChecklist.vue

@@ -3,15 +3,27 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
         <table class="data-table" id="template-checkklist">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">Step</th>
+                <th
-                <th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th>
+                    :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
-                <th :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">Task</th>
+                    Step</th>
+                <th
+                    :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                    Asset</th>
+                <th
+                    :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                    Task</th>
                 <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
             </tr>
             <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">...</td>
+                <td
-                <td :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">...</td>
+                    :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
-                <td :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">...</td>
+                    ...</td>
+                <td
+                    :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                    ...</td>
                 <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
             </tr>
         </table>
@@ -19,21 +31,17 @@
 </template>
   
 
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "TemplateChecklist",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
-    
+<script>
+export default {
+    name: "TemplateChecklist",
+};
+</script> 
   
     
 <style scoped>
@@ -172,5 +180,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
+}</style>
-</style>

layouts/Navigationbar.vue

@@ -6,7 +6,7 @@
         <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
       </div>
       <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
-        @click="toggleSidebar">
+        @click="ToggleSidebar">
         <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
           src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
       </div>
@@ -23,28 +23,32 @@
         </router-link>
       </nav>
       <nav id="site-menu">
-        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="checklists-button">
+        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+          id="checklists-button">
           <div class="icon" id="checklists-icon">
             <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
               src="../icons/navbar-icons/Checklists-Icon.svg" />
           </div>
           <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span>
         </router-link>
-        <router-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="assets-button">
+        <router-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+          id="assets-button">
           <div class="icon" id="assets-icon">
             <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
               src="../icons/navbar-icons/Assets-Icon.svg" />
           </div>
           <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span>
         </router-link>
-        <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
+        <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+          id="solutions-button">
           <div class="icon" id="solutions-icon">
             <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
               src="../icons/navbar-icons/Solutions-Icon.svg" />
           </div>
           <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span>
         </router-link>
-        <router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button">
+        <router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+          id="accounting-button">
           <div class="icon" id="accounting-icon">
             <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
               src="../icons/navbar-icons/Accounting-Icon.svg" />
@@ -66,22 +70,22 @@
 
 
 
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+const isExpanded = ref(true)
+
+const ToggleSidebar = () => {
+  isExpanded.value = !isExpanded.value;
+};
+
+</script>
+
 <script>
 export default {
   name: "Navigationbar",
-  data() {
-    return {
-      darkMode: true,
-      isExpanded: true,
-    };
-  },
-  methods: {
-    toggleSidebar() {
-      this.isExpanded = !this.isExpanded;
 }
-  }
-}
-
 </script>
   
   
@@ -263,5 +267,4 @@ img {
 
 .label-lightmode {
   color: #000000;
-}
+}</style>
-</style>

layouts/PageHeader.vue

@@ -11,17 +11,17 @@
 </template>
 
 
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+
+</script>
+
+<script>
 export default {
   name: "PageHeader",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
 }
-
 </script>
 
 

layouts/default.vue

@@ -8,28 +8,22 @@
 </template>
 
 
-<script>
+<script setup>
+import { ref } from 'vue';
+
 import PageHeader from "./PageHeader.vue";
 import Navigationbar from "./Navigationbar.vue";
 import Actionbar from "./Actionbar.vue";
 
-export default {
+const darkMode = ref(true)
-  name: "Page",
-  components: {
-    PageHeader,
-    Navigationbar,
-    Actionbar,
-  },
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
-}
 
 </script>
   
-  
+<script>
+export default {
+  name: "default",
+}
+</script>
   
 <style scoped>
 * {

layouts/empty.vue

@@ -6,23 +6,18 @@
 </template>
   
   
-<script>
+<script setup>
 import PageHeader from "../layouts/PageHeader.vue";
 
-export default {
+const darkMode = ref(true)
-  name: "Page",
-  components: {
-    PageHeader,
-  },
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
-}
 
 </script>
 
+<script>
+export default {
+  name: "empty",
+}
+</script>    
     
     
 <style scoped>

pages/assets.vue

@@ -17,12 +17,8 @@
   
   
 <script setup>
-definePageMeta({
+import { ref } from 'vue';
-  layout: 'default'
-})
-</script>
 
-<script>
 import ClientSearch from "../components/ClientSearch.vue";
 import AssetTable from "../components/server/AssetTable.vue";
 import AssetTableNoClient from "../components/server/AssetTableNoClient.vue";
@@ -31,26 +27,18 @@ import HardwareSpecifications from "../components/server/HardwareSpecifications.
 import SoftwareSpecifications from "../components/server/SoftwareSpecifications.vue";
 import NetworkSpecifications from "../components/server/NetworkSpecifications.vue";
 
-export default {
+definePageMeta({
-  name: "AssetPage",
+  layout: 'default'
-  components: {
+})
-    ClientSearch,
-    AssetTable,
-    AssetTableNoClient,
-    Asset,
-    HardwareSpecifications,
-    SoftwareSpecifications,
-    NetworkSpecifications,
-  },
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
-}
 
+const darkMode = ref(true)
 </script>
 
+<script>
+export default {
+  name: "AssetPage",
+}
+</script>   
     
     
 <style scoped>

pages/clients.vue

@@ -12,34 +12,26 @@
   
   
 <script setup>
-definePageMeta({
+import { ref } from 'vue';
-  layout: 'default'
-})
-</script>
 
-<script>
 import ClientTable from "../components/server/ClientTable.vue";
 import Client from "../components/server/Client.vue";
 import ClientQuickAccess from "../components/server/ClientQuickAccess.vue";
 //import ClientEmployees from "../components/server/ClientEmployees.vue";
 //import ClientEmployee from "../components/server/ClientEmployee.vue";
 
-export default {
+definePageMeta({
-  name: "ClientsPage",
+  layout: 'default'
-  components: {
+})
-    ClientTable,
-    Client,
-    ClientQuickAccess,
-  },
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
-}
 
+const darkMode = ref(true)
 </script>
 
+<script>
+export default {
+  name: "ClientsPage",
+}
+</script>
   
     
 <style scoped>

pages/home.vue

@@ -13,32 +13,24 @@
   
   
 <script setup>
-definePageMeta({
+import { ref } from 'vue';
-  layout: 'empty'
-})
-</script>
 
-<script>
 import Navigationbar from "../layouts/Navigationbar.vue";
 import Dashboard from "../components/Dashboard.vue";
 import QuickAccess from "../components/QuickAccess.vue";
 
-export default {
+definePageMeta({
-  name: "HomePage",
+  layout: 'empty'
-  components: {
+})
-    Navigationbar,
-    Dashboard,
-    QuickAccess,
-  },
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
-}
 
+const darkMode = ref(true)
 </script>
 
+<script>
+export default {
+  name: "HomePage",
+}
+</script>   
     
     
 <style>

pages/index.vue

@@ -11,23 +11,19 @@
   
   
 <script setup>
+import { ref } from 'vue';
+
 definePageMeta({
   layout: 'default'
 })
+
+const darkMode = ref(true)
 </script>
 
 <script>
 export default {
   name: "Testpage",
-  components: {
-  },
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
 }
-
 </script>
     
     

pages/issueSlips.vue

@@ -37,12 +37,8 @@
     
     
 <script setup>
-definePageMeta({
+import { ref } from 'vue';
-  layout: 'default'
-})
-</script>
 
-<script>
 import ClientSearch from "../components/ClientSearch.vue";
 import IssueSlipTable from "../components/server/IssueSlipTable.vue";
 import IssueSlipTableNoClient from "../components/server/IssueSlipTableNoClient.vue";
@@ -50,23 +46,17 @@ import IssueSlip from "../components/server/IssueSlip.vue";
 import OrderingInformation from "../components/server/OrderingInformation.vue";
 import Accounting from "../components/server/Accounting.vue";
 
+definePageMeta({
+  layout: 'default'
+})
+
+const darkMode = ref(true)
+</script>
+  
+<script>
 export default {
   name: "IssueSlipPage",
-  components: {
-    ClientSearch,
-    IssueSlipTable,
-    IssueSlipTableNoClient,
-    IssueSlip,
-    OrderingInformation,
-    Accounting,
-  },
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
 }
-
 </script>
       
       

pages/issues.vue

@@ -35,32 +35,24 @@
     
     
 <script setup>
-definePageMeta({
+import { ref } from 'vue';
-    layout: 'default'
-})
-</script>
 
-<script>
 import IssueTable from "../components/server/IssueTable.vue";
 import Issue from "../components/server/Issue.vue";
 import IssueVariants from "../components/server/IssueVariants.vue";
 import IssueVariant from "../components/server/IssueVariant.vue";
 
+definePageMeta({
+    layout: 'default'
+})
+
+const darkMode = ref(true)
+</script>
+  
+<script>
 export default {
     name: "IssuePage",
-    components: {
-        IssueTable,
-        Issue,
-        IssueVariants,
-        IssueVariant,
-    },
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
 }
-
 </script>
       
       

pages/login.vue

@@ -11,26 +11,21 @@
 
 
 <script setup>
+import { ref } from 'vue';
+
+import LoginForm from "../components/LoginForm.vue";
+
 definePageMeta({
   layout: 'empty'
 })
+
+const darkMode = ref(true)
 </script>
 
 <script>
-import LoginForm from "../components/LoginForm.vue";
-
 export default {
   name: "LoginPage",
-  components: {
-    LoginForm,
-  },
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
 }
-
 </script>
   
   

pages/maintenanceVisits.vue

@@ -40,12 +40,8 @@
       
       
 <script setup>
-  definePageMeta({
+import { ref } from 'vue';
-    layout: 'default'
-  })
-  </script>
 
-  <script>
 import ClientSearch from "../components/ClientSearch.vue";
 import MaintenanceVisitsTemplateTable from "../components/server/MaintenanceVisitsTemplateTable.vue";
 import MaintenanceVisitsTemplateTableNoClient from "../components/server/MaintenanceVisitsTemplateTableNoClient.vue";
@@ -56,26 +52,17 @@
 import MaintenanceVisitsInstance from "../components/server/MaintenanceVisitsInstance.vue";
 import InstanceChecklist from "../components/server/InstanceChecklist.vue";
 
+definePageMeta({
+  layout: 'default'
+})
+
+const darkMode = ref(true)
+</script>
+    
+<script>
 export default {
   name: "MaintenanceVisitsPage",
-    components: {
-      ClientSearch,
-      MaintenanceVisitsTemplateTable,
-      MaintenanceVisitsTemplateTableNoClient,
-      MaintenanceVisitsTemplate,
-      TemplateChecklist,
-      TemplateSearch,
-      MaintenanceVisitsInstanceTable,
-      MaintenanceVisitsInstance,
-      InstanceChecklist,
-    },
-    data() {
-      return {
-        darkMode: true,
-      };
-    },
 }
-  
 </script>
         
         

pages/productionOrders.vue

@@ -40,12 +40,8 @@
     
     
 <script setup>
-definePageMeta({
+import { ref } from 'vue';
-    layout: 'default'
-})
-</script>
 
-<script>
 import ClientSearch from "../components/ClientSearch.vue";
 import ProductionOrdersTemplateTable from "../components/server/ProductionOrdersTemplateTable.vue";
 import ProductionOrdersTemplateTableNoClient from "../components/server/ProductionOrdersTemplateTableNoClient.vue";
@@ -56,28 +52,18 @@ import ProductionOrdersInstanceTable from "../components/server/ProductionOrders
 import ProductionOrdersInstance from "../components/server/ProductionOrdersInstance.vue";
 import InstanceChecklist from "../components/server/InstanceChecklist.vue";
 
-export default {
+definePageMeta({
-    name: "ProductionOrdersPage",
+    layout: 'default'
-    components: {
+})
-        ClientSearch,
-        ProductionOrdersTemplateTable,
-        ProductionOrdersTemplateTableNoClient,
-        ProductionOrdersTemplate,
-        TemplateChecklist,
-        TemplateSearch,
-        ProductionOrdersInstanceTable,
-        ProductionOrdersInstance,
-        InstanceChecklist,
-    },
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
 
+const darkMode = ref(true)
 </script>
   
+<script>
+export default {
+    name: "ProductionOrdersPage",
+}
+</script>     
       
       
 <style scoped>

pages/solutions.vue

@@ -15,34 +15,25 @@
   
   
 <script setup>
-definePageMeta({
+import { ref } from 'vue';
-  layout: 'default'
-})
-</script>
 
-<script>
 import ClientSearch from "../components/ClientSearch.vue";
 import SolutionTable from "../components/server/SolutionTable.vue";
 import SolutionTableNoClient from "../components/server/SolutionTableNoClient.vue";
 import Solution from "../components/server/Solution.vue";
 import SolutionChecklist from "../components/server/SolutionChecklist.vue";
 
+definePageMeta({
+  layout: 'default'
+})
+
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
   name: "AssetPage",
-  components: {
-    ClientSearch,
-    SolutionTable,
-    SolutionTableNoClient,
-    Solution,
-    SolutionChecklist,
-  },
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
 }
-
 </script>