added lightmode option

Reviewed-on: jo.kuehner/TueIT_App#6

components/ClientSearch.vue

@@ -1,14 +1,18 @@
 <template>
-  <section class="client-search">
+  <section :class="['client-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
-    <div class="label">Client</div>
+    <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Client</div>
-    <pre class="data">...</pre>
+    <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">...</pre>
   </section>
 </template>
 
 <script>
 export default {
   name: "ClientSearch",
-
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 };
 </script>
 
@@ -20,11 +24,18 @@ export default {
   gap: 1.25em;
   width: 30.125em;
   height: 3.125em;
-  background: #2C2C2C;
   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: 2.5625em;
   height: 1.875em;
@@ -34,15 +45,15 @@ export default {
   font-size: 0.875em;
   line-height: 1.875;
   letter-spacing: 0.05em;
+}
+
+.label-darkmode {
   color: #FFFFFF;
 }
 
-
+.label-lightmode {
-  /* flex: 0;
+  color: #000;
-  height: 1.875em; */
+}
-  /* min-width: 1.875em;
-  width: fit-content; 
-  overflow: hidden; */
 
 .data {
   display: flex;
@@ -51,21 +62,17 @@ export default {
   padding: 0 0.625rem;
   border-radius: 0.3125rem;
   box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
-    background-color: #212121;
-    color: #fff;
   letter-spacing: 5%;
   font: 400 0.75rem/250% Overpass, sans-serif;
-
-    /* gap: 0.625em;
-    flex: 0; */
 }
 
-.input input {
+.pre-darkmode {
-  flex: 1;
+  background-color: #212121;
-  width: 100%;
+  color: #fff;
-  height: 100%;
+}
-  border: none;
+
-  background: transparent;
+.pre-lightmode {
-  color: #FFFFFF;
+  background-color: #EBEBEB;
+  color: #000;
 }
 </style>

components/Dashboard.vue

@@ -1,11 +1,14 @@
 <template>
-  <section class="dashboard">
+  <section :class="['dashboard', darkMode ? 'section-darkmode' : 'section-lightmode']">
-    <h2 class="heading">My tasks</h2>
+    <h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">My tasks</h2>
     <div class="shortcuts">
-      <input type="button" id="maintenance-visits" value="My Maintenance Visits">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="maintenance-visits"
-      <input type="button" id="production-orders" value="My Production Orders">
+        value="My Maintenance Visits">
-      <input type="button" id="solutions" value="My Solutions">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="production-orders"
-      <input type="button" id="issue-slips" value="My Issue Slips">
+        value="My Production Orders">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="solutions" value="My Solutions">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="issue-slips"
+        value="My Issue Slips">
     </div>
   </section>
 </template>
@@ -16,7 +19,11 @@
 
 export default {
   name: "Dashboard",
-  
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -25,7 +32,6 @@ export default {
   
   
 <style scoped>
-  
 .dashboard {
   display: flex;
   flex-direction: column;
@@ -37,16 +43,30 @@ export default {
   gap: 1.25rem;
   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;
+}
+
 .heading {
-    color: #fff;
   letter-spacing: 5%;
   text-decoration-line: underline;
   font: 400 1rem/2rem Overpass, sans-serif;
 }
 
+.heading-darkmode {
+  color: #fff;
+}
+
+.heading-lightmode {
+  color: #000;
+}
+
 .shortcuts {
   display: flex;
   flex-direction: row;
@@ -66,13 +86,17 @@ export default {
   border-radius: 0.625rem;
   padding: 0.9375rem 1.25rem;
   border: none;
-    color: #fff;
   text-align: center;
   letter-spacing: 5%;
   font: 400 0.875rem/2rem Overpass, sans-serif;
+}
+
+.input-darkmode {
+  color: #fff;
   background-color: #343434;
 }
 
-  
+.input-lightmode {
-  
+  color: #000;
-</style>
+  background-color: #E4E4E4;
+}</style>

components/QuickAccess.vue

@@ -1,8 +1,8 @@
 <template>
-  <section class="quick-access">
+  <section :class="['quick-access', darkMode ? 'section-darkmode' : 'section-lightmode']">
-    <h2 class="heading">Quick Access</h2>
+    <h2 :class="['heading', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Quick Access</h2>
     <div class="shortcuts">
-      <input type="button" id="pins" value="Pins">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="pins" value="Pins">
       <!--<input type="button" id="maintenance-visits" value="My Maintenance Visits">
       <input type="button" id="production-orders" value="My Production Orders">
       <input type="button" id="solutions" value="My Solutions">
@@ -16,7 +16,11 @@
 
 export default {
   name: "QuickAccess",
-  
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -25,7 +29,6 @@ export default {
 
 
 <style scoped>
-  
 .quick-access {
   display: flex;
   flex-direction: column;
@@ -37,9 +40,16 @@ export default {
   gap: 1.25rem;
   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;
+}
+
 .heading {
   color: #fff;
   letter-spacing: 5%;
@@ -47,6 +57,14 @@ export default {
   font: 400 1rem/2rem Overpass, sans-serif;
 }
 
+.h2-darkmode {
+  color: #fff;
+}
+
+.h2-lightmode {
+  color: #000;
+}
+
 .shortcuts {
   display: flex;
   flex-direction: row;
@@ -66,19 +84,25 @@ export default {
   border-radius: 0.625rem;
   padding: 0.9375rem 1.25rem;
   border: none;
-    color: #fff;
   text-align: center;
   letter-spacing: 5%;
   font: 400 0.875rem/2rem Overpass, sans-serif;
+}
+
+.input-darkmode {
+  color: #fff;
   background-color: #343434;
 }
+
+.input-lightmode {
+  color: #000;
+  background-color: #E4E4E4;
+}
+
 input#pins {
   border: 0.0625rem dashed #454545;
   color: #8e8e8e;
   font: 400 0.875rem/2rem Overpass, sans-serif;
   background-color: #34343400;
 }
-  
-  
-  
 </style>

components/server/Asset.vue

@@ -0,0 +1,250 @@
+<template>
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Asset name</h2>
+        <div class="asset-data">
+            <div class="client-location">
+                <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="location">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Location:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+            </div>
+            <div class="info">
+                <div class="id-type">
+                    <div class="data-field" id="id">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="data-field" id="type">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                </div>
+                <div class="data-field" id="remote-location">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Remote location:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+            </div>
+            <div class="rectangle-container">
+                <div :class="['rectangle', darkMode ? 'rectangle-darkmode' : 'rectangle-lightmode']"></div>
+            </div>
+        </div>
+        <div class="asset-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>
+
+export default {
+    name: "Asset",
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
+}
+
+</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;
+}
+
+
+.asset-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: 100%;
+    padding: 0 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.data-field#street-name {
+    width: 70%;
+}
+
+.data-field#street-no {
+    width: 30%;
+}
+
+.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;
+}
+
+.data#notes,
+.data#description {
+    align-self: stretch;
+}
+
+.asset-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.client-location,
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 0 0;
+    border-radius: 0.3125rem;
+}
+
+.additional {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    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;
+}
+.id-type {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    align-self: stretch;
+    padding: 0 1.875rem 0 0;
+    gap: 0.625rem;
+}
+
+.notes,
+.description {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    padding: 0.625rem 1.875rem 0.625rem 1.25rem;
+}
+
+.rectangle-container {
+    display: flex;
+    padding-top: 1rem;
+}
+
+.rectangle {
+    width: 6.25em;
+    height: 6.25em;
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+}
+
+.rectangle-darkmode {
+  background-color: #212121;
+}
+
+.rectangle-lightmode {
+  background-color: #EBEBEB;
+}
+</style>

components/server/AssetTable.vue

@@ -1,20 +1,20 @@
 <template>
-    <div class="data">
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
-        <div class="label">Last viewed:</div>
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
-        <table class="data-table" id="client-table">
+        <table class="data-table" id="asset-table">
-            <tr class="table-row" id="table-head">
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th class="Client">Client</th>
+                <th :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">Client</th>
-                <th class="Name">Name</th>
+                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
-                <th class="Type">Type</th>
+                <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
-                <th class="State">State</th>
+                <th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th>
-                <th class="User">User</th>
+                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
             </tr>
-            <tr class="table-row" id="row-1">
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td class="Client">...</td>
+                <td :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">...</td>
-                <td class="Name">...</td>
+                <td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
-                <td class="Type">...</td>
+                <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td>
-                <td class="State">...</td>
+                <td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</td>
-                <td class="User">...</td>
+                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
             </tr>
         </table>
     </div>
@@ -26,7 +26,11 @@
 
 export default {
     name: "AssetTable",
-
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
 }
 
 </script>
@@ -46,9 +50,16 @@ export default {
     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;
@@ -63,12 +74,24 @@ export default {
     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;
 }
 
-#table-head {
+.tr-lightmode {
-    border-top: none;
+    border-top: 0.0625rem solid #8e8e8e;
-    border-bottom: 0.0625rem solid #000000;
 }
 
 th,
@@ -76,35 +99,72 @@ td {
     height: 1.875rem;
     text-align: left;
     padding: 0;
-    color: #ffffff;
     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;
+}
+
 .Type {
     width: 12.7%;
+}
+
+.Type-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.Type-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .State {
     width: 12.7%;
+}
+
+.State-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.State-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .User {
     width: 8%;
 }
@@ -118,6 +178,13 @@ th {
     font-size: 1em;
     line-height: 1.875em;
     letter-spacing: 0.05em;
+}
+
+.label-darkmode {
     color: #FFFFFF;
 }
+
+.label-lightmode {
+    color: #000;
+}
 </style>

components/server/AssetTableNoClient.vue

@@ -0,0 +1,178 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <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 :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 :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>
+
+export default {
+    name: "AssetTableNoClient",
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
+}
+
+</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;
+}
+
+.Type {
+    width: 20%;
+}
+
+.Type-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Type-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.State {
+    width: 20%;
+}
+
+.State-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.State-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/HardwareSpecifications.vue

@@ -0,0 +1,186 @@
+<template>
+    <section :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:</div>
+        <div class="asset-data">
+            <div class="model-CPU">
+                <div class="data-field" id="model">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Model:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+                <div class="data-field" id="CPU">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">CPU:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+            </div>
+            <div class="serial-number-RAM">
+                <div class="data-field" id="serial-number">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Serial number:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+                <div class="data-field" id="RAM">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">RAM:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+            </div>
+        </div>
+        <div class="asset-data">
+            <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>
+                </div>
+            </div>
+            <div class="additional">
+                <div class="miscellaneous">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Miscellaneous:</h3>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="miscellaneous">...</pre>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+    
+    
+    
+<script>
+
+export default {
+    name: "HardwareSpecifications",
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
+}
+
+</script>
+    
+      
+      
+      
+<style scoped>
+.hardware-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;
+}
+
+
+.data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.label {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.div-darkmode,
+.h3-darkmode {
+    color: #fff;
+}
+
+.div-lightmode,
+.h3-lightmode {
+    color: #000;
+}
+
+.label#hardware {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+.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;
+}
+
+.data#miscellaneous,
+.data#storage-configuration {
+    align-self: stretch;
+}
+
+.asset-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.model-CPU,
+.serial-number-RAM {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 0 0;
+    border-radius: 0.3125rem;
+}
+
+.additional {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 0rem 0.625rem;
+    border-radius: 0.3125rem;
+}
+
+.area-title {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+
+.storage-configuration,
+.miscellaneous {
+    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>

components/server/NetworkSpecifications.vue

@@ -0,0 +1,136 @@
+<template>
+    <section :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="network">Network specifications:</div>
+        <div class="asset-data">
+            <div class="IPv4-MAC">
+                <div class="data-field" id="IPv4">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv4:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+                <div class="data-field" id="MAC">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">MAC:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+            </div>
+            <div class="IPv6-subnetmask">
+                <div class="data-field" id="IPv6">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv6:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+                <div class="data-field" id="subnetmask">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Subnetmask:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+    
+    
+    
+<script>
+
+export default {
+    name: "NetworkSpecifications",
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
+}
+
+</script>
+    
+      
+      
+      
+<style scoped>
+.network-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;
+}
+
+.data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.label {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.div-darkmode {
+    color: #fff;
+}
+
+.div-lightmode {
+    color: #000;
+}
+
+.label#network {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+.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;
+}
+
+.asset-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.IPv4-MAC,
+.IPv6-subnetmask {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 0 0;
+    border-radius: 0.3125rem;
+}
+</style>

components/server/SoftwareSpecifications.vue

@@ -0,0 +1,173 @@
+<template>
+    <section :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="software">Software specifications:
+            <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 :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 :class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Version-darkmode' : 'Version-lightmode']">...</td>
+                        <td :class="['License', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </section>
+</template>
+    
+    
+    
+<script>
+
+export default {
+    name: "SoftwareSpecifications",
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
+}
+
+</script>
+    
+      
+      
+      
+<style scoped>
+.software-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;
+}
+
+.label {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+
+.label#software {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+.asset-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+    padding-left: 0.625rem;
+    padding-top: 1rem;
+}
+
+.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;
+}
+
+
+.Software {
+    width: 50%;
+}
+
+.Software-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Software-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Version {
+    width: 25%;
+}
+
+.Version-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Version-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.License {
+    width: 25%;
+}
+</style>

components/server/Solution.vue

@@ -0,0 +1,239 @@
+<template>
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['solution-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Solution name</h2>
+        <div class="solution-data">
+            <div class="client-asset">
+                <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="asset">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+            </div>
+            <div class="info">
+                <div class="data-field" id="user">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+                <div class="type-state">
+                    <div class="data-field" id="type">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="data-field" id="state">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <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>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
+                </div>
+            </div>
+        </div>
+        <div class="solution-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>
+
+export default {
+    name: "Solution",
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
+}
+
+</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;
+}
+
+
+
+.solution-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: 100%;
+    padding: 0 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.data-field#street-name {
+    width: 70%;
+}
+
+.data-field#street-no {
+    width: 30%;
+}
+
+.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;
+}
+
+.solution-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.client-asset,
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    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-state {
+    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,
+.data#description {
+    align-self: stretch;
+}
+
+.description {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    padding: 0.625rem 1.875rem 0.625rem 1.25rem;
+}
+
+.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/SolutionChecklist.vue

@@ -0,0 +1,177 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <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 :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>
+
+export default {
+    name: "SolutionChecklist",
+    name: "AssetTable",
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
+}
+
+</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>

components/server/SolutionTable.vue

@@ -0,0 +1,190 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <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 :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 :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>
+    </div>
+</template>
+  
+  
+  
+<script>
+
+export default {
+    name: "SolutionTable",
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
+}
+
+</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;
+}
+
+.Asset {
+    width: 12.7%;
+}
+
+.Asset-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Type {
+    width: 12.7%;
+}
+
+.Type-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Type-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.User {
+    width: 8%;
+}
+
+.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/SolutionTableNoClient.vue

@@ -0,0 +1,176 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <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 :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 :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>
+    </div>
+</template>
+  
+  
+  
+<script>
+
+export default {
+    name: "SolutionTableNoClient",
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
+}
+
+</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;
+}
+
+.Name {
+    width: 45%;
+}
+
+.Name-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Name-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Asset {
+    width: 22.5%;
+}
+
+.Asset-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset-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: 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>

layouts/Navigationbar.vue

@@ -37,7 +37,7 @@
           </div>
           <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span>
         </router-link>
-        <router-link to="/home" 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" />

layouts/PageHeader.vue

@@ -1,12 +1,10 @@
 <template>
-    <header>
+    <header :class="[darkMode ? 'header-darkmode' : 'header-lightmode']">
-        <img id="header-logo"
+        <img id="header-logo" loading="lazy" src="../tüit-logo.svg.png" />
-            loading="lazy" src="../tüit-logo.svg.png" />
         <div class="profile">
-            <div class="username">username</div>
+            <div :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']">username</div>
-            <div class="picture">
+            <div :class="['picture', darkMode ? 'picture-darkmode' : 'picture-lightmode']">
-                <img id="picture"
+                <img id="picture" loading="lazy" src="" />
-                    loading="lazy" src="" />
             </div>
         </div>
     </header>
@@ -17,13 +15,17 @@
 
 export default {
     name: "PageHeader",
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
 }
 
 </script>
 
 
 <style scoped>
-
 * {
     box-sizing: border-box;
 }
@@ -39,7 +41,16 @@ export default {
     justify-content: space-between;
     align-items: center;
     padding: 0.625rem 1.25rem;
-        background-color: #2c2c2c;
+}
+
+.header-darkmode {
+    background-color: #212121;
+    border-bottom: 0.125em solid #000;
+}
+
+.header-lightmode {
+    background-color: #EBEBEB;
+    border-bottom: 0.125em solid #8e8e8e61;
 }
 
 #header-logo {
@@ -59,20 +70,35 @@ export default {
     gap: 0.625rem;
     padding: 0 0.625rem;
 }
+
 .username {
     align-self: center;
     margin: auto 0;
-        color: #fff;
     text-align: right;
     font: 200 0.875rem Overpass, sans-serif;
     letter-spacing: 5%;
 }
+
+.username-darkmode {
+    color: #fff;
+}
+
+.username-lightmode {
+    color: #000;
+}
+
 .picture {
     display: flex;
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 50%;
+}
+
+.picture-darkmode {
     background-color: #fff;
 }
 
+.picture-lightmode {
+    background-color: #000;
+}
 </style>

layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <PageHeader />
-  <main>
+  <main :class="[darkMode ? 'main-darkmode' : 'main-lightmode']">
     <Navigationbar />
     <slot />
     <Actionbar />
@@ -19,7 +19,12 @@ export default {
     PageHeader,
     Navigationbar,
     Actionbar,
-    }
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -27,7 +32,6 @@ export default {
   
   
 <style scoped>
-
 * {
   box-sizing: border-box;
 }
@@ -38,9 +42,17 @@ export default {
   width: 100%;
   padding: 0.625rem;
   gap: 0.625rem;
+  height: 100vh;
+  width: 100vw;
+  height: 100%;
+  width: 100%;
+}
+
+.main-darkmode {
   background-color: #212121;
 }
 
-  
+.main-lightmode {
-  
+  background-color: #EBEBEB;
+}
 </style>

layouts/empty.vue

@@ -1,6 +1,6 @@
 <template>
   <PageHeader />
-    <main>
+  <main :class="[darkMode ? 'main-darkmode' : 'main-lightmode']">
     <slot />
   </main>
 </template>
@@ -13,7 +13,12 @@
   name: "Page",
   components: {
     PageHeader,
-      }
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -21,7 +26,6 @@
     
     
 <style scoped>
-  
 * {
   box-sizing: border-box;
 }
@@ -32,9 +36,17 @@
   flex-direction: row;
   gap: 0.625rem;
   padding: 0.625rem 1.5625rem 0.625rem 0.625rem;
+  height: 100vh;
+  width: 100vw;
+  height: 100%;
+  width: 100%;
+}
+
+.main-darkmode {
   background-color: #212121;
 }
 
-    
+.main-lightmode {
-    
+  background-color: #EBEBEB;
+}
 </style>

pages/assets.vue

@@ -1,11 +1,16 @@
 <template>
   <section id="content">
     <div id="content-header">
-            <h1 id="page-name">Assets</h1>
+      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
     </div>
     <div id="content-body">
       <ClientSearch />
       <AssetTable />
+      <AssetTableNoClient />
+      <Asset />
+      <HardwareSpecifications />
+      <SoftwareSpecifications />
+      <NetworkSpecifications />
     </div>
   </section>
 </template>
@@ -20,13 +25,28 @@
 <script>
 import ClientSearch from "../components/ClientSearch.vue";
 import AssetTable from "../components/server/AssetTable.vue";
+import AssetTableNoClient from "../components/server/AssetTableNoClient.vue";
+import Asset from "../components/server/Asset.vue";
+import HardwareSpecifications from "../components/server/HardwareSpecifications.vue";
+import SoftwareSpecifications from "../components/server/SoftwareSpecifications.vue";
+import NetworkSpecifications from "../components/server/NetworkSpecifications.vue";
 
 export default {
   name: "AssetPage",
   components: {
     ClientSearch,
     AssetTable,
-    }
+    AssetTableNoClient,
+    Asset,
+    HardwareSpecifications,
+    SoftwareSpecifications,
+    NetworkSpecifications,
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -34,7 +54,6 @@ import AssetTable from "../components/server/AssetTable.vue";
     
     
 <style scoped>
-
 * {
   box-sizing: border-box;
 }
@@ -60,11 +79,20 @@ import AssetTable from "../components/server/AssetTable.vue";
   width: 100%;
   height: 3.125rem;
 }
+
 #page-name {
-    color: #fff;
   letter-spacing: 5%;
   font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
     sans-serif;
+  text-decoration: underline;
+}
+
+.h1-darkmode {
+  color: #fff;
+}
+
+.h1-lightmode {
+  color: #000;
 }
 
 #content-body {

pages/clients.vue

@@ -1,7 +1,7 @@
 <template>
   <section id="content">
     <div id="content-header">
-            <h1 id="page-name">Clients</h1>
+      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Clients</h1>
     </div>
     <div id="content-body">
       <Client />
@@ -32,7 +32,12 @@
     ClientQuickAccess,
     ClientEmployees,
     ClientEmployee,
-    }
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -40,7 +45,6 @@
     
     
 <style scoped>
-
 * {
   box-sizing: border-box;
 }
@@ -66,12 +70,20 @@
   width: 100%;
   height: 3.125rem;
 }
+
 #page-name {
-    color: #fff;
   letter-spacing: 5%;
   font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
 }
 
+.h1-darkmode {
+  color: #fff;
+}
+
+.h1-lightmode {
+  color: #000;
+}
+
 #content-body {
   display: flex;
   flex-direction: column;
@@ -80,6 +92,4 @@
   margin-bottom: 0.625rem;
   border-radius: 0.625rem;
 }
-
-  
 </style>

pages/home.vue

@@ -2,7 +2,7 @@
   <Navigationbar />
   <section id="content">
     <div id="content-header">
-      <pre id="page-name">Home</pre>
+      <pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name">Home</pre>
     </div>
     <div id="content-body">
       <Dashboard />
@@ -29,7 +29,12 @@
     Navigationbar,
     Dashboard,
     QuickAccess,
-    }
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -37,7 +42,6 @@
     
     
 <style>
-
 * {
   box-sizing: border-box;
 }
@@ -62,12 +66,20 @@
   width: 100%;
   height: 3.125rem;
 }
+
 #page-name {
-    color: #fff;
   letter-spacing: 5%;
   font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
 }
 
+.pre-darkmode {
+  color: #fff;
+}
+
+.pre-lightmode {
+  color: #000;
+}
+
 #content-body {
   display: flex;
   flex-direction: column;
@@ -76,6 +88,4 @@
   margin-bottom: 0.625rem;
   border-radius: 0.625rem;
 }
-
-  
 </style>

pages/index.vue

@@ -1,10 +1,10 @@
 <template>
   <section id="content">
     <div id="content-header">
-            <h1 id="page-name">Pagename</h1>
+      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Pagename</h1>
     </div>
     <div id="content-body">
-            <section id="stuff"></section>
+      <section :class="[darkMode ? 'stuff-darkmode' : 'stuff-lightmode']" id="stuff"></section>
     </div>
   </section>
 </template>
@@ -20,7 +20,12 @@
 export default {
   name: "Testpage",
   components: {
-    }
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -28,7 +33,6 @@
     
     
 <style scoped>
-
 * {
   box-sizing: border-box;
 }
@@ -46,6 +50,14 @@
   padding: 0 1.25rem;
 }
 
+.h1-darkmode {
+  color: #fff;
+}
+
+.h1-lightmode {
+  color: #000;
+}
+
 #content-header {
   display: flex;
   flex-direction: row;
@@ -54,8 +66,8 @@
   width: 100%;
   height: 3.125rem;
 }
+
 #page-name {
-    color: #fff;
   letter-spacing: 5%;
   font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
     sans-serif;
@@ -77,7 +89,14 @@
   gap: 1.25rem;
   padding: 1.25rem 1.875rem;
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+  border-radius: 0.625em;
+}
+
+.stuff-darkmode {
   background-color: #2C2C2C;
 }
 
+.stuff-lightmode {
+  background-color: #fff;
+}
 </style>

pages/login.vue

@@ -1,7 +1,7 @@
 <template>
   <section id="content">
     <div id="content-header">
-      <pre id="page-name"> </pre>
+      <pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name"> </pre>
     </div>
     <div id="content-body">
       <LoginForm />
@@ -23,7 +23,12 @@ export default {
   name: "LoginPage",
   components: {
     LoginForm,
-    }
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -31,7 +36,6 @@ export default {
   
   
 <style scoped>
-
 * {
   box-sizing: border-box;
 }
@@ -57,12 +61,20 @@ export default {
   width: 100%;
   height: 3.125rem;
 }
+
 #page-name {
-    color: #fff;
   letter-spacing: 5%;
   font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
 }
 
+.pre-darkmode {
+  color: #fff;
+}
+
+.pre-lightmode {
+  color: #000;
+}
+
 #content-body {
   display: flex;
   flex-direction: column;
@@ -74,7 +86,4 @@ export default {
   margin-bottom: 0.625rem;
   border-radius: 0.625rem;
 }
-
-  
-  
 </style>

pages/solutions.vue

@@ -0,0 +1,100 @@
+<template>
+  <section id="content">
+    <div id="content-header">
+      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
+    </div>
+    <div id="content-body">
+      <ClientSearch />
+      <SolutionTable />
+      <SolutionTableNoClient />
+      <Solution />
+      <SolutionChecklist />
+    </div>
+  </section>
+</template>
+  
+  
+<script setup>
+definePageMeta({
+  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";
+
+export default {
+  name: "AssetPage",
+  components: {
+    ClientSearch,
+    SolutionTable,
+    SolutionTableNoClient,
+    Solution,
+    SolutionChecklist,
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
+}
+
+</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;
+  text-decoration: underline;
+}
+
+.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>

routerFrontend/index.js

@@ -2,8 +2,8 @@ import { createRouter, createWebHistory } from 'vue-router';
 import HomePage from '../pages/home.vue';
 import ClientsPage from '../pages/clients.vue';
 import LoginPage from '../pages/login.vue';
-import AssetPage from '../pages/assets.vue'
+import AssetPage from '../pages/assets.vue';
-
+import SolutionPage from '../pages/solutions.vue';
 
 const router = createRouter({
     history: createWebHistory(),
@@ -20,6 +20,10 @@ const router = createRouter({
             path: '/assets',
             component: AssetPage
         },  
+        {
+            path: '/solutions',
+            component: SolutionPage
+        },  
         {
             path: '/clients',
             component: ClientsPage