added lightmode option

Merge pull request 'added the other components of the solution page' (#6 ) from otherSolutionPages into main
Reviewed-on: jo.kuehner/TueIT_App#6
2023-11-22 13:41:53 +01:00 · 2023-11-21 08:10:50 +00:00 · 2023-11-19 19:41:58 +01:00 · 2023-11-19 17:56:05 +00:00 · 2023-11-15 13:54:30 +01:00 · 2023-11-15 08:57:12 +00:00
24 changed files with 2633 additions and 576 deletions
--- a/components/ClientSearch.vue
+++ b/components/ClientSearch.vue
@ -1,14 +1,18 @@
 <template>
-  <section class="client-search">
-    <div class="label">Client</div>
-    <pre class="data">...</pre>
+  <section :class="['client-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Client</div>
+    <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;
 }

-
-  /* flex: 0;
-  height: 1.875em; */
-  /* min-width: 1.875em;
-  width: fit-content; 
-  overflow: hidden; */
+.label-lightmode {
+  color: #000;
+}

 .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 {
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  border: none;
-  background: transparent;
-  color: #FFFFFF;
+.pre-darkmode {
+  background-color: #212121;
+  color: #fff;
+}
+
+.pre-lightmode {
+  background-color: #EBEBEB;
+  color: #000;
 }
 </style>
--- a/components/Dashboard.vue
+++ b/components/Dashboard.vue
@ -1,11 +1,14 @@
 <template>
-  <section class="dashboard">
-    <h2 class="heading">My tasks</h2>
+  <section :class="['dashboard', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <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 type="button" id="production-orders" value="My Production Orders">
-      <input type="button" id="solutions" value="My Solutions">
-      <input type="button" id="issue-slips" value="My Issue Slips">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="maintenance-visits"
+        value="My Maintenance Visits">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="production-orders"
+        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;
 }

-  
-  
-</style>
+.input-lightmode {
+  color: #000;
+  background-color: #E4E4E4;
+}</style>
--- a/components/QuickAccess.vue
+++ b/components/QuickAccess.vue
@ -1,8 +1,8 @@
 <template>
-  <section class="quick-access">
-    <h2 class="heading">Quick Access</h2>
+  <section :class="['quick-access', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <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>
--- a/components/server/Asset.vue
+++ b/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>
--- a/components/server/AssetTable.vue
+++ b/components/server/AssetTable.vue
@ -1,20 +1,20 @@
 <template>
-    <div class="data">
-        <div class="label">Last viewed:</div>
-        <table class="data-table" id="client-table">
-            <tr class="table-row" id="table-head">
-                <th class="Client">Client</th>
-                <th class="Name">Name</th>
-                <th class="Type">Type</th>
-                <th class="State">State</th>
-                <th class="User">User</th>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <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 :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" id="row-1">
-                <td class="Client">...</td>
-                <td class="Name">...</td>
-                <td class="Type">...</td>
-                <td class="State">...</td>
-                <td class="User">...</td>
+            <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="['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>
@ -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 {
-    border-top: none;
-    border-bottom: 0.0625rem solid #000000;
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
 }

 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>
--- a/components/server/AssetTableNoClient.vue
+++ b/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>
--- a/components/server/HardwareSpecifications.vue
+++ b/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>
--- a/components/server/NetworkSpecifications.vue
+++ b/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>
--- a/components/server/SoftwareSpecifications.vue
+++ b/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>
--- a/components/server/Solution.vue
+++ b/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>
--- a/components/server/SolutionChecklist.vue
+++ b/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>
--- a/components/server/SolutionTable.vue
+++ b/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>
--- a/components/server/SolutionTableNoClient.vue
+++ b/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>
--- a/layouts/Navigationbar.vue
+++ b/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" />
--- a/layouts/PageHeader.vue
+++ b/layouts/PageHeader.vue
@ -1,12 +1,10 @@
 <template>
-    <header>
-        <img id="header-logo"
-            loading="lazy" src="../tüit-logo.svg.png" />
+    <header :class="[darkMode ? 'header-darkmode' : 'header-lightmode']">
+        <img id="header-logo" loading="lazy" src="../tüit-logo.svg.png" />
        <div class="profile">
-            <div class="username">username</div>
-            <div class="picture">
-                <img id="picture"
-                    loading="lazy" src="" />
+            <div :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']">username</div>
+            <div :class="['picture', darkMode ? 'picture-darkmode' : 'picture-lightmode']">
+                <img id="picture" 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>
--- a/layouts/default.vue
+++ b/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>
--- a/layouts/empty.vue
+++ b/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>
--- a/pages/assets.vue
+++ b/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 {
--- a/pages/clients.vue
+++ b/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>
--- a/pages/home.vue
+++ b/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>
--- a/pages/index.vue
+++ b/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>
--- a/pages/login.vue
+++ b/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>
--- a/pages/solutions.vue
+++ b/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>
--- a/routerFrontend/index.js
+++ b/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
Author	SHA1	Message	Date
selina.mail	3fd31bcc43	added lightmode option	2023-11-22 13:41:53 +01:00
selina.mail	8a4ced29ac	Merge pull request 'added the other components of the solution page' (#6 ) from otherSolutionPages into main Reviewed-on: jo.kuehner/TueIT_App#6	2023-11-21 08:10:50 +00:00
selina.mail	3798493da1	added the other components of the solution page	2023-11-19 19:41:58 +01:00
selina.mail	1a826b7edf	Merge pull request 'add other components for assets' (#5 ) from assetsOtherPages into main Reviewed-on: jo.kuehner/TueIT_App#5	2023-11-19 17:56:05 +00:00
selina.mail	5ca5bbbc13	add other components for assets	2023-11-15 13:54:30 +01:00
selina.mail	14b111ac79	Merge pull request 'add solution page' (#4 ) from solutionsPage into main Reviewed-on: jo.kuehner/TueIT_App#4	2023-11-15 08:57:12 +00:00
selina.mail	529292cea1	add solution page	2023-11-15 09:56:14 +01:00
selina.mail	ea68f44194	Merge pull request 'add asset page and its components' (#3 ) from assetPage into main Reviewed-on: jo.kuehner/TueIT_App#3	2023-11-15 08:22:20 +00:00