changed all files to composition API

Reviewed-on: jo.kuehner/TueIT_App#12

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

@@ -0,0 +1,82 @@
+<template>
+  <section :class="['template-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Template:</div>
+    <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template name</pre>
+  </section>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+  name: "TemplateSearch",
+};
+</script> 
+
+  
+<style scoped>
+.template-search {
+  display: flex;
+  align-items: center;
+  padding: 0.625em 1.875em;
+  gap: 1.25em;
+  width: 30.125em;
+  height: 3.125em;
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
+  border-radius: 0.625em;
+}
+
+.section-darkmode {
+  background-color: #2c2c2c;
+}
+
+.section-lightmode {
+  background-color: #fff;
+}
+
+.label {
+  width: 4.188em;
+  height: 1.875em;
+  font-family: "Overpass";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.875em;
+  line-height: 1.875;
+  letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+  color: #FFFFFF;
+}
+
+.label-lightmode {
+  color: #000;
+}
+
+.data {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0 0.625rem;
+  border-radius: 0.3125rem;
+  box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+  letter-spacing: 5%;
+  font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.pre-darkmode {
+  background-color: #212121;
+  color: #fff;
+}
+
+.pre-lightmode {
+  background-color: #EBEBEB;
+  color: #000;
+}
+</style>
+  

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,22 +51,19 @@
 </template>
   
   
+<script setup>
+import { ref } from 'vue';
+</script>
 
 <script>
-  
+export default {
-  export default {
   name: "Client",
-    
+};
-  }
-  
 </script>   
     
     
-    
-    
 <style scoped>
-  
+.information {
-  .information {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -76,10 +73,10 @@
   border-radius: 0.625rem;
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #2c2c2c;
-  }
+}
 
 
-  .client-name {
+.client-name {
   align-self: stretch;
   padding: 1.25rem 0;
   color: #fff;
@@ -87,9 +84,9 @@
   text-decoration-line: underline;
   font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
     sans-serif;
-  }
+}
 
-  .data-field {
+.data-field {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -98,23 +95,27 @@
   padding: 0 1.875rem;
   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%;
-  }
 
-  .label {
+.data-field#client-id {
+  padding: 0.625rem 1.875rem;
+}
+
+.data-field#street-name {
+  width: 70%;
+}
+
+.data-field#street-no {
+  width: 30%;
+}
+
+.label {
   color: #fff;
   letter-spacing: 5%;
   font: 400 0.875rem/1.875rem Overpass, sans-serif;
-  }
+}
-  .data {
+
+.data {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
@@ -125,21 +126,23 @@
   color: #fff;
   letter-spacing: 5%;
   font: 400 0.75rem/250% Overpass, sans-serif;
-  }
+}
-  .data#notes {
-    align-self: stretch;
-  }
 
-  .client-data {
+.data#notes {
+  align-self: stretch;
+}
+
+.client-data {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   align-self: stretch;
   padding: 0 0.625rem;
-  }
+}
 
-  .contact, .address {
+.contact,
+.address {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -148,15 +151,15 @@
   width: 50%;
   padding: 1.25rem 0.625rem;
   border-radius: 0.3125rem;
-  }
+}
 
-  .area-title {
+.area-title {
   color: #fff;
   letter-spacing: 5%;
   font: 400 0.875rem/1.875rem Overpass, sans-serif;
-  }
+}
 
-  .street-address {
+.street-address {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -164,16 +167,13 @@
   align-self: stretch;
   padding: 0 1.875rem 0 0;
   gap: 0.625rem;
-  }
+}
 
-  .notes {
+.notes {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   align-self: stretch;
   padding: 0.625rem 1.875rem 0.625rem 1.25rem;
-  }
+}</style>
-  
-  
-</style>

components/server/ClientQuickAccess.vue

@@ -12,22 +12,19 @@
 </template>
   
   
+<script setup>
+import { ref } from 'vue';
+</script>
 
 <script>
-  
+export default {
-  export default {
+  name: "Asset",
-    name: "ClientQuickAccess",
+};
-    
-  }
-  
 </script>    
     
     
-    
-    
 <style scoped>
-    
+.quick-access {
-    .quick-access {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -39,25 +36,25 @@
   border-radius: 0.625rem;
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #2c2c2c;
-    }
+}
 
-    .heading {
+.heading {
   color: #fff;
   letter-spacing: 5%;
   text-decoration-line: underline;
   font: 400 1rem/2rem Overpass, sans-serif;
-    }
+}
 
-    .shortcuts {
+.shortcuts {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-content: center;
   padding: 0.625rem 1.875rem;
   gap: 2.5rem;
-    }
+}
 
-    input {
+input {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -72,8 +69,5 @@
   letter-spacing: 5%;
   font: 400 0.875rem/2rem Overpass, sans-serif;
   background-color: #343434;
-    }
+}
-    
+</style>
-    
-    
- </style>

components/server/ClientTable.vue

@@ -18,22 +18,21 @@
 </template>
   
   
+<script setup>
+import { ref } from 'vue';
+</script>
 
 <script>
-  
+export default {
-  export default {
     name: "ClientTable",
-    
+};
-  }
-  
 </script>
   
     
     
     
 <style scoped>
-    
+.data {
-    .data {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -45,46 +44,48 @@
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
     background-color: #2c2c2c;
-    }
+}
 
-    .data-table {
+.data-table {
     width: 100%;
     padding: 0 0.625rem;
     table-layout: fixed;
     border-collapse: collapse;
-    }
+}
 
-    .table-row {
+.table-row {
     display: flex;
     flex-direction: row;
     height: 3.125rem;
     padding: 0.625rem;
     gap: 0.625rem;
     border-top: 0.0625rem solid #000000;
-    }
+}
-    #table-head {
+
+#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 {
+
+th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
-    }
+}
-    .ID {
+
+.ID {
     width: 40%;
     border-right: 0.0625rem solid #000000;
-    }
+}
-    .Name {
+
+.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

@@ -0,0 +1,212 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
+        <table class="data-table" id="instance-checklist">
+            <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
+                    :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', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
+                    Comments</th>
+                <th :class="['Done', darkMode ? 'th-darkmode' : 'th-lightmode']">Done</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
+                    :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', darkMode ? 'Comments-darkmode' : 'Comments-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>
+
+<script>
+export default {
+    name: "InstanceChecklist",
+};
+</script>  
+    
+    
+    
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
+    background-color: #2c2c2c;
+}
+
+.div-lightmode {
+    background-color: #fff;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+.checkbox-darkmode {
+    filter: invert(100%);
+}
+
+
+.checkbox-lightmode {
+    filter: invert(0%);
+}
+
+.Step {
+    width: 7%;
+}
+
+.Step-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Step-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Asset {
+    width: 28%;
+}
+
+.Asset-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Task {
+    width: 30%;
+}
+
+.Task-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Task-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Comments {
+    width: 30%;
+}
+
+.Comments-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Comments-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Done {
+    width: 5%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+</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

@@ -0,0 +1,243 @@
+<template>
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['maintenance-visits-instance-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Instance ID</h2>
+        <div class="maintenance-visits-instance-data">
+            <div class="instanceInfo">
+                <div class="data-field" id="info">
+                    <div class="templateId-client-type" id="templateID">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template ID:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="templateId-client-type" id="client">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="templateId-client-type" id="type">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="maintenance-visits-instance-data">
+            <div class="additional">
+                <div class="templateNotes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template notes:</h3>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateNotes">...</pre>
+                </div>
+            </div>
+        </div>
+        <div class="maintenance-visits-instance-data">
+            <div class="instanceInfo">
+                <div class="data-field" id="info">
+                    <div class="maintenanceType-state-user" id="maintenanceType">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Maintenance type:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="maintenanceType-state-user" id="state">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="maintenanceType-state-user" id="user">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                </div>
+                <div class="data-field" id="info">
+                    <div class="creationDate-completionDate-timeSpent" id="creationDate">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Creation date:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="creationDate-completionDate-timeSpent" id="completionDate">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Completion date:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="creationDate-completionDate-timeSpent" id="timeSpent">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Time spent:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="maintenance-visits-instance-data">
+            <div class="additional">
+                <div class="notes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+    
+
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "MaintenanceVisitsInstance",
+};
+</script>
+      
+      
+<style scoped>
+.information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+
+
+.maintenance-visits-instance-name {
+    align-self: stretch;
+    padding: 1rem 0;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+}
+
+.h2-darkmode {
+    color: #fff;
+}
+
+.h2-lightmode {
+    color: #000;
+}
+
+.data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 95%;
+    padding: 0 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.maintenanceType-state-user,
+.creationDate-completionDate-timeSpent,
+.templateId-client-type {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 0rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.label {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.maintenance-visits-instance-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.instanceInfo,
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 100%;
+    padding: 0 0;
+    border-radius: 0.3125rem;
+}
+
+.additional {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 100%;
+    padding: 0rem 0.625rem;
+    border-radius: 0.3125rem;
+}
+
+.area-title {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.h3-darkmode {
+    color: #fff;
+}
+
+.h3-lightmode {
+    color: #000;
+}
+
+.data#templateNotes,
+.data#notes {
+    align-self: stretch;
+}
+
+.notes,
+.templateNotes {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    padding: 0.625rem 1.875rem 0.625rem 1.25rem;
+    padding-top: 0rem;
+}
+</style>

components/server/MaintenanceVisitsInstanceTable.vue

@@ -0,0 +1,220 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances:</div>
+        <table class="data-table" name="maintenance-visits-instance-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="['MaintenanceType', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
+                    Maintenance type</th>
+                <th
+                    :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                    State</th>
+                <th
+                    :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                    Creation date</th>
+                <th
+                    :class="['CompletionDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
+                    Completion 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="['MaintenanceType', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
+                    ...</td>
+                <td
+                    :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                    ...</td>
+                <td
+                    :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                    ...</td>
+                <td
+                    :class="['CompletionDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-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>
+
+<script>
+export default {
+    name: "MaintenanceVisitsInstanceTable",
+};
+</script>  
+    
+    
+    
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
+    background-color: #2c2c2c;
+}
+
+.div-lightmode {
+    background-color: #fff;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.ID {
+    width: 15%;
+}
+
+.ID-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.ID-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.MaintenanceType {
+    width: 15%;
+}
+
+.MaintenanceType-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.MaintenanceType-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+
+.State {
+    width: 15%;
+}
+
+.State-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.State-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.CreationDate {
+    width: 22.5%;
+}
+
+.CreationDate-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.CreationDate-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.CompletionDate {
+    width: 22.5%;
+}
+
+.CompletionDate-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.CompletionDate-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.User {
+    width: 5%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+</style>

components/server/MaintenanceVisitsTemplate.vue

@@ -0,0 +1,214 @@
+<template>
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['maintenance-visits-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Template name</h2>
+        <div class="maintenance-visits-template-data">
+            <div class="client-ID-type-user">
+                <div class="data-field" id="client">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+                <div class="data-field" id="info">
+                    <div class="id-type-user" id="ID">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="id-type-user" id="type">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="id-type-user" id="user">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="maintenance-visits-template-data">
+            <div class="additional">
+                <div class="notes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+    
+    
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "MaintenanceVisitsTemplate",
+};
+</script>   
+      
+      
+      
+<style scoped>
+.information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+
+
+.maintenance-visits-template-name {
+    align-self: stretch;
+    padding: 1rem 0;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+}
+
+.h2-darkmode {
+    color: #fff;
+}
+
+.h2-lightmode {
+    color: #000;
+}
+
+.data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 95%;
+    padding: 0 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.id-type-user {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 0rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.label {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.maintenance-visits-template-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.client-ID-type-user,
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 100%;
+    padding: 0 0;
+    border-radius: 0.3125rem;
+}
+
+.additional {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 100%;
+    padding: 0rem 0.625rem;
+    border-radius: 0.3125rem;
+}
+
+.area-title {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.h3-darkmode {
+    color: #fff;
+}
+
+.h3-lightmode {
+    color: #000;
+}
+
+.type-user {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    align-self: stretch;
+    padding: 0 1.875rem 0 0;
+    gap: 0.625rem;
+}
+
+.data#notes {
+    align-self: stretch;
+}
+
+.notes {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    padding: 0.625rem 1.875rem 0.625rem 1.25rem;
+    padding-top: 0rem;
+}
+</style>

components/server/MaintenanceVisitsTemplateTable.vue

@@ -0,0 +1,201 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
+        <table class="data-table" name="maintenance-visits-template-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
+                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    Name</th>
+                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
+                </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
+                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    ...</td>
+                <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-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>
+    </div>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "MaintenanceVisitsTemplateTable",
+};
+</script>  
+    
+    
+    
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
+    background-color: #2c2c2c;
+}
+
+.div-lightmode {
+    background-color: #fff;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.Client {
+    width: 33.3%;
+}
+
+.Client-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Client-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Name {
+    width: 33.3%;
+}
+
+.Name-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Name-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.ID {
+    width: 11.1%;
+}
+
+.ID-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.ID-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Type {
+    width: 11.1%;
+}
+
+.Type-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Type-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.User {
+    width: 11.1%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+</style>

components/server/MaintenanceVisitsTemplateTableNoClient.vue

@@ -0,0 +1,183 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
+        <table class="data-table" id="maintenance-visits-templat-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 :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
+                </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 :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-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>
+    </div>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "MaintenanceVisitsTemplateTableNoClient",
+};
+</script>
+    
+    
+    
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
+    background-color: #2c2c2c;
+}
+
+.div-lightmode {
+    background-color: #fff;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.Name {
+    width: 50%;
+}
+
+.Name-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Name-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.ID {
+    width: 22.5%;
+}
+
+.ID-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.ID-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Type {
+    width: 22.5%;
+}
+
+.Type-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Type-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.User {
+    width: 5%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+</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

@@ -0,0 +1,288 @@
+<template>
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['production-orders-instance-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Instance ID</h2>
+        <div class="production-orders-instance-data">
+            <div class="instanceInfo">
+                <div class="data-field" id="info">
+                    <div class="templateId-client" id="templateID">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template ID:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="templateId-client" id="client">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="production-orders-instance-data">
+            <div class="additional">
+                <div class="templateDescription">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template description:</h3>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateDescription">...</pre>
+                </div>
+            </div>
+            <div class="additional">
+                <div class="templateNotes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template notes:</h3>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateNotes">...</pre>
+                </div>
+            </div>
+        </div>
+        <div class="production-orders-instance-data">
+            <div class="instanceInfo">
+                <div class="data-field-four" id="infoFour">
+                    <div class="ticketNo-asset-state-user" id="ticketNo">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Ticket No.:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="ticketNo-asset-state-user" id="asset">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="ticketNo-asset-state-user" id="state">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="ticketNo-asset-state-user" id="user">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                </div>
+                <div class="data-field" id="info">
+                    <div class="creationDate-completionDate-timeSpent" id="creationDate">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Creation date:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="creationDate-completionDate-timeSpent" id="completionDate">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Completion date:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="creationDate-completionDate-timeSpent" id="timeSpent">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Time spent:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="production-orders-instance-data">
+            <div class="additional">
+                <div class="notes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+    
+
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "ProductionOrdersInstance",
+};
+</script> 
+      
+      
+<style scoped>
+.information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+
+
+.production-orders-instance-name {
+    align-self: stretch;
+    padding: 1rem 0;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+}
+
+.h2-darkmode {
+    color: #fff;
+}
+
+.h2-lightmode {
+    color: #000;
+}
+
+.data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 95%;
+    padding: 0 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.data-field-four {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 98.5%;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.ticketNo-asset-state-user {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.creationDate-completionDate-timeSpent,
+.templateId-client {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 0rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.label {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.production-orders-instance-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.instanceInfo,
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 100%;
+    padding: 0 0;
+    border-radius: 0.3125rem;
+}
+
+.infoFour {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 98.5%;
+    padding: 0 0;
+    border-radius: 0.3125rem;
+}
+
+.additional {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 100%;
+    padding: 0rem 0.625rem;
+    border-radius: 0.3125rem;
+}
+
+div#client {
+    padding-left: 2.9em;
+}
+
+.area-title {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.h3-darkmode {
+    color: #fff;
+}
+
+.h3-lightmode {
+    color: #000;
+}
+
+.data#templateDescription,
+
+.data#templateNotes,
+.data#notes {
+    align-self: stretch;
+}
+
+.templateDescription,
+.templateNotes,
+.notes {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    padding: 0.625rem 1.875rem 0.625rem 1.25rem;
+    padding-top: 0rem;
+}
+</style>

components/server/ProductionOrdersInstanceTable.vue

@@ -0,0 +1,237 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances:</div>
+        <table class="data-table" name="production-orders-instance-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="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
+                    Ticket No.</th>
+                <th
+                    :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                    Asset</th>
+                <th
+                    :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                    State</th>
+                <th
+                    :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                    Creation date</th>
+                <th
+                    :class="['CompletionDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
+                    Completion 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="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                    ...</td>
+                <td
+                    :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                    ...</td>
+                <td
+                    :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                    ...</td>
+                <td
+                    :class="['CompletionDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-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>
+
+<script>
+export default {
+    name: "ProductionOrdersInstanceTable",
+};
+</script>   
+    
+    
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
+    background-color: #2c2c2c;
+}
+
+.div-lightmode {
+    background-color: #fff;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.ID {
+    width: 15.83%;
+}
+
+.ID-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.ID-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.TicketNo {
+    width: 15.83%;
+}
+
+.TicketNo-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.TicketNo-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+
+.Asset {
+    width: 15.83%;
+}
+
+.Asset-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.State {
+    width: 15.83%;
+}
+
+.State-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.State-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.CreationDate {
+    width: 15.83%;
+}
+
+.CreationDate-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.CreationDate-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.CompletionDate {
+    width: 15.83%;
+}
+
+.CompletionDate-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.CompletionDate-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.User {
+    width: 5%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+</style>

components/server/ProductionOrdersTemplate.vue

@@ -0,0 +1,205 @@
+<template>
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['production-orders-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Template name</h2>
+        <div class="production-orders-template-data">
+            <div class="client-ID">
+                <div class="data-field" id="client">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Client:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+                <div class="data-field" id="ID">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">ID:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+            </div>
+            <div class="user">
+                <div class="data-field" id="empty">
+                    &nbsp;
+                </div>
+                <div class="data-field" id="user">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">User:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+            </div>
+        </div>
+        <div class="production-orders-template-data">
+            <div class="additional">
+                <div class="description">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
+                </div>
+            </div>
+            <div class="additional">
+                <div class="notes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+    
+    
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "ProductionOrdersTemplate",
+};
+</script>       
+      
+      
+<style scoped>
+.information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+
+
+.production-orders-template-name {
+    align-self: stretch;
+    padding: 1rem 0;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+}
+
+.h2-darkmode {
+    color: #fff;
+}
+
+.h2-lightmode {
+    color: #000;
+}
+
+.data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 95%;
+    padding: 0 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.label {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.production-orders-template-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.client-ID,
+.user {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 0 0;
+    border-radius: 0.3125rem;
+}
+
+div#empty {
+    height: 3.6rem;
+}
+
+.additional {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 100%;
+    padding: 0rem 0.625rem;
+    border-radius: 0.3125rem;
+}
+
+.area-title {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.div-darkmode,
+.h3-darkmode {
+    color: #fff;
+}
+
+.h3-lightmode {
+    color: #000;
+}
+
+
+.data#description,
+.data#notes {
+    align-self: stretch;
+}
+
+.description,
+.notes {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    padding: 0.625rem 1.875rem 0.625rem 1.25rem;
+    padding-top: 0rem;
+}
+</style>

components/server/ProductionOrdersTemplateTable.vue

@@ -0,0 +1,182 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
+        <table class="data-table" name="production-orders-template-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
+                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    Name</th>
+                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
+                </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
+                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    ...</td>
+                <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-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>
+
+<script>
+export default {
+    name: "ProductionOrdersTemplateTable",
+};
+</script> 
+    
+    
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
+    background-color: #2c2c2c;
+}
+
+.div-lightmode {
+    background-color: #fff;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.Client {
+    width: 33.3%;
+}
+
+.Client-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Client-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Name {
+    width: 33.3%;
+}
+
+.Name-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Name-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.ID {
+    width: 22.2%;
+}
+
+.ID-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.ID-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.User {
+    width: 11.1%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+</style>

components/server/ProductionOrdersTemplateTableNoClient.vue

@@ -0,0 +1,164 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
+        <table class="data-table" id="production-orders-template-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 :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
+                </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 :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-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>
+
+<script>
+export default {
+    name: "ProductionOrdersTemplateTableNoClient",
+};
+</script>     
+    
+    
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
+    background-color: #2c2c2c;
+}
+
+.div-lightmode {
+    background-color: #fff;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.Name {
+    width: 50%;
+}
+
+.Name-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Name-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.ID {
+    width: 40%;
+}
+
+.ID-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.ID-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.User {
+    width: 10%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+</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,22 +31,17 @@
 </template>
   
   
+<script setup>
+import { ref } from 'vue';
 
-<script>
+const darkMode = ref(true)
-
-export default {
-    name: "SolutionChecklist",
-    name: "AssetTable",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
 </script>
 
-    
+<script>
+export default {
+    name: "SolutionChecklist",
+};
+</script> 
     
     
 <style scoped>
@@ -173,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

@@ -0,0 +1,183 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <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
+                    :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
+                    :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>
+    </div>
+</template>
+  
+
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "TemplateChecklist",
+};
+</script> 
+  
+    
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
+    background-color: #2c2c2c;
+}
+
+.div-lightmode {
+    background-color: #fff;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+.Step {
+    width: 8%;
+}
+
+.Step-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Step-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Asset {
+    width: 22%;
+}
+
+.Asset-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Task {
+    width: 35%;
+}
+
+.Task-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Task-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Comments {
+    width: 35%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}</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="/home" 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,36 +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 ClientEmployees from "../components/server/ClientEmployees.vue";
-import ClientEmployee from "../components/server/ClientEmployee.vue";
+//import ClientEmployee from "../components/server/ClientEmployee.vue";
 
-export default {
+definePageMeta({
-  name: "ClientsPage",
+  layout: 'default'
-  components: {
+})
-    ClientTable,
-    Client,
-    ClientQuickAccess,
-    ClientEmployees,
-    ClientEmployee,
-  },
-  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

@@ -0,0 +1,130 @@
+<template>
+  <section id="content">
+    <div id="content-header">
+      <router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button">
+        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Maintenance visits</h1>
+      </router-link>
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      <router-link to="/productionOrders" class="button" id="productionOrders-button">
+        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Production orders</h1>
+      </router-link>
+    </div>
+    <div id="content-body">
+      <ClientSearch />
+      <MaintenanceVisitsTemplateTable />
+      <MaintenanceVisitsTemplateTableNoClient />
+      <MaintenanceVisitsTemplate />
+      <TemplateChecklist />
+      <TemplateSearch />
+      <MaintenanceVisitsInstanceTable />
+      <MaintenanceVisitsInstance />
+      <InstanceChecklist />
+    </div>
+  </section>
+</template>
+      
+      
+<script setup>
+import { ref } from 'vue';
+
+import ClientSearch from "../components/ClientSearch.vue";
+import MaintenanceVisitsTemplateTable from "../components/server/MaintenanceVisitsTemplateTable.vue";
+import MaintenanceVisitsTemplateTableNoClient from "../components/server/MaintenanceVisitsTemplateTableNoClient.vue";
+import MaintenanceVisitsTemplate from "../components/server/MaintenanceVisitsTemplate.vue";
+import TemplateChecklist from "../components/server/TemplateChecklist.vue";
+import TemplateSearch from "../components/TemplateSearch.vue";
+import MaintenanceVisitsInstanceTable from "../components/server/MaintenanceVisitsInstanceTable.vue";
+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",
+}
+</script>
+        
+        
+        
+<style scoped>
+* {
+  box-sizing: border-box;
+}
+
+
+#content {
+  display: flex;
+  flex-direction: column;
+  float: left;
+  justify-content: stretch;
+  align-items: stretch;
+  width: 100%;
+  flex-grow: 1;
+  gap: 0.625rem;
+  padding: 0 1.25rem;
+}
+
+#content-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 3.125rem;
+}
+
+#page-name {
+  letter-spacing: 5%;
+  font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
+    sans-serif;
+}
+
+#active-page-name {
+  letter-spacing: 5%;
+  font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
+    sans-serif;
+  text-decoration: underline;
+}
+
+.button {
+  text-decoration: none;
+}
+
+.h1-darkmode {
+  color: #fff;
+}
+
+.h1-lightmode {
+  color: #000;
+}
+
+#content-body {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 1.25rem;
+  margin-bottom: 0.625rem;
+  border-radius: 0.625rem;
+}
+</style>

pages/productionOrders.vue

@@ -0,0 +1,129 @@
+<template>
+    <section id="content">
+        <div id="content-header">
+            <router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button">
+                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Maintenance visits</h1>
+            </router-link>
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            <router-link to="/productionOrders" class="button" id="productionOrders-button">
+                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Production orders</h1>
+            </router-link>
+        </div>
+        <div id="content-body">
+            <ClientSearch />
+            <ProductionOrdersTemplateTable />
+            <ProductionOrdersTemplateTableNoClient />
+            <ProductionOrdersTemplate />
+            <TemplateChecklist />
+            <TemplateSearch />
+            <ProductionOrdersInstanceTable />
+            <ProductionOrdersInstance />
+            <InstanceChecklist />
+        </div>
+    </section>
+</template>
+    
+    
+<script setup>
+import { ref } from 'vue';
+
+import ClientSearch from "../components/ClientSearch.vue";
+import ProductionOrdersTemplateTable from "../components/server/ProductionOrdersTemplateTable.vue";
+import ProductionOrdersTemplateTableNoClient from "../components/server/ProductionOrdersTemplateTableNoClient.vue";
+import ProductionOrdersTemplate from "../components/server/ProductionOrdersTemplate.vue";
+import TemplateChecklist from "../components/server/TemplateChecklist.vue";
+import TemplateSearch from "../components/TemplateSearch.vue";
+import ProductionOrdersInstanceTable from "../components/server/ProductionOrdersInstanceTable.vue";
+import ProductionOrdersInstance from "../components/server/ProductionOrdersInstance.vue";
+import InstanceChecklist from "../components/server/InstanceChecklist.vue";
+
+definePageMeta({
+    layout: 'default'
+})
+
+const darkMode = ref(true)
+</script>
+  
+<script>
+export default {
+    name: "ProductionOrdersPage",
+}
+</script>     
+      
+      
+<style scoped>
+* {
+    box-sizing: border-box;
+}
+
+
+#content {
+    display: flex;
+    flex-direction: column;
+    float: left;
+    justify-content: stretch;
+    align-items: stretch;
+    width: 100%;
+    flex-grow: 1;
+    gap: 0.625rem;
+    padding: 0 1.25rem;
+}
+
+#content-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 3.125rem;
+}
+
+#page-name {
+    letter-spacing: 5%;
+    font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+}
+
+#active-page-name {
+    letter-spacing: 5%;
+    font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+    text-decoration: underline;
+}
+
+.button {
+    text-decoration: none;
+}
+
+.h1-darkmode {
+    color: #fff;
+}
+
+.h1-lightmode {
+    color: #000;
+}
+
+#content-body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 1.25rem;
+    margin-bottom: 0.625rem;
+    border-radius: 0.625rem;
+}
+</style>

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>
     
     

routerFrontend/index.js

@@ -6,6 +6,8 @@ import AssetPage from '../pages/assets.vue';
 import SolutionPage from '../pages/solutions.vue';
 import IssueSlipPage from '../pages/issueSlips.vue';
 import IssuesPages from '../pages/issues.vue';
+import MaintenanceVisitsPage from '../pages/maintenanceVisits.vue';
+import ProductionOrdersPage from '../pages/productionOrders.vue';
 
 const router = createRouter({
     history: createWebHistory(),
@@ -18,6 +20,14 @@ const router = createRouter({
             path: '/home',
             component: HomePage
         }, 
+        {
+            path: '/productionOrders',
+            component: ProductionOrdersPage
+        },  
+        {
+            path: '/maintenanceVisits',
+            component: MaintenanceVisitsPage
+        },
         {
             path: '/assets',
             component: AssetPage