added the other components of the solution page

Reviewed-on: jo.kuehner/TueIT_App#5

components/server/Asset.vue

@@ -0,0 +1,204 @@
+<template>
+    <section class="information">
+        <h2 class="asset-name">Asset name</h2>
+        <div class="asset-data">
+            <div class="client-location">
+                <div class="data-field" id="client">
+                    <pre class="label">Client:</pre>
+                    <pre class="data">...</pre>
+                </div>
+                <div class="data-field" id="location">
+                    <pre class="label">Location:</pre>
+                    <pre class="data">...</pre>
+                </div>
+            </div>
+            <div class="info">
+                <div class="id-type">
+                    <div class="data-field" id="id">
+                        <pre class="label">ID:</pre>
+                        <pre class="data">...</pre>
+                    </div>
+                    <div class="data-field" id="type">
+                        <pre class="label">Type:</pre>
+                        <pre class="data">...</pre>
+                    </div>
+                </div>
+                <div class="data-field" id="remote-location">
+                    <pre class="label">Remote location:</pre>
+                    <pre class="data">...</pre>
+                </div>
+            </div>
+            <div class="rectangle-container">
+                <div class="rectangle"></div>
+            </div>
+        </div>
+        <div class="asset-data">
+            <div class="additional">
+                <div class="description">
+                    <h3 class="area-title">Description:</h3>
+                    <pre class="data" id="description">...</pre>
+                </div>
+            </div>
+            <div class="additional">
+                <div class="notes">
+                    <h3 class="area-title">Notes:</h3>
+                    <pre class="data" id="notes">...</pre>
+                </div>
+            </div>
+        </div>
+
+    </section>
+</template>
+    
+    
+    
+<script>
+
+export default {
+    name: "Asset",
+
+}
+
+</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);
+    background-color: #2c2c2c;
+}
+
+
+.asset-name {
+    align-self: stretch;
+    padding: 1rem 0;
+    color: #fff;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+}
+
+.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 {
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.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;
+    background-color: #212121;
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.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 {
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.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;
+    background: #212121;
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+}
+</style>

components/server/AssetTable.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="data">
         <div class="label">Last viewed:</div>
-        <table class="data-table" id="client-table">
+        <table class="data-table" id="asset-table">
             <tr class="table-row" id="table-head">
                 <th class="Client">Client</th>
                 <th class="Name">Name</th>

components/server/AssetTableNoClient.vue

@@ -0,0 +1,117 @@
+<template>
+    <div class="data">
+        <div class="label">Assets:</div>
+        <table class="data-table" id="asset-table-no-client">
+            <tr class="table-row" id="table-head">
+                <th class="Name">Name</th>
+                <th class="Type">Type</th>
+                <th class="State">State</th>
+                <th class="User">User</th>
+            </tr>
+            <tr class="table-row" id="row-1">
+                <td class="Name">...</td>
+                <td class="Type">...</td>
+                <td class="State">...</td>
+                <td class="User">...</td>
+            </tr>
+        </table>
+    </div>
+</template>
+  
+  
+  
+<script>
+
+export default {
+    name: "AssetTableNoClient",
+
+}
+
+</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);
+    background-color: #2c2c2c;
+}
+
+.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;
+    border-top: 0.0625rem solid #000000;
+}
+
+#table-head {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    color: #ffffff;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+
+.Name {
+    width: 50%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.Type {
+    width: 20%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.State {
+    width: 20%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.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;
+  color: #FFFFFF;
+}
+</style>

components/server/HardwareSpecifications.vue

@@ -0,0 +1,158 @@
+<template>
+    <section class="hardware-information">
+        <div class="label" id="hardware">Hardware specifications:</div>
+        <div class="asset-data">
+            <div class="model-CPU">
+                <div class="data-field" id="model">
+                    <pre class="label">Model:</pre>
+                    <pre class="data">...</pre>
+                </div>
+                <div class="data-field" id="CPU">
+                    <pre class="label">CPU:</pre>
+                    <pre class="data">...</pre>
+                </div>
+            </div>
+            <div class="serial-number-RAM">
+                <div class="data-field" id="serial-number">
+                    <pre class="label">Serial number:</pre>
+                    <pre class="data">...</pre>
+                </div>
+                <div class="data-field" id="RAM">
+                    <pre class="label">RAM:</pre>
+                    <pre class="data">...</pre>
+                </div>
+            </div>
+        </div>
+        <div class="asset-data">
+            <div class="additional">
+                <div class="storage-configuration">
+                    <h3 class="area-title">Storage configuration:</h3>
+                    <pre class="data" id="storage-configuration">...</pre>
+                </div>
+            </div>
+            <div class="additional">
+                <div class="miscellaneous">
+                    <h3 class="area-title">Miscellaneous:</h3>
+                    <pre class="data" id="miscellaneous">...</pre>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+    
+    
+    
+<script>
+
+export default {
+    name: "HardwareSpecifications",
+
+}
+
+</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);
+    background-color: #2c2c2c;
+}
+
+.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 {
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.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;
+    background-color: #212121;
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.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 {
+    color: #fff;
+    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,110 @@
+<template>
+    <section class="network-information">
+        <div class="label" id="network">Network specifications:</div>
+        <div class="asset-data">
+            <div class="IPv4-MAC">
+                <div class="data-field" id="IPv4">
+                    <pre class="label">IPv4:</pre>
+                    <pre class="data">...</pre>
+                </div>
+                <div class="data-field" id="MAC">
+                    <pre class="label">MAC:</pre>
+                    <pre class="data">...</pre>
+                </div>
+            </div>
+            <div class="IPv6-subnetmask">
+                <div class="data-field" id="IPv6">
+                    <pre class="label">IPv6:</pre>
+                    <pre class="data">...</pre>
+                </div>
+                <div class="data-field" id="subnetmask">
+                    <pre class="label">Subnetmask:</pre>
+                    <pre class="data">...</pre>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+    
+    
+    
+<script>
+
+export default {
+    name: "NetworkSpecifications",
+
+}
+
+</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);
+    background-color: #2c2c2c;
+}
+
+.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 {
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.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;
+    background-color: #212121;
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.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,121 @@
+<template>
+    <section class="software-information">
+        <div class="label" id="software">Software specifications:
+            <div class="asset-data">
+                <table class="data-table" id="asset-table-no-client">
+                    <tr class="table-row" id="table-head">
+                        <th class="Software">Software</th>
+                        <th class="Version">Version</th>
+                        <th class="License">License</th>
+                    </tr>
+                    <tr class="table-row" id="row-1">
+                        <td class="Software">...</td>
+                        <td class="Version">...</td>
+                        <td class="License">...</td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </section>
+</template>
+    
+    
+    
+<script>
+
+export default {
+    name: "SoftwareSpecifications",
+
+}
+
+</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);
+    background-color: #2c2c2c;
+}
+
+
+.label {
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.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;
+    border-top: 0.0625rem solid #000000;
+}
+
+#table-head {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    color: #ffffff;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+
+.Software {
+    width: 50%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.Version {
+    width: 25%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.License {
+    width: 25%;
+}
+</style>

components/server/Solution.vue

@@ -0,0 +1,198 @@
+<template>
+    <section class="information">
+        <h2 class="solution-name">Solution name</h2>
+        <div class="solution-data">
+            <div class="client-asset">
+                <div class="data-field" id="client">
+                    <pre class="label">Client:</pre>
+                    <pre class="data">...</pre>
+                </div>
+                <div class="data-field" id="asset">
+                    <pre class="label">Asset:</pre>
+                    <pre class="data">...</pre>
+                </div>
+            </div>
+            <div class="info">
+                <div class="data-field" id="user">
+                    <pre class="label">User:</pre>
+                    <pre class="data">...</pre>
+                </div>
+                <div class="type-state">
+                    <div class="data-field" id="type">
+                        <pre class="label">Type:</pre>
+                        <pre class="data">...</pre>
+                    </div>
+                    <div class="data-field" id="state">
+                        <pre class="label">State:</pre>
+                        <pre class="data">...</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="solution-data">
+            <div class="additional">
+                <div class="description">
+                    <h3 class="area-title">Description of the problem/intended use:</h3>
+                    <pre class="data" id="description">...</pre>
+                </div>
+            </div>
+        </div>
+        <div class="solution-data">
+            <div class="additional">
+                <div class="notes">
+                    <h3 class="area-title">Notes:</h3>
+                    <pre class="data" id="notes">...</pre>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+    
+    
+    
+<script>
+
+export default {
+    name: "Solution",
+
+}
+
+</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);
+    background-color: #2c2c2c;
+}
+
+
+.solution-name {
+    align-self: stretch;
+    padding: 1rem 0;
+    color: #fff;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+}
+
+.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 {
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.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;
+    background-color: #212121;
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.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 {
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.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,117 @@
+<template>
+    <div class="data">
+        <div class="label">Checklist:</div>
+        <table class="data-table" id="solution-checkklist">
+            <tr class="table-row" id="table-head">
+                <th class="Step">Step</th>
+                <th class="Asset">Asset</th>
+                <th class="Task">Task</th>
+                <th class="Comments">Comments</th>
+            </tr>
+            <tr class="table-row" id="row-1">
+                <td class="Step">...</td>
+                <td class="Asset">...</td>
+                <td class="Task">...</td>
+                <td class="Comments">...</td>
+            </tr>
+        </table>
+    </div>
+</template>
+  
+  
+  
+<script>
+
+export default {
+    name: "SolutionChecklist",
+
+}
+
+</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);
+    background-color: #2c2c2c;
+}
+
+.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;
+    border-top: 0.0625rem solid #000000;
+}
+
+#table-head {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    color: #ffffff;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+
+.Step {
+    width: 8%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset {
+    width: 22%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.Task {
+    width: 35%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.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;
+  color: #FFFFFF;
+}
+</style>

components/server/SolutionTable.vue

@@ -0,0 +1,123 @@
+<template>
+    <div class="data">
+        <div class="label">Last viewed:</div>
+        <table class="data-table" id="solution-table">
+            <tr class="table-row" id="table-head">
+                <th class="Client">Client</th>
+                <th class="Name">Name</th>
+                <th class="Asset">Asset</th>
+                <th class="Type">Type</th>
+                <th class="User">User</th>
+            </tr>
+            <tr class="table-row" id="row-1">
+                <td class="Client">...</td>
+                <td class="Name">...</td>
+                <td class="Asset">...</td>
+                <td class="Type">...</td>
+                <td class="User">...</td>
+            </tr>
+        </table>
+    </div>
+</template>
+  
+  
+  
+<script>
+
+export default {
+    name: "SolutionTable",
+
+}
+
+</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);
+    background-color: #2c2c2c;
+}
+
+.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;
+    border-top: 0.0625rem solid #000000;
+}
+
+#table-head {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    color: #ffffff;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.Client {
+    width: 33.3%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.Name {
+    width: 33.3%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset {
+    width: 12.7%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.Type {
+    width: 12.7%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.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;
+  color: #FFFFFF;
+}
+</style>

components/server/SolutionTableNoClient.vue

@@ -0,0 +1,116 @@
+<template>
+    <div class="data">
+        <div class="label">Solutions:</div>
+        <table class="data-table" id="solution-table">
+            <tr class="table-row" id="table-head">
+                <th class="Name">Name</th>
+                <th class="Asset">Asset</th>
+                <th class="Type">Type</th>
+                <th class="User">User</th>
+            </tr>
+            <tr class="table-row" id="row-1">
+                <td class="Name">...</td>
+                <td class="Asset">...</td>
+                <td class="Type">...</td>
+                <td class="User">...</td>
+            </tr>
+        </table>
+    </div>
+</template>
+  
+  
+  
+<script>
+
+export default {
+    name: "SolutionTableNoClient",
+
+}
+
+</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);
+    background-color: #2c2c2c;
+}
+
+.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;
+    border-top: 0.0625rem solid #000000;
+}
+
+#table-head {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    color: #ffffff;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.Name {
+    width: 45%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset {
+    width: 22.5%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.Type {
+    width: 22.5%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.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;
+  color: #FFFFFF;
+}
+</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" />

pages/assets.vue

@@ -6,6 +6,11 @@
         <div id="content-body">
           <ClientSearch />
           <AssetTable />
+          <AssetTableNoClient />
+          <Asset />
+          <HardwareSpecifications />
+          <SoftwareSpecifications />
+          <NetworkSpecifications />
         </div>
     </section>
 </template>
@@ -20,12 +25,22 @@
 <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,
     }
   }
 
@@ -65,6 +80,7 @@ import AssetTable from "../components/server/AssetTable.vue";
     letter-spacing: 5%;
     font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
       sans-serif;
+    text-decoration: underline;
   }
 
   #content-body {

pages/solutions.vue

@@ -0,0 +1,88 @@
+<template>
+    <section id="content">
+        <div id="content-header">
+            <h1 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,
+    }
+  }
+
+</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 {
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
+      sans-serif;
+    text-decoration: underline;
+  }
+
+  #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